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

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

@@ -1,4 +1,15 @@
 :root {
+  --base-text-lineHeight-loose: 1.75; /** Use sparingly for very small text or when maximum readability is critical. Best for footnotes, legal text, or content requiring high accessibility. */
+  --base-text-lineHeight-normal: 1.5; /** 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. */
+  --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/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-lineHeight-large: 1.5;
-  --text-body-lineHeight-medium: 1.42857;
-  --text-body-lineHeight-small: 1.66667;
-  --text-body-size-large: 1rem;
-  --text-body-size-medium: 0.875rem;
-  --text-body-size-small: 0.75rem;
-  --text-caption-lineHeight: 1.3333;
-  --text-caption-size: 0.75rem;
-  --text-codeBlock-lineHeight: 1.5385;
   --text-codeBlock-size: 0.8125rem;
   --text-codeInline-size: 0.9285em;
-  --text-display-lineBoxHeight: 1.4;
-  --text-display-lineHeight: 1.4;
-  --text-display-size: 2.5rem;
-  --text-subtitle-lineHeight: 1.6;
-  --text-subtitle-size: 1.25rem;
-  --text-title-lineHeight-large: 1.5;
-  --text-title-lineHeight-medium: 1.6;
-  --text-title-lineHeight-small: 1.5;
-  --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

@@ -1,4 +1,323 @@
 {
+  "base-text-lineHeight-loose": {
+    "key": "{base.text.lineHeight.loose}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["lineHeight"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{base.text.lineHeight.loose}"
+    },
+    "name": "base-text-lineHeight-loose",
+    "attributes": {},
+    "path": ["base", "text", "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."
+  },
+  "base-text-lineHeight-normal": {
+    "key": "{base.text.lineHeight.normal}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["lineHeight"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{base.text.lineHeight.normal}"
+    },
+    "name": "base-text-lineHeight-normal",
+    "attributes": {},
+    "path": ["base", "text", "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."
+  },
+  "base-text-lineHeight-relaxed": {
+    "key": "{base.text.lineHeight.relaxed}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["lineHeight"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{base.text.lineHeight.relaxed}"
+    },
+    "name": "base-text-lineHeight-relaxed",
+    "attributes": {},
+    "path": ["base", "text", "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."
+  },
+  "base-text-lineHeight-snug": {
+    "key": "{base.text.lineHeight.snug}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["lineHeight"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{base.text.lineHeight.snug}"
+    },
+    "name": "base-text-lineHeight-snug",
+    "attributes": {},
+    "path": ["base", "text", "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."
+  },
+  "base-text-lineHeight-tight": {
+    "key": "{base.text.lineHeight.tight}",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["lineHeight"]
+      }
+    },
+    "filePath": "src/tokens/base/typography/typography.json5",
+    "isSource": true,
+    "original": {
+      "$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"]
+        }
+      },
+      "key": "{base.text.lineHeight.tight}"
+    },
+    "name": "base-text-lineHeight-tight",
+    "attributes": {},
+    "path": ["base", "text", "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."
+  },
+  "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": {