Skip to content

Commit a982763

Browse files
sophschneidersophschneider
authored
Clean up experimental dark tokens (#12467)
<!-- ☝️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
1 parent d07c5f1 commit a982763

File tree

4 files changed

+32
-54
lines changed

4 files changed

+32
-54
lines changed

‎.changeset/hot-pants-watch.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris-tokens': minor
3+
'@shopify/polaris': patch
4+
---
5+
6+
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.

‎polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const tailUpPaths = (
1313
<>
1414
<path
1515
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"
16-
fill="var(--p-color-tooltip-tail-up-border-experimental)"
16+
fill="var(--p-color-tooltip-tail-up-border)"
1717
/>
1818
<path
1919
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 = (
2626
<>
2727
<path
2828
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"
29-
fill="var(--p-color-tooltip-tail-down-border-experimental)"
29+
fill="var(--p-color-tooltip-tail-down-border)"
3030
/>
3131
<path
3232
d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"

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

Lines changed: 10 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export type ColorBackgroundAlias =
3434
| 'bg-fill-magic-secondary'
3535
| 'bg-fill-magic'
3636
| 'bg-fill-secondary-active'
37+
| 'bg-fill-secondary-selected'
3738
| 'bg-fill-secondary-hover'
3839
| 'bg-fill-secondary'
3940
| 'bg-fill-selected'
@@ -108,8 +109,6 @@ export type ColorBackgroundAlias =
108109
| 'avatar-two-bg-fill'
109110
| 'backdrop-bg'
110111
| 'button-gradient-bg-fill'
111-
| 'button-gradient-bg-fill-selected-experimental'
112-
| 'button-gradient-bg-fill-active-experimental'
113112
| 'checkbox-bg-surface-disabled'
114113
| 'input-bg-surface-active'
115114
| 'input-bg-surface-hover'
@@ -148,16 +147,12 @@ export type ColorBorderAlias =
148147
| 'border-tertiary'
149148
| 'border-warning'
150149
| 'border'
151-
| 'border-gradient-experimental'
152-
| 'border-gradient-hover-experimental'
153-
| 'border-gradient-selected-experimental'
154-
| 'border-gradient-active-experimental'
155150
/** Specialty and component border colors. */
156151
| 'input-border-active'
157152
| 'input-border-hover'
158153
| 'input-border'
159-
| 'tooltip-tail-down-border-experimental'
160-
| 'tooltip-tail-up-border-experimental';
154+
| 'tooltip-tail-down-border'
155+
| 'tooltip-tail-up-border';
161156

162157
export type ColorIconAlias =
163158
| 'icon-active'
@@ -485,6 +480,11 @@ export const color: {
485480
description:
486481
'The active state (on press) color of elements with a smaller surface area and a secondary level of prominence.',
487482
},
483+
'color-bg-fill-secondary-selected': {
484+
value: colors.gray[8],
485+
description:
486+
'The selected state (on press) color of elements with a smaller surface area and a secondary level of prominence.',
487+
},
488488
'color-bg-fill-tertiary': {
489489
value: colors.gray[8],
490490
description:
@@ -1019,26 +1019,14 @@ export const color: {
10191019
description:
10201020
'The active state (on press) color for borders on an inverse background.',
10211021
},
1022-
'color-tooltip-tail-down-border-experimental': {
1022+
'color-tooltip-tail-down-border': {
10231023
value: colors.gray[9],
10241024
description: 'The border color for tooltip tails pointing down.',
10251025
},
1026-
'color-tooltip-tail-up-border-experimental': {
1026+
'color-tooltip-tail-up-border': {
10271027
value: colors.gray[8],
10281028
description: 'The border color for tooltip tails pointing up.',
10291029
},
1030-
'color-border-gradient-experimental': {
1031-
value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
1032-
},
1033-
'color-border-gradient-hover-experimental': {
1034-
value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
1035-
},
1036-
'color-border-gradient-selected-experimental': {
1037-
value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
1038-
},
1039-
'color-border-gradient-active-experimental': {
1040-
value: `linear-gradient(to bottom, ${colors.gray[7]}, ${colors.gray[10]} 78%, ${colors.gray[11]})`,
1041-
},
10421030
'color-icon': {
10431031
value: colors.gray[14],
10441032
description: 'The default color for icons.',
@@ -1169,14 +1157,6 @@ export const color: {
11691157
value:
11701158
'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
11711159
},
1172-
'color-button-gradient-bg-fill-selected-experimental': {
1173-
value:
1174-
'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
1175-
},
1176-
'color-button-gradient-bg-fill-active-experimental': {
1177-
value:
1178-
'linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%)',
1179-
},
11801160
'color-checkbox-bg-surface-disabled': {
11811161
value: colors.blackAlpha[7],
11821162
},

‎polaris-tokens/src/themes/dark.ts‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,18 @@ export const metaThemeDarkPartial = createMetaThemePartial({
99
'color-bg-surface': {value: colors.gray[15]},
1010
'color-bg-fill': {value: colors.gray[15]},
1111
'color-icon': {value: colors.gray[8]},
12-
'color-icon-secondary': {value: colors.gray[12]},
12+
'color-icon-secondary': {value: colors.gray[11]},
13+
'color-icon-disabled': {value: colors.gray[14]},
1314
'color-text': {value: colors.gray[8]},
1415
'color-text-secondary': {value: colors.gray[11]},
16+
'color-text-disabled': {value: colors.gray[14]},
1517
'color-bg-surface-secondary-active': {value: colors.whiteAlpha[9]},
1618
'color-bg-surface-secondary-hover': {value: colors.whiteAlpha[6]},
1719
'color-bg-fill-transparent': {value: colors.whiteAlpha[8]},
1820
'color-bg-fill-brand': {value: colors.gray[1]},
1921
'color-text-brand-on-bg-fill': {value: colors.gray[15]},
2022
'color-bg-surface-hover': {value: colors.gray[14]},
21-
'color-bg-fill-hover': {value: 'rgba(37, 37, 37, 1)'},
23+
'color-bg-fill-hover': {value: colors.whiteAlpha[5]},
2224
'color-bg-fill-transparent-hover': {value: colors.whiteAlpha[9]},
2325
'color-bg-fill-brand-hover': {value: colors.gray[5]},
2426
'color-bg-surface-selected': {value: colors.gray[13]},
@@ -29,33 +31,23 @@ export const metaThemeDarkPartial = createMetaThemePartial({
2931
'color-bg-fill-active': {value: colors.gray[13]},
3032
'color-bg-fill-transparent-active': {value: colors.whiteAlpha[10]},
3133
'color-bg-fill-brand-active': {value: colors.gray[4]},
34+
'color-bg-fill-secondary': {value: colors.whiteAlpha[7]},
3235
'color-bg-fill-secondary-hover': {value: colors.whiteAlpha[8]},
36+
'color-bg-fill-secondary-selected': {value: colors.whiteAlpha[10]},
3337
'color-bg-surface-brand-selected': {value: colors.gray[14]},
3438
'color-border-secondary': {value: colors.gray[14]},
35-
'color-tooltip-tail-down-border-experimental': {
39+
'color-bg-surface-tertiary': {value: colors.whiteAlpha[7]},
40+
'color-icon-brand': {value: colors.gray[14]},
41+
'color-bg-fill-disabled': {value: colors.whiteAlpha[5]},
42+
'color-text-brand-on-bg-fill-disabled': {value: colors.gray[12]},
43+
'color-bg-fill-brand-disabled': {value: colors.whiteAlpha[11]},
44+
'color-bg-fill-tertiary': {value: colors.gray[15]},
45+
'color-tooltip-tail-down-border': {
3646
value: 'rgba(60, 60, 60, 1)',
3747
},
38-
'color-tooltip-tail-up-border-experimental': {
48+
'color-tooltip-tail-up-border': {
3949
value: 'rgba(71, 71, 71, 1)',
4050
},
41-
'color-border-gradient-experimental': {
42-
value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
43-
},
44-
'color-border-gradient-hover-experimental': {
45-
value: `linear-gradient(to bottom, ${colors.whiteAlpha[10]}, ${colors.whiteAlpha[4]})`,
46-
},
47-
'color-border-gradient-selected-experimental': {
48-
value: `linear-gradient(to bottom, ${colors.blackAlpha[16]}, ${colors.blackAlpha[11]} 10%, ${colors.whiteAlpha[11]})`,
49-
},
50-
'color-border-gradient-active-experimental': {
51-
value: `linear-gradient(to bottom, ${colors.blackAlpha[16]}, ${colors.blackAlpha[11]} 10%, ${colors.whiteAlpha[11]})`,
52-
},
53-
'color-button-gradient-bg-fill-selected-experimental': {
54-
value: `linear-gradient(to bottom, rgba(25, 25, 25, 1), rgba(19, 19, 19, 1) 50%, rgba(10, 10, 10, 1))`,
55-
},
56-
'color-button-gradient-bg-fill-active-experimental': {
57-
value: `linear-gradient(to bottom, rgba(33, 33, 33, 1), rgba(30, 30, 30, 1) 50%, rgba(18, 18, 18, 1))`,
58-
},
5951
},
6052
shadow: {
6153
'shadow-bevel-100': {

0 commit comments

Comments
 (0)