diff --git a/.changeset/purple-turkeys-pretend.md b/.changeset/purple-turkeys-pretend.md new file mode 100644 index 00000000000..7143bd513b0 --- /dev/null +++ b/.changeset/purple-turkeys-pretend.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris-migrator': patch +'polaris.shopify.com': patch +--- + +Update `v12-styles-replace-custom-property-color` migration with additional tokens diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts index 91de77f0802..e63864a15c2 100644 --- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts +++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts @@ -75,7 +75,11 @@ const replacementMap1 = { '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse', '--p-color-bg-inset': '--p-color-bg-fill-secondary', '--p-color-bg-interactive': '--p-color-bg-fill-brand', + '--p-color-bg-interactive-active': '--p-color-bg-fill-brand-active', + '--p-color-bg-interactive-disabled': '--p-color-bg-surface-disabled', + '--p-color-bg-interactive-hover': '--p-color-bg-fill-brand-hover', '--p-color-bg-interactive-selected': '--p-color-bg-surface-brand-selected', + '--p-color-bg-interactive-subdued': '--p-color-bg-surface-brand', '--p-color-bg-interactive-subdued-active': '--p-color-bg-surface-brand-active', '--p-color-bg-interactive-subdued-hover': '--p-color-bg-surface-brand-hover', @@ -146,6 +150,7 @@ const replacementMap1 = { '--p-color-border-magic-strong': '--p-color-border-magic-secondary', '--p-color-border-primary': '--p-color-border-brand', '--p-color-border-strong': '--p-color-border-tertiary', + '--p-color-border-strong-hover': '--p-color-border-tertiary', '--p-color-border-subdued': '--p-color-border-secondary', '--p-color-border-success-subdued': '--p-color-border-success', '--p-color-icon-critical-strong-active-experimental': diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md index bf2de1e27dd..847f0aba0db 100644 --- a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md +++ b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md @@ -1647,7 +1647,7 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep code={{ title: 'Check RegExp for hardcoded color custom properties across all file types', - code: String.raw`(?:--p-color-avatar-background-experimental|--p-color-avatar-color-experimental|--p-color-avatar-style-five-background-experimental|--p-color-avatar-style-five-color-experimental|--p-color-avatar-style-four-background-experimental|--p-color-avatar-style-four-color-experimental|--p-color-avatar-style-one-background-experimental|--p-color-avatar-style-one-color-experimental|--p-color-avatar-style-three-background-experimental|--p-color-avatar-style-three-color-experimental|--p-color-avatar-style-two-background-experimental|--p-color-avatar-style-two-color-experimental|--p-color-bg|--p-color-bg-active|--p-color-bg-app-active|--p-color-bg-app-hover|--p-color-bg-app-selected|--p-color-bg-backdrop-experimental|--p-color-bg-caution|--p-color-bg-caution-strong|--p-color-bg-caution-subdued|--p-color-bg-caution-subdued-active|--p-color-bg-caution-subdued-hover|--p-color-bg-critical|--p-color-bg-critical-strong|--p-color-bg-critical-strong-active|--p-color-bg-critical-strong-hover|--p-color-bg-critical-subdued|--p-color-bg-critical-subdued-active|--p-color-bg-critical-subdued-hover|--p-color-bg-disabled|--p-color-bg-hover|--p-color-bg-info|--p-color-bg-info-strong|--p-color-bg-info-subdued|--p-color-bg-info-subdued-active|--p-color-bg-info-subdued-hover|--p-color-bg-input|--p-color-bg-input-active-experimental|--p-color-bg-input-hover-experimental|--p-color-bg-inset|--p-color-bg-inset-strong|--p-color-bg-interactive|--p-color-bg-interactive-selected|--p-color-bg-interactive-subdued-active|--p-color-bg-interactive-subdued-hover|--p-color-bg-inverse-active|--p-color-bg-inverse-hover|--p-color-bg-magic|--p-color-bg-magic-active|--p-color-bg-magic-hover|--p-color-bg-magic-strong|--p-color-bg-magic-subdued|--p-color-bg-magic-subdued-hover|--p-color-bg-primary|--p-color-bg-primary-active|--p-color-bg-primary-disabled-experimental|--p-color-bg-primary-hover|--p-color-bg-primary-subdued|--p-color-bg-primary-subdued-active|--p-color-bg-primary-subdued-hover|--p-color-bg-primary-subdued-selected|--p-color-bg-secondary-experimental|--p-color-bg-strong|--p-color-bg-strong-active|--p-color-bg-strong-hover|--p-color-bg-subdued|--p-color-bg-subdued-active|--p-color-bg-subdued-hover|--p-color-bg-success|--p-color-bg-success-strong|--p-color-bg-success-strong-active-experimental|--p-color-bg-success-strong-hover-experimental|--p-color-bg-success-subdued|--p-color-bg-success-subdued-active|--p-color-bg-success-subdued-hover|--p-color-bg-transparent-active-experimental|--p-color-bg-transparent-disabled-experimental|--p-color-bg-transparent-experimental|--p-color-bg-transparent-hover-experimental|--p-color-bg-transparent-primary-disabled-experimental|--p-color-bg-transparent-subdued-experimental|--p-color-bg-warning|--p-color-bg-warning-strong-experimental|--p-color-bg-warning-subdued-experimental|--p-color-border-critical-strong-experimental|--p-color-border-input|--p-color-border-input-active-experimental|--p-color-border-input-hover|--p-color-border-interactive|--p-color-border-interactive-active|--p-color-border-interactive-disabled|--p-color-border-caution-subdued|--p-color-border-critical-active|--p-color-border-critical-hover|--p-color-border-critical-subdued|--p-color-border-info-subdued|--p-color-border-interactive-focus|--p-color-border-interactive-hover|--p-color-border-magic-strong|--p-color-border-primary|--p-color-border-strong|--p-color-border-subdued|--p-color-border-success-subdued|--p-color-icon-interactive|--p-color-icon-interactive-active|--p-color-icon-interactive-hover|--p-color-icon-info-strong-experimental|--p-color-icon-interactive-disabled|--p-color-icon-primary|--p-color-icon-subdued|--p-color-icon-critical-strong-experimental|--p-color-icon-critical-strong-active-experimental|--p-color-icon-critical-strong-hover-experimental|--p-color-icon-success-strong-experimental|--p-color-icon-warning-strong-experimental|--p-color-text-critical-hover-experimental|--p-color-text-info-strong|--p-color-text-interactive|--p-color-text-interactive-active|--p-color-text-interactive-disabled|--p-color-text-interactive-hover|--p-color-text-interactive-inverse|--p-color-text-inverse-subdued|--p-color-text-primary|--p-color-text-primary-hover|--p-color-text-caution-strong|--p-color-text-critical-strong|--p-color-text-magic-strong|--p-color-text-success-strong|--p-color-text-subdued|--p-color-text-warning-experimental)(?![\w-])`, + code: String.raw`(?:--p-color-avatar-background-experimental|--p-color-avatar-color-experimental|--p-color-avatar-style-five-background-experimental|--p-color-avatar-style-five-color-experimental|--p-color-avatar-style-four-background-experimental|--p-color-avatar-style-four-color-experimental|--p-color-avatar-style-one-background-experimental|--p-color-avatar-style-one-color-experimental|--p-color-avatar-style-three-background-experimental|--p-color-avatar-style-three-color-experimental|--p-color-avatar-style-two-background-experimental|--p-color-avatar-style-two-color-experimental|--p-color-bg|--p-color-bg-active|--p-color-bg-app-active|--p-color-bg-app-hover|--p-color-bg-app-selected|--p-color-bg-backdrop-experimental|--p-color-bg-caution|--p-color-bg-caution-strong|--p-color-bg-caution-subdued|--p-color-bg-caution-subdued-active|--p-color-bg-caution-subdued-hover|--p-color-bg-critical|--p-color-bg-critical-strong|--p-color-bg-critical-strong-active|--p-color-bg-critical-strong-hover|--p-color-bg-critical-subdued|--p-color-bg-critical-subdued-active|--p-color-bg-critical-subdued-hover|--p-color-bg-disabled|--p-color-bg-hover|--p-color-bg-info|--p-color-bg-info-strong|--p-color-bg-info-subdued|--p-color-bg-info-subdued-active|--p-color-bg-info-subdued-hover|--p-color-bg-input|--p-color-bg-input-active-experimental|--p-color-bg-input-hover-experimental|--p-color-bg-inset|--p-color-bg-inset-strong|--p-color-bg-interactive|--p-color-bg-interactive-active|--p-color-bg-interactive-disabled|--p-color-bg-interactive-hover|--p-color-bg-interactive-selected|--p-color-bg-interactive-subdued|--p-color-bg-interactive-subdued-active|--p-color-bg-interactive-subdued-hover|--p-color-bg-inverse-active|--p-color-bg-inverse-hover|--p-color-bg-magic|--p-color-bg-magic-active|--p-color-bg-magic-hover|--p-color-bg-magic-strong|--p-color-bg-magic-subdued|--p-color-bg-magic-subdued-hover|--p-color-bg-primary|--p-color-bg-primary-active|--p-color-bg-primary-disabled-experimental|--p-color-bg-primary-hover|--p-color-bg-primary-subdued|--p-color-bg-primary-subdued-active|--p-color-bg-primary-subdued-hover|--p-color-bg-primary-subdued-selected|--p-color-bg-secondary-experimental|--p-color-bg-strong|--p-color-bg-strong-active|--p-color-bg-strong-hover|--p-color-bg-subdued|--p-color-bg-subdued-active|--p-color-bg-subdued-hover|--p-color-bg-success|--p-color-bg-success-strong|--p-color-bg-success-strong-active-experimental|--p-color-bg-success-strong-hover-experimental|--p-color-bg-success-subdued|--p-color-bg-success-subdued-active|--p-color-bg-success-subdued-hover|--p-color-bg-transparent-active-experimental|--p-color-bg-transparent-disabled-experimental|--p-color-bg-transparent-experimental|--p-color-bg-transparent-hover-experimental|--p-color-bg-transparent-primary-disabled-experimental|--p-color-bg-transparent-subdued-experimental|--p-color-bg-warning|--p-color-bg-warning-strong-experimental|--p-color-bg-warning-subdued-experimental|--p-color-border-critical-strong-experimental|--p-color-border-input|--p-color-border-input-active-experimental|--p-color-border-input-hover|--p-color-border-interactive|--p-color-border-interactive-active|--p-color-border-interactive-disabled|--p-color-border-caution-subdued|--p-color-border-critical-active|--p-color-border-critical-hover|--p-color-border-critical-subdued|--p-color-border-info-subdued|--p-color-border-interactive-focus|--p-color-border-interactive-hover|--p-color-border-magic-strong|--p-color-border-primary|--p-color-border-strong|--p-color-border-strong-hover|--p-color-border-subdued|--p-color-border-success-subdued|--p-color-icon-interactive|--p-color-icon-interactive-active|--p-color-icon-interactive-hover|--p-color-icon-info-strong-experimental|--p-color-icon-interactive-disabled|--p-color-icon-primary|--p-color-icon-subdued|--p-color-icon-critical-strong-experimental|--p-color-icon-critical-strong-active-experimental|--p-color-icon-critical-strong-hover-experimental|--p-color-icon-success-strong-experimental|--p-color-icon-warning-strong-experimental|--p-color-text-critical-hover-experimental|--p-color-text-info-strong|--p-color-text-interactive|--p-color-text-interactive-active|--p-color-text-interactive-disabled|--p-color-text-interactive-hover|--p-color-text-interactive-inverse|--p-color-text-inverse-subdued|--p-color-text-primary|--p-color-text-primary-hover|--p-color-text-caution-strong|--p-color-text-critical-strong|--p-color-text-magic-strong|--p-color-text-success-strong|--p-color-text-subdued|--p-color-text-warning-experimental)(?![\w-])`, }} />

@@ -1770,7 +1770,11 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep | `--p-color-bg-inset` | `--p-color-bg-fill-secondary` | | `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` | | `--p-color-bg-interactive` | `--p-color-bg-fill-brand` | +| `--p-color-bg-interactive-active` | `--p-color-bg-fill-brand-active` | +| `--p-color-bg-interactive-disabled` | `--p-color-bg-surface-disabled` | +| `--p-color-bg-interactive-hover` | `--p-color-bg-fill-brand-hover` | | `--p-color-bg-interactive-selected` | `--p-color-bg-surface-brand-selected` | +| `--p-color-bg-interactive-subdued` | `--p-color-bg-surface-brand` | | `--p-color-bg-interactive-subdued-active` | `--p-color-bg-surface-brand-active` | | `--p-color-bg-interactive-subdued-hover` | `--p-color-bg-surface-brand-hover` | | `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` | @@ -1826,6 +1830,7 @@ To replace deprecated `color` custom properties, you can run the [v12-styles-rep | `--p-color-border-subdued` | `--p-color-border-secondary` | | `--p-color-border-success-subdued` | `--p-color-border-success` | | `--p-color-border-strong` | `--p-color-border-tertiary` | +| `--p-color-border-strong-hover` | `--p-color-border-tertiary` | | `--p-color-border-info-subdued` | `--p-color-border-info` | | `--p-color-border-input` | `--p-color-input-border` | | `--p-color-border-input-hover` | `--p-color-input-border-hover` |