@primer/primitives 11.3.2 → 11.4.0-rc.7bb41c84

package/dist/styleLint/functional/typography/typography.json

@@ -123,7 +123,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.5,
+      "$value": "{base.text.lineHeight.normal}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -142,7 +142,7 @@
   },
   "text-body-lineHeight-medium": {
     "key": "{text.body.lineHeight.medium}",
-    "$value": 1.42857,
+    "$value": 1.5,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -156,7 +156,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.42857,
+      "$value": "{base.text.lineHeight.normal}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -175,7 +175,7 @@
   },
   "text-body-lineHeight-small": {
     "key": "{text.body.lineHeight.small}",
-    "$value": 1.66667,
+    "$value": 1.625,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -189,7 +189,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.66667,
+      "$value": "{base.text.lineHeight.relaxed}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -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.42857 -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.66667 -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": {
@@ -382,7 +382,7 @@
   },
   "text-caption-lineHeight": {
     "key": "{text.caption.lineHeight}",
-    "$value": 1.3333,
+    "$value": 1.25,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -396,7 +396,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.3333,
+      "$value": "{base.text.lineHeight.tight}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -415,7 +415,7 @@
   },
   "text-caption-shorthand": {
     "key": "{text.caption.shorthand}",
-    "$value": "400 0.75rem,12px/1.3333 -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": {
@@ -491,7 +491,7 @@
   },
   "text-codeBlock-lineHeight": {
     "key": "{text.codeBlock.lineHeight}",
-    "$value": 1.5385,
+    "$value": 1.5,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -505,7 +505,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.5385,
+      "$value": "{base.text.lineHeight.normal}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -524,7 +524,7 @@
   },
   "text-codeBlock-shorthand": {
     "key": "{text.codeBlock.shorthand}",
-    "$value": "400 0.8125rem,13px/1.5385 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "$value": "400 0.8125rem,13px/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "typography",
     "$description": "Default style for rendering code blocks.",
     "filePath": "src/tokens/functional/typography/typography.json5",
@@ -675,7 +675,7 @@
   },
   "text-display-lineBoxHeight": {
     "key": "{text.display.lineBoxHeight}",
-    "$value": 1.4,
+    "$value": 1.375,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -690,7 +690,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.4,
+      "$value": "{base.text.lineHeight.snug}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -710,7 +710,7 @@
   },
   "text-display-lineHeight": {
     "key": "{text.display.lineHeight}",
-    "$value": 1.4,
+    "$value": 1.375,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -724,7 +724,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.4,
+      "$value": "{base.text.lineHeight.snug}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -743,7 +743,7 @@
   },
   "text-display-shorthand": {
     "key": "{text.display.shorthand}",
-    "$value": "500 2.5rem,40px/1.4 -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": {
@@ -819,7 +819,7 @@
   },
   "text-subtitle-lineHeight": {
     "key": "{text.subtitle.lineHeight}",
-    "$value": 1.6,
+    "$value": 1.625,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -833,7 +833,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.6,
+      "$value": "{base.text.lineHeight.relaxed}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -852,7 +852,7 @@
   },
   "text-subtitle-shorthand": {
     "key": "{text.subtitle.shorthand}",
-    "$value": "400 1.25rem,20px/1.6 -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": {
@@ -942,7 +942,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.5,
+      "$value": "{base.text.lineHeight.normal}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -961,7 +961,7 @@
   },
   "text-title-lineHeight-medium": {
     "key": "{text.title.lineHeight.medium}",
-    "$value": 1.6,
+    "$value": 1.625,
     "$type": "number",
     "$extensions": {
       "org.primer.data": {
@@ -975,7 +975,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.6,
+      "$value": "{base.text.lineHeight.relaxed}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -1008,7 +1008,7 @@
     "filePath": "src/tokens/functional/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 1.5,
+      "$value": "{base.text.lineHeight.normal}",
       "$type": "number",
       "$extensions": {
         "org.primer.data": {
@@ -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.6 -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": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.3.2",
+  "version": "11.4.0-rc.7bb41c84",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [

package/src/tokens/base/typography/typography.json5

@@ -1,6 +1,74 @@
 {
   base: {
     text: {
+      size: {
+        xs: {
+          $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'],
+            },
+          },
+        },
+        sm: {
+          $value: '0.875rem',
+          $type: 'dimension',
+          $description: '14px - Default body text size for UI.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        md: {
+          $value: '1rem',
+          $type: 'dimension',
+          $description: '16px - Large body text and small titles.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        lg: {
+          $value: '1.25rem',
+          $type: 'dimension',
+          $description: '20px - Medium titles and subtitles.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        xl: {
+          $value: '2rem',
+          $type: 'dimension',
+          $description: '32px - Large titles and page headings.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        '2xl': {
+          $value: '2.5rem',
+          $type: 'dimension',
+          $description: '40px - Display text for hero sections.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'base/typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+      },
       weight: {
         light: {
           $type: 'fontWeight',
@@ -43,6 +111,63 @@
           },
         },
       },
+      lineHeight: {
+        tight: {
+          $value: 1.25,
+          $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.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        snug: {
+          $value: 1.375,
+          $type: 'number',
+          $description: 'Use for display text, large headings, or short multi-line text where moderate density is needed. Good for hero sections and marketing headlines.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        normal: {
+          $value: 1.5,
+          $type: 'number',
+          $description: 'Default choice for body text and general UI content. Provides optimal readability for paragraphs, descriptions, and most multi-line text. Use when unsure which line-height to pick.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        relaxed: {
+          $value: 1.625,
+          $type: 'number',
+          $description: 'Use for longer-form content, smaller text sizes (12-13px), or when increased readability is desired. Good for text that needs extra breathing room.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        loose: {
+          $value: 1.75,
+          $type: 'number',
+          $description: 'Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility.',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+      },
     },
   },
 }