@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

package/src/tokens/functional/typography/font-stack.json5

@@ -0,0 +1,60 @@
+{
+  fontStack: {
+    system: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $description: 'System font stack optimized for cross-platform rendering. Primary font for all UI text.',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+      },
+    },
+    sansSerif: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $description: 'Sans-serif font stack for body text and general UI elements.',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+        'org.primer.llm': {
+          usage: ['body-text', 'form-inputs', 'labels', 'paragraphs'],
+          rules: 'Default font stack for all UI text. Use for body text and standard UI elements. MUST use for readable content.',
+        },
+      },
+    },
+    sansSerifDisplay: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $description: 'Display font stack for headings and titles. Same as sansSerif but semantically distinct.',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+        'org.primer.llm': {
+          usage: ['heading', 'title', 'display-text', 'hero-text'],
+          rules: 'Use for headings and display text. Prefer over sansSerif for titles.',
+        },
+      },
+    },
+    monospace: {
+      $value: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+      $type: 'fontFamily',
+      $description: 'Monospace font stack for code, technical content, and tabular data.',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+        'org.primer.llm': {
+          usage: ['code-block', 'inline-code', 'terminal', 'technical-data', 'tabular-numbers'],
+          rules: 'MUST use for all code display. Use for technical content requiring fixed-width characters.',
+        },
+      },
+    },
+  },
+}

package/src/tokens/functional/typography/typography.json5

@@ -1,46 +1,4 @@
 {
-  fontStack: {
-    system: {
-      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      $type: 'fontFamily',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'typography',
-          scopes: ['fontFamily'],
-        },
-      },
-    },
-    sansSerif: {
-      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      $type: 'fontFamily',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'typography',
-          scopes: ['fontFamily'],
-        },
-      },
-    },
-    sansSerifDisplay: {
-      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-      $type: 'fontFamily',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'typography',
-          scopes: ['fontFamily'],
-        },
-      },
-    },
-    monospace: {
-      $value: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
-      $type: 'fontFamily',
-      $extensions: {
-        'org.primer.figma': {
-          collection: 'typography',
-          scopes: ['fontFamily'],
-        },
-      },
-    },
-  },
   text: {
     display: {
       lineBoxHeight: {
@@ -99,6 +57,12 @@
         },
         $type: 'typography',
         $description: 'Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['hero-section', 'landing-page', 'marketing-header'],
+            rules: 'Use sparingly for hero sections. Switch to title.large on narrow viewports.',
+          },
+        },
       },
     },
     title: {
@@ -217,6 +181,12 @@
           },
           $type: 'typography',
           $description: 'Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['page-heading', 'issue-title', 'pr-title', 'h1'],
+              rules: 'Use for primary page headings. Switch to title.medium on narrow viewports.',
+            },
+          },
         },
         medium: {
           $value: {
@@ -227,6 +197,12 @@
           },
           $type: 'typography',
           $description: 'Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['section-heading', 'card-title', 'dialog-title', 'h2'],
+              rules: 'RECOMMENDED default for page titles. Use for section headings and dialog titles.',
+            },
+          },
         },
         small: {
           $value: {
@@ -237,6 +213,12 @@
           },
           $type: 'typography',
           $description: 'Uses the same size as body (large) with a heavier weight of semibold (600).',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['subsection-heading', 'list-title', 'h3', 'sidebar-heading'],
+              rules: 'Use for smaller headings within sections. Same size as body.large but semibold.',
+            },
+          },
         },
       },
     },
@@ -283,6 +265,12 @@
         },
         $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).',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['subtitle', 'description', 'secondary-heading', 'lead-text'],
+            rules: 'Use below titles for supporting text. Normal weight distinguishes from title styles.',
+          },
+        },
       },
     },
     body: {
@@ -379,6 +367,12 @@
           },
           $type: 'typography',
           $description: 'User-generated content, markdown rendering.',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['markdown-content', 'article-text', 'readme', 'comment-body'],
+              rules: 'Use for user-generated content and markdown. Better readability for longer text.',
+            },
+          },
         },
         medium: {
           $value: {
@@ -389,6 +383,12 @@
           },
           $type: 'typography',
           $description: 'Default UI font. Most commonly used for body text.',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['body-text', 'ui-text', 'form-label', 'button-text', 'navigation'],
+              rules: 'RECOMMENDED default for UI text. Use for buttons, labels, and general interface text.',
+            },
+          },
         },
         small: {
           $value: {
@@ -399,6 +399,12 @@
           },
           $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.',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['helper-text', 'footnote', 'metadata', 'timestamp'],
+              rules: 'Use sparingly for secondary information. Do NOT use for primary content or interactive elements.',
+            },
+          },
         },
       },
     },
@@ -445,11 +451,17 @@
         },
         $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.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['caption', 'label', 'badge-text', 'single-line-metadata'],
+            rules: 'Use only for single-line or short text. Does NOT meet accessibility requirements for body text.',
+          },
+        },
       },
     },
     codeBlock: {
       size: {
-        $value: '13px',
+        $value: {value: 13, unit: 'px'},
         $type: 'dimension',
         $extensions: {
           'org.primer.figma': {
@@ -490,11 +502,20 @@
         },
         $type: 'typography',
         $description: 'Default style for rendering code blocks.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['code-block', 'pre-element', 'code-snippet', 'terminal-output'],
+            rules: 'MUST use for multi-line code. Use monospace font stack.',
+          },
+        },
       },
     },
     codeInline: {
       size: {
-        $value: '0.9285em',
+        $value: {
+          value: 0.9285,
+          unit: 'em',
+        },
         $type: 'dimension',
         $extensions: {
           'org.primer.figma': {
@@ -521,6 +542,12 @@
         },
         $type: 'typography',
         $description: 'Inline code blocks using em units to inherit size from its parent.',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['inline-code', 'code-element', 'variable-name', 'command'],
+            rules: 'Use for inline code within text. Size inherits from parent using em units.',
+          },
+        },
       },
     },
   },

package/dist/build/parsers/index.d.ts

@@ -1 +0,0 @@
-export { w3cJsonParser } from './w3cJsonParser.js';

package/dist/build/parsers/index.js

@@ -1 +0,0 @@
-export { w3cJsonParser } from './w3cJsonParser.js';

package/dist/build/parsers/w3cJsonParser.d.ts

@@ -1,6 +0,0 @@
-import type { Parser } from 'style-dictionary/types';
-/**
- * @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
- * @pattern supported file extensions `.json` or `.json5`
- */
-export declare const w3cJsonParser: Parser;

package/dist/build/parsers/w3cJsonParser.js

@@ -1,25 +0,0 @@
-import JSON5 from 'json5';
-/**
- * @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
- * @pattern supported file extensions `.json` or `.json5`
- */
-export const w3cJsonParser = {
-    name: 'w3cJsonParser',
-    pattern: /\.json5?$/,
-    parser: ({ filePath, contents }) => {
-        // replace $value with value so that style dictionary recognizes it
-        try {
-            contents = contents
-                .replace(/["|']?\$value["|']?:/g, '"value":')
-                // convert $description to comment
-                .replace(/["|']?\$?description["|']?:/g, '"comment":')
-                .replace(/["|']?\$?type["|']?:/g, '"$type":')
-                .replace(/["|']?\$?extensions["|']?:/g, '"$extensions":');
-            //
-            return JSON5.parse(contents);
-        }
-        catch (error) {
-            throw new Error(`Invalid json5 file "${filePath}". Error: ${error}`);
-        }
-    },
-};

package/dist/removed/testing.json5

@@ -1,4 +0,0 @@
-/* rename token to trigger actions to run on token change */
-{
-  "testing": null 
-}

package/src/tokens/removed/testing.json5

@@ -1,4 +0,0 @@
-/* rename token to trigger actions to run on token change */
-{
-  "testing": null 
-}