Update dark experimental theme for top bar buttons (#11981)

### WHY are these changes introduced?

Part of Shopify/archive-polaris-backlog-2024#1573

### WHAT is this pull request doing?

Updates from [this
figma](https://www.figma.com/file/pGwkMhydM8nURjBRHo9GVh/Dark-UI-Lab?type=design&node-id=22078%3A19050&mode=design&t=IlsqiSZUSTqhC5Bl-1)
for the `dark-experimental` theme

### How to 🎩

Check out new tokens consumed in the top bar. Open the user menu to see
new divider color and white alphas


https://admin.web.web-minimal-m4pm.sophie-schneider.us.spin.dev/store/shop1

Author: sophschneider

.changeset/nice-ways-doubt.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': patch
+---
+
+Updated internal only whiteAlpha scale and dark experimental theme with new values

polaris-tokens/src/colors.ts

@@ -291,20 +291,20 @@ export const blackAlpha: ColorAlpha = {
 };
 
 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)',
+  1: 'rgba(255, 255, 255, 0.01)',
+  2: 'rgba(255, 255, 255, 0.02)',
+  3: 'rgba(255, 255, 255, 0.03)',
+  4: 'rgba(255, 255, 255, 0.04)',
   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)',
+  9: 'rgba(255, 255, 255, 0.14)',
+  10: 'rgba(255, 255, 255, 0.17)',
+  11: 'rgba(255, 255, 255, 0.22)',
+  12: 'rgba(255, 255, 255, 0.29)',
+  13: 'rgba(255, 255, 255, 0.44)',
+  14: 'rgba(255, 255, 255, 0.6)',
+  15: 'rgba(255, 255, 255, 0.7)',
+  16: 'rgba(255, 255, 255, 0.8)',
 };

polaris-tokens/src/themes/base/color.ts

@@ -108,6 +108,8 @@ 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'
@@ -1167,6 +1169,14 @@ 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],
   },

polaris-tokens/src/themes/dark.ts

@@ -12,13 +12,13 @@ export const metaThemeDarkPartial = createMetaThemePartial({
     'color-icon-secondary': {value: colors.gray[12]},
     'color-text': {value: colors.gray[8]},
     '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-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: colors.gray[14]},
+    'color-bg-fill-hover': {value: 'rgba(37, 37, 37, 1)'},
     '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,25 +29,32 @@ 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-hover': {value: colors.whiteAlpha[8]},
     'color-bg-surface-brand-selected': {value: colors.gray[14]},
-    'color-border-secondary': {value: colors.gray[13]},
+    'color-border-secondary': {value: colors.gray[14]},
     '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]})`,
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
     },
     'color-border-gradient-hover-experimental': {
-      value: `linear-gradient(to bottom, ${colors.whiteAlpha[9]}, ${colors.whiteAlpha[4]})`,
+      value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
     },
     'color-border-gradient-selected-experimental': {
-      value: `linear-gradient(to bottom, ${colors.blackAlpha[10]}, ${colors.whiteAlpha[10]})`,
+      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.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
+      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: {