From 30555a9f9a275cd44a3ea8b965309c948b9796e8 Mon Sep 17 00:00:00 2001
From: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com>
Date: Wed, 27 Sep 2023 13:24:35 -0700
Subject: [PATCH] Migrate `color` custom properties from Polaris v11 to v12
 (#10576)

### WHY are these changes introduced?

Part of #10528

### WHAT is this pull request doing?

Migrated CSS custom properties for `color` token groups.

> See https://github.com/Shopify/polaris/issues/10528 for detailed
instructions on the migration process and replacement maps.

Polaris migrator snapshot ran on this PR:
```sh
cd polaris-react

npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230920224230 \
  v12-styles-replace-custom-property-color \
  'src/**/*'
```
---
 .changeset/chatty-mails-invent.md             |   5 +
 .../src/components/ActionList/ActionList.scss |  25 ++--
 .../components/SearchField/SearchField.scss   |  28 ++--
 .../RollupActions/RollupActions.scss          |  11 +-
 .../SecondaryAction/SecondaryAction.scss      |  21 ++-
 .../components/MappedAction/MappedAction.scss |  15 ++-
 .../src/components/Avatar/Avatar.scss         |  38 +++---
 polaris-react/src/components/Badge/Badge.scss |  52 +++----
 .../components/Badge/components/Pip/Pip.scss  |   4 +-
 .../src/components/Banner/Banner.scss         |  37 +++--
 .../BannerExperimental.scss                   |   4 +-
 .../components/Breadcrumbs/Breadcrumbs.scss   |   9 +-
 .../components/BulkActions/BulkActions.scss   |  13 +-
 .../src/components/Button/Button.scss         |  99 +++++++-------
 .../components/CalloutCard/CalloutCard.scss   |   2 +-
 .../src/components/Checkbox/Checkbox.scss     |  31 +++--
 .../components/ColorPicker/ColorPicker.scss   |   6 +-
 .../ColorPicker/ColorPicker.stories.tsx       |   2 +-
 .../src/components/DataTable/DataTable.scss   |  36 ++---
 .../src/components/DatePicker/DatePicker.scss |   2 +-
 .../DescriptionList/DescriptionList.scss      |   8 +-
 .../src/components/Divider/Divider.tsx        |   4 +-
 .../components/Divider/tests/Divider.test.tsx |   4 +-
 .../src/components/DropZone/DropZone.scss     |  31 +++--
 .../components/FileUpload/FileUpload.scss     |  12 +-
 .../ExceptionList/ExceptionList.scss          |   6 +-
 .../src/components/Filters/Filters.scss       |  24 ++--
 .../components/FilterPill/FilterPill.scss     |  18 +--
 .../components/SearchField/SearchField.scss   |  17 ++-
 polaris-react/src/components/Frame/Frame.scss |   2 +-
 .../src/components/Frame/Frame.stories.tsx    |   2 +-
 .../ContextualSaveBar/ContextualSaveBar.scss  |  16 +--
 .../Frame/components/Loading/Loading.scss     |   2 +-
 .../Frame/components/Toast/Toast.scss         |   4 +-
 .../FullscreenBar/FullscreenBar.scss          |   6 +-
 polaris-react/src/components/Icon/Icon.scss   |  18 +--
 .../components/IndexFilters/IndexFilters.scss |   8 +-
 .../components/Container/Container.scss       |   4 +-
 .../components/FilterButton/FilterButton.scss |   2 +-
 .../DirectionButton/DirectionButton.scss      |   6 +-
 .../src/components/IndexTable/IndexTable.scss | 127 +++++++++---------
 .../src/components/InlineCode/InlineCode.scss |   2 +-
 .../components/KeyboardKey/KeyboardKey.scss   |   8 +-
 .../src/components/Labelled/Labelled.scss     |   2 +-
 .../src/components/Layout/Layout.scss         |   6 +-
 .../src/components/LegacyCard/LegacyCard.scss |  14 +-
 .../LegacyFilters/LegacyFilters.scss          |  18 +--
 .../src/components/LegacyTabs/LegacyTabs.scss |  16 +--
 polaris-react/src/components/Link/Link.scss   |  12 +-
 .../components/Listbox/Listbox.stories.tsx    |   4 +-
 .../Listbox/components/Option/Option.scss     |   2 +-
 .../Listbox/components/Section/Section.scss   |   2 +-
 .../components/TextOption/TextOption.scss     |   8 +-
 .../Modal/components/Dialog/Dialog.scss       |   2 +-
 .../Modal/components/Section/Section.scss     |   3 +-
 .../src/components/Navigation/Navigation.scss | 102 +++++++-------
 .../src/components/Navigation/_variables.scss |   9 +-
 .../OptionList/components/Option/Option.scss  |  15 +--
 polaris-react/src/components/Page/Page.scss   |   2 +-
 .../Page/components/Header/Header.scss        |   4 +-
 .../Header/components/Title/Title.scss        |   2 +-
 .../components/PageActions/PageActions.scss   |   2 +-
 .../src/components/Pagination/Pagination.scss |  12 +-
 .../src/components/Popover/Popover.scss       |   8 +-
 .../components/Popover/Popover.stories.tsx    |   4 +-
 .../components/ProgressBar/ProgressBar.scss   |  16 +--
 .../components/RadioButton/RadioButton.scss   |  15 +--
 .../components/DualThumb/DualThumb.scss       |  10 +-
 .../components/SingleThumb/SingleThumb.scss   |  15 +--
 .../components/ResourceItem/ResourceItem.scss |   4 +-
 .../components/ResourceList/ResourceList.scss |  10 +-
 .../src/components/Scrollable/Scrollable.scss |   3 +-
 .../Scrollable/Scrollable.stories.tsx         |   2 +-
 .../src/components/Select/Select.scss         |  35 +++--
 .../SelectAllActions/SelectAllActions.scss    |   6 +-
 polaris-react/src/components/Sheet/Sheet.scss |   4 +-
 .../src/components/Sheet/Sheet.stories.tsx    |   4 +-
 .../SkeletonBodyText/SkeletonBodyText.scss    |   2 +-
 .../SkeletonDisplayText.scss                  |  18 ++-
 .../components/SkeletonTabs/SkeletonTabs.scss |   2 +-
 .../SkeletonThumbnail/SkeletonThumbnail.scss  |   2 +-
 polaris-react/src/components/Tabs/Tabs.scss   |  44 +++---
 polaris-react/src/components/Tag/Tag.scss     |  36 ++---
 polaris-react/src/components/Text/Text.scss   |   2 +-
 .../src/components/TextField/TextField.scss   |  53 ++++----
 .../src/components/Thumbnail/Thumbnail.scss   |   6 +-
 .../src/components/Tooltip/Tooltip.scss       |   3 +-
 .../TooltipOverlay/TooltipOverlay.scss        |   7 +-
 .../TooltipOverlay/TooltipOverlay.tsx         |   4 +-
 .../src/components/TopBar/TopBar.scss         |   7 +-
 .../TopBar/components/Menu/Menu.scss          |  15 +--
 .../Menu/components/Message/Message.scss      |   2 +-
 .../TopBar/components/Search/Search.scss      |   2 +-
 .../components/SearchField/SearchField.scss   |  23 ++--
 .../TopBar/components/UserMenu/UserMenu.scss  |   2 +-
 .../VideoThumbnail/VideoThumbnail.scss        |   6 +-
 .../src/styles/foundation/_focus-ring.scss    |   8 +-
 polaris-react/src/styles/shared/_buttons.scss |  13 +-
 .../src/styles/shared/_controls.scss          |   6 +-
 99 files changed, 694 insertions(+), 713 deletions(-)
 create mode 100644 .changeset/chatty-mails-invent.md

diff --git a/.changeset/chatty-mails-invent.md b/.changeset/chatty-mails-invent.md
new file mode 100644
index 00000000000..23fbf9c3990
--- /dev/null
+++ b/.changeset/chatty-mails-invent.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrated `color` custom properties from Polaris v11 to v12
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 64926c150f0..f0d172b5de8 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -51,7 +51,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     outline: var(--p-border-width-3) solid transparent;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
+      background-color: var(--p-color-bg-surface-secondary-hover);
     }
   }
 
@@ -59,11 +59,11 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     background-color: var(--p-color-bg-active);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
+      background-color: var(--p-color-bg-surface-secondary-hover);
     }
 
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
 
       #{$se23} & {
         fill: var(--p-color-icon);
@@ -79,9 +79,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     #{$se23} & {
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      background-color: var(--p-color-bg);
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      background-color: var(--p-color-bg-surface);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     }
   }
 
@@ -93,15 +92,15 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     background-color: var(--p-color-bg-interactive-selected);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-active);
+      background-color: var(--p-color-bg-surface-secondary-active);
       font-weight: var(--p-font-weight-semibold);
     }
 
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
 
       #{$se23} & {
-        fill: var(--p-color-icon-primary);
+        fill: var(--p-color-icon-brand);
       }
     }
 
@@ -128,22 +127,22 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     }
 
     &:hover {
-      background-color: var(--p-color-bg-critical-subdued-hover);
+      background-color: var(--p-color-bg-surface-critical-hover);
 
       #{$se23} & {
         // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-hover);
+        background-color: var(--p-color-bg-surface-critical-hover);
       }
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.active {
-      background-color: var(--p-color-bg-critical-subdued-active);
+      background-color: var(--p-color-bg-surface-critical-active);
 
       #{$se23} & {
         // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-active);
+        background-color: var(--p-color-bg-surface-critical-active);
       }
     }
   }
diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
index 18bf2a6df85..0e12b41af2a 100644
--- a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -38,10 +38,10 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
   }
 
   &::placeholder {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
 
     #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
+      color: var(--p-color-text-inverse-secondary);
     }
   }
 }
@@ -54,8 +54,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     #{$se23} & {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
   }
@@ -64,7 +63,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -75,14 +74,13 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     ~ .Backdrop {
       // stylelint-disable-next-line -- opt for outline instead of focus-ring mixin
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
 
     // stylelint-disable-next-line -- se23
     ~ .Icon svg {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -105,14 +103,14 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
 
   #{$se23} & {
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
-    color: var(--p-color-text-inverse-subdued);
+    color: var(--p-color-text-inverse-secondary);
     height: $new-input-height-se23;
     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);
-      background-color: var(--p-color-bg-input-hover-experimental);
+      border-color: var(--p-color-input-border-hover);
+      background-color: var(--p-color-input-bg-surface-hover);
     }
 
     &:active,
@@ -125,7 +123,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     color: var(--p-color-text);
 
     #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
+      color: var(--p-color-text-inverse-secondary);
     }
   }
 
@@ -155,7 +153,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -181,7 +179,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 
@@ -225,7 +223,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg-input);
+  background-color: var(--p-color-input-bg-surface);
   border-radius: var(--p-border-radius-100);
   pointer-events: none;
 
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
index 4df48fbf695..793df1df244 100644
--- a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
+++ b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -15,26 +15,25 @@
     }
 
     #{$se23} & {
-      background: var(--p-color-bg-strong);
+      background: var(--p-color-bg-fill-tertiary);
       border-radius: var(--p-border-radius-200);
       border: none;
       box-shadow: none;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
-        background: var(--p-color-bg-strong-hover);
+        background: var(--p-color-bg-fill-tertiary-hover);
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &: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
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
         outline-offset: var(--p-space-050);
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:active {
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
       }
     }
   }
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 6f979a8bb22..93b8470b18e 100644
--- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -43,12 +43,12 @@
 
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &:hover {
-        background-color: var(--p-color-bg-critical-subdued-hover) !important;
+        background-color: var(--p-color-bg-surface-critical-hover) !important;
       }
 
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &:active {
-        background-color: var(--p-color-bg-critical-subdued-active) !important;
+        background-color: var(--p-color-bg-surface-critical-active) !important;
       }
     }
   }
@@ -60,30 +60,27 @@
       border: none;
       min-height: 28px;
       padding: var(--p-space-100) var(--p-space-300);
-      background-color: var(--p-color-bg-strong) !important;
+      background-color: var(--p-color-bg-fill-tertiary) !important;
       border-radius: var(--p-border-radius-200) !important;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:is(:hover, :focus) {
-        background-color: var(--p-color-bg-strong-hover) !important;
+        background-color: var(--p-color-bg-fill-tertiary-hover) !important;
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:active {
-        background-color: var(--p-color-bg-strong-active) !important;
+        background-color: var(--p-color-bg-fill-tertiary-active) !important;
         box-shadow: var(--p-shadow-inset-md) !important;
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:focus-visible {
         /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
         @include no-focus-ring;
-        outline: var(--p-border-width-050) solid
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
         outline-offset: var(--p-space-050);
       }
       // stylelint-disable-next-line selector-max-combinators -- se23
       &[aria-disabled='true'] {
-        background-color: var(
-          --p-color-bg-transparent-disabled-experimental
-        ) !important;
+        background-color: var(--p-color-bg-fill-disabled) !important;
       }
     }
 
@@ -94,11 +91,11 @@
         color: var(--p-color-text-critical) !important;
         /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */
         &:is(:hover, :focus) {
-          background-color: var(--p-color-bg-strong-hover) !important;
+          background-color: var(--p-color-bg-fill-tertiary-hover) !important;
         }
         /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */
         &:active {
-          background-color: var(--p-color-bg-strong-active) !important;
+          background-color: var(--p-color-bg-fill-tertiary-active) !important;
         }
         /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth, selector-max-compound-selectors -- se23 */
         svg {
diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
index 98dd7f33ed9..dd3e84afc1e 100644
--- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
+++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -5,7 +5,8 @@
   --pc-mapped-actions-image-size: 20px;
   --pc-mapped-actions-item-min-height: var(--p-space-1000);
   --pc-mapped-actions-item-vertical-padding: calc(
-    (var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500)) / 2
+    (var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500)) /
+      2
   );
   // stylelint-enable
   margin-bottom: var(--p-space-300);
@@ -15,7 +16,7 @@
   .Action {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
     }
 
     #{$se23} & {
@@ -26,7 +27,7 @@
     }
 
     &.destructive {
-      background-color: var(--p-color-bg-critical-subdued-active);
+      background-color: var(--p-color-bg-surface-critical-active);
     }
 
     &:hover {
@@ -71,7 +72,7 @@
     background-color: var(--p-color-bg-interactive-selected);
 
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
     }
   }
 
@@ -79,7 +80,7 @@
     background-color: var(--p-color-bg-active);
 
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
     }
   }
 
@@ -103,13 +104,13 @@
     }
 
     &:hover {
-      background-color: var(--p-color-bg-critical-subdued-hover);
+      background-color: var(--p-color-bg-surface-critical-hover);
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.selected {
-      background-color: var(--p-color-bg-critical-subdued-active);
+      background-color: var(--p-color-bg-surface-critical-active);
     }
   }
 
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 12b932b2320..c0b3a714dad 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -15,8 +15,8 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: var(--pc-avatar-extra-small-size);
   max-width: 100%;
-  background: var(--p-color-bg-strong);
-  color: var(--p-color-icon-subdued);
+  background: var(--p-color-bg-fill-tertiary);
+  color: var(--p-color-icon-secondary);
   user-select: none;
 
   #{$se23} & {
@@ -26,8 +26,8 @@
     --pc-avatar-medium-size: 28px;
     --pc-avatar-large-size: 32px;
     // stylelint-enable
-    background: var(--p-color-avatar-background-experimental);
-    color: var(--p-color-avatar-color-experimental);
+    background: var(--p-color-avatar-bg-fill);
+    color: var(--p-color-avatar-text-on-bg-fill);
 
     &.imageHasLoaded {
       background: transparent;
@@ -151,13 +151,13 @@
   background: rgba(255, 201, 107, 1);
 
   #{$se23} & {
-    background: var(--p-color-avatar-style-one-background-experimental);
-    color: var(--p-color-avatar-style-one-color-experimental);
+    background: var(--p-color-avatar-one-bg-fill);
+    color: var(--p-color-avatar-one-text-on-bg-fill);
   }
 
   #{$se23} & svg,
   #{$se23} & text {
-    color: var(--p-color-avatar-style-one-color-experimental);
+    color: var(--p-color-avatar-one-text-on-bg-fill);
   }
 }
 
@@ -168,13 +168,13 @@
   background: rgba(255, 196, 176, 1);
 
   #{$se23} & {
-    background: var(--p-color-avatar-style-two-background-experimental);
-    color: var(--p-color-avatar-style-two-color-experimental);
+    background: var(--p-color-avatar-two-bg-fill);
+    color: var(--p-color-avatar-two-text-on-bg-fill);
   }
 
   #{$se23} & svg,
   #{$se23} & text {
-    color: var(--p-color-avatar-style-two-color-experimental);
+    color: var(--p-color-avatar-two-text-on-bg-fill);
   }
 }
 
@@ -185,13 +185,13 @@
   background: rgba(146, 230, 181, 1);
 
   #{$se23} & {
-    background: var(--p-color-avatar-style-three-background-experimental);
-    color: var(--p-color-avatar-style-three-color-experimental);
+    background: var(--p-color-avatar-three-bg-fill);
+    color: var(--p-color-avatar-three-text-on-bg-fill);
   }
 
   #{$se23} & svg,
   #{$se23} & text {
-    color: var(--p-color-avatar-style-three-color-experimental);
+    color: var(--p-color-avatar-three-text-on-bg-fill);
   }
 }
 
@@ -202,13 +202,13 @@
   background: rgba(145, 224, 214, 1);
 
   #{$se23} & {
-    background: var(--p-color-avatar-style-four-background-experimental);
-    color: var(--p-color-avatar-style-four-color-experimental);
+    background: var(--p-color-avatar-four-bg-fill);
+    color: var(--p-color-avatar-four-text-on-bg-fill);
   }
 
   #{$se23} & svg,
   #{$se23} & text {
-    color: var(--p-color-avatar-style-four-color-experimental);
+    color: var(--p-color-avatar-four-text-on-bg-fill);
   }
 }
 
@@ -219,13 +219,13 @@
   background: rgba(253, 201, 208, 1);
 
   #{$se23} & {
-    background: var(--p-color-avatar-style-five-background-experimental);
-    color: var(--p-color-avatar-style-five-color-experimental);
+    background: var(--p-color-avatar-five-bg-fill);
+    color: var(--p-color-avatar-five-text-on-bg-fill);
   }
 
   #{$se23} & svg,
   #{$se23} & text {
-    color: var(--p-color-avatar-style-five-color-experimental);
+    color: var(--p-color-avatar-five-text-on-bg-fill);
   }
 }
 
diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss
index a5c96c68a5a..edf0c5f2c8e 100644
--- a/polaris-react/src/components/Badge/Badge.scss
+++ b/polaris-react/src/components/Badge/Badge.scss
@@ -9,19 +9,19 @@
   align-items: center;
   // 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);
+  background-color: var(--p-color-bg-fill-tertiary);
   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);
+    background-color: var(--p-color-bg-fill-transparent-secondary);
+    color: var(--p-color-text-secondary);
     font-weight: var(--p-font-weight-medium);
     border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
-      fill: var(--p-color-text-subdued);
+      fill: var(--p-color-text-secondary);
     }
   }
 
@@ -31,11 +31,11 @@
 }
 
 .statusSuccess {
-  background-color: var(--p-color-bg-success);
+  background-color: var(--p-color-bg-fill-success-secondary);
 
   #{$se23} & {
     color: var(--p-color-text-success);
-    background-color: var(--p-color-bg-success);
+    background-color: var(--p-color-bg-fill-success-secondary);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -46,7 +46,7 @@
 
 @mixin statusSuccess-strong {
   color: var(--p-color-text-on-color);
-  background-color: var(--p-color-bg-success-strong);
+  background-color: var(--p-color-bg-fill-success);
 
   svg {
     fill: var(--p-color-icon-on-color);
@@ -62,11 +62,11 @@
 }
 
 .statusInfo {
-  background-color: var(--p-color-bg-info);
+  background-color: var(--p-color-bg-fill-info-secondary);
 
   #{$se23} & {
     color: var(--p-color-text-info);
-    background-color: var(--p-color-bg-info);
+    background-color: var(--p-color-bg-fill-info-secondary);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -76,11 +76,11 @@
 }
 
 @mixin statusInfo-strong {
-  color: var(--p-color-text-info-strong);
-  background-color: var(--p-color-bg-info-strong);
+  color: var(--p-color-text-info-on-bg-fill);
+  background-color: var(--p-color-bg-fill-info);
 
   svg {
-    fill: var(--p-color-text-info-strong);
+    fill: var(--p-color-text-info-on-bg-fill);
   }
 }
 
@@ -93,11 +93,11 @@
 }
 
 .statusAttention {
-  background-color: var(--p-color-bg-caution);
+  background-color: var(--p-color-bg-fill-caution-secondary);
 
   #{$se23} & {
     color: var(--p-color-text-caution);
-    background-color: var(--p-color-bg-caution);
+    background-color: var(--p-color-bg-fill-caution-secondary);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -108,7 +108,7 @@
 
 @mixin statusAttention-strong {
   color: var(--p-color-text-caution-strong);
-  background-color: var(--p-color-bg-caution-strong);
+  background-color: var(--p-color-bg-fill-caution);
 
   svg {
     fill: var(--p-color-text-caution);
@@ -124,11 +124,11 @@
 }
 
 .statusWarning {
-  background-color: var(--p-color-bg-warning);
+  background-color: var(--p-color-bg-fill-warning-secondary);
 
   #{$se23} & {
     color: var(--p-color-text-warning-experimental);
-    background-color: var(--p-color-bg-warning);
+    background-color: var(--p-color-bg-fill-warning-secondary);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -139,7 +139,7 @@
 
 @mixin statusWarning-strong {
   color: var(--p-color-text-warning-experimental);
-  background-color: var(--p-color-bg-warning-strong-experimental);
+  background-color: var(--p-color-bg-fill-warning);
 
   svg {
     fill: var(--p-color-text-warning-experimental);
@@ -155,11 +155,11 @@
 }
 
 .statusCritical {
-  background-color: var(--p-color-bg-critical);
+  background-color: var(--p-color-bg-fill-critical-secondary);
 
   #{$se23} & {
     color: var(--p-color-text-critical);
-    background-color: var(--p-color-bg-critical);
+    background-color: var(--p-color-bg-fill-critical-secondary);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
@@ -170,7 +170,7 @@
 
 @mixin statusCritical-strong {
   color: var(--p-color-text-on-color);
-  background-color: var(--p-color-bg-critical-strong);
+  background-color: var(--p-color-bg-fill-critical);
 
   svg {
     fill: var(--p-color-icon-on-color);
@@ -189,24 +189,24 @@
   border: none;
 
   #{$se23} & {
-    background-color: var(--p-color-bg-transparent-subdued-experimental);
-    color: var(--p-color-text-subdued);
+    background-color: var(--p-color-bg-fill-transparent-secondary);
+    color: var(--p-color-text-secondary);
     font-weight: var(--p-font-weight-bold);
     border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line -- se23 svg fill override
     svg {
-      fill: var(--p-color-text-subdued);
+      fill: var(--p-color-text-secondary);
     }
   }
 }
 
 @mixin statusRead-only {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   background-color: transparent;
 
   svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
index e41e0c5d9e0..838f5074819 100644
--- a/polaris-react/src/components/Badge/components/Pip/Pip.scss
+++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -24,7 +24,7 @@
     // stylelint-disable-next-line -- se23 1.25px border width
     border-width: var(--pc-border-width);
     // stylelint-disable-next-line -- se23 override
-    --pc-pip-color: var(--p-color-text-subdued);
+    --pc-pip-color: var(--p-color-text-secondary);
   }
 }
 
@@ -54,7 +54,7 @@
 
   #{$se23} & {
     // stylelint-disable-next-line -- se23
-    --pc-pip-color: var(--p-color-text-subdued);
+    --pc-pip-color: var(--p-color-text-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index 4564e0d804a..d77904808bb 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/polaris-react/src/components/Banner/Banner.scss
@@ -6,7 +6,7 @@
 
   #{$se23} & {
     border: none;
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
   }
 
   @if $in-page {
@@ -51,28 +51,27 @@
   }
 
   &.keyFocused {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
   }
 
   &.statusSuccess {
     border-color: var(--p-color-border-success-subdued);
-    background-color: var(--p-color-bg-success-subdued);
+    background-color: var(--p-color-bg-surface-success);
   }
 
   &.statusInfo {
     border-color: var(--p-color-border-info-subdued);
-    background-color: var(--p-color-bg-info-subdued);
+    background-color: var(--p-color-bg-surface-info);
   }
 
   &.statusWarning {
     border-color: var(--p-color-border-caution-subdued);
-    background-color: var(--p-color-bg-caution-subdued);
+    background-color: var(--p-color-bg-surface-caution);
   }
 
   &.statusCritical {
     border-color: var(--p-color-border-critical-subdued);
-    background-color: var(--p-color-bg-critical-subdued);
+    background-color: var(--p-color-bg-surface-critical);
   }
 }
 
@@ -90,17 +89,17 @@
 
     &:hover {
       border-color: var(--p-color-border-critical-subdued);
-      background: var(--p-color-bg-critical-subdued-hover);
+      background: var(--p-color-bg-surface-critical-hover);
     }
 
     &:active {
       border-color: var(--p-color-border-critical-subdued);
-      background: var(--p-color-bg-critical-subdued-active);
+      background: var(--p-color-bg-surface-critical-active);
     }
 
     &:focus:not(:active) {
       border-color: var(--p-color-border-critical-subdued);
-      background: var(--p-color-bg-critical-subdued);
+      background: var(--p-color-bg-surface-critical);
     }
   }
 
@@ -109,17 +108,17 @@
 
     &:hover {
       border-color: var(--p-color-border-caution-subdued);
-      background: var(--p-color-bg-caution-subdued-hover);
+      background: var(--p-color-bg-surface-caution-hover);
     }
 
     &:active {
       border-color: var(--p-color-border-caution-subdued);
-      background: var(--p-color-bg-caution-subdued-active);
+      background: var(--p-color-bg-surface-caution-active);
     }
 
     &:focus:not(:active) {
       border-color: var(--p-color-border-caution-subdued);
-      background: var(--p-color-bg-caution-subdued);
+      background: var(--p-color-bg-surface-caution);
     }
   }
 
@@ -128,17 +127,17 @@
 
     &:hover {
       border-color: var(--p-color-border-info-subdued);
-      background: var(--p-color-bg-info-subdued-hover);
+      background: var(--p-color-bg-surface-info-hover);
     }
 
     &:active {
       border-color: var(--p-color-border-info-subdued);
-      background: var(--p-color-bg-info-subdued-active);
+      background: var(--p-color-bg-surface-info-active);
     }
 
     &:focus:not(:active) {
       border-color: var(--p-color-border-info-subdued);
-      background: var(--p-color-bg-info-subdued);
+      background: var(--p-color-bg-surface-info);
     }
   }
 
@@ -147,17 +146,17 @@
 
     &:hover {
       border-color: var(--p-color-border-success-subdued);
-      background: var(--p-color-bg-success-subdued-hover);
+      background: var(--p-color-bg-surface-success-hover);
     }
 
     &:active {
       border-color: var(--p-color-border-success-subdued);
-      background: var(--p-color-bg-success-subdued-active);
+      background: var(--p-color-bg-surface-success-active);
     }
 
     &:focus:not(:active) {
       border-color: var(--p-color-border-success-subdued);
-      background: var(--p-color-bg-success-subdued);
+      background: var(--p-color-bg-surface-success);
     }
   }
   // stylelint-enable selector-max-class, selector-max-specificity
diff --git a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
index 5fe5cf7c059..8f1c9367508 100644
--- a/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
+++ b/polaris-react/src/components/Banner/components/BannerExperimental/BannerExperimental.scss
@@ -34,7 +34,7 @@
 }
 
 .text-info-strong.text-info-strong {
-  @include recolor-icon-se23(var(--p-color-text-info-strong));
+  @include recolor-icon-se23(var(--p-color-text-info-on-bg-fill));
 }
 
 .icon-info-strong-experimental.icon-info-strong-experimental {
@@ -42,5 +42,5 @@
 }
 
 .icon-subdued.icon-subdued {
-  @include recolor-icon-se23(var(--p-color-icon-subdued));
+  @include recolor-icon-se23(var(--p-color-icon-secondary));
 }
diff --git a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
index 3f633a5e31a..25f1edcfdfd 100644
--- a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -11,7 +11,7 @@
   min-height: control-height();
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: control-height();
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   text-decoration: none;
   margin: 0;
   padding: var(--p-space-050);
@@ -57,19 +57,18 @@
     min-width: 28px;
 
     &:hover {
-      background-color: var(--p-color-bg-strong-hover);
+      background-color: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:active,
     &:focus {
-      background-color: var(--p-color-bg-strong-active);
+      background-color: var(--p-color-bg-fill-tertiary-active);
     }
 
     &:focus {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
     }
   }
diff --git a/polaris-react/src/components/BulkActions/BulkActions.scss b/polaris-react/src/components/BulkActions/BulkActions.scss
index 3715ac8a92e..40870977dca 100644
--- a/polaris-react/src/components/BulkActions/BulkActions.scss
+++ b/polaris-react/src/components/BulkActions/BulkActions.scss
@@ -53,7 +53,7 @@ $bulk-actions-button-stacking-order: (
   width: auto;
   justify-content: flex-start;
   padding: var(--p-space-400);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   box-shadow: var(--p-shadow-md), var(--p-shadow-xl);
   max-width: 100%;
@@ -94,29 +94,28 @@ $bulk-actions-button-stacking-order: (
     display: flex;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-strong);
+      background-color: var(--p-color-bg-fill-tertiary);
       box-shadow: none;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
-        background-color: var(--p-color-bg-strong-hover);
+        background-color: var(--p-color-bg-fill-tertiary-hover);
         box-shadow: none;
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:focus-visible,
       &:active {
-        background-color: var(--p-color-bg-strong-active);
+        background-color: var(--p-color-bg-fill-tertiary-active);
       }
       /* 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
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
         outline-offset: var(--p-space-050);
       }
       // stylelint-disable-next-line selector-max-combinators -- se23
       &[aria-disabled='true'] {
-        background-color: var(--p-color-bg-transparent-disabled-experimental);
+        background-color: var(--p-color-bg-fill-disabled);
       }
     }
   }
diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
index d3f61e2c2f6..d94082fedc2 100644
--- a/polaris-react/src/components/Button/Button.scss
+++ b/polaris-react/src/components/Button/Button.scss
@@ -75,7 +75,7 @@
     @include base-button-disabled;
     #{$se23} & {
       box-shadow: none;
-      background: var(--p-color-bg-transparent-disabled-experimental);
+      background: var(--p-color-bg-fill-disabled);
     }
   }
 
@@ -346,7 +346,7 @@
 
     &:active {
       // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
-      --pc-button-text: var(--p-color-text-inverse-subdued);
+      --pc-button-text: var(--p-color-text-inverse-secondary);
       background: var(--pc-button-color-active);
       box-shadow: var(--p-shadow-button-inset-experimental);
       // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list
@@ -364,14 +364,14 @@
 
       // stylelint-disable-next-line selector-max-combinators -- se23 temporary styles
       svg {
-        fill: var(--p-color-text-inverse-subdued);
+        fill: var(--p-color-text-inverse-secondary);
       }
     }
 
     &.disabled {
       // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
       color: var(--pc-button-text);
-      background: var(--p-color-bg-transparent-primary-disabled-experimental);
+      background: var(--p-color-bg-fill-brand-disabled);
       box-shadow: none;
 
       &::before {
@@ -414,7 +414,7 @@
 
       &:active {
         // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
-        --pc-button-text: var(--p-color-text-inverse-subdued);
+        --pc-button-text: var(--p-color-text-inverse-secondary);
         box-shadow: var(--p-shadow-button-inset-experimental);
 
         // stylelint-disable-next-line -- se23 overrides
@@ -424,18 +424,18 @@
 
         // stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 temporary styles
         svg {
-          fill: var(--p-color-text-inverse-subdued);
+          fill: var(--p-color-text-inverse-secondary);
         }
       }
     }
 
     &.destructive {
       // stylelint-disable -- Polaris component custom properties
-      --pc-button-color: var(--p-color-bg-critical-strong);
+      --pc-button-color: var(--p-color-bg-fill-critical);
       --pc-button-text: var(--p-color-text-on-color);
-      --pc-button-color-hover: var(--p-color-bg-critical-strong-hover);
-      --pc-button-color-active: var(--p-color-bg-critical-strong-active);
-      --pc-button-color-depressed: var(--p-color-bg-critical-strong-active);
+      --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
+      --pc-button-color-active: var(--p-color-bg-fill-critical-active);
+      --pc-button-color-depressed: var(--p-color-bg-fill-critical-active);
       // stylelint-enable
 
       &:not(.disabled) {
@@ -468,17 +468,11 @@
 
     &.success {
       // stylelint-disable -- Polaris component custom properties
-      --pc-button-color: var(--p-color-bg-success-strong);
+      --pc-button-color: var(--p-color-bg-fill-success);
       --pc-button-text: var(--p-color-text-on-color);
-      --pc-button-color-hover: var(
-        --p-color-bg-success-strong-hover-experimental
-      );
-      --pc-button-color-active: var(
-        --p-color-bg-success-strong-active-experimental
-      );
-      --pc-button-color-depressed: var(
-        --p-color-bg-success-strong-active-experimental
-      );
+      --pc-button-color-hover: var(--p-color-bg-fill-success-hover);
+      --pc-button-color-active: var(--p-color-bg-fill-success-active);
+      --pc-button-color-depressed: var(--p-color-bg-fill-success-active);
       // stylelint-enable
       box-shadow: none;
     }
@@ -495,11 +489,11 @@
 
 .destructive {
   // stylelint-disable -- Polaris component custom properties
-  --pc-button-color: var(--p-color-bg-critical-strong);
+  --pc-button-color: var(--p-color-bg-fill-critical);
   --pc-button-text: var(--p-color-text-on-color);
-  --pc-button-color-hover: var(--p-color-bg-critical-strong-hover);
-  --pc-button-color-active: var(--p-color-bg-critical-strong-active);
-  --pc-button-color-depressed: var(--p-color-bg-critical-strong-active);
+  --pc-button-color-hover: var(--p-color-bg-fill-critical-hover);
+  --pc-button-color-active: var(--p-color-bg-fill-critical-active);
+  --pc-button-color-depressed: var(--p-color-bg-fill-critical-active);
   // stylelint-enable
 
   svg {
@@ -512,7 +506,7 @@
 
   #{$se23} & {
     // stylelint-disable -- Polaris component custom properties
-    --pc-button-color: var(--p-color-bg);
+    --pc-button-color: var(--p-color-bg-surface);
     --pc-button-text: var(--p-color-text-critical);
     --pc-button-color-hover: var(--p-color-bg-hover);
     --pc-button-color-active: var(--p-color-bg-active);
@@ -546,7 +540,7 @@
 .primaryPlain {
   // stylelint-disable -- Polaris component custom properties
   --pc-button-color: var(--p-color-bg-interactive-subdued-active);
-  --pc-button-text: var(--p-color-text-interactive-hover);
+  --pc-button-text: var(--p-color-text-emphasis-hover);
   --pc-button-color-hover: var(--p-color-bg-interactive-subdued-active);
   --pc-button-color-active: var(--p-color-bg-interactive-subdued-active);
   --pc-button-color-depressed: var(--p-surface-selected-depressed);
@@ -558,7 +552,7 @@
   }
 
   &:is(:hover, :focus, :active) {
-    color: var(--p-color-text-interactive-active);
+    color: var(--p-color-text-emphasis-active);
     box-shadow: none;
   }
 
@@ -570,8 +564,8 @@
     // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
     --pc-button-color: transparent;
     --pc-button-text: var(--p-color-text);
-    --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental);
-    --pc-button-color-active: var(--p-color-bg-transparent-active-experimental);
+    --pc-button-color-hover: var(--p-color-bg-fill-transparent-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-transparent-active);
     // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
     box-shadow: none;
 
@@ -622,10 +616,8 @@
       // stylelint-disable polaris/conventions/polaris/custom-property-allowed-list -- se23 temporary styles
       --pc-button-color: transparent;
       --pc-button-text: var(--p-color-text-critical);
-      --pc-button-color-hover: var(--p-color-bg-transparent-hover-experimental);
-      --pc-button-color-active: var(
-        --p-color-bg-transparent-active-experimental
-      );
+      --pc-button-color-hover: var(--p-color-bg-fill-transparent-hover);
+      --pc-button-color-active: var(--p-color-bg-fill-transparent-active);
 
       &:hover,
       &:active {
@@ -651,7 +643,7 @@
 
       // stylelint-disable selector-max-combinators, max-nesting-depth, selector-max-class -- se23 temporary styles
       path {
-        fill: var(--p-color-icon-subdued);
+        fill: var(--p-color-icon-secondary);
       }
 
       &:active,
@@ -709,7 +701,7 @@
   }
 
   &.pressed {
-    background: var(--p-color-bg-subdued-active);
+    background: var(--p-color-bg-surface-secondary-active);
     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
@@ -735,7 +727,7 @@
 
     &:hover {
       border: var(--p-border-width-025) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
+      background: var(--p-color-bg-surface-critical);
     }
 
     &:focus-visible {
@@ -746,7 +738,7 @@
 
     &:active {
       border: var(--p-border-width-025) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
+      background: var(--p-color-bg-surface-critical);
     }
 
     // stylelint-disable-next-line selector-max-class -- too many classes
@@ -759,7 +751,7 @@
     // stylelint-disable-next-line selector-max-class -- too many classes
     &.pressed {
       border: var(--p-border-width-025) solid var(--p-color-border-critical);
-      background: var(--p-color-bg-critical-subdued);
+      background: var(--p-color-bg-surface-critical);
       color: var(--p-color-text-critical);
     }
   }
@@ -784,7 +776,7 @@
 }
 
 .loading.disabled svg {
-  fill: var(--p-color-icon-subdued);
+  fill: var(--p-color-icon-secondary);
 }
 
 // The way the designs work, we need to do lots of reaching down to
@@ -800,7 +792,7 @@
   background: transparent;
   border: 0;
   box-shadow: none;
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
 
   #{$se23} & {
     box-shadow: none;
@@ -810,7 +802,7 @@
   }
 
   svg {
-    fill: var(--p-color-icon-interactive);
+    fill: var(--p-color-icon-emphasis);
   }
 
   > .Content {
@@ -828,7 +820,7 @@
 
   &:hover,
   &:focus:not(.disabled) {
-    color: var(--p-color-text-interactive-hover);
+    color: var(--p-color-text-emphasis-hover);
     background: transparent;
     box-shadow: none;
 
@@ -837,7 +829,7 @@
     }
 
     svg {
-      fill: var(--p-color-icon-interactive-hover);
+      fill: var(--p-color-icon-emphasis-hover);
     }
 
     &:not(.removeUnderline) {
@@ -847,14 +839,14 @@
 
   &.pressed,
   &:active {
-    color: var(--p-color-text-interactive-active);
+    color: var(--p-color-text-emphasis-active);
     background: transparent;
     box-shadow: none;
 
     #{$se23} & {
       background-color: transparent;
       // Specificity bump
-      color: var(--p-color-text-interactive-active);
+      color: var(--p-color-text-emphasis-active);
 
       // stylelint-disable-next-line -- se23 override
       > .Content {
@@ -863,11 +855,11 @@
     }
 
     svg {
-      fill: var(--p-color-icon-interactive-active);
+      fill: var(--p-color-icon-emphasis-active);
 
       #{$se23} & {
         // Specificity bump
-        fill: var(--p-color-icon-interactive-active);
+        fill: var(--p-color-icon-emphasis-active);
       }
     }
 
@@ -893,8 +885,7 @@
         outline: var(--p-border-width-050) dotted;
       }
       #{$se23} & {
-        outline: var(--p-border-width-050) solid
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
         outline-offset: var(--p-space-050);
         border-radius: var(--p-border-radius-150);
       }
@@ -960,7 +951,7 @@
     }
 
     &:hover {
-      color: var(--p-color-bg-critical-strong-hover);
+      color: var(--p-color-bg-fill-critical-hover);
     }
 
     #{$se23} &:hover,
@@ -1025,7 +1016,7 @@
       fill: var(--p-color-icon);
 
       #{$se23} & {
-        fill: var(--p-color-icon-subdued);
+        fill: var(--p-color-icon-secondary);
       }
     }
 
@@ -1067,7 +1058,7 @@
 
   &.destructive.iconOnly {
     svg {
-      fill: var(--p-color-bg-critical-strong);
+      fill: var(--p-color-bg-fill-critical);
 
       #{$se23} & {
         fill: var(--p-color-icon-critical-strong-experimental);
@@ -1075,7 +1066,7 @@
     }
 
     &:hover svg {
-      fill: var(--p-color-bg-critical-strong-hover);
+      fill: var(--p-color-bg-fill-critical-hover);
 
       #{$se23} & {
         fill: var(--p-color-icon-critical-strong-hover-experimental);
@@ -1088,7 +1079,7 @@
 
     &:active svg,
     &.pressed svg {
-      fill: var(--p-color-bg-critical-strong-active);
+      fill: var(--p-color-bg-fill-critical-active);
 
       #{$se23} & {
         fill: var(--p-color-icon-critical-strong-active-experimental);
diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.scss b/polaris-react/src/components/CalloutCard/CalloutCard.scss
index 6c5724fbf65..04b70bd7ea0 100644
--- a/polaris-react/src/components/CalloutCard/CalloutCard.scss
+++ b/polaris-react/src/components/CalloutCard/CalloutCard.scss
@@ -47,7 +47,7 @@
   top: var(--p-space-400);
   position: absolute;
   #{$se23} & svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Checkbox/Checkbox.scss b/polaris-react/src/components/Checkbox/Checkbox.scss
index a14b23435ca..e0dcaa5fd8c 100644
--- a/polaris-react/src/components/Checkbox/Checkbox.scss
+++ b/polaris-react/src/components/Checkbox/Checkbox.scss
@@ -9,7 +9,7 @@
   #{$se23} & {
     border-width: 0;
     box-shadow: inset 0 0 0 var(--p-border-width-0165)
-      var(--p-color-border-input);
+      var(--p-color-input-border);
     transition: border-color var(--p-motion-duration-100)
         var(--p-motion-ease-out),
       border-width var(--p-motion-duration-100) var(--p-motion-ease-out),
@@ -21,12 +21,12 @@
 }
 
 .ChoiceLabel:hover .Backdrop {
-  border-color: var(--p-color-border-input-hover);
+  border-color: var(--p-color-input-border-hover);
 
   #{$se23} & {
     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);
+      var(--p-color-input-border-hover);
+    background-color: var(--p-color-input-bg-surface-hover);
   }
 }
 
@@ -50,10 +50,9 @@
       @include focus-ring($style: 'focused');
 
       #{$se23} & {
-        outline: var(--p-border-width-050) solid
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
         outline-offset: var(--p-space-025);
-        background-color: var(--p-color-bg-input-hover-experimental);
+        background-color: var(--p-color-input-bg-surface-hover);
         border-width: 0;
       }
     }
@@ -147,11 +146,11 @@
   #{$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-0165) solid var(--p-color-input-border);
   }
 
   &:hover {
-    border-color: var(--p-color-border-input-hover);
+    border-color: var(--p-color-input-border-hover);
   }
 }
 
@@ -217,9 +216,9 @@
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include control-backdrop(error);
       #{$se23} & {
-        background-color: var(--p-color-bg-critical-subdued);
+        background-color: var(--p-color-bg-surface-critical);
         box-shadow: inset 0 0 0 var(--p-border-width-0165)
-          var(--p-color-bg-critical-strong-active);
+          var(--p-color-bg-fill-critical-active);
       }
     }
   }
@@ -228,7 +227,7 @@
     &:active {
       #{$se23} & {
         box-shadow: inset 0 0 0 var(--p-space-050)
-          var(--p-color-bg-critical-strong-active);
+          var(--p-color-bg-fill-critical-active);
       }
     }
   }
@@ -240,7 +239,7 @@
       #{$se23} & {
         // stylelint-disable declaration-no-important -- se23
         box-shadow: inset 0 0 0 var(--p-space-300)
-          var(--p-color-bg-critical-strong-active) !important;
+          var(--p-color-bg-fill-critical-active) !important;
         // stylelint-enable declaration-no-important
       }
     }
@@ -251,7 +250,7 @@
       background-color: var(--p-color-border-critical);
       #{$se23} & {
         box-shadow: inset 0 0 0 var(--p-space-050)
-          var(--p-color-bg-critical-strong-active);
+          var(--p-color-bg-fill-critical-active);
       }
     }
   }
@@ -260,8 +259,8 @@
     &,
     .ChoiceLabel:hover & {
       #{$se23} & {
-        border-color: var(--p-color-border-critical-strong-experimental);
-        background-color: var(--p-color-bg-critical-subdued);
+        border-color: var(--p-color-border-critical-secondary);
+        background-color: var(--p-color-bg-surface-critical);
       }
     }
   }
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.scss b/polaris-react/src/components/ColorPicker/ColorPicker.scss
index 961a1b3dcfa..35047ab1153 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.scss
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.scss
@@ -2,8 +2,8 @@
 
 @mixin checkers {
   background: repeating-conic-gradient(
-      var(--p-color-bg) 0% 25%,
-      var(--p-color-bg-subdued) 0% 50%
+      var(--p-color-bg-surface) 0% 25%,
+      var(--p-color-bg-surface-secondary) 0% 50%
     )
     50% / var(--p-space-400) var(--p-space-400);
 }
@@ -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-100) solid var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-full);
   pointer-events: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
diff --git a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
index f4bf54a15e0..7eefe5665af 100644
--- a/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
+++ b/polaris-react/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -75,7 +75,7 @@ export function WithHexTextField() {
       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)',
+      border: 'var(--p-border-width-1) solid var(--p-color-border-secondary)',
       backgroundColor: hsbToHex(color),
     },
     TextField: {
diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
index 50d3d93fefc..0b9e81ec0e3 100644
--- a/polaris-react/src/components/DataTable/DataTable.scss
+++ b/polaris-react/src/components/DataTable/DataTable.scss
@@ -5,7 +5,7 @@
   --pc-data-table-first-column-width: 145px;
   position: relative;
   max-width: 100vw;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   overflow: hidden;
 
@@ -51,11 +51,11 @@
 .Pip {
   height: 6px;
   width: 6px;
-  background: var(--p-color-text-subdued);
+  background: var(--p-color-text-secondary);
   border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
-    background: var(--p-color-icon-subdued);
+    background: var(--p-color-icon-secondary);
   }
 
   &:not(:last-of-type) {
@@ -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-025) solid var(--p-color-border-secondary);
   }
 }
 
@@ -148,7 +148,7 @@
   &.RowCountIsEven .TableRow:nth-child(2n + 1) .Cell,
   &.ShowTotalsInFooter .TableRow:nth-child(2n + 1) .Cell,
   &.ShowTotalsInFooter.RowCountIsEven .TableRow:nth-child(2n) .Cell {
-    background: var(--p-color-bg-subdued);
+    background: var(--p-color-bg-surface-secondary);
   }
 }
 
@@ -158,7 +158,7 @@
   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-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     border-right: var(--p-border-width-025) solid var(--p-color-border);
@@ -185,7 +185,7 @@
 .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-025) solid var(--p-color-border-secondary);
   border-top: 0;
 
   #{$se23} & {
@@ -334,7 +334,7 @@
   }
 
   &:hover {
-    color: var(--p-color-text-interactive-hover);
+    color: var(--p-color-text-emphasis-hover);
 
     #{$se23} & {
       color: var(--p-color-text);
@@ -374,7 +374,7 @@
   }
 
   &:hover svg {
-    fill: var(--p-color-icon-interactive-hover);
+    fill: var(--p-color-icon-emphasis-hover);
 
     #{$se23} & {
       fill: var(--p-color-icon);
@@ -390,15 +390,15 @@
 
 .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);
+  background: var(--p-color-bg-surface-secondary);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     border-bottom: var(--p-border-width-025) solid var(--p-color-border);
   }
 
   .ZebraStripingOnData.ShowTotals & {
-    background: var(--p-color-bg-subdued);
+    background: var(--p-color-bg-surface-secondary);
   }
 
   .ZebraStripingOnData.ShowTotals.RowCountIsEven &,
@@ -408,7 +408,7 @@
 }
 
 .Cell-total-footer {
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
   border-bottom: none;
 
   #{$se23} & {
@@ -436,10 +436,10 @@
 
 .Footer {
   padding: var(--p-space-400);
-  background: var(--p-color-bg-subdued);
-  color: var(--p-color-text-subdued);
+  background: var(--p-color-bg-surface-secondary);
+  color: var(--p-color-text-secondary);
   text-align: center;
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
   border-bottom-left-radius: var(--p-border-radius-200);
   border-bottom-right-radius: var(--p-border-radius-200);
 
@@ -506,12 +506,12 @@
   }
 
   .StickyTableHeadingsRow {
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
   }
 
   .StickyHeaderInner-isSticky {
     visibility: visible;
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
     box-shadow: var(--p-shadow-md);
 
     #{$se23} & {
diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
index bde56450fe8..dec35f19d7a 100644
--- a/polaris-react/src/components/DatePicker/DatePicker.scss
+++ b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -175,7 +175,7 @@
   background: transparent;
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-regular);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   text-align: center;
 }
 
diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.scss b/polaris-react/src/components/DescriptionList/DescriptionList.scss
index 544df552405..a75e0941e7e 100644
--- a/polaris-react/src/components/DescriptionList/DescriptionList.scss
+++ b/polaris-react/src/components/DescriptionList/DescriptionList.scss
@@ -30,7 +30,8 @@
 
     // 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-025) solid
+        var(--p-color-border-secondary);
     }
   }
 }
@@ -44,7 +45,7 @@
   }
 
   + .Term {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
   }
 
   @media #{$p-breakpoints-sm-up} {
@@ -57,7 +58,8 @@
 
     // 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-025) solid
+        var(--p-color-border-secondary);
     }
   }
 }
diff --git a/polaris-react/src/components/Divider/Divider.tsx b/polaris-react/src/components/Divider/Divider.tsx
index 1df31d5ec35..60404d210c1 100644
--- a/polaris-react/src/components/Divider/Divider.tsx
+++ b/polaris-react/src/components/Divider/Divider.tsx
@@ -6,7 +6,7 @@ import styles from './Divider.scss';
 export interface DividerProps {
   /**
    * Divider border color
-   * @default 'border-subdued'
+   * @default 'border-secondary'
    */
   borderColor?: ColorBorderAlias | 'transparent';
   /**
@@ -17,7 +17,7 @@ export interface DividerProps {
 }
 
 export const Divider = ({
-  borderColor = 'border-subdued',
+  borderColor = 'border-secondary',
   borderWidth = '1',
 }: DividerProps) => {
   const borderColorValue =
diff --git a/polaris-react/src/components/Divider/tests/Divider.test.tsx b/polaris-react/src/components/Divider/tests/Divider.test.tsx
index 270cd78dde9..f5bdd81ab85 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-1) solid var(--p-color-border-secondary)',
       } as React.CSSProperties,
     });
   });
@@ -31,7 +31,7 @@ describe('<Divider />', () => {
     expect(divider).toContainReactComponent('hr', {
       style: expect.objectContaining({
         borderBlockStart:
-          'var(--p-border-width-2) solid var(--p-color-border-subdued)',
+          'var(--p-border-width-2) solid var(--p-color-border-secondary)',
       }) as React.CSSProperties,
     });
   });
diff --git a/polaris-react/src/components/DropZone/DropZone.scss b/polaris-react/src/components/DropZone/DropZone.scss
index f1c16f11af1..7ca4de2567c 100755
--- a/polaris-react/src/components/DropZone/DropZone.scss
+++ b/polaris-react/src/components/DropZone/DropZone.scss
@@ -32,9 +32,9 @@ $dropzone-stacking-order: (
   position: relative;
   display: flex;
   justify-content: center;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   #{$se23} & {
-    background-color: var(--p-color-bg-input);
+    background-color: var(--p-color-input-bg-surface);
   }
   border-radius: var(--p-border-radius-200);
 
@@ -76,22 +76,22 @@ $dropzone-stacking-order: (
 
   &:not(.isDisabled) {
     #{$se23} &::after {
-      border-color: var(--p-color-border-input);
+      border-color: var(--p-color-input-border);
     }
 
     &:hover {
       cursor: pointer;
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-input-hover-experimental);
+        background-color: var(--p-color-input-bg-surface-hover);
       }
 
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &::after {
-        border-color: var(--p-color-border-interactive-hover);
+        border-color: var(--p-color-border-emphasis-hover);
         #{$se23} & {
-          border-color: var(--p-color-border-input-hover);
+          border-color: var(--p-color-input-border-hover);
         }
       }
     }
@@ -110,7 +110,7 @@ $dropzone-stacking-order: (
     // the additional .isDisabled argument in this :not invocation is to ensure we don't mess up disabled styles due to specificity.
     // Won't be necessary post SE23.
     &::after {
-      border-color: var(--p-color-border-input);
+      border-color: var(--p-color-input-border);
     }
   }
 }
@@ -125,7 +125,7 @@ $dropzone-stacking-order: (
   cursor: not-allowed;
 
   #{$se23} & {
-    background-color: var(--p-color-bg-transparent-disabled-experimental);
+    background-color: var(--p-color-bg-fill-disabled);
     color: var(--p-color-text-disabled);
 
     // se23 - specificity bump
@@ -181,14 +181,13 @@ $dropzone-stacking-order: (
   border: var(--p-border-width-025) $dropzone-border-style
     var(--p-color-border-interactive);
   text-align: center;
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
   background-color: var(--p-color-bg-interactive-selected);
   pointer-events: none;
 
   #{$se23} & {
-    border: var(--p-border-width-025) solid
-      var(--p-color-border-input-active-experimental);
-    background-color: var(--p-color-bg-input-active-experimental);
+    border: var(--p-border-width-025) solid var(--p-color-input-border-active);
+    background-color: var(--p-color-input-bg-surface-active);
     color: var(--p-color-text);
   }
 
@@ -200,13 +199,13 @@ $dropzone-stacking-order: (
 .hasError > .Overlay {
   border-color: var(--p-color-border-critical);
   color: var(--p-color-text-critical);
-  background-color: var(--p-color-bg-critical-subdued);
+  background-color: var(--p-color-bg-surface-critical);
   #{$se23} & {
-    border-color: var(--p-color-border-critical-strong-experimental);
+    border-color: var(--p-color-border-critical-secondary);
     color: var(--p-color-text-critical);
     border-style: $dropzone-border-style;
     border-width: var(--p-border-width-0165);
-    background-color: var(--p-color-bg-critical-subdued);
+    background-color: var(--p-color-bg-surface-critical);
   }
 }
 
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
index 4ecbbb4117c..76b76c29b27 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -31,7 +31,7 @@
   padding: var(--p-space-100) var(--p-space-200);
   margin: 0;
   text-decoration: none;
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
   background: var(--p-color-bg-interactive-subdued);
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-semibold);
@@ -41,7 +41,7 @@
   appearance: none;
 
   &:hover {
-    color: var(--p-color-text-interactive-active);
+    color: var(--p-color-text-emphasis-active);
   }
 
   &.disabled {
@@ -52,7 +52,7 @@
       // additional specificity
       // stylelint-disable-next-line selector-max-class -- se23
       &.disabled {
-        background-color: var(--p-color-bg-transparent-disabled-experimental);
+        background-color: var(--p-color-bg-fill-disabled);
       }
     }
 
@@ -64,7 +64,7 @@
 
   #{$se23} & {
     color: var(--p-color-text);
-    background-color: var(--p-color-bg-input);
+    background-color: var(--p-color-input-bg-surface);
     padding: var(--p-space-150) var(--p-space-300);
     box-shadow: var(--p-shadow-button-experimental);
     border-radius: var(--p-border-radius-200);
@@ -72,7 +72,7 @@
 }
 
 .ActionTitle {
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
   text-decoration: none;
 
   &:not(.ActionTitle-disabled) {
@@ -80,7 +80,7 @@
 
     &:hover,
     &:active {
-      color: var(--p-color-text-interactive-active);
+      color: var(--p-color-text-emphasis-active);
       text-decoration: underline;
     }
   }
diff --git a/polaris-react/src/components/ExceptionList/ExceptionList.scss b/polaris-react/src/components/ExceptionList/ExceptionList.scss
index be387f9eee6..5310f6e89d7 100644
--- a/polaris-react/src/components/ExceptionList/ExceptionList.scss
+++ b/polaris-react/src/components/ExceptionList/ExceptionList.scss
@@ -9,7 +9,7 @@
 .Item {
   position: relative;
   padding-left: var(--p-space-600);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 
   + .Item {
     margin-top: var(--p-space-100);
@@ -28,7 +28,7 @@
   margin-right: var(--p-space-100);
 
   svg {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -46,7 +46,7 @@
   width: 6px;
   height: 6px;
   border-radius: var(--p-border-radius-full);
-  background-color: var(--p-color-icon-subdued);
+  background-color: var(--p-color-icon-secondary);
 
   .statusWarning & {
     background-color: var(--p-color-icon-caution);
diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
index 9df0b47dff8..8bf1f234e35 100644
--- a/polaris-react/src/components/Filters/Filters.scss
+++ b/polaris-react/src/components/Filters/Filters.scss
@@ -3,10 +3,10 @@
 .Container {
   position: relative;
   z-index: var(--p-z-index-1);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   border-top-left-radius: var(--p-border-radius-200);
   border-top-right-radius: var(--p-border-radius-200);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 }
 
 .ContainerUplift {
@@ -39,12 +39,12 @@
 }
 
 .FiltersWrapper {
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   height: 53px;
   overflow: hidden;
 
   @media #{$p-breakpoints-sm-down} {
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-surface);
   }
 
   @media #{$p-breakpoints-md-up} {
@@ -86,9 +86,9 @@
 }
 
 .AddFilter {
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   border-radius: var(--p-border-radius-750);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
+  border: var(--p-color-border-secondary) dashed var(--p-border-width-025);
   padding: 0 var(--p-space-200) 0 var(--p-space-300);
   height: 28px;
   cursor: pointer;
@@ -164,7 +164,7 @@
   }
 
   #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
+    background: var(--p-color-bg-surface-tertiary);
     border-radius: var(--p-border-radius-200);
     border: var(--p-color-border) dashed var(--p-border-width-025);
 
@@ -179,10 +179,10 @@
     }
 
     &:active {
-      background: var(--p-color-bg-subdued);
+      background: var(--p-color-bg-surface-secondary);
 
       #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
+        background: var(--p-color-bg-surface-tertiary);
       }
     }
 
@@ -209,7 +209,7 @@
     right: 0;
     display: flex;
     padding: var(--p-space-100) var(--p-space-400) var(--p-space-100) 0;
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-surface);
     margin-left: var(--p-space-200);
 
     &::before {
@@ -224,8 +224,8 @@
       background: linear-gradient(
         90deg,
         rgba(255, 255, 255, 0) 0%,
-        var(--p-color-bg) 70%,
-        var(--p-color-bg) 100%
+        var(--p-color-bg-surface) 70%,
+        var(--p-color-bg-surface) 100%
       );
       // stylelint-enable
     }
diff --git a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
index 7cfb4a2d7da..df1fbdcac86 100644
--- a/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
+++ b/polaris-react/src/components/Filters/components/FilterPill/FilterPill.scss
@@ -1,9 +1,9 @@
 @import '../../../../styles/common';
 
 .FilterButton {
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   border-radius: var(--p-border-radius-750);
-  border: var(--p-color-border-subdued) dashed var(--p-border-width-025);
+  border: var(--p-color-border-secondary) dashed var(--p-border-width-025);
   cursor: pointer;
   color: var(--p-color-text);
 
@@ -34,7 +34,7 @@
   }
 
   &.ActiveFilterButton {
-    background: var(--p-color-bg);
+    background: var(--p-color-bg-surface);
     border-style: solid;
   }
 
@@ -43,7 +43,7 @@
   }
 
   #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
+    background: var(--p-color-bg-surface-tertiary);
     border-radius: var(--p-border-radius-200);
     border: var(--p-color-border) dashed var(--p-border-width-025);
 
@@ -58,10 +58,10 @@
     }
 
     &:active {
-      background: var(--p-color-bg-subdued);
+      background: var(--p-color-bg-surface-secondary);
 
       #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
+        background: var(--p-color-bg-surface-tertiary);
       }
     }
 
@@ -73,14 +73,14 @@
     }
 
     &.ActiveFilterButton {
-      background: var(--p-color-bg);
+      background: var(--p-color-bg-surface);
       border-style: solid;
 
       &:active {
-        background: var(--p-color-bg-subdued);
+        background: var(--p-color-bg-surface-secondary);
 
         #{$se23} & {
-          background: var(--p-color-bg-secondary-experimental);
+          background: var(--p-color-bg-surface-tertiary);
         }
       }
     }
diff --git a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
index 81f007d2448..3d8e23e8c85 100644
--- a/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/Filters/components/SearchField/SearchField.scss
@@ -16,26 +16,26 @@
   /* 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: var(--p-border-width-025) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-100);
-  border-color: var(--p-color-border-input);
+  border-color: var(--p-color-input-border);
   padding-inline: var(--p-space-150);
   width: 100%;
 
   &:hover {
-    border-color: var(--p-color-border-input-hover);
-    background-color: var(--p-color-bg-input-hover-experimental);
+    border-color: var(--p-color-input-border-hover);
+    background-color: var(--p-color-input-bg-surface-hover);
   }
 
   &:active,
   &:focus {
-    border-color: var(--p-color-border-input-active-experimental);
+    border-color: var(--p-color-input-border-active);
     border-width: var(--p-border-width-025);
-    background-color: var(--p-color-bg-input-active-experimental);
+    background-color: var(--p-color-input-bg-surface-active);
   }
 
   &:disabled {
-    background-color: var(--p-color-bg-transparent-disabled-experimental);
+    background-color: var(--p-color-bg-fill-disabled);
   }
 }
 
@@ -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-050) solid var(--p-color-border-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 21b93b888bc..e57c68ba822 100644
--- a/polaris-react/src/components/Frame/Frame.scss
+++ b/polaris-react/src/components/Frame/Frame.scss
@@ -107,7 +107,7 @@ $sidebar-breakpoint: 1200px;
   transition: opacity var(--p-motion-duration-100) var(--p-motion-ease);
 
   svg {
-    fill: var(--p-color-bg);
+    fill: var(--p-color-bg-surface);
   }
 
   @media print {
diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx
index 1c50181f3ce..05be4a2814e 100644
--- a/polaris-react/src/components/Frame/Frame.stories.tsx
+++ b/polaris-react/src/components/Frame/Frame.stories.tsx
@@ -1105,7 +1105,7 @@ function WithSidebarEnabled({
               right: 'var(--p-space-200)',
               width: 'calc(var(--pc-sidebar-width) - var(--p-space-400))',
               height: 'calc(100vh - 3.5rem - var(--p-space-400))',
-              background: 'var(--p-color-bg)',
+              background: 'var(--p-color-bg-surface)',
               padding: 'var(--p-space-200)',
               boxShadow: 'var(--p-shadow-md)',
               borderRadius: 'var(--p-border-radius-3)',
diff --git a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
index 057b7fa2c20..65ce7179cef 100644
--- a/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
+++ b/polaris-react/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -2,10 +2,10 @@
 
 .ContextualSaveBar {
   /* stylelint-disable -- polaris: Used to apply dark theme to action buttons */
-  --p-color-bg: var(--p-color-bg-inverse);
+  --p-color-bg-surface: var(--p-color-bg-inverse);
   --p-color-text: var(--p-color-text-inverse);
-  --p-color-bg-hover: var(--p-color-bg-inverse-hover);
-  --p-color-bg-subdued-active: var(--p-color-bg-inverse-active);
+  --p-color-bg-hover: var(--p-color-bg-fill-inverse-hover);
+  --p-color-bg-surface-secondary-active: var(--p-color-bg-fill-inverse-active);
   /* stylelint-enable */
   display: flex;
   height: $top-bar-height;
@@ -118,16 +118,16 @@
 
     &[class*='Polaris-Button--disabled'],
     &[class*='Button-disabled'] {
-      --pc-button-text: var(--p-color-text-subdued);
+      --pc-button-text: var(--p-color-text-secondary);
       background: var(--pc-button-color-disabled);
     }
   }
 
   #{$se23} & [class*='Polaris-Button--primaryPlain'],
   #{$se23} & [class*='Button-primaryPlain'] {
-    --pc-button-color: var(--p-color-bg-inset-strong);
-    --pc-button-color-hover: var(--p-color-bg-inverse-hover);
-    --pc-button-color-active: var(--p-color-bg-inverse-active);
+    --pc-button-color: var(--p-color-bg-fill-inverse);
+    --pc-button-color-hover: var(--p-color-bg-fill-inverse-hover);
+    --pc-button-color-active: var(--p-color-bg-fill-inverse-active);
     --pc-button-text: var(--p-color-text-inverse);
 
     &::after {
@@ -145,7 +145,7 @@
 
     &[class*='Polaris-Button--disabled'],
     &[class*='Button-disabled'] {
-      --pc-button-text: var(--p-color-text-subdued);
+      --pc-button-text: var(--p-color-text-secondary);
       background: var(--pc-button-color);
     }
   }
diff --git a/polaris-react/src/components/Frame/components/Loading/Loading.scss b/polaris-react/src/components/Frame/components/Loading/Loading.scss
index 1293a49b477..247847c0358 100644
--- a/polaris-react/src/components/Frame/components/Loading/Loading.scss
+++ b/polaris-react/src/components/Frame/components/Loading/Loading.scss
@@ -3,7 +3,7 @@
 .Loading {
   overflow: hidden;
   height: 3px;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   opacity: 1;
 }
 
diff --git a/polaris-react/src/components/Frame/components/Toast/Toast.scss b/polaris-react/src/components/Frame/components/Toast/Toast.scss
index 65c34f7201c..6a9da17390d 100644
--- a/polaris-react/src/components/Frame/components/Toast/Toast.scss
+++ b/polaris-react/src/components/Frame/components/Toast/Toast.scss
@@ -38,7 +38,7 @@ $Backdrop-opacity: 0.88;
 }
 
 .error {
-  background: var(--p-color-bg-critical-strong);
+  background: var(--p-color-bg-fill-critical);
   color: var(--p-color-text-on-color);
 
   .CloseButton {
@@ -71,7 +71,7 @@ $Backdrop-opacity: 0.88;
   border: none;
   appearance: none;
   background: transparent;
-  color: var(--p-color-icon-subdued);
+  color: var(--p-color-icon-secondary);
   cursor: pointer;
   margin-left: var(--p-space-200);
 
diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
index 4d3d48ffbbd..9a7e3c2b14d 100644
--- a/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
+++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.scss
@@ -5,7 +5,7 @@
   display: flex;
   height: $top-bar-height;
   box-shadow: var(--p-shadow-sm);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
 
   #{$se23} & {
     box-shadow: var(--p-shadow-xs);
@@ -19,8 +19,8 @@
   padding-left: var(--p-space-300);
   padding-right: var(--p-space-300);
   border-width: 0;
-  border-right: var(--p-border-width-025) solid var(--p-color-border-subdued);
-  background-color: var(--p-color-bg);
+  border-right: var(--p-border-width-025) solid var(--p-color-border-secondary);
+  background-color: var(--p-color-bg-surface);
   font-weight: var(--p-font-weight-medium);
   cursor: pointer;
 
diff --git a/polaris-react/src/components/Icon/Icon.scss b/polaris-react/src/components/Icon/Icon.scss
index c10a812c05d..2282a321c48 100644
--- a/polaris-react/src/components/Icon/Icon.scss
+++ b/polaris-react/src/components/Icon/Icon.scss
@@ -10,7 +10,7 @@
 }
 
 .applyColor {
-  color: var(--p-color-bg);
+  color: var(--p-color-bg-surface);
 }
 
 .hasBackdrop {
@@ -36,12 +36,12 @@
   }
 
   &::before {
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
   }
 }
 
 .colorSubdued svg {
-  fill: var(--p-color-icon-subdued);
+  fill: var(--p-color-icon-secondary);
 }
 
 .colorCritical {
@@ -50,12 +50,12 @@
   }
 
   &::before {
-    background-color: var(--p-color-bg-critical);
+    background-color: var(--p-color-bg-fill-critical-secondary);
   }
 }
 
 .colorInteractive svg {
-  fill: var(--p-color-icon-interactive);
+  fill: var(--p-color-icon-emphasis);
 }
 
 .colorWarning {
@@ -64,7 +64,7 @@
   }
 
   &::before {
-    background-color: var(--p-color-bg-warning);
+    background-color: var(--p-color-bg-fill-warning-secondary);
   }
 }
 
@@ -74,7 +74,7 @@
   }
 
   &::before {
-    background-color: var(--p-color-bg-info);
+    background-color: var(--p-color-bg-fill-info-secondary);
   }
 }
 
@@ -84,12 +84,12 @@
   }
 
   &::before {
-    background-color: var(--p-color-bg-success);
+    background-color: var(--p-color-bg-fill-success-secondary);
   }
 }
 
 .colorPrimary svg {
-  fill: var(--p-color-icon-primary);
+  fill: var(--p-color-icon-brand);
 }
 
 .colorMagic svg {
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.scss b/polaris-react/src/components/IndexFilters/IndexFilters.scss
index de58046ca3a..82658f24ad7 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.scss
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.scss
@@ -66,7 +66,7 @@ $spinner-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 
   &::before {
     content: '';
@@ -80,7 +80,7 @@ $spinner-size: 20px;
     background: linear-gradient(
       to right,
       rgba(255, 255, 255, 0),
-      var(--p-color-bg)
+      var(--p-color-bg-surface)
     );
     // stylelint-enable
   }
@@ -96,7 +96,7 @@ $spinner-size: 20px;
   @media #{$p-breakpoints-md-down} {
     position: relative;
     padding: var(--p-space-300) var(--p-space-400);
-    border-left: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-left: var(--p-border-width-025) solid var(--p-color-border-secondary);
     gap: var(--p-space-200);
 
     &::before {
@@ -111,7 +111,7 @@ $spinner-size: 20px;
       background: linear-gradient(
         to right,
         rgba(255, 255, 255, 0),
-        var(--p-color-bg)
+        var(--p-color-bg-surface)
       );
       // stylelint-enable
     }
diff --git a/polaris-react/src/components/IndexFilters/components/Container/Container.scss b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
index e2ac62cdf86..2a29161958f 100644
--- a/polaris-react/src/components/IndexFilters/components/Container/Container.scss
+++ b/polaris-react/src/components/IndexFilters/components/Container/Container.scss
@@ -1,10 +1,10 @@
 @import '../../../../styles/common';
 
 .Container {
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   border-top-left-radius: var(--p-border-radius-200);
   border-top-right-radius: var(--p-border-radius-200);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 
   #{$se23} & {
     border-bottom: var(--p-border-width-025) solid var(--p-color-border);
diff --git a/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.scss b/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.scss
index 1b4b8e5f307..b7f3a0b4dc8 100644
--- a/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.scss
+++ b/polaris-react/src/components/IndexFilters/components/FilterButton/FilterButton.scss
@@ -24,6 +24,6 @@
   }
 
   path {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
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 883b47f50d8..a1eea9c7bcf 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
@@ -24,7 +24,7 @@
   }
 
   #{$se23} &:hover {
-    background-color: var(--p-color-bg-transparent-hover-experimental);
+    background-color: var(--p-color-bg-fill-transparent-hover);
   }
 
   + .DirectionButton {
@@ -46,11 +46,11 @@
 
 .DirectionButton-active {
   background: var(--p-color-bg-interactive-selected);
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
 
   #{$se23} & {
     color: var(--p-color-text);
-    background: var(--p-color-bg-transparent-active-experimental);
+    background: var(--p-color-bg-fill-transparent-active);
   }
 }
 
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index c89b1acc633..289f26bdb1d 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -81,7 +81,7 @@ $loading-panel-height: 53px;
   width: 100%;
   justify-content: center;
   align-items: center;
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   padding: var(--p-space-200) var(--p-space-400);
   box-shadow: var(--p-shadow-md);
 
@@ -89,7 +89,7 @@ $loading-panel-height: 53px;
     display: flex;
     flex-wrap: nowrap;
     width: 100%;
-    background: var(--p-color-bg-info-subdued);
+    background: var(--p-color-bg-surface-info);
     padding: var(--p-space-200);
     padding-bottom: var(--p-space-100);
     border-radius: var(--p-border-radius-100);
@@ -114,7 +114,7 @@ $loading-panel-height: 53px;
   .TableHeading-first,
   .TableHeading-second {
     visibility: visible;
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
   }
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
@@ -124,7 +124,7 @@ $loading-panel-height: 53px;
       // 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);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
@@ -132,16 +132,16 @@ $loading-panel-height: 53px;
   .TableHeading-first,
   .TableHeading-second {
     visibility: visible;
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
     }
   }
 
   .TableCell-first,
   .TableHeading-first {
-    filter: drop-shadow(1px 0 0 var(--p-color-border-subdued));
+    filter: drop-shadow(1px 0 0 var(--p-color-border-secondary));
   }
 
   &.Table-sticky {
@@ -149,7 +149,7 @@ $loading-panel-height: 53px;
     .TableCell-first + .TableCell,
     .TableHeading-second {
       @media #{$p-breakpoints-sm-up} {
-        filter: drop-shadow(1px 0 0 var(--p-color-border-subdued));
+        filter: drop-shadow(1px 0 0 var(--p-color-border-secondary));
       }
     }
 
@@ -158,7 +158,7 @@ $loading-panel-height: 53px;
       // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       .TableHeading-second,
       .TableCell:first-child {
-        filter: drop-shadow(1px 0 0 var(--p-color-border-subdued));
+        filter: drop-shadow(1px 0 0 var(--p-color-border-secondary));
       }
     }
   }
@@ -173,9 +173,9 @@ $loading-panel-height: 53px;
 }
 
 .TableRow {
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   cursor: pointer;
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     &.TableRow-selected {
@@ -199,7 +199,7 @@ $loading-panel-height: 53px;
       background-color: var(--p-color-bg-primary-subdued-selected);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-success-subdued);
+        background-color: var(--p-color-bg-surface-success);
       }
     }
   }
@@ -209,10 +209,10 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-critical-subdued);
+        background-color: var(--p-color-bg-surface-critical);
       }
     }
   }
@@ -222,10 +222,10 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-warning-subdued-experimental);
+        background-color: var(--p-color-bg-surface-warning);
       }
     }
   }
@@ -235,10 +235,10 @@ $loading-panel-height: 53px;
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
 
       #{$se23} & {
-        color: var(--p-color-text-subdued);
+        color: var(--p-color-text-secondary);
       }
     }
   }
@@ -251,10 +251,10 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      color: var(--p-color-text-subdued);
+      color: var(--p-color-text-secondary);
       font-weight: var(--p-font-weight-medium);
       font-size: var(--p-font-size-75);
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
       border-top: var(--p-border-width-025) solid var(--p-color-border);
       border-bottom: var(--p-border-width-025) solid var(--p-color-border);
     }
@@ -266,7 +266,7 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
         border-color: var(--p-color-border);
       }
     }
@@ -288,10 +288,10 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
 
         #{$se23} & {
-          background-color: var(--p-color-bg-subdued);
+          background-color: var(--p-color-bg-surface-secondary);
         }
       }
     }
@@ -319,10 +319,10 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
 
         #{$se23} & {
-          background-color: var(--p-color-bg-subdued);
+          background-color: var(--p-color-bg-surface-secondary);
         }
       }
     }
@@ -346,7 +346,7 @@ $loading-panel-height: 53px;
         &,
         .TableCell-first,
         .TableCell-first + .TableCell {
-          background-color: var(--p-color-bg-critical-subdued-hover);
+          background-color: var(--p-color-bg-surface-critical-hover);
         }
       }
 
@@ -354,7 +354,7 @@ $loading-panel-height: 53px;
         &,
         .TableCell-first,
         .TableCell-first + .TableCell {
-          background-color: var(--p-color-bg-warning-subdued-experimental);
+          background-color: var(--p-color-bg-surface-warning);
         }
       }
 
@@ -362,7 +362,7 @@ $loading-panel-height: 53px;
         &,
         .TableCell-first,
         .TableCell-first + .TableCell {
-          background-color: var(--p-color-bg-subdued-hover);
+          background-color: var(--p-color-bg-surface-secondary-hover);
         }
       }
 
@@ -370,7 +370,7 @@ $loading-panel-height: 53px;
         &,
         .TableCell-first,
         .TableCell-first + .TableCell {
-          background-color: var(--p-color-bg-success-subdued-hover);
+          background-color: var(--p-color-bg-surface-success-hover);
         }
       }
 
@@ -378,7 +378,7 @@ $loading-panel-height: 53px;
         &,
         .TableCell-first,
         .TableCell-first + .TableCell {
-          background-color: var(--p-color-bg-subdued-hover);
+          background-color: var(--p-color-bg-surface-secondary-hover);
         }
       }
       // stylelint-enable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
@@ -408,22 +408,22 @@ $loading-panel-height: 53px;
       .TableCell-first,
       .TableCell-first + .TableCell,
       .TableCell:last-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
 }
 
 .TableRow-subdued {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   #{$se23} & {
-    background: var(--p-color-bg-subdued);
+    background: var(--p-color-bg-surface-secondary);
   }
 }
 
 .TableRow-disabled {
   cursor: default;
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 }
 
 // Extra specificity is needed to address edge cases where the zebra striping is combined with other options
@@ -437,7 +437,7 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      background-color: var(--p-color-bg);
+      background-color: var(--p-color-bg-surface);
     }
   }
 
@@ -449,7 +449,7 @@ $loading-panel-height: 53px;
     .TableCell-first,
     .TableCell-first + .TableCell,
     .TableCell:last-child {
-      background: var(--p-color-bg-subdued);
+      background: var(--p-color-bg-surface-secondary);
     }
   }
 
@@ -510,13 +510,13 @@ $loading-panel-height: 53px;
   // stylelint-disable -- Polaris component custom properties
   --pc-index-table-heading-padding-x: var(--p-space-400);
   --pc-index-table-heading-padding-y: var(--p-space-200);
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
   padding: var(--pc-index-table-heading-padding-y)
     var(--pc-index-table-heading-padding-x);
   // stylelint-enable
   text-align: left;
   font-weight: var(--p-font-weight-medium);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   font-size: var(--p-font-size-75);
   white-space: nowrap;
   border: 0;
@@ -556,7 +556,7 @@ $loading-panel-height: 53px;
 }
 
 .TableHeading-sortable {
-  background: var(--p-color-bg-subdued);
+  background: var(--p-color-bg-surface-secondary);
 }
 
 .TableHeading-flush {
@@ -606,7 +606,7 @@ $loading-panel-height: 53px;
   align-items: center;
   justify-content: center;
   font-weight: var(--p-font-weight-medium);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   font-size: var(--p-font-size-75);
   line-height: var(--p-font-line-height-500);
 
@@ -687,7 +687,8 @@ $loading-panel-height: 53px;
   bottom: calc(-1 * var(--p-border-width-050));
   width: 100%;
   height: var(--p-border-width-050);
-  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-050) dotted
+    var(--p-color-border-secondary);
 
   #{$se23} & {
     border-bottom: var(--p-border-width-050) dotted var(--p-color-border-strong);
@@ -822,7 +823,7 @@ $loading-panel-height: 53px;
   // stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
   &.Table-sticky .TableCell:first-child {
     left: 0;
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     z-index: var(--pc-index-table-sticky-cell);
     position: sticky;
@@ -838,23 +839,23 @@ $loading-panel-height: 53px;
   .statusCritical {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products
     .TableCell:first-child {
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
     }
   }
 
   .statusWarning {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- added crtical status for suspended products
     .TableCell:first-child {
-      background-color: var(--p-color-bg-warning-subdued-experimental);
+      background-color: var(--p-color-bg-surface-warning);
     }
   }
 
   .statusSubdued {
     // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     .TableCell:first-child {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
       #{$se23} & {
-        color: var(--p-color-text-subdued);
+        color: var(--p-color-text-secondary);
       }
     }
   }
@@ -874,7 +875,7 @@ $loading-panel-height: 53px;
     .TableRow-subdued:not(.TableRow-hovered) {
       // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 override
       .TableCell:first-child {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
@@ -891,7 +892,7 @@ $loading-panel-height: 53px;
   .TableCell:last-child,
   .TableHeading-last {
     @media #{$p-breakpoints-sm-up} {
-      filter: drop-shadow(-1px 0 0 var(--p-color-border-subdued));
+      filter: drop-shadow(-1px 0 0 var(--p-color-border-secondary));
 
       #{$se23} & {
         filter: drop-shadow(-1px 0 0 var(--p-color-border));
@@ -905,7 +906,7 @@ $loading-panel-height: 53px;
     @media #{$p-breakpoints-sm-up} {
       position: sticky;
       right: 0;
-      background-color: var(--p-color-bg);
+      background-color: var(--p-color-bg-surface);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       z-index: var(--pc-index-table-sticky-cell);
     }
@@ -915,12 +916,12 @@ $loading-panel-height: 53px;
     @media #{$p-breakpoints-sm-up} {
       position: sticky;
       right: 0;
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       z-index: auto;
 
       #{$se23} & {
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
       }
     }
   }
@@ -931,7 +932,7 @@ $loading-panel-height: 53px;
       background-color: var(--p-color-bg-primary-subdued-selected);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-success-subdued);
+        background-color: var(--p-color-bg-surface-success);
       }
     }
   }
@@ -941,7 +942,7 @@ $loading-panel-height: 53px;
       background-color: var(--p-color-bg-primary-subdued-selected);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-critical-subdued);
+        background-color: var(--p-color-bg-surface-critical);
       }
     }
   }
@@ -951,17 +952,17 @@ $loading-panel-height: 53px;
       background-color: var(--p-color-bg-primary-subdued-selected);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-warning-subdued-experimental);
+        background-color: var(--p-color-bg-surface-warning);
       }
     }
   }
 
   .statusSubdued {
     .TableCell:last-child {
-      background-color: var(--p-color-bg-subdued);
+      background-color: var(--p-color-bg-surface-secondary);
 
       #{$se23} & {
-        color: var(--p-color-text-subdued);
+        color: var(--p-color-text-secondary);
       }
     }
   }
@@ -984,7 +985,7 @@ $loading-panel-height: 53px;
 
   #{$se23} & {
     .TableRow-selected.TableRow-subdued {
-      color: var(--p-color-text-subdued);
+      color: var(--p-color-text-secondary);
     }
 
     .TableRow-hovered {
@@ -1011,7 +1012,7 @@ $loading-panel-height: 53px;
 
 .Table-sortable {
   .TableHeading {
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
   }
 }
 
@@ -1078,7 +1079,7 @@ $loading-panel-height: 53px;
 
 .StickyTableHeader-isSticky {
   visibility: visible;
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
   box-shadow: var(--p-shadow-md);
 
   #{$se23} & {
@@ -1129,7 +1130,7 @@ $loading-panel-height: 53px;
   left: 0;
   right: 0;
   padding: 0 var(--p-space-200) 0 var(--p-space-400);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
 
   // TODO: Remove this; condensed doesn't have bulk actions / select all
   &.StickyTableHeader-condensed {
@@ -1156,7 +1157,7 @@ $scroll-bar-size: var(--p-space-200);
   z-index: var(--pc-index-table-scroll-bar);
   bottom: 0;
   padding: var(--p-space-050);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-bottom-right-radius: var(--p-border-radius-200);
   border-bottom-left-radius: var(--p-border-radius-200);
 
@@ -1239,7 +1240,7 @@ $scroll-bar-size: var(--p-space-200);
   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-025) solid var(--p-color-border-secondary);
   filter: none;
   align-items: center;
 }
@@ -1268,7 +1269,7 @@ $scroll-bar-size: var(--p-space-200);
   width: 100%;
   min-height: 56px;
   padding: var(--p-space-200) var(--p-space-400);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
 
   &.unselectable {
     min-height: auto;
diff --git a/polaris-react/src/components/InlineCode/InlineCode.scss b/polaris-react/src/components/InlineCode/InlineCode.scss
index a530f5c74ac..94bc7341c23 100644
--- a/polaris-react/src/components/InlineCode/InlineCode.scss
+++ b/polaris-react/src/components/InlineCode/InlineCode.scss
@@ -1,5 +1,5 @@
 .Code {
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   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
diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
index a0c31c98a96..c294756c74c 100644
--- a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
+++ b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -8,7 +8,7 @@ $key-base-dimension: 28px;
   justify-content: center;
   margin: 0 var(--p-space-050) var(--p-space-050);
   padding: 0 var(--p-space-200);
-  background: var(--p-color-bg-inset);
+  background: var(--p-color-bg-fill-secondary);
   // 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);
@@ -22,16 +22,16 @@ $key-base-dimension: 28px;
   user-select: none;
 
   #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
+    background: var(--p-color-bg-surface-tertiary);
     border-radius: var(--p-border-radius-100);
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
     box-shadow: none;
     margin-bottom: 0;
   }
 }
 
 .small {
-  background: var(--p-color-bg-app-selected);
+  background: var(--p-color-bg-surface-selected);
   border-radius: var(--p-border-radius-050);
   box-shadow: none;
   line-height: unset;
diff --git a/polaris-react/src/components/Labelled/Labelled.scss b/polaris-react/src/components/Labelled/Labelled.scss
index 47d95b77d5c..31781b6880a 100644
--- a/polaris-react/src/components/Labelled/Labelled.scss
+++ b/polaris-react/src/components/Labelled/Labelled.scss
@@ -20,7 +20,7 @@
 
 .readOnly > .LabelWrapper {
   #{$se23} & {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
index 6ae5f2ab723..a10e77f9eff 100644
--- a/polaris-react/src/components/Layout/Layout.scss
+++ b/polaris-react/src/components/Layout/Layout.scss
@@ -77,13 +77,15 @@ $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-025) solid
+        var(--p-color-border-secondary);
       padding-top: var(--p-space-400);
     }
 
     @media #{$p-breakpoints-sm-up} {
       padding-top: var(--p-space-400);
-      border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+      border-top: var(--p-border-width-025) solid
+        var(--p-color-border-secondary);
     }
   }
 }
diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
index 1e4b98998a0..8923e56abdd 100644
--- a/polaris-react/src/components/LegacyCard/LegacyCard.scss
+++ b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 .LegacyCard {
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-md);
   outline: var(--p-border-width-025) solid transparent;
   overflow: clip;
@@ -77,7 +77,7 @@
 }
 
 .subdued {
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
 }
 
 .Section-hideOnPrint,
@@ -120,7 +120,7 @@
   }
 
   + .Section {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
     @media print {
       border-top: 0;
@@ -162,7 +162,7 @@
 }
 
 .Section-subdued {
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
 
   #{$se23} & {
     padding: var(--p-space-300) var(--p-space-400);
@@ -173,7 +173,7 @@
   }
 
   .Header + & {
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
     margin-top: var(--p-space-500);
 
     #{$se23} & {
@@ -217,7 +217,7 @@
   + .Subsection {
     margin-top: var(--p-space-400);
     padding-top: var(--p-space-400);
-    border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+    border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
     @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-025) solid var(--p-color-border-secondary);
     padding: var(--p-space-500);
 
     #{$se23} & {
diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.scss b/polaris-react/src/components/LegacyFilters/LegacyFilters.scss
index 7de996dcae3..5f4913944bc 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-400) var(--p-space-500);
-  border-bottom: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-025) solid var(--p-color-border-secondary);
   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-400) var(--p-space-500);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
   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-025) solid var(--p-color-border-secondary);
   padding-top: var(--p-space-400);
   width: 100%;
   display: flex;
@@ -133,11 +133,11 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
     display: block;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
+      background-color: var(--p-color-bg-surface-tertiary);
     }
   }
 
@@ -158,11 +158,11 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
     display: block;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
+      background-color: var(--p-color-bg-surface-tertiary);
     }
   }
 
@@ -185,11 +185,11 @@ $list-filters-footer-height: 70px;
     left: var(--p-space-400);
     width: calc(100% - var(--p-space-800));
     height: var(--p-space-025);
-    background-color: var(--p-color-bg-subdued);
+    background-color: var(--p-color-bg-surface-secondary);
     display: block;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-secondary-experimental);
+      background-color: var(--p-color-bg-surface-tertiary);
     }
   }
 
diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
index e014f0626dc..9262d8816bb 100644
--- a/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
+++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.scss
@@ -63,11 +63,11 @@ $item-vertical-padding: $item-min-height * 0.5;
       background-color: transparent;
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &::before {
-        background-color: var(--p-color-bg-strong-hover);
+        background-color: var(--p-color-bg-fill-tertiary-hover);
       }
 
       #{$se23} & {
-        color: var(--p-color-text-primary);
+        color: var(--p-color-text-brand);
         font-weight: var(--p-font-weight-semibold);
       }
     }
@@ -78,7 +78,7 @@ $item-vertical-padding: $item-min-height * 0.5;
       background-color: transparent;
       // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
       &::before {
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
       }
     }
   }
@@ -89,7 +89,7 @@ $item-vertical-padding: $item-min-height * 0.5;
       color: var(--p-color-text);
 
       #{$se23} & {
-        color: var(--p-color-text-primary);
+        color: var(--p-color-text-brand);
         font-weight: var(--p-font-weight-semibold);
       }
     }
@@ -129,12 +129,12 @@ $item-vertical-padding: $item-min-height * 0.5;
     }
 
     #{$se23} & {
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
   }
 
   #{$se23} & {
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     font-weight: var(--p-font-weight-semibold);
   }
 }
@@ -146,7 +146,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   display: block;
   padding: var(--p-space-200) var(--p-space-400);
   min-width: $item-min-width;
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 
   &::before {
     content: '';
@@ -160,7 +160,7 @@ $item-vertical-padding: $item-min-height * 0.5;
   }
 
   #{$se23} & {
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     font-weight: var(--p-font-weight-semibold);
     padding: var(--p-space-150) var(--p-space-300);
   }
diff --git a/polaris-react/src/components/Link/Link.scss b/polaris-react/src/components/Link/Link.scss
index 90d38fab36e..1d3cc5374aa 100644
--- a/polaris-react/src/components/Link/Link.scss
+++ b/polaris-react/src/components/Link/Link.scss
@@ -9,12 +9,12 @@
   border: 0;
   font-size: inherit;
   font-weight: inherit;
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
   text-decoration: underline;
   cursor: pointer;
 
   &:hover {
-    color: var(--p-color-text-interactive-hover);
+    color: var(--p-color-text-emphasis-hover);
     text-decoration: none;
 
     #{$se23} & {
@@ -23,21 +23,19 @@
   }
 
   &:focus:not(:active) {
-    outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-025);
+    outline: var(--p-color-border-focus) auto var(--p-border-width-025);
   }
 
   #{$se23} &:focus,
   #{$se23} &:focus-visible {
-    outline: var(--p-color-border-interactive-focus) auto
-      var(--p-border-width-050);
+    outline: var(--p-color-border-focus) auto var(--p-border-width-050);
     outline-offset: var(--p-space-050);
     border-radius: var(--p-border-radius-150);
   }
 
   &:active {
     position: relative;
-    color: var(--p-color-text-interactive-active);
+    color: var(--p-color-text-emphasis-active);
 
     &::before {
       content: '';
diff --git a/polaris-react/src/components/Listbox/Listbox.stories.tsx b/polaris-react/src/components/Listbox/Listbox.stories.tsx
index ccabf02f99d..55a15262ff5 100644
--- a/polaris-react/src/components/Listbox/Listbox.stories.tsx
+++ b/polaris-react/src/components/Listbox/Listbox.stories.tsx
@@ -390,8 +390,8 @@ export function WithSearch() {
       <span
         style={{
           color: polarisSummerEditions2023
-            ? 'var(--p-color-text-subdued)'
-            : 'var(--p-color-text-interactive)',
+            ? 'var(--p-color-text-secondary)'
+            : 'var(--p-color-text-emphasis)',
         }}
       >
         Show all 111 segments
diff --git a/polaris-react/src/components/Listbox/components/Option/Option.scss b/polaris-react/src/components/Listbox/components/Option/Option.scss
index 1c99da8196f..4c15934e54a 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-025) solid var(--p-color-border-secondary);
 }
diff --git a/polaris-react/src/components/Listbox/components/Section/Section.scss b/polaris-react/src/components/Listbox/components/Section/Section.scss
index 506592a8974..4ba6c953530 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-025) solid var(--p-color-border-secondary);
 }
 
 .noDivider {
diff --git a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
index d49888715bb..1466dae53d2 100644
--- a/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
+++ b/polaris-react/src/components/Listbox/components/TextOption/TextOption.scss
@@ -38,7 +38,7 @@
 
     #{$se23} & {
       &:not(.disabled) {
-        background-color: var(--p-color-bg-subdued-hover);
+        background-color: var(--p-color-bg-surface-secondary-hover);
       }
     }
   }
@@ -52,7 +52,7 @@
 
     #{$se23} & {
       &:not(.disabled) {
-        background-color: var(--p-color-bg-subdued-active);
+        background-color: var(--p-color-bg-surface-secondary-active);
       }
     }
   }
@@ -61,7 +61,7 @@
     background-color: var(--p-color-bg-interactive-selected);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-active);
+      background-color: var(--p-color-bg-surface-secondary-active);
       font-weight: var(--p-font-weight-semibold);
     }
   }
@@ -98,7 +98,7 @@ li:first-of-type > .TextOption {
   transition: background-color var(--p-motion-duration-400);
 
   #{$se23} & {
-    background-color: var(--p-color-bg-subdued-active);
+    background-color: var(--p-color-bg-surface-secondary-active);
   }
 }
 
diff --git a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
index a3b11a1603f..b300d10eca4 100644
--- a/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
+++ b/polaris-react/src/components/Modal/components/Dialog/Dialog.scss
@@ -40,7 +40,7 @@ $large-width: 980px;
   flex-direction: column;
   width: 100%;
   max-height: calc(100vh - #{$vertical-spacing});
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-2xl);
 
   @media (forced-colors: active) {
diff --git a/polaris-react/src/components/Modal/components/Section/Section.scss b/polaris-react/src/components/Modal/components/Section/Section.scss
index f3b27da6b02..5785c611aa6 100644
--- a/polaris-react/src/components/Modal/components/Section/Section.scss
+++ b/polaris-react/src/components/Modal/components/Section/Section.scss
@@ -6,7 +6,8 @@ $close-button-width: calc(var(--p-space-1200) + var(--p-space-100));
   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-025) solid
+      var(--p-color-border-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index 4e4e88e2f71..9800edbfd36 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -18,12 +18,12 @@ $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-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties
     --pc-navigation-letter-spacing-medium: -0.005rem;
-    background-color: var(--p-color-bg-subdued-active);
+    background-color: var(--p-color-bg-surface-secondary-active);
     border-right: 0;
   }
 
@@ -84,7 +84,7 @@ $nav-max-width: 360px;
     align-items: center;
     height: $top-bar-height;
     padding: 0 var(--p-space-200) 0 var(--p-space-400);
-    background-color: var(--p-color-bg);
+    background-color: var(--p-color-bg-surface);
     box-shadow: var(--p-shadow-sm);
     margin-bottom: var(--p-space-400);
 
@@ -159,7 +159,7 @@ $nav-max-width: 360px;
     padding: 0 var(--p-space-300);
 
     --secondary-actions-on-hover-background-color: var(
-      --p-color-bg-subdued-hover
+      --p-color-bg-surface-secondary-hover
     );
   }
 }
@@ -179,7 +179,7 @@ $nav-max-width: 360px;
       var(--p-motion-ease-out);
 
     &:is(:hover, :focus-visible) {
-      background: var(--p-color-bg-subdued-hover);
+      background: var(--p-color-bg-surface-secondary-hover);
     }
 
     // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators -- se23
@@ -194,7 +194,7 @@ $nav-max-width: 360px;
               background: linear-gradient(
                 to right,
                 rgba(0, 0, 0, 0),
-                var(--p-color-bg-subdued-hover) var(--p-space-800)
+                var(--p-color-bg-surface-secondary-hover) var(--p-space-800)
               );
             }
           }
@@ -202,7 +202,7 @@ $nav-max-width: 360px;
 
         &:is(:active) {
           .SecondaryActions {
-            background: var(--p-color-bg-app-selected);
+            background: var(--p-color-bg-surface-selected);
           }
         }
       }
@@ -210,7 +210,7 @@ $nav-max-width: 360px;
     }
 
     &:active {
-      background-color: var(--p-color-bg-app-selected);
+      background-color: var(--p-color-bg-surface-selected);
 
       // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators -- se23
       &.ItemInnerWrapper-display-actions-on-hover {
@@ -221,7 +221,7 @@ $nav-max-width: 360px;
               background: linear-gradient(
                 to right,
                 rgba(0, 0, 0, 0),
-                var(--p-color-bg-app-selected) var(--p-space-800)
+                var(--p-color-bg-surface-selected) var(--p-space-800)
               );
             }
           }
@@ -233,7 +233,7 @@ $nav-max-width: 360px;
 }
 
 .ItemInnerWrapper-selected {
-  background-color: var(--p-color-bg-app-selected);
+  background-color: var(--p-color-bg-surface-selected);
 
   #{$se23} & {
     // stylelint-disable-next-line selector-max-combinators -- Needed for precision on text
@@ -244,20 +244,20 @@ $nav-max-width: 360px;
     }
 
     &:is(:hover, :focus-visible, :focus-within) {
-      background: var(--p-color-bg-app-selected);
+      background: var(--p-color-bg-surface-selected);
 
       // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators -- se23
       &.ItemInnerWrapper-display-actions-on-hover {
         @media #{$p-breakpoints-md-up} {
           .SecondaryActions {
-            background: var(--p-color-bg-app-selected);
+            background: var(--p-color-bg-surface-selected);
 
             &::before {
               // stylelint-disable-next-line -- required for fade effect
               background: linear-gradient(
                 to right,
                 rgba(0, 0, 0, 0),
-                var(--p-color-bg-app-selected) var(--p-space-800)
+                var(--p-color-bg-surface-selected) var(--p-space-800)
               );
             }
           }
@@ -267,15 +267,15 @@ $nav-max-width: 360px;
     }
 
     &:active {
-      background: var(--p-color-bg-app-selected);
+      background: var(--p-color-bg-surface-selected);
     }
   }
 
   .SecondaryActions {
-    background: var(--p-color-bg-app-selected);
+    background: var(--p-color-bg-surface-selected);
 
     #{$se23} & {
-      background: var(--p-color-bg-app-selected);
+      background: var(--p-color-bg-surface-selected);
       border-top-right-radius: var(--p-border-radius-200);
       border-bottom-right-radius: var(--p-border-radius-200);
     }
@@ -285,7 +285,7 @@ $nav-max-width: 360px;
       background: linear-gradient(
         to right,
         rgba(0, 0, 0, 0),
-        var(--p-color-bg-app-selected) var(--p-space-800)
+        var(--p-color-bg-surface-selected) var(--p-space-800)
       );
 
       #{$se23} & {
@@ -293,7 +293,7 @@ $nav-max-width: 360px;
         background: linear-gradient(
           to right,
           rgba(0, 0, 0, 0),
-          var(--p-color-bg-app-selected) var(--p-space-800)
+          var(--p-color-bg-surface-selected) var(--p-space-800)
         );
       }
     }
@@ -305,7 +305,7 @@ $nav-max-width: 360px;
     background-color: transparent;
 
     &:active {
-      background: var(--p-color-bg-app-selected);
+      background: var(--p-color-bg-surface-selected);
     }
 
     // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators -- se23
@@ -332,7 +332,7 @@ $nav-max-width: 360px;
 
 .Item-selected {
   font-weight: var(--p-font-weight-semibold);
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
   outline: var(--p-border-width-025) solid transparent;
 
   &::before {
@@ -366,7 +366,7 @@ $nav-max-width: 360px;
   &:hover,
   &:focus-visible {
     background-color: var(--p-color-bg-app-hover);
-    color: var(--p-color-text-primary-hover);
+    color: var(--p-color-text-brand-hover);
   }
 
   :focus-visible {
@@ -378,7 +378,7 @@ $nav-max-width: 360px;
   &:active:hover {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include no-focus-ring;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     background-color: var(--p-color-bg-app-active);
   }
 
@@ -572,7 +572,7 @@ $nav-max-width: 360px;
 
       #{$se23} & {
         z-index: var(--p-z-index-2);
-        background: var(--p-color-bg-subdued-hover);
+        background: var(--p-color-bg-surface-secondary-hover);
         padding: 0 var(--p-space-050);
         margin-right: 0;
         border-top-right-radius: var(--p-border-radius-200);
@@ -600,7 +600,7 @@ $nav-max-width: 360px;
           background: linear-gradient(
             to right,
             rgba(0, 0, 0, 0),
-            var(--p-color-bg-subdued-hover) var(--p-space-800)
+            var(--p-color-bg-surface-secondary-hover) var(--p-space-800)
           );
         }
       }
@@ -618,7 +618,7 @@ $nav-max-width: 360px;
       #{$se23} & {
         // stylelint-disable-next-line -- se23
         .SecondaryActions {
-          background-color: var(--p-color-bg-app-selected);
+          background-color: var(--p-color-bg-surface-selected);
         }
       }
     }
@@ -642,8 +642,7 @@ $nav-max-width: 360px;
     &: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
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     }
   }
 
@@ -669,7 +668,7 @@ $nav-max-width: 360px;
     }
 
     #{$se23} & {
-      background-color: var(--p-color-bg-transparent-hover-experimental);
+      background-color: var(--p-color-bg-fill-transparent-hover);
     }
 
     @media (-ms-high-contrast: active) {
@@ -721,7 +720,7 @@ $nav-max-width: 360px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     font-size: 15px;
     line-height: nav(item-line-height);
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
     padding-left: calc(var(--p-space-800) + var(--p-space-300));
 
     #{$se23} & {
@@ -731,8 +730,8 @@ $nav-max-width: 360px;
 
       // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
       &:is(:hover, :focus-visible, :focus-within) {
-        background: var(--p-color-bg-subdued-active);
-        color: var(--p-color-text-primary);
+        background: var(--p-color-bg-surface-secondary-active);
+        color: var(--p-color-text-brand);
       }
 
       // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
@@ -752,11 +751,11 @@ $nav-max-width: 360px;
     }
 
     &:hover {
-      color: var(--p-color-text-subdued);
+      color: var(--p-color-text-secondary);
 
       #{$se23} & {
         color: var(--p-color-text);
-        background: var(--p-color-bg-subdued-hover);
+        background: var(--p-color-bg-surface-secondary-hover);
 
         // stylelint-disable-next-line selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- Needed for precision styling on text
         .Text {
@@ -780,12 +779,12 @@ $nav-max-width: 360px;
       @include no-focus-ring;
 
       #{$se23} & {
-        background-color: var(--p-color-bg-app-selected);
+        background-color: var(--p-color-bg-surface-selected);
       }
     }
 
     &:active {
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     @media #{$p-breakpoints-md-up} {
@@ -808,7 +807,7 @@ $nav-max-width: 360px;
   }
 
   .Item-selected {
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring;
 
@@ -824,8 +823,8 @@ $nav-max-width: 360px;
 
       // stylelint-disable-next-line selector-max-combinators -- will no longer be an issue after removing se23
       &:is(:hover, :focus-visible, :focus-within) {
-        background: var(--p-color-bg-app-selected);
-        color: var(--p-color-text-primary);
+        background: var(--p-color-bg-surface-selected);
+        color: var(--p-color-text-brand);
       }
 
       // stylelint-disable-next-line selector-max-combinators -- se23
@@ -833,21 +832,21 @@ $nav-max-width: 360px;
       &:active:hover {
         // stylelint-disable-next-line -- se23
         @include no-focus-ring;
-        background: var(--p-color-bg-app-selected);
-        color: var(--p-color-text-primary);
+        background: var(--p-color-bg-surface-selected);
+        color: var(--p-color-text-brand);
       }
     }
 
     &:hover {
-      color: var(--p-color-text-primary-hover);
+      color: var(--p-color-text-brand-hover);
     }
 
     &:focus-visible {
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     &:active {
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
       @include no-focus-ring;
     }
@@ -958,7 +957,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-025) solid var(--p-color-border-secondary);
 }
 
 .SectionHeading {
@@ -1010,8 +1009,7 @@ $nav-max-width: 360px;
       &: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
-          var(--p-color-border-interactive-focus);
+        outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       }
     }
 
@@ -1040,7 +1038,7 @@ $nav-max-width: 360px;
       background: var(--p-color-bg-app-hover);
 
       #{$se23} & {
-        background: var(--p-color-bg-transparent-hover-experimental);
+        background: var(--p-color-bg-fill-transparent-hover);
       }
 
       // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -1058,7 +1056,7 @@ $nav-max-width: 360px;
           filter: var(--p-filter-icon-on-interactive);
 
           #{$se23} & {
-            filter: var(--p-color-icon-primary);
+            filter: var(--p-color-icon-brand);
           }
         }
         // stylelint-enable
@@ -1104,13 +1102,13 @@ $nav-max-width: 360px;
 .RollupToggle {
   font-weight: var(--p-font-weight-regular);
   color: var(--p-color-text);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 
   &:hover {
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
 
     svg {
-      fill: var(--p-color-icon-primary);
+      fill: var(--p-color-icon-brand);
     }
 
     img {
@@ -1118,7 +1116,7 @@ $nav-max-width: 360px;
       filter: var(--p-filter-icon-action-primary);
 
       #{$se23} & {
-        filter: var(--p-color-icon-primary);
+        filter: var(--p-color-icon-brand);
       }
     }
   }
diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
index fd6f0a4600e..4da48016453 100644
--- a/polaris-react/src/components/Navigation/_variables.scss
+++ b/polaris-react/src/components/Navigation/_variables.scss
@@ -61,8 +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
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     }
   }
 
@@ -123,7 +122,7 @@ $nav-animation-variables: (
 
   #{$se23} & {
     // stylelint-disable -- se23
-    // This should match the value for --p-color-icon-primary i.e. #1a1a1a
+    // This should match the value for --p-color-icon-brand i.e. #1a1a1a
     --pc-navigation-filter-icon-action-primary: invert(10%) sepia(11%)
       saturate(0%) hue-rotate(159deg) brightness(105%) contrast(102%);
     // stylelint-enable
@@ -176,7 +175,7 @@ $nav-animation-variables: (
   .Item-selected:focus-visible & {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     svg {
-      fill: var(--p-color-icon-primary);
+      fill: var(--p-color-icon-brand);
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -241,6 +240,6 @@ $nav-animation-variables: (
     display: block;
     width: 100%;
     height: 1px;
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
   }
 }
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
index 1c25d9e035f..daafb3f1622 100644
--- a/polaris-react/src/components/OptionList/components/Option/Option.scss
+++ b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -44,10 +44,9 @@ $control-vertical-adjustment: 2px;
     #{$se23} & {
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
-      background-color: var(--p-color-bg-subdued-hover);
+      background-color: var(--p-color-bg-surface-secondary-hover);
     }
   }
 
@@ -55,7 +54,7 @@ $control-vertical-adjustment: 2px;
     background: var(--p-color-bg-interactive-selected);
 
     #{$se23} & {
-      background: var(--p-color-bg-subdued-active);
+      background: var(--p-color-bg-surface-secondary-active);
     }
   }
 
@@ -107,7 +106,7 @@ $control-vertical-adjustment: 2px;
     outline: var(--p-border-width-025) solid transparent;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
+      background-color: var(--p-color-bg-surface-secondary-hover);
     }
   }
 
@@ -116,12 +115,12 @@ $control-vertical-adjustment: 2px;
     padding: var(--p-space-150);
 
     &:active:not(.disabled) {
-      background-color: var(--p-color-bg-strong-active);
+      background-color: var(--p-color-bg-fill-tertiary-active);
     }
 
     &.select,
     &.select:hover:not(.disabled) {
-      background-color: var(--p-color-bg-subdued-active);
+      background-color: var(--p-color-bg-surface-secondary-active);
 
       // stylelint-disable-next-line -- se23 no way to select parent Checkbox class without :has()
       &.CheckboxLabel {
@@ -203,7 +202,7 @@ $control-vertical-adjustment: 2px;
 
     // stylelint-disable-next-line -- se23
     svg {
-      fill: var(--p-color-icon-primary);
+      fill: var(--p-color-icon-brand);
     }
   }
 }
diff --git a/polaris-react/src/components/Page/Page.scss b/polaris-react/src/components/Page/Page.scss
index 75a2e988ee5..252cae1863b 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-025) solid var(--p-color-border-secondary);
   padding-top: var(--p-space-800);
 
   #{$se23} & {
diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss
index 07cea2467fd..a0865d5b5bd 100644
--- a/polaris-react/src/components/Page/components/Header/Header.scss
+++ b/polaris-react/src/components/Page/components/Header/Header.scss
@@ -32,12 +32,12 @@ $action-menu-rollup-computed-width: 40px;
 
       /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
       &:is(:hover, :focus-visible) {
-        background-color: var(--p-color-bg-strong-hover);
+        background-color: var(--p-color-bg-fill-tertiary-hover);
       }
 
       /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */
       &:active {
-        background-color: var(--p-color-bg-strong-active);
+        background-color: var(--p-color-bg-fill-tertiary-active);
         /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */
         box-shadow: var(--p-shadow-inset-md) !important;
       }
diff --git a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
index 3bc31cef3f4..05f6ed7570b 100644
--- a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
+++ b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
@@ -22,7 +22,7 @@
 
 .SubTitle {
   margin-top: var(--p-space-100);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 
   &.SubtitleCompact {
     margin-top: 0;
diff --git a/polaris-react/src/components/PageActions/PageActions.scss b/polaris-react/src/components/PageActions/PageActions.scss
index e6a97dc773b..9b20515531c 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-500);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     border-top: 0;
diff --git a/polaris-react/src/components/Pagination/Pagination.scss b/polaris-react/src/components/Pagination/Pagination.scss
index 0fc55816ed9..a479e1609f9 100644
--- a/polaris-react/src/components/Pagination/Pagination.scss
+++ b/polaris-react/src/components/Pagination/Pagination.scss
@@ -7,10 +7,10 @@
       border: none !important;
       box-shadow: none !important;
       /* stylelint-enable */
-      background-color: var(--p-color-bg-strong);
+      background-color: var(--p-color-bg-fill-tertiary);
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:hover {
-        background-color: var(--p-color-bg-strong-hover);
+        background-color: var(--p-color-bg-fill-tertiary-hover);
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:active {
@@ -20,7 +20,7 @@
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
       &:active,
       &:focus {
-        background-color: var(--p-color-bg-strong-active);
+        background-color: var(--p-color-bg-fill-tertiary-active);
       }
     }
   }
@@ -29,7 +29,7 @@
     button {
       #{$se23} & {
         --button-min-height: var(--p-space-600);
-        background-color: var(--p-color-bg-subdued);
+        background-color: var(--p-color-bg-surface-secondary);
         min-height: var(--button-min-height);
         min-width: var(--button-min-height);
         height: var(--button-min-height);
@@ -38,7 +38,7 @@
 
         /* 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);
+          background-color: var(--p-color-bg-fill-tertiary-hover);
 
           svg {
             fill: var(--p-color-icon-hover);
@@ -47,7 +47,7 @@
 
         &:active,
         &:focus {
-          background-color: var(--p-color-bg-strong-active);
+          background-color: var(--p-color-bg-fill-tertiary-active);
 
           svg {
             fill: var(--p-color-icon-active);
diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
index 32685863d69..ebb6018a38c 100644
--- a/polaris-react/src/components/Popover/Popover.scss
+++ b/polaris-react/src/components/Popover/Popover.scss
@@ -63,7 +63,7 @@ $vertical-motion-offset: -5px;
 .ContentContainer {
   position: relative;
   overflow: hidden;
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   border-radius: var(--p-space-200);
 
   /* Prevent Scrollable's box shadows overflowing the rounded corners of this
@@ -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-025) solid var(--p-color-border-secondary);
 
     #{$se23} & {
       border-top: none;
@@ -121,7 +121,7 @@ $vertical-motion-offset: -5px;
 }
 
 .Pane-subdued {
-  background-color: var(--p-color-bg-subdued);
+  background-color: var(--p-color-bg-surface-secondary);
 }
 
 .Pane-captureOverscroll {
@@ -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-025) solid var(--p-color-border-secondary);
   }
 }
 
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 8a9e34b88db..56c1e641af4 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -682,8 +682,8 @@ export function WithSearchableListbox() {
       <span
         style={{
           color: polarisSummerEditions2023
-            ? 'var(--p-color-text-subdued)'
-            : 'var(--p-color-text-interactive)',
+            ? 'var(--p-color-text-secondary)'
+            : 'var(--p-color-text-emphasis)',
         }}
       >
         Show all 111 segments
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 5f4d68eddf7..f7a43fbd58d 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -39,44 +39,44 @@
 
 .colorHighlight {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
   --pc-progress-bar-indicator: var(--p-color-border-info);
   // stylelint-enable
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-progress-bar-indicator: var(--p-color-bg-info-strong);
+    --pc-progress-bar-indicator: var(--p-color-bg-fill-info);
   }
 }
 
 .colorPrimary {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
   --pc-progress-bar-indicator: var(--p-color-bg-primary);
   // stylelint-enable
 }
 
 .colorSuccess {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
   --pc-progress-bar-indicator: var(--p-color-border-success);
   // stylelint-enable
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-progress-bar-indicator: var(--p-color-bg-success-strong);
+    --pc-progress-bar-indicator: var(--p-color-bg-fill-success);
   }
 }
 
 .colorCritical {
   // stylelint-disable -- Polaris component custom properties
-  --pc-progress-bar-background: var(--p-color-bg-strong);
-  --pc-progress-bar-indicator: var(--p-color-bg-critical);
+  --pc-progress-bar-background: var(--p-color-bg-fill-tertiary);
+  --pc-progress-bar-indicator: var(--p-color-bg-fill-critical-secondary);
   // stylelint-enable
 
   #{$se23} & {
     // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-progress-bar-indicator: var(--p-color-bg-critical-strong);
+    --pc-progress-bar-indicator: var(--p-color-bg-fill-critical);
   }
 }
 
diff --git a/polaris-react/src/components/RadioButton/RadioButton.scss b/polaris-react/src/components/RadioButton/RadioButton.scss
index 7b2acb228ca..fb0f7f340d5 100644
--- a/polaris-react/src/components/RadioButton/RadioButton.scss
+++ b/polaris-react/src/components/RadioButton/RadioButton.scss
@@ -17,8 +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
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
 
@@ -56,7 +55,7 @@
     .ChoiceLabel:hover & {
       #{$se23} & {
         background-color: var(--p-color-bg-primary);
-        border-color: var(--p-color-border-input-active-experimental);
+        border-color: var(--p-color-input-border-active);
       }
     }
   }
@@ -64,9 +63,9 @@
   + .Backdrop {
     .ChoiceLabel:hover & {
       cursor: pointer;
-      border-color: var(--p-color-border-input-hover);
+      border-color: var(--p-color-input-border-hover);
       #{$se23} & {
-        background: var(--p-color-bg-input-hover-experimental);
+        background: var(--p-color-input-bg-surface-hover);
       }
     }
 
@@ -113,7 +112,7 @@
 .Backdrop {
   #{$se23} & {
     border-width: var(--p-border-width-0165);
-    background-color: var(--p-color-bg-input);
+    background-color: var(--p-color-input-bg-surface);
     transition: border-color var(--p-motion-duration-100)
       var(--p-motion-ease-out);
 
@@ -137,9 +136,9 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-050) solid var(--p-color-border-input);
+  border: var(--p-border-width-050) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-full);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   transition: border-color var(--p-motion-duration-100) var(--p-motion-ease);
 
   &::before {
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index 761a06b91fc..54c5fc9d379 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -54,7 +54,7 @@ $range-wrapper: 28px;
 
   .error & {
     // stylelint-disable -- Polaris component custom properties
-    --pc-dual-thumb-selected-range: var(--p-color-bg-critical-strong);
+    --pc-dual-thumb-selected-range: var(--p-color-bg-fill-critical);
     --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
       var(--pc-dual-thumb-unselected-range)
         var(--pc-range-slider-progress-lower),
@@ -121,10 +121,10 @@ $range-wrapper: 28px;
   }
 
   .error & {
-    border-color: var(--p-color-bg-critical-strong);
+    border-color: var(--p-color-bg-fill-critical);
     background: linear-gradient(
-      var(--p-color-bg-critical-strong),
-      var(--p-color-bg-critical-strong)
+      var(--p-color-bg-fill-critical),
+      var(--p-color-bg-fill-critical)
     );
   }
 }
@@ -171,7 +171,7 @@ $range-output-size: 32px;
   padding: 0 var(--p-space-200);
   min-width: $range-output-size;
   height: $range-output-size;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-xl);
   border-radius: var(--p-border-radius-100);
   transition-property: transform;
diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index 333977600a7..35ffb79317d 100644
--- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -158,7 +158,7 @@
       var(--p-color-bg-interactive),
       var(--p-color-bg-interactive)
     );
-    box-shadow: 0 0 0 0 var(--p-color-border-interactive-focus);
+    box-shadow: 0 0 0 0 var(--p-color-border-focus);
     appearance: none;
     transition-property: border-color, transform;
     transition-duration: var(--p-motion-duration-200);
@@ -203,20 +203,19 @@
     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-050)
-        var(--p-color-border-interactive-focus);
+      border-color: var(--p-color-bg-surface);
+      box-shadow: 0 0 0 var(--p-border-width-050) var(--p-color-border-focus);
     }
   }
 
   .error & {
     // stylelint-disable-next-line -- Polaris component custom properties
-    --pc-single-thumb-progress-lower: var(--p-color-bg-critical-strong);
+    --pc-single-thumb-progress-lower: var(--p-color-bg-fill-critical);
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include range-thumb-selectors {
-      border-color: var(--p-color-bg-critical-strong);
-      background: var(--p-color-bg-critical-strong);
+      border-color: var(--p-color-bg-fill-critical);
+      background: var(--p-color-bg-fill-critical);
     }
   }
 
@@ -282,7 +281,7 @@ $range-output-translate-x: calc(
   padding: 0 var(--p-space-200);
   min-width: $range-output-size;
   height: $range-output-size;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-100);
   transition-property: transform;
   transition-duration: var(--p-motion-duration-200);
diff --git a/polaris-react/src/components/ResourceItem/ResourceItem.scss b/polaris-react/src/components/ResourceItem/ResourceItem.scss
index 7266afc0539..978ae25f88b 100644
--- a/polaris-react/src/components/ResourceItem/ResourceItem.scss
+++ b/polaris-react/src/components/ResourceItem/ResourceItem.scss
@@ -25,7 +25,7 @@
   &:hover {
     background-color: var(--p-color-bg-hover);
     #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
+      background-color: var(--p-color-bg-surface-secondary-hover);
     }
 
     .Actions {
@@ -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-025) solid var(--p-color-border-secondary);
 
     #{$se23} & {
       @include item-separator;
diff --git a/polaris-react/src/components/ResourceList/ResourceList.scss b/polaris-react/src/components/ResourceList/ResourceList.scss
index 38e3ddd8419..e18e6558e3b 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-025) solid var(--p-color-border-secondary);
 
     #{$se23} & {
       border-top: none;
@@ -42,7 +42,7 @@ $item-wrapper-loading-height: 64px;
 
 .HeaderOuterWrapper {
   position: relative;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   // 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);
@@ -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-025) solid var(--p-color-border-secondary);
 
     #{$se23} & {
       border-top: none;
@@ -86,7 +86,7 @@ $item-wrapper-loading-height: 64px;
   width: 100%;
   min-height: resource-list(header-min-height);
   padding: calc(var(--p-space-300) - var(--p-space-050)) var(--p-space-500);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   border-radius: var(--p-border-radius-200);
   #{$se23} & {
     // This container conditionally includes a Select component for sorting
@@ -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-025) solid var(--p-color-border-secondary);
 
     #{$se23} & {
       border-top: none;
diff --git a/polaris-react/src/components/Scrollable/Scrollable.scss b/polaris-react/src/components/Scrollable/Scrollable.scss
index ad78854b7d4..df16c4dd3b1 100644
--- a/polaris-react/src/components/Scrollable/Scrollable.scss
+++ b/polaris-react/src/components/Scrollable/Scrollable.scss
@@ -23,8 +23,7 @@
   isolation: isolate;
 
   &:focus {
-    outline: var(--p-border-width-050) solid
-      var(--p-color-border-interactive-focus);
+    outline: var(--p-border-width-050) solid var(--p-color-border-focus);
     outline-offset: var(--p-space-050);
   }
 
diff --git a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
index eb453a3e0bc..848d467d2f6 100644
--- a/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
+++ b/polaris-react/src/components/Scrollable/Scrollable.stories.tsx
@@ -1181,7 +1181,7 @@ export function WithShadowOverComplexChildren() {
         style={{
           height: '200px',
           maxWidth: '40rem',
-          backgroundColor: 'var(--p-color-bg)',
+          backgroundColor: 'var(--p-color-bg-surface)',
           // Setting red here so the storybook is really obvious that the shadow
           // overlays the content (particularly the banner)
           /* @ts-expect-error TS doesn't understand CSS vars */
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
index 43886b3086a..0f544f9db04 100644
--- a/polaris-react/src/components/Select/Select.scss
+++ b/polaris-react/src/components/Select/Select.scss
@@ -16,15 +16,15 @@
   #{$se23} &:not(.disabled):not(.error) {
     // stylelint-disable-next-line -- se23 overrides
     &:hover .Backdrop {
-      border-color: var(--p-color-border-input-hover);
-      background-color: var(--p-color-bg-input-hover-experimental);
+      border-color: var(--p-color-input-border-hover);
+      background-color: var(--p-color-input-bg-surface-hover);
     }
 
     // stylelint-disable-next-line -- se23 overrides
     .Input:active ~ .Backdrop {
       border: none;
       box-shadow: var(--p-shadow-inset-md);
-      background-color: var(--p-color-bg-input-active-experimental);
+      background-color: var(--p-color-input-bg-surface-active);
     }
   }
 }
@@ -54,14 +54,14 @@
     border-color: var(--p-color-border-disabled);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      background-color: var(--p-color-bg-fill-disabled);
     }
 
     &::before {
       background-color: var(--p-color-bg-disabled);
 
       #{$se23} & {
-        background-color: var(--p-color-bg-input);
+        background-color: var(--p-color-input-bg-surface);
       }
     }
 
@@ -124,7 +124,7 @@
   fill: var(--p-color-icon);
 
   #{$se23} & {
-    fill: var(--p-color-icon-subdued);
+    fill: var(--p-color-icon-secondary);
   }
 }
 
@@ -161,9 +161,9 @@
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--p-border-width-025) solid var(--p-color-border-input);
+  border: var(--p-border-width-025) solid var(--p-color-input-border);
   border-radius: var(--p-border-radius-100);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-sm);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 1px);
@@ -171,7 +171,7 @@
   position: absolute;
 
   #{$se23} & {
-    background-color: var(--p-color-bg-input);
+    background-color: var(--p-color-input-bg-surface);
     border-radius: var(--p-border-radius-200);
     border-width: var(--p-border-width-0165);
     box-shadow: none;
@@ -181,11 +181,11 @@
 .error {
   .Backdrop {
     border-color: var(--p-color-border-critical);
-    background-color: var(--p-color-bg-critical-subdued);
+    background-color: var(--p-color-bg-surface-critical);
 
     #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
+      border-color: var(--p-color-border-critical-secondary);
+      background-color: var(--p-color-bg-surface-critical);
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
@@ -203,9 +203,9 @@
     @include focus-ring($style: 'focused');
 
     #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
+      border-color: var(--p-color-border-critical-secondary);
       border-width: var(--p-border-width-025);
-      background-color: var(--p-color-bg-critical-subdued);
+      background-color: var(--p-color-bg-surface-critical);
     }
   }
 }
@@ -216,13 +216,12 @@
     @include focus-ring($style: 'focused');
 
     #{$se23} & {
-      border-color: var(--p-color-border-input-active-experimental);
+      border-color: var(--p-color-input-border-active);
       border-width: var(--p-border-width-025);
-      background-color: var(--p-color-bg-input-active-experimental);
+      background-color: var(--p-color-input-bg-surface-active);
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
   }
diff --git a/polaris-react/src/components/SelectAllActions/SelectAllActions.scss b/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
index df3b29fb9a1..0b9a8b37fcc 100644
--- a/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
+++ b/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
@@ -36,18 +36,18 @@
   background: none;
   padding: 0;
   cursor: pointer;
-  color: var(--p-color-text-interactive);
+  color: var(--p-color-text-emphasis);
   outline: none;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring;
 
   &:hover,
   &:focus {
-    color: var(--p-color-text-interactive-hover);
+    color: var(--p-color-text-emphasis-hover);
   }
 
   &:active {
-    color: var(--p-color-text-interactive-active);
+    color: var(--p-color-text-emphasis-active);
   }
 
   &:focus-visible:not(:active) {
diff --git a/polaris-react/src/components/Sheet/Sheet.scss b/polaris-react/src/components/Sheet/Sheet.scss
index 615ee29ed53..0cc07f5166e 100644
--- a/polaris-react/src/components/Sheet/Sheet.scss
+++ b/polaris-react/src/components/Sheet/Sheet.scss
@@ -7,11 +7,11 @@ $sheet-desktop-width: 380px;
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   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-025) solid var(--p-color-border-secondary);
   }
 
   @media #{$p-breakpoints-md-up} {
diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index afb09f276e3..863b9fd3c88 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -347,7 +347,7 @@ export function WithSearchableListbox() {
         position: 'sticky',
         zIndex: 'var(--p-z-index-12)',
         width: '100%',
-        background: 'var(--p-color-bg)',
+        background: 'var(--p-color-bg-surface)',
       }}
     >
       <StopPropagation>
@@ -390,7 +390,7 @@ export function WithSearchableListbox() {
 
   const showAllMarkup = showFooterAction ? (
     <Listbox.Action value={actionValue}>
-      <span style={{color: 'var(--p-color-text-interactive)'}}>
+      <span style={{color: 'var(--p-color-text-emphasis)'}}>
         Show all 111 segments
       </span>
     </Listbox.Action>
diff --git a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
index f101b53b17c..c8a9b28868c 100644
--- a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
+++ b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
@@ -9,7 +9,7 @@ $body-text-last-line-width: 80%;
 .SkeletonBodyText {
   height: var(--p-space-200);
   display: flex;
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-100);
 
   @media screen and (-ms-high-contrast: active) {
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
index 9c311211ca4..fac0aff63f6 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
@@ -15,12 +15,14 @@ $skeleton-display-text-max-width: 120px;
 .DisplayText {
   // stylelint-disable -- Polaris component custom properties
   --pc-skeleton-display-text-height: var(--p-font-line-height-500);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-500);
+  --pc-skeleton-display-text-height-not-condensed: var(
+    --p-font-line-height-500
+  );
   // stylelint-enable
   max-width: $skeleton-display-text-max-width;
 
   display: flex;
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-100);
 
   @media screen and (-ms-high-contrast: active) {
@@ -31,7 +33,9 @@ $skeleton-display-text-max-width: 120px;
 .sizeSmall {
   // stylelint-disable -- Polaris component custom properties
   --pc-skeleton-display-text-height: var(--p-font-line-height-600);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-700);
+  --pc-skeleton-display-text-height-not-condensed: var(
+    --p-font-line-height-700
+  );
   // stylelint-enable
   @include skeleton-display-text-height;
 }
@@ -39,7 +43,9 @@ $skeleton-display-text-max-width: 120px;
 .sizeMedium {
   // stylelint-disable -- Polaris component custom properties
   --pc-skeleton-display-text-height: var(--p-font-line-height-700);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-800);
+  --pc-skeleton-display-text-height-not-condensed: var(
+    --p-font-line-height-800
+  );
   // stylelint-enable
   @include skeleton-display-text-height;
 }
@@ -47,7 +53,9 @@ $skeleton-display-text-max-width: 120px;
 .sizeLarge {
   // stylelint-disable -- Polaris component custom properties
   --pc-skeleton-display-text-height: var(--p-font-line-height-700);
-  --pc-skeleton-display-text-height-not-condensed: var(--p-font-line-height-800);
+  --pc-skeleton-display-text-height-not-condensed: var(
+    --p-font-line-height-800
+  );
   // stylelint-enable
   @include skeleton-display-text-height;
 }
diff --git a/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss b/polaris-react/src/components/SkeletonTabs/SkeletonTabs.scss
index 73c07b29a5b..37f0c845218 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-025) solid var(--p-color-border-secondary);
 }
 
 .Tab {
diff --git a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
index a39b270ecda..fcf554454c2 100644
--- a/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
+++ b/polaris-react/src/components/SkeletonThumbnail/SkeletonThumbnail.scss
@@ -8,7 +8,7 @@
   --pc-skeleton-thumbnail-large-size: 80px;
   // stylelint-enable
   display: flex;
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-100);
 
   #{$se23} & {
diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
index f4b0a9c6fca..ded4c057d48 100644
--- a/polaris-react/src/components/Tabs/Tabs.scss
+++ b/polaris-react/src/components/Tabs/Tabs.scss
@@ -77,8 +77,8 @@
   padding: 0 var(--p-space-300);
   border: 0;
   border-radius: var(--p-border-radius-100);
-  background: var(--p-color-bg);
-  color: var(--p-color-text-subdued);
+  background: var(--p-color-bg-surface);
+  color: var(--p-color-text-secondary);
   cursor: pointer;
   text-decoration: none;
   width: 100%;
@@ -124,7 +124,7 @@
   #{$se23} & {
     // stylelint-disable-next-line -- no way to set focus ring without mixin currently
     @include focus-ring($size: 'wide');
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     background-color: transparent;
     border-radius: var(--p-border-radius-200);
     padding: var(--p-space-150) var(--p-space-300);
@@ -135,20 +135,20 @@
     }
 
     &:not([aria-disabled='true']):hover {
-      background-color: var(--p-color-bg-transparent-hover-experimental);
-      color: var(--p-color-text-primary);
+      background-color: var(--p-color-bg-fill-transparent-hover);
+      color: var(--p-color-text-brand);
     }
 
     &:not([aria-disabled='true']):focus-visible {
       background-color: transparent;
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
       // stylelint-disable-next-line -- sshhh
       @include focus-ring($size: 'wide', $style: 'focused');
     }
 
     &:not([aria-disabled='true']):active {
-      background-color: var(--p-color-bg-secondary-experimental);
-      color: var(--p-color-text-primary);
+      background-color: var(--p-color-bg-surface-tertiary);
+      color: var(--p-color-text-brand);
       z-index: var(--p-z-index-1);
     }
 
@@ -162,7 +162,7 @@
 
 .Tab-active {
   background: var(--p-color-bg-primary-subdued-hover);
-  color: var(--p-color-text-primary);
+  color: var(--p-color-text-brand);
 
   &[aria-disabled='true'] {
     background: var(--p-color-bg-disabled);
@@ -172,16 +172,16 @@
   &:not([aria-disabled='true']):hover,
   &:not([aria-disabled='true']):focus {
     background-color: var(--p-color-bg-primary-subdued-hover);
-    color: var(--p-color-text-primary-hover);
+    color: var(--p-color-text-brand-hover);
   }
 
   &:not([aria-disabled='true']):active {
-    background-color: var(--p-color-bg-success-subdued-active);
-    color: var(--p-color-text-primary);
+    background-color: var(--p-color-bg-surface-success-active);
+    color: var(--p-color-text-brand);
   }
 
   #{$se23} & {
-    background: var(--p-color-bg-transparent-active-experimental);
+    background: var(--p-color-bg-fill-transparent-active);
     color: var(--p-color-text);
     border-radius: var(--p-border-radius-200);
 
@@ -192,12 +192,12 @@
 
     &:not([aria-disabled='true']):hover,
     &:not([aria-disabled='true']):focus {
-      background-color: var(--p-color-bg-transparent-hover-experimental);
-      color: var(--p-color-text-primary);
+      background-color: var(--p-color-bg-fill-transparent-hover);
+      color: var(--p-color-text-brand);
     }
 
     &:not([aria-disabled='true']):active {
-      background-color: var(--p-color-bg-transparent-active-experimental);
+      background-color: var(--p-color-bg-fill-transparent-active);
     }
   }
 }
@@ -300,7 +300,7 @@
   @include unstyled-button;
   height: 100%;
   background-color: transparent;
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -343,7 +343,7 @@
 
   #{$se23} & {
     background-color: transparent;
-    color: var(--p-color-text-primary);
+    color: var(--p-color-text-brand);
     border-radius: var(--p-border-radius-200);
 
     // stylelint-disable-next-line selector-max-combinators -- Polaris component experimental styles
@@ -357,17 +357,17 @@
     }
 
     &:not([aria-disabled='true']):hover {
-      background-color: var(--p-color-bg-transparent-hover-experimental);
-      color: var(--p-color-text-primary);
+      background-color: var(--p-color-bg-fill-transparent-hover);
+      color: var(--p-color-text-brand);
     }
 
     &:not([aria-disabled='true']):focus {
       background-color: transparent;
-      color: var(--p-color-text-primary);
+      color: var(--p-color-text-brand);
     }
 
     &:not([aria-disabled='true']):active {
-      background-color: var(--p-color-bg-secondary-experimental);
+      background-color: var(--p-color-bg-surface-tertiary);
     }
   }
 }
diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss
index dd35d2f9e75..0c5dd2bc438 100644
--- a/polaris-react/src/components/Tag/Tag.scss
+++ b/polaris-react/src/components/Tag/Tag.scss
@@ -9,7 +9,7 @@ $button-size: 20px;
   align-items: center;
   min-height: 28px;
   padding: 0 var(--p-space-200);
-  background-color: var(--p-color-bg-strong);
+  background-color: var(--p-color-bg-fill-tertiary);
   border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
 
@@ -28,14 +28,14 @@ $button-size: 20px;
     @include unstyled-button;
     cursor: pointer;
     padding: var(--p-space-100) var(--p-space-200);
-    background-color: var(--p-color-bg-strong);
+    background-color: var(--p-color-bg-fill-tertiary);
     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-500);
 
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
 
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -48,7 +48,7 @@ $button-size: 20px;
     }
 
     &:active {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:disabled {
@@ -74,11 +74,11 @@ $button-size: 20px;
       padding: 0 calc(var(--p-space-100) + var(--p-space-050));
 
       &:hover {
-        background: var(--p-color-bg-strong-hover);
+        background: var(--p-color-bg-fill-tertiary-hover);
       }
 
       &:active {
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
       }
     }
   }
@@ -92,11 +92,11 @@ $button-size: 20px;
 
     #{$se23} & {
       &:hover {
-        background: var(--p-color-bg-strong-hover);
+        background: var(--p-color-bg-fill-tertiary-hover);
       }
 
       &:active {
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
       }
     }
   }
@@ -157,7 +157,7 @@ $button-size: 20px;
   }
 
   &:hover {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
     outline: var(--p-border-width-025) solid transparent;
   }
 
@@ -170,7 +170,7 @@ $button-size: 20px;
   }
 
   &:active {
-    background: var(--p-color-bg-strong-active);
+    background: var(--p-color-bg-fill-tertiary-active);
   }
 
   &:disabled {
@@ -195,10 +195,10 @@ $button-size: 20px;
     margin-left: var(--p-space-050);
     width: 18px;
     height: 18px;
-    color: var(--p-color-icon-subdued);
+    color: var(--p-color-icon-secondary);
 
     &:hover {
-      color: var(--p-color-icon-primary);
+      color: var(--p-color-icon-brand);
     }
     /* stylelint-disable-next-line selector-max-combinators -- se23 */
     svg {
@@ -206,8 +206,8 @@ $button-size: 20px;
     }
 
     &:focus-visible {
-      background: var(--p-color-bg-strong-hover);
-      color: var(--p-color-icon-primary);
+      background: var(--p-color-bg-fill-tertiary-hover);
+      color: var(--p-color-icon-brand);
     }
   }
 }
@@ -251,7 +251,7 @@ $button-size: 20px;
   }
 
   &:hover {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
     text-decoration: underline;
   }
 
@@ -272,17 +272,17 @@ $button-size: 20px;
     padding: 0;
 
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
   }
 }
 
 #{$se23} {
   .linkable.removable:hover {
-    background: var(--p-color-bg-strong-hover);
+    background: var(--p-color-bg-fill-tertiary-hover);
     /* stylelint-disable-next-line selector-max-class, selector-max-combinators -- se23 */
     .Button {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
   }
 }
diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
index 9a0ffe64bb4..c12f7e22bd3 100644
--- a/polaris-react/src/components/Text/Text.scss
+++ b/polaris-react/src/components/Text/Text.scss
@@ -49,7 +49,7 @@
 }
 
 .subdued {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
 }
 
 .text-inverse {
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index 3ad441cf9fa..b6de50f628a 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -20,7 +20,7 @@ $spinner-icon-size: 12px;
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 
@@ -45,8 +45,8 @@ $spinner-icon-size: 12px;
     #{$se23} & {
       // stylelint-disable-next-line -- se23
       ~ .Backdrop {
-        border-color: var(--p-color-border-input-hover);
-        background-color: var(--p-color-bg-input-hover-experimental);
+        border-color: var(--p-color-input-border-hover);
+        background-color: var(--p-color-input-bg-surface-hover);
       }
     }
   }
@@ -80,14 +80,13 @@ $spinner-icon-size: 12px;
     @include focus-ring($style: 'focused');
 
     #{$se23} & {
-      border-color: var(--p-color-border-input-active-experimental);
+      border-color: var(--p-color-input-border-active);
       border-width: var(--p-border-width-025);
-      background-color: var(--p-color-bg-input-active-experimental);
+      background-color: var(--p-color-input-bg-surface-active);
 
       // stylelint-disable-next-line -- se23
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
   }
@@ -98,8 +97,8 @@ $spinner-icon-size: 12px;
     // stylelint-disable-next-line -- se23
     .Input:hover ~ .Backdrop,
     .Input:focus-visible ~ .Backdrop {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
+      border-color: var(--p-color-border-critical-secondary);
+      background-color: var(--p-color-bg-surface-critical);
     }
     // stylelint-disable-next-line -- se23
     .Input:active ~ .Backdrop,
@@ -110,16 +109,16 @@ $spinner-icon-size: 12px;
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   > .Input ~ .Backdrop {
-    background-color: var(--p-color-bg-critical-subdued);
+    background-color: var(--p-color-bg-surface-critical);
     border-color: var(--p-color-border-critical);
 
     #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
+      border-color: var(--p-color-border-critical-secondary);
     }
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &::after {
-      border-color: var(--p-color-border-interactive-focus);
+      border-color: var(--p-color-border-focus);
     }
   }
 }
@@ -127,7 +126,7 @@ $spinner-icon-size: 12px;
 .readOnly {
   > .Input {
     #{$se23} & {
-      color: var(--p-color-text-subdued);
+      color: var(--p-color-text-secondary);
     }
   }
 
@@ -136,7 +135,7 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       // se23 -- specificity bump
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      background-color: var(--p-color-bg-fill-disabled);
       border-color: transparent;
     }
   }
@@ -145,7 +144,7 @@ $spinner-icon-size: 12px;
     // stylelint-disable-next-line selector-max-class -- se23
     > .Backdrop {
       #{$se23} & {
-        background-color: var(--p-color-bg-transparent-disabled-experimental);
+        background-color: var(--p-color-bg-fill-disabled);
         border-color: transparent;
       }
     }
@@ -163,7 +162,7 @@ $spinner-icon-size: 12px;
 
     #{$se23} & {
       border: none;
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      background-color: var(--p-color-bg-fill-disabled);
     }
   }
 
@@ -234,7 +233,7 @@ $spinner-icon-size: 12px;
   }
 
   &::placeholder {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
   }
 
   // These properties are used to remove the default "spinner" controls
@@ -305,8 +304,8 @@ $spinner-icon-size: 12px;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg);
-  border: var(--p-border-width-025) solid var(--p-color-border-input);
+  background-color: var(--p-color-bg-surface);
+  border: var(--p-border-width-025) solid var(--p-color-input-border);
   // 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);
@@ -315,7 +314,7 @@ $spinner-icon-size: 12px;
   #{$se23} & {
     border-radius: var(--p-border-radius-200);
     border-width: var(--p-border-width-0165);
-    background-color: var(--p-color-bg-input);
+    background-color: var(--p-color-input-bg-surface);
   }
 }
 
@@ -325,7 +324,7 @@ $spinner-icon-size: 12px;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
   flex: 0 0 auto;
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   user-select: none;
 
   #{$se23} & {
@@ -352,7 +351,7 @@ $spinner-icon-size: 12px;
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   padding: var(--p-space-200) var(--p-space-200) 0 var(--p-space-200);
   max-height: 140px;
   overflow: scroll;
@@ -370,7 +369,7 @@ $spinner-icon-size: 12px;
 }
 
 .CharacterCount {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
   margin: 0 var(--p-space-300) 0 var(--p-space-100);
@@ -488,7 +487,7 @@ $spinner-icon-size: 12px;
   // stylelint-disable -- Polaris component custom properties
   --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-100) - 2px);
   // stylelint-enable
-  background: var(--p-color-bg-strong);
+  background: var(--p-color-bg-fill-tertiary);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   border-radius: var(--pc-text-field-spinner-border-radius);
   display: flex;
@@ -502,11 +501,11 @@ $spinner-icon-size: 12px;
     border-radius: var(--p-border-radius-100);
 
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
 
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
   }
 
@@ -515,7 +514,7 @@ $spinner-icon-size: 12px;
   }
 
   &:active {
-    background: var(--p-color-bg-strong-active);
+    background: var(--p-color-bg-fill-tertiary-active);
   }
 
   &:first-child {
diff --git a/polaris-react/src/components/Thumbnail/Thumbnail.scss b/polaris-react/src/components/Thumbnail/Thumbnail.scss
index c4496c0cd9e..2ed90747d54 100644
--- a/polaris-react/src/components/Thumbnail/Thumbnail.scss
+++ b/polaris-react/src/components/Thumbnail/Thumbnail.scss
@@ -10,12 +10,12 @@
   position: relative;
   display: block;
   overflow: hidden;
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   // 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: var(--p-border-width-025) solid var(--p-color-border-secondary);
 
   #{$se23} & {
     border-radius: var(--p-border-radius-200);
@@ -86,7 +86,7 @@
   margin: auto;
   max-width: 100%;
   max-height: 100%;
-  color: var(--p-color-icon-subdued);
+  color: var(--p-color-icon-secondary);
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   svg {
diff --git a/polaris-react/src/components/Tooltip/Tooltip.scss b/polaris-react/src/components/Tooltip/Tooltip.scss
index eda433abd38..94f1cd4b0b8 100644
--- a/polaris-react/src/components/Tooltip/Tooltip.scss
+++ b/polaris-react/src/components/Tooltip/Tooltip.scss
@@ -3,5 +3,6 @@
 }
 
 .HasUnderline {
-  border-bottom: var(--p-border-width-050) dotted var(--p-color-border-subdued);
+  border-bottom: var(--p-border-width-050) dotted
+    var(--p-color-border-secondary);
 }
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 7711e2aaa0d..59cc6a065ab 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -49,7 +49,7 @@
     width: 0;
     border-width: var(--p-space-200);
     border-style: solid;
-    border-color: transparent transparent var(--p-color-bg) transparent;
+    border-color: transparent transparent var(--p-color-bg-surface) transparent;
 
     #{$se23} & {
       content: none;
@@ -72,7 +72,8 @@
     &::after {
       top: auto;
       bottom: calc(var(--p-space-400) * -1);
-      border-color: var(--p-color-bg) transparent transparent transparent;
+      border-color: var(--p-color-bg-surface) transparent transparent
+        transparent;
     }
 
     // TailDown
@@ -115,7 +116,7 @@
 
 .Content {
   position: relative;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   color: var(--p-color-text);
   word-break: break-word;
   // stylelint-disable-next-line -- Polaris component custom properties
diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
index a1d14f1630f..7a0a0932352 100644
--- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
+++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
@@ -18,7 +18,7 @@ const tailUpPaths = (
     />
     <path
       d="M17.442 10.171h-16v-2l6.87-6.612a2 2 0 0 1 2.83.055l6.3 6.557v2Z"
-      fill="var(--p-color-bg)"
+      fill="var(--p-color-bg-surface)"
     />
   </>
 );
@@ -31,7 +31,7 @@ const tailDownPaths = (
     />
     <path
       d="M1.387 0h16v2l-6.87 6.612a2 2 0 0 1-2.83-.055L1.387 2V0Z"
-      fill="var(--p-color-bg)"
+      fill="var(--p-color-bg-surface)"
     />
   </>
 );
diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss
index bd4d26df440..02443170038 100644
--- a/polaris-react/src/components/TopBar/TopBar.scss
+++ b/polaris-react/src/components/TopBar/TopBar.scss
@@ -15,7 +15,7 @@ $right-column: 1fr;
   position: relative;
   height: $top-bar-height;
   box-shadow: var(--p-shadow-sm);
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   gap: var(--p-space-100);
 
   #{$se23} & {
@@ -83,8 +83,7 @@ $right-column: 1fr;
 
   #{$se23} & {
     &:focus-visible {
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-150);
       border-radius: var(--p-border-radius-200);
     }
@@ -128,7 +127,7 @@ $right-column: 1fr;
     background-color: var(--p-color-bg-hover);
 
     #{$se23} & {
-      background-color: var(--p-color-bg-inverse-hover);
+      background-color: var(--p-color-bg-fill-inverse-hover);
     }
   }
   // This increases hit point size.
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index 306b1078266..97b6f8b9149 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -37,7 +37,7 @@ $activator-variables: (
   #{$se23} & {
     color: var(--p-color-text-inverse);
     padding: var(--p-space-150);
-    background-color: var(--p-color-bg-inset-strong);
+    background-color: var(--p-color-bg-fill-inverse);
     border-radius: var(--p-border-radius-200);
     min-width: auto;
     min-height: menu(min-height);
@@ -53,7 +53,7 @@ $activator-variables: (
     outline: none;
 
     #{$se23} & {
-      background-color: var(--p-color-bg-inverse-hover);
+      background-color: var(--p-color-bg-fill-inverse-hover);
     }
   }
 
@@ -64,8 +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
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
     }
   }
@@ -79,7 +78,7 @@ $activator-variables: (
     // stylelint-enable
 
     #{$se23} & {
-      background-color: var(--p-color-bg-inverse-hover);
+      background-color: var(--p-color-bg-fill-inverse-hover);
     }
   }
 
@@ -99,9 +98,9 @@ $activator-variables: (
     }
 
     #{$se23} & {
-      background-color: var(--p-color-bg-inverse-active);
+      background-color: var(--p-color-bg-fill-inverse-active);
 
-      // stylelint-disable -- se23 text needs to be lighter to pass a11y on --p-color-bg-inverse-active
+      // stylelint-disable -- se23 text needs to be lighter to pass a11y on --p-color-bg-fill-inverse-active
       p {
         color: var(--p-color-text-inverse);
       }
@@ -129,5 +128,5 @@ $activator-variables: (
 .Section {
   margin-top: var(--p-space-200);
   padding-top: var(--p-space-200);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 }
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 96ad4a13bed..0387ef888d1 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-200);
   padding-top: var(--p-space-200);
-  border-top: var(--p-border-width-025) solid var(--p-color-border-subdued);
+  border-top: var(--p-border-width-025) solid var(--p-color-border-secondary);
 }
diff --git a/polaris-react/src/components/TopBar/components/Search/Search.scss b/polaris-react/src/components/TopBar/components/Search/Search.scss
index 7a1b9159a5b..4f69f8f1ee6 100644
--- a/polaris-react/src/components/TopBar/components/Search/Search.scss
+++ b/polaris-react/src/components/TopBar/components/Search/Search.scss
@@ -26,7 +26,7 @@
 }
 
 .SearchContent {
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
 }
 
 .visible {
diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
index 3d412aa1d91..e3c4dfd578a 100644
--- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.scss
@@ -39,10 +39,10 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
   }
 
   &::placeholder {
-    color: var(--p-color-text-subdued);
+    color: var(--p-color-text-secondary);
 
     #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
+      color: var(--p-color-text-inverse-secondary);
     }
   }
 }
@@ -63,7 +63,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -72,14 +72,13 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
   #{$se23} & {
     // stylelint-disable-next-line -- se23
     ~ .Backdrop {
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-050);
     }
 
     // stylelint-disable-next-line -- se23
     ~ .Icon svg {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -118,7 +117,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
 
   #{$se23} & {
     padding: 0 $search-icon-width-se23 0 $search-icon-width-se23;
-    color: var(--p-color-text-inverse-subdued);
+    color: var(--p-color-text-inverse-secondary);
     height: $new-input-height-se23;
     border: var(--p-border-width-0165) solid var(--p-color-border-inverse);
     border-radius: var(--p-border-radius-200);
@@ -137,7 +136,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     color: var(--p-color-text);
 
     #{$se23} & {
-      color: var(--p-color-text-inverse-subdued);
+      color: var(--p-color-text-inverse-secondary);
     }
   }
 
@@ -167,7 +166,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 }
@@ -193,7 +192,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
     fill: var(--p-color-icon);
 
     #{$se23} & {
-      fill: var(--p-color-icon-subdued);
+      fill: var(--p-color-icon-secondary);
     }
   }
 
@@ -237,13 +236,13 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg-inset);
+  background-color: var(--p-color-bg-fill-secondary);
   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);
+    background-color: var(--p-color-bg-fill-inverse);
     border-radius: var(--p-border-radius-200);
   }
 }
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
index 71b1943ed4d..9f34c089c6f 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
@@ -23,7 +23,7 @@
 
 .Message > p {
   #{$se23} & {
-    color: var(--p-color-text-inverse-subdued);
+    color: var(--p-color-text-inverse-secondary);
     font-size: var(--p-font-size-275);
     line-height: var(--p-font-line-height-300);
   }
diff --git a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
index 1568ecaca14..5fd93b647e9 100644
--- a/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
+++ b/polaris-react/src/components/VideoThumbnail/VideoThumbnail.scss
@@ -36,7 +36,7 @@ $progress-bar-height: 6px;
   &:focus {
     outline: none;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    box-shadow: inset 2px 0 0 var(--p-color-border-interactive-focus);
+    box-shadow: inset 2px 0 0 var(--p-color-border-focus);
     // stylelint-disable -- generated by polaris-migrator DO NOT COPY
     background-image: linear-gradient(
       var(--pc-play-button-focused-state-overlay),
@@ -76,7 +76,7 @@ $progress-bar-height: 6px;
     var(--p-motion-ease-in);
 
   #{$se23} & {
-    background-color: var(--p-color-bg-backdrop-experimental);
+    background-color: var(--p-color-backdrop-bg);
     border-radius: var(--p-border-radius-200);
   }
 }
@@ -85,7 +85,7 @@ $progress-bar-height: 6px;
   position: absolute;
   bottom: 0;
   width: 100%;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-surface);
   height: $progress-bar-height;
   overflow: hidden;
 }
diff --git a/polaris-react/src/styles/foundation/_focus-ring.scss b/polaris-react/src/styles/foundation/_focus-ring.scss
index 575910d7ce9..9472658eb67 100644
--- a/polaris-react/src/styles/foundation/_focus-ring.scss
+++ b/polaris-react/src/styles/foundation/_focus-ring.scss
@@ -29,17 +29,13 @@
       left: $negative-offset;
       display: block;
       pointer-events: none;
-      box-shadow: 0
-        0
-        0
-        $negative-offset
-        var(--p-color-border-interactive-focus);
+      box-shadow: 0 0 0 $negative-offset var(--p-color-border-focus);
       border-radius: $border-radius;
       @content;
     }
   } @else if $style == 'focused' {
     &::after {
-      box-shadow: 0 0 0 $stroke var(--p-color-border-interactive-focus);
+      box-shadow: 0 0 0 $stroke var(--p-color-border-focus);
       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 081b5870bc1..6323e82ceb1 100644
--- a/polaris-react/src/styles/shared/_buttons.scss
+++ b/polaris-react/src/styles/shared/_buttons.scss
@@ -13,7 +13,7 @@
   min-width: 36px;
   margin: 0;
   padding: $vertical-padding var(--p-space-400);
-  background: var(--p-color-bg);
+  background: var(--p-color-bg-surface);
   box-shadow: var(--p-shadow-sm);
   border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
@@ -51,8 +51,7 @@
     #{$se23} & {
       // stylelint-disable-next-line -- se23 temporary styles
       @include no-focus-ring;
-      outline: var(--p-border-width-050) solid
-        var(--p-color-border-interactive-focus);
+      outline: var(--p-border-width-050) solid var(--p-color-border-focus);
       outline-offset: var(--p-space-025);
     }
   }
@@ -65,7 +64,7 @@
   }
 
   &.pressed {
-    background: var(--p-color-bg-inset-strong);
+    background: var(--p-color-bg-fill-inverse);
     box-shadow: var(--p-shadow-inset-md);
     color: var(--p-color-text-on-color);
     border-color: var(--p-color-border-inverse);
@@ -75,17 +74,17 @@
     }
 
     #{$se23} & {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
       box-shadow: var(--p-shadow-inset-md);
       color: var(--p-color-text);
 
       &:hover {
-        background: var(--p-color-bg-strong-hover);
+        background: var(--p-color-bg-fill-tertiary-hover);
         box-shadow: var(--p-shadow-inset-md);
       }
 
       &:active {
-        background: var(--p-color-bg-strong-active);
+        background: var(--p-color-bg-fill-tertiary-active);
         box-shadow: var(--p-shadow-inset-md);
       }
     }
diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
index 62408be6083..53e17b7b240 100644
--- a/polaris-react/src/styles/shared/_controls.scss
+++ b/polaris-react/src/styles/shared/_controls.scss
@@ -9,8 +9,8 @@
 @mixin control-backdrop($style: base) {
   @if $style == base {
     position: relative;
-    border: var(--p-border-width-050) solid var(--p-color-border-input);
-    background-color: var(--p-color-bg);
+    border: var(--p-border-width-050) solid var(--p-color-input-border);
+    background-color: var(--p-color-bg-surface);
     border-radius: var(--p-border-radius-100);
 
     &::before {
@@ -59,7 +59,7 @@
     }
   } @else if $style == error {
     border-color: var(--p-color-border-critical);
-    background-color: var(--p-color-bg-critical);
+    background-color: var(--p-color-bg-fill-critical-secondary);
 
     &.hover,
     &:hover {