From f92e56ee51e0ec03bd657cfe3f5b3b1fdec65fcb Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 25 Mar 2020 10:30:33 -0700
Subject: [PATCH] feat(tokens): add decorative-01, update dropdown styles
 (#5688)

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

* feat(tokens): add token to v9 theme
---
 .../components/src/components/dropdown/_dropdown.scss     | 8 ++++++++
 packages/themes/src/g10.js                                | 2 ++
 packages/themes/src/g100.js                               | 2 ++
 packages/themes/src/g90.js                                | 2 ++
 packages/themes/src/tokens.js                             | 3 +++
 packages/themes/src/v9.js                                 | 2 ++
 packages/themes/src/white.js                              | 2 ++
 7 files changed, 21 insertions(+)

diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
index 0448e1da8322..87e72c45ce72 100644
--- a/packages/components/src/components/dropdown/_dropdown.scss
+++ b/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);
diff --git a/packages/themes/src/g10.js b/packages/themes/src/g10.js
index 9653187e4d05..40e7476962c8 100644
--- a/packages/themes/src/g10.js
+++ b/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;
 
diff --git a/packages/themes/src/g100.js b/packages/themes/src/g100.js
index 9308b88785dc..30adbd8653db 100644
--- a/packages/themes/src/g100.js
+++ b/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;
 
diff --git a/packages/themes/src/g90.js b/packages/themes/src/g90.js
index be3d38e8cc6c..f73d1cb3f48c 100644
--- a/packages/themes/src/g90.js
+++ b/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;
 
diff --git a/packages/themes/src/tokens.js b/packages/themes/src/tokens.js
index 800536600725..840120952ec3 100644
--- a/packages/themes/src/tokens.js
+++ b/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',
       ],
     },
   ],
diff --git a/packages/themes/src/v9.js b/packages/themes/src/v9.js
index d2deb68083cb..15c2c391e337 100644
--- a/packages/themes/src/v9.js
+++ b/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)';
 
diff --git a/packages/themes/src/white.js b/packages/themes/src/white.js
index 5e2f366653da..3befc6eeaa6a 100644
--- a/packages/themes/src/white.js
+++ b/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;