Migrate `font` custom properties from v11 to v12 #10762

laurkim · 2023-09-28T17:59:04Z

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

npx @shopify/polaris-migrator@0.0.0-snapshot-release-20230928163203 \
v12-styles-replace-custom-property-font \
'./**/*.scss' \
--step=1

# 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

[v12] Check RegExp for hardcoded font custom properties in step 1 across all file types

(?:--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-])

Step 2

# 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

[v12] Check RegExp for hardcoded font custom properties in step 2 across all file types

(?:--p-font-size-500|--p-font-size-600)(?![\w-])

Step 3

# 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

[v12] Check RegExp for hardcoded font custom properties in step 3 across all file types

(?:--p-font-size-300|--p-font-size-400)(?![\w-])

Step 4

# 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

[v12] Check RegExp for hardcoded font custom properties in step 4 across all file types

(?:--p-font-size-75|--p-font-size-200)(?![\w-])

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
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

laurkim · 2023-09-28T18:42:02Z

documentation/guides/legacy-polaris-v8-public-api.scss

-    var(--p-border-radius-200),
-    var(--p-border-radius-100)
+    var(--p-border-radius-2),
+    var(--p-border-radius-1)


These are changes from the previous border migration.
I inadvertently updated this file in the border migration PR so I just reverted the changes in this PR.

lgriffee

💯🚢✨🎉

lgriffee

❤️

bernardojoaogarcia

Could we verify the font size and line height for heading-xl, 2xl & 3xl. I'm not sure they're correct in this PR

bernardojoaogarcia · 2023-09-28T19:13:00Z

heading-3xl

font-size-900 (36px)
font-line-height-1200 (48px)
font-weight-bold
font-letter-spacing-densest
font-family-sans

heading-2xl

font-size-750 (30px)
font-line-height-1000 (40px)
font-weight-bold
font-letter-spacing-denser
font-family-sans

heading-xl

font-size-600 (24px)
font-line-height-800 (32px)
font-weight-bold
font-letter-spacing-dense
font-family-sans

heading-lg

font-size-500 (20px)
font-line-height-600 (24px)
font-weight-semibold
font-letter-spacing-dense
font-family-sans

laurkim · 2023-09-28T20:01:29Z

polaris-react/src/components/Text/Text.scss

-    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);


I only added the headingLg composite tokens for breakpoints-md-up since responsiveness was out of scope when these tokens were created.

laurkim · 2023-09-28T20:01:41Z

polaris-react/src/components/Text/Text.scss

-    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);


I only added the headingXl composite tokens for breakpoints-md-up since responsiveness was out of scope when these tokens were created.

laurkim · 2023-09-28T20:01:55Z

polaris-react/src/components/Text/Text.scss

-    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);


I only added the heading2xl composite tokens for breakpoints-md-up since responsiveness was out of scope when these tokens were created.

laurkim · 2023-09-28T20:02:04Z

polaris-react/src/components/Text/Text.scss

-    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);


I only added the heading3xl composite tokens for breakpoints-md-up since responsiveness was out of scope when these tokens were created.

lgriffee

✨🙌🏻

bernardojoaogarcia · 2023-09-28T21:07:59Z

@sarahill aren't we supposed to make an exception for the primary buttons font-weight? Instead of font-weight-medium isn't it supposed to be font-weight-semibold? Every other button is medium.

laurkim · 2023-09-28T21:56:58Z

@sarahill aren't we supposed to make an exception for the primary buttons font-weight? Instead of font-weight-medium isn't it supposed to be font-weight-semibold? Every other button is medium.

@bernardojoaogarcia @sarahill I updated Button primary variant to use font-weight-semibold. I'm going to merge this since it has approvals to unblock other migrations on the next branch but if we decide to change primary Button font weight from the changes on this branch, let me know and I can fix forward 👍

bernardojoaogarcia · 2023-09-29T14:01:58Z

Thanks! @laurkim

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @shopify/polaris@12.0.0-beta.2 ### Major Changes - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` ### Minor Changes - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 ## @shopify/polaris-tokens@8.0.0-beta.1 ### Major Changes - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values ### Minor Changes - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer ## @shopify/stylelint-polaris@14.1.2-beta.1 ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

@chloerice

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

### WHY are these changes introduced? Resolves Shopify#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

laurkim added 4 commits September 28, 2023 13:18

Undo migration changes in legacy v8 docs

897ba04

Migrate font custom properties from v11 to v12 — STEP 1

cf4aa3f

Manually migrate font custom properties from v11 to v12 — STEP 1

2029c20

Migrate font custom properties from v11 to v12 — STEP 2

42f44da

laurkim self-assigned this Sep 28, 2023

laurkim added the #gsd:36565 label Sep 28, 2023

laurkim marked this pull request as ready for review September 28, 2023 18:23

laurkim requested a review from a team as a code owner September 28, 2023 18:23

laurkim requested review from aveline, sarahill and lgriffee and removed request for a team September 28, 2023 18:23

laurkim commented Sep 28, 2023

View reviewed changes

lgriffee approved these changes Sep 28, 2023

View reviewed changes

laurkim added 4 commits September 28, 2023 14:55

Migrate font custom properties from v11 to v12 — STEP 3

441ec94

Manually migrate font custom properties from v11 to v12 — STEP 3

416c71e

Migrate font custom properties from v11 to v12 — STEP 4

a25e605

Add changeset

7a08f6d

laurkim force-pushed the lo/migrate-font-custom-properties branch from b53dad1 to 7a08f6d Compare September 28, 2023 18:58

laurkim requested a review from a team as a code owner September 28, 2023 18:58

laurkim requested a review from lgriffee September 28, 2023 19:02

lgriffee approved these changes Sep 28, 2023

View reviewed changes

bernardojoaogarcia reviewed Sep 28, 2023

View reviewed changes

[Text] Update heading variants to use composite tokens

cf22acd

laurkim commented Sep 28, 2023

View reviewed changes

laurkim requested a review from bernardojoaogarcia September 28, 2023 20:06

laurkim requested a review from lgriffee September 28, 2023 20:06

lgriffee approved these changes Sep 28, 2023

View reviewed changes

[Text] Fix headingXs variant styles

0322c36

laurkim force-pushed the lo/migrate-font-custom-properties branch from 2bdda21 to 0322c36 Compare September 28, 2023 20:15

sarahill approved these changes Sep 28, 2023

View reviewed changes

[Button] Update primary button font weight

3fef8af

laurkim force-pushed the lo/migrate-font-custom-properties branch from 544c091 to 3fef8af Compare September 28, 2023 22:03

laurkim merged commit 1ef7116 into next Sep 28, 2023
11 of 12 checks passed

laurkim deleted the lo/migrate-font-custom-properties branch September 28, 2023 22:41

shopify-github-actions-access bot mentioned this pull request Sep 28, 2023

Version Packages (beta) #10718

Merged

shopify-github-actions-access bot mentioned this pull request Oct 9, 2023

Version Packages #10931

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate `font` custom properties from v11 to v12 #10762

Migrate `font` custom properties from v11 to v12 #10762

laurkim commented Sep 28, 2023 •

edited

Loading

laurkim Sep 28, 2023 •

edited

Loading

lgriffee left a comment

lgriffee left a comment

bernardojoaogarcia left a comment

bernardojoaogarcia commented Sep 28, 2023 •

edited

Loading

laurkim Sep 28, 2023

laurkim Sep 28, 2023

laurkim Sep 28, 2023

laurkim Sep 28, 2023

lgriffee left a comment

bernardojoaogarcia commented Sep 28, 2023 •

edited

Loading

laurkim commented Sep 28, 2023 •

edited

Loading

bernardojoaogarcia commented Sep 29, 2023

Migrate font custom properties from v11 to v12 #10762

Migrate font custom properties from v11 to v12 #10762

Conversation

laurkim commented Sep 28, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

Step 1

Post-migration validation

Step 2

Post-migration validation

Step 3

Post-migration validation

Step 4

Post-migration validation

Replacement maps

How to 🎩

🎩 checklist

laurkim Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

lgriffee left a comment

Choose a reason for hiding this comment

lgriffee left a comment

Choose a reason for hiding this comment

bernardojoaogarcia left a comment

Choose a reason for hiding this comment

bernardojoaogarcia commented Sep 28, 2023 • edited Loading

laurkim Sep 28, 2023

Choose a reason for hiding this comment

laurkim Sep 28, 2023

Choose a reason for hiding this comment

laurkim Sep 28, 2023

Choose a reason for hiding this comment

laurkim Sep 28, 2023

Choose a reason for hiding this comment

lgriffee left a comment

Choose a reason for hiding this comment

bernardojoaogarcia commented Sep 28, 2023 • edited Loading

laurkim commented Sep 28, 2023 • edited Loading

bernardojoaogarcia commented Sep 29, 2023

Migrate `font` custom properties from v11 to v12 #10762

Migrate `font` custom properties from v11 to v12 #10762

laurkim commented Sep 28, 2023 •

edited

Loading

laurkim Sep 28, 2023 •

edited

Loading

bernardojoaogarcia commented Sep 28, 2023 •

edited

Loading

bernardojoaogarcia commented Sep 28, 2023 •

edited

Loading

laurkim commented Sep 28, 2023 •

edited

Loading