Migrate font custom properties from v11 to v12 (#10762)

### WHY are these changes introduced? Resolves #10532. Migrates `font` custom properties. Updates body and heading variants in `Text` components to use text composite tokens where applicable. > [!Important] > Font migration needed to be run in 4 sequential steps due to overlapping `font-size` token names. ### WHAT is this pull request doing? ## Step 1 ```script npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=1 ``` ```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 `font` custom properties from Polaris v11 to v12 — step [1/2/3/4]“ ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 1 across all file types </summary> ``` (?:--p-font-size-70-experimental|--p-font-size-80-experimental|--p-font-size-100|--p-font-size-700|--p-font-line-height-075-experimental|--p-font-line-height-1|--p-font-line-height-2|--p-font-line-height-3|--p-font-line-height-4|--p-font-line-height-5|--p-font-line-height-6|--p-font-line-height-7)(?![\w-]) ``` </details> ## Step 2 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=2 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 2 across all file types </summary> ``` (?:--p-font-size-500|--p-font-size-600)(?![\w-]) ``` </details> ## Step 3 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=3 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 3 across all file types </summary> </details> ``` (?:--p-font-size-300|--p-font-size-400)(?![\w-]) ``` </details> ## Step 4 ```script # Run migration npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \ v12-styles-replace-custom-property-font \ './**/*.scss' --step=4 # Repeat process in step 1 to commit automated migrations ``` ### Post-migration validation <details> <summary>[v12] Check RegExp for hardcoded <code>font</code> custom properties in step 4 across all file types </summary> ``` (?:--p-font-size-75|--p-font-size-200)(?![\w-]) ``` </details> #### Replacement maps | Deprecated CSS Custom Property | Replacement Value | | ---------------- | ----------------- | | `--p-font-size-70-experimental` | `--p-font-size-275` | | `--p-font-size-75` | `--p-font-size-300` | | `--p-font-size-80-experimental` | `--p-font-size-325` | | `--p-font-size-100` | `--p-font-size-350` | | `--p-font-size-200` | `--p-font-size-400` | | `--p-font-size-300` | `--p-font-size-500` | | `--p-font-size-400` | `--p-font-size-600` | | `--p-font-size-500` | `--p-font-size-750` | | `--p-font-size-600` | `--p-font-size-900` | | `--p-font-size-700` | `--p-font-size-1000` | | `--p-font-line-height-075-experimental` | `--p-font-line-height-300` | | `--p-font-line-height-1` | `--p-font-line-height-400` | | `--p-font-line-height-2` | `--p-font-line-height-500` | | `--p-font-line-height-3` | `--p-font-line-height-600` | | `--p-font-line-height-4` | `--p-font-line-height-700` | | `--p-font-line-height-5` | `--p-font-line-height-800` | | `--p-font-line-height-6` | `--p-font-line-height-1000` | | `--p-font-line-height-7` | `--p-font-line-height-1200` | ### 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
Shopify · Sep 28, 2023 · 1ef7116 · 1ef7116
1 parent 56fa276
commit 1ef7116
Show file tree

Hide file tree

Showing 33 changed files with 145 additions and 132 deletions.
diff --git a/.changeset/empty-baboons-rule.md b/.changeset/empty-baboons-rule.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Migrated `font` custom properties from v11 to v12
diff --git a/documentation/guides/legacy-polaris-v8-public-api.scss b/documentation/guides/legacy-polaris-v8-public-api.scss
@@ -1046,8 +1046,8 @@ $fixed-element-stacking-order: (
   );
   $border-radius: if(
     $size == 'wide',
-    var(--p-border-radius-200),
-    var(--p-border-radius-100)
+    var(--p-border-radius-2),
+    var(--p-border-radius-1)
   );
   $negative-offset: calc(-1 * #{$offset});
 
@@ -1330,7 +1330,7 @@ $nav-min-window: em(layout-width(page-with-nav));
   padding: $vertical-padding spacing();
   background: var(--p-surface);
   box-shadow: var(--p-shadow-button);
-  border-radius: var(--p-border-radius-100);
+  border-radius: var(--p-border-radius-1);
   color: var(--p-text);
   border: 1px solid var(--p-border-neutral-subdued);
   border-top-color: var(--p-border-subdued);
@@ -1562,7 +1562,7 @@ $nav-min-window: em(layout-width(page-with-nav));
     position: relative;
     border: var(--p-control-border-width) solid var(--p-border);
     background-color: var(--p-surface);
-    border-radius: var(--p-border-radius-100);
+    border-radius: var(--p-border-radius-1);
 
     &::before {
       content: '';
@@ -1571,7 +1571,7 @@ $nav-min-window: em(layout-width(page-with-nav));
       right: calc(-1 * var(--p-control-border-width));
       bottom: calc(-1 * var(--p-control-border-width));
       left: calc(-1 * var(--p-control-border-width));
-      border-radius: var(--p-border-radius-100);
+      border-radius: var(--p-border-radius-1);
       background-color: var(--p-interactive);
       opacity: 0;
       transform: scale(0.25);
@@ -2133,8 +2133,8 @@ $thumbnail-sizes: (
   height: 100%;
   display: block;
   width: border-width(thicker);
-  border-top-right-radius: var(--p-border-radius-100);
-  border-bottom-right-radius: var(--p-border-radius-100);
+  border-top-right-radius: var(--p-border-radius-1);
+  border-bottom-right-radius: var(--p-border-radius-1);
 }
 
 //

diff --git a/polaris-react/playground/DetailsPage.scss b/polaris-react/playground/DetailsPage.scss
@@ -10,7 +10,7 @@
 .ShopName {
   margin-left: var(--p-space-200);
   font-weight: var(--p-font-weight-semibold);
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   color: var(--p-color-text-inverse);
 }
 

diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -7,8 +7,8 @@
 
 html,
 body {
-  font-size: var(--p-font-size-80-experimental);
-  line-height: var(--p-font-line-height-2);
+  font-size: var(--p-font-size-325);
+  line-height: var(--p-font-line-height-500);
   font-weight: var(--p-font-weight-regular);
   letter-spacing: initial;
   color: var(--p-color-text);

diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
@@ -35,11 +35,11 @@
 }
 
 .Text {
-  font-size: var(--p-font-size-200);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
 
   &.long {
-    font-size: var(--p-font-size-75);
+    font-size: var(--p-font-size-300);
   }
 }
 

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -2,8 +2,8 @@
 
 .Button {
   // stylelint-disable -- Button custom properties
-  --pc-button-micro-min-height: var(--p-font-line-height-3);
-  --pc-button-slim-min-height: var(--p-font-line-height-4);
+  --pc-button-micro-min-height: var(--p-font-line-height-600);
+  --pc-button-slim-min-height: var(--p-font-line-height-700);
   --pc-button-large-min-height: 32px;
   --pc-button-vertical-padding: calc(
     (36px - var(--p-font-line-height-500) - var(--p-space-050)) / 2
@@ -67,9 +67,9 @@
 }
 
 .Content {
-  font-size: var(--p-font-size-80-experimental);
+  font-size: var(--p-font-size-325);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
   letter-spacing: initial;
   position: relative;
   display: flex;
@@ -82,13 +82,18 @@
   transition: transform 75ms cubic-bezier(0.19, 0.91, 0.38, 1);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-75);
-    line-height: var(--p-font-line-height-1);
+    font-size: var(--p-font-size-300);
+    line-height: var(--p-font-line-height-400);
   }
 
   .Button:not(.plain) & {
     width: 100%;
   }
+
+  // stylelint-disable-next-line selector-max-class -- override primary button font weight
+  .Button.primary & {
+    font-weight: var(--p-font-weight-semibold);
+  }
 }
 
 .textAlignLeft {
@@ -606,9 +611,9 @@
   > .Content {
     // stylelint-disable-next-line -- remove focus-ring mixing
     @include no-focus-ring;
-    font-size: var(--p-font-size-80-experimental);
+    font-size: var(--p-font-size-325);
     font-weight: var(--p-font-weight-regular);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
   }
 
   &:hover,
@@ -736,7 +741,7 @@
       calc(var(--p-space-300) * -1);
 
     > .Content {
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
     }
   }
 
@@ -755,8 +760,8 @@
   &.iconOnly {
     margin: 0;
     padding: 0;
-    min-height: var(--p-font-line-height-2);
-    min-width: var(--p-font-line-height-2);
+    min-height: var(--p-font-line-height-500);
+    min-width: var(--p-font-line-height-500);
 
     svg {
       fill: var(--p-color-icon-subdued);
@@ -864,9 +869,9 @@
   min-height: var(--pc-button-micro-min-height);
 
   .Content {
-    font-size: var(--p-font-size-80-experimental);
+    font-size: var(--p-font-size-325);
     font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-2);
+    line-height: var(--p-font-line-height-500);
   }
 
   @media #{$p-breakpoints-md-up} {
@@ -875,7 +880,7 @@
     min-height: var(--pc-button-micro-min-height);
 
     .Content {
-      font-size: var(--p-font-size-75);
+      font-size: var(--p-font-size-300);
       line-height: var(--p-font-line-height-400);
     }
   }
@@ -905,13 +910,13 @@
   // stylelint-enable polaris/conventions/polaris/custom-property-allowed-list
 
   .Content {
-    font-size: var(--p-font-size-80-experimental);
+    font-size: var(--p-font-size-325);
     font-weight: var(--p-font-weight-medium);
     line-height: var(--p-font-line-height-500);
     letter-spacing: initial;
 
     @media #{$p-breakpoints-md-up} {
-      line-height: var(--p-font-line-height-1);
+      line-height: var(--p-font-line-height-400);
     }
   }
 }

diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -3,7 +3,7 @@
 
 .CheckableButton {
   color: var(--p-color-text);
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-medium);
   line-height: var(--p-font-line-height-400);
   letter-spacing: initial;

diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -55,7 +55,7 @@
   border: none;
   border-radius: var(--p-border-radius-200);
   outline: none;
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   text-align: center;
   color: var(--p-color-text);
   cursor: pointer;
@@ -147,7 +147,7 @@
 .Weekday {
   padding: var(--p-space-200);
   background: transparent;
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-regular);
   color: var(--p-color-text-secondary);
   text-align: center;
@@ -170,8 +170,8 @@
   flex: 1 1 auto;
   padding-bottom: var(--p-space-100);
   text-align: center;
-  font-size: var(--p-font-size-80-experimental);
-  line-height: var(--p-font-line-height-2);
+  font-size: var(--p-font-size-325);
+  line-height: var(--p-font-line-height-500);
   font-weight: var(--p-font-weight-medium);
 }
 

diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.scss
@@ -29,7 +29,7 @@
   border: none;
   margin: 0;
   text-decoration: none;
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-semibold);
   line-height: 1;
   cursor: pointer;

diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
@@ -105,7 +105,7 @@
   }
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-75);
+    font-size: var(--p-font-size-300);
     line-height: var(--p-font-line-height-400);
     height: 24px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -238,7 +238,7 @@
   margin-left: var(--p-space-200);
 
   span {
-    font-size: var(--p-font-size-75);
+    font-size: var(--p-font-size-300);
     font-weight: var(--p-font-weight-medium);
   }
 }
@@ -249,7 +249,7 @@
     padding-right: var(--p-space-400);
 
     span {
-      font-size: var(--p-font-size-100);
+      font-size: var(--p-font-size-350);
       font-weight: var(--p-font-weight-medium);
     }
   }

diff --git a/...onents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/...onents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
@@ -6,7 +6,7 @@
   border-radius: var(--p-border-radius-200);
   padding: var(--p-space-100) var(--p-space-300) var(--p-space-100)
     var(--p-space-200);
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -41,7 +41,7 @@
   flex: 1;
   color: var(--p-color-text);
   margin-left: var(--p-space-050);
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
 }
diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -246,7 +246,7 @@ $loading-panel-height: 53px;
     .TableCell:last-child {
       color: var(--p-color-text-secondary);
       font-weight: var(--p-font-weight-medium);
-      font-size: var(--p-font-size-75);
+      font-size: var(--p-font-size-300);
       background-color: var(--p-color-bg-subdued);
       border-top: var(--p-border-width-025) solid var(--p-color-border);
       border-bottom: var(--p-border-width-025) solid var(--p-color-border);
@@ -470,7 +470,7 @@ $loading-panel-height: 53px;
   text-align: left;
   font-weight: var(--p-font-weight-medium);
   color: var(--p-color-text-secondary);
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   white-space: nowrap;
   border: 0;
 
@@ -539,7 +539,7 @@ $loading-panel-height: 53px;
   justify-content: center;
   font-weight: var(--p-font-weight-medium);
   color: var(--p-color-text-secondary);
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   line-height: var(--p-font-line-height-500);
 
   &:hover,
@@ -992,7 +992,7 @@ $loading-panel-height: 53px;
   background: var(--p-color-bg);
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
 }
 
 $scroll-bar-size: var(--p-space-200);

diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -12,7 +12,7 @@ $key-base-dimension: 28px;
   background: var(--p-color-bg-secondary-experimental);
   border-radius: var(--p-border-radius-100);
   color: var(--p-color-text-subdued);
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-medium);
   font-family: var(--p-font-family-sans);
   line-height: $key-base-dimension;
@@ -23,9 +23,9 @@ $key-base-dimension: 28px;
 
 .small {
   box-shadow: none;
-  line-height: var(--p-font-size-200);
+  line-height: var(--p-font-size-400);
   padding: var(--p-space-050) var(--p-space-100);
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   height: var(--p-space-500);
   min-width: var(--p-space-500);
 }
diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
@@ -16,7 +16,7 @@ $relative-size: $primary-basis / $secondary-basis;
 
   @media print {
     body & {
-      font-size: var(--p-font-size-75);
+      font-size: var(--p-font-size-300);
       line-height: var(--p-font-line-height-400);
     }
 

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -15,7 +15,7 @@
   // Override custom heading font sizes
   h2,
   h3 {
-    font-size: var(--p-font-size-80-experimental);
+    font-size: var(--p-font-size-325);
   }
 
   + .LegacyCard {

diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -63,6 +63,6 @@
 }
 
 .Description {
-  font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-1);
+  font-size: var(--p-font-size-300);
+  line-height: var(--p-font-line-height-400);
 }