Skip to content

Conversation

lgriffee
Copy link
Contributor

@lgriffee lgriffee commented Apr 3, 2024

WHY are these changes introduced?

Related to Shopify/polaris-internal#1554
Related to Shopify/polaris-internal#1555

WHAT is this pull request doing?

Adds migration guidance for new text token migration and updates existing documentation for font token migration.

localhost_3000_version-guides_migrating-from-v12-to-v13

@lgriffee lgriffee added the #gsd:40131 Polaris Responsive Text Styles label Apr 3, 2024
@lgriffee lgriffee self-assigned this Apr 3, 2024
@sam-b-rose sam-b-rose changed the base branch from v13.0.0 to v14.0.0 April 4, 2024 13:32
Copy link
Member

@sam-b-rose sam-b-rose left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢

lgriffee added a commit that referenced this pull request Apr 5, 2024
### WHY are these changes introduced?

Related to https://github.com/Shopify/polaris-internal/issues/1554
Fixes https://github.com/Shopify/polaris-internal/issues/1555

We need migrations for semantic tokens associated with the removal of
the text token group.

### WHAT is this pull request doing?

This PR creates a migration for deprecated `text` custom properties in
v14 using the generic codemod
[`styles-replace-custom-property`](#8265).

#### v14-styles-replace-custom-property-text
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--p-text-heading-3xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-3xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-3xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-3xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-3xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-2xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-2xl-font-size`|`--p-font-size-750`|
|`--p-text-heading-2xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-2xl-font-letter-spacing`|`--p-font-letter-spacing-denser`|
|`--p-text-heading-2xl-font-line-height`|`--p-font-line-height-1000`|
|`--p-text-heading-xl-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xl-font-size`|`--p-font-size-600`|
|`--p-text-heading-xl-font-weight`|`--p-font-weight-bold`|

|`--p-text-heading-xl-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-xl-font-line-height`|`--p-font-line-height-800`|
|`--p-text-heading-lg-font-family`|`--p-font-family-sans`|
|`--p-text-heading-lg-font-size`|`--p-font-size-500`|
|`--p-text-heading-lg-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-lg-font-letter-spacing`|`--p-font-letter-spacing-dense`|
|`--p-text-heading-lg-font-line-height`|`--p-font-line-height-600`|
|`--p-text-heading-md-font-family`|`--p-font-family-sans`|
|`--p-text-heading-md-font-size`|`--p-font-size-350`|
|`--p-text-heading-md-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-sm-font-family`|`--p-font-family-sans`|
|`--p-text-heading-sm-font-size`|`--p-font-size-325`|
|`--p-text-heading-sm-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-sm-font-line-height`|`--p-font-line-height-500`|
|`--p-text-heading-xs-font-family`|`--p-font-family-sans`|
|`--p-text-heading-xs-font-size`|`--p-font-size-300`|
|`--p-text-heading-xs-font-weight`|`--p-font-weight-semibold`|

|`--p-text-heading-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-heading-xs-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-lg-font-family`|`--p-font-family-sans`|
|`--p-text-body-lg-font-size`|`--p-font-size-350`|
|`--p-text-body-lg-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-lg-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-lg-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-md-font-family`|`--p-font-family-sans`|
|`--p-text-body-md-font-size`|`--p-font-size-325`|
|`--p-text-body-md-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-md-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-md-font-line-height`|`--p-font-line-height-500`|
|`--p-text-body-sm-font-family`|`--p-font-family-sans`|
|`--p-text-body-sm-font-size`|`--p-font-size-300`|
|`--p-text-body-sm-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-sm-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-sm-font-line-height`|`--p-font-line-height-400`|
|`--p-text-body-xs-font-family`|`--p-font-family-sans`|
|`--p-text-body-xs-font-size`|`--p-font-size-275`|
|`--p-text-body-xs-font-weight`|`--p-font-weight-regular`|

|`--p-text-body-xs-font-letter-spacing`|`--p-font-letter-spacing-normal`|
|`--p-text-body-xs-font-line-height`|`--p-font-line-height-300`|

It also updates the existing v14-styles-replace-custom-property-font
migration to remove any text tokens.

#### v14-styles-replace-custom-property-font
| Deprecated CSS Custom Property | Replacement Value |
| -- | -- | 
|`--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`|

>[!NOTE]
>Major version upgrade guidance is located [on a separate PR on the v13
branch](#11832).
@lgriffee lgriffee merged commit d58c7df into v14.0.0 Apr 5, 2024
@lgriffee lgriffee deleted the text-migration-guidance branch April 5, 2024 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40131 Polaris Responsive Text Styles
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants