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

package/src/tokens/base/motion/timing.json5

@@ -2,51 +2,51 @@
   base: {
     duration: {
       '0': {
-        $value: '0ms',
+        $value: {value: 0, unit: 'ms'},
         $type: 'duration',
       },
       '50': {
-        $value: '50ms',
+        $value: {value: 50, unit: 'ms'},
         $type: 'duration',
       },
       '100': {
-        $value: '100ms',
+        $value: {value: 100, unit: 'ms'},
         $type: 'duration',
       },
       '200': {
-        $value: '200ms',
+        $value: {value: 200, unit: 'ms'},
         $type: 'duration',
       },
       '300': {
-        $value: '300ms',
+        $value: {value: 300, unit: 'ms'},
         $type: 'duration',
       },
       '400': {
-        $value: '400ms',
+        $value: {value: 400, unit: 'ms'},
         $type: 'duration',
       },
       '500': {
-        $value: '500ms',
+        $value: {value: 500, unit: 'ms'},
         $type: 'duration',
       },
       '600': {
-        $value: '600ms',
+        $value: {value: 600, unit: 'ms'},
         $type: 'duration',
       },
       '700': {
-        $value: '700ms',
+        $value: {value: 700, unit: 'ms'},
         $type: 'duration',
       },
       '800': {
-        $value: '800ms',
+        $value: {value: 800, unit: 'ms'},
         $type: 'duration',
       },
       '900': {
-        $value: '900ms',
+        $value: {value: 900, unit: 'ms'},
         $type: 'duration',
       },
       '1000': {
-        $value: '1000ms',
+        $value: {value: 1000, unit: 'ms'},
         $type: 'duration',
       },
     },

package/src/tokens/base/size/size.json5

@@ -2,7 +2,7 @@
   "base": {
     "size": {
       "2": {
-        "$value": "2px",
+        "$value": { "value": 2, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -12,7 +12,7 @@
         }
       },
       "4": {
-        "$value": "4px",
+        "$value": { "value": 4, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -22,7 +22,7 @@
         }
       },
       "6": {
-        "$value": "6px",
+        "$value": { "value": 6, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -32,7 +32,7 @@
         }
       },
       "8": {
-        "$value": "8px",
+        "$value": { "value": 8, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -42,7 +42,7 @@
         }
       },
       "12": {
-        "$value": "12px",
+        "$value": { "value": 12, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -52,7 +52,7 @@
         }
       },
       "16": {
-        "$value": "16px",
+        "$value": { "value": 16, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -62,7 +62,7 @@
         }
       },
       "20": {
-        "$value": "20px",
+        "$value": { "value": 20, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -72,7 +72,7 @@
         }
       },
       "24": {
-        "$value": "24px",
+        "$value": { "value": 24, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -82,7 +82,7 @@
         }
       },
       "28": {
-        "$value": "28px",
+        "$value": { "value": 28, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -92,7 +92,7 @@
         }
       },
       "32": {
-        "$value": "32px",
+        "$value": { "value": 32, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -102,7 +102,7 @@
         }
       },
       "36": {
-        "$value": "36px",
+        "$value": { "value": 36, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -112,7 +112,7 @@
         }
       },
       "40": {
-        "$value": "40px",
+        "$value": { "value": 40, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -122,7 +122,7 @@
         }
       },
       "44": {
-        "$value": "44px",
+        "$value": { "value": 44, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -132,7 +132,7 @@
         }
       },
       "48": {
-        "$value": "48px",
+        "$value": { "value": 48, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -142,7 +142,7 @@
         }
       },
       "64": {
-        "$value": "64px",
+        "$value": { "value": 64, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -152,7 +152,7 @@
         }
       },
       "80": {
-        "$value": "80px",
+        "$value": { "value": 80, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -162,7 +162,7 @@
         }
       },
       "96": {
-        "$value": "96px",
+        "$value": { "value": 96, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -172,7 +172,7 @@
         }
       },
       "112": {
-        "$value": "112px",
+        "$value": { "value": 112, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {
@@ -182,7 +182,7 @@
         }
       },
       "128": {
-        "$value": "128px",
+        "$value": { "value": 128, "unit": "px" },
         "$type": "dimension",
         "$extensions": {
           "org.primer.figma": {

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

@@ -3,7 +3,7 @@
     text: {
       size: {
         xs: {
-          $value: '0.75rem',
+          $value: {value: 0.75, unit: 'rem'},
           $type: 'dimension',
           $description: '12px - Smallest text size for captions and compact UI elements.',
           $extensions: {
@@ -14,7 +14,7 @@
           },
         },
         sm: {
-          $value: '0.875rem',
+          $value: {value: 0.875, unit: 'rem'},
           $type: 'dimension',
           $description: '14px - Default body text size for UI.',
           $extensions: {
@@ -25,7 +25,7 @@
           },
         },
         md: {
-          $value: '1rem',
+          $value: {value: 1, unit: 'rem'},
           $type: 'dimension',
           $description: '16px - Large body text and small titles.',
           $extensions: {
@@ -36,7 +36,7 @@
           },
         },
         lg: {
-          $value: '1.25rem',
+          $value: {value: 1.25, unit: 'rem'},
           $type: 'dimension',
           $description: '20px - Medium titles and subtitles.',
           $extensions: {
@@ -47,7 +47,7 @@
           },
         },
         xl: {
-          $value: '2rem',
+          $value: {value: 2, unit: 'rem'},
           $type: 'dimension',
           $description: '32px - Large titles and page headings.',
           $extensions: {
@@ -58,7 +58,7 @@
           },
         },
         '2xl': {
-          $value: '2.5rem',
+          $value: {value: 2.5, unit: 'rem'},
           $type: 'dimension',
           $description: '40px - Display text for hero sections.',
           $extensions: {

package/src/tokens/functional/border/border.json5

@@ -7,9 +7,23 @@
         width: '2px',
       },
       $type: 'border',
+      $description: 'Focus ring outline for keyboard navigation and accessibility.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['focus-ring', 'keyboard-navigation', 'accessibility-indicator'],
+          rules: 'Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls.',
+        },
+      },
     },
   },
   border: {
+    $description: 'Semantic border tokens combining color, style, and width for consistent UI boundaries.',
+    $extensions: {
+      'org.primer.llm': {
+        usage: ['container-border', 'card-border', 'divider', 'input-border', 'panel-border'],
+        rules: 'Use default for standard container borders. Use muted for subtle dividers and low-emphasis boundaries. Use emphasis when borders need to stand out. Match status border colors to their semantic meaning (danger for errors, success for positive states). Use disabled only for non-interactive or disabled elements. Prefer semantic variants (open/closed, done) over raw color variants when the context matches.',
+      },
+    },
     default: {
       $value: {
         color: '{borderColor.default}',
@@ -51,6 +65,7 @@
       $type: 'border',
     },
     neutral: {
+      $description: 'Neutral gray borders for non-semantic boundaries and subtle UI separation.',
       emphasis: {
         $value: {
           color: '{borderColor.neutral.emphasis}',
@@ -69,6 +84,7 @@
       },
     },
     accent: {
+      $description: 'Accent-colored borders for selected, focused, or highlighted elements.',
       emphasis: {
         $value: {
           color: '{borderColor.accent.emphasis}',
@@ -87,6 +103,7 @@
       },
     },
     success: {
+      $description: 'Green borders for positive states, confirmations, and successful operations.',
       emphasis: {
         $value: {
           color: '{borderColor.success.emphasis}',
@@ -105,6 +122,7 @@
       },
     },
     open: {
+      $description: 'Borders for open state indicators. Use for open pull requests, issues, and discussions. Aliases border.success.',
       emphasis: {
         $value: '{border.success.emphasis}',
         $type: 'border',
@@ -115,6 +133,7 @@
       },
     },
     danger: {
+      $description: 'Red borders for errors, destructive actions, and critical warnings.',
       emphasis: {
         $value: {
           color: '{borderColor.danger.emphasis}',
@@ -133,6 +152,7 @@
       },
     },
     closed: {
+      $description: 'Borders for closed state indicators. Use for closed pull requests, issues, and discussions. Aliases border.danger.',
       emphasis: {
         $value: '{border.danger.emphasis}',
         $type: 'border',
@@ -143,6 +163,7 @@
       },
     },
     attention: {
+      $description: 'Yellow borders for warnings, caution states, and items requiring user attention.',
       emphasis: {
         $value: {
           color: '{borderColor.attention.emphasis}',
@@ -161,6 +182,7 @@
       },
     },
     severe: {
+      $description: 'Orange borders for severe warnings, more urgent than attention but less critical than danger.',
       emphasis: {
         $value: {
           color: '{borderColor.severe.emphasis}',
@@ -179,6 +201,7 @@
       },
     },
     done: {
+      $description: 'Purple borders for completed or merged states. Use for merged pull requests and completed items.',
       emphasis: {
         $value: {
           color: '{borderColor.done.emphasis}',
@@ -197,6 +220,7 @@
       },
     },
     upsell: {
+      $description: 'Borders for promotional content and feature upsells. Use for upgrade prompts and premium feature highlights.',
       emphasis: {
         $value: {
           color: '{borderColor.upsell.emphasis}',
@@ -215,6 +239,7 @@
       },
     },
     sponsors: {
+      $description: 'Borders for GitHub Sponsors content and sponsor-related UI elements.',
       emphasis: {
         $value: {
           color: '{borderColor.sponsors.emphasis}',