Skip to content

Commit

Permalink
Remove Text heading2xl and associated tokens from v14 font migrat…
Browse files Browse the repository at this point in the history 
…ion (Shopify#11813)

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1529

### WHAT is this pull request doing?
This PR updates the migration for deprecated `font` custom properties
based on the undeprecation of heading2xl.

#### v14-styles-replace-custom-property-font
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
| ~`--p-font-size-750`~  | ~`--p-font-size-600`~ | 
| `--p-font-size-800`  | ~`--p-font-size-600`~<br>`--p-font-size-750` | 
| `--p-font-size-900` | ~`--p-font-size-600`~<br>`--p-font-size-750` | 
| `--p-font-size-1000` | ~`--p-font-size-600`~<br>`--p-font-size-750` | 
| ~`--p-font-letter-spacing-denser`~ | ~`--p-font-letter-spacing-dense`~
|
| `--p-font-letter-spacing-densest` |
~`--p-font-letter-spacing-dense`~<br>`--p-font-letter-spacing-denser` |
| ~`--p-font-line-height-1000`~ | ~`--p-font-line-height-800`~ | 
| `--p-font-line-height-1200` |
~`--p-font-line-height-800`~<br>`--p-font-line-height-1000` |
|`--p-text-heading-3xl-font-family`|
~`--p-text-heading-xl-font-family`~<br>`--p-text-heading-2xl-font-family`|
|`--p-text-heading-3xl-font-size`|
~`--p-text-heading-xl-font-size`~<br>`--p-text-heading-2xl-font-size`|
| `--p-text-heading-3xl-font-weight`|
~`--p-text-heading-xl-font-weight`~<br>`--p-text-heading-2xl-font-weight`|
|`--p-text-heading-3xl-font-letter-spacing`|
~`--p-text-heading-xl-font-letter-spacing`~<br>`--p-text-heading-2xl-font-letter-spacing`|
| `--p-text-heading-3xl-font-line-height`|
~`--p-text-heading-xl-font-line-height`~<br>`--p-text-heading-2xl-font-line-height`|
|~`--p-text-heading-2xl-font-family`~|
~`--p-text-heading-xl-font-family`~|
| ~`--p-text-heading-2xl-font-size`~| ~`--p-text-heading-xl-font-size`~|
| ~`--p-text-heading-2xl-font-weight`~|
~`--p-text-heading-xl-font-weight`~|
| ~`--p-text-heading-2xl-font-letter-spacing`~|
~`--p-text-heading-xl-font-letter-spacing`~|
|~`--p-text-heading-2xl-font-line-height`~|
~`--p-text-heading-xl-font-line-height`~|

>[!NOTE]
>Major version upgrade guidance is updated [on a separate PR on the v13
branch](Shopify#11815).
  • Loading branch information
@lgriffee
lgriffee authored Apr 2, 2024
1 parent bb14b7b commit 0bce3da
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 46 deletions.
5 changes: 5 additions & 0 deletions .changeset/twenty-chefs-float.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris-migrator': patch
---

Removed `Text` `heading2xl` and associated tokens from v14 font migration
8 changes: 0 additions & 8 deletions ...les-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.input.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
.font {
font-size: var(--p-font-size-750);
font-size: var(--p-font-size-800);
font-size: var(--p-font-size-900);
font-size: var(--p-font-size-1000);
font-size: var(--p-text-heading-2xl-font-size);
font-size: var(--p-text-heading-3xl-font-size);
letter-spacing: var(--p-font-letter-spacing-denser);
letter-spacing: var(--p-font-letter-spacing-densest);
letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
letter-spacing: var(--p-text-heading-3xl-font-letter-spacing);
line-height: var(--p-font-line-height-1000);
line-height: var(--p-font-line-height-1200);
line-height: var(--p-text-heading-2xl-font-line-height);
line-height: var(--p-text-heading-3xl-font-line-height);
font-family: var(--p-text-heading-2xl-font-family);
font-family: var(--p-text-heading-3xl-font-family);
font-weight: var(--p-text-heading-2xl-font-weight);
font-weight: var(--p-text-heading-3xl-font-weight);
}
28 changes: 10 additions & 18 deletions ...es-replace-custom-property-font/tests/v14-styles-replace-custom-property-font.output.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
.font {
font-size: var(--p-font-size-600);
font-size: var(--p-font-size-600);
font-size: var(--p-font-size-600);
font-size: var(--p-font-size-600);
font-size: var(--p-text-heading-xl-font-size);
font-size: var(--p-text-heading-xl-font-size);
letter-spacing: var(--p-font-letter-spacing-dense);
letter-spacing: var(--p-font-letter-spacing-dense);
letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
letter-spacing: var(--p-text-heading-xl-font-letter-spacing);
line-height: var(--p-font-line-height-800);
line-height: var(--p-font-line-height-800);
line-height: var(--p-text-heading-xl-font-line-height);
line-height: var(--p-text-heading-xl-font-line-height);
font-family: var(--p-text-heading-xl-font-family);
font-family: var(--p-text-heading-xl-font-family);
font-weight: var(--p-text-heading-xl-font-weight);
font-weight: var(--p-text-heading-xl-font-weight);
font-size: var(--p-font-size-750);
font-size: var(--p-font-size-750);
font-size: var(--p-font-size-750);
font-size: var(--p-text-heading-2xl-font-size);
letter-spacing: var(--p-font-letter-spacing-denser);
letter-spacing: var(--p-text-heading-2xl-font-letter-spacing);
line-height: var(--p-font-line-height-1000);
line-height: var(--p-text-heading-2xl-font-line-height);
font-family: var(--p-text-heading-2xl-font-family);
font-weight: var(--p-text-heading-2xl-font-weight);
}
30 changes: 10 additions & 20 deletions polaris-migrator/src/migrations/v14-styles-replace-custom-property-font/transform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,17 @@ export default function transformer(fileInfo: FileInfo, _: API) {

const replacementMaps = {
'/.+/': {
'--p-font-size-750': '--p-font-size-600',
'--p-font-size-800': '--p-font-size-600',
'--p-font-size-900': '--p-font-size-600',
'--p-font-size-1000': '--p-font-size-600',
'--p-font-letter-spacing-denser': '--p-font-letter-spacing-dense',
'--p-font-letter-spacing-densest': '--p-font-letter-spacing-dense',
'--p-font-line-height-1000': '--p-font-line-height-800',
'--p-font-line-height-1200': '--p-font-line-height-800',
'--p-text-heading-3xl-font-family': '--p-text-heading-xl-font-family',
'--p-text-heading-3xl-font-size': '--p-text-heading-xl-font-size',
'--p-text-heading-3xl-font-weight': '--p-text-heading-xl-font-weight',
'--p-font-size-800': '--p-font-size-750',
'--p-font-size-900': '--p-font-size-750',
'--p-font-size-1000': '--p-font-size-750',
'--p-font-letter-spacing-densest': '--p-font-letter-spacing-denser',
'--p-font-line-height-1200': '--p-font-line-height-1000',
'--p-text-heading-3xl-font-family': '--p-text-heading-2xl-font-family',
'--p-text-heading-3xl-font-size': '--p-text-heading-2xl-font-size',
'--p-text-heading-3xl-font-weight': '--p-text-heading-2xl-font-weight',
'--p-text-heading-3xl-font-letter-spacing':
'--p-text-heading-xl-font-letter-spacing',
'--p-text-heading-2xl-font-letter-spacing',
'--p-text-heading-3xl-font-line-height':
'--p-text-heading-xl-font-line-height',
'--p-text-heading-2xl-font-family': '--p-text-heading-xl-font-family',
'--p-text-heading-2xl-font-size': '--p-text-heading-xl-font-size',
'--p-text-heading-2xl-font-weight': '--p-text-heading-xl-font-weight',
'--p-text-heading-2xl-font-letter-spacing':
'--p-text-heading-xl-font-letter-spacing',
'--p-text-heading-2xl-font-line-height':
'--p-text-heading-xl-font-line-height',
'--p-text-heading-2xl-font-line-height',
},
};

0 comments on commit 0bce3da

Please sign in to comment.