Use functional color variables in DropdownStyles

primer · Mar 3, 2021 · 5df7723 · 5df7723
1 parent 4ed1200
commit 5df7723
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/tall-cougars-admire.md b/.changeset/tall-cougars-admire.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in DropdownStyles
diff --git a/src/DropdownStyles.ts b/src/DropdownStyles.ts
@@ -15,15 +15,15 @@ const getDirectionStyles = (theme: any, direction: 'ne' | 'e' | 'se' | 's' | 'sw
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.blackfade15')(theme)};
+        border-left-color: ${get('colors.fade.fg15')(theme)};
       }
 
       &::after {
         top: 11px;
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.white')(theme)};
+        border-left-color: ${get('colors.border.inverse')(theme)};
       }
     `,
     e: `
@@ -37,14 +37,14 @@ const getDirectionStyles = (theme: any, direction: 'ne' | 'e' | 'se' | 's' | 'sw
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${get('colors.blackfade15')(theme)};
+        border-right-color: ${get('colors.fade.fg15')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${get('colors.white')(theme)};
+        border-right-color: ${get('colors.border.inverse')(theme)};
       }
     `,
     ne: `
@@ -62,15 +62,15 @@ const getDirectionStyles = (theme: any, direction: 'ne' | 'e' | 'se' | 's' | 'sw
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${get('colors.blackfade15')(theme)};
+        border-top: 8px solid ${get('colors.fade.fg15')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
 
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${get('colors.white')(theme)};
+        border-top: 7px solid ${get('colors.border.inverse')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;