From 4dceb5ce87c747f37972331d5e0e982102fb33e1 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 24 Oct 2023 16:15:21 -0600 Subject: [PATCH 1/4] Add missing color tokens to migration --- .../v12-styles-replace-custom-property-color/transform.ts | 4 ++++ .../content/version-guides/migrating-from-v11-to-v12.md | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) 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..778507e1c4b 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', 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..5276f79ba00 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-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` | From 2fbdf89bb40df9088ca7b5f6d7044d910c818051 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 24 Oct 2023 16:23:38 -0600 Subject: [PATCH 2/4] Add changeset --- .changeset/purple-turkeys-pretend.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/purple-turkeys-pretend.md diff --git a/.changeset/purple-turkeys-pretend.md b/.changeset/purple-turkeys-pretend.md new file mode 100644 index 00000000000..5a9881c1024 --- /dev/null +++ b/.changeset/purple-turkeys-pretend.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris-migrator': minor +'polaris.shopify.com': minor +--- + +Update `v12-styles-replace-custom-property-color` migration with additional tokens From 34e769627536492932abdda09acf580b2fb78b43 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 25 Oct 2023 10:20:18 -0600 Subject: [PATCH 3/4] Update .changeset/purple-turkeys-pretend.md Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- .changeset/purple-turkeys-pretend.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/purple-turkeys-pretend.md b/.changeset/purple-turkeys-pretend.md index 5a9881c1024..7143bd513b0 100644 --- a/.changeset/purple-turkeys-pretend.md +++ b/.changeset/purple-turkeys-pretend.md @@ -1,6 +1,6 @@ --- -'@shopify/polaris-migrator': minor -'polaris.shopify.com': minor +'@shopify/polaris-migrator': patch +'polaris.shopify.com': patch --- Update `v12-styles-replace-custom-property-color` migration with additional tokens From 0cd8acdb0975ee372c27a318518e40fec1ac57be Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Wed, 25 Oct 2023 10:48:52 -0600 Subject: [PATCH 4/4] Add missing color token to migration --- .../v12-styles-replace-custom-property-color/transform.ts | 1 + .../content/version-guides/migrating-from-v11-to-v12.md | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) 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 778507e1c4b..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 @@ -150,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 5276f79ba00..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-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-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-])`, }} />

@@ -1830,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` |