From 23f792d3066c15a13a627eaf04309ca96a148b9f Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Mon, 23 Oct 2023 10:47:33 -0400 Subject: [PATCH] Fix errors in buttonFrom util and Checkbox styles; migration guide patches --- polaris-react/src/components/Button/utils.tsx | 14 +- .../src/components/Checkbox/Checkbox.scss | 2 +- .../content/whats-new/version-11-tokens.md | 278 +++++++++--------- 3 files changed, 152 insertions(+), 142 deletions(-) diff --git a/polaris-react/src/components/Button/utils.tsx b/polaris-react/src/components/Button/utils.tsx index ca297bda811..c5658fffca0 100644 --- a/polaris-react/src/components/Button/utils.tsx +++ b/polaris-react/src/components/Button/utils.tsx @@ -26,12 +26,22 @@ export function buttonsFrom( } export function buttonFrom( - {content, onAction, ...action}: ComplexAction, + {content, onAction, plain, destructive, ...action}: ComplexAction, overrides?: Partial, key?: any, ) { + const variant = !overrides?.variant && plain ? 'plain' : overrides?.variant; + const tone = !overrides?.tone && destructive ? 'critical' : overrides?.tone; + return ( - ); diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss index 3a99026709d..ae92215fee0 100644 --- a/polaris-react/src/components/Checkbox/Checkbox.scss +++ b/polaris-react/src/components/Checkbox/Checkbox.scss @@ -76,7 +76,7 @@ // in order for the background color to bleed all the way to the edge of the element. border-color: transparent; // stylelint-disable-next-line polaris/color/function-disallowed-list -- set background color - background-color: rgba(0, 0, 0, 0.08); + background-color: rgba(--p-color-checkbox-bg-surface-disabled); box-shadow: none; &::before { diff --git a/polaris.shopify.com/content/whats-new/version-11-tokens.md b/polaris.shopify.com/content/whats-new/version-11-tokens.md index 316dbe094fc..aa690b8e58d 100644 --- a/polaris.shopify.com/content/whats-new/version-11-tokens.md +++ b/polaris.shopify.com/content/whats-new/version-11-tokens.md @@ -33,150 +33,150 @@ We completely overhauled our color token values, naming conventions, and archite _Find more in-depth information on migrating color tokens from v10 to v11 in our [migration guide](https://github.com/Shopify/polaris/blob/main/documentation/guides/migrating-from-v10-to-v11.md#color)._ -| Deprecated Token | Replacement Value | -| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--p-text-warning` | `--p-color-text-caution` | -| `--p-text-success` | `--p-color-text-success` | -| `--p-text-subdued-on-dark` | `--p-color-text-inverse-subdued` | -| `--p-text-subdued` | `--p-color-text-subdued` | -| `--p-text-primary-pressed` | `--p-color-text-primary` | -| `--p-text-primary-hovered` | `--p-color-text-primary-hover` | -| `--p-text-primary` | `--p-color-text-primary` | -| `--p-text-on-primary` | `--p-color-text-on-color` | -| `--p-text-on-interactive` | `--p-color-text-on-color` | -| `--p-text-on-dark` | `--p-color-text-inverse` | -| `--p-text-on-critical` | `--p-color-text-on-color` | -| `--p-text-highlight` | `--p-color-text-info` | -| `--p-text-disabled` | `--p-color-text-disabled` | -| `--p-text-critical` | `--p-color-text-critical` | -| `--p-text` | `--p-color-text` | -| `--p-surface-warning-subdued-pressed` | `--p-color-bg-caution-subdued-active` | -| `--p-surface-warning-subdued-hovered` | `--p-color-bg-caution-subdued-hover` | -| `--p-surface-warning-subdued` | `--p-color-bg-caution-subdued` | -| `--p-surface-warning` | `--p-color-bg-warning` | -| `--p-surface-success-subdued-pressed` | `--p-color-bg-success-subdued-active` | -| `--p-surface-success-subdued-hovered` | `--p-color-bg-success-subdued-hover` | -| `--p-surface-success-subdued ` | `--p-color-bg-success-subdued` | -| `--p-surface-success` | `--p-color-bg-success` | -| `--p-surface-subdued` | `--p-color-bg-subdued` | -| `--p-surface-selected-pressed` | `--p-color-bg-interactive-subdued-active` | -| `--p-surface-selected-hovered` | `--p-color-bg-interactive-subdued-hover` | -| `--p-surface-selected` | `--p-color-bg-interactive-selected` | -| `--p-surface-search-field-dark` | `--p-color-bg-inverse` | -| `--p-surface-search-field` | `--p-color-bg-inset` | -| `--p-surface-primary-selected-pressed` | `--p-color-bg-primary-subdued-active` | -| `--p-surface-primary-selected-hovered` | `--p-color-bg-primary-subdued-hover` | -| `--p-surface-primary-selected` | `--p-color-bg-primary-subdued-selected` | -| `--p-surface-pressed-dark` | `--p-color-bg-inverse-active` | -| `--p-surface-pressed` | `--p-color-bg-active` | -| `--p-surface-neutral-subdued-dark` | `--p-color-bg-inverse` | -| `--p-surface-neutral-subdued` | `--p-color-bg-subdued` | -| `--p-surface-neutral-pressed` | `--p-color-bg-strong-active` | -| `--p-surface-neutral-hovered` | `--p-color-bg-strong-hover` | -| `--p-surface-neutral-disabled` | `--p-color-bg-disabled` | -| `--p-surface-neutral` | `--p-color-bg-strong` | -| `--p-surface-hovered-dark` | `--p-color-bg-inverse-hover` | -| `--p-surface-hovered` | `--p-color-bg-hover` | -| `--p-surface-highlight-subdued-pressed` | `--p-color-bg-info-subdued-active` | -| `--p-surface-highlight-subdued-hovered` | `--p-color-bg-info-subdued-hover` | -| `--p-surface-highlight-subdued` | `--p-color-bg-info-subdued` | -| `--p-surface-highlight` | `--p-color-bg-info` | -| `--p-surface-disabled` | `--p-color-bg-disabled` | -| `--p-surface-depressed` | `--p-color-bg-inset` | -| `--p-surface-dark` | `--p-color-bg-inverse` | -| `--p-surface-critical-subdued-pressed` | `--p-color-bg-critical-subdued-active` | -| `--p-surface-critical-subdued-hovered` | `--p-color-bg-critical-subdued-hover` | -| `--p-surface-critical-subdued-depressed` | `--p-color-bg-critical` | -| `--p-surface-critical-subdued` | `--p-color-bg-critical-subdued` | -| `--p-surface-critical` | `--p-color-bg-critical` | -| `--p-surface-attention` | `--p-color-bg-caution` | -| `--p-surface` | `--p-color-bg` | -| `--p-shadow-color-picker-dragger` | `rgba(33, 43, 54, 0.32)` | -| `--p-shadow-color-picker` | `rgba(0, 0, 0, 0.5)` | -| `--p-overlay` | `rgba(255, 255, 255, 0.5)` | -| `--p-interactive-pressed-on-dark` | `--p-color-text-interactive-inverse` | -| `--p-interactive-pressed` | For `color` properties: `--p-color-text-interactive-active`
For `background` properties: `--p-color-bg-interactive-active`
For `border` properties: `--p-color-border-interactive-active`
For `fill` properties: `--p-color-icon-interactive-active` | -| `--p-interactive-on-dark` | `--p-color-text-interactive-inverse` | +| Deprecated Token | Replacement Value | +| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--p-text-warning` | `--p-color-text-caution` | +| `--p-text-success` | `--p-color-text-success` | +| `--p-text-subdued-on-dark` | `--p-color-text-inverse-subdued` | +| `--p-text-subdued` | `--p-color-text-subdued` | +| `--p-text-primary-pressed` | `--p-color-text-primary` | +| `--p-text-primary-hovered` | `--p-color-text-primary-hover` | +| `--p-text-primary` | `--p-color-text-primary` | +| `--p-text-on-primary` | `--p-color-text-on-color` | +| `--p-text-on-interactive` | `--p-color-text-on-color` | +| `--p-text-on-dark` | `--p-color-text-inverse` | +| `--p-text-on-critical` | `--p-color-text-on-color` | +| `--p-text-highlight` | `--p-color-text-info` | +| `--p-text-disabled` | `--p-color-text-disabled` | +| `--p-text-critical` | `--p-color-text-critical` | +| `--p-text` | `--p-color-text` | +| `--p-surface-warning-subdued-pressed` | `--p-color-bg-caution-subdued-active` | +| `--p-surface-warning-subdued-hovered` | `--p-color-bg-caution-subdued-hover` | +| `--p-surface-warning-subdued` | `--p-color-bg-caution-subdued` | +| `--p-surface-warning` | `--p-color-bg-warning` | +| `--p-surface-success-subdued-pressed` | `--p-color-bg-success-subdued-active` | +| `--p-surface-success-subdued-hovered` | `--p-color-bg-success-subdued-hover` | +| `--p-surface-success-subdued ` | `--p-color-bg-success-subdued` | +| `--p-surface-success` | `--p-color-bg-success` | +| `--p-surface-subdued` | `--p-color-bg-subdued` | +| `--p-surface-selected-pressed` | `--p-color-bg-interactive-subdued-active` | +| `--p-surface-selected-hovered` | `--p-color-bg-interactive-subdued-hover` | +| `--p-surface-selected` | `--p-color-bg-interactive-selected` | +| `--p-surface-search-field-dark` | `--p-color-bg-inverse` | +| `--p-surface-search-field` | `--p-color-bg-inset` | +| `--p-surface-primary-selected-pressed` | `--p-color-bg-primary-subdued-active` | +| `--p-surface-primary-selected-hovered` | `--p-color-bg-primary-subdued-hover` | +| `--p-surface-primary-selected` | `--p-color-bg-primary-subdued-selected` | +| `--p-surface-pressed-dark` | `--p-color-bg-inverse-active` | +| `--p-surface-pressed` | `--p-color-bg-active` | +| `--p-surface-neutral-subdued-dark` | `--p-color-bg-inverse` | +| `--p-surface-neutral-subdued` | `--p-color-bg-subdued` | +| `--p-surface-neutral-pressed` | `--p-color-bg-strong-active` | +| `--p-surface-neutral-hovered` | `--p-color-bg-strong-hover` | +| `--p-surface-neutral-disabled` | `--p-color-bg-disabled` | +| `--p-surface-neutral` | `--p-color-bg-strong` | +| `--p-surface-hovered-dark` | `--p-color-bg-inverse-hover` | +| `--p-surface-hovered` | `--p-color-bg-hover` | +| `--p-surface-highlight-subdued-pressed` | `--p-color-bg-info-subdued-active` | +| `--p-surface-highlight-subdued-hovered` | `--p-color-bg-info-subdued-hover` | +| `--p-surface-highlight-subdued` | `--p-color-bg-info-subdued` | +| `--p-surface-highlight` | `--p-color-bg-info` | +| `--p-surface-disabled` | `--p-color-bg-disabled` | +| `--p-surface-depressed` | `--p-color-bg-inset` | +| `--p-surface-dark` | `--p-color-bg-inverse` | +| `--p-surface-critical-subdued-pressed` | `--p-color-bg-critical-subdued-active` | +| `--p-surface-critical-subdued-hovered` | `--p-color-bg-critical-subdued-hover` | +| `--p-surface-critical-subdued-depressed` | `--p-color-bg-critical` | +| `--p-surface-critical-subdued` | `--p-color-bg-critical-subdued` | +| `--p-surface-critical` | `--p-color-bg-critical` | +| `--p-surface-attention` | `--p-color-bg-caution` | +| `--p-surface` | `--p-color-bg` | +| `--p-shadow-color-picker-dragger` | `rgba(33, 43, 54, 0.32)` | +| `--p-shadow-color-picker` | `rgba(0, 0, 0, 0.5)` | +| `--p-overlay` | `rgba(255, 255, 255, 0.5)` | +| `--p-interactive-pressed-on-dark` | `--p-color-text-interactive-inverse` | +| `--p-interactive-pressed` | For `color` properties: `--p-color-text-interactive-active`
For `background` properties: `--p-color-bg-interactive-active`
For `border` properties: `--p-color-border-interactive-active`
For `fill` properties: `--p-color-icon-interactive-active` | +| `--p-interactive-on-dark` | `--p-color-text-interactive-inverse` | | `--p-interactive-hovered` | For `color` properties: `--p-color-text-interactive-hover`
For `background` properties: `--p-color-bg-interactive-hover`
For `border` properties: `--p-color-border-interactive-hover`
For `fill` properties: `--p-color-icon-interactive-hover` | | `--p-interactive-disabled` | For `color` properties: `--p-color-text-interactive-disabled`
For `background` properties: `--p-color-bg-interactive-disabled`
For `border` properties: `--p-color-border-interactive-disabled`
For `fill` properties: `--p-color-icon-interactive-disabled` | -| `--p-interactive-critical-pressed` | `--p-color-text-critical-active` | -| `--p-interactive-critical-hovered` | `--p-color-bg-critical-strong-hover` | -| `--p-interactive-critical-disabled` | `--p-color-text-disabled` | +| `--p-interactive-critical-pressed` | `--p-color-text-critical-active` | +| `--p-interactive-critical-hovered` | `--p-color-bg-critical-strong-hover` | +| `--p-interactive-critical-disabled` | `--p-color-text-disabled` | | `--p-interactive-critical` | For `color` properties: `--p-color-text-critical`
For `background` properties: `--p-color-bg-critical`
For `border` properties: `--p-color-border-critical`
For `fill` properties: `--p-color-icon-critical` | | `--p-interactive` | For `color` properties: `--p-color-text-interactive`
For `background` properties: `--p-color-bg-interactive`
For `border` properties: `--p-color-border-interactive`
For `fill` properties: `--p-color-icon-interactive` | -| `--p-icon-warning` | `--p-color-icon-caution` | -| `--p-icon-success` | `--p-color-icon-success` | -| `--p-icon-subdued` | `--p-color-icon-subdued` | -| `--p-icon-pressed` | `--p-color-icon-active` | -| `--p-icon-on-primary` | `--p-color-icon-on-color` | -| `--p-icon-on-interactive` | `--p-color-icon-on-color` | -| `--p-icon-on-dark` | `--p-color-icon-inverse` | -| `--p-icon-on-critical` | `--p-color-icon-on-color` | -| `--p-icon-hovered` | `--p-color-icon-hover` | -| `--p-icon-highlight` | `--p-color-icon-info` | -| `--p-icon-disabled` | `--p-color-icon-disabled` | -| `--p-icon-critical` | `--p-color-icon-critical` | -| `--p-icon-attention` | `--p-color-icon-caution` | -| `--p-icon` | `--p-color-icon` | -| `--p-hint-from-direct-light` | `rgba(0, 0, 0, 0.15)` | -| `--p-focused` | `--p-color-border-interactive-focus` | -| `--p-divider-dark` | `--p-color-border-inverse` | -| `--p-divider` | `--p-color-border-subdued` | -| `--p-decorative-two-text` | `rgba(73, 11, 28, 1)` | -| `--p-decorative-two-surface` | `rgba(255, 196, 176, 1)` | -| `--p-decorative-two-icon` | `rgba(175, 41, 78, 1)` | -| `--p-decorative-three-text` | `rgba(0, 47, 25, 1)` | -| `--p-decorative-three-surface` | `rgba(146, 230, 181, 1)` | -| `--p-decorative-three-icon` | `rgba(0, 109, 65, 1)` | -| `--p-decorative-one-text` | `rgba(61, 40, 0, 1)` | -| `--p-decorative-one-surface` | `rgba(255, 201, 107, 1)` | -| `--p-decorative-one-icon` | `rgba(126, 87, 0, 1)` | -| `--p-decorative-four-text` | `rgba(0, 45, 45, 1)` | -| `--p-decorative-four-surface` | `rgba(145, 224, 214, 1)` | -| `--p-decorative-four-icon` | `rgba(0, 106, 104, 1)` | -| `--p-decorative-five-text` | `rgba(79, 14, 31, 1)` | -| `--p-decorative-five-surface` | `rgba(253, 201, 208, 1)` | -| `--p-decorative-five-icon` | `rgba(174, 43, 76, 1)` | -| `--p-border-warning-subdued` | `--p-color-border-caution-subdued` | -| `--p-border-warning` | `--p-color-border-caution` | -| `--p-border-success-subdued` | `--p-color-border-success-subdued` | -| `--p-border-success` | `--p-color-border-success` | -| `--p-border-subdued` | `--p-color-border-subdued` | -| `--p-border-shadow-subdued` | `--p-color-border-input` | -| `--p-border-shadow` | `--p-color-border-input` | -| `--p-border-on-dark` | `--p-color-border-inverse` | -| `--p-border-neutral-subdued` | `--p-color-border-strong` | -| `--p-border-hovered` | `--p-color-border-hover` | -| `--p-border-highlight-subdued` | `--p-color-border-info-subdued` | -| `--p-border-highlight` | `--p-color-border-info` | -| `--p-border-disabled` | `--p-color-border-disabled` | -| `--p-border-depressed` | `--p-color-border-inverse` | -| `--p-border-critical-subdued` | `--p-color-border-critical-subdued` | -| `--p-border-critical-disabled` | `--p-color-border-disabled` | -| `--p-border-critical` | `--p-color-border-critical` | -| `--p-border` | `--p-color-border` | -| `--p-background-selected` | `--p-color-bg-app-selected` | -| `--p-background-pressed` | `--p-color-bg-app-active` | -| `--p-background-hovered` | `--p-color-bg-app-hover` | -| `--p-background` | `--p-color-bg-app` | -| `--p-backdrop` | `rgba(0, 0, 0, 0.5)` | -| `--p-action-secondary-pressed-dark` | `--p-color-bg-inverse-active` | -| `--p-action-secondary-pressed` | `--p-color-bg-subdued-active` | -| `--p-action-secondary-hovered-dark` | `--p-color-bg-inverse-hover` | -| `--p-action-secondary-hovered` | `--p-color-bg-subdued-hover` | -| `--p-action-secondary-disabled` | `--p-color-bg-disabled` | -| `--p-action-secondary-depressed` | `--p-color-bg-inset-strong` | -| `--p-action-secondary` | `--p-color-bg-subdued` | -| `--p-action-primary-pressed` | `--p-color-bg-primary-active` | -| `--p-action-primary-hovered` | `--p-color-bg-primary-hover` | -| `--p-action-primary-disabled` | `--p-color-bg-disabled` | -| `--p-action-primary-depressed` | `--p-color-bg-primary-active` | +| `--p-icon-warning` | `--p-color-icon-caution` | +| `--p-icon-success` | `--p-color-icon-success` | +| `--p-icon-subdued` | `--p-color-icon-subdued` | +| `--p-icon-pressed` | `--p-color-icon-active` | +| `--p-icon-on-primary` | `--p-color-icon-on-color` | +| `--p-icon-on-interactive` | `--p-color-icon-on-color` | +| `--p-icon-on-dark` | `--p-color-icon-inverse` | +| `--p-icon-on-critical` | `--p-color-icon-on-color` | +| `--p-icon-hovered` | `--p-color-icon-hover` | +| `--p-icon-highlight` | `--p-color-icon-info` | +| `--p-icon-disabled` | `--p-color-icon-disabled` | +| `--p-icon-critical` | `--p-color-icon-critical` | +| `--p-icon-attention` | `--p-color-icon-caution` | +| `--p-icon` | `--p-color-icon` | +| `--p-hint-from-direct-light` | `rgba(0, 0, 0, 0.15)` | +| `--p-focused` | `--p-color-border-interactive-focus` | +| `--p-divider-dark` | `--p-color-border-inverse` | +| `--p-divider` | `--p-color-border-subdued` | +| `--p-decorative-two-text` | `rgba(73, 11, 28, 1)` | +| `--p-decorative-two-surface` | `rgba(255, 196, 176, 1)` | +| `--p-decorative-two-icon` | `rgba(175, 41, 78, 1)` | +| `--p-decorative-three-text` | `rgba(0, 47, 25, 1)` | +| `--p-decorative-three-surface` | `rgba(146, 230, 181, 1)` | +| `--p-decorative-three-icon` | `rgba(0, 109, 65, 1)` | +| `--p-decorative-one-text` | `rgba(61, 40, 0, 1)` | +| `--p-decorative-one-surface` | `rgba(255, 201, 107, 1)` | +| `--p-decorative-one-icon` | `rgba(126, 87, 0, 1)` | +| `--p-decorative-four-text` | `rgba(0, 45, 45, 1)` | +| `--p-decorative-four-surface` | `rgba(145, 224, 214, 1)` | +| `--p-decorative-four-icon` | `rgba(0, 106, 104, 1)` | +| `--p-decorative-five-text` | `rgba(79, 14, 31, 1)` | +| `--p-decorative-five-surface` | `rgba(253, 201, 208, 1)` | +| `--p-decorative-five-icon` | `rgba(174, 43, 76, 1)` | +| `--p-border-warning-subdued` | `--p-color-border-caution-subdued` | +| `--p-border-warning` | `--p-color-border-caution` | +| `--p-border-success-subdued` | `--p-color-border-success-subdued` | +| `--p-border-success` | `--p-color-border-success` | +| `--p-border-subdued` | `--p-color-border-subdued` | +| `--p-border-shadow-subdued` | `--p-color-border-input` | +| `--p-border-shadow` | `--p-color-border-input` | +| `--p-border-on-dark` | `--p-color-border-inverse` | +| `--p-border-neutral-subdued` | `--p-color-border-strong` | +| `--p-border-hovered` | `--p-color-border-hover` | +| `--p-border-highlight-subdued` | `--p-color-border-info-subdued` | +| `--p-border-highlight` | `--p-color-border-info` | +| `--p-border-disabled` | `--p-color-border-disabled` | +| `--p-border-depressed` | `--p-color-border-inverse` | +| `--p-border-critical-subdued` | `--p-color-border-critical-subdued` | +| `--p-border-critical-disabled` | `--p-color-border-disabled` | +| `--p-border-critical` | `--p-color-border-critical` | +| `--p-border` | `--p-color-border` | +| `--p-background-selected` | `--p-color-bg-app-selected` | +| `--p-background-pressed` | `--p-color-bg-app-active` | +| `--p-background-hovered` | `--p-color-bg-app-hover` | +| `--p-background` | `--p-color-bg-app` | +| `--p-backdrop` | `rgba(0, 0, 0, 0.5)` | +| `--p-action-secondary-pressed-dark` | `--p-color-bg-inverse-active` | +| `--p-action-secondary-pressed` | `--p-color-bg-subdued-active` | +| `--p-action-secondary-hovered-dark` | `--p-color-bg-inverse-hover` | +| `--p-action-secondary-hovered` | `--p-color-bg-subdued-hover` | +| `--p-action-secondary-disabled` | `--p-color-bg-disabled` | +| `--p-action-secondary-depressed` | `--p-color-bg-inset-strong` | +| `--p-action-secondary` | `--p-color-bg-subdued` | +| `--p-action-primary-pressed` | `--p-color-bg-primary-active` | +| `--p-action-primary-hovered` | `--p-color-bg-primary-hover` | +| `--p-action-primary-disabled` | `--p-color-bg-disabled` | +| `--p-action-primary-depressed` | `--p-color-bg-primary-active` | | `--p-action-primary` | For `color` properties: `--p-color-text-primary`
For `background` properties: `--p-color-bg-primary`
For `border` properties: `--p-color-border-primary`
For `fill` properties: `--p-color-icon-primary` | -| `--p-action-critical-pressed` | `--p-color-bg-critical-strong-active` | -| `--p-action-critical-hovered` | `--p-color-bg-critical-strong-hover` | -| `--p-action-critical-disabled` | `--p-color-bg-disabled` | -| `--p-action-critical-depressed` | `--p-color-bg-critical-strong-active` | -| `--p-action-critical` | `--p-color-bg-critical-strong` | +| `--p-action-critical-pressed` | `--p-color-bg-critical-strong-active` | +| `--p-action-critical-hovered` | `--p-color-bg-critical-strong-hover` | +| `--p-action-critical-disabled` | `--p-color-bg-disabled` | +| `--p-action-critical-depressed` | `--p-color-bg-critical-strong-active` | +| `--p-action-critical` | `--p-color-bg-critical-strong` | ### Depth ➡️ Shadow