feat(Components): update color tokens (1/2) (#8425)

* feat: accordion color tokens

* feat: breadcrumb

* feat: button

* feat: checkbox

* feat: codesnippet

* feat: combo box

* fix: update tokens

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

packages/components/src/components/accordion/_accordion.scss

@@ -25,11 +25,11 @@
 
   .#{$prefix}--accordion__item {
     overflow: visible;
-    border-top: 1px solid $ui-03;
+    border-top: 1px solid $border-subtle;
     transition: all $duration--fast-02 motion(standard, productive);
 
     &:last-child {
-      border-bottom: 1px solid $ui-03;
+      border-bottom: 1px solid $border-subtle;
     }
   }
 
@@ -45,7 +45,7 @@
     min-height: rem(40px);
     margin: 0;
     padding: rem(10px) 0;
-    color: $text-01;
+    color: $text-primary;
     cursor: pointer;
     transition: background-color motion(standard, productive) $duration--fast-02;
 
@@ -60,7 +60,7 @@
     }
 
     &:hover::before {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     &:focus {
@@ -86,12 +86,12 @@
 
   // Disabled styles
   .#{$prefix}--accordion__heading[disabled] {
-    color: $disabled-02;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
   .#{$prefix}--accordion__heading[disabled] .#{$prefix}--accordion__arrow {
-    fill: $disabled-02;
+    fill: $icon-disabled;
   }
 
   .#{$prefix}--accordion__heading[disabled]:hover::before {
@@ -100,11 +100,11 @@
 
   .#{$prefix}--accordion__item--disabled,
   .#{$prefix}--accordion__item--disabled + .#{$prefix}--accordion__item {
-    border-top: 1px solid $disabled-02;
+    border-top: 1px solid $border-disabled;
   }
 
   li.#{$prefix}--accordion__item--disabled:last-of-type {
-    border-bottom: 1px solid $disabled-02;
+    border-bottom: 1px solid $border-disabled;
   }
 
   .#{$prefix}--accordion__arrow {
@@ -117,7 +117,7 @@
     margin: $accordion-arrow-margin;
     transform: rotate(-270deg) #{'/*rtl:ignore*/'};
     transition: all $duration--fast-02 motion(standard, productive);
-    fill: $ui-05;
+    fill: $icon-primary;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -199,7 +199,7 @@
 
     .#{$prefix}--accordion__arrow {
       transform: rotate(-90deg) #{'/*rtl:ignore*/'};
-      fill: $ui-05;
+      fill: $icon-primary;
 
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
@@ -219,7 +219,7 @@
   .#{$prefix}--accordion.#{$prefix}--skeleton .#{$prefix}--accordion__arrow {
     cursor: default;
     pointer-events: none;
-    fill: $ui-05;
+    fill: $icon-primary;
 
     &:hover,
     &:focus,

packages/components/src/components/breadcrumb/_breadcrumb.scss

@@ -36,16 +36,16 @@
   }
 
   .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
-    color: $link-01;
+    color: $link-primary;
 
     &:hover {
-      color: $hover-primary-text;
+      color: $link-primary-hover;
     }
   }
 
   .#{$prefix}--breadcrumb-item::after {
     margin-left: $carbon--spacing-03;
-    color: $text-01;
+    color: $text-primary;
     content: '/';
   }
 
@@ -66,7 +66,7 @@
   .#{$prefix}--breadcrumb-item [aria-current='page'],
   .#{$prefix}--breadcrumb-item.#{$prefix}--breadcrumb-item--current
     .#{$prefix}--link {
-    color: $text-01;
+    color: $text-primary;
     cursor: auto;
 
     &:hover {
@@ -94,7 +94,7 @@
       bottom: 2px;
       width: rem(12px);
       height: 1px;
-      background: $hover-primary-text;
+      background: $link-primary-hover;
       opacity: 0;
       transition: opacity $duration--fast-01 motion(standard, productive);
       content: '';
@@ -114,13 +114,13 @@
   .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
     position: relative;
     transform: translateY(4px);
-    fill: $link-01;
+    fill: $link-primary;
   }
 
   .#{$prefix}--breadcrumb-item
     .#{$prefix}--overflow-menu:hover
     .#{$prefix}--overflow-menu__icon {
-    fill: $hover-primary-text;
+    fill: $link-primary-hover;
   }
 
   .#{$prefix}--breadcrumb-menu-options:focus {
@@ -136,7 +136,7 @@
     margin: 0 auto;
     background: transparent;
     border-right: $caret-size solid transparent;
-    border-bottom: $caret-size solid $field-01;
+    border-bottom: $caret-size solid $field;
     border-left: $caret-size solid transparent;
   }