Add dark experimental tokens for TopBar (#11801)

### WHY are these changes introduced? Fixes https://github.com/Shopify/polaris-internal/issues/1482 ### WHAT is this pull request doing? - Adds white alpha ramp to colors - Adds border gradient experimental tokens - Adds token overrides needed for top bar theming - Updates tooltip tail to use tokens
Shopify · Apr 2, 2024 · 7f34263 · 7f34263
1 parent a9c35f3
commit 7f34263
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 3 deletions.
diff --git a/.changeset/tasty-clocks-help.md b/.changeset/tasty-clocks-help.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+Added white alpha ramp and more dark experimental tokens
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-tail-up-border-experimental)"
     />
     <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-tail-down-border-experimental)"
     />
     <path
       d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"

diff --git a/polaris-tokens/src/colors.ts b/polaris-tokens/src/colors.ts
@@ -289,3 +289,22 @@ export const blackAlpha: ColorAlpha = {
   15: 'rgba(0, 0, 0, 0.81)',
   16: 'rgba(0, 0, 0, 0.90)',
 };
+
+export const whiteAlpha: ColorAlpha = {
+  1: 'rgba(255, 255, 255, 0)',
+  2: 'rgba(255, 255, 255, 0.01)',
+  3: 'rgba(255, 255, 255, 0.02)',
+  4: 'rgba(255, 255, 255, 0.03)',
+  5: 'rgba(255, 255, 255, 0.05)',
+  6: 'rgba(255, 255, 255, 0.06)',
+  7: 'rgba(255, 255, 255, 0.08)',
+  8: 'rgba(255, 255, 255, 0.11)',
+  9: 'rgba(255, 255, 255, 0.17)',
+  10: 'rgba(255, 255, 255, 0.20)',
+  11: 'rgba(255, 255, 255, 0.28)',
+  12: 'rgba(255, 255, 255, 0.46)',
+  13: 'rgba(255, 255, 255, 0.62)',
+  14: 'rgba(255, 255, 255, 0.71)',
+  15: 'rgba(255, 255, 255, 0.81)',
+  16: 'rgba(255, 255, 255, 0.90)',
+};
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
@@ -145,10 +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';
+  | 'input-border'
+  | 'tooltip-tail-down-border-experimental'
+  | 'tooltip-tail-up-border-experimental';
 
 export type ColorIconAlias =
   | 'icon-active'
@@ -1010,6 +1016,26 @@ export const color: {
     description:
       'The active state (on press) color for borders on an inverse background.',
   },
+  'color-tooltip-tail-down-border-experimental': {
+    value: colors.gray[9],
+    description: 'The border color for tooltip tails pointing down.',
+  },
+  'color-tooltip-tail-up-border-experimental': {
+    value: colors.gray[8],
+    description: 'The border color for tooltip tails pointing up.',
+  },
+  'color-border-gradient-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
+  'color-border-gradient-hover-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[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-experimental': {
+    value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
+  },
   'color-icon': {
     value: colors.gray[14],
     description: 'The default color for icons.',

diff --git a/polaris-tokens/src/themes/dark.ts b/polaris-tokens/src/themes/dark.ts
@@ -14,6 +14,47 @@ export const metaThemeDarkPartial = createMetaThemePartial({
     'color-text-secondary': {value: colors.gray[11]},
     'color-bg-surface-secondary-active': {value: colors.gray[13]},
     'color-bg-surface-secondary-hover': {value: colors.gray[14]},
+    'color-bg-fill-transparent': {value: colors.whiteAlpha[8]},
+    'color-bg-fill-brand': {value: colors.gray[1]},
+    'color-text-brand-on-bg-fill': {value: colors.gray[15]},
+    'color-bg-surface-hover': {value: colors.gray[14]},
+    'color-bg-fill-hover': {value: colors.gray[14]},
+    'color-bg-fill-transparent-hover': {value: colors.whiteAlpha[9]},
+    'color-bg-fill-brand-hover': {value: colors.gray[5]},
+    'color-bg-surface-selected': {value: colors.gray[13]},
+    'color-bg-fill-selected': {value: colors.gray[13]},
+    'color-bg-fill-transparent-selected': {value: colors.whiteAlpha[11]},
+    'color-bg-fill-brand-selected': {value: colors.gray[9]},
+    'color-bg-surface-active': {value: colors.gray[13]},
+    'color-bg-fill-active': {value: colors.gray[13]},
+    'color-bg-fill-transparent-active': {value: colors.whiteAlpha[10]},
+    'color-bg-fill-brand-active': {value: colors.gray[4]},
+    'color-bg-surface-brand-selected': {value: colors.gray[14]},
+    'color-border-secondary': {value: colors.gray[13]},
+    'color-tooltip-tail-down-border-experimental': {
+      value: 'rgba(60, 60, 60, 1)',
+    },
+    'color-tooltip-tail-up-border-experimental': {
+      value: 'rgba(71, 71, 71, 1)',
+    },
+    'color-border-gradient-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
+    },
+    'color-border-gradient-hover-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
+    },
+    'color-border-gradient-selected-experimental': {
+      value: `linear-gradient(to bottom, ${colors.blackAlpha[10]}, ${colors.whiteAlpha[10]})`,
+    },
+    'color-border-gradient-active-experimental': {
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
+    },
+  },
+  shadow: {
+    'shadow-bevel-100': {
+      value:
+        '1px 0px 0px 0px rgba(204, 204, 204, 0.08) inset, -1px 0px 0px 0px rgba(204, 204, 204, 0.08) inset, 0px -1px 0px 0px rgba(204, 204, 204, 0.08) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.16) inset',
+    },
   },
 });