Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clean up experimental dark tokens #12467

Merged
merged 3 commits into from
Jul 30, 2024
Merged

Clean up experimental dark tokens #12467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4cd5942
Clean up experimental dark dokens
sophschneider Jul 25, 2024
53e7c72
Add new dark experimental values
sophschneider Jul 29, 2024
ce665e7
Add disabled tokens
sophschneider Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/hot-pants-watch.md
View file
Open in desktop
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.
4 changes: 2 additions & 2 deletions polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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]},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bernardojoaogarcia would you be able to double check these values? I think I cross referenced all of them but want a second pair of eyes

'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
Loading