diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v13-to-v14.mdx b/polaris.shopify.com/content/version-guides/migrating-from-v13-to-v14.mdx index 7f046dee3a9..5d131794657 100644 --- a/polaris.shopify.com/content/version-guides/migrating-from-v13-to-v14.mdx +++ b/polaris.shopify.com/content/version-guides/migrating-from-v13-to-v14.mdx @@ -204,25 +204,116 @@ To replace deprecated `font` custom properties, you can run the [v14-styles-repl code={{ title: 'Check RegExp for hardcoded font custom properties across all file types', - code: String.raw`(?:--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-densest|--p-font-line-height-1200|--p-text-heading-3xl-font-family|--p-text-heading-3xl-font-size|--p-text-heading-3xl-font-weight|--p-text-heading-3xl-font-letter-spacing|--p-text-heading-3xl-font-line-height(?![\w-])`, + code: String.raw`(?:--p-font-size-800|--p-font-size-900|--p-font-size-1000|--p-font-letter-spacing-densest|--p-font-line-height-1200)(?![\w-])`, }} /> -| Deprecated Token | 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` | -| `--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-2xl-font-letter-spacing` | -| `--p-text-heading-3xl-font-line-height` | `--p-text-heading-2xl-font-line-height` | +| Deprecated Token | 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` | + + + +### Text + +To replace deprecated `text` custom properties, you can run the [v14-styles-replace-custom-property-text](/tools/polaris-migrator#v14-styles-replace-custom-property-text) migration then validate with RegExp. Please reference the [recommended migration workflow](#migration-workflow) section below for additional migration support. + + + +```diff +- font-size: var(--p-text-heading-xl-font-size); ++ font-size: var(--p-font-size-600); +``` + + + + + + + After migrating, use the following RegExp to check for any additional + instances of `text` custom properties across all file types: + + + + + +| Deprecated Token | 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` |