From 101fd3c923da9811f26d1817972ca0c4b5afe65e Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:09:46 -0500
Subject: [PATCH 01/11] feat: overflow menu

---
 .../overflow-menu/_overflow-menu.scss         | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
index a192cdcbd849..2d15117e9f56 100644
--- a/packages/components/src/components/overflow-menu/_overflow-menu.scss
+++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -42,7 +42,7 @@
     }
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -72,7 +72,7 @@
     .#{$prefix}--overflow-menu__trigger {
     @include box-shadow;
 
-    background-color: $field-01;
+    background-color: $field;
     transition: none;
   }
 
@@ -80,12 +80,13 @@
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open
     .#{$prefix}--overflow-menu__trigger {
     background-color: $field-02;
+    // ?
   }
 
   .#{$prefix}--overflow-menu__icon {
     width: rem(16px);
     height: rem(16px);
-    fill: $icon-01;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -108,12 +109,12 @@
     align-items: flex-start;
     width: rem(160px);
     list-style: none;
-    background-color: $field-01;
+    background-color: $field;
 
     &::after {
       position: absolute;
       display: block;
-      background-color: $field-01;
+      background-color: $field;
       transition: background-color $duration--fast-02
         motion(entrance, productive);
       content: '';
@@ -121,11 +122,12 @@
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover {
-    background-color: $field-01;
+    background-color: $field;
   }
 
   .#{$prefix}--overflow-menu-options--light {
     background-color: $field-02;
+    // these tokens?
     &::after {
       background-color: $field-02;
     }
@@ -133,6 +135,7 @@
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
     background-color: $field-02;
+    // ?
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
@@ -233,7 +236,7 @@
   }
 
   .#{$prefix}--overflow-menu--divider {
-    border-top: 1px solid $ui-03;
+    border-top: 1px solid $border-subtle;
   }
 
   .#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
@@ -282,11 +285,11 @@
   }
 
   .#{$prefix}--overflow-menu-options__btn svg {
-    fill: $icon-02;
+    fill: $icon-secondary;
   }
 
   .#{$prefix}--overflow-menu-options__btn:hover svg {
-    fill: $icon-01;
+    fill: $icon-primary;
   }
 
   .#{$prefix}--overflow-menu-options__option-content {
@@ -296,15 +299,15 @@
   }
 
   .#{$prefix}--overflow-menu-options__option:hover {
-    background-color: $hover-ui;
+    background-color: $background-hover;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger
     .#{$prefix}--overflow-menu-options__btn:hover,
   .#{$prefix}--overflow-menu-options__option--danger
     .#{$prefix}--overflow-menu-options__btn:focus {
-    color: $text-04;
-    background-color: $danger-01;
+    color: $text-on-color;
+    background-color: $button-danger-primary;
 
     svg {
       fill: currentColor;
@@ -312,13 +315,13 @@
   }
 
   .#{$prefix}--overflow-menu-options__option--disabled:hover {
-    background-color: $ui-01;
+    background-color: $layer;
     cursor: not-allowed;
   }
 
   .#{$prefix}--overflow-menu-options__option--disabled
     .#{$prefix}--overflow-menu-options__btn {
-    color: $disabled-02;
+    color: $text-disabled;
     pointer-events: none;
 
     &:hover,
@@ -326,14 +329,14 @@
     &:focus {
       @include focus-outline('reset');
 
-      background-color: $ui-01;
+      background-color: $layer;
     }
   }
 
   .#{$prefix}--overflow-menu-options__option--disabled
     .#{$prefix}--overflow-menu-options__btn
     svg {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--overflow-menu--flip {

From e225fd3343c8b069c7e30e41ce291143432caf27 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:10:10 -0500
Subject: [PATCH 02/11] feat: pagination

---
 .../pagination-nav/_pagination-nav.scss       |  8 +++---
 .../components/pagination/_pagination.scss    | 26 +++++++++----------
 .../pagination/_unstable_pagination.scss      | 26 +++++++++----------
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/components/pagination-nav/_pagination-nav.scss b/packages/components/src/components/pagination-nav/_pagination-nav.scss
index 346ce87d886c..f009425a34b1 100644
--- a/packages/components/src/components/pagination-nav/_pagination-nav.scss
+++ b/packages/components/src/components/pagination-nav/_pagination-nav.scss
@@ -29,7 +29,7 @@
       display: block;
       width: 0;
       height: $carbon--spacing-02;
-      background-color: $interactive-01;
+      background-color: $background-brand;
       opacity: 0;
       transition: width $duration--fast-02 motion(standard, productive);
       content: '';
@@ -59,9 +59,9 @@
 /// @param {Number} $select-icon-top-position [$carbon--spacing-05]
 /// @param {Number} $select-icon-left-position [$carbon--spacing-05]
 @mixin pagination-nav(
-  $text-color: $text-02,
-  $text-color-active: $text-02,
-  $background-color-hover: $hover-ui,
+  $text-color: $text-secondary,
+  $text-color-active: $text-secondary,
+  $background-color-hover: $background-hover,
   $background-color-active: initial,
   $font-weight: 400,
   $item-padding: 0,
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
index 3d2d7e9fb666..253c54c69744 100644
--- a/packages/components/src/components/pagination/_pagination.scss
+++ b/packages/components/src/components/pagination/_pagination.scss
@@ -36,8 +36,8 @@ $css--helpers: true;
     width: calc(100% - 1px);
     min-height: rem(48px);
     overflow-x: auto;
-    background-color: $ui-01;
-    border-top: 1px solid $ui-03;
+    background-color: $layer;
+    border-top: 1px solid $border-subtle;
 
     @include carbon--breakpoint('md') {
       overflow: initial;
@@ -84,7 +84,7 @@ $css--helpers: true;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
-    background: $hover-ui;
+    background: $background-hover;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
@@ -95,13 +95,13 @@ $css--helpers: true;
   .#{$prefix}--pagination
     .#{$prefix}--select__item-count
     .#{$prefix}--select-input {
-    border-right: $spacing-4xs solid $ui-03;
+    border-right: $spacing-4xs solid $border-subtle;
   }
 
   .#{$prefix}--pagination
     .#{$prefix}--select__page-number
     .#{$prefix}--select-input {
-    border-left: 1px solid $ui-03;
+    border-left: 1px solid $border-subtle;
   }
 
   .#{$prefix}--pagination__left,
@@ -146,7 +146,7 @@ $css--helpers: true;
 
   span.#{$prefix}--pagination__text {
     margin-left: $carbon--spacing-05;
-    color: $text-02;
+    color: $text-secondary;
   }
 
   .#{$prefix}--pagination__button,
@@ -162,11 +162,11 @@ $css--helpers: true;
     background: none;
 
     border: none;
-    border-left: 1px solid $ui-03;
+    border-left: 1px solid $border-subtle;
     cursor: pointer;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -185,23 +185,23 @@ $css--helpers: true;
 
   .#{$prefix}--pagination__button:hover,
   .#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button {
-    background: $hover-ui;
+    background: $background-hover;
   }
 
   .#{$prefix}--pagination__button--no-index,
   .#{$prefix}--btn--ghost.#{$prefix}--pagination__button--no-index {
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--pagination__button:disabled:hover,
   .#{$prefix}--pagination__button--no-index:hover,
   .#{$prefix}--btn--ghost:disabled:hover.#{$prefix}--pagination__button,
   .#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button--no-index {
-    background: $ui-01;
-    border-color: $ui-03;
+    background: $layer;
+    border-color: $border-subtle;
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   // Skeleton state
diff --git a/packages/components/src/components/pagination/_unstable_pagination.scss b/packages/components/src/components/pagination/_unstable_pagination.scss
index c803b3eb27cb..72fc4012e38a 100644
--- a/packages/components/src/components/pagination/_unstable_pagination.scss
+++ b/packages/components/src/components/pagination/_unstable_pagination.scss
@@ -29,8 +29,8 @@ $css--helpers: true;
 
     width: 100%;
     height: rem(48px);
-    background-color: $ui-01;
-    border-top: 1px solid $ui-03;
+    background-color: $layer;
+    border-top: 1px solid $border-subtle;
     border-bottom: 1px solid transparent;
   }
 
@@ -40,7 +40,7 @@ $css--helpers: true;
     }
 
     margin: 0 $carbon--spacing-05;
-    color: $text-02;
+    color: $text-secondary;
   }
 
   .#{$prefix}--unstable-pagination__left,
@@ -79,7 +79,7 @@ $css--helpers: true;
     height: 100%;
     margin: 0;
     padding: 0 rem(14px);
-    color: $ui-05;
+    color: $layer-selected-inverse;
     background: none;
 
     border: none;
@@ -87,7 +87,7 @@ $css--helpers: true;
     cursor: pointer;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
   }
 
   // Unset height/width set by icon-only button:
@@ -101,25 +101,25 @@ $css--helpers: true;
   }
 
   .#{$prefix}--unstable-pagination__button:hover {
-    color: $ui-05;
-    background: $hover-ui;
+    color: $layer-selected-inverse;
+    background: $background-hover;
   }
 
   .#{$prefix}--unstable-pagination__button--no-index {
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--unstable-pagination__button.#{$prefix}--btn:disabled {
     background: transparent;
-    border-color: $ui-03;
+    border-color: $border-subtle;
   }
 
   .#{$prefix}--unstable-pagination__button:disabled:hover,
   .#{$prefix}--unstable-pagination__button--no-index:hover {
     background: transparent;
     cursor: not-allowed;
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--unstable-pagination__page-selector,
@@ -155,7 +155,7 @@ $css--helpers: true;
   .#{$prefix}--unstable-pagination__page-selector
     .#{$prefix}--select-input:hover,
   .#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input:hover {
-    background: $hover-ui;
+    background: $background-hover;
   }
 
   .#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow,
@@ -169,11 +169,11 @@ $css--helpers: true;
   }
 
   .#{$prefix}--unstable-pagination__page-selector {
-    border-left: 1px solid $ui-03;
+    border-left: 1px solid $border-subtle;
   }
 
   .#{$prefix}--unstable-pagination__page-sizer {
-    border-right: 1px solid $ui-03;
+    border-right: 1px solid $border-subtle;
   }
 }
 

From 0f804febfdea3fa82b80f03b2de245c55a0cd86c Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:10:21 -0500
Subject: [PATCH 03/11] feat: popover

---
 .../components/src/components/popover/_popover.scss    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/popover/_popover.scss b/packages/components/src/components/popover/_popover.scss
index e92a3403e468..8a0faeb009cd 100644
--- a/packages/components/src/components/popover/_popover.scss
+++ b/packages/components/src/components/popover/_popover.scss
@@ -13,7 +13,7 @@
 /// @access private
 /// @group popover
 @mixin popover {
-  $popover-text-color: $text-01;
+  $popover-text-color: $text-primary;
   $popover-caret-offset: 1rem;
   $popover-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
   $popover-offset: 8px;
@@ -39,17 +39,17 @@
     width: max-content;
     max-width: rem(368px);
     color: $popover-text-color;
-    background-color: $ui-01;
+    background-color: $layer;
     border-radius: 2px;
   }
 
   .#{$prefix}--popover--light .#{$prefix}--popover-contents {
-    background-color: $ui-background;
+    background-color: $background;
   }
 
   .#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
-    color: $inverse-01;
-    background-color: $inverse-02;
+    color: $text-inverse;
+    background-color: $background-inverse;
   }
 
   .#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,

From 3be9f3c23e8c20fcaef80c1383521db00617d1c9 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:10:37 -0500
Subject: [PATCH 04/11] feat: progress indicator

---
 .../_progress-indicator.scss                  | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index a5b931477387..2c2e95c9d615 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -62,7 +62,7 @@
     height: $carbon--spacing-05;
     margin: rem(10px) $carbon--spacing-03 0 0;
     border-radius: 50%;
-    fill: $interactive-04;
+    fill: $interactive;
   }
 
   .#{$prefix}--progress-label {
@@ -71,7 +71,7 @@
     max-width: rem(88px);
     margin: $carbon--spacing-03 0 0 0;
     overflow: hidden;
-    color: $text-01;
+    color: $text-primary;
     line-height: 1.45;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -85,15 +85,15 @@
   }
 
   .#{$prefix}--progress-label:hover {
-    color: $link-01;
-    box-shadow: 0 rem(1px) $link-01;
+    color: $link-primary;
+    box-shadow: 0 rem(1px) $link-primary;
     cursor: pointer;
   }
 
   .#{$prefix}--progress-label:focus {
-    color: $link-01;
+    color: $link-primary;
     outline: none;
-    box-shadow: 0 rem(3px) 0 0 $link-01;
+    box-shadow: 0 rem(3px) 0 0 $link-primary;
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
@@ -102,8 +102,8 @@
   }
 
   .#{$prefix}--progress-label:active {
-    color: $interactive-01;
-    box-shadow: 0 rem(3px) 0 0 $interactive-01;
+    color: $background-brand;
+    box-shadow: 0 rem(3px) 0 0 $background-brand;
   }
 
   //OVERFLOW STYLING
@@ -134,7 +134,7 @@
     margin-top: rem(40px);
     margin-left: rem(22px);
     padding: $carbon--spacing-03 $carbon--spacing-05;
-    color: $inverse-01;
+    color: $text-inverse;
     visibility: hidden;
   }
 
@@ -144,7 +144,7 @@
 
     width: rem(150px);
     height: auto;
-    color: $inverse-01;
+    color: $text-inverse;
   }
 
   //OPTIONAL HELPER TEXT STYLING
@@ -155,32 +155,32 @@
     left: 0;
     margin-top: rem(28px);
     margin-left: $carbon--spacing-06;
-    color: $text-02;
+    color: $text-secondary;
     text-align: start;
   }
 
   //CURRENT STYLING
   .#{$prefix}--progress-step--current {
     .#{$prefix}--progress-line {
-      background-color: $interactive-04;
+      background-color: $interactive;
     }
   }
 
   //INCOMPLETE STYLING
   .#{$prefix}--progress-step--incomplete {
     svg {
-      fill: $ui-05;
+      fill: $layer-selected-inverse;
     }
 
     .#{$prefix}--progress-line {
-      background-color: $ui-03;
+      background-color: $layer-accent;
     }
   }
 
   //COMPLETED STYLING
   .#{$prefix}--progress-step--complete {
     .#{$prefix}--progress-line {
-      background-color: $interactive-04;
+      background-color: $interactive;
     }
   }
 
@@ -200,15 +200,15 @@
 
   .#{$prefix}--progress-step-button--unclickable
     .#{$prefix}--progress-label:hover {
-    color: $text-01;
+    color: $text-primary;
     box-shadow: none;
     cursor: default;
   }
 
   .#{$prefix}--progress-step-button--unclickable
     .#{$prefix}--tooltip__label:hover {
-    color: $link-01;
-    box-shadow: 0 rem(1px) $link-01;
+    color: $link-primary;
+    box-shadow: 0 rem(1px) $link-primary;
     cursor: pointer;
   }
 
@@ -248,7 +248,7 @@
 
   // ERROR STYLING
   .#{$prefix}--progress__warning > * {
-    fill: $support-01;
+    fill: $support-error;
   }
 
   // Skeleton State

From c6f8009ad99ba7c5798b7030843e5d3af239a75b Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:10:49 -0500
Subject: [PATCH 05/11] feat: radio

---
 .../src/components/radio-button/_radio-button.scss          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
index 4d255d272d6c..3b12269dd05a 100644
--- a/packages/components/src/components/radio-button/_radio-button.scss
+++ b/packages/components/src/components/radio-button/_radio-button.scss
@@ -72,7 +72,7 @@
     height: rem(18px);
     margin: rem(2px) $carbon--spacing-03 rem(2px) rem(2px);
     background-color: transparent;
-    border: $radio-border-width solid $icon-01;
+    border: $radio-border-width solid $icon-primary;
     border-radius: 50%;
   }
 
@@ -82,14 +82,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-color: $icon-01;
+    border-color: $icon-primary;
 
     &::before {
       position: relative;
       display: inline-block;
       width: 100%;
       height: 100%;
-      background-color: $icon-01;
+      background-color: $icon-primary;
       border-radius: 50%;
       transform: scale(0.5);
       content: '';

From 3b30b4b3ef01f3e71ee07a7b5147de420fb74c43 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:11:00 -0500
Subject: [PATCH 06/11] feat: search

---
 .../src/components/search/_search.scss        | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
index d3c3605a3f8a..2267043fb844 100644
--- a/packages/components/src/components/search/_search.scss
+++ b/packages/components/src/components/search/_search.scss
@@ -38,11 +38,11 @@
     order: 1;
     width: 100%;
     padding: 0 $carbon--spacing-08;
-    color: $text-01;
+    color: $text-primary;
     text-overflow: ellipsis;
-    background-color: $field-01;
+    background-color: $field;
     border: none;
-    border-bottom: 1px solid $ui-04;
+    border-bottom: 1px solid $border-strong;
     transition: background-color $duration--fast-02 motion(standard, productive),
       outline $duration--fast-02 motion(standard, productive);
     appearance: none;
@@ -62,7 +62,7 @@
 
   .#{$prefix}--search-input[disabled] {
     color: $disabled;
-    background-color: $disabled-01;
+    background-color: $field-disabled;
     border-bottom: 1px solid transparent;
     cursor: not-allowed;
 
@@ -70,8 +70,7 @@
       color: $disabled;
     }
   }
-
-  .#{$prefix}--search--light .#{$prefix}--search-input {
+  ß .#{$prefix}--search--light .#{$prefix}--search-input {
     background: $field-02;
   }
 
@@ -118,7 +117,7 @@
     height: rem(16px);
     transform: translateY(-50%);
     pointer-events: none;
-    fill: $icon-02;
+    fill: $icon-secondary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -143,14 +142,14 @@
       display: block;
       width: 2px;
       height: calc(100% - 2px);
-      background-color: $field-01;
+      background-color: $field;
       transition: background-color $duration--fast-02
         motion(standard, productive);
       content: '';
     }
 
     &:hover {
-      border-bottom: 1px solid $ui-04;
+      border-bottom: 1px solid $border-strong;
 
       &::before {
         background-color: $hover-field;
@@ -161,7 +160,7 @@
   .#{$prefix}--search-button {
     flex-shrink: 0;
     margin-left: $carbon--spacing-01;
-    background-color: $field-01;
+    background-color: $field;
 
     svg {
       vertical-align: middle;
@@ -196,7 +195,7 @@
       background-color $duration--fast-02 motion(standard, productive),
       outline $duration--fast-02 motion(standard, productive),
       border $duration--fast-02 motion(standard, productive);
-    fill: $icon-01;
+    fill: $icon-primary;
 
     &:hover {
       background-color: $hover-field;
@@ -209,7 +208,7 @@
     &:active {
       @include focus-outline('outline');
 
-      background-color: $selected-ui;
+      background-color: $background-selected;
     }
   }
 
@@ -333,7 +332,7 @@
   }
 
   .#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {
-    background-color: $hover-ui;
+    background-color: $background-hover;
   }
 
   .#{$prefix}--search--expandable.#{$prefix}--search--expanded
@@ -342,12 +341,12 @@
   }
 
   .#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon {
-    fill: $icon-01;
+    fill: $icon-primary;
   }
 
   .#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-magnifier-icon {
-    fill: $icon-02;
+    fill: $icon-secondary;
   }
 }
 

From eb72e135f75f5e6411aab730a0c0f4bcfa11176a Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:11:38 -0500
Subject: [PATCH 07/11] feat: select

---
 .../src/components/select/_select.scss        | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
index 33603fd24908..09ae67179e75 100644
--- a/packages/components/src/components/select/_select.scss
+++ b/packages/components/src/components/select/_select.scss
@@ -45,10 +45,10 @@
     width: 100%;
     height: rem(40px);
     padding: 0 $spacing-09 0 $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;
     border-radius: 0;
     cursor: pointer;
     // reset disabled <select> opacity
@@ -59,7 +59,7 @@
     appearance: none;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     // Hide default select arrow in IE10+
@@ -81,14 +81,14 @@
     &:focus {
       @include focus-outline('outline');
 
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:disabled,
     &:hover:disabled {
-      color: $disabled-02;
-      background-color: $disabled-01;
-      border-bottom-color: $disabled-01;
+      color: $text-disabled;
+      background-color: $field-disabled;
+      border-bottom-color: $border-disabled;
       cursor: not-allowed;
     }
   }
@@ -107,7 +107,7 @@
 
   .#{$prefix}--select--disabled .#{$prefix}--label,
   .#{$prefix}--select--disabled .#{$prefix}--form__helper-text {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
   .#{$prefix}--select-input__wrapper[data-invalid] .#{$prefix}--select-input,
@@ -116,19 +116,19 @@
   }
 
   .#{$prefix}--select-input:disabled ~ .#{$prefix}--select__arrow {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--select--light .#{$prefix}--select-input {
     background-color: $field-02;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     &:disabled,
     &:hover:disabled {
-      color: $disabled-02;
+      color: $text-disabled;
       background-color: $field-02;
       cursor: not-allowed;
     }
@@ -140,7 +140,7 @@
     right: $spacing-05;
     height: 100%;
     pointer-events: none;
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -160,11 +160,11 @@
   .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input
     ~ .#{$prefix}--select__invalid-icon {
-    fill: $support-01;
+    fill: $support-error;
   }
 
   .#{$prefix}--select__invalid-icon--warning {
-    fill: $support-03;
+    fill: $support-warning;
   }
 
   .#{$prefix}--select__invalid-icon--warning path[fill] {
@@ -175,18 +175,18 @@
   .#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
-    color: $text-01;
+    color: $text-primary;
   }
 
   // Override some Firefox user-agent styles
   @-moz-document url-prefix() {
     .#{$prefix}--select-option {
-      color: $text-01;
-      background-color: $ui-01;
+      color: $text-primary;
+      background-color: $layer;
     }
 
     .#{$prefix}--select-optgroup {
-      color: $text-01;
+      color: $text-primary;
     }
   }
 
@@ -218,14 +218,14 @@
     width: auto;
     padding-right: $spacing-07;
     padding-left: $carbon--spacing-03;
-    color: $text-01;
+    color: $text-primary;
     background-color: transparent;
     border-bottom: none;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
-    background-color: $disabled-01;
+    background-color: $field-disabled;
   }
 
   .#{$prefix}--select--inline .#{$prefix}--select__arrow {

From 96bb71c403b1829bebf46368465324e18c084a24 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:11:49 -0500
Subject: [PATCH 08/11] feat: slider

---
 .../src/components/slider/_slider.scss        | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
index 335ce0bac954..0e99f122ef1e 100644
--- a/packages/components/src/components/slider/_slider.scss
+++ b/packages/components/src/components/slider/_slider.scss
@@ -37,7 +37,7 @@
   .#{$prefix}--slider__range-label {
     @include type-style('code-02');
 
-    color: $text-01;
+    color: $text-primary;
     white-space: nowrap;
 
     &:last-of-type {
@@ -49,7 +49,7 @@
     position: absolute;
     width: 100%;
     height: rem(2px);
-    background: $ui-03;
+    background: $layer-accent;
     transform: translate(0%, -50%);
     cursor: pointer;
 
@@ -68,7 +68,7 @@
     display: inline-block;
     width: rem(2px);
     height: rem(4px);
-    background: $ui-03;
+    background: $layer-accent;
     transform: translate(-50%, 0);
     content: '';
   }
@@ -77,7 +77,7 @@
     position: absolute;
     width: 100%;
     height: rem(2px);
-    background: $ui-05;
+    background: $layer-selected-inverse;
     transform: translate(0%, -50%);
     transform-origin: left;
     transition: background $duration--fast-02 motion(standard, productive);
@@ -97,7 +97,7 @@
     z-index: 3;
     width: rem(14px);
     height: rem(14px);
-    background: $ui-05;
+    background: $layer-selected-inverse;
     border-radius: 50%;
     outline: none;
     box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
@@ -113,8 +113,8 @@
     }
 
     &:focus {
-      background-color: $interactive-04;
-      box-shadow: inset 0 0 0 2px $interactive-04, inset 0 0 0 3px $ui-01;
+      background-color: $interactive;
+      box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
       transform: translate(-50%, -50%) scale(1.4286);
 
@@ -125,7 +125,7 @@
     }
 
     &:active {
-      box-shadow: inset 0 0 0 2px $interactive-04;
+      box-shadow: inset 0 0 0 2px $interactive;
       transform: translate(-50%, -50%) scale(1.4286);
     }
 
@@ -155,18 +155,18 @@
   }
 
   .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
-    background-color: $interactive-04;
+    background-color: $interactive;
   }
 
   // Disabled state
   .#{$prefix}--label--disabled
     ~ .#{$prefix}--slider-container
     > .#{$prefix}--slider__range-label {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
-    background-color: $ui-03;
+    background-color: $layer-accent;
 
     &:hover {
       transform: translate(-50%, -50%);
@@ -174,14 +174,14 @@
     }
 
     &:focus {
-      background-color: $ui-03;
+      background-color: $layer-accent;
       outline: none;
       box-shadow: none;
       transform: translate(-50%, -50%);
     }
 
     &:active {
-      background: $ui-03;
+      background: $layer-accent;
       transform: translate(-50%, -50%);
     }
   }
@@ -191,7 +191,7 @@
   .#{$prefix}--slider--disabled
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
-    background-color: $ui-03;
+    background-color: $layer-accent;
     cursor: not-allowed;
   }
 
@@ -199,8 +199,8 @@
     ~ .#{$prefix}--form-item
     .#{$prefix}--slider-text-input,
   .#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
-    color: $disabled-02;
-    background-color: $disabled-01;
+    color: $text-disabled;
+    background-color: $field-disabled;
     border: none;
     cursor: not-allowed;
     transition: none;
@@ -208,7 +208,7 @@
     &:active,
     &:focus,
     &:hover {
-      color: $disabled-02;
+      color: $text-disabled;
       outline: none;
     }
   }

From b09def90254deb21e0d7e0ab3aca5cf1dad2e957 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:12:01 -0500
Subject: [PATCH 09/11] feat: structured list

---
 .../structured-list/_structured-list.scss     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index 1291a2cfe954..a4da426cb9df 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -47,7 +47,7 @@
 
   .#{$prefix}--structured-list-row {
     display: table-row;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $border-subtle;
     transition: background-color $duration--fast-02 motion(standard, productive);
   }
 
@@ -59,11 +59,11 @@
   }
 
   .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected {
-    background-color: $selected-ui;
+    background-color: $background-selected;
   }
 
   .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--header-row {
-    border-bottom: 1px solid $selected-ui;
+    border-bottom: 1px solid $background-selected;
     cursor: inherit;
   }
 
@@ -77,16 +77,16 @@
     > .#{$prefix}--structured-list-td,
   .#{$prefix}--structured-list-row.#{$prefix}--structured-list-row--selected
     > .#{$prefix}--structured-list-td {
-    color: $text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td {
     @if feature-flag-enable('enabled-2021-release') {
-      border-top: 1px solid $ui-03;
+      border-top: 1px solid $border-subtle;
     } @else {
-      border-top: 1px solid $ui-01;
+      border-top: 1px solid $layer;
     }
   }
 
@@ -102,7 +102,7 @@
 
     display: table-cell;
     height: rem(40px);
-    color: $text-01;
+    color: $text-primary;
     font-weight: 600;
     text-align: left;
     text-transform: $structured-list-text-transform;
@@ -122,9 +122,9 @@
     position: relative;
     display: table-cell;
     max-width: 36rem;
-    color: $text-02;
+    color: $text-secondary;
     @if feature-flag-enabled('enable-2021-release') {
-      border-top: 1px solid $ui-03;
+      border-top: 1px solid $border-subtle;
     }
 
     transition: color $duration--fast-02 motion(standard, productive);
@@ -151,7 +151,7 @@
   .#{$prefix}--structured-list-input:checked
     + .#{$prefix}--structured-list-td
     .#{$prefix}--structured-list-svg {
-    fill: $icon-01;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),

From 7b00f0b15880c0252a7c6b9e7282e496befc36e0 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Thu, 15 Apr 2021 17:12:11 -0500
Subject: [PATCH 10/11] feat: tabs

---
 .../components/src/components/tabs/_tabs.scss | 122 ++++++++++--------
 1 file changed, 65 insertions(+), 57 deletions(-)

diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 228c61e23453..95ecaeaf4515 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -25,7 +25,7 @@
     position: relative;
     width: 100%;
     height: auto;
-    color: $text-01;
+    color: $text-primary;
     @include carbon--breakpoint(md) {
       min-height: rem(40px);
       background: none;
@@ -44,9 +44,9 @@
     justify-content: space-between;
     height: rem(40px);
     padding: 0 $spacing-09 0 $spacing-05;
-    color: $text-01;
-    background-color: $field-01;
-    border-bottom: 1px solid $ui-04;
+    color: $text-primary;
+    background-color: $field;
+    border-bottom: 1px solid $border-strong;
     outline: 2px solid transparent;
     cursor: pointer;
     @include carbon--breakpoint(md) {
@@ -63,7 +63,7 @@
     position: absolute;
     right: $spacing-05;
     transition: transform $duration--fast-01 motion(standard, productive);
-    fill: $ui-05;
+    fill: $border-inverse;
   }
 
   .#{$prefix}--tabs-trigger--open:focus,
@@ -74,7 +74,7 @@
   }
 
   .#{$prefix}--tabs-trigger--open {
-    background: $ui-03;
+    background: $layer-accent;
   }
 
   .#{$prefix}--tabs-trigger--open svg {
@@ -89,7 +89,7 @@
   .#{$prefix}--tabs-trigger-text {
     padding-top: 2px;
     overflow: hidden;
-    color: $text-01;
+    color: $text-primary;
     font-weight: 400;
     white-space: nowrap;
     text-decoration: none;
@@ -97,7 +97,7 @@
   }
 
   .#{$prefix}--tabs-trigger-text:hover {
-    color: $text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--tabs-trigger-text:focus {
@@ -117,7 +117,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
-    background: $ui-01;
+    background: $layer;
     transition: max-height $duration--fast-01 motion(standard, productive);
 
     @include carbon--breakpoint(md) {
@@ -154,7 +154,7 @@
     width: 100%;
     height: rem(40px);
     padding: 0;
-    background-color: $ui-01;
+    background-color: $layer;
     cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive);
 
@@ -170,12 +170,12 @@
 
   .#{$prefix}--tabs--container .#{$prefix}--tabs__nav-item {
     @include carbon--breakpoint(md) {
-      background-color: $ui-03;
+      background-color: $layer-accent;
 
       + .#{$prefix}--tabs__nav-item {
         margin-left: 0;
         // Draws the border without affecting the inner-content
-        box-shadow: -1px 0 0 0 $ui-04;
+        box-shadow: -1px 0 0 0 $border-strong;
       }
 
       + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
@@ -201,8 +201,8 @@
   }
 
   .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    background-color: $hover-ui;
-    box-shadow: 0 -1px 0 $hover-ui;
+    background-color: $background-hover;
+    box-shadow: 0 -1px 0 $background-hover;
 
     @include carbon--breakpoint(md) {
       background-color: transparent;
@@ -216,7 +216,7 @@
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
     @include carbon--breakpoint(md) {
-      background-color: $hover-selected-ui;
+      background-color: $background-selected-hover;
     }
   }
 
@@ -234,7 +234,7 @@
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
     @include carbon--breakpoint(md) {
-      background-color: $disabled-02;
+      background-color: $button-disabled;
     }
   }
 
@@ -242,7 +242,7 @@
     .#{$prefix}--tabs__nav-item--disabled
     .#{$prefix}--tabs__nav-link {
     @include carbon--breakpoint(md) {
-      color: $disabled-03;
+      color: $text-on-color-disabled;
       border-bottom: none;
     }
   }
@@ -262,8 +262,8 @@
       .#{$prefix}--tabs__nav-link:active {
         @include type-style('productive-heading-01');
 
-        color: $text-01;
-        border-bottom: 2px solid $interactive-04;
+        color: $text-primary;
+        border-bottom: 2px solid $border-interactive;
       }
     }
   }
@@ -273,7 +273,7 @@
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item--selected:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
     @include carbon--breakpoint(md) {
-      background-color: $ui-01;
+      background-color: $layer;
 
       .#{$prefix}--tabs__nav-link {
         padding: $spacing-03 $spacing-05;
@@ -281,7 +281,7 @@
         // Draws the border without affecting the inner-content
         line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
         border-bottom: none;
-        box-shadow: inset 0 2px 0 0 $interactive-04;
+        box-shadow: inset 0 2px 0 0 $border-interactive;
       }
 
       .#{$prefix}--tabs__nav-link:focus,
@@ -303,13 +303,13 @@
     margin: 0 $spacing-05;
     padding: $spacing-04 0;
     overflow: hidden;
-    color: $text-02;
+    color: $text-secondary;
     font-weight: 400;
     line-height: 1rem;
     white-space: nowrap;
     text-decoration: none;
     text-overflow: ellipsis;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $border-subtle;
     transition: border $duration--fast-01 motion(standard, productive),
       outline $duration--fast-01 motion(standard, productive);
 
@@ -352,9 +352,9 @@
   //-----------------------------
   .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled)
     .#{$prefix}--tabs__nav-link {
-    color: $text-01;
+    color: $text-primary;
     @include carbon--breakpoint(md) {
-      color: $text-01;
+      color: $text-primary;
       border-bottom: $tab-underline-color-hover;
     }
   }
@@ -394,7 +394,7 @@
     .#{$prefix}--tabs__nav-link:focus,
   .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(.#{$prefix}--tabs__nav-item--disabled):not(.#{$prefix}--tabs__nav-item--selected)
     a.#{$prefix}--tabs__nav-link:active {
-    color: $text-02;
+    color: $text-secondary;
   }
 
   //-----------------------------
@@ -418,7 +418,7 @@
 
   .#{$prefix}--skeleton.#{$prefix}--tabs--scrollable:not(.#{$prefix}--tabs--scrollable--container)
     .#{$prefix}--tabs--scrollable__nav-item {
-    border-bottom: 2px solid $skeleton-02;
+    border-bottom: 2px solid $skeleton-element;
   }
 
   .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link {
@@ -456,7 +456,7 @@
     width: 100%;
     height: auto;
     min-height: rem(40px);
-    color: $text-01;
+    color: $text-primary;
 
     &.#{$prefix}--tabs--scrollable--container {
       min-height: rem(48px);
@@ -494,32 +494,32 @@
 
     .#{$prefix}--tabs__overflow-indicator--left {
       margin-right: -$carbon--spacing-03;
-      background-image: linear-gradient(to left, transparent, $ui-background);
+      background-image: linear-gradient(to left, transparent, $background);
     }
 
     .#{$prefix}--tabs__overflow-indicator--right {
       margin-left: -$carbon--spacing-03;
-      background-image: linear-gradient(to right, transparent, $ui-background);
+      background-image: linear-gradient(to right, transparent, $background);
     }
 
     .#{$prefix}--tabs--scrollable--light
       .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $ui-01);
+      background-image: linear-gradient(to left, transparent, $layer);
     }
 
     .#{$prefix}--tabs--scrollable--light
       .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $ui-01);
+      background-image: linear-gradient(to right, transparent, $layer);
     }
 
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $ui-03);
+      background-image: linear-gradient(to left, transparent, $layer-accent);
     }
 
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $ui-03);
+      background-image: linear-gradient(to right, transparent, $layer-accent);
     }
 
     // Safari-only media query
@@ -530,27 +530,35 @@
         .#{$prefix}--tabs__overflow-indicator--left {
           background-image: linear-gradient(
             to left,
-            rgba($ui-background, 0),
-            $ui-background
+            rgba($background, 0),
+            $background
           );
         }
 
         .#{$prefix}--tabs__overflow-indicator--right {
           background-image: linear-gradient(
             to right,
-            rgba($ui-background, 0),
-            $ui-background
+            rgba($background, 0),
+            $background
           );
         }
 
         &.#{$prefix}--tabs--scrollable--container
           .#{$prefix}--tabs__overflow-indicator--left {
-          background-image: linear-gradient(to left, rgba($ui-03, 0), $ui-03);
+          background-image: linear-gradient(
+            to left,
+            rgba($layer-accent, 0),
+            $layer-accent
+          );
         }
 
         &.#{$prefix}--tabs--scrollable--container
           .#{$prefix}--tabs__overflow-indicator--right {
-          background-image: linear-gradient(to right, rgba($ui-03, 0), $ui-03);
+          background-image: linear-gradient(
+            to right,
+            rgba($layer-accent, 0),
+            $layer-accent
+          );
         }
       }
     }
@@ -577,11 +585,11 @@
       .#{$prefix}--tab--overflow-nav-button {
       width: $carbon--spacing-09;
       margin: 0;
-      background-color: $ui-03;
+      background-color: $layer-accent;
     }
 
     .#{$prefix}--tab--overflow-nav-button svg {
-      fill: $icon-01;
+      fill: $icon-primary;
     }
 
     //-----------------------------
@@ -604,7 +612,7 @@
 
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item {
-      background-color: $ui-03;
+      background-color: $layer-accent;
     }
 
     &.#{$prefix}--tabs--scrollable--container
@@ -612,7 +620,7 @@
       + .#{$prefix}--tabs--scrollable__nav-item {
       margin-left: 0;
       // Draws the border without affecting the inner-content
-      box-shadow: rem(-1px) 0 0 0 $ui-04;
+      box-shadow: rem(-1px) 0 0 0 $border-strong;
     }
 
     &.#{$prefix}--tabs--scrollable--container
@@ -636,7 +644,7 @@
     //-----------------------------
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item:hover {
-      background-color: $hover-selected-ui;
+      background-color: $background-selected-hover;
     }
 
     //---------------------------------------------
@@ -653,7 +661,7 @@
       .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled,
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item.#{$prefix}--tabs--scrollable__nav-item--disabled:hover {
-      background-color: $disabled-02;
+      background-color: $button-disabled;
     }
 
     //-----------------------------
@@ -671,15 +679,15 @@
       .#{$prefix}--tabs--scrollable__nav-link:active {
       @include type-style('productive-heading-01');
 
-      color: $text-01;
-      border-bottom: 2px solid $interactive-04;
+      color: $text-primary;
+      border-bottom: 2px solid $border-interactive;
     }
 
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item--selected,
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
-      background-color: $ui-01;
+      background-color: $layer;
 
       .#{$prefix}--tabs--scrollable__nav-link:focus,
       .#{$prefix}--tabs--scrollable__nav-link:active {
@@ -693,14 +701,14 @@
       // height - vertical padding
       line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
       // Draws the border without affecting the inner-content
-      box-shadow: inset 0 2px 0 0 $interactive-04;
+      box-shadow: inset 0 2px 0 0 $border-interactive;
     }
 
     &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item--selected,
     &.#{$prefix}--tabs--scrollable--light.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item--selected:hover {
-      background-color: $ui-background;
+      background-color: $background;
     }
 
     //-----------------------------
@@ -714,7 +722,7 @@
       width: rem(160px);
       padding: $spacing-04 $spacing-05 $spacing-03;
       overflow: hidden;
-      color: $text-02;
+      color: $text-secondary;
       white-space: nowrap;
       text-align: left;
       text-decoration: none;
@@ -743,7 +751,7 @@
     //-----------------------------
     .#{$prefix}--tabs--scrollable__nav-item:hover
       .#{$prefix}--tabs--scrollable__nav-link {
-      color: $text-01;
+      color: $text-primary;
       border-bottom: $tab-underline-color-hover;
     }
 
@@ -781,13 +789,13 @@
     .#{$prefix}--tabs--scrollable--light
       .#{$prefix}--tabs--scrollable__nav-item--disabled
       .#{$prefix}--tabs--scrollable__nav-link {
-      border-bottom-color: $ui-03;
+      border-bottom-color: $border-subtle;
     }
 
     .#{$prefix}--tabs--scrollable--light
       .#{$prefix}--tabs--scrollable__nav-item--disabled:hover
       .#{$prefix}--tabs--scrollable__nav-link {
-      border-bottom-color: $ui-03;
+      border-bottom-color: $border-subtle;
     }
 
     .#{$prefix}--tabs--scrollable--light
@@ -796,13 +804,13 @@
     .#{$prefix}--tabs--scrollable--light
       .#{$prefix}--tabs--scrollable__nav-item--disabled
       .#{$prefix}--tabs--scrollable__nav-link:active {
-      border-bottom-color: $ui-03;
+      border-bottom-color: $border-subtle;
     }
 
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item--disabled
       .#{$prefix}--tabs--scrollable__nav-link {
-      color: $disabled-03;
+      color: $text-on-color-disabled;
       border-bottom: none;
     }
 

From 80d2ac5d25c03853abdc61094ebc06d6f7444513 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 23 Apr 2021 11:04:40 -0500
Subject: [PATCH 11/11] fix: update tokens

---
 .../components/overflow-menu/_overflow-menu.scss    | 13 +++++--------
 .../src/components/pagination/_pagination.scss      |  4 ++--
 .../components/pagination/_unstable_pagination.scss |  8 ++++----
 .../progress-indicator/_progress-indicator.scss     |  4 ++--
 .../components/src/components/search/_search.scss   |  2 +-
 .../components/src/components/select/_select.scss   |  2 +-
 .../components/src/components/slider/_slider.scss   | 12 ++++++------
 packages/components/src/components/tabs/_tabs.scss  | 10 +++++-----
 8 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/packages/components/src/components/overflow-menu/_overflow-menu.scss b/packages/components/src/components/overflow-menu/_overflow-menu.scss
index 2d15117e9f56..c1e5abcd0d04 100644
--- a/packages/components/src/components/overflow-menu/_overflow-menu.scss
+++ b/packages/components/src/components/overflow-menu/_overflow-menu.scss
@@ -72,7 +72,7 @@
     .#{$prefix}--overflow-menu__trigger {
     @include box-shadow;
 
-    background-color: $field;
+    background-color: $layer;
     transition: none;
   }
 
@@ -80,7 +80,6 @@
   .#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open
     .#{$prefix}--overflow-menu__trigger {
     background-color: $field-02;
-    // ?
   }
 
   .#{$prefix}--overflow-menu__icon {
@@ -109,12 +108,12 @@
     align-items: flex-start;
     width: rem(160px);
     list-style: none;
-    background-color: $field;
+    background-color: $layer;
 
     &::after {
       position: absolute;
       display: block;
-      background-color: $field;
+      background-color: $layer;
       transition: background-color $duration--fast-02
         motion(entrance, productive);
       content: '';
@@ -122,12 +121,11 @@
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover {
-    background-color: $field;
+    background-color: $layer;
   }
 
   .#{$prefix}--overflow-menu-options--light {
     background-color: $field-02;
-    // these tokens?
     &::after {
       background-color: $field-02;
     }
@@ -135,7 +133,6 @@
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
     background-color: $field-02;
-    // ?
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
@@ -299,7 +296,7 @@
   }
 
   .#{$prefix}--overflow-menu-options__option:hover {
-    background-color: $background-hover;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--overflow-menu-options__option--danger
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
index 253c54c69744..147caff1eba8 100644
--- a/packages/components/src/components/pagination/_pagination.scss
+++ b/packages/components/src/components/pagination/_pagination.scss
@@ -166,7 +166,7 @@ $css--helpers: true;
     cursor: pointer;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
-    fill: $layer-selected-inverse;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -185,7 +185,7 @@ $css--helpers: true;
 
   .#{$prefix}--pagination__button:hover,
   .#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button {
-    background: $background-hover;
+    background: $layer-hover;
   }
 
   .#{$prefix}--pagination__button--no-index,
diff --git a/packages/components/src/components/pagination/_unstable_pagination.scss b/packages/components/src/components/pagination/_unstable_pagination.scss
index 72fc4012e38a..ec058bc2dddf 100644
--- a/packages/components/src/components/pagination/_unstable_pagination.scss
+++ b/packages/components/src/components/pagination/_unstable_pagination.scss
@@ -79,7 +79,7 @@ $css--helpers: true;
     height: 100%;
     margin: 0;
     padding: 0 rem(14px);
-    color: $layer-selected-inverse;
+    color: $icon-primary;
     background: none;
 
     border: none;
@@ -87,7 +87,7 @@ $css--helpers: true;
     cursor: pointer;
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
-    fill: $layer-selected-inverse;
+    fill: $icon-primary;
   }
 
   // Unset height/width set by icon-only button:
@@ -101,8 +101,8 @@ $css--helpers: true;
   }
 
   .#{$prefix}--unstable-pagination__button:hover {
-    color: $layer-selected-inverse;
-    background: $background-hover;
+    color: $icon-primary;
+    background: $layer-hover;
   }
 
   .#{$prefix}--unstable-pagination__button--no-index {
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
index 2c2e95c9d615..a9750d7f598c 100644
--- a/packages/components/src/components/progress-indicator/_progress-indicator.scss
+++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -169,11 +169,11 @@
   //INCOMPLETE STYLING
   .#{$prefix}--progress-step--incomplete {
     svg {
-      fill: $layer-selected-inverse;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--progress-line {
-      background-color: $layer-accent;
+      background-color: $border-subtle;
     }
   }
 
diff --git a/packages/components/src/components/search/_search.scss b/packages/components/src/components/search/_search.scss
index 2267043fb844..a112dbfd2b50 100644
--- a/packages/components/src/components/search/_search.scss
+++ b/packages/components/src/components/search/_search.scss
@@ -70,7 +70,7 @@
       color: $disabled;
     }
   }
-  ß .#{$prefix}--search--light .#{$prefix}--search-input {
+  .#{$prefix}--search--light .#{$prefix}--search-input {
     background: $field-02;
   }
 
diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
index 09ae67179e75..5a4daba9c885 100644
--- a/packages/components/src/components/select/_select.scss
+++ b/packages/components/src/components/select/_select.scss
@@ -140,7 +140,7 @@
     right: $spacing-05;
     height: 100%;
     pointer-events: none;
-    fill: $layer-selected-inverse;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
diff --git a/packages/components/src/components/slider/_slider.scss b/packages/components/src/components/slider/_slider.scss
index 0e99f122ef1e..492f9caa668c 100644
--- a/packages/components/src/components/slider/_slider.scss
+++ b/packages/components/src/components/slider/_slider.scss
@@ -49,7 +49,7 @@
     position: absolute;
     width: 100%;
     height: rem(2px);
-    background: $layer-accent;
+    background: $border-subtle;
     transform: translate(0%, -50%);
     cursor: pointer;
 
@@ -68,7 +68,7 @@
     display: inline-block;
     width: rem(2px);
     height: rem(4px);
-    background: $layer-accent;
+    background: $border-subtle;
     transform: translate(-50%, 0);
     content: '';
   }
@@ -166,7 +166,7 @@
   }
 
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
-    background-color: $layer-accent;
+    background-color: $border-subtle;
 
     &:hover {
       transform: translate(-50%, -50%);
@@ -174,14 +174,14 @@
     }
 
     &:focus {
-      background-color: $layer-accent;
+      background-color: $border-subtle;
       outline: none;
       box-shadow: none;
       transform: translate(-50%, -50%);
     }
 
     &:active {
-      background: $layer-accent;
+      background: $border-subtle;
       transform: translate(-50%, -50%);
     }
   }
@@ -191,7 +191,7 @@
   .#{$prefix}--slider--disabled
     .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}--slider__filled-track {
-    background-color: $layer-accent;
+    background-color: $border-subtle;
     cursor: not-allowed;
   }
 
diff --git a/packages/components/src/components/tabs/_tabs.scss b/packages/components/src/components/tabs/_tabs.scss
index 95ecaeaf4515..e3798bd5ef71 100644
--- a/packages/components/src/components/tabs/_tabs.scss
+++ b/packages/components/src/components/tabs/_tabs.scss
@@ -45,7 +45,7 @@
     height: rem(40px);
     padding: 0 $spacing-09 0 $spacing-05;
     color: $text-primary;
-    background-color: $field;
+    background-color: $layer;
     border-bottom: 1px solid $border-strong;
     outline: 2px solid transparent;
     cursor: pointer;
@@ -201,8 +201,8 @@
   }
 
   .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
-    background-color: $background-hover;
-    box-shadow: 0 -1px 0 $background-hover;
+    background-color: $layer-hover;
+    box-shadow: 0 -1px 0 $layer-hover;
 
     @include carbon--breakpoint(md) {
       background-color: transparent;
@@ -216,7 +216,7 @@
   .#{$prefix}--tabs--container
     .#{$prefix}--tabs__nav-item:hover:not(.#{$prefix}--tabs__nav-item--disabled) {
     @include carbon--breakpoint(md) {
-      background-color: $background-selected-hover;
+      background-color: $layer-selected-hover;
     }
   }
 
@@ -644,7 +644,7 @@
     //-----------------------------
     &.#{$prefix}--tabs--scrollable--container
       .#{$prefix}--tabs--scrollable__nav-item:hover {
-      background-color: $background-selected-hover;
+      background-color: $layer-selected-hover;
     }
 
     //---------------------------------------------