From ae5398e0639795032524172d8ca03242d51ff6c7 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Fri, 1 Sep 2023 12:06:54 -0600
Subject: [PATCH 01/15] Scaffold migration

---
 .../tests/transform.test.ts                   | 12 +++++
 ...s-replace-custom-property-color.input.scss | 11 ++++
 ...-replace-custom-property-color.output.scss | 11 ++++
 .../transform.ts                              | 52 +++++++++++++++++++
 4 files changed, 86 insertions(+)
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
new file mode 100644
index 00000000000..d869f53384e
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
@@ -0,0 +1,12 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-styles-replace-custom-property-color';
+const fixtures = ['v12-styles-replace-custom-property-color'];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+    extension: 'scss',
+  });
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
new file mode 100644
index 00000000000..87ce7595665
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
@@ -0,0 +1,11 @@
+.basic {
+  color: var(--p-color-X);
+  background: var(--p-color-X);
+  background-color: var(--p-color-X);
+  border: var(--p-border-width-1) solid var(--p-color-X);
+  border-color: var(--p-color-X);
+  outline: var(--p-border-width-1) solid var(--p-color-X);
+  outline-color: var(--p-color-X);
+  fill: var(--p-color-X);
+  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-X);
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
new file mode 100644
index 00000000000..87ce7595665
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
@@ -0,0 +1,11 @@
+.basic {
+  color: var(--p-color-X);
+  background: var(--p-color-X);
+  background-color: var(--p-color-X);
+  border: var(--p-border-width-1) solid var(--p-color-X);
+  border-color: var(--p-color-X);
+  outline: var(--p-border-width-1) solid var(--p-color-X);
+  outline-color: var(--p-color-X);
+  fill: var(--p-color-X);
+  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-X);
+}
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
new file mode 100644
index 00000000000..f9c2f2e78a8
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts
@@ -0,0 +1,52 @@
+import type {FileInfo, API} from 'jscodeshift';
+
+import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
+
+export default function transformer(fileInfo: FileInfo, _: API) {
+  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
+}
+
+const allMap = {
+  '--p-color-X': '--p-color-XX',
+
+  // Color
+  '--p-color-XX': '--p-color-XX',
+
+  // Background
+  '--p-color-XXX': '--p-color-XX',
+
+  // Border
+  '--p-color-XXXX': '--p-color-XX',
+
+  // Fill
+  '--p-color-XXXXX': '--p-color-XX',
+};
+
+const colorMap = {
+  ...allMap,
+  '--p-color-XX': '--p-color-XX',
+};
+
+const backgroundColorMap = {
+  ...allMap,
+  '--p-color-XX': '--p-color-XX',
+};
+
+const borderColorMap = {
+  ...allMap,
+  '--p-color-XX': '--p-color-XX',
+};
+
+const fillColorMap = {
+  ...allMap,
+  '--p-color-XX': '--p-color-XX',
+};
+
+const replacementMaps = {
+  color: colorMap,
+  '/^background/': backgroundColorMap,
+  '/^border/': borderColorMap,
+  '/^outline/': borderColorMap,
+  fill: fillColorMap,
+  '/.+/': allMap,
+};

From faa835a6547171c3b190f2ff308820cc73fa899e Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:03:47 -0700
Subject: [PATCH 02/15] Update replacement maps

---
 ...s-replace-custom-property-color.input.scss |  10 +-
 ...-replace-custom-property-color.output.scss |  10 +-
 .../transform.ts                              | 168 +++++++++++++-----
 3 files changed, 128 insertions(+), 60 deletions(-)

diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
index 87ce7595665..ca49c86d72a 100644
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
@@ -1,11 +1,3 @@
 .basic {
-  color: var(--p-color-X);
-  background: var(--p-color-X);
-  background-color: var(--p-color-X);
-  border: var(--p-border-width-1) solid var(--p-color-X);
-  border-color: var(--p-color-X);
-  outline: var(--p-border-width-1) solid var(--p-color-X);
-  outline-color: var(--p-color-X);
-  fill: var(--p-color-X);
-  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-X);
+  background: var(--p-color-bg);
 }
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
index 87ce7595665..eaa3699c218 100644
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
@@ -1,11 +1,3 @@
 .basic {
-  color: var(--p-color-X);
-  background: var(--p-color-X);
-  background-color: var(--p-color-X);
-  border: var(--p-border-width-1) solid var(--p-color-X);
-  border-color: var(--p-color-X);
-  outline: var(--p-border-width-1) solid var(--p-color-X);
-  outline-color: var(--p-color-X);
-  fill: var(--p-color-X);
-  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-X);
+  background: var(--p-color-surface);
 }
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 f9c2f2e78a8..91f3eb129c8 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
@@ -6,47 +6,131 @@ export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
 }
 
-const allMap = {
-  '--p-color-X': '--p-color-XX',
-
-  // Color
-  '--p-color-XX': '--p-color-XX',
-
-  // Background
-  '--p-color-XXX': '--p-color-XX',
-
-  // Border
-  '--p-color-XXXX': '--p-color-XX',
-
-  // Fill
-  '--p-color-XXXXX': '--p-color-XX',
-};
-
-const colorMap = {
-  ...allMap,
-  '--p-color-XX': '--p-color-XX',
-};
-
-const backgroundColorMap = {
-  ...allMap,
-  '--p-color-XX': '--p-color-XX',
-};
-
-const borderColorMap = {
-  ...allMap,
-  '--p-color-XX': '--p-color-XX',
-};
-
-const fillColorMap = {
-  ...allMap,
-  '--p-color-XX': '--p-color-XX',
-};
-
 const replacementMaps = {
-  color: colorMap,
-  '/^background/': backgroundColorMap,
-  '/^border/': borderColorMap,
-  '/^outline/': borderColorMap,
-  fill: fillColorMap,
-  '/.+/': allMap,
+  '/.+/': {
+    '--p-color-bg': '--p-color-surface',
+    // '--p-color-bg-hover': '--p-color-surface-hover',
+    // '--p-color-bg-active': '--p-color-surface-active',
+    // '--p-color-bg-disabled': '--p-color-surface-disabled',
+    '--p-color-bg-subdued': '--p-color-surface-secondary',
+    '--p-color-bg-subdued-hover': '--p-color-surface-secondary-hover',
+    '--p-color-bg-subdued-active': '--p-color-surface-secondary-active',
+    '--p-color-bg-secondary-experimental': '--p-color-surface-tertiary',
+    '--p-color-bg-strong': '--p-color-fill-tertiary',
+    '--p-color-bg-strong-hover': '--p-color-fill-tertiary-hover',
+    '--p-color-bg-strong-active': '--p-color-fill-tertiary-active',
+    '--p-color-bg-input': '--p-color-input-surface',
+    '--p-color-bg-input-hover-experimental': '--p-color-input-surface-hover',
+    '--p-color-bg-input-active-experimental': '--p-color-input-surface-active',
+    // '--p-color-bg-primary': '--p-color-fill-brand',
+    // '--p-color-bg-primary-hover': '--p-color-fill-brand-hover',
+    // '--p-color-bg-primary-active': '--p-color-fill-brand-active',
+    // '--p-color-bg-primary-subdued': '--p-color-surface-brand',
+    // '--p-color-bg-primary-subdued-hover': '--p-color-surface-brand-hover',
+    // '--p-color-bg-primary-subdued-active': '--p-color-surface-brand-active',
+    // '--p-color-bg-primary-subdued-selected': '--p-color-surface-brand-selected',
+    '--p-color-bg-app-selected': '--p-color-surface-selected',
+    '--p-color-bg-success-strong': '--p-color-fill-success',
+    '--p-color-bg-success-strong-hover-experimental':
+      '--p-color-fill-success-hover',
+    '--p-color-bg-success-strong-active-experimental':
+      '--p-color-fill-success-active',
+    '--p-color-bg-success': '--p-color-fill-success-secondary',
+    '--p-color-bg-success-subdued': '--p-color-surface-success',
+    '--p-color-bg-success-subdued-hover': '--p-color-surface-success-hover',
+    '--p-color-bg-success-subdued-active': '--p-color-surface-success-active',
+    '--p-color-bg-critical-strong': '--p-color-fill-critical',
+    '--p-color-bg-critical-strong-hover': '--p-color-fill-critical-hover',
+    '--p-color-bg-critical-strong-active': '--p-color-fill-critical-active',
+    '--p-color-bg-critical': '--p-color-fill-critical-secondary',
+    '--p-color-bg-critical-subdued': '--p-color-surface-critical',
+    '--p-color-bg-critical-subdued-hover': '--p-color-surface-critical-hover',
+    '--p-color-bg-critical-subdued-active': '--p-color-surface-critical-active',
+    '--p-color-bg-caution-strong': '--p-color-fill-caution',
+    '--p-color-bg-caution': '--p-color-fill-caution-secondary',
+    '--p-color-bg-caution-subdued': '--p-color-surface-caution',
+    '--p-color-bg-caution-subdued-hover': '--p-color-surface-caution-hover',
+    '--p-color-bg-caution-subdued-active': '--p-color-surface-caution-active',
+    '--p-color-bg-info-strong': '--p-color-fill-info',
+    '--p-color-bg-info': '--p-color-fill-info-secondary',
+    '--p-color-bg-info-subdued': '--p-color-surface-info',
+    '--p-color-bg-info-subdued-hover': '--p-color-surface-info-hover',
+    '--p-color-bg-info-subdued-active': '--p-color-surface-info-active',
+    '--p-color-bg-warning-strong-experimental': '--p-color-fill-warning',
+    '--p-color-bg-warning': '--p-color-fill-warning-secondary',
+    '--p-color-bg-warning-subdued-experimental': '--p-color-surface-warning',
+    '--p-color-bg-magic-strong': '--p-color-fill-magic',
+    '--p-color-bg-magic': '--p-color-fill-magic-secondary',
+    '--p-color-bg-magic-hover': '--p-color-fill-magic-secondary-hover',
+    '--p-color-bg-magic-active': '--p-color-fill-magic-secondary-active',
+    // '--p-color-bg-magic-subdued': '--p-color-surface-magic',
+    '--p-color-bg-magic-subdued-hover': '--p-color-surface-magic-hover',
+    '--p-color-bg-inset': '--p-color-fill-secondary',
+    '--p-color-bg-inset-strong': '--p-color-fill-inverse',
+    '--p-color-bg-inverse-hover': '--p-color-fill-inverse-hover',
+    '--p-color-bg-inverse-active': '--p-color-fill-inverse-active',
+    '--p-color-bg-transparent-experimental': '--p-color-surface-transparent',
+    '--p-color-bg-transparent-hover-experimental':
+      '--p-color-fill-transparent-hover',
+    '--p-color-bg-transparent-active-experimental':
+      '--p-color-fill-transparent-active',
+    '--p-color-bg-transparent-disabled-experimental': '--p-color-fill-disabled',
+    '--p-color-bg-transparent-subdued-experimental':
+      '--p-color-fill-transparent-secondary',
+    '--p-color-bg-transparent-primary-disabled-experimental':
+      '--p-color-fill-brand-disabled',
+    '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
+    '--p-color-avatar-background-experimental': '--p-color-avatar-fill',
+    '--p-color-avatar-style-one-background-experimental':
+      '--p-color-avatar-one-fill',
+    '--p-color-avatar-style-two-background-experimental':
+      '--p-color-avatar-two-fill',
+    '--p-color-avatar-style-three-background-experimental':
+      '--p-color-avatar-three-fill',
+    '--p-color-avatar-style-four-background-experimental':
+      '--p-color-avatar-four-fill',
+    '--p-color-avatar-style-five-background-experimental':
+      '--p-color-avatar-five-fill',
+    '--p-color-text-subdued': '--p-color-text-secondary',
+    '--p-color-text-interactive': '--p-color-text-emphasis',
+    '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
+    '--p-color-text-interactive-active': '--p-color-text-emphasis-active',
+    '--p-color-text-primary': '--p-color-text-brand',
+    '--p-color-text-primary-hover': '--p-color-text-brand-hover',
+    // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
+    '--p-color-text-info-strong': '--p-color-text-info-on-fill',
+    // '--p-color-text-warning-experimental': '--p-color-text-warning',
+    '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
+    // '--p-color-text-interactive-inverse': '--p-color-link-inverse',
+    '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-fill',
+    '--p-color-avatar-style-one-color-experimental':
+      '--p-color-avatar-one-text-on-fill',
+    '--p-color-avatar-style-two-color-experimental':
+      '--p-color-avatar-two-text-on-fill',
+    '--p-color-avatar-style-three-color-experimental':
+      '--p-color-avatar-three-text-on-fill',
+    '--p-color-avatar-style-four-color-experimental':
+      '--p-color-avatar-four-text-on-fill',
+    '--p-color-avatar-style-five-color-experimental':
+      '--p-color-avatar-five-text-on-fill',
+    '--p-color-icon-subdued': '--p-color-icon-secondary',
+    '--p-color-icon-interactive': '--p-color-icon-emphasis',
+    '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',
+    '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
+    '--p-color-icon-primary': '--p-color-icon-brand',
+    '--p-color-border-subdued': '--p-color-border-secondary',
+    // '--p-color-border-strong': '--p-color-border-tertiary',
+    '--p-color-border-input': '--p-color-input-border',
+    '--p-color-border-input-hover': '--p-color-input-border-hover',
+    '--p-color-border-input-active-experimental':
+      '--p-color-input-border-active',
+    // '--p-color-border-interactive': '--p-color-border-emphasis',
+    '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover',
+    '--p-color-border-interactive-active': '--p-color-border-emphasis-active',
+    '--p-color-border-interactive-focus': '--p-color-border-focus',
+    '--p-color-border-primary': '--p-color-border-brand',
+    '--p-color-border-critical-strong-experimental':
+      '--p-color-border-critical-secondary',
+    '--p-color-border-magic-strong': '--p-color-border-magic-secondary',
+  },
 };

From 2af3fdb8b09bfc6484c2c07eef747052d5fd0c99 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Mon, 18 Sep 2023 15:16:51 -0700
Subject: [PATCH 03/15] Add changeset entry

---
 .changeset/fresh-ravens-jam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fresh-ravens-jam.md

diff --git a/.changeset/fresh-ravens-jam.md b/.changeset/fresh-ravens-jam.md
new file mode 100644
index 00000000000..9260b512ee5
--- /dev/null
+++ b/.changeset/fresh-ravens-jam.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Created migration to replace deprecated `color` custom properties in Polaris v12.0.0

From e2da0a160391eb082c5b44d2cbd159ac9fb58335 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Mon, 18 Sep 2023 16:32:18 -0700
Subject: [PATCH 04/15] Update replacement mappings

---
 .../transform.ts                              | 164 +++++++++---------
 1 file changed, 85 insertions(+), 79 deletions(-)

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 91f3eb129c8..39877038f1d 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
@@ -8,89 +8,95 @@ export default function transformer(fileInfo: FileInfo, _: API) {
 
 const replacementMaps = {
   '/.+/': {
-    '--p-color-bg': '--p-color-surface',
-    // '--p-color-bg-hover': '--p-color-surface-hover',
-    // '--p-color-bg-active': '--p-color-surface-active',
-    // '--p-color-bg-disabled': '--p-color-surface-disabled',
-    '--p-color-bg-subdued': '--p-color-surface-secondary',
-    '--p-color-bg-subdued-hover': '--p-color-surface-secondary-hover',
-    '--p-color-bg-subdued-active': '--p-color-surface-secondary-active',
-    '--p-color-bg-secondary-experimental': '--p-color-surface-tertiary',
-    '--p-color-bg-strong': '--p-color-fill-tertiary',
-    '--p-color-bg-strong-hover': '--p-color-fill-tertiary-hover',
-    '--p-color-bg-strong-active': '--p-color-fill-tertiary-active',
-    '--p-color-bg-input': '--p-color-input-surface',
-    '--p-color-bg-input-hover-experimental': '--p-color-input-surface-hover',
-    '--p-color-bg-input-active-experimental': '--p-color-input-surface-active',
-    // '--p-color-bg-primary': '--p-color-fill-brand',
-    // '--p-color-bg-primary-hover': '--p-color-fill-brand-hover',
-    // '--p-color-bg-primary-active': '--p-color-fill-brand-active',
-    // '--p-color-bg-primary-subdued': '--p-color-surface-brand',
-    // '--p-color-bg-primary-subdued-hover': '--p-color-surface-brand-hover',
-    // '--p-color-bg-primary-subdued-active': '--p-color-surface-brand-active',
-    // '--p-color-bg-primary-subdued-selected': '--p-color-surface-brand-selected',
-    '--p-color-bg-app-selected': '--p-color-surface-selected',
-    '--p-color-bg-success-strong': '--p-color-fill-success',
+    '--p-color-bg': '--p-color-bg-surface',
+    // '--p-color-bg-hover': '--p-color-bg-surface-hover',
+    // '--p-color-bg-active': '--p-color-bg-surface-active',
+    // '--p-color-bg-disabled': '--p-color-bg-surface-disabled',
+    '--p-color-bg-subdued': '--p-color-bg-surface-secondary',
+    '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover',
+    '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active',
+    '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary',
+    '--p-color-bg-strong': '--p-color-bg-fill-tertiary',
+    '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover',
+    '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active',
+    '--p-color-bg-input': '--p-color-input-bg-surface',
+    '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover',
+    '--p-color-bg-input-active-experimental':
+      '--p-color-input-bg-surface-active',
+    // '--p-color-bg-primary': '--p-color-bg-fill-brand',
+    // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover',
+    // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active',
+    // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand',
+    // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
+    // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
+    // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected',
+    '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
+    '--p-color-bg-success-strong': '--p-color-bg-fill-success',
     '--p-color-bg-success-strong-hover-experimental':
-      '--p-color-fill-success-hover',
+      '--p-color-bg-fill-success-hover',
     '--p-color-bg-success-strong-active-experimental':
-      '--p-color-fill-success-active',
-    '--p-color-bg-success': '--p-color-fill-success-secondary',
-    '--p-color-bg-success-subdued': '--p-color-surface-success',
-    '--p-color-bg-success-subdued-hover': '--p-color-surface-success-hover',
-    '--p-color-bg-success-subdued-active': '--p-color-surface-success-active',
-    '--p-color-bg-critical-strong': '--p-color-fill-critical',
-    '--p-color-bg-critical-strong-hover': '--p-color-fill-critical-hover',
-    '--p-color-bg-critical-strong-active': '--p-color-fill-critical-active',
-    '--p-color-bg-critical': '--p-color-fill-critical-secondary',
-    '--p-color-bg-critical-subdued': '--p-color-surface-critical',
-    '--p-color-bg-critical-subdued-hover': '--p-color-surface-critical-hover',
-    '--p-color-bg-critical-subdued-active': '--p-color-surface-critical-active',
-    '--p-color-bg-caution-strong': '--p-color-fill-caution',
-    '--p-color-bg-caution': '--p-color-fill-caution-secondary',
-    '--p-color-bg-caution-subdued': '--p-color-surface-caution',
-    '--p-color-bg-caution-subdued-hover': '--p-color-surface-caution-hover',
-    '--p-color-bg-caution-subdued-active': '--p-color-surface-caution-active',
-    '--p-color-bg-info-strong': '--p-color-fill-info',
-    '--p-color-bg-info': '--p-color-fill-info-secondary',
-    '--p-color-bg-info-subdued': '--p-color-surface-info',
-    '--p-color-bg-info-subdued-hover': '--p-color-surface-info-hover',
-    '--p-color-bg-info-subdued-active': '--p-color-surface-info-active',
-    '--p-color-bg-warning-strong-experimental': '--p-color-fill-warning',
-    '--p-color-bg-warning': '--p-color-fill-warning-secondary',
-    '--p-color-bg-warning-subdued-experimental': '--p-color-surface-warning',
-    '--p-color-bg-magic-strong': '--p-color-fill-magic',
-    '--p-color-bg-magic': '--p-color-fill-magic-secondary',
-    '--p-color-bg-magic-hover': '--p-color-fill-magic-secondary-hover',
-    '--p-color-bg-magic-active': '--p-color-fill-magic-secondary-active',
-    // '--p-color-bg-magic-subdued': '--p-color-surface-magic',
-    '--p-color-bg-magic-subdued-hover': '--p-color-surface-magic-hover',
-    '--p-color-bg-inset': '--p-color-fill-secondary',
-    '--p-color-bg-inset-strong': '--p-color-fill-inverse',
-    '--p-color-bg-inverse-hover': '--p-color-fill-inverse-hover',
-    '--p-color-bg-inverse-active': '--p-color-fill-inverse-active',
-    '--p-color-bg-transparent-experimental': '--p-color-surface-transparent',
+      '--p-color-bg-fill-success-active',
+    '--p-color-bg-success': '--p-color-bg-fill-success-secondary',
+    '--p-color-bg-success-subdued': '--p-color-bg-surface-success',
+    '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover',
+    '--p-color-bg-success-subdued-active':
+      '--p-color-bg-surface-success-active',
+    '--p-color-bg-critical-strong': '--p-color-bg-fill-critical',
+    '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover',
+    '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active',
+    '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary',
+    '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical',
+    '--p-color-bg-critical-subdued-hover':
+      '--p-color-bg-surface-critical-hover',
+    '--p-color-bg-critical-subdued-active':
+      '--p-color-bg-surface-critical-active',
+    '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',
+    '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary',
+    '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution',
+    '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover',
+    '--p-color-bg-caution-subdued-active':
+      '--p-color-bg-surface-caution-active',
+    '--p-color-bg-info-strong': '--p-color-bg-fill-info',
+    '--p-color-bg-info': '--p-color-bg-fill-info-secondary',
+    '--p-color-bg-info-subdued': '--p-color-bg-surface-info',
+    '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover',
+    '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active',
+    '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning',
+    '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary',
+    '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning',
+    '--p-color-bg-magic-strong': '--p-color-bg-fill-magic',
+    '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary',
+    '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover',
+    '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',
+    // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic',
+    '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover',
+    '--p-color-bg-inset': '--p-color-bg-fill-secondary',
+    '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse',
+    '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
+    '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active',
+    '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent',
     '--p-color-bg-transparent-hover-experimental':
-      '--p-color-fill-transparent-hover',
+      '--p-color-bg-fill-transparent-hover',
     '--p-color-bg-transparent-active-experimental':
-      '--p-color-fill-transparent-active',
-    '--p-color-bg-transparent-disabled-experimental': '--p-color-fill-disabled',
+      '--p-color-bg-fill-transparent-active',
+    '--p-color-bg-transparent-disabled-experimental':
+      '--p-color-bg-fill-disabled',
     '--p-color-bg-transparent-subdued-experimental':
-      '--p-color-fill-transparent-secondary',
+      '--p-color-bg-fill-transparent-secondary',
     '--p-color-bg-transparent-primary-disabled-experimental':
-      '--p-color-fill-brand-disabled',
+      '--p-color-bg-fill-brand-disabled',
     '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
-    '--p-color-avatar-background-experimental': '--p-color-avatar-fill',
+    '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
     '--p-color-avatar-style-one-background-experimental':
-      '--p-color-avatar-one-fill',
+      '--p-color-avatar-one-bg-fill',
     '--p-color-avatar-style-two-background-experimental':
-      '--p-color-avatar-two-fill',
+      '--p-color-avatar-two-bg-fill',
     '--p-color-avatar-style-three-background-experimental':
-      '--p-color-avatar-three-fill',
+      '--p-color-avatar-three-bg-fill',
     '--p-color-avatar-style-four-background-experimental':
-      '--p-color-avatar-four-fill',
+      '--p-color-avatar-four-bg-fill',
     '--p-color-avatar-style-five-background-experimental':
-      '--p-color-avatar-five-fill',
+      '--p-color-avatar-five-bg-fill',
     '--p-color-text-subdued': '--p-color-text-secondary',
     '--p-color-text-interactive': '--p-color-text-emphasis',
     '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
@@ -98,21 +104,21 @@ const replacementMaps = {
     '--p-color-text-primary': '--p-color-text-brand',
     '--p-color-text-primary-hover': '--p-color-text-brand-hover',
     // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
-    '--p-color-text-info-strong': '--p-color-text-info-on-fill',
+    '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill',
     // '--p-color-text-warning-experimental': '--p-color-text-warning',
     '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
-    // '--p-color-text-interactive-inverse': '--p-color-link-inverse',
-    '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-fill',
+    // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse',
+    '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
     '--p-color-avatar-style-one-color-experimental':
-      '--p-color-avatar-one-text-on-fill',
+      '--p-color-avatar-one-text-on-bg-fill',
     '--p-color-avatar-style-two-color-experimental':
-      '--p-color-avatar-two-text-on-fill',
+      '--p-color-avatar-two-text-on-bg-fill',
     '--p-color-avatar-style-three-color-experimental':
-      '--p-color-avatar-three-text-on-fill',
+      '--p-color-avatar-three-text-on-bg-fill',
     '--p-color-avatar-style-four-color-experimental':
-      '--p-color-avatar-four-text-on-fill',
+      '--p-color-avatar-four-text-on-bg-fill',
     '--p-color-avatar-style-five-color-experimental':
-      '--p-color-avatar-five-text-on-fill',
+      '--p-color-avatar-five-text-on-bg-fill',
     '--p-color-icon-subdued': '--p-color-icon-secondary',
     '--p-color-icon-interactive': '--p-color-icon-emphasis',
     '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',

From 8a03397b7c34c731b3265e0fa19033bd4f3a6027 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Mon, 18 Sep 2023 21:49:19 -0700
Subject: [PATCH 05/15] Update tests

---
 .../tests/v12-styles-replace-custom-property-color.output.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
index eaa3699c218..4c0ba1a627e 100644
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
@@ -1,3 +1,3 @@
 .basic {
-  background: var(--p-color-surface);
+  background: var(--p-color-bg-surface);
 }

From 45a0ffb812eedad246047c86263495cac1dfd2b1 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:40:40 -0700
Subject: [PATCH 06/15] Experimental global replace custom property migration

---
 .../v12-styles-replace-custom-property-color/transform.ts  | 7 ++++++-
 1 file changed, 6 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 39877038f1d..64edc006a30 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
@@ -3,7 +3,12 @@ import type {FileInfo, API} from 'jscodeshift';
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
 
 export default function transformer(fileInfo: FileInfo, _: API) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
+  return Object.entries(replacementMaps['/.+/']).reduce(
+    (fileInfoSource, [fromToken, toToken]) =>
+      fileInfoSource.replace(new RegExp(`${fromToken}(?!-)`, 'g'), toToken),
+    fileInfo.source,
+  );
+  // return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
 }
 
 const replacementMaps = {

From 3b12243424c0568ce066785d5c05699311f4080f Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:49:57 -0700
Subject: [PATCH 07/15] Add comment

---
 .../v12-styles-replace-custom-property-color/transform.ts       | 2 +-
 1 file changed, 1 insertion(+), 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 64edc006a30..8d589849bc8 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
@@ -1,6 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
+// import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return Object.entries(replacementMaps['/.+/']).reduce(

From ea831ef33cd552071fb7383f354378971bac6ee3 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:38:06 -0700
Subject: [PATCH 08/15] Update pattern and simply experimental approach

---
 .../transform.ts                              | 269 +++++++++---------
 1 file changed, 131 insertions(+), 138 deletions(-)

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 8d589849bc8..68b8c953c83 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
@@ -1,147 +1,140 @@
 import type {FileInfo, API} from 'jscodeshift';
 
-// import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-
 export default function transformer(fileInfo: FileInfo, _: API) {
-  return Object.entries(replacementMaps['/.+/']).reduce(
+  return Object.entries(replacementMap).reduce(
     (fileInfoSource, [fromToken, toToken]) =>
-      fileInfoSource.replace(new RegExp(`${fromToken}(?!-)`, 'g'), toToken),
+      fileInfoSource.replace(
+        new RegExp(String.raw`${fromToken}(?![\w-])`, 'g'),
+        toToken,
+      ),
     fileInfo.source,
   );
-  // return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
 }
 
-const replacementMaps = {
-  '/.+/': {
-    '--p-color-bg': '--p-color-bg-surface',
-    // '--p-color-bg-hover': '--p-color-bg-surface-hover',
-    // '--p-color-bg-active': '--p-color-bg-surface-active',
-    // '--p-color-bg-disabled': '--p-color-bg-surface-disabled',
-    '--p-color-bg-subdued': '--p-color-bg-surface-secondary',
-    '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover',
-    '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active',
-    '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary',
-    '--p-color-bg-strong': '--p-color-bg-fill-tertiary',
-    '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover',
-    '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active',
-    '--p-color-bg-input': '--p-color-input-bg-surface',
-    '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover',
-    '--p-color-bg-input-active-experimental':
-      '--p-color-input-bg-surface-active',
-    // '--p-color-bg-primary': '--p-color-bg-fill-brand',
-    // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover',
-    // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active',
-    // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand',
-    // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
-    // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
-    // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected',
-    '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
-    '--p-color-bg-success-strong': '--p-color-bg-fill-success',
-    '--p-color-bg-success-strong-hover-experimental':
-      '--p-color-bg-fill-success-hover',
-    '--p-color-bg-success-strong-active-experimental':
-      '--p-color-bg-fill-success-active',
-    '--p-color-bg-success': '--p-color-bg-fill-success-secondary',
-    '--p-color-bg-success-subdued': '--p-color-bg-surface-success',
-    '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover',
-    '--p-color-bg-success-subdued-active':
-      '--p-color-bg-surface-success-active',
-    '--p-color-bg-critical-strong': '--p-color-bg-fill-critical',
-    '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover',
-    '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active',
-    '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary',
-    '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical',
-    '--p-color-bg-critical-subdued-hover':
-      '--p-color-bg-surface-critical-hover',
-    '--p-color-bg-critical-subdued-active':
-      '--p-color-bg-surface-critical-active',
-    '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',
-    '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary',
-    '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution',
-    '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover',
-    '--p-color-bg-caution-subdued-active':
-      '--p-color-bg-surface-caution-active',
-    '--p-color-bg-info-strong': '--p-color-bg-fill-info',
-    '--p-color-bg-info': '--p-color-bg-fill-info-secondary',
-    '--p-color-bg-info-subdued': '--p-color-bg-surface-info',
-    '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover',
-    '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active',
-    '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning',
-    '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary',
-    '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning',
-    '--p-color-bg-magic-strong': '--p-color-bg-fill-magic',
-    '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary',
-    '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover',
-    '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',
-    // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic',
-    '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover',
-    '--p-color-bg-inset': '--p-color-bg-fill-secondary',
-    '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse',
-    '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
-    '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active',
-    '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent',
-    '--p-color-bg-transparent-hover-experimental':
-      '--p-color-bg-fill-transparent-hover',
-    '--p-color-bg-transparent-active-experimental':
-      '--p-color-bg-fill-transparent-active',
-    '--p-color-bg-transparent-disabled-experimental':
-      '--p-color-bg-fill-disabled',
-    '--p-color-bg-transparent-subdued-experimental':
-      '--p-color-bg-fill-transparent-secondary',
-    '--p-color-bg-transparent-primary-disabled-experimental':
-      '--p-color-bg-fill-brand-disabled',
-    '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
-    '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
-    '--p-color-avatar-style-one-background-experimental':
-      '--p-color-avatar-one-bg-fill',
-    '--p-color-avatar-style-two-background-experimental':
-      '--p-color-avatar-two-bg-fill',
-    '--p-color-avatar-style-three-background-experimental':
-      '--p-color-avatar-three-bg-fill',
-    '--p-color-avatar-style-four-background-experimental':
-      '--p-color-avatar-four-bg-fill',
-    '--p-color-avatar-style-five-background-experimental':
-      '--p-color-avatar-five-bg-fill',
-    '--p-color-text-subdued': '--p-color-text-secondary',
-    '--p-color-text-interactive': '--p-color-text-emphasis',
-    '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
-    '--p-color-text-interactive-active': '--p-color-text-emphasis-active',
-    '--p-color-text-primary': '--p-color-text-brand',
-    '--p-color-text-primary-hover': '--p-color-text-brand-hover',
-    // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
-    '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill',
-    // '--p-color-text-warning-experimental': '--p-color-text-warning',
-    '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
-    // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse',
-    '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
-    '--p-color-avatar-style-one-color-experimental':
-      '--p-color-avatar-one-text-on-bg-fill',
-    '--p-color-avatar-style-two-color-experimental':
-      '--p-color-avatar-two-text-on-bg-fill',
-    '--p-color-avatar-style-three-color-experimental':
-      '--p-color-avatar-three-text-on-bg-fill',
-    '--p-color-avatar-style-four-color-experimental':
-      '--p-color-avatar-four-text-on-bg-fill',
-    '--p-color-avatar-style-five-color-experimental':
-      '--p-color-avatar-five-text-on-bg-fill',
-    '--p-color-icon-subdued': '--p-color-icon-secondary',
-    '--p-color-icon-interactive': '--p-color-icon-emphasis',
-    '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',
-    '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
-    '--p-color-icon-primary': '--p-color-icon-brand',
-    '--p-color-border-subdued': '--p-color-border-secondary',
-    // '--p-color-border-strong': '--p-color-border-tertiary',
-    '--p-color-border-input': '--p-color-input-border',
-    '--p-color-border-input-hover': '--p-color-input-border-hover',
-    '--p-color-border-input-active-experimental':
-      '--p-color-input-border-active',
-    // '--p-color-border-interactive': '--p-color-border-emphasis',
-    '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover',
-    '--p-color-border-interactive-active': '--p-color-border-emphasis-active',
-    '--p-color-border-interactive-focus': '--p-color-border-focus',
-    '--p-color-border-primary': '--p-color-border-brand',
-    '--p-color-border-critical-strong-experimental':
-      '--p-color-border-critical-secondary',
-    '--p-color-border-magic-strong': '--p-color-border-magic-secondary',
-  },
+const replacementMap = {
+  '--p-color-bg': '--p-color-bg-surface',
+  // '--p-color-bg-hover': '--p-color-bg-surface-hover',
+  // '--p-color-bg-active': '--p-color-bg-surface-active',
+  // '--p-color-bg-disabled': '--p-color-bg-surface-disabled',
+  '--p-color-bg-subdued': '--p-color-bg-surface-secondary',
+  '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover',
+  '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active',
+  '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary',
+  '--p-color-bg-strong': '--p-color-bg-fill-tertiary',
+  '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover',
+  '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active',
+  '--p-color-bg-input': '--p-color-input-bg-surface',
+  '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover',
+  '--p-color-bg-input-active-experimental': '--p-color-input-bg-surface-active',
+  // '--p-color-bg-primary': '--p-color-bg-fill-brand',
+  // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover',
+  // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active',
+  // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand',
+  // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
+  // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
+  // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected',
+  '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
+  '--p-color-bg-success-strong': '--p-color-bg-fill-success',
+  '--p-color-bg-success-strong-hover-experimental':
+    '--p-color-bg-fill-success-hover',
+  '--p-color-bg-success-strong-active-experimental':
+    '--p-color-bg-fill-success-active',
+  '--p-color-bg-success': '--p-color-bg-fill-success-secondary',
+  '--p-color-bg-success-subdued': '--p-color-bg-surface-success',
+  '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover',
+  '--p-color-bg-success-subdued-active': '--p-color-bg-surface-success-active',
+  '--p-color-bg-critical-strong': '--p-color-bg-fill-critical',
+  '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover',
+  '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active',
+  '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary',
+  '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical',
+  '--p-color-bg-critical-subdued-hover': '--p-color-bg-surface-critical-hover',
+  '--p-color-bg-critical-subdued-active':
+    '--p-color-bg-surface-critical-active',
+  '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',
+  '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary',
+  '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution',
+  '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover',
+  '--p-color-bg-caution-subdued-active': '--p-color-bg-surface-caution-active',
+  '--p-color-bg-info-strong': '--p-color-bg-fill-info',
+  '--p-color-bg-info': '--p-color-bg-fill-info-secondary',
+  '--p-color-bg-info-subdued': '--p-color-bg-surface-info',
+  '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover',
+  '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active',
+  '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning',
+  '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary',
+  '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning',
+  '--p-color-bg-magic-strong': '--p-color-bg-fill-magic',
+  '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary',
+  '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover',
+  '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',
+  // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic',
+  '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover',
+  '--p-color-bg-inset': '--p-color-bg-fill-secondary',
+  '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse',
+  '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
+  '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active',
+  '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent',
+  '--p-color-bg-transparent-hover-experimental':
+    '--p-color-bg-fill-transparent-hover',
+  '--p-color-bg-transparent-active-experimental':
+    '--p-color-bg-fill-transparent-active',
+  '--p-color-bg-transparent-disabled-experimental':
+    '--p-color-bg-fill-disabled',
+  '--p-color-bg-transparent-subdued-experimental':
+    '--p-color-bg-fill-transparent-secondary',
+  '--p-color-bg-transparent-primary-disabled-experimental':
+    '--p-color-bg-fill-brand-disabled',
+  '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
+  '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
+  '--p-color-avatar-style-one-background-experimental':
+    '--p-color-avatar-one-bg-fill',
+  '--p-color-avatar-style-two-background-experimental':
+    '--p-color-avatar-two-bg-fill',
+  '--p-color-avatar-style-three-background-experimental':
+    '--p-color-avatar-three-bg-fill',
+  '--p-color-avatar-style-four-background-experimental':
+    '--p-color-avatar-four-bg-fill',
+  '--p-color-avatar-style-five-background-experimental':
+    '--p-color-avatar-five-bg-fill',
+  '--p-color-text-subdued': '--p-color-text-secondary',
+  '--p-color-text-interactive': '--p-color-text-emphasis',
+  '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
+  '--p-color-text-interactive-active': '--p-color-text-emphasis-active',
+  '--p-color-text-primary': '--p-color-text-brand',
+  '--p-color-text-primary-hover': '--p-color-text-brand-hover',
+  // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
+  '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill',
+  // '--p-color-text-warning-experimental': '--p-color-text-warning',
+  '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
+  // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse',
+  '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
+  '--p-color-avatar-style-one-color-experimental':
+    '--p-color-avatar-one-text-on-bg-fill',
+  '--p-color-avatar-style-two-color-experimental':
+    '--p-color-avatar-two-text-on-bg-fill',
+  '--p-color-avatar-style-three-color-experimental':
+    '--p-color-avatar-three-text-on-bg-fill',
+  '--p-color-avatar-style-four-color-experimental':
+    '--p-color-avatar-four-text-on-bg-fill',
+  '--p-color-avatar-style-five-color-experimental':
+    '--p-color-avatar-five-text-on-bg-fill',
+  '--p-color-icon-subdued': '--p-color-icon-secondary',
+  '--p-color-icon-interactive': '--p-color-icon-emphasis',
+  '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',
+  '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
+  '--p-color-icon-primary': '--p-color-icon-brand',
+  '--p-color-border-subdued': '--p-color-border-secondary',
+  // '--p-color-border-strong': '--p-color-border-tertiary',
+  '--p-color-border-input': '--p-color-input-border',
+  '--p-color-border-input-hover': '--p-color-input-border-hover',
+  '--p-color-border-input-active-experimental': '--p-color-input-border-active',
+  // '--p-color-border-interactive': '--p-color-border-emphasis',
+  '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover',
+  '--p-color-border-interactive-active': '--p-color-border-emphasis-active',
+  '--p-color-border-interactive-focus': '--p-color-border-focus',
+  '--p-color-border-primary': '--p-color-border-brand',
+  '--p-color-border-critical-strong-experimental':
+    '--p-color-border-critical-secondary',
+  '--p-color-border-magic-strong': '--p-color-border-magic-secondary',
 };

From 80ebd794f5794142ad7a0edfc9cc1abf7c6061c7 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Thu, 28 Sep 2023 15:14:11 -0700
Subject: [PATCH 09/15] Update
 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

---
 .../v12-styles-replace-custom-property-color/transform.ts        | 1 +
 1 file changed, 1 insertion(+)

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 68b8c953c83..9cd26e5a827 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
@@ -33,6 +33,7 @@ const replacementMap = {
   // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
   // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
   // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected',
+  '--p-color-bg-app-active': '--p-color-bg-surface-active',
   '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
   '--p-color-bg-success-strong': '--p-color-bg-fill-success',
   '--p-color-bg-success-strong-hover-experimental':

From 23f1ada8546001059b3fb2b2913f8bd21378a839 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Thu, 28 Sep 2023 18:36:23 -0700
Subject: [PATCH 10/15] Update migration with breaking changes

---
 .../tests/step1.input.scss                    |   7 +
 .../tests/step1.output.scss                   |   7 +
 .../tests/step2.input.scss                    |   7 +
 .../tests/step2.output.scss                   |   7 +
 .../tests/transform.test.ts                   |  18 +-
 ...s-replace-custom-property-color.input.scss |   3 -
 ...-replace-custom-property-color.output.scss |   3 -
 .../transform.ts                              | 286 ++++++++++--------
 8 files changed, 212 insertions(+), 126 deletions(-)
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.input.scss
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.output.scss
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.input.scss
 create mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.output.scss
 delete mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
 delete mode 100644 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss

diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.input.scss
new file mode 100644
index 00000000000..24998ca4172
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.input.scss
@@ -0,0 +1,7 @@
+.bg {
+  background: var(--p-color-bg);
+}
+
+.bg-app {
+  background: var(--p-color-bg-app);
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.output.scss
new file mode 100644
index 00000000000..c15359fd457
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step1.output.scss
@@ -0,0 +1,7 @@
+.bg {
+  background: var(--p-color-bg-surface);
+}
+
+.bg-app {
+  background: var(--p-color-bg-app);
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.input.scss
new file mode 100644
index 00000000000..c15359fd457
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.input.scss
@@ -0,0 +1,7 @@
+.bg {
+  background: var(--p-color-bg-surface);
+}
+
+.bg-app {
+  background: var(--p-color-bg-app);
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.output.scss
new file mode 100644
index 00000000000..7c6b7965e56
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/step2.output.scss
@@ -0,0 +1,7 @@
+.bg {
+  background: var(--p-color-bg-surface);
+}
+
+.bg-app {
+  background: var(--p-color-bg);
+}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
index d869f53384e..56cfac6fba5 100644
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/transform.test.ts
@@ -1,12 +1,26 @@
 import {check} from '../../../utilities/check';
 
 const transform = 'v12-styles-replace-custom-property-color';
-const fixtures = ['v12-styles-replace-custom-property-color'];
+const fixtures = [
+  {
+    name: 'step1',
+    options: {
+      step: 1,
+    },
+  },
+  {
+    name: 'step2',
+    options: {
+      step: 2,
+    },
+  },
+];
 
 for (const fixture of fixtures) {
   check(__dirname, {
-    fixture,
+    fixture: fixture.name,
     transform,
+    options: fixture.options,
     extension: 'scss',
   });
 }
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
deleted file mode 100644
index ca49c86d72a..00000000000
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.input.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.basic {
-  background: var(--p-color-bg);
-}
diff --git a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss b/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
deleted file mode 100644
index 4c0ba1a627e..00000000000
--- a/polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/tests/v12-styles-replace-custom-property-color.output.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.basic {
-  background: var(--p-color-bg-surface);
-}
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 9cd26e5a827..7fa580f7809 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
@@ -1,141 +1,191 @@
-import type {FileInfo, API} from 'jscodeshift';
+import type {FileInfo, API, Options} from 'jscodeshift';
 
-export default function transformer(fileInfo: FileInfo, _: API) {
-  return Object.entries(replacementMap).reduce(
-    (fileInfoSource, [fromToken, toToken]) =>
-      fileInfoSource.replace(
-        new RegExp(String.raw`${fromToken}(?![\w-])`, 'g'),
-        toToken,
-      ),
-    fileInfo.source,
-  );
+export interface MigrationOptions extends Options {
+  step: number;
 }
 
-const replacementMap = {
-  '--p-color-bg': '--p-color-bg-surface',
-  // '--p-color-bg-hover': '--p-color-bg-surface-hover',
-  // '--p-color-bg-active': '--p-color-bg-surface-active',
-  // '--p-color-bg-disabled': '--p-color-bg-surface-disabled',
-  '--p-color-bg-subdued': '--p-color-bg-surface-secondary',
-  '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover',
-  '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active',
-  '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary',
-  '--p-color-bg-strong': '--p-color-bg-fill-tertiary',
-  '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover',
-  '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active',
-  '--p-color-bg-input': '--p-color-input-bg-surface',
-  '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover',
-  '--p-color-bg-input-active-experimental': '--p-color-input-bg-surface-active',
-  // '--p-color-bg-primary': '--p-color-bg-fill-brand',
-  // '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover',
-  // '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active',
-  // '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand',
-  // '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
-  // '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
-  // '--p-color-bg-primary-subdued-selected': '--p-color-bg-surface-brand-selected',
+export default function transformer(
+  fileInfo: FileInfo,
+  _: API,
+  options: MigrationOptions,
+) {
+  if (options.step === 1) {
+    return stylesReplaceCustomPropertyRegExp(fileInfo, _, {
+      replacementMap: replacementMap1,
+    });
+  } else if (options.step === 2) {
+    return stylesReplaceCustomPropertyRegExp(fileInfo, _, {
+      replacementMap: replacementMap2,
+    });
+  }
+  throw new Error('Invalid step');
+}
+
+const replacementMap1 = {
+  '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
+  '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
+  '--p-color-avatar-style-five-background-experimental':
+    '--p-color-avatar-five-bg-fill',
+  '--p-color-avatar-style-five-color-experimental':
+    '--p-color-avatar-five-text-on-bg-fill',
+  '--p-color-avatar-style-four-background-experimental':
+    '--p-color-avatar-four-bg-fill',
+  '--p-color-avatar-style-four-color-experimental':
+    '--p-color-avatar-four-text-on-bg-fill',
+  '--p-color-avatar-style-one-background-experimental':
+    '--p-color-avatar-one-bg-fill',
+  '--p-color-avatar-style-one-color-experimental':
+    '--p-color-avatar-one-text-on-bg-fill',
+  '--p-color-avatar-style-three-background-experimental':
+    '--p-color-avatar-three-bg-fill',
+  '--p-color-avatar-style-three-color-experimental':
+    '--p-color-avatar-three-text-on-bg-fill',
+  '--p-color-avatar-style-two-background-experimental':
+    '--p-color-avatar-two-bg-fill',
+  '--p-color-avatar-style-two-color-experimental':
+    '--p-color-avatar-two-text-on-bg-fill',
+  '--p-color-bg-active': '--p-color-bg-surface-active',
   '--p-color-bg-app-active': '--p-color-bg-surface-active',
   '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
-  '--p-color-bg-success-strong': '--p-color-bg-fill-success',
-  '--p-color-bg-success-strong-hover-experimental':
-    '--p-color-bg-fill-success-hover',
-  '--p-color-bg-success-strong-active-experimental':
-    '--p-color-bg-fill-success-active',
-  '--p-color-bg-success': '--p-color-bg-fill-success-secondary',
-  '--p-color-bg-success-subdued': '--p-color-bg-surface-success',
-  '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover',
-  '--p-color-bg-success-subdued-active': '--p-color-bg-surface-success-active',
-  '--p-color-bg-critical-strong': '--p-color-bg-fill-critical',
-  '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover',
+  '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
+  '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',
+  '--p-color-bg-caution-subdued-active': '--p-color-bg-surface-caution-active',
+  '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover',
+  '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution',
+  '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary',
   '--p-color-bg-critical-strong-active': '--p-color-bg-fill-critical-active',
-  '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary',
-  '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical',
-  '--p-color-bg-critical-subdued-hover': '--p-color-bg-surface-critical-hover',
+  '--p-color-bg-critical-strong-hover': '--p-color-bg-fill-critical-hover',
+  '--p-color-bg-critical-strong': '--p-color-bg-fill-critical',
   '--p-color-bg-critical-subdued-active':
     '--p-color-bg-surface-critical-active',
-  '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',
-  '--p-color-bg-caution': '--p-color-bg-fill-caution-secondary',
-  '--p-color-bg-caution-subdued': '--p-color-bg-surface-caution',
-  '--p-color-bg-caution-subdued-hover': '--p-color-bg-surface-caution-hover',
-  '--p-color-bg-caution-subdued-active': '--p-color-bg-surface-caution-active',
+  '--p-color-bg-critical-subdued-hover': '--p-color-bg-surface-critical-hover',
+  '--p-color-bg-critical-subdued': '--p-color-bg-surface-critical',
+  '--p-color-bg-critical': '--p-color-bg-fill-critical-secondary',
+  '--p-color-bg-disabled': '--p-color-bg-surface-disabled',
+  '--p-color-bg-hover': '--p-color-bg-surface-hover',
   '--p-color-bg-info-strong': '--p-color-bg-fill-info',
-  '--p-color-bg-info': '--p-color-bg-fill-info-secondary',
-  '--p-color-bg-info-subdued': '--p-color-bg-surface-info',
-  '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover',
   '--p-color-bg-info-subdued-active': '--p-color-bg-surface-info-active',
-  '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning',
-  '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary',
-  '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning',
-  '--p-color-bg-magic-strong': '--p-color-bg-fill-magic',
-  '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary',
-  '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover',
-  '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',
-  // '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic',
-  '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover',
-  '--p-color-bg-inset': '--p-color-bg-fill-secondary',
+  '--p-color-bg-info-subdued-hover': '--p-color-bg-surface-info-hover',
+  '--p-color-bg-info-subdued': '--p-color-bg-surface-info',
+  '--p-color-bg-info': '--p-color-bg-fill-info-secondary',
+  '--p-color-bg-input-active-experimental': '--p-color-input-bg-surface-active',
+  '--p-color-bg-input-hover-experimental': '--p-color-input-bg-surface-hover',
+  '--p-color-bg-input': '--p-color-input-bg-surface',
   '--p-color-bg-inset-strong': '--p-color-bg-fill-inverse',
-  '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
+  '--p-color-bg-inset': '--p-color-bg-fill-secondary',
   '--p-color-bg-inverse-active': '--p-color-bg-fill-inverse-active',
-  '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent',
-  '--p-color-bg-transparent-hover-experimental':
-    '--p-color-bg-fill-transparent-hover',
+  '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
+  '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',
+  '--p-color-bg-magic-hover': '--p-color-bg-fill-magic-secondary-hover',
+  '--p-color-bg-magic-strong': '--p-color-bg-fill-magic',
+  '--p-color-bg-magic-subdued-hover': '--p-color-bg-surface-magic-hover',
+  '--p-color-bg-magic-subdued': '--p-color-bg-surface-magic',
+  '--p-color-bg-magic': '--p-color-bg-fill-magic-secondary',
+  '--p-color-bg-primary-active': '--p-color-bg-fill-brand-active',
+  '--p-color-bg-primary-disabled-experimental':
+    '--p-color-bg-fill-brand-disabled',
+  '--p-color-bg-primary-hover': '--p-color-bg-fill-brand-hover',
+  '--p-color-bg-primary-subdued-active': '--p-color-bg-surface-brand-active',
+  '--p-color-bg-primary-subdued-hover': '--p-color-bg-surface-brand-hover',
+  '--p-color-bg-primary-subdued-selected':
+    '--p-color-bg-surface-brand-selected',
+  '--p-color-bg-primary-subdued': '--p-color-bg-surface-brand',
+  '--p-color-bg-primary': '--p-color-bg-fill-brand',
+  '--p-color-bg-secondary-experimental': '--p-color-bg-surface-tertiary',
+  '--p-color-bg-strong-active': '--p-color-bg-fill-tertiary-active',
+  '--p-color-bg-strong-hover': '--p-color-bg-fill-tertiary-hover',
+  '--p-color-bg-strong': '--p-color-bg-fill-tertiary',
+  '--p-color-bg-subdued-active': '--p-color-bg-surface-secondary-active',
+  '--p-color-bg-subdued-hover': '--p-color-bg-surface-secondary-hover',
+  '--p-color-bg-subdued': '--p-color-bg-surface-secondary',
+  '--p-color-bg-success-strong-active-experimental':
+    '--p-color-bg-fill-success-active',
+  '--p-color-bg-success-strong-hover-experimental':
+    '--p-color-bg-fill-success-hover',
+  '--p-color-bg-success-strong': '--p-color-bg-fill-success',
+  '--p-color-bg-success-subdued-active': '--p-color-bg-surface-success-active',
+  '--p-color-bg-success-subdued-hover': '--p-color-bg-surface-success-hover',
+  '--p-color-bg-success-subdued': '--p-color-bg-surface-success',
+  '--p-color-bg-success': '--p-color-bg-fill-success-secondary',
   '--p-color-bg-transparent-active-experimental':
     '--p-color-bg-fill-transparent-active',
   '--p-color-bg-transparent-disabled-experimental':
     '--p-color-bg-fill-disabled',
-  '--p-color-bg-transparent-subdued-experimental':
-    '--p-color-bg-fill-transparent-secondary',
+  '--p-color-bg-transparent-experimental': '--p-color-bg-surface-transparent',
+  '--p-color-bg-transparent-hover-experimental':
+    '--p-color-bg-fill-transparent-hover',
   '--p-color-bg-transparent-primary-disabled-experimental':
     '--p-color-bg-fill-brand-disabled',
-  '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
-  '--p-color-avatar-background-experimental': '--p-color-avatar-bg-fill',
-  '--p-color-avatar-style-one-background-experimental':
-    '--p-color-avatar-one-bg-fill',
-  '--p-color-avatar-style-two-background-experimental':
-    '--p-color-avatar-two-bg-fill',
-  '--p-color-avatar-style-three-background-experimental':
-    '--p-color-avatar-three-bg-fill',
-  '--p-color-avatar-style-four-background-experimental':
-    '--p-color-avatar-four-bg-fill',
-  '--p-color-avatar-style-five-background-experimental':
-    '--p-color-avatar-five-bg-fill',
-  '--p-color-text-subdued': '--p-color-text-secondary',
-  '--p-color-text-interactive': '--p-color-text-emphasis',
-  '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
-  '--p-color-text-interactive-active': '--p-color-text-emphasis-active',
-  '--p-color-text-primary': '--p-color-text-brand',
-  '--p-color-text-primary-hover': '--p-color-text-brand-hover',
-  // '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
-  '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill',
-  // '--p-color-text-warning-experimental': '--p-color-text-warning',
-  '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
-  // '--p-color-text-interactive-inverse': '--p-color-text-link-inverse',
-  '--p-color-avatar-color-experimental': '--p-color-avatar-text-on-bg-fill',
-  '--p-color-avatar-style-one-color-experimental':
-    '--p-color-avatar-one-text-on-bg-fill',
-  '--p-color-avatar-style-two-color-experimental':
-    '--p-color-avatar-two-text-on-bg-fill',
-  '--p-color-avatar-style-three-color-experimental':
-    '--p-color-avatar-three-text-on-bg-fill',
-  '--p-color-avatar-style-four-color-experimental':
-    '--p-color-avatar-four-text-on-bg-fill',
-  '--p-color-avatar-style-five-color-experimental':
-    '--p-color-avatar-five-text-on-bg-fill',
-  '--p-color-icon-subdued': '--p-color-icon-secondary',
-  '--p-color-icon-interactive': '--p-color-icon-emphasis',
-  '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',
-  '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
-  '--p-color-icon-primary': '--p-color-icon-brand',
-  '--p-color-border-subdued': '--p-color-border-secondary',
-  // '--p-color-border-strong': '--p-color-border-tertiary',
-  '--p-color-border-input': '--p-color-input-border',
-  '--p-color-border-input-hover': '--p-color-input-border-hover',
+  '--p-color-bg-transparent-subdued-experimental':
+    '--p-color-bg-fill-transparent-secondary',
+  '--p-color-bg-warning-strong-experimental': '--p-color-bg-fill-warning',
+  '--p-color-bg-warning-subdued-experimental': '--p-color-bg-surface-warning',
+  '--p-color-bg-warning': '--p-color-bg-fill-warning-secondary',
+  '--p-color-bg': '--p-color-bg-surface',
+  '--p-color-border-caution-subdued': '--p-color-border-caution',
+  '--p-color-border-critical-active': '--p-color-border-critical',
+  '--p-color-border-critical-hover': '--p-color-border-critical',
+  '--p-color-border-critical-strong-experimental':
+    '--p-color-border-critical-secondary',
+  '--p-color-border-critical-subdued': '--p-color-border-critical',
+  '--p-color-border-info-subdued': '--p-color-border-info',
   '--p-color-border-input-active-experimental': '--p-color-input-border-active',
-  // '--p-color-border-interactive': '--p-color-border-emphasis',
-  '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover',
+  '--p-color-border-input-hover': '--p-color-input-border-hover',
+  '--p-color-border-input': '--p-color-input-border',
   '--p-color-border-interactive-active': '--p-color-border-emphasis-active',
+  '--p-color-border-interactive-disabled': '--p-color-border-disabled',
   '--p-color-border-interactive-focus': '--p-color-border-focus',
-  '--p-color-border-primary': '--p-color-border-brand',
-  '--p-color-border-critical-strong-experimental':
-    '--p-color-border-critical-secondary',
+  '--p-color-border-interactive-hover': '--p-color-border-emphasis-hover',
+  '--p-color-border-interactive': '--p-color-border-emphasis',
   '--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-subdued': '--p-color-border-secondary',
+  '--p-color-border-success-subdued': '--p-color-border-success',
+  '--p-color-icon-critical-strong-active-experimental':
+    '--p-color-text-critical-active',
+  '--p-color-icon-critical-strong-experimental': '--p-color-text-critical',
+  '--p-color-icon-info-strong-experimental': '--p-color-text-info',
+  '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
+  '--p-color-icon-interactive-disabled': '--p-color-icon-disabled',
+  '--p-color-icon-interactive-hover': '--p-color-icon-emphasis-hover',
+  '--p-color-icon-interactive': '--p-color-icon-emphasis',
+  '--p-color-icon-primary': '--p-color-icon-brand',
+  '--p-color-icon-subdued': '--p-color-icon-secondary',
+  '--p-color-icon-success-strong-experimental': '--p-color-text-success',
+  '--p-color-text-caution-strong': '--p-color-text-caution',
+  '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
+  '--p-color-text-critical-strong': '--p-color-text-critical',
+  '--p-color-text-info-strong': '--p-color-text-info-on-bg-fill',
+  '--p-color-text-interactive-active': '--p-color-text-emphasis-active',
+  '--p-color-text-interactive-disabled': '--p-color-text-disabled',
+  '--p-color-text-interactive-hover': '--p-color-text-emphasis-hover',
+  '--p-color-text-interactive-inverse': '--p-color-text-link-inverse',
+  '--p-color-text-interactive': '--p-color-text-emphasis',
+  '--p-color-text-inverse-subdued': '--p-color-text-inverse-secondary',
+  '--p-color-text-magic-strong': '--p-color-text-magic',
+  '--p-color-text-primary-hover': '--p-color-text-brand-hover',
+  '--p-color-text-primary': '--p-color-text-brand',
+  '--p-color-text-subdued': '--p-color-text-secondary',
+  '--p-color-text-success-strong': '--p-color-text-success',
+  '--p-color-text-warning-experimental': '--p-color-text-warning',
+};
+
+const replacementMap2 = {
+  '--p-color-bg-app': '--p-color-bg',
 };
+
+function stylesReplaceCustomPropertyRegExp(
+  fileInfo: FileInfo,
+  _: API,
+  options: {replacementMap: {[varName: string]: string}},
+) {
+  return Object.entries(options.replacementMap).reduce(
+    (fileInfoSource, [fromToken, toToken]) =>
+      fileInfoSource.replace(
+        new RegExp(String.raw`${fromToken}(?![\w-])`, 'g'),
+        toToken,
+      ),
+    fileInfo.source,
+  );
+}

From 914d43dadb4965e46a798fa805d8b6fe46dfd85a Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:14:28 -0700
Subject: [PATCH 11/15] Update
 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

---
 .../v12-styles-replace-custom-property-color/transform.ts        | 1 +
 1 file changed, 1 insertion(+)

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 7fa580f7809..48aa154b1e3 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
@@ -153,6 +153,7 @@ const replacementMap1 = {
   '--p-color-icon-primary': '--p-color-icon-brand',
   '--p-color-icon-subdued': '--p-color-icon-secondary',
   '--p-color-icon-success-strong-experimental': '--p-color-text-success',
+  '--p-color-icon-warning-strong-experimental': '--p-color-text-warning',
   '--p-color-text-caution-strong': '--p-color-text-caution',
   '--p-color-text-critical-hover-experimental': '--p-color-text-critical-hover',
   '--p-color-text-critical-strong': '--p-color-text-critical',

From 0dd34a39c44c77d444e65c1771128e207d758881 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:03:07 -0700
Subject: [PATCH 12/15] Update
 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../v12-styles-replace-custom-property-color/transform.ts     | 4 ++++
 1 file changed, 4 insertions(+)

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 48aa154b1e3..241d14826af 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
@@ -73,6 +73,10 @@ const replacementMap1 = {
   '--p-color-bg-input': '--p-color-input-bg-surface',
   '--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-selected': '--p-color-bg-surface-brand-selected',
+  '--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-active': '--p-color-bg-fill-inverse-active',
   '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
   '--p-color-bg-magic-active': '--p-color-bg-fill-magic-secondary-active',

From 183ab146a2f29f206768a51d995ffcdbe47b7a1d Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:04:11 -0700
Subject: [PATCH 13/15] Update
 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../v12-styles-replace-custom-property-color/transform.ts        | 1 +
 1 file changed, 1 insertion(+)

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 241d14826af..62efac9102e 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
@@ -149,6 +149,7 @@ const replacementMap1 = {
   '--p-color-icon-critical-strong-active-experimental':
     '--p-color-text-critical-active',
   '--p-color-icon-critical-strong-experimental': '--p-color-text-critical',
+  '--p-color-icon-critical-strong-hover-experimental': '--p-color-text-critical-hover',
   '--p-color-icon-info-strong-experimental': '--p-color-text-info',
   '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
   '--p-color-icon-interactive-disabled': '--p-color-icon-disabled',

From 17ad4adad857fbace2fecc6fab0456665194cd27 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:04:52 -0700
Subject: [PATCH 14/15] Update
 polaris-migrator/src/migrations/v12-styles-replace-custom-property-color/transform.ts

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .../v12-styles-replace-custom-property-color/transform.ts        | 1 +
 1 file changed, 1 insertion(+)

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 62efac9102e..14a5da02cc6 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
@@ -46,6 +46,7 @@ const replacementMap1 = {
     '--p-color-avatar-two-text-on-bg-fill',
   '--p-color-bg-active': '--p-color-bg-surface-active',
   '--p-color-bg-app-active': '--p-color-bg-surface-active',
+  '--p-color-bg-app-hover': '--p-color-bg-surface-hover',
   '--p-color-bg-app-selected': '--p-color-bg-surface-selected',
   '--p-color-bg-backdrop-experimental': '--p-color-backdrop-bg',
   '--p-color-bg-caution-strong': '--p-color-bg-fill-caution',

From a41f6c3dc74e83d94f565a7721113eb2dd614b43 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 3 Oct 2023 14:33:05 -0700
Subject: [PATCH 15/15] Fix formatting

---
 .../v12-styles-replace-custom-property-color/transform.ts   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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 14a5da02cc6..91de77f0802 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
@@ -76,7 +76,8 @@ const replacementMap1 = {
   '--p-color-bg-inset': '--p-color-bg-fill-secondary',
   '--p-color-bg-interactive': '--p-color-bg-fill-brand',
   '--p-color-bg-interactive-selected': '--p-color-bg-surface-brand-selected',
-  '--p-color-bg-interactive-subdued-active': '--p-color-bg-surface-brand-active',
+  '--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-active': '--p-color-bg-fill-inverse-active',
   '--p-color-bg-inverse-hover': '--p-color-bg-fill-inverse-hover',
@@ -150,7 +151,8 @@ const replacementMap1 = {
   '--p-color-icon-critical-strong-active-experimental':
     '--p-color-text-critical-active',
   '--p-color-icon-critical-strong-experimental': '--p-color-text-critical',
-  '--p-color-icon-critical-strong-hover-experimental': '--p-color-text-critical-hover',
+  '--p-color-icon-critical-strong-hover-experimental':
+    '--p-color-text-critical-hover',
   '--p-color-icon-info-strong-experimental': '--p-color-text-info',
   '--p-color-icon-interactive-active': '--p-color-icon-emphasis-active',
   '--p-color-icon-interactive-disabled': '--p-color-icon-disabled',