From 56463fa837b69b80a12c1800425fbe42417a330f Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 28 Sep 2023 19:04:53 -0400
Subject: [PATCH 1/3] [Text] Remove `headingXs` and `heading4xl` types on
 `variant` prop

---
 polaris-react/src/components/Text/Text.scss | 9 ---------
 polaris-react/src/components/Text/Text.tsx  | 2 --
 2 files changed, 11 deletions(-)

diff --git a/polaris-react/src/components/Text/Text.scss b/polaris-react/src/components/Text/Text.scss
index b08f33bd69c..1fa0888f7ca 100644
--- a/polaris-react/src/components/Text/Text.scss
+++ b/polaris-react/src/components/Text/Text.scss
@@ -61,11 +61,6 @@
   line-height: var(--p-text-heading-sm-font-line-height);
 }
 
-.headingXs {
-  font-weight: var(--p-font-weight-semibold);
-  @include _headingSm;
-}
-
 .headingSm {
   font-weight: var(--p-text-heading-sm-font-weight);
   @include _headingSm;
@@ -125,10 +120,6 @@
   @include _heading3xl;
 }
 
-.heading4xl {
-  @include _heading3xl;
-}
-
 .bodySm {
   font-size: var(--p-text-body-sm-font-size);
   font-weight: var(--p-text-body-sm-font-weight);
diff --git a/polaris-react/src/components/Text/Text.tsx b/polaris-react/src/components/Text/Text.tsx
index 8f90e22c9f1..feb6f8c38a6 100644
--- a/polaris-react/src/components/Text/Text.tsx
+++ b/polaris-react/src/components/Text/Text.tsx
@@ -20,14 +20,12 @@ type Element =
   | 'legend';
 
 type Variant =
-  | 'headingXs'
   | 'headingSm'
   | 'headingMd'
   | 'headingLg'
   | 'headingXl'
   | 'heading2xl'
   | 'heading3xl'
-  | 'heading4xl'
   | 'bodySm'
   | 'bodyMd'
   | 'bodyLg';

From beeaea0b97c47844a31b4ab8ea00231f2017a369 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 28 Sep 2023 19:05:54 -0400
Subject: [PATCH 2/3] Manually migrate `Text` variant `headingXs` to
 `headingSm`

---
 .../src/components/Avatar/Avatar.stories.tsx       | 14 +++++++-------
 .../src/components/Badge/Badge.stories.tsx         |  8 ++++----
 .../src/components/Divider/Divider.stories.tsx     |  8 ++++----
 .../Listbox/components/Header/Header.tsx           |  2 +-
 .../components/Header/tests/Header.test.tsx        |  2 +-
 .../src/components/OptionList/OptionList.tsx       |  2 +-
 .../RangeSlider/components/DualThumb/DualThumb.tsx |  4 ++--
 .../components/SingleThumb/SingleThumb.tsx         |  2 +-
 .../src/components/Sheet/Sheet.stories.tsx         |  2 +-
 polaris-react/src/components/Text/Text.stories.tsx |  3 ---
 .../content/components/deprecated/subheading.md    |  2 +-
 .../content/components/typography/text.md          |  3 +--
 polaris.shopify.com/content/design/typography.md   |  4 ++--
 .../pages/examples/divider-with-border-color.tsx   |  8 ++++----
 .../legacy-card-with-custom-react-node-title.tsx   |  2 +-
 .../examples/sheet-with-searchable-listbox.tsx     |  2 +-
 .../pages/examples/text-heading.tsx                |  3 ---
 17 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
index 8c34070dc60..402150552f4 100644
--- a/polaris-react/src/components/Avatar/Avatar.stories.tsx
+++ b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -64,7 +64,7 @@ export function All() {
       <Box paddingBlockEnd="200">
         <BlockStack gap="300">
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               Default
             </Text>
             <InlineStack gap="200" blockAlign="center">
@@ -74,7 +74,7 @@ export function All() {
             </InlineStack>
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With customer
             </Text>
             <InlineStack gap="200" blockAlign="center">
@@ -84,7 +84,7 @@ export function All() {
             </InlineStack>
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With image
             </Text>
             <InlineStack gap="200" blockAlign="center">
@@ -92,25 +92,25 @@ export function All() {
             </InlineStack>
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With icon (all styles)
             </Text>
             <IconColorsSizes />
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With default initials (all styles)
             </Text>
             <InitialsColorsSizes />
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With long initials (all styles)
             </Text>
             <InitialsLong />
           </BlockStack>
           <BlockStack gap="200">
-            <Text as="h2" variant="headingXs">
+            <Text as="h2" variant="headingSm">
               With long and wide initials
             </Text>
             <BlockStack gap="200">
diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx
index bf3b8fc726e..297371bd60c 100644
--- a/polaris-react/src/components/Badge/Badge.stories.tsx
+++ b/polaris-react/src/components/Badge/Badge.stories.tsx
@@ -139,7 +139,7 @@ export function All() {
               Size: {sizeLabel}
             </Text>
             <BlockStack gap="200">
-              <Text as="h2" variant="headingXs">
+              <Text as="h2" variant="headingSm">
                 Tone only
               </Text>
               <InlineStack gap="200">
@@ -155,7 +155,7 @@ export function All() {
               </InlineStack>
             </BlockStack>
             <BlockStack gap="200">
-              <Text as="h2" variant="headingXs">
+              <Text as="h2" variant="headingSm">
                 Tone with progress
               </Text>
               {progressEntries.map(([progress]) => (
@@ -176,7 +176,7 @@ export function All() {
             {/* Remove `size` condition when micro icons are available */}
             {size === 'large' && (
               <BlockStack gap="200">
-                <Text as="h2" variant="headingXs">
+                <Text as="h2" variant="headingSm">
                   Tone with icon
                 </Text>
                 <InlineStack gap="200">
@@ -195,7 +195,7 @@ export function All() {
             )}
             {/* TODO: Re-enable the following examples when designs are available (post se23) */}
             {/* <BlockStack gap="200">
-              <Text as="h2" variant="headingXs">
+              <Text as="h2" variant="headingSm">
                 Tone with icon only
               </Text>
               <InlineStack gap="200">
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
index 9d608e78642..2fae94e32ff 100644
--- a/polaris-react/src/components/Divider/Divider.stories.tsx
+++ b/polaris-react/src/components/Divider/Divider.stories.tsx
@@ -13,19 +13,19 @@ export function Default() {
 export function WithBorderStyles() {
   return (
     <BlockStack gap="500">
-      <Text as="h1" variant="headingXs">
+      <Text as="h1" variant="headingSm">
         Default
       </Text>
       <Divider />
-      <Text as="h1" variant="headingXs">
+      <Text as="h1" variant="headingSm">
         Border
       </Text>
       <Divider borderColor="border" />
-      <Text as="h1" variant="headingXs">
+      <Text as="h1" variant="headingSm">
         Border inverse
       </Text>
       <Divider borderColor="border-inverse" />
-      <Text as="h1" variant="headingXs">
+      <Text as="h1" variant="headingSm">
         Transparent
       </Text>
       <Divider borderColor="transparent" />
diff --git a/polaris-react/src/components/Listbox/components/Header/Header.tsx b/polaris-react/src/components/Listbox/components/Header/Header.tsx
index 41049db27c3..6168e361ca8 100644
--- a/polaris-react/src/components/Listbox/components/Header/Header.tsx
+++ b/polaris-react/src/components/Listbox/components/Header/Header.tsx
@@ -20,7 +20,7 @@ export function Header({children}: HeaderProps) {
         paddingBlockEnd="200"
         paddingInlineEnd="400"
       >
-        <Text as="span" variant="headingXs" tone="subdued">
+        <Text as="span" variant="headingSm" tone="subdued">
           {children}
         </Text>
       </Box>
diff --git a/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx
index 9cf3b0f1b0a..4bd74722425 100644
--- a/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx
+++ b/polaris-react/src/components/Listbox/components/Header/tests/Header.test.tsx
@@ -28,7 +28,7 @@ describe('Header', () => {
     expect(header).toContainReactComponent(Box);
     expect(header.find(Box)).toContainReactComponent(Text, {
       as: 'span',
-      variant: 'headingXs',
+      variant: 'headingSm',
       tone: 'subdued',
     });
   });
diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx
index 859fc7f8c89..c4b2b153424 100644
--- a/polaris-react/src/components/OptionList/OptionList.tsx
+++ b/polaris-react/src/components/OptionList/OptionList.tsx
@@ -130,7 +130,7 @@ export function OptionList({
             paddingInlineEnd="150"
             borderColor="border-subdued"
           >
-            <Text as={titleLevel} variant="headingXs">
+            <Text as={titleLevel} variant="headingSm">
               {title}
             </Text>
           </Box>
diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
index d192986f30c..53741f76a83 100644
--- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
+++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
@@ -190,7 +190,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
           }}
         >
           <div className={styles.OutputBubble}>
-            <Text as="span" variant="headingXs" alignment="center">
+            <Text as="span" variant="headingSm" alignment="center">
               {value[0]}
             </Text>
           </div>
@@ -208,7 +208,7 @@ export class DualThumb extends Component<DualThumbProps, State> {
           }}
         >
           <div className={styles.OutputBubble}>
-            <Text as="span" variant="headingXs" alignment="center">
+            <Text as="span" variant="headingSm" alignment="center">
               {value[1]}
             </Text>
           </div>
diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
index 57bd7097b58..28b777f881c 100644
--- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
+++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx
@@ -66,7 +66,7 @@ export function SingleThumb(props: SingleThumbProps) {
   const outputMarkup = !disabled && output && (
     <output htmlFor={id} className={styles.Output}>
       <div className={styles.OutputBubble}>
-        <Text as="span" variant="headingXs" alignment="center">
+        <Text as="span" variant="headingSm" alignment="center">
           {clampedValue}
         </Text>
       </div>
diff --git a/polaris-react/src/components/Sheet/Sheet.stories.tsx b/polaris-react/src/components/Sheet/Sheet.stories.tsx
index 5239fa0281e..16515063dc3 100644
--- a/polaris-react/src/components/Sheet/Sheet.stories.tsx
+++ b/polaris-react/src/components/Sheet/Sheet.stories.tsx
@@ -470,7 +470,7 @@ export function WithSearchableListbox() {
                 marginBottom: 'var(--p-space-200)',
               }}
             >
-              <Text as="h3" variant="headingXs" tone="subdued">
+              <Text as="h3" variant="headingSm" tone="subdued">
                 Action
               </Text>
               <Button
diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx
index 1d644343ab3..746777dfc8e 100644
--- a/polaris-react/src/components/Text/Text.stories.tsx
+++ b/polaris-react/src/components/Text/Text.stories.tsx
@@ -29,9 +29,6 @@ export const Variants = () => (
     <Text as="h6" variant="headingSm">
       Text with HeadingSm variant
     </Text>
-    <Text as="h6" variant="headingXs">
-      Text with HeadingXs variant
-    </Text>
     <Text as="p" variant="bodyLg">
       Text with BodyLg variant
     </Text>
diff --git a/polaris.shopify.com/content/components/deprecated/subheading.md b/polaris.shopify.com/content/components/deprecated/subheading.md
index a555f887635..5edf5a88ec6 100644
--- a/polaris.shopify.com/content/components/deprecated/subheading.md
+++ b/polaris.shopify.com/content/components/deprecated/subheading.md
@@ -33,7 +33,7 @@ Subheadings are used for the title of any sub-sections in top-level page section
 
 ```diff
 - <Subheading>Accounts</Subheading>
-+ <Text variant="headingXs" as="h3">Accounts</Text>
++ <Text variant="headingSm" as="h3">Accounts</Text>
 ```
 
 ---
diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md
index b497e2215b5..c3b73d3b8bb 100644
--- a/polaris.shopify.com/content/components/typography/text.md
+++ b/polaris.shopify.com/content/components/typography/text.md
@@ -75,7 +75,6 @@ Each variant uses a predetermined combination of the [font tokens](/tokens/font)
 | `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        |
-| `headingXs`  | `--p-font-size-75`  | 12       | 0.75      | `--p-line-height-1`    | `--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        |
@@ -127,7 +126,7 @@ These are suggested replacements for existing text style components, but ultimat
 
 ```diff
 - <Subheading>Accounts</Subheading>
-+ <Text variant="headingXs" as="h3">Accounts</Text>
++ <Text variant="headingSm" as="h3">Accounts</Text>
 ```
 
 ### Caption
diff --git a/polaris.shopify.com/content/design/typography.md b/polaris.shopify.com/content/design/typography.md
index e3f6eca1587..c5cfbec9051 100644
--- a/polaris.shopify.com/content/design/typography.md
+++ b/polaris.shopify.com/content/design/typography.md
@@ -123,7 +123,7 @@ Heading styles are used to create various levels of hierarchy on the page. These
 
 ![An image showing how heading styles are applied](/images/design/typography/text-heading-example-01@2x.png)
 
-`headingXs` - `headingLg` styles are most commonly used for card, section, or page titles.
+`headingSm` - `headingLg` styles are most commonly used for card, section, or page titles.
 
 ![An image showing how large heading styles are applied](/images/design/typography/text-heading-example-02@2x.png)
 
@@ -131,7 +131,7 @@ Heading styles are used to create various levels of hierarchy on the page. These
 
 Large heading styles, `headingLg` - `heading4xl`, are responsive and will change size at different breakpoints.
 
-Small heading styles, `headingXs` - `headingMd`, and body styles will remain the same size regardless of breakpoint unless specified. You can choose to adjust the size of these styles at specific breakpoints when needed. For instance, you may need to increase the size of important body text on smaller screens.
+Small heading styles, `headingSm` - `headingMd`, and body styles will remain the same size regardless of breakpoint unless specified. You can choose to adjust the size of these styles at specific breakpoints when needed. For instance, you may need to increase the size of important body text on smaller screens.
 
 <video width="100%" height="auto" controls autoPlay muted loop>
   <source
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
index 7881ab807f0..c6a8eea60cc 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
+++ b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
@@ -8,19 +8,19 @@ function DividerWithBorderColorExample() {
   return (
     <Card>
       <BlockStack gap="500">
-        <Text as="h1" variant="headingXs">
+        <Text as="h1" variant="headingSm">
           Default
         </Text>
         <Divider />
-        <Text as="h1" variant="headingXs">
+        <Text as="h1" variant="headingSm">
           Border
         </Text>
         <Divider borderColor="border" />
-        <Text as="h1" variant="headingXs">
+        <Text as="h1" variant="headingSm">
           Border inverse
         </Text>
         <Divider borderColor="border-inverse" />
-        <Text as="h1" variant="headingXs">
+        <Text as="h1" variant="headingSm">
           Transparent
         </Text>
         <Divider borderColor="transparent" />
diff --git a/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx b/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
index 4897af76350..498d7f2c15e 100644
--- a/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
+++ b/polaris.shopify.com/pages/examples/legacy-card-with-custom-react-node-title.tsx
@@ -10,7 +10,7 @@ function LegacyCardExample() {
         title={
           <LegacyStack>
             <Icon source={ProductsMajor} />
-            <Text variant="headingXs" as="h3">
+            <Text variant="headingSm" as="h3">
               New Products
             </Text>
           </LegacyStack>
diff --git a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
index baae95be3fa..10a57add049 100644
--- a/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
+++ b/polaris.shopify.com/pages/examples/sheet-with-searchable-listbox.tsx
@@ -319,7 +319,7 @@ function SheetWithSearchableListboxExample() {
                 marginBottom: 'var(--p-space-200)',
               }}
             >
-              <Text variant="headingXs" as="h3" tone="subdued">
+              <Text variant="headingSm" as="h3" tone="subdued">
                 Action
               </Text>
               <Button
diff --git a/polaris.shopify.com/pages/examples/text-heading.tsx b/polaris.shopify.com/pages/examples/text-heading.tsx
index 7dce868a493..113cf6a15ce 100644
--- a/polaris.shopify.com/pages/examples/text-heading.tsx
+++ b/polaris.shopify.com/pages/examples/text-heading.tsx
@@ -26,9 +26,6 @@ function TextExample() {
       <Text variant="headingSm" as="h6">
         Online store dashboard
       </Text>
-      <Text variant="headingXs" as="h6">
-        Online store dashboard
-      </Text>
     </LegacyStack>
   );
 }

From 5b4121d97299ee040eb6c081dc4da9ecd0b09ce5 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Thu, 28 Sep 2023 19:14:28 -0400
Subject: [PATCH 3/3] Manually migrate `Text` variant `heading4xl` to
 `heading3xl`

---
 polaris-react/src/components/Text/Text.stories.tsx            | 3 ---
 polaris-react/src/components/Text/tests/Text.test.tsx         | 2 +-
 .../content/components/deprecated/display-text.md             | 2 +-
 polaris.shopify.com/content/components/typography/text.md     | 3 +--
 polaris.shopify.com/content/design/typography.md              | 4 ++--
 polaris.shopify.com/pages/examples/text-heading.tsx           | 3 ---
 6 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/polaris-react/src/components/Text/Text.stories.tsx b/polaris-react/src/components/Text/Text.stories.tsx
index 746777dfc8e..b6f1cd991c7 100644
--- a/polaris-react/src/components/Text/Text.stories.tsx
+++ b/polaris-react/src/components/Text/Text.stories.tsx
@@ -8,9 +8,6 @@ export default {
 
 export const Variants = () => (
   <LegacyStack vertical>
-    <Text as="h1" variant="heading4xl">
-      Text with Heading4xl variant
-    </Text>
     <Text as="h2" variant="heading3xl">
       Text with Heading3xl variant
     </Text>
diff --git a/polaris-react/src/components/Text/tests/Text.test.tsx b/polaris-react/src/components/Text/tests/Text.test.tsx
index 21befc71db6..e31192e9de6 100644
--- a/polaris-react/src/components/Text/tests/Text.test.tsx
+++ b/polaris-react/src/components/Text/tests/Text.test.tsx
@@ -9,7 +9,7 @@ describe('<Text />', () => {
 
   it('renders its children', () => {
     const headingText = mountWithApp(
-      <Text as="h1" variant="heading4xl">
+      <Text as="h1" variant="heading3xl">
         {text}
       </Text>,
     );
diff --git a/polaris.shopify.com/content/components/deprecated/display-text.md b/polaris.shopify.com/content/components/deprecated/display-text.md
index dc4998bfd3d..a69dc0f68d2 100644
--- a/polaris.shopify.com/content/components/deprecated/display-text.md
+++ b/polaris.shopify.com/content/components/deprecated/display-text.md
@@ -69,7 +69,7 @@ Display styles make a bold visual statement. Use them to create impact when the
 
 ```diff
 - <DisplayText size="extraLarge">Sales this year</DisplayText>
-+ <Text variant="heading4xl" as="p">Sales this year</Text>
++ <Text variant="heading3xl" as="p">Sales this year</Text>
 ```
 
 ---
diff --git a/polaris.shopify.com/content/components/typography/text.md b/polaris.shopify.com/content/components/typography/text.md
index c3b73d3b8bb..09cd24d45a3 100644
--- a/polaris.shopify.com/content/components/typography/text.md
+++ b/polaris.shopify.com/content/components/typography/text.md
@@ -68,7 +68,6 @@ 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 |
 | ------------ | ------------------- | -------- | --------- | ---------------------- | -------------------------- | --------- |
-| `heading4Xl` | `--p-font-size-700` | 40       | 2.5       | `--p-line-height-7`    | `--p-font-weight-bold`     | Yes       |
 | `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       |
@@ -112,7 +111,7 @@ These are suggested replacements for existing text style components, but ultimat
 
 ```diff
 - <DisplayText size="extraLarge">Sales this year</DisplayText>
-+ <Text variant="heading4xl" as="p">Sales this year</Text>
++ <Text variant="heading3xl" as="p">Sales this year</Text>
 ```
 
 ### Heading
diff --git a/polaris.shopify.com/content/design/typography.md b/polaris.shopify.com/content/design/typography.md
index c5cfbec9051..5889664f2c3 100644
--- a/polaris.shopify.com/content/design/typography.md
+++ b/polaris.shopify.com/content/design/typography.md
@@ -119,7 +119,7 @@ Body styles are used within components and blocks of text.
 
 Heading styles are used to create various levels of hierarchy on the page. These styles range in size and weight. Using a blend of the two can help distinguish content and guide merchants through the page.
 
-`headingXl` - `heading4xl` styles are typically used for numerals and key moments in the merchant’s journey. As the largest text on the screen, use these styles sparingly within a single page. These styles should draw the merchant’s attention to important key pieces of information.
+`headingXl` - `heading3xl` styles are typically used for numerals and key moments in the merchant’s journey. As the largest text on the screen, use these styles sparingly within a single page. These styles should draw the merchant’s attention to important key pieces of information.
 
 ![An image showing how heading styles are applied](/images/design/typography/text-heading-example-01@2x.png)
 
@@ -129,7 +129,7 @@ Heading styles are used to create various levels of hierarchy on the page. These
 
 ### Responsive styles
 
-Large heading styles, `headingLg` - `heading4xl`, are responsive and will change size at different breakpoints.
+Large heading styles, `headingLg` - `heading3xl`, are responsive and will change size at different breakpoints.
 
 Small heading styles, `headingSm` - `headingMd`, and body styles will remain the same size regardless of breakpoint unless specified. You can choose to adjust the size of these styles at specific breakpoints when needed. For instance, you may need to increase the size of important body text on smaller screens.
 
diff --git a/polaris.shopify.com/pages/examples/text-heading.tsx b/polaris.shopify.com/pages/examples/text-heading.tsx
index 113cf6a15ce..3526bd66c32 100644
--- a/polaris.shopify.com/pages/examples/text-heading.tsx
+++ b/polaris.shopify.com/pages/examples/text-heading.tsx
@@ -5,9 +5,6 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function TextExample() {
   return (
     <LegacyStack vertical>
-      <Text variant="heading4xl" as="h1">
-        Online store dashboard
-      </Text>
       <Text variant="heading3xl" as="h2">
         Online store dashboard
       </Text>