Skip to content

Commit

Permalink
Clean up experimental dark tokens (#12467)
Browse files Browse the repository at this point in the history
<!--
  ☝️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 Shopify/polaris-internal#166
Part of Shopify/polaris-internal#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
  • Loading branch information
sophschneider authored Jul 30, 2024
1 parent d07c5f1 commit a982763
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 54 deletions.
6 changes: 6 additions & 0 deletions .changeset/hot-pants-watch.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
40 changes: 10 additions & 30 deletions polaris-tokens/src/themes/base/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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.',
Expand Down Expand Up @@ -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],
},
Expand Down
36 changes: 14 additions & 22 deletions polaris-tokens/src/themes/dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]},
Expand All @@ -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': {
Expand Down

0 comments on commit a982763

Please sign in to comment.