@primer/primitives 11.4.0-rc.b3c35298 → 11.4.0-rc.f798df25

package/dist/build/platforms/css.js

@@ -8,12 +8,12 @@ const getCssSelectors = (outputFile) => {
     const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light';
     return [
         {
-            selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
+            selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"]`,
         },
         {
             query: '@media (prefers-color-scheme: dark)',
             // [data-color-mode] here is duplicated to increase the specificity so that light mode can't override it when prefers-color-scheme: dark is enabled
-            selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
+            selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"]`,
         },
     ];
 };

package/dist/build/schemas/dimensionToken.js

@@ -12,7 +12,7 @@ export const dimensionToken = baseToken
     $extensions: z
         .object({
         'org.primer.figma': z.object({
-            collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
+            collection: collection(['base/size', 'base/typography', 'functional/size', 'pattern/size', 'typography']),
             scopes: scopes([
                 'all',
                 'size',

package/dist/build/schemas/dimensionValue.js

@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { schemaErrorMessage } from '../utilities/index.js';
 export const dimensionValue = z.union([
     z.string().superRefine((dim, ctx) => {
-        if (!/(^-?[0-9]+(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim)) {
+        if (!/(^-?[0-9]+\.?[0-9]*(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim)) {
             ctx.addIssue({
                 code: 'custom',
                 message: schemaErrorMessage(`Invalid dimension: "${dim}"`, `Dimension must be a string with a unit (px, rem or em) or 0`),

package/dist/css/base/typography/typography.css

@@ -4,6 +4,12 @@
   --base-text-lineHeight-relaxed: 1.625; /** Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room. */
   --base-text-lineHeight-snug: 1.375; /** Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines. */
   --base-text-lineHeight-tight: 1.25; /** Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability. */
+  --base-text-size-2xl: 2.5rem; /** 40px - Display text for hero sections. */
+  --base-text-size-lg: 1.25rem; /** 20px - Medium titles and subtitles. */
+  --base-text-size-md: 1rem; /** 16px - Large body text and small titles. */
+  --base-text-size-sm: 0.875rem; /** 14px - Default body text size for UI. */
+  --base-text-size-xl: 2rem; /** 32px - Large titles and page headings. */
+  --base-text-size-xs: 0.75rem; /** 12px - Smallest text size for captions and compact UI elements. */
   --base-text-weight-light: 300;
   --base-text-weight-medium: 500;
   --base-text-weight-normal: 400;

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"],
-[data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] {
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;

package/dist/css/functional/themes/dark-colorblind.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_colorblind"],
-[data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_colorblind"],
-[data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_colorblind"] {
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-hover: #2a7aef;
   --button-primary-borderColor-disabled: #1158c7;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] {
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-hover: #2a7aef;
     --button-primary-borderColor-disabled: #1158c7;

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
-[data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-iconColor-hover: #ffffff;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] {
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-iconColor-hover: #ffffff;

package/dist/css/functional/themes/dark-dimmed.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
-[data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_dimmed"],
-[data-color-mode="auto"][data-light-theme="dark_dimmed"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_dimmed"] {
   --button-danger-fgColor-active: #ffffff;
   --button-danger-fgColor-hover: #ffffff;
   --button-danger-fgColor-rest: #ea5c53;
@@ -898,8 +896,7 @@
   --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] {
     --button-danger-fgColor-active: #ffffff;
     --button-danger-fgColor-hover: #ffffff;
     --button-danger-fgColor-rest: #ea5c53;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
-[data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
   --button-primary-bgColor-active: #109135;
   --button-primary-bgColor-disabled: #048f2f;
   --button-primary-bgColor-hover: #08792b;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] {
     --button-primary-bgColor-active: #109135;
     --button-primary-bgColor-disabled: #048f2f;
     --button-primary-bgColor-hover: #08792b;

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
-[data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"],
-[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
   --button-outline-bgColor-active: #0d419d;
   --button-primary-bgColor-active: #3685f3;
   --button-primary-bgColor-disabled: #5fabfe;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] {
     --button-outline-bgColor-active: #0d419d;
     --button-primary-bgColor-active: #3685f3;
     --button-primary-bgColor-disabled: #5fabfe;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
-[data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark_tritanopia"],
-[data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
   --bgColor-sponsors-muted: #db61a21a;
   --button-danger-fgColor-rest: #fa5e55;
   --button-outline-bgColor-active: #0d419d;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] {
     --bgColor-sponsors-muted: #db61a21a;
     --button-danger-fgColor-rest: #fa5e55;
     --button-outline-bgColor-active: #0d419d;

package/dist/css/functional/themes/dark.css

@@ -1,7 +1,5 @@
 [data-color-mode="dark"][data-dark-theme="dark"],
-[data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="dark"],
-[data-color-mode="auto"][data-light-theme="dark"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="dark"] {
   --button-danger-fgColor-rest: #fa5e55;
   --button-primary-bgColor-active: #2e9a40;
   --button-primary-bgColor-disabled: #105823;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] {
     --button-danger-fgColor-rest: #fa5e55;
     --button-primary-bgColor-active: #2e9a40;
     --button-primary-bgColor-disabled: #105823;

package/dist/css/functional/themes/light-colorblind-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
-[data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-colorblind.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light_colorblind"],
-[data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light_colorblind"],
-[data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light_colorblind"] {
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] {
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light_high_contrast"],
-[data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #03501b;
   --button-primary-bgColor-disabled: #85cb97;
@@ -898,8 +896,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #03501b;
     --button-primary-bgColor-disabled: #85cb97;

package/dist/css/functional/themes/light-tritanopia-high-contrast.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"],
-[data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"],
-[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] {
   --button-outline-bgColor-active: #033f9d;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
   --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] {
     --button-outline-bgColor-active: #033f9d;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light-tritanopia.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light_tritanopia"],
-[data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light_tritanopia"],
-[data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light_tritanopia"] {
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #075fc8;
   --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] {
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #075fc8;
     --button-primary-bgColor-disabled: #92caff;

package/dist/css/functional/themes/light.css

@@ -1,7 +1,5 @@
 [data-color-mode="light"][data-light-theme="light"],
-[data-color-mode="light"][data-light-theme="light"] ::backdrop,
-[data-color-mode="auto"][data-light-theme="light"],
-[data-color-mode="auto"][data-light-theme="light"] ::backdrop {
+[data-color-mode="auto"][data-light-theme="light"] {
   --bgColor-success-emphasis: #1f883d;
   --button-outline-bgColor-active: #0757ba;
   --button-primary-bgColor-active: #197935;
@@ -898,8 +896,7 @@
   --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
 }
 @media (prefers-color-scheme: dark) {
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"],
-  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
+  [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] {
     --bgColor-success-emphasis: #1f883d;
     --button-outline-bgColor-active: #0757ba;
     --button-primary-bgColor-active: #197935;

package/dist/css/functional/typography/typography.css

@@ -3,34 +3,34 @@
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --text-body-size-large: 1rem;
-  --text-body-size-medium: 0.875rem;
-  --text-body-size-small: 0.75rem;
-  --text-caption-size: 0.75rem;
   --text-codeBlock-size: 0.8125rem;
   --text-codeInline-size: 0.9285em;
-  --text-display-size: 2.5rem;
-  --text-subtitle-size: 1.25rem;
-  --text-title-size-large: 2rem;
-  --text-title-size-medium: 1.25rem;
-  --text-title-size-small: 1rem;
   --text-body-lineHeight-large: var(--base-text-lineHeight-normal);
   --text-body-lineHeight-medium: var(--base-text-lineHeight-normal);
   --text-body-lineHeight-small: var(--base-text-lineHeight-relaxed);
+  --text-body-size-large: var(--base-text-size-md);
+  --text-body-size-medium: var(--base-text-size-sm);
+  --text-body-size-small: var(--base-text-size-xs);
   --text-body-weight: var(--base-text-weight-normal);
   --text-caption-lineHeight: var(--base-text-lineHeight-tight);
+  --text-caption-size: var(--base-text-size-xs);
   --text-caption-weight: var(--base-text-weight-normal);
   --text-codeBlock-lineHeight: var(--base-text-lineHeight-normal);
   --text-codeBlock-weight: var(--base-text-weight-normal);
   --text-codeInline-weight: var(--base-text-weight-normal);
   --text-display-lineBoxHeight: var(--base-text-lineHeight-snug);
   --text-display-lineHeight: var(--base-text-lineHeight-snug);
+  --text-display-size: var(--base-text-size-2xl);
   --text-display-weight: var(--base-text-weight-medium);
   --text-subtitle-lineHeight: var(--base-text-lineHeight-relaxed);
+  --text-subtitle-size: var(--base-text-size-lg);
   --text-subtitle-weight: var(--base-text-weight-normal);
   --text-title-lineHeight-large: var(--base-text-lineHeight-normal);
   --text-title-lineHeight-medium: var(--base-text-lineHeight-relaxed);
   --text-title-lineHeight-small: var(--base-text-lineHeight-normal);
+  --text-title-size-large: var(--base-text-size-xl);
+  --text-title-size-medium: var(--base-text-size-lg);
+  --text-title-size-small: var(--base-text-size-md);
   --text-title-weight-large: var(--base-text-weight-semibold);
   --text-title-weight-medium: var(--base-text-weight-semibold);
   --text-title-weight-small: var(--base-text-weight-semibold);

package/dist/docs/base/typography/typography.json

@@ -144,6 +144,180 @@
     "type": "number",
     "description": "Use for single-line text in compact UI elements like labels, badges, buttons, or captions where vertical space is limited. Not recommended for multi-line body text due to reduced readability."
   },
+  "base-text-size-2xl": {
+    "key": "{base.text.size.2xl}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "2.5rem",
+      "$type": "dimension",
+      "$description": "40px - Display text for hero sections.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.2xl}"
+    },
+    "name": "base-text-size-2xl",
+    "attributes": {},
+    "path": ["base", "text", "size", "2xl"],
+    "value": "2.5rem",
+    "type": "dimension",
+    "description": "40px - Display text for hero sections."
+  },
+  "base-text-size-lg": {
+    "key": "{base.text.size.lg}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1.25rem",
+      "$type": "dimension",
+      "$description": "20px - Medium titles and subtitles.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.lg}"
+    },
+    "name": "base-text-size-lg",
+    "attributes": {},
+    "path": ["base", "text", "size", "lg"],
+    "value": "1.25rem",
+    "type": "dimension",
+    "description": "20px - Medium titles and subtitles."
+  },
+  "base-text-size-md": {
+    "key": "{base.text.size.md}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1rem",
+      "$type": "dimension",
+      "$description": "16px - Large body text and small titles.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.md}"
+    },
+    "name": "base-text-size-md",
+    "attributes": {},
+    "path": ["base", "text", "size", "md"],
+    "value": "1rem",
+    "type": "dimension",
+    "description": "16px - Large body text and small titles."
+  },
+  "base-text-size-sm": {
+    "key": "{base.text.size.sm}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "0.875rem",
+      "$type": "dimension",
+      "$description": "14px - Default body text size for UI.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.sm}"
+    },
+    "name": "base-text-size-sm",
+    "attributes": {},
+    "path": ["base", "text", "size", "sm"],
+    "value": "0.875rem",
+    "type": "dimension",
+    "description": "14px - Default body text size for UI."
+  },
+  "base-text-size-xl": {
+    "key": "{base.text.size.xl}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "2rem",
+      "$type": "dimension",
+      "$description": "32px - Large titles and page headings.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.xl}"
+    },
+    "name": "base-text-size-xl",
+    "attributes": {},
+    "path": ["base", "text", "size", "xl"],
+    "value": "2rem",
+    "type": "dimension",
+    "description": "32px - Large titles and page headings."
+  },
+  "base-text-size-xs": {
+    "key": "{base.text.size.xs}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["fontSize"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$value": "0.75rem",
+      "$type": "dimension",
+      "$description": "12px - Smallest text size for captions and compact UI elements.",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["fontSize"]
+        }
+      },
+      "key": "{base.text.size.xs}"
+    },
+    "name": "base-text-size-xs",
+    "attributes": {},
+    "path": ["base", "text", "size", "xs"],
+    "value": "0.75rem",
+    "type": "dimension",
+    "description": "12px - Smallest text size for captions and compact UI elements."
+  },
   "base-text-weight-light": {
     "key": "{base.text.weight.light}",
     "$extensions": {

package/dist/docs/functional/typography/typography.json

@@ -283,7 +283,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "16px",
+      "$value": "{base.text.size.md}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -310,7 +310,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "14px",
+      "$value": "{base.text.size.sm}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -337,7 +337,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "12px",
+      "$value": "{base.text.size.xs}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -446,7 +446,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "12px",
+      "$value": "{base.text.size.xs}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -774,7 +774,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "40px",
+      "$value": "{base.text.size.2xl}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -883,7 +883,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "20px",
+      "$value": "{base.text.size.lg}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1102,7 +1102,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "32px",
+      "$value": "{base.text.size.xl}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1129,7 +1129,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "20px",
+      "$value": "{base.text.size.lg}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -1156,7 +1156,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": "16px",
+      "$value": "{base.text.size.md}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {

package/dist/fallbacks/base/typography/typography.json

@@ -1,4 +1,10 @@
 {
+  "--base-text-size-xs": "0.75rem",
+  "--base-text-size-sm": "0.875rem",
+  "--base-text-size-md": "1rem",
+  "--base-text-size-lg": "1.25rem",
+  "--base-text-size-xl": "2rem",
+  "--base-text-size-2xl": "2.5rem",
   "--base-text-weight-light": 300,
   "--base-text-weight-normal": 400,
   "--base-text-weight-medium": 500,