fix(Dropdown): fixes based on design audit (#10886)

* fix(Dropdown): fixes based on design audit * fix(ComboBox): update field tokens) * fix(ListBox): change input from layer to field Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 4, 2022 · 1b87683 · 1b87683
1 parent 911c50c
commit 1b87683
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/packages/styles/scss/components/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss
@@ -19,7 +19,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {

diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -132,10 +132,10 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $field-hover;
     }
   }
 
@@ -202,7 +202,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open)
@@ -354,7 +354,7 @@
 
     // V11: Possibly deprecate
     &.#{$prefix}--dropdown--light:hover {
-      background-color: $field-02;
+      background-color: $field;
     }
   }
 
@@ -377,7 +377,7 @@
     transition: background $duration-fast-01 motion(entrance, productive);
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
 
     &.#{$prefix}--dropdown--disabled {
@@ -433,11 +433,11 @@
 
   .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
     display: block;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
 
     &:hover {
-      background-color: $layer-selected;
+      background-color: $layer-selected-hover;
     }
 
     .#{$prefix}--dropdown-link {

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
@@ -156,13 +156,13 @@ $list-box-menu-width: rem(300px);
     background-color: $field;
 
     &:hover {
-      background-color: $layer-hover;
+      background-color: $field-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field;
+    background: $layer;
   }
 
   // V11: Possibly deprecate
@@ -237,7 +237,7 @@ $list-box-menu-width: rem(300px);
     background-color: transparent;
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -477,7 +477,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
-    @include tag-theme($text-disabled, $field);
+    @include tag-theme($text-disabled, $layer);
 
     > svg {
       fill: $icon-disabled;
@@ -701,7 +701,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--highlighted {
     border-color: transparent;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
   }
 
@@ -730,8 +730,7 @@ $list-box-menu-width: rem(300px);
     background-color: $layer-selected;
   }
 
-  .#{$prefix}--list-box__menu-item--active:hover,
-  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+  .#{$prefix}--list-box__menu-item--active:hover {
     border-bottom-color: $layer-selected-hover;
     background-color: $layer-selected-hover;
   }