feat(theme): add a text-heading-3xl rung above the heading ladder

apps/storybook/src/foundations/data/typography.js

@@ -10,6 +10,7 @@ export const typographyCatalog = [
   { className: 'text-big-number-lg', sample: 'Big number lg' },
   { className: 'text-big-number-md', sample: 'Big number md' },
   { className: 'text-big-number-sm', sample: 'Big number sm' },
+  { className: 'text-heading-3xl', sample: 'Heading 3xl' },
   { className: 'text-heading-2xl', sample: 'Heading 2xl' },
   { className: 'text-heading-xl', sample: 'Heading xl' },
   { className: 'text-heading-lg', sample: 'Heading lg' },

packages/theme/dist/v4/globals.css

@@ -621,7 +621,7 @@
   --line-height-9: 36px;
   --line-height-10: 40px;
   --line-height-none: 0;
-  --tracking-tighter: -0.05rem;
+  --tracking-tighter: -0.16rem;
   --tracking-tight: -0.025rem;
   --tracking-normal: 0;
   --tracking-wide: 0.025rem;
@@ -736,41 +736,46 @@
   --text-amount-sm-line-height: 1.5;
   --text-amount-sm-font-weight: 400;
   --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-3xl-text-wrap-style: balance;
+  --text-heading-3xl-font-size: 1.875rem;
+  --text-heading-3xl-line-height: 1.25;
+  --text-heading-3xl-font-weight: 400;
+  --text-heading-3xl-letter-spacing: -0.16rem;
   --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.25;
+  --text-heading-2xl-line-height: 1;
   --text-heading-2xl-font-weight: 400;
-  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-2xl-letter-spacing: -0.16rem;
   --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
-  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-xl-letter-spacing: 0;
   --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
-  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-lg-letter-spacing: 0;
   --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
-  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-md-letter-spacing: 0;
   --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
-  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-sm-letter-spacing: 0;
   --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
-  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xs-letter-spacing: 0;
   --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
-  --text-heading-xxs-letter-spacing: -0.05rem;
+  --text-heading-xxs-letter-spacing: 0;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
@@ -876,7 +881,8 @@
     --text-big-number-lg-font-size: 2.25rem;
     --text-amount-lg-font-size: 3rem;
     --text-amount-md-font-size: 1.25rem;
-    --text-heading-2xl-font-size: 3rem;
+    --text-heading-3xl-font-size: 3rem;
+    --text-heading-2xl-font-size: 2.25rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
     --text-heading-sm-font-size: 1rem;
@@ -888,7 +894,8 @@
     --text-big-number-lg-font-size: 3.5rem;
     --text-amount-lg-font-size: 3.5rem;
     --text-amount-md-font-size: 1.5rem;
-    --text-heading-2xl-font-size: 3.5rem;
+    --text-heading-3xl-font-size: 3.5rem;
+    --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
     --text-heading-md-font-size: 1.5rem;
@@ -1218,6 +1225,14 @@
   letter-spacing: var(--text-amount-sm-letter-spacing);
 }
 
+@utility text-heading-3xl {
+  text-wrap-style: var(--text-heading-3xl-text-wrap-style);
+  font-size: var(--text-heading-3xl-font-size);
+  line-height: var(--text-heading-3xl-line-height);
+  font-weight: var(--text-heading-3xl-font-weight);
+  letter-spacing: var(--text-heading-3xl-letter-spacing);
+}
+
 @utility text-heading-2xl {
   text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);

packages/theme/dist/v4/globals.scss

@@ -621,7 +621,7 @@
   --line-height-9: 36px;
   --line-height-10: 40px;
   --line-height-none: 0;
-  --tracking-tighter: -0.05rem;
+  --tracking-tighter: -0.16rem;
   --tracking-tight: -0.025rem;
   --tracking-normal: 0;
   --tracking-wide: 0.025rem;
@@ -736,41 +736,46 @@
   --text-amount-sm-line-height: 1.5;
   --text-amount-sm-font-weight: 400;
   --text-amount-sm-letter-spacing: -0.08em;
+  --text-heading-3xl-text-wrap-style: balance;
+  --text-heading-3xl-font-size: 1.875rem;
+  --text-heading-3xl-line-height: 1.25;
+  --text-heading-3xl-font-weight: 400;
+  --text-heading-3xl-letter-spacing: -0.16rem;
   --text-heading-2xl-text-wrap-style: balance;
   --text-heading-2xl-font-size: 1.875rem;
-  --text-heading-2xl-line-height: 1.25;
+  --text-heading-2xl-line-height: 1;
   --text-heading-2xl-font-weight: 400;
-  --text-heading-2xl-letter-spacing: -0.05rem;
+  --text-heading-2xl-letter-spacing: -0.16rem;
   --text-heading-xl-text-wrap-style: balance;
   --text-heading-xl-font-size: 1.25rem;
   --text-heading-xl-line-height: 1.25;
   --text-heading-xl-font-weight: 400;
-  --text-heading-xl-letter-spacing: -0.05rem;
+  --text-heading-xl-letter-spacing: 0;
   --text-heading-lg-text-wrap-style: balance;
   --text-heading-lg-font-size: 1.125rem;
   --text-heading-lg-line-height: 1.25;
   --text-heading-lg-font-weight: 400;
-  --text-heading-lg-letter-spacing: -0.05rem;
+  --text-heading-lg-letter-spacing: 0;
   --text-heading-md-text-wrap-style: balance;
   --text-heading-md-font-size: 1rem;
   --text-heading-md-line-height: 1.25;
   --text-heading-md-font-weight: 400;
-  --text-heading-md-letter-spacing: -0.05rem;
+  --text-heading-md-letter-spacing: 0;
   --text-heading-sm-text-wrap-style: balance;
   --text-heading-sm-font-size: 0.875rem;
   --text-heading-sm-line-height: 1.375;
   --text-heading-sm-font-weight: 400;
-  --text-heading-sm-letter-spacing: -0.05rem;
+  --text-heading-sm-letter-spacing: 0;
   --text-heading-xs-text-wrap-style: balance;
   --text-heading-xs-font-size: 1rem;
   --text-heading-xs-line-height: 1.375;
   --text-heading-xs-font-weight: 400;
-  --text-heading-xs-letter-spacing: -0.05rem;
+  --text-heading-xs-letter-spacing: 0;
   --text-heading-xxs-text-wrap-style: balance;
   --text-heading-xxs-font-size: 0.875rem;
   --text-heading-xxs-line-height: 1.375;
   --text-heading-xxs-font-weight: 400;
-  --text-heading-xxs-letter-spacing: -0.05rem;
+  --text-heading-xxs-letter-spacing: 0;
   --text-label-lg-font-size: 1rem;
   --text-label-lg-line-height: 1.5;
   --text-label-lg-font-weight: 400;
@@ -876,7 +881,8 @@
     --text-big-number-lg-font-size: 2.25rem;
     --text-amount-lg-font-size: 3rem;
     --text-amount-md-font-size: 1.25rem;
-    --text-heading-2xl-font-size: 3rem;
+    --text-heading-3xl-font-size: 3rem;
+    --text-heading-2xl-font-size: 2.25rem;
     --text-heading-xl-font-size: 1.875rem;
     --text-heading-md-font-size: 1.25rem;
     --text-heading-sm-font-size: 1rem;
@@ -888,7 +894,8 @@
     --text-big-number-lg-font-size: 3.5rem;
     --text-amount-lg-font-size: 3.5rem;
     --text-amount-md-font-size: 1.5rem;
-    --text-heading-2xl-font-size: 3.5rem;
+    --text-heading-3xl-font-size: 3.5rem;
+    --text-heading-2xl-font-size: 3rem;
     --text-heading-xl-font-size: 2.25rem;
     --text-heading-lg-font-size: 1.875rem;
     --text-heading-md-font-size: 1.5rem;
@@ -1218,6 +1225,14 @@
   letter-spacing: var(--text-amount-sm-letter-spacing);
 }
 
+@utility text-heading-3xl {
+  text-wrap-style: var(--text-heading-3xl-text-wrap-style);
+  font-size: var(--text-heading-3xl-font-size);
+  line-height: var(--text-heading-3xl-line-height);
+  font-weight: var(--text-heading-3xl-font-weight);
+  letter-spacing: var(--text-heading-3xl-letter-spacing);
+}
+
 @utility text-heading-2xl {
   text-wrap-style: var(--text-heading-2xl-text-wrap-style);
   font-size: var(--text-heading-2xl-font-size);

packages/theme/src/tokens/primitives/typography/tracking.js

@@ -5,7 +5,7 @@
  * resolves to a fixed 1.6px instead of 10% of the element's font size.
  */
 export const tracking = {
-  tighter: '-0.05rem',
+  tighter: '-0.16rem',
   tight: '-0.025rem',
   normal: '0',
   wide: '0.025rem',

packages/theme/src/tokens/semantic/texts.data.js

@@ -56,7 +56,7 @@ export const textsData = {
   // The three sizes `Currency` typesets a monetary amount at, one per reading
   // distance: `sm` inside a table row or list cell, `md` an amount stated as a fact on
   // a card, `lg` the headline figure of a pricing card. Each MIRRORS the heading/label
-  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-2xl`) —
+  // token it used to borrow (`text-label-lg`, `text-heading-md`, `text-heading-3xl`) —
   // same size ramp, same leading, same weight — and adds the one thing that made
   // borrowing wrong: the amount's negative tracking.
   //
@@ -69,7 +69,7 @@ export const textsData = {
   // makes a single declaration correct at all three sizes and at every breakpoint of
   // `lg`'s responsive ramp.
   //
-  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-2xl`
+  // Dedicated tokens rather than tracking added to the borrowed ones: `text-heading-3xl`
   // sets every hero headline in the system, and a hero is prose, not a numeral.
   'text-amount-lg': {
     textWrapStyle: 'balance',
@@ -91,54 +91,61 @@ export const textsData = {
     fontWeight: fontWeight.normal,
     letterSpacing: '-0.08em'
   },
-  'text-heading-2xl': {
+  'text-heading-3xl': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize['3xl'], sm: fontSize['5xl'], md: fontSize['6xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
     letterSpacing: tracking.tighter
   },
+  'text-heading-2xl': {
+    textWrapStyle: 'balance',
+    fontSize: { _: fontSize['3xl'], sm: fontSize['4xl'], md: fontSize['5xl'] },
+    lineHeight: leading.none,
+    fontWeight: fontWeight.normal,
+    letterSpacing: tracking.tighter
+  },
   'text-heading-xl': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.xl, sm: fontSize['3xl'], md: fontSize['4xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-lg': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.lg, md: fontSize['3xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-md': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.base, sm: fontSize.xl, md: fontSize['2xl'] },
     lineHeight: leading.tight,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-sm': {
     textWrapStyle: 'balance',
     fontSize: { _: fontSize.sm, sm: fontSize.base, md: fontSize.lg },
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-xs': {
     textWrapStyle: 'balance',
     fontSize: fontSize.base,
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-heading-xxs': {
     textWrapStyle: 'balance',
     fontSize: fontSize.sm,
     lineHeight: leading.snug,
     fontWeight: fontWeight.normal,
-    letterSpacing: tracking.tighter
+    letterSpacing: tracking.normal
   },
   'text-label-lg': {
     fontSize: fontSize.base,

packages/webkit/catalog.json

@@ -643,6 +643,11 @@
       "--text-heading-2xl-letter-spacing",
       "--text-heading-2xl-line-height",
       "--text-heading-2xl-text-wrap-style",
+      "--text-heading-3xl-font-size",
+      "--text-heading-3xl-font-weight",
+      "--text-heading-3xl-letter-spacing",
+      "--text-heading-3xl-line-height",
+      "--text-heading-3xl-text-wrap-style",
       "--text-heading-lg-font-size",
       "--text-heading-lg-font-weight",
       "--text-heading-lg-letter-spacing",
@@ -788,6 +793,7 @@
       "text-button-lg",
       "text-button-md",
       "text-heading-2xl",
+      "text-heading-3xl",
       "text-heading-lg",
       "text-heading-md",
       "text-heading-sm",
@@ -1478,6 +1484,11 @@
         "--text-heading-2xl-letter-spacing",
         "--text-heading-2xl-line-height",
         "--text-heading-2xl-text-wrap-style",
+        "--text-heading-3xl-font-size",
+        "--text-heading-3xl-font-weight",
+        "--text-heading-3xl-letter-spacing",
+        "--text-heading-3xl-line-height",
+        "--text-heading-3xl-text-wrap-style",
         "--text-heading-lg-font-size",
         "--text-heading-lg-font-weight",
         "--text-heading-lg-letter-spacing",