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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
  4. package/dist/build/filters/hasLlmExtensions.js +11 -0
  5. package/dist/build/filters/index.d.ts +1 -0
  6. package/dist/build/filters/index.js +1 -0
  7. package/dist/build/formats/index.d.ts +1 -0
  8. package/dist/build/formats/index.js +1 -0
  9. package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
  10. package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
  11. package/dist/build/platforms/index.d.ts +1 -0
  12. package/dist/build/platforms/index.js +1 -0
  13. package/dist/build/platforms/llmGuidelines.d.ts +2 -0
  14. package/dist/build/platforms/llmGuidelines.js +17 -0
  15. package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
  16. package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
  17. package/dist/build/primerStyleDictionary.js +7 -1
  18. package/dist/build/schemas/borderToken.d.ts +22 -2
  19. package/dist/build/schemas/borderToken.js +6 -0
  20. package/dist/build/schemas/colorToken.d.ts +4 -0
  21. package/dist/build/schemas/colorToken.js +2 -0
  22. package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
  23. package/dist/build/schemas/cubicBezierToken.js +10 -2
  24. package/dist/build/schemas/designToken.d.ts +1 -1
  25. package/dist/build/schemas/designToken.js +113 -21
  26. package/dist/build/schemas/dimensionToken.d.ts +14 -3
  27. package/dist/build/schemas/dimensionToken.js +6 -2
  28. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  29. package/dist/build/schemas/dimensionValue.js +20 -1
  30. package/dist/build/schemas/durationToken.d.ts +13 -1
  31. package/dist/build/schemas/durationToken.js +6 -0
  32. package/dist/build/schemas/durationValue.d.ts +11 -1
  33. package/dist/build/schemas/durationValue.js +13 -3
  34. package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
  35. package/dist/build/schemas/fontFamilyToken.js +2 -0
  36. package/dist/build/schemas/fontWeightToken.d.ts +4 -0
  37. package/dist/build/schemas/fontWeightToken.js +2 -0
  38. package/dist/build/schemas/gradientToken.d.ts +4 -0
  39. package/dist/build/schemas/gradientToken.js +2 -0
  40. package/dist/build/schemas/llmExtension.d.ts +9 -0
  41. package/dist/build/schemas/llmExtension.js +11 -0
  42. package/dist/build/schemas/numberToken.d.ts +4 -0
  43. package/dist/build/schemas/numberToken.js +2 -0
  44. package/dist/build/schemas/shadowToken.d.ts +676 -84
  45. package/dist/build/schemas/shadowToken.js +2 -0
  46. package/dist/build/schemas/stringToken.d.ts +6 -0
  47. package/dist/build/schemas/stringToken.js +6 -0
  48. package/dist/build/schemas/transitionToken.d.ts +20 -2
  49. package/dist/build/schemas/transitionToken.js +6 -0
  50. package/dist/build/schemas/typographyToken.d.ts +38 -4
  51. package/dist/build/schemas/typographyToken.js +6 -0
  52. package/dist/build/schemas/validTokenType.d.ts +5 -1
  53. package/dist/build/schemas/validTokenType.js +71 -17
  54. package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
  55. package/dist/build/schemas/viewportRangeToken.js +6 -0
  56. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  57. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  58. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  59. package/dist/build/transformers/dimensionToRem.js +21 -22
  60. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  61. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  62. package/dist/build/transformers/durationToCss.d.ts +2 -1
  63. package/dist/build/transformers/durationToCss.js +18 -11
  64. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  65. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  66. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  67. package/dist/css/base/motion/motion.css +5 -4
  68. package/dist/css/functional/size/border.css +9 -14
  69. package/dist/css/functional/size/radius.css +7 -0
  70. package/dist/css/functional/size/size-coarse.css +3 -3
  71. package/dist/css/functional/size/size-fine.css +3 -3
  72. package/dist/css/functional/size/viewport.css +1 -1
  73. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
  74. package/dist/css/functional/themes/dark-colorblind.css +194 -190
  75. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
  76. package/dist/css/functional/themes/dark-dimmed.css +194 -190
  77. package/dist/css/functional/themes/dark-high-contrast.css +194 -190
  78. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
  79. package/dist/css/functional/themes/dark-tritanopia.css +194 -190
  80. package/dist/css/functional/themes/dark.css +194 -190
  81. package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
  82. package/dist/css/functional/themes/light-colorblind.css +194 -190
  83. package/dist/css/functional/themes/light-high-contrast.css +194 -190
  84. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
  85. package/dist/css/functional/themes/light-tritanopia.css +194 -190
  86. package/dist/css/functional/themes/light.css +194 -190
  87. package/dist/css/functional/typography/typography.css +4 -4
  88. package/dist/css/primitives.css +5 -0
  89. package/dist/docs/base/motion/motion.json +181 -32
  90. package/dist/docs/base/size/size.json +76 -19
  91. package/dist/docs/base/typography/typography.json +24 -6
  92. package/dist/docs/functional/size/border.json +62 -182
  93. package/dist/docs/functional/size/breakpoints.json +24 -6
  94. package/dist/docs/functional/size/radius.json +221 -0
  95. package/dist/docs/functional/size/size-coarse.json +45 -3
  96. package/dist/docs/functional/size/size-fine.json +45 -3
  97. package/dist/docs/functional/size/size.json +60 -15
  98. package/dist/docs/functional/size/viewport.json +2 -2
  99. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
  100. package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
  101. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
  102. package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
  103. package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
  104. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
  105. package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
  106. package/dist/docs/functional/themes/dark.json +1043 -97
  107. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
  108. package/dist/docs/functional/themes/light-colorblind.json +1049 -103
  109. package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
  110. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
  111. package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
  112. package/dist/docs/functional/themes/light.json +1049 -103
  113. package/dist/docs/functional/typography/typography.json +180 -10
  114. package/dist/fallbacks/base/motion/motion.json +49 -12
  115. package/dist/fallbacks/functional/size/border.json +0 -5
  116. package/dist/fallbacks/functional/size/radius.json +7 -0
  117. package/dist/fallbacks/functional/size/viewport.json +1 -1
  118. package/dist/figma/dimension/dimension.json +30 -20
  119. package/dist/figma/themes/dark-colorblind.json +85 -0
  120. package/dist/figma/themes/dark-dimmed.json +134 -49
  121. package/dist/figma/themes/dark-high-contrast.json +85 -0
  122. package/dist/figma/themes/dark-tritanopia.json +85 -0
  123. package/dist/figma/themes/dark.json +85 -0
  124. package/dist/figma/themes/light-colorblind.json +89 -4
  125. package/dist/figma/themes/light-high-contrast.json +89 -4
  126. package/dist/figma/themes/light-tritanopia.json +89 -4
  127. package/dist/figma/themes/light.json +89 -4
  128. package/dist/figma/typography/typography.json +44 -40
  129. package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
  130. package/dist/internalCss/dark-colorblind.css +208 -218
  131. package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
  132. package/dist/internalCss/dark-dimmed.css +208 -218
  133. package/dist/internalCss/dark-high-contrast.css +208 -218
  134. package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
  135. package/dist/internalCss/dark-tritanopia.css +208 -218
  136. package/dist/internalCss/dark.css +208 -218
  137. package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
  138. package/dist/internalCss/light-colorblind.css +208 -218
  139. package/dist/internalCss/light-high-contrast.css +208 -218
  140. package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
  141. package/dist/internalCss/light-tritanopia.css +208 -218
  142. package/dist/internalCss/light.css +208 -218
  143. package/dist/styleLint/base/motion/motion.json +181 -32
  144. package/dist/styleLint/base/size/size.json +76 -19
  145. package/dist/styleLint/base/typography/typography.json +30 -12
  146. package/dist/styleLint/functional/size/border.json +55 -175
  147. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  148. package/dist/styleLint/functional/size/radius.json +221 -0
  149. package/dist/styleLint/functional/size/size-coarse.json +45 -3
  150. package/dist/styleLint/functional/size/size-fine.json +45 -3
  151. package/dist/styleLint/functional/size/size.json +111 -66
  152. package/dist/styleLint/functional/size/viewport.json +2 -2
  153. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
  154. package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
  155. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
  156. package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
  157. package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
  158. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
  159. package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
  160. package/dist/styleLint/functional/themes/dark.json +975 -29
  161. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
  162. package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
  163. package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
  164. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
  165. package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
  166. package/dist/styleLint/functional/themes/light.json +981 -35
  167. package/dist/styleLint/functional/typography/typography.json +196 -26
  168. package/package.json +6 -3
  169. package/src/tokens/base/motion/easing.json5 +39 -4
  170. package/src/tokens/base/motion/timing.json5 +12 -12
  171. package/src/tokens/base/size/size.json5 +19 -19
  172. package/src/tokens/base/typography/typography.json5 +6 -6
  173. package/src/tokens/functional/border/border.json5 +25 -0
  174. package/src/tokens/functional/color/bgColor.json5 +165 -0
  175. package/src/tokens/functional/color/borderColor.json5 +146 -0
  176. package/src/tokens/functional/color/control.json5 +24 -0
  177. package/src/tokens/functional/color/data-vis.json5 +7 -0
  178. package/src/tokens/functional/color/display.json5 +7 -0
  179. package/src/tokens/functional/color/fgColor.json5 +101 -1
  180. package/src/tokens/functional/color/focus.json5 +5 -0
  181. package/src/tokens/functional/color/selection.json5 +5 -0
  182. package/src/tokens/functional/color/syntax.json5 +14 -0
  183. package/src/tokens/functional/shadow/shadow.json5 +49 -4
  184. package/src/tokens/functional/size/border.json5 +22 -74
  185. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  186. package/src/tokens/functional/size/radius.json5 +90 -0
  187. package/src/tokens/functional/size/size-coarse.json5 +24 -3
  188. package/src/tokens/functional/size/size-fine.json5 +45 -24
  189. package/src/tokens/functional/size/size.json5 +50 -15
  190. package/src/tokens/functional/size/viewport.json5 +1 -1
  191. package/src/tokens/functional/typography/font-stack.json5 +60 -0
  192. package/src/tokens/functional/typography/typography.json5 +71 -44
  193. package/dist/build/parsers/index.d.ts +0 -1
  194. package/dist/build/parsers/index.js +0 -1
  195. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  196. package/dist/build/parsers/w3cJsonParser.js +0 -25
  197. package/dist/removed/testing.json5 +0 -4
  198. package/src/tokens/removed/testing.json5 +0 -4
@@ -310,6 +310,10 @@
310
310
  "dark-dimmed-high-contrast": "#2672f3",
311
311
  "dark-tritanopia-high-contrast": "#194fb1",
312
312
  "dark-protanopia-deuteranopia-high-contrast": "#194fb1"
313
+ },
314
+ "org.primer.llm": {
315
+ "usage": ["active-states", "current", "selected", "active-toggle"],
316
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
313
317
  }
314
318
  },
315
319
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -317,6 +321,7 @@
317
321
  "original": {
318
322
  "$value": "{base.color.blue.9}",
319
323
  "$type": "color",
324
+ "$description": "Strong accent background for active states and focused states",
320
325
  "$extensions": {
321
326
  "org.primer.figma": {
322
327
  "collection": "mode",
@@ -332,6 +337,10 @@
332
337
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
333
338
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
334
339
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
340
+ },
341
+ "org.primer.llm": {
342
+ "usage": ["active-states", "current", "selected", "active-toggle"],
343
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
335
344
  }
336
345
  },
337
346
  "key": "{bgColor.accent.emphasis}"
@@ -340,7 +349,8 @@
340
349
  "attributes": {},
341
350
  "path": ["bgColor", "accent", "emphasis"],
342
351
  "value": "#194fb1",
343
- "type": "color"
352
+ "type": "color",
353
+ "description": "Strong accent background for active states and focused states"
344
354
  },
345
355
  "bgColor-accent-muted": {
346
356
  "key": "{bgColor.accent.muted}",
@@ -361,6 +371,10 @@
361
371
  "isSource": true,
362
372
  "$type": "color"
363
373
  }
374
+ },
375
+ "org.primer.llm": {
376
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
377
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
364
378
  }
365
379
  },
366
380
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -369,6 +383,7 @@
369
383
  "original": {
370
384
  "$value": "{base.color.blue.4}",
371
385
  "$type": "color",
386
+ "$description": "Subtle accent background for informational or selected elements",
372
387
  "$extensions": {
373
388
  "org.primer.figma": {
374
389
  "collection": "mode",
@@ -386,6 +401,10 @@
386
401
  "isSource": true,
387
402
  "$type": "color"
388
403
  }
404
+ },
405
+ "org.primer.llm": {
406
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
407
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
389
408
  }
390
409
  },
391
410
  "alpha": 0.1,
@@ -395,7 +414,8 @@
395
414
  "attributes": {},
396
415
  "path": ["bgColor", "accent", "muted"],
397
416
  "value": "#5cacff1a",
398
- "type": "color"
417
+ "type": "color",
418
+ "description": "Subtle accent background for informational or selected elements"
399
419
  },
400
420
  "bgColor-attention-emphasis": {
401
421
  "key": "{bgColor.attention.emphasis}",
@@ -413,6 +433,10 @@
413
433
  "dark-dimmed-high-contrast": "#ae7104",
414
434
  "dark-protanopia-deuteranopia-high-contrast": "#7b4900",
415
435
  "dark-tritanopia-high-contrast": "#7b4900"
436
+ },
437
+ "org.primer.llm": {
438
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
439
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
416
440
  }
417
441
  },
418
442
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -420,6 +444,7 @@
420
444
  "original": {
421
445
  "$value": "{base.color.yellow.9}",
422
446
  "$type": "color",
447
+ "$description": "Strong attention background for prominent warnings",
423
448
  "$extensions": {
424
449
  "org.primer.figma": {
425
450
  "collection": "mode",
@@ -434,6 +459,10 @@
434
459
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
435
460
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
436
461
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
462
+ },
463
+ "org.primer.llm": {
464
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
465
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
437
466
  }
438
467
  },
439
468
  "key": "{bgColor.attention.emphasis}"
@@ -442,7 +471,8 @@
442
471
  "attributes": {},
443
472
  "path": ["bgColor", "attention", "emphasis"],
444
473
  "value": "#7b4900",
445
- "type": "color"
474
+ "type": "color",
475
+ "description": "Strong attention background for prominent warnings"
446
476
  },
447
477
  "bgColor-attention-muted": {
448
478
  "key": "{bgColor.attention.muted}",
@@ -463,6 +493,10 @@
463
493
  "isSource": true,
464
494
  "$type": "color"
465
495
  }
496
+ },
497
+ "org.primer.llm": {
498
+ "usage": ["warning-banner", "caution-message", "pending-state"],
499
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
466
500
  }
467
501
  },
468
502
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -471,6 +505,7 @@
471
505
  "original": {
472
506
  "$value": "{base.color.yellow.4}",
473
507
  "$type": "color",
508
+ "$description": "Subtle attention background for warnings and caution states",
474
509
  "$extensions": {
475
510
  "org.primer.figma": {
476
511
  "collection": "mode",
@@ -488,6 +523,10 @@
488
523
  "isSource": true,
489
524
  "$type": "color"
490
525
  }
526
+ },
527
+ "org.primer.llm": {
528
+ "usage": ["warning-banner", "caution-message", "pending-state"],
529
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
491
530
  }
492
531
  },
493
532
  "alpha": 0.15,
@@ -497,7 +536,8 @@
497
536
  "attributes": {},
498
537
  "path": ["bgColor", "attention", "muted"],
499
538
  "value": "#edaa2726",
500
- "type": "color"
539
+ "type": "color",
540
+ "description": "Subtle attention background for warnings and caution states"
501
541
  },
502
542
  "bgColor-black": {
503
543
  "key": "{bgColor.black}",
@@ -509,6 +549,10 @@
509
549
  },
510
550
  "org.primer.overrides": {
511
551
  "dark": "#010409"
552
+ },
553
+ "org.primer.llm": {
554
+ "doNotUse": true,
555
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
512
556
  }
513
557
  },
514
558
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -516,6 +560,7 @@
516
560
  "original": {
517
561
  "$value": "{base.color.neutral.0}",
518
562
  "$type": "color",
563
+ "$description": "Pure black background",
519
564
  "$extensions": {
520
565
  "org.primer.figma": {
521
566
  "collection": "mode",
@@ -524,6 +569,10 @@
524
569
  },
525
570
  "org.primer.overrides": {
526
571
  "dark": "{base.color.neutral.0}"
572
+ },
573
+ "org.primer.llm": {
574
+ "doNotUse": true,
575
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
527
576
  }
528
577
  },
529
578
  "key": "{bgColor.black}"
@@ -532,7 +581,8 @@
532
581
  "attributes": {},
533
582
  "path": ["bgColor", "black"],
534
583
  "value": "#010409",
535
- "type": "color"
584
+ "type": "color",
585
+ "description": "Pure black background"
536
586
  },
537
587
  "bgColor-closed-emphasis": {
538
588
  "key": "{bgColor.closed.emphasis}",
@@ -554,6 +604,10 @@
554
604
  "light-protanopia-deuteranopia-high-contrast": "#3d444d",
555
605
  "dark-protanopia-deuteranopia": "#3d444d",
556
606
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
607
+ },
608
+ "org.primer.llm": {
609
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
610
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
557
611
  }
558
612
  },
559
613
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -561,6 +615,7 @@
561
615
  "original": {
562
616
  "$value": "{bgColor.neutral.emphasis}",
563
617
  "$type": "color",
618
+ "$description": "Strong background for closed state badges and labels",
564
619
  "$extensions": {
565
620
  "org.primer.figma": {
566
621
  "collection": "mode",
@@ -579,6 +634,10 @@
579
634
  "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
580
635
  "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
581
636
  "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
637
+ },
638
+ "org.primer.llm": {
639
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
640
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
582
641
  }
583
642
  },
584
643
  "key": "{bgColor.closed.emphasis}"
@@ -587,7 +646,8 @@
587
646
  "attributes": {},
588
647
  "path": ["bgColor", "closed", "emphasis"],
589
648
  "value": "#3d444d",
590
- "type": "color"
649
+ "type": "color",
650
+ "description": "Strong background for closed state badges and labels"
591
651
  },
592
652
  "bgColor-closed-muted": {
593
653
  "key": "{bgColor.closed.muted}",
@@ -626,6 +686,10 @@
626
686
  "isSource": true,
627
687
  "$type": "color"
628
688
  }
689
+ },
690
+ "org.primer.llm": {
691
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
692
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
629
693
  }
630
694
  },
631
695
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -633,6 +697,7 @@
633
697
  "original": {
634
698
  "$value": "{bgColor.danger.muted}",
635
699
  "$type": "color",
700
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
636
701
  "$extensions": {
637
702
  "org.primer.figma": {
638
703
  "collection": "mode",
@@ -668,6 +733,10 @@
668
733
  "isSource": true,
669
734
  "$type": "color"
670
735
  }
736
+ },
737
+ "org.primer.llm": {
738
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
739
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
671
740
  }
672
741
  },
673
742
  "key": "{bgColor.closed.muted}"
@@ -676,7 +745,8 @@
676
745
  "attributes": {},
677
746
  "path": ["bgColor", "closed", "muted"],
678
747
  "value": "#ff80801a",
679
- "type": "color"
748
+ "type": "color",
749
+ "description": "Subtle background for closed state indicators (issues, PRs)"
680
750
  },
681
751
  "bgColor-danger-emphasis": {
682
752
  "key": "{bgColor.danger.emphasis}",
@@ -697,6 +767,10 @@
697
767
  "dark-high-contrast": "#ad0116",
698
768
  "dark-dimmed-high-contrast": "#e82a2f",
699
769
  "dark-tritanopia-high-contrast": "#ad0116"
770
+ },
771
+ "org.primer.llm": {
772
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
773
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
700
774
  }
701
775
  },
702
776
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -704,6 +778,7 @@
704
778
  "original": {
705
779
  "$value": "{base.color.red.9}",
706
780
  "$type": "color",
781
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
707
782
  "$extensions": {
708
783
  "org.primer.figma": {
709
784
  "collection": "mode",
@@ -721,6 +796,10 @@
721
796
  "dark-high-contrast": "{base.color.red.9}",
722
797
  "dark-dimmed-high-contrast": "{base.color.red.7}",
723
798
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
799
+ },
800
+ "org.primer.llm": {
801
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
802
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
724
803
  }
725
804
  },
726
805
  "key": "{bgColor.danger.emphasis}"
@@ -729,7 +808,8 @@
729
808
  "attributes": {},
730
809
  "path": ["bgColor", "danger", "emphasis"],
731
810
  "value": "#ad0116",
732
- "type": "color"
811
+ "type": "color",
812
+ "description": "Emphasized danger background for critical errors and delete confirmations"
733
813
  },
734
814
  "bgColor-danger-muted": {
735
815
  "key": "{bgColor.danger.muted}",
@@ -759,6 +839,10 @@
759
839
  "isSource": true,
760
840
  "$type": "color"
761
841
  }
842
+ },
843
+ "org.primer.llm": {
844
+ "usage": ["error-message", "destructive-action", "validation-error"],
845
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
762
846
  }
763
847
  },
764
848
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -767,6 +851,7 @@
767
851
  "original": {
768
852
  "$value": "{base.color.red.4}",
769
853
  "$type": "color",
854
+ "$description": "Muted danger background for error states and destructive action contexts",
770
855
  "$extensions": {
771
856
  "org.primer.figma": {
772
857
  "collection": "mode",
@@ -793,6 +878,10 @@
793
878
  "isSource": true,
794
879
  "$type": "color"
795
880
  }
881
+ },
882
+ "org.primer.llm": {
883
+ "usage": ["error-message", "destructive-action", "validation-error"],
884
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
796
885
  }
797
886
  },
798
887
  "alpha": 0.1,
@@ -802,7 +891,8 @@
802
891
  "attributes": {},
803
892
  "path": ["bgColor", "danger", "muted"],
804
893
  "value": "#ff80801a",
805
- "type": "color"
894
+ "type": "color",
895
+ "description": "Muted danger background for error states and destructive action contexts"
806
896
  },
807
897
  "bgColor-default": {
808
898
  "key": "{bgColor.default}",
@@ -822,6 +912,10 @@
822
912
  "dark-high-contrast": "#010409",
823
913
  "dark-tritanopia-high-contrast": "#010409",
824
914
  "dark-protanopia-deuteranopia-high-contrast": "#010409"
915
+ },
916
+ "org.primer.llm": {
917
+ "usage": ["page-background", "main-content", "card-background"],
918
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
825
919
  }
826
920
  },
827
921
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -829,6 +923,7 @@
829
923
  "original": {
830
924
  "$value": "{base.color.neutral.0}",
831
925
  "$type": "color",
926
+ "$description": "Default background color for pages and main content areas",
832
927
  "$extensions": {
833
928
  "org.primer.figma": {
834
929
  "collection": "mode",
@@ -845,6 +940,10 @@
845
940
  "dark-high-contrast": "{base.color.neutral.0}",
846
941
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
847
942
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
943
+ },
944
+ "org.primer.llm": {
945
+ "usage": ["page-background", "main-content", "card-background"],
946
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
848
947
  }
849
948
  },
850
949
  "key": "{bgColor.default}"
@@ -853,7 +952,8 @@
853
952
  "attributes": {},
854
953
  "path": ["bgColor", "default"],
855
954
  "value": "#010409",
856
- "type": "color"
955
+ "type": "color",
956
+ "description": "Default background color for pages and main content areas"
857
957
  },
858
958
  "bgColor-disabled": {
859
959
  "key": "{bgColor.disabled}",
@@ -873,6 +973,10 @@
873
973
  "dark-high-contrast": "#262c36",
874
974
  "dark-tritanopia-high-contrast": "#262c36",
875
975
  "dark-protanopia-deuteranopia-high-contrast": "#262c36"
976
+ },
977
+ "org.primer.llm": {
978
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
979
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
876
980
  }
877
981
  },
878
982
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -880,6 +984,7 @@
880
984
  "original": {
881
985
  "$value": "{base.color.neutral.4}",
882
986
  "$type": "color",
987
+ "$description": "Background for disabled interactive elements",
883
988
  "$extensions": {
884
989
  "org.primer.figma": {
885
990
  "collection": "mode",
@@ -896,6 +1001,10 @@
896
1001
  "dark-high-contrast": "{base.color.neutral.4}",
897
1002
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
898
1003
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
1004
+ },
1005
+ "org.primer.llm": {
1006
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
1007
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
899
1008
  }
900
1009
  },
901
1010
  "key": "{bgColor.disabled}"
@@ -904,7 +1013,8 @@
904
1013
  "attributes": {},
905
1014
  "path": ["bgColor", "disabled"],
906
1015
  "value": "#262c36",
907
- "type": "color"
1016
+ "type": "color",
1017
+ "description": "Background for disabled interactive elements"
908
1018
  },
909
1019
  "bgColor-done-emphasis": {
910
1020
  "key": "{bgColor.done.emphasis}",
@@ -922,6 +1032,10 @@
922
1032
  "dark-dimmed-high-contrast": "#954ffd",
923
1033
  "dark-tritanopia-high-contrast": "#6921d7",
924
1034
  "dark-protanopia-deuteranopia-high-contrast": "#6921d7"
1035
+ },
1036
+ "org.primer.llm": {
1037
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1038
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
925
1039
  }
926
1040
  },
927
1041
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -929,6 +1043,7 @@
929
1043
  "original": {
930
1044
  "$value": "{base.color.purple.9}",
931
1045
  "$type": "color",
1046
+ "$description": "Strong background for completed/done state badges and labels",
932
1047
  "$extensions": {
933
1048
  "org.primer.figma": {
934
1049
  "collection": "mode",
@@ -943,6 +1058,10 @@
943
1058
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
944
1059
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
945
1060
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1061
+ },
1062
+ "org.primer.llm": {
1063
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1064
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
946
1065
  }
947
1066
  },
948
1067
  "key": "{bgColor.done.emphasis}"
@@ -951,7 +1070,8 @@
951
1070
  "attributes": {},
952
1071
  "path": ["bgColor", "done", "emphasis"],
953
1072
  "value": "#6921d7",
954
- "type": "color"
1073
+ "type": "color",
1074
+ "description": "Strong background for completed/done state badges and labels"
955
1075
  },
956
1076
  "bgColor-done-muted": {
957
1077
  "key": "{bgColor.done.muted}",
@@ -972,6 +1092,10 @@
972
1092
  "isSource": true,
973
1093
  "$type": "color"
974
1094
  }
1095
+ },
1096
+ "org.primer.llm": {
1097
+ "usage": ["completed-task", "merged-pr", "done-state"],
1098
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
975
1099
  }
976
1100
  },
977
1101
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -980,6 +1104,7 @@
980
1104
  "original": {
981
1105
  "$value": "{base.color.purple.4}",
982
1106
  "$type": "color",
1107
+ "$description": "Subtle background for completed/done state indicators",
983
1108
  "$extensions": {
984
1109
  "org.primer.figma": {
985
1110
  "collection": "mode",
@@ -997,6 +1122,10 @@
997
1122
  "isSource": true,
998
1123
  "$type": "color"
999
1124
  }
1125
+ },
1126
+ "org.primer.llm": {
1127
+ "usage": ["completed-task", "merged-pr", "done-state"],
1128
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
1000
1129
  }
1001
1130
  },
1002
1131
  "alpha": 0.15,
@@ -1006,7 +1135,8 @@
1006
1135
  "attributes": {},
1007
1136
  "path": ["bgColor", "done", "muted"],
1008
1137
  "value": "#bf8fff26",
1009
- "type": "color"
1138
+ "type": "color",
1139
+ "description": "Subtle background for completed/done state indicators"
1010
1140
  },
1011
1141
  "bgColor-draft-emphasis": {
1012
1142
  "key": "{bgColor.draft.emphasis}",
@@ -1018,6 +1148,10 @@
1018
1148
  "codeSyntax": {
1019
1149
  "web": "var(--bgColor-draft-emphasis)"
1020
1150
  }
1151
+ },
1152
+ "org.primer.llm": {
1153
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1154
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1021
1155
  }
1022
1156
  },
1023
1157
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1025,6 +1159,7 @@
1025
1159
  "original": {
1026
1160
  "$value": "{bgColor.neutral.emphasis}",
1027
1161
  "$type": "color",
1162
+ "$description": "Strong background for draft state badges and labels",
1028
1163
  "$extensions": {
1029
1164
  "org.primer.figma": {
1030
1165
  "collection": "mode",
@@ -1033,6 +1168,10 @@
1033
1168
  "codeSyntax": {
1034
1169
  "web": "var(--bgColor-draft-emphasis)"
1035
1170
  }
1171
+ },
1172
+ "org.primer.llm": {
1173
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1174
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1036
1175
  }
1037
1176
  },
1038
1177
  "key": "{bgColor.draft.emphasis}"
@@ -1041,7 +1180,8 @@
1041
1180
  "attributes": {},
1042
1181
  "path": ["bgColor", "draft", "emphasis"],
1043
1182
  "value": "#3d444d",
1044
- "type": "color"
1183
+ "type": "color",
1184
+ "description": "Strong background for draft state badges and labels"
1045
1185
  },
1046
1186
  "bgColor-draft-muted": {
1047
1187
  "key": "{bgColor.draft.muted}",
@@ -1080,6 +1220,10 @@
1080
1220
  "isSource": true,
1081
1221
  "$type": "color"
1082
1222
  }
1223
+ },
1224
+ "org.primer.llm": {
1225
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1226
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1083
1227
  }
1084
1228
  },
1085
1229
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1087,6 +1231,7 @@
1087
1231
  "original": {
1088
1232
  "$value": "{bgColor.neutral.muted}",
1089
1233
  "$type": "color",
1234
+ "$description": "Subtle background for draft state indicators",
1090
1235
  "$extensions": {
1091
1236
  "org.primer.figma": {
1092
1237
  "collection": "mode",
@@ -1122,6 +1267,10 @@
1122
1267
  "isSource": true,
1123
1268
  "$type": "color"
1124
1269
  }
1270
+ },
1271
+ "org.primer.llm": {
1272
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1273
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1125
1274
  }
1126
1275
  },
1127
1276
  "key": "{bgColor.draft.muted}"
@@ -1130,7 +1279,8 @@
1130
1279
  "attributes": {},
1131
1280
  "path": ["bgColor", "draft", "muted"],
1132
1281
  "value": "#212830",
1133
- "type": "color"
1282
+ "type": "color",
1283
+ "description": "Subtle background for draft state indicators"
1134
1284
  },
1135
1285
  "bgColor-emphasis": {
1136
1286
  "key": "{bgColor.emphasis}",
@@ -1145,6 +1295,10 @@
1145
1295
  },
1146
1296
  "org.primer.overrides": {
1147
1297
  "dark": "#3d444d"
1298
+ },
1299
+ "org.primer.llm": {
1300
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1301
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1148
1302
  }
1149
1303
  },
1150
1304
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1152,6 +1306,7 @@
1152
1306
  "original": {
1153
1307
  "$value": "{base.color.neutral.7}",
1154
1308
  "$type": "color",
1309
+ "$description": "High-emphasis dark background for strong visual contrast",
1155
1310
  "$extensions": {
1156
1311
  "org.primer.figma": {
1157
1312
  "collection": "mode",
@@ -1163,6 +1318,10 @@
1163
1318
  },
1164
1319
  "org.primer.overrides": {
1165
1320
  "dark": "{base.color.neutral.7}"
1321
+ },
1322
+ "org.primer.llm": {
1323
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1324
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1166
1325
  }
1167
1326
  },
1168
1327
  "key": "{bgColor.emphasis}"
@@ -1171,7 +1330,8 @@
1171
1330
  "attributes": {},
1172
1331
  "path": ["bgColor", "emphasis"],
1173
1332
  "value": "#3d444d",
1174
- "type": "color"
1333
+ "type": "color",
1334
+ "description": "High-emphasis dark background for strong visual contrast"
1175
1335
  },
1176
1336
  "bgColor-inset": {
1177
1337
  "key": "{bgColor.inset}",
@@ -1191,6 +1351,10 @@
1191
1351
  "light-high-contrast": "#151b23",
1192
1352
  "light-tritanopia-high-contrast": "#151b23",
1193
1353
  "light-protanopia-deuteranopia-high-contrast": "#151b23"
1354
+ },
1355
+ "org.primer.llm": {
1356
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1357
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1194
1358
  }
1195
1359
  },
1196
1360
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1198,6 +1362,7 @@
1198
1362
  "original": {
1199
1363
  "$value": "{base.color.neutral.0}",
1200
1364
  "$type": "color",
1365
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1201
1366
  "$extensions": {
1202
1367
  "org.primer.figma": {
1203
1368
  "collection": "mode",
@@ -1214,6 +1379,10 @@
1214
1379
  "light-high-contrast": "{base.color.neutral.2}",
1215
1380
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1216
1381
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1382
+ },
1383
+ "org.primer.llm": {
1384
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1385
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1217
1386
  }
1218
1387
  },
1219
1388
  "key": "{bgColor.inset}"
@@ -1222,7 +1391,8 @@
1222
1391
  "attributes": {},
1223
1392
  "path": ["bgColor", "inset"],
1224
1393
  "value": "#010409",
1225
- "type": "color"
1394
+ "type": "color",
1395
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1226
1396
  },
1227
1397
  "bgColor-inverse": {
1228
1398
  "key": "{bgColor.inverse}",
@@ -1234,6 +1404,10 @@
1234
1404
  },
1235
1405
  "org.primer.overrides": {
1236
1406
  "dark": "#ffffff"
1407
+ },
1408
+ "org.primer.llm": {
1409
+ "usage": ["overlay-content", "inverse-theme-element"],
1410
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1237
1411
  }
1238
1412
  },
1239
1413
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1241,6 +1415,7 @@
1241
1415
  "original": {
1242
1416
  "$value": "{base.color.neutral.13}",
1243
1417
  "$type": "color",
1418
+ "$description": "Inverse background that flips between light and dark modes",
1244
1419
  "$extensions": {
1245
1420
  "org.primer.figma": {
1246
1421
  "collection": "mode",
@@ -1249,6 +1424,10 @@
1249
1424
  },
1250
1425
  "org.primer.overrides": {
1251
1426
  "dark": "{base.color.neutral.13}"
1427
+ },
1428
+ "org.primer.llm": {
1429
+ "usage": ["overlay-content", "inverse-theme-element"],
1430
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1252
1431
  }
1253
1432
  },
1254
1433
  "key": "{bgColor.inverse}"
@@ -1257,7 +1436,8 @@
1257
1436
  "attributes": {},
1258
1437
  "path": ["bgColor", "inverse"],
1259
1438
  "value": "#ffffff",
1260
- "type": "color"
1439
+ "type": "color",
1440
+ "description": "Inverse background that flips between light and dark modes"
1261
1441
  },
1262
1442
  "bgColor-muted": {
1263
1443
  "key": "{bgColor.muted}",
@@ -1280,6 +1460,10 @@
1280
1460
  "dark-high-contrast": "#151b23",
1281
1461
  "dark-tritanopia-high-contrast": "#151b23",
1282
1462
  "dark-protanopia-deuteranopia-high-contrast": "#151b23"
1463
+ },
1464
+ "org.primer.llm": {
1465
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1466
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1283
1467
  }
1284
1468
  },
1285
1469
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1287,6 +1471,7 @@
1287
1471
  "original": {
1288
1472
  "$value": "{base.color.neutral.2}",
1289
1473
  "$type": "color",
1474
+ "$description": "Muted background for secondary content areas and subtle grouping",
1290
1475
  "$extensions": {
1291
1476
  "org.primer.figma": {
1292
1477
  "collection": "mode",
@@ -1306,6 +1491,10 @@
1306
1491
  "dark-high-contrast": "{base.color.neutral.2}",
1307
1492
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1308
1493
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1494
+ },
1495
+ "org.primer.llm": {
1496
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1497
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1309
1498
  }
1310
1499
  },
1311
1500
  "key": "{bgColor.muted}"
@@ -1314,7 +1503,8 @@
1314
1503
  "attributes": {},
1315
1504
  "path": ["bgColor", "muted"],
1316
1505
  "value": "#151b23",
1317
- "type": "color"
1506
+ "type": "color",
1507
+ "description": "Muted background for secondary content areas and subtle grouping"
1318
1508
  },
1319
1509
  "bgColor-neutral-emphasis": {
1320
1510
  "key": "{bgColor.neutral.emphasis}",
@@ -1334,6 +1524,10 @@
1334
1524
  "dark-high-contrast": "#3d444d",
1335
1525
  "dark-tritanopia-high-contrast": "#3d444d",
1336
1526
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
1527
+ },
1528
+ "org.primer.llm": {
1529
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1530
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1337
1531
  }
1338
1532
  },
1339
1533
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1341,6 +1535,7 @@
1341
1535
  "original": {
1342
1536
  "$value": "{base.color.neutral.7}",
1343
1537
  "$type": "color",
1538
+ "$description": "Strong neutral background for prominent neutral elements",
1344
1539
  "$extensions": {
1345
1540
  "org.primer.figma": {
1346
1541
  "collection": "mode",
@@ -1357,6 +1552,10 @@
1357
1552
  "dark-high-contrast": "{base.color.neutral.7}",
1358
1553
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1359
1554
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1555
+ },
1556
+ "org.primer.llm": {
1557
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1558
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1360
1559
  }
1361
1560
  },
1362
1561
  "key": "{bgColor.neutral.emphasis}"
@@ -1365,7 +1564,8 @@
1365
1564
  "attributes": {},
1366
1565
  "path": ["bgColor", "neutral", "emphasis"],
1367
1566
  "value": "#3d444d",
1368
- "type": "color"
1567
+ "type": "color",
1568
+ "description": "Strong neutral background for prominent neutral elements"
1369
1569
  },
1370
1570
  "bgColor-neutral-muted": {
1371
1571
  "key": "{bgColor.neutral.muted}",
@@ -1396,6 +1596,10 @@
1396
1596
  "dark-high-contrast": "#212830",
1397
1597
  "dark-tritanopia-high-contrast": "#212830",
1398
1598
  "dark-protanopia-deuteranopia-high-contrast": "#212830"
1599
+ },
1600
+ "org.primer.llm": {
1601
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1602
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1399
1603
  }
1400
1604
  },
1401
1605
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1403,6 +1607,7 @@
1403
1607
  "original": {
1404
1608
  "$value": "{base.color.neutral.3}",
1405
1609
  "$type": "color",
1610
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1406
1611
  "$extensions": {
1407
1612
  "org.primer.figma": {
1408
1613
  "collection": "mode",
@@ -1430,6 +1635,10 @@
1430
1635
  "dark-high-contrast": "{base.color.neutral.3}",
1431
1636
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1432
1637
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1638
+ },
1639
+ "org.primer.llm": {
1640
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1641
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1433
1642
  }
1434
1643
  },
1435
1644
  "key": "{bgColor.neutral.muted}"
@@ -1438,7 +1647,8 @@
1438
1647
  "attributes": {},
1439
1648
  "path": ["bgColor", "neutral", "muted"],
1440
1649
  "value": "#212830",
1441
- "type": "color"
1650
+ "type": "color",
1651
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1442
1652
  },
1443
1653
  "bgColor-open-emphasis": {
1444
1654
  "key": "{bgColor.open.emphasis}",
@@ -1460,6 +1670,10 @@
1460
1670
  "light-protanopia-deuteranopia-high-contrast": "#e7811d",
1461
1671
  "dark-protanopia-deuteranopia": "#e7811d",
1462
1672
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1673
+ },
1674
+ "org.primer.llm": {
1675
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1676
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1463
1677
  }
1464
1678
  },
1465
1679
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1467,6 +1681,7 @@
1467
1681
  "original": {
1468
1682
  "$value": "{base.color.red.9}",
1469
1683
  "$type": "color",
1684
+ "$description": "Strong background for open state badges and labels",
1470
1685
  "$extensions": {
1471
1686
  "org.primer.figma": {
1472
1687
  "collection": "mode",
@@ -1485,6 +1700,10 @@
1485
1700
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1486
1701
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1487
1702
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1703
+ },
1704
+ "org.primer.llm": {
1705
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1706
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1488
1707
  }
1489
1708
  },
1490
1709
  "key": "{bgColor.open.emphasis}"
@@ -1493,7 +1712,8 @@
1493
1712
  "attributes": {},
1494
1713
  "path": ["bgColor", "open", "emphasis"],
1495
1714
  "value": "#ad0116",
1496
- "type": "color"
1715
+ "type": "color",
1716
+ "description": "Strong background for open state badges and labels"
1497
1717
  },
1498
1718
  "bgColor-open-muted": {
1499
1719
  "key": "{bgColor.open.muted}",
@@ -1539,6 +1759,10 @@
1539
1759
  "isSource": true,
1540
1760
  "$type": "color"
1541
1761
  }
1762
+ },
1763
+ "org.primer.llm": {
1764
+ "usage": ["open-issue", "open-pr", "active-status"],
1765
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1542
1766
  }
1543
1767
  },
1544
1768
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1547,6 +1771,7 @@
1547
1771
  "original": {
1548
1772
  "$value": "{base.color.red.4}",
1549
1773
  "$type": "color",
1774
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1550
1775
  "$extensions": {
1551
1776
  "org.primer.figma": {
1552
1777
  "collection": "mode",
@@ -1589,6 +1814,10 @@
1589
1814
  "isSource": true,
1590
1815
  "$type": "color"
1591
1816
  }
1817
+ },
1818
+ "org.primer.llm": {
1819
+ "usage": ["open-issue", "open-pr", "active-status"],
1820
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1592
1821
  }
1593
1822
  },
1594
1823
  "alpha": 0.1,
@@ -1598,7 +1827,8 @@
1598
1827
  "attributes": {},
1599
1828
  "path": ["bgColor", "open", "muted"],
1600
1829
  "value": "#ff80801a",
1601
- "type": "color"
1830
+ "type": "color",
1831
+ "description": "Subtle background for open state indicators (issues, PRs)"
1602
1832
  },
1603
1833
  "bgColor-severe-emphasis": {
1604
1834
  "key": "{bgColor.severe.emphasis}",
@@ -1619,6 +1849,10 @@
1619
1849
  "dark-high-contrast": "#8f3c00",
1620
1850
  "dark-dimmed-high-contrast": "#bf5e0a",
1621
1851
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1852
+ },
1853
+ "org.primer.llm": {
1854
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1855
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1622
1856
  }
1623
1857
  },
1624
1858
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1626,6 +1860,7 @@
1626
1860
  "original": {
1627
1861
  "$value": "{base.color.red.9}",
1628
1862
  "$type": "color",
1863
+ "$description": "Strong severe background for prominent high-priority warnings",
1629
1864
  "$extensions": {
1630
1865
  "org.primer.figma": {
1631
1866
  "collection": "mode",
@@ -1643,6 +1878,10 @@
1643
1878
  "dark-high-contrast": "{base.color.orange.9}",
1644
1879
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1645
1880
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1881
+ },
1882
+ "org.primer.llm": {
1883
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1884
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1646
1885
  }
1647
1886
  },
1648
1887
  "key": "{bgColor.severe.emphasis}"
@@ -1651,7 +1890,8 @@
1651
1890
  "attributes": {},
1652
1891
  "path": ["bgColor", "severe", "emphasis"],
1653
1892
  "value": "#ad0116",
1654
- "type": "color"
1893
+ "type": "color",
1894
+ "description": "Strong severe background for prominent high-priority warnings"
1655
1895
  },
1656
1896
  "bgColor-severe-muted": {
1657
1897
  "key": "{bgColor.severe.muted}",
@@ -1681,6 +1921,10 @@
1681
1921
  "isSource": true,
1682
1922
  "$type": "color"
1683
1923
  }
1924
+ },
1925
+ "org.primer.llm": {
1926
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1927
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1684
1928
  }
1685
1929
  },
1686
1930
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1689,6 +1933,7 @@
1689
1933
  "original": {
1690
1934
  "$value": "{base.color.orange.4}",
1691
1935
  "$type": "color",
1936
+ "$description": "Subtle severe background for high-priority warnings",
1692
1937
  "$extensions": {
1693
1938
  "org.primer.figma": {
1694
1939
  "collection": "mode",
@@ -1715,6 +1960,10 @@
1715
1960
  "isSource": true,
1716
1961
  "$type": "color"
1717
1962
  }
1963
+ },
1964
+ "org.primer.llm": {
1965
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1966
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1718
1967
  }
1719
1968
  },
1720
1969
  "alpha": 0.1,
@@ -1724,7 +1973,8 @@
1724
1973
  "attributes": {},
1725
1974
  "path": ["bgColor", "severe", "muted"],
1726
1975
  "value": "#f48b251a",
1727
- "type": "color"
1976
+ "type": "color",
1977
+ "description": "Subtle severe background for high-priority warnings"
1728
1978
  },
1729
1979
  "bgColor-sponsors-emphasis": {
1730
1980
  "key": "{bgColor.sponsors.emphasis}",
@@ -1742,6 +1992,10 @@
1742
1992
  "dark-dimmed-high-contrast": "#d23d91",
1743
1993
  "dark-tritanopia-high-contrast": "#9c1d6a",
1744
1994
  "dark-protanopia-deuteranopia-high-contrast": "#9c1d6a"
1995
+ },
1996
+ "org.primer.llm": {
1997
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
1998
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1745
1999
  }
1746
2000
  },
1747
2001
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1749,6 +2003,7 @@
1749
2003
  "original": {
1750
2004
  "$value": "{base.color.pink.9}",
1751
2005
  "$type": "color",
2006
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1752
2007
  "$extensions": {
1753
2008
  "org.primer.figma": {
1754
2009
  "collection": "mode",
@@ -1763,6 +2018,10 @@
1763
2018
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1764
2019
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1765
2020
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2021
+ },
2022
+ "org.primer.llm": {
2023
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2024
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1766
2025
  }
1767
2026
  },
1768
2027
  "key": "{bgColor.sponsors.emphasis}"
@@ -1771,7 +2030,8 @@
1771
2030
  "attributes": {},
1772
2031
  "path": ["bgColor", "sponsors", "emphasis"],
1773
2032
  "value": "#9c1d6a",
1774
- "type": "color"
2033
+ "type": "color",
2034
+ "description": "Strong background for prominent GitHub Sponsors elements"
1775
2035
  },
1776
2036
  "bgColor-sponsors-muted": {
1777
2037
  "key": "{bgColor.sponsors.muted}",
@@ -1799,6 +2059,10 @@
1799
2059
  "isSource": true,
1800
2060
  "$type": "color"
1801
2061
  }
2062
+ },
2063
+ "org.primer.llm": {
2064
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2065
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1802
2066
  }
1803
2067
  },
1804
2068
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1807,6 +2071,7 @@
1807
2071
  "original": {
1808
2072
  "$value": "{base.color.pink.4}",
1809
2073
  "$type": "color",
2074
+ "$description": "Subtle background for GitHub Sponsors content",
1810
2075
  "$extensions": {
1811
2076
  "org.primer.figma": {
1812
2077
  "collection": "mode",
@@ -1831,6 +2096,10 @@
1831
2096
  "isSource": true,
1832
2097
  "$type": "color"
1833
2098
  }
2099
+ },
2100
+ "org.primer.llm": {
2101
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2102
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1834
2103
  }
1835
2104
  },
1836
2105
  "alpha": 0.1,
@@ -1840,7 +2109,8 @@
1840
2109
  "attributes": {},
1841
2110
  "path": ["bgColor", "sponsors", "muted"],
1842
2111
  "value": "#f87cbd1a",
1843
- "type": "color"
2112
+ "type": "color",
2113
+ "description": "Subtle background for GitHub Sponsors content"
1844
2114
  },
1845
2115
  "bgColor-success-emphasis": {
1846
2116
  "key": "{bgColor.success.emphasis}",
@@ -1866,6 +2136,10 @@
1866
2136
  "light-high-contrast": "#09b43a",
1867
2137
  "dark-high-contrast": "#006222",
1868
2138
  "dark-dimmed-high-contrast": "#008c2c"
2139
+ },
2140
+ "org.primer.llm": {
2141
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2142
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1869
2143
  }
1870
2144
  },
1871
2145
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1873,6 +2147,7 @@
1873
2147
  "original": {
1874
2148
  "$value": "{base.color.blue.9}",
1875
2149
  "$type": "color",
2150
+ "$description": "Strong success background for prominent positive actions",
1876
2151
  "$extensions": {
1877
2152
  "org.primer.figma": {
1878
2153
  "collection": "mode",
@@ -1895,6 +2170,10 @@
1895
2170
  "light-high-contrast": "{base.color.green.5}",
1896
2171
  "dark-high-contrast": "{base.color.green.9}",
1897
2172
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2173
+ },
2174
+ "org.primer.llm": {
2175
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2176
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1898
2177
  }
1899
2178
  },
1900
2179
  "key": "{bgColor.success.emphasis}"
@@ -1903,7 +2182,8 @@
1903
2182
  "attributes": {},
1904
2183
  "path": ["bgColor", "success", "emphasis"],
1905
2184
  "value": "#194fb1",
1906
- "type": "color"
2185
+ "type": "color",
2186
+ "description": "Strong success background for prominent positive actions"
1907
2187
  },
1908
2188
  "bgColor-success-muted": {
1909
2189
  "key": "{bgColor.success.muted}",
@@ -1956,6 +2236,10 @@
1956
2236
  "isSource": true,
1957
2237
  "$type": "color"
1958
2238
  }
2239
+ },
2240
+ "org.primer.llm": {
2241
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2242
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1959
2243
  }
1960
2244
  },
1961
2245
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1964,6 +2248,7 @@
1964
2248
  "original": {
1965
2249
  "$value": "{base.color.blue.4}",
1966
2250
  "$type": "color",
2251
+ "$description": "Subtle success background for positive feedback and completed states",
1967
2252
  "$extensions": {
1968
2253
  "org.primer.figma": {
1969
2254
  "collection": "mode",
@@ -2013,6 +2298,10 @@
2013
2298
  "isSource": true,
2014
2299
  "$type": "color"
2015
2300
  }
2301
+ },
2302
+ "org.primer.llm": {
2303
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2304
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2016
2305
  }
2017
2306
  },
2018
2307
  "alpha": 0.15,
@@ -2022,7 +2311,8 @@
2022
2311
  "attributes": {},
2023
2312
  "path": ["bgColor", "success", "muted"],
2024
2313
  "value": "#5cacff26",
2025
- "type": "color"
2314
+ "type": "color",
2315
+ "description": "Subtle success background for positive feedback and completed states"
2026
2316
  },
2027
2317
  "bgColor-transparent": {
2028
2318
  "key": "{bgColor.transparent}",
@@ -2034,6 +2324,10 @@
2034
2324
  "codeSyntax": {
2035
2325
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2036
2326
  }
2327
+ },
2328
+ "org.primer.llm": {
2329
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2330
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2037
2331
  }
2038
2332
  },
2039
2333
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2041,6 +2335,7 @@
2041
2335
  "original": {
2042
2336
  "$value": "{base.color.transparent}",
2043
2337
  "$type": "color",
2338
+ "$description": "Fully transparent background",
2044
2339
  "$extensions": {
2045
2340
  "org.primer.figma": {
2046
2341
  "collection": "mode",
@@ -2049,6 +2344,10 @@
2049
2344
  "codeSyntax": {
2050
2345
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2051
2346
  }
2347
+ },
2348
+ "org.primer.llm": {
2349
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2350
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2052
2351
  }
2053
2352
  },
2054
2353
  "key": "{bgColor.transparent}"
@@ -2057,7 +2356,8 @@
2057
2356
  "attributes": {},
2058
2357
  "path": ["bgColor", "transparent"],
2059
2358
  "value": "#00000000",
2060
- "type": "color"
2359
+ "type": "color",
2360
+ "description": "Fully transparent background"
2061
2361
  },
2062
2362
  "bgColor-upsell-emphasis": {
2063
2363
  "key": "{bgColor.upsell.emphasis}",
@@ -2069,6 +2369,10 @@
2069
2369
  "codeSyntax": {
2070
2370
  "web": "var(--bgColor-upsell-emphasis)"
2071
2371
  }
2372
+ },
2373
+ "org.primer.llm": {
2374
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2375
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2072
2376
  }
2073
2377
  },
2074
2378
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2076,6 +2380,7 @@
2076
2380
  "original": {
2077
2381
  "$value": "{bgColor.done.emphasis}",
2078
2382
  "$type": "color",
2383
+ "$description": "Strong background for prominent upsell elements",
2079
2384
  "$extensions": {
2080
2385
  "org.primer.figma": {
2081
2386
  "collection": "mode",
@@ -2084,6 +2389,10 @@
2084
2389
  "codeSyntax": {
2085
2390
  "web": "var(--bgColor-upsell-emphasis)"
2086
2391
  }
2392
+ },
2393
+ "org.primer.llm": {
2394
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2395
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2087
2396
  }
2088
2397
  },
2089
2398
  "key": "{bgColor.upsell.emphasis}"
@@ -2092,7 +2401,8 @@
2092
2401
  "attributes": {},
2093
2402
  "path": ["bgColor", "upsell", "emphasis"],
2094
2403
  "value": "#6921d7",
2095
- "type": "color"
2404
+ "type": "color",
2405
+ "description": "Strong background for prominent upsell elements"
2096
2406
  },
2097
2407
  "bgColor-upsell-muted": {
2098
2408
  "key": "{bgColor.upsell.muted}",
@@ -2104,6 +2414,10 @@
2104
2414
  "codeSyntax": {
2105
2415
  "web": "var(--bgColor-upsell-muted)"
2106
2416
  }
2417
+ },
2418
+ "org.primer.llm": {
2419
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2420
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2107
2421
  }
2108
2422
  },
2109
2423
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2111,6 +2425,7 @@
2111
2425
  "original": {
2112
2426
  "$value": "{bgColor.done.muted}",
2113
2427
  "$type": "color",
2428
+ "$description": "Subtle background for upsell and promotional content",
2114
2429
  "$extensions": {
2115
2430
  "org.primer.figma": {
2116
2431
  "collection": "mode",
@@ -2119,6 +2434,10 @@
2119
2434
  "codeSyntax": {
2120
2435
  "web": "var(--bgColor-upsell-muted)"
2121
2436
  }
2437
+ },
2438
+ "org.primer.llm": {
2439
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2440
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2122
2441
  }
2123
2442
  },
2124
2443
  "key": "{bgColor.upsell.muted}"
@@ -2127,7 +2446,8 @@
2127
2446
  "attributes": {},
2128
2447
  "path": ["bgColor", "upsell", "muted"],
2129
2448
  "value": "#bf8fff26",
2130
- "type": "color"
2449
+ "type": "color",
2450
+ "description": "Subtle background for upsell and promotional content"
2131
2451
  },
2132
2452
  "bgColor-white": {
2133
2453
  "key": "{bgColor.white}",
@@ -2139,6 +2459,10 @@
2139
2459
  },
2140
2460
  "org.primer.overrides": {
2141
2461
  "dark": "#ffffff"
2462
+ },
2463
+ "org.primer.llm": {
2464
+ "doNotUse": true,
2465
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2142
2466
  }
2143
2467
  },
2144
2468
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2146,6 +2470,7 @@
2146
2470
  "original": {
2147
2471
  "$value": "{base.color.neutral.13}",
2148
2472
  "$type": "color",
2473
+ "$description": "Pure white background",
2149
2474
  "$extensions": {
2150
2475
  "org.primer.figma": {
2151
2476
  "collection": "mode",
@@ -2154,6 +2479,10 @@
2154
2479
  },
2155
2480
  "org.primer.overrides": {
2156
2481
  "dark": "{base.color.neutral.13}"
2482
+ },
2483
+ "org.primer.llm": {
2484
+ "doNotUse": true,
2485
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2157
2486
  }
2158
2487
  },
2159
2488
  "key": "{bgColor.white}"
@@ -2162,7 +2491,8 @@
2162
2491
  "attributes": {},
2163
2492
  "path": ["bgColor", "white"],
2164
2493
  "value": "#ffffff",
2165
- "type": "color"
2494
+ "type": "color",
2495
+ "description": "Pure white background"
2166
2496
  },
2167
2497
  "border-accent-emphasis": {
2168
2498
  "key": "{border.accent.emphasis}",
@@ -2674,6 +3004,10 @@
2674
3004
  },
2675
3005
  "org.primer.overrides": {
2676
3006
  "dark-dimmed-high-contrast": "#91cbff"
3007
+ },
3008
+ "org.primer.llm": {
3009
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3010
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2677
3011
  }
2678
3012
  },
2679
3013
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2681,6 +3015,7 @@
2681
3015
  "original": {
2682
3016
  "$value": "{base.color.blue.5}",
2683
3017
  "$type": "color",
3018
+ "$description": "Strong accent border for selected or focused elements",
2684
3019
  "$extensions": {
2685
3020
  "org.primer.figma": {
2686
3021
  "collection": "mode",
@@ -2692,6 +3027,10 @@
2692
3027
  },
2693
3028
  "org.primer.overrides": {
2694
3029
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3030
+ },
3031
+ "org.primer.llm": {
3032
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3033
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2695
3034
  }
2696
3035
  },
2697
3036
  "key": "{borderColor.accent.emphasis}"
@@ -2700,7 +3039,8 @@
2700
3039
  "attributes": {},
2701
3040
  "path": ["borderColor", "accent", "emphasis"],
2702
3041
  "value": "#409eff",
2703
- "type": "color"
3042
+ "type": "color",
3043
+ "description": "Strong accent border for selected or focused elements"
2704
3044
  },
2705
3045
  "borderColor-accent-muted": {
2706
3046
  "key": "{borderColor.accent.muted}",
@@ -2764,6 +3104,10 @@
2764
3104
  "isSource": true,
2765
3105
  "$type": "color"
2766
3106
  }
3107
+ },
3108
+ "org.primer.llm": {
3109
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3110
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2767
3111
  }
2768
3112
  },
2769
3113
  "alpha": 1,
@@ -2772,6 +3116,7 @@
2772
3116
  "original": {
2773
3117
  "$value": "{base.color.blue.4}",
2774
3118
  "$type": "color",
3119
+ "$description": "Subtle accent border for selected or focused elements",
2775
3120
  "$extensions": {
2776
3121
  "org.primer.figma": {
2777
3122
  "collection": "mode",
@@ -2832,6 +3177,10 @@
2832
3177
  "isSource": true,
2833
3178
  "$type": "color"
2834
3179
  }
3180
+ },
3181
+ "org.primer.llm": {
3182
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3183
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2835
3184
  }
2836
3185
  },
2837
3186
  "alpha": 1,
@@ -2841,7 +3190,8 @@
2841
3190
  "attributes": {},
2842
3191
  "path": ["borderColor", "accent", "muted"],
2843
3192
  "value": "#5cacff",
2844
- "type": "color"
3193
+ "type": "color",
3194
+ "description": "Subtle accent border for selected or focused elements"
2845
3195
  },
2846
3196
  "borderColor-attention-emphasis": {
2847
3197
  "key": "{borderColor.attention.emphasis}",
@@ -2856,6 +3206,10 @@
2856
3206
  },
2857
3207
  "org.primer.overrides": {
2858
3208
  "dark-dimmed-high-contrast": "#f7c843"
3209
+ },
3210
+ "org.primer.llm": {
3211
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3212
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2859
3213
  }
2860
3214
  },
2861
3215
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2863,6 +3217,7 @@
2863
3217
  "original": {
2864
3218
  "$value": "{base.color.yellow.5}",
2865
3219
  "$type": "color",
3220
+ "$description": "Strong attention border for prominent warnings",
2866
3221
  "$extensions": {
2867
3222
  "org.primer.figma": {
2868
3223
  "collection": "mode",
@@ -2874,6 +3229,10 @@
2874
3229
  },
2875
3230
  "org.primer.overrides": {
2876
3231
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3232
+ },
3233
+ "org.primer.llm": {
3234
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3235
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2877
3236
  }
2878
3237
  },
2879
3238
  "key": "{borderColor.attention.emphasis}"
@@ -2882,7 +3241,8 @@
2882
3241
  "attributes": {},
2883
3242
  "path": ["borderColor", "attention", "emphasis"],
2884
3243
  "value": "#e09b13",
2885
- "type": "color"
3244
+ "type": "color",
3245
+ "description": "Strong attention border for prominent warnings"
2886
3246
  },
2887
3247
  "borderColor-attention-muted": {
2888
3248
  "key": "{borderColor.attention.muted}",
@@ -2946,6 +3306,10 @@
2946
3306
  "isSource": true,
2947
3307
  "$type": "color"
2948
3308
  }
3309
+ },
3310
+ "org.primer.llm": {
3311
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3312
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2949
3313
  }
2950
3314
  },
2951
3315
  "alpha": 1,
@@ -2954,6 +3318,7 @@
2954
3318
  "original": {
2955
3319
  "$value": "{base.color.yellow.4}",
2956
3320
  "$type": "color",
3321
+ "$description": "Subtle attention border for warnings and caution states",
2957
3322
  "$extensions": {
2958
3323
  "org.primer.figma": {
2959
3324
  "collection": "mode",
@@ -3014,6 +3379,10 @@
3014
3379
  "isSource": true,
3015
3380
  "$type": "color"
3016
3381
  }
3382
+ },
3383
+ "org.primer.llm": {
3384
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3385
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3017
3386
  }
3018
3387
  },
3019
3388
  "alpha": 1,
@@ -3023,7 +3392,8 @@
3023
3392
  "attributes": {},
3024
3393
  "path": ["borderColor", "attention", "muted"],
3025
3394
  "value": "#edaa27",
3026
- "type": "color"
3395
+ "type": "color",
3396
+ "description": "Subtle attention border for warnings and caution states"
3027
3397
  },
3028
3398
  "borderColor-closed-emphasis": {
3029
3399
  "key": "{borderColor.closed.emphasis}",
@@ -3045,6 +3415,10 @@
3045
3415
  "dark-tritanopia-high-contrast": "#b7bdc8",
3046
3416
  "light-tritanopia": "#b7bdc8",
3047
3417
  "light-tritanopia-high-contrast": "#b7bdc8"
3418
+ },
3419
+ "org.primer.llm": {
3420
+ "usage": ["closed-emphasis", "closed-status"],
3421
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3048
3422
  }
3049
3423
  },
3050
3424
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3052,6 +3426,7 @@
3052
3426
  "original": {
3053
3427
  "$value": "{borderColor.emphasis}",
3054
3428
  "$type": "color",
3429
+ "$description": "Strong border for closed state badges",
3055
3430
  "$extensions": {
3056
3431
  "org.primer.figma": {
3057
3432
  "collection": "mode",
@@ -3070,6 +3445,10 @@
3070
3445
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3071
3446
  "light-tritanopia": "{borderColor.emphasis}",
3072
3447
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3448
+ },
3449
+ "org.primer.llm": {
3450
+ "usage": ["closed-emphasis", "closed-status"],
3451
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3073
3452
  }
3074
3453
  },
3075
3454
  "key": "{borderColor.closed.emphasis}"
@@ -3078,7 +3457,8 @@
3078
3457
  "attributes": {},
3079
3458
  "path": ["borderColor", "closed", "emphasis"],
3080
3459
  "value": "#b7bdc8",
3081
- "type": "color"
3460
+ "type": "color",
3461
+ "description": "Strong border for closed state badges"
3082
3462
  },
3083
3463
  "borderColor-closed-muted": {
3084
3464
  "key": "{borderColor.closed.muted}",
@@ -3148,6 +3528,10 @@
3148
3528
  "isSource": true,
3149
3529
  "$type": "color"
3150
3530
  }
3531
+ },
3532
+ "org.primer.llm": {
3533
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3534
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3151
3535
  }
3152
3536
  },
3153
3537
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3156,6 +3540,7 @@
3156
3540
  "original": {
3157
3541
  "$value": "{borderColor.default}",
3158
3542
  "$type": "color",
3543
+ "$description": "Subtle border for closed state indicators",
3159
3544
  "$extensions": {
3160
3545
  "org.primer.figma": {
3161
3546
  "collection": "mode",
@@ -3222,6 +3607,10 @@
3222
3607
  "isSource": true,
3223
3608
  "$type": "color"
3224
3609
  }
3610
+ },
3611
+ "org.primer.llm": {
3612
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3613
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3225
3614
  }
3226
3615
  },
3227
3616
  "alpha": 1,
@@ -3231,7 +3620,8 @@
3231
3620
  "attributes": {},
3232
3621
  "path": ["borderColor", "closed", "muted"],
3233
3622
  "value": "#b7bdc8",
3234
- "type": "color"
3623
+ "type": "color",
3624
+ "description": "Subtle border for closed state indicators"
3235
3625
  },
3236
3626
  "borderColor-danger-emphasis": {
3237
3627
  "key": "{borderColor.danger.emphasis}",
@@ -3270,6 +3660,10 @@
3270
3660
  "$type": "color"
3271
3661
  },
3272
3662
  "dark-dimmed-high-contrast": "#ffb1af"
3663
+ },
3664
+ "org.primer.llm": {
3665
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3666
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3273
3667
  }
3274
3668
  },
3275
3669
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3277,6 +3671,7 @@
3277
3671
  "original": {
3278
3672
  "$value": "{base.color.red.5}",
3279
3673
  "$type": "color",
3674
+ "$description": "Strong danger border for destructive actions and errors",
3280
3675
  "$extensions": {
3281
3676
  "org.primer.figma": {
3282
3677
  "collection": "mode",
@@ -3312,6 +3707,10 @@
3312
3707
  "$type": "color"
3313
3708
  },
3314
3709
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3710
+ },
3711
+ "org.primer.llm": {
3712
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3713
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3315
3714
  }
3316
3715
  },
3317
3716
  "key": "{borderColor.danger.emphasis}"
@@ -3320,7 +3719,8 @@
3320
3719
  "attributes": {},
3321
3720
  "path": ["borderColor", "danger", "emphasis"],
3322
3721
  "value": "#ff6a69",
3323
- "type": "color"
3722
+ "type": "color",
3723
+ "description": "Strong danger border for destructive actions and errors"
3324
3724
  },
3325
3725
  "borderColor-danger-muted": {
3326
3726
  "key": "{borderColor.danger.muted}",
@@ -3397,6 +3797,10 @@
3397
3797
  "isSource": true,
3398
3798
  "$type": "color"
3399
3799
  }
3800
+ },
3801
+ "org.primer.llm": {
3802
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3803
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3400
3804
  }
3401
3805
  },
3402
3806
  "alpha": 1,
@@ -3405,6 +3809,7 @@
3405
3809
  "original": {
3406
3810
  "$value": "{base.color.red.4}",
3407
3811
  "$type": "color",
3812
+ "$description": "Subtle danger border for errors and destructive contexts",
3408
3813
  "$extensions": {
3409
3814
  "org.primer.figma": {
3410
3815
  "collection": "mode",
@@ -3478,6 +3883,10 @@
3478
3883
  "isSource": true,
3479
3884
  "$type": "color"
3480
3885
  }
3886
+ },
3887
+ "org.primer.llm": {
3888
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3889
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3481
3890
  }
3482
3891
  },
3483
3892
  "alpha": 1,
@@ -3487,7 +3896,8 @@
3487
3896
  "attributes": {},
3488
3897
  "path": ["borderColor", "danger", "muted"],
3489
3898
  "value": "#ff8080",
3490
- "type": "color"
3899
+ "type": "color",
3900
+ "description": "Subtle danger border for errors and destructive contexts"
3491
3901
  },
3492
3902
  "borderColor-default": {
3493
3903
  "key": "{borderColor.default}",
@@ -3510,6 +3920,10 @@
3510
3920
  "codeSyntax": {
3511
3921
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3512
3922
  }
3923
+ },
3924
+ "org.primer.llm": {
3925
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3926
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3513
3927
  }
3514
3928
  },
3515
3929
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3517,6 +3931,7 @@
3517
3931
  "original": {
3518
3932
  "$value": "{base.color.neutral.10}",
3519
3933
  "$type": "color",
3934
+ "$description": "Default border color for most UI elements",
3520
3935
  "$extensions": {
3521
3936
  "org.primer.overrides": {
3522
3937
  "dark": "{base.color.neutral.7}",
@@ -3536,6 +3951,10 @@
3536
3951
  "codeSyntax": {
3537
3952
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3538
3953
  }
3954
+ },
3955
+ "org.primer.llm": {
3956
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3957
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3539
3958
  }
3540
3959
  },
3541
3960
  "key": "{borderColor.default}"
@@ -3544,7 +3963,8 @@
3544
3963
  "attributes": {},
3545
3964
  "path": ["borderColor", "default"],
3546
3965
  "value": "#b7bdc8",
3547
- "type": "color"
3966
+ "type": "color",
3967
+ "description": "Default border color for most UI elements"
3548
3968
  },
3549
3969
  "borderColor-disabled": {
3550
3970
  "key": "{borderColor.disabled}",
@@ -3590,6 +4010,10 @@
3590
4010
  "isSource": true,
3591
4011
  "$type": "color"
3592
4012
  }
4013
+ },
4014
+ "org.primer.llm": {
4015
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4016
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3593
4017
  }
3594
4018
  },
3595
4019
  "alpha": 0.1,
@@ -3598,6 +4022,7 @@
3598
4022
  "original": {
3599
4023
  "$value": "{base.color.neutral.8}",
3600
4024
  "$type": "color",
4025
+ "$description": "Border color for disabled interactive elements",
3601
4026
  "$extensions": {
3602
4027
  "org.primer.figma": {
3603
4028
  "collection": "mode",
@@ -3640,6 +4065,10 @@
3640
4065
  "isSource": true,
3641
4066
  "$type": "color"
3642
4067
  }
4068
+ },
4069
+ "org.primer.llm": {
4070
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4071
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3643
4072
  }
3644
4073
  },
3645
4074
  "alpha": 0.1,
@@ -3649,7 +4078,8 @@
3649
4078
  "attributes": {},
3650
4079
  "path": ["borderColor", "disabled"],
3651
4080
  "value": "#656c761a",
3652
- "type": "color"
4081
+ "type": "color",
4082
+ "description": "Border color for disabled interactive elements"
3653
4083
  },
3654
4084
  "borderColor-done-emphasis": {
3655
4085
  "key": "{borderColor.done.emphasis}",
@@ -3664,6 +4094,10 @@
3664
4094
  },
3665
4095
  "org.primer.overrides": {
3666
4096
  "dark-dimmed-high-contrast": "#dbb7ff"
4097
+ },
4098
+ "org.primer.llm": {
4099
+ "usage": ["done-emphasis", "merged-status"],
4100
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3667
4101
  }
3668
4102
  },
3669
4103
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3671,6 +4105,7 @@
3671
4105
  "original": {
3672
4106
  "$value": "{base.color.purple.5}",
3673
4107
  "$type": "color",
4108
+ "$description": "Strong border for completed/done state badges",
3674
4109
  "$extensions": {
3675
4110
  "org.primer.figma": {
3676
4111
  "collection": "mode",
@@ -3682,6 +4117,10 @@
3682
4117
  },
3683
4118
  "org.primer.overrides": {
3684
4119
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4120
+ },
4121
+ "org.primer.llm": {
4122
+ "usage": ["done-emphasis", "merged-status"],
4123
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3685
4124
  }
3686
4125
  },
3687
4126
  "key": "{borderColor.done.emphasis}"
@@ -3690,7 +4129,8 @@
3690
4129
  "attributes": {},
3691
4130
  "path": ["borderColor", "done", "emphasis"],
3692
4131
  "value": "#b87fff",
3693
- "type": "color"
4132
+ "type": "color",
4133
+ "description": "Strong border for completed/done state badges"
3694
4134
  },
3695
4135
  "borderColor-done-muted": {
3696
4136
  "key": "{borderColor.done.muted}",
@@ -3754,6 +4194,10 @@
3754
4194
  "isSource": true,
3755
4195
  "$type": "color"
3756
4196
  }
4197
+ },
4198
+ "org.primer.llm": {
4199
+ "usage": ["done-muted", "merged", "completed"],
4200
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3757
4201
  }
3758
4202
  },
3759
4203
  "alpha": 1,
@@ -3762,6 +4206,7 @@
3762
4206
  "original": {
3763
4207
  "$value": "{base.color.purple.4}",
3764
4208
  "$type": "color",
4209
+ "$description": "Subtle border for completed/done state indicators",
3765
4210
  "$extensions": {
3766
4211
  "org.primer.figma": {
3767
4212
  "collection": "mode",
@@ -3822,6 +4267,10 @@
3822
4267
  "isSource": true,
3823
4268
  "$type": "color"
3824
4269
  }
4270
+ },
4271
+ "org.primer.llm": {
4272
+ "usage": ["done-muted", "merged", "completed"],
4273
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3825
4274
  }
3826
4275
  },
3827
4276
  "alpha": 1,
@@ -3831,7 +4280,8 @@
3831
4280
  "attributes": {},
3832
4281
  "path": ["borderColor", "done", "muted"],
3833
4282
  "value": "#bf8fff",
3834
- "type": "color"
4283
+ "type": "color",
4284
+ "description": "Subtle border for completed/done state indicators"
3835
4285
  },
3836
4286
  "borderColor-draft-emphasis": {
3837
4287
  "key": "{borderColor.draft.emphasis}",
@@ -3843,6 +4293,10 @@
3843
4293
  "codeSyntax": {
3844
4294
  "web": "var(--borderColor-draft-emphasis)"
3845
4295
  }
4296
+ },
4297
+ "org.primer.llm": {
4298
+ "usage": ["draft-emphasis", "draft-status"],
4299
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3846
4300
  }
3847
4301
  },
3848
4302
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3850,6 +4304,7 @@
3850
4304
  "original": {
3851
4305
  "$value": "{borderColor.neutral.emphasis}",
3852
4306
  "$type": "color",
4307
+ "$description": "Strong border for draft state badges",
3853
4308
  "$extensions": {
3854
4309
  "org.primer.figma": {
3855
4310
  "collection": "mode",
@@ -3858,6 +4313,10 @@
3858
4313
  "codeSyntax": {
3859
4314
  "web": "var(--borderColor-draft-emphasis)"
3860
4315
  }
4316
+ },
4317
+ "org.primer.llm": {
4318
+ "usage": ["draft-emphasis", "draft-status"],
4319
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3861
4320
  }
3862
4321
  },
3863
4322
  "key": "{borderColor.draft.emphasis}"
@@ -3866,7 +4325,8 @@
3866
4325
  "attributes": {},
3867
4326
  "path": ["borderColor", "draft", "emphasis"],
3868
4327
  "value": "#b7bdc8",
3869
- "type": "color"
4328
+ "type": "color",
4329
+ "description": "Strong border for draft state badges"
3870
4330
  },
3871
4331
  "borderColor-draft-muted": {
3872
4332
  "key": "{borderColor.draft.muted}",
@@ -3936,6 +4396,10 @@
3936
4396
  "isSource": true,
3937
4397
  "$type": "color"
3938
4398
  }
4399
+ },
4400
+ "org.primer.llm": {
4401
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4402
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3939
4403
  }
3940
4404
  },
3941
4405
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3944,6 +4408,7 @@
3944
4408
  "original": {
3945
4409
  "$value": "{borderColor.default}",
3946
4410
  "$type": "color",
4411
+ "$description": "Subtle border for draft state indicators",
3947
4412
  "$extensions": {
3948
4413
  "org.primer.figma": {
3949
4414
  "collection": "mode",
@@ -4010,6 +4475,10 @@
4010
4475
  "isSource": true,
4011
4476
  "$type": "color"
4012
4477
  }
4478
+ },
4479
+ "org.primer.llm": {
4480
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4481
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
4013
4482
  }
4014
4483
  },
4015
4484
  "alpha": 1,
@@ -4019,7 +4488,8 @@
4019
4488
  "attributes": {},
4020
4489
  "path": ["borderColor", "draft", "muted"],
4021
4490
  "value": "#b7bdc8",
4022
- "type": "color"
4491
+ "type": "color",
4492
+ "description": "Subtle border for draft state indicators"
4023
4493
  },
4024
4494
  "borderColor-emphasis": {
4025
4495
  "key": "{borderColor.emphasis}",
@@ -4037,6 +4507,10 @@
4037
4507
  "dark-dimmed-high-contrast": "#b7bdc8",
4038
4508
  "dark-tritanopia-high-contrast": "#b7bdc8",
4039
4509
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
4510
+ },
4511
+ "org.primer.llm": {
4512
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4513
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4040
4514
  }
4041
4515
  },
4042
4516
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4044,6 +4518,7 @@
4044
4518
  "original": {
4045
4519
  "$value": "{borderColor.default}",
4046
4520
  "$type": "color",
4521
+ "$description": "Strong border for emphasis and visual weight",
4047
4522
  "$extensions": {
4048
4523
  "org.primer.figma": {
4049
4524
  "collection": "mode",
@@ -4058,6 +4533,10 @@
4058
4533
  "dark-dimmed-high-contrast": "{borderColor.default}",
4059
4534
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4060
4535
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4536
+ },
4537
+ "org.primer.llm": {
4538
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4539
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4061
4540
  }
4062
4541
  },
4063
4542
  "key": "{borderColor.emphasis}"
@@ -4066,7 +4545,8 @@
4066
4545
  "attributes": {},
4067
4546
  "path": ["borderColor", "emphasis"],
4068
4547
  "value": "#b7bdc8",
4069
- "type": "color"
4548
+ "type": "color",
4549
+ "description": "Strong border for emphasis and visual weight"
4070
4550
  },
4071
4551
  "borderColor-muted": {
4072
4552
  "key": "{borderColor.muted}",
@@ -4136,6 +4616,10 @@
4136
4616
  "isSource": true,
4137
4617
  "$type": "color"
4138
4618
  }
4619
+ },
4620
+ "org.primer.llm": {
4621
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4622
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4139
4623
  }
4140
4624
  },
4141
4625
  "alpha": 1,
@@ -4144,6 +4628,7 @@
4144
4628
  "original": {
4145
4629
  "$value": "{borderColor.default}",
4146
4630
  "$type": "color",
4631
+ "$description": "Subtle border for secondary elements and light separators",
4147
4632
  "$extensions": {
4148
4633
  "org.primer.figma": {
4149
4634
  "collection": "mode",
@@ -4210,6 +4695,10 @@
4210
4695
  "isSource": true,
4211
4696
  "$type": "color"
4212
4697
  }
4698
+ },
4699
+ "org.primer.llm": {
4700
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4701
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4213
4702
  }
4214
4703
  },
4215
4704
  "alpha": 1,
@@ -4219,7 +4708,8 @@
4219
4708
  "attributes": {},
4220
4709
  "path": ["borderColor", "muted"],
4221
4710
  "value": "#b7bdc8",
4222
- "type": "color"
4711
+ "type": "color",
4712
+ "description": "Subtle border for secondary elements and light separators"
4223
4713
  },
4224
4714
  "borderColor-neutral-emphasis": {
4225
4715
  "key": "{borderColor.neutral.emphasis}",
@@ -4231,6 +4721,10 @@
4231
4721
  },
4232
4722
  "org.primer.overrides": {
4233
4723
  "dark": "#b7bdc8"
4724
+ },
4725
+ "org.primer.llm": {
4726
+ "usage": ["neutral-emphasis", "neutral-strong"],
4727
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4234
4728
  }
4235
4729
  },
4236
4730
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4238,6 +4732,7 @@
4238
4732
  "original": {
4239
4733
  "$value": "{borderColor.emphasis}",
4240
4734
  "$type": "color",
4735
+ "$description": "Strong neutral semantic border",
4241
4736
  "$extensions": {
4242
4737
  "org.primer.figma": {
4243
4738
  "collection": "mode",
@@ -4246,6 +4741,10 @@
4246
4741
  },
4247
4742
  "org.primer.overrides": {
4248
4743
  "dark": "{borderColor.emphasis}"
4744
+ },
4745
+ "org.primer.llm": {
4746
+ "usage": ["neutral-emphasis", "neutral-strong"],
4747
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4249
4748
  }
4250
4749
  },
4251
4750
  "key": "{borderColor.neutral.emphasis}"
@@ -4254,7 +4753,8 @@
4254
4753
  "attributes": {},
4255
4754
  "path": ["borderColor", "neutral", "emphasis"],
4256
4755
  "value": "#b7bdc8",
4257
- "type": "color"
4756
+ "type": "color",
4757
+ "description": "Strong neutral semantic border"
4258
4758
  },
4259
4759
  "borderColor-neutral-muted": {
4260
4760
  "key": "{borderColor.neutral.muted}",
@@ -4279,6 +4779,10 @@
4279
4779
  "isSource": true,
4280
4780
  "$type": "color"
4281
4781
  }
4782
+ },
4783
+ "org.primer.llm": {
4784
+ "usage": ["neutral-muted", "neutral-secondary"],
4785
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4282
4786
  }
4283
4787
  },
4284
4788
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4286,6 +4790,7 @@
4286
4790
  "original": {
4287
4791
  "$value": "{borderColor.muted}",
4288
4792
  "$type": "color",
4793
+ "$description": "Subtle neutral semantic border",
4289
4794
  "$extensions": {
4290
4795
  "org.primer.figma": {
4291
4796
  "collection": "mode",
@@ -4307,6 +4812,10 @@
4307
4812
  "isSource": true,
4308
4813
  "$type": "color"
4309
4814
  }
4815
+ },
4816
+ "org.primer.llm": {
4817
+ "usage": ["neutral-muted", "neutral-secondary"],
4818
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4310
4819
  }
4311
4820
  },
4312
4821
  "key": "{borderColor.neutral.muted}"
@@ -4315,7 +4824,8 @@
4315
4824
  "attributes": {},
4316
4825
  "path": ["borderColor", "neutral", "muted"],
4317
4826
  "value": "#b7bdc8",
4318
- "type": "color"
4827
+ "type": "color",
4828
+ "description": "Subtle neutral semantic border"
4319
4829
  },
4320
4830
  "borderColor-open-emphasis": {
4321
4831
  "key": "{borderColor.open.emphasis}",
@@ -4337,6 +4847,10 @@
4337
4847
  "dark-protanopia-deuteranopia-high-contrast": "#e7811d",
4338
4848
  "light-protanopia-deuteranopia": "#e7811d",
4339
4849
  "light-protanopia-deuteranopia-high-contrast": "#e7811d"
4850
+ },
4851
+ "org.primer.llm": {
4852
+ "usage": ["open-emphasis", "open-status"],
4853
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4340
4854
  }
4341
4855
  },
4342
4856
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4344,6 +4858,7 @@
4344
4858
  "original": {
4345
4859
  "$value": "{base.color.red.5}",
4346
4860
  "$type": "color",
4861
+ "$description": "Strong border for open state badges",
4347
4862
  "$extensions": {
4348
4863
  "org.primer.figma": {
4349
4864
  "collection": "mode",
@@ -4362,6 +4877,10 @@
4362
4877
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4363
4878
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4364
4879
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4880
+ },
4881
+ "org.primer.llm": {
4882
+ "usage": ["open-emphasis", "open-status"],
4883
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4365
4884
  }
4366
4885
  },
4367
4886
  "key": "{borderColor.open.emphasis}"
@@ -4370,7 +4889,8 @@
4370
4889
  "attributes": {},
4371
4890
  "path": ["borderColor", "open", "emphasis"],
4372
4891
  "value": "#ff6a69",
4373
- "type": "color"
4892
+ "type": "color",
4893
+ "description": "Strong border for open state badges"
4374
4894
  },
4375
4895
  "borderColor-open-muted": {
4376
4896
  "key": "{borderColor.open.muted}",
@@ -4440,6 +4960,10 @@
4440
4960
  "isSource": true,
4441
4961
  "$type": "color"
4442
4962
  }
4963
+ },
4964
+ "org.primer.llm": {
4965
+ "usage": ["open-muted", "open-issue", "open-pr"],
4966
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4443
4967
  }
4444
4968
  },
4445
4969
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4448,6 +4972,7 @@
4448
4972
  "original": {
4449
4973
  "$value": "{base.color.red.4}",
4450
4974
  "$type": "color",
4975
+ "$description": "Subtle border for open state indicators",
4451
4976
  "$extensions": {
4452
4977
  "org.primer.figma": {
4453
4978
  "collection": "mode",
@@ -4514,6 +5039,10 @@
4514
5039
  "isSource": true,
4515
5040
  "$type": "color"
4516
5041
  }
5042
+ },
5043
+ "org.primer.llm": {
5044
+ "usage": ["open-muted", "open-issue", "open-pr"],
5045
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4517
5046
  }
4518
5047
  },
4519
5048
  "alpha": 1,
@@ -4523,7 +5052,8 @@
4523
5052
  "attributes": {},
4524
5053
  "path": ["borderColor", "open", "muted"],
4525
5054
  "value": "#ff8080",
4526
- "type": "color"
5055
+ "type": "color",
5056
+ "description": "Subtle border for open state indicators"
4527
5057
  },
4528
5058
  "borderColor-severe-emphasis": {
4529
5059
  "key": "{borderColor.severe.emphasis}",
@@ -4541,6 +5071,10 @@
4541
5071
  "light-tritanopia": "#ff6a69",
4542
5072
  "light-tritanopia-high-contrast": "#ff6a69",
4543
5073
  "dark-dimmed-high-contrast": "#ffb757"
5074
+ },
5075
+ "org.primer.llm": {
5076
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5077
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4544
5078
  }
4545
5079
  },
4546
5080
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4548,6 +5082,7 @@
4548
5082
  "original": {
4549
5083
  "$value": "{base.color.orange.5}",
4550
5084
  "$type": "color",
5085
+ "$description": "Strong severe border for prominent high-priority warnings",
4551
5086
  "$extensions": {
4552
5087
  "org.primer.figma": {
4553
5088
  "collection": "mode",
@@ -4562,6 +5097,10 @@
4562
5097
  "light-tritanopia": "{base.color.red.5}",
4563
5098
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4564
5099
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5100
+ },
5101
+ "org.primer.llm": {
5102
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5103
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4565
5104
  }
4566
5105
  },
4567
5106
  "key": "{borderColor.severe.emphasis}"
@@ -4570,7 +5109,8 @@
4570
5109
  "attributes": {},
4571
5110
  "path": ["borderColor", "severe", "emphasis"],
4572
5111
  "value": "#e7811d",
4573
- "type": "color"
5112
+ "type": "color",
5113
+ "description": "Strong severe border for prominent high-priority warnings"
4574
5114
  },
4575
5115
  "borderColor-severe-muted": {
4576
5116
  "key": "{borderColor.severe.muted}",
@@ -4629,6 +5169,10 @@
4629
5169
  "isSource": true,
4630
5170
  "$type": "color"
4631
5171
  }
5172
+ },
5173
+ "org.primer.llm": {
5174
+ "usage": ["severe-muted", "urgent-muted"],
5175
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4632
5176
  }
4633
5177
  },
4634
5178
  "alpha": 1,
@@ -4637,6 +5181,7 @@
4637
5181
  "original": {
4638
5182
  "$value": "{base.color.red.4}",
4639
5183
  "$type": "color",
5184
+ "$description": "Subtle severe border for high-priority warnings",
4640
5185
  "$extensions": {
4641
5186
  "org.primer.figma": {
4642
5187
  "collection": "mode",
@@ -4692,6 +5237,10 @@
4692
5237
  "isSource": true,
4693
5238
  "$type": "color"
4694
5239
  }
5240
+ },
5241
+ "org.primer.llm": {
5242
+ "usage": ["severe-muted", "urgent-muted"],
5243
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4695
5244
  }
4696
5245
  },
4697
5246
  "alpha": 1,
@@ -4701,7 +5250,8 @@
4701
5250
  "attributes": {},
4702
5251
  "path": ["borderColor", "severe", "muted"],
4703
5252
  "value": "#ff8080",
4704
- "type": "color"
5253
+ "type": "color",
5254
+ "description": "Subtle severe border for high-priority warnings"
4705
5255
  },
4706
5256
  "borderColor-sponsors-emphasis": {
4707
5257
  "key": "{borderColor.sponsors.emphasis}",
@@ -4716,6 +5266,10 @@
4716
5266
  },
4717
5267
  "org.primer.overrides": {
4718
5268
  "dark-dimmed-high-contrast": "#ff8dc7"
5269
+ },
5270
+ "org.primer.llm": {
5271
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5272
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4719
5273
  }
4720
5274
  },
4721
5275
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4723,6 +5277,7 @@
4723
5277
  "original": {
4724
5278
  "$value": "{base.color.pink.5}",
4725
5279
  "$type": "color",
5280
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4726
5281
  "$extensions": {
4727
5282
  "org.primer.figma": {
4728
5283
  "collection": "mode",
@@ -4734,6 +5289,10 @@
4734
5289
  },
4735
5290
  "org.primer.overrides": {
4736
5291
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5292
+ },
5293
+ "org.primer.llm": {
5294
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5295
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4737
5296
  }
4738
5297
  },
4739
5298
  "key": "{borderColor.sponsors.emphasis}"
@@ -4742,7 +5301,8 @@
4742
5301
  "attributes": {},
4743
5302
  "path": ["borderColor", "sponsors", "emphasis"],
4744
5303
  "value": "#ef6eb1",
4745
- "type": "color"
5304
+ "type": "color",
5305
+ "description": "Strong border for prominent GitHub Sponsors elements"
4746
5306
  },
4747
5307
  "borderColor-sponsors-muted": {
4748
5308
  "key": "{borderColor.sponsors.muted}",
@@ -4806,6 +5366,10 @@
4806
5366
  "isSource": true,
4807
5367
  "$type": "color"
4808
5368
  }
5369
+ },
5370
+ "org.primer.llm": {
5371
+ "usage": ["sponsors-muted", "funding-muted"],
5372
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4809
5373
  }
4810
5374
  },
4811
5375
  "alpha": 1,
@@ -4814,6 +5378,7 @@
4814
5378
  "original": {
4815
5379
  "$value": "{base.color.pink.4}",
4816
5380
  "$type": "color",
5381
+ "$description": "Subtle border for GitHub Sponsors content",
4817
5382
  "$extensions": {
4818
5383
  "org.primer.figma": {
4819
5384
  "collection": "mode",
@@ -4874,6 +5439,10 @@
4874
5439
  "isSource": true,
4875
5440
  "$type": "color"
4876
5441
  }
5442
+ },
5443
+ "org.primer.llm": {
5444
+ "usage": ["sponsors-muted", "funding-muted"],
5445
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4877
5446
  }
4878
5447
  },
4879
5448
  "alpha": 1,
@@ -4883,7 +5452,8 @@
4883
5452
  "attributes": {},
4884
5453
  "path": ["borderColor", "sponsors", "muted"],
4885
5454
  "value": "#f87cbd",
4886
- "type": "color"
5455
+ "type": "color",
5456
+ "description": "Subtle border for GitHub Sponsors content"
4887
5457
  },
4888
5458
  "borderColor-success-emphasis": {
4889
5459
  "key": "{borderColor.success.emphasis}",
@@ -4906,6 +5476,10 @@
4906
5476
  "light-protanopia-deuteranopia": "#409eff",
4907
5477
  "light-protanopia-deuteranopia-high-contrast": "#409eff",
4908
5478
  "dark-dimmed-high-contrast": "#4ae168"
5479
+ },
5480
+ "org.primer.llm": {
5481
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5482
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4909
5483
  }
4910
5484
  },
4911
5485
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4913,6 +5487,7 @@
4913
5487
  "original": {
4914
5488
  "$value": "{base.color.blue.5}",
4915
5489
  "$type": "color",
5490
+ "$description": "Strong success border for prominent positive elements",
4916
5491
  "$extensions": {
4917
5492
  "org.primer.figma": {
4918
5493
  "collection": "mode",
@@ -4932,6 +5507,10 @@
4932
5507
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4933
5508
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4934
5509
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5510
+ },
5511
+ "org.primer.llm": {
5512
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5513
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4935
5514
  }
4936
5515
  },
4937
5516
  "key": "{borderColor.success.emphasis}"
@@ -4940,7 +5519,8 @@
4940
5519
  "attributes": {},
4941
5520
  "path": ["borderColor", "success", "emphasis"],
4942
5521
  "value": "#409eff",
4943
- "type": "color"
5522
+ "type": "color",
5523
+ "description": "Strong success border for prominent positive elements"
4944
5524
  },
4945
5525
  "borderColor-success-muted": {
4946
5526
  "key": "{borderColor.success.muted}",
@@ -5031,6 +5611,10 @@
5031
5611
  "isSource": true,
5032
5612
  "$type": "color"
5033
5613
  }
5614
+ },
5615
+ "org.primer.llm": {
5616
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5617
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5034
5618
  }
5035
5619
  },
5036
5620
  "alpha": 1,
@@ -5039,6 +5623,7 @@
5039
5623
  "original": {
5040
5624
  "$value": "{base.color.blue.4}",
5041
5625
  "$type": "color",
5626
+ "$description": "Subtle success border for positive feedback elements",
5042
5627
  "$extensions": {
5043
5628
  "org.primer.figma": {
5044
5629
  "collection": "mode",
@@ -5126,6 +5711,10 @@
5126
5711
  "isSource": true,
5127
5712
  "$type": "color"
5128
5713
  }
5714
+ },
5715
+ "org.primer.llm": {
5716
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5717
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5129
5718
  }
5130
5719
  },
5131
5720
  "alpha": 1,
@@ -5135,7 +5724,8 @@
5135
5724
  "attributes": {},
5136
5725
  "path": ["borderColor", "success", "muted"],
5137
5726
  "value": "#5cacff",
5138
- "type": "color"
5727
+ "type": "color",
5728
+ "description": "Subtle success border for positive feedback elements"
5139
5729
  },
5140
5730
  "borderColor-translucent": {
5141
5731
  "key": "{borderColor.translucent}",
@@ -5195,6 +5785,10 @@
5195
5785
  "isSource": true,
5196
5786
  "$type": "color"
5197
5787
  }
5788
+ },
5789
+ "org.primer.llm": {
5790
+ "usage": ["overlay-border", "translucent-border"],
5791
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5198
5792
  }
5199
5793
  },
5200
5794
  "alpha": 1,
@@ -5203,6 +5797,7 @@
5203
5797
  "original": {
5204
5798
  "$value": "{base.color.neutral.9}",
5205
5799
  "$type": "color",
5800
+ "$description": "Semi-transparent border for overlays and layered elements",
5206
5801
  "$extensions": {
5207
5802
  "org.primer.figma": {
5208
5803
  "collection": "mode",
@@ -5259,6 +5854,10 @@
5259
5854
  "isSource": true,
5260
5855
  "$type": "color"
5261
5856
  }
5857
+ },
5858
+ "org.primer.llm": {
5859
+ "usage": ["overlay-border", "translucent-border"],
5860
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5262
5861
  }
5263
5862
  },
5264
5863
  "alpha": 1,
@@ -5268,7 +5867,8 @@
5268
5867
  "attributes": {},
5269
5868
  "path": ["borderColor", "translucent"],
5270
5869
  "value": "#9198a1",
5271
- "type": "color"
5870
+ "type": "color",
5871
+ "description": "Semi-transparent border for overlays and layered elements"
5272
5872
  },
5273
5873
  "borderColor-transparent": {
5274
5874
  "key": "{borderColor.transparent}",
@@ -5284,6 +5884,7 @@
5284
5884
  "original": {
5285
5885
  "$value": "{base.color.transparent}",
5286
5886
  "$type": "color",
5887
+ "$description": "Fully transparent border",
5287
5888
  "$extensions": {
5288
5889
  "org.primer.figma": {
5289
5890
  "collection": "mode",
@@ -5297,7 +5898,8 @@
5297
5898
  "attributes": {},
5298
5899
  "path": ["borderColor", "transparent"],
5299
5900
  "value": "#00000000",
5300
- "type": "color"
5901
+ "type": "color",
5902
+ "description": "Fully transparent border"
5301
5903
  },
5302
5904
  "borderColor-upsell-emphasis": {
5303
5905
  "key": "{borderColor.upsell.emphasis}",
@@ -5309,6 +5911,10 @@
5309
5911
  "codeSyntax": {
5310
5912
  "web": "var(--borderColor-upsell-emphasis)"
5311
5913
  }
5914
+ },
5915
+ "org.primer.llm": {
5916
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5917
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5312
5918
  }
5313
5919
  },
5314
5920
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5316,6 +5922,7 @@
5316
5922
  "original": {
5317
5923
  "$value": "{borderColor.done.emphasis}",
5318
5924
  "$type": "color",
5925
+ "$description": "Strong border for prominent upsell elements",
5319
5926
  "$extensions": {
5320
5927
  "org.primer.figma": {
5321
5928
  "collection": "mode",
@@ -5324,6 +5931,10 @@
5324
5931
  "codeSyntax": {
5325
5932
  "web": "var(--borderColor-upsell-emphasis)"
5326
5933
  }
5934
+ },
5935
+ "org.primer.llm": {
5936
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5937
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5327
5938
  }
5328
5939
  },
5329
5940
  "key": "{borderColor.upsell.emphasis}"
@@ -5332,7 +5943,8 @@
5332
5943
  "attributes": {},
5333
5944
  "path": ["borderColor", "upsell", "emphasis"],
5334
5945
  "value": "#b87fff",
5335
- "type": "color"
5946
+ "type": "color",
5947
+ "description": "Strong border for prominent upsell elements"
5336
5948
  },
5337
5949
  "borderColor-upsell-muted": {
5338
5950
  "key": "{borderColor.upsell.muted}",
@@ -5344,6 +5956,10 @@
5344
5956
  "codeSyntax": {
5345
5957
  "web": "var(--borderColor-upsell-muted)"
5346
5958
  }
5959
+ },
5960
+ "org.primer.llm": {
5961
+ "usage": ["upsell-muted", "premium-muted"],
5962
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5347
5963
  }
5348
5964
  },
5349
5965
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5351,6 +5967,7 @@
5351
5967
  "original": {
5352
5968
  "$value": "{borderColor.done.muted}",
5353
5969
  "$type": "color",
5970
+ "$description": "Subtle border for upsell and promotional content",
5354
5971
  "$extensions": {
5355
5972
  "org.primer.figma": {
5356
5973
  "collection": "mode",
@@ -5359,6 +5976,10 @@
5359
5976
  "codeSyntax": {
5360
5977
  "web": "var(--borderColor-upsell-muted)"
5361
5978
  }
5979
+ },
5980
+ "org.primer.llm": {
5981
+ "usage": ["upsell-muted", "premium-muted"],
5982
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5362
5983
  }
5363
5984
  },
5364
5985
  "key": "{borderColor.upsell.muted}"
@@ -5367,7 +5988,8 @@
5367
5988
  "attributes": {},
5368
5989
  "path": ["borderColor", "upsell", "muted"],
5369
5990
  "value": "#bf8fff",
5370
- "type": "color"
5991
+ "type": "color",
5992
+ "description": "Subtle border for upsell and promotional content"
5371
5993
  },
5372
5994
  "button-danger-bgColor-active": {
5373
5995
  "key": "{button.danger.bgColor.active}",
@@ -36528,6 +37150,10 @@
36528
37150
  "light-high-contrast": "#318bf8",
36529
37151
  "light-tritanopia-high-contrast": "#318bf8",
36530
37152
  "light-protanopia-deuteranopia-high-contrast": "#318bf8"
37153
+ },
37154
+ "org.primer.llm": {
37155
+ "usage": ["accent-text", "info-text", "accent-icon"],
37156
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36531
37157
  }
36532
37158
  },
36533
37159
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36535,6 +37161,7 @@
36535
37161
  "original": {
36536
37162
  "$value": "#74B9FF",
36537
37163
  "$type": "color",
37164
+ "$description": "Accent text for links and interactive elements",
36538
37165
  "$extensions": {
36539
37166
  "org.primer.figma": {
36540
37167
  "collection": "mode",
@@ -36554,6 +37181,10 @@
36554
37181
  "light-high-contrast": "{base.color.blue.6}",
36555
37182
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36556
37183
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37184
+ },
37185
+ "org.primer.llm": {
37186
+ "usage": ["accent-text", "info-text", "accent-icon"],
37187
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36557
37188
  }
36558
37189
  },
36559
37190
  "key": "{fgColor.accent}"
@@ -36562,7 +37193,8 @@
36562
37193
  "attributes": {},
36563
37194
  "path": ["fgColor", "accent"],
36564
37195
  "value": "#74b9ff",
36565
- "type": "color"
37196
+ "type": "color",
37197
+ "description": "Accent text for links and interactive elements"
36566
37198
  },
36567
37199
  "fgColor-attention": {
36568
37200
  "key": "{fgColor.attention}",
@@ -36581,6 +37213,10 @@
36581
37213
  "light-protanopia-deuteranopia-high-contrast": "#c88508",
36582
37214
  "light-tritanopia-high-contrast": "#c88508",
36583
37215
  "dark-dimmed-high-contrast": "#fbd669"
37216
+ },
37217
+ "org.primer.llm": {
37218
+ "usage": ["attention-text", "warning-text", "caution-text"],
37219
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36584
37220
  }
36585
37221
  },
36586
37222
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36588,6 +37224,7 @@
36588
37224
  "original": {
36589
37225
  "$value": "{base.color.yellow.3}",
36590
37226
  "$type": "color",
37227
+ "$description": "Attention text for warnings and caution states",
36591
37228
  "$extensions": {
36592
37229
  "org.primer.figma": {
36593
37230
  "collection": "mode",
@@ -36603,6 +37240,10 @@
36603
37240
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36604
37241
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36605
37242
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37243
+ },
37244
+ "org.primer.llm": {
37245
+ "usage": ["attention-text", "warning-text", "caution-text"],
37246
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36606
37247
  }
36607
37248
  },
36608
37249
  "key": "{fgColor.attention}"
@@ -36611,7 +37252,8 @@
36611
37252
  "attributes": {},
36612
37253
  "path": ["fgColor", "attention"],
36613
37254
  "value": "#f0b72f",
36614
- "type": "color"
37255
+ "type": "color",
37256
+ "description": "Attention text for warnings and caution states"
36615
37257
  },
36616
37258
  "fgColor-black": {
36617
37259
  "key": "{fgColor.black}",
@@ -36623,6 +37265,10 @@
36623
37265
  },
36624
37266
  "org.primer.overrides": {
36625
37267
  "dark": "#010409"
37268
+ },
37269
+ "org.primer.llm": {
37270
+ "doNotUse": true,
37271
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36626
37272
  }
36627
37273
  },
36628
37274
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36630,6 +37276,7 @@
36630
37276
  "original": {
36631
37277
  "$value": "{base.color.neutral.0}",
36632
37278
  "$type": "color",
37279
+ "$description": "Pure black text",
36633
37280
  "$extensions": {
36634
37281
  "org.primer.figma": {
36635
37282
  "collection": "mode",
@@ -36638,6 +37285,10 @@
36638
37285
  },
36639
37286
  "org.primer.overrides": {
36640
37287
  "dark": "{base.color.neutral.0}"
37288
+ },
37289
+ "org.primer.llm": {
37290
+ "doNotUse": true,
37291
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36641
37292
  }
36642
37293
  },
36643
37294
  "key": "{fgColor.black}"
@@ -36646,7 +37297,8 @@
36646
37297
  "attributes": {},
36647
37298
  "path": ["fgColor", "black"],
36648
37299
  "value": "#010409",
36649
- "type": "color"
37300
+ "type": "color",
37301
+ "description": "Pure black text"
36650
37302
  },
36651
37303
  "fgColor-closed": {
36652
37304
  "key": "{fgColor.closed}",
@@ -36668,6 +37320,10 @@
36668
37320
  "dark-tritanopia-high-contrast": "#b7bdc8",
36669
37321
  "light-tritanopia": "#b7bdc8",
36670
37322
  "light-tritanopia-high-contrast": "#b7bdc8"
37323
+ },
37324
+ "org.primer.llm": {
37325
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37326
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36671
37327
  }
36672
37328
  },
36673
37329
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36675,6 +37331,7 @@
36675
37331
  "original": {
36676
37332
  "$value": "{fgColor.muted}",
36677
37333
  "$type": "color",
37334
+ "$description": "Text color for closed state indicators (issues, PRs)",
36678
37335
  "$extensions": {
36679
37336
  "org.primer.figma": {
36680
37337
  "collection": "mode",
@@ -36693,6 +37350,10 @@
36693
37350
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36694
37351
  "light-tritanopia": "{fgColor.muted}",
36695
37352
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37353
+ },
37354
+ "org.primer.llm": {
37355
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37356
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36696
37357
  }
36697
37358
  },
36698
37359
  "key": "{fgColor.closed}"
@@ -36701,7 +37362,8 @@
36701
37362
  "attributes": {},
36702
37363
  "path": ["fgColor", "closed"],
36703
37364
  "value": "#b7bdc8",
36704
- "type": "color"
37365
+ "type": "color",
37366
+ "description": "Text color for closed state indicators (issues, PRs)"
36705
37367
  },
36706
37368
  "fgColor-danger": {
36707
37369
  "key": "{fgColor.danger}",
@@ -36725,6 +37387,10 @@
36725
37387
  "dark-tritanopia-high-contrast": "#ff9492",
36726
37388
  "light-high-contrast": "#ff4445",
36727
37389
  "light-tritanopia-high-contrast": "#ff4445"
37390
+ },
37391
+ "org.primer.llm": {
37392
+ "usage": ["danger-text", "error-text", "destructive-text"],
37393
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36728
37394
  }
36729
37395
  },
36730
37396
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36732,6 +37398,7 @@
36732
37398
  "original": {
36733
37399
  "$value": "{base.color.red.3}",
36734
37400
  "$type": "color",
37401
+ "$description": "Danger text for errors and destructive actions",
36735
37402
  "$extensions": {
36736
37403
  "org.primer.figma": {
36737
37404
  "collection": "mode",
@@ -36752,6 +37419,10 @@
36752
37419
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36753
37420
  "light-high-contrast": "{base.color.red.6}",
36754
37421
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37422
+ },
37423
+ "org.primer.llm": {
37424
+ "usage": ["danger-text", "error-text", "destructive-text"],
37425
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36755
37426
  }
36756
37427
  },
36757
37428
  "key": "{fgColor.danger}"
@@ -36760,7 +37431,8 @@
36760
37431
  "attributes": {},
36761
37432
  "path": ["fgColor", "danger"],
36762
37433
  "value": "#ff9492",
36763
- "type": "color"
37434
+ "type": "color",
37435
+ "description": "Danger text for errors and destructive actions"
36764
37436
  },
36765
37437
  "fgColor-default": {
36766
37438
  "key": "{fgColor.default}",
@@ -36778,8 +37450,12 @@
36778
37450
  "dark-high-contrast": "#ffffff",
36779
37451
  "dark-tritanopia-high-contrast": "#ffffff",
36780
37452
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff",
36781
- "dark-dimmed": "#d1d7e0",
37453
+ "dark-dimmed": "#f0f6fc",
36782
37454
  "dark-dimmed-high-contrast": "#f0f6fc"
37455
+ },
37456
+ "org.primer.llm": {
37457
+ "usage": ["default-text", "heading", "body-text"],
37458
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36783
37459
  }
36784
37460
  },
36785
37461
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36787,6 +37463,7 @@
36787
37463
  "original": {
36788
37464
  "$value": "{base.color.neutral.13}",
36789
37465
  "$type": "color",
37466
+ "$description": "Default text color for primary content and headings",
36790
37467
  "$extensions": {
36791
37468
  "org.primer.figma": {
36792
37469
  "collection": "mode",
@@ -36801,8 +37478,12 @@
36801
37478
  "dark-high-contrast": "{base.color.neutral.13}",
36802
37479
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36803
37480
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36804
- "dark-dimmed": "{base.color.neutral.11}",
37481
+ "dark-dimmed": "{base.color.neutral.12}",
36805
37482
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37483
+ },
37484
+ "org.primer.llm": {
37485
+ "usage": ["default-text", "heading", "body-text"],
37486
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36806
37487
  }
36807
37488
  },
36808
37489
  "key": "{fgColor.default}"
@@ -36811,7 +37492,8 @@
36811
37492
  "attributes": {},
36812
37493
  "path": ["fgColor", "default"],
36813
37494
  "value": "#ffffff",
36814
- "type": "color"
37495
+ "type": "color",
37496
+ "description": "Default text color for primary content and headings"
36815
37497
  },
36816
37498
  "fgColor-disabled": {
36817
37499
  "key": "{fgColor.disabled}",
@@ -36836,6 +37518,10 @@
36836
37518
  "dark-high-contrast": "#656c76",
36837
37519
  "dark-tritanopia-high-contrast": "#656c76",
36838
37520
  "dark-protanopia-deuteranopia-high-contrast": "#656c76"
37521
+ },
37522
+ "org.primer.llm": {
37523
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37524
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36839
37525
  }
36840
37526
  },
36841
37527
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36843,6 +37529,7 @@
36843
37529
  "original": {
36844
37530
  "$value": "{base.color.neutral.8}",
36845
37531
  "$type": "color",
37532
+ "$description": "Text color for disabled interactive elements",
36846
37533
  "$extensions": {
36847
37534
  "org.primer.figma": {
36848
37535
  "collection": "mode",
@@ -36864,6 +37551,10 @@
36864
37551
  "dark-high-contrast": "{base.color.neutral.8}",
36865
37552
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36866
37553
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37554
+ },
37555
+ "org.primer.llm": {
37556
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37557
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36867
37558
  }
36868
37559
  },
36869
37560
  "key": "{fgColor.disabled}"
@@ -36872,7 +37563,8 @@
36872
37563
  "attributes": {},
36873
37564
  "path": ["fgColor", "disabled"],
36874
37565
  "value": "#656c76",
36875
- "type": "color"
37566
+ "type": "color",
37567
+ "description": "Text color for disabled interactive elements"
36876
37568
  },
36877
37569
  "fgColor-done": {
36878
37570
  "key": "{fgColor.done}",
@@ -36894,6 +37586,10 @@
36894
37586
  "light-high-contrast": "#a66bff",
36895
37587
  "light-protanopia-deuteranopia-high-contrast": "#a66bff",
36896
37588
  "light-tritanopia-high-contrast": "#a66bff"
37589
+ },
37590
+ "org.primer.llm": {
37591
+ "usage": ["done-text", "merged", "completed"],
37592
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36897
37593
  }
36898
37594
  },
36899
37595
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36901,6 +37597,7 @@
36901
37597
  "original": {
36902
37598
  "$value": "#D3ABFF",
36903
37599
  "$type": "color",
37600
+ "$description": "Text color for completed/done state indicators",
36904
37601
  "$extensions": {
36905
37602
  "org.primer.figma": {
36906
37603
  "collection": "mode",
@@ -36919,6 +37616,10 @@
36919
37616
  "light-high-contrast": "{base.color.purple.6}",
36920
37617
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36921
37618
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37619
+ },
37620
+ "org.primer.llm": {
37621
+ "usage": ["done-text", "merged", "completed"],
37622
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36922
37623
  }
36923
37624
  },
36924
37625
  "key": "{fgColor.done}"
@@ -36927,7 +37628,8 @@
36927
37628
  "attributes": {},
36928
37629
  "path": ["fgColor", "done"],
36929
37630
  "value": "#d3abff",
36930
- "type": "color"
37631
+ "type": "color",
37632
+ "description": "Text color for completed/done state indicators"
36931
37633
  },
36932
37634
  "fgColor-draft": {
36933
37635
  "key": "{fgColor.draft}",
@@ -36939,6 +37641,10 @@
36939
37641
  "codeSyntax": {
36940
37642
  "web": "var(--fgColor-draft)"
36941
37643
  }
37644
+ },
37645
+ "org.primer.llm": {
37646
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37647
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36942
37648
  }
36943
37649
  },
36944
37650
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36946,6 +37652,7 @@
36946
37652
  "original": {
36947
37653
  "$value": "{fgColor.neutral}",
36948
37654
  "$type": "color",
37655
+ "$description": "Text color for draft state indicators",
36949
37656
  "$extensions": {
36950
37657
  "org.primer.figma": {
36951
37658
  "collection": "mode",
@@ -36954,6 +37661,10 @@
36954
37661
  "codeSyntax": {
36955
37662
  "web": "var(--fgColor-draft)"
36956
37663
  }
37664
+ },
37665
+ "org.primer.llm": {
37666
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37667
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36957
37668
  }
36958
37669
  },
36959
37670
  "key": "{fgColor.draft}"
@@ -36962,7 +37673,8 @@
36962
37673
  "attributes": {},
36963
37674
  "path": ["fgColor", "draft"],
36964
37675
  "value": "#d1d7e0",
36965
- "type": "color"
37676
+ "type": "color",
37677
+ "description": "Text color for draft state indicators"
36966
37678
  },
36967
37679
  "fgColor-link": {
36968
37680
  "key": "{fgColor.link}",
@@ -36974,6 +37686,10 @@
36974
37686
  "codeSyntax": {
36975
37687
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36976
37688
  }
37689
+ },
37690
+ "org.primer.llm": {
37691
+ "usage": ["link-text", "hyperlink"],
37692
+ "rules": "MUST use for all text links. Provides expected link affordance."
36977
37693
  }
36978
37694
  },
36979
37695
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36981,6 +37697,7 @@
36981
37697
  "original": {
36982
37698
  "$value": "{fgColor.accent}",
36983
37699
  "$type": "color",
37700
+ "$description": "Text color for hyperlinks",
36984
37701
  "$extensions": {
36985
37702
  "org.primer.figma": {
36986
37703
  "collection": "mode",
@@ -36989,6 +37706,10 @@
36989
37706
  "codeSyntax": {
36990
37707
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36991
37708
  }
37709
+ },
37710
+ "org.primer.llm": {
37711
+ "usage": ["link-text", "hyperlink"],
37712
+ "rules": "MUST use for all text links. Provides expected link affordance."
36992
37713
  }
36993
37714
  },
36994
37715
  "key": "{fgColor.link}"
@@ -36997,7 +37718,8 @@
36997
37718
  "attributes": {},
36998
37719
  "path": ["fgColor", "link"],
36999
37720
  "value": "#74b9ff",
37000
- "type": "color"
37721
+ "type": "color",
37722
+ "description": "Text color for hyperlinks"
37001
37723
  },
37002
37724
  "fgColor-muted": {
37003
37725
  "key": "{fgColor.muted}",
@@ -37018,6 +37740,10 @@
37018
37740
  "dark-dimmed-high-contrast": "#b7bdc8",
37019
37741
  "dark-tritanopia-high-contrast": "#b7bdc8",
37020
37742
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
37743
+ },
37744
+ "org.primer.llm": {
37745
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37746
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37021
37747
  }
37022
37748
  },
37023
37749
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37025,6 +37751,7 @@
37025
37751
  "original": {
37026
37752
  "$value": "{base.color.neutral.10}",
37027
37753
  "$type": "color",
37754
+ "$description": "Muted text for secondary content and less important information",
37028
37755
  "$extensions": {
37029
37756
  "org.primer.figma": {
37030
37757
  "collection": "mode",
@@ -37042,6 +37769,10 @@
37042
37769
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37043
37770
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37044
37771
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37772
+ },
37773
+ "org.primer.llm": {
37774
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37775
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37045
37776
  }
37046
37777
  },
37047
37778
  "key": "{fgColor.muted}"
@@ -37050,7 +37781,8 @@
37050
37781
  "attributes": {},
37051
37782
  "path": ["fgColor", "muted"],
37052
37783
  "value": "#b7bdc8",
37053
- "type": "color"
37784
+ "type": "color",
37785
+ "description": "Muted text for secondary content and less important information"
37054
37786
  },
37055
37787
  "fgColor-neutral": {
37056
37788
  "key": "{fgColor.neutral}",
@@ -37068,6 +37800,10 @@
37068
37800
  "dark-dimmed-high-contrast": "#d1d7e0",
37069
37801
  "dark-tritanopia-high-contrast": "#d1d7e0",
37070
37802
  "dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
37803
+ },
37804
+ "org.primer.llm": {
37805
+ "usage": ["neutral-icon", "neutral-text"],
37806
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37071
37807
  }
37072
37808
  },
37073
37809
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37075,6 +37811,7 @@
37075
37811
  "original": {
37076
37812
  "$value": "{base.color.neutral.11}",
37077
37813
  "$type": "color",
37814
+ "$description": "Neutral semantic text for icons and secondary elements",
37078
37815
  "$extensions": {
37079
37816
  "org.primer.figma": {
37080
37817
  "collection": "mode",
@@ -37089,6 +37826,10 @@
37089
37826
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37090
37827
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37091
37828
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37829
+ },
37830
+ "org.primer.llm": {
37831
+ "usage": ["neutral-icon", "neutral-text"],
37832
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37092
37833
  }
37093
37834
  },
37094
37835
  "key": "{fgColor.neutral}"
@@ -37097,7 +37838,8 @@
37097
37838
  "attributes": {},
37098
37839
  "path": ["fgColor", "neutral"],
37099
37840
  "value": "#d1d7e0",
37100
- "type": "color"
37841
+ "type": "color",
37842
+ "description": "Neutral semantic text for icons and secondary elements"
37101
37843
  },
37102
37844
  "fgColor-onEmphasis": {
37103
37845
  "key": "{fgColor.onEmphasis}",
@@ -37114,6 +37856,10 @@
37114
37856
  "dark": "#ffffff",
37115
37857
  "dark-dimmed": "#f0f6fc",
37116
37858
  "dark-dimmed-high-contrast": "#ffffff"
37859
+ },
37860
+ "org.primer.llm": {
37861
+ "usage": ["text-on-emphasis", "contrast-text"],
37862
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37117
37863
  }
37118
37864
  },
37119
37865
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37121,6 +37867,7 @@
37121
37867
  "original": {
37122
37868
  "$value": "{base.color.neutral.13}",
37123
37869
  "$type": "color",
37870
+ "$description": "Text color for use on emphasis backgrounds",
37124
37871
  "$extensions": {
37125
37872
  "org.primer.figma": {
37126
37873
  "collection": "mode",
@@ -37134,6 +37881,10 @@
37134
37881
  "dark": "{base.color.neutral.13}",
37135
37882
  "dark-dimmed": "{base.color.neutral.12}",
37136
37883
  "dark-dimmed-high-contrast": "#ffffff"
37884
+ },
37885
+ "org.primer.llm": {
37886
+ "usage": ["text-on-emphasis", "contrast-text"],
37887
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37137
37888
  }
37138
37889
  },
37139
37890
  "key": "{fgColor.onEmphasis}"
@@ -37142,7 +37893,8 @@
37142
37893
  "attributes": {},
37143
37894
  "path": ["fgColor", "onEmphasis"],
37144
37895
  "value": "#ffffff",
37145
- "type": "color"
37896
+ "type": "color",
37897
+ "description": "Text color for use on emphasis backgrounds"
37146
37898
  },
37147
37899
  "fgColor-onInverse": {
37148
37900
  "key": "{fgColor.onInverse}",
@@ -37151,6 +37903,10 @@
37151
37903
  "collection": "mode",
37152
37904
  "group": "semantic",
37153
37905
  "scopes": ["fgColor"]
37906
+ },
37907
+ "org.primer.llm": {
37908
+ "usage": ["text-on-inverse", "inverse-text"],
37909
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37154
37910
  }
37155
37911
  },
37156
37912
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37158,11 +37914,16 @@
37158
37914
  "original": {
37159
37915
  "$value": "{base.color.neutral.0}",
37160
37916
  "$type": "color",
37917
+ "$description": "Text color for use on inverse backgrounds",
37161
37918
  "$extensions": {
37162
37919
  "org.primer.figma": {
37163
37920
  "collection": "mode",
37164
37921
  "group": "semantic",
37165
37922
  "scopes": ["fgColor"]
37923
+ },
37924
+ "org.primer.llm": {
37925
+ "usage": ["text-on-inverse", "inverse-text"],
37926
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37166
37927
  }
37167
37928
  },
37168
37929
  "key": "{fgColor.onInverse}"
@@ -37171,7 +37932,8 @@
37171
37932
  "attributes": {},
37172
37933
  "path": ["fgColor", "onInverse"],
37173
37934
  "value": "#010409",
37174
- "type": "color"
37935
+ "type": "color",
37936
+ "description": "Text color for use on inverse backgrounds"
37175
37937
  },
37176
37938
  "fgColor-open": {
37177
37939
  "key": "{fgColor.open}",
@@ -37193,6 +37955,10 @@
37193
37955
  "dark-tritanopia-high-contrast": "#ffb1af",
37194
37956
  "light-tritanopia": "#ff6a69",
37195
37957
  "light-tritanopia-high-contrast": "#ff4445"
37958
+ },
37959
+ "org.primer.llm": {
37960
+ "usage": ["open-text", "open-issue", "open-pr"],
37961
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37196
37962
  }
37197
37963
  },
37198
37964
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37200,6 +37966,7 @@
37200
37966
  "original": {
37201
37967
  "$value": "{base.color.red.2}",
37202
37968
  "$type": "color",
37969
+ "$description": "Text color for open state indicators (issues, PRs)",
37203
37970
  "$extensions": {
37204
37971
  "org.primer.figma": {
37205
37972
  "collection": "mode",
@@ -37218,6 +37985,10 @@
37218
37985
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37219
37986
  "light-tritanopia": "{base.color.red.5}",
37220
37987
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37988
+ },
37989
+ "org.primer.llm": {
37990
+ "usage": ["open-text", "open-issue", "open-pr"],
37991
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37221
37992
  }
37222
37993
  },
37223
37994
  "key": "{fgColor.open}"
@@ -37226,7 +37997,8 @@
37226
37997
  "attributes": {},
37227
37998
  "path": ["fgColor", "open"],
37228
37999
  "value": "#ffb1af",
37229
- "type": "color"
38000
+ "type": "color",
38001
+ "description": "Text color for open state indicators (issues, PRs)"
37230
38002
  },
37231
38003
  "fgColor-severe": {
37232
38004
  "key": "{fgColor.severe}",
@@ -37250,6 +38022,10 @@
37250
38022
  "light-tritanopia": "#ff6a69",
37251
38023
  "light-tritanopia-high-contrast": "#ff4445",
37252
38024
  "light-protanopia-deuteranopia-high-contrast": "#d57014"
38025
+ },
38026
+ "org.primer.llm": {
38027
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38028
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37253
38029
  }
37254
38030
  },
37255
38031
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37257,6 +38033,7 @@
37257
38033
  "original": {
37258
38034
  "$value": "{base.color.red.3}",
37259
38035
  "$type": "color",
38036
+ "$description": "Severe text for high-priority warnings",
37260
38037
  "$extensions": {
37261
38038
  "org.primer.figma": {
37262
38039
  "collection": "mode",
@@ -37277,6 +38054,10 @@
37277
38054
  "light-tritanopia": "{base.color.red.5}",
37278
38055
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37279
38056
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38057
+ },
38058
+ "org.primer.llm": {
38059
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38060
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37280
38061
  }
37281
38062
  },
37282
38063
  "key": "{fgColor.severe}"
@@ -37285,7 +38066,8 @@
37285
38066
  "attributes": {},
37286
38067
  "path": ["fgColor", "severe"],
37287
38068
  "value": "#ff9492",
37288
- "type": "color"
38069
+ "type": "color",
38070
+ "description": "Severe text for high-priority warnings"
37289
38071
  },
37290
38072
  "fgColor-sponsors": {
37291
38073
  "key": "{fgColor.sponsors}",
@@ -37307,6 +38089,10 @@
37307
38089
  "light-high-contrast": "#e456a3",
37308
38090
  "light-protanopia-deuteranopia-high-contrast": "#e456a3",
37309
38091
  "light-tritanopia-high-contrast": "#e456a3"
38092
+ },
38093
+ "org.primer.llm": {
38094
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38095
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37310
38096
  }
37311
38097
  },
37312
38098
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37314,6 +38100,7 @@
37314
38100
  "original": {
37315
38101
  "$value": "#FF90C8",
37316
38102
  "$type": "color",
38103
+ "$description": "Text color for GitHub Sponsors content",
37317
38104
  "$extensions": {
37318
38105
  "org.primer.figma": {
37319
38106
  "collection": "mode",
@@ -37332,6 +38119,10 @@
37332
38119
  "light-high-contrast": "{base.color.pink.6}",
37333
38120
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37334
38121
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38122
+ },
38123
+ "org.primer.llm": {
38124
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38125
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37335
38126
  }
37336
38127
  },
37337
38128
  "key": "{fgColor.sponsors}"
@@ -37340,7 +38131,8 @@
37340
38131
  "attributes": {},
37341
38132
  "path": ["fgColor", "sponsors"],
37342
38133
  "value": "#ff90c8",
37343
- "type": "color"
38134
+ "type": "color",
38135
+ "description": "Text color for GitHub Sponsors content"
37344
38136
  },
37345
38137
  "fgColor-success": {
37346
38138
  "key": "{fgColor.success}",
@@ -37366,6 +38158,10 @@
37366
38158
  "dark-tritanopia-high-contrast": "#91cbff",
37367
38159
  "light-tritanopia": "#409eff",
37368
38160
  "light-tritanopia-high-contrast": "#318bf8"
38161
+ },
38162
+ "org.primer.llm": {
38163
+ "usage": ["success-text", "positive-text", "success-icon"],
38164
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37369
38165
  }
37370
38166
  },
37371
38167
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37373,6 +38169,7 @@
37373
38169
  "original": {
37374
38170
  "$value": "{base.color.blue.2}",
37375
38171
  "$type": "color",
38172
+ "$description": "Success text for positive feedback and completed states",
37376
38173
  "$extensions": {
37377
38174
  "org.primer.figma": {
37378
38175
  "collection": "mode",
@@ -37395,6 +38192,10 @@
37395
38192
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37396
38193
  "light-tritanopia": "{base.color.blue.5}",
37397
38194
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38195
+ },
38196
+ "org.primer.llm": {
38197
+ "usage": ["success-text", "positive-text", "success-icon"],
38198
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37398
38199
  }
37399
38200
  },
37400
38201
  "key": "{fgColor.success}"
@@ -37403,7 +38204,8 @@
37403
38204
  "attributes": {},
37404
38205
  "path": ["fgColor", "success"],
37405
38206
  "value": "#91cbff",
37406
- "type": "color"
38207
+ "type": "color",
38208
+ "description": "Success text for positive feedback and completed states"
37407
38209
  },
37408
38210
  "fgColor-upsell": {
37409
38211
  "key": "{fgColor.upsell}",
@@ -37415,6 +38217,10 @@
37415
38217
  "codeSyntax": {
37416
38218
  "web": "var(--fgColor-upsell)"
37417
38219
  }
38220
+ },
38221
+ "org.primer.llm": {
38222
+ "usage": ["upsell-text", "premium-text", "promotional"],
38223
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37418
38224
  }
37419
38225
  },
37420
38226
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37422,6 +38228,7 @@
37422
38228
  "original": {
37423
38229
  "$value": "{fgColor.done}",
37424
38230
  "$type": "color",
38231
+ "$description": "Text color for upsell and promotional content",
37425
38232
  "$extensions": {
37426
38233
  "org.primer.figma": {
37427
38234
  "collection": "mode",
@@ -37430,6 +38237,10 @@
37430
38237
  "codeSyntax": {
37431
38238
  "web": "var(--fgColor-upsell)"
37432
38239
  }
38240
+ },
38241
+ "org.primer.llm": {
38242
+ "usage": ["upsell-text", "premium-text", "promotional"],
38243
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37433
38244
  }
37434
38245
  },
37435
38246
  "key": "{fgColor.upsell}"
@@ -37438,7 +38249,8 @@
37438
38249
  "attributes": {},
37439
38250
  "path": ["fgColor", "upsell"],
37440
38251
  "value": "#d3abff",
37441
- "type": "color"
38252
+ "type": "color",
38253
+ "description": "Text color for upsell and promotional content"
37442
38254
  },
37443
38255
  "fgColor-white": {
37444
38256
  "key": "{fgColor.white}",
@@ -37450,6 +38262,10 @@
37450
38262
  },
37451
38263
  "org.primer.overrides": {
37452
38264
  "dark": "#ffffff"
38265
+ },
38266
+ "org.primer.llm": {
38267
+ "doNotUse": true,
38268
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37453
38269
  }
37454
38270
  },
37455
38271
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37457,6 +38273,7 @@
37457
38273
  "original": {
37458
38274
  "$value": "{base.color.neutral.13}",
37459
38275
  "$type": "color",
38276
+ "$description": "Pure white text",
37460
38277
  "$extensions": {
37461
38278
  "org.primer.figma": {
37462
38279
  "collection": "mode",
@@ -37465,6 +38282,10 @@
37465
38282
  },
37466
38283
  "org.primer.overrides": {
37467
38284
  "dark": "{base.color.neutral.13}"
38285
+ },
38286
+ "org.primer.llm": {
38287
+ "doNotUse": true,
38288
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37468
38289
  }
37469
38290
  },
37470
38291
  "key": "{fgColor.white}"
@@ -37473,10 +38294,17 @@
37473
38294
  "attributes": {},
37474
38295
  "path": ["fgColor", "white"],
37475
38296
  "value": "#ffffff",
37476
- "type": "color"
38297
+ "type": "color",
38298
+ "description": "Pure white text"
37477
38299
  },
37478
38300
  "focus-outline": {
37479
38301
  "key": "{focus.outline}",
38302
+ "$extensions": {
38303
+ "org.primer.llm": {
38304
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38305
+ "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."
38306
+ }
38307
+ },
37480
38308
  "filePath": "src/tokens/functional/border/border.json5",
37481
38309
  "isSource": true,
37482
38310
  "original": {
@@ -37486,13 +38314,21 @@
37486
38314
  "width": "2px"
37487
38315
  },
37488
38316
  "$type": "border",
38317
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38318
+ "$extensions": {
38319
+ "org.primer.llm": {
38320
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38321
+ "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."
38322
+ }
38323
+ },
37489
38324
  "key": "{focus.outline}"
37490
38325
  },
37491
38326
  "name": "focus-outline",
37492
38327
  "attributes": {},
37493
38328
  "path": ["focus", "outline"],
37494
38329
  "value": "2px solid #409eff",
37495
- "type": "border"
38330
+ "type": "border",
38331
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37496
38332
  },
37497
38333
  "focus-outlineColor": {
37498
38334
  "key": "{focus.outlineColor}",
@@ -37501,6 +38337,10 @@
37501
38337
  "collection": "mode",
37502
38338
  "group": "component (internal)",
37503
38339
  "scopes": ["borderColor", "effectColor"]
38340
+ },
38341
+ "org.primer.llm": {
38342
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38343
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37504
38344
  }
37505
38345
  },
37506
38346
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37508,11 +38348,16 @@
37508
38348
  "original": {
37509
38349
  "$value": "{borderColor.accent.emphasis}",
37510
38350
  "$type": "color",
38351
+ "$description": "Outline color for focus states on interactive elements",
37511
38352
  "$extensions": {
37512
38353
  "org.primer.figma": {
37513
38354
  "collection": "mode",
37514
38355
  "group": "component (internal)",
37515
38356
  "scopes": ["borderColor", "effectColor"]
38357
+ },
38358
+ "org.primer.llm": {
38359
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38360
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37516
38361
  }
37517
38362
  },
37518
38363
  "key": "{focus.outlineColor}"
@@ -37521,7 +38366,8 @@
37521
38366
  "attributes": {},
37522
38367
  "path": ["focus", "outlineColor"],
37523
38368
  "value": "#409eff",
37524
- "type": "color"
38369
+ "type": "color",
38370
+ "description": "Outline color for focus states on interactive elements"
37525
38371
  },
37526
38372
  "header-bgColor": {
37527
38373
  "key": "{header.bgColor}",
@@ -46582,6 +47428,10 @@
46582
47428
  "isSource": true,
46583
47429
  "$type": "color"
46584
47430
  }
47431
+ },
47432
+ "org.primer.llm": {
47433
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47434
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46585
47435
  }
46586
47436
  },
46587
47437
  "alpha": 0.7,
@@ -46590,6 +47440,7 @@
46590
47440
  "original": {
46591
47441
  "$value": "{bgColor.accent.emphasis}",
46592
47442
  "$type": "color",
47443
+ "$description": "Background color for text selection highlights",
46593
47444
  "$extensions": {
46594
47445
  "org.primer.figma": {
46595
47446
  "collection": "mode",
@@ -46604,6 +47455,10 @@
46604
47455
  "isSource": true,
46605
47456
  "$type": "color"
46606
47457
  }
47458
+ },
47459
+ "org.primer.llm": {
47460
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47461
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46607
47462
  }
46608
47463
  },
46609
47464
  "alpha": 0.7,
@@ -46613,7 +47468,8 @@
46613
47468
  "attributes": {},
46614
47469
  "path": ["selection", "bgColor"],
46615
47470
  "value": "#194fb1b3",
46616
- "type": "color"
47471
+ "type": "color",
47472
+ "description": "Background color for text selection highlights"
46617
47473
  },
46618
47474
  "shadow-floating-large": {
46619
47475
  "key": "{shadow.floating.large}",
@@ -46646,6 +47502,10 @@
46646
47502
  "isSource": true,
46647
47503
  "$type": "shadow"
46648
47504
  }
47505
+ },
47506
+ "org.primer.llm": {
47507
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47508
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46649
47509
  }
46650
47510
  },
46651
47511
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46670,6 +47530,7 @@
46670
47530
  }
46671
47531
  ],
46672
47532
  "$type": "shadow",
47533
+ "$description": "Large floating shadow for modals and dialogs",
46673
47534
  "$extensions": {
46674
47535
  "org.primer.figma": {
46675
47536
  "collection": "mode",
@@ -46699,6 +47560,10 @@
46699
47560
  "isSource": true,
46700
47561
  "$type": "shadow"
46701
47562
  }
47563
+ },
47564
+ "org.primer.llm": {
47565
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47566
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46702
47567
  }
46703
47568
  },
46704
47569
  "key": "{shadow.floating.large}"
@@ -46707,7 +47572,8 @@
46707
47572
  "attributes": {},
46708
47573
  "path": ["shadow", "floating", "large"],
46709
47574
  "value": "0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409",
46710
- "type": "shadow"
47575
+ "type": "shadow",
47576
+ "description": "Large floating shadow for modals and dialogs"
46711
47577
  },
46712
47578
  "shadow-floating-legacy": {
46713
47579
  "key": "{shadow.floating.legacy}",
@@ -46737,6 +47603,10 @@
46737
47603
  "isSource": true,
46738
47604
  "$type": "shadow"
46739
47605
  }
47606
+ },
47607
+ "org.primer.llm": {
47608
+ "usage": ["legacy-component", "backward-compatibility"],
47609
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46740
47610
  }
46741
47611
  },
46742
47612
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46761,6 +47631,7 @@
46761
47631
  }
46762
47632
  ],
46763
47633
  "$type": "shadow",
47634
+ "$description": "Legacy floating shadow for backward compatibility",
46764
47635
  "$extensions": {
46765
47636
  "org.primer.figma": {},
46766
47637
  "org.primer.overrides": {
@@ -46787,6 +47658,10 @@
46787
47658
  "isSource": true,
46788
47659
  "$type": "shadow"
46789
47660
  }
47661
+ },
47662
+ "org.primer.llm": {
47663
+ "usage": ["legacy-component", "backward-compatibility"],
47664
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46790
47665
  }
46791
47666
  },
46792
47667
  "key": "{shadow.floating.legacy}"
@@ -46795,7 +47670,8 @@
46795
47670
  "attributes": {},
46796
47671
  "path": ["shadow", "floating", "legacy"],
46797
47672
  "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
46798
- "type": "shadow"
47673
+ "type": "shadow",
47674
+ "description": "Legacy floating shadow for backward compatibility"
46799
47675
  },
46800
47676
  "shadow-floating-medium": {
46801
47677
  "key": "{shadow.floating.medium}",
@@ -46852,6 +47728,10 @@
46852
47728
  "isSource": true,
46853
47729
  "$type": "shadow"
46854
47730
  }
47731
+ },
47732
+ "org.primer.llm": {
47733
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47734
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46855
47735
  }
46856
47736
  },
46857
47737
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46900,6 +47780,7 @@
46900
47780
  }
46901
47781
  ],
46902
47782
  "$type": "shadow",
47783
+ "$description": "Medium floating shadow for popovers and action menus",
46903
47784
  "$extensions": {
46904
47785
  "org.primer.figma": {
46905
47786
  "collection": "mode",
@@ -46953,6 +47834,10 @@
46953
47834
  "isSource": true,
46954
47835
  "$type": "shadow"
46955
47836
  }
47837
+ },
47838
+ "org.primer.llm": {
47839
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47840
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46956
47841
  }
46957
47842
  },
46958
47843
  "key": "{shadow.floating.medium}"
@@ -46961,7 +47846,8 @@
46961
47846
  "attributes": {},
46962
47847
  "path": ["shadow", "floating", "medium"],
46963
47848
  "value": "0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
46964
- "type": "shadow"
47849
+ "type": "shadow",
47850
+ "description": "Medium floating shadow for popovers and action menus"
46965
47851
  },
46966
47852
  "shadow-floating-small": {
46967
47853
  "key": "{shadow.floating.small}",
@@ -47002,6 +47888,10 @@
47002
47888
  "isSource": true,
47003
47889
  "$type": "shadow"
47004
47890
  }
47891
+ },
47892
+ "org.primer.llm": {
47893
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47894
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47005
47895
  }
47006
47896
  },
47007
47897
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47034,6 +47924,7 @@
47034
47924
  }
47035
47925
  ],
47036
47926
  "$type": "shadow",
47927
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47037
47928
  "$extensions": {
47038
47929
  "org.primer.figma": {
47039
47930
  "collection": "mode",
@@ -47071,6 +47962,10 @@
47071
47962
  "isSource": true,
47072
47963
  "$type": "shadow"
47073
47964
  }
47965
+ },
47966
+ "org.primer.llm": {
47967
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47968
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47074
47969
  }
47075
47970
  },
47076
47971
  "key": "{shadow.floating.small}"
@@ -47079,7 +47974,8 @@
47079
47974
  "attributes": {},
47080
47975
  "path": ["shadow", "floating", "small"],
47081
47976
  "value": "0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47082
- "type": "shadow"
47977
+ "type": "shadow",
47978
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47083
47979
  },
47084
47980
  "shadow-floating-xlarge": {
47085
47981
  "key": "{shadow.floating.xlarge}",
@@ -47112,6 +48008,10 @@
47112
48008
  "isSource": true,
47113
48009
  "$type": "shadow"
47114
48010
  }
48011
+ },
48012
+ "org.primer.llm": {
48013
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48014
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47115
48015
  }
47116
48016
  },
47117
48017
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47136,6 +48036,7 @@
47136
48036
  }
47137
48037
  ],
47138
48038
  "$type": "shadow",
48039
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47139
48040
  "$extensions": {
47140
48041
  "org.primer.figma": {
47141
48042
  "collection": "mode",
@@ -47165,6 +48066,10 @@
47165
48066
  "isSource": true,
47166
48067
  "$type": "shadow"
47167
48068
  }
48069
+ },
48070
+ "org.primer.llm": {
48071
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48072
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47168
48073
  }
47169
48074
  },
47170
48075
  "key": "{shadow.floating.xlarge}"
@@ -47173,7 +48078,8 @@
47173
48078
  "attributes": {},
47174
48079
  "path": ["shadow", "floating", "xlarge"],
47175
48080
  "value": "0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409",
47176
- "type": "shadow"
48081
+ "type": "shadow",
48082
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47177
48083
  },
47178
48084
  "shadow-inset": {
47179
48085
  "key": "{shadow.inset}",
@@ -47197,6 +48103,10 @@
47197
48103
  "isSource": true,
47198
48104
  "$type": "shadow"
47199
48105
  }
48106
+ },
48107
+ "org.primer.llm": {
48108
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48109
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47200
48110
  }
47201
48111
  },
47202
48112
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47212,6 +48122,7 @@
47212
48122
  "inset": true
47213
48123
  },
47214
48124
  "$type": "shadow",
48125
+ "$description": "Inset shadow for recessed elements",
47215
48126
  "$extensions": {
47216
48127
  "org.primer.figma": {
47217
48128
  "collection": "mode",
@@ -47232,6 +48143,10 @@
47232
48143
  "isSource": true,
47233
48144
  "$type": "shadow"
47234
48145
  }
48146
+ },
48147
+ "org.primer.llm": {
48148
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48149
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47235
48150
  }
47236
48151
  },
47237
48152
  "key": "{shadow.inset}"
@@ -47240,7 +48155,8 @@
47240
48155
  "attributes": {},
47241
48156
  "path": ["shadow", "inset"],
47242
48157
  "value": "inset 0px 1px 0px 0px #0104093d",
47243
- "type": "shadow"
48158
+ "type": "shadow",
48159
+ "description": "Inset shadow for recessed elements"
47244
48160
  },
47245
48161
  "shadow-resting-medium": {
47246
48162
  "key": "{shadow.resting.medium}",
@@ -47273,6 +48189,10 @@
47273
48189
  "isSource": true,
47274
48190
  "$type": "shadow"
47275
48191
  }
48192
+ },
48193
+ "org.primer.llm": {
48194
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48195
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47276
48196
  }
47277
48197
  },
47278
48198
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47297,6 +48217,7 @@
47297
48217
  }
47298
48218
  ],
47299
48219
  "$type": "shadow",
48220
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47300
48221
  "$extensions": {
47301
48222
  "org.primer.figma": {
47302
48223
  "collection": "mode",
@@ -47326,6 +48247,10 @@
47326
48247
  "isSource": true,
47327
48248
  "$type": "shadow"
47328
48249
  }
48250
+ },
48251
+ "org.primer.llm": {
48252
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48253
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47329
48254
  }
47330
48255
  },
47331
48256
  "key": "{shadow.resting.medium}"
@@ -47334,7 +48259,8 @@
47334
48259
  "attributes": {},
47335
48260
  "path": ["shadow", "resting", "medium"],
47336
48261
  "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
47337
- "type": "shadow"
48262
+ "type": "shadow",
48263
+ "description": "Medium resting shadow for cards and elevated surfaces"
47338
48264
  },
47339
48265
  "shadow-resting-small": {
47340
48266
  "key": "{shadow.resting.small}",
@@ -47369,6 +48295,10 @@
47369
48295
  "isSource": true,
47370
48296
  "$type": "shadow"
47371
48297
  }
48298
+ },
48299
+ "org.primer.llm": {
48300
+ "usage": ["button", "interactive-card", "clickable-element"],
48301
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47372
48302
  }
47373
48303
  },
47374
48304
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47395,6 +48325,7 @@
47395
48325
  }
47396
48326
  ],
47397
48327
  "$type": "shadow",
48328
+ "$description": "Small resting shadow for buttons and interactive elements",
47398
48329
  "$extensions": {
47399
48330
  "org.primer.figma": {
47400
48331
  "collection": "mode",
@@ -47426,6 +48357,10 @@
47426
48357
  "isSource": true,
47427
48358
  "$type": "shadow"
47428
48359
  }
48360
+ },
48361
+ "org.primer.llm": {
48362
+ "usage": ["button", "interactive-card", "clickable-element"],
48363
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47429
48364
  }
47430
48365
  },
47431
48366
  "key": "{shadow.resting.small}"
@@ -47434,7 +48369,8 @@
47434
48369
  "attributes": {},
47435
48370
  "path": ["shadow", "resting", "small"],
47436
48371
  "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
47437
- "type": "shadow"
48372
+ "type": "shadow",
48373
+ "description": "Small resting shadow for buttons and interactive elements"
47438
48374
  },
47439
48375
  "shadow-resting-xsmall": {
47440
48376
  "key": "{shadow.resting.xsmall}",
@@ -47458,6 +48394,10 @@
47458
48394
  "isSource": true,
47459
48395
  "$type": "shadow"
47460
48396
  }
48397
+ },
48398
+ "org.primer.llm": {
48399
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48400
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47461
48401
  }
47462
48402
  },
47463
48403
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47473,6 +48413,7 @@
47473
48413
  "inset": false
47474
48414
  },
47475
48415
  "$type": "shadow",
48416
+ "$description": "Extra small resting shadow for minimal elevation",
47476
48417
  "$extensions": {
47477
48418
  "org.primer.figma": {
47478
48419
  "collection": "mode",
@@ -47493,6 +48434,10 @@
47493
48434
  "isSource": true,
47494
48435
  "$type": "shadow"
47495
48436
  }
48437
+ },
48438
+ "org.primer.llm": {
48439
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48440
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47496
48441
  }
47497
48442
  },
47498
48443
  "key": "{shadow.resting.xsmall}"
@@ -47501,7 +48446,8 @@
47501
48446
  "attributes": {},
47502
48447
  "path": ["shadow", "resting", "xsmall"],
47503
48448
  "value": "0px 1px 1px 0px #010409cc",
47504
- "type": "shadow"
48449
+ "type": "shadow",
48450
+ "description": "Extra small resting shadow for minimal elevation"
47505
48451
  },
47506
48452
  "sideNav-bgColor-selected": {
47507
48453
  "key": "{sideNav.bgColor.selected}",