@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": "#0d419d",
311
311
  "dark-tritanopia-high-contrast": "#051d4d",
312
312
  "dark-protanopia-deuteranopia-high-contrast": "#051d4d"
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.5}",
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": "#1f6feb",
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": "#388bfd1a",
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": "#693e00",
414
434
  "dark-protanopia-deuteranopia-high-contrast": "#341a00",
415
435
  "dark-tritanopia-high-contrast": "#341a00"
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.5}",
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": "#9e6a03",
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": "#bb800926",
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": "#656c76",
555
605
  "dark-protanopia-deuteranopia": "#656c76",
556
606
  "dark-protanopia-deuteranopia-high-contrast": "#656c76"
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": "#656c76",
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",
@@ -634,6 +698,7 @@
634
698
  "original": {
635
699
  "$value": "{bgColor.neutral.muted}",
636
700
  "$type": "color",
701
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
637
702
  "$extensions": {
638
703
  "org.primer.figma": {
639
704
  "collection": "mode",
@@ -669,6 +734,10 @@
669
734
  "isSource": true,
670
735
  "$type": "color"
671
736
  }
737
+ },
738
+ "org.primer.llm": {
739
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
740
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
672
741
  }
673
742
  },
674
743
  "alpha": 0.1,
@@ -678,7 +747,8 @@
678
747
  "attributes": {},
679
748
  "path": ["bgColor", "closed", "muted"],
680
749
  "value": "#656c761a",
681
- "type": "color"
750
+ "type": "color",
751
+ "description": "Subtle background for closed state indicators (issues, PRs)"
682
752
  },
683
753
  "bgColor-danger-emphasis": {
684
754
  "key": "{bgColor.danger.emphasis}",
@@ -699,6 +769,10 @@
699
769
  "dark-high-contrast": "#490202",
700
770
  "dark-dimmed-high-contrast": "#8e1519",
701
771
  "dark-tritanopia-high-contrast": "#490202"
772
+ },
773
+ "org.primer.llm": {
774
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
775
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
702
776
  }
703
777
  },
704
778
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -706,6 +780,7 @@
706
780
  "original": {
707
781
  "$value": "{base.color.orange.5}",
708
782
  "$type": "color",
783
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
709
784
  "$extensions": {
710
785
  "org.primer.figma": {
711
786
  "collection": "mode",
@@ -723,6 +798,10 @@
723
798
  "dark-high-contrast": "{base.color.red.9}",
724
799
  "dark-dimmed-high-contrast": "{base.color.red.7}",
725
800
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
801
+ },
802
+ "org.primer.llm": {
803
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
804
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
726
805
  }
727
806
  },
728
807
  "key": "{bgColor.danger.emphasis}"
@@ -731,7 +810,8 @@
731
810
  "attributes": {},
732
811
  "path": ["bgColor", "danger", "emphasis"],
733
812
  "value": "#bd561d",
734
- "type": "color"
813
+ "type": "color",
814
+ "description": "Emphasized danger background for critical errors and delete confirmations"
735
815
  },
736
816
  "bgColor-danger-muted": {
737
817
  "key": "{bgColor.danger.muted}",
@@ -761,6 +841,10 @@
761
841
  "isSource": true,
762
842
  "$type": "color"
763
843
  }
844
+ },
845
+ "org.primer.llm": {
846
+ "usage": ["error-message", "destructive-action", "validation-error"],
847
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
764
848
  }
765
849
  },
766
850
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -769,6 +853,7 @@
769
853
  "original": {
770
854
  "$value": "{base.color.orange.4}",
771
855
  "$type": "color",
856
+ "$description": "Muted danger background for error states and destructive action contexts",
772
857
  "$extensions": {
773
858
  "org.primer.figma": {
774
859
  "collection": "mode",
@@ -795,6 +880,10 @@
795
880
  "isSource": true,
796
881
  "$type": "color"
797
882
  }
883
+ },
884
+ "org.primer.llm": {
885
+ "usage": ["error-message", "destructive-action", "validation-error"],
886
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
798
887
  }
799
888
  },
800
889
  "alpha": 0.1,
@@ -804,7 +893,8 @@
804
893
  "attributes": {},
805
894
  "path": ["bgColor", "danger", "muted"],
806
895
  "value": "#db6d281a",
807
- "type": "color"
896
+ "type": "color",
897
+ "description": "Muted danger background for error states and destructive action contexts"
808
898
  },
809
899
  "bgColor-default": {
810
900
  "key": "{bgColor.default}",
@@ -824,6 +914,10 @@
824
914
  "dark-high-contrast": "#010409",
825
915
  "dark-tritanopia-high-contrast": "#010409",
826
916
  "dark-protanopia-deuteranopia-high-contrast": "#010409"
917
+ },
918
+ "org.primer.llm": {
919
+ "usage": ["page-background", "main-content", "card-background"],
920
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
827
921
  }
828
922
  },
829
923
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -831,6 +925,7 @@
831
925
  "original": {
832
926
  "$value": "{base.color.neutral.1}",
833
927
  "$type": "color",
928
+ "$description": "Default background color for pages and main content areas",
834
929
  "$extensions": {
835
930
  "org.primer.figma": {
836
931
  "collection": "mode",
@@ -847,6 +942,10 @@
847
942
  "dark-high-contrast": "{base.color.neutral.0}",
848
943
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
849
944
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
945
+ },
946
+ "org.primer.llm": {
947
+ "usage": ["page-background", "main-content", "card-background"],
948
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
850
949
  }
851
950
  },
852
951
  "key": "{bgColor.default}"
@@ -855,7 +954,8 @@
855
954
  "attributes": {},
856
955
  "path": ["bgColor", "default"],
857
956
  "value": "#0d1117",
858
- "type": "color"
957
+ "type": "color",
958
+ "description": "Default background color for pages and main content areas"
859
959
  },
860
960
  "bgColor-disabled": {
861
961
  "key": "{bgColor.disabled}",
@@ -875,6 +975,10 @@
875
975
  "dark-high-contrast": "#262c36",
876
976
  "dark-tritanopia-high-contrast": "#262c36",
877
977
  "dark-protanopia-deuteranopia-high-contrast": "#262c36"
978
+ },
979
+ "org.primer.llm": {
980
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
981
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
878
982
  }
879
983
  },
880
984
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -882,6 +986,7 @@
882
986
  "original": {
883
987
  "$value": "{base.color.neutral.3}",
884
988
  "$type": "color",
989
+ "$description": "Background for disabled interactive elements",
885
990
  "$extensions": {
886
991
  "org.primer.figma": {
887
992
  "collection": "mode",
@@ -898,6 +1003,10 @@
898
1003
  "dark-high-contrast": "{base.color.neutral.4}",
899
1004
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
900
1005
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
1006
+ },
1007
+ "org.primer.llm": {
1008
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
1009
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
901
1010
  }
902
1011
  },
903
1012
  "key": "{bgColor.disabled}"
@@ -906,7 +1015,8 @@
906
1015
  "attributes": {},
907
1016
  "path": ["bgColor", "disabled"],
908
1017
  "value": "#212830",
909
- "type": "color"
1018
+ "type": "color",
1019
+ "description": "Background for disabled interactive elements"
910
1020
  },
911
1021
  "bgColor-done-emphasis": {
912
1022
  "key": "{bgColor.done.emphasis}",
@@ -924,6 +1034,10 @@
924
1034
  "dark-dimmed-high-contrast": "#553098",
925
1035
  "dark-tritanopia-high-contrast": "#271052",
926
1036
  "dark-protanopia-deuteranopia-high-contrast": "#271052"
1037
+ },
1038
+ "org.primer.llm": {
1039
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1040
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
927
1041
  }
928
1042
  },
929
1043
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -931,6 +1045,7 @@
931
1045
  "original": {
932
1046
  "$value": "{base.color.purple.5}",
933
1047
  "$type": "color",
1048
+ "$description": "Strong background for completed/done state badges and labels",
934
1049
  "$extensions": {
935
1050
  "org.primer.figma": {
936
1051
  "collection": "mode",
@@ -945,6 +1060,10 @@
945
1060
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
946
1061
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
947
1062
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1063
+ },
1064
+ "org.primer.llm": {
1065
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1066
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
948
1067
  }
949
1068
  },
950
1069
  "key": "{bgColor.done.emphasis}"
@@ -953,7 +1072,8 @@
953
1072
  "attributes": {},
954
1073
  "path": ["bgColor", "done", "emphasis"],
955
1074
  "value": "#8957e5",
956
- "type": "color"
1075
+ "type": "color",
1076
+ "description": "Strong background for completed/done state badges and labels"
957
1077
  },
958
1078
  "bgColor-done-muted": {
959
1079
  "key": "{bgColor.done.muted}",
@@ -974,6 +1094,10 @@
974
1094
  "isSource": true,
975
1095
  "$type": "color"
976
1096
  }
1097
+ },
1098
+ "org.primer.llm": {
1099
+ "usage": ["completed-task", "merged-pr", "done-state"],
1100
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
977
1101
  }
978
1102
  },
979
1103
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -982,6 +1106,7 @@
982
1106
  "original": {
983
1107
  "$value": "{base.color.purple.4}",
984
1108
  "$type": "color",
1109
+ "$description": "Subtle background for completed/done state indicators",
985
1110
  "$extensions": {
986
1111
  "org.primer.figma": {
987
1112
  "collection": "mode",
@@ -999,6 +1124,10 @@
999
1124
  "isSource": true,
1000
1125
  "$type": "color"
1001
1126
  }
1127
+ },
1128
+ "org.primer.llm": {
1129
+ "usage": ["completed-task", "merged-pr", "done-state"],
1130
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
1002
1131
  }
1003
1132
  },
1004
1133
  "alpha": 0.15,
@@ -1008,7 +1137,8 @@
1008
1137
  "attributes": {},
1009
1138
  "path": ["bgColor", "done", "muted"],
1010
1139
  "value": "#ab7df826",
1011
- "type": "color"
1140
+ "type": "color",
1141
+ "description": "Subtle background for completed/done state indicators"
1012
1142
  },
1013
1143
  "bgColor-draft-emphasis": {
1014
1144
  "key": "{bgColor.draft.emphasis}",
@@ -1020,6 +1150,10 @@
1020
1150
  "codeSyntax": {
1021
1151
  "web": "var(--bgColor-draft-emphasis)"
1022
1152
  }
1153
+ },
1154
+ "org.primer.llm": {
1155
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1156
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1023
1157
  }
1024
1158
  },
1025
1159
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1027,6 +1161,7 @@
1027
1161
  "original": {
1028
1162
  "$value": "{bgColor.neutral.emphasis}",
1029
1163
  "$type": "color",
1164
+ "$description": "Strong background for draft state badges and labels",
1030
1165
  "$extensions": {
1031
1166
  "org.primer.figma": {
1032
1167
  "collection": "mode",
@@ -1035,6 +1170,10 @@
1035
1170
  "codeSyntax": {
1036
1171
  "web": "var(--bgColor-draft-emphasis)"
1037
1172
  }
1173
+ },
1174
+ "org.primer.llm": {
1175
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1176
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1038
1177
  }
1039
1178
  },
1040
1179
  "key": "{bgColor.draft.emphasis}"
@@ -1043,7 +1182,8 @@
1043
1182
  "attributes": {},
1044
1183
  "path": ["bgColor", "draft", "emphasis"],
1045
1184
  "value": "#656c76",
1046
- "type": "color"
1185
+ "type": "color",
1186
+ "description": "Strong background for draft state badges and labels"
1047
1187
  },
1048
1188
  "bgColor-draft-muted": {
1049
1189
  "key": "{bgColor.draft.muted}",
@@ -1082,6 +1222,10 @@
1082
1222
  "isSource": true,
1083
1223
  "$type": "color"
1084
1224
  }
1225
+ },
1226
+ "org.primer.llm": {
1227
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1228
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1085
1229
  }
1086
1230
  },
1087
1231
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1090,6 +1234,7 @@
1090
1234
  "original": {
1091
1235
  "$value": "{bgColor.neutral.muted}",
1092
1236
  "$type": "color",
1237
+ "$description": "Subtle background for draft state indicators",
1093
1238
  "$extensions": {
1094
1239
  "org.primer.figma": {
1095
1240
  "collection": "mode",
@@ -1125,6 +1270,10 @@
1125
1270
  "isSource": true,
1126
1271
  "$type": "color"
1127
1272
  }
1273
+ },
1274
+ "org.primer.llm": {
1275
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1276
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1128
1277
  }
1129
1278
  },
1130
1279
  "alpha": 0.1,
@@ -1134,7 +1283,8 @@
1134
1283
  "attributes": {},
1135
1284
  "path": ["bgColor", "draft", "muted"],
1136
1285
  "value": "#656c761a",
1137
- "type": "color"
1286
+ "type": "color",
1287
+ "description": "Subtle background for draft state indicators"
1138
1288
  },
1139
1289
  "bgColor-emphasis": {
1140
1290
  "key": "{bgColor.emphasis}",
@@ -1149,6 +1299,10 @@
1149
1299
  },
1150
1300
  "org.primer.overrides": {
1151
1301
  "dark": "#3d444d"
1302
+ },
1303
+ "org.primer.llm": {
1304
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1305
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1152
1306
  }
1153
1307
  },
1154
1308
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1156,6 +1310,7 @@
1156
1310
  "original": {
1157
1311
  "$value": "{base.color.neutral.7}",
1158
1312
  "$type": "color",
1313
+ "$description": "High-emphasis dark background for strong visual contrast",
1159
1314
  "$extensions": {
1160
1315
  "org.primer.figma": {
1161
1316
  "collection": "mode",
@@ -1167,6 +1322,10 @@
1167
1322
  },
1168
1323
  "org.primer.overrides": {
1169
1324
  "dark": "{base.color.neutral.7}"
1325
+ },
1326
+ "org.primer.llm": {
1327
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1328
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1170
1329
  }
1171
1330
  },
1172
1331
  "key": "{bgColor.emphasis}"
@@ -1175,7 +1334,8 @@
1175
1334
  "attributes": {},
1176
1335
  "path": ["bgColor", "emphasis"],
1177
1336
  "value": "#3d444d",
1178
- "type": "color"
1337
+ "type": "color",
1338
+ "description": "High-emphasis dark background for strong visual contrast"
1179
1339
  },
1180
1340
  "bgColor-inset": {
1181
1341
  "key": "{bgColor.inset}",
@@ -1195,6 +1355,10 @@
1195
1355
  "light-high-contrast": "#151b23",
1196
1356
  "light-tritanopia-high-contrast": "#151b23",
1197
1357
  "light-protanopia-deuteranopia-high-contrast": "#151b23"
1358
+ },
1359
+ "org.primer.llm": {
1360
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1361
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1198
1362
  }
1199
1363
  },
1200
1364
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1202,6 +1366,7 @@
1202
1366
  "original": {
1203
1367
  "$value": "{base.color.neutral.0}",
1204
1368
  "$type": "color",
1369
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1205
1370
  "$extensions": {
1206
1371
  "org.primer.figma": {
1207
1372
  "collection": "mode",
@@ -1218,6 +1383,10 @@
1218
1383
  "light-high-contrast": "{base.color.neutral.2}",
1219
1384
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1220
1385
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1386
+ },
1387
+ "org.primer.llm": {
1388
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1389
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1221
1390
  }
1222
1391
  },
1223
1392
  "key": "{bgColor.inset}"
@@ -1226,7 +1395,8 @@
1226
1395
  "attributes": {},
1227
1396
  "path": ["bgColor", "inset"],
1228
1397
  "value": "#010409",
1229
- "type": "color"
1398
+ "type": "color",
1399
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1230
1400
  },
1231
1401
  "bgColor-inverse": {
1232
1402
  "key": "{bgColor.inverse}",
@@ -1238,6 +1408,10 @@
1238
1408
  },
1239
1409
  "org.primer.overrides": {
1240
1410
  "dark": "#ffffff"
1411
+ },
1412
+ "org.primer.llm": {
1413
+ "usage": ["overlay-content", "inverse-theme-element"],
1414
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1241
1415
  }
1242
1416
  },
1243
1417
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1245,6 +1419,7 @@
1245
1419
  "original": {
1246
1420
  "$value": "{base.color.neutral.13}",
1247
1421
  "$type": "color",
1422
+ "$description": "Inverse background that flips between light and dark modes",
1248
1423
  "$extensions": {
1249
1424
  "org.primer.figma": {
1250
1425
  "collection": "mode",
@@ -1253,6 +1428,10 @@
1253
1428
  },
1254
1429
  "org.primer.overrides": {
1255
1430
  "dark": "{base.color.neutral.13}"
1431
+ },
1432
+ "org.primer.llm": {
1433
+ "usage": ["overlay-content", "inverse-theme-element"],
1434
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1256
1435
  }
1257
1436
  },
1258
1437
  "key": "{bgColor.inverse}"
@@ -1261,7 +1440,8 @@
1261
1440
  "attributes": {},
1262
1441
  "path": ["bgColor", "inverse"],
1263
1442
  "value": "#ffffff",
1264
- "type": "color"
1443
+ "type": "color",
1444
+ "description": "Inverse background that flips between light and dark modes"
1265
1445
  },
1266
1446
  "bgColor-muted": {
1267
1447
  "key": "{bgColor.muted}",
@@ -1284,6 +1464,10 @@
1284
1464
  "dark-high-contrast": "#151b23",
1285
1465
  "dark-tritanopia-high-contrast": "#151b23",
1286
1466
  "dark-protanopia-deuteranopia-high-contrast": "#151b23"
1467
+ },
1468
+ "org.primer.llm": {
1469
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1470
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1287
1471
  }
1288
1472
  },
1289
1473
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1291,6 +1475,7 @@
1291
1475
  "original": {
1292
1476
  "$value": "{base.color.neutral.2}",
1293
1477
  "$type": "color",
1478
+ "$description": "Muted background for secondary content areas and subtle grouping",
1294
1479
  "$extensions": {
1295
1480
  "org.primer.figma": {
1296
1481
  "collection": "mode",
@@ -1310,6 +1495,10 @@
1310
1495
  "dark-high-contrast": "{base.color.neutral.2}",
1311
1496
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1312
1497
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1498
+ },
1499
+ "org.primer.llm": {
1500
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1501
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1313
1502
  }
1314
1503
  },
1315
1504
  "key": "{bgColor.muted}"
@@ -1318,7 +1507,8 @@
1318
1507
  "attributes": {},
1319
1508
  "path": ["bgColor", "muted"],
1320
1509
  "value": "#151b23",
1321
- "type": "color"
1510
+ "type": "color",
1511
+ "description": "Muted background for secondary content areas and subtle grouping"
1322
1512
  },
1323
1513
  "bgColor-neutral-emphasis": {
1324
1514
  "key": "{bgColor.neutral.emphasis}",
@@ -1338,6 +1528,10 @@
1338
1528
  "dark-high-contrast": "#3d444d",
1339
1529
  "dark-tritanopia-high-contrast": "#3d444d",
1340
1530
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
1531
+ },
1532
+ "org.primer.llm": {
1533
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1534
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1341
1535
  }
1342
1536
  },
1343
1537
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1345,6 +1539,7 @@
1345
1539
  "original": {
1346
1540
  "$value": "{base.color.neutral.8}",
1347
1541
  "$type": "color",
1542
+ "$description": "Strong neutral background for prominent neutral elements",
1348
1543
  "$extensions": {
1349
1544
  "org.primer.figma": {
1350
1545
  "collection": "mode",
@@ -1361,6 +1556,10 @@
1361
1556
  "dark-high-contrast": "{base.color.neutral.7}",
1362
1557
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1363
1558
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1559
+ },
1560
+ "org.primer.llm": {
1561
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1562
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1364
1563
  }
1365
1564
  },
1366
1565
  "key": "{bgColor.neutral.emphasis}"
@@ -1369,7 +1568,8 @@
1369
1568
  "attributes": {},
1370
1569
  "path": ["bgColor", "neutral", "emphasis"],
1371
1570
  "value": "#656c76",
1372
- "type": "color"
1571
+ "type": "color",
1572
+ "description": "Strong neutral background for prominent neutral elements"
1373
1573
  },
1374
1574
  "bgColor-neutral-muted": {
1375
1575
  "key": "{bgColor.neutral.muted}",
@@ -1400,6 +1600,10 @@
1400
1600
  "dark-high-contrast": "#212830",
1401
1601
  "dark-tritanopia-high-contrast": "#212830",
1402
1602
  "dark-protanopia-deuteranopia-high-contrast": "#212830"
1603
+ },
1604
+ "org.primer.llm": {
1605
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1606
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1403
1607
  }
1404
1608
  },
1405
1609
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1408,6 +1612,7 @@
1408
1612
  "original": {
1409
1613
  "$value": "{base.color.neutral.8}",
1410
1614
  "$type": "color",
1615
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1411
1616
  "$extensions": {
1412
1617
  "org.primer.figma": {
1413
1618
  "collection": "mode",
@@ -1435,6 +1640,10 @@
1435
1640
  "dark-high-contrast": "{base.color.neutral.3}",
1436
1641
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1437
1642
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1643
+ },
1644
+ "org.primer.llm": {
1645
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1646
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1438
1647
  }
1439
1648
  },
1440
1649
  "alpha": 0.2,
@@ -1444,7 +1653,8 @@
1444
1653
  "attributes": {},
1445
1654
  "path": ["bgColor", "neutral", "muted"],
1446
1655
  "value": "#656c7633",
1447
- "type": "color"
1656
+ "type": "color",
1657
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1448
1658
  },
1449
1659
  "bgColor-open-emphasis": {
1450
1660
  "key": "{bgColor.open.emphasis}",
@@ -1466,6 +1676,10 @@
1466
1676
  "light-protanopia-deuteranopia-high-contrast": "#bd561d",
1467
1677
  "dark-protanopia-deuteranopia": "#bd561d",
1468
1678
  "dark-protanopia-deuteranopia-high-contrast": "#3d1300"
1679
+ },
1680
+ "org.primer.llm": {
1681
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1682
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1469
1683
  }
1470
1684
  },
1471
1685
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1473,6 +1687,7 @@
1473
1687
  "original": {
1474
1688
  "$value": "{base.color.orange.5}",
1475
1689
  "$type": "color",
1690
+ "$description": "Strong background for open state badges and labels",
1476
1691
  "$extensions": {
1477
1692
  "org.primer.figma": {
1478
1693
  "collection": "mode",
@@ -1491,6 +1706,10 @@
1491
1706
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1492
1707
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1493
1708
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1709
+ },
1710
+ "org.primer.llm": {
1711
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1712
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1494
1713
  }
1495
1714
  },
1496
1715
  "key": "{bgColor.open.emphasis}"
@@ -1499,7 +1718,8 @@
1499
1718
  "attributes": {},
1500
1719
  "path": ["bgColor", "open", "emphasis"],
1501
1720
  "value": "#bd561d",
1502
- "type": "color"
1721
+ "type": "color",
1722
+ "description": "Strong background for open state badges and labels"
1503
1723
  },
1504
1724
  "bgColor-open-muted": {
1505
1725
  "key": "{bgColor.open.muted}",
@@ -1545,6 +1765,10 @@
1545
1765
  "isSource": true,
1546
1766
  "$type": "color"
1547
1767
  }
1768
+ },
1769
+ "org.primer.llm": {
1770
+ "usage": ["open-issue", "open-pr", "active-status"],
1771
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1548
1772
  }
1549
1773
  },
1550
1774
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1553,6 +1777,7 @@
1553
1777
  "original": {
1554
1778
  "$value": "{base.color.orange.4}",
1555
1779
  "$type": "color",
1780
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1556
1781
  "$extensions": {
1557
1782
  "org.primer.figma": {
1558
1783
  "collection": "mode",
@@ -1595,6 +1820,10 @@
1595
1820
  "isSource": true,
1596
1821
  "$type": "color"
1597
1822
  }
1823
+ },
1824
+ "org.primer.llm": {
1825
+ "usage": ["open-issue", "open-pr", "active-status"],
1826
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1598
1827
  }
1599
1828
  },
1600
1829
  "alpha": 0.1,
@@ -1604,7 +1833,8 @@
1604
1833
  "attributes": {},
1605
1834
  "path": ["bgColor", "open", "muted"],
1606
1835
  "value": "#db6d281a",
1607
- "type": "color"
1836
+ "type": "color",
1837
+ "description": "Subtle background for open state indicators (issues, PRs)"
1608
1838
  },
1609
1839
  "bgColor-severe-emphasis": {
1610
1840
  "key": "{bgColor.severe.emphasis}",
@@ -1625,6 +1855,10 @@
1625
1855
  "dark-high-contrast": "#3d1300",
1626
1856
  "dark-dimmed-high-contrast": "#762d0a",
1627
1857
  "dark-protanopia-deuteranopia-high-contrast": "#3d1300"
1858
+ },
1859
+ "org.primer.llm": {
1860
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1861
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1628
1862
  }
1629
1863
  },
1630
1864
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1632,6 +1866,7 @@
1632
1866
  "original": {
1633
1867
  "$value": "{base.color.orange.5}",
1634
1868
  "$type": "color",
1869
+ "$description": "Strong severe background for prominent high-priority warnings",
1635
1870
  "$extensions": {
1636
1871
  "org.primer.figma": {
1637
1872
  "collection": "mode",
@@ -1649,6 +1884,10 @@
1649
1884
  "dark-high-contrast": "{base.color.orange.9}",
1650
1885
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1651
1886
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1887
+ },
1888
+ "org.primer.llm": {
1889
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1890
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1652
1891
  }
1653
1892
  },
1654
1893
  "key": "{bgColor.severe.emphasis}"
@@ -1657,7 +1896,8 @@
1657
1896
  "attributes": {},
1658
1897
  "path": ["bgColor", "severe", "emphasis"],
1659
1898
  "value": "#bd561d",
1660
- "type": "color"
1899
+ "type": "color",
1900
+ "description": "Strong severe background for prominent high-priority warnings"
1661
1901
  },
1662
1902
  "bgColor-severe-muted": {
1663
1903
  "key": "{bgColor.severe.muted}",
@@ -1687,6 +1927,10 @@
1687
1927
  "isSource": true,
1688
1928
  "$type": "color"
1689
1929
  }
1930
+ },
1931
+ "org.primer.llm": {
1932
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1933
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1690
1934
  }
1691
1935
  },
1692
1936
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1695,6 +1939,7 @@
1695
1939
  "original": {
1696
1940
  "$value": "{base.color.orange.4}",
1697
1941
  "$type": "color",
1942
+ "$description": "Subtle severe background for high-priority warnings",
1698
1943
  "$extensions": {
1699
1944
  "org.primer.figma": {
1700
1945
  "collection": "mode",
@@ -1721,6 +1966,10 @@
1721
1966
  "isSource": true,
1722
1967
  "$type": "color"
1723
1968
  }
1969
+ },
1970
+ "org.primer.llm": {
1971
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1972
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1724
1973
  }
1725
1974
  },
1726
1975
  "alpha": 0.1,
@@ -1730,7 +1979,8 @@
1730
1979
  "attributes": {},
1731
1980
  "path": ["bgColor", "severe", "muted"],
1732
1981
  "value": "#db6d281a",
1733
- "type": "color"
1982
+ "type": "color",
1983
+ "description": "Subtle severe background for high-priority warnings"
1734
1984
  },
1735
1985
  "bgColor-sponsors-emphasis": {
1736
1986
  "key": "{bgColor.sponsors.emphasis}",
@@ -1748,6 +1998,10 @@
1748
1998
  "dark-dimmed-high-contrast": "#7d2457",
1749
1999
  "dark-tritanopia-high-contrast": "#42062a",
1750
2000
  "dark-protanopia-deuteranopia-high-contrast": "#42062a"
2001
+ },
2002
+ "org.primer.llm": {
2003
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2004
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1751
2005
  }
1752
2006
  },
1753
2007
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1755,6 +2009,7 @@
1755
2009
  "original": {
1756
2010
  "$value": "{base.color.pink.5}",
1757
2011
  "$type": "color",
2012
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1758
2013
  "$extensions": {
1759
2014
  "org.primer.figma": {
1760
2015
  "collection": "mode",
@@ -1769,6 +2024,10 @@
1769
2024
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1770
2025
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1771
2026
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2027
+ },
2028
+ "org.primer.llm": {
2029
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2030
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1772
2031
  }
1773
2032
  },
1774
2033
  "key": "{bgColor.sponsors.emphasis}"
@@ -1777,7 +2036,8 @@
1777
2036
  "attributes": {},
1778
2037
  "path": ["bgColor", "sponsors", "emphasis"],
1779
2038
  "value": "#bf4b8a",
1780
- "type": "color"
2039
+ "type": "color",
2040
+ "description": "Strong background for prominent GitHub Sponsors elements"
1781
2041
  },
1782
2042
  "bgColor-sponsors-muted": {
1783
2043
  "key": "{bgColor.sponsors.muted}",
@@ -1805,6 +2065,10 @@
1805
2065
  "isSource": true,
1806
2066
  "$type": "color"
1807
2067
  }
2068
+ },
2069
+ "org.primer.llm": {
2070
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2071
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1808
2072
  }
1809
2073
  },
1810
2074
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1813,6 +2077,7 @@
1813
2077
  "original": {
1814
2078
  "$value": "{base.color.pink.4}",
1815
2079
  "$type": "color",
2080
+ "$description": "Subtle background for GitHub Sponsors content",
1816
2081
  "$extensions": {
1817
2082
  "org.primer.figma": {
1818
2083
  "collection": "mode",
@@ -1837,6 +2102,10 @@
1837
2102
  "isSource": true,
1838
2103
  "$type": "color"
1839
2104
  }
2105
+ },
2106
+ "org.primer.llm": {
2107
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2108
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1840
2109
  }
1841
2110
  },
1842
2111
  "alpha": 0.1,
@@ -1846,7 +2115,8 @@
1846
2115
  "attributes": {},
1847
2116
  "path": ["bgColor", "sponsors", "muted"],
1848
2117
  "value": "#db61a21a",
1849
- "type": "color"
2118
+ "type": "color",
2119
+ "description": "Subtle background for GitHub Sponsors content"
1850
2120
  },
1851
2121
  "bgColor-success-emphasis": {
1852
2122
  "key": "{bgColor.success.emphasis}",
@@ -1872,6 +2142,10 @@
1872
2142
  "light-high-contrast": "#238636",
1873
2143
  "dark-high-contrast": "#04260f",
1874
2144
  "dark-dimmed-high-contrast": "#0f5323"
2145
+ },
2146
+ "org.primer.llm": {
2147
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2148
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1875
2149
  }
1876
2150
  },
1877
2151
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1879,6 +2153,7 @@
1879
2153
  "original": {
1880
2154
  "$value": "{base.color.blue.5}",
1881
2155
  "$type": "color",
2156
+ "$description": "Strong success background for prominent positive actions",
1882
2157
  "$extensions": {
1883
2158
  "org.primer.figma": {
1884
2159
  "collection": "mode",
@@ -1901,6 +2176,10 @@
1901
2176
  "light-high-contrast": "{base.color.green.5}",
1902
2177
  "dark-high-contrast": "{base.color.green.9}",
1903
2178
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2179
+ },
2180
+ "org.primer.llm": {
2181
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2182
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1904
2183
  }
1905
2184
  },
1906
2185
  "key": "{bgColor.success.emphasis}"
@@ -1909,7 +2188,8 @@
1909
2188
  "attributes": {},
1910
2189
  "path": ["bgColor", "success", "emphasis"],
1911
2190
  "value": "#1f6feb",
1912
- "type": "color"
2191
+ "type": "color",
2192
+ "description": "Strong success background for prominent positive actions"
1913
2193
  },
1914
2194
  "bgColor-success-muted": {
1915
2195
  "key": "{bgColor.success.muted}",
@@ -1962,6 +2242,10 @@
1962
2242
  "isSource": true,
1963
2243
  "$type": "color"
1964
2244
  }
2245
+ },
2246
+ "org.primer.llm": {
2247
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2248
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1965
2249
  }
1966
2250
  },
1967
2251
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1970,6 +2254,7 @@
1970
2254
  "original": {
1971
2255
  "$value": "{base.color.blue.4}",
1972
2256
  "$type": "color",
2257
+ "$description": "Subtle success background for positive feedback and completed states",
1973
2258
  "$extensions": {
1974
2259
  "org.primer.figma": {
1975
2260
  "collection": "mode",
@@ -2019,6 +2304,10 @@
2019
2304
  "isSource": true,
2020
2305
  "$type": "color"
2021
2306
  }
2307
+ },
2308
+ "org.primer.llm": {
2309
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2310
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2022
2311
  }
2023
2312
  },
2024
2313
  "alpha": 0.2,
@@ -2028,7 +2317,8 @@
2028
2317
  "attributes": {},
2029
2318
  "path": ["bgColor", "success", "muted"],
2030
2319
  "value": "#388bfd33",
2031
- "type": "color"
2320
+ "type": "color",
2321
+ "description": "Subtle success background for positive feedback and completed states"
2032
2322
  },
2033
2323
  "bgColor-transparent": {
2034
2324
  "key": "{bgColor.transparent}",
@@ -2040,6 +2330,10 @@
2040
2330
  "codeSyntax": {
2041
2331
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2042
2332
  }
2333
+ },
2334
+ "org.primer.llm": {
2335
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2336
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2043
2337
  }
2044
2338
  },
2045
2339
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2047,6 +2341,7 @@
2047
2341
  "original": {
2048
2342
  "$value": "{base.color.transparent}",
2049
2343
  "$type": "color",
2344
+ "$description": "Fully transparent background",
2050
2345
  "$extensions": {
2051
2346
  "org.primer.figma": {
2052
2347
  "collection": "mode",
@@ -2055,6 +2350,10 @@
2055
2350
  "codeSyntax": {
2056
2351
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2057
2352
  }
2353
+ },
2354
+ "org.primer.llm": {
2355
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2356
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2058
2357
  }
2059
2358
  },
2060
2359
  "key": "{bgColor.transparent}"
@@ -2063,7 +2362,8 @@
2063
2362
  "attributes": {},
2064
2363
  "path": ["bgColor", "transparent"],
2065
2364
  "value": "#00000000",
2066
- "type": "color"
2365
+ "type": "color",
2366
+ "description": "Fully transparent background"
2067
2367
  },
2068
2368
  "bgColor-upsell-emphasis": {
2069
2369
  "key": "{bgColor.upsell.emphasis}",
@@ -2075,6 +2375,10 @@
2075
2375
  "codeSyntax": {
2076
2376
  "web": "var(--bgColor-upsell-emphasis)"
2077
2377
  }
2378
+ },
2379
+ "org.primer.llm": {
2380
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2381
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2078
2382
  }
2079
2383
  },
2080
2384
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2082,6 +2386,7 @@
2082
2386
  "original": {
2083
2387
  "$value": "{bgColor.done.emphasis}",
2084
2388
  "$type": "color",
2389
+ "$description": "Strong background for prominent upsell elements",
2085
2390
  "$extensions": {
2086
2391
  "org.primer.figma": {
2087
2392
  "collection": "mode",
@@ -2090,6 +2395,10 @@
2090
2395
  "codeSyntax": {
2091
2396
  "web": "var(--bgColor-upsell-emphasis)"
2092
2397
  }
2398
+ },
2399
+ "org.primer.llm": {
2400
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2401
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2093
2402
  }
2094
2403
  },
2095
2404
  "key": "{bgColor.upsell.emphasis}"
@@ -2098,7 +2407,8 @@
2098
2407
  "attributes": {},
2099
2408
  "path": ["bgColor", "upsell", "emphasis"],
2100
2409
  "value": "#8957e5",
2101
- "type": "color"
2410
+ "type": "color",
2411
+ "description": "Strong background for prominent upsell elements"
2102
2412
  },
2103
2413
  "bgColor-upsell-muted": {
2104
2414
  "key": "{bgColor.upsell.muted}",
@@ -2110,6 +2420,10 @@
2110
2420
  "codeSyntax": {
2111
2421
  "web": "var(--bgColor-upsell-muted)"
2112
2422
  }
2423
+ },
2424
+ "org.primer.llm": {
2425
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2426
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2113
2427
  }
2114
2428
  },
2115
2429
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2117,6 +2431,7 @@
2117
2431
  "original": {
2118
2432
  "$value": "{bgColor.done.muted}",
2119
2433
  "$type": "color",
2434
+ "$description": "Subtle background for upsell and promotional content",
2120
2435
  "$extensions": {
2121
2436
  "org.primer.figma": {
2122
2437
  "collection": "mode",
@@ -2125,6 +2440,10 @@
2125
2440
  "codeSyntax": {
2126
2441
  "web": "var(--bgColor-upsell-muted)"
2127
2442
  }
2443
+ },
2444
+ "org.primer.llm": {
2445
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2446
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2128
2447
  }
2129
2448
  },
2130
2449
  "key": "{bgColor.upsell.muted}"
@@ -2133,7 +2452,8 @@
2133
2452
  "attributes": {},
2134
2453
  "path": ["bgColor", "upsell", "muted"],
2135
2454
  "value": "#ab7df826",
2136
- "type": "color"
2455
+ "type": "color",
2456
+ "description": "Subtle background for upsell and promotional content"
2137
2457
  },
2138
2458
  "bgColor-white": {
2139
2459
  "key": "{bgColor.white}",
@@ -2145,6 +2465,10 @@
2145
2465
  },
2146
2466
  "org.primer.overrides": {
2147
2467
  "dark": "#ffffff"
2468
+ },
2469
+ "org.primer.llm": {
2470
+ "doNotUse": true,
2471
+ "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."
2148
2472
  }
2149
2473
  },
2150
2474
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2152,6 +2476,7 @@
2152
2476
  "original": {
2153
2477
  "$value": "{base.color.neutral.13}",
2154
2478
  "$type": "color",
2479
+ "$description": "Pure white background",
2155
2480
  "$extensions": {
2156
2481
  "org.primer.figma": {
2157
2482
  "collection": "mode",
@@ -2160,6 +2485,10 @@
2160
2485
  },
2161
2486
  "org.primer.overrides": {
2162
2487
  "dark": "{base.color.neutral.13}"
2488
+ },
2489
+ "org.primer.llm": {
2490
+ "doNotUse": true,
2491
+ "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."
2163
2492
  }
2164
2493
  },
2165
2494
  "key": "{bgColor.white}"
@@ -2168,7 +2497,8 @@
2168
2497
  "attributes": {},
2169
2498
  "path": ["bgColor", "white"],
2170
2499
  "value": "#ffffff",
2171
- "type": "color"
2500
+ "type": "color",
2501
+ "description": "Pure white background"
2172
2502
  },
2173
2503
  "border-accent-emphasis": {
2174
2504
  "key": "{border.accent.emphasis}",
@@ -2680,6 +3010,10 @@
2680
3010
  },
2681
3011
  "org.primer.overrides": {
2682
3012
  "dark-dimmed-high-contrast": "#79c0ff"
3013
+ },
3014
+ "org.primer.llm": {
3015
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3016
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2683
3017
  }
2684
3018
  },
2685
3019
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2687,6 +3021,7 @@
2687
3021
  "original": {
2688
3022
  "$value": "{base.color.blue.5}",
2689
3023
  "$type": "color",
3024
+ "$description": "Strong accent border for selected or focused elements",
2690
3025
  "$extensions": {
2691
3026
  "org.primer.figma": {
2692
3027
  "collection": "mode",
@@ -2698,6 +3033,10 @@
2698
3033
  },
2699
3034
  "org.primer.overrides": {
2700
3035
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3036
+ },
3037
+ "org.primer.llm": {
3038
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3039
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2701
3040
  }
2702
3041
  },
2703
3042
  "key": "{borderColor.accent.emphasis}"
@@ -2706,7 +3045,8 @@
2706
3045
  "attributes": {},
2707
3046
  "path": ["borderColor", "accent", "emphasis"],
2708
3047
  "value": "#1f6feb",
2709
- "type": "color"
3048
+ "type": "color",
3049
+ "description": "Strong accent border for selected or focused elements"
2710
3050
  },
2711
3051
  "borderColor-accent-muted": {
2712
3052
  "key": "{borderColor.accent.muted}",
@@ -2770,6 +3110,10 @@
2770
3110
  "isSource": true,
2771
3111
  "$type": "color"
2772
3112
  }
3113
+ },
3114
+ "org.primer.llm": {
3115
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3116
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2773
3117
  }
2774
3118
  },
2775
3119
  "alpha": 0.4,
@@ -2778,6 +3122,7 @@
2778
3122
  "original": {
2779
3123
  "$value": "{base.color.blue.4}",
2780
3124
  "$type": "color",
3125
+ "$description": "Subtle accent border for selected or focused elements",
2781
3126
  "$extensions": {
2782
3127
  "org.primer.figma": {
2783
3128
  "collection": "mode",
@@ -2838,6 +3183,10 @@
2838
3183
  "isSource": true,
2839
3184
  "$type": "color"
2840
3185
  }
3186
+ },
3187
+ "org.primer.llm": {
3188
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3189
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2841
3190
  }
2842
3191
  },
2843
3192
  "alpha": 0.4,
@@ -2847,7 +3196,8 @@
2847
3196
  "attributes": {},
2848
3197
  "path": ["borderColor", "accent", "muted"],
2849
3198
  "value": "#388bfd66",
2850
- "type": "color"
3199
+ "type": "color",
3200
+ "description": "Subtle accent border for selected or focused elements"
2851
3201
  },
2852
3202
  "borderColor-attention-emphasis": {
2853
3203
  "key": "{borderColor.attention.emphasis}",
@@ -2862,6 +3212,10 @@
2862
3212
  },
2863
3213
  "org.primer.overrides": {
2864
3214
  "dark-dimmed-high-contrast": "#e3b341"
3215
+ },
3216
+ "org.primer.llm": {
3217
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3218
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2865
3219
  }
2866
3220
  },
2867
3221
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2869,6 +3223,7 @@
2869
3223
  "original": {
2870
3224
  "$value": "{base.color.yellow.5}",
2871
3225
  "$type": "color",
3226
+ "$description": "Strong attention border for prominent warnings",
2872
3227
  "$extensions": {
2873
3228
  "org.primer.figma": {
2874
3229
  "collection": "mode",
@@ -2880,6 +3235,10 @@
2880
3235
  },
2881
3236
  "org.primer.overrides": {
2882
3237
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3238
+ },
3239
+ "org.primer.llm": {
3240
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3241
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2883
3242
  }
2884
3243
  },
2885
3244
  "key": "{borderColor.attention.emphasis}"
@@ -2888,7 +3247,8 @@
2888
3247
  "attributes": {},
2889
3248
  "path": ["borderColor", "attention", "emphasis"],
2890
3249
  "value": "#9e6a03",
2891
- "type": "color"
3250
+ "type": "color",
3251
+ "description": "Strong attention border for prominent warnings"
2892
3252
  },
2893
3253
  "borderColor-attention-muted": {
2894
3254
  "key": "{borderColor.attention.muted}",
@@ -2952,6 +3312,10 @@
2952
3312
  "isSource": true,
2953
3313
  "$type": "color"
2954
3314
  }
3315
+ },
3316
+ "org.primer.llm": {
3317
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3318
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2955
3319
  }
2956
3320
  },
2957
3321
  "alpha": 0.4,
@@ -2960,6 +3324,7 @@
2960
3324
  "original": {
2961
3325
  "$value": "{base.color.yellow.4}",
2962
3326
  "$type": "color",
3327
+ "$description": "Subtle attention border for warnings and caution states",
2963
3328
  "$extensions": {
2964
3329
  "org.primer.figma": {
2965
3330
  "collection": "mode",
@@ -3020,6 +3385,10 @@
3020
3385
  "isSource": true,
3021
3386
  "$type": "color"
3022
3387
  }
3388
+ },
3389
+ "org.primer.llm": {
3390
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3391
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3023
3392
  }
3024
3393
  },
3025
3394
  "alpha": 0.4,
@@ -3029,7 +3398,8 @@
3029
3398
  "attributes": {},
3030
3399
  "path": ["borderColor", "attention", "muted"],
3031
3400
  "value": "#bb800966",
3032
- "type": "color"
3401
+ "type": "color",
3402
+ "description": "Subtle attention border for warnings and caution states"
3033
3403
  },
3034
3404
  "borderColor-closed-emphasis": {
3035
3405
  "key": "{borderColor.closed.emphasis}",
@@ -3051,6 +3421,10 @@
3051
3421
  "dark-tritanopia-high-contrast": "#656c76",
3052
3422
  "light-tritanopia": "#656c76",
3053
3423
  "light-tritanopia-high-contrast": "#656c76"
3424
+ },
3425
+ "org.primer.llm": {
3426
+ "usage": ["closed-emphasis", "closed-status"],
3427
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3054
3428
  }
3055
3429
  },
3056
3430
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3058,6 +3432,7 @@
3058
3432
  "original": {
3059
3433
  "$value": "{borderColor.emphasis}",
3060
3434
  "$type": "color",
3435
+ "$description": "Strong border for closed state badges",
3061
3436
  "$extensions": {
3062
3437
  "org.primer.figma": {
3063
3438
  "collection": "mode",
@@ -3076,6 +3451,10 @@
3076
3451
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3077
3452
  "light-tritanopia": "{borderColor.emphasis}",
3078
3453
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3454
+ },
3455
+ "org.primer.llm": {
3456
+ "usage": ["closed-emphasis", "closed-status"],
3457
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3079
3458
  }
3080
3459
  },
3081
3460
  "key": "{borderColor.closed.emphasis}"
@@ -3084,7 +3463,8 @@
3084
3463
  "attributes": {},
3085
3464
  "path": ["borderColor", "closed", "emphasis"],
3086
3465
  "value": "#656c76",
3087
- "type": "color"
3466
+ "type": "color",
3467
+ "description": "Strong border for closed state badges"
3088
3468
  },
3089
3469
  "borderColor-closed-muted": {
3090
3470
  "key": "{borderColor.closed.muted}",
@@ -3154,6 +3534,10 @@
3154
3534
  "isSource": true,
3155
3535
  "$type": "color"
3156
3536
  }
3537
+ },
3538
+ "org.primer.llm": {
3539
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3540
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3157
3541
  }
3158
3542
  },
3159
3543
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3162,6 +3546,7 @@
3162
3546
  "original": {
3163
3547
  "$value": "{borderColor.default}",
3164
3548
  "$type": "color",
3549
+ "$description": "Subtle border for closed state indicators",
3165
3550
  "$extensions": {
3166
3551
  "org.primer.figma": {
3167
3552
  "collection": "mode",
@@ -3228,6 +3613,10 @@
3228
3613
  "isSource": true,
3229
3614
  "$type": "color"
3230
3615
  }
3616
+ },
3617
+ "org.primer.llm": {
3618
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3619
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3231
3620
  }
3232
3621
  },
3233
3622
  "alpha": 0.4,
@@ -3237,7 +3626,8 @@
3237
3626
  "attributes": {},
3238
3627
  "path": ["borderColor", "closed", "muted"],
3239
3628
  "value": "#3d444d66",
3240
- "type": "color"
3629
+ "type": "color",
3630
+ "description": "Subtle border for closed state indicators"
3241
3631
  },
3242
3632
  "borderColor-danger-emphasis": {
3243
3633
  "key": "{borderColor.danger.emphasis}",
@@ -3276,6 +3666,10 @@
3276
3666
  "$type": "color"
3277
3667
  },
3278
3668
  "dark-dimmed-high-contrast": "#ffa198"
3669
+ },
3670
+ "org.primer.llm": {
3671
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3672
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3279
3673
  }
3280
3674
  },
3281
3675
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3283,6 +3677,7 @@
3283
3677
  "original": {
3284
3678
  "$value": "{base.color.orange.5}",
3285
3679
  "$type": "color",
3680
+ "$description": "Strong danger border for destructive actions and errors",
3286
3681
  "$extensions": {
3287
3682
  "org.primer.figma": {
3288
3683
  "collection": "mode",
@@ -3318,6 +3713,10 @@
3318
3713
  "$type": "color"
3319
3714
  },
3320
3715
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3716
+ },
3717
+ "org.primer.llm": {
3718
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3719
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3321
3720
  }
3322
3721
  },
3323
3722
  "key": "{borderColor.danger.emphasis}"
@@ -3326,7 +3725,8 @@
3326
3725
  "attributes": {},
3327
3726
  "path": ["borderColor", "danger", "emphasis"],
3328
3727
  "value": "#bd561d",
3329
- "type": "color"
3728
+ "type": "color",
3729
+ "description": "Strong danger border for destructive actions and errors"
3330
3730
  },
3331
3731
  "borderColor-danger-muted": {
3332
3732
  "key": "{borderColor.danger.muted}",
@@ -3403,6 +3803,10 @@
3403
3803
  "isSource": true,
3404
3804
  "$type": "color"
3405
3805
  }
3806
+ },
3807
+ "org.primer.llm": {
3808
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3809
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3406
3810
  }
3407
3811
  },
3408
3812
  "alpha": 0.4,
@@ -3411,6 +3815,7 @@
3411
3815
  "original": {
3412
3816
  "$value": "{base.color.orange.4}",
3413
3817
  "$type": "color",
3818
+ "$description": "Subtle danger border for errors and destructive contexts",
3414
3819
  "$extensions": {
3415
3820
  "org.primer.figma": {
3416
3821
  "collection": "mode",
@@ -3484,6 +3889,10 @@
3484
3889
  "isSource": true,
3485
3890
  "$type": "color"
3486
3891
  }
3892
+ },
3893
+ "org.primer.llm": {
3894
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3895
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3487
3896
  }
3488
3897
  },
3489
3898
  "alpha": 0.4,
@@ -3493,7 +3902,8 @@
3493
3902
  "attributes": {},
3494
3903
  "path": ["borderColor", "danger", "muted"],
3495
3904
  "value": "#db6d2866",
3496
- "type": "color"
3905
+ "type": "color",
3906
+ "description": "Subtle danger border for errors and destructive contexts"
3497
3907
  },
3498
3908
  "borderColor-default": {
3499
3909
  "key": "{borderColor.default}",
@@ -3516,6 +3926,10 @@
3516
3926
  "codeSyntax": {
3517
3927
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3518
3928
  }
3929
+ },
3930
+ "org.primer.llm": {
3931
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3932
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3519
3933
  }
3520
3934
  },
3521
3935
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3523,6 +3937,7 @@
3523
3937
  "original": {
3524
3938
  "$value": "{base.color.neutral.7}",
3525
3939
  "$type": "color",
3940
+ "$description": "Default border color for most UI elements",
3526
3941
  "$extensions": {
3527
3942
  "org.primer.overrides": {
3528
3943
  "dark": "{base.color.neutral.7}",
@@ -3542,6 +3957,10 @@
3542
3957
  "codeSyntax": {
3543
3958
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3544
3959
  }
3960
+ },
3961
+ "org.primer.llm": {
3962
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3963
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3545
3964
  }
3546
3965
  },
3547
3966
  "key": "{borderColor.default}"
@@ -3550,7 +3969,8 @@
3550
3969
  "attributes": {},
3551
3970
  "path": ["borderColor", "default"],
3552
3971
  "value": "#3d444d",
3553
- "type": "color"
3972
+ "type": "color",
3973
+ "description": "Default border color for most UI elements"
3554
3974
  },
3555
3975
  "borderColor-disabled": {
3556
3976
  "key": "{borderColor.disabled}",
@@ -3596,6 +4016,10 @@
3596
4016
  "isSource": true,
3597
4017
  "$type": "color"
3598
4018
  }
4019
+ },
4020
+ "org.primer.llm": {
4021
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4022
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3599
4023
  }
3600
4024
  },
3601
4025
  "alpha": 0.1,
@@ -3604,6 +4028,7 @@
3604
4028
  "original": {
3605
4029
  "$value": "{base.color.neutral.8}",
3606
4030
  "$type": "color",
4031
+ "$description": "Border color for disabled interactive elements",
3607
4032
  "$extensions": {
3608
4033
  "org.primer.figma": {
3609
4034
  "collection": "mode",
@@ -3646,6 +4071,10 @@
3646
4071
  "isSource": true,
3647
4072
  "$type": "color"
3648
4073
  }
4074
+ },
4075
+ "org.primer.llm": {
4076
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4077
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3649
4078
  }
3650
4079
  },
3651
4080
  "alpha": 0.1,
@@ -3655,7 +4084,8 @@
3655
4084
  "attributes": {},
3656
4085
  "path": ["borderColor", "disabled"],
3657
4086
  "value": "#656c761a",
3658
- "type": "color"
4087
+ "type": "color",
4088
+ "description": "Border color for disabled interactive elements"
3659
4089
  },
3660
4090
  "borderColor-done-emphasis": {
3661
4091
  "key": "{borderColor.done.emphasis}",
@@ -3670,6 +4100,10 @@
3670
4100
  },
3671
4101
  "org.primer.overrides": {
3672
4102
  "dark-dimmed-high-contrast": "#d2a8ff"
4103
+ },
4104
+ "org.primer.llm": {
4105
+ "usage": ["done-emphasis", "merged-status"],
4106
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3673
4107
  }
3674
4108
  },
3675
4109
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3677,6 +4111,7 @@
3677
4111
  "original": {
3678
4112
  "$value": "{base.color.purple.5}",
3679
4113
  "$type": "color",
4114
+ "$description": "Strong border for completed/done state badges",
3680
4115
  "$extensions": {
3681
4116
  "org.primer.figma": {
3682
4117
  "collection": "mode",
@@ -3688,6 +4123,10 @@
3688
4123
  },
3689
4124
  "org.primer.overrides": {
3690
4125
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4126
+ },
4127
+ "org.primer.llm": {
4128
+ "usage": ["done-emphasis", "merged-status"],
4129
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3691
4130
  }
3692
4131
  },
3693
4132
  "key": "{borderColor.done.emphasis}"
@@ -3696,7 +4135,8 @@
3696
4135
  "attributes": {},
3697
4136
  "path": ["borderColor", "done", "emphasis"],
3698
4137
  "value": "#8957e5",
3699
- "type": "color"
4138
+ "type": "color",
4139
+ "description": "Strong border for completed/done state badges"
3700
4140
  },
3701
4141
  "borderColor-done-muted": {
3702
4142
  "key": "{borderColor.done.muted}",
@@ -3760,6 +4200,10 @@
3760
4200
  "isSource": true,
3761
4201
  "$type": "color"
3762
4202
  }
4203
+ },
4204
+ "org.primer.llm": {
4205
+ "usage": ["done-muted", "merged", "completed"],
4206
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3763
4207
  }
3764
4208
  },
3765
4209
  "alpha": 0.4,
@@ -3768,6 +4212,7 @@
3768
4212
  "original": {
3769
4213
  "$value": "{base.color.purple.4}",
3770
4214
  "$type": "color",
4215
+ "$description": "Subtle border for completed/done state indicators",
3771
4216
  "$extensions": {
3772
4217
  "org.primer.figma": {
3773
4218
  "collection": "mode",
@@ -3828,6 +4273,10 @@
3828
4273
  "isSource": true,
3829
4274
  "$type": "color"
3830
4275
  }
4276
+ },
4277
+ "org.primer.llm": {
4278
+ "usage": ["done-muted", "merged", "completed"],
4279
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3831
4280
  }
3832
4281
  },
3833
4282
  "alpha": 0.4,
@@ -3837,7 +4286,8 @@
3837
4286
  "attributes": {},
3838
4287
  "path": ["borderColor", "done", "muted"],
3839
4288
  "value": "#ab7df866",
3840
- "type": "color"
4289
+ "type": "color",
4290
+ "description": "Subtle border for completed/done state indicators"
3841
4291
  },
3842
4292
  "borderColor-draft-emphasis": {
3843
4293
  "key": "{borderColor.draft.emphasis}",
@@ -3849,6 +4299,10 @@
3849
4299
  "codeSyntax": {
3850
4300
  "web": "var(--borderColor-draft-emphasis)"
3851
4301
  }
4302
+ },
4303
+ "org.primer.llm": {
4304
+ "usage": ["draft-emphasis", "draft-status"],
4305
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3852
4306
  }
3853
4307
  },
3854
4308
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3856,6 +4310,7 @@
3856
4310
  "original": {
3857
4311
  "$value": "{borderColor.neutral.emphasis}",
3858
4312
  "$type": "color",
4313
+ "$description": "Strong border for draft state badges",
3859
4314
  "$extensions": {
3860
4315
  "org.primer.figma": {
3861
4316
  "collection": "mode",
@@ -3864,6 +4319,10 @@
3864
4319
  "codeSyntax": {
3865
4320
  "web": "var(--borderColor-draft-emphasis)"
3866
4321
  }
4322
+ },
4323
+ "org.primer.llm": {
4324
+ "usage": ["draft-emphasis", "draft-status"],
4325
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3867
4326
  }
3868
4327
  },
3869
4328
  "key": "{borderColor.draft.emphasis}"
@@ -3872,7 +4331,8 @@
3872
4331
  "attributes": {},
3873
4332
  "path": ["borderColor", "draft", "emphasis"],
3874
4333
  "value": "#656c76",
3875
- "type": "color"
4334
+ "type": "color",
4335
+ "description": "Strong border for draft state badges"
3876
4336
  },
3877
4337
  "borderColor-draft-muted": {
3878
4338
  "key": "{borderColor.draft.muted}",
@@ -3942,6 +4402,10 @@
3942
4402
  "isSource": true,
3943
4403
  "$type": "color"
3944
4404
  }
4405
+ },
4406
+ "org.primer.llm": {
4407
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4408
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3945
4409
  }
3946
4410
  },
3947
4411
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3950,6 +4414,7 @@
3950
4414
  "original": {
3951
4415
  "$value": "{borderColor.default}",
3952
4416
  "$type": "color",
4417
+ "$description": "Subtle border for draft state indicators",
3953
4418
  "$extensions": {
3954
4419
  "org.primer.figma": {
3955
4420
  "collection": "mode",
@@ -4016,6 +4481,10 @@
4016
4481
  "isSource": true,
4017
4482
  "$type": "color"
4018
4483
  }
4484
+ },
4485
+ "org.primer.llm": {
4486
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4487
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
4019
4488
  }
4020
4489
  },
4021
4490
  "alpha": 0.4,
@@ -4025,7 +4494,8 @@
4025
4494
  "attributes": {},
4026
4495
  "path": ["borderColor", "draft", "muted"],
4027
4496
  "value": "#3d444d66",
4028
- "type": "color"
4497
+ "type": "color",
4498
+ "description": "Subtle border for draft state indicators"
4029
4499
  },
4030
4500
  "borderColor-emphasis": {
4031
4501
  "key": "{borderColor.emphasis}",
@@ -4043,6 +4513,10 @@
4043
4513
  "dark-dimmed-high-contrast": "#3d444d",
4044
4514
  "dark-tritanopia-high-contrast": "#3d444d",
4045
4515
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
4516
+ },
4517
+ "org.primer.llm": {
4518
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4519
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4046
4520
  }
4047
4521
  },
4048
4522
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4050,6 +4524,7 @@
4050
4524
  "original": {
4051
4525
  "$value": "{base.color.neutral.8}",
4052
4526
  "$type": "color",
4527
+ "$description": "Strong border for emphasis and visual weight",
4053
4528
  "$extensions": {
4054
4529
  "org.primer.figma": {
4055
4530
  "collection": "mode",
@@ -4064,6 +4539,10 @@
4064
4539
  "dark-dimmed-high-contrast": "{borderColor.default}",
4065
4540
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4066
4541
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4542
+ },
4543
+ "org.primer.llm": {
4544
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4545
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4067
4546
  }
4068
4547
  },
4069
4548
  "key": "{borderColor.emphasis}"
@@ -4072,7 +4551,8 @@
4072
4551
  "attributes": {},
4073
4552
  "path": ["borderColor", "emphasis"],
4074
4553
  "value": "#656c76",
4075
- "type": "color"
4554
+ "type": "color",
4555
+ "description": "Strong border for emphasis and visual weight"
4076
4556
  },
4077
4557
  "borderColor-muted": {
4078
4558
  "key": "{borderColor.muted}",
@@ -4142,6 +4622,10 @@
4142
4622
  "isSource": true,
4143
4623
  "$type": "color"
4144
4624
  }
4625
+ },
4626
+ "org.primer.llm": {
4627
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4628
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4145
4629
  }
4146
4630
  },
4147
4631
  "alpha": 0.7,
@@ -4150,6 +4634,7 @@
4150
4634
  "original": {
4151
4635
  "$value": "{borderColor.default}",
4152
4636
  "$type": "color",
4637
+ "$description": "Subtle border for secondary elements and light separators",
4153
4638
  "$extensions": {
4154
4639
  "org.primer.figma": {
4155
4640
  "collection": "mode",
@@ -4216,6 +4701,10 @@
4216
4701
  "isSource": true,
4217
4702
  "$type": "color"
4218
4703
  }
4704
+ },
4705
+ "org.primer.llm": {
4706
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4707
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4219
4708
  }
4220
4709
  },
4221
4710
  "alpha": 0.7,
@@ -4225,7 +4714,8 @@
4225
4714
  "attributes": {},
4226
4715
  "path": ["borderColor", "muted"],
4227
4716
  "value": "#3d444db3",
4228
- "type": "color"
4717
+ "type": "color",
4718
+ "description": "Subtle border for secondary elements and light separators"
4229
4719
  },
4230
4720
  "borderColor-neutral-emphasis": {
4231
4721
  "key": "{borderColor.neutral.emphasis}",
@@ -4237,6 +4727,10 @@
4237
4727
  },
4238
4728
  "org.primer.overrides": {
4239
4729
  "dark": "#656c76"
4730
+ },
4731
+ "org.primer.llm": {
4732
+ "usage": ["neutral-emphasis", "neutral-strong"],
4733
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4240
4734
  }
4241
4735
  },
4242
4736
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4244,6 +4738,7 @@
4244
4738
  "original": {
4245
4739
  "$value": "{borderColor.emphasis}",
4246
4740
  "$type": "color",
4741
+ "$description": "Strong neutral semantic border",
4247
4742
  "$extensions": {
4248
4743
  "org.primer.figma": {
4249
4744
  "collection": "mode",
@@ -4252,6 +4747,10 @@
4252
4747
  },
4253
4748
  "org.primer.overrides": {
4254
4749
  "dark": "{borderColor.emphasis}"
4750
+ },
4751
+ "org.primer.llm": {
4752
+ "usage": ["neutral-emphasis", "neutral-strong"],
4753
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4255
4754
  }
4256
4755
  },
4257
4756
  "key": "{borderColor.neutral.emphasis}"
@@ -4260,7 +4759,8 @@
4260
4759
  "attributes": {},
4261
4760
  "path": ["borderColor", "neutral", "emphasis"],
4262
4761
  "value": "#656c76",
4263
- "type": "color"
4762
+ "type": "color",
4763
+ "description": "Strong neutral semantic border"
4264
4764
  },
4265
4765
  "borderColor-neutral-muted": {
4266
4766
  "key": "{borderColor.neutral.muted}",
@@ -4285,6 +4785,10 @@
4285
4785
  "isSource": true,
4286
4786
  "$type": "color"
4287
4787
  }
4788
+ },
4789
+ "org.primer.llm": {
4790
+ "usage": ["neutral-muted", "neutral-secondary"],
4791
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4288
4792
  }
4289
4793
  },
4290
4794
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4292,6 +4796,7 @@
4292
4796
  "original": {
4293
4797
  "$value": "{borderColor.muted}",
4294
4798
  "$type": "color",
4799
+ "$description": "Subtle neutral semantic border",
4295
4800
  "$extensions": {
4296
4801
  "org.primer.figma": {
4297
4802
  "collection": "mode",
@@ -4313,6 +4818,10 @@
4313
4818
  "isSource": true,
4314
4819
  "$type": "color"
4315
4820
  }
4821
+ },
4822
+ "org.primer.llm": {
4823
+ "usage": ["neutral-muted", "neutral-secondary"],
4824
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4316
4825
  }
4317
4826
  },
4318
4827
  "key": "{borderColor.neutral.muted}"
@@ -4321,7 +4830,8 @@
4321
4830
  "attributes": {},
4322
4831
  "path": ["borderColor", "neutral", "muted"],
4323
4832
  "value": "#3d444db3",
4324
- "type": "color"
4833
+ "type": "color",
4834
+ "description": "Subtle neutral semantic border"
4325
4835
  },
4326
4836
  "borderColor-open-emphasis": {
4327
4837
  "key": "{borderColor.open.emphasis}",
@@ -4343,6 +4853,10 @@
4343
4853
  "dark-protanopia-deuteranopia-high-contrast": "#bd561d",
4344
4854
  "light-protanopia-deuteranopia": "#bd561d",
4345
4855
  "light-protanopia-deuteranopia-high-contrast": "#bd561d"
4856
+ },
4857
+ "org.primer.llm": {
4858
+ "usage": ["open-emphasis", "open-status"],
4859
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4346
4860
  }
4347
4861
  },
4348
4862
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4350,6 +4864,7 @@
4350
4864
  "original": {
4351
4865
  "$value": "{base.color.orange.5}",
4352
4866
  "$type": "color",
4867
+ "$description": "Strong border for open state badges",
4353
4868
  "$extensions": {
4354
4869
  "org.primer.figma": {
4355
4870
  "collection": "mode",
@@ -4368,6 +4883,10 @@
4368
4883
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4369
4884
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4370
4885
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4886
+ },
4887
+ "org.primer.llm": {
4888
+ "usage": ["open-emphasis", "open-status"],
4889
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4371
4890
  }
4372
4891
  },
4373
4892
  "key": "{borderColor.open.emphasis}"
@@ -4376,7 +4895,8 @@
4376
4895
  "attributes": {},
4377
4896
  "path": ["borderColor", "open", "emphasis"],
4378
4897
  "value": "#bd561d",
4379
- "type": "color"
4898
+ "type": "color",
4899
+ "description": "Strong border for open state badges"
4380
4900
  },
4381
4901
  "borderColor-open-muted": {
4382
4902
  "key": "{borderColor.open.muted}",
@@ -4446,6 +4966,10 @@
4446
4966
  "isSource": true,
4447
4967
  "$type": "color"
4448
4968
  }
4969
+ },
4970
+ "org.primer.llm": {
4971
+ "usage": ["open-muted", "open-issue", "open-pr"],
4972
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4449
4973
  }
4450
4974
  },
4451
4975
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4454,6 +4978,7 @@
4454
4978
  "original": {
4455
4979
  "$value": "{base.color.orange.4}",
4456
4980
  "$type": "color",
4981
+ "$description": "Subtle border for open state indicators",
4457
4982
  "$extensions": {
4458
4983
  "org.primer.figma": {
4459
4984
  "collection": "mode",
@@ -4520,6 +5045,10 @@
4520
5045
  "isSource": true,
4521
5046
  "$type": "color"
4522
5047
  }
5048
+ },
5049
+ "org.primer.llm": {
5050
+ "usage": ["open-muted", "open-issue", "open-pr"],
5051
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4523
5052
  }
4524
5053
  },
4525
5054
  "alpha": 0.4,
@@ -4529,7 +5058,8 @@
4529
5058
  "attributes": {},
4530
5059
  "path": ["borderColor", "open", "muted"],
4531
5060
  "value": "#db6d2866",
4532
- "type": "color"
5061
+ "type": "color",
5062
+ "description": "Subtle border for open state indicators"
4533
5063
  },
4534
5064
  "borderColor-severe-emphasis": {
4535
5065
  "key": "{borderColor.severe.emphasis}",
@@ -4547,6 +5077,10 @@
4547
5077
  "light-tritanopia": "#da3633",
4548
5078
  "light-tritanopia-high-contrast": "#da3633",
4549
5079
  "dark-dimmed-high-contrast": "#ffa657"
5080
+ },
5081
+ "org.primer.llm": {
5082
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5083
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4550
5084
  }
4551
5085
  },
4552
5086
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4554,6 +5088,7 @@
4554
5088
  "original": {
4555
5089
  "$value": "{base.color.orange.5}",
4556
5090
  "$type": "color",
5091
+ "$description": "Strong severe border for prominent high-priority warnings",
4557
5092
  "$extensions": {
4558
5093
  "org.primer.figma": {
4559
5094
  "collection": "mode",
@@ -4568,6 +5103,10 @@
4568
5103
  "light-tritanopia": "{base.color.red.5}",
4569
5104
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4570
5105
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5106
+ },
5107
+ "org.primer.llm": {
5108
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5109
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4571
5110
  }
4572
5111
  },
4573
5112
  "key": "{borderColor.severe.emphasis}"
@@ -4576,7 +5115,8 @@
4576
5115
  "attributes": {},
4577
5116
  "path": ["borderColor", "severe", "emphasis"],
4578
5117
  "value": "#bd561d",
4579
- "type": "color"
5118
+ "type": "color",
5119
+ "description": "Strong severe border for prominent high-priority warnings"
4580
5120
  },
4581
5121
  "borderColor-severe-muted": {
4582
5122
  "key": "{borderColor.severe.muted}",
@@ -4635,6 +5175,10 @@
4635
5175
  "isSource": true,
4636
5176
  "$type": "color"
4637
5177
  }
5178
+ },
5179
+ "org.primer.llm": {
5180
+ "usage": ["severe-muted", "urgent-muted"],
5181
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4638
5182
  }
4639
5183
  },
4640
5184
  "alpha": 0.4,
@@ -4643,6 +5187,7 @@
4643
5187
  "original": {
4644
5188
  "$value": "{base.color.orange.4}",
4645
5189
  "$type": "color",
5190
+ "$description": "Subtle severe border for high-priority warnings",
4646
5191
  "$extensions": {
4647
5192
  "org.primer.figma": {
4648
5193
  "collection": "mode",
@@ -4698,6 +5243,10 @@
4698
5243
  "isSource": true,
4699
5244
  "$type": "color"
4700
5245
  }
5246
+ },
5247
+ "org.primer.llm": {
5248
+ "usage": ["severe-muted", "urgent-muted"],
5249
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4701
5250
  }
4702
5251
  },
4703
5252
  "alpha": 0.4,
@@ -4707,7 +5256,8 @@
4707
5256
  "attributes": {},
4708
5257
  "path": ["borderColor", "severe", "muted"],
4709
5258
  "value": "#db6d2866",
4710
- "type": "color"
5259
+ "type": "color",
5260
+ "description": "Subtle severe border for high-priority warnings"
4711
5261
  },
4712
5262
  "borderColor-sponsors-emphasis": {
4713
5263
  "key": "{borderColor.sponsors.emphasis}",
@@ -4722,6 +5272,10 @@
4722
5272
  },
4723
5273
  "org.primer.overrides": {
4724
5274
  "dark-dimmed-high-contrast": "#f778ba"
5275
+ },
5276
+ "org.primer.llm": {
5277
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5278
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4725
5279
  }
4726
5280
  },
4727
5281
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4729,6 +5283,7 @@
4729
5283
  "original": {
4730
5284
  "$value": "{base.color.pink.5}",
4731
5285
  "$type": "color",
5286
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4732
5287
  "$extensions": {
4733
5288
  "org.primer.figma": {
4734
5289
  "collection": "mode",
@@ -4740,6 +5295,10 @@
4740
5295
  },
4741
5296
  "org.primer.overrides": {
4742
5297
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5298
+ },
5299
+ "org.primer.llm": {
5300
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5301
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4743
5302
  }
4744
5303
  },
4745
5304
  "key": "{borderColor.sponsors.emphasis}"
@@ -4748,7 +5307,8 @@
4748
5307
  "attributes": {},
4749
5308
  "path": ["borderColor", "sponsors", "emphasis"],
4750
5309
  "value": "#bf4b8a",
4751
- "type": "color"
5310
+ "type": "color",
5311
+ "description": "Strong border for prominent GitHub Sponsors elements"
4752
5312
  },
4753
5313
  "borderColor-sponsors-muted": {
4754
5314
  "key": "{borderColor.sponsors.muted}",
@@ -4812,6 +5372,10 @@
4812
5372
  "isSource": true,
4813
5373
  "$type": "color"
4814
5374
  }
5375
+ },
5376
+ "org.primer.llm": {
5377
+ "usage": ["sponsors-muted", "funding-muted"],
5378
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4815
5379
  }
4816
5380
  },
4817
5381
  "alpha": 0.4,
@@ -4820,6 +5384,7 @@
4820
5384
  "original": {
4821
5385
  "$value": "{base.color.pink.4}",
4822
5386
  "$type": "color",
5387
+ "$description": "Subtle border for GitHub Sponsors content",
4823
5388
  "$extensions": {
4824
5389
  "org.primer.figma": {
4825
5390
  "collection": "mode",
@@ -4880,6 +5445,10 @@
4880
5445
  "isSource": true,
4881
5446
  "$type": "color"
4882
5447
  }
5448
+ },
5449
+ "org.primer.llm": {
5450
+ "usage": ["sponsors-muted", "funding-muted"],
5451
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4883
5452
  }
4884
5453
  },
4885
5454
  "alpha": 0.4,
@@ -4889,7 +5458,8 @@
4889
5458
  "attributes": {},
4890
5459
  "path": ["borderColor", "sponsors", "muted"],
4891
5460
  "value": "#db61a266",
4892
- "type": "color"
5461
+ "type": "color",
5462
+ "description": "Subtle border for GitHub Sponsors content"
4893
5463
  },
4894
5464
  "borderColor-success-emphasis": {
4895
5465
  "key": "{borderColor.success.emphasis}",
@@ -4912,6 +5482,10 @@
4912
5482
  "light-protanopia-deuteranopia": "#1f6feb",
4913
5483
  "light-protanopia-deuteranopia-high-contrast": "#1f6feb",
4914
5484
  "dark-dimmed-high-contrast": "#56d364"
5485
+ },
5486
+ "org.primer.llm": {
5487
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5488
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4915
5489
  }
4916
5490
  },
4917
5491
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4919,6 +5493,7 @@
4919
5493
  "original": {
4920
5494
  "$value": "{base.color.blue.5}",
4921
5495
  "$type": "color",
5496
+ "$description": "Strong success border for prominent positive elements",
4922
5497
  "$extensions": {
4923
5498
  "org.primer.figma": {
4924
5499
  "collection": "mode",
@@ -4938,6 +5513,10 @@
4938
5513
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4939
5514
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4940
5515
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5516
+ },
5517
+ "org.primer.llm": {
5518
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5519
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4941
5520
  }
4942
5521
  },
4943
5522
  "key": "{borderColor.success.emphasis}"
@@ -4946,7 +5525,8 @@
4946
5525
  "attributes": {},
4947
5526
  "path": ["borderColor", "success", "emphasis"],
4948
5527
  "value": "#1f6feb",
4949
- "type": "color"
5528
+ "type": "color",
5529
+ "description": "Strong success border for prominent positive elements"
4950
5530
  },
4951
5531
  "borderColor-success-muted": {
4952
5532
  "key": "{borderColor.success.muted}",
@@ -5037,6 +5617,10 @@
5037
5617
  "isSource": true,
5038
5618
  "$type": "color"
5039
5619
  }
5620
+ },
5621
+ "org.primer.llm": {
5622
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5623
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5040
5624
  }
5041
5625
  },
5042
5626
  "alpha": 0.4,
@@ -5045,6 +5629,7 @@
5045
5629
  "original": {
5046
5630
  "$value": "{base.color.blue.4}",
5047
5631
  "$type": "color",
5632
+ "$description": "Subtle success border for positive feedback elements",
5048
5633
  "$extensions": {
5049
5634
  "org.primer.figma": {
5050
5635
  "collection": "mode",
@@ -5132,6 +5717,10 @@
5132
5717
  "isSource": true,
5133
5718
  "$type": "color"
5134
5719
  }
5720
+ },
5721
+ "org.primer.llm": {
5722
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5723
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5135
5724
  }
5136
5725
  },
5137
5726
  "alpha": 0.4,
@@ -5141,7 +5730,8 @@
5141
5730
  "attributes": {},
5142
5731
  "path": ["borderColor", "success", "muted"],
5143
5732
  "value": "#388bfd66",
5144
- "type": "color"
5733
+ "type": "color",
5734
+ "description": "Subtle success border for positive feedback elements"
5145
5735
  },
5146
5736
  "borderColor-translucent": {
5147
5737
  "key": "{borderColor.translucent}",
@@ -5201,6 +5791,10 @@
5201
5791
  "isSource": true,
5202
5792
  "$type": "color"
5203
5793
  }
5794
+ },
5795
+ "org.primer.llm": {
5796
+ "usage": ["overlay-border", "translucent-border"],
5797
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5204
5798
  }
5205
5799
  },
5206
5800
  "alpha": 0.15,
@@ -5209,6 +5803,7 @@
5209
5803
  "original": {
5210
5804
  "$value": "{base.color.neutral.13}",
5211
5805
  "$type": "color",
5806
+ "$description": "Semi-transparent border for overlays and layered elements",
5212
5807
  "$extensions": {
5213
5808
  "org.primer.figma": {
5214
5809
  "collection": "mode",
@@ -5265,6 +5860,10 @@
5265
5860
  "isSource": true,
5266
5861
  "$type": "color"
5267
5862
  }
5863
+ },
5864
+ "org.primer.llm": {
5865
+ "usage": ["overlay-border", "translucent-border"],
5866
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5268
5867
  }
5269
5868
  },
5270
5869
  "alpha": 0.15,
@@ -5274,7 +5873,8 @@
5274
5873
  "attributes": {},
5275
5874
  "path": ["borderColor", "translucent"],
5276
5875
  "value": "#ffffff26",
5277
- "type": "color"
5876
+ "type": "color",
5877
+ "description": "Semi-transparent border for overlays and layered elements"
5278
5878
  },
5279
5879
  "borderColor-transparent": {
5280
5880
  "key": "{borderColor.transparent}",
@@ -5290,6 +5890,7 @@
5290
5890
  "original": {
5291
5891
  "$value": "{base.color.transparent}",
5292
5892
  "$type": "color",
5893
+ "$description": "Fully transparent border",
5293
5894
  "$extensions": {
5294
5895
  "org.primer.figma": {
5295
5896
  "collection": "mode",
@@ -5303,7 +5904,8 @@
5303
5904
  "attributes": {},
5304
5905
  "path": ["borderColor", "transparent"],
5305
5906
  "value": "#00000000",
5306
- "type": "color"
5907
+ "type": "color",
5908
+ "description": "Fully transparent border"
5307
5909
  },
5308
5910
  "borderColor-upsell-emphasis": {
5309
5911
  "key": "{borderColor.upsell.emphasis}",
@@ -5315,6 +5917,10 @@
5315
5917
  "codeSyntax": {
5316
5918
  "web": "var(--borderColor-upsell-emphasis)"
5317
5919
  }
5920
+ },
5921
+ "org.primer.llm": {
5922
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5923
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5318
5924
  }
5319
5925
  },
5320
5926
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5322,6 +5928,7 @@
5322
5928
  "original": {
5323
5929
  "$value": "{borderColor.done.emphasis}",
5324
5930
  "$type": "color",
5931
+ "$description": "Strong border for prominent upsell elements",
5325
5932
  "$extensions": {
5326
5933
  "org.primer.figma": {
5327
5934
  "collection": "mode",
@@ -5330,6 +5937,10 @@
5330
5937
  "codeSyntax": {
5331
5938
  "web": "var(--borderColor-upsell-emphasis)"
5332
5939
  }
5940
+ },
5941
+ "org.primer.llm": {
5942
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5943
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5333
5944
  }
5334
5945
  },
5335
5946
  "key": "{borderColor.upsell.emphasis}"
@@ -5338,7 +5949,8 @@
5338
5949
  "attributes": {},
5339
5950
  "path": ["borderColor", "upsell", "emphasis"],
5340
5951
  "value": "#8957e5",
5341
- "type": "color"
5952
+ "type": "color",
5953
+ "description": "Strong border for prominent upsell elements"
5342
5954
  },
5343
5955
  "borderColor-upsell-muted": {
5344
5956
  "key": "{borderColor.upsell.muted}",
@@ -5350,6 +5962,10 @@
5350
5962
  "codeSyntax": {
5351
5963
  "web": "var(--borderColor-upsell-muted)"
5352
5964
  }
5965
+ },
5966
+ "org.primer.llm": {
5967
+ "usage": ["upsell-muted", "premium-muted"],
5968
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5353
5969
  }
5354
5970
  },
5355
5971
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5357,6 +5973,7 @@
5357
5973
  "original": {
5358
5974
  "$value": "{borderColor.done.muted}",
5359
5975
  "$type": "color",
5976
+ "$description": "Subtle border for upsell and promotional content",
5360
5977
  "$extensions": {
5361
5978
  "org.primer.figma": {
5362
5979
  "collection": "mode",
@@ -5365,6 +5982,10 @@
5365
5982
  "codeSyntax": {
5366
5983
  "web": "var(--borderColor-upsell-muted)"
5367
5984
  }
5985
+ },
5986
+ "org.primer.llm": {
5987
+ "usage": ["upsell-muted", "premium-muted"],
5988
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5368
5989
  }
5369
5990
  },
5370
5991
  "key": "{borderColor.upsell.muted}"
@@ -5373,7 +5994,8 @@
5373
5994
  "attributes": {},
5374
5995
  "path": ["borderColor", "upsell", "muted"],
5375
5996
  "value": "#ab7df866",
5376
- "type": "color"
5997
+ "type": "color",
5998
+ "description": "Subtle border for upsell and promotional content"
5377
5999
  },
5378
6000
  "button-danger-bgColor-active": {
5379
6001
  "key": "{button.danger.bgColor.active}",
@@ -36532,6 +37154,10 @@
36532
37154
  "light-high-contrast": "#1158c7",
36533
37155
  "light-tritanopia-high-contrast": "#1158c7",
36534
37156
  "light-protanopia-deuteranopia-high-contrast": "#1158c7"
37157
+ },
37158
+ "org.primer.llm": {
37159
+ "usage": ["accent-text", "info-text", "accent-icon"],
37160
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36535
37161
  }
36536
37162
  },
36537
37163
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36539,6 +37165,7 @@
36539
37165
  "original": {
36540
37166
  "$value": "#4493F8",
36541
37167
  "$type": "color",
37168
+ "$description": "Accent text for links and interactive elements",
36542
37169
  "$extensions": {
36543
37170
  "org.primer.figma": {
36544
37171
  "collection": "mode",
@@ -36558,6 +37185,10 @@
36558
37185
  "light-high-contrast": "{base.color.blue.6}",
36559
37186
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36560
37187
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37188
+ },
37189
+ "org.primer.llm": {
37190
+ "usage": ["accent-text", "info-text", "accent-icon"],
37191
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36561
37192
  }
36562
37193
  },
36563
37194
  "key": "{fgColor.accent}"
@@ -36566,7 +37197,8 @@
36566
37197
  "attributes": {},
36567
37198
  "path": ["fgColor", "accent"],
36568
37199
  "value": "#4493f8",
36569
- "type": "color"
37200
+ "type": "color",
37201
+ "description": "Accent text for links and interactive elements"
36570
37202
  },
36571
37203
  "fgColor-attention": {
36572
37204
  "key": "{fgColor.attention}",
@@ -36585,6 +37217,10 @@
36585
37217
  "light-protanopia-deuteranopia-high-contrast": "#845306",
36586
37218
  "light-tritanopia-high-contrast": "#845306",
36587
37219
  "dark-dimmed-high-contrast": "#f2cc60"
37220
+ },
37221
+ "org.primer.llm": {
37222
+ "usage": ["attention-text", "warning-text", "caution-text"],
37223
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36588
37224
  }
36589
37225
  },
36590
37226
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36592,6 +37228,7 @@
36592
37228
  "original": {
36593
37229
  "$value": "{base.color.yellow.3}",
36594
37230
  "$type": "color",
37231
+ "$description": "Attention text for warnings and caution states",
36595
37232
  "$extensions": {
36596
37233
  "org.primer.figma": {
36597
37234
  "collection": "mode",
@@ -36607,6 +37244,10 @@
36607
37244
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36608
37245
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36609
37246
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37247
+ },
37248
+ "org.primer.llm": {
37249
+ "usage": ["attention-text", "warning-text", "caution-text"],
37250
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36610
37251
  }
36611
37252
  },
36612
37253
  "key": "{fgColor.attention}"
@@ -36615,7 +37256,8 @@
36615
37256
  "attributes": {},
36616
37257
  "path": ["fgColor", "attention"],
36617
37258
  "value": "#d29922",
36618
- "type": "color"
37259
+ "type": "color",
37260
+ "description": "Attention text for warnings and caution states"
36619
37261
  },
36620
37262
  "fgColor-black": {
36621
37263
  "key": "{fgColor.black}",
@@ -36627,6 +37269,10 @@
36627
37269
  },
36628
37270
  "org.primer.overrides": {
36629
37271
  "dark": "#010409"
37272
+ },
37273
+ "org.primer.llm": {
37274
+ "doNotUse": true,
37275
+ "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."
36630
37276
  }
36631
37277
  },
36632
37278
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36634,6 +37280,7 @@
36634
37280
  "original": {
36635
37281
  "$value": "{base.color.neutral.0}",
36636
37282
  "$type": "color",
37283
+ "$description": "Pure black text",
36637
37284
  "$extensions": {
36638
37285
  "org.primer.figma": {
36639
37286
  "collection": "mode",
@@ -36642,6 +37289,10 @@
36642
37289
  },
36643
37290
  "org.primer.overrides": {
36644
37291
  "dark": "{base.color.neutral.0}"
37292
+ },
37293
+ "org.primer.llm": {
37294
+ "doNotUse": true,
37295
+ "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."
36645
37296
  }
36646
37297
  },
36647
37298
  "key": "{fgColor.black}"
@@ -36650,7 +37301,8 @@
36650
37301
  "attributes": {},
36651
37302
  "path": ["fgColor", "black"],
36652
37303
  "value": "#010409",
36653
- "type": "color"
37304
+ "type": "color",
37305
+ "description": "Pure black text"
36654
37306
  },
36655
37307
  "fgColor-closed": {
36656
37308
  "key": "{fgColor.closed}",
@@ -36672,6 +37324,10 @@
36672
37324
  "dark-tritanopia-high-contrast": "#9198a1",
36673
37325
  "light-tritanopia": "#9198a1",
36674
37326
  "light-tritanopia-high-contrast": "#9198a1"
37327
+ },
37328
+ "org.primer.llm": {
37329
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37330
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36675
37331
  }
36676
37332
  },
36677
37333
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36679,6 +37335,7 @@
36679
37335
  "original": {
36680
37336
  "$value": "{fgColor.muted}",
36681
37337
  "$type": "color",
37338
+ "$description": "Text color for closed state indicators (issues, PRs)",
36682
37339
  "$extensions": {
36683
37340
  "org.primer.figma": {
36684
37341
  "collection": "mode",
@@ -36697,6 +37354,10 @@
36697
37354
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36698
37355
  "light-tritanopia": "{fgColor.muted}",
36699
37356
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37357
+ },
37358
+ "org.primer.llm": {
37359
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37360
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36700
37361
  }
36701
37362
  },
36702
37363
  "key": "{fgColor.closed}"
@@ -36705,7 +37366,8 @@
36705
37366
  "attributes": {},
36706
37367
  "path": ["fgColor", "closed"],
36707
37368
  "value": "#9198a1",
36708
- "type": "color"
37369
+ "type": "color",
37370
+ "description": "Text color for closed state indicators (issues, PRs)"
36709
37371
  },
36710
37372
  "fgColor-danger": {
36711
37373
  "key": "{fgColor.danger}",
@@ -36729,6 +37391,10 @@
36729
37391
  "dark-tritanopia-high-contrast": "#ff7b72",
36730
37392
  "light-high-contrast": "#b62324",
36731
37393
  "light-tritanopia-high-contrast": "#b62324"
37394
+ },
37395
+ "org.primer.llm": {
37396
+ "usage": ["danger-text", "error-text", "destructive-text"],
37397
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36732
37398
  }
36733
37399
  },
36734
37400
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36736,6 +37402,7 @@
36736
37402
  "original": {
36737
37403
  "$value": "{base.color.orange.3}",
36738
37404
  "$type": "color",
37405
+ "$description": "Danger text for errors and destructive actions",
36739
37406
  "$extensions": {
36740
37407
  "org.primer.figma": {
36741
37408
  "collection": "mode",
@@ -36756,6 +37423,10 @@
36756
37423
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36757
37424
  "light-high-contrast": "{base.color.red.6}",
36758
37425
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37426
+ },
37427
+ "org.primer.llm": {
37428
+ "usage": ["danger-text", "error-text", "destructive-text"],
37429
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36759
37430
  }
36760
37431
  },
36761
37432
  "key": "{fgColor.danger}"
@@ -36764,7 +37435,8 @@
36764
37435
  "attributes": {},
36765
37436
  "path": ["fgColor", "danger"],
36766
37437
  "value": "#f0883e",
36767
- "type": "color"
37438
+ "type": "color",
37439
+ "description": "Danger text for errors and destructive actions"
36768
37440
  },
36769
37441
  "fgColor-default": {
36770
37442
  "key": "{fgColor.default}",
@@ -36782,8 +37454,12 @@
36782
37454
  "dark-high-contrast": "#ffffff",
36783
37455
  "dark-tritanopia-high-contrast": "#ffffff",
36784
37456
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff",
36785
- "dark-dimmed": "#d1d7e0",
37457
+ "dark-dimmed": "#f0f6fc",
36786
37458
  "dark-dimmed-high-contrast": "#f0f6fc"
37459
+ },
37460
+ "org.primer.llm": {
37461
+ "usage": ["default-text", "heading", "body-text"],
37462
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36787
37463
  }
36788
37464
  },
36789
37465
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36791,6 +37467,7 @@
36791
37467
  "original": {
36792
37468
  "$value": "{base.color.neutral.12}",
36793
37469
  "$type": "color",
37470
+ "$description": "Default text color for primary content and headings",
36794
37471
  "$extensions": {
36795
37472
  "org.primer.figma": {
36796
37473
  "collection": "mode",
@@ -36805,8 +37482,12 @@
36805
37482
  "dark-high-contrast": "{base.color.neutral.13}",
36806
37483
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36807
37484
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36808
- "dark-dimmed": "{base.color.neutral.11}",
37485
+ "dark-dimmed": "{base.color.neutral.12}",
36809
37486
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37487
+ },
37488
+ "org.primer.llm": {
37489
+ "usage": ["default-text", "heading", "body-text"],
37490
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36810
37491
  }
36811
37492
  },
36812
37493
  "key": "{fgColor.default}"
@@ -36815,7 +37496,8 @@
36815
37496
  "attributes": {},
36816
37497
  "path": ["fgColor", "default"],
36817
37498
  "value": "#f0f6fc",
36818
- "type": "color"
37499
+ "type": "color",
37500
+ "description": "Default text color for primary content and headings"
36819
37501
  },
36820
37502
  "fgColor-disabled": {
36821
37503
  "key": "{fgColor.disabled}",
@@ -36840,6 +37522,10 @@
36840
37522
  "dark-high-contrast": "#656c76",
36841
37523
  "dark-tritanopia-high-contrast": "#656c76",
36842
37524
  "dark-protanopia-deuteranopia-high-contrast": "#656c76"
37525
+ },
37526
+ "org.primer.llm": {
37527
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37528
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36843
37529
  }
36844
37530
  },
36845
37531
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36847,6 +37533,7 @@
36847
37533
  "original": {
36848
37534
  "$value": "{base.color.neutral.8}",
36849
37535
  "$type": "color",
37536
+ "$description": "Text color for disabled interactive elements",
36850
37537
  "$extensions": {
36851
37538
  "org.primer.figma": {
36852
37539
  "collection": "mode",
@@ -36868,6 +37555,10 @@
36868
37555
  "dark-high-contrast": "{base.color.neutral.8}",
36869
37556
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36870
37557
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37558
+ },
37559
+ "org.primer.llm": {
37560
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37561
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36871
37562
  }
36872
37563
  },
36873
37564
  "key": "{fgColor.disabled}"
@@ -36876,7 +37567,8 @@
36876
37567
  "attributes": {},
36877
37568
  "path": ["fgColor", "disabled"],
36878
37569
  "value": "#656c76",
36879
- "type": "color"
37570
+ "type": "color",
37571
+ "description": "Text color for disabled interactive elements"
36880
37572
  },
36881
37573
  "fgColor-done": {
36882
37574
  "key": "{fgColor.done}",
@@ -36898,6 +37590,10 @@
36898
37590
  "light-high-contrast": "#6e40c9",
36899
37591
  "light-protanopia-deuteranopia-high-contrast": "#6e40c9",
36900
37592
  "light-tritanopia-high-contrast": "#6e40c9"
37593
+ },
37594
+ "org.primer.llm": {
37595
+ "usage": ["done-text", "merged", "completed"],
37596
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36901
37597
  }
36902
37598
  },
36903
37599
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36905,6 +37601,7 @@
36905
37601
  "original": {
36906
37602
  "$value": "{base.color.purple.4}",
36907
37603
  "$type": "color",
37604
+ "$description": "Text color for completed/done state indicators",
36908
37605
  "$extensions": {
36909
37606
  "org.primer.figma": {
36910
37607
  "collection": "mode",
@@ -36923,6 +37620,10 @@
36923
37620
  "light-high-contrast": "{base.color.purple.6}",
36924
37621
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36925
37622
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37623
+ },
37624
+ "org.primer.llm": {
37625
+ "usage": ["done-text", "merged", "completed"],
37626
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36926
37627
  }
36927
37628
  },
36928
37629
  "key": "{fgColor.done}"
@@ -36931,7 +37632,8 @@
36931
37632
  "attributes": {},
36932
37633
  "path": ["fgColor", "done"],
36933
37634
  "value": "#ab7df8",
36934
- "type": "color"
37635
+ "type": "color",
37636
+ "description": "Text color for completed/done state indicators"
36935
37637
  },
36936
37638
  "fgColor-draft": {
36937
37639
  "key": "{fgColor.draft}",
@@ -36943,6 +37645,10 @@
36943
37645
  "codeSyntax": {
36944
37646
  "web": "var(--fgColor-draft)"
36945
37647
  }
37648
+ },
37649
+ "org.primer.llm": {
37650
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37651
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36946
37652
  }
36947
37653
  },
36948
37654
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36950,6 +37656,7 @@
36950
37656
  "original": {
36951
37657
  "$value": "{fgColor.neutral}",
36952
37658
  "$type": "color",
37659
+ "$description": "Text color for draft state indicators",
36953
37660
  "$extensions": {
36954
37661
  "org.primer.figma": {
36955
37662
  "collection": "mode",
@@ -36958,6 +37665,10 @@
36958
37665
  "codeSyntax": {
36959
37666
  "web": "var(--fgColor-draft)"
36960
37667
  }
37668
+ },
37669
+ "org.primer.llm": {
37670
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37671
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36961
37672
  }
36962
37673
  },
36963
37674
  "key": "{fgColor.draft}"
@@ -36966,7 +37677,8 @@
36966
37677
  "attributes": {},
36967
37678
  "path": ["fgColor", "draft"],
36968
37679
  "value": "#9198a1",
36969
- "type": "color"
37680
+ "type": "color",
37681
+ "description": "Text color for draft state indicators"
36970
37682
  },
36971
37683
  "fgColor-link": {
36972
37684
  "key": "{fgColor.link}",
@@ -36978,6 +37690,10 @@
36978
37690
  "codeSyntax": {
36979
37691
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36980
37692
  }
37693
+ },
37694
+ "org.primer.llm": {
37695
+ "usage": ["link-text", "hyperlink"],
37696
+ "rules": "MUST use for all text links. Provides expected link affordance."
36981
37697
  }
36982
37698
  },
36983
37699
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36985,6 +37701,7 @@
36985
37701
  "original": {
36986
37702
  "$value": "{fgColor.accent}",
36987
37703
  "$type": "color",
37704
+ "$description": "Text color for hyperlinks",
36988
37705
  "$extensions": {
36989
37706
  "org.primer.figma": {
36990
37707
  "collection": "mode",
@@ -36993,6 +37710,10 @@
36993
37710
  "codeSyntax": {
36994
37711
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36995
37712
  }
37713
+ },
37714
+ "org.primer.llm": {
37715
+ "usage": ["link-text", "hyperlink"],
37716
+ "rules": "MUST use for all text links. Provides expected link affordance."
36996
37717
  }
36997
37718
  },
36998
37719
  "key": "{fgColor.link}"
@@ -37001,7 +37722,8 @@
37001
37722
  "attributes": {},
37002
37723
  "path": ["fgColor", "link"],
37003
37724
  "value": "#4493f8",
37004
- "type": "color"
37725
+ "type": "color",
37726
+ "description": "Text color for hyperlinks"
37005
37727
  },
37006
37728
  "fgColor-muted": {
37007
37729
  "key": "{fgColor.muted}",
@@ -37022,6 +37744,10 @@
37022
37744
  "dark-dimmed-high-contrast": "#b7bdc8",
37023
37745
  "dark-tritanopia-high-contrast": "#b7bdc8",
37024
37746
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
37747
+ },
37748
+ "org.primer.llm": {
37749
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37750
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37025
37751
  }
37026
37752
  },
37027
37753
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37029,6 +37755,7 @@
37029
37755
  "original": {
37030
37756
  "$value": "{base.color.neutral.9}",
37031
37757
  "$type": "color",
37758
+ "$description": "Muted text for secondary content and less important information",
37032
37759
  "$extensions": {
37033
37760
  "org.primer.figma": {
37034
37761
  "collection": "mode",
@@ -37046,6 +37773,10 @@
37046
37773
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37047
37774
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37048
37775
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37776
+ },
37777
+ "org.primer.llm": {
37778
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37779
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37049
37780
  }
37050
37781
  },
37051
37782
  "key": "{fgColor.muted}"
@@ -37054,7 +37785,8 @@
37054
37785
  "attributes": {},
37055
37786
  "path": ["fgColor", "muted"],
37056
37787
  "value": "#9198a1",
37057
- "type": "color"
37788
+ "type": "color",
37789
+ "description": "Muted text for secondary content and less important information"
37058
37790
  },
37059
37791
  "fgColor-neutral": {
37060
37792
  "key": "{fgColor.neutral}",
@@ -37072,6 +37804,10 @@
37072
37804
  "dark-dimmed-high-contrast": "#d1d7e0",
37073
37805
  "dark-tritanopia-high-contrast": "#d1d7e0",
37074
37806
  "dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
37807
+ },
37808
+ "org.primer.llm": {
37809
+ "usage": ["neutral-icon", "neutral-text"],
37810
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37075
37811
  }
37076
37812
  },
37077
37813
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37079,6 +37815,7 @@
37079
37815
  "original": {
37080
37816
  "$value": "{base.color.neutral.9}",
37081
37817
  "$type": "color",
37818
+ "$description": "Neutral semantic text for icons and secondary elements",
37082
37819
  "$extensions": {
37083
37820
  "org.primer.figma": {
37084
37821
  "collection": "mode",
@@ -37093,6 +37830,10 @@
37093
37830
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37094
37831
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37095
37832
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37833
+ },
37834
+ "org.primer.llm": {
37835
+ "usage": ["neutral-icon", "neutral-text"],
37836
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37096
37837
  }
37097
37838
  },
37098
37839
  "key": "{fgColor.neutral}"
@@ -37101,7 +37842,8 @@
37101
37842
  "attributes": {},
37102
37843
  "path": ["fgColor", "neutral"],
37103
37844
  "value": "#9198a1",
37104
- "type": "color"
37845
+ "type": "color",
37846
+ "description": "Neutral semantic text for icons and secondary elements"
37105
37847
  },
37106
37848
  "fgColor-onEmphasis": {
37107
37849
  "key": "{fgColor.onEmphasis}",
@@ -37118,6 +37860,10 @@
37118
37860
  "dark": "#ffffff",
37119
37861
  "dark-dimmed": "#f0f6fc",
37120
37862
  "dark-dimmed-high-contrast": "#ffffff"
37863
+ },
37864
+ "org.primer.llm": {
37865
+ "usage": ["text-on-emphasis", "contrast-text"],
37866
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37121
37867
  }
37122
37868
  },
37123
37869
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37125,6 +37871,7 @@
37125
37871
  "original": {
37126
37872
  "$value": "{base.color.neutral.13}",
37127
37873
  "$type": "color",
37874
+ "$description": "Text color for use on emphasis backgrounds",
37128
37875
  "$extensions": {
37129
37876
  "org.primer.figma": {
37130
37877
  "collection": "mode",
@@ -37138,6 +37885,10 @@
37138
37885
  "dark": "{base.color.neutral.13}",
37139
37886
  "dark-dimmed": "{base.color.neutral.12}",
37140
37887
  "dark-dimmed-high-contrast": "#ffffff"
37888
+ },
37889
+ "org.primer.llm": {
37890
+ "usage": ["text-on-emphasis", "contrast-text"],
37891
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37141
37892
  }
37142
37893
  },
37143
37894
  "key": "{fgColor.onEmphasis}"
@@ -37146,7 +37897,8 @@
37146
37897
  "attributes": {},
37147
37898
  "path": ["fgColor", "onEmphasis"],
37148
37899
  "value": "#ffffff",
37149
- "type": "color"
37900
+ "type": "color",
37901
+ "description": "Text color for use on emphasis backgrounds"
37150
37902
  },
37151
37903
  "fgColor-onInverse": {
37152
37904
  "key": "{fgColor.onInverse}",
@@ -37155,6 +37907,10 @@
37155
37907
  "collection": "mode",
37156
37908
  "group": "semantic",
37157
37909
  "scopes": ["fgColor"]
37910
+ },
37911
+ "org.primer.llm": {
37912
+ "usage": ["text-on-inverse", "inverse-text"],
37913
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37158
37914
  }
37159
37915
  },
37160
37916
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37162,11 +37918,16 @@
37162
37918
  "original": {
37163
37919
  "$value": "{base.color.neutral.0}",
37164
37920
  "$type": "color",
37921
+ "$description": "Text color for use on inverse backgrounds",
37165
37922
  "$extensions": {
37166
37923
  "org.primer.figma": {
37167
37924
  "collection": "mode",
37168
37925
  "group": "semantic",
37169
37926
  "scopes": ["fgColor"]
37927
+ },
37928
+ "org.primer.llm": {
37929
+ "usage": ["text-on-inverse", "inverse-text"],
37930
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37170
37931
  }
37171
37932
  },
37172
37933
  "key": "{fgColor.onInverse}"
@@ -37175,7 +37936,8 @@
37175
37936
  "attributes": {},
37176
37937
  "path": ["fgColor", "onInverse"],
37177
37938
  "value": "#010409",
37178
- "type": "color"
37939
+ "type": "color",
37940
+ "description": "Text color for use on inverse backgrounds"
37179
37941
  },
37180
37942
  "fgColor-open": {
37181
37943
  "key": "{fgColor.open}",
@@ -37197,6 +37959,10 @@
37197
37959
  "dark-tritanopia-high-contrast": "#ffa198",
37198
37960
  "light-tritanopia": "#da3633",
37199
37961
  "light-tritanopia-high-contrast": "#b62324"
37962
+ },
37963
+ "org.primer.llm": {
37964
+ "usage": ["open-text", "open-issue", "open-pr"],
37965
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37200
37966
  }
37201
37967
  },
37202
37968
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37204,6 +37970,7 @@
37204
37970
  "original": {
37205
37971
  "$value": "{base.color.orange.4}",
37206
37972
  "$type": "color",
37973
+ "$description": "Text color for open state indicators (issues, PRs)",
37207
37974
  "$extensions": {
37208
37975
  "org.primer.figma": {
37209
37976
  "collection": "mode",
@@ -37222,6 +37989,10 @@
37222
37989
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37223
37990
  "light-tritanopia": "{base.color.red.5}",
37224
37991
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37992
+ },
37993
+ "org.primer.llm": {
37994
+ "usage": ["open-text", "open-issue", "open-pr"],
37995
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37225
37996
  }
37226
37997
  },
37227
37998
  "key": "{fgColor.open}"
@@ -37230,7 +38001,8 @@
37230
38001
  "attributes": {},
37231
38002
  "path": ["fgColor", "open"],
37232
38003
  "value": "#db6d28",
37233
- "type": "color"
38004
+ "type": "color",
38005
+ "description": "Text color for open state indicators (issues, PRs)"
37234
38006
  },
37235
38007
  "fgColor-severe": {
37236
38008
  "key": "{fgColor.severe}",
@@ -37254,6 +38026,10 @@
37254
38026
  "light-tritanopia": "#da3633",
37255
38027
  "light-tritanopia-high-contrast": "#b62324",
37256
38028
  "light-protanopia-deuteranopia-high-contrast": "#9b4215"
38029
+ },
38030
+ "org.primer.llm": {
38031
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38032
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37257
38033
  }
37258
38034
  },
37259
38035
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37261,6 +38037,7 @@
37261
38037
  "original": {
37262
38038
  "$value": "{base.color.orange.4}",
37263
38039
  "$type": "color",
38040
+ "$description": "Severe text for high-priority warnings",
37264
38041
  "$extensions": {
37265
38042
  "org.primer.figma": {
37266
38043
  "collection": "mode",
@@ -37281,6 +38058,10 @@
37281
38058
  "light-tritanopia": "{base.color.red.5}",
37282
38059
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37283
38060
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38061
+ },
38062
+ "org.primer.llm": {
38063
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38064
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37284
38065
  }
37285
38066
  },
37286
38067
  "key": "{fgColor.severe}"
@@ -37289,7 +38070,8 @@
37289
38070
  "attributes": {},
37290
38071
  "path": ["fgColor", "severe"],
37291
38072
  "value": "#db6d28",
37292
- "type": "color"
38073
+ "type": "color",
38074
+ "description": "Severe text for high-priority warnings"
37293
38075
  },
37294
38076
  "fgColor-sponsors": {
37295
38077
  "key": "{fgColor.sponsors}",
@@ -37311,6 +38093,10 @@
37311
38093
  "light-high-contrast": "#9e3670",
37312
38094
  "light-protanopia-deuteranopia-high-contrast": "#9e3670",
37313
38095
  "light-tritanopia-high-contrast": "#9e3670"
38096
+ },
38097
+ "org.primer.llm": {
38098
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38099
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37314
38100
  }
37315
38101
  },
37316
38102
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37318,6 +38104,7 @@
37318
38104
  "original": {
37319
38105
  "$value": "{base.color.pink.4}",
37320
38106
  "$type": "color",
38107
+ "$description": "Text color for GitHub Sponsors content",
37321
38108
  "$extensions": {
37322
38109
  "org.primer.figma": {
37323
38110
  "collection": "mode",
@@ -37336,6 +38123,10 @@
37336
38123
  "light-high-contrast": "{base.color.pink.6}",
37337
38124
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37338
38125
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38126
+ },
38127
+ "org.primer.llm": {
38128
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38129
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37339
38130
  }
37340
38131
  },
37341
38132
  "key": "{fgColor.sponsors}"
@@ -37344,7 +38135,8 @@
37344
38135
  "attributes": {},
37345
38136
  "path": ["fgColor", "sponsors"],
37346
38137
  "value": "#db61a2",
37347
- "type": "color"
38138
+ "type": "color",
38139
+ "description": "Text color for GitHub Sponsors content"
37348
38140
  },
37349
38141
  "fgColor-success": {
37350
38142
  "key": "{fgColor.success}",
@@ -37370,6 +38162,10 @@
37370
38162
  "dark-tritanopia-high-contrast": "#79c0ff",
37371
38163
  "light-tritanopia": "#1f6feb",
37372
38164
  "light-tritanopia-high-contrast": "#1158c7"
38165
+ },
38166
+ "org.primer.llm": {
38167
+ "usage": ["success-text", "positive-text", "success-icon"],
38168
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37373
38169
  }
37374
38170
  },
37375
38171
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37377,6 +38173,7 @@
37377
38173
  "original": {
37378
38174
  "$value": "{base.color.blue.3}",
37379
38175
  "$type": "color",
38176
+ "$description": "Success text for positive feedback and completed states",
37380
38177
  "$extensions": {
37381
38178
  "org.primer.figma": {
37382
38179
  "collection": "mode",
@@ -37399,6 +38196,10 @@
37399
38196
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37400
38197
  "light-tritanopia": "{base.color.blue.5}",
37401
38198
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38199
+ },
38200
+ "org.primer.llm": {
38201
+ "usage": ["success-text", "positive-text", "success-icon"],
38202
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37402
38203
  }
37403
38204
  },
37404
38205
  "key": "{fgColor.success}"
@@ -37407,7 +38208,8 @@
37407
38208
  "attributes": {},
37408
38209
  "path": ["fgColor", "success"],
37409
38210
  "value": "#58a6ff",
37410
- "type": "color"
38211
+ "type": "color",
38212
+ "description": "Success text for positive feedback and completed states"
37411
38213
  },
37412
38214
  "fgColor-upsell": {
37413
38215
  "key": "{fgColor.upsell}",
@@ -37419,6 +38221,10 @@
37419
38221
  "codeSyntax": {
37420
38222
  "web": "var(--fgColor-upsell)"
37421
38223
  }
38224
+ },
38225
+ "org.primer.llm": {
38226
+ "usage": ["upsell-text", "premium-text", "promotional"],
38227
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37422
38228
  }
37423
38229
  },
37424
38230
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37426,6 +38232,7 @@
37426
38232
  "original": {
37427
38233
  "$value": "{fgColor.done}",
37428
38234
  "$type": "color",
38235
+ "$description": "Text color for upsell and promotional content",
37429
38236
  "$extensions": {
37430
38237
  "org.primer.figma": {
37431
38238
  "collection": "mode",
@@ -37434,6 +38241,10 @@
37434
38241
  "codeSyntax": {
37435
38242
  "web": "var(--fgColor-upsell)"
37436
38243
  }
38244
+ },
38245
+ "org.primer.llm": {
38246
+ "usage": ["upsell-text", "premium-text", "promotional"],
38247
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37437
38248
  }
37438
38249
  },
37439
38250
  "key": "{fgColor.upsell}"
@@ -37442,7 +38253,8 @@
37442
38253
  "attributes": {},
37443
38254
  "path": ["fgColor", "upsell"],
37444
38255
  "value": "#ab7df8",
37445
- "type": "color"
38256
+ "type": "color",
38257
+ "description": "Text color for upsell and promotional content"
37446
38258
  },
37447
38259
  "fgColor-white": {
37448
38260
  "key": "{fgColor.white}",
@@ -37454,6 +38266,10 @@
37454
38266
  },
37455
38267
  "org.primer.overrides": {
37456
38268
  "dark": "#ffffff"
38269
+ },
38270
+ "org.primer.llm": {
38271
+ "doNotUse": true,
38272
+ "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."
37457
38273
  }
37458
38274
  },
37459
38275
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37461,6 +38277,7 @@
37461
38277
  "original": {
37462
38278
  "$value": "{base.color.neutral.13}",
37463
38279
  "$type": "color",
38280
+ "$description": "Pure white text",
37464
38281
  "$extensions": {
37465
38282
  "org.primer.figma": {
37466
38283
  "collection": "mode",
@@ -37469,6 +38286,10 @@
37469
38286
  },
37470
38287
  "org.primer.overrides": {
37471
38288
  "dark": "{base.color.neutral.13}"
38289
+ },
38290
+ "org.primer.llm": {
38291
+ "doNotUse": true,
38292
+ "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."
37472
38293
  }
37473
38294
  },
37474
38295
  "key": "{fgColor.white}"
@@ -37477,10 +38298,17 @@
37477
38298
  "attributes": {},
37478
38299
  "path": ["fgColor", "white"],
37479
38300
  "value": "#ffffff",
37480
- "type": "color"
38301
+ "type": "color",
38302
+ "description": "Pure white text"
37481
38303
  },
37482
38304
  "focus-outline": {
37483
38305
  "key": "{focus.outline}",
38306
+ "$extensions": {
38307
+ "org.primer.llm": {
38308
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38309
+ "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."
38310
+ }
38311
+ },
37484
38312
  "filePath": "src/tokens/functional/border/border.json5",
37485
38313
  "isSource": true,
37486
38314
  "original": {
@@ -37490,13 +38318,21 @@
37490
38318
  "width": "2px"
37491
38319
  },
37492
38320
  "$type": "border",
38321
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38322
+ "$extensions": {
38323
+ "org.primer.llm": {
38324
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38325
+ "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."
38326
+ }
38327
+ },
37493
38328
  "key": "{focus.outline}"
37494
38329
  },
37495
38330
  "name": "focus-outline",
37496
38331
  "attributes": {},
37497
38332
  "path": ["focus", "outline"],
37498
38333
  "value": "2px solid #1f6feb",
37499
- "type": "border"
38334
+ "type": "border",
38335
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37500
38336
  },
37501
38337
  "focus-outlineColor": {
37502
38338
  "key": "{focus.outlineColor}",
@@ -37505,6 +38341,10 @@
37505
38341
  "collection": "mode",
37506
38342
  "group": "component (internal)",
37507
38343
  "scopes": ["borderColor", "effectColor"]
38344
+ },
38345
+ "org.primer.llm": {
38346
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38347
+ "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."
37508
38348
  }
37509
38349
  },
37510
38350
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37512,11 +38352,16 @@
37512
38352
  "original": {
37513
38353
  "$value": "{borderColor.accent.emphasis}",
37514
38354
  "$type": "color",
38355
+ "$description": "Outline color for focus states on interactive elements",
37515
38356
  "$extensions": {
37516
38357
  "org.primer.figma": {
37517
38358
  "collection": "mode",
37518
38359
  "group": "component (internal)",
37519
38360
  "scopes": ["borderColor", "effectColor"]
38361
+ },
38362
+ "org.primer.llm": {
38363
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38364
+ "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."
37520
38365
  }
37521
38366
  },
37522
38367
  "key": "{focus.outlineColor}"
@@ -37525,7 +38370,8 @@
37525
38370
  "attributes": {},
37526
38371
  "path": ["focus", "outlineColor"],
37527
38372
  "value": "#1f6feb",
37528
- "type": "color"
38373
+ "type": "color",
38374
+ "description": "Outline color for focus states on interactive elements"
37529
38375
  },
37530
38376
  "header-bgColor": {
37531
38377
  "key": "{header.bgColor}",
@@ -46586,6 +47432,10 @@
46586
47432
  "isSource": true,
46587
47433
  "$type": "color"
46588
47434
  }
47435
+ },
47436
+ "org.primer.llm": {
47437
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47438
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46589
47439
  }
46590
47440
  },
46591
47441
  "alpha": 0.7,
@@ -46594,6 +47444,7 @@
46594
47444
  "original": {
46595
47445
  "$value": "{bgColor.accent.emphasis}",
46596
47446
  "$type": "color",
47447
+ "$description": "Background color for text selection highlights",
46597
47448
  "$extensions": {
46598
47449
  "org.primer.figma": {
46599
47450
  "collection": "mode",
@@ -46608,6 +47459,10 @@
46608
47459
  "isSource": true,
46609
47460
  "$type": "color"
46610
47461
  }
47462
+ },
47463
+ "org.primer.llm": {
47464
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47465
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46611
47466
  }
46612
47467
  },
46613
47468
  "alpha": 0.7,
@@ -46617,7 +47472,8 @@
46617
47472
  "attributes": {},
46618
47473
  "path": ["selection", "bgColor"],
46619
47474
  "value": "#1f6febb3",
46620
- "type": "color"
47475
+ "type": "color",
47476
+ "description": "Background color for text selection highlights"
46621
47477
  },
46622
47478
  "shadow-floating-large": {
46623
47479
  "key": "{shadow.floating.large}",
@@ -46650,6 +47506,10 @@
46650
47506
  "isSource": true,
46651
47507
  "$type": "shadow"
46652
47508
  }
47509
+ },
47510
+ "org.primer.llm": {
47511
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47512
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46653
47513
  }
46654
47514
  },
46655
47515
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46674,6 +47534,7 @@
46674
47534
  }
46675
47535
  ],
46676
47536
  "$type": "shadow",
47537
+ "$description": "Large floating shadow for modals and dialogs",
46677
47538
  "$extensions": {
46678
47539
  "org.primer.figma": {
46679
47540
  "collection": "mode",
@@ -46703,6 +47564,10 @@
46703
47564
  "isSource": true,
46704
47565
  "$type": "shadow"
46705
47566
  }
47567
+ },
47568
+ "org.primer.llm": {
47569
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47570
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46706
47571
  }
46707
47572
  },
46708
47573
  "key": "{shadow.floating.large}"
@@ -46711,7 +47576,8 @@
46711
47576
  "attributes": {},
46712
47577
  "path": ["shadow", "floating", "large"],
46713
47578
  "value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
46714
- "type": "shadow"
47579
+ "type": "shadow",
47580
+ "description": "Large floating shadow for modals and dialogs"
46715
47581
  },
46716
47582
  "shadow-floating-legacy": {
46717
47583
  "key": "{shadow.floating.legacy}",
@@ -46741,6 +47607,10 @@
46741
47607
  "isSource": true,
46742
47608
  "$type": "shadow"
46743
47609
  }
47610
+ },
47611
+ "org.primer.llm": {
47612
+ "usage": ["legacy-component", "backward-compatibility"],
47613
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46744
47614
  }
46745
47615
  },
46746
47616
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46765,6 +47635,7 @@
46765
47635
  }
46766
47636
  ],
46767
47637
  "$type": "shadow",
47638
+ "$description": "Legacy floating shadow for backward compatibility",
46768
47639
  "$extensions": {
46769
47640
  "org.primer.figma": {},
46770
47641
  "org.primer.overrides": {
@@ -46791,6 +47662,10 @@
46791
47662
  "isSource": true,
46792
47663
  "$type": "shadow"
46793
47664
  }
47665
+ },
47666
+ "org.primer.llm": {
47667
+ "usage": ["legacy-component", "backward-compatibility"],
47668
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46794
47669
  }
46795
47670
  },
46796
47671
  "key": "{shadow.floating.legacy}"
@@ -46799,7 +47674,8 @@
46799
47674
  "attributes": {},
46800
47675
  "path": ["shadow", "floating", "legacy"],
46801
47676
  "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
46802
- "type": "shadow"
47677
+ "type": "shadow",
47678
+ "description": "Legacy floating shadow for backward compatibility"
46803
47679
  },
46804
47680
  "shadow-floating-medium": {
46805
47681
  "key": "{shadow.floating.medium}",
@@ -46856,6 +47732,10 @@
46856
47732
  "isSource": true,
46857
47733
  "$type": "shadow"
46858
47734
  }
47735
+ },
47736
+ "org.primer.llm": {
47737
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47738
+ "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."
46859
47739
  }
46860
47740
  },
46861
47741
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46904,6 +47784,7 @@
46904
47784
  }
46905
47785
  ],
46906
47786
  "$type": "shadow",
47787
+ "$description": "Medium floating shadow for popovers and action menus",
46907
47788
  "$extensions": {
46908
47789
  "org.primer.figma": {
46909
47790
  "collection": "mode",
@@ -46957,6 +47838,10 @@
46957
47838
  "isSource": true,
46958
47839
  "$type": "shadow"
46959
47840
  }
47841
+ },
47842
+ "org.primer.llm": {
47843
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47844
+ "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."
46960
47845
  }
46961
47846
  },
46962
47847
  "key": "{shadow.floating.medium}"
@@ -46965,7 +47850,8 @@
46965
47850
  "attributes": {},
46966
47851
  "path": ["shadow", "floating", "medium"],
46967
47852
  "value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
46968
- "type": "shadow"
47853
+ "type": "shadow",
47854
+ "description": "Medium floating shadow for popovers and action menus"
46969
47855
  },
46970
47856
  "shadow-floating-small": {
46971
47857
  "key": "{shadow.floating.small}",
@@ -47006,6 +47892,10 @@
47006
47892
  "isSource": true,
47007
47893
  "$type": "shadow"
47008
47894
  }
47895
+ },
47896
+ "org.primer.llm": {
47897
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47898
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47009
47899
  }
47010
47900
  },
47011
47901
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47038,6 +47928,7 @@
47038
47928
  }
47039
47929
  ],
47040
47930
  "$type": "shadow",
47931
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47041
47932
  "$extensions": {
47042
47933
  "org.primer.figma": {
47043
47934
  "collection": "mode",
@@ -47075,6 +47966,10 @@
47075
47966
  "isSource": true,
47076
47967
  "$type": "shadow"
47077
47968
  }
47969
+ },
47970
+ "org.primer.llm": {
47971
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47972
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47078
47973
  }
47079
47974
  },
47080
47975
  "key": "{shadow.floating.small}"
@@ -47083,7 +47978,8 @@
47083
47978
  "attributes": {},
47084
47979
  "path": ["shadow", "floating", "small"],
47085
47980
  "value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47086
- "type": "shadow"
47981
+ "type": "shadow",
47982
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47087
47983
  },
47088
47984
  "shadow-floating-xlarge": {
47089
47985
  "key": "{shadow.floating.xlarge}",
@@ -47116,6 +48012,10 @@
47116
48012
  "isSource": true,
47117
48013
  "$type": "shadow"
47118
48014
  }
48015
+ },
48016
+ "org.primer.llm": {
48017
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48018
+ "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."
47119
48019
  }
47120
48020
  },
47121
48021
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47140,6 +48040,7 @@
47140
48040
  }
47141
48041
  ],
47142
48042
  "$type": "shadow",
48043
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47143
48044
  "$extensions": {
47144
48045
  "org.primer.figma": {
47145
48046
  "collection": "mode",
@@ -47169,6 +48070,10 @@
47169
48070
  "isSource": true,
47170
48071
  "$type": "shadow"
47171
48072
  }
48073
+ },
48074
+ "org.primer.llm": {
48075
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48076
+ "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."
47172
48077
  }
47173
48078
  },
47174
48079
  "key": "{shadow.floating.xlarge}"
@@ -47177,7 +48082,8 @@
47177
48082
  "attributes": {},
47178
48083
  "path": ["shadow", "floating", "xlarge"],
47179
48084
  "value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
47180
- "type": "shadow"
48085
+ "type": "shadow",
48086
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47181
48087
  },
47182
48088
  "shadow-inset": {
47183
48089
  "key": "{shadow.inset}",
@@ -47201,6 +48107,10 @@
47201
48107
  "isSource": true,
47202
48108
  "$type": "shadow"
47203
48109
  }
48110
+ },
48111
+ "org.primer.llm": {
48112
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48113
+ "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."
47204
48114
  }
47205
48115
  },
47206
48116
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47216,6 +48126,7 @@
47216
48126
  "inset": true
47217
48127
  },
47218
48128
  "$type": "shadow",
48129
+ "$description": "Inset shadow for recessed elements",
47219
48130
  "$extensions": {
47220
48131
  "org.primer.figma": {
47221
48132
  "collection": "mode",
@@ -47236,6 +48147,10 @@
47236
48147
  "isSource": true,
47237
48148
  "$type": "shadow"
47238
48149
  }
48150
+ },
48151
+ "org.primer.llm": {
48152
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48153
+ "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."
47239
48154
  }
47240
48155
  },
47241
48156
  "key": "{shadow.inset}"
@@ -47244,7 +48159,8 @@
47244
48159
  "attributes": {},
47245
48160
  "path": ["shadow", "inset"],
47246
48161
  "value": "inset 0px 1px 0px 0px #0104093d",
47247
- "type": "shadow"
48162
+ "type": "shadow",
48163
+ "description": "Inset shadow for recessed elements"
47248
48164
  },
47249
48165
  "shadow-resting-medium": {
47250
48166
  "key": "{shadow.resting.medium}",
@@ -47277,6 +48193,10 @@
47277
48193
  "isSource": true,
47278
48194
  "$type": "shadow"
47279
48195
  }
48196
+ },
48197
+ "org.primer.llm": {
48198
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48199
+ "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."
47280
48200
  }
47281
48201
  },
47282
48202
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47301,6 +48221,7 @@
47301
48221
  }
47302
48222
  ],
47303
48223
  "$type": "shadow",
48224
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47304
48225
  "$extensions": {
47305
48226
  "org.primer.figma": {
47306
48227
  "collection": "mode",
@@ -47330,6 +48251,10 @@
47330
48251
  "isSource": true,
47331
48252
  "$type": "shadow"
47332
48253
  }
48254
+ },
48255
+ "org.primer.llm": {
48256
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48257
+ "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."
47333
48258
  }
47334
48259
  },
47335
48260
  "key": "{shadow.resting.medium}"
@@ -47338,7 +48263,8 @@
47338
48263
  "attributes": {},
47339
48264
  "path": ["shadow", "resting", "medium"],
47340
48265
  "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
47341
- "type": "shadow"
48266
+ "type": "shadow",
48267
+ "description": "Medium resting shadow for cards and elevated surfaces"
47342
48268
  },
47343
48269
  "shadow-resting-small": {
47344
48270
  "key": "{shadow.resting.small}",
@@ -47373,6 +48299,10 @@
47373
48299
  "isSource": true,
47374
48300
  "$type": "shadow"
47375
48301
  }
48302
+ },
48303
+ "org.primer.llm": {
48304
+ "usage": ["button", "interactive-card", "clickable-element"],
48305
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47376
48306
  }
47377
48307
  },
47378
48308
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47399,6 +48329,7 @@
47399
48329
  }
47400
48330
  ],
47401
48331
  "$type": "shadow",
48332
+ "$description": "Small resting shadow for buttons and interactive elements",
47402
48333
  "$extensions": {
47403
48334
  "org.primer.figma": {
47404
48335
  "collection": "mode",
@@ -47430,6 +48361,10 @@
47430
48361
  "isSource": true,
47431
48362
  "$type": "shadow"
47432
48363
  }
48364
+ },
48365
+ "org.primer.llm": {
48366
+ "usage": ["button", "interactive-card", "clickable-element"],
48367
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47433
48368
  }
47434
48369
  },
47435
48370
  "key": "{shadow.resting.small}"
@@ -47438,7 +48373,8 @@
47438
48373
  "attributes": {},
47439
48374
  "path": ["shadow", "resting", "small"],
47440
48375
  "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
47441
- "type": "shadow"
48376
+ "type": "shadow",
48377
+ "description": "Small resting shadow for buttons and interactive elements"
47442
48378
  },
47443
48379
  "shadow-resting-xsmall": {
47444
48380
  "key": "{shadow.resting.xsmall}",
@@ -47462,6 +48398,10 @@
47462
48398
  "isSource": true,
47463
48399
  "$type": "shadow"
47464
48400
  }
48401
+ },
48402
+ "org.primer.llm": {
48403
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48404
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47465
48405
  }
47466
48406
  },
47467
48407
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47477,6 +48417,7 @@
47477
48417
  "inset": false
47478
48418
  },
47479
48419
  "$type": "shadow",
48420
+ "$description": "Extra small resting shadow for minimal elevation",
47480
48421
  "$extensions": {
47481
48422
  "org.primer.figma": {
47482
48423
  "collection": "mode",
@@ -47497,6 +48438,10 @@
47497
48438
  "isSource": true,
47498
48439
  "$type": "shadow"
47499
48440
  }
48441
+ },
48442
+ "org.primer.llm": {
48443
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48444
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47500
48445
  }
47501
48446
  },
47502
48447
  "key": "{shadow.resting.xsmall}"
@@ -47505,7 +48450,8 @@
47505
48450
  "attributes": {},
47506
48451
  "path": ["shadow", "resting", "xsmall"],
47507
48452
  "value": "0px 1px 1px 0px #010409cc",
47508
- "type": "shadow"
48453
+ "type": "shadow",
48454
+ "description": "Extra small resting shadow for minimal elevation"
47509
48455
  },
47510
48456
  "sideNav-bgColor-selected": {
47511
48457
  "key": "{sideNav.bgColor.selected}",