Clean up experimental dark dokens

Shopify · Jul 25, 2024 · 4c6f71a · 4c6f71a
1 parent b10e5f1
commit 4c6f71a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 55 deletions.
diff --git a/.changeset/hot-pants-watch.md b/.changeset/hot-pants-watch.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-tokens': minor
+'@shopify/polaris': patch
+---
+
+Remove experimental suffix from tooltip 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="var(--p-color-tooltip-tail-up-border-experimental)"
+ fill="var(--p-color-tooltip-tail-up-border)"
  />
  <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="var(--p-color-tooltip-tail-down-border-experimental)"
+ fill="var(--p-color-tooltip-tail-down-border)"
  />
  <path
  d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"

diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
@@ -34,6 +34,7 @@ export type ColorBackgroundAlias =
  | 'bg-fill-magic-secondary'
  | 'bg-fill-magic'
  | 'bg-fill-secondary-active'
+ | 'bg-fill-secondary-selected'
  | 'bg-fill-secondary-hover'
  | 'bg-fill-secondary'
  | 'bg-fill-selected'
@@ -108,8 +109,6 @@ export type ColorBackgroundAlias =
  | 'avatar-two-bg-fill'
  | 'backdrop-bg'
  | 'button-gradient-bg-fill'
- | 'button-gradient-bg-fill-selected-experimental'
- | 'button-gradient-bg-fill-active-experimental'
  | 'checkbox-bg-surface-disabled'
  | 'input-bg-surface-active'
  | 'input-bg-surface-hover'
@@ -148,16 +147,12 @@ 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'
- | 'tooltip-tail-down-border-experimental'
- | 'tooltip-tail-up-border-experimental';
+ | 'tooltip-tail-down-border'
+ | 'tooltip-tail-up-border';
 
 export type ColorIconAlias =
  | 'icon-active'
@@ -485,6 +480,11 @@ export const color: {
  description:
  'The active state (on press) color of elements with a smaller surface area and a secondary level of prominence.',
  },
+ 'color-bg-fill-secondary-selected': {
+ value: colors.gray[8],
+ description:
+ 'The selected state (on press) color of elements with a smaller surface area and a secondary level of prominence.',
+ },
  'color-bg-fill-tertiary': {
  value: colors.gray[8],
  description:
@@ -1019,26 +1019,14 @@ export const color: {
  description:
  'The active state (on press) color for borders on an inverse background.',
  },
- 'color-tooltip-tail-down-border-experimental': {
+ 'color-tooltip-tail-down-border': {
  value: colors.gray[9],
  description: 'The border color for tooltip tails pointing down.',
  },
- 'color-tooltip-tail-up-border-experimental': {
+ 'color-tooltip-tail-up-border': {
  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.',
@@ -1169,14 +1157,6 @@ export const color: {
  value:
  'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
  },
- 'color-button-gradient-bg-fill-selected-experimental': {
- value:
- 'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
- },
- 'color-button-gradient-bg-fill-active-experimental': {
- value:
- 'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
- },
  'color-checkbox-bg-surface-disabled': {
  value: colors.blackAlpha[7],
  },

diff --git a/polaris-tokens/src/themes/dark.ts b/polaris-tokens/src/themes/dark.ts
@@ -9,7 +9,7 @@ export const metaThemeDarkPartial = createMetaThemePartial({
  'color-bg-surface': {value: colors.gray[15]},
  'color-bg-fill': {value: colors.gray[15]},
  'color-icon': {value: colors.gray[8]},
- 'color-icon-secondary': {value: colors.gray[12]},
+ 'color-icon-secondary': {value: colors.gray[11]},
  'color-text': {value: colors.gray[8]},
  'color-text-secondary': {value: colors.gray[11]},
  'color-bg-surface-secondary-active': {value: colors.whiteAlpha[9]},
@@ -18,7 +18,7 @@ export const metaThemeDarkPartial = createMetaThemePartial({
  '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: 'rgba(37, 37, 37, 1)'},
+ 'color-bg-fill-hover': {value: colors.whiteAlpha[5]},
  '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]},
@@ -30,39 +30,22 @@ export const metaThemeDarkPartial = createMetaThemePartial({
  'color-bg-fill-transparent-active': {value: colors.whiteAlpha[10]},
  'color-bg-fill-brand-active': {value: colors.gray[4]},
  'color-bg-fill-secondary-hover': {value: colors.whiteAlpha[8]},
+ 'color-bg-fill-secondary-selected': {value: colors.whiteAlpha[10]},
  'color-bg-surface-brand-selected': {value: colors.gray[14]},
  'color-border-secondary': {value: colors.gray[14]},
- 'color-tooltip-tail-down-border-experimental': {
+ 'color-bg-surface-tertiary': {value: colors.whiteAlpha[7]},
+ 'color-tooltip-tail-down-border': {
  value: 'rgba(60, 60, 60, 1)',
  },
- 'color-tooltip-tail-up-border-experimental': {
+ 'color-tooltip-tail-up-border': {
  value: 'rgba(71, 71, 71, 1)',
  },
- 'color-border-gradient-experimental': {
- value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
- },
- 'color-border-gradient-hover-experimental': {
- value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
- },
- 'color-border-gradient-selected-experimental': {
- value: `linear-gradient(to bottom, ${colors.blackAlpha[16]}, ${colors.blackAlpha[11]} 10%, ${colors.whiteAlpha[11]})`,
- },
- 'color-border-gradient-active-experimental': {
- value: `linear-gradient(to bottom, ${colors.blackAlpha[16]}, ${colors.blackAlpha[11]} 10%, ${colors.whiteAlpha[11]})`,
- },
- 'color-button-gradient-bg-fill-selected-experimental': {
- value: `linear-gradient(to bottom, rgba(25, 25, 25, 1), rgba(19, 19, 19, 1) 50%, rgba(10, 10, 10, 1))`,
- },
- 'color-button-gradient-bg-fill-active-experimental': {
- value: `linear-gradient(to bottom, rgba(33, 33, 33, 1), rgba(30, 30, 30, 1) 50%, rgba(18, 18, 18, 1))`,
- },
  },
  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',
  },
- },
 });
 
 export const metaThemeDark = createMetaTheme(metaThemeDarkPartial);