From 5ecaafc2bf21d922b0b86dacb71cc5db9d4fe66c Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 15 Aug 2023 17:02:11 +1000
Subject: [PATCH 001/102] [ResourceList] Remove layout jank when bulk actions
 enabled and item selected

---
 .changeset/hip-cameras-greet.md                            | 5 +++++
 .../src/components/ResourceList/ResourceList.scss          | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/hip-cameras-greet.md

diff --git a/.changeset/hip-cameras-greet.md b/.changeset/hip-cameras-greet.md
new file mode 100644
index 00000000000..c5f4f0f595c
--- /dev/null
+++ b/.changeset/hip-cameras-greet.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[ResourceList] Remove layout jank when bulk actions enabled and item selected
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 8dbc7155047..e1279697129 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -48,7 +48,12 @@ $item-wrapper-loading-height: 64px;
   border-top-left-radius: var(--p-border-radius-2);
   border-top-right-radius: var(--p-border-radius-2);
 
-  + .ResourceList {
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators -- Ssshhhhh
+  + .ResourceList,
+  // Bulk actions get injected into the DOM between the wrapper and resource
+  // list dynamically when an item is checked, so we have to handle that case
+  // here.
+  + .BulkActionsWrapper + .ResourceList {
     border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {

From 49f1257709085559e43ecb81c92a56dfff21cfe0 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 16 Aug 2023 12:13:22 -0400
Subject: [PATCH 002/102] Fix icon optimize config (#10087)

This was causing quite a bit of output in build scripts. Adding a width
and height to an icon then running yarn optimize confirms that this
still works
---
 polaris-icons/svgo.config.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/polaris-icons/svgo.config.js b/polaris-icons/svgo.config.js
index c61f1cb615f..4732a584467 100644
--- a/polaris-icons/svgo.config.js
+++ b/polaris-icons/svgo.config.js
@@ -1,6 +1,13 @@
 module.exports = {
   plugins: [
-    'removeDimensions',
+    {
+      /**
+       * removeDimensions is set to true to remove width and height attributes from SVGs.
+       * This allows the SVG to scale to the size of its container, making it more responsive.
+       */
+      name: 'removeDimensions',
+      active: true,
+    },
     {
       name: 'preset-default',
       params: {
@@ -11,12 +18,6 @@ module.exports = {
            */
           removeViewBox: false,
 
-          /**
-           * removeDimensions is set to true to remove width and height attributes from SVGs.
-           * This allows the SVG to scale to the size of its container, making it more responsive.
-           */
-          removeDimensions: true,
-
           /**
            * The following 2 settings are disabled to reduce rendering inconsistency
            * on Android. Android uses a subset of the SVG spec called SVG Tiny:

From 5a5b3795afa484db637fd5e151866149fd932b42 Mon Sep 17 00:00:00 2001
From: Joel Warrington <joel.warrington@shopify.com>
Date: Wed, 16 Aug 2023 10:24:10 -0600
Subject: [PATCH 003/102] [Modal] Activator no longer wrapped in Box (#10086)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris-internal/issues/1049

Because `<Modal />` wraps the `activator` in a `<Box />`, it is not
possible to style elements inline. The `<Box />` can be removed as it is
only used for passing the ref along, which we can pass to the activator
instead with `React.cloneElement`.

### WHAT is this pull request doing?

<details>
<summary>1. Modal activator is no longer wrapped in a Box</summary>

BEFORE:
```jsx
<div class="Polaris-Box">
  <button class="Polaris-Button" type="button">
    <span class="Polaris-Button__Content">
      <span class="Polaris-Button__Text">Click Me</span>
    </span>
  </button>
</div>
```

AFTER:
```jsx
<button class="Polaris-Button" type="button">
  <span class="Polaris-Button__Content">
    <span class="Polaris-Button__Text">Click Me</span>
  </span>
</button>
```
</details>
2. The `ref` is attached to the `activator` instead of the box which
used to wrap the `activator`.

### 🎩 checklist

- [X] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [X] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [X] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [X] Updated the component's `README.md` with documentation changes
- [X] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/fair-olives-chew.md               |  5 +++++
 polaris-react/src/components/Modal/Modal.tsx | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fair-olives-chew.md

diff --git a/.changeset/fair-olives-chew.md b/.changeset/fair-olives-chew.md
new file mode 100644
index 00000000000..b0a3cc88bb8
--- /dev/null
+++ b/.changeset/fair-olives-chew.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[Modal] Activator no longer wrapped in Box
diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx
index 890915adb35..a9003656753 100644
--- a/polaris-react/src/components/Modal/Modal.tsx
+++ b/polaris-react/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useCallback, useRef, useId} from 'react';
+import React, {useState, useCallback, useRef, useId, cloneElement} from 'react';
 import {TransitionGroup} from 'react-transition-group';
 
 import {focusFirstFocusableNode} from '../../utilities/focus';
@@ -95,7 +95,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   const [closing, setClosing] = useState(false);
 
   const headerId = useId();
-  const activatorRef = useRef<HTMLDivElement>(null);
+  const activatorRef = useRef<HTMLElement>(null);
 
   const i18n = useI18n();
   const iframeTitle = i18n.translate('Polaris.Modal.iFrameTitle');
@@ -223,9 +223,9 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   const animated = !instant;
 
   const activatorMarkup =
-    activator && !isRef(activator) ? (
-      <Box ref={activatorRef}>{activator}</Box>
-    ) : null;
+    activator && !isRef(activator)
+      ? cloneElement(activator, {ref: activatorRef})
+      : null;
 
   return (
     <WithinContentContext.Provider value>

From 882f58a4c349a9d67f8c811e7ab7000e35ae8a21 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:10:35 -0400
Subject: [PATCH 004/102] Bump fastify from 4.5.3 to 4.15.0 (#8750)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [fastify](https://github.com/fastify/fastify) from 4.5.3 to
4.15.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/fastify/fastify/releases">fastify's
releases</a>.</em></p>
<blockquote>
<h2>v4.15.0</h2>
<h2>What's Changed</h2>
<ul>
<li>build(deps-dev): bump tsd from 0.25.0 to 0.26.0 by <a
href="https://github.com/dependabot"><code>@​dependabot</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4614">fastify/fastify#4614</a></li>
<li>feat: use internal trees for prettyPrint by <a
href="https://github.com/ivan-tymoshenko"><code>@​ivan-tymoshenko</code></a>
in <a
href="https://redirect.github.com/fastify/fastify/pull/4618">fastify/fastify#4618</a></li>
<li>docs: add metcoder95 as collaborator by <a
href="https://github.com/metcoder95"><code>@​metcoder95</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4622">fastify/fastify#4622</a></li>
<li>build(deps): bump lycheeverse/lychee-action from 1.5.4 to 1.6.1 by
<a href="https://github.com/dependabot"><code>@​dependabot</code></a> in
<a
href="https://redirect.github.com/fastify/fastify/pull/4603">fastify/fastify#4603</a></li>
<li>Logger validator throws by <a
href="https://github.com/victortosts"><code>@​victortosts</code></a> in
<a
href="https://redirect.github.com/fastify/fastify/pull/4520">fastify/fastify#4520</a></li>
<li>feat: expose prettyPrint method param by <a
href="https://github.com/ivan-tymoshenko"><code>@​ivan-tymoshenko</code></a>
in <a
href="https://redirect.github.com/fastify/fastify/pull/4623">fastify/fastify#4623</a></li>
<li>ensure that generated validators are up to date by <a
href="https://github.com/Uzlopak"><code>@​Uzlopak</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4508">fastify/fastify#4508</a></li>
<li>fix: check if validation schema is undefined by <a
href="https://github.com/Eomm"><code>@​Eomm</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4620">fastify/fastify#4620</a></li>
<li>fix: content-type mis-handling for invalid non-essence content-type
by <a
href="https://github.com/climba03003"><code>@​climba03003</code></a> in
<a
href="https://redirect.github.com/fastify/fastify/pull/4509">fastify/fastify#4509</a></li>
<li>Bump version of fast-json-stringify-compiler by <a
href="https://github.com/Uzlopak"><code>@​Uzlopak</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4630">fastify/fastify#4630</a></li>
<li>fix: avoid invoking onError hook when aborted handler resolves by <a
href="https://github.com/meyfa"><code>@​meyfa</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4631">fastify/fastify#4631</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a
href="https://github.com/victortosts"><code>@​victortosts</code></a>
made their first contribution in <a
href="https://redirect.github.com/fastify/fastify/pull/4520">fastify/fastify#4520</a></li>
<li><a href="https://github.com/meyfa"><code>@​meyfa</code></a> made
their first contribution in <a
href="https://redirect.github.com/fastify/fastify/pull/4631">fastify/fastify#4631</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/fastify/fastify/compare/v4.14.1...v4.15.0">https://github.com/fastify/fastify/compare/v4.14.1...v4.15.0</a></p>
<h2>v4.14.1</h2>
<h2>What's Changed</h2>
<ul>
<li>chore(.gitignore): add bun lockfile by <a
href="https://github.com/Fdawgs"><code>@​Fdawgs</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4609">fastify/fastify#4609</a></li>
<li>docs: consistency fix on note and example for frameworkErrors by <a
href="https://github.com/nadhifikbarw"><code>@​nadhifikbarw</code></a>
in <a
href="https://redirect.github.com/fastify/fastify/pull/4610">fastify/fastify#4610</a></li>
<li>fix: onRequestAbort hook request pending by <a
href="https://github.com/Eomm"><code>@​Eomm</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4611">fastify/fastify#4611</a></li>
<li>refactor: cleanup duplicated symbols by <a
href="https://github.com/metcoder95"><code>@​metcoder95</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4612">fastify/fastify#4612</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a
href="https://github.com/nadhifikbarw"><code>@​nadhifikbarw</code></a>
made their first contribution in <a
href="https://redirect.github.com/fastify/fastify/pull/4610">fastify/fastify#4610</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/fastify/fastify/compare/v4.14.0...v4.14.1">https://github.com/fastify/fastify/compare/v4.14.0...v4.14.1</a></p>
<h2>v4.14.0</h2>
<h2>What's Changed</h2>
<ul>
<li>Schema error formatter type by <a
href="https://github.com/cm-ayf"><code>@​cm-ayf</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4570">fastify/fastify#4570</a></li>
<li>Fix typescript integration bug with ajv-compiler by <a
href="https://github.com/Uzlopak"><code>@​Uzlopak</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4555">fastify/fastify#4555</a></li>
<li>build(deps-dev): bump yup from 0.32.11 to 1.0.0 by <a
href="https://github.com/dependabot"><code>@​dependabot</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4581">fastify/fastify#4581</a></li>
<li>feat: Add onRequestAbort hook. by <a
href="https://github.com/ShogunPanda"><code>@​ShogunPanda</code></a> in
<a
href="https://redirect.github.com/fastify/fastify/pull/4582">fastify/fastify#4582</a></li>
<li>ci(package-manager): update ubuntu os to latest by <a
href="https://github.com/Fdawgs"><code>@​Fdawgs</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4591">fastify/fastify#4591</a></li>
<li>Improve Contribution Guide's VSCode setup instructions by <a
href="https://github.com/evpirnia"><code>@​evpirnia</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4594">fastify/fastify#4594</a></li>
<li>fix: Only remove implicit HEAD routes. by <a
href="https://github.com/ShogunPanda"><code>@​ShogunPanda</code></a> in
<a
href="https://redirect.github.com/fastify/fastify/pull/4596">fastify/fastify#4596</a></li>
<li>Fix tests in Node.js v16 by <a
href="https://github.com/mcollina"><code>@​mcollina</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4597">fastify/fastify#4597</a></li>
<li>docs(ecosystem): add fastify-flux tool by <a
href="https://github.com/Jnig"><code>@​Jnig</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4599">fastify/fastify#4599</a></li>
<li>feat: include origin error message into serialization error by <a
href="https://github.com/ivan-tymoshenko"><code>@​ivan-tymoshenko</code></a>
in <a
href="https://redirect.github.com/fastify/fastify/pull/4601">fastify/fastify#4601</a></li>
<li>feat: log requests refused before processing starts by <a
href="https://github.com/airhorns"><code>@​airhorns</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4600">fastify/fastify#4600</a></li>
<li>fix: add missed symbol by <a
href="https://github.com/metcoder95"><code>@​metcoder95</code></a> in <a
href="https://redirect.github.com/fastify/fastify/pull/4608">fastify/fastify#4608</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a href="https://github.com/evpirnia"><code>@​evpirnia</code></a>
made their first contribution in <a
href="https://redirect.github.com/fastify/fastify/pull/4594">fastify/fastify#4594</a></li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/fastify/fastify/commit/87b644087c5b15bd70766bc4efeb940308d97066"><code>87b6440</code></a>
Bumped v4.15.0</li>
<li><a
href="https://github.com/fastify/fastify/commit/da9ace5ef2f5828bc71a2e54af9fdc4107e1258d"><code>da9ace5</code></a>
fix: avoid invoking onError hook when aborted handler resolves (<a
href="https://redirect.github.com/fastify/fastify/issues/4631">#4631</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/ca9785a3fadd9050ec163c6a0841a06f387a71c6"><code>ca9785a</code></a>
Bump version of fast-json-stringify-compiler (<a
href="https://redirect.github.com/fastify/fastify/issues/4630">#4630</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/4723c1b228f4a3d9e0ba38a137084b7fa2b622db"><code>4723c1b</code></a>
fix: content-type mis-handling for invalid non-essence content-type (<a
href="https://redirect.github.com/fastify/fastify/issues/4509">#4509</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/6b5957d0a766b3fc4c8926b9683ae956fc888edf"><code>6b5957d</code></a>
fix: check if validation schema is undefined (<a
href="https://redirect.github.com/fastify/fastify/issues/4620">#4620</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/71abc48379d37acc217246b318b40b01920b95e1"><code>71abc48</code></a>
ensure that generated validators are up to date (<a
href="https://redirect.github.com/fastify/fastify/issues/4508">#4508</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/b69ae0f8549900d1a127f003501f0cc0eedcadd3"><code>b69ae0f</code></a>
feat: expose prettyPrint method param (<a
href="https://redirect.github.com/fastify/fastify/issues/4623">#4623</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/9e92e4f3838794c1d4a6b51f46d835e74460bb85"><code>9e92e4f</code></a>
fix: logger validator throws (<a
href="https://redirect.github.com/fastify/fastify/issues/4520">#4520</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/2ba790f86c89d0885e441d8a5838ff8abb00696f"><code>2ba790f</code></a>
build(deps): bump lycheeverse/lychee-action from 1.5.4 to 1.6.1 (<a
href="https://redirect.github.com/fastify/fastify/issues/4603">#4603</a>)</li>
<li><a
href="https://github.com/fastify/fastify/commit/8e75c50a2fd14fa831c703924ec720d06fe6abe9"><code>8e75c50</code></a>
docs: add metcoder95 as collaborator (<a
href="https://redirect.github.com/fastify/fastify/issues/4622">#4622</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/fastify/fastify/compare/v4.5.3...v4.15.0">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=fastify&package-manager=npm_and_yarn&previous-version=4.5.3&new-version=4.15.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/Shopify/polaris/network/alerts).

</details>> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 117 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 73 insertions(+), 44 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1e1758c517d..35d40501cdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1531,12 +1531,12 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fastify/ajv-compiler@^3.1.1":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@fastify/ajv-compiler/-/ajv-compiler-3.2.0.tgz#a165ffb877fe239571a68f7b22143034176dcb8a"
-  integrity sha512-JrqgKmZoh1AJojDZk699DupQ9+tz5gSy7/w+5DrkXy5whM5IcqdV3SjG5qnOqgVJT1nPtUMDY0xYus2j6vwJiw==
+"@fastify/ajv-compiler@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@fastify/ajv-compiler/-/ajv-compiler-3.5.0.tgz#459bff00fefbf86c96ec30e62e933d2379e46670"
+  integrity sha512-ebbEtlI7dxXF5ziNdr05mOY8NnDiPB1XvAlLHctRt/Rc+C3LCOVW5imUVX+mhvUhnNzmPBHewUkOFgGlCxgdAA==
   dependencies:
-    ajv "^8.10.0"
+    ajv "^8.11.0"
     ajv-formats "^2.1.1"
     fast-uri "^2.0.0"
 
@@ -1550,10 +1550,10 @@
   resolved "https://registry.yarnpkg.com/@fastify/error/-/error-3.0.0.tgz#bfcb7b33cec0196413083a91ef2edc7b2c88455b"
   integrity sha512-dPRyT40GiHRzSCll3/Jn2nPe25+E1VXc9tDwRAIKwFCxd5Np5wzgz1tmooWG3sV0qKgrBibihVoCna2ru4SEFg==
 
-"@fastify/fast-json-stringify-compiler@^4.0.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.1.0.tgz#ebf657ce4ec88e27ba311f7560eaa0b37de8719d"
-  integrity sha512-cTKBV2J9+u6VaKDhX7HepSfPSzw+F+TSd+k0wzifj4rG+4E5PjSFJCk19P8R6tr/72cuzgGd+mbB3jFT6lvAgw==
+"@fastify/fast-json-stringify-compiler@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@fastify/fast-json-stringify-compiler/-/fast-json-stringify-compiler-4.2.0.tgz#52d047fac76b0d75bd660f04a5dd606659f57c5a"
+  integrity sha512-ypZynRvXA3dibfPykQN3RB5wBdEUgSGgny8Qc6k163wYPLD4mEGEDkACp+00YmqkGvIm8D/xYoHajwyEdWD/eg==
   dependencies:
     fast-json-stringify "^5.0.0"
 
@@ -4912,6 +4912,16 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.10.0, ajv@^8.6.3, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
+ajv@^8.11.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -5422,10 +5432,10 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-avvio@^8.1.3:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/avvio/-/avvio-8.2.0.tgz#aff28b0266617bf07ffc1c2d5f4220c3663ce1c2"
-  integrity sha512-bbCQdg7bpEv6kGH41RO/3B2/GMMmJSo2iBK+X8AWN9mujtfUipMDfIjsgHCfpnKqoGEQrrmCDKSa5OQ19+fDmg==
+avvio@^8.2.0:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/avvio/-/avvio-8.2.1.tgz#b5a482729847abb84d5aadce06511c04a0a62f82"
+  integrity sha512-TAlMYvOuwGyLK3PfBb5WKBXZmXz2fVCgv23d6zZFdle/q3gPjmxBaeuC0pY0Dzs5PWMSgfqqEZkrye19GlDTgw==
   dependencies:
     archy "^1.0.0"
     debug "^4.0.0"
@@ -9241,6 +9251,16 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
   integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
 
+fast-content-type-parse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-content-type-parse/-/fast-content-type-parse-1.0.0.tgz#cddce00df7d7efb3727d375a598e4904bfcb751c"
+  integrity sha512-Xbc4XcysUXcsP5aHUU7Nq3OwvHq97C+WnbkeIefpeYLX+ryzFJlU6OStFJhs6Ol0LkUGpcK+wL0JwfM+FCU5IA==
+
+fast-decode-uri-component@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fast-decode-uri-component/-/fast-decode-uri-component-1.0.1.tgz#46f8b6c22b30ff7a81357d4f59abfae938202543"
+  integrity sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -9301,6 +9321,13 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-querystring@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fast-querystring/-/fast-querystring-1.1.1.tgz#f4c56ef56b1a954880cfd8c01b83f9e1a3d3fda2"
+  integrity sha512-qR2r+e3HvhEFmpdHMv//U8FnFlnYjaC6QKDuaXALDkw2kvHO8WDjxH+f/rHGR4Me4pnk8p9JAkRNTjYHAKRn2Q==
+  dependencies:
+    fast-decode-uri-component "^1.0.1"
+
 fast-redact@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.1.2.tgz#d58e69e9084ce9fa4c1a6fa98a3e1ecf5d7839aa"
@@ -9327,24 +9354,25 @@ fastest-stable-stringify@^2.0.2:
   integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
 
 fastify@^4.2.1:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/fastify/-/fastify-4.5.3.tgz#df4f00347f06e8f3d6ab35788d2d140668c2533c"
-  integrity sha512-Q8Zvkmg7GnioMCDX1jT2Q7iRqjywlnDZ1735D2Ipf7ashCM/3/bqPKv2Jo1ZF2iDExct2eP1C/tdhcj0GG/OuQ==
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/fastify/-/fastify-4.15.0.tgz#4ebadaea706217467a332341f9cfa632072d51f2"
+  integrity sha512-m/CaRN8nf5uyYdrDe2qqq+0z3oGyE+A++qlKQoLJTI4WI0nWK9D6R3FxXQ3MVwt/md977GMR4F43pE9oqrS2zw==
   dependencies:
-    "@fastify/ajv-compiler" "^3.1.1"
+    "@fastify/ajv-compiler" "^3.5.0"
     "@fastify/error" "^3.0.0"
-    "@fastify/fast-json-stringify-compiler" "^4.0.0"
+    "@fastify/fast-json-stringify-compiler" "^4.2.0"
     abstract-logging "^2.0.1"
-    avvio "^8.1.3"
-    find-my-way "^7.0.0"
-    light-my-request "^5.5.1"
-    pino "^8.0.0"
+    avvio "^8.2.0"
+    fast-content-type-parse "^1.0.0"
+    find-my-way "^7.6.0"
+    light-my-request "^5.6.1"
+    pino "^8.5.0"
     process-warning "^2.0.0"
     proxy-addr "^2.0.7"
     rfdc "^1.3.0"
-    secure-json-parse "^2.4.0"
+    secure-json-parse "^2.5.0"
     semver "^7.3.7"
-    tiny-lru "^8.0.2"
+    tiny-lru "^10.0.0"
 
 fastq@^1.6.0, fastq@^1.6.1:
   version "1.13.0"
@@ -9536,12 +9564,13 @@ find-file-up@^0.1.2:
     fs-exists-sync "^0.1.0"
     resolve-dir "^0.1.0"
 
-find-my-way@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/find-my-way/-/find-my-way-7.1.0.tgz#a27de02d319f8063e4bbdec0e677f07693247977"
-  integrity sha512-yQYjxgcZmo6SQ1bRPr9ToMcCyzBOZ3L1cbDYTNCHRq7XfQPLSDhbywUAsQCLWlL3uuOUAKvTxeJ2V2i+Z9YqGA==
+find-my-way@^7.6.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/find-my-way/-/find-my-way-7.6.0.tgz#f1e271fd1aafe87e87860662f9940124274f73c7"
+  integrity sha512-H7berWdHJ+5CNVr4ilLWPai4ml7Y2qAsxjw3pfeBxPigZmaDTzF0wjJLj90xRCmGcWYcyt050yN+34OZDJm1eQ==
   dependencies:
     fast-deep-equal "^3.1.3"
+    fast-querystring "^1.0.0"
     safe-regex2 "^2.0.0"
 
 find-pkg@^0.1.0:
@@ -13306,10 +13335,10 @@ liftoff@^4.0.0:
     rechoir "^0.8.0"
     resolve "^1.20.0"
 
-light-my-request@^5.5.1:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/light-my-request/-/light-my-request-5.6.0.tgz#e7d99cd05d3992e382d6fcd1c7e26dd055e8bf82"
-  integrity sha512-xd9HY7p8t+j5bzP5Waqe4+0hluDnupzhLNu7Lk3l6wUbq3MFmTO0xykd0xwd7yhq7nMXfRPnDEurqYEkcJ3Q5g==
+light-my-request@^5.6.1:
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/light-my-request/-/light-my-request-5.9.1.tgz#076f8d4cc4639408cc48381d4f2860212d469d4b"
+  integrity sha512-UT7pUk8jNCR1wR7w3iWfIjx32DiB2f3hFdQSOwy3/EPQ3n3VocyipUxcyRZR0ahoev+fky69uA+GejPa9KuHKg==
   dependencies:
     cookie "^0.5.0"
     process-warning "^2.0.0"
@@ -16292,10 +16321,10 @@ pino-std-serializers@^6.0.0:
   resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-6.0.0.tgz#4c20928a1bafca122fdc2a7a4a171ca1c5f9c526"
   integrity sha512-mMMOwSKrmyl+Y12Ri2xhH1lbzQxwwpuru9VjyJpgFIH4asSj88F2csdMwN6+M5g1Ll4rmsYghHLQJw81tgZ7LQ==
 
-pino@^8.0.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-8.5.0.tgz#60943fa2ec0ac4f22b1f8fde199cc2488547261e"
-  integrity sha512-PuD6sOti8Y+p9zRoNB5dibmfjfM/OU2tEtJFICxw5ulXi1d0qnq/Rt3CsR6aBEAOeyCXP+ZUfiNWW+tt55pNzg==
+pino@^8.5.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-8.11.0.tgz#2a91f454106b13e708a66c74ebc1c2ab7ab38498"
+  integrity sha512-Z2eKSvlrl2rH8p5eveNUnTdd4AjJk8tAsLkHYZQKGHP4WTh2Gi1cOSOs3eWPqaj+niS3gj4UkoreoaWgF3ZWYg==
   dependencies:
     atomic-sleep "^1.0.0"
     fast-redact "^3.1.1"
@@ -18517,10 +18546,10 @@ section-matter@^1.0.0:
     extend-shallow "^2.0.1"
     kind-of "^6.0.0"
 
-secure-json-parse@^2.4.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.5.0.tgz#f929829df2adc7ccfb53703569894d051493a6ac"
-  integrity sha512-ZQruFgZnIWH+WyO9t5rWt4ZEGqCKPwhiw+YbzTwpmT9elgLrLcfuyUiSnwwjUiVy9r4VM3urtbNF1xmEh9IL2w==
+secure-json-parse@^2.5.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.7.0.tgz#5a5f9cd6ae47df23dba3151edd06855d47e09862"
+  integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
 
 select-hose@^2.0.0:
   version "2.0.0"
@@ -20055,10 +20084,10 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
-tiny-lru@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/tiny-lru/-/tiny-lru-8.0.2.tgz#812fccbe6e622ded552e3ff8a4c3b5ff34a85e4c"
-  integrity sha512-ApGvZ6vVvTNdsmt676grvCkUCGwzG9IqXma5Z07xJgiC5L7akUMof5U8G2JTI9Rz/ovtVhJBlY6mNhEvtjzOIg==
+tiny-lru@^10.0.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/tiny-lru/-/tiny-lru-10.3.0.tgz#2ddc88bbe8d9a2c761df673ebef52a82182a64b3"
+  integrity sha512-vTKRT2AEO1sViFDWAIzZVpV8KURCaMtnHa4RZB3XqtYLbrTO/fLDXKPEX9kVWq9u+nZREkwakbcmzGgvJm8QKA==
 
 title-case@^2.1.0:
   version "2.1.1"

From 25ef78cb60ef8c04f9255c1c6a0de924bc788266 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:10:49 -0400
Subject: [PATCH 005/102] Bump webpack from 5.72.0 to 5.76.0 (#8667)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps [webpack](https://github.com/webpack/webpack) from 5.72.0 to
5.76.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/webpack/webpack/releases">webpack's
releases</a>.</em></p>
<blockquote>
<h2>v5.76.0</h2>
<h2>Bugfixes</h2>
<ul>
<li>Avoid cross-realm object access by <a
href="https://github.com/Jack-Works"><code>@​Jack-Works</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16500">webpack/webpack#16500</a></li>
<li>Improve hash performance via conditional initialization by <a
href="https://github.com/lvivski"><code>@​lvivski</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16491">webpack/webpack#16491</a></li>
<li>Serialize <code>generatedCode</code> info to fix bug in asset module
cache restoration by <a
href="https://github.com/ryanwilsonperkin"><code>@​ryanwilsonperkin</code></a>
in <a
href="https://redirect.github.com/webpack/webpack/pull/16703">webpack/webpack#16703</a></li>
<li>Improve performance of <code>hashRegExp</code> lookup by <a
href="https://github.com/ryanwilsonperkin"><code>@​ryanwilsonperkin</code></a>
in <a
href="https://redirect.github.com/webpack/webpack/pull/16759">webpack/webpack#16759</a></li>
</ul>
<h2>Features</h2>
<ul>
<li>add <code>target</code> to <code>LoaderContext</code> type by <a
href="https://github.com/askoufis"><code>@​askoufis</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16781">webpack/webpack#16781</a></li>
</ul>
<h2>Security</h2>
<ul>
<li><a
href="https://github.com/advisories/GHSA-3rfm-jhwj-7488">CVE-2022-37603</a>
fixed by <a
href="https://github.com/akhilgkrishnan"><code>@​akhilgkrishnan</code></a>
in <a
href="https://redirect.github.com/webpack/webpack/pull/16446">webpack/webpack#16446</a></li>
</ul>
<h2>Repo Changes</h2>
<ul>
<li>Fix HTML5 logo in README by <a
href="https://github.com/jakebailey"><code>@​jakebailey</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16614">webpack/webpack#16614</a></li>
<li>Replace TypeScript logo in README by <a
href="https://github.com/jakebailey"><code>@​jakebailey</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16613">webpack/webpack#16613</a></li>
<li>Update actions/cache dependencies by <a
href="https://github.com/piwysocki"><code>@​piwysocki</code></a> in <a
href="https://redirect.github.com/webpack/webpack/pull/16493">webpack/webpack#16493</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a
href="https://github.com/Jack-Works"><code>@​Jack-Works</code></a> made
their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16500">webpack/webpack#16500</a></li>
<li><a href="https://github.com/lvivski"><code>@​lvivski</code></a> made
their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16491">webpack/webpack#16491</a></li>
<li><a
href="https://github.com/jakebailey"><code>@​jakebailey</code></a> made
their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16614">webpack/webpack#16614</a></li>
<li><a
href="https://github.com/akhilgkrishnan"><code>@​akhilgkrishnan</code></a>
made their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16446">webpack/webpack#16446</a></li>
<li><a
href="https://github.com/ryanwilsonperkin"><code>@​ryanwilsonperkin</code></a>
made their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16703">webpack/webpack#16703</a></li>
<li><a href="https://github.com/piwysocki"><code>@​piwysocki</code></a>
made their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16493">webpack/webpack#16493</a></li>
<li><a href="https://github.com/askoufis"><code>@​askoufis</code></a>
made their first contribution in <a
href="https://redirect.github.com/webpack/webpack/pull/16781">webpack/webpack#16781</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/webpack/webpack/compare/v5.75.0...v5.76.0">https://github.com/webpack/webpack/compare/v5.75.0...v5.76.0</a></p>
<h2>v5.75.0</h2>
<h1>Bugfixes</h1>
<ul>
<li><code>experiments.*</code> normalize to <code>false</code> when
opt-out</li>
<li>avoid <code>NaN%</code></li>
<li>show the correct error when using a conflicting chunk name in
code</li>
<li>HMR code tests existance of <code>window</code> before trying to
access it</li>
<li>fix <code>eval-nosources-*</code> actually exclude sources</li>
<li>fix race condition where no module is returned from processing
module</li>
<li>fix position of standalong semicolon in runtime code</li>
</ul>
<h1>Features</h1>
<ul>
<li>add support for <code>@import</code> to extenal CSS when using
experimental CSS in node</li>
<li>add <code>i64</code> support to the deprecated WASM
implementation</li>
</ul>
<h1>Developer Experience</h1>
<ul>
<li>expose <code>EnableWasmLoadingPlugin</code></li>
<li>add more typings</li>
<li>generate getters instead of readonly properties in typings to allow
overriding them</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/webpack/webpack/commit/97b1718720c33f1b17302a74c5284b01e02ec001"><code>97b1718</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16781">#16781</a>
from askoufis/loader-context-target-type</li>
<li><a
href="https://github.com/webpack/webpack/commit/b84efe6224b276bf72e4c5e2f4e76acddfaeef07"><code>b84efe6</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16759">#16759</a>
from ryanwilsonperkin/real-content-hash-regex-perf</li>
<li><a
href="https://github.com/webpack/webpack/commit/c98e9e001441b165c7ed4845700839730b505833"><code>c98e9e0</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16493">#16493</a>
from piwysocki/patch-1</li>
<li><a
href="https://github.com/webpack/webpack/commit/5f34acfbc074da6cc09f48944d7f2b4273ffb3f8"><code>5f34acf</code></a>
feat: Add <code>target</code> to <code>LoaderContext</code> type</li>
<li><a
href="https://github.com/webpack/webpack/commit/b7fc4d876deb958d7ee81ecc00a312e39a354a44"><code>b7fc4d8</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16703">#16703</a>
from ryanwilsonperkin/ryanwilsonperkin/fix-16160</li>
<li><a
href="https://github.com/webpack/webpack/commit/63ea82da4d4e4242b6a6285fc937f0684f264fe8"><code>63ea82d</code></a>
Merge branch 'webpack:main' into patch-1</li>
<li><a
href="https://github.com/webpack/webpack/commit/4ba225225b1348c8776ca5b5fe53468519413bc0"><code>4ba2252</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16446">#16446</a>
from akhilgkrishnan/patch-1</li>
<li><a
href="https://github.com/webpack/webpack/commit/1acd6350be3d74d4ac70b64cbbc60f27724b618b"><code>1acd635</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16613">#16613</a>
from jakebailey/ts-logo</li>
<li><a
href="https://github.com/webpack/webpack/commit/302eb37fe19ed7ca60eaf895aca4f9da9dfd7931"><code>302eb37</code></a>
Merge pull request <a
href="https://redirect.github.com/webpack/webpack/issues/16614">#16614</a>
from jakebailey/html5-logo</li>
<li><a
href="https://github.com/webpack/webpack/commit/cfdb1dfe59b33bf7441b8a8e4fc58d75e4f54cee"><code>cfdb1df</code></a>
Improve performance of hashRegExp lookup</li>
<li>Additional commits viewable in <a
href="https://github.com/webpack/webpack/compare/v5.72.0...v5.76.0">compare
view</a></li>
</ul>
</details>
<details>
<summary>Maintainer changes</summary>
<p>This version was pushed to npm by <a
href="https://www.npmjs.com/~evilebottnawi">evilebottnawi</a>, a new
releaser for webpack since your current version.</p>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=webpack&package-manager=npm_and_yarn&previous-version=5.72.0&new-version=5.76.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
- `@dependabot use these labels` will set the current labels as the
default for future PRs for this repo and language
- `@dependabot use these reviewers` will set the current reviewers as
the default for future PRs for this repo and language
- `@dependabot use these assignees` will set the current assignees as
the default for future PRs for this repo and language
- `@dependabot use this milestone` will set the current milestone as the
default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/Shopify/polaris/network/alerts).

</details>> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 35d40501cdc..906bbcf2aea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21538,9 +21538,9 @@ webpack@4, webpack@^4.44.1:
     webpack-sources "^1.4.1"
 
 webpack@5, "webpack@>=4.43.0 <6.0.0", webpack@^5.26.0, webpack@^5.9.0:
-  version "5.74.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
-  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
+  version "5.76.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.0.tgz#f9fb9fb8c4a7dbdcd0d56a98e56b8a942ee2692c"
+  integrity sha512-l5sOdYBDunyf72HW8dF23rFtWq/7Zgvt/9ftMof71E/yUb1YLOBmTgA2K4vQthB3kotMrSj609txVE0dnr2fjA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"

From 584e012a22588a1befccbb46cd0249c7cd54f6fe Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:11:01 -0400
Subject: [PATCH 006/102] Bump decode-uri-component from 0.2.0 to 0.2.2 (#7832)

Bumps
[decode-uri-component](https://github.com/SamVerschueren/decode-uri-component)
from 0.2.0 to 0.2.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/SamVerschueren/decode-uri-component/releases">decode-uri-component's
releases</a>.</em></p>
<blockquote>
<h2>v0.2.2</h2>
<ul>
<li>Prevent overwriting previously decoded tokens  980e0bf</li>
</ul>
<p><a
href="https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2">https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2</a></p>
<h2>v0.2.1</h2>
<ul>
<li>Switch to GitHub workflows  76abc93</li>
<li>Fix issue where decode throws - fixes <a
href="https://github-redirect.dependabot.com/SamVerschueren/decode-uri-component/issues/6">#6</a>
746ca5d</li>
<li>Update license (<a
href="https://github-redirect.dependabot.com/SamVerschueren/decode-uri-component/issues/1">#1</a>)
486d7e2</li>
<li>Tidelift tasks  a650457</li>
<li>Meta tweaks  66e1c28</li>
</ul>
<p><a
href="https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1">https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1</a></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/a0eea469d26eb0df668b081672cdb9581feb78eb"><code>a0eea46</code></a>
0.2.2</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/980e0bf09b64d94f1aa79012f895816c30ffd152"><code>980e0bf</code></a>
Prevent overwriting previously decoded tokens</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/3c8a373dd4837e89b3f970e01295dd03e1405a33"><code>3c8a373</code></a>
0.2.1</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/76abc939783fe3900fadb7d384a74d324d5557f3"><code>76abc93</code></a>
Switch to GitHub workflows</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/746ca5dcb6667c5d364e782d53c542830e4c10b9"><code>746ca5d</code></a>
Fix issue where decode throws - fixes <a
href="https://github-redirect.dependabot.com/SamVerschueren/decode-uri-component/issues/6">#6</a></li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/486d7e26d3a8c0fbe860fb651fe1bc98c2f2be30"><code>486d7e2</code></a>
Update license (<a
href="https://github-redirect.dependabot.com/SamVerschueren/decode-uri-component/issues/1">#1</a>)</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/a65045724e6234acef87f31da499d4807b20b134"><code>a650457</code></a>
Tidelift tasks</li>
<li><a
href="https://github.com/SamVerschueren/decode-uri-component/commit/66e1c2834c0e189201cb65196ec3101372459b02"><code>66e1c28</code></a>
Meta tweaks</li>
<li>See full diff in <a
href="https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=decode-uri-component&package-manager=npm_and_yarn&previous-version=0.2.0&new-version=0.2.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
- `@dependabot use these labels` will set the current labels as the
default for future PRs for this repo and language
- `@dependabot use these reviewers` will set the current reviewers as
the default for future PRs for this repo and language
- `@dependabot use these assignees` will set the current assignees as
the default for future PRs for this repo and language
- `@dependabot use this milestone` will set the current milestone as the
default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/Shopify/polaris/network/alerts).

</details>> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 906bbcf2aea..fb1f3a8a744 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7832,9 +7832,9 @@ decode-named-character-reference@^1.0.0:
     character-entities "^2.0.0"
 
 decode-uri-component@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
 
 decompress-response@^6.0.0:
   version "6.0.0"

From cba5c6a087b84cc3fb684e27b324b9af6451b8ed Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:11:12 -0400
Subject: [PATCH 007/102] Bump deep-object-diff from 1.1.7 to 1.1.9 (#7734)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps
[deep-object-diff](https://github.com/mattphillips/deep-object-diff)
from 1.1.7 to 1.1.9.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/mattphillips/deep-object-diff/releases">deep-object-diff's
releases</a>.</em></p>
<blockquote>
<h2>v1.1.9</h2>
<h2>Vulnerability patch</h2>
<p>Details outlined here: <a
href="https://github-redirect.dependabot.com/mattphillips/deep-object-diff/issues/85">#85</a>.
TLDR: The prototype of the returned diff object could be polluted but
not globally on all objects.</p>
<p>Fix: <a
href="https://github-redirect.dependabot.com/mattphillips/deep-object-diff/pull/87">mattphillips/deep-object-diff#87</a></p>
<p>Thanks <a
href="https://github.com/Retr02332"><code>@​Retr02332</code></a> for
highlighting the issue and validating the fix.</p>
<p>This vulnerability was introduced in <a
href="https://github.com/mattphillips/deep-object-diff/releases/tag/v1.1.6">https://github.com/mattphillips/deep-object-diff/releases/tag/v1.1.6</a></p>
<h2>v1.1.8</h2>
<h2>Patch</h2>
<ul>
<li>Fix typings resolution when using TypeScript 4.7+ with ESM <a
href="https://github-redirect.dependabot.com/mattphillips/deep-object-diff/issues/83">#83</a></li>
<li>improve return type for detailedDiff <a
href="https://github-redirect.dependabot.com/mattphillips/deep-object-diff/issues/72">#72</a></li>
</ul>
<h2>Credits</h2>
<p>Thanks <a href="https://github.com/Nitive"><code>@​Nitive</code></a>
and <a href="https://github.com/icholy"><code>@​icholy</code></a> for
your PRs</p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a
href="https://github.com/mattphillips/deep-object-diff/commits">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=deep-object-diff&package-manager=npm_and_yarn&previous-version=1.1.7&new-version=1.1.9)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
- `@dependabot use these labels` will set the current labels as the
default for future PRs for this repo and language
- `@dependabot use these reviewers` will set the current reviewers as
the default for future PRs for this repo and language
- `@dependabot use these assignees` will set the current assignees as
the default for future PRs for this repo and language
- `@dependabot use this milestone` will set the current milestone as the
default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/Shopify/polaris/network/alerts).

</details>> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index fb1f3a8a744..a4e67f534ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7864,9 +7864,9 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 deep-object-diff@^1.1.0:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.7.tgz#348b3246f426427dd633eaa50e1ed1fc2eafc7e4"
-  integrity sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.9.tgz#6df7ef035ad6a0caa44479c536ed7b02570f4595"
+  integrity sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==
 
 deepmerge@^4.2.2:
   version "4.2.2"

From 3982ef9aa8f235cee645e73d112fd9e598b45ff4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 17 Aug 2023 10:11:24 -0400
Subject: [PATCH 008/102] Bump loader-utils from 1.4.0 to 1.4.2 (#7725)

Bumps [loader-utils](https://github.com/webpack/loader-utils) from 1.4.0
to 1.4.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/webpack/loader-utils/releases">loader-utils's
releases</a>.</em></p>
<blockquote>
<h2>v1.4.2</h2>
<h3><a
href="https://github.com/webpack/loader-utils/compare/v1.4.1...v1.4.2">1.4.2</a>
(2022-11-11)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>ReDoS problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/226">#226</a>)
(<a
href="https://github.com/webpack/loader-utils/commit/17cbf8fa8989c1cb45bdd2997aa524729475f1fa">17cbf8f</a>)</li>
</ul>
<h2>v1.4.1</h2>
<h3><a
href="https://github.com/webpack/loader-utils/compare/v1.4.0...v1.4.1">1.4.1</a>
(2022-11-07)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>security problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/220">#220</a>)
(<a
href="https://github.com/webpack/loader-utils/commit/4504e34c4796a5836ef70458327351675aed48a5">4504e34</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md">loader-utils's
changelog</a>.</em></p>
<blockquote>
<h3><a
href="https://github.com/webpack/loader-utils/compare/v1.4.1...v1.4.2">1.4.2</a>
(2022-11-11)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>ReDoS problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/226">#226</a>)
(<a
href="https://github.com/webpack/loader-utils/commit/17cbf8fa8989c1cb45bdd2997aa524729475f1fa">17cbf8f</a>)</li>
</ul>
<h3><a
href="https://github.com/webpack/loader-utils/compare/v1.4.0...v1.4.1">1.4.1</a>
(2022-11-07)</h3>
<h3>Bug Fixes</h3>
<ul>
<li>security problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/220">#220</a>)
(<a
href="https://github.com/webpack/loader-utils/commit/4504e34c4796a5836ef70458327351675aed48a5">4504e34</a>)</li>
</ul>
<p><!-- raw HTML omitted --><!-- raw HTML omitted --></p>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/webpack/loader-utils/commit/331ad5067d9a1a7b8d646692e6959639969210d1"><code>331ad50</code></a>
chore(release): 1.4.2</li>
<li><a
href="https://github.com/webpack/loader-utils/commit/17cbf8fa8989c1cb45bdd2997aa524729475f1fa"><code>17cbf8f</code></a>
fix: ReDoS problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/226">#226</a>)</li>
<li><a
href="https://github.com/webpack/loader-utils/commit/8f082b39f6903929f30fe29dab34f4d9c7ef070a"><code>8f082b3</code></a>
chore(release): 1.4.1</li>
<li><a
href="https://github.com/webpack/loader-utils/commit/4504e34c4796a5836ef70458327351675aed48a5"><code>4504e34</code></a>
fix: security problem (<a
href="https://github-redirect.dependabot.com/webpack/loader-utils/issues/220">#220</a>)</li>
<li>See full diff in <a
href="https://github.com/webpack/loader-utils/compare/v1.4.0...v1.4.2">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=loader-utils&package-manager=npm_and_yarn&previous-version=1.4.0&new-version=1.4.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

You can trigger a rebase of this PR by commenting `@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
- `@dependabot use these labels` will set the current labels as the
default for future PRs for this repo and language
- `@dependabot use these reviewers` will set the current reviewers as
the default for future PRs for this repo and language
- `@dependabot use these assignees` will set the current assignees as
the default for future PRs for this repo and language
- `@dependabot use this milestone` will set the current milestone as the
default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/Shopify/polaris/network/alerts).

</details>> **Note**
> Automatic rebases have been disabled on this pull request as it has
been open for over 30 days.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a4e67f534ab..eb7576719c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13445,9 +13445,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^1.2.3:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"

From e6a2d352aeb628c662ca86bb7c8b91ce695ff640 Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+samrose3@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:39:30 -0400
Subject: [PATCH 009/102] Remove `polaris-cli` and `polaris-codemods` packages
 (#10101)

Use only the `@shopify/polaris-migrator` package.

This also removes the documentation for the Polaris CLI on the [Tools
page](https://polaris.shopify.com/tools/polaris-cli).

Removing these packages will

* **Improve our CI times** by removing extra packages from our build,
test, and lint workflows
* **Reduce confusion** on where to add new migrations or update previous
migrations
* **Clean up things** such as ESLint configs, changelog entries on
Version Package PRs, and package dep bumps
---
 .changeset/friendly-bananas-crash.md          |  11 +
 .eslintrc.js                                  |  23 -
 package.json                                  |   2 -
 polaris-cli/CHANGELOG.md                      | 477 -------------
 polaris-cli/README.md                         |  10 -
 polaris-cli/package.json                      |  47 --
 polaris-cli/src/commands/polaris/migrate.ts   |  27 -
 polaris-cli/tsconfig.json                     |  11 -
 polaris-codemods/CHANGELOG.md                 | 145 ----
 polaris-codemods/jest.config.js               |   8 -
 polaris-codemods/package.json                 |  52 --
 polaris-codemods/plopfile.mjs                 |  56 --
 .../src/codemods/10.0.0/transform.ts          |  33 -
 .../src/codemods/11.0.0/transform.ts          |  53 --
 .../src/codemods/9.0.0/transform.ts           |  84 ---
 .../react-rename-component-prop.input.tsx     |  23 -
 .../react-rename-component-prop.output.tsx    |  23 -
 .../react-rename-component-prop/transform.ts  |  45 --
 .../tests/react-rename-component.input.tsx    |  21 -
 .../tests/react-rename-component.output.tsx   |  21 -
 .../react-rename-stack-component.input.tsx    |  19 -
 .../react-rename-stack-component.output.tsx   |  19 -
 .../tests/rename-prop-types.input.tsx         |   4 -
 .../tests/rename-prop-types.output.tsx        |   4 -
 .../renamed-available-identifier.input.tsx    |  14 -
 .../renamed-available-identifier.output.tsx   |  15 -
 .../tests/renamed-available-jsx.input.tsx     |  17 -
 .../tests/renamed-available-jsx.output.tsx    |  18 -
 .../tests/renamed-import.input.tsx            |  13 -
 .../tests/renamed-import.output.tsx           |  13 -
 .../react-rename-component/transform.ts       | 218 ------
 .../scss-remove-unused-at-use.input.scss      |   6 -
 .../scss-remove-unused-at-use.output.scss     |   5 -
 .../tests/with-at-use-namespace.input.scss    |   5 -
 .../tests/with-at-use-namespace.output.scss   |   3 -
 .../tests/with-configuration.input.scss       |   8 -
 .../tests/with-configuration.output.scss      |   3 -
 .../tests/with-options.input.scss             |   5 -
 .../tests/with-options.output.scss            |   3 -
 .../with-used-at-use-namespace.input.scss     |   5 -
 .../with-used-at-use-namespace.output.scss    |   5 -
 .../tests/with-used-at-use.input.scss         |   5 -
 .../tests/with-used-at-use.output.scss        |   5 -
 .../scss-remove-unused-at-use/transform.ts    |  71 --
 ...styles-insert-stylelint-disable.input.scss |  71 --
 ...tyles-insert-stylelint-disable.output.scss |  84 ---
 .../tests/test-config.js                      |  19 -
 .../transform.ts                              | 150 ----
 .../tests/replacement-maps.js                 |  15 -
 .../tests/with-from-to-flags-basic.input.scss |  11 -
 .../with-from-to-flags-basic.output.scss      |  11 -
 .../with-from-to-flags-regexp.input.scss      |  14 -
 .../with-from-to-flags-regexp.output.scss     |  17 -
 .../tests/with-maps-flag.input.scss           |  25 -
 .../tests/with-maps-flag.output.scss          |  28 -
 .../with-replacementMaps-option.input.scss    |  11 -
 .../with-replacementMaps-option.output.scss   |  11 -
 .../steps/replace-display-text.ts             | 205 ------
 .../steps/replace-other.ts                    | 217 ------
 .../steps/replace-text-style.ts               | 209 ------
 .../tests/remove-imports-all.input.tsx        |  23 -
 .../tests/remove-imports-all.output.tsx       |  30 -
 ...emove-imports-partial-identifier.input.tsx |  14 -
 ...move-imports-partial-identifier.output.tsx |  26 -
 ...ve-imports-partial-props-invalid.input.tsx |  26 -
 ...e-imports-partial-props-invalid.output.tsx |  44 --
 ...emove-imports-partial-props-type.input.tsx |  15 -
 ...move-imports-partial-props-type.output.tsx |  32 -
 ...10-react-replace-text-components.input.tsx |  52 --
 ...0-react-replace-text-components.output.tsx | 102 ---
 .../tests/with-component-name.input.tsx       |  33 -
 .../tests/with-component-name.output.tsx      |  37 -
 ...ponent-and-other-component-props.input.tsx |  20 -
 ...onent-and-other-component-props.output.tsx |  32 -
 .../with-relative-display-text.input.tsx      |   8 -
 .../with-relative-display-text.output.tsx     |  12 -
 ...ponent-and-other-component-props.input.tsx |  22 -
 ...onent-and-other-component-props.output.tsx |  34 -
 .../with-relative-text-style-props.input.tsx  |  16 -
 .../with-relative-text-style-props.output.tsx |  26 -
 .../tests/with-relative.input.tsx             |  32 -
 .../tests/with-relative.output.tsx            |  64 --
 .../tests/with-text-style-props.input.tsx     |  14 -
 .../tests/with-text-style-props.output.tsx    |  24 -
 .../transform.ts                              |  56 --
 ...11-react-update-page-breadcrumbs.input.tsx |  28 -
 ...1-react-update-page-breadcrumbs.output.tsx |  40 --
 ...-replace-custom-property-border.input.scss |  10 -
 ...replace-custom-property-border.output.scss |  10 -
 ...s-replace-custom-property-color.input.scss |  16 -
 ...-replace-custom-property-color.output.scss |  16 -
 ...s-replace-custom-property-depth.input.scss |  14 -
 ...-replace-custom-property-depth.output.scss |  14 -
 ...-replace-custom-property-legacy.input.scss |  20 -
 ...replace-custom-property-legacy.output.scss |  29 -
 ...-replace-custom-property-motion.input.scss |  25 -
 ...replace-custom-property-motion.output.scss |  25 -
 .../tests/with-namespace.input.scss           |  21 -
 .../tests/with-namespace.output.scss          |  27 -
 .../v9-scss-replace-border-width.input.scss   |  15 -
 .../v9-scss-replace-border-width.output.scss  |  15 -
 .../tests/with-namespace.input.scss           |  17 -
 .../tests/with-namespace.output.scss          |  17 -
 .../v9-scss-replace-border-width/transform.ts | 137 ----
 .../tests/v9-scss-replace-border.input.scss   |  13 -
 .../tests/v9-scss-replace-border.output.scss  |  13 -
 .../tests/with-namespace.input.scss           |  15 -
 .../tests/with-namespace.output.scss          |  15 -
 .../v9-scss-replace-border/transform.ts       | 125 ----
 .../v9-scss-replace-breakpoints.input.scss    | 118 ----
 .../v9-scss-replace-breakpoints.output.scss   | 118 ----
 .../tests/with-namespace.input.scss           | 120 ----
 .../tests/with-namespace.output.scss          | 120 ----
 .../v9-scss-replace-breakpoints/transform.ts  |  69 --
 .../tests/v9-scss-replace-color.input.scss    |  79 ---
 .../tests/v9-scss-replace-color.output.scss   |  79 ---
 .../tests/with-namespace.input.scss           |   8 -
 .../tests/with-namespace.output.scss          |   8 -
 .../v10-legacy-colors.ts                      | 647 ------------------
 .../tests/v9-scss-replace-duration.input.scss |  68 --
 .../v9-scss-replace-duration.output.scss      |  85 ---
 .../tests/with-namespace.input.scss           |  84 ---
 .../tests/with-namespace.output.scss          |  87 ---
 .../v9-scss-replace-duration/transform.ts     |  86 ---
 .../tests/v9-scss-replace-easing.input.scss   |  68 --
 .../tests/v9-scss-replace-easing.output.scss  | 111 ---
 .../tests/with-namespace.input.scss           |  83 ---
 .../tests/with-namespace.output.scss          | 119 ----
 .../v9-scss-replace-easing/transform.ts       |  91 ---
 .../v9-scss-replace-font-family.input.scss    |   6 -
 .../v9-scss-replace-font-family.output.scss   |   6 -
 .../tests/with-namespace.input.scss           |   8 -
 .../tests/with-namespace.output.scss          |   8 -
 .../v9-scss-replace-font-size.input.scss      |   9 -
 .../v9-scss-replace-font-size.output.scss     |  15 -
 .../tests/with-namespace.input.scss           |  11 -
 .../tests/with-namespace.output.scss          |  17 -
 .../v9-scss-replace-font-size/transform.ts    | 154 -----
 .../v9-scss-replace-line-height.input.scss    |  10 -
 .../v9-scss-replace-line-height.output.scss   |  16 -
 .../tests/with-namespace.input.scss           |  12 -
 .../tests/with-namespace.output.scss          |  18 -
 .../v9-scss-replace-line-height/transform.ts  | 149 ----
 .../tests/v9-scss-replace-spacing.input.scss  |  16 -
 .../tests/v9-scss-replace-spacing.output.scss |  22 -
 .../tests/with-namespace.input.scss           |  18 -
 .../tests/with-namespace.output.scss          |  24 -
 .../v9-scss-replace-text-emphasis.input.scss  |  15 -
 .../v9-scss-replace-text-emphasis.output.scss |  16 -
 .../tests/with-namespace.input.scss           |  17 -
 .../tests/with-namespace.output.scss          |  18 -
 .../transform.ts                              |  70 --
 .../tests/v9-scss-replace-z-index.input.scss  |  40 --
 .../tests/v9-scss-replace-z-index.output.scss |  48 --
 .../tests/with-namespace.input.scss           |  48 --
 .../tests/with-namespace.output.scss          |  55 --
 .../v9-scss-replace-z-index/transform.ts      | 142 ----
 ...-replace-custom-property-border.input.scss |   7 -
 ...replace-custom-property-border.output.scss |   7 -
 ...s-replace-custom-property-depth.input.scss |  12 -
 ...-replace-custom-property-depth.output.scss |  12 -
 ...es-replace-custom-property-font.input.scss |   4 -
 ...s-replace-custom-property-font.output.scss |   4 -
 ...-replace-custom-property-legacy.input.scss |  14 -
 ...replace-custom-property-legacy.output.scss |  14 -
 ...-replace-custom-property-motion.input.scss |   4 -
 ...replace-custom-property-motion.output.scss |   4 -
 .../tests/v9-styles-tokenize-font.input.scss  |  69 --
 .../tests/v9-styles-tokenize-font.output.scss | 117 ----
 .../tests/with-namespace.input.scss           |  17 -
 .../tests/with-namespace.output.scss          |  35 -
 .../v9-styles-tokenize-font/transform.ts      | 274 --------
 .../v9-styles-tokenize-motion.input.scss      | 147 ----
 .../v9-styles-tokenize-motion.output.scss     | 224 ------
 .../v9-styles-tokenize-motion/transform.ts    | 304 --------
 .../tests/v9-styles-tokenize-shape.input.scss |  88 ---
 .../v9-styles-tokenize-shape.output.scss      | 118 ----
 .../tests/with-namespace.input.scss           |  91 ---
 .../tests/with-namespace.output.scss          | 121 ----
 .../v9-styles-tokenize-shape/transform.ts     | 239 -------
 .../tests/v9-styles-tokenize-space.input.scss |  62 --
 .../v9-styles-tokenize-space.output.scss      | 123 ----
 .../tests/with-namespace.input.scss           |  64 --
 .../tests/with-namespace.output.scss          | 125 ----
 .../v9-styles-tokenize-space/transform.ts     | 183 -----
 polaris-codemods/src/utilities/constants.ts   |  26 -
 polaris-codemods/src/utilities/imports.ts     | 291 --------
 polaris-codemods/src/utilities/jsx.ts         | 188 -----
 polaris-codemods/src/utilities/sass.ts        | 603 ----------------
 polaris-codemods/src/utilities/types.ts       |  24 -
 .../transform.ts.hbs                          |  24 -
 polaris-codemods/tsconfig.json                |  13 -
 .../codeshift.config.js                       |  57 +-
 polaris-migrator/plopfile.mjs                 |   8 +-
 polaris-migrator/src/cli.ts                   |  60 +-
 polaris-migrator/src/constants.ts             |  63 --
 polaris-migrator/src/index.ts                 |   6 +-
 .../tests/react-rename-component-prop.test.ts |  16 -
 .../tests/transform.test.ts                   |   0
 ...-rename-component-prop.ts => transform.ts} |   2 +-
 .../tests/react-rename-component.test.ts      |  73 --
 .../tests/transform.test.ts                   |   0
 ...react-rename-component.ts => transform.ts} |   4 +-
 .../tests/scss-remove-unused-at-use.test.ts   |  24 -
 .../tests/transform.test.ts                   |   0
 ...s-remove-unused-at-use.ts => transform.ts} |  10 +-
 .../styles-insert-stylelint-disable.test.ts   |  17 -
 .../tests/transform.test.ts                   |   0
 ...sert-stylelint-disable.ts => transform.ts} |   6 +-
 .../styles-replace-custom-property.ts         | 112 ---
 .../styles-replace-custom-property.test.ts    |  42 --
 .../tests/transform.test.ts                   |   2 +-
 .../transform.ts                              |   3 -
 .../steps/replace-display-text.ts             |   6 +-
 .../steps/replace-other.ts                    |   8 +-
 .../steps/replace-text-style.ts               |   6 +-
 .../tests/transform.test.ts                   |   0
 .../v10-react-replace-text-components.test.ts |  28 -
 ...eplace-text-components.ts => transform.ts} |   6 +-
 .../tests/transform.test.ts                   |   0
 .../v11-react-update-page-breadcrumbs.test.ts |  11 -
 .../transform.ts                              |   4 +-
 .../v11-react-update-page-breadcrumbs.ts      | 101 ---
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-border.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...1-styles-replace-custom-property-border.ts |  26 -
 .../tests/transform.test.ts                   |   0
 ...yles-replace-custom-property-color.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...11-styles-replace-custom-property-color.ts | 211 ------
 .../tests/transform.test.ts                   |   0
 ...yles-replace-custom-property-depth.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...11-styles-replace-custom-property-depth.ts |  27 -
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-legacy.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...1-styles-replace-custom-property-legacy.ts |  56 --
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-motion.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...1-styles-replace-custom-property-motion.ts |  38 -
 .../tests/transform.test.ts                   |   0
 ...replace-custom-property-z-index.input.scss |   0
 ...eplace-custom-property-z-index.output.scss |   0
 .../transform.ts                              |   3 -
 ...-replace-custom-property-zindex.input.scss |  14 -
 ...replace-custom-property-zindex.output.scss |  14 -
 ...les-replace-custom-property-zindex.test.ts |  12 -
 ...1-styles-replace-custom-property-zindex.ts |  27 -
 .../tests/transform.input.scss                |   0
 .../tests/transform.output.scss               |   0
 .../tests/transform.test.ts                   |   0
 .../v9-scss-replace-border-radius.input.scss  |  17 -
 .../v9-scss-replace-border-radius.output.scss |  23 -
 .../v9-scss-replace-border-radius.test.ts     |  17 -
 .../transform.ts                              |   7 +-
 .../v9-scss-replace-border-radius.ts          | 125 ----
 .../tests/transform.test.ts                   |   0
 .../v9-scss-replace-border-width.test.ts      |  17 -
 ...s-replace-border-width.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-border.test.ts      |  17 -
 ...v9-scss-replace-border.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-breakpoints.test.ts |  17 -
 ...ss-replace-breakpoints.ts => transform.ts} |  60 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-color.test.ts       |  17 -
 .../v9-scss-replace-color/transform.ts        |   7 +-
 .../v9-scss-replace-color.ts                  | 247 -------
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-duration.test.ts    |  17 -
 ...-scss-replace-duration.ts => transform.ts} |  24 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-easing.test.ts      |  17 -
 ...v9-scss-replace-easing.ts => transform.ts} |  22 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-font-family.test.ts |  17 -
 .../v9-scss-replace-font-family/transform.ts  |   7 +-
 .../v9-scss-replace-font-family.ts            |  94 ---
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-font-size.test.ts   |  17 -
 ...scss-replace-font-size.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-line-height.test.ts |  17 -
 ...ss-replace-line-height.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-spacing.test.ts     |  17 -
 .../v9-scss-replace-spacing/transform.ts      |   7 +-
 .../v9-scss-replace-spacing.ts                | 103 ---
 .../tests/transform.test.ts                   |   0
 .../v9-scss-replace-text-emphasis.test.ts     |  17 -
 ...-replace-text-emphasis.ts => transform.ts} |  54 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-scss-replace-z-index.test.ts     |  17 -
 ...9-scss-replace-z-index.ts => transform.ts} |  76 +-
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-border.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...9-styles-replace-custom-property-border.ts |  21 -
 .../tests/transform.test.ts                   |   0
 ...yles-replace-custom-property-depth.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...v9-styles-replace-custom-property-depth.ts |  25 -
 .../tests/transform.test.ts                   |   0
 ...tyles-replace-custom-property-font.test.ts |  12 -
 .../transform.ts                              |   3 -
 .../v9-styles-replace-custom-property-font.ts |  17 -
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-legacy.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...9-styles-replace-custom-property-legacy.ts |  24 -
 .../tests/transform.test.ts                   |   0
 ...les-replace-custom-property-motion.test.ts |  12 -
 .../transform.ts                              |   3 -
 ...9-styles-replace-custom-property-motion.ts |  17 -
 .../tests/transform.test.ts                   |   0
 .../tests/v9-styles-tokenize-font.test.ts     |  17 -
 ...9-styles-tokenize-font.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-styles-tokenize-motion.test.ts   |  12 -
 ...styles-tokenize-motion.ts => transform.ts} | 110 +--
 .../tests/transform.test.ts                   |   0
 .../tests/v9-styles-tokenize-shape.test.ts    |  17 -
 ...-styles-tokenize-shape.ts => transform.ts} |  10 +-
 .../tests/transform.test.ts                   |   0
 .../tests/v9-styles-tokenize-space.test.ts    |  17 -
 ...-styles-tokenize-space.ts => transform.ts} |   2 +-
 polaris-migrator/src/types.ts                 |  55 --
 .../src/utilities/check.ts                    |   0
 polaris-migrator/src/utilities/constants.ts   |   2 +
 polaris-migrator/src/utilities/imports.ts     |  10 +-
 polaris-migrator/src/utilities/jsx.ts         |   2 +-
 .../src/utilities/matches.ts                  |   0
 .../src/utilities/matchesStringOrRegExp.ts    |  77 ---
 polaris-migrator/src/utilities/sass.ts        |   6 +-
 polaris-migrator/src/utilities/testUtils.ts   |  72 --
 .../src/utilities/tests/sass.test.ts          | 101 ---
 polaris-migrator/src/utilities/type-guards.ts |   7 -
 polaris-migrator/src/utilities/types.ts       |  65 ++
 ...{{kebabCase migrationName}}.input.scss.hbs |   3 -
 ...{kebabCase migrationName}}.output.scss.hbs |   3 -
 .../{{kebabCase migrationName}}.test.ts.hbs   |  12 -
 .../{{kebabCase migrationName}}.ts.hbs        |  55 --
 .../tests/transform.input.scss.hbs            |   0
 .../tests/transform.output.scss.hbs           |   0
 .../tests/transform.test.ts.hbs               |   0
 .../transform.ts.hbs                          |   7 +-
 .../{{kebabCase migrationName}}.input.tsx.hbs |   5 -
 ...{{kebabCase migrationName}}.output.tsx.hbs |   5 -
 .../{{kebabCase migrationName}}.test.ts.hbs   |  11 -
 .../{{kebabCase migrationName}}.ts.hbs        |  18 -
 .../tests/transform.input.tsx.hbs             |   0
 .../tests/transform.output.tsx.hbs            |   0
 .../tests/transform.test.ts.hbs               |   0
 .../transform.ts.hbs                          |   7 +
 .../content/tools/polaris-cli.md              |  52 --
 tsconfig.json                                 |   2 -
 yarn.lock                                     |  72 +-
 361 files changed, 433 insertions(+), 14014 deletions(-)
 create mode 100644 .changeset/friendly-bananas-crash.md
 delete mode 100644 polaris-cli/CHANGELOG.md
 delete mode 100644 polaris-cli/README.md
 delete mode 100644 polaris-cli/package.json
 delete mode 100644 polaris-cli/src/commands/polaris/migrate.ts
 delete mode 100644 polaris-cli/tsconfig.json
 delete mode 100644 polaris-codemods/CHANGELOG.md
 delete mode 100644 polaris-codemods/jest.config.js
 delete mode 100644 polaris-codemods/package.json
 delete mode 100644 polaris-codemods/plopfile.mjs
 delete mode 100644 polaris-codemods/src/codemods/10.0.0/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/11.0.0/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/9.0.0/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component-prop/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/react-rename-component/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss
 delete mode 100644 polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js
 delete mode 100644 polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss
 delete mode 100644 polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx
 delete mode 100644 polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss
 delete mode 100644 polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts
 delete mode 100644 polaris-codemods/src/utilities/constants.ts
 delete mode 100644 polaris-codemods/src/utilities/imports.ts
 delete mode 100644 polaris-codemods/src/utilities/jsx.ts
 delete mode 100644 polaris-codemods/src/utilities/sass.ts
 delete mode 100644 polaris-codemods/src/utilities/types.ts
 delete mode 100644 polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/transform.ts.hbs
 delete mode 100644 polaris-codemods/tsconfig.json
 rename {polaris-codemods => polaris-migrator}/codeshift.config.js (52%)
 delete mode 100644 polaris-migrator/src/constants.ts
 delete mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/react-rename-component-prop/tests/transform.test.ts (100%)
 rename polaris-migrator/src/migrations/react-rename-component-prop/{react-rename-component-prop.ts => transform.ts} (91%)
 delete mode 100644 polaris-migrator/src/migrations/react-rename-component/tests/react-rename-component.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/react-rename-component/tests/transform.test.ts (100%)
 rename polaris-migrator/src/migrations/react-rename-component/{react-rename-component.ts => transform.ts} (98%)
 delete mode 100644 polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/scss-remove-unused-at-use/tests/transform.test.ts (100%)
 rename polaris-migrator/src/migrations/scss-remove-unused-at-use/{scss-remove-unused-at-use.ts => transform.ts} (87%)
 delete mode 100644 polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/styles-insert-stylelint-disable/tests/transform.test.ts (100%)
 rename polaris-migrator/src/migrations/styles-insert-stylelint-disable/{styles-insert-stylelint-disable.ts => transform.ts} (98%)
 delete mode 100644 polaris-migrator/src/migrations/styles-replace-custom-property/styles-replace-custom-property.ts
 delete mode 100644 polaris-migrator/src/migrations/styles-replace-custom-property/tests/styles-replace-custom-property.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/styles-replace-custom-property/tests/transform.test.ts (90%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/styles-replace-custom-property/transform.ts (96%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v10-react-replace-text-components/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v10-react-replace-text-components/tests/v10-react-replace-text-components.test.ts
 rename polaris-migrator/src/migrations/v10-react-replace-text-components/{v10-react-replace-text-components.ts => transform.ts} (93%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-react-update-page-breadcrumbs/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-react-update-page-breadcrumbs/transform.ts (95%)
 delete mode 100644 polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/v11-react-update-page-breadcrumbs.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-border/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-border/transform.ts (90%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-color/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-color/transform.ts (99%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/v11-styles-replace-custom-property-color.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-depth/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-depth/transform.ts (90%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/v11-styles-replace-custom-property-depth.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-legacy/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-legacy/transform.ts (96%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/v11-styles-replace-custom-property-legacy.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-motion/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-motion/transform.ts (94%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/v11-styles-replace-custom-property-motion.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-z-index/tests/transform.test.ts (100%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.input.scss (100%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.output.scss (100%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v11-styles-replace-custom-property-z-index/transform.ts (88%)
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.input.scss
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.output.scss
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.test.ts
 delete mode 100644 polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/v11-styles-replace-custom-property-zindex.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border-radius/tests/transform.input.scss (100%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border-radius/tests/transform.output.scss (100%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border-radius/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.input.scss
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.output.scss
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border-radius/transform.ts (95%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border-radius/v9-scss-replace-border-radius.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border-width/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-border-width/{v9-scss-replace-border-width.ts => transform.ts} (95%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-border/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-border/tests/v9-scss-replace-border.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-border/{v9-scss-replace-border.ts => transform.ts} (95%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-breakpoints/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-breakpoints/{v9-scss-replace-breakpoints.ts => transform.ts} (95%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-color/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-color/tests/v9-scss-replace-color.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-color/transform.ts (97%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-color/v9-scss-replace-color.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-duration/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-duration/tests/v9-scss-replace-duration.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-duration/{v9-scss-replace-duration.ts => transform.ts} (97%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-easing/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-easing/tests/v9-scss-replace-easing.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-easing/{v9-scss-replace-easing.ts => transform.ts} (97%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-font-family/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-font-family/transform.ts (94%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-font-family/v9-scss-replace-font-family.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-font-size/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-font-size/{v9-scss-replace-font-size.ts => transform.ts} (96%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-line-height/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-line-height/{v9-scss-replace-line-height.ts => transform.ts} (95%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-spacing/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-spacing/transform.ts (94%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-spacing/v9-scss-replace-spacing.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-text-emphasis/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/{v9-scss-replace-text-emphasis.ts => transform.ts} (94%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-scss-replace-z-index/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.test.ts
 rename polaris-migrator/src/migrations/v9-scss-replace-z-index/{v9-scss-replace-z-index.ts => transform.ts} (97%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-border/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-border/transform.ts (87%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/v9-styles-replace-custom-property-border.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-depth/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-depth/transform.ts (90%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/v9-styles-replace-custom-property-depth.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-font/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-font/transform.ts (82%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/v9-styles-replace-custom-property-font.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-legacy/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-legacy/transform.ts (87%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/v9-styles-replace-custom-property-legacy.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-motion/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.test.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-replace-custom-property-motion/transform.ts (81%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/v9-styles-replace-custom-property-motion.ts
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-tokenize-font/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.test.ts
 rename polaris-migrator/src/migrations/v9-styles-tokenize-font/{v9-styles-tokenize-font.ts => transform.ts} (97%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-tokenize-motion/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.test.ts
 rename polaris-migrator/src/migrations/v9-styles-tokenize-motion/{v9-styles-tokenize-motion.ts => transform.ts} (99%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-tokenize-shape/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.test.ts
 rename polaris-migrator/src/migrations/v9-styles-tokenize-shape/{v9-styles-tokenize-shape.ts => transform.ts} (97%)
 rename {polaris-codemods/src/codemods => polaris-migrator/src/migrations}/v9-styles-tokenize-space/tests/transform.test.ts (100%)
 delete mode 100644 polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.test.ts
 rename polaris-migrator/src/migrations/v9-styles-tokenize-space/{v9-styles-tokenize-space.ts => transform.ts} (98%)
 delete mode 100644 polaris-migrator/src/types.ts
 rename {polaris-codemods => polaris-migrator}/src/utilities/check.ts (100%)
 create mode 100644 polaris-migrator/src/utilities/constants.ts
 rename {polaris-codemods => polaris-migrator}/src/utilities/matches.ts (100%)
 delete mode 100644 polaris-migrator/src/utilities/matchesStringOrRegExp.ts
 delete mode 100644 polaris-migrator/src/utilities/testUtils.ts
 delete mode 100644 polaris-migrator/src/utilities/tests/sass.test.ts
 delete mode 100644 polaris-migrator/src/utilities/type-guards.ts
 create mode 100644 polaris-migrator/src/utilities/types.ts
 delete mode 100644 polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.scss.hbs
 delete mode 100644 polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.scss.hbs
 delete mode 100644 polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs
 delete mode 100644 polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs
 rename {polaris-codemods/templates/scss-codemod => polaris-migrator/templates/scss}/{{kebabCase transformName}}/tests/transform.input.scss.hbs (100%)
 rename {polaris-codemods/templates/scss-codemod => polaris-migrator/templates/scss}/{{kebabCase transformName}}/tests/transform.output.scss.hbs (100%)
 rename {polaris-codemods/templates/scss-codemod => polaris-migrator/templates/scss}/{{kebabCase transformName}}/tests/transform.test.ts.hbs (100%)
 rename {polaris-codemods/templates/scss-codemod => polaris-migrator/templates/scss}/{{kebabCase transformName}}/transform.ts.hbs (87%)
 delete mode 100644 polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.tsx.hbs
 delete mode 100644 polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.tsx.hbs
 delete mode 100644 polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs
 delete mode 100644 polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs
 rename {polaris-codemods/templates/typescript-codemod => polaris-migrator/templates/typescript}/{{kebabCase transformName}}/tests/transform.input.tsx.hbs (100%)
 rename {polaris-codemods/templates/typescript-codemod => polaris-migrator/templates/typescript}/{{kebabCase transformName}}/tests/transform.output.tsx.hbs (100%)
 rename {polaris-codemods/templates/typescript-codemod => polaris-migrator/templates/typescript}/{{kebabCase transformName}}/tests/transform.test.ts.hbs (100%)
 create mode 100644 polaris-migrator/templates/typescript/{{kebabCase transformName}}/transform.ts.hbs
 delete mode 100644 polaris.shopify.com/content/tools/polaris-cli.md

diff --git a/.changeset/friendly-bananas-crash.md b/.changeset/friendly-bananas-crash.md
new file mode 100644
index 00000000000..daa494da72d
--- /dev/null
+++ b/.changeset/friendly-bananas-crash.md
@@ -0,0 +1,11 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Removed the `@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor of using only the `@shopify/polaris-migrator`.
+
+Removing these packages will provide the following benefits:
+
+- Improve CI time by removing extra packages from our build, test, and lint workflows
+- Reduce confusion on where to add new migrations or update previous migrations
+- Clean up ESLint configs, reduce changelog entries, and remove package dependencies
diff --git a/.eslintrc.js b/.eslintrc.js
index d0f6a97af99..a82ba9093a0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -98,29 +98,6 @@ module.exports = {
   },
   overrides: [
     ...packages.map((packageDir) => noExtraneousDependenciesConfig(packageDir)),
-    {
-      files: ['polaris-cli/src/**/*.{ts,tsx}'],
-      rules: {
-        'import/no-default-export': 'off',
-      },
-    },
-    {
-      files: ['polaris-codemods/src/**/*.{ts,tsx}'],
-      rules: {
-        'import/no-default-export': 'off',
-        // Issue with inconsistent import order between node 14 and 16.
-        // This could be removed after dropping node 14 support.
-        'import/order': 'off',
-      },
-    },
-    {
-      files: ['polaris-codemods/src/**/tests/*.{ts,tsx}'],
-      rules: {
-        'import/no-extraneous-dependencies': 'off',
-        '@shopify/jsx-no-hardcoded-content': 'off',
-        '@typescript-eslint/ban-ts-comment': 'off',
-      },
-    },
     {
       files: ['polaris-migrator/src/**/*.{ts,tsx}'],
       rules: {
diff --git a/package.json b/package.json
index 9c73e778dde..eba26d55609 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,6 @@
   },
   "workspaces": {
     "packages": [
-      "polaris-cli",
-      "polaris-codemods",
       "polaris-tokens",
       "polaris-for-vscode",
       "polaris-icons",
diff --git a/polaris-cli/CHANGELOG.md b/polaris-cli/CHANGELOG.md
deleted file mode 100644
index 9c7a2bd4536..00000000000
--- a/polaris-cli/CHANGELOG.md
+++ /dev/null
@@ -1,477 +0,0 @@
-# @shopify/polaris-cli
-
-## 0.2.30
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.9
-
-## 0.2.29
-
-## 0.2.28
-
-## 0.2.27
-
-## 0.2.26
-
-## 0.2.25
-
-## 0.2.24
-
-## 0.2.23
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.8
-
-## 0.2.22
-
-## 0.2.21
-
-## 0.2.20
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.7
-
-## 0.2.19
-
-## 0.2.18
-
-## 0.2.17
-
-## 0.2.16
-
-## 0.2.15
-
-## 0.2.14
-
-## 0.2.13
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.6
-
-## 0.2.12
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.5
-
-## 0.2.11
-
-## 0.2.10
-
-## 0.2.9
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.4
-
-## 0.2.8
-
-## 0.2.7
-
-## 0.2.6
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.3
-
-## 0.2.5
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.2
-
-## 0.2.4
-
-## 0.2.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.19.1
-
-## 0.2.2
-
-## 0.2.1
-
-## 0.2.0
-
-### Minor Changes
-
-- [#7597](https://github.com/Shopify/polaris/pull/7597) [`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806) Thanks [@lgriffee](https://github.com/lgriffee)! - Removed support for multiple versions of TypeScript with `downlevel-dts`
-
-* [#7597](https://github.com/Shopify/polaris/pull/7597) [`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806) Thanks [@lgriffee](https://github.com/lgriffee)! - Removed support for NodeJS version 14 and set version 16 as minimum supported version
-
-### Patch Changes
-
-- Updated dependencies [[`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806)]:
-  - @shopify/polaris-migrator@0.19.0
-
-## 0.1.38
-
-## 0.1.37
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.18.2
-
-## 0.1.36
-
-## 0.1.35
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.18.1
-
-## 0.1.34
-
-### Patch Changes
-
-- Updated dependencies [[`c47996bca`](https://github.com/Shopify/polaris/commit/c47996bcaf9ea3ef99f38d4fc63cc2512e794822)]:
-  - @shopify/polaris-migrator@0.18.0
-
-## 0.1.33
-
-## 0.1.32
-
-## 0.1.31
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.17.4
-
-## 0.1.30
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.17.3
-
-## 0.1.29
-
-## 0.1.28
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.17.2
-
-## 0.1.27
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.17.1
-
-## 0.1.26
-
-## 0.1.25
-
-## 0.1.24
-
-### Patch Changes
-
-- Updated dependencies [[`f25f3c73c`](https://github.com/Shopify/polaris/commit/f25f3c73c9b902647206de45bc98983477acc312), [`dc09b21da`](https://github.com/Shopify/polaris/commit/dc09b21da9c7a4575973300a6f94b774e6f603d1)]:
-  - @shopify/polaris-migrator@0.17.0
-
-## 0.1.23
-
-## 0.1.22
-
-## 0.1.21
-
-## 0.1.20
-
-### Patch Changes
-
-- Updated dependencies [[`df0378cbc`](https://github.com/Shopify/polaris/commit/df0378cbcf926d901ee6dc4aab8a81535c873491)]:
-  - @shopify/polaris-migrator@0.16.1
-
-## 0.1.19
-
-## 0.1.18
-
-## 0.1.17
-
-### Patch Changes
-
-- Updated dependencies [[`cccd69848`](https://github.com/Shopify/polaris/commit/cccd698482ed4ff74e2ae4ab23ccc1c3e7c69412)]:
-  - @shopify/polaris-migrator@0.16.0
-
-## 0.1.16
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.15.1
-
-## 0.1.15
-
-## 0.1.14
-
-### Patch Changes
-
-- Updated dependencies [[`e21fd8d79`](https://github.com/Shopify/polaris/commit/e21fd8d79193665054cd3bcba43518ca9684bd22)]:
-  - @shopify/polaris-migrator@0.15.0
-
-## 0.1.13
-
-### Patch Changes
-
-- Updated dependencies [[`319479143`](https://github.com/Shopify/polaris/commit/319479143c9526ec461b20555ea83b5ec9aa1ecc)]:
-  - @shopify/polaris-migrator@0.14.0
-
-## 0.1.12
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.13.4
-
-## 0.1.11
-
-## 0.1.10
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.13.3
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [[`40ff13451`](https://github.com/Shopify/polaris/commit/40ff1345148a6f77ced213b92137269711925ae2)]:
-  - @shopify/polaris-migrator@0.13.2
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.13.1
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [[`8a15048e3`](https://github.com/Shopify/polaris/commit/8a15048e333a5e01ddf4352cf07b6d806bcc05f0)]:
-  - @shopify/polaris-migrator@0.13.0
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [[`f5afc40d2`](https://github.com/Shopify/polaris/commit/f5afc40d2bed7dd63d771f1f8ee87ceb7ff9d05b)]:
-  - @shopify/polaris-migrator@0.12.0
-
-## 0.1.5
-
-## 0.1.4
-
-## 0.1.3
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.11.4
-
-## 0.1.1
-
-## 0.1.0
-
-### Minor Changes
-
-- [#8223](https://github.com/Shopify/polaris/pull/8223) [`de7987c42`](https://github.com/Shopify/polaris/commit/de7987c426174b73d67e54eacf197da9490c76ec) Thanks [@samrose3](https://github.com/samrose3)! - Renamed Polaris CLI package and add docs to website
-
-## 0.0.32
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.11.3
-
-## 0.0.31
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.11.2
-
-## 0.0.30
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.11.1
-
-## 0.0.29
-
-## 0.0.28
-
-## 0.0.27
-
-### Patch Changes
-
-- Updated dependencies [[`64d57de02`](https://github.com/Shopify/polaris/commit/64d57de0277ff39fd54746f48d11b9841e62e32b)]:
-  - @shopify/polaris-migrator@0.11.0
-
-## 0.0.26
-
-### Patch Changes
-
-- Updated dependencies [[`fad3809ef`](https://github.com/Shopify/polaris/commit/fad3809ef39054b125c661f9b1bf6397b2b89fd0), [`56b0bc2dc`](https://github.com/Shopify/polaris/commit/56b0bc2dc414a085e935c3975a74410e7df530f1)]:
-  - @shopify/polaris-migrator@0.10.3
-
-## 0.0.25
-
-## 0.0.24
-
-## 0.0.23
-
-### Patch Changes
-
-- Updated dependencies [[`bfb537780`](https://github.com/Shopify/polaris/commit/bfb5377802f0d8e28c9cfafa9924f1849bcc0cce)]:
-  - @shopify/polaris-migrator@0.10.2
-
-## 0.0.22
-
-## 0.0.21
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @shopify/polaris-migrator@0.10.1
-
-## 0.0.20
-
-## 0.0.19
-
-### Patch Changes
-
-- Updated dependencies [[`22c4107b3`](https://github.com/Shopify/polaris/commit/22c4107b3c369eb68da31980d208c09b3fc4ba37), [`77736370e`](https://github.com/Shopify/polaris/commit/77736370eeddde18a2c11da102b88646f2263d99)]:
-  - @shopify/polaris-migrator@0.10.0
-
-## 0.0.18
-
-### Patch Changes
-
-- Updated dependencies [[`28220456f`](https://github.com/Shopify/polaris/commit/28220456f67bb4e6e2df19ceb334635ca2d0f3a5)]:
-  - @shopify/polaris-migrator@0.9.1
-
-## 0.0.17
-
-### Patch Changes
-
-- Updated dependencies [[`2ce4d38a2`](https://github.com/Shopify/polaris/commit/2ce4d38a27e654fffb01603539cff52b941776e1), [`c08780522`](https://github.com/Shopify/polaris/commit/c087805225c7c9cf625b821fdbca1f125f73f654), [`566dc20c2`](https://github.com/Shopify/polaris/commit/566dc20c2ca48d2e269fcc91f5693f872b464b55)]:
-  - @shopify/polaris-migrator@0.9.0
-
-## 0.0.16
-
-### Patch Changes
-
-- Updated dependencies [[`8859f5db5`](https://github.com/Shopify/polaris/commit/8859f5db505e06b3c99b0a87ad7e7801c3ce56c3), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`cf7badbd1`](https://github.com/Shopify/polaris/commit/cf7badbd1b8a9fffe2971dec9807f0ccdefdc971), [`8c1989618`](https://github.com/Shopify/polaris/commit/8c1989618d8dcbf10c3dbe529fa40918c222ce7c), [`3652eb901`](https://github.com/Shopify/polaris/commit/3652eb901812b7418f1010d818c07e307a49d83b), [`1f2ec8bfe`](https://github.com/Shopify/polaris/commit/1f2ec8bfeba3250f6011efcf3832d022aff62990), [`ba576498d`](https://github.com/Shopify/polaris/commit/ba576498d8fb19f01a523281389d038d42e79c3a)]:
-  - @shopify/polaris-migrator@0.8.0
-
-## 0.0.15
-
-### Patch Changes
-
-- Updated dependencies [[`85c0c3290`](https://github.com/Shopify/polaris/commit/85c0c329003c0d234f339164c0d2940aff4f6b26), [`141746b5b`](https://github.com/Shopify/polaris/commit/141746b5b4dc2f99b0c729883e98f4210f5a16c0)]:
-  - @shopify/polaris-migrator@0.7.0
-
-## 0.0.14
-
-## 0.0.13
-
-## 0.0.12
-
-### Patch Changes
-
-- Updated dependencies [[`dc2990acf`](https://github.com/Shopify/polaris/commit/dc2990acf1071c2bae352bce6fc5a28092b9f52f), [`8fb215836`](https://github.com/Shopify/polaris/commit/8fb2158368945ad1e58b6e3ff74567b80b652757), [`60191f353`](https://github.com/Shopify/polaris/commit/60191f353d1ef86f1eef167d36c0b040f21b72d6), [`6d82e8965`](https://github.com/Shopify/polaris/commit/6d82e896587bacec60471e06fa81b2c61518551f), [`0591db26a`](https://github.com/Shopify/polaris/commit/0591db26a4d13a5640245e433f61f77bf1be88d4), [`699b70713`](https://github.com/Shopify/polaris/commit/699b707132bfe486785955084961bcb91753fb2a), [`8194e174a`](https://github.com/Shopify/polaris/commit/8194e174ab45e1995f693e786d6925ab79717c1c), [`933a9d71b`](https://github.com/Shopify/polaris/commit/933a9d71b71b172657bbaf050cfc8793e39a49c0), [`a0fa96ed4`](https://github.com/Shopify/polaris/commit/a0fa96ed4eaf53652feb5ee0d79aeec1c84f5d12)]:
-  - @shopify/polaris-migrator@0.6.0
-
-## 0.0.11
-
-### Patch Changes
-
-- Updated dependencies [[`56c82ee8d`](https://github.com/Shopify/polaris/commit/56c82ee8d15a58ef5e68b04968b126b93aa8dec9)]:
-  - @shopify/polaris-migrator@0.5.0
-
-## 0.0.10
-
-### Patch Changes
-
-- Updated dependencies [[`57e5f95c1`](https://github.com/Shopify/polaris/commit/57e5f95c1e402fda3202babfdce25b131b0b9165)]:
-  - @shopify/polaris-migrator@0.4.1
-
-## 0.0.9
-
-## 0.0.8
-
-### Patch Changes
-
-- Updated dependencies [[`fbf2f8832`](https://github.com/Shopify/polaris/commit/fbf2f88320ad6c5767c37d18d76bfa82babf71cb), [`b31f51f25`](https://github.com/Shopify/polaris/commit/b31f51f259fefd8b119c5242e2ab1528c3a6cff8)]:
-  - @shopify/polaris-migrator@0.4.0
-
-## 0.0.7
-
-### Patch Changes
-
-- Updated dependencies [[`5a1f45f7a`](https://github.com/Shopify/polaris/commit/5a1f45f7a29cf6994394d7fab6f007f850d956ad), [`c958899c7`](https://github.com/Shopify/polaris/commit/c958899c73829bf1c1fa512946ffa3db7f06a2d0)]:
-  - @shopify/polaris-migrator@0.3.0
-
-## 0.0.6
-
-## 0.0.5
-
-### Patch Changes
-
-- Updated dependencies [[`963581358`](https://github.com/Shopify/polaris/commit/9635813582030159f4c102242420fde3a6364808)]:
-  - @shopify/polaris-migrator@0.2.1
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [[`4cbf8f466`](https://github.com/Shopify/polaris/commit/4cbf8f4660242a9bd2a2dd05dbeece212658a420), [`a5fd48bf4`](https://github.com/Shopify/polaris/commit/a5fd48bf4ba52a9675154d386e6365ca728554b7)]:
-  - @shopify/polaris-migrator@0.2.0
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [[`c7afbd498`](https://github.com/Shopify/polaris/commit/c7afbd4984048ddc7438c7cef9e50acd1d174db1), [`2fec9611d`](https://github.com/Shopify/polaris/commit/2fec9611dec0a147be0be0410e955e92c025edc0)]:
-  - @shopify/polaris-migrator@0.1.2
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [[`77d7b5ae3`](https://github.com/Shopify/polaris/commit/77d7b5ae3ff94d29133ff132316cb779a635b047)]:
-  - @shopify/polaris-migrator@0.1.1
-
-## 0.0.1
-
-### Patch Changes
-
-- [#7166](https://github.com/Shopify/polaris/pull/7166) [`1a3d54dc3`](https://github.com/Shopify/polaris/commit/1a3d54dc37d35a4f437aaf790b2201160d1a719d) Thanks [@samrose3](https://github.com/samrose3)! - Initial release 🚀
-
-- Updated dependencies [[`17d5bd0e8`](https://github.com/Shopify/polaris/commit/17d5bd0e8a0ba8adbaf31992e15894e2afa23451)]:
-  - @shopify/polaris-migrator@0.1.0
diff --git a/polaris-cli/README.md b/polaris-cli/README.md
deleted file mode 100644
index 038446c2899..00000000000
--- a/polaris-cli/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# [Polaris CLI](https://polaris.shopify.com/polaris-cli)
-
-[![npm version](https://img.shields.io/npm/v/@shopify/polaris-cli.svg?style=flat)](https://www.npmjs.com/package/@shopify/polaris-cli)
-
-[Shopify CLI][] plugin for managing Shopify Apps using [Polaris][].
-
-[Polaris CLI documentation](https://polaris.shopify.com/tools/polaris-cli)
-
-[shopify cli]: https://shopify.dev/apps/tools/cli/commands
-[polaris]: https://polaris.shopify.com
diff --git a/polaris-cli/package.json b/polaris-cli/package.json
deleted file mode 100644
index a764525bb47..00000000000
--- a/polaris-cli/package.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-  "name": "@shopify/polaris-cli",
-  "version": "0.2.30",
-  "description": "Commands for building Shopify Apps with Polaris",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "author": "Shopify <dev@shopify.com>",
-  "homepage": "https://polaris.shopify.com/tools/cli",
-  "repository": "https://github.com/Shopify/polaris",
-  "bugs": {
-    "url": "https://github.com/Shopify/polaris/issues"
-  },
-  "publishConfig": {
-    "access": "public",
-    "@shopify:registry": "https://registry.npmjs.org"
-  },
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsc -b",
-    "lint": "TIMING=1 eslint --cache .",
-    "clean": "rm -rf .turbo node_modules dist"
-  },
-  "dependencies": {
-    "@oclif/core": "^1.13.10",
-    "@shopify/polaris-migrator": "^0.19.9"
-  },
-  "engine-strict": true,
-  "engines": {
-    "node": "^16.17.0 || >=18.12.0"
-  },
-  "os": [
-    "darwin",
-    "linux",
-    "win32"
-  ],
-  "oclif": {
-    "commands": "dist/commands",
-    "topicSeparator": " ",
-    "topics": {
-      "polaris": {
-        "description": "Commands for building Shopify Apps with Polaris"
-      }
-    }
-  }
-}
diff --git a/polaris-cli/src/commands/polaris/migrate.ts b/polaris-cli/src/commands/polaris/migrate.ts
deleted file mode 100644
index 2c93c10f6cc..00000000000
--- a/polaris-cli/src/commands/polaris/migrate.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {Command, Flags} from '@oclif/core';
-import {migrate, cliConfig} from '@shopify/polaris-migrator';
-
-export default class Migrate extends Command {
-  static description = cliConfig.description;
-  static args = cliConfig.args;
-  static flags = Object.fromEntries(
-    Object.entries(cliConfig.flags).map(([name, flag]) => [
-      name,
-      Flags[flag.type]({
-        char: flag.alias,
-        description: flag.description,
-        env: `SHOPIFY_FLAG_${name.toUpperCase()}`,
-      }),
-    ]),
-  );
-
-  async run() {
-    const {args, flags} = await this.parse(Migrate);
-    const {migration, path} = args;
-    await migrate(migration, path, {
-      dry: flags.dry,
-      print: flags.print,
-      force: flags.force,
-    });
-  }
-}
diff --git a/polaris-cli/tsconfig.json b/polaris-cli/tsconfig.json
deleted file mode 100644
index 0daad4187eb..00000000000
--- a/polaris-cli/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "@shopify/typescript-configs/node-base",
-  "compilerOptions": {
-    "module": "es2020",
-    "target": "es2020",
-    "outDir": "dist",
-    "rootDir": "src"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/polaris-codemods/CHANGELOG.md b/polaris-codemods/CHANGELOG.md
deleted file mode 100644
index 0f3671763ec..00000000000
--- a/polaris-codemods/CHANGELOG.md
+++ /dev/null
@@ -1,145 +0,0 @@
-# @shopify/polaris-codemods
-
-## 0.1.12
-
-### Patch Changes
-
-- Updated dependencies [[`a3da87e2e`](https://github.com/Shopify/polaris/commit/a3da87e2e52b7e4c3fc421bbe4122e763c39c1a1), [`36e4ee8af`](https://github.com/Shopify/polaris/commit/36e4ee8afbc7dbec6e65225384629afa83f64a75)]:
-  - @shopify/stylelint-polaris@14.0.0
-  - @shopify/polaris-tokens@7.5.3
-
-## 0.1.11
-
-### Patch Changes
-
-- Updated dependencies [[`5b85401fe`](https://github.com/Shopify/polaris/commit/5b85401fe56ee07f107358548669ed8f1d6ecceb), [`799819b68`](https://github.com/Shopify/polaris/commit/799819b687a319328bf36917ba79c6324197aba9)]:
-  - @shopify/polaris-tokens@7.5.2
-  - @shopify/stylelint-polaris@13.0.8
-
-## 0.1.10
-
-### Patch Changes
-
-- Updated dependencies [[`bed52546f`](https://github.com/Shopify/polaris/commit/bed52546f3852fea8f3c98505846a6f553dbd3c1)]:
-  - @shopify/polaris-tokens@7.5.1
-  - @shopify/stylelint-polaris@13.0.7
-
-## 0.1.9
-
-### Patch Changes
-
-- Updated dependencies [[`6d4baffde`](https://github.com/Shopify/polaris/commit/6d4baffdeb63d4cb1265b201b8490677d25e8c5e), [`3536e3aa0`](https://github.com/Shopify/polaris/commit/3536e3aa006896ae31c9148832230322ceaa823d), [`58406fd98`](https://github.com/Shopify/polaris/commit/58406fd98db3561fb4e3f55fc44f51202a98024f), [`26053bd3f`](https://github.com/Shopify/polaris/commit/26053bd3f13920ff30ff29c78d55b000b017cef2)]:
-  - @shopify/polaris-tokens@7.5.0
-  - @shopify/stylelint-polaris@13.0.6
-
-## 0.1.8
-
-### Patch Changes
-
-- Updated dependencies [[`af6337d60`](https://github.com/Shopify/polaris/commit/af6337d60e18cfd8adcc99aa425e1cc697b41ca0)]:
-  - @shopify/polaris-tokens@7.4.0
-  - @shopify/stylelint-polaris@13.0.5
-
-## 0.1.7
-
-### Patch Changes
-
-- Updated dependencies [[`5065fc199`](https://github.com/Shopify/polaris/commit/5065fc1991518507607d81d1f1b667c26773cf4d)]:
-  - @shopify/polaris-tokens@7.3.1
-  - @shopify/stylelint-polaris@13.0.4
-
-## 0.1.6
-
-### Patch Changes
-
-- Updated dependencies [[`b73666e63`](https://github.com/Shopify/polaris/commit/b73666e63c5ec5d0f47ecfb66683d8de0f79ab97), [`f9ceb4d02`](https://github.com/Shopify/polaris/commit/f9ceb4d0224b613b0ba1680bcb575714b1ad8300), [`84c015547`](https://github.com/Shopify/polaris/commit/84c015547c3b85938f326604216d819e1f31f6ab), [`bc141cf54`](https://github.com/Shopify/polaris/commit/bc141cf54497deb488f3b8e589e94741f06efd54)]:
-  - @shopify/polaris-tokens@7.3.0
-  - @shopify/stylelint-polaris@13.0.3
-
-## 0.1.5
-
-### Patch Changes
-
-- Updated dependencies [[`91ebe5792`](https://github.com/Shopify/polaris/commit/91ebe57922d26e3acb61047c79d7a157952d5486)]:
-  - @shopify/polaris-tokens@7.2.0
-  - @shopify/stylelint-polaris@13.0.2
-
-## 0.1.4
-
-### Patch Changes
-
-- Updated dependencies [[`9c9e80ed1`](https://github.com/Shopify/polaris/commit/9c9e80ed132715e1c91ee2dc0b9fcc13adb3afea)]:
-  - @shopify/polaris-tokens@7.1.0
-  - @shopify/stylelint-polaris@13.0.1
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [[`9e1350e22`](https://github.com/Shopify/polaris/commit/9e1350e22f286ead5a735e0c4dc6623f530f9806)]:
-  - @shopify/polaris-tokens@7.0.0
-  - @shopify/stylelint-polaris@13.0.0
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [[`5a9b011d1`](https://github.com/Shopify/polaris/commit/5a9b011d14a0cc575f4fd34d9e4d8fcfeb0cd597), [`6ae3295e7`](https://github.com/Shopify/polaris/commit/6ae3295e78518112e611185e7a8f9b6287bd985a)]:
-  - @shopify/polaris-tokens@6.14.0
-  - @shopify/stylelint-polaris@12.0.1
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [[`a64e38948`](https://github.com/Shopify/polaris/commit/a64e3894834f7507834ed21736c932d44f10ff43)]:
-  - @shopify/stylelint-polaris@12.0.0
-
-## 0.1.0
-
-### Minor Changes
-
-- [#9068](https://github.com/Shopify/polaris/pull/9068) [`c47996bca`](https://github.com/Shopify/polaris/commit/c47996bcaf9ea3ef99f38d4fc63cc2512e794822) Thanks [@lgriffee](https://github.com/lgriffee)! - Created a migration to replace deprecated `motion` custom properties in `@shopify/polaris` v11.0.0
-
-### Patch Changes
-
-- Updated dependencies [[`11cd5f674`](https://github.com/Shopify/polaris/commit/11cd5f67440bec59ffd3983fa02a7b65842063e6), [`acf89f6a9`](https://github.com/Shopify/polaris/commit/acf89f6a9fb58f557a57e92e4e54a3935c85f50c)]:
-  - @shopify/stylelint-polaris@11.0.0
-  - @shopify/polaris-tokens@6.13.0
-
-## 0.0.5
-
-### Patch Changes
-
-- Updated dependencies [[`bcdbaad00`](https://github.com/Shopify/polaris/commit/bcdbaad009bb0606544dff19b5b5fcb37ddc6f94)]:
-  - @shopify/polaris-tokens@6.12.0
-  - @shopify/stylelint-polaris@10.1.1
-
-## 0.0.4
-
-### Patch Changes
-
-- Updated dependencies [[`a47e9084d`](https://github.com/Shopify/polaris/commit/a47e9084dcbb0b9870bc58dd2214e82657efe8ad), [`cbff4a131`](https://github.com/Shopify/polaris/commit/cbff4a13101abed155f0a272b2b26493d7d20017)]:
-  - @shopify/polaris-tokens@6.11.0
-  - @shopify/stylelint-polaris@10.1.0
-
-## 0.0.3
-
-### Patch Changes
-
-- Updated dependencies [[`f1a3ad756`](https://github.com/Shopify/polaris/commit/f1a3ad756d73bf249583bdb47523a4b229a0c7cb), [`80eb3ac55`](https://github.com/Shopify/polaris/commit/80eb3ac55c076eb336620cac8dc08cd212524afc), [`dbe68efb4`](https://github.com/Shopify/polaris/commit/dbe68efb40fcd6261aee98b8784e0fca696c5b1b)]:
-  - @shopify/stylelint-polaris@10.0.0
-
-## 0.0.2
-
-### Patch Changes
-
-- Updated dependencies [[`247f5eea8`](https://github.com/Shopify/polaris/commit/247f5eea859b3ab348dcb18c568f18d8d859140e)]:
-  - @shopify/polaris-tokens@6.10.0
-  - @shopify/stylelint-polaris@9.0.3
-
-## 0.0.1
-
-### Patch Changes
-
-- [#8713](https://github.com/Shopify/polaris/pull/8713) [`c8bf360f6`](https://github.com/Shopify/polaris/commit/c8bf360f6a72d29d834cf19bf36aceb4e1153c0f) Thanks [@samrose3](https://github.com/samrose3)! - Port Polaris migrations to new codemods package
diff --git a/polaris-codemods/jest.config.js b/polaris-codemods/jest.config.js
deleted file mode 100644
index b1738c391e5..00000000000
--- a/polaris-codemods/jest.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  transform: {
-    '\\.(js|tsx?)$': [
-      'babel-jest',
-      {targets: 'current node', envName: 'test', rootMode: 'upward'},
-    ],
-  },
-};
diff --git a/polaris-codemods/package.json b/polaris-codemods/package.json
deleted file mode 100644
index b5d2bdc74ca..00000000000
--- a/polaris-codemods/package.json
+++ /dev/null
@@ -1,52 +0,0 @@
-{
-  "name": "@shopify/polaris-codemods",
-  "description": "Codemods for Polaris design system",
-  "version": "0.1.12",
-  "private": false,
-  "license": "MIT",
-  "author": "Shopify <dev@shopify.com>",
-  "repository": "https://github.com/Shopify/polaris",
-  "bugs": {
-    "url": "https://github.com/Shopify/polaris/issues"
-  },
-  "publishConfig": {
-    "access": "public",
-    "@shopify:registry": "https://registry.npmjs.org"
-  },
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "shopify",
-    "polaris",
-    "codemods"
-  ],
-  "main": "codeshift.config.js",
-  "scripts": {
-    "build": "tsc --build",
-    "lint": "TIMING=1 eslint --cache .",
-    "test": "jest",
-    "clean": "rm -f .turbo node_modules dist *.tsbuildinfo",
-    "generate": "plop"
-  },
-  "dependencies": {
-    "@shopify/polaris-tokens": "^7.5.3",
-    "@shopify/stylelint-polaris": "^14.0.0",
-    "postcss": "^8.4.21",
-    "postcss-scss": "^4.0.6",
-    "postcss-value-parser": "^4.2.0",
-    "stylelint": "^14.15.0"
-  },
-  "peerDependencies": {
-    "jscodeshift": "^0.13.1"
-  },
-  "devDependencies": {
-    "@shopify/polaris": "^11.12.0",
-    "@types/jscodeshift": "^0.11.6",
-    "jscodeshift": "^0.13.1",
-    "plop": "^3.1.2",
-    "plop-dir": "^0.1.0",
-    "prettier": "^2.8.4",
-    "typescript": "^4.3.5"
-  }
-}
diff --git a/polaris-codemods/plopfile.mjs b/polaris-codemods/plopfile.mjs
deleted file mode 100644
index 14824ab8c03..00000000000
--- a/polaris-codemods/plopfile.mjs
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as fs from 'fs';
-import * as url from 'url';
-import * as path from 'path';
-
-import {plopDir} from 'plop-dir';
-
-const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
-
-/** @param {import('plop').NodePlopAPI} plop */
-// eslint-disable-next-line import/no-default-export
-export default async function run(plop) {
-  plop.setGenerator(
-    'scss-codemod',
-    await plopDir({
-      plop,
-      templateDir: path.join(__dirname, './templates/scss-codemod'),
-      outputDir: path.join(__dirname, './src/codemods'),
-      prompts: [
-        {
-          name: 'transformName',
-          message: 'Name of the codemod',
-          suffix: ' (e.g. v9-scss-replace-function)',
-          validate: (input) => validateTransformName(plop, input),
-        },
-      ],
-    }),
-  );
-
-  plop.setGenerator(
-    'typescript-codemod',
-    await plopDir({
-      plop,
-      templateDir: path.join(__dirname, './templates/typescript-codemod'),
-      outputDir: path.join(__dirname, './src/codemods'),
-      prompts: [
-        {
-          name: 'transformName',
-          message: 'Name of the codemod',
-          suffix: ' (e.g. v9-component-replace-prop)',
-          validate: (input) => validateTransformName(plop, input),
-        },
-      ],
-    }),
-  );
-}
-
-function validateTransformName(plop, input) {
-  const transformName = plop.renderString('{{kebabCase input}}', {
-    input,
-  });
-
-  return (
-    !fs.existsSync(path.join(__dirname, `./src/codemods/${transformName}`)) ||
-    'That codemod name already exists'
-  );
-}
diff --git a/polaris-codemods/src/codemods/10.0.0/transform.ts b/polaris-codemods/src/codemods/10.0.0/transform.ts
deleted file mode 100644
index 4cf2862fc14..00000000000
--- a/polaris-codemods/src/codemods/10.0.0/transform.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import path from 'node:path';
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-
-import {typescript} from '../../utilities/constants';
-import type {TransformInfoOptions} from '../../utilities/types';
-import * as v10ReactReplaceTextComponents from '../v10-react-replace-text-components/transform';
-
-const transforms = [v10ReactReplaceTextComponents];
-
-const defaultExtensions = typescript.extensions;
-
-export default function transformer(
-  fileInfo: FileInfo,
-  api: API,
-  options: Options,
-) {
-  return transforms.reduce(
-    (source, {default: transform, extensions = defaultExtensions}) => {
-      const extname = path.extname(fileInfo.path);
-      if (!extensions.includes(extname)) return fileInfo.source;
-      return transform({...fileInfo, source}, api, options);
-    },
-    fileInfo.source,
-  );
-}
-
-export const extensions = Array.from(
-  new Set([...v10ReactReplaceTextComponents.extensions]),
-);
-export const options: TransformInfoOptions = {
-  ...v10ReactReplaceTextComponents.options,
-};
diff --git a/polaris-codemods/src/codemods/11.0.0/transform.ts b/polaris-codemods/src/codemods/11.0.0/transform.ts
deleted file mode 100644
index c554b0e6935..00000000000
--- a/polaris-codemods/src/codemods/11.0.0/transform.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import path from 'node:path';
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-
-import {scss, typescript} from '../../utilities/constants';
-import type {TransformInfoOptions} from '../../utilities/types';
-import * as v11ReactUpdatePageBreadcrumbs from '../v11-react-update-page-breadcrumbs/transform';
-import * as v11StylesReplaceCustomPropertyBorder from '../v11-styles-replace-custom-property-border/transform';
-import * as v11StylesReplaceCustomPropertyColor from '../v11-styles-replace-custom-property-color/transform';
-import * as v11StylesReplaceCustomPropertyDepth from '../v11-styles-replace-custom-property-depth/transform';
-import * as v11StylesReplaceCustomPropertyLegacy from '../v11-styles-replace-custom-property-legacy/transform';
-import * as v11StylesReplaceCustomPropertyMotion from '../v11-styles-replace-custom-property-motion/transform';
-import * as v11StylesReplaceCustomPropertyZIndex from '../v11-styles-replace-custom-property-z-index/transform';
-
-const transforms = [
-  v11ReactUpdatePageBreadcrumbs,
-  v11StylesReplaceCustomPropertyBorder,
-  v11StylesReplaceCustomPropertyColor,
-  v11StylesReplaceCustomPropertyDepth,
-  v11StylesReplaceCustomPropertyLegacy,
-  v11StylesReplaceCustomPropertyMotion,
-  v11StylesReplaceCustomPropertyZIndex,
-];
-
-const defaultExtensions = [...typescript.extensions, ...scss.extensions];
-
-export default function transformer(
-  fileInfo: FileInfo,
-  api: API,
-  options: Options,
-) {
-  return transforms.reduce(
-    (source, {default: transform, extensions = defaultExtensions}) => {
-      const extname = path.extname(fileInfo.path);
-      if (!extensions.includes(extname)) return fileInfo.source;
-      return transform({...fileInfo, source}, api, options);
-    },
-    fileInfo.source,
-  );
-}
-
-export const extensions = Array.from(
-  new Set([
-    ...v11ReactUpdatePageBreadcrumbs.extensions,
-    ...v11StylesReplaceCustomPropertyBorder.extensions,
-    ...v11StylesReplaceCustomPropertyColor.extensions,
-    ...v11StylesReplaceCustomPropertyDepth.extensions,
-    ...v11StylesReplaceCustomPropertyLegacy.extensions,
-    ...v11StylesReplaceCustomPropertyMotion.extensions,
-    ...v11StylesReplaceCustomPropertyZIndex.extensions,
-  ]),
-);
-export const options: TransformInfoOptions = {};
diff --git a/polaris-codemods/src/codemods/9.0.0/transform.ts b/polaris-codemods/src/codemods/9.0.0/transform.ts
deleted file mode 100644
index 173f2bc7d18..00000000000
--- a/polaris-codemods/src/codemods/9.0.0/transform.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import path from 'node:path';
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-
-import * as v9ScssReplaceBorder from '../v9-scss-replace-border/transform';
-import * as v9ScssReplaceBorderRadius from '../v9-scss-replace-border-radius/transform';
-import * as v9ScssReplaceBorderWidth from '../v9-scss-replace-border-width/transform';
-import * as v9ScssReplaceBreakpoints from '../v9-scss-replace-breakpoints/transform';
-import * as v9ScssReplaceColor from '../v9-scss-replace-color/transform';
-import * as v9ScssReplaceDuration from '../v9-scss-replace-duration/transform';
-import * as v9ScssReplaceEasing from '../v9-scss-replace-easing/transform';
-import * as v9ScssReplaceFontFamily from '../v9-scss-replace-font-family/transform';
-import * as v9ScssReplaceFontSize from '../v9-scss-replace-font-size/transform';
-import * as v9ScssReplaceLineHeight from '../v9-scss-replace-line-height/transform';
-import * as v9ScssReplaceSpacing from '../v9-scss-replace-spacing/transform';
-import * as v9ScssReplaceTextEmphasis from '../v9-scss-replace-text-emphasis/transform';
-import * as v9ScssReplaceZIndex from '../v9-scss-replace-z-index/transform';
-import {typescript} from '../../utilities/constants';
-
-const transforms = [
-  v9ScssReplaceBorder,
-  v9ScssReplaceBorderRadius,
-  v9ScssReplaceBorderWidth,
-  v9ScssReplaceBreakpoints,
-  v9ScssReplaceColor,
-  v9ScssReplaceDuration,
-  v9ScssReplaceEasing,
-  v9ScssReplaceFontFamily,
-  v9ScssReplaceFontSize,
-  v9ScssReplaceLineHeight,
-  v9ScssReplaceSpacing,
-  v9ScssReplaceTextEmphasis,
-  v9ScssReplaceZIndex,
-];
-
-const defaultExtensions = typescript.extensions;
-
-export default function transformer(
-  fileInfo: FileInfo,
-  api: API,
-  options: Options,
-) {
-  return transforms.reduce(
-    (source, {default: transform, extensions = defaultExtensions}) => {
-      const extname = path.extname(fileInfo.path).replace('.', '');
-      if (!extensions.includes(extname)) return fileInfo.source;
-      return transform({...fileInfo, source}, api, options);
-    },
-    fileInfo.source,
-  );
-}
-
-export const extensions = Array.from(
-  new Set([
-    ...v9ScssReplaceBorder.extensions,
-    ...v9ScssReplaceBorderRadius.extensions,
-    ...v9ScssReplaceBorderWidth.extensions,
-    ...v9ScssReplaceBreakpoints.extensions,
-    ...v9ScssReplaceColor.extensions,
-    ...v9ScssReplaceDuration.extensions,
-    ...v9ScssReplaceEasing.extensions,
-    ...v9ScssReplaceFontFamily.extensions,
-    ...v9ScssReplaceFontSize.extensions,
-    ...v9ScssReplaceLineHeight.extensions,
-    ...v9ScssReplaceSpacing.extensions,
-    ...v9ScssReplaceTextEmphasis.extensions,
-    ...v9ScssReplaceZIndex.extensions,
-  ]),
-);
-export const options = {
-  ...v9ScssReplaceBorder.options,
-  ...v9ScssReplaceBorderRadius.options,
-  ...v9ScssReplaceBorderWidth.options,
-  ...v9ScssReplaceBreakpoints.options,
-  ...v9ScssReplaceColor.options,
-  ...v9ScssReplaceDuration.options,
-  ...v9ScssReplaceEasing.options,
-  ...v9ScssReplaceFontFamily.options,
-  ...v9ScssReplaceFontSize.options,
-  ...v9ScssReplaceLineHeight.options,
-  ...v9ScssReplaceSpacing.options,
-  ...v9ScssReplaceTextEmphasis.options,
-  ...v9ScssReplaceZIndex.options,
-};
diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx b/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
deleted file mode 100644
index 4be474e3865..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
-
-export function App() {
-  return (
-    <MyComponent prop="value">
-      Hello
-      <Child prop="value" />
-    </MyComponent>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx b/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
deleted file mode 100644
index 9305ddb375b..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
-
-export function App() {
-  return (
-    <MyComponent newProp="value">
-      Hello
-      <Child prop="value" />
-    </MyComponent>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts b/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts
deleted file mode 100644
index 3785fc650ed..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component-prop/transform.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
-
-import {typescript} from '../../utilities/constants';
-import {renameProps} from '../../utilities/jsx';
-
-export default function transformer(
-  file: FileInfo,
-  {jscodeshift: j}: API,
-  options: Options,
-) {
-  if (!options.componentName || !options.from || !options.to) {
-    throw new Error('Missing required options: componentName, from, to');
-  }
-
-  const source = j(file.source);
-  const componentName = options.componentName;
-  const props = {[options.from]: options.to};
-
-  renameProps(j, source, componentName, props);
-
-  return source.toSource();
-}
-
-export const extensions = typescript.extensions;
-export const options = {
-  relative: typescript.options.relative,
-  componentName: {
-    name: 'componentName',
-    type: 'string',
-    description: 'The JSX element to target.',
-    required: true,
-  },
-  from: {
-    name: 'from',
-    type: 'string',
-    description: 'The target prop to rename.',
-    required: true,
-  },
-  to: {
-    name: 'to',
-    type: 'string',
-    description: 'The desired new prop name.',
-    required: true,
-  },
-};
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx
deleted file mode 100644
index 278211d8fdf..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {Card} from '@shopify/polaris';
-
-const MyCard = Card;
-
-export function App() {
-  return (
-    <>
-      <div className={styles.Card}>hello</div>
-      <Card>hello</Card>
-      <MyCard>hello</MyCard>
-      <Card content="hello" />
-      <Card>
-        <Card.Header title="hello" />
-        <Card.Header>hello</Card.Header>
-        <Card.Section>hello</Card.Section>
-        <Card.Subsection>world</Card.Subsection>
-      </Card>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx
deleted file mode 100644
index 137f73424ef..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-component.output.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import {LegacyCard} from '@shopify/polaris';
-
-const MyCard = LegacyCard;
-
-export function App() {
-  return (
-    <>
-      <div className={styles.Card}>hello</div>
-      <LegacyCard>hello</LegacyCard>
-      <MyCard>hello</MyCard>
-      <LegacyCard content="hello" />
-      <LegacyCard>
-        <LegacyCard.Header title="hello" />
-        <LegacyCard.Header>hello</LegacyCard.Header>
-        <LegacyCard.Section>hello</LegacyCard.Section>
-        <LegacyCard.Subsection>world</LegacyCard.Subsection>
-      </LegacyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx
deleted file mode 100644
index 60830ff037f..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.input.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import {Stack} from '@shopify/polaris';
-
-const MyStack = Stack;
-
-export function App() {
-  return (
-    <>
-      <div className={styles.Stack}>hello</div>
-      <Stack>hello</Stack>
-      <MyStack>hello</MyStack>
-      <Stack>
-        <Stack.Header>hello</Stack.Header>
-        <Stack.Section>hello</Stack.Section>
-        <Stack.Subsection>world</Stack.Subsection>
-      </Stack>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx
deleted file mode 100644
index ab49d74d730..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/react-rename-stack-component.output.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import {LegacyStack} from '@shopify/polaris';
-
-const MyStack = LegacyStack;
-
-export function App() {
-  return (
-    <>
-      <div className={styles.Stack}>hello</div>
-      <LegacyStack>hello</LegacyStack>
-      <MyStack>hello</MyStack>
-      <LegacyStack>
-        <LegacyStack.Header>hello</LegacyStack.Header>
-        <LegacyStack.Section>hello</LegacyStack.Section>
-        <LegacyStack.Subsection>world</LegacyStack.Subsection>
-      </LegacyStack>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx
deleted file mode 100644
index d80b696d34e..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.input.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import type {CardProps} from '@shopify/polaris';
-
-export interface MyCardProps extends CardProps {}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx
deleted file mode 100644
index bd6065aee0c..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/rename-prop-types.output.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import type {LegacyCardProps} from '@shopify/polaris';
-
-export interface MyCardProps extends LegacyCardProps {}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx
deleted file mode 100644
index 3b0a83177a4..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.input.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Card as PolarisCard} from '@shopify/polaris';
-
-const MyCard = PolarisCard;
-export const LegacyCard = () => null;
-
-export function App() {
-  return (
-    <>
-      <PolarisCard>hello</PolarisCard>
-      <MyCard>hello</MyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx
deleted file mode 100644
index 535ef3cf617..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-identifier.output.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import {Card as PolarisCard} from '@shopify/polaris';
-
-const MyCard = PolarisCard;
-export const /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  LegacyCard = () => null;
-
-export function App() {
-  return (
-    <>
-      <PolarisCard>hello</PolarisCard>
-      <MyCard>hello</MyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx
deleted file mode 100644
index f13016e992a..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.input.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import {Card as PolarisCard} from '@shopify/polaris';
-
-const MyCard = PolarisCard;
-const Card = () => null;
-const LegacyCard = () => null;
-
-export function App() {
-  return (
-    <>
-      <PolarisCard>hello</PolarisCard>
-      <MyCard>hello</MyCard>
-      <Card>local</Card>
-      <LegacyCard>legacy</LegacyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx
deleted file mode 100644
index fdd21ea489b..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-available-jsx.output.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {Card as PolarisCard} from '@shopify/polaris';
-
-const MyCard = PolarisCard;
-const Card = () => null;
-const LegacyCard = () => null;
-
-export function App() {
-  return (
-    <>
-      <PolarisCard>hello</PolarisCard>
-      <MyCard>hello</MyCard>
-      <Card>local</Card>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <LegacyCard>legacy</LegacyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx
deleted file mode 100644
index db747809228..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.input.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import {Card as PolarisCard} from '@shopify/polaris';
-
-const MyCard = PolarisCard;
-
-export function App() {
-  return (
-    <>
-      <PolarisCard>hello</PolarisCard>
-      <MyCard>hello</MyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx b/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx
deleted file mode 100644
index 7e04fd4be1c..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/tests/renamed-import.output.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import {LegacyCard} from '@shopify/polaris';
-
-const MyCard = LegacyCard;
-
-export function App() {
-  return (
-    <>
-      <LegacyCard>hello</LegacyCard>
-      <MyCard>hello</MyCard>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/transform.ts b/polaris-codemods/src/codemods/react-rename-component/transform.ts
deleted file mode 100644
index 30dff6a2647..00000000000
--- a/polaris-codemods/src/codemods/react-rename-component/transform.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
-
-import {typescript, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
-import {
-  getImportSpecifierName,
-  hasImportDeclaration,
-  hasImportSpecifier,
-  hasImportSpecifiers,
-  insertImportDeclaration,
-  insertImportSpecifier,
-  normalizeImportSourcePaths,
-  removeImportDeclaration,
-  removeImportSpecifier,
-} from '../../utilities/imports';
-import {
-  insertCommentBefore,
-  insertJSXComment,
-  replaceJSXElement,
-} from '../../utilities/jsx';
-
-export interface MigrationOptions extends Options {
-  relative: boolean;
-  renameFrom: string;
-  renameTo: string;
-  renamePropsFrom: string;
-  renamePropsTo: string;
-}
-
-export const extensions = typescript.extensions;
-export const options = {
-  relative: typescript.options.relative,
-  renameFrom: {
-    name: 'renameFrom',
-    type: 'string',
-    description: 'The component name to target. (ex: Card)',
-    required: true,
-  },
-  renameTo: {
-    name: 'renameTo',
-    type: 'string',
-    description: 'The new component name.',
-    required: true,
-  },
-  renamePropsFrom: {
-    name: 'renamePropsFrom',
-    type: 'string',
-    description: 'The target component props to rename. (ex: CardProps)',
-    required: true,
-  },
-  renamePropsTo: {
-    name: 'renamePropsTo',
-    type: 'string',
-    description: 'The new component props name.',
-    required: true,
-  },
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  {jscodeshift: j}: API,
-  options: MigrationOptions,
-) {
-  const source = j(fileInfo.source);
-
-  if (
-    !options.relative &&
-    !hasImportDeclaration(j, source, '@shopify/polaris')
-  ) {
-    return fileInfo.source;
-  }
-
-  const sourcePaths = normalizeImportSourcePaths(j, source, {
-    relative: options.relative,
-    from: options.renameFrom,
-    to: options.renameTo,
-  });
-
-  if (!sourcePaths) return;
-
-  // If renameFrom component name is not imported, exit
-  if (
-    !hasImportSpecifier(j, source, options.renameFrom, sourcePaths.from) &&
-    !hasImportSpecifier(j, source, options.renamePropsFrom, sourcePaths.from)
-  ) {
-    return fileInfo.source;
-  }
-
-  let hasExistingJsx = false;
-  let hasExistingIdentifier = false;
-
-  // If local renameTo is already used in the file, exit
-  source.findJSXElements(options.renameTo).forEach((element) => {
-    insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-    hasExistingJsx = true;
-  });
-
-  if (hasExistingJsx) return source.toSource();
-
-  // If renameTo is already used as an identifier, exit
-  source
-    .find(j.Identifier)
-    .filter(
-      (path) =>
-        path.node.name === options.renameTo ||
-        path.node.name === options.renamePropsTo,
-    )
-    .forEach((path) => {
-      if (path.node.type !== 'Identifier') return;
-
-      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
-      hasExistingIdentifier = true;
-    });
-
-  if (hasExistingIdentifier) return source.toSource();
-
-  const localElementName =
-    getImportSpecifierName(j, source, options.renameFrom, sourcePaths.from) ||
-    options.renameFrom;
-
-  const localElementTypeName = getImportSpecifierName(
-    j,
-    source,
-    options.renamePropsFrom,
-    sourcePaths.from,
-  );
-
-  source.find(j.JSXElement).forEach((element) => {
-    // Handle self-closing elements
-    if (
-      element.node.openingElement.selfClosing === true &&
-      element.node.openingElement.name.type === 'JSXIdentifier' &&
-      element.node.openingElement.name.name === localElementName
-    ) {
-      element.node.openingElement.name.name = options.renameTo;
-    }
-
-    // Handle simple elements
-    if (
-      element.node.openingElement.name.type === 'JSXIdentifier' &&
-      element.node.openingElement.name.name === localElementName
-    ) {
-      replaceJSXElement(j, element, options.renameTo);
-      return;
-    }
-
-    // Handle self-closing compound elements
-    if (
-      element.node.openingElement.selfClosing === true &&
-      element.node.openingElement.name.type === 'JSXMemberExpression' &&
-      element.node.openingElement.name.object.type === 'JSXIdentifier' &&
-      element.node.openingElement.name.object.name === localElementName
-    ) {
-      element.node.openingElement.name.object.name = options.renameTo;
-    }
-
-    // Handle compound elements
-    if (
-      element.node.openingElement.name.type === 'JSXMemberExpression' &&
-      element.node.openingElement.name.object.type === 'JSXIdentifier' &&
-      element.node.openingElement.name.object.name === localElementName &&
-      element.node.closingElement?.name.type === 'JSXMemberExpression' &&
-      element.node.closingElement?.name.object.type === 'JSXIdentifier' &&
-      element.node.closingElement?.name.object.name === localElementName
-    ) {
-      element.node.openingElement.name.object.name = options.renameTo;
-      element.node.closingElement.name.object.name = options.renameTo;
-    }
-  });
-
-  // Find all references to the renameFrom component and replace them with renameTo
-  source
-    .find(j.Identifier)
-    .filter(
-      (path) =>
-        path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
-    )
-    .forEach((path) => {
-      if (path.node.type !== 'Identifier') return;
-
-      if (
-        path.node.name === localElementName &&
-        path.parent.value.type !== 'MemberExpression'
-      ) {
-        path.node.name = options.renameTo;
-      }
-
-      if (path.node.name === localElementTypeName) {
-        path.node.name = options.renamePropsTo;
-      }
-    });
-
-  if (!hasImportSpecifier(j, source, options.renameTo, sourcePaths.to)) {
-    if (options.relative) {
-      insertImportDeclaration(
-        j,
-        source,
-        options.renameTo,
-        sourcePaths.to,
-        sourcePaths.from,
-      );
-    } else {
-      insertImportSpecifier(j, source, options.renameTo, sourcePaths.to);
-    }
-  }
-
-  // Remove the renameFrom import
-  if (hasImportSpecifier(j, source, options.renameFrom, sourcePaths.from)) {
-    removeImportSpecifier(j, source, options.renameFrom, sourcePaths.from);
-  }
-
-  // Remove the renamePropsFrom import
-  if (!hasImportSpecifiers(j, source, sourcePaths.from)) {
-    removeImportDeclaration(j, source, sourcePaths.from);
-  }
-
-  return source.toSource();
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss
deleted file mode 100644
index c9d22fde45d..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.input.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-@use './styles/overrides';
-
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss
deleted file mode 100644
index 2ae30905231..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.output.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use './styles/overrides';
-
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss
deleted file mode 100644
index e97b9461af2..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.input.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'global-styles/legacy-polaris-v8' as legacy;
-
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss
deleted file mode 100644
index 4e1ce95795f..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-at-use-namespace.output.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss
deleted file mode 100644
index 9568d418175..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.input.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'global-styles/legacy-polaris-v8' as v8 with (
-  $var1: 1px,
-  $var2: 2px
-);
-
-.BaseCase {
-  padding: 16px;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss
deleted file mode 100644
index ab66858e793..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-configuration.output.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.BaseCase {
-  padding: 16px;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss
deleted file mode 100644
index cf67cd1b1bb..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.input.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'media-queries';
-
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss
deleted file mode 100644
index 4e1ce95795f..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-options.output.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.BaseCase {
-  padding: 1rem;
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss
deleted file mode 100644
index 839343ea2ad..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.input.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'global-styles/legacy-polaris-v8' as legacy;
-
-.BaseCase {
-  padding: legacy.rem(1rem);
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss
deleted file mode 100644
index 839343ea2ad..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use-namespace.output.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'global-styles/legacy-polaris-v8' as legacy;
-
-.BaseCase {
-  padding: legacy.rem(1rem);
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss
deleted file mode 100644
index 4f37a385c25..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.input.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.BaseCase {
-  padding: legacy-polaris-v8.rem(16px);
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss b/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss
deleted file mode 100644
index 4f37a385c25..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/with-used-at-use.output.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.BaseCase {
-  padding: legacy-polaris-v8.rem(16px);
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts b/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts
deleted file mode 100644
index f1bad87d9b6..00000000000
--- a/polaris-codemods/src/codemods/scss-remove-unused-at-use/transform.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-
-import {createInlineComment} from '../../utilities/sass';
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-import {matchesStringOrRegExp} from '../../utilities/matches';
-
-interface PluginOptions extends Options {
-  url?: string;
-}
-
-export const extensions = scss.extensions;
-export const options = {
-  url: {
-    name: 'url',
-    type: 'string',
-    description: 'The @use rule URL to replace if unused.',
-  },
-};
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const {url} = options;
-
-  if (!url) {
-    throw new Error('Missing required options: url');
-  }
-
-  return {
-    postcssPlugin: 'scss-remove-unused-at-use',
-    Once(root) {
-      root.walkAtRules('use', (atRule) => {
-        const atUseParams = atRule.params.replace(/(\s|\n|\r\n?)+/g, ' ');
-        const atUseURL = atUseParams.match(/(['"])(.+?)\1/)?.[2] ?? '';
-        const atUseAsNamespace = atUseParams
-          .match(/\sas\s+(.+?)(\s|$)/)?.[1]
-          ?.trim();
-
-        // Didn't find the target import in file
-        if (!atUseURL || !matchesStringOrRegExp(atUseURL, url)) {
-          return;
-        }
-
-        // const namespace = atUseParams.match(/as\s*((?:[^\s;])+)/)?.[1];
-        const atUseURLNamespace = atUseURL.split('/').pop();
-        const atUseNamespace = atUseAsNamespace || atUseURLNamespace;
-
-        // Comment if the namespace is using an alias
-        if (atUseNamespace === '*') {
-          atRule.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-          return;
-        }
-
-        // Remove target import
-        if (!root.source?.input.css.includes(`${atUseNamespace}.`)) {
-          atRule.remove();
-        }
-      });
-    },
-  };
-};
-
-export default function scssRemoveUnusedImport(
-  file: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(file.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss
deleted file mode 100644
index 4d705026d5c..00000000000
--- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.input.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import 'styles/common';
-
-$no-extra-newlines-above-this: 1rem;
-
-.BaseCase {
-  padding: 1rem;
-}
-
-.NoInsert {
-  padding: var(--p-space-4);
-}
-
-.ExistingDisableComment {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: 1rem;
-}
-
-.Nested {
-  .Keeps {
-    .Spacing {
-      padding: 1rem;
-    }
-  }
-}
-
-.CombineComment {
-  /* stylelint-disable-next-line my-original-rule -- original comment */
-  padding: 1rem;
-  /* stylelint-disable-next-line my-original-rule */
-  margin: 1rem;
-  /* stylelint-disable-next-line my-original-rule -- original comment */
-  margin-top: var(--p-space-1);
-}
-
-.MultiLineAtRule {
-  @media screen and (min-width: 1rem),
-    (min-width: 1rem) and #{1rem} {
-    grid-column: 1rem;
-  }
-}
-
-.MultiLineDecl {
-  margin-top: calc(
-    (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5
-  );
-}
-
-.AnotherMultiLine {
-  $vertical-padding: calc(
-    (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5
-  );
-}
-
-.AtRuleMultilineNoBlock {
-  @include safe-area-for(
-    left,
-    calc(1rem - 1rem + 1rem - 1rem + 1rem - 1rem),
-    left
-  );
-}
-
-.DescriptionlessDisable {
-  @media print {
-    // stylelint-disable-next-line declaration-no-important
-    padding: var(--p-space-4) !important;
-  }
-}
-
-a:unknown {
-  padding: var(--p-space-4);
-}
diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss
deleted file mode 100644
index f49efd4cf8f..00000000000
--- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.output.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@import 'styles/common';
-
-// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-$no-extra-newlines-above-this: 1rem;
-
-.BaseCase {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: 1rem;
-}
-
-.NoInsert {
-  padding: var(--p-space-4);
-}
-
-.ExistingDisableComment {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: 1rem;
-}
-
-.Nested {
-  .Keeps {
-    .Spacing {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      padding: 1rem;
-    }
-  }
-}
-
-.CombineComment {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY, original comment
-  padding: 1rem;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: 1rem;
-  /* stylelint-disable-next-line my-original-rule -- original comment */
-  margin-top: var(--p-space-1);
-}
-
-.MultiLineAtRule {
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  @media screen and (min-width: 1rem),
-    (min-width: 1rem) and #{1rem} {
-    // stylelint-enable
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    grid-column: 1rem;
-  }
-}
-
-.MultiLineDecl {
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  margin-top: calc(
-    (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5
-  );
-  // stylelint-enable
-}
-
-.AnotherMultiLine {
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  $vertical-padding: calc(
-    (1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem + 1rem - 1rem) * -0.5
-  );
-  // stylelint-enable
-}
-
-.AtRuleMultilineNoBlock {
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  @include safe-area-for(
-    left,
-    calc(1rem - 1rem + 1rem - 1rem + 1rem - 1rem),
-    left
-  );
-  // stylelint-enable
-}
-
-.DescriptionlessDisable {
-  @media print {
-    // stylelint-disable-next-line declaration-no-important -- generated by polaris-migrator DO NOT COPY
-    padding: var(--p-space-4) !important;
-  }
-}
-
-// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-a:unknown {
-  padding: var(--p-space-4);
-}
diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js
deleted file mode 100644
index 294af391a1d..00000000000
--- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/test-config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  customSyntax: 'postcss-scss',
-  reportDescriptionlessDisables: true,
-  plugins: [
-    path.join(
-      __dirname,
-      '../../../../../stylelint-polaris/plugins/at-rule-disallowed-list',
-    ),
-  ],
-  rules: {
-    'unit-disallowed-list': ['rem'],
-    'selector-pseudo-class-no-unknown': true,
-    'polaris/at-rule-disallowed-list': {
-      include: [/([\w-]+\.)?safe-area-for($|\()/],
-    },
-  },
-};
diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts b/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts
deleted file mode 100644
index 33c8db96b15..00000000000
--- a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/transform.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import os from 'os';
-
-import type {API, FileInfo, Options} from 'jscodeshift';
-import type {Node, Comment, Plugin, Root} from 'postcss';
-import postcss from 'postcss';
-import type {StylelintPostcssResult} from 'stylelint';
-import stylelint from 'stylelint';
-
-import {scss} from '../../utilities/constants';
-
-const crossPlatformNewlineRegExp = /\r\n?|\n/;
-const polarisContextMsg = '-- generated by polaris-migrator DO NOT COPY';
-
-export const extensions = scss.extensions;
-
-const plugin = (): Plugin => {
-  return {
-    postcssPlugin: 'styles-insert-stylelint-disable',
-    Once(root, {result}) {
-      result.messages.forEach(({node}) => {
-        // If a polaris ignore comment exists above the node already,
-        // do nothing
-        if (node.prev()?.text?.includes(polarisContextMsg)) {
-          return;
-        }
-
-        const isMultiline =
-          crossPlatformNewlineRegExp.test(node.value) ||
-          crossPlatformNewlineRegExp.test(node.text) ||
-          crossPlatformNewlineRegExp.test(node.params);
-
-        const commentText = `${
-          isMultiline ? 'stylelint-disable' : 'stylelint-disable-next-line'
-        } ${polarisContextMsg}`;
-
-        const comment = createDisableComment(commentText, node.prev());
-
-        node.before(comment);
-
-        if (isMultiline) {
-          (node.type === 'atrule' && node?.nodes?.length) ||
-          node.type === 'rule'
-            ? node.prepend(createCommentNode('stylelint-enable'))
-            : node.after(createCommentNode('stylelint-enable'));
-        }
-
-        deleteExtraNewlinesBeforeNode(node);
-      });
-
-      fillDescriptionlessDisables(result, root);
-    },
-  };
-};
-
-export default async function transformer(
-  file: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss([
-    stylelint({
-      config: {
-        extends: [options.config ?? '@shopify/stylelint-polaris'],
-      },
-    }) as Plugin,
-    plugin(),
-  ])
-    .process(file.source, {
-      from: file.path,
-      syntax: require('postcss-scss'),
-    })
-    .then((result) => {
-      return result.css;
-    });
-}
-
-/**
- * Create a postcss comment node in the style:
- * `// ${text}`
- */
-function createCommentNode(text: string): Comment {
-  return new postcss.Comment({
-    text,
-    raws: {
-      left: ' ',
-      right: '',
-      inline: true,
-    },
-  });
-}
-
-/**
- * Create a new disable comment with the given text.
- * If the prevNode and the text are both disable-next-line
- * comments, they are combined into a single comment with their
- * description texts seperated by a comma.
- */
-function createDisableComment(text: string, prevNode: Comment): Comment {
-  if (
-    prevNode?.type !== 'comment' ||
-    !prevNode.text.includes('stylelint-disable-next-line') ||
-    !text.includes('stylelint-disable-next-line')
-  ) {
-    return createCommentNode(text);
-  }
-
-  const prevDescription = prevNode.text?.split('--')?.[1]?.trim();
-  const commentText = prevDescription?.length
-    ? [text, prevDescription].join(', ')
-    : text;
-
-  prevNode.remove();
-
-  return createCommentNode(commentText);
-}
-
-/**
- * Reduces the number of newline characters in a node's before
- * raws to just one. This is helpful to ensure that there is
- * only one newline between a disable-next-line comment and
- * the warning node.
- */
-function deleteExtraNewlinesBeforeNode(node: Node) {
-  node.raws.before = `${os.EOL}${node.raws.before.replace(
-    new RegExp(crossPlatformNewlineRegExp, 'g'),
-    '',
-  )}`;
-}
-
-/**
- * If report-descriptionless-disables is enabled on stylelint,
- * add a generated description to disables that don't have one.
- */
-function fillDescriptionlessDisables(result: any, root: Root) {
-  const stylelintResult = result?.stylelint as StylelintPostcssResult;
-
-  if (stylelintResult?.config?.reportDescriptionlessDisables) {
-    root.walkComments((comment) => {
-      if (
-        comment.text.includes('stylelint-disable') &&
-        !comment.text.includes('--')
-      ) {
-        comment.before(
-          createCommentNode([comment.text, polarisContextMsg].join(' ')),
-        );
-        comment.remove();
-      }
-    });
-  }
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js
deleted file mode 100644
index b6d0b2dca80..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/replacement-maps.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const colorMap = {
-  '--p-text': '--p-color-text',
-  '--p-black': '#000',
-};
-
-const durationMap = {
-  '--p-duration-200': '--p-motion-duration-200',
-  '--p-fast': '100ms',
-};
-
-// eslint-disable-next-line import/no-anonymous-default-export, import/no-default-export
-export default {
-  color: colorMap,
-  '/^animation/': durationMap,
-};
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss
deleted file mode 100644
index dde97f2af97..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.input.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.basic {
-  color: var(--p-text);
-}
-
-.with-fallback-var {
-  color: var(--p-text, var(--p-text));
-}
-
-.with-fallback-value {
-  color: var(--p-text, #000);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss
deleted file mode 100644
index fdd5bf3c85a..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-basic.output.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.basic {
-  color: var(--p-color-text);
-}
-
-.with-fallback-var {
-  color: var(--p-color-text, var(--p-color-text));
-}
-
-.with-fallback-value {
-  color: var(--p-color-text, #000);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss
deleted file mode 100644
index aa9e14ecac5..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.input.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.basic {
-  animation-duration: var(--p-duration-200);
-  animation-delay: var(--p-duration-200);
-}
-
-.with-fallback-var {
-  animation-duration: var(--p-duration-200, var(--p-duration-200));
-  animation-delay: var(--p-duration-200, var(--p-duration-200));
-}
-
-.with-fallback-value {
-  animation-duration: var(--p-duration-200, 200ms);
-  animation-delay: var(--p-duration-200, 200ms);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss
deleted file mode 100644
index 8604ad1da1c..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-from-to-flags-regexp.output.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.basic {
-  animation-duration: var(--p-motion-duration-200);
-  animation-delay: var(--p-motion-duration-200);
-}
-
-.with-fallback-var {
-  animation-duration: var(
-    --p-motion-duration-200,
-    var(--p-motion-duration-200)
-  );
-  animation-delay: var(--p-motion-duration-200, var(--p-motion-duration-200));
-}
-
-.with-fallback-value {
-  animation-duration: var(--p-motion-duration-200, 200ms);
-  animation-delay: var(--p-motion-duration-200, 200ms);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss
deleted file mode 100644
index 175d10b7449..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.input.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.basic {
-  color: var(--p-text);
-  color: var(--p-black);
-
-  animation-duration: var(--p-duration-200);
-  animation-delay: var(--p-fast);
-}
-
-.with-fallback-var {
-  color: var(--p-text, var(--p-text));
-  color: var(--p-text, var(--p-black));
-  color: var(--p-black, var(--p-text));
-
-  animation-duration: var(--p-duration-200, var(--p-duration-200));
-  animation-delay: var(--p-duration-200, var(--p-fast));
-  animation-delay: var(--p-fast, var(--p-duration-200));
-}
-
-.with-fallback-value {
-  color: var(--p-text, #000);
-  color: var(--p-black, #111);
-
-  animation-duration: var(--p-duration-200, 200ms);
-  animation-delay: var(--p-fast, 100ms);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss
deleted file mode 100644
index d7b4e4ec634..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-maps-flag.output.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.basic {
-  color: var(--p-color-text);
-  color: #000;
-
-  animation-duration: var(--p-motion-duration-200);
-  animation-delay: 100ms;
-}
-
-.with-fallback-var {
-  color: var(--p-color-text, var(--p-color-text));
-  color: var(--p-color-text, #000);
-  color: #000;
-
-  animation-duration: var(
-    --p-motion-duration-200,
-    var(--p-motion-duration-200)
-  );
-  animation-delay: var(--p-motion-duration-200, 100ms);
-  animation-delay: 100ms;
-}
-
-.with-fallback-value {
-  color: var(--p-color-text, #000);
-  color: #000;
-
-  animation-duration: var(--p-motion-duration-200, 200ms);
-  animation-delay: 100ms;
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss
deleted file mode 100644
index dde97f2af97..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.input.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.basic {
-  color: var(--p-text);
-}
-
-.with-fallback-var {
-  color: var(--p-text, var(--p-text));
-}
-
-.with-fallback-value {
-  color: var(--p-text, #000);
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss b/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss
deleted file mode 100644
index fdd5bf3c85a..00000000000
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/with-replacementMaps-option.output.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.basic {
-  color: var(--p-color-text);
-}
-
-.with-fallback-var {
-  color: var(--p-color-text, var(--p-color-text));
-}
-
-.with-fallback-value {
-  color: var(--p-color-text, #000);
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts
deleted file mode 100644
index c57e113ec3e..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-display-text.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import type {
-  ASTNode,
-  Collection,
-  JSCodeshift,
-  JSXOpeningElement,
-  JSXAttribute,
-} from 'jscodeshift';
-
-import {
-  hasJSXAttribute,
-  replaceJSXElement,
-  replaceJSXAttributes,
-  insertJSXAttribute,
-  insertJSXComment,
-  insertCommentBefore,
-} from '../../../utilities/jsx';
-import {isKeyOf} from '../../../utilities/types';
-import {
-  getImportSpecifierName,
-  hasImportSpecifier,
-  hasImportSpecifiers,
-  insertImportDeclaration,
-  insertImportSpecifier,
-  normalizeImportSourcePaths,
-  removeImportDeclaration,
-  removeImportSpecifier,
-} from '../../../utilities/imports';
-import type {MigrationOptions} from '../transform';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
-
-const displayTextElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']);
-
-const defaultDisplayTextElement = 'p';
-
-const displayTextSizeMap = {
-  small: 'headingLg',
-  medium: 'headingXl',
-  large: 'heading2xl',
-  extraLarge: 'heading4xl',
-};
-
-const defaultDisplayTextSize = 'medium';
-
-/**
- * Replace <DisplayText> with the <Text> component
- */
-export function replaceDisplayText<NodeType = ASTNode>(
-  j: JSCodeshift,
-  source: Collection<NodeType>,
-  options: MigrationOptions,
-) {
-  const sourcePaths = normalizeImportSourcePaths(j, source, {
-    relative: options.relative,
-    from: 'DisplayText',
-    to: 'Text',
-  });
-
-  if (!sourcePaths) return;
-  if (
-    !hasImportSpecifier(j, source, 'DisplayText', sourcePaths.from) &&
-    !hasImportSpecifier(j, source, 'DisplayTextProps', sourcePaths.from)
-  ) {
-    return;
-  }
-
-  const localElementName =
-    getImportSpecifierName(j, source, 'DisplayText', sourcePaths.from) ||
-    'DisplayText';
-
-  const localElementTypeName = getImportSpecifierName(
-    j,
-    source,
-    'DisplayTextProps',
-    sourcePaths.from,
-  );
-
-  let canInsertTextImport = false;
-  let canRemoveDisplayTextImport = Boolean(!localElementTypeName);
-
-  source.findJSXElements(localElementName).forEach((element) => {
-    const allAttributes =
-      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
-        .attributes ?? [];
-
-    if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) {
-      canRemoveDisplayTextImport = false;
-      insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-      return;
-    }
-
-    const jsxAttributes = allAttributes as JSXAttribute[];
-
-    const elementAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'element',
-    );
-
-    let elementValue = defaultDisplayTextElement;
-
-    if (elementAttribute) {
-      const elementAttributeValue = elementAttribute.value;
-
-      if (
-        elementAttributeValue?.type === 'StringLiteral' &&
-        displayTextElements.has(elementAttributeValue.value)
-      ) {
-        elementValue = elementAttributeValue.value;
-      } else {
-        canRemoveDisplayTextImport = false;
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-    }
-
-    const sizeAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'size',
-    );
-
-    let sizeValue: keyof typeof displayTextSizeMap = defaultDisplayTextSize;
-
-    if (sizeAttribute) {
-      const sizeAttributeValue = sizeAttribute.value;
-
-      if (
-        sizeAttributeValue?.type === 'StringLiteral' &&
-        isKeyOf(displayTextSizeMap, sizeAttributeValue.value)
-      ) {
-        sizeValue = sizeAttributeValue.value;
-      } else {
-        canRemoveDisplayTextImport = false;
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-    }
-
-    canInsertTextImport = true;
-
-    replaceJSXElement(j, element, 'Text');
-
-    if (!hasJSXAttribute(j, element, 'size')) {
-      insertJSXAttribute(j, element, 'variant', displayTextSizeMap[sizeValue]);
-    } else {
-      replaceJSXAttributes(
-        j,
-        element,
-        'size',
-        'variant',
-        displayTextSizeMap[sizeValue],
-      );
-    }
-
-    if (!hasJSXAttribute(j, element, 'element')) {
-      insertJSXAttribute(j, element, 'as', elementValue);
-    } else {
-      replaceJSXAttributes(j, element, 'element', 'as', elementValue);
-    }
-  });
-
-  source
-    .find(j.Identifier)
-    .filter(
-      (path) =>
-        path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
-    )
-    .forEach((path) => {
-      if (path.node.type !== 'Identifier') return;
-
-      if (path.parent.value.type !== 'ImportSpecifier') {
-        canRemoveDisplayTextImport = false;
-      }
-
-      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
-
-      if (path.node.name === localElementName) {
-        insertCommentBefore(j, path, 'Replace with: Text');
-      } else {
-        insertCommentBefore(j, path, 'Replace with: TextProps');
-      }
-    });
-
-  if (canInsertTextImport) {
-    if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) {
-      if (options.relative) {
-        insertImportDeclaration(
-          j,
-          source,
-          'Text',
-          sourcePaths.to,
-          sourcePaths.from,
-        );
-      } else {
-        insertImportSpecifier(j, source, 'Text', sourcePaths.to);
-      }
-    }
-  }
-
-  if (canRemoveDisplayTextImport) {
-    if (hasImportSpecifier(j, source, 'DisplayText', sourcePaths.from)) {
-      removeImportSpecifier(j, source, 'DisplayText', sourcePaths.from);
-    }
-    if (!hasImportSpecifiers(j, source, sourcePaths.from)) {
-      removeImportDeclaration(j, source, sourcePaths.from);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts
deleted file mode 100644
index 4541412f7ef..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-other.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-import type {
-  ASTNode,
-  Collection,
-  JSCodeshift,
-  JSXAttribute,
-  JSXOpeningElement,
-} from 'jscodeshift';
-
-import {
-  hasJSXAttribute,
-  insertJSXAttribute,
-  insertJSXComment,
-  insertCommentBefore,
-  replaceJSXAttributes,
-  replaceJSXElement,
-} from '../../../utilities/jsx';
-import {
-  getImportSpecifierName,
-  hasImportSpecifier,
-  hasImportSpecifiers,
-  insertImportDeclaration,
-  insertImportSpecifier,
-  normalizeImportSourcePaths,
-  removeImportDeclaration,
-  removeImportSpecifier,
-} from '../../../utilities/imports';
-import type {MigrationOptions} from '../transform';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
-import {isKeyOf} from '../../../utilities/types';
-
-export const components = {
-  Heading: {
-    validElements: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']),
-    defaultElement: 'h2',
-    as: 'h2',
-    variant: 'headingMd',
-  },
-  Subheading: {
-    validElements: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']),
-    defaultElement: 'h3',
-    as: 'h3',
-    variant: 'headingXs',
-  },
-  Caption: {
-    validElements: new Set<string>(),
-    defaultElement: undefined,
-    as: 'p',
-    variant: 'bodySm',
-  },
-  VisuallyHidden: {
-    validElements: new Set<string>(),
-    defaultElement: undefined,
-    as: 'span',
-    variant: 'bodySm',
-  },
-};
-
-function replaceOtherComponent(
-  j: JSCodeshift,
-  source: Collection,
-  componentName: keyof typeof components,
-  relative?: boolean,
-) {
-  const {variant, as, validElements, defaultElement} =
-    components[componentName];
-  const sourcePaths = normalizeImportSourcePaths(j, source, {
-    relative,
-    from: componentName,
-    to: 'Text',
-  });
-
-  if (!sourcePaths) return;
-  if (
-    !hasImportSpecifier(j, source, componentName, sourcePaths.from) &&
-    !hasImportSpecifier(j, source, `${componentName}Props`, sourcePaths.from)
-  ) {
-    return;
-  }
-
-  const localElementName =
-    getImportSpecifierName(j, source, componentName, sourcePaths.from) ||
-    componentName;
-
-  const localElementTypeName = getImportSpecifierName(
-    j,
-    source,
-    `${componentName}Props`,
-    sourcePaths.from,
-  );
-
-  let canInsertTextImport = false;
-  let canRemoveComponentImport = Boolean(!localElementTypeName);
-
-  source.findJSXElements(localElementName).forEach((element) => {
-    const allAttributes =
-      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
-        .attributes ?? [];
-
-    if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) {
-      canRemoveComponentImport = false;
-      insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-      return;
-    }
-
-    const jsxAttributes = allAttributes as JSXAttribute[];
-
-    const elementAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'element',
-    );
-
-    let elementValue: string | undefined = defaultElement;
-
-    if (elementAttribute) {
-      const elementAttributeValue = elementAttribute.value;
-
-      if (
-        elementAttributeValue?.type === 'StringLiteral' &&
-        validElements.has(elementAttributeValue.value)
-      ) {
-        elementValue = elementAttributeValue.value;
-      } else {
-        canRemoveComponentImport = false;
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-    }
-
-    canInsertTextImport = true;
-
-    replaceJSXElement(j, element, 'Text');
-    insertJSXAttribute(j, element, 'variant', variant);
-
-    if (hasJSXAttribute(j, element, 'element')) {
-      replaceJSXAttributes(j, element, 'element', 'as', elementValue ?? as);
-    } else {
-      insertJSXAttribute(j, element, 'as', elementValue ?? as);
-    }
-
-    if (componentName === 'VisuallyHidden') {
-      insertJSXAttribute(j, element, 'visuallyHidden');
-    }
-  });
-
-  source
-    .find(j.Identifier)
-    .filter(
-      (path) =>
-        path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
-    )
-    .forEach((path) => {
-      if (path.node.type !== 'Identifier') return;
-
-      if (path.parent.value.type !== 'ImportSpecifier') {
-        canRemoveComponentImport = false;
-      }
-
-      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
-
-      if (path.node.name === localElementName) {
-        insertCommentBefore(j, path, 'Replace with: Text');
-      } else {
-        insertCommentBefore(j, path, 'Replace with: TextProps');
-      }
-    });
-
-  if (canInsertTextImport) {
-    if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) {
-      if (relative) {
-        insertImportDeclaration(
-          j,
-          source,
-          'Text',
-          sourcePaths.to,
-          sourcePaths.from,
-        );
-      } else {
-        insertImportSpecifier(j, source, 'Text', sourcePaths.to);
-      }
-    }
-  }
-
-  if (canRemoveComponentImport) {
-    if (hasImportSpecifier(j, source, componentName, sourcePaths.from)) {
-      removeImportSpecifier(j, source, componentName, sourcePaths.from);
-    }
-    if (!hasImportSpecifiers(j, source, sourcePaths.from)) {
-      removeImportDeclaration(j, source, sourcePaths.from);
-    }
-  }
-}
-
-/**
- * Replace <Heading>, <Subheading>, <Caption>, and <VisuallyHidden> with the <Text> component
- */
-export function replaceOther<NodeType = ASTNode>(
-  j: JSCodeshift,
-  source: Collection<NodeType>,
-  options: MigrationOptions,
-) {
-  if (options.componentName && !isKeyOf(components, options.componentName)) {
-    throw new Error(`Unsupported component name: ${options.componentName}`);
-  }
-
-  if (options.componentName) {
-    replaceOtherComponent(j, source, options.componentName, options.relative);
-  } else {
-    Object.keys(components).forEach((componentName) =>
-      replaceOtherComponent(
-        j,
-        source,
-        componentName as keyof typeof components,
-        options.relative,
-      ),
-    );
-  }
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts
deleted file mode 100644
index d1836fd52f5..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/steps/replace-text-style.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-import type {
-  ASTNode,
-  Collection,
-  JSCodeshift,
-  JSXAttribute,
-  JSXOpeningElement,
-} from 'jscodeshift';
-
-import {
-  insertCommentBefore,
-  insertJSXAttribute,
-  insertJSXComment,
-  removeJSXAttributes,
-  replaceJSXElement,
-} from '../../../utilities/jsx';
-import {
-  getImportSpecifierName,
-  hasImportSpecifier,
-  hasImportSpecifiers,
-  insertImportDeclaration,
-  insertImportSpecifier,
-  normalizeImportSourcePaths,
-  removeImportDeclaration,
-  removeImportSpecifier,
-} from '../../../utilities/imports';
-import type {MigrationOptions} from '../transform';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
-import {isKeyOf} from '../../../utilities/types';
-
-const variationMap = {
-  strong: {fontWeight: 'semibold'},
-  subdued: {color: 'subdued'},
-  positive: {color: 'success'},
-  negative: {color: 'critical'},
-  warning: {color: 'warning'},
-  code: {},
-};
-
-/**
- * Replace <TextStyle> with the <Text> component
- */
-export function replaceTextStyle<NodeType = ASTNode>(
-  j: JSCodeshift,
-  source: Collection<NodeType>,
-  options: MigrationOptions,
-) {
-  const sourcePaths = normalizeImportSourcePaths(j, source, {
-    relative: options.relative,
-    from: 'TextStyle',
-    to: 'Text',
-  });
-
-  if (!sourcePaths) return;
-  if (
-    !hasImportSpecifier(j, source, 'TextStyle', sourcePaths.from) &&
-    !hasImportSpecifier(j, source, 'TextStyleProps', sourcePaths.from)
-  ) {
-    return;
-  }
-
-  const localElementName =
-    getImportSpecifierName(j, source, 'TextStyle', sourcePaths.from) ||
-    'TextStyle';
-
-  const localElementTypeName = getImportSpecifierName(
-    j,
-    source,
-    'TextStyleProps',
-    sourcePaths.from,
-  );
-
-  let canInsertTextImport = false;
-  let canRemoveTextStyleImport = Boolean(!localElementTypeName);
-  let canInsertInlineCodeImport = false;
-
-  source.findJSXElements(localElementName).forEach((element) => {
-    const allAttributes =
-      (j(element).find(j.JSXOpeningElement).get().value as JSXOpeningElement)
-        .attributes ?? [];
-
-    if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) {
-      canRemoveTextStyleImport = false;
-      insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-      return;
-    }
-
-    const jsxAttributes = allAttributes as JSXAttribute[];
-
-    const variationAttribute = jsxAttributes.find(
-      (attribute) => attribute.name.name === 'variation',
-    );
-
-    let variationValue: keyof typeof variationMap | undefined;
-
-    if (variationAttribute) {
-      const variationAttributeValue = variationAttribute.value;
-
-      if (
-        variationAttributeValue?.type === 'StringLiteral' &&
-        isKeyOf(variationMap, variationAttributeValue.value)
-      ) {
-        variationValue = variationAttributeValue.value;
-      } else {
-        canRemoveTextStyleImport = false;
-        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
-        return;
-      }
-    }
-
-    canInsertTextImport = true;
-
-    replaceJSXElement(j, element, 'Text');
-    insertJSXAttribute(j, element, 'variant', 'bodyMd');
-    insertJSXAttribute(j, element, 'as', 'span');
-    removeJSXAttributes(j, element, 'variation');
-
-    if (typeof variationValue === 'undefined') return;
-
-    if (variationValue === 'code') {
-      canInsertInlineCodeImport = true;
-
-      const InlineCode = j.jsxElement(
-        j.jsxOpeningElement(j.jsxIdentifier('InlineCode')),
-        j.jsxClosingElement(j.jsxIdentifier('InlineCode')),
-        element.node.children,
-      );
-
-      element.replace(
-        j.jsxElement(element.node.openingElement, element.node.closingElement, [
-          InlineCode,
-        ]),
-      );
-
-      return;
-    }
-
-    Object.entries(variationMap[variationValue]).forEach(([name, value]) => {
-      insertJSXAttribute(j, element, name, value);
-    });
-  });
-
-  source
-    .find(j.Identifier)
-    .filter(
-      (path) =>
-        path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
-    )
-    .forEach((path) => {
-      if (path.node.type !== 'Identifier') return;
-
-      if (path.parent.value.type !== 'ImportSpecifier') {
-        canRemoveTextStyleImport = false;
-      }
-
-      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
-
-      if (path.node.name === localElementName) {
-        insertCommentBefore(j, path, 'Replace with: Text');
-      } else {
-        insertCommentBefore(j, path, 'Replace with: TextProps');
-      }
-    });
-
-  if (canInsertTextImport) {
-    if (!hasImportSpecifier(j, source, 'Text', sourcePaths.to)) {
-      if (options.relative) {
-        insertImportDeclaration(
-          j,
-          source,
-          'Text',
-          sourcePaths.to,
-          sourcePaths.from,
-        );
-      } else {
-        insertImportSpecifier(j, source, 'Text', sourcePaths.to);
-      }
-    }
-  }
-
-  const inlineTextSourcePath = options.relative
-    ? sourcePaths.from.replace('TextStyle', 'InlineCode')
-    : '@shopify/polaris';
-
-  if (canInsertInlineCodeImport) {
-    if (!hasImportSpecifier(j, source, 'InlineCode', inlineTextSourcePath)) {
-      if (options.relative) {
-        insertImportDeclaration(
-          j,
-          source,
-          'InlineCode',
-          inlineTextSourcePath,
-          sourcePaths.to,
-        );
-      } else {
-        insertImportSpecifier(j, source, 'InlineCode', inlineTextSourcePath);
-      }
-    }
-  }
-
-  if (canRemoveTextStyleImport) {
-    if (hasImportSpecifier(j, source, 'TextStyle', sourcePaths.from)) {
-      removeImportSpecifier(j, source, 'TextStyle', sourcePaths.from);
-    }
-    if (!hasImportSpecifiers(j, source, sourcePaths.from)) {
-      removeImportDeclaration(j, source, sourcePaths.from);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx
deleted file mode 100644
index d74f6d01b66..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.input.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {
-  Caption,
-  DisplayText,
-  Heading,
-  Subheading,
-  TextStyle,
-  VisuallyHidden,
-} from '@shopify/polaris';
-
-export function App() {
-  return (
-    <>
-      <Caption>Caption</Caption>
-      <DisplayText size="extraLarge">DisplayText</DisplayText>
-      <Heading>Heading</Heading>
-      <Subheading>Subheading</Subheading>
-      <TextStyle>TextStyle - Default</TextStyle>
-      <TextStyle variation="code">TextStyle - InlineCode</TextStyle>
-      <VisuallyHidden>VisuallyHidden</VisuallyHidden>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx
deleted file mode 100644
index 92ddf39c233..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-all.output.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import {Text, InlineCode} from '@shopify/polaris';
-
-export function App() {
-  return (
-    <>
-      <Text variant="bodySm" as="p">
-        Caption
-      </Text>
-      <Text variant="heading4xl" as="p">
-        DisplayText
-      </Text>
-      <Text variant="headingMd" as="h2">
-        Heading
-      </Text>
-      <Text variant="headingXs" as="h3">
-        Subheading
-      </Text>
-      <Text variant="bodyMd" as="span">
-        TextStyle - Default
-      </Text>
-      <Text variant="bodyMd" as="span">
-        <InlineCode>TextStyle - InlineCode</InlineCode>
-      </Text>
-      <Text variant="bodySm" as="span" visuallyHidden>
-        VisuallyHidden
-      </Text>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx
deleted file mode 100644
index ac71d0e75f7..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.input.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import {Caption, DisplayText} from '@shopify/polaris';
-
-export function App() {
-  const MyCaption = Caption;
-
-  return (
-    <>
-      <MyCaption>MyCaption</MyCaption>
-      <Caption>Caption</Caption>
-      <DisplayText size="extraLarge">DisplayText</DisplayText>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx
deleted file mode 100644
index 4ad56081887..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-identifier.output.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  Caption,
-  Text,
-} from '@shopify/polaris';
-
-export function App() {
-  const MyCaption =
-    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-    /* Replace with: Text */
-    Caption;
-
-  return (
-    <>
-      <MyCaption>MyCaption</MyCaption>
-      <Text variant="bodySm" as="p">
-        Caption
-      </Text>
-      <Text variant="heading4xl" as="p">
-        DisplayText
-      </Text>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx
deleted file mode 100644
index c7a5847f131..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.input.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {
-  Caption,
-  DisplayText,
-  Heading,
-  Subheading,
-  TextStyle,
-} from '@shopify/polaris';
-
-declare const captionProps: {children: string};
-declare const element: string;
-declare function getVariation(): 'positive';
-
-export function App() {
-  return (
-    <>
-      <DisplayText size="extraLarge">DisplayText</DisplayText>
-      <Caption {...captionProps} />
-      <Heading>Heading - Default</Heading>
-      <Heading element="invalid">Heading - Invalid</Heading>
-      <Heading>Subheading - Default</Heading>
-      <Subheading element={element}>Subheading - Unknown</Subheading>
-      <TextStyle variation={getVariation()}>TextStyle - Unknown</TextStyle>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx
deleted file mode 100644
index 80f96e965ac..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-invalid.output.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  Caption,
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  Heading,
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  Subheading,
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  TextStyle,
-  Text,
-} from '@shopify/polaris';
-
-declare const captionProps: {children: string};
-declare const element: string;
-declare function getVariation(): 'positive';
-
-export function App() {
-  return (
-    <>
-      <Text variant="heading4xl" as="p">
-        DisplayText
-      </Text>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <Caption {...captionProps} />
-      <Text variant="headingMd" as="h2">
-        Heading - Default
-      </Text>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <Heading element="invalid">Heading - Invalid</Heading>
-      <Text variant="headingMd" as="h2">
-        Subheading - Default
-      </Text>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <Subheading element={element}>Subheading - Unknown</Subheading>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <TextStyle variation={getVariation()}>TextStyle - Unknown</TextStyle>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx
deleted file mode 100644
index f82c7899701..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.input.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import type {CaptionProps} from '@shopify/polaris';
-import {Caption, DisplayText} from '@shopify/polaris';
-
-declare function MyCaption(props: CaptionProps): JSX.Element;
-
-export function App() {
-  return (
-    <>
-      <MyCaption>MyCaption</MyCaption>
-      <Caption>Caption</Caption>
-      <DisplayText size="extraLarge">DisplayText</DisplayText>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx
deleted file mode 100644
index 24f6a112286..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/remove-imports-partial-props-type.output.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  CaptionProps,
-} from '@shopify/polaris';
-import {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  Caption,
-  Text,
-} from '@shopify/polaris';
-
-declare function MyCaption(
-  props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  CaptionProps,
-): JSX.Element;
-
-export function App() {
-  return (
-    <>
-      <MyCaption>MyCaption</MyCaption>
-      <Text variant="bodySm" as="p">
-        Caption
-      </Text>
-      <Text variant="heading4xl" as="p">
-        DisplayText
-      </Text>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx
deleted file mode 100644
index e82264d9e71..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.input.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import type {TextStyleProps} from '@shopify/polaris';
-import {
-  DisplayText,
-  Heading,
-  Subheading,
-  Caption,
-  TextStyle,
-  VisuallyHidden,
-} from '@shopify/polaris';
-
-const noop = (..._: any) => {};
-
-export function App() {
-  const textStyle = TextStyle;
-  const textStyleProps: TextStyleProps = {
-    variation: 'positive',
-  };
-
-  const MyDisplayText = DisplayText;
-
-  noop(textStyle);
-
-  return (
-    <>
-      <DisplayText size="extraLarge">Display text</DisplayText>
-      <DisplayText size="large">Display text</DisplayText>
-      <DisplayText size="medium">Display text</DisplayText>
-      <DisplayText>Display text</DisplayText>
-      <DisplayText size="small">Display text</DisplayText>
-      <Heading element="h1">Heading</Heading>
-      <Heading>Heading</Heading>
-      <Subheading element="h2">Subheading</Subheading>
-      <Subheading>Subheading</Subheading>
-      <Caption>Caption</Caption>
-      <TextStyle variation="strong">Strong</TextStyle>
-      <TextStyle variation="positive">Positive</TextStyle>
-      <TextStyle variation="negative">Negative</TextStyle>
-      <TextStyle variation="warning">Warning</TextStyle>
-      <TextStyle variation="code">Code</TextStyle>
-      <TextStyle>
-        <TextStyle variation="code">Code</TextStyle>
-      </TextStyle>
-      <TextStyle variation={Math.random() > 0.5 ? 'positive' : 'negative'}>
-        Code
-      </TextStyle>
-      <TextStyle {...textStyleProps}>Positive</TextStyle>
-      <VisuallyHidden>Hidden text</VisuallyHidden>
-      <MyDisplayText />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx
deleted file mode 100644
index 832b1862710..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/v10-react-replace-text-components.output.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps,
-} from '@shopify/polaris';
-import {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  DisplayText,
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  TextStyle,
-  Text,
-  InlineCode,
-} from '@shopify/polaris';
-
-const noop = (..._: any) => {};
-
-export function App() {
-  const textStyle =
-    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-    /* Replace with: Text */
-    TextStyle;
-  const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps = {
-    variation: 'positive',
-  };
-
-  const MyDisplayText =
-    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-    /* Replace with: Text */
-    DisplayText;
-
-  noop(textStyle);
-
-  return (
-    <>
-      <Text variant="heading4xl" as="p">
-        Display text
-      </Text>
-      <Text variant="heading2xl" as="p">
-        Display text
-      </Text>
-      <Text variant="headingXl" as="p">
-        Display text
-      </Text>
-      <Text variant="headingXl" as="p">
-        Display text
-      </Text>
-      <Text variant="headingLg" as="p">
-        Display text
-      </Text>
-      <Text as="h1" variant="headingMd">
-        Heading
-      </Text>
-      <Text variant="headingMd" as="h2">
-        Heading
-      </Text>
-      <Text as="h2" variant="headingXs">
-        Subheading
-      </Text>
-      <Text variant="headingXs" as="h3">
-        Subheading
-      </Text>
-      <Text variant="bodySm" as="p">
-        Caption
-      </Text>
-      <Text variant="bodyMd" as="span" fontWeight="semibold">
-        Strong
-      </Text>
-      <Text variant="bodyMd" as="span" color="success">
-        Positive
-      </Text>
-      <Text variant="bodyMd" as="span" color="critical">
-        Negative
-      </Text>
-      <Text variant="bodyMd" as="span" color="warning">
-        Warning
-      </Text>
-      <Text variant="bodyMd" as="span">
-        <InlineCode>Code</InlineCode>
-      </Text>
-      <Text variant="bodyMd" as="span">
-        <Text variant="bodyMd" as="span">
-          <InlineCode>Code</InlineCode>
-        </Text>
-      </Text>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <TextStyle variation={Math.random() > 0.5 ? 'positive' : 'negative'}>
-        Code
-      </TextStyle>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <TextStyle {...textStyleProps}>Positive</TextStyle>
-      <Text variant="bodySm" as="span" visuallyHidden>
-        Hidden text
-      </Text>
-      <MyDisplayText />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx
deleted file mode 100644
index bc45c624cf4..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.input.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  DisplayText,
-  Caption,
-  Heading,
-  Subheading,
-  TextStyle,
-  VisuallyHidden,
-} from '@shopify/polaris';
-
-export function App() {
-  return (
-    <>
-      <DisplayText size="invalid">Display text</DisplayText>
-      <DisplayText size="extraLarge">Display text</DisplayText>
-      <DisplayText size="large">Display text</DisplayText>
-      <DisplayText size="medium">Display text</DisplayText>
-      <DisplayText size="small">Display text</DisplayText>
-      <Heading element="h1">Heading</Heading>
-      <Heading>Heading</Heading>
-      <Subheading element="h2">Subheading</Subheading>
-      <Subheading>Subheading</Subheading>
-      <Caption>Caption</Caption>
-      <TextStyle variation="strong">Strong</TextStyle>
-      <TextStyle variation="positive">Positive</TextStyle>
-      <TextStyle variation="negative">Negative</TextStyle>
-      <TextStyle variation="warning">Warning</TextStyle>
-      <TextStyle variation="code">Code</TextStyle>
-      <VisuallyHidden>Hidden text</VisuallyHidden>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx
deleted file mode 100644
index 14bce256408..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-component-name.output.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import {
-  DisplayText,
-  Caption,
-  Subheading,
-  TextStyle,
-  VisuallyHidden,
-  Text,
-} from '@shopify/polaris';
-
-export function App() {
-  return (
-    <>
-      <DisplayText size="invalid">Display text</DisplayText>
-      <DisplayText size="extraLarge">Display text</DisplayText>
-      <DisplayText size="large">Display text</DisplayText>
-      <DisplayText size="medium">Display text</DisplayText>
-      <DisplayText size="small">Display text</DisplayText>
-      <Text as="h1" variant="headingMd">
-        Heading
-      </Text>
-      <Text variant="headingMd" as="h2">
-        Heading
-      </Text>
-      <Subheading element="h2">Subheading</Subheading>
-      <Subheading>Subheading</Subheading>
-      <Caption>Caption</Caption>
-      <TextStyle variation="strong">Strong</TextStyle>
-      <TextStyle variation="positive">Positive</TextStyle>
-      <TextStyle variation="negative">Negative</TextStyle>
-      <TextStyle variation="warning">Warning</TextStyle>
-      <TextStyle variation="code">Code</TextStyle>
-      <VisuallyHidden>Hidden text</VisuallyHidden>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx
deleted file mode 100644
index c9363744f98..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.input.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import type {HeadingProps} from '@shopify/polaris';
-import {Subheading} from '@shopify/polaris';
-
-const MyHeading = (_props: HeadingProps) => {
-  return null;
-};
-
-export function App() {
-  const headingProps: HeadingProps = {
-    element: 'h3',
-  };
-
-  return (
-    <>
-      <Subheading>Subheading</Subheading>
-      <MyHeading {...headingProps} />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx
deleted file mode 100644
index 75d5576ac52..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-other-component-and-other-component-props.output.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps,
-} from '@shopify/polaris';
-import {Text} from '@shopify/polaris';
-
-const MyHeading = (
-  _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps,
-) => {
-  return null;
-};
-
-export function App() {
-  const headingProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps = {
-    element: 'h3',
-  };
-
-  return (
-    <>
-      <Text variant="headingXs" as="h3">
-        Subheading
-      </Text>
-      <MyHeading {...headingProps} />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx
deleted file mode 100644
index 2459942aa53..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.input.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import {DisplayText} from '../DisplayText';
-
-export function App() {
-  return <DisplayText>Display text</DisplayText>;
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx
deleted file mode 100644
index 0b2165fa42b..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-display-text.output.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import {Text} from '../Text';
-
-export function App() {
-  return (
-    <Text variant="headingXl" as="p">
-      Display text
-    </Text>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx
deleted file mode 100644
index e8b245df74d..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.input.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import type {HeadingProps} from '../Heading';
-import {TextStyle} from '../TextStyle';
-
-const MyHeading = (_props: HeadingProps) => {
-  return null;
-};
-
-export function App() {
-  const headingProps: HeadingProps = {
-    element: 'h3',
-  };
-
-  return (
-    <>
-      <TextStyle variation="warning">Warning</TextStyle>
-      <MyHeading {...headingProps} />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx
deleted file mode 100644
index 96fdf6212a6..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-other-component-and-other-component-props.output.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps,
-} from '../Heading';
-import {Text} from '../Text';
-
-const MyHeading = (
-  _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps,
-) => {
-  return null;
-};
-
-export function App() {
-  const headingProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  HeadingProps = {
-    element: 'h3',
-  };
-
-  return (
-    <>
-      <Text variant="bodyMd" as="span" color="warning">
-        Warning
-      </Text>
-      <MyHeading {...headingProps} />
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx
deleted file mode 100644
index 538adb29ef6..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.input.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import type {TextStyleProps} from '../TextStyle';
-
-const MyTextStyle = (_props: TextStyleProps) => {
-  return null;
-};
-
-export function App() {
-  const textStyleProps: TextStyleProps = {
-    variation: 'positive',
-  };
-
-  return <MyTextStyle {...textStyleProps} />;
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx
deleted file mode 100644
index 6e1d5eaad6a..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative-text-style-props.output.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps,
-} from '../TextStyle';
-
-const MyTextStyle = (
-  _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps,
-) => {
-  return null;
-};
-
-export function App() {
-  const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps = {
-    variation: 'positive',
-  };
-
-  return <MyTextStyle {...textStyleProps} />;
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx
deleted file mode 100644
index 26f7d52c423..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.input.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import {DisplayText} from '../DisplayText';
-import {Heading} from '../Heading';
-import {Subheading} from '../Subheading';
-import {Caption} from '../Caption';
-import {TextStyle} from '../TextStyle';
-import {VisuallyHidden} from '../VisuallyHidden';
-
-export function App() {
-  return (
-    <>
-      <DisplayText size="invalid">Display text</DisplayText>
-      <DisplayText size="extraLarge">Display text</DisplayText>
-      <DisplayText size="large">Display text</DisplayText>
-      <DisplayText size="medium">Display text</DisplayText>
-      <DisplayText size="small">Display text</DisplayText>
-      <Heading element="h1">Heading</Heading>
-      <Heading>Heading</Heading>
-      <Subheading element="h2">Subheading</Subheading>
-      <Subheading>Subheading</Subheading>
-      <Caption>Caption</Caption>
-      <TextStyle variation="strong">Strong</TextStyle>
-      <TextStyle variation="positive">Positive</TextStyle>
-      <TextStyle variation="negative">Negative</TextStyle>
-      <TextStyle variation="warning">Warning</TextStyle>
-      <TextStyle variation="code">Code</TextStyle>
-      <VisuallyHidden>Hidden text</VisuallyHidden>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx
deleted file mode 100644
index 38cea8f97a9..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-relative.output.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-
-import {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: Text */
-  DisplayText,
-} from '../DisplayText';
-import {Text} from '../Text';
-import {InlineCode} from '../InlineCode';
-
-export function App() {
-  return (
-    <>
-      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
-      <DisplayText size="invalid">Display text</DisplayText>
-      <Text variant="heading4xl" as="p">
-        Display text
-      </Text>
-      <Text variant="heading2xl" as="p">
-        Display text
-      </Text>
-      <Text variant="headingXl" as="p">
-        Display text
-      </Text>
-      <Text variant="headingLg" as="p">
-        Display text
-      </Text>
-      <Text as="h1" variant="headingMd">
-        Heading
-      </Text>
-      <Text variant="headingMd" as="h2">
-        Heading
-      </Text>
-      <Text as="h2" variant="headingXs">
-        Subheading
-      </Text>
-      <Text variant="headingXs" as="h3">
-        Subheading
-      </Text>
-      <Text variant="bodySm" as="p">
-        Caption
-      </Text>
-      <Text variant="bodyMd" as="span" fontWeight="semibold">
-        Strong
-      </Text>
-      <Text variant="bodyMd" as="span" color="success">
-        Positive
-      </Text>
-      <Text variant="bodyMd" as="span" color="critical">
-        Negative
-      </Text>
-      <Text variant="bodyMd" as="span" color="warning">
-        Warning
-      </Text>
-      <Text variant="bodyMd" as="span">
-        <InlineCode>Code</InlineCode>
-      </Text>
-      <Text variant="bodySm" as="span" visuallyHidden>
-        Hidden text
-      </Text>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx
deleted file mode 100644
index 269155605f5..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.input.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import type {TextStyleProps} from '@shopify/polaris';
-
-const MyTextStyle = (_props: TextStyleProps) => {
-  return null;
-};
-
-export function App() {
-  const textStyleProps: TextStyleProps = {
-    variation: 'positive',
-  };
-
-  return <MyTextStyle {...textStyleProps} />;
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx b/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx
deleted file mode 100644
index 6e35285fdbe..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/with-text-style-props.output.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import type {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps,
-} from '@shopify/polaris';
-
-const MyTextStyle = (
-  _props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps,
-) => {
-  return null;
-};
-
-export function App() {
-  const textStyleProps: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* Replace with: TextProps */
-  TextStyleProps = {
-    variation: 'positive',
-  };
-
-  return <MyTextStyle {...textStyleProps} />;
-}
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts b/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts
deleted file mode 100644
index ca0cb3e21ed..00000000000
--- a/polaris-codemods/src/codemods/v10-react-replace-text-components/transform.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type {API, FileInfo, Options} from 'jscodeshift';
-
-import {typescript} from '../../utilities/constants';
-import {hasImportDeclaration} from '../../utilities/imports';
-import type {TransformInfo} from '../../utilities/types';
-
-import {replaceDisplayText} from './steps/replace-display-text';
-import type {components} from './steps/replace-other';
-import {replaceOther} from './steps/replace-other';
-import {replaceTextStyle} from './steps/replace-text-style';
-
-export interface MigrationOptions extends Options {
-  relative?: boolean;
-  componentName?: keyof typeof components | 'DisplayText' | 'TextStyle';
-}
-
-export const extensions = typescript.extensions;
-export const options: TransformInfo['options'] = {
-  relative: typescript.options.relative,
-  componentName: {
-    name: 'componentName',
-    type: 'string',
-    description: 'Target only a specific component. (DisplayText or TextStyle)',
-  },
-};
-
-export default function transformer(
-  file: FileInfo,
-  {jscodeshift: j}: API,
-  options: MigrationOptions,
-) {
-  const source = j(file.source);
-
-  if (
-    !options.relative &&
-    !hasImportDeclaration(j, source, '@shopify/polaris')
-  ) {
-    return file.source;
-  }
-
-  if (options.componentName) {
-    if (options.componentName === 'DisplayText') {
-      replaceDisplayText(j, source, options);
-    } else if (options.componentName === 'TextStyle') {
-      replaceTextStyle(j, source, options);
-    } else {
-      replaceOther(j, source, options);
-    }
-  } else {
-    replaceDisplayText(j, source, options);
-    replaceOther(j, source, options);
-    replaceTextStyle(j, source, options);
-  }
-
-  return source.toSource();
-}
diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx b/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx
deleted file mode 100644
index 9c1bb22d4ca..00000000000
--- a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.input.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {Page} from '@shopify/polaris';
-
-export function App({
-  breadcrumbProps = [{url: '/testing', content: 'Breadcrumb'}],
-}) {
-  const breadcrumbs = [{url: '/testing', content: 'Breadcrumb'}];
-  const getBreadcrumbs = () => [{url: '/testing', content: 'Breadcrumb'}];
-  return (
-    <>
-      <Page breadcrumbs={[{url: '/testing', content: 'Breadcrumb'}]}>
-        hello
-      </Page>
-      <Page
-        breadcrumbs={[
-          {url: '/testing', content: 'Breadcrumb'},
-          {url: '/testing2', content: 'Breadcrumb2'},
-        ]}
-      >
-        hello
-      </Page>
-      <Page breadcrumbs={[]}>testing</Page>
-      <Page breadcrumbs={breadcrumbs}>testing</Page>
-      <Page breadcrumbs={breadcrumbProps}>testing</Page>
-      <Page breadcrumbs={getBreadcrumbs()}>testing</Page>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx b/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx
deleted file mode 100644
index 301c99ebc69..00000000000
--- a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.output.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import {Page} from '@shopify/polaris';
-
-export function App({
-  breadcrumbProps = [{url: '/testing', content: 'Breadcrumb'}],
-}) {
-  const breadcrumbs = [{url: '/testing', content: 'Breadcrumb'}];
-  const getBreadcrumbs = () => [{url: '/testing', content: 'Breadcrumb'}];
-  return (
-    <>
-      <Page backAction={{url: '/testing', content: 'Breadcrumb'}}>hello</Page>
-      <Page backAction={{url: '/testing2', content: 'Breadcrumb2'}}>hello</Page>
-      <Page>testing</Page>
-      <Page
-        backAction={
-          /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. In this case, you will need to update the breadcrumbs variable to be a single object instead of an array as arrays have been deprecated. */
-          breadcrumbs
-        }
-      >
-        testing
-      </Page>
-      <Page
-        backAction={
-          /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. In this case, you will need to update the breadcrumbs variable to be a single object instead of an array as arrays have been deprecated. */
-          breadcrumbProps
-        }
-      >
-        testing
-      </Page>
-      <Page
-        backAction={
-          /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. In this case, you will need to update the breadcrumbs variable to be a single object instead of an array as arrays have been deprecated. */
-          getBreadcrumbs()
-        }
-      >
-        testing
-      </Page>
-    </>
-  );
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss
deleted file mode 100644
index 45d0f083186..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.input.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.border {
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-large);
-  border-radius: var(--p-border-radius-half);
-  border: var(--p-border-base);
-  border: var(--p-border-dark);
-  border: var(--p-border-transparent);
-  border: var(--p-border-divider);
-  border: var(--p-border-divider-on-dark);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss
deleted file mode 100644
index f587fc72324..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.output.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.border {
-  border-radius: var(--p-border-radius-1);
-  border-radius: var(--p-border-radius-2);
-  border-radius: var(--p-border-radius-full);
-  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  border: var(--p-border-width-1) solid transparent;
-  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  border: var(--p-border-width-1) solid var(--p-color-border-inverse);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss
deleted file mode 100644
index 4122b11ffba..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.input.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.basic {
-  color: var(--p-text);
-  color: var(--p-interactive);
-  background: var(--p-surface);
-  background: var(--p-interactive);
-  background-color: var(--p-surface);
-  border: var(--p-border-width-1) solid var(--p-border);
-  border: var(--p-border-width-1) solid var(--p-interactive);
-  border-color: var(--p-border);
-  outline: var(--p-border-width-1) solid var(--p-border);
-  outline: var(--p-border-width-1) solid var(--p-interactive);
-  outline-color: var(--p-border);
-  fill: var(--p-icon);
-  fill: var(--p-interactive);
-  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-border);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss
deleted file mode 100644
index f87e5407ff8..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.output.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.basic {
-  color: var(--p-color-text);
-  color: var(--p-color-text-interactive);
-  background: var(--p-color-bg);
-  background: var(--p-color-bg-interactive);
-  background-color: var(--p-color-bg);
-  border: var(--p-border-width-1) solid var(--p-color-border);
-  border: var(--p-border-width-1) solid var(--p-color-border-interactive);
-  border-color: var(--p-color-border);
-  outline: var(--p-border-width-1) solid var(--p-color-border);
-  outline: var(--p-border-width-1) solid var(--p-color-border-interactive);
-  outline-color: var(--p-color-border);
-  fill: var(--p-color-icon);
-  fill: var(--p-color-icon-interactive);
-  box-shadow: inset 0 0 var(--p-border-width-1) var(--p-color-border);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss
deleted file mode 100644
index 696a0f67873..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.input.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.depth {
-  box-shadow: var(--p-shadow-transparent);
-  box-shadow: var(--p-shadow-faint);
-  box-shadow: var(--p-shadow-base);
-  box-shadow: var(--p-shadow-deep);
-  box-shadow: var(--p-shadow-button);
-  box-shadow: var(--p-shadow-top-bar);
-  box-shadow: var(--p-shadow-card);
-  box-shadow: var(--p-shadow-popover);
-  box-shadow: var(--p-shadow-layer);
-  box-shadow: var(--p-shadow-modal);
-  box-shadow: var(--p-shadows-inset-button);
-  box-shadow: var(--p-shadows-inset-button-pressed);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss
deleted file mode 100644
index b58401f0ba2..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.output.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.depth {
-  box-shadow: var(--p-shadow-none);
-  box-shadow: var(--p-shadow-sm);
-  box-shadow: var(--p-shadow-md);
-  box-shadow: var(--p-shadow-md);
-  box-shadow: var(--p-shadow-sm);
-  box-shadow: var(--p-shadow-sm);
-  box-shadow: var(--p-shadow-md);
-  box-shadow: var(--p-shadow-xl);
-  box-shadow: var(--p-shadow-2xl);
-  box-shadow: var(--p-shadow-2xl);
-  box-shadow: var(--p-shadow-none);
-  box-shadow: var(--p-shadow-inset-md);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss
deleted file mode 100644
index d2ea19b7f72..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.input.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.legacy {
-  z-index: var(--p-override-loading-z-index);
-  width: var(--p-choice-size);
-  width: var(--p-icon-size-small);
-  width: var(--p-icon-size-medium);
-  margin: var(--p-choice-margin);
-  border-width: var(--p-control-border-width);
-  box-shadow: var(--p-banner-border-default);
-  box-shadow: var(--p-banner-border-success);
-  box-shadow: var(--p-banner-border-highlight);
-  box-shadow: var(--p-banner-border-warning);
-  box-shadow: var(--p-banner-border-critical);
-  border: var(--p-thin-border-subdued);
-  margin: var(--p-text-field-spinner-offset);
-  margin-left: var(--p-text-field-focus-ring-offset);
-  padding: var(--p-button-group-item-spacing);
-  width: var(--p-range-slider-thumb-size-base);
-  width: var(--p-range-slider-thumb-size-active);
-  margin: var(--p-frame-offset);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss
deleted file mode 100644
index 8ac792fe4d5..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.output.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.legacy {
-  z-index: var(--p-z-index-6);
-  width: 1.25rem;
-  width: 0.5rem;
-  width: 1.25rem;
-  margin: var(--p-space-025);
-  border-width: var(--p-border-width-2);
-  box-shadow: inset 0 (--p-border-width-1) 0 0 var(--p-color-border-strong),
-    inset 0 0 0 (--p-border-width-1) var(--p-color-border-strong);
-  box-shadow: inset 0 (--p-border-width-1) 0 0
-      var(--p-color-border-success-subdued),
-    inset 0 0 0 (--p-border-width-1) var(--p-color-border-success-subdued);
-  box-shadow: inset 0 (--p-border-width-1) 0 0
-      var(--p-color-border-info-subdued),
-    inset 0 0 0 (--p-border-width-1) var(--p-color-border-info-subdued);
-  box-shadow: inset 0 (--p-border-width-1) 0 0
-      var(--p-color-border-caution-subdued),
-    inset 0 0 0 (--p-border-width-1) var(--p-color-border-caution-subdued);
-  box-shadow: inset 0 (--p-border-width-1) 0 0
-      var(--p-color-border-critical-subdued),
-    inset 0 0 0 (--p-border-width-1) var(--p-color-border-critical-subdued);
-  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  margin: var(--p-space-05);
-  margin-left: calc(-1 * var(--p-space-1));
-  padding: calc(-1 * var(--p-space-025));
-  width: 1rem;
-  width: 1.5rem;
-  margin: 0;
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss
deleted file mode 100644
index f828c8d74fb..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.input.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.motion {
-  transition-timing-function: var(--p-linear);
-  transition-timing-function: var(--p-ease-in-out);
-  transition-timing-function: var(--p-ease-out);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease);
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-50);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-150);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-250);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-350);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-450);
-  transition-duration: var(--p-duration-500);
-  transition-duration: var(--p-duration-5000);
-  animation-name: var(--p-keyframes-bounce);
-  animation-name: var(--p-keyframes-fade-in);
-  animation-name: var(--p-keyframes-pulse);
-  animation-name: var(--p-keyframes-spin);
-  animation-name: var(--p-keyframes-appear-above);
-  animation-name: var(--p-keyframes-appear-below);
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss b/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss
deleted file mode 100644
index eb8e697c774..00000000000
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.output.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.motion {
-  transition-timing-function: var(--p-motion-linear);
-  transition-timing-function: var(--p-motion-ease-in-out);
-  transition-timing-function: var(--p-motion-ease-out);
-  transition-timing-function: var(--p-motion-ease-in);
-  transition-timing-function: var(--p-motion-ease);
-  transition-duration: var(--p-motion-duration-0);
-  transition-duration: var(--p-motion-duration-50);
-  transition-duration: var(--p-motion-duration-100);
-  transition-duration: var(--p-motion-duration-150);
-  transition-duration: var(--p-motion-duration-200);
-  transition-duration: var(--p-motion-duration-250);
-  transition-duration: var(--p-motion-duration-300);
-  transition-duration: var(--p-motion-duration-350);
-  transition-duration: var(--p-motion-duration-400);
-  transition-duration: var(--p-motion-duration-450);
-  transition-duration: var(--p-motion-duration-500);
-  transition-duration: var(--p-motion-duration-5000);
-  animation-name: var(--p-motion-keyframes-bounce);
-  animation-name: var(--p-motion-keyframes-fade-in);
-  animation-name: var(--p-motion-keyframes-pulse);
-  animation-name: var(--p-motion-keyframes-spin);
-  animation-name: var(--p-motion-keyframes-appear-above);
-  animation-name: var(--p-motion-keyframes-appear-below);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss
deleted file mode 100644
index 83524fb6ab8..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border-radius {
-  /* Migrate */
-  border-radius: legacy-polaris-v8.border-radius();
-  border-radius: legacy-polaris-v8.border-radius(base);
-  border-radius: legacy-polaris-v8.border-radius(large);
-
-  /* Ignore */
-  border-radius: calc(legacy-polaris-v8.border-radius(base) * 2);
-  border-radius: calc(
-    legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px)
-  );
-
-  /* Comment */
-  border-radius: legacy-polaris-v8.border-radius(base) * 2;
-  border-radius: legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px);
-  border-top-right-radius: legacy-polaris-v8.border-radius() *
-    legacy-polaris-v8.rem(4px);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss
deleted file mode 100644
index 8f1642d4c58..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border-radius {
-  /* Migrate */
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-large);
-
-  /* Ignore */
-  border-radius: calc(legacy-polaris-v8.border-radius(base) * 2);
-  border-radius: calc(
-    legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px)
-  );
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-base) * 2;
-  border-radius: legacy-polaris-v8.border-radius(base) * 2;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-base) * legacy-polaris-v8.rem(1px);
-  border-radius: legacy-polaris-v8.border-radius() * legacy-polaris-v8.rem(1px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-top-right-radius: var(--p-border-radius-base) * legacy-polaris-v8.rem(4px);
-  border-top-right-radius: legacy-polaris-v8.border-radius() *
-    legacy-polaris-v8.rem(4px);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss
deleted file mode 100644
index 4199d2e9c82..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.input.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  /* Migrate */
-  border: border-width() solid var(--p-border-subdued);
-  border: border-width(base) solid var(--p-border-subdued);
-  border: border-width(thick) solid var(--p-border-subdued);
-  border: border-width(thicker) solid var(--p-border-subdued);
-  border-width: border-width('thicker');
-
-  /* Ignore */
-  border-width: calc(-1 * border-width());
-  border-width: calc($var * border-width());
-  border-width: rem(1px) rem(10px - border-width());
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss
deleted file mode 100644
index eedfbe975ea..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.output.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-2) solid var(--p-border-subdued);
-  border: var(--p-border-width-3) solid var(--p-border-subdued);
-  border-width: var(--p-border-width-3);
-
-  /* Ignore */
-  border-width: calc(-1 * border-width());
-  border-width: calc($var * border-width());
-  border-width: rem(1px) rem(10px - border-width());
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss
deleted file mode 100644
index c38b7116114..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  /* Migrate */
-  border: legacy-polaris-v8.border-width() solid var(--p-border-subdued);
-  border: legacy-polaris-v8.border-width(base) solid var(--p-border-subdued);
-  border: legacy-polaris-v8.border-width(thick) solid var(--p-border-subdued);
-  border: legacy-polaris-v8.border-width(thicker) solid var(--p-border-subdued);
-  border-width: legacy-polaris-v8.border-width('thicker');
-
-  /* Ignore */
-  border-width: calc(-1 * legacy-polaris-v8.border-width());
-  border-width: calc($var * legacy-polaris-v8.border-width());
-  border-width: legacy-polaris-v8.rem(1px)
-    legacy-polaris-v8.rem(10px - legacy-polaris-v8.border-width());
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss
deleted file mode 100644
index 4f673b07f1f..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-2) solid var(--p-border-subdued);
-  border: var(--p-border-width-3) solid var(--p-border-subdued);
-  border-width: var(--p-border-width-3);
-
-  /* Ignore */
-  border-width: calc(-1 * legacy-polaris-v8.border-width());
-  border-width: calc($var * legacy-polaris-v8.border-width());
-  border-width: legacy-polaris-v8.rem(1px)
-    legacy-polaris-v8.rem(10px - legacy-polaris-v8.border-width());
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts
deleted file mode 100644
index eaf92582f11..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-width/transform.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  getFunctionArgs,
-  isSassFunction,
-  namespace,
-  isNumericOperator,
-  StopWalkingFunctionNodes,
-  createInlineComment,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedBorderWidth = namespace('border-width', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-border-width',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      if (!borderProps.has(decl.prop)) return;
-
-      /**
-       * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.)
-       *
-       * Note: This is evaluated at the end of each visitor execution to determine whether
-       * or not to replace the declaration or insert a comment.
-       */
-      const targets: {replaced: boolean}[] = [];
-      let hasNumericOperator = false;
-      const parsedValue = valueParser(decl.value);
-
-      handleBorderProps();
-
-      if (targets.some(({replaced}) => !replaced || hasNumericOperator)) {
-        // Insert comment if the declaration value contains calculations
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      //
-      // Handlers
-      //
-
-      function handleBorderProps() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedBorderWidth, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (!(args.length === 0 || args.length === 1)) return;
-
-              // `border-width()` args reference:
-              // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L616
-              const value = args[0] ?? 'base';
-
-              if (!isKeyOf(borderWidthFunctionMap, value)) return;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: borderWidthFunctionMap[value],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: borderWidthFunctionMap[value].length,
-                },
-              ];
-
-              targets[targets.length - 1]!.replaced = true;
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-    },
-  };
-};
-
-const borderProps = new Set([
-  'border',
-  'border-top',
-  'border-right',
-  'border-bottom',
-  'border-left',
-  'border-width',
-  'border-top-width',
-  'border-right-width',
-  'border-bottom-width',
-  'border-left-width',
-]);
-
-const borderWidthFunctionMap = {
-  '': '--p-border-width-1',
-  base: '--p-border-width-1',
-  "'base'": '--p-border-width-1',
-  thick: '--p-border-width-2',
-  "'thick'": '--p-border-width-2',
-  thicker: '--p-border-width-3',
-  "'thicker'": '--p-border-width-3',
-} as const;
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss
deleted file mode 100644
index 9633ef3398b..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.input.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  border: border();
-  border: border(base);
-  border: border('base');
-  border: border(dark);
-  border: border('dark');
-  border-bottom: border(transparent);
-  border: border('transparent');
-  border: border(divider);
-  border-left: border('divider');
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss
deleted file mode 100644
index b18004d14a5..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/v9-scss-replace-border.output.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  border: var(--p-border-base);
-  border: var(--p-border-base);
-  border: var(--p-border-base);
-  border: var(--p-border-dark);
-  border: var(--p-border-dark);
-  border-bottom: var(--p-border-transparent);
-  border: var(--p-border-transparent);
-  border: var(--p-border-divider);
-  border-left: var(--p-border-divider);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss
deleted file mode 100644
index 160068c85d2..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* stylelint-disable */
-
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  border: legacy-polaris-v8.border();
-  border: legacy-polaris-v8.border(base);
-  border: legacy-polaris-v8.border('base');
-  border: legacy-polaris-v8.border(dark);
-  border: legacy-polaris-v8.border('dark');
-  border-bottom: legacy-polaris-v8.border(transparent);
-  border: legacy-polaris-v8.border('transparent');
-  border: legacy-polaris-v8.border(divider);
-  border-left: legacy-polaris-v8.border('divider');
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss
deleted file mode 100644
index 749761f4ea1..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/* stylelint-disable */
-
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  border: var(--p-border-base);
-  border: var(--p-border-base);
-  border: var(--p-border-base);
-  border: var(--p-border-dark);
-  border: var(--p-border-dark);
-  border-bottom: var(--p-border-transparent);
-  border: var(--p-border-transparent);
-  border: var(--p-border-divider);
-  border-left: var(--p-border-divider);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts
deleted file mode 100644
index 15967312e2f..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-border/transform.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  getFunctionArgs,
-  isSassFunction,
-  namespace,
-  createInlineComment,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedBorder = namespace('border', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-border',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      if (!borderProps.has(decl.prop)) return;
-
-      /**
-       * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.)
-       *
-       * Note: This is evaluated at the end of each visitor execution to determine whether
-       * or not to replace the declaration or insert a comment.
-       */
-      const targets: {replaced: boolean}[] = [];
-      const parsedValue = valueParser(decl.value);
-
-      handleBorderProps();
-
-      if (targets.some(({replaced}) => !replaced)) {
-        // Insert comment if the declaration value contains calculations
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      //
-      // Handlers
-      //
-
-      function handleBorderProps() {
-        parsedValue.walk((node) => {
-          if (
-            node.type === 'function' &&
-            isSassFunction(namespacedBorder, node)
-          ) {
-            targets.push({replaced: false});
-
-            const args = getFunctionArgs(node);
-
-            if (!(args.length === 0 || args.length === 1)) return;
-
-            // `border()` args reference:
-            // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L641
-            const value = args[0] ?? 'base';
-
-            if (!isKeyOf(borderFunctionMap, value)) return;
-
-            node.value = 'var';
-            node.nodes = [
-              {
-                type: 'word',
-                value: borderFunctionMap[value],
-                sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                sourceEndIndex: borderFunctionMap[value].length,
-              },
-            ];
-
-            targets[targets.length - 1]!.replaced = true;
-          }
-        });
-      }
-    },
-  };
-};
-
-const borderProps = new Set([
-  'border',
-  'border-top',
-  'border-right',
-  'border-bottom',
-  'border-left',
-]);
-
-const borderFunctionMap = {
-  '': '--p-border-base',
-  base: '--p-border-base',
-  "'base'": '--p-border-base',
-  dark: '--p-border-dark',
-  "'dark'": '--p-border-dark',
-  transparent: '--p-border-transparent',
-  "'transparent'": '--p-border-transparent',
-  divider: '	--p-border-divider',
-  "'divider'": '	--p-border-divider',
-} as const;
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss
deleted file mode 100644
index 2ccddc6eb87..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.input.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.root {
-  @include page-content-when-partially-condensed {
-    padding-bottom: spacing(loose);
-
-    &.Active {
-      border-bottom: rem(3px) solid color('ink');
-    }
-
-    @include page-content-when-not-partially-condensed {
-      padding: 0 spacing(extra-loose);
-    }
-  }
-
-  @include page-content-when-fully-condensed {
-    margin: 0 spacing(loose) spacing(tight);
-  }
-
-  @include page-content-when-not-fully-condensed {
-    border-radius: spacing(tight);
-  }
-
-  @include page-when-not-max-width {
-    border-radius: spacing(tight);
-  }
-
-  @include page-content-when-layout-stacked {
-    @include stacked-elements;
-  }
-
-  @include page-content-when-layout-not-stacked {
-    border-radius: spacing(tight);
-  }
-
-  @include page-after-resource-list-small {
-    border-radius: spacing(tight);
-  }
-
-  @include page-before-resource-list-small {
-    border-radius: spacing(tight);
-  }
-
-  @include after-topbar-sheet {
-    max-width: $content-max-width + (2 * spacing(extra-loose));
-
-    > li {
-      margin-right: spacing();
-    }
-
-    &.TwoColumn > li {
-      flex: 0 calc(50% - #{spacing(extra-loose)});
-    }
-  }
-
-  @include frame-with-nav-when-not-max-width {
-    padding: spacing(tight) 0;
-  }
-
-  @mixin global-nav-offset {
-    @include frame-when-nav-displayed {
-      left: $global-nav-width;
-      width: calc(100% - #{$global-nav-width});
-    }
-  }
-
-  .Large {
-    @include frame-when-nav-displayed {
-      width: $sheet-desktop-width-large;
-    }
-  }
-
-  @include frame-when-nav-displayed {
-    @include breakpoint-after(
-      layout-width(page-content, not-condensed) + layout-width(nav)
-    ) {
-      @content;
-    }
-  }
-
-  @include frame-when-nav-hidden {
-    @include stick-to-bottom-container;
-  }
-
-  .MinimizableVideoToolbar {
-    &.Inline {
-      @include frame-when-nav-hidden {
-        display: none;
-      }
-    }
-  }
-
-  @include frame-when-nav-hidden {
-    @include page-content-when-not-partially-condensed {
-      width: rem(200px);
-    }
-  }
-
-  @mixin breakpoint-tablet-not-condensed {
-    @include frame-when-nav-hidden {
-      @include page-content-when-not-partially-condensed {
-        @content;
-      }
-    }
-
-    @include frame-when-nav-displayed {
-      @include breakpoint-after(
-        layout-width(page-content, not-condensed) + layout-width(nav)
-      ) {
-        @content;
-      }
-    }
-  }
-
-  > *:not(:last-child) {
-    @include when-typography-condensed {
-      margin-bottom: var(--p-space-4);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss
deleted file mode 100644
index bd30f468a17..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.output.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.root {
-  @media #{$p-breakpoints-lg-down} {
-    padding-bottom: spacing(loose);
-
-    &.Active {
-      border-bottom: rem(3px) solid color('ink');
-    }
-
-    @media #{$p-breakpoints-md-up} {
-      padding: 0 spacing(extra-loose);
-    }
-  }
-
-  @media #{$p-breakpoints-sm-down} {
-    margin: 0 spacing(loose) spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    @include stacked-elements;
-  }
-
-  @media #{$p-breakpoints-md-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-down} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    max-width: $content-max-width + (2 * spacing(extra-loose));
-
-    > li {
-      margin-right: spacing();
-    }
-
-    &.TwoColumn > li {
-      flex: 0 calc(50% - #{spacing(extra-loose)});
-    }
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    padding: spacing(tight) 0;
-  }
-
-  @mixin global-nav-offset {
-    @media #{$p-breakpoints-md-up} {
-      left: $global-nav-width;
-      width: calc(100% - #{$global-nav-width});
-    }
-  }
-
-  .Large {
-    @media #{$p-breakpoints-md-up} {
-      width: $sheet-desktop-width-large;
-    }
-  }
-
-  @media #{$p-breakpoints-md-up} {
-    @include breakpoint-after(
-      layout-width(page-content, not-condensed) + layout-width(nav)
-    ) {
-      @content;
-    }
-  }
-
-  @media #{$p-breakpoints-md-down} {
-    @include stick-to-bottom-container;
-  }
-
-  .MinimizableVideoToolbar {
-    &.Inline {
-      @media #{$p-breakpoints-md-down} {
-        display: none;
-      }
-    }
-  }
-
-  @media #{$p-breakpoints-md-down} {
-    @media #{$p-breakpoints-md-up} {
-      width: rem(200px);
-    }
-  }
-
-  @mixin breakpoint-tablet-not-condensed {
-    @media #{$p-breakpoints-md-down} {
-      @media #{$p-breakpoints-md-up} {
-        @content;
-      }
-    }
-
-    @media #{$p-breakpoints-md-up} {
-      @include breakpoint-after(
-        layout-width(page-content, not-condensed) + layout-width(nav)
-      ) {
-        @content;
-      }
-    }
-  }
-
-  > *:not(:last-child) {
-    @media #{$p-breakpoints-md-down} {
-      margin-bottom: var(--p-space-4);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss
deleted file mode 100644
index 38437c954b4..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.root {
-  @include legacy-polaris-v8.page-content-when-partially-condensed {
-    padding-bottom: spacing(loose);
-
-    &.Active {
-      border-bottom: rem(3px) solid color('ink');
-    }
-
-    @include legacy-polaris-v8.page-content-when-not-partially-condensed {
-      padding: 0 spacing(extra-loose);
-    }
-  }
-
-  @include legacy-polaris-v8.page-content-when-fully-condensed {
-    margin: 0 spacing(loose) spacing(tight);
-  }
-
-  @include legacy-polaris-v8.page-content-when-not-fully-condensed {
-    border-radius: spacing(tight);
-  }
-
-  @include legacy-polaris-v8.page-when-not-max-width {
-    border-radius: spacing(tight);
-  }
-
-  @include legacy-polaris-v8.page-content-when-layout-stacked {
-    @include legacy-polaris-v8.stacked-elements;
-  }
-
-  @include legacy-polaris-v8.page-content-when-layout-not-stacked {
-    border-radius: spacing(tight);
-  }
-
-  @include legacy-polaris-v8.page-after-resource-list-small {
-    border-radius: spacing(tight);
-  }
-
-  @include legacy-polaris-v8.page-before-resource-list-small {
-    border-radius: spacing(tight);
-  }
-
-  @include legacy-polaris-v8.after-topbar-sheet {
-    max-width: $content-max-width + (2 * spacing(extra-loose));
-
-    > li {
-      margin-right: spacing();
-    }
-
-    &.TwoColumn > li {
-      flex: 0 calc(50% - #{spacing(extra-loose)});
-    }
-  }
-
-  @include legacy-polaris-v8.frame-with-nav-when-not-max-width {
-    padding: spacing(tight) 0;
-  }
-
-  @mixin global-nav-offset {
-    @include legacy-polaris-v8.frame-when-nav-displayed {
-      left: $global-nav-width;
-      width: calc(100% - #{$global-nav-width});
-    }
-  }
-
-  .Large {
-    @include legacy-polaris-v8.frame-when-nav-displayed {
-      width: $sheet-desktop-width-large;
-    }
-  }
-
-  @include legacy-polaris-v8.frame-when-nav-displayed {
-    @include legacy-polaris-v8.breakpoint-after(
-      layout-width(page-content, not-condensed) + layout-width(nav)
-    ) {
-      @content;
-    }
-  }
-
-  @include legacy-polaris-v8.frame-when-nav-hidden {
-    @include legacy-polaris-v8.stick-to-bottom-container;
-  }
-
-  .MinimizableVideoToolbar {
-    &.Inline {
-      @include legacy-polaris-v8.frame-when-nav-hidden {
-        display: none;
-      }
-    }
-  }
-
-  @include legacy-polaris-v8.frame-when-nav-hidden {
-    @include legacy-polaris-v8.page-content-when-not-partially-condensed {
-      width: rem(200px);
-    }
-  }
-
-  @mixin breakpoint-tablet-not-condensed {
-    @include legacy-polaris-v8.frame-when-nav-hidden {
-      @include legacy-polaris-v8.page-content-when-not-partially-condensed {
-        @content;
-      }
-    }
-
-    @include legacy-polaris-v8.frame-when-nav-displayed {
-      @include legacy-polaris-v8.breakpoint-after(
-        layout-width(page-content, not-condensed) + layout-width(nav)
-      ) {
-        @content;
-      }
-    }
-  }
-
-  > *:not(:last-child) {
-    @include legacy-polaris-v8.when-typography-condensed {
-      margin-bottom: var(--p-space-4);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss
deleted file mode 100644
index 9bc631dce3c..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.root {
-  @media #{$p-breakpoints-lg-down} {
-    padding-bottom: spacing(loose);
-
-    &.Active {
-      border-bottom: rem(3px) solid color('ink');
-    }
-
-    @media #{$p-breakpoints-md-up} {
-      padding: 0 spacing(extra-loose);
-    }
-  }
-
-  @media #{$p-breakpoints-sm-down} {
-    margin: 0 spacing(loose) spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    @include legacy-polaris-v8.stacked-elements;
-  }
-
-  @media #{$p-breakpoints-md-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-down} {
-    border-radius: spacing(tight);
-  }
-
-  @media #{$p-breakpoints-sm-up} {
-    max-width: $content-max-width + (2 * spacing(extra-loose));
-
-    > li {
-      margin-right: spacing();
-    }
-
-    &.TwoColumn > li {
-      flex: 0 calc(50% - #{spacing(extra-loose)});
-    }
-  }
-
-  @media #{$p-breakpoints-lg-down} {
-    padding: spacing(tight) 0;
-  }
-
-  @mixin global-nav-offset {
-    @media #{$p-breakpoints-md-up} {
-      left: $global-nav-width;
-      width: calc(100% - #{$global-nav-width});
-    }
-  }
-
-  .Large {
-    @media #{$p-breakpoints-md-up} {
-      width: $sheet-desktop-width-large;
-    }
-  }
-
-  @media #{$p-breakpoints-md-up} {
-    @include legacy-polaris-v8.breakpoint-after(
-      layout-width(page-content, not-condensed) + layout-width(nav)
-    ) {
-      @content;
-    }
-  }
-
-  @media #{$p-breakpoints-md-down} {
-    @include legacy-polaris-v8.stick-to-bottom-container;
-  }
-
-  .MinimizableVideoToolbar {
-    &.Inline {
-      @media #{$p-breakpoints-md-down} {
-        display: none;
-      }
-    }
-  }
-
-  @media #{$p-breakpoints-md-down} {
-    @media #{$p-breakpoints-md-up} {
-      width: rem(200px);
-    }
-  }
-
-  @mixin breakpoint-tablet-not-condensed {
-    @media #{$p-breakpoints-md-down} {
-      @media #{$p-breakpoints-md-up} {
-        @content;
-      }
-    }
-
-    @media #{$p-breakpoints-md-up} {
-      @include legacy-polaris-v8.breakpoint-after(
-        layout-width(page-content, not-condensed) + layout-width(nav)
-      ) {
-        @content;
-      }
-    }
-  }
-
-  > *:not(:last-child) {
-    @media #{$p-breakpoints-md-down} {
-      margin-bottom: var(--p-space-4);
-    }
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts
deleted file mode 100644
index caa4273d97c..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/transform.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-
-import type {NamespaceOptions} from '../../utilities/sass';
-import {getNamespacePattern} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacePattern = getNamespacePattern(options);
-
-  const namespacedMixinRegExp = new RegExp(
-    String.raw`^${namespacePattern}([\w-]+)`,
-  );
-
-  return {
-    postcssPlugin: 'v9-scss-replace-breakpoints',
-    AtRule(atRule) {
-      if (atRule.name !== 'include') return;
-
-      // Extract mixin name e.g. name from `@include name;` or `@include name();`
-      const mixinName = atRule.params.match(namespacedMixinRegExp)?.[1];
-
-      if (!isKeyOf(staticBreakpointMixins, mixinName)) return;
-
-      atRule.assign({
-        name: 'media',
-        params: staticBreakpointMixins[mixinName],
-      });
-    },
-  };
-};
-
-/** Mapping of static breakpoint mixins from old to new */
-const staticBreakpointMixins = {
-  'page-content-when-partially-condensed': '#{$p-breakpoints-lg-down}',
-  'page-content-when-not-partially-condensed': '#{$p-breakpoints-md-up}',
-  'page-content-when-fully-condensed': '#{$p-breakpoints-sm-down}',
-  'page-content-when-not-fully-condensed': '#{$p-breakpoints-sm-up}',
-  'page-content-when-layout-stacked': '#{$p-breakpoints-lg-down}',
-  'page-content-when-layout-not-stacked': '#{$p-breakpoints-md-up}',
-  'page-before-resource-list-small': '#{$p-breakpoints-sm-down}',
-  'page-after-resource-list-small': '#{$p-breakpoints-sm-up}',
-  'page-when-not-max-width': '#{$p-breakpoints-lg-down}',
-  'when-typography-condensed': '#{$p-breakpoints-md-down}',
-  'when-typography-not-condensed': '#{$p-breakpoints-md-up}',
-  'frame-when-nav-hidden': '#{$p-breakpoints-md-down}',
-  'frame-when-nav-displayed': '#{$p-breakpoints-md-up}',
-  'frame-with-nav-when-not-max-width': '#{$p-breakpoints-lg-down}',
-  'after-topbar-sheet': '#{$p-breakpoints-sm-up}',
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss
deleted file mode 100644
index f658252cbdb..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.input.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.my-class {
-  // color
-  color: color('blue');
-  color: color('blue', 'dark');
-  color: color('green');
-  color: color('green', 'dark');
-  color: color('yellow');
-  color: color('yellow', 'dark');
-  color: color('red');
-  color: color('red', 'dark');
-  color: color('ink');
-  color: color('ink', 'light');
-  color: color('ink', 'lighter');
-  color: color('ink', 'lightest');
-  color: color('sky');
-  color: color('sky', 'dark');
-  color: color('sky', 'light');
-  color: color('sky', 'lighter');
-  color: color('black');
-  color: color('white');
-
-  // background
-  background-color: color('green', 'light');
-  background-color: color('green', 'lighter');
-  background-color: color('yellow', 'light');
-  background-color: color('yellow', 'lighter');
-  background-color: color('red', 'light');
-  background-color: color('red', 'lighter');
-  background-color: color('ink');
-  background-color: color('ink', 'dark');
-  background-color: color('sky');
-  background-color: color('sky', 'light');
-  background-color: color('sky', 'lighter');
-  background-color: color('black');
-  background-color: color('white');
-
-  // border
-  border-color: color('green', 'dark');
-  border-color: color('green');
-  border-color: color('green', 'light');
-  border-color: color('green', 'lighter');
-  border-color: color('yellow', 'dark');
-  border-color: color('yellow');
-  border-color: color('yellow', 'light');
-  border-color: color('yellow', 'lighter');
-  border-color: color('red', 'dark');
-  border-color: color('red');
-  border-color: color('red', 'light');
-  border-color: color('red', 'lighter');
-  border-color: color('ink', 'lightest');
-  border-color: color('sky', 'light');
-
-  // fill
-  fill: color('green', 'dark');
-  fill: color('green');
-  fill: color('yellow', 'dark');
-  fill: color('yellow');
-  fill: color('red', 'dark');
-  fill: color('red');
-  fill: color('ink');
-  fill: color('ink', 'light');
-  fill: color('ink', 'lighter');
-  fill: color('ink', 'lightest');
-  fill: color('black');
-  fill: color('white');
-
-  // Remove color() fallbacks
-  color: var(--p-text, color('white'));
-
-  // Handle declarations with multiple values
-  border: var(--p-border-width-1) solid color('ink', 'lightest');
-  background: border-box color('sky', 'light');
-
-  // Skip color() with a for-background argument
-  color: color('ink', 'lighter', #f2ece4);
-
-  // Skip replacing color() within a function
-  background: rgba(color('black'), 0.5);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss
deleted file mode 100644
index 13ddb84cea0..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/v9-scss-replace-color.output.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.my-class {
-  // color
-  color: var(--p-interactive);
-  color: var(--p-interactive-hovered);
-  color: var(--p-text-success);
-  color: var(--p-text-success);
-  color: var(--p-text-warning);
-  color: var(--p-text-warning);
-  color: var(--p-text-critical);
-  color: var(--p-text-critical);
-  color: var(--p-text);
-  color: var(--p-text-subdued);
-  color: var(--p-text-subdued);
-  color: var(--p-text-subdued);
-  color: var(--p-text-on-dark);
-  color: var(--p-text-subdued-on-dark);
-  color: var(--p-text-on-dark);
-  color: var(--p-text-on-dark);
-  color: var(--p-text);
-  color: var(--p-text-on-dark);
-
-  // background
-  background-color: var(--p-surface-success);
-  background-color: var(--p-surface-success-subdued);
-  background-color: var(--p-surface-warning);
-  background-color: var(--p-surface-warning-subdued);
-  background-color: var(--p-surface-critical);
-  background-color: var(--p-surface-critical-subdued);
-  background-color: var(--p-surface-neutral-subdued-dark);
-  background-color: var(--p-surface-dark);
-  background-color: var(--p-surface-neutral);
-  background-color: var(--p-surface-neutral-subdued);
-  background-color: var(--p-surface-subdued);
-  background-color: var(--p-surface-dark);
-  background-color: var(--p-surface);
-
-  // border
-  border-color: var(--p-border-success);
-  border-color: var(--p-border-success);
-  border-color: var(--p-border-success-subdued);
-  border-color: var(--p-border-success-subdued);
-  border-color: var(--p-border-warning);
-  border-color: var(--p-border-warning);
-  border-color: var(--p-border-warning-disabled);
-  border-color: var(--p-border-warning-subdued);
-  border-color: var(--p-border-critical);
-  border-color: var(--p-border-critical);
-  border-color: var(--p-border-critical-subdued);
-  border-color: var(--p-border-critical-subdued);
-  border-color: var(--p-border);
-  border-color: var(--p-border-subdued);
-
-  // fill
-  fill: var(--p-icon-success);
-  fill: var(--p-icon-success);
-  fill: var(--p-icon-warning);
-  fill: var(--p-icon-warning);
-  fill: var(--p-icon-critical);
-  fill: var(--p-icon-critical);
-  fill: var(--p-icon);
-  fill: var(--p-icon);
-  fill: var(--p-icon-subdued);
-  fill: var(--p-icon-disabled);
-  fill: var(--p-icon);
-  fill: var(--p-icon-on-dark);
-
-  // Remove color() fallbacks
-  color: var(--p-text);
-
-  // Handle declarations with multiple values
-  border: var(--p-border-width-1) solid var(--p-border);
-  background: border-box var(--p-surface-neutral-subdued);
-
-  // Skip color() with a for-background argument
-  color: color('ink', 'lighter', #f2ece4);
-
-  // Skip replacing color() within a function
-  background: rgba(color('black'), 0.5);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss
deleted file mode 100644
index bed02c3ceeb..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  color: legacy-polaris-v8.color('ink');
-  color: legacy-polaris-v8.color('ink', 'lighter');
-  color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4);
-  color: var(--p-surface, legacy-polaris-v8.color('white'));
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss
deleted file mode 100644
index e1b2d4eb9a8..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  color: var(--p-text);
-  color: var(--p-text-subdued);
-  color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4);
-  color: var(--p-surface);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts b/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts
deleted file mode 100644
index 0b3c16e379b..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/v10-legacy-colors.ts
+++ /dev/null
@@ -1,647 +0,0 @@
-export const colors = {
-  background: {
-    value: 'rgba(246, 246, 247, 1)',
-    description:
-      'For use as a background color, in components such as Page and Frame backgrounds.',
-  },
-  'background-hovered': {
-    value: 'rgba(241, 242, 243, 1)',
-    description:
-      'For use when an action or navigation is used on a background.',
-  },
-  'background-pressed': {
-    value: 'rgba(237, 238, 239, 1)',
-    description:
-      'For use when an action or navigation is used on a background.',
-  },
-  'background-selected': {
-    value: 'rgba(237, 238, 239, 1)',
-    description: 'For use in the selected item in navigation',
-  },
-  surface: {
-    value: 'rgba(255, 255, 255, 1)',
-    description:
-      'For use as a background color, in components such as Card, Modal, and Popover.',
-  },
-  'surface-dark': {
-    value: 'rgba(32, 33, 35, 1)',
-    description:
-      'For use as a dark background color, in components such as Card, Modal, and Popover.',
-  },
-  'surface-neutral': {
-    value: 'rgba(228, 229, 231, 1)',
-    description: 'For use as a background color in neutral badges.',
-  },
-  'surface-neutral-hovered': {
-    value: 'rgba(219, 221, 223, 1)',
-    description: 'For use as a hovered background color in neutral badges.',
-  },
-  'surface-neutral-pressed': {
-    value: 'rgba(201, 204, 208, 1)',
-    description: 'For use as a pressed background color in neutral badges.',
-  },
-  'surface-neutral-disabled': {
-    value: 'rgba(241, 242, 243, 1)',
-    description: 'For use as a disabled background color in neutral badges.',
-  },
-  'surface-neutral-subdued': {
-    value: 'rgba(246, 246, 247, 1)',
-    description: 'For use as a background color in neutral banners.',
-  },
-  'surface-neutral-subdued-dark': {
-    value: 'rgba(68, 71, 74, 1)',
-    description: 'For use as a dark background color in neutral banners.',
-  },
-  'surface-subdued': {
-    value: 'rgba(250, 251, 251, 1)',
-    description:
-      'For use as a subdued background color, in components such as Card, Modal, and Popover.',
-  },
-  'surface-disabled': {
-    value: 'rgba(250, 251, 251, 1)',
-    description:
-      'For use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state.',
-  },
-  'surface-hovered': {
-    value: 'rgba(246, 246, 247, 1)',
-    description:
-      'For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state.',
-  },
-  'surface-hovered-dark': {
-    value: 'rgba(47, 49, 51, 1)',
-    description:
-      'For use as a dark surface color on interactive elements such as resource list items and action list items when in a hovered state.',
-  },
-  'surface-pressed': {
-    value: 'rgba(241, 242, 243, 1)',
-    description:
-      'For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state.',
-  },
-  'surface-pressed-dark': {
-    value: 'rgba(62, 64, 67, 1)',
-    description:
-      'For use as a dark surface color on interactive elements such as resource list items and action list items when in a pressed state.',
-  },
-  'surface-depressed': {
-    value: 'rgba(237, 238, 239, 1)',
-    description:
-      'For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state.',
-  },
-  'surface-search-field': {
-    value: 'rgba(241, 242, 243, 1)',
-    description:
-      'For use as a background color, in components on surface elements such as SearchField',
-  },
-  'surface-search-field-dark': {
-    value: 'rgba(47, 49, 51, 1)',
-    description:
-      'For use as a dark background color, in components on surface elements such as SearchField',
-  },
-  backdrop: {
-    value: 'rgba(0, 0, 0, 0.5)',
-    description:
-      'For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`.',
-  },
-  overlay: {
-    value: 'rgba(255, 255, 255, 0.5)',
-    description:
-      'For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`.',
-  },
-  'shadow-color-picker': {
-    value: 'rgba(0, 0, 0, 0.5)',
-  },
-  'shadow-color-picker-dragger': {
-    value: 'rgba(33, 43, 54, 0.32)',
-  },
-  'hint-from-direct-light': {
-    value: 'rgba(0, 0, 0, 0.15)',
-    description: 'For use in building shadows scrollables.',
-  },
-  border: {
-    value: 'rgba(140, 145, 150, 1)',
-    description: 'For use as the default border on elements.',
-  },
-  'border-on-dark': {
-    value: 'rgba(80, 83, 86, 1)',
-    description: 'For use as the default border on dark elements.',
-  },
-  'border-neutral-subdued': {
-    value: 'rgba(186, 191, 195, 1)',
-    description: 'For use as the border on banners.',
-  },
-  'border-hovered': {
-    value: 'rgba(153, 158, 164, 1)',
-    description: 'Used for borders on hovered interactive elements',
-  },
-  'border-disabled': {
-    value: 'rgba(210, 213, 216, 1)',
-    description: 'Used for disabled borders on interactive elements',
-  },
-  'border-subdued': {
-    value: 'rgba(201, 204, 207, 1)',
-    description: 'For use as a subdued border on elements.',
-  },
-  'border-depressed': {
-    value: 'rgba(87, 89, 89, 1)',
-    description: 'For use as a border on depressed elements.',
-  },
-  'border-shadow': {
-    value: 'rgba(174, 180, 185, 1)',
-    description: 'For use as an additional bottom border on elements.',
-  },
-  'border-shadow-subdued': {
-    value: 'rgba(186, 191, 196, 1)',
-    description: 'For use as an additional, subdued bottom border on elements.',
-  },
-  divider: {
-    value: 'rgba(225, 227, 229, 1)',
-    description: 'For use as a divider between elements.',
-  },
-  'divider-dark': {
-    value: 'rgba(69, 71, 73, 1)',
-    description: 'For use as a dark divider between elements.',
-  },
-  icon: {
-    value: 'rgba(92, 95, 98, 1)',
-    description: 'For use as the fill color of icons.',
-  },
-  'icon-on-dark': {
-    value: 'rgba(166, 172, 178, 1)',
-    description: 'For use as the fill color of dark icons.',
-  },
-  'icon-hovered': {
-    value: 'rgba(26, 28, 29, 1)',
-    description: 'For use as the fill color of hovered icons.',
-  },
-  'icon-pressed': {
-    value: 'rgba(68, 71, 74, 1)',
-    description: 'For use as the fill color of pressed icons.',
-  },
-  'icon-disabled': {
-    value: 'rgba(186, 190, 195, 1)',
-    description: 'For use as the fill color of disabled icons.',
-  },
-  'icon-subdued': {
-    value: 'rgba(140, 145, 150, 1)',
-    description: 'For use as the fill color of subdued icons.',
-  },
-  text: {
-    value: 'rgba(32, 34, 35, 1)',
-    description: 'For use as a text color.',
-  },
-  'text-on-dark': {
-    value: 'rgba(227, 229, 231, 1)',
-    description: 'For use as a text color on dark elements.',
-  },
-  'text-disabled': {
-    value: 'rgba(140, 145, 150, 1)',
-    description:
-      'For use as a disabled text color and as a placeholder text color.',
-  },
-  'text-subdued': {
-    value: 'rgba(109, 113, 117, 1)',
-    description: 'For use as a subdued text color.',
-  },
-  'text-subdued-on-dark': {
-    value: 'rgba(153, 159, 164, 1)',
-    description: 'For use as a subdued text color on dark elements.',
-  },
-  interactive: {
-    value: 'rgba(44, 110, 203, 1)',
-    description:
-      'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons.',
-  },
-  'interactive-on-dark': {
-    value: 'rgba(54, 163, 255, 1)',
-    description:
-      'Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons when on a dark element.',
-  },
-  'interactive-disabled': {
-    value: 'rgba(189, 193, 204, 1)',
-    description: 'Used for disabled links and plain buttons.',
-  },
-  'interactive-hovered': {
-    value: 'rgba(31, 81, 153, 1)',
-    description: 'Used for hovered links and plain buttons.',
-  },
-  'interactive-pressed': {
-    value: 'rgba(16, 50, 98, 1)',
-    description: 'Used for pressed links and plain buttons.',
-  },
-  'interactive-pressed-on-dark': {
-    value: 'rgba(136, 188, 255, 1)',
-    description: 'Used for pressed links and plain buttons on dark elements.',
-  },
-  focused: {
-    value: 'rgba(69, 143, 255, 1)',
-    description: 'For use in the focus ring on interactive elements.',
-  },
-  'surface-selected': {
-    value: 'rgba(242, 247, 254, 1)',
-    description:
-      'For use as a surface color in selected interactive elements, in components such as action list and resource list.',
-  },
-  'surface-selected-hovered': {
-    value: 'rgba(237, 244, 254, 1)',
-    description:
-      'For use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list.',
-  },
-  'surface-selected-pressed': {
-    value: 'rgba(229, 239, 253, 1)',
-    description:
-      'For use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list.',
-  },
-  'icon-on-interactive': {
-    value: 'rgba(255, 255, 255, 1)',
-    description: 'For use as a fill color for icons on interactive elements.',
-  },
-  'text-on-interactive': {
-    value: 'rgba(255, 255, 255, 1)',
-    description: 'For use as a text color on interactive elements.',
-  },
-  'action-secondary': {
-    value: 'rgba(255, 255, 255, 1)',
-    description:
-      'Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces.',
-  },
-  'action-secondary-disabled': {
-    value: 'rgba(255, 255, 255, 1)',
-    description: 'Used as a disabled state for secondary buttons',
-  },
-  'action-secondary-hovered': {
-    value: 'rgba(246, 246, 247, 1)',
-    description: 'Used as a hovered state for secondary buttons',
-  },
-  'action-secondary-hovered-dark': {
-    value: 'rgba(84, 87, 91, 1)',
-    description: 'Used as a dark hovered state for secondary buttons',
-  },
-  'action-secondary-pressed': {
-    value: 'rgba(241, 242, 243, 1)',
-    description: 'Used as a pressed state for secondary buttons',
-  },
-  'action-secondary-pressed-dark': {
-    value: 'rgba(96, 100, 103, 1)',
-    description: 'Used as a dark pressed state for secondary buttons',
-  },
-  'action-secondary-depressed': {
-    value: 'rgba(109, 113, 117, 1)',
-    description: 'Used as a depressed state for secondary buttons',
-  },
-  'action-primary': {
-    value: 'rgba(0, 128, 96, 1)',
-    description:
-      'Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
-  },
-  'action-primary-disabled': {
-    value: 'rgba(241, 241, 241, 1)',
-    description:
-      'Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
-  },
-  'action-primary-hovered': {
-    value: 'rgba(0, 110, 82, 1)',
-    description:
-      'Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
-  },
-  'action-primary-pressed': {
-    value: 'rgba(0, 94, 70, 1)',
-    description:
-      'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
-  },
-  'action-primary-depressed': {
-    value: 'rgba(0, 61, 44, 1)',
-    description:
-      'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
-  },
-  'icon-on-primary': {
-    value: 'rgba(255, 255, 255, 1)',
-    description:
-      'For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.',
-  },
-  'text-on-primary': {
-    value: 'rgba(255, 255, 255, 1)',
-    description:
-      'For use as a text color on primary actions. Not for use in text on navigation and tabs.',
-  },
-  'text-primary': {
-    value: 'rgba(0, 123, 92, 1)',
-    description:
-      'For use as primary text color on background. For use in text in components such as Navigation.',
-  },
-  'text-primary-hovered': {
-    value: 'rgba(0, 108, 80, 1)',
-    description:
-      'For use as primary hovered text color on background. For use in text in components such as Navigation.',
-  },
-  'text-primary-pressed': {
-    value: 'rgba(0, 92, 68, 1)',
-    description:
-      'For use as primary pressed text color on background. For use in text in components such as Navigation.',
-  },
-  'surface-primary-selected': {
-    value: 'rgba(241, 248, 245, 1)',
-    description:
-      'Used as a surface color to indicate selected interactive states in navigation and tabs.',
-  },
-  'surface-primary-selected-hovered': {
-    value: 'rgba(179, 208, 195, 1)',
-    description:
-      'Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs.',
-  },
-  'surface-primary-selected-pressed': {
-    value: 'rgba(162, 188, 176, 1)',
-    description:
-      'Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs.',
-  },
-  'border-critical': {
-    value: 'rgba(253, 87, 73, 1)',
-    description:
-      'For use as a border on critical components such as an outline on interactive elements in an error state.',
-  },
-  'border-critical-subdued': {
-    value: 'rgba(224, 179, 178, 1)',
-    description: 'For use as a border on critical components such as banners.',
-  },
-  'border-critical-disabled': {
-    value: 'rgba(255, 167, 163, 1)',
-    description:
-      'For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state.',
-  },
-  'icon-critical': {
-    value: 'rgba(215, 44, 13, 1)',
-    description: 'For use as an icon fill color on top of critical elements.',
-  },
-  'surface-critical': {
-    value: 'rgba(254, 211, 209, 1)',
-    description:
-      'For use as a surface color on critical elements including badges.',
-  },
-  'surface-critical-subdued': {
-    value: 'rgba(255, 244, 244, 1)',
-    description:
-      'For use as a subdued surface color on critical elements including banners.',
-  },
-  'surface-critical-subdued-hovered': {
-    value: 'rgba(255, 240, 240, 1)',
-    description:
-      'For use as a surface color on critical interactive elements including action list items in a hovered state.',
-  },
-  'surface-critical-subdued-pressed': {
-    value: 'rgba(255, 233, 232, 1)',
-    description:
-      'For use as a surface color on critical interactive elements including action list items in a pressed state.',
-  },
-  'surface-critical-subdued-depressed': {
-    value: 'rgba(254, 188, 185, 1)',
-    description:
-      'For use as a surface color on critical interactive elements including action list items in a depressed state.',
-  },
-  'text-critical': {
-    value: 'rgba(215, 44, 13, 1)',
-    description:
-      'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.',
-  },
-  'action-critical': {
-    value: 'rgba(216, 44, 13, 1)',
-    description:
-      'For use as the background color for destructive buttons, and as the background color for error toast messages.',
-  },
-  'action-critical-disabled': {
-    value: 'rgba(241, 241, 241, 1)',
-    description:
-      'For use as the background color for disabled destructive buttons, and as the background color for error toast messages.',
-  },
-  'action-critical-hovered': {
-    value: 'rgba(188, 34, 0, 1)',
-    description:
-      'For use as the background color for hovered destructive buttons, and as the background color for error toast messages.',
-  },
-  'action-critical-pressed': {
-    value: 'rgba(162, 27, 0, 1)',
-    description:
-      'For use as the background color for pressed destructive buttons, and as the background color for error toast messages.',
-  },
-  'action-critical-depressed': {
-    value: 'rgba(108, 15, 0, 1)',
-    description:
-      'For use as the background color for depressed destructive buttons, and as the background color for error toast messages.',
-  },
-  'icon-on-critical': {
-    value: 'rgba(255, 255, 255, 1)',
-    description: 'For use as a fill color for icons on critical actions.',
-  },
-  'text-on-critical': {
-    value: 'rgba(255, 255, 255, 1)',
-    description: 'For use as a text color on critical actions.',
-  },
-  'interactive-critical': {
-    value: 'rgba(216, 44, 13, 1)',
-    description:
-      'For use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.',
-  },
-  'interactive-critical-disabled': {
-    value: 'rgba(253, 147, 141, 1)',
-    description:
-      'For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.',
-  },
-  'interactive-critical-hovered': {
-    value: 'rgba(205, 41, 12, 1)',
-    description:
-      'For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.',
-  },
-  'interactive-critical-pressed': {
-    value: 'rgba(103, 15, 3, 1)',
-    description:
-      'For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.',
-  },
-  'border-warning': {
-    value: 'rgba(185, 137, 0, 1)',
-    description: 'For use as a border on warning components such as...',
-  },
-  'border-warning-subdued': {
-    value: 'rgba(225, 184, 120, 1)',
-    description: 'For use as a border on warning components such as banners.',
-  },
-  'icon-warning': {
-    value: 'rgba(185, 137, 0, 1)',
-    description: 'For use as an icon fill color on top of warning elements.',
-  },
-  'surface-warning': {
-    value: 'rgba(255, 215, 157, 1)',
-    description:
-      'For use as a surface color on warning elements including badges.',
-  },
-  'surface-warning-subdued': {
-    value: 'rgba(255, 245, 234, 1)',
-    description:
-      'For use as a subdued surface color on warning elements including banners.',
-  },
-  'surface-warning-subdued-hovered': {
-    value: 'rgba(255, 242, 226, 1)',
-    description:
-      'For use as a subdued surface color on warning elements including banners.',
-  },
-  'surface-warning-subdued-pressed': {
-    value: 'rgba(255, 235, 211, 1)',
-    description:
-      'For use as a subdued surface color on warning elements including banners.',
-  },
-  'text-warning': {
-    value: 'rgba(145, 106, 0, 1)',
-    description:
-      'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.',
-  },
-  'border-highlight': {
-    value: 'rgba(68, 157, 167, 1)',
-    description: 'For use as a border on informational components such as...',
-  },
-  'border-highlight-subdued': {
-    value: 'rgba(152, 198, 205, 1)',
-    description:
-      'For use as a border on informational components such as banners.',
-  },
-  'icon-highlight': {
-    value: 'rgba(0, 160, 172, 1)',
-    description:
-      'For use as an icon fill color on top of informational elements.',
-  },
-  'surface-highlight': {
-    value: 'rgba(164, 232, 242, 1)',
-    description:
-      'For use as a surface color on information elements including badges.',
-  },
-  'surface-highlight-subdued': {
-    value: 'rgba(235, 249, 252, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'surface-highlight-subdued-hovered': {
-    value: 'rgba(228, 247, 250, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'surface-highlight-subdued-pressed': {
-    value: 'rgba(213, 243, 248, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'text-highlight': {
-    value: 'rgba(52, 124, 132, 1)',
-    description:
-      'For use as a text color in inert informational elements. Not for use as a text color on banners and badges.',
-  },
-  'border-success': {
-    value: 'rgba(0, 164, 124, 1)',
-    description:
-      'For use as a border on success components such as text inputs.',
-  },
-  'border-success-subdued': {
-    value: 'rgba(149, 201, 180, 1)',
-    description: 'For use as a border on success components such as banners.',
-  },
-  'icon-success': {
-    value: 'rgba(0, 127, 95, 1)',
-    description: 'For use as an icon fill color on top of success elements.',
-  },
-  'surface-success': {
-    value: 'rgba(174, 233, 209, 1)',
-    description:
-      'For use as a surface color on success elements including badges.',
-  },
-  'surface-success-subdued': {
-    value: 'rgba(241, 248, 245, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'surface-success-subdued-hovered': {
-    value: 'rgba(236, 246, 241, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'surface-success-subdued-pressed': {
-    value: 'rgba(226, 241, 234, 1)',
-    description:
-      'For use as a surface color on information elements including banners.',
-  },
-  'text-success': {
-    value: 'rgba(0, 128, 96, 1)',
-    description:
-      'For use as a text color in inert success elements. Not for use as a text color on banners and badges.',
-  },
-  'icon-attention': {
-    value: 'rgba(138, 97, 22, 1)',
-  },
-  'surface-attention': {
-    value: 'rgba(255, 234, 138, 1)',
-  },
-  'decorative-one-icon': {
-    value: 'rgba(126, 87, 0, 1)',
-    description:
-      'For use as a decorative icon color that is applied on a decorative surface.',
-  },
-  'decorative-one-surface': {
-    value: 'rgba(255, 201, 107, 1)',
-    description: 'For use as a decorative surface color.',
-  },
-  'decorative-one-text': {
-    value: 'rgba(61, 40, 0, 1)',
-    description:
-      'For use as a decorative text color that is applied on a decorative surface.',
-  },
-  'decorative-two-icon': {
-    value: 'rgba(175, 41, 78, 1)',
-    description:
-      'For use as a decorative icon color that is applied on a decorative surface.',
-  },
-  'decorative-two-surface': {
-    value: 'rgba(255, 196, 176, 1)',
-    description: 'For use as a decorative surface color.',
-  },
-  'decorative-two-text': {
-    value: 'rgba(73, 11, 28, 1)',
-    description:
-      'For use as a decorative text color that is applied on a decorative surface.',
-  },
-  'decorative-three-icon': {
-    value: 'rgba(0, 109, 65, 1)',
-    description:
-      'For use as a decorative icon color that is applied on a decorative surface.',
-  },
-  'decorative-three-surface': {
-    value: 'rgba(146, 230, 181, 1)',
-    description: 'For use as a decorative surface color.',
-  },
-  'decorative-three-text': {
-    value: 'rgba(0, 47, 25, 1)',
-    description:
-      'For use as a decorative text color that is applied on a decorative surface.',
-  },
-  'decorative-four-icon': {
-    value: 'rgba(0, 106, 104, 1)',
-    description:
-      'For use as a decorative icon color that is applied on a decorative surface.',
-  },
-  'decorative-four-surface': {
-    value: 'rgba(145, 224, 214, 1)',
-    description: 'For use as a decorative surface color.',
-  },
-  'decorative-four-text': {
-    value: 'rgba(0, 45, 45, 1)',
-    description:
-      'For use as a decorative text color that is applied on a decorative surface.',
-  },
-  'decorative-five-icon': {
-    value: 'rgba(174, 43, 76, 1)',
-    description:
-      'For use as a decorative icon color that is applied on a decorative surface.',
-  },
-  'decorative-five-surface': {
-    value: 'rgba(253, 201, 208, 1)',
-    description: 'For use as a decorative surface color.',
-  },
-  'decorative-five-text': {
-    value: 'rgba(79, 14, 31, 1)',
-    description:
-      'For use as a decorative text color that is applied on a decorative surface.',
-  },
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss
deleted file mode 100644
index 00a7f53c590..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.input.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.duration-simple-string-arg {
-  transition-duration: duration('none');
-  transition-duration: duration('fast');
-  transition-duration: duration('base');
-  transition-duration: duration('slow');
-  transition-duration: duration('slower');
-  transition-duration: duration('slowest');
-}
-
-.duration-simple-non-string-arg {
-  transition-duration: duration();
-  transition-duration: duration(none);
-  transition-duration: duration(fast);
-  transition-duration: duration(base);
-  transition-duration: duration(slow);
-  transition-duration: duration(slower);
-  transition-duration: duration(slowest);
-}
-
-.duration-compound-string-arg {
-  transition: opacity duration('none') linear;
-  transition: opacity duration('fast') linear;
-  transition: opacity duration('base') linear;
-  transition: opacity duration('slow') linear;
-  transition: opacity duration('slower') linear;
-  transition: opacity duration('slowest') linear;
-}
-
-.duration-compound-non-string-arg {
-  transition: opacity duration() linear;
-  transition: opacity duration(none) linear;
-  transition: opacity duration(fast) linear;
-  transition: opacity duration(base) linear;
-  transition: opacity duration(slow) linear;
-  transition: opacity duration(slower) linear;
-  transition: opacity duration(slowest) linear;
-}
-
-.duration-multiple-string-arg {
-  transition: opacity duration('none') linear, left duration('none') linear;
-  transition: opacity duration('fast') linear, left duration('fast') linear;
-  transition: opacity duration('base') linear, left duration('base') linear;
-  transition: opacity duration('slow') linear, left duration('slow') linear;
-  transition: opacity duration('slower') linear, left duration('slower') linear;
-  transition: opacity duration('slowest') linear,
-    left duration('slowest') linear;
-}
-
-.duration-multiple-non-string-arg {
-  transition: opacity duration() linear, left duration() linear;
-  transition: opacity duration(none) linear, left duration(none) linear;
-  transition: opacity duration(fast) linear, left duration(fast) linear;
-  transition: opacity duration(base) linear, left duration(base) linear;
-  transition: opacity duration(slow) linear, left duration(slow) linear;
-  transition: opacity duration(slower) linear, left duration(slower) linear;
-  transition: opacity duration(slowest) linear, left duration(slowest) linear;
-}
-
-.duration-edges {
-  // sass calculation
-  transition: (duration() - 33ms) fill linear 33ms;
-  // Duration + Delay
-  transition: opacity duration(slower) linear duration(fast);
-  // Duration + Delay after easing func
-  transition: opacity linear duration(slower) duration(fast);
-  // foobar isn't a valid duration key
-  transition-duration: duration(foobar);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss
deleted file mode 100644
index d064f2db9ed..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/v9-scss-replace-duration.output.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-.duration-simple-string-arg {
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-500);
-}
-
-.duration-simple-non-string-arg {
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-500);
-}
-
-.duration-compound-string-arg {
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
-}
-
-.duration-compound-non-string-arg {
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
-}
-
-.duration-multiple-string-arg {
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-}
-
-.duration-multiple-non-string-arg {
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-}
-
-.duration-edges {
-  // sass calculation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // transition: (var(--p-duration-200) - 33ms) fill linear 33ms;
-  transition: (duration() - 33ms) fill linear 33ms;
-  // Duration + Delay
-  transition: opacity var(--p-duration-400) linear var(--p-duration-100);
-  // Duration + Delay after easing func
-  transition: opacity linear var(--p-duration-400) var(--p-duration-100);
-  // foobar isn't a valid duration key
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unknown duration key 'foobar'.
-  transition-duration: duration(foobar);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss
deleted file mode 100644
index 297dc162fb6..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.duration-simple-string-arg {
-  transition-duration: legacy-polaris-v8.duration('none');
-  transition-duration: legacy-polaris-v8.duration('fast');
-  transition-duration: legacy-polaris-v8.duration('base');
-  transition-duration: legacy-polaris-v8.duration('slow');
-  transition-duration: legacy-polaris-v8.duration('slower');
-  transition-duration: legacy-polaris-v8.duration('slowest');
-}
-
-.duration-simple-non-string-arg {
-  transition-duration: legacy-polaris-v8.duration();
-  transition-duration: legacy-polaris-v8.duration(none);
-  transition-duration: legacy-polaris-v8.duration(fast);
-  transition-duration: legacy-polaris-v8.duration(base);
-  transition-duration: legacy-polaris-v8.duration(slow);
-  transition-duration: legacy-polaris-v8.duration(slower);
-  transition-duration: legacy-polaris-v8.duration(slowest);
-}
-
-.duration-compound-string-arg {
-  transition: opacity legacy-polaris-v8.duration('none') linear;
-  transition: opacity legacy-polaris-v8.duration('fast') linear;
-  transition: opacity legacy-polaris-v8.duration('base') linear;
-  transition: opacity legacy-polaris-v8.duration('slow') linear;
-  transition: opacity legacy-polaris-v8.duration('slower') linear;
-  transition: opacity legacy-polaris-v8.duration('slowest') linear;
-}
-
-.duration-compound-non-string-arg {
-  transition: opacity legacy-polaris-v8.duration() linear;
-  transition: opacity legacy-polaris-v8.duration(none) linear;
-  transition: opacity legacy-polaris-v8.duration(fast) linear;
-  transition: opacity legacy-polaris-v8.duration(base) linear;
-  transition: opacity legacy-polaris-v8.duration(slow) linear;
-  transition: opacity legacy-polaris-v8.duration(slower) linear;
-  transition: opacity legacy-polaris-v8.duration(slowest) linear;
-}
-
-.duration-multiple-string-arg {
-  transition: opacity legacy-polaris-v8.duration('none') linear,
-    left legacy-polaris-v8.duration('none') linear;
-  transition: opacity legacy-polaris-v8.duration('fast') linear,
-    left legacy-polaris-v8.duration('fast') linear;
-  transition: opacity legacy-polaris-v8.duration('base') linear,
-    left legacy-polaris-v8.duration('base') linear;
-  transition: opacity legacy-polaris-v8.duration('slow') linear,
-    left legacy-polaris-v8.duration('slow') linear;
-  transition: opacity legacy-polaris-v8.duration('slower') linear,
-    left legacy-polaris-v8.duration('slower') linear;
-  transition: opacity legacy-polaris-v8.duration('slowest') linear,
-    left legacy-polaris-v8.duration('slowest') linear;
-}
-
-.duration-multiple-non-string-arg {
-  transition: opacity legacy-polaris-v8.duration() linear,
-    left legacy-polaris-v8.duration() linear;
-  transition: opacity legacy-polaris-v8.duration(none) linear,
-    left legacy-polaris-v8.duration(none) linear;
-  transition: opacity legacy-polaris-v8.duration(fast) linear,
-    left legacy-polaris-v8.duration(fast) linear;
-  transition: opacity legacy-polaris-v8.duration(base) linear,
-    left legacy-polaris-v8.duration(base) linear;
-  transition: opacity legacy-polaris-v8.duration(slow) linear,
-    left legacy-polaris-v8.duration(slow) linear;
-  transition: opacity legacy-polaris-v8.duration(slower) linear,
-    left legacy-polaris-v8.duration(slower) linear;
-  transition: opacity legacy-polaris-v8.duration(slowest) linear,
-    left legacy-polaris-v8.duration(slowest) linear;
-}
-
-.duration-edges {
-  // sass calculation
-  transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
-  // Duration + Delay
-  transition: opacity legacy-polaris-v8.duration(slower) linear
-    legacy-polaris-v8.duration(fast);
-  // Duration + Delay after easing func
-  transition: opacity linear legacy-polaris-v8.duration(slower)
-    legacy-polaris-v8.duration(fast);
-  // foobar isn't a valid duration key
-  transition-duration: legacy-polaris-v8.duration(foobar);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss
deleted file mode 100644
index 49513236d84..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.duration-simple-string-arg {
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-500);
-}
-
-.duration-simple-non-string-arg {
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-500);
-}
-
-.duration-compound-string-arg {
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
-}
-
-.duration-compound-non-string-arg {
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear;
-}
-
-.duration-multiple-string-arg {
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-}
-
-.duration-multiple-non-string-arg {
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-0) linear,
-    left var(--p-duration-0) linear;
-  transition: opacity var(--p-duration-100) linear,
-    left var(--p-duration-100) linear;
-  transition: opacity var(--p-duration-200) linear,
-    left var(--p-duration-200) linear;
-  transition: opacity var(--p-duration-300) linear,
-    left var(--p-duration-300) linear;
-  transition: opacity var(--p-duration-400) linear,
-    left var(--p-duration-400) linear;
-  transition: opacity var(--p-duration-500) linear,
-    left var(--p-duration-500) linear;
-}
-
-.duration-edges {
-  // sass calculation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // transition: (var(--p-duration-200) - 33ms) fill linear 33ms;
-  transition: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
-  // Duration + Delay
-  transition: opacity var(--p-duration-400) linear var(--p-duration-100);
-  // Duration + Delay after easing func
-  transition: opacity linear var(--p-duration-400) var(--p-duration-100);
-  // foobar isn't a valid duration key
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unknown duration key 'foobar'.
-  transition-duration: legacy-polaris-v8.duration(foobar);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts
deleted file mode 100644
index 3ffabe310e4..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-duration/transform.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import valueParser from 'postcss-value-parser';
-
-import {
-  namespace,
-  isSassFunction,
-  isNumericOperator,
-  createSassMigrator as v9ScssReplaceDuration,
-  setNodeValue,
-  StopWalkingFunctionNodes,
-  hasSassFunction,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default v9ScssReplaceDuration(
-  'v9-replace-sass-transition',
-  (_, {methods, options}, context) => {
-    const namespacedDuration = namespace('duration', options);
-
-    return (root) => {
-      methods.walkDecls(root, (decl) => {
-        const parsedValue = valueParser(decl.value);
-
-        if (!hasSassFunction(namespacedDuration, parsedValue)) return;
-
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            methods.report({
-              node: decl,
-              severity: 'warning',
-              message: 'Numeric operator detected.',
-            });
-          }
-
-          if (isSassFunction(namespacedDuration, node)) {
-            const duration = node.nodes[0]?.value ?? DEFAULT_DURATION;
-
-            if (!isKeyOf(durationMap, duration)) {
-              methods.report({
-                severity: 'warning',
-                node: decl,
-                message: `Unknown duration key '${duration}'.`,
-              });
-              return StopWalkingFunctionNodes;
-            }
-
-            const durationCustomProperty = durationMap[duration];
-            const targetValue = `var(${durationCustomProperty})`;
-
-            if (context.fix) {
-              setNodeValue(node, targetValue);
-            } else {
-              methods.report({
-                severity: 'error',
-                node: decl,
-                message: `Replace duration with token: ${targetValue}`,
-              });
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-
-        if (context.fix) {
-          decl.value = parsedValue.toString();
-        }
-      });
-    };
-  },
-);
-
-const DEFAULT_DURATION = 'base';
-
-const durationMap = {
-  none: '--p-duration-0',
-  fast: '--p-duration-100',
-  base: '--p-duration-200',
-  slow: '--p-duration-300',
-  slower: '--p-duration-400',
-  slowest: '--p-duration-500',
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss
deleted file mode 100644
index 86f533159b1..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.input.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.easing-simple-string-arg {
-  transition-timing-function: easing('anticipate');
-  transition-timing-function: easing('base');
-  transition-timing-function: easing('excite');
-  transition-timing-function: easing('in');
-  transition-timing-function: easing('out');
-  transition-timing-function: easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  transition-timing-function: easing();
-  transition-timing-function: easing(anticipate);
-  transition-timing-function: easing(base);
-  transition-timing-function: easing(excite);
-  transition-timing-function: easing(in);
-  transition-timing-function: easing(out);
-  transition-timing-function: easing(overshoot);
-}
-
-.easing-shorthand-string-arg {
-  transition: opacity 300ms easing('anticipate');
-  transition: opacity 300ms easing('base');
-  transition: opacity 300ms easing('excite');
-  transition: opacity 300ms easing('in');
-  transition: opacity 300ms easing('out');
-  transition: opacity 300ms easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  transition: opacity 300ms easing();
-  transition: opacity 300ms easing(anticipate);
-  transition: opacity 300ms easing(base);
-  transition: opacity 300ms easing(excite);
-  transition: opacity 300ms easing(in);
-  transition: opacity 300ms easing(out);
-  transition: opacity 300ms easing(overshoot);
-}
-
-.easing-multiple-string-arg {
-  transition: opacity 300ms easing('anticipate'),
-    left 300ms easing('anticipate');
-  transition: opacity 300ms easing('base'), left 300ms easing('base');
-  transition: opacity 300ms easing('excite'), left 300ms easing('excite');
-  transition: opacity 300ms easing('in'), left 300ms easing('in');
-  transition: opacity 300ms easing('out'), left 300ms easing('out');
-  transition: opacity 300ms easing('overshoot'), left 300ms easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  transition: opacity 300ms easing(), left 300ms easing();
-  transition: opacity 300ms easing(anticipate), left 300ms easing(anticipate);
-  transition: opacity 300ms easing(base), left 300ms easing(base);
-  transition: opacity 300ms easing(excite), left 300ms easing(excite);
-  transition: opacity 300ms easing(in), left 300ms easing(in);
-  transition: opacity 300ms easing(out), left 300ms easing(out);
-  transition: opacity 300ms easing(overshoot), left 300ms easing(overshoot);
-}
-
-$easingFunc: 'ease-in';
-
-.edges {
-  // Unknown values are flagged
-  transition-timing-function: easing(foobar);
-  // Can only handle hard coded values
-  transition-timing-function: easing($easingFunc);
-  // Value replacement with legacy easing function value
-  transition: opacity 300ms easing(base), left 300ms easing(overshoot);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss
deleted file mode 100644
index d792846a674..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/v9-scss-replace-easing.output.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.easing-simple-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing('anticipate');
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing('excite');
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing(anticipate);
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing(excite);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: easing(overshoot);
-}
-
-.easing-shorthand-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('anticipate');
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('excite');
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(anticipate);
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(excite);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(overshoot);
-}
-
-.easing-multiple-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('anticipate'),
-    left 300ms easing('anticipate');
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('excite'), left 300ms easing('excite');
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing('overshoot'), left 300ms easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(anticipate), left 300ms easing(anticipate);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(excite), left 300ms easing(excite);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms easing(overshoot), left 300ms easing(overshoot);
-}
-
-$easingFunc: 'ease-in';
-
-.edges {
-  // Unknown values are flagged
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'foobar'.
-  transition-timing-function: easing(foobar);
-  // Can only handle hard coded values
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function '$easingFunc'.
-  transition-timing-function: easing($easingFunc);
-  // Value replacement with legacy easing function value
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity 300ms var(--p-ease), left 300ms easing(overshoot);
-  transition: opacity 300ms easing(base), left 300ms easing(overshoot);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss
deleted file mode 100644
index 74179e31892..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.easing-simple-string-arg {
-  transition-timing-function: legacy-polaris-v8.easing('anticipate');
-  transition-timing-function: legacy-polaris-v8.easing('base');
-  transition-timing-function: legacy-polaris-v8.easing('excite');
-  transition-timing-function: legacy-polaris-v8.easing('in');
-  transition-timing-function: legacy-polaris-v8.easing('out');
-  transition-timing-function: legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  transition-timing-function: legacy-polaris-v8.easing();
-  transition-timing-function: legacy-polaris-v8.easing(anticipate);
-  transition-timing-function: legacy-polaris-v8.easing(base);
-  transition-timing-function: legacy-polaris-v8.easing(excite);
-  transition-timing-function: legacy-polaris-v8.easing(in);
-  transition-timing-function: legacy-polaris-v8.easing(out);
-  transition-timing-function: legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-shorthand-string-arg {
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms legacy-polaris-v8.easing('base');
-  transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms legacy-polaris-v8.easing('in');
-  transition: opacity 300ms legacy-polaris-v8.easing('out');
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  transition: opacity 300ms legacy-polaris-v8.easing();
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms legacy-polaris-v8.easing(base);
-  transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms legacy-polaris-v8.easing(in);
-  transition: opacity 300ms legacy-polaris-v8.easing(out);
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-multiple-string-arg {
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
-    left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms legacy-polaris-v8.easing('base'),
-    left 300ms legacy-polaris-v8.easing('base');
-  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
-    left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms legacy-polaris-v8.easing('in'),
-    left 300ms legacy-polaris-v8.easing('in');
-  transition: opacity 300ms legacy-polaris-v8.easing('out'),
-    left 300ms legacy-polaris-v8.easing('out');
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
-    left 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  transition: opacity 300ms legacy-polaris-v8.easing(),
-    left 300ms legacy-polaris-v8.easing();
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
-    left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms legacy-polaris-v8.easing(base),
-    left 300ms legacy-polaris-v8.easing(base);
-  transition: opacity 300ms legacy-polaris-v8.easing(excite),
-    left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms legacy-polaris-v8.easing(in),
-    left 300ms legacy-polaris-v8.easing(in);
-  transition: opacity 300ms legacy-polaris-v8.easing(out),
-    left 300ms legacy-polaris-v8.easing(out);
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-$easingFunc: 'ease-in';
-
-.edges {
-  // Unknown values are flagged
-  transition-timing-function: legacy-polaris-v8.easing(foobar);
-  // Can only handle hard coded values
-  transition-timing-function: legacy-polaris-v8.easing($easingFunc);
-  // Value replacement with legacy easing function value
-  transition: opacity 300ms legacy-polaris-v8.easing(base),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss
deleted file mode 100644
index d6a1d3fbc34..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.easing-simple-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing('anticipate');
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing('excite');
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-simple-non-string-arg {
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing(anticipate);
-  transition-timing-function: var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing(excite);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-shorthand-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-shorthand-non-string-arg {
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-.easing-multiple-string-arg {
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('anticipate'),
-    left 300ms legacy-polaris-v8.easing('anticipate');
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('excite'),
-    left 300ms legacy-polaris-v8.easing('excite');
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing('overshoot'),
-    left 300ms legacy-polaris-v8.easing('overshoot');
-}
-
-.easing-multiple-non-string-arg {
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The anticipate easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(anticipate),
-    left 300ms legacy-polaris-v8.easing(anticipate);
-  transition: opacity 300ms var(--p-ease), left 300ms var(--p-ease);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The excite easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(excite),
-    left 300ms legacy-polaris-v8.easing(excite);
-  transition: opacity 300ms var(--p-ease-in), left 300ms var(--p-ease-in);
-  transition: opacity 300ms var(--p-ease-out), left 300ms var(--p-ease-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition: opacity 300ms legacy-polaris-v8.easing(overshoot),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
-
-$easingFunc: 'ease-in';
-
-.edges {
-  // Unknown values are flagged
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'foobar'.
-  transition-timing-function: legacy-polaris-v8.easing(foobar);
-  // Can only handle hard coded values
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function '$easingFunc'.
-  transition-timing-function: legacy-polaris-v8.easing($easingFunc);
-  // Value replacement with legacy easing function value
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: The overshoot easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity 300ms var(--p-ease), left 300ms legacy-polaris-v8.easing(overshoot);
-  transition: opacity 300ms legacy-polaris-v8.easing(base),
-    left 300ms legacy-polaris-v8.easing(overshoot);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts
deleted file mode 100644
index 67677eed23c..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-easing/transform.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import valueParser from 'postcss-value-parser';
-
-import {
-  namespace,
-  isSassFunction,
-  isNumericOperator,
-  createSassMigrator as v9ScssReplaceEasing,
-  setNodeValue,
-  StopWalkingFunctionNodes,
-  hasSassFunction,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default v9ScssReplaceEasing(
-  'v9-scss-replace-easing',
-  (_, {methods, options}, context) => {
-    const namespacedEasing = namespace('easing', options);
-
-    return (root) => {
-      methods.walkDecls(root, (decl) => {
-        const parsedValue = valueParser(decl.value);
-
-        if (!hasSassFunction(namespacedEasing, parsedValue)) return;
-
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            methods.report({
-              node: decl,
-              severity: 'warning',
-              message: 'Numeric operator detected.',
-            });
-            return;
-          }
-
-          if (isSassFunction(namespacedEasing, node)) {
-            const easing = node.nodes[0]?.value ?? DEFAULT_EASING;
-
-            if (!isKeyOf(easingMap, easing)) {
-              const comment = deprecatedEasingFuncs.includes(easing)
-                ? `The ${easing} easing function is no longer available in Polaris. See https://polaris.shopify.com/tokens/motion for possible values.`
-                : `Unexpected easing function '${easing}'.`;
-
-              methods.report({
-                severity: 'warning',
-                node: decl,
-                message: comment,
-              });
-
-              return StopWalkingFunctionNodes;
-            }
-
-            const easingCustomProperty = easingMap[easing];
-            const targetValue = `var(${easingCustomProperty})`;
-
-            if (context.fix) {
-              setNodeValue(node, targetValue);
-            } else {
-              methods.report({
-                severity: 'error',
-                node: decl,
-                message: `Replace easing function with token: ${targetValue}`,
-              });
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-
-        if (context.fix) {
-          decl.value = parsedValue.toString();
-        }
-      });
-    };
-  },
-);
-
-const DEFAULT_EASING = 'base';
-
-const easingMap = {
-  base: '--p-ease',
-  in: '--p-ease-in',
-  out: '--p-ease-out',
-};
-
-const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot'];
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss
deleted file mode 100644
index 90e6fc64a15..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.input.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.font-family {
-  font-family: sans-serif;
-  font-family: font-family();
-  font-family: font-family(base);
-  font-family: font-family(monospace);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss
deleted file mode 100644
index 30ee98afdab..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.output.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.font-family {
-  font-family: sans-serif;
-  font-family: var(--p-font-family-sans);
-  font-family: var(--p-font-family-sans);
-  font-family: var(--p-font-family-mono);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss
deleted file mode 100644
index e01f6b5f5d7..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-family {
-  font-family: sans-serif;
-  font-family: legacy-polaris-v8.font-family();
-  font-family: legacy-polaris-v8.font-family(base);
-  font-family: legacy-polaris-v8.font-family(monospace);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss
deleted file mode 100644
index c785e29c78a..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-family {
-  font-family: sans-serif;
-  font-family: var(--p-font-family-sans);
-  font-family: var(--p-font-family-sans);
-  font-family: var(--p-font-family-mono);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss
deleted file mode 100644
index e505a60654a..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.input.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.font-size {
-  font-size: font-size(caption);
-  font-size: font-size(caption, base);
-  font-size: font-size(caption, large-screen);
-  // Comment
-  font-size: font-size($invalid);
-  font-size: font-size(caption, $invalid);
-  font-size: font-size();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss
deleted file mode 100644
index 5981047d94d..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.output.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.font-size {
-  font-size: 0.8125rem;
-  font-size: 0.8125rem;
-  font-size: var(--p-font-size-75);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: font-size($invalid);
-  font-size: font-size($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: font-size(caption, $invalid);
-  font-size: font-size(caption, $invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: font-size();
-  font-size: font-size();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss
deleted file mode 100644
index 0f2b7456c60..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-size {
-  font-size: legacy-polaris-v8.font-size(caption);
-  font-size: legacy-polaris-v8.font-size(caption, base);
-  font-size: legacy-polaris-v8.font-size(caption, large-screen);
-  // Comment
-  font-size: legacy-polaris-v8.font-size($invalid);
-  font-size: legacy-polaris-v8.font-size(caption, $invalid);
-  font-size: legacy-polaris-v8.font-size();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss
deleted file mode 100644
index ed966b59d7f..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-size {
-  font-size: 0.8125rem;
-  font-size: 0.8125rem;
-  font-size: var(--p-font-size-75);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.font-size($invalid);
-  font-size: legacy-polaris-v8.font-size($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.font-size(caption, $invalid);
-  font-size: legacy-polaris-v8.font-size(caption, $invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.font-size();
-  font-size: legacy-polaris-v8.font-size();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts
deleted file mode 100644
index 4b0c822d40c..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-size/transform.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-/* eslint-disable line-comment-position */
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  createInlineComment,
-  getFunctionArgs,
-  isSassFunction,
-  namespace,
-  StopWalkingFunctionNodes,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedFontSize = namespace('font-size', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-font',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      let needsFix = false;
-      let needsComment = false;
-      const parsedValue = valueParser(decl.value);
-
-      parsedValue.walk((node) => {
-        if (isSassFunction(namespacedFontSize, node)) {
-          const args = getFunctionArgs(node);
-
-          // `font-size()` args reference:
-          // https://github.com/Shopify/polaris/blob/1738f17c739e06dcde4653a9783ca367e38b4e32/documentation/guides/legacy-polaris-v8-public-api.scss#L977
-          const styleArg = args[0];
-          const variantArg = args[1] ?? 'base';
-
-          if (
-            !(
-              isKeyOf(fontSizeMap, styleArg) &&
-              isKeyOf(fontSizeMap[styleArg], variantArg)
-            )
-          ) {
-            needsComment = true;
-            return StopWalkingFunctionNodes;
-          }
-
-          needsFix = true;
-          const fontSizeVariant = fontSizeMap[styleArg][variantArg];
-
-          if (fontSizeVariant.startsWith('--')) {
-            node.value = 'var';
-            node.nodes = [
-              {
-                type: 'word',
-                value: fontSizeVariant,
-                sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                sourceEndIndex: fontSizeVariant.length,
-              },
-            ];
-          } else {
-            // @ts-expect-error: We are intentionally changing the node type
-            node.type = 'word';
-            node.value = fontSizeVariant;
-          }
-          return StopWalkingFunctionNodes;
-        }
-      });
-
-      if (needsComment) {
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      }
-
-      if (needsFix) {
-        decl.value = parsedValue.toString();
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-const fontSizeMap = {
-  caption: {
-    base: '0.8125rem', // 13px
-    'large-screen': '--p-font-size-75',
-  },
-  heading: {
-    base: '1.0625rem', // 17px
-    'large-screen': '--p-font-size-200',
-  },
-  subheading: {
-    base: '0.8125rem', // 13px
-    'large-screen': '--p-font-size-75',
-  },
-  input: {
-    base: '--p-font-size-200',
-    'large-screen': '--p-font-size-100',
-  },
-  body: {
-    base: '0.9375rem', // 15px
-    'large-screen': '--p-font-size-100',
-  },
-  button: {
-    base: '0.9375rem', // 15px
-    'large-screen': '--p-font-size-100',
-  },
-  'button-large': {
-    base: '1.0625rem', // 17px
-    'large-screen': '--p-font-size-200',
-  },
-  'display-x-large': {
-    base: '1.6875rem', // 27px
-    'large-screen': '2.625rem', // 42px
-  },
-  'display-large': {
-    base: '--p-font-size-400',
-    'large-screen': '--p-font-size-500',
-  },
-  'display-medium': {
-    base: '1.3125rem', // 21px
-    'large-screen': '1.625rem', // 26px
-  },
-  'display-small': {
-    base: '--p-font-size-200',
-    'large-screen': '--p-font-size-300',
-  },
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss
deleted file mode 100644
index a12e13944ab..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.input.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.font-line-height {
-  line-height: line-height(caption);
-  line-height: line-height(caption, base);
-  line-height: line-height(caption, large-screen);
-  line-height: line-height(display-x-large, base);
-  // Comment
-  line-height: line-height($invalid);
-  line-height: line-height(caption, $invalid);
-  line-height: line-height();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss
deleted file mode 100644
index 6b4dc9271f8..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.output.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.font-line-height {
-  line-height: var(--p-font-line-height-2);
-  line-height: var(--p-font-line-height-2);
-  line-height: var(--p-font-line-height-1);
-  line-height: 2.25rem;
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: line-height($invalid);
-  line-height: line-height($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: line-height(caption, $invalid);
-  line-height: line-height(caption, $invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: line-height();
-  line-height: line-height();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss
deleted file mode 100644
index fa3e2a9d1ed..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-line-height {
-  line-height: legacy-polaris-v8.line-height(caption);
-  line-height: legacy-polaris-v8.line-height(caption, base);
-  line-height: legacy-polaris-v8.line-height(caption, large-screen);
-  line-height: legacy-polaris-v8.line-height(display-x-large, base);
-  // Comment
-  line-height: legacy-polaris-v8.line-height($invalid);
-  line-height: legacy-polaris-v8.line-height(caption, $invalid);
-  line-height: legacy-polaris-v8.line-height();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss
deleted file mode 100644
index 2de4d6ccf73..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-line-height {
-  line-height: var(--p-font-line-height-2);
-  line-height: var(--p-font-line-height-2);
-  line-height: var(--p-font-line-height-1);
-  line-height: 2.25rem;
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: legacy-polaris-v8.line-height($invalid);
-  line-height: legacy-polaris-v8.line-height($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: legacy-polaris-v8.line-height(caption, $invalid);
-  line-height: legacy-polaris-v8.line-height(caption, $invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: legacy-polaris-v8.line-height();
-  line-height: legacy-polaris-v8.line-height();
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts
deleted file mode 100644
index 2f373005fa7..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-line-height/transform.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-/* eslint-disable line-comment-position */
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  createInlineComment,
-  getFunctionArgs,
-  isSassFunction,
-  namespace,
-  StopWalkingFunctionNodes,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedLineHeight = namespace('line-height', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-line-height',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      let needsFix = false;
-      let needsComment = false;
-      const parsedValue = valueParser(decl.value);
-
-      parsedValue.walk((node) => {
-        if (isSassFunction(namespacedLineHeight, node)) {
-          const args = getFunctionArgs(node);
-
-          // `line-height()` args reference:
-          // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L961
-          const styleArg = args[0];
-          const variantArg = args[1] ?? 'base';
-
-          if (
-            !(
-              isKeyOf(lineHeightMap, styleArg) &&
-              isKeyOf(lineHeightMap[styleArg], variantArg)
-            )
-          ) {
-            needsComment = true;
-            return StopWalkingFunctionNodes;
-          }
-
-          needsFix = true;
-          const lineHeightVariant = lineHeightMap[styleArg][variantArg];
-
-          if (lineHeightVariant.startsWith('--')) {
-            node.value = 'var';
-            node.nodes = [
-              {
-                type: 'word',
-                value: lineHeightVariant,
-                sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                sourceEndIndex: lineHeightVariant.length,
-              },
-            ];
-          } else {
-            // @ts-expect-error: We are intentionally changing the node type
-            node.type = 'word';
-            node.value = lineHeightVariant;
-          }
-
-          return StopWalkingFunctionNodes;
-        }
-      });
-
-      if (needsComment) {
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      }
-
-      if (needsFix) {
-        decl.value = parsedValue.toString();
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-const lineHeightMap = {
-  caption: {
-    base: '--p-font-line-height-2',
-    'large-screen': '--p-font-line-height-1',
-  },
-  heading: {
-    base: '--p-font-line-height-3',
-  },
-  subheading: {
-    base: '--p-font-line-height-1',
-  },
-  input: {
-    base: '--p-font-line-height-3',
-  },
-  body: {
-    base: '--p-font-line-height-2',
-  },
-  button: {
-    base: '--p-font-line-height-1',
-  },
-  'button-large': {
-    base: '--p-font-line-height-2',
-  },
-  'display-x-large': {
-    base: '2.25rem', // 36px
-    'large-screen': '2.75rem', // 44px
-  },
-  'display-large': {
-    base: '--p-font-line-height-4',
-    'large-screen': '--p-font-line-height-5',
-  },
-  'display-medium': {
-    base: '--p-font-line-height-4',
-    'large-screen': '--p-font-line-height-5',
-  },
-  'display-small': {
-    base: '--p-font-line-height-3',
-    'large-screen': '--p-font-line-height-4',
-  },
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss
deleted file mode 100644
index a489262926b..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.input.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  // Standard replacement
-  padding: spacing();
-  padding: spacing(loose);
-  // With multiple values
-  padding: spacing() spacing();
-  padding: spacing() 0 spacing() 0;
-  // With interpolation
-  padding: calc(50% - #{spacing()});
-  // With negative interpolation
-  padding: -#{spacing()};
-  // With other functions
-  padding: calc(#{rem(16px)} + #{spacing()});
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss
deleted file mode 100644
index 309f1c22cc3..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.output.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  // Standard replacement
-  padding: var(--p-space-4);
-  padding: var(--p-space-5);
-  // With multiple values
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) 0 var(--p-space-4) 0;
-  // With interpolation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: calc(50% - var(--p-space-4));
-  padding: calc(50% - #{spacing()});
-  // With negative interpolation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: -1 * var(--p-space-4);
-  padding: -#{spacing()};
-  // With other functions
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: calc(#{rem(16px)} + var(--p-space-4));
-  padding: calc(#{rem(16px)} + #{spacing()});
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss
deleted file mode 100644
index db00dc052f5..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  // Standard replacement
-  padding: legacy-polaris-v8.spacing();
-  padding: legacy-polaris-v8.spacing(loose);
-  // With multiple values
-  padding: legacy-polaris-v8.spacing() legacy-polaris-v8.spacing();
-  padding: legacy-polaris-v8.spacing() 0 legacy-polaris-v8.spacing() 0;
-  // With interpolation
-  padding: calc(50% - #{legacy-polaris-v8.spacing()});
-  // With negative interpolation
-  padding: -#{legacy-polaris-v8.spacing()};
-  // With other functions
-  padding: calc(
-    #{legacy-polaris-v8.rem(16px)} + #{legacy-polaris-v8.spacing()}
-  );
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss
deleted file mode 100644
index 6e4ed7a4eed..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.my-class {
-  // Standard replacement
-  padding: var(--p-space-4);
-  padding: var(--p-space-5);
-  // With multiple values
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) 0 var(--p-space-4) 0;
-  // With interpolation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: calc(50% - var(--p-space-4));
-  padding: calc(50% - #{legacy-polaris-v8.spacing()});
-  // With negative interpolation
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: -1 * var(--p-space-4);
-  padding: -#{legacy-polaris-v8.spacing()};
-  // With other functions
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // padding: calc( #{legacy-polaris-v8.rem(16px)} + var(--p-space-4) );
-  padding: calc(
-    #{legacy-polaris-v8.rem(16px)} + #{legacy-polaris-v8.spacing()}
-  );
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss
deleted file mode 100644
index 0a2528a4fe0..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.input.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.normal {
-  @include text-emphasis-normal;
-}
-
-.strong {
-  @include text-emphasis-strong;
-}
-
-.subdued {
-  @include text-emphasis-subdued;
-}
-
-.subdued-with-args {
-  @include text-emphasis-subdued(green);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss
deleted file mode 100644
index 17472599213..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.output.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.normal {
-  color: var(--p-text);
-  font-weight: var(--p-font-weight-regular);
-}
-
-.strong {
-  font-weight: var(--p-font-weight-semibold);
-}
-
-.subdued {
-  color: var(--p-text-subdued);
-}
-
-.subdued-with-args {
-  color: var(--p-text-subdued);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss
deleted file mode 100644
index dea6c823eb2..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.normal {
-  @include legacy-polaris-v8.text-emphasis-normal;
-}
-
-.strong {
-  @include legacy-polaris-v8.text-emphasis-strong;
-}
-
-.subdued {
-  @include legacy-polaris-v8.text-emphasis-subdued;
-}
-
-.subdued-with-args {
-  @include legacy-polaris-v8.text-emphasis-subdued(green);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss
deleted file mode 100644
index 4650b2e511c..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.normal {
-  color: var(--p-text);
-  font-weight: var(--p-font-weight-regular);
-}
-
-.strong {
-  font-weight: var(--p-font-weight-semibold);
-}
-
-.subdued {
-  color: var(--p-text-subdued);
-}
-
-.subdued-with-args {
-  color: var(--p-text-subdued);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts
deleted file mode 100644
index 730a5d53457..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/transform.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-
-import type {NamespaceOptions} from '../../utilities/sass';
-import {getNamespacePattern} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacePattern = getNamespacePattern(options);
-
-  const namespacedMixinRegExp = new RegExp(
-    String.raw`^${namespacePattern}([\w-]+)`,
-  );
-
-  return {
-    postcssPlugin: 'v9-scss-replace-text-emphasis',
-    AtRule(atRule) {
-      if (atRule.name !== 'include') return;
-
-      // Extract mixin name e.g. name from `@include name;` or `@include name();`
-      const mixinName = atRule.params.match(namespacedMixinRegExp)?.[1];
-
-      if (!isKeyOf(staticMixins, mixinName)) return;
-
-      atRule.replaceWith(
-        ...Object.entries(staticMixins[mixinName]).map(([prop, value]) =>
-          postcss.decl({
-            prop,
-            value,
-          }),
-        ),
-      );
-    },
-  };
-};
-
-/** Mapping of static mixins to replacement declarations */
-const staticMixins = {
-  // Note: The below mixins do accept arguments, but the logic has
-  // since been removed from the mixins.
-  'text-emphasis-subdued': {
-    color: 'var(--p-text-subdued)',
-  },
-  'text-emphasis-strong': {
-    'font-weight': 'var(--p-font-weight-semibold)',
-  },
-  'text-emphasis-normal': {
-    color: 'var(--p-text)',
-    'font-weight': 'var(--p-font-weight-regular)',
-  },
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss
deleted file mode 100644
index 99dbb60357b..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.input.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-$someElement: (
-  someKey: 1000;,
-);
-
-.scenario-1 {
-  z-index: z-index(content) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-2 {
-  z-index: z-index(overlay) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-3 {
-  z-index: z-index(content);
-  background-color: var(--p-background);
-}
-
-.scenario-4 {
-  z-index: z-index(overlay);
-  background-color: var(--p-background);
-}
-
-.scenario-5 {
-  z-index: z-index(someKey, $someElement);
-  background-color: var(--p-background);
-}
-
-.scenario-6 {
-  z-index: calc(z-index(overlay) + z-index(content));
-}
-
-.scenario-7 {
-  z-index: calc(#{z-index(dev-ui, $fixed-element-stacking-order)} + 1);
-}
-
-.scenario-8 {
-  z-index: z-index(modal, $fixed-element-stacking-order);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss
deleted file mode 100644
index 99ee81813a5..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.output.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$someElement: (
-  someKey: 1000;,
-);
-
-.scenario-1 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
-  z-index: z-index(content) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-2 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
-  z-index: z-index(overlay) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-3 {
-  z-index: var(--p-z-1);
-  background-color: var(--p-background);
-}
-
-.scenario-4 {
-  z-index: var(--p-z-2);
-  background-color: var(--p-background);
-}
-
-.scenario-5 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: map.get($someElement, someKey); */
-  z-index: z-index(someKey, $someElement);
-  background-color: var(--p-background);
-}
-
-.scenario-6 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: calc(var(--p-z-2) + var(--p-z-1)); */
-  z-index: calc(z-index(overlay) + z-index(content));
-}
-
-.scenario-7 {
-  z-index: calc(#{z-index(dev-ui, $fixed-element-stacking-order)} + 1);
-}
-
-.scenario-8 {
-  z-index: var(--p-z-11);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss
deleted file mode 100644
index 9a981245305..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-$someElement: (
-  someKey: 1000;,
-);
-
-.scenario-1 {
-  z-index: legacy-polaris-v8.z-index(content) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-2 {
-  z-index: legacy-polaris-v8.z-index(overlay) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-3 {
-  z-index: legacy-polaris-v8.z-index(content);
-  background-color: var(--p-background);
-}
-
-.scenario-4 {
-  z-index: legacy-polaris-v8.z-index(overlay);
-  background-color: var(--p-background);
-}
-
-.scenario-5 {
-  z-index: legacy-polaris-v8.z-index(someKey, $someElement);
-  background-color: var(--p-background);
-}
-
-.scenario-6 {
-  z-index: calc(
-    legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content)
-  );
-}
-
-.scenario-7 {
-  z-index: calc(
-    #{legacy-polaris-v8.z-index(dev-ui, $fixed-element-stacking-order)} + 1
-  );
-}
-
-.scenario-8 {
-  z-index: legacy-polaris-v8.z-index(
-    modal,
-    legacy-polaris-v8.$fixed-element-stacking-order
-  );
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss
deleted file mode 100644
index a8bc3374fdb..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-$someElement: (
-  someKey: 1000;,
-);
-
-.scenario-1 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-1) + 1; */
-  z-index: legacy-polaris-v8.z-index(content) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-2 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: var(--p-z-2) + 1; */
-  z-index: legacy-polaris-v8.z-index(overlay) + 1;
-  background-color: var(--p-background);
-}
-
-.scenario-3 {
-  z-index: var(--p-z-1);
-  background-color: var(--p-background);
-}
-
-.scenario-4 {
-  z-index: var(--p-z-2);
-  background-color: var(--p-background);
-}
-
-.scenario-5 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: map.get($someElement, someKey); */
-  z-index: legacy-polaris-v8.z-index(someKey, $someElement);
-  background-color: var(--p-background);
-}
-
-.scenario-6 {
-  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
-  /* z-index: calc(
-    var(--p-z-2) + var(--p-z-1)
-  ); */
-  z-index: calc(
-    legacy-polaris-v8.z-index(overlay) + legacy-polaris-v8.z-index(content)
-  );
-}
-
-.scenario-7 {
-  z-index: calc(
-    #{legacy-polaris-v8.z-index(dev-ui, $fixed-element-stacking-order)} + 1
-  );
-}
-
-.scenario-8 {
-  z-index: var(--p-z-11);
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts b/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts
deleted file mode 100644
index 7aab5cc4491..00000000000
--- a/polaris-codemods/src/codemods/v9-scss-replace-z-index/transform.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import type {API, FileInfo, Options} from 'jscodeshift';
-import type {FunctionNode, Node} from 'postcss-value-parser';
-import valueParser from 'postcss-value-parser';
-
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  namespace,
-  hasSassFunction,
-  isSassFunction,
-  hasNumericOperator,
-} from '../../utilities/sass';
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const processed = Symbol('processed');
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedZIndex = namespace('z-index', options);
-  const namespacedFixedElementStackingOrder = namespace(
-    '$fixed-element-stacking-order',
-    options,
-  );
-  return {
-    postcssPlugin: 'v9-scss-replace-z-index',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      const parsedValue = valueParser(decl.value);
-
-      if (!hasSassFunction(namespacedZIndex, parsedValue)) return;
-
-      let containsUnknownSecondArgument = false;
-
-      parsedValue.walk((node: Node) => {
-        if (!isSassFunction(namespacedZIndex, node)) return;
-        if (hasMoreThanOneArgument(node)) {
-          // If there's more than one argument to the zIndex fn
-          // We assume they're passing in a custom map
-          // In this case its unlikely this will resolve to a polaris token value
-          // transform legacy zIndex usage to map-get and move on.
-
-          const [key, _, map] = node.nodes;
-          if (
-            map.value === namespacedFixedElementStackingOrder &&
-            isValidElement(key.value, fixedElementStackingOrder)
-          ) {
-            const fixedElementStackingOrderToken =
-              fixedElementStackingOrder[key.value];
-            node.value = 'var';
-            node.nodes = [
-              {
-                type: 'word',
-                value: fixedElementStackingOrderToken,
-                sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                sourceEndIndex: fixedElementStackingOrderToken.length,
-              },
-            ];
-          } else {
-            // map.get arguments are in the reverse order to z-index arguments.
-            // map.get expects the map object first, and the key second.
-            containsUnknownSecondArgument = true;
-            node.value = 'map.get';
-            node.nodes.reverse();
-          }
-        } else {
-          const element = node.nodes[0]?.value ?? '';
-          if (!isValidElement<typeof zIndexMap>(element, zIndexMap)) return;
-          const zIndexCustomProperty = zIndexMap[element];
-
-          node.value = 'var';
-          node.nodes = [
-            {
-              type: 'word',
-              value: zIndexCustomProperty,
-              sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-              sourceEndIndex: zIndexCustomProperty.length,
-            },
-          ];
-        }
-      });
-
-      if (hasNumericOperator(parsedValue) || containsUnknownSecondArgument) {
-        // Insert comment if the declaration value contains calculations
-        // or if the invocation of zIndex has more than one argument
-        decl.before(postcss.comment({text: POLARIS_MIGRATOR_COMMENT}));
-        decl.before(
-          postcss.comment({text: `${decl.prop}: ${parsedValue.toString()};`}),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-const zIndexMap = {
-  content: '--p-z-1',
-  overlay: '--p-z-2',
-};
-
-const fixedElementStackingOrder = {
-  'global-ribbon': '--p-z-3',
-  'top-bar': '--p-z-4',
-  'context-bar': '--p-z-5',
-  'small-screen-loading-bar': '--p-z-6',
-  'nav-backdrop': '--p-z-7',
-  nav: '--p-z-8',
-  'skip-to-content': '--p-z-9',
-  backdrop: '--p-z-10',
-  modal: '--p-z-11',
-  toast: '--p-z-12',
-};
-
-function isValidElement<
-  MapType extends typeof zIndexMap | typeof fixedElementStackingOrder,
->(element: unknown, mapObj: MapType): element is keyof typeof mapObj {
-  return Object.keys(mapObj).includes(element as string);
-}
-
-const hasMoreThanOneArgument = (node: FunctionNode) => node.nodes.length > 1;
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss
deleted file mode 100644
index d6b18775d69..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.input.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.border {
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-full);
-  border-radius: var(--p-border-radius-slim);
-  border-radius: var(--p-border-radius-wide);
-  border-radius: var(--p-text-field-focus-ring-border-radius);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss
deleted file mode 100644
index adc5897b4e7..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.output.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.border {
-  border-radius: var(--p-border-radius-1);
-  border-radius: var(--p-border-radius-half);
-  border-radius: var(--p-border-radius-05);
-  border-radius: var(--p-border-radius-2);
-  border-radius: 0.4375rem;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss
deleted file mode 100644
index c09da330a6a..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.input.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.depth {
-  box-shadow: var(--p-button-drop-shadow);
-  box-shadow: var(--p-button-inner-shadow);
-  box-shadow: var(--p-button-pressed-inner-shadow);
-  box-shadow: var(--p-card-shadow);
-  box-shadow: var(--p-modal-shadow);
-  box-shadow: var(--p-popover-shadow);
-  box-shadow: var(--p-top-bar-shadow);
-  box-shadow: 1px 1px var(--p-shadow-from-ambient-light);
-  box-shadow: 1px 1px var(--p-shadow-from-dim-light);
-  box-shadow: 1px 1px var(--p-shadow-from-direct-light);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss
deleted file mode 100644
index eccf50af311..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.output.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.depth {
-  box-shadow: var(--p-shadow-button);
-  box-shadow: var(--p-shadows-inset-button);
-  box-shadow: var(--p-shadows-inset-button-pressed);
-  box-shadow: var(--p-shadow-card);
-  box-shadow: var(--p-shadow-modal);
-  box-shadow: var(--p-shadow-popover);
-  box-shadow: var(--p-shadow-top-bar);
-  box-shadow: 1px 1px rgba(23, 24, 24, 0.05);
-  box-shadow: 1px 1px rgba(0, 0, 0, 0.2);
-  box-shadow: 1px 1px rgba(0, 0, 0, 0.15);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss
deleted file mode 100644
index 63d36ad80f7..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.input.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.font {
-  font-weight: var(--p-badge-font-weight);
-  font-weight: var(--p-button-font-weight);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss
deleted file mode 100644
index 904cf79fa0e..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.output.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.font {
-  font-weight: var(--p-font-weight-regular);
-  font-weight: var(--p-font-weight-medium);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss
deleted file mode 100644
index 990ef6b34a6..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.input.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.legacy {
-  display: var(--p-override-none);
-  flex: var(--p-override-one);
-  overflow: var(--p-override-visible);
-  padding: var(--p-override-zero);
-  background-color: var(--p-override-transparent);
-  width: var(--p-icon-size);
-  scale: var(--p-range-slider-thumb-scale);
-  mix-blend-mode: var(--p-badge-mix-blend-mode);
-
-  &::before {
-    content: var(--p-non-null-content);
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss
deleted file mode 100644
index 70f38cbd3f4..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.output.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.legacy {
-  display: none;
-  flex: 1;
-  overflow: visible;
-  padding: 0;
-  background-color: transparent;
-  width: var(--p-icon-size-small);
-  scale: 1.5;
-  mix-blend-mode: luminosity;
-
-  &::before {
-    content: '';
-  }
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss
deleted file mode 100644
index fdf7ee6575b..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.input.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.motion {
-  transition: transform var(--p-duration-1-0-0) var(--p-ease);
-  transition: transform var(--p-duration-1-5-0) var(--p-ease);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss b/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss
deleted file mode 100644
index 3be72cb3970..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.output.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.motion {
-  transition: transform var(--p-duration-100) var(--p-ease);
-  transition: transform var(--p-duration-150) var(--p-ease);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss
deleted file mode 100644
index a5cc0febe3b..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.input.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@font-face {
-  font-family: 'Custom Font';
-  font-weight: 400;
-}
-
-.font-size {
-  // LENGTHS
-  font-size: 12px;
-  font-size: 1rem;
-  // Ignore
-  font-size: 1em;
-  font-size: #{1px};
-  // Comment
-  font-size: 10px;
-  font-size: 12px + 1px;
-
-  // REM FUNCTION
-  font-size: rem(12px);
-  font-size: rem(1rem);
-  // Comment
-  font-size: rem(1em);
-  font-size: rem(10px);
-  font-size: rem($invalid);
-  font-size: rem();
-  font-size: rem(12px, $too-many-args);
-  font-size: rem(12px) 1px;
-  font-size: rem(1px) 12px;
-  font-size: rem(#{10px + 2px}) 12px;
-  font-size: rem(12px) + #{10px + 2px};
-}
-
-.font-weight {
-  // LENGTHS
-  font-weight: 400;
-  font-weight: 700;
-  // Comment
-  font-weight: 300;
-  font-weight: 400 + 300;
-
-  // ALIAS
-  font-weight: normal;
-  font-weight: bold;
-  // Ignore
-  font-weight: inherit;
-  // Comment
-  font-weight: bolder;
-}
-
-.font-line-height {
-  // LENGTHS
-  line-height: 16px;
-  line-height: 1rem;
-  // Comment
-  line-height: 10px;
-
-  // REM FUNCTION
-  line-height: rem(16px);
-  line-height: rem(1rem);
-  // Comment
-  line-height: rem(1em);
-  line-height: rem(10px);
-  line-height: rem($invalid);
-  line-height: rem();
-  line-height: rem(16px, $too-many-args);
-  line-height: rem(16px) 1px;
-  line-height: rem(1px) 16px;
-  line-height: rem(#{10px + 6px}) 16px;
-  line-height: rem(16px) + #{10px + 6px};
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss
deleted file mode 100644
index 0d7da2dff8e..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.output.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-@font-face {
-  font-family: 'Custom Font';
-  font-weight: 400;
-}
-
-.font-size {
-  // LENGTHS
-  font-size: var(--p-font-size-75);
-  font-size: var(--p-font-size-200);
-  // Ignore
-  font-size: 1em;
-  font-size: #{1px};
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: 10px;
-  font-size: 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: var(--p-font-size-75) + 1px;
-  font-size: 12px + 1px;
-
-  // REM FUNCTION
-  font-size: var(--p-font-size-75);
-  font-size: var(--p-font-size-200);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem(1em);
-  font-size: rem(1em);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem(10px);
-  font-size: rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem($invalid);
-  font-size: rem($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem();
-  font-size: rem();
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem(var(--p-font-size-75), $too-many-args);
-  font-size: rem(12px, $too-many-args);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: var(--p-font-size-75) 1px;
-  font-size: rem(12px) 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem(1px) var(--p-font-size-75);
-  font-size: rem(1px) 12px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: rem(#{10px + 2px}) var(--p-font-size-75);
-  font-size: rem(#{10px + 2px}) 12px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: var(--p-font-size-75) + #{10px + 2px};
-  font-size: rem(12px) + #{10px + 2px};
-}
-
-.font-weight {
-  // LENGTHS
-  font-weight: var(--p-font-weight-regular);
-  font-weight: var(--p-font-weight-bold);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-weight: 300;
-  font-weight: 300;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-weight: var(--p-font-weight-regular) + 300;
-  font-weight: 400 + 300;
-
-  // ALIAS
-  font-weight: var(--p-font-weight-regular);
-  font-weight: var(--p-font-weight-bold);
-  // Ignore
-  font-weight: inherit;
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-weight: bolder;
-  font-weight: bolder;
-}
-
-.font-line-height {
-  // LENGTHS
-  line-height: var(--p-font-line-height-1);
-  line-height: var(--p-font-line-height-1);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: 10px;
-  line-height: 10px;
-
-  // REM FUNCTION
-  line-height: var(--p-font-line-height-1);
-  line-height: var(--p-font-line-height-1);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem(1em);
-  line-height: rem(1em);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem(10px);
-  line-height: rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem($invalid);
-  line-height: rem($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem();
-  line-height: rem();
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem(var(--p-font-line-height-1), $too-many-args);
-  line-height: rem(16px, $too-many-args);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: var(--p-font-line-height-1) 1px;
-  line-height: rem(16px) 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem(1px) var(--p-font-line-height-1);
-  line-height: rem(1px) 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: rem(#{10px + 6px}) var(--p-font-line-height-1);
-  line-height: rem(#{10px + 6px}) 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // line-height: var(--p-font-line-height-1) + #{10px + 6px};
-  line-height: rem(16px) + #{10px + 6px};
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss
deleted file mode 100644
index 2af110f3593..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-size {
-  // REM FUNCTION
-  font-size: legacy-polaris-v8.rem(12px);
-  font-size: legacy-polaris-v8.rem(1rem);
-  // Comment
-  font-size: legacy-polaris-v8.rem(1em);
-  font-size: legacy-polaris-v8.rem(10px);
-  font-size: legacy-polaris-v8.rem($invalid);
-  font-size: legacy-polaris-v8.rem();
-  font-size: legacy-polaris-v8.rem(12px, $too-many-args);
-  font-size: legacy-polaris-v8.rem(12px) 1px;
-  font-size: legacy-polaris-v8.rem(1px) 12px;
-  font-size: legacy-polaris-v8.rem(#{10px + 2px}) 12px;
-  font-size: legacy-polaris-v8.rem(12px) + #{10px + 2px};
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss
deleted file mode 100644
index 9b8e72e6715..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.font-size {
-  // REM FUNCTION
-  font-size: var(--p-font-size-75);
-  font-size: var(--p-font-size-200);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem(1em);
-  font-size: legacy-polaris-v8.rem(1em);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem(10px);
-  font-size: legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem($invalid);
-  font-size: legacy-polaris-v8.rem($invalid);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem();
-  font-size: legacy-polaris-v8.rem();
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem(var(--p-font-size-75), $too-many-args);
-  font-size: legacy-polaris-v8.rem(12px, $too-many-args);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: var(--p-font-size-75) 1px;
-  font-size: legacy-polaris-v8.rem(12px) 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem(1px) var(--p-font-size-75);
-  font-size: legacy-polaris-v8.rem(1px) 12px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: legacy-polaris-v8.rem(#{10px + 2px}) var(--p-font-size-75);
-  font-size: legacy-polaris-v8.rem(#{10px + 2px}) 12px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // font-size: var(--p-font-size-75) + #{10px + 2px};
-  font-size: legacy-polaris-v8.rem(12px) + #{10px + 2px};
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts
deleted file mode 100644
index 78dc2ec16f3..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-font/transform.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin, AtRule} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-import {toPx} from '@shopify/polaris-tokens';
-
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  createInlineComment,
-  getFunctionArgs,
-  isNumericOperator,
-  isSassFunction,
-  isTransformableLength,
-  isUnitlessZero,
-  namespace,
-  toTransformablePx,
-  StopWalkingFunctionNodes,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedRem = namespace('rem', options);
-
-  return {
-    postcssPlugin: 'v9-styles-tokenize-font',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      if (
-        decl.parent &&
-        decl.parent.type === 'atrule' &&
-        (decl.parent as AtRule).name === 'font-face'
-      ) {
-        return;
-      }
-
-      const handlers = {
-        'font-size': handleFontSize,
-        'font-weight': handleFontWeight,
-        'line-height': handleFontLineHeight,
-      };
-
-      if (!isKeyOf(handlers, decl.prop)) return;
-
-      /**
-       * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.)
-       *
-       * Note: This is evaluated at the end of each visitor execution to determine whether
-       * or not to replace the declaration or insert a comment.
-       */
-      const targets: {replaced: boolean}[] = [];
-      let hasNumericOperator = false;
-
-      const parsedValue = valueParser(decl.value);
-
-      handlers[decl.prop]();
-
-      if (targets.some(({replaced}) => !replaced || hasNumericOperator)) {
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      //
-      // Handlers
-      //
-
-      function handleFontSize() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'word') {
-            if (globalValues.has(node.value)) return;
-
-            const dimension = valueParser.unit(node.value);
-
-            if (!isTransformableLength(dimension)) return;
-
-            targets.push({replaced: false});
-
-            const fontSizeInPx = isUnitlessZero(dimension)
-              ? `${dimension.number}px`
-              : toPx(`${dimension.number}${dimension.unit}`);
-
-            if (!isKeyOf(fontSizeMap, fontSizeInPx)) return;
-
-            targets[targets.length - 1]!.replaced = true;
-
-            node.value = `var(${fontSizeMap[fontSizeInPx]})`;
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedRem, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (args.length !== 1) return;
-
-              const fontSizeInPx = toTransformablePx(args[0]);
-
-              if (!isKeyOf(fontSizeMap, fontSizeInPx)) return;
-
-              targets[targets.length - 1]!.replaced = true;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: fontSizeMap[fontSizeInPx],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: fontSizeMap[fontSizeInPx].length,
-                },
-              ];
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-
-      function handleFontWeight() {
-        parsedValue.walk((node) => {
-          if (node.type === 'function') return StopWalkingFunctionNodes;
-
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'word') {
-            if (globalValues.has(node.value)) return;
-
-            targets.push({replaced: false});
-
-            const fontWeight = node.value;
-
-            if (!isKeyOf(fontWeightMap, fontWeight)) return;
-
-            targets[targets.length - 1]!.replaced = true;
-
-            node.value = `var(${fontWeightMap[fontWeight]})`;
-          }
-        });
-      }
-
-      function handleFontLineHeight() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'word') {
-            if (globalValues.has(node.value)) return;
-
-            targets.push({replaced: false});
-
-            const lineHeighInPx = toTransformablePx(node.value);
-
-            if (!isKeyOf(fontLineHeightMap, lineHeighInPx)) return;
-
-            targets[targets.length - 1]!.replaced = true;
-
-            node.value = `var(${fontLineHeightMap[lineHeighInPx]})`;
-
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedRem, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (args.length !== 1) return;
-
-              const lineHeightInPx = toTransformablePx(args[0]);
-
-              if (!isKeyOf(fontLineHeightMap, lineHeightInPx)) return;
-
-              targets[targets.length - 1]!.replaced = true;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: fontLineHeightMap[lineHeightInPx],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: fontLineHeightMap[lineHeightInPx].length,
-                },
-              ];
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-const globalValues = new Set(['inherit', 'initial', 'unset']);
-
-const fontSizeMap = {
-  '12px': '--p-font-size-75',
-  '14px': '--p-font-size-100',
-  '16px': '--p-font-size-200',
-  '20px': '--p-font-size-300',
-  '24px': '--p-font-size-400',
-  '28px': '--p-font-size-500',
-  '32px': '--p-font-size-600',
-  '40px': '--p-font-size-700',
-};
-
-const fontLineHeightMap = {
-  '16px': '--p-font-line-height-1',
-  '20px': '--p-font-line-height-2',
-  '24px': '--p-font-line-height-3',
-  '28px': '--p-font-line-height-4',
-  '32px': '--p-font-line-height-5',
-  '40px': '--p-font-line-height-6',
-  '48px': '--p-font-line-height-7',
-};
-
-const fontWeightMap = {
-  400: '--p-font-weight-regular',
-  500: '--p-font-weight-medium',
-  600: '--p-font-weight-semibold',
-  700: '--p-font-weight-bold',
-  // https://drafts.csswg.org/css-fonts-3/#propdef-font-weight
-  // 100 - Thin
-  // 200 - Extra Light (Ultra Light)
-  // 300 - Light
-  // 400 - Normal
-  normal: '--p-font-weight-regular',
-  // 500 - Medium
-  // 600 - Semi Bold (Demi Bold)
-  // 700 - Bold
-  bold: '--p-font-weight-bold',
-  // 800 - Extra Bold (Ultra Bold)
-  // 900 - Black (Heavy)
-};
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss
deleted file mode 100644
index 61ef9d8ac38..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.input.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-.easing {
-  transition-timing-function: linear;
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  transition-timing-function: linear(1);
-  transition-timing-function: ease;
-  transition-timing-function: ease-in;
-  transition-timing-function: ease-out;
-  transition-timing-function: ease-in-out;
-  transition-timing-function: cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  transition-timing-function: step-start;
-  transition-timing-function: step-end;
-  transition-timing-function: steps(1, jump-end);
-}
-
-.easing-shorthand {
-  transition: opacity 300ms linear;
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  transition: opacity 300ms linear(1);
-  transition: opacity 300ms ease;
-  transition: opacity 300ms ease-in;
-  transition: opacity 300ms ease-out;
-  transition: opacity 300ms ease-in-out;
-  transition: opacity 300ms cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  transition: opacity 300ms step-start;
-  transition: opacity 300ms step-end;
-  transition: opacity 300ms steps(1, jump-end);
-}
-
-.easing-multiple {
-  transition: opacity 300ms linear, left 300ms linear;
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  transition: opacity 300ms linear(1), left 300ms linear(1);
-  transition: opacity 300ms ease, left 300ms ease;
-  transition: opacity 300ms ease-in, left 300ms ease-in;
-  transition: opacity 300ms ease-out, left 300ms ease-out;
-  transition: opacity 300ms ease-in-out, left 300ms ease-in-out;
-  transition: opacity 300ms cubic-bezier(0, 0, 1, 1),
-    left 300ms cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  transition: opacity 300ms step-start, left 300ms step-start;
-  transition: opacity 300ms step-end, left 300ms step-start;
-  transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end);
-}
-
-.duration {
-  transition-duration: 0;
-  transition-duration: 0ms;
-  transition-duration: 0s;
-  transition-duration: 50ms;
-  transition-duration: 0.05s;
-  transition-duration: 100ms;
-  transition-duration: 0.1s;
-  transition-duration: 150ms;
-  transition-duration: 0.15s;
-  transition-duration: 200ms;
-  transition-duration: 0.2s;
-  transition-duration: 250ms;
-  transition-duration: 0.25s;
-  transition-duration: 300ms;
-  transition-duration: 0.3s;
-  transition-duration: 350ms;
-  transition-duration: 0.35s;
-  transition-duration: 400ms;
-  transition-duration: 0.4s;
-  transition-duration: 450ms;
-  transition-duration: 0.45s;
-  transition-duration: 500ms;
-  transition-duration: 0.5s;
-  transition-duration: 5s;
-}
-
-.duration-shorthand {
-  transition: opacity 0 linear;
-  transition: opacity 0ms linear;
-  transition: opacity 0s linear;
-  transition: opacity 50ms linear;
-  transition: opacity 0.05s linear;
-  transition: opacity 100ms linear;
-  transition: opacity 0.1s linear;
-  transition: opacity 150ms linear;
-  transition: opacity 0.15s linear;
-  transition: opacity 200ms linear;
-  transition: opacity 0.2s linear;
-  transition: opacity 250ms linear;
-  transition: opacity 0.25s linear;
-  transition: opacity 300ms linear;
-  transition: opacity 0.3s linear;
-  transition: opacity 350ms linear;
-  transition: opacity 0.35s linear;
-  transition: opacity 400ms linear;
-  transition: opacity 0.4s linear;
-  transition: opacity 450ms linear;
-  transition: opacity 0.45s linear;
-  transition: opacity 500ms linear;
-  transition: opacity 0.5s linear;
-  transition: opacity 5s linear;
-}
-
-.duration-multiple {
-  transition: opacity 0 linear, left 0 linear;
-  transition: opacity 0ms linear, left 0ms linear;
-  transition: opacity 0s linear, left 0s linear;
-  transition: opacity 50ms linear, left 50ms linear;
-  transition: opacity 0.05s linear, left 0.05s linear;
-  transition: opacity 100ms linear, left 100ms linear;
-  transition: opacity 0.1s linear, left 0.1s linear;
-  transition: opacity 150ms linear, left 150ms linear;
-  transition: opacity 0.15s linear, left 0.15s linear;
-  transition: opacity 200ms linear, left 200ms linear;
-  transition: opacity 0.2s linear, left 0.2s linear;
-  transition: opacity 250ms linear, left 250ms linear;
-  transition: opacity 0.25s linear, left 0.25s linear;
-  transition: opacity 300ms linear, left 300ms linear;
-  transition: opacity 0.3s linear, left 0.3s linear;
-  transition: opacity 350ms linear, left 350ms linear;
-  transition: opacity 0.35s linear, left 0.35s linear;
-  transition: opacity 400ms linear, left 400ms linear;
-  transition: opacity 0.4s linear, left 0.4s linear;
-  transition: opacity 450ms linear, left 450ms linear;
-  transition: opacity 0.45s linear, left 0.45s linear;
-  transition: opacity 500ms linear, left 500ms linear;
-  transition: opacity 0.5s linear, left 0.5s linear;
-  transition: opacity 5s linear, left 5s linear;
-}
-
-.animation {
-  animation: 300ms linear fadeIn;
-  animation-duration: 200ms;
-  animation-delay: 0.2s;
-  animation-timing-function: ease;
-}
-
-.edge-cases {
-  // Without an easing function
-  transition: fill 300ms;
-  // Duration comes after easing func
-  transition: opacity linear 0.5s;
-  // Duration + Delay
-  transition: opacity 400ms linear 300ms;
-  // Duration + Delay after easing func
-  transition: opacity linear 400ms 100ms;
-  // can't process variables
-  transition-timing-function: $foo;
-  transition: opacity $foo 0.5s;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss
deleted file mode 100644
index 5c1b23c00f3..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.output.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-.easing {
-  transition-timing-function: var(--p-linear);
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: linear(1);
-  transition-timing-function: var(--p-ease);
-  transition-timing-function: var(--p-ease-in);
-  transition-timing-function: var(--p-ease-out);
-  transition-timing-function: var(--p-ease-in-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: step-start;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: step-end;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values.
-  transition-timing-function: steps(1, jump-end);
-}
-
-.easing-shorthand {
-  transition: opacity var(--p-duration-300) var(--p-linear);
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) linear(1);
-  transition: opacity 300ms linear(1);
-  transition: opacity var(--p-duration-300) var(--p-ease);
-  transition: opacity var(--p-duration-300) var(--p-ease-in);
-  transition: opacity var(--p-duration-300) var(--p-ease-out);
-  transition: opacity var(--p-duration-300) var(--p-ease-in-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1);
-  transition: opacity 300ms cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) step-start;
-  transition: opacity 300ms step-start;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) step-end;
-  transition: opacity 300ms step-end;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) steps(1, jump-end);
-  transition: opacity 300ms steps(1, jump-end);
-}
-
-.easing-multiple {
-  transition: opacity var(--p-duration-300) var(--p-linear),
-    left var(--p-duration-300) var(--p-linear);
-  // See: https://w3c.github.io/csswg-drafts/css-easing/#typedef-linear-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'linear'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) linear(1), left var(--p-duration-300) linear(1);
-  transition: opacity 300ms linear(1), left 300ms linear(1);
-  transition: opacity var(--p-duration-300) var(--p-ease),
-    left var(--p-duration-300) var(--p-ease);
-  transition: opacity var(--p-duration-300) var(--p-ease-in),
-    left var(--p-duration-300) var(--p-ease-in);
-  transition: opacity var(--p-duration-300) var(--p-ease-out),
-    left var(--p-duration-300) var(--p-ease-out);
-  transition: opacity var(--p-duration-300) var(--p-ease-in-out),
-    left var(--p-duration-300) var(--p-ease-in-out);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'cubic-bezier'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) cubic-bezier(0, 0, 1, 1), left var(--p-duration-300) cubic-bezier(0, 0, 1, 1);
-  transition: opacity 300ms cubic-bezier(0, 0, 1, 1),
-    left 300ms cubic-bezier(0, 0, 1, 1);
-  // See:https://w3c.github.io/csswg-drafts/css-easing/#typedef-step-easing-function
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) step-start, left var(--p-duration-300) step-start;
-  transition: opacity 300ms step-start, left 300ms step-start;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'step-end'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // warning: Unexpected easing function 'step-start'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) step-end, left var(--p-duration-300) step-start;
-  transition: opacity 300ms step-end, left 300ms step-start;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Unexpected easing function 'steps'. See https://polaris.shopify.com/tokens/motion for possible values.
-  // transition: opacity var(--p-duration-300) steps(1, jump-end), left var(--p-duration-300) steps(1, jump-end);
-  transition: opacity 300ms steps(1, jump-end), left 300ms steps(1, jump-end);
-}
-
-.duration {
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-0);
-  transition-duration: var(--p-duration-50);
-  transition-duration: var(--p-duration-50);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-100);
-  transition-duration: var(--p-duration-150);
-  transition-duration: var(--p-duration-150);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-200);
-  transition-duration: var(--p-duration-250);
-  transition-duration: var(--p-duration-250);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-300);
-  transition-duration: var(--p-duration-350);
-  transition-duration: var(--p-duration-350);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-400);
-  transition-duration: var(--p-duration-450);
-  transition-duration: var(--p-duration-450);
-  transition-duration: var(--p-duration-500);
-  transition-duration: var(--p-duration-500);
-  transition-duration: var(--p-duration-5000);
-}
-
-.duration-shorthand {
-  transition: opacity var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-50) var(--p-linear);
-  transition: opacity var(--p-duration-50) var(--p-linear);
-  transition: opacity var(--p-duration-100) var(--p-linear);
-  transition: opacity var(--p-duration-100) var(--p-linear);
-  transition: opacity var(--p-duration-150) var(--p-linear);
-  transition: opacity var(--p-duration-150) var(--p-linear);
-  transition: opacity var(--p-duration-200) var(--p-linear);
-  transition: opacity var(--p-duration-200) var(--p-linear);
-  transition: opacity var(--p-duration-250) var(--p-linear);
-  transition: opacity var(--p-duration-250) var(--p-linear);
-  transition: opacity var(--p-duration-300) var(--p-linear);
-  transition: opacity var(--p-duration-300) var(--p-linear);
-  transition: opacity var(--p-duration-350) var(--p-linear);
-  transition: opacity var(--p-duration-350) var(--p-linear);
-  transition: opacity var(--p-duration-400) var(--p-linear);
-  transition: opacity var(--p-duration-400) var(--p-linear);
-  transition: opacity var(--p-duration-450) var(--p-linear);
-  transition: opacity var(--p-duration-450) var(--p-linear);
-  transition: opacity var(--p-duration-500) var(--p-linear);
-  transition: opacity var(--p-duration-500) var(--p-linear);
-  transition: opacity var(--p-duration-5000) var(--p-linear);
-}
-
-.duration-multiple {
-  transition: opacity var(--p-duration-0) var(--p-linear),
-    left var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-0) var(--p-linear),
-    left var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-0) var(--p-linear),
-    left var(--p-duration-0) var(--p-linear);
-  transition: opacity var(--p-duration-50) var(--p-linear),
-    left var(--p-duration-50) var(--p-linear);
-  transition: opacity var(--p-duration-50) var(--p-linear),
-    left var(--p-duration-50) var(--p-linear);
-  transition: opacity var(--p-duration-100) var(--p-linear),
-    left var(--p-duration-100) var(--p-linear);
-  transition: opacity var(--p-duration-100) var(--p-linear),
-    left var(--p-duration-100) var(--p-linear);
-  transition: opacity var(--p-duration-150) var(--p-linear),
-    left var(--p-duration-150) var(--p-linear);
-  transition: opacity var(--p-duration-150) var(--p-linear),
-    left var(--p-duration-150) var(--p-linear);
-  transition: opacity var(--p-duration-200) var(--p-linear),
-    left var(--p-duration-200) var(--p-linear);
-  transition: opacity var(--p-duration-200) var(--p-linear),
-    left var(--p-duration-200) var(--p-linear);
-  transition: opacity var(--p-duration-250) var(--p-linear),
-    left var(--p-duration-250) var(--p-linear);
-  transition: opacity var(--p-duration-250) var(--p-linear),
-    left var(--p-duration-250) var(--p-linear);
-  transition: opacity var(--p-duration-300) var(--p-linear),
-    left var(--p-duration-300) var(--p-linear);
-  transition: opacity var(--p-duration-300) var(--p-linear),
-    left var(--p-duration-300) var(--p-linear);
-  transition: opacity var(--p-duration-350) var(--p-linear),
-    left var(--p-duration-350) var(--p-linear);
-  transition: opacity var(--p-duration-350) var(--p-linear),
-    left var(--p-duration-350) var(--p-linear);
-  transition: opacity var(--p-duration-400) var(--p-linear),
-    left var(--p-duration-400) var(--p-linear);
-  transition: opacity var(--p-duration-400) var(--p-linear),
-    left var(--p-duration-400) var(--p-linear);
-  transition: opacity var(--p-duration-450) var(--p-linear),
-    left var(--p-duration-450) var(--p-linear);
-  transition: opacity var(--p-duration-450) var(--p-linear),
-    left var(--p-duration-450) var(--p-linear);
-  transition: opacity var(--p-duration-500) var(--p-linear),
-    left var(--p-duration-500) var(--p-linear);
-  transition: opacity var(--p-duration-500) var(--p-linear),
-    left var(--p-duration-500) var(--p-linear);
-  transition: opacity var(--p-duration-5000) var(--p-linear),
-    left var(--p-duration-5000) var(--p-linear);
-}
-
-.animation {
-  animation: var(--p-duration-300) var(--p-linear) fadeIn;
-  animation-duration: var(--p-duration-200);
-  animation-delay: var(--p-duration-200);
-  animation-timing-function: var(--p-ease);
-}
-
-.edge-cases {
-  // Without an easing function
-  transition: fill var(--p-duration-300);
-  // Duration comes after easing func
-  transition: opacity var(--p-linear) var(--p-duration-500);
-  // Duration + Delay
-  transition: opacity var(--p-duration-400) var(--p-linear)
-    var(--p-duration-300);
-  // Duration + Delay after easing func
-  transition: opacity var(--p-linear) var(--p-duration-400)
-    var(--p-duration-100);
-  // can't process variables
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Cannot statically analyze SCSS variable $foo.
-  transition-timing-function: $foo;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Cannot statically analyze SCSS variable $foo.
-  // transition: opacity $foo var(--p-duration-500);
-  transition: opacity $foo 0.5s;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts
deleted file mode 100644
index 2516f14cdf7..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/transform.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-import type {Declaration} from 'postcss';
-import type {ParsedValue, Node} from 'postcss-value-parser';
-import valueParser from 'postcss-value-parser';
-
-import {
-  isSassVariable,
-  hasNumericOperator,
-  isTransformableDuration,
-  isPolarisVar,
-  createSassMigrator as v9StylesTokenizeMotion,
-  setNodeValue,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default v9StylesTokenizeMotion(
-  'v9-replace-sass-transition',
-  (_, {methods}, context) => {
-    function insertUnexpectedEasingFunctionComment(
-      node: Node,
-      decl: Declaration,
-    ) {
-      methods.report({
-        severity: 'warning',
-        node: decl,
-        message: `Unexpected easing function '${node.value}'. See https://polaris.shopify.com/tokens/motion for possible values.`,
-      });
-    }
-
-    function mutateDurationValue(node: Node, decl: Declaration): void {
-      if (isPolarisVar(node)) {
-        return;
-      }
-
-      if (isSassVariable(node)) {
-        methods.report({
-          severity: 'warning',
-          node: decl,
-          message: `Cannot statically analyze SCSS variable ${node.value}.`,
-        });
-        return;
-      }
-
-      const unit = valueParser.unit(node.value);
-      if (unit) {
-        const constantDuration = `${normalizeStringifiedNumber(unit.number)}${
-          unit.unit
-        }`;
-
-        if (!isKeyOf(durationConstantsMap, constantDuration)) {
-          methods.report({
-            severity: 'warning',
-            node: decl,
-            message: `No matching duration token for '${constantDuration}'.`,
-          });
-
-          return;
-        }
-
-        const durationCustomProperty = durationConstantsMap[constantDuration];
-        const targetValue = `var(${durationCustomProperty})`;
-
-        if (context.fix) {
-          setNodeValue(node, targetValue);
-        } else {
-          methods.report({
-            severity: 'error',
-            node: decl,
-            message: `Replace duration value with token: ${targetValue}`,
-          });
-        }
-      }
-    }
-
-    function mutateFunctionValue(node: Node, decl: Declaration): void {
-      if (isPolarisVar(node)) {
-        return;
-      }
-
-      if (isSassVariable(node)) {
-        methods.report({
-          severity: 'warning',
-          node: decl,
-          message: `Cannot statically analyze SCSS variable ${node.value}.`,
-        });
-        return;
-      }
-
-      if (node.type === 'function') {
-        const easingFuncHandlers = {
-          // Per the spec, these can all be functions:
-          // https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
-          linear: insertUnexpectedEasingFunctionComment,
-          'cubic-bezier': insertUnexpectedEasingFunctionComment,
-          steps: insertUnexpectedEasingFunctionComment,
-        };
-
-        if (isKeyOf(easingFuncHandlers, node.value)) {
-          easingFuncHandlers[node.value](node, decl);
-          return;
-        }
-      }
-
-      if (node.type === 'word') {
-        if (isKeyOf(easingFuncConstantsMap, node.value)) {
-          const targetValue = `var(${easingFuncConstantsMap[node.value]})`;
-
-          if (context.fix) {
-            setNodeValue(node, targetValue);
-          } else {
-            methods.report({
-              severity: 'error',
-              node: decl,
-              message: `Replace easing function with token: ${targetValue}`,
-            });
-          }
-
-          return;
-        }
-
-        if (cssEasingBuiltinFuncs.includes(node.value)) {
-          insertUnexpectedEasingFunctionComment(node, decl);
-        }
-      }
-    }
-
-    function mutateDelayValue(node: Node, decl: Declaration): void {
-      // For now, we treat delays like durations
-      return mutateDurationValue(node, decl);
-    }
-
-    function mutateShorthandValue(
-      decl: Declaration,
-      parsedValue: ParsedValue,
-    ): void {
-      const splitValues: Node[][] = [[]];
-
-      // Gathering up references of nodes into groups. Important to note that
-      // we're dealing with mutable structures here, so we are purposefully
-      // NOT making copies.
-      parsedValue.nodes.forEach((node) => {
-        if (node.type === 'div') {
-          splitValues.push([]);
-        } else {
-          splitValues[splitValues.length - 1].push(node);
-        }
-      });
-
-      splitValues.forEach((nodes) => {
-        // From the spec:
-        //
-        // Note that order is important within the items in this property: the
-        // first value that can be parsed as a time is assigned to the
-        // transition-duration, and the second value that can be parsed as a
-        // time is assigned to transition-delay.
-        // https://w3c.github.io/csswg-drafts/css-transitions-1/#transition-shorthand-property
-        //
-        // That sounds like an array to me! [0] is duration, [1] is delay.
-        const timings: Node[] = [];
-
-        nodes.forEach((node) => {
-          const unit = valueParser.unit(node.value);
-          if (isTransformableDuration(unit)) {
-            timings.push(node);
-          } else {
-            // This node could be either the property to animate, or an easing
-            // function. We try mutate the easing function, but if not we assume
-            // it's the property to animate and therefore do not leave a comment.
-            mutateFunctionValue(node, decl);
-          }
-        });
-
-        if (timings[0]) {
-          mutateDurationValue(timings[0], decl);
-        }
-
-        if (timings[1]) {
-          mutateDelayValue(timings[1], decl);
-        }
-      });
-    }
-
-    return (root) => {
-      methods.walkDecls(root, (decl) => {
-        const handlers: {[key: string]: () => void} = {
-          'transition-duration': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateDurationValue(node, decl);
-            });
-          },
-          'transition-delay': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateDelayValue(node, decl);
-            });
-          },
-          'transition-timing-function': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateFunctionValue(node, decl);
-            });
-          },
-          transition: () => {
-            mutateShorthandValue(decl, parsedValue);
-          },
-          'animation-duration': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateDurationValue(node, decl);
-            });
-          },
-          'animation-delay': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateDelayValue(node, decl);
-            });
-          },
-          'animation-timing-function': () => {
-            parsedValue.nodes.forEach((node) => {
-              mutateFunctionValue(node, decl);
-            });
-          },
-          animation: () => {
-            mutateShorthandValue(decl, parsedValue);
-          },
-        };
-
-        if (!handlers[decl.prop]) {
-          return;
-        }
-
-        const parsedValue = valueParser(decl.value);
-
-        if (hasNumericOperator(parsedValue)) {
-          methods.report({
-            node: decl,
-            severity: 'warning',
-            message: 'Numeric operator detected.',
-          });
-        }
-
-        handlers[decl.prop]();
-
-        if (context.fix) {
-          decl.value = parsedValue.toString();
-        }
-      });
-    };
-  },
-);
-
-const durationConstantsMap = {
-  '0': '--p-duration-0',
-  '0s': '--p-duration-0',
-  '0ms': '--p-duration-0',
-  '50ms': '--p-duration-50',
-  '0.05s': '--p-duration-50',
-  '100ms': '--p-duration-100',
-  '0.1s': '--p-duration-100',
-  '150ms': '--p-duration-150',
-  '0.15s': '--p-duration-150',
-  '200ms': '--p-duration-200',
-  '0.2s': '--p-duration-200',
-  '250ms': '--p-duration-250',
-  '0.25s': '--p-duration-250',
-  '300ms': '--p-duration-300',
-  '0.3s': '--p-duration-300',
-  '350ms': '--p-duration-350',
-  '0.35s': '--p-duration-350',
-  '400ms': '--p-duration-400',
-  '0.4s': '--p-duration-400',
-  '450ms': '--p-duration-450',
-  '0.45s': '--p-duration-450',
-  '500ms': '--p-duration-500',
-  '0.5s': '--p-duration-500',
-  '5s': '--p-duration-5000',
-};
-
-const easingFuncConstantsMap = {
-  linear: '--p-linear',
-  ease: '--p-ease',
-  'ease-in': '--p-ease-in',
-  'ease-out': '--p-ease-out',
-  'ease-in-out': '--p-ease-in-out',
-};
-
-// Per the spec for transition easing functions:
-// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
-const cssEasingBuiltinFuncs = [
-  'linear',
-  'ease',
-  'ease-in',
-  'ease-out',
-  'ease-in-out',
-  'cubic-bezier',
-  'step-start',
-  'step-end',
-  'steps',
-];
-
-function normalizeStringifiedNumber(number: string): string {
-  return Number(number).toString();
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss
deleted file mode 100644
index f6a88c5d3e4..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.input.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border: 1px solid var(--p-border-subdued);
-  border: 1px solid transparent;
-  border: 1px solid currentColor;
-  border: 1px solid color('sky');
-  border: 0.0625rem solid var(--p-border-subdued);
-  border: solid 1px var(--p-border-subdued);
-  border: 1px solid rgba(141, 145, 150, 0.5);
-  border: 1px solid $var;
-  border-width: 1px;
-  border-width: 0.0625rem;
-
-  /* Ignore */
-  border: 0.0625em solid var(--p-border-subdued);
-  border: 0 solid var(--p-border-subdued);
-  border: (16px + 16px) solid var(--p-border-subdued);
-  border: var(--var);
-  border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued);
-  border-width: 0.0625em;
-  border-width: 0;
-
-  /* Comment */
-  border: 10px solid var(--p-border-subdued);
-  border: 10rem solid transparent;
-  border-width: 10px;
-  border-width: 10rem;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border: rem(1px) solid var(--p-border-subdued);
-  border: solid rem(1px) var(--p-border-subdued);
-  border-width: rem(1px);
-  border-width: rem(1px) rem(1px);
-  border-width: rem(1px) 1px;
-  border-width: rem(1px) 4in;
-  border-width: rem(1px) 1em;
-  border-width: rem(1px) 0 0 0;
-
-  /* Ignore */
-  border: calc(1rem + var(--var, #{rem(1px)})) solid var(--p-border-subdued);
-  border: calc(1rem + var(--var, #{rem(10px)})) solid var(--p-border-subdued);
-  border-width: calc(-1 * rem(1px));
-
-  /* Comment */
-  border: rem(10px) solid var(--p-border-subdued);
-  border-width: rem(10px);
-  border-width: rem(10px) rem(10px);
-  border-width: rem(1px) rem(10px);
-  border-width: rem(10px) -1px;
-  border-width: rem(10px) + 1px;
-  border-width: rem($var * 1px);
-}
-
-.border-radius {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border-radius: 2px;
-  border-radius: 1rem;
-
-  /* Ignore */
-  border-radius: 0;
-  border-radius: 2em;
-  border-radius: calc(var(--p-space-2) * 3);
-  border-radius: 50%;
-
-  /* Comment */
-  border-radius: 1px;
-  border-radius: 20px / 50%;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border-radius: rem(8px);
-
-  /* Ignore */
-  border-radius: calc(var(--p-border-radius-base) * 2px);
-
-  /* Comment */
-  border-radius: rem(10px) rem(4px);
-  border-radius: rem(1px) * 5;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss
deleted file mode 100644
index 40cbf4d90a3..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.output.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-/* stylelint-disable */
-
-.border {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-1) solid transparent;
-  border: var(--p-border-width-1) solid currentColor;
-  border: var(--p-border-width-1) solid color('sky');
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: solid var(--p-border-width-1) var(--p-border-subdued);
-  border: var(--p-border-width-1) solid rgba(141, 145, 150, 0.5);
-  border: var(--p-border-width-1) solid $var;
-  border-width: var(--p-border-width-1);
-  border-width: var(--p-border-width-1);
-
-  /* Ignore */
-  border: 0.0625em solid var(--p-border-subdued);
-  border: 0 solid var(--p-border-subdued);
-  border: (16px + 16px) solid var(--p-border-subdued);
-  border: var(--var);
-  border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued);
-  border-width: 0.0625em;
-  border-width: 0;
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: 10px solid var(--p-border-subdued);
-  border: 10px solid var(--p-border-subdued);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: 10rem solid transparent;
-  border: 10rem solid transparent;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: 10px;
-  border-width: 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: 10rem;
-  border-width: 10rem;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: solid var(--p-border-width-1) var(--p-border-subdued);
-  border-width: var(--p-border-width-1);
-  border-width: var(--p-border-width-1) var(--p-border-width-1);
-  border-width: var(--p-border-width-1) var(--p-border-width-1);
-  border-width: var(--p-border-width-1) 4in;
-  border-width: var(--p-border-width-1) 1em;
-  border-width: var(--p-border-width-1) 0 0 0;
-
-  /* Ignore */
-  border: calc(1rem + var(--var, #{rem(1px)})) solid var(--p-border-subdued);
-  border: calc(1rem + var(--var, #{rem(10px)})) solid var(--p-border-subdued);
-  border-width: calc(-1 * rem(1px));
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: rem(10px) solid var(--p-border-subdued);
-  border: rem(10px) solid var(--p-border-subdued);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: rem(10px);
-  border-width: rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: rem(10px) rem(10px);
-  border-width: rem(10px) rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: var(--p-border-width-1) rem(10px);
-  border-width: rem(1px) rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: rem(10px) -1px;
-  border-width: rem(10px) -1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: rem(10px) + var(--p-border-width-1);
-  border-width: rem(10px) + 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: rem($var * var(--p-border-width-1));
-  border-width: rem($var * 1px);
-}
-
-.border-radius {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border-radius: var(--p-border-radius-05);
-  border-radius: var(--p-border-radius-4);
-
-  /* Ignore */
-  border-radius: 0;
-  border-radius: 2em;
-  border-radius: calc(var(--p-space-2) * 3);
-  border-radius: 50%;
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: 1px;
-  border-radius: 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-5) / 50%;
-  border-radius: 20px / 50%;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border-radius: var(--p-border-radius-2);
-
-  /* Ignore */
-  border-radius: calc(var(--p-border-radius-base) * 2px);
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: rem(10px) var(--p-border-radius-1);
-  border-radius: rem(10px) rem(4px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: rem(1px) * 5;
-  border-radius: rem(1px) * 5;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss
deleted file mode 100644
index 8111f61de2c..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border: 1px solid var(--p-border-subdued);
-  border: 1px solid transparent;
-  border: 1px solid currentColor;
-  border: 1px solid color('sky');
-  border: 0.0625rem solid var(--p-border-subdued);
-  border: solid 1px var(--p-border-subdued);
-  border: 1px solid rgba(141, 145, 150, 0.5);
-  border: 1px solid $var;
-  border-width: 1px;
-  border-width: 0.0625rem;
-
-  /* Ignore */
-  border: 0.0625em solid var(--p-border-subdued);
-  border: 0 solid var(--p-border-subdued);
-  border: (16px + 16px) solid var(--p-border-subdued);
-  border: var(--var);
-  border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued);
-  border-width: 0.0625em;
-  border-width: 0;
-
-  /* Comment */
-  border: 10px solid var(--p-border-subdued);
-  border: 10rem solid transparent;
-  border-width: 10px;
-  border-width: 10rem;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border: legacy-polaris-v8.rem(1px) solid var(--p-border-subdued);
-  border: solid legacy-polaris-v8.rem(1px) var(--p-border-subdued);
-  border-width: legacy-polaris-v8.rem(1px);
-  border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(1px);
-  border-width: legacy-polaris-v8.rem(1px) 1px;
-  border-width: legacy-polaris-v8.rem(1px) 4in;
-  border-width: legacy-polaris-v8.rem(1px) 1em;
-  border-width: legacy-polaris-v8.rem(1px) 0 0 0;
-
-  /* Ignore */
-  border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(1px)})) solid
-    var(--p-border-subdued);
-  border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(10px)})) solid
-    var(--p-border-subdued);
-  border-width: calc(-1 * legacy-polaris-v8.rem(1px));
-
-  /* Comment */
-  border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued);
-  border-width: legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(10px) -1px;
-  border-width: legacy-polaris-v8.rem(10px) + 1px;
-  border-width: legacy-polaris-v8.rem($var * 1px);
-}
-
-.border-radius {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border-radius: 2px;
-  border-radius: 1rem;
-
-  /* Ignore */
-  border-radius: 0;
-  border-radius: 2em;
-  border-radius: calc(var(--p-space-2) * 3);
-  border-radius: 50%;
-
-  /* Comment */
-  border-radius: 1px;
-  border-radius: 20px / 50%;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border-radius: legacy-polaris-v8.rem(8px);
-
-  /* Ignore */
-  border-radius: calc(var(--p-border-radius-base) * 2px);
-
-  /* Comment */
-  border-radius: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(4px);
-  border-radius: legacy-polaris-v8.rem(1px) * 5;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss
deleted file mode 100644
index f0427a089ed..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/* stylelint-disable */
-@use 'global-styles/legacy-polaris-v8';
-
-.border {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: var(--p-border-width-1) solid transparent;
-  border: var(--p-border-width-1) solid currentColor;
-  border: var(--p-border-width-1) solid color('sky');
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: solid var(--p-border-width-1) var(--p-border-subdued);
-  border: var(--p-border-width-1) solid rgba(141, 145, 150, 0.5);
-  border: var(--p-border-width-1) solid $var;
-  border-width: var(--p-border-width-1);
-  border-width: var(--p-border-width-1);
-
-  /* Ignore */
-  border: 0.0625em solid var(--p-border-subdued);
-  border: 0 solid var(--p-border-subdued);
-  border: (16px + 16px) solid var(--p-border-subdued);
-  border: var(--var);
-  border: calc(1px / var(--item-scale, 1)) solid var(--p-border-subdued);
-  border-width: 0.0625em;
-  border-width: 0;
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: 10px solid var(--p-border-subdued);
-  border: 10px solid var(--p-border-subdued);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: 10rem solid transparent;
-  border: 10rem solid transparent;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: 10px;
-  border-width: 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: 10rem;
-  border-width: 10rem;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border: var(--p-border-width-1) solid var(--p-border-subdued);
-  border: solid var(--p-border-width-1) var(--p-border-subdued);
-  border-width: var(--p-border-width-1);
-  border-width: var(--p-border-width-1) var(--p-border-width-1);
-  border-width: var(--p-border-width-1) var(--p-border-width-1);
-  border-width: var(--p-border-width-1) 4in;
-  border-width: var(--p-border-width-1) 1em;
-  border-width: var(--p-border-width-1) 0 0 0;
-
-  /* Ignore */
-  border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(1px)})) solid
-    var(--p-border-subdued);
-  border: calc(1rem + var(--var, #{legacy-polaris-v8.rem(10px)})) solid
-    var(--p-border-subdued);
-  border-width: calc(-1 * legacy-polaris-v8.rem(1px));
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued);
-  border: legacy-polaris-v8.rem(10px) solid var(--p-border-subdued);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: var(--p-border-width-1) legacy-polaris-v8.rem(10px);
-  border-width: legacy-polaris-v8.rem(1px) legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: legacy-polaris-v8.rem(10px) -1px;
-  border-width: legacy-polaris-v8.rem(10px) -1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: legacy-polaris-v8.rem(10px) + var(--p-border-width-1);
-  border-width: legacy-polaris-v8.rem(10px) + 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-width: legacy-polaris-v8.rem($var * var(--p-border-width-1));
-  border-width: legacy-polaris-v8.rem($var * 1px);
-}
-
-.border-radius {
-  /* --- LENGTHS --- */
-
-  /* Migrate */
-  border-radius: var(--p-border-radius-05);
-  border-radius: var(--p-border-radius-4);
-
-  /* Ignore */
-  border-radius: 0;
-  border-radius: 2em;
-  border-radius: calc(var(--p-space-2) * 3);
-  border-radius: 50%;
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: 1px;
-  border-radius: 1px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-5) / 50%;
-  border-radius: 20px / 50%;
-
-  /* --- REM FUNCTION --- */
-
-  /* Migrate */
-  border-radius: var(--p-border-radius-2);
-
-  /* Ignore */
-  border-radius: calc(var(--p-border-radius-base) * 2px);
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: legacy-polaris-v8.rem(10px) var(--p-border-radius-1);
-  border-radius: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(4px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: legacy-polaris-v8.rem(1px) * 5;
-  border-radius: legacy-polaris-v8.rem(1px) * 5;
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts
deleted file mode 100644
index 3e6ea45d383..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/transform.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {Plugin} from 'postcss';
-import postcss from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {
-  getFunctionArgs,
-  isNumericOperator,
-  isSassFunction,
-  isTransformableLength,
-  namespace,
-  toTransformablePx,
-  StopWalkingFunctionNodes,
-  createInlineComment,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedRem = namespace('rem', options);
-
-  return {
-    postcssPlugin: 'v9-styles-tokenize-shape',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      let handler;
-
-      if (borderProps.has(decl.prop)) handler = handleBorderProps;
-      else if (borderRadiusProps.has(decl.prop))
-        handler = handleBorderRadiusProps;
-      else return;
-
-      /**
-       * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.)
-       *
-       * Note: This is evaluated at the end of each visitor execution to determine whether
-       * or not to replace the declaration or insert a comment.
-       */
-      const targets: {replaced: boolean}[] = [];
-      let hasNumericOperator = false;
-      const parsedValue = valueParser(decl.value);
-
-      handler();
-
-      if (targets.some(({replaced}) => !replaced || hasNumericOperator)) {
-        // Insert comment if the declaration value contains calculations
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      //
-      // Handlers
-      //
-
-      function handleBorderProps() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'word') {
-            if (globalValues.has(node.value)) return;
-
-            const dimension = valueParser.unit(node.value);
-
-            if (!isTransformableLength(dimension)) return;
-
-            targets.push({replaced: false});
-
-            const valueInPx = toTransformablePx(node.value);
-
-            if (!isKeyOf(borderWidthLengthMap, valueInPx)) return;
-
-            node.value = `var(${borderWidthLengthMap[valueInPx]})`;
-
-            targets[targets.length - 1]!.replaced = true;
-
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedRem, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (args.length !== 1) return;
-
-              const valueInPx = toTransformablePx(args[0]);
-
-              if (!isKeyOf(borderWidthLengthMap, valueInPx)) return;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: borderWidthLengthMap[valueInPx],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: borderWidthLengthMap[valueInPx].length,
-                },
-              ];
-
-              targets[targets.length - 1]!.replaced = true;
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-
-      function handleBorderRadiusProps() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'word') {
-            if (globalValues.has(node.value)) return;
-
-            const dimension = valueParser.unit(node.value);
-
-            if (!isTransformableLength(dimension)) return;
-
-            targets.push({replaced: false});
-
-            const valueInPx = toTransformablePx(node.value);
-
-            if (!isKeyOf(borderRadiusLengthMap, valueInPx)) return;
-
-            node.value = `var(${borderRadiusLengthMap[valueInPx]})`;
-
-            targets[targets.length - 1]!.replaced = true;
-
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedRem, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (args.length !== 1) return;
-
-              const valueInPx = toTransformablePx(args[0]);
-
-              if (!isKeyOf(borderRadiusLengthMap, valueInPx)) return;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: borderRadiusLengthMap[valueInPx],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: borderRadiusLengthMap[valueInPx].length,
-                },
-              ];
-
-              targets[targets.length - 1]!.replaced = true;
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-    },
-  };
-};
-
-const globalValues = new Set(['inherit', 'initial', 'unset']);
-
-const borderProps = new Set([
-  'border',
-  'border-top',
-  'border-right',
-  'border-bottom',
-  'border-left',
-  'border-width',
-  'border-top-width',
-  'border-right-width',
-  'border-bottom-width',
-  'border-left-width',
-]);
-
-const borderRadiusProps = new Set([
-  'border-radius',
-  'border-top-left-radius',
-  'border-top-right-radius',
-  'border-bottom-left-radius',
-  'border-bottom-right-radius',
-]);
-
-const borderWidthLengthMap = {
-  '1px': '--p-border-width-1',
-  '2px': '--p-border-width-2',
-  '3px': '--p-border-width-3',
-  '4px': '--p-border-width-4',
-  '5px': '--p-border-width-5',
-} as const;
-
-const borderRadiusLengthMap = {
-  '2px': '--p-border-radius-05',
-  '4px': '--p-border-radius-1',
-  '8px': '--p-border-radius-2',
-  '12px': '--p-border-radius-3',
-  '16px': '--p-border-radius-4',
-  '20px': '--p-border-radius-5',
-  '30px': '--p-border-radius-6',
-  '3px': '--p-border-radius-base',
-  '6px': '--p-border-radius-large',
-} as const;
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss
deleted file mode 100644
index c9a8cfc7e8c..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.input.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-.space {
-  // LENGTHS
-  // Migrate
-  padding: 16px;
-  padding: 1rem;
-  padding: 16px 16px;
-  padding: 1rem 1rem;
-  padding: 16px 1rem;
-  padding: 0 16px;
-  padding: 1rem 0;
-  padding: 16px 4in;
-  padding: 16px 1em;
-  padding: (16px + 16px) 16px;
-  // Ignore
-  padding: 0;
-  padding: 1;
-  padding: 2;
-  padding: #{16px + 16px};
-  padding: layout-width(nav);
-  padding: 10em;
-  padding: var(--var);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4, 16px);
-  // Comment
-  padding: 10px;
-  padding: 10rem;
-  padding: 10px 10px;
-  padding: 16px 10px;
-  padding: 10rem 10rem;
-  padding: 1rem 10rem;
-  padding: 10px 10rem;
-  padding: 16px 10rem;
-  padding: 10px 1rem;
-  padding: 16px -16px;
-  padding: 16px + 16px;
-  padding: 16px + 16px 16px;
-  padding: $var + 16px;
-  padding: calc(16px + 16px);
-  padding: 16px + #{16px + 16px};
-  // Skip negative lengths. Need to discuss replacement strategy e.g.
-  // calc(-1 * var(--p-space-*)) vs var(--p-space--*)
-  padding: -16px;
-  padding: -10px;
-
-  // REM FUNCTION
-  // Migrate
-  padding: rem(16px);
-  padding: rem(16px) rem(16px);
-  padding: rem(16px) 16px;
-  padding: rem(16px) 4in;
-  padding: rem(16px) 1em;
-  // Ignore
-  padding: calc(10rem + var(--p-choice-size, #{rem(16px)}));
-  padding: calc(10rem + var(--p-choice-size, #{rem(10px)}));
-  // Comment
-  padding: rem(10px);
-  padding: rem(10px) rem(10px);
-  padding: rem(16px) rem(10px);
-  padding: rem(16px) -16px;
-  padding: rem(16px) + 16px;
-  padding: rem($var * 16px);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss
deleted file mode 100644
index 017cf3eb5cd..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.output.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-.space {
-  // LENGTHS
-  // Migrate
-  padding: var(--p-space-4);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: 0 var(--p-space-4);
-  padding: var(--p-space-4) 0;
-  padding: var(--p-space-4) 4in;
-  padding: var(--p-space-4) 1em;
-  padding: (16px + 16px) var(--p-space-4);
-  // Ignore
-  padding: 0;
-  padding: 1;
-  padding: 2;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  padding: #{16px + 16px};
-  padding: layout-width(nav);
-  padding: 10em;
-  padding: var(--var);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4, 16px);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  padding: 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: 10px 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: var(--p-space-4) 10px;
-  padding: 16px 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  padding: 10rem 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  // padding: var(--p-space-4) 10rem;
-  padding: 1rem 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // error: Non-tokenizable value '10rem'
-  padding: 10px 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  // padding: var(--p-space-4) 10rem;
-  padding: 16px 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: 10px var(--p-space-4);
-  padding: 10px 1rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  // padding: var(--p-space-4) -16px;
-  padding: 16px -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4);
-  padding: 16px + 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4) var(--p-space-4);
-  padding: 16px + 16px 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: $var + var(--p-space-4);
-  padding: $var + 16px;
-  padding: calc(16px + 16px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + #{16px + 16px};
-  padding: 16px + #{16px + 16px};
-  // Skip negative lengths. Need to discuss replacement strategy e.g.
-  // calc(-1 * var(--p-space-*)) vs var(--p-space--*)
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  padding: -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-10px'
-  padding: -10px;
-
-  // REM FUNCTION
-  // Migrate
-  padding: var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) 4in;
-  padding: var(--p-space-4) 1em;
-  // Ignore
-  padding: calc(10rem + var(--p-choice-size, #{rem(16px)}));
-  padding: calc(10rem + var(--p-choice-size, #{rem(10px)}));
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: rem(10px) rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: var(--p-space-4) rem(10px);
-  padding: rem(16px) rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  // padding: var(--p-space-4) -16px;
-  padding: rem(16px) -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4);
-  padding: rem(16px) + 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '$var * 16px'
-  // warning: Numeric operator detected.
-  // padding: rem($var * var(--p-space-4));
-  padding: rem($var * 16px);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss
deleted file mode 100644
index c45ab544272..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.input.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.space {
-  // LENGTHS
-  // Migrate
-  padding: 16px;
-  padding: 1rem;
-  padding: 16px 16px;
-  padding: 1rem 1rem;
-  padding: 16px 1rem;
-  padding: 0 16px;
-  padding: 1rem 0;
-  padding: 16px 4in;
-  padding: 16px 1em;
-  padding: (16px + 16px) 16px;
-  // Ignore
-  padding: 0;
-  padding: 1;
-  padding: 2;
-  padding: #{16px + 16px};
-  padding: layout-width(nav);
-  padding: 10em;
-  padding: var(--var);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4, 16px);
-  // Comment
-  padding: 10px;
-  padding: 10rem;
-  padding: 10px 10px;
-  padding: 16px 10px;
-  padding: 10rem 10rem;
-  padding: 1rem 10rem;
-  padding: 10px 10rem;
-  padding: 16px 10rem;
-  padding: 10px 1rem;
-  padding: 16px -16px;
-  padding: 16px + 16px;
-  padding: 16px + 16px 16px;
-  padding: $var + 16px;
-  padding: calc(16px + 16px);
-  padding: 16px + #{16px + 16px};
-  // Skip negative lengths. Need to discuss replacement strategy e.g.
-  // calc(-1 * var(--p-space-*)) vs var(--p-space--*)
-  padding: -16px;
-  padding: -10px;
-
-  // REM FUNCTION
-  // Migrate
-  padding: legacy-polaris-v8.rem(16px);
-  padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(16px);
-  padding: legacy-polaris-v8.rem(16px) 16px;
-  padding: legacy-polaris-v8.rem(16px) 4in;
-  padding: legacy-polaris-v8.rem(16px) 1em;
-  // Ignore
-  padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(16px)}));
-  padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(10px)}));
-  // Comment
-  padding: legacy-polaris-v8.rem(10px);
-  padding: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px);
-  padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(10px);
-  padding: legacy-polaris-v8.rem(16px) -16px;
-  padding: legacy-polaris-v8.rem(16px) + 16px;
-  padding: legacy-polaris-v8.rem($var * 16px);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss b/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss
deleted file mode 100644
index f881894d4f3..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/with-namespace.output.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-@use 'global-styles/legacy-polaris-v8';
-
-.space {
-  // LENGTHS
-  // Migrate
-  padding: var(--p-space-4);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: 0 var(--p-space-4);
-  padding: var(--p-space-4) 0;
-  padding: var(--p-space-4) 4in;
-  padding: var(--p-space-4) 1em;
-  padding: (16px + 16px) var(--p-space-4);
-  // Ignore
-  padding: 0;
-  padding: 1;
-  padding: 2;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  padding: #{16px + 16px};
-  padding: layout-width(nav);
-  padding: 10em;
-  padding: var(--var);
-  padding: var(--p-space-4);
-  padding: var(--p-space-4, 16px);
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  padding: 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: 10px 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: var(--p-space-4) 10px;
-  padding: 16px 10px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  padding: 10rem 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  // padding: var(--p-space-4) 10rem;
-  padding: 1rem 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // error: Non-tokenizable value '10rem'
-  padding: 10px 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10rem'
-  // padding: var(--p-space-4) 10rem;
-  padding: 16px 10rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: 10px var(--p-space-4);
-  padding: 10px 1rem;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  // padding: var(--p-space-4) -16px;
-  padding: 16px -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4);
-  padding: 16px + 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4) var(--p-space-4);
-  padding: 16px + 16px 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: $var + var(--p-space-4);
-  padding: $var + 16px;
-  padding: calc(16px + 16px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + #{16px + 16px};
-  padding: 16px + #{16px + 16px};
-  // Skip negative lengths. Need to discuss replacement strategy e.g.
-  // calc(-1 * var(--p-space-*)) vs var(--p-space--*)
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  padding: -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-10px'
-  padding: -10px;
-
-  // REM FUNCTION
-  // Migrate
-  padding: var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) var(--p-space-4);
-  padding: var(--p-space-4) 4in;
-  padding: var(--p-space-4) 1em;
-  // Ignore
-  padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(16px)}));
-  padding: calc(10rem + var(--p-choice-size, #{legacy-polaris-v8.rem(10px)}));
-  // Comment
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  padding: legacy-polaris-v8.rem(10px) legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '10px'
-  // padding: var(--p-space-4) legacy-polaris-v8.rem(10px);
-  padding: legacy-polaris-v8.rem(16px) legacy-polaris-v8.rem(10px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '-16px'
-  // padding: var(--p-space-4) -16px;
-  padding: legacy-polaris-v8.rem(16px) -16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // warning: Numeric operator detected.
-  // padding: var(--p-space-4) + var(--p-space-4);
-  padding: legacy-polaris-v8.rem(16px) + 16px;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // error: Non-tokenizable value '$var * 16px'
-  // warning: Numeric operator detected.
-  // padding: legacy-polaris-v8.rem($var * var(--p-space-4));
-  padding: legacy-polaris-v8.rem($var * 16px);
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts b/polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts
deleted file mode 100644
index 7048192b240..00000000000
--- a/polaris-codemods/src/codemods/v9-styles-tokenize-space/transform.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import valueParser from 'postcss-value-parser';
-
-import {
-  getFunctionArgs,
-  isNumericOperator,
-  isSassFunction,
-  isTransformableLength,
-  namespace,
-  toTransformablePx,
-  StopWalkingFunctionNodes,
-  createSassMigrator as v9StylesTokenizeSpace,
-} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
-export default v9StylesTokenizeSpace(
-  'v9-styles-tokenize-space',
-  (_, {methods, options}, context) => {
-    const namespacedRem = namespace('rem', options);
-
-    return (root) => {
-      methods.walkDecls(root, (decl) => {
-        if (!spaceProps.has(decl.prop)) return;
-
-        const parsedValue = valueParser(decl.value);
-
-        handleSpaceProps();
-
-        if (context.fix) {
-          decl.value = parsedValue.toString();
-        }
-
-        function handleSpaceProps() {
-          parsedValue.walk((node) => {
-            if (isNumericOperator(node)) {
-              methods.report({
-                node: decl,
-                severity: 'warning',
-                message: 'Numeric operator detected.',
-              });
-              return;
-            }
-
-            if (node.type === 'word') {
-              if (globalValues.has(node.value)) return;
-
-              const dimension = valueParser.unit(node.value);
-
-              if (!isTransformableLength(dimension)) return;
-
-              const valueInPx = toTransformablePx(node.value);
-
-              if (!isKeyOf(spaceMap, valueInPx)) {
-                methods.report({
-                  node: decl,
-                  severity: 'error',
-                  message: `Non-tokenizable value '${node.value}'`,
-                });
-                return;
-              }
-
-              if (context.fix) {
-                node.value = `var(${spaceMap[valueInPx]})`;
-                return;
-              }
-
-              methods.report({
-                node: decl,
-                severity: 'error',
-                message: `Prefer var(${spaceMap[valueInPx]}) Polaris token.`,
-              });
-              return;
-            }
-
-            if (node.type === 'function') {
-              if (isSassFunction(namespacedRem, node)) {
-                const args = getFunctionArgs(node);
-
-                if (args.length !== 1) {
-                  methods.report({
-                    node: decl,
-                    severity: 'error',
-                    message: `Expected 1 argument, got ${args.length}`,
-                  });
-                  return;
-                }
-
-                const valueInPx = toTransformablePx(args[0]);
-
-                if (!isKeyOf(spaceMap, valueInPx)) {
-                  methods.report({
-                    node: decl,
-                    severity: 'error',
-                    message: `Non-tokenizable value '${args[0].trim()}'`,
-                  });
-                  return;
-                }
-
-                if (context.fix) {
-                  node.value = 'var';
-                  node.nodes = [
-                    {
-                      type: 'word',
-                      value: spaceMap[valueInPx],
-                      sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                      sourceEndIndex: spaceMap[valueInPx].length,
-                    },
-                  ];
-                  return;
-                }
-
-                methods.report({
-                  node: decl,
-                  severity: 'error',
-                  message: `Prefer var(${spaceMap[valueInPx]}) Polaris token.`,
-                });
-              }
-
-              return StopWalkingFunctionNodes;
-            }
-          });
-        }
-      });
-    };
-  },
-);
-
-const globalValues = new Set(['inherit', 'initial', 'unset']);
-
-const spaceProps = new Set([
-  'padding',
-  'padding-top',
-  'padding-right',
-  'padding-bottom',
-  'padding-left',
-  'padding-inline',
-  'padding-inline-start',
-  'padding-inline-end',
-  'padding-block',
-  'padding-block-start',
-  'padding-block-end',
-  'margin',
-  'margin-top',
-  'margin-right',
-  'margin-bottom',
-  'margin-left',
-  'margin-inline',
-  'margin-inline-start',
-  'margin-inline-end',
-  'margin-block',
-  'margin-block-start',
-  'margin-block-end',
-  'gap',
-  'grid-gap',
-  'row-gap',
-  'grid-row-gap',
-  'column-gap',
-  'grid-column-gap',
-]);
-
-const spaceMap = {
-  '1px': '--p-space-025',
-  '2px': '--p-space-05',
-  '4px': '--p-space-1',
-  '8px': '--p-space-2',
-  '12px': '--p-space-3',
-  '16px': '--p-space-4',
-  '20px': '--p-space-5',
-  '24px': '--p-space-6',
-  '32px': '--p-space-8',
-  '40px': '--p-space-10',
-  '48px': '--p-space-12',
-  '64px': '--p-space-16',
-  '80px': '--p-space-20',
-  '96px': '--p-space-24',
-  '112px': '--p-space-28',
-  '128px': '--p-space-32',
-} as const;
diff --git a/polaris-codemods/src/utilities/constants.ts b/polaris-codemods/src/utilities/constants.ts
deleted file mode 100644
index c90fa32552b..00000000000
--- a/polaris-codemods/src/utilities/constants.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type {TransformInfo} from './types';
-
-export const POLARIS_MIGRATOR_COMMENT =
-  'polaris-migrator: Unable to migrate the following expression. Please upgrade manually.';
-
-export const scss: TransformInfo = {
-  extensions: ['css', 'scss'],
-  options: {
-    namespace: {
-      name: 'namespace',
-      type: 'string',
-      description: 'Provide an optional SCSS module namespace to target.',
-    },
-  },
-};
-
-export const typescript: TransformInfo = {
-  extensions: ['js', 'jsx', 'ts', 'tsx'],
-  options: {
-    relative: {
-      name: 'relative',
-      type: 'boolean',
-      description: 'Are you targeting relative imports?',
-    },
-  },
-};
diff --git a/polaris-codemods/src/utilities/imports.ts b/polaris-codemods/src/utilities/imports.ts
deleted file mode 100644
index 36733a18ffd..00000000000
--- a/polaris-codemods/src/utilities/imports.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import type {Collection} from 'jscodeshift';
-import type core from 'jscodeshift';
-
-export function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return Boolean(
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === sourcePath).length,
-  );
-}
-
-export function getImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.importKind !== 'type')
-    .filter((path) => path.node.source.value === sourcePath);
-}
-
-export function getRelativeImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  fileName = '',
-) {
-  const relativeRegex = new RegExp(String.raw`^[\.\/]*${fileName}$`);
-  return source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path) =>
-        typeof path.node.source.value === 'string' &&
-        relativeRegex.test(path.node.source.value),
-    );
-}
-
-export function getRelativeImportDeclarationValue(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  fileName = '',
-) {
-  const declarations = getRelativeImportDeclaration(j, source, fileName);
-
-  if (!declarations.length) return null;
-
-  return (declarations.nodes()[0]!.source!.value as string) || null;
-}
-
-export function removeImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  getImportDeclaration(j, source, sourcePath).remove();
-}
-
-export function renameImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-  newSourcePath: string,
-) {
-  getImportDeclaration(j, source, sourcePath).forEach(
-    (importDeclaration) =>
-      (importDeclaration.node.source = j.stringLiteral(newSourcePath)),
-  );
-}
-
-export function insertImportDeclaration(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  importSpecifier: string,
-  sourcePath: string,
-  afterSourcePath: string,
-) {
-  const isSameModuleSpecifier = sourcePath === afterSourcePath;
-  if (isSameModuleSpecifier) {
-    insertImportSpecifier(j, source, sourcePath, importSpecifier);
-  } else {
-    getImportDeclaration(j, source, afterSourcePath).insertAfter(
-      j.importDeclaration.from({
-        source: j.literal(sourcePath),
-        specifiers: [j.importSpecifier(j.identifier(importSpecifier))],
-      }),
-    );
-  }
-}
-
-export function getDefaultImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === sourcePath)
-    .find(j.ImportDefaultSpecifier);
-}
-
-export function removeDefaultImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return getDefaultImportSpecifier(j, source, sourcePath).remove();
-}
-
-export function getDefaultImportSpecifierName(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  const specifiers = getDefaultImportSpecifier(j, source, sourcePath);
-
-  if (!specifiers.length) return null;
-
-  return specifiers.nodes()[0]!.local!.name;
-}
-
-export function hasDefaultImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return Boolean(getDefaultImportSpecifier(j, source, sourcePath).length);
-}
-
-export function getImportAllSpecifiers(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === sourcePath)
-    .find(j.ImportSpecifier);
-}
-
-export function getImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  sourcePath: string,
-) {
-  return getImportAllSpecifiers(j, source, sourcePath).filter(
-    (path) => path.value.imported.name === specifier,
-  );
-}
-
-export function getImportSpecifierName(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  sourcePath: string,
-) {
-  const specifiers = getImportSpecifier(j, source, specifier, sourcePath);
-
-  return specifiers.length > 0 ? specifiers.nodes()[0]!.local!.name : null;
-}
-
-export function hasImportSpecifiers(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  sourcePath: string,
-) {
-  return Boolean(getImportAllSpecifiers(j, source, sourcePath)?.length);
-}
-
-export function hasImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  sourcePath: string,
-) {
-  return Boolean(getImportSpecifier(j, source, specifier, sourcePath)?.length);
-}
-
-export function insertImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  importSpecifier: string,
-  sourcePath: string,
-) {
-  getImportDeclaration(j, source, sourcePath).replaceWith((declaration) => {
-    return j.importDeclaration.from({
-      source: j.literal(sourcePath),
-      specifiers: [
-        ...(declaration.value.specifiers || []).filter(
-          (item) => item.type === 'ImportSpecifier' && item.imported != null,
-        ),
-        j.importSpecifier(j.identifier(importSpecifier)),
-      ],
-      comments: declaration.value.comments || null,
-    });
-  });
-}
-
-export function renameImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  newSpecifier: string,
-  sourcePath: string,
-) {
-  getImportSpecifier(j, source, specifier, sourcePath).replaceWith(
-    j.importSpecifier(j.identifier(newSpecifier)),
-  );
-}
-
-export function removeImportSpecifier(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  specifier: string,
-  sourcePath: string,
-) {
-  getImportSpecifier(j, source, specifier, sourcePath).remove();
-}
-
-interface NormalizeImportSourcePathsOptions {
-  relative?: boolean;
-  from: string;
-  to: string;
-}
-
-export function normalizeImportSourcePaths(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  options: NormalizeImportSourcePathsOptions = {
-    relative: false,
-    from: '',
-    to: '',
-  },
-) {
-  const {relative, from, to} = options;
-  const sourcePaths = {
-    from: '@shopify/polaris',
-    to: '@shopify/polaris',
-  };
-
-  if (relative) {
-    sourcePaths.from = getRelativeImportDeclarationValue(j, source, from) || '';
-
-    if (!sourcePaths.from) return null;
-
-    sourcePaths.to =
-      getRelativeImportDeclarationValue(j, source, to) ||
-      sourcePaths.from.replace(from, to);
-  }
-
-  return sourcePaths;
-}
-
-export function updateImports(
-  j: core.JSCodeshift,
-  source: Collection<any>,
-  options: {
-    fromSpecifier: string;
-    toSpecifier: string;
-    fromSourcePath: string;
-    toSourcePath: string;
-  },
-) {
-  const {fromSpecifier, toSpecifier, fromSourcePath, toSourcePath} = options;
-
-  // Insert new import
-  if (!hasImportDeclaration(j, source, toSourcePath)) {
-    insertImportDeclaration(
-      j,
-      source,
-      toSpecifier,
-      toSourcePath,
-      fromSourcePath,
-    );
-  }
-  if (!hasImportSpecifier(j, source, toSpecifier, toSourcePath)) {
-    insertImportSpecifier(j, source, toSpecifier, toSourcePath);
-  }
-
-  // Remove old import
-  if (hasImportSpecifier(j, source, fromSpecifier, fromSourcePath)) {
-    removeImportSpecifier(j, source, fromSpecifier, fromSourcePath);
-  }
-  if (!hasImportSpecifiers(j, source, fromSourcePath)) {
-    removeImportDeclaration(j, source, fromSourcePath);
-  }
-}
diff --git a/polaris-codemods/src/utilities/jsx.ts b/polaris-codemods/src/utilities/jsx.ts
deleted file mode 100644
index e5eda149aab..00000000000
--- a/polaris-codemods/src/utilities/jsx.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import type {ASTPath, Collection, JSXAttribute, JSXElement} from 'jscodeshift';
-import type core from 'jscodeshift';
-
-export function getJSXAttributes(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-) {
-  return j(element)
-    .find(j.JSXOpeningElement)
-    .find(j.JSXAttribute)
-    .filter((attribute) => {
-      const matches = j(attribute)
-        .find(j.JSXIdentifier)
-        .filter((identifier) => identifier.value.name === attributeName);
-      return Boolean(matches.length);
-    });
-}
-
-export function hasJSXAttribute(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-) {
-  return getJSXAttributes(j, element, attributeName).length > 0;
-}
-
-export function hasJSXSpreadAttribute(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-) {
-  return (
-    j(element).find(j.JSXOpeningElement).find(j.JSXSpreadAttribute).length > 0
-  );
-}
-
-export function removeJSXAttributes(
-  _j: core.JSCodeshift,
-  element: ASTPath<JSXElement>,
-  attributeName: string,
-) {
-  const jsxAttributes = element.value.attributes?.filter(
-    (attr) => attr.type === 'JSXAttribute' && attr.name.name === attributeName,
-  );
-
-  if (!jsxAttributes) return;
-
-  jsxAttributes.forEach((attr) => {
-    const jsxAttribute = attr as JSXAttribute;
-
-    jsxAttribute.name.name = '';
-    jsxAttribute.value = null;
-  });
-}
-
-export function insertJSXAttribute(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-  attributeValue?: string,
-) {
-  const newComponent = j.jsxElement(
-    j.jsxOpeningElement(element.node.openingElement.name, [
-      ...(element.node.openingElement.attributes || []),
-      j.jsxAttribute(
-        j.jsxIdentifier(attributeName),
-        attributeValue ? j.stringLiteral(attributeValue) : null,
-      ),
-    ]),
-    element.node.closingElement,
-    element.node.children,
-  );
-
-  return j(element).replaceWith(newComponent);
-}
-
-export function replaceJSXAttributes(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  attributeName: string,
-  newAttributeName: string,
-  newAttributeValue?:
-    | string
-    | {
-        [key: string]: string;
-      },
-) {
-  return getJSXAttributes(j, element, attributeName).forEach((attribute) => {
-    j(attribute)
-      .find(j.JSXIdentifier)
-      .replaceWith(j.jsxIdentifier(newAttributeName));
-
-    if (!newAttributeValue) {
-      return;
-    }
-
-    j(attribute)
-      .find(j.StringLiteral)
-      .forEach((literal) => {
-        literal.node.value =
-          typeof newAttributeValue === 'string'
-            ? newAttributeValue
-            : newAttributeValue[literal.node.value];
-      });
-  });
-}
-
-export function replaceJSXElement(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  componentName: string,
-) {
-  const newComponent = j.jsxElement(
-    j.jsxOpeningElement(
-      j.jsxIdentifier(componentName),
-      element.node.openingElement.attributes,
-    ),
-    j.jsxClosingElement(j.jsxIdentifier(componentName)),
-    element.node.children,
-  );
-
-  return j(element).replaceWith(newComponent);
-}
-
-export function renameProps(
-  _j: core.JSCodeshift,
-  source: Collection<any>,
-  componentName: string,
-  props: {[from: string]: string},
-) {
-  const fromProps = Object.keys(props);
-  const isFromProp = (prop: unknown): prop is keyof typeof props =>
-    fromProps.includes(prop as string);
-
-  source.findJSXElements(componentName)?.forEach((path) => {
-    path.node.openingElement.attributes?.forEach((node) => {
-      if (node.type === 'JSXAttribute' && isFromProp(node.name.name)) {
-        node.name.name = props[node.name.name];
-      }
-    });
-  });
-
-  return source;
-}
-
-export function insertJSXComment(
-  j: core.JSCodeshift,
-  element: ASTPath<any>,
-  comment: string,
-  position: 'before' | 'after' = 'before',
-) {
-  const commentContent = j.jsxEmptyExpression();
-  commentContent.comments = [j.commentBlock(` ${comment} `, false, true)];
-
-  const jsxComment = j.jsxExpressionContainer(commentContent);
-  const lineBreak = j.jsxText('\n');
-
-  if (position === 'before') {
-    element.insertBefore(jsxComment);
-    element.insertBefore(lineBreak);
-  }
-
-  if (position === 'after') {
-    element.insertAfter(lineBreak);
-    element.insertAfter(jsxComment);
-  }
-}
-
-export function insertCommentBefore(
-  j: core.JSCodeshift,
-  path: ASTPath<any>,
-  comment: string,
-) {
-  const content = ` ${comment} `;
-
-  path.value.comments = path.value.comments || [];
-
-  const exists = path.value.comments.find(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (comment) => comment.value === content,
-  );
-
-  // Avoiding duplicates of the same comment
-  if (exists) return;
-
-  path.value.comments.push(j.commentBlock(content));
-}
diff --git a/polaris-codemods/src/utilities/sass.ts b/polaris-codemods/src/utilities/sass.ts
deleted file mode 100644
index 40fdde08445..00000000000
--- a/polaris-codemods/src/utilities/sass.ts
+++ /dev/null
@@ -1,603 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import type {
-  Root,
-  Result,
-  Plugin,
-  Container,
-  Declaration,
-  Node as PostCSSNode,
-  Rule as PostCSSRule,
-  Comment as PostCSSComment,
-  AtRule,
-} from 'postcss';
-import postcss from 'postcss';
-import type {
-  Node,
-  ParsedValue,
-  FunctionNode,
-  Dimension,
-} from 'postcss-value-parser';
-import valueParser from 'postcss-value-parser';
-import {toPx, getCustomPropertyNames, tokens} from '@shopify/polaris-tokens';
-
-import {POLARIS_MIGRATOR_COMMENT} from './constants';
-
-const defaultNamespace = '';
-
-const polarisCustomPropertyRegEx = new RegExp(
-  getCustomPropertyNames(tokens).join('|'),
-);
-
-function getNamespace(options?: NamespaceOptions) {
-  return options?.namespace || defaultNamespace;
-}
-
-export function getNamespacePattern(options?: NamespaceOptions) {
-  const namespace = getNamespace(options);
-
-  return namespace ? String.raw`${namespace}\.` : defaultNamespace;
-}
-
-export interface NamespaceOptions {
-  namespace?: string;
-}
-
-export function namespace(name: string, options?: NamespaceOptions) {
-  const namespace = getNamespace(options);
-  return namespace ? `${namespace}.${name}` : name;
-}
-
-/**
- * Checks if a `valueParser` node is a [Sass numeric operator](https://sass-lang.com/documentation/operators/numeric)
- */
-export function isNumericOperator(node: Node): boolean {
-  return (
-    node.value === '+' ||
-    node.value === '-' ||
-    node.value === '*' ||
-    node.value === '/' ||
-    node.value === '%'
-  );
-}
-
-/**
- * Checks if any descendant `valueParser` node is a numeric operator
- */
-export function hasNumericOperator(
-  parsedValue: ParsedValue,
-  deep = true,
-): boolean {
-  let containsNumericOperator = false;
-
-  parsedValue.walk((node) => {
-    if (isNumericOperator(node)) {
-      containsNumericOperator = true;
-      return StopWalkingFunctionNodes;
-    }
-
-    if (!deep) {
-      return StopWalkingFunctionNodes;
-    }
-  });
-
-  return containsNumericOperator;
-}
-
-/**
- * Checks if a `valueParser` node is a [SASS variable](https://sass-lang.com/documentation/variables)
- */
-export function isSassVariable(node: Node): boolean {
-  return node.type === 'word' && node.value.startsWith('$');
-}
-
-/**
- * Checks if any descendant `valueParser` node is a SASS variable
- */
-export function hasSassVariable(
-  parsedValue: ParsedValue,
-  deep = true,
-): boolean {
-  let containsSassVariable = false;
-
-  parsedValue.walk((node) => {
-    if (isSassVariable(node)) {
-      containsSassVariable = true;
-      return StopWalkingFunctionNodes;
-    }
-
-    if (!deep) {
-      return StopWalkingFunctionNodes;
-    }
-  });
-
-  return containsSassVariable;
-}
-
-/**
- * Checks if a `valueParser` node is a given Sass function
- *
- * @example
- * const namespacedRem = namespace('rem', options);
- *
- * if (isSassFunction(namespacedRem, node)) node // FunctionNode
- */
-export function isSassFunction(name: string, node: Node): node is FunctionNode {
-  return node.type === 'function' && node.value === name;
-}
-
-/**
- * Checks if any descendant `valueParser` node is a given Sass function
- *
- * @example
- * const namespacedRem = namespace('rem', options);
- *
- * if (!hasSassFunction(namespacedRem, parsedValue)) return;
- */
-export function hasSassFunction(
-  name: string,
-  parsedValue: ParsedValue,
-  deep = true,
-): boolean {
-  let containsSassFunction = false;
-
-  parsedValue.walk((node) => {
-    if (isSassFunction(name, node)) {
-      containsSassFunction = true;
-      return StopWalkingFunctionNodes;
-    }
-
-    if (!deep) {
-      return StopWalkingFunctionNodes;
-    }
-  });
-
-  return containsSassFunction;
-}
-
-/**
- * Check whether a string has Sass interpolation
- */
-export function hasSassInterpolation(string: string) {
-  return /#\{.+?\}/.test(string);
-}
-
-/**
- * Check whether a string has negative Sass interpolation
- */
-export function hasNegativeSassInterpolation(string: string) {
-  return /-#\{.+?\}/.test(string);
-}
-
-/**
- * Replace negative Sass interpolations with a multiplication operator and a negative number
- *
- * @example
- * // Before
- * -#{spacing()};
- *
- * // After
- * -1 * ${spacing()};
- */
-export function replaceNegativeSassInterpolation(parsedValue: ParsedValue) {
-  let newNodes: Node[] = [];
-  parsedValue.walk((node, index, nodes) => {
-    const containsInterpolation = /-#\{.+?/.test(node.value);
-    if (!containsInterpolation) return;
-
-    node.value = node.value.replace('-#{', '#{');
-
-    const left = index > 0 ? nodes.slice(0, index) : [];
-    const right = nodes.length - 1 > index ? nodes.slice(index + 1) : [];
-
-    newNodes = [
-      ...left,
-      {type: 'word', value: '-1'},
-      {type: 'space', value: ' '},
-      {type: 'word', value: '*'},
-      {type: 'space', value: ' '},
-      node,
-      ...right,
-    ] as Node[];
-  });
-  parsedValue.nodes = newNodes;
-}
-
-/**
- * Remove the Sass interpolation from parsedValue
- */
-export function removeSassInterpolation(
-  namespace: string,
-  parsedValue: ParsedValue,
-) {
-  parsedValue.walk((node, index, nodes) => {
-    const regexp = new RegExp(`#{${namespace}`);
-    const containsInterpolation = regexp.test(node.value);
-    if (containsInterpolation) {
-      node.value = node.value.replace(/#\{/, '');
-      nodes[index + 1].value = nodes[index + 1].value.replace(/}/, '');
-    }
-  });
-
-  parsedValue.nodes = parsedValue.nodes.filter(
-    (node) => !(node.type === 'word' && node.value === ''),
-  );
-}
-
-export function getFunctionArgs(node: FunctionNode): string[] {
-  const args: string[] = [];
-
-  let arg = '';
-
-  node.nodes.forEach((node) => {
-    if (node.type === 'div' && node.value === ',') {
-      args.push(arg);
-      arg = '';
-      return;
-    }
-
-    arg += valueParser.stringify(node);
-  });
-
-  if (arg) {
-    args.push(arg);
-  }
-
-  return args;
-}
-
-/**
- * Removes surrounding quotes from a string
- * @example
- * const string = '"hello"';
- * stripQuotes(string); // hello
- */
-export function stripQuotes(string: string) {
-  return string.replace(/^['"]|['"]$/g, '');
-}
-
-/**
- * All transformable dimension units. These values are used to determine
- * if a decl.value can be converted to pixels and mapped to a Polaris custom property.
- */
-export const transformableLengthUnits = ['px', 'rem'];
-
-export function isUnitlessZero(dimension: false | Dimension) {
-  return dimension && dimension.unit === '' && dimension.number === '0';
-}
-
-export function isTransformableLength(
-  dimension: false | Dimension,
-): dimension is Dimension {
-  if (!dimension) return false;
-
-  return transformableLengthUnits.includes(dimension.unit);
-}
-
-export function hasTransformableLength(parsedValue: ParsedValue): boolean {
-  let transformableLength = false;
-
-  parsedValue.walk((node) => {
-    if (
-      node.type === 'word' &&
-      isTransformableLength(valueParser.unit(node.value))
-    ) {
-      transformableLength = true;
-    }
-  });
-
-  return transformableLength;
-}
-
-export function toTransformablePx(value: string) {
-  const dimension = valueParser.unit(value);
-
-  if (!isTransformableLength(dimension)) return;
-
-  return toPx(`${dimension.number}${dimension.unit}`);
-}
-
-/**
- * Exit early and stop traversing descendant nodes:
- * https://www.npmjs.com/package/postcss-value-parser:~:text=Returning%20false%20in%20the%20callback%20will%20prevent%20traversal%20of%20descendent%20nodes
- */
-export const StopWalkingFunctionNodes = false;
-
-/**
- * All transformable duration units. These values are used to determine
- * if a decl.value can be mapped to a Polaris custom property.
- *
- * Note: <time> is a dimension with 's' or 'ms' as the unit:
- * https://w3c.github.io/csswg-drafts/css-values-3/#time-value
- */
-export const transformableDurationUnits = ['s', 'ms'];
-
-export function isTransformableDuration(
-  dimension: false | Dimension,
-): dimension is Dimension {
-  if (!dimension) return false;
-
-  // Zero is the only unitless dimension our duration transforms support
-  if (isUnitlessZero(dimension)) return true;
-
-  return transformableDurationUnits.includes(dimension.unit);
-}
-
-export function isPolarisVar(node: Node): boolean {
-  return (
-    isSassFunction('var', node) &&
-    polarisCustomPropertyRegEx.test(node.nodes?.[0]?.value ?? '')
-  );
-}
-
-export function createInlineComment(text: string) {
-  const comment = postcss.comment({text: text.replace(/\s+/gm, ' ').trim()});
-
-  comment.raws.left = ' ';
-  comment.raws.inline = true;
-
-  return comment;
-}
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-interface Report {
-  node: PostCSSNode;
-  severity: 'warning' | 'error';
-  message: string;
-}
-
-interface PluginContext {
-  fix: boolean;
-}
-
-// Extracted from stylelint
-type StylelintRuleBase<P = any, S = any> = (
-  primaryOption: P,
-  secondaryOptions: {[key: string]: S},
-  context: PluginContext,
-) => (root: Root, result: Result) => void;
-
-interface StylelintRuleMeta {
-  url: string;
-  deprecated?: boolean;
-  fixable?: boolean;
-}
-
-type StylelintRule<P = any, S = any> = StylelintRuleBase<P, S> & {
-  ruleName: string;
-  meta?: StylelintRuleMeta;
-};
-// End: Extracted from stylelint
-
-type Walker<N extends PostCSSNode> = (node: N) => false | void;
-
-export type PolarisMigrator = (
-  primaryOption: true,
-  secondaryOptions: {
-    options: {[key: string]: any};
-    methods: {
-      report: (report: Report) => void;
-      each: <T extends Container>(root: T, walker: Walker<PostCSSNode>) => void;
-      walk: <T extends Container>(root: T, walker: Walker<PostCSSNode>) => void;
-      walkComments: <T extends Container>(
-        root: T,
-        walker: Walker<PostCSSComment>,
-      ) => void;
-      walkAtRules: <T extends Container>(
-        root: T,
-        atRuleWalker: Walker<AtRule>,
-      ) => void;
-      walkDecls: <T extends Container>(
-        root: T,
-        declWalker: Walker<Declaration>,
-      ) => void;
-      walkRules: <T extends Container>(
-        root: T,
-        ruleWalker: Walker<PostCSSRule>,
-      ) => void;
-    };
-  },
-  context: PluginContext,
-) => (root: Root, result: Result) => void;
-
-// Expose a stylelint-like API for creating sass migrators so we can easily
-// migrate to that tool in the future.
-function convertStylelintRuleToPostcssProcessor(ruleFn: StylelintRule) {
-  return (fileInfo: FileInfo, _: API, options: Options) => {
-    const plugin: Plugin = {
-      postcssPlugin: ruleFn.ruleName,
-      // PostCSS will rewalk the AST every time a declaration/rule/etc is
-      // mutated by a plugin. This can be useful in some cases, but in ours we
-      // only want single-pass behaviour.
-      //
-      // This can be avoided in 2 ways:
-      //
-      // 1) Flagging each declaration as we pass it, then skipping it on
-      //    subsequent passes.
-      // 2) Using postcss's Once() plugin callback.
-      //
-      // stylelint also uses `Once()`, so we're able to remove this once we've
-      // migrated:
-      // https://github.com/stylelint/stylelint/blob/cb425cb/lib/postcssPlugin.js#L22
-      Once(root, {result}) {
-        // NOTE: For fullest compatibility with stylelint, we initialise the
-        // rule here _inside_ the postcss Once function just like stylelint
-        // does. This means multiple passes can be performed without rules
-        // accidentally retaining scoped variables, etc.
-        ruleFn(
-          // Normally, this comes from stylelint config, but for this shim we
-          // just hard-code it, and instead rely on the "seconary" options
-          // object for passing through the jscodeshift options.
-          true,
-          options,
-          // Also normally comes from styelint via the cli `--fix` flag.
-          {fix: true},
-        )(root, result);
-      },
-    };
-
-    return postcss(plugin).process(fileInfo.source, {
-      syntax: require('postcss-scss'),
-    }).css;
-  };
-}
-
-export function createSassMigrator(name: string, ruleFn: PolarisMigrator) {
-  const wrappedRule: StylelintRule = ((
-    primary,
-    secondaryOptions: PluginOptions,
-    context,
-  ) => {
-    const reports = new Map<PostCSSNode, Report[]>();
-
-    const addDedupedReport = (newReport: Report) => {
-      if (!reports.has(newReport.node)) {
-        reports.set(newReport.node, []);
-      }
-
-      const reportsForNode = reports.get(newReport.node)!;
-
-      if (
-        reportsForNode.findIndex(
-          (existingReport) =>
-            existingReport.severity === newReport.severity &&
-            existingReport.message === newReport.message,
-        ) === -1
-      ) {
-        reportsForNode.push(newReport);
-      }
-    };
-
-    const flushReportsAsComments = () => {
-      // @ts-expect-error No idea why TS is complaining here
-      for (const [node, reportsForNode] of reports) {
-        node.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-
-        for (const report of reportsForNode) {
-          node.before(
-            createInlineComment(`${report.severity}: ${report.message}`),
-          );
-        }
-      }
-      reports.clear();
-    };
-
-    function createWalker<T extends PostCSSNode>(args: {
-      walker: (node: T) => false | void;
-      serialiseSuggestion: (node: T) => string;
-    }): (node: T) => false | void {
-      const {walker, serialiseSuggestion} = args;
-
-      return (node: T) => {
-        let oldNode: T;
-        if (context.fix) {
-          oldNode = node.clone();
-        }
-
-        const result = walker(node);
-
-        const isPartialFix =
-          context.fix &&
-          reports.has(node) &&
-          node.toString() !== oldNode!.toString();
-
-        flushReportsAsComments();
-
-        // Our migrations have an opinion on partial fixes (when multiple
-        // issues are found in a single node, and some but not all can be
-        // fixed): We dump out the partial fix result as a comment
-        // immediately above the node.
-        if (isPartialFix) {
-          node.before(createInlineComment(serialiseSuggestion(node)));
-          // Undo changes
-          node.replaceWith(oldNode!);
-        }
-
-        return result;
-      };
-    }
-
-    return ruleFn(
-      primary,
-      // We're kind of abusing stylelint's types here since the
-      // SecondaryOptions param can take an arbitrary object. But we need a
-      // way to pass the methods into the rule function somehow, and this way
-      // means less Typescript hackery.
-      {
-        options: secondaryOptions,
-        methods: {
-          report: addDedupedReport,
-          each(root, walker) {
-            root.each(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => node.toString(),
-              }),
-            );
-          },
-          walk(root, walker) {
-            root.walk(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => node.toString(),
-              }),
-            );
-          },
-          walkAtRules(root, walker) {
-            root.walkAtRules(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => `@${node.name} ${node.params}`,
-              }),
-            );
-          },
-          walkComments(root, walker) {
-            root.walkComments(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => node.text,
-              }),
-            );
-          },
-          walkDecls(root, walker) {
-            root.walkDecls(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => `${node.prop}: ${node.value};`,
-              }),
-            );
-          },
-          walkRules(root, walker) {
-            root.walkRules(
-              createWalker({
-                walker,
-                serialiseSuggestion: (node) => node.selector,
-              }),
-            );
-          },
-        },
-      },
-      context,
-    );
-  }) as StylelintRule;
-
-  wrappedRule.ruleName = name;
-  wrappedRule.meta = {
-    // TODO: link directly to the specific rule
-    url: 'https://www.npmjs.com/package/@shopify/stylelint-polaris',
-    fixable: true,
-  };
-
-  return convertStylelintRuleToPostcssProcessor(wrappedRule);
-}
-
-export function setNodeValue(node: Node, value: string): void {
-  const {sourceIndex} = node;
-  const parsedValue = valueParser(value).nodes[0];
-  Object.assign(node, parsedValue);
-  // The node we're replacing might be mid-way through a higher-level value
-  // string. Eg; 'border: 1px solid', the 'solid' node is 5 characters into the
-  // higher-level value, so we need to correct the index here.
-  node.sourceIndex += sourceIndex;
-  node.sourceEndIndex += sourceIndex;
-}
diff --git a/polaris-codemods/src/utilities/types.ts b/polaris-codemods/src/utilities/types.ts
deleted file mode 100644
index 0130ee06ce5..00000000000
--- a/polaris-codemods/src/utilities/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABDAzgaQKYE8DywA8AKohgB5QZgAmKicARgFYbQB8AFA4wFyKEA0iANbYA-LwCGYLAEpeIrMloK4wPogDeAKESIAThigg9SHExZQAdAAc9cKPazWMlgBYSUOAO5gACnec9KCxLCAkAG3DOJkEFRA9EfzhA4MxZLQBfLS0IBBQoOiZEAF5NRGA4OF4AcnoJPWrBACZeKD0QDEQM+NpcsHycvIKFXnAhMDgfEsRq6uyuAG0FAF1smDV2VDS8aMZY7BkZTR1hbBOAenPEAD1RbN0+-MQANwiO6cWVi6vdG7usoA
-export function isKeyOf<T extends object>(
-  obj: T,
-  key?: unknown,
-): key is keyof T {
-  return Object.prototype.hasOwnProperty.call(obj, key as PropertyKey);
-}
-
-export interface TransformInfo {
-  extensions: string[];
-  options: {
-    [key: string]: TransformInfoOption;
-  };
-}
-
-export type TransformInfoExtensions = TransformInfo['extensions'];
-export type TransformInfoOptions = TransformInfo['options'];
-
-export interface TransformInfoOption {
-  name: string;
-  type: 'string' | 'boolean';
-  description: string;
-  required?: boolean;
-}
diff --git a/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/transform.ts.hbs b/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/transform.ts.hbs
deleted file mode 100644
index 432911bc043..00000000000
--- a/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/transform.ts.hbs	
+++ /dev/null
@@ -1,24 +0,0 @@
-import type {API, FileInfo} from 'jscodeshift';
-
-import {typescript} from '../../utilities/constants';
-
-export const extensions = typescript.extensions;
-export const options = {};
-
-export default function transformer(
-  fileInfo: FileInfo,
-  {jscodeshift: j}: API,
-  _: Options,
-) {
-  const source = j(fileInfo.source);
-
-  source.findJSXElements('div').forEach((element) => {
-    element.replace(
-      j.jsxElement(element.node.openingElement, element.node.closingElement, [
-        j.stringLiteral('world'),
-      ]),
-    );
-  });
-
-  return source.toSource();
-}
diff --git a/polaris-codemods/tsconfig.json b/polaris-codemods/tsconfig.json
deleted file mode 100644
index f5231edec29..00000000000
--- a/polaris-codemods/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "extends": "@shopify/typescript-configs/node-base",
-  "compilerOptions": {
-    "module": "commonjs",
-    "declaration": false,
-    "outDir": "dist",
-    "rootDir": "src",
-    "jsx": "react",
-    "types": ["node", "jest"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/tests/**", "**/*.test.ts"]
-}
diff --git a/polaris-codemods/codeshift.config.js b/polaris-migrator/codeshift.config.js
similarity index 52%
rename from polaris-codemods/codeshift.config.js
rename to polaris-migrator/codeshift.config.js
index 54208630050..b37f0a2644d 100644
--- a/polaris-codemods/codeshift.config.js
+++ b/polaris-migrator/codeshift.config.js
@@ -1,27 +1,34 @@
-/* eslint-disable prettier/prettier */
-
 function resolve(transform) {
-  return require.resolve(`./dist/codemods/${transform}/transform`);
+  return require.resolve(`./dist/cjs/migrations/${transform}/transform`);
 }
 
 module.exports = {
-  transforms: {
-    '9.0.0': resolve('9.0.0'),
-    '10.0.0': resolve('10.0.0'),
-    '11.0.0': resolve('11.0.0'),
-  },
   presets: {
     'react-rename-component': resolve('react-rename-component'),
     'react-rename-component-prop': resolve('react-rename-component-prop'),
     'scss-remove-unused-at-use': resolve('scss-remove-unused-at-use'),
-    'styles-insert-stylelint-disable': resolve('styles-insert-stylelint-disable'),
+    'styles-insert-stylelint-disable': resolve(
+      'styles-insert-stylelint-disable',
+    ),
     'styles-replace-custom-property': resolve('styles-replace-custom-property'),
-    'v11-react-update-page-breadcrumbs': resolve('v11-react-update-page-breadcrumbs'),
-    'v11-styles-replace-custom-property-border': resolve('v11-styles-replace-custom-property-border'),
-    'v11-styles-replace-custom-property-depth': resolve('v11-styles-replace-custom-property-depth'),
-    'v11-styles-replace-custom-property-legacy': resolve('v11-styles-replace-custom-property-legacy'),
-    'v11-styles-replace-custom-property-z-index': resolve('v11-styles-replace-custom-property-z-index'),
-    'v10-react-replace-text-components': resolve('v10-react-replace-text-components'),
+    'v11-react-update-page-breadcrumbs': resolve(
+      'v11-react-update-page-breadcrumbs',
+    ),
+    'v11-styles-replace-custom-property-border': resolve(
+      'v11-styles-replace-custom-property-border',
+    ),
+    'v11-styles-replace-custom-property-depth': resolve(
+      'v11-styles-replace-custom-property-depth',
+    ),
+    'v11-styles-replace-custom-property-legacy': resolve(
+      'v11-styles-replace-custom-property-legacy',
+    ),
+    'v11-styles-replace-custom-property-z-index': resolve(
+      'v11-styles-replace-custom-property-z-index',
+    ),
+    'v10-react-replace-text-components': resolve(
+      'v10-react-replace-text-components',
+    ),
     'v9-scss-replace-border': resolve('v9-scss-replace-border'),
     'v9-scss-replace-border-radius': resolve('v9-scss-replace-border-radius'),
     'v9-scss-replace-border-width': resolve('v9-scss-replace-border-width'),
@@ -35,11 +42,21 @@ module.exports = {
     'v9-scss-replace-spacing': resolve('v9-scss-replace-spacing'),
     'v9-scss-replace-text-emphasis': resolve('v9-scss-replace-text-emphasis'),
     'v9-scss-replace-z-index': resolve('v9-scss-replace-z-index'),
-    'v9-styles-replace-custom-property-border': resolve('v9-styles-replace-custom-property-border'),
-    'v9-styles-replace-custom-property-depth': resolve('v9-styles-replace-custom-property-depth'),
-    'v9-styles-replace-custom-property-font': resolve('v9-styles-replace-custom-property-font'),
-    'v9-styles-replace-custom-property-legacy': resolve('v9-styles-replace-custom-property-legacy'),
-    'v9-styles-replace-custom-property-motion': resolve('v9-styles-replace-custom-property-motion'),
+    'v9-styles-replace-custom-property-border': resolve(
+      'v9-styles-replace-custom-property-border',
+    ),
+    'v9-styles-replace-custom-property-depth': resolve(
+      'v9-styles-replace-custom-property-depth',
+    ),
+    'v9-styles-replace-custom-property-font': resolve(
+      'v9-styles-replace-custom-property-font',
+    ),
+    'v9-styles-replace-custom-property-legacy': resolve(
+      'v9-styles-replace-custom-property-legacy',
+    ),
+    'v9-styles-replace-custom-property-motion': resolve(
+      'v9-styles-replace-custom-property-motion',
+    ),
     'v9-styles-tokenize-font': resolve('v9-styles-tokenize-font'),
     'v9-styles-tokenize-motion': resolve('v9-styles-tokenize-motion'),
     'v9-styles-tokenize-shape': resolve('v9-styles-tokenize-shape'),
diff --git a/polaris-migrator/plopfile.mjs b/polaris-migrator/plopfile.mjs
index d8fcc1d4a80..aaae6f3c8aa 100644
--- a/polaris-migrator/plopfile.mjs
+++ b/polaris-migrator/plopfile.mjs
@@ -10,10 +10,10 @@ const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 // eslint-disable-next-line import/no-default-export
 export default async function run(plop) {
   plop.setGenerator(
-    'scss-migration',
+    'scss',
     await plopDir({
       plop,
-      templateDir: path.join(__dirname, './templates/scss-migration'),
+      templateDir: path.join(__dirname, './templates/scss'),
       outputDir: path.join(__dirname, './src/migrations'),
       prompts: [
         {
@@ -27,10 +27,10 @@ export default async function run(plop) {
   );
 
   plop.setGenerator(
-    'typescript-migration',
+    'typescript',
     await plopDir({
       plop,
-      templateDir: path.join(__dirname, './templates/typescript-migration'),
+      templateDir: path.join(__dirname, './templates/typescript'),
       outputDir: path.join(__dirname, './src/migrations'),
       prompts: [
         {
diff --git a/polaris-migrator/src/cli.ts b/polaris-migrator/src/cli.ts
index 3c3d9a0b22c..fb113eb1627 100644
--- a/polaris-migrator/src/cli.ts
+++ b/polaris-migrator/src/cli.ts
@@ -1,8 +1,66 @@
+import type {Exact} from 'type-fest';
 import meow from 'meow';
 import type {AnyFlag} from 'meow';
 
 import {migrate} from './migrate';
-import {cliConfig} from './constants';
+import type {Alias} from './utilities/types';
+import type {MigrateOptions} from './migrate';
+
+interface Arg {
+  name: string;
+  description: string;
+}
+
+interface Flag {
+  type: 'boolean' | 'string' | 'number';
+  alias?: Alias;
+  description: string;
+}
+
+type Flags = {[O in keyof MigrateOptions]: Flag};
+
+interface Config {
+  description: string;
+  args: Arg[];
+  flags: Flags;
+}
+
+const createCLIConfig = <T extends Exact<Config, T>>(config: T): T => config;
+
+export const cliConfig = createCLIConfig({
+  description: 'Code migrations for updating Polaris apps.',
+  args: [
+    {
+      name: 'migration',
+      description:
+        'One of the choices from https://polaris.shopify.com/docs/advanced-features/migrations',
+    },
+    {
+      name: 'path',
+      description:
+        'Files or directory to transform. Can be a glob like src/**.scss',
+    },
+  ],
+  flags: {
+    dry: {
+      alias: 'd',
+      description: 'Dry run (no changes are made to files)',
+      type: 'boolean',
+    },
+    print: {
+      alias: 'p',
+      description: 'Print transformed files to your terminal',
+      type: 'boolean',
+    },
+    force: {
+      alias: 'f',
+      description: 'Bypass Git safety checks and forcibly run migrations',
+      type: 'boolean',
+    },
+  },
+});
+
+export type CLIConfig = typeof cliConfig;
 
 const help = `
 Usage
diff --git a/polaris-migrator/src/constants.ts b/polaris-migrator/src/constants.ts
deleted file mode 100644
index 8c38f0f8d48..00000000000
--- a/polaris-migrator/src/constants.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type {Exact} from 'type-fest';
-
-import type {AlphabetLowercase, AlphabetUppercase} from './types';
-import type {MigrateOptions} from './migrate';
-
-interface Arg {
-  name: string;
-  description: string;
-}
-
-interface Flag {
-  type: 'boolean' | 'string' | 'number';
-  alias?: AlphabetLowercase | AlphabetUppercase;
-  description: string;
-}
-
-type Flags = {[O in keyof MigrateOptions]: Flag};
-
-interface Config {
-  description: string;
-  args: Arg[];
-  flags: Flags;
-}
-
-const createCLIConfig = <T extends Exact<Config, T>>(config: T): T => config;
-
-export const cliConfig = createCLIConfig({
-  description: 'Code migrations for updating Polaris apps.',
-  args: [
-    {
-      name: 'migration',
-      description:
-        'One of the choices from https://polaris.shopify.com/docs/advanced-features/migrations',
-    },
-    {
-      name: 'path',
-      description:
-        'Files or directory to transform. Can be a glob like src/**.scss',
-    },
-  ],
-  flags: {
-    dry: {
-      alias: 'd',
-      description: 'Dry run (no changes are made to files)',
-      type: 'boolean',
-    },
-    print: {
-      alias: 'p',
-      description: 'Print transformed files to your terminal',
-      type: 'boolean',
-    },
-    force: {
-      alias: 'f',
-      description: 'Bypass Git safety checks and forcibly run migrations',
-      type: 'boolean',
-    },
-  },
-});
-
-export type CLIConfig = typeof cliConfig;
-
-export const POLARIS_MIGRATOR_COMMENT =
-  'polaris-migrator: Unable to migrate the following expression. Please upgrade manually.';
diff --git a/polaris-migrator/src/index.ts b/polaris-migrator/src/index.ts
index 703e0faa91b..62f5b2cc9db 100644
--- a/polaris-migrator/src/index.ts
+++ b/polaris-migrator/src/index.ts
@@ -1,7 +1,5 @@
-export {run} from './cli';
-
-export {cliConfig} from './constants';
-export type {CLIConfig} from './constants';
+export {run, cliConfig} from './cli';
+export type {CLIConfig} from './cli';
 
 export {migrate} from './migrate';
 export type {MigrateOptions} from './migrate';
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.test.ts
deleted file mode 100644
index 82e29285600..00000000000
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'react-rename-component-prop';
-const fixtures = ['react-rename-component-prop'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    options: {
-      componentName: 'MyComponent',
-      from: 'prop',
-      to: 'newProp',
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/react-rename-component-prop/tests/transform.test.ts
rename to polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/react-rename-component-prop.ts b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
similarity index 91%
rename from polaris-migrator/src/migrations/react-rename-component-prop/react-rename-component-prop.ts
rename to polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
index 1be13fddd22..88ee9dbf3e4 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/react-rename-component-prop.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
@@ -2,7 +2,7 @@ import type {API, FileInfo, Options} from 'jscodeshift';
 
 import {renameProps} from '../../utilities/jsx';
 
-export default function reactRenameComponentProp(
+export default function transformer(
   file: FileInfo,
   {jscodeshift: j}: API,
   options: Options,
diff --git a/polaris-migrator/src/migrations/react-rename-component/tests/react-rename-component.test.ts b/polaris-migrator/src/migrations/react-rename-component/tests/react-rename-component.test.ts
deleted file mode 100644
index 3371bd7b625..00000000000
--- a/polaris-migrator/src/migrations/react-rename-component/tests/react-rename-component.test.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'react-rename-component';
-const fixtures = [
-  {
-    name: 'react-rename-component',
-    options: {
-      relative: false,
-      renameFrom: 'Card',
-      renameTo: 'LegacyCard',
-      renamePropsFrom: 'CardProps',
-      renamePropsTo: 'LegacyCardProps',
-    },
-  },
-  {
-    name: 'rename-prop-types',
-    options: {
-      relative: false,
-      renameFrom: 'Card',
-      renameTo: 'LegacyCard',
-      renamePropsFrom: 'CardProps',
-      renamePropsTo: 'LegacyCardProps',
-    },
-  },
-  {
-    name: 'renamed-import',
-    options: {
-      relative: false,
-      renameFrom: 'Card',
-      renameTo: 'LegacyCard',
-      renamePropsFrom: 'CardProps',
-      renamePropsTo: 'LegacyCardProps',
-    },
-  },
-  {
-    name: 'renamed-available-jsx',
-    options: {
-      relative: false,
-      renameFrom: 'Card',
-      renameTo: 'LegacyCard',
-      renamePropsFrom: 'CardProps',
-      renamePropsTo: 'LegacyCardProps',
-    },
-  },
-  {
-    name: 'renamed-available-identifier',
-    options: {
-      relative: false,
-      renameFrom: 'Card',
-      renameTo: 'LegacyCard',
-      renamePropsFrom: 'CardProps',
-      renamePropsTo: 'LegacyCardProps',
-    },
-  },
-  {
-    name: 'react-rename-stack-component',
-    options: {
-      relative: false,
-      renameFrom: 'Stack',
-      renameTo: 'LegacyStack',
-      renamePropsFrom: 'StackProps',
-      renamePropsTo: 'LegacyStackProps',
-    },
-  },
-];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture: fixture.name,
-    migration,
-    options: fixture.options,
-  });
-}
diff --git a/polaris-codemods/src/codemods/react-rename-component/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/react-rename-component/tests/transform.test.ts
rename to polaris-migrator/src/migrations/react-rename-component/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/react-rename-component/react-rename-component.ts b/polaris-migrator/src/migrations/react-rename-component/transform.ts
similarity index 98%
rename from polaris-migrator/src/migrations/react-rename-component/react-rename-component.ts
rename to polaris-migrator/src/migrations/react-rename-component/transform.ts
index ccec9fe3095..271510f0bea 100644
--- a/polaris-migrator/src/migrations/react-rename-component/react-rename-component.ts
+++ b/polaris-migrator/src/migrations/react-rename-component/transform.ts
@@ -1,6 +1,6 @@
 import type {API, FileInfo, Options} from 'jscodeshift';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {
   getImportSpecifierName,
   hasImportDeclaration,
@@ -26,7 +26,7 @@ export interface MigrationOptions extends Options {
   renamePropsTo: string;
 }
 
-export default function reactRenameComponent(
+export default function transformer(
   fileInfo: FileInfo,
   {jscodeshift: j}: API,
   options: MigrationOptions,
diff --git a/polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.test.ts b/polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.test.ts
deleted file mode 100644
index 6299b1a61b4..00000000000
--- a/polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/scss-remove-unused-at-use.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'scss-remove-unused-at-use';
-const fixtures = [
-  'scss-remove-unused-at-use',
-  'with-used-at-use',
-  'with-at-use-namespace',
-  'with-used-at-use-namespace',
-  'with-options',
-  'with-configuration',
-];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      url: fixture.includes('options')
-        ? 'media-queries'
-        : 'global-styles/legacy-polaris-v8',
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/transform.test.ts b/polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/scss-remove-unused-at-use/tests/transform.test.ts
rename to polaris-migrator/src/migrations/scss-remove-unused-at-use/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/scss-remove-unused-at-use/scss-remove-unused-at-use.ts b/polaris-migrator/src/migrations/scss-remove-unused-at-use/transform.ts
similarity index 87%
rename from polaris-migrator/src/migrations/scss-remove-unused-at-use/scss-remove-unused-at-use.ts
rename to polaris-migrator/src/migrations/scss-remove-unused-at-use/transform.ts
index 8bdbb645ff8..e6e3992388d 100644
--- a/polaris-migrator/src/migrations/scss-remove-unused-at-use/scss-remove-unused-at-use.ts
+++ b/polaris-migrator/src/migrations/scss-remove-unused-at-use/transform.ts
@@ -3,8 +3,8 @@ import postcss from 'postcss';
 import type {Plugin} from 'postcss';
 
 import {createInlineComment} from '../../utilities/sass';
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
-import {matchesStringOrRegExp} from '../../utilities/matchesStringOrRegExp';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import {matchesStringOrRegExp} from '../../utilities/matches';
 
 interface PluginOptions extends Options {
   url?: string;
@@ -51,11 +51,7 @@ const plugin = (options: PluginOptions = {}): Plugin => {
   };
 };
 
-export default function scssRemoveUnusedImport(
-  file: FileInfo,
-  _: API,
-  options: Options,
-) {
+export default function transformer(file: FileInfo, _: API, options: Options) {
   return postcss(plugin(options)).process(file.source, {
     syntax: require('postcss-scss'),
   }).css;
diff --git a/polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.test.ts b/polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.test.ts
deleted file mode 100644
index c4c20ed7054..00000000000
--- a/polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/styles-insert-stylelint-disable.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import path from 'path';
-
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'styles-insert-stylelint-disable';
-const fixtures = ['styles-insert-stylelint-disable'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      config: path.join(__dirname, './test-config'),
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/transform.test.ts b/polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/styles-insert-stylelint-disable/tests/transform.test.ts
rename to polaris-migrator/src/migrations/styles-insert-stylelint-disable/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/styles-insert-stylelint-disable/styles-insert-stylelint-disable.ts b/polaris-migrator/src/migrations/styles-insert-stylelint-disable/transform.ts
similarity index 98%
rename from polaris-migrator/src/migrations/styles-insert-stylelint-disable/styles-insert-stylelint-disable.ts
rename to polaris-migrator/src/migrations/styles-insert-stylelint-disable/transform.ts
index 74dec755f9f..d797baf7482 100644
--- a/polaris-migrator/src/migrations/styles-insert-stylelint-disable/styles-insert-stylelint-disable.ts
+++ b/polaris-migrator/src/migrations/styles-insert-stylelint-disable/transform.ts
@@ -1,10 +1,10 @@
 import os from 'os';
 
 import type {API, FileInfo, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Node, Comment, Plugin, Root} from 'postcss';
-import stylelint from 'stylelint';
+import postcss from 'postcss';
 import type {StylelintPostcssResult} from 'stylelint';
+import stylelint from 'stylelint';
 
 const crossPlatformNewlineRegExp = /\r\n?|\n/;
 const polarisContextMsg = '-- generated by polaris-migrator DO NOT COPY';
@@ -48,7 +48,7 @@ const plugin = (): Plugin => {
   };
 };
 
-export default async function stylesInsertStylelintDisable(
+export default async function transformer(
   file: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-migrator/src/migrations/styles-replace-custom-property/styles-replace-custom-property.ts b/polaris-migrator/src/migrations/styles-replace-custom-property/styles-replace-custom-property.ts
deleted file mode 100644
index d03edec791d..00000000000
--- a/polaris-migrator/src/migrations/styles-replace-custom-property/styles-replace-custom-property.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import path from 'path';
-
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {isSassFunction} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-import {matchesStringOrRegExp} from '../../utilities/matchesStringOrRegExp';
-
-interface ReplacementMap {
-  [tokenName: string]: string;
-}
-
-interface ReplacementMaps {
-  [propertyName: string]: ReplacementMap;
-}
-
-interface PluginOptions extends Options {
-  decl?: string;
-  from?: string;
-  to?: string;
-  maps?: string;
-  replacementMaps?: ReplacementMaps;
-}
-
-export default function stylesReplaceCustomProperty(
-  file: FileInfo,
-  _: API,
-  options: PluginOptions,
-) {
-  return postcss(plugin(options)).process(file.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-function plugin(options: PluginOptions = {}): Plugin {
-  let replacementMaps: ReplacementMaps | undefined;
-
-  if (options.maps && (options.from || options.to || options.decl)) {
-    throw new Error('--maps is not permitted with --from or --to');
-  }
-
-  if (options.maps) {
-    const mapsPath = path.resolve(process.cwd(), options.maps);
-
-    replacementMaps = require(mapsPath)!.default;
-  } else if (options.from && options.to) {
-    replacementMaps = {
-      [options.decl || '/.+/']: {
-        [options.from]: options.to,
-      },
-    };
-  } else if (options.replacementMaps) {
-    replacementMaps = options.replacementMaps;
-  }
-
-  if (!replacementMaps) {
-    throw new Error('Unable to resolve the replacement maps');
-  }
-
-  const replacementMapsKeys = Object.keys(replacementMaps);
-
-  return {
-    postcssPlugin: 'styles-replace-custom-property',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed] || !replacementMaps) return;
-
-      const matchedDecl = matchesStringOrRegExp(decl.prop, replacementMapsKeys);
-
-      if (!matchedDecl) return;
-
-      const replacementMap = replacementMaps[matchedDecl.pattern.toString()];
-      const parsedValue = valueParser(decl.value);
-
-      parsedValue.walk((node) => {
-        if (!isSassFunction('var', node)) return;
-
-        for (const argNode of node.nodes) {
-          if (
-            argNode.type !== 'word' ||
-            !argNode.value.startsWith('--p-') ||
-            !isKeyOf(replacementMap, argNode.value)
-          ) {
-            continue;
-          }
-
-          const replacement = replacementMap[argNode.value];
-
-          if (replacement.startsWith('--')) {
-            argNode.value = replacement;
-            continue;
-          }
-
-          // @ts-expect-error - Reassign the type to word
-          node.type = 'word';
-          node.value = replacement;
-          break;
-        }
-      });
-
-      decl.value = parsedValue.toString();
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-}
diff --git a/polaris-migrator/src/migrations/styles-replace-custom-property/tests/styles-replace-custom-property.test.ts b/polaris-migrator/src/migrations/styles-replace-custom-property/tests/styles-replace-custom-property.test.ts
deleted file mode 100644
index 40bea27f527..00000000000
--- a/polaris-migrator/src/migrations/styles-replace-custom-property/tests/styles-replace-custom-property.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'styles-replace-custom-property';
-const fixtures = [
-  {
-    name: 'with-from-to-flags-basic',
-    options: {
-      decl: 'color',
-      from: '--p-text',
-      to: '--p-color-text',
-    },
-  },
-  {
-    name: 'with-from-to-flags-regexp',
-    options: {
-      decl: '/^animation/',
-      from: '--p-duration-200',
-      to: '--p-motion-duration-200',
-    },
-  },
-  {
-    name: 'with-maps-flag',
-    options: {
-      maps: 'src/migrations/styles-replace-custom-property/tests/replacement-maps',
-    },
-  },
-  {
-    name: 'with-replacementMaps-option',
-    options: {
-      replacementMaps: {color: {'--p-text': '--p-color-text'}},
-    },
-  },
-];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture: fixture.name,
-    migration,
-    extension: 'scss',
-    options: fixture.options,
-  });
-}
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/transform.test.ts b/polaris-migrator/src/migrations/styles-replace-custom-property/tests/transform.test.ts
similarity index 90%
rename from polaris-codemods/src/codemods/styles-replace-custom-property/tests/transform.test.ts
rename to polaris-migrator/src/migrations/styles-replace-custom-property/tests/transform.test.ts
index e94bf18b21a..bc5dd7cd71d 100644
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/styles-replace-custom-property/tests/transform.test.ts
@@ -21,7 +21,7 @@ const fixtures = [
   {
     name: 'with-maps-flag',
     options: {
-      maps: 'src/codemods/styles-replace-custom-property/tests/replacement-maps',
+      maps: 'src/migrations/styles-replace-custom-property/tests/replacement-maps',
     },
   },
   {
diff --git a/polaris-codemods/src/codemods/styles-replace-custom-property/transform.ts b/polaris-migrator/src/migrations/styles-replace-custom-property/transform.ts
similarity index 96%
rename from polaris-codemods/src/codemods/styles-replace-custom-property/transform.ts
rename to polaris-migrator/src/migrations/styles-replace-custom-property/transform.ts
index 3b1412e69e1..e707714a973 100644
--- a/polaris-codemods/src/codemods/styles-replace-custom-property/transform.ts
+++ b/polaris-migrator/src/migrations/styles-replace-custom-property/transform.ts
@@ -8,9 +8,6 @@ import valueParser from 'postcss-value-parser';
 import {isSassFunction} from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/types';
 import {matchesStringOrRegExp} from '../../utilities/matches';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 interface ReplacementMap {
   [tokenName: string]: string;
diff --git a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-display-text.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-display-text.ts
index 14c1ec138a0..c57e113ec3e 100644
--- a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-display-text.ts
+++ b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-display-text.ts
@@ -14,7 +14,7 @@ import {
   insertJSXComment,
   insertCommentBefore,
 } from '../../../utilities/jsx';
-import {isKeyOf} from '../../../utilities/type-guards';
+import {isKeyOf} from '../../../utilities/types';
 import {
   getImportSpecifierName,
   hasImportSpecifier,
@@ -25,8 +25,8 @@ import {
   removeImportDeclaration,
   removeImportSpecifier,
 } from '../../../utilities/imports';
-import type {MigrationOptions} from '../v10-react-replace-text-components';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../constants';
+import type {MigrationOptions} from '../transform';
+import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
 
 const displayTextElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']);
 
diff --git a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-other.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-other.ts
index cd4f9f1ad9f..4541412f7ef 100644
--- a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-other.ts
+++ b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-other.ts
@@ -24,9 +24,9 @@ import {
   removeImportDeclaration,
   removeImportSpecifier,
 } from '../../../utilities/imports';
-import type {MigrationOptions} from '../v10-react-replace-text-components';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../constants';
-import {isKeyOf} from '../../../utilities/type-guards';
+import type {MigrationOptions} from '../transform';
+import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
+import {isKeyOf} from '../../../utilities/types';
 
 export const components = {
   Heading: {
@@ -59,7 +59,7 @@ function replaceOtherComponent(
   j: JSCodeshift,
   source: Collection,
   componentName: keyof typeof components,
-  relative: boolean,
+  relative?: boolean,
 ) {
   const {variant, as, validElements, defaultElement} =
     components[componentName];
diff --git a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-text-style.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-text-style.ts
index 78527f019bc..d1836fd52f5 100644
--- a/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-text-style.ts
+++ b/polaris-migrator/src/migrations/v10-react-replace-text-components/steps/replace-text-style.ts
@@ -23,9 +23,9 @@ import {
   removeImportDeclaration,
   removeImportSpecifier,
 } from '../../../utilities/imports';
-import type {MigrationOptions} from '../v10-react-replace-text-components';
-import {POLARIS_MIGRATOR_COMMENT} from '../../../constants';
-import {isKeyOf} from '../../../utilities/type-guards';
+import type {MigrationOptions} from '../transform';
+import {POLARIS_MIGRATOR_COMMENT} from '../../../utilities/constants';
+import {isKeyOf} from '../../../utilities/types';
 
 const variationMap = {
   strong: {fontWeight: 'semibold'},
diff --git a/polaris-codemods/src/codemods/v10-react-replace-text-components/tests/transform.test.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v10-react-replace-text-components/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v10-react-replace-text-components/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v10-react-replace-text-components/tests/v10-react-replace-text-components.test.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/tests/v10-react-replace-text-components.test.ts
deleted file mode 100644
index 6dc294b681e..00000000000
--- a/polaris-migrator/src/migrations/v10-react-replace-text-components/tests/v10-react-replace-text-components.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v10-react-replace-text-components';
-const fixtures = [
-  'v10-react-replace-text-components',
-  'remove-imports-all',
-  'remove-imports-partial-identifier',
-  'remove-imports-partial-props-type',
-  'remove-imports-partial-props-invalid',
-  'with-other-component-and-other-component-props',
-  'with-text-style-props',
-  'with-relative',
-  'with-component-name',
-  'with-relative-display-text',
-  'with-relative-text-style-props',
-  'with-relative-other-component-and-other-component-props',
-];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    options: {
-      relative: fixture.includes('relative') ? true : undefined,
-      componentName: fixture.includes('component-name') ? 'Heading' : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v10-react-replace-text-components/v10-react-replace-text-components.ts b/polaris-migrator/src/migrations/v10-react-replace-text-components/transform.ts
similarity index 93%
rename from polaris-migrator/src/migrations/v10-react-replace-text-components/v10-react-replace-text-components.ts
rename to polaris-migrator/src/migrations/v10-react-replace-text-components/transform.ts
index 0959659c19a..13c3d21ef51 100644
--- a/polaris-migrator/src/migrations/v10-react-replace-text-components/v10-react-replace-text-components.ts
+++ b/polaris-migrator/src/migrations/v10-react-replace-text-components/transform.ts
@@ -3,16 +3,16 @@ import type {API, FileInfo, Options} from 'jscodeshift';
 import {hasImportDeclaration} from '../../utilities/imports';
 
 import {replaceDisplayText} from './steps/replace-display-text';
-import {replaceOther} from './steps/replace-other';
 import type {components} from './steps/replace-other';
+import {replaceOther} from './steps/replace-other';
 import {replaceTextStyle} from './steps/replace-text-style';
 
 export interface MigrationOptions extends Options {
-  relative: boolean;
+  relative?: boolean;
   componentName?: keyof typeof components | 'DisplayText' | 'TextStyle';
 }
 
-export default function v10ReactReplaceTextComponents(
+export default function transformer(
   file: FileInfo,
   {jscodeshift: j}: API,
   options: MigrationOptions,
diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.test.ts b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.test.ts
deleted file mode 100644
index faa5eeddb14..00000000000
--- a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/tests/v11-react-update-page-breadcrumbs.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-react-update-page-breadcrumbs';
-const fixtures = ['v11-react-update-page-breadcrumbs'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/transform.ts b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
similarity index 95%
rename from polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/transform.ts
rename to polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
index c85967b981d..2459bc2e379 100644
--- a/polaris-codemods/src/codemods/v11-react-update-page-breadcrumbs/transform.ts
+++ b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/transform.ts
@@ -1,14 +1,12 @@
 import type {API, FileInfo, Options} from 'jscodeshift';
 
-import {POLARIS_MIGRATOR_COMMENT, typescript} from '../../utilities/constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {
   insertCommentBefore,
   removeJSXAttributes,
   replaceJSXAttributes,
 } from '../../utilities/jsx';
 
-export const extensions = typescript.extensions;
-
 export default function transformer(
   fileInfo: FileInfo,
   {jscodeshift: j}: API,
diff --git a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/v11-react-update-page-breadcrumbs.ts b/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/v11-react-update-page-breadcrumbs.ts
deleted file mode 100644
index 54c1c15f2f4..00000000000
--- a/polaris-migrator/src/migrations/v11-react-update-page-breadcrumbs/v11-react-update-page-breadcrumbs.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type {API, FileInfo} from 'jscodeshift';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
-import {
-  insertCommentBefore,
-  removeJSXAttributes,
-  replaceJSXAttributes,
-} from '../../utilities/jsx';
-
-export default function v11reactUpdatePageBreadcrumbs(
-  fileInfo: FileInfo,
-  {jscodeshift: j}: API,
-) {
-  const source = j(fileInfo.source);
-
-  source
-    .findJSXElements('Page')
-    .find(j.JSXAttribute, {
-      name: {
-        type: 'JSXIdentifier',
-        name: 'breadcrumbs',
-      },
-      value: {
-        type: 'JSXExpressionContainer',
-      },
-    })
-    .find(j.JSXExpressionContainer)
-    .filter((nodePath) => {
-      if (nodePath.node.expression.type === 'Identifier') {
-        replaceJSXAttributes(
-          j,
-          j(nodePath).closest(j.JSXElement).paths()[0],
-          'breadcrumbs',
-          'backAction',
-        );
-
-        insertCommentBefore(
-          j,
-          j(nodePath).find(j.Identifier).paths()[0],
-          `${POLARIS_MIGRATOR_COMMENT} In this case, you will need to update the breadcrumbs variable to be a single object instead of an array as arrays have been deprecated.`,
-        );
-      }
-
-      if (nodePath.node.expression.type === 'CallExpression') {
-        replaceJSXAttributes(
-          j,
-          j(nodePath).closest(j.JSXElement).paths()[0],
-          'breadcrumbs',
-          'backAction',
-        );
-        insertCommentBefore(
-          j,
-          j(nodePath).find(j.Identifier).paths()[0],
-          `${POLARIS_MIGRATOR_COMMENT} In this case, you will need to update the breadcrumbs variable to be a single object instead of an array as arrays have been deprecated.`,
-        );
-        return false;
-      }
-
-      if (nodePath.node.expression.type === 'ObjectExpression') {
-        replaceJSXAttributes(
-          j,
-          j(nodePath).closest(j.JSXElement).paths()[0],
-          'breadcrumbs',
-          'backAction',
-        );
-      }
-
-      return true;
-    })
-    .find(j.ArrayExpression)
-    .replaceWith((nodePath) => {
-      const arrayOfBreadcrumbs = nodePath.node.elements;
-
-      if (arrayOfBreadcrumbs.length === 0) {
-        removeJSXAttributes(
-          j,
-          nodePath.parentPath.parentPath.parentPath.parentPath,
-          'breadcrumbs',
-        );
-        return;
-      }
-
-      if (
-        arrayOfBreadcrumbs[arrayOfBreadcrumbs.length - 1]?.type !==
-        'ObjectExpression'
-      )
-        return;
-
-      replaceJSXAttributes(
-        j,
-        j(nodePath).closest(j.JSXElement).paths()[0],
-        'breadcrumbs',
-        'backAction',
-      );
-      return j.template.expression`${
-        arrayOfBreadcrumbs[arrayOfBreadcrumbs.length - 1]
-      }`;
-    });
-
-  return source.toSource();
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.test.ts
deleted file mode 100644
index 1dd0470b362..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/tests/v11-styles-replace-custom-property-border.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-border';
-const fixtures = ['v11-styles-replace-custom-property-border'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/transform.ts
similarity index 90%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/transform.ts
index aa87b1f2e97..b5029a0f51a 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-border/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts
deleted file mode 100644
index 3a7104e16ba..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-border/v11-styles-replace-custom-property-border.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-border-radius-base': '--p-border-radius-1',
-    '--p-border-radius-large': '--p-border-radius-2',
-    '--p-border-radius-half': '--p-border-radius-full',
-    '--p-border-base':
-      'var(--p-border-width-1) solid var(--p-color-border-subdued)',
-    '--p-border-dark': 'var(--p-border-width-1) solid var(--p-color-border)',
-    '--p-border-transparent': 'var(--p-border-width-1) solid transparent',
-    '--p-border-divider':
-      'var(--p-border-width-1) solid var(--p-color-border-subdued)',
-    '--p-border-divider-on-dark':
-      'var(--p-border-width-1) solid var(--p-color-border-inverse)',
-  },
-};
-
-export default function v11StylesReplaceCustomPropertyBorder(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.test.ts
deleted file mode 100644
index 74cb4de42d0..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/tests/v11-styles-replace-custom-property-color.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-color';
-const fixtures = ['v11-styles-replace-custom-property-color'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/transform.ts
similarity index 99%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/transform.ts
index 66ca12e5c2d..3d4f0603530 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-color/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/v11-styles-replace-custom-property-color.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/v11-styles-replace-custom-property-color.ts
deleted file mode 100644
index 82a5631369f..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-color/v11-styles-replace-custom-property-color.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const allMap = {
-  '--p-backdrop': 'rgba(0, 0, 0, 0.5)',
-  '--p-overlay': 'rgba(255, 255, 255, 0.5)',
-  '--p-shadow-color-picker': 'rgba(0, 0, 0, 0.5)',
-  '--p-shadow-color-picker-dragger': 'rgba(33, 43, 54, 0.32)',
-  '--p-hint-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  /**
-   * Decorative colors are being converted to hard-coded values
-   * since they are only used for Avatar.
-   */
-  '--p-decorative-one-icon': 'rgba(126, 87, 0, 1)',
-  '--p-decorative-one-surface': 'rgba(255, 201, 107, 1)',
-  '--p-decorative-one-text': 'rgba(61, 40, 0, 1)',
-  '--p-decorative-two-icon': 'rgba(175, 41, 78, 1)',
-  '--p-decorative-two-surface': 'rgba(255, 196, 176, 1)',
-  '--p-decorative-two-text': 'rgba(73, 11, 28, 1)',
-  '--p-decorative-three-icon': 'rgba(0, 109, 65, 1)',
-  '--p-decorative-three-surface': 'rgba(146, 230, 181, 1)',
-  '--p-decorative-three-text': 'rgba(0, 47, 25, 1)',
-  '--p-decorative-four-icon': 'rgba(0, 106, 104, 1)',
-  '--p-decorative-four-surface': 'rgba(145, 224, 214, 1)',
-  '--p-decorative-four-text': 'rgba(0, 45, 45, 1)',
-  '--p-decorative-five-icon': 'rgba(174, 43, 76, 1)',
-  '--p-decorative-five-surface': 'rgba(253, 201, 208, 1)',
-  '--p-decorative-five-text': 'rgba(79, 14, 31, 1)',
-
-  // Color
-  '--p-text': '--p-color-text',
-  '--p-text-on-dark': '--p-color-text-inverse',
-  '--p-text-disabled': '--p-color-text-disabled',
-  '--p-text-subdued': '--p-color-text-subdued',
-  '--p-text-subdued-on-dark': '--p-color-text-inverse-subdued',
-  '--p-text-on-interactive': '--p-color-text-on-color',
-  '--p-text-on-primary': '--p-color-text-on-color',
-  '--p-text-primary': '--p-color-text-primary',
-  '--p-text-primary-hovered': '--p-color-text-primary-hover',
-  '--p-text-primary-pressed': '--p-color-text-primary',
-  '--p-text-critical': '--p-color-text-critical',
-  '--p-text-on-critical': '--p-color-text-on-color',
-  '--p-text-warning': '--p-color-text-caution',
-  '--p-text-highlight': '--p-color-text-info',
-  '--p-text-success': '--p-color-text-success',
-  '--p-interactive-on-dark': '--p-color-text-interactive-inverse',
-  '--p-interactive-critical-disabled': '--p-color-text-disabled',
-  '--p-interactive-critical-pressed': '--p-color-text-critical-active',
-  '--p-interactive-pressed-on-dark': '--p-color-text-interactive-inverse',
-
-  // Background
-  '--p-background': '--p-color-bg-app',
-  '--p-background-hovered': '--p-color-bg-app-hover',
-  '--p-background-pressed': '--p-color-bg-app-active',
-  '--p-background-selected': '--p-color-bg-app-selected',
-  '--p-surface': '--p-color-bg',
-  '--p-surface-dark': '--p-color-bg-inverse',
-  '--p-surface-neutral': '--p-color-bg-strong',
-  '--p-surface-neutral-hovered': '--p-color-bg-strong-hover',
-  '--p-surface-neutral-pressed': '--p-color-bg-strong-active',
-  '--p-surface-neutral-disabled': '--p-color-bg-disabled',
-  '--p-surface-neutral-subdued': '--p-color-bg-subdued',
-  '--p-surface-neutral-subdued-dark': '--p-color-bg-inverse',
-  '--p-surface-subdued': '--p-color-bg-subdued',
-  '--p-surface-disabled': '--p-color-bg-disabled',
-  '--p-surface-hovered': '--p-color-bg-hover',
-  '--p-surface-hovered-dark': '--p-color-bg-inverse-hover',
-  '--p-surface-pressed': '--p-color-bg-active',
-  '--p-surface-pressed-dark': '--p-color-bg-inverse-active',
-  '--p-surface-depressed': '--p-color-bg-inset',
-  '--p-surface-search-field': '--p-color-bg-inset',
-  '--p-surface-search-field-dark': '--p-color-bg-inverse',
-  '--p-surface-selected': '--p-color-bg-interactive-selected',
-  '--p-surface-selected-hovered': '--p-color-bg-interactive-subdued-hover',
-  '--p-surface-selected-pressed': '--p-color-bg-interactive-subdued-active',
-  '--p-action-secondary': '--p-color-bg-subdued',
-  '--p-action-secondary-disabled': '--p-color-bg-disabled',
-  '--p-action-secondary-hovered': '--p-color-bg-subdued-hover',
-  '--p-action-secondary-hovered-dark': '--p-color-bg-inverse-hover',
-  '--p-action-secondary-pressed': '--p-color-bg-subdued-active',
-  '--p-action-secondary-pressed-dark': '--p-color-bg-inverse-active',
-  '--p-action-secondary-depressed': '--p-color-bg-inset-strong',
-  '--p-surface-primary-selected': '--p-color-bg-primary-subdued-selected',
-  '--p-surface-primary-selected-hovered': '--p-color-bg-primary-subdued-hover',
-  '--p-surface-primary-selected-pressed': '--p-color-bg-primary-subdued-active',
-  '--p-surface-critical': '--p-color-bg-critical',
-  '--p-surface-critical-subdued': '--p-color-bg-critical-subdued',
-  '--p-surface-critical-subdued-hovered': '--p-color-bg-critical-subdued-hover',
-  '--p-surface-critical-subdued-pressed':
-    '--p-color-bg-critical-subdued-active',
-  '--p-surface-critical-subdued-depressed': '--p-color-bg-critical',
-  '--p-action-critical': '--p-color-bg-critical-strong',
-  '--p-action-critical-hovered': '--p-color-bg-critical-strong-hover',
-  '--p-action-critical-pressed': '--p-color-bg-critical-strong-active',
-  '--p-action-critical-depressed': '--p-color-bg-critical-strong-active',
-  '--p-surface-warning': '--p-color-bg-warning',
-  '--p-surface-warning-subdued': '--p-color-bg-caution-subdued',
-  '--p-surface-warning-subdued-hovered': '--p-color-bg-caution-subdued-hover',
-  '--p-surface-warning-subdued-pressed': '--p-color-bg-caution-subdued-active',
-  '--p-surface-highlight': '--p-color-bg-info',
-  '--p-surface-highlight-subdued': '--p-color-bg-info-subdued',
-  '--p-surface-highlight-subdued-hovered': '--p-color-bg-info-subdued-hover',
-  '--p-surface-highlight-subdued-pressed': '--p-color-bg-info-subdued-active',
-  '--p-surface-success': '--p-color-bg-success',
-  '--p-surface-success-subdued': '--p-color-bg-success-subdued',
-  '--p-surface-success-subdued-hovered': '--p-color-bg-success-subdued-hover',
-  '--p-surface-success-subdued-pressed': '--p-color-bg-success-subdued-active',
-  '--p-surface-attention': '--p-color-bg-caution',
-  '--p-action-critical-disabled': '--p-color-bg-disabled',
-  '--p-action-primary-disabled': '--p-color-bg-disabled',
-  '--p-action-primary-hovered': '--p-color-bg-primary-hover',
-  '--p-action-primary-pressed': '--p-color-bg-primary-active',
-  '--p-action-primary-depressed': '--p-color-bg-primary-active',
-  '--p-interactive-critical-hovered': '--p-color-bg-critical-strong-hover',
-
-  // Border
-  '--p-border': '--p-color-border',
-  '--p-border-on-dark': '--p-color-border-inverse',
-  '--p-border-neutral-subdued': '--p-color-border-strong',
-  '--p-border-hovered': '--p-color-border-hover',
-  '--p-border-disabled': '--p-color-border-disabled',
-  '--p-border-subdued': '--p-color-border-subdued',
-  '--p-border-depressed': '--p-color-border-inverse',
-  '--p-border-shadow': '--p-color-border-input',
-  '--p-border-shadow-subdued': '--p-color-border-input',
-  '--p-divider': '--p-color-border-subdued',
-  '--p-divider-dark': '--p-color-border-inverse',
-  '--p-focused': '--p-color-border-interactive-focus',
-  '--p-border-critical': '--p-color-border-critical',
-  '--p-border-critical-subdued': '--p-color-border-critical-subdued',
-  '--p-border-critical-disabled': '--p-color-border-disabled',
-  '--p-border-warning': '--p-color-border-caution',
-  '--p-border-warning-subdued': '--p-color-border-caution-subdued',
-  '--p-border-highlight': '--p-color-border-info',
-  '--p-border-highlight-subdued': '--p-color-border-info-subdued',
-  '--p-border-success': '--p-color-border-success',
-  '--p-border-success-subdued': '--p-color-border-success-subdued',
-
-  // Fill
-  '--p-icon': '--p-color-icon',
-  '--p-icon-on-dark': '--p-color-icon-inverse',
-  '--p-icon-hovered': '--p-color-icon-hover',
-  '--p-icon-disabled': '--p-color-icon-disabled',
-  '--p-icon-subdued': '--p-color-icon-subdued',
-  '--p-icon-on-interactive': '--p-color-icon-on-color',
-  '--p-icon-on-primary': '--p-color-icon-on-color',
-  '--p-icon-critical': '--p-color-icon-critical',
-  '--p-icon-on-critical': '--p-color-icon-on-color',
-  '--p-icon-warning': '--p-color-icon-caution',
-  '--p-icon-highlight': '--p-color-icon-info',
-  '--p-icon-success': '--p-color-icon-success',
-  '--p-icon-attention': '--p-color-icon-caution',
-  '--p-icon-pressed': '--p-color-icon-active',
-};
-
-const colorMap = {
-  ...allMap,
-  '--p-interactive': '--p-color-text-interactive',
-  '--p-interactive-disabled': '--p-color-text-interactive-disabled',
-  '--p-interactive-hovered': '--p-color-text-interactive-hover',
-  '--p-interactive-pressed': '--p-color-text-interactive-active',
-  '--p-action-primary': '--p-color-text-primary',
-  '--p-interactive-critical': '--p-color-text-critical',
-};
-
-const backgroundColorMap = {
-  ...allMap,
-  '--p-interactive': '--p-color-bg-interactive',
-  '--p-interactive-disabled': '--p-color-bg-interactive-disabled',
-  '--p-interactive-hovered': '--p-color-bg-interactive-hover',
-  '--p-interactive-pressed': '--p-color-bg-interactive-active',
-  '--p-action-primary': '--p-color-bg-primary',
-  '--p-interactive-critical': '--p-color-bg-critical',
-};
-
-const borderColorMap = {
-  ...allMap,
-  '--p-interactive': '--p-color-border-interactive',
-  '--p-interactive-disabled': '--p-color-border-interactive-disabled',
-  '--p-interactive-hovered': '--p-color-border-interactive-hover',
-  '--p-interactive-pressed': '--p-color-border-interactive-active',
-  '--p-action-primary': '--p-color-border-primary',
-  '--p-interactive-critical': '--p-color-border-critical',
-};
-
-const fillColorMap = {
-  ...allMap,
-  '--p-interactive': '--p-color-icon-interactive',
-  '--p-interactive-disabled': '--p-color-icon-interactive-disabled',
-  '--p-interactive-hovered': '--p-color-icon-interactive-hover',
-  '--p-interactive-pressed': '--p-color-icon-interactive-active',
-  '--p-action-primary': '--p-color-icon-primary',
-  '--p-interactive-critical': '--p-color-icon-critical',
-};
-
-const replacementMaps = {
-  color: colorMap,
-  '/^background/': backgroundColorMap,
-  '/^border/': borderColorMap,
-  '/^outline/': borderColorMap,
-  fill: fillColorMap,
-  '/.+/': allMap,
-};
-
-export default function v11StylesReplaceCustomPropertyColor(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.test.ts
deleted file mode 100644
index 29fbd30013f..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/tests/v11-styles-replace-custom-property-depth.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-depth';
-const fixtures = ['v11-styles-replace-custom-property-depth'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/transform.ts
similarity index 90%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/transform.ts
index 07c4a315746..c7b41eb4020 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-depth/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/v11-styles-replace-custom-property-depth.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/v11-styles-replace-custom-property-depth.ts
deleted file mode 100644
index 6e62ec620b0..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-depth/v11-styles-replace-custom-property-depth.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-shadow-transparent': '--p-shadow-none',
-    '--p-shadow-faint': '--p-shadow-sm',
-    '--p-shadow-base': '--p-shadow-md',
-    '--p-shadow-deep': '--p-shadow-md',
-    '--p-shadow-button': '--p-shadow-sm',
-    '--p-shadow-top-bar': '--p-shadow-sm',
-    '--p-shadow-card': '--p-shadow-md',
-    '--p-shadow-popover': '--p-shadow-xl',
-    '--p-shadow-layer': '--p-shadow-2xl',
-    '--p-shadow-modal': '--p-shadow-2xl',
-    '--p-shadows-inset-button': '--p-shadow-none',
-    '--p-shadows-inset-button-pressed': '--p-shadow-inset-md',
-  },
-};
-
-export default function v11StylesReplaceCustomPropertyDepth(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.test.ts
deleted file mode 100644
index 8509eb84b93..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/tests/v11-styles-replace-custom-property-legacy.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-legacy';
-const fixtures = ['v11-styles-replace-custom-property-legacy'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/transform.ts
similarity index 96%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/transform.ts
index e2dd8f9cc39..5f10cfcebe3 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-legacy/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/transform.ts
@@ -2,9 +2,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/v11-styles-replace-custom-property-legacy.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/v11-styles-replace-custom-property-legacy.ts
deleted file mode 100644
index dd8b4cf0ba3..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-legacy/v11-styles-replace-custom-property-legacy.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-disable line-comment-position */
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const allMap = {
-  '--p-override-loading-z-index': '--p-z-index-6',
-  '--p-choice-margin': '--p-space-025',
-  '--p-control-border-width': '--p-border-width-2',
-  '--p-banner-border-default':
-    'inset 0 (--p-border-width-1) 0 0 var(--p-color-border-strong), inset 0 0 0 (--p-border-width-1) var(--p-color-border-strong)',
-  '--p-banner-border-success':
-    'inset 0 (--p-border-width-1) 0 0 var(--p-color-border-success-subdued), inset 0 0 0 (--p-border-width-1) var(--p-color-border-success-subdued)',
-  '--p-banner-border-highlight':
-    'inset 0 (--p-border-width-1) 0 0 var(--p-color-border-info-subdued), inset 0 0 0 (--p-border-width-1) var(--p-color-border-info-subdued)',
-  '--p-banner-border-warning':
-    'inset 0 (--p-border-width-1) 0 0 var(--p-color-border-caution-subdued), inset 0 0 0 (--p-border-width-1) var(--p-color-border-caution-subdued)',
-  '--p-banner-border-critical':
-    'inset 0 (--p-border-width-1) 0 0 var(--p-color-border-critical-subdued), inset 0 0 0 (--p-border-width-1) var(--p-color-border-critical-subdued)',
-  '--p-thin-border-subdued':
-    'var(--p-border-width-1) solid var(--p-color-border-subdued)',
-  // The following custom properties are overridden in the spaceMap
-  '--p-frame-offset': '0',
-  '--p-choice-size': '1.25rem', // 20px
-  '--p-icon-size-small': '0.5rem', // 8px
-  '--p-icon-size-medium': '1.25rem', // 20px
-  '--p-text-field-spinner-offset': '0.125rem', // 2px
-  '--p-text-field-focus-ring-offset': '-0.25rem', // -4px
-  '--p-range-slider-thumb-size-base': '1rem', // 16px
-  '--p-range-slider-thumb-size-active': '1.5rem', // 24px
-  '--p-button-group-item-spacing': 'calc(-1 * var(--p-space-025))',
-};
-
-const spaceMap = {
-  ...allMap,
-  '--p-choice-size': 'var(--p-space-5)', // 20px
-  '--p-icon-size-small': 'var(--p-space-2)', // 8px
-  '--p-icon-size-medium': 'var(--p-space-5)', // 20px
-  '--p-text-field-spinner-offset': 'var(--p-space-05)', // 2px
-  '--p-text-field-focus-ring-offset': 'calc(-1 * var(--p-space-1))', // -4px
-  '--p-range-slider-thumb-size-base': 'var(--p-space-4)', // 16px
-  '--p-range-slider-thumb-size-active': 'var(--p-space-6)', // 24px
-};
-
-const replacementMaps = {
-  '/^padding/': spaceMap,
-  '/^margin/': spaceMap,
-  '/.+/': allMap,
-};
-
-export default function v11StylesReplaceCustomPropertyLegacy(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.test.ts
deleted file mode 100644
index 15f30ec0528..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/tests/v11-styles-replace-custom-property-motion.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-motion';
-const fixtures = ['v11-styles-replace-custom-property-motion'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/transform.ts
similarity index 94%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/transform.ts
index 929ab40e2fb..b26ee2cbd75 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-motion/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/v11-styles-replace-custom-property-motion.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/v11-styles-replace-custom-property-motion.ts
deleted file mode 100644
index c7bb8900617..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-motion/v11-styles-replace-custom-property-motion.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-linear': '--p-motion-linear',
-    '--p-ease-in-out': '--p-motion-ease-in-out',
-    '--p-ease-out': '--p-motion-ease-out',
-    '--p-ease-in': '--p-motion-ease-in',
-    '--p-ease': '--p-motion-ease',
-    '--p-duration-0': '--p-motion-duration-0',
-    '--p-duration-50': '--p-motion-duration-50',
-    '--p-duration-100': '--p-motion-duration-100',
-    '--p-duration-150': '--p-motion-duration-150',
-    '--p-duration-200': '--p-motion-duration-200',
-    '--p-duration-250': '--p-motion-duration-250',
-    '--p-duration-300': '--p-motion-duration-300',
-    '--p-duration-350': '--p-motion-duration-350',
-    '--p-duration-400': '--p-motion-duration-400',
-    '--p-duration-450': '--p-motion-duration-450',
-    '--p-duration-500': '--p-motion-duration-500',
-    '--p-duration-5000': '--p-motion-duration-5000',
-    '--p-keyframes-bounce': '--p-motion-keyframes-bounce',
-    '--p-keyframes-fade-in': '--p-motion-keyframes-fade-in',
-    '--p-keyframes-pulse': '--p-motion-keyframes-pulse',
-    '--p-keyframes-spin': '--p-motion-keyframes-spin',
-    '--p-keyframes-appear-above': '--p-motion-keyframes-appear-above',
-    '--p-keyframes-appear-below': '--p-motion-keyframes-appear-below',
-  },
-};
-
-export default function v11StylesReplaceCustomPropertyMotion(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/transform.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/transform.test.ts
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.input.scss b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.input.scss
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.input.scss
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.input.scss
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.output.scss b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.output.scss
similarity index 100%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.output.scss
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/tests/v11-styles-replace-custom-property-z-index.output.scss
diff --git a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/transform.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/transform.ts
similarity index 88%
rename from polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/transform.ts
rename to polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/transform.ts
index 7fbf7efb1c5..e6ffdd89777 100644
--- a/polaris-codemods/src/codemods/v11-styles-replace-custom-property-z-index/transform.ts
+++ b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-z-index/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.input.scss b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.input.scss
deleted file mode 100644
index 1d73b624f0a..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.input.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.z-index {
-  z-index: var(--p-z-1);
-  z-index: var(--p-z-2);
-  z-index: var(--p-z-3);
-  z-index: var(--p-z-4);
-  z-index: var(--p-z-5);
-  z-index: var(--p-z-6);
-  z-index: var(--p-z-7);
-  z-index: var(--p-z-8);
-  z-index: var(--p-z-9);
-  z-index: var(--p-z-10);
-  z-index: var(--p-z-11);
-  z-index: var(--p-z-12);
-}
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.output.scss b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.output.scss
deleted file mode 100644
index c0e52adcf6a..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.output.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.z-index {
-  z-index: var(--p-z-index-1);
-  z-index: var(--p-z-index-2);
-  z-index: var(--p-z-index-3);
-  z-index: var(--p-z-index-4);
-  z-index: var(--p-z-index-5);
-  z-index: var(--p-z-index-6);
-  z-index: var(--p-z-index-7);
-  z-index: var(--p-z-index-8);
-  z-index: var(--p-z-index-9);
-  z-index: var(--p-z-index-10);
-  z-index: var(--p-z-index-11);
-  z-index: var(--p-z-index-12);
-}
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.test.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.test.ts
deleted file mode 100644
index 83d04ebb44d..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/tests/v11-styles-replace-custom-property-zindex.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v11-styles-replace-custom-property-zindex';
-const fixtures = ['v11-styles-replace-custom-property-zindex'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/v11-styles-replace-custom-property-zindex.ts b/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/v11-styles-replace-custom-property-zindex.ts
deleted file mode 100644
index f5fdf980d07..00000000000
--- a/polaris-migrator/src/migrations/v11-styles-replace-custom-property-zindex/v11-styles-replace-custom-property-zindex.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-z-1': '--p-z-index-1',
-    '--p-z-2': '--p-z-index-2',
-    '--p-z-3': '--p-z-index-3',
-    '--p-z-4': '--p-z-index-4',
-    '--p-z-5': '--p-z-index-5',
-    '--p-z-6': '--p-z-index-6',
-    '--p-z-7': '--p-z-index-7',
-    '--p-z-8': '--p-z-index-8',
-    '--p-z-9': '--p-z-index-9',
-    '--p-z-10': '--p-z-index-10',
-    '--p-z-11': '--p-z-index-11',
-    '--p-z-12': '--p-z-index-12',
-  },
-};
-
-export default function v11StylesReplaceCustomPropertyZindex(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.input.scss b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.input.scss
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.input.scss
rename to polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.input.scss
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.output.scss b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.output.scss
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.output.scss
rename to polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.output.scss
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-border-radius/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.input.scss b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.input.scss
deleted file mode 100644
index 92bf9a6ff91..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.input.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/* stylelint-disable */
-
-.border-radius {
-  /* Migrate */
-  border-radius: border-radius();
-  border-radius: border-radius(base);
-  border-radius: border-radius(large);
-
-  /* Ignore */
-  border-radius: calc(border-radius(base) * 2);
-  border-radius: calc(border-radius() * rem(1px));
-
-  /* Comment */
-  border-radius: border-radius(base) * 2;
-  border-radius: border-radius() * rem(1px);
-  border-top-right-radius: border-radius() * rem(4px);
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.output.scss b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.output.scss
deleted file mode 100644
index 3c93d56ccd4..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.output.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/* stylelint-disable */
-
-.border-radius {
-  /* Migrate */
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-base);
-  border-radius: var(--p-border-radius-large);
-
-  /* Ignore */
-  border-radius: calc(border-radius(base) * 2);
-  border-radius: calc(border-radius() * rem(1px));
-
-  /* Comment */
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-base) * 2;
-  border-radius: border-radius(base) * 2;
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-radius: var(--p-border-radius-base) * rem(1px);
-  border-radius: border-radius() * rem(1px);
-  // polaris-migrator: Unable to migrate the following expression. Please upgrade manually.
-  // border-top-right-radius: var(--p-border-radius-base) * rem(4px);
-  border-top-right-radius: border-radius() * rem(4px);
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.test.ts
deleted file mode 100644
index fa04d3f2052..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/tests/v9-scss-replace-border-radius.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-border-radius';
-const fixtures = ['v9-scss-replace-border-radius', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/transform.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/transform.ts
similarity index 95%
rename from polaris-codemods/src/codemods/v9-scss-replace-border-radius/transform.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border-radius/transform.ts
index 2ca90699b72..6dd1d340bf2 100644
--- a/polaris-codemods/src/codemods/v9-scss-replace-border-radius/transform.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/transform.ts
@@ -3,7 +3,7 @@ import type {Plugin} from 'postcss';
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import type {NamespaceOptions} from '../../utilities/sass';
 import {
   getFunctionArgs,
@@ -15,11 +15,6 @@ import {
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/types';
 
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
 export default function transformer(
   fileInfo: FileInfo,
   _: API,
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/v9-scss-replace-border-radius.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-radius/v9-scss-replace-border-radius.ts
deleted file mode 100644
index d452c3019fa..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-radius/v9-scss-replace-border-radius.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
-import {
-  getFunctionArgs,
-  isNumericOperator,
-  isSassFunction,
-  namespace,
-  StopWalkingFunctionNodes,
-  createInlineComment,
-} from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-export default function v9ScssReplaceBorderRadius(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedBorderRadius = namespace('border-radius', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-border-radius',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      if (!borderRadiusProps.has(decl.prop)) return;
-
-      /**
-       * A collection of transformable values to migrate (e.g. decl lengths, functions, etc.)
-       *
-       * Note: This is evaluated at the end of each visitor execution to determine whether
-       * or not to replace the declaration or insert a comment.
-       */
-      const targets: {replaced: boolean}[] = [];
-      let hasNumericOperator = false;
-      const parsedValue = valueParser(decl.value);
-
-      handleBorderRadiusProps();
-
-      if (targets.some(({replaced}) => !replaced || hasNumericOperator)) {
-        // Insert comment if the declaration value contains calculations
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      //
-      // Handler
-      //
-
-      function handleBorderRadiusProps() {
-        parsedValue.walk((node) => {
-          if (isNumericOperator(node)) {
-            hasNumericOperator = true;
-            return;
-          }
-
-          if (node.type === 'function') {
-            if (isSassFunction(namespacedBorderRadius, node)) {
-              targets.push({replaced: false});
-
-              const args = getFunctionArgs(node);
-
-              if (!(args.length === 0 || args.length === 1)) return;
-
-              // `border-radius()` args reference:
-              // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L655
-              const value = args[0] ?? 'base';
-
-              if (!isKeyOf(borderRadiusFunctionMap, value)) return;
-
-              node.value = 'var';
-              node.nodes = [
-                {
-                  type: 'word',
-                  value: borderRadiusFunctionMap[value],
-                  sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-                  sourceEndIndex: borderRadiusFunctionMap[value].length,
-                },
-              ];
-
-              targets[targets.length - 1]!.replaced = true;
-            }
-
-            return StopWalkingFunctionNodes;
-          }
-        });
-      }
-    },
-  };
-};
-
-const borderRadiusProps = new Set([
-  'border-radius',
-  'border-top-left-radius',
-  'border-top-right-radius',
-  'border-bottom-left-radius',
-  'border-bottom-right-radius',
-]);
-
-const borderRadiusFunctionMap = {
-  '': '--p-border-radius-base',
-  base: '--p-border-radius-base',
-  "'base'": '--p-border-radius-base',
-  large: '--p-border-radius-large',
-  "'large'": '--p-border-radius-large',
-} as const;
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-border-width/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.test.ts
deleted file mode 100644
index 2b9e4c22926..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-width/tests/v9-scss-replace-border-width.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-border-width';
-const fixtures = ['v9-scss-replace-border-width', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border-width/v9-scss-replace-border-width.ts b/polaris-migrator/src/migrations/v9-scss-replace-border-width/transform.ts
similarity index 95%
rename from polaris-migrator/src/migrations/v9-scss-replace-border-width/v9-scss-replace-border-width.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border-width/transform.ts
index 63d405e0f20..e2fcc3c555e 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-border-width/v9-scss-replace-border-width.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-border-width/transform.ts
@@ -1,9 +1,10 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   getFunctionArgs,
   isSassFunction,
@@ -12,10 +13,9 @@ import {
   StopWalkingFunctionNodes,
   createInlineComment,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9ScssReplaceBorderWidth(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-border/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-border/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border/tests/v9-scss-replace-border.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-border/tests/v9-scss-replace-border.test.ts
deleted file mode 100644
index 1120b391500..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-border/tests/v9-scss-replace-border.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-border';
-const fixtures = ['v9-scss-replace-border', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-border/v9-scss-replace-border.ts b/polaris-migrator/src/migrations/v9-scss-replace-border/transform.ts
similarity index 95%
rename from polaris-migrator/src/migrations/v9-scss-replace-border/v9-scss-replace-border.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-border/transform.ts
index e069ad85b1a..95df3212944 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-border/v9-scss-replace-border.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-border/transform.ts
@@ -1,19 +1,19 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   getFunctionArgs,
   isSassFunction,
   namespace,
   createInlineComment,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9ScssReplaceBorder(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-breakpoints/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.test.ts
deleted file mode 100644
index 4b5f7124324..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/tests/v9-scss-replace-breakpoints.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-breakpoints';
-const fixtures = ['v9-scss-replace-breakpoints', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/v9-scss-replace-breakpoints.ts b/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/transform.ts
similarity index 95%
rename from polaris-migrator/src/migrations/v9-scss-replace-breakpoints/v9-scss-replace-breakpoints.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-breakpoints/transform.ts
index 64e0377aa1f..6f7ca94f993 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/v9-scss-replace-breakpoints.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-breakpoints/transform.ts
@@ -1,29 +1,20 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 
-import {getNamespacePattern} from '../../utilities/sass';
 import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {getNamespacePattern} from '../../utilities/sass';
+import {isKeyOf} from '../../utilities/types';
 
-/** Mapping of static breakpoint mixins from old to new */
-const staticBreakpointMixins = {
-  'page-content-when-partially-condensed': '#{$p-breakpoints-lg-down}',
-  'page-content-when-not-partially-condensed': '#{$p-breakpoints-md-up}',
-  'page-content-when-fully-condensed': '#{$p-breakpoints-sm-down}',
-  'page-content-when-not-fully-condensed': '#{$p-breakpoints-sm-up}',
-  'page-content-when-layout-stacked': '#{$p-breakpoints-lg-down}',
-  'page-content-when-layout-not-stacked': '#{$p-breakpoints-md-up}',
-  'page-before-resource-list-small': '#{$p-breakpoints-sm-down}',
-  'page-after-resource-list-small': '#{$p-breakpoints-sm-up}',
-  'page-when-not-max-width': '#{$p-breakpoints-lg-down}',
-  'when-typography-condensed': '#{$p-breakpoints-md-down}',
-  'when-typography-not-condensed': '#{$p-breakpoints-md-up}',
-  'frame-when-nav-hidden': '#{$p-breakpoints-md-down}',
-  'frame-when-nav-displayed': '#{$p-breakpoints-md-up}',
-  'frame-with-nav-when-not-max-width': '#{$p-breakpoints-lg-down}',
-  'after-topbar-sheet': '#{$p-breakpoints-sm-up}',
-};
+export default function transformer(
+  fileInfo: FileInfo,
+  _: API,
+  options: Options,
+) {
+  return postcss(plugin(options)).process(fileInfo.source, {
+    syntax: require('postcss-scss'),
+  }).css;
+}
 
 interface PluginOptions extends Options, NamespaceOptions {}
 
@@ -52,12 +43,21 @@ const plugin = (options: PluginOptions = {}): Plugin => {
   };
 };
 
-export default function v9SassReplaceBreakpoints(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
+/** Mapping of static breakpoint mixins from old to new */
+const staticBreakpointMixins = {
+  'page-content-when-partially-condensed': '#{$p-breakpoints-lg-down}',
+  'page-content-when-not-partially-condensed': '#{$p-breakpoints-md-up}',
+  'page-content-when-fully-condensed': '#{$p-breakpoints-sm-down}',
+  'page-content-when-not-fully-condensed': '#{$p-breakpoints-sm-up}',
+  'page-content-when-layout-stacked': '#{$p-breakpoints-lg-down}',
+  'page-content-when-layout-not-stacked': '#{$p-breakpoints-md-up}',
+  'page-before-resource-list-small': '#{$p-breakpoints-sm-down}',
+  'page-after-resource-list-small': '#{$p-breakpoints-sm-up}',
+  'page-when-not-max-width': '#{$p-breakpoints-lg-down}',
+  'when-typography-condensed': '#{$p-breakpoints-md-down}',
+  'when-typography-not-condensed': '#{$p-breakpoints-md-up}',
+  'frame-when-nav-hidden': '#{$p-breakpoints-md-down}',
+  'frame-when-nav-displayed': '#{$p-breakpoints-md-up}',
+  'frame-with-nav-when-not-max-width': '#{$p-breakpoints-lg-down}',
+  'after-topbar-sheet': '#{$p-breakpoints-sm-up}',
+};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-color/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-color/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-color/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-color/tests/v9-scss-replace-color.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-color/tests/v9-scss-replace-color.test.ts
deleted file mode 100644
index e798a625f5d..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-color/tests/v9-scss-replace-color.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-color';
-const fixtures = ['v9-scss-replace-color', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-color/transform.ts b/polaris-migrator/src/migrations/v9-scss-replace-color/transform.ts
similarity index 97%
rename from polaris-codemods/src/codemods/v9-scss-replace-color/transform.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-color/transform.ts
index 6bf657f7165..54d9d3ce508 100644
--- a/polaris-codemods/src/codemods/v9-scss-replace-color/transform.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-color/transform.ts
@@ -2,7 +2,6 @@ import type {FileInfo, API, Options} from 'jscodeshift';
 import type {Plugin} from 'postcss';
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
-import {colors as tokenColors} from './v10-legacy-colors';
 import {createVar} from '@shopify/polaris-tokens';
 
 import type {NamespaceOptions} from '../../utilities/sass';
@@ -13,12 +12,8 @@ import {
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/types';
-import {scss} from '../../utilities/constants';
 
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
+import {colors as tokenColors} from './v10-legacy-colors';
 
 export default function transformer(file: FileInfo, _: API, options: Options) {
   return postcss(plugin(options)).process(file.source, {
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-color/v9-scss-replace-color.ts b/polaris-migrator/src/migrations/v9-scss-replace-color/v9-scss-replace-color.ts
deleted file mode 100644
index 02ddcf003f0..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-color/v9-scss-replace-color.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-import valueParser from 'postcss-value-parser';
-import {createVar} from '@shopify/polaris-tokens';
-
-import {
-  namespace,
-  getFunctionArgs,
-  stripQuotes,
-  StopWalkingFunctionNodes,
-} from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-import {colors as tokenColors} from './v10-legacy-colors';
-
-export default function scssReplaceColor(
-  file: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(file.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedColor = namespace('color', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-color',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      if (!isKeyOf(propertyMaps, decl.prop)) return;
-      const replacementMap = propertyMaps[decl.prop];
-      const parsed = valueParser(decl.value);
-
-      parsed.walk((node) => {
-        if (node.type !== 'function') return;
-
-        if (node.value === 'rgba') {
-          return StopWalkingFunctionNodes;
-        }
-
-        // 1. Remove color() fallbacks
-        if (node.value === 'var') {
-          const args = getFunctionArgs(node);
-          const polarisCustomPropertyIndex = args.findIndex((arg) =>
-            polarisCustomPropertyRegEx.test(arg),
-          );
-          const colorFnFallbackIndex = args.findIndex((arg) =>
-            arg.startsWith(namespacedColor),
-          );
-
-          if (polarisCustomPropertyIndex < colorFnFallbackIndex) {
-            node.nodes = [node.nodes[0]];
-          }
-
-          return StopWalkingFunctionNodes;
-        }
-
-        // 2. Replace `color()` with variable
-        if (node.value === namespacedColor) {
-          const colorFnArgs = getFunctionArgs(node).map(stripQuotes);
-          const hue = colorFnArgs[0] ?? '';
-          const value = colorFnArgs[1] ?? 'base';
-          const forBackground = colorFnArgs[2];
-
-          // Skip color() with for-background argument
-          if (forBackground) return;
-
-          // Skip if we don't have a color for the hue and value
-          if (
-            !(
-              isKeyOf(replacementMap, hue) &&
-              isKeyOf(replacementMap[hue], value)
-            )
-          )
-            return;
-
-          const colorCustomProperty: string = replacementMap[hue][value];
-
-          node.value = 'var';
-          node.nodes = [
-            {
-              type: 'word',
-              value: colorCustomProperty,
-              sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-              sourceEndIndex: colorCustomProperty.length,
-            },
-          ];
-        }
-      });
-
-      decl.value = parsed.toString();
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-/*
- * See the legacy Sass API file for the original color palette
- * documentation/guides/legacy-polaris-v8-public-api.scss
- */
-
-const colorMap = {
-  blue: {
-    dark: '--p-interactive-hovered',
-    base: '--p-interactive',
-  },
-  green: {
-    dark: '--p-text-success',
-    base: '--p-text-success',
-  },
-  yellow: {
-    dark: '--p-text-warning',
-    base: '--p-text-warning',
-  },
-  red: {
-    dark: '--p-text-critical',
-    base: '--p-text-critical',
-  },
-  ink: {
-    base: '--p-text',
-    light: '--p-text-subdued',
-    lighter: '--p-text-subdued',
-    lightest: '--p-text-subdued',
-  },
-  sky: {
-    dark: '--p-text-subdued-on-dark',
-    base: '--p-text-on-dark',
-    light: '--p-text-on-dark',
-    lighter: '--p-text-on-dark',
-  },
-  black: {
-    base: '--p-text',
-  },
-  white: {
-    base: '--p-text-on-dark',
-  },
-};
-
-const backgroundColorMap = {
-  green: {
-    light: '--p-surface-success',
-    lighter: '--p-surface-success-subdued',
-  },
-  yellow: {
-    light: '--p-surface-warning',
-    lighter: '--p-surface-warning-subdued',
-  },
-  red: {
-    light: '--p-surface-critical',
-    lighter: '--p-surface-critical-subdued',
-  },
-  ink: {
-    dark: '--p-surface-dark',
-    base: '--p-surface-neutral-subdued-dark',
-  },
-  sky: {
-    base: '--p-surface-neutral',
-    light: '--p-surface-neutral-subdued',
-    lighter: '--p-surface-subdued',
-  },
-  black: {
-    base: '--p-surface-dark',
-  },
-  white: {
-    base: '--p-surface',
-  },
-};
-
-const borderColorMap = {
-  green: {
-    dark: '--p-border-success',
-    base: '--p-border-success',
-    light: '--p-border-success-subdued',
-    lighter: '--p-border-success-subdued',
-  },
-  yellow: {
-    dark: '--p-border-warning',
-    base: '--p-border-warning',
-    light: '--p-border-warning-disabled',
-    lighter: '--p-border-warning-subdued',
-  },
-  red: {
-    dark: '--p-border-critical',
-    base: '--p-border-critical',
-    light: '--p-border-critical-subdued',
-    lighter: '--p-border-critical-subdued',
-  },
-  ink: {
-    lightest: '--p-border',
-  },
-  sky: {
-    light: '--p-border-subdued',
-  },
-};
-
-const fillColorMap = {
-  green: {
-    dark: '--p-icon-success',
-    base: '--p-icon-success',
-  },
-  yellow: {
-    dark: '--p-icon-warning',
-    base: '--p-icon-warning',
-  },
-  red: {
-    dark: '--p-icon-critical',
-    base: '--p-icon-critical',
-  },
-  ink: {
-    base: '--p-icon',
-    light: '--p-icon',
-    lighter: '--p-icon-subdued',
-    lightest: '--p-icon-disabled',
-  },
-  black: {
-    base: '--p-icon',
-  },
-  white: {
-    base: '--p-icon-on-dark',
-  },
-};
-
-const propertyMaps = {
-  color: colorMap,
-  background: backgroundColorMap,
-  'background-color': backgroundColorMap,
-  border: borderColorMap,
-  'border-color': borderColorMap,
-  fill: fillColorMap,
-};
-
-const polarisCustomPropertyRegEx = new RegExp(
-  Object.keys(tokenColors).map(createVar).join('|'),
-);
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-duration/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-duration/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-duration/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-duration/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-duration/tests/v9-scss-replace-duration.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-duration/tests/v9-scss-replace-duration.test.ts
deleted file mode 100644
index 0d5e3a5ab11..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-duration/tests/v9-scss-replace-duration.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-duration';
-const fixtures = ['v9-scss-replace-duration', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-duration/v9-scss-replace-duration.ts b/polaris-migrator/src/migrations/v9-scss-replace-duration/transform.ts
similarity index 97%
rename from polaris-migrator/src/migrations/v9-scss-replace-duration/v9-scss-replace-duration.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-duration/transform.ts
index 64712ae9db2..f8f99ba21e2 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-duration/v9-scss-replace-duration.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-duration/transform.ts
@@ -9,18 +9,7 @@ import {
   StopWalkingFunctionNodes,
   hasSassFunction,
 } from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-const DEFAULT_DURATION = 'base';
-
-const durationMap = {
-  none: '--p-duration-0',
-  fast: '--p-duration-100',
-  base: '--p-duration-200',
-  slow: '--p-duration-300',
-  slower: '--p-duration-400',
-  slowest: '--p-duration-500',
-};
+import {isKeyOf} from '../../utilities/types';
 
 export default v9ScssReplaceDuration(
   'v9-replace-sass-transition',
@@ -78,3 +67,14 @@ export default v9ScssReplaceDuration(
     };
   },
 );
+
+const DEFAULT_DURATION = 'base';
+
+const durationMap = {
+  none: '--p-duration-0',
+  fast: '--p-duration-100',
+  base: '--p-duration-200',
+  slow: '--p-duration-300',
+  slower: '--p-duration-400',
+  slowest: '--p-duration-500',
+};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-easing/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-easing/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-easing/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-easing/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-easing/tests/v9-scss-replace-easing.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-easing/tests/v9-scss-replace-easing.test.ts
deleted file mode 100644
index 45193c2e886..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-easing/tests/v9-scss-replace-easing.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-easing';
-const fixtures = ['v9-scss-replace-easing', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-easing/v9-scss-replace-easing.ts b/polaris-migrator/src/migrations/v9-scss-replace-easing/transform.ts
similarity index 97%
rename from polaris-migrator/src/migrations/v9-scss-replace-easing/v9-scss-replace-easing.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-easing/transform.ts
index 740ac6ceaa9..0a3af929435 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-easing/v9-scss-replace-easing.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-easing/transform.ts
@@ -9,17 +9,7 @@ import {
   StopWalkingFunctionNodes,
   hasSassFunction,
 } from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-const DEFAULT_EASING = 'base';
-
-const easingMap = {
-  base: '--p-ease',
-  in: '--p-ease-in',
-  out: '--p-ease-out',
-};
-
-const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot'];
+import {isKeyOf} from '../../utilities/types';
 
 export default v9ScssReplaceEasing(
   'v9-scss-replace-easing',
@@ -83,3 +73,13 @@ export default v9ScssReplaceEasing(
     };
   },
 );
+
+const DEFAULT_EASING = 'base';
+
+const easingMap = {
+  base: '--p-ease',
+  in: '--p-ease-in',
+  out: '--p-ease-out',
+};
+
+const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot'];
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-font-family/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.test.ts
deleted file mode 100644
index 82e0dc27ee3..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-font-family/tests/v9-scss-replace-font-family.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-font-family';
-const fixtures = ['v9-scss-replace-font-family', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-family/transform.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-family/transform.ts
similarity index 94%
rename from polaris-codemods/src/codemods/v9-scss-replace-font-family/transform.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-font-family/transform.ts
index 62716b3c201..554f19387bf 100644
--- a/polaris-codemods/src/codemods/v9-scss-replace-font-family/transform.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-font-family/transform.ts
@@ -3,7 +3,7 @@ import type {Plugin} from 'postcss';
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import type {NamespaceOptions} from '../../utilities/sass';
 import {
   createInlineComment,
@@ -14,11 +14,6 @@ import {
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/types';
 
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
 export default function transformer(
   fileInfo: FileInfo,
   _: API,
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-font-family/v9-scss-replace-font-family.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-family/v9-scss-replace-font-family.ts
deleted file mode 100644
index 42299c304ee..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-font-family/v9-scss-replace-font-family.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
-import {
-  createInlineComment,
-  getFunctionArgs,
-  isSassFunction,
-  namespace,
-  StopWalkingFunctionNodes,
-} from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-export default function v9ScssReplaceFontFamily(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedFontFamily = namespace('font-family', options);
-
-  return {
-    postcssPlugin: 'v9-scss-replace-font-family',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      let needsComment = false;
-      let needsFix = false;
-      const parsedValue = valueParser(decl.value);
-
-      parsedValue.walk((node) => {
-        if (isSassFunction(namespacedFontFamily, node)) {
-          const args = getFunctionArgs(node);
-
-          // `font-family()` args reference:
-          // https://github.com/shopify/polaris/blob/2b14c0b60097f75d21df7eaa744dfaf84f8f53f7/documentation/guides/legacy-polaris-v8-public-api.scss#L945
-          const family = args[0] ?? 'base';
-
-          if (!isKeyOf(fontFamilyMap, family)) {
-            needsComment = true;
-            return StopWalkingFunctionNodes;
-          }
-
-          const fontFamilyCustomProperty = fontFamilyMap[family];
-
-          needsFix = true;
-          node.value = 'var';
-          node.nodes = [
-            {
-              type: 'word',
-              value: fontFamilyCustomProperty,
-              sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-              sourceEndIndex: fontFamilyCustomProperty.length,
-            },
-          ];
-
-          return StopWalkingFunctionNodes;
-        }
-      });
-
-      if (needsComment) {
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      }
-
-      if (needsFix) {
-        decl.value = parsedValue.toString();
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-const fontFamilyMap = {
-  base: '--p-font-family-sans',
-  monospace: '--p-font-family-mono',
-};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-font-size/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.test.ts
deleted file mode 100644
index 43d75e17c8a..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-font-size/tests/v9-scss-replace-font-size.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-font-size';
-const fixtures = ['v9-scss-replace-font-size', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-font-size/v9-scss-replace-font-size.ts b/polaris-migrator/src/migrations/v9-scss-replace-font-size/transform.ts
similarity index 96%
rename from polaris-migrator/src/migrations/v9-scss-replace-font-size/v9-scss-replace-font-size.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-font-size/transform.ts
index d71681977be..1924e6c349d 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-font-size/v9-scss-replace-font-size.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-font-size/transform.ts
@@ -1,11 +1,12 @@
 /* eslint-disable line-comment-position */
 
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   createInlineComment,
   getFunctionArgs,
@@ -13,10 +14,9 @@ import {
   namespace,
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9ScssReplaceFont(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-line-height/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.test.ts
deleted file mode 100644
index 8bd29c99cb4..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-line-height/tests/v9-scss-replace-line-height.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-line-height';
-const fixtures = ['v9-scss-replace-line-height', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-line-height/v9-scss-replace-line-height.ts b/polaris-migrator/src/migrations/v9-scss-replace-line-height/transform.ts
similarity index 95%
rename from polaris-migrator/src/migrations/v9-scss-replace-line-height/v9-scss-replace-line-height.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-line-height/transform.ts
index e37a8f4275f..5c3f42c4c54 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-line-height/v9-scss-replace-line-height.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-line-height/transform.ts
@@ -1,11 +1,12 @@
 /* eslint-disable line-comment-position */
 
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   createInlineComment,
   getFunctionArgs,
@@ -13,10 +14,9 @@ import {
   namespace,
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9ScssReplaceLineHeight(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-spacing/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.test.ts
deleted file mode 100644
index d0d0d492110..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-spacing/tests/v9-scss-replace-spacing.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-spacing';
-const fixtures = ['v9-scss-replace-spacing', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-spacing/transform.ts b/polaris-migrator/src/migrations/v9-scss-replace-spacing/transform.ts
similarity index 94%
rename from polaris-codemods/src/codemods/v9-scss-replace-spacing/transform.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-spacing/transform.ts
index 01e0dbb106f..a76d817083c 100644
--- a/polaris-codemods/src/codemods/v9-scss-replace-spacing/transform.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-spacing/transform.ts
@@ -3,7 +3,7 @@ import type {Plugin} from 'postcss';
 import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT, scss} from '../../utilities/constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import type {NamespaceOptions} from '../../utilities/sass';
 import {
   namespace,
@@ -18,11 +18,6 @@ import {
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/types';
 
-export const extensions = scss.extensions;
-export const options = {
-  ...scss.options,
-};
-
 export default function transformer(file: FileInfo, _: API, options: Options) {
   return postcss(plugin(options)).process(file.source, {
     syntax: require('postcss-scss'),
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-spacing/v9-scss-replace-spacing.ts b/polaris-migrator/src/migrations/v9-scss-replace-spacing/v9-scss-replace-spacing.ts
deleted file mode 100644
index c486b5d7d23..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-spacing/v9-scss-replace-spacing.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
-import type {Plugin} from 'postcss';
-import valueParser from 'postcss-value-parser';
-
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
-import {
-  namespace,
-  isSassFunction,
-  hasSassFunction,
-  hasNumericOperator,
-  hasSassInterpolation,
-  removeSassInterpolation,
-  hasNegativeSassInterpolation,
-  replaceNegativeSassInterpolation,
-  createInlineComment,
-} from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-const spacingMap = {
-  none: '--p-space-0',
-  'extra-tight': '--p-space-1',
-  tight: '--p-space-2',
-  'base-tight': '--p-space-3',
-  '': '--p-space-4',
-  base: '--p-space-4',
-  loose: '--p-space-5',
-  'extra-loose': '--p-space-8',
-};
-
-const processed = Symbol('processed');
-
-interface PluginOptions extends Options, NamespaceOptions {}
-
-const plugin = (options: PluginOptions = {}): Plugin => {
-  const namespacedSpacing = namespace('spacing', options);
-
-  return {
-    postcssPlugin: 'v9-replace-sass-spacing',
-    Declaration(decl) {
-      // @ts-expect-error - Skip if processed so we don't process it again
-      if (decl[processed]) return;
-
-      const parsedValue = valueParser(decl.value);
-
-      // Convert -#{spacing()} to -1 * #{spacing()}
-      if (hasNegativeSassInterpolation(decl.value)) {
-        replaceNegativeSassInterpolation(parsedValue);
-      }
-
-      // Remove #{} from spacing()
-      if (hasSassInterpolation(parsedValue.toString())) {
-        removeSassInterpolation(namespacedSpacing, parsedValue);
-      }
-
-      // Now we can check if the value is a spacing() function
-      if (!hasSassFunction(namespacedSpacing, parsedValue)) return;
-
-      parsedValue.walk((node) => {
-        if (!isSassFunction(namespacedSpacing, node)) return;
-
-        const spacing = node.nodes[0]?.value ?? '';
-
-        if (!isKeyOf(spacingMap, spacing)) return;
-        const spacingCustomProperty = spacingMap[spacing];
-
-        node.value = 'var';
-        node.nodes = [
-          {
-            type: 'word',
-            value: spacingCustomProperty,
-            sourceIndex: node.nodes[0]?.sourceIndex ?? 0,
-            sourceEndIndex: spacingCustomProperty.length,
-          },
-        ];
-      });
-
-      if (hasNumericOperator(parsedValue)) {
-        // Insert comment if the declaration value contains calculations
-        decl.before(createInlineComment(POLARIS_MIGRATOR_COMMENT));
-        decl.before(
-          createInlineComment(`${decl.prop}: ${parsedValue.toString()};`),
-        );
-      } else {
-        decl.value = parsedValue.toString();
-      }
-
-      // @ts-expect-error - Mark the declaration as processed
-      decl[processed] = true;
-    },
-  };
-};
-
-export default function v9ScssReplaceSpacing(
-  file: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(file.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-text-emphasis/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.test.ts
deleted file mode 100644
index 319c3b6ffea..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/tests/v9-scss-replace-text-emphasis.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-text-emphasis';
-const fixtures = ['v9-scss-replace-text-emphasis', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/v9-scss-replace-text-emphasis.ts b/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/transform.ts
similarity index 94%
rename from polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/v9-scss-replace-text-emphasis.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/transform.ts
index a3ab64b2b77..88adc9791b3 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/v9-scss-replace-text-emphasis.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-text-emphasis/transform.ts
@@ -1,26 +1,20 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 
-import {getNamespacePattern} from '../../utilities/sass';
 import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {getNamespacePattern} from '../../utilities/sass';
+import {isKeyOf} from '../../utilities/types';
 
-/** Mapping of static mixins to replacement declarations */
-const staticMixins = {
-  // Note: The below mixins do accept arguments, but the logic has
-  // since been removed from the mixins.
-  'text-emphasis-subdued': {
-    color: 'var(--p-text-subdued)',
-  },
-  'text-emphasis-strong': {
-    'font-weight': 'var(--p-font-weight-semibold)',
-  },
-  'text-emphasis-normal': {
-    color: 'var(--p-text)',
-    'font-weight': 'var(--p-font-weight-regular)',
-  },
-};
+export default function transformer(
+  fileInfo: FileInfo,
+  _: API,
+  options: Options,
+) {
+  return postcss(plugin(options)).process(fileInfo.source, {
+    syntax: require('postcss-scss'),
+  }).css;
+}
 
 interface PluginOptions extends Options, NamespaceOptions {}
 
@@ -53,12 +47,18 @@ const plugin = (options: PluginOptions = {}): Plugin => {
   };
 };
 
-export default function v9SassReplaceTextEmphasis(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
-}
+/** Mapping of static mixins to replacement declarations */
+const staticMixins = {
+  // Note: The below mixins do accept arguments, but the logic has
+  // since been removed from the mixins.
+  'text-emphasis-subdued': {
+    color: 'var(--p-text-subdued)',
+  },
+  'text-emphasis-strong': {
+    'font-weight': 'var(--p-font-weight-semibold)',
+  },
+  'text-emphasis-normal': {
+    color: 'var(--p-text)',
+    'font-weight': 'var(--p-font-weight-regular)',
+  },
+};
diff --git a/polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-scss-replace-z-index/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.test.ts b/polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.test.ts
deleted file mode 100644
index 1ccf2033362..00000000000
--- a/polaris-migrator/src/migrations/v9-scss-replace-z-index/tests/v9-scss-replace-z-index.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-scss-replace-z-index';
-const fixtures = ['v9-scss-replace-z-index', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-scss-replace-z-index/v9-scss-replace-z-index.ts b/polaris-migrator/src/migrations/v9-scss-replace-z-index/transform.ts
similarity index 97%
rename from polaris-migrator/src/migrations/v9-scss-replace-z-index/v9-scss-replace-z-index.ts
rename to polaris-migrator/src/migrations/v9-scss-replace-z-index/transform.ts
index 9669efac1c8..5e2a63d1ce7 100644
--- a/polaris-migrator/src/migrations/v9-scss-replace-z-index/v9-scss-replace-z-index.ts
+++ b/polaris-migrator/src/migrations/v9-scss-replace-z-index/transform.ts
@@ -1,48 +1,32 @@
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import type {API, FileInfo, Options} from 'jscodeshift';
-import valueParser from 'postcss-value-parser';
 import type {FunctionNode, Node} from 'postcss-value-parser';
+import valueParser from 'postcss-value-parser';
 
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   namespace,
   hasSassFunction,
   isSassFunction,
   hasNumericOperator,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+
+export default function transformer(
+  fileInfo: FileInfo,
+  _: API,
+  options: Options,
+) {
+  return postcss(plugin(options)).process(fileInfo.source, {
+    syntax: require('postcss-scss'),
+  }).css;
+}
 
 interface PluginOptions extends Options, NamespaceOptions {}
 
 const processed = Symbol('processed');
 
-const zIndexMap = {
-  content: '--p-z-1',
-  overlay: '--p-z-2',
-};
-
-const fixedElementStackingOrder = {
-  'global-ribbon': '--p-z-3',
-  'top-bar': '--p-z-4',
-  'context-bar': '--p-z-5',
-  'small-screen-loading-bar': '--p-z-6',
-  'nav-backdrop': '--p-z-7',
-  nav: '--p-z-8',
-  'skip-to-content': '--p-z-9',
-  backdrop: '--p-z-10',
-  modal: '--p-z-11',
-  toast: '--p-z-12',
-};
-
-function isValidElement<
-  MapType extends typeof zIndexMap | typeof fixedElementStackingOrder,
->(element: unknown, mapObj: MapType): element is keyof typeof mapObj {
-  return Object.keys(mapObj).includes(element as string);
-}
-
-const hasMoreThanOneArgument = (node: FunctionNode) => node.nodes.length > 1;
-
 const plugin = (options: PluginOptions = {}): Plugin => {
   const namespacedZIndex = namespace('z-index', options);
   const namespacedFixedElementStackingOrder = namespace(
@@ -126,12 +110,28 @@ const plugin = (options: PluginOptions = {}): Plugin => {
   };
 };
 
-export default function v9ScssReplaceZIndex(
-  fileInfo: FileInfo,
-  _: API,
-  options: Options,
-) {
-  return postcss(plugin(options)).process(fileInfo.source, {
-    syntax: require('postcss-scss'),
-  }).css;
+const zIndexMap = {
+  content: '--p-z-1',
+  overlay: '--p-z-2',
+};
+
+const fixedElementStackingOrder = {
+  'global-ribbon': '--p-z-3',
+  'top-bar': '--p-z-4',
+  'context-bar': '--p-z-5',
+  'small-screen-loading-bar': '--p-z-6',
+  'nav-backdrop': '--p-z-7',
+  nav: '--p-z-8',
+  'skip-to-content': '--p-z-9',
+  backdrop: '--p-z-10',
+  modal: '--p-z-11',
+  toast: '--p-z-12',
+};
+
+function isValidElement<
+  MapType extends typeof zIndexMap | typeof fixedElementStackingOrder,
+>(element: unknown, mapObj: MapType): element is keyof typeof mapObj {
+  return Object.keys(mapObj).includes(element as string);
 }
+
+const hasMoreThanOneArgument = (node: FunctionNode) => node.nodes.length > 1;
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.test.ts
deleted file mode 100644
index 88e034f11e7..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/tests/v9-styles-replace-custom-property-border.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-replace-custom-property-border';
-const fixtures = ['v9-styles-replace-custom-property-border'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/transform.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/transform.ts
similarity index 87%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/transform.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/transform.ts
index 9bace068c5e..6ddefc5a6ff 100644
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-border/transform.ts
+++ b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/transform.ts
@@ -2,9 +2,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/v9-styles-replace-custom-property-border.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/v9-styles-replace-custom-property-border.ts
deleted file mode 100644
index ae31b45d13a..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-border/v9-styles-replace-custom-property-border.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/* eslint-disable line-comment-position */
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-border-radius-base': '--p-border-radius-1',
-    '--p-border-radius-full': '--p-border-radius-half',
-    '--p-border-radius-slim': '--p-border-radius-05',
-    '--p-border-radius-wide': '--p-border-radius-2',
-    '--p-text-field-focus-ring-border-radius': '0.4375rem', // 7px
-  },
-};
-
-export default function v9StylesReplaceCustomPropertyBorder(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.test.ts
deleted file mode 100644
index 4893f81a3f2..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/tests/v9-styles-replace-custom-property-depth.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-replace-custom-property-depth';
-const fixtures = ['v9-styles-replace-custom-property-depth'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/transform.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/transform.ts
similarity index 90%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/transform.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/transform.ts
index e9afc7f0c1d..69a0d190fe5 100644
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-depth/transform.ts
+++ b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/v9-styles-replace-custom-property-depth.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/v9-styles-replace-custom-property-depth.ts
deleted file mode 100644
index 0bac0049863..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-depth/v9-styles-replace-custom-property-depth.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-button-drop-shadow': '--p-shadow-button',
-    '--p-button-inner-shadow': '--p-shadows-inset-button',
-    '--p-button-pressed-inner-shadow': '--p-shadows-inset-button-pressed',
-    '--p-card-shadow': '--p-shadow-card',
-    '--p-modal-shadow': '--p-shadow-modal',
-    '--p-popover-shadow': '--p-shadow-popover',
-    '--p-top-bar-shadow': '--p-shadow-top-bar',
-    '--p-shadow-from-ambient-light': 'rgba(23, 24, 24, 0.05)',
-    '--p-shadow-from-dim-light': 'rgba(0, 0, 0, 0.2)',
-    '--p-shadow-from-direct-light': 'rgba(0, 0, 0, 0.15)',
-  },
-};
-
-export default function v9StylesReplaceCustomPropertyDepth(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.test.ts
deleted file mode 100644
index abddab41e4f..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/tests/v9-styles-replace-custom-property-font.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-replace-custom-property-font';
-const fixtures = ['v9-styles-replace-custom-property-font'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/transform.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/transform.ts
similarity index 82%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/transform.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/transform.ts
index 4e60d5895ff..89f96227c15 100644
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-font/transform.ts
+++ b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/v9-styles-replace-custom-property-font.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/v9-styles-replace-custom-property-font.ts
deleted file mode 100644
index 7c213378a8f..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-font/v9-styles-replace-custom-property-font.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-badge-font-weight': '--p-font-weight-regular',
-    '--p-button-font-weight': '--p-font-weight-medium',
-  },
-};
-
-export default function v9StylesReplaceCustomPropertyFont(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.test.ts
deleted file mode 100644
index f3c5ce630de..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/tests/v9-styles-replace-custom-property-legacy.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-replace-custom-property-legacy';
-const fixtures = ['v9-styles-replace-custom-property-legacy'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/transform.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/transform.ts
similarity index 87%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/transform.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/transform.ts
index b232a115925..9484c205023 100644
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-legacy/transform.ts
+++ b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/v9-styles-replace-custom-property-legacy.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/v9-styles-replace-custom-property-legacy.ts
deleted file mode 100644
index df42a115193..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-legacy/v9-styles-replace-custom-property-legacy.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-override-none': 'none',
-    '--p-override-one': '1',
-    '--p-override-visible': 'visible',
-    '--p-override-zero': '0',
-    '--p-override-transparent': 'transparent',
-    '--p-non-null-content': '""',
-    '--p-icon-size': '--p-icon-size-small',
-    '--p-range-slider-thumb-scale': '1.5',
-    '--p-badge-mix-blend-mode': 'luminosity',
-  },
-};
-
-export default function v9StylesReplaceCustomPropertyLegacy(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.test.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.test.ts
deleted file mode 100644
index bafa7b29e71..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/tests/v9-styles-replace-custom-property-motion.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-replace-custom-property-motion';
-const fixtures = ['v9-styles-replace-custom-property-motion'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/transform.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/transform.ts
similarity index 81%
rename from polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/transform.ts
rename to polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/transform.ts
index 327642e0732..2b44c6d5679 100644
--- a/polaris-codemods/src/codemods/v9-styles-replace-custom-property-motion/transform.ts
+++ b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/transform.ts
@@ -1,9 +1,6 @@
 import type {FileInfo, API} from 'jscodeshift';
 
 import stylesReplaceCustomProperty from '../styles-replace-custom-property/transform';
-import {scss} from '../../utilities/constants';
-
-export const extensions = scss.extensions;
 
 export default function transformer(fileInfo: FileInfo, _: API) {
   return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
diff --git a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/v9-styles-replace-custom-property-motion.ts b/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/v9-styles-replace-custom-property-motion.ts
deleted file mode 100644
index 522ded9f00d..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-replace-custom-property-motion/v9-styles-replace-custom-property-motion.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type {FileInfo, API} from 'jscodeshift';
-
-import stylesReplaceCustomProperty from '../styles-replace-custom-property/styles-replace-custom-property';
-
-const replacementMaps = {
-  '/.+/': {
-    '--p-duration-1-0-0': '--p-duration-100',
-    '--p-duration-1-5-0': '--p-duration-150',
-  },
-};
-
-export default function v9StylesReplaceCustomPropertyMotion(
-  fileInfo: FileInfo,
-  _: API,
-) {
-  return stylesReplaceCustomProperty(fileInfo, _, {replacementMaps});
-}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-tokenize-font/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.test.ts
deleted file mode 100644
index c3f819e45c5..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-font/tests/v9-styles-tokenize-font.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-tokenize-font';
-const fixtures = ['v9-styles-tokenize-font', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-font/v9-styles-tokenize-font.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-font/transform.ts
similarity index 97%
rename from polaris-migrator/src/migrations/v9-styles-tokenize-font/v9-styles-tokenize-font.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-font/transform.ts
index 9ea039f07f3..84fb912a125 100644
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-font/v9-styles-tokenize-font.ts
+++ b/polaris-migrator/src/migrations/v9-styles-tokenize-font/transform.ts
@@ -1,10 +1,11 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin, AtRule} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 import {toPx} from '@shopify/polaris-tokens';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   createInlineComment,
   getFunctionArgs,
@@ -16,10 +17,9 @@ import {
   toTransformablePx,
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9StylesTokenizeFont(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-tokenize-motion/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.test.ts
deleted file mode 100644
index 02efa96adad..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-motion/tests/v9-styles-tokenize-motion.test.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-tokenize-motion';
-const fixtures = ['v9-styles-tokenize-motion'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-motion/v9-styles-tokenize-motion.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-motion/transform.ts
similarity index 99%
rename from polaris-migrator/src/migrations/v9-styles-tokenize-motion/v9-styles-tokenize-motion.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-motion/transform.ts
index 59763ef5efd..17cc24403dd 100644
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-motion/v9-styles-tokenize-motion.ts
+++ b/polaris-migrator/src/migrations/v9-styles-tokenize-motion/transform.ts
@@ -1,6 +1,6 @@
 import type {Declaration} from 'postcss';
-import valueParser from 'postcss-value-parser';
 import type {ParsedValue, Node} from 'postcss-value-parser';
+import valueParser from 'postcss-value-parser';
 
 import {
   isSassVariable,
@@ -10,60 +10,7 @@ import {
   createSassMigrator as v9StylesTokenizeMotion,
   setNodeValue,
 } from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
-
-const durationConstantsMap = {
-  '0': '--p-duration-0',
-  '0s': '--p-duration-0',
-  '0ms': '--p-duration-0',
-  '50ms': '--p-duration-50',
-  '0.05s': '--p-duration-50',
-  '100ms': '--p-duration-100',
-  '0.1s': '--p-duration-100',
-  '150ms': '--p-duration-150',
-  '0.15s': '--p-duration-150',
-  '200ms': '--p-duration-200',
-  '0.2s': '--p-duration-200',
-  '250ms': '--p-duration-250',
-  '0.25s': '--p-duration-250',
-  '300ms': '--p-duration-300',
-  '0.3s': '--p-duration-300',
-  '350ms': '--p-duration-350',
-  '0.35s': '--p-duration-350',
-  '400ms': '--p-duration-400',
-  '0.4s': '--p-duration-400',
-  '450ms': '--p-duration-450',
-  '0.45s': '--p-duration-450',
-  '500ms': '--p-duration-500',
-  '0.5s': '--p-duration-500',
-  '5s': '--p-duration-5000',
-};
-
-const easingFuncConstantsMap = {
-  linear: '--p-linear',
-  ease: '--p-ease',
-  'ease-in': '--p-ease-in',
-  'ease-out': '--p-ease-out',
-  'ease-in-out': '--p-ease-in-out',
-};
-
-// Per the spec for transition easing functions:
-// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
-const cssEasingBuiltinFuncs = [
-  'linear',
-  'ease',
-  'ease-in',
-  'ease-out',
-  'ease-in-out',
-  'cubic-bezier',
-  'step-start',
-  'step-end',
-  'steps',
-];
-
-function normalizeStringifiedNumber(number: string): string {
-  return Number(number).toString();
-}
+import {isKeyOf} from '../../utilities/types';
 
 export default v9StylesTokenizeMotion(
   'v9-replace-sass-transition',
@@ -296,3 +243,56 @@ export default v9StylesTokenizeMotion(
     };
   },
 );
+
+const durationConstantsMap = {
+  '0': '--p-duration-0',
+  '0s': '--p-duration-0',
+  '0ms': '--p-duration-0',
+  '50ms': '--p-duration-50',
+  '0.05s': '--p-duration-50',
+  '100ms': '--p-duration-100',
+  '0.1s': '--p-duration-100',
+  '150ms': '--p-duration-150',
+  '0.15s': '--p-duration-150',
+  '200ms': '--p-duration-200',
+  '0.2s': '--p-duration-200',
+  '250ms': '--p-duration-250',
+  '0.25s': '--p-duration-250',
+  '300ms': '--p-duration-300',
+  '0.3s': '--p-duration-300',
+  '350ms': '--p-duration-350',
+  '0.35s': '--p-duration-350',
+  '400ms': '--p-duration-400',
+  '0.4s': '--p-duration-400',
+  '450ms': '--p-duration-450',
+  '0.45s': '--p-duration-450',
+  '500ms': '--p-duration-500',
+  '0.5s': '--p-duration-500',
+  '5s': '--p-duration-5000',
+};
+
+const easingFuncConstantsMap = {
+  linear: '--p-linear',
+  ease: '--p-ease',
+  'ease-in': '--p-ease-in',
+  'ease-out': '--p-ease-out',
+  'ease-in-out': '--p-ease-in-out',
+};
+
+// Per the spec for transition easing functions:
+// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
+const cssEasingBuiltinFuncs = [
+  'linear',
+  'ease',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'cubic-bezier',
+  'step-start',
+  'step-end',
+  'steps',
+];
+
+function normalizeStringifiedNumber(number: string): string {
+  return Number(number).toString();
+}
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-tokenize-shape/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.test.ts
deleted file mode 100644
index 6569b3f148e..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-shape/tests/v9-styles-tokenize-shape.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-tokenize-shape';
-const fixtures = ['v9-styles-tokenize-shape', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-shape/v9-styles-tokenize-shape.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-shape/transform.ts
similarity index 97%
rename from polaris-migrator/src/migrations/v9-styles-tokenize-shape/v9-styles-tokenize-shape.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-shape/transform.ts
index 962e3568f87..b8da1a04307 100644
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-shape/v9-styles-tokenize-shape.ts
+++ b/polaris-migrator/src/migrations/v9-styles-tokenize-shape/transform.ts
@@ -1,9 +1,10 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {Plugin} from 'postcss';
+import postcss from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../../constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import type {NamespaceOptions} from '../../utilities/sass';
 import {
   getFunctionArgs,
   isNumericOperator,
@@ -14,10 +15,9 @@ import {
   StopWalkingFunctionNodes,
   createInlineComment,
 } from '../../utilities/sass';
-import type {NamespaceOptions} from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
-export default function v9StylesTokenizeShape(
+export default function transformer(
   fileInfo: FileInfo,
   _: API,
   options: Options,
diff --git a/polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/transform.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/transform.test.ts
similarity index 100%
rename from polaris-codemods/src/codemods/v9-styles-tokenize-space/tests/transform.test.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/transform.test.ts
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.test.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.test.ts
deleted file mode 100644
index 66dd6c0b4a1..00000000000
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-space/tests/v9-styles-tokenize-space.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = 'v9-styles-tokenize-space';
-const fixtures = ['v9-styles-tokenize-space', 'with-namespace'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-    options: {
-      namespace: fixture.includes('with-namespace')
-        ? 'legacy-polaris-v8'
-        : undefined,
-    },
-  });
-}
diff --git a/polaris-migrator/src/migrations/v9-styles-tokenize-space/v9-styles-tokenize-space.ts b/polaris-migrator/src/migrations/v9-styles-tokenize-space/transform.ts
similarity index 98%
rename from polaris-migrator/src/migrations/v9-styles-tokenize-space/v9-styles-tokenize-space.ts
rename to polaris-migrator/src/migrations/v9-styles-tokenize-space/transform.ts
index d6d27602268..ff75cf58e76 100644
--- a/polaris-migrator/src/migrations/v9-styles-tokenize-space/v9-styles-tokenize-space.ts
+++ b/polaris-migrator/src/migrations/v9-styles-tokenize-space/transform.ts
@@ -10,7 +10,7 @@ import {
   StopWalkingFunctionNodes,
   createSassMigrator as v9StylesTokenizeSpace,
 } from '../../utilities/sass';
-import {isKeyOf} from '../../utilities/type-guards';
+import {isKeyOf} from '../../utilities/types';
 
 export default v9StylesTokenizeSpace(
   'v9-styles-tokenize-space',
diff --git a/polaris-migrator/src/types.ts b/polaris-migrator/src/types.ts
deleted file mode 100644
index a6a1c0ea6bf..00000000000
--- a/polaris-migrator/src/types.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export type AlphabetUppercase =
-  | 'A'
-  | 'B'
-  | 'C'
-  | 'D'
-  | 'E'
-  | 'F'
-  | 'G'
-  | 'H'
-  | 'I'
-  | 'J'
-  | 'K'
-  | 'L'
-  | 'M'
-  | 'N'
-  | 'O'
-  | 'P'
-  | 'Q'
-  | 'R'
-  | 'S'
-  | 'T'
-  | 'U'
-  | 'V'
-  | 'W'
-  | 'X'
-  | 'Y'
-  | 'Z';
-
-export type AlphabetLowercase =
-  | 'a'
-  | 'b'
-  | 'c'
-  | 'd'
-  | 'e'
-  | 'f'
-  | 'g'
-  | 'h'
-  | 'i'
-  | 'j'
-  | 'k'
-  | 'l'
-  | 'm'
-  | 'n'
-  | 'o'
-  | 'p'
-  | 'q'
-  | 'r'
-  | 's'
-  | 't'
-  | 'u'
-  | 'v'
-  | 'w'
-  | 'x'
-  | 'y'
-  | 'z';
diff --git a/polaris-codemods/src/utilities/check.ts b/polaris-migrator/src/utilities/check.ts
similarity index 100%
rename from polaris-codemods/src/utilities/check.ts
rename to polaris-migrator/src/utilities/check.ts
diff --git a/polaris-migrator/src/utilities/constants.ts b/polaris-migrator/src/utilities/constants.ts
new file mode 100644
index 00000000000..fb720341da5
--- /dev/null
+++ b/polaris-migrator/src/utilities/constants.ts
@@ -0,0 +1,2 @@
+export const POLARIS_MIGRATOR_COMMENT =
+  'polaris-migrator: Unable to migrate the following expression. Please upgrade manually.';
diff --git a/polaris-migrator/src/utilities/imports.ts b/polaris-migrator/src/utilities/imports.ts
index 4fa5b3a33da..36733a18ffd 100644
--- a/polaris-migrator/src/utilities/imports.ts
+++ b/polaris-migrator/src/utilities/imports.ts
@@ -1,5 +1,5 @@
-import type core from 'jscodeshift';
 import type {Collection} from 'jscodeshift';
+import type core from 'jscodeshift';
 
 export function hasImportDeclaration(
   j: core.JSCodeshift,
@@ -221,10 +221,16 @@ export function removeImportSpecifier(
   getImportSpecifier(j, source, specifier, sourcePath).remove();
 }
 
+interface NormalizeImportSourcePathsOptions {
+  relative?: boolean;
+  from: string;
+  to: string;
+}
+
 export function normalizeImportSourcePaths(
   j: core.JSCodeshift,
   source: Collection<any>,
-  options = {
+  options: NormalizeImportSourcePathsOptions = {
     relative: false,
     from: '',
     to: '',
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index 39adf0231ae..e5eda149aab 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -1,5 +1,5 @@
-import type core from 'jscodeshift';
 import type {ASTPath, Collection, JSXAttribute, JSXElement} from 'jscodeshift';
+import type core from 'jscodeshift';
 
 export function getJSXAttributes(
   j: core.JSCodeshift,
diff --git a/polaris-codemods/src/utilities/matches.ts b/polaris-migrator/src/utilities/matches.ts
similarity index 100%
rename from polaris-codemods/src/utilities/matches.ts
rename to polaris-migrator/src/utilities/matches.ts
diff --git a/polaris-migrator/src/utilities/matchesStringOrRegExp.ts b/polaris-migrator/src/utilities/matchesStringOrRegExp.ts
deleted file mode 100644
index 24a7b5c1d0e..00000000000
--- a/polaris-migrator/src/utilities/matchesStringOrRegExp.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Compares a string to a second value that, if it fits a certain convention,
- * is converted to a regular expression before the comparison.
- * If it doesn't fit the convention, then two strings are compared.
- *
- * Any strings starting and ending with `/` are interpreted
- * as regular expressions.
- */
-export function matchesStringOrRegExp(
-  input: string,
-  comparison: string | RegExp | (string | RegExp)[],
-): false | {match: string; pattern: string | RegExp} {
-  if (!Array.isArray(input)) {
-    return testAgainstStringOrRegExpOrArray(input, comparison);
-  }
-
-  for (const inputItem of input) {
-    const testResult = testAgainstStringOrRegExpOrArray(inputItem, comparison);
-
-    if (testResult) {
-      return testResult;
-    }
-  }
-
-  return false;
-}
-
-function testAgainstStringOrRegExpOrArray(
-  value: string,
-  comparison: string | RegExp | (string | RegExp)[],
-) {
-  if (!Array.isArray(comparison)) {
-    return testAgainstStringOrRegExp(value, comparison);
-  }
-
-  for (const comparisonItem of comparison) {
-    const testResult = testAgainstStringOrRegExp(value, comparisonItem);
-
-    if (testResult) {
-      return testResult;
-    }
-  }
-
-  return false;
-}
-
-function testAgainstStringOrRegExp(value: string, comparison: string | RegExp) {
-  // If it's a RegExp, test directly
-  if (comparison instanceof RegExp) {
-    return comparison.test(value) ? {match: value, pattern: comparison} : false;
-  }
-
-  // Check if it's RegExp in a string
-  const firstComparisonChar = comparison[0];
-  const lastComparisonChar = comparison[comparison.length - 1];
-  const secondToLastComparisonChar = comparison[comparison.length - 2];
-
-  const comparisonIsRegex =
-    firstComparisonChar === '/' &&
-    (lastComparisonChar === '/' ||
-      (secondToLastComparisonChar === '/' && lastComparisonChar === 'i'));
-
-  const hasCaseInsensitiveFlag =
-    comparisonIsRegex && lastComparisonChar === 'i';
-
-  // If so, create a new RegExp from it
-  if (comparisonIsRegex) {
-    const valueMatches = hasCaseInsensitiveFlag
-      ? new RegExp(comparison.slice(1, -2), 'i').test(value)
-      : new RegExp(comparison.slice(1, -1)).test(value);
-
-    return valueMatches ? {match: value, pattern: comparison} : false;
-  }
-
-  // Otherwise, it's a string. Do a strict comparison
-  return value === comparison ? {match: value, pattern: comparison} : false;
-}
diff --git a/polaris-migrator/src/utilities/sass.ts b/polaris-migrator/src/utilities/sass.ts
index 12f998c0d7c..40fdde08445 100644
--- a/polaris-migrator/src/utilities/sass.ts
+++ b/polaris-migrator/src/utilities/sass.ts
@@ -1,5 +1,4 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
-import postcss from 'postcss';
 import type {
   Root,
   Result,
@@ -11,16 +10,17 @@ import type {
   Comment as PostCSSComment,
   AtRule,
 } from 'postcss';
-import valueParser from 'postcss-value-parser';
+import postcss from 'postcss';
 import type {
   Node,
   ParsedValue,
   FunctionNode,
   Dimension,
 } from 'postcss-value-parser';
+import valueParser from 'postcss-value-parser';
 import {toPx, getCustomPropertyNames, tokens} from '@shopify/polaris-tokens';
 
-import {POLARIS_MIGRATOR_COMMENT} from '../constants';
+import {POLARIS_MIGRATOR_COMMENT} from './constants';
 
 const defaultNamespace = '';
 
diff --git a/polaris-migrator/src/utilities/testUtils.ts b/polaris-migrator/src/utilities/testUtils.ts
deleted file mode 100644
index 9b05b8520bd..00000000000
--- a/polaris-migrator/src/utilities/testUtils.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/* eslint-disable jest/no-export, jest/valid-title */
-import fs from 'fs';
-import path from 'path';
-
-import jscodeshift from 'jscodeshift';
-import type {FileInfo} from 'jscodeshift';
-import prettier from 'prettier';
-
-export default async function applyTransform(
-  transform: any,
-  input: FileInfo,
-  options?: {[option: string]: any},
-) {
-  // Handle ES6 modules using default export for the transform
-  const transformer = transform.default ? transform.default : transform;
-  const output = await transformer(
-    input,
-    {
-      jscodeshift: jscodeshift.withParser('tsx'),
-      stats: () => {},
-    },
-    options || {},
-  );
-
-  return (output || '').trim();
-}
-
-interface ParserExtensionMap {
-  [key: string]: prettier.BuiltInParserName;
-}
-
-const parserExtensionMap: ParserExtensionMap = {
-  tsx: 'typescript',
-  scss: 'scss',
-};
-
-interface TestArgs {
-  fixture: string;
-  migration: string;
-  extension?: string;
-  options?: {[option: string]: any};
-}
-
-export function check(
-  dirName: string,
-  {fixture, migration, extension = 'tsx', options = {}}: TestArgs,
-) {
-  describe(migration, () => {
-    it(fixture, async () => {
-      const fixtureDir = path.join(dirName);
-      const inputPath = path.join(fixtureDir, `${fixture}.input.${extension}`);
-      const parser = parserExtensionMap[extension];
-      const source = fs.readFileSync(inputPath, 'utf8');
-      const expected = fs.readFileSync(
-        path.join(fixtureDir, `${fixture}.output.${extension}`),
-        'utf8',
-      );
-      // Assumes transform is one level up from tests directory
-      const module = await import(path.join(dirName, '..', migration));
-      const output = await applyTransform(
-        {...module},
-        {source, path: inputPath},
-        options,
-      );
-
-      // Format output and expected with prettier for white spaces and line breaks consistency
-      expect(prettier.format(output, {parser})).toBe(
-        prettier.format(expected, {parser}),
-      );
-    });
-  });
-}
diff --git a/polaris-migrator/src/utilities/tests/sass.test.ts b/polaris-migrator/src/utilities/tests/sass.test.ts
deleted file mode 100644
index e219b798371..00000000000
--- a/polaris-migrator/src/utilities/tests/sass.test.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import valueParser from 'postcss-value-parser';
-
-import {createInlineComment, getFunctionArgs} from '../sass';
-
-describe('createInlineComment', () => {
-  it('inline and contains starting space', () => {
-    const text = 'padding: var(--p-space-4);';
-    const comment = createInlineComment(text);
-    expect(comment.raws.inline).toBe(true);
-    expect(comment.raws.left).toBe(' ');
-  });
-
-  it('formats single line text', () => {
-    const text = 'padding: var(--p-space-4);';
-    const comment = createInlineComment(text);
-    expect(comment.text).toStrictEqual(text);
-  });
-
-  it('formats multiple line text', () => {
-    const text = `
-      padding: calc(-1 * var(--p-space-4))
-        var(--p-space-4);
-      `;
-    const formatted = 'padding: calc(-1 * var(--p-space-4)) var(--p-space-4);';
-    const comment = createInlineComment(text);
-    expect(comment.text).toStrictEqual(formatted);
-  });
-});
-
-describe('getFunctionArgs', () => {
-  it('zero args', () => {
-    const node = getFunctionNode('rem()');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual([]);
-  });
-
-  it('one arg', () => {
-    const node = getFunctionNode('rem(1px)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px']);
-  });
-
-  it('one arg (trailing comma)', () => {
-    const node = getFunctionNode('rem(1px,)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px']);
-  });
-
-  it('two args', () => {
-    const node = getFunctionNode('rem(1px, 2px)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', '2px']);
-  });
-
-  it('three args', () => {
-    const node = getFunctionNode('rem(1px, 2px, 3px)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', '2px', '3px']);
-  });
-
-  it('nested functions', () => {
-    const node = getFunctionNode('rem(1px, func(2px), func(func(3px)))');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', 'func(2px)', 'func(func(3px))']);
-  });
-
-  it('interpolated args', () => {
-    const node = getFunctionNode('rem(1px, #{2 + $var}, $var)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', '#{2 + $var}', '$var']);
-  });
-
-  it('trimmed', () => {
-    const node = getFunctionNode('rem( 1px , \n func( 2px) , \t #{ $var })');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', 'func( 2px)', '#{ $var }']);
-  });
-
-  it('nested comments', () => {
-    const node = getFunctionNode('rem(1px, /* comment */ 2px)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', '/* comment */ 2px']);
-  });
-
-  it('separates args by comma dividers', () => {
-    const node = getFunctionNode('rem(1px, 2/3, 4:5)');
-    const args = getFunctionArgs(node);
-    expect(args).toStrictEqual(['1px', '2/3', '4:5']);
-  });
-});
-
-/** Test utility to quickly access the first `valueParser.FunctionNode` */
-function getFunctionNode(value: string): valueParser.FunctionNode {
-  const parsedValue = valueParser(value);
-
-  if (parsedValue.nodes[0]?.type !== 'function') {
-    throw new Error(`Expected ${value} to be a function`);
-  }
-
-  return parsedValue.nodes[0];
-}
diff --git a/polaris-migrator/src/utilities/type-guards.ts b/polaris-migrator/src/utilities/type-guards.ts
deleted file mode 100644
index 11cf0f3871d..00000000000
--- a/polaris-migrator/src/utilities/type-guards.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABDAzgaQKYE8DywA8AKohgB5QZgAmKicARgFYbQB8AFA4wFyKEA0iANbYA-LwCGYLAEpeIrMloK4wPogDeAKESIAThigg9SHExZQAdAAc9cKPazWMlgBYSUOAO5gACnec9KCxLCAkAG3DOJkEFRA9EfzhA4MxZLQBfLS0IBBQoOiZEAF5NRGA4OF4AcnoJPWrBACZeKD0QDEQM+NpcsHycvIKFXnAhMDgfEsRq6uyuAG0FAF1smDV2VDS8aMZY7BkZTR1hbBOAenPEAD1RbN0+-MQANwiO6cWVi6vdG7usoA
-export function isKeyOf<T extends object>(
-  obj: T,
-  key?: unknown,
-): key is keyof T {
-  return Object.prototype.hasOwnProperty.call(obj, key as PropertyKey);
-}
diff --git a/polaris-migrator/src/utilities/types.ts b/polaris-migrator/src/utilities/types.ts
new file mode 100644
index 00000000000..514e66dca2a
--- /dev/null
+++ b/polaris-migrator/src/utilities/types.ts
@@ -0,0 +1,65 @@
+// https://www.typescriptlang.org/play?#code/GYVwdgxgLglg9mABDAzgaQKYE8DywA8AKohgB5QZgAmKicARgFYbQB8AFA4wFyKEA0iANbYA-LwCGYLAEpeIrMloK4wPogDeAKESIAThigg9SHExZQAdAAc9cKPazWMlgBYSUOAO5gACnec9KCxLCAkAG3DOJkEFRA9EfzhA4MxZLQBfLS0IBBQoOiZEAF5NRGA4OF4AcnoJPWrBACZeKD0QDEQM+NpcsHycvIKFXnAhMDgfEsRq6uyuAG0FAF1smDV2VDS8aMZY7BkZTR1hbBOAenPEAD1RbN0+-MQANwiO6cWVi6vdG7usoA
+export function isKeyOf<T extends object>(
+  obj: T,
+  key?: unknown,
+): key is keyof T {
+  return Object.prototype.hasOwnProperty.call(obj, key as PropertyKey);
+}
+
+export type AlphabetUppercase =
+  | 'A'
+  | 'B'
+  | 'C'
+  | 'D'
+  | 'E'
+  | 'F'
+  | 'G'
+  | 'H'
+  | 'I'
+  | 'J'
+  | 'K'
+  | 'L'
+  | 'M'
+  | 'N'
+  | 'O'
+  | 'P'
+  | 'Q'
+  | 'R'
+  | 'S'
+  | 'T'
+  | 'U'
+  | 'V'
+  | 'W'
+  | 'X'
+  | 'Y'
+  | 'Z';
+
+export type AlphabetLowercase =
+  | 'a'
+  | 'b'
+  | 'c'
+  | 'd'
+  | 'e'
+  | 'f'
+  | 'g'
+  | 'h'
+  | 'i'
+  | 'j'
+  | 'k'
+  | 'l'
+  | 'm'
+  | 'n'
+  | 'o'
+  | 'p'
+  | 'q'
+  | 'r'
+  | 's'
+  | 't'
+  | 'u'
+  | 'v'
+  | 'w'
+  | 'x'
+  | 'y'
+  | 'z';
+
+export type Alias = AlphabetLowercase | AlphabetUppercase;
diff --git a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.scss.hbs b/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.scss.hbs
deleted file mode 100644
index 160f204f870..00000000000
--- a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.scss.hbs	
+++ /dev/null
@@ -1,3 +0,0 @@
-.my-class {
-  color: hello();
-}
diff --git a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.scss.hbs b/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.scss.hbs
deleted file mode 100644
index b58db76a7b3..00000000000
--- a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.scss.hbs	
+++ /dev/null
@@ -1,3 +0,0 @@
-.my-class {
-  color: world();
-}
diff --git a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs b/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs
deleted file mode 100644
index a6f8fce88bd..00000000000
--- a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs	
+++ /dev/null
@@ -1,12 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = '{{kebabCase migrationName}}';
-const fixtures = ['{{kebabCase migrationName}}'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: 'scss',
-  });
-}
diff --git a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs b/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs
deleted file mode 100644
index 214c559ab08..00000000000
--- a/polaris-migrator/templates/scss-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs	
+++ /dev/null
@@ -1,55 +0,0 @@
-import valueParser from 'postcss-value-parser';
-
-import {
-  isSassFunction,
-  StopWalkingFunctionNodes,
-  createSassMigrator,
-} from '../../utilities/sass';
-import type {PolarisMigrator} from '../../utilities/sass';
-
-const {{camelCase migrationName}}: PolarisMigrator = (
-  _,
-  // options will be passed in from cli / config.
-  {methods /* , options */},
-  // Use context.fix to change behaviour based on if the user has passed the
-  // `--fix` flag (always true for `polaris-migrator` CLI).
-  context,
-) => {
-  return (root) => {
-    methods.walkDecls(root, (decl) => {
-      // Using the parsedValue allows easy detection of individual functions and
-      // properties. Particularly useful when dealing with shorthand
-      // declarations such as `border`, `padding`, etc.
-      const parsedValue = valueParser(decl.value);
-      parsedValue.walk((node) => {
-        if (isSassFunction('hello', node)) {
-          if (context.fix) {
-            // When fixing, we mutate the node directly.
-            node.value = 'world';
-          } else {
-            // When not fixing, emit a report which will be aggregated and shown
-            // to the user once all migrations are run.
-            methods.report({
-              node: decl,
-              severity: 'error',
-              message:
-                'Method hello() is no longer supported. Please migrate to world().',
-            });
-          }
-
-          // We do not want to recursively walk the function's arguments.
-          return StopWalkingFunctionNodes;
-        }
-      });
-
-      if (context.fix) {
-        decl.value = parsedValue.toString();
-      }
-    });
-  };
-};
-
-export default createSassMigrator(
-  '{{kebabCase migrationName}}',
-  {{camelCase migrationName}}
-);
diff --git a/polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.input.scss.hbs b/polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.input.scss.hbs
similarity index 100%
rename from polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.input.scss.hbs
rename to polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.input.scss.hbs
diff --git a/polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.output.scss.hbs b/polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.output.scss.hbs
similarity index 100%
rename from polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.output.scss.hbs
rename to polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.output.scss.hbs
diff --git a/polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.test.ts.hbs b/polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.test.ts.hbs
similarity index 100%
rename from polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/tests/transform.test.ts.hbs
rename to polaris-migrator/templates/scss/{{kebabCase transformName}}/tests/transform.test.ts.hbs
diff --git a/polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/transform.ts.hbs b/polaris-migrator/templates/scss/{{kebabCase transformName}}/transform.ts.hbs
similarity index 87%
rename from polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/transform.ts.hbs
rename to polaris-migrator/templates/scss/{{kebabCase transformName}}/transform.ts.hbs
index 38bb90e4d29..48578f81fe5 100644
--- a/polaris-codemods/templates/scss-codemod/{{kebabCase transformName}}/transform.ts.hbs	
+++ b/polaris-migrator/templates/scss/{{kebabCase transformName}}/transform.ts.hbs	
@@ -2,7 +2,7 @@ import type {FileInfo, API, Options} from 'jscodeshift';
 import postcss, {Plugin} from 'postcss';
 import valueParser from 'postcss-value-parser';
 
-import {scss, POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
 import {
   NamespaceOptions,
   namespace,
@@ -10,11 +10,6 @@ import {
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/type-guards';
 
-export const extensions = scss.extensions
-export const options = {
-  ...scss.options
-}
-
 export default function transformer(
   file: FileInfo,
   _: API,
diff --git a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.tsx.hbs b/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.tsx.hbs
deleted file mode 100644
index 479c6695509..00000000000
--- a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.input.tsx.hbs	
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export function App() {
-  return <div>hello</div>;
-}
diff --git a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.tsx.hbs b/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.tsx.hbs
deleted file mode 100644
index 2cbb2e794a8..00000000000
--- a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.output.tsx.hbs	
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export function App() {
-  return <div>world</div>;
-}
diff --git a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs b/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs
deleted file mode 100644
index a79632a9459..00000000000
--- a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/tests/{{kebabCase migrationName}}.test.ts.hbs	
+++ /dev/null
@@ -1,11 +0,0 @@
-import {check} from '../../../utilities/testUtils';
-
-const migration = '{{kebabCase migrationName}}';
-const fixtures = ['{{kebabCase migrationName}}'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-  });
-}
diff --git a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs b/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs
deleted file mode 100644
index 1ac08e2f64d..00000000000
--- a/polaris-migrator/templates/typescript-migration/{{kebabCase migrationName}}/{{kebabCase migrationName}}.ts.hbs	
+++ /dev/null
@@ -1,18 +0,0 @@
-import type {API, FileInfo} from 'jscodeshift';
-
-export default function {{camelCase migrationName}}(
-  fileInfo: FileInfo,
-  {jscodeshift: j}: API,
-) {
-  const source = j(fileInfo.source);
-
-  source.findJSXElements('div').forEach((element) => {
-    element.replace(
-      j.jsxElement(element.node.openingElement, element.node.closingElement, [
-        j.stringLiteral('world'),
-      ]),
-    );
-  });
-
-  return source.toSource();
-}
diff --git a/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.input.tsx.hbs b/polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.input.tsx.hbs
similarity index 100%
rename from polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.input.tsx.hbs
rename to polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.input.tsx.hbs
diff --git a/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.output.tsx.hbs b/polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.output.tsx.hbs
similarity index 100%
rename from polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.output.tsx.hbs
rename to polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.output.tsx.hbs
diff --git a/polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.test.ts.hbs b/polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.test.ts.hbs
similarity index 100%
rename from polaris-codemods/templates/typescript-codemod/{{kebabCase transformName}}/tests/transform.test.ts.hbs
rename to polaris-migrator/templates/typescript/{{kebabCase transformName}}/tests/transform.test.ts.hbs
diff --git a/polaris-migrator/templates/typescript/{{kebabCase transformName}}/transform.ts.hbs b/polaris-migrator/templates/typescript/{{kebabCase transformName}}/transform.ts.hbs
new file mode 100644
index 00000000000..c8d157132bb
--- /dev/null
+++ b/polaris-migrator/templates/typescript/{{kebabCase transformName}}/transform.ts.hbs	
@@ -0,0 +1,7 @@
+import type {API, FileInfo} from 'jscodeshift'; export const extensions =
+typescript.extensions; export const options = {}; export default function
+transformer( fileInfo: FileInfo, {jscodeshift: j}: API, _: Options, ) { const
+source = j(fileInfo.source); source.findJSXElements('div').forEach((element) =>
+{ element.replace( j.jsxElement(element.node.openingElement,
+element.node.closingElement, [ j.stringLiteral('world'), ]), ); }); return
+source.toSource(); }
diff --git a/polaris.shopify.com/content/tools/polaris-cli.md b/polaris.shopify.com/content/tools/polaris-cli.md
deleted file mode 100644
index 16d7cca7efd..00000000000
--- a/polaris.shopify.com/content/tools/polaris-cli.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Polaris CLI
-navTitle: CLI
-description: Commands for building Shopify Apps with Polaris.
-icon: CodeMajor
-order: 2
-keywords:
-  - cli
-  - shopify cli
-  - polaris cli
----
-
-[<img src="https://img.shields.io/npm/v/@shopify/polaris-cli.svg?labelColor=f9f9f9&color=dcf5f0" alt="npm version" style="width: 95px" />](https://www.npmjs.com/package/@shopify/polaris-cli)
-
-## Installation
-
-You can install the Polaris plugin for the Shopify CLI by running the following command:
-
-```sh
-shopify plugins install @shopify/polaris-cli
-```
-
-See the [Shopify CLI command syntax](https://shopify.dev/apps/tools/cli/commands#command-syntax) section for how to execute commands using other package managers (ex: npm, Yarn, or pnpm).
-
-## Commands
-
-### migrate
-
-Executes the [Polaris Migrator](/tools/polaris-migrator). This makes version upgrades faster and safer by performing codemod transformations to your codebase. You can apply any of the [available Polaris migrations](/tools/polaris-migrator#migrations) using the [Shopify CLI](https://shopify.dev/apps/tools/cli/commands) `migrate` command.
-
-```
-shopify polaris migrate <migration> <path>
-```
-
-- `migration` - name of migration
-- `path` - files or directory to perform migration
-
-The following is a complete CLI command example using `npm`:
-
-```
-npm run shopify polaris migrate v10-react-replace-text-components 'src/components/**/*.tsx'
-```
-
-See the [Shopify CLI command syntax](https://shopify.dev/apps/tools/cli/commands#command-syntax) section for how to execute commands using other package managers.
-
-#### Flags
-
-| Flag      | Description                                          |
-| --------- | ---------------------------------------------------- |
-| `--dry`   | Do a dry-run, no code will be edited                 |
-| `--print` | Prints the changed output for comparison             |
-| `--force` | Bypass Git safety checks and forcibly run migrations |
diff --git a/tsconfig.json b/tsconfig.json
index e29cdcdc450..5c5ee516d79 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,6 @@
 {
   "files": [],
   "references": [
-    {"path": "./polaris-cli"},
-    {"path": "./polaris-codemods"},
     {"path": "./polaris-for-vscode"},
     {"path": "./polaris-migrator"},
     {"path": "./polaris-react"},
diff --git a/yarn.lock b/yarn.lock
index eb7576719c1..6faff18d001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2196,7 +2196,7 @@
     widest-line "^3.1.0"
     wrap-ansi "^7.0.0"
 
-"@oclif/core@^1.13.10", "@oclif/core@^1.2.0", "@oclif/core@^1.3.6":
+"@oclif/core@^1.2.0", "@oclif/core@^1.3.6":
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/@oclif/core/-/core-1.16.1.tgz#39663c903f859f8e37b375d7466b92b4394e1c8d"
   integrity sha512-MfzgqcWzWymndd934pd52JAwy0RIgWWYnC0Ed7bxUVYWF4HFb3KmsE7x9/QBP9392Q14vxXi2GNLHboM/5vaDA==
@@ -3826,14 +3826,6 @@
     ast-types "^0.14.1"
     recast "^0.20.3"
 
-"@types/jscodeshift@^0.11.6":
-  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/@types/jscodeshift/-/jscodeshift-0.11.6.tgz#9ced613c8dd92559000fb671d151685ea8e420c7"
-  integrity sha512-3lJ4DajWkk4MZ1F7q+1C7jE0z0xOtbu0VU/Kg3wdPq2DUvJjySSlu3B5Q/bICrTxugLhONBO7inRUWsymOID/A==
-  dependencies:
-    ast-types "^0.14.1"
-    recast "^0.20.3"
-
 "@types/json-buffer@~3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/json-buffer/-/json-buffer-3.0.0.tgz#85c1ff0f0948fc159810d4b5be35bf8c20875f64"
@@ -15156,25 +15148,6 @@ node-plop@^0.31.0:
     title-case "^3.0.3"
     upper-case "^2.0.2"
 
-node-plop@^0.31.1:
-  version "0.31.1"
-  resolved "https://registry.yarnpkg.com/node-plop/-/node-plop-0.31.1.tgz#20dd03e6ffe6d5c56bc38fc0b04df3475c33c7d5"
-  integrity sha512-qmXJJt3YETFt/e0dtMADVpvck6EvN01Jig086o+J3M6G++mWA7iJ3Pqz4m4kvlynh73Iz2/rcZzxq7xTiF+aIQ==
-  dependencies:
-    "@types/inquirer" "^8.2.1"
-    change-case "^4.1.2"
-    del "^6.0.0"
-    globby "^13.1.1"
-    handlebars "^4.4.3"
-    inquirer "^8.2.2"
-    isbinaryfile "^4.0.8"
-    lodash.get "^4.4.2"
-    lower-case "^2.0.2"
-    mkdirp "^1.0.4"
-    resolve "^1.20.0"
-    title-case "^3.0.3"
-    upper-case "^2.0.2"
-
 node-releases@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae"
@@ -16441,11 +16414,6 @@ plop-dir@^0.0.5:
   resolved "https://registry.yarnpkg.com/plop-dir/-/plop-dir-0.0.5.tgz#b77e89dff7c6598a76fdf61eca05698ddb758b74"
   integrity sha512-F1ZOmkM/0DNSPGLTFlt7WJSqjDX0WEh5gmYXMjKG2bgQWCUbuy6soW21H67ZlnWHB4Noj/YeBP1MBeFmmyKhSQ==
 
-plop-dir@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/plop-dir/-/plop-dir-0.1.0.tgz#22b5c792cf3a1d0c64cbde11c13886ba771f3f4b"
-  integrity sha512-qDtBWuUlY5l6WMSb+DmZqkyxktZYnukEMUVpEHXqspTAQH263LLw5lUtwJhoZjlX6VtYX5A4IOehxr1BOygxOw==
-
 plop@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/plop/-/plop-3.1.1.tgz#7d86d16f829bd509cc76e2a0ff1c67ebf8d22067"
@@ -16460,20 +16428,6 @@ plop@^3.1.1:
     ora "^6.0.1"
     v8flags "^4.0.0"
 
-plop@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/plop/-/plop-3.1.2.tgz#9bf738def2961d02b5a403b7f2a31f375b49c1e0"
-  integrity sha512-39SOtQ3WlePXSNqKqAh/QlUSHXHO25iCnyCO3Qs/9UzPVmwVledRTDGvPd2csh+JnHVXz4c63F6fBwdqZHgbUg==
-  dependencies:
-    "@types/liftoff" "^4.0.0"
-    chalk "^5.0.1"
-    interpret "^2.2.0"
-    liftoff "^4.0.0"
-    minimist "^1.2.6"
-    node-plop "^0.31.1"
-    ora "^6.0.1"
-    v8flags "^4.0.0"
-
 pluralize@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
@@ -16830,11 +16784,6 @@ postcss-scss@^4.0.2, postcss-scss@^4.0.4:
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.4.tgz#aa8f60e19ee18259bc193db9e4b96edfce3f3b1f"
   integrity sha512-aBBbVyzA8b3hUL0MGrpydxxXKXFZc5Eqva0Q3V9qsBOLEMsjb6w49WfpsoWzpEgcqJGW4t7Rio8WXVU9Gd8vWg==
 
-postcss-scss@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.6.tgz#5d62a574b950a6ae12f2aa89b60d63d9e4432bfd"
-  integrity sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==
-
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
@@ -16899,15 +16848,6 @@ postcss@^8.2.1, postcss@^8.2.15, postcss@^8.3.1, postcss@^8.3.11, postcss@^8.4.1
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.21:
-  version "8.4.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
-  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
-  dependencies:
-    nanoid "^3.3.4"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 postinstall-postinstall@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
@@ -16983,11 +16923,6 @@ prettier@^2.5.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
   integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
-prettier@^2.8.4:
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.4.tgz#34dd2595629bfbb79d344ac4a91ff948694463c3"
-  integrity sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==
-
 pretty-error@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
@@ -20528,11 +20463,6 @@ typescript@^4.3.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-typescript@^4.3.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
-
 typescript@^4.9.3:
   version "4.9.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"

From 23c1391aa694526ce467c74de7c19d330f03ea67 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:50:56 -0400
Subject: [PATCH 010/102] Allow migrator to target subcomponents and change
 prop values (#10071)

Closes https://github.com/Shopify/polaris/issues/10084

First pass at allowing prop values to be changed through migrations.
Also needed to allow support for finding compound components in the
rename prop migration

**Question**
Should this be merged into main? Or left in next until it's tested?
---
 .changeset/nervous-wombats-yell.md            |  5 ++
 ...me-component-prop-with-new-value.input.tsx | 23 +++++++++
 ...e-component-prop-with-new-value.output.tsx | 23 +++++++++
 ...nd-component-prop-with-new-value.input.tsx | 30 +++++++++++
 ...d-component-prop-with-new-value.output.tsx | 30 +++++++++++
 .../tests/transform.test.ts                   | 35 ++++++++++---
 .../react-rename-component-prop/transform.ts  | 14 ++++--
 polaris-migrator/src/utilities/jsx.ts         | 50 +++++++++++++++----
 8 files changed, 192 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/nervous-wombats-yell.md
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx

diff --git a/.changeset/nervous-wombats-yell.md b/.changeset/nervous-wombats-yell.md
new file mode 100644
index 00000000000..df1601ae501
--- /dev/null
+++ b/.changeset/nervous-wombats-yell.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added support for compound components and adding new prop values in the react-rename-component-prop migration
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
new file mode 100644
index 00000000000..b8c9f5aad08
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface MyComponentProps {
+  prop?: string;
+  newProp?: string;
+  children?: React.ReactNode;
+}
+
+const Child = (props: {prop: string}) => <>{props.prop}</>;
+
+function MyComponent(props: MyComponentProps) {
+  const value = props.newProp ?? props.prop;
+  return <div data-prop={value}>{props.children}</div>;
+}
+
+export function App() {
+  return (
+    <MyComponent prop="value">
+      Hello
+      <Child prop="value" />
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
new file mode 100644
index 00000000000..18b133d61b8
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface MyComponentProps {
+  prop?: string;
+  newProp?: string;
+  children?: React.ReactNode;
+}
+
+const Child = (props: {prop: string}) => <>{props.prop}</>;
+
+function MyComponent(props: MyComponentProps) {
+  const value = props.newProp ?? props.prop;
+  return <div data-prop={value}>{props.children}</div>;
+}
+
+export function App() {
+  return (
+    <MyComponent newProp="new value">
+      Hello
+      <Child prop="value" />
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
new file mode 100644
index 00000000000..0f5b6caf11e
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface MyComponentProps {
+  prop?: string;
+  newProp?: string;
+  children?: React.ReactNode;
+}
+
+const Child = (props: {prop: string}) => <>{props.prop}</>;
+
+function MyComponent(props: MyComponentProps) {
+  const value = props.newProp ?? props.prop;
+  return <div data-prop={value}>{props.children}</div>;
+}
+
+function SubComponent({...props}: any) {
+  return <div {...props} />;
+}
+
+export function App() {
+  return (
+    <MyComponent>
+      <MyComponent.SubComponent prop="value" />
+      Hello
+      <Child prop="value" />
+    </MyComponent>
+  );
+}
+
+MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
new file mode 100644
index 00000000000..2983b6a8ca5
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface MyComponentProps {
+  prop?: string;
+  newProp?: string;
+  children?: React.ReactNode;
+}
+
+const Child = (props: {prop: string}) => <>{props.prop}</>;
+
+function MyComponent(props: MyComponentProps) {
+  const value = props.newProp ?? props.prop;
+  return <div data-prop={value}>{props.children}</div>;
+}
+
+function SubComponent({...props}: any) {
+  return <div {...props} />;
+}
+
+export function App() {
+  return (
+    <MyComponent>
+      <MyComponent.SubComponent newProp="new value" />
+      Hello
+      <Child prop="value" />
+    </MyComponent>
+  );
+}
+
+MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
index b5ebcd3ef59..304afbe4f8e 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
@@ -1,16 +1,39 @@
 import {check} from '../../../utilities/check';
 
 const transform = 'react-rename-component-prop';
-const fixtures = ['react-rename-component-prop'];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    transform,
+const fixtures = [
+  {
+    name: 'react-rename-component-prop',
+    options: {
+      componentName: 'MyComponent',
+      from: 'prop',
+      to: 'newProp',
+    },
+  },
+  {
+    name: 'react-rename-component-prop-with-new-value',
     options: {
       componentName: 'MyComponent',
       from: 'prop',
       to: 'newProp',
+      newValue: 'new value',
     },
+  },
+  {
+    name: 'react-rename-compound-component-prop-with-new-value',
+    options: {
+      componentName: 'MyComponent.SubComponent',
+      from: 'prop',
+      to: 'newProp',
+      newValue: 'new value',
+    },
+  },
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture: fixture.name,
+    transform,
+    options: fixture.options,
   });
 }
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
index 88ee9dbf3e4..3011ce3c3de 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
@@ -7,15 +7,23 @@ export default function transformer(
   {jscodeshift: j}: API,
   options: Options,
 ) {
-  if (!options.componentName || !options.from || !options.to) {
-    throw new Error('Missing required options: componentName, from, to');
+  const componentParts = options.componentName?.split('.');
+  if (
+    !options.componentName ||
+    !options.from ||
+    !options.to ||
+    componentParts?.length > 2
+  ) {
+    throw new Error(
+      'Missing required options: componentName, from, to, or your compound component exceeds 2 levels',
+    );
   }
 
   const source = j(file.source);
   const componentName = options.componentName;
   const props = {[options.from]: options.to};
 
-  renameProps(j, source, componentName, props);
+  renameProps(j, source, componentName, props, options.newValue);
 
   return source.toSource();
 }
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index e5eda149aab..b351ae5a143 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -123,24 +123,56 @@ export function replaceJSXElement(
 }
 
 export function renameProps(
-  _j: core.JSCodeshift,
+  j: core.JSCodeshift,
   source: Collection<any>,
   componentName: string,
   props: {[from: string]: string},
+  newValue?: string,
 ) {
-  const fromProps = Object.keys(props);
-  const isFromProp = (prop: unknown): prop is keyof typeof props =>
-    fromProps.includes(prop as string);
-
-  source.findJSXElements(componentName)?.forEach((path) => {
-    path.node.openingElement.attributes?.forEach((node) => {
-      if (node.type === 'JSXAttribute' && isFromProp(node.name.name)) {
-        node.name.name = props[node.name.name];
+  const [component, subcomponent] = componentName.split('.');
+
+  // Handle compound components
+  if (component && subcomponent) {
+    source.find(j.JSXElement).forEach((element) => {
+      if (
+        element.node.openingElement.name.type === 'JSXMemberExpression' &&
+        element.node.openingElement.name.object.type === 'JSXIdentifier' &&
+        element.node.openingElement.name.object.name === component &&
+        element.node.openingElement.name.property.name === subcomponent
+      ) {
+        element.node.openingElement.attributes?.forEach((node) =>
+          updateNode(node, props, newValue),
+        );
       }
     });
+    return;
+  }
+
+  // Handle basic components
+  source.findJSXElements(componentName)?.forEach((element) => {
+    element.node.openingElement.attributes?.forEach((node) =>
+      updateNode(node, props, newValue),
+    );
   });
 
   return source;
+
+  function updateNode(
+    node: any,
+    props: {[from: string]: string},
+    newValue?: string,
+  ) {
+    const isFromProp = (prop: unknown): prop is keyof typeof props =>
+      Object.keys(props).includes(prop as string);
+
+    if (node.type !== 'JSXAttribute' && !isFromProp(node.name.name)) {
+      return node;
+    }
+
+    node.name.name = props[node.name.name];
+    node.value = j.stringLiteral(newValue ?? node.value.value);
+    return node;
+  }
 }
 
 export function insertJSXComment(

From b340df1295610906d531f28c065e10c4bcc63bd4 Mon Sep 17 00:00:00 2001
From: Matt Lavoie <44816587+m4thieulavoie@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:58:15 -0400
Subject: [PATCH 011/102] Update sandbox.md (#10186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix the broken sandbox landing page

Should now redirect to
https://polaris.shopify.com/sandbox?code=N4Igxg9gJgpiBcIA8AZGBzAhmAngYUwCcoAdAOwAIKBnGSMqInAMQggBcZCBBMdgSwhlqAXmABtYBXqcy7eBRIgAIv2oBbNdSUUAvgF1d5KgAdC-dU1YcuvAULFSZMOQqUBRAB4mIhdhQAlGB8-HV0jMgA%2BYwpUDGx8IigAOgAJGExYQhiqbHthMXEcqgpgYpLpIVl5RRAAFQ5MABsKAGVmmG0QABpyvV7KEsNigXYmmBEldvGumOjBqiQABQgfADcuPrz%2BDbEAM2baCIrcvh3Mdl8xPsWAIQBXdkvKKDUwJohqe8IYChMmzD8KI3EoANX4MAA7m0OtoFickAB6B5PITzE56PpCPAfWhiAAUAEoKCJIqVwsV0Qi7IIyCg1OwQfxOOpRBInFUXDUlABxQifagwmZhbqlSpyLluEAAORg-mmnTCw3hVERVMWiJW6y4VKRaCwuAIxDSGSyuv1CSNKVadHy6tidRgnnYeCqgLIOr6AE0IPdpJhKPdaDRYRQfiF2ILLjQYL8gXtfJZ8hRMAAjX3%2BHC%2BwjSIOXdRcaiATAIscRCxRU5haFAKEJpOZOOZMDR7mAABYpwXUUMQDY5gQF0WpnDSNsBj1NUW%2BCs4PrUdiYPZ7ZLFJGO52uuTuz2DPXxQ1JZI2s5omJxA2JY3H5OjcaTeqNFoKwW3H6YADWUAgkLISntSCCahszAGB6XnPofiA74QOlTAC0cGggXQe4AUIKVu3GJRRX%2Bb5mnQ2EwmOE5mRgVlChBMoVRODDOilAB5MtCC6AYMQqODfVcWoAFVWmUAASAAGZIBIErCQSob4milABiMSqKoXQWNYyjWJKGjqClIJ2G%2BYQ5NU3J1A47kQAAWh4-iACYAFYhJEvT9MkmT7IxRS%2BmVDEfgYLgAEkWQJEj1GJUlShBeh5zFdTRXY%2B45FFSS9BJCgAoAbhBH5tMISh8XE2JAOA0CGWSXzSJyqh%2BCgMR1OSS4UAgMAOlqyEuAIWgiSI-SKEksRJPa-TsBA6hqH4VN%2BCaZkcBQNMYCaMQAANwShIVOgoBMcz44B1N0WbetU7ExrAd8CSCskwogcZkg%2BdBsvAfb3xgGsAqwpKWUJHaTntVTzwSVoFwOj79K%2B3Afuwd8ipZFbRqaSINthXQ9wvYGDrB0j-s%2Bi0gd%2B0HivUaHorkOHEXRnBEaxllUYRQn92JzHyY1PLoIK%2BdkZxkFCVSqiKXhNUz0pi8rSPW1aXNKn%2BevWkKFvCYlGUDIzjWC57rDYJfEjHQvlTKB7nu-8wPYf7UEK7HIiWTAs0eag9UNsm%2BgNpmjYaBcn1DW4RzwMcyAnS27et%2BEvb1nmidFwXT13QPDzFutJfvaUbD-Vd1xdN0gR3DE6jbX51KViNBSIX5MHl0a03GWsyCaEd%2BD2CgzZzedfDjQVI-Tto21WCvZyo-4A1rHM234dB08IFdfcRBPNwXZPCF1XnLXD4PgTIeGZ%2BIeYehAdh04LagEHEEAPnq8Z4BcEB9G6EBIXK9et-gcRDCAA

### WHY are these changes introduced?

Fixes #0000 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/moody-rocks-move.md               | 5 +++++
 polaris.shopify.com/content/tools/sandbox.md | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/moody-rocks-move.md

diff --git a/.changeset/moody-rocks-move.md b/.changeset/moody-rocks-move.md
new file mode 100644
index 00000000000..cf0bd72625a
--- /dev/null
+++ b/.changeset/moody-rocks-move.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Fixed landing page for sandbox
diff --git a/polaris.shopify.com/content/tools/sandbox.md b/polaris.shopify.com/content/tools/sandbox.md
index 0e428998664..e118ab34a3f 100644
--- a/polaris.shopify.com/content/tools/sandbox.md
+++ b/polaris.shopify.com/content/tools/sandbox.md
@@ -4,7 +4,7 @@ navTitle: Sandbox
 description: Effortless prototyping with Polaris components.
 order: 5
 icon: SandboxMajor
-url: /sandbox?code=N4Igxg9gJgpiBcIA8BhAhgJygHQHYAJ8BnGSXKTATwDEIIAXGDAQTHoEsJciBeYAbWBlGuevHwByACLsiAW1lEJAXwC6yvIQAOGdnKq0GTVhy58hXEWMkBRAB5aIGevgBKMR85UbcAPk34qJhQAHQAEjBosBj4aGyc3HyC%2BMIwouISACoMaAA2%2BADKeTBK%2BGrK%2BBz0uTA82CBFNUT1-gSEgQAKEI4AbkwB7bHxfXwAZnkkPoOEcRw9aPROfAPTSABCAK70iwRQsmC5EEQbGDD4Wrlo7H4r0-gAauwwAO6Fxc1td0gA9JvbXK07lNplwUIcSHwABQASnwPF8%2BGAymBhEBqxMCQAMrIXOxGHJeAILKI0tYJABxDBHIhvJoqAA0iNS6UkADkYC5GiUVOp8N80YQfl1ekw0T90FhwpFomKJaECqRTDdPoFMjA7PQUJYrrhRbd8ABNCAbFJoAgbEjEd74U6eeg0xbEGBna6jJz6JWxABGxpclGNMTAFsWciYREAmAT6pzRGletAkKD4LgpXSMXRoYgbMAAC1iNKI1ogfRiHFDjK9lBS2bNutyjKc%2BAr%2BqI9DQo1GIRWPzVGq1oh1era4uCIQV8QBASCkrHnqqNTqIGyrfyXJpa1OaAA1lAIM9cC0u%2B4iAGwDBsS39adjydT6y0KHzERrgBzDaXDAZAs1CSMi4nPKfu83j6niMAEkk%2BqEMAkHtF%2BJQZAA8lgYY-jBMxyMaLISAAqgUUgACQAAwhIRhGoSqdwnLkGS2k49rfNGKH0jByjMRR7TQexgxwUQGTuPQJzcORdyDPemFkgAtLhBEAEwAKzEaRwkiYQVE0R4dFEN8pwCRgQlsSprH6uol5pNEACS%2BJQqBciwvCiIwWQLaIjxjJiRsoiMlRFQ8PgNkANwwTpgn4JCaGBEeJ5njiISWWB4WqRguR8N5CVDKeRBPl67C5HilCYmgXowMlwAAAaPC8tIlPgboxPhwA8copUoip%2BACq1SAFK2YCbu1rWBF1cSbrF%2BI1TluS%2BA17zKD8g09SNYF9R1c3DXFciTe5ogzd8K0LetaWzd1vXhT8kU3tFLZ7UthDQoF7HIvq-KTt8cqjoqCSyiOM4JJUeLzvUUiRMMCwwImtHOM0ICZl6UAbKD7VIOe9BLYjMVrb4HRoP6WxED8SNXfqqOXejS55FVa6Vig1a4LWeNo-iCPfEjYovV970TkOr3fcmc61PUrJGAeKpID2mratcg53Jk2ZnDxNoaRDsSnLE8w5YVNRJrguSVuwoz4NjMQtk4Lo0jzMuFNm3S65Q%2BoXGaSYxNm7DPjLGCdsL3yi32rYSxgLNc%2BzyrDlgvggPSID0DLoZEAg-AgIcYDFPAaQgKo4fPOwUCRzH8D8OoQA
+url: /sandbox?code=N4Igxg9gJgpiBcIA8AZGBzAhmAngYUwCcoAdAOwAIKBnGSMqInAMQggBcZCBBMdgSwhlqAXmABtYBXqcy7eBRIgAIv2oBbNdSUUAvgF1d5KgAdC-dU1YcuvAULFSZMOQqUBRAB4mIhdhQAlGB8-HV0jMgA%2BYwpUDGx8IigAOgAJGExYQhiqbHthMXEcqgpgYpLpIVl5RRAAFQ5MABsKAGVmmG0QABpyvV7KEsNigXYmmBEldvGumOjBqiQABQgfADcuPrz%2BDbEAM2baCIrcvh3Mdl8xPsWAIQBXdkvKKDUwJohqe8IYChMmzD8KI3EoANX4MAA7m0OtoFickAB6B5PITzE56PpCPAfWhiAAUAEoKCJIqVwsV0Qi7IIyCg1OwQfxOOpRBInFUXDUlABxQifagwmZhbqlSpyLluEAAORg-mmnTCw3hVERVMWiJW6y4VKRaCwuAIxDSGSyuv1CSNKVadHy6tidRgnnYeCqgLIOr6AE0IPdpJhKPdaDRYRQfiF2ILLjQYL8gXtfJZ8hRMAAjX3%2BHC%2BwjSIOXdRcaiATAIscRCxRU5haFAKEJpOZOOZMDR7mAABYpwXUUMQDY5gQF0WpnDSNsBj1NUW%2BCs4PrUdiYPZ7ZLFJGO52uuTuz2DPXxQ1JZI2s5omJxA2JY3H5OjcaTeqNFoKwW3H6YADWUAgkLISntSCCahszAGB6XnPofiA74QOlTAC0cGggXQe4AUIKVu3GJRRX%2Bb5mnQ2EwmOE5mRgVlChBMoVRODDOilAB5MtCC6AYMQqODfVcWoAFVWmUAASAAGZIBIErCQSob4milABiMSqKoXQWNYyjWJKGjqClIJ2G%2BYQ5NU3J1A47kQAAWh4-iACYAFYhJEvT9MkmT7IxRS%2BmVDEfgYLgAEkWQJEj1GJUlShBeh5zFdTRXY%2B45FFSS9BJCgAoAbhBH5tMISh8XE2JAOA0CGWSXzSJyqh%2BCgMR1OSS4UAgMAOlqyEuAIWgiSI-SKEksRJPa-TsBA6hqH4VN%2BCaZkcBQNMYCaMQAANwShIVOgoBMcz44B1N0WbetU7ExrAd8CSCskwogcZkg%2BdBsvAfb3xgGsAqwpKWUJHaTntVTzwSVoFwOj79K%2B3Afuwd8ipZFbRqaSINthXQ9wvYGDrB0j-s%2Bi0gd%2B0HivUaHorkOHEXRnBEaxllUYRQn92JzHyY1PLoIK%2BdkZxkFCVSqiKXhNUz0pi8rSPW1aXNKn%2BevWkKFvCYlGUDIzjWC57rDYJfEjHQvlTKB7nu-8wPYf7UEK7HIiWTAs0eag9UNsm%2BgNpmjYaBcn1DW4RzwMcyAnS27et%2BEvb1nmidFwXT13QPDzFutJfvaUbD-Vd1xdN0gR3DE6jbX51KViNBSIX5MHl0a03GWsyCaEd%2BD2CgzZzedfDjQVI-Tto21WCvZyo-4A1rHM234dB08IFdfcRBPNwXZPCF1XnLXD4PgTIeGZ%2BIeYehAdh04LagEHEEAPnq8Z4BcEB9G6EBIXK9et-gcRDCAA
 status:
   value: Alpha
   message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

From 7891c7ed961da9bb0bfbfeea9ca8e7432875074e Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:19:45 -0400
Subject: [PATCH 012/102] [Button] Deprecate connectedDisclosure  (#10183)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris/issues/10126
---
 .changeset/famous-stingrays-change.md         |  5 ++
 .../src/components/Button/Button.scss         |  4 ++
 .../src/components/Button/Button.stories.tsx  | 62 ++++++++++++++++---
 .../src/components/Button/Button.tsx          |  2 +-
 .../pages/examples/button-split.tsx           | 58 ++++++++++++++---
 5 files changed, 111 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/famous-stingrays-change.md

diff --git a/.changeset/famous-stingrays-change.md b/.changeset/famous-stingrays-change.md
new file mode 100644
index 00000000000..6323d5ea810
--- /dev/null
+++ b/.changeset/famous-stingrays-change.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Deprecate connectedDisclosure prop on button
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
index 8c020c7ed3c..ca2adbe6ceb 100644
--- a/polaris-react/src/components/Button/Button.scss
+++ b/polaris-react/src/components/Button/Button.scss
@@ -1441,6 +1441,7 @@
   }
 
   > :first-child .Button,
+  > :first-child .Button::before,
   > :first-child .Button::after {
     border-radius: 0;
     border-top-left-radius: var(--p-border-radius-1);
@@ -1453,6 +1454,7 @@
   }
 
   > :last-child .Button,
+  > :last-child .Button::before,
   > :last-child .Button::after {
     border-radius: 0;
     border-top-right-radius: var(--p-border-radius-1);
@@ -1476,11 +1478,13 @@
 
 [data-buttongroup-connected-top='true'] {
   > :first-child .Button,
+  > :first-child .Button::before,
   > :first-child .Button::after {
     border-top-left-radius: 0;
   }
 
   > :last-child .Button,
+  > :last-child .Button::before,
   > :last-child .Button::after {
     border-top-right-radius: 0;
   }
diff --git a/polaris-react/src/components/Button/Button.stories.tsx b/polaris-react/src/components/Button/Button.stories.tsx
index 476f1837dd7..410383ec470 100644
--- a/polaris-react/src/components/Button/Button.stories.tsx
+++ b/polaris-react/src/components/Button/Button.stories.tsx
@@ -8,12 +8,16 @@ import {
   VerticalStack,
   Text,
   Box,
+  Popover,
+  ActionList,
+  Divider,
 } from '@shopify/polaris';
 import {
   PlusMinor,
   DeleteMinor,
   CancelSmallMinor,
   EditMajor,
+  ChevronDownMinor,
 } from '@shopify/polaris-icons';
 
 export default {
@@ -717,17 +721,57 @@ export function SelectDisclosure() {
 }
 
 export function Split() {
+  const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <Button
-        primary
-        connectedDisclosure={{
-          accessibilityLabel: 'Other save actions',
-          actions: [{content: 'Save as draft'}],
-        }}
-      >
-        Save
-      </Button>
+      <ButtonGroup segmented>
+        <Button primary>Save</Button>
+
+        <div style={{width: '3px'}} />
+
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              primary
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
+
+      <ButtonGroup segmented>
+        <Button>Save</Button>
+
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
     </div>
   );
 }
diff --git a/polaris-react/src/components/Button/Button.tsx b/polaris-react/src/components/Button/Button.tsx
index 850ae4b1cf5..469bf4c6a2b 100644
--- a/polaris-react/src/components/Button/Button.tsx
+++ b/polaris-react/src/components/Button/Button.tsx
@@ -51,7 +51,7 @@ export interface ButtonProps extends BaseButton {
   removeUnderline?: boolean;
   /** Icon to display to the left of the button content */
   icon?: React.ReactElement | IconSource;
-  /** Disclosure button connected right of the button. Toggles a popover action list. */
+  /** @deprecated See the split example to replicate this prop */
   connectedDisclosure?: ConnectedDisclosure;
   /** Indicates whether or not the button is the primary navigation link when rendered inside of an `IndexTable.Row` */
   dataPrimaryLink?: boolean;
diff --git a/polaris.shopify.com/pages/examples/button-split.tsx b/polaris.shopify.com/pages/examples/button-split.tsx
index 6f2f800677f..b51427f0025 100644
--- a/polaris.shopify.com/pages/examples/button-split.tsx
+++ b/polaris.shopify.com/pages/examples/button-split.tsx
@@ -1,19 +1,57 @@
-import {Button} from '@shopify/polaris';
+import {ActionList, Button, ButtonGroup, Popover} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+import {ChevronDownMinor} from '@shopify/polaris-icons';
 
 function ButtonExample() {
+  const [active, setActive] = React.useState(false);
   return (
     <div style={{height: '100px'}}>
-      <Button
-        primary
-        connectedDisclosure={{
-          accessibilityLabel: 'Other save actions',
-          actions: [{content: 'Save as draft'}],
-        }}
-      >
-        Save
-      </Button>
+      <ButtonGroup segmented>
+        <Button primary>Save</Button>
+        <div style={{width: '3px'}} />
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              primary
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
+
+      <ButtonGroup segmented>
+        <Button>Save</Button>
+        <Popover
+          active={active}
+          preferredAlignment="right"
+          activator={
+            <Button
+              onClick={() => setActive(true)}
+              icon={ChevronDownMinor}
+              accessibilityLabel="Other save actions"
+            />
+          }
+          autofocusTarget="first-node"
+          onClose={() => setActive(false)}
+        >
+          <ActionList
+            actionRole="menuitem"
+            items={[{content: 'Save as draft'}]}
+          />
+        </Popover>
+      </ButtonGroup>
     </div>
   );
 }

From 5401f4df0adaaa99907a767381ff2d9423607305 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 23 Aug 2023 13:23:08 -0700
Subject: [PATCH 013/102] Fix migration resolution path (#10188)

### WHY are these changes introduced?

Fixes a bug with how the migration resolution path is created

### WHAT is this pull request doing?

This update resolves migrations from `<migration-name>/transform.js`

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 polaris-migrator/src/migrate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-migrator/src/migrate.ts b/polaris-migrator/src/migrate.ts
index 50a3fa32034..b52629311de 100644
--- a/polaris-migrator/src/migrate.ts
+++ b/polaris-migrator/src/migrate.ts
@@ -20,7 +20,7 @@ export async function migrate(
 ) {
   const migrationFile = path.join(
     __dirname,
-    `./migrations/${migration}/${migration}.js`,
+    `./migrations/${migration}/transform.js`,
   );
 
   try {

From 219be15aa2d49e6f2f2b0eb3108fbfa3f1faa621 Mon Sep 17 00:00:00 2001
From: Ash <siavash.etemadieh@shopify.com>
Date: Wed, 23 Aug 2023 21:24:15 +0100
Subject: [PATCH 014/102] Support dynamic fontsizes in iOS devices (#10181)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Currently Webviews & Mobile Web in iOS don't respect the users
preference for Font Scale which is quite inaccessible.

<!--
  Context about the problem that’s being addressed.
-->

This PR introduces the use of font: -apple-system-body if it is
supported.

Inspired by this [dev.to
article](https://dev.to/colingourlay/how-to-support-apple-s-dynamic-text-in-your-web-content-with-css-40c0#:~:text=If%20you've%20never%20seen,apple%2Dsystem%2Dbody%20)

### WHAT is this pull request doing?

<details>
  <summary>Before</summary>
<img
src="https://github.com/Shopify/polaris/assets/703938/f1adb621-2982-4cc0-8946-bd5403e2a558"
width="300"/>
</details>
<details>
  <summary>After</summary>
<img
src="https://github.com/Shopify/polaris/assets/703938/a213b56e-80ba-4fca-b09a-226ec2f6bec2"
width="300"/>

</details>


<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

1. Open iOS simulator
2. Open Safari within the iOS Simulator
3. Open polaris storybook using this url
https://5d559397bae39100201eedc1-krdvxqhrcy.chromatic.com/?path=/story/all-components-text--variants
4. Change Fontscale in `Settings > Accessibility > Display & Text Size >
Larger Text ` (using the slider at the bottom)
5. Switch back to Safari
6. Verify the font scale has updated to match the preference in
accessibility

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/olive-fishes-provide.md                    |  5 +++++
 .../src/components/AppProvider/AppProvider.scss       | 11 +++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 .changeset/olive-fishes-provide.md

diff --git a/.changeset/olive-fishes-provide.md b/.changeset/olive-fishes-provide.md
new file mode 100644
index 00000000000..184df153471
--- /dev/null
+++ b/.changeset/olive-fishes-provide.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) in iOS
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
index b8b9c446f7f..878302d2f21 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.scss
+++ b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -55,6 +55,17 @@ html {
   text-rendering: optimizeLegibility;
 }
 
+/*
+  To support dynamic type in iOS, we need to set Apple's
+  system font and then define font-families and rem-based
+  font-sizes on descendant elements:
+*/
+@supports (font: -apple-system-body) {
+  html {
+    font: -apple-system-body;
+  }
+}
+
 body {
   min-height: 100%;
   margin: 0;

From 295feefdf3adf651a4c41b514b4334f3a938f915 Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 24 Aug 2023 09:19:11 -0400
Subject: [PATCH 015/102] Version Packages (#10078)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.20.0

### Minor Changes

- [#10101](https://github.com/Shopify/polaris/pull/10101)
[`e6a2d352a`](https://github.com/Shopify/polaris/commit/e6a2d352aeb628c662ca86bb7c8b91ce695ff640)
Thanks [@samrose3](https://github.com/samrose3)! - Removed the
`@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor
of using only the `@shopify/polaris-migrator`.

    Removing these packages will provide the following benefits:

- Improve CI time by removing extra packages from our build, test, and
lint workflows
- Reduce confusion on where to add new migrations or update previous
migrations
- Clean up ESLint configs, reduce changelog entries, and remove package
dependencies


- [#10071](https://github.com/Shopify/polaris/pull/10071)
[`23c1391aa`](https://github.com/Shopify/polaris/commit/23c1391aa694526ce467c74de7c19d330f03ea67)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added support for
compound components and adding new prop values in the
react-rename-component-prop migration

## @shopify/polaris@11.13.0

### Minor Changes

- [#10086](https://github.com/Shopify/polaris/pull/10086)
[`5a5b3795a`](https://github.com/Shopify/polaris/commit/5a5b3795afa484db637fd5e151866149fd932b42)
Thanks [@joelzwarrington](https://github.com/joelzwarrington)! - [Modal]
Activator no longer wrapped in Box


- [#10183](https://github.com/Shopify/polaris/pull/10183)
[`7891c7ed9`](https://github.com/Shopify/polaris/commit/7891c7ed961da9bb0bfbfeea9ca8e7432875074e)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecate
connectedDisclosure prop on button


- [#10181](https://github.com/Shopify/polaris/pull/10181)
[`219be15aa`](https://github.com/Shopify/polaris/commit/219be15aa2d49e6f2f2b0eb3108fbfa3f1faa621)
Thanks [@ssetem](https://github.com/ssetem)! - Added support for
[Dynamic
Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically)
in iOS

### Patch Changes

- [#10056](https://github.com/Shopify/polaris/pull/10056)
[`5ecaafc2b`](https://github.com/Shopify/polaris/commit/5ecaafc2bf21d922b0b86dacb71cc5db9d4fe66c)
Thanks [@jesstelford](https://github.com/jesstelford)! - [ResourceList]
Remove layout jank when bulk actions enabled and item selected


-
[`bc1f4aab1`](https://github.com/Shopify/polaris/commit/bc1f4aab13ce4f73488d9ced20f4b18dee4b8220)
Thanks [@samrose3](https://github.com/samrose3)! - Reduced surrounding
margin of Tooltip to allow for interaction with nearby UI elements.

## polaris.shopify.com@0.57.1

### Patch Changes

- [#10186](https://github.com/Shopify/polaris/pull/10186)
[`b340df129`](https://github.com/Shopify/polaris/commit/b340df1295610906d531f28c065e10c4bcc63bd4)
Thanks [@m4thieulavoie](https://github.com/m4thieulavoie)! - Fixed
landing page for sandbox

- Updated dependencies
\[[`5a5b3795a`](https://github.com/Shopify/polaris/commit/5a5b3795afa484db637fd5e151866149fd932b42),
[`7891c7ed9`](https://github.com/Shopify/polaris/commit/7891c7ed961da9bb0bfbfeea9ca8e7432875074e),
[`5ecaafc2b`](https://github.com/Shopify/polaris/commit/5ecaafc2bf21d922b0b86dacb71cc5db9d4fe66c),
[`bc1f4aab1`](https://github.com/Shopify/polaris/commit/bc1f4aab13ce4f73488d9ced20f4b18dee4b8220),
[`219be15aa`](https://github.com/Shopify/polaris/commit/219be15aa2d49e6f2f2b0eb3108fbfa3f1faa621)]:
    -   @shopify/polaris@11.13.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/fair-olives-chew.md        |  5 -----
 .changeset/famous-stingrays-change.md |  5 -----
 .changeset/friendly-bananas-crash.md  | 11 -----------
 .changeset/hip-cameras-greet.md       |  5 -----
 .changeset/late-countries-remain.md   |  5 -----
 .changeset/moody-rocks-move.md        |  5 -----
 .changeset/nervous-wombats-yell.md    |  5 -----
 .changeset/olive-fishes-provide.md    |  5 -----
 polaris-migrator/CHANGELOG.md         | 14 ++++++++++++++
 polaris-migrator/package.json         |  4 ++--
 polaris-react/CHANGELOG.md            | 16 ++++++++++++++++
 polaris-react/README.md               |  4 ++--
 polaris-react/package.json            |  2 +-
 polaris.shopify.com/CHANGELOG.md      |  9 +++++++++
 polaris.shopify.com/package.json      |  4 ++--
 15 files changed, 46 insertions(+), 53 deletions(-)
 delete mode 100644 .changeset/fair-olives-chew.md
 delete mode 100644 .changeset/famous-stingrays-change.md
 delete mode 100644 .changeset/friendly-bananas-crash.md
 delete mode 100644 .changeset/hip-cameras-greet.md
 delete mode 100644 .changeset/late-countries-remain.md
 delete mode 100644 .changeset/moody-rocks-move.md
 delete mode 100644 .changeset/nervous-wombats-yell.md
 delete mode 100644 .changeset/olive-fishes-provide.md

diff --git a/.changeset/fair-olives-chew.md b/.changeset/fair-olives-chew.md
deleted file mode 100644
index b0a3cc88bb8..00000000000
--- a/.changeset/fair-olives-chew.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-[Modal] Activator no longer wrapped in Box
diff --git a/.changeset/famous-stingrays-change.md b/.changeset/famous-stingrays-change.md
deleted file mode 100644
index 6323d5ea810..00000000000
--- a/.changeset/famous-stingrays-change.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Deprecate connectedDisclosure prop on button
diff --git a/.changeset/friendly-bananas-crash.md b/.changeset/friendly-bananas-crash.md
deleted file mode 100644
index daa494da72d..00000000000
--- a/.changeset/friendly-bananas-crash.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-'@shopify/polaris-migrator': minor
----
-
-Removed the `@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor of using only the `@shopify/polaris-migrator`.
-
-Removing these packages will provide the following benefits:
-
-- Improve CI time by removing extra packages from our build, test, and lint workflows
-- Reduce confusion on where to add new migrations or update previous migrations
-- Clean up ESLint configs, reduce changelog entries, and remove package dependencies
diff --git a/.changeset/hip-cameras-greet.md b/.changeset/hip-cameras-greet.md
deleted file mode 100644
index c5f4f0f595c..00000000000
--- a/.changeset/hip-cameras-greet.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-[ResourceList] Remove layout jank when bulk actions enabled and item selected
diff --git a/.changeset/late-countries-remain.md b/.changeset/late-countries-remain.md
deleted file mode 100644
index 269b4baf367..00000000000
--- a/.changeset/late-countries-remain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Reduced surrounding margin of Tooltip to allow for interaction with nearby UI elements.
diff --git a/.changeset/moody-rocks-move.md b/.changeset/moody-rocks-move.md
deleted file mode 100644
index cf0bd72625a..00000000000
--- a/.changeset/moody-rocks-move.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'polaris.shopify.com': patch
----
-
-Fixed landing page for sandbox
diff --git a/.changeset/nervous-wombats-yell.md b/.changeset/nervous-wombats-yell.md
deleted file mode 100644
index df1601ae501..00000000000
--- a/.changeset/nervous-wombats-yell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-migrator': minor
----
-
-Added support for compound components and adding new prop values in the react-rename-component-prop migration
diff --git a/.changeset/olive-fishes-provide.md b/.changeset/olive-fishes-provide.md
deleted file mode 100644
index 184df153471..00000000000
--- a/.changeset/olive-fishes-provide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Added support for [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) in iOS
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index e7cf53f0436..623439a9f57 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @shopify/polaris-migrator
 
+## 0.20.0
+
+### Minor Changes
+
+- [#10101](https://github.com/Shopify/polaris/pull/10101) [`e6a2d352a`](https://github.com/Shopify/polaris/commit/e6a2d352aeb628c662ca86bb7c8b91ce695ff640) Thanks [@samrose3](https://github.com/samrose3)! - Removed the `@shopify/polaris-cli` and `@shopify/polaris-codemods` package in favor of using only the `@shopify/polaris-migrator`.
+
+  Removing these packages will provide the following benefits:
+
+  - Improve CI time by removing extra packages from our build, test, and lint workflows
+  - Reduce confusion on where to add new migrations or update previous migrations
+  - Clean up ESLint configs, reduce changelog entries, and remove package dependencies
+
+* [#10071](https://github.com/Shopify/polaris/pull/10071) [`23c1391aa`](https://github.com/Shopify/polaris/commit/23c1391aa694526ce467c74de7c19d330f03ea67) Thanks [@kyledurand](https://github.com/kyledurand)! - Added support for compound components and adding new prop values in the react-rename-component-prop migration
+
 ## 0.19.9
 
 ### Patch Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 96c5cbc7251..78cd6ea36ee 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.19.9",
+  "version": "0.20.0",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.12.0",
+    "@shopify/polaris": "^11.13.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index 178c45de07f..105dc922d29 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## 11.13.0
+
+### Minor Changes
+
+- [#10086](https://github.com/Shopify/polaris/pull/10086) [`5a5b3795a`](https://github.com/Shopify/polaris/commit/5a5b3795afa484db637fd5e151866149fd932b42) Thanks [@joelzwarrington](https://github.com/joelzwarrington)! - [Modal] Activator no longer wrapped in Box
+
+* [#10183](https://github.com/Shopify/polaris/pull/10183) [`7891c7ed9`](https://github.com/Shopify/polaris/commit/7891c7ed961da9bb0bfbfeea9ca8e7432875074e) Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecate connectedDisclosure prop on button
+
+- [#10181](https://github.com/Shopify/polaris/pull/10181) [`219be15aa`](https://github.com/Shopify/polaris/commit/219be15aa2d49e6f2f2b0eb3108fbfa3f1faa621) Thanks [@ssetem](https://github.com/ssetem)! - Added support for [Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically) in iOS
+
+### Patch Changes
+
+- [#10056](https://github.com/Shopify/polaris/pull/10056) [`5ecaafc2b`](https://github.com/Shopify/polaris/commit/5ecaafc2bf21d922b0b86dacb71cc5db9d4fe66c) Thanks [@jesstelford](https://github.com/jesstelford)! - [ResourceList] Remove layout jank when bulk actions enabled and item selected
+
+* [`bc1f4aab1`](https://github.com/Shopify/polaris/commit/bc1f4aab13ce4f73488d9ced20f4b18dee4b8220) Thanks [@samrose3](https://github.com/samrose3)! - Reduced surrounding margin of Tooltip to allow for interaction with nearby UI elements.
+
 ## 11.12.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index 89e88908887..78e4abb070e 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.12.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.13.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.12.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.13.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index 01e6b21a35a..ec8a308d524 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.12.0",
+  "version": "11.13.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 22eb9915c12..7f73a2ec191 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,14 @@
 # polaris.shopify.com
 
+## 0.57.1
+
+### Patch Changes
+
+- [#10186](https://github.com/Shopify/polaris/pull/10186) [`b340df129`](https://github.com/Shopify/polaris/commit/b340df1295610906d531f28c065e10c4bcc63bd4) Thanks [@m4thieulavoie](https://github.com/m4thieulavoie)! - Fixed landing page for sandbox
+
+- Updated dependencies [[`5a5b3795a`](https://github.com/Shopify/polaris/commit/5a5b3795afa484db637fd5e151866149fd932b42), [`7891c7ed9`](https://github.com/Shopify/polaris/commit/7891c7ed961da9bb0bfbfeea9ca8e7432875074e), [`5ecaafc2b`](https://github.com/Shopify/polaris/commit/5ecaafc2bf21d922b0b86dacb71cc5db9d4fe66c), [`bc1f4aab1`](https://github.com/Shopify/polaris/commit/bc1f4aab13ce4f73488d9ced20f4b18dee4b8220), [`219be15aa`](https://github.com/Shopify/polaris/commit/219be15aa2d49e6f2f2b0eb3108fbfa3f1faa621)]:
+  - @shopify/polaris@11.13.0
+
 ## 0.57.0
 
 ### Minor Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 169d66e6731..e54bd637a9f 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.0",
+  "version": "0.57.1",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,7 +26,7 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.12.0",
+    "@shopify/polaris": "^11.13.0",
     "@shopify/polaris-icons": "^7.8.1",
     "@shopify/polaris-tokens": "^7.5.3",
     "@types/react-syntax-highlighter": "^15.5.6",

From ef7ddb4ac8fd1557fecda638c99bc64035224754 Mon Sep 17 00:00:00 2001
From: Maxime Cloutier <maxime.cloutier@shopify.com>
Date: Thu, 24 Aug 2023 09:08:39 -0500
Subject: [PATCH 016/102] ActionsList filtering (#9907)

Closes https://github.com/Shopify/polaris/issues/8686

## Why?
With extension GA comes a lot of potential new items in the `More
Actions` of pages supporting extensibility making it increasingly more
difficult for merchants to find what they are looking for.
The median number of links in "More action" menus on the products,
orders, and customers pages for high GMV merchants is already between 12
and 31. This number does not count any non-app actions that have been
added, so in reality, the number of actions is even higher. This is a
terrible UX for our merchants.

## Proposed Changes

Adding a search input that will appear anytime an ActionList has more
than 10 elements.

<img width="1015" alt="Screenshot 2023-08-09 at 9 06 13 AM"
src="https://github.com/Shopify/ui-api-design/assets/3555826/cb021493-ada4-4ac2-8991-42a6d979207a">
<img width="1261" alt="Screenshot 2023-08-10 at 1 52 48 PM"
src="https://github.com/Shopify/polaris/assets/3555826/6c2d9763-6b81-4808-9659-eb1db7b4bf1c">


This will give us the filtering behaviour in various areas and cases for
free:
- When actionGroups are rolledUp
- In Bulk Actions
- When actionGroups are not rolledUp, but still have more than 10 items

This will also enable the rest of the admin to leverage this behaviour
for free to give a consistent merchant experience.

## Open questions

Using the TextField (or SearchField from filters) creates a circular
dependency with the ActionList. What would be the right approach to have
the search input with an icon without creating circular dependencies?

## Resources

- Action Extensions tech doc -
https://docs.google.com/document/d/1BEAHpkfeyUTaxW3B18LjojimDmqNLr1Fc2wfpMXzQ64/edit
- Mockups for Action Extensions -
https://www.figma.com/proto/afrUykUTB0n4GB4evE5F6R/%F0%9F%92%8EAdmin-UI-extension-patterns?node-id=398-111475&scaling=scale-down&page-id=295%3A118673&starting-point-node-id=398%3A111475&show-proto-sidebar=1
- Post in Admin UX (WxM) with an initial proposal -
https://shopify.workplace.com/groups/1294395484626415/permalink/1321299791935984/
- Investigation of changes needed -
https://github.com/Shopify/app-ui/issues/36#issuecomment-1468527331

---------

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 .changeset/curly-chairs-speak.md              |   5 +
 polaris-react/locales/de.json                 |   7 +
 polaris-react/locales/en.json                 |   7 +
 polaris-react/locales/es.json                 |   7 +
 polaris-react/locales/nb.json                 |   7 +
 polaris-react/locales/pl.json                 |   7 +
 polaris-react/locales/pt-BR.json              |   7 +
 polaris-react/locales/pt-PT.json              |   7 +
 polaris-react/playground/DetailsPage.tsx      |   1 -
 .../src/components/ActionList/ActionList.tsx  |  72 ++++--
 .../components/SearchField/SearchField.scss   | 236 ++++++++++++++++++
 .../components/SearchField/SearchField.tsx    | 101 ++++++++
 .../components/SearchField/index.ts           |   1 +
 .../SearchField/tests/SearchField.test.tsx    |  76 ++++++
 .../components/ActionList/components/index.ts |   2 +
 .../ActionList/tests/ActionList.test.tsx      | 106 +++++++-
 16 files changed, 632 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/curly-chairs-speak.md
 create mode 100644 polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
 create mode 100644 polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
 create mode 100644 polaris-react/src/components/ActionList/components/SearchField/index.ts
 create mode 100644 polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx

diff --git a/.changeset/curly-chairs-speak.md b/.changeset/curly-chairs-speak.md
new file mode 100644
index 00000000000..9d0858b1a78
--- /dev/null
+++ b/.changeset/curly-chairs-speak.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add a search field to filter ActionList that have more than 10 items
diff --git a/polaris-react/locales/de.json b/polaris-react/locales/de.json
index 97576fc65e1..3c851469765 100644
--- a/polaris-react/locales/de.json
+++ b/polaris-react/locales/de.json
@@ -391,6 +391,13 @@
           "cancel": "Abbrechen"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Löschen",
+        "search": "Suchen",
+        "placeholder": "Aktionen durchsuchen"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json
index 75e21e7060b..1407ae0b7ed 100644
--- a/polaris-react/locales/en.json
+++ b/polaris-react/locales/en.json
@@ -8,6 +8,13 @@
         "rollupButton": "View actions"
       }
     },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Clear",
+        "search": "Search",
+        "placeholder": "Search actions"
+      }
+    },
     "Avatar": {
       "label": "Avatar",
       "labelWithInitials": "Avatar with initials {initials}"
diff --git a/polaris-react/locales/es.json b/polaris-react/locales/es.json
index e972c9a8567..f935bee6394 100644
--- a/polaris-react/locales/es.json
+++ b/polaris-react/locales/es.json
@@ -392,6 +392,13 @@
           "cancel": "Cancelar"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Borrar",
+        "search": "Búsqueda",
+        "placeholder": "Buscar acciones"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/nb.json b/polaris-react/locales/nb.json
index 5e34e39ab4e..2aeb7202b08 100644
--- a/polaris-react/locales/nb.json
+++ b/polaris-react/locales/nb.json
@@ -391,6 +391,13 @@
           "cancel": "Avbryt"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Tøm",
+        "search": "Søk",
+        "placeholder": "Søk i handlinger"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/pl.json b/polaris-react/locales/pl.json
index b62aad8ae65..606ad1b00a0 100644
--- a/polaris-react/locales/pl.json
+++ b/polaris-react/locales/pl.json
@@ -393,6 +393,13 @@
           "cancel": "Anuluj"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Wyczyść",
+        "search": "Szukaj",
+        "placeholder": "Szukaj czynności"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/pt-BR.json b/polaris-react/locales/pt-BR.json
index 0fa87854f96..663a1d02c5e 100644
--- a/polaris-react/locales/pt-BR.json
+++ b/polaris-react/locales/pt-BR.json
@@ -392,6 +392,13 @@
           "cancel": "Cancelar"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Limpar",
+        "search": "Pesquisar",
+        "placeholder": "Pesquisar ações"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/pt-PT.json b/polaris-react/locales/pt-PT.json
index a8f2caf1efb..0217e2b3843 100644
--- a/polaris-react/locales/pt-PT.json
+++ b/polaris-react/locales/pt-PT.json
@@ -392,6 +392,13 @@
           "cancel": "Cancelar"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Limpar",
+        "search": "Pesquisar",
+        "placeholder": "Pesquisar ações"
+      }
     }
   }
 }
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
index 46f54b024b4..a310fc2425b 100644
--- a/polaris-react/playground/DetailsPage.tsx
+++ b/polaris-react/playground/DetailsPage.tsx
@@ -580,7 +580,6 @@ export function DetailsPage() {
           actions: [
             {
               content: 'Embed on a website',
-
               onAction: () => console.log('embed'),
             },
             {
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 92ec54bdafc..07286654dd2 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -1,15 +1,16 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
 
+import type {ActionListItemDescriptor, ActionListSection} from '../../types';
+import {Key} from '../../types';
 import {
   wrapFocusNextFocusableMenuItem,
   wrapFocusPreviousFocusableMenuItem,
 } from '../../utilities/focus';
-import {KeypressListener} from '../KeypressListener';
-import {Key} from '../../types';
-import type {ActionListItemDescriptor, ActionListSection} from '../../types';
 import {Box} from '../Box';
+import {KeypressListener} from '../KeypressListener';
+import {useI18n} from '../../utilities/i18n';
 
-import {Section, Item} from './components';
+import {SearchField, Item, Section} from './components';
 import type {ItemProps} from './components';
 
 export interface ActionListProps {
@@ -31,8 +32,11 @@ export function ActionList({
   actionRole,
   onActionAnyItem,
 }: ActionListProps) {
+  const i18n = useI18n();
+
   let finalSections: readonly ActionListSection[] = [];
   const actionListRef = useRef<HTMLDivElement & HTMLUListElement>(null);
+  const [searchText, setSeachText] = useState('');
 
   if (items) {
     finalSections = [{items}, ...sections];
@@ -46,7 +50,14 @@ export function ActionList({
   const elementTabIndex =
     hasMultipleSections && actionRole === 'menuitem' ? -1 : undefined;
 
-  const sectionMarkup = finalSections.map((section, index) => {
+  const filteredSections = finalSections?.map((section) => ({
+    ...section,
+    items: section.items.filter((item) =>
+      item.content?.toLowerCase().includes(searchText.toLowerCase()),
+    ),
+  }));
+
+  const sectionMarkup = filteredSections.map((section, index) => {
     return section.items.length > 0 ? (
       <Section
         key={typeof section.title === 'string' ? section.title : index}
@@ -99,16 +110,47 @@ export function ActionList({
       </>
     ) : null;
 
+  const totalActions =
+    finalSections?.reduce(
+      (acc: number, section) => acc + section.items.length,
+      0,
+    ) || 0;
+
+  const totalFilteredActions = useMemo(() => {
+    const totalSectionItems =
+      filteredSections?.reduce(
+        (acc: number, section) => acc + section.items.length,
+        0,
+      ) || 0;
+
+    return totalSectionItems;
+  }, [filteredSections]);
+
+  const showSearch = totalActions >= 8;
+
   return (
-    <Box
-      as={hasMultipleSections ? 'ul' : 'div'}
-      ref={actionListRef}
-      role={elementRole}
-      tabIndex={elementTabIndex}
-    >
-      {listeners}
-      {sectionMarkup}
-    </Box>
+    <>
+      {showSearch && (
+        <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
+          <SearchField
+            placeholder={i18n.translate(
+              'Polaris.ActionList.SearchField.placeholder',
+            )}
+            value={searchText}
+            onChange={(value) => setSeachText(value)}
+          />
+        </Box>
+      )}
+      <Box
+        as={hasMultipleSections ? 'ul' : 'div'}
+        ref={actionListRef}
+        role={elementRole}
+        tabIndex={elementTabIndex}
+      >
+        {listeners}
+        {sectionMarkup}
+      </Box>
+    </>
   );
 }
 
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
new file mode 100644
index 00000000000..e5aa3d7158f
--- /dev/null
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -0,0 +1,236 @@
+@import '../../../../styles/common';
+
+$icon-size: 20px;
+$new-input-height: 36px;
+$search-icon-width: calc(#{$icon-size} + var(--p-space-4));
+
+$icon-size-se23: 18px;
+$new-input-height-se23: 32px;
+$search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
+
+.SearchField {
+  // stylelint-disable -- Polaris component custom properties
+  --pc-search-field-backdrop: 1;
+  --pc-search-field-input: 2;
+  --pc-search-field-icon: 3;
+  --pc-search-field-action: 3;
+  // stylelint-enable
+  z-index: var(--p-z-index-11);
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  border: var(--p-border-width-1) solid transparent;
+  width: 100%;
+}
+// We have both a focused class and a focus pseudo selector here
+// because we allow "faked" focus for when the search is still
+// active, but is not actually the focused element in the DOM
+// (for example, while selecting a value from a filter in the
+// search this input controls)
+.focused .Input,
+.Input:focus {
+  border: none;
+  color: var(--p-color-text);
+
+  #{$se23} & {
+    color: var(--p-color-text-inverse);
+  }
+
+  &::placeholder {
+    color: var(--p-color-text-subdued);
+
+    #{$se23} & {
+      color: var(--p-color-text-inverse-subdued);
+    }
+  }
+}
+
+.Input:focus-visible {
+  ~ .Backdrop {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    @include focus-ring($style: 'focused');
+  }
+
+  ~ .BackdropShowFocusBorder {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
+  }
+
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  ~ .Icon svg {
+    fill: var(--p-color-icon);
+
+    #{$se23} & {
+      fill: var(--p-color-icon-subdued);
+    }
+  }
+}
+
+.Input:focus-visible:not(:active) {
+  #{$se23} & {
+    // stylelint-disable-next-line -- se23
+    ~ .Backdrop {
+      outline: var(--p-border-width-2) solid
+        var(--p-color-border-interactive-focus);
+      outline-offset: var(--p-space-05);
+    }
+
+    // stylelint-disable-next-line -- se23
+    ~ .Icon svg {
+      fill: var(--p-color-icon-subdued);
+    }
+  }
+}
+
+.Input {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  @include text-style-input;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--pc-search-field-input);
+  height: $new-input-height;
+  width: 100%;
+  padding: 0 0 0 $search-icon-width;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: var(--p-color-text);
+  will-change: fill, color;
+  transition: fill var(--p-motion-duration-200) var(--p-motion-ease),
+    color var(--p-motion-duration-200) var(--p-motion-ease);
+
+  #{$se23} & {
+    padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
+    color: var(--p-color-text-inverse-subdued);
+    height: $new-input-height-se23;
+    border: var(--p-border-width-1-experimental) solid
+      var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-2);
+
+    &:hover {
+      border-color: var(--p-color-border-hover);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
+    }
+  }
+
+  &::placeholder {
+    color: var(--p-color-text);
+
+    #{$se23} & {
+      color: var(--p-color-text-inverse-subdued);
+    }
+  }
+
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+}
+
+.Icon {
+  position: absolute;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--pc-search-field-icon);
+  top: 50%;
+  left: var(--p-space-2);
+  display: flex;
+  height: $icon-size;
+  pointer-events: none;
+  transform: translateY(-50%);
+
+  #{$se23} & {
+    height: $icon-size-se23;
+    width: $icon-size-se23;
+  }
+
+  svg {
+    fill: var(--p-color-icon);
+
+    #{$se23} & {
+      fill: var(--p-color-icon-subdued);
+    }
+  }
+}
+
+.Clear {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  @include focus-ring($size: 'wide');
+  position: relative;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--pc-search-field-action);
+  border: none;
+  appearance: none;
+  background: transparent;
+  padding: var(--p-space-2);
+
+  #{$se23} & {
+    position: absolute;
+    right: var(--p-space-1);
+    padding: var(--p-space-1);
+  }
+
+  svg {
+    fill: var(--p-color-icon);
+
+    #{$se23} & {
+      fill: var(--p-color-icon-subdued);
+    }
+  }
+
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    fill: var(--p-color-icon-hover);
+
+    #{$se23} & {
+      fill: var(--p-color-icon-inverse);
+    }
+  }
+
+  &:focus-visible {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    @include focus-ring($size: 'wide', $style: 'focused');
+  }
+
+  &:active {
+    svg {
+      fill: var(--p-color-icon-active);
+    }
+
+    &::after {
+      border: none;
+    }
+  }
+}
+
+.Backdrop {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  @include focus-ring($border-width: 1px);
+  position: absolute;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  z-index: var(--pc-text-field-backdrop);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--p-color-bg);
+  border: var(--p-border-width-1) solid var(--p-color-border-input);
+  // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
+  border-top-color: #898f94;
+  border-radius: var(--p-border-radius-1);
+  pointer-events: none;
+
+  #{$se23} & {
+    border-radius: var(--p-border-radius-2);
+    border-width: var(--p-border-width-1-experimental);
+    background-color: var(--p-color-bg-input);
+  }
+}
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx b/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
new file mode 100644
index 00000000000..ae6b85e56cd
--- /dev/null
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
@@ -0,0 +1,101 @@
+import {CircleCancelMinor, SearchMinor} from '@shopify/polaris-icons';
+import React, {useCallback, useId, useRef} from 'react';
+
+import {useI18n} from '../../../../utilities/i18n';
+import {Icon} from '../../../Icon';
+import {Text} from '../../../Text';
+
+import styles from './SearchField.scss';
+
+export interface SearchFieldProps {
+  /** Initial value for the input */
+  value: string;
+  /** Hint text to display */
+  placeholder?: string;
+  /** Callback when value is changed */
+  onChange(value: string): void;
+}
+
+export function SearchField({value, placeholder, onChange}: SearchFieldProps) {
+  const i18n = useI18n();
+
+  const input = useRef<HTMLInputElement | null>(null);
+  const searchId = useId();
+
+  const handleChange = useCallback(
+    ({currentTarget}: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(currentTarget.value);
+    },
+    [onChange],
+  );
+
+  const handleClear = useCallback(() => {
+    if (!input.current) {
+      return;
+    }
+
+    input.current.value = '';
+    onChange('');
+    input.current.focus();
+  }, [onChange]);
+
+  const clearMarkup = value !== '' && (
+    <button
+      type="button"
+      aria-label={i18n.translate(
+        'Polaris.ActionList.SearchField.clearButtonLabel',
+      )}
+      className={styles.Clear}
+      onClick={handleClear}
+      onBlur={() => {
+        handleClear();
+      }}
+    >
+      <Icon source={CircleCancelMinor} />
+    </button>
+  );
+
+  const handleRef = (ref: HTMLInputElement) => {
+    input.current = ref;
+
+    // It won't focus if it's on the same tick as when it renders
+    setTimeout(() => {
+      ref?.focus();
+    });
+  };
+
+  return (
+    <div className={styles.SearchField}>
+      <Text as="span" visuallyHidden>
+        <label htmlFor={searchId}>
+          {i18n.translate('Polaris.ActionList.SearchField.search')}
+        </label>
+      </Text>
+      <input
+        id={searchId}
+        className={styles.Input}
+        placeholder={placeholder}
+        type="search"
+        autoCapitalize="off"
+        autoComplete="off"
+        autoCorrect="off"
+        ref={handleRef}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={preventDefault}
+      />
+      <span className={styles.Icon}>
+        <Icon source={SearchMinor} />
+      </span>
+
+      {clearMarkup}
+      <div className={styles.Backdrop} />
+    </div>
+  );
+}
+
+function preventDefault(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
+}
diff --git a/polaris-react/src/components/ActionList/components/SearchField/index.ts b/polaris-react/src/components/ActionList/components/SearchField/index.ts
new file mode 100644
index 00000000000..9f5ef334723
--- /dev/null
+++ b/polaris-react/src/components/ActionList/components/SearchField/index.ts
@@ -0,0 +1 @@
+export * from './SearchField';
diff --git a/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx b/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx
new file mode 100644
index 00000000000..a9142825ed2
--- /dev/null
+++ b/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import {CircleCancelMinor} from '@shopify/polaris-icons';
+import {mountWithApp} from 'tests/utilities';
+
+import {Icon} from '../../../../Icon';
+import {SearchField} from '../SearchField';
+
+describe('<SearchField />', () => {
+  it('passes the placeholder prop to input', () => {
+    const textField = mountWithApp(
+      <SearchField value="" onChange={noop} placeholder="hello polaris" />,
+    );
+
+    expect(textField).toContainReactComponent('input', {
+      placeholder: 'hello polaris',
+    });
+  });
+
+  describe('clear content', () => {
+    it('will render a cancel icon when a value is provided', () => {
+      const textField = mountWithApp(
+        <SearchField value="hello polaris" onChange={noop} />,
+      );
+
+      expect(textField).toContainReactComponent(Icon, {
+        source: CircleCancelMinor,
+      });
+    });
+
+    it('will call the onChange with an empty string when the cancel button is pressed', () => {
+      const spy = jest.fn();
+      const textField = mountWithApp(
+        <SearchField value="hello polaris" onChange={spy} />,
+      );
+
+      textField.find('button')!.trigger('onClick');
+
+      expect(spy).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('onChange()', () => {
+    it('is called with the new value', () => {
+      const spy = jest.fn();
+      const newValue = 'hello polaris';
+      const textField = mountWithApp(
+        <SearchField value={newValue} onChange={spy} />,
+      );
+
+      textField.find('input')!.trigger('onChange', {
+        currentTarget: {
+          value: newValue,
+        },
+      });
+
+      expect(spy).toHaveBeenCalledWith(newValue);
+    });
+  });
+
+  describe('onKeyDown', () => {
+    it("will prevent default on the 'enter' keydown", () => {
+      const spy = jest.fn();
+      const textField = mountWithApp(
+        <SearchField value="hello polaris" onChange={noop} />,
+      );
+
+      textField.find('input')!.trigger('onKeyDown', {
+        key: 'Enter',
+        preventDefault: spy,
+      });
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
+
+function noop() {}
diff --git a/polaris-react/src/components/ActionList/components/index.ts b/polaris-react/src/components/ActionList/components/index.ts
index 1f6e50145f3..edefe0dc331 100644
--- a/polaris-react/src/components/ActionList/components/index.ts
+++ b/polaris-react/src/components/ActionList/components/index.ts
@@ -1,3 +1,5 @@
 export * from './Item';
 
 export * from './Section';
+
+export * from './SearchField';
diff --git a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
index 14ed6e9cab5..ed10230353e 100644
--- a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
+++ b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
@@ -4,7 +4,7 @@ import {mountWithApp} from 'tests/utilities';
 
 import {ActionList} from '../ActionList';
 import {Badge} from '../../Badge';
-import {Item, Section} from '../components';
+import {Item, SearchField, Section} from '../components';
 import {Key} from '../../../types';
 import {KeypressListener} from '../../KeypressListener';
 
@@ -236,4 +236,108 @@ describe('<ActionList />', () => {
       actionListButtons[actionListButtons.length - 1].domNode,
     );
   });
+
+  it('does not render search with 7 or less items', () => {
+    const actionList = mountWithApp(
+      <ActionList
+        items={[
+          {content: 'Item 1'},
+          {content: 'Item 2'},
+          {content: 'Item 3'},
+          {content: 'Item 4'},
+          {content: 'Item 5'},
+          {content: 'Item 6'},
+          {content: 'Item 7'},
+        ]}
+      />,
+    );
+
+    expect(actionList).not.toContainReactComponentTimes(SearchField, 1);
+  });
+
+  it('renders search with 8 or more items', () => {
+    const actionList = mountWithApp(
+      <ActionList
+        items={[
+          {content: 'Item 1'},
+          {content: 'Item 2'},
+          {content: 'Item 3'},
+          {content: 'Item 4'},
+          {content: 'Item 5'},
+          {content: 'Item 6'},
+          {content: 'Item 7'},
+          {content: 'Item 8'},
+          {content: 'Item 9'},
+          {content: 'Item 10'},
+        ]}
+      />,
+    );
+
+    expect(actionList).toContainReactComponentTimes(SearchField, 1);
+  });
+
+  it('renders search with 10 or more items or section items', () => {
+    const actionList = mountWithApp(
+      <ActionList
+        items={[{content: 'Item 1'}, {content: 'Item 2'}]}
+        sections={[
+          {
+            title: '',
+            items: [{content: 'Item 3'}, {content: 'Item 4'}],
+          },
+          {
+            title: '',
+            items: [
+              {content: 'Item 4'},
+              {content: 'Item 5'},
+              {content: 'Item 6'},
+              {content: 'Item 7'},
+              {content: 'Item 8'},
+              {content: 'Item 9'},
+              {content: 'Item 10'},
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(actionList).toContainReactComponentTimes(SearchField, 1);
+  });
+
+  it('filters items and section items with case-insensitive search', () => {
+    const actionList = mountWithApp(
+      <ActionList
+        items={[{content: 'IteM 1'}, {content: 'Item 2'}]}
+        sections={[
+          {
+            title: 'Section 1',
+            items: [{content: 'Item 3'}, {content: 'Item 4'}],
+          },
+          {
+            title: 'Section 2',
+            items: [
+              {content: 'Item 4'},
+              {content: 'Item 5'},
+              {content: 'Item 6'},
+              {content: 'Item 7'},
+              {content: 'Item 8'},
+              {content: 'Item 9'},
+              {content: 'Item 10'},
+            ],
+          },
+        ]}
+      />,
+    );
+
+    const textField = actionList.find('input');
+    textField!.trigger('onChange', {
+      currentTarget: {
+        value: 'item 1',
+      },
+    });
+
+    expect(actionList).toContainReactComponentTimes(Item, 2);
+    // First Section will have no title since items without a section are grouped into a Section automatically
+    expect(actionList.findAll(Section)[1]).toContainReactText('Section 2');
+  });
 });

From 338eed47a1e4189572d8b22cf309fb37f81ae53d Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 24 Aug 2023 07:35:14 -0700
Subject: [PATCH 017/102] Create Code style guide.md (#10176)

First draft of a code style guide to help with consistency

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Co-authored-by: Sam Rose <11774595+samrose3@users.noreply.github.com>
---
 documentation/Code style guide.md | 44 +++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 documentation/Code style guide.md

diff --git a/documentation/Code style guide.md b/documentation/Code style guide.md
new file mode 100644
index 00000000000..f0007330a8b
--- /dev/null
+++ b/documentation/Code style guide.md	
@@ -0,0 +1,44 @@
+# `@shopify/polaris` Code Style Guide
+
+## Introduction
+
+The `@shopify/polaris` code style guide provides guidelines and best practices for writing consistent and maintainable code in the `@shopify/polaris` React component library. Adhering to this guide will help ensure code readability, consistency, and collaboration among developers. These guidelines are for items that are not enforced by automated tools like prettier, eslint, or stylelint-polaris
+
+## Table of Contents
+
+1. [Naming Conventions](#naming-conventions)
+1. [Control Structures and Flow](#control-structures-and-flow)
+1. [Error Handling](#error-handling)
+1. [Code Organization and Structure]1#code-organization-and-structure)
+1. [Examples and Code Snippets](#examples-and-code-snippets)
+
+## Naming Conventions
+
+- Use camel case for variable and function names.
+- Use Pascal case for component names.
+- Use Kebab case for props with a predefined list of strings.
+- Use descriptive and meaningful names that accurately represent the purpose of the variable, function, or component.
+
+## Control Structures and Flow
+
+- Use early returns or guard clauses to handle exceptional cases and reduce nesting.
+
+## Error Handling
+
+- Use `try-catch` blocks to handle exceptions and errors.
+- Provide meaningful error messages that help developers understand the issue.
+- Log errors appropriately for debugging and troubleshooting purposes.
+
+## Code Organization and Structure
+
+- Organize code files and directories logically and consistently.
+- Use meaningful and descriptive file and directory names.
+- Follow the recommended folder structure for components, utilities, and tests.
+- Import modules and components in alphabetical order.
+- Group related functions and variables together within a file.
+- Include [JSDoc tags](https://jsdoc.app/) to describe default prop values
+
+## Examples and Code Snippets
+
+- Include examples and code snippets in the documentation to demonstrate usage and best practices.
+- Provide clear and concise code examples that highlight the recommended coding style and patterns.

From ac044b3c96441da6cb28e280e799321c8f557341 Mon Sep 17 00:00:00 2001
From: Peter Lazzarino <peter.lazzarino@shopify.com>
Date: Thu, 24 Aug 2023 15:54:22 -0400
Subject: [PATCH 018/102] [Avatar] Override SE23 background override with
 imageHasLoaded (#10211)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/10203


### WHAT is this pull request doing?

Changing Avatar background to transparent if there is an image passed in

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/popular-pumas-sin.md                 | 5 +++++
 polaris-react/src/components/Avatar/Avatar.scss | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/popular-pumas-sin.md

diff --git a/.changeset/popular-pumas-sin.md b/.changeset/popular-pumas-sin.md
new file mode 100644
index 00000000000..b49d867553e
--- /dev/null
+++ b/.changeset/popular-pumas-sin.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Ensure Avatar has no background color if an source prop is passed in to allow for transparent images
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 3e9699fd857..879774563ff 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -28,6 +28,10 @@
     // stylelint-enable
     background: var(--p-color-avatar-background-experimental);
     color: var(--p-color-avatar-color-experimental);
+
+    &.imageHasLoaded {
+      background: transparent;
+    }
   }
 
   @media (forced-colors: active) {

From 90eac181d5d56970ffabd2237e97cd6efacc02f7 Mon Sep 17 00:00:00 2001
From: "translation-platform[bot]"
 <34770790+translation-platform[bot]@users.noreply.github.com>
Date: Fri, 25 Aug 2023 07:10:39 -0400
Subject: [PATCH 019/102] Update translations: default (#10219)

This PR modifies translations in the project. It will append multiple
commits and may add, modify, or delete translations. Feel free to merge
anytime.

## Before you deploy
- Check translations for malicious HTML.

## Merge conflicts?
<details>

If this PR has been open long enough that it has drifted out of sync
from the base branch (`main`) and it has developed merge conflicts as a
result, follow these steps, in order:

1. Close this PR.
2. Run the following Spy command in Slack, inserting the PR number in
the second argument:

> `@spy translation-platform force-pull Shopify/polaris
pull_request_number=<this PR>`.

The Spy command will recreate the translation commits based on the
latest commit on `main` and open a new PR.

</details>

## Questions?
Visit [#help-localization](https://shopify.slack.com/messages/C7TJQLVC7)
for questions about this pull request.

@Shopify/polaris-eng

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
---
 polaris-react/locales/cs.json    | 7 +++++++
 polaris-react/locales/da.json    | 7 +++++++
 polaris-react/locales/fi.json    | 7 +++++++
 polaris-react/locales/fr.json    | 7 +++++++
 polaris-react/locales/it.json    | 7 +++++++
 polaris-react/locales/ja.json    | 7 +++++++
 polaris-react/locales/ko.json    | 7 +++++++
 polaris-react/locales/nl.json    | 7 +++++++
 polaris-react/locales/sv.json    | 7 +++++++
 polaris-react/locales/th.json    | 7 +++++++
 polaris-react/locales/tr.json    | 7 +++++++
 polaris-react/locales/vi.json    | 7 +++++++
 polaris-react/locales/zh-CN.json | 7 +++++++
 polaris-react/locales/zh-TW.json | 7 +++++++
 14 files changed, 98 insertions(+)

diff --git a/polaris-react/locales/cs.json b/polaris-react/locales/cs.json
index de9eb1662a4..5647c67f7fe 100644
--- a/polaris-react/locales/cs.json
+++ b/polaris-react/locales/cs.json
@@ -393,6 +393,13 @@
         }
       },
       "searchFilterTooltipWithShortcut": "Hledejte a filtrujte (F)"
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Vymazat",
+        "search": "Hledat",
+        "placeholder": "Vyhledejte akce"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/da.json b/polaris-react/locales/da.json
index 6ed913a4247..702d7b1c917 100644
--- a/polaris-react/locales/da.json
+++ b/polaris-react/locales/da.json
@@ -391,6 +391,13 @@
           "cancel": "Annuller"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Ryd",
+        "search": "Søg",
+        "placeholder": "Søg efter handlinger"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/fi.json b/polaris-react/locales/fi.json
index 565800cfad4..e973d0667eb 100644
--- a/polaris-react/locales/fi.json
+++ b/polaris-react/locales/fi.json
@@ -391,6 +391,13 @@
         }
       },
       "searchFilterTooltipWithShortcut": "Hae ja suodata (F)"
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Tyhjennä",
+        "search": "Hae",
+        "placeholder": "Hae toimintoja"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/fr.json b/polaris-react/locales/fr.json
index 4544bf7e434..9b7af44e4d5 100644
--- a/polaris-react/locales/fr.json
+++ b/polaris-react/locales/fr.json
@@ -392,6 +392,13 @@
           "cancel": "Annuler"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Effacer",
+        "search": "Recherche",
+        "placeholder": "Rechercher des actions"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/it.json b/polaris-react/locales/it.json
index 5055987bd70..b2b85541213 100644
--- a/polaris-react/locales/it.json
+++ b/polaris-react/locales/it.json
@@ -392,6 +392,13 @@
           "cancel": "Annulla"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Cancella",
+        "search": "Cerca",
+        "placeholder": "Cerca azioni"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/ja.json b/polaris-react/locales/ja.json
index 94f36897ba3..d48f0c5c6a8 100644
--- a/polaris-react/locales/ja.json
+++ b/polaris-react/locales/ja.json
@@ -391,6 +391,13 @@
           "cancel": "キャンセル"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "クリア",
+        "search": "検索",
+        "placeholder": "アクションを検索"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/ko.json b/polaris-react/locales/ko.json
index 0f359d35e9f..02a30ca4c95 100644
--- a/polaris-react/locales/ko.json
+++ b/polaris-react/locales/ko.json
@@ -391,6 +391,13 @@
           "cancel": "취소"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "지우기",
+        "search": "검색",
+        "placeholder": "작업 검색"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/nl.json b/polaris-react/locales/nl.json
index 147dabe55f3..74d8c3e883d 100644
--- a/polaris-react/locales/nl.json
+++ b/polaris-react/locales/nl.json
@@ -391,6 +391,13 @@
           "cancel": "Annuleren"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Wissen",
+        "search": "Zoeken",
+        "placeholder": "Zoekacties"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/sv.json b/polaris-react/locales/sv.json
index c7344ca6b0f..992800152f5 100644
--- a/polaris-react/locales/sv.json
+++ b/polaris-react/locales/sv.json
@@ -391,6 +391,13 @@
           "cancel": "Avbryt"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Rensa",
+        "search": "Sök",
+        "placeholder": "Sök åtgärder"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/th.json b/polaris-react/locales/th.json
index 42110af3276..6949d703ab5 100644
--- a/polaris-react/locales/th.json
+++ b/polaris-react/locales/th.json
@@ -391,6 +391,13 @@
           "cancel": "ยกเลิก"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "ล้าง",
+        "search": "ค้นหา",
+        "placeholder": "ค้นหาการดำเนินการ"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/tr.json b/polaris-react/locales/tr.json
index f8298d3f55c..1c3fd59b37c 100644
--- a/polaris-react/locales/tr.json
+++ b/polaris-react/locales/tr.json
@@ -391,6 +391,13 @@
           "cancel": "İptal"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Temizle",
+        "search": "Ara",
+        "placeholder": "Eylemleri arayın"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/vi.json b/polaris-react/locales/vi.json
index fc283a0507f..e8984187ce3 100644
--- a/polaris-react/locales/vi.json
+++ b/polaris-react/locales/vi.json
@@ -391,6 +391,13 @@
           "cancel": "Hủy"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "Xóa",
+        "search": "Tìm kiếm",
+        "placeholder": "Tìm kiếm thao tác"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/zh-CN.json b/polaris-react/locales/zh-CN.json
index 17d5c1034d9..d310b7b5f45 100644
--- a/polaris-react/locales/zh-CN.json
+++ b/polaris-react/locales/zh-CN.json
@@ -391,6 +391,13 @@
           "cancel": "取消"
         }
       }
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "清除",
+        "search": "搜索",
+        "placeholder": "搜索操作"
+      }
     }
   }
 }
diff --git a/polaris-react/locales/zh-TW.json b/polaris-react/locales/zh-TW.json
index 1de5abc5b87..ee963cf4a8a 100644
--- a/polaris-react/locales/zh-TW.json
+++ b/polaris-react/locales/zh-TW.json
@@ -391,6 +391,13 @@
         }
       },
       "searchFilterTooltipWithShortcut": "搜尋和篩選 (F)"
+    },
+    "ActionList": {
+      "SearchField": {
+        "clearButtonLabel": "清除",
+        "search": "搜尋",
+        "placeholder": "搜尋動作"
+      }
     }
   }
 }

From e4a6d47abd338b820737fec5acb1a566c38a1913 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Fri, 25 Aug 2023 08:32:56 -0700
Subject: [PATCH 020/102] Fix rename prop migration (#10215)

### WHY are these changes introduced?

`react-rename-component-prop` migration was not working as expected when
there were multiple props on a component

<img width="552" alt="Screenshot 2023-08-24 at 10 12 10 AM"
src="https://github.com/Shopify/polaris/assets/3474483/5ca5de71-f587-49cf-87ea-5fc73d298864">

### WHAT is this pull request doing?

- Adds more test cases
- Fixes migration

<img width="590" alt="Screenshot 2023-08-24 at 10 12 35 AM"
src="https://github.com/Shopify/polaris/assets/3474483/8dc1ee41-1900-4383-81e0-7635b2d2fa0b">

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/odd-owls-know.md                   |  5 ++++
 ...name-component-prop-with-boolean.input.tsx | 11 +++++++++
 ...ame-component-prop-with-boolean.output.tsx | 11 +++++++++
 ...me-component-prop-with-new-value.input.tsx | 14 ++---------
 ...e-component-prop-with-new-value.output.tsx | 16 +++----------
 .../react-rename-component-prop.input.tsx     | 16 +++----------
 .../react-rename-component-prop.output.tsx    | 16 +++----------
 ...nd-component-prop-with-new-value.input.tsx | 23 ++++---------------
 ...d-component-prop-with-new-value.output.tsx | 23 ++++---------------
 .../tests/transform.test.ts                   | 15 +++++++++---
 polaris-migrator/src/utilities/jsx.ts         |  2 +-
 11 files changed, 61 insertions(+), 91 deletions(-)
 create mode 100644 .changeset/odd-owls-know.md
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx

diff --git a/.changeset/odd-owls-know.md b/.changeset/odd-owls-know.md
new file mode 100644
index 00000000000..32f5fedb9ba
--- /dev/null
+++ b/.changeset/odd-owls-know.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Fixed a bug in the rename prop migration
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
new file mode 100644
index 00000000000..7722c1ec1c5
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.input.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <MyComponent foo="bar" booleanProp>
+      Hello world
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx
new file mode 100644
index 00000000000..aa4c4dde16a
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-boolean.output.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <MyComponent foo="bar" variant="boolean-prop-value">
+      Hello world
+    </MyComponent>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
index b8c9f5aad08..45d5fbc5253 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.input.tsx
@@ -1,17 +1,7 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
index 18b133d61b8..3bd57828b80 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-new-value.output.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent newProp="new value">
+    <MyComponent newProp="new-value">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
index 4be474e3865..c13f80d2110 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.input.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent prop="value">
+    <MyComponent prop="value" foo="bar">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
index 9305ddb375b..5a1d02af126 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop.output.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp || props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
 export function App() {
   return (
-    <MyComponent newProp="value">
+    <MyComponent newProp="value" foo="bar">
       Hello
       <Child prop="value" />
     </MyComponent>
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
index 0f5b6caf11e..3a50013ffda 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.input.tsx
@@ -1,30 +1,17 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function CompoundComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
-function SubComponent({...props}: any) {
-  return <div {...props} />;
-}
+MyComponent.CompoundComponent = CompoundComponent;
 
 export function App() {
   return (
     <MyComponent>
-      <MyComponent.SubComponent prop="value" />
+      <MyComponent.CompoundComponent prop="value" />
       Hello
       <Child prop="value" />
     </MyComponent>
   );
 }
-
-MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
index 2983b6a8ca5..3a04033b502 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-compound-component-prop-with-new-value.output.tsx
@@ -1,30 +1,17 @@
 import React from 'react';
 
-interface MyComponentProps {
-  prop?: string;
-  newProp?: string;
-  children?: React.ReactNode;
-}
-
-const Child = (props: {prop: string}) => <>{props.prop}</>;
-
-function MyComponent(props: MyComponentProps) {
-  const value = props.newProp ?? props.prop;
-  return <div data-prop={value}>{props.children}</div>;
-}
+declare function MyComponent(props: any): JSX.Element;
+declare function CompoundComponent(props: any): JSX.Element;
+declare function Child(props: any): JSX.Element;
 
-function SubComponent({...props}: any) {
-  return <div {...props} />;
-}
+MyComponent.CompoundComponent = CompoundComponent;
 
 export function App() {
   return (
     <MyComponent>
-      <MyComponent.SubComponent newProp="new value" />
+      <MyComponent.CompoundComponent newProp="new-value" />
       Hello
       <Child prop="value" />
     </MyComponent>
   );
 }
-
-MyComponent.SubComponent = SubComponent;
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
index 304afbe4f8e..551f612f473 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
@@ -16,16 +16,25 @@ const fixtures = [
       componentName: 'MyComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new value',
+      newValue: 'new-value',
     },
   },
   {
     name: 'react-rename-compound-component-prop-with-new-value',
     options: {
-      componentName: 'MyComponent.SubComponent',
+      componentName: 'MyComponent.CompoundComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new value',
+      newValue: 'new-value',
+    },
+  },
+  {
+    name: 'react-rename-component-prop-with-boolean',
+    options: {
+      componentName: 'MyComponent',
+      from: 'booleanProp',
+      to: 'variant',
+      newValue: 'boolean-prop-value',
     },
   },
 ];
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index b351ae5a143..a46c9e608c0 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -165,7 +165,7 @@ export function renameProps(
     const isFromProp = (prop: unknown): prop is keyof typeof props =>
       Object.keys(props).includes(prop as string);
 
-    if (node.type !== 'JSXAttribute' && !isFromProp(node.name.name)) {
+    if (!(node.type === 'JSXAttribute' && isFromProp(node.name.name))) {
       return node;
     }
 

From 1947b469144f8e0567fb69f06391a3fecbfe5b11 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Mon, 28 Aug 2023 13:57:41 -0400
Subject: [PATCH 021/102] Allow value changes in prop migration (#10246)

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/10233

### WHAT is this pull request doing?

Necessary for Icon changes where we're changing `color` to `tone`, and
also mapping `highlight` to `info`, `warning` to `caution`.
---
 .changeset/breezy-badgers-bow.md                 |  5 +++++
 ...-component-prop-with-specific-value.input.tsx | 16 ++++++++++++++++
 ...component-prop-with-specific-value.output.tsx | 16 ++++++++++++++++
 .../tests/transform.test.ts                      | 16 +++++++++++++---
 .../react-rename-component-prop/transform.ts     | 13 ++++---------
 polaris-migrator/src/utilities/jsx.ts            | 13 ++++++++-----
 6 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/breezy-badgers-bow.md
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx
 create mode 100644 polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx

diff --git a/.changeset/breezy-badgers-bow.md b/.changeset/breezy-badgers-bow.md
new file mode 100644
index 00000000000..57392e767f3
--- /dev/null
+++ b/.changeset/breezy-badgers-bow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added the ability to migrate prop values
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx
new file mode 100644
index 00000000000..cab4daf08c6
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.input.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <>
+      <MyComponent foo="bar" prop="non-targetted-value">
+        Hello world
+      </MyComponent>
+      <MyComponent foo="bar" prop="targetted-value">
+        Hello world
+      </MyComponent>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx
new file mode 100644
index 00000000000..2dabc875afe
--- /dev/null
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/react-rename-component-prop-with-specific-value.output.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+declare function MyComponent(props: any): JSX.Element;
+
+export function App() {
+  return (
+    <>
+      <MyComponent foo="bar" variant="non-targetted-value">
+        Hello world
+      </MyComponent>
+      <MyComponent foo="bar" variant="new-targetted-value">
+        Hello world
+      </MyComponent>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
index 551f612f473..928a361c89b 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/tests/transform.test.ts
@@ -16,7 +16,7 @@ const fixtures = [
       componentName: 'MyComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new-value',
+      toValue: 'new-value',
     },
   },
   {
@@ -25,7 +25,7 @@ const fixtures = [
       componentName: 'MyComponent.CompoundComponent',
       from: 'prop',
       to: 'newProp',
-      newValue: 'new-value',
+      toValue: 'new-value',
     },
   },
   {
@@ -34,7 +34,17 @@ const fixtures = [
       componentName: 'MyComponent',
       from: 'booleanProp',
       to: 'variant',
-      newValue: 'boolean-prop-value',
+      toValue: 'boolean-prop-value',
+    },
+  },
+  {
+    name: 'react-rename-component-prop-with-specific-value',
+    options: {
+      componentName: 'MyComponent',
+      from: 'prop',
+      to: 'variant',
+      fromValue: 'targetted-value',
+      toValue: 'new-targetted-value',
     },
   },
 ];
diff --git a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
index 3011ce3c3de..aa2508035c6 100644
--- a/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
+++ b/polaris-migrator/src/migrations/react-rename-component-prop/transform.ts
@@ -8,22 +8,17 @@ export default function transformer(
   options: Options,
 ) {
   const componentParts = options.componentName?.split('.');
-  if (
-    !options.componentName ||
-    !options.from ||
-    !options.to ||
-    componentParts?.length > 2
-  ) {
+  const {componentName, from, to, fromValue, toValue} = options;
+  if (!componentName || !from || !to || componentParts?.length > 2) {
     throw new Error(
       'Missing required options: componentName, from, to, or your compound component exceeds 2 levels',
     );
   }
 
   const source = j(file.source);
-  const componentName = options.componentName;
-  const props = {[options.from]: options.to};
+  const props = {[from]: to};
 
-  renameProps(j, source, componentName, props, options.newValue);
+  renameProps(j, source, componentName, props, fromValue, toValue);
 
   return source.toSource();
 }
diff --git a/polaris-migrator/src/utilities/jsx.ts b/polaris-migrator/src/utilities/jsx.ts
index a46c9e608c0..a63ab4dc6e9 100644
--- a/polaris-migrator/src/utilities/jsx.ts
+++ b/polaris-migrator/src/utilities/jsx.ts
@@ -127,7 +127,8 @@ export function renameProps(
   source: Collection<any>,
   componentName: string,
   props: {[from: string]: string},
-  newValue?: string,
+  fromValue?: string,
+  toValue?: string,
 ) {
   const [component, subcomponent] = componentName.split('.');
 
@@ -141,7 +142,7 @@ export function renameProps(
         element.node.openingElement.name.property.name === subcomponent
       ) {
         element.node.openingElement.attributes?.forEach((node) =>
-          updateNode(node, props, newValue),
+          updateNode(node, props, fromValue, toValue),
         );
       }
     });
@@ -151,7 +152,7 @@ export function renameProps(
   // Handle basic components
   source.findJSXElements(componentName)?.forEach((element) => {
     element.node.openingElement.attributes?.forEach((node) =>
-      updateNode(node, props, newValue),
+      updateNode(node, props, fromValue, toValue),
     );
   });
 
@@ -160,7 +161,8 @@ export function renameProps(
   function updateNode(
     node: any,
     props: {[from: string]: string},
-    newValue?: string,
+    fromValue?: string,
+    toValue?: string,
   ) {
     const isFromProp = (prop: unknown): prop is keyof typeof props =>
       Object.keys(props).includes(prop as string);
@@ -170,7 +172,8 @@ export function renameProps(
     }
 
     node.name.name = props[node.name.name];
-    node.value = j.stringLiteral(newValue ?? node.value.value);
+    if (fromValue && node.value.value !== fromValue) return node;
+    node.value = j.stringLiteral(toValue ?? node.value.value);
     return node;
   }
 }

From cd1578230c4cfdce510f3ad889859892370932dd Mon Sep 17 00:00:00 2001
From: Ash <siavash.etemadieh@shopify.com>
Date: Thu, 31 Aug 2023 17:28:03 +0100
Subject: [PATCH 022/102] Dynamic Fontsize for apple devices - target mobile
 only (#10288)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes an issue where Desktop Safari has a font scale which is too small.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

We are wrapping the use of `font: -apple-system-body` within the mobile
breakpoint to address the issue.
<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

**Desktop**
1. Visit
[storybook](https://5d559397bae39100201eedc1-jcrahhpmju.chromatic.com/?path=/story/all-components-text--variants)
in Desktop Safari
2. Open the Text Story
3. Ensure that the text size is normal
4. Double check with inspector and ensure `font:-apple-system-body` is
not being applied

**Mobile**
1. Visit
[storybook](https://5d559397bae39100201eedc1-jcrahhpmju.chromatic.com/?path=/story/all-components-text--variants)
in iOS Simulator
2. Open the Text Story
3. Within the inspector verify that `font: -apple-system-body` is being
applied
4. Change the accessibility font size and verify text size updates
correctly


### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/fresh-crews-try.md                             | 5 +++++
 polaris-react/src/components/AppProvider/AppProvider.scss | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fresh-crews-try.md

diff --git a/.changeset/fresh-crews-try.md b/.changeset/fresh-crews-try.md
new file mode 100644
index 00000000000..6bcc7d4c337
--- /dev/null
+++ b/.changeset/fresh-crews-try.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Only apply apple dynamic text to mobile breakpoint
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
index 878302d2f21..092a4835556 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.scss
+++ b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -61,8 +61,10 @@ html {
   font-sizes on descendant elements:
 */
 @supports (font: -apple-system-body) {
-  html {
-    font: -apple-system-body;
+  @media #{$p-breakpoints-sm-down} {
+    html {
+      font: -apple-system-body;
+    }
   }
 }
 

From 9b14e231af6b6de9fb6f8c6efd7c7c2523183cdb Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 31 Aug 2023 12:34:11 -0400
Subject: [PATCH 023/102] [ActionList.SearchField] Fix text and focus styles
 (#10287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes focus ring and text input styles on ActionList.SearchField with
beta flag enabled.

### WHAT is this pull request doing?

- Fixes focus ring styling
- FIxes text color on input
    <details>
      <summary>ActionList with search — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/e31a6b6b-6ca5-46f3-a240-ef1a76ae42cb"
alt="ActionList with search — before">
    </details>
    <details>
      <summary>ActionList with search — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/c7e7c729-3d55-4ffb-937f-7df379a15d10"
alt="ActionList with search — after">
    </details>

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this new story code in
<code>ActionList.stories.tsx</code> to test:</summary>

```jsx

export function WithSearch() {
  const [active, setActive] = useState(true);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <Button onClick={toggleActive} disclosure>
      More actions
    </Button>
  );

  return (
    <div style={{height: '250px'}}>
      <Popover
        active={active}
        activator={activator}
        autofocusTarget="first-node"
        onClose={toggleActive}
      >
        <ActionList
          actionRole="menuitem"
          sections={[
            {
              items: [
                {content: 'Import file', icon: ImportMinor},
                {content: 'Export file', icon: ExportMinor},
              ],
            },
            {
              items: [
                {content: 'Edit', icon: EditMinor},
                {content: 'Delete', icon: DeleteMinor},
              ],
            },
            {
              items: [
                {
                  content: 'Blog posts',
                  helpText: 'Manage your blog articles',
                },
                {
                  content: 'Blogs',
                  helpText: 'Manage blogs published to your Online Store',
                },
                {
                  active: true,
                  content: 'Active blogs',
                  helpText: 'This is helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
                {
                  disabled: true,
                  content: 'Disabled blogs',
                  helpText: 'This is also helpful text',
                  icon: ImportMinor,
                  suffix: <Icon source={TickSmallMinor} />,
                },
              ],
            },
          ]}
        />
      </Popover>
    </div>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/tough-frogs-speak.md                            | 5 +++++
 .../ActionList/components/SearchField/SearchField.scss     | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tough-frogs-speak.md

diff --git a/.changeset/tough-frogs-speak.md b/.changeset/tough-frogs-speak.md
new file mode 100644
index 00000000000..0181587dcad
--- /dev/null
+++ b/.changeset/tough-frogs-speak.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed focus ring and input text styles on `ActionList.SearchField` component
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
index e5aa3d7158f..9d17fba77f7 100644
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -34,7 +34,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   color: var(--p-color-text);
 
   #{$se23} & {
-    color: var(--p-color-text-inverse);
+    color: var(--p-color-text);
   }
 
   &::placeholder {
@@ -229,8 +229,13 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   pointer-events: none;
 
   #{$se23} & {
+    // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
+    @include no-focus-ring;
     border-radius: var(--p-border-radius-2);
     border-width: var(--p-border-width-1-experimental);
     background-color: var(--p-color-bg-input);
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-05);
   }
 }

From 72f55e32f81c1f639698f8556a76057114a2cf53 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:25:06 -0400
Subject: [PATCH 024/102] Check for string type before calling string method
 (#10292)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes #0000 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
---
 .changeset/hip-pears-work.md                         |  5 +++++
 .../src/components/ActionList/ActionList.tsx         | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/hip-pears-work.md

diff --git a/.changeset/hip-pears-work.md b/.changeset/hip-pears-work.md
new file mode 100644
index 00000000000..e1929344f86
--- /dev/null
+++ b/.changeset/hip-pears-work.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added check for string type before calling string method
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 07286654dd2..5ea8a908d46 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -44,6 +44,10 @@ export function ActionList({
     finalSections = sections;
   }
 
+  const isFilterable = finalSections?.some((section) =>
+    section.items.some((item) => typeof item.content === 'string'),
+  );
+
   const hasMultipleSections = finalSections.length > 1;
   const elementRole =
     hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
@@ -52,8 +56,10 @@ export function ActionList({
 
   const filteredSections = finalSections?.map((section) => ({
     ...section,
-    items: section.items.filter((item) =>
-      item.content?.toLowerCase().includes(searchText.toLowerCase()),
+    items: section.items.filter(({content}) =>
+      typeof content === 'string'
+        ? content?.toLowerCase().includes(searchText.toLowerCase())
+        : content,
     ),
   }));
 
@@ -130,7 +136,7 @@ export function ActionList({
 
   return (
     <>
-      {showSearch && (
+      {showSearch && isFilterable && (
         <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
           <SearchField
             placeholder={i18n.translate(

From 377a07401fe3109570991a2725bec7fa4f436e27 Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 31 Aug 2023 17:26:30 -0400
Subject: [PATCH 025/102] Version Packages (#10204)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-migrator@0.21.0

### Minor Changes

- [#10246](https://github.com/Shopify/polaris/pull/10246)
[`1947b4691`](https://github.com/Shopify/polaris/commit/1947b469144f8e0567fb69f06391a3fecbfe5b11)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added the ability
to migrate prop values

### Patch Changes

- [#10215](https://github.com/Shopify/polaris/pull/10215)
[`e4a6d47ab`](https://github.com/Shopify/polaris/commit/e4a6d47abd338b820737fec5acb1a566c38a1913)
Thanks [@aveline](https://github.com/aveline)! - Fixed a bug in the
rename prop migration

## @shopify/polaris@11.14.0

### Minor Changes

- [#9907](https://github.com/Shopify/polaris/pull/9907)
[`ef7ddb4ac`](https://github.com/Shopify/polaris/commit/ef7ddb4ac8fd1557fecda638c99bc64035224754)
Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Add a search
field to filter ActionList that have more than 10 items

### Patch Changes

- [#10288](https://github.com/Shopify/polaris/pull/10288)
[`cd1578230`](https://github.com/Shopify/polaris/commit/cd1578230c4cfdce510f3ad889859892370932dd)
Thanks [@ssetem](https://github.com/ssetem)! - Only apply apple dynamic
text to mobile breakpoint


- [#10292](https://github.com/Shopify/polaris/pull/10292)
[`72f55e32f`](https://github.com/Shopify/polaris/commit/72f55e32f81c1f639698f8556a76057114a2cf53)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added check for
string type before calling string method


- [#10211](https://github.com/Shopify/polaris/pull/10211)
[`ac044b3c9`](https://github.com/Shopify/polaris/commit/ac044b3c96441da6cb28e280e799321c8f557341)
Thanks [@peterlazzarino](https://github.com/peterlazzarino)! - Ensure
Avatar has no background color if an source prop is passed in to allow
for transparent images


- [#10287](https://github.com/Shopify/polaris/pull/10287)
[`9b14e231a`](https://github.com/Shopify/polaris/commit/9b14e231af6b6de9fb6f8c6efd7c7c2523183cdb)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed focus ring and
input text styles on `ActionList.SearchField` component

## polaris.shopify.com@0.57.2

### Patch Changes

- Updated dependencies
\[[`ef7ddb4ac`](https://github.com/Shopify/polaris/commit/ef7ddb4ac8fd1557fecda638c99bc64035224754),
[`cd1578230`](https://github.com/Shopify/polaris/commit/cd1578230c4cfdce510f3ad889859892370932dd),
[`72f55e32f`](https://github.com/Shopify/polaris/commit/72f55e32f81c1f639698f8556a76057114a2cf53),
[`ac044b3c9`](https://github.com/Shopify/polaris/commit/ac044b3c96441da6cb28e280e799321c8f557341),
[`9b14e231a`](https://github.com/Shopify/polaris/commit/9b14e231af6b6de9fb6f8c6efd7c7c2523183cdb)]:
    -   @shopify/polaris@11.14.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/breezy-badgers-bow.md |  5 -----
 .changeset/curly-chairs-speak.md |  5 -----
 .changeset/fresh-crews-try.md    |  5 -----
 .changeset/hip-pears-work.md     |  5 -----
 .changeset/odd-owls-know.md      |  5 -----
 .changeset/popular-pumas-sin.md  |  5 -----
 .changeset/tough-frogs-speak.md  |  5 -----
 polaris-migrator/CHANGELOG.md    | 10 ++++++++++
 polaris-migrator/package.json    |  4 ++--
 polaris-react/CHANGELOG.md       | 16 ++++++++++++++++
 polaris-react/README.md          |  4 ++--
 polaris-react/package.json       |  2 +-
 polaris.shopify.com/CHANGELOG.md |  7 +++++++
 polaris.shopify.com/package.json |  4 ++--
 14 files changed, 40 insertions(+), 42 deletions(-)
 delete mode 100644 .changeset/breezy-badgers-bow.md
 delete mode 100644 .changeset/curly-chairs-speak.md
 delete mode 100644 .changeset/fresh-crews-try.md
 delete mode 100644 .changeset/hip-pears-work.md
 delete mode 100644 .changeset/odd-owls-know.md
 delete mode 100644 .changeset/popular-pumas-sin.md
 delete mode 100644 .changeset/tough-frogs-speak.md

diff --git a/.changeset/breezy-badgers-bow.md b/.changeset/breezy-badgers-bow.md
deleted file mode 100644
index 57392e767f3..00000000000
--- a/.changeset/breezy-badgers-bow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-migrator': minor
----
-
-Added the ability to migrate prop values
diff --git a/.changeset/curly-chairs-speak.md b/.changeset/curly-chairs-speak.md
deleted file mode 100644
index 9d0858b1a78..00000000000
--- a/.changeset/curly-chairs-speak.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Add a search field to filter ActionList that have more than 10 items
diff --git a/.changeset/fresh-crews-try.md b/.changeset/fresh-crews-try.md
deleted file mode 100644
index 6bcc7d4c337..00000000000
--- a/.changeset/fresh-crews-try.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Only apply apple dynamic text to mobile breakpoint
diff --git a/.changeset/hip-pears-work.md b/.changeset/hip-pears-work.md
deleted file mode 100644
index e1929344f86..00000000000
--- a/.changeset/hip-pears-work.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Added check for string type before calling string method
diff --git a/.changeset/odd-owls-know.md b/.changeset/odd-owls-know.md
deleted file mode 100644
index 32f5fedb9ba..00000000000
--- a/.changeset/odd-owls-know.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-migrator': patch
----
-
-Fixed a bug in the rename prop migration
diff --git a/.changeset/popular-pumas-sin.md b/.changeset/popular-pumas-sin.md
deleted file mode 100644
index b49d867553e..00000000000
--- a/.changeset/popular-pumas-sin.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Ensure Avatar has no background color if an source prop is passed in to allow for transparent images
diff --git a/.changeset/tough-frogs-speak.md b/.changeset/tough-frogs-speak.md
deleted file mode 100644
index 0181587dcad..00000000000
--- a/.changeset/tough-frogs-speak.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed focus ring and input text styles on `ActionList.SearchField` component
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index 623439a9f57..9703508c91a 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @shopify/polaris-migrator
 
+## 0.21.0
+
+### Minor Changes
+
+- [#10246](https://github.com/Shopify/polaris/pull/10246) [`1947b4691`](https://github.com/Shopify/polaris/commit/1947b469144f8e0567fb69f06391a3fecbfe5b11) Thanks [@kyledurand](https://github.com/kyledurand)! - Added the ability to migrate prop values
+
+### Patch Changes
+
+- [#10215](https://github.com/Shopify/polaris/pull/10215) [`e4a6d47ab`](https://github.com/Shopify/polaris/commit/e4a6d47abd338b820737fec5acb1a566c38a1913) Thanks [@aveline](https://github.com/aveline)! - Fixed a bug in the rename prop migration
+
 ## 0.20.0
 
 ### Minor Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 78cd6ea36ee..730c5f95b83 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.13.0",
+    "@shopify/polaris": "^11.14.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index 105dc922d29..9e268e90116 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,21 @@
 # Changelog
 
+## 11.14.0
+
+### Minor Changes
+
+- [#9907](https://github.com/Shopify/polaris/pull/9907) [`ef7ddb4ac`](https://github.com/Shopify/polaris/commit/ef7ddb4ac8fd1557fecda638c99bc64035224754) Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Add a search field to filter ActionList that have more than 10 items
+
+### Patch Changes
+
+- [#10288](https://github.com/Shopify/polaris/pull/10288) [`cd1578230`](https://github.com/Shopify/polaris/commit/cd1578230c4cfdce510f3ad889859892370932dd) Thanks [@ssetem](https://github.com/ssetem)! - Only apply apple dynamic text to mobile breakpoint
+
+* [#10292](https://github.com/Shopify/polaris/pull/10292) [`72f55e32f`](https://github.com/Shopify/polaris/commit/72f55e32f81c1f639698f8556a76057114a2cf53) Thanks [@kyledurand](https://github.com/kyledurand)! - Added check for string type before calling string method
+
+- [#10211](https://github.com/Shopify/polaris/pull/10211) [`ac044b3c9`](https://github.com/Shopify/polaris/commit/ac044b3c96441da6cb28e280e799321c8f557341) Thanks [@peterlazzarino](https://github.com/peterlazzarino)! - Ensure Avatar has no background color if an source prop is passed in to allow for transparent images
+
+* [#10287](https://github.com/Shopify/polaris/pull/10287) [`9b14e231a`](https://github.com/Shopify/polaris/commit/9b14e231af6b6de9fb6f8c6efd7c7c2523183cdb) Thanks [@laurkim](https://github.com/laurkim)! - Fixed focus ring and input text styles on `ActionList.SearchField` component
+
 ## 11.13.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index 78e4abb070e..e044d994d5e 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.13.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.14.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.13.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.14.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index ec8a308d524..63dd3e4ae09 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.13.0",
+  "version": "11.14.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 7f73a2ec191..2118d27445a 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,12 @@
 # polaris.shopify.com
 
+## 0.57.2
+
+### Patch Changes
+
+- Updated dependencies [[`ef7ddb4ac`](https://github.com/Shopify/polaris/commit/ef7ddb4ac8fd1557fecda638c99bc64035224754), [`cd1578230`](https://github.com/Shopify/polaris/commit/cd1578230c4cfdce510f3ad889859892370932dd), [`72f55e32f`](https://github.com/Shopify/polaris/commit/72f55e32f81c1f639698f8556a76057114a2cf53), [`ac044b3c9`](https://github.com/Shopify/polaris/commit/ac044b3c96441da6cb28e280e799321c8f557341), [`9b14e231a`](https://github.com/Shopify/polaris/commit/9b14e231af6b6de9fb6f8c6efd7c7c2523183cdb)]:
+  - @shopify/polaris@11.14.0
+
 ## 0.57.1
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index e54bd637a9f..71cc81a65bd 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.1",
+  "version": "0.57.2",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,7 +26,7 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.13.0",
+    "@shopify/polaris": "^11.14.0",
     "@shopify/polaris-icons": "^7.8.1",
     "@shopify/polaris-tokens": "^7.5.3",
     "@types/react-syntax-highlighter": "^15.5.6",

From abb50250ec6af05dc4fef85d887fac37edfe1175 Mon Sep 17 00:00:00 2001
From: James Highfield <james.highfield@shopify.com>
Date: Fri, 1 Sep 2023 14:36:32 +0100
Subject: [PATCH 026/102] Focus text field when focusing spinner (#10276)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/102624

<!--
  Context about the problem that’s being addressed.
-->

When a `TextField` `Spinner` is clicked on, the button is the document's
active element (i.e. the button is focused). When hitting the enter key,
if the `TextField` is in a form, the form should be submitted, but
instead nothing happens. This differs from the default behaviour of an
`<input type="number">` where the input is focused after clicking a
spinner.

See this codesandbox for a replication of the issue:
https://codesandbox.io/s/cranky-rgb-ktnqml?file=/App.tsx

Note that despite the button being focused previously, hitting enter had
no effect, so this PR does not break or change existing functionality,
only fixes broken behaviour.

### WHAT is this pull request doing?

This PR changes the TextField component so the `input` is focused when
the stepper is clicked.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

[Tophat on
Storybook](https://5d559397bae39100201eedc1-wekmtcxvyp.chromatic.com/?path=/story/all-components-textfield--with-form-submit)

1. Click a stepper to increase the text field numerical value
2. Hit enter
3. The form should submit, and the text field should reset to '0'.
Previously nothing happened.


### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/warm-points-punch.md               |  5 +++
 .../src/components/TextField/TextField.scss   |  3 +-
 .../TextField/TextField.stories.tsx           | 37 +++++++++++++++++++
 .../src/components/TextField/TextField.tsx    | 13 ++++---
 .../TextField/components/Spinner/Spinner.tsx  |  2 +-
 .../TextField/tests/TextField.test.tsx        | 29 +++++++++++++--
 6 files changed, 77 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/warm-points-punch.md

diff --git a/.changeset/warm-points-punch.md b/.changeset/warm-points-punch.md
new file mode 100644
index 00000000000..c53b52d0061
--- /dev/null
+++ b/.changeset/warm-points-punch.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated `TextField` of `type` `number` to focus when a `Spinner` button is clicked
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index 69818ed8ce9..7bd770b94a8 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -70,10 +70,11 @@ $spinner-icon-size: 12px;
 
 .focus > .Input,
 .focus > .VerticalContent,
+.TextField:focus-within > .Input,
 .Input:focus-visible {
   outline: none;
 
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- outline based on child focus requires complex specificity
   ~ .Backdrop {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
index e32a5e2b30d..ce3972e5845 100644
--- a/polaris-react/src/components/TextField/TextField.stories.tsx
+++ b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -4,14 +4,17 @@ import {
   Button,
   LegacyCard,
   ChoiceList,
+  Form,
   FormLayout,
   InlineError,
   Select,
   LegacyStack,
   Tag,
+  Text,
   TextField,
   Icon,
   Tooltip,
+  VerticalStack,
 } from '@shopify/polaris';
 import {
   DeleteMinor,
@@ -829,3 +832,37 @@ export function All() {
     </FormLayout>
   );
 }
+
+export function WithFormSubmit() {
+  const [adjustment, setAdjustment] = useState('0');
+  const [onHandTotal, setOnHandTotal] = useState(0);
+
+  return (
+    <VerticalStack gap="2">
+      <Form
+        onSubmit={(event) => {
+          event.preventDefault();
+          setAdjustment('0');
+          setOnHandTotal(onHandTotal + parseInt(adjustment, 10));
+        }}
+      >
+        <FormLayout>
+          <Text as="h2" variant="headingSm">
+            On hand quantity ({onHandTotal.toString()})
+          </Text>
+          <TextField
+            label="Adjustment"
+            value={adjustment}
+            onChange={(value) => setAdjustment(value)}
+            autoComplete="off"
+            type="number"
+            selectTextOnFocus
+          />
+          <Button primary submit disabled={isNaN(parseInt(adjustment, 10))}>
+            Save
+          </Button>
+        </FormLayout>
+      </Form>
+    </VerticalStack>
+  );
+}
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index cfa4da3b22e..3de0a291139 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -401,11 +401,11 @@ export function TextField({
     ],
   );
 
-  const handleButtonRelease = useCallback(() => {
+  const handleSpinnerButtonRelease = useCallback(() => {
     clearTimeout(buttonPressTimer.current);
   }, []);
 
-  const handleButtonPress: SpinnerProps['onMouseDown'] = useCallback(
+  const handleSpinnerButtonPress: SpinnerProps['onMouseDown'] = useCallback(
     (onChange) => {
       const minInterval = 50;
       const decrementBy = 10;
@@ -422,11 +422,11 @@ export function TextField({
 
       buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
 
-      document.addEventListener('mouseup', handleButtonRelease, {
+      document.addEventListener('mouseup', handleSpinnerButtonRelease, {
         once: true,
       });
     },
-    [handleButtonRelease],
+    [handleSpinnerButtonRelease],
   );
 
   const spinnerMarkup =
@@ -434,8 +434,8 @@ export function TextField({
       <Spinner
         onClick={handleClickChild}
         onChange={handleNumberChange}
-        onMouseDown={handleButtonPress}
-        onMouseUp={handleButtonRelease}
+        onMouseDown={handleSpinnerButtonPress}
+        onMouseUp={handleSpinnerButtonRelease}
         ref={spinnerRef}
         onBlur={handleOnBlur}
       />
@@ -654,6 +654,7 @@ export function TextField({
     }
 
     setFocus(true);
+    inputRef.current?.focus();
   }
 
   function handleClearButtonPress() {
diff --git a/polaris-react/src/components/TextField/components/Spinner/Spinner.tsx b/polaris-react/src/components/TextField/components/Spinner/Spinner.tsx
index 9a4d8b36034..b3a108ced04 100644
--- a/polaris-react/src/components/TextField/components/Spinner/Spinner.tsx
+++ b/polaris-react/src/components/TextField/components/Spinner/Spinner.tsx
@@ -31,7 +31,7 @@ export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
     function handleMouseDown(onChange: HandleStepFn) {
       return (event: React.MouseEvent) => {
         if (event.button !== 0) return;
-        onMouseDown(onChange);
+        onMouseDown?.(onChange);
       };
     }
 
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index 6251ea884a8..668a0b39f0f 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -120,6 +120,24 @@ describe('<TextField />', () => {
       expect(onClick).toHaveBeenCalled();
     });
 
+    it('focuses the text field when the spinner is clicked', () => {
+      const event = new MouseEvent('click', {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+      });
+      const textField = mountWithApp(
+        <TextField type="number" label="TextField" autoComplete="off" />,
+      );
+
+      textField
+        .find(Spinner)!
+        .findAll('div', {role: 'button'})[0]!
+        .domNode?.dispatchEvent(event);
+
+      expect(document.activeElement).toBe(textField.find('input')!.domNode);
+    });
+
     it('does not bubble up to the parent element when it occurs in an element other than the input', () => {
       const onClick = jest.fn();
       const children = 'vertical-content-children';
@@ -221,7 +239,7 @@ describe('<TextField />', () => {
       );
 
       expect(textField).toContainReactComponent('input', {
-        id: ':ra:',
+        id: expect.any(String),
       });
     });
 
@@ -330,11 +348,12 @@ describe('<TextField />', () => {
           helpText="Some help"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':ri:HelpText',
+        'aria-describedby': 'textFieldHelpText',
       });
       expect(textField.find('div')).toContainReactText('Some help');
     });
@@ -369,11 +388,12 @@ describe('<TextField />', () => {
           error="Some error"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':rk:Error',
+        'aria-describedby': 'textFieldError',
       });
     });
 
@@ -407,11 +427,12 @@ describe('<TextField />', () => {
           helpText="Some help"
           onChange={noop}
           autoComplete="off"
+          id="textField"
         />,
       );
 
       expect(textField).toContainReactComponent('input', {
-        'aria-describedby': ':rm:Error :rm:HelpText',
+        'aria-describedby': 'textFieldError textFieldHelpText',
       });
 
       expect(textField.find('div')).toContainReactText('Some error');

From 9a2d4f62ab113bee2b7dec9ca458a59b8024cba4 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Fri, 1 Sep 2023 10:00:16 -0400
Subject: [PATCH 027/102] [Tooltip] Fix pointer alignment (#10282)

Fixes https://github.com/Shopify/polaris/issues/10280
---
 .changeset/giant-seahorses-shake.md                          | 5 +++++
 polaris-react/src/components/Tooltip/Tooltip.tsx             | 1 -
 .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss    | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/giant-seahorses-shake.md

diff --git a/.changeset/giant-seahorses-shake.md b/.changeset/giant-seahorses-shake.md
new file mode 100644
index 00000000000..64042d4166b
--- /dev/null
+++ b/.changeset/giant-seahorses-shake.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed pointer alignment on tooltip
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index af6885aedd8..29d4fc63fed 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -87,7 +87,6 @@ export function Tooltip({
   onClose,
 }: TooltipProps) {
   const {polarisSummerEditions2023} = useFeatures();
-
   const borderRadius =
     borderRadiusProp || (polarisSummerEditions2023 ? '2' : '1');
 
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 92425e2b19d..b4844d58bc8 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -58,7 +58,8 @@
     top: calc(-1 * var(--p-space-2) + 0.8px);
     // stylelint-disable-next-line -- Custom positioning not expected to align with Polaris tokens
     left: calc(
-      var(--pc-tooltip-chevron-x-pos) - var(--p-space-2) - var(--p-space-4)
+      var(--pc-tooltip-chevron-x-pos) - var(--p-space-1_5-experimental) -
+        var(--p-space-4)
     );
     // stylelint-disable-next-line -- se23 overrides
     z-index: var(--pc-tooltip-tail-z-index);

From cbf539495a3d66d67192dde93d9c881b94592f0a Mon Sep 17 00:00:00 2001
From: Marten Bjork <marten.bjork@shopify.com>
Date: Fri, 1 Sep 2023 21:23:37 +0200
Subject: [PATCH 028/102] Improve scrollbar experience in the admin (#9701)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

In MacOS's System Preferences > Appearance, choose these settings:

<img width="475" alt="image"
src="https://github.com/Shopify/polaris/assets/875708/2faa63e4-82ad-4fe1-8abe-7e0268c759f1">

Now browse the admin. As navigate between different pages, the body will
sometimes overflow, sometimes not. This means scrollbars will come and
go. For instance, while loading the data, the skeleton content will
overflow and thus trigger scrollbars, but when minimal data comes in,
the scrollbars might go away.

This cases the UI to constantly jump ~15px left and right as the
scrollbars come and go.

## This fix
We thought _[a
lot](https://docs.google.com/document/d/1AW7AFldJc6RZT4sHR303bqWMqLf0-CDXExEVf6hFg1w/edit#heading=h.e2bgx61b1bn2)_
about how we can improve the scrollbar behaviour.

This PR completely circumvents the scrollbar logic by changing the
layout constraints of Polaris core elements.

It makes sure that, when a scrollbar is set to "always on", the content
stays clear of the area where the scrollbar may appear.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Tested on device types, browsers and operating systems.

<img width="1143" alt="Screenshot 2023-07-20 at 4 30 42 PM"
src="https://github.com/Shopify/polaris/assets/875708/40f29f11-60a1-4b03-a7e2-d5c37524e353">
<img width="1143" alt="Screenshot 2023-07-20 at 4 28 12 PM"
src="https://github.com/Shopify/polaris/assets/875708/1f55d2ea-7963-46c3-bc72-719e9f26d1f6">
<img width="1208" alt="Screenshot 2023-07-20 at 4 32 38 PM"
src="https://github.com/Shopify/polaris/assets/875708/3407960f-5be6-4192-b92c-cff56975a1b5">
---
 .changeset/red-doors-retire.md                |  5 +++
 .../components/AppProvider/AppProvider.tsx    | 38 +++++++++++++++++++
 polaris-react/src/components/Frame/Frame.scss |  6 ++-
 .../src/components/TopBar/TopBar.scss         | 12 ++++--
 .../src/components/TopBar/TopBar.tsx          | 18 +++++----
 5 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/red-doors-retire.md

diff --git a/.changeset/red-doors-retire.md b/.changeset/red-doors-retire.md
new file mode 100644
index 00000000000..05fe017f4a8
--- /dev/null
+++ b/.changeset/red-doors-retire.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated the Frame and Topbar components to stay clear of a scrollbar. This reduces the overall jumpiness in the UI when scrollbars appear and disappear when using a Polaris app.
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index 16729d935aa..c6499d1f979 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -25,6 +25,43 @@ import type {FeaturesConfig} from '../../utilities/features';
 import './AppProvider.scss';
 import './global.scss';
 
+const MAX_SCROLLBAR_WIDTH = 20;
+const SCROLLBAR_TEST_ELEMENT_PARENT_SIZE = 30;
+const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE =
+  SCROLLBAR_TEST_ELEMENT_PARENT_SIZE + 10;
+
+function measureScrollbars() {
+  const parentEl = document.createElement('div');
+  parentEl.setAttribute(
+    'style',
+    `position: absolute; opacity: 0; transform: translate3d(-9999px, -9999px, 0); pointer-events: none; width:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px; height:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px;`,
+  );
+
+  const child = document.createElement('div');
+  child.setAttribute(
+    'style',
+    `width:100%; height: ${SCROLLBAR_TEST_ELEMENT_CHILD_SIZE}; overflow:scroll`,
+  );
+  parentEl.appendChild(child);
+  document.body.appendChild(parentEl);
+
+  const scrollbarWidth =
+    SCROLLBAR_TEST_ELEMENT_PARENT_SIZE -
+    (parentEl.firstElementChild?.clientWidth ?? 0);
+
+  const scrollbarWidthWithSafetyHatch = Math.min(
+    scrollbarWidth,
+    MAX_SCROLLBAR_WIDTH,
+  );
+
+  document.documentElement.style.setProperty(
+    '--pc-app-provider-scrollbar-width',
+    `${scrollbarWidthWithSafetyHatch}px`,
+  );
+
+  document.body.removeChild(parentEl);
+}
+
 interface State {
   intl: I18n;
   link: LinkLikeComponent | undefined;
@@ -65,6 +102,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
       this.setBodyStyles();
       this.setRootAttributes();
     }
+    measureScrollbars();
   }
 
   componentDidUpdate({
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index 38c259577ee..81057d81379 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -185,7 +185,11 @@ $sidebar-breakpoint: 1200px;
   align-items: stretch;
 
   min-width: 0;
-  max-width: 100%;
+  @media #{$p-breakpoints-sm-up} {
+    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties
+    max-width: calc(100vw - var(--pc-app-provider-scrollbar-width));
+    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
+  }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-right, 0, right);
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index 6ec80607024..da8fe99acc3 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -13,9 +13,6 @@ $right-column: 1fr;
 
 .TopBar {
   position: relative;
-  display: grid;
-  grid-template-columns: $left-column $search-column $right-column;
-  align-items: center;
   height: $top-bar-height;
   box-shadow: var(--p-shadow-sm);
   background-color: var(--p-color-bg);
@@ -45,6 +42,15 @@ $right-column: 1fr;
   }
 }
 
+.Container {
+  display: grid;
+  grid-template-columns: $left-column $search-column $right-column;
+  align-items: center;
+  // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties
+  width: calc(100vw - var(--pc-app-provider-scrollbar-width));
+  // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
+}
+
 .LogoDisplayControl {
   display: none;
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/TopBar/TopBar.tsx b/polaris-react/src/components/TopBar/TopBar.tsx
index 3631f10b4ee..af31059f62e 100644
--- a/polaris-react/src/components/TopBar/TopBar.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.tsx
@@ -142,14 +142,16 @@ export const TopBar: React.FunctionComponent<TopBarProps> & {
 
   return (
     <div className={styles.TopBar}>
-      <div className={styles.LeftContent}>
-        {navigationButtonMarkup}
-        {contextMarkup}
-      </div>
-      <div className={styles.Search}>{searchMarkup}</div>
-      <div className={styles.RightContent}>
-        <div className={styles.SecondaryMenu}>{secondaryMenu}</div>
-        {userMenu}
+      <div className={styles.Container}>
+        <div className={styles.LeftContent}>
+          {navigationButtonMarkup}
+          {contextMarkup}
+        </div>
+        <div className={styles.Search}>{searchMarkup}</div>
+        <div className={styles.RightContent}>
+          <div className={styles.SecondaryMenu}>{secondaryMenu}</div>
+          {userMenu}
+        </div>
       </div>
     </div>
   );

From ee0496f56bca923f847415d34859b4379651c912 Mon Sep 17 00:00:00 2001
From: Maxime Cloutier <maxime.cloutier@shopify.com>
Date: Tue, 5 Sep 2023 10:06:02 -0600
Subject: [PATCH 029/102] Fix action list filtering to accept components
 (#10294)

Adds filtering support for non-string content for ActionList items.

---------

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/grumpy-llamas-divide.md            |  5 +++
 .../src/components/ActionList/ActionList.tsx  | 15 ++++----
 .../ActionList/tests/text-content.test.tsx    | 36 +++++++++++++++++++
 .../ActionList/utils/text-content.ts          | 23 ++++++++++++
 4 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/grumpy-llamas-divide.md
 create mode 100644 polaris-react/src/components/ActionList/tests/text-content.test.tsx
 create mode 100644 polaris-react/src/components/ActionList/utils/text-content.ts

diff --git a/.changeset/grumpy-llamas-divide.md b/.changeset/grumpy-llamas-divide.md
new file mode 100644
index 00000000000..ea45319c4da
--- /dev/null
+++ b/.changeset/grumpy-llamas-divide.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed action list filtering to accept multiple item content types
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 5ea8a908d46..ede493c0462 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -12,6 +12,7 @@ import {useI18n} from '../../utilities/i18n';
 
 import {SearchField, Item, Section} from './components';
 import type {ItemProps} from './components';
+import {textContent} from './utils/text-content';
 
 export interface ActionListProps {
   /** Collection of actions for list */
@@ -44,10 +45,6 @@ export function ActionList({
     finalSections = sections;
   }
 
-  const isFilterable = finalSections?.some((section) =>
-    section.items.some((item) => typeof item.content === 'string'),
-  );
-
   const hasMultipleSections = finalSections.length > 1;
   const elementRole =
     hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
@@ -56,10 +53,10 @@ export function ActionList({
 
   const filteredSections = finalSections?.map((section) => ({
     ...section,
-    items: section.items.filter(({content}) =>
-      typeof content === 'string'
-        ? content?.toLowerCase().includes(searchText.toLowerCase())
-        : content,
+    items: section.items.filter((item) =>
+      textContent(item.content)
+        ?.toLowerCase()
+        .includes(searchText.toLowerCase()),
     ),
   }));
 
@@ -136,7 +133,7 @@ export function ActionList({
 
   return (
     <>
-      {showSearch && isFilterable && (
+      {showSearch && (
         <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
           <SearchField
             placeholder={i18n.translate(
diff --git a/polaris-react/src/components/ActionList/tests/text-content.test.tsx b/polaris-react/src/components/ActionList/tests/text-content.test.tsx
new file mode 100644
index 00000000000..68f7afabdba
--- /dev/null
+++ b/polaris-react/src/components/ActionList/tests/text-content.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {textContent} from '../utils/text-content';
+
+describe('textContent', () => {
+  it('returns empty string when empty', () => {
+    expect(textContent()).toBeUndefined();
+  });
+
+  it('returns text string when string is given', () => {
+    expect(textContent('test')).toBe('test');
+  });
+
+  it('returns innerText from react component', () => {
+    expect(textContent(<div>DIV Toggle page actions</div>)).toBe(
+      'DIV Toggle page actions',
+    );
+  });
+
+  it('returns innerText from JSX component', () => {
+    expect(textContent(<TestComponent />)).toBe('test component text');
+  });
+
+  it('returns innerText combination', () => {
+    expect(
+      textContent(
+        <div>
+          <p>First text thing</p>
+          <TestComponent />
+        </div>,
+      ),
+    ).toBe('First text thingtest component text');
+  });
+});
+
+const TestComponent = () => <p>test component text</p>;
diff --git a/polaris-react/src/components/ActionList/utils/text-content.ts b/polaris-react/src/components/ActionList/utils/text-content.ts
new file mode 100644
index 00000000000..c2b52015f5f
--- /dev/null
+++ b/polaris-react/src/components/ActionList/utils/text-content.ts
@@ -0,0 +1,23 @@
+import type React from 'react';
+
+export function textContent(
+  elem?: React.ReactElement | JSX.Element | string,
+): string | undefined {
+  if (!elem) {
+    return;
+  }
+
+  if (typeof elem === 'string') {
+    return elem;
+  }
+
+  const children = elem.props?.children;
+  if (Array.isArray(children)) {
+    return children.map(textContent).join('');
+  } else if (typeof elem?.type === 'function') {
+    return textContent(elem.type());
+  }
+
+  // for a react component that isn't an array, it'll recursively keep going until it gets to a string.
+  return textContent(children);
+}

From 47652f7d67f98d7bef8ef8485fae803b9f3c1056 Mon Sep 17 00:00:00 2001
From: Joe Thomas <joe.thomas@shopify.com>
Date: Wed, 6 Sep 2023 09:22:54 -0500
Subject: [PATCH 030/102] [Icons] Updates social media icons (#9856)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates social media icons by removing them from their containers so
they are more identifiable. Also adds an icon for Twitch.

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

We received feedback that the current icons were hard to distinguish
when next to each other.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/chilled-numbers-shop.md     |  5 +++++
 polaris-icons/icons/FacebookMinor.svg  |  2 +-
 polaris-icons/icons/FacebookMinor.yml  |  5 ++---
 polaris-icons/icons/InstagramMinor.svg |  4 +++-
 polaris-icons/icons/InstagramMinor.yml |  5 ++---
 polaris-icons/icons/PintrestMinor.svg  |  2 +-
 polaris-icons/icons/PintrestMinor.yml  |  2 +-
 polaris-icons/icons/SnapchatMinor.svg  |  2 +-
 polaris-icons/icons/SnapchatMinor.yml  |  2 +-
 polaris-icons/icons/TiktokMinor.svg    |  2 +-
 polaris-icons/icons/TiktokMinor.yml    |  2 +-
 polaris-icons/icons/TumblrMinor.svg    |  1 +
 polaris-icons/icons/TumblrMinor.yml    | 15 +++++++++++++++
 polaris-icons/icons/TwitchMinor.svg    |  1 +
 polaris-icons/icons/TwitchMinor.yml    | 13 +++++++++++++
 polaris-icons/icons/TwitterMinor.svg   |  2 +-
 polaris-icons/icons/TwitterMinor.yml   |  2 +-
 polaris-icons/icons/VimeoMinor.svg     |  1 +
 polaris-icons/icons/VimeoMinor.yml     | 15 +++++++++++++++
 polaris-icons/icons/YoutubeMinor.svg   |  2 +-
 polaris-icons/icons/YoutubeMinor.yml   |  2 +-
 21 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/chilled-numbers-shop.md
 create mode 100644 polaris-icons/icons/TumblrMinor.svg
 create mode 100644 polaris-icons/icons/TumblrMinor.yml
 create mode 100644 polaris-icons/icons/TwitchMinor.svg
 create mode 100644 polaris-icons/icons/TwitchMinor.yml
 create mode 100644 polaris-icons/icons/VimeoMinor.svg
 create mode 100644 polaris-icons/icons/VimeoMinor.yml

diff --git a/.changeset/chilled-numbers-shop.md b/.changeset/chilled-numbers-shop.md
new file mode 100644
index 00000000000..e61d363d24a
--- /dev/null
+++ b/.changeset/chilled-numbers-shop.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-icons': minor
+---
+
+Updates social media icons, removing them from their containers and adds a one for the Twitch platform.
diff --git a/polaris-icons/icons/FacebookMinor.svg b/polaris-icons/icons/FacebookMinor.svg
index f0aaa8aafa5..2ebf3140cff 100644
--- a/polaris-icons/icons/FacebookMinor.svg
+++ b/polaris-icons/icons/FacebookMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M10 3a7 7 0 0 0-1.375 13.865v-4.115h-1.875v-2.172h1.875v-1.655c0-1.883 1.102-2.923 2.79-2.923.807 0 1.652.147 1.652.147v1.849h-.93c-.918 0-1.204.579-1.204 1.173v1.41h2.048l-.328 2.171h-1.72v4.188a7.001 7.001 0 0 0-.933-13.938Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M10 3C6.13401 3 3 6.15425 3 10.0452C3 13.5509 5.54409 16.4586 8.87545 17V12.8129H7.00045V10.6272H8.87545V8.9613C8.87545 7.06619 9.97792 6.01939 11.6647 6.01939C12.4727 6.01939 13.3178 6.16707 13.3178 6.16707V8.02792H12.3866C11.4692 8.02792 11.1831 8.6108 11.1831 9.20878V10.6272H13.2313L12.9039 12.8129H11.1831V16.9902C14.4857 16.4244 17 13.5303 17 10.0452C17 6.15425 13.866 3 10 3Z"/></svg>
diff --git a/polaris-icons/icons/FacebookMinor.yml b/polaris-icons/icons/FacebookMinor.yml
index e48338cc3ef..7ed2ed0d8d2 100644
--- a/polaris-icons/icons/FacebookMinor.yml
+++ b/polaris-icons/icons/FacebookMinor.yml
@@ -1,7 +1,6 @@
 name: Facebook
 set: Minor
-description:
-  Facebook logo
+description: Facebook logo
 keywords:
   - facebook
   - social media
@@ -9,5 +8,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/InstagramMinor.svg b/polaris-icons/icons/InstagramMinor.svg
index 3a372c56e06..b2c92f00f55 100644
--- a/polaris-icons/icons/InstagramMinor.svg
+++ b/polaris-icons/icons/InstagramMinor.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M8.27 10a1.73 1.73 0 1 1 3.46 0 1.73 1.73 0 0 1-3.46 0Z"/><path fill="#5C5F62" fill-rule="evenodd" d="M7.92 6.2c-.95 0-1.73.77-1.73 1.72v4.16c0 .95.78 1.73 1.73 1.73h4.16c.95 0 1.73-.78 1.73-1.73v-4.16c0-.95-.78-1.73-1.73-1.73h-4.16Zm4.68 1.72a.52.52 0 1 0 0-1.03.52.52 0 0 0 0 1.03Zm-5.02 2.08a2.43 2.43 0 1 0 4.85 0 2.43 2.43 0 0 0-4.85 0Z"/><path fill="#5C5F62" fill-rule="evenodd" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-4.5 9.08a2.43 2.43 0 0 0 2.42 2.42h4.16a2.43 2.43 0 0 0 2.42-2.42v-4.16a2.43 2.43 0 0 0-2.42-2.42h-4.16a2.43 2.43 0 0 0-2.42 2.42v4.16Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 10.5a3.5 3.5 0 1 0 7 0 3.5 3.5 0 0 0-7 0Zm1 0a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" fill="#5C5F62"/>
+<path d="M13.25 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" fill="#5C5F62"/>
+<path fill-rule="evenodd" d="M12.5 17h-6A3.5 3.5 0 0 1 3 13.5v-6A3.5 3.5 0 0 1 6.5 4h6A3.5 3.5 0 0 1 16 7.5v6a3.5 3.5 0 0 1-3.5 3.5ZM4 7.5A2.5 2.5 0 0 1 6.5 5h6A2.5 2.5 0 0 1 15 7.5v6a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 4 13.5v-6Z" fill="#5C5F62"/></svg>
diff --git a/polaris-icons/icons/InstagramMinor.yml b/polaris-icons/icons/InstagramMinor.yml
index c03739f95b4..d0f5739b8bc 100644
--- a/polaris-icons/icons/InstagramMinor.yml
+++ b/polaris-icons/icons/InstagramMinor.yml
@@ -1,7 +1,6 @@
 name: Instagram
 set: Minor
-description:
-  Instagram logo
+description: Instagram logo
 keywords:
   - instagram
   - social media
@@ -9,5 +8,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/PintrestMinor.svg b/polaris-icons/icons/PintrestMinor.svg
index dea493354ca..41666c0957c 100644
--- a/polaris-icons/icons/PintrestMinor.svg
+++ b/polaris-icons/icons/PintrestMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm.184 2.25c-2.896 0-4.434 1.828-4.434 3.819 0 .926.524 2.078 1.362 2.445.127.056.195.032.225-.084.008-.035.031-.122.059-.228l.127-.488c.016-.064.008-.118-.047-.18-.277-.317-.499-.899-.499-1.441 0-1.392 1.12-2.74 3.03-2.74 1.649 0 2.803 1.057 2.803 2.568 0 1.708-.917 2.89-2.11 2.89-.659 0-1.152-.512-.994-1.14.069-.271.16-.55.25-.82.157-.48.306-.935.306-1.281 0-.485-.276-.89-.848-.89-.674 0-1.215.656-1.215 1.533 0 .559.201.937.201.937s-.665 2.645-.787 3.137c-.135.543-.082 1.307-.024 1.806.152.056.303.111.46.157.274-.419.682-1.106.834-1.654l.418-1.5c.219.392.858.724 1.538.724 2.024 0 3.482-1.75 3.482-3.925 0-2.085-1.809-3.645-4.137-3.645Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M4 8.34665C4 5.55983 6.15291 3 10.208 3C13.4673 3 16 5.18364 16 8.10299C16 11.1481 13.958 13.5985 11.1247 13.5985C10.1725 13.5985 9.27784 13.1333 8.97177 12.5838C8.97177 12.5838 8.50058 14.2706 8.38604 14.6842C8.17396 15.4513 7.60176 16.4134 7.21802 17C6.99895 16.9362 6.78695 16.8581 6.57504 16.78C6.49333 16.0812 6.41973 15.0124 6.60856 14.2516C6.77912 13.5625 7.71031 9.85983 7.71031 9.85983C7.71031 9.85983 7.42919 9.33042 7.42919 8.5485C7.42919 7.31972 8.1862 6.4029 9.12898 6.4029C9.9308 6.4029 10.3174 6.96904 10.3174 7.64732C10.3174 8.1322 10.1079 8.77012 9.88731 9.44159C9.76286 9.82045 9.6349 10.21 9.53909 10.5887C9.31761 11.4685 10.0081 12.1859 10.9303 12.1859C12.6001 12.1859 13.8836 10.5299 13.8836 8.14004C13.8836 6.02469 12.2676 4.54548 9.9597 4.54548C7.28681 4.54548 5.71785 6.4311 5.71785 8.37995C5.71785 9.13909 6.02859 9.95329 6.41706 10.3964C6.49367 10.4841 6.50485 10.5605 6.48209 10.6496C6.43892 10.8187 6.36373 11.106 6.30422 11.3334C6.26559 11.4809 6.23357 11.6033 6.2212 11.6517C6.18038 11.8138 6.08496 11.8474 5.9072 11.7696C4.73353 11.2558 4 9.6427 4 8.34665Z"/></svg>
diff --git a/polaris-icons/icons/PintrestMinor.yml b/polaris-icons/icons/PintrestMinor.yml
index 0b54c2785fe..660059a7ffa 100644
--- a/polaris-icons/icons/PintrestMinor.yml
+++ b/polaris-icons/icons/PintrestMinor.yml
@@ -8,5 +8,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/SnapchatMinor.svg b/polaris-icons/icons/SnapchatMinor.svg
index 7387ff31ca7..5c523702296 100644
--- a/polaris-icons/icons/SnapchatMinor.svg
+++ b/polaris-icons/icons/SnapchatMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm.02 2.25c2.12 0 2.53 1.47 2.6 2.63.04.4.36.63.77.65l.25-.04c.24-.05.5-.12.5.13 0 .38-.37.57-.74.76-.38.18-.75.37-.75.74 0 .76 1.12 1.88 1.87 2.26.56.27.16.41-.3.57-.15.05-.32.1-.45.18-.17.08-.3.22-.44.37-.27.28-.53.55-1.06.38-.47-.16-.9 0-1.34.15-.3.11-.6.22-.9.22-.32 0-.62-.1-.92-.22-.43-.15-.87-.31-1.34-.15-.53.17-.79-.1-1.06-.38-.13-.15-.27-.29-.44-.38-.13-.06-.3-.12-.46-.17-.45-.16-.84-.3-.29-.57.75-.38 1.88-1.5 1.88-2.26 0-.37-.38-.56-.75-.74-.38-.2-.75-.38-.75-.76 0-.25.27-.18.5-.13.1.02.2.05.25.04.42-.02.74-.24.77-.65.07-1.16.48-2.63 2.6-2.63Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M13.9068 7.29248C13.7937 5.6207 13.2049 3.5 10.1421 3.5C7.07921 3.5 6.4905 5.6207 6.37734 7.29248C6.33693 7.88943 5.87506 8.21136 5.27748 8.24096C4.96619 8.25638 4.18375 7.86427 4.18375 8.375C4.18375 9.45833 6.35041 9.45833 6.35041 10.5417C6.35041 11.625 4.72541 13.25 3.64208 13.7917C2.55875 14.3333 3.98603 14.5053 4.72541 14.875C5.4648 15.2447 5.74303 16.3414 6.89208 15.9583C8.04113 15.5753 9.05875 16.5 10.1421 16.5C11.2254 16.5 12.243 15.5753 13.3921 15.9583C14.5411 16.3414 14.8194 15.2447 15.5587 14.875C16.2981 14.5053 17.7254 14.3333 16.6421 13.7917C15.5587 13.25 13.9337 11.625 13.9337 10.5417C13.9337 9.45833 16.1004 9.45833 16.1004 8.375C16.1004 7.86427 15.318 8.25638 15.0067 8.24096C14.4091 8.21136 13.9472 7.88943 13.9068 7.29248Z"/></svg>
\ No newline at end of file
diff --git a/polaris-icons/icons/SnapchatMinor.yml b/polaris-icons/icons/SnapchatMinor.yml
index f705adc0cea..d498b0c42cb 100644
--- a/polaris-icons/icons/SnapchatMinor.yml
+++ b/polaris-icons/icons/SnapchatMinor.yml
@@ -9,5 +9,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/TiktokMinor.svg b/polaris-icons/icons/TiktokMinor.svg
index b35a1ec8afc..7e1fabf9b4b 100644
--- a/polaris-icons/icons/TiktokMinor.svg
+++ b/polaris-icons/icons/TiktokMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" fill-rule="evenodd" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm1.78 2.5c.14 1.26.85 2 2.06 2.08v1.42c-.7.07-1.32-.16-2.04-.6v2.65c0 3.36-3.67 4.4-5.14 2-.94-1.55-.36-4.27 2.67-4.37v1.49a4.8 4.8 0 0 0-.7.17c-.67.23-1.05.66-.95 1.41.2 1.45 2.86 1.88 2.64-.95v-5.3h1.46Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" fill-rule="evenodd" d="M16 6.2953C14.0808 6.17381 12.9721 4.98931 12.7374 3L10.4307 3.00753V11.375C10.7796 15.8396 6.59218 15.1638 6.26484 12.8784C6.09809 11.6863 6.69717 11.0029 7.76719 10.6461C7.92005 10.594 8.07909 10.5476 8.23967 10.5066C8.45274 10.4521 8.66736 10.4074 8.87581 10.3727V8.01132C4.08003 8.17838 3.16133 12.4836 4.65595 14.9285C6.97819 18.7325 12.7683 17.0772 12.7683 11.7622V7.58613C13.9063 8.26944 14.8852 8.63389 16 8.52767V6.2953Z"/></svg>
diff --git a/polaris-icons/icons/TiktokMinor.yml b/polaris-icons/icons/TiktokMinor.yml
index 44430c58dd7..bd9c2a8bfb8 100644
--- a/polaris-icons/icons/TiktokMinor.yml
+++ b/polaris-icons/icons/TiktokMinor.yml
@@ -9,5 +9,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/TumblrMinor.svg b/polaris-icons/icons/TumblrMinor.svg
new file mode 100644
index 00000000000..43960865686
--- /dev/null
+++ b/polaris-icons/icons/TumblrMinor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M14.3583 13.637C14.2712 13.59 14.1651 13.5946 14.0824 13.649C13.456 14.0603 12.8211 14.2688 12.1949 14.2688C11.8585 14.2688 11.5694 14.1938 11.3101 14.0386C11.1338 13.9344 10.9701 13.7521 10.9114 13.5937C10.8544 13.4431 10.855 13.0376 10.8559 12.4765L10.8562 9.05498H13.7019C13.8508 9.05498 13.9714 8.93442 13.9714 8.78575V6.38163C13.9714 6.23296 13.8508 6.1124 13.7019 6.1124H10.8562V3.26923C10.8562 3.12056 10.7355 3 10.5866 3H8.66956C8.53329 3 8.41848 3.10161 8.40199 3.23676C8.32189 3.89524 8.17247 4.44199 7.95746 4.86269C7.74778 5.27731 7.46409 5.63813 7.11383 5.93557C6.83322 6.17465 6.35284 6.40597 5.68596 6.62313C5.57503 6.65926 5.5 6.76254 5.5 6.87912V8.7858C5.5 8.93447 5.62063 9.05503 5.76951 9.05503H7.33014V13.5063C7.33014 14.1622 7.39978 14.6557 7.54316 15.0153C7.68924 15.3807 7.94856 15.7247 8.31413 16.038C8.67371 16.3458 9.11134 16.5866 9.6163 16.7541C10.1058 16.9136 10.4957 17 11.1531 17C11.7088 17 12.2385 16.9424 12.7277 16.8288C13.2086 16.7167 13.7528 16.5186 14.3452 16.2401C14.4397 16.1956 14.5 16.1008 14.5 15.9965V13.874C14.4999 13.775 14.4456 13.684 14.3583 13.637Z"/></svg>
diff --git a/polaris-icons/icons/TumblrMinor.yml b/polaris-icons/icons/TumblrMinor.yml
new file mode 100644
index 00000000000..b34f6e18d82
--- /dev/null
+++ b/polaris-icons/icons/TumblrMinor.yml
@@ -0,0 +1,15 @@
+name: Tumblr
+set: minor
+description:
+  Logo for Tumblr social media platform
+keywords:
+  - tumblr
+  - social media
+authors:
+  - Joe Thomas
+version: 1
+date_added: 2023-08-11
+date_modified: 2023-08-11
+# Optional: fill exclusive_use if the icon should *only* be used
+# in specific areas of the admin (such as “Orders”):
+exclusive_use:
diff --git a/polaris-icons/icons/TwitchMinor.svg b/polaris-icons/icons/TwitchMinor.svg
new file mode 100644
index 00000000000..7eacc560005
--- /dev/null
+++ b/polaris-icons/icons/TwitchMinor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M13.5 5.75h-1v3h1v-3ZM9.75 5.75h1v3h-1v-3Z"/><path fill="#5C5F62" fill-rule="evenodd" d="M6.5 3 4 5.5v9h3V17l2.5-2.5h2L16 10V3H6.5ZM15 9.5l-2 2h-2l-1.75 1.75V11.5H7V4h8v5.5Z"/></svg>
diff --git a/polaris-icons/icons/TwitchMinor.yml b/polaris-icons/icons/TwitchMinor.yml
new file mode 100644
index 00000000000..b5ffce53f3c
--- /dev/null
+++ b/polaris-icons/icons/TwitchMinor.yml
@@ -0,0 +1,13 @@
+name: Twitch
+set: minor
+description:
+  Logo for Twich
+keywords:
+  - Twitch
+  - Social media
+authors:
+  - Joe Thomas
+version: 1
+date_added: 2023-07-28
+date_modified: 2023-07-28
+exclusive_use:
diff --git a/polaris-icons/icons/TwitterMinor.svg b/polaris-icons/icons/TwitterMinor.svg
index ad3bea612be..112802cd87e 100644
--- a/polaris-icons/icons/TwitterMinor.svg
+++ b/polaris-icons/icons/TwitterMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm4.5 4.3a4.2 4.2 0 0 1-1.13.33c.39-.23 1-.7 1.13-1.13-.36.21-1 .43-1.42.51a1.8 1.8 0 0 0-1.35-.51c-1.02 0-1.73.86-1.73 1.88v.74c-1.5 0-2.96-1.14-3.87-2.24a1.8 1.8 0 0 0-.25.92c0 .68.62 1.37 1.12 1.7-.3 0-.88-.24-1.13-.38v.03c0 .88.63 1.49 1.47 1.65l-.1.04c-.15.06-.39.16-.96.16.23.73 1.41 1.1 2.22 1.13-.63.49-1.76.74-2.63.74h-.37c.82.51 1.96.76 3 .76a5.04 5.04 0 0 0 5.24-5.44c.32-.23.47-.46.67-.76l.09-.13Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" fill="#5C5F62" d="M15 6.25C15.5839 6.17883 16.2355 5.96475 16.75 5.73667C16.7004 5.81084 16.6534 5.88237 16.6079 5.95158C16.3015 6.41799 16.0645 6.77857 15.5728 7.125C15.5792 7.24633 15.5833 7.6605 15.5833 7.78417C15.5833 11.5478 12.6999 15.5833 7.41667 15.5833C5.795 15.5833 4.0205 15.2082 2.75 14.4032C2.9153 14.4226 3.0272 14.4207 3.16756 14.4184C3.2179 14.4176 3.2719 14.4167 3.33333 14.4167C4.67967 14.4167 6.43317 14.0124 7.41667 13.25C6.15958 13.2255 4.32383 12.6287 3.95867 11.5C4.84985 11.5 5.21836 11.3506 5.45225 11.2557C5.51352 11.2309 5.56556 11.2098 5.61533 11.1961C4.30225 10.9347 3.33333 9.99733 3.33333 8.61658V8.58333C3.72125 8.79275 4.61258 9.15208 5.08333 9.16667C4.31158 8.6545 3.33683 7.57767 3.33683 6.51658C3.33683 5.99625 3.47683 5.50392 3.72592 5.08333C5.14167 6.80592 7.41667 8.58333 9.75 8.58333V7.41667C9.75 5.84458 10.8566 4.5 12.4432 4.5C13.2692 4.5 14.0147 4.74617 14.5374 5.30033C15.1919 5.17433 16.1952 4.82608 16.75 4.5C16.5359 5.16383 15.5938 5.89767 15 6.25Z"/></svg>
diff --git a/polaris-icons/icons/TwitterMinor.yml b/polaris-icons/icons/TwitterMinor.yml
index c09b4b03f19..9a06338966d 100644
--- a/polaris-icons/icons/TwitterMinor.yml
+++ b/polaris-icons/icons/TwitterMinor.yml
@@ -8,5 +8,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:
diff --git a/polaris-icons/icons/VimeoMinor.svg b/polaris-icons/icons/VimeoMinor.svg
new file mode 100644
index 00000000000..6572191689e
--- /dev/null
+++ b/polaris-icons/icons/VimeoMinor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M16.9217 5.18904C16.6753 4.16063 15.5158 3.86996 14.3448 4.04985C13.7442 4.14348 11.7167 5.04941 11.0259 7.22018C12.2482 7.12449 12.8895 7.30899 12.7719 8.67112C12.722 9.24192 12.4386 9.86635 12.12 10.4654C11.7538 11.1568 11.0648 12.5121 10.163 11.5359C9.35089 10.6551 9.41318 8.97369 9.22824 7.85259C9.12342 7.2222 9.01399 6.44012 8.81031 5.79355C8.63636 5.23638 8.23396 4.56669 7.74185 4.41996C7.21399 4.26457 6.56163 4.50948 6.179 4.73862C4.98736 5.44605 4.0947 6.42068 3.07158 7.26094C2.94248 7.39231 3.01892 7.50265 3.06239 7.60039C3.20933 7.83042 3.2661 7.97001 3.54628 8.01101C4.27368 8.11903 4.96539 7.32456 5.44741 8.15269C5.74225 8.65667 5.83423 9.20944 6.0224 9.75236C6.27281 10.4798 6.46732 11.269 6.67332 12.1038C7.02264 13.5144 7.4488 15.6232 8.65509 16.1421C9.26942 16.4048 10.1932 16.0526 10.6606 15.7717C11.9287 15.0114 12.96 13.9436 13.7625 12.7879C15.8509 9.78261 16.8521 6.76289 16.961 6.18772C17.0384 5.77085 16.9876 5.42681 16.9217 5.18904Z"/></svg>
diff --git a/polaris-icons/icons/VimeoMinor.yml b/polaris-icons/icons/VimeoMinor.yml
new file mode 100644
index 00000000000..a1ecf7bc556
--- /dev/null
+++ b/polaris-icons/icons/VimeoMinor.yml
@@ -0,0 +1,15 @@
+name: Vimeo
+set: minor
+description:
+  Logo for Vimeo social media platform
+keywords:
+  - Vimeo
+  - social media
+authors:
+  - Joe Thomas
+version: 1
+date_added: 2023-08-11
+date_modified: 2023-08-11
+# Optional: fill exclusive_use if the icon should *only* be used
+# in specific areas of the admin (such as “Orders”):
+exclusive_use:
diff --git a/polaris-icons/icons/YoutubeMinor.svg b/polaris-icons/icons/YoutubeMinor.svg
index 0308260f4d3..2b3dc9cf94b 100644
--- a/polaris-icons/icons/YoutubeMinor.svg
+++ b/polaris-icons/icons/YoutubeMinor.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M8.96 8.52v2.83l2.7-1.41-2.7-1.42Z"/><path fill="#5C5F62" fill-rule="evenodd" d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm4.5 4.03c.3.3.4 1 .4 1s.1.81.1 1.63v.76c0 .82-.1 1.63-.1 1.63s-.1.7-.4 1c-.34.36-.72.4-.94.42h-.06c-1.4.11-3.5.11-3.5.11s-2.6-.02-3.4-.1l-.14-.02c-.25-.03-.65-.08-.96-.4-.3-.31-.4-1-.4-1s-.1-.82-.1-1.64v-.76c0-.82.1-1.63.1-1.63s.1-.7.4-1a1.37 1.37 0 0 1 1-.43c1.4-.1 3.5-.1 3.5-.1s2.1 0 3.5.1h.06c.22.03.6.07.94.43Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#5C5F62" d="M16.86 7s-.14-.97-.56-1.4c-.53-.56-1.13-.56-1.4-.6-1.96-.14-4.9-.14-4.9-.14s-2.94 0-4.9.14c-.28.04-.87.04-1.4.6-.43.43-.56 1.4-.56 1.4S3 8.14 3 9.28v1.07c0 1.14.14 2.28.14 2.28s.14.98.55 1.4c.54.56 1.24.55 1.55.6 1.12.11 4.76.15 4.76.15s2.94 0 4.9-.15c.27-.03.87-.04 1.4-.6.42-.42.56-1.4.56-1.4s.14-1.14.14-2.28V9.28C17 8.14 16.86 7 16.86 7Zm-8.31 4.65V7.69l3.78 1.98-3.78 1.98Z"/></svg>
\ No newline at end of file
diff --git a/polaris-icons/icons/YoutubeMinor.yml b/polaris-icons/icons/YoutubeMinor.yml
index c99531e16fb..bad679b30f8 100644
--- a/polaris-icons/icons/YoutubeMinor.yml
+++ b/polaris-icons/icons/YoutubeMinor.yml
@@ -8,5 +8,5 @@ authors:
   - Joe Thomas
 version: 1
 date_added: 2023-07-20
-date_modified: 2023-07-20
+date_modified: 2023-07-28
 exclusive_use:

From eba75d20a6b839ac068f985c00ccb039a4b50b7d Mon Sep 17 00:00:00 2001
From: zak warsame <42528878+zakwarsame@users.noreply.github.com>
Date: Wed, 6 Sep 2023 15:59:13 -0400
Subject: [PATCH 031/102] [IndexFiltering] Set focus default to true (#10284)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/core-workflows/issues/1020

<!--
  Context about the problem that’s being addressed.
-->

- Currently when navigating to a given index table with the query
included in the URL, the input field will contain the value but will not
be focused
- Since only indexes containing queries have the state of `mode` as
Filtering, we dynamically initialize with it. This way when the URL
includes a query, the input field is focused without accessibility
trade-offs.

<details>
<summary> Specifications </summary>


![image](https://github.com/Shopify/polaris/assets/42528878/a576e9a7-7016-48be-a146-1a8b4d40cfb2)
</details>

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

- This PR sets the initial focus of the input fields to true when
`IndexFiltersMode` is `Filtering`.


### How to 🎩

- [Spin URL containing
query](https://admin.web.hadf.zakaria-warsame.us.spin.dev/store/shop1/products?query=aero)
- Ensure the input is focused when you go to the page or refresh with
the query included



### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
~- [ ] Updated the component's `README.md` with documentation changes~
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/chilled-otters-sing.md                         | 5 +++++
 .../src/components/IndexFilters/IndexFilters.tsx          | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/chilled-otters-sing.md

diff --git a/.changeset/chilled-otters-sing.md b/.changeset/chilled-otters-sing.md
new file mode 100644
index 00000000000..0cf6b73c0af
--- /dev/null
+++ b/.changeset/chilled-otters-sing.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+- Updated `Filters` query field to initialize with focus based on `mode` state
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
index e9a1cdbff77..07ae4b1bb90 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -144,16 +144,18 @@ export function IndexFilters({
     value: filtersFocused,
     setFalse: setFiltersUnFocused,
     setTrue: setFiltersFocused,
-  } = useToggle(false);
+  } = useToggle(mode === IndexFiltersMode.Filtering);
   const {polarisSummerEditions2023} = useFeatures();
 
-  useOnValueChange(mode, (newMode) => {
+  const handleModeChange = (newMode: IndexFiltersMode) => {
     if (newMode === IndexFiltersMode.Filtering) {
       setFiltersFocused();
     } else {
       setFiltersUnFocused();
     }
-  });
+  };
+
+  useOnValueChange(mode, handleModeChange);
 
   useEventListener('keydown', (event) => {
     if (disableKeyboardShortcuts) return;

From 67699cb88c8a5f85a4623b403fddb444c5104b24 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 6 Sep 2023 13:36:54 -0700
Subject: [PATCH 032/102] Migration update button component (#10263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/10161

### WHAT is this pull request doing?

Migration updates `920` files in `web`
Adds comments to `1650` files to be updated manually

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Lo Kim <26749317+laurkim@users.noreply.github.com>
Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/neat-balloons-shop.md              |   5 +
 .../tests/transform.test.ts                   |  17 +
 ...12-react-update-button-component.input.tsx |  69 ++++
 ...2-react-update-button-component.output.tsx |  79 +++++
 ...2-react-update-button-local-name.input.tsx |  12 +
 ...-react-update-button-local-name.output.tsx |  10 +
 ...utton-plain-monochrome-component.input.tsx |  24 ++
 ...tton-plain-monochrome-component.output.tsx |  22 ++
 ...e-button-primary-plain-component.input.tsx |  24 ++
 ...-button-primary-plain-component.output.tsx |  22 ++
 ...react-update-button-self-closing.input.tsx |  45 +++
 ...eact-update-button-self-closing.output.tsx |  48 +++
 .../transform.ts                              | 326 ++++++++++++++++++
 13 files changed, 703 insertions(+)
 create mode 100644 .changeset/neat-balloons-shop.md
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts

diff --git a/.changeset/neat-balloons-shop.md b/.changeset/neat-balloons-shop.md
new file mode 100644
index 00000000000..e8648219fca
--- /dev/null
+++ b/.changeset/neat-balloons-shop.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': minor
+---
+
+Added migration for `Button` component
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
new file mode 100644
index 00000000000..b922361c8e7
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/transform.test.ts
@@ -0,0 +1,17 @@
+import {check} from '../../../utilities/check';
+
+const transform = 'v12-react-update-button-component';
+const fixtures = [
+  'v12-react-update-button-component',
+  'v12-react-update-button-local-name',
+  'v12-react-update-button-primary-plain-component',
+  'v12-react-update-button-plain-monochrome-component',
+  'v12-react-update-button-self-closing',
+];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    transform,
+  });
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
new file mode 100644
index 00000000000..56c14974592
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.input.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import type {ButtonProps} from '@shopify/polaris';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+declare function CustomButton(props: ButtonProps): JSX.Element;
+declare const Styles: {
+  [className: string]: string;
+};
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  const MyButton = Button;
+  return (
+    <>
+      <Button destructive outline disabled>
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large" monochrome outline>
+        Call
+      </Button>
+      <Button plain>Edit</Button>
+      <Button monochrome>Monochrome</Button>
+      <Button outline>Outline</Button>
+      <Button destructive>Destructive</Button>
+      <Button primarySuccess>Primary success</Button>
+      <Button destructive outline>
+        Destructive outline
+      </Button>
+      <Button destructive plain>
+        Destructive plain
+      </Button>
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      >
+        Selected branch
+      </Button>
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      >
+        Content
+      </Button>
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      >
+        Button
+      </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
new file mode 100644
index 00000000000..ed3a7974399
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-component.output.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import type {ButtonProps} from '@shopify/polaris';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+declare function CustomButton(
+  props: /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  ButtonProps,
+): JSX.Element;
+declare const Styles: {
+  [className: string]: string;
+};
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  const MyButton =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    Button;
+  return (
+    <>
+      <Button disabled tone="critical">
+        Delete App
+      </Button>
+      <Button icon={PhoneMajor} size="large">
+        Call
+      </Button>
+      <Button variant="plain">Edit</Button>
+      <Button>Monochrome</Button>
+      <Button>Outline</Button>
+      <Button variant="primary" tone="critical">
+        Destructive
+      </Button>
+      <Button variant="primary" tone="success">
+        Primary success
+      </Button>
+      <Button tone="critical">Destructive outline</Button>
+      <Button variant="plain" tone="critical">
+        Destructive plain
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      >
+        Selected branch
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      >
+        Content
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      >
+        Button
+      </Button>
+      <MyButton plain>My Button</MyButton>
+      <CustomButton plain />
+      <div className={Styles.Button}>Fake Button</div>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx
new file mode 100644
index 00000000000..2e648ea37e3
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.input.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {Button as MyButton} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <MyButton plain primary>
+        Edit
+      </MyButton>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx
new file mode 100644
index 00000000000..0184b91337c
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-local-name.output.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import {Button as MyButton} from '@shopify/polaris';
+
+export function App() {
+  return (
+    <>
+      <MyButton variant="tertiary">Edit</MyButton>
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx
new file mode 100644
index 00000000000..f9f2bf5aeaa
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.input.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button plain monochrome>
+        Edit
+      </Button>
+      <Button monochrome plain>
+        Edit
+      </Button>
+      <Button plain monochrome={isPolarisUplift}>
+        Edit
+      </Button>
+      <Button plain={isPolarisUplift} monochrome>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} plain monochrome />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx
new file mode 100644
index 00000000000..0b31d175342
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-plain-monochrome-component.output.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button variant="monochromePlain">Edit</Button>
+      <Button variant="monochromePlain">Edit</Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain monochrome={isPolarisUplift}>
+        Edit
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain={isPolarisUplift} monochrome>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} variant="monochromePlain" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx
new file mode 100644
index 00000000000..086825057ba
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.input.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button plain primary>
+        Edit
+      </Button>
+      <Button primary plain>
+        Edit
+      </Button>
+      <Button plain primary={isPolarisUplift}>
+        Edit
+      </Button>
+      <Button plain={isPolarisUplift} primary>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} plain primary />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx
new file mode 100644
index 00000000000..79ca57641ed
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-primary-plain-component.output.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const isPolarisUplift = true;
+  return (
+    <>
+      <Button variant="tertiary">Edit</Button>
+      <Button variant="tertiary">Edit</Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain primary={isPolarisUplift}>
+        Edit
+      </Button>
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button plain={isPolarisUplift} primary>
+        Edit
+      </Button>
+      <Button icon={PhoneMajor} variant="tertiary" />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx
new file mode 100644
index 00000000000..12d4a38b810
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.input.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  return (
+    <>
+      <Button destructive outline disabled />
+      <Button icon={PhoneMajor} size="large" monochrome outline />
+      <Button plain />
+      <Button monochrome />
+      <Button outline />
+      <Button destructive />
+      <Button primarySuccess />
+      <Button destructive outline />
+      <Button destructive plain />
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      />
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      />
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx
new file mode 100644
index 00000000000..5c3c4d8efa9
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-self-closing.output.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Button} from '@shopify/polaris';
+import {PhoneMajor} from '@shopify/polaris-icons';
+
+export function App() {
+  const hasFormError = false;
+  const polarisSummerEditions2023Enabled = true;
+  const disabled = false;
+  const primary = true;
+  return (
+    <>
+      <Button disabled tone="critical" />
+      <Button icon={PhoneMajor} size="large" />
+      <Button variant="plain" />
+      <Button />
+      <Button />
+      <Button variant="primary" tone="critical" />
+      <Button variant="primary" tone="success" />
+      <Button tone="critical" />
+      <Button variant="plain" tone="critical" />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        disclosure="select"
+        fullWidth
+        textAlign="left"
+        outline={hasFormError}
+        destructive={hasFormError}
+        disabled={disabled}
+        size={polarisSummerEditions2023Enabled ? 'large' : undefined}
+      />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        icon={PhoneMajor}
+        removeUnderline
+        plain={!primary}
+        monochrome={!primary}
+        disabled={disabled}
+        primarySuccess={primary}
+      />
+      {/* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */}
+      <Button
+        outline={!polarisSummerEditions2023Enabled}
+        plain={polarisSummerEditions2023Enabled}
+        primary={polarisSummerEditions2023Enabled}
+      />
+    </>
+  );
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
new file mode 100644
index 00000000000..fc6f5ff0968
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -0,0 +1,326 @@
+import type {
+  API,
+  ASTPath,
+  FileInfo,
+  JSXAttribute,
+  JSXOpeningElement,
+  Options,
+} from 'jscodeshift';
+
+import {POLARIS_MIGRATOR_COMMENT} from '../../utilities/constants';
+import {
+  getImportSpecifierName,
+  hasImportDeclaration,
+  hasImportSpecifier,
+} from '../../utilities/imports';
+import {insertCommentBefore, insertJSXComment} from '../../utilities/jsx';
+
+export default function transformer(
+  fileInfo: FileInfo,
+  {jscodeshift: j}: API,
+  _: Options,
+) {
+  const source = j(fileInfo.source);
+
+  // If `Button` component name is not imported, exit
+  if (
+    !(
+      hasImportDeclaration(j, source, '@shopify/polaris') &&
+      (hasImportSpecifier(j, source, 'Button', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris'))
+    )
+  ) {
+    return fileInfo.source;
+  }
+
+  const localElementName =
+    getImportSpecifierName(j, source, 'Button', '@shopify/polaris') || 'Button';
+
+  const localElementTypeName = getImportSpecifierName(
+    j,
+    source,
+    'ButtonProps',
+    '@shopify/polaris',
+  );
+
+  // For each instance of a `Button` get all the attributes and update accordingly
+  source.findJSXElements(localElementName).forEach((element: ASTPath<any>) => {
+    const openingElement = j(element).find(j.JSXOpeningElement).get()
+      .value as JSXOpeningElement;
+
+    const allAttributes = openingElement.attributes ?? [];
+    const jsxAttributes = allAttributes as JSXAttribute[];
+
+    // Check for spread syntax on props
+    if (allAttributes.some((attribute) => attribute.type !== 'JSXAttribute')) {
+      insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+      return;
+    }
+
+    // Find the boolean props we want to update
+    // and ensure they are not set to a conditional value
+    const plain = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'plain',
+    );
+    const isPlainValid = plain?.value === null;
+    const monochrome = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'monochrome',
+    );
+    const isMonochromeValid = monochrome?.value === null;
+    const primary = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'primary',
+    );
+    const isPrimaryValid = primary?.value === null;
+    const primarySuccess = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'primarySuccess',
+    );
+    const isPrimarySuccessValid = primarySuccess?.value === null;
+    const outline = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'outline',
+    );
+    const isOutlineValid = outline?.value === null;
+    const destructive = jsxAttributes.find(
+      (attribute) => attribute.name.name === 'destructive',
+    );
+    const isDestructiveValid = destructive?.value === null;
+
+    // A collection of the booleans that will be updated to a variant
+    const variantAttributes = [
+      plain,
+      monochrome,
+      primary,
+      outline,
+      primarySuccess,
+    ].filter(Boolean);
+
+    // Set flags
+    let canRemovePlain = false;
+    let canRemoveMonochrome = false;
+    let canRemovePrimary = false;
+    let canRemoveOutline = false;
+    let canRemovePrimarySuccess = false;
+    let canRemoveDestructive = false;
+    let variantValue = '';
+    let toneValue = '';
+
+    // Checks for combinations
+    const isPrimaryAndPlain =
+      plain && primary && isPlainValid && isPrimaryValid;
+    const isPrimaryAndDestructive =
+      primary && destructive && isPrimaryValid && isDestructiveValid;
+    const isPlainAndMonochrome =
+      plain && monochrome && isPlainValid && isMonochromeValid;
+    const isPlainAndDestructive =
+      plain && destructive && isPlainValid && isDestructiveValid;
+    const isMonochromeAndOutline =
+      monochrome && outline && isMonochromeValid && isOutlineValid;
+    const isOutlineAndDestructive =
+      outline && destructive && isOutlineValid && isDestructiveValid;
+
+    if (plain) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (isPrimaryAndPlain) {
+        canRemovePlain = true;
+        canRemovePrimary = true;
+        variantValue = 'tertiary';
+      } else if (isPlainAndMonochrome) {
+        canRemovePlain = true;
+        canRemoveMonochrome = true;
+        variantValue = 'monochromePlain';
+      } else if (isPlainAndDestructive) {
+        canRemovePlain = true;
+        canRemoveDestructive = true;
+        variantValue = 'plain';
+        toneValue = 'critical';
+      } else if (plain && isPlainValid) {
+        canRemovePlain = true;
+        variantValue = 'plain';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (monochrome) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (isMonochromeAndOutline) {
+        canRemoveMonochrome = true;
+        canRemoveOutline = true;
+      } else if (isPlainAndMonochrome) {
+        canRemovePlain = true;
+        canRemoveMonochrome = true;
+        variantValue = 'monochromePlain';
+      } else if (monochrome && isMonochromeValid) {
+        canRemoveMonochrome = true;
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (primary) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (isPrimaryAndPlain) {
+        canRemovePlain = true;
+        canRemovePrimary = true;
+        variantValue = 'tertiary';
+      } else if (isPrimaryAndDestructive) {
+        canRemovePrimary = true;
+        canRemoveDestructive = true;
+        variantValue = 'primary';
+        toneValue = 'critical';
+      } else if (primary && isPrimaryValid) {
+        canRemovePrimary = true;
+        variantValue = 'primary';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (outline) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (isOutlineAndDestructive) {
+        canRemoveOutline = true;
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else if (isMonochromeAndOutline) {
+        canRemoveMonochrome = true;
+        canRemoveOutline = true;
+      } else if (outline && isOutlineValid) {
+        canRemoveOutline = true;
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (primarySuccess) {
+      if (variantAttributes.length > 2) {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+      if (primarySuccess && isPrimarySuccessValid) {
+        canRemovePrimarySuccess = true;
+        variantValue = 'primary';
+        toneValue = 'success';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    if (destructive) {
+      if (isPlainAndDestructive) {
+        canRemovePlain = true;
+        canRemoveDestructive = true;
+        variantValue = 'plain';
+        toneValue = 'critical';
+      } else if (isOutlineAndDestructive) {
+        canRemoveOutline = true;
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else if (isPrimaryAndDestructive) {
+        canRemovePrimary = true;
+        canRemoveDestructive = true;
+        variantValue = 'primary';
+        toneValue = 'critical';
+      } else if (
+        destructive &&
+        isDestructiveValid &&
+        variantAttributes.length === 0
+      ) {
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+        variantValue = 'primary';
+      } else if (destructive && isDestructiveValid) {
+        canRemoveDestructive = true;
+        toneValue = 'critical';
+      } else {
+        insertJSXComment(j, element, POLARIS_MIGRATOR_COMMENT);
+        return;
+      }
+    }
+
+    // Remove the boolean attributes based on the checks
+    if (plain && canRemovePlain) {
+      plain.name.name = '';
+      plain.value = null;
+    }
+
+    if (monochrome && canRemoveMonochrome) {
+      monochrome.name.name = '';
+      monochrome.value = null;
+    }
+
+    if (primary && canRemovePrimary) {
+      primary.name.name = '';
+      primary.value = null;
+    }
+
+    if (outline && canRemoveOutline) {
+      outline.name.name = '';
+      outline.value = null;
+    }
+
+    if (primarySuccess && canRemovePrimarySuccess) {
+      primarySuccess.name.name = '';
+      primarySuccess.value = null;
+    }
+
+    if (destructive && canRemoveDestructive) {
+      destructive.name.name = '';
+      destructive.value = null;
+    }
+
+    // Add the variant attribute based on the checks
+    if (variantValue && openingElement && openingElement.attributes) {
+      openingElement.attributes.push(
+        j.jsxAttribute(
+          j.jsxIdentifier('variant'),
+          j.stringLiteral(variantValue),
+        ),
+      );
+    }
+
+    // Add the tone attribute based on the checks
+    if (toneValue && openingElement && openingElement.attributes) {
+      openingElement.attributes.push(
+        j.jsxAttribute(j.jsxIdentifier('tone'), j.stringLiteral(toneValue)),
+      );
+    }
+  });
+
+  source
+    .find(j.Identifier)
+    .filter(
+      (path) =>
+        path.node.name === localElementName ||
+        path.node.name === localElementTypeName,
+    )
+    .forEach((path) => {
+      if (path.node.type !== 'Identifier') return;
+
+      if (
+        path.parent.value.type === 'ImportSpecifier' ||
+        path.parent.value.type === 'MemberExpression'
+      ) {
+        return;
+      }
+
+      insertCommentBefore(j, path, POLARIS_MIGRATOR_COMMENT);
+    });
+  return source.toSource();
+}

From 12a62b4d74598b486382dcc190b173b8f69d9147 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Thu, 7 Sep 2023 09:47:20 +0100
Subject: [PATCH 033/102] [IndexFilters] Update mobile view when in uplift mood
 (#10343)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/10256

Due to the uplift initiative, the mobile views of the IndexFilters
component looks a little wonky. As well as the CTAs overlapping the
filters by being pushed to another row, we have some height
differentials going between the two states that are less than ideal.

Spinstance:
https://admin.web.if-fix.marc-thomas.eu.spin.dev/store/shop1/products?selectedView=all

### WHAT is this pull request doing?

<img width="2088" alt="Screenshot 2023-09-06 at 12 40 24"
src="https://github.com/Shopify/polaris/assets/2562596/c4a04202-65ab-4639-95cc-0aa03d7b3a86">
<img width="2088" alt="Screenshot 2023-09-06 at 12 40 27"
src="https://github.com/Shopify/polaris/assets/2562596/90ff7b91-db07-4cfd-917a-7047716f6837">

- Fixes the overlapping CTA issue by applying a `width: 100%` to the
input within the Filters bar.
- Fixes height discrepancies within the mobile interface of the
IndexFilters on both the filtering and default modes.

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/poor-donkeys-fail.md                           | 5 +++++
 polaris-react/src/components/Filters/Filters.scss         | 8 ++++++++
 polaris-react/src/components/Filters/Filters.tsx          | 8 +++++---
 .../Filters/components/SearchField/SearchField.scss       | 1 +
 .../IndexFilters/components/Container/Container.scss      | 4 ++++
 5 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/poor-donkeys-fail.md

diff --git a/.changeset/poor-donkeys-fail.md b/.changeset/poor-donkeys-fail.md
new file mode 100644
index 00000000000..eaa696999ea
--- /dev/null
+++ b/.changeset/poor-donkeys-fail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed UI inconsistencies in the mobile view of the IndexFilters
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index b68dfbb5603..b1fc0597cd8 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -9,11 +9,19 @@
   background: var(--p-color-bg);
 }
 
+.ContainerUplift {
+  background: none;
+}
+
 @media #{$p-breakpoints-sm-down} {
   .Container {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     height: 57px;
+
+    &.ContainerUplift {
+      height: unset;
+    }
   }
 }
 
diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx
index 4fc0e30fd0b..b246ff63dd9 100644
--- a/polaris-react/src/components/Filters/Filters.tsx
+++ b/polaris-react/src/components/Filters/Filters.tsx
@@ -284,8 +284,8 @@ export function Filters({
     ? {
         paddingInlineStart: '2',
         paddingInlineEnd: '2',
-        paddingBlockStart: '1_5-experimental',
-        paddingBlockEnd: '1_5-experimental',
+        paddingBlockStart: '2',
+        paddingBlockEnd: '2',
       }
     : {
         paddingBlockStart: {
@@ -304,7 +304,9 @@ export function Filters({
       };
 
   const queryFieldMarkup = hideQueryField ? null : (
-    <div className={styles.Container}>
+    <div
+      className={classNames(styles.Container, se23 && styles.ContainerUplift)}
+    >
       <Box {...containerSpacing}>
         <HorizontalStack
           align="start"
diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
index e46c22a3084..e60b3a0df10 100644
--- a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
@@ -20,6 +20,7 @@
   border-radius: var(--p-border-radius-1);
   border-color: var(--p-color-border-input);
   padding-inline: var(--p-space-1_5-experimental);
+  width: 100%;
 
   &:hover {
     border-color: var(--p-color-border-input-hover);
diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
index 6c9394f6b84..163e5c40649 100644
--- a/polaris-react/src/components/IndexFilters/components/Container/Container.scss
+++ b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -16,5 +16,9 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     height: 57px;
+
+    #{$se23} & {
+      height: unset;
+    }
   }
 }

From 3bda0a111aa9da158fdccd0a5598f1565e48c86c Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Thu, 7 Sep 2023 12:51:16 -0400
Subject: [PATCH 034/102] Revert "Fix action list filtering to accept
 components" (#10355)

Reverts Shopify/polaris#10294
---
 .changeset/grumpy-llamas-divide.md            |  5 ---
 .../src/components/ActionList/ActionList.tsx  | 15 ++++----
 .../ActionList/tests/text-content.test.tsx    | 36 -------------------
 .../ActionList/utils/text-content.ts          | 23 ------------
 4 files changed, 9 insertions(+), 70 deletions(-)
 delete mode 100644 .changeset/grumpy-llamas-divide.md
 delete mode 100644 polaris-react/src/components/ActionList/tests/text-content.test.tsx
 delete mode 100644 polaris-react/src/components/ActionList/utils/text-content.ts

diff --git a/.changeset/grumpy-llamas-divide.md b/.changeset/grumpy-llamas-divide.md
deleted file mode 100644
index ea45319c4da..00000000000
--- a/.changeset/grumpy-llamas-divide.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed action list filtering to accept multiple item content types
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index ede493c0462..5ea8a908d46 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -12,7 +12,6 @@ import {useI18n} from '../../utilities/i18n';
 
 import {SearchField, Item, Section} from './components';
 import type {ItemProps} from './components';
-import {textContent} from './utils/text-content';
 
 export interface ActionListProps {
   /** Collection of actions for list */
@@ -45,6 +44,10 @@ export function ActionList({
     finalSections = sections;
   }
 
+  const isFilterable = finalSections?.some((section) =>
+    section.items.some((item) => typeof item.content === 'string'),
+  );
+
   const hasMultipleSections = finalSections.length > 1;
   const elementRole =
     hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
@@ -53,10 +56,10 @@ export function ActionList({
 
   const filteredSections = finalSections?.map((section) => ({
     ...section,
-    items: section.items.filter((item) =>
-      textContent(item.content)
-        ?.toLowerCase()
-        .includes(searchText.toLowerCase()),
+    items: section.items.filter(({content}) =>
+      typeof content === 'string'
+        ? content?.toLowerCase().includes(searchText.toLowerCase())
+        : content,
     ),
   }));
 
@@ -133,7 +136,7 @@ export function ActionList({
 
   return (
     <>
-      {showSearch && (
+      {showSearch && isFilterable && (
         <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
           <SearchField
             placeholder={i18n.translate(
diff --git a/polaris-react/src/components/ActionList/tests/text-content.test.tsx b/polaris-react/src/components/ActionList/tests/text-content.test.tsx
deleted file mode 100644
index 68f7afabdba..00000000000
--- a/polaris-react/src/components/ActionList/tests/text-content.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-import {textContent} from '../utils/text-content';
-
-describe('textContent', () => {
-  it('returns empty string when empty', () => {
-    expect(textContent()).toBeUndefined();
-  });
-
-  it('returns text string when string is given', () => {
-    expect(textContent('test')).toBe('test');
-  });
-
-  it('returns innerText from react component', () => {
-    expect(textContent(<div>DIV Toggle page actions</div>)).toBe(
-      'DIV Toggle page actions',
-    );
-  });
-
-  it('returns innerText from JSX component', () => {
-    expect(textContent(<TestComponent />)).toBe('test component text');
-  });
-
-  it('returns innerText combination', () => {
-    expect(
-      textContent(
-        <div>
-          <p>First text thing</p>
-          <TestComponent />
-        </div>,
-      ),
-    ).toBe('First text thingtest component text');
-  });
-});
-
-const TestComponent = () => <p>test component text</p>;
diff --git a/polaris-react/src/components/ActionList/utils/text-content.ts b/polaris-react/src/components/ActionList/utils/text-content.ts
deleted file mode 100644
index c2b52015f5f..00000000000
--- a/polaris-react/src/components/ActionList/utils/text-content.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type React from 'react';
-
-export function textContent(
-  elem?: React.ReactElement | JSX.Element | string,
-): string | undefined {
-  if (!elem) {
-    return;
-  }
-
-  if (typeof elem === 'string') {
-    return elem;
-  }
-
-  const children = elem.props?.children;
-  if (Array.isArray(children)) {
-    return children.map(textContent).join('');
-  } else if (typeof elem?.type === 'function') {
-    return textContent(elem.type());
-  }
-
-  // for a react component that isn't an array, it'll recursively keep going until it gets to a string.
-  return textContent(children);
-}

From 88b3ea3611d1bdd8543bc37dd86958c933e7be0f Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 7 Sep 2023 14:31:32 -0400
Subject: [PATCH 035/102] Version Packages (#10297)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris-icons@7.9.0

### Minor Changes

- [#9856](https://github.com/Shopify/polaris/pull/9856)
[`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Updates
social media icons, removing them from their containers and adds a one
for the Twitch platform.

## @shopify/polaris-migrator@0.22.0

### Minor Changes

- [#10263](https://github.com/Shopify/polaris/pull/10263)
[`67699cb88`](https://github.com/Shopify/polaris/commit/67699cb88c8a5f85a4623b403fddb444c5104b24)
Thanks [@aveline](https://github.com/aveline)! - Added migration for
`Button` component

## @shopify/polaris@11.15.0

### Minor Changes

- [#9701](https://github.com/Shopify/polaris/pull/9701)
[`cbf539495`](https://github.com/Shopify/polaris/commit/cbf539495a3d66d67192dde93d9c881b94592f0a)
Thanks [@martenbjork](https://github.com/martenbjork)! - Updated the
Frame and Topbar components to stay clear of a scrollbar. This reduces
the overall jumpiness in the UI when scrollbars appear and disappear
when using a Polaris app.

### Patch Changes

- [#10284](https://github.com/Shopify/polaris/pull/10284)
[`eba75d20a`](https://github.com/Shopify/polaris/commit/eba75d20a6b839ac068f985c00ccb039a4b50b7d)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - - Updated
`Filters` query field to initialize with focus based on `mode` state


- [#10282](https://github.com/Shopify/polaris/pull/10282)
[`9a2d4f62a`](https://github.com/Shopify/polaris/commit/9a2d4f62ab113bee2b7dec9ca458a59b8024cba4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed pointer
alignment on tooltip


- [#10343](https://github.com/Shopify/polaris/pull/10343)
[`12a62b4d7`](https://github.com/Shopify/polaris/commit/12a62b4d74598b486382dcc190b173b8f69d9147)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed UI
inconsistencies in the mobile view of the IndexFilters


- [#10276](https://github.com/Shopify/polaris/pull/10276)
[`abb50250e`](https://github.com/Shopify/polaris/commit/abb50250ec6af05dc4fef85d887fac37edfe1175)
Thanks [@highfieldjames](https://github.com/highfieldjames)! - Updated
`TextField` of `type` `number` to focus when a `Spinner` button is
clicked

- Updated dependencies
\[[`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056)]:
    -   @shopify/polaris-icons@7.9.0

## polaris.shopify.com@0.57.3

### Patch Changes

- Updated dependencies
\[[`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056),
[`eba75d20a`](https://github.com/Shopify/polaris/commit/eba75d20a6b839ac068f985c00ccb039a4b50b7d),
[`9a2d4f62a`](https://github.com/Shopify/polaris/commit/9a2d4f62ab113bee2b7dec9ca458a59b8024cba4),
[`12a62b4d7`](https://github.com/Shopify/polaris/commit/12a62b4d74598b486382dcc190b173b8f69d9147),
[`cbf539495`](https://github.com/Shopify/polaris/commit/cbf539495a3d66d67192dde93d9c881b94592f0a),
[`abb50250e`](https://github.com/Shopify/polaris/commit/abb50250ec6af05dc4fef85d887fac37edfe1175)]:
    -   @shopify/polaris-icons@7.9.0
    -   @shopify/polaris@11.15.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/chilled-numbers-shop.md  |  5 -----
 .changeset/chilled-otters-sing.md   |  5 -----
 .changeset/giant-seahorses-shake.md |  5 -----
 .changeset/neat-balloons-shop.md    |  5 -----
 .changeset/poor-donkeys-fail.md     |  5 -----
 .changeset/red-doors-retire.md      |  5 -----
 .changeset/warm-points-punch.md     |  5 -----
 polaris-icons/CHANGELOG.md          |  6 ++++++
 polaris-icons/package.json          |  2 +-
 polaris-migrator/CHANGELOG.md       |  6 ++++++
 polaris-migrator/package.json       |  4 ++--
 polaris-react/CHANGELOG.md          | 19 +++++++++++++++++++
 polaris-react/README.md             |  4 ++--
 polaris-react/package.json          |  4 ++--
 polaris.shopify.com/CHANGELOG.md    |  8 ++++++++
 polaris.shopify.com/package.json    |  6 +++---
 16 files changed, 49 insertions(+), 45 deletions(-)
 delete mode 100644 .changeset/chilled-numbers-shop.md
 delete mode 100644 .changeset/chilled-otters-sing.md
 delete mode 100644 .changeset/giant-seahorses-shake.md
 delete mode 100644 .changeset/neat-balloons-shop.md
 delete mode 100644 .changeset/poor-donkeys-fail.md
 delete mode 100644 .changeset/red-doors-retire.md
 delete mode 100644 .changeset/warm-points-punch.md

diff --git a/.changeset/chilled-numbers-shop.md b/.changeset/chilled-numbers-shop.md
deleted file mode 100644
index e61d363d24a..00000000000
--- a/.changeset/chilled-numbers-shop.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-icons': minor
----
-
-Updates social media icons, removing them from their containers and adds a one for the Twitch platform.
diff --git a/.changeset/chilled-otters-sing.md b/.changeset/chilled-otters-sing.md
deleted file mode 100644
index 0cf6b73c0af..00000000000
--- a/.changeset/chilled-otters-sing.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-- Updated `Filters` query field to initialize with focus based on `mode` state
diff --git a/.changeset/giant-seahorses-shake.md b/.changeset/giant-seahorses-shake.md
deleted file mode 100644
index 64042d4166b..00000000000
--- a/.changeset/giant-seahorses-shake.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed pointer alignment on tooltip
diff --git a/.changeset/neat-balloons-shop.md b/.changeset/neat-balloons-shop.md
deleted file mode 100644
index e8648219fca..00000000000
--- a/.changeset/neat-balloons-shop.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-migrator': minor
----
-
-Added migration for `Button` component
diff --git a/.changeset/poor-donkeys-fail.md b/.changeset/poor-donkeys-fail.md
deleted file mode 100644
index eaa696999ea..00000000000
--- a/.changeset/poor-donkeys-fail.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed UI inconsistencies in the mobile view of the IndexFilters
diff --git a/.changeset/red-doors-retire.md b/.changeset/red-doors-retire.md
deleted file mode 100644
index 05fe017f4a8..00000000000
--- a/.changeset/red-doors-retire.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Updated the Frame and Topbar components to stay clear of a scrollbar. This reduces the overall jumpiness in the UI when scrollbars appear and disappear when using a Polaris app.
diff --git a/.changeset/warm-points-punch.md b/.changeset/warm-points-punch.md
deleted file mode 100644
index c53b52d0061..00000000000
--- a/.changeset/warm-points-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Updated `TextField` of `type` `number` to focus when a `Spinner` button is clicked
diff --git a/polaris-icons/CHANGELOG.md b/polaris-icons/CHANGELOG.md
index b051e61eadd..f314f8fcf6d 100644
--- a/polaris-icons/CHANGELOG.md
+++ b/polaris-icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 7.9.0
+
+### Minor Changes
+
+- [#9856](https://github.com/Shopify/polaris/pull/9856) [`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056) Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Updates social media icons, removing them from their containers and adds a one for the Twitch platform.
+
 ## 7.8.1
 
 ### Patch Changes
diff --git a/polaris-icons/package.json b/polaris-icons/package.json
index c6d279ed24b..3fe85014bc9 100644
--- a/polaris-icons/package.json
+++ b/polaris-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-icons",
-  "version": "7.8.1",
+  "version": "7.9.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify Inc.",
   "main": "dist/index.js",
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index 9703508c91a..120d45b0034 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @shopify/polaris-migrator
 
+## 0.22.0
+
+### Minor Changes
+
+- [#10263](https://github.com/Shopify/polaris/pull/10263) [`67699cb88`](https://github.com/Shopify/polaris/commit/67699cb88c8a5f85a4623b403fddb444c5104b24) Thanks [@aveline](https://github.com/aveline)! - Added migration for `Button` component
+
 ## 0.21.0
 
 ### Minor Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 730c5f95b83..0ee8ebd3890 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.14.0",
+    "@shopify/polaris": "^11.15.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index 9e268e90116..8ebd6424608 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## 11.15.0
+
+### Minor Changes
+
+- [#9701](https://github.com/Shopify/polaris/pull/9701) [`cbf539495`](https://github.com/Shopify/polaris/commit/cbf539495a3d66d67192dde93d9c881b94592f0a) Thanks [@martenbjork](https://github.com/martenbjork)! - Updated the Frame and Topbar components to stay clear of a scrollbar. This reduces the overall jumpiness in the UI when scrollbars appear and disappear when using a Polaris app.
+
+### Patch Changes
+
+- [#10284](https://github.com/Shopify/polaris/pull/10284) [`eba75d20a`](https://github.com/Shopify/polaris/commit/eba75d20a6b839ac068f985c00ccb039a4b50b7d) Thanks [@zakwarsame](https://github.com/zakwarsame)! - - Updated `Filters` query field to initialize with focus based on `mode` state
+
+* [#10282](https://github.com/Shopify/polaris/pull/10282) [`9a2d4f62a`](https://github.com/Shopify/polaris/commit/9a2d4f62ab113bee2b7dec9ca458a59b8024cba4) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed pointer alignment on tooltip
+
+- [#10343](https://github.com/Shopify/polaris/pull/10343) [`12a62b4d7`](https://github.com/Shopify/polaris/commit/12a62b4d74598b486382dcc190b173b8f69d9147) Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed UI inconsistencies in the mobile view of the IndexFilters
+
+* [#10276](https://github.com/Shopify/polaris/pull/10276) [`abb50250e`](https://github.com/Shopify/polaris/commit/abb50250ec6af05dc4fef85d887fac37edfe1175) Thanks [@highfieldjames](https://github.com/highfieldjames)! - Updated `TextField` of `type` `number` to focus when a `Spinner` button is clicked
+
+* Updated dependencies [[`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056)]:
+  - @shopify/polaris-icons@7.9.0
+
 ## 11.14.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index e044d994d5e..15aec211114 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.14.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.15.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.14.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.15.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index 63dd3e4ae09..832d9db38e0 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.14.0",
+  "version": "11.15.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -56,7 +56,7 @@
     "preversion": "node ./scripts/readme-update-version"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^7.8.1",
+    "@shopify/polaris-icons": "^7.9.0",
     "@shopify/polaris-tokens": "^7.5.3",
     "@types/react": "*",
     "@types/react-dom": "*",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 2118d27445a..06f07114143 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,13 @@
 # polaris.shopify.com
 
+## 0.57.3
+
+### Patch Changes
+
+- Updated dependencies [[`47652f7d6`](https://github.com/Shopify/polaris/commit/47652f7d67f98d7bef8ef8485fae803b9f3c1056), [`eba75d20a`](https://github.com/Shopify/polaris/commit/eba75d20a6b839ac068f985c00ccb039a4b50b7d), [`9a2d4f62a`](https://github.com/Shopify/polaris/commit/9a2d4f62ab113bee2b7dec9ca458a59b8024cba4), [`12a62b4d7`](https://github.com/Shopify/polaris/commit/12a62b4d74598b486382dcc190b173b8f69d9147), [`cbf539495`](https://github.com/Shopify/polaris/commit/cbf539495a3d66d67192dde93d9c881b94592f0a), [`abb50250e`](https://github.com/Shopify/polaris/commit/abb50250ec6af05dc4fef85d887fac37edfe1175)]:
+  - @shopify/polaris-icons@7.9.0
+  - @shopify/polaris@11.15.0
+
 ## 0.57.2
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 71cc81a65bd..1276565c9b6 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.2",
+  "version": "0.57.3",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,8 +26,8 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.14.0",
-    "@shopify/polaris-icons": "^7.8.1",
+    "@shopify/polaris": "^11.15.0",
+    "@shopify/polaris-icons": "^7.9.0",
     "@shopify/polaris-tokens": "^7.5.3",
     "@types/react-syntax-highlighter": "^15.5.6",
     "base-64": "^1.0.0",

From 5939b49cf4616d6994cc17095e79ba5600ca7fe4 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Thu, 7 Sep 2023 12:38:12 -0700
Subject: [PATCH 036/102] Add multi-theme support to Polaris (#10290)

This PR consolidates the integration of three feature branches that
collectively introduce a new base/variant theme architecture to Shopify
Polaris. The merged PRs introduce multi-theme support, updated build
artifacts, and a new `useTheme` hook for runtime Polaris tokens access.
Below, you will find a brief overview of each PR, with links to the
original PRs for a more detailed review.

## [Add multi-theme support to Polaris
tokens](https://github.com/Shopify/polaris/pull/10103)

This PR introduces multi-theme support to `@shopify/polaris-tokens` by
implementing a base/variant architecture. The base theme serves as the
foundation for multiple variant themes, which extend the base theme and
are the only themes exposed to consumers. Simplifying system changes by
flattening the relationship between themes is the primary advantage of
this pattern. The PR also includes implementation details like directory
structure, stylesheet generation, and variant theme functionality.

**Example `styles.scss` updates**

```scss
:root {
  /* Default variant theme custom properties (light) */
}

html.Polaris-Summer-Editions-2023 {
  /* Variant theme custom properties */
  /*
     Note: The above selector is special
     cased for backward compatibility. See
     below for updated theme selector structure.
  */
}

html.p-theme-light-high-contrast {
  /* Variant theme custom properties */
  /*
     Note: Variant theme selectors
     contain a subset of custom properties
     overriding the base theme
  */
}

html.p-theme-dark {/* ... */}
html.p-theme-dark-high-contrast {/* ... */}
html.p-theme-dim {/* ... */}
```

## [Add multi-theme build artifacts to Polaris
tokens](https://github.com/Shopify/polaris/pull/10250)

This PR is a rework of #10153, redefining how the `themes` are accessed
from `@shopify/polaris-tokens`. It introduces changes on how asset
builder functions are written and replaces reference to `themes.light`
with a `themeDefault` alias.

```ts
import {themes} from '@shopify/polaris-tokens';

themes['Polaris-Summer-Editions-2023'].color['color-bg']
```

> Note: Future releases can reduce the bundle size impact of including
all themes on one object and enable more flexibility (for example with a
`createTheme` util that deep merges variant theme partials). However,
that is not needed at this time and can be introduced in a minor
release.

## [Add `useTheme` hook for runtime Polaris tokens
access](https://github.com/Shopify/polaris/pull/10252)

This PR is a rework of #10229, brings updates to the `AppProvider` by
incorporating a new `ThemeContext.Provider` and an associated `useTheme`
hook.

```tsx
import {useTheme} from '@shopify/polaris';

function App() {
  const theme = useTheme()

  theme.color['color-bg'] // '#123'
}
```

---------

Co-authored-by: Laura Griffee <laura@mailzone.com>
---
 .changeset/cool-insects-wonder.md             |   8 +
 .../components/AppProvider/AppProvider.tsx    |  49 +++--
 polaris-react/src/index.ts                    |   1 +
 polaris-react/src/utilities/use-theme.ts      |  23 +++
 polaris-tokens/package.json                   |   5 +-
 polaris-tokens/scripts/index.ts               |  12 +-
 polaris-tokens/scripts/toJSON.ts              |  22 +--
 polaris-tokens/scripts/toMediaConditions.ts   |  21 ++-
 polaris-tokens/scripts/toStyleSheet.ts        | 125 ++++++-------
 polaris-tokens/scripts/toTokenValues.ts       |  40 ----
 polaris-tokens/scripts/toValues.ts            |  43 +++++
 polaris-tokens/src/index.ts                   |   4 +
 polaris-tokens/src/metadata.ts                |  21 +--
 polaris-tokens/src/themes/base.ts             |  24 +++
 polaris-tokens/src/themes/constants.ts        |   5 +
 polaris-tokens/src/themes/index.ts            |  25 +++
 polaris-tokens/src/themes/light-uplift.ts     | 177 ++++++++++++++++++
 polaris-tokens/src/themes/light.ts            |   5 +
 polaris-tokens/src/themes/types.ts            |  48 +++++
 polaris-tokens/src/themes/utils.ts            |  57 ++++++
 polaris-tokens/src/token-groups/color.ts      | 134 -------------
 polaris-tokens/src/token-groups/font.ts       |   4 -
 polaris-tokens/src/token-groups/motion.ts     |   1 -
 polaris-tokens/src/token-groups/shadow.ts     |  12 --
 polaris-tokens/src/types.ts                   |   1 -
 polaris-tokens/src/utilities.ts               |  24 +++
 polaris-tokens/tests/toStyleSheet.test.js     |  32 ++--
 yarn.lock                                     |   5 +
 28 files changed, 585 insertions(+), 343 deletions(-)
 create mode 100644 .changeset/cool-insects-wonder.md
 create mode 100644 polaris-react/src/utilities/use-theme.ts
 delete mode 100644 polaris-tokens/scripts/toTokenValues.ts
 create mode 100644 polaris-tokens/scripts/toValues.ts
 create mode 100644 polaris-tokens/src/themes/base.ts
 create mode 100644 polaris-tokens/src/themes/constants.ts
 create mode 100644 polaris-tokens/src/themes/index.ts
 create mode 100644 polaris-tokens/src/themes/light-uplift.ts
 create mode 100644 polaris-tokens/src/themes/light.ts
 create mode 100644 polaris-tokens/src/themes/types.ts
 create mode 100644 polaris-tokens/src/themes/utils.ts

diff --git a/.changeset/cool-insects-wonder.md b/.changeset/cool-insects-wonder.md
new file mode 100644
index 00000000000..f837dccd66b
--- /dev/null
+++ b/.changeset/cool-insects-wonder.md
@@ -0,0 +1,8 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+- Added multi-theme support
+- Added multi-theme build artifacts
+- Added multi-theme runtime access
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index c6499d1f979..17a3d3d142b 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -1,10 +1,13 @@
 import React, {Component} from 'react';
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {themeNameDefault} from '@shopify/polaris-tokens';
 
 import {EphemeralPresenceManager} from '../EphemeralPresenceManager';
 import {MediaQueryProvider} from '../MediaQueryProvider';
 import {FocusManager} from '../FocusManager';
 import {PortalsManager} from '../PortalsManager';
 import {I18n, I18nContext} from '../../utilities/i18n';
+import {ThemeContext, getTheme} from '../../utilities/use-theme';
 import {
   ScrollLockManager,
   ScrollLockManagerContext,
@@ -153,32 +156,40 @@ export class AppProvider extends Component<AppProviderProps, State> {
     };
   };
 
+  getThemeName = (): ThemeName =>
+    this.getFeatures().polarisSummerEditions2023
+      ? 'Polaris-Summer-Editions-2023'
+      : themeNameDefault;
+
   render() {
     const {children} = this.props;
     const features = this.getFeatures();
+    const themeName = this.getThemeName();
 
     const {intl, link} = this.state;
 
     return (
-      <FeaturesContext.Provider value={features}>
-        <I18nContext.Provider value={intl}>
-          <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
-            <StickyManagerContext.Provider value={this.stickyManager}>
-              <LinkContext.Provider value={link}>
-                <MediaQueryProvider>
-                  <PortalsManager>
-                    <FocusManager>
-                      <EphemeralPresenceManager>
-                        {children}
-                      </EphemeralPresenceManager>
-                    </FocusManager>
-                  </PortalsManager>
-                </MediaQueryProvider>
-              </LinkContext.Provider>
-            </StickyManagerContext.Provider>
-          </ScrollLockManagerContext.Provider>
-        </I18nContext.Provider>
-      </FeaturesContext.Provider>
+      <ThemeContext.Provider value={getTheme(themeName)}>
+        <FeaturesContext.Provider value={features}>
+          <I18nContext.Provider value={intl}>
+            <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
+              <StickyManagerContext.Provider value={this.stickyManager}>
+                <LinkContext.Provider value={link}>
+                  <MediaQueryProvider>
+                    <PortalsManager>
+                      <FocusManager>
+                        <EphemeralPresenceManager>
+                          {children}
+                        </EphemeralPresenceManager>
+                      </FocusManager>
+                    </PortalsManager>
+                  </MediaQueryProvider>
+                </LinkContext.Provider>
+              </StickyManagerContext.Provider>
+            </ScrollLockManagerContext.Provider>
+          </I18nContext.Provider>
+        </FeaturesContext.Provider>
+      </ThemeContext.Provider>
     );
   }
 }
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 9c2e91164ca..1f98475f36d 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -423,6 +423,7 @@ export {
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 export {useEventListener} from './utilities/use-event-listener';
+export {useTheme} from './utilities/use-theme';
 export {useIndexResourceState} from './utilities/use-index-resource-state';
 export {
   useRowHovered as useIndexTableRowHovered,
diff --git a/polaris-react/src/utilities/use-theme.ts b/polaris-react/src/utilities/use-theme.ts
new file mode 100644
index 00000000000..929ee51f197
--- /dev/null
+++ b/polaris-react/src/utilities/use-theme.ts
@@ -0,0 +1,23 @@
+import {createContext, useContext} from 'react';
+import type {ThemeName} from '@shopify/polaris-tokens';
+import {themes} from '@shopify/polaris-tokens';
+
+export type Theme = typeof themes[ThemeName];
+
+export function getTheme(themeName: ThemeName): Theme {
+  return themes[themeName];
+}
+
+export const ThemeContext = createContext<Theme | null>(null);
+
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+
+  if (!theme) {
+    throw new Error(
+      'No theme was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.',
+    );
+  }
+
+  return theme;
+}
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 83e2e831061..17486c2ab4f 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -55,5 +55,8 @@
   ],
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "deepmerge": "^4.3.1"
+  }
 }
diff --git a/polaris-tokens/scripts/index.ts b/polaris-tokens/scripts/index.ts
index d8897dcdc21..37502cb78e0 100644
--- a/polaris-tokens/scripts/index.ts
+++ b/polaris-tokens/scripts/index.ts
@@ -1,15 +1,13 @@
-import {metadata} from '../src';
-
-import {toTokenValues} from './toTokenValues';
 import {toJSON} from './toJSON';
 import {toMediaConditions} from './toMediaConditions';
 import {toStyleSheet} from './toStyleSheet';
+import {toValues} from './toValues';
 
 (async () => {
   await Promise.all([
-    toTokenValues(metadata),
-    toJSON(metadata),
-    toMediaConditions(metadata.breakpoints),
-    toStyleSheet(metadata),
+    toJSON(),
+    toMediaConditions(),
+    toStyleSheet(),
+    toValues(),
   ]);
 })();
diff --git a/polaris-tokens/scripts/toJSON.ts b/polaris-tokens/scripts/toJSON.ts
index c21dbc4c7dd..6299d273520 100644
--- a/polaris-tokens/scripts/toJSON.ts
+++ b/polaris-tokens/scripts/toJSON.ts
@@ -1,22 +1,22 @@
 import fs from 'fs';
 import path from 'path';
 
-import type {Metadata, MetadataGroup} from '../src';
+import {metaThemeDefault} from '../src/themes';
 
 const outputDir = path.join(__dirname, '../dist/json');
 
-export async function toJSON(metadata: Metadata) {
-  if (!fs.existsSync(outputDir)) {
-    await fs.promises.mkdir(outputDir, {recursive: true});
-  }
+export async function toJSON() {
+  await fs.promises.mkdir(outputDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
 
-  for (const entry of Object.entries(metadata)) {
-    const [tokenGroupName, tokenGroup] = entry as [
-      keyof Metadata,
-      MetadataGroup,
-    ];
+  for (const [tokenGroupName, metaTokenGroup] of Object.entries(
+    metaThemeDefault,
+  )) {
     const filePath = path.join(outputDir, `${tokenGroupName}.json`);
 
-    await fs.promises.writeFile(filePath, JSON.stringify(tokenGroup));
+    await fs.promises.writeFile(filePath, JSON.stringify(metaTokenGroup));
   }
 }
diff --git a/polaris-tokens/scripts/toMediaConditions.ts b/polaris-tokens/scripts/toMediaConditions.ts
index 4cfe21424e9..c8d4c8aaca2 100644
--- a/polaris-tokens/scripts/toMediaConditions.ts
+++ b/polaris-tokens/scripts/toMediaConditions.ts
@@ -1,21 +1,24 @@
 import fs from 'fs';
 import path from 'path';
 
-import {getMediaConditions, removeMetadata} from '../src';
-import type {MetaBreakpointsTokenGroup} from '../src';
+import {getMediaConditions} from '../src';
+import {metaThemeDefault} from '../src/themes';
+import {extractMetaTokenGroupValues} from '../src/themes/utils';
 
 const scssOutputDir = path.join(__dirname, '../dist/scss');
 const scssOutputPath = path.join(scssOutputDir, 'media-queries.scss');
 
-export async function toMediaConditions(
-  breakpoints: MetaBreakpointsTokenGroup,
-) {
-  if (!fs.existsSync(scssOutputDir)) {
-    await fs.promises.mkdir(scssOutputDir, {recursive: true});
-  }
+export async function toMediaConditions() {
+  await fs.promises.mkdir(scssOutputDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
 
   const mediaConditionEntries = Object.entries(
-    getMediaConditions(removeMetadata(breakpoints)),
+    getMediaConditions(
+      extractMetaTokenGroupValues(metaThemeDefault.breakpoints),
+    ),
   );
 
   const styles = mediaConditionEntries
diff --git a/polaris-tokens/scripts/toStyleSheet.ts b/polaris-tokens/scripts/toStyleSheet.ts
index 7833680ed6b..f06f4ab78cb 100644
--- a/polaris-tokens/scripts/toStyleSheet.ts
+++ b/polaris-tokens/scripts/toStyleSheet.ts
@@ -1,91 +1,78 @@
 import fs from 'fs';
 import path from 'path';
 
-import type {Metadata, MetadataGroup} from '../src';
-import type {MetadataBase} from '../src/types';
+import type {MetaThemeShape, MetaTokenGroupShape} from '../src/themes/types';
+import {metaThemeVariantPartials, metaThemeDefault} from '../src/themes';
+import {themeNameDefault} from '../src/themes/constants';
+import {createThemeSelector} from '../src/themes/utils';
+import {createVar} from '../src/utilities';
+import type {Entries} from '../src/types';
 
 const cssOutputDir = path.join(__dirname, '../dist/css');
-const sassOutputDir = path.join(__dirname, '../dist/scss');
+const scssOutputDir = path.join(__dirname, '../dist/scss');
 const cssOutputPath = path.join(cssOutputDir, 'styles.css');
-const sassOutputPath = path.join(sassOutputDir, 'styles.scss');
+const scssOutputPath = path.join(scssOutputDir, 'styles.scss');
 
-/**
- * Creates static CSS custom properties.
- * Note: These values don't vary by color-scheme.
- */
-export function getStaticCustomProperties(metadata: Metadata) {
-  return Object.entries(metadata)
-    .map(([_, tokenGroup]) => getCustomProperties(tokenGroup))
+/** Creates CSS declarations from a base or variant partial theme. */
+export function getMetaThemeDecls(metaTheme: MetaThemeShape) {
+  return Object.values(metaTheme)
+    .map((metaTokenGroup) => getMetaTokenGroupDecls(metaTokenGroup))
     .join('');
 }
 
-/**
- * Creates static CSS custom properties overrides.
- * Note: These values don't vary by color-scheme.
- */
-export function getStaticCustomPropertiesExperimental(metadata: MetadataBase) {
-  return Object.entries(metadata)
-    .map(([_, tokenGroup]) =>
-      getCustomProperties(
-        Object.fromEntries(
-          Object.entries(tokenGroup)
-            // Only include tokens with `valueExperimental` prop
-            .filter(([_, metadataProperties]) =>
-              Boolean(metadataProperties.valueExperimental),
-            )
-            // Move `valueExperimental` to `value` position
-            .map(([tokenName, metadataProperties]) => [
-              tokenName,
-              {value: metadataProperties.valueExperimental!},
-            ]),
-        ),
-      ),
+/** Creates CSS declarations from a token group. */
+export function getMetaTokenGroupDecls(metaTokenGroup: MetaTokenGroupShape) {
+  return Object.entries(metaTokenGroup)
+    .map(([tokenName, {value}]) =>
+      tokenName.startsWith('motion-keyframes')
+        ? `${createVar(tokenName)}:p-${tokenName};`
+        : `${createVar(tokenName)}:${value};`,
     )
     .join('');
 }
 
-/**
- * Creates CSS custom properties for a given metadata object.
- */
-export function getCustomProperties(tokenGroup: MetadataGroup) {
-  return Object.entries(tokenGroup)
-    .map(([token, {value}]) =>
-      token.startsWith('motion-keyframes') || token.startsWith('keyframes')
-        ? `--p-${token}:p-${token};`
-        : `--p-${token}:${value};`,
-    )
-    .join('');
-}
-
-/**
- * Concatenates the `keyframes` token-group into a single string.
- */
-export function getKeyframes(motion: MetadataGroup) {
+/** Creates `@keyframes` rules for `motion-keyframes-*` tokens. */
+export function getKeyframes(motion: MetaTokenGroupShape) {
   return Object.entries(motion)
-    .filter(
-      ([token]) =>
-        token.startsWith('motion-keyframes') || token.startsWith('keyframes'),
-    )
-    .map(([token, {value}]) => `@keyframes p-${token}${value}`)
+    .filter(([tokenName]) => tokenName.startsWith('motion-keyframes'))
+    .map(([tokenName, {value}]) => `@keyframes p-${tokenName}${value}`)
     .join('');
 }
 
-export async function toStyleSheet(metadata: Metadata) {
-  if (!fs.existsSync(cssOutputDir)) {
-    await fs.promises.mkdir(cssOutputDir, {recursive: true});
-  }
-  if (!fs.existsSync(sassOutputDir)) {
-    await fs.promises.mkdir(sassOutputDir, {recursive: true});
-  }
+export async function toStyleSheet() {
+  await fs.promises.mkdir(cssOutputDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
+
+  await fs.promises.mkdir(scssOutputDir, {recursive: true}).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
+
+  const metaThemeVariantPartialsEntries = Object.entries(
+    metaThemeVariantPartials,
+  ).filter(([themeName]) => themeName !== themeNameDefault) as Entries<
+    Omit<typeof metaThemeVariantPartials, typeof themeNameDefault>
+  >;
 
-  const styles = `
-  :root{color-scheme:light;${getStaticCustomProperties(metadata)}}
-  html.Polaris-Summer-Editions-2023{${getStaticCustomPropertiesExperimental(
-    metadata,
-  )}}
-  ${getKeyframes(metadata.motion)}
-`;
+  const styles = [
+    `:root{color-scheme:light;${getMetaThemeDecls(metaThemeDefault)}}`,
+    metaThemeVariantPartialsEntries.map(
+      ([themeName, metaThemeVariantPartial]) =>
+        `${createThemeSelector(themeName)}{${getMetaThemeDecls(
+          metaThemeVariantPartial,
+        )}}`,
+    ),
+    getKeyframes(metaThemeDefault.motion),
+    // Newline terminator
+    '',
+  ]
+    .flat()
+    .join('\n');
 
   await fs.promises.writeFile(cssOutputPath, styles);
-  await fs.promises.writeFile(sassOutputPath, styles);
+  await fs.promises.writeFile(scssOutputPath, styles);
 }
diff --git a/polaris-tokens/scripts/toTokenValues.ts b/polaris-tokens/scripts/toTokenValues.ts
deleted file mode 100644
index 1faf783c1c5..00000000000
--- a/polaris-tokens/scripts/toTokenValues.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import {removeMetadata} from '../src';
-import type {Metadata} from '../src';
-import type {Entry, Entries, Tokens} from '../src/types';
-
-const outputDir = path.join(__dirname, '../build');
-const outputFile = path.join(outputDir, 'index.ts');
-
-export async function toTokenValues(metadata: Metadata) {
-  if (!fs.existsSync(outputDir)) {
-    await fs.promises.mkdir(outputDir);
-  }
-
-  const tokensEntries: Entries<Tokens> = Object.entries(metadata).map(
-    (entry): Entry<Tokens> => {
-      const [tokenGroupName, tokenGroup] = entry as Entry<Metadata>;
-
-      return [tokenGroupName, removeMetadata(tokenGroup)];
-    },
-  );
-
-  await fs.promises.writeFile(
-    outputFile,
-    [
-      `export * from '../src/index'`,
-      tokensEntries.map(createExport),
-      createExport(['tokens', Object.fromEntries(tokensEntries)]),
-    ]
-      .flat()
-      .join('\n'),
-  );
-}
-
-function createExport(
-  entry: [string, {[key: string]: unknown}] | Entry<Tokens>,
-) {
-  return `export const ${entry[0]} = ${JSON.stringify(entry[1])} as const;`;
-}
diff --git a/polaris-tokens/scripts/toValues.ts b/polaris-tokens/scripts/toValues.ts
new file mode 100644
index 00000000000..d0156238349
--- /dev/null
+++ b/polaris-tokens/scripts/toValues.ts
@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+
+import {metaThemeVariants, metaThemeDefault} from '../src/themes';
+import {extractMetaThemeValues} from '../src/themes/utils';
+
+const outputDir = path.join(__dirname, '../build');
+
+export async function toValues() {
+  await fs.promises.mkdir(outputDir).catch((error) => {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  });
+
+  const themeDefault = extractMetaThemeValues(metaThemeDefault);
+
+  await fs.promises.writeFile(
+    path.join(outputDir, 'index.ts'),
+    [
+      `export * from '../src/index';`,
+      Object.entries(themeDefault).map(createExport),
+      createExport(['tokens', themeDefault]),
+      createExport([
+        'themes',
+        Object.fromEntries(
+          Object.entries(metaThemeVariants).map(
+            ([themeName, metaThemeVariant]) => [
+              themeName,
+              extractMetaThemeValues(metaThemeVariant),
+            ],
+          ),
+        ),
+      ]),
+    ]
+      .flat()
+      .join('\n'),
+  );
+}
+
+function createExport(entry: [string | number, any]) {
+  return `export const ${entry[0]} = ${JSON.stringify(entry[1])} as const;`;
+}
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index bbe6810d07e..60aa3786e4a 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -8,6 +8,10 @@ export type {
   MetadataGroup,
 } from './types';
 
+export type {ThemeName} from './themes/types';
+
+export {themeNameDefault} from './themes/constants';
+
 export type {
   BorderTokenGroup,
   BorderTokenName,
diff --git a/polaris-tokens/src/metadata.ts b/polaris-tokens/src/metadata.ts
index 01f1a1943e3..fa7d269e0b4 100644
--- a/polaris-tokens/src/metadata.ts
+++ b/polaris-tokens/src/metadata.ts
@@ -1,24 +1,7 @@
+import {metaThemeDefault} from './themes';
 import type {Exact, MetadataBase} from './types';
-import {tokensToRems} from './utilities';
-import {border} from './token-groups/border';
-import {breakpoints} from './token-groups/breakpoints';
-import {color} from './token-groups/color';
-import {font} from './token-groups/font';
-import {motion} from './token-groups/motion';
-import {shadow} from './token-groups/shadow';
-import {space} from './token-groups/space';
-import {zIndex} from './token-groups/zIndex';
 
-export const metadata = createMetadata({
-  breakpoints: tokensToRems(breakpoints),
-  border: tokensToRems(border),
-  color,
-  font: tokensToRems(font),
-  motion,
-  shadow: tokensToRems(shadow),
-  space: tokensToRems(space),
-  zIndex,
-});
+export const metadata = metaThemeDefault;
 
 export type Metadata = typeof metadata;
 
diff --git a/polaris-tokens/src/themes/base.ts b/polaris-tokens/src/themes/base.ts
new file mode 100644
index 00000000000..d84b8a067a1
--- /dev/null
+++ b/polaris-tokens/src/themes/base.ts
@@ -0,0 +1,24 @@
+import {createExact, tokensToRems} from '../utilities';
+import {border} from '../token-groups/border';
+import {breakpoints} from '../token-groups/breakpoints';
+import {color} from '../token-groups/color';
+import {font} from '../token-groups/font';
+import {motion} from '../token-groups/motion';
+import {shadow} from '../token-groups/shadow';
+import {space} from '../token-groups/space';
+import {zIndex} from '../token-groups/zIndex';
+
+import type {MetaThemeShape} from './types';
+
+const createMetaThemeBase = createExact<MetaThemeShape>();
+
+export const metaThemeBase = createMetaThemeBase({
+  breakpoints: tokensToRems(breakpoints),
+  border: tokensToRems(border),
+  color,
+  font: tokensToRems(font),
+  motion,
+  shadow: tokensToRems(shadow),
+  space: tokensToRems(space),
+  zIndex,
+});
diff --git a/polaris-tokens/src/themes/constants.ts b/polaris-tokens/src/themes/constants.ts
new file mode 100644
index 00000000000..c5275847fb3
--- /dev/null
+++ b/polaris-tokens/src/themes/constants.ts
@@ -0,0 +1,5 @@
+export const themeNameLight = 'light';
+export const themeNameLightUplift = 'Polaris-Summer-Editions-2023';
+export const themeNameDefault = themeNameLight;
+
+export const themeNames = [themeNameLight, themeNameLightUplift] as const;
diff --git a/polaris-tokens/src/themes/index.ts b/polaris-tokens/src/themes/index.ts
new file mode 100644
index 00000000000..121ba57e37b
--- /dev/null
+++ b/polaris-tokens/src/themes/index.ts
@@ -0,0 +1,25 @@
+import type {MetaThemeVariantPartials, MetaThemeVariants} from './types';
+import {createMetaThemeVariant} from './utils';
+import {themeNameDefault} from './constants';
+import {metaThemeLight, metaThemeLightPartial} from './light';
+import {
+  metaThemeLightUplift,
+  metaThemeLightUpliftPartial,
+} from './light-uplift';
+
+export {createMetaThemeVariant} from './utils';
+
+export const metaThemeVariants: MetaThemeVariants = {
+  light: metaThemeLight,
+  'Polaris-Summer-Editions-2023': metaThemeLightUplift,
+};
+
+export const metaThemeVariantPartials: MetaThemeVariantPartials = {
+  light: metaThemeLightPartial,
+  'Polaris-Summer-Editions-2023': metaThemeLightUpliftPartial,
+};
+
+export const metaThemeDefaultPartial =
+  metaThemeVariantPartials[themeNameDefault];
+
+export const metaThemeDefault = createMetaThemeVariant(metaThemeDefaultPartial);
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
new file mode 100644
index 00000000000..ae0c594a802
--- /dev/null
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -0,0 +1,177 @@
+import * as colors from '../colors-experimental';
+
+import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
+
+export const metaThemeLightUpliftPartial = createMetaThemeVariantPartial({
+  motion: {
+    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
+  },
+  font: {
+    'font-family-sans': {
+      value:
+        "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+    },
+    'font-size-500': {value: '30px'},
+    'font-size-600': {value: '36px'},
+  },
+  shadow: {
+    'shadow-inset-lg': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
+    },
+    'shadow-inset-md': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
+    },
+    'shadow-inset-sm': {
+      value:
+        'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
+    },
+    'shadow-xs': {value: '0px 1px 0px rgba(0, 0, 0, 0.07)'},
+    'shadow-sm': {value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)'},
+    'shadow-md': {value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)'},
+    'shadow-lg': {value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)'},
+    'shadow-xl': {value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)'},
+    'shadow-2xl': {value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)'},
+  },
+  color: {
+    'color-bg-inverse': {value: colors.gray[16]()},
+    'color-bg-inset-strong': {value: colors.gray[15]()},
+    'color-bg-inverse-hover': {value: colors.gray[14]()},
+    'color-bg-inverse-active': {value: colors.gray[13]()},
+    'color-bg-strong-hover': {value: colors.gray[9]()},
+    'color-bg-strong-active': {value: colors.gray[10]()},
+    'color-bg-strong': {value: colors.gray[8]()},
+    'color-bg-subdued-active': {value: colors.gray[7]()},
+    'color-bg-disabled': {value: colors.gray[7]()},
+    'color-bg-interactive-disabled': {value: colors.gray[7]()},
+    'color-bg-app': {value: colors.gray[6]()},
+    'color-bg-app-hover': {value: colors.gray[2]()},
+    'color-bg-app-selected': {value: colors.gray[3]()},
+    'color-bg-active': {value: colors.gray[4]()},
+    'color-bg-subdued-hover': {value: colors.gray[6]()},
+    'color-bg-inset': {value: colors.gray[6]()},
+    'color-bg-hover': {value: colors.gray[3]()},
+    'color-bg-subdued': {value: colors.gray[4]()},
+    'color-bg-input': {value: colors.gray[1]()},
+    'color-bg': {value: colors.gray[1]()},
+    'color-bg-primary-active': {value: colors.gray[16]()},
+    'color-bg-primary-hover': {value: colors.gray[16]()},
+    'color-bg-primary': {value: colors.gray[15]()},
+    'color-bg-success-strong': {value: colors.green[12]},
+    'color-bg-success': {value: colors.green[3]},
+    'color-bg-primary-subdued-active': {value: colors.gray[6]()},
+    'color-bg-success-subdued': {value: colors.green[3]},
+    'color-bg-primary-subdued-hover': {value: colors.gray[7]()},
+    'color-bg-success-subdued-hover': {value: colors.green[5]},
+    'color-bg-primary-subdued': {value: colors.gray[8]()},
+    'color-bg-primary-subdued-selected': {value: colors.gray[6]()},
+    'color-bg-critical-strong-active': {value: colors.red[14]},
+    'color-bg-critical-strong-hover': {value: colors.red[13]},
+    'color-bg-critical-strong': {value: colors.red[12]},
+    'color-bg-critical-subdued-active': {value: colors.red[6]},
+    'color-bg-critical': {value: colors.red[6]},
+    'color-bg-critical-subdued': {value: colors.red[4]},
+    'color-bg-critical-subdued-hover': {value: colors.red[5]},
+    'color-bg-caution-strong': {value: colors.yellow[6]},
+    'color-bg-caution': {value: colors.yellow[4]},
+    'color-bg-caution-subdued-active': {value: colors.yellow[4]},
+    'color-bg-caution-subdued': {value: colors.yellow[2]},
+    'color-bg-caution-subdued-hover': {value: colors.yellow[3]},
+    'color-bg-info-strong': {value: colors.azure[9]},
+    'color-bg-info-subdued-active': {value: colors.azure[6]},
+    'color-bg-info': {value: colors.azure[4]},
+    'color-bg-info-subdued': {value: colors.azure[3]},
+    'color-bg-info-subdued-hover': {value: colors.azure[4]},
+    'color-bg-interactive-active': {value: colors.gray[14]()},
+    'color-bg-interactive-hover': {value: colors.gray[15]()},
+    'color-bg-interactive': {value: colors.gray[16]()},
+    'color-bg-interactive-subdued-active': {value: colors.gray[6]()},
+    'color-bg-interactive-subdued-hover': {value: colors.gray[7]()},
+    'color-bg-interactive-subdued': {value: colors.gray[8]()},
+    'color-bg-interactive-selected': {value: colors.gray[6]()},
+    'color-bg-warning': {value: colors.orange[7]},
+    'color-bg-magic-strong': {value: colors.purple[12]},
+    'color-bg-magic-hover': {value: colors.purple[7]},
+    'color-bg-magic-active': {value: colors.purple[8]},
+    'color-bg-magic': {value: colors.purple[6]},
+    'color-bg-magic-subdued-hover': {value: colors.purple[4]},
+    'color-bg-magic-subdued-active': {value: colors.purple[6]},
+    'color-bg-magic-subdued': {value: colors.purple[3]},
+    'color-border-input-hover': {value: colors.gray[13]()},
+    'color-border-inverse': {value: colors.gray[13]()},
+    'color-border-strong-hover': {value: colors.gray[11]()},
+    'color-border-input': {value: colors.gray[12]()},
+    'color-border-hover': {value: colors.gray[10]()},
+    'color-border-strong': {value: colors.gray[10]()},
+    'color-border': {value: colors.gray[8]()},
+    'color-border-disabled': {value: colors.gray[7]()},
+    'color-border-subdued': {value: colors.gray[7]()},
+    'color-border-interactive-disabled': {value: colors.gray[7]()},
+    'color-border-primary': {value: colors.gray[8]()},
+    'color-border-success': {value: colors.green[5]},
+    'color-border-success-subdued': {value: colors.green[5]},
+    'color-border-critical-active': {value: colors.red[11]},
+    'color-border-critical-hover': {value: colors.red[10]},
+    'color-border-critical': {value: colors.red[9]},
+    'color-border-critical-subdued': {value: colors.red[9]},
+    'color-border-caution': {value: colors.yellow[5]},
+    'color-border-caution-subdued': {value: colors.yellow[5]},
+    'color-border-info': {value: colors.azure[9]},
+    'color-border-info-subdued': {value: colors.azure[9]},
+    'color-border-interactive-active': {value: colors.blue[15]},
+    'color-border-interactive-hover': {value: colors.blue[14]},
+    'color-border-interactive': {value: colors.blue[13]},
+    'color-border-interactive-focus': {value: colors.blue[13]},
+    'color-border-interactive-subdued': {value: colors.blue[13]},
+    'color-border-magic-strong': {value: colors.purple[12]},
+    'color-border-magic': {value: colors.purple[10]},
+    'color-icon-hover': {value: colors.gray[15]()},
+    'color-icon': {value: colors.gray[14]()},
+    'color-icon-subdued': {value: colors.gray[12]()},
+    'color-icon-disabled': {value: colors.gray[10]()},
+    'color-icon-interactive-disabled': {value: colors.gray[10]()},
+    'color-icon-inverse': {value: colors.gray[8]()},
+    'color-icon-on-color': {value: colors.gray[1]()},
+    'color-icon-primary': {value: colors.gray[16]()},
+    'color-icon-success': {value: colors.green[12]},
+    'color-icon-critical': {value: colors.red[11]},
+    'color-icon-caution': {value: colors.yellow[11]},
+    'color-icon-info': {value: colors.azure[11]},
+    'color-icon-warning': {value: colors.orange[11]},
+    'color-icon-interactive-active': {value: colors.blue[15]},
+    'color-icon-interactive-hover': {value: colors.blue[14]},
+    'color-icon-interactive': {value: colors.blue[13]},
+    'color-icon-interactive-inverse': {value: colors.blue[8]},
+    'color-icon-magic': {value: colors.purple[13]},
+    'color-text': {value: colors.gray[15]()},
+    'color-text-subdued': {value: colors.gray[13]()},
+    'color-text-disabled': {value: colors.gray[11]()},
+    'color-text-interactive-disabled': {value: colors.gray[10]()},
+    'color-text-inverse-subdued': {value: colors.gray[10]()},
+    'color-text-inverse': {value: colors.gray[8]()},
+    'color-text-on-color': {value: colors.gray[1]()},
+    'color-text-success-strong': {value: colors.green[15]},
+    'color-text-success': {value: colors.green[15]},
+    'color-text-primary': {value: colors.gray[14]()},
+    'color-text-primary-hover': {value: colors.gray[14]()},
+    'color-text-critical-strong': {value: colors.red[14]},
+    'color-text-critical-active': {value: colors.red[16]},
+    'color-text-critical': {value: colors.red[14]},
+    'color-text-caution-strong': {value: colors.yellow[15]},
+    'color-text-caution': {value: colors.yellow[15]},
+    'color-text-info-strong': {value: colors.azure[16]},
+    'color-text-info': {value: colors.azure[14]},
+    'color-text-warning-strong': {value: colors.orange[16]},
+    'color-text-interactive-active': {value: colors.blue[15]},
+    'color-text-interactive-hover': {value: colors.blue[14]},
+    'color-text-interactive': {value: colors.blue[13]},
+    'color-text-interactive-inverse': {value: colors.blue[8]},
+    'color-text-magic-strong': {value: colors.purple[15]},
+    'color-text-magic': {value: colors.purple[14]},
+  },
+});
+
+export const metaThemeLightUplift = createMetaThemeVariant(
+  metaThemeLightUpliftPartial,
+);
diff --git a/polaris-tokens/src/themes/light.ts b/polaris-tokens/src/themes/light.ts
new file mode 100644
index 00000000000..a1289f7e27a
--- /dev/null
+++ b/polaris-tokens/src/themes/light.ts
@@ -0,0 +1,5 @@
+import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
+
+export const metaThemeLightPartial = createMetaThemeVariantPartial({});
+
+export const metaThemeLight = createMetaThemeVariant(metaThemeLightPartial);
diff --git a/polaris-tokens/src/themes/types.ts b/polaris-tokens/src/themes/types.ts
new file mode 100644
index 00000000000..e40cc5f7c29
--- /dev/null
+++ b/polaris-tokens/src/themes/types.ts
@@ -0,0 +1,48 @@
+import type {metaThemeBase} from './base';
+import type {themeNames} from './constants';
+
+export type MetaThemeBase = typeof metaThemeBase;
+export type MetaThemeVariant = MetaThemeBase;
+
+export type ThemeName = typeof themeNames[number];
+export type ThemeBase = ExtractMetaThemeValues<MetaThemeBase>;
+export type ThemeVariant = ExtractMetaThemeValues<MetaThemeVariant>;
+
+export interface MetaTokenProperties {
+  value: string;
+  description?: string;
+}
+
+export interface MetaTokenGroupShape {
+  [tokenName: string]: MetaTokenProperties;
+}
+
+export interface MetaThemeShape {
+  [tokenGroupName: string]: MetaTokenGroupShape;
+}
+
+export type MetaThemeVariants = {
+  [T in ThemeName]: MetaThemeVariant;
+};
+
+type ExcludeMotionKeyframes<T> = T extends `motion-keyframes-${string}`
+  ? never
+  : T;
+
+export type MetaThemeVariantPartialShape = {
+  [TokenGroupName in keyof Omit<MetaThemeBase, 'breakpoints'>]?: {
+    [TokenName in keyof MetaThemeBase[TokenGroupName] as ExcludeMotionKeyframes<TokenName>]?: MetaTokenProperties;
+  };
+};
+
+export type MetaThemeVariantPartials = {
+  [T in ThemeName]: MetaThemeVariantPartialShape;
+};
+
+export type ExtractMetaTokenGroupValues<T extends MetaTokenGroupShape> = {
+  [K in keyof T]: T[K]['value'];
+};
+
+export type ExtractMetaThemeValues<T extends MetaThemeShape> = {
+  [K in keyof T]: ExtractMetaTokenGroupValues<T[K]>;
+};
diff --git a/polaris-tokens/src/themes/utils.ts b/polaris-tokens/src/themes/utils.ts
new file mode 100644
index 00000000000..1a8105e5402
--- /dev/null
+++ b/polaris-tokens/src/themes/utils.ts
@@ -0,0 +1,57 @@
+import deepmerge from 'deepmerge';
+
+import type {Entry, Exact} from '../types';
+import {createExact} from '../utilities';
+
+import type {
+  ExtractMetaThemeValues,
+  ExtractMetaTokenGroupValues,
+  MetaThemeShape,
+  MetaThemeVariant,
+  MetaThemeVariantPartialShape,
+  MetaTokenGroupShape,
+  ThemeName,
+} from './types';
+import {themeNameLightUplift} from './constants';
+import {metaThemeBase} from './base';
+
+export const createMetaThemeVariantPartial =
+  createExact<MetaThemeVariantPartialShape>();
+
+export function createMetaThemeVariant<
+  T extends Exact<MetaThemeVariantPartialShape, T>,
+>(metaThemeVariantPartial: T): MetaThemeVariant {
+  return deepmerge(metaThemeBase, metaThemeVariantPartial);
+}
+
+export function createThemeClassName(themeName: ThemeName) {
+  return themeName === themeNameLightUplift
+    ? themeName
+    : `p-theme-${themeName}`;
+}
+
+export function createThemeSelector(themeName: ThemeName) {
+  return `html.${createThemeClassName(themeName)}`;
+}
+
+export function extractMetaTokenGroupValues<T extends MetaTokenGroupShape>(
+  metaTokenGroup: T,
+) {
+  return Object.fromEntries(
+    Object.entries(metaTokenGroup).map(
+      ([tokenName, {value}]): Entry<
+        ExtractMetaTokenGroupValues<MetaTokenGroupShape>
+      > => [tokenName, value],
+    ),
+  ) as ExtractMetaTokenGroupValues<T>;
+}
+
+export function extractMetaThemeValues<T extends MetaThemeShape>(metaTheme: T) {
+  return Object.fromEntries(
+    Object.entries(metaTheme).map(
+      ([tokenGroupName, metaTokenGroup]): Entry<
+        ExtractMetaThemeValues<MetaThemeShape>
+      > => [tokenGroupName, extractMetaTokenGroupValues(metaTokenGroup)],
+    ),
+  ) as ExtractMetaThemeValues<T>;
+}
diff --git a/polaris-tokens/src/token-groups/color.ts b/polaris-tokens/src/token-groups/color.ts
index 19a6555ee58..60890d87213 100644
--- a/polaris-tokens/src/token-groups/color.ts
+++ b/polaris-tokens/src/token-groups/color.ts
@@ -219,57 +219,46 @@ export const color: {
 } = {
   'color-bg-inverse': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-inset-strong': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-inverse-hover': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-bg-inverse-active': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-bg-strong-hover': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[9](),
     description: '',
   },
   'color-bg-strong-active': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-bg-strong': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-subdued-active': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-disabled': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-interactive-disabled': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-app': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-app-active': {
@@ -278,77 +267,62 @@ export const color: {
   },
   'color-bg-app-hover': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[2](),
     description: '',
   },
   'color-bg-app-selected': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[3](),
     description: '',
   },
   'color-bg-active': {
     value: colors.gray[300],
-    valueExperimental: colorsExperimental.gray[4](),
     description: '',
   },
   'color-bg-subdued-hover': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-inset': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-hover': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[3](),
     description: '',
   },
   'color-bg-subdued': {
     value: colors.gray[100],
-    valueExperimental: colorsExperimental.gray[4](),
     description: '',
   },
   'color-bg-input': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-bg': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-bg-primary-active': {
     value: colors.green[900],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-primary-hover': {
     value: colors.green[800],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-success-strong': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[12],
     description: '',
   },
   'color-bg-success': {
     value: colors.green[300],
-    valueExperimental: colorsExperimental.green[3],
     description: '',
   },
   'color-bg-primary-subdued-active': {
     value: colors.green[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-success-subdued-active': {
@@ -357,337 +331,270 @@ export const color: {
   },
   'color-bg-success-subdued': {
     value: colors.green[100],
-    valueExperimental: colorsExperimental.green[3],
     description: '',
   },
   'color-bg-primary-subdued-hover': {
     value: colors.green[100],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-success-subdued-hover': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-bg-primary-subdued': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-primary-subdued-selected': {
     value: colors.green[50],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-critical-strong-active': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-bg-critical-strong-hover': {
     value: colors.red[700],
-    valueExperimental: colorsExperimental.red[13],
     description: '',
   },
   'color-bg-critical-strong': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[12],
     description: '',
   },
   'color-bg-critical-subdued-active': {
     value: colors.red[200],
-    valueExperimental: colorsExperimental.red[6],
     description: '',
   },
   'color-bg-critical': {
     value: colors.red[200],
-    valueExperimental: colorsExperimental.red[6],
     description: '',
   },
   'color-bg-critical-subdued': {
     value: colors.red[100],
-    valueExperimental: colorsExperimental.red[4],
     description: '',
   },
   'color-bg-critical-subdued-hover': {
     value: colors.red[50],
-    valueExperimental: colorsExperimental.red[5],
     description: '',
   },
   'color-bg-caution-strong': {
     value: colors.yellow[600],
-    valueExperimental: colorsExperimental.yellow[6],
     description: '',
   },
   'color-bg-caution': {
     value: colors.yellow[300],
-    valueExperimental: colorsExperimental.yellow[4],
     description: '',
   },
   'color-bg-caution-subdued-active': {
     value: colors.yellow[200],
-    valueExperimental: colorsExperimental.yellow[4],
     description: '',
   },
   'color-bg-caution-subdued': {
     value: colors.yellow[100],
-    valueExperimental: colorsExperimental.yellow[2],
     description: '',
   },
   'color-bg-caution-subdued-hover': {
     value: colors.yellow[50],
-    valueExperimental: colorsExperimental.yellow[3],
     description: '',
   },
   'color-bg-info-strong': {
     value: colors.teal[600],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-bg-info-subdued-active': {
     value: colors.teal[200],
-    valueExperimental: colorsExperimental.azure[6],
     description: '',
   },
   'color-bg-info': {
     value: colors.teal[200],
-    valueExperimental: colorsExperimental.azure[4],
     description: '',
   },
   'color-bg-info-subdued': {
     value: colors.teal[100],
-    valueExperimental: colorsExperimental.azure[3],
     description: '',
   },
   'color-bg-info-subdued-hover': {
     value: colors.teal[50],
-    valueExperimental: colorsExperimental.azure[4],
     description: '',
   },
   'color-bg-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-bg-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-bg-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-bg-interactive-subdued-active': {
     value: colors.blue[200],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-interactive-subdued-hover': {
     value: colors.blue[100],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-bg-interactive-subdued': {
     value: colors.blue[50],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-bg-interactive-selected': {
     value: colors.blue[50],
-    valueExperimental: colorsExperimental.gray[6](),
     description: '',
   },
   'color-bg-warning': {
     value: colors.orange[200],
-    valueExperimental: colorsExperimental.orange[7],
     description: '',
   },
   'color-bg-magic-strong': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[12],
     description: '',
   },
   'color-bg-magic-hover': {
     value: colors.purple[200],
-    valueExperimental: colorsExperimental.purple[7],
     description: '',
   },
   'color-bg-magic-active': {
     value: colors.purple[300],
-    valueExperimental: colorsExperimental.purple[8],
     description: '',
   },
   'color-bg-magic': {
     value: colors.purple[100],
-    valueExperimental: colorsExperimental.purple[6],
     description: '',
   },
   'color-bg-magic-subdued-hover': {
     value: colors.purple[100],
-    valueExperimental: colorsExperimental.purple[4],
     description: '',
   },
   'color-bg-magic-subdued-active': {
     value: colors.purple[200],
-    valueExperimental: colorsExperimental.purple[6],
     description: '',
   },
   'color-bg-magic-subdued': {
     value: colors.purple[50],
-    valueExperimental: colorsExperimental.purple[3],
     description: '',
   },
   'color-border-input-hover': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-border-inverse': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-border-strong-hover': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[11](),
     description: '',
   },
   'color-border-input': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[12](),
     description: '',
   },
   'color-border-hover': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-border-strong': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-border': {
     value: colors.gray[500],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-border-disabled': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-subdued': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-interactive-disabled': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[7](),
     description: '',
   },
   'color-border-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-border-success': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-border-success-subdued': {
     value: colors.green[400],
-    valueExperimental: colorsExperimental.green[5],
     description: '',
   },
   'color-border-critical-active': {
     value: colors.red[900],
-    valueExperimental: colorsExperimental.red[11],
     description: '',
   },
   'color-border-critical-hover': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[10],
     description: '',
   },
   'color-border-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[9],
     description: '',
   },
   'color-border-critical-subdued': {
     value: colors.red[400],
-    valueExperimental: colorsExperimental.red[9],
     description: '',
   },
   'color-border-caution': {
     value: colors.yellow[600],
-    valueExperimental: colorsExperimental.yellow[5],
     description: '',
   },
   'color-border-caution-subdued': {
     value: colors.yellow[400],
-    valueExperimental: colorsExperimental.yellow[5],
     description: '',
   },
   'color-border-info': {
     value: colors.teal[500],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-border-info-subdued': {
     value: colors.teal[400],
-    valueExperimental: colorsExperimental.azure[9],
     description: '',
   },
   'color-border-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-border-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-border-interactive': {
     value: colors.blue[500],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-interactive-focus': {
     value: colors.blue[500],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-interactive-subdued': {
     value: colors.blue[200],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-border-magic-strong': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[12],
     description: '',
   },
   'color-border-magic': {
     value: colors.purple[400],
-    valueExperimental: colorsExperimental.purple[10],
     description: '',
   },
   'color-icon-hover': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-icon': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-icon-active': {
@@ -696,207 +603,166 @@ export const color: {
   },
   'color-icon-subdued': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[12](),
     description: '',
   },
   'color-icon-disabled': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-icon-interactive-disabled': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-icon-inverse': {
     value: colors.gray[400],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-icon-on-color': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-icon-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[16](),
     description: '',
   },
   'color-icon-success': {
     value: colors.green[600],
-    valueExperimental: colorsExperimental.green[12],
     description: '',
   },
   'color-icon-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[11],
     description: '',
   },
   'color-icon-caution': {
     value: colors.yellow[700],
-    valueExperimental: colorsExperimental.yellow[11],
     description: '',
   },
   'color-icon-info': {
     value: colors.teal[600],
-    valueExperimental: colorsExperimental.azure[11],
     description: '',
   },
   'color-icon-warning': {
     value: colors.orange[500],
-    valueExperimental: colorsExperimental.orange[11],
     description: '',
   },
   'color-icon-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-icon-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-icon-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-icon-interactive-inverse': {
     value: colors.blue[400],
-    valueExperimental: colorsExperimental.blue[8],
     description: '',
   },
   'color-icon-magic': {
     value: colors.purple[500],
-    valueExperimental: colorsExperimental.purple[13],
     description: '',
   },
   'color-text': {
     value: colors.gray[900],
-    valueExperimental: colorsExperimental.gray[15](),
     description: '',
   },
   'color-text-subdued': {
     value: colors.gray[800],
-    valueExperimental: colorsExperimental.gray[13](),
     description: '',
   },
   'color-text-disabled': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[11](),
     description: '',
   },
   'color-text-interactive-disabled': {
     value: colors.gray[700],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-text-inverse-subdued': {
     value: colors.gray[600],
-    valueExperimental: colorsExperimental.gray[10](),
     description: '',
   },
   'color-text-inverse': {
     value: colors.gray[200],
-    valueExperimental: colorsExperimental.gray[8](),
     description: '',
   },
   'color-text-on-color': {
     value: colors.gray[50],
-    valueExperimental: colorsExperimental.gray[1](),
     description: '',
   },
   'color-text-success-strong': {
     value: colors.green[900],
-    valueExperimental: colorsExperimental.green[15],
     description: '',
   },
   'color-text-success': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.green[15],
     description: '',
   },
   'color-text-primary': {
     value: colors.green[700],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-text-primary-hover': {
     value: colors.green[800],
-    valueExperimental: colorsExperimental.gray[14](),
     description: '',
   },
   'color-text-critical-strong': {
     value: colors.red[900],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-text-critical-active': {
     value: colors.red[800],
-    valueExperimental: colorsExperimental.red[16],
     description: '',
   },
   'color-text-critical': {
     value: colors.red[600],
-    valueExperimental: colorsExperimental.red[14],
     description: '',
   },
   'color-text-caution-strong': {
     value: colors.yellow[900],
-    valueExperimental: colorsExperimental.yellow[15],
     description: '',
   },
   'color-text-caution': {
     value: colors.yellow[800],
-    valueExperimental: colorsExperimental.yellow[15],
     description: '',
   },
   'color-text-info-strong': {
     value: colors.teal[900],
-    valueExperimental: colorsExperimental.azure[16],
     description: '',
   },
   'color-text-info': {
     value: colors.teal[700],
-    valueExperimental: colorsExperimental.azure[14],
     description: '',
   },
   'color-text-warning-strong': {
     value: colors.orange[900],
-    valueExperimental: colorsExperimental.orange[16],
     description: '',
   },
   'color-text-interactive-active': {
     value: colors.blue[800],
-    valueExperimental: colorsExperimental.blue[15],
     description: '',
   },
   'color-text-interactive-hover': {
     value: colors.blue[700],
-    valueExperimental: colorsExperimental.blue[14],
     description: '',
   },
   'color-text-interactive': {
     value: colors.blue[600],
-    valueExperimental: colorsExperimental.blue[13],
     description: '',
   },
   'color-text-interactive-inverse': {
     value: colors.blue[400],
-    valueExperimental: colorsExperimental.blue[8],
     description: '',
   },
   'color-text-magic-strong': {
     value: colors.purple[800],
-    valueExperimental: colorsExperimental.purple[15],
     description: '',
   },
   'color-text-magic': {
     value: colors.purple[600],
-    valueExperimental: colorsExperimental.purple[14],
     description: '',
   },
   // Experimental tokens
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
index a3c4dc0ff44..e6bf8605ab6 100644
--- a/polaris-tokens/src/token-groups/font.ts
+++ b/polaris-tokens/src/token-groups/font.ts
@@ -45,8 +45,6 @@ export const font: {
   'font-family-sans': {
     value:
       "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
-    valueExperimental:
-      "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
   },
   'font-family-mono': {
     value:
@@ -75,11 +73,9 @@ export const font: {
   },
   'font-size-500': {
     value: '28px',
-    valueExperimental: '30px',
   },
   'font-size-600': {
     value: '32px',
-    valueExperimental: '36px',
   },
   'font-size-700': {
     value: '40px',
diff --git a/polaris-tokens/src/token-groups/motion.ts b/polaris-tokens/src/token-groups/motion.ts
index 6a3417d470c..6bf7428badd 100644
--- a/polaris-tokens/src/token-groups/motion.ts
+++ b/polaris-tokens/src/token-groups/motion.ts
@@ -88,7 +88,6 @@ export const motion: {
   },
   'motion-ease-out': {
     value: 'cubic-bezier(0, 0, 0.58, 1)',
-    valueExperimental: 'cubic-bezier(0.19,0.91,0.38,1)',
     description: 'Starts at top speed and finishes slowly. Use sparingly.',
   },
   'motion-ease-in-out': {
diff --git a/polaris-tokens/src/token-groups/shadow.ts b/polaris-tokens/src/token-groups/shadow.ts
index 88a2ae9cfdb..c8461b0b547 100644
--- a/polaris-tokens/src/token-groups/shadow.ts
+++ b/polaris-tokens/src/token-groups/shadow.ts
@@ -41,49 +41,37 @@ export const shadow: {
 } = {
   'shadow-inset-lg': {
     value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
-    valueExperimental:
-      'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
   },
   'shadow-inset-md': {
     value: 'inset 0px 2px 4px rgba(31, 33, 36, 0.32)',
-    valueExperimental:
-      'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
   },
   'shadow-inset-sm': {
     value: 'inset 0px 0px 3px rgba(31, 33, 36, 0.56)',
-    valueExperimental:
-      'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
   },
   'shadow-none': {
     value: 'none',
   },
   'shadow-xs': {
     value: '0px 0px 2px rgba(31, 33, 36, 0.24)',
-    valueExperimental: '0px 1px 0px rgba(0, 0, 0, 0.07)',
   },
   'shadow-sm': {
     value: '0px 1px 1px rgba(31, 33, 36, 0.1)',
-    valueExperimental: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)',
   },
   'shadow-md': {
     value:
       '0px 2px 4px rgba(31, 33, 36, 0.1), 0px 1px 6px rgba(31, 33, 36, 0.05)',
-    valueExperimental: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)',
   },
   'shadow-lg': {
     value:
       '0px 4px 12px rgba(31, 33, 36, 0.2), 0px 2px 6px rgba(31, 33, 36, 0.05)',
-    valueExperimental: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)',
   },
   'shadow-xl': {
     value:
       '0px 4px 18px -2px rgba(31, 33, 36, 0.08), 0px 12px 18px -2px rgba(31, 33, 36, 0.15)',
-    valueExperimental: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)',
   },
   'shadow-2xl': {
     value:
       '0px 32px 32px rgba(31, 33, 36, 0.15), 0px 32px 56px -2px rgba(31, 33, 36, 0.16)',
-    valueExperimental: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)',
   },
   'shadow-bevel-experimental': {
     value:
diff --git a/polaris-tokens/src/types.ts b/polaris-tokens/src/types.ts
index 3292c500bd2..c8f2450e842 100644
--- a/polaris-tokens/src/types.ts
+++ b/polaris-tokens/src/types.ts
@@ -7,7 +7,6 @@ export type Experimental<T extends string> = `${T}-experimental`;
 export interface MetadataProperties {
   description?: string;
   value: string;
-  valueExperimental?: string;
 }
 
 export interface MetadataGroup {
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
index 9b22adbd758..b400714a6bc 100644
--- a/polaris-tokens/src/utilities.ts
+++ b/polaris-tokens/src/utilities.ts
@@ -212,3 +212,27 @@ export function isKeyOf<T extends {[key: string]: any}>(
 ): key is keyof T {
   return Object.keys(obj).includes(key as string);
 }
+
+/**
+ * Identity function creator that returns the provided input,
+ * but additionally validates the input matches the type exactly
+ * and infers all members.
+ *
+ * TODO: Replace all instances with `satisfies` when we upgrade
+ * to TypeScript >=4.9
+ *
+ * @example
+ * ```
+ * type ExampleShape = { [key: string]: string }
+ * const createExample = createExact<ExampleShape>()
+ *
+ * const example = createExample({
+ *  foo: 'bar',
+ * })
+ * ```
+ *
+ * Where `typeof example` is inferred as `{ foo: string }`
+ */
+export function createExact<T extends object>() {
+  return <U extends Exact<T, U>>(obj: U) => obj;
+}
diff --git a/polaris-tokens/tests/toStyleSheet.test.js b/polaris-tokens/tests/toStyleSheet.test.js
index 9f2cf34af76..fd79d5e67e6 100644
--- a/polaris-tokens/tests/toStyleSheet.test.js
+++ b/polaris-tokens/tests/toStyleSheet.test.js
@@ -1,7 +1,7 @@
 import {
-  getCustomProperties,
+  getMetaThemeDecls,
+  getMetaTokenGroupDecls,
   getKeyframes,
-  getStaticCustomProperties,
 } from '../scripts/toStyleSheet';
 
 const mockTokenGroup = {
@@ -23,7 +23,7 @@ const mockMotionTokenGroup = {
   },
 };
 
-const mockTokens = {
+const mockTheme = {
   border: {},
   color: {},
   font: {},
@@ -34,7 +34,7 @@ const mockTokens = {
   zIndex: {},
 };
 
-const expectedCustomProperties =
+const expectedThemeDecls =
   '--p-design-token-1:valueA;--p-design-token-2:valueB;';
 
 const expectedKeyframes =
@@ -43,18 +43,18 @@ const expectedKeyframes =
 const expectedKeyframesCustomProperties =
   '--p-motion-keyframes-token-1:p-motion-keyframes-token-1;--p-motion-keyframes-token-2:p-motion-keyframes-token-2;';
 
-describe('getCustomProperties', () => {
-  it('creates a string of CSS custom properties', () => {
-    const customProperties = getCustomProperties(mockTokenGroup);
+describe('getMetaTokenGroupDecls', () => {
+  it('creates a string of CSS declarations', () => {
+    const tokenGroupDecls = getMetaTokenGroupDecls(mockTokenGroup);
 
-    expect(customProperties).toBe(expectedCustomProperties);
+    expect(tokenGroupDecls).toBe(expectedThemeDecls);
   });
 
-  it('creates a string of CSS custom properties and keyframes at-rules from motion tokens', () => {
-    const customProperties = getCustomProperties(mockMotionTokenGroup);
+  it('creates a string of CSS declarations and keyframes at-rules from motion tokens', () => {
+    const tokenGroupDecls = getMetaTokenGroupDecls(mockMotionTokenGroup);
 
-    expect(customProperties).toBe(
-      `${expectedCustomProperties}${expectedKeyframesCustomProperties}`,
+    expect(tokenGroupDecls).toBe(
+      `${expectedThemeDecls}${expectedKeyframesCustomProperties}`,
     );
   });
 });
@@ -67,10 +67,10 @@ describe('getKeyframes', () => {
   });
 });
 
-describe('getStaticCustomProperties', () => {
-  it('creates a string of static CSS custom properties', () => {
-    const staticCustomProperties = getStaticCustomProperties(mockTokens);
+describe('getMetaThemeDecls', () => {
+  it('creates a string of CSS declarations', () => {
+    const themeDecls = getMetaThemeDecls(mockTheme);
 
-    expect(staticCustomProperties).toBe(expectedCustomProperties);
+    expect(themeDecls).toBe(expectedThemeDecls);
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 6faff18d001..54d7dbd4a4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7865,6 +7865,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-browser-id@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-1.0.4.tgz#e59d09a5d157b828b876c26816e61c3d2a2c203a"

From 08b9d76e43c2d199d5eb3130341065efa9277c1e Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 7 Sep 2023 13:34:36 -0700
Subject: [PATCH 037/102] Version Packages (#10363)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.16.0

### Minor Changes

- [#10290](https://github.com/Shopify/polaris/pull/10290)
[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added
multi-theme support
    -   Added multi-theme build artifacts
    -   Added multi-theme runtime access

### Patch Changes

- Updated dependencies
\[[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
    -   @shopify/polaris-tokens@7.6.0

## @shopify/polaris-tokens@7.6.0

### Minor Changes

- [#10290](https://github.com/Shopify/polaris/pull/10290)
[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added
multi-theme support
    -   Added multi-theme build artifacts
    -   Added multi-theme runtime access

## @shopify/polaris-migrator@0.22.1

### Patch Changes

- Updated dependencies
\[[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
    -   @shopify/polaris-tokens@7.6.0
    -   @shopify/stylelint-polaris@14.0.1

## @shopify/stylelint-polaris@14.0.1

### Patch Changes

- Updated dependencies
\[[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
    -   @shopify/polaris-tokens@7.6.0

## polaris.shopify.com@0.57.4

### Patch Changes

- Updated dependencies
\[[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
    -   @shopify/polaris@11.16.0
    -   @shopify/polaris-tokens@7.6.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/cool-insects-wonder.md |  8 --------
 polaris-for-vscode/package.json   |  2 +-
 polaris-migrator/CHANGELOG.md     |  8 ++++++++
 polaris-migrator/package.json     |  8 ++++----
 polaris-react/CHANGELOG.md        | 13 +++++++++++++
 polaris-react/README.md           |  4 ++--
 polaris-react/package.json        |  4 ++--
 polaris-tokens/CHANGELOG.md       |  8 ++++++++
 polaris-tokens/package.json       |  2 +-
 polaris.shopify.com/CHANGELOG.md  |  8 ++++++++
 polaris.shopify.com/package.json  |  6 +++---
 stylelint-polaris/CHANGELOG.md    |  7 +++++++
 stylelint-polaris/package.json    |  4 ++--
 13 files changed, 59 insertions(+), 23 deletions(-)
 delete mode 100644 .changeset/cool-insects-wonder.md

diff --git a/.changeset/cool-insects-wonder.md b/.changeset/cool-insects-wonder.md
deleted file mode 100644
index f837dccd66b..00000000000
--- a/.changeset/cool-insects-wonder.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-'@shopify/polaris': minor
-'@shopify/polaris-tokens': minor
----
-
-- Added multi-theme support
-- Added multi-theme build artifacts
-- Added multi-theme runtime access
diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json
index 02fc00cf060..2386150b627 100644
--- a/polaris-for-vscode/package.json
+++ b/polaris-for-vscode/package.json
@@ -43,7 +43,7 @@
     "vscode-languageserver-textdocument": "^1.0.4"
   },
   "devDependencies": {
-    "@shopify/polaris-tokens": "^7.5.3",
+    "@shopify/polaris-tokens": "^7.6.0",
     "@types/node": "14.x",
     "@types/vscode": "^1.64.0",
     "@vscode/test-electron": "^2.1.2",
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index 120d45b0034..5337c9c2a58 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @shopify/polaris-migrator
 
+## 0.22.1
+
+### Patch Changes
+
+- Updated dependencies [[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
+  - @shopify/polaris-tokens@7.6.0
+  - @shopify/stylelint-polaris@14.0.1
+
 ## 0.22.0
 
 ### Minor Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 0ee8ebd3890..e1c9f856302 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -36,8 +36,8 @@
     "generate": "plop"
   },
   "dependencies": {
-    "@shopify/polaris-tokens": "^7.5.3",
-    "@shopify/stylelint-polaris": "^14.0.0",
+    "@shopify/polaris-tokens": "^7.6.0",
+    "@shopify/stylelint-polaris": "^14.0.1",
     "chalk": "^4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "^1.1.0",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.15.0",
+    "@shopify/polaris": "^11.16.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index 8ebd6424608..419a0592707 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## 11.16.0
+
+### Minor Changes
+
+- [#10290](https://github.com/Shopify/polaris/pull/10290) [`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added multi-theme support
+  - Added multi-theme build artifacts
+  - Added multi-theme runtime access
+
+### Patch Changes
+
+- Updated dependencies [[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
+  - @shopify/polaris-tokens@7.6.0
+
 ## 11.15.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index 15aec211114..01521a84ca9 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.15.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.16.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.15.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.16.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index 832d9db38e0..c9acc38b032 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.15.0",
+  "version": "11.16.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.5.3",
+    "@shopify/polaris-tokens": "^7.6.0",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.2",
diff --git a/polaris-tokens/CHANGELOG.md b/polaris-tokens/CHANGELOG.md
index 34537a0dbf0..2f7b3d1cb87 100644
--- a/polaris-tokens/CHANGELOG.md
+++ b/polaris-tokens/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## 7.6.0
+
+### Minor Changes
+
+- [#10290](https://github.com/Shopify/polaris/pull/10290) [`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - - Added multi-theme support
+  - Added multi-theme build artifacts
+  - Added multi-theme runtime access
+
 ## 7.5.3
 
 ### Patch Changes
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 17486c2ab4f..66b84c40a19 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "7.5.3",
+  "version": "7.6.0",
   "description": "",
   "main": "dist/cjs/build/index.js",
   "module": "dist/esm/build/index.mjs",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 06f07114143..445c0fae571 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,13 @@
 # polaris.shopify.com
 
+## 0.57.4
+
+### Patch Changes
+
+- Updated dependencies [[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
+  - @shopify/polaris@11.16.0
+  - @shopify/polaris-tokens@7.6.0
+
 ## 0.57.3
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 1276565c9b6..286286d14e2 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.3",
+  "version": "0.57.4",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,9 +26,9 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.15.0",
+    "@shopify/polaris": "^11.16.0",
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.5.3",
+    "@shopify/polaris-tokens": "^7.6.0",
     "@types/react-syntax-highlighter": "^15.5.6",
     "base-64": "^1.0.0",
     "codesandbox": "^2.2.3",
diff --git a/stylelint-polaris/CHANGELOG.md b/stylelint-polaris/CHANGELOG.md
index 41b3e449168..e680d248ead 100644
--- a/stylelint-polaris/CHANGELOG.md
+++ b/stylelint-polaris/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 14.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`5939b49cf`](https://github.com/Shopify/polaris/commit/5939b49cf4616d6994cc17095e79ba5600ca7fe4)]:
+  - @shopify/polaris-tokens@7.6.0
+
 ## 14.0.0
 
 ### Major Changes
diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json
index f6d55765250..9b0dd8c4f0e 100644
--- a/stylelint-polaris/package.json
+++ b/stylelint-polaris/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/stylelint-polaris",
   "description": "Polaris Design System Stylelint tooling",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "private": false,
   "license": "MIT",
   "author": "Shopify <dev@shopify.com>",
@@ -37,7 +37,7 @@
   "dependencies": {
     "postcss-value-parser": "^4.2.0",
     "postcss-media-query-parser": "^0.2.3",
-    "@shopify/polaris-tokens": "^7.5.3"
+    "@shopify/polaris-tokens": "^7.6.0"
   },
   "peerDependencies": {
     "stylelint": "^14.15.0 || ^15.0.0"

From 101abb83599ce67372c411cde396613306dc06de Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Thu, 7 Sep 2023 16:00:05 -0700
Subject: [PATCH 038/102] Rename `ThemeVariant` to `Theme` (#10372)

This PR renames `ThemeVariant` to `Theme` to simplify the internal
structure of Polaris tokens and improve readability. The introduction of
the base/variant theme architecture used explicit names to help
communicate each themes intent (e.g. the base theme is internal, variant
themes are derived from the base theme and the only themes exposed to
consumers). However, we now think it can become an inferred concept that
is articulated in the v12 documentation.

Additionally, we exposed the `Theme` type from Polaris tokens to avoid
requiring consumers to infer the `Theme` shape from the `themes` export:

#### Before:

```ts
import type {ThemeName} from '@shopify/polaris-tokens';
import {themes} from '@shopify/polaris-tokens';

export type Theme = typeof themes[ThemeName];
```

#### After:

```ts
import type {Theme} from '@shopify/polaris-tokens';
```
---
 .changeset/short-schools-run.md           |  5 +++++
 polaris-react/src/utilities/use-theme.ts  |  4 +---
 polaris-tokens/scripts/toStyleSheet.ts    | 16 +++++++---------
 polaris-tokens/scripts/toValues.ts        | 12 +++++-------
 polaris-tokens/src/index.ts               |  2 +-
 polaris-tokens/src/themes/index.ts        | 15 +++++++--------
 polaris-tokens/src/themes/light-uplift.ts |  6 +++---
 polaris-tokens/src/themes/light.ts        |  6 +++---
 polaris-tokens/src/themes/types.ts        | 14 +++++++-------
 polaris-tokens/src/themes/utils.ts        | 15 +++++++--------
 10 files changed, 46 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/short-schools-run.md

diff --git a/.changeset/short-schools-run.md b/.changeset/short-schools-run.md
new file mode 100644
index 00000000000..666f27f512c
--- /dev/null
+++ b/.changeset/short-schools-run.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Renamed `ThemeVariant` to `Theme` and exposed `Theme` type
diff --git a/polaris-react/src/utilities/use-theme.ts b/polaris-react/src/utilities/use-theme.ts
index 929ee51f197..33f0f33d4d2 100644
--- a/polaris-react/src/utilities/use-theme.ts
+++ b/polaris-react/src/utilities/use-theme.ts
@@ -1,9 +1,7 @@
 import {createContext, useContext} from 'react';
-import type {ThemeName} from '@shopify/polaris-tokens';
+import type {ThemeName, Theme} from '@shopify/polaris-tokens';
 import {themes} from '@shopify/polaris-tokens';
 
-export type Theme = typeof themes[ThemeName];
-
 export function getTheme(themeName: ThemeName): Theme {
   return themes[themeName];
 }
diff --git a/polaris-tokens/scripts/toStyleSheet.ts b/polaris-tokens/scripts/toStyleSheet.ts
index f06f4ab78cb..dfc71bbadba 100644
--- a/polaris-tokens/scripts/toStyleSheet.ts
+++ b/polaris-tokens/scripts/toStyleSheet.ts
@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 
 import type {MetaThemeShape, MetaTokenGroupShape} from '../src/themes/types';
-import {metaThemeVariantPartials, metaThemeDefault} from '../src/themes';
+import {metaThemePartials, metaThemeDefault} from '../src/themes';
 import {themeNameDefault} from '../src/themes/constants';
 import {createThemeSelector} from '../src/themes/utils';
 import {createVar} from '../src/utilities';
@@ -52,18 +52,16 @@ export async function toStyleSheet() {
     }
   });
 
-  const metaThemeVariantPartialsEntries = Object.entries(
-    metaThemeVariantPartials,
-  ).filter(([themeName]) => themeName !== themeNameDefault) as Entries<
-    Omit<typeof metaThemeVariantPartials, typeof themeNameDefault>
-  >;
+  const metaThemePartialsEntries = Object.entries(metaThemePartials).filter(
+    ([themeName]) => themeName !== themeNameDefault,
+  ) as Entries<Omit<typeof metaThemePartials, typeof themeNameDefault>>;
 
   const styles = [
     `:root{color-scheme:light;${getMetaThemeDecls(metaThemeDefault)}}`,
-    metaThemeVariantPartialsEntries.map(
-      ([themeName, metaThemeVariantPartial]) =>
+    metaThemePartialsEntries.map(
+      ([themeName, metaThemePartial]) =>
         `${createThemeSelector(themeName)}{${getMetaThemeDecls(
-          metaThemeVariantPartial,
+          metaThemePartial,
         )}}`,
     ),
     getKeyframes(metaThemeDefault.motion),
diff --git a/polaris-tokens/scripts/toValues.ts b/polaris-tokens/scripts/toValues.ts
index d0156238349..61411a6959d 100644
--- a/polaris-tokens/scripts/toValues.ts
+++ b/polaris-tokens/scripts/toValues.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import {metaThemeVariants, metaThemeDefault} from '../src/themes';
+import {metaThemes, metaThemeDefault} from '../src/themes';
 import {extractMetaThemeValues} from '../src/themes/utils';
 
 const outputDir = path.join(__dirname, '../build');
@@ -24,12 +24,10 @@ export async function toValues() {
       createExport([
         'themes',
         Object.fromEntries(
-          Object.entries(metaThemeVariants).map(
-            ([themeName, metaThemeVariant]) => [
-              themeName,
-              extractMetaThemeValues(metaThemeVariant),
-            ],
-          ),
+          Object.entries(metaThemes).map(([themeName, metaTheme]) => [
+            themeName,
+            extractMetaThemeValues(metaTheme),
+          ]),
         ),
       ]),
     ]
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index 60aa3786e4a..a30f1eea716 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -8,7 +8,7 @@ export type {
   MetadataGroup,
 } from './types';
 
-export type {ThemeName} from './themes/types';
+export type {ThemeName, Theme} from './themes/types';
 
 export {themeNameDefault} from './themes/constants';
 
diff --git a/polaris-tokens/src/themes/index.ts b/polaris-tokens/src/themes/index.ts
index 121ba57e37b..7cce0d89281 100644
--- a/polaris-tokens/src/themes/index.ts
+++ b/polaris-tokens/src/themes/index.ts
@@ -1,5 +1,5 @@
-import type {MetaThemeVariantPartials, MetaThemeVariants} from './types';
-import {createMetaThemeVariant} from './utils';
+import type {MetaThemePartials, MetaThemes} from './types';
+import {createMetaTheme} from './utils';
 import {themeNameDefault} from './constants';
 import {metaThemeLight, metaThemeLightPartial} from './light';
 import {
@@ -7,19 +7,18 @@ import {
   metaThemeLightUpliftPartial,
 } from './light-uplift';
 
-export {createMetaThemeVariant} from './utils';
+export {createMetaTheme} from './utils';
 
-export const metaThemeVariants: MetaThemeVariants = {
+export const metaThemes: MetaThemes = {
   light: metaThemeLight,
   'Polaris-Summer-Editions-2023': metaThemeLightUplift,
 };
 
-export const metaThemeVariantPartials: MetaThemeVariantPartials = {
+export const metaThemePartials: MetaThemePartials = {
   light: metaThemeLightPartial,
   'Polaris-Summer-Editions-2023': metaThemeLightUpliftPartial,
 };
 
-export const metaThemeDefaultPartial =
-  metaThemeVariantPartials[themeNameDefault];
+export const metaThemeDefaultPartial = metaThemePartials[themeNameDefault];
 
-export const metaThemeDefault = createMetaThemeVariant(metaThemeDefaultPartial);
+export const metaThemeDefault = createMetaTheme(metaThemeDefaultPartial);
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
index ae0c594a802..2e5eb408cd7 100644
--- a/polaris-tokens/src/themes/light-uplift.ts
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -1,8 +1,8 @@
 import * as colors from '../colors-experimental';
 
-import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
+import {createMetaTheme, createMetaThemePartial} from './utils';
 
-export const metaThemeLightUpliftPartial = createMetaThemeVariantPartial({
+export const metaThemeLightUpliftPartial = createMetaThemePartial({
   motion: {
     'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
   },
@@ -172,6 +172,6 @@ export const metaThemeLightUpliftPartial = createMetaThemeVariantPartial({
   },
 });
 
-export const metaThemeLightUplift = createMetaThemeVariant(
+export const metaThemeLightUplift = createMetaTheme(
   metaThemeLightUpliftPartial,
 );
diff --git a/polaris-tokens/src/themes/light.ts b/polaris-tokens/src/themes/light.ts
index a1289f7e27a..40795fa29bd 100644
--- a/polaris-tokens/src/themes/light.ts
+++ b/polaris-tokens/src/themes/light.ts
@@ -1,5 +1,5 @@
-import {createMetaThemeVariant, createMetaThemeVariantPartial} from './utils';
+import {createMetaTheme, createMetaThemePartial} from './utils';
 
-export const metaThemeLightPartial = createMetaThemeVariantPartial({});
+export const metaThemeLightPartial = createMetaThemePartial({});
 
-export const metaThemeLight = createMetaThemeVariant(metaThemeLightPartial);
+export const metaThemeLight = createMetaTheme(metaThemeLightPartial);
diff --git a/polaris-tokens/src/themes/types.ts b/polaris-tokens/src/themes/types.ts
index e40cc5f7c29..38e00fb636c 100644
--- a/polaris-tokens/src/themes/types.ts
+++ b/polaris-tokens/src/themes/types.ts
@@ -2,11 +2,11 @@ import type {metaThemeBase} from './base';
 import type {themeNames} from './constants';
 
 export type MetaThemeBase = typeof metaThemeBase;
-export type MetaThemeVariant = MetaThemeBase;
+export type MetaTheme = MetaThemeBase;
 
 export type ThemeName = typeof themeNames[number];
 export type ThemeBase = ExtractMetaThemeValues<MetaThemeBase>;
-export type ThemeVariant = ExtractMetaThemeValues<MetaThemeVariant>;
+export type Theme = ExtractMetaThemeValues<MetaTheme>;
 
 export interface MetaTokenProperties {
   value: string;
@@ -21,22 +21,22 @@ export interface MetaThemeShape {
   [tokenGroupName: string]: MetaTokenGroupShape;
 }
 
-export type MetaThemeVariants = {
-  [T in ThemeName]: MetaThemeVariant;
+export type MetaThemes = {
+  [T in ThemeName]: MetaTheme;
 };
 
 type ExcludeMotionKeyframes<T> = T extends `motion-keyframes-${string}`
   ? never
   : T;
 
-export type MetaThemeVariantPartialShape = {
+export type MetaThemePartialShape = {
   [TokenGroupName in keyof Omit<MetaThemeBase, 'breakpoints'>]?: {
     [TokenName in keyof MetaThemeBase[TokenGroupName] as ExcludeMotionKeyframes<TokenName>]?: MetaTokenProperties;
   };
 };
 
-export type MetaThemeVariantPartials = {
-  [T in ThemeName]: MetaThemeVariantPartialShape;
+export type MetaThemePartials = {
+  [T in ThemeName]: MetaThemePartialShape;
 };
 
 export type ExtractMetaTokenGroupValues<T extends MetaTokenGroupShape> = {
diff --git a/polaris-tokens/src/themes/utils.ts b/polaris-tokens/src/themes/utils.ts
index 1a8105e5402..003fb13a794 100644
--- a/polaris-tokens/src/themes/utils.ts
+++ b/polaris-tokens/src/themes/utils.ts
@@ -7,21 +7,20 @@ import type {
   ExtractMetaThemeValues,
   ExtractMetaTokenGroupValues,
   MetaThemeShape,
-  MetaThemeVariant,
-  MetaThemeVariantPartialShape,
+  MetaTheme,
+  MetaThemePartialShape,
   MetaTokenGroupShape,
   ThemeName,
 } from './types';
 import {themeNameLightUplift} from './constants';
 import {metaThemeBase} from './base';
 
-export const createMetaThemeVariantPartial =
-  createExact<MetaThemeVariantPartialShape>();
+export const createMetaThemePartial = createExact<MetaThemePartialShape>();
 
-export function createMetaThemeVariant<
-  T extends Exact<MetaThemeVariantPartialShape, T>,
->(metaThemeVariantPartial: T): MetaThemeVariant {
-  return deepmerge(metaThemeBase, metaThemeVariantPartial);
+export function createMetaTheme<T extends Exact<MetaThemePartialShape, T>>(
+  metaThemePartial: T,
+): MetaTheme {
+  return deepmerge(metaThemeBase, metaThemePartial);
 }
 
 export function createThemeClassName(themeName: ThemeName) {

From e5f88b8ce68857e9e35fcf60ee34b6a9e865d78d Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:21:43 -0400
Subject: [PATCH 039/102] Fix action list filter css and add story (#10385)

Adds a filterable story so we can prevent visual regressions until we
can use `TextField`

Cleans up some css and adds the proper hover color, focus ring
attributes, and fixed the permanently focused bug
---
 .changeset/tiny-eggs-melt.md                  |  5 +++
 .../ActionList/ActionList.stories.tsx         | 15 +++++++++
 .../components/SearchField/SearchField.scss   | 31 ++++++++-----------
 3 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/tiny-eggs-melt.md

diff --git a/.changeset/tiny-eggs-melt.md b/.changeset/tiny-eggs-melt.md
new file mode 100644
index 00000000000..a23f2e7cf16
--- /dev/null
+++ b/.changeset/tiny-eggs-melt.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed ActionList SearchField focus bug and minor style issues
diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
index f4193407293..c8c59bff71d 100644
--- a/polaris-react/src/components/ActionList/ActionList.stories.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -3,9 +3,11 @@ import type {ComponentMeta} from '@storybook/react';
 import {
   ActionList,
   Avatar,
+  Box,
   Button,
   Icon,
   Popover,
+  TextField,
   Thumbnail,
   VerticalStack,
 } from '@shopify/polaris';
@@ -382,3 +384,16 @@ export function WithAPrefixAndASuffix() {
     </div>
   );
 }
+
+export function WithFiltering() {
+  return (
+    <div style={{height: '250px', maxWidth: '350px'}}>
+      <ActionList
+        actionRole="menuitem"
+        items={Array.from({length: 8}).map((_, index) => ({
+          content: `Item #${index + 1}`,
+        }))}
+      />
+    </div>
+  );
+}
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
index 9d17fba77f7..9fdbc0e82fe 100644
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -50,13 +50,15 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   ~ .Backdrop {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
-  }
 
-  ~ .BackdropShowFocusBorder {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
+    #{$se23} & {
+      // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
+      @include no-focus-ring;
+      outline: var(--p-border-width-2) solid
+        var(--p-color-border-interactive-focus);
+      outline-offset: var(--p-space-025);
+    }
   }
-
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   ~ .Icon svg {
     fill: var(--p-color-icon);
@@ -71,9 +73,11 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   #{$se23} & {
     // stylelint-disable-next-line -- se23
     ~ .Backdrop {
+      // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
+      @include no-focus-ring;
       outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-05);
+      outline-offset: var(--p-space-025);
     }
 
     // stylelint-disable-next-line -- se23
@@ -108,7 +112,8 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     border-radius: var(--p-border-radius-2);
 
     &:hover {
-      border-color: var(--p-color-border-hover);
+      border-color: var(--p-color-border-input-hover);
+      background-color: var(--p-color-bg-input-hover-experimental);
     }
 
     &:active,
@@ -221,21 +226,11 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg);
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
-  // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
-  border-top-color: #898f94;
+  background-color: var(--p-color-bg-input);
   border-radius: var(--p-border-radius-1);
   pointer-events: none;
 
   #{$se23} & {
-    // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
-    @include no-focus-ring;
     border-radius: var(--p-border-radius-2);
-    border-width: var(--p-border-width-1-experimental);
-    background-color: var(--p-color-bg-input);
-    outline: var(--p-border-width-2) solid
-      var(--p-color-border-interactive-focus);
-    outline-offset: var(--p-space-05);
   }
 }

From 2c1f93c90caf2fb1ad0a4dff67f40bbedea5be69 Mon Sep 17 00:00:00 2001
From: Matt Kubej <86790511+mattkubej@users.noreply.github.com>
Date: Mon, 11 Sep 2023 11:00:05 -0400
Subject: [PATCH 040/102] [IndexTable] vertically align sort and tooltip column
 headers (#10389)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes alignment of sort button headers with body line-height, so text
headers and sort button headers are aligned. Additionally, the presence
of a tooltip header results in a bottom border of 2px. This resulted in
some headers being taller than other headers without a tooltip by 2px,
which resulted in misalignment. This also led to the height of the
IndexTable column row growing by 2px when a column header had tooltip
styling.

Listed below are images of a sort button header with a text header with
a line drawn across the center. These images are zoomed in as the
alignment difference is very subtle. These images highlight the issue.

**Default header**

![image](https://github.com/Shopify/polaris/assets/86790511/74cea082-67a4-4d45-9065-55fc46851b0b)

**Sticky header**

![image](https://github.com/Shopify/polaris/assets/86790511/f56685a3-04dc-4a4b-a3b2-f340853ba2db)

**With tooltip**

![image](https://github.com/Shopify/polaris/assets/86790511/ec2f9aeb-18f4-4e87-a1c4-80fb799f343c)

### WHAT is this pull request doing?

`line-height` set on the `body` is not being inherited by `button`, so I
set it explicitly on the sortable button class to align with the text
headers that do inherit the `line-height` from the `body`.

For the tooltip underline, this PR switches to utilizing an absolutely
positioned pseudo-element, so it does not impact the height of the
column label and the height of the column header row.

### How to 🎩

Navigate to the following Storybooks
- [IndexTable - With Sortable
Headings](https://storybook.web.orders-index-misaligned-headers.matt-kubej.us.spin.dev/?path=/story/all-components-indextable--with-sortable-headings&globals=polarisSummerEditions2023:true;polarisSummerEditions2023ShadowBevelOptOut:true)
- [IndexTable - WIth Custom
Tooltips](https://storybook.web.orders-index-misaligned-headers.matt-kubej.us.spin.dev/?path=/story/all-components-indextable--with-custom-tooltips&globals=polarisSummerEditions2023:true;polarisSummerEditions2023ShadowBevelOptOut:true)

After focusing/inspecting the iframe containing the rendered IndexTable
with Chrome DevTools, paste the following snippet into console in order
to draw a centered line across the header row to inspect that the labels
are center aligned with each other. I found it easiest to spot alignment
by comparing labels with the letter "e".

```javascript
(function drawCenterGuide() {
  const style = document.createElement('style');

  style.innerHTML = `
    thead {
      position: relative;
    }

    thead::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: red;
      width: 100%;
      height: 1px;
      z-index: 9999;
    }
  `;

  document.head.appendChild(style);
})();
```

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/tall-lamps-behave.md                         | 5 +++++
 polaris-react/src/components/IndexTable/IndexTable.scss | 9 ++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tall-lamps-behave.md

diff --git a/.changeset/tall-lamps-behave.md b/.changeset/tall-lamps-behave.md
new file mode 100644
index 00000000000..f3fa44e3af7
--- /dev/null
+++ b/.changeset/tall-lamps-behave.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+[IndexTable] vertically align sort and tooltip column headers 
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 98949db821e..55877f55b9a 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -514,6 +514,7 @@ $loading-panel-height: 53px;
   font-weight: var(--p-font-weight-medium);
   color: var(--p-color-text-subdued);
   font-size: var(--p-font-size-75);
+  line-height: var(--p-font-line-height-2);
 
   &:hover,
   &:focus {
@@ -585,7 +586,13 @@ $loading-panel-height: 53px;
   }
 }
 
-.TableHeadingUnderline {
+.TableHeadingUnderline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: calc(-1 * var(--p-border-width-2));
+  width: 100%;
+  height: var(--p-border-width-2);
   border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued);
 
   #{$se23} & {

From 624e0b570ab1ca380e9ead9087e417552aaecd58 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Mon, 11 Sep 2023 17:31:03 +0100
Subject: [PATCH 041/102] [FilterPill] Remove filter pill on Popover close if
 empty (#10397)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/98322

A frustration that multiple people have reported is that when using the
IndexFilters component and selecting a filter, if you close the popover
without choosing a filter option within the Popover, the FilterPill for
the filter remains in the filter bar, even though it is empty, and the
only way to clear it is to press the "Clear all" button.

### WHAT is this pull request doing?

This PR introduces logic to remove the FilterPill from the Filter bar if
a user closes the Popover containing the filter and no choice is
selected.

Spinstance:
https://admin.web.remove-unused-filters.marc-thomas.eu.spin.dev/store/shop1/orders?inContextTimeframe=none

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/weak-tips-agree.md                 |  5 +++++
 .../components/FilterPill/FilterPill.tsx      | 15 +++++++++----
 .../FilterPill/tests/FilterPill.test.tsx      | 22 +++++++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/weak-tips-agree.md

diff --git a/.changeset/weak-tips-agree.md b/.changeset/weak-tips-agree.md
new file mode 100644
index 00000000000..c4bb5ba9bac
--- /dev/null
+++ b/.changeset/weak-tips-agree.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+[FilterPill] Remove FilterPill from Filters bar when Popover closes with an empty filter
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
index 4cdd3ba5f65..eabd1199a67 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useRef} from 'react';
+import React, {useState, useEffect, useRef, useCallback} from 'react';
 import {
   CancelSmallMinor,
   CaretDownMinor,
@@ -80,7 +80,7 @@ export function FilterPill({
     });
   }, [elementRef, popoverActive]);
 
-  const togglePopoverActive = () => {
+  const togglePopoverActive = useCallback(() => {
     if (filter) {
       setPopoverActive((popoverActive) => !popoverActive);
     }
@@ -88,7 +88,14 @@ export function FilterPill({
     if (onClick) {
       onClick(filterKey);
     }
-  };
+  }, [filter, filterKey, onClick]);
+
+  const handlePopoverClose = useCallback(() => {
+    togglePopoverActive();
+    if (!selected) {
+      onRemove?.(filterKey);
+    }
+  }, [onRemove, selected, filterKey, togglePopoverActive]);
 
   const handleClear = () => {
     if (onRemove) onRemove(filterKey);
@@ -200,7 +207,7 @@ export function FilterPill({
         active={popoverActive && !disabled}
         activator={activator}
         key={filterKey}
-        onClose={togglePopoverActive}
+        onClose={handlePopoverClose}
         preferredAlignment="left"
         preventCloseOnChildOverlayClick={!closeOnChildOverlayClick}
       >
diff --git a/polaris-react/src/components/Filters/components/FilterPill/tests/FilterPill.test.tsx b/polaris-react/src/components/Filters/components/FilterPill/tests/FilterPill.test.tsx
index 103612ff829..73f08b89cd5 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/tests/FilterPill.test.tsx
+++ b/polaris-react/src/components/Filters/components/FilterPill/tests/FilterPill.test.tsx
@@ -173,6 +173,28 @@ describe('<Filters />', () => {
       expect(spy).toHaveBeenCalledWith(defaultProps.filterKey);
     });
 
+    it('invokes the onRemove callback when closing the Popover when not selected', () => {
+      const spy = jest.fn();
+      const wrapper = mountWithApp(
+        <FilterPill {...defaultProps} onRemove={spy} />,
+      );
+      const activator = wrapper.find(UnstyledButton);
+      activator?.trigger('onClick');
+      wrapper.find(Popover)?.trigger('onClose');
+      expect(spy).toHaveBeenCalledWith(defaultProps.filterKey);
+    });
+
+    it('does not invoke the onRemove callback when closing the Popover when selected', () => {
+      const spy = jest.fn();
+      const wrapper = mountWithApp(
+        <FilterPill {...defaultProps} onRemove={spy} selected />,
+      );
+      const activator = wrapper.find(UnstyledButton);
+      activator?.trigger('onClick');
+      wrapper.find(Popover)?.trigger('onClose');
+      expect(spy).not.toHaveBeenCalledWith(defaultProps.filterKey);
+    });
+
     it('renders the popover initially open if initialActive is true', () => {
       const wrapper = mountWithApp(
         <FilterPill {...defaultProps} initialActive />,

From 15ba67ffe2483d26693c78d74f6c49a8042dc230 Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Mon, 11 Sep 2023 15:20:48 -0400
Subject: [PATCH 042/102] Version Packages (#10376)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.17.0

### Minor Changes

- [#10397](https://github.com/Shopify/polaris/pull/10397)
[`624e0b570`](https://github.com/Shopify/polaris/commit/624e0b570ab1ca380e9ead9087e417552aaecd58)
Thanks [@mrcthms](https://github.com/mrcthms)! - [FilterPill] Remove
FilterPill from Filters bar when Popover closes with an empty filter

### Patch Changes

- [#10389](https://github.com/Shopify/polaris/pull/10389)
[`2c1f93c90`](https://github.com/Shopify/polaris/commit/2c1f93c90caf2fb1ad0a4dff67f40bbedea5be69)
Thanks [@mattkubej](https://github.com/mattkubej)! - [IndexTable]
vertically align sort and tooltip column headers


- [#10385](https://github.com/Shopify/polaris/pull/10385)
[`e5f88b8ce`](https://github.com/Shopify/polaris/commit/e5f88b8ce68857e9e35fcf60ee34b6a9e865d78d)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed ActionList
SearchField focus bug and minor style issues

- Updated dependencies
\[[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
    -   @shopify/polaris-tokens@7.7.0

## @shopify/polaris-tokens@7.7.0

### Minor Changes

- [#10372](https://github.com/Shopify/polaris/pull/10372)
[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Renamed
`ThemeVariant` to `Theme` and exposed `Theme` type

## @shopify/polaris-migrator@0.22.2

### Patch Changes

- Updated dependencies
\[[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
    -   @shopify/polaris-tokens@7.7.0
    -   @shopify/stylelint-polaris@14.0.2

## @shopify/stylelint-polaris@14.0.2

### Patch Changes

- Updated dependencies
\[[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
    -   @shopify/polaris-tokens@7.7.0

## polaris.shopify.com@0.57.5

### Patch Changes

- Updated dependencies
\[[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de),
[`2c1f93c90`](https://github.com/Shopify/polaris/commit/2c1f93c90caf2fb1ad0a4dff67f40bbedea5be69),
[`e5f88b8ce`](https://github.com/Shopify/polaris/commit/e5f88b8ce68857e9e35fcf60ee34b6a9e865d78d),
[`624e0b570`](https://github.com/Shopify/polaris/commit/624e0b570ab1ca380e9ead9087e417552aaecd58)]:
    -   @shopify/polaris-tokens@7.7.0
    -   @shopify/polaris@11.17.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/short-schools-run.md  |  5 -----
 .changeset/tall-lamps-behave.md  |  5 -----
 .changeset/tiny-eggs-melt.md     |  5 -----
 .changeset/weak-tips-agree.md    |  5 -----
 polaris-for-vscode/package.json  |  2 +-
 polaris-migrator/CHANGELOG.md    |  8 ++++++++
 polaris-migrator/package.json    |  8 ++++----
 polaris-react/CHANGELOG.md       | 15 +++++++++++++++
 polaris-react/README.md          |  4 ++--
 polaris-react/package.json       |  4 ++--
 polaris-tokens/CHANGELOG.md      |  6 ++++++
 polaris-tokens/package.json      |  2 +-
 polaris.shopify.com/CHANGELOG.md |  8 ++++++++
 polaris.shopify.com/package.json |  6 +++---
 stylelint-polaris/CHANGELOG.md   |  7 +++++++
 stylelint-polaris/package.json   |  4 ++--
 16 files changed, 59 insertions(+), 35 deletions(-)
 delete mode 100644 .changeset/short-schools-run.md
 delete mode 100644 .changeset/tall-lamps-behave.md
 delete mode 100644 .changeset/tiny-eggs-melt.md
 delete mode 100644 .changeset/weak-tips-agree.md

diff --git a/.changeset/short-schools-run.md b/.changeset/short-schools-run.md
deleted file mode 100644
index 666f27f512c..00000000000
--- a/.changeset/short-schools-run.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Renamed `ThemeVariant` to `Theme` and exposed `Theme` type
diff --git a/.changeset/tall-lamps-behave.md b/.changeset/tall-lamps-behave.md
deleted file mode 100644
index f3fa44e3af7..00000000000
--- a/.changeset/tall-lamps-behave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-[IndexTable] vertically align sort and tooltip column headers 
diff --git a/.changeset/tiny-eggs-melt.md b/.changeset/tiny-eggs-melt.md
deleted file mode 100644
index a23f2e7cf16..00000000000
--- a/.changeset/tiny-eggs-melt.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed ActionList SearchField focus bug and minor style issues
diff --git a/.changeset/weak-tips-agree.md b/.changeset/weak-tips-agree.md
deleted file mode 100644
index c4bb5ba9bac..00000000000
--- a/.changeset/weak-tips-agree.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-[FilterPill] Remove FilterPill from Filters bar when Popover closes with an empty filter
diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json
index 2386150b627..9d5aaeec79d 100644
--- a/polaris-for-vscode/package.json
+++ b/polaris-for-vscode/package.json
@@ -43,7 +43,7 @@
     "vscode-languageserver-textdocument": "^1.0.4"
   },
   "devDependencies": {
-    "@shopify/polaris-tokens": "^7.6.0",
+    "@shopify/polaris-tokens": "^7.7.0",
     "@types/node": "14.x",
     "@types/vscode": "^1.64.0",
     "@vscode/test-electron": "^2.1.2",
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index 5337c9c2a58..89af1575a6f 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @shopify/polaris-migrator
 
+## 0.22.2
+
+### Patch Changes
+
+- Updated dependencies [[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
+  - @shopify/polaris-tokens@7.7.0
+  - @shopify/stylelint-polaris@14.0.2
+
 ## 0.22.1
 
 ### Patch Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index e1c9f856302..5f62fd4ada3 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.22.1",
+  "version": "0.22.2",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -36,8 +36,8 @@
     "generate": "plop"
   },
   "dependencies": {
-    "@shopify/polaris-tokens": "^7.6.0",
-    "@shopify/stylelint-polaris": "^14.0.1",
+    "@shopify/polaris-tokens": "^7.7.0",
+    "@shopify/stylelint-polaris": "^14.0.2",
     "chalk": "^4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "^1.1.0",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.16.0",
+    "@shopify/polaris": "^11.17.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index 419a0592707..a65f080de12 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## 11.17.0
+
+### Minor Changes
+
+- [#10397](https://github.com/Shopify/polaris/pull/10397) [`624e0b570`](https://github.com/Shopify/polaris/commit/624e0b570ab1ca380e9ead9087e417552aaecd58) Thanks [@mrcthms](https://github.com/mrcthms)! - [FilterPill] Remove FilterPill from Filters bar when Popover closes with an empty filter
+
+### Patch Changes
+
+- [#10389](https://github.com/Shopify/polaris/pull/10389) [`2c1f93c90`](https://github.com/Shopify/polaris/commit/2c1f93c90caf2fb1ad0a4dff67f40bbedea5be69) Thanks [@mattkubej](https://github.com/mattkubej)! - [IndexTable] vertically align sort and tooltip column headers
+
+* [#10385](https://github.com/Shopify/polaris/pull/10385) [`e5f88b8ce`](https://github.com/Shopify/polaris/commit/e5f88b8ce68857e9e35fcf60ee34b6a9e865d78d) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed ActionList SearchField focus bug and minor style issues
+
+* Updated dependencies [[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
+  - @shopify/polaris-tokens@7.7.0
+
 ## 11.16.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index 01521a84ca9..a7cfbe71c18 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.16.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.17.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.16.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.17.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index c9acc38b032..a47fcbec550 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.16.0",
+  "version": "11.17.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.6.0",
+    "@shopify/polaris-tokens": "^7.7.0",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.2",
diff --git a/polaris-tokens/CHANGELOG.md b/polaris-tokens/CHANGELOG.md
index 2f7b3d1cb87..6eda4bca2b5 100644
--- a/polaris-tokens/CHANGELOG.md
+++ b/polaris-tokens/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 7.7.0
+
+### Minor Changes
+
+- [#10372](https://github.com/Shopify/polaris/pull/10372) [`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Renamed `ThemeVariant` to `Theme` and exposed `Theme` type
+
 ## 7.6.0
 
 ### Minor Changes
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 66b84c40a19..9b4a450318b 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "description": "",
   "main": "dist/cjs/build/index.js",
   "module": "dist/esm/build/index.mjs",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 445c0fae571..2ce2d008419 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,13 @@
 # polaris.shopify.com
 
+## 0.57.5
+
+### Patch Changes
+
+- Updated dependencies [[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de), [`2c1f93c90`](https://github.com/Shopify/polaris/commit/2c1f93c90caf2fb1ad0a4dff67f40bbedea5be69), [`e5f88b8ce`](https://github.com/Shopify/polaris/commit/e5f88b8ce68857e9e35fcf60ee34b6a9e865d78d), [`624e0b570`](https://github.com/Shopify/polaris/commit/624e0b570ab1ca380e9ead9087e417552aaecd58)]:
+  - @shopify/polaris-tokens@7.7.0
+  - @shopify/polaris@11.17.0
+
 ## 0.57.4
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 286286d14e2..986210e2991 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.4",
+  "version": "0.57.5",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,9 +26,9 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.16.0",
+    "@shopify/polaris": "^11.17.0",
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.6.0",
+    "@shopify/polaris-tokens": "^7.7.0",
     "@types/react-syntax-highlighter": "^15.5.6",
     "base-64": "^1.0.0",
     "codesandbox": "^2.2.3",
diff --git a/stylelint-polaris/CHANGELOG.md b/stylelint-polaris/CHANGELOG.md
index e680d248ead..d71fa7fb707 100644
--- a/stylelint-polaris/CHANGELOG.md
+++ b/stylelint-polaris/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 14.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`101abb835`](https://github.com/Shopify/polaris/commit/101abb83599ce67372c411cde396613306dc06de)]:
+  - @shopify/polaris-tokens@7.7.0
+
 ## 14.0.1
 
 ### Patch Changes
diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json
index 9b0dd8c4f0e..4e7d2354867 100644
--- a/stylelint-polaris/package.json
+++ b/stylelint-polaris/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/stylelint-polaris",
   "description": "Polaris Design System Stylelint tooling",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "private": false,
   "license": "MIT",
   "author": "Shopify <dev@shopify.com>",
@@ -37,7 +37,7 @@
   "dependencies": {
     "postcss-value-parser": "^4.2.0",
     "postcss-media-query-parser": "^0.2.3",
-    "@shopify/polaris-tokens": "^7.6.0"
+    "@shopify/polaris-tokens": "^7.7.0"
   },
   "peerDependencies": {
     "stylelint": "^14.15.0 || ^15.0.0"

From b7f25f07fba272add902d68a8cc15bee43030dff Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Tue, 12 Sep 2023 09:37:34 +0100
Subject: [PATCH 043/102] [TextField] Allow TextField to disable 1Password
 integration (#10394)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

We have some text fields across the admin that we want to disable the
1Password integration on, namely the Create new View modal within the
IndexFilters component, [as seen on this
ticket](https://github.com/Shopify/web/issues/103483).


### WHAT is this pull request doing?

This PR introduces a new prop to the TextField, named `disable1Password`
which will add the `data-1p-ignore` data attribute to the input, which
is the [recommended
way](https://developer.1password.com/docs/web/compatible-website-design/)
of disabling this functionality.

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/brave-dancers-appear.md               |  5 +++++
 .../CreateViewModal/CreateViewModal.tsx          |  1 +
 .../components/TextField/TextField.stories.tsx   | 16 ++++++++++++++++
 .../src/components/TextField/TextField.tsx       |  4 ++++
 .../TextField/tests/TextField.test.tsx           | 15 +++++++++++++++
 5 files changed, 41 insertions(+)
 create mode 100644 .changeset/brave-dancers-appear.md

diff --git a/.changeset/brave-dancers-appear.md b/.changeset/brave-dancers-appear.md
new file mode 100644
index 00000000000..0f70aef6678
--- /dev/null
+++ b/.changeset/brave-dancers-appear.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for disabling 1Password integration in `TextField`
diff --git a/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx b/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
index 6796e4e69e9..881d54f9299 100644
--- a/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
+++ b/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
@@ -111,6 +111,7 @@ export function CreateViewModal({
                       )
                     : undefined
                 }
+                disable1Password
               />
             </div>
           </FormLayout>
diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
index ce3972e5845..cc3b731266e 100644
--- a/polaris-react/src/components/TextField/TextField.stories.tsx
+++ b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -866,3 +866,19 @@ export function WithFormSubmit() {
     </VerticalStack>
   );
 }
+
+export function With1PasswordDisabled() {
+  const [value, setValue] = useState('Jaded Pixel');
+
+  const handleChange = useCallback((newValue) => setValue(newValue), []);
+
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+      disable1Password
+    />
+  );
+}
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 3de0a291139..c4ce8ca5574 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/polaris-react/src/components/TextField/TextField.tsx
@@ -173,6 +173,8 @@ interface NonMutuallyExclusiveProps {
   onBlur?(event?: React.FocusEvent): void;
   /** Removes the border around the input. Used in the IndexFilters component. */
   borderless?: boolean;
+  /** Disables the 1password extension on the text field */
+  disable1Password?: boolean;
 }
 
 export type MutuallyExclusiveSelectionProps =
@@ -239,6 +241,7 @@ export function TextField({
   onFocus,
   onBlur,
   borderless,
+  disable1Password,
 }: TextFieldProps) {
   const i18n = useI18n();
   const [height, setHeight] = useState<number | null>(null);
@@ -556,6 +559,7 @@ export function TextField({
     onKeyDown: handleKeyDown,
     onChange: !suggestion ? handleChange : undefined,
     onInput: suggestion ? handleChange : undefined,
+    'data-1p-ignore': disable1Password || undefined,
   });
 
   const inputWithVerticalContentMarkup = verticalContent ? (
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index 668a0b39f0f..32437f850b3 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -85,6 +85,21 @@ describe('<TextField />', () => {
     });
   });
 
+  it('adds the data-1p-ignore prop if disable1Password is set', () => {
+    const textField = mountWithApp(
+      <TextField
+        label="TextField"
+        onChange={noop}
+        autoComplete="off"
+        disable1Password
+      />,
+    );
+
+    expect(textField).toContainReactComponent('input', {
+      'data-1p-ignore': true,
+    } as any);
+  });
+
   describe('click events', () => {
     it('bubbles up to the parent element when it occurs in the input', () => {
       const onClick = jest.fn();

From 16c61668ac3916aacaeb759f2052d0a3a7ed762e Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Tue, 12 Sep 2023 17:06:12 -0600
Subject: [PATCH 044/102] Add private primitive `size` token scale (#10418)

### WHY are these changes introduced?

Fixes #10417

### WHAT is this pull request doing?

Adds the following values to a new private primitive `size` token scale:

| New Token          | Value        |
| ------------------------- | ------------------------ |
| `size[0]`  | `0px`    |
| `size['025']`  | `1px`    |
| `size['050']`  | `2px`    |
| `size[100]`  | `4px`    |
| `size[150]`  | `6px`    |
| `size[200]`  | `8px`    |
| `size[275]`  | `11px`    |
| `size[300]`  | `12px`    |
| `size[325]`  | `13px`    |
| `size[350]`  | `14px`    |
| `size[400]`  | `16px`    |
| `size[500]`  | `20px`    |
| `size[600]`  | `24px`    |
| `size[700]`  | `28px`    |
| `size[750]`  | `30px`    |
| `size[800]`  | `32px`    |
| `size[900]`  | `36px`    |
| `size[1000]`  | `40px`    |
| `size[1200]`  | `48px`    |
| `size[1600]`  | `64px`    |
| `size[2000]`  | `80px`    |
| `size[2400]`  | `96px`    |
| `size[3200]`  | `128px`    |

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/modern-lobsters-cheer.md |  5 +++++
 polaris-tokens/src/size.ts          | 29 +++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 .changeset/modern-lobsters-cheer.md
 create mode 100644 polaris-tokens/src/size.ts

diff --git a/.changeset/modern-lobsters-cheer.md b/.changeset/modern-lobsters-cheer.md
new file mode 100644
index 00000000000..b6e90b1c584
--- /dev/null
+++ b/.changeset/modern-lobsters-cheer.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Add private primitive `size` token scale
diff --git a/polaris-tokens/src/size.ts b/polaris-tokens/src/size.ts
new file mode 100644
index 00000000000..4b53c1c6690
--- /dev/null
+++ b/polaris-tokens/src/size.ts
@@ -0,0 +1,29 @@
+export const size = {
+  '0': '0px',
+  '025': '1px',
+  '050': '2px',
+  '100': '4px',
+  '150': '6px',
+  '200': '8px',
+  '275': '11px',
+  '300': '12px',
+  '325': '13px',
+  '350': '14px',
+  '400': '16px',
+  '500': '20px',
+  '600': '24px',
+  '700': '28px',
+  '750': '30px',
+  '800': '32px',
+  '900': '36px',
+  '1000': '40px',
+  '1200': '48px',
+  '1600': '64px',
+  '2000': '80px',
+  '2400': '96px',
+  '3200': '128px',
+} as const;
+
+export type Size = typeof size;
+
+export type SizeScale = keyof Size;

From 87f559ca1190b28b583913d321c87b60639c1cc4 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Wed, 13 Sep 2023 15:24:58 +0100
Subject: [PATCH 045/102] [Toast|Dialog] Improve screen reader experience for
 Toasts and Toasts within Dialogs (#10406)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/99380

We currently have a bug in the Toast component whereby if a Toast is
shown to a merchant multiple times, the screen reader will only announce
the Toast for the first appearance. By also adding an`
aria-live="assertive"` attribute inside the Toast itself, we can now
ensure that Toasts get announced for every subsequent appearance on
screen.

There is also a bug where if a Toast is rendered when a Modal is open on
the screen, then the Toast will not get read out by the screen reader.
This is due to the Dialog component within the Modal having the
`aria-modal` attribute, which effectively instructs the browser to
ignore all content that sits outside that element. This means that our
aria-live region containing the Toasts is inaccessible to the screen
reader.

In order to solve this, we now will inject the content of the Toast(s)
into the Dialog itself, inside a designated aria-live region, so that
the screen reader can announce the content of the Toasts, but because
the Toast content is wrapped in a visually hidden Text component,
nothing extra appears on screen.

We also extend the `context` provided by the Frame to include the array
of currently active toastMessages, as this is needed to render the
contents within the Dialog. We also now export the `useFrame` hook as
the SettingsDialog within Shopify/web uses a custom dialog component, so
we will need to replicate the solution there, which utilises the
`useFrame` hook.

Spinstance:
https://admin.web.settings-dialog-toast.marc-thomas.eu.spin.dev/store/shop1/settings/general


<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

**Toast announcing every time**

1. Navigate to
https://5d559397bae39100201eedc1-oivciscfnt.chromatic.com/?path=/story/all-components-toast--default
2. Activate VoiceOver
3. Repeatedly show the Toast
4. Confirm that the Toast gets read out by VoiceOver every time it gets
shown

**Toast announcing inside Modal**

1. Navigate to
https://5d559397bae39100201eedc1-oivciscfnt.chromatic.com/?path=/story/all-components-toast--inside-modal
2. Activate VoiceOver
3. Show the toast messages
4. Confirm that the Toast messages get read out by VoiceOver each time
they are shown

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/seven-oranges-fetch.md             |   5 +
 polaris-react/src/components/Frame/Frame.tsx  |   1 +
 .../Frame/components/Toast/Toast.tsx          |   2 +-
 .../components/ToastManager/ToastManager.tsx  |   2 +-
 .../src/components/Modal/Modal.stories.tsx    | 886 +++++++++---------
 .../Modal/components/Dialog/Dialog.tsx        |  15 +
 .../components/Dialog/tests/Dialog.test.tsx   |  23 +
 .../PolarisTestProvider.tsx                   |   2 +
 .../src/components/Toast/Toast.stories.tsx    |  77 ++
 polaris-react/src/index.ts                    |   2 +-
 polaris-react/src/utilities/frame/context.ts  |   1 +
 11 files changed, 593 insertions(+), 423 deletions(-)
 create mode 100644 .changeset/seven-oranges-fetch.md

diff --git a/.changeset/seven-oranges-fetch.md b/.changeset/seven-oranges-fetch.md
new file mode 100644
index 00000000000..9ef53522eaa
--- /dev/null
+++ b/.changeset/seven-oranges-fetch.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated the Toast component to support multiple re-renders being announced on screen readers
diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
index 77fa377b742..0b70291d508 100644
--- a/polaris-react/src/components/Frame/Frame.tsx
+++ b/polaris-react/src/components/Frame/Frame.tsx
@@ -263,6 +263,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       logo,
       showToast: this.showToast,
       hideToast: this.hideToast,
+      toastMessages,
       startLoading: this.startLoading,
       stopLoading: this.stopLoading,
       setContextualSaveBar: this.setContextualSaveBar,
diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.tsx b/polaris-react/src/components/Frame/components/Toast/Toast.tsx
index 9f5e66884d4..c74f2a3e28c 100644
--- a/polaris-react/src/components/Frame/components/Toast/Toast.tsx
+++ b/polaris-react/src/components/Frame/components/Toast/Toast.tsx
@@ -87,7 +87,7 @@ export function Toast({
   const className = classNames(styles.Toast, error && styles.error);
 
   return (
-    <div className={className}>
+    <div className={className} aria-live="assertive">
       <KeypressListener keyCode={Key.Escape} handler={onDismiss} />
       {leadingIconMarkup}
       <HorizontalStack gap="4" blockAlign="center">
diff --git a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx
index 6cd3f20efd6..6335de39320 100644
--- a/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx
+++ b/polaris-react/src/components/Frame/components/ToastManager/ToastManager.tsx
@@ -61,7 +61,7 @@ export const ToastManager = memo(function ToastManager({
   });
 
   return (
-    <Portal>
+    <Portal idPrefix="toast">
       <EventListener event="resize" handler={updateToasts} />
       <div className={styles.ToastManager} aria-live="assertive">
         <TransitionGroup component={null}>{toastsMarkup}</TransitionGroup>
diff --git a/polaris-react/src/components/Modal/Modal.stories.tsx b/polaris-react/src/components/Modal/Modal.stories.tsx
index 11f9dfee887..0b804eedffe 100644
--- a/polaris-react/src/components/Modal/Modal.stories.tsx
+++ b/polaris-react/src/components/Modal/Modal.stories.tsx
@@ -12,6 +12,8 @@ import {
   Text,
   TextContainer,
   TextField,
+  Frame,
+  FrameContext,
 } from '@shopify/polaris';
 
 export default {
@@ -26,31 +28,34 @@ export function Default() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -77,45 +82,47 @@ export function WithPrimaryAction() {
   const activator = <Button onClick={toggleModal}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={toggleModal}
-        title="Get a shareable link"
-        primaryAction={{
-          content: 'Close',
-          onAction: toggleModal,
-        }}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <TextContainer>
-                You can share this discount link with your customers via email
-                or social media. Your discount will be automatically applied at
-                checkout.
-              </TextContainer>
-            </LegacyStack.Item>
-            <LegacyStack.Item fill>
-              <TextField
-                ref={node}
-                label="Discount link"
-                onFocus={handleFocus}
-                value={discountLink}
-                onChange={() => {}}
-                autoComplete="off"
-                connectedRight={
-                  <Button primary onClick={handleClick}>
-                    Copy link
-                  </Button>
-                }
-              />
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Get a shareable link"
+          primaryAction={{
+            content: 'Close',
+            onAction: toggleModal,
+          }}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <TextContainer>
+                  You can share this discount link with your customers via email
+                  or social media. Your discount will be automatically applied
+                  at checkout.
+                </TextContainer>
+              </LegacyStack.Item>
+              <LegacyStack.Item fill>
+                <TextField
+                  ref={node}
+                  label="Discount link"
+                  onFocus={handleFocus}
+                  value={discountLink}
+                  onChange={() => {}}
+                  autoComplete="off"
+                  connectedRight={
+                    <Button primary onClick={handleClick}>
+                      Copy link
+                    </Button>
+                  }
+                />
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -151,56 +158,58 @@ export function WithPrimaryAndSecondaryActions() {
   const activator = <Button onClick={handleModalChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleClose}
-        title="Export customers"
-        primaryAction={{
-          content: 'Export customers',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleClose}
+          title="Export customers"
+          primaryAction={{
+            content: 'Export customers',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export"
-                choices={[
-                  {label: 'Current page', value: currentPage},
-                  {label: 'All customers', value: allCustomers},
-                  {label: 'Selected customers', value: selectedCustomers},
-                ]}
-                selected={selectedExport}
-                onChange={handleSelectedExport}
-              />
-            </LegacyStack.Item>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export as"
-                choices={[
-                  {
-                    label:
-                      'CSV for Excel, Numbers, or other spreadsheet programs',
-                    value: csvExcel,
-                  },
-                  {label: 'Plain CSV file', value: csvPlain},
-                ]}
-                selected={selectedExportAs}
-                onChange={handleSelectedExportAs}
-              />
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export"
+                  choices={[
+                    {label: 'Current page', value: currentPage},
+                    {label: 'All customers', value: allCustomers},
+                    {label: 'Selected customers', value: selectedCustomers},
+                  ]}
+                  selected={selectedExport}
+                  onChange={handleSelectedExport}
+                />
+              </LegacyStack.Item>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export as"
+                  choices={[
+                    {
+                      label:
+                        'CSV for Excel, Numbers, or other spreadsheet programs',
+                      value: csvExcel,
+                    },
+                    {label: 'Plain CSV file', value: csvPlain},
+                  ]}
+                  selected={selectedExportAs}
+                  onChange={handleSelectedExportAs}
+                />
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -215,43 +224,45 @@ export function Large() {
   const activator = <Button onClick={toggleActive}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        large
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          large
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -266,43 +277,45 @@ export function Small() {
   const activator = <Button onClick={toggleActive}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        small
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          small
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -314,32 +327,35 @@ export function WithoutATitle() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Reach more shoppers with Instagram product tags"
-        titleHidden
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Reach more shoppers with Instagram product tags"
+          titleHidden
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section titleHidden>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section titleHidden>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -356,23 +372,25 @@ export function WithScrollListener() {
   const activator = <Button onClick={handleChange}>Open</Button>;
 
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        title="Scrollable content"
-        onClose={handleChange}
-        onScrolledToBottom={handleScrollBottom}
-      >
-        {Array.from({length: 50}, (_, index) => (
-          <Modal.Section key={index}>
-            <TextContainer>
-              Item <a href="#Content">#{index}</a>
-            </TextContainer>
-          </Modal.Section>
-        ))}
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          activator={activator}
+          open={active}
+          title="Scrollable content"
+          onClose={handleChange}
+          onScrolledToBottom={handleScrollBottom}
+        >
+          {Array.from({length: 50}, (_, index) => (
+            <Modal.Section key={index}>
+              <TextContainer>
+                Item <a href="#Content">#{index}</a>
+              </TextContainer>
+            </Modal.Section>
+          ))}
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -394,32 +412,35 @@ export function WithActivatorRef() {
   );
 
   return (
-    <div style={{height: '500px'}}>
-      {activator}
-      <Modal
-        activator={buttonRef}
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        {activator}
+        <Modal
+          activator={buttonRef}
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
@@ -436,144 +457,162 @@ export function WithoutAnActivatorProp() {
   }, []);
 
   return (
-    <div style={{height: '500px'}}>
-      <div ref={button}>
-        <Button onClick={handleOpen}>Open</Button>
-      </div>
-      <Modal
-        instant
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+    <Frame>
+      <div style={{height: '500px'}}>
+        <div ref={button}>
+          <Button onClick={handleOpen}>Open</Button>
+        </div>
+        <Modal
+          instant
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            Use Instagram posts to share your products with millions of people.
-            Let shoppers buy from your store without leaving Instagram.
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
-    </div>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              Use Instagram posts to share your products with millions of
+              people. Let shoppers buy from your store without leaving
+              Instagram.
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function WithLongContent() {
   return (
-    <Modal
-      title="Long form modal"
-      open
-      onClose={() => {}}
-      primaryAction={{content: 'Save'}}
-    >
-      <Modal.Section>
-        <Banner title="Payment details" />
-      </Modal.Section>
-      <Modal.Section>
-        <FormLayout>
-          <FormLayout.Group>
-            <TextField label="Payment method type" autoComplete="off" />
-            <TextField label="Card number" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Expires" autoComplete="off" />
-            <TextField label="CVV" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Country/region" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="First name" autoComplete="off" />
-            <TextField label="Last name" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Address" autoComplete="off" />
-            <TextField label="Apartment, suite, etc." autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="City" autoComplete="off" />
-            <TextField label="Province" autoComplete="off" />
-            <TextField label="Postal code" autoComplete="off" />
-          </FormLayout.Group>
-        </FormLayout>
-      </Modal.Section>
-    </Modal>
+    <Frame>
+      <Modal
+        title="Long form modal"
+        open
+        onClose={() => {}}
+        primaryAction={{content: 'Save'}}
+      >
+        <Modal.Section>
+          <Banner title="Payment details" />
+        </Modal.Section>
+        <Modal.Section>
+          <FormLayout>
+            <FormLayout.Group>
+              <TextField label="Payment method type" autoComplete="off" />
+              <TextField label="Card number" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Expires" autoComplete="off" />
+              <TextField label="CVV" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Country/region" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="First name" autoComplete="off" />
+              <TextField label="Last name" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Address" autoComplete="off" />
+              <TextField label="Apartment, suite, etc." autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="City" autoComplete="off" />
+              <TextField label="Province" autoComplete="off" />
+              <TextField label="Postal code" autoComplete="off" />
+            </FormLayout.Group>
+          </FormLayout>
+        </Modal.Section>
+      </Modal>
+    </Frame>
   );
 }
 
 export function WithLongContentNoScroll() {
   return (
-    <Modal
-      title="Long form modal"
-      open
-      onClose={() => {}}
-      noScroll
-      primaryAction={{content: 'Save'}}
-    >
-      <Modal.Section>
-        <Banner title="Payment details" />
-      </Modal.Section>
-      <Modal.Section>
-        <FormLayout>
-          <FormLayout.Group>
-            <TextField label="Payment method type" autoComplete="off" />
-            <TextField label="Card number" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Expires" autoComplete="off" />
-            <TextField label="CVV" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Country/region" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="First name" autoComplete="off" />
-            <TextField label="Last name" autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="Address" autoComplete="off" />
-            <TextField label="Apartment, suite, etc." autoComplete="off" />
-          </FormLayout.Group>
-
-          <FormLayout.Group>
-            <TextField label="City" autoComplete="off" />
-            <TextField label="Province" autoComplete="off" />
-            <TextField label="Postal code" autoComplete="off" />
-          </FormLayout.Group>
-        </FormLayout>
-      </Modal.Section>
-    </Modal>
-  );
-}
-
-export function EmbeddedIframe() {
-  return (
-    <div style={{height: '500px'}}>
+    <Frame>
       <Modal
-        title="Embedded iFrame Modal"
+        title="Long form modal"
         open
         onClose={() => {}}
         noScroll
         primaryAction={{content: 'Save'}}
-        src={`data:text/html;charset=utf-8,
+      >
+        <Modal.Section>
+          <Banner title="Payment details" />
+        </Modal.Section>
+        <Modal.Section>
+          <FormLayout>
+            <FormLayout.Group>
+              <TextField label="Payment method type" autoComplete="off" />
+              <TextField label="Card number" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Expires" autoComplete="off" />
+              <TextField label="CVV" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Country/region" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="First name" autoComplete="off" />
+              <TextField label="Last name" autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="Address" autoComplete="off" />
+              <TextField label="Apartment, suite, etc." autoComplete="off" />
+            </FormLayout.Group>
+
+            <FormLayout.Group>
+              <TextField label="City" autoComplete="off" />
+              <TextField label="Province" autoComplete="off" />
+              <TextField label="Postal code" autoComplete="off" />
+            </FormLayout.Group>
+          </FormLayout>
+        </Modal.Section>
+      </Modal>
+    </Frame>
+  );
+}
+
+const context = {
+  logo: undefined,
+  showToast: () => {},
+  hideToast: () => {},
+  toastMessages: [],
+  startLoading: () => {},
+  stopLoading: () => {},
+  setContextualSaveBar: () => {},
+  removeContextualSaveBar: () => {},
+};
+export function EmbeddedIframe() {
+  return (
+    <FrameContext.Provider value={context}>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Embedded iFrame Modal"
+          open
+          onClose={() => {}}
+          noScroll
+          primaryAction={{content: 'Save'}}
+          src={`data:text/html;charset=utf-8,
 <style>
   /* Modified from Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */
   *, *::before, *::after { box-sizing: border-box; }
@@ -586,67 +625,74 @@ export function EmbeddedIframe() {
     Hello.
   </h1>
 </main>`}
-      />
-    </div>
+        />
+      </div>
+    </FrameContext.Provider>
   );
 }
 
 export function SectionedProp() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Sectioned modal"
-        open
-        onClose={() => {}}
-        sectioned
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">First section</Text>
-        <Text as="p">Second section</Text>
-        <Modal.Section>
-          <Text as="p">Nested section</Text>
-        </Modal.Section>
-        <Text as="p">Fourth section</Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Sectioned modal"
+          open
+          onClose={() => {}}
+          sectioned
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">First section</Text>
+          <Text as="p">Second section</Text>
+          <Modal.Section>
+            <Text as="p">Nested section</Text>
+          </Modal.Section>
+          <Text as="p">Fourth section</Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function Loading() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Loading modal"
-        open
-        onClose={() => {}}
-        loading
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">First section</Text>
-        <Text as="p">Second section</Text>
-        <Text as="p">Third section</Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Loading modal"
+          open
+          onClose={() => {}}
+          loading
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">First section</Text>
+          <Text as="p">Second section</Text>
+          <Text as="p">Third section</Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
 
 export function Fullscreen() {
   return (
-    <div style={{height: '500px'}}>
-      <Modal
-        title="Fullscreen modal"
-        open
-        onClose={() => {}}
-        sectioned
-        fullScreen
-        primaryAction={{content: 'Save'}}
-      >
-        <Text as="h1">Fullscreen on small displays</Text>
-        <Text as="p">
-          When <code>(max-width: 47.9975em)</code>, the modal will be made{' '}
-          <code>height: 100%</code>
-        </Text>
-      </Modal>
-    </div>
+    <Frame>
+      <div style={{height: '500px'}}>
+        <Modal
+          title="Fullscreen modal"
+          open
+          onClose={() => {}}
+          sectioned
+          fullScreen
+          primaryAction={{content: 'Save'}}
+        >
+          <Text as="h1">Fullscreen on small displays</Text>
+          <Text as="p">
+            When <code>(max-width: 47.9975em)</code>, the modal will be made{' '}
+            <code>height: 100%</code>
+          </Text>
+        </Modal>
+      </div>
+    </Frame>
   );
 }
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
index c7a14ae1ce1..3b3fb3a761e 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.tsx
@@ -8,6 +8,8 @@ import {focusFirstFocusableNode} from '../../../../utilities/focus';
 import {Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {TrapFocus} from '../../../TrapFocus';
+import {useFrame} from '../../../../utilities/frame';
+import {Text} from '../../../Text';
 
 import styles from './Dialog.scss';
 
@@ -26,6 +28,7 @@ export interface DialogProps {
   in?: boolean;
   fullScreen?: boolean;
   setClosing?: Dispatch<SetStateAction<boolean>>;
+  hasToasts?: boolean;
 }
 
 export function Dialog({
@@ -40,9 +43,12 @@ export function Dialog({
   limitHeight,
   fullScreen,
   setClosing,
+  hasToasts,
   ...props
 }: DialogProps) {
   const containerNode = useRef<HTMLDivElement>(null);
+  const {toastMessages} = useFrame();
+
   const classes = classNames(
     styles.Modal,
     small && styles.sizeSmall,
@@ -105,6 +111,15 @@ export function Dialog({
               <KeypressListener keyCode={Key.Escape} handler={handleKeyUp} />
               {children}
             </div>
+            <div aria-live="assertive">
+              {toastMessages
+                ? toastMessages.map((toastMessage) => (
+                    <Text visuallyHidden as="p" key={toastMessage.id}>
+                      {toastMessage.content}
+                    </Text>
+                  ))
+                : null}
+            </div>
           </div>
         </TrapFocus>
       </div>
diff --git a/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx b/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
index 04a6233ba0b..ff1d69a14b1 100644
--- a/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
+++ b/polaris-react/src/components/Modal/components/Dialog/tests/Dialog.test.tsx
@@ -3,6 +3,7 @@ import {animationFrame} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {KeypressListener} from '../../../../KeypressListener';
+import {Text} from '../../../../Text';
 import {Dialog} from '../Dialog';
 
 describe('<Dialog>', () => {
@@ -37,6 +38,28 @@ describe('<Dialog>', () => {
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
+
+  it('renders any toast messages passed from the frame context within the Dialog', () => {
+    const toastMessages = [
+      {id: 'toast-1', content: 'Toast 1', onDismiss: noop},
+      {id: 'toast-2', content: 'Toast 2', onDismiss: noop},
+    ];
+    const dialog = mountWithApp(
+      <Dialog labelledBy="test" onClose={noop} in>
+        something
+      </Dialog>,
+      {
+        frame: {
+          toastMessages,
+        },
+      },
+    );
+    toastMessages.forEach((toastMessage) => {
+      expect(dialog).toContainReactComponent(Text, {
+        children: toastMessage.content,
+      });
+    });
+  });
 });
 
 function noop() {}
diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
index c794e6040f9..3078d25240b 100644
--- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -110,6 +110,7 @@ function createFrameContext({
   logo = undefined,
   showToast = noop,
   hideToast = noop,
+  toastMessages = [],
   setContextualSaveBar = noop,
   removeContextualSaveBar = noop,
   startLoading = noop,
@@ -119,6 +120,7 @@ function createFrameContext({
     logo,
     showToast,
     hideToast,
+    toastMessages,
     setContextualSaveBar,
     removeContextualSaveBar,
     startLoading,
diff --git a/polaris-react/src/components/Toast/Toast.stories.tsx b/polaris-react/src/components/Toast/Toast.stories.tsx
index fbcecd1b287..59c35b1fdfe 100644
--- a/polaris-react/src/components/Toast/Toast.stories.tsx
+++ b/polaris-react/src/components/Toast/Toast.stories.tsx
@@ -7,6 +7,11 @@ import {
   HorizontalStack,
   Page,
   Toast,
+  Modal,
+  TextContainer,
+  Popover,
+  ActionList,
+  VerticalStack,
 } from '@shopify/polaris';
 
 export default {
@@ -142,3 +147,75 @@ export function Error() {
     </div>
   );
 }
+
+export function InsideModal() {
+  const [toastActive, setToastActive] = useState(false);
+  const [toast2Active, setToast2Active] = useState(false);
+  const [modalActive, setModalActive] = useState(true);
+
+  const handleChange = useCallback(
+    () => setModalActive(!modalActive),
+    [modalActive],
+  );
+
+  const toggleActive = useCallback(
+    () => setToastActive((toastActive) => !toastActive),
+    [],
+  );
+
+  const toggle2Active = useCallback(
+    () => setToast2Active((toastActive) => !toastActive),
+    [],
+  );
+
+  const activator = <Button onClick={handleChange}>Open</Button>;
+
+  const toastMarkup = toastActive ? (
+    <Toast content="Message sent" onDismiss={toggleActive} />
+  ) : null;
+
+  const toast2Markup = toast2Active ? (
+    <Toast content="Another sent" onDismiss={toggle2Active} />
+  ) : null;
+
+  return (
+    <div style={{height: '500px'}}>
+      <Frame>
+        <Page title="Default">
+          {toastMarkup}
+          {toast2Markup}
+          <Modal
+            activator={activator}
+            open={modalActive}
+            onClose={handleChange}
+            title="Reach more shoppers with Instagram product tags"
+            primaryAction={{
+              content: 'Add Instagram',
+              onAction: handleChange,
+            }}
+            secondaryActions={[
+              {
+                content: 'Learn more',
+                onAction: handleChange,
+              },
+            ]}
+          >
+            <Modal.Section>
+              <VerticalStack gap="2">
+                <TextContainer>
+                  Use Instagram posts to share your products with millions of
+                  people. Let shoppers buy from your store without leaving
+                  Instagram.
+                </TextContainer>
+                <HorizontalStack gap="2">
+                  <Button onClick={toggleActive}>Show Toast</Button>
+                  <Button onClick={toggle2Active}>Show Other Toast</Button>
+                </HorizontalStack>
+              </VerticalStack>
+            </Modal.Section>
+          </Modal>
+        </Page>
+      </Frame>
+    </div>
+  );
+}
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 1f98475f36d..0fdb30948db 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -419,7 +419,7 @@ export {
   rgbaString,
   hexToRgb,
 } from './utilities/color-transformers';
-
+export {useFrame, FrameContext} from './utilities/frame';
 export {ScrollLockManagerContext as _SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT} from './utilities/scroll-lock-manager';
 export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from './utilities/within-content-context';
 export {useEventListener} from './utilities/use-event-listener';
diff --git a/polaris-react/src/utilities/frame/context.ts b/polaris-react/src/utilities/frame/context.ts
index 828bb3b426f..bec521524e4 100644
--- a/polaris-react/src/utilities/frame/context.ts
+++ b/polaris-react/src/utilities/frame/context.ts
@@ -12,6 +12,7 @@ export interface FrameContextType {
   logo?: Logo;
   showToast(toast: ToastPropsWithID): void;
   hideToast(toast: ToastID): void;
+  toastMessages: ToastPropsWithID[];
   setContextualSaveBar(props: ContextualSaveBarProps): void;
   removeContextualSaveBar(): void;
   startLoading(): void;

From 26ab8ce7df10609316eccc75b7bed6f8cebc9120 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Wed, 13 Sep 2023 10:16:50 -0600
Subject: [PATCH 046/102] Add public primitive `border-radius` token scale
 (#10432)

### WHY are these changes introduced?

Fixes #10420

### WHAT is this pull request doing?

Adds the following values to a new private primitive `size` token scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-border-radius-0` | `size[0]`  | `0px`    |
| `--p-border-radius-050` | `size['050']`  | `2px`    |
| `--p-border-radius-100` | `size[100]`  | `4px`    |
| `--p-border-radius-150` | `size[150]`  | `6px`    |
| `--p-border-radius-200` | `size[200]`  | `8px`    |
| `--p-border-radius-300` | `size[300]`  | `12px`    |
| `--p-border-radius-400` | `size[400]`  | `16px`    |
| `--p-border-radius-500` | `size[500]`  | `20px`    |
| `--p-border-radius-750` | `size[750]`  | `30px`    |
---
 .changeset/five-cameras-deny.md           |  5 +++
 polaris-tokens/src/token-groups/border.ts | 45 +++++++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/five-cameras-deny.md

diff --git a/.changeset/five-cameras-deny.md b/.changeset/five-cameras-deny.md
new file mode 100644
index 00000000000..b897faba23a
--- /dev/null
+++ b/.changeset/five-cameras-deny.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `border-radius` token scale
diff --git a/polaris-tokens/src/token-groups/border.ts b/polaris-tokens/src/token-groups/border.ts
index 9db8cf19208..0e644af92be 100644
--- a/polaris-tokens/src/token-groups/border.ts
+++ b/polaris-tokens/src/token-groups/border.ts
@@ -1,8 +1,19 @@
+import {size} from '../size';
 import type {Experimental, MetadataProperties} from '../types';
 
 type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
 
 export type BorderRadiusScale =
+  | '0'
+  | '050'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '750'
+  | 'full'
   | '05'
   | '1'
   | '2'
@@ -10,7 +21,6 @@ export type BorderRadiusScale =
   | '4'
   | '5'
   | '6'
-  | 'full'
   | BorderRadiusScaleExperimental;
 
 type BorderWidthScaleExperimental = Experimental<'1' | '2'>;
@@ -34,6 +44,36 @@ export type BorderTokenGroup = {
 export const border: {
   [TokenName in BorderTokenName]: MetadataProperties;
 } = {
+  'border-radius-0': {
+    value: size[0],
+  },
+  'border-radius-050': {
+    value: size['050'],
+  },
+  'border-radius-100': {
+    value: size[100],
+  },
+  'border-radius-150': {
+    value: size[150],
+  },
+  'border-radius-200': {
+    value: size[200],
+  },
+  'border-radius-300': {
+    value: size[300],
+  },
+  'border-radius-400': {
+    value: size[400],
+  },
+  'border-radius-500': {
+    value: size[500],
+  },
+  'border-radius-750': {
+    value: size[750],
+  },
+  'border-radius-full': {
+    value: '9999px',
+  },
   'border-radius-0-experimental': {
     value: '0px',
   },
@@ -58,9 +98,6 @@ export const border: {
   'border-radius-6': {
     value: '30px',
   },
-  'border-radius-full': {
-    value: '9999px',
-  },
   'border-radius-1_5-experimental': {
     value: '6px',
   },

From 7514dd1a36a9988ede48085b80c6e7e214f98968 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Wed, 13 Sep 2023 12:25:07 -0600
Subject: [PATCH 047/102] Add public primitive `space` token scales (#10448)

### WHY are these changes introduced?
Fixes #10435

### WHAT is this pull request doing?

Adds the following values to new public primitive `space` token scales:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-space-050` | `size['050']`  | `2px`    |
| `--p-space-100` | `size[100]`  | `4px`    |
| `--p-space-150` | `size[150]`  | `6px`    |
| `--p-space-200` | `size[200]`  | `8px`    |
| `--p-space-300` | `size[300]`  | `12px`    |
| `--p-space-400` | `size[400]`  | `16px`    |
| `--p-space-500` | `size[500]`  | `20px`    |
| `--p-space-600` | `size[600]`  | `24px`    |
| `--p-space-800` | `size[800]`  | `32px`    |
| `--p-space-1000` | `size[1000]`  | `40px`    |
| `--p-space-1200` | `size[1200]`  | `48px`    |
| `--p-space-1600` | `size[1600]`  | `64px`    |
| `--p-space-2000` | `size[2000]`  | `80px`    |
| `--p-space-2400` | `size[2400]`  | `96px`    |
| `--p-space-3200` | `size[3200]`  | `128px`    |
---
 .changeset/hot-houses-pretend.md         |  5 ++
 polaris-tokens/src/token-groups/space.ts | 65 +++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-houses-pretend.md

diff --git a/.changeset/hot-houses-pretend.md b/.changeset/hot-houses-pretend.md
new file mode 100644
index 00000000000..35936031d67
--- /dev/null
+++ b/.changeset/hot-houses-pretend.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `space` token scale
diff --git a/polaris-tokens/src/token-groups/space.ts b/polaris-tokens/src/token-groups/space.ts
index 9bf16bf1574..ac7dc99b206 100644
--- a/polaris-tokens/src/token-groups/space.ts
+++ b/polaris-tokens/src/token-groups/space.ts
@@ -1,3 +1,4 @@
+import {size} from '../size';
 import type {MetadataProperties, Experimental} from '../types';
 
 type SpaceScaleExperimental = Experimental<'1_5'>;
@@ -5,6 +6,21 @@ type SpaceScaleExperimental = Experimental<'1_5'>;
 export type SpaceScale =
   | '0'
   | '025'
+  | '050'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '800'
+  | '1000'
+  | '1200'
+  | '1600'
+  | '2000'
+  | '2400'
+  | '3200'
   | '05'
   | '1'
   | '2'
@@ -32,10 +48,55 @@ export const space: {
   [TokenName in SpaceTokenName]: MetadataProperties;
 } = {
   'space-0': {
-    value: '0px',
+    value: size[0],
   },
   'space-025': {
-    value: '1px',
+    value: size['025'],
+  },
+  'space-050': {
+    value: size['050'],
+  },
+  'space-100': {
+    value: size[100],
+  },
+  'space-150': {
+    value: size[150],
+  },
+  'space-200': {
+    value: size[200],
+  },
+  'space-300': {
+    value: size[300],
+  },
+  'space-400': {
+    value: size[400],
+  },
+  'space-500': {
+    value: size[500],
+  },
+  'space-600': {
+    value: size[600],
+  },
+  'space-800': {
+    value: size[800],
+  },
+  'space-1000': {
+    value: size[1000],
+  },
+  'space-1200': {
+    value: size[1200],
+  },
+  'space-1600': {
+    value: size[1600],
+  },
+  'space-2000': {
+    value: size[2000],
+  },
+  'space-2400': {
+    value: size[2400],
+  },
+  'space-3200': {
+    value: size[3200],
   },
   'space-05': {
     value: '2px',

From 98a9a964cb34faf3e026d07433f66c97eafe2a88 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Wed, 13 Sep 2023 14:21:48 -0600
Subject: [PATCH 048/102] Add private primitive `size` tokens (#10453)

### WHY are these changes introduced?

Related to #10417

While working on other token scales additional tokens were identified
that should be added to the `size` scale.

### WHAT is this pull request doing?

Adds the following values to the `size` token scale:

| New Token          | Value        |
| ------------------------- | ------------------------ |
| `size['0165']`  | `0.66px`    |
| `size[2800]`  | `112px`    |
---
 polaris-tokens/src/size.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/polaris-tokens/src/size.ts b/polaris-tokens/src/size.ts
index 4b53c1c6690..80336df8292 100644
--- a/polaris-tokens/src/size.ts
+++ b/polaris-tokens/src/size.ts
@@ -1,5 +1,6 @@
 export const size = {
   '0': '0px',
+  '0165': '0.66px',
   '025': '1px',
   '050': '2px',
   '100': '4px',
@@ -21,6 +22,7 @@ export const size = {
   '1600': '64px',
   '2000': '80px',
   '2400': '96px',
+  '2800': '112px',
   '3200': '128px',
 } as const;
 

From 889bdab4b8aaa3519c26684eb1f4cbb5c4e10bbe Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Wed, 13 Sep 2023 14:56:20 -0600
Subject: [PATCH 049/102] Add private primitive `space` token (#10456)

### WHY are these changes introduced?

Related to #10435 and #10453

While working on the migration for this token scale an additional token
was identified that should be added to the `space` scale.

### WHAT is this pull request doing?

Adds the following values to the `size` token scale:

| New Token          | Value        | Value (in px) |
| ------------------------- | ------------------------ |
------------------------ |
| `--p-space-2800` | `size[2800]`  | `112px`    |
---
 polaris-tokens/src/token-groups/space.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/polaris-tokens/src/token-groups/space.ts b/polaris-tokens/src/token-groups/space.ts
index ac7dc99b206..e7097e00d3d 100644
--- a/polaris-tokens/src/token-groups/space.ts
+++ b/polaris-tokens/src/token-groups/space.ts
@@ -20,6 +20,7 @@ export type SpaceScale =
   | '1600'
   | '2000'
   | '2400'
+  | '2800'
   | '3200'
   | '05'
   | '1'
@@ -95,6 +96,9 @@ export const space: {
   'space-2400': {
     value: size[2400],
   },
+  'space-2800': {
+    value: size[2800],
+  },
   'space-3200': {
     value: size[3200],
   },

From d35d55e5b15d64b7140d976dbc35d56d2580852a Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Thu, 14 Sep 2023 09:39:17 +0100
Subject: [PATCH 050/102] [IndexFilters] Fix layout shift when going from
 between default and filtering modes (#10428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes an issue in the IndexFilters where it caused a layout shift when
toggling between default and filtering modes. This PR fixes that little
layout shift.

### Before



https://github.com/Shopify/polaris/assets/2562596/85c96dcd-3854-455a-9ccb-cfecaf86b293

### After



https://github.com/Shopify/polaris/assets/2562596/24b55cfc-2ec8-47d7-9d27-be6088c4e2f1

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/forty-dolphins-love.md             |  5 ++++
 .../components/SearchField/SearchField.scss   |  2 +-
 .../components/IndexFilters/IndexFilters.scss |  7 +++++
 .../components/IndexFilters/IndexFilters.tsx  | 30 ++++++++++---------
 4 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/forty-dolphins-love.md

diff --git a/.changeset/forty-dolphins-love.md b/.changeset/forty-dolphins-love.md
new file mode 100644
index 00000000000..d51163479ba
--- /dev/null
+++ b/.changeset/forty-dolphins-love.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed layout shift in `IndexFilters` when switching modes
diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
index e60b3a0df10..c490e04780b 100644
--- a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
@@ -3,7 +3,7 @@
 .SearchField {
   position: relative;
   display: flex;
-  padding-block: calc(var(--p-space-1_5-experimental) * 0.5);
+  padding-block: var(--p-space-025);
   margin-left: var(--p-space-05);
 }
 
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
index 0ca2db05575..ec463c7c66b 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.scss
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -137,3 +137,10 @@ $spinner-size: 20px;
     display: block;
   }
 }
+
+.ButtonWrap,
+.ActionWrap {
+  button {
+    display: flex;
+  }
+}
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
index 07ae4b1bb90..b91ab5d2008 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -437,21 +437,23 @@ export function IndexFilters({
                   borderlessQueryField
                   closeOnChildOverlayClick={closeOnChildOverlayClick}
                 >
-                  <HorizontalStack
-                    gap={polarisSummerEditions2023 ? '2' : '3'}
-                    align="start"
-                    blockAlign="center"
-                  >
-                    <div
-                      style={{
-                        ...defaultStyle,
-                        ...transitionStyles[state],
-                      }}
+                  <div className={styles.ButtonWrap}>
+                    <HorizontalStack
+                      gap={polarisSummerEditions2023 ? '2' : '3'}
+                      align="start"
+                      blockAlign="center"
                     >
-                      {updateButtonsMarkup}
-                    </div>
-                    {sortMarkup}
-                  </HorizontalStack>
+                      <div
+                        style={{
+                          ...defaultStyle,
+                          ...transitionStyles[state],
+                        }}
+                      >
+                        {updateButtonsMarkup}
+                      </div>
+                      {sortMarkup}
+                    </HorizontalStack>
+                  </div>
                 </Filters>
               ) : null}
             </div>

From 2e65a7e98dced44f45df02d15cda78093bac3cf3 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Thu, 14 Sep 2023 09:42:47 +0100
Subject: [PATCH 051/102] [Filters] Fix vanishing applied filters bug (#10429)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes an issue where if you have an applied filter set from the props
when the component initiates, and then you remove the selected filter
option, the filter pill disappears from the view. The correct behaviour
is that the filter pill should remain, but be empty.

### Video of existing issue

https://github.com/Shopify/polaris/assets/2562596/880c0974-23ce-4f8c-bda4-5734e7c8faa3

### Video showing new intended behaviour



https://github.com/Shopify/polaris/assets/2562596/b31b60b4-2077-4982-8545-bc54e03f1e9c


### WHAT is this pull request doing?

The issue stemmed from having two sources of local pinned filters, and
them behaving in different ways. Now, by only using the
`localPinnedFilters` value, and setting the initial state value on
component mount, we can expect the component to behave identically for
both filter pills that are rendered on mount, and filter pills that are
rendered as a result of a state change within the component.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)


### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/beige-jeans-scream.md              |  5 ++++
 .../src/components/Filters/Filters.tsx        | 21 ++++++++--------
 .../components/Filters/tests/Filters.test.tsx | 25 +++++++++++++++++++
 3 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/beige-jeans-scream.md

diff --git a/.changeset/beige-jeans-scream.md b/.changeset/beige-jeans-scream.md
new file mode 100644
index 00000000000..134c33589b0
--- /dev/null
+++ b/.changeset/beige-jeans-scream.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed `Filters` pinned filter pill not remaining when applied values are cleared
diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx
index b246ff63dd9..9ed2e22e1f4 100644
--- a/polaris-react/src/components/Filters/Filters.tsx
+++ b/polaris-react/src/components/Filters/Filters.tsx
@@ -141,7 +141,6 @@ export function Filters({
   const {mdDown} = useBreakpoints();
   const {polarisSummerEditions2023: se23} = useFeatures();
   const [popoverActive, setPopoverActive] = useState(false);
-  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -158,23 +157,23 @@ export function Filters({
   const appliedFilterKeys = appliedFilters?.map(({key}) => key);
 
   const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
-    ({pinned, key}) =>
-      (Boolean(pinned) || appliedFilterKeys?.includes(key)) &&
-      // Filters that are pinned in local state display at the end of our list
-      !localPinnedFilters.find((filterKey) => filterKey === key),
+    ({pinned, key}) => {
+      const isPinnedOrApplied =
+        Boolean(pinned) || appliedFilterKeys?.includes(key);
+      return isPinnedOrApplied;
+    },
+  );
+  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
+    pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
   );
-  const pinnedFiltersFromLocalState = localPinnedFilters
+
+  const pinnedFilters = localPinnedFilters
     .map((key) => filters.find((filter) => filter.key === key))
     .reduce<FilterInterface[]>(
       (acc, filter) => (filter ? [...acc, filter] : acc),
       [],
     );
 
-  const pinnedFilters = [
-    ...pinnedFiltersFromPropsAndAppliedFilters,
-    ...pinnedFiltersFromLocalState,
-  ];
-
   const onFilterClick =
     ({key, onAction}: FilterInterface) =>
     () => {
diff --git a/polaris-react/src/components/Filters/tests/Filters.test.tsx b/polaris-react/src/components/Filters/tests/Filters.test.tsx
index 615983fb312..1abc7321176 100644
--- a/polaris-react/src/components/Filters/tests/Filters.test.tsx
+++ b/polaris-react/src/components/Filters/tests/Filters.test.tsx
@@ -180,6 +180,31 @@ describe('<Filters />', () => {
     expect(wrapper).toContainReactComponent(ActionList);
   });
 
+  it('will not remove a pinned filter when it is removed from the applied filters array', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Value is Baz',
+        value: ['Baz'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <Filters {...defaultProps} appliedFilters={appliedFilters} />,
+    );
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Value is Baz',
+      selected: true,
+    });
+    wrapper.setProps({appliedFilters: []});
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Baz',
+      selected: false,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;

From ea931107e82facd46ce86beed44603578513ec36 Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:38:21 +0100
Subject: [PATCH 052/102] Version Packages (#10405)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.18.0

### Minor Changes

- [#10429](https://github.com/Shopify/polaris/pull/10429)
[`2e65a7e98`](https://github.com/Shopify/polaris/commit/2e65a7e98dced44f45df02d15cda78093bac3cf3)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `Filters` pinned
filter pill not remaining when applied values are cleared


- [#10394](https://github.com/Shopify/polaris/pull/10394)
[`b7f25f07f`](https://github.com/Shopify/polaris/commit/b7f25f07fba272add902d68a8cc15bee43030dff)
Thanks [@mrcthms](https://github.com/mrcthms)! - Added support for
disabling 1Password integration in `TextField`


- [#10406](https://github.com/Shopify/polaris/pull/10406)
[`87f559ca1`](https://github.com/Shopify/polaris/commit/87f559ca1190b28b583913d321c87b60639c1cc4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the Toast
component to support multiple re-renders being announced on screen
readers

### Patch Changes

- [#10428](https://github.com/Shopify/polaris/pull/10428)
[`d35d55e5b`](https://github.com/Shopify/polaris/commit/d35d55e5b15d64b7140d976dbc35d56d2580852a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed layout shift in
`IndexFilters` when switching modes

- Updated dependencies
\[[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120),
[`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968),
[`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
    -   @shopify/polaris-tokens@7.8.0

## @shopify/polaris-tokens@7.8.0

### Minor Changes

- [#10432](https://github.com/Shopify/polaris/pull/10432)
[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `border-radius` token scale


- [#10448](https://github.com/Shopify/polaris/pull/10448)
[`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `space` token scale


- [#10418](https://github.com/Shopify/polaris/pull/10418)
[`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added private
primitive `size` token scale

## @shopify/polaris-migrator@0.22.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120),
[`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968),
[`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
    -   @shopify/polaris-tokens@7.8.0
    -   @shopify/stylelint-polaris@14.0.3

## @shopify/stylelint-polaris@14.0.3

### Patch Changes

- Updated dependencies
\[[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120),
[`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968),
[`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
    -   @shopify/polaris-tokens@7.8.0

## polaris.shopify.com@0.57.6

### Patch Changes

- Updated dependencies
\[[`2e65a7e98`](https://github.com/Shopify/polaris/commit/2e65a7e98dced44f45df02d15cda78093bac3cf3),
[`b7f25f07f`](https://github.com/Shopify/polaris/commit/b7f25f07fba272add902d68a8cc15bee43030dff),
[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120),
[`d35d55e5b`](https://github.com/Shopify/polaris/commit/d35d55e5b15d64b7140d976dbc35d56d2580852a),
[`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968),
[`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e),
[`87f559ca1`](https://github.com/Shopify/polaris/commit/87f559ca1190b28b583913d321c87b60639c1cc4)]:
    -   @shopify/polaris@11.18.0
    -   @shopify/polaris-tokens@7.8.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/beige-jeans-scream.md    |  5 -----
 .changeset/brave-dancers-appear.md  |  5 -----
 .changeset/five-cameras-deny.md     |  5 -----
 .changeset/forty-dolphins-love.md   |  5 -----
 .changeset/hot-houses-pretend.md    |  5 -----
 .changeset/modern-lobsters-cheer.md |  5 -----
 .changeset/seven-oranges-fetch.md   |  5 -----
 polaris-for-vscode/package.json     |  2 +-
 polaris-migrator/CHANGELOG.md       |  8 ++++++++
 polaris-migrator/package.json       |  8 ++++----
 polaris-react/CHANGELOG.md          | 17 +++++++++++++++++
 polaris-react/README.md             |  4 ++--
 polaris-react/package.json          |  4 ++--
 polaris-tokens/CHANGELOG.md         | 10 ++++++++++
 polaris-tokens/package.json         |  2 +-
 polaris.shopify.com/CHANGELOG.md    |  8 ++++++++
 polaris.shopify.com/package.json    |  6 +++---
 stylelint-polaris/CHANGELOG.md      |  7 +++++++
 stylelint-polaris/package.json      |  4 ++--
 19 files changed, 65 insertions(+), 50 deletions(-)
 delete mode 100644 .changeset/beige-jeans-scream.md
 delete mode 100644 .changeset/brave-dancers-appear.md
 delete mode 100644 .changeset/five-cameras-deny.md
 delete mode 100644 .changeset/forty-dolphins-love.md
 delete mode 100644 .changeset/hot-houses-pretend.md
 delete mode 100644 .changeset/modern-lobsters-cheer.md
 delete mode 100644 .changeset/seven-oranges-fetch.md

diff --git a/.changeset/beige-jeans-scream.md b/.changeset/beige-jeans-scream.md
deleted file mode 100644
index 134c33589b0..00000000000
--- a/.changeset/beige-jeans-scream.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Fixed `Filters` pinned filter pill not remaining when applied values are cleared
diff --git a/.changeset/brave-dancers-appear.md b/.changeset/brave-dancers-appear.md
deleted file mode 100644
index 0f70aef6678..00000000000
--- a/.changeset/brave-dancers-appear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Added support for disabling 1Password integration in `TextField`
diff --git a/.changeset/five-cameras-deny.md b/.changeset/five-cameras-deny.md
deleted file mode 100644
index b897faba23a..00000000000
--- a/.changeset/five-cameras-deny.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `border-radius` token scale
diff --git a/.changeset/forty-dolphins-love.md b/.changeset/forty-dolphins-love.md
deleted file mode 100644
index d51163479ba..00000000000
--- a/.changeset/forty-dolphins-love.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Fixed layout shift in `IndexFilters` when switching modes
diff --git a/.changeset/hot-houses-pretend.md b/.changeset/hot-houses-pretend.md
deleted file mode 100644
index 35936031d67..00000000000
--- a/.changeset/hot-houses-pretend.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `space` token scale
diff --git a/.changeset/modern-lobsters-cheer.md b/.changeset/modern-lobsters-cheer.md
deleted file mode 100644
index b6e90b1c584..00000000000
--- a/.changeset/modern-lobsters-cheer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Add private primitive `size` token scale
diff --git a/.changeset/seven-oranges-fetch.md b/.changeset/seven-oranges-fetch.md
deleted file mode 100644
index 9ef53522eaa..00000000000
--- a/.changeset/seven-oranges-fetch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Updated the Toast component to support multiple re-renders being announced on screen readers
diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json
index 9d5aaeec79d..975adc4b9ea 100644
--- a/polaris-for-vscode/package.json
+++ b/polaris-for-vscode/package.json
@@ -43,7 +43,7 @@
     "vscode-languageserver-textdocument": "^1.0.4"
   },
   "devDependencies": {
-    "@shopify/polaris-tokens": "^7.7.0",
+    "@shopify/polaris-tokens": "^7.8.0",
     "@types/node": "14.x",
     "@types/vscode": "^1.64.0",
     "@vscode/test-electron": "^2.1.2",
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index 89af1575a6f..ca60edb42a7 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @shopify/polaris-migrator
 
+## 0.22.3
+
+### Patch Changes
+
+- Updated dependencies [[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120), [`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968), [`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
+  - @shopify/polaris-tokens@7.8.0
+  - @shopify/stylelint-polaris@14.0.3
+
 ## 0.22.2
 
 ### Patch Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 5f62fd4ada3..2200ab6503a 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.22.2",
+  "version": "0.22.3",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -36,8 +36,8 @@
     "generate": "plop"
   },
   "dependencies": {
-    "@shopify/polaris-tokens": "^7.7.0",
-    "@shopify/stylelint-polaris": "^14.0.2",
+    "@shopify/polaris-tokens": "^7.8.0",
+    "@shopify/stylelint-polaris": "^14.0.3",
     "chalk": "^4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "^1.1.0",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.17.0",
+    "@shopify/polaris": "^11.18.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index a65f080de12..fd02f4cc981 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## 11.18.0
+
+### Minor Changes
+
+- [#10429](https://github.com/Shopify/polaris/pull/10429) [`2e65a7e98`](https://github.com/Shopify/polaris/commit/2e65a7e98dced44f45df02d15cda78093bac3cf3) Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `Filters` pinned filter pill not remaining when applied values are cleared
+
+* [#10394](https://github.com/Shopify/polaris/pull/10394) [`b7f25f07f`](https://github.com/Shopify/polaris/commit/b7f25f07fba272add902d68a8cc15bee43030dff) Thanks [@mrcthms](https://github.com/mrcthms)! - Added support for disabling 1Password integration in `TextField`
+
+- [#10406](https://github.com/Shopify/polaris/pull/10406) [`87f559ca1`](https://github.com/Shopify/polaris/commit/87f559ca1190b28b583913d321c87b60639c1cc4) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the Toast component to support multiple re-renders being announced on screen readers
+
+### Patch Changes
+
+- [#10428](https://github.com/Shopify/polaris/pull/10428) [`d35d55e5b`](https://github.com/Shopify/polaris/commit/d35d55e5b15d64b7140d976dbc35d56d2580852a) Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed layout shift in `IndexFilters` when switching modes
+
+- Updated dependencies [[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120), [`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968), [`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
+  - @shopify/polaris-tokens@7.8.0
+
 ## 11.17.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index a7cfbe71c18..447ccfae5dc 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.17.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.18.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.17.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.18.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index a47fcbec550..711fecd3f51 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.17.0",
+  "version": "11.18.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.7.0",
+    "@shopify/polaris-tokens": "^7.8.0",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.2",
diff --git a/polaris-tokens/CHANGELOG.md b/polaris-tokens/CHANGELOG.md
index 6eda4bca2b5..77f3952cbdb 100644
--- a/polaris-tokens/CHANGELOG.md
+++ b/polaris-tokens/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 7.8.0
+
+### Minor Changes
+
+- [#10432](https://github.com/Shopify/polaris/pull/10432) [`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `border-radius` token scale
+
+* [#10448](https://github.com/Shopify/polaris/pull/10448) [`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `space` token scale
+
+- [#10418](https://github.com/Shopify/polaris/pull/10418) [`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e) Thanks [@lgriffee](https://github.com/lgriffee)! - Add private primitive `size` token scale
+
 ## 7.7.0
 
 ### Minor Changes
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 9b4a450318b..763710a2938 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "",
   "main": "dist/cjs/build/index.js",
   "module": "dist/esm/build/index.mjs",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index 2ce2d008419..b01d82166a6 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,13 @@
 # polaris.shopify.com
 
+## 0.57.6
+
+### Patch Changes
+
+- Updated dependencies [[`2e65a7e98`](https://github.com/Shopify/polaris/commit/2e65a7e98dced44f45df02d15cda78093bac3cf3), [`b7f25f07f`](https://github.com/Shopify/polaris/commit/b7f25f07fba272add902d68a8cc15bee43030dff), [`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120), [`d35d55e5b`](https://github.com/Shopify/polaris/commit/d35d55e5b15d64b7140d976dbc35d56d2580852a), [`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968), [`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e), [`87f559ca1`](https://github.com/Shopify/polaris/commit/87f559ca1190b28b583913d321c87b60639c1cc4)]:
+  - @shopify/polaris@11.18.0
+  - @shopify/polaris-tokens@7.8.0
+
 ## 0.57.5
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 986210e2991..22a2036100b 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.5",
+  "version": "0.57.6",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,9 +26,9 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.17.0",
+    "@shopify/polaris": "^11.18.0",
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.7.0",
+    "@shopify/polaris-tokens": "^7.8.0",
     "@types/react-syntax-highlighter": "^15.5.6",
     "base-64": "^1.0.0",
     "codesandbox": "^2.2.3",
diff --git a/stylelint-polaris/CHANGELOG.md b/stylelint-polaris/CHANGELOG.md
index d71fa7fb707..d2e1eb5b670 100644
--- a/stylelint-polaris/CHANGELOG.md
+++ b/stylelint-polaris/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 14.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`26ab8ce7d`](https://github.com/Shopify/polaris/commit/26ab8ce7df10609316eccc75b7bed6f8cebc9120), [`7514dd1a3`](https://github.com/Shopify/polaris/commit/7514dd1a36a9988ede48085b80c6e7e214f98968), [`16c61668a`](https://github.com/Shopify/polaris/commit/16c61668ac3916aacaeb759f2052d0a3a7ed762e)]:
+  - @shopify/polaris-tokens@7.8.0
+
 ## 14.0.2
 
 ### Patch Changes
diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json
index 4e7d2354867..62363449635 100644
--- a/stylelint-polaris/package.json
+++ b/stylelint-polaris/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/stylelint-polaris",
   "description": "Polaris Design System Stylelint tooling",
-  "version": "14.0.2",
+  "version": "14.0.3",
   "private": false,
   "license": "MIT",
   "author": "Shopify <dev@shopify.com>",
@@ -37,7 +37,7 @@
   "dependencies": {
     "postcss-value-parser": "^4.2.0",
     "postcss-media-query-parser": "^0.2.3",
-    "@shopify/polaris-tokens": "^7.7.0"
+    "@shopify/polaris-tokens": "^7.8.0"
   },
   "peerDependencies": {
     "stylelint": "^14.15.0 || ^15.0.0"

From 2bccc22918eab571136b925bdf7ce07281658248 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 09:15:27 -0600
Subject: [PATCH 053/102] Add public primitive `line-height` token scale
 (#10462)

### WHY are these changes introduced?

Fixes #10441

### WHAT is this pull request doing?

Adds the following values to new public primitive `line-height` token
scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-font-line-height-300` | `size[300]`  | `12px`    |
| `--p-font-line-height-400` | `size[400]`  | `16px`    |
| `--p-font-line-height-500` | `size[500]`  | `20px`    |
| `--p-font-line-height-600` | `size[600]`  | `24px`    |
| `--p-font-line-height-700` | `size[700]`  | `28px`    |
| `--p-font-line-height-800` | `size[800]`  | `32px`    |
| `--p-font-line-height-1000` | `size[1000]`  | `40px`    |
| `--p-font-line-height-1200` | `size[1200]`  | `48px`    |
---
 .changeset/fuzzy-mails-judge.md         |  5 ++++
 polaris-tokens/src/token-groups/font.ts | 33 +++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 .changeset/fuzzy-mails-judge.md

diff --git a/.changeset/fuzzy-mails-judge.md b/.changeset/fuzzy-mails-judge.md
new file mode 100644
index 00000000000..23c16136cba
--- /dev/null
+++ b/.changeset/fuzzy-mails-judge.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `line-height` token scale
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
index e6bf8605ab6..8ad54e9c127 100644
--- a/polaris-tokens/src/token-groups/font.ts
+++ b/polaris-tokens/src/token-groups/font.ts
@@ -1,3 +1,4 @@
+import {size} from '../size';
 import type {MetadataProperties, Experimental} from '../types';
 
 type FontFamilyAlias = 'sans' | 'mono';
@@ -18,6 +19,14 @@ export type FontSizeScale =
 type FontLineHeightScaleExperimental = Experimental<'075'>;
 
 export type FontLineHeightScale =
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '1000'
+  | '1200'
   | '1'
   | '2'
   | '3'
@@ -92,6 +101,30 @@ export const font: {
   'font-weight-bold': {
     value: '700',
   },
+  'font-line-height-300': {
+    value: size[300],
+  },
+  'font-line-height-400': {
+    value: size[400],
+  },
+  'font-line-height-500': {
+    value: size[500],
+  },
+  'font-line-height-600': {
+    value: size[600],
+  },
+  'font-line-height-700': {
+    value: size[700],
+  },
+  'font-line-height-800': {
+    value: size[800],
+  },
+  'font-line-height-1000': {
+    value: size[1000],
+  },
+  'font-line-height-1200': {
+    value: size[1200],
+  },
   'font-line-height-075-experimental': {
     value: '12px',
   },

From 66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 09:51:42 -0600
Subject: [PATCH 054/102] Add public primitive and semantic `border-width`
 token scales (#10434)

### WHY are these changes introduced?

Fixes #10419

### WHAT is this pull request doing?

Adds the following values to new public primitive `border-width` token
scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-border-width-input` | `size[0165]`  | `0.66px`    |
| `--p-border-width-025` | `size[025]`  | `1px`    |
| `--p-border-width-050` | `size['050']`  | `2px`    |
| `--p-border-width-100` | `size[100]`  | `4px`    |

---------

Co-authored-by: Aaron Casanova <aaronccasanova@users.noreply.github.com>
---
 .changeset/sour-turkeys-switch.md         |  5 +++++
 polaris-tokens/src/token-groups/border.ts | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/sour-turkeys-switch.md

diff --git a/.changeset/sour-turkeys-switch.md b/.changeset/sour-turkeys-switch.md
new file mode 100644
index 00000000000..f81eff0e06a
--- /dev/null
+++ b/.changeset/sour-turkeys-switch.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `border-width` token scale
diff --git a/polaris-tokens/src/token-groups/border.ts b/polaris-tokens/src/token-groups/border.ts
index 0e644af92be..9a0c7d13049 100644
--- a/polaris-tokens/src/token-groups/border.ts
+++ b/polaris-tokens/src/token-groups/border.ts
@@ -26,6 +26,10 @@ export type BorderRadiusScale =
 type BorderWidthScaleExperimental = Experimental<'1' | '2'>;
 
 export type BorderWidthScale =
+  | '0165'
+  | '025'
+  | '050'
+  | '100'
   | '1'
   | '2'
   | '3'
@@ -101,6 +105,18 @@ export const border: {
   'border-radius-1_5-experimental': {
     value: '6px',
   },
+  'border-width-0165': {
+    value: size['0165'],
+  },
+  'border-width-025': {
+    value: size['025'],
+  },
+  'border-width-050': {
+    value: size['050'],
+  },
+  'border-width-100': {
+    value: size[100],
+  },
   'border-width-1': {
     value: '1px',
   },

From 52fcdd8fecdc0ab5525c11e549a862fec52b7658 Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
Date: Thu, 14 Sep 2023 13:09:07 -0400
Subject: [PATCH 055/102] Only add 'untriaged' label for issues with 'Bug'
 label (#10466)

Co-authored-by: Sam Rose <11774595+samrose3@users.noreply.github.com>
---
 .github/workflows/untriaged-labeler.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.github/workflows/untriaged-labeler.yml b/.github/workflows/untriaged-labeler.yml
index 85f29866b68..bd7425ab908 100644
--- a/.github/workflows/untriaged-labeler.yml
+++ b/.github/workflows/untriaged-labeler.yml
@@ -4,6 +4,7 @@ on:
   issues:
     types:
       - opened
+      - labeled
 
 jobs:
   label_issues:
@@ -11,8 +12,22 @@ jobs:
     permissions:
       issues: write
     steps:
+
+    - name: Check labels
+      id: check_labels
+      uses: actions/github-script@v5
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
+        script: |
+          const labels = context.payload.issue.labels.map(label => label.name);
+          const hasBugLabel = labels.includes('Bug');
+          const hasUntriagedLabel = labels.includes('untriaged');
+          core.setOutput('hasBugLabel', hasBugLabel);
+          core.setOutput('hasUntriagedLabel', hasUntriagedLabel);
+
       - name: Label issues
         uses: andymckay/labeler@1.0.2
+        if: steps.check_labels.outputs.hasBugLabel && !steps.check_labels.outputs.hasUntriagedLabel
         with:
           add-labels: 'untriaged'
           repo-token: ${{ secrets.GITHUB_TOKEN }}

From 3dd057504f4860eef74d2bd6a25d7b5cbe385255 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 12:41:49 -0600
Subject: [PATCH 056/102] Update `polaris-tokens` tests (#10464)

Makes the mock token names and token group names more generic.

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 polaris-tokens/tests/toStyleSheet.test.js | 48 +++++++++++------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/polaris-tokens/tests/toStyleSheet.test.js b/polaris-tokens/tests/toStyleSheet.test.js
index fd79d5e67e6..1bd5d014f32 100644
--- a/polaris-tokens/tests/toStyleSheet.test.js
+++ b/polaris-tokens/tests/toStyleSheet.test.js
@@ -5,57 +5,55 @@ import {
 } from '../scripts/toStyleSheet';
 
 const mockTokenGroup = {
-  'design-token-1': {
+  'token-name-1': {
     value: 'valueA',
   },
-  'design-token-2': {
+  'token-name-2': {
     value: 'valueB',
   },
 };
 
 const mockMotionTokenGroup = {
-  ...mockTokenGroup,
-  'motion-keyframes-token-1': {
+  'motion-token-1': {
     value: 'valueA',
   },
-  'motion-keyframes-token-2': {
+  'motion-token-2': {
     value: 'valueB',
   },
+  'motion-keyframes-token-1': {
+    value: 'valueC',
+  },
+  'motion-keyframes-token-2': {
+    value: 'valueD',
+  },
 };
-
 const mockTheme = {
-  border: {},
-  color: {},
-  font: {},
-  motion: {},
-  // Note: We don't need to assign mock values to the remaining static tokens.
-  shadow: mockTokenGroup,
-  space: {},
-  zIndex: {},
+  tokenGroupName: mockTokenGroup,
+  motion: mockMotionTokenGroup,
 };
 
-const expectedThemeDecls =
-  '--p-design-token-1:valueA;--p-design-token-2:valueB;';
+const expectedTokenGroupDecls =
+  '--p-token-name-1:valueA;--p-token-name-2:valueB;';
+
+const expectedMotionTokenGroupDecls =
+  '--p-motion-token-1:valueA;--p-motion-token-2:valueB;--p-motion-keyframes-token-1:p-motion-keyframes-token-1;--p-motion-keyframes-token-2:p-motion-keyframes-token-2;';
 
-const expectedKeyframes =
-  '@keyframes p-motion-keyframes-token-1valueA@keyframes p-motion-keyframes-token-2valueB';
+const expectedThemeDecls = `${expectedTokenGroupDecls}${expectedMotionTokenGroupDecls}`;
 
-const expectedKeyframesCustomProperties =
-  '--p-motion-keyframes-token-1:p-motion-keyframes-token-1;--p-motion-keyframes-token-2:p-motion-keyframes-token-2;';
+const expectedMotionKeyframes =
+  '@keyframes p-motion-keyframes-token-1valueC@keyframes p-motion-keyframes-token-2valueD';
 
 describe('getMetaTokenGroupDecls', () => {
   it('creates a string of CSS declarations', () => {
     const tokenGroupDecls = getMetaTokenGroupDecls(mockTokenGroup);
 
-    expect(tokenGroupDecls).toBe(expectedThemeDecls);
+    expect(tokenGroupDecls).toBe(expectedTokenGroupDecls);
   });
 
   it('creates a string of CSS declarations and keyframes at-rules from motion tokens', () => {
     const tokenGroupDecls = getMetaTokenGroupDecls(mockMotionTokenGroup);
 
-    expect(tokenGroupDecls).toBe(
-      `${expectedThemeDecls}${expectedKeyframesCustomProperties}`,
-    );
+    expect(tokenGroupDecls).toBe(expectedMotionTokenGroupDecls);
   });
 });
 
@@ -63,7 +61,7 @@ describe('getKeyframes', () => {
   it('creates a string of keyframes at-rules', () => {
     const keyframes = getKeyframes(mockMotionTokenGroup);
 
-    expect(keyframes).toBe(expectedKeyframes);
+    expect(keyframes).toBe(expectedMotionKeyframes);
   });
 });
 

From 5e073c2095c51154f27740f4c4bc3d00122c0218 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 12:44:10 -0600
Subject: [PATCH 057/102] Add public primitive `height` token scale (#10458)

### WHY are these changes introduced?

Fixes #10437

### WHAT is this pull request doing?

Adds the following values to new public primitive `height` token scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-height-0` | `size['0']`  | `0px`    |
| `--p-height-025` | `size['025']`  | `1px`    |
| `--p-height-050` | `size['050']`  | `2px`    |
| `--p-height-100` | `size[100]`  | `4px`    |
| `--p-height-150` | `size[150]`  | `6px`    |
| `--p-height-200` | `size[200]`  | `8px`    |
| `--p-height-300` | `size[300]`  | `12px`    |
| `--p-height-400` | `size[400]`  | `16px`    |
| `--p-height-500` | `size[500]`  | `20px`    |
| `--p-height-600` | `size[600]`  | `24px`    |
| `--p-height-700` | `size[700]`  | `28px`    |
| `--p-height-800` | `size[800]`  | `32px`    |
| `--p-height-900` | `size[900]`  | `36px`    |
| `--p-height-1000` | `size[1000]`  | `40px`    |
| `--p-height-1200` | `size[1200]`  | `48px`    |
| `--p-height-1600` | `size[1600]`  | `64px`    |
| `--p-height-2000` | `size[2000]`  | `80px`    |
| `--p-height-2400` | `size[2400]`  | `96px`    |
| `--p-height-2800` | `size[2800]`  | `112px`    |
| `--p-height-3200` | `size[3200]`  | `128px`    |

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/fast-bulldogs-raise.md         |  5 ++
 polaris-for-vscode/src/server.ts          |  1 +
 polaris-tokens/src/index.ts               |  6 ++
 polaris-tokens/src/themes/base.ts         |  2 +
 polaris-tokens/src/token-groups/height.ts | 95 +++++++++++++++++++++++
 5 files changed, 109 insertions(+)
 create mode 100644 .changeset/fast-bulldogs-raise.md
 create mode 100644 polaris-tokens/src/token-groups/height.ts

diff --git a/.changeset/fast-bulldogs-raise.md b/.changeset/fast-bulldogs-raise.md
new file mode 100644
index 00000000000..96e142dc5e2
--- /dev/null
+++ b/.changeset/fast-bulldogs-raise.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `height` token scale
diff --git a/polaris-for-vscode/src/server.ts b/polaris-for-vscode/src/server.ts
index c467521d8bc..be5587bd90d 100644
--- a/polaris-for-vscode/src/server.ts
+++ b/polaris-for-vscode/src/server.ts
@@ -80,6 +80,7 @@ const tokenGroupPatterns: TokenGroupPatterns = {
   color:
     /color|background|shadow|border|column-rule|filter|opacity|outline|text-decoration/,
   font: /font|line-height/,
+  height: /height|min-height|max-height/,
   motion: /animation/,
   shadow: /shadow/,
   space: /margin|padding|gap|top|left|right|bottom/,
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index a30f1eea716..c411809a27c 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -42,6 +42,12 @@ export type {
   FontWeightAlias,
 } from './token-groups/font';
 
+export type {
+  HeightTokenGroup,
+  HeightTokenName,
+  HeightScale,
+} from './token-groups/height';
+
 export type {
   MotionTokenGroup,
   MotionTokenName,
diff --git a/polaris-tokens/src/themes/base.ts b/polaris-tokens/src/themes/base.ts
index d84b8a067a1..6ee9738febe 100644
--- a/polaris-tokens/src/themes/base.ts
+++ b/polaris-tokens/src/themes/base.ts
@@ -3,6 +3,7 @@ import {border} from '../token-groups/border';
 import {breakpoints} from '../token-groups/breakpoints';
 import {color} from '../token-groups/color';
 import {font} from '../token-groups/font';
+import {height} from '../token-groups/height';
 import {motion} from '../token-groups/motion';
 import {shadow} from '../token-groups/shadow';
 import {space} from '../token-groups/space';
@@ -17,6 +18,7 @@ export const metaThemeBase = createMetaThemeBase({
   border: tokensToRems(border),
   color,
   font: tokensToRems(font),
+  height: tokensToRems(height),
   motion,
   shadow: tokensToRems(shadow),
   space: tokensToRems(space),
diff --git a/polaris-tokens/src/token-groups/height.ts b/polaris-tokens/src/token-groups/height.ts
new file mode 100644
index 00000000000..bff3bb4060e
--- /dev/null
+++ b/polaris-tokens/src/token-groups/height.ts
@@ -0,0 +1,95 @@
+import {size} from '../size';
+import type {MetadataProperties} from '../types';
+
+export type HeightScale =
+  | '0'
+  | '025'
+  | '050'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '1000'
+  | '1200'
+  | '1600'
+  | '2000'
+  | '2400'
+  | '2800'
+  | '3200';
+
+export type HeightTokenName = `height-${HeightScale}`;
+
+export type HeightTokenGroup = {
+  [TokenName in HeightTokenName]: string;
+};
+
+export const height: {
+  [TokenName in HeightTokenName]: MetadataProperties;
+} = {
+  'height-0': {
+    value: size[0],
+  },
+  'height-025': {
+    value: size['025'],
+  },
+  'height-050': {
+    value: size['050'],
+  },
+  'height-100': {
+    value: size[100],
+  },
+  'height-150': {
+    value: size[150],
+  },
+  'height-200': {
+    value: size[200],
+  },
+  'height-300': {
+    value: size[300],
+  },
+  'height-400': {
+    value: size[400],
+  },
+  'height-500': {
+    value: size[500],
+  },
+  'height-600': {
+    value: size[600],
+  },
+  'height-700': {
+    value: size[700],
+  },
+  'height-800': {
+    value: size[800],
+  },
+  'height-900': {
+    value: size[900],
+  },
+  'height-1000': {
+    value: size[1000],
+  },
+  'height-1200': {
+    value: size[1200],
+  },
+  'height-1600': {
+    value: size[1600],
+  },
+  'height-2000': {
+    value: size[2000],
+  },
+  'height-2400': {
+    value: size[2400],
+  },
+  'height-2800': {
+    value: size[2800],
+  },
+  'height-3200': {
+    value: size[3200],
+  },
+};

From c07de6ca4aed19c643b2681d498432fd7414475e Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 12:46:26 -0600
Subject: [PATCH 058/102] Add public primitive `width` token scale (#10460)

### WHY are these changes introduced?

Fixes #10438

### WHAT is this pull request doing?

Adds the following values to new public primitive `width` token scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-width-0` | `size['0']`  | `0px`    |
| `--p-width-025` | `size['025']`  | `1px`    |
| `--p-width-050` | `size['050']`  | `2px`    |
| `--p-width-100` | `size[100]`  | `4px`    |
| `--p-width-150` | `size[150]`  | `6px`    |
| `--p-width-200` | `size[200]`  | `8px`    |
| `--p-width-300` | `size[300]`  | `12px`    |
| `--p-width-400` | `size[400]`  | `16px`    |
| `--p-width-500` | `size[500]`  | `20px`    |
| `--p-width-600` | `size[600]`  | `24px`    |
| `--p-width-700` | `size[700]`  | `28px`    |
| `--p-width-800` | `size[800]`  | `32px`    |
| `--p-width-900` | `size[900]`  | `36px`    |
| `--p-width-1000` | `size[1000]`  | `40px`    |
| `--p-width-1200` | `size[1200]`  | `48px`    |
| `--p-width-1600` | `size[1600]`  | `64px`    |
| `--p-width-2000` | `size[2000]`  | `80px`    |
| `--p-width-2400` | `size[2400]`  | `96px`    |
| `--p-width-2800` | `size[2800]`  | `112px`    |
| `--p-width-3200` | `size[3200]`  | `128px`    |

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/twelve-radios-stare.md        |  5 ++
 polaris-for-vscode/src/server.ts         |  1 +
 polaris-tokens/src/index.ts              |  6 ++
 polaris-tokens/src/themes/base.ts        |  2 +
 polaris-tokens/src/token-groups/width.ts | 95 ++++++++++++++++++++++++
 5 files changed, 109 insertions(+)
 create mode 100644 .changeset/twelve-radios-stare.md
 create mode 100644 polaris-tokens/src/token-groups/width.ts

diff --git a/.changeset/twelve-radios-stare.md b/.changeset/twelve-radios-stare.md
new file mode 100644
index 00000000000..eb14861ac2d
--- /dev/null
+++ b/.changeset/twelve-radios-stare.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `width` token scale
diff --git a/polaris-for-vscode/src/server.ts b/polaris-for-vscode/src/server.ts
index be5587bd90d..d00861f4418 100644
--- a/polaris-for-vscode/src/server.ts
+++ b/polaris-for-vscode/src/server.ts
@@ -84,6 +84,7 @@ const tokenGroupPatterns: TokenGroupPatterns = {
   motion: /animation/,
   shadow: /shadow/,
   space: /margin|padding|gap|top|left|right|bottom/,
+  width: /width|min-width|max-width/,
   zIndex: /z-index/,
 };
 
diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index c411809a27c..c9727021bf7 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -67,6 +67,12 @@ export type {
   SpaceScale,
 } from './token-groups/space';
 
+export type {
+  WidthTokenGroup,
+  WidthTokenName,
+  WidthScale,
+} from './token-groups/width';
+
 export type {
   ZIndexTokenGroup,
   ZIndexTokenName,
diff --git a/polaris-tokens/src/themes/base.ts b/polaris-tokens/src/themes/base.ts
index 6ee9738febe..e91c21af57d 100644
--- a/polaris-tokens/src/themes/base.ts
+++ b/polaris-tokens/src/themes/base.ts
@@ -7,6 +7,7 @@ import {height} from '../token-groups/height';
 import {motion} from '../token-groups/motion';
 import {shadow} from '../token-groups/shadow';
 import {space} from '../token-groups/space';
+import {width} from '../token-groups/width';
 import {zIndex} from '../token-groups/zIndex';
 
 import type {MetaThemeShape} from './types';
@@ -22,5 +23,6 @@ export const metaThemeBase = createMetaThemeBase({
   motion,
   shadow: tokensToRems(shadow),
   space: tokensToRems(space),
+  width: tokensToRems(width),
   zIndex,
 });
diff --git a/polaris-tokens/src/token-groups/width.ts b/polaris-tokens/src/token-groups/width.ts
new file mode 100644
index 00000000000..242b6c29740
--- /dev/null
+++ b/polaris-tokens/src/token-groups/width.ts
@@ -0,0 +1,95 @@
+import {size} from '../size';
+import type {MetadataProperties} from '../types';
+
+export type WidthScale =
+  | '0'
+  | '025'
+  | '050'
+  | '100'
+  | '150'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '1000'
+  | '1200'
+  | '1600'
+  | '2000'
+  | '2400'
+  | '2800'
+  | '3200';
+
+export type WidthTokenName = `width-${WidthScale}`;
+
+export type WidthTokenGroup = {
+  [TokenName in WidthTokenName]: string;
+};
+
+export const width: {
+  [TokenName in WidthTokenName]: MetadataProperties;
+} = {
+  'width-0': {
+    value: size[0],
+  },
+  'width-025': {
+    value: size['025'],
+  },
+  'width-050': {
+    value: size['050'],
+  },
+  'width-100': {
+    value: size[100],
+  },
+  'width-150': {
+    value: size[150],
+  },
+  'width-200': {
+    value: size[200],
+  },
+  'width-300': {
+    value: size[300],
+  },
+  'width-400': {
+    value: size[400],
+  },
+  'width-500': {
+    value: size[500],
+  },
+  'width-600': {
+    value: size[600],
+  },
+  'width-700': {
+    value: size[700],
+  },
+  'width-800': {
+    value: size[800],
+  },
+  'width-900': {
+    value: size[900],
+  },
+  'width-1000': {
+    value: size[1000],
+  },
+  'width-1200': {
+    value: size[1200],
+  },
+  'width-1600': {
+    value: size[1600],
+  },
+  'width-2000': {
+    value: size[2000],
+  },
+  'width-2400': {
+    value: size[2400],
+  },
+  'width-2800': {
+    value: size[2800],
+  },
+  'width-3200': {
+    value: size[3200],
+  },
+};

From 03342454611a71a0a57e48cf8a013c1ca27837b3 Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Thu, 14 Sep 2023 14:30:44 -0600
Subject: [PATCH 059/102] Add public primitive `font-size` token scale (#10474)

### WHY are these changes introduced?

Fixes #10475
Part of #10439

### WHAT is this pull request doing?

Adds the following values to new public primitive `font-size` token
scale:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-font-size-275` | `size[275]`  | `11px`    |
| ~`--p-font-size-300`~ | ~`size[300]`~  | ~`12px`~   |
| `--p-font-size-325` | `size[325]`  | `13px`    |
| `--p-font-size-350` | `size[350]`  | `14px`    |
| ~`--p-font-size-400`~ | ~`size[400]`~  | ~`16px`~    |
| ~`--p-font-size-500`~ | ~`size[500]`~  | ~`20px`~    |
| ~`--p-font-size-600`~ | ~`size[600]`~  | ~`24px`~    |
| `--p-font-size-750` | `size[750]`  | `30px`    |
| `--p-font-size-900` | `size[900]`  | `36px`    |
| `--p-font-size-1000` | `size[1000]`  | `40px`    |

> [!NOTE]
> The following values were not added since they conflict with existing
tokens with the same name. These tokens will have their values updated
in the next major version v12:

| New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
| `--p-font-size-300` | `size[300]`  | `12px`  |
| `--p-font-size-400` | `size[400]`  | `16px`    |
| `--p-font-size-500` | `size[500]`  | `20px`    |
| `--p-font-size-600` | `size[600]`  | `24px`    |
---
 .changeset/healthy-scissors-hope.md     |  5 +++++
 polaris-tokens/src/token-groups/font.ts | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 .changeset/healthy-scissors-hope.md

diff --git a/.changeset/healthy-scissors-hope.md b/.changeset/healthy-scissors-hope.md
new file mode 100644
index 00000000000..b265650d7b3
--- /dev/null
+++ b/.changeset/healthy-scissors-hope.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Added public primitive `font-size` token scale
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/token-groups/font.ts
index 8ad54e9c127..9b63c4c42a5 100644
--- a/polaris-tokens/src/token-groups/font.ts
+++ b/polaris-tokens/src/token-groups/font.ts
@@ -6,6 +6,12 @@ type FontFamilyAlias = 'sans' | 'mono';
 type FontSizeScaleExperimental = Experimental<'70' | '80'>;
 
 export type FontSizeScale =
+  | '275'
+  | '325'
+  | '350'
+  | '750'
+  | '900'
+  | '1000'
   | '75'
   | '100'
   | '200'
@@ -59,6 +65,24 @@ export const font: {
     value:
       "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
   },
+  'font-size-275': {
+    value: size[275],
+  },
+  'font-size-325': {
+    value: size[325],
+  },
+  'font-size-350': {
+    value: size[350],
+  },
+  'font-size-750': {
+    value: size[750],
+  },
+  'font-size-900': {
+    value: size[900],
+  },
+  'font-size-1000': {
+    value: size[1000],
+  },
   'font-size-70-experimental': {
     value: '11px',
   },

From 5f94cae98e2a41ca33fae3afce7ad078132609e0 Mon Sep 17 00:00:00 2001
From: Matt Kubej <86790511+mattkubej@users.noreply.github.com>
Date: Thu, 14 Sep 2023 16:59:46 -0400
Subject: [PATCH 060/102] [Pagination] introduce type prop and table type
 (#10310)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Introduces a table layout to the `Pagination` component, which would
then be utilized by `IndexTable`

Design:
<img width="1128" alt="Screenshot 2023-09-11 at 9 56 40 PM"
src="https://github.com/Shopify/polaris/assets/86790511/f0f3cb17-7dbf-47eb-9386-cf1fa1d83295">


[Figma](https://www.figma.com/file/w0Fv15A3zvWVyilpHxTxBn/Index-filters-and-search-post-release?node-id=975%3A142279&mode=dev)

### WHAT is this pull request doing?

Introduces `type` prop to `Pagination`. A value of `page` results in the
existing aesthetic with no changes. A value of `table` results in the
new table aesthetic, which is intended to be utilized by the
`IndexTable`.

### How to 🎩


[Storybook](https://storybook.web.polaris-pagination-table-format.matt-kubej.us.spin.dev/?path=/story/all-components-pagination--with-table-type&globals=polarisSummerEditions2023:true;polarisSummerEditions2023ShadowBevelOptOut:true)

- Validate the Storybook matches the specifications
- Validate that there are no regressions to the existing `page`
Pagination configurations.

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/curvy-peas-flow.md                 |   5 +
 .../components/ButtonGroup/ButtonGroup.scss   |  14 +-
 .../ButtonGroup/ButtonGroup.stories.tsx       |  16 +-
 .../src/components/Pagination/Pagination.scss |  39 ++
 .../Pagination/Pagination.stories.tsx         |  24 +
 .../src/components/Pagination/Pagination.tsx  |  42 ++
 .../Pagination/tests/Pagination.test.tsx      | 441 +++++++++++-------
 .../components/navigation/pagination.md       |   5 +-
 .../examples/pagination-with-table-type.tsx   |  29 ++
 9 files changed, 418 insertions(+), 197 deletions(-)
 create mode 100644 .changeset/curvy-peas-flow.md
 create mode 100644 polaris.shopify.com/pages/examples/pagination-with-table-type.tsx

diff --git a/.changeset/curvy-peas-flow.md b/.changeset/curvy-peas-flow.md
new file mode 100644
index 00000000000..d0b62bb2175
--- /dev/null
+++ b/.changeset/curvy-peas-flow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added a `type` prop to `Pagination` to support a table row layout 
diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
index 697ffabb8bf..b3270b7b182 100644
--- a/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
+++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.scss
@@ -43,23 +43,11 @@
     z-index: var(--pc-button-group-item);
     margin-top: 0;
     margin-left: 0;
-    line-height: normal;
-
-    #{$se23} & {
-      // stylelint-disable-next-line polaris/z-index/declaration-property-value-allowed-list -- se23 temporary styles
-      z-index: unset;
-    }
+    line-height: 1;
 
     &:not(:first-child) {
       margin-left: calc(-1 * var(--p-space-025));
     }
-
-    // stylelint-disable-next-line -- se23 specific styling
-    + .Item:not(.selected) > button {
-      #{$se23} & {
-        clip-path: inset(0 0 0 var(--p-space-025));
-      }
-    }
   }
 
   .Item-focused {
diff --git a/polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx b/polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
index b6c320fc189..758ea9af374 100644
--- a/polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/polaris-react/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Button, ButtonGroup} from '@shopify/polaris';
+import {Button, ButtonGroup, Icon} from '@shopify/polaris';
+import {DeleteMinor} from '@shopify/polaris-icons';
 
 export default {
   component: ButtonGroup,
@@ -28,9 +29,16 @@ export function WithSegmentedButtons() {
   return (
     <div>
       <ButtonGroup segmented>
-        <Button>Bold</Button>
-        <Button pressed>Italic</Button>
-        <Button>Underline</Button>
+        <Button size="slim">Bold</Button>
+        <Button size="slim" pressed>
+          Italic
+        </Button>
+        <Button size="slim">Underline</Button>
+        <Button
+          size="slim"
+          icon={<Icon source={DeleteMinor} />}
+          accessibilityLabel="Delete"
+        />
       </ButtonGroup>
       <br />
       <ButtonGroup segmented>
diff --git a/polaris-react/src/components/Pagination/Pagination.scss b/polaris-react/src/components/Pagination/Pagination.scss
index 1f4ca92a513..2ca0f14768f 100644
--- a/polaris-react/src/components/Pagination/Pagination.scss
+++ b/polaris-react/src/components/Pagination/Pagination.scss
@@ -24,4 +24,43 @@
       }
     }
   }
+
+  &.table {
+    button {
+      #{$se23} & {
+        --button-min-height: var(--p-space-6);
+        background-color: var(--p-color-bg-subdued);
+        min-height: var(--button-min-height);
+        min-width: var(--button-min-height);
+        height: var(--button-min-height);
+        width: var(--button-min-height);
+        padding: unset;
+
+        /* stylelint-disable selector-max-combinators, selector-max-compound-selectors, max-nesting-depth -- cleaner until se23 clean up */
+        &:hover {
+          background-color: var(--p-color-bg-strong-hover);
+
+          svg {
+            fill: var(--p-color-icon-hover);
+          }
+        }
+
+        &:active,
+        &:focus {
+          background-color: var(--p-color-bg-strong-active);
+
+          svg {
+            fill: var(--p-color-icon-active);
+          }
+        }
+
+        &:disabled {
+          svg {
+            fill: var(--p-color-icon-disabled);
+          }
+        }
+        /* stylelint-enable */
+      }
+    }
+  }
 }
diff --git a/polaris-react/src/components/Pagination/Pagination.stories.tsx b/polaris-react/src/components/Pagination/Pagination.stories.tsx
index ae7f1efbd66..5f824582c2d 100644
--- a/polaris-react/src/components/Pagination/Pagination.stories.tsx
+++ b/polaris-react/src/components/Pagination/Pagination.stories.tsx
@@ -57,3 +57,27 @@ export function WithLabel() {
     />
   );
 }
+
+export function WithTableType() {
+  return (
+    <div
+      style={{
+        maxWidth: 'calc(700px + (2 * var(--p-space-4)))',
+        margin: '0 auto',
+        border: '1px solid var(--p-color-border)',
+      }}
+    >
+      <Pagination
+        onPrevious={() => {
+          console.log('Previous');
+        }}
+        onNext={() => {
+          console.log('Next');
+        }}
+        type="table"
+        hasNext
+        label="1-50 of 8,450 orders"
+      />
+    </div>
+  );
+}
diff --git a/polaris-react/src/components/Pagination/Pagination.tsx b/polaris-react/src/components/Pagination/Pagination.tsx
index e66da28dc3a..e1660bb1c9d 100644
--- a/polaris-react/src/components/Pagination/Pagination.tsx
+++ b/polaris-react/src/components/Pagination/Pagination.tsx
@@ -11,6 +11,8 @@ import {Text} from '../Text';
 import {Tooltip} from '../Tooltip';
 import {Box} from '../Box';
 import {useFeatures} from '../../utilities/features';
+import {HorizontalStack} from '../HorizontalStack';
+import {classNames} from '../../utilities/css';
 
 import styles from './Pagination.scss';
 
@@ -46,6 +48,8 @@ export interface PaginationProps {
   onPrevious?(): void;
   /** Text to provide more context in between the arrow buttons */
   label?: React.ReactNode;
+  /** Layout structure of the component */
+  type?: 'page' | 'table';
 }
 
 export function Pagination({
@@ -62,6 +66,7 @@ export function Pagination({
   accessibilityLabel,
   accessibilityLabels,
   label,
+  type = 'page',
 }: PaginationProps) {
   const i18n = useI18n();
   const {polarisSummerEditions2023} = useFeatures();
@@ -160,6 +165,43 @@ export function Pagination({
       />
     ));
 
+  if (type === 'table') {
+    const labelMarkup = label ? (
+      <Text as="span" variant="bodySm" fontWeight="medium">
+        {label}
+      </Text>
+    ) : null;
+
+    return (
+      <nav
+        aria-label={navLabel}
+        ref={node}
+        className={classNames(styles.Pagination, styles.table)}
+      >
+        {previousButtonEvents}
+        {nextButtonEvents}
+        <Box
+          background="bg-subdued"
+          paddingBlockStart="1_5-experimental"
+          paddingBlockEnd="1_5-experimental"
+          paddingInlineStart="3"
+          paddingInlineEnd="2"
+        >
+          <HorizontalStack
+            align={labelMarkup ? 'space-between' : 'end'}
+            blockAlign="center"
+          >
+            {labelMarkup}
+            <ButtonGroup segmented>
+              {constructedPrevious}
+              {constructedNext}
+            </ButtonGroup>
+          </HorizontalStack>
+        </Box>
+      </nav>
+    );
+  }
+
   const labelTextMarkup =
     hasNext && hasPrevious ? (
       <span>{label}</span>
diff --git a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx
index c46e3386010..b6f84900b0b 100644
--- a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx
+++ b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx
@@ -9,6 +9,7 @@ import {ButtonGroup} from '../../ButtonGroup';
 import {TextField} from '../../TextField';
 import {Text} from '../../Text';
 import {Tooltip} from '../../Tooltip';
+import {HorizontalStack} from '../../HorizontalStack';
 import en from '../../../../locales/en.json';
 
 interface HandlerMap {
@@ -49,219 +50,301 @@ describe('<Pagination />', () => {
     removeEventListener.mockRestore();
   });
 
-  describe('tooltip', () => {
-    it('renders a tooltip if nextTooltip is provided and hasNext is true', () => {
-      const pagination = mountWithApp(<Pagination nextTooltip="k" hasNext />);
-      expect(pagination).toContainReactComponent(Tooltip, {
-        content: 'k',
+  describe.each(['page' as const, 'table' as const])(
+    `shared functionality - type: %s`,
+    (type) => {
+      describe('tooltip', () => {
+        it('renders a tooltip if nextTooltip is provided and hasNext is true', () => {
+          const pagination = mountWithApp(
+            <Pagination nextTooltip="k" hasNext type={type} />,
+          );
+          expect(pagination).toContainReactComponent(Tooltip, {
+            content: 'k',
+          });
+        });
+
+        it('does not render a tooltip if nextTooltip is provided and hasNext is false', () => {
+          const pagination = mountWithApp(
+            <Pagination nextTooltip="k" hasNext={false} type={type} />,
+          );
+          expect(pagination).not.toContainReactComponent(Tooltip);
+        });
+
+        it('renders a tooltip if previousToolTip is provided and hasPrevious is true', () => {
+          const pagination = mountWithApp(
+            <Pagination previousTooltip="j" hasPrevious />,
+          );
+          expect(pagination).toContainReactComponent(Tooltip, {
+            content: 'j',
+          });
+        });
+
+        it('does not render  tooltip if previousToolTip is provided and hasPrevious is false', () => {
+          const pagination = mountWithApp(
+            <Pagination previousTooltip="j" hasPrevious={false} type={type} />,
+          );
+          expect(pagination).not.toContainReactComponent(Tooltip);
+        });
+
+        it('renders a tooltip for nextToolTip and previousToolTip when they are provided and hasPrevious and hasNext are true', () => {
+          const pagination = mountWithApp(
+            <Pagination
+              previousTooltip="j"
+              nextTooltip="k"
+              hasPrevious
+              hasNext
+              type={type}
+            />,
+          );
+
+          expect(pagination).toContainReactComponentTimes(Tooltip, 2);
+        });
       });
-    });
-
-    it('does not render a tooltip if nextTooltip is provided and hasNext is false', () => {
-      const pagination = mountWithApp(
-        <Pagination nextTooltip="k" hasNext={false} />,
-      );
-      expect(pagination).not.toContainReactComponent(Tooltip);
-    });
 
-    it('renders a tooltip if previousToolTip is provided and hasPrevious is true', () => {
-      const pagination = mountWithApp(
-        <Pagination previousTooltip="j" hasPrevious />,
-      );
-      expect(pagination).toContainReactComponent(Tooltip, {
-        content: 'j',
+      describe('accessibilityLabel', () => {
+        it('inserts prop as aria-label', () => {
+          const pagination = mountWithApp(
+            <Pagination accessibilityLabel="test" type={type} />,
+          );
+          expect(pagination).toContainReactComponent('nav', {
+            'aria-label': 'test',
+          });
+        });
+
+        it('uses default value for aria-label', () => {
+          const pagination = mountWithApp(<Pagination type={type} />);
+
+          expect(pagination).toContainReactComponent('nav', {
+            'aria-label': 'Pagination',
+          });
+        });
       });
-    });
-
-    it('does not render  tooltip if previousToolTip is provided and hasPrevious is false', () => {
-      const pagination = mountWithApp(
-        <Pagination previousTooltip="j" hasPrevious={false} />,
-      );
-      expect(pagination).not.toContainReactComponent(Tooltip);
-    });
-
-    it('renders a tooltip for nextToolTip and previousToolTip when they are provided and hasPrevious and hasNext are true', () => {
-      const pagination = mountWithApp(
-        <Pagination previousTooltip="j" nextTooltip="k" hasPrevious hasNext />,
-      );
-
-      expect(pagination).toContainReactComponentTimes(Tooltip, 2);
-    });
-  });
 
-  describe('accessibilityLabel', () => {
-    it('inserts prop as aria-label', () => {
-      const pagination = mountWithApp(<Pagination accessibilityLabel="test" />);
-      expect(pagination).toContainReactComponent('nav', {'aria-label': 'test'});
-    });
-
-    it('uses default value for aria-label', () => {
-      const pagination = mountWithApp(<Pagination />);
+      describe('accessibilityLabels', () => {
+        const defaultProps = {
+          accessibilityLabels: {
+            previous: 'Previous orders page',
+            next: 'Next orders page',
+          },
+        };
+
+        it('passes accessibilityLabels to Button', () => {
+          const pagination = mountWithApp(
+            <Pagination
+              {...defaultProps}
+              previousURL="prev"
+              nextURL="next"
+              type={type}
+            />,
+          );
+
+          expect(pagination).toContainReactComponent(Button, {
+            accessibilityLabel: defaultProps.accessibilityLabels.previous,
+          });
+
+          expect(pagination).toContainReactComponent(Button, {
+            accessibilityLabel: defaultProps.accessibilityLabels.next,
+          });
+        });
+
+        it('renders default accessibilityLabels on Button', () => {
+          const pagination = mountWithApp(
+            <Pagination previousURL="prev" nextURL="next" type={type} />,
+          );
+
+          expect(pagination).toContainReactComponent(Button, {
+            accessibilityLabel: en.Polaris.Pagination.previous,
+          });
+
+          expect(pagination).toContainReactComponent(Button, {
+            accessibilityLabel: en.Polaris.Pagination.next,
+          });
+        });
+      });
 
-      expect(pagination).toContainReactComponent('nav', {
-        'aria-label': 'Pagination',
+      describe('label', () => {
+        it('renders as text', () => {
+          const pagination = mountWithApp(
+            <Pagination label="test" type={type} />,
+          );
+          expect(pagination.text()).toContain('test');
+        });
       });
-    });
-  });
 
-  describe('accessibilityLabels', () => {
-    const defaultProps = {
-      accessibilityLabels: {
-        previous: 'Previous orders page',
-        next: 'Next orders page',
-      },
-    };
+      it('adds a keypress event for nextKeys', () => {
+        const spy = jest.fn();
+        mountWithApp(
+          <Pagination
+            hasNext
+            nextKeys={[Key.KeyK]}
+            onNext={spy}
+            nextTooltip="k"
+            type={type}
+          />,
+        );
 
-    it('passes accessibilityLabels to Button', () => {
-      const pagination = mountWithApp(
-        <Pagination {...defaultProps} previousURL="prev" nextURL="next" />,
-      );
+        listenerMap.keyup({keyCode: Key.KeyK});
 
-      expect(pagination).toContainReactComponent(Button, {
-        accessibilityLabel: defaultProps.accessibilityLabels.previous,
+        expect(spy).toHaveBeenCalledTimes(1);
       });
 
-      expect(pagination).toContainReactComponent(Button, {
-        accessibilityLabel: defaultProps.accessibilityLabels.next,
-      });
-    });
+      it('adds a keypress event for previousKeys', () => {
+        const spy = jest.fn();
+        mountWithApp(
+          <Pagination
+            hasPrevious
+            previousKeys={[Key.KeyJ]}
+            onPrevious={spy}
+            previousTooltip="j"
+            type={type}
+          />,
+        );
 
-    it('renders default accessibilityLabels on Button', () => {
-      const pagination = mountWithApp(
-        <Pagination previousURL="prev" nextURL="next" />,
-      );
+        listenerMap.keyup({keyCode: Key.KeyJ});
 
-      expect(pagination).toContainReactComponent(Button, {
-        accessibilityLabel: en.Polaris.Pagination.previous,
+        expect(spy).toHaveBeenCalledTimes(1);
       });
 
-      expect(pagination).toContainReactComponent(Button, {
-        accessibilityLabel: en.Polaris.Pagination.next,
+      describe('input elements', () => {
+        it('will not call paginations callback on keypress if a input element is focused', () => {
+          const spy = jest.fn();
+          const wrapper = mountWithApp(
+            <div>
+              <TextField
+                label="test"
+                value=""
+                onChange={noop}
+                autoComplete="off"
+              />
+              <Pagination
+                nextTooltip="j"
+                previousKeys={[Key.KeyJ]}
+                onPrevious={spy}
+                previousTooltip="j"
+                type={type}
+              />
+            </div>,
+          );
+          focusElement(wrapper, 'input');
+          listenerMap.keyup({keyCode: Key.KeyJ});
+          expect(spy).not.toHaveBeenCalled();
+        });
       });
-    });
-  });
 
-  describe('label', () => {
-    it('renders as text', () => {
-      const pagination = mountWithApp(<Pagination label="test" />);
-      expect(pagination.text()).toContain('test');
-    });
-
-    it('has subdued text without next and previous pages', () => {
-      const pagination = mountWithApp(<Pagination label="test" />);
-
-      expect(pagination).toContainReactComponent(Text, {
-        color: 'subdued',
+      describe('nextURL/previousURL', () => {
+        let pagination: CustomRoot<any, any>;
+
+        it('navigates the browser to the anchors target when the designated key is pressed', () => {
+          const spy = jest.fn();
+          pagination = mountWithApp(
+            <Pagination
+              hasPrevious
+              previousKeys={[Key.KeyJ]}
+              previousTooltip="j"
+              previousURL="https://www.google.com"
+              type={type}
+            />,
+          );
+          const anchor = pagination.find('a')!.domNode as HTMLAnchorElement;
+          anchor.click = spy;
+          listenerMap.keyup({keyCode: Key.KeyJ});
+
+          expect(spy).toHaveBeenCalledTimes(1);
+        });
+
+        it('does not navigate the browser when hasNext or hasPrevious is false', () => {
+          const anchorClickSpy = jest.fn();
+          pagination = mountWithApp(
+            <Pagination
+              hasPrevious={false}
+              previousKeys={[Key.KeyJ]}
+              previousTooltip="j"
+              previousURL="https://www.google.com"
+              type={type}
+            />,
+          );
+
+          const anchor = pagination.find('a')!.domNode as HTMLAnchorElement;
+          anchor.click = anchorClickSpy;
+          listenerMap.keyup({keyCode: Key.KeyJ});
+
+          expect(anchorClickSpy).toHaveBeenCalledTimes(0);
+        });
       });
-    });
-  });
-
-  it('adds a keypress event for nextKeys', () => {
-    const spy = jest.fn();
-    mountWithApp(
-      <Pagination hasNext nextKeys={[Key.KeyK]} onNext={spy} nextTooltip="k" />,
-    );
-
-    listenerMap.keyup({keyCode: Key.KeyK});
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
 
-  it('adds a keypress event for previousKeys', () => {
-    const spy = jest.fn();
-    mountWithApp(
-      <Pagination
-        hasPrevious
-        previousKeys={[Key.KeyJ]}
-        onPrevious={spy}
-        previousTooltip="j"
-      />,
-    );
+      it('uses Button and ButtonGroup as subcomponents', () => {
+        const pagination = mountWithApp(
+          <Pagination nextURL="/next" previousURL="/prev" type={type} />,
+        );
 
-    listenerMap.keyup({keyCode: Key.KeyJ});
-
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
-
-  describe('input elements', () => {
-    it('will not call paginations callback on keypress if a input element is focused', () => {
-      const spy = jest.fn();
-      const wrapper = mountWithApp(
-        <div>
-          <TextField label="test" value="" onChange={noop} autoComplete="off" />
-          <Pagination
-            nextTooltip="j"
-            previousKeys={[Key.KeyJ]}
-            onPrevious={spy}
-            previousTooltip="j"
-          />
-        </div>,
-      );
-      focusElement(wrapper, 'input');
-      listenerMap.keyup({keyCode: Key.KeyJ});
-      expect(spy).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('nextURL/previousURL', () => {
-    let pagination: CustomRoot<any, any>;
+        expect(pagination).toContainReactComponent(ButtonGroup, {
+          segmented: true,
+        });
+        expect(pagination).toContainReactComponent(Button, {url: '/prev'});
+        expect(pagination).toContainReactComponent(Button, {url: '/next'});
+      });
+    },
+  );
 
-    it('navigates the browser to the anchors target when the designated key is pressed', () => {
-      const spy = jest.fn();
-      pagination = mountWithApp(
+  describe('type: page', () => {
+    it('the ButtonGroup is not segmented when there is a label', () => {
+      const pagination = mountWithApp(
         <Pagination
-          hasPrevious
-          previousKeys={[Key.KeyJ]}
-          previousTooltip="j"
-          previousURL="https://www.google.com"
+          nextURL="/next"
+          previousURL="/prev"
+          label="Hello, world!"
+          type="page"
         />,
+        {features: {polarisSummerEditions2023: false}},
       );
-      const anchor = pagination.find('a')!.domNode as HTMLAnchorElement;
-      anchor.click = spy;
-      listenerMap.keyup({keyCode: Key.KeyJ});
 
-      expect(spy).toHaveBeenCalledTimes(1);
+      expect(pagination).toContainReactComponent(ButtonGroup, {
+        segmented: false,
+      });
     });
 
-    it('does not navigate the browser when hasNext or hasPrevious is false', () => {
-      const anchorClickSpy = jest.fn();
-      pagination = mountWithApp(
-        <Pagination
-          hasPrevious={false}
-          previousKeys={[Key.KeyJ]}
-          previousTooltip="j"
-          previousURL="https://www.google.com"
-        />,
-      );
-
-      const anchor = pagination.find('a')!.domNode as HTMLAnchorElement;
-      anchor.click = anchorClickSpy;
-      listenerMap.keyup({keyCode: Key.KeyJ});
+    describe('label', () => {
+      it('has subdued text without next and previous pages', () => {
+        const pagination = mountWithApp(
+          <Pagination label="test" type="page" />,
+        );
 
-      expect(anchorClickSpy).toHaveBeenCalledTimes(0);
+        expect(pagination).toContainReactComponent(Text, {
+          color: 'subdued',
+        });
+      });
     });
   });
 
-  it('uses Button and ButtonGroup as subcomponents', () => {
-    const pagination = mountWithApp(
-      <Pagination nextURL="/next" previousURL="/prev" />,
-    );
+  describe('type: table', () => {
+    it('places the content at the end of the container', () => {
+      const pagination = mountWithApp(
+        <Pagination hasNext nextURL="/next" previousURL="/prev" type="table" />,
+      );
 
-    expect(pagination).toContainReactComponent(ButtonGroup, {
-      segmented: true,
+      expect(pagination).toContainReactComponent(HorizontalStack, {
+        align: 'end',
+        blockAlign: 'center',
+      });
     });
-    expect(pagination).toContainReactComponent(Button, {url: '/prev'});
-    expect(pagination).toContainReactComponent(Button, {url: '/next'});
-  });
-
-  it('the ButtonGroup is not segmented when there is a label', () => {
-    const pagination = mountWithApp(
-      <Pagination nextURL="/next" previousURL="/prev" label="Hello, world!" />,
-      {features: {polarisSummerEditions2023: false}},
-    );
 
-    expect(pagination).toContainReactComponent(ButtonGroup, {
-      segmented: false,
+    describe('label', () => {
+      it('spaces the content apart within the container', () => {
+        const pagination = mountWithApp(
+          <Pagination
+            hasNext
+            nextURL="/next"
+            previousURL="/prev"
+            type="table"
+            label="test"
+          />,
+        );
+
+        expect(pagination).toContainReactComponent(HorizontalStack, {
+          align: 'space-between',
+          blockAlign: 'center',
+        });
+      });
     });
   });
 });
diff --git a/polaris.shopify.com/content/components/navigation/pagination.md b/polaris.shopify.com/content/components/navigation/pagination.md
index 447a7dfeec8..872c0c10653 100644
--- a/polaris.shopify.com/content/components/navigation/pagination.md
+++ b/polaris.shopify.com/content/components/navigation/pagination.md
@@ -22,13 +22,16 @@ keywords:
 examples:
   - fileName: pagination-default.tsx
     title: Default
-    description: Use for pagination at the bottom of lists.
+    description: Use for pagination of resources.
   - fileName: pagination-with-keyboard-navigation.tsx
     title: With keyboard navigation
     description: Attach standard keyboard shortcuts to important pagination controls.
   - fileName: pagination-with-label.tsx
     title: With label
     description: Add a label between navigation buttons to provide more context of the content being viewed by the user.
+  - fileName: pagination-with-table-type.tsx
+    title: With table type
+    description: Use for pagination at the bottom of tables or lists.
 ---
 
 ## Best practices
diff --git a/polaris.shopify.com/pages/examples/pagination-with-table-type.tsx b/polaris.shopify.com/pages/examples/pagination-with-table-type.tsx
new file mode 100644
index 00000000000..d7a884b9e40
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/pagination-with-table-type.tsx
@@ -0,0 +1,29 @@
+import {Pagination} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function PaginationExample() {
+  return (
+    <div
+      style={{
+        maxWidth: '700px',
+        margin: 'auto',
+        border: '1px solid var(--p-color-border)'
+      }}
+    >
+      <Pagination
+        onPrevious={() => {
+          console.log('Previous');
+        }}
+        onNext={() => {
+          console.log('Next');
+        }}
+        type="table"
+        hasNext
+        label="1-50 of 8,450 orders"
+      />
+    </div>
+  );
+}
+
+export default withPolarisExample(PaginationExample);

From 7c22e7e54c17d2e4d1d4626e761c8953069a9406 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Thu, 14 Sep 2023 14:22:23 -0700
Subject: [PATCH 061/102] Move `token-groups` to `themes/base` directory
 (#10482)

Moves `src/token-groups/*` to `src/themes/base/*` to improve clarity
that our original `token-groups` are the base theme.
---
 polaris-tokens/src/index.ts                   | 22 +++++++--------
 polaris-tokens/src/themes/base.ts             | 28 -------------------
 .../{token-groups => themes/base}/border.ts   |  7 +++--
 .../base}/breakpoints.ts                      |  4 +--
 .../{token-groups => themes/base}/color.ts    |  9 +++---
 .../src/{token-groups => themes/base}/font.ts |  7 +++--
 .../{token-groups => themes/base}/height.ts   |  6 ++--
 polaris-tokens/src/themes/base/index.ts       | 28 +++++++++++++++++++
 .../{token-groups => themes/base}/motion.ts   |  4 +--
 .../{token-groups => themes/base}/shadow.ts   |  5 ++--
 .../{token-groups => themes/base}/space.ts    |  7 +++--
 .../{token-groups => themes/base}/width.ts    |  6 ++--
 .../{token-groups => themes/base}/zIndex.ts   |  4 +--
 polaris-tokens/src/utilities.ts               |  2 +-
 .../pages/api/tokens/v0/index.tsx             |  2 +-
 15 files changed, 73 insertions(+), 68 deletions(-)
 delete mode 100644 polaris-tokens/src/themes/base.ts
 rename polaris-tokens/src/{token-groups => themes/base}/border.ts (92%)
 rename polaris-tokens/src/{token-groups => themes/base}/breakpoints.ts (92%)
 rename polaris-tokens/src/{token-groups => themes/base}/color.ts (98%)
 rename polaris-tokens/src/{token-groups => themes/base}/font.ts (94%)
 rename polaris-tokens/src/{token-groups => themes/base}/height.ts (90%)
 create mode 100644 polaris-tokens/src/themes/base/index.ts
 rename polaris-tokens/src/{token-groups => themes/base}/motion.ts (96%)
 rename polaris-tokens/src/{token-groups => themes/base}/shadow.ts (96%)
 rename polaris-tokens/src/{token-groups => themes/base}/space.ts (91%)
 rename polaris-tokens/src/{token-groups => themes/base}/width.ts (90%)
 rename polaris-tokens/src/{token-groups => themes/base}/zIndex.ts (88%)

diff --git a/polaris-tokens/src/index.ts b/polaris-tokens/src/index.ts
index c9727021bf7..99934a1caca 100644
--- a/polaris-tokens/src/index.ts
+++ b/polaris-tokens/src/index.ts
@@ -1,6 +1,6 @@
 export * from './metadata';
 export * from './utilities';
-export {breakpointsAliases} from './token-groups/breakpoints';
+export {breakpointsAliases} from './themes/base/breakpoints';
 export type {
   TokenGroup,
   Tokens,
@@ -17,13 +17,13 @@ export type {
   BorderTokenName,
   BorderRadiusScale,
   BorderWidthScale,
-} from './token-groups/border';
+} from './themes/base/border';
 
 export type {
   BreakpointsTokenGroup,
   BreakpointsTokenName,
   BreakpointsAlias,
-} from './token-groups/breakpoints';
+} from './themes/base/breakpoints';
 
 export type {
   ColorTokenGroup,
@@ -32,7 +32,7 @@ export type {
   ColorBorderAlias,
   ColorIconAlias,
   ColorTextAlias,
-} from './token-groups/color';
+} from './themes/base/color';
 
 export type {
   FontTokenGroup,
@@ -40,41 +40,41 @@ export type {
   FontSizeScale,
   FontLineHeightScale,
   FontWeightAlias,
-} from './token-groups/font';
+} from './themes/base/font';
 
 export type {
   HeightTokenGroup,
   HeightTokenName,
   HeightScale,
-} from './token-groups/height';
+} from './themes/base/height';
 
 export type {
   MotionTokenGroup,
   MotionTokenName,
   MotionDurationScale,
   MotionKeyframesAlias,
-} from './token-groups/motion';
+} from './themes/base/motion';
 
 export type {
   ShadowTokenGroup,
   ShadowTokenName,
   ShadowAlias,
-} from './token-groups/shadow';
+} from './themes/base/shadow';
 
 export type {
   SpaceTokenGroup,
   SpaceTokenName,
   SpaceScale,
-} from './token-groups/space';
+} from './themes/base/space';
 
 export type {
   WidthTokenGroup,
   WidthTokenName,
   WidthScale,
-} from './token-groups/width';
+} from './themes/base/width';
 
 export type {
   ZIndexTokenGroup,
   ZIndexTokenName,
   ZIndexZScale,
-} from './token-groups/zIndex';
+} from './themes/base/zIndex';
diff --git a/polaris-tokens/src/themes/base.ts b/polaris-tokens/src/themes/base.ts
deleted file mode 100644
index e91c21af57d..00000000000
--- a/polaris-tokens/src/themes/base.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {createExact, tokensToRems} from '../utilities';
-import {border} from '../token-groups/border';
-import {breakpoints} from '../token-groups/breakpoints';
-import {color} from '../token-groups/color';
-import {font} from '../token-groups/font';
-import {height} from '../token-groups/height';
-import {motion} from '../token-groups/motion';
-import {shadow} from '../token-groups/shadow';
-import {space} from '../token-groups/space';
-import {width} from '../token-groups/width';
-import {zIndex} from '../token-groups/zIndex';
-
-import type {MetaThemeShape} from './types';
-
-const createMetaThemeBase = createExact<MetaThemeShape>();
-
-export const metaThemeBase = createMetaThemeBase({
-  breakpoints: tokensToRems(breakpoints),
-  border: tokensToRems(border),
-  color,
-  font: tokensToRems(font),
-  height: tokensToRems(height),
-  motion,
-  shadow: tokensToRems(shadow),
-  space: tokensToRems(space),
-  width: tokensToRems(width),
-  zIndex,
-});
diff --git a/polaris-tokens/src/token-groups/border.ts b/polaris-tokens/src/themes/base/border.ts
similarity index 92%
rename from polaris-tokens/src/token-groups/border.ts
rename to polaris-tokens/src/themes/base/border.ts
index 9a0c7d13049..21d11fe9698 100644
--- a/polaris-tokens/src/token-groups/border.ts
+++ b/polaris-tokens/src/themes/base/border.ts
@@ -1,5 +1,6 @@
-import {size} from '../size';
-import type {Experimental, MetadataProperties} from '../types';
+import {size} from '../../size';
+import type {Experimental} from '../../types';
+import type {MetaTokenProperties} from '../types';
 
 type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
 
@@ -46,7 +47,7 @@ export type BorderTokenGroup = {
 };
 
 export const border: {
-  [TokenName in BorderTokenName]: MetadataProperties;
+  [TokenName in BorderTokenName]: MetaTokenProperties;
 } = {
   'border-radius-0': {
     value: size[0],
diff --git a/polaris-tokens/src/token-groups/breakpoints.ts b/polaris-tokens/src/themes/base/breakpoints.ts
similarity index 92%
rename from polaris-tokens/src/token-groups/breakpoints.ts
rename to polaris-tokens/src/themes/base/breakpoints.ts
index 76fc182219f..4dd3b2d96d8 100644
--- a/polaris-tokens/src/token-groups/breakpoints.ts
+++ b/polaris-tokens/src/themes/base/breakpoints.ts
@@ -1,4 +1,4 @@
-import type {MetadataProperties} from '../types';
+import type {MetaTokenProperties} from '../types';
 
 // NOTE: Order is important here: smallest -> largest
 // Exporting as const means it will be typed as a Tuple instead of string[]
@@ -14,7 +14,7 @@ export type BreakpointsTokenGroup = {
 };
 
 export const breakpoints: {
-  [TokenName in BreakpointsTokenName]: MetadataProperties;
+  [TokenName in BreakpointsTokenName]: MetaTokenProperties;
 } = {
   'breakpoints-xs': {
     value: '0px',
diff --git a/polaris-tokens/src/token-groups/color.ts b/polaris-tokens/src/themes/base/color.ts
similarity index 98%
rename from polaris-tokens/src/token-groups/color.ts
rename to polaris-tokens/src/themes/base/color.ts
index 60890d87213..f040652db85 100644
--- a/polaris-tokens/src/token-groups/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -1,6 +1,7 @@
-import type {MetadataProperties, Experimental} from '../types';
-import * as colors from '../colors';
-import * as colorsExperimental from '../colors-experimental';
+import type {Experimental} from '../../types';
+import type {MetaTokenProperties} from '../types';
+import * as colors from '../../colors';
+import * as colorsExperimental from '../../colors-experimental';
 
 export type ColorBackgroundAlias =
   | 'bg'
@@ -215,7 +216,7 @@ export type ColorTokenGroup = {
 };
 
 export const color: {
-  [TokenName in ColorTokenName]: MetadataProperties;
+  [TokenName in ColorTokenName]: MetaTokenProperties;
 } = {
   'color-bg-inverse': {
     value: colors.gray[900],
diff --git a/polaris-tokens/src/token-groups/font.ts b/polaris-tokens/src/themes/base/font.ts
similarity index 94%
rename from polaris-tokens/src/token-groups/font.ts
rename to polaris-tokens/src/themes/base/font.ts
index 9b63c4c42a5..1a80dff4dc8 100644
--- a/polaris-tokens/src/token-groups/font.ts
+++ b/polaris-tokens/src/themes/base/font.ts
@@ -1,5 +1,6 @@
-import {size} from '../size';
-import type {MetadataProperties, Experimental} from '../types';
+import {size} from '../../size';
+import type {Experimental} from '../../types';
+import type {MetaTokenProperties} from '../types';
 
 type FontFamilyAlias = 'sans' | 'mono';
 
@@ -55,7 +56,7 @@ export type FontTokenGroup = {
 };
 
 export const font: {
-  [TokenName in FontTokenName]: MetadataProperties;
+  [TokenName in FontTokenName]: MetaTokenProperties;
 } = {
   'font-family-sans': {
     value:
diff --git a/polaris-tokens/src/token-groups/height.ts b/polaris-tokens/src/themes/base/height.ts
similarity index 90%
rename from polaris-tokens/src/token-groups/height.ts
rename to polaris-tokens/src/themes/base/height.ts
index bff3bb4060e..91367149592 100644
--- a/polaris-tokens/src/token-groups/height.ts
+++ b/polaris-tokens/src/themes/base/height.ts
@@ -1,5 +1,5 @@
-import {size} from '../size';
-import type {MetadataProperties} from '../types';
+import {size} from '../../size';
+import type {MetaTokenProperties} from '../types';
 
 export type HeightScale =
   | '0'
@@ -30,7 +30,7 @@ export type HeightTokenGroup = {
 };
 
 export const height: {
-  [TokenName in HeightTokenName]: MetadataProperties;
+  [TokenName in HeightTokenName]: MetaTokenProperties;
 } = {
   'height-0': {
     value: size[0],
diff --git a/polaris-tokens/src/themes/base/index.ts b/polaris-tokens/src/themes/base/index.ts
new file mode 100644
index 00000000000..b94d978b47e
--- /dev/null
+++ b/polaris-tokens/src/themes/base/index.ts
@@ -0,0 +1,28 @@
+import {createExact, tokensToRems} from '../../utilities';
+import type {MetaThemeShape} from '../types';
+
+import {breakpoints} from './breakpoints';
+import {color} from './color';
+import {font} from './font';
+import {height} from './height';
+import {motion} from './motion';
+import {shadow} from './shadow';
+import {space} from './space';
+import {width} from './width';
+import {zIndex} from './zIndex';
+import {border} from './border';
+
+const createMetaThemeBase = createExact<MetaThemeShape>();
+
+export const metaThemeBase = createMetaThemeBase({
+  breakpoints: tokensToRems(breakpoints),
+  border: tokensToRems(border),
+  color,
+  font: tokensToRems(font),
+  height: tokensToRems(height),
+  motion,
+  shadow: tokensToRems(shadow),
+  space: tokensToRems(space),
+  width: tokensToRems(width),
+  zIndex,
+});
diff --git a/polaris-tokens/src/token-groups/motion.ts b/polaris-tokens/src/themes/base/motion.ts
similarity index 96%
rename from polaris-tokens/src/token-groups/motion.ts
rename to polaris-tokens/src/themes/base/motion.ts
index 6bf7428badd..f03feaae4c8 100644
--- a/polaris-tokens/src/token-groups/motion.ts
+++ b/polaris-tokens/src/themes/base/motion.ts
@@ -1,4 +1,4 @@
-import type {MetadataProperties} from '../types';
+import type {MetaTokenProperties} from '../types';
 
 export type MotionDurationScale =
   | '0'
@@ -39,7 +39,7 @@ export type MotionTokenGroup = {
 };
 
 export const motion: {
-  [TokenName in MotionTokenName]: MetadataProperties;
+  [TokenName in MotionTokenName]: MetaTokenProperties;
 } = {
   'motion-duration-0': {
     value: '0ms',
diff --git a/polaris-tokens/src/token-groups/shadow.ts b/polaris-tokens/src/themes/base/shadow.ts
similarity index 96%
rename from polaris-tokens/src/token-groups/shadow.ts
rename to polaris-tokens/src/themes/base/shadow.ts
index c8461b0b547..868628f4f71 100644
--- a/polaris-tokens/src/token-groups/shadow.ts
+++ b/polaris-tokens/src/themes/base/shadow.ts
@@ -1,4 +1,5 @@
-import type {MetadataProperties, Experimental} from '../types';
+import type {Experimental} from '../../types';
+import type {MetaTokenProperties} from '../types';
 
 type ShadowAliasExperimental = Experimental<
   | 'bevel'
@@ -37,7 +38,7 @@ export type ShadowTokenGroup = {
 };
 
 export const shadow: {
-  [TokenName in ShadowTokenName]: MetadataProperties;
+  [TokenName in ShadowTokenName]: MetaTokenProperties;
 } = {
   'shadow-inset-lg': {
     value: 'inset 0px 0px 7px 2px rgba(31, 33, 36, 0.18)',
diff --git a/polaris-tokens/src/token-groups/space.ts b/polaris-tokens/src/themes/base/space.ts
similarity index 91%
rename from polaris-tokens/src/token-groups/space.ts
rename to polaris-tokens/src/themes/base/space.ts
index e7097e00d3d..c937cd1c8c5 100644
--- a/polaris-tokens/src/token-groups/space.ts
+++ b/polaris-tokens/src/themes/base/space.ts
@@ -1,5 +1,6 @@
-import {size} from '../size';
-import type {MetadataProperties, Experimental} from '../types';
+import {size} from '../../size';
+import type {Experimental} from '../../types';
+import type {MetaTokenProperties} from '../types';
 
 type SpaceScaleExperimental = Experimental<'1_5'>;
 
@@ -46,7 +47,7 @@ export type SpaceTokenGroup = {
 };
 
 export const space: {
-  [TokenName in SpaceTokenName]: MetadataProperties;
+  [TokenName in SpaceTokenName]: MetaTokenProperties;
 } = {
   'space-0': {
     value: size[0],
diff --git a/polaris-tokens/src/token-groups/width.ts b/polaris-tokens/src/themes/base/width.ts
similarity index 90%
rename from polaris-tokens/src/token-groups/width.ts
rename to polaris-tokens/src/themes/base/width.ts
index 242b6c29740..32f47f84771 100644
--- a/polaris-tokens/src/token-groups/width.ts
+++ b/polaris-tokens/src/themes/base/width.ts
@@ -1,5 +1,5 @@
-import {size} from '../size';
-import type {MetadataProperties} from '../types';
+import {size} from '../../size';
+import type {MetaTokenProperties} from '../types';
 
 export type WidthScale =
   | '0'
@@ -30,7 +30,7 @@ export type WidthTokenGroup = {
 };
 
 export const width: {
-  [TokenName in WidthTokenName]: MetadataProperties;
+  [TokenName in WidthTokenName]: MetaTokenProperties;
 } = {
   'width-0': {
     value: size[0],
diff --git a/polaris-tokens/src/token-groups/zIndex.ts b/polaris-tokens/src/themes/base/zIndex.ts
similarity index 88%
rename from polaris-tokens/src/token-groups/zIndex.ts
rename to polaris-tokens/src/themes/base/zIndex.ts
index 2aef2296b60..513d47b2363 100644
--- a/polaris-tokens/src/token-groups/zIndex.ts
+++ b/polaris-tokens/src/themes/base/zIndex.ts
@@ -1,4 +1,4 @@
-import type {MetadataProperties} from '../types';
+import type {MetaTokenProperties} from '../types';
 
 export type ZIndexZScale =
   | '1'
@@ -21,7 +21,7 @@ export type ZIndexTokenGroup = {
 };
 
 export const zIndex: {
-  [TokenName in ZIndexTokenName]: MetadataProperties;
+  [TokenName in ZIndexTokenName]: MetaTokenProperties;
 } = {
   'z-index-1': {
     value: '100',
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
index b400714a6bc..f496ab4e007 100644
--- a/polaris-tokens/src/utilities.ts
+++ b/polaris-tokens/src/utilities.ts
@@ -3,7 +3,7 @@ import type {
   breakpoints as metaBreakpointsTokenGroup,
   BreakpointsTokenGroup,
   BreakpointsTokenName,
-} from './token-groups/breakpoints';
+} from './themes/base/breakpoints';
 
 const BASE_FONT_SIZE = 16;
 
diff --git a/polaris.shopify.com/pages/api/tokens/v0/index.tsx b/polaris.shopify.com/pages/api/tokens/v0/index.tsx
index 5eb8b8535b6..17f6cbb9761 100644
--- a/polaris.shopify.com/pages/api/tokens/v0/index.tsx
+++ b/polaris.shopify.com/pages/api/tokens/v0/index.tsx
@@ -5,7 +5,7 @@ import {tokenGroupKeys} from './[tokens]';
 const getGithubUrl = (file: string) => {
   const fileName = `${file}.ts`;
   const githubUrl = 'https://github.com/Shopify/polaris/blob';
-  const filePath = `/main/polaris-tokens/src/token-groups/${fileName}`;
+  const filePath = `/main/polaris-tokens/src/themes/base/${fileName}`;
 
   return `${githubUrl}${filePath}`;
 };

From eeff4eaa192affe4e47af2d65410f16551142424 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloerice@users.noreply.github.com>
Date: Thu, 14 Sep 2023 18:52:29 -0400
Subject: [PATCH 062/102] [GitHub Workflows] Update next on push to main
 (#10480)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

This workflow will (hopefully) open PRs to merge `main` into `next`
automatically when a PR is merged into `main`, with the last commit
author requested to review. The goal being to keep the `next` branch up
to date change by change to prevent large numbers of complex merge
conflicts.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .github/workflows/merge-main-into-next.yml | 25 ++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .github/workflows/merge-main-into-next.yml

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
new file mode 100644
index 00000000000..b1583294ce1
--- /dev/null
+++ b/.github/workflows/merge-main-into-next.yml
@@ -0,0 +1,25 @@
+# This workflow opens a PR to merge main into next so that it's kept up to date with each merge into main.
+
+name: Update next branch
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  updateNext:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout next branch
+        uses: actions/checkout@v4
+        with:
+          ref: next
+      - name: Merge main into next branch
+        run: |
+          git checkout -b update-next
+          git fetch origin main:main
+          git merge main
+      - name: Create PR with for review by last commit author
+        run: gh pr create -B next -H update-next --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of ${{ github.event.push.pusher.username }} following their recent push to main in order to keep the `next` branch up to date. ${{ github.event.push.pusher.username }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.event.push.pusher.username }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From a30fcc8612b26fcd818175727a6730f51ad9c380 Mon Sep 17 00:00:00 2001
From: "shopify-github-actions-access[bot]"
 <109624739+shopify-github-actions-access[bot]@users.noreply.github.com>
Date: Thu, 14 Sep 2023 22:27:41 -0400
Subject: [PATCH 063/102] Version Packages (#10471)

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.19.0

### Minor Changes

- [#10310](https://github.com/Shopify/polaris/pull/10310)
[`5f94cae98`](https://github.com/Shopify/polaris/commit/5f94cae98e2a41ca33fae3afce7ad078132609e0)
Thanks [@mattkubej](https://github.com/mattkubej)! - Added a `type` prop
to `Pagination` to support a table row layout

### Patch Changes

- Updated dependencies
\[[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218),
[`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248),
[`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3),
[`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b),
[`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
    -   @shopify/polaris-tokens@7.9.0

## @shopify/polaris-tokens@7.9.0

### Minor Changes

- [#10458](https://github.com/Shopify/polaris/pull/10458)
[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `height` token scale


- [#10462](https://github.com/Shopify/polaris/pull/10462)
[`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `line-height` token scale


- [#10474](https://github.com/Shopify/polaris/pull/10474)
[`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `font-size` token scale


- [#10434](https://github.com/Shopify/polaris/pull/10434)
[`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `border-width` token scale


- [#10460](https://github.com/Shopify/polaris/pull/10460)
[`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive `width` token scale

## @shopify/polaris-migrator@0.22.4

### Patch Changes

- Updated dependencies
\[[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218),
[`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248),
[`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3),
[`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b),
[`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
    -   @shopify/polaris-tokens@7.9.0
    -   @shopify/stylelint-polaris@14.0.4

## @shopify/stylelint-polaris@14.0.4

### Patch Changes

- Updated dependencies
\[[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218),
[`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248),
[`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3),
[`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b),
[`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
    -   @shopify/polaris-tokens@7.9.0

## polaris.shopify.com@0.57.7

### Patch Changes

- Updated dependencies
\[[`5f94cae98`](https://github.com/Shopify/polaris/commit/5f94cae98e2a41ca33fae3afce7ad078132609e0),
[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218),
[`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248),
[`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3),
[`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b),
[`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
    -   @shopify/polaris@11.19.0
    -   @shopify/polaris-tokens@7.9.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/curvy-peas-flow.md       |  5 -----
 .changeset/fast-bulldogs-raise.md   |  5 -----
 .changeset/fuzzy-mails-judge.md     |  5 -----
 .changeset/healthy-scissors-hope.md |  5 -----
 .changeset/sour-turkeys-switch.md   |  5 -----
 .changeset/twelve-radios-stare.md   |  5 -----
 polaris-for-vscode/package.json     |  2 +-
 polaris-migrator/CHANGELOG.md       |  8 ++++++++
 polaris-migrator/package.json       |  8 ++++----
 polaris-react/CHANGELOG.md          | 11 +++++++++++
 polaris-react/README.md             |  4 ++--
 polaris-react/package.json          |  4 ++--
 polaris-tokens/CHANGELOG.md         | 14 ++++++++++++++
 polaris-tokens/package.json         |  2 +-
 polaris.shopify.com/CHANGELOG.md    |  8 ++++++++
 polaris.shopify.com/package.json    |  6 +++---
 stylelint-polaris/CHANGELOG.md      |  7 +++++++
 stylelint-polaris/package.json      |  4 ++--
 18 files changed, 63 insertions(+), 45 deletions(-)
 delete mode 100644 .changeset/curvy-peas-flow.md
 delete mode 100644 .changeset/fast-bulldogs-raise.md
 delete mode 100644 .changeset/fuzzy-mails-judge.md
 delete mode 100644 .changeset/healthy-scissors-hope.md
 delete mode 100644 .changeset/sour-turkeys-switch.md
 delete mode 100644 .changeset/twelve-radios-stare.md

diff --git a/.changeset/curvy-peas-flow.md b/.changeset/curvy-peas-flow.md
deleted file mode 100644
index d0b62bb2175..00000000000
--- a/.changeset/curvy-peas-flow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': minor
----
-
-Added a `type` prop to `Pagination` to support a table row layout 
diff --git a/.changeset/fast-bulldogs-raise.md b/.changeset/fast-bulldogs-raise.md
deleted file mode 100644
index 96e142dc5e2..00000000000
--- a/.changeset/fast-bulldogs-raise.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `height` token scale
diff --git a/.changeset/fuzzy-mails-judge.md b/.changeset/fuzzy-mails-judge.md
deleted file mode 100644
index 23c16136cba..00000000000
--- a/.changeset/fuzzy-mails-judge.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `line-height` token scale
diff --git a/.changeset/healthy-scissors-hope.md b/.changeset/healthy-scissors-hope.md
deleted file mode 100644
index b265650d7b3..00000000000
--- a/.changeset/healthy-scissors-hope.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `font-size` token scale
diff --git a/.changeset/sour-turkeys-switch.md b/.changeset/sour-turkeys-switch.md
deleted file mode 100644
index f81eff0e06a..00000000000
--- a/.changeset/sour-turkeys-switch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `border-width` token scale
diff --git a/.changeset/twelve-radios-stare.md b/.changeset/twelve-radios-stare.md
deleted file mode 100644
index eb14861ac2d..00000000000
--- a/.changeset/twelve-radios-stare.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris-tokens': minor
----
-
-Added public primitive `width` token scale
diff --git a/polaris-for-vscode/package.json b/polaris-for-vscode/package.json
index 975adc4b9ea..9d4be0ffaa3 100644
--- a/polaris-for-vscode/package.json
+++ b/polaris-for-vscode/package.json
@@ -43,7 +43,7 @@
     "vscode-languageserver-textdocument": "^1.0.4"
   },
   "devDependencies": {
-    "@shopify/polaris-tokens": "^7.8.0",
+    "@shopify/polaris-tokens": "^7.9.0",
     "@types/node": "14.x",
     "@types/vscode": "^1.64.0",
     "@vscode/test-electron": "^2.1.2",
diff --git a/polaris-migrator/CHANGELOG.md b/polaris-migrator/CHANGELOG.md
index ca60edb42a7..12d935f290b 100644
--- a/polaris-migrator/CHANGELOG.md
+++ b/polaris-migrator/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @shopify/polaris-migrator
 
+## 0.22.4
+
+### Patch Changes
+
+- Updated dependencies [[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218), [`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248), [`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3), [`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b), [`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
+  - @shopify/polaris-tokens@7.9.0
+  - @shopify/stylelint-polaris@14.0.4
+
 ## 0.22.3
 
 ### Patch Changes
diff --git a/polaris-migrator/package.json b/polaris-migrator/package.json
index 2200ab6503a..b99b61a7ab0 100644
--- a/polaris-migrator/package.json
+++ b/polaris-migrator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-migrator",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "description": "Codemod transformations to help upgrade your Polaris codebase",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -36,8 +36,8 @@
     "generate": "plop"
   },
   "dependencies": {
-    "@shopify/polaris-tokens": "^7.8.0",
-    "@shopify/stylelint-polaris": "^14.0.3",
+    "@shopify/polaris-tokens": "^7.9.0",
+    "@shopify/stylelint-polaris": "^14.0.4",
     "chalk": "^4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "^1.1.0",
@@ -55,7 +55,7 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@shopify/polaris": "^11.18.0",
+    "@shopify/polaris": "^11.19.0",
     "plop": "^3.1.1",
     "plop-dir": "^0.0.5",
     "prettier": "^2.7.1",
diff --git a/polaris-react/CHANGELOG.md b/polaris-react/CHANGELOG.md
index fd02f4cc981..ea9cf80613a 100644
--- a/polaris-react/CHANGELOG.md
+++ b/polaris-react/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 11.19.0
+
+### Minor Changes
+
+- [#10310](https://github.com/Shopify/polaris/pull/10310) [`5f94cae98`](https://github.com/Shopify/polaris/commit/5f94cae98e2a41ca33fae3afce7ad078132609e0) Thanks [@mattkubej](https://github.com/mattkubej)! - Added a `type` prop to `Pagination` to support a table row layout
+
+### Patch Changes
+
+- Updated dependencies [[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218), [`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248), [`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3), [`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b), [`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
+  - @shopify/polaris-tokens@7.9.0
+
 ## 11.18.0
 
 ### Minor Changes
diff --git a/polaris-react/README.md b/polaris-react/README.md
index 447ccfae5dc..423a6f557ca 100644
--- a/polaris-react/README.md
+++ b/polaris-react/README.md
@@ -33,7 +33,7 @@ Otherwise include the CSS in your HTML. We suggest copying the styles file into
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.18.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.19.0/build/esm/styles.css"
 />
 ```
 
@@ -70,7 +70,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@11.18.0/build/esm/styles.css"
+  href="https://unpkg.com/@shopify/polaris@11.19.0/build/esm/styles.css"
 />
 ```
 
diff --git a/polaris-react/package.json b/polaris-react/package.json
index 711fecd3f51..1807e38bf99 100644
--- a/polaris-react/package.json
+++ b/polaris-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/polaris",
   "description": "Shopify’s admin product component library",
-  "version": "11.18.0",
+  "version": "11.19.0",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.8.0",
+    "@shopify/polaris-tokens": "^7.9.0",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-transition-group": "^4.4.2",
diff --git a/polaris-tokens/CHANGELOG.md b/polaris-tokens/CHANGELOG.md
index 77f3952cbdb..1524e525ca6 100644
--- a/polaris-tokens/CHANGELOG.md
+++ b/polaris-tokens/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## 7.9.0
+
+### Minor Changes
+
+- [#10458](https://github.com/Shopify/polaris/pull/10458) [`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `height` token scale
+
+* [#10462](https://github.com/Shopify/polaris/pull/10462) [`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `line-height` token scale
+
+- [#10474](https://github.com/Shopify/polaris/pull/10474) [`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `font-size` token scale
+
+* [#10434](https://github.com/Shopify/polaris/pull/10434) [`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `border-width` token scale
+
+- [#10460](https://github.com/Shopify/polaris/pull/10460) [`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e) Thanks [@lgriffee](https://github.com/lgriffee)! - Added public primitive `width` token scale
+
 ## 7.8.0
 
 ### Minor Changes
diff --git a/polaris-tokens/package.json b/polaris-tokens/package.json
index 763710a2938..51ff64df89a 100644
--- a/polaris-tokens/package.json
+++ b/polaris-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "7.8.0",
+  "version": "7.9.0",
   "description": "",
   "main": "dist/cjs/build/index.js",
   "module": "dist/esm/build/index.mjs",
diff --git a/polaris.shopify.com/CHANGELOG.md b/polaris.shopify.com/CHANGELOG.md
index b01d82166a6..50e63e1ce7b 100644
--- a/polaris.shopify.com/CHANGELOG.md
+++ b/polaris.shopify.com/CHANGELOG.md
@@ -1,5 +1,13 @@
 # polaris.shopify.com
 
+## 0.57.7
+
+### Patch Changes
+
+- Updated dependencies [[`5f94cae98`](https://github.com/Shopify/polaris/commit/5f94cae98e2a41ca33fae3afce7ad078132609e0), [`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218), [`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248), [`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3), [`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b), [`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
+  - @shopify/polaris@11.19.0
+  - @shopify/polaris-tokens@7.9.0
+
 ## 0.57.6
 
 ### Patch Changes
diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
index 22a2036100b..84908277fd6 100644
--- a/polaris.shopify.com/package.json
+++ b/polaris.shopify.com/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polaris.shopify.com",
-  "version": "0.57.6",
+  "version": "0.57.7",
   "private": true,
   "engines": {
     "node": "^16.17.0 || >=18.12.0"
@@ -26,9 +26,9 @@
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@headlessui/react": "^1.6.5",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@shopify/polaris": "^11.18.0",
+    "@shopify/polaris": "^11.19.0",
     "@shopify/polaris-icons": "^7.9.0",
-    "@shopify/polaris-tokens": "^7.8.0",
+    "@shopify/polaris-tokens": "^7.9.0",
     "@types/react-syntax-highlighter": "^15.5.6",
     "base-64": "^1.0.0",
     "codesandbox": "^2.2.3",
diff --git a/stylelint-polaris/CHANGELOG.md b/stylelint-polaris/CHANGELOG.md
index d2e1eb5b670..047f7b88f85 100644
--- a/stylelint-polaris/CHANGELOG.md
+++ b/stylelint-polaris/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 14.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`5e073c209`](https://github.com/Shopify/polaris/commit/5e073c2095c51154f27740f4c4bc3d00122c0218), [`2bccc2291`](https://github.com/Shopify/polaris/commit/2bccc22918eab571136b925bdf7ce07281658248), [`033424546`](https://github.com/Shopify/polaris/commit/03342454611a71a0a57e48cf8a013c1ca27837b3), [`66b2599da`](https://github.com/Shopify/polaris/commit/66b2599dabcb4bfb5cb4964c7a9bfce4fc12617b), [`c07de6ca4`](https://github.com/Shopify/polaris/commit/c07de6ca4aed19c643b2681d498432fd7414475e)]:
+  - @shopify/polaris-tokens@7.9.0
+
 ## 14.0.3
 
 ### Patch Changes
diff --git a/stylelint-polaris/package.json b/stylelint-polaris/package.json
index 62363449635..a901886ae34 100644
--- a/stylelint-polaris/package.json
+++ b/stylelint-polaris/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shopify/stylelint-polaris",
   "description": "Polaris Design System Stylelint tooling",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "private": false,
   "license": "MIT",
   "author": "Shopify <dev@shopify.com>",
@@ -37,7 +37,7 @@
   "dependencies": {
     "postcss-value-parser": "^4.2.0",
     "postcss-media-query-parser": "^0.2.3",
-    "@shopify/polaris-tokens": "^7.8.0"
+    "@shopify/polaris-tokens": "^7.9.0"
   },
   "peerDependencies": {
     "stylelint": "^14.15.0 || ^15.0.0"

From d5ff72dec72e612472a0f0e980d497ae2e1bfb2d Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Fri, 15 Sep 2023 17:09:14 +0100
Subject: [PATCH 064/102] [Storybook] Fix stories containing Modal components
 (#10492)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Due to a recent update to the Dialog component within the Modal, it now
uses the `useFrame` hook. Due to this, we need to ensure that anywhere
it's used, we have a parent `<Frame>` component anywhere. This is not an
issue for production, where the `<Frame>` is automatically included by
the `<AppProvider>` or for tests where `mountWithApp` includes the
`<Frame>`, but I noticed some Storybook stories breaking. So we wrap all
stories in a `<FrameContext.Provider>` component now.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

- Go to Storybook generated by Chromatic
- Go to the Banner -> In a Modal story
- It should work fine
- Go to the IndexFilters stories
- Launch the Create new View modal
- They should work fine
- Go to the IndexTable stories that contain the filtering element
- Launch the Create new View modal
- They should work fine

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/six-donkeys-nail.md      | 5 +++++
 polaris-react/.storybook/preview.js | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/six-donkeys-nail.md

diff --git a/.changeset/six-donkeys-nail.md b/.changeset/six-donkeys-nail.md
new file mode 100644
index 00000000000..21ae6df5e5c
--- /dev/null
+++ b/.changeset/six-donkeys-nail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated Storybook stories to be wrapped with an empty FrameContext.Provider
diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js
index 4a5db4d336d..cb3a5c196d9 100644
--- a/polaris-react/.storybook/preview.js
+++ b/polaris-react/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React, {useRef, useEffect} from 'react';
 
-import {AppProvider} from '../src';
+import {AppProvider, FrameContext} from '../src';
 import enTranslations from '../locales/en.json';
 import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
@@ -37,7 +37,9 @@ function AppProviderDecorator(Story, context) {
       }}
       i18n={enTranslations}
     >
-      <Story {...context} />
+      <FrameContext.Provider value={{}}>
+        <Story {...context} />
+      </FrameContext.Provider>
     </AppProvider>
   );
 }

From 8be227e0c4ac6a03566beb8b9717a721c2f20b07 Mon Sep 17 00:00:00 2001
From: Maxime Cloutier <maxime.cloutier@shopify.com>
Date: Fri, 15 Sep 2023 10:50:17 -0600
Subject: [PATCH 065/102] ActionList: Make filtering opt in (#10478)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes https://github.com/Shopify/workflows-merchant-guidance/issues/660

The auto-showing of filtering added the search bar in unwanted areas,
making it opt-in will make sure it doesn't show up unless specified.

### WHAT is this pull request doing?

Adding a prop on the Header and on ActionList to enable filtering when a
list has 8 or more items. The reason Header requires the prop is that
ActionList is deeply nested under it and it need to be specified there.

### 🎩
- Add a few items in the secondaryActions or actionGroups in
DetailsPage.tsx in the playground to make the total above 8.
- Make sure that the filtering shows up
- Go to the ActionList story
- Add items to be above 8
- Filtering shouldn't be present
- Add the `hasFiltering` prop to ActionList
- Filtering should be present

---------

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/lazy-hornets-train.md              |  5 ++
 .../ActionList/ActionList.stories.tsx         |  1 +
 .../src/components/ActionList/ActionList.tsx  | 30 +++++----
 .../ActionList/tests/ActionList.test.tsx      | 27 +++++++-
 .../FilterActionsProvider.tsx                 | 19 ++++++
 .../components/FilterActionsProvider/index.ts |  1 +
 polaris-react/src/components/Page/Page.tsx    |  4 +-
 .../Page/components/Header/Header.tsx         | 64 ++++++++++---------
 8 files changed, 108 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/lazy-hornets-train.md
 create mode 100644 polaris-react/src/components/FilterActionsProvider/FilterActionsProvider.tsx
 create mode 100644 polaris-react/src/components/FilterActionsProvider/index.ts

diff --git a/.changeset/lazy-hornets-train.md b/.changeset/lazy-hornets-train.md
new file mode 100644
index 00000000000..f2103c69573
--- /dev/null
+++ b/.changeset/lazy-hornets-train.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `allowFiltering` prop on `ActionList`, and `filterActions` prop on Page Header
diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
index c8c59bff71d..27aed5951dc 100644
--- a/polaris-react/src/components/ActionList/ActionList.stories.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -390,6 +390,7 @@ export function WithFiltering() {
     <div style={{height: '250px', maxWidth: '350px'}}>
       <ActionList
         actionRole="menuitem"
+        allowFiltering
         items={Array.from({length: 8}).map((_, index) => ({
           content: `Item #${index + 1}`,
         }))}
diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index 5ea8a908d46..cfb20301610 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useRef, useState} from 'react';
+import React, {useContext, useMemo, useRef, useState} from 'react';
 
 import type {ActionListItemDescriptor, ActionListSection} from '../../types';
 import {Key} from '../../types';
@@ -6,12 +6,13 @@ import {
   wrapFocusNextFocusableMenuItem,
   wrapFocusPreviousFocusableMenuItem,
 } from '../../utilities/focus';
+import {useI18n} from '../../utilities/i18n';
 import {Box} from '../Box';
 import {KeypressListener} from '../KeypressListener';
-import {useI18n} from '../../utilities/i18n';
+import {FilterActionsContext} from '../FilterActionsProvider';
 
-import {SearchField, Item, Section} from './components';
 import type {ItemProps} from './components';
+import {Item, SearchField, Section} from './components';
 
 export interface ActionListProps {
   /** Collection of actions for list */
@@ -20,20 +21,25 @@ export interface ActionListProps {
   sections?: readonly ActionListSection[];
   /** Defines a specific role attribute for each action in the list */
   actionRole?: 'menuitem' | string;
+  /** Allow users to filter items in the list. Will only show if more than 8 items in the list. The item content of every items must be a string for this to work */
+  allowFiltering?: boolean;
   /** Callback when any item is clicked or keypressed */
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
 
+const FILTER_ACTIONS_THRESHOLD = 8;
+
 export type ActionListItemProps = ItemProps;
 
 export function ActionList({
   items,
   sections = [],
   actionRole,
+  allowFiltering,
   onActionAnyItem,
 }: ActionListProps) {
   const i18n = useI18n();
-
+  const filterActions = useContext(FilterActionsContext);
   let finalSections: readonly ActionListSection[] = [];
   const actionListRef = useRef<HTMLDivElement & HTMLUListElement>(null);
   const [searchText, setSeachText] = useState('');
@@ -116,12 +122,6 @@ export function ActionList({
       </>
     ) : null;
 
-  const totalActions =
-    finalSections?.reduce(
-      (acc: number, section) => acc + section.items.length,
-      0,
-    ) || 0;
-
   const totalFilteredActions = useMemo(() => {
     const totalSectionItems =
       filteredSections?.reduce(
@@ -132,11 +132,17 @@ export function ActionList({
     return totalSectionItems;
   }, [filteredSections]);
 
-  const showSearch = totalActions >= 8;
+  const totalActions =
+    finalSections?.reduce(
+      (acc: number, section) => acc + section.items.length,
+      0,
+    ) || 0;
+
+  const hasManyActions = totalActions >= FILTER_ACTIONS_THRESHOLD;
 
   return (
     <>
-      {showSearch && isFilterable && (
+      {(allowFiltering || filterActions) && hasManyActions && isFilterable && (
         <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
           <SearchField
             placeholder={i18n.translate(
diff --git a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
index ed10230353e..ce9d7dee636 100644
--- a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
+++ b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
@@ -240,6 +240,7 @@ describe('<ActionList />', () => {
   it('does not render search with 7 or less items', () => {
     const actionList = mountWithApp(
       <ActionList
+        allowFiltering
         items={[
           {content: 'Item 1'},
           {content: 'Item 2'},
@@ -258,6 +259,7 @@ describe('<ActionList />', () => {
   it('renders search with 8 or more items', () => {
     const actionList = mountWithApp(
       <ActionList
+        allowFiltering
         items={[
           {content: 'Item 1'},
           {content: 'Item 2'},
@@ -276,10 +278,32 @@ describe('<ActionList />', () => {
     expect(actionList).toContainReactComponentTimes(SearchField, 1);
   });
 
-  it('renders search with 10 or more items or section items', () => {
+  it('does not renders search with 8 and no allowFiltering', () => {
+    const actionList = mountWithApp(
+      <ActionList
+        items={[
+          {content: 'Item 1'},
+          {content: 'Item 2'},
+          {content: 'Item 3'},
+          {content: 'Item 4'},
+          {content: 'Item 5'},
+          {content: 'Item 6'},
+          {content: 'Item 7'},
+          {content: 'Item 8'},
+          {content: 'Item 9'},
+          {content: 'Item 10'},
+        ]}
+      />,
+    );
+
+    expect(actionList).not.toContainReactComponentTimes(SearchField, 1);
+  });
+
+  it('renders search with 8 or more items or section items', () => {
     const actionList = mountWithApp(
       <ActionList
         items={[{content: 'Item 1'}, {content: 'Item 2'}]}
+        allowFiltering
         sections={[
           {
             title: '',
@@ -308,6 +332,7 @@ describe('<ActionList />', () => {
     const actionList = mountWithApp(
       <ActionList
         items={[{content: 'IteM 1'}, {content: 'Item 2'}]}
+        allowFiltering
         sections={[
           {
             title: 'Section 1',
diff --git a/polaris-react/src/components/FilterActionsProvider/FilterActionsProvider.tsx b/polaris-react/src/components/FilterActionsProvider/FilterActionsProvider.tsx
new file mode 100644
index 00000000000..67735ac1b48
--- /dev/null
+++ b/polaris-react/src/components/FilterActionsProvider/FilterActionsProvider.tsx
@@ -0,0 +1,19 @@
+import type {PropsWithChildren} from 'react';
+import React, {createContext} from 'react';
+
+export const FilterActionsContext = createContext<boolean>(false);
+
+type FilterActionsProviderProps = PropsWithChildren<{
+  filterActions: boolean;
+}>;
+
+export function FilterActionsProvider({
+  children,
+  filterActions,
+}: FilterActionsProviderProps) {
+  return (
+    <FilterActionsContext.Provider value={filterActions}>
+      {children}
+    </FilterActionsContext.Provider>
+  );
+}
diff --git a/polaris-react/src/components/FilterActionsProvider/index.ts b/polaris-react/src/components/FilterActionsProvider/index.ts
new file mode 100644
index 00000000000..d5f2b313195
--- /dev/null
+++ b/polaris-react/src/components/FilterActionsProvider/index.ts
@@ -0,0 +1 @@
+export * from './FilterActionsProvider';
diff --git a/polaris-react/src/components/Page/Page.tsx b/polaris-react/src/components/Page/Page.tsx
index 71d7e62c13b..f5a552faf6f 100644
--- a/polaris-react/src/components/Page/Page.tsx
+++ b/polaris-react/src/components/Page/Page.tsx
@@ -48,7 +48,9 @@ export function Page({
     divider && hasHeaderContent && styles.divider,
   );
 
-  const headerMarkup = hasHeaderContent ? <Header {...rest} /> : null;
+  const headerMarkup = hasHeaderContent ? (
+    <Header filterActions {...rest} />
+  ) : null;
 
   return (
     <div className={pageClassName}>
diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
index 720c7941bea..ffba84660e0 100644
--- a/polaris-react/src/components/Page/components/Header/Header.tsx
+++ b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -29,6 +29,7 @@ import {isReactElement} from '../../../../utilities/is-react-element';
 import {Box} from '../../../Box';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {useFeatures} from '../../../../utilities/features';
+import {FilterActionsProvider} from '../../../FilterActionsProvider';
 
 import {Title} from './components';
 import type {TitleProps} from './components';
@@ -49,6 +50,8 @@ interface PrimaryAction
 export interface HeaderProps extends TitleProps {
   /** Visually hide the title */
   titleHidden?: boolean;
+  /** Enables filtering action list items */
+  filterActions?: boolean;
   /** Primary page-level action */
   primaryAction?: PrimaryAction | React.ReactNode;
   /** Page-level pagination */
@@ -79,6 +82,7 @@ export function Header({
   titleHidden = false,
   primaryAction,
   pagination,
+  filterActions,
   additionalNavigation,
   backAction,
   secondaryActions = [],
@@ -229,35 +233,37 @@ export function Header({
       visuallyHidden={titleHidden}
     >
       <div className={headerClassNames}>
-        <ConditionalRender
-          condition={[slot1, slot2, slot3, slot4].some(notNull)}
-        >
-          <div className={styles.Row}>
-            {slot1}
-            {slot2}
-            <ConditionalRender condition={[slot3, slot4].some(notNull)}>
-              <div className={styles.RightAlign}>
-                <ConditionalWrapper
-                  condition={[slot3, slot4].every(notNull)}
-                  wrapper={(children) => (
-                    <div className={styles.Actions}>{children}</div>
-                  )}
-                >
-                  {slot3}
-                  {slot4}
-                </ConditionalWrapper>
-              </div>
-            </ConditionalRender>
-          </div>
-        </ConditionalRender>
-        <ConditionalRender condition={[slot5, slot6].some(notNull)}>
-          <div className={styles.Row}>
-            <HorizontalStack gap="4">{slot5}</HorizontalStack>
-            <ConditionalRender condition={slot6 != null}>
-              <div className={styles.RightAlign}>{slot6}</div>
-            </ConditionalRender>
-          </div>
-        </ConditionalRender>
+        <FilterActionsProvider filterActions={Boolean(filterActions)}>
+          <ConditionalRender
+            condition={[slot1, slot2, slot3, slot4].some(notNull)}
+          >
+            <div className={styles.Row}>
+              {slot1}
+              {slot2}
+              <ConditionalRender condition={[slot3, slot4].some(notNull)}>
+                <div className={styles.RightAlign}>
+                  <ConditionalWrapper
+                    condition={[slot3, slot4].every(notNull)}
+                    wrapper={(children) => (
+                      <div className={styles.Actions}>{children}</div>
+                    )}
+                  >
+                    {slot3}
+                    {slot4}
+                  </ConditionalWrapper>
+                </div>
+              </ConditionalRender>
+            </div>
+          </ConditionalRender>
+          <ConditionalRender condition={[slot5, slot6].some(notNull)}>
+            <div className={styles.Row}>
+              <HorizontalStack gap="4">{slot5}</HorizontalStack>
+              <ConditionalRender condition={slot6 != null}>
+                <div className={styles.RightAlign}>{slot6}</div>
+              </ConditionalRender>
+            </div>
+          </ConditionalRender>
+        </FilterActionsProvider>
       </div>
     </Box>
   );

From 120e96eaeb8ebda3dcf99d3917167e442bd19cdf Mon Sep 17 00:00:00 2001
From: Laura Griffee <laura@mailzone.com>
Date: Fri, 15 Sep 2023 14:39:20 -0600
Subject: [PATCH 066/102] Update public primitive `base` and `light-uplift`
 theme scales (#10485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

In order to support the opt out se23 feature flag with our pre v12
migrations we need to refactor how our new public primitive tokens are
being referenced in `base` and `light-uplift` themes.

### WHAT is this pull request doing?

- Maps our new tokens to their values in the `light-uplift` theme.

    <details>
    <summary>✨ New <code>border-radius</code> maps</summary>

    | New Token          | Value        |
    | ------------------------- | ------------------------ |
    | `--p-border-radius-0` | `size[0]`  |
    | `--p-border-radius-050` | `size['050']`  |
    | `--p-border-radius-100` | `size[100]`  |
    | `--p-border-radius-150` | `size[150]`  |
    | `--p-border-radius-200` | `size[200]`  |
    | `--p-border-radius-300` | `size[300]`  |
    | `--p-border-radius-400` | `size[400]`  |
    | `--p-border-radius-500` | `size[500]`  |
    | `--p-border-radius-750` | `size[750]`  |
    </details>

  <details>
  <summary>✨ New <code>border-width</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-border-width-0165` | `size[0165]`  |
  | `--p-border-width-025` | `size[025]`  |
  | `--p-border-width-050` | `size['050']`  |
  | `--p-border-width-100` | `size[100]`  |
  </details>

  <details>
  <summary>✨ New <code>space</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-space-050` | `size['050']`  |
  | `--p-space-100` | `size[100]`  |
  | `--p-space-150` | `size[150]`  |
  | `--p-space-200` | `size[200]`  |
  | `--p-space-300` | `size[300]`  |
  | `--p-space-400` | `size[400]`  |
  | `--p-space-500` | `size[500]`  |
  | `--p-space-600` | `size[600]`  |
  | `--p-space-800` | `size[800]`  |
  | `--p-space-1000` | `size[1000]`  |
  | `--p-space-1200` | `size[1200]`  |
  | `--p-space-1600` | `size[1600]`  |
  | `--p-space-2000` | `size[2000]`  |
  | `--p-space-2400` | `size[2400]`  |
  | `--p-space-2800` | `size[2800]`  |
  | `--p-space-3200` | `size[3200]`  |
  </details>

  <details>
  <summary>✨ New <code>height</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-height-0` | `size['0']`  |
  | `--p-height-025` | `size['025']`  |
  | `--p-height-050` | `size['050']`  |
  | `--p-height-100` | `size[100]`  |
  | `--p-height-150` | `size[150]`  |
  | `--p-height-200` | `size[200]`  |
  | `--p-height-300` | `size[300]`  |
  | `--p-height-400` | `size[400]`  |
  | `--p-height-500` | `size[500]`  |
  | `--p-height-600` | `size[600]`  |
  | `--p-height-700` | `size[700]`  |
  | `--p-height-800` | `size[800]`  |
  | `--p-height-900` | `size[900]`  |
  | `--p-height-1000` | `size[1000]`  |
  | `--p-height-1200` | `size[1200]`  |
  | `--p-height-1600` | `size[1600]`  |
  | `--p-height-2000` | `size[2000]`  |
  | `--p-height-2400` | `size[2400]`  |
  | `--p-height-2800` | `size[2800]`  |
  | `--p-height-3200` | `size[3200]`  |
  </details>

  <details>
  <summary>✨ New <code>width</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-width-0` | `size['0']`  |
  | `--p-width-025` | `size['025']`  |
  | `--p-width-050` | `size['050']`  |
  | `--p-width-100` | `size[100]`  |
  | `--p-width-150` | `size[150]`  |
  | `--p-width-200` | `size[200]`  |
  | `--p-width-300` | `size[300]`  |
  | `--p-width-400` | `size[400]`  |
  | `--p-width-500` | `size[500]`  |
  | `--p-width-600` | `size[600]`  |
  | `--p-width-700` | `size[700]`  |
  | `--p-width-800` | `size[800]`  |
  | `--p-width-900` | `size[900]`  |
  | `--p-width-1000` | `size[1000]`  |
  | `--p-width-1200` | `size[1200]`  |
  | `--p-width-1600` | `size[1600]`  |
  | `--p-width-2000` | `size[2000]`  |
  | `--p-width-2400` | `size[2400]`  |
  | `--p-width-2800` | `size[2800]`  |
  | `--p-width-3200` | `size[3200]`  |
  </details>

  <details>
  <summary>✨ New <code>font-size</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-font-size-275` | `size[275]`  |
  | ~`--p-font-size-300`~ | ~`size[300]`~  |
  | `--p-font-size-325` | `size[325]`  |
  | `--p-font-size-350` | `size[350]`  |
  | ~`--p-font-size-400`~ | ~`size[400]`~  |
  | ~`--p-font-size-500`~ | ~`size[500]`~  |
  | ~`--p-font-size-600`~ | ~`size[600]`~  |
  | `--p-font-size-750` | `size[750]`  |
  | `--p-font-size-900` | `size[900]`  |
  | `--p-font-size-1000` | `size[1000]`  |


  > [!NOTE]
> The following values were not added since they conflict with existing
tokens with the same name. These tokens will have their values updated
in the next major version v12:

  | New Token          | Value        | Value (in px)
| ------------------------- | ------------------------ |
------------------------ |
  | `--p-font-size-300` | `size[300]`  | `12px`  |
  | `--p-font-size-400` | `size[400]`  | `16px`    |
  | `--p-font-size-500` | `size[500]`  | `20px`    |
  | `--p-font-size-600` | `size[600]`  | `24px`    |

  </details>

  <details>
  <summary>✨ New <code>line-height</code> maps</summary>

  | New Token          | Value        |
  | ------------------------- | ------------------------ |
  | `--p-font-line-height-300` | `size[300]`  |
  | `--p-font-line-height-400` | `size[400]`  |
  | `--p-font-line-height-500` | `size[500]`  |
  | `--p-font-line-height-600` | `size[600]`  |
  | `--p-font-line-height-700` | `size[700]`  |
  | `--p-font-line-height-800` | `size[800]`  |
  | `--p-font-line-height-1000` | `size[1000]`  |
  | `--p-font-line-height-1200` | `size[1200]`  |
  </details>

- Maps our new tokens to the tokens they will be replacing in the `base`
theme (for opt out support)

    <details>
    <summary>↔️ Replacement <code>border-radius</code> maps</summary>

    | Deprecated Token          | Replacement Value        |
    | ------------------------- | ------------------------ |
    | `--p-border-radius-0-experimental` | `--p-border-radius-0` |
    | `--p-border-radius-05` | `--p-border-radius-050` |
    | `--p-border-radius-1` | `--p-border-radius-100` |
    | `--p-border-radius-1_5-experimental` | `--p-border-radius-150` |
    | `--p-border-radius-2` | `--p-border-radius-200` |
    | `--p-border-radius-3` | `--p-border-radius-300` |
    | `--p-border-radius-4` | `--p-border-radius-400` |
    | `--p-border-radius-5` | `--p-border-radius-500` |
    | `--p-border-radius-6` | `--p-border-radius-750` |

    </details>

    <details>
    <summary>↔️ Replacement <code>border-width</code> maps</summary>

    | Deprecated Token          | Replacement Value        |
    | ------------------------- | ------------------------ |
    | `--p-border-width-1` | `--p-border-width-025` |
    | `--p-border-width-1-experimental` | `--p-border-width-0165` |
    | `--p-border-width-2` | `--p-border-width-050` |
    | `--p-border-width-2-experimental` | `--p-border-width-025` |
    | `--p-border-width-3` | `--p-border-width-050` |
    | `--p-border-width-4` | `--p-border-width-100` |
    | `--p-border-width-5` | `--p-border-width-100` |
    </details>

    <details>
    <summary>↔️ Replacement <code>space</code> maps</summary>

    | Deprecated Token          | Replacement Value        |
    | ------------------------- | ------------------------ |
    | `--p-space-05` | `--p-space-050` |
    | `--p-space-1` | `--p-space-100` |
    | `--p-space-1_5-experimental` | `--p-space-150` |
    | `--p-space-2` | `--p-space-200` |
    | `--p-space-3` | `--p-space-300` |
    | `--p-space-4` | `--p-space-400` |
    | `--p-space-5` | `--p-space-500` |
    | `--p-space-6` | `--p-space-600` |
    | `--p-space-8` | `--p-space-800` |
    | `--p-space-10` | `--p-space-1000` |
    | `--p-space-12` | `--p-space-1200` |
    | `--p-space-16` | `--p-space-1600` |
    | `--p-space-20` | `--p-space-2000` |
    | `--p-space-24` | `--p-space-2400` |
    | `--p-space-28` | `--p-space-2800` |
    | `--p-space-32` | `--p-space-3200` |
    </details>

  <details>
  <summary>↔️ Replacement <code>font-size</code> maps</summary>

  | Deprecated Token          | Replacement Value        |
  | ------------------------- | ------------------------ |
  | `--p-font-size-70-experimental` | `--p-font-size-275` |
  | `--p-font-size-75` | `--p-font-size-300` |
  | `--p-font-size-80-experimental` | `--p-font-size-325` |
  | `--p-font-size-100` | `--p-font-size-350` |
  | `--p-font-size-200` | `--p-font-size-400` |
  | `--p-font-size-300` | `--p-font-size-500` |
  | `--p-font-size-400` | `--p-font-size-600` |
  | `--p-font-size-500` | `--p-font-size-750` |
  | `--p-font-size-600` | `--p-font-size-900` |
  | `--p-font-size-700` | `--p-font-size-1000` |
  </details>

  <details>
  <summary>↔️ Replacement <code>line-height</code> maps</summary>

  | Deprecated Token          | Replacement Value        |
  | ------------------------- | ------------------------ |
| `--p-font-line-height-075-experimental` | `--p-font-line-height-300` |
  | `--p-font-line-height-1` | `--p-font-line-height-400` |
  | `--p-font-line-height-2` | `--p-font-line-height-500` |
  | `--p-font-line-height-3` | `--p-font-line-height-600` |
  | `--p-font-line-height-4` | `--p-font-line-height-700` |
  | `--p-font-line-height-5` | `--p-font-line-height-800` |
  | `--p-font-line-height-6` | `--p-font-line-height-1000` |
  | `--p-font-line-height-7` | `--p-font-line-height-1200` |
  </details>

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/tasty-ducks-punch.md           |   5 +
 polaris-tokens/src/themes/base/border.ts  |  32 +++---
 polaris-tokens/src/themes/base/font.ts    |  34 ++++---
 polaris-tokens/src/themes/base/space.ts   |  37 ++++---
 polaris-tokens/src/themes/light-uplift.ts | 115 ++++++++++++++++------
 polaris-tokens/src/utilities.ts           |   4 +
 6 files changed, 152 insertions(+), 75 deletions(-)
 create mode 100644 .changeset/tasty-ducks-punch.md

diff --git a/.changeset/tasty-ducks-punch.md b/.changeset/tasty-ducks-punch.md
new file mode 100644
index 00000000000..aee4bba2602
--- /dev/null
+++ b/.changeset/tasty-ducks-punch.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': patch
+---
+
+Updated public primitive `base` and `light-uplift` theme scales
diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts
index 21d11fe9698..b02b92afd4f 100644
--- a/polaris-tokens/src/themes/base/border.ts
+++ b/polaris-tokens/src/themes/base/border.ts
@@ -1,6 +1,6 @@
-import {size} from '../../size';
 import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
+import {createVarName} from '../../utilities';
 
 type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
 
@@ -50,31 +50,31 @@ export const border: {
   [TokenName in BorderTokenName]: MetaTokenProperties;
 } = {
   'border-radius-0': {
-    value: size[0],
+    value: createVar('border-radius-0-experimental'),
   },
   'border-radius-050': {
-    value: size['050'],
+    value: createVar('border-radius-05'),
   },
   'border-radius-100': {
-    value: size[100],
+    value: createVar('border-radius-1'),
   },
   'border-radius-150': {
-    value: size[150],
+    value: createVar('border-radius-1_5-experimental'),
   },
   'border-radius-200': {
-    value: size[200],
+    value: createVar('border-radius-2'),
   },
   'border-radius-300': {
-    value: size[300],
+    value: createVar('border-radius-3'),
   },
   'border-radius-400': {
-    value: size[400],
+    value: createVar('border-radius-4'),
   },
   'border-radius-500': {
-    value: size[500],
+    value: createVar('border-radius-5'),
   },
   'border-radius-750': {
-    value: size[750],
+    value: createVar('border-radius-6'),
   },
   'border-radius-full': {
     value: '9999px',
@@ -107,16 +107,16 @@ export const border: {
     value: '6px',
   },
   'border-width-0165': {
-    value: size['0165'],
+    value: createVar('border-width-1-experimental'),
   },
   'border-width-025': {
-    value: size['025'],
+    value: createVar('border-width-1'),
   },
   'border-width-050': {
-    value: size['050'],
+    value: createVar('border-width-2'),
   },
   'border-width-100': {
-    value: size[100],
+    value: createVar('border-width-4'),
   },
   'border-width-1': {
     value: '1px',
@@ -140,3 +140,7 @@ export const border: {
     value: '1px',
   },
 };
+
+function createVar(borderTokenName: BorderTokenName) {
+  return `var(${createVarName(borderTokenName)})`;
+}
diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts
index 1a80dff4dc8..b0c2ec5ea03 100644
--- a/polaris-tokens/src/themes/base/font.ts
+++ b/polaris-tokens/src/themes/base/font.ts
@@ -1,5 +1,5 @@
-import {size} from '../../size';
 import type {Experimental} from '../../types';
+import {createVarName} from '../../utilities';
 import type {MetaTokenProperties} from '../types';
 
 type FontFamilyAlias = 'sans' | 'mono';
@@ -67,22 +67,22 @@ export const font: {
       "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
   },
   'font-size-275': {
-    value: size[275],
+    value: createVar('font-size-70-experimental'),
   },
   'font-size-325': {
-    value: size[325],
+    value: createVar('font-size-80-experimental'),
   },
   'font-size-350': {
-    value: size[350],
+    value: createVar('font-size-100'),
   },
   'font-size-750': {
-    value: size[750],
+    value: createVar('font-size-500'),
   },
   'font-size-900': {
-    value: size[900],
+    value: createVar('font-size-600'),
   },
   'font-size-1000': {
-    value: size[1000],
+    value: createVar('font-size-700'),
   },
   'font-size-70-experimental': {
     value: '11px',
@@ -127,28 +127,28 @@ export const font: {
     value: '700',
   },
   'font-line-height-300': {
-    value: size[300],
+    value: createVar('font-line-height-075-experimental'),
   },
   'font-line-height-400': {
-    value: size[400],
+    value: createVar('font-line-height-1'),
   },
   'font-line-height-500': {
-    value: size[500],
+    value: createVar('font-line-height-2'),
   },
   'font-line-height-600': {
-    value: size[600],
+    value: createVar('font-line-height-3'),
   },
   'font-line-height-700': {
-    value: size[700],
+    value: createVar('font-line-height-4'),
   },
   'font-line-height-800': {
-    value: size[800],
+    value: createVar('font-line-height-5'),
   },
   'font-line-height-1000': {
-    value: size[1000],
+    value: createVar('font-line-height-6'),
   },
   'font-line-height-1200': {
-    value: size[1200],
+    value: createVar('font-line-height-7'),
   },
   'font-line-height-075-experimental': {
     value: '12px',
@@ -175,3 +175,7 @@ export const font: {
     value: '48px',
   },
 };
+
+function createVar(fontTokenName: FontTokenName) {
+  return `var(${createVarName(fontTokenName)})`;
+}
diff --git a/polaris-tokens/src/themes/base/space.ts b/polaris-tokens/src/themes/base/space.ts
index c937cd1c8c5..1dbd6d5c713 100644
--- a/polaris-tokens/src/themes/base/space.ts
+++ b/polaris-tokens/src/themes/base/space.ts
@@ -1,5 +1,6 @@
 import {size} from '../../size';
 import type {Experimental} from '../../types';
+import {createVarName} from '../../utilities';
 import type {MetaTokenProperties} from '../types';
 
 type SpaceScaleExperimental = Experimental<'1_5'>;
@@ -56,52 +57,52 @@ export const space: {
     value: size['025'],
   },
   'space-050': {
-    value: size['050'],
+    value: createVar('space-05'),
   },
   'space-100': {
-    value: size[100],
+    value: createVar('space-1'),
   },
   'space-150': {
-    value: size[150],
+    value: createVar('space-1_5-experimental'),
   },
   'space-200': {
-    value: size[200],
+    value: createVar('space-2'),
   },
   'space-300': {
-    value: size[300],
+    value: createVar('space-3'),
   },
   'space-400': {
-    value: size[400],
+    value: createVar('space-4'),
   },
   'space-500': {
-    value: size[500],
+    value: createVar('space-5'),
   },
   'space-600': {
-    value: size[600],
+    value: createVar('space-6'),
   },
   'space-800': {
-    value: size[800],
+    value: createVar('space-8'),
   },
   'space-1000': {
-    value: size[1000],
+    value: createVar('space-10'),
   },
   'space-1200': {
-    value: size[1200],
+    value: createVar('space-12'),
   },
   'space-1600': {
-    value: size[1600],
+    value: createVar('space-16'),
   },
   'space-2000': {
-    value: size[2000],
+    value: createVar('space-20'),
   },
   'space-2400': {
-    value: size[2400],
+    value: createVar('space-24'),
   },
   'space-2800': {
-    value: size[2800],
+    value: createVar('space-28'),
   },
   'space-3200': {
-    value: size[3200],
+    value: createVar('space-32'),
   },
   'space-05': {
     value: '2px',
@@ -152,3 +153,7 @@ export const space: {
     value: '128px',
   },
 };
+
+function createVar(spaceTokenName: SpaceTokenName) {
+  return `var(${createVarName(spaceTokenName)})`;
+}
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
index 2e5eb408cd7..91d1875086f 100644
--- a/polaris-tokens/src/themes/light-uplift.ts
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -1,40 +1,27 @@
 import * as colors from '../colors-experimental';
+import {size} from '../size';
 
 import {createMetaTheme, createMetaThemePartial} from './utils';
 
 export const metaThemeLightUpliftPartial = createMetaThemePartial({
-  motion: {
-    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
-  },
-  font: {
-    'font-family-sans': {
-      value:
-        "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
-    },
-    'font-size-500': {value: '30px'},
-    'font-size-600': {value: '36px'},
-  },
-  shadow: {
-    'shadow-inset-lg': {
-      value:
-        'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
-    },
-    'shadow-inset-md': {
-      value:
-        'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
-    },
-    'shadow-inset-sm': {
-      value:
-        'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
-    },
-    'shadow-xs': {value: '0px 1px 0px rgba(0, 0, 0, 0.07)'},
-    'shadow-sm': {value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)'},
-    'shadow-md': {value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)'},
-    'shadow-lg': {value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)'},
-    'shadow-xl': {value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)'},
-    'shadow-2xl': {value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)'},
+  border: {
+    // v12.0.0
+    'border-radius-0': {value: size[0]},
+    'border-radius-050': {value: size['050']},
+    'border-radius-100': {value: size[100]},
+    'border-radius-150': {value: size[150]},
+    'border-radius-200': {value: size[200]},
+    'border-radius-300': {value: size[300]},
+    'border-radius-400': {value: size[400]},
+    'border-radius-500': {value: size[500]},
+    'border-radius-750': {value: size[750]},
+    'border-width-0165': {value: size['0165']},
+    'border-width-025': {value: size['025']},
+    'border-width-050': {value: size['050']},
+    'border-width-100': {value: size[100]},
   },
   color: {
+    // v11.0.0
     'color-bg-inverse': {value: colors.gray[16]()},
     'color-bg-inset-strong': {value: colors.gray[15]()},
     'color-bg-inverse-hover': {value: colors.gray[14]()},
@@ -170,6 +157,74 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'color-text-magic-strong': {value: colors.purple[15]},
     'color-text-magic': {value: colors.purple[14]},
   },
+  font: {
+    // v12.0.0
+    'font-size-275': {value: size[275]},
+    'font-size-325': {value: size[325]},
+    'font-size-350': {value: size[350]},
+    'font-size-750': {value: size[750]},
+    'font-size-900': {value: size[900]},
+    'font-size-1000': {value: size[1000]},
+    'font-line-height-300': {value: size[300]},
+    'font-line-height-400': {value: size[400]},
+    'font-line-height-500': {value: size[500]},
+    'font-line-height-600': {value: size[600]},
+    'font-line-height-700': {value: size[700]},
+    'font-line-height-800': {value: size[800]},
+    'font-line-height-1000': {value: size[1000]},
+    'font-line-height-1200': {value: size[1200]},
+    // v11.0.0
+    'font-family-sans': {
+      value:
+        "'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+    },
+    'font-size-500': {value: '30px'},
+    'font-size-600': {value: '36px'},
+  },
+  motion: {
+    // v11.0.0
+    'motion-ease-out': {value: 'cubic-bezier(0.19, 0.91, 0.38, 1)'},
+  },
+  space: {
+    // v12.0.0
+    'space-050': {value: size['050']},
+    'space-100': {value: size[100]},
+    'space-150': {value: size[150]},
+    'space-200': {value: size[200]},
+    'space-300': {value: size[300]},
+    'space-400': {value: size[400]},
+    'space-500': {value: size[500]},
+    'space-600': {value: size[600]},
+    'space-800': {value: size[800]},
+    'space-1000': {value: size[1000]},
+    'space-1200': {value: size[1200]},
+    'space-1600': {value: size[1600]},
+    'space-2000': {value: size[2000]},
+    'space-2400': {value: size[2400]},
+    'space-2800': {value: size[2800]},
+    'space-3200': {value: size[3200]},
+  },
+  shadow: {
+    // v11.0.0
+    'shadow-inset-lg': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.2), inset 1px 0px 1px rgba(0, 0, 0, 0.2), inset 0px 2px 1px rgba(0, 0, 0, 0.6)',
+    },
+    'shadow-inset-md': {
+      value:
+        'inset -1px 0px 1px rgba(0, 0, 0, 0.12), inset 1px 0px 1px rgba(0, 0, 0, 0.12), inset 0px 2px 1px rgba(0, 0, 0, 0.2)',
+    },
+    'shadow-inset-sm': {
+      value:
+        'inset 0px 1px 1px rgba(0, 0, 0, 0.15), inset 0px 1px 2px rgba(255, 255, 255, 0.15)',
+    },
+    'shadow-xs': {value: '0px 1px 0px rgba(0, 0, 0, 0.07)'},
+    'shadow-sm': {value: '0px 3px 1px -1px rgba(0, 0, 0, 0.07)'},
+    'shadow-md': {value: '0px 4px 6px -2px rgba(0, 0, 0, 0.2)'},
+    'shadow-lg': {value: '0px 8px 16px -4px rgba(0, 0, 0, 0.22)'},
+    'shadow-xl': {value: '0px 12px 20px -8px rgba(0, 0, 0, 0.24)'},
+    'shadow-2xl': {value: '0px 20px 20px -8px rgba(0, 0, 0, 0.28)'},
+  },
 });
 
 export const metaThemeLightUplift = createMetaTheme(
diff --git a/polaris-tokens/src/utilities.ts b/polaris-tokens/src/utilities.ts
index f496ab4e007..94b3344ac56 100644
--- a/polaris-tokens/src/utilities.ts
+++ b/polaris-tokens/src/utilities.ts
@@ -92,6 +92,10 @@ export function tokensToRems<T extends Exact<MetadataGroup, T>>(tokenGroup: T) {
   ) as T;
 }
 
+export function createVarName(token: string) {
+  return `--p-${token}`;
+}
+
 export function createVar(token: string) {
   return `--p-${token}`;
 }

From fe1aac1b5a9868c3decda53b94150e0242905d04 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Mon, 18 Sep 2023 11:09:14 -0700
Subject: [PATCH 067/102] Update private primitive `colors` (#10465)

### WHY are these changes introduced?

Fixes #10414

### WHAT is this pull request doing?

- Removed transparency from the `gray` color scale
- Added a new private primitive `blackAlpha` color scale
- Updated typings to better enforce our conventions for opaque and
transparent scales
- Find/replaced opaque `gray` color scale references with the original
computed member access syntax
- Updated transparent `gray` color scale references to use the new
`blackAlpha` color scale

---------

Co-authored-by: Sara Hill <sara.hill@shopify.com>
---
 .changeset/chatty-dryers-sneeze.md        |   5 +
 polaris-tokens/src/colors-experimental.ts |  59 ++++++----
 polaris-tokens/src/themes/base/color.ts   |  32 +++---
 polaris-tokens/src/themes/light-uplift.ts | 124 +++++++++++-----------
 4 files changed, 122 insertions(+), 98 deletions(-)
 create mode 100644 .changeset/chatty-dryers-sneeze.md

diff --git a/.changeset/chatty-dryers-sneeze.md b/.changeset/chatty-dryers-sneeze.md
new file mode 100644
index 00000000000..0bab0246919
--- /dev/null
+++ b/.changeset/chatty-dryers-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': minor
+---
+
+Updated private primitive `colors`
diff --git a/polaris-tokens/src/colors-experimental.ts b/polaris-tokens/src/colors-experimental.ts
index 3f0d08bc7d3..44458fb20d3 100644
--- a/polaris-tokens/src/colors-experimental.ts
+++ b/polaris-tokens/src/colors-experimental.ts
@@ -17,30 +17,30 @@ type ColorScale =
   | '16';
 
 type Color = {
-  [Scale in ColorScale]: string;
+  [Scale in ColorScale]: `rgba(${number}, ${number}, ${number}, 1)`;
 };
 
-type ColorWithAlpha = {
-  [Scale in ColorScale]: (alpha?: string) => string;
+type ColorAlpha = {
+  [Scale in ColorScale]: `rgba(${number}, ${number}, ${number}, ${number})`;
 };
 
-export const gray: ColorWithAlpha = {
-  '1': (alpha = '1') => `rgba(255, 255, 255, ${alpha})`,
-  '2': (alpha = '1') => `rgba(253, 253, 253, ${alpha})`,
-  '3': (alpha = '1') => `rgba(250, 250, 250, ${alpha})`,
-  '4': (alpha = '1') => `rgba(247, 247, 247, ${alpha})`,
-  '5': (alpha = '1') => `rgba(243, 243, 243, ${alpha})`,
-  '6': (alpha = '1') => `rgba(241, 241, 241, ${alpha})`,
-  '7': (alpha = '1') => `rgba(235, 235, 235, ${alpha})`,
-  '8': (alpha = '1') => `rgba(227, 227, 227, ${alpha})`,
-  '9': (alpha = '1') => `rgba(212, 212, 212, ${alpha})`,
-  '10': (alpha = '1') => `rgba(204, 204, 204, ${alpha})`,
-  '11': (alpha = '1') => `rgba(181, 181, 181, ${alpha})`,
-  '12': (alpha = '1') => `rgba(138, 138, 138, ${alpha})`,
-  '13': (alpha = '1') => `rgba(97, 97, 97, ${alpha})`,
-  '14': (alpha = '1') => `rgba(74, 74, 74, ${alpha})`,
-  '15': (alpha = '1') => `rgba(48, 48, 48, ${alpha})`,
-  '16': (alpha = '1') => `rgba(26, 26, 26, ${alpha})`,
+export const gray: Color = {
+  1: 'rgba(255, 255, 255, 1)',
+  2: 'rgba(253, 253, 253, 1)',
+  3: 'rgba(250, 250, 250, 1)',
+  4: 'rgba(247, 247, 247, 1)',
+  5: 'rgba(243, 243, 243, 1)',
+  6: 'rgba(241, 241, 241, 1)',
+  7: 'rgba(235, 235, 235, 1)',
+  8: 'rgba(227, 227, 227, 1)',
+  9: 'rgba(212, 212, 212, 1)',
+  10: 'rgba(204, 204, 204, 1)',
+  11: 'rgba(181, 181, 181, 1)',
+  12: 'rgba(138, 138, 138, 1)',
+  13: 'rgba(97, 97, 97, 1)',
+  14: 'rgba(74, 74, 74, 1)',
+  15: 'rgba(48, 48, 48, 1)',
+  16: 'rgba(26, 26, 26, 1)',
 };
 
 export const azure: Color = {
@@ -270,3 +270,22 @@ export const yellow: Color = {
   '15': 'rgba(51, 46, 0, 1)',
   '16': 'rgba(31, 28, 0, 1)',
 };
+
+export const blackAlpha: ColorAlpha = {
+  1: 'rgba(0, 0, 0, 0)',
+  2: 'rgba(0, 0, 0, 0.01)',
+  3: 'rgba(0, 0, 0, 0.02)',
+  4: 'rgba(0, 0, 0, 0.03)',
+  5: 'rgba(0, 0, 0, 0.05)',
+  6: 'rgba(0, 0, 0, 0.06)',
+  7: 'rgba(0, 0, 0, 0.08)',
+  8: 'rgba(0, 0, 0, 0.11)',
+  9: 'rgba(0, 0, 0, 0.17)',
+  10: 'rgba(0, 0, 0, 0.20)',
+  11: 'rgba(0, 0, 0, 0.29)',
+  12: 'rgba(0, 0, 0, 0.46)',
+  13: 'rgba(0, 0, 0, 0.62)',
+  14: 'rgba(0, 0, 0, 0.71)',
+  15: 'rgba(0, 0, 0, 0.81)',
+  16: 'rgba(0, 0, 0, 0.90)',
+};
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
index f040652db85..5b1217cc113 100644
--- a/polaris-tokens/src/themes/base/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -768,61 +768,61 @@ export const color: {
   },
   // Experimental tokens
   'color-bg-backdrop-experimental': {
-    value: colorsExperimental.gray[16]('0.75'),
+    value: colorsExperimental.blackAlpha[14],
     description: '',
   },
   'color-bg-primary-disabled-experimental': {
-    value: colorsExperimental.gray[9](),
+    value: colorsExperimental.gray[9],
     description: '',
   },
   'color-bg-secondary-experimental': {
-    value: colorsExperimental.gray[5](),
+    value: colorsExperimental.gray[5],
     description: '',
   },
   'color-bg-input-hover-experimental': {
-    value: colorsExperimental.gray[3](),
+    value: colorsExperimental.gray[3],
     description: '',
   },
   'color-border-input-active-experimental': {
-    value: colorsExperimental.gray[16](),
+    value: colorsExperimental.gray[16],
   },
   'color-border-critical-strong-experimental': {
     value: colorsExperimental.red[14],
   },
   'color-bg-input-active-experimental': {
-    value: colorsExperimental.gray[4](),
+    value: colorsExperimental.gray[4],
     description: '',
   },
   'color-bg-transparent-experimental': {
-    value: colorsExperimental.gray[16]('0'),
+    value: colorsExperimental.blackAlpha[1],
     description: '',
   },
   'color-bg-transparent-subdued-experimental': {
-    value: colorsExperimental.gray[16]('0.07'),
+    value: colorsExperimental.blackAlpha[6],
     description: '',
   },
   'color-bg-transparent-hover-experimental': {
-    value: colorsExperimental.gray[16]('0.05'),
+    value: colorsExperimental.blackAlpha[5],
     description: '',
   },
   'color-bg-transparent-active-experimental': {
-    value: colorsExperimental.gray[16]('0.07'),
+    value: colorsExperimental.blackAlpha[6],
     description: '',
   },
   'color-bg-transparent-disabled-experimental': {
-    value: colorsExperimental.gray[16]('0.04'),
+    value: colorsExperimental.blackAlpha[5],
     description: '',
   },
   'color-bg-transparent-secondary-disabled-experimental': {
-    value: colorsExperimental.gray[16]('0.08'),
+    value: colorsExperimental.blackAlpha[7],
     description: '',
   },
   'color-bg-transparent-primary-disabled-experimental': {
-    value: colorsExperimental.gray[16]('0.18'),
+    value: colorsExperimental.blackAlpha[9],
     description: '',
   },
   'color-bg-transparent-primary-experimental': {
-    value: colorsExperimental.gray[16]('0.60'),
+    value: colorsExperimental.blackAlpha[13],
     description: '',
   },
   'color-bg-success-strong-hover-experimental': {
@@ -874,11 +874,11 @@ export const color: {
     description: '',
   },
   'color-avatar-background-experimental': {
-    value: colorsExperimental.gray[11](),
+    value: colorsExperimental.gray[11],
     description: '',
   },
   'color-avatar-color-experimental': {
-    value: colorsExperimental.gray[1](),
+    value: colorsExperimental.gray[1],
     description: '',
   },
   'color-avatar-style-one-background-experimental': {
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
index 91d1875086f..0ec1df25de7 100644
--- a/polaris-tokens/src/themes/light-uplift.ts
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -22,37 +22,37 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
   },
   color: {
     // v11.0.0
-    'color-bg-inverse': {value: colors.gray[16]()},
-    'color-bg-inset-strong': {value: colors.gray[15]()},
-    'color-bg-inverse-hover': {value: colors.gray[14]()},
-    'color-bg-inverse-active': {value: colors.gray[13]()},
-    'color-bg-strong-hover': {value: colors.gray[9]()},
-    'color-bg-strong-active': {value: colors.gray[10]()},
-    'color-bg-strong': {value: colors.gray[8]()},
-    'color-bg-subdued-active': {value: colors.gray[7]()},
-    'color-bg-disabled': {value: colors.gray[7]()},
-    'color-bg-interactive-disabled': {value: colors.gray[7]()},
-    'color-bg-app': {value: colors.gray[6]()},
-    'color-bg-app-hover': {value: colors.gray[2]()},
-    'color-bg-app-selected': {value: colors.gray[3]()},
-    'color-bg-active': {value: colors.gray[4]()},
-    'color-bg-subdued-hover': {value: colors.gray[6]()},
-    'color-bg-inset': {value: colors.gray[6]()},
-    'color-bg-hover': {value: colors.gray[3]()},
-    'color-bg-subdued': {value: colors.gray[4]()},
-    'color-bg-input': {value: colors.gray[1]()},
-    'color-bg': {value: colors.gray[1]()},
-    'color-bg-primary-active': {value: colors.gray[16]()},
-    'color-bg-primary-hover': {value: colors.gray[16]()},
-    'color-bg-primary': {value: colors.gray[15]()},
+    'color-bg-inverse': {value: colors.gray[16]},
+    'color-bg-inset-strong': {value: colors.gray[15]},
+    'color-bg-inverse-hover': {value: colors.gray[14]},
+    'color-bg-inverse-active': {value: colors.gray[13]},
+    'color-bg-strong-hover': {value: colors.gray[9]},
+    'color-bg-strong-active': {value: colors.gray[10]},
+    'color-bg-strong': {value: colors.gray[8]},
+    'color-bg-subdued-active': {value: colors.gray[7]},
+    'color-bg-disabled': {value: colors.gray[7]},
+    'color-bg-interactive-disabled': {value: colors.gray[7]},
+    'color-bg-app': {value: colors.gray[6]},
+    'color-bg-app-hover': {value: colors.gray[2]},
+    'color-bg-app-selected': {value: colors.gray[3]},
+    'color-bg-active': {value: colors.gray[4]},
+    'color-bg-subdued-hover': {value: colors.gray[6]},
+    'color-bg-inset': {value: colors.gray[6]},
+    'color-bg-hover': {value: colors.gray[3]},
+    'color-bg-subdued': {value: colors.gray[4]},
+    'color-bg-input': {value: colors.gray[1]},
+    'color-bg': {value: colors.gray[1]},
+    'color-bg-primary-active': {value: colors.gray[16]},
+    'color-bg-primary-hover': {value: colors.gray[16]},
+    'color-bg-primary': {value: colors.gray[15]},
     'color-bg-success-strong': {value: colors.green[12]},
     'color-bg-success': {value: colors.green[3]},
-    'color-bg-primary-subdued-active': {value: colors.gray[6]()},
+    'color-bg-primary-subdued-active': {value: colors.gray[6]},
     'color-bg-success-subdued': {value: colors.green[3]},
-    'color-bg-primary-subdued-hover': {value: colors.gray[7]()},
+    'color-bg-primary-subdued-hover': {value: colors.gray[7]},
     'color-bg-success-subdued-hover': {value: colors.green[5]},
-    'color-bg-primary-subdued': {value: colors.gray[8]()},
-    'color-bg-primary-subdued-selected': {value: colors.gray[6]()},
+    'color-bg-primary-subdued': {value: colors.gray[8]},
+    'color-bg-primary-subdued-selected': {value: colors.gray[6]},
     'color-bg-critical-strong-active': {value: colors.red[14]},
     'color-bg-critical-strong-hover': {value: colors.red[13]},
     'color-bg-critical-strong': {value: colors.red[12]},
@@ -70,13 +70,13 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'color-bg-info': {value: colors.azure[4]},
     'color-bg-info-subdued': {value: colors.azure[3]},
     'color-bg-info-subdued-hover': {value: colors.azure[4]},
-    'color-bg-interactive-active': {value: colors.gray[14]()},
-    'color-bg-interactive-hover': {value: colors.gray[15]()},
-    'color-bg-interactive': {value: colors.gray[16]()},
-    'color-bg-interactive-subdued-active': {value: colors.gray[6]()},
-    'color-bg-interactive-subdued-hover': {value: colors.gray[7]()},
-    'color-bg-interactive-subdued': {value: colors.gray[8]()},
-    'color-bg-interactive-selected': {value: colors.gray[6]()},
+    'color-bg-interactive-active': {value: colors.gray[14]},
+    'color-bg-interactive-hover': {value: colors.gray[15]},
+    'color-bg-interactive': {value: colors.gray[16]},
+    'color-bg-interactive-subdued-active': {value: colors.gray[6]},
+    'color-bg-interactive-subdued-hover': {value: colors.gray[7]},
+    'color-bg-interactive-subdued': {value: colors.gray[8]},
+    'color-bg-interactive-selected': {value: colors.gray[6]},
     'color-bg-warning': {value: colors.orange[7]},
     'color-bg-magic-strong': {value: colors.purple[12]},
     'color-bg-magic-hover': {value: colors.purple[7]},
@@ -85,17 +85,17 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'color-bg-magic-subdued-hover': {value: colors.purple[4]},
     'color-bg-magic-subdued-active': {value: colors.purple[6]},
     'color-bg-magic-subdued': {value: colors.purple[3]},
-    'color-border-input-hover': {value: colors.gray[13]()},
-    'color-border-inverse': {value: colors.gray[13]()},
-    'color-border-strong-hover': {value: colors.gray[11]()},
-    'color-border-input': {value: colors.gray[12]()},
-    'color-border-hover': {value: colors.gray[10]()},
-    'color-border-strong': {value: colors.gray[10]()},
-    'color-border': {value: colors.gray[8]()},
-    'color-border-disabled': {value: colors.gray[7]()},
-    'color-border-subdued': {value: colors.gray[7]()},
-    'color-border-interactive-disabled': {value: colors.gray[7]()},
-    'color-border-primary': {value: colors.gray[8]()},
+    'color-border-input-hover': {value: colors.gray[13]},
+    'color-border-inverse': {value: colors.gray[13]},
+    'color-border-strong-hover': {value: colors.gray[11]},
+    'color-border-input': {value: colors.gray[12]},
+    'color-border-hover': {value: colors.gray[10]},
+    'color-border-strong': {value: colors.gray[10]},
+    'color-border': {value: colors.gray[8]},
+    'color-border-disabled': {value: colors.gray[7]},
+    'color-border-subdued': {value: colors.gray[7]},
+    'color-border-interactive-disabled': {value: colors.gray[7]},
+    'color-border-primary': {value: colors.gray[8]},
     'color-border-success': {value: colors.green[5]},
     'color-border-success-subdued': {value: colors.green[5]},
     'color-border-critical-active': {value: colors.red[11]},
@@ -113,14 +113,14 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'color-border-interactive-subdued': {value: colors.blue[13]},
     'color-border-magic-strong': {value: colors.purple[12]},
     'color-border-magic': {value: colors.purple[10]},
-    'color-icon-hover': {value: colors.gray[15]()},
-    'color-icon': {value: colors.gray[14]()},
-    'color-icon-subdued': {value: colors.gray[12]()},
-    'color-icon-disabled': {value: colors.gray[10]()},
-    'color-icon-interactive-disabled': {value: colors.gray[10]()},
-    'color-icon-inverse': {value: colors.gray[8]()},
-    'color-icon-on-color': {value: colors.gray[1]()},
-    'color-icon-primary': {value: colors.gray[16]()},
+    'color-icon-hover': {value: colors.gray[15]},
+    'color-icon': {value: colors.gray[14]},
+    'color-icon-subdued': {value: colors.gray[12]},
+    'color-icon-disabled': {value: colors.gray[10]},
+    'color-icon-interactive-disabled': {value: colors.gray[10]},
+    'color-icon-inverse': {value: colors.gray[8]},
+    'color-icon-on-color': {value: colors.gray[1]},
+    'color-icon-primary': {value: colors.gray[16]},
     'color-icon-success': {value: colors.green[12]},
     'color-icon-critical': {value: colors.red[11]},
     'color-icon-caution': {value: colors.yellow[11]},
@@ -131,17 +131,17 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'color-icon-interactive': {value: colors.blue[13]},
     'color-icon-interactive-inverse': {value: colors.blue[8]},
     'color-icon-magic': {value: colors.purple[13]},
-    'color-text': {value: colors.gray[15]()},
-    'color-text-subdued': {value: colors.gray[13]()},
-    'color-text-disabled': {value: colors.gray[11]()},
-    'color-text-interactive-disabled': {value: colors.gray[10]()},
-    'color-text-inverse-subdued': {value: colors.gray[10]()},
-    'color-text-inverse': {value: colors.gray[8]()},
-    'color-text-on-color': {value: colors.gray[1]()},
+    'color-text': {value: colors.gray[15]},
+    'color-text-subdued': {value: colors.gray[13]},
+    'color-text-disabled': {value: colors.gray[11]},
+    'color-text-interactive-disabled': {value: colors.gray[10]},
+    'color-text-inverse-subdued': {value: colors.gray[10]},
+    'color-text-inverse': {value: colors.gray[8]},
+    'color-text-on-color': {value: colors.gray[1]},
     'color-text-success-strong': {value: colors.green[15]},
     'color-text-success': {value: colors.green[15]},
-    'color-text-primary': {value: colors.gray[14]()},
-    'color-text-primary-hover': {value: colors.gray[14]()},
+    'color-text-primary': {value: colors.gray[14]},
+    'color-text-primary-hover': {value: colors.gray[14]},
     'color-text-critical-strong': {value: colors.red[14]},
     'color-text-critical-active': {value: colors.red[16]},
     'color-text-critical': {value: colors.red[14]},

From c6f9272a9536ca87ed5ed79321261b30ee16c6cd Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Mon, 18 Sep 2023 14:40:58 -0400
Subject: [PATCH 068/102] [polaris.shopify.com] Fix Modal examples (#10541)

---
 .../pages/examples/modal-default.tsx          | 54 +++++-----
 .../pages/examples/modal-large.tsx            | 79 ++++++++-------
 .../pages/examples/modal-small.tsx            | 79 ++++++++-------
 .../examples/modal-with-activator-ref.tsx     | 56 ++++++-----
 .../examples/modal-with-primary-action.tsx    | 58 ++++++-----
 ...dal-with-primary-and-secondary-actions.tsx | 98 ++++++++++---------
 .../examples/modal-with-scroll-listener.tsx   | 38 +++----
 .../pages/examples/modal-without-a-title.tsx  | 56 ++++++-----
 .../modal-without-an-activator-prop.tsx       | 60 ++++++------
 9 files changed, 308 insertions(+), 270 deletions(-)

diff --git a/polaris.shopify.com/pages/examples/modal-default.tsx b/polaris.shopify.com/pages/examples/modal-default.tsx
index 12405cf2b43..79a34bde58c 100644
--- a/polaris.shopify.com/pages/examples/modal-default.tsx
+++ b/polaris.shopify.com/pages/examples/modal-default.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -11,32 +11,34 @@ function ModalExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+      <Frame>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            <p>
-              Use Instagram posts to share your products with millions of
-              people. Let shoppers buy from your store without leaving
-              Instagram.
-            </p>
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              <p>
+                Use Instagram posts to share your products with millions of
+                people. Let shoppers buy from your store without leaving
+                Instagram.
+              </p>
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-large.tsx b/polaris.shopify.com/pages/examples/modal-large.tsx
index e21ec8bfd20..22499c280c7 100644
--- a/polaris.shopify.com/pages/examples/modal-large.tsx
+++ b/polaris.shopify.com/pages/examples/modal-large.tsx
@@ -1,4 +1,11 @@
-import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
+import {
+  Button,
+  Modal,
+  LegacyStack,
+  DropZone,
+  Checkbox,
+  Frame,
+} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -14,41 +21,43 @@ function LargeModalExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        large
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+      <Frame>
+        <Modal
+          large
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-small.tsx b/polaris.shopify.com/pages/examples/modal-small.tsx
index 59d0eb2af1f..8ea1b30bbdb 100644
--- a/polaris.shopify.com/pages/examples/modal-small.tsx
+++ b/polaris.shopify.com/pages/examples/modal-small.tsx
@@ -1,4 +1,11 @@
-import {Button, Modal, LegacyStack, DropZone, Checkbox} from '@shopify/polaris';
+import {
+  Button,
+  Modal,
+  LegacyStack,
+  DropZone,
+  Checkbox,
+  Frame,
+} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -14,41 +21,43 @@ function SmallModalExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        small
-        activator={activator}
-        open={active}
-        onClose={toggleActive}
-        title="Import customers by CSV"
-        primaryAction={{
-          content: 'Import customers',
-          onAction: toggleActive,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+      <Frame>
+        <Modal
+          small
+          activator={activator}
+          open={active}
+          onClose={toggleActive}
+          title="Import customers by CSV"
+          primaryAction={{
+            content: 'Import customers',
             onAction: toggleActive,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <DropZone
-              accept=".csv"
-              errorOverlayText="File type must be .csv"
-              type="file"
-              onDrop={() => {}}
-            >
-              <DropZone.FileUpload />
-            </DropZone>
-            <Checkbox
-              checked={checked}
-              label="Overwrite existing customers that have the same email or phone"
-              onChange={handleCheckbox}
-            />
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: toggleActive,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <DropZone
+                accept=".csv"
+                errorOverlayText="File type must be .csv"
+                type="file"
+                onDrop={() => {}}
+              >
+                <DropZone.FileUpload />
+              </DropZone>
+              <Checkbox
+                checked={checked}
+                label="Overwrite existing customers that have the same email or phone"
+                onChange={handleCheckbox}
+              />
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx b/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
index b82d88e5947..a98921a9e2a 100644
--- a/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
+++ b/polaris.shopify.com/pages/examples/modal-with-activator-ref.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback, useRef} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -21,33 +21,35 @@ function ModalExample() {
 
   return (
     <div style={{height: '500px'}}>
-      {activator}
-      <Modal
-        activator={buttonRef}
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+      <Frame>
+        {activator}
+        <Modal
+          activator={buttonRef}
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            <p>
-              Use Instagram posts to share your products with millions of
-              people. Let shoppers buy from your store without leaving
-              Instagram.
-            </p>
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              <p>
+                Use Instagram posts to share your products with millions of
+                people. Let shoppers buy from your store without leaving
+                Instagram.
+              </p>
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx b/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
index 83f49152dab..fcf77a4d806 100644
--- a/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
+++ b/polaris.shopify.com/pages/examples/modal-with-primary-action.tsx
@@ -1,4 +1,10 @@
-import {Button, Modal, LegacyStack, TextContainer} from '@shopify/polaris';
+import {
+  Button,
+  Modal,
+  LegacyStack,
+  TextContainer,
+  Frame,
+} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -11,30 +17,32 @@ function ModalWithPrimaryActionExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={toggleModal}
-        title="Get a shareable link"
-        primaryAction={{
-          content: 'Close',
-          onAction: toggleModal,
-        }}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <TextContainer>
-                <p>
-                  You can share this discount link with your customers via email
-                  or social media. Your discount will be automatically applied
-                  at checkout.
-                </p>
-              </TextContainer>
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
+      <Frame>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={toggleModal}
+          title="Get a shareable link"
+          primaryAction={{
+            content: 'Close',
+            onAction: toggleModal,
+          }}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <TextContainer>
+                  <p>
+                    You can share this discount link with your customers via
+                    email or social media. Your discount will be automatically
+                    applied at checkout.
+                  </p>
+                </TextContainer>
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx b/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
index b6163d2bc86..826fb0fe761 100644
--- a/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
+++ b/polaris.shopify.com/pages/examples/modal-with-primary-and-secondary-actions.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, LegacyStack, ChoiceList} from '@shopify/polaris';
+import {Button, Modal, LegacyStack, ChoiceList, Frame} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -35,54 +35,56 @@ function ModalWithPrimaryAndSecondaryActionsExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        onClose={handleClose}
-        title="Export customers"
-        primaryAction={{
-          content: 'Export customers',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Cancel',
+      <Frame>
+        <Modal
+          activator={activator}
+          open={active}
+          onClose={handleClose}
+          title="Export customers"
+          primaryAction={{
+            content: 'Export customers',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <LegacyStack vertical>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export"
-                choices={[
-                  {label: 'Current page', value: CURRENT_PAGE},
-                  {label: 'All customers', value: ALL_CUSTOMERS},
-                  {label: 'Selected customers', value: SELECTED_CUSTOMERS},
-                ]}
-                selected={selectedExport}
-                onChange={handleSelectedExport}
-              />
-            </LegacyStack.Item>
-            <LegacyStack.Item>
-              <ChoiceList
-                title="Export as"
-                choices={[
-                  {
-                    label:
-                      'CSV for Excel, Numbers, or other spreadsheet programs',
-                    value: CSV_EXCEL,
-                  },
-                  {label: 'Plain CSV file', value: CSV_PLAIN},
-                ]}
-                selected={selectedExportAs}
-                onChange={handleSelectedExportAs}
-              />
-            </LegacyStack.Item>
-          </LegacyStack>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Cancel',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <LegacyStack vertical>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export"
+                  choices={[
+                    {label: 'Current page', value: CURRENT_PAGE},
+                    {label: 'All customers', value: ALL_CUSTOMERS},
+                    {label: 'Selected customers', value: SELECTED_CUSTOMERS},
+                  ]}
+                  selected={selectedExport}
+                  onChange={handleSelectedExport}
+                />
+              </LegacyStack.Item>
+              <LegacyStack.Item>
+                <ChoiceList
+                  title="Export as"
+                  choices={[
+                    {
+                      label:
+                        'CSV for Excel, Numbers, or other spreadsheet programs',
+                      value: CSV_EXCEL,
+                    },
+                    {label: 'Plain CSV file', value: CSV_PLAIN},
+                  ]}
+                  selected={selectedExportAs}
+                  onChange={handleSelectedExportAs}
+                />
+              </LegacyStack.Item>
+            </LegacyStack>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx b/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
index 2f68314e3d8..3b0766c1cc8 100644
--- a/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
+++ b/polaris.shopify.com/pages/examples/modal-with-scroll-listener.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -13,23 +13,25 @@ function ModalWithScrollListenerExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        activator={activator}
-        open={active}
-        title="Scrollable content"
-        onClose={handleChange}
-        onScrolledToBottom={handleScrollBottom}
-      >
-        {Array.from({length: 50}, (_, index) => (
-          <Modal.Section key={index}>
-            <TextContainer>
-              <p>
-                Item <a href="#">#{index}</a>
-              </p>
-            </TextContainer>
-          </Modal.Section>
-        ))}
-      </Modal>
+      <Frame>
+        <Modal
+          activator={activator}
+          open={active}
+          title="Scrollable content"
+          onClose={handleChange}
+          onScrolledToBottom={handleScrollBottom}
+        >
+          {Array.from({length: 50}, (_, index) => (
+            <Modal.Section key={index}>
+              <TextContainer>
+                <p>
+                  Item <a href="#">#{index}</a>
+                </p>
+              </TextContainer>
+            </Modal.Section>
+          ))}
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx b/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
index 11f0999fdef..30e5e81b635 100644
--- a/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
+++ b/polaris.shopify.com/pages/examples/modal-without-a-title.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -11,33 +11,35 @@ function ModalWithoutTitleExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <Modal
-        title="Reach more shoppers with Instagram product tags"
-        titleHidden
-        activator={activator}
-        open={active}
-        onClose={handleChange}
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleChange,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+      <Frame>
+        <Modal
+          title="Reach more shoppers with Instagram product tags"
+          titleHidden
+          activator={activator}
+          open={active}
+          onClose={handleChange}
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleChange,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            <p>
-              Use Instagram posts to share your products with millions of
-              people. Let shoppers buy from your store without leaving
-              Instagram.
-            </p>
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleChange,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              <p>
+                Use Instagram posts to share your products with millions of
+                people. Let shoppers buy from your store without leaving
+                Instagram.
+              </p>
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx b/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
index 2d9f0b2b7b3..0879c1402cb 100644
--- a/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
+++ b/polaris.shopify.com/pages/examples/modal-without-an-activator-prop.tsx
@@ -1,4 +1,4 @@
-import {Button, Modal, TextContainer} from '@shopify/polaris';
+import {Button, Frame, Modal, TextContainer} from '@shopify/polaris';
 import {useState, useCallback, useRef} from 'react';
 
 function ModalExample() {
@@ -17,35 +17,37 @@ function ModalExample() {
 
   return (
     <div style={{height: '500px'}}>
-      <div ref={button}>
-        <Button onClick={handleOpen}>Open</Button>
-      </div>
-      <Modal
-        instant
-        open={active}
-        onClose={handleClose}
-        title="Reach more shoppers with Instagram product tags"
-        primaryAction={{
-          content: 'Add Instagram',
-          onAction: handleClose,
-        }}
-        secondaryActions={[
-          {
-            content: 'Learn more',
+      <Frame>
+        <div ref={button}>
+          <Button onClick={handleOpen}>Open</Button>
+        </div>
+        <Modal
+          instant
+          open={active}
+          onClose={handleClose}
+          title="Reach more shoppers with Instagram product tags"
+          primaryAction={{
+            content: 'Add Instagram',
             onAction: handleClose,
-          },
-        ]}
-      >
-        <Modal.Section>
-          <TextContainer>
-            <p>
-              Use Instagram posts to share your products with millions of
-              people. Let shoppers buy from your store without leaving
-              Instagram.
-            </p>
-          </TextContainer>
-        </Modal.Section>
-      </Modal>
+          }}
+          secondaryActions={[
+            {
+              content: 'Learn more',
+              onAction: handleClose,
+            },
+          ]}
+        >
+          <Modal.Section>
+            <TextContainer>
+              <p>
+                Use Instagram posts to share your products with millions of
+                people. Let shoppers buy from your store without leaving
+                Instagram.
+              </p>
+            </TextContainer>
+          </Modal.Section>
+        </Modal>
+      </Frame>
     </div>
   );
 }

From 76807c357cba5812f442c1841741093545df75c4 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Mon, 18 Sep 2023 15:15:55 +1000
Subject: [PATCH 069/102] [Sandbox] Mock Frame functions in the Sandbox to
 avoid hard failures

---
 .../playroom/FrameComponent.tsx               | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/polaris.shopify.com/playroom/FrameComponent.tsx b/polaris.shopify.com/playroom/FrameComponent.tsx
index 3a809d4bd1f..0cb7751bc19 100644
--- a/polaris.shopify.com/playroom/FrameComponent.tsx
+++ b/polaris.shopify.com/playroom/FrameComponent.tsx
@@ -1,8 +1,43 @@
 import React, {useEffect, useState} from 'react';
-import {AppProvider} from '@shopify/polaris';
+import {AppProvider, FrameContext} from '@shopify/polaris';
 import '@shopify/polaris/build/esm/styles.css';
 import enTranslations from '@shopify/polaris/locales/en.json';
 import {updateGrowFrameHeight} from '../src/components/GrowFrame';
+
+const mockFrameContext = {
+  toastMessages: [],
+  showToast: () => {
+    console.info(
+      '[Polaris] Frame#showToast() is not available in Sandbox mode.',
+    );
+  },
+  hideToast: () => {
+    console.info(
+      '[Polaris] Frame#hideToast() is not available in Sandbox mode.',
+    );
+  },
+  setContextualSaveBar: () => {
+    console.info(
+      '[Polaris] Frame#setContextualSaveBar() is not available in Sandbox mode.',
+    );
+  },
+  removeContextualSaveBar: () => {
+    console.info(
+      '[Polaris] Frame#removeContextualSaveBar() is not available in Sandbox mode.',
+    );
+  },
+  startLoading: () => {
+    console.info(
+      '[Polaris] Frame#startLoading() is not available in Sandbox mode.',
+    );
+  },
+  stopLoading: () => {
+    console.info(
+      '[Polaris] Frame#stopLoading() is not available in Sandbox mode.',
+    );
+  },
+};
+
 export default function FrameComponent({
   theme = enTranslations,
   children,
@@ -29,7 +64,9 @@ export default function FrameComponent({
   }, []);
   return (
     <AppProvider i18n={theme || enTranslations} features={features}>
-      <div id="polaris-sandbox-wrapper">{children}</div>
+      <FrameContext.Provider value={mockFrameContext}>
+        <div id="polaris-sandbox-wrapper">{children}</div>
+      </FrameContext.Provider>
     </AppProvider>
   );
 }

From 7d786bd9686a5d315d20af064cca8c5b39cd650b Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 12 Sep 2023 16:28:20 +1000
Subject: [PATCH 070/102] Support scoping both responsive and non-responsive
 CSS Custom Properties derived from React Props

---
 .../src/styles/shared/_responsive-props.scss  | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss
index 6a2244c58f4..ae7dccd8f8f 100644
--- a/polaris-react/src/styles/shared/_responsive-props.scss
+++ b/polaris-react/src/styles/shared/_responsive-props.scss
@@ -1,10 +1,28 @@
+@mixin scope-custom-property(
+  $componentName,
+  $componentProp,
+  $responsively: false
+) {
+  @if $responsively {
+    // stylelint-disable -- Polaris component custom properties
+    --pc-#{$componentName}-#{$componentProp}-xs: initial;
+    --pc-#{$componentName}-#{$componentProp}-sm: initial;
+    --pc-#{$componentName}-#{$componentProp}-md: initial;
+    --pc-#{$componentName}-#{$componentProp}-lg: initial;
+    --pc-#{$componentName}-#{$componentProp}-xl: initial;
+  } @else {
+    --pc-#{$componentName}-#{$componentProp}: initial;
+  }
+}
+
+@mixin non-responsive-prop($componentName, $componentProp, $declarationProp) {
+  @include scope-custom-property($componentName, $componentProp);
+
+  #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp});
+}
+
 @mixin responsive-props($componentName, $componentProp, $declarationProp) {
-  // stylelint-disable -- Polaris component custom properties
-  --pc-#{$componentName}-#{$componentProp}-xs: initial;
-  --pc-#{$componentName}-#{$componentProp}-sm: initial;
-  --pc-#{$componentName}-#{$componentProp}-md: initial;
-  --pc-#{$componentName}-#{$componentProp}-lg: initial;
-  --pc-#{$componentName}-#{$componentProp}-xl: initial;
+  @include scope-custom-property($componentName, $componentProp, true);
 
   #{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
 

From 5acfcec047adeb82fc64666528e44f5050edd089 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 12 Sep 2023 16:43:10 +1000
Subject: [PATCH 071/102] Ensure non-responsive React props are properly
 encapsulated when converted to CSS Custom Properties

---
 .changeset/cyan-hats-jam.md                       |  5 +++++
 .../HorizontalStack/HorizontalStack.scss          | 15 ++++++++-------
 .../src/components/ProgressBar/ProgressBar.scss   |  2 ++
 .../components/DualThumb/DualThumb.scss           |  2 ++
 .../components/SingleThumb/SingleThumb.scss       |  5 +++++
 .../src/components/ShadowBevel/ShadowBevel.scss   |  2 ++
 .../components/TooltipOverlay/TooltipOverlay.scss |  4 ++++
 7 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/cyan-hats-jam.md

diff --git a/.changeset/cyan-hats-jam.md b/.changeset/cyan-hats-jam.md
new file mode 100644
index 00000000000..52f5fc03a00
--- /dev/null
+++ b/.changeset/cyan-hats-jam.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Scoped CSS variables for non-responsive props on `Tooltip`, `RangeSlider`, `ProgressBar`, and `HorizontalStack`.
diff --git a/polaris-react/src/components/HorizontalStack/HorizontalStack.scss b/polaris-react/src/components/HorizontalStack/HorizontalStack.scss
index e155e5bc553..ae396afe05d 100644
--- a/polaris-react/src/components/HorizontalStack/HorizontalStack.scss
+++ b/polaris-react/src/components/HorizontalStack/HorizontalStack.scss
@@ -1,12 +1,13 @@
 @import '../../styles/common';
 
 .HorizontalStack {
-  @include responsive-props('horizontal-stack', 'gap', 'gap');
   display: flex;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex-wrap: var(--pc-horizontal-stack-wrap);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: var(--pc-horizontal-stack-block-align);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: var(--pc-horizontal-stack-align);
+  @include responsive-props('horizontal-stack', 'gap', 'gap');
+  @include non-responsive-prop('horizontal-stack', 'wrap', 'flex-wrap');
+  @include non-responsive-prop(
+    'horizontal-stack',
+    'block-align',
+    'align-items'
+  );
+  @include non-responsive-prop('horizontal-stack', 'align', 'justify-content');
 }
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 7bc9bd80182..5cba6b24586 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -12,6 +12,8 @@
 }
 
 .ProgressBar {
+  @include scope-custom-property('progress-bar', 'duration');
+  @include scope-custom-property('progress-bar', 'percent');
   overflow: hidden;
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index f1affb76e31..cbae4c74a16 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -25,6 +25,8 @@ $range-wrapper: 28px;
 }
 
 .Track {
+  @include scope-custom-property('range-slider', 'progress-upper');
+  @include scope-custom-property('range-slider', 'progress-lower');
   // stylelint-disable -- Polaris component custom properties
   --pc-dual-thumb-unselected-range: transparent;
   --pc-dual-thumb-selected-range: var(--p-color-bg-interactive);
diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index ff046762737..9c768228a56 100644
--- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -79,6 +79,11 @@
 }
 
 .Input {
+  @include scope-custom-property('range-slider', 'min');
+  @include scope-custom-property('range-slider', 'max');
+  @include scope-custom-property('range-slider', 'current');
+  @include scope-custom-property('range-slider', 'progess');
+  @include scope-custom-property('range-slider', 'output-factor');
   // stylelint-disable -- Polaris component custom properties
   --pc-single-thumb-progress-lower: var(--p-color-bg-interactive);
   --pc-single-thumb-progress-upper: transparent;
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.scss b/polaris-react/src/components/ShadowBevel/ShadowBevel.scss
index 9ca39600905..f3a269b1fe9 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.scss
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.scss
@@ -5,6 +5,8 @@
   // stylelint-disable-next-line -- Explicitly set `0` to create a local stacking context. While the initial `z-index: auto` has a stack level of `0` within the current stacking context, it does not create a new local stacking context.
   z-index: 0;
 
+  @include scope-custom-property('shadow-bevel', 'z-index');
+
   @include responsive-props(
     $componentName: 'shadow-bevel',
     $componentProp: 'box-shadow',
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index b4844d58bc8..397efb0e74d 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -1,6 +1,10 @@
 @import '../../../../styles/common';
 
 .TooltipOverlay {
+  @include scope-custom-property('tooltip', 'chevron-x-pos');
+  @include scope-custom-property('tooltip', 'border-radius');
+  @include scope-custom-property('tooltip', 'padding');
+
   // stylelint-disable -- Polaris component custom properties
   --pc-tooltip-overlay-offset: var(--p-space-3);
   --pc-tooltip-shadow-bevel-z-index: 1;

From 372b56d4660baa95383c4e05ce0a52a39e2d477a Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 15:46:32 +1000
Subject: [PATCH 072/102] Tweak main->next PR creation workflow to use existing
 PR and merge directly from main

---
 .github/workflows/merge-main-into-next.yml | 24 ++++++++++++----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index b1583294ce1..01bbdc472b8 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -10,16 +10,18 @@ jobs:
   updateNext:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout next branch
-        uses: actions/checkout@v4
-        with:
-          ref: next
-      - name: Merge main into next branch
-        run: |
-          git checkout -b update-next
-          git fetch origin main:main
-          git merge main
-      - name: Create PR with for review by last commit author
-        run: gh pr create -B next -H update-next --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of ${{ github.event.push.pusher.username }} following their recent push to main in order to keep the `next` branch up to date. ${{ github.event.push.pusher.username }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.event.push.pusher.username }}
+      - name: Check for existing PR
+        id: existing_pr
+        run: echo "pr-num=`gh pr list --head=main --base=next --json number --jq '.[].number'`"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create PR for review by last commit author
+        if: ${{ !steps.existing_pr.outputs.pr-num }}
+        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of ${{ github.event.push.pusher.username }} following their recent push to main in order to keep the `next` branch up to date. ${{ github.event.push.pusher.username }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.event.push.pusher.username }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Add last commit author as reviewer to existing PR
+        if: ${{ steps.existing_pr.outputs.pr-num }}
+        run: gh pr edit ${{ steps.existing_pr.outputs.pr-num }} --add-reviewer ${{ github.event.push.pusher.username }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 9d87d9c948323997a29ed2284fc1f148e61d7ea5 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 16:05:03 +1000
Subject: [PATCH 073/102] Tweak merge-main-into-next.yml to use correct
 username

---
 .github/workflows/merge-main-into-next.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 01bbdc472b8..87186c979ab 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -17,11 +17,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
         if: ${{ !steps.existing_pr.outputs.pr-num }}
-        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of ${{ github.event.push.pusher.username }} following their recent push to main in order to keep the `next` branch up to date. ${{ github.event.push.pusher.username }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.event.push.pusher.username }}
+        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of @${{ github.triggering_actor }} following their recent push to main in order to keep the `next` branch up to date. @${{ github.triggering_actor }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.triggering_actor }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Add last commit author as reviewer to existing PR
         if: ${{ steps.existing_pr.outputs.pr-num }}
-        run: gh pr edit ${{ steps.existing_pr.outputs.pr-num }} --add-reviewer ${{ github.event.push.pusher.username }}
+        run: gh pr edit ${{ steps.existing_pr.outputs.pr-num }} --add-reviewer ${{ github.triggering_actor }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 067489429fc3648eaaa883dfda3083376c693455 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 16:09:50 +1000
Subject: [PATCH 074/102] Run workflow within repo (#10549)

Fix [this
error](https://github.com/Shopify/polaris/actions/runs/6231779257/job/16913839953)
---
 .github/workflows/merge-main-into-next.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 87186c979ab..b730ddd7553 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -10,6 +10,10 @@ jobs:
   updateNext:
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout next branch
+        uses: actions/checkout@v4
+        with:
+          ref: next
       - name: Check for existing PR
         id: existing_pr
         run: echo "pr-num=`gh pr list --head=main --base=next --json number --jq '.[].number'`"

From 0284a568e75d7074df734d3597040e4f943826ba Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:17:32 +1000
Subject: [PATCH 075/102] Always add all reviewers to next -> main PR

---
 .github/workflows/merge-main-into-next.yml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index b730ddd7553..45667abe112 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -21,11 +21,10 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
         if: ${{ !steps.existing_pr.outputs.pr-num }}
-        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action on behalf of @${{ github.triggering_actor }} following their recent push to main in order to keep the `next` branch up to date. @${{ github.triggering_actor }} -- resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer ${{ github.triggering_actor }}
+        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Add last commit author as reviewer to existing PR
-        if: ${{ steps.existing_pr.outputs.pr-num }}
-        run: gh pr edit ${{ steps.existing_pr.outputs.pr-num }} --add-reviewer ${{ github.triggering_actor }}
+      - name: Add commit authors as reviewers to PR
+        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=`gh pr list --head=main --base=next --json commits --jq='.[].commits.[].authors.[].login' | sort -u  | grep -v '\[bot\]' | gsed 's/^.*$/"&"/g' | gsed -z '$ s/\n$//' | tr '\n' ','`
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 15ec8ad3beb43c25473346c46a3c3c44f9ac8df5 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:19:10 +1000
Subject: [PATCH 076/102] Use correct POSIX sed command in workflow

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 45667abe112..f5c19f99400 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -25,6 +25,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Add commit authors as reviewers to PR
-        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=`gh pr list --head=main --base=next --json commits --jq='.[].commits.[].authors.[].login' | sort -u  | grep -v '\[bot\]' | gsed 's/^.*$/"&"/g' | gsed -z '$ s/\n$//' | tr '\n' ','`
+        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=`gh pr list --head=main --base=next --json commits --jq='.[].commits.[].authors.[].login' | sort -u  | grep -v '\[bot\]' | sed 's/^.*$/"&"/g' | sed -z '$ s/\n$//' | tr '\n' ','`
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From d7a7a3167ca03f7b0365f0571fd60019a0da40cb Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:20:55 +1000
Subject: [PATCH 077/102] Better existing PR check

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index f5c19f99400..cf4073d9a1a 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -20,7 +20,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
-        if: ${{ !steps.existing_pr.outputs.pr-num }}
+        if: ${{ steps.existing_pr.outputs.pr-num == "" }}
         run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 475fd39e74af28d367535b839fafc9caebe1d47e Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:23:27 +1000
Subject: [PATCH 078/102] Fix conditional check in workflow file

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index cf4073d9a1a..c6ec3e5bc71 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -20,7 +20,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
-        if: ${{ steps.existing_pr.outputs.pr-num == "" }}
+        if: ${{ steps.existing_pr.outputs.pr-num == '' }}
         run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From bb48629df880081e1e033fb10355ab257ec48432 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:25:48 +1000
Subject: [PATCH 079/102] workflow variables set correctly

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index c6ec3e5bc71..6f57ddc8019 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -16,7 +16,7 @@ jobs:
           ref: next
       - name: Check for existing PR
         id: existing_pr
-        run: echo "pr-num=`gh pr list --head=main --base=next --json number --jq '.[].number'`"
+        run: echo "pr-num=`gh pr list --head=main --base=next --json number --jq '.[].number'`" >> "$GITHUB_OUTPUT"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author

From 5823b29f579a15d682e1767835727dd9bddc7e5b Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:33:59 +1000
Subject: [PATCH 080/102] Simpler addition of reviewers to PR in workflow

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 6f57ddc8019..6ddbff3cb41 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -25,6 +25,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Add commit authors as reviewers to PR
-        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=`gh pr list --head=main --base=next --json commits --jq='.[].commits.[].authors.[].login' | sort -u  | grep -v '\[bot\]' | sed 's/^.*$/"&"/g' | sed -z '$ s/\n$//' | tr '\n' ','`
+        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=${{ github.triggering_actor }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 4a2891cd5be47fa9dc65935e4628096a5e75f8ac Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:39:14 +1000
Subject: [PATCH 081/102] Simplify adding reviewers

---
 .github/workflows/merge-main-into-next.yml | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 6ddbff3cb41..59dd24a9e17 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -21,10 +21,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
         if: ${{ steps.existing_pr.outputs.pr-num == '' }}
-        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.'
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: Add commit authors as reviewers to PR
-        run: gh pr edit `gh pr list --head=main --base=next --json number --jq '.[].number'` --add-reviewer=${{ github.triggering_actor }}
+        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer=${{ github.triggering_actor }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From fcdfe02b383d05196597f9a88078f1c7debe67c4 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Tue, 19 Sep 2023 17:41:07 +1000
Subject: [PATCH 082/102] Use long-form cli switches

---
 .github/workflows/merge-main-into-next.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/merge-main-into-next.yml b/.github/workflows/merge-main-into-next.yml
index 59dd24a9e17..4dc121565d4 100644
--- a/.github/workflows/merge-main-into-next.yml
+++ b/.github/workflows/merge-main-into-next.yml
@@ -21,6 +21,6 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create PR for review by last commit author
         if: ${{ steps.existing_pr.outputs.pr-num == '' }}
-        run: gh pr create -B next -H main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer=${{ github.triggering_actor }}
+        run: gh pr create --base=next --head=main --title 'Merge latest main into next' --body 'This PR was opened by a GitHub Action following a recent push to main in order to keep the `next` branch up to date. Please resolve any merge conflicts and ensure that your recent changes to main work as expected.' --reviewer=${{ github.triggering_actor }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 9fed743175079a3967c6591e1e4765f2881181e9 Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Tue, 19 Sep 2023 17:53:40 +0100
Subject: [PATCH 083/102] [Filters] Fix bug where changes to `appliedFilters`
 prop don't get respected (#10566)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Navigating through the admin this morning I noticed an issue on the
Orders index, when refreshing the page with a set of filters that don't
match any existing filter, that the active filters don't appear in the
Filters component. See video below:



https://github.com/Shopify/polaris/assets/2562596/bb170b1f-0739-4778-8474-54c1ffe29f6e

It turns out that the Orders index async loads the filter data if it
does not match a saved view, and returns an empty `appliedFilters` array
initially, before updating it with the correct `appliedFilters`.

Due to [this recently introduced
change](https://github.com/Shopify/polaris/pull/10429) (sorry folks 🤡)
we no longer are able to react to changes to the `appliedFilters` prop
because of [this
line](https://github.com/Shopify/polaris/pull/10429/files#diff-f21b98ea8a1f295706a4342f1e9ce543562f6c47d6d0682367e90bb7c23961d8R167),
which sets the `localPinnedFilters` state only when the component
mounts. In the case of the Orders index with the parameters mentioned
above, this would set 0 pinned filters, due to the `appliedFilters`
being empty. Because we don't call `setLocalPinnedFilters` on changes to
the `appliedFilters`, this gives us the bug outlined in the video above.
The filters do get set, but the filter does not appear in the pinned
list.


### WHAT is this pull request doing?

This PR effectively reverts that change, and instead uses a more robust
approach to ensure that FilterPills being powered by `appliedFilters`
rather than `localPinnedState` do not vanish when they become unapplied
(when the filter values for the filter are removed).

What we want to do, is add any applied filters to the array of
`localPinnedState` so that when any filter value gets removed, the
FilterPill remains as an unselected FilterPill. The merchant can then
click out of the Popover to fully remove the FilterPill from the Filters
bar.

This is achieved by a `useEffect` hook, which listens for changes to the
`appliedFilterKeys` and `localPinnedFilters` arrays, and checks if all
values within `appliedFilterKeys` are not currently in the
`localPinnedFilters` array. If that is the case, we know that we want to
add these keys to the `localPinnedFilters` array, to ensure they are
added as `FilterPill`s if the `appliedFilters` value changes post-mount.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

Video of Snapshot in use on Spinstance:


https://github.com/Shopify/polaris/assets/2562596/23decb34-c423-412c-90f0-213d89834786

- Spinstance:
https://admin.web.orders-pill-check.marc-thomas.eu.spin.dev/store/shop1/orders?inContextTimeframe=none
- Note that adding in filters that don't match a saved view, and then
refreshing, the applied filters appear as FilterPills.

- Storybook:
https://5d559397bae39100201eedc1-kqkexazlai.chromatic.com/?path=/story/all-components-indexfilters--with-no-pinned-and-prefilled-filters&globals=polarisSummerEditions2023:true
- Note that removing the values from the "Account status" filter keeps
the filter pill visible, until the Popover is closed

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
---
 .changeset/three-trains-tie.md                |   5 +
 .../src/components/Filters/Filters.tsx        |  40 ++-
 .../components/Filters/tests/Filters.test.tsx |  27 ++
 .../IndexFilters/IndexFilters.stories.tsx     | 287 ++++++++++++++++++
 4 files changed, 350 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/three-trains-tie.md

diff --git a/.changeset/three-trains-tie.md b/.changeset/three-trains-tie.md
new file mode 100644
index 00000000000..1e8e52412c5
--- /dev/null
+++ b/.changeset/three-trains-tie.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed a bug in `Filters` where changes to the `appliedFilters` prop were not being handled
diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx
index 9ed2e22e1f4..eaa8aef53e2 100644
--- a/polaris-react/src/components/Filters/Filters.tsx
+++ b/polaris-react/src/components/Filters/Filters.tsx
@@ -141,6 +141,7 @@ export function Filters({
   const {mdDown} = useBreakpoints();
   const {polarisSummerEditions2023: se23} = useFeatures();
   const [popoverActive, setPopoverActive] = useState(false);
+  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -157,23 +158,44 @@ export function Filters({
   const appliedFilterKeys = appliedFilters?.map(({key}) => key);
 
   const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
-    ({pinned, key}) => {
-      const isPinnedOrApplied =
-        Boolean(pinned) || appliedFilterKeys?.includes(key);
-      return isPinnedOrApplied;
-    },
-  );
-  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
-    pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
+    ({pinned, key}) =>
+      (Boolean(pinned) || appliedFilterKeys?.includes(key)) &&
+      // Filters that are pinned in local state display at the end of our list
+      !localPinnedFilters.find((filterKey) => filterKey === key),
   );
 
-  const pinnedFilters = localPinnedFilters
+  useEffect(() => {
+    const allAppliedFilterKeysInLocalPinnedFilters = appliedFilterKeys?.every(
+      (value) => localPinnedFilters.includes(value),
+    );
+
+    if (!allAppliedFilterKeysInLocalPinnedFilters) {
+      setLocalPinnedFilters((currentLocalPinnedFilters: string[]): string[] => {
+        const newPinnedFilters =
+          appliedFilterKeys?.filter(
+            (filterKey) =>
+              !currentLocalPinnedFilters.find(
+                (currentFilterKey) => currentFilterKey === filterKey,
+              ),
+          ) || [];
+
+        return [...currentLocalPinnedFilters, ...newPinnedFilters];
+      });
+    }
+  }, [appliedFilterKeys, localPinnedFilters]);
+
+  const pinnedFiltersFromLocalState = localPinnedFilters
     .map((key) => filters.find((filter) => filter.key === key))
     .reduce<FilterInterface[]>(
       (acc, filter) => (filter ? [...acc, filter] : acc),
       [],
     );
 
+  const pinnedFilters = [
+    ...pinnedFiltersFromPropsAndAppliedFilters,
+    ...pinnedFiltersFromLocalState,
+  ];
+
   const onFilterClick =
     ({key, onAction}: FilterInterface) =>
     () => {
diff --git a/polaris-react/src/components/Filters/tests/Filters.test.tsx b/polaris-react/src/components/Filters/tests/Filters.test.tsx
index 1abc7321176..761d5d00254 100644
--- a/polaris-react/src/components/Filters/tests/Filters.test.tsx
+++ b/polaris-react/src/components/Filters/tests/Filters.test.tsx
@@ -205,6 +205,33 @@ describe('<Filters />', () => {
     });
   });
 
+  it('correctly adds the applied filters when updated via props', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Value is Baz',
+        value: ['Baz'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <Filters {...defaultProps} appliedFilters={[]} />,
+    );
+
+    expect(wrapper).not.toContainReactComponent(FilterPill, {
+      selected: true,
+    });
+
+    wrapper.setProps({
+      appliedFilters,
+    });
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Value is Baz',
+      selected: true,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
index 94af382c70d..cd49d87b73f 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
@@ -10,6 +10,7 @@ import {
   RangeSlider,
   TextField,
   Card,
+  IndexFiltersMode,
 } from '@shopify/polaris';
 
 import {useSetIndexFiltersMode} from './hooks';
@@ -674,6 +675,292 @@ export function WithPinnedFilters() {
   }
 }
 
+export function WithNoPinnedAndPrefilledFilters() {
+  const sleep = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+  const [itemStrings, setItemStrings] = useState([
+    'All',
+    'Unpaid',
+    'Open',
+    'Closed',
+    'Local delivery',
+    'Local pickup',
+  ]);
+  const deleteView = (index: number) => {
+    const newItemStrings = [...itemStrings];
+    newItemStrings.splice(index, 1);
+    setItemStrings(newItemStrings);
+    setSelected(0);
+  };
+
+  const duplicateView = async (name: string) => {
+    setItemStrings([...itemStrings, name]);
+    setSelected(itemStrings.length);
+    await sleep(1);
+    return true;
+  };
+
+  const tabs: TabProps[] = itemStrings.map((item, index) => ({
+    content: item,
+    index,
+    onAction: () => {},
+    id: `${item}-${index}`,
+    isLocked: index === 0,
+    actions:
+      index === 0
+        ? []
+        : [
+            {
+              type: 'rename',
+              onAction: () => {},
+              onPrimaryAction: async (value: string) => {
+                const newItemsStrings = tabs.map((item, idx) => {
+                  if (idx === index) {
+                    return value;
+                  }
+                  return item.content;
+                });
+                await sleep(1);
+                setItemStrings(newItemsStrings);
+                return true;
+              },
+            },
+            {
+              type: 'duplicate',
+              onPrimaryAction: async (name) => {
+                await sleep(1);
+                duplicateView(name);
+                return true;
+              },
+            },
+            {
+              type: 'edit',
+            },
+            {
+              type: 'delete',
+              onPrimaryAction: async (id: string) => {
+                await sleep(1);
+                deleteView(index);
+                return true;
+              },
+            },
+          ],
+  }));
+  const [selected, setSelected] = useState(0);
+  const onCreateNewView = async (value: string) => {
+    await sleep(500);
+    setItemStrings([...itemStrings, value]);
+    setSelected(itemStrings.length);
+    return true;
+  };
+  const sortOptions: IndexFiltersProps['sortOptions'] = [
+    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
+    {label: 'Order', value: 'order desc', directionLabel: 'Descending'},
+    {label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'},
+    {label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'},
+    {label: 'Date', value: 'date asc', directionLabel: 'A-Z'},
+    {label: 'Date', value: 'date desc', directionLabel: 'Z-A'},
+    {label: 'Total', value: 'total asc', directionLabel: 'Ascending'},
+    {label: 'Total', value: 'total desc', directionLabel: 'Descending'},
+  ];
+  const [sortSelected, setSortSelected] = useState(['order asc']);
+  const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Filtering);
+  const onHandleCancel = () => {};
+
+  const onHandleSave = async () => {
+    await sleep(1);
+    return true;
+  };
+
+  const primaryAction: IndexFiltersProps['primaryAction'] =
+    selected === 0
+      ? {
+          type: 'save-as',
+          onAction: onCreateNewView,
+          disabled: false,
+          loading: false,
+        }
+      : {
+          type: 'save',
+          onAction: onHandleSave,
+          disabled: false,
+          loading: false,
+        };
+  const [accountStatus, setAccountStatus] = useState<string[] | null>([
+    'enabled',
+  ]);
+  const [moneySpent, setMoneySpent] = useState(null);
+  const [taggedWith, setTaggedWith] = useState('Returning customer');
+  const [queryValue, setQueryValue] = useState('');
+
+  const handleAccountStatusChange = useCallback(
+    (value) => setAccountStatus(value),
+    [],
+  );
+  const handleMoneySpentChange = useCallback(
+    (value) => setMoneySpent(value),
+    [],
+  );
+  const handleTaggedWithChange = useCallback(
+    (value) => setTaggedWith(value),
+    [],
+  );
+  const handleFiltersQueryChange = useCallback(
+    (value) => setQueryValue(value),
+    [],
+  );
+  const handleAccountStatusRemove = useCallback(
+    () => setAccountStatus(null),
+    [],
+  );
+  const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
+  const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
+  const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
+  const handleFiltersClearAll = useCallback(() => {
+    handleAccountStatusRemove();
+    handleMoneySpentRemove();
+    handleTaggedWithRemove();
+    handleQueryValueRemove();
+  }, [
+    handleAccountStatusRemove,
+    handleMoneySpentRemove,
+    handleQueryValueRemove,
+    handleTaggedWithRemove,
+  ]);
+
+  const filters = [
+    {
+      key: 'accountStatus',
+      label: 'Account status',
+      filter: (
+        <ChoiceList
+          title="Account status"
+          titleHidden
+          choices={[
+            {label: 'Enabled', value: 'enabled'},
+            {label: 'Not invited', value: 'not invited'},
+            {label: 'Invited', value: 'invited'},
+            {label: 'Declined', value: 'declined'},
+          ]}
+          selected={accountStatus || []}
+          onChange={handleAccountStatusChange}
+          allowMultiple
+        />
+      ),
+      pinned: false,
+    },
+    {
+      key: 'taggedWith',
+      label: 'Tagged with',
+      filter: (
+        <TextField
+          label="Tagged with"
+          value={taggedWith}
+          onChange={handleTaggedWithChange}
+          autoComplete="off"
+          labelHidden
+        />
+      ),
+      pinned: false,
+    },
+    {
+      key: 'moneySpent',
+      label: 'Money spent',
+      filter: (
+        <RangeSlider
+          label="Money spent is between"
+          labelHidden
+          value={moneySpent || [0, 500]}
+          prefix="$"
+          output
+          min={0}
+          max={2000}
+          step={1}
+          onChange={handleMoneySpentChange}
+        />
+      ),
+    },
+  ];
+
+  const appliedFilters: IndexFiltersProps['appliedFilters'] = [];
+  if (!isEmpty(accountStatus)) {
+    const key = 'accountStatus';
+    appliedFilters.push({
+      key,
+      label: disambiguateLabel(key, accountStatus),
+      onRemove: handleAccountStatusRemove,
+    });
+  }
+  if (!isEmpty(moneySpent)) {
+    const key = 'moneySpent';
+    appliedFilters.push({
+      key,
+      label: disambiguateLabel(key, moneySpent),
+      onRemove: handleMoneySpentRemove,
+    });
+  }
+  if (!isEmpty(taggedWith)) {
+    const key = 'taggedWith';
+    appliedFilters.push({
+      key,
+      label: disambiguateLabel(key, taggedWith),
+      onRemove: handleTaggedWithRemove,
+    });
+  }
+
+  return (
+    <Card padding="0">
+      <IndexFilters
+        sortOptions={sortOptions}
+        sortSelected={sortSelected}
+        queryValue={queryValue}
+        queryPlaceholder="Searching in all"
+        onQueryChange={handleFiltersQueryChange}
+        onQueryClear={() => {}}
+        onSort={setSortSelected}
+        primaryAction={primaryAction}
+        cancelAction={{
+          onAction: onHandleCancel,
+          disabled: false,
+          loading: false,
+        }}
+        tabs={tabs}
+        selected={selected}
+        onSelect={setSelected}
+        canCreateNewView
+        onCreateNewView={onCreateNewView}
+        filters={filters}
+        appliedFilters={appliedFilters}
+        onClearAll={handleFiltersClearAll}
+        mode={mode}
+        setMode={setMode}
+      />
+      <Table />
+    </Card>
+  );
+
+  function disambiguateLabel(key, value) {
+    switch (key) {
+      case 'moneySpent':
+        return `Money spent is between $${value[0]} and $${value[1]}`;
+      case 'taggedWith':
+        return `Tagged with ${value}`;
+      case 'accountStatus':
+        return value.map((val) => `Customer ${val}`).join(', ');
+      default:
+        return value;
+    }
+  }
+
+  function isEmpty(value) {
+    if (Array.isArray(value)) {
+      return value.length === 0;
+    } else {
+      return value === '' || value == null;
+    }
+  }
+}
+
 export function Disabled() {
   const sleep = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));

From 790a001cd1942a0cd32e90b98339236fe2800afc Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Tue, 19 Sep 2023 14:06:57 -0700
Subject: [PATCH 084/102] Update semantic `color` tokens (#10477)

Co-authored-by: Sara Hill <sara.hill@shopify.com>
---
 .changeset/hip-gorillas-sparkle.md        |   6 +
 polaris-tokens/src/themes/base/color.ts   | 496 +++++++++++++++++++++-
 polaris-tokens/src/themes/light-uplift.ts |  91 ++++
 3 files changed, 589 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hip-gorillas-sparkle.md

diff --git a/.changeset/hip-gorillas-sparkle.md b/.changeset/hip-gorillas-sparkle.md
new file mode 100644
index 00000000000..09a359af6dc
--- /dev/null
+++ b/.changeset/hip-gorillas-sparkle.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+Updated semantic `color` tokens
diff --git a/polaris-tokens/src/themes/base/color.ts b/polaris-tokens/src/themes/base/color.ts
index 5b1217cc113..d0ebd086e7f 100644
--- a/polaris-tokens/src/themes/base/color.ts
+++ b/polaris-tokens/src/themes/base/color.ts
@@ -2,6 +2,7 @@ import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
 import * as colors from '../../colors';
 import * as colorsExperimental from '../../colors-experimental';
+import {createVar as createVarName} from '../../utilities';
 
 export type ColorBackgroundAlias =
   | 'bg'
@@ -69,7 +70,120 @@ export type ColorBackgroundAlias =
   | 'bg-success-subdued-active'
   | 'bg-success-subdued-hover'
   | 'bg-warning'
-  | ColorBackgroundAliasExperimental;
+  | 'bg-surface'
+  | 'bg-surface-hover'
+  | 'bg-surface-active'
+  | 'bg-surface-selected'
+  | 'bg-surface-disabled'
+  | 'bg-surface-secondary'
+  | 'bg-surface-secondary-hover'
+  | 'bg-surface-secondary-active'
+  | 'bg-surface-secondary-selected'
+  | 'bg-surface-tertiary'
+  | 'bg-surface-tertiary-hover'
+  | 'bg-surface-tertiary-active'
+  | 'bg-surface-transparent'
+  | 'bg-surface-brand'
+  | 'bg-surface-brand-hover'
+  | 'bg-surface-brand-active'
+  | 'bg-surface-brand-selected'
+  | 'bg-surface-info'
+  | 'bg-surface-info-hover'
+  | 'bg-surface-info-active'
+  | 'bg-surface-success'
+  | 'bg-surface-success-hover'
+  | 'bg-surface-success-active'
+  | 'bg-surface-caution'
+  | 'bg-surface-caution-hover'
+  | 'bg-surface-caution-active'
+  | 'bg-surface-warning'
+  | 'bg-surface-warning-hover'
+  | 'bg-surface-warning-active'
+  | 'bg-surface-critical'
+  | 'bg-surface-critical-hover'
+  | 'bg-surface-critical-active'
+  | 'bg-surface-magic'
+  | 'bg-surface-magic-hover'
+  | 'bg-surface-magic-active'
+  | 'bg-surface-emphasis'
+  | 'bg-surface-emphasis-hover'
+  | 'bg-surface-emphasis-active'
+  | 'bg-surface-inverse'
+  | 'bg-fill'
+  | 'bg-fill-hover'
+  | 'bg-fill-active'
+  | 'bg-fill-selected'
+  | 'bg-fill-disabled'
+  | 'bg-fill-secondary'
+  | 'bg-fill-secondary-hover'
+  | 'bg-fill-secondary-active'
+  | 'bg-fill-tertiary'
+  | 'bg-fill-tertiary-hover'
+  | 'bg-fill-tertiary-active'
+  | 'bg-fill-brand'
+  | 'bg-fill-brand-hover'
+  | 'bg-fill-brand-active'
+  | 'bg-fill-brand-selected'
+  | 'bg-fill-brand-disabled'
+  | 'bg-fill-emphasis'
+  | 'bg-fill-emphasis-hover'
+  | 'bg-fill-emphasis-active'
+  | 'bg-fill-success'
+  | 'bg-fill-success-hover'
+  | 'bg-fill-success-active'
+  | 'bg-fill-success-secondary'
+  | 'bg-fill-critical'
+  | 'bg-fill-critical-hover'
+  | 'bg-fill-critical-active'
+  | 'bg-fill-critical-selected'
+  | 'bg-fill-critical-secondary'
+  | 'bg-fill-caution'
+  | 'bg-fill-caution-hover'
+  | 'bg-fill-caution-active'
+  | 'bg-fill-caution-secondary'
+  | 'bg-fill-info'
+  | 'bg-fill-info-hover'
+  | 'bg-fill-info-active'
+  | 'bg-fill-info-secondary'
+  | 'bg-fill-warning'
+  | 'bg-fill-warning-hover'
+  | 'bg-fill-warning-active'
+  | 'bg-fill-warning-secondary'
+  | 'bg-fill-magic'
+  | 'bg-fill-magic-secondary'
+  | 'bg-fill-magic-secondary-hover'
+  | 'bg-fill-magic-secondary-active'
+  | 'bg-fill-inverse'
+  | 'bg-fill-inverse-hover'
+  | 'bg-fill-inverse-active'
+  | 'bg-fill-transparent'
+  | 'bg-fill-transparent-hover'
+  | 'bg-fill-transparent-active'
+  | 'bg-fill-transparent-selected'
+  | 'bg-fill-transparent-secondary'
+  | 'bg-fill-transparent-secondary-hover'
+  | 'bg-fill-transparent-secondary-active'
+  | ColorBackgroundAliasExperimental
+  /** Specialty and component background colors. */
+  | 'nav-bg'
+  | 'backdrop-bg'
+  | 'input-bg-surface'
+  | 'input-bg-surface-hover'
+  | 'input-bg-surface-active'
+  | 'nav-bg-surface'
+  | 'nav-bg-surface-hover'
+  | 'nav-bg-surface-active'
+  | 'nav-bg-surface-selected'
+  | 'radio-button-bg-surface-disabled'
+  | 'checkbox-bg-surface-disabled'
+  | 'avatar-bg-fill'
+  | 'avatar-one-bg-fill'
+  | 'avatar-two-bg-fill'
+  | 'avatar-three-bg-fill'
+  | 'avatar-four-bg-fill'
+  | 'avatar-five-bg-fill'
+  | 'video-thumbnail-play-button-bg-fill'
+  | 'video-thumbnail-play-button-bg-fill-hover';
 
 export type ColorBorderAlias =
   | 'border'
@@ -79,8 +193,10 @@ export type ColorBorderAlias =
   | 'border-critical-active'
   | 'border-critical-hover'
   | 'border-critical-subdued'
+  | 'border-critical-secondary'
   | 'border-disabled'
   | 'border-hover'
+  | 'border-focus'
   | 'border-info'
   | 'border-info-subdued'
   | 'border-input'
@@ -92,15 +208,29 @@ export type ColorBorderAlias =
   | 'border-interactive-hover'
   | 'border-interactive-subdued'
   | 'border-inverse'
+  | 'border-inverse-hover'
+  | 'border-inverse-active'
   | 'border-magic'
   | 'border-magic-strong'
+  | 'border-magic-secondary'
   | 'border-primary'
   | 'border-strong'
   | 'border-strong-hover'
   | 'border-subdued'
   | 'border-success'
   | 'border-success-subdued'
-  | ColorBorderAliasExperimental;
+  | 'border-secondary'
+  | 'border-tertiary'
+  | 'border-brand'
+  | 'border-warning'
+  | 'border-emphasis'
+  | 'border-emphasis-hover'
+  | 'border-emphasis-active'
+  | ColorBorderAliasExperimental
+  /** Specialty and component border colors. */
+  | 'input-border'
+  | 'input-border-hover'
+  | 'input-border-active';
 
 export type ColorIconAlias =
   | 'icon'
@@ -122,17 +252,35 @@ export type ColorIconAlias =
   | 'icon-subdued'
   | 'icon-success'
   | 'icon-warning'
-  | ColorIconAliasExperimental;
+  | 'icon-secondary'
+  | 'icon-secondary-hover'
+  | 'icon-secondary-active'
+  | 'icon-brand'
+  | 'icon-emphasis'
+  | 'icon-emphasis-hover'
+  | 'icon-emphasis-active'
+  | ColorIconAliasExperimental
+  /** Specialty and component icon colors. */
+  | 'radio-button-icon-disabled'
+  | 'checkbox-icon-disabled';
 
 export type ColorTextAlias =
   | 'text'
   | 'text-caution'
+  | 'text-caution-hover'
+  | 'text-caution-active'
+  | 'text-caution-on-bg-fill'
   | 'text-caution-strong'
   | 'text-critical'
+  | 'text-critical-hover'
   | 'text-critical-active'
+  | 'text-critical-on-bg-fill'
   | 'text-critical-strong'
   | 'text-disabled'
   | 'text-info'
+  | 'text-info-hover'
+  | 'text-info-active'
+  | 'text-info-on-bg-fill'
   | 'text-info-strong'
   | 'text-interactive'
   | 'text-interactive-active'
@@ -140,17 +288,51 @@ export type ColorTextAlias =
   | 'text-interactive-hover'
   | 'text-interactive-inverse'
   | 'text-inverse'
+  | 'text-inverse-secondary'
   | 'text-inverse-subdued'
   | 'text-magic'
+  | 'text-magic-on-bg-fill'
   | 'text-magic-strong'
   | 'text-on-color'
   | 'text-primary'
   | 'text-primary-hover'
   | 'text-subdued'
   | 'text-success'
+  | 'text-success-hover'
+  | 'text-success-active'
+  | 'text-success-on-bg-fill'
   | 'text-success-strong'
   | 'text-warning-strong'
-  | ColorTextAliasExperimental;
+  | 'text-warning'
+  | 'text-warning-hover'
+  | 'text-warning-active'
+  | 'text-warning-on-bg-fill'
+  | 'text-secondary'
+  | 'text-brand'
+  | 'text-brand-hover'
+  | 'text-brand-on-bg-fill'
+  | 'text-brand-on-bg-fill-hover'
+  | 'text-brand-on-bg-fill-active'
+  | 'text-brand-on-bg-fill-disabled'
+  | 'text-emphasis'
+  | 'text-emphasis-hover'
+  | 'text-emphasis-active'
+  | 'text-emphasis-on-bg-fill'
+  | 'text-emphasis-on-bg-fill-hover'
+  | 'text-emphasis-on-bg-fill-active'
+  | 'text-link'
+  | 'text-link-hover'
+  | 'text-link-active'
+  | 'text-link-inverse'
+  | ColorTextAliasExperimental
+  /** Specialty and component text colors. */
+  | 'avatar-text-on-bg-fill'
+  | 'avatar-one-text-on-bg-fill'
+  | 'avatar-two-text-on-bg-fill'
+  | 'avatar-three-text-on-bg-fill'
+  | 'avatar-four-text-on-bg-fill'
+  | 'avatar-five-text-on-bg-fill'
+  | 'video-thumbnail-play-button-text-on-bg-fill';
 
 type ColorBackgroundAliasExperimental = Experimental<
   | 'bg-backdrop'
@@ -218,6 +400,308 @@ export type ColorTokenGroup = {
 export const color: {
   [TokenName in ColorTokenName]: MetaTokenProperties;
 } = {
+  // ------------------------------
+  // Net new tokens
+  // ------------------------------
+  'color-border-inverse-active': {value: colorsExperimental.gray[8]},
+  'color-border-inverse-hover': {value: colorsExperimental.gray[10]},
+  'color-border-warning': {value: colorsExperimental.orange[8]},
+  'color-checkbox-icon-disabled': {value: colorsExperimental.gray[1]},
+  'color-checkbox-bg-surface-disabled': {
+    value: colorsExperimental.blackAlpha[7],
+  },
+  'color-bg-fill-active': {value: colorsExperimental.gray[4]},
+  'color-bg-fill-brand-selected': {value: colorsExperimental.gray[15]},
+  'color-bg-fill-caution-active': {value: colorsExperimental.yellow[9]},
+  'color-bg-fill-caution-hover': {value: colorsExperimental.yellow[8]},
+  'color-bg-fill-critical-selected': {value: colorsExperimental.red[14]},
+  'color-bg-fill-emphasis-active': {value: colorsExperimental.blue[15]},
+  'color-bg-fill-emphasis-hover': {value: colorsExperimental.blue[14]},
+  'color-bg-fill-emphasis': {value: colorsExperimental.blue[13]},
+  'color-bg-fill-hover': {value: colorsExperimental.gray[3]},
+  'color-bg-fill-info-active': {value: colorsExperimental.azure[11]},
+  'color-bg-fill-info-hover': {value: colorsExperimental.azure[10]},
+  'color-bg-fill-secondary-active': {value: colorsExperimental.gray[8]},
+  'color-bg-fill-secondary-hover': {value: colorsExperimental.gray[7]},
+  'color-bg-fill-selected': {value: colorsExperimental.gray[10]},
+  'color-bg-fill-transparent-secondary-active': {
+    value: colorsExperimental.blackAlpha[8],
+  },
+  'color-bg-fill-transparent-secondary-hover': {
+    value: colorsExperimental.blackAlpha[7],
+  },
+  'color-bg-fill-transparent-selected': {
+    value: colorsExperimental.blackAlpha[6],
+  },
+  'color-bg-fill-transparent': {value: colorsExperimental.blackAlpha[1]},
+  'color-bg-fill-warning-active': {value: colorsExperimental.orange[11]},
+  'color-bg-fill-warning-hover': {value: colorsExperimental.orange[10]},
+  'color-bg-fill': {value: colorsExperimental.gray[1]},
+  'color-icon-secondary-active': {value: colorsExperimental.gray[14]},
+  'color-icon-secondary-hover': {value: colorsExperimental.gray[13]},
+  'color-text-link-active': {value: colorsExperimental.blue[15]},
+  'color-text-link-hover': {value: colorsExperimental.blue[14]},
+  'color-text-link': {value: colorsExperimental.blue[13]},
+  'color-nav-bg': {value: colorsExperimental.gray[7]},
+  'color-nav-bg-surface-active': {value: colorsExperimental.gray[3]},
+  'color-nav-bg-surface-hover': {value: colorsExperimental.gray[6]},
+  'color-nav-bg-surface-selected': {value: colorsExperimental.gray[3]},
+  'color-nav-bg-surface': {value: colorsExperimental.blackAlpha[3]},
+  'color-radio-button-icon-disabled': {value: colorsExperimental.gray[1]},
+  'color-radio-button-bg-surface-disabled': {
+    value: colorsExperimental.blackAlpha[7],
+  },
+  'color-bg-surface-emphasis-active': {value: colorsExperimental.blue[5]},
+  'color-bg-surface-emphasis-hover': {value: colorsExperimental.blue[4]},
+  'color-bg-surface-emphasis': {value: colorsExperimental.blue[3]},
+  'color-bg-surface-inverse': {value: colorsExperimental.gray[15]},
+  'color-bg-surface-magic-active': {value: colorsExperimental.purple[6]},
+  'color-bg-surface-secondary-selected': {value: colorsExperimental.gray[7]},
+  'color-bg-surface-tertiary-active': {value: colorsExperimental.gray[8]},
+  'color-bg-surface-tertiary-hover': {value: colorsExperimental.gray[7]},
+  'color-bg-surface-warning-active': {value: colorsExperimental.orange[5]},
+  'color-bg-surface-warning-hover': {value: colorsExperimental.orange[4]},
+  'color-text-brand-on-bg-fill-active': {value: colorsExperimental.gray[10]},
+  'color-text-brand-on-bg-fill-disabled': {value: colorsExperimental.gray[1]},
+  'color-text-brand-on-bg-fill-hover': {value: colorsExperimental.gray[8]},
+  'color-text-brand-on-bg-fill': {value: colorsExperimental.gray[1]},
+  'color-text-caution-active': {value: colorsExperimental.yellow[16]},
+  'color-text-caution-hover': {value: colorsExperimental.yellow[15]},
+  'color-text-caution-on-bg-fill': {value: colorsExperimental.yellow[15]},
+  'color-text-critical-on-bg-fill': {value: colorsExperimental.red[1]},
+  'color-text-emphasis-on-bg-fill-active': {value: colorsExperimental.blue[7]},
+  'color-text-emphasis-on-bg-fill-hover': {value: colorsExperimental.blue[5]},
+  'color-text-emphasis-on-bg-fill': {value: colorsExperimental.blue[1]},
+  'color-text-info-active': {value: colorsExperimental.azure[16]},
+  'color-text-info-hover': {value: colorsExperimental.azure[15]},
+  'color-text-magic-on-bg-fill': {value: colorsExperimental.purple[1]},
+  'color-text-success-active': {value: colorsExperimental.green[16]},
+  'color-text-success-hover': {value: colorsExperimental.green[15]},
+  'color-text-success-on-bg-fill': {value: colorsExperimental.green[1]},
+  'color-text-warning-active': {value: colorsExperimental.orange[16]},
+  'color-text-warning-hover': {value: colorsExperimental.orange[15]},
+  'color-text-warning-on-bg-fill': {value: colorsExperimental.orange[16]},
+  'color-video-thumbnail-play-button-bg-fill-hover': {
+    value: colorsExperimental.blackAlpha[15],
+  },
+  'color-video-thumbnail-play-button-bg-fill': {
+    value: colorsExperimental.blackAlpha[14],
+  },
+  'color-video-thumbnail-play-button-text-on-bg-fill': {
+    value: colorsExperimental.gray[1],
+  },
+  // ------------------------------
+  // Net new tokens (overridden in light-uplift)
+  // ------------------------------
+  'color-bg-surface': {value: createVar('color-bg')},
+  'color-bg-surface-hover': {value: colorsExperimental.gray[4]},
+  'color-bg-surface-active': {value: colorsExperimental.gray[5]},
+  'color-bg-surface-disabled': {value: colorsExperimental.blackAlpha[5]},
+  'color-bg-surface-secondary': {value: createVar('color-bg-subdued')},
+  'color-bg-surface-secondary-hover': {
+    value: createVar('color-bg-subdued-hover'),
+  },
+  'color-bg-surface-secondary-active': {
+    value: createVar('color-bg-subdued-active'),
+  },
+  'color-bg-surface-tertiary': {
+    value: createVar('color-bg-secondary-experimental'),
+  },
+  'color-bg-fill-tertiary': {value: createVar('color-bg-strong')},
+  'color-bg-fill-tertiary-hover': {value: createVar('color-bg-strong-hover')},
+  'color-bg-fill-tertiary-active': {value: createVar('color-bg-strong-active')},
+  'color-input-bg-surface': {value: createVar('color-bg-input')},
+  'color-input-bg-surface-hover': {
+    value: createVar('color-bg-input-hover-experimental'),
+  },
+  'color-input-bg-surface-active': {
+    value: createVar('color-bg-input-active-experimental'),
+  },
+  'color-bg-fill-brand': {value: colorsExperimental.gray[15]},
+  'color-bg-fill-brand-hover': {value: colorsExperimental.gray[16]},
+  'color-bg-fill-brand-active': {value: colorsExperimental.gray[16]},
+  'color-bg-surface-brand': {value: colorsExperimental.gray[8]},
+  'color-bg-surface-brand-hover': {value: colorsExperimental.gray[7]},
+  'color-bg-surface-brand-active': {value: colorsExperimental.gray[6]},
+  'color-bg-surface-brand-selected': {value: colorsExperimental.gray[6]},
+  'color-bg-surface-selected': {value: createVar('color-bg-app-selected')},
+  'color-bg-fill-success': {value: createVar('color-bg-success-strong')},
+  'color-bg-fill-success-hover': {
+    value: createVar('color-bg-success-strong-hover-experimental'),
+  },
+  'color-bg-fill-success-active': {
+    value: createVar('color-bg-success-strong-active-experimental'),
+  },
+  'color-bg-fill-success-secondary': {value: createVar('color-bg-success')},
+  'color-bg-surface-success': {value: createVar('color-bg-success-subdued')},
+  'color-bg-surface-success-hover': {
+    value: createVar('color-bg-success-subdued-hover'),
+  },
+  'color-bg-surface-success-active': {
+    value: createVar('color-bg-success-subdued-active'),
+  },
+  'color-bg-fill-critical': {value: createVar('color-bg-critical-strong')},
+  'color-bg-fill-critical-hover': {
+    value: createVar('color-bg-critical-strong-hover'),
+  },
+  'color-bg-fill-critical-active': {
+    value: createVar('color-bg-critical-strong-active'),
+  },
+  'color-bg-fill-critical-secondary': {value: createVar('color-bg-critical')},
+  'color-bg-surface-critical': {value: createVar('color-bg-critical-subdued')},
+  'color-bg-surface-critical-hover': {
+    value: createVar('color-bg-critical-subdued-hover'),
+  },
+  'color-bg-surface-critical-active': {
+    value: createVar('color-bg-critical-subdued-active'),
+  },
+  'color-bg-fill-caution': {value: createVar('color-bg-caution-strong')},
+  'color-bg-fill-caution-secondary': {value: createVar('color-bg-caution')},
+  'color-bg-surface-caution': {value: createVar('color-bg-caution-subdued')},
+  'color-bg-surface-caution-hover': {
+    value: createVar('color-bg-caution-subdued-hover'),
+  },
+  'color-bg-surface-caution-active': {
+    value: createVar('color-bg-caution-subdued-active'),
+  },
+  'color-bg-fill-info': {value: createVar('color-bg-info-strong')},
+  'color-bg-fill-info-secondary': {value: createVar('color-bg-info')},
+  'color-bg-surface-info': {value: createVar('color-bg-info-subdued')},
+  'color-bg-surface-info-hover': {
+    value: createVar('color-bg-info-subdued-hover'),
+  },
+  'color-bg-surface-info-active': {
+    value: createVar('color-bg-info-subdued-active'),
+  },
+  'color-bg-fill-warning': {
+    value: createVar('color-bg-warning-strong-experimental'),
+  },
+  'color-bg-fill-warning-secondary': {value: createVar('color-bg-warning')},
+  'color-bg-surface-warning': {
+    value: createVar('color-bg-warning-subdued-experimental'),
+  },
+  'color-bg-fill-magic': {value: createVar('color-bg-magic-strong')},
+  'color-bg-fill-magic-secondary': {value: createVar('color-bg-magic')},
+  'color-bg-fill-magic-secondary-hover': {
+    value: createVar('color-bg-magic-hover'),
+  },
+  'color-bg-fill-magic-secondary-active': {
+    value: createVar('color-bg-magic-active'),
+  },
+  'color-bg-surface-magic': {value: colorsExperimental.purple[3]},
+  'color-bg-surface-magic-hover': {
+    value: createVar('color-bg-magic-subdued-hover'),
+  },
+  'color-bg-fill-secondary': {value: createVar('color-bg-inset')},
+  'color-bg-fill-inverse': {value: createVar('color-bg-inset-strong')},
+  'color-bg-fill-inverse-hover': {value: createVar('color-bg-inverse-hover')},
+  'color-bg-fill-inverse-active': {value: createVar('color-bg-inverse-active')},
+  'color-bg-surface-transparent': {
+    value: createVar('color-bg-transparent-experimental'),
+  },
+  'color-bg-fill-transparent-hover': {
+    value: createVar('color-bg-transparent-hover-experimental'),
+  },
+  'color-bg-fill-transparent-active': {
+    value: createVar('color-bg-transparent-active-experimental'),
+  },
+  'color-bg-fill-disabled': {
+    value: createVar('color-bg-transparent-disabled-experimental'),
+  },
+  'color-bg-fill-transparent-secondary': {
+    value: createVar('color-bg-transparent-subdued-experimental'),
+  },
+  'color-bg-fill-brand-disabled': {
+    value: createVar('color-bg-transparent-primary-disabled-experimental'),
+  },
+  'color-backdrop-bg': {value: createVar('color-bg-backdrop-experimental')},
+  'color-avatar-bg-fill': {
+    value: createVar('color-avatar-background-experimental'),
+  },
+  'color-avatar-one-bg-fill': {
+    value: createVar('color-avatar-style-one-background-experimental'),
+  },
+  'color-avatar-two-bg-fill': {
+    value: createVar('color-avatar-style-two-background-experimental'),
+  },
+  'color-avatar-three-bg-fill': {
+    value: createVar('color-avatar-style-three-background-experimental'),
+  },
+  'color-avatar-four-bg-fill': {
+    value: createVar('color-avatar-style-four-background-experimental'),
+  },
+  'color-avatar-five-bg-fill': {
+    value: createVar('color-avatar-style-five-background-experimental'),
+  },
+  'color-text-secondary': {value: createVar('color-text-subdued')},
+  'color-text-emphasis': {value: createVar('color-text-interactive')},
+  'color-text-emphasis-hover': {
+    value: createVar('color-text-interactive-hover'),
+  },
+  'color-text-emphasis-active': {
+    value: createVar('color-text-interactive-active'),
+  },
+  'color-text-brand': {value: createVar('color-text-primary')},
+  'color-text-brand-hover': {value: createVar('color-text-primary-hover')},
+  'color-text-critical-hover': {value: colorsExperimental.red[15]},
+  'color-text-info-on-bg-fill': {value: createVar('color-text-info-strong')},
+  'color-text-warning': {value: colorsExperimental.orange[14]},
+  'color-text-inverse-secondary': {
+    value: createVar('color-text-inverse-subdued'),
+  },
+  'color-text-link-inverse': {value: colorsExperimental.blue[8]},
+  'color-avatar-text-on-bg-fill': {
+    value: createVar('color-avatar-color-experimental'),
+  },
+  'color-avatar-one-text-on-bg-fill': {
+    value: createVar('color-avatar-style-one-color-experimental'),
+  },
+  'color-avatar-two-text-on-bg-fill': {
+    value: createVar('color-avatar-style-two-color-experimental'),
+  },
+  'color-avatar-three-text-on-bg-fill': {
+    value: createVar('color-avatar-style-three-color-experimental'),
+  },
+  'color-avatar-four-text-on-bg-fill': {
+    value: createVar('color-avatar-style-four-color-experimental'),
+  },
+  'color-avatar-five-text-on-bg-fill': {
+    value: createVar('color-avatar-style-five-color-experimental'),
+  },
+  'color-icon-secondary': {value: createVar('color-icon-subdued')},
+  'color-icon-emphasis': {value: createVar('color-icon-interactive')},
+  'color-icon-emphasis-hover': {
+    value: createVar('color-icon-interactive-hover'),
+  },
+  'color-icon-emphasis-active': {
+    value: createVar('color-icon-interactive-active'),
+  },
+  'color-icon-brand': {value: createVar('color-icon-primary')},
+  'color-border-secondary': {value: createVar('color-border-subdued')},
+  'color-border-tertiary': {value: colorsExperimental.gray[10]},
+  'color-input-border': {value: createVar('color-border-input')},
+  'color-input-border-hover': {value: createVar('color-border-input-hover')},
+  'color-input-border-active': {
+    value: createVar('color-border-input-active-experimental'),
+  },
+  'color-border-emphasis': {value: colorsExperimental.blue[13]},
+  'color-border-emphasis-hover': {
+    value: createVar('color-border-interactive-hover'),
+  },
+  'color-border-emphasis-active': {
+    value: createVar('color-border-interactive-active'),
+  },
+  'color-border-focus': {value: createVar('color-border-interactive-focus')},
+  'color-border-brand': {value: createVar('color-border-primary')},
+  'color-border-critical-secondary': {
+    value: createVar('color-border-critical-strong-experimental'),
+  },
+  'color-border-magic-secondary': {
+    value: createVar('color-border-magic-strong'),
+  },
+  // ------------------------------
+  // Existing tokens
+  // ------------------------------
   'color-bg-inverse': {
     value: colors.gray[900],
     description: '',
@@ -922,3 +1406,7 @@ export const color: {
     description: '',
   },
 };
+
+function createVar(colorTokenName: ColorTokenName) {
+  return `var(${createVarName(colorTokenName)})`;
+}
diff --git a/polaris-tokens/src/themes/light-uplift.ts b/polaris-tokens/src/themes/light-uplift.ts
index 0ec1df25de7..ea7122aea2e 100644
--- a/polaris-tokens/src/themes/light-uplift.ts
+++ b/polaris-tokens/src/themes/light-uplift.ts
@@ -21,6 +21,97 @@ export const metaThemeLightUpliftPartial = createMetaThemePartial({
     'border-width-100': {value: size[100]},
   },
   color: {
+    // v12.0.0
+    'color-bg-surface': {value: colors.gray[1]},
+    'color-bg-surface-secondary': {value: colors.gray[4]},
+    'color-bg-surface-secondary-hover': {value: colors.gray[6]},
+    'color-bg-surface-secondary-active': {value: colors.gray[7]},
+    'color-bg-surface-tertiary': {value: colors.gray[5]},
+    'color-bg-fill-tertiary': {value: colors.gray[8]},
+    'color-bg-fill-tertiary-hover': {value: colors.gray[9]},
+    'color-bg-fill-tertiary-active': {value: colors.gray[10]},
+    'color-input-bg-surface': {value: colors.gray[2]},
+    'color-input-bg-surface-hover': {value: colors.gray[3]},
+    'color-input-bg-surface-active': {value: colors.gray[4]},
+    'color-bg-surface-selected': {value: colors.gray[3]},
+    'color-bg-fill-success': {value: colors.green[12]},
+    'color-bg-fill-success-hover': {value: colors.green[13]},
+    'color-bg-fill-success-active': {value: colors.green[14]},
+    'color-bg-fill-success-secondary': {value: colors.green[3]},
+    'color-bg-surface-success': {value: colors.green[3]},
+    'color-bg-surface-success-hover': {value: colors.green[4]},
+    'color-bg-surface-success-active': {value: colors.green[5]},
+    'color-bg-fill-critical': {value: colors.red[12]},
+    'color-bg-fill-critical-hover': {value: colors.red[13]},
+    'color-bg-fill-critical-active': {value: colors.red[14]},
+    'color-bg-fill-critical-secondary': {value: colors.red[6]},
+    'color-bg-surface-critical': {value: colors.red[4]},
+    'color-bg-surface-critical-hover': {value: colors.red[5]},
+    'color-bg-surface-critical-active': {value: colors.red[6]},
+    'color-bg-fill-caution': {value: colors.yellow[6]},
+    'color-bg-fill-caution-secondary': {value: colors.yellow[4]},
+    'color-bg-surface-caution': {value: colors.yellow[2]},
+    'color-bg-surface-caution-hover': {value: colors.yellow[3]},
+    'color-bg-surface-caution-active': {value: colors.yellow[4]},
+    'color-bg-fill-info': {value: colors.azure[9]},
+    'color-bg-fill-info-secondary': {value: colors.azure[4]},
+    'color-bg-surface-info': {value: colors.azure[3]},
+    'color-bg-surface-info-hover': {value: colors.azure[4]},
+    'color-bg-surface-info-active': {value: colors.azure[6]},
+    'color-bg-fill-warning': {value: colors.orange[9]},
+    'color-bg-fill-warning-secondary': {value: colors.orange[7]},
+    'color-bg-surface-warning': {value: colors.orange[3]},
+    'color-bg-fill-magic': {value: colors.purple[12]},
+    'color-bg-fill-magic-secondary': {value: colors.purple[6]},
+    'color-bg-fill-magic-secondary-hover': {value: colors.purple[7]},
+    'color-bg-fill-magic-secondary-active': {value: colors.purple[8]},
+    'color-bg-surface-magic-hover': {value: colors.purple[4]},
+    'color-bg-fill-secondary': {value: colors.gray[6]},
+    'color-bg-fill-inverse': {value: colors.gray[15]},
+    'color-bg-fill-inverse-hover': {value: colors.gray[14]},
+    'color-bg-fill-inverse-active': {value: colors.gray[13]},
+    'color-bg-surface-transparent': {value: colors.blackAlpha[1]},
+    'color-bg-fill-transparent-hover': {value: colors.blackAlpha[5]},
+    'color-bg-fill-transparent-active': {value: colors.blackAlpha[6]},
+    'color-bg-fill-disabled': {value: colors.blackAlpha[5]},
+    'color-bg-fill-transparent-secondary': {value: colors.blackAlpha[6]},
+    'color-bg-fill-brand-disabled': {value: colors.blackAlpha[9]},
+    'color-backdrop-bg': {value: colors.blackAlpha[14]},
+    'color-avatar-bg-fill': {value: colors.gray[11]},
+    'color-avatar-one-bg-fill': {value: colors.magenta[7]},
+    'color-avatar-two-bg-fill': {value: colors.green[7]},
+    'color-avatar-three-bg-fill': {value: colors.cyan[7]},
+    'color-avatar-four-bg-fill': {value: colors.azure[7]},
+    'color-avatar-five-bg-fill': {value: colors.rose[7]},
+    'color-text-secondary': {value: colors.gray[13]},
+    'color-text-emphasis': {value: colors.blue[13]},
+    'color-text-emphasis-hover': {value: colors.blue[14]},
+    'color-text-emphasis-active': {value: colors.blue[15]},
+    'color-text-brand': {value: colors.gray[14]},
+    'color-text-brand-hover': {value: colors.gray[15]},
+    'color-text-info-on-bg-fill': {value: colors.azure[16]},
+    'color-text-inverse-secondary': {value: colors.gray[11]},
+    'color-avatar-text-on-bg-fill': {value: colors.gray[1]},
+    'color-avatar-one-text-on-bg-fill': {value: colors.magenta[14]},
+    'color-avatar-two-text-on-bg-fill': {value: colors.green[14]},
+    'color-avatar-three-text-on-bg-fill': {value: colors.cyan[14]},
+    'color-avatar-four-text-on-bg-fill': {value: colors.azure[14]},
+    'color-avatar-five-text-on-bg-fill': {value: colors.rose[14]},
+    'color-icon-secondary': {value: colors.gray[12]},
+    'color-icon-emphasis': {value: colors.blue[13]},
+    'color-icon-emphasis-hover': {value: colors.blue[14]},
+    'color-icon-emphasis-active': {value: colors.blue[15]},
+    'color-icon-brand': {value: colors.gray[16]},
+    'color-border-secondary': {value: colors.gray[7]},
+    'color-input-border': {value: colors.gray[12]},
+    'color-input-border-hover': {value: colors.gray[13]},
+    'color-input-border-active': {value: colors.gray[16]},
+    'color-border-emphasis-hover': {value: colors.blue[14]},
+    'color-border-emphasis-active': {value: colors.blue[15]},
+    'color-border-focus': {value: colors.blue[13]},
+    'color-border-brand': {value: colors.gray[8]},
+    'color-border-critical-secondary': {value: colors.red[14]},
+    'color-border-magic-secondary': {value: colors.purple[12]},
     // v11.0.0
     'color-bg-inverse': {value: colors.gray[16]},
     'color-bg-inset-strong': {value: colors.gray[15]},

From c232efac16ffa792b8c7c046c42b65f4b737bda4 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloerice@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:02:11 -0400
Subject: [PATCH 085/102] [Coming soon][View Transitions API] Initial prototype
 (#10338)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Because why not? Let's try new stuff as it comes out! Shout out to
@domchristie for the [excellent write
up](https://www.patterns.dev/posts/view-transitions) 🙏🏽

### WHAT is this pull request doing?

This PR attempted to work around the lack of support for triggering
transitions on navigating in NextJS in order to prototype page
transitions in polaris.shopify.com using the new [View Transitions
API](https://developer.chrome.com/docs/web-platform/view-transitions/)
available in Chrome. Unfortunately layout jank couldn't be reliably
evaded 🥲 (see [Vercel
discussion](https://github.com/vercel/next.js/discussions/46300#discussioncomment-5661595)
for some context on the problem with using the View Transitions API with
Next)

I pivoted to focusing on using the API to animate a feature change
within a page, and decided to make a rough prototype of [full screen
expandable pattern example
previews](https://polaris-staging.shopifycloud.com/patterns/resource-details-layout#using-this-pattern).


https://github.com/Shopify/polaris/assets/18447883/829d3a3f-f1ef-43f1-9762-9e7bab0cd548

I also [drafted a
tl;dr:](https://polaris-staging.shopifycloud.com/coming-soon/view-transitions)
on Shopify experimenting with the View Transitions API to improve the
admin experience for merchants.

<img width="1511" alt="Screenshot 2023-09-08 at 4 37 50 PM"
src="https://github.com/Shopify/polaris/assets/18447883/b9c13e2f-fef8-4f19-9c5a-968194812879">

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .../content/coming-soon/index.md              |   5 +
 .../content/coming-soon/view-transitions.md   |  27 +++
 .../app-settings-layout/variants/default.md   |   2 +-
 .../variants/default.md                       |   2 +-
 .../resource-index-layout/variants/default.md |   2 +-
 polaris.shopify.com/next.config.js            |   7 +-
 polaris.shopify.com/pages/_app.tsx            |  53 +++---
 .../ComponentExamples/ComponentExamples.tsx   |   1 -
 .../ExampleWrapper/ExampleWrapper.module.scss |   5 +
 .../ExampleWrapper/ExampleWrapper.tsx         |   2 +
 .../LinkButton/LinkButton.module.scss         |  12 ++
 .../ExampleWrapper/LinkButton/LinkButton.tsx  |  16 +-
 .../src/components/Icon/Icon.module.scss      |  10 +-
 .../src/components/Page/Page.module.scss      |   1 +
 .../PatternsExample.module.scss               | 123 +++++++++++-
 .../PatternsExample/PatternsExample.tsx       | 175 ++++++++++++++++--
 .../ViewTransition/ViewTransition.jsx         |  26 +++
 .../src/components/ViewTransition/index.ts    |   3 +
 polaris.shopify.com/src/styles/globals.scss   |   2 +-
 polaris.shopify.com/src/utils/various.ts      |  17 ++
 20 files changed, 428 insertions(+), 63 deletions(-)
 create mode 100644 polaris.shopify.com/content/coming-soon/index.md
 create mode 100644 polaris.shopify.com/content/coming-soon/view-transitions.md
 create mode 100644 polaris.shopify.com/src/components/ViewTransition/ViewTransition.jsx
 create mode 100644 polaris.shopify.com/src/components/ViewTransition/index.ts

diff --git a/polaris.shopify.com/content/coming-soon/index.md b/polaris.shopify.com/content/coming-soon/index.md
new file mode 100644
index 00000000000..29d1a19e890
--- /dev/null
+++ b/polaris.shopify.com/content/coming-soon/index.md
@@ -0,0 +1,5 @@
+---
+title: Coming soon
+hideChildren: true
+url: /coming-soon/view-transitions
+---
diff --git a/polaris.shopify.com/content/coming-soon/view-transitions.md b/polaris.shopify.com/content/coming-soon/view-transitions.md
new file mode 100644
index 00000000000..e4cf324cbc4
--- /dev/null
+++ b/polaris.shopify.com/content/coming-soon/view-transitions.md
@@ -0,0 +1,27 @@
+---
+title: Embracing the future with the View Transitions API
+description: Merchants need tools that are not just powerful, but also intuitive. That's why we're experimenting with new ways to enhance the Shopify admin experience using the View Transitions API.
+keywords:
+  - motion
+  - animations
+  - transitions
+  - view transitions
+  - view transitions api
+---
+
+## Tl;dr:
+
+The View Transitions API is an experimental browser API supported in Google Chrome. It streamlines the visual transitions between different pages or elements using a combination of CSS pseudo elements, JavaScript, and screenshots of the old and new DOM state. By reducing the need for complex custom JavaScript and CSS, this API provides a new opportunity to elevate the Shopify admin experience.
+
+## Impact potential
+
+For merchants, the impacts of the View Transitions API will be experienced through:
+
+- **Perceived performance:** View transitions used to animate navigation or state changes in conjunction with prefetching, lazy loading, and caching will make the Shopify admin feel faster and more responsive.
+- **Enhanced accessibility:** Built in features for managing focus and other accessibility concerns during a view transition will make taking action or changing contexts a better experience for all merchants.
+- **Reduced cognitive load:** Page transitions between list and detail views will make clearer connections between the levels of detail in commerce objects like products.
+
+For admin builders, systemizing the View Transitions API with shared patterns will support:
+
+- **Streamlined development:** Systemized ways to use and share transitions will make it easier for admin builders to create and maintain high quality animations.
+- **Domain specific solutions:** The flexibility of customizing view transitions using their pseudo elements opens up possibilities for systemizing crafted, engaging ways to introduce and reinforce important commerce concepts shared across the Shopify admin that will make it a more enjoyable tool for merchants to use.
diff --git a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
index 264e75df476..945b4e0470a 100644
--- a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
@@ -28,7 +28,7 @@ This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertica
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
-<div style={{ paddingBottom: '2rem' }}>
+<div style={{ padding: '2rem' }}>
   {(____CODE____)()}
 </div>
 ```
diff --git a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
index 68c980eb116..8326cbaf028 100644
--- a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
@@ -32,7 +32,7 @@ This pattern uses the [`Card`](/components/layout-and-structure/card), [`Vertica
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
-<div style={{ paddingBottom: '2rem' }}>
+<div style={{ padding: '2rem' }}>
   {(____CODE____)()}
 </div>
 ```
diff --git a/polaris.shopify.com/content/patterns/resource-index-layout/variants/default.md b/polaris.shopify.com/content/patterns/resource-index-layout/variants/default.md
index 295524aa595..bfb1f8fe691 100644
--- a/polaris.shopify.com/content/patterns/resource-index-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/resource-index-layout/variants/default.md
@@ -30,7 +30,7 @@ This pattern uses the [`Card`](/components/layout-and-structure/card), [`Badge`]
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
-<div style={{ paddingBottom: '2rem', height: '600px' }}>
+<div style={{ padding: '2rem', height: '600px' }}>
   {(____CODE____)()}
 </div>
 ```
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index 062d982ddcb..fdf9a9adbd5 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -5,7 +5,7 @@ const path = require('path');
 const nextConfig = {
   // See: https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files
   output: 'standalone',
-  reactStrictMode: true,
+  reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -139,6 +139,11 @@ const nextConfig = {
         destination: '/patterns#legacy',
         permanent: true,
       },
+      {
+        source: '/coming-soon',
+        destination: '/coming-soon/view-transitions',
+        permanent: false,
+      },
       ...actions,
       ...deprecated,
       ...feedbackIndicators,
diff --git a/polaris.shopify.com/pages/_app.tsx b/polaris.shopify.com/pages/_app.tsx
index 461cdada7dd..00efecf4313 100644
--- a/polaris.shopify.com/pages/_app.tsx
+++ b/polaris.shopify.com/pages/_app.tsx
@@ -1,7 +1,7 @@
 import type {AppProps} from 'next/app';
 import Head from 'next/head';
 import Script from 'next/script';
-import {useEffect} from 'react';
+import {useEffect, StrictMode} from 'react';
 import {useRouter} from 'next/router';
 import useDarkMode from 'use-dark-mode';
 import '@shopify/polaris/build/esm/styles.css';
@@ -9,6 +9,7 @@ import '@shopify/polaris/build/esm/styles.css';
 import {className} from '../src/utils/various';
 import Frame from '../src/components/Frame';
 import '../src/styles/globals.scss';
+import ViewTransition from '../src/components/ViewTransition';
 
 const PUBLIC_GA_ID = 'UA-49178120-32';
 
@@ -90,30 +91,32 @@ function MyApp({Component, pageProps}: AppProps) {
         </>
       ) : null}
 
-      <>
-        <script dangerouslySetInnerHTML={{__html: noflash}}></script>
-
-        <Head>
-          <meta name="viewport" content="initial-scale=1, width=device-width" />
-          <link rel="shortcut icon" href="/images/favicon.png" />
-          <meta property="og:image" content={ogImagePath} />
-        </Head>
-
-        <div
-          style={{background: isPolarisExample ? '#fafafa' : 'unset'}}
-          className={className(
-            !isPolarisExample && 'styles-for-site-but-not-polaris-examples',
-          )}
-        >
-          {isPolarisExample || isPolarisSandbox ? (
-            <Component {...pageProps} />
-          ) : (
-            <Frame darkMode={darkMode}>
-              <Component {...pageProps} />
-            </Frame>
-          )}
-        </div>
-      </>
+      <script dangerouslySetInnerHTML={{__html: noflash}}></script>
+
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+        <link rel="shortcut icon" href="/images/favicon.png" />
+        <meta property="og:image" content={ogImagePath} />
+      </Head>
+
+      <div
+        style={{background: isPolarisExample ? '#fafafa' : 'unset'}}
+        className={className(
+          !isPolarisExample && 'styles-for-site-but-not-polaris-examples',
+        )}
+      >
+        {isPolarisExample || isPolarisSandbox ? (
+          <Component {...pageProps} />
+        ) : (
+          <Frame darkMode={darkMode}>
+            <ViewTransition>
+              <StrictMode>
+                <Component {...pageProps} />
+              </StrictMode>
+            </ViewTransition>
+          </Frame>
+        )}
+      </div>
     </>
   );
 }
diff --git a/polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx b/polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx
index e48be1c0360..de2859a0996 100644
--- a/polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx
+++ b/polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx
@@ -43,7 +43,6 @@ function formatHTML(html: string): string {
 const ComponentExamples = ({examples}: Props) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [htmlCode, setHTMLCode] = useState('');
-
   const [iframeHeight, setIframeHeight] = useState(400);
 
   const handleExampleLoad = () => {
diff --git a/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.module.scss b/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.module.scss
index bd36534face..1ea7ec6ab18 100644
--- a/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.module.scss
+++ b/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.module.scss
@@ -30,5 +30,10 @@
     @media screen and (max-width: $breakpointMobile) {
       min-width: 100%;
     }
+
+    &.maximize {
+      min-width: 100%;
+      min-height: 100%;
+    }
   }
 }
diff --git a/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.tsx b/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.tsx
index 9b84f42b02a..fbc36102ff0 100644
--- a/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.tsx
+++ b/polaris.shopify.com/src/components/ExampleWrapper/ExampleWrapper.tsx
@@ -3,6 +3,8 @@ import {Box, type WithAsProp} from '../Box';
 import styles from './ExampleWrapper.module.scss';
 
 type Props = {
+  as?: string;
+  className?: string;
   children: React.ReactNode;
   renderFrameActions: () => React.ReactNode;
 };
diff --git a/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.module.scss b/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.module.scss
index fd3648a3411..aba805cb41c 100644
--- a/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.module.scss
+++ b/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.module.scss
@@ -1,8 +1,20 @@
 .Link {
   background: transparent;
   font-size: var(--font-size-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+
   &:hover,
   &:focus {
     color: var(--text-link);
   }
+
+  &.dark-mode {
+    .Icon {
+      filter: none;
+    }
+  }
 }
diff --git a/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.tsx b/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.tsx
index 826a10cf7ed..9be4f603314 100644
--- a/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.tsx
+++ b/polaris.shopify.com/src/components/ExampleWrapper/LinkButton/LinkButton.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
 import styles from './LinkButton.module.scss';
+import {className as classNames} from '../../../utils/various';
+
 type Props = React.ComponentProps<'button'>;
 
-const LinkButton: React.ComponentType<Props> = (props) => {
-  return <button {...props} className={styles.Link} />;
-};
+const LinkButton = React.forwardRef<HTMLButtonElement, Props>(
+  function LinkButton({className, ...props}: Props, ref) {
+    return (
+      <button
+        ref={ref}
+        {...props}
+        className={classNames(styles.Link, className)}
+      />
+    );
+  },
+);
 
 export default LinkButton;
diff --git a/polaris.shopify.com/src/components/Icon/Icon.module.scss b/polaris.shopify.com/src/components/Icon/Icon.module.scss
index a27541cb8ce..7d5667b9e9a 100644
--- a/polaris.shopify.com/src/components/Icon/Icon.module.scss
+++ b/polaris.shopify.com/src/components/Icon/Icon.module.scss
@@ -4,7 +4,13 @@
   filter: contrast(0) brightness(-5000%);
   opacity: 0.85;
 
-  @include dark-mode {
-    filter: contrast(0) brightness(5000%);
+  &.darkMode {
+    @include dark-mode {
+      filter: contrast(0) brightness(5000%);
+    }
+  }
+
+  svg {
+    fill: currentColor;
   }
 }
diff --git a/polaris.shopify.com/src/components/Page/Page.module.scss b/polaris.shopify.com/src/components/Page/Page.module.scss
index 983a64a46b7..7a4e73f1e96 100644
--- a/polaris.shopify.com/src/components/Page/Page.module.scss
+++ b/polaris.shopify.com/src/components/Page/Page.module.scss
@@ -21,6 +21,7 @@
 }
 
 .Page {
+  view-transition-name: page;
   --toc-width: 16rem;
   display: flex;
   gap: 2.5rem;
diff --git a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
index 3643641e350..df9303ee9d9 100644
--- a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
+++ b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.module.scss
@@ -1,5 +1,7 @@
 @import '../../styles/variables.scss';
 .Link {
+  display: flex;
+  align-items: center;
   font-size: var(--font-size-100);
   color: var(--text-default);
   &:hover,
@@ -7,16 +9,119 @@
     color: var(--text-link);
   }
 }
-.SpecificityBuster {
+
+.PositionedLink {
+  right: 1rem;
+  top: 1rem;
+  position: absolute;
+  z-index: 2;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.ExampleWrapper {
+  position: relative;
+  box-shadow: none;
+  border: 1px solid var(--p-color-border-subdued);
+  border-radius: 8px;
+
+  @media screen and (max-width: $breakpointMobile) {
+    border-left: 0;
+    border-right: 0;
+    margin-left: -1.25rem;
+    margin-right: -1.25rem;
+    border-radius: 0;
+  }
+}
+
+.Dialog {
+  view-transition-name: dialog;
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &.open {
+    opacity: 1;
+  }
+
+  &::backdrop {
+    background: var(--p-color-bg-inverse);
+    opacity: 0.1;
+    width: 100vw;
+  }
+
+  &:modal {
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
   .ExampleWrapper {
-    box-shadow: none;
-    border: 1px solid var(--p-color-border-subdued);
-    @media screen and (max-width: $breakpointMobile) {
-      border-left: 0;
-      border-right: 0;
-      margin-left: -1.25rem;
-      margin-right: -1.25rem;
-      border-radius: 0;
+    border-radius: 0;
+    height: 100%;
+    z-index: 13;
+    overscroll-behavior: contain;
+
+    iframe {
+      width: 100%;
+      height: calc(100% - 2.75rem);
     }
   }
+
+  .PositionedLink {
+    z-index: 14;
+  }
+
+  .PreventBackgroundInteractions {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
 }
+
+// ::view-transition-new(dialog) {
+//   animation: 200ms ease-in both var(--p-motion-keyframes-fade-in),
+//     300ms cubic-bezier(0.34, 1.56, 0.64, 1) both show;
+// }
+
+// ::view-transition-old(dialog) {
+//   animation: 200ms ease-out both fade-out, 300ms ease-out both hide;
+// }
+
+// @keyframes fade-out {
+//   from {
+//     opacity: 1;
+//   }
+//   to {
+//     opacity: 0;
+//   }
+// }
+
+// @keyframes hide {
+//   from {
+//     transform: translateX(350px) translateY(0);
+//   }
+
+//   to {
+//     transform: translateX(0) translateY(350px);
+//   }
+// }
+
+// @keyframes show {
+//   from {
+//     transform: translateX(0) translateY(350px);
+//   }
+
+//   to {
+//     transform: translateX(350px) translateY(0);
+//   }
+// }
diff --git a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx
index fa37ac4e90b..b9bca9319d2 100644
--- a/polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx
+++ b/polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx
@@ -1,4 +1,4 @@
-import {Fragment, useEffect, useState} from 'react';
+import {Fragment, useRef, useEffect, useState, useCallback} from 'react';
 import {format} from 'prettier/standalone';
 import babel from 'prettier/parser-babel';
 import endent from 'endent';
@@ -9,6 +9,10 @@ import GrowFrame from '../GrowFrame';
 import Code from '../Code';
 import ExampleWrapper, {LinkButton} from '../ExampleWrapper';
 import {PatternExample} from '../../types';
+import {className as classNames} from '../../utils/various';
+import {viewTransition} from '../../utils/various';
+import {MaximizeMinor, MinimizeMinor} from '@shopify/polaris-icons';
+import Icon from '../Icon';
 
 const getISOStringYear = () => new Date().toISOString().split('T')[0];
 
@@ -63,15 +67,99 @@ const PatternsExample = ({
   showCode?: boolean;
   onCodeToggle?: () => void;
 }) => {
-  const isControlled = typeof showCode === 'undefined';
+  const expandedPreviewRef: React.RefObject<HTMLDialogElement> = useRef(null);
+  const previewRef: React.RefObject<HTMLDivElement> = useRef(null);
+
   const [codeActive, toggleCode] = useState(false);
+  const [dialogActive, toggleDialog] = useState(false);
+
+  const isControlled = typeof showCode === 'undefined';
   const showCodeValue = isControlled ? codeActive : showCode;
+
+  const handleScrollLock = (lock: boolean) => {
+    if (lock) {
+      document
+        ?.querySelector('html')
+        ?.setAttribute('style', 'overflow: hidden;');
+    } else {
+      document?.querySelector('html')?.removeAttribute('style');
+    }
+  };
+
   const handleCodeToggle = () => {
     if (onCodeToggle) onCodeToggle();
     if (isControlled) {
       toggleCode((codeActive) => !codeActive);
     }
   };
+
+  const handleMaximize = async () => {
+    const dialog = expandedPreviewRef.current;
+    const preview = previewRef.current;
+
+    if (preview) {
+      // @ts-ignore
+      preview.style.viewTransitionName = 'dialog';
+    }
+
+    const maximize = viewTransition(() => {
+      if (dialog) {
+        handleScrollLock(true);
+        toggleDialog(true);
+        dialog.showModal();
+      }
+
+      if (preview) {
+        // @ts-ignore
+        preview.style.viewTransitionName = '';
+      }
+    });
+
+    await maximize.finished;
+  };
+
+  const handleMinimize = useCallback(async () => {
+    const dialog = expandedPreviewRef.current;
+    const preview = previewRef.current;
+
+    try {
+      const minimize = viewTransition(() => {
+        if (dialog) {
+          handleScrollLock(false);
+          toggleDialog(false);
+          dialog.close();
+
+          if (preview) {
+            // @ts-ignore
+            preview.style.viewTransitionName = 'dialog';
+          }
+        }
+      });
+
+      await minimize.finished;
+    } finally {
+      if (preview) {
+        // @ts-ignore
+        preview.style.viewTransitionName = '';
+      }
+    }
+  }, []);
+
+  /* Escape to close with the <dialog> element is supposed to "just work", but it only worked here when the backdrop was the active element. Leaving this for now even though it doesn't work. <dialog> is an anomoly because of the top-layer...  */
+  useEffect(() => {
+    if (dialogActive) {
+      const handleKeyDownEscape = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          handleMinimize();
+        }
+      };
+
+      window.addEventListener('keyup', handleKeyDownEscape);
+
+      return () => window.removeEventListener('keyup', handleKeyDownEscape);
+    }
+  }, [dialogActive, handleMinimize]);
+
   const formatCodeSnippet = (code: string) => {
     let prettifiedCode;
 
@@ -126,16 +214,58 @@ const PatternsExample = ({
     paramType: 'search',
   })}`;
 
-  return (
-    <Stack gap="2" className={styles.SpecificityBuster}>
+  const exampleMarkup = (
+    <ExampleWrapper
+      ref={previewRef}
+      className={classNames(styles.ExampleWrapper)}
+      renderFrameActions={() => (
+        <Fragment>
+          <LinkButton
+            tabIndex={0}
+            className={classNames(
+              styles.PositionedLink,
+              dialogActive && styles.focus,
+            )}
+            aria-label="View enlarged example"
+            onClick={handleMaximize}
+          >
+            <Icon source={MaximizeMinor} />
+          </LinkButton>
+          <PlayroomButton code={sandboxCode} patternName={patternName} />
+          <LinkButton onClick={handleCodeToggle}>
+            {showCodeValue ? 'Hide code' : 'Show code'}
+          </LinkButton>
+        </Fragment>
+      )}
+    >
+      <GrowFrame
+        id="live-preview-iframe"
+        defaultHeight={'400px'}
+        src={previewUrl}
+      />
+    </ExampleWrapper>
+  );
+
+  const expandedExampleMarkup = (
+    <dialog
+      ref={expandedPreviewRef}
+      className={classNames(styles.Dialog, dialogActive && styles.open)}
+      // onClose={handleMinimize}
+    >
+      <div className={styles.PreventBackgroundInteractions} />
       <ExampleWrapper
         className={styles.ExampleWrapper}
         renderFrameActions={() => (
           <Fragment>
-            <PlayroomButton code={sandboxCode} patternName={patternName} />
-            <LinkButton onClick={handleCodeToggle}>
-              {showCodeValue ? 'Hide code' : 'Show code'}
+            <LinkButton
+              tabIndex={0}
+              className={styles.PositionedLink}
+              aria-label="Close enlarged example"
+              onClick={handleMinimize}
+            >
+              <Icon source={MinimizeMinor} />
             </LinkButton>
+            <PlayroomButton code={sandboxCode} patternName={patternName} />
           </Fragment>
         )}
       >
@@ -145,20 +275,29 @@ const PatternsExample = ({
           src={previewUrl}
         />
       </ExampleWrapper>
-      {showCodeValue ? (
-        <Code
-          code={[
-            {
-              title: 'React',
-              code: endent`
+    </dialog>
+  );
+
+  return (
+    <>
+      {expandedExampleMarkup}
+      <Stack gap="2" className={styles.SpecificityBuster}>
+        {exampleMarkup}
+        {showCodeValue ? (
+          <Code
+            code={[
+              {
+                title: 'React',
+                code: endent`
                 // This example is for guidance purposes. Copying it will come with caveats.
                 ${formattedCode}
               `,
-            },
-          ]}
-        />
-      ) : null}
-    </Stack>
+              },
+            ]}
+          />
+        ) : null}
+      </Stack>
+    </>
   );
 };
 
diff --git a/polaris.shopify.com/src/components/ViewTransition/ViewTransition.jsx b/polaris.shopify.com/src/components/ViewTransition/ViewTransition.jsx
new file mode 100644
index 00000000000..f14b3ac0f25
--- /dev/null
+++ b/polaris.shopify.com/src/components/ViewTransition/ViewTransition.jsx
@@ -0,0 +1,26 @@
+import React, {useEffect} from 'react';
+// import {useRouter} from 'next/router';
+
+export default function ViewTransition({children}) {
+  // const router = useRouter();
+
+  useEffect(() => {
+    const handler = () => {
+      if (document.startViewTransition !== undefined) {
+        return document.startViewTransition(async () => {
+          return await new Promise((resolve) => {
+            return resolve(true);
+          });
+        });
+      }
+    };
+
+    // router.events.on('routeChangeStart', handler);
+
+    return () => {
+      // router.events.off('routeChangeStart', handler);
+    };
+  }, []);
+
+  return children;
+}
diff --git a/polaris.shopify.com/src/components/ViewTransition/index.ts b/polaris.shopify.com/src/components/ViewTransition/index.ts
new file mode 100644
index 00000000000..8609a87f1f0
--- /dev/null
+++ b/polaris.shopify.com/src/components/ViewTransition/index.ts
@@ -0,0 +1,3 @@
+import ViewTransition from './ViewTransition';
+
+export default ViewTransition;
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index bf38fa6ff2e..8746c8f31d2 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -438,7 +438,7 @@ button {
   margin-bottom: var(--p-space-2);
 
   &:before {
-    content: "";
+    content: '';
     display: block;
     padding-bottom: 75%;
   }
diff --git a/polaris.shopify.com/src/utils/various.ts b/polaris.shopify.com/src/utils/various.ts
index 7b3f18be018..744c5175dd3 100644
--- a/polaris.shopify.com/src/utils/various.ts
+++ b/polaris.shopify.com/src/utils/various.ts
@@ -82,3 +82,20 @@ export const uppercaseFirst = (str: string): string =>
 
 export const deslugify = (str: string): string =>
   uppercaseFirst(str.replace(/-+/g, ' '));
+
+export const viewTransition = (callback: () => void | Promise<unknown>) => {
+  // @ts-ignore is experimental and not typed yet
+  if (document.startViewTransition) {
+    // @ts-ignore exists in Chrome 111+
+    return document.startViewTransition(callback);
+  } else {
+    callback();
+
+    const resolved = Promise.resolve();
+
+    return {
+      ready: resolved,
+      finished: resolved,
+    };
+  }
+};

From ea6b542841a7b16037964d7b64d06399741be45c Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Wed, 20 Sep 2023 07:28:32 -0700
Subject: [PATCH 086/102] Handle `buttonFrom` function in migration (#10575)

### WHY are these changes introduced?

Resolves https://github.com/Shopify/polaris/issues/10260

### WHAT is this pull request doing?

Adds a comment for manual migration of usages of the `buttonFrom`
function. There are approximately 100 usages of it in `web` so handling
these manually is quicker than trying to write a codemod for them.

---------

Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
---
 .changeset/dull-dingos-collect.md             |  5 +++
 ...eact-update-button-from-function.input.tsx | 28 +++++++++++++++
 ...act-update-button-from-function.output.tsx | 34 +++++++++++++++++++
 .../transform.ts                              | 18 ++++++++--
 4 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/dull-dingos-collect.md
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.input.tsx
 create mode 100644 polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.output.tsx

diff --git a/.changeset/dull-dingos-collect.md b/.changeset/dull-dingos-collect.md
new file mode 100644
index 00000000000..e10394cfdbf
--- /dev/null
+++ b/.changeset/dull-dingos-collect.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-migrator': patch
+---
+
+Handled `buttonFrom` and `buttonsFrom` functions in `Button` migration
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.input.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.input.tsx
new file mode 100644
index 00000000000..960685f199c
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.input.tsx
@@ -0,0 +1,28 @@
+import {buttonFrom, buttonsFrom} from '@shopify/polaris';
+
+const myButtonFrom = buttonFrom;
+
+export function App() {
+  const primaryFooterActionMarkup = buttonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const myButtonMarkup = myButtonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const multipleButtonsMarkup = buttonsFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  return primaryFooterActionMarkup;
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.output.tsx b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.output.tsx
new file mode 100644
index 00000000000..44ec8bd6068
--- /dev/null
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/tests/v12-react-update-button-from-function.output.tsx
@@ -0,0 +1,34 @@
+import {buttonFrom} from '@shopify/polaris';
+
+const myButtonFrom =
+  /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+  buttonFrom;
+
+export function App() {
+  const primaryFooterActionMarkup =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    buttonFrom(
+      {content: 'Edit', onAction: () => {}},
+      {
+        primary: true,
+      },
+    );
+
+  const myButtonMarkup = myButtonFrom(
+    {content: 'Edit', onAction: () => {}},
+    {
+      primary: true,
+    },
+  );
+
+  const multipleButtonsMarkup =
+    /* polaris-migrator: Unable to migrate the following expression. Please upgrade manually. */
+    buttonsFrom(
+      {content: 'Edit', onAction: () => {}},
+      {
+        primary: true,
+      },
+    );
+
+  return primaryFooterActionMarkup;
+}
diff --git a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
index fc6f5ff0968..a3736f493b7 100644
--- a/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
+++ b/polaris-migrator/src/migrations/v12-react-update-button-component/transform.ts
@@ -22,17 +22,27 @@ export default function transformer(
 ) {
   const source = j(fileInfo.source);
 
-  // If `Button` component name is not imported, exit
+  // If `Button` component name or `buttonFrom` function is not imported, exit
   if (
     !(
       hasImportDeclaration(j, source, '@shopify/polaris') &&
       (hasImportSpecifier(j, source, 'Button', '@shopify/polaris') ||
-        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris'))
+        hasImportSpecifier(j, source, 'ButtonProps', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'buttonFrom', '@shopify/polaris') ||
+        hasImportSpecifier(j, source, 'buttonsFrom', '@shopify/polaris'))
     )
   ) {
     return fileInfo.source;
   }
 
+  const localFunctionName =
+    getImportSpecifierName(j, source, 'buttonFrom', '@shopify/polaris') ||
+    'buttonFrom';
+
+  const localFunctionPluralName =
+    getImportSpecifierName(j, source, 'buttonsFrom', '@shopify/polaris') ||
+    'buttonsFrom';
+
   const localElementName =
     getImportSpecifierName(j, source, 'Button', '@shopify/polaris') || 'Button';
 
@@ -308,7 +318,9 @@ export default function transformer(
     .filter(
       (path) =>
         path.node.name === localElementName ||
-        path.node.name === localElementTypeName,
+        path.node.name === localElementTypeName ||
+        path.node.name === localFunctionName ||
+        path.node.name === localFunctionPluralName,
     )
     .forEach((path) => {
       if (path.node.type !== 'Identifier') return;

From da09e0b8caee9580db973ddce6c10ee7e6ec8523 Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyledurand@users.noreply.github.com>
Date: Wed, 20 Sep 2023 10:39:50 -0400
Subject: [PATCH 087/102] [polaris.shopify.com] Update browser url when copying
 url (#10573)

Had a bit of time so decided to slightly improve the copy url button to
also change the browser url. This behavior is more similar to how other
sites, like github, do this


https://github.com/Shopify/polaris/assets/6844391/7990d44a-fe30-4a73-8735-c0d08fcc9e19

I initially did this with window.location.replace but that jumps the
page around and scrolls to the anchor which messed with the tooltip
messaging too much and felt janky
---
 .changeset/ten-snakes-play.md                       |  5 +++++
 .../src/components/Markdown/Markdown.tsx            | 13 +++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ten-snakes-play.md

diff --git a/.changeset/ten-snakes-play.md b/.changeset/ten-snakes-play.md
new file mode 100644
index 00000000000..02db933b9ee
--- /dev/null
+++ b/.changeset/ten-snakes-play.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated copy url to change browser url
diff --git a/polaris.shopify.com/src/components/Markdown/Markdown.tsx b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
index 3b135829bc3..e84dd1ee454 100644
--- a/polaris.shopify.com/src/components/Markdown/Markdown.tsx
+++ b/polaris.shopify.com/src/components/Markdown/Markdown.tsx
@@ -155,7 +155,8 @@ function HeadingWithCopyButton({
       ? window.location.origin
       : 'https://polaris.shopify.com';
   const path = typeof window !== 'undefined' ? window.location.pathname : '';
-  const [copy, didJustCopy] = useCopyToClipboard(`${origin}${path}#${id}`);
+  const url = `${origin}${path}#${id}`;
+  const [copy, didJustCopy] = useCopyToClipboard(url);
 
   return (
     <Element id={id} className={styles.MarkdownHeading}>
@@ -164,7 +165,15 @@ function HeadingWithCopyButton({
         ariaLabel="Copy to clipboard"
         renderContent={() => <p>{didJustCopy ? 'Copied' : 'Copy'}</p>}
       >
-        <button className={styles.MarkdownCopyButton} onClick={copy}>
+        <button
+          className={styles.MarkdownCopyButton}
+          onClick={() => {
+            copy();
+            if (typeof window !== 'undefined') {
+              window.history.pushState(id, '', url);
+            }
+          }}
+        >
           <Icon source={ClipboardMinor} width={16} height={16} />
         </button>
       </Tooltip>

From 7be9c243a9612ea211ac9ea46898241f742072b2 Mon Sep 17 00:00:00 2001
From: Matt Lavoie <44816587+m4thieulavoie@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:20:05 -0400
Subject: [PATCH 088/102] [IndexTable] Add support for subheaders and range
 selection (#9445)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

This PR introduces subheader support to the `IndexTable.Row` component
and adds optional props to `IndexTable.Cell` to manage any logical
relationship between a subheader and its child row cells to make it
properly accessible.

[Initial design
Figma](https://www.figma.com/file/e9bDz4TNXeVIhGQoi5qy4t/Group-by?type=design&node-id=2541-79450&t=l4Ci32xDjAcZDhV3-0)

[Storybook
](https://5d559397bae39100201eedc1-ffunjiaaog.chromatic.com/?path=/story/all-components-indextable--with-sub-headers)

| Current | Experimental |
|--------|--------|
| <img width="776" alt="Screenshot 2023-06-30 at 11 37 57 AM"
src="https://github.com/Shopify/polaris/assets/18447883/a84ff53c-856d-4c40-bf35-1d91f93e71f5">
| <img width="775" alt="Screenshot 2023-06-30 at 11 37 43 AM"
src="https://github.com/Shopify/polaris/assets/18447883/3ee73d4e-2b57-46ac-b3bb-9427da30f651">
|

**Demo of the component in action**


https://github.com/Shopify/polaris/assets/18447883/ce01be75-8368-46d8-8dc4-2ba4d7c12e74

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
- Adds subheader styling to rows when a `rowType` of `subheader` is set
- Subheader UI was separated from the range selection UX because range
selection is needed for broader use cases, including rows of type
parent, child, or sibling in the product variant list (contribution
[coming soon](https://github.com/Shopify/web/issues/101199))
- Adds support for selecting a range of rows when a single row is
clicked if a `selectionRange` is set
- Adds support to the `IndexTable.Cell` for rendering a `<th>` element
- Adds support to the `IndexTable.Cell` for setting `scope` and
`colSpan` attributes

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

- Play with and inspect the [With subheaders
story](https://5d559397bae39100201eedc1-tsiyffygsx.chromatic.com/?path=/story/all-components-indextable--with-sub-headers)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloe.rice@shopify.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
---
 .changeset/lovely-rings-enjoy.md              |  17 +
 .../src/components/IndexTable/IndexTable.scss | 112 ++++-
 .../IndexTable/IndexTable.stories.tsx         | 384 ++++++++++++++----
 .../src/components/IndexTable/IndexTable.tsx  |   9 +-
 .../IndexTable/components/Cell/Cell.tsx       |  34 +-
 .../components/Cell/tests/Cell.test.tsx       |  32 ++
 .../components/Checkbox/Checkbox.tsx          |  19 +-
 .../Checkbox/tests/Checkbox.test.tsx          |  19 +-
 .../IndexTable/components/Row/Row.tsx         |  50 ++-
 .../components/Row/tests/Row.test.tsx         |  99 +++++
 polaris-react/src/index.ts                    |   5 +-
 .../src/utilities/index-provider/hooks.ts     |   2 +
 .../index-provider/tests/hooks.test.tsx       |  19 +-
 .../src/utilities/index-provider/types.ts     |   2 +
 .../src/utilities/index-table/context.ts      |   2 +-
 .../tests/use-index-resource-state.test.tsx   |  86 ++++
 .../src/utilities/use-index-resource-state.ts |  62 ++-
 .../content/components/lists/resource-list.md |   2 +-
 .../content/components/tables/index-table.md  |  89 ++--
 .../examples/index-table-with-subheaders.tsx  | 242 +++++++++++
 20 files changed, 1131 insertions(+), 155 deletions(-)
 create mode 100644 .changeset/lovely-rings-enjoy.md
 create mode 100644 polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx

diff --git a/.changeset/lovely-rings-enjoy.md b/.changeset/lovely-rings-enjoy.md
new file mode 100644
index 00000000000..dbd8b188c58
--- /dev/null
+++ b/.changeset/lovely-rings-enjoy.md
@@ -0,0 +1,17 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+IndexTable subheader support updates:
+- `IndexTable.Row`
+  - Added the `header` prop to apply subheader styles
+  - Added `indeterminate` value to `selected` prop
+  - Added `selectionRange` prop to specify which rows in the range are selected when the row is selected
+  - Added `rowType` prop to indicate the relationship or role of the row's contents (`data` or `subheader`)
+- `IndexTable.Cell`
+  - Added the `header` prop to apply subheader styles
+  - Added `as` prop to set as a `th` if it is serving as a subheading
+  - Added `colSpan` prop to specify the number of the columns that the cell element should extend
+  - Added `scope` prop to indicate which cells the `th` element relates
+- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure.
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 55877f55b9a..e7285829652 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -118,11 +118,14 @@ $loading-panel-height: 53px;
   }
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
-  #{$se23} & .TableRow-subdued {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
-    .TableCell-first,
-    .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-subdued);
+  #{$se23} & {
+    // stylelint-disable-next-line selector-max-combinators -- se23 overrides
+    .TableRow-subdued {
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
+      .TableCell-first,
+      .TableCell-first + .TableCell {
+        background-color: var(--p-color-bg-subdued);
+      }
     }
   }
 
@@ -220,19 +223,65 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
+
       #{$se23} & {
         color: var(--p-color-text-subdued);
       }
     }
   }
 
-  &.TableRow-hovered {
+  &.TableRow-subheader {
+    cursor: default;
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    &,
+    .TableCell:first-child,
+    .TableCell-first,
+    .TableCell-first + .TableCell,
+    .TableCell:last-child {
+      color: var(--p-color-text-subdued);
+      font-weight: var(--p-font-weight-medium);
+      font-size: var(--p-font-size-75);
+      background-color: var(--p-color-bg-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border);
+      border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+    }
+
+    #{$se23} & {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+        border-color: var(--p-color-border);
+      }
+    }
+  }
+
+  &.TableRow-hovered:not(.TableRow-disabled) {
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-hover);
     }
+
+    // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    &.TableRow-subheader {
+      // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+
+        #{$se23} & {
+          background-color: var(--p-color-bg-subdued);
+        }
+      }
+    }
   }
 
   &.TableRow-selected {
@@ -248,11 +297,27 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-primary-subdued-selected);
       }
     }
+
+    /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
+    &.TableRow-subheader {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+
+        #{$se23} & {
+          background-color: var(--p-color-bg-subdued);
+        }
+      }
+    }
   }
 
   // stylelint-disable-next-line no-duplicate-selectors -- se23 temporary styles
   #{$se23} & {
-    &.TableRow-hovered {
+    &.TableRow-hovered:not(.TableRow-disabled) {
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles
       &,
       .TableCell-first,
@@ -299,7 +364,7 @@ $loading-panel-height: 53px;
     }
   }
 
-  // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
+  /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
   &.TableRow-hovered.TableRow-selected {
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &,
@@ -313,6 +378,18 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-primary-subdued-hover);
       }
     }
+
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+    &.TableRow-subheader {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
+      &,
+      .TableCell:first-child,
+      .TableCell-first,
+      .TableCell-first + .TableCell,
+      .TableCell:last-child {
+        background-color: var(--p-color-bg-subdued);
+      }
+    }
   }
 }
 
@@ -757,7 +834,17 @@ $loading-panel-height: 53px;
       }
     }
   }
+
   #{$se23} & {
+    /* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
+    .TableCell,
+    .TableHeading {
+      /* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
+      &:first-child {
+        padding-left: var(--p-space-3);
+      }
+    }
+
     // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
     // stylelint-disable-next-line selector-max-combinators -- se23 override
     .TableRow-subdued:not(.TableRow-hovered) {
@@ -838,6 +925,7 @@ $loading-panel-height: 53px;
   .statusSubdued {
     .TableCell:last-child {
       background-color: var(--p-color-bg-subdued);
+
       #{$se23} & {
         color: var(--p-color-text-subdued);
       }
@@ -860,11 +948,11 @@ $loading-panel-height: 53px;
     }
   }
 
-  #{$se23} & .TableRow-selected.TableRow-subdued {
-    color: var(--p-color-text-subdued);
-  }
-
   #{$se23} & {
+    .TableRow-selected.TableRow-subdued {
+      color: var(--p-color-text-subdued);
+    }
+
     .TableRow-hovered {
       // stylelint-disable-next-line selector-max-compound-selectors -- se23 temporary styles
       .TableCell:last-child {
diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
index e170da57088..e0807467670 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -1,19 +1,26 @@
-import React, {useCallback, useState} from 'react';
+import React, {Fragment, useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import type {IndexFiltersProps} from '@shopify/polaris';
+import type {
+  IndexFiltersProps,
+  IndexTableProps,
+  IndexTableRowProps,
+} from '@shopify/polaris';
 import {
+  Icon,
+  HorizontalStack,
   Button,
   LegacyCard,
   EmptySearchResult,
   IndexFilters,
   useSetIndexFiltersMode,
-  IndexTable,
   Link,
   TextField,
   Text,
   useIndexResourceState,
 } from '@shopify/polaris';
 
+import {IndexTable} from './IndexTable';
+
 export default {
   component: IndexTable,
 } as ComponentMeta<typeof IndexTable>;
@@ -1400,7 +1407,7 @@ export function WithFiltering() {
     (value) => setTaggedWith(value),
     [],
   );
-  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+  const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
   const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
   const handleClearAll = useCallback(() => {
     handleTaggedWithRemove();
@@ -1435,7 +1442,7 @@ export function WithFiltering() {
       ]
     : [];
 
-  const sortOptions = [
+  const sortOptions: IndexFiltersProps['sortOptions'] = [
     {label: 'Date', value: 'today asc', directionLabel: 'Ascending'},
     {label: 'Date', value: 'today desc', directionLabel: 'Descending'},
   ];
@@ -1613,7 +1620,7 @@ export function WithRowStatus() {
         key={id}
         selected={selectedResources.includes(id)}
         position={index}
-        status={status}
+        status={status as IndexTableRowProps['status']}
       >
         <IndexTable.Cell>
           <Text fontWeight="bold" as="span">
@@ -1959,7 +1966,7 @@ export function WithClickableButtonColumn() {
         position={index}
       >
         <IndexTable.Cell>
-          <Button
+          <Link
             dataPrimaryLink
             url={url}
             onClick={() => console.log(`Clicked ${name}`)}
@@ -1967,7 +1974,7 @@ export function WithClickableButtonColumn() {
             <Text fontWeight="bold" as="span">
               {name}
             </Text>
-          </Button>
+          </Link>
         </IndexTable.Cell>
         <IndexTable.Cell>{location}</IndexTable.Cell>
         <IndexTable.Cell>
@@ -2171,7 +2178,7 @@ export function WithAllOfItsElements() {
     (value) => setTaggedWith(value),
     [],
   );
-  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+  const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
   const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
   const handleClearAll = useCallback(() => {
     handleTaggedWithRemove();
@@ -2227,7 +2234,7 @@ export function WithAllOfItsElements() {
       ]
     : [];
 
-  const sortOptions = [
+  const sortOptions: IndexFiltersProps['sortOptions'] = [
     {label: 'Date', value: 'today asc', directionLabel: 'Ascending'},
     {label: 'Date', value: 'today desc', directionLabel: 'Descending'},
   ];
@@ -2359,7 +2366,8 @@ export function WithAllOfItsElements() {
 
 export function WithSortableHeadings() {
   const [sortIndex, setSortIndex] = useState(0);
-  const [sortDirection, setSortDirection] = useState('descending');
+  const [sortDirection, setSortDirection] =
+    useState<IndexTableProps['sortDirection']>('descending');
 
   const sortToggleLabels = {
     0: {ascending: 'A-Z', descending: 'Z-A'},
@@ -2544,7 +2552,8 @@ export function WithSortableHeadings() {
 
 export function WithSortableCustomHeadings() {
   const [sortIndex, setSortIndex] = useState(0);
-  const [sortDirection, setSortDirection] = useState('descending');
+  const [sortDirection, setSortDirection] =
+    useState<IndexTableProps['sortDirection']>('descending');
 
   const sortToggleLabels = {
     0: {ascending: 'A-Z', descending: 'Z-A'},
@@ -2849,6 +2858,116 @@ export function WithCustomTooltips() {
   );
 }
 
+export function WithHeadingTooltips() {
+  const customers = [
+    {
+      id: '3410',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '3411',
+      url: '#',
+      name: 'Joe Jemison',
+      location: 'Sydney, AU',
+      orders: 20,
+      amountSpent: '$1,400',
+    },
+    {
+      id: '3412',
+      url: '#',
+      name: 'Sam Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$400',
+    },
+    {
+      id: '3413',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$4,300',
+    },
+    {
+      id: '2563',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+  ];
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(customers);
+
+  const rowMarkup = customers.map(
+    ({id, name, location, orders, amountSpent}, index) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+      >
+        <IndexTable.Cell>
+          <Text fontWeight="bold" as="span">
+            {name}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{location}</IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {orders}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {amountSpent}
+          </Text>
+        </IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={customers.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Name'},
+          {title: 'Location', tooltipContent: 'Strictly within the US'},
+          {
+            alignment: 'end',
+            id: 'order-count',
+            title: 'Order count',
+            new: true,
+          },
+          {
+            alignment: 'end',
+            id: 'amount-spent',
+            title: 'Amount spent',
+          },
+        ]}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
 export function WithZebraStriping() {
   const customers = [
     {
@@ -3106,7 +3225,7 @@ export function WithZebraStripingAndRowStatus() {
         key={id}
         selected={selectedResources.includes(id)}
         position={index}
-        status={status}
+        status={status as IndexTableRowProps['status']}
       >
         <IndexTable.Cell>
           <Text fontWeight="bold" as="span">
@@ -3408,7 +3527,7 @@ export function SmallScreenWithAllOfItsElements() {
     (value) => setTaggedWith(value),
     [],
   );
-  const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
+  const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
   const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
   const handleClearAll = useCallback(() => {
     handleTaggedWithRemove();
@@ -3464,7 +3583,7 @@ export function SmallScreenWithAllOfItsElements() {
       ]
     : [];
 
-  const sortOptions = [
+  const sortOptions: IndexFiltersProps['sortOptions'] = [
     {label: 'Date', value: 'today asc', directionLabel: 'Ascending'},
     {label: 'Date', value: 'today desc', directionLabel: 'Descending'},
   ];
@@ -3591,109 +3710,208 @@ export function SmallScreenWithAllOfItsElements() {
   }
 }
 
-export function WithHeadingTooltips() {
-  const customers = [
+export function WithSubHeaders() {
+  const rows = [
     {
-      id: '3410',
+      id: '3411',
       url: '#',
       name: 'Mae Jemison',
       location: 'Decatur, USA',
-      orders: 20,
+      orders: 11,
       amountSpent: '$2,400',
+      lastOrderDate: 'May 31, 2023',
     },
     {
-      id: '3411',
+      id: '2562',
       url: '#',
-      name: 'Joe Jemison',
-      location: 'Sydney, AU',
-      orders: 20,
-      amountSpent: '$1,400',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$975',
+      lastOrderDate: 'May 31, 2023',
     },
     {
-      id: '3412',
+      id: '4102',
       url: '#',
-      name: 'Sam Jemison',
-      location: 'Decatur, USA',
-      orders: 20,
-      amountSpent: '$400',
+      name: 'Colm Dillane',
+      location: 'New York, USA',
+      orders: 27,
+      amountSpent: '$2885',
+      lastOrderDate: 'May 31, 2023',
     },
     {
-      id: '3413',
+      id: '2564',
       url: '#',
-      name: 'Mae Jemison',
-      location: 'Decatur, USA',
-      orders: 20,
-      amountSpent: '$4,300',
+      name: 'Al Chemist',
+      location: 'New York, USA',
+      orders: 19,
+      amountSpent: '$1,209',
+      lastOrderDate: 'April 4, 2023',
+      disabled: true,
     },
     {
       id: '2563',
       url: '#',
-      name: 'Ellen Ochoa',
-      location: 'Los Angeles, USA',
-      orders: 30,
-      amountSpent: '$140',
+      name: 'Larry June',
+      location: 'San Francisco, USA',
+      orders: 22,
+      amountSpent: '$1,400',
+      lastOrderDate: 'March 19, 2023',
     },
   ];
+
+  const columnHeadings = [
+    {title: 'Name', id: 'column-header--name'},
+    {title: 'Location', id: 'column-header--location'},
+    {
+      alignment: 'end',
+      id: 'column-header--order-count',
+      title: 'Order count',
+    },
+    {
+      alignment: 'end',
+      hidden: false,
+      id: 'column-header--amount-spent',
+      title: 'Amount spent',
+    },
+  ];
+
+  const groupRowsBy = (groupKey: string, resolveId: (groupVal) => string) => {
+    let position = -1;
+    const groups = rows.reduce((groups, customer) => {
+      const groupVal = customer[groupKey];
+      if (!groups[groupVal]) {
+        position += 1;
+
+        groups[groupVal] = {
+          position,
+          customers: [],
+          id: resolveId(groupVal),
+        };
+      }
+
+      groups[groupVal].customers.push({
+        ...customer,
+        position: position + 1,
+      });
+
+      position += 1;
+      return groups;
+    }, {});
+
+    return groups;
+  };
+
   const resourceName = {
     singular: 'customer',
     plural: 'customers',
   };
 
   const {selectedResources, allResourcesSelected, handleSelectionChange} =
-    useIndexResourceState(customers);
+    useIndexResourceState(rows, {resourceFilter: ({disabled}) => !disabled});
 
-  const rowMarkup = customers.map(
-    ({id, name, location, orders, amountSpent}, index) => (
-      <IndexTable.Row
-        id={id}
-        key={id}
-        selected={selectedResources.includes(id)}
-        position={index}
-      >
-        <IndexTable.Cell>
-          <Text fontWeight="bold" as="span">
-            {name}
-          </Text>
-        </IndexTable.Cell>
-        <IndexTable.Cell>{location}</IndexTable.Cell>
-        <IndexTable.Cell>
-          <Text as="span" alignment="end" numeric>
-            {orders}
-          </Text>
-        </IndexTable.Cell>
-        <IndexTable.Cell>
-          <Text as="span" alignment="end" numeric>
-            {amountSpent}
-          </Text>
-        </IndexTable.Cell>
-      </IndexTable.Row>
-    ),
+  const orders = groupRowsBy(
+    'lastOrderDate',
+    (date) => `last-order-date--${date.replace(',', '').split(' ').join('-')}`,
   );
 
+  const rowMarkup = Object.keys(orders).map((orderDate, index) => {
+    const {customers, position, id: subheaderId} = orders[orderDate];
+    let selected: IndexTableRowProps['selected'] = false;
+
+    const someCustomersSelected = customers.some(({id}) =>
+      selectedResources.includes(id),
+    );
+
+    const allCustomersSelected = customers.every(({id}) =>
+      selectedResources.includes(id),
+    );
+
+    if (allCustomersSelected) {
+      selected = true;
+    } else if (someCustomersSelected) {
+      selected = 'indeterminate';
+    }
+
+    const selectableRows = rows.filter(({disabled}) => !disabled);
+    const rowRange: IndexTableRowProps['subHeaderRange'] = [
+      selectableRows.findIndex((row) => row.id === customers[0].id),
+      selectableRows.findIndex(
+        (row) => row.id === customers[customers.length - 1].id,
+      ),
+    ];
+
+    const disabled = customers.every(({disabled}) => disabled);
+
+    return (
+      <Fragment key={subheaderId}>
+        <IndexTable.Row
+          rowType="subheader"
+          selectionRange={rowRange}
+          id={`Subheader-${index}`}
+          position={position}
+          selected={selected}
+          disabled={disabled}
+          accessibilityLabel={`Select all customers whose last order was placed on ${orderDate}`}
+        >
+          <IndexTable.Cell scope="col" as="th" id={subheaderId}>
+            {`Last order placed: ${orderDate}`}
+          </IndexTable.Cell>
+          <IndexTable.Cell as="th" />
+          <IndexTable.Cell as="th" />
+          <IndexTable.Cell as="th" />
+        </IndexTable.Row>
+        {customers.map(
+          (
+            {id, name, location, orders, amountSpent, position, disabled},
+            rowIndex,
+          ) => {
+            return (
+              <IndexTable.Row
+                key={rowIndex}
+                id={id}
+                position={position}
+                selected={selectedResources.includes(id)}
+                disabled={disabled}
+              >
+                <IndexTable.Cell
+                  as="th"
+                  scope="row"
+                  headers={`${columnHeadings[0].id} ${subheaderId}`}
+                >
+                  <Text variant="bodyMd" fontWeight="semibold" as="span">
+                    {name}
+                  </Text>
+                </IndexTable.Cell>
+                <IndexTable.Cell>{location}</IndexTable.Cell>
+                <IndexTable.Cell>
+                  <Text as="span" alignment="end" numeric>
+                    {orders}
+                  </Text>
+                </IndexTable.Cell>
+                <IndexTable.Cell>
+                  <Text as="span" alignment="end" numeric>
+                    {amountSpent}
+                  </Text>
+                </IndexTable.Cell>
+              </IndexTable.Row>
+            );
+          },
+        )}
+      </Fragment>
+    );
+  });
+
   return (
     <LegacyCard>
       <IndexTable
-        resourceName={resourceName}
-        itemCount={customers.length}
+        onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
         }
-        onSelectionChange={handleSelectionChange}
-        headings={[
-          {title: 'Name'},
-          {title: 'Location', tooltipContent: 'Strictly within the US'},
-          {
-            alignment: 'end',
-            id: 'order-count',
-            title: 'Order count',
-            new: true,
-          },
-          {
-            alignment: 'end',
-            id: 'amount-spent',
-            title: 'Amount spent',
-          },
-        ]}
+        resourceName={resourceName}
+        itemCount={rows.length}
+        headings={columnHeadings as IndexTableProps['headings']}
       >
         {rowMarkup}
       </IndexTable>
diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx
index a414023a328..e388b2d1897 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.tsx
@@ -45,6 +45,7 @@ import {ScrollContainer, Cell, Row} from './components';
 import styles from './IndexTable.scss';
 
 interface IndexTableHeadingBase {
+  id?: string;
   /**
    * Adjust horizontal alignment of header content.
    * @default 'start'
@@ -65,6 +66,7 @@ interface IndexTableHeadingBase {
 
 interface IndexTableHeadingTitleString extends IndexTableHeadingBase {
   title: string;
+  id?: string;
 }
 
 interface IndexTableHeadingTitleNode extends IndexTableHeadingBase {
@@ -841,6 +843,7 @@ function IndexTableBase({
 
     const headingContent = (
       <th
+        id={heading.id}
         className={headingContentClassName}
         key={getHeadingKey(heading)}
         data-index-table-heading
@@ -1152,11 +1155,9 @@ const isBreakpointsXS = () => {
 };
 
 function getHeadingKey(heading: IndexTableHeading): string {
-  if ('id' in heading && heading.id) {
+  if (heading.id) {
     return heading.id;
-  }
-
-  if (typeof heading.title === 'string') {
+  } else if (typeof heading.title === 'string') {
     return heading.title;
   }
 
diff --git a/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx b/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx
index 0ef0604da6d..b181e700fc7 100644
--- a/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx
+++ b/polaris-react/src/components/IndexTable/components/Cell/Cell.tsx
@@ -5,21 +5,47 @@ import {classNames} from '../../../../utilities/css';
 import styles from '../../IndexTable.scss';
 
 export interface CellProps {
+  /** The table cell element to render. Render the cell as a `th` if it serves as a subheading
+   * @default 'td'
+   */
+  as?: 'th' | 'td';
+  /** The unique ID to set on the cell element */
+  id?: string;
+  /** The cell contents */
   children?: ReactNode;
+  /** Custom class name to apply to the cell element */
   className?: string;
+  /** Whether the cell padding should be removed
+   * @default false
+   */
   flush?: boolean;
+  /** For subheader cells -- The number of the columns that the cell element should extend to */
+  colSpan?: HTMLTableCellElement['colSpan'];
+  /**  For subheader cells -- Indicates the cells that the `th` element relates to */
+  scope?: HTMLTableCellElement['scope'];
+  /** A space-separated list of the `th` cell IDs that describe or apply to it. Use for cells within a row that relate to a subheader cell in addition to their column header. */
+  headers?: HTMLTableCellElement['headers'];
 }
 
 export const Cell = memo(function Cell({
   children,
-  className,
+  className: customClassName,
   flush,
+  colSpan,
+  headers,
+  scope,
+  as = 'td',
+  id,
 }: CellProps) {
-  const cellClassName = classNames(
-    className,
+  const className = classNames(
+    customClassName,
     styles.TableCell,
     flush && styles['TableCell-flush'],
   );
 
-  return <td className={cellClassName}>{children}</td>;
+  return React.createElement(
+    as,
+    {id, colSpan, headers, scope, className},
+    children,
+  );
 });
diff --git a/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx b/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx
index c9afc3862ad..b3ef040488b 100644
--- a/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx
+++ b/polaris-react/src/components/IndexTable/components/Cell/tests/Cell.test.tsx
@@ -11,6 +11,38 @@ describe('<Cell />', () => {
     expect(cell).toContainReactComponent('td');
   });
 
+  it('renders a th element if set on `as` prop', () => {
+    const cell = mountWithTable(<Cell as="th" />);
+
+    expect(cell).toContainReactComponent('th');
+  });
+
+  it('renders a td element if  `as` prop is not set', () => {
+    const cell = mountWithTable(<Cell />);
+
+    expect(cell).toContainReactComponent('td');
+  });
+
+  it('forwards the `colSpan` prop', () => {
+    const cell = mountWithTable(<Cell colSpan={3} />);
+
+    expect(cell.find('td')).toHaveReactProps({colSpan: 3});
+  });
+
+  it('forwards the `scope` prop', () => {
+    const cell = mountWithTable(<Cell scope="colgroup" />);
+
+    expect(cell.find('td')).toHaveReactProps({scope: 'colgroup'});
+  });
+
+  it('forwards the `headers` prop', () => {
+    const cell = mountWithTable(<Cell headers="last-order-date name" />);
+
+    expect(cell.find('td')).toHaveReactProps({
+      headers: 'last-order-date name',
+    });
+  });
+
   it('applies flushed styles when flush prop is true', () => {
     const cell = mountWithTable(<Cell flush />);
 
diff --git a/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx
index dff6974846e..103e8bf1eed 100644
--- a/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx
+++ b/polaris-react/src/components/IndexTable/components/Checkbox/Checkbox.tsx
@@ -12,12 +12,23 @@ import sharedStyles from '../../IndexTable.scss';
 
 import styles from './Checkbox.scss';
 
-export const Checkbox = memo(function Checkbox() {
+interface CheckboxProps {
+  accessibilityLabel?: string;
+}
+
+export const Checkbox = memo(function Checkbox({
+  accessibilityLabel,
+}: CheckboxProps) {
   const i18n = useI18n();
   const {resourceName} = useIndexValue();
   const {itemId, selected, disabled, onInteraction} = useContext(RowContext);
 
   const wrapperClassName = classNames(styles.Wrapper);
+  const label = accessibilityLabel
+    ? accessibilityLabel
+    : i18n.translate('Polaris.IndexTable.selectItem', {
+        resourceName: resourceName.singular,
+      });
 
   return (
     <CheckboxWrapper>
@@ -28,10 +39,8 @@ export const Checkbox = memo(function Checkbox() {
           onKeyUp={noop}
         >
           <PolarisCheckbox
-            id={itemId}
-            label={i18n.translate('Polaris.IndexTable.selectItem', {
-              resourceName: resourceName.singular,
-            })}
+            id={`Select-${itemId}`}
+            label={label}
             labelHidden
             checked={selected}
             disabled={disabled}
diff --git a/polaris-react/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx b/polaris-react/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx
index 12bfa0f647a..9cb9656304f 100644
--- a/polaris-react/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx
+++ b/polaris-react/src/components/IndexTable/components/Checkbox/tests/Checkbox.test.tsx
@@ -41,7 +41,9 @@ describe('<Checkbox />', () => {
     const id = 'id';
     const checkbox = mountWithTable(<Checkbox />, {rowProps: {id}});
 
-    expect(checkbox).toContainReactComponent(PolarisCheckbox, {id});
+    expect(checkbox).toContainReactComponent(PolarisCheckbox, {
+      id: `Select-${id}`,
+    });
   });
 
   it('renders a Checkbox with a label', () => {
@@ -55,6 +57,21 @@ describe('<Checkbox />', () => {
     });
   });
 
+  it('renders a Checkbox with a custom label', () => {
+    const resourceName = {singular: 'Singular', plural: 'Plural'};
+    const accessibilityLabel = `Select ${resourceName.singular} who ordered yesterday`;
+    const checkbox = mountWithTable(
+      <Checkbox accessibilityLabel={accessibilityLabel} />,
+      {
+        indexProps: {resourceName},
+      },
+    );
+
+    expect(checkbox).toContainReactComponent(PolarisCheckbox, {
+      label: accessibilityLabel,
+    });
+  });
+
   it('renders a Checkbox with a label hidden set to true', () => {
     const checkbox = mountWithTable(<Checkbox />);
 
diff --git a/polaris-react/src/components/IndexTable/components/Row/Row.tsx b/polaris-react/src/components/IndexTable/components/Row/Row.tsx
index 2a28f9120fc..2b94d6aafc8 100644
--- a/polaris-react/src/components/IndexTable/components/Row/Row.tsx
+++ b/polaris-react/src/components/IndexTable/components/Row/Row.tsx
@@ -9,20 +9,41 @@ import {
 import {Checkbox} from '../Checkbox';
 import {classNames, variationName} from '../../../../utilities/css';
 import {RowContext, RowHoveredContext} from '../../../../utilities/index-table';
+import type {Range} from '../../../../utilities/index-provider/types';
 import styles from '../../IndexTable.scss';
 
+type RowType = 'data' | 'subheader';
 type RowStatus = 'success' | 'subdued' | 'critical';
 type TableRowElementType = HTMLTableRowElement & HTMLLIElement;
 
 export interface RowProps {
+  /** Table header or data cells */
   children: React.ReactNode;
+  /** A unique identifier for the row */
   id: string;
-  selected?: boolean;
+  /** Whether the row is selected */
+  selected?: boolean | 'indeterminate';
+  /** The zero-indexed position of the row. Used for Shift key multi-selection */
   position: number;
+  /** Whether the row should be subdued */
   subdued?: boolean;
+  /** Whether the row should have a status */
   status?: RowStatus;
+  /** Whether the row should be disabled */
   disabled?: boolean;
+  /** A tuple array with the first and last index of the range of other rows that this row describes. All rows in the range are selected when the selection range row is selected. */
+  selectionRange?: Range;
+  /**
+   * Indicates the relationship or role of the row's contents. A "subheader" row displays the same as the table header.
+   *  @default 'data' */
+  rowType?: RowType;
+  /** Label set on the row's checkbox
+   * @default "Select {resourceName}"
+   */
+  accessibilityLabel?: string;
+  /** Callback fired when the row is clicked and contains a data-primary-link */
   onNavigation?(id: string): void;
+  /** Callback fired when the row is clicked. Overrides the default click behaviour. */
   onClick?(): void;
 }
 
@@ -34,6 +55,9 @@ export const Row = memo(function Row({
   subdued,
   status,
   disabled,
+  selectionRange,
+  rowType = 'data',
+  accessibilityLabel,
   onNavigation,
   onClick,
 }: RowProps) {
@@ -48,15 +72,20 @@ export const Row = memo(function Row({
   const handleInteraction = useCallback(
     (event: React.MouseEvent | React.KeyboardEvent) => {
       event.stopPropagation();
+      let selectionType = SelectionType.Single;
 
       if (('key' in event && event.key !== ' ') || !onSelectionChange) return;
-      const selectionType = event.nativeEvent.shiftKey
-        ? SelectionType.Multi
-        : SelectionType.Single;
 
-      onSelectionChange(selectionType, !selected, id, position);
+      if (event.nativeEvent.shiftKey) {
+        selectionType = SelectionType.Multi;
+      } else if (selectionRange) {
+        selectionType = SelectionType.Range;
+      }
+
+      const selection: string | Range = selectionRange ?? id;
+      onSelectionChange(selectionType, !selected, selection, position);
     },
-    [id, onSelectionChange, position, selected],
+    [id, onSelectionChange, selected, selectionRange, position],
   );
 
   const contextValue = useMemo(
@@ -86,6 +115,7 @@ export const Row = memo(function Row({
 
   const rowClassName = classNames(
     styles.TableRow,
+    rowType === 'subheader' && styles['TableRow-subheader'],
     selectable && condensed && styles.condensedRow,
     selected && styles['TableRow-selected'],
     subdued && styles['TableRow-subdued'],
@@ -101,6 +131,8 @@ export const Row = memo(function Row({
 
   if ((!disabled && selectable) || primaryLinkElement.current) {
     handleRowClick = (event: React.MouseEvent) => {
+      if (rowType === 'subheader') return;
+
       if (!tableRowRef.current || isNavigating.current) {
         return;
       }
@@ -140,14 +172,16 @@ export const Row = memo(function Row({
   }
 
   const RowWrapper = condensed ? 'li' : 'tr';
-
-  const checkboxMarkup = selectable ? <Checkbox /> : null;
+  const checkboxMarkup = selectable ? (
+    <Checkbox accessibilityLabel={accessibilityLabel} />
+  ) : null;
 
   return (
     <RowContext.Provider value={contextValue}>
       <RowHoveredContext.Provider value={hovered}>
         <RowWrapper
           key={id}
+          id={id}
           className={rowClassName}
           onMouseEnter={setHoverIn}
           onMouseLeave={setHoverOut}
diff --git a/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx b/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx
index b823b47d496..ae35ccf14df 100644
--- a/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx
+++ b/polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx
@@ -6,10 +6,14 @@ import type {DeepPartial} from '@shopify/useful-types';
 import {IndexTable} from '../../../IndexTable';
 import type {IndexTableProps} from '../../../IndexTable';
 import {RowHoveredContext} from '../../../../../utilities/index-table';
+import {SelectionType} from '../../../../../utilities/index-provider';
 import {Row} from '../Row';
 import {Checkbox} from '../../Checkbox';
 import {Button} from '../../../../Button';
 import {Link} from '../../../../Link';
+import {Checkbox as PolarisCheckbox} from '../../../../Checkbox';
+import styles from '../../../IndexTable.scss';
+import type {Range} from '../../../../../utilities/index-provider';
 
 const defaultEvent = {
   preventDefault: noop,
@@ -84,6 +88,101 @@ describe('<Row />', () => {
     expect(row).toContainReactComponent(RowHoveredContext.Provider);
   });
 
+  it('applies the styles.TableRow class to the table row element', () => {
+    const row = mountWithTable(
+      <Row id="id" selected position={1}>
+        <td />
+      </Row>,
+    );
+
+    expect(row.find(Row)?.find('tr')?.prop('className')).toContain(
+      styles.TableRow,
+    );
+  });
+
+  describe('rowType', () => {
+    describe('when a `rowType` of `subheader` is set', () => {
+      it('applies the .TableRow-subheader class to the table row element', () => {
+        const row = mountWithTable(
+          <Row id="id" selected rowType="subheader" position={1}>
+            <td />
+          </Row>,
+        );
+
+        expect(row.find(Row)?.find('tr')?.prop('className')).toContain(
+          styles['TableRow-subheader'],
+        );
+      });
+
+      it('calls onSelectionChange with the `selectionRange` when present and the row checkbox cell is clicked', () => {
+        const onSelectionChangeSpy = jest.fn();
+        const range: Range = [0, 1];
+        const row = mountWithTable(
+          <Row {...defaultProps} rowType="subheader" selectionRange={range}>
+            <th>
+              <a href="/">Child without data-primary-link</a>
+            </th>
+          </Row>,
+          {
+            indexTableProps: {
+              itemCount: 50,
+              selectedItemsCount: 0,
+              onSelectionChange: onSelectionChangeSpy,
+            },
+          },
+        );
+
+        row.find('div', {className: 'Wrapper'})!.triggerKeypath('onClick', {
+          stopPropagation: noop,
+          key: ' ',
+          nativeEvent: {},
+        });
+
+        expect(onSelectionChangeSpy).toHaveBeenCalledTimes(1);
+        expect(onSelectionChangeSpy).toHaveBeenCalledWith(
+          SelectionType.Range,
+          true,
+          range,
+        );
+      });
+
+      it('does not call onSelectionChange with the `selectionRange` when present and the row is clicked', () => {
+        const onSelectionChangeSpy = jest.fn();
+        const range: Range = [0, 1];
+        const row = mountWithTable(
+          <Row {...defaultProps} rowType="subheader" selectionRange={range}>
+            <th>
+              <a href="/">Child without data-primary-link</a>
+            </th>
+          </Row>,
+          {
+            indexTableProps: {
+              itemCount: 50,
+              selectedItemsCount: 0,
+              onSelectionChange: onSelectionChangeSpy,
+            },
+          },
+        );
+
+        triggerOnClick(row, 1, defaultEvent);
+
+        expect(onSelectionChangeSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  it('allows the checkbox to be indeterminate', () => {
+    const row = mountWithTable(
+      <Row id="id" selected="indeterminate" position={1}>
+        <td />
+      </Row>,
+    );
+
+    expect(row.find(Row)?.find(PolarisCheckbox)?.prop('checked')).toBe(
+      'indeterminate',
+    );
+  });
+
   it(`dispatches a mouse event when the row is clicked and selectMode is false`, () => {
     const spy = jest.fn();
     const row = mountWithTable(
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 0fdb30948db..c687178a38a 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -199,7 +199,10 @@ export type {
 } from './components/IndexFilters';
 
 export {IndexTable} from './components/IndexTable';
-export type {IndexTableProps} from './components/IndexTable';
+export type {
+  IndexTableProps,
+  RowProps as IndexTableRowProps,
+} from './components/IndexTable';
 
 export {Indicator} from './components/Indicator';
 export type {IndicatorProps} from './components/Indicator';
diff --git a/polaris-react/src/utilities/index-provider/hooks.ts b/polaris-react/src/utilities/index-provider/hooks.ts
index 5ae3d9d0f01..90d546b25ea 100644
--- a/polaris-react/src/utilities/index-provider/hooks.ts
+++ b/polaris-react/src/utilities/index-provider/hooks.ts
@@ -179,6 +179,8 @@ export function useHandleBulkSelection({
         selectionType === SelectionType.All
       ) {
         onSelectionChange(selectionType, toggleType);
+      } else if (selectionType === SelectionType.Range) {
+        onSelectionChange(SelectionType.Range, toggleType, selection);
       }
     },
     [onSelectionChange],
diff --git a/polaris-react/src/utilities/index-provider/tests/hooks.test.tsx b/polaris-react/src/utilities/index-provider/tests/hooks.test.tsx
index de56b51a30c..d7958a0c190 100644
--- a/polaris-react/src/utilities/index-provider/tests/hooks.test.tsx
+++ b/polaris-react/src/utilities/index-provider/tests/hooks.test.tsx
@@ -215,7 +215,7 @@ describe('useHandleBulkSelection', () => {
     return <TypedChild onSelectionChange={contextValue} />;
   }
 
-  it('selects ranges', () => {
+  it('selects ranges with shift key selection', () => {
     const onSelectionChangeSpy = jest.fn();
     const mockComponent = mount(
       <MockComponent onSelectionChange={onSelectionChangeSpy} />,
@@ -246,4 +246,21 @@ describe('useHandleBulkSelection', () => {
       [3, 4],
     );
   });
+
+  it('selects ranges with subheader selection', () => {
+    const onSelectionChangeSpy = jest.fn();
+    const mockComponent = mount(
+      <MockComponent onSelectionChange={onSelectionChangeSpy} />,
+    );
+
+    const typedChild = mockComponent.find(TypedChild)!;
+
+    typedChild.trigger('onSelectionChange', SelectionType.Range, true, [1, 3]);
+
+    expect(onSelectionChangeSpy).toHaveBeenLastCalledWith(
+      SelectionType.Range,
+      true,
+      [1, 3],
+    );
+  });
 });
diff --git a/polaris-react/src/utilities/index-provider/types.ts b/polaris-react/src/utilities/index-provider/types.ts
index 43a9087cb46..093d847ed51 100644
--- a/polaris-react/src/utilities/index-provider/types.ts
+++ b/polaris-react/src/utilities/index-provider/types.ts
@@ -7,6 +7,7 @@ export enum SelectionType {
   Page = 'page',
   Multi = 'multi',
   Single = 'single',
+  Range = 'range',
 }
 
 export type Range = [number, number];
@@ -27,6 +28,7 @@ export interface IndexProviderProps {
     selectionType: SelectionType,
     toggleType: boolean,
     selection?: string | Range,
+    position?: number,
   ): void;
 }
 
diff --git a/polaris-react/src/utilities/index-table/context.ts b/polaris-react/src/utilities/index-table/context.ts
index 425ae65f874..0bb4515dd1e 100644
--- a/polaris-react/src/utilities/index-table/context.ts
+++ b/polaris-react/src/utilities/index-table/context.ts
@@ -2,7 +2,7 @@ import {createContext} from 'react';
 
 interface RowContextType {
   itemId?: string;
-  selected?: boolean;
+  selected?: boolean | 'indeterminate';
   disabled?: boolean;
   position?: number;
   onInteraction?: (event: React.MouseEvent | React.KeyboardEvent) => void;
diff --git a/polaris-react/src/utilities/tests/use-index-resource-state.test.tsx b/polaris-react/src/utilities/tests/use-index-resource-state.test.tsx
index ccbc04c489c..fd25d7847c1 100644
--- a/polaris-react/src/utilities/tests/use-index-resource-state.test.tsx
+++ b/polaris-react/src/utilities/tests/use-index-resource-state.test.tsx
@@ -496,6 +496,92 @@ describe('useIndexResourceState', () => {
         });
       });
     });
+
+    describe('SelectionType.Range', () => {
+      describe('with a custom resource filter', () => {
+        it('only selects resources that match the filter', () => {
+          const idOne = '1';
+          const idTwo = '2';
+          const idThree = '3';
+          const resources = [{id: idOne}, {id: idTwo}, {id: idThree}];
+          const customResoureFilter = (item: typeof resources[0]) => {
+            return item.id !== idOne;
+          };
+          const mockComponent = mountWithApp(
+            <MockComponent
+              resources={resources}
+              options={{resourceFilter: customResoureFilter}}
+            />,
+          );
+
+          mockComponent
+            .find(TypedChild)!
+            .trigger('onClick', SelectionType.Range, true, [0, 2]);
+
+          expect(mockComponent).toContainReactComponent(TypedChild, {
+            selectedResources: [idTwo, idThree],
+          });
+        });
+      });
+
+      it('selects all resources within range when none are selected', () => {
+        const idOne = '1';
+        const idTwo = '2';
+        const idThree = '3';
+        const resources = [{id: idOne}, {id: idTwo}, {id: idThree}];
+        const mockComponent = mountWithApp(
+          <MockComponent resources={resources} />,
+        );
+
+        mockComponent
+          .find(TypedChild)!
+          .trigger('onClick', SelectionType.Range, true, [0, 2]);
+
+        expect(mockComponent).toContainReactComponent(TypedChild, {
+          selectedResources: [idOne, idTwo, idThree],
+        });
+      });
+
+      it('selects all resources within range when some are selected', () => {
+        const idOne = '1';
+        const idTwo = '2';
+        const idThree = '3';
+        const resources = [{id: idOne}, {id: idTwo}, {id: idThree}];
+        const options = {selectedResources: [idOne]};
+        const mockComponent = mountWithApp(
+          <MockComponent resources={resources} options={options} />,
+        );
+
+        mockComponent
+          .find(TypedChild)!
+          .trigger('onClick', SelectionType.Range, true, [0, 2]);
+
+        expect(mockComponent).toContainReactComponent(TypedChild, {
+          selectedResources: [idOne, idTwo, idThree],
+        });
+      });
+
+      it('deselects all resources within range when all are selected', () => {
+        const idOne = '1';
+        const idTwo = '2';
+        const idThree = '3';
+        const resources = [{id: idOne}, {id: idTwo}, {id: idThree}];
+        const mockComponent = mountWithApp(
+          <MockComponent
+            resources={resources}
+            options={{selectedResources: [idOne, idTwo, idThree]}}
+          />,
+        );
+
+        mockComponent
+          .find(TypedChild)!
+          .trigger('onClick', SelectionType.Range, false, [0, 2]);
+
+        expect(mockComponent).toContainReactComponent(TypedChild, {
+          selectedResources: [],
+        });
+      });
+    });
   });
 
   describe('clearSelection', () => {
diff --git a/polaris-react/src/utilities/use-index-resource-state.ts b/polaris-react/src/utilities/use-index-resource-state.ts
index 361fbffec30..2c3eb1463b6 100644
--- a/polaris-react/src/utilities/use-index-resource-state.ts
+++ b/polaris-react/src/utilities/use-index-resource-state.ts
@@ -5,6 +5,7 @@ export enum SelectionType {
   Page = 'page',
   Multi = 'multi',
   Single = 'single',
+  Range = 'range',
 }
 type Range = [number, number];
 type ResourceIDResolver<T extends {[key: string]: unknown}> = (
@@ -32,7 +33,7 @@ export function useIndexResourceState<T extends {[key: string]: unknown}>(
     selectedResources?: string[];
     allResourcesSelected?: boolean;
     resourceIDResolver?: ResourceIDResolver<T>;
-    resourceFilter?: (value: T) => boolean;
+    resourceFilter?: (value: T, index: number) => boolean;
   } = {
     selectedResources: [],
     allResourcesSelected: false,
@@ -85,18 +86,22 @@ export function useIndexResourceState<T extends {[key: string]: unknown}>(
           break;
         case SelectionType.Multi:
           if (!selection) break;
-          setSelectedResources((newSelectedResources) => {
+          setSelectedResources((currentSelectedResources) => {
             const ids: string[] = [];
             const filteredResources = resourceFilter
               ? resources.filter(resourceFilter)
               : resources;
-            for (let i = selection[0] as number; i <= selection[1]; i++) {
+            for (
+              let i = selection[0] as number;
+              i <= (selection[1] as number);
+              i++
+            ) {
               if (filteredResources.includes(resources[i])) {
                 const id = resourceIDResolver(resources[i]);
 
                 if (
-                  (isSelecting && !newSelectedResources.includes(id)) ||
-                  (!isSelecting && newSelectedResources.includes(id))
+                  (isSelecting && !currentSelectedResources.includes(id)) ||
+                  (!isSelecting && currentSelectedResources.includes(id))
                 ) {
                   ids.push(id);
                 }
@@ -104,8 +109,49 @@ export function useIndexResourceState<T extends {[key: string]: unknown}>(
             }
 
             return isSelecting
-              ? [...newSelectedResources, ...ids]
-              : newSelectedResources.filter((id) => !ids.includes(id));
+              ? [...currentSelectedResources, ...ids]
+              : currentSelectedResources.filter((id) => !ids.includes(id));
+          });
+
+          break;
+        case SelectionType.Range:
+          if (!selection) break;
+
+          setSelectedResources((currentSelectedResources) => {
+            const filteredResources = resourceFilter
+              ? resources.filter(resourceFilter)
+              : resources;
+
+            const resourceIds = filteredResources.map(resourceIDResolver);
+
+            const selectedIds = resourceIds.slice(
+              Number(selection[0]),
+              Number(selection[1]) + 1,
+            );
+
+            const isIndeterminate = selectedIds.some((id) => {
+              return selectedResources.includes(id);
+            });
+
+            const isChecked = selectedIds.every((id) => {
+              return selectedResources.includes(id);
+            });
+
+            const isSelectingAllInRange =
+              !isChecked && (isSelecting || isIndeterminate);
+
+            const nextSelectedResources = isSelectingAllInRange
+              ? [
+                  ...new Set([
+                    ...currentSelectedResources,
+                    ...selectedIds,
+                  ]).values(),
+                ]
+              : currentSelectedResources.filter(
+                  (id) => !selectedIds.includes(id),
+                );
+
+            return nextSelectedResources;
           });
           break;
       }
@@ -113,7 +159,7 @@ export function useIndexResourceState<T extends {[key: string]: unknown}>(
     [
       allResourcesSelected,
       resourceFilter,
-      selectedResources.length,
+      selectedResources,
       resources,
       resourceIDResolver,
     ],
diff --git a/polaris.shopify.com/content/components/lists/resource-list.md b/polaris.shopify.com/content/components/lists/resource-list.md
index 8c74e9bf3c1..feea48ffa05 100644
--- a/polaris.shopify.com/content/components/lists/resource-list.md
+++ b/polaris.shopify.com/content/components/lists/resource-list.md
@@ -181,5 +181,5 @@ Resource lists should:
 
 ## Related components
 
-- To present structured data for comparison and analysis, like when helping merchants to gain insights or review analytics, use the [data table component](https://polaris.shopify.com/components/data-table)
+- To present structured data for comparison and analysis, like when helping merchants to gain insights or review analytics, use the [data table component](https://polaris.shopify.com/components/tables/data-table)
 - To display a simple list of related content, [use the list component](https://polaris.shopify.com/components/lists/list)
diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md
index 7a948d317ab..005170fc8cf 100644
--- a/polaris.shopify.com/content/components/tables/index-table.md
+++ b/polaris.shopify.com/content/components/tables/index-table.md
@@ -70,6 +70,9 @@ examples:
   - fileName: index-table-without-checkboxes.tsx
     title: Without checkboxes
     description: An index table without checkboxes and bulk actions.
+  - fileName: index-table-with-subheaders.tsx
+    title: With subheaders
+    description: An index table with multiple table headers. Use to present merchants with resources grouped by a relevant data value to enable faster bulk selection.
 ---
 
 Index tables can also:
@@ -86,19 +89,19 @@ Index tables can also:
 Using an index table in a project involves combining the following components and subcomponents:
 
 - IndexTable
-- [IndexTableRow](#index-table-row)
-- [IndexTableCell](#index-table-cell)
+- [IndexTable.Row](#index-table-row)
+- [IndexTable.Cell](#index-table-cell)
 - [Filters](/components/selection-and-input/filters) (optional)
 - [IndexFilters](/components/selection-and-input/index-filters) (optional)
-- Pagination component (optional)
+- [Pagination](/components/navigation/pagination) (optional)
 
-The index table component provides the UI elements for list sorting, filtering, and pagination, but doesn’t provide the logic for these operations. When a sort option is changed, filter added, or second page requested, you’ll need to handle that event (including any network requests) and then update the component with new props.
+The index table component provides the UI elements for list selection, sorting, filtering, and pagination, but doesn’t provide the logic for these operations. When a sort option is changed, filter added, or second page requested, you’ll need to handle that event (including any network requests) and then update the component with new props.
 
 ---
 
 ## Purpose
 
-Shopify is organized around objects that represent merchants businesses, like customers, products, and orders. Each individual order, for example, is given a dedicated page that can be linked to. In Shopify, we call these types of objects _resources_, and we call the object’s dedicated page its _details page_.
+Shopify is organized around objects that represent merchants' businesses, like customers, products, and orders. Each individual order, for example, is given a dedicated page that can be linked to. In Shopify, we call these types of objects _resources_, and we call the object’s dedicated page its _details page_.
 
 ### Problem
 
@@ -174,37 +177,71 @@ Index tables should:
 
 ---
 
-## IndexTableRow
+## IndexTable.Row
 
-An `IndexTableRow` is used to render a row representing an item within an `IndexTable`
+An `IndexTable.Row` is used to render a row representing an item within an `IndexTable`
 
-### IndexTableRow properties
+### IndexTable.Row properties
 
-| Prop     | Type       | Description                                                      |
-| -------- | ---------- | ---------------------------------------------------------------- |
-| id       | string     | A unique identifier for the row                                  |
-| selected | boolean    | A boolean property indicating whether the row is selected        |
-| position | number     | The index position of the row                                    |
-| subdued  | boolean    | A boolean property indicating whether the row should be subdued  |
-| status   | RowStatus  | A property indicating whether the row should have a status       |
-| disabled | boolean    | A boolean property indicating whether the row should be disabled |
-| onClick  | () => void | A function which overrides the default click behaviour           |
+| Prop                | Type                                         | Description                                                                                                                                                                                         |
+| ------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children            | ReactNode                                    | Table header or data cells                                                                                                                                                                          |
+| id                  | string                                       | A unique identifier for the row                                                                                                                                                                     |
+| selected?           | boolean &#124; "indeterminate"               | A boolean property indicating whether the row or it's related rows are selected                                                                                                                     |
+| position            | number                                       | The zero-indexed position of the row. Used for Shift key multi-selection as well as selection of a range of rows when a `selectionRange` is set.                                                    |
+| subdued?            | boolean                                      | Whether the row should be subdued                                                                                                                                                                   |
+| status?             | "success" &#124; "subdued" &#124; "critical" | Whether the row should have a status                                                                                                                                                                |
+| disabled?           | boolean                                      | Whether the row should be disabled                                                                                                                                                                  |
+| selectionRange?     | [number, number]                             | A tuple array with the first and last index of the range of other rows that the row describes. All non-disabled rows in the range are selected when the row with a selection range set is selected. |
+| rowType?            | "data" &#124; "subheader"                    | Indicates the relationship or role of the row's contents. A `rowType` of "subheader" looks and behaves the same as the table header. Defaults to "data".                                            |
+| accessibilityLabel? | string                                       | Label set on the row's checkbox. Defaults to "Select {resourceName}"                                                                                                                                |
+| onClick?            | () => void                                   | Callback fired when the row is clicked. Overrides the default click behaviour.                                                                                                                      |
+| onNavigation?       | (id: string) => void                         | Callback fired when the row is clicked and contains an anchor element with the `data-primary-link` property set                                                                                     |
 
-## IndexTableCell
+## IndexTable.Cell
 
-An `IndexTableCell` is used to render a single cell within an `IndexTableRow`
+An `IndexTable.Cell` is used to render a single cell within an `IndexTable.Row`
 
-### IndexTableCell properties
+### IndexTable.Cell properties
 
-| Prop      | Type    | Description                                                                      |
-| --------- | ------- | -------------------------------------------------------------------------------- |
-| flush     | boolean | A boolean property indicating whether the cell should remove the default padding |
-| className | string  | Adds a class to the cell, used for setting widths of a cell                      |
+| Prop       | Type                                                                              | Description                                                                                                                                                              |
+| ---------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| as?        | 'th' &#124; 'td'                                                                  | The table cell element to render. Render the cell as a `th` if it serves as a subheading. Defaults to `td`.                                                              |
+| id?        | string                                                                            | The unique ID to set on the cell element                                                                                                                                 |
+| children?  | ReactNode                                                                         | The cell contents                                                                                                                                                        |
+| className? | string                                                                            | Adds a class to the cell. Use to set a custom cell width.                                                                                                                |
+| flush?     | boolean                                                                           | Whether the cell padding should be removed. Defaults to false.                                                                                                           |
+| colSpan?   | [HTMLTableCellElement['colSpan']](https://www.w3schools.com/tags/att_colspan.asp) | For subheader cells -- The number of the columns that the cell element should extend to within the row.                                                                  |
+| scope?     | [HTMLTableCellElement['scope']](https://www.w3schools.com/tags/att_scope.asp)     | For subheader cells -- Indicates the cells that the `th` element relates to                                                                                              |
+| headers?   | [HTMLTableCellElement['headers']](https://www.w3schools.com/tags/att_headers.asp) | A space-separated list of the `th` cell IDs that describe or apply to it. Use for cells within a row that relate to a subheader cell in addition to their column header. |
 
 ---
 
 ## Related components
 
-- To create an actionable list of related items that link to details pages, such as a list of customers, use the [resource list component](https://polaris.shopify.com/components/resource-list)
-- To present structured data for comparison and analysis, like when helping merchants to gain insights or review analytics, use the [data table component](https://polaris.shopify.com/components/data-table)
+- To create an actionable list of related items that link to details pages, such as a list of customers, use the [resource list component](https://polaris.shopify.com/components/lists/resource-list)
+- To present structured data for comparison and analysis, like when helping merchants to gain insights or review analytics, use the [data table component](https://polaris.shopify.com/components/tables/data-table)
 - To display a simple list of related content, [use the list component](https://polaris.shopify.com/components/lists/list)
+
+---
+
+## Accessibility
+
+### Structure
+
+The `IndexTable` is an actionable, filterable, and sortable table widget that supports row selection with [subheaders](https://www.w3.org/WAI/tutorials/tables/multi-level/). To ensure that the power of this table is accessible to all merchants when implementing `IndexTable.Row` subheaders, set the following props on `IndexTable.Cell` that are appropriate for the enhancement you are implementing.
+
+Merchants can select a group of rows at once by clicking or <kbd>Space</kbd> keypressing a subheader row's checkbox. To indicate that an `IndexTable.Row` serves as a subheader for 1 or more rows below it, set the:
+
+- Zero-indexed table `position` of the first and last `IndexTable.Row` described by the subheader `IndexTable.Row` as a tuple array on its `subHeaderRange` prop
+- Unique `id` on the `IndexTable.Cell` that contains the subheader content
+- Element tag to `"th"` on the `as` prop of the subheader `IndexTable.Cell`
+- Subheader `IndexTable.Cell` `scope` prop to `"colgroup"`
+
+To associate the subheader `IndexTable.Row` with each `IndexTable.Cell` that it describes, set the:
+
+- Unique `id` provided to the subheader `IndexTable.Cell` on the `headers` prop of each related `IndexTable.Cell` (contained by an `IndexTable.Row` that's position is within the `subHeaderRange`) as well as the unique `id` of its corresponding column heading that you provided to the `IndexTable` `headings` prop
+
+### Keyboard support
+
+`IndexTable` also supports multi-selection of a range of rows by keypressing the <kbd>Shift</kbd> key. To select a range, press and hold the <kbd>Shift</kbd> key while you click or keypress the <kbd>Space</kbd> key on a row checkbox and then do the same on another row's checkbox. All selectable rows between the selected checkboxes will also be selected.
diff --git a/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx b/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx
new file mode 100644
index 00000000000..bc5c3e571d7
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx
@@ -0,0 +1,242 @@
+import {
+  LegacyCard,
+  Text,
+  useIndexResourceState,
+  IndexTable,
+} from '@shopify/polaris';
+import type {IndexTableRowProps, IndexTableProps} from '@shopify/polaris';
+import React, {Fragment} from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+export function WithSubHeadersExample() {
+  interface Customer {
+    id: string;
+    url: string;
+    name: string;
+    location: string;
+    orders: number;
+    amountSpent: string;
+    lastOrderDate: string;
+    disabled?: boolean;
+  }
+
+  interface CustomerRow extends Customer {
+    position: number;
+  }
+
+  interface CustomerGroup {
+    id: string;
+    position: number;
+    customers: CustomerRow[];
+  }
+
+  interface Groups {
+    [key: string]: CustomerGroup;
+  }
+
+  const rows = [
+    {
+      id: '3411',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 11,
+      amountSpent: '$2,400',
+      lastOrderDate: 'May 31, 2023',
+    },
+    {
+      id: '2562',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$975',
+      lastOrderDate: 'May 31, 2023',
+    },
+    {
+      id: '4102',
+      url: '#',
+      name: 'Colm Dillane',
+      location: 'New York, USA',
+      orders: 27,
+      amountSpent: '$2885',
+      lastOrderDate: 'May 31, 2023',
+    },
+    {
+      id: '2564',
+      url: '#',
+      name: 'Al Chemist',
+      location: 'New York, USA',
+      orders: 19,
+      amountSpent: '$1,209',
+      lastOrderDate: 'April 4, 2023',
+      disabled: true,
+    },
+    {
+      id: '2563',
+      url: '#',
+      name: 'Larry June',
+      location: 'San Francisco, USA',
+      orders: 22,
+      amountSpent: '$1,400',
+      lastOrderDate: 'March 19, 2023',
+    },
+  ];
+
+  const columnHeadings = [
+    {title: 'Name', id: 'name'},
+    {title: 'Location', id: 'location'},
+    {
+      alignment: 'end',
+      id: 'order-count',
+      title: 'Order count',
+    },
+    {
+      alignment: 'end',
+      hidden: false,
+      id: 'amount-spent',
+      title: 'Amount spent',
+    },
+  ];
+
+  const groupRowsByLastOrderDate = () => {
+    let position = -1;
+    const groups: Groups = (rows as Customer[]).reduce(
+      (groups: Groups, customer: Customer) => {
+        const {lastOrderDate} = customer;
+        if (!groups[lastOrderDate]) {
+          position += 1;
+
+          groups[lastOrderDate] = {
+            position,
+            customers: [],
+            id: `order-${lastOrderDate.split(' ').join('-')}`,
+          };
+        }
+
+        groups[lastOrderDate].customers.push({
+          ...customer,
+          position: position + 1,
+        });
+
+        position += 1;
+        return groups;
+      },
+      {},
+    );
+
+    return groups;
+  };
+
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(rows, {resourceFilter: ({disabled}) => !disabled});
+
+  const orders = groupRowsByLastOrderDate();
+
+  const rowMarkup = Object.keys(orders).map((orderDate, index) => {
+    const {customers, position, id: subheaderId} = orders[orderDate];
+    let selected: IndexTableRowProps['selected'] = false;
+
+    const someCustomersSelected = customers.some(({id}) =>
+      selectedResources.includes(id),
+    );
+
+    const allCustomersSelected = customers.every(({id}) =>
+      selectedResources.includes(id),
+    );
+
+    if (allCustomersSelected) {
+      selected = true;
+    } else if (someCustomersSelected) {
+      selected = 'indeterminate';
+    }
+
+    const selectableRows = rows.filter(({disabled}) => !disabled);
+    const childRowRange: IndexTableRowProps['selectionRange'] = [
+      selectableRows.findIndex((row) => row.id === customers[0].id),
+      selectableRows.findIndex(
+        (row) => row.id === customers[customers.length - 1].id,
+      ),
+    ];
+
+    return (
+      <Fragment key={subheaderId}>
+        <IndexTable.Row
+          rowType="subheader"
+          selectionRange={childRowRange}
+          id={subheaderId}
+          position={position}
+          selected={selected}
+          disabled={index === 1}
+        >
+          <IndexTable.Cell
+            colSpan={4}
+            scope="colgroup"
+            as="th"
+            id={subheaderId}
+          >
+            {`Last order placed: ${orderDate}`}
+          </IndexTable.Cell>
+        </IndexTable.Row>
+        {customers.map(
+          (
+            {id, name, location, orders, amountSpent, position, disabled},
+            rowIndex,
+          ) => {
+            return (
+              <IndexTable.Row
+                key={rowIndex}
+                id={id}
+                position={position}
+                selected={selectedResources.includes(id)}
+                disabled={disabled}
+              >
+                <IndexTable.Cell
+                  headers={`${columnHeadings[0].id} ${subheaderId}`}
+                >
+                  <Text variant="bodyMd" fontWeight="semibold" as="span">
+                    {name}
+                  </Text>
+                </IndexTable.Cell>
+                <IndexTable.Cell>{location}</IndexTable.Cell>
+                <IndexTable.Cell>
+                  <Text as="span" alignment="end" numeric>
+                    {orders}
+                  </Text>
+                </IndexTable.Cell>
+                <IndexTable.Cell>
+                  <Text as="span" alignment="end" numeric>
+                    {amountSpent}
+                  </Text>
+                </IndexTable.Cell>
+              </IndexTable.Row>
+            );
+          },
+        )}
+      </Fragment>
+    );
+  });
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        onSelectionChange={handleSelectionChange}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        resourceName={resourceName}
+        itemCount={rows.length}
+        headings={columnHeadings as IndexTableProps['headings']}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
+export default withPolarisExample(WithSubHeadersExample);

From 6a2e22f767cd08de3465bd951ac78e94c5babe0f Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloerice@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:41:58 -0400
Subject: [PATCH 089/102] Update lovely-rings-enjoy.md

---
 .changeset/lovely-rings-enjoy.md | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/.changeset/lovely-rings-enjoy.md b/.changeset/lovely-rings-enjoy.md
index dbd8b188c58..9e478924416 100644
--- a/.changeset/lovely-rings-enjoy.md
+++ b/.changeset/lovely-rings-enjoy.md
@@ -3,15 +3,14 @@
 'polaris.shopify.com': patch
 ---
 
-IndexTable subheader support updates:
+Added support for subheaders and selection of a range of `IndexTable.Rows` -- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure
 - `IndexTable.Row`
-  - Added the `header` prop to apply subheader styles
-  - Added `indeterminate` value to `selected` prop
-  - Added `selectionRange` prop to specify which rows in the range are selected when the row is selected
-  - Added `rowType` prop to indicate the relationship or role of the row's contents (`data` or `subheader`)
+  - Added support for setting the `indeterminate` value on the `selected` prop
+  - Added the `selectionRange` prop to specify a range of other consecutive, related rows selected when the row is selected
+  - Added the `rowType` prop to indicate the relationship or role of the row's contents (defaults to `data`, `subheader` renders the row to look and behave like the table header row)
+Added support for setting accessibility attributes on `IndexTable.Cell`
 - `IndexTable.Cell`
-  - Added the `header` prop to apply subheader styles
-  - Added `as` prop to set as a `th` if it is serving as a subheading
-  - Added `colSpan` prop to specify the number of the columns that the cell element should extend
-  - Added `scope` prop to indicate which cells the `th` element relates
-- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure.
+  - Added the `as` prop to support rendering the cell as a `th` element if it is serving as a subheading cell
+  - Added support for the `headers` attribute to manually associate all headers when the cell is described by more than its column heading
+  - Added support for the `colSpan` attribute to specify the number of the columns that the cell element should extend to
+  - Added support for the `scope` attribute to indicate whether the `th` is a header for a column, row, or group of columns or rows

From 01ae5388196c16b2d8d8e07895fcd81288f23cc6 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloerice@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:45:10 -0400
Subject: [PATCH 090/102] Update lovely-rings-enjoy.md

---
 .changeset/lovely-rings-enjoy.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.changeset/lovely-rings-enjoy.md b/.changeset/lovely-rings-enjoy.md
index 9e478924416..c0eb42f477b 100644
--- a/.changeset/lovely-rings-enjoy.md
+++ b/.changeset/lovely-rings-enjoy.md
@@ -1,6 +1,5 @@
 ---
 '@shopify/polaris': minor
-'polaris.shopify.com': patch
 ---
 
 Added support for subheaders and selection of a range of `IndexTable.Rows` -- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure

From 05c13799f74c700ce2dddfb01d049f0d400b74e1 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess.telford@shopify.com>
Date: Wed, 16 Aug 2023 11:43:15 +1000
Subject: [PATCH 091/102] [Docs] Clarify why Grid#areas is deprecated

---
 polaris-react/src/components/Grid/Grid.tsx                    | 4 +++-
 polaris-react/src/components/Grid/components/Cell/Cell.tsx    | 4 +++-
 .../src/components/StatusBadge/StatusBadge.module.scss        | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/polaris-react/src/components/Grid/Grid.tsx b/polaris-react/src/components/Grid/Grid.tsx
index ff3b6db103b..7d7f5c7f492 100644
--- a/polaris-react/src/components/Grid/Grid.tsx
+++ b/polaris-react/src/components/Grid/Grid.tsx
@@ -20,7 +20,9 @@ type Gap = {
 export interface GridProps {
   /**
    * Set grid-template-areas
-   * @deprecated Use nested layout components instead
+   * @deprecated To avoid a11y issues, nest layout components in individual grid
+   * cells instead. See:
+   * https://polaris.shopify.com/components/layout-and-structure
    */
   areas?: Areas;
   /* Number of columns */
diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.tsx b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
index ede3dd5d8a0..802c9c48b89 100644
--- a/polaris-react/src/components/Grid/components/Cell/Cell.tsx
+++ b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
@@ -26,7 +26,9 @@ interface Columns {
 export interface CellProps {
   /**
    * Set grid-template-areas
-   * @deprecated Use nested layout components instead
+   * @deprecated To avoid a11y issues, nest layout components in individual grid
+   * cells instead. See:
+   * https://polaris.shopify.com/components/layout-and-structure
    */
   area?: string;
   column?: Cell;
diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
index 10072d3ad7c..4d2ec90d825 100644
--- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
+++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
@@ -5,6 +5,7 @@
   border-radius: var(--border-radius-round);
   padding: 0.05rem 0.25rem;
   color: var(--text);
+  white-space: nowrap;
 
   &[data-value='alpha'] {
     background: var(--surface-attention);

From 863f15ff2e2a8dec499b630b9fd0b9e45409b18b Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Thu, 21 Sep 2023 10:24:40 +0100
Subject: [PATCH 092/102] [IndexFilters] Use context provider for IndexFilters
 mode state (#10490)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Linked to https://github.com/Shopify/web/issues/96682

We want to perform actions in other components whenever we enter the
non-default mode of the IndexFilters. This currently is limited to
disabling the actions in the `Page` component, but could be extended in
the future.

### WHAT is this pull request doing?

Adding a new context manager, `IndexFiltersManager`, which allows both
the IndexFilters component to use the `mode`, but also allows other
components, within Polaris and also within consumers of Polaris, to
react to the changes of the `mode`.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

- Spinstance:
https://admin.web.if-disable-buttons.marc-thomas.eu.spin.dev/store/shop1/orders?inContextTimeframe=none
- Storybook:
https://5d559397bae39100201eedc1-objwwxomnz.chromatic.com/?path=/story/all-components-indexfilters--wrapped-in-a-page

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/lucky-wombats-push.md              |   5 +
 .../components/AppProvider/AppProvider.tsx    |   3 +-
 .../IndexFilters/IndexFilters.stories.tsx     | 414 ++++++------------
 .../components/IndexFilters/IndexFilters.tsx  |   2 +-
 .../components/IndexFilters/hooks/index.ts    |   1 -
 .../useIsSticky/tests/useIsSticky.test.tsx    |   2 +-
 .../hooks/useIsSticky/useIsSticky.ts          |   2 +-
 .../hooks/useSetIndexFiltersMode/index.ts     |   1 -
 .../useSetIndexFiltersMode.tsx                |  11 -
 .../IndexFilters/tests/IndexFilters.test.tsx  |   3 +-
 .../src/components/IndexFilters/types.ts      |   6 -
 .../Page/components/Header/Header.tsx         |  30 +-
 .../components/Header/tests/Header.test.tsx   |  60 +++
 .../PolarisTestProvider.tsx                   |  21 +-
 polaris-react/src/components/index.ts         |   1 -
 polaris-react/src/index.ts                    |  11 +-
 .../index-filters/IndexFiltersManager.tsx     |  29 ++
 .../src/utilities/index-filters/context.tsx   |  12 +
 .../src/utilities/index-filters/hooks.ts      |  30 ++
 .../src/utilities/index-filters/index.ts      |   4 +
 .../tests/IndexFiltersManager.test.tsx        |  75 ++++
 .../index-filters/tests/hooks.test.tsx        |  48 ++
 .../src/utilities/index-filters/types.ts      |   5 +
 23 files changed, 452 insertions(+), 324 deletions(-)
 create mode 100644 .changeset/lucky-wombats-push.md
 delete mode 100644 polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/index.ts
 delete mode 100644 polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/useSetIndexFiltersMode.tsx
 delete mode 100644 polaris-react/src/components/index.ts
 create mode 100644 polaris-react/src/utilities/index-filters/IndexFiltersManager.tsx
 create mode 100644 polaris-react/src/utilities/index-filters/context.tsx
 create mode 100644 polaris-react/src/utilities/index-filters/hooks.ts
 create mode 100644 polaris-react/src/utilities/index-filters/index.ts
 create mode 100644 polaris-react/src/utilities/index-filters/tests/IndexFiltersManager.test.tsx
 create mode 100644 polaris-react/src/utilities/index-filters/tests/hooks.test.tsx
 create mode 100644 polaris-react/src/utilities/index-filters/types.ts

diff --git a/.changeset/lucky-wombats-push.md b/.changeset/lucky-wombats-push.md
new file mode 100644
index 00000000000..ca2b7fddbce
--- /dev/null
+++ b/.changeset/lucky-wombats-push.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add new `IndexFiltersManager` for allowing disabling of Page Header actions when in Filtering or EditingColumns mode
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
index 17a3d3d142b..bc5a13ff884 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.tsx
+++ b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -12,6 +12,7 @@ import {
   ScrollLockManager,
   ScrollLockManagerContext,
 } from '../../utilities/scroll-lock-manager';
+import {IndexFiltersManager} from '../../utilities/index-filters';
 import {
   StickyManager,
   StickyManagerContext,
@@ -179,7 +180,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
                     <PortalsManager>
                       <FocusManager>
                         <EphemeralPresenceManager>
-                          {children}
+                          <IndexFiltersManager>{children}</IndexFiltersManager>
                         </EphemeralPresenceManager>
                       </FocusManager>
                     </PortalsManager>
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
index cd49d87b73f..f30b136577e 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
@@ -10,10 +10,18 @@ import {
   RangeSlider,
   TextField,
   Card,
+  Page,
+  Badge,
+  Button,
+  useSetIndexFiltersMode,
   IndexFiltersMode,
 } from '@shopify/polaris';
+import {
+  ViewMinor,
+  DeleteMinor,
+  MobileVerticalDotsMajor,
+} from '@shopify/polaris-icons';
 
-import {useSetIndexFiltersMode} from './hooks';
 import type {IndexFiltersProps} from './IndexFilters';
 
 export default {
@@ -95,7 +103,11 @@ function Table() {
   );
 }
 
-function BasicExample(props?: Partial<IndexFiltersProps>) {
+function BasicExample(
+  props?: Partial<IndexFiltersProps> & {
+    withFilteringByDefault?: boolean;
+  },
+) {
   const sleep = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));
   const [itemStrings, setItemStrings] = useState([
@@ -184,7 +196,9 @@ function BasicExample(props?: Partial<IndexFiltersProps>) {
     {label: 'Total', value: 'total desc', directionLabel: 'Descending'},
   ];
   const [sortSelected, setSortSelected] = useState(['order asc']);
-  const {mode, setMode} = useSetIndexFiltersMode();
+  const {mode, setMode} = useSetIndexFiltersMode(
+    props?.withFilteringByDefault ? IndexFiltersMode.Filtering : undefined,
+  );
   const onHandleCancel = () => {};
 
   const onHandleSave = async () => {
@@ -385,6 +399,10 @@ export function Default() {
   return <BasicExample />;
 }
 
+export function WithFilteringByDefault() {
+  return <BasicExample withFilteringByDefault />;
+}
+
 export function WithoutKeyboardShortcuts() {
   return <BasicExample disableKeyboardShortcuts />;
 }
@@ -675,292 +693,6 @@ export function WithPinnedFilters() {
   }
 }
 
-export function WithNoPinnedAndPrefilledFilters() {
-  const sleep = (ms: number) =>
-    new Promise((resolve) => setTimeout(resolve, ms));
-  const [itemStrings, setItemStrings] = useState([
-    'All',
-    'Unpaid',
-    'Open',
-    'Closed',
-    'Local delivery',
-    'Local pickup',
-  ]);
-  const deleteView = (index: number) => {
-    const newItemStrings = [...itemStrings];
-    newItemStrings.splice(index, 1);
-    setItemStrings(newItemStrings);
-    setSelected(0);
-  };
-
-  const duplicateView = async (name: string) => {
-    setItemStrings([...itemStrings, name]);
-    setSelected(itemStrings.length);
-    await sleep(1);
-    return true;
-  };
-
-  const tabs: TabProps[] = itemStrings.map((item, index) => ({
-    content: item,
-    index,
-    onAction: () => {},
-    id: `${item}-${index}`,
-    isLocked: index === 0,
-    actions:
-      index === 0
-        ? []
-        : [
-            {
-              type: 'rename',
-              onAction: () => {},
-              onPrimaryAction: async (value: string) => {
-                const newItemsStrings = tabs.map((item, idx) => {
-                  if (idx === index) {
-                    return value;
-                  }
-                  return item.content;
-                });
-                await sleep(1);
-                setItemStrings(newItemsStrings);
-                return true;
-              },
-            },
-            {
-              type: 'duplicate',
-              onPrimaryAction: async (name) => {
-                await sleep(1);
-                duplicateView(name);
-                return true;
-              },
-            },
-            {
-              type: 'edit',
-            },
-            {
-              type: 'delete',
-              onPrimaryAction: async (id: string) => {
-                await sleep(1);
-                deleteView(index);
-                return true;
-              },
-            },
-          ],
-  }));
-  const [selected, setSelected] = useState(0);
-  const onCreateNewView = async (value: string) => {
-    await sleep(500);
-    setItemStrings([...itemStrings, value]);
-    setSelected(itemStrings.length);
-    return true;
-  };
-  const sortOptions: IndexFiltersProps['sortOptions'] = [
-    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
-    {label: 'Order', value: 'order desc', directionLabel: 'Descending'},
-    {label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'},
-    {label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'},
-    {label: 'Date', value: 'date asc', directionLabel: 'A-Z'},
-    {label: 'Date', value: 'date desc', directionLabel: 'Z-A'},
-    {label: 'Total', value: 'total asc', directionLabel: 'Ascending'},
-    {label: 'Total', value: 'total desc', directionLabel: 'Descending'},
-  ];
-  const [sortSelected, setSortSelected] = useState(['order asc']);
-  const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Filtering);
-  const onHandleCancel = () => {};
-
-  const onHandleSave = async () => {
-    await sleep(1);
-    return true;
-  };
-
-  const primaryAction: IndexFiltersProps['primaryAction'] =
-    selected === 0
-      ? {
-          type: 'save-as',
-          onAction: onCreateNewView,
-          disabled: false,
-          loading: false,
-        }
-      : {
-          type: 'save',
-          onAction: onHandleSave,
-          disabled: false,
-          loading: false,
-        };
-  const [accountStatus, setAccountStatus] = useState<string[] | null>([
-    'enabled',
-  ]);
-  const [moneySpent, setMoneySpent] = useState(null);
-  const [taggedWith, setTaggedWith] = useState('Returning customer');
-  const [queryValue, setQueryValue] = useState('');
-
-  const handleAccountStatusChange = useCallback(
-    (value) => setAccountStatus(value),
-    [],
-  );
-  const handleMoneySpentChange = useCallback(
-    (value) => setMoneySpent(value),
-    [],
-  );
-  const handleTaggedWithChange = useCallback(
-    (value) => setTaggedWith(value),
-    [],
-  );
-  const handleFiltersQueryChange = useCallback(
-    (value) => setQueryValue(value),
-    [],
-  );
-  const handleAccountStatusRemove = useCallback(
-    () => setAccountStatus(null),
-    [],
-  );
-  const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
-  const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
-  const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
-  const handleFiltersClearAll = useCallback(() => {
-    handleAccountStatusRemove();
-    handleMoneySpentRemove();
-    handleTaggedWithRemove();
-    handleQueryValueRemove();
-  }, [
-    handleAccountStatusRemove,
-    handleMoneySpentRemove,
-    handleQueryValueRemove,
-    handleTaggedWithRemove,
-  ]);
-
-  const filters = [
-    {
-      key: 'accountStatus',
-      label: 'Account status',
-      filter: (
-        <ChoiceList
-          title="Account status"
-          titleHidden
-          choices={[
-            {label: 'Enabled', value: 'enabled'},
-            {label: 'Not invited', value: 'not invited'},
-            {label: 'Invited', value: 'invited'},
-            {label: 'Declined', value: 'declined'},
-          ]}
-          selected={accountStatus || []}
-          onChange={handleAccountStatusChange}
-          allowMultiple
-        />
-      ),
-      pinned: false,
-    },
-    {
-      key: 'taggedWith',
-      label: 'Tagged with',
-      filter: (
-        <TextField
-          label="Tagged with"
-          value={taggedWith}
-          onChange={handleTaggedWithChange}
-          autoComplete="off"
-          labelHidden
-        />
-      ),
-      pinned: false,
-    },
-    {
-      key: 'moneySpent',
-      label: 'Money spent',
-      filter: (
-        <RangeSlider
-          label="Money spent is between"
-          labelHidden
-          value={moneySpent || [0, 500]}
-          prefix="$"
-          output
-          min={0}
-          max={2000}
-          step={1}
-          onChange={handleMoneySpentChange}
-        />
-      ),
-    },
-  ];
-
-  const appliedFilters: IndexFiltersProps['appliedFilters'] = [];
-  if (!isEmpty(accountStatus)) {
-    const key = 'accountStatus';
-    appliedFilters.push({
-      key,
-      label: disambiguateLabel(key, accountStatus),
-      onRemove: handleAccountStatusRemove,
-    });
-  }
-  if (!isEmpty(moneySpent)) {
-    const key = 'moneySpent';
-    appliedFilters.push({
-      key,
-      label: disambiguateLabel(key, moneySpent),
-      onRemove: handleMoneySpentRemove,
-    });
-  }
-  if (!isEmpty(taggedWith)) {
-    const key = 'taggedWith';
-    appliedFilters.push({
-      key,
-      label: disambiguateLabel(key, taggedWith),
-      onRemove: handleTaggedWithRemove,
-    });
-  }
-
-  return (
-    <Card padding="0">
-      <IndexFilters
-        sortOptions={sortOptions}
-        sortSelected={sortSelected}
-        queryValue={queryValue}
-        queryPlaceholder="Searching in all"
-        onQueryChange={handleFiltersQueryChange}
-        onQueryClear={() => {}}
-        onSort={setSortSelected}
-        primaryAction={primaryAction}
-        cancelAction={{
-          onAction: onHandleCancel,
-          disabled: false,
-          loading: false,
-        }}
-        tabs={tabs}
-        selected={selected}
-        onSelect={setSelected}
-        canCreateNewView
-        onCreateNewView={onCreateNewView}
-        filters={filters}
-        appliedFilters={appliedFilters}
-        onClearAll={handleFiltersClearAll}
-        mode={mode}
-        setMode={setMode}
-      />
-      <Table />
-    </Card>
-  );
-
-  function disambiguateLabel(key, value) {
-    switch (key) {
-      case 'moneySpent':
-        return `Money spent is between $${value[0]} and $${value[1]}`;
-      case 'taggedWith':
-        return `Tagged with ${value}`;
-      case 'accountStatus':
-        return value.map((val) => `Customer ${val}`).join(', ');
-      default:
-        return value;
-    }
-  }
-
-  function isEmpty(value) {
-    if (Array.isArray(value)) {
-      return value.length === 0;
-    } else {
-      return value === '' || value == null;
-    }
-  }
-}
-
 export function Disabled() {
   const sleep = (ms: number) =>
     new Promise((resolve) => setTimeout(resolve, ms));
@@ -1390,3 +1122,107 @@ export function WithQueryFieldAndFiltersHidden() {
     </Card>
   );
 }
+
+export function WrappedInAPage() {
+  return (
+    <Page
+      backAction={{content: 'Products', url: '#'}}
+      title="3/4 inch Leather pet collar"
+      titleMetadata={<Badge status="success">Paid</Badge>}
+      subtitle="Perfect for any pet"
+      compactTitle
+      primaryAction={{content: 'Save'}}
+      secondaryActions={[
+        {
+          content: 'Delete',
+          destructive: true,
+          icon: DeleteMinor,
+          accessibilityLabel: 'Delete action label',
+          onAction: () => console.log('Delete action'),
+        },
+        {
+          content: 'View on your store',
+          icon: ViewMinor,
+          onAction: () => console.log('View on your store action'),
+        },
+      ]}
+      actionGroups={[
+        {
+          title: 'Promote',
+          icon: MobileVerticalDotsMajor,
+          actions: [
+            {
+              content: 'Share on Facebook',
+              accessibilityLabel: 'Individual action label',
+              onAction: () => console.log('Share on Facebook action'),
+            },
+          ],
+        },
+      ]}
+      pagination={{
+        hasPrevious: true,
+        hasNext: true,
+      }}
+    >
+      <BasicExample />
+    </Page>
+  );
+}
+
+export function WrappedInAPageWithCustomActions() {
+  const {mode} = useSetIndexFiltersMode();
+  const shouldDisableAction = mode !== IndexFiltersMode.Default;
+  return (
+    <Page
+      backAction={{content: 'Products', url: '#'}}
+      title="3/4 inch Leather pet collar"
+      titleMetadata={<Badge status="success">Paid</Badge>}
+      subtitle="Perfect for any pet"
+      compactTitle
+      primaryAction={
+        <Button
+          primary
+          disabled={shouldDisableAction}
+          connectedDisclosure={{
+            disabled: shouldDisableAction,
+            accessibilityLabel: 'Other save actions',
+            actions: [{content: 'Save as new'}],
+          }}
+        >
+          Save
+        </Button>
+      }
+      secondaryActions={
+        <Button
+          disabled={shouldDisableAction}
+          connectedDisclosure={{
+            disabled: shouldDisableAction,
+            accessibilityLabel: 'Other save actions',
+            actions: [{content: 'Rename'}],
+          }}
+        >
+          Update
+        </Button>
+      }
+      actionGroups={[
+        {
+          title: 'Promote',
+          icon: MobileVerticalDotsMajor,
+          actions: [
+            {
+              content: 'Share on Facebook',
+              accessibilityLabel: 'Individual action label',
+              onAction: () => console.log('Share on Facebook action'),
+            },
+          ],
+        },
+      ]}
+      pagination={{
+        hasPrevious: true,
+        hasNext: true,
+      }}
+    >
+      <BasicExample />
+    </Page>
+  );
+}
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
index b91ab5d2008..557a4e0aa84 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
@@ -14,6 +14,7 @@ import {Tabs} from '../Tabs';
 import type {TabsProps} from '../Tabs';
 import {useBreakpoints} from '../../utilities/breakpoints';
 import {useFeatures} from '../../utilities/features';
+import {IndexFiltersMode} from '../../utilities/index-filters';
 
 import {useIsSticky} from './hooks';
 import {
@@ -27,7 +28,6 @@ import type {
   IndexFiltersCancelAction,
   SortButtonChoice,
 } from './types';
-import {IndexFiltersMode} from './types';
 import styles from './IndexFilters.scss';
 
 const DEFAULT_IGNORED_TAGS = ['INPUT', 'SELECT', 'TEXTAREA'];
diff --git a/polaris-react/src/components/IndexFilters/hooks/index.ts b/polaris-react/src/components/IndexFilters/hooks/index.ts
index 5273cb5d3a9..d2acec233ff 100644
--- a/polaris-react/src/components/IndexFilters/hooks/index.ts
+++ b/polaris-react/src/components/IndexFilters/hooks/index.ts
@@ -1,2 +1 @@
-export * from './useSetIndexFiltersMode';
 export * from './useIsSticky';
diff --git a/polaris-react/src/components/IndexFilters/hooks/useIsSticky/tests/useIsSticky.test.tsx b/polaris-react/src/components/IndexFilters/hooks/useIsSticky/tests/useIsSticky.test.tsx
index 3903f388d49..b1d2211b70e 100644
--- a/polaris-react/src/components/IndexFilters/hooks/useIsSticky/tests/useIsSticky.test.tsx
+++ b/polaris-react/src/components/IndexFilters/hooks/useIsSticky/tests/useIsSticky.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {intersectionObserver} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
-import {IndexFiltersMode} from '../../../types';
+import {IndexFiltersMode} from '../../../../../utilities/index-filters';
 import {useIsSticky} from '..';
 
 interface Props {
diff --git a/polaris-react/src/components/IndexFilters/hooks/useIsSticky/useIsSticky.ts b/polaris-react/src/components/IndexFilters/hooks/useIsSticky/useIsSticky.ts
index 22fc3165db1..8e07d4c3ab0 100644
--- a/polaris-react/src/components/IndexFilters/hooks/useIsSticky/useIsSticky.ts
+++ b/polaris-react/src/components/IndexFilters/hooks/useIsSticky/useIsSticky.ts
@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from 'react';
 import type {RefObject} from 'react';
 
 import {debounce} from '../../../../utilities/debounce';
-import type {IndexFiltersMode} from '../../types';
+import type {IndexFiltersMode} from '../../../../utilities/index-filters';
 
 const DEBOUNCE_PERIOD = 250;
 
diff --git a/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/index.ts b/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/index.ts
deleted file mode 100644
index a6211e533f6..00000000000
--- a/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useSetIndexFiltersMode';
diff --git a/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/useSetIndexFiltersMode.tsx b/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/useSetIndexFiltersMode.tsx
deleted file mode 100644
index d3aaf23ec1b..00000000000
--- a/polaris-react/src/components/IndexFilters/hooks/useSetIndexFiltersMode/useSetIndexFiltersMode.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {useState} from 'react';
-
-import {IndexFiltersMode} from '../../types';
-
-export function useSetIndexFiltersMode(
-  defaultMode: IndexFiltersMode = IndexFiltersMode.Default,
-) {
-  const [mode, setMode] = useState<IndexFiltersMode>(defaultMode);
-
-  return {mode, setMode};
-}
diff --git a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx b/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
index db9a05c422b..1eb9e2b6373 100644
--- a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
+++ b/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
@@ -5,7 +5,8 @@ import {matchMedia} from '@shopify/jest-dom-mocks';
 
 import {Tabs} from '../../Tabs';
 import {Filters} from '../../Filters';
-import {IndexFilters, IndexFiltersMode} from '..';
+import {IndexFilters} from '..';
+import {IndexFiltersMode} from '../../../utilities/index-filters';
 import type {IndexFiltersProps} from '../IndexFilters';
 import {SearchFilterButton, SortButton, UpdateButtons} from '../components';
 
diff --git a/polaris-react/src/components/IndexFilters/types.ts b/polaris-react/src/components/IndexFilters/types.ts
index 7ef04c71daa..d1cd35e299b 100644
--- a/polaris-react/src/components/IndexFilters/types.ts
+++ b/polaris-react/src/components/IndexFilters/types.ts
@@ -19,9 +19,3 @@ export interface IndexFiltersCancelAction {
   disabled?: boolean;
   loading?: boolean;
 }
-
-export enum IndexFiltersMode {
-  Default = 'DEFAULT',
-  Filtering = 'FILTERING',
-  EditingColumns = 'EDITING_COLUMNS',
-}
diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx
index ffba84660e0..8fbf00182a5 100644
--- a/polaris-react/src/components/Page/components/Header/Header.tsx
+++ b/polaris-react/src/components/Page/components/Header/Header.tsx
@@ -26,6 +26,10 @@ import type {PaginationProps} from '../../../Pagination';
 import {ActionMenu, hasGroupsWithActions} from '../../../ActionMenu';
 import {isInterface} from '../../../../utilities/is-interface';
 import {isReactElement} from '../../../../utilities/is-react-element';
+import {
+  IndexFiltersMode,
+  useSetIndexFiltersMode,
+} from '../../../../utilities/index-filters';
 import {Box} from '../../../Box';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {useFeatures} from '../../../../utilities/features';
@@ -93,6 +97,8 @@ export function Header({
   const i18n = useI18n();
   const {polarisSummerEditions2023} = useFeatures();
   const {isNavigationCollapsed} = useMediaQuery();
+  const {mode} = useSetIndexFiltersMode();
+  const disableActions = mode !== IndexFiltersMode.Default;
 
   if (additionalNavigation && process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
@@ -124,7 +130,11 @@ export function Header({
     pagination && !isNavigationCollapsed ? (
       <div className={styles.PaginationWrapper}>
         <Box printHidden>
-          <Pagination {...pagination} />
+          <Pagination
+            {...pagination}
+            hasPrevious={disableActions ? false : pagination.hasPrevious}
+            hasNext={disableActions ? false : pagination.hasNext}
+          />
         </Box>
       </div>
     ) : null;
@@ -147,7 +157,10 @@ export function Header({
   );
 
   const primaryActionMarkup = primaryAction ? (
-    <PrimaryActionMarkup primaryAction={primaryAction} />
+    <PrimaryActionMarkup
+      primaryAction={primaryAction}
+      disabled={disableActions}
+    />
   ) : null;
 
   let actionMenuMarkup: MaybeJSX = null;
@@ -157,8 +170,14 @@ export function Header({
   ) {
     actionMenuMarkup = (
       <ActionMenu
-        actions={secondaryActions}
-        groups={actionGroups}
+        actions={secondaryActions.map((secondaryAction) => ({
+          ...secondaryAction,
+          disabled: disableActions || secondaryAction.disabled,
+        }))}
+        groups={actionGroups.map((actionGroup) => ({
+          ...actionGroup,
+          disabled: disableActions || actionGroup.disabled,
+        }))}
         rollup={isNavigationCollapsed}
         rollupActionsLabel={
           title
@@ -271,8 +290,10 @@ export function Header({
 
 function PrimaryActionMarkup({
   primaryAction,
+  disabled,
 }: {
   primaryAction: PrimaryAction | React.ReactNode;
+  disabled: boolean;
 }) {
   const {isNavigationCollapsed} = useMediaQuery();
 
@@ -284,6 +305,7 @@ function PrimaryActionMarkup({
       shouldShowIconOnly(isNavigationCollapsed, primaryAction),
       {
         primary,
+        disabled: disabled || primaryAction.disabled,
       },
     );
 
diff --git a/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx
index 6eba736a8c1..b69084d7ae7 100644
--- a/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx
+++ b/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx
@@ -12,6 +12,7 @@ import {Tooltip} from '../../../../Tooltip';
 import type {LinkAction, MenuActionDescriptor} from '../../../../../types';
 import {Header} from '../Header';
 import type {HeaderProps} from '../Header';
+import {IndexFiltersMode} from '../../../../../utilities/index-filters';
 
 describe('<Header />', () => {
   const mockProps: HeaderProps = {
@@ -115,6 +116,26 @@ describe('<Header />', () => {
       });
     });
 
+    it('renders a disabled button when a non-default IndexFiltersMode is set', () => {
+      const primaryAction: HeaderProps['primaryAction'] = {
+        content: buttonContent,
+      };
+
+      const header = mountWithApp(
+        <Header {...mockProps} primaryAction={primaryAction} />,
+        {
+          indexFilters: {
+            mode: IndexFiltersMode.Filtering,
+          },
+        },
+      );
+
+      expect(header).toContainReactComponent(Button, {
+        disabled: true,
+        children: buttonContent,
+      });
+    });
+
     it('renders a `ReactNode`', () => {
       const PrimaryAction = () => null;
 
@@ -153,6 +174,27 @@ describe('<Header />', () => {
         hasNext: true,
       });
     });
+
+    it('adds false values for hasNext and hasPrevious when a non-default IndexFiltersMode is set', () => {
+      const pagination = {
+        hasNext: true,
+        hasPrevious: true,
+      };
+
+      const header = mountWithApp(
+        <Header {...mockProps} pagination={pagination} />,
+        {
+          indexFilters: {
+            mode: IndexFiltersMode.Filtering,
+          },
+        },
+      );
+
+      expect(header).toContainReactComponent(Pagination, {
+        hasNext: false,
+        hasPrevious: false,
+      });
+    });
   });
 
   describe('actionGroups', () => {
@@ -180,6 +222,24 @@ describe('<Header />', () => {
         groups: mockActionGroups,
       });
     });
+
+    it('disables actions within the actionGroups when a non-default IndexFiltersMode is set', () => {
+      const wrapper = mountWithApp(
+        <Header {...mockProps} actionGroups={mockActionGroups} />,
+        {
+          indexFilters: {
+            mode: IndexFiltersMode.Filtering,
+          },
+        },
+      );
+
+      expect(wrapper).toContainReactComponent(ActionMenu, {
+        groups: mockActionGroups.map((actionGroup) => ({
+          ...actionGroup,
+          disabled: true,
+        })),
+      });
+    });
   });
 
   describe('additionalNavigation', () => {
diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
index 3078d25240b..2e2f8c121a9 100644
--- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -19,6 +19,11 @@ import type {LinkLikeComponent} from '../../utilities/link';
 import {FeaturesContext} from '../../utilities/features';
 import type {FeaturesConfig} from '../../utilities/features';
 import {EphemeralPresenceManager} from '../EphemeralPresenceManager';
+import {
+  IndexFiltersMode,
+  IndexFiltersModeContext,
+} from '../../utilities/index-filters';
+import type {IndexFiltersModeContextType} from '../../utilities/index-filters';
 
 type FrameContextType = NonNullable<React.ContextType<typeof FrameContext>>;
 type MediaQueryContextType = NonNullable<
@@ -38,6 +43,8 @@ export interface WithPolarisTestProviderOptions {
   features?: FeaturesConfig;
   // Contexts provided by Frame
   frame?: Partial<FrameContextType>;
+  // Contexts provided by IndexFilters
+  indexFilters?: Partial<IndexFiltersModeContextType>;
 }
 
 export interface PolarisTestProviderProps
@@ -50,6 +57,11 @@ const defaultMediaQuery: MediaQueryContextType = {
   isNavigationCollapsed: false,
 };
 
+const defaultIndexFilters: IndexFiltersModeContextType = {
+  mode: IndexFiltersMode.Default,
+  setMode: noop,
+};
+
 export function PolarisTestProvider({
   strict,
   children,
@@ -58,6 +70,7 @@ export function PolarisTestProvider({
   mediaQuery,
   features,
   frame,
+  indexFilters,
 }: PolarisTestProviderProps) {
   const Wrapper = strict ? StrictMode : Fragment;
   const intl = useMemo(() => new I18n(i18n || {}), [i18n]);
@@ -77,6 +90,8 @@ export function PolarisTestProvider({
 
   const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
 
+  const mergedIndexFilters = merge(defaultIndexFilters, indexFilters);
+
   return (
     <Wrapper>
       <FeaturesContext.Provider value={featuresConfig}>
@@ -89,7 +104,11 @@ export function PolarisTestProvider({
                     <FocusManager>
                       <EphemeralPresenceManager>
                         <FrameContext.Provider value={mergedFrame}>
-                          {children}
+                          <IndexFiltersModeContext.Provider
+                            value={mergedIndexFilters}
+                          >
+                            {children}
+                          </IndexFiltersModeContext.Provider>
                         </FrameContext.Provider>
                       </EphemeralPresenceManager>
                     </FocusManager>
diff --git a/polaris-react/src/components/index.ts b/polaris-react/src/components/index.ts
deleted file mode 100644
index 1eb3969feed..00000000000
--- a/polaris-react/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {EphemeralPresenceManager} from './EphemeralPresenceManager';
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index c687178a38a..e705a7e736e 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -188,11 +188,7 @@ export type {IconProps} from './components/Icon';
 export {Image} from './components/Image';
 export type {ImageProps} from './components/Image';
 
-export {
-  IndexFilters,
-  useSetIndexFiltersMode,
-  IndexFiltersMode,
-} from './components/IndexFilters';
+export {IndexFilters} from './components/IndexFilters';
 export type {
   IndexFiltersProps,
   SortButtonChoice,
@@ -428,6 +424,11 @@ export {WithinContentContext as _SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT} from '.
 export {useEventListener} from './utilities/use-event-listener';
 export {useTheme} from './utilities/use-theme';
 export {useIndexResourceState} from './utilities/use-index-resource-state';
+export {
+  useSetIndexFiltersMode,
+  IndexFiltersMode,
+  IndexFiltersManager,
+} from './utilities/index-filters';
 export {
   useRowHovered as useIndexTableRowHovered,
   useRowSelected as useIndexTableRowSelected,
diff --git a/polaris-react/src/utilities/index-filters/IndexFiltersManager.tsx b/polaris-react/src/utilities/index-filters/IndexFiltersManager.tsx
new file mode 100644
index 00000000000..30969ffa9ff
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/IndexFiltersManager.tsx
@@ -0,0 +1,29 @@
+import type {ContextType} from 'react';
+import React, {useMemo, useState} from 'react';
+
+import {IndexFiltersModeContext} from './context';
+import {IndexFiltersMode} from './types';
+
+export interface IndexFiltersManagerProps {
+  children?: React.ReactNode;
+}
+
+type Context = NonNullable<ContextType<typeof IndexFiltersModeContext>>;
+
+export function IndexFiltersManager({children}: IndexFiltersManagerProps) {
+  const [mode, setMode] = useState<Context['mode']>(IndexFiltersMode.Default);
+
+  const value = useMemo(
+    () => ({
+      mode,
+      setMode,
+    }),
+    [mode, setMode],
+  );
+
+  return (
+    <IndexFiltersModeContext.Provider value={value}>
+      {children}
+    </IndexFiltersModeContext.Provider>
+  );
+}
diff --git a/polaris-react/src/utilities/index-filters/context.tsx b/polaris-react/src/utilities/index-filters/context.tsx
new file mode 100644
index 00000000000..84c975c3457
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/context.tsx
@@ -0,0 +1,12 @@
+import {createContext} from 'react';
+
+import type {IndexFiltersMode} from './types';
+
+export interface IndexFiltersModeContextType {
+  mode: IndexFiltersMode;
+  setMode: (mode: IndexFiltersMode) => void;
+}
+
+export const IndexFiltersModeContext = createContext<
+  IndexFiltersModeContextType | undefined
+>(undefined);
diff --git a/polaris-react/src/utilities/index-filters/hooks.ts b/polaris-react/src/utilities/index-filters/hooks.ts
new file mode 100644
index 00000000000..8ad2d5c74be
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/hooks.ts
@@ -0,0 +1,30 @@
+import {useContext, useRef} from 'react';
+
+import {IndexFiltersModeContext} from './context';
+import type {IndexFiltersMode} from './types';
+
+export function useSetIndexFiltersMode(initialValue?: IndexFiltersMode) {
+  const indexFiltersMode = useContext(IndexFiltersModeContext);
+
+  if (!indexFiltersMode) {
+    throw new Error(
+      'No index filters manager was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/app-provider for implementation instructions.',
+    );
+  }
+
+  const {mode, setMode} = indexFiltersMode;
+
+  const hasMounted = useRef(false);
+
+  if (!hasMounted.current) {
+    if (initialValue) {
+      setMode(initialValue);
+    }
+    hasMounted.current = true;
+  }
+
+  return {
+    mode,
+    setMode,
+  };
+}
diff --git a/polaris-react/src/utilities/index-filters/index.ts b/polaris-react/src/utilities/index-filters/index.ts
new file mode 100644
index 00000000000..31b84d9d2b9
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/index.ts
@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './context';
+export * from './types';
+export * from './IndexFiltersManager';
diff --git a/polaris-react/src/utilities/index-filters/tests/IndexFiltersManager.test.tsx b/polaris-react/src/utilities/index-filters/tests/IndexFiltersManager.test.tsx
new file mode 100644
index 00000000000..009d5fe31bc
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/tests/IndexFiltersManager.test.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import {IndexFiltersMode} from '../types';
+import {IndexFiltersManager} from '../IndexFiltersManager';
+import {useSetIndexFiltersMode} from '../hooks';
+
+describe('<IndexFiltersManager />', () => {
+  it('renders children with the context value', () => {
+    const ChildComponent = () => {
+      const {mode, setMode} = useSetIndexFiltersMode();
+      return (
+        <div>
+          <span id="mode">{mode}</span>
+          <button
+            id="default"
+            onClick={() => setMode(IndexFiltersMode.Default)}
+          >
+            Change Mode to Default
+          </button>
+          <button
+            id="filtering"
+            onClick={() => setMode(IndexFiltersMode.Filtering)}
+          >
+            Change Mode to Filtering
+          </button>
+          <button
+            id="editing-columns"
+            onClick={() => setMode(IndexFiltersMode.EditingColumns)}
+          >
+            Change Mode to Editing Columns
+          </button>
+        </div>
+      );
+    };
+
+    const wrapper = mountWithApp(
+      <IndexFiltersManager>
+        <ChildComponent />
+      </IndexFiltersManager>,
+    );
+
+    const modeElement = wrapper.find('span', {
+      id: 'mode',
+    });
+    const defaultButton = wrapper.find('button', {
+      id: 'default',
+    });
+    const filteringButton = wrapper.find('button', {
+      id: 'filtering',
+    });
+    const editingButton = wrapper.find('button', {
+      id: 'editing-columns',
+    });
+    expect(modeElement?.text()).toBe(IndexFiltersMode.Default);
+
+    wrapper.act(() => {
+      filteringButton?.trigger('onClick');
+    });
+
+    expect(modeElement?.text()).toBe(IndexFiltersMode.Filtering);
+
+    wrapper.act(() => {
+      editingButton?.trigger('onClick');
+    });
+
+    expect(modeElement?.text()).toBe(IndexFiltersMode.EditingColumns);
+
+    wrapper.act(() => {
+      defaultButton?.trigger('onClick');
+    });
+
+    expect(modeElement?.text()).toBe(IndexFiltersMode.Default);
+  });
+});
diff --git a/polaris-react/src/utilities/index-filters/tests/hooks.test.tsx b/polaris-react/src/utilities/index-filters/tests/hooks.test.tsx
new file mode 100644
index 00000000000..02508f021ff
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/tests/hooks.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import * as hooks from '../hooks';
+import {IndexFiltersMode} from '../types';
+
+describe('useSetIndexFiltersMode', () => {
+  it('returns mode from the provider', () => {
+    const spy = jest.fn();
+
+    function MockComponent() {
+      const value = hooks.useSetIndexFiltersMode();
+      spy(value);
+      return null;
+    }
+
+    mountWithApp(<MockComponent />, {
+      indexFilters: {
+        mode: IndexFiltersMode.Filtering,
+      },
+    });
+
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        mode: IndexFiltersMode.Filtering,
+      }),
+    );
+  });
+
+  describe('with a mocked value', () => {
+    it('calls setMode with defaultMode inside useEffect', () => {
+      const initialMode = IndexFiltersMode.EditingColumns;
+      const useSetIndexFiltersModeMock = jest.spyOn(
+        hooks,
+        'useSetIndexFiltersMode',
+      );
+
+      function MockComponent() {
+        hooks.useSetIndexFiltersMode(initialMode);
+        return null;
+      }
+      mountWithApp(<MockComponent />);
+
+      expect(useSetIndexFiltersModeMock).toHaveBeenCalledTimes(1);
+      expect(useSetIndexFiltersModeMock).toHaveBeenCalledWith(initialMode);
+    });
+  });
+});
diff --git a/polaris-react/src/utilities/index-filters/types.ts b/polaris-react/src/utilities/index-filters/types.ts
new file mode 100644
index 00000000000..9cde25ffa08
--- /dev/null
+++ b/polaris-react/src/utilities/index-filters/types.ts
@@ -0,0 +1,5 @@
+export enum IndexFiltersMode {
+  Default = 'DEFAULT',
+  Filtering = 'FILTERING',
+  EditingColumns = 'EDITING_COLUMNS',
+}

From 7db26ac55d14f3b02932bb5df736155d250476a5 Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:16:53 -0400
Subject: [PATCH 093/102] Polaris v12 border migration (#10596)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Part of #10519

### WHAT is this pull request doing?

- Migrates the CSS custom properties for `border` token groups
- Migrates the component props for `border`

This the pre-v12 migration step to create a safe CSS custom property
mapping to the new border tokens.

<details>
<summary>RegExp token search</summary>

<pre><code>(?:--p-border-radius-1|--p-border-radius-1_5-experimental|--p-border-radius-2|--p-border-radius-3|--p-border-radius-4|--p-border-radius-5|--p-border-radius-6|--p-border-width-1|--p-border-width-1-experimental|--p-border-width-2|--p-border-width-2-experimental|--p-border-width-4)(?!\d)</code></pre>
</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/dirty-rabbits-sip.md               |  5 ++
 .../src/components/ActionList/ActionList.scss | 14 ++---
 .../components/SearchField/SearchField.scss   | 17 +++---
 .../ActionList/components/Section/Section.tsx |  2 +-
 .../RollupActions/RollupActions.scss          |  8 +--
 .../SecondaryAction/SecondaryAction.scss      |  6 +-
 .../components/AppProvider/AppProvider.scss   |  2 +-
 .../components/MappedAction/MappedAction.scss |  8 +--
 .../src/components/Avatar/Avatar.scss         |  6 +-
 polaris-react/src/components/Badge/Badge.scss | 10 ++--
 .../components/Badge/components/Pip/Pip.scss  |  2 +-
 .../src/components/Banner/Banner.scss         | 22 ++++----
 .../BannerExperimental/BannerExperimental.tsx | 18 +++---
 .../src/components/Bleed/Bleed.stories.tsx    | 16 +++---
 .../src/components/Box/Box.stories.tsx        | 32 +++++------
 .../components/Breadcrumbs/Breadcrumbs.scss   |  8 +--
 .../components/BulkActions/BulkActions.scss   |  6 +-
 .../src/components/Button/Button.scss         | 56 +++++++++----------
 polaris-react/src/components/Card/Card.tsx    |  6 +-
 .../src/components/Card/tests/Card.test.tsx   |  4 +-
 .../CheckableButton/CheckableButton.scss      |  4 +-
 .../src/components/Checkbox/Checkbox.scss     | 13 ++---
 .../components/ColorPicker/ColorPicker.scss   | 14 ++---
 .../ColorPicker/ColorPicker.stories.tsx       |  4 +-
 .../src/components/DataTable/DataTable.scss   | 36 ++++++------
 .../src/components/DatePicker/DatePicker.scss | 24 ++++----
 .../DescriptionList/DescriptionList.scss      |  6 +-
 .../src/components/Divider/Divider.tsx        |  4 +-
 .../components/Divider/tests/Divider.test.tsx |  9 +--
 .../src/components/DropZone/DropZone.scss     | 22 ++++----
 .../components/FileUpload/FileUpload.scss     |  4 +-
 .../src/components/Filters/Filters.scss       | 24 ++++----
 .../components/FilterPill/FilterPill.scss     | 14 ++---
 .../components/SearchField/SearchField.scss   |  9 +--
 polaris-react/src/components/Frame/Frame.scss |  2 +-
 .../src/components/Frame/Frame.stories.tsx    |  2 +-
 .../ContextualSaveBar/ContextualSaveBar.scss  | 12 ++--
 .../Frame/components/Toast/Toast.scss         |  6 +-
 .../FullscreenBar/FullscreenBar.scss          |  2 +-
 .../components/IndexFilters/IndexFilters.scss |  2 +-
 .../components/Container/Container.scss       |  8 +--
 .../components/SortButton/SortButton.tsx      |  2 +-
 .../DirectionButton/DirectionButton.scss      |  4 +-
 .../src/components/IndexTable/IndexTable.scss | 34 +++++------
 .../src/components/InlineCode/InlineCode.scss |  2 +-
 .../components/KeyboardKey/KeyboardKey.scss   |  6 +-
 .../src/components/Layout/Layout.scss         |  4 +-
 .../src/components/LegacyCard/LegacyCard.scss | 34 +++++------
 .../LegacyFilters/LegacyFilters.scss          | 10 ++--
 .../ConnectedFilterControl.scss               | 44 +++++++--------
 .../src/components/LegacyTabs/LegacyTabs.scss |  8 +--
 .../src/components/LegacyTabs/LegacyTabs.tsx  |  2 +-
 polaris-react/src/components/Link/Link.scss   |  8 +--
 .../components/Listbox/Listbox.stories.tsx    |  4 +-
 .../Listbox/components/Option/Option.scss     |  2 +-
 .../Listbox/components/Section/Section.scss   |  2 +-
 .../components/TextOption/TextOption.scss     | 10 ++--
 .../src/components/MediaCard/MediaCard.scss   |  8 +--
 .../MessageIndicator/MessageIndicator.scss    |  2 +-
 .../components/CloseButton/CloseButton.scss   |  2 +-
 .../Modal/components/Dialog/Dialog.scss       |  6 +-
 .../Modal/components/Footer/Footer.tsx        |  2 +-
 .../Modal/components/Header/Header.tsx        |  2 +-
 .../Modal/components/Section/Section.scss     |  2 +-
 .../src/components/Navigation/Navigation.scss | 38 ++++++-------
 .../src/components/Navigation/_variables.scss |  4 +-
 .../src/components/OptionList/OptionList.tsx  |  2 +-
 .../components/Checkbox/Checkbox.scss         |  2 +-
 .../OptionList/components/Option/Option.scss  | 12 ++--
 polaris-react/src/components/Page/Page.scss   |  2 +-
 .../Page/components/Header/Header.scss        |  6 +-
 .../components/PageActions/PageActions.scss   |  2 +-
 .../src/components/Popover/Popover.scss       | 10 ++--
 .../components/Popover/Popover.stories.tsx    |  8 +--
 .../components/ProgressBar/ProgressBar.scss   |  4 +-
 .../components/RadioButton/RadioButton.scss   | 10 ++--
 .../RadioButton/RadioButton.stories.tsx       |  2 +-
 .../components/RangeSlider/RangeSlider.scss   |  2 +-
 .../components/DualThumb/DualThumb.scss       |  4 +-
 .../components/SingleThumb/SingleThumb.scss   | 12 ++--
 .../components/ResourceItem/ResourceItem.scss | 12 ++--
 .../components/ResourceList/ResourceList.scss | 12 ++--
 .../components/ResourceList/_variables.scss   |  2 +-
 .../src/components/Scrollable/Scrollable.scss |  2 +-
 .../src/components/Select/Select.scss         | 14 ++---
 .../ShadowBevel/ShadowBevel.stories.tsx       | 12 ++--
 .../components/ShadowBevel/ShadowBevel.tsx    |  2 +-
 .../ShadowBevel/tests/ShadowBevel.test.tsx    | 23 ++++----
 polaris-react/src/components/Sheet/Sheet.scss |  2 +-
 .../SkeletonBodyText/SkeletonBodyText.scss    |  2 +-
 .../SkeletonDisplayText.scss                  |  2 +-
 .../components/SkeletonPage/SkeletonPage.tsx  |  6 +-
 .../components/SkeletonTabs/SkeletonTabs.scss |  6 +-
 .../SkeletonThumbnail/SkeletonThumbnail.scss  |  4 +-
 polaris-react/src/components/Tabs/Tabs.scss   | 12 ++--
 polaris-react/src/components/Tag/Tag.scss     | 14 ++---
 .../src/components/TextField/TextField.scss   | 26 ++++-----
 .../src/components/Thumbnail/Thumbnail.scss   | 10 ++--
 .../src/components/Tooltip/Tooltip.scss       |  2 +-
 .../components/Tooltip/Tooltip.stories.tsx    |  2 +-
 .../src/components/Tooltip/Tooltip.tsx        |  7 ++-
 .../TooltipOverlay/TooltipOverlay.scss        |  2 +-
 .../components/Tooltip/tests/Tooltip.test.tsx |  8 +--
 .../src/components/TopBar/TopBar.scss         |  8 +--
 .../TopBar/components/Menu/Menu.scss          |  8 +--
 .../Menu/components/Message/Message.scss      |  2 +-
 .../TopBar/components/Search/Search.scss      |  2 +-
 .../components/SearchField/SearchField.scss   | 19 +++----
 .../VideoThumbnail/VideoThumbnail.scss        |  4 +-
 .../src/styles/foundation/_focus-ring.scss    |  6 +-
 polaris-react/src/styles/shared/_buttons.scss | 16 +++---
 .../src/styles/shared/_controls.scss          | 16 +++---
 .../src/styles/shared/_interaction-state.scss |  4 +-
 113 files changed, 534 insertions(+), 524 deletions(-)
 create mode 100644 .changeset/dirty-rabbits-sip.md

diff --git a/.changeset/dirty-rabbits-sip.md b/.changeset/dirty-rabbits-sip.md
new file mode 100644
index 00000000000..2fc8a21127d
--- /dev/null
+++ b/.changeset/dirty-rabbits-sip.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated CSS custom properties and component props with safe mapping to new border design tokens for v12
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index b4023720a2a..0a764b9e0d3 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -26,8 +26,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
-  border-top: var(--p-border-width-1) solid transparent;
+  border-radius: var(--p-border-radius-100);
+  border-top: var(--p-border-width-025) solid transparent;
   color: inherit;
 
   #{$se23} & {
@@ -36,13 +36,13 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
     --pc-action-list-item-min-height: var(--p-space-8);
     padding: var(--p-space-1_5-experimental);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     align-items: center;
     display: flex;
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 
   &:hover {
@@ -80,7 +80,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
       background-color: var(--p-color-bg);
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -186,7 +186,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       top: calc(var(--p-space-3) * -1);
       bottom: 0;
       left: 0;
-      border-left: var(--p-border-width-1) solid var(--p-color-border);
+      border-left: var(--p-border-width-025) solid var(--p-color-border);
       margin-left: calc(var(--p-space-1_5-experimental) * -1);
     }
   }
@@ -207,7 +207,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   height: var(--pc-action-list-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-action-list-image-size);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
index 9fdbc0e82fe..eaab5198fe1 100644
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -20,7 +20,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-025) solid transparent;
   width: 100%;
 }
 // We have both a focused class and a focus pseudo selector here
@@ -54,7 +54,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     #{$se23} & {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -75,7 +75,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     ~ .Backdrop {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -107,9 +107,8 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
     color: var(--p-color-text-inverse-subdued);
     height: $new-input-height-se23;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-2);
+    border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-200);
 
     &:hover {
       border-color: var(--p-color-border-input-hover);
@@ -118,7 +117,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
     &:active,
     &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
+      box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
     }
   }
 
@@ -227,10 +226,10 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-input);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   pointer-events: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 }
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index d05c455f9bd..6df0b9da481 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -148,7 +148,7 @@ export function Section({
       as="li"
       role="presentation"
       borderColor="border-subdued"
-      {...(!isFirst && {borderBlockStartWidth: '1'})}
+      {...(!isFirst && {borderBlockStartWidth: '025'})}
       {...(!section.title && {
         paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
       })}
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
index e6c9de01601..dacc262033f 100644
--- a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
+++ b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -6,17 +6,17 @@
   // stylelint-disable-next-line selector-no-qualifying-type -- generated by polaris-migrator DO NOT COPY
   button[type='button'] {
     margin: 0;
-    border: var(--p-border-width-1) solid var(--p-color-border-strong);
+    border: var(--p-border-width-025) solid var(--p-color-border-strong);
     // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &:hover,
     &:active,
     &:focus {
-      border: var(--p-border-width-1) solid var(--p-color-border-strong);
+      border: var(--p-border-width-025) solid var(--p-color-border-strong);
     }
 
     #{$se23} & {
       background: var(--p-color-bg-strong);
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
       border: none;
       box-shadow: none;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
@@ -27,7 +27,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 button overrides */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
         background: var(--p-color-bg-strong-active);
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 2bbbc803ef0..6c7a6af0f67 100644
--- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -10,7 +10,7 @@
     @include focus-ring($border-width: 1px);
     background: transparent !important;
     box-shadow: none !important;
-    border-radius: var(--p-border-radius-1) !important;
+    border-radius: var(--p-border-radius-100) !important;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding-left: var(--pc-secondary-action-button-spacing);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -61,7 +61,7 @@
       min-height: 28px;
       padding: var(--p-space-1) var(--p-space-3);
       background-color: var(--p-color-bg-strong) !important;
-      border-radius: var(--p-border-radius-2) !important;
+      border-radius: var(--p-border-radius-200) !important;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
         background-color: var(--p-color-bg-strong-hover) !important;
@@ -76,7 +76,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
       }
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
index 092a4835556..46ca5a549c7 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.scss
+++ b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -15,7 +15,7 @@
 #{$se23ShadowBevelOptOut} {
   // stylelint-disable -- Shadow bevel opt out custom properties
   --pc-app-provider-shadow-bevel-content: none;
-  --pc-app-provider-shadow-bevel-border: var(--p-border-width-1) solid
+  --pc-app-provider-shadow-bevel-border: var(--p-border-width-025) solid
     var(--p-color-border);
   // stylelint-enable
 }
diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
index ec5475a6108..4ca547355b7 100644
--- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
+++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -49,10 +49,10 @@
   // stylelint-disable-next-line -- using pre-existing private pc token
   margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
     calc(-1 * var(--p-space-2));
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 overrides
     margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
       calc(-1 * var(--p-space-3));
@@ -63,7 +63,7 @@
     text-decoration: none;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-1) solid windowText;
+      outline: var(--p-border-width-025) solid windowText;
     }
   }
 
@@ -139,7 +139,7 @@
   height: var(--pc-mapped-actions-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-mapped-actions-image-size);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 879774563ff..12b932b2320 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -35,7 +35,7 @@
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 
   &::after {
@@ -59,12 +59,12 @@
   border-radius: var(--p-border-radius-full);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-05);
+    border-radius: var(--p-border-radius-050);
   }
 }
 
 .shapeSquare {
-  border-radius: var(--p-border-radius-05);
+  border-radius: var(--p-border-radius-050);
 
   .Text {
     font-size: var(--p-font-size-200);
diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
index 3aa9d252f76..756bbf639be 100644
--- a/polaris-react/src/components/Badge/Badge.scss
+++ b/polaris-react/src/components/Badge/Badge.scss
@@ -10,14 +10,14 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-5);
+  border-radius: var(--p-border-radius-500);
   color: var(--p-color-text);
 
   #{$se23} & {
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-medium);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -26,7 +26,7 @@
   }
 
   @media print {
-    border: solid var(--p-border-width-1) var(--p-color-border);
+    border: solid var(--p-border-width-025) var(--p-color-border);
   }
 }
 
@@ -192,7 +192,7 @@
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-bold);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -247,7 +247,7 @@
 }
 
 .withinFilter {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 }
 
 .Icon {
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
index 1036c16967d..251e882c188 100644
--- a/polaris-react/src/components/Badge/components/Pip/Pip.scss
+++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -14,7 +14,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-pip-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border: var(--p-border-width-2) solid var(--pc-pip-color);
+  border: var(--p-border-width-050) solid var(--pc-pip-color);
   border-radius: var(--p-border-radius-full);
   flex-shrink: 0;
 
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index 94e46564e4b..bfc1189d26f 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/polaris-react/src/components/Banner/Banner.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 @mixin banner-variants($in-page) {
-  border: var(--p-border-width-1) solid var(--p-color-border-strong);
+  border: var(--p-border-width-025) solid var(--p-color-border-strong);
   background-color: var(--p-color-bg-app);
 
   #{$se23} & {
@@ -11,12 +11,12 @@
 
   @if $in-page {
     border-radius: 0;
-    border-width: var(--p-border-width-1) 0;
+    border-width: var(--p-border-width-025) 0;
 
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: var(--p-shadow-sm),
-        $borderRadius: var(--p-border-radius-0-experimental),
+        $borderRadius: var(--p-border-radius-0),
         // The following arguments explicitly ignore the shadow-bevel opt out
         $border: none,
         $content: ''
@@ -24,13 +24,13 @@
     }
 
     @media #{$p-breakpoints-sm-up} {
-      border-width: var(--p-border-width-1);
-      border-radius: var(--p-border-radius-2);
+      border-width: var(--p-border-width-025);
+      border-radius: var(--p-border-radius-200);
 
       #{$se23} & {
         @include shadow-bevel(
           $boxShadow: var(--p-shadow-sm),
-          $borderRadius: var(--p-border-radius-3),
+          $borderRadius: var(--p-border-radius-300),
           // The following arguments explicitly ignore the shadow-bevel opt out
           $border: none,
           $content: ''
@@ -38,11 +38,11 @@
       }
     }
   } @else {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     #{$se23} & {
       box-shadow: none;
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 
@@ -51,7 +51,7 @@
   }
 
   &.keyFocused {
-    outline: var(--p-border-width-2) solid
+    outline: var(--p-border-width-050) solid
       var(--p-color-border-interactive-focus);
   }
 
@@ -193,7 +193,7 @@
 }
 
 .withinPage {
-  border-radius: 0 0 var(--p-border-radius-1) var(--p-border-radius-1);
+  border-radius: 0 0 var(--p-border-radius-100) var(--p-border-radius-100);
   padding: var(--p-space-5);
 
   #{$se23} & {
@@ -259,7 +259,7 @@
     text-decoration: underline;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-2) dotted;
+      outline: var(--p-border-width-050) dotted;
     }
   }
 
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
index 686ce490b8d..8811879fb33 100644
--- a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
+++ b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
@@ -139,10 +139,10 @@ export function DefaultBanner({
         <Box
           background={backgroundColor}
           color={textColor}
-          borderRadiusStartStart={smUp ? '3' : undefined}
-          borderRadiusStartEnd={smUp ? '3' : undefined}
-          borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
-          borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
+          borderRadiusStartStart={smUp ? '300' : undefined}
+          borderRadiusStartEnd={smUp ? '300' : undefined}
+          borderRadiusEndStart={!hasContent && smUp ? '300' : undefined}
+          borderRadiusEndEnd={!hasContent && smUp ? '300' : undefined}
           padding="3"
         >
           <HorizontalStack
@@ -198,7 +198,7 @@ export function InlineIconBanner({
   useEventListener('resize', handleResize);
 
   return (
-    <Box width="100%" padding="3" borderRadius="3">
+    <Box width="100%" padding="3" borderRadius="300">
       <HorizontalStack
         align="space-between"
         blockAlign={blockAlign}
@@ -208,7 +208,11 @@ export function InlineIconBanner({
           <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
             {bannerIcon ? (
               <div ref={iconNode}>
-                <Box background={backgroundColor} borderRadius="2" padding="1">
+                <Box
+                  background={backgroundColor}
+                  borderRadius="200"
+                  padding="1"
+                >
                   {bannerIcon}
                 </Box>
               </div>
@@ -241,7 +245,7 @@ export function WithinContentContainerBanner({
       width="100%"
       background={backgroundColor}
       padding="2"
-      borderRadius="2"
+      borderRadius="200"
       color={textColor}
     >
       <HorizontalStack
diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx
index c823f32abfc..0aa017d9a96 100644
--- a/polaris-react/src/components/Bleed/Bleed.stories.tsx
+++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx
@@ -39,7 +39,7 @@ export function WithVerticalDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginBlock="6">
         <div style={styles} />
@@ -54,7 +54,7 @@ export function WithHorizontalDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginInline="6">
         <div style={styles} />
@@ -71,7 +71,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="4" marginBlockStart="6">
           <div style={styles} />
@@ -82,7 +82,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="4" marginBlockEnd="6">
           <div style={styles} />
@@ -93,7 +93,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="0" marginInlineStart="6">
           <div style={styles} />
@@ -104,7 +104,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="1"
+        borderWidth="025"
       >
         <Bleed marginInline="0" marginInlineEnd="6">
           <div style={styles} />
@@ -120,7 +120,7 @@ export function WithAllDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginInline="6" marginBlock="6">
         <div style={styles} />
@@ -135,7 +135,7 @@ export function WithResponsiveHorizontalDirection() {
       background="bg"
       padding={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
       borderColor="border-subdued"
-      borderWidth="1"
+      borderWidth="025"
     >
       <Bleed marginInline={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}>
         <div style={styles} />
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 1e45efceed0..6dc75656979 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -18,13 +18,13 @@ export function Default() {
 export function WithBorders() {
   return (
     <VerticalStack gap="4">
-      <Box background="bg" padding="4" borderWidth="1" borderColor="border">
+      <Box background="bg" padding="4" borderWidth="025" borderColor="border">
         <Text as="p">1px solid border</Text>
       </Box>
       <Box
         background="bg"
         padding="4"
-        borderWidth="1"
+        borderWidth="025"
         borderStyle="dashed"
         borderColor="border-subdued"
       >
@@ -33,7 +33,7 @@ export function WithBorders() {
       <Box
         background="bg"
         padding="4"
-        borderWidth="2"
+        borderWidth="050"
         borderColor="border-info"
       >
         <Text as="p">2px solid blue</Text>
@@ -49,7 +49,7 @@ export function WithBorders() {
       <Box
         background="bg"
         padding="4"
-        borderWidth="4"
+        borderWidth="100"
         borderColor="border-caution"
       >
         <Text as="p">4px solid yellow</Text>
@@ -74,7 +74,7 @@ export function WithBorders() {
         background="bg"
         padding="4"
         borderWidth="5"
-        borderBlockStartWidth="1"
+        borderBlockStartWidth="025"
         borderColor="border-critical"
       >
         <Text as="p">border-width: 5px solid red</Text>
@@ -82,7 +82,7 @@ export function WithBorders() {
         <Box
           background="bg"
           padding="4"
-          borderWidth="4"
+          borderWidth="100"
           borderColor="border-caution"
         >
           <Text as="p">border-width: 4px solid yellow</Text>
@@ -107,13 +107,13 @@ export function WithBorders() {
 export function WithOutline() {
   return (
     <VerticalStack gap="4">
-      <Box background="bg" padding="4" outlineWidth="1" outlineColor="border">
+      <Box background="bg" padding="4" outlineWidth="025" outlineColor="border">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
-        outlineWidth="1"
+        outlineWidth="025"
         outlineStyle="dashed"
         outlineColor="border-subdued"
       >
@@ -122,7 +122,7 @@ export function WithOutline() {
       <Box
         background="bg"
         padding="4"
-        outlineWidth="2"
+        outlineWidth="050"
         outlineColor="border-info"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -138,7 +138,7 @@ export function WithOutline() {
       <Box
         background="bg"
         padding="4"
-        outlineWidth="4"
+        outlineWidth="100"
         outlineColor="border-caution"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -157,7 +157,7 @@ export function WithOutline() {
 
 export function WithBorderRadius() {
   return (
-    <Box background="bg" padding="4" borderRadius="2">
+    <Box background="bg" padding="4" borderRadius="200">
       <Icon source={PaintBrushMajor} color="highlight" />
     </Box>
   );
@@ -169,7 +169,7 @@ export function WithResponsivePadding() {
       <Box
         background="bg"
         padding={{xs: '2', sm: '8'}}
-        borderWidth="1"
+        borderWidth="025"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -178,7 +178,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingBlockStart={{xs: '4', sm: '10'}}
-        borderWidth="1"
+        borderWidth="025"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -187,7 +187,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingBlockEnd={{xs: '4', sm: '10'}}
-        borderWidth="1"
+        borderWidth="025"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -196,7 +196,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingInlineStart={{xs: '4', sm: '10'}}
-        borderWidth="1"
+        borderWidth="025"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -204,7 +204,7 @@ export function WithResponsivePadding() {
       <Box
         background="bg"
         paddingInlineEnd={{xs: '4', sm: '10'}}
-        borderWidth="1"
+        borderWidth="025"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
diff --git a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
index 1079796ba5d..aeb0e38ea88 100644
--- a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -15,8 +15,8 @@
   text-decoration: none;
   margin: 0;
   padding: var(--p-space-05);
-  border-radius: var(--p-border-radius-1);
-  border: var(--p-border-width-1) solid var(--p-color-border-strong);
+  border-radius: var(--p-border-radius-100);
+  border: var(--p-border-width-025) solid var(--p-color-border-strong);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
 
@@ -51,7 +51,7 @@
   #{$se23} & {
     border: none;
     background-color: transparent;
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: 0;
     min-height: 28px;
     min-width: 28px;
@@ -68,7 +68,7 @@
     &:focus {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index c9fcc6964b8..d717b825aeb 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -54,7 +54,7 @@ $bulk-actions-button-stacking-order: (
   justify-content: flex-start;
   padding: var(--p-space-4);
   background: var(--p-color-bg);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
   max-width: 100%;
   pointer-events: auto;
@@ -63,7 +63,7 @@ $bulk-actions-button-stacking-order: (
     padding: var(--p-space-3);
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-md),
-      $borderRadius: var(--p-border-radius-3)
+      $borderRadius: var(--p-border-radius-300)
     );
   }
 
@@ -110,7 +110,7 @@ $bulk-actions-button-stacking-order: (
       &:focus-visible:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
       }
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
index ca2adbe6ceb..a2ff9ba3938 100644
--- a/polaris-react/src/components/Button/Button.scss
+++ b/polaris-react/src/components/Button/Button.scss
@@ -679,27 +679,27 @@
 
 .outline {
   background: transparent;
-  border: var(--p-border-width-1) solid var(--p-color-border);
+  border: var(--p-border-width-025) solid var(--p-color-border);
   box-shadow: none;
   color: var(--p-color-text);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
 
   &:hover {
-    border: var(--p-border-width-1) solid var(--p-color-border);
+    border: var(--p-border-width-025) solid var(--p-color-border);
     box-shadow: none;
     background: var(--p-color-bg-hover);
   }
 
   &:focus-visible {
-    border: var(--p-border-width-1) solid var(--p-color-border);
+    border: var(--p-border-width-025) solid var(--p-color-border);
     box-shadow: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }
 
   &:active {
-    border: var(--p-border-width-1) solid var(--p-color-border);
+    border: var(--p-border-width-025) solid var(--p-color-border);
     box-shadow: none;
     background: var(--p-color-bg-active);
 
@@ -710,14 +710,14 @@
 
   &.pressed {
     background: var(--p-color-bg-subdued-active);
-    border: var(--p-border-width-1) solid var(--p-color-border);
+    border: var(--p-border-width-025) solid var(--p-color-border);
     box-shadow: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     color: var(--pc-button-text);
   }
 
   &.disabled {
-    border: var(--p-border-width-1) solid var(--p-color-border-disabled);
+    border: var(--p-border-width-025) solid var(--p-color-border-disabled);
     color: var(--p-color-text-disabled);
     background: transparent;
     box-shadow: none;
@@ -725,7 +725,7 @@
 
   &.destructive {
     background: transparent;
-    border: var(--p-border-width-1) solid var(--p-color-border-critical);
+    border: var(--p-border-width-025) solid var(--p-color-border-critical);
     box-shadow: none;
     color: var(--p-color-text-critical);
 
@@ -734,31 +734,31 @@
     }
 
     &:hover {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
+      border: var(--p-border-width-025) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
     }
 
     &:focus-visible {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
+      border: var(--p-border-width-025) solid var(--p-color-border-critical);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
     }
 
     &:active {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
+      border: var(--p-border-width-025) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
     }
 
     // stylelint-disable-next-line selector-max-class -- too many classes
     &.disabled {
-      border: var(--p-border-width-1) solid var(--p-color-border-disabled);
+      border: var(--p-border-width-025) solid var(--p-color-border-disabled);
       background: transparent;
       color: var(--p-color-text-disabled);
     }
 
     // stylelint-disable-next-line selector-max-class -- too many classes
     &.pressed {
-      border: var(--p-border-width-1) solid var(--p-color-border-critical);
+      border: var(--p-border-width-025) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
       color: var(--p-color-text-critical);
     }
@@ -890,13 +890,13 @@
 
     > .Content {
       @media (-ms-high-contrast: active) {
-        outline: var(--p-border-width-2) dotted;
+        outline: var(--p-border-width-050) dotted;
       }
       #{$se23} & {
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
-        border-radius: var(--p-border-radius-1_5-experimental);
+        border-radius: var(--p-border-radius-150);
       }
     }
   }
@@ -1170,7 +1170,7 @@
 }
 
 .sizeMicro {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: var(--p-space-1) var(--p-space-2);
   // stylelint-disable-next-line -- custom property
   min-height: var(--pc-button-micro-min-height);
@@ -1309,7 +1309,7 @@
     position: relative;
     border-color: currentColor;
     // stylelint-disable selector-max-class -- generated by polaris-migrator DO NOT COPY
-    box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
+    box-shadow: 0 0 0 var(--p-border-width-025) currentColor;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 2px);
 
@@ -1348,7 +1348,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
+      box-shadow: 0 0 0 var(--p-border-width-025) currentColor;
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
     }
@@ -1444,12 +1444,12 @@
   > :first-child .Button::before,
   > :first-child .Button::after {
     border-radius: 0;
-    border-top-left-radius: var(--p-border-radius-1);
-    border-bottom-left-radius: var(--p-border-radius-1);
+    border-top-left-radius: var(--p-border-radius-100);
+    border-bottom-left-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
     }
   }
 
@@ -1457,21 +1457,21 @@
   > :last-child .Button::before,
   > :last-child .Button::after {
     border-radius: 0;
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-100);
+    border-bottom-right-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-top-right-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
     }
   }
 
   > :last-child:first-child .Button,
   > :last-child:first-child .Button::after {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
index 24449dad0e3..01275b78f7e 100644
--- a/polaris-react/src/components/Card/Card.tsx
+++ b/polaris-react/src/components/Card/Card.tsx
@@ -41,8 +41,8 @@ export const Card = ({
   const breakpoints = useBreakpoints();
   const {polarisSummerEditions2023} = useFeatures();
   const defaultBorderRadius: BorderRadiusScale = polarisSummerEditions2023
-    ? '3'
-    : '2';
+    ? '300'
+    : '200';
 
   const isDefaultPadding =
     typeof padding !== 'string' &&
@@ -66,7 +66,7 @@ export const Card = ({
       {polarisSummerEditions2023 ? (
         <ShadowBevel
           boxShadow="xs"
-          borderRadius={hasBorderRadius ? '3' : '0-experimental'}
+          borderRadius={hasBorderRadius ? '300' : '0'}
           zIndex="32"
         >
           <Box
diff --git a/polaris-react/src/components/Card/tests/Card.test.tsx b/polaris-react/src/components/Card/tests/Card.test.tsx
index 7024504abc6..625bcb33fbd 100644
--- a/polaris-react/src/components/Card/tests/Card.test.tsx
+++ b/polaris-react/src/components/Card/tests/Card.test.tsx
@@ -62,7 +62,7 @@ describe('Card', () => {
     );
 
     expect(card).toContainReactComponent(ShadowBevel, {
-      borderRadius: '3',
+      borderRadius: '300',
     });
   });
 
@@ -80,7 +80,7 @@ describe('Card', () => {
 
       expect(card).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-box-border-radius': 'var(--p-border-radius-2)',
+          '--pc-box-border-radius': 'var(--p-border-radius-200)',
         }),
       });
     });
diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
index 1f0d76a33be..c641406dd13 100644
--- a/polaris-react/src/components/CheckableButton/CheckableButton.scss
+++ b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -16,7 +16,7 @@
   user-select: none;
   text-decoration: none;
   text-align: left;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   width: auto;
 
   #{$se23} & {
@@ -62,7 +62,7 @@
   text-overflow: ellipsis;
   // padding to fix the bottom of letters being cutoff by overflow: hidden
   padding: var(--p-space-025) 0;
-  margin-left: calc(var(--p-space-5) - var(--p-border-width-2));
+  margin-left: calc(var(--p-space-5) - var(--p-border-width-050));
 
   #{$se23} & {
     margin-left: calc(var(--p-space-3) + var(--p-space-025));
diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
index 47a86842cf9..86528fe8110 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -8,7 +8,7 @@
 .ChoiceLabel .Backdrop {
   #{$se23} & {
     border-width: 0;
-    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+    box-shadow: inset 0 0 0 var(--p-border-width-0165)
       var(--p-color-border-input);
     transition: border-color var(--p-motion-duration-100)
         var(--p-motion-ease-out),
@@ -24,7 +24,7 @@
   border-color: var(--p-color-border-input-hover);
 
   #{$se23} & {
-    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+    box-shadow: inset 0 0 0 var(--p-border-width-0165)
       var(--p-color-border-input-hover);
     background-color: var(--p-color-bg-input-hover-experimental);
   }
@@ -50,7 +50,7 @@
       @include focus-ring($style: 'focused');
 
       #{$se23} & {
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-025);
         background-color: var(--p-color-bg-input-hover-experimental);
@@ -142,13 +142,12 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-2));
+  @include focus-ring($border-width: var(--p-border-width-0165));
 
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
     @include no-focus-ring;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-input);
+    border: var(--p-border-width-0165) solid var(--p-color-border-input);
   }
 
   &:hover {
@@ -219,7 +218,7 @@
       @include control-backdrop(error);
       #{$se23} & {
         background-color: var(--p-color-bg-critical-subdued);
-        box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
+        box-shadow: inset 0 0 0 var(--p-border-width-0165)
           var(--p-color-bg-critical-strong-active);
       }
     }
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.scss b/polaris-react/src/components/ColorPicker/ColorPicker.scss
index dd804769064..d76aa47d551 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.scss
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.scss
@@ -38,7 +38,7 @@
   }
 
   // Need an extra pixel to avoid a small color bleed from happening
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   cursor: pointer;
 
   .Dragger {
@@ -50,7 +50,7 @@
   }
 
   .ColorLayer {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
   }
 
   &::after,
@@ -65,7 +65,7 @@
     height: 100%;
     width: 100%;
     pointer-events: none;
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
   }
 
   &::before {
@@ -81,7 +81,7 @@
   }
 
   @media (-ms-high-contrast: active) {
-    outline: var(--p-border-width-1) solid windowText;
+    outline: var(--p-border-width-025) solid windowText;
   }
 }
 
@@ -99,7 +99,7 @@
   margin: 0 auto;
   will-change: transform;
   background: transparent;
-  border: var(--p-border-radius-1) solid var(--p-color-bg);
+  border: var(--p-border-radius-100) solid var(--p-color-bg);
   border-radius: var(--p-border-radius-full);
   pointer-events: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -128,7 +128,7 @@ $vertical-picker-border-radius: calc(var(--pc-color-picker-size) * 0.5);
   height: var(--pc-color-picker-size);
   width: var(--p-space-6);
   margin-left: var(--p-space-2);
-  border-width: var(--p-border-radius-1);
+  border-width: var(--p-border-radius-100);
   border-radius: $vertical-picker-border-radius;
 
   &::after {
@@ -148,7 +148,7 @@ $vertical-picker-border-radius: calc(var(--pc-color-picker-size) * 0.5);
   }
 
   @media (-ms-high-contrast: active) {
-    outline: var(--p-border-width-1) solid windowText;
+    outline: var(--p-border-width-025) solid windowText;
   }
 }
 
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
index 0f8332a5a5d..5c1d1439e71 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -74,8 +74,8 @@ export function WithHexTextField() {
     Tile: {
       minHeight: 'calc(100% - 0.125rem)',
       aspectRatio: '1 / 1',
-      borderRadius: 'var(--p-border-radius-1)',
-      border: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
+      borderRadius: 'var(--p-border-radius-100)',
+      border: 'var(--p-border-width-025) solid var(--p-color-border-subdued)',
       backgroundColor: hsbToHex(color),
     },
     TextField: {
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index 5ea150b19e7..d68d703f093 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -6,14 +6,14 @@
   position: relative;
   max-width: 100vw;
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   overflow: hidden;
 
   #{$se23} & {
     border-radius: 0;
 
     @media #{$p-breakpoints-sm-up} {
-      border-radius: var(--p-border-radius-3);
+      border-radius: var(--p-border-radius-300);
     }
   }
 }
@@ -52,7 +52,7 @@
   height: 6px;
   width: 6px;
   background: var(--p-color-text-subdued);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
     background: var(--p-color-icon-subdued);
@@ -94,7 +94,7 @@
 // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY
 .TableRow + .TableRow {
   .Cell {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   }
 }
 
@@ -162,10 +162,10 @@
   top: 0;
   right: 0;
   bottom: 0;
-  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-right: var(--p-border-width-1) solid var(--p-color-border);
+    border-right: var(--p-border-width-025) solid var(--p-color-border);
   }
 }
 
@@ -189,13 +189,13 @@
 .Cell-header {
   font-weight: var(--p-font-weight-regular);
   color: var(--p-color-text);
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
   border-top: 0;
 
   #{$se23} & {
     padding-top: var(--p-space-3);
     padding-bottom: var(--p-space-3);
-    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
   }
 
   .IncreasedTableDensity & {
@@ -395,11 +395,11 @@
 .Cell-total {
   font-weight: var(--p-font-weight-semibold);
   background: var(--p-color-bg-subdued);
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
   }
 
   .ZebraStripingOnData.ShowTotals & {
@@ -417,17 +417,17 @@
 }
 
 .Cell-total-footer {
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   border-bottom: none;
 
   #{$se23} & {
     // Specificity bump
     border-bottom: none;
-    border-top: var(--p-border-width-1) solid var(--p-color-border);
+    border-top: var(--p-border-width-025) solid var(--p-color-border);
   }
 
   &:first-child {
-    border-bottom-left-radius: var(--p-border-radius-2);
+    border-bottom-left-radius: var(--p-border-radius-200);
 
     #{$se23} & {
       border-radius: 0;
@@ -435,7 +435,7 @@
   }
 
   &:last-child {
-    border-bottom-right-radius: var(--p-border-radius-2);
+    border-bottom-right-radius: var(--p-border-radius-200);
 
     #{$se23} & {
       border-radius: 0;
@@ -448,14 +448,14 @@
   background: var(--p-color-bg-subdued);
   color: var(--p-color-text-subdued);
   text-align: center;
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  border-bottom-left-radius: var(--p-border-radius-2);
-  border-bottom-right-radius: var(--p-border-radius-2);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom-left-radius: var(--p-border-radius-200);
+  border-bottom-right-radius: var(--p-border-radius-200);
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
     padding: var(--p-space-2) var(--p-space-3);
-    border-top: var(--p-border-width-1) solid var(--p-color-border);
+    border-top: var(--p-border-width-025) solid var(--p-color-border);
     border-radius: 0;
   }
 
diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
index 79c2a6ac244..085c0d1dc1d 100644
--- a/polaris-react/src/components/DatePicker/DatePicker.scss
+++ b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -2,12 +2,12 @@
 
 .DatePicker {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-date-picker-range-end-border-radius: var(--p-border-radius-6);
+  --pc-date-picker-range-end-border-radius: var(--p-border-radius-750);
   position: relative;
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-date-picker-range-end-border-radius: var(--p-border-radius-2);
+    --pc-date-picker-range-end-border-radius: var(--p-border-radius-200);
   }
 }
 
@@ -43,7 +43,7 @@
   background: transparent;
   margin: 0;
   padding: 0;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 }
 
 .DayCell-inRange {
@@ -58,7 +58,7 @@
   padding: var(--p-space-2);
   background: transparent;
   border: none;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   outline: none;
   font-size: var(--p-font-size-75);
   text-align: center;
@@ -66,13 +66,13 @@
   cursor: pointer;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 
   &:hover {
     background: var(--p-color-bg-interactive-hover);
     color: var(--p-color-text-on-color);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
 
     #{$se23} & {
       background: var(--p-color-bg-primary-hover);
@@ -109,7 +109,7 @@
     &:hover {
       background-color: HighlightText;
       color: Highlight;
-      outline: var(--p-border-width-2) solid Highlight;
+      outline: var(--p-border-width-050) solid Highlight;
     }
   }
 }
@@ -130,7 +130,7 @@
     &:hover {
       background-color: HighlightText;
       color: Highlight;
-      outline: var(--p-border-width-2) solid Highlight;
+      outline: var(--p-border-width-050) solid Highlight;
     }
   }
 }
@@ -207,10 +207,10 @@
 }
 
 .Day-firstInRange {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 
   &.Day-hasRange,
@@ -260,12 +260,12 @@
 
   // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Day-inRange:first-child:not(.Day-firstInRange):not(.Day-lastInRange) {
-    border-radius: var(--p-border-radius-1) 0 0 var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100) 0 0 var(--p-border-radius-100);
   }
 
   // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Day-inRange:last-child:not(.Day-firstInRange):not(.Day-lastInRange) {
-    border-radius: 0 var(--p-border-radius-1) var(--p-border-radius-1) 0;
+    border-radius: 0 var(--p-border-radius-100) var(--p-border-radius-100) 0;
   }
 }
 
diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.scss b/polaris-react/src/components/DescriptionList/DescriptionList.scss
index 7b29bbc6ecd..c7a9240c32d 100644
--- a/polaris-react/src/components/DescriptionList/DescriptionList.scss
+++ b/polaris-react/src/components/DescriptionList/DescriptionList.scss
@@ -30,7 +30,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     .Description + & + .Description {
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
     }
   }
 }
@@ -44,7 +44,7 @@
   }
 
   + .Term {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   }
 
   @media #{$p-breakpoints-sm-up} {
@@ -57,7 +57,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     + .Term + .Description {
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
     }
   }
 }
diff --git a/polaris-react/src/components/Divider/Divider.tsx b/polaris-react/src/components/Divider/Divider.tsx
index 1df31d5ec35..1d7fd737e24 100644
--- a/polaris-react/src/components/Divider/Divider.tsx
+++ b/polaris-react/src/components/Divider/Divider.tsx
@@ -11,14 +11,14 @@ export interface DividerProps {
   borderColor?: ColorBorderAlias | 'transparent';
   /**
    * Divider border width
-   * @default '1'
+   * @default '025'
    */
   borderWidth?: BorderWidthScale;
 }
 
 export const Divider = ({
   borderColor = 'border-subdued',
-  borderWidth = '1',
+  borderWidth = '025',
 }: DividerProps) => {
   const borderColorValue =
     borderColor === 'transparent'
diff --git a/polaris-react/src/components/Divider/tests/Divider.test.tsx b/polaris-react/src/components/Divider/tests/Divider.test.tsx
index 270cd78dde9..9fad4026db5 100644
--- a/polaris-react/src/components/Divider/tests/Divider.test.tsx
+++ b/polaris-react/src/components/Divider/tests/Divider.test.tsx
@@ -10,7 +10,7 @@ describe('<Divider />', () => {
     expect(divider).toContainReactComponent('hr', {
       style: {
         borderBlockStart:
-          'var(--p-border-width-1) solid var(--p-color-border-subdued)',
+          'var(--p-border-width-025) solid var(--p-color-border-subdued)',
       } as React.CSSProperties,
     });
   });
@@ -20,18 +20,19 @@ describe('<Divider />', () => {
 
     expect(divider).toContainReactComponent('hr', {
       style: expect.objectContaining({
-        borderBlockStart: 'var(--p-border-width-1) solid var(--p-color-border)',
+        borderBlockStart:
+          'var(--p-border-width-025) solid var(--p-color-border)',
       }) as React.CSSProperties,
     });
   });
 
   it('renders custom border width when passed in', () => {
-    const divider = mountWithApp(<Divider borderWidth="2" />);
+    const divider = mountWithApp(<Divider borderWidth="050" />);
 
     expect(divider).toContainReactComponent('hr', {
       style: expect.objectContaining({
         borderBlockStart:
-          'var(--p-border-width-2) solid var(--p-color-border-subdued)',
+          'var(--p-border-width-050) solid var(--p-color-border-subdued)',
       }) as React.CSSProperties,
     });
   });
diff --git a/polaris-react/src/components/DropZone/DropZone.scss b/polaris-react/src/components/DropZone/DropZone.scss
index 13889cf338d..a8e9550281b 100755
--- a/polaris-react/src/components/DropZone/DropZone.scss
+++ b/polaris-react/src/components/DropZone/DropZone.scss
@@ -17,11 +17,11 @@ $dropzone-stacking-order: (
   bottom: 0;
   opacity: 1;
   transform: scale(1);
-  border: var(--p-border-width-1) $dropzone-border-style transparent;
+  border: var(--p-border-width-025) $dropzone-border-style transparent;
 }
 
 @mixin set-border-radius {
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 }
 
 .DropZone {
@@ -36,7 +36,7 @@ $dropzone-stacking-order: (
   #{$se23} & {
     background-color: var(--p-color-bg-input);
   }
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 
   &::after {
     content: '';
@@ -48,11 +48,11 @@ $dropzone-stacking-order: (
     bottom: 0;
     left: 0;
 
-    border: var(--p-border-width-1) $dropzone-border-style transparent;
-    border-radius: var(--p-border-radius-2);
+    border: var(--p-border-width-025) $dropzone-border-style transparent;
+    border-radius: var(--p-border-radius-200);
     pointer-events: none;
     #{$se23} & {
-      border-width: var(--p-border-width-1-experimental);
+      border-width: var(--p-border-width-0165);
     }
   }
 
@@ -63,7 +63,7 @@ $dropzone-stacking-order: (
   }
 
   &:hover {
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
   }
 }
 
@@ -161,7 +161,7 @@ $dropzone-stacking-order: (
 
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-1));
+  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-025));
   flex: 1;
 }
 
@@ -178,7 +178,7 @@ $dropzone-stacking-order: (
   justify-content: center;
   align-items: center;
   padding: var(--p-space-4);
-  border: var(--p-border-width-1) $dropzone-border-style
+  border: var(--p-border-width-025) $dropzone-border-style
     var(--p-color-border-interactive);
   text-align: center;
   color: var(--p-color-text-interactive);
@@ -186,7 +186,7 @@ $dropzone-stacking-order: (
   pointer-events: none;
 
   #{$se23} & {
-    border: var(--p-border-width-2-experimental) solid
+    border: var(--p-border-width-025) solid
       var(--p-color-border-input-active-experimental);
     background-color: var(--p-color-bg-input-active-experimental);
     color: var(--p-color-text);
@@ -205,7 +205,7 @@ $dropzone-stacking-order: (
     border-color: var(--p-color-border-critical-strong-experimental);
     color: var(--p-color-text-critical);
     border-style: $dropzone-border-style;
-    border-width: var(--p-border-width-1-experimental);
+    border-width: var(--p-border-width-0165);
     background-color: var(--p-color-bg-critical-subdued);
   }
 }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
index 3ab6828c5db..41efb075bc2 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -27,7 +27,7 @@
   display: inline-flex;
   flex: 0 0 auto;
   border: none;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: var(--p-space-1) var(--p-space-2);
   margin: 0;
   text-decoration: none;
@@ -67,7 +67,7 @@
     background-color: var(--p-color-bg-input);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
     box-shadow: var(--p-shadow-button-experimental);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 }
 
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index b1fc0597cd8..c2b92cbb897 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -3,9 +3,9 @@
 .Container {
   position: relative;
   z-index: var(--p-z-index-1);
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  border-top-left-radius: var(--p-border-radius-2);
-  border-top-right-radius: var(--p-border-radius-2);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top-left-radius: var(--p-border-radius-200);
+  border-top-right-radius: var(--p-border-radius-200);
   background: var(--p-color-bg);
 }
 
@@ -39,7 +39,7 @@
 }
 
 .FiltersWrapper {
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
   height: 53px;
   overflow: hidden;
 
@@ -87,8 +87,8 @@
 
 .AddFilter {
   background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  border-radius: var(--p-border-radius-750);
+  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   height: 28px;
   cursor: pointer;
@@ -98,7 +98,7 @@
   justify-content: center;
   outline: inherit;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-1));
+  @include focus-ring($border-width: var(--p-border-width-025));
 
   path {
     fill: var(--p-color-icon);
@@ -144,7 +144,7 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-750);
   }
 
   span {
@@ -165,8 +165,8 @@
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
+    border-radius: var(--p-border-radius-200);
+    border: var(--p-color-border) dashed var(--p-border-width-025);
 
     &:hover {
       background: transparent;
@@ -175,7 +175,7 @@
 
     &:focus {
       background: transparent;
-      outline-offset: var(--p-border-width-2);
+      outline-offset: var(--p-border-width-050);
     }
 
     &:active {
@@ -187,7 +187,7 @@
     }
 
     &::after {
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
index b2cfb550899..ac31c50f4d0 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -2,13 +2,13 @@
 
 .FilterButton {
   background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-6);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
+  border-radius: var(--p-border-radius-750);
+  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
   cursor: pointer;
   color: var(--p-color-text);
 
   // stylelint-disable-next-line -- no way to set focus ring without mixin currently
-  @include focus-ring($border-width: var(--p-border-width-1));
+  @include focus-ring($border-width: var(--p-border-width-025));
   // stylelint-disable-next-line selector-max-specificity -- specificity is required to override focus-ring mixin
   &.focusedFilterButton:focus-within:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -39,13 +39,13 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-6);
+    border-radius: var(--p-border-radius-750);
   }
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-2);
-    border: var(--p-color-border) dashed var(--p-border-width-1);
+    border-radius: var(--p-border-radius-200);
+    border: var(--p-color-border) dashed var(--p-border-width-025);
 
     &:hover,
     &:active {
@@ -86,7 +86,7 @@
     }
 
     &::after {
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
index c490e04780b..b3b79b4caac 100644
--- a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
@@ -16,8 +16,8 @@
   /* stylelint-disable-next-line polaris/typography/polaris/at-rule-disallowed-list -- Matching custom input with TextField */
   @include text-style-input;
   flex: 1;
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
-  border-radius: var(--p-border-radius-1);
+  border: var(--p-border-width-025) solid var(--p-color-border-input);
+  border-radius: var(--p-border-radius-100);
   border-color: var(--p-color-border-input);
   padding-inline: var(--p-space-1_5-experimental);
   width: 100%;
@@ -30,7 +30,7 @@
   &:active,
   &:focus {
     border-color: var(--p-color-border-input-active-experimental);
-    border-width: var(--p-border-width-2-experimental);
+    border-width: var(--p-border-width-025);
     background-color: var(--p-color-bg-input-active-experimental);
   }
 
@@ -50,7 +50,8 @@
 }
 
 .focused:not(:disabled) {
-  outline: var(--p-border-width-2) solid var(--p-color-border-interactive-focus);
+  outline: var(--p-border-width-050) solid
+    var(--p-color-border-interactive-focus);
   outline-offset: var(--p-space-025);
 }
 
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index 81057d81379..87d05a9ee9a 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -124,7 +124,7 @@ $sidebar-breakpoint: 1200px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: focused);
     position: absolute;
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
     outline: none;
   }
 
diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx
index 01b1970ae01..37fdeab7bea 100644
--- a/polaris-react/src/components/Frame/Frame.stories.tsx
+++ b/polaris-react/src/components/Frame/Frame.stories.tsx
@@ -1108,7 +1108,7 @@ function WithSidebarEnabled({
               background: 'var(--p-color-bg)',
               padding: 'var(--p-space-2)',
               boxShadow: 'var(--p-shadow-md)',
-              borderRadius: 'var(--p-border-radius-3)',
+              borderRadius: 'var(--p-border-radius-300)',
             }}
           >
             This is a sidebar
diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
index 48eabaa72bb..ce36ac22738 100644
--- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
+++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -23,7 +23,7 @@
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 }
 
@@ -90,8 +90,10 @@
     --pc-button-color-hover: rgba(250, 250, 250, 1);
     --pc-button-color-active: rgba(247, 247, 247, 1);
     --pc-button-color-depressed: rgba(247, 247, 247, 1);
-    --pc-button-color-disabled:  rgba(255, 255, 255, 0.2);
-    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
+    --pc-button-color-disabled: rgba(255, 255, 255, 0.2);
+    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
+      1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,
+      -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
 
     &::before {
       top: 0;
@@ -115,7 +117,7 @@
     }
 
     &[class*='Polaris-Button--disabled'],
-    &[class*='Button-disabled']{
+    &[class*='Button-disabled'] {
       --pc-button-text: var(--p-color-text-subdued);
       background: var(--pc-button-color-disabled);
     }
@@ -129,7 +131,7 @@
     --pc-button-text: var(--p-color-text-inverse);
 
     &::after {
-     content: none;
+      content: none;
     }
 
     &:hover {
diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.scss b/polaris-react/src/components/Frame/components/Toast/Toast.scss
index 4bb3235e4f1..0ca880477c0 100644
--- a/polaris-react/src/components/Frame/components/Toast/Toast.scss
+++ b/polaris-react/src/components/Frame/components/Toast/Toast.scss
@@ -6,7 +6,7 @@ $Backdrop-opacity: 0.88;
   display: inline-flex;
   max-width: 500px;
   padding: var(--p-space-2) var(--p-space-3);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   background: var(--p-color-bg-inverse);
   color: var(--p-color-text-on-color);
   margin-bottom: var(--p-space-5);
@@ -15,7 +15,7 @@ $Backdrop-opacity: 0.88;
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-lg),
-      $borderRadius: var(--p-border-radius-2)
+      $borderRadius: var(--p-border-radius-200)
     );
   }
 
@@ -24,7 +24,7 @@ $Backdrop-opacity: 0.88;
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-2) solid transparent;
+    border: var(--p-border-width-050) solid transparent;
   }
 }
 
diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
index 1bbb2ba19d1..2f810be4d37 100644
--- a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
+++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -19,7 +19,7 @@
   padding-left: var(--p-space-3);
   padding-right: var(--p-space-3);
   border-width: 0;
-  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
   background-color: var(--p-color-bg);
   font-weight: var(--p-font-weight-medium);
   cursor: pointer;
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
index ec463c7c66b..80164c78fdf 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.scss
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -95,7 +95,7 @@ $spinner-size: 20px;
   @media #{$p-breakpoints-md-down} {
     position: relative;
     padding: var(--p-space-3) var(--p-space-4);
-    border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
     gap: var(--p-space-2);
 
     &::before {
diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
index 163e5c40649..e2ac62cdf86 100644
--- a/polaris-react/src/components/IndexFilters/components/Container/Container.scss
+++ b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -1,13 +1,13 @@
 @import '../../../../styles/common';
 
 .Container {
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
-  border-top-left-radius: var(--p-border-radius-2);
-  border-top-right-radius: var(--p-border-radius-2);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top-left-radius: var(--p-border-radius-200);
+  border-top-right-radius: var(--p-border-radius-200);
   background: var(--p-color-bg);
 
   #{$se23} & {
-    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
   }
 }
 
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
index 2bd7f8698b4..91a3c6b9d7e 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
@@ -135,7 +135,7 @@ export function SortButton({
         paddingInlineEnd={polarisSummerEditions2023 ? '3' : undefined}
         paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
         paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
-        borderBlockEndWidth="1"
+        borderBlockEndWidth="025"
         borderColor="border-subdued"
       >
         <ChoiceList
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
index 19637486887..3014b72ae6b 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
@@ -3,7 +3,7 @@
 .DirectionButton {
   // stylelint-disable-next-line -- This mixin cannot be replaced with a single token
   @include focus-ring;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: var(--p-space-05);
   font-size: var(--p-font-size-100);
   display: flex;
@@ -18,7 +18,7 @@
   #{$se23} & {
     // stylelint-disable-next-line -- se23 overrides
     @include focus-ring($size: 'wide');
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: var(--p-space-1) var(--p-space-3) var(--p-space-1) var(--p-space-2);
   }
 
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index e7285829652..30d50a98ee5 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -92,7 +92,7 @@ $loading-panel-height: 53px;
     background: var(--p-color-bg-info-subdued);
     padding: var(--p-space-2);
     padding-bottom: var(--p-space-1);
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
   }
 }
 
@@ -175,7 +175,7 @@ $loading-panel-height: 53px;
 .TableRow {
   background-color: var(--p-color-bg);
   cursor: pointer;
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     &.TableRow-selected {
@@ -183,7 +183,7 @@ $loading-panel-height: 53px;
     }
 
     &:first-child {
-      border-top: var(--p-border-width-1) solid var(--p-color-border);
+      border-top: var(--p-border-width-025) solid var(--p-color-border);
     }
   }
 
@@ -242,8 +242,8 @@ $loading-panel-height: 53px;
       font-weight: var(--p-font-weight-medium);
       font-size: var(--p-font-size-75);
       background-color: var(--p-color-bg-subdued);
-      border-top: var(--p-border-width-1) solid var(--p-color-border);
-      border-bottom: var(--p-border-width-1) solid var(--p-color-border);
+      border-top: var(--p-border-width-025) solid var(--p-color-border);
+      border-bottom: var(--p-border-width-025) solid var(--p-color-border);
     }
 
     #{$se23} & {
@@ -667,18 +667,18 @@ $loading-panel-height: 53px;
   content: '';
   position: absolute;
   left: 0;
-  bottom: calc(-1 * var(--p-border-width-2));
+  bottom: calc(-1 * var(--p-border-width-050));
   width: 100%;
-  height: var(--p-border-width-2);
-  border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued);
+  height: var(--p-border-width-050);
+  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-bottom: var(--p-border-width-2) dotted var(--p-color-border-strong);
+    border-bottom: var(--p-border-width-050) dotted var(--p-color-border-strong);
   }
 }
 
 .TableHeadingTooltipUnderlinePlaceholder {
-  border-bottom: var(--p-border-width-2) dotted transparent;
+  border-bottom: var(--p-border-width-050) dotted transparent;
 }
 
 .TableHeadingSortIcon-visible {
@@ -1124,16 +1124,16 @@ $scroll-bar-size: var(--p-space-2);
   bottom: 0;
   padding: var(--p-space-05);
   background-color: var(--p-color-bg);
-  border-bottom-right-radius: var(--p-border-radius-2);
-  border-bottom-left-radius: var(--p-border-radius-2);
+  border-bottom-right-radius: var(--p-border-radius-200);
+  border-bottom-left-radius: var(--p-border-radius-200);
 
   #{$se23} & {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 
     @media #{$p-breakpoints-sm-up} {
-      border-bottom-right-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
       padding: var(--p-space-05) var(--p-space-2);
     }
   }
@@ -1162,7 +1162,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-track {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   background-color: transparent;
 }
 
@@ -1174,7 +1174,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-thumb {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   background-color: var(--p-color-border-strong);
   transition: background-color var(--p-motion-duration-100)
     var(--p-motion-ease-out);
@@ -1206,7 +1206,7 @@ $scroll-bar-size: var(--p-space-2);
   transform: translateX(calc(-1 * var(--pc-index-table-translate-offset)));
   transition: transform var(--p-motion-ease) var(--p-motion-duration-200);
   display: flex;
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   filter: none;
   align-items: center;
 }
diff --git a/polaris-react/src/components/InlineCode/InlineCode.scss b/polaris-react/src/components/InlineCode/InlineCode.scss
index 8d46c6015cd..820d8c92e78 100644
--- a/polaris-react/src/components/InlineCode/InlineCode.scss
+++ b/polaris-react/src/components/InlineCode/InlineCode.scss
@@ -1,6 +1,6 @@
 .Code {
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-05);
+  border-radius: var(--p-border-radius-050);
   font-family: var(--p-font-family-mono);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   font-size: 0.85em;
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
index ce3616442f3..bfc38403133 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -11,7 +11,7 @@ $key-base-dimension: 28px;
   background: var(--p-color-bg-inset);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   box-shadow: 0 var(--p-space-025) 0 rgba(0, 0, 0, 0.15);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
   font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
@@ -23,7 +23,7 @@ $key-base-dimension: 28px;
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
     color: var(--p-color-text-subdued);
     box-shadow: none;
     margin-bottom: 0;
@@ -32,7 +32,7 @@ $key-base-dimension: 28px;
 
 .small {
   background: var(--p-color-bg-app-selected);
-  border-radius: var(--p-border-radius-05);
+  border-radius: var(--p-border-radius-050);
   box-shadow: none;
   line-height: unset;
   padding: 0 var(--p-space-1);
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 72ef4be4d97..634ce9d539b 100644
--- a/polaris-react/src/components/Layout/Layout.scss
+++ b/polaris-react/src/components/Layout/Layout.scss
@@ -77,13 +77,13 @@ $relative-size: $primary-basis / $secondary-basis;
 
   + .AnnotatedSection {
     #{$se23} & {
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
       padding-top: var(--p-space-4);
     }
 
     @media #{$p-breakpoints-sm-up} {
       padding-top: var(--p-space-4);
-      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
     }
   }
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
index bea48544589..b3fb087028c 100644
--- a/polaris-react/src/components/LegacyCard/LegacyCard.scss
+++ b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -3,13 +3,13 @@
 .LegacyCard {
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-md);
-  outline: var(--p-border-width-1) solid transparent;
+  outline: var(--p-border-width-025) solid transparent;
   overflow: clip;
 
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-xs),
-      $borderRadius: var(--p-border-radius-0-experimental),
+      $borderRadius: var(--p-border-radius-0),
       $zIndex: 101
     );
 
@@ -29,35 +29,35 @@
   }
 
   @media #{$p-breakpoints-sm-up} {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     .Section:first-child {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-top-right-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-top-right-radius: var(--p-border-radius-200);
     }
 
     .Section:last-child {
-      border-bottom-left-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
     }
 
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: var(--p-shadow-xs),
-        $borderRadius: var(--p-border-radius-3),
+        $borderRadius: var(--p-border-radius-300),
         $zIndex: 101
       );
 
       // stylelint-disable-next-line -- se23 override
       .Section:first-child {
-        border-top-left-radius: var(--p-border-radius-3);
-        border-top-right-radius: var(--p-border-radius-3);
+        border-top-left-radius: var(--p-border-radius-300);
+        border-top-right-radius: var(--p-border-radius-300);
       }
 
       // stylelint-disable-next-line -- se23 override
       .Section:last-child {
-        border-bottom-left-radius: var(--p-border-radius-3);
-        border-bottom-right-radius: var(--p-border-radius-3);
+        border-bottom-left-radius: var(--p-border-radius-300);
+        border-bottom-right-radius: var(--p-border-radius-300);
       }
     }
   }
@@ -68,7 +68,7 @@
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: none,
-        $borderRadius: var(--p-border-radius-0-experimental),
+        $borderRadius: var(--p-border-radius-0),
         $border: none,
         $content: none
       );
@@ -120,7 +120,7 @@
   }
 
   + .Section {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -173,7 +173,7 @@
   }
 
   .Header + & {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
     margin-top: var(--p-space-5);
 
     #{$se23} & {
@@ -217,7 +217,7 @@
   + .Subsection {
     margin-top: var(--p-space-4);
     padding-top: var(--p-space-4);
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -258,7 +258,7 @@
   }
 
   .Section-subdued + & {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
     padding: var(--p-space-5);
 
     #{$se23} & {
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
index f263278fd6e..6652a2a2a30 100644
--- a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
+++ b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -19,7 +19,7 @@ $list-filters-footer-height: 70px;
   top: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
   height: $list-filters-header-height;
   box-sizing: border-box;
   display: flex;
@@ -46,7 +46,7 @@ $list-filters-footer-height: 70px;
   bottom: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   height: $list-filters-footer-height;
   box-sizing: border-box;
   display: flex;
@@ -65,7 +65,7 @@ $list-filters-footer-height: 70px;
 }
 
 .EmptyFooterState {
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-4);
   width: 100%;
   display: flex;
@@ -81,7 +81,7 @@ $list-filters-footer-height: 70px;
   margin: 0;
   padding: var(--p-space-4) var(--p-space-5);
   color: var(--p-color-text);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   background: none;
   border: none;
   outline: none;
@@ -95,7 +95,7 @@ $list-filters-footer-height: 70px;
   &:hover {
     cursor: pointer;
     background-color: var(--p-color-bg-hover);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
   }
 
   &:focus-visible:not(:active) {
diff --git a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
index ef35ab50e8d..601d7e34497 100644
--- a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
+++ b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -20,12 +20,12 @@
 
   &.right {
     .CenterContainer * {
-      border-top-right-radius: var(--p-border-radius-1);
-      border-bottom-right-radius: var(--p-border-radius-1);
+      border-top-right-radius: var(--p-border-radius-100);
+      border-bottom-right-radius: var(--p-border-radius-100);
 
       #{$se23} & {
-        border-top-right-radius: var(--p-border-radius-2);
-        border-bottom-right-radius: var(--p-border-radius-2);
+        border-top-right-radius: var(--p-border-radius-200);
+        border-bottom-right-radius: var(--p-border-radius-200);
       }
     }
   }
@@ -80,43 +80,43 @@
   }
 
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-1);
-    border-bottom-left-radius: var(--p-border-radius-1);
+    border-top-left-radius: var(--p-border-radius-100);
+    border-bottom-left-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
     }
   }
 
   .Item:last-of-type > div > button {
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-top-right-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
     }
   }
 }
 
 .RightContainer.queryFieldHidden {
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-1);
-    border-bottom-left-radius: var(--p-border-radius-1);
+    border-top-left-radius: var(--p-border-radius-100);
+    border-bottom-left-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
     }
   }
 }
 
 .RightContainerWithoutMoreFilters {
   .Item:last-child > div > button {
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-100);
+    border-bottom-right-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-top-right-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
     }
   }
 }
@@ -132,18 +132,18 @@
     border-bottom-left-radius: 0;
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
     }
   }
 }
 
 .MoreFiltersButtonContainer.onlyButtonVisible {
   .Item > div > button {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     #{$se23} & {
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
index bd3dcc04cd1..0771b90ed1f 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
@@ -142,7 +142,7 @@ $item-vertical-padding: $item-min-height * 0.5;
 .Title {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   display: block;
   padding: var(--p-space-2) var(--p-space-4);
   min-width: $item-min-width;
@@ -155,8 +155,8 @@ $item-vertical-padding: $item-min-height * 0.5;
     left: 0;
     right: 0;
     height: var(--p-border-width-3);
-    border-top-left-radius: var(--p-border-radius-1);
-    border-top-right-radius: var(--p-border-radius-1);
+    border-top-left-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-100);
   }
 
   #{$se23} & {
@@ -194,7 +194,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: inherit;
 
   &::-moz-focus-inner {
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx b/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
index 45c6774409a..df1a5c71404 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
@@ -172,7 +172,7 @@ class TabsInner extends PureComponent<CombinedProps, State> {
     return (
       <div>
         <Box
-          borderBlockEndWidth="1"
+          borderBlockEndWidth="025"
           borderColor="border-subdued"
           paddingInlineStart="2"
           paddingInlineEnd="2"
diff --git a/polaris-react/src/components/Link/Link.scss b/polaris-react/src/components/Link/Link.scss
index 8a1f7c6682e..396f477827b 100644
--- a/polaris-react/src/components/Link/Link.scss
+++ b/polaris-react/src/components/Link/Link.scss
@@ -24,15 +24,15 @@
 
   &:focus:not(:active) {
     outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-1);
+      var(--p-border-width-025);
   }
 
   #{$se23} &:focus,
   #{$se23} &:focus-visible {
     outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-2);
+      var(--p-border-width-050);
     outline-offset: var(--p-space-05);
-    border-radius: var(--p-border-radius-1_5-experimental);
+    border-radius: var(--p-border-radius-150);
   }
 
   &:active {
@@ -50,7 +50,7 @@
       bottom: -2px;
       left: -5px;
       display: block;
-      border-radius: var(--p-border-radius-1);
+      border-radius: var(--p-border-radius-100);
 
       #{$se23} & {
         content: none;
diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
index 72f4063c94d..0a784b46d52 100644
--- a/polaris-react/src/components/Listbox/Listbox.stories.tsx
+++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -454,8 +454,8 @@ export function WithSearch() {
             position: 'relative',
             height: polarisSummerEditions2023 ? '262px' : '292px',
             padding: 'var(--p-space-2) 0',
-            borderBottomLeftRadius: 'var(--p-border-radius-2)',
-            borderBottomRightRadius: 'var(--p-border-radius-2)',
+            borderBottomLeftRadius: 'var(--p-border-radius-200)',
+            borderBottomRightRadius: 'var(--p-border-radius-200)',
           }}
           onScrolledToBottom={handleLazyLoadSegments}
         >
diff --git a/polaris-react/src/components/Listbox/components/Option/Option.scss b/polaris-react/src/components/Listbox/components/Option/Option.scss
index 735fd0f8373..1c99da8196f 100644
--- a/polaris-react/src/components/Listbox/components/Option/Option.scss
+++ b/polaris-react/src/components/Listbox/components/Option/Option.scss
@@ -11,5 +11,5 @@
 }
 
 .divider {
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/Listbox/components/Section/Section.scss b/polaris-react/src/components/Listbox/components/Section/Section.scss
index a07ae1a6247..506592a8974 100644
--- a/polaris-react/src/components/Listbox/components/Section/Section.scss
+++ b/polaris-react/src/components/Listbox/components/Section/Section.scss
@@ -4,7 +4,7 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
 
 .noDivider {
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
index f7704b16659..6a33eeb1ae4 100644
--- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
+++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
@@ -3,7 +3,7 @@
 .TextOption {
   margin: var(--p-space-1) var(--p-space-2) 0;
   flex: 1;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: var(--p-space-2) var(--p-space-2);
   cursor: pointer;
   display: flex;
@@ -11,7 +11,7 @@
   @include focus-ring;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
 
     &.selected::before {
@@ -73,10 +73,10 @@
     bottom: 0;
     left: calc(-1 * var(--p-space-1));
     height: 100%;
-    width: var(--p-border-radius-1);
+    width: var(--p-border-radius-100);
     background-color: var(--p-color-bg-interactive);
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-100);
+    border-bottom-right-radius: var(--p-border-radius-100);
     transform: translateX(-100%);
   }
 
diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
index dbe1a98c307..716fd4fd1b4 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.scss
+++ b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -23,8 +23,8 @@
 
     @media #{$p-breakpoints-md-up} {
       border-top-right-radius: 0;
-      border-top-left-radius: var(--p-border-radius-2);
-      border-bottom-left-radius: var(--p-border-radius-2);
+      border-top-left-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-200);
     }
 
     &.sizeSmall {
@@ -33,8 +33,8 @@
   }
 
   @media #{$p-breakpoints-sm-up} {
-    border-top-left-radius: var(--p-border-radius-2);
-    border-top-right-radius: var(--p-border-radius-2);
+    border-top-left-radius: var(--p-border-radius-200);
+    border-top-right-radius: var(--p-border-radius-200);
   }
 }
 
diff --git a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
index 254157e0852..58f42ca37d0 100644
--- a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
+++ b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
@@ -15,5 +15,5 @@ $indicator-position: -3px;
   height: $indicator-size;
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-icon-info);
-  border: solid var(--p-border-width-2) var(--p-color-bg-app);
+  border: solid var(--p-border-width-050) var(--p-color-bg-app);
 }
diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
index 2e44bcd5c52..ea9fe8462ee 100644
--- a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
+++ b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
@@ -8,7 +8,7 @@
   margin-left: var(--p-space-5);
   margin-right: calc(-1 * var(--p-space-2));
   padding: var(--p-space-2);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
 
   &:hover {
     background: var(--p-color-bg-hover);
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
index d40a3469a44..cbe5c2ed6ee 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -44,7 +44,7 @@ $large-width: 980px;
   box-shadow: var(--p-shadow-2xl);
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 
   @media #{$p-breakpoints-md-down} {
@@ -56,9 +56,9 @@ $large-width: 980px;
     position: relative;
     max-width: $small-width;
     margin: 0 auto;
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     #{$se23} & {
-      border-radius: var(--p-border-radius-4);
+      border-radius: var(--p-border-radius-400);
     }
   }
 
diff --git a/polaris-react/src/components/Modal/components/Footer/Footer.tsx b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
index a475019a2ad..5976b91d3dd 100644
--- a/polaris-react/src/components/Modal/components/Footer/Footer.tsx
+++ b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
@@ -38,7 +38,7 @@ export function Footer({
     <HorizontalStack gap="4" blockAlign="center">
       <Box
         borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
-        borderBlockStartWidth="1"
+        borderBlockStartWidth="025"
         minHeight={polarisSummerEditions2023 ? undefined : 'var(--p-space-16)'}
         padding="4"
         paddingInlineStart={polarisSummerEditions2023 ? undefined : '5'}
diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/polaris-react/src/components/Modal/components/Header/Header.tsx
index 25e4bfb0a51..d21b0304628 100644
--- a/polaris-react/src/components/Modal/components/Header/Header.tsx
+++ b/polaris-react/src/components/Modal/components/Header/Header.tsx
@@ -52,7 +52,7 @@ export function Header({
       paddingBlockEnd="4"
       paddingInlineStart={headerPaddingInline}
       paddingInlineEnd={headerPaddingInline}
-      borderBlockEndWidth="1"
+      borderBlockEndWidth="025"
       borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
       background={
         polarisSummerEditions2023 ? 'bg-secondary-experimental' : undefined
diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss
index f15a737a7dc..ee4cd684bc7 100644
--- a/polaris-react/src/components/Modal/components/Section/Section.scss
+++ b/polaris-react/src/components/Modal/components/Section/Section.scss
@@ -6,7 +6,7 @@ $close-button-width: calc(var(--p-space-12) + var(--p-space-1));
   flex: 0 0 auto;
 
   &:not(:last-of-type) {
-    border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
   }
 }
 
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index ace4719808d..330032bc08f 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -18,7 +18,7 @@ $nav-max-width: 360px;
   min-height: 100%;
   background-color: var(--p-color-bg-app);
   -webkit-overflow-scrolling: touch;
-  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties
@@ -137,10 +137,10 @@ $nav-max-width: 360px;
 
 .Item,
 .ItemInnerWrapper {
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     transition: background-color var(--p-motion-duration-150)
       var(--p-motion-ease-out);
   }
@@ -276,8 +276,8 @@ $nav-max-width: 360px;
 
     #{$se23} & {
       background: var(--p-color-bg-app-selected);
-      border-top-right-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-top-right-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
     }
 
     &::before {
@@ -333,7 +333,7 @@ $nav-max-width: 360px;
 .Item-selected {
   font-weight: var(--p-font-weight-semibold);
   color: var(--p-color-text-primary);
-  outline: var(--p-border-width-1) solid transparent;
+  outline: var(--p-border-width-025) solid transparent;
 
   &::before {
     content: '';
@@ -343,8 +343,8 @@ $nav-max-width: 360px;
     left: calc(-1 * var(--p-space-2));
     width: $active-indicator-width;
     background-color: var(--p-color-bg-primary);
-    border-top-right-radius: var(--p-border-radius-1);
-    border-bottom-right-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-100);
+    border-bottom-right-radius: var(--p-border-radius-100);
   }
 
   #{$se23} & {
@@ -463,7 +463,7 @@ $nav-max-width: 360px;
 
   &:not(:first-child) {
     .ItemInnerWrapper {
-      border-top: var(--p-border-width-1) solid var(--p-color-bg-app);
+      border-top: var(--p-border-width-025) solid var(--p-color-bg-app);
 
       #{$se23} & {
         border-top: 0;
@@ -575,8 +575,8 @@ $nav-max-width: 360px;
         background: var(--p-color-bg-subdued-hover);
         padding: 0 var(--p-space-05);
         margin-right: 0;
-        border-top-right-radius: var(--p-border-radius-2);
-        border-bottom-right-radius: var(--p-border-radius-2);
+        border-top-right-radius: var(--p-border-radius-200);
+        border-bottom-right-radius: var(--p-border-radius-200);
         transition: none;
       }
 
@@ -632,17 +632,17 @@ $nav-max-width: 360px;
   align-items: center;
   height: nav(mobile-height);
   padding: var(--p-space-1) calc(var(--p-space-2) + var(--p-space-05));
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
     padding: calc(var(--p-space-2) - var(--p-space-05)) var(--p-space-2);
     height: calc(100% - var(--p-space-1));
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     &:focus-visible:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -814,7 +814,7 @@ $nav-max-width: 360px;
 
     #{$se23} & {
       color: var(--p-color-text);
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
 
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- necessary to override the specificity of the Text class
       .Text {
@@ -958,7 +958,7 @@ $nav-max-width: 360px;
 }
 
 .Section-withSeparator {
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
 
 .SectionHeading {
@@ -998,19 +998,19 @@ $nav-max-width: 360px;
     height: nav(mobile-nav-height);
     margin-right: var(--p-space-1);
     padding: var(--p-space-1) var(--p-space-4);
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     #{$se23} & {
       padding: calc(var(--p-space-1) - var(--p-space-05));
       height: calc(100% - var(--p-space-1));
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
       margin-right: calc(var(--p-space-2) + var(--p-space-05));
 
       // stylelint-disable-next-line selector-max-combinators -- se23
       &:focus-visible:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-2) solid
+        outline: var(--p-border-width-050) solid
           var(--p-color-border-interactive-focus);
       }
     }
diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
index e6bdfccd0d5..6ba80135a1e 100644
--- a/polaris-react/src/components/Navigation/_variables.scss
+++ b/polaris-react/src/components/Navigation/_variables.scss
@@ -61,7 +61,7 @@ $nav-animation-variables: (
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
       z-index: var(--p-z-index-1);
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -94,7 +94,7 @@ $nav-animation-variables: (
 
     img {
       #{$se23} & {
-        border-radius: var(--p-border-radius-1);
+        border-radius: var(--p-border-radius-100);
       }
     }
   }
diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx
index 8b2a7fec58a..dfb09766b8a 100644
--- a/polaris-react/src/components/OptionList/OptionList.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.tsx
@@ -148,7 +148,7 @@ export function OptionList({
             }
             borderColor="border-subdued"
             borderBlockStartWidth={
-              !isFirstOption && !polarisSummerEditions2023 ? '1' : undefined
+              !isFirstOption && !polarisSummerEditions2023 ? '025' : undefined
             }
           >
             <Text
diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
index 8571f75320c..0e5221df70d 100644
--- a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -60,7 +60,7 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-2));
+  @include focus-ring($border-width: var(--p-border-width-0165));
 }
 
 .Icon {
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
index d42091ce876..a3895451544 100644
--- a/polaris-react/src/components/OptionList/components/Option/Option.scss
+++ b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -12,7 +12,7 @@ $control-vertical-adjustment: 2px;
   min-height: $min-height;
   text-align: left;
   text-decoration: none;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   margin-top: var(--p-space-1);
   color: inherit;
 
@@ -44,7 +44,7 @@ $control-vertical-adjustment: 2px;
     #{$se23} & {
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
       background-color: var(--p-color-bg-subdued-hover);
@@ -97,14 +97,14 @@ $control-vertical-adjustment: 2px;
   align-items: flex-start;
   width: 100%;
   cursor: pointer;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: var(--p-space-2);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
 
   &:hover:not(.disabled) {
     background: var(--p-color-bg-hover);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
 
     #{$se23} & {
       background-color: var(--p-color-bg-subdued-hover);
@@ -112,7 +112,7 @@ $control-vertical-adjustment: 2px;
   }
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: var(--p-space-1_5-experimental);
 
     &:active:not(.disabled) {
@@ -140,7 +140,7 @@ $control-vertical-adjustment: 2px;
   &.select:hover:not(.disabled),
   &:active:not(.disabled) {
     background: var(--p-color-bg-interactive-selected);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
   }
 
   &.disabled {
diff --git a/polaris-react/src/components/Page/Page.scss b/polaris-react/src/components/Page/Page.scss
index ff792519ad9..3626933930b 100644
--- a/polaris-react/src/components/Page/Page.scss
+++ b/polaris-react/src/components/Page/Page.scss
@@ -42,7 +42,7 @@ body {
 }
 
 .divider {
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-8);
 
   #{$se23} & {
diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
index a5d4ec19316..b48ad0b7c68 100644
--- a/polaris-react/src/components/Page/components/Header/Header.scss
+++ b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -21,7 +21,7 @@ $action-menu-rollup-computed-width: 40px;
     a,
     button {
       background-color: transparent;
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
       box-shadow: none;
 
       /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
@@ -46,13 +46,13 @@ $action-menu-rollup-computed-width: 40px;
 
   button {
     // stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
+    border: var(--p-border-width-025) solid var(--p-color-border-strong) !important;
     box-shadow: none !important;
 
     &:hover,
     &:active,
     &:focus {
-      border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
+      border: var(--p-border-width-025) solid var(--p-color-border-strong) !important;
       // stylelint-enable declaration-no-important
     }
   }
diff --git a/polaris-react/src/components/PageActions/PageActions.scss b/polaris-react/src/components/PageActions/PageActions.scss
index d66cdf228ce..1706df82233 100644
--- a/polaris-react/src/components/PageActions/PageActions.scss
+++ b/polaris-react/src/components/PageActions/PageActions.scss
@@ -3,7 +3,7 @@
 .PageActions {
   margin: 0 auto;
   padding: var(--p-space-5);
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     border-top: 0;
diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
index 7202f68c781..dbcafe62444 100644
--- a/polaris-react/src/components/Popover/Popover.scss
+++ b/polaris-react/src/components/Popover/Popover.scss
@@ -10,13 +10,13 @@ $vertical-motion-offset: -5px;
   max-width: calc(100vw - var(--p-space-8));
   margin: $visible-portion-of-arrow var(--p-space-2) var(--p-space-4);
   box-shadow: var(--p-shadow-xl);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   will-change: left, top;
 
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-md),
-      $borderRadius: var(--p-border-radius-3),
+      $borderRadius: var(--p-border-radius-300),
       $zIndex: 2
     );
   }
@@ -80,7 +80,7 @@ $vertical-motion-offset: -5px;
   position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   max-width: $content-max-width;
   max-height: $content-max-height;
 
@@ -103,7 +103,7 @@ $vertical-motion-offset: -5px;
   max-width: 100%;
 
   + .Pane {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -130,7 +130,7 @@ $vertical-motion-offset: -5px;
 
 .Section {
   + .Section {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
   }
 }
 
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 8c51e39ab47..52e5a0dae6b 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -406,8 +406,8 @@ export function WithScrollableLazyLoadedList() {
                 width: polarisSummerEditions2023 ? '231px' : '310px',
                 height: polarisSummerEditions2023 ? '262px' : '292px',
                 padding: 'var(--p-space-2) 0',
-                borderBottomLeftRadius: 'var(--p-border-radius-2)',
-                borderBottomRightRadius: 'var(--p-border-radius-2)',
+                borderBottomLeftRadius: 'var(--p-border-radius-200)',
+                borderBottomRightRadius: 'var(--p-border-radius-200)',
               }}
               onScrolledToBottom={handleScrolledToBottom}
             >
@@ -756,8 +756,8 @@ export function WithSearchableListbox() {
                 width: '310px',
                 height: polarisSummerEditions2023 ? '262px' : '292px',
                 padding: 'var(--p-space-2) 0',
-                borderBottomLeftRadius: 'var(--p-border-radius-2)',
-                borderBottomRightRadius: 'var(--p-border-radius-2)',
+                borderBottomLeftRadius: 'var(--p-border-radius-200)',
+                borderBottomRightRadius: 'var(--p-border-radius-200)',
               }}
               onScrolledToBottom={handleLazyLoadSegments}
             >
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 5cba6b24586..5f4d68eddf7 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -18,10 +18,10 @@
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   background-color: var(--pc-progress-bar-background);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
   }
 }
 
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
index 84cba115c10..c687303d36d 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.scss
+++ b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -17,7 +17,7 @@
     #{$se23} & {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 radio overrides */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -73,7 +73,7 @@
     .ChoiceLabel:active & {
       #{$se23} & {
         border-color: var(--p-color-bg-primary);
-        border-width: var(--p-border-width-2);
+        border-width: var(--p-border-width-050);
       }
     }
   }
@@ -112,7 +112,7 @@
 
 .Backdrop {
   #{$se23} & {
-    border-width: var(--p-border-width-1-experimental);
+    border-width: var(--p-border-width-0165);
     background-color: var(--p-color-bg-input);
     transition: border-color var(--p-motion-duration-100)
       var(--p-motion-ease-out);
@@ -137,7 +137,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-2) solid var(--p-color-border-input);
+  border: var(--p-border-width-050) solid var(--p-color-border-input);
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-bg);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease);
@@ -165,7 +165,7 @@
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-2));
+  @include focus-ring($border-width: var(--p-border-width-0165));
 
   &::after {
     border-radius: var(--p-border-radius-full);
diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
index bc56bd9a160..dadaad285ee 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -107,7 +107,7 @@ export function WithBleed() {
       </VerticalStack>
       <VerticalStack gap="2">
         <Text as="h2">Bleed</Text>
-        <Box width="min-content" background="bg" borderRadius="3">
+        <Box width="min-content" background="bg" borderRadius="300">
           <div
             // Flex to shrink the container to the height of the radio (ie;
             // ignore line-height)
diff --git a/polaris-react/src/components/RangeSlider/RangeSlider.scss b/polaris-react/src/components/RangeSlider/RangeSlider.scss
index e5e564beaab..bfe31e6b9a7 100644
--- a/polaris-react/src/components/RangeSlider/RangeSlider.scss
+++ b/polaris-react/src/components/RangeSlider/RangeSlider.scss
@@ -4,7 +4,7 @@
   --pc-range-slider-output: 20;
   --pc-range-slider-track-height: 4px;
   --pc-range-slider-thumb-size: 16px;
-  --pc-track-dashed-border-radius: var(--p-border-radius-1);
+  --pc-track-dashed-border-radius: var(--p-border-radius-100);
   // stylelint-enable
 }
 
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index cbae4c74a16..0dd07875d1c 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -93,7 +93,7 @@ $range-wrapper: 28px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-range-slider-thumb-size);
   border-radius: var(--p-border-radius-full);
-  border: var(--p-border-width-1) solid var(--p-color-border-interactive);
+  border: var(--p-border-width-025) solid var(--p-color-border-interactive);
   background: linear-gradient(
     var(--p-color-bg-interactive),
     var(--p-color-bg-interactive)
@@ -173,7 +173,7 @@ $range-output-size: 32px;
   height: $range-output-size;
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-xl);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   transition-property: transform;
   transition-duration: var(--p-motion-duration-150);
   transition-timing-function: var(--p-motion-ease);
diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index 9c768228a56..56694a26138 100644
--- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -3,7 +3,7 @@
 
 @mixin range-track-selectors {
   &::-ms-track {
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
     @content;
   }
 
@@ -152,7 +152,7 @@
     width: var(--pc-range-slider-thumb-size);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     height: var(--pc-range-slider-thumb-size);
-    border: var(--p-border-width-1) solid transparent;
+    border: var(--p-border-width-025) solid transparent;
     border-radius: var(--p-border-radius-full);
     background: linear-gradient(
       var(--p-color-bg-interactive),
@@ -200,11 +200,11 @@
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   &:focus {
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include range-thumb-selectors {
       border-color: var(--p-color-bg);
-      box-shadow: 0 0 0 var(--p-border-width-2)
+      box-shadow: 0 0 0 var(--p-border-width-050)
         var(--p-color-border-interactive-focus);
     }
   }
@@ -283,11 +283,11 @@ $range-output-translate-x: calc(
   min-width: $range-output-size;
   height: $range-output-size;
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   transition-property: transform;
   transition-duration: var(--p-motion-duration-200);
   transition-timing-function: var(--p-motion-ease);
-  outline: var(--p-border-width-1) solid transparent;
+  outline: var(--p-border-width-025) solid transparent;
 
   // stylelint-disable selector-max-specificity, selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY
   .Input:hover + .Output &,
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 695df73e291..7266afc0539 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -123,7 +123,7 @@
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       @include item-separator;
@@ -133,21 +133,21 @@
   &:not(.hasBulkActions):not(.selectMode) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     &::after {
-      border-radius: var(--p-border-radius-05);
+      border-radius: var(--p-border-radius-050);
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     &:last-of-type {
-      border-bottom-left-radius: var(--p-border-radius-2);
-      border-bottom-right-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-200);
       // stylelint-disable selector-max-specificity -- Needed due to the nesting of the elements that change border-radius based on selection mode
       .ItemWrapper {
         border-radius: inherit;
       }
 
       &.focused::after {
-        border-bottom-left-radius: var(--p-border-radius-2);
-        border-bottom-right-radius: var(--p-border-radius-2);
+        border-bottom-left-radius: var(--p-border-radius-200);
+        border-bottom-right-radius: var(--p-border-radius-200);
       }
       // stylelint-enable
     }
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index e1279697129..32010d056f6 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -31,7 +31,7 @@ $item-wrapper-loading-height: 64px;
   }
 
   + .ResourceList {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -45,8 +45,8 @@ $item-wrapper-loading-height: 64px;
   background-color: var(--p-color-bg);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: resource-list(header-outer-wrapper-stacking-order);
-  border-top-left-radius: var(--p-border-radius-2);
-  border-top-right-radius: var(--p-border-radius-2);
+  border-top-left-radius: var(--p-border-radius-200);
+  border-top-right-radius: var(--p-border-radius-200);
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- Ssshhhhh
   + .ResourceList,
@@ -54,7 +54,7 @@ $item-wrapper-loading-height: 64px;
   // list dynamically when an item is checked, so we have to handle that case
   // here.
   + .BulkActionsWrapper + .ResourceList {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -87,7 +87,7 @@ $item-wrapper-loading-height: 64px;
   min-height: resource-list(header-min-height);
   padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-5);
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   #{$se23} & {
     // This container conditionally includes a Select component for sorting
     // It's 32px above md-up and 36px below
@@ -308,7 +308,7 @@ $item-wrapper-loading-height: 64px;
   max-width: 100%;
 
   + .ItemWrapper {
-    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
diff --git a/polaris-react/src/components/ResourceList/_variables.scss b/polaris-react/src/components/ResourceList/_variables.scss
index 7f5d128d9c7..8d76db39e95 100644
--- a/polaris-react/src/components/ResourceList/_variables.scss
+++ b/polaris-react/src/components/ResourceList/_variables.scss
@@ -19,5 +19,5 @@ $resource-list-variables: (
 }
 
 @mixin item-separator {
-  border-top: var(--p-border-width-1) solid var(--p-color-border);
+  border-top: var(--p-border-width-025) solid var(--p-color-border);
 }
diff --git a/polaris-react/src/components/Scrollable/Scrollable.scss b/polaris-react/src/components/Scrollable/Scrollable.scss
index 4b94121e198..6323726f70f 100644
--- a/polaris-react/src/components/Scrollable/Scrollable.scss
+++ b/polaris-react/src/components/Scrollable/Scrollable.scss
@@ -23,7 +23,7 @@
   isolation: isolate;
 
   &:focus {
-    outline: var(--p-border-width-2) solid
+    outline: var(--p-border-width-050) solid
       var(--p-color-border-interactive-focus);
     outline-offset: var(--p-space-05);
   }
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
index e56f03b3977..099a4a8868a 100644
--- a/polaris-react/src/components/Select/Select.scss
+++ b/polaris-react/src/components/Select/Select.scss
@@ -161,8 +161,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
-  border-radius: var(--p-border-radius-1);
+  border: var(--p-border-width-025) solid var(--p-color-border-input);
+  border-radius: var(--p-border-radius-100);
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-sm);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -172,8 +172,8 @@
 
   #{$se23} & {
     background-color: var(--p-color-bg-input);
-    border-radius: var(--p-border-radius-2);
-    border-width: var(--p-border-width-1-experimental);
+    border-radius: var(--p-border-radius-200);
+    border-width: var(--p-border-width-0165);
     box-shadow: none;
   }
 }
@@ -204,7 +204,7 @@
 
     #{$se23} & {
       border-color: var(--p-color-border-critical-strong-experimental);
-      border-width: var(--p-border-width-2-experimental);
+      border-width: var(--p-border-width-025);
       background-color: var(--p-color-bg-critical-subdued);
     }
   }
@@ -217,11 +217,11 @@
 
     #{$se23} & {
       border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-2-experimental);
+      border-width: var(--p-border-width-025);
       background-color: var(--p-color-bg-input-active-experimental);
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
index bbec571a8ec..bf486c6f879 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
@@ -35,13 +35,13 @@ export function Default() {
 
   return (
     <VerticalStack gap="5">
-      <ShadowBevel boxShadow="md" borderRadius="3">
+      <ShadowBevel boxShadow="md" borderRadius="300">
         <Box background="bg" padding="4">
           Default
         </Box>
       </ShadowBevel>
 
-      <ShadowBevel boxShadow="md" borderRadius="3" bevel={false}>
+      <ShadowBevel boxShadow="md" borderRadius="300" bevel={false}>
         <Box background="bg" padding="4">
           With <InlineCode>bevel: false</InlineCode>
         </Box>
@@ -49,7 +49,7 @@ export function Default() {
 
       <ShadowBevel
         boxShadow="md"
-        borderRadius="3"
+        borderRadius="300"
         bevel={{xs: false, sm: true}}
       >
         <Box background="bg" padding="4">
@@ -59,7 +59,7 @@ export function Default() {
 
       <ShadowBevel
         boxShadow="md"
-        borderRadius="3"
+        borderRadius="300"
         bevel={{xs: false, sm: true, lg: false}}
       >
         <Box background="bg" padding="4">
@@ -68,7 +68,7 @@ export function Default() {
         </Box>
       </ShadowBevel>
 
-      <ShadowBevel as="article" boxShadow="md" borderRadius="3">
+      <ShadowBevel as="article" boxShadow="md" borderRadius="300">
         <Box background="bg" padding="4">
           With <InlineCode>as: article</InlineCode>
         </Box>
@@ -79,7 +79,7 @@ export function Default() {
           <ShadowBevel
             key={`${background}-${color}`}
             boxShadow="md"
-            borderRadius="3"
+            borderRadius="300"
           >
             <Box background={background} color={color} padding="4">
               {background}
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
index c84e409497a..97aed7b826e 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
@@ -67,7 +67,7 @@ export function ShadowBevel(props: ShadowBevelProps) {
           mapResponsiveProp(bevel, (bevel) =>
             bevel
               ? `var(--p-border-radius-${borderRadius})`
-              : 'var(--p-border-radius-0-experimental)',
+              : 'var(--p-border-radius-0)',
           ),
         ),
       }}
diff --git a/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx b/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
index 6773ea966c2..4f4a5443aa2 100644
--- a/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
+++ b/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
@@ -6,7 +6,7 @@ import {ShadowBevel} from '..';
 describe('ShadowBevel', () => {
   it('renders children', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="3">
+      <ShadowBevel boxShadow="md" borderRadius="300">
         <p>hello</p>
         <p>world</p>
       </ShadowBevel>,
@@ -17,14 +17,13 @@ describe('ShadowBevel', () => {
 
   it('disables bevel effect', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="3" bevel={false} />,
+      <ShadowBevel boxShadow="md" borderRadius="300" bevel={false} />,
     );
 
     expect(shadowBevel).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-shadow-bevel-box-shadow-xs': 'none',
-        '--pc-shadow-bevel-border-radius-xs':
-          'var(--p-border-radius-0-experimental)',
+        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-0)',
         '--pc-shadow-bevel-content-xs': 'none',
       }),
     });
@@ -32,13 +31,13 @@ describe('ShadowBevel', () => {
 
   it('sets boxShadow and borderRadius props as inline styles', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="3" />,
+      <ShadowBevel boxShadow="md" borderRadius="300" />,
     );
 
     expect(shadowBevel).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-shadow-bevel-box-shadow-xs': 'var(--p-shadow-md)',
-        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-3)',
+        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-300)',
         '--pc-shadow-bevel-content-xs': '""',
       }),
     });
@@ -48,7 +47,7 @@ describe('ShadowBevel', () => {
     const shadowBevel = mountWithApp(
       <ShadowBevel
         boxShadow="md"
-        borderRadius="3"
+        borderRadius="300"
         bevel={{xs: false, sm: true, lg: false}}
       />,
     );
@@ -58,11 +57,9 @@ describe('ShadowBevel', () => {
         '--pc-shadow-bevel-box-shadow-xs': 'none',
         '--pc-shadow-bevel-box-shadow-sm': 'var(--p-shadow-md)',
         '--pc-shadow-bevel-box-shadow-lg': 'none',
-        '--pc-shadow-bevel-border-radius-xs':
-          'var(--p-border-radius-0-experimental)',
-        '--pc-shadow-bevel-border-radius-sm': 'var(--p-border-radius-3)',
-        '--pc-shadow-bevel-border-radius-lg':
-          'var(--p-border-radius-0-experimental)',
+        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-0)',
+        '--pc-shadow-bevel-border-radius-sm': 'var(--p-border-radius-300)',
+        '--pc-shadow-bevel-border-radius-lg': 'var(--p-border-radius-0)',
         '--pc-shadow-bevel-content-xs': 'none',
         '--pc-shadow-bevel-content-sm': '""',
         '--pc-shadow-bevel-content-lg': 'none',
@@ -72,7 +69,7 @@ describe('ShadowBevel', () => {
 
   it('sets as prop to the root element', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel as="article" boxShadow="md" borderRadius="3" />,
+      <ShadowBevel as="article" boxShadow="md" borderRadius="300" />,
     );
 
     expect(shadowBevel).toContainReactComponent('article');
diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
index b45d7a90abf..615ee29ed53 100644
--- a/polaris-react/src/components/Sheet/Sheet.scss
+++ b/polaris-react/src/components/Sheet/Sheet.scss
@@ -11,7 +11,7 @@ $sheet-desktop-width: 380px;
   box-shadow: var(--p-shadow-2xl);
 
   @media screen and (-ms-high-contrast: active) {
-    border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
   }
 
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
index 560ca0ebf55..35c2064484e 100644
--- a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
+++ b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
@@ -10,7 +10,7 @@ $body-text-last-line-width: 80%;
   height: var(--p-space-2);
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   @media screen and (-ms-high-contrast: active) {
     background-color: grayText;
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
index c4259765816..9ae0d266fd1 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
@@ -21,7 +21,7 @@ $skeleton-display-text-max-width: 120px;
 
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   @media screen and (-ms-high-contrast: active) {
     background-color: grayText;
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 8fec2c10216..0e0e78d6825 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -40,7 +40,7 @@ export function SkeletonPage({
         background="bg-strong"
         minWidth="120px"
         minHeight="28px"
-        borderRadius="1"
+        borderRadius="100"
       />
     </div>
   );
@@ -48,7 +48,7 @@ export function SkeletonPage({
   const primaryActionMarkup = primaryAction ? (
     <Box
       id="SkeletonPage-PrimaryAction"
-      borderRadius="1"
+      borderRadius="100"
       background="bg-strong"
       minHeight="2.25rem"
       minWidth="6.25rem"
@@ -57,7 +57,7 @@ export function SkeletonPage({
 
   const backActionMarkup = backAction ? (
     <Box
-      borderRadius="1"
+      borderRadius="100"
       background="bg-strong"
       minHeight="2.25rem"
       minWidth="2.25rem"
diff --git a/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss b/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
index 190d912a2a7..34193f1a3ec 100644
--- a/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
+++ b/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
@@ -1,7 +1,7 @@
 .Tabs {
   display: flex;
   width: 100%;
-  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
 
 .Tab {
@@ -19,8 +19,8 @@
     left: var(--p-space-3);
     right: var(--p-space-3);
     height: var(--p-border-width-3);
-    border-top-left-radius: var(--p-border-radius-1);
-    border-top-right-radius: var(--p-border-radius-1);
+    border-top-left-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-100);
   }
 }
 
diff --git a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
index 4b63b4acdf6..a39b270ecda 100644
--- a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
+++ b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
@@ -9,14 +9,14 @@
   // stylelint-enable
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
     // stylelint-disable -- Polaris component custom properties, se23 temporary styles
     --pc-skeleton-thumbnail-extra-small-size: 40px;
     --pc-skeleton-thumbnail-small-size: 48px;
     // stylelint-enable
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 
   @media screen and (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
index dd94922fdb2..b6c6c455306 100644
--- a/polaris-react/src/components/Tabs/Tabs.scss
+++ b/polaris-react/src/components/Tabs/Tabs.scss
@@ -75,7 +75,7 @@
   height: var(--p-space-8);
   padding: 0 var(--p-space-3);
   border: 0;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   background: var(--p-color-bg);
   color: var(--p-color-text-subdued);
   cursor: pointer;
@@ -125,7 +125,7 @@
     @include focus-ring($size: 'wide');
     color: var(--p-color-text-primary);
     background-color: transparent;
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
     height: 2rem;
 
@@ -182,7 +182,7 @@
   #{$se23} & {
     background: var(--p-color-bg-transparent-active-experimental);
     color: var(--p-color-text);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     &[aria-disabled='true'] {
       background: var(--p-color-bg-disabled);
@@ -257,7 +257,7 @@
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: inherit;
 
   &::-moz-focus-inner {
@@ -304,7 +304,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   margin-top: var(--p-space-025);
   border: none;
@@ -343,7 +343,7 @@
   #{$se23} & {
     background-color: transparent;
     color: var(--p-color-text-primary);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line selector-max-combinators -- Polaris component experimental styles
     svg {
diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss
index 399647a833e..617105a116c 100644
--- a/polaris-react/src/components/Tag/Tag.scss
+++ b/polaris-react/src/components/Tag/Tag.scss
@@ -10,7 +10,7 @@ $button-size: 20px;
   min-height: 28px;
   padding: 0 var(--p-space-2);
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
 
   &.disabled {
@@ -29,7 +29,7 @@ $button-size: 20px;
     cursor: pointer;
     padding: var(--p-space-1) var(--p-space-2);
     background-color: var(--p-color-bg-strong);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     font-size: 13px;
     line-height: var(--p-font-line-height-2);
@@ -58,7 +58,7 @@ $button-size: 20px;
       color: var(--p-color-text-disabled);
 
       #{$se23} & {
-        border: var(--p-border-width-1) solid var(--p-color-border-strong);
+        border: var(--p-border-width-025) solid var(--p-color-border-strong);
       }
     }
 
@@ -103,7 +103,7 @@ $button-size: 20px;
 
   #{$se23} & {
     min-height: $height;
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding-inline: calc(var(--p-space-1) + var(--p-space-05));
 
     &.removable {
@@ -158,7 +158,7 @@ $button-size: 20px;
 
   &:hover {
     background: var(--p-color-bg-strong-hover);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -216,7 +216,7 @@ $button-size: 20px;
   display: inline-grid;
   color: var(--p-color-text);
   outline: none;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   text-decoration: none;
   min-height: $height;
   padding: 0 var(--p-space-2);
@@ -268,7 +268,7 @@ $button-size: 20px;
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
     @include focus-ring('wide');
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     padding: 0;
 
     &:active {
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index 7bd770b94a8..79e964e7269 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -81,12 +81,12 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-2-experimental);
+      border-width: var(--p-border-width-025);
       background-color: var(--p-color-bg-input-active-experimental);
 
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -104,7 +104,7 @@ $spinner-icon-size: 12px;
     // stylelint-disable-next-line -- se23
     .Input:active ~ .Backdrop,
     .Input:focus-visible ~ .Backdrop {
-      border-width: var(--p-border-width-2-experimental);
+      border-width: var(--p-border-width-025);
     }
   }
 
@@ -190,7 +190,7 @@ $spinner-icon-size: 12px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: control-vertical-padding() var(--p-space-3);
   background: none;
-  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-025) solid transparent;
   font-family: var(--p-font-family-sans);
   appearance: none;
   caret-color: var(--p-color-text);
@@ -250,7 +250,7 @@ $spinner-icon-size: 12px;
   }
 
   &:-webkit-autofill {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
   }
 
   &.suggestion {
@@ -306,15 +306,15 @@ $spinner-icon-size: 12px;
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg);
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
+  border: var(--p-border-width-025) solid var(--p-color-border-input);
   // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
   border-top-color: #898f94;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   pointer-events: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-    border-width: var(--p-border-width-1-experimental);
+    border-radius: var(--p-border-radius-200);
+    border-width: var(--p-border-width-0165);
     background-color: var(--p-color-bg-input);
   }
 }
@@ -356,7 +356,7 @@ $spinner-icon-size: 12px;
   padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2);
   max-height: 140px;
   overflow: scroll;
-  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-025) solid transparent;
   width: 100%;
 
   > .Input {
@@ -417,7 +417,7 @@ $spinner-icon-size: 12px;
 
 .Spinner {
   // stylelint-disable -- Polaris component custom properties
-  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-1));
+  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-025));
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
@@ -486,7 +486,7 @@ $spinner-icon-size: 12px;
 
 .Segment {
   // stylelint-disable -- Polaris component custom properties
-  --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-1) - 2px);
+  --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-100) - 2px);
   // stylelint-enable
   background: var(--p-color-bg-strong);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -499,7 +499,7 @@ $spinner-icon-size: 12px;
   border: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     &:hover {
       background: var(--p-color-bg-strong-hover);
diff --git a/polaris-react/src/components/Thumbnail/Thumbnail.scss b/polaris-react/src/components/Thumbnail/Thumbnail.scss
index 814ecff654f..c4496c0cd9e 100644
--- a/polaris-react/src/components/Thumbnail/Thumbnail.scss
+++ b/polaris-react/src/components/Thumbnail/Thumbnail.scss
@@ -14,11 +14,11 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: var(--pc-thumbnail-extra-small-size);
   max-width: 100%;
-  border-radius: var(--p-border-radius-1);
-  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-radius: var(--p-border-radius-100);
+  border: var(--p-border-width-025) solid var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     border: none;
 
     &::after {
@@ -28,13 +28,13 @@
       right: 0;
       bottom: 0;
       position: absolute;
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
       box-shadow: var(--p-shadow-border-inset-experimental);
     }
 
     &.sizeExtraSmall,
     &.sizeExtraSmall::after {
-      border-radius: var(--p-border-radius-1_5-experimental);
+      border-radius: var(--p-border-radius-150);
     }
 
     &::before {
diff --git a/polaris-react/src/components/Tooltip/Tooltip.scss b/polaris-react/src/components/Tooltip/Tooltip.scss
index b05a314bdb0..eda433abd38 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.scss
+++ b/polaris-react/src/components/Tooltip/Tooltip.scss
@@ -3,5 +3,5 @@
 }
 
 .HasUnderline {
-  border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 0c52c4229e5..159d76fd702 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -205,7 +205,7 @@ export function BorderRadius() {
         <Tooltip
           active
           content="This content has a border radius of 2 (radius-2)"
-          borderRadius="2"
+          borderRadius="200"
         >
           <HorizontalStack gap="1">
             <Text variant="bodyLg" fontWeight="medium" as="span">
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index 29d4fc63fed..e90d178dbef 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -14,7 +14,10 @@ import styles from './Tooltip.scss';
 
 export type Width = 'default' | 'wide';
 export type Padding = 'default' | Extract<SpaceScale, '4'>;
-export type BorderRadius = Extract<BorderRadiusScale, '1' | '2'>;
+export type BorderRadius = Extract<
+  BorderRadiusScale,
+  '1' | '2' | '100' | '200'
+>;
 
 export interface TooltipProps {
   /** The element that will activate to tooltip */
@@ -88,7 +91,7 @@ export function Tooltip({
 }: TooltipProps) {
   const {polarisSummerEditions2023} = useFeatures();
   const borderRadius =
-    borderRadiusProp || (polarisSummerEditions2023 ? '2' : '1');
+    borderRadiusProp || (polarisSummerEditions2023 ? '200' : '100');
 
   const WrapperComponent: any = activatorWrapper;
   const {
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 397efb0e74d..8d58750b87b 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -34,7 +34,7 @@
   }
 
   @media screen and (-ms-high-contrast: active) {
-    border: var(--p-border-width-2) solid windowText;
+    border: var(--p-border-width-050) solid windowText;
   }
 
   &::after {
diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
index 0207a133670..70fa6ff530f 100644
--- a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
+++ b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -366,14 +366,14 @@ describe('<Tooltip />', () => {
 
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-2)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-200)',
         }) as React.CSSProperties,
       });
     });
 
     it('renders content with a border radius of 2 when declared', () => {
       const tooltip = mountWithApp(
-        <Tooltip content="Inner content" borderRadius="2">
+        <Tooltip content="Inner content" borderRadius="200">
           <Link>link content</Link>
         </Tooltip>,
       );
@@ -381,7 +381,7 @@ describe('<Tooltip />', () => {
       findWrapperComponent(tooltip)!.trigger('onMouseOver');
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-2)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-200)',
         }) as React.CSSProperties,
       });
     });
@@ -525,7 +525,7 @@ describe('<Tooltip />', () => {
 
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-1)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-100)',
         }) as React.CSSProperties,
       });
     });
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index da8fe99acc3..29a66f1a0d8 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -38,7 +38,7 @@ $right-column: 1fr;
     position: absolute;
     bottom: 0;
     width: 100%;
-    border-bottom: var(--p-border-width-1) solid transparent;
+    border-bottom: var(--p-border-width-025) solid transparent;
   }
 }
 
@@ -83,10 +83,10 @@ $right-column: 1fr;
 
   #{$se23} & {
     &:focus-visible {
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-1_5-experimental);
-      border-radius: var(--p-border-radius-2);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
@@ -111,7 +111,7 @@ $right-column: 1fr;
   margin-left: calc(var(--p-space-2) + var(--p-space-05));
   margin-right: var(--p-space-2);
   padding: var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   fill: var(--p-color-icon); // Icon will inherit this fill
   transition: var(--p-motion-duration-150) fill var(--p-motion-ease)
     var(--p-motion-duration-50);
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index dd6890c577a..4bd4359cfbd 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -32,13 +32,13 @@ $activator-variables: (
   cursor: pointer;
   transition: background-color var(--p-motion-duration-100);
   margin-right: var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
     color: var(--p-color-text-inverse);
     padding: var(--p-space-1_5-experimental);
     background-color: var(--p-color-bg-inset-strong);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     min-width: auto;
     min-height: menu(min-height);
 
@@ -64,7 +64,7 @@ $activator-variables: (
     #{$se23} & {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
@@ -129,5 +129,5 @@ $activator-variables: (
 .Section {
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
index f27d74c82fc..634db9eb486 100644
--- a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
@@ -6,5 +6,5 @@ $section-max-width: 325px;
   max-width: $section-max-width;
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);
-  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
index ba9119c2a55..f25b69f3413 100644
--- a/polaris-react/src/components/TopBar/components/Search/Search.scss
+++ b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -17,7 +17,7 @@
     top: 100%;
     max-width: $search-max-width;
     margin: var(--p-space-1) var(--p-space-5) 0;
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index eb935cc37f8..20575734e8c 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -21,7 +21,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  border: var(--p-border-width-1) solid transparent;
+  border: var(--p-border-width-025) solid transparent;
   width: 100%;
 }
 // We have both a focused class and a focus pseudo selector here
@@ -55,7 +55,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
   ~ .BackdropShowFocusBorder {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
+    border: var(--p-border-width-025) solid var(--pc-top-bar-border);
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -72,7 +72,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   #{$se23} & {
     // stylelint-disable-next-line -- se23
     ~ .Backdrop {
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
@@ -87,7 +87,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 .focused {
   .BackdropShowFocusBorder {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
+    border: var(--p-border-width-025) solid var(--pc-top-bar-border);
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -120,9 +120,8 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
     color: var(--p-color-text-inverse-subdued);
     height: $new-input-height-se23;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-2);
+    border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-200);
 
     &:hover {
       border-color: var(--p-color-border-hover);
@@ -130,7 +129,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
     &:active,
     &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
+      box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
     }
   }
 
@@ -239,12 +238,12 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-inset);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 overrides */
     @include no-focus-ring;
     background-color: var(--p-color-bg-inset-strong);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 }
diff --git a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
index abbd6e50de8..f688fac43a4 100644
--- a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
+++ b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
@@ -66,7 +66,7 @@ $progress-bar-height: 6px;
   padding: var(--p-space-1) var(--p-space-2) var(--p-space-1) var(--p-space-1);
   margin-bottom: var(--p-space-4);
   margin-left: var(--p-space-4);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: var(--p-color-text-on-color);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   background-color: rgba(0, 0, 0, 0.6);
@@ -76,7 +76,7 @@ $progress-bar-height: 6px;
 
   #{$se23} & {
     background-color: var(--p-color-bg-backdrop-experimental);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
   }
 }
 
diff --git a/polaris-react/src/styles/foundation/_focus-ring.scss b/polaris-react/src/styles/foundation/_focus-ring.scss
index 0febde8b5cf..575910d7ce9 100644
--- a/polaris-react/src/styles/foundation/_focus-ring.scss
+++ b/polaris-react/src/styles/foundation/_focus-ring.scss
@@ -10,8 +10,8 @@
   $offset: if($border-width == 0, 1px, calc(#{$border-width} + 1px));
   $border-radius: if(
     $size == 'wide',
-    var(--p-border-radius-2),
-    var(--p-border-radius-1)
+    var(--p-border-radius-200),
+    var(--p-border-radius-100)
   );
   $negative-offset: calc(-1 * #{$offset});
 
@@ -40,7 +40,7 @@
   } @else if $style == 'focused' {
     &::after {
       box-shadow: 0 0 0 $stroke var(--p-color-border-interactive-focus);
-      outline: var(--p-border-width-1) solid transparent;
+      outline: var(--p-border-width-025) solid transparent;
       @content;
     }
   }
diff --git a/polaris-react/src/styles/shared/_buttons.scss b/polaris-react/src/styles/shared/_buttons.scss
index 016df7624bd..4d93739e638 100644
--- a/polaris-react/src/styles/shared/_buttons.scss
+++ b/polaris-react/src/styles/shared/_buttons.scss
@@ -4,7 +4,7 @@
   );
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-1));
+  @include focus-ring($border-width: var(--p-border-width-025));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -15,9 +15,9 @@
   padding: $vertical-padding var(--p-space-4);
   background: var(--p-color-bg);
   box-shadow: var(--p-shadow-sm);
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
-  border: var(--p-border-width-1) solid var(--p-color-border-strong);
+  border: var(--p-border-width-025) solid var(--p-color-border-strong);
   line-height: 1;
   text-align: center;
   cursor: pointer;
@@ -29,7 +29,7 @@
     min-height: 28px;
     min-width: 28px;
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
-    border-radius: var(--p-border-radius-2);
+    border-radius: var(--p-border-radius-200);
     border: none;
   }
 
@@ -39,7 +39,7 @@
 
   &:hover {
     background: var(--p-color-bg-hover);
-    outline: var(--p-border-width-1) solid transparent;
+    outline: var(--p-border-width-025) solid transparent;
   }
 
   &:focus-visible {
@@ -51,7 +51,7 @@
     #{$se23} & {
       // stylelint-disable-next-line -- se23 temporary styles
       @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
+      outline: var(--p-border-width-050) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -92,7 +92,7 @@
   }
 
   @media (-ms-high-contrast: active) {
-    border: var(--p-border-width-1) solid windowText;
+    border: var(--p-border-width-025) solid windowText;
   }
 }
 
@@ -118,7 +118,7 @@
   padding: var(--p-space-05) var(--p-space-1);
   margin: calc(-1 * var(--p-space-05)) calc(-1 * var(--p-space-1));
   background: transparent;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-100);
 }
 
 @mixin unstyled-button() {
diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
index c939a14cfa8..c2a8c485e47 100644
--- a/polaris-react/src/styles/shared/_controls.scss
+++ b/polaris-react/src/styles/shared/_controls.scss
@@ -9,18 +9,18 @@
 @mixin control-backdrop($style: base) {
   @if $style == base {
     position: relative;
-    border: var(--p-border-width-2) solid var(--p-color-border-input);
+    border: var(--p-border-width-050) solid var(--p-color-border-input);
     background-color: var(--p-color-bg);
-    border-radius: var(--p-border-radius-1);
+    border-radius: var(--p-border-radius-100);
 
     &::before {
       content: '';
       position: absolute;
-      top: calc(-1 * var(--p-border-width-2));
-      right: calc(-1 * var(--p-border-width-2));
-      bottom: calc(-1 * var(--p-border-width-2));
-      left: calc(-1 * var(--p-border-width-2));
-      border-radius: var(--p-border-radius-1);
+      top: calc(-1 * var(--p-border-width-050));
+      right: calc(-1 * var(--p-border-width-050));
+      bottom: calc(-1 * var(--p-border-width-050));
+      left: calc(-1 * var(--p-border-width-050));
+      border-radius: var(--p-border-radius-100);
       background-color: var(--p-color-bg-interactive);
       opacity: 0;
       transform: scale(0.25);
@@ -44,7 +44,7 @@
       opacity: 1;
       transform: scale(1);
       @media (-ms-high-contrast: active) {
-        border: var(--p-border-width-2) solid windowText;
+        border: var(--p-border-width-050) solid windowText;
       }
     }
   } @else if $style == disabled {
diff --git a/polaris-react/src/styles/shared/_interaction-state.scss b/polaris-react/src/styles/shared/_interaction-state.scss
index 8645a473c84..75b07686ddc 100644
--- a/polaris-react/src/styles/shared/_interaction-state.scss
+++ b/polaris-react/src/styles/shared/_interaction-state.scss
@@ -7,6 +7,6 @@
   height: 100%;
   display: block;
   width: var(--p-border-width-3);
-  border-top-right-radius: var(--p-border-radius-1);
-  border-bottom-right-radius: var(--p-border-radius-1);
+  border-top-right-radius: var(--p-border-radius-100);
+  border-bottom-right-radius: var(--p-border-radius-100);
 }

From 9748b08383c4d11f93a0da72a0ef39a726c96e8b Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 21 Sep 2023 11:22:12 -0400
Subject: [PATCH 094/102] [polaris.shopify.com] Fix preview for color tokens
 (#10605)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Updates conditional logic to render token preview in TokenList for
tokens that don't use `rgba()` as the value.

### WHAT is this pull request doing?

Update logic to render token preview for color tokens with `rgba()` or
`--p-color` as the value.
    <details>
      <summary>Color tokens — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/a2442fa0-87e9-44a5-afe7-b6962089d879"
alt="Color tokens — before">
    </details>
    <details>
      <summary>Color tokens — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/98827dc6-1340-4c35-938e-16a671a0bad2"
alt="Color tokens — after">
    </details>

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
---
 .changeset/silly-years-search.md                           | 5 +++++
 polaris.shopify.com/src/components/TokenList/TokenList.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silly-years-search.md

diff --git a/.changeset/silly-years-search.md b/.changeset/silly-years-search.md
new file mode 100644
index 00000000000..013a6e4abe2
--- /dev/null
+++ b/.changeset/silly-years-search.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated logic for rendering `color` custom property previews in `TokenList`
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.tsx b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
index 65878bb082f..fdf435dbf71 100644
--- a/polaris.shopify.com/src/components/TokenList/TokenList.tsx
+++ b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
@@ -232,7 +232,7 @@ function TokenPreview({name, value}: TokenPreviewProps) {
   };
 
   // Colors
-  if (value.startsWith('rgba')) {
+  if (value.startsWith('rgba') || value.includes('color-')) {
     return (
       <div
         {...previewDivAttributes}

From 81c7f7ae4d3946741d22f3fdaf2ed50be77c3083 Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
Date: Thu, 21 Sep 2023 12:16:35 -0400
Subject: [PATCH 095/102] Fix incorrect manual border migration from #10596
 (#10608)

Thank you @lgriffee for catching these!
---
 polaris-react/src/components/Checkbox/Checkbox.scss             | 2 +-
 .../src/components/OptionList/components/Checkbox/Checkbox.scss | 2 +-
 polaris-react/src/components/RadioButton/RadioButton.scss       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
index 86528fe8110..dc574176e00 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -142,7 +142,7 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-0165));
+  @include focus-ring($border-width: var(--p-border-width-050));
 
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
index 0e5221df70d..f672fb06553 100644
--- a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -60,7 +60,7 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-0165));
+  @include focus-ring($border-width: var(--p-border-width-050));
 }
 
 .Icon {
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
index c687303d36d..7b2acb228ca 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.scss
+++ b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -165,7 +165,7 @@
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-0165));
+  @include focus-ring($border-width: var(--p-border-width-050));
 
   &::after {
     border-radius: var(--p-border-radius-full);

From ab9b3d354c94de95a6c92d5d714f37a181a1f6cd Mon Sep 17 00:00:00 2001
From: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
Date: Thu, 21 Sep 2023 15:37:00 -0400
Subject: [PATCH 096/102] Revert border migration (#10620)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need to merge the border migration after the PRs to `online-store-ui`
and `web`

Hence the giant warning the top of the PR that I somehow missed 😵‍💫


<img width="774" alt="Screenshot 2023-09-21 at 3 07 04 PM"
src="https://github.com/Shopify/polaris/assets/11774595/5113d5ff-261e-4717-99bc-e7ca8b01d5a5">
---
 .changeset/dirty-rabbits-sip.md               |  5 --
 .../src/components/ActionList/ActionList.scss | 14 ++---
 .../components/SearchField/SearchField.scss   | 17 +++---
 .../ActionList/components/Section/Section.tsx |  2 +-
 .../RollupActions/RollupActions.scss          |  8 +--
 .../SecondaryAction/SecondaryAction.scss      |  6 +-
 .../components/AppProvider/AppProvider.scss   |  2 +-
 .../components/MappedAction/MappedAction.scss |  8 +--
 .../src/components/Avatar/Avatar.scss         |  6 +-
 polaris-react/src/components/Badge/Badge.scss | 10 ++--
 .../components/Badge/components/Pip/Pip.scss  |  2 +-
 .../src/components/Banner/Banner.scss         | 22 ++++----
 .../BannerExperimental/BannerExperimental.tsx | 18 +++---
 .../src/components/Bleed/Bleed.stories.tsx    | 16 +++---
 .../src/components/Box/Box.stories.tsx        | 32 +++++------
 .../components/Breadcrumbs/Breadcrumbs.scss   |  8 +--
 .../components/BulkActions/BulkActions.scss   |  6 +-
 .../src/components/Button/Button.scss         | 56 +++++++++----------
 polaris-react/src/components/Card/Card.tsx    |  6 +-
 .../src/components/Card/tests/Card.test.tsx   |  4 +-
 .../CheckableButton/CheckableButton.scss      |  4 +-
 .../src/components/Checkbox/Checkbox.scss     | 13 +++--
 .../components/ColorPicker/ColorPicker.scss   | 14 ++---
 .../ColorPicker/ColorPicker.stories.tsx       |  4 +-
 .../src/components/DataTable/DataTable.scss   | 36 ++++++------
 .../src/components/DatePicker/DatePicker.scss | 24 ++++----
 .../DescriptionList/DescriptionList.scss      |  6 +-
 .../src/components/Divider/Divider.tsx        |  4 +-
 .../components/Divider/tests/Divider.test.tsx |  9 ++-
 .../src/components/DropZone/DropZone.scss     | 22 ++++----
 .../components/FileUpload/FileUpload.scss     |  4 +-
 .../src/components/Filters/Filters.scss       | 24 ++++----
 .../components/FilterPill/FilterPill.scss     | 14 ++---
 .../components/SearchField/SearchField.scss   |  9 ++-
 polaris-react/src/components/Frame/Frame.scss |  2 +-
 .../src/components/Frame/Frame.stories.tsx    |  2 +-
 .../ContextualSaveBar/ContextualSaveBar.scss  | 12 ++--
 .../Frame/components/Toast/Toast.scss         |  6 +-
 .../FullscreenBar/FullscreenBar.scss          |  2 +-
 .../components/IndexFilters/IndexFilters.scss |  2 +-
 .../components/Container/Container.scss       |  8 +--
 .../components/SortButton/SortButton.tsx      |  2 +-
 .../DirectionButton/DirectionButton.scss      |  4 +-
 .../src/components/IndexTable/IndexTable.scss | 34 +++++------
 .../src/components/InlineCode/InlineCode.scss |  2 +-
 .../components/KeyboardKey/KeyboardKey.scss   |  6 +-
 .../src/components/Layout/Layout.scss         |  4 +-
 .../src/components/LegacyCard/LegacyCard.scss | 34 +++++------
 .../LegacyFilters/LegacyFilters.scss          | 10 ++--
 .../ConnectedFilterControl.scss               | 44 +++++++--------
 .../src/components/LegacyTabs/LegacyTabs.scss |  8 +--
 .../src/components/LegacyTabs/LegacyTabs.tsx  |  2 +-
 polaris-react/src/components/Link/Link.scss   |  8 +--
 .../components/Listbox/Listbox.stories.tsx    |  4 +-
 .../Listbox/components/Option/Option.scss     |  2 +-
 .../Listbox/components/Section/Section.scss   |  2 +-
 .../components/TextOption/TextOption.scss     | 10 ++--
 .../src/components/MediaCard/MediaCard.scss   |  8 +--
 .../MessageIndicator/MessageIndicator.scss    |  2 +-
 .../components/CloseButton/CloseButton.scss   |  2 +-
 .../Modal/components/Dialog/Dialog.scss       |  6 +-
 .../Modal/components/Footer/Footer.tsx        |  2 +-
 .../Modal/components/Header/Header.tsx        |  2 +-
 .../Modal/components/Section/Section.scss     |  2 +-
 .../src/components/Navigation/Navigation.scss | 38 ++++++-------
 .../src/components/Navigation/_variables.scss |  4 +-
 .../src/components/OptionList/OptionList.tsx  |  2 +-
 .../components/Checkbox/Checkbox.scss         |  2 +-
 .../OptionList/components/Option/Option.scss  | 12 ++--
 polaris-react/src/components/Page/Page.scss   |  2 +-
 .../Page/components/Header/Header.scss        |  6 +-
 .../components/PageActions/PageActions.scss   |  2 +-
 .../src/components/Popover/Popover.scss       | 10 ++--
 .../components/Popover/Popover.stories.tsx    |  8 +--
 .../components/ProgressBar/ProgressBar.scss   |  4 +-
 .../components/RadioButton/RadioButton.scss   | 10 ++--
 .../RadioButton/RadioButton.stories.tsx       |  2 +-
 .../components/RangeSlider/RangeSlider.scss   |  2 +-
 .../components/DualThumb/DualThumb.scss       |  4 +-
 .../components/SingleThumb/SingleThumb.scss   | 12 ++--
 .../components/ResourceItem/ResourceItem.scss | 12 ++--
 .../components/ResourceList/ResourceList.scss | 12 ++--
 .../components/ResourceList/_variables.scss   |  2 +-
 .../src/components/Scrollable/Scrollable.scss |  2 +-
 .../src/components/Select/Select.scss         | 14 ++---
 .../ShadowBevel/ShadowBevel.stories.tsx       | 12 ++--
 .../components/ShadowBevel/ShadowBevel.tsx    |  2 +-
 .../ShadowBevel/tests/ShadowBevel.test.tsx    | 23 ++++----
 polaris-react/src/components/Sheet/Sheet.scss |  2 +-
 .../SkeletonBodyText/SkeletonBodyText.scss    |  2 +-
 .../SkeletonDisplayText.scss                  |  2 +-
 .../components/SkeletonPage/SkeletonPage.tsx  |  6 +-
 .../components/SkeletonTabs/SkeletonTabs.scss |  6 +-
 .../SkeletonThumbnail/SkeletonThumbnail.scss  |  4 +-
 polaris-react/src/components/Tabs/Tabs.scss   | 12 ++--
 polaris-react/src/components/Tag/Tag.scss     | 14 ++---
 .../src/components/TextField/TextField.scss   | 26 ++++-----
 .../src/components/Thumbnail/Thumbnail.scss   | 10 ++--
 .../src/components/Tooltip/Tooltip.scss       |  2 +-
 .../components/Tooltip/Tooltip.stories.tsx    |  2 +-
 .../src/components/Tooltip/Tooltip.tsx        |  7 +--
 .../TooltipOverlay/TooltipOverlay.scss        |  2 +-
 .../components/Tooltip/tests/Tooltip.test.tsx |  8 +--
 .../src/components/TopBar/TopBar.scss         |  8 +--
 .../TopBar/components/Menu/Menu.scss          |  8 +--
 .../Menu/components/Message/Message.scss      |  2 +-
 .../TopBar/components/Search/Search.scss      |  2 +-
 .../components/SearchField/SearchField.scss   | 19 ++++---
 .../VideoThumbnail/VideoThumbnail.scss        |  4 +-
 .../src/styles/foundation/_focus-ring.scss    |  6 +-
 polaris-react/src/styles/shared/_buttons.scss | 16 +++---
 .../src/styles/shared/_controls.scss          | 16 +++---
 .../src/styles/shared/_interaction-state.scss |  4 +-
 113 files changed, 524 insertions(+), 534 deletions(-)
 delete mode 100644 .changeset/dirty-rabbits-sip.md

diff --git a/.changeset/dirty-rabbits-sip.md b/.changeset/dirty-rabbits-sip.md
deleted file mode 100644
index 2fc8a21127d..00000000000
--- a/.changeset/dirty-rabbits-sip.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@shopify/polaris': patch
----
-
-Updated CSS custom properties and component props with safe mapping to new border design tokens for v12
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 0a764b9e0d3..b4023720a2a 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -26,8 +26,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
-  border-radius: var(--p-border-radius-100);
-  border-top: var(--p-border-width-025) solid transparent;
+  border-radius: var(--p-border-radius-1);
+  border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
 
   #{$se23} & {
@@ -36,13 +36,13 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
     --pc-action-list-item-min-height: var(--p-space-8);
     padding: var(--p-space-1_5-experimental);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     align-items: center;
     display: flex;
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
   }
 
   &:hover {
@@ -80,7 +80,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
       background-color: var(--p-color-bg);
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -186,7 +186,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
       top: calc(var(--p-space-3) * -1);
       bottom: 0;
       left: 0;
-      border-left: var(--p-border-width-025) solid var(--p-color-border);
+      border-left: var(--p-border-width-1) solid var(--p-color-border);
       margin-left: calc(var(--p-space-1_5-experimental) * -1);
     }
   }
@@ -207,7 +207,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   height: var(--pc-action-list-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-action-list-image-size);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
index eaab5198fe1..9fdbc0e82fe 100644
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -20,7 +20,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  border: var(--p-border-width-025) solid transparent;
+  border: var(--p-border-width-1) solid transparent;
   width: 100%;
 }
 // We have both a focused class and a focus pseudo selector here
@@ -54,7 +54,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     #{$se23} & {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -75,7 +75,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     ~ .Backdrop {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -107,8 +107,9 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
     color: var(--p-color-text-inverse-subdued);
     height: $new-input-height-se23;
-    border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-200);
+    border: var(--p-border-width-1-experimental) solid
+      var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-2);
 
     &:hover {
       border-color: var(--p-color-border-input-hover);
@@ -117,7 +118,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
     &:active,
     &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
+      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
     }
   }
 
@@ -226,10 +227,10 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-input);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   pointer-events: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 }
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index 6df0b9da481..d05c455f9bd 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -148,7 +148,7 @@ export function Section({
       as="li"
       role="presentation"
       borderColor="border-subdued"
-      {...(!isFirst && {borderBlockStartWidth: '025'})}
+      {...(!isFirst && {borderBlockStartWidth: '1'})}
       {...(!section.title && {
         paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
       })}
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
index dacc262033f..e6c9de01601 100644
--- a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
+++ b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -6,17 +6,17 @@
   // stylelint-disable-next-line selector-no-qualifying-type -- generated by polaris-migrator DO NOT COPY
   button[type='button'] {
     margin: 0;
-    border: var(--p-border-width-025) solid var(--p-color-border-strong);
+    border: var(--p-border-width-1) solid var(--p-color-border-strong);
     // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &:hover,
     &:active,
     &:focus {
-      border: var(--p-border-width-025) solid var(--p-color-border-strong);
+      border: var(--p-border-width-1) solid var(--p-color-border-strong);
     }
 
     #{$se23} & {
       background: var(--p-color-bg-strong);
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
       border: none;
       box-shadow: none;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
@@ -27,7 +27,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 button overrides */
         @include no-focus-ring;
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
         background: var(--p-color-bg-strong-active);
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 6c7a6af0f67..2bbbc803ef0 100644
--- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -10,7 +10,7 @@
     @include focus-ring($border-width: 1px);
     background: transparent !important;
     box-shadow: none !important;
-    border-radius: var(--p-border-radius-100) !important;
+    border-radius: var(--p-border-radius-1) !important;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding-left: var(--pc-secondary-action-button-spacing);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -61,7 +61,7 @@
       min-height: 28px;
       padding: var(--p-space-1) var(--p-space-3);
       background-color: var(--p-color-bg-strong) !important;
-      border-radius: var(--p-border-radius-200) !important;
+      border-radius: var(--p-border-radius-2) !important;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
         background-color: var(--p-color-bg-strong-hover) !important;
@@ -76,7 +76,7 @@
       &:focus:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
       }
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
index 46ca5a549c7..092a4835556 100644
--- a/polaris-react/src/components/AppProvider/AppProvider.scss
+++ b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -15,7 +15,7 @@
 #{$se23ShadowBevelOptOut} {
   // stylelint-disable -- Shadow bevel opt out custom properties
   --pc-app-provider-shadow-bevel-content: none;
-  --pc-app-provider-shadow-bevel-border: var(--p-border-width-025) solid
+  --pc-app-provider-shadow-bevel-border: var(--p-border-width-1) solid
     var(--p-color-border);
   // stylelint-enable
 }
diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
index 4ca547355b7..ec5475a6108 100644
--- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
+++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -49,10 +49,10 @@
   // stylelint-disable-next-line -- using pre-existing private pc token
   margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
     calc(-1 * var(--p-space-2));
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 overrides
     margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
       calc(-1 * var(--p-space-3));
@@ -63,7 +63,7 @@
     text-decoration: none;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-025) solid windowText;
+      outline: var(--p-border-width-1) solid windowText;
     }
   }
 
@@ -139,7 +139,7 @@
   height: var(--pc-mapped-actions-image-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-mapped-actions-image-size);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 12b932b2320..879774563ff 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -35,7 +35,7 @@
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
   }
 
   &::after {
@@ -59,12 +59,12 @@
   border-radius: var(--p-border-radius-full);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-050);
+    border-radius: var(--p-border-radius-05);
   }
 }
 
 .shapeSquare {
-  border-radius: var(--p-border-radius-050);
+  border-radius: var(--p-border-radius-05);
 
   .Text {
     font-size: var(--p-font-size-200);
diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
index 756bbf639be..3aa9d252f76 100644
--- a/polaris-react/src/components/Badge/Badge.scss
+++ b/polaris-react/src/components/Badge/Badge.scss
@@ -10,14 +10,14 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-500);
+  border-radius: var(--p-border-radius-5);
   color: var(--p-color-text);
 
   #{$se23} & {
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-medium);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -26,7 +26,7 @@
   }
 
   @media print {
-    border: solid var(--p-border-width-025) var(--p-color-border);
+    border: solid var(--p-border-width-1) var(--p-color-border);
   }
 }
 
@@ -192,7 +192,7 @@
     background-color: var(--p-color-bg-transparent-subdued-experimental);
     color: var(--p-color-text-subdued);
     font-weight: var(--p-font-weight-bold);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -247,7 +247,7 @@
 }
 
 .withinFilter {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 }
 
 .Icon {
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
index 251e882c188..1036c16967d 100644
--- a/polaris-react/src/components/Badge/components/Pip/Pip.scss
+++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -14,7 +14,7 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   width: var(--pc-pip-size);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border: var(--p-border-width-050) solid var(--pc-pip-color);
+  border: var(--p-border-width-2) solid var(--pc-pip-color);
   border-radius: var(--p-border-radius-full);
   flex-shrink: 0;
 
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index bfc1189d26f..94e46564e4b 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/polaris-react/src/components/Banner/Banner.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 @mixin banner-variants($in-page) {
-  border: var(--p-border-width-025) solid var(--p-color-border-strong);
+  border: var(--p-border-width-1) solid var(--p-color-border-strong);
   background-color: var(--p-color-bg-app);
 
   #{$se23} & {
@@ -11,12 +11,12 @@
 
   @if $in-page {
     border-radius: 0;
-    border-width: var(--p-border-width-025) 0;
+    border-width: var(--p-border-width-1) 0;
 
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: var(--p-shadow-sm),
-        $borderRadius: var(--p-border-radius-0),
+        $borderRadius: var(--p-border-radius-0-experimental),
         // The following arguments explicitly ignore the shadow-bevel opt out
         $border: none,
         $content: ''
@@ -24,13 +24,13 @@
     }
 
     @media #{$p-breakpoints-sm-up} {
-      border-width: var(--p-border-width-025);
-      border-radius: var(--p-border-radius-200);
+      border-width: var(--p-border-width-1);
+      border-radius: var(--p-border-radius-2);
 
       #{$se23} & {
         @include shadow-bevel(
           $boxShadow: var(--p-shadow-sm),
-          $borderRadius: var(--p-border-radius-300),
+          $borderRadius: var(--p-border-radius-3),
           // The following arguments explicitly ignore the shadow-bevel opt out
           $border: none,
           $content: ''
@@ -38,11 +38,11 @@
       }
     }
   } @else {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     #{$se23} & {
       box-shadow: none;
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 
@@ -51,7 +51,7 @@
   }
 
   &.keyFocused {
-    outline: var(--p-border-width-050) solid
+    outline: var(--p-border-width-2) solid
       var(--p-color-border-interactive-focus);
   }
 
@@ -193,7 +193,7 @@
 }
 
 .withinPage {
-  border-radius: 0 0 var(--p-border-radius-100) var(--p-border-radius-100);
+  border-radius: 0 0 var(--p-border-radius-1) var(--p-border-radius-1);
   padding: var(--p-space-5);
 
   #{$se23} & {
@@ -259,7 +259,7 @@
     text-decoration: underline;
 
     @media (-ms-high-contrast: active) {
-      outline: var(--p-border-width-050) dotted;
+      outline: var(--p-border-width-2) dotted;
     }
   }
 
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
index 8811879fb33..686ce490b8d 100644
--- a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
+++ b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.tsx
@@ -139,10 +139,10 @@ export function DefaultBanner({
         <Box
           background={backgroundColor}
           color={textColor}
-          borderRadiusStartStart={smUp ? '300' : undefined}
-          borderRadiusStartEnd={smUp ? '300' : undefined}
-          borderRadiusEndStart={!hasContent && smUp ? '300' : undefined}
-          borderRadiusEndEnd={!hasContent && smUp ? '300' : undefined}
+          borderRadiusStartStart={smUp ? '3' : undefined}
+          borderRadiusStartEnd={smUp ? '3' : undefined}
+          borderRadiusEndStart={!hasContent && smUp ? '3' : undefined}
+          borderRadiusEndEnd={!hasContent && smUp ? '3' : undefined}
           padding="3"
         >
           <HorizontalStack
@@ -198,7 +198,7 @@ export function InlineIconBanner({
   useEventListener('resize', handleResize);
 
   return (
-    <Box width="100%" padding="3" borderRadius="300">
+    <Box width="100%" padding="3" borderRadius="3">
       <HorizontalStack
         align="space-between"
         blockAlign={blockAlign}
@@ -208,11 +208,7 @@ export function InlineIconBanner({
           <HorizontalStack gap="2" wrap={false} blockAlign={blockAlign}>
             {bannerIcon ? (
               <div ref={iconNode}>
-                <Box
-                  background={backgroundColor}
-                  borderRadius="200"
-                  padding="1"
-                >
+                <Box background={backgroundColor} borderRadius="2" padding="1">
                   {bannerIcon}
                 </Box>
               </div>
@@ -245,7 +241,7 @@ export function WithinContentContainerBanner({
       width="100%"
       background={backgroundColor}
       padding="2"
-      borderRadius="200"
+      borderRadius="2"
       color={textColor}
     >
       <HorizontalStack
diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx
index 0aa017d9a96..c823f32abfc 100644
--- a/polaris-react/src/components/Bleed/Bleed.stories.tsx
+++ b/polaris-react/src/components/Bleed/Bleed.stories.tsx
@@ -39,7 +39,7 @@ export function WithVerticalDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="025"
+      borderWidth="1"
     >
       <Bleed marginBlock="6">
         <div style={styles} />
@@ -54,7 +54,7 @@ export function WithHorizontalDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="025"
+      borderWidth="1"
     >
       <Bleed marginInline="6">
         <div style={styles} />
@@ -71,7 +71,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="025"
+        borderWidth="1"
       >
         <Bleed marginInline="4" marginBlockStart="6">
           <div style={styles} />
@@ -82,7 +82,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="025"
+        borderWidth="1"
       >
         <Bleed marginInline="4" marginBlockEnd="6">
           <div style={styles} />
@@ -93,7 +93,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="025"
+        borderWidth="1"
       >
         <Bleed marginInline="0" marginInlineStart="6">
           <div style={styles} />
@@ -104,7 +104,7 @@ export function WithSpecificDirection() {
         background="bg"
         padding="4"
         borderColor="border-subdued"
-        borderWidth="025"
+        borderWidth="1"
       >
         <Bleed marginInline="0" marginInlineEnd="6">
           <div style={styles} />
@@ -120,7 +120,7 @@ export function WithAllDirection() {
       background="bg"
       padding="4"
       borderColor="border-subdued"
-      borderWidth="025"
+      borderWidth="1"
     >
       <Bleed marginInline="6" marginBlock="6">
         <div style={styles} />
@@ -135,7 +135,7 @@ export function WithResponsiveHorizontalDirection() {
       background="bg"
       padding={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
       borderColor="border-subdued"
-      borderWidth="025"
+      borderWidth="1"
     >
       <Bleed marginInline={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}>
         <div style={styles} />
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 6dc75656979..1e45efceed0 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -18,13 +18,13 @@ export function Default() {
 export function WithBorders() {
   return (
     <VerticalStack gap="4">
-      <Box background="bg" padding="4" borderWidth="025" borderColor="border">
+      <Box background="bg" padding="4" borderWidth="1" borderColor="border">
         <Text as="p">1px solid border</Text>
       </Box>
       <Box
         background="bg"
         padding="4"
-        borderWidth="025"
+        borderWidth="1"
         borderStyle="dashed"
         borderColor="border-subdued"
       >
@@ -33,7 +33,7 @@ export function WithBorders() {
       <Box
         background="bg"
         padding="4"
-        borderWidth="050"
+        borderWidth="2"
         borderColor="border-info"
       >
         <Text as="p">2px solid blue</Text>
@@ -49,7 +49,7 @@ export function WithBorders() {
       <Box
         background="bg"
         padding="4"
-        borderWidth="100"
+        borderWidth="4"
         borderColor="border-caution"
       >
         <Text as="p">4px solid yellow</Text>
@@ -74,7 +74,7 @@ export function WithBorders() {
         background="bg"
         padding="4"
         borderWidth="5"
-        borderBlockStartWidth="025"
+        borderBlockStartWidth="1"
         borderColor="border-critical"
       >
         <Text as="p">border-width: 5px solid red</Text>
@@ -82,7 +82,7 @@ export function WithBorders() {
         <Box
           background="bg"
           padding="4"
-          borderWidth="100"
+          borderWidth="4"
           borderColor="border-caution"
         >
           <Text as="p">border-width: 4px solid yellow</Text>
@@ -107,13 +107,13 @@ export function WithBorders() {
 export function WithOutline() {
   return (
     <VerticalStack gap="4">
-      <Box background="bg" padding="4" outlineWidth="025" outlineColor="border">
+      <Box background="bg" padding="4" outlineWidth="1" outlineColor="border">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
-        outlineWidth="025"
+        outlineWidth="1"
         outlineStyle="dashed"
         outlineColor="border-subdued"
       >
@@ -122,7 +122,7 @@ export function WithOutline() {
       <Box
         background="bg"
         padding="4"
-        outlineWidth="050"
+        outlineWidth="2"
         outlineColor="border-info"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -138,7 +138,7 @@ export function WithOutline() {
       <Box
         background="bg"
         padding="4"
-        outlineWidth="100"
+        outlineWidth="4"
         outlineColor="border-caution"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -157,7 +157,7 @@ export function WithOutline() {
 
 export function WithBorderRadius() {
   return (
-    <Box background="bg" padding="4" borderRadius="200">
+    <Box background="bg" padding="4" borderRadius="2">
       <Icon source={PaintBrushMajor} color="highlight" />
     </Box>
   );
@@ -169,7 +169,7 @@ export function WithResponsivePadding() {
       <Box
         background="bg"
         padding={{xs: '2', sm: '8'}}
-        borderWidth="025"
+        borderWidth="1"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -178,7 +178,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingBlockStart={{xs: '4', sm: '10'}}
-        borderWidth="025"
+        borderWidth="1"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -187,7 +187,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingBlockEnd={{xs: '4', sm: '10'}}
-        borderWidth="025"
+        borderWidth="1"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -196,7 +196,7 @@ export function WithResponsivePadding() {
         background="bg"
         padding="2"
         paddingInlineStart={{xs: '4', sm: '10'}}
-        borderWidth="025"
+        borderWidth="1"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
@@ -204,7 +204,7 @@ export function WithResponsivePadding() {
       <Box
         background="bg"
         paddingInlineEnd={{xs: '4', sm: '10'}}
-        borderWidth="025"
+        borderWidth="1"
         borderColor="border"
       >
         <Icon source={PaintBrushMajor} color="base" />
diff --git a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
index aeb0e38ea88..1079796ba5d 100644
--- a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -15,8 +15,8 @@
   text-decoration: none;
   margin: 0;
   padding: var(--p-space-05);
-  border-radius: var(--p-border-radius-100);
-  border: var(--p-border-width-025) solid var(--p-color-border-strong);
+  border-radius: var(--p-border-radius-1);
+  border: var(--p-border-width-1) solid var(--p-color-border-strong);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
 
@@ -51,7 +51,7 @@
   #{$se23} & {
     border: none;
     background-color: transparent;
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: 0;
     min-height: 28px;
     min-width: 28px;
@@ -68,7 +68,7 @@
     &:focus {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index d717b825aeb..c9fcc6964b8 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -54,7 +54,7 @@ $bulk-actions-button-stacking-order: (
   justify-content: flex-start;
   padding: var(--p-space-4);
   background: var(--p-color-bg);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
   box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
   max-width: 100%;
   pointer-events: auto;
@@ -63,7 +63,7 @@ $bulk-actions-button-stacking-order: (
     padding: var(--p-space-3);
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-md),
-      $borderRadius: var(--p-border-radius-300)
+      $borderRadius: var(--p-border-radius-3)
     );
   }
 
@@ -110,7 +110,7 @@ $bulk-actions-button-stacking-order: (
       &:focus-visible:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
       }
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
index a2ff9ba3938..ca2adbe6ceb 100644
--- a/polaris-react/src/components/Button/Button.scss
+++ b/polaris-react/src/components/Button/Button.scss
@@ -679,27 +679,27 @@
 
 .outline {
   background: transparent;
-  border: var(--p-border-width-025) solid var(--p-color-border);
+  border: var(--p-border-width-1) solid var(--p-color-border);
   box-shadow: none;
   color: var(--p-color-text);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
 
   &:hover {
-    border: var(--p-border-width-025) solid var(--p-color-border);
+    border: var(--p-border-width-1) solid var(--p-color-border);
     box-shadow: none;
     background: var(--p-color-bg-hover);
   }
 
   &:focus-visible {
-    border: var(--p-border-width-025) solid var(--p-color-border);
+    border: var(--p-border-width-1) solid var(--p-color-border);
     box-shadow: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: 'focused');
   }
 
   &:active {
-    border: var(--p-border-width-025) solid var(--p-color-border);
+    border: var(--p-border-width-1) solid var(--p-color-border);
     box-shadow: none;
     background: var(--p-color-bg-active);
 
@@ -710,14 +710,14 @@
 
   &.pressed {
     background: var(--p-color-bg-subdued-active);
-    border: var(--p-border-width-025) solid var(--p-color-border);
+    border: var(--p-border-width-1) solid var(--p-color-border);
     box-shadow: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     color: var(--pc-button-text);
   }
 
   &.disabled {
-    border: var(--p-border-width-025) solid var(--p-color-border-disabled);
+    border: var(--p-border-width-1) solid var(--p-color-border-disabled);
     color: var(--p-color-text-disabled);
     background: transparent;
     box-shadow: none;
@@ -725,7 +725,7 @@
 
   &.destructive {
     background: transparent;
-    border: var(--p-border-width-025) solid var(--p-color-border-critical);
+    border: var(--p-border-width-1) solid var(--p-color-border-critical);
     box-shadow: none;
     color: var(--p-color-text-critical);
 
@@ -734,31 +734,31 @@
     }
 
     &:hover {
-      border: var(--p-border-width-025) solid var(--p-color-border-critical);
+      border: var(--p-border-width-1) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
     }
 
     &:focus-visible {
-      border: var(--p-border-width-025) solid var(--p-color-border-critical);
+      border: var(--p-border-width-1) solid var(--p-color-border-critical);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
     }
 
     &:active {
-      border: var(--p-border-width-025) solid var(--p-color-border-critical);
+      border: var(--p-border-width-1) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
     }
 
     // stylelint-disable-next-line selector-max-class -- too many classes
     &.disabled {
-      border: var(--p-border-width-025) solid var(--p-color-border-disabled);
+      border: var(--p-border-width-1) solid var(--p-color-border-disabled);
       background: transparent;
       color: var(--p-color-text-disabled);
     }
 
     // stylelint-disable-next-line selector-max-class -- too many classes
     &.pressed {
-      border: var(--p-border-width-025) solid var(--p-color-border-critical);
+      border: var(--p-border-width-1) solid var(--p-color-border-critical);
       background: var(--p-color-bg-critical-subdued);
       color: var(--p-color-text-critical);
     }
@@ -890,13 +890,13 @@
 
     > .Content {
       @media (-ms-high-contrast: active) {
-        outline: var(--p-border-width-050) dotted;
+        outline: var(--p-border-width-2) dotted;
       }
       #{$se23} & {
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-05);
-        border-radius: var(--p-border-radius-150);
+        border-radius: var(--p-border-radius-1_5-experimental);
       }
     }
   }
@@ -1170,7 +1170,7 @@
 }
 
 .sizeMicro {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: var(--p-space-1) var(--p-space-2);
   // stylelint-disable-next-line -- custom property
   min-height: var(--pc-button-micro-min-height);
@@ -1309,7 +1309,7 @@
     position: relative;
     border-color: currentColor;
     // stylelint-disable selector-max-class -- generated by polaris-migrator DO NOT COPY
-    box-shadow: 0 0 0 var(--p-border-width-025) currentColor;
+    box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 2px);
 
@@ -1348,7 +1348,7 @@
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 var(--p-border-width-025) currentColor;
+      box-shadow: 0 0 0 var(--p-border-width-1) currentColor;
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include focus-ring($style: 'focused');
     }
@@ -1444,12 +1444,12 @@
   > :first-child .Button::before,
   > :first-child .Button::after {
     border-radius: 0;
-    border-top-left-radius: var(--p-border-radius-100);
-    border-bottom-left-radius: var(--p-border-radius-100);
+    border-top-left-radius: var(--p-border-radius-1);
+    border-bottom-left-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
     }
   }
 
@@ -1457,21 +1457,21 @@
   > :last-child .Button::before,
   > :last-child .Button::after {
     border-radius: 0;
-    border-top-right-radius: var(--p-border-radius-100);
-    border-bottom-right-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-1);
+    border-bottom-right-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
   }
 
   > :last-child:first-child .Button,
   > :last-child:first-child .Button::after {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 }
diff --git a/polaris-react/src/components/Card/Card.tsx b/polaris-react/src/components/Card/Card.tsx
index 01275b78f7e..24449dad0e3 100644
--- a/polaris-react/src/components/Card/Card.tsx
+++ b/polaris-react/src/components/Card/Card.tsx
@@ -41,8 +41,8 @@ export const Card = ({
   const breakpoints = useBreakpoints();
   const {polarisSummerEditions2023} = useFeatures();
   const defaultBorderRadius: BorderRadiusScale = polarisSummerEditions2023
-    ? '300'
-    : '200';
+    ? '3'
+    : '2';
 
   const isDefaultPadding =
     typeof padding !== 'string' &&
@@ -66,7 +66,7 @@ export const Card = ({
       {polarisSummerEditions2023 ? (
         <ShadowBevel
           boxShadow="xs"
-          borderRadius={hasBorderRadius ? '300' : '0'}
+          borderRadius={hasBorderRadius ? '3' : '0-experimental'}
           zIndex="32"
         >
           <Box
diff --git a/polaris-react/src/components/Card/tests/Card.test.tsx b/polaris-react/src/components/Card/tests/Card.test.tsx
index 625bcb33fbd..7024504abc6 100644
--- a/polaris-react/src/components/Card/tests/Card.test.tsx
+++ b/polaris-react/src/components/Card/tests/Card.test.tsx
@@ -62,7 +62,7 @@ describe('Card', () => {
     );
 
     expect(card).toContainReactComponent(ShadowBevel, {
-      borderRadius: '300',
+      borderRadius: '3',
     });
   });
 
@@ -80,7 +80,7 @@ describe('Card', () => {
 
       expect(card).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-box-border-radius': 'var(--p-border-radius-200)',
+          '--pc-box-border-radius': 'var(--p-border-radius-2)',
         }),
       });
     });
diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
index c641406dd13..1f0d76a33be 100644
--- a/polaris-react/src/components/CheckableButton/CheckableButton.scss
+++ b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -16,7 +16,7 @@
   user-select: none;
   text-decoration: none;
   text-align: left;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   width: auto;
 
   #{$se23} & {
@@ -62,7 +62,7 @@
   text-overflow: ellipsis;
   // padding to fix the bottom of letters being cutoff by overflow: hidden
   padding: var(--p-space-025) 0;
-  margin-left: calc(var(--p-space-5) - var(--p-border-width-050));
+  margin-left: calc(var(--p-space-5) - var(--p-border-width-2));
 
   #{$se23} & {
     margin-left: calc(var(--p-space-3) + var(--p-space-025));
diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
index dc574176e00..47a86842cf9 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -8,7 +8,7 @@
 .ChoiceLabel .Backdrop {
   #{$se23} & {
     border-width: 0;
-    box-shadow: inset 0 0 0 var(--p-border-width-0165)
+    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
       var(--p-color-border-input);
     transition: border-color var(--p-motion-duration-100)
         var(--p-motion-ease-out),
@@ -24,7 +24,7 @@
   border-color: var(--p-color-border-input-hover);
 
   #{$se23} & {
-    box-shadow: inset 0 0 0 var(--p-border-width-0165)
+    box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
       var(--p-color-border-input-hover);
     background-color: var(--p-color-bg-input-hover-experimental);
   }
@@ -50,7 +50,7 @@
       @include focus-ring($style: 'focused');
 
       #{$se23} & {
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
         outline-offset: var(--p-space-025);
         background-color: var(--p-color-bg-input-hover-experimental);
@@ -142,12 +142,13 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-050));
+  @include focus-ring($border-width: var(--p-border-width-2));
 
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 override */
     @include no-focus-ring;
-    border: var(--p-border-width-0165) solid var(--p-color-border-input);
+    border: var(--p-border-width-1-experimental) solid
+      var(--p-color-border-input);
   }
 
   &:hover {
@@ -218,7 +219,7 @@
       @include control-backdrop(error);
       #{$se23} & {
         background-color: var(--p-color-bg-critical-subdued);
-        box-shadow: inset 0 0 0 var(--p-border-width-0165)
+        box-shadow: inset 0 0 0 var(--p-border-width-1-experimental)
           var(--p-color-bg-critical-strong-active);
       }
     }
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.scss b/polaris-react/src/components/ColorPicker/ColorPicker.scss
index d76aa47d551..dd804769064 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.scss
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.scss
@@ -38,7 +38,7 @@
   }
 
   // Need an extra pixel to avoid a small color bleed from happening
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   cursor: pointer;
 
   .Dragger {
@@ -50,7 +50,7 @@
   }
 
   .ColorLayer {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
   }
 
   &::after,
@@ -65,7 +65,7 @@
     height: 100%;
     width: 100%;
     pointer-events: none;
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
   }
 
   &::before {
@@ -81,7 +81,7 @@
   }
 
   @media (-ms-high-contrast: active) {
-    outline: var(--p-border-width-025) solid windowText;
+    outline: var(--p-border-width-1) solid windowText;
   }
 }
 
@@ -99,7 +99,7 @@
   margin: 0 auto;
   will-change: transform;
   background: transparent;
-  border: var(--p-border-radius-100) solid var(--p-color-bg);
+  border: var(--p-border-radius-1) solid var(--p-color-bg);
   border-radius: var(--p-border-radius-full);
   pointer-events: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -128,7 +128,7 @@ $vertical-picker-border-radius: calc(var(--pc-color-picker-size) * 0.5);
   height: var(--pc-color-picker-size);
   width: var(--p-space-6);
   margin-left: var(--p-space-2);
-  border-width: var(--p-border-radius-100);
+  border-width: var(--p-border-radius-1);
   border-radius: $vertical-picker-border-radius;
 
   &::after {
@@ -148,7 +148,7 @@ $vertical-picker-border-radius: calc(var(--pc-color-picker-size) * 0.5);
   }
 
   @media (-ms-high-contrast: active) {
-    outline: var(--p-border-width-025) solid windowText;
+    outline: var(--p-border-width-1) solid windowText;
   }
 }
 
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
index 5c1d1439e71..0f8332a5a5d 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -74,8 +74,8 @@ export function WithHexTextField() {
     Tile: {
       minHeight: 'calc(100% - 0.125rem)',
       aspectRatio: '1 / 1',
-      borderRadius: 'var(--p-border-radius-100)',
-      border: 'var(--p-border-width-025) solid var(--p-color-border-subdued)',
+      borderRadius: 'var(--p-border-radius-1)',
+      border: 'var(--p-border-width-1) solid var(--p-color-border-subdued)',
       backgroundColor: hsbToHex(color),
     },
     TextField: {
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index d68d703f093..5ea150b19e7 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -6,14 +6,14 @@
   position: relative;
   max-width: 100vw;
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
   overflow: hidden;
 
   #{$se23} & {
     border-radius: 0;
 
     @media #{$p-breakpoints-sm-up} {
-      border-radius: var(--p-border-radius-300);
+      border-radius: var(--p-border-radius-3);
     }
   }
 }
@@ -52,7 +52,7 @@
   height: 6px;
   width: 6px;
   background: var(--p-color-text-subdued);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     background: var(--p-color-icon-subdued);
@@ -94,7 +94,7 @@
 // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY
 .TableRow + .TableRow {
   .Cell {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 
@@ -162,10 +162,10 @@
   top: 0;
   right: 0;
   bottom: 0;
-  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-right: var(--p-border-width-025) solid var(--p-color-border);
+    border-right: var(--p-border-width-1) solid var(--p-color-border);
   }
 }
 
@@ -189,13 +189,13 @@
 .Cell-header {
   font-weight: var(--p-font-weight-regular);
   color: var(--p-color-text);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-top: 0;
 
   #{$se23} & {
     padding-top: var(--p-space-3);
     padding-bottom: var(--p-space-3);
-    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
   }
 
   .IncreasedTableDensity & {
@@ -395,11 +395,11 @@
 .Cell-total {
   font-weight: var(--p-font-weight-semibold);
   background: var(--p-color-bg-subdued);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
   }
 
   .ZebraStripingOnData.ShowTotals & {
@@ -417,17 +417,17 @@
 }
 
 .Cell-total-footer {
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   border-bottom: none;
 
   #{$se23} & {
     // Specificity bump
     border-bottom: none;
-    border-top: var(--p-border-width-025) solid var(--p-color-border);
+    border-top: var(--p-border-width-1) solid var(--p-color-border);
   }
 
   &:first-child {
-    border-bottom-left-radius: var(--p-border-radius-200);
+    border-bottom-left-radius: var(--p-border-radius-2);
 
     #{$se23} & {
       border-radius: 0;
@@ -435,7 +435,7 @@
   }
 
   &:last-child {
-    border-bottom-right-radius: var(--p-border-radius-200);
+    border-bottom-right-radius: var(--p-border-radius-2);
 
     #{$se23} & {
       border-radius: 0;
@@ -448,14 +448,14 @@
   background: var(--p-color-bg-subdued);
   color: var(--p-color-text-subdued);
   text-align: center;
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
-  border-bottom-left-radius: var(--p-border-radius-200);
-  border-bottom-right-radius: var(--p-border-radius-200);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-bottom-left-radius: var(--p-border-radius-2);
+  border-bottom-right-radius: var(--p-border-radius-2);
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
     padding: var(--p-space-2) var(--p-space-3);
-    border-top: var(--p-border-width-025) solid var(--p-color-border);
+    border-top: var(--p-border-width-1) solid var(--p-color-border);
     border-radius: 0;
   }
 
diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
index 085c0d1dc1d..79c2a6ac244 100644
--- a/polaris-react/src/components/DatePicker/DatePicker.scss
+++ b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -2,12 +2,12 @@
 
 .DatePicker {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-date-picker-range-end-border-radius: var(--p-border-radius-750);
+  --pc-date-picker-range-end-border-radius: var(--p-border-radius-6);
   position: relative;
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-date-picker-range-end-border-radius: var(--p-border-radius-200);
+    --pc-date-picker-range-end-border-radius: var(--p-border-radius-2);
   }
 }
 
@@ -43,7 +43,7 @@
   background: transparent;
   margin: 0;
   padding: 0;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 }
 
 .DayCell-inRange {
@@ -58,7 +58,7 @@
   padding: var(--p-space-2);
   background: transparent;
   border: none;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   outline: none;
   font-size: var(--p-font-size-75);
   text-align: center;
@@ -66,13 +66,13 @@
   cursor: pointer;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 
   &:hover {
     background: var(--p-color-bg-interactive-hover);
     color: var(--p-color-text-on-color);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
 
     #{$se23} & {
       background: var(--p-color-bg-primary-hover);
@@ -109,7 +109,7 @@
     &:hover {
       background-color: HighlightText;
       color: Highlight;
-      outline: var(--p-border-width-050) solid Highlight;
+      outline: var(--p-border-width-2) solid Highlight;
     }
   }
 }
@@ -130,7 +130,7 @@
     &:hover {
       background-color: HighlightText;
       color: Highlight;
-      outline: var(--p-border-width-050) solid Highlight;
+      outline: var(--p-border-width-2) solid Highlight;
     }
   }
 }
@@ -207,10 +207,10 @@
 }
 
 .Day-firstInRange {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 
   &.Day-hasRange,
@@ -260,12 +260,12 @@
 
   // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Day-inRange:first-child:not(.Day-firstInRange):not(.Day-lastInRange) {
-    border-radius: var(--p-border-radius-100) 0 0 var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1) 0 0 var(--p-border-radius-1);
   }
 
   // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   > .Day-inRange:last-child:not(.Day-firstInRange):not(.Day-lastInRange) {
-    border-radius: 0 var(--p-border-radius-100) var(--p-border-radius-100) 0;
+    border-radius: 0 var(--p-border-radius-1) var(--p-border-radius-1) 0;
   }
 }
 
diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.scss b/polaris-react/src/components/DescriptionList/DescriptionList.scss
index c7a9240c32d..7b29bbc6ecd 100644
--- a/polaris-react/src/components/DescriptionList/DescriptionList.scss
+++ b/polaris-react/src/components/DescriptionList/DescriptionList.scss
@@ -30,7 +30,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     .Description + & + .Description {
-      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }
@@ -44,7 +44,7 @@
   }
 
   + .Term {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 
   @media #{$p-breakpoints-sm-up} {
@@ -57,7 +57,7 @@
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
     + .Term + .Description {
-      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }
diff --git a/polaris-react/src/components/Divider/Divider.tsx b/polaris-react/src/components/Divider/Divider.tsx
index 1d7fd737e24..1df31d5ec35 100644
--- a/polaris-react/src/components/Divider/Divider.tsx
+++ b/polaris-react/src/components/Divider/Divider.tsx
@@ -11,14 +11,14 @@ export interface DividerProps {
   borderColor?: ColorBorderAlias | 'transparent';
   /**
    * Divider border width
-   * @default '025'
+   * @default '1'
    */
   borderWidth?: BorderWidthScale;
 }
 
 export const Divider = ({
   borderColor = 'border-subdued',
-  borderWidth = '025',
+  borderWidth = '1',
 }: DividerProps) => {
   const borderColorValue =
     borderColor === 'transparent'
diff --git a/polaris-react/src/components/Divider/tests/Divider.test.tsx b/polaris-react/src/components/Divider/tests/Divider.test.tsx
index 9fad4026db5..270cd78dde9 100644
--- a/polaris-react/src/components/Divider/tests/Divider.test.tsx
+++ b/polaris-react/src/components/Divider/tests/Divider.test.tsx
@@ -10,7 +10,7 @@ describe('<Divider />', () => {
     expect(divider).toContainReactComponent('hr', {
       style: {
         borderBlockStart:
-          'var(--p-border-width-025) solid var(--p-color-border-subdued)',
+          'var(--p-border-width-1) solid var(--p-color-border-subdued)',
       } as React.CSSProperties,
     });
   });
@@ -20,19 +20,18 @@ describe('<Divider />', () => {
 
     expect(divider).toContainReactComponent('hr', {
       style: expect.objectContaining({
-        borderBlockStart:
-          'var(--p-border-width-025) solid var(--p-color-border)',
+        borderBlockStart: 'var(--p-border-width-1) solid var(--p-color-border)',
       }) as React.CSSProperties,
     });
   });
 
   it('renders custom border width when passed in', () => {
-    const divider = mountWithApp(<Divider borderWidth="050" />);
+    const divider = mountWithApp(<Divider borderWidth="2" />);
 
     expect(divider).toContainReactComponent('hr', {
       style: expect.objectContaining({
         borderBlockStart:
-          'var(--p-border-width-050) solid var(--p-color-border-subdued)',
+          'var(--p-border-width-2) solid var(--p-color-border-subdued)',
       }) as React.CSSProperties,
     });
   });
diff --git a/polaris-react/src/components/DropZone/DropZone.scss b/polaris-react/src/components/DropZone/DropZone.scss
index a8e9550281b..13889cf338d 100755
--- a/polaris-react/src/components/DropZone/DropZone.scss
+++ b/polaris-react/src/components/DropZone/DropZone.scss
@@ -17,11 +17,11 @@ $dropzone-stacking-order: (
   bottom: 0;
   opacity: 1;
   transform: scale(1);
-  border: var(--p-border-width-025) $dropzone-border-style transparent;
+  border: var(--p-border-width-1) $dropzone-border-style transparent;
 }
 
 @mixin set-border-radius {
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
 }
 
 .DropZone {
@@ -36,7 +36,7 @@ $dropzone-stacking-order: (
   #{$se23} & {
     background-color: var(--p-color-bg-input);
   }
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
 
   &::after {
     content: '';
@@ -48,11 +48,11 @@ $dropzone-stacking-order: (
     bottom: 0;
     left: 0;
 
-    border: var(--p-border-width-025) $dropzone-border-style transparent;
-    border-radius: var(--p-border-radius-200);
+    border: var(--p-border-width-1) $dropzone-border-style transparent;
+    border-radius: var(--p-border-radius-2);
     pointer-events: none;
     #{$se23} & {
-      border-width: var(--p-border-width-0165);
+      border-width: var(--p-border-width-1-experimental);
     }
   }
 
@@ -63,7 +63,7 @@ $dropzone-stacking-order: (
   }
 
   &:hover {
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 }
 
@@ -161,7 +161,7 @@ $dropzone-stacking-order: (
 
 .Container {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-025));
+  @include focus-ring($size: 'wide', $border-width: var(--p-border-width-1));
   flex: 1;
 }
 
@@ -178,7 +178,7 @@ $dropzone-stacking-order: (
   justify-content: center;
   align-items: center;
   padding: var(--p-space-4);
-  border: var(--p-border-width-025) $dropzone-border-style
+  border: var(--p-border-width-1) $dropzone-border-style
     var(--p-color-border-interactive);
   text-align: center;
   color: var(--p-color-text-interactive);
@@ -186,7 +186,7 @@ $dropzone-stacking-order: (
   pointer-events: none;
 
   #{$se23} & {
-    border: var(--p-border-width-025) solid
+    border: var(--p-border-width-2-experimental) solid
       var(--p-color-border-input-active-experimental);
     background-color: var(--p-color-bg-input-active-experimental);
     color: var(--p-color-text);
@@ -205,7 +205,7 @@ $dropzone-stacking-order: (
     border-color: var(--p-color-border-critical-strong-experimental);
     color: var(--p-color-text-critical);
     border-style: $dropzone-border-style;
-    border-width: var(--p-border-width-0165);
+    border-width: var(--p-border-width-1-experimental);
     background-color: var(--p-color-bg-critical-subdued);
   }
 }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
index 41efb075bc2..3ab6828c5db 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -27,7 +27,7 @@
   display: inline-flex;
   flex: 0 0 auto;
   border: none;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: var(--p-space-1) var(--p-space-2);
   margin: 0;
   text-decoration: none;
@@ -67,7 +67,7 @@
     background-color: var(--p-color-bg-input);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
     box-shadow: var(--p-shadow-button-experimental);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 }
 
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index c2b92cbb897..b1fc0597cd8 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -3,9 +3,9 @@
 .Container {
   position: relative;
   z-index: var(--p-z-index-1);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
-  border-top-left-radius: var(--p-border-radius-200);
-  border-top-right-radius: var(--p-border-radius-200);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top-left-radius: var(--p-border-radius-2);
+  border-top-right-radius: var(--p-border-radius-2);
   background: var(--p-color-bg);
 }
 
@@ -39,7 +39,7 @@
 }
 
 .FiltersWrapper {
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: 53px;
   overflow: hidden;
 
@@ -87,8 +87,8 @@
 
 .AddFilter {
   background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-750);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
+  border-radius: var(--p-border-radius-6);
+  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   height: 28px;
   cursor: pointer;
@@ -98,7 +98,7 @@
   justify-content: center;
   outline: inherit;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-025));
+  @include focus-ring($border-width: var(--p-border-width-1));
 
   path {
     fill: var(--p-color-icon);
@@ -144,7 +144,7 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-750);
+    border-radius: var(--p-border-radius-6);
   }
 
   span {
@@ -165,8 +165,8 @@
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-200);
-    border: var(--p-color-border) dashed var(--p-border-width-025);
+    border-radius: var(--p-border-radius-2);
+    border: var(--p-color-border) dashed var(--p-border-width-1);
 
     &:hover {
       background: transparent;
@@ -175,7 +175,7 @@
 
     &:focus {
       background: transparent;
-      outline-offset: var(--p-border-width-050);
+      outline-offset: var(--p-border-width-2);
     }
 
     &:active {
@@ -187,7 +187,7 @@
     }
 
     &::after {
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 }
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
index ac31c50f4d0..b2cfb550899 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -2,13 +2,13 @@
 
 .FilterButton {
   background: var(--p-color-bg-subdued);
-  border-radius: var(--p-border-radius-750);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
+  border-radius: var(--p-border-radius-6);
+  border: var(--p-color-border-subdued) dashed var(--p-border-width-1);
   cursor: pointer;
   color: var(--p-color-text);
 
   // stylelint-disable-next-line -- no way to set focus ring without mixin currently
-  @include focus-ring($border-width: var(--p-border-width-025));
+  @include focus-ring($border-width: var(--p-border-width-1));
   // stylelint-disable-next-line selector-max-specificity -- specificity is required to override focus-ring mixin
   &.focusedFilterButton:focus-within:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -39,13 +39,13 @@
   }
 
   &::after {
-    border-radius: var(--p-border-radius-750);
+    border-radius: var(--p-border-radius-6);
   }
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-200);
-    border: var(--p-color-border) dashed var(--p-border-width-025);
+    border-radius: var(--p-border-radius-2);
+    border: var(--p-color-border) dashed var(--p-border-width-1);
 
     &:hover,
     &:active {
@@ -86,7 +86,7 @@
     }
 
     &::after {
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 }
diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
index b3b79b4caac..c490e04780b 100644
--- a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
@@ -16,8 +16,8 @@
   /* stylelint-disable-next-line polaris/typography/polaris/at-rule-disallowed-list -- Matching custom input with TextField */
   @include text-style-input;
   flex: 1;
-  border: var(--p-border-width-025) solid var(--p-color-border-input);
-  border-radius: var(--p-border-radius-100);
+  border: var(--p-border-width-1) solid var(--p-color-border-input);
+  border-radius: var(--p-border-radius-1);
   border-color: var(--p-color-border-input);
   padding-inline: var(--p-space-1_5-experimental);
   width: 100%;
@@ -30,7 +30,7 @@
   &:active,
   &:focus {
     border-color: var(--p-color-border-input-active-experimental);
-    border-width: var(--p-border-width-025);
+    border-width: var(--p-border-width-2-experimental);
     background-color: var(--p-color-bg-input-active-experimental);
   }
 
@@ -50,8 +50,7 @@
 }
 
 .focused:not(:disabled) {
-  outline: var(--p-border-width-050) solid
-    var(--p-color-border-interactive-focus);
+  outline: var(--p-border-width-2) solid var(--p-color-border-interactive-focus);
   outline-offset: var(--p-space-025);
 }
 
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
index 87d05a9ee9a..81057d81379 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -124,7 +124,7 @@ $sidebar-breakpoint: 1200px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($style: focused);
     position: absolute;
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
     outline: none;
   }
 
diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx
index 37fdeab7bea..01b1970ae01 100644
--- a/polaris-react/src/components/Frame/Frame.stories.tsx
+++ b/polaris-react/src/components/Frame/Frame.stories.tsx
@@ -1108,7 +1108,7 @@ function WithSidebarEnabled({
               background: 'var(--p-color-bg)',
               padding: 'var(--p-space-2)',
               boxShadow: 'var(--p-shadow-md)',
-              borderRadius: 'var(--p-border-radius-300)',
+              borderRadius: 'var(--p-border-radius-3)',
             }}
           >
             This is a sidebar
diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
index ce36ac22738..48eabaa72bb 100644
--- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
+++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -23,7 +23,7 @@
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
   }
 }
 
@@ -90,10 +90,8 @@
     --pc-button-color-hover: rgba(250, 250, 250, 1);
     --pc-button-color-active: rgba(247, 247, 247, 1);
     --pc-button-color-depressed: rgba(247, 247, 247, 1);
-    --pc-button-color-disabled: rgba(255, 255, 255, 0.2);
-    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset,
-      1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset,
-      -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
+    --pc-button-color-disabled:  rgba(255, 255, 255, 0.2);
+    --pc-button-shadow-inset: 0px 2px 1px 0px rgba(26, 26, 26, 0.2) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset;
 
     &::before {
       top: 0;
@@ -117,7 +115,7 @@
     }
 
     &[class*='Polaris-Button--disabled'],
-    &[class*='Button-disabled'] {
+    &[class*='Button-disabled']{
       --pc-button-text: var(--p-color-text-subdued);
       background: var(--pc-button-color-disabled);
     }
@@ -131,7 +129,7 @@
     --pc-button-text: var(--p-color-text-inverse);
 
     &::after {
-      content: none;
+     content: none;
     }
 
     &:hover {
diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.scss b/polaris-react/src/components/Frame/components/Toast/Toast.scss
index 0ca880477c0..4bb3235e4f1 100644
--- a/polaris-react/src/components/Frame/components/Toast/Toast.scss
+++ b/polaris-react/src/components/Frame/components/Toast/Toast.scss
@@ -6,7 +6,7 @@ $Backdrop-opacity: 0.88;
   display: inline-flex;
   max-width: 500px;
   padding: var(--p-space-2) var(--p-space-3);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   background: var(--p-color-bg-inverse);
   color: var(--p-color-text-on-color);
   margin-bottom: var(--p-space-5);
@@ -15,7 +15,7 @@ $Backdrop-opacity: 0.88;
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-lg),
-      $borderRadius: var(--p-border-radius-200)
+      $borderRadius: var(--p-border-radius-2)
     );
   }
 
@@ -24,7 +24,7 @@ $Backdrop-opacity: 0.88;
   }
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-050) solid transparent;
+    border: var(--p-border-width-2) solid transparent;
   }
 }
 
diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
index 2f810be4d37..1bbb2ba19d1 100644
--- a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
+++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -19,7 +19,7 @@
   padding-left: var(--p-space-3);
   padding-right: var(--p-space-3);
   border-width: 0;
-  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
   background-color: var(--p-color-bg);
   font-weight: var(--p-font-weight-medium);
   cursor: pointer;
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
index 80164c78fdf..ec463c7c66b 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.scss
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -95,7 +95,7 @@ $spinner-size: 20px;
   @media #{$p-breakpoints-md-down} {
     position: relative;
     padding: var(--p-space-3) var(--p-space-4);
-    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
     gap: var(--p-space-2);
 
     &::before {
diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
index e2ac62cdf86..163e5c40649 100644
--- a/polaris-react/src/components/IndexFilters/components/Container/Container.scss
+++ b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -1,13 +1,13 @@
 @import '../../../../styles/common';
 
 .Container {
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
-  border-top-left-radius: var(--p-border-radius-200);
-  border-top-right-radius: var(--p-border-radius-200);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
+  border-top-left-radius: var(--p-border-radius-2);
+  border-top-right-radius: var(--p-border-radius-2);
   background: var(--p-color-bg);
 
   #{$se23} & {
-    border-bottom: var(--p-border-width-025) solid var(--p-color-border);
+    border-bottom: var(--p-border-width-1) solid var(--p-color-border);
   }
 }
 
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
index 91a3c6b9d7e..2bd7f8698b4 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx
@@ -135,7 +135,7 @@ export function SortButton({
         paddingInlineEnd={polarisSummerEditions2023 ? '3' : undefined}
         paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
         paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
-        borderBlockEndWidth="025"
+        borderBlockEndWidth="1"
         borderColor="border-subdued"
       >
         <ChoiceList
diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
index 3014b72ae6b..19637486887 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
+++ b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
@@ -3,7 +3,7 @@
 .DirectionButton {
   // stylelint-disable-next-line -- This mixin cannot be replaced with a single token
   @include focus-ring;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: var(--p-space-05);
   font-size: var(--p-font-size-100);
   display: flex;
@@ -18,7 +18,7 @@
   #{$se23} & {
     // stylelint-disable-next-line -- se23 overrides
     @include focus-ring($size: 'wide');
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: var(--p-space-1) var(--p-space-3) var(--p-space-1) var(--p-space-2);
   }
 
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 30d50a98ee5..e7285829652 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -92,7 +92,7 @@ $loading-panel-height: 53px;
     background: var(--p-color-bg-info-subdued);
     padding: var(--p-space-2);
     padding-bottom: var(--p-space-1);
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
   }
 }
 
@@ -175,7 +175,7 @@ $loading-panel-height: 53px;
 .TableRow {
   background-color: var(--p-color-bg);
   cursor: pointer;
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     &.TableRow-selected {
@@ -183,7 +183,7 @@ $loading-panel-height: 53px;
     }
 
     &:first-child {
-      border-top: var(--p-border-width-025) solid var(--p-color-border);
+      border-top: var(--p-border-width-1) solid var(--p-color-border);
     }
   }
 
@@ -242,8 +242,8 @@ $loading-panel-height: 53px;
       font-weight: var(--p-font-weight-medium);
       font-size: var(--p-font-size-75);
       background-color: var(--p-color-bg-subdued);
-      border-top: var(--p-border-width-025) solid var(--p-color-border);
-      border-bottom: var(--p-border-width-025) solid var(--p-color-border);
+      border-top: var(--p-border-width-1) solid var(--p-color-border);
+      border-bottom: var(--p-border-width-1) solid var(--p-color-border);
     }
 
     #{$se23} & {
@@ -667,18 +667,18 @@ $loading-panel-height: 53px;
   content: '';
   position: absolute;
   left: 0;
-  bottom: calc(-1 * var(--p-border-width-050));
+  bottom: calc(-1 * var(--p-border-width-2));
   width: 100%;
-  height: var(--p-border-width-050);
-  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
+  height: var(--p-border-width-2);
+  border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-bottom: var(--p-border-width-050) dotted var(--p-color-border-strong);
+    border-bottom: var(--p-border-width-2) dotted var(--p-color-border-strong);
   }
 }
 
 .TableHeadingTooltipUnderlinePlaceholder {
-  border-bottom: var(--p-border-width-050) dotted transparent;
+  border-bottom: var(--p-border-width-2) dotted transparent;
 }
 
 .TableHeadingSortIcon-visible {
@@ -1124,16 +1124,16 @@ $scroll-bar-size: var(--p-space-2);
   bottom: 0;
   padding: var(--p-space-05);
   background-color: var(--p-color-bg);
-  border-bottom-right-radius: var(--p-border-radius-200);
-  border-bottom-left-radius: var(--p-border-radius-200);
+  border-bottom-right-radius: var(--p-border-radius-2);
+  border-bottom-left-radius: var(--p-border-radius-2);
 
   #{$se23} & {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 
     @media #{$p-breakpoints-sm-up} {
-      border-bottom-right-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-bottom-right-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
       padding: var(--p-space-05) var(--p-space-2);
     }
   }
@@ -1162,7 +1162,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-track {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   background-color: transparent;
 }
 
@@ -1174,7 +1174,7 @@ $scroll-bar-size: var(--p-space-2);
 }
 
 .ScrollBar::-webkit-scrollbar-thumb {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   background-color: var(--p-color-border-strong);
   transition: background-color var(--p-motion-duration-100)
     var(--p-motion-ease-out);
@@ -1206,7 +1206,7 @@ $scroll-bar-size: var(--p-space-2);
   transform: translateX(calc(-1 * var(--pc-index-table-translate-offset)));
   transition: transform var(--p-motion-ease) var(--p-motion-duration-200);
   display: flex;
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   filter: none;
   align-items: center;
 }
diff --git a/polaris-react/src/components/InlineCode/InlineCode.scss b/polaris-react/src/components/InlineCode/InlineCode.scss
index 820d8c92e78..8d46c6015cd 100644
--- a/polaris-react/src/components/InlineCode/InlineCode.scss
+++ b/polaris-react/src/components/InlineCode/InlineCode.scss
@@ -1,6 +1,6 @@
 .Code {
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-050);
+  border-radius: var(--p-border-radius-05);
   font-family: var(--p-font-family-mono);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   font-size: 0.85em;
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
index bfc38403133..ce3616442f3 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -11,7 +11,7 @@ $key-base-dimension: 28px;
   background: var(--p-color-bg-inset);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   box-shadow: 0 var(--p-space-025) 0 rgba(0, 0, 0, 0.15);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: var(--p-color-text);
   font-size: var(--p-font-size-100);
   font-weight: var(--p-font-weight-medium);
@@ -23,7 +23,7 @@ $key-base-dimension: 28px;
 
   #{$se23} & {
     background: var(--p-color-bg-secondary-experimental);
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
     color: var(--p-color-text-subdued);
     box-shadow: none;
     margin-bottom: 0;
@@ -32,7 +32,7 @@ $key-base-dimension: 28px;
 
 .small {
   background: var(--p-color-bg-app-selected);
-  border-radius: var(--p-border-radius-050);
+  border-radius: var(--p-border-radius-05);
   box-shadow: none;
   line-height: unset;
   padding: 0 var(--p-space-1);
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 634ce9d539b..72ef4be4d97 100644
--- a/polaris-react/src/components/Layout/Layout.scss
+++ b/polaris-react/src/components/Layout/Layout.scss
@@ -77,13 +77,13 @@ $relative-size: $primary-basis / $secondary-basis;
 
   + .AnnotatedSection {
     #{$se23} & {
-      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
       padding-top: var(--p-space-4);
     }
 
     @media #{$p-breakpoints-sm-up} {
       padding-top: var(--p-space-4);
-      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     }
   }
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
index b3fb087028c..bea48544589 100644
--- a/polaris-react/src/components/LegacyCard/LegacyCard.scss
+++ b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -3,13 +3,13 @@
 .LegacyCard {
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-md);
-  outline: var(--p-border-width-025) solid transparent;
+  outline: var(--p-border-width-1) solid transparent;
   overflow: clip;
 
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-xs),
-      $borderRadius: var(--p-border-radius-0),
+      $borderRadius: var(--p-border-radius-0-experimental),
       $zIndex: 101
     );
 
@@ -29,35 +29,35 @@
   }
 
   @media #{$p-breakpoints-sm-up} {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     .Section:first-child {
-      border-top-left-radius: var(--p-border-radius-200);
-      border-top-right-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-top-right-radius: var(--p-border-radius-2);
     }
 
     .Section:last-child {
-      border-bottom-left-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
 
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: var(--p-shadow-xs),
-        $borderRadius: var(--p-border-radius-300),
+        $borderRadius: var(--p-border-radius-3),
         $zIndex: 101
       );
 
       // stylelint-disable-next-line -- se23 override
       .Section:first-child {
-        border-top-left-radius: var(--p-border-radius-300);
-        border-top-right-radius: var(--p-border-radius-300);
+        border-top-left-radius: var(--p-border-radius-3);
+        border-top-right-radius: var(--p-border-radius-3);
       }
 
       // stylelint-disable-next-line -- se23 override
       .Section:last-child {
-        border-bottom-left-radius: var(--p-border-radius-300);
-        border-bottom-right-radius: var(--p-border-radius-300);
+        border-bottom-left-radius: var(--p-border-radius-3);
+        border-bottom-right-radius: var(--p-border-radius-3);
       }
     }
   }
@@ -68,7 +68,7 @@
     #{$se23} & {
       @include shadow-bevel(
         $boxShadow: none,
-        $borderRadius: var(--p-border-radius-0),
+        $borderRadius: var(--p-border-radius-0-experimental),
         $border: none,
         $content: none
       );
@@ -120,7 +120,7 @@
   }
 
   + .Section {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -173,7 +173,7 @@
   }
 
   .Header + & {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     margin-top: var(--p-space-5);
 
     #{$se23} & {
@@ -217,7 +217,7 @@
   + .Subsection {
     margin-top: var(--p-space-4);
     padding-top: var(--p-space-4);
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     @media print {
       border-top: 0;
@@ -258,7 +258,7 @@
   }
 
   .Section-subdued + & {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
     padding: var(--p-space-5);
 
     #{$se23} & {
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
index 6652a2a2a30..f263278fd6e 100644
--- a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
+++ b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
@@ -19,7 +19,7 @@ $list-filters-footer-height: 70px;
   top: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-header-height;
   box-sizing: border-box;
   display: flex;
@@ -46,7 +46,7 @@ $list-filters-footer-height: 70px;
   bottom: 0;
   width: 100%;
   padding: var(--p-space-4) var(--p-space-5);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   height: $list-filters-footer-height;
   box-sizing: border-box;
   display: flex;
@@ -65,7 +65,7 @@ $list-filters-footer-height: 70px;
 }
 
 .EmptyFooterState {
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-4);
   width: 100%;
   display: flex;
@@ -81,7 +81,7 @@ $list-filters-footer-height: 70px;
   margin: 0;
   padding: var(--p-space-4) var(--p-space-5);
   color: var(--p-color-text);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   background: none;
   border: none;
   outline: none;
@@ -95,7 +95,7 @@ $list-filters-footer-height: 70px;
   &:hover {
     cursor: pointer;
     background-color: var(--p-color-bg-hover);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   &:focus-visible:not(:active) {
diff --git a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
index 601d7e34497..ef35ab50e8d 100644
--- a/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
+++ b/polaris-react/src/components/LegacyFilters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -20,12 +20,12 @@
 
   &.right {
     .CenterContainer * {
-      border-top-right-radius: var(--p-border-radius-100);
-      border-bottom-right-radius: var(--p-border-radius-100);
+      border-top-right-radius: var(--p-border-radius-1);
+      border-bottom-right-radius: var(--p-border-radius-1);
 
       #{$se23} & {
-        border-top-right-radius: var(--p-border-radius-200);
-        border-bottom-right-radius: var(--p-border-radius-200);
+        border-top-right-radius: var(--p-border-radius-2);
+        border-bottom-right-radius: var(--p-border-radius-2);
       }
     }
   }
@@ -80,43 +80,43 @@
   }
 
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-100);
-    border-bottom-left-radius: var(--p-border-radius-100);
+    border-top-left-radius: var(--p-border-radius-1);
+    border-bottom-left-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
     }
   }
 
   .Item:last-of-type > div > button {
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
   }
 }
 
 .RightContainer.queryFieldHidden {
   .Item:first-of-type > div > button {
-    border-top-left-radius: var(--p-border-radius-100);
-    border-bottom-left-radius: var(--p-border-radius-100);
+    border-top-left-radius: var(--p-border-radius-1);
+    border-bottom-left-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
     }
   }
 }
 
 .RightContainerWithoutMoreFilters {
   .Item:last-child > div > button {
-    border-top-right-radius: var(--p-border-radius-100);
-    border-bottom-right-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-1);
+    border-bottom-right-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-top-right-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
   }
 }
@@ -132,18 +132,18 @@
     border-bottom-left-radius: 0;
 
     #{$se23} & {
-      border-top-left-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
     }
   }
 }
 
 .MoreFiltersButtonContainer.onlyButtonVisible {
   .Item > div > button {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     #{$se23} & {
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 }
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
index 0771b90ed1f..bd3dcc04cd1 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
@@ -142,7 +142,7 @@ $item-vertical-padding: $item-min-height * 0.5;
 .Title {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   display: block;
   padding: var(--p-space-2) var(--p-space-4);
   min-width: $item-min-width;
@@ -155,8 +155,8 @@ $item-vertical-padding: $item-min-height * 0.5;
     left: 0;
     right: 0;
     height: var(--p-border-width-3);
-    border-top-left-radius: var(--p-border-radius-100);
-    border-top-right-radius: var(--p-border-radius-100);
+    border-top-left-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-1);
   }
 
   #{$se23} & {
@@ -194,7 +194,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: inherit;
 
   &::-moz-focus-inner {
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx b/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
index df1a5c71404..45c6774409a 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.tsx
@@ -172,7 +172,7 @@ class TabsInner extends PureComponent<CombinedProps, State> {
     return (
       <div>
         <Box
-          borderBlockEndWidth="025"
+          borderBlockEndWidth="1"
           borderColor="border-subdued"
           paddingInlineStart="2"
           paddingInlineEnd="2"
diff --git a/polaris-react/src/components/Link/Link.scss b/polaris-react/src/components/Link/Link.scss
index 396f477827b..8a1f7c6682e 100644
--- a/polaris-react/src/components/Link/Link.scss
+++ b/polaris-react/src/components/Link/Link.scss
@@ -24,15 +24,15 @@
 
   &:focus:not(:active) {
     outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-025);
+      var(--p-border-width-1);
   }
 
   #{$se23} &:focus,
   #{$se23} &:focus-visible {
     outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-050);
+      var(--p-border-width-2);
     outline-offset: var(--p-space-05);
-    border-radius: var(--p-border-radius-150);
+    border-radius: var(--p-border-radius-1_5-experimental);
   }
 
   &:active {
@@ -50,7 +50,7 @@
       bottom: -2px;
       left: -5px;
       display: block;
-      border-radius: var(--p-border-radius-100);
+      border-radius: var(--p-border-radius-1);
 
       #{$se23} & {
         content: none;
diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
index 0a784b46d52..72f4063c94d 100644
--- a/polaris-react/src/components/Listbox/Listbox.stories.tsx
+++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -454,8 +454,8 @@ export function WithSearch() {
             position: 'relative',
             height: polarisSummerEditions2023 ? '262px' : '292px',
             padding: 'var(--p-space-2) 0',
-            borderBottomLeftRadius: 'var(--p-border-radius-200)',
-            borderBottomRightRadius: 'var(--p-border-radius-200)',
+            borderBottomLeftRadius: 'var(--p-border-radius-2)',
+            borderBottomRightRadius: 'var(--p-border-radius-2)',
           }}
           onScrolledToBottom={handleLazyLoadSegments}
         >
diff --git a/polaris-react/src/components/Listbox/components/Option/Option.scss b/polaris-react/src/components/Listbox/components/Option/Option.scss
index 1c99da8196f..735fd0f8373 100644
--- a/polaris-react/src/components/Listbox/components/Option/Option.scss
+++ b/polaris-react/src/components/Listbox/components/Option/Option.scss
@@ -11,5 +11,5 @@
 }
 
 .divider {
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/Listbox/components/Section/Section.scss b/polaris-react/src/components/Listbox/components/Section/Section.scss
index 506592a8974..a07ae1a6247 100644
--- a/polaris-react/src/components/Listbox/components/Section/Section.scss
+++ b/polaris-react/src/components/Listbox/components/Section/Section.scss
@@ -4,7 +4,7 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .noDivider {
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
index 6a33eeb1ae4..f7704b16659 100644
--- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
+++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
@@ -3,7 +3,7 @@
 .TextOption {
   margin: var(--p-space-1) var(--p-space-2) 0;
   flex: 1;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: var(--p-space-2) var(--p-space-2);
   cursor: pointer;
   display: flex;
@@ -11,7 +11,7 @@
   @include focus-ring;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
 
     &.selected::before {
@@ -73,10 +73,10 @@
     bottom: 0;
     left: calc(-1 * var(--p-space-1));
     height: 100%;
-    width: var(--p-border-radius-100);
+    width: var(--p-border-radius-1);
     background-color: var(--p-color-bg-interactive);
-    border-top-right-radius: var(--p-border-radius-100);
-    border-bottom-right-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-1);
+    border-bottom-right-radius: var(--p-border-radius-1);
     transform: translateX(-100%);
   }
 
diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
index 716fd4fd1b4..dbe1a98c307 100644
--- a/polaris-react/src/components/MediaCard/MediaCard.scss
+++ b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -23,8 +23,8 @@
 
     @media #{$p-breakpoints-md-up} {
       border-top-right-radius: 0;
-      border-top-left-radius: var(--p-border-radius-200);
-      border-bottom-left-radius: var(--p-border-radius-200);
+      border-top-left-radius: var(--p-border-radius-2);
+      border-bottom-left-radius: var(--p-border-radius-2);
     }
 
     &.sizeSmall {
@@ -33,8 +33,8 @@
   }
 
   @media #{$p-breakpoints-sm-up} {
-    border-top-left-radius: var(--p-border-radius-200);
-    border-top-right-radius: var(--p-border-radius-200);
+    border-top-left-radius: var(--p-border-radius-2);
+    border-top-right-radius: var(--p-border-radius-2);
   }
 }
 
diff --git a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
index 58f42ca37d0..254157e0852 100644
--- a/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
+++ b/polaris-react/src/components/MessageIndicator/MessageIndicator.scss
@@ -15,5 +15,5 @@ $indicator-position: -3px;
   height: $indicator-size;
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-icon-info);
-  border: solid var(--p-border-width-050) var(--p-color-bg-app);
+  border: solid var(--p-border-width-2) var(--p-color-bg-app);
 }
diff --git a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
index ea9fe8462ee..2e44bcd5c52 100644
--- a/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
+++ b/polaris-react/src/components/Modal/components/CloseButton/CloseButton.scss
@@ -8,7 +8,7 @@
   margin-left: var(--p-space-5);
   margin-right: calc(-1 * var(--p-space-2));
   padding: var(--p-space-2);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
 
   &:hover {
     background: var(--p-color-bg-hover);
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
index cbe5c2ed6ee..d40a3469a44 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -44,7 +44,7 @@ $large-width: 980px;
   box-shadow: var(--p-shadow-2xl);
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
   }
 
   @media #{$p-breakpoints-md-down} {
@@ -56,9 +56,9 @@ $large-width: 980px;
     position: relative;
     max-width: $small-width;
     margin: 0 auto;
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     #{$se23} & {
-      border-radius: var(--p-border-radius-400);
+      border-radius: var(--p-border-radius-4);
     }
   }
 
diff --git a/polaris-react/src/components/Modal/components/Footer/Footer.tsx b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
index 5976b91d3dd..a475019a2ad 100644
--- a/polaris-react/src/components/Modal/components/Footer/Footer.tsx
+++ b/polaris-react/src/components/Modal/components/Footer/Footer.tsx
@@ -38,7 +38,7 @@ export function Footer({
     <HorizontalStack gap="4" blockAlign="center">
       <Box
         borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
-        borderBlockStartWidth="025"
+        borderBlockStartWidth="1"
         minHeight={polarisSummerEditions2023 ? undefined : 'var(--p-space-16)'}
         padding="4"
         paddingInlineStart={polarisSummerEditions2023 ? undefined : '5'}
diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/polaris-react/src/components/Modal/components/Header/Header.tsx
index d21b0304628..25e4bfb0a51 100644
--- a/polaris-react/src/components/Modal/components/Header/Header.tsx
+++ b/polaris-react/src/components/Modal/components/Header/Header.tsx
@@ -52,7 +52,7 @@ export function Header({
       paddingBlockEnd="4"
       paddingInlineStart={headerPaddingInline}
       paddingInlineEnd={headerPaddingInline}
-      borderBlockEndWidth="025"
+      borderBlockEndWidth="1"
       borderColor={polarisSummerEditions2023 ? 'border' : 'border-subdued'}
       background={
         polarisSummerEditions2023 ? 'bg-secondary-experimental' : undefined
diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss
index ee4cd684bc7..f15a737a7dc 100644
--- a/polaris-react/src/components/Modal/components/Section/Section.scss
+++ b/polaris-react/src/components/Modal/components/Section/Section.scss
@@ -6,7 +6,7 @@ $close-button-width: calc(var(--p-space-12) + var(--p-space-1));
   flex: 0 0 auto;
 
   &:not(:last-of-type) {
-    border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index 330032bc08f..ace4719808d 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -18,7 +18,7 @@ $nav-max-width: 360px;
   min-height: 100%;
   background-color: var(--p-color-bg-app);
   -webkit-overflow-scrolling: touch;
-  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-right: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties
@@ -137,10 +137,10 @@ $nav-max-width: 360px;
 
 .Item,
 .ItemInnerWrapper {
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     transition: background-color var(--p-motion-duration-150)
       var(--p-motion-ease-out);
   }
@@ -276,8 +276,8 @@ $nav-max-width: 360px;
 
     #{$se23} & {
       background: var(--p-color-bg-app-selected);
-      border-top-right-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-top-right-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
     }
 
     &::before {
@@ -333,7 +333,7 @@ $nav-max-width: 360px;
 .Item-selected {
   font-weight: var(--p-font-weight-semibold);
   color: var(--p-color-text-primary);
-  outline: var(--p-border-width-025) solid transparent;
+  outline: var(--p-border-width-1) solid transparent;
 
   &::before {
     content: '';
@@ -343,8 +343,8 @@ $nav-max-width: 360px;
     left: calc(-1 * var(--p-space-2));
     width: $active-indicator-width;
     background-color: var(--p-color-bg-primary);
-    border-top-right-radius: var(--p-border-radius-100);
-    border-bottom-right-radius: var(--p-border-radius-100);
+    border-top-right-radius: var(--p-border-radius-1);
+    border-bottom-right-radius: var(--p-border-radius-1);
   }
 
   #{$se23} & {
@@ -463,7 +463,7 @@ $nav-max-width: 360px;
 
   &:not(:first-child) {
     .ItemInnerWrapper {
-      border-top: var(--p-border-width-025) solid var(--p-color-bg-app);
+      border-top: var(--p-border-width-1) solid var(--p-color-bg-app);
 
       #{$se23} & {
         border-top: 0;
@@ -575,8 +575,8 @@ $nav-max-width: 360px;
         background: var(--p-color-bg-subdued-hover);
         padding: 0 var(--p-space-05);
         margin-right: 0;
-        border-top-right-radius: var(--p-border-radius-200);
-        border-bottom-right-radius: var(--p-border-radius-200);
+        border-top-right-radius: var(--p-border-radius-2);
+        border-bottom-right-radius: var(--p-border-radius-2);
         transition: none;
       }
 
@@ -632,17 +632,17 @@ $nav-max-width: 360px;
   align-items: center;
   height: nav(mobile-height);
   padding: var(--p-space-1) calc(var(--p-space-2) + var(--p-space-05));
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     padding: calc(var(--p-space-2) - var(--p-space-05)) var(--p-space-2);
     height: calc(100% - var(--p-space-1));
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     &:focus-visible:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -814,7 +814,7 @@ $nav-max-width: 360px;
 
     #{$se23} & {
       color: var(--p-color-text);
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
 
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- necessary to override the specificity of the Text class
       .Text {
@@ -958,7 +958,7 @@ $nav-max-width: 360px;
 }
 
 .Section-withSeparator {
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .SectionHeading {
@@ -998,19 +998,19 @@ $nav-max-width: 360px;
     height: nav(mobile-nav-height);
     margin-right: var(--p-space-1);
     padding: var(--p-space-1) var(--p-space-4);
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     #{$se23} & {
       padding: calc(var(--p-space-1) - var(--p-space-05));
       height: calc(100% - var(--p-space-1));
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
       margin-right: calc(var(--p-space-2) + var(--p-space-05));
 
       // stylelint-disable-next-line selector-max-combinators -- se23
       &:focus-visible:not(:active) {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-050) solid
+        outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
       }
     }
diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
index 6ba80135a1e..e6bdfccd0d5 100644
--- a/polaris-react/src/components/Navigation/_variables.scss
+++ b/polaris-react/src/components/Navigation/_variables.scss
@@ -61,7 +61,7 @@ $nav-animation-variables: (
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
       z-index: var(--p-z-index-1);
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
     }
   }
@@ -94,7 +94,7 @@ $nav-animation-variables: (
 
     img {
       #{$se23} & {
-        border-radius: var(--p-border-radius-100);
+        border-radius: var(--p-border-radius-1);
       }
     }
   }
diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx
index dfb09766b8a..8b2a7fec58a 100644
--- a/polaris-react/src/components/OptionList/OptionList.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.tsx
@@ -148,7 +148,7 @@ export function OptionList({
             }
             borderColor="border-subdued"
             borderBlockStartWidth={
-              !isFirstOption && !polarisSummerEditions2023 ? '025' : undefined
+              !isFirstOption && !polarisSummerEditions2023 ? '1' : undefined
             }
           >
             <Text
diff --git a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
index f672fb06553..8571f75320c 100644
--- a/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/OptionList/components/Checkbox/Checkbox.scss
@@ -60,7 +60,7 @@
   width: 100%;
   height: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-050));
+  @include focus-ring($border-width: var(--p-border-width-2));
 }
 
 .Icon {
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
index a3895451544..d42091ce876 100644
--- a/polaris-react/src/components/OptionList/components/Option/Option.scss
+++ b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -12,7 +12,7 @@ $control-vertical-adjustment: 2px;
   min-height: $min-height;
   text-align: left;
   text-decoration: none;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   margin-top: var(--p-space-1);
   color: inherit;
 
@@ -44,7 +44,7 @@ $control-vertical-adjustment: 2px;
     #{$se23} & {
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
       background-color: var(--p-color-bg-subdued-hover);
@@ -97,14 +97,14 @@ $control-vertical-adjustment: 2px;
   align-items: flex-start;
   width: 100%;
   cursor: pointer;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: var(--p-space-2);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
 
   &:hover:not(.disabled) {
     background: var(--p-color-bg-hover);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
 
     #{$se23} & {
       background-color: var(--p-color-bg-subdued-hover);
@@ -112,7 +112,7 @@ $control-vertical-adjustment: 2px;
   }
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: var(--p-space-1_5-experimental);
 
     &:active:not(.disabled) {
@@ -140,7 +140,7 @@ $control-vertical-adjustment: 2px;
   &.select:hover:not(.disabled),
   &:active:not(.disabled) {
     background: var(--p-color-bg-interactive-selected);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   &.disabled {
diff --git a/polaris-react/src/components/Page/Page.scss b/polaris-react/src/components/Page/Page.scss
index 3626933930b..ff792519ad9 100644
--- a/polaris-react/src/components/Page/Page.scss
+++ b/polaris-react/src/components/Page/Page.scss
@@ -42,7 +42,7 @@ body {
 }
 
 .divider {
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   padding-top: var(--p-space-8);
 
   #{$se23} & {
diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
index b48ad0b7c68..a5d4ec19316 100644
--- a/polaris-react/src/components/Page/components/Header/Header.scss
+++ b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -21,7 +21,7 @@ $action-menu-rollup-computed-width: 40px;
     a,
     button {
       background-color: transparent;
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
       box-shadow: none;
 
       /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
@@ -46,13 +46,13 @@ $action-menu-rollup-computed-width: 40px;
 
   button {
     // stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-025) solid var(--p-color-border-strong) !important;
+    border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
     box-shadow: none !important;
 
     &:hover,
     &:active,
     &:focus {
-      border: var(--p-border-width-025) solid var(--p-color-border-strong) !important;
+      border: var(--p-border-width-1) solid var(--p-color-border-strong) !important;
       // stylelint-enable declaration-no-important
     }
   }
diff --git a/polaris-react/src/components/PageActions/PageActions.scss b/polaris-react/src/components/PageActions/PageActions.scss
index 1706df82233..d66cdf228ce 100644
--- a/polaris-react/src/components/PageActions/PageActions.scss
+++ b/polaris-react/src/components/PageActions/PageActions.scss
@@ -3,7 +3,7 @@
 .PageActions {
   margin: 0 auto;
   padding: var(--p-space-5);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
     border-top: 0;
diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
index dbcafe62444..7202f68c781 100644
--- a/polaris-react/src/components/Popover/Popover.scss
+++ b/polaris-react/src/components/Popover/Popover.scss
@@ -10,13 +10,13 @@ $vertical-motion-offset: -5px;
   max-width: calc(100vw - var(--p-space-8));
   margin: $visible-portion-of-arrow var(--p-space-2) var(--p-space-4);
   box-shadow: var(--p-shadow-xl);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
   will-change: left, top;
 
   #{$se23} & {
     @include shadow-bevel(
       $boxShadow: var(--p-shadow-md),
-      $borderRadius: var(--p-border-radius-300),
+      $borderRadius: var(--p-border-radius-3),
       $zIndex: 2
     );
   }
@@ -80,7 +80,7 @@ $vertical-motion-offset: -5px;
   position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   max-width: $content-max-width;
   max-height: $content-max-height;
 
@@ -103,7 +103,7 @@ $vertical-motion-offset: -5px;
   max-width: 100%;
 
   + .Pane {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -130,7 +130,7 @@ $vertical-motion-offset: -5px;
 
 .Section {
   + .Section {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 }
 
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 52e5a0dae6b..8c51e39ab47 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -406,8 +406,8 @@ export function WithScrollableLazyLoadedList() {
                 width: polarisSummerEditions2023 ? '231px' : '310px',
                 height: polarisSummerEditions2023 ? '262px' : '292px',
                 padding: 'var(--p-space-2) 0',
-                borderBottomLeftRadius: 'var(--p-border-radius-200)',
-                borderBottomRightRadius: 'var(--p-border-radius-200)',
+                borderBottomLeftRadius: 'var(--p-border-radius-2)',
+                borderBottomRightRadius: 'var(--p-border-radius-2)',
               }}
               onScrolledToBottom={handleScrolledToBottom}
             >
@@ -756,8 +756,8 @@ export function WithSearchableListbox() {
                 width: '310px',
                 height: polarisSummerEditions2023 ? '262px' : '292px',
                 padding: 'var(--p-space-2) 0',
-                borderBottomLeftRadius: 'var(--p-border-radius-200)',
-                borderBottomRightRadius: 'var(--p-border-radius-200)',
+                borderBottomLeftRadius: 'var(--p-border-radius-2)',
+                borderBottomRightRadius: 'var(--p-border-radius-2)',
               }}
               onScrolledToBottom={handleLazyLoadSegments}
             >
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 5f4d68eddf7..5cba6b24586 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -18,10 +18,10 @@
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   background-color: var(--pc-progress-bar-background);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   @media (forced-colors: active) {
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
   }
 }
 
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
index 7b2acb228ca..84cba115c10 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.scss
+++ b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -17,7 +17,7 @@
     #{$se23} & {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 radio overrides */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -73,7 +73,7 @@
     .ChoiceLabel:active & {
       #{$se23} & {
         border-color: var(--p-color-bg-primary);
-        border-width: var(--p-border-width-050);
+        border-width: var(--p-border-width-2);
       }
     }
   }
@@ -112,7 +112,7 @@
 
 .Backdrop {
   #{$se23} & {
-    border-width: var(--p-border-width-0165);
+    border-width: var(--p-border-width-1-experimental);
     background-color: var(--p-color-bg-input);
     transition: border-color var(--p-motion-duration-100)
       var(--p-motion-ease-out);
@@ -137,7 +137,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-050) solid var(--p-color-border-input);
+  border: var(--p-border-width-2) solid var(--p-color-border-input);
   border-radius: var(--p-border-radius-full);
   background-color: var(--p-color-bg);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease);
@@ -165,7 +165,7 @@
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-050));
+  @include focus-ring($border-width: var(--p-border-width-2));
 
   &::after {
     border-radius: var(--p-border-radius-full);
diff --git a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
index dadaad285ee..bc56bd9a160 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
+++ b/polaris-react/src/components/RadioButton/RadioButton.stories.tsx
@@ -107,7 +107,7 @@ export function WithBleed() {
       </VerticalStack>
       <VerticalStack gap="2">
         <Text as="h2">Bleed</Text>
-        <Box width="min-content" background="bg" borderRadius="300">
+        <Box width="min-content" background="bg" borderRadius="3">
           <div
             // Flex to shrink the container to the height of the radio (ie;
             // ignore line-height)
diff --git a/polaris-react/src/components/RangeSlider/RangeSlider.scss b/polaris-react/src/components/RangeSlider/RangeSlider.scss
index bfe31e6b9a7..e5e564beaab 100644
--- a/polaris-react/src/components/RangeSlider/RangeSlider.scss
+++ b/polaris-react/src/components/RangeSlider/RangeSlider.scss
@@ -4,7 +4,7 @@
   --pc-range-slider-output: 20;
   --pc-range-slider-track-height: 4px;
   --pc-range-slider-thumb-size: 16px;
-  --pc-track-dashed-border-radius: var(--p-border-radius-100);
+  --pc-track-dashed-border-radius: var(--p-border-radius-1);
   // stylelint-enable
 }
 
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index 0dd07875d1c..cbae4c74a16 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -93,7 +93,7 @@ $range-wrapper: 28px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-range-slider-thumb-size);
   border-radius: var(--p-border-radius-full);
-  border: var(--p-border-width-025) solid var(--p-color-border-interactive);
+  border: var(--p-border-width-1) solid var(--p-color-border-interactive);
   background: linear-gradient(
     var(--p-color-bg-interactive),
     var(--p-color-bg-interactive)
@@ -173,7 +173,7 @@ $range-output-size: 32px;
   height: $range-output-size;
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-xl);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   transition-property: transform;
   transition-duration: var(--p-motion-duration-150);
   transition-timing-function: var(--p-motion-ease);
diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index 56694a26138..9c768228a56 100644
--- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -3,7 +3,7 @@
 
 @mixin range-track-selectors {
   &::-ms-track {
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
     @content;
   }
 
@@ -152,7 +152,7 @@
     width: var(--pc-range-slider-thumb-size);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     height: var(--pc-range-slider-thumb-size);
-    border: var(--p-border-width-025) solid transparent;
+    border: var(--p-border-width-1) solid transparent;
     border-radius: var(--p-border-radius-full);
     background: linear-gradient(
       var(--p-color-bg-interactive),
@@ -200,11 +200,11 @@
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   &:focus {
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include range-thumb-selectors {
       border-color: var(--p-color-bg);
-      box-shadow: 0 0 0 var(--p-border-width-050)
+      box-shadow: 0 0 0 var(--p-border-width-2)
         var(--p-color-border-interactive-focus);
     }
   }
@@ -283,11 +283,11 @@ $range-output-translate-x: calc(
   min-width: $range-output-size;
   height: $range-output-size;
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   transition-property: transform;
   transition-duration: var(--p-motion-duration-200);
   transition-timing-function: var(--p-motion-ease);
-  outline: var(--p-border-width-025) solid transparent;
+  outline: var(--p-border-width-1) solid transparent;
 
   // stylelint-disable selector-max-specificity, selector-max-combinators, selector-max-class -- generated by polaris-migrator DO NOT COPY
   .Input:hover + .Output &,
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 7266afc0539..695df73e291 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -123,7 +123,7 @@
   @include focus-ring($border-width: -1px);
 
   .ListItem + & {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       @include item-separator;
@@ -133,21 +133,21 @@
   &:not(.hasBulkActions):not(.selectMode) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     &::after {
-      border-radius: var(--p-border-radius-050);
+      border-radius: var(--p-border-radius-05);
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     &:last-of-type {
-      border-bottom-left-radius: var(--p-border-radius-200);
-      border-bottom-right-radius: var(--p-border-radius-200);
+      border-bottom-left-radius: var(--p-border-radius-2);
+      border-bottom-right-radius: var(--p-border-radius-2);
       // stylelint-disable selector-max-specificity -- Needed due to the nesting of the elements that change border-radius based on selection mode
       .ItemWrapper {
         border-radius: inherit;
       }
 
       &.focused::after {
-        border-bottom-left-radius: var(--p-border-radius-200);
-        border-bottom-right-radius: var(--p-border-radius-200);
+        border-bottom-left-radius: var(--p-border-radius-2);
+        border-bottom-right-radius: var(--p-border-radius-2);
       }
       // stylelint-enable
     }
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 32010d056f6..e1279697129 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.scss
+++ b/polaris-react/src/components/ResourceList/ResourceList.scss
@@ -31,7 +31,7 @@ $item-wrapper-loading-height: 64px;
   }
 
   + .ResourceList {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -45,8 +45,8 @@ $item-wrapper-loading-height: 64px;
   background-color: var(--p-color-bg);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: resource-list(header-outer-wrapper-stacking-order);
-  border-top-left-radius: var(--p-border-radius-200);
-  border-top-right-radius: var(--p-border-radius-200);
+  border-top-left-radius: var(--p-border-radius-2);
+  border-top-right-radius: var(--p-border-radius-2);
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- Ssshhhhh
   + .ResourceList,
@@ -54,7 +54,7 @@ $item-wrapper-loading-height: 64px;
   // list dynamically when an item is checked, so we have to handle that case
   // here.
   + .BulkActionsWrapper + .ResourceList {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
@@ -87,7 +87,7 @@ $item-wrapper-loading-height: 64px;
   min-height: resource-list(header-min-height);
   padding: calc(var(--p-space-3) - var(--p-space-05)) var(--p-space-5);
   background-color: var(--p-color-bg);
-  border-radius: var(--p-border-radius-200);
+  border-radius: var(--p-border-radius-2);
   #{$se23} & {
     // This container conditionally includes a Select component for sorting
     // It's 32px above md-up and 36px below
@@ -308,7 +308,7 @@ $item-wrapper-loading-height: 64px;
   max-width: 100%;
 
   + .ItemWrapper {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
     #{$se23} & {
       border-top: none;
diff --git a/polaris-react/src/components/ResourceList/_variables.scss b/polaris-react/src/components/ResourceList/_variables.scss
index 8d76db39e95..7f5d128d9c7 100644
--- a/polaris-react/src/components/ResourceList/_variables.scss
+++ b/polaris-react/src/components/ResourceList/_variables.scss
@@ -19,5 +19,5 @@ $resource-list-variables: (
 }
 
 @mixin item-separator {
-  border-top: var(--p-border-width-025) solid var(--p-color-border);
+  border-top: var(--p-border-width-1) solid var(--p-color-border);
 }
diff --git a/polaris-react/src/components/Scrollable/Scrollable.scss b/polaris-react/src/components/Scrollable/Scrollable.scss
index 6323726f70f..4b94121e198 100644
--- a/polaris-react/src/components/Scrollable/Scrollable.scss
+++ b/polaris-react/src/components/Scrollable/Scrollable.scss
@@ -23,7 +23,7 @@
   isolation: isolate;
 
   &:focus {
-    outline: var(--p-border-width-050) solid
+    outline: var(--p-border-width-2) solid
       var(--p-color-border-interactive-focus);
     outline-offset: var(--p-space-05);
   }
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
index 099a4a8868a..e56f03b3977 100644
--- a/polaris-react/src/components/Select/Select.scss
+++ b/polaris-react/src/components/Select/Select.scss
@@ -161,8 +161,8 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--p-border-width-025) solid var(--p-color-border-input);
-  border-radius: var(--p-border-radius-100);
+  border: var(--p-border-width-1) solid var(--p-color-border-input);
+  border-radius: var(--p-border-radius-1);
   background-color: var(--p-color-bg);
   box-shadow: var(--p-shadow-sm);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -172,8 +172,8 @@
 
   #{$se23} & {
     background-color: var(--p-color-bg-input);
-    border-radius: var(--p-border-radius-200);
-    border-width: var(--p-border-width-0165);
+    border-radius: var(--p-border-radius-2);
+    border-width: var(--p-border-width-1-experimental);
     box-shadow: none;
   }
 }
@@ -204,7 +204,7 @@
 
     #{$se23} & {
       border-color: var(--p-color-border-critical-strong-experimental);
-      border-width: var(--p-border-width-025);
+      border-width: var(--p-border-width-2-experimental);
       background-color: var(--p-color-bg-critical-subdued);
     }
   }
@@ -217,11 +217,11 @@
 
     #{$se23} & {
       border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-025);
+      border-width: var(--p-border-width-2-experimental);
       background-color: var(--p-color-bg-input-active-experimental);
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
index bf486c6f879..bbec571a8ec 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.stories.tsx
@@ -35,13 +35,13 @@ export function Default() {
 
   return (
     <VerticalStack gap="5">
-      <ShadowBevel boxShadow="md" borderRadius="300">
+      <ShadowBevel boxShadow="md" borderRadius="3">
         <Box background="bg" padding="4">
           Default
         </Box>
       </ShadowBevel>
 
-      <ShadowBevel boxShadow="md" borderRadius="300" bevel={false}>
+      <ShadowBevel boxShadow="md" borderRadius="3" bevel={false}>
         <Box background="bg" padding="4">
           With <InlineCode>bevel: false</InlineCode>
         </Box>
@@ -49,7 +49,7 @@ export function Default() {
 
       <ShadowBevel
         boxShadow="md"
-        borderRadius="300"
+        borderRadius="3"
         bevel={{xs: false, sm: true}}
       >
         <Box background="bg" padding="4">
@@ -59,7 +59,7 @@ export function Default() {
 
       <ShadowBevel
         boxShadow="md"
-        borderRadius="300"
+        borderRadius="3"
         bevel={{xs: false, sm: true, lg: false}}
       >
         <Box background="bg" padding="4">
@@ -68,7 +68,7 @@ export function Default() {
         </Box>
       </ShadowBevel>
 
-      <ShadowBevel as="article" boxShadow="md" borderRadius="300">
+      <ShadowBevel as="article" boxShadow="md" borderRadius="3">
         <Box background="bg" padding="4">
           With <InlineCode>as: article</InlineCode>
         </Box>
@@ -79,7 +79,7 @@ export function Default() {
           <ShadowBevel
             key={`${background}-${color}`}
             boxShadow="md"
-            borderRadius="300"
+            borderRadius="3"
           >
             <Box background={background} color={color} padding="4">
               {background}
diff --git a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
index 97aed7b826e..c84e409497a 100644
--- a/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
+++ b/polaris-react/src/components/ShadowBevel/ShadowBevel.tsx
@@ -67,7 +67,7 @@ export function ShadowBevel(props: ShadowBevelProps) {
           mapResponsiveProp(bevel, (bevel) =>
             bevel
               ? `var(--p-border-radius-${borderRadius})`
-              : 'var(--p-border-radius-0)',
+              : 'var(--p-border-radius-0-experimental)',
           ),
         ),
       }}
diff --git a/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx b/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
index 4f4a5443aa2..6773ea966c2 100644
--- a/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
+++ b/polaris-react/src/components/ShadowBevel/tests/ShadowBevel.test.tsx
@@ -6,7 +6,7 @@ import {ShadowBevel} from '..';
 describe('ShadowBevel', () => {
   it('renders children', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="300">
+      <ShadowBevel boxShadow="md" borderRadius="3">
         <p>hello</p>
         <p>world</p>
       </ShadowBevel>,
@@ -17,13 +17,14 @@ describe('ShadowBevel', () => {
 
   it('disables bevel effect', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="300" bevel={false} />,
+      <ShadowBevel boxShadow="md" borderRadius="3" bevel={false} />,
     );
 
     expect(shadowBevel).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-shadow-bevel-box-shadow-xs': 'none',
-        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-0)',
+        '--pc-shadow-bevel-border-radius-xs':
+          'var(--p-border-radius-0-experimental)',
         '--pc-shadow-bevel-content-xs': 'none',
       }),
     });
@@ -31,13 +32,13 @@ describe('ShadowBevel', () => {
 
   it('sets boxShadow and borderRadius props as inline styles', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel boxShadow="md" borderRadius="300" />,
+      <ShadowBevel boxShadow="md" borderRadius="3" />,
     );
 
     expect(shadowBevel).toContainReactComponent('div', {
       style: expect.objectContaining({
         '--pc-shadow-bevel-box-shadow-xs': 'var(--p-shadow-md)',
-        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-300)',
+        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-3)',
         '--pc-shadow-bevel-content-xs': '""',
       }),
     });
@@ -47,7 +48,7 @@ describe('ShadowBevel', () => {
     const shadowBevel = mountWithApp(
       <ShadowBevel
         boxShadow="md"
-        borderRadius="300"
+        borderRadius="3"
         bevel={{xs: false, sm: true, lg: false}}
       />,
     );
@@ -57,9 +58,11 @@ describe('ShadowBevel', () => {
         '--pc-shadow-bevel-box-shadow-xs': 'none',
         '--pc-shadow-bevel-box-shadow-sm': 'var(--p-shadow-md)',
         '--pc-shadow-bevel-box-shadow-lg': 'none',
-        '--pc-shadow-bevel-border-radius-xs': 'var(--p-border-radius-0)',
-        '--pc-shadow-bevel-border-radius-sm': 'var(--p-border-radius-300)',
-        '--pc-shadow-bevel-border-radius-lg': 'var(--p-border-radius-0)',
+        '--pc-shadow-bevel-border-radius-xs':
+          'var(--p-border-radius-0-experimental)',
+        '--pc-shadow-bevel-border-radius-sm': 'var(--p-border-radius-3)',
+        '--pc-shadow-bevel-border-radius-lg':
+          'var(--p-border-radius-0-experimental)',
         '--pc-shadow-bevel-content-xs': 'none',
         '--pc-shadow-bevel-content-sm': '""',
         '--pc-shadow-bevel-content-lg': 'none',
@@ -69,7 +72,7 @@ describe('ShadowBevel', () => {
 
   it('sets as prop to the root element', () => {
     const shadowBevel = mountWithApp(
-      <ShadowBevel as="article" boxShadow="md" borderRadius="300" />,
+      <ShadowBevel as="article" boxShadow="md" borderRadius="3" />,
     );
 
     expect(shadowBevel).toContainReactComponent('article');
diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
index 615ee29ed53..b45d7a90abf 100644
--- a/polaris-react/src/components/Sheet/Sheet.scss
+++ b/polaris-react/src/components/Sheet/Sheet.scss
@@ -11,7 +11,7 @@ $sheet-desktop-width: 380px;
   box-shadow: var(--p-shadow-2xl);
 
   @media screen and (-ms-high-contrast: active) {
-    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-1) solid var(--p-color-border-subdued);
   }
 
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
index 35c2064484e..560ca0ebf55 100644
--- a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
+++ b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
@@ -10,7 +10,7 @@ $body-text-last-line-width: 80%;
   height: var(--p-space-2);
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   @media screen and (-ms-high-contrast: active) {
     background-color: grayText;
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
index 9ae0d266fd1..c4259765816 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
@@ -21,7 +21,7 @@ $skeleton-display-text-max-width: 120px;
 
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   @media screen and (-ms-high-contrast: active) {
     background-color: grayText;
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index 0e0e78d6825..8fec2c10216 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -40,7 +40,7 @@ export function SkeletonPage({
         background="bg-strong"
         minWidth="120px"
         minHeight="28px"
-        borderRadius="100"
+        borderRadius="1"
       />
     </div>
   );
@@ -48,7 +48,7 @@ export function SkeletonPage({
   const primaryActionMarkup = primaryAction ? (
     <Box
       id="SkeletonPage-PrimaryAction"
-      borderRadius="100"
+      borderRadius="1"
       background="bg-strong"
       minHeight="2.25rem"
       minWidth="6.25rem"
@@ -57,7 +57,7 @@ export function SkeletonPage({
 
   const backActionMarkup = backAction ? (
     <Box
-      borderRadius="100"
+      borderRadius="1"
       background="bg-strong"
       minHeight="2.25rem"
       minWidth="2.25rem"
diff --git a/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss b/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
index 34193f1a3ec..190d912a2a7 100644
--- a/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
+++ b/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
@@ -1,7 +1,7 @@
 .Tabs {
   display: flex;
   width: 100%;
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
 
 .Tab {
@@ -19,8 +19,8 @@
     left: var(--p-space-3);
     right: var(--p-space-3);
     height: var(--p-border-width-3);
-    border-top-left-radius: var(--p-border-radius-100);
-    border-top-right-radius: var(--p-border-radius-100);
+    border-top-left-radius: var(--p-border-radius-1);
+    border-top-right-radius: var(--p-border-radius-1);
   }
 }
 
diff --git a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
index a39b270ecda..4b63b4acdf6 100644
--- a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
+++ b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
@@ -9,14 +9,14 @@
   // stylelint-enable
   display: flex;
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     // stylelint-disable -- Polaris component custom properties, se23 temporary styles
     --pc-skeleton-thumbnail-extra-small-size: 40px;
     --pc-skeleton-thumbnail-small-size: 48px;
     // stylelint-enable
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 
   @media screen and (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
index b6c6c455306..dd94922fdb2 100644
--- a/polaris-react/src/components/Tabs/Tabs.scss
+++ b/polaris-react/src/components/Tabs/Tabs.scss
@@ -75,7 +75,7 @@
   height: var(--p-space-8);
   padding: 0 var(--p-space-3);
   border: 0;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   background: var(--p-color-bg);
   color: var(--p-color-text-subdued);
   cursor: pointer;
@@ -125,7 +125,7 @@
     @include focus-ring($size: 'wide');
     color: var(--p-color-text-primary);
     background-color: transparent;
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
     height: 2rem;
 
@@ -182,7 +182,7 @@
   #{$se23} & {
     background: var(--p-color-bg-transparent-active-experimental);
     color: var(--p-color-text);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     &[aria-disabled='true'] {
       background: var(--p-color-bg-disabled);
@@ -257,7 +257,7 @@
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: inherit;
 
   &::-moz-focus-inner {
@@ -304,7 +304,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   padding: 0 var(--p-space-2) 0 var(--p-space-3);
   margin-top: var(--p-space-025);
   border: none;
@@ -343,7 +343,7 @@
   #{$se23} & {
     background-color: transparent;
     color: var(--p-color-text-primary);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
 
     // stylelint-disable-next-line selector-max-combinators -- Polaris component experimental styles
     svg {
diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss
index 617105a116c..399647a833e 100644
--- a/polaris-react/src/components/Tag/Tag.scss
+++ b/polaris-react/src/components/Tag/Tag.scss
@@ -10,7 +10,7 @@ $button-size: 20px;
   min-height: 28px;
   padding: 0 var(--p-space-2);
   background-color: var(--p-color-bg-strong);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: var(--p-color-text);
 
   &.disabled {
@@ -29,7 +29,7 @@ $button-size: 20px;
     cursor: pointer;
     padding: var(--p-space-1) var(--p-space-2);
     background-color: var(--p-color-bg-strong);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     font-size: 13px;
     line-height: var(--p-font-line-height-2);
@@ -58,7 +58,7 @@ $button-size: 20px;
       color: var(--p-color-text-disabled);
 
       #{$se23} & {
-        border: var(--p-border-width-025) solid var(--p-color-border-strong);
+        border: var(--p-border-width-1) solid var(--p-color-border-strong);
       }
     }
 
@@ -103,7 +103,7 @@ $button-size: 20px;
 
   #{$se23} & {
     min-height: $height;
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding-inline: calc(var(--p-space-1) + var(--p-space-05));
 
     &.removable {
@@ -158,7 +158,7 @@ $button-size: 20px;
 
   &:hover {
     background: var(--p-color-bg-strong-hover);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -216,7 +216,7 @@ $button-size: 20px;
   display: inline-grid;
   color: var(--p-color-text);
   outline: none;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   text-decoration: none;
   min-height: $height;
   padding: 0 var(--p-space-2);
@@ -268,7 +268,7 @@ $button-size: 20px;
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
     @include focus-ring('wide');
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     padding: 0;
 
     &:active {
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index 79e964e7269..7bd770b94a8 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -81,12 +81,12 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-025);
+      border-width: var(--p-border-width-2-experimental);
       background-color: var(--p-color-bg-input-active-experimental);
 
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -104,7 +104,7 @@ $spinner-icon-size: 12px;
     // stylelint-disable-next-line -- se23
     .Input:active ~ .Backdrop,
     .Input:focus-visible ~ .Backdrop {
-      border-width: var(--p-border-width-025);
+      border-width: var(--p-border-width-2-experimental);
     }
   }
 
@@ -190,7 +190,7 @@ $spinner-icon-size: 12px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   padding: control-vertical-padding() var(--p-space-3);
   background: none;
-  border: var(--p-border-width-025) solid transparent;
+  border: var(--p-border-width-1) solid transparent;
   font-family: var(--p-font-family-sans);
   appearance: none;
   caret-color: var(--p-color-text);
@@ -250,7 +250,7 @@ $spinner-icon-size: 12px;
   }
 
   &:-webkit-autofill {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
   }
 
   &.suggestion {
@@ -306,15 +306,15 @@ $spinner-icon-size: 12px;
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg);
-  border: var(--p-border-width-025) solid var(--p-color-border-input);
+  border: var(--p-border-width-1) solid var(--p-color-border-input);
   // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
   border-top-color: #898f94;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   pointer-events: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
-    border-width: var(--p-border-width-0165);
+    border-radius: var(--p-border-radius-2);
+    border-width: var(--p-border-width-1-experimental);
     background-color: var(--p-color-bg-input);
   }
 }
@@ -356,7 +356,7 @@ $spinner-icon-size: 12px;
   padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2);
   max-height: 140px;
   overflow: scroll;
-  border: var(--p-border-width-025) solid transparent;
+  border: var(--p-border-width-1) solid transparent;
   width: 100%;
 
   > .Input {
@@ -417,7 +417,7 @@ $spinner-icon-size: 12px;
 
 .Spinner {
   // stylelint-disable -- Polaris component custom properties
-  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-025));
+  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-1));
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
@@ -486,7 +486,7 @@ $spinner-icon-size: 12px;
 
 .Segment {
   // stylelint-disable -- Polaris component custom properties
-  --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-100) - 2px);
+  --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-1) - 2px);
   // stylelint-enable
   background: var(--p-color-bg-strong);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -499,7 +499,7 @@ $spinner-icon-size: 12px;
   border: none;
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     &:hover {
       background: var(--p-color-bg-strong-hover);
diff --git a/polaris-react/src/components/Thumbnail/Thumbnail.scss b/polaris-react/src/components/Thumbnail/Thumbnail.scss
index c4496c0cd9e..814ecff654f 100644
--- a/polaris-react/src/components/Thumbnail/Thumbnail.scss
+++ b/polaris-react/src/components/Thumbnail/Thumbnail.scss
@@ -14,11 +14,11 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: var(--pc-thumbnail-extra-small-size);
   max-width: 100%;
-  border-radius: var(--p-border-radius-100);
-  border: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-radius: var(--p-border-radius-1);
+  border: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     border: none;
 
     &::after {
@@ -28,13 +28,13 @@
       right: 0;
       bottom: 0;
       position: absolute;
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
       box-shadow: var(--p-shadow-border-inset-experimental);
     }
 
     &.sizeExtraSmall,
     &.sizeExtraSmall::after {
-      border-radius: var(--p-border-radius-150);
+      border-radius: var(--p-border-radius-1_5-experimental);
     }
 
     &::before {
diff --git a/polaris-react/src/components/Tooltip/Tooltip.scss b/polaris-react/src/components/Tooltip/Tooltip.scss
index eda433abd38..b05a314bdb0 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.scss
+++ b/polaris-react/src/components/Tooltip/Tooltip.scss
@@ -3,5 +3,5 @@
 }
 
 .HasUnderline {
-  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
index 159d76fd702..0c52c4229e5 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -205,7 +205,7 @@ export function BorderRadius() {
         <Tooltip
           active
           content="This content has a border radius of 2 (radius-2)"
-          borderRadius="200"
+          borderRadius="2"
         >
           <HorizontalStack gap="1">
             <Text variant="bodyLg" fontWeight="medium" as="span">
diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx
index e90d178dbef..29d4fc63fed 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.tsx
+++ b/polaris-react/src/components/Tooltip/Tooltip.tsx
@@ -14,10 +14,7 @@ import styles from './Tooltip.scss';
 
 export type Width = 'default' | 'wide';
 export type Padding = 'default' | Extract<SpaceScale, '4'>;
-export type BorderRadius = Extract<
-  BorderRadiusScale,
-  '1' | '2' | '100' | '200'
->;
+export type BorderRadius = Extract<BorderRadiusScale, '1' | '2'>;
 
 export interface TooltipProps {
   /** The element that will activate to tooltip */
@@ -91,7 +88,7 @@ export function Tooltip({
 }: TooltipProps) {
   const {polarisSummerEditions2023} = useFeatures();
   const borderRadius =
-    borderRadiusProp || (polarisSummerEditions2023 ? '200' : '100');
+    borderRadiusProp || (polarisSummerEditions2023 ? '2' : '1');
 
   const WrapperComponent: any = activatorWrapper;
   const {
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 8d58750b87b..397efb0e74d 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -34,7 +34,7 @@
   }
 
   @media screen and (-ms-high-contrast: active) {
-    border: var(--p-border-width-050) solid windowText;
+    border: var(--p-border-width-2) solid windowText;
   }
 
   &::after {
diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
index 70fa6ff530f..0207a133670 100644
--- a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
+++ b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
@@ -366,14 +366,14 @@ describe('<Tooltip />', () => {
 
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-200)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-2)',
         }) as React.CSSProperties,
       });
     });
 
     it('renders content with a border radius of 2 when declared', () => {
       const tooltip = mountWithApp(
-        <Tooltip content="Inner content" borderRadius="200">
+        <Tooltip content="Inner content" borderRadius="2">
           <Link>link content</Link>
         </Tooltip>,
       );
@@ -381,7 +381,7 @@ describe('<Tooltip />', () => {
       findWrapperComponent(tooltip)!.trigger('onMouseOver');
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-200)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-2)',
         }) as React.CSSProperties,
       });
     });
@@ -525,7 +525,7 @@ describe('<Tooltip />', () => {
 
       expect(tooltip.find(TooltipOverlay)).toContainReactComponent('div', {
         style: expect.objectContaining({
-          '--pc-tooltip-border-radius': 'var(--p-border-radius-100)',
+          '--pc-tooltip-border-radius': 'var(--p-border-radius-1)',
         }) as React.CSSProperties,
       });
     });
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index 29a66f1a0d8..da8fe99acc3 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -38,7 +38,7 @@ $right-column: 1fr;
     position: absolute;
     bottom: 0;
     width: 100%;
-    border-bottom: var(--p-border-width-025) solid transparent;
+    border-bottom: var(--p-border-width-1) solid transparent;
   }
 }
 
@@ -83,10 +83,10 @@ $right-column: 1fr;
 
   #{$se23} & {
     &:focus-visible {
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-1_5-experimental);
-      border-radius: var(--p-border-radius-200);
+      border-radius: var(--p-border-radius-2);
     }
   }
 }
@@ -111,7 +111,7 @@ $right-column: 1fr;
   margin-left: calc(var(--p-space-2) + var(--p-space-05));
   margin-right: var(--p-space-2);
   padding: var(--p-space-2);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   fill: var(--p-color-icon); // Icon will inherit this fill
   transition: var(--p-motion-duration-150) fill var(--p-motion-ease)
     var(--p-motion-duration-50);
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index 4bd4359cfbd..dd6890c577a 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -32,13 +32,13 @@ $activator-variables: (
   cursor: pointer;
   transition: background-color var(--p-motion-duration-100);
   margin-right: var(--p-space-2);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     color: var(--p-color-text-inverse);
     padding: var(--p-space-1_5-experimental);
     background-color: var(--p-color-bg-inset-strong);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     min-width: auto;
     min-height: menu(min-height);
 
@@ -64,7 +64,7 @@ $activator-variables: (
     #{$se23} & {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
@@ -129,5 +129,5 @@ $activator-variables: (
 .Section {
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
index 634db9eb486..f27d74c82fc 100644
--- a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.scss
@@ -6,5 +6,5 @@ $section-max-width: 325px;
   max-width: $section-max-width;
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
 }
diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
index f25b69f3413..ba9119c2a55 100644
--- a/polaris-react/src/components/TopBar/components/Search/Search.scss
+++ b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -17,7 +17,7 @@
     top: 100%;
     max-width: $search-max-width;
     margin: var(--p-space-1) var(--p-space-5) 0;
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index 20575734e8c..eb935cc37f8 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -21,7 +21,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   display: flex;
   flex: 1 1 auto;
   align-items: center;
-  border: var(--p-border-width-025) solid transparent;
+  border: var(--p-border-width-1) solid transparent;
   width: 100%;
 }
 // We have both a focused class and a focus pseudo selector here
@@ -55,7 +55,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
   ~ .BackdropShowFocusBorder {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-025) solid var(--pc-top-bar-border);
+    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -72,7 +72,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   #{$se23} & {
     // stylelint-disable-next-line -- se23
     ~ .Backdrop {
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-05);
     }
@@ -87,7 +87,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 .focused {
   .BackdropShowFocusBorder {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border: var(--p-border-width-025) solid var(--pc-top-bar-border);
+    border: var(--p-border-width-1) solid var(--pc-top-bar-border);
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -120,8 +120,9 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
     color: var(--p-color-text-inverse-subdued);
     height: $new-input-height-se23;
-    border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-200);
+    border: var(--p-border-width-1-experimental) solid
+      var(--p-color-border-inverse);
+    border-radius: var(--p-border-radius-2);
 
     &:hover {
       border-color: var(--p-color-border-hover);
@@ -129,7 +130,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
 
     &:active,
     &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-025) var(--p-color-border);
+      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
     }
   }
 
@@ -238,12 +239,12 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   bottom: 0;
   left: 0;
   background-color: var(--p-color-bg-inset);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 overrides */
     @include no-focus-ring;
     background-color: var(--p-color-bg-inset-strong);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 }
diff --git a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
index f688fac43a4..abbd6e50de8 100644
--- a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
+++ b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
@@ -66,7 +66,7 @@ $progress-bar-height: 6px;
   padding: var(--p-space-1) var(--p-space-2) var(--p-space-1) var(--p-space-1);
   margin-bottom: var(--p-space-4);
   margin-left: var(--p-space-4);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: var(--p-color-text-on-color);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   background-color: rgba(0, 0, 0, 0.6);
@@ -76,7 +76,7 @@ $progress-bar-height: 6px;
 
   #{$se23} & {
     background-color: var(--p-color-bg-backdrop-experimental);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
   }
 }
 
diff --git a/polaris-react/src/styles/foundation/_focus-ring.scss b/polaris-react/src/styles/foundation/_focus-ring.scss
index 575910d7ce9..0febde8b5cf 100644
--- a/polaris-react/src/styles/foundation/_focus-ring.scss
+++ b/polaris-react/src/styles/foundation/_focus-ring.scss
@@ -10,8 +10,8 @@
   $offset: if($border-width == 0, 1px, calc(#{$border-width} + 1px));
   $border-radius: if(
     $size == 'wide',
-    var(--p-border-radius-200),
-    var(--p-border-radius-100)
+    var(--p-border-radius-2),
+    var(--p-border-radius-1)
   );
   $negative-offset: calc(-1 * #{$offset});
 
@@ -40,7 +40,7 @@
   } @else if $style == 'focused' {
     &::after {
       box-shadow: 0 0 0 $stroke var(--p-color-border-interactive-focus);
-      outline: var(--p-border-width-025) solid transparent;
+      outline: var(--p-border-width-1) solid transparent;
       @content;
     }
   }
diff --git a/polaris-react/src/styles/shared/_buttons.scss b/polaris-react/src/styles/shared/_buttons.scss
index 4d93739e638..016df7624bd 100644
--- a/polaris-react/src/styles/shared/_buttons.scss
+++ b/polaris-react/src/styles/shared/_buttons.scss
@@ -4,7 +4,7 @@
   );
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: var(--p-border-width-025));
+  @include focus-ring($border-width: var(--p-border-width-1));
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -15,9 +15,9 @@
   padding: $vertical-padding var(--p-space-4);
   background: var(--p-color-bg);
   box-shadow: var(--p-shadow-sm);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: var(--p-color-text);
-  border: var(--p-border-width-025) solid var(--p-color-border-strong);
+  border: var(--p-border-width-1) solid var(--p-color-border-strong);
   line-height: 1;
   text-align: center;
   cursor: pointer;
@@ -29,7 +29,7 @@
     min-height: 28px;
     min-width: 28px;
     padding: var(--p-space-1_5-experimental) var(--p-space-3);
-    border-radius: var(--p-border-radius-200);
+    border-radius: var(--p-border-radius-2);
     border: none;
   }
 
@@ -39,7 +39,7 @@
 
   &:hover {
     background: var(--p-color-bg-hover);
-    outline: var(--p-border-width-025) solid transparent;
+    outline: var(--p-border-width-1) solid transparent;
   }
 
   &:focus-visible {
@@ -51,7 +51,7 @@
     #{$se23} & {
       // stylelint-disable-next-line -- se23 temporary styles
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
+      outline: var(--p-border-width-2) solid
         var(--p-color-border-interactive-focus);
       outline-offset: var(--p-space-025);
     }
@@ -92,7 +92,7 @@
   }
 
   @media (-ms-high-contrast: active) {
-    border: var(--p-border-width-025) solid windowText;
+    border: var(--p-border-width-1) solid windowText;
   }
 }
 
@@ -118,7 +118,7 @@
   padding: var(--p-space-05) var(--p-space-1);
   margin: calc(-1 * var(--p-space-05)) calc(-1 * var(--p-space-1));
   background: transparent;
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
 }
 
 @mixin unstyled-button() {
diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
index c2a8c485e47..c939a14cfa8 100644
--- a/polaris-react/src/styles/shared/_controls.scss
+++ b/polaris-react/src/styles/shared/_controls.scss
@@ -9,18 +9,18 @@
 @mixin control-backdrop($style: base) {
   @if $style == base {
     position: relative;
-    border: var(--p-border-width-050) solid var(--p-color-border-input);
+    border: var(--p-border-width-2) solid var(--p-color-border-input);
     background-color: var(--p-color-bg);
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     &::before {
       content: '';
       position: absolute;
-      top: calc(-1 * var(--p-border-width-050));
-      right: calc(-1 * var(--p-border-width-050));
-      bottom: calc(-1 * var(--p-border-width-050));
-      left: calc(-1 * var(--p-border-width-050));
-      border-radius: var(--p-border-radius-100);
+      top: calc(-1 * var(--p-border-width-2));
+      right: calc(-1 * var(--p-border-width-2));
+      bottom: calc(-1 * var(--p-border-width-2));
+      left: calc(-1 * var(--p-border-width-2));
+      border-radius: var(--p-border-radius-1);
       background-color: var(--p-color-bg-interactive);
       opacity: 0;
       transform: scale(0.25);
@@ -44,7 +44,7 @@
       opacity: 1;
       transform: scale(1);
       @media (-ms-high-contrast: active) {
-        border: var(--p-border-width-050) solid windowText;
+        border: var(--p-border-width-2) solid windowText;
       }
     }
   } @else if $style == disabled {
diff --git a/polaris-react/src/styles/shared/_interaction-state.scss b/polaris-react/src/styles/shared/_interaction-state.scss
index 75b07686ddc..8645a473c84 100644
--- a/polaris-react/src/styles/shared/_interaction-state.scss
+++ b/polaris-react/src/styles/shared/_interaction-state.scss
@@ -7,6 +7,6 @@
   height: 100%;
   display: block;
   width: var(--p-border-width-3);
-  border-top-right-radius: var(--p-border-radius-100);
-  border-bottom-right-radius: var(--p-border-radius-100);
+  border-top-right-radius: var(--p-border-radius-1);
+  border-bottom-right-radius: var(--p-border-radius-1);
 }

From 04d9f98c27ef98b458f659b7dbafc31d777353a9 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 20:57:21 +0000
Subject: [PATCH 097/102] :fire: deleted subcomponent and duplicate import in
 ActionList

---
 .../src/components/ActionList/ActionList.tsx  |   1 -
 .../components/SearchField/SearchField.scss   | 236 ------------------
 .../components/SearchField/SearchField.tsx    | 101 --------
 .../components/SearchField/index.ts           |   1 -
 .../SearchField/tests/SearchField.test.tsx    |  76 ------
 5 files changed, 415 deletions(-)
 delete mode 100644 polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
 delete mode 100644 polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
 delete mode 100644 polaris-react/src/components/ActionList/components/SearchField/index.ts
 delete mode 100644 polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx

diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
index e4fe1bc0cd5..bf1a3680c4c 100644
--- a/polaris-react/src/components/ActionList/ActionList.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -16,7 +16,6 @@ import {Icon} from '../Icon';
 
 import {Item, Section} from './components';
 import type {ItemProps} from './components';
-import {Item, SearchField, Section} from './components';
 
 export interface ActionListProps {
   /** Collection of actions for list */
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
deleted file mode 100644
index 9fdbc0e82fe..00000000000
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-@import '../../../../styles/common';
-
-$icon-size: 20px;
-$new-input-height: 36px;
-$search-icon-width: calc(#{$icon-size} + var(--p-space-4));
-
-$icon-size-se23: 18px;
-$new-input-height-se23: 32px;
-$search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
-
-.SearchField {
-  // stylelint-disable -- Polaris component custom properties
-  --pc-search-field-backdrop: 1;
-  --pc-search-field-input: 2;
-  --pc-search-field-icon: 3;
-  --pc-search-field-action: 3;
-  // stylelint-enable
-  z-index: var(--p-z-index-11);
-  position: relative;
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-  border: var(--p-border-width-1) solid transparent;
-  width: 100%;
-}
-// We have both a focused class and a focus pseudo selector here
-// because we allow "faked" focus for when the search is still
-// active, but is not actually the focused element in the DOM
-// (for example, while selecting a value from a filter in the
-// search this input controls)
-.focused .Input,
-.Input:focus {
-  border: none;
-  color: var(--p-color-text);
-
-  #{$se23} & {
-    color: var(--p-color-text);
-  }
-
-  &::placeholder {
-    color: var(--p-color-text-subdued);
-
-    #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
-    }
-  }
-}
-
-.Input:focus-visible {
-  ~ .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
-  }
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  ~ .Icon svg {
-    fill: var(--p-color-icon);
-
-    #{$se23} & {
-      fill: var(--p-color-icon-subdued);
-    }
-  }
-}
-
-.Input:focus-visible:not(:active) {
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    ~ .Backdrop {
-      // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
-
-    // stylelint-disable-next-line -- se23
-    ~ .Icon svg {
-      fill: var(--p-color-icon-subdued);
-    }
-  }
-}
-
-.Input {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include text-style-input;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  z-index: var(--pc-search-field-input);
-  height: $new-input-height;
-  width: 100%;
-  padding: 0 0 0 $search-icon-width;
-  border: none;
-  background-color: transparent;
-  outline: none;
-  color: var(--p-color-text);
-  will-change: fill, color;
-  transition: fill var(--p-motion-duration-200) var(--p-motion-ease),
-    color var(--p-motion-duration-200) var(--p-motion-ease);
-
-  #{$se23} & {
-    padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
-    color: var(--p-color-text-inverse-subdued);
-    height: $new-input-height-se23;
-    border: var(--p-border-width-1-experimental) solid
-      var(--p-color-border-inverse);
-    border-radius: var(--p-border-radius-2);
-
-    &:hover {
-      border-color: var(--p-color-border-input-hover);
-      background-color: var(--p-color-bg-input-hover-experimental);
-    }
-
-    &:active,
-    &:focus {
-      box-shadow: inset 0 0 0 var(--p-border-width-1) var(--p-color-border);
-    }
-  }
-
-  &::placeholder {
-    color: var(--p-color-text);
-
-    #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
-    }
-  }
-
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button {
-    appearance: none;
-  }
-}
-
-.Icon {
-  position: absolute;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  z-index: var(--pc-search-field-icon);
-  top: 50%;
-  left: var(--p-space-2);
-  display: flex;
-  height: $icon-size;
-  pointer-events: none;
-  transform: translateY(-50%);
-
-  #{$se23} & {
-    height: $icon-size-se23;
-    width: $icon-size-se23;
-  }
-
-  svg {
-    fill: var(--p-color-icon);
-
-    #{$se23} & {
-      fill: var(--p-color-icon-subdued);
-    }
-  }
-}
-
-.Clear {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($size: 'wide');
-  position: relative;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  z-index: var(--pc-search-field-action);
-  border: none;
-  appearance: none;
-  background: transparent;
-  padding: var(--p-space-2);
-
-  #{$se23} & {
-    position: absolute;
-    right: var(--p-space-1);
-    padding: var(--p-space-1);
-  }
-
-  svg {
-    fill: var(--p-color-icon);
-
-    #{$se23} & {
-      fill: var(--p-color-icon-subdued);
-    }
-  }
-
-  &:focus,
-  &:hover {
-    outline: none;
-  }
-
-  &:hover svg,
-  &:focus svg {
-    fill: var(--p-color-icon-hover);
-
-    #{$se23} & {
-      fill: var(--p-color-icon-inverse);
-    }
-  }
-
-  &:focus-visible {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($size: 'wide', $style: 'focused');
-  }
-
-  &:active {
-    svg {
-      fill: var(--p-color-icon-active);
-    }
-
-    &::after {
-      border: none;
-    }
-  }
-}
-
-.Backdrop {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring($border-width: 1px);
-  position: absolute;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  z-index: var(--pc-text-field-backdrop);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--p-color-bg-input);
-  border-radius: var(--p-border-radius-1);
-  pointer-events: none;
-
-  #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-  }
-}
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx b/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
deleted file mode 100644
index ae6b85e56cd..00000000000
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import {CircleCancelMinor, SearchMinor} from '@shopify/polaris-icons';
-import React, {useCallback, useId, useRef} from 'react';
-
-import {useI18n} from '../../../../utilities/i18n';
-import {Icon} from '../../../Icon';
-import {Text} from '../../../Text';
-
-import styles from './SearchField.scss';
-
-export interface SearchFieldProps {
-  /** Initial value for the input */
-  value: string;
-  /** Hint text to display */
-  placeholder?: string;
-  /** Callback when value is changed */
-  onChange(value: string): void;
-}
-
-export function SearchField({value, placeholder, onChange}: SearchFieldProps) {
-  const i18n = useI18n();
-
-  const input = useRef<HTMLInputElement | null>(null);
-  const searchId = useId();
-
-  const handleChange = useCallback(
-    ({currentTarget}: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(currentTarget.value);
-    },
-    [onChange],
-  );
-
-  const handleClear = useCallback(() => {
-    if (!input.current) {
-      return;
-    }
-
-    input.current.value = '';
-    onChange('');
-    input.current.focus();
-  }, [onChange]);
-
-  const clearMarkup = value !== '' && (
-    <button
-      type="button"
-      aria-label={i18n.translate(
-        'Polaris.ActionList.SearchField.clearButtonLabel',
-      )}
-      className={styles.Clear}
-      onClick={handleClear}
-      onBlur={() => {
-        handleClear();
-      }}
-    >
-      <Icon source={CircleCancelMinor} />
-    </button>
-  );
-
-  const handleRef = (ref: HTMLInputElement) => {
-    input.current = ref;
-
-    // It won't focus if it's on the same tick as when it renders
-    setTimeout(() => {
-      ref?.focus();
-    });
-  };
-
-  return (
-    <div className={styles.SearchField}>
-      <Text as="span" visuallyHidden>
-        <label htmlFor={searchId}>
-          {i18n.translate('Polaris.ActionList.SearchField.search')}
-        </label>
-      </Text>
-      <input
-        id={searchId}
-        className={styles.Input}
-        placeholder={placeholder}
-        type="search"
-        autoCapitalize="off"
-        autoComplete="off"
-        autoCorrect="off"
-        ref={handleRef}
-        value={value}
-        onChange={handleChange}
-        onKeyDown={preventDefault}
-      />
-      <span className={styles.Icon}>
-        <Icon source={SearchMinor} />
-      </span>
-
-      {clearMarkup}
-      <div className={styles.Backdrop} />
-    </div>
-  );
-}
-
-function preventDefault(event: React.KeyboardEvent<HTMLInputElement>) {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-  }
-}
diff --git a/polaris-react/src/components/ActionList/components/SearchField/index.ts b/polaris-react/src/components/ActionList/components/SearchField/index.ts
deleted file mode 100644
index 9f5ef334723..00000000000
--- a/polaris-react/src/components/ActionList/components/SearchField/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './SearchField';
diff --git a/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx b/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx
deleted file mode 100644
index a9142825ed2..00000000000
--- a/polaris-react/src/components/ActionList/components/SearchField/tests/SearchField.test.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import {CircleCancelMinor} from '@shopify/polaris-icons';
-import {mountWithApp} from 'tests/utilities';
-
-import {Icon} from '../../../../Icon';
-import {SearchField} from '../SearchField';
-
-describe('<SearchField />', () => {
-  it('passes the placeholder prop to input', () => {
-    const textField = mountWithApp(
-      <SearchField value="" onChange={noop} placeholder="hello polaris" />,
-    );
-
-    expect(textField).toContainReactComponent('input', {
-      placeholder: 'hello polaris',
-    });
-  });
-
-  describe('clear content', () => {
-    it('will render a cancel icon when a value is provided', () => {
-      const textField = mountWithApp(
-        <SearchField value="hello polaris" onChange={noop} />,
-      );
-
-      expect(textField).toContainReactComponent(Icon, {
-        source: CircleCancelMinor,
-      });
-    });
-
-    it('will call the onChange with an empty string when the cancel button is pressed', () => {
-      const spy = jest.fn();
-      const textField = mountWithApp(
-        <SearchField value="hello polaris" onChange={spy} />,
-      );
-
-      textField.find('button')!.trigger('onClick');
-
-      expect(spy).toHaveBeenCalledWith('');
-    });
-  });
-
-  describe('onChange()', () => {
-    it('is called with the new value', () => {
-      const spy = jest.fn();
-      const newValue = 'hello polaris';
-      const textField = mountWithApp(
-        <SearchField value={newValue} onChange={spy} />,
-      );
-
-      textField.find('input')!.trigger('onChange', {
-        currentTarget: {
-          value: newValue,
-        },
-      });
-
-      expect(spy).toHaveBeenCalledWith(newValue);
-    });
-  });
-
-  describe('onKeyDown', () => {
-    it("will prevent default on the 'enter' keydown", () => {
-      const spy = jest.fn();
-      const textField = mountWithApp(
-        <SearchField value="hello polaris" onChange={noop} />,
-      );
-
-      textField.find('input')!.trigger('onKeyDown', {
-        key: 'Enter',
-        preventDefault: spy,
-      });
-      expect(spy).toHaveBeenCalled();
-    });
-  });
-});
-
-function noop() {}

From 9af2d195ac9910050093a05c88eb0d76f45bc947 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 21:53:39 +0000
Subject: [PATCH 098/102] Re-resolve conflicts and remove already removed code

---
 .../components/ActionList/components/index.ts |  2 -
 .../ActionList/tests/ActionList.test.tsx      |  2 +-
 .../src/components/IndexTable/IndexTable.scss | 12 ------
 .../src/components/Pagination/Pagination.scss | 39 -------------------
 4 files changed, 1 insertion(+), 54 deletions(-)

diff --git a/polaris-react/src/components/ActionList/components/index.ts b/polaris-react/src/components/ActionList/components/index.ts
index edefe0dc331..1f6e50145f3 100644
--- a/polaris-react/src/components/ActionList/components/index.ts
+++ b/polaris-react/src/components/ActionList/components/index.ts
@@ -1,5 +1,3 @@
 export * from './Item';
 
 export * from './Section';
-
-export * from './SearchField';
diff --git a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
index 1b8ba07923b..5a0aa3e5ed4 100644
--- a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
+++ b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx
@@ -4,7 +4,7 @@ import {mountWithApp} from 'tests/utilities';
 
 import {ActionList} from '../ActionList';
 import {Badge} from '../../Badge';
-import {Item, SearchField, Section} from '../components';
+import {Item, Section} from '../components';
 import {Key} from '../../../types';
 import {KeypressListener} from '../../KeypressListener';
 import {TextField} from '../../TextField';
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 95ec86cf30b..8a1d391505f 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -108,7 +108,6 @@ $loading-panel-height: 53px;
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
   .TableRow-subdued {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- se23 overrides
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
@@ -203,10 +202,6 @@ $loading-panel-height: 53px;
       .TableCell-first + .TableCell,
       .TableCell:last-child {
         background-color: var(--p-color-bg-subdued);
-
-        #{$se23} & {
-          background-color: var(--p-color-bg-subdued);
-        }
       }
     }
   }
@@ -231,17 +226,12 @@ $loading-panel-height: 53px;
       .TableCell-first + .TableCell,
       .TableCell:last-child {
         background-color: var(--p-color-bg-subdued);
-
-        #{$se23} & {
-          background-color: var(--p-color-bg-subdued);
-        }
       }
     }
   }
 
   // NOTE: `-hovered` must come after `-selected` so elements don't appear to lose their interactivity when selected.
   &.TableRow-hovered:not(.TableRow-disabled) {
-    // stylelint-disable selector-max-class,  selector-max-specificity, selector-max-combinators -- se23 status hover styles
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
@@ -279,7 +269,6 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-subdued-hover);
       }
     }
-    // stylelint-enable selector-max-class, selector-max-specificity, selector-max-combinators -- se23 status hover styles
   }
 
   /* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
@@ -697,7 +686,6 @@ $loading-panel-height: 53px;
   }
   // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
   .TableRow-subdued:not(.TableRow-hovered) {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- se23 override
     .TableCell:first-child {
       background-color: var(--p-color-bg-subdued);
     }
diff --git a/polaris-react/src/components/Pagination/Pagination.scss b/polaris-react/src/components/Pagination/Pagination.scss
index 1db88c8a3ca..304b9d3ddee 100644
--- a/polaris-react/src/components/Pagination/Pagination.scss
+++ b/polaris-react/src/components/Pagination/Pagination.scss
@@ -59,43 +59,4 @@
       /* stylelint-enable */
     }
   }
-
-  &.table {
-    button {
-      #{$se23} & {
-        --button-min-height: var(--p-space-6);
-        background-color: var(--p-color-bg-subdued);
-        min-height: var(--button-min-height);
-        min-width: var(--button-min-height);
-        height: var(--button-min-height);
-        width: var(--button-min-height);
-        padding: unset;
-
-        /* stylelint-disable selector-max-combinators, selector-max-compound-selectors, max-nesting-depth -- cleaner until se23 clean up */
-        &:hover {
-          background-color: var(--p-color-bg-strong-hover);
-
-          svg {
-            fill: var(--p-color-icon-hover);
-          }
-        }
-
-        &:active,
-        &:focus {
-          background-color: var(--p-color-bg-strong-active);
-
-          svg {
-            fill: var(--p-color-icon-active);
-          }
-        }
-
-        &:disabled {
-          svg {
-            fill: var(--p-color-icon-disabled);
-          }
-        }
-        /* stylelint-enable */
-      }
-    }
-  }
 }

From 112b5d1d4210601f71a1cc984a2ac071684e16a5 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 22:03:28 +0000
Subject: [PATCH 099/102] Fix type error in polaris-tokens

---
 polaris-tokens/src/themes/base/border.ts | 3 ++-
 polaris-tokens/src/themes/base/font.ts   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/polaris-tokens/src/themes/base/border.ts b/polaris-tokens/src/themes/base/border.ts
index 5a25dd3fa98..bc98c9590e5 100644
--- a/polaris-tokens/src/themes/base/border.ts
+++ b/polaris-tokens/src/themes/base/border.ts
@@ -1,6 +1,7 @@
 import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
 import {size} from '../../size';
+import {createVar as createVarName} from '../../utilities';
 
 type BorderRadiusScaleExperimental = Experimental<'0' | '1_5'>;
 
@@ -141,6 +142,6 @@ export const border: {
   },
 };
 
-function createVar(borderTokenName: BorderTokenName) {
+export function createVar(borderTokenName: BorderTokenName) {
   return `var(${createVarName(borderTokenName)})`;
 }
diff --git a/polaris-tokens/src/themes/base/font.ts b/polaris-tokens/src/themes/base/font.ts
index 6b585552f56..db9c9e7ca67 100644
--- a/polaris-tokens/src/themes/base/font.ts
+++ b/polaris-tokens/src/themes/base/font.ts
@@ -1,6 +1,7 @@
 import {size} from '../../size';
 import type {Experimental} from '../../types';
 import type {MetaTokenProperties} from '../types';
+import {createVar as createVarName} from '../../utilities';
 
 type FontFamilyAlias = 'sans' | 'mono';
 
@@ -176,6 +177,6 @@ export const font: {
   },
 };
 
-function createVar(fontTokenName: FontTokenName) {
+export function createVar(fontTokenName: FontTokenName) {
   return `var(${createVarName(fontTokenName)})`;
 }

From 4288a290ef81b95947e9557471440708daea9605 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 22:33:59 +0000
Subject: [PATCH 100/102] Fix lint errors in IndexTable.scss

---
 .../src/components/IndexTable/IndexTable.scss    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index 8a1d391505f..6be32889569 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -108,6 +108,7 @@ $loading-panel-height: 53px;
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
   .TableRow-subdued {
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
@@ -193,7 +194,7 @@ $loading-panel-height: 53px;
       color: var(--p-color-text-subdued);
     }
 
-    // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &.TableRow-subheader {
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &,
@@ -232,13 +233,15 @@ $loading-panel-height: 53px;
 
   // NOTE: `-hovered` must come after `-selected` so elements don't appear to lose their interactivity when selected.
   &.TableRow-hovered:not(.TableRow-disabled) {
+    /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-hover);
     }
-
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &.statusCritical {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
@@ -246,23 +249,27 @@ $loading-panel-height: 53px;
       }
     }
 
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &.statusSubdued {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
         background-color: var(--p-color-bg-subdued-hover);
       }
     }
-
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &.statusSuccess {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
         background-color: var(--p-color-bg-success-subdued-hover);
       }
     }
-
+    /* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     &.TableRow-subdued {
+      /* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
       &,
       .TableCell-first,
       .TableCell-first + .TableCell {
@@ -686,6 +693,7 @@ $loading-panel-height: 53px;
   }
   // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
   .TableRow-subdued:not(.TableRow-hovered) {
+    /* stylelint-disable-next-line selector-max-class, selector-max-combinators,selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
     .TableCell:first-child {
       background-color: var(--p-color-bg-subdued);
     }

From 24c4bd4b39dfaa5b40b74225ebb98939f4e8b8b2 Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 22:40:07 +0000
Subject: [PATCH 101/102] post merge straggler

---
 polaris-react/src/components/ActionList/ActionList.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
index beaba6d1144..11d5f721141 100644
--- a/polaris-react/src/components/ActionList/ActionList.stories.tsx
+++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -3,11 +3,9 @@ import type {ComponentMeta} from '@storybook/react';
 import {
   ActionList,
   Avatar,
-  Box,
   Button,
   Icon,
   Popover,
-  TextField,
   Thumbnail,
   BlockStack,
 } from '@shopify/polaris';

From e516a74faa5d66a7e4214620e6f3918de8226eae Mon Sep 17 00:00:00 2001
From: Chloe Rice <chloe.rice@shopify.com>
Date: Thu, 21 Sep 2023 19:41:41 -0400
Subject: [PATCH 102/102] haha...mdx

---
 polaris.shopify.com/content/components/tables/index-table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris.shopify.com/content/components/tables/index-table.md b/polaris.shopify.com/content/components/tables/index-table.md
index 9a88c1fdb88..4947756af2e 100644
--- a/polaris.shopify.com/content/components/tables/index-table.md
+++ b/polaris.shopify.com/content/components/tables/index-table.md
@@ -206,7 +206,7 @@ An `IndexTable.Row` is used to render a row representing an item within an `Inde
 | disabled?           | boolean                                      | Whether the row should be disabled                                                                                                                                                                  |
 | selectionRange?     | [number, number]                             | A tuple array with the first and last index of the range of other rows that the row describes. All non-disabled rows in the range are selected when the row with a selection range set is selected. |
 | rowType?            | "data" &#124; "subheader"                    | Indicates the relationship or role of the row's contents. A `rowType` of "subheader" looks and behaves the same as the table header. Defaults to "data".                                            |
-| accessibilityLabel? | string                                       | Label set on the row's checkbox. Defaults to "Select {resourceName}"                                                                                                                                |
+| accessibilityLabel? | string                                       | Label set on the row's checkbox. Defaults to "Select \{resourceName\}"                                                                                                                              |
 | onClick?            | () => void                                   | Callback fired when the row is clicked. Overrides the default click behaviour.                                                                                                                      |
 | onNavigation?       | (id: string) => void                         | Callback fired when the row is clicked and contains an anchor element with the `data-primary-link` property set                                                                                     |