Skip to content

Update tokens to use text size scale #1298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
lukasoppermann merged 4 commits into from
Jan 23, 2026
Merged

Update tokens to use text size scale #1298

lukasoppermann merged 4 commits into from
Jan 23, 2026
+98 −11

Conversation

@lukasoppermann
Copy link
Collaborator

@lukasoppermann lukasoppermann commented Jan 23, 2026

Added text size scale

@lukasoppermann lukasoppermann requested review from a team as code owners January 23, 2026 13:53
@lukasoppermann lukasoppermann requested review from Copilot and jonrohan and removed request for Copilot January 23, 2026 13:53
@changeset-bot
Copy link

changeset-bot bot commented Jan 23, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: 5ac54a1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/primitives Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026 •
edited
Loading

Design Token Diff (CSS)

/css/base/typography/typography.css

 
+++ /home/runner/work/primitives/primitives/dist/css/base/typography/typography.css	2026-01-23 15:32:23.824734159 +0000
@@ -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;

/css/functional/typography/typography.css

 
+++ /home/runner/work/primitives/primitives/dist/css/functional/typography/typography.css	2026-01-23 15:32:23.776734473 +0000
@@ -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);

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026 •
edited
Loading

Design Token Diff (StyleLint)

/styleLint/base/typography/typography.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/base/typography/typography.json	2026-01-23 15:32:23.824734159 +0000
@@ -144,6 +144,180 @@
   "attributes": {},
   "path": ["base", "text", "lineHeight", "tight"]
 },
+  "base-text-size-2xl": {
+    "key": "{base.text.size.2xl}",
+    "$value": [null, "40px"],
+    "$type": "dimension",
+    "$description": "40px - Display text for hero sections.",
+    "$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"]
+  },
+  "base-text-size-lg": {
+    "key": "{base.text.size.lg}",
+    "$value": [null, "20px"],
+    "$type": "dimension",
+    "$description": "20px - Medium titles and subtitles.",
+    "$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"]
+  },
+  "base-text-size-md": {
+    "key": "{base.text.size.md}",
+    "$value": [null, "16px"],
+    "$type": "dimension",
+    "$description": "16px - Large body text and small titles.",
+    "$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"]
+  },
+  "base-text-size-sm": {
+    "key": "{base.text.size.sm}",
+    "$value": [null, "14px"],
+    "$type": "dimension",
+    "$description": "14px - Default body text size for UI.",
+    "$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"]
+  },
+  "base-text-size-xl": {
+    "key": "{base.text.size.xl}",
+    "$value": [null, "32px"],
+    "$type": "dimension",
+    "$description": "32px - Large titles and page headings.",
+    "$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"]
+  },
+  "base-text-size-xs": {
+    "key": "{base.text.size.xs}",
+    "$value": [null, "12px"],
+    "$type": "dimension",
+    "$description": "12px - Smallest text size for captions and compact UI elements.",
+    "$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"]
+  },
 "base-text-weight-light": {
   "key": "{base.text.weight.light}",
   "$type": "fontWeight",

/styleLint/functional/typography/typography.json

 
+++ /home/runner/work/primitives/primitives/dist/styleLint/functional/typography/typography.json	2026-01-23 15:32:23.776734473 +0000
@@ -208,7 +208,7 @@
 },
 "text-body-shorthand-large": {
   "key": "{text.body.shorthand.large}",
-    "$value": "400 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 ,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "User-generated content, markdown rendering.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -230,7 +230,7 @@
 },
 "text-body-shorthand-medium": {
   "key": "{text.body.shorthand.medium}",
-    "$value": "400 0.875rem,14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 ,14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Default UI font. Most commonly used for body text.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -252,7 +252,7 @@
 },
 "text-body-shorthand-small": {
   "key": "{text.body.shorthand.small}",
-    "$value": "400 0.75rem,12px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 ,12px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -274,7 +274,7 @@
 },
 "text-body-size-large": {
   "key": "{text.body.size.large}",
-    "$value": ["1rem", "16px"],
+    "$value": [null, "16px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -285,7 +285,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "16px",
+      "$value": "{base.text.size.md}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -301,7 +301,7 @@
 },
 "text-body-size-medium": {
   "key": "{text.body.size.medium}",
-    "$value": ["0.875rem", "14px"],
+    "$value": [null, "14px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -312,7 +312,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "14px",
+      "$value": "{base.text.size.sm}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -328,7 +328,7 @@
 },
 "text-body-size-small": {
   "key": "{text.body.size.small}",
-    "$value": ["0.75rem", "12px"],
+    "$value": [null, "12px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -339,7 +339,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "12px",
+      "$value": "{base.text.size.xs}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -415,7 +415,7 @@
 },
 "text-caption-shorthand": {
   "key": "{text.caption.shorthand}",
-    "$value": "400 0.75rem,12px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 ,12px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -437,7 +437,7 @@
 },
 "text-caption-size": {
   "key": "{text.caption.size}",
-    "$value": ["0.75rem", "12px"],
+    "$value": [null, "12px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -448,7 +448,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "12px",
+      "$value": "{base.text.size.xs}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -743,7 +743,7 @@
 },
 "text-display-shorthand": {
   "key": "{text.display.shorthand}",
-    "$value": "500 2.5rem,40px/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "500 ,40px/1.375 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -765,7 +765,7 @@
 },
 "text-display-size": {
   "key": "{text.display.size}",
-    "$value": ["2.5rem", "40px"],
+    "$value": [null, "40px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -776,7 +776,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "40px",
+      "$value": "{base.text.size.2xl}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -852,7 +852,7 @@
 },
 "text-subtitle-shorthand": {
   "key": "{text.subtitle.shorthand}",
-    "$value": "400 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "400 ,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -874,7 +874,7 @@
 },
 "text-subtitle-size": {
   "key": "{text.subtitle.size}",
-    "$value": ["1.25rem", "20px"],
+    "$value": [null, "20px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -885,7 +885,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "20px",
+      "$value": "{base.text.size.lg}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -1027,7 +1027,7 @@
 },
 "text-title-shorthand-large": {
   "key": "{text.title.shorthand.large}",
-    "$value": "600 2rem,32px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 ,32px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -1049,7 +1049,7 @@
 },
 "text-title-shorthand-medium": {
   "key": "{text.title.shorthand.medium}",
-    "$value": "600 1.25rem,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 ,20px/1.625 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -1071,7 +1071,7 @@
 },
 "text-title-shorthand-small": {
   "key": "{text.title.shorthand.small}",
-    "$value": "600 1rem,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$value": "600 ,16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
   "$type": "typography",
   "$description": "Uses the same size as body (large) with a heavier weight of semibold (600).",
   "filePath": "src/tokens/functional/typography/typography.json5",
@@ -1093,7 +1093,7 @@
 },
 "text-title-size-large": {
   "key": "{text.title.size.large}",
-    "$value": ["2rem", "32px"],
+    "$value": [null, "32px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -1104,7 +1104,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "32px",
+      "$value": "{base.text.size.xl}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -1120,7 +1120,7 @@
 },
 "text-title-size-medium": {
   "key": "{text.title.size.medium}",
-    "$value": ["1.25rem", "20px"],
+    "$value": [null, "20px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -1131,7 +1131,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "20px",
+      "$value": "{base.text.size.lg}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -1147,7 +1147,7 @@
 },
 "text-title-size-small": {
   "key": "{text.title.size.small}",
-    "$value": ["1rem", "16px"],
+    "$value": [null, "16px"],
   "$type": "dimension",
   "$extensions": {
     "org.primer.figma": {
@@ -1158,7 +1158,7 @@
   "filePath": "src/tokens/functional/typography/typography.json5",
   "isSource": true,
   "original": {
-      "$value": "16px",
+      "$value": "{base.text.size.md}",
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026 •
edited
Loading

Design Token Diff (Figma)

/figma/typography/typography.json

 
+++ /home/runner/work/primitives/primitives/dist/figma/typography/typography.json	2026-01-23 15:32:29.249698533 +0000
@@ -1,5 +1,71 @@
[
 {
+    "name": "base/text/size/xs",
+    "value": 12,
+    "type": "FLOAT",
+    "description": "12px - Smallest text size for captions and compact UI elements.",
+    "refId": "base/typography/base/text/size/xs",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
+    "name": "base/text/size/sm",
+    "value": 14,
+    "type": "FLOAT",
+    "description": "14px - Default body text size for UI.",
+    "refId": "base/typography/base/text/size/sm",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
+    "name": "base/text/size/md",
+    "value": 16,
+    "type": "FLOAT",
+    "description": "16px - Large body text and small titles.",
+    "refId": "base/typography/base/text/size/md",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
+    "name": "base/text/size/lg",
+    "value": 20,
+    "type": "FLOAT",
+    "description": "20px - Medium titles and subtitles.",
+    "refId": "base/typography/base/text/size/lg",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
+    "name": "base/text/size/xl",
+    "value": 32,
+    "type": "FLOAT",
+    "description": "32px - Large titles and page headings.",
+    "refId": "base/typography/base/text/size/xl",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
+    "name": "base/text/size/2xl",
+    "value": 40,
+    "type": "FLOAT",
+    "description": "40px - Display text for hero sections.",
+    "refId": "base/typography/base/text/size/2xl",
+    "collection": "base/typography",
+    "mode": "default",
+    "group": "base/typography",
+    "scopes": ["FONT_SIZE"]
+  },
+  {
   "name": "base/text/weight/light",
   "value": 300,
   "type": "FLOAT",
@@ -126,6 +192,7 @@
   "value": 40,
   "type": "FLOAT",
   "refId": "typography/text/display/size",
+    "reference": "base/typography/base/text/size/2xl",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -154,6 +221,7 @@
   "value": 32,
   "type": "FLOAT",
   "refId": "typography/text/title/size/large",
+    "reference": "base/typography/base/text/size/xl",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -164,6 +232,7 @@
   "value": 20,
   "type": "FLOAT",
   "refId": "typography/text/title/size/medium",
+    "reference": "base/typography/base/text/size/lg",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -174,6 +243,7 @@
   "value": 16,
   "type": "FLOAT",
   "refId": "typography/text/title/size/small",
+    "reference": "base/typography/base/text/size/md",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -238,6 +308,7 @@
   "value": 20,
   "type": "FLOAT",
   "refId": "typography/text/subtitle/size",
+    "reference": "base/typography/base/text/size/lg",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -266,6 +337,7 @@
   "value": 16,
   "type": "FLOAT",
   "refId": "typography/text/body/size/large",
+    "reference": "base/typography/base/text/size/md",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -276,6 +348,7 @@
   "value": 14,
   "type": "FLOAT",
   "refId": "typography/text/body/size/medium",
+    "reference": "base/typography/base/text/size/sm",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -286,6 +359,7 @@
   "value": 12,
   "type": "FLOAT",
   "refId": "typography/text/body/size/small",
+    "reference": "base/typography/base/text/size/xs",
   "collection": "typography",
   "mode": "default",
   "group": "typography",
@@ -328,6 +402,7 @@
   "value": 12,
   "type": "FLOAT",
   "refId": "typography/text/caption/size",
+    "reference": "base/typography/base/text/size/xs",
   "collection": "typography",
   "mode": "default",
   "group": "typography",

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026 •
edited
Loading

Design Token Diff (Fallbacks)

/fallbacks/base/typography/typography.json

 
+++ /home/runner/work/primitives/primitives/dist/fallbacks/base/typography/typography.json	2026-01-23 15:32:23.824734159 +0000
@@ -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,

@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 23, 2026 13:55 Inactive
Copilot AI review requested due to automatic review settings January 23, 2026 15:12
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 23, 2026 15:15 Inactive
Copilot AI reviewed Jan 23, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a base text size scale to the design token system and migrates functional typography tokens from hardcoded pixel values to references to this new scale.

Changes:

  • Added a new base.text.size scale with six size tokens (xs through 2xl) using rem units
  • Replaced hardcoded pixel values in functional typography tokens with references to the base size scale
  • Updated the dimension value schema regex to support decimal rem/px values required by the new scale

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/tokens/base/typography/typography.json5 Adds the new base text size scale with 6 size tokens (xs: 12px, sm: 14px, md: 16px, lg: 20px, xl: 32px, 2xl: 40px)
src/tokens/functional/typography/typography.json5 Migrates 9 typography size properties from hardcoded pixel values to base size token references
src/schemas/dimensionValue.ts Updates regex pattern to allow decimal values in px/rem units (e.g., 0.75rem, 2.5rem)
src/schemas/dimensionToken.ts Adds 'base/typography' to the list of valid collections for dimension tokens
.changeset/rare-zebras-refuse.md Documents the change as a minor version bump

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/schemas/dimensionValue.ts
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)) {
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The regex pattern has been updated to support decimal values like '0.75rem' and '2.5rem', which is necessary for the new text size scale tokens. However, there are no test cases in the dimensionValueSchema.test.ts file that verify decimal rem/px values work correctly. Consider adding test cases such as dimensionValue.safeParse('0.75rem') and dimensionValue.safeParse('2.5px') to ensure the regex change works as intended.

Copilot uses AI. Check for mistakes.
lukasoppermann
lukasoppermann commented Jan 23, 2026
View reviewed changes
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 23, 2026 15:23 Inactive
@github-actions github-actions bot temporarily deployed to Preview (Storybook) January 23, 2026 15:33 Inactive
@lukasoppermann lukasoppermann merged commit 3cec8c2 into main Jan 23, 2026
29 checks passed
@lukasoppermann lukasoppermann deleted the lineHeight branch January 23, 2026 16:51
@primer primer bot mentioned this pull request Jan 23, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@jonrohan jonrohan Awaiting requested review from jonrohan jonrohan is a code owner automatically assigned from primer/css-reviewers

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@lukasoppermann