[Text] Add support for bodyXs variant and fix headingLg font weight (#11094)

### WHY are these changes introduced?

Updates references to font tokens in the Text component variants table.
Adds support for new `bodyXs` variant.
Fixes incorrect font weight for `headingLg` variant.

### WHAT is this pull request doing?

Migrates font token values in Text docs from v11 to v12 at
`/components/typography/text#variant-tokens`.
Adds support for new `bodyXs` variant.
Fixes incorrect font weight for `headingLg` variant.
    <details>
      <summary>Text variants table — before</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/80980337-e7d6-4f1e-b559-8530de72a7ef"
alt="Text variants table — before">
    </details>
    <details>
      <summary>Text variants table — after</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/76fc79b1-929e-4e35-80ef-919cbd39c0ed"
alt="Text variants table — after">
    </details>

### How to 🎩

🌀
[Spin](https://admin.web.text-headingxl-font-change.lo-kim.us.spin.dev/store/shop1)

[Storybook](https://5d559397bae39100201eedc1-wekthcljix.chromatic.com/?path=/story/all-components-text--variants)
[Prod
storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-text--variants)

🖥 [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)
- [x] 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
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Sara Hill <sara.hill@shopify.com>

Author: laurkim

.changeset/weak-turkeys-relate.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Added support for `bodyXs` variant and fixed font weight for `headingLg` variant in `Text` component.
+Updated references to font tokens from Polaris v11 to v12 in `Text` component documentation

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

@@ -75,7 +75,7 @@
 .headingLg {
   font-size: var(--p-font-size-500);
   line-height: var(--p-font-line-height-600);
-  font-weight: var(--p-font-weight-bold);
+  font-weight: var(--p-font-weight-semibold);
 
   @media (--p-breakpoints-md-up) {
     font-size: var(--p-text-heading-lg-font-size);
@@ -120,6 +120,12 @@
   @include _heading3xl;
 }
 
+.bodyXs {
+  font-size: var(--p-text-body-xs-font-size);
+  font-weight: var(--p-text-body-xs-font-weight);
+  line-height: var(--p-text-body-xs-font-line-height);
+}
+
 .bodySm {
   font-size: var(--p-text-body-sm-font-size);
   font-weight: var(--p-text-body-sm-font-weight);

polaris-react/src/components/Text/Text.stories.tsx

@@ -35,6 +35,9 @@ export const Variants = () => (
     <Text as="p" variant="bodySm">
       Text with BodySm variant
     </Text>
+    <Text as="p" variant="bodyXs">
+      Text with BodyXs variant
+    </Text>
     <Text as="strong" variant="bodySm">
       Text as a strong tag
     </Text>

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

@@ -26,6 +26,7 @@ type Variant =
   | 'headingXl'
   | 'heading2xl'
   | 'heading3xl'
+  | 'bodyXs'
   | 'bodySm'
   | 'bodyMd'
   | 'bodyLg';

polaris.shopify.com/content/components/typography/text.md

@@ -68,15 +68,16 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font)
 
 | Variant      | Font size token     | px value | rem value | Font line height token | Font weight token          | Reponsive |
 | ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | --------- |
-| `heading3xl` | `--p-font-size-600` | 32       | 2         | `--p-line-height-6`    | `--p-font-weight-semibold` | Yes       |
-| `heading2xl` | `--p-font-size-500` | 28       | 1.75      | `--p-line-height-5`    | `--p-font-weight-semibold` | Yes       |
-| `headingXl`  | `--p-font-size-400` | 24       | 1.5       | `--p-line-height-4`    | `--p-font-weight-semibold` | Yes       |
-| `headingLg`  | `--p-font-size-300` | 20       | 1.25      | `--p-line-height-3`    | `--p-font-weight-semibold` | Yes       |
-| `headingMd`  | `--p-font-size-200` | 16       | 1         | `--p-line-height-3`    | `--p-font-weight-semibold` | No        |
-| `headingSm`  | `--p-font-size-100` | 14       | 0.875     | `--p-line-height-2`    | `--p-font-weight-semibold` | No        |
-| `bodyLg`     | `--p-font-size-200` | 16       | 1         | `--p-line-height-2`    | `--p-font-weight-regular`  | No        |
-| `bodyMd`     | `--p-font-size-100` | 14       | 0.875     | `--p-line-height-2`    | `--p-font-weight-regular`  | No        |
-| `bodySm`     | `--p-font-size-75`  | 12       | 0.75      | `--p-line-height-1`    | `--p-font-weight-regular`  | No        |
+| `heading3xl` | `--p-font-size-900` | 36       | 2.25      | `--p-line-height-1200` | `--p-font-weight-bold`     | Yes       |
+| `heading2xl` | `--p-font-size-750` | 30       | 1.875     | `--p-line-height-1000` | `--p-font-weight-bold`     | Yes       |
+| `headingXl`  | `--p-font-size-600` | 24       | 1.5       | `--p-line-height-800`  | `--p-font-weight-bold`     | Yes       |
+| `headingLg`  | `--p-font-size-500` | 20       | 1.25      | `--p-line-height-600`  | `--p-font-weight-semibold` | Yes       |
+| `headingMd`  | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-semibold` | No        |
+| `headingSm`  | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-semibold` | No        |
+| `bodyLg`     | `--p-font-size-350` | 14       | 0.875     | `--p-line-height-500`  | `--p-font-weight-regular`  | No        |
+| `bodyMd`     | `--p-font-size-325` | 13       | 0.8125    | `--p-line-height-500`  | `--p-font-weight-regular`  | No        |
+| `bodySm`     | `--p-font-size-300` | 12       | 0.75      | `--p-line-height-400`  | `--p-font-weight-regular`  | No        |
+| `bodyXs`     | `--p-font-size-275` | 11       | 0.6875    | `--p-line-height-300`  | `--p-font-weight-regular`  | No        |
 
 ---
 

polaris.shopify.com/pages/examples/text-body.tsx

@@ -9,14 +9,18 @@ function TextExample() {
         Shopify POS is the easiest way to sell your products in person.
         Available for iPad, iPhone, and Android.
       </Text>
-      <p>
+      <Text variant="bodyMd" as="p">
         Shopify POS is the easiest way to sell your products in person.
         Available for iPad, iPhone, and Android.
-      </p>
+      </Text>
       <Text variant="bodySm" as="p">
         Shopify POS is the easiest way to sell your products in person.
         Available for iPad, iPhone, and Android.
       </Text>
+      <Text variant="bodyXs" as="p">
+        Shopify POS is the easiest way to sell your products in person.
+        Available for iPad, iPhone, and Android.
+      </Text>
     </LegacyStack>
   );
 }