Font migration (#10630)

### WHY are these changes introduced? Fixes #10498 ### WHAT is this pull request doing? Handles automatic and manual migrations for font tokens Ran the following migration ``` npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230921230145 \ v12-styles-replace-custom-property-font \ 'src/**/*.scss' ``` ~Used the following regex to search for manually migrations~ Omitting manual migrations at this point ``` (?:--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-]) ```
Shopify · Sep 26, 2023 · 3987c0e · 3987c0e
1 parent 4ab148e
commit 3987c0e
Show file tree

Hide file tree

Showing 32 changed files with 137 additions and 132 deletions.
diff --git a/.changeset/quiet-pans-itch.md b/.changeset/quiet-pans-itch.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Migrated font custom properties
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -10,7 +10,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     --pc-action-list-image-size: 20px;
   }
   --pc-action-list-item-vertical-padding: calc(
-    (var(--pc-action-list-item-min-height) - var(--p-font-line-height-2)) / 2
+    (var(--pc-action-list-item-min-height) - var(--p-font-line-height-500)) / 2
   );
   // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

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

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,7 @@
   --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-2)) / 2
+    (var(--pc-mapped-actions-item-min-height) - var(--p-font-line-height-500)) / 2
   );
   // stylelint-enable
   margin-bottom: var(--p-space-300);

diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
@@ -278,9 +278,9 @@
   @include button-base;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include focus-ring($border-width: 2px);
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
   letter-spacing: initial;
   color: var(--p-color-text);
 

diff --git a/polaris-react/src/components/Button/Button.scss b/polaris-react/src/components/Button/Button.scss
@@ -2,21 +2,21 @@
 
 .Button {
   // stylelint-disable -- Polaris component custom properties
-  --pc-button-micro-min-height: var(--p-font-line-height-2);
-  --pc-button-slim-min-height: var(--p-font-line-height-4);
+  --pc-button-micro-min-height: var(--p-font-line-height-500);
+  --pc-button-slim-min-height: var(--p-font-line-height-700);
   --pc-button-large-min-height: 44px;
   --pc-button-vertical-padding: calc(
-    (36px - var(--p-font-line-height-2) - var(--p-space-050)) / 2
+    (36px - var(--p-font-line-height-500) - var(--p-space-050)) / 2
   );
   --pc-button-slim-vertical-padding: calc(
     (
-        var(--pc-button-slim-min-height) - var(--p-font-line-height-2) -
+        var(--pc-button-slim-min-height) - var(--p-font-line-height-500) -
           var(--p-space-050)
       ) / 2
   );
   --pc-button-large-vertical-padding: calc(
     (
-        var(--pc-button-large-min-height) - var(--p-font-line-height-2) -
+        var(--pc-button-large-min-height) - var(--p-font-line-height-500) -
           var(--p-space-050)
       ) / 2
   );
@@ -40,7 +40,7 @@
       inset -1px 0px 0px rgba(255, 255, 255, 0.25);
     --pc-button-large-min-height: 32px;
     --pc-button-large-vertical-padding: var(--p-space-200);
-    --pc-button-micro-min-height: var(--p-font-line-height-3);
+    --pc-button-micro-min-height: var(--p-font-line-height-600);
 
     box-shadow: var(--pc-button-shadow);
     transition: background-color 75ms var(--p-motion-ease-out),
@@ -115,20 +115,20 @@
 
 .Content {
   #{$se23} & {
-    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);
     transform: translateY(0);
     // stylelint-disable-next-line polaris/motion/declaration-property-unit-disallowed-list -- se23 temporary styles
     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);
+      line-height: var(--p-font-line-height-400);
     }
   }
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
   letter-spacing: initial;
   position: relative;
   display: flex;
@@ -819,8 +819,8 @@
     @include focus-ring;
 
     #{$se23} & {
-      line-height: var(--p-font-line-height-1);
-      font-size: var(--p-font-size-80-experimental);
+      line-height: var(--p-font-line-height-400);
+      font-size: var(--p-font-size-325);
       // stylelint-disable-next-line -- se23 override
       @include no-focus-ring;
     }
@@ -1017,8 +1017,8 @@
     #{$se23} & {
       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 {
@@ -1176,9 +1176,9 @@
   min-height: var(--pc-button-micro-min-height);
 
   .Content {
-    font-size: var(--p-font-size-100);
+    font-size: var(--p-font-size-350);
     font-weight: var(--p-font-weight-semibold);
-    line-height: var(--p-font-line-height-2);
+    line-height: var(--p-font-line-height-500);
   }
 
   #{$se23} & {
@@ -1197,7 +1197,7 @@
 
     .Content {
       font-size: var(--p-font-size-75);
-      line-height: var(--p-font-line-height-1);
+      line-height: var(--p-font-line-height-400);
     }
 
     #{$se23} & {
@@ -1226,7 +1226,7 @@
   .Content {
     font-size: var(--p-font-size-200);
     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;
   }
 
@@ -1239,7 +1239,7 @@
 
     // stylelint-disable selector-max-combinators -- se23 temporary styles
     .Content {
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
     }
     // stylelint-enable selector-max-combinators -- se23 temporary styles
   }

diff --git a/polaris-react/src/components/CheckableButton/CheckableButton.scss b/polaris-react/src/components/CheckableButton/CheckableButton.scss
@@ -5,7 +5,7 @@
   color: var(--p-color-text);
   font-size: var(--p-font-size-75);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-1);
+  line-height: var(--p-font-line-height-400);
   letter-spacing: initial;
   display: flex;
   align-items: center;

diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss
@@ -200,7 +200,7 @@
 
     #{$se23} & {
       font-weight: var(--p-font-weight-regular);
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
     }
   }
 }
@@ -325,7 +325,7 @@
 
     #{$se23} & {
       font-weight: var(--p-font-weight-regular);
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
       // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- Using hard coded px values to avoid cutting off the focus ring when overflow:hidden is applied via .Cell-truncate
       margin: 3px;
       padding: 3px;

diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -199,8 +199,8 @@
   text-align: center;
 
   #{$se23} & {
-    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);
     margin-top: 0;
   }

diff --git a/polaris-react/src/components/Filters/Filters.scss b/polaris-react/src/components/Filters/Filters.scss
@@ -106,7 +106,7 @@
 
   @media #{$p-breakpoints-md-up} {
     font-size: var(--p-font-size-75);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
     height: 24px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     padding: 0 0.375rem 0 var(--p-space-200);
@@ -278,7 +278,7 @@
 
       // stylelint-disable-next-line -- se23 overrides
       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/polaris-react/src/components/FooterHelp/FooterHelp.scss b/polaris-react/src/components/FooterHelp/FooterHelp.scss
@@ -13,9 +13,9 @@
 }
 
 .Text {
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
   border: none;
   letter-spacing: initial;
 }
diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss
@@ -313,9 +313,9 @@ $sidebar-breakpoint: 1200px;
     @include button-base;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include focus-ring($border-width: 1px);
-    font-size: var(--p-font-size-100);
+    font-size: var(--p-font-size-350);
     font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
     letter-spacing: initial;
     color: var(--p-color-text);
 

diff --git a/...onents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/...onents/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
@@ -5,7 +5,7 @@
   @include focus-ring;
   border-radius: var(--p-border-radius-100);
   padding: var(--p-space-050);
-  font-size: var(--p-font-size-100);
+  font-size: var(--p-font-size-350);
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -63,6 +63,6 @@
     margin-left: var(--p-space-050);
     font-size: var(--p-font-size-75);
     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
@@ -608,7 +608,7 @@ $loading-panel-height: 53px;
   font-weight: var(--p-font-weight-medium);
   color: var(--p-color-text-subdued);
   font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
 
   &:hover,
   &:focus {
@@ -1142,7 +1142,7 @@ $loading-panel-height: 53px;
     padding-left: var(--p-space-300);
     padding-top: var(--p-space-150);
     padding-bottom: var(--p-space-150);
-    line-height: var(--p-font-line-height-2);
+    line-height: var(--p-font-line-height-500);
   }
 }
 

diff --git a/polaris-react/src/components/KeyboardKey/KeyboardKey.scss b/polaris-react/src/components/KeyboardKey/KeyboardKey.scss
@@ -13,7 +13,7 @@ $key-base-dimension: 28px;
   box-shadow: 0 var(--p-space-025) 0 rgba(0, 0, 0, 0.15);
   border-radius: var(--p-border-radius-100);
   color: var(--p-color-text);
-  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;

diff --git a/polaris-react/src/components/Layout/Layout.scss b/polaris-react/src/components/Layout/Layout.scss
@@ -21,7 +21,7 @@ $relative-size: $primary-basis / $secondary-basis;
   @media print {
     body & {
       font-size: var(--p-font-size-75);
-      line-height: var(--p-font-line-height-1);
+      line-height: var(--p-font-line-height-400);
     }
 
     a,

diff --git a/polaris-react/src/components/LegacyCard/LegacyCard.scss b/polaris-react/src/components/LegacyCard/LegacyCard.scss
@@ -16,7 +16,7 @@
     // stylelint-disable-next-line -- se23 override custom heading font sizes
     h2,
     h3 {
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
     }
   }
 

diff --git a/polaris-react/src/components/MediaCard/MediaCard.scss b/polaris-react/src/components/MediaCard/MediaCard.scss
@@ -97,6 +97,6 @@
 .Description {
   #{$se23} & {
     font-size: var(--p-font-size-75);
-    line-height: var(--p-font-line-height-1);
+    line-height: var(--p-font-line-height-400);
   }
 }
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
@@ -426,7 +426,7 @@ $nav-max-width: 360px;
 .Badge {
   margin-left: var(--p-space-200);
   display: inline-flex;
-  height: var(--p-font-line-height-2);
+  height: var(--p-font-line-height-500);
   margin-top: calc(var(--p-space-200) + var(--p-space-050));
   margin-right: var(--p-space-400);
 
@@ -485,26 +485,26 @@ $nav-max-width: 360px;
   flex: 1 1 auto;
   font-size: var(--p-font-size-200);
   font-weight: var(--p-font-weight-medium);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-500);
   margin-top: calc(var(--p-space-200) + var(--p-space-050));
   margin-bottom: calc(var(--p-space-200) + var(--p-space-050));
 
   #{$se23} & {
-    font-size: var(--p-font-size-100);
+    font-size: var(--p-font-size-350);
     margin-top: var(--p-space-200);
     margin-bottom: var(--p-space-200);
   }
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-100);
-    line-height: var(--p-font-line-height-2);
+    font-size: var(--p-font-size-350);
+    line-height: var(--p-font-line-height-500);
     margin-top: var(--p-space-100);
     margin-bottom: var(--p-space-100);
 
     #{$se23} & {
       margin-top: var(--p-space-100);
       margin-bottom: var(--p-space-100);
-      font-size: var(--p-font-size-80-experimental);
+      font-size: var(--p-font-size-325);
     }
   }
 }
@@ -789,7 +789,7 @@ $nav-max-width: 360px;
     }
 
     @media #{$p-breakpoints-md-up} {
-      font-size: var(--p-font-size-100);
+      font-size: var(--p-font-size-350);
       line-height: 1;
       padding-left: var(--p-space-1000);
     }
@@ -975,8 +975,8 @@ $nav-max-width: 360px;
     margin-bottom: calc(var(--p-space-200) + var(--p-space-050));
 
     @media #{$p-breakpoints-md-down} {
-      font-size: var(--p-font-size-100);
-      line-height: var(--p-font-line-height-2);
+      font-size: var(--p-font-size-350);
+      line-height: var(--p-font-line-height-500);
     }
 
     @media #{$p-breakpoints-md-up} {