Shopify · laurkim · Sep 25, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
diff --git a/.changeset/chilled-pets-worry.md b/.changeset/chilled-pets-worry.md
@@ -0,0 +1,8 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+'polaris.shopify.com': minor
+'@shopify/stylelint-polaris': minor
+---
+
+Migrated `space` custom properties from `v11` to `v12`
diff --git a/polaris-react/.storybook/GridOverlay/GridOverlay.css b/polaris-react/.storybook/GridOverlay/GridOverlay.css
@@ -11,9 +11,9 @@
   bottom: 0;
   right: 0;
   display: grid;
-  gap: var(--p-space-3);
+  gap: var(--p-space-300);
   grid-template-columns: repeat(4, 1fr);
-  padding: 0 var(--p-space-3);
+  padding: 0 var(--p-space-300);
   margin: 0 auto;
   background-color: var(--p-color-bg-critical-strong);
   opacity: 0.25;
@@ -23,7 +23,7 @@
 @media (min-width: 768px) {
   .GridOverlay {
     grid-template-columns: repeat(12, 1fr);
-    padding: 0 var(--p-space-8);
+    padding: 0 var(--p-space-800);
   }
 }
 

diff --git a/polaris-react/playground/DetailsPage.scss b/polaris-react/playground/DetailsPage.scss
@@ -3,12 +3,12 @@
 .ContextControl {
   display: flex;
   align-items: center;
-  padding: 0 var(--p-space-3);
+  padding: 0 var(--p-space-300);
   height: $top-bar-height;
 }
 
 .ShopName {
-  margin-left: var(--p-space-2);
+  margin-left: var(--p-space-200);
   font-weight: var(--p-font-weight-semibold);
   font-size: var(--p-font-size-100);
   color: var(--p-color-text);

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.stories.tsx
@@ -17,19 +17,19 @@ export default {
 export function All() {
   return (
     <>
-      <VerticalStack gap="4">
+      <VerticalStack gap="400">
         <Text as="h2" variant="headingXl">
           Default
         </Text>
         <Default />
-        <Box paddingBlockEnd="3" />
+        <Box paddingBlockEnd="300" />
       </VerticalStack>
-      <VerticalStack gap="4">
+      <VerticalStack gap="400">
         <Text as="h2" variant="headingXl">
           With account connected
         </Text>
         <WithAccountConnected />
-        <Box paddingBlockEnd="3" />
+        <Box paddingBlockEnd="300" />
       </VerticalStack>
     </>
   );

diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -78,7 +78,7 @@ export function AccountConnection({
   const termsOfServiceMarkup = termsOfService ? (
     <Box
       paddingBlockStart={
-        polarisSummerEditions2023 && breakpoints.mdUp ? '4' : '5'
+        polarisSummerEditions2023 && breakpoints.mdUp ? '400' : '500'
       }
     >
       {termsOfService}
@@ -92,9 +92,9 @@ export function AccountConnection({
   return (
     <Card>
       <SettingAction action={actionElement}>
-        <HorizontalStack gap="4">
+        <HorizontalStack gap="400">
           {avatarMarkup}
-          <VerticalStack gap={polarisSummerEditions2023 ? '1' : '2'}>
+          <VerticalStack gap={polarisSummerEditions2023 ? '100' : '200'}>
             {titleMarkup}
             {detailsMarkup}
           </VerticalStack>

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -1,11 +1,11 @@
 @import '../../styles/common';
 
-$indented-item-margin: calc(var(--p-space-5) + var(--p-space-05));
+$indented-item-margin: calc(var(--p-space-500) + var(--p-space-050));
 $indented-item-width: calc(100% - #{$indented-item-margin});
 
 .Item {
   // stylelint-disable -- Polaris component custom properties
-  --pc-action-list-item-min-height: var(--p-space-10);
+  --pc-action-list-item-min-height: var(--p-space-1000);
   &.default {
     --pc-action-list-image-size: 20px;
   }
@@ -25,7 +25,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   text-decoration: none;
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
+  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-200);
   border-radius: var(--p-border-radius-1);
   border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
@@ -34,8 +34,8 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     // stylelint-disable-next-line -- se23
     @include focus-ring($size: 'wide');
     /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-    --pc-action-list-item-min-height: var(--p-space-8);
-    padding: var(--p-space-1_5-experimental);
+    --pc-action-list-item-min-height: var(--p-space-800);
+    padding: var(--p-space-150);
     border-radius: var(--p-border-radius-2);
     align-items: center;
     display: flex;
@@ -183,11 +183,11 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     &::before {
       content: '';
       position: absolute;
-      top: calc(var(--p-space-3) * -1);
+      top: calc(var(--p-space-300) * -1);
       bottom: 0;
       left: 0;
       border-left: var(--p-border-width-1) solid var(--p-color-border);
-      margin-left: calc(var(--p-space-1_5-experimental) * -1);
+      margin-left: calc(var(--p-space-150) * -1);
     }
   }
 

diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx
@@ -29,7 +29,7 @@ export default {
 
 export function All() {
   return (
-    <VerticalStack gap="16">
+    <VerticalStack gap="1600">
       <InAPopover />
       <WithIconsOrImage />
       <WithAnIconAndASuffix />

diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -143,7 +143,10 @@ export function ActionList({
   return (
     <>
       {(allowFiltering || filterActions) && hasManyActions && isFilterable && (
-        <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
+        <Box
+          padding="200"
+          paddingBlockEnd={totalFilteredActions > 0 ? '0' : '200'}
+        >
           <SearchField
             placeholder={i18n.translate(
               'Polaris.ActionList.SearchField.placeholder',

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -115,7 +115,7 @@ export function Item({
   const contentElement = (
     <HorizontalStack
       blockAlign="center"
-      gap={polarisSummerEditions2023 ? '1_5-experimental' : '4'}
+      gap={polarisSummerEditions2023 ? '150' : '400'}
       wrap={!truncate}
     >
       {prefixMarkup}

diff --git a/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss b/polaris-react/src/components/ActionList/components/SearchField/SearchField.scss
@@ -2,11 +2,11 @@
 
 $icon-size: 20px;
 $new-input-height: 36px;
-$search-icon-width: calc(#{$icon-size} + var(--p-space-4));
+$search-icon-width: calc(#{$icon-size} + var(--p-space-400));
 
 $icon-size-se23: 18px;
 $new-input-height-se23: 32px;
-$search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
+$search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-300));
 
 .SearchField {
   // stylelint-disable -- Polaris component custom properties
@@ -141,7 +141,7 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-search-field-icon);
   top: 50%;
-  left: var(--p-space-2);
+  left: var(--p-space-200);
   display: flex;
   height: $icon-size;
   pointer-events: none;
@@ -170,12 +170,12 @@ $search-icon-width-se23: calc(#{$icon-size-se23} + var(--p-space-3));
   border: none;
   appearance: none;
   background: transparent;
-  padding: var(--p-space-2);
+  padding: var(--p-space-200);
 
   #{$se23} & {
     position: absolute;
-    right: var(--p-space-1);
-    padding: var(--p-space-1);
+    right: var(--p-space-100);
+    padding: var(--p-space-100);
   }
 
   svg {

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -79,16 +79,16 @@ export function Section({
         <Box
           {...(polarisSummerEditions2023
             ? {
-                paddingBlockStart: '3',
-                paddingBlockEnd: '1',
-                paddingInlineStart: '3',
-                paddingInlineEnd: '3',
+                paddingBlockStart: '300',
+                paddingBlockEnd: '100',
+                paddingInlineStart: '300',
+                paddingInlineEnd: '300',
               }
             : {
-                paddingBlockStart: '4',
-                paddingInlineStart: '4',
-                paddingBlockEnd: '2',
-                paddingInlineEnd: '4',
+                paddingBlockStart: '400',
+                paddingInlineStart: '400',
+                paddingBlockEnd: '200',
+                paddingInlineEnd: '400',
               })}
         >
           <Text
@@ -99,7 +99,7 @@ export function Section({
           </Text>
         </Box>
       ) : (
-        <Box padding="2" paddingInlineEnd="1_5-experimental">
+        <Box padding="200" paddingInlineEnd="150">
           {section.title}
         </Box>
       );
@@ -123,14 +123,14 @@ export function Section({
       {titleMarkup}
       <Box
         as={polarisSummerEditions2023 ? 'div' : 'ul'}
-        padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
+        padding={polarisSummerEditions2023 ? '150' : '200'}
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         {...(sectionRole && !polarisSummerEditions2023 && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
         {polarisSummerEditions2023 ? (
           <VerticalStack
-            gap="1"
+            gap="100"
             as="ul"
             {...(sectionRole && {role: sectionRole})}
           >
@@ -150,7 +150,7 @@ export function Section({
       borderColor="border-subdued"
       {...(!isFirst && {borderBlockStartWidth: '1'})}
       {...(!section.title && {
-        paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
+        paddingBlockStart: polarisSummerEditions2023 ? '150' : '200',
       })}
     >
       {sectionMarkup}

diff --git a/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.scss b/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.scss
@@ -1,6 +1,6 @@
 @import '../../../../styles/common';
 
 .Details {
-  margin-top: calc(-1 * var(--p-space-4));
-  padding: var(--p-space-4);
+  margin-top: calc(-1 * var(--p-space-400));
+  padding: var(--p-space-400);
 }
diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.scss
@@ -29,7 +29,7 @@
         @include no-focus-ring;
         outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
-        outline-offset: var(--p-space-05);
+        outline-offset: var(--p-space-050);
         background: var(--p-color-bg-strong-active);
       }
       /* stylelint-disable-next-line selector-max-combinators -- se23 */

diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -2,7 +2,7 @@
 
 .SecondaryAction {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-secondary-action-button-spacing: var(--p-space-3);
+  --pc-secondary-action-button-spacing: var(--p-space-300);
   // stylelint-disable declaration-no-important -- generated by polaris-migrator DO NOT COPY
   a,
   button {
@@ -59,7 +59,7 @@
     button {
       border: none;
       min-height: 28px;
-      padding: var(--p-space-1) var(--p-space-3);
+      padding: var(--p-space-100) var(--p-space-300);
       background-color: var(--p-color-bg-strong) !important;
       border-radius: var(--p-border-radius-2) !important;
       /* stylelint-disable-next-line selector-max-combinators -- se23 */
@@ -77,7 +77,7 @@
         @include no-focus-ring;
         outline: var(--p-border-width-2) solid
           var(--p-color-border-interactive-focus);
-        outline-offset: var(--p-space-05);
+        outline-offset: var(--p-space-050);
       }
       // stylelint-disable-next-line selector-max-combinators -- se23
       &[aria-disabled='true'] {

diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx
@@ -180,7 +180,7 @@ export const WithSummerEditionsFeature = {
     const CheckFeature = () => {
       return (
         <Card>
-          <VerticalStack gap="4">
+          <VerticalStack gap="400">
             <Text
               as="h2"
               variant={polarisSummerEditions2023 ? 'headingXl' : 'bodyMd'}

diff --git a/polaris-react/src/components/Autocomplete/Autocomplete.scss b/polaris-react/src/components/Autocomplete/Autocomplete.scss
@@ -3,11 +3,11 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: var(--p-space-2) var(--p-space-4);
+  padding: var(--p-space-200) var(--p-space-400);
 }
 
 .SectionWrapper {
   > *:not(:first-child) {
-    margin-top: var(--p-space-2);
+    margin-top: var(--p-space-200);
   }
 }
diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.scss
@@ -3,12 +3,12 @@
 .ActionContainer {
   // stylelint-disable -- Polaris component custom properties
   --pc-mapped-actions-image-size: 20px;
-  --pc-mapped-actions-item-min-height: var(--p-space-10);
+  --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-2)) / 2
   );
   // stylelint-enable
-  margin-bottom: var(--p-space-3);
+  margin-bottom: var(--p-space-300);
 }
 
 [data-focused] {
@@ -45,17 +45,17 @@
   text-align: left;
   cursor: pointer;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: var(--pc-mapped-actions-item-vertical-padding) var(--p-space-2);
+  padding: var(--pc-mapped-actions-item-vertical-padding) var(--p-space-200);
   // stylelint-disable-next-line -- using pre-existing private pc token
   margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
-    calc(-1 * var(--p-space-2));
+    calc(-1 * var(--p-space-200));
   border-radius: var(--p-border-radius-1);
 
   #{$se23} & {
     border-radius: var(--p-border-radius-2);
     // stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 overrides
     margin: calc(-1 * var(--pc-mapped-actions-item-vertical-padding))
-      calc(-1 * var(--p-space-3));
+      calc(-1 * var(--p-space-300));
   }
 
   &:hover {
@@ -144,10 +144,10 @@
   // We need the negative margin to ensure that the image does not set
   // the minimum height of the action item.
   // stylelint-disable -- generated by polaris-migrator DO NOT COPY
-  margin: calc(-0.5 * var(--pc-mapped-actions-image-size)) var(--p-space-4)
+  margin: calc(-0.5 * var(--pc-mapped-actions-image-size)) var(--p-space-400)
     calc(-0.5 * var(--pc-mapped-actions-image-size)) 0;
   #{$se23} & {
-    margin-right: var(--p-space-2);
+    margin-right: var(--p-space-200);
   }
   // stylelint-enable
   background-size: cover;
@@ -159,7 +159,7 @@
 }
 
 .Suffix {
-  margin-left: var(--p-space-4);
+  margin-left: var(--p-space-400);
 
   svg {
     fill: var(--p-color-icon);