Migrate color custom properties from Polaris v11 to v12 (Shopify#10797

) ### WHY are these changes introduced? Closes Shopify#10636 Migrates `color` custom properties. > [!Important] > Color migration needed to be run in 2 sequential steps due to overlapping `color-bg` and `color-bg-app` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 1 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 1)" ``` ## Step 2 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230929171751 \ --step 2 \ v12-styles-replace-custom-property-color \ '**/*' ``` ```sh # Stage all migrated files git add . # Format staged files only git diff --staged --name-only | xargs npx prettier --write # Commit automated migrations git commit -m "Migrate color custom properties from Polaris v11 to v12 (step 2)" ``` #### Step 1 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-avatar-background-experimental` | `--p-color-avatar-bg-fill` | | `--p-color-avatar-color-experimental` | `--p-color-avatar-text-on-bg-fill` | | `--p-color-avatar-style-five-background-experimental` | `--p-color-avatar-five-bg-fill` | | `--p-color-avatar-style-five-color-experimental` | `--p-color-avatar-five-text-on-bg-fill` | | `--p-color-avatar-style-four-background-experimental` | `--p-color-avatar-four-bg-fill` | | `--p-color-avatar-style-four-color-experimental` | `--p-color-avatar-four-text-on-bg-fill` | | `--p-color-avatar-style-one-background-experimental` | `--p-color-avatar-one-bg-fill` | | `--p-color-avatar-style-one-color-experimental` | `--p-color-avatar-one-text-on-bg-fill` | | `--p-color-avatar-style-three-background-experimental` | `--p-color-avatar-three-bg-fill` | | `--p-color-avatar-style-three-color-experimental` | `--p-color-avatar-three-text-on-bg-fill` | | `--p-color-avatar-style-two-background-experimental` | `--p-color-avatar-two-bg-fill` | | `--p-color-avatar-style-two-color-experimental` | `--p-color-avatar-two-text-on-bg-fill` | | `--p-color-bg-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-active` | `--p-color-bg-surface-active` | | `--p-color-bg-app-selected` | `--p-color-bg-surface-selected` | | `--p-color-bg-backdrop-experimental` | `--p-color-backdrop-bg` | | `--p-color-bg-caution-strong` | `--p-color-bg-fill-caution` | | `--p-color-bg-caution-subdued-active` | `--p-color-bg-surface-caution-active` | | `--p-color-bg-caution-subdued-hover` | `--p-color-bg-surface-caution-hover` | | `--p-color-bg-caution-subdued` | `--p-color-bg-surface-caution` | | `--p-color-bg-caution` | `--p-color-bg-fill-caution-secondary` | | `--p-color-bg-critical-strong-active` | `--p-color-bg-fill-critical-active` | | `--p-color-bg-critical-strong-hover` | `--p-color-bg-fill-critical-hover` | | `--p-color-bg-critical-strong` | `--p-color-bg-fill-critical` | | `--p-color-bg-critical-subdued-active` | `--p-color-bg-surface-critical-active` | | `--p-color-bg-critical-subdued-hover` | `--p-color-bg-surface-critical-hover` | | `--p-color-bg-critical-subdued` | `--p-color-bg-surface-critical` | | `--p-color-bg-critical` | `--p-color-bg-fill-critical-secondary` | | `--p-color-bg-disabled` | `--p-color-bg-surface-disabled` | | `--p-color-bg-hover` | `--p-color-bg-surface-hover` | | `--p-color-bg-info-strong` | `--p-color-bg-fill-info` | | `--p-color-bg-info-subdued-active` | `--p-color-bg-surface-info-active` | | `--p-color-bg-info-subdued-hover` | `--p-color-bg-surface-info-hover` | | `--p-color-bg-info-subdued` | `--p-color-bg-surface-info` | | `--p-color-bg-info` | `--p-color-bg-fill-info-secondary` | | `--p-color-bg-input-active-experimental` | `--p-color-input-bg-surface-active` | | `--p-color-bg-input-hover-experimental` | `--p-color-input-bg-surface-hover` | | `--p-color-bg-input` | `--p-color-input-bg-surface` | | `--p-color-bg-inset-strong` | `--p-color-bg-fill-inverse` | | `--p-color-bg-inset` | `--p-color-bg-fill-secondary` | | `--p-color-bg-inverse-active` | `--p-color-bg-fill-inverse-active` | | `--p-color-bg-inverse-hover` | `--p-color-bg-fill-inverse-hover` | | `--p-color-bg-magic-active` | `--p-color-bg-fill-magic-secondary-active` | | `--p-color-bg-magic-hover` | `--p-color-bg-fill-magic-secondary-hover` | | `--p-color-bg-magic-strong` | `--p-color-bg-fill-magic` | | `--p-color-bg-magic-subdued-hover` | `--p-color-bg-surface-magic-hover` | | `--p-color-bg-magic-subdued` | `--p-color-bg-surface-magic` | | `--p-color-bg-magic` | `--p-color-bg-fill-magic-secondary` | | `--p-color-bg-primary-active` | `--p-color-bg-fill-brand-active` | | `--p-color-bg-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-primary-hover` | `--p-color-bg-fill-brand-hover` | | `--p-color-bg-primary-subdued-active` | `--p-color-bg-surface-brand-active` | | `--p-color-bg-primary-subdued-hover` | `--p-color-bg-surface-brand-hover` | | `--p-color-bg-primary-subdued-selected` | `--p-color-bg-surface-brand-selected` | | `--p-color-bg-primary-subdued` | `--p-color-bg-surface-brand` | | `--p-color-bg-primary` | `--p-color-bg-fill-brand` | | `--p-color-bg-secondary-experimental` | `--p-color-bg-surface-tertiary` | | `--p-color-bg-strong-active` | `--p-color-bg-fill-tertiary-active` | | `--p-color-bg-strong-hover` | `--p-color-bg-fill-tertiary-hover` | | `--p-color-bg-strong` | `--p-color-bg-fill-tertiary` | | `--p-color-bg-subdued-active` | `--p-color-bg-surface-secondary-active` | | `--p-color-bg-subdued-hover` | `--p-color-bg-surface-secondary-hover` | | `--p-color-bg-subdued` | `--p-color-bg-surface-secondary` | | `--p-color-bg-success-strong-active-experimental` | `--p-color-bg-fill-success-active` | | `--p-color-bg-success-strong-hover-experimental` | `--p-color-bg-fill-success-hover` | | `--p-color-bg-success-strong` | `--p-color-bg-fill-success` | | `--p-color-bg-success-subdued-active` | `--p-color-bg-surface-success-active` | | `--p-color-bg-success-subdued-hover` | `--p-color-bg-surface-success-hover` | | `--p-color-bg-success-subdued` | `--p-color-bg-surface-success` | | `--p-color-bg-success` | `--p-color-bg-fill-success-secondary` | | `--p-color-bg-transparent-active-experimental` | `--p-color-bg-fill-transparent-active` | | `--p-color-bg-transparent-disabled-experimental` | `--p-color-bg-fill-disabled` | | `--p-color-bg-transparent-experimental` | `--p-color-bg-surface-transparent` | | `--p-color-bg-transparent-hover-experimental` | `--p-color-bg-fill-transparent-hover` | | `--p-color-bg-transparent-primary-disabled-experimental` | `--p-color-bg-fill-brand-disabled` | | `--p-color-bg-transparent-subdued-experimental` | `--p-color-bg-fill-transparent-secondary` | | `--p-color-bg-warning-strong-experimental` | `--p-color-bg-fill-warning` | | `--p-color-bg-warning-subdued-experimental` | `--p-color-bg-surface-warning` | | `--p-color-bg-warning` | `--p-color-bg-fill-warning-secondary` | | `--p-color-bg` | `--p-color-bg-surface` | | `--p-color-border-caution-subdued` | `--p-color-border-caution` | | `--p-color-border-critical-active` | `--p-color-border-critical` | | `--p-color-border-critical-hover` | `--p-color-border-critical` | | `--p-color-border-critical-strong-experimental` | `--p-color-border-critical-secondary` | | `--p-color-border-critical-subdued` | `--p-color-border-critical` | | `--p-color-border-info-subdued` | `--p-color-border-info` | | `--p-color-border-input-active-experimental` | `--p-color-input-border-active` | | `--p-color-border-input-hover` | `--p-color-input-border-hover` | | `--p-color-border-input` | `--p-color-input-border` | | `--p-color-border-interactive-active` | `--p-color-border-emphasis-active` | | `--p-color-border-interactive-disabled` | `--p-color-border-disabled` | | `--p-color-border-interactive-focus` | `--p-color-border-focus` | | `--p-color-border-interactive-hover` | `--p-color-border-emphasis-hover` | | `--p-color-border-interactive` | `--p-color-border-emphasis` | | `--p-color-border-magic-strong` | `--p-color-border-magic-secondary` | | `--p-color-border-primary` | `--p-color-border-brand` | | `--p-color-border-strong` | `--p-color-border-tertiary` | | `--p-color-border-subdued` | `--p-color-border-secondary` | | `--p-color-border-success-subdued` | `--p-color-border-success` | | `--p-color-icon-critical-strong-active-experimental` | `--p-color-text-critical-active` | | `--p-color-icon-critical-strong-experimental` | `--p-color-text-critical` | | `--p-color-icon-info-strong-experimental` | `--p-color-text-info` | | `--p-color-icon-interactive-active` | `--p-color-icon-emphasis-active` | | `--p-color-icon-interactive-disabled` | `--p-color-icon-disabled` | | `--p-color-icon-interactive-hover` | `--p-color-icon-emphasis-hover` | | `--p-color-icon-interactive` | `--p-color-icon-emphasis` | | `--p-color-icon-primary` | `--p-color-icon-brand` | | `--p-color-icon-subdued` | `--p-color-icon-secondary` | | `--p-color-icon-success-strong-experimental` | `--p-color-text-success` | | `--p-color-icon-warning-strong-experimental` | `--p-color-text-warning` | | `--p-color-text-caution-strong` | `--p-color-text-caution` | | `--p-color-text-critical-hover-experimental` | `--p-color-text-critical-hover` | | `--p-color-text-critical-strong` | `--p-color-text-critical` | | `--p-color-text-info-strong` | `--p-color-text-info-on-bg-fill` | | `--p-color-text-interactive-active` | `--p-color-text-emphasis-active` | | `--p-color-text-interactive-disabled` | `--p-color-text-disabled` | | `--p-color-text-interactive-hover` | `--p-color-text-emphasis-hover` | | `--p-color-text-interactive-inverse` | `--p-color-text-link-inverse` | | `--p-color-text-interactive` | `--p-color-text-emphasis` | | `--p-color-text-inverse-subdued` | `--p-color-text-inverse-secondary` | | `--p-color-text-magic-strong` | `--p-color-text-magic` | | `--p-color-text-primary-hover` | `--p-color-text-brand-hover` | | `--p-color-text-primary` | `--p-color-text-brand` | | `--p-color-text-subdued` | `--p-color-text-secondary` | | `--p-color-text-success-strong` | `--p-color-text-success` | | `--p-color-text-warning-experimental` | `--p-color-text-warning` | #### Step 2 replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-bg-app` | `--p-color-bg` | #### Manual replacement map | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-color-icon-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-text-on-color` | `rgba(255, 255, 255, 1)` | | `--p-color-bg-transparent-primary-experimental` | `rgba(0, 0, 0, 0.62)` | ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
AnnaCheba · Oct 2, 2023 · 8d67c74 · 8d67c74
1 parent 42b338a
commit 8d67c74
Show file tree

Hide file tree

Showing 104 changed files with 485 additions and 508 deletions.
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -51,9 +51,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @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);
   }
 
   &:visited {
@@ -83,13 +82,13 @@ $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);
     }
 
     // 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);
     }
   }
 

diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -4,30 +4,29 @@
   text-align: right;
   // stylelint-disable-next-line selector-no-qualifying-type -- override `.iconOnly` negative margins
   button[type='button'] {
-    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;
     margin: 0;
 
     // stylelint-disable-next-line selector-max-specificity -- apply active styles
     &:active {
-      background: var(--p-color-bg-strong-active);
+      background: var(--p-color-bg-fill-tertiary-active);
     }
 
     // stylelint-disable-next-line selector-max-specificity -- apply focus styles
     &:focus:not(:active) {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- 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-specificity -- apply hover styles
     &:hover {
-      background: var(--p-color-bg-strong-hover);
+      background: var(--p-color-bg-fill-tertiary-hover);
     }
   }
 }
diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -8,35 +8,32 @@
   button {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 1px);
-    background-color: var(--p-color-bg-strong) !important;
+    background-color: var(--p-color-bg-fill-tertiary) !important;
     box-shadow: none !important;
     border: none;
     border-radius: var(--p-border-radius-200) !important;
     padding: var(--p-space-100) var(--p-space-300);
     min-height: 28px;
 
     &:is(:hover, :focus) {
-      background-color: var(--p-color-bg-strong-hover) !important;
+      background-color: var(--p-color-bg-fill-tertiary-hover) !important;
     }
 
     &: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-200) !important;
     }
 
     &:focus-visible {
       /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- focus 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-050);
     }
 
     // stylelint-disable-next-line selector-no-qualifying-type -- apply disabled styles
     &[aria-disabled='true'] {
-      background-color: var(
-        --p-color-bg-transparent-disabled-experimental
-      ) !important;
+      background-color: var(--p-color-bg-fill-disabled) !important;
     }
 
     @media #{$p-breakpoints-md-up} {
@@ -53,7 +50,7 @@
 
       // stylelint-disable-next-line selector-max-combinators, selector-max-type -- override svg fill
       svg {
-        fill: var(--p-color-icon-critical-strong-experimental);
+        fill: var(--p-color-text-critical);
       }
 
       // stylelint-disable-next-line selector-max-specificity -- apply hover styles
@@ -63,7 +60,7 @@
 
       // stylelint-disable-next-line selector-max-specificity -- apply focus/active styles
       &:active {
-        background-color: var(--p-color-bg-strong-active) !important;
+        background-color: var(--p-color-bg-fill-tertiary-active) !important;
       }
     }
   }

diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -52,7 +52,7 @@ body {
   padding: 0;
 
   // hardcoding background color because app provider does not have access to
-  // the --p-color-bg-app custom property. Will revisit best way to address in
+  // the --p-color-bg custom property. Will revisit best way to address in
   // follow-up. PR convo for reference
   // https://github.com/Shopify/polaris-react/pull/4636/files#r748646268
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -131,7 +131,7 @@ export class AppProvider extends Component<AppProviderProps, State> {
   }
 
   setBodyStyles = () => {
-    document.body.style.backgroundColor = 'var(--p-color-bg-app)';
+    document.body.style.backgroundColor = 'var(--p-color-bg)';
     document.body.style.color = 'var(--p-color-text)';
   };
 

diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -46,7 +46,7 @@
   border-radius: var(--p-border-radius-200);
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-surface-hover);
     text-decoration: none;
 
     @media (-ms-high-contrast: active) {
@@ -63,7 +63,7 @@
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
+    background-color: var(--p-color-bg-surface-active);
 
     svg {
       fill: var(--p-color-icon-emphasis);

diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
@@ -14,8 +14,8 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-width: var(--pc-avatar-xs-size);
   max-width: 100%;
-  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);
   user-select: none;
 
   &.imageHasLoaded {
@@ -83,52 +83,52 @@
 }
 
 .styleOne {
-  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);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-one-color-experimental);
+    color: var(--p-color-avatar-one-text-on-bg-fill);
   }
 }
 
 .styleTwo {
-  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);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-two-color-experimental);
+    color: var(--p-color-avatar-two-text-on-bg-fill);
   }
 }
 
 .styleThree {
-  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);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-three-color-experimental);
+    color: var(--p-color-avatar-three-text-on-bg-fill);
   }
 }
 
 .styleFour {
-  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);
 
   svg,
   text {
-    color: var(--p-color-avatar-style-four-color-experimental);
+    color: var(--p-color-avatar-four-text-on-bg-fill);
   }
 }
 
 .styleFive {
-  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);
 
   svg,
   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
@@ -9,13 +9,13 @@
   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-transparent-subdued-experimental);
+  background-color: var(--p-color-bg-fill-transparent-secondary);
   border-radius: var(--p-border-radius-200);
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   font-weight: var(--p-font-weight-medium);
 
   svg {
-    fill: var(--p-color-text-subdued);
+    fill: var(--p-color-text-secondary);
   }
 
   @media print {
@@ -24,7 +24,7 @@
 }
 
 .toneSuccess {
-  background-color: var(--p-color-bg-success);
+  background-color: var(--p-color-bg-fill-success-secondary);
   color: var(--p-color-text-success);
 
   svg {
@@ -34,15 +34,15 @@
 
 .toneSuccess-strong {
   color: var(--p-color-text-success-on-bg-fill);
-  background-color: var(--p-color-bg-success-strong);
+  background-color: var(--p-color-bg-fill-success);
 
   svg {
     fill: var(--p-color-text-success-on-bg-fill);
   }
 }
 
 .toneInfo {
-  background-color: var(--p-color-bg-info);
+  background-color: var(--p-color-bg-fill-info-secondary);
   color: var(--p-color-text-info);
 
   svg {
@@ -52,15 +52,15 @@
 
 .toneInfo-strong {
   color: var(--p-color-text-info-on-bg-fill);
-  background-color: var(--p-color-bg-info-strong);
+  background-color: var(--p-color-bg-fill-info);
 
   svg {
     fill: var(--p-color-text-info-on-bg-fill);
   }
 }
 
 .toneAttention {
-  background-color: var(--p-color-bg-caution);
+  background-color: var(--p-color-bg-fill-caution-secondary);
   color: var(--p-color-text-caution);
 
   svg {
@@ -70,16 +70,16 @@
 
 .toneAttention-strong {
   color: var(--p-color-text-caution-on-bg-fill);
-  background-color: var(--p-color-bg-caution-strong);
+  background-color: var(--p-color-bg-fill-caution);
 
   svg {
     fill: var(--p-color-text-caution-on-bg-fill);
   }
 }
 
 .toneWarning {
-  background-color: var(--p-color-bg-warning);
-  color: var(--p-color-text-warning-experimental);
+  background-color: var(--p-color-bg-fill-warning-secondary);
+  color: var(--p-color-text-warning);
 
   svg {
     fill: var(--p-color-icon-warning);
@@ -88,15 +88,15 @@
 
 .toneWarning-strong {
   color: var(--p-color-text-warning-on-bg-fill);
-  background-color: var(--p-color-bg-warning-strong-experimental);
+  background-color: var(--p-color-bg-fill-warning);
 
   svg {
     fill: var(--p-color-text-warning-on-bg-fill);
   }
 }
 
 .toneCritical {
-  background-color: var(--p-color-bg-critical);
+  background-color: var(--p-color-bg-fill-critical-secondary);
   color: var(--p-color-text-critical);
 
   svg {
@@ -106,7 +106,7 @@
 
 .toneCritical-strong {
   color: var(--p-color-text-critical-on-bg-fill);
-  background-color: var(--p-color-bg-critical-strong);
+  background-color: var(--p-color-bg-fill-critical);
 
   svg {
     fill: var(--p-color-text-critical-on-bg-fill);
@@ -115,18 +115,18 @@
 
 .toneNew {
   border: none;
-  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);
 
   svg {
-    fill: var(--p-color-text-subdued);
+    fill: var(--p-color-text-secondary);
   }
 }
 
 .toneRead-only {
-  color: var(--p-color-text-subdued);
+  color: var(--p-color-text-secondary);
   background-color: transparent;
 
   svg {

diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss
@@ -3,7 +3,7 @@
 .Pip {
   // stylelint-disable -- Polaris component custom properties
   --pc-pip-size: var(--p-space-200);
-  --pc-pip-color: var(--p-color-text-subdued);
+  --pc-pip-color: var(--p-color-text-secondary);
   --pc-border-width: 1.25px;
   // stylelint-enable
   display: inline-block;
@@ -34,7 +34,7 @@
 
 .toneNew {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-pip-color: var(--p-color-text-subdued);
+  --pc-pip-color: var(--p-color-text-secondary);
 }
 
 .toneAttention {