Make border gradient tokens experimental and add tooltip tail tokens

Shopify · Mar 25, 2024 · d49f8a9 · d49f8a9
1 parent b5f185d
commit d49f8a9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 30 deletions.
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
@@ -13,7 +13,7 @@ const tailUpPaths = (
   <>
     <path
       d="M18.829 8.171 11.862.921A3 3 0 0 0 7.619.838L0 8.171h1.442l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557h1.387Z"
-      fill="#E3E3E3"
+      fill="var(--p-color-tooltip-border-tail-up)"
     />
     <path
       d="M17.442 10.171h-16v-2l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557v2Z"
@@ -26,7 +26,7 @@ const tailDownPaths = (
   <>
     <path
       d="m0 2 6.967 7.25a3 3 0 0 0 4.243.083L18.829 2h-1.442l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2H0Z"
-      fill="#D4D4D4"
+      fill="var(--p-color-tooltip-border-tail-down)"
     />
     <path
       d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"

diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.css b/polaris-react/src/components/TopBar/components/SearchField/SearchField.module.css
@@ -91,23 +91,26 @@
     color var(--p-motion-duration-200) var(--p-motion-ease);
 
   @mixin border-gradient var(--p-color-bg-surface),
-    var(--p-color-border-gradient), var(--p-border-radius-300);
+    var(--p-color-border-gradient-experimental), var(--p-border-radius-300);
 
   /* stylelint-disable-next-line selector-max-specificity -- don't hover on active states */
   &:hover:not(:focus-visible):not(:active) {
     @mixin border-gradient var(--p-color-bg-surface-hover),
-      var(--p-color-border-gradient-hover), var(--p-border-radius-300);
+      var(--p-color-border-gradient-hover-experimental),
+      var(--p-border-radius-300);
   }
 
   /* stylelint-disable-next-line no-duplicate-selectors -- border override */
   &:focus-visible {
     @mixin border-gradient var(--p-color-bg-surface-active),
-      var(--p-color-border-gradient-active), var(--p-border-radius-300);
+      var(--p-color-border-gradient-active-experimental),
+      var(--p-border-radius-300);
   }
 
   &:active {
     @mixin border-gradient var(--p-color-bg-surface-selected),
-      var(--p-color-border-gradient-selected), var(--p-border-radius-300);
+      var(--p-color-border-gradient-selected-experimental),
+      var(--p-border-radius-300);
   }
 
   &::placeholder {

diff --git a/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.css b/polaris-react/src/components/TopBar/components/TopBarButton/TopBarButton.module.css
@@ -9,8 +9,8 @@
   padding: var(--p-space-200);
   cursor: pointer;
 
-  @mixin border-gradient var(--p-color-bg-fill), var(--p-color-border-gradient),
-    var(--p-border-radius-300);
+  @mixin border-gradient var(--p-color-bg-fill),
+    var(--p-color-border-gradient-experimental), var(--p-border-radius-300);
 
   &:focus {
     outline: none;
@@ -25,17 +25,20 @@
 
   &:hover {
     @mixin border-gradient var(--p-color-bg-fill-hover),
-      var(--p-color-border-gradient-hover), var(--p-border-radius-300);
+      var(--p-color-border-gradient-hover-experimental),
+      var(--p-border-radius-300);
   }
 
   &:active,
   &[aria-expanded='true'] {
     @mixin border-gradient var(--p-color-bg-fill-active),
-      var(--p-color-border-gradient-active), var(--p-border-radius-300);
+      var(--p-color-border-gradient-active-experimental),
+      var(--p-border-radius-300);
   }
 
   &:active {
     @mixin border-gradient var(--p-color-bg-fill-selected),
-      var(--p-color-border-gradient-selected), var(--p-border-radius-300);
+      var(--p-color-border-gradient-selected-experimental),
+      var(--p-border-radius-300);
   }
 }
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
@@ -145,14 +145,16 @@ export type ColorBorderAlias =
   | 'border-tertiary'
   | 'border-warning'
   | 'border'
+  | 'border-gradient-experimental'
+  | 'border-gradient-hover-experimental'
+  | 'border-gradient-selected-experimental'
+  | 'border-gradient-active-experimental'
   /** Specialty and component border colors. */
   | 'input-border-active'
   | 'input-border-hover'
   | 'input-border'
-  | 'border-gradient'
-  | 'border-gradient-hover'
-  | 'border-gradient-selected'
-  | 'border-gradient-active';
+  | 'tooltip-border-tail-down'
+  | 'tooltip-border-tail-up';
 
 export type ColorIconAlias =
   | 'icon-active'
@@ -1010,18 +1012,26 @@ export const color: {
     description:
       'The active state (on press) color for borders on an inverse background.',
   },
-  // to do: get light theme border gradient colors
-  'color-border-gradient': {
-    value: `linear-gradient(to bottom, ${colors.blackAlpha[7]}, ${colors.blackAlpha[11]})`,
+  'color-tooltip-border-tail-down': {
+    value: colors.gray[9],
+    description: 'The border color for tool tip tails pointing down.',
+  },
+  'color-tooltip-border-tail-up': {
+    value: colors.gray[8],
+    description: 'The border color for tool tip tails pointing up.',
+  },
+  // Temporary light theme border gradient values
+  'color-border-gradient-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
   },
-  'color-border-gradient-hover': {
-    value: `linear-gradient(to bottom, ${colors.blackAlpha[11]}, ${colors.blackAlpha[7]})`,
+  'color-border-gradient-hover-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
   },
-  'color-border-gradient-selected': {
-    value: `linear-gradient(to bottom, ${colors.blackAlpha[11]}, ${colors.blackAlpha[11]})`,
+  'color-border-gradient-selected-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
   },
-  'color-border-gradient-active': {
-    value: `linear-gradient(to bottom, ${colors.blackAlpha[12]}, ${colors.blackAlpha[8]})`,
+  'color-border-gradient-active-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
   },
   'color-icon': {
     value: colors.gray[14],

diff --git a/polaris-tokens/src/themes/dark.ts b/polaris-tokens/src/themes/dark.ts
@@ -4,9 +4,7 @@ import {createMetaTheme, createMetaThemePartial} from './utils';
 
 export const metaThemeDarkPartial = createMetaThemePartial({
   color: {
-    // todo
     'color-bg': {value: colors.gray[16]},
-    // from figma
     'color-bg-surface': {value: colors.gray[15]},
     'color-bg-fill': {value: colors.gray[15]},
     'color-icon': {value: colors.gray[8]},
@@ -30,17 +28,18 @@ export const metaThemeDarkPartial = createMetaThemePartial({
     'color-bg-fill-brand-active': {value: colors.gray[4]},
     'color-bg-surface-secondary-active': {value: colors.gray[13]},
     'color-bg-surface-secondary-hover': {value: colors.gray[14]},
+    'color-bg-surface-brand-selected': {value: colors.gray[14]},
     'color-border-secondary': {value: colors.gray[13]},
-    'color-border-gradient': {
+    'color-border-gradient-experimental': {
       value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
     },
-    'color-border-gradient-hover': {
+    'color-border-gradient-hover-experimental': {
       value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
     },
-    'color-border-gradient-selected': {
+    'color-border-gradient-selected-experimental': {
       value: `linear-gradient(to bottom, ${colors.blackAlpha[10]}, ${colors.whiteAlpha[10]})`,
     },
-    'color-border-gradient-active': {
+    'color-border-gradient-active-experimental': {
       value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
     },
   },