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 #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/**/*' ```
Shopify · Sep 27, 2023 · 30555a9 · 30555a9
1 parent f0cd703
commit 30555a9
Show file tree

Hide file tree

Showing 99 changed files with 694 additions and 713 deletions.
diff --git a/.changeset/chatty-mails-invent.md 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
@@ -51,19 +51,19 @@ $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);
     }
   }
 
   &:active {
     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
@@ -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
@@ -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
@@ -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
@@ -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,15 +72,15 @@
     background-color: var(--p-color-bg-interactive-selected);
 
     svg {
-      fill: var(--p-color-icon-interactive);
+      fill: var(--p-color-icon-emphasis);
     }
   }
 
   &:active {
     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);
     }
   }