feat(tokens): add decorative-01, update dropdown styles (#5688)

* feat(tokens): add decorative-01, update dropdown styles

* feat(tokens): add token to v9 theme

Author: tw15egan

packages/components/src/components/dropdown/_dropdown.scss

@@ -182,6 +182,10 @@
     overflow-y: auto;
   }
 
+  .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list {
+    background-color: $field-02;
+  }
+
   .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open)
     .#{$prefix}--dropdown-item {
     visibility: hidden;
@@ -238,6 +242,10 @@
     }
   }
 
+  .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link {
+    border-top-color: $decorative-01;
+  }
+
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {
     padding-top: rem(7px);
     padding-bottom: rem(7px);

packages/themes/src/g10.js

@@ -125,6 +125,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const decorative01 = gray20;
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

packages/themes/src/g100.js

@@ -124,6 +124,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue80;
 
+export const decorative01 = gray70;
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray80;
 

packages/themes/src/g90.js

@@ -126,6 +126,8 @@ export const disabled03 = gray40;
 
 export const highlight = blue70;
 
+export const decorative01 = gray60;
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 

packages/themes/src/tokens.js

@@ -94,6 +94,8 @@ const colors = [
 
   'highlight',
 
+  'decorative01',
+
   'skeleton01',
   'skeleton02',
 
@@ -225,6 +227,7 @@ export const unstable__meta = {
         'inverseHoverUI',
         'active01',
         'hoverField',
+        'decorative01',
       ],
     },
   ],

packages/themes/src/v9.js

@@ -89,6 +89,8 @@ export const disabled03 = '#cdd1d4';
 
 export const highlight = '#f4f7fb';
 
+export const decorative01 = '#EEF4FC';
+
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
 export const skeleton02 = 'rgba(61, 112, 178, .1)';
 

packages/themes/src/white.js

@@ -125,6 +125,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const decorative01 = gray20;
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;