From 1ef71164c2ad77f05fb7608c6e86bd79308602fa Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 28 Sep 2023 18:41:55 -0400
Subject: [PATCH] Migrate `font` custom properties from v11 to v12 (#10762)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 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
---
 .changeset/empty-baboons-rule.md              |  5 ++
 .../guides/legacy-polaris-v8-public-api.scss  | 14 ++---
 polaris-react/playground/DetailsPage.scss     |  2 +-
 .../components/AppProvider/AppProvider.scss   |  4 +-
 .../src/components/Avatar/Avatar.scss         |  4 +-
 .../src/components/Button/Button.scss         | 37 ++++++------
 .../CheckableButton/CheckableButton.scss      |  2 +-
 .../src/components/DatePicker/DatePicker.scss |  8 +--
 .../components/FileUpload/FileUpload.scss     |  2 +-
 .../src/components/Filters/Filters.scss       |  6 +-
 .../DirectionButton/DirectionButton.scss      |  6 +-
 .../src/components/IndexTable/IndexTable.scss |  8 +--
 .../components/KeyboardKey/KeyboardKey.scss   |  6 +-
 .../src/components/Layout/Layout.scss         |  2 +-
 .../src/components/LegacyCard/LegacyCard.scss |  2 +-
 .../src/components/MediaCard/MediaCard.scss   |  4 +-
 .../src/components/Navigation/Navigation.scss | 10 ++--
 .../src/components/Navigation/_variables.scss |  6 +-
 .../Header/components/Title/Title.scss        |  4 +-
 .../components/Popover/Popover.stories.tsx    |  2 +-
 .../src/components/Select/Select.scss         | 12 ++--
 .../SelectAllActions/SelectAllActions.scss    |  4 +-
 .../components/SkeletonPage/SkeletonPage.scss |  4 +-
 polaris-react/src/components/Tabs/Tabs.scss   |  4 +-
 polaris-react/src/components/Tag/Tag.scss     | 18 +++---
 polaris-react/src/components/Text/Text.scss   | 57 ++++++++++---------
 .../src/components/TextField/TextField.scss   | 20 +++----
 .../TopBar/components/UserMenu/UserMenu.scss  |  8 +--
 .../src/styles/shared/_controls.scss          |  2 +-
 .../src/styles/shared/_typography.scss        |  2 +-
 .../popover-with-searchable-listbox.tsx       |  2 +-
 .../src/components/TOC/TOC.module.scss        |  8 +--
 polaris.shopify.com/src/styles/globals.scss   |  2 +-
 33 files changed, 145 insertions(+), 132 deletions(-)
 create mode 100644 .changeset/empty-baboons-rule.md

diff --git a/.changeset/empty-baboons-rule.md b/.changeset/empty-baboons-rule.md
new file mode 100644
index 00000000000..eb7c2328ea0
--- /dev/null
+++ 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
index 2c1ebed8f0c..5cd7d753575 100644
--- 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
index 83c4d32ee89..ab0e66a09dd 100644
--- 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
index 3cf39694a42..80a2109c083 100644
--- 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
index 89eb6fdb909..5cf12964008 100644
--- 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
index d469d4d817a..e1ce9a6a96a 100644
--- 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
index d0fa6126c63..d42acbadbd6 100644
--- 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
index 76cd473caab..5205a2ca57d 100644
--- 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
index c69b2f10a21..90579c36edd 100755
--- 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
index b38b322efd2..8034428f14c 100644
--- 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/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss b/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
index b35a58e277e..fbf64642e28 100644
--- a/polaris-react/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.scss
+++ b/polaris-react/src/components/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
index b2029ae3913..70883021775 100644
--- 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
index 428ee04f9fa..1155ef0f2d5 100644
--- 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
index ed0bf7a3539..3390ce52bac 100644
--- 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
index 18cf7052765..c659cbf1ded 100644
--- 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
index 7f932028ce2..163308dca36 100644
--- 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);
 }
diff --git a/polaris-react/src/components/Navigation/Navigation.scss b/polaris-react/src/components/Navigation/Navigation.scss
index 4130df51454..3254f6f079f 100644
--- a/polaris-react/src/components/Navigation/Navigation.scss
+++ b/polaris-react/src/components/Navigation/Navigation.scss
@@ -360,7 +360,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: var(--p-space-200);
   margin-right: var(--p-space-100);
 
@@ -400,15 +400,15 @@ $nav-max-width: 360px;
 
 .Text {
   flex: 1 1 auto;
-  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-2);
+  line-height: var(--p-font-line-height-500);
   margin-top: var(--p-space-200);
   margin-bottom: var(--p-space-200);
 
   @media #{$p-breakpoints-md-up} {
-    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);
     margin-top: var(--p-space-100);
     margin-bottom: var(--p-space-100);
   }
diff --git a/polaris-react/src/components/Navigation/_variables.scss b/polaris-react/src/components/Navigation/_variables.scss
index e9b0842fbc1..dc5a106d200 100644
--- a/polaris-react/src/components/Navigation/_variables.scss
+++ b/polaris-react/src/components/Navigation/_variables.scss
@@ -21,7 +21,7 @@ $nav-animation-variables: (
 @mixin nav-item-attributes {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include unstyled-button;
-  font-size: var(--p-font-size-200);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-semibold);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   line-height: 36px;
@@ -63,9 +63,9 @@ $nav-animation-variables: (
   }
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-200);
+    font-size: var(--p-font-size-400);
     font-weight: var(--p-font-weight-medium);
-    line-height: var(--p-font-line-height-5);
+    line-height: var(--p-font-line-height-800);
   }
 
   &::-moz-focus-inner {
diff --git a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
index aa34a0b8304..0edb7fa6f7c 100644
--- a/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
+++ b/polaris-react/src/components/Page/components/Header/components/Title/Title.scss
@@ -4,8 +4,8 @@
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
   font-weight: var(--p-font-weight-bold);
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-3);
+  font-size: var(--p-font-size-500);
+  line-height: var(--p-font-line-height-600);
 }
 
 .TitleWithSubtitle {
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 95406851458..8eef6c9a9f2 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -600,7 +600,7 @@ export function WithSearchableListbox() {
   const activator = (
     <div
       style={{
-        fontSize: 'var(--p-font-size-300)',
+        fontSize: 'var(--p-font-size-500)',
         color: 'var(--p-color-text)',
         borderBottom: '1px dashed var(--p-color-border)',
       }}
diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss
index 9af3da158be..36ff060adda 100644
--- a/polaris-react/src/components/Select/Select.scss
+++ b/polaris-react/src/components/Select/Select.scss
@@ -71,18 +71,18 @@
   padding: var(--p-space-150) var(--p-space-200) var(--p-space-150)
     var(--p-space-300);
 
-  font-size: var(--p-font-size-200);
-  line-height: var(--p-font-line-height-3);
+  font-size: var(--p-font-size-400);
+  line-height: var(--p-font-line-height-600);
 
   @media #{$p-breakpoints-md-up} {
-    line-height: var(--p-font-line-height-2);
-    font-size: var(--p-font-size-80-experimental);
+    line-height: var(--p-font-line-height-500);
+    font-size: var(--p-font-size-325);
   }
 
   @media #{$p-breakpoints-md-down} {
     // stylelint-disable-next-line selector-max-combinators, selector-max-type -- generated by polaris-migrator DO NOT COPY
     div > span {
-      font-size: var(--p-font-size-200);
+      font-size: var(--p-font-size-400);
       line-height: var(--p-font-line-height-500);
     }
   }
@@ -105,7 +105,7 @@
 
 .Input {
   // Even though the input is invisible, text styles apply to the options menu
-  font-size: var(--p-font-size-200);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
   line-height: var(--p-font-line-height-500);
   letter-spacing: initial;
diff --git a/polaris-react/src/components/SelectAllActions/SelectAllActions.scss b/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
index 0b9a8b37fcc..d4f8346f6c0 100644
--- a/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
+++ b/polaris-react/src/components/SelectAllActions/SelectAllActions.scss
@@ -25,12 +25,12 @@
 }
 
 .PaginatedSelectAll {
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-semibold);
 }
 
 .AllAction {
-  font-size: var(--p-font-size-75);
+  font-size: var(--p-font-size-300);
   font-weight: var(--p-font-weight-semibold);
   border: 0;
   background: none;
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
index f08b8e60d9a..319dcfafcde 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.scss
@@ -12,8 +12,8 @@ $primary-action-button-width: 6.25rem;
 
 .Title {
   font-weight: var(--p-font-weight-bold);
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-4);
+  font-size: var(--p-font-size-500);
+  line-height: var(--p-font-line-height-700);
 }
 
 .SkeletonTitle {
diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss
index 17f6534755c..b0254fa8d32 100644
--- a/polaris-react/src/components/Tabs/Tabs.scss
+++ b/polaris-react/src/components/Tabs/Tabs.scss
@@ -124,8 +124,8 @@
   }
 
   @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);
     height: 1.75rem;
   }
 }
diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss
index 12d38ecc153..e4e3b8af118 100644
--- a/polaris-react/src/components/Tag/Tag.scss
+++ b/polaris-react/src/components/Tag/Tag.scss
@@ -31,8 +31,8 @@ $button-size: 20px;
     padding: 0 calc(var(--p-space-100) + var(--p-space-050));
     background-color: var(--p-color-bg-strong);
     outline: var(--p-border-width-025) solid transparent;
-    font-size: var(--p-font-size-80-experimental);
-    line-height: var(--p-font-line-height-1);
+    font-size: var(--p-font-size-325);
+    line-height: var(--p-font-line-height-400);
 
     &:hover {
       background: var(--p-color-bg-fill-tertiary-hover);
@@ -60,7 +60,7 @@ $button-size: 20px;
     }
 
     @media #{$p-breakpoints-sm-up} {
-      font-size: var(--p-font-size-75);
+      font-size: var(--p-font-size-300);
     }
   }
 
@@ -88,8 +88,8 @@ $button-size: 20px;
 }
 
 .TagText {
-  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);
   min-height: $height;
   padding: 0;
   overflow: hidden;
@@ -98,7 +98,7 @@ $button-size: 20px;
   vertical-align: middle;
 
   @media #{$p-breakpoints-sm-up} {
-    font-size: var(--p-font-size-75);
+    font-size: var(--p-font-size-300);
   }
 }
 
@@ -164,11 +164,11 @@ $button-size: 20px;
   .LinkText {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     @include truncate;
-    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);
 
     @media #{$p-breakpoints-sm-up} {
-      font-size: var(--p-font-size-75);
+      font-size: var(--p-font-size-300);
     }
   }
 
diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
index aec2a62a2b4..b08f33bd69c 100644
--- a/polaris-react/src/components/Text/Text.scss
+++ b/polaris-react/src/components/Text/Text.scss
@@ -57,8 +57,8 @@
 }
 
 @mixin _headingSm {
-  font-size: var(--p-font-size-80-experimental);
-  line-height: var(--p-font-line-height-2);
+  font-size: var(--p-text-heading-sm-font-size);
+  line-height: var(--p-text-heading-sm-font-line-height);
 }
 
 .headingXs {
@@ -67,57 +67,57 @@
 }
 
 .headingSm {
-  font-weight: var(--p-font-weight-semibold);
+  font-weight: var(--p-text-heading-sm-font-weight);
   @include _headingSm;
 }
 
 .headingMd {
-  font-size: var(--p-font-size-100);
-  line-height: var(--p-font-line-height-2);
-  font-weight: var(--p-font-weight-semibold);
+  font-size: var(--p-text-heading-md-font-size);
+  line-height: var(--p-text-heading-md-font-line-height);
+  font-weight: var(--p-text-heading-md-font-weight);
 }
 
 .headingLg {
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-3);
+  font-size: var(--p-font-size-500);
+  line-height: var(--p-font-line-height-600);
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-300);
-    line-height: var(--p-font-line-height-600);
+    font-size: var(--p-text-heading-lg-font-size);
+    line-height: var(--p-text-heading-lg-font-line-height);
   }
 }
 
 .headingXl {
-  font-size: var(--p-font-size-300);
-  line-height: var(--p-font-line-height-3);
+  font-size: var(--p-font-size-500);
+  line-height: var(--p-font-line-height-600);
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-400);
-    line-height: var(--p-font-line-height-5);
+    font-size: var(--p-text-heading-xl-font-size);
+    line-height: var(--p-text-heading-xl-font-line-height);
   }
 }
 
 .heading2xl {
-  font-size: var(--p-font-size-400);
-  line-height: var(--p-font-line-height-5);
+  font-size: var(--p-font-size-600);
+  line-height: var(--p-font-line-height-800);
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-500);
-    line-height: var(--p-font-line-height-6);
+    font-size: var(--p-text-heading-2xl-font-size);
+    line-height: var(--p-text-heading-2xl-font-line-height);
   }
 }
 
 @mixin _heading3xl {
-  font-size: var(--p-font-size-500);
+  font-size: var(--p-font-size-750);
   line-height: var(--p-font-line-height-1000);
   font-weight: var(--p-font-weight-bold);
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-600);
-    line-height: var(--p-font-line-height-1200);
+    font-size: var(--p-text-heading-3xl-font-size);
+    line-height: var(--p-text-heading-3xl-font-line-height);
   }
 }
 
@@ -130,18 +130,21 @@
 }
 
 .bodySm {
-  font-size: var(--p-font-size-75);
-  line-height: var(--p-font-line-height-400);
+  font-size: var(--p-text-body-sm-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-sm-font-line-height);
 }
 
 .bodyMd {
-  font-size: var(--p-font-size-80-experimental);
-  line-height: var(--p-font-line-height-2);
+  font-size: var(--p-text-body-md-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-md-font-line-height);
 }
 
 .bodyLg {
-  font-size: var(--p-font-size-100);
-  line-height: var(--p-font-line-height-2);
+  font-size: var(--p-text-body-lg-font-size);
+  font-weight: var(--p-text-body-sm-font-weight);
+  line-height: var(--p-text-body-lg-font-line-height);
 }
 
 // font-weight must be below variant styles so
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
index 78b8e947b92..e7c6d8e3107 100644
--- a/polaris-react/src/components/TextField/TextField.scss
+++ b/polaris-react/src/components/TextField/TextField.scss
@@ -143,9 +143,9 @@ $spinner-icon-size: 12px;
 }
 
 .Input {
-  font-size: var(--p-font-size-200);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-3);
+  line-height: var(--p-font-line-height-600);
   letter-spacing: initial;
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -166,8 +166,8 @@ $spinner-icon-size: 12px;
   align-items: center;
 
   @media #{$p-breakpoints-md-up} {
-    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);
   }
 
   .Prefix + & {
@@ -273,10 +273,10 @@ $spinner-icon-size: 12px;
   flex: 0 0 auto;
   color: var(--p-color-text-secondary);
   user-select: none;
-  line-height: var(--p-font-line-height-3);
+  line-height: var(--p-font-line-height-600);
   @media #{$p-breakpoints-md-up} {
-    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);
   }
 }
 
@@ -318,11 +318,11 @@ $spinner-icon-size: 12px;
   margin: 0 var(--p-space-300) 0 var(--p-space-100);
   pointer-events: none;
   text-align: right;
-  line-height: var(--p-font-line-height-3);
+  line-height: var(--p-font-line-height-600);
 
   @media #{$p-breakpoints-md-up} {
-    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);
   }
 }
 
diff --git a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
index 95302e7fef2..f90dc035542 100644
--- a/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
+++ b/polaris-react/src/components/TopBar/components/UserMenu/UserMenu.scss
@@ -7,8 +7,8 @@
   padding: 0 var(--p-space-200) 0 10px;
 
   > p {
-    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);
   }
 
   @media #{$p-breakpoints-md-down} {
@@ -18,6 +18,6 @@
 
 .Message > p {
   color: var(--p-color-text-inverse-subdued);
-  font-size: var(--p-font-size-70-experimental);
-  line-height: var(--p-font-line-height-075-experimental);
+  font-size: var(--p-font-size-275);
+  line-height: var(--p-font-line-height-300);
 }
diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss
index 3b7425b63b7..11fd8df4e60 100644
--- a/polaris-react/src/styles/shared/_controls.scss
+++ b/polaris-react/src/styles/shared/_controls.scss
@@ -3,7 +3,7 @@
 }
 
 @function control-vertical-padding() {
-  @return calc((36px - var(--p-font-line-height-3) - var(--p-space-050)) / 2);
+  @return calc((36px - var(--p-font-line-height-600) - var(--p-space-050)) / 2);
 }
 
 @mixin control-backdrop($style: base) {
diff --git a/polaris-react/src/styles/shared/_typography.scss b/polaris-react/src/styles/shared/_typography.scss
index b446dc4f230..ee212016636 100644
--- a/polaris-react/src/styles/shared/_typography.scss
+++ b/polaris-react/src/styles/shared/_typography.scss
@@ -1,5 +1,5 @@
 @mixin text-style-input {
-  font-size: var(--p-font-size-200);
+  font-size: var(--p-font-size-400);
   font-weight: var(--p-font-weight-regular);
   line-height: var(--p-font-line-height-600);
   border: none;
diff --git a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
index 7f3e0044342..ca3517d79c7 100644
--- a/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/popover-with-searchable-listbox.tsx
@@ -180,7 +180,7 @@ function PopoverWithSearchableListboxExample() {
   const activator = (
     <div
       style={{
-        fontSize: 'var(--p-font-size-300)',
+        fontSize: 'var(--p-font-size-500)',
         color: 'var(--p-color-text)',
         borderBottom: '1px dashed var(--p-color-border)',
       }}
diff --git a/polaris.shopify.com/src/components/TOC/TOC.module.scss b/polaris.shopify.com/src/components/TOC/TOC.module.scss
index 5f1bd4b6d34..144aeeb4023 100644
--- a/polaris.shopify.com/src/components/TOC/TOC.module.scss
+++ b/polaris.shopify.com/src/components/TOC/TOC.module.scss
@@ -13,8 +13,8 @@
 
 .Header {
   color: var(--text-strong);
-  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-semibold);
 }
 
@@ -27,9 +27,9 @@
 .Link {
   color: var(--text-strong);
   display: block;
-  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-2);
+  line-height: var(--p-font-line-height-500);
   overflow: hidden;
   padding: var(--p-space-100) var(--p-space-200);
   text-overflow: ellipsis;
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
index cd0fb058ea7..6eaad5c19d7 100644
--- a/polaris.shopify.com/src/styles/globals.scss
+++ b/polaris.shopify.com/src/styles/globals.scss
@@ -335,7 +335,7 @@ button {
 
 .components-grid__title {
   font-weight: var(--p-font-weight-semibold);
-  line-height: var(--p-font-line-height-3);
+  line-height: var(--p-font-line-height-600);
   #{$notMarginConsideredHarmful} {
     margin: 0 !important;
     margin-bottom: var(--p-space-100) !important;