Revert "feat(tokens): update color tokens pt3 (#8376)" (#9067)

This reverts commit 3804612. Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Jul 1, 2021 · ff0c568 · ff0c568
1 parent 23fa6b9
commit ff0c568
Show file tree

Hide file tree

Showing 21 changed files with 191 additions and 177 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss
@@ -281,9 +281,9 @@
     tbody
     tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
-    border-top: 1px solid $layer-accent;
-    border-bottom: 1px solid $layer-accent;
-    background-color: $layer-accent;
+    border-top: 1px solid $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $data-table-zebra-color;
   }
 
   .#{$prefix}--data-table--zebra

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -271,9 +271,9 @@
 
   .#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
   .#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
-    border-top: 1px solid $layer-accent;
-    border-bottom: 1px solid $layer-accent;
-    background-color: $layer-accent;
+    border-top: 1px solid $data-table-zebra-color;
+    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $data-table-zebra-color;
   }
 
   .#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,

diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss
@@ -127,17 +127,13 @@
   }
 
   .#{$prefix}--tag--high-contrast {
-    @include tag-theme(
-      $background-inverse,
-      $text-inverse,
-      $background-inverse-hover
-    );
+    @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
   }
 
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
-    @include tag-theme($layer-disabled, $text-disabled);
+    @include tag-theme($disabled-01, $disabled-02);
 
     &:hover {
       cursor: not-allowed;
@@ -224,7 +220,7 @@
   }
 
   .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 1px $focus-inverse;
+    box-shadow: inset 0 0 0 1px $inverse-focus-ui;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
@@ -233,7 +229,7 @@
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
-    fill: $icon-disabled;
+    fill: $disabled-02;
   }
 
   // small tags
@@ -255,10 +251,7 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
-    @include tag-theme(
-      $bg-color: $skeleton-background,
-      $text-color: $text-primary
-    );
+    @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
 
     overflow: hidden;
     width: rem(60px);

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
@@ -31,9 +31,9 @@
     min-height: rem(40px);
     padding: rem(11px) $carbon--spacing-05;
     border: none;
-    border-bottom: 1px solid $border-strong;
-    background-color: $field;
-    color: $text-primary;
+    border-bottom: 1px solid $ui-04;
+    background-color: $field-01;
+    color: $text-01;
     resize: vertical;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
@@ -49,7 +49,6 @@
     @include type-style('body-long-01');
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--text-area--light {
     background-color: $field-02;
   }
@@ -68,25 +67,24 @@
     position: absolute;
     top: $carbon--spacing-04;
     right: $carbon--spacing-05;
-    fill: $support-error;
+    fill: $support-01;
   }
 
   //-----------------------------
   // Disabled
   //-----------------------------
   .#{$prefix}--text-area:disabled {
     border-bottom: 1px solid transparent;
-    background-color: $field-disabled;
-    color: $text-disabled;
+    background-color: $disabled-01;
+    color: $disabled-02;
     cursor: not-allowed;
     outline: none;
   }
 
   .#{$prefix}--text-area:disabled::placeholder {
-    color: $text-disabled;
+    color: $disabled-02;
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
     background-color: $field-02;
   }

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -29,9 +29,9 @@
     height: rem(40px);
     padding: 0 $carbon--spacing-05;
     border: none;
-    border-bottom: 1px solid $border-strong;
-    background-color: $field;
-    color: $text-primary;
+    border-bottom: 1px solid $ui-04;
+    background-color: $field-01;
+    color: $text-01;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
 
@@ -71,7 +71,6 @@
     @include placeholder-colors;
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--text-input--light {
     background-color: $field-02;
   }
@@ -95,11 +94,11 @@
   }
 
   .#{$prefix}--text-input__invalid-icon {
-    fill: $support-error;
+    fill: $support-01;
   }
 
   .#{$prefix}--text-input__invalid-icon--warning {
-    fill: $support-warning;
+    fill: $support-03;
   }
 
   .#{$prefix}--text-input__invalid-icon--warning path:first-of-type {
@@ -196,10 +195,10 @@
   .#{$prefix}--text-input:disabled
     + .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger svg {
     cursor: not-allowed;
-    fill: $icon-disabled;
+    fill: $disabled-02;
 
     &:hover {
-      fill: $icon-disabled;
+      fill: $disabled-02;
     }
   }
 
@@ -211,19 +210,19 @@
 
     border-bottom: 1px solid transparent;
     background-color: $field-disabled;
+
     color: $text-disabled;
     cursor: not-allowed;
     // Needed to fix disabled text in Safari #6673
     -webkit-text-fill-color: currentColor;
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--text-input--light:disabled {
     background-color: $field-02;
   }
 
   .#{$prefix}--text-input:disabled::placeholder {
-    color: $text-disabled;
+    color: $disabled-02;
     opacity: 1;
   }
 
@@ -254,7 +253,7 @@
   //-----------------------------
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
-    background: $field;
+    background: $field-01;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
   }
@@ -294,7 +293,7 @@
     + .#{$prefix}--text-input__divider {
     display: block;
     border-style: solid;
-    border-color: $border-subtle;
+    border-color: $ui-03;
     border-bottom: none;
     margin: 0 1rem;
   }
@@ -303,7 +302,6 @@
     top: rem(80px);
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
     background: $field-02;
   }

diff --git a/packages/components/src/components/tile/_tile.scss b/packages/components/src/components/tile/_tile.scss
@@ -28,7 +28,7 @@
     min-width: 8rem;
     min-height: 4rem;
     padding: $carbon--spacing-05;
-    background-color: $layer;
+    background-color: $ui-01;
     outline: 2px solid transparent;
     outline-offset: -2px;
 
@@ -37,7 +37,6 @@
     }
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--tile--light {
     background-color: $ui-02;
   }
@@ -49,7 +48,7 @@
     transition: $duration--moderate-01 motion(standard, productive);
 
     &:hover {
-      background: $layer-hover;
+      background: $hover-ui;
     }
   }
   .#{$prefix}--tile--expandable .#{$prefix}--link {
@@ -79,24 +78,27 @@
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-primary;
+    color: $text-01;
     text-decoration: none;
   }
 
   .#{$prefix}--tile--clickable:hover,
   .#{$prefix}--tile--clickable:active,
   .#{$prefix}--tile--clickable:visited,
   .#{$prefix}--tile--clickable:visited:hover {
-    color: $text-primary;
+    color: $text-01;
     text-decoration: none;
   }
 
   // Disabled ClickableTile
-  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled,
+  .#{$prefix}--tile--clickable.#{$prefix}--link--disabled {
+    color: $disabled-02;
+  }
+
   .#{$prefix}--tile--clickable:hover.#{$prefix}--link--disabled {
     display: block;
-    background-color: $layer-disabled;
-    color: $text-disabled;
+    background-color: $disabled-01;
+    color: $disabled-02;
   }
 
   .#{$prefix}--tile--selectable {
@@ -120,7 +122,7 @@
 
     svg {
       border-radius: 50%;
-      fill: $icon-secondary;
+      fill: $icon-02;
     }
 
     &:focus {
@@ -142,7 +144,7 @@
 
     svg {
       margin-left: $carbon--spacing-03;
-      fill: $icon-primary;
+      fill: $ui-05;
       transform-origin: center;
       transition: $duration--fast-02 motion(standard, productive);
 
@@ -211,15 +213,15 @@
   }
 
   .#{$prefix}--tile--is-selected {
-    border: 1px solid $layer-selected-inverse;
+    border: 1px solid $ui-05;
   }
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark {
     opacity: 1;
   }
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
-    fill: $icon-primary;
+    fill: $ui-05;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -229,6 +231,22 @@
     }
   }
 
+  // Fix double border
+  .#{$prefix}--tile-input--checked + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-01;
+  }
+
+  .#{$prefix}--tile:not(.#{$prefix}--tile--is-selected)
+    + .#{$prefix}--tile-input--checked
+    + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-05;
+  }
+
+  .#{$prefix}--tile-input--checked:first-of-type
+    + .#{$prefix}--tile--is-selected {
+    border-top: 1px solid $ui-05;
+  }
+
   .#{$prefix}--tile-content {
     width: 100%;
     height: 100%;
@@ -243,29 +261,23 @@
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable {
-    background-color: $layer;
-    color: $text-disabled;
+    background-color: $ui-01;
+    color: $disabled-02;
     cursor: not-allowed;
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
     background-color: $ui-02;
   }
 
   .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
-    border-color: $button-disabled;
-  }
-
-  .#{$prefix}--tile--disabled .#{$prefix}--tile__checkmark svg {
-    fill: $icon-disabled;
+    outline-color: $disabled-02;
   }
 
-  // Windows HCM fix
-  .#{$prefix}--tile__chevron svg,
-  .#{$prefix}--tile__checkmark svg,
-  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
-    @include high-contrast-mode('icon-fill');
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected
+    .#{$prefix}--tile__checkmark
+    svg {
+    fill: $disabled-02;
   }
 }
 

diff --git a/packages/components/src/components/time-picker/_time-picker.scss b/packages/components/src/components/time-picker/_time-picker.scss
@@ -61,19 +61,18 @@
     }
   }
 
-  // V11: Possibly deprecate
   .#{$prefix}--time-picker--light .#{$prefix}--select-input {
     background-color: $field-02;
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $hover-ui;
     }
 
     &:disabled,
     &:hover:disabled {
       border-bottom: 1px solid transparent;
       background-color: transparent;
-      color: $text-disabled;
+      color: $disabled-02;
       cursor: not-allowed;
     }
   }