From a9827635844e9c43093c901966dbe8b623380e96 Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Tue, 30 Jul 2024 12:21:51 -0400
Subject: [PATCH] Clean up experimental dark tokens (#12467)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/166
Part of https://github.com/Shopify/polaris-internal/issues/537

### WHAT is this pull request doing?

* remove all border gradient experimental tokens (we will be doing this
internally for now since its not being used in other polaris components)
* remove `experimental` suffix from tooltip tokens
* add `bg-fill-secondary-selected` token
* `dark-experimental` theme changes

### How to 🎩
Demo of all button states
<video
src='https://github.com/user-attachments/assets/8fcb0c0f-2f47-4e12-8bb0-0a5d1a81d46f'
/>

Figma files with button states
* [base
file](https://www.figma.com/design/pGwkMhydM8nURjBRHo9GVh/Dark-UI-Lab?m=auto&t=SeYk5v6iFy8cIDS8-1)
* [disabled
states](https://www.figma.com/design/A8jMxmQVxJCvoeZ79Tx4c6/Dynamic-Top-bar-P.2?node-id=1802-25633&t=HH7bSvTidiRjNp7o-1)

Go through the flow, noticing all button states of:
1. Make an edit to product title
2. discard
3. Make an edit to product title
4. Save
5. Press other top bar buttons (user menu, notifications)


https://admin.web.web-zj1n.sophie-schneider.us.spin.dev/store/shop1/products/1
---
 .changeset/hot-pants-watch.md                 |  6 +++
 .../TooltipOverlay/TooltipOverlay.tsx         |  4 +-
 polaris-tokens/src/themes/base/color.ts       | 40 +++++--------------
 polaris-tokens/src/themes/dark.ts             | 36 +++++++----------
 4 files changed, 32 insertions(+), 54 deletions(-)
 create mode 100644 .changeset/hot-pants-watch.md

diff --git a/.changeset/hot-pants-watch.md b/.changeset/hot-pants-watch.md
new file mode 100644
index 00000000000..15a260c68bf
--- /dev/null
+++ b/.changeset/hot-pants-watch.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris-tokens': minor
+'@shopify/polaris': patch
+---
+
+Remove experimental suffix from tooltip tokens, remove border gradient experimental tokens, add token for `bg-fill-secondary-selected`, and add more `dark-experimental` theme values.
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
index 24555ca9fea..449d6cf17b9 100644
--- 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
index b676bdb012a..16ffb3707ac 100644
--- 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
index ee1376b424a..8a8d15755b3 100644
--- a/polaris-tokens/src/themes/dark.ts
+++ b/polaris-tokens/src/themes/dark.ts
@@ -9,16 +9,18 @@ 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-icon-disabled': {value: colors.gray[14]},
     'color-text': {value: colors.gray[8]},
     'color-text-secondary': {value: colors.gray[11]},
+    'color-text-disabled': {value: colors.gray[14]},
     'color-bg-surface-secondary-active': {value: colors.whiteAlpha[9]},
     'color-bg-surface-secondary-hover': {value: colors.whiteAlpha[6]},
     '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: '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]},
@@ -29,33 +31,23 @@ export const metaThemeDarkPartial = createMetaThemePartial({
     '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-fill-secondary': {value: colors.whiteAlpha[7]},
     '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-icon-brand': {value: colors.gray[14]},
+    'color-bg-fill-disabled': {value: colors.whiteAlpha[5]},
+    'color-text-brand-on-bg-fill-disabled': {value: colors.gray[12]},
+    'color-bg-fill-brand-disabled': {value: colors.whiteAlpha[11]},
+    'color-bg-fill-tertiary': {value: colors.gray[15]},
+    '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': {