feat(tokens): update color tokens pt3 (carbon-design-system#8376)

* feat(Tag): update color tokens * feat(Textarea): update color tokens * feat(TextInput): update color tokens * feat(Tile): update color tokens * feat(TimePicker): update color tokens * feat(Toggle): start token update * feat(Toggle): finish token update * feat(Tooltip): update color tokens * feat(Treeview): update color tokens * feat(UIShell): update a few color tokens * feat(globals): update global scssto new color tokens * fix(tokens): update tokens based on feedback Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
joshblack · Apr 23, 2021 · 3804612 · 3804612
1 parent d76b928
commit 3804612
Show file tree

Hide file tree

Showing 21 changed files with 198 additions and 181 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
@@ -275,9 +275,9 @@
     tbody
     tr:not(.#{$prefix}--parent-row):nth-child(even)
     td {
-    background-color: $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$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
@@ -273,9 +273,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 {
-    background-color: $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
+    background-color: $layer-accent;
+    border-top: 1px solid $layer-accent;
+    border-bottom: 1px solid $layer-accent;
   }
 
   .#{$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,13 +127,17 @@
   }
 
   .#{$prefix}--tag--high-contrast {
-    @include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
+    @include tag-theme(
+      $background-inverse,
+      $text-inverse,
+      $background-inverse-hover
+    );
   }
 
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
   .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
-    @include tag-theme($disabled-01, $disabled-02);
+    @include tag-theme($layer-disabled, $text-disabled);
 
     &:hover {
       cursor: not-allowed;
@@ -227,7 +231,7 @@
   }
 
   .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 1px $inverse-focus-ui;
+    box-shadow: inset 0 0 0 1px $focus-inverse;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
@@ -236,7 +240,7 @@
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   // small tags
@@ -258,7 +262,10 @@
   // Skeleton state
   .#{$prefix}--tag.#{$prefix}--skeleton {
     @include skeleton;
-    @include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
+    @include tag-theme(
+      $bg-color: $skeleton-background,
+      $text-color: $text-primary
+    );
 
     width: rem(60px);
     overflow: hidden;

diff --git a/packages/components/src/components/text-area/_text-area.scss b/packages/components/src/components/text-area/_text-area.scss
@@ -30,10 +30,10 @@
     height: 100%;
     min-height: rem(40px);
     padding: rem(11px) $carbon--spacing-05;
-    color: $text-01;
-    background-color: $field-01;
+    color: $text-primary;
+    background-color: $field;
     border: none;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $border-strong;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
     resize: vertical;
@@ -49,6 +49,7 @@
     @include type-style('body-long-01');
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-area--light {
     background-color: $field-02;
   }
@@ -67,24 +68,25 @@
     position: absolute;
     top: $carbon--spacing-04;
     right: $carbon--spacing-05;
-    fill: $support-01;
+    fill: $support-error;
   }
 
   //-----------------------------
   // Disabled
   //-----------------------------
   .#{$prefix}--text-area:disabled {
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $field-disabled;
     border-bottom: 1px solid transparent;
     outline: none;
     cursor: not-allowed;
   }
 
   .#{$prefix}--text-area:disabled::placeholder {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
+  // 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
@@ -28,10 +28,10 @@
     width: 100%;
     height: rem(40px);
     padding: 0 $carbon--spacing-05;
-    color: $text-01;
-    background-color: $field-01;
+    color: $text-primary;
+    background-color: $field;
     border: none;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $border-strong;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
 
@@ -63,6 +63,7 @@
     @include placeholder-colors;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-input--light {
     background-color: $field-02;
   }
@@ -82,11 +83,11 @@
       top: 50%;
       right: $carbon--spacing-05;
       transform: translateY(-50%);
-      fill: $support-01;
+      fill: $support-error;
     }
 
     .#{$prefix}--text-input__invalid-icon--warning {
-      fill: $support-03;
+      fill: $support-warning;
 
       path:first-of-type {
         opacity: 1;
@@ -121,7 +122,7 @@
 
       svg {
         transition: fill $duration--fast-01 motion(standard, productive);
-        fill: $icon-02;
+        fill: $icon-secondary;
 
         // Windows, Firefox HCM Fix
         @media screen and (-ms-high-contrast: active),
@@ -136,10 +137,11 @@
       @include focus-outline('outline');
     }
 
-    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover,
+    .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
+      svg,
     .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
       svg {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--text-input--invalid,
@@ -177,10 +179,10 @@
     + .#{$prefix}--text-input--password__visibility__toggle
     svg {
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
 
     &:hover {
-      fill: $disabled-02;
+      fill: $icon-disabled;
     }
   }
 
@@ -190,20 +192,21 @@
   .#{$prefix}--text-input:disabled {
     @include focus-outline('reset');
 
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $field-disabled;
     border-bottom: 1px solid transparent;
     // Needed to fix disabled text in Safari #6673
     -webkit-text-fill-color: currentColor;
     cursor: not-allowed;
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--text-input--light:disabled {
     background-color: $field-02;
   }
 
   .#{$prefix}--text-input:disabled::placeholder {
-    color: $disabled-02;
+    color: $text-disabled;
     opacity: 1;
   }
 
@@ -234,7 +237,7 @@
   //-----------------------------
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
-    background: $field-01;
+    background: $field;
     transition: background-color $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
   }
@@ -274,7 +277,7 @@
     + .#{$prefix}--text-input__divider {
     display: block;
     margin: 0 1rem;
-    border-color: $ui-03;
+    border-color: $border-subtle;
     border-style: solid;
     border-bottom: none;
   }
@@ -283,6 +286,7 @@
     top: rem(80px);
   }
 
+  // V11: Possibly deprecate
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
     background: $field-02;
   }