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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
  4. package/dist/build/filters/hasLlmExtensions.js +11 -0
  5. package/dist/build/filters/index.d.ts +1 -0
  6. package/dist/build/filters/index.js +1 -0
  7. package/dist/build/formats/index.d.ts +1 -0
  8. package/dist/build/formats/index.js +1 -0
  9. package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
  10. package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
  11. package/dist/build/platforms/index.d.ts +1 -0
  12. package/dist/build/platforms/index.js +1 -0
  13. package/dist/build/platforms/llmGuidelines.d.ts +2 -0
  14. package/dist/build/platforms/llmGuidelines.js +17 -0
  15. package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
  16. package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
  17. package/dist/build/primerStyleDictionary.js +7 -1
  18. package/dist/build/schemas/borderToken.d.ts +22 -2
  19. package/dist/build/schemas/borderToken.js +6 -0
  20. package/dist/build/schemas/colorToken.d.ts +4 -0
  21. package/dist/build/schemas/colorToken.js +2 -0
  22. package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
  23. package/dist/build/schemas/cubicBezierToken.js +10 -2
  24. package/dist/build/schemas/designToken.d.ts +1 -1
  25. package/dist/build/schemas/designToken.js +113 -21
  26. package/dist/build/schemas/dimensionToken.d.ts +14 -3
  27. package/dist/build/schemas/dimensionToken.js +6 -2
  28. package/dist/build/schemas/dimensionValue.d.ts +24 -1
  29. package/dist/build/schemas/dimensionValue.js +20 -1
  30. package/dist/build/schemas/durationToken.d.ts +13 -1
  31. package/dist/build/schemas/durationToken.js +6 -0
  32. package/dist/build/schemas/durationValue.d.ts +11 -1
  33. package/dist/build/schemas/durationValue.js +13 -3
  34. package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
  35. package/dist/build/schemas/fontFamilyToken.js +2 -0
  36. package/dist/build/schemas/fontWeightToken.d.ts +4 -0
  37. package/dist/build/schemas/fontWeightToken.js +2 -0
  38. package/dist/build/schemas/gradientToken.d.ts +4 -0
  39. package/dist/build/schemas/gradientToken.js +2 -0
  40. package/dist/build/schemas/llmExtension.d.ts +9 -0
  41. package/dist/build/schemas/llmExtension.js +11 -0
  42. package/dist/build/schemas/numberToken.d.ts +4 -0
  43. package/dist/build/schemas/numberToken.js +2 -0
  44. package/dist/build/schemas/shadowToken.d.ts +676 -84
  45. package/dist/build/schemas/shadowToken.js +2 -0
  46. package/dist/build/schemas/stringToken.d.ts +6 -0
  47. package/dist/build/schemas/stringToken.js +6 -0
  48. package/dist/build/schemas/transitionToken.d.ts +20 -2
  49. package/dist/build/schemas/transitionToken.js +6 -0
  50. package/dist/build/schemas/typographyToken.d.ts +38 -4
  51. package/dist/build/schemas/typographyToken.js +6 -0
  52. package/dist/build/schemas/validTokenType.d.ts +5 -1
  53. package/dist/build/schemas/validTokenType.js +71 -17
  54. package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
  55. package/dist/build/schemas/viewportRangeToken.js +6 -0
  56. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  57. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  58. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  59. package/dist/build/transformers/dimensionToRem.js +21 -22
  60. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  61. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  62. package/dist/build/transformers/durationToCss.d.ts +2 -1
  63. package/dist/build/transformers/durationToCss.js +18 -11
  64. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  65. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  66. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  67. package/dist/css/base/motion/motion.css +5 -4
  68. package/dist/css/functional/size/border.css +9 -14
  69. package/dist/css/functional/size/radius.css +7 -0
  70. package/dist/css/functional/size/size-coarse.css +3 -3
  71. package/dist/css/functional/size/size-fine.css +3 -3
  72. package/dist/css/functional/size/viewport.css +1 -1
  73. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
  74. package/dist/css/functional/themes/dark-colorblind.css +194 -190
  75. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
  76. package/dist/css/functional/themes/dark-dimmed.css +194 -190
  77. package/dist/css/functional/themes/dark-high-contrast.css +194 -190
  78. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
  79. package/dist/css/functional/themes/dark-tritanopia.css +194 -190
  80. package/dist/css/functional/themes/dark.css +194 -190
  81. package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
  82. package/dist/css/functional/themes/light-colorblind.css +194 -190
  83. package/dist/css/functional/themes/light-high-contrast.css +194 -190
  84. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
  85. package/dist/css/functional/themes/light-tritanopia.css +194 -190
  86. package/dist/css/functional/themes/light.css +194 -190
  87. package/dist/css/functional/typography/typography.css +4 -4
  88. package/dist/css/primitives.css +5 -0
  89. package/dist/docs/base/motion/motion.json +181 -32
  90. package/dist/docs/base/size/size.json +76 -19
  91. package/dist/docs/base/typography/typography.json +24 -6
  92. package/dist/docs/functional/size/border.json +62 -182
  93. package/dist/docs/functional/size/breakpoints.json +24 -6
  94. package/dist/docs/functional/size/radius.json +221 -0
  95. package/dist/docs/functional/size/size-coarse.json +45 -3
  96. package/dist/docs/functional/size/size-fine.json +45 -3
  97. package/dist/docs/functional/size/size.json +60 -15
  98. package/dist/docs/functional/size/viewport.json +2 -2
  99. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
  100. package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
  101. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
  102. package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
  103. package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
  104. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
  105. package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
  106. package/dist/docs/functional/themes/dark.json +1043 -97
  107. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
  108. package/dist/docs/functional/themes/light-colorblind.json +1049 -103
  109. package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
  110. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
  111. package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
  112. package/dist/docs/functional/themes/light.json +1049 -103
  113. package/dist/docs/functional/typography/typography.json +180 -10
  114. package/dist/fallbacks/base/motion/motion.json +49 -12
  115. package/dist/fallbacks/functional/size/border.json +0 -5
  116. package/dist/fallbacks/functional/size/radius.json +7 -0
  117. package/dist/fallbacks/functional/size/viewport.json +1 -1
  118. package/dist/figma/dimension/dimension.json +30 -20
  119. package/dist/figma/themes/dark-colorblind.json +85 -0
  120. package/dist/figma/themes/dark-dimmed.json +134 -49
  121. package/dist/figma/themes/dark-high-contrast.json +85 -0
  122. package/dist/figma/themes/dark-tritanopia.json +85 -0
  123. package/dist/figma/themes/dark.json +85 -0
  124. package/dist/figma/themes/light-colorblind.json +89 -4
  125. package/dist/figma/themes/light-high-contrast.json +89 -4
  126. package/dist/figma/themes/light-tritanopia.json +89 -4
  127. package/dist/figma/themes/light.json +89 -4
  128. package/dist/figma/typography/typography.json +44 -40
  129. package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
  130. package/dist/internalCss/dark-colorblind.css +208 -218
  131. package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
  132. package/dist/internalCss/dark-dimmed.css +208 -218
  133. package/dist/internalCss/dark-high-contrast.css +208 -218
  134. package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
  135. package/dist/internalCss/dark-tritanopia.css +208 -218
  136. package/dist/internalCss/dark.css +208 -218
  137. package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
  138. package/dist/internalCss/light-colorblind.css +208 -218
  139. package/dist/internalCss/light-high-contrast.css +208 -218
  140. package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
  141. package/dist/internalCss/light-tritanopia.css +208 -218
  142. package/dist/internalCss/light.css +208 -218
  143. package/dist/styleLint/base/motion/motion.json +181 -32
  144. package/dist/styleLint/base/size/size.json +76 -19
  145. package/dist/styleLint/base/typography/typography.json +30 -12
  146. package/dist/styleLint/functional/size/border.json +55 -175
  147. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  148. package/dist/styleLint/functional/size/radius.json +221 -0
  149. package/dist/styleLint/functional/size/size-coarse.json +45 -3
  150. package/dist/styleLint/functional/size/size-fine.json +45 -3
  151. package/dist/styleLint/functional/size/size.json +111 -66
  152. package/dist/styleLint/functional/size/viewport.json +2 -2
  153. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
  154. package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
  155. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
  156. package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
  157. package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
  158. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
  159. package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
  160. package/dist/styleLint/functional/themes/dark.json +975 -29
  161. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
  162. package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
  163. package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
  164. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
  165. package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
  166. package/dist/styleLint/functional/themes/light.json +981 -35
  167. package/dist/styleLint/functional/typography/typography.json +196 -26
  168. package/package.json +6 -3
  169. package/src/tokens/base/motion/easing.json5 +39 -4
  170. package/src/tokens/base/motion/timing.json5 +12 -12
  171. package/src/tokens/base/size/size.json5 +19 -19
  172. package/src/tokens/base/typography/typography.json5 +6 -6
  173. package/src/tokens/functional/border/border.json5 +25 -0
  174. package/src/tokens/functional/color/bgColor.json5 +165 -0
  175. package/src/tokens/functional/color/borderColor.json5 +146 -0
  176. package/src/tokens/functional/color/control.json5 +24 -0
  177. package/src/tokens/functional/color/data-vis.json5 +7 -0
  178. package/src/tokens/functional/color/display.json5 +7 -0
  179. package/src/tokens/functional/color/fgColor.json5 +101 -1
  180. package/src/tokens/functional/color/focus.json5 +5 -0
  181. package/src/tokens/functional/color/selection.json5 +5 -0
  182. package/src/tokens/functional/color/syntax.json5 +14 -0
  183. package/src/tokens/functional/shadow/shadow.json5 +49 -4
  184. package/src/tokens/functional/size/border.json5 +22 -74
  185. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  186. package/src/tokens/functional/size/radius.json5 +90 -0
  187. package/src/tokens/functional/size/size-coarse.json5 +24 -3
  188. package/src/tokens/functional/size/size-fine.json5 +45 -24
  189. package/src/tokens/functional/size/size.json5 +50 -15
  190. package/src/tokens/functional/size/viewport.json5 +1 -1
  191. package/src/tokens/functional/typography/font-stack.json5 +60 -0
  192. package/src/tokens/functional/typography/typography.json5 +71 -44
  193. package/dist/build/parsers/index.d.ts +0 -1
  194. package/dist/build/parsers/index.js +0 -1
  195. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  196. package/dist/build/parsers/w3cJsonParser.js +0 -25
  197. package/dist/removed/testing.json5 +0 -4
  198. package/src/tokens/removed/testing.json5 +0 -4
@@ -310,6 +310,10 @@
310
310
  "dark-dimmed-high-contrast": "#2672f3",
311
311
  "dark-tritanopia-high-contrast": "#194fb1",
312
312
  "dark-protanopia-deuteranopia-high-contrast": "#194fb1"
313
+ },
314
+ "org.primer.llm": {
315
+ "usage": ["active-states", "current", "selected", "active-toggle"],
316
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
313
317
  }
314
318
  },
315
319
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -317,6 +321,7 @@
317
321
  "original": {
318
322
  "$value": "{base.color.blue.9}",
319
323
  "$type": "color",
324
+ "$description": "Strong accent background for active states and focused states",
320
325
  "$extensions": {
321
326
  "org.primer.figma": {
322
327
  "collection": "mode",
@@ -332,6 +337,10 @@
332
337
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
333
338
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
334
339
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
340
+ },
341
+ "org.primer.llm": {
342
+ "usage": ["active-states", "current", "selected", "active-toggle"],
343
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
335
344
  }
336
345
  },
337
346
  "key": "{bgColor.accent.emphasis}"
@@ -340,7 +349,8 @@
340
349
  "attributes": {},
341
350
  "path": ["bgColor", "accent", "emphasis"],
342
351
  "value": "#194fb1",
343
- "type": "color"
352
+ "type": "color",
353
+ "description": "Strong accent background for active states and focused states"
344
354
  },
345
355
  "bgColor-accent-muted": {
346
356
  "key": "{bgColor.accent.muted}",
@@ -361,6 +371,10 @@
361
371
  "isSource": true,
362
372
  "$type": "color"
363
373
  }
374
+ },
375
+ "org.primer.llm": {
376
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
377
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
364
378
  }
365
379
  },
366
380
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -369,6 +383,7 @@
369
383
  "original": {
370
384
  "$value": "{base.color.blue.4}",
371
385
  "$type": "color",
386
+ "$description": "Subtle accent background for informational or selected elements",
372
387
  "$extensions": {
373
388
  "org.primer.figma": {
374
389
  "collection": "mode",
@@ -386,6 +401,10 @@
386
401
  "isSource": true,
387
402
  "$type": "color"
388
403
  }
404
+ },
405
+ "org.primer.llm": {
406
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
407
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
389
408
  }
390
409
  },
391
410
  "alpha": 0.1,
@@ -395,7 +414,8 @@
395
414
  "attributes": {},
396
415
  "path": ["bgColor", "accent", "muted"],
397
416
  "value": "#5cacff1a",
398
- "type": "color"
417
+ "type": "color",
418
+ "description": "Subtle accent background for informational or selected elements"
399
419
  },
400
420
  "bgColor-attention-emphasis": {
401
421
  "key": "{bgColor.attention.emphasis}",
@@ -413,6 +433,10 @@
413
433
  "dark-dimmed-high-contrast": "#ae7104",
414
434
  "dark-protanopia-deuteranopia-high-contrast": "#7b4900",
415
435
  "dark-tritanopia-high-contrast": "#7b4900"
436
+ },
437
+ "org.primer.llm": {
438
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
439
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
416
440
  }
417
441
  },
418
442
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -420,6 +444,7 @@
420
444
  "original": {
421
445
  "$value": "{base.color.yellow.9}",
422
446
  "$type": "color",
447
+ "$description": "Strong attention background for prominent warnings",
423
448
  "$extensions": {
424
449
  "org.primer.figma": {
425
450
  "collection": "mode",
@@ -434,6 +459,10 @@
434
459
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
435
460
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
436
461
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
462
+ },
463
+ "org.primer.llm": {
464
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
465
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
437
466
  }
438
467
  },
439
468
  "key": "{bgColor.attention.emphasis}"
@@ -442,7 +471,8 @@
442
471
  "attributes": {},
443
472
  "path": ["bgColor", "attention", "emphasis"],
444
473
  "value": "#7b4900",
445
- "type": "color"
474
+ "type": "color",
475
+ "description": "Strong attention background for prominent warnings"
446
476
  },
447
477
  "bgColor-attention-muted": {
448
478
  "key": "{bgColor.attention.muted}",
@@ -463,6 +493,10 @@
463
493
  "isSource": true,
464
494
  "$type": "color"
465
495
  }
496
+ },
497
+ "org.primer.llm": {
498
+ "usage": ["warning-banner", "caution-message", "pending-state"],
499
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
466
500
  }
467
501
  },
468
502
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -471,6 +505,7 @@
471
505
  "original": {
472
506
  "$value": "{base.color.yellow.4}",
473
507
  "$type": "color",
508
+ "$description": "Subtle attention background for warnings and caution states",
474
509
  "$extensions": {
475
510
  "org.primer.figma": {
476
511
  "collection": "mode",
@@ -488,6 +523,10 @@
488
523
  "isSource": true,
489
524
  "$type": "color"
490
525
  }
526
+ },
527
+ "org.primer.llm": {
528
+ "usage": ["warning-banner", "caution-message", "pending-state"],
529
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
491
530
  }
492
531
  },
493
532
  "alpha": 0.15,
@@ -497,7 +536,8 @@
497
536
  "attributes": {},
498
537
  "path": ["bgColor", "attention", "muted"],
499
538
  "value": "#edaa2726",
500
- "type": "color"
539
+ "type": "color",
540
+ "description": "Subtle attention background for warnings and caution states"
501
541
  },
502
542
  "bgColor-black": {
503
543
  "key": "{bgColor.black}",
@@ -509,6 +549,10 @@
509
549
  },
510
550
  "org.primer.overrides": {
511
551
  "dark": "#010409"
552
+ },
553
+ "org.primer.llm": {
554
+ "doNotUse": true,
555
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
512
556
  }
513
557
  },
514
558
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -516,6 +560,7 @@
516
560
  "original": {
517
561
  "$value": "{base.color.neutral.0}",
518
562
  "$type": "color",
563
+ "$description": "Pure black background",
519
564
  "$extensions": {
520
565
  "org.primer.figma": {
521
566
  "collection": "mode",
@@ -524,6 +569,10 @@
524
569
  },
525
570
  "org.primer.overrides": {
526
571
  "dark": "{base.color.neutral.0}"
572
+ },
573
+ "org.primer.llm": {
574
+ "doNotUse": true,
575
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
527
576
  }
528
577
  },
529
578
  "key": "{bgColor.black}"
@@ -532,7 +581,8 @@
532
581
  "attributes": {},
533
582
  "path": ["bgColor", "black"],
534
583
  "value": "#010409",
535
- "type": "color"
584
+ "type": "color",
585
+ "description": "Pure black background"
536
586
  },
537
587
  "bgColor-closed-emphasis": {
538
588
  "key": "{bgColor.closed.emphasis}",
@@ -554,6 +604,10 @@
554
604
  "light-protanopia-deuteranopia-high-contrast": "#3d444d",
555
605
  "dark-protanopia-deuteranopia": "#3d444d",
556
606
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
607
+ },
608
+ "org.primer.llm": {
609
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
610
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
557
611
  }
558
612
  },
559
613
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -561,6 +615,7 @@
561
615
  "original": {
562
616
  "$value": "{bgColor.danger.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": "#ad0116",
590
- "type": "color"
649
+ "type": "color",
650
+ "description": "Strong background for closed state badges and labels"
591
651
  },
592
652
  "bgColor-closed-muted": {
593
653
  "key": "{bgColor.closed.muted}",
@@ -626,6 +686,10 @@
626
686
  "isSource": true,
627
687
  "$type": "color"
628
688
  }
689
+ },
690
+ "org.primer.llm": {
691
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
692
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
629
693
  }
630
694
  },
631
695
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -633,6 +697,7 @@
633
697
  "original": {
634
698
  "$value": "{bgColor.danger.muted}",
635
699
  "$type": "color",
700
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
636
701
  "$extensions": {
637
702
  "org.primer.figma": {
638
703
  "collection": "mode",
@@ -668,6 +733,10 @@
668
733
  "isSource": true,
669
734
  "$type": "color"
670
735
  }
736
+ },
737
+ "org.primer.llm": {
738
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
739
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
671
740
  }
672
741
  },
673
742
  "key": "{bgColor.closed.muted}"
@@ -676,7 +745,8 @@
676
745
  "attributes": {},
677
746
  "path": ["bgColor", "closed", "muted"],
678
747
  "value": "#ff80801a",
679
- "type": "color"
748
+ "type": "color",
749
+ "description": "Subtle background for closed state indicators (issues, PRs)"
680
750
  },
681
751
  "bgColor-danger-emphasis": {
682
752
  "key": "{bgColor.danger.emphasis}",
@@ -697,6 +767,10 @@
697
767
  "dark-high-contrast": "#ad0116",
698
768
  "dark-dimmed-high-contrast": "#e82a2f",
699
769
  "dark-tritanopia-high-contrast": "#ad0116"
770
+ },
771
+ "org.primer.llm": {
772
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
773
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
700
774
  }
701
775
  },
702
776
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -704,6 +778,7 @@
704
778
  "original": {
705
779
  "$value": "{base.color.red.9}",
706
780
  "$type": "color",
781
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
707
782
  "$extensions": {
708
783
  "org.primer.figma": {
709
784
  "collection": "mode",
@@ -721,6 +796,10 @@
721
796
  "dark-high-contrast": "{base.color.red.9}",
722
797
  "dark-dimmed-high-contrast": "{base.color.red.7}",
723
798
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
799
+ },
800
+ "org.primer.llm": {
801
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
802
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
724
803
  }
725
804
  },
726
805
  "key": "{bgColor.danger.emphasis}"
@@ -729,7 +808,8 @@
729
808
  "attributes": {},
730
809
  "path": ["bgColor", "danger", "emphasis"],
731
810
  "value": "#ad0116",
732
- "type": "color"
811
+ "type": "color",
812
+ "description": "Emphasized danger background for critical errors and delete confirmations"
733
813
  },
734
814
  "bgColor-danger-muted": {
735
815
  "key": "{bgColor.danger.muted}",
@@ -759,6 +839,10 @@
759
839
  "isSource": true,
760
840
  "$type": "color"
761
841
  }
842
+ },
843
+ "org.primer.llm": {
844
+ "usage": ["error-message", "destructive-action", "validation-error"],
845
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
762
846
  }
763
847
  },
764
848
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -767,6 +851,7 @@
767
851
  "original": {
768
852
  "$value": "{base.color.red.4}",
769
853
  "$type": "color",
854
+ "$description": "Muted danger background for error states and destructive action contexts",
770
855
  "$extensions": {
771
856
  "org.primer.figma": {
772
857
  "collection": "mode",
@@ -793,6 +878,10 @@
793
878
  "isSource": true,
794
879
  "$type": "color"
795
880
  }
881
+ },
882
+ "org.primer.llm": {
883
+ "usage": ["error-message", "destructive-action", "validation-error"],
884
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
796
885
  }
797
886
  },
798
887
  "alpha": 0.1,
@@ -802,7 +891,8 @@
802
891
  "attributes": {},
803
892
  "path": ["bgColor", "danger", "muted"],
804
893
  "value": "#ff80801a",
805
- "type": "color"
894
+ "type": "color",
895
+ "description": "Muted danger background for error states and destructive action contexts"
806
896
  },
807
897
  "bgColor-default": {
808
898
  "key": "{bgColor.default}",
@@ -822,6 +912,10 @@
822
912
  "dark-high-contrast": "#010409",
823
913
  "dark-tritanopia-high-contrast": "#010409",
824
914
  "dark-protanopia-deuteranopia-high-contrast": "#010409"
915
+ },
916
+ "org.primer.llm": {
917
+ "usage": ["page-background", "main-content", "card-background"],
918
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
825
919
  }
826
920
  },
827
921
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -829,6 +923,7 @@
829
923
  "original": {
830
924
  "$value": "{base.color.neutral.0}",
831
925
  "$type": "color",
926
+ "$description": "Default background color for pages and main content areas",
832
927
  "$extensions": {
833
928
  "org.primer.figma": {
834
929
  "collection": "mode",
@@ -845,6 +940,10 @@
845
940
  "dark-high-contrast": "{base.color.neutral.0}",
846
941
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
847
942
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
943
+ },
944
+ "org.primer.llm": {
945
+ "usage": ["page-background", "main-content", "card-background"],
946
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
848
947
  }
849
948
  },
850
949
  "key": "{bgColor.default}"
@@ -853,7 +952,8 @@
853
952
  "attributes": {},
854
953
  "path": ["bgColor", "default"],
855
954
  "value": "#010409",
856
- "type": "color"
955
+ "type": "color",
956
+ "description": "Default background color for pages and main content areas"
857
957
  },
858
958
  "bgColor-disabled": {
859
959
  "key": "{bgColor.disabled}",
@@ -873,6 +973,10 @@
873
973
  "dark-high-contrast": "#262c36",
874
974
  "dark-tritanopia-high-contrast": "#262c36",
875
975
  "dark-protanopia-deuteranopia-high-contrast": "#262c36"
976
+ },
977
+ "org.primer.llm": {
978
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
979
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
876
980
  }
877
981
  },
878
982
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -880,6 +984,7 @@
880
984
  "original": {
881
985
  "$value": "{base.color.neutral.4}",
882
986
  "$type": "color",
987
+ "$description": "Background for disabled interactive elements",
883
988
  "$extensions": {
884
989
  "org.primer.figma": {
885
990
  "collection": "mode",
@@ -896,6 +1001,10 @@
896
1001
  "dark-high-contrast": "{base.color.neutral.4}",
897
1002
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
898
1003
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
1004
+ },
1005
+ "org.primer.llm": {
1006
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
1007
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
899
1008
  }
900
1009
  },
901
1010
  "key": "{bgColor.disabled}"
@@ -904,7 +1013,8 @@
904
1013
  "attributes": {},
905
1014
  "path": ["bgColor", "disabled"],
906
1015
  "value": "#262c36",
907
- "type": "color"
1016
+ "type": "color",
1017
+ "description": "Background for disabled interactive elements"
908
1018
  },
909
1019
  "bgColor-done-emphasis": {
910
1020
  "key": "{bgColor.done.emphasis}",
@@ -922,6 +1032,10 @@
922
1032
  "dark-dimmed-high-contrast": "#954ffd",
923
1033
  "dark-tritanopia-high-contrast": "#6921d7",
924
1034
  "dark-protanopia-deuteranopia-high-contrast": "#6921d7"
1035
+ },
1036
+ "org.primer.llm": {
1037
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1038
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
925
1039
  }
926
1040
  },
927
1041
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -929,6 +1043,7 @@
929
1043
  "original": {
930
1044
  "$value": "{base.color.purple.9}",
931
1045
  "$type": "color",
1046
+ "$description": "Strong background for completed/done state badges and labels",
932
1047
  "$extensions": {
933
1048
  "org.primer.figma": {
934
1049
  "collection": "mode",
@@ -943,6 +1058,10 @@
943
1058
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
944
1059
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
945
1060
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1061
+ },
1062
+ "org.primer.llm": {
1063
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1064
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
946
1065
  }
947
1066
  },
948
1067
  "key": "{bgColor.done.emphasis}"
@@ -951,7 +1070,8 @@
951
1070
  "attributes": {},
952
1071
  "path": ["bgColor", "done", "emphasis"],
953
1072
  "value": "#6921d7",
954
- "type": "color"
1073
+ "type": "color",
1074
+ "description": "Strong background for completed/done state badges and labels"
955
1075
  },
956
1076
  "bgColor-done-muted": {
957
1077
  "key": "{bgColor.done.muted}",
@@ -972,6 +1092,10 @@
972
1092
  "isSource": true,
973
1093
  "$type": "color"
974
1094
  }
1095
+ },
1096
+ "org.primer.llm": {
1097
+ "usage": ["completed-task", "merged-pr", "done-state"],
1098
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
975
1099
  }
976
1100
  },
977
1101
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -980,6 +1104,7 @@
980
1104
  "original": {
981
1105
  "$value": "{base.color.purple.4}",
982
1106
  "$type": "color",
1107
+ "$description": "Subtle background for completed/done state indicators",
983
1108
  "$extensions": {
984
1109
  "org.primer.figma": {
985
1110
  "collection": "mode",
@@ -997,6 +1122,10 @@
997
1122
  "isSource": true,
998
1123
  "$type": "color"
999
1124
  }
1125
+ },
1126
+ "org.primer.llm": {
1127
+ "usage": ["completed-task", "merged-pr", "done-state"],
1128
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
1000
1129
  }
1001
1130
  },
1002
1131
  "alpha": 0.15,
@@ -1006,7 +1135,8 @@
1006
1135
  "attributes": {},
1007
1136
  "path": ["bgColor", "done", "muted"],
1008
1137
  "value": "#bf8fff26",
1009
- "type": "color"
1138
+ "type": "color",
1139
+ "description": "Subtle background for completed/done state indicators"
1010
1140
  },
1011
1141
  "bgColor-draft-emphasis": {
1012
1142
  "key": "{bgColor.draft.emphasis}",
@@ -1018,6 +1148,10 @@
1018
1148
  "codeSyntax": {
1019
1149
  "web": "var(--bgColor-draft-emphasis)"
1020
1150
  }
1151
+ },
1152
+ "org.primer.llm": {
1153
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1154
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1021
1155
  }
1022
1156
  },
1023
1157
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1025,6 +1159,7 @@
1025
1159
  "original": {
1026
1160
  "$value": "{bgColor.neutral.emphasis}",
1027
1161
  "$type": "color",
1162
+ "$description": "Strong background for draft state badges and labels",
1028
1163
  "$extensions": {
1029
1164
  "org.primer.figma": {
1030
1165
  "collection": "mode",
@@ -1033,6 +1168,10 @@
1033
1168
  "codeSyntax": {
1034
1169
  "web": "var(--bgColor-draft-emphasis)"
1035
1170
  }
1171
+ },
1172
+ "org.primer.llm": {
1173
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1174
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1036
1175
  }
1037
1176
  },
1038
1177
  "key": "{bgColor.draft.emphasis}"
@@ -1041,7 +1180,8 @@
1041
1180
  "attributes": {},
1042
1181
  "path": ["bgColor", "draft", "emphasis"],
1043
1182
  "value": "#3d444d",
1044
- "type": "color"
1183
+ "type": "color",
1184
+ "description": "Strong background for draft state badges and labels"
1045
1185
  },
1046
1186
  "bgColor-draft-muted": {
1047
1187
  "key": "{bgColor.draft.muted}",
@@ -1080,6 +1220,10 @@
1080
1220
  "isSource": true,
1081
1221
  "$type": "color"
1082
1222
  }
1223
+ },
1224
+ "org.primer.llm": {
1225
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1226
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1083
1227
  }
1084
1228
  },
1085
1229
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1087,6 +1231,7 @@
1087
1231
  "original": {
1088
1232
  "$value": "{bgColor.neutral.muted}",
1089
1233
  "$type": "color",
1234
+ "$description": "Subtle background for draft state indicators",
1090
1235
  "$extensions": {
1091
1236
  "org.primer.figma": {
1092
1237
  "collection": "mode",
@@ -1122,6 +1267,10 @@
1122
1267
  "isSource": true,
1123
1268
  "$type": "color"
1124
1269
  }
1270
+ },
1271
+ "org.primer.llm": {
1272
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1273
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1125
1274
  }
1126
1275
  },
1127
1276
  "key": "{bgColor.draft.muted}"
@@ -1130,7 +1279,8 @@
1130
1279
  "attributes": {},
1131
1280
  "path": ["bgColor", "draft", "muted"],
1132
1281
  "value": "#212830",
1133
- "type": "color"
1282
+ "type": "color",
1283
+ "description": "Subtle background for draft state indicators"
1134
1284
  },
1135
1285
  "bgColor-emphasis": {
1136
1286
  "key": "{bgColor.emphasis}",
@@ -1145,6 +1295,10 @@
1145
1295
  },
1146
1296
  "org.primer.overrides": {
1147
1297
  "dark": "#3d444d"
1298
+ },
1299
+ "org.primer.llm": {
1300
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1301
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1148
1302
  }
1149
1303
  },
1150
1304
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1152,6 +1306,7 @@
1152
1306
  "original": {
1153
1307
  "$value": "{base.color.neutral.7}",
1154
1308
  "$type": "color",
1309
+ "$description": "High-emphasis dark background for strong visual contrast",
1155
1310
  "$extensions": {
1156
1311
  "org.primer.figma": {
1157
1312
  "collection": "mode",
@@ -1163,6 +1318,10 @@
1163
1318
  },
1164
1319
  "org.primer.overrides": {
1165
1320
  "dark": "{base.color.neutral.7}"
1321
+ },
1322
+ "org.primer.llm": {
1323
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1324
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1166
1325
  }
1167
1326
  },
1168
1327
  "key": "{bgColor.emphasis}"
@@ -1171,7 +1330,8 @@
1171
1330
  "attributes": {},
1172
1331
  "path": ["bgColor", "emphasis"],
1173
1332
  "value": "#3d444d",
1174
- "type": "color"
1333
+ "type": "color",
1334
+ "description": "High-emphasis dark background for strong visual contrast"
1175
1335
  },
1176
1336
  "bgColor-inset": {
1177
1337
  "key": "{bgColor.inset}",
@@ -1191,6 +1351,10 @@
1191
1351
  "light-high-contrast": "#151b23",
1192
1352
  "light-tritanopia-high-contrast": "#151b23",
1193
1353
  "light-protanopia-deuteranopia-high-contrast": "#151b23"
1354
+ },
1355
+ "org.primer.llm": {
1356
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1357
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1194
1358
  }
1195
1359
  },
1196
1360
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1198,6 +1362,7 @@
1198
1362
  "original": {
1199
1363
  "$value": "{base.color.neutral.0}",
1200
1364
  "$type": "color",
1365
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1201
1366
  "$extensions": {
1202
1367
  "org.primer.figma": {
1203
1368
  "collection": "mode",
@@ -1214,6 +1379,10 @@
1214
1379
  "light-high-contrast": "{base.color.neutral.2}",
1215
1380
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1216
1381
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1382
+ },
1383
+ "org.primer.llm": {
1384
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1385
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1217
1386
  }
1218
1387
  },
1219
1388
  "key": "{bgColor.inset}"
@@ -1222,7 +1391,8 @@
1222
1391
  "attributes": {},
1223
1392
  "path": ["bgColor", "inset"],
1224
1393
  "value": "#010409",
1225
- "type": "color"
1394
+ "type": "color",
1395
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1226
1396
  },
1227
1397
  "bgColor-inverse": {
1228
1398
  "key": "{bgColor.inverse}",
@@ -1234,6 +1404,10 @@
1234
1404
  },
1235
1405
  "org.primer.overrides": {
1236
1406
  "dark": "#ffffff"
1407
+ },
1408
+ "org.primer.llm": {
1409
+ "usage": ["overlay-content", "inverse-theme-element"],
1410
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1237
1411
  }
1238
1412
  },
1239
1413
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1241,6 +1415,7 @@
1241
1415
  "original": {
1242
1416
  "$value": "{base.color.neutral.13}",
1243
1417
  "$type": "color",
1418
+ "$description": "Inverse background that flips between light and dark modes",
1244
1419
  "$extensions": {
1245
1420
  "org.primer.figma": {
1246
1421
  "collection": "mode",
@@ -1249,6 +1424,10 @@
1249
1424
  },
1250
1425
  "org.primer.overrides": {
1251
1426
  "dark": "{base.color.neutral.13}"
1427
+ },
1428
+ "org.primer.llm": {
1429
+ "usage": ["overlay-content", "inverse-theme-element"],
1430
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1252
1431
  }
1253
1432
  },
1254
1433
  "key": "{bgColor.inverse}"
@@ -1257,7 +1436,8 @@
1257
1436
  "attributes": {},
1258
1437
  "path": ["bgColor", "inverse"],
1259
1438
  "value": "#ffffff",
1260
- "type": "color"
1439
+ "type": "color",
1440
+ "description": "Inverse background that flips between light and dark modes"
1261
1441
  },
1262
1442
  "bgColor-muted": {
1263
1443
  "key": "{bgColor.muted}",
@@ -1280,6 +1460,10 @@
1280
1460
  "dark-high-contrast": "#151b23",
1281
1461
  "dark-tritanopia-high-contrast": "#151b23",
1282
1462
  "dark-protanopia-deuteranopia-high-contrast": "#151b23"
1463
+ },
1464
+ "org.primer.llm": {
1465
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1466
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1283
1467
  }
1284
1468
  },
1285
1469
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1287,6 +1471,7 @@
1287
1471
  "original": {
1288
1472
  "$value": "{base.color.neutral.2}",
1289
1473
  "$type": "color",
1474
+ "$description": "Muted background for secondary content areas and subtle grouping",
1290
1475
  "$extensions": {
1291
1476
  "org.primer.figma": {
1292
1477
  "collection": "mode",
@@ -1306,6 +1491,10 @@
1306
1491
  "dark-high-contrast": "{base.color.neutral.2}",
1307
1492
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1308
1493
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1494
+ },
1495
+ "org.primer.llm": {
1496
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1497
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1309
1498
  }
1310
1499
  },
1311
1500
  "key": "{bgColor.muted}"
@@ -1314,7 +1503,8 @@
1314
1503
  "attributes": {},
1315
1504
  "path": ["bgColor", "muted"],
1316
1505
  "value": "#151b23",
1317
- "type": "color"
1506
+ "type": "color",
1507
+ "description": "Muted background for secondary content areas and subtle grouping"
1318
1508
  },
1319
1509
  "bgColor-neutral-emphasis": {
1320
1510
  "key": "{bgColor.neutral.emphasis}",
@@ -1334,6 +1524,10 @@
1334
1524
  "dark-high-contrast": "#3d444d",
1335
1525
  "dark-tritanopia-high-contrast": "#3d444d",
1336
1526
  "dark-protanopia-deuteranopia-high-contrast": "#3d444d"
1527
+ },
1528
+ "org.primer.llm": {
1529
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1530
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1337
1531
  }
1338
1532
  },
1339
1533
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1341,6 +1535,7 @@
1341
1535
  "original": {
1342
1536
  "$value": "{base.color.neutral.7}",
1343
1537
  "$type": "color",
1538
+ "$description": "Strong neutral background for prominent neutral elements",
1344
1539
  "$extensions": {
1345
1540
  "org.primer.figma": {
1346
1541
  "collection": "mode",
@@ -1357,6 +1552,10 @@
1357
1552
  "dark-high-contrast": "{base.color.neutral.7}",
1358
1553
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1359
1554
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1555
+ },
1556
+ "org.primer.llm": {
1557
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1558
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1360
1559
  }
1361
1560
  },
1362
1561
  "key": "{bgColor.neutral.emphasis}"
@@ -1365,7 +1564,8 @@
1365
1564
  "attributes": {},
1366
1565
  "path": ["bgColor", "neutral", "emphasis"],
1367
1566
  "value": "#3d444d",
1368
- "type": "color"
1567
+ "type": "color",
1568
+ "description": "Strong neutral background for prominent neutral elements"
1369
1569
  },
1370
1570
  "bgColor-neutral-muted": {
1371
1571
  "key": "{bgColor.neutral.muted}",
@@ -1396,6 +1596,10 @@
1396
1596
  "dark-high-contrast": "#212830",
1397
1597
  "dark-tritanopia-high-contrast": "#212830",
1398
1598
  "dark-protanopia-deuteranopia-high-contrast": "#212830"
1599
+ },
1600
+ "org.primer.llm": {
1601
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1602
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1399
1603
  }
1400
1604
  },
1401
1605
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1403,6 +1607,7 @@
1403
1607
  "original": {
1404
1608
  "$value": "{base.color.neutral.3}",
1405
1609
  "$type": "color",
1610
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1406
1611
  "$extensions": {
1407
1612
  "org.primer.figma": {
1408
1613
  "collection": "mode",
@@ -1430,6 +1635,10 @@
1430
1635
  "dark-high-contrast": "{base.color.neutral.3}",
1431
1636
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1432
1637
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1638
+ },
1639
+ "org.primer.llm": {
1640
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1641
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1433
1642
  }
1434
1643
  },
1435
1644
  "key": "{bgColor.neutral.muted}"
@@ -1438,7 +1647,8 @@
1438
1647
  "attributes": {},
1439
1648
  "path": ["bgColor", "neutral", "muted"],
1440
1649
  "value": "#212830",
1441
- "type": "color"
1650
+ "type": "color",
1651
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1442
1652
  },
1443
1653
  "bgColor-open-emphasis": {
1444
1654
  "key": "{bgColor.open.emphasis}",
@@ -1460,6 +1670,10 @@
1460
1670
  "light-protanopia-deuteranopia-high-contrast": "#e7811d",
1461
1671
  "dark-protanopia-deuteranopia": "#e7811d",
1462
1672
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1673
+ },
1674
+ "org.primer.llm": {
1675
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1676
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1463
1677
  }
1464
1678
  },
1465
1679
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1467,6 +1681,7 @@
1467
1681
  "original": {
1468
1682
  "$value": "{bgColor.success.emphasis}",
1469
1683
  "$type": "color",
1684
+ "$description": "Strong background for open state badges and labels",
1470
1685
  "$extensions": {
1471
1686
  "org.primer.figma": {
1472
1687
  "collection": "mode",
@@ -1485,6 +1700,10 @@
1485
1700
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1486
1701
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1487
1702
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1703
+ },
1704
+ "org.primer.llm": {
1705
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1706
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1488
1707
  }
1489
1708
  },
1490
1709
  "key": "{bgColor.open.emphasis}"
@@ -1493,7 +1712,8 @@
1493
1712
  "attributes": {},
1494
1713
  "path": ["bgColor", "open", "emphasis"],
1495
1714
  "value": "#006222",
1496
- "type": "color"
1715
+ "type": "color",
1716
+ "description": "Strong background for open state badges and labels"
1497
1717
  },
1498
1718
  "bgColor-open-muted": {
1499
1719
  "key": "{bgColor.open.muted}",
@@ -1539,6 +1759,10 @@
1539
1759
  "isSource": true,
1540
1760
  "$type": "color"
1541
1761
  }
1762
+ },
1763
+ "org.primer.llm": {
1764
+ "usage": ["open-issue", "open-pr", "active-status"],
1765
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1542
1766
  }
1543
1767
  },
1544
1768
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1546,6 +1770,7 @@
1546
1770
  "original": {
1547
1771
  "$value": "{bgColor.success.muted}",
1548
1772
  "$type": "color",
1773
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1549
1774
  "$extensions": {
1550
1775
  "org.primer.figma": {
1551
1776
  "collection": "mode",
@@ -1588,6 +1813,10 @@
1588
1813
  "isSource": true,
1589
1814
  "$type": "color"
1590
1815
  }
1816
+ },
1817
+ "org.primer.llm": {
1818
+ "usage": ["open-issue", "open-pr", "active-status"],
1819
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1591
1820
  }
1592
1821
  },
1593
1822
  "key": "{bgColor.open.muted}"
@@ -1596,7 +1825,8 @@
1596
1825
  "attributes": {},
1597
1826
  "path": ["bgColor", "open", "muted"],
1598
1827
  "value": "#0ac74026",
1599
- "type": "color"
1828
+ "type": "color",
1829
+ "description": "Subtle background for open state indicators (issues, PRs)"
1600
1830
  },
1601
1831
  "bgColor-severe-emphasis": {
1602
1832
  "key": "{bgColor.severe.emphasis}",
@@ -1617,6 +1847,10 @@
1617
1847
  "dark-high-contrast": "#8f3c00",
1618
1848
  "dark-dimmed-high-contrast": "#bf5e0a",
1619
1849
  "dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
1850
+ },
1851
+ "org.primer.llm": {
1852
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1853
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1620
1854
  }
1621
1855
  },
1622
1856
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1624,6 +1858,7 @@
1624
1858
  "original": {
1625
1859
  "$value": "{base.color.orange.9}",
1626
1860
  "$type": "color",
1861
+ "$description": "Strong severe background for prominent high-priority warnings",
1627
1862
  "$extensions": {
1628
1863
  "org.primer.figma": {
1629
1864
  "collection": "mode",
@@ -1641,6 +1876,10 @@
1641
1876
  "dark-high-contrast": "{base.color.orange.9}",
1642
1877
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1643
1878
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1879
+ },
1880
+ "org.primer.llm": {
1881
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1882
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1644
1883
  }
1645
1884
  },
1646
1885
  "key": "{bgColor.severe.emphasis}"
@@ -1649,7 +1888,8 @@
1649
1888
  "attributes": {},
1650
1889
  "path": ["bgColor", "severe", "emphasis"],
1651
1890
  "value": "#8f3c00",
1652
- "type": "color"
1891
+ "type": "color",
1892
+ "description": "Strong severe background for prominent high-priority warnings"
1653
1893
  },
1654
1894
  "bgColor-severe-muted": {
1655
1895
  "key": "{bgColor.severe.muted}",
@@ -1679,6 +1919,10 @@
1679
1919
  "isSource": true,
1680
1920
  "$type": "color"
1681
1921
  }
1922
+ },
1923
+ "org.primer.llm": {
1924
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1925
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1682
1926
  }
1683
1927
  },
1684
1928
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1687,6 +1931,7 @@
1687
1931
  "original": {
1688
1932
  "$value": "{base.color.orange.4}",
1689
1933
  "$type": "color",
1934
+ "$description": "Subtle severe background for high-priority warnings",
1690
1935
  "$extensions": {
1691
1936
  "org.primer.figma": {
1692
1937
  "collection": "mode",
@@ -1713,6 +1958,10 @@
1713
1958
  "isSource": true,
1714
1959
  "$type": "color"
1715
1960
  }
1961
+ },
1962
+ "org.primer.llm": {
1963
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1964
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1716
1965
  }
1717
1966
  },
1718
1967
  "alpha": 0.1,
@@ -1722,7 +1971,8 @@
1722
1971
  "attributes": {},
1723
1972
  "path": ["bgColor", "severe", "muted"],
1724
1973
  "value": "#f48b251a",
1725
- "type": "color"
1974
+ "type": "color",
1975
+ "description": "Subtle severe background for high-priority warnings"
1726
1976
  },
1727
1977
  "bgColor-sponsors-emphasis": {
1728
1978
  "key": "{bgColor.sponsors.emphasis}",
@@ -1740,6 +1990,10 @@
1740
1990
  "dark-dimmed-high-contrast": "#d23d91",
1741
1991
  "dark-tritanopia-high-contrast": "#9c1d6a",
1742
1992
  "dark-protanopia-deuteranopia-high-contrast": "#9c1d6a"
1993
+ },
1994
+ "org.primer.llm": {
1995
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
1996
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1743
1997
  }
1744
1998
  },
1745
1999
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1747,6 +2001,7 @@
1747
2001
  "original": {
1748
2002
  "$value": "{base.color.pink.9}",
1749
2003
  "$type": "color",
2004
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1750
2005
  "$extensions": {
1751
2006
  "org.primer.figma": {
1752
2007
  "collection": "mode",
@@ -1761,6 +2016,10 @@
1761
2016
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1762
2017
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1763
2018
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2019
+ },
2020
+ "org.primer.llm": {
2021
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2022
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1764
2023
  }
1765
2024
  },
1766
2025
  "key": "{bgColor.sponsors.emphasis}"
@@ -1769,7 +2028,8 @@
1769
2028
  "attributes": {},
1770
2029
  "path": ["bgColor", "sponsors", "emphasis"],
1771
2030
  "value": "#9c1d6a",
1772
- "type": "color"
2031
+ "type": "color",
2032
+ "description": "Strong background for prominent GitHub Sponsors elements"
1773
2033
  },
1774
2034
  "bgColor-sponsors-muted": {
1775
2035
  "key": "{bgColor.sponsors.muted}",
@@ -1797,6 +2057,10 @@
1797
2057
  "isSource": true,
1798
2058
  "$type": "color"
1799
2059
  }
2060
+ },
2061
+ "org.primer.llm": {
2062
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2063
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1800
2064
  }
1801
2065
  },
1802
2066
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1805,6 +2069,7 @@
1805
2069
  "original": {
1806
2070
  "$value": "{base.color.pink.4}",
1807
2071
  "$type": "color",
2072
+ "$description": "Subtle background for GitHub Sponsors content",
1808
2073
  "$extensions": {
1809
2074
  "org.primer.figma": {
1810
2075
  "collection": "mode",
@@ -1829,6 +2094,10 @@
1829
2094
  "isSource": true,
1830
2095
  "$type": "color"
1831
2096
  }
2097
+ },
2098
+ "org.primer.llm": {
2099
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2100
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1832
2101
  }
1833
2102
  },
1834
2103
  "alpha": 0.1,
@@ -1838,7 +2107,8 @@
1838
2107
  "attributes": {},
1839
2108
  "path": ["bgColor", "sponsors", "muted"],
1840
2109
  "value": "#f87cbd1a",
1841
- "type": "color"
2110
+ "type": "color",
2111
+ "description": "Subtle background for GitHub Sponsors content"
1842
2112
  },
1843
2113
  "bgColor-success-emphasis": {
1844
2114
  "key": "{bgColor.success.emphasis}",
@@ -1864,6 +2134,10 @@
1864
2134
  "light-high-contrast": "#09b43a",
1865
2135
  "dark-high-contrast": "#006222",
1866
2136
  "dark-dimmed-high-contrast": "#008c2c"
2137
+ },
2138
+ "org.primer.llm": {
2139
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2140
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1867
2141
  }
1868
2142
  },
1869
2143
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1871,6 +2145,7 @@
1871
2145
  "original": {
1872
2146
  "$value": "{base.color.green.9}",
1873
2147
  "$type": "color",
2148
+ "$description": "Strong success background for prominent positive actions",
1874
2149
  "$extensions": {
1875
2150
  "org.primer.figma": {
1876
2151
  "collection": "mode",
@@ -1893,6 +2168,10 @@
1893
2168
  "light-high-contrast": "{base.color.green.5}",
1894
2169
  "dark-high-contrast": "{base.color.green.9}",
1895
2170
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2171
+ },
2172
+ "org.primer.llm": {
2173
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2174
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1896
2175
  }
1897
2176
  },
1898
2177
  "key": "{bgColor.success.emphasis}"
@@ -1901,7 +2180,8 @@
1901
2180
  "attributes": {},
1902
2181
  "path": ["bgColor", "success", "emphasis"],
1903
2182
  "value": "#006222",
1904
- "type": "color"
2183
+ "type": "color",
2184
+ "description": "Strong success background for prominent positive actions"
1905
2185
  },
1906
2186
  "bgColor-success-muted": {
1907
2187
  "key": "{bgColor.success.muted}",
@@ -1954,6 +2234,10 @@
1954
2234
  "isSource": true,
1955
2235
  "$type": "color"
1956
2236
  }
2237
+ },
2238
+ "org.primer.llm": {
2239
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2240
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1957
2241
  }
1958
2242
  },
1959
2243
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1962,6 +2246,7 @@
1962
2246
  "original": {
1963
2247
  "$value": "{base.color.green.4}",
1964
2248
  "$type": "color",
2249
+ "$description": "Subtle success background for positive feedback and completed states",
1965
2250
  "$extensions": {
1966
2251
  "org.primer.figma": {
1967
2252
  "collection": "mode",
@@ -2011,6 +2296,10 @@
2011
2296
  "isSource": true,
2012
2297
  "$type": "color"
2013
2298
  }
2299
+ },
2300
+ "org.primer.llm": {
2301
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2302
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2014
2303
  }
2015
2304
  },
2016
2305
  "alpha": 0.15,
@@ -2020,7 +2309,8 @@
2020
2309
  "attributes": {},
2021
2310
  "path": ["bgColor", "success", "muted"],
2022
2311
  "value": "#0ac74026",
2023
- "type": "color"
2312
+ "type": "color",
2313
+ "description": "Subtle success background for positive feedback and completed states"
2024
2314
  },
2025
2315
  "bgColor-transparent": {
2026
2316
  "key": "{bgColor.transparent}",
@@ -2032,6 +2322,10 @@
2032
2322
  "codeSyntax": {
2033
2323
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2034
2324
  }
2325
+ },
2326
+ "org.primer.llm": {
2327
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2328
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2035
2329
  }
2036
2330
  },
2037
2331
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2039,6 +2333,7 @@
2039
2333
  "original": {
2040
2334
  "$value": "{base.color.transparent}",
2041
2335
  "$type": "color",
2336
+ "$description": "Fully transparent background",
2042
2337
  "$extensions": {
2043
2338
  "org.primer.figma": {
2044
2339
  "collection": "mode",
@@ -2047,6 +2342,10 @@
2047
2342
  "codeSyntax": {
2048
2343
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2049
2344
  }
2345
+ },
2346
+ "org.primer.llm": {
2347
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2348
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2050
2349
  }
2051
2350
  },
2052
2351
  "key": "{bgColor.transparent}"
@@ -2055,7 +2354,8 @@
2055
2354
  "attributes": {},
2056
2355
  "path": ["bgColor", "transparent"],
2057
2356
  "value": "#00000000",
2058
- "type": "color"
2357
+ "type": "color",
2358
+ "description": "Fully transparent background"
2059
2359
  },
2060
2360
  "bgColor-upsell-emphasis": {
2061
2361
  "key": "{bgColor.upsell.emphasis}",
@@ -2067,6 +2367,10 @@
2067
2367
  "codeSyntax": {
2068
2368
  "web": "var(--bgColor-upsell-emphasis)"
2069
2369
  }
2370
+ },
2371
+ "org.primer.llm": {
2372
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2373
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2070
2374
  }
2071
2375
  },
2072
2376
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2074,6 +2378,7 @@
2074
2378
  "original": {
2075
2379
  "$value": "{bgColor.done.emphasis}",
2076
2380
  "$type": "color",
2381
+ "$description": "Strong background for prominent upsell elements",
2077
2382
  "$extensions": {
2078
2383
  "org.primer.figma": {
2079
2384
  "collection": "mode",
@@ -2082,6 +2387,10 @@
2082
2387
  "codeSyntax": {
2083
2388
  "web": "var(--bgColor-upsell-emphasis)"
2084
2389
  }
2390
+ },
2391
+ "org.primer.llm": {
2392
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2393
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2085
2394
  }
2086
2395
  },
2087
2396
  "key": "{bgColor.upsell.emphasis}"
@@ -2090,7 +2399,8 @@
2090
2399
  "attributes": {},
2091
2400
  "path": ["bgColor", "upsell", "emphasis"],
2092
2401
  "value": "#6921d7",
2093
- "type": "color"
2402
+ "type": "color",
2403
+ "description": "Strong background for prominent upsell elements"
2094
2404
  },
2095
2405
  "bgColor-upsell-muted": {
2096
2406
  "key": "{bgColor.upsell.muted}",
@@ -2102,6 +2412,10 @@
2102
2412
  "codeSyntax": {
2103
2413
  "web": "var(--bgColor-upsell-muted)"
2104
2414
  }
2415
+ },
2416
+ "org.primer.llm": {
2417
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2418
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2105
2419
  }
2106
2420
  },
2107
2421
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2109,6 +2423,7 @@
2109
2423
  "original": {
2110
2424
  "$value": "{bgColor.done.muted}",
2111
2425
  "$type": "color",
2426
+ "$description": "Subtle background for upsell and promotional content",
2112
2427
  "$extensions": {
2113
2428
  "org.primer.figma": {
2114
2429
  "collection": "mode",
@@ -2117,6 +2432,10 @@
2117
2432
  "codeSyntax": {
2118
2433
  "web": "var(--bgColor-upsell-muted)"
2119
2434
  }
2435
+ },
2436
+ "org.primer.llm": {
2437
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2438
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2120
2439
  }
2121
2440
  },
2122
2441
  "key": "{bgColor.upsell.muted}"
@@ -2125,7 +2444,8 @@
2125
2444
  "attributes": {},
2126
2445
  "path": ["bgColor", "upsell", "muted"],
2127
2446
  "value": "#bf8fff26",
2128
- "type": "color"
2447
+ "type": "color",
2448
+ "description": "Subtle background for upsell and promotional content"
2129
2449
  },
2130
2450
  "bgColor-white": {
2131
2451
  "key": "{bgColor.white}",
@@ -2137,6 +2457,10 @@
2137
2457
  },
2138
2458
  "org.primer.overrides": {
2139
2459
  "dark": "#ffffff"
2460
+ },
2461
+ "org.primer.llm": {
2462
+ "doNotUse": true,
2463
+ "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."
2140
2464
  }
2141
2465
  },
2142
2466
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2144,6 +2468,7 @@
2144
2468
  "original": {
2145
2469
  "$value": "{base.color.neutral.13}",
2146
2470
  "$type": "color",
2471
+ "$description": "Pure white background",
2147
2472
  "$extensions": {
2148
2473
  "org.primer.figma": {
2149
2474
  "collection": "mode",
@@ -2152,6 +2477,10 @@
2152
2477
  },
2153
2478
  "org.primer.overrides": {
2154
2479
  "dark": "{base.color.neutral.13}"
2480
+ },
2481
+ "org.primer.llm": {
2482
+ "doNotUse": true,
2483
+ "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."
2155
2484
  }
2156
2485
  },
2157
2486
  "key": "{bgColor.white}"
@@ -2160,7 +2489,8 @@
2160
2489
  "attributes": {},
2161
2490
  "path": ["bgColor", "white"],
2162
2491
  "value": "#ffffff",
2163
- "type": "color"
2492
+ "type": "color",
2493
+ "description": "Pure white background"
2164
2494
  },
2165
2495
  "border-accent-emphasis": {
2166
2496
  "key": "{border.accent.emphasis}",
@@ -2672,6 +3002,10 @@
2672
3002
  },
2673
3003
  "org.primer.overrides": {
2674
3004
  "dark-dimmed-high-contrast": "#91cbff"
3005
+ },
3006
+ "org.primer.llm": {
3007
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3008
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2675
3009
  }
2676
3010
  },
2677
3011
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2679,6 +3013,7 @@
2679
3013
  "original": {
2680
3014
  "$value": "{base.color.blue.5}",
2681
3015
  "$type": "color",
3016
+ "$description": "Strong accent border for selected or focused elements",
2682
3017
  "$extensions": {
2683
3018
  "org.primer.figma": {
2684
3019
  "collection": "mode",
@@ -2690,6 +3025,10 @@
2690
3025
  },
2691
3026
  "org.primer.overrides": {
2692
3027
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3028
+ },
3029
+ "org.primer.llm": {
3030
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3031
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2693
3032
  }
2694
3033
  },
2695
3034
  "key": "{borderColor.accent.emphasis}"
@@ -2698,7 +3037,8 @@
2698
3037
  "attributes": {},
2699
3038
  "path": ["borderColor", "accent", "emphasis"],
2700
3039
  "value": "#409eff",
2701
- "type": "color"
3040
+ "type": "color",
3041
+ "description": "Strong accent border for selected or focused elements"
2702
3042
  },
2703
3043
  "borderColor-accent-muted": {
2704
3044
  "key": "{borderColor.accent.muted}",
@@ -2762,6 +3102,10 @@
2762
3102
  "isSource": true,
2763
3103
  "$type": "color"
2764
3104
  }
3105
+ },
3106
+ "org.primer.llm": {
3107
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3108
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2765
3109
  }
2766
3110
  },
2767
3111
  "alpha": 1,
@@ -2770,6 +3114,7 @@
2770
3114
  "original": {
2771
3115
  "$value": "{base.color.blue.4}",
2772
3116
  "$type": "color",
3117
+ "$description": "Subtle accent border for selected or focused elements",
2773
3118
  "$extensions": {
2774
3119
  "org.primer.figma": {
2775
3120
  "collection": "mode",
@@ -2830,6 +3175,10 @@
2830
3175
  "isSource": true,
2831
3176
  "$type": "color"
2832
3177
  }
3178
+ },
3179
+ "org.primer.llm": {
3180
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3181
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2833
3182
  }
2834
3183
  },
2835
3184
  "alpha": 1,
@@ -2839,7 +3188,8 @@
2839
3188
  "attributes": {},
2840
3189
  "path": ["borderColor", "accent", "muted"],
2841
3190
  "value": "#5cacff",
2842
- "type": "color"
3191
+ "type": "color",
3192
+ "description": "Subtle accent border for selected or focused elements"
2843
3193
  },
2844
3194
  "borderColor-attention-emphasis": {
2845
3195
  "key": "{borderColor.attention.emphasis}",
@@ -2854,6 +3204,10 @@
2854
3204
  },
2855
3205
  "org.primer.overrides": {
2856
3206
  "dark-dimmed-high-contrast": "#f7c843"
3207
+ },
3208
+ "org.primer.llm": {
3209
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3210
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2857
3211
  }
2858
3212
  },
2859
3213
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2861,6 +3215,7 @@
2861
3215
  "original": {
2862
3216
  "$value": "{base.color.yellow.5}",
2863
3217
  "$type": "color",
3218
+ "$description": "Strong attention border for prominent warnings",
2864
3219
  "$extensions": {
2865
3220
  "org.primer.figma": {
2866
3221
  "collection": "mode",
@@ -2872,6 +3227,10 @@
2872
3227
  },
2873
3228
  "org.primer.overrides": {
2874
3229
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3230
+ },
3231
+ "org.primer.llm": {
3232
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3233
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2875
3234
  }
2876
3235
  },
2877
3236
  "key": "{borderColor.attention.emphasis}"
@@ -2880,7 +3239,8 @@
2880
3239
  "attributes": {},
2881
3240
  "path": ["borderColor", "attention", "emphasis"],
2882
3241
  "value": "#e09b13",
2883
- "type": "color"
3242
+ "type": "color",
3243
+ "description": "Strong attention border for prominent warnings"
2884
3244
  },
2885
3245
  "borderColor-attention-muted": {
2886
3246
  "key": "{borderColor.attention.muted}",
@@ -2944,6 +3304,10 @@
2944
3304
  "isSource": true,
2945
3305
  "$type": "color"
2946
3306
  }
3307
+ },
3308
+ "org.primer.llm": {
3309
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3310
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2947
3311
  }
2948
3312
  },
2949
3313
  "alpha": 1,
@@ -2952,6 +3316,7 @@
2952
3316
  "original": {
2953
3317
  "$value": "{base.color.yellow.4}",
2954
3318
  "$type": "color",
3319
+ "$description": "Subtle attention border for warnings and caution states",
2955
3320
  "$extensions": {
2956
3321
  "org.primer.figma": {
2957
3322
  "collection": "mode",
@@ -3012,6 +3377,10 @@
3012
3377
  "isSource": true,
3013
3378
  "$type": "color"
3014
3379
  }
3380
+ },
3381
+ "org.primer.llm": {
3382
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3383
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3015
3384
  }
3016
3385
  },
3017
3386
  "alpha": 1,
@@ -3021,7 +3390,8 @@
3021
3390
  "attributes": {},
3022
3391
  "path": ["borderColor", "attention", "muted"],
3023
3392
  "value": "#edaa27",
3024
- "type": "color"
3393
+ "type": "color",
3394
+ "description": "Subtle attention border for warnings and caution states"
3025
3395
  },
3026
3396
  "borderColor-closed-emphasis": {
3027
3397
  "key": "{borderColor.closed.emphasis}",
@@ -3043,6 +3413,10 @@
3043
3413
  "dark-tritanopia-high-contrast": "#b7bdc8",
3044
3414
  "light-tritanopia": "#b7bdc8",
3045
3415
  "light-tritanopia-high-contrast": "#b7bdc8"
3416
+ },
3417
+ "org.primer.llm": {
3418
+ "usage": ["closed-emphasis", "closed-status"],
3419
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3046
3420
  }
3047
3421
  },
3048
3422
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3050,6 +3424,7 @@
3050
3424
  "original": {
3051
3425
  "$value": "{borderColor.danger.emphasis}",
3052
3426
  "$type": "color",
3427
+ "$description": "Strong border for closed state badges",
3053
3428
  "$extensions": {
3054
3429
  "org.primer.figma": {
3055
3430
  "collection": "mode",
@@ -3068,6 +3443,10 @@
3068
3443
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3069
3444
  "light-tritanopia": "{borderColor.emphasis}",
3070
3445
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3446
+ },
3447
+ "org.primer.llm": {
3448
+ "usage": ["closed-emphasis", "closed-status"],
3449
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3071
3450
  }
3072
3451
  },
3073
3452
  "key": "{borderColor.closed.emphasis}"
@@ -3076,7 +3455,8 @@
3076
3455
  "attributes": {},
3077
3456
  "path": ["borderColor", "closed", "emphasis"],
3078
3457
  "value": "#ff6a69",
3079
- "type": "color"
3458
+ "type": "color",
3459
+ "description": "Strong border for closed state badges"
3080
3460
  },
3081
3461
  "borderColor-closed-muted": {
3082
3462
  "key": "{borderColor.closed.muted}",
@@ -3146,6 +3526,10 @@
3146
3526
  "isSource": true,
3147
3527
  "$type": "color"
3148
3528
  }
3529
+ },
3530
+ "org.primer.llm": {
3531
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3532
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3149
3533
  }
3150
3534
  },
3151
3535
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3153,6 +3537,7 @@
3153
3537
  "original": {
3154
3538
  "$value": "{borderColor.danger.muted}",
3155
3539
  "$type": "color",
3540
+ "$description": "Subtle border for closed state indicators",
3156
3541
  "$extensions": {
3157
3542
  "org.primer.figma": {
3158
3543
  "collection": "mode",
@@ -3219,6 +3604,10 @@
3219
3604
  "isSource": true,
3220
3605
  "$type": "color"
3221
3606
  }
3607
+ },
3608
+ "org.primer.llm": {
3609
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3610
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3222
3611
  }
3223
3612
  },
3224
3613
  "key": "{borderColor.closed.muted}"
@@ -3227,7 +3616,8 @@
3227
3616
  "attributes": {},
3228
3617
  "path": ["borderColor", "closed", "muted"],
3229
3618
  "value": "#ff8080",
3230
- "type": "color"
3619
+ "type": "color",
3620
+ "description": "Subtle border for closed state indicators"
3231
3621
  },
3232
3622
  "borderColor-danger-emphasis": {
3233
3623
  "key": "{borderColor.danger.emphasis}",
@@ -3266,6 +3656,10 @@
3266
3656
  "$type": "color"
3267
3657
  },
3268
3658
  "dark-dimmed-high-contrast": "#ffb1af"
3659
+ },
3660
+ "org.primer.llm": {
3661
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3662
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3269
3663
  }
3270
3664
  },
3271
3665
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3273,6 +3667,7 @@
3273
3667
  "original": {
3274
3668
  "$value": "{base.color.red.5}",
3275
3669
  "$type": "color",
3670
+ "$description": "Strong danger border for destructive actions and errors",
3276
3671
  "$extensions": {
3277
3672
  "org.primer.figma": {
3278
3673
  "collection": "mode",
@@ -3308,6 +3703,10 @@
3308
3703
  "$type": "color"
3309
3704
  },
3310
3705
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3706
+ },
3707
+ "org.primer.llm": {
3708
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3709
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3311
3710
  }
3312
3711
  },
3313
3712
  "key": "{borderColor.danger.emphasis}"
@@ -3316,7 +3715,8 @@
3316
3715
  "attributes": {},
3317
3716
  "path": ["borderColor", "danger", "emphasis"],
3318
3717
  "value": "#ff6a69",
3319
- "type": "color"
3718
+ "type": "color",
3719
+ "description": "Strong danger border for destructive actions and errors"
3320
3720
  },
3321
3721
  "borderColor-danger-muted": {
3322
3722
  "key": "{borderColor.danger.muted}",
@@ -3393,6 +3793,10 @@
3393
3793
  "isSource": true,
3394
3794
  "$type": "color"
3395
3795
  }
3796
+ },
3797
+ "org.primer.llm": {
3798
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3799
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3396
3800
  }
3397
3801
  },
3398
3802
  "alpha": 1,
@@ -3401,6 +3805,7 @@
3401
3805
  "original": {
3402
3806
  "$value": "{base.color.red.4}",
3403
3807
  "$type": "color",
3808
+ "$description": "Subtle danger border for errors and destructive contexts",
3404
3809
  "$extensions": {
3405
3810
  "org.primer.figma": {
3406
3811
  "collection": "mode",
@@ -3474,6 +3879,10 @@
3474
3879
  "isSource": true,
3475
3880
  "$type": "color"
3476
3881
  }
3882
+ },
3883
+ "org.primer.llm": {
3884
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3885
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3477
3886
  }
3478
3887
  },
3479
3888
  "alpha": 1,
@@ -3483,7 +3892,8 @@
3483
3892
  "attributes": {},
3484
3893
  "path": ["borderColor", "danger", "muted"],
3485
3894
  "value": "#ff8080",
3486
- "type": "color"
3895
+ "type": "color",
3896
+ "description": "Subtle danger border for errors and destructive contexts"
3487
3897
  },
3488
3898
  "borderColor-default": {
3489
3899
  "key": "{borderColor.default}",
@@ -3506,6 +3916,10 @@
3506
3916
  "codeSyntax": {
3507
3917
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3508
3918
  }
3919
+ },
3920
+ "org.primer.llm": {
3921
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3922
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3509
3923
  }
3510
3924
  },
3511
3925
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3513,6 +3927,7 @@
3513
3927
  "original": {
3514
3928
  "$value": "{base.color.neutral.10}",
3515
3929
  "$type": "color",
3930
+ "$description": "Default border color for most UI elements",
3516
3931
  "$extensions": {
3517
3932
  "org.primer.overrides": {
3518
3933
  "dark": "{base.color.neutral.7}",
@@ -3532,6 +3947,10 @@
3532
3947
  "codeSyntax": {
3533
3948
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3534
3949
  }
3950
+ },
3951
+ "org.primer.llm": {
3952
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3953
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3535
3954
  }
3536
3955
  },
3537
3956
  "key": "{borderColor.default}"
@@ -3540,7 +3959,8 @@
3540
3959
  "attributes": {},
3541
3960
  "path": ["borderColor", "default"],
3542
3961
  "value": "#b7bdc8",
3543
- "type": "color"
3962
+ "type": "color",
3963
+ "description": "Default border color for most UI elements"
3544
3964
  },
3545
3965
  "borderColor-disabled": {
3546
3966
  "key": "{borderColor.disabled}",
@@ -3586,6 +4006,10 @@
3586
4006
  "isSource": true,
3587
4007
  "$type": "color"
3588
4008
  }
4009
+ },
4010
+ "org.primer.llm": {
4011
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4012
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3589
4013
  }
3590
4014
  },
3591
4015
  "alpha": 0.1,
@@ -3594,6 +4018,7 @@
3594
4018
  "original": {
3595
4019
  "$value": "{base.color.neutral.8}",
3596
4020
  "$type": "color",
4021
+ "$description": "Border color for disabled interactive elements",
3597
4022
  "$extensions": {
3598
4023
  "org.primer.figma": {
3599
4024
  "collection": "mode",
@@ -3636,6 +4061,10 @@
3636
4061
  "isSource": true,
3637
4062
  "$type": "color"
3638
4063
  }
4064
+ },
4065
+ "org.primer.llm": {
4066
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4067
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3639
4068
  }
3640
4069
  },
3641
4070
  "alpha": 0.1,
@@ -3645,7 +4074,8 @@
3645
4074
  "attributes": {},
3646
4075
  "path": ["borderColor", "disabled"],
3647
4076
  "value": "#656c761a",
3648
- "type": "color"
4077
+ "type": "color",
4078
+ "description": "Border color for disabled interactive elements"
3649
4079
  },
3650
4080
  "borderColor-done-emphasis": {
3651
4081
  "key": "{borderColor.done.emphasis}",
@@ -3660,6 +4090,10 @@
3660
4090
  },
3661
4091
  "org.primer.overrides": {
3662
4092
  "dark-dimmed-high-contrast": "#dbb7ff"
4093
+ },
4094
+ "org.primer.llm": {
4095
+ "usage": ["done-emphasis", "merged-status"],
4096
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3663
4097
  }
3664
4098
  },
3665
4099
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3667,6 +4101,7 @@
3667
4101
  "original": {
3668
4102
  "$value": "{base.color.purple.5}",
3669
4103
  "$type": "color",
4104
+ "$description": "Strong border for completed/done state badges",
3670
4105
  "$extensions": {
3671
4106
  "org.primer.figma": {
3672
4107
  "collection": "mode",
@@ -3678,6 +4113,10 @@
3678
4113
  },
3679
4114
  "org.primer.overrides": {
3680
4115
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4116
+ },
4117
+ "org.primer.llm": {
4118
+ "usage": ["done-emphasis", "merged-status"],
4119
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3681
4120
  }
3682
4121
  },
3683
4122
  "key": "{borderColor.done.emphasis}"
@@ -3686,7 +4125,8 @@
3686
4125
  "attributes": {},
3687
4126
  "path": ["borderColor", "done", "emphasis"],
3688
4127
  "value": "#b87fff",
3689
- "type": "color"
4128
+ "type": "color",
4129
+ "description": "Strong border for completed/done state badges"
3690
4130
  },
3691
4131
  "borderColor-done-muted": {
3692
4132
  "key": "{borderColor.done.muted}",
@@ -3750,6 +4190,10 @@
3750
4190
  "isSource": true,
3751
4191
  "$type": "color"
3752
4192
  }
4193
+ },
4194
+ "org.primer.llm": {
4195
+ "usage": ["done-muted", "merged", "completed"],
4196
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3753
4197
  }
3754
4198
  },
3755
4199
  "alpha": 1,
@@ -3758,6 +4202,7 @@
3758
4202
  "original": {
3759
4203
  "$value": "{base.color.purple.4}",
3760
4204
  "$type": "color",
4205
+ "$description": "Subtle border for completed/done state indicators",
3761
4206
  "$extensions": {
3762
4207
  "org.primer.figma": {
3763
4208
  "collection": "mode",
@@ -3818,6 +4263,10 @@
3818
4263
  "isSource": true,
3819
4264
  "$type": "color"
3820
4265
  }
4266
+ },
4267
+ "org.primer.llm": {
4268
+ "usage": ["done-muted", "merged", "completed"],
4269
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3821
4270
  }
3822
4271
  },
3823
4272
  "alpha": 1,
@@ -3827,7 +4276,8 @@
3827
4276
  "attributes": {},
3828
4277
  "path": ["borderColor", "done", "muted"],
3829
4278
  "value": "#bf8fff",
3830
- "type": "color"
4279
+ "type": "color",
4280
+ "description": "Subtle border for completed/done state indicators"
3831
4281
  },
3832
4282
  "borderColor-draft-emphasis": {
3833
4283
  "key": "{borderColor.draft.emphasis}",
@@ -3839,6 +4289,10 @@
3839
4289
  "codeSyntax": {
3840
4290
  "web": "var(--borderColor-draft-emphasis)"
3841
4291
  }
4292
+ },
4293
+ "org.primer.llm": {
4294
+ "usage": ["draft-emphasis", "draft-status"],
4295
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3842
4296
  }
3843
4297
  },
3844
4298
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3846,6 +4300,7 @@
3846
4300
  "original": {
3847
4301
  "$value": "{borderColor.neutral.emphasis}",
3848
4302
  "$type": "color",
4303
+ "$description": "Strong border for draft state badges",
3849
4304
  "$extensions": {
3850
4305
  "org.primer.figma": {
3851
4306
  "collection": "mode",
@@ -3854,6 +4309,10 @@
3854
4309
  "codeSyntax": {
3855
4310
  "web": "var(--borderColor-draft-emphasis)"
3856
4311
  }
4312
+ },
4313
+ "org.primer.llm": {
4314
+ "usage": ["draft-emphasis", "draft-status"],
4315
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3857
4316
  }
3858
4317
  },
3859
4318
  "key": "{borderColor.draft.emphasis}"
@@ -3862,7 +4321,8 @@
3862
4321
  "attributes": {},
3863
4322
  "path": ["borderColor", "draft", "emphasis"],
3864
4323
  "value": "#b7bdc8",
3865
- "type": "color"
4324
+ "type": "color",
4325
+ "description": "Strong border for draft state badges"
3866
4326
  },
3867
4327
  "borderColor-draft-muted": {
3868
4328
  "key": "{borderColor.draft.muted}",
@@ -3932,6 +4392,10 @@
3932
4392
  "isSource": true,
3933
4393
  "$type": "color"
3934
4394
  }
4395
+ },
4396
+ "org.primer.llm": {
4397
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4398
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3935
4399
  }
3936
4400
  },
3937
4401
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3939,6 +4403,7 @@
3939
4403
  "original": {
3940
4404
  "$value": "{borderColor.neutral.muted}",
3941
4405
  "$type": "color",
4406
+ "$description": "Subtle border for draft state indicators",
3942
4407
  "$extensions": {
3943
4408
  "org.primer.figma": {
3944
4409
  "collection": "mode",
@@ -4005,6 +4470,10 @@
4005
4470
  "isSource": true,
4006
4471
  "$type": "color"
4007
4472
  }
4473
+ },
4474
+ "org.primer.llm": {
4475
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4476
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
4008
4477
  }
4009
4478
  },
4010
4479
  "key": "{borderColor.draft.muted}"
@@ -4013,7 +4482,8 @@
4013
4482
  "attributes": {},
4014
4483
  "path": ["borderColor", "draft", "muted"],
4015
4484
  "value": "#b7bdc8",
4016
- "type": "color"
4485
+ "type": "color",
4486
+ "description": "Subtle border for draft state indicators"
4017
4487
  },
4018
4488
  "borderColor-emphasis": {
4019
4489
  "key": "{borderColor.emphasis}",
@@ -4031,6 +4501,10 @@
4031
4501
  "dark-dimmed-high-contrast": "#b7bdc8",
4032
4502
  "dark-tritanopia-high-contrast": "#b7bdc8",
4033
4503
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
4504
+ },
4505
+ "org.primer.llm": {
4506
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4507
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4034
4508
  }
4035
4509
  },
4036
4510
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4038,6 +4512,7 @@
4038
4512
  "original": {
4039
4513
  "$value": "{borderColor.default}",
4040
4514
  "$type": "color",
4515
+ "$description": "Strong border for emphasis and visual weight",
4041
4516
  "$extensions": {
4042
4517
  "org.primer.figma": {
4043
4518
  "collection": "mode",
@@ -4052,6 +4527,10 @@
4052
4527
  "dark-dimmed-high-contrast": "{borderColor.default}",
4053
4528
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4054
4529
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4530
+ },
4531
+ "org.primer.llm": {
4532
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4533
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4055
4534
  }
4056
4535
  },
4057
4536
  "key": "{borderColor.emphasis}"
@@ -4060,7 +4539,8 @@
4060
4539
  "attributes": {},
4061
4540
  "path": ["borderColor", "emphasis"],
4062
4541
  "value": "#b7bdc8",
4063
- "type": "color"
4542
+ "type": "color",
4543
+ "description": "Strong border for emphasis and visual weight"
4064
4544
  },
4065
4545
  "borderColor-muted": {
4066
4546
  "key": "{borderColor.muted}",
@@ -4130,6 +4610,10 @@
4130
4610
  "isSource": true,
4131
4611
  "$type": "color"
4132
4612
  }
4613
+ },
4614
+ "org.primer.llm": {
4615
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4616
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4133
4617
  }
4134
4618
  },
4135
4619
  "alpha": 1,
@@ -4138,6 +4622,7 @@
4138
4622
  "original": {
4139
4623
  "$value": "{borderColor.default}",
4140
4624
  "$type": "color",
4625
+ "$description": "Subtle border for secondary elements and light separators",
4141
4626
  "$extensions": {
4142
4627
  "org.primer.figma": {
4143
4628
  "collection": "mode",
@@ -4204,6 +4689,10 @@
4204
4689
  "isSource": true,
4205
4690
  "$type": "color"
4206
4691
  }
4692
+ },
4693
+ "org.primer.llm": {
4694
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4695
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4207
4696
  }
4208
4697
  },
4209
4698
  "alpha": 1,
@@ -4213,7 +4702,8 @@
4213
4702
  "attributes": {},
4214
4703
  "path": ["borderColor", "muted"],
4215
4704
  "value": "#b7bdc8",
4216
- "type": "color"
4705
+ "type": "color",
4706
+ "description": "Subtle border for secondary elements and light separators"
4217
4707
  },
4218
4708
  "borderColor-neutral-emphasis": {
4219
4709
  "key": "{borderColor.neutral.emphasis}",
@@ -4225,6 +4715,10 @@
4225
4715
  },
4226
4716
  "org.primer.overrides": {
4227
4717
  "dark": "#b7bdc8"
4718
+ },
4719
+ "org.primer.llm": {
4720
+ "usage": ["neutral-emphasis", "neutral-strong"],
4721
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4228
4722
  }
4229
4723
  },
4230
4724
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4232,6 +4726,7 @@
4232
4726
  "original": {
4233
4727
  "$value": "{borderColor.emphasis}",
4234
4728
  "$type": "color",
4729
+ "$description": "Strong neutral semantic border",
4235
4730
  "$extensions": {
4236
4731
  "org.primer.figma": {
4237
4732
  "collection": "mode",
@@ -4240,6 +4735,10 @@
4240
4735
  },
4241
4736
  "org.primer.overrides": {
4242
4737
  "dark": "{borderColor.emphasis}"
4738
+ },
4739
+ "org.primer.llm": {
4740
+ "usage": ["neutral-emphasis", "neutral-strong"],
4741
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4243
4742
  }
4244
4743
  },
4245
4744
  "key": "{borderColor.neutral.emphasis}"
@@ -4248,7 +4747,8 @@
4248
4747
  "attributes": {},
4249
4748
  "path": ["borderColor", "neutral", "emphasis"],
4250
4749
  "value": "#b7bdc8",
4251
- "type": "color"
4750
+ "type": "color",
4751
+ "description": "Strong neutral semantic border"
4252
4752
  },
4253
4753
  "borderColor-neutral-muted": {
4254
4754
  "key": "{borderColor.neutral.muted}",
@@ -4273,6 +4773,10 @@
4273
4773
  "isSource": true,
4274
4774
  "$type": "color"
4275
4775
  }
4776
+ },
4777
+ "org.primer.llm": {
4778
+ "usage": ["neutral-muted", "neutral-secondary"],
4779
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4276
4780
  }
4277
4781
  },
4278
4782
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4280,6 +4784,7 @@
4280
4784
  "original": {
4281
4785
  "$value": "{borderColor.muted}",
4282
4786
  "$type": "color",
4787
+ "$description": "Subtle neutral semantic border",
4283
4788
  "$extensions": {
4284
4789
  "org.primer.figma": {
4285
4790
  "collection": "mode",
@@ -4301,6 +4806,10 @@
4301
4806
  "isSource": true,
4302
4807
  "$type": "color"
4303
4808
  }
4809
+ },
4810
+ "org.primer.llm": {
4811
+ "usage": ["neutral-muted", "neutral-secondary"],
4812
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4304
4813
  }
4305
4814
  },
4306
4815
  "key": "{borderColor.neutral.muted}"
@@ -4309,7 +4818,8 @@
4309
4818
  "attributes": {},
4310
4819
  "path": ["borderColor", "neutral", "muted"],
4311
4820
  "value": "#b7bdc8",
4312
- "type": "color"
4821
+ "type": "color",
4822
+ "description": "Subtle neutral semantic border"
4313
4823
  },
4314
4824
  "borderColor-open-emphasis": {
4315
4825
  "key": "{borderColor.open.emphasis}",
@@ -4331,6 +4841,10 @@
4331
4841
  "dark-protanopia-deuteranopia-high-contrast": "#e7811d",
4332
4842
  "light-protanopia-deuteranopia": "#e7811d",
4333
4843
  "light-protanopia-deuteranopia-high-contrast": "#e7811d"
4844
+ },
4845
+ "org.primer.llm": {
4846
+ "usage": ["open-emphasis", "open-status"],
4847
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4334
4848
  }
4335
4849
  },
4336
4850
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4338,6 +4852,7 @@
4338
4852
  "original": {
4339
4853
  "$value": "{borderColor.success.emphasis}",
4340
4854
  "$type": "color",
4855
+ "$description": "Strong border for open state badges",
4341
4856
  "$extensions": {
4342
4857
  "org.primer.figma": {
4343
4858
  "collection": "mode",
@@ -4356,6 +4871,10 @@
4356
4871
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4357
4872
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4358
4873
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4874
+ },
4875
+ "org.primer.llm": {
4876
+ "usage": ["open-emphasis", "open-status"],
4877
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4359
4878
  }
4360
4879
  },
4361
4880
  "key": "{borderColor.open.emphasis}"
@@ -4364,7 +4883,8 @@
4364
4883
  "attributes": {},
4365
4884
  "path": ["borderColor", "open", "emphasis"],
4366
4885
  "value": "#09b43a",
4367
- "type": "color"
4886
+ "type": "color",
4887
+ "description": "Strong border for open state badges"
4368
4888
  },
4369
4889
  "borderColor-open-muted": {
4370
4890
  "key": "{borderColor.open.muted}",
@@ -4434,6 +4954,10 @@
4434
4954
  "isSource": true,
4435
4955
  "$type": "color"
4436
4956
  }
4957
+ },
4958
+ "org.primer.llm": {
4959
+ "usage": ["open-muted", "open-issue", "open-pr"],
4960
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4437
4961
  }
4438
4962
  },
4439
4963
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4441,6 +4965,7 @@
4441
4965
  "original": {
4442
4966
  "$value": "{borderColor.success.muted}",
4443
4967
  "$type": "color",
4968
+ "$description": "Subtle border for open state indicators",
4444
4969
  "$extensions": {
4445
4970
  "org.primer.figma": {
4446
4971
  "collection": "mode",
@@ -4507,6 +5032,10 @@
4507
5032
  "isSource": true,
4508
5033
  "$type": "color"
4509
5034
  }
5035
+ },
5036
+ "org.primer.llm": {
5037
+ "usage": ["open-muted", "open-issue", "open-pr"],
5038
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4510
5039
  }
4511
5040
  },
4512
5041
  "key": "{borderColor.open.muted}"
@@ -4515,7 +5044,8 @@
4515
5044
  "attributes": {},
4516
5045
  "path": ["borderColor", "open", "muted"],
4517
5046
  "value": "#0ac740",
4518
- "type": "color"
5047
+ "type": "color",
5048
+ "description": "Subtle border for open state indicators"
4519
5049
  },
4520
5050
  "borderColor-severe-emphasis": {
4521
5051
  "key": "{borderColor.severe.emphasis}",
@@ -4533,6 +5063,10 @@
4533
5063
  "light-tritanopia": "#ff6a69",
4534
5064
  "light-tritanopia-high-contrast": "#ff6a69",
4535
5065
  "dark-dimmed-high-contrast": "#ffb757"
5066
+ },
5067
+ "org.primer.llm": {
5068
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5069
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4536
5070
  }
4537
5071
  },
4538
5072
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4540,6 +5074,7 @@
4540
5074
  "original": {
4541
5075
  "$value": "{base.color.orange.5}",
4542
5076
  "$type": "color",
5077
+ "$description": "Strong severe border for prominent high-priority warnings",
4543
5078
  "$extensions": {
4544
5079
  "org.primer.figma": {
4545
5080
  "collection": "mode",
@@ -4554,6 +5089,10 @@
4554
5089
  "light-tritanopia": "{base.color.red.5}",
4555
5090
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4556
5091
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5092
+ },
5093
+ "org.primer.llm": {
5094
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5095
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4557
5096
  }
4558
5097
  },
4559
5098
  "key": "{borderColor.severe.emphasis}"
@@ -4562,7 +5101,8 @@
4562
5101
  "attributes": {},
4563
5102
  "path": ["borderColor", "severe", "emphasis"],
4564
5103
  "value": "#e7811d",
4565
- "type": "color"
5104
+ "type": "color",
5105
+ "description": "Strong severe border for prominent high-priority warnings"
4566
5106
  },
4567
5107
  "borderColor-severe-muted": {
4568
5108
  "key": "{borderColor.severe.muted}",
@@ -4621,6 +5161,10 @@
4621
5161
  "isSource": true,
4622
5162
  "$type": "color"
4623
5163
  }
5164
+ },
5165
+ "org.primer.llm": {
5166
+ "usage": ["severe-muted", "urgent-muted"],
5167
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4624
5168
  }
4625
5169
  },
4626
5170
  "alpha": 1,
@@ -4629,6 +5173,7 @@
4629
5173
  "original": {
4630
5174
  "$value": "{base.color.orange.4}",
4631
5175
  "$type": "color",
5176
+ "$description": "Subtle severe border for high-priority warnings",
4632
5177
  "$extensions": {
4633
5178
  "org.primer.figma": {
4634
5179
  "collection": "mode",
@@ -4684,6 +5229,10 @@
4684
5229
  "isSource": true,
4685
5230
  "$type": "color"
4686
5231
  }
5232
+ },
5233
+ "org.primer.llm": {
5234
+ "usage": ["severe-muted", "urgent-muted"],
5235
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4687
5236
  }
4688
5237
  },
4689
5238
  "alpha": 1,
@@ -4693,7 +5242,8 @@
4693
5242
  "attributes": {},
4694
5243
  "path": ["borderColor", "severe", "muted"],
4695
5244
  "value": "#f48b25",
4696
- "type": "color"
5245
+ "type": "color",
5246
+ "description": "Subtle severe border for high-priority warnings"
4697
5247
  },
4698
5248
  "borderColor-sponsors-emphasis": {
4699
5249
  "key": "{borderColor.sponsors.emphasis}",
@@ -4708,6 +5258,10 @@
4708
5258
  },
4709
5259
  "org.primer.overrides": {
4710
5260
  "dark-dimmed-high-contrast": "#ff8dc7"
5261
+ },
5262
+ "org.primer.llm": {
5263
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5264
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4711
5265
  }
4712
5266
  },
4713
5267
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4715,6 +5269,7 @@
4715
5269
  "original": {
4716
5270
  "$value": "{base.color.pink.5}",
4717
5271
  "$type": "color",
5272
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4718
5273
  "$extensions": {
4719
5274
  "org.primer.figma": {
4720
5275
  "collection": "mode",
@@ -4726,6 +5281,10 @@
4726
5281
  },
4727
5282
  "org.primer.overrides": {
4728
5283
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5284
+ },
5285
+ "org.primer.llm": {
5286
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5287
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4729
5288
  }
4730
5289
  },
4731
5290
  "key": "{borderColor.sponsors.emphasis}"
@@ -4734,7 +5293,8 @@
4734
5293
  "attributes": {},
4735
5294
  "path": ["borderColor", "sponsors", "emphasis"],
4736
5295
  "value": "#ef6eb1",
4737
- "type": "color"
5296
+ "type": "color",
5297
+ "description": "Strong border for prominent GitHub Sponsors elements"
4738
5298
  },
4739
5299
  "borderColor-sponsors-muted": {
4740
5300
  "key": "{borderColor.sponsors.muted}",
@@ -4798,6 +5358,10 @@
4798
5358
  "isSource": true,
4799
5359
  "$type": "color"
4800
5360
  }
5361
+ },
5362
+ "org.primer.llm": {
5363
+ "usage": ["sponsors-muted", "funding-muted"],
5364
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4801
5365
  }
4802
5366
  },
4803
5367
  "alpha": 1,
@@ -4806,6 +5370,7 @@
4806
5370
  "original": {
4807
5371
  "$value": "{base.color.pink.4}",
4808
5372
  "$type": "color",
5373
+ "$description": "Subtle border for GitHub Sponsors content",
4809
5374
  "$extensions": {
4810
5375
  "org.primer.figma": {
4811
5376
  "collection": "mode",
@@ -4866,6 +5431,10 @@
4866
5431
  "isSource": true,
4867
5432
  "$type": "color"
4868
5433
  }
5434
+ },
5435
+ "org.primer.llm": {
5436
+ "usage": ["sponsors-muted", "funding-muted"],
5437
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4869
5438
  }
4870
5439
  },
4871
5440
  "alpha": 1,
@@ -4875,7 +5444,8 @@
4875
5444
  "attributes": {},
4876
5445
  "path": ["borderColor", "sponsors", "muted"],
4877
5446
  "value": "#f87cbd",
4878
- "type": "color"
5447
+ "type": "color",
5448
+ "description": "Subtle border for GitHub Sponsors content"
4879
5449
  },
4880
5450
  "borderColor-success-emphasis": {
4881
5451
  "key": "{borderColor.success.emphasis}",
@@ -4898,6 +5468,10 @@
4898
5468
  "light-protanopia-deuteranopia": "#409eff",
4899
5469
  "light-protanopia-deuteranopia-high-contrast": "#409eff",
4900
5470
  "dark-dimmed-high-contrast": "#4ae168"
5471
+ },
5472
+ "org.primer.llm": {
5473
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5474
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4901
5475
  }
4902
5476
  },
4903
5477
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4905,6 +5479,7 @@
4905
5479
  "original": {
4906
5480
  "$value": "{base.color.green.5}",
4907
5481
  "$type": "color",
5482
+ "$description": "Strong success border for prominent positive elements",
4908
5483
  "$extensions": {
4909
5484
  "org.primer.figma": {
4910
5485
  "collection": "mode",
@@ -4924,6 +5499,10 @@
4924
5499
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4925
5500
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4926
5501
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5502
+ },
5503
+ "org.primer.llm": {
5504
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5505
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4927
5506
  }
4928
5507
  },
4929
5508
  "key": "{borderColor.success.emphasis}"
@@ -4932,7 +5511,8 @@
4932
5511
  "attributes": {},
4933
5512
  "path": ["borderColor", "success", "emphasis"],
4934
5513
  "value": "#09b43a",
4935
- "type": "color"
5514
+ "type": "color",
5515
+ "description": "Strong success border for prominent positive elements"
4936
5516
  },
4937
5517
  "borderColor-success-muted": {
4938
5518
  "key": "{borderColor.success.muted}",
@@ -5023,6 +5603,10 @@
5023
5603
  "isSource": true,
5024
5604
  "$type": "color"
5025
5605
  }
5606
+ },
5607
+ "org.primer.llm": {
5608
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5609
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5026
5610
  }
5027
5611
  },
5028
5612
  "alpha": 1,
@@ -5031,6 +5615,7 @@
5031
5615
  "original": {
5032
5616
  "$value": "{base.color.green.4}",
5033
5617
  "$type": "color",
5618
+ "$description": "Subtle success border for positive feedback elements",
5034
5619
  "$extensions": {
5035
5620
  "org.primer.figma": {
5036
5621
  "collection": "mode",
@@ -5118,6 +5703,10 @@
5118
5703
  "isSource": true,
5119
5704
  "$type": "color"
5120
5705
  }
5706
+ },
5707
+ "org.primer.llm": {
5708
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5709
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5121
5710
  }
5122
5711
  },
5123
5712
  "alpha": 1,
@@ -5127,7 +5716,8 @@
5127
5716
  "attributes": {},
5128
5717
  "path": ["borderColor", "success", "muted"],
5129
5718
  "value": "#0ac740",
5130
- "type": "color"
5719
+ "type": "color",
5720
+ "description": "Subtle success border for positive feedback elements"
5131
5721
  },
5132
5722
  "borderColor-translucent": {
5133
5723
  "key": "{borderColor.translucent}",
@@ -5187,6 +5777,10 @@
5187
5777
  "isSource": true,
5188
5778
  "$type": "color"
5189
5779
  }
5780
+ },
5781
+ "org.primer.llm": {
5782
+ "usage": ["overlay-border", "translucent-border"],
5783
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5190
5784
  }
5191
5785
  },
5192
5786
  "alpha": 1,
@@ -5195,6 +5789,7 @@
5195
5789
  "original": {
5196
5790
  "$value": "{base.color.neutral.9}",
5197
5791
  "$type": "color",
5792
+ "$description": "Semi-transparent border for overlays and layered elements",
5198
5793
  "$extensions": {
5199
5794
  "org.primer.figma": {
5200
5795
  "collection": "mode",
@@ -5251,6 +5846,10 @@
5251
5846
  "isSource": true,
5252
5847
  "$type": "color"
5253
5848
  }
5849
+ },
5850
+ "org.primer.llm": {
5851
+ "usage": ["overlay-border", "translucent-border"],
5852
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5254
5853
  }
5255
5854
  },
5256
5855
  "alpha": 1,
@@ -5260,7 +5859,8 @@
5260
5859
  "attributes": {},
5261
5860
  "path": ["borderColor", "translucent"],
5262
5861
  "value": "#9198a1",
5263
- "type": "color"
5862
+ "type": "color",
5863
+ "description": "Semi-transparent border for overlays and layered elements"
5264
5864
  },
5265
5865
  "borderColor-transparent": {
5266
5866
  "key": "{borderColor.transparent}",
@@ -5276,6 +5876,7 @@
5276
5876
  "original": {
5277
5877
  "$value": "{base.color.transparent}",
5278
5878
  "$type": "color",
5879
+ "$description": "Fully transparent border",
5279
5880
  "$extensions": {
5280
5881
  "org.primer.figma": {
5281
5882
  "collection": "mode",
@@ -5289,7 +5890,8 @@
5289
5890
  "attributes": {},
5290
5891
  "path": ["borderColor", "transparent"],
5291
5892
  "value": "#00000000",
5292
- "type": "color"
5893
+ "type": "color",
5894
+ "description": "Fully transparent border"
5293
5895
  },
5294
5896
  "borderColor-upsell-emphasis": {
5295
5897
  "key": "{borderColor.upsell.emphasis}",
@@ -5301,6 +5903,10 @@
5301
5903
  "codeSyntax": {
5302
5904
  "web": "var(--borderColor-upsell-emphasis)"
5303
5905
  }
5906
+ },
5907
+ "org.primer.llm": {
5908
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5909
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5304
5910
  }
5305
5911
  },
5306
5912
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5308,6 +5914,7 @@
5308
5914
  "original": {
5309
5915
  "$value": "{borderColor.done.emphasis}",
5310
5916
  "$type": "color",
5917
+ "$description": "Strong border for prominent upsell elements",
5311
5918
  "$extensions": {
5312
5919
  "org.primer.figma": {
5313
5920
  "collection": "mode",
@@ -5316,6 +5923,10 @@
5316
5923
  "codeSyntax": {
5317
5924
  "web": "var(--borderColor-upsell-emphasis)"
5318
5925
  }
5926
+ },
5927
+ "org.primer.llm": {
5928
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5929
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5319
5930
  }
5320
5931
  },
5321
5932
  "key": "{borderColor.upsell.emphasis}"
@@ -5324,7 +5935,8 @@
5324
5935
  "attributes": {},
5325
5936
  "path": ["borderColor", "upsell", "emphasis"],
5326
5937
  "value": "#b87fff",
5327
- "type": "color"
5938
+ "type": "color",
5939
+ "description": "Strong border for prominent upsell elements"
5328
5940
  },
5329
5941
  "borderColor-upsell-muted": {
5330
5942
  "key": "{borderColor.upsell.muted}",
@@ -5336,6 +5948,10 @@
5336
5948
  "codeSyntax": {
5337
5949
  "web": "var(--borderColor-upsell-muted)"
5338
5950
  }
5951
+ },
5952
+ "org.primer.llm": {
5953
+ "usage": ["upsell-muted", "premium-muted"],
5954
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5339
5955
  }
5340
5956
  },
5341
5957
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5343,6 +5959,7 @@
5343
5959
  "original": {
5344
5960
  "$value": "{borderColor.done.muted}",
5345
5961
  "$type": "color",
5962
+ "$description": "Subtle border for upsell and promotional content",
5346
5963
  "$extensions": {
5347
5964
  "org.primer.figma": {
5348
5965
  "collection": "mode",
@@ -5351,6 +5968,10 @@
5351
5968
  "codeSyntax": {
5352
5969
  "web": "var(--borderColor-upsell-muted)"
5353
5970
  }
5971
+ },
5972
+ "org.primer.llm": {
5973
+ "usage": ["upsell-muted", "premium-muted"],
5974
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5354
5975
  }
5355
5976
  },
5356
5977
  "key": "{borderColor.upsell.muted}"
@@ -5359,7 +5980,8 @@
5359
5980
  "attributes": {},
5360
5981
  "path": ["borderColor", "upsell", "muted"],
5361
5982
  "value": "#bf8fff",
5362
- "type": "color"
5983
+ "type": "color",
5984
+ "description": "Subtle border for upsell and promotional content"
5363
5985
  },
5364
5986
  "button-danger-bgColor-active": {
5365
5987
  "key": "{button.danger.bgColor.active}",
@@ -36528,6 +37150,10 @@
36528
37150
  "light-high-contrast": "#318bf8",
36529
37151
  "light-tritanopia-high-contrast": "#318bf8",
36530
37152
  "light-protanopia-deuteranopia-high-contrast": "#318bf8"
37153
+ },
37154
+ "org.primer.llm": {
37155
+ "usage": ["accent-text", "info-text", "accent-icon"],
37156
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36531
37157
  }
36532
37158
  },
36533
37159
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36535,6 +37161,7 @@
36535
37161
  "original": {
36536
37162
  "$value": "#74B9FF",
36537
37163
  "$type": "color",
37164
+ "$description": "Accent text for links and interactive elements",
36538
37165
  "$extensions": {
36539
37166
  "org.primer.figma": {
36540
37167
  "collection": "mode",
@@ -36554,6 +37181,10 @@
36554
37181
  "light-high-contrast": "{base.color.blue.6}",
36555
37182
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36556
37183
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37184
+ },
37185
+ "org.primer.llm": {
37186
+ "usage": ["accent-text", "info-text", "accent-icon"],
37187
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36557
37188
  }
36558
37189
  },
36559
37190
  "key": "{fgColor.accent}"
@@ -36562,7 +37193,8 @@
36562
37193
  "attributes": {},
36563
37194
  "path": ["fgColor", "accent"],
36564
37195
  "value": "#74b9ff",
36565
- "type": "color"
37196
+ "type": "color",
37197
+ "description": "Accent text for links and interactive elements"
36566
37198
  },
36567
37199
  "fgColor-attention": {
36568
37200
  "key": "{fgColor.attention}",
@@ -36581,6 +37213,10 @@
36581
37213
  "light-protanopia-deuteranopia-high-contrast": "#c88508",
36582
37214
  "light-tritanopia-high-contrast": "#c88508",
36583
37215
  "dark-dimmed-high-contrast": "#fbd669"
37216
+ },
37217
+ "org.primer.llm": {
37218
+ "usage": ["attention-text", "warning-text", "caution-text"],
37219
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36584
37220
  }
36585
37221
  },
36586
37222
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36588,6 +37224,7 @@
36588
37224
  "original": {
36589
37225
  "$value": "{base.color.yellow.3}",
36590
37226
  "$type": "color",
37227
+ "$description": "Attention text for warnings and caution states",
36591
37228
  "$extensions": {
36592
37229
  "org.primer.figma": {
36593
37230
  "collection": "mode",
@@ -36603,6 +37240,10 @@
36603
37240
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36604
37241
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36605
37242
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37243
+ },
37244
+ "org.primer.llm": {
37245
+ "usage": ["attention-text", "warning-text", "caution-text"],
37246
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36606
37247
  }
36607
37248
  },
36608
37249
  "key": "{fgColor.attention}"
@@ -36611,7 +37252,8 @@
36611
37252
  "attributes": {},
36612
37253
  "path": ["fgColor", "attention"],
36613
37254
  "value": "#f0b72f",
36614
- "type": "color"
37255
+ "type": "color",
37256
+ "description": "Attention text for warnings and caution states"
36615
37257
  },
36616
37258
  "fgColor-black": {
36617
37259
  "key": "{fgColor.black}",
@@ -36623,6 +37265,10 @@
36623
37265
  },
36624
37266
  "org.primer.overrides": {
36625
37267
  "dark": "#010409"
37268
+ },
37269
+ "org.primer.llm": {
37270
+ "doNotUse": true,
37271
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36626
37272
  }
36627
37273
  },
36628
37274
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36630,6 +37276,7 @@
36630
37276
  "original": {
36631
37277
  "$value": "{base.color.neutral.0}",
36632
37278
  "$type": "color",
37279
+ "$description": "Pure black text",
36633
37280
  "$extensions": {
36634
37281
  "org.primer.figma": {
36635
37282
  "collection": "mode",
@@ -36638,6 +37285,10 @@
36638
37285
  },
36639
37286
  "org.primer.overrides": {
36640
37287
  "dark": "{base.color.neutral.0}"
37288
+ },
37289
+ "org.primer.llm": {
37290
+ "doNotUse": true,
37291
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
36641
37292
  }
36642
37293
  },
36643
37294
  "key": "{fgColor.black}"
@@ -36646,7 +37297,8 @@
36646
37297
  "attributes": {},
36647
37298
  "path": ["fgColor", "black"],
36648
37299
  "value": "#010409",
36649
- "type": "color"
37300
+ "type": "color",
37301
+ "description": "Pure black text"
36650
37302
  },
36651
37303
  "fgColor-closed": {
36652
37304
  "key": "{fgColor.closed}",
@@ -36668,6 +37320,10 @@
36668
37320
  "dark-tritanopia-high-contrast": "#b7bdc8",
36669
37321
  "light-tritanopia": "#b7bdc8",
36670
37322
  "light-tritanopia-high-contrast": "#b7bdc8"
37323
+ },
37324
+ "org.primer.llm": {
37325
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37326
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36671
37327
  }
36672
37328
  },
36673
37329
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36675,6 +37331,7 @@
36675
37331
  "original": {
36676
37332
  "$value": "{fgColor.danger}",
36677
37333
  "$type": "color",
37334
+ "$description": "Text color for closed state indicators (issues, PRs)",
36678
37335
  "$extensions": {
36679
37336
  "org.primer.figma": {
36680
37337
  "collection": "mode",
@@ -36693,6 +37350,10 @@
36693
37350
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36694
37351
  "light-tritanopia": "{fgColor.muted}",
36695
37352
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37353
+ },
37354
+ "org.primer.llm": {
37355
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37356
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36696
37357
  }
36697
37358
  },
36698
37359
  "key": "{fgColor.closed}"
@@ -36701,7 +37362,8 @@
36701
37362
  "attributes": {},
36702
37363
  "path": ["fgColor", "closed"],
36703
37364
  "value": "#ff9492",
36704
- "type": "color"
37365
+ "type": "color",
37366
+ "description": "Text color for closed state indicators (issues, PRs)"
36705
37367
  },
36706
37368
  "fgColor-danger": {
36707
37369
  "key": "{fgColor.danger}",
@@ -36725,6 +37387,10 @@
36725
37387
  "dark-tritanopia-high-contrast": "#ff9492",
36726
37388
  "light-high-contrast": "#ff4445",
36727
37389
  "light-tritanopia-high-contrast": "#ff4445"
37390
+ },
37391
+ "org.primer.llm": {
37392
+ "usage": ["danger-text", "error-text", "destructive-text"],
37393
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36728
37394
  }
36729
37395
  },
36730
37396
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36732,6 +37398,7 @@
36732
37398
  "original": {
36733
37399
  "$value": "{base.color.red.3}",
36734
37400
  "$type": "color",
37401
+ "$description": "Danger text for errors and destructive actions",
36735
37402
  "$extensions": {
36736
37403
  "org.primer.figma": {
36737
37404
  "collection": "mode",
@@ -36752,6 +37419,10 @@
36752
37419
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36753
37420
  "light-high-contrast": "{base.color.red.6}",
36754
37421
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37422
+ },
37423
+ "org.primer.llm": {
37424
+ "usage": ["danger-text", "error-text", "destructive-text"],
37425
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36755
37426
  }
36756
37427
  },
36757
37428
  "key": "{fgColor.danger}"
@@ -36760,7 +37431,8 @@
36760
37431
  "attributes": {},
36761
37432
  "path": ["fgColor", "danger"],
36762
37433
  "value": "#ff9492",
36763
- "type": "color"
37434
+ "type": "color",
37435
+ "description": "Danger text for errors and destructive actions"
36764
37436
  },
36765
37437
  "fgColor-default": {
36766
37438
  "key": "{fgColor.default}",
@@ -36778,8 +37450,12 @@
36778
37450
  "dark-high-contrast": "#ffffff",
36779
37451
  "dark-tritanopia-high-contrast": "#ffffff",
36780
37452
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff",
36781
- "dark-dimmed": "#d1d7e0",
37453
+ "dark-dimmed": "#f0f6fc",
36782
37454
  "dark-dimmed-high-contrast": "#f0f6fc"
37455
+ },
37456
+ "org.primer.llm": {
37457
+ "usage": ["default-text", "heading", "body-text"],
37458
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36783
37459
  }
36784
37460
  },
36785
37461
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36787,6 +37463,7 @@
36787
37463
  "original": {
36788
37464
  "$value": "{base.color.neutral.13}",
36789
37465
  "$type": "color",
37466
+ "$description": "Default text color for primary content and headings",
36790
37467
  "$extensions": {
36791
37468
  "org.primer.figma": {
36792
37469
  "collection": "mode",
@@ -36801,8 +37478,12 @@
36801
37478
  "dark-high-contrast": "{base.color.neutral.13}",
36802
37479
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36803
37480
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36804
- "dark-dimmed": "{base.color.neutral.11}",
37481
+ "dark-dimmed": "{base.color.neutral.12}",
36805
37482
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37483
+ },
37484
+ "org.primer.llm": {
37485
+ "usage": ["default-text", "heading", "body-text"],
37486
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36806
37487
  }
36807
37488
  },
36808
37489
  "key": "{fgColor.default}"
@@ -36811,7 +37492,8 @@
36811
37492
  "attributes": {},
36812
37493
  "path": ["fgColor", "default"],
36813
37494
  "value": "#ffffff",
36814
- "type": "color"
37495
+ "type": "color",
37496
+ "description": "Default text color for primary content and headings"
36815
37497
  },
36816
37498
  "fgColor-disabled": {
36817
37499
  "key": "{fgColor.disabled}",
@@ -36836,6 +37518,10 @@
36836
37518
  "dark-high-contrast": "#656c76",
36837
37519
  "dark-tritanopia-high-contrast": "#656c76",
36838
37520
  "dark-protanopia-deuteranopia-high-contrast": "#656c76"
37521
+ },
37522
+ "org.primer.llm": {
37523
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37524
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36839
37525
  }
36840
37526
  },
36841
37527
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36843,6 +37529,7 @@
36843
37529
  "original": {
36844
37530
  "$value": "{base.color.neutral.8}",
36845
37531
  "$type": "color",
37532
+ "$description": "Text color for disabled interactive elements",
36846
37533
  "$extensions": {
36847
37534
  "org.primer.figma": {
36848
37535
  "collection": "mode",
@@ -36864,6 +37551,10 @@
36864
37551
  "dark-high-contrast": "{base.color.neutral.8}",
36865
37552
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36866
37553
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37554
+ },
37555
+ "org.primer.llm": {
37556
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37557
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36867
37558
  }
36868
37559
  },
36869
37560
  "key": "{fgColor.disabled}"
@@ -36872,7 +37563,8 @@
36872
37563
  "attributes": {},
36873
37564
  "path": ["fgColor", "disabled"],
36874
37565
  "value": "#656c76",
36875
- "type": "color"
37566
+ "type": "color",
37567
+ "description": "Text color for disabled interactive elements"
36876
37568
  },
36877
37569
  "fgColor-done": {
36878
37570
  "key": "{fgColor.done}",
@@ -36894,6 +37586,10 @@
36894
37586
  "light-high-contrast": "#a66bff",
36895
37587
  "light-protanopia-deuteranopia-high-contrast": "#a66bff",
36896
37588
  "light-tritanopia-high-contrast": "#a66bff"
37589
+ },
37590
+ "org.primer.llm": {
37591
+ "usage": ["done-text", "merged", "completed"],
37592
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36897
37593
  }
36898
37594
  },
36899
37595
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36901,6 +37597,7 @@
36901
37597
  "original": {
36902
37598
  "$value": "#D3ABFF",
36903
37599
  "$type": "color",
37600
+ "$description": "Text color for completed/done state indicators",
36904
37601
  "$extensions": {
36905
37602
  "org.primer.figma": {
36906
37603
  "collection": "mode",
@@ -36919,6 +37616,10 @@
36919
37616
  "light-high-contrast": "{base.color.purple.6}",
36920
37617
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36921
37618
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37619
+ },
37620
+ "org.primer.llm": {
37621
+ "usage": ["done-text", "merged", "completed"],
37622
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36922
37623
  }
36923
37624
  },
36924
37625
  "key": "{fgColor.done}"
@@ -36927,7 +37628,8 @@
36927
37628
  "attributes": {},
36928
37629
  "path": ["fgColor", "done"],
36929
37630
  "value": "#d3abff",
36930
- "type": "color"
37631
+ "type": "color",
37632
+ "description": "Text color for completed/done state indicators"
36931
37633
  },
36932
37634
  "fgColor-draft": {
36933
37635
  "key": "{fgColor.draft}",
@@ -36939,6 +37641,10 @@
36939
37641
  "codeSyntax": {
36940
37642
  "web": "var(--fgColor-draft)"
36941
37643
  }
37644
+ },
37645
+ "org.primer.llm": {
37646
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37647
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36942
37648
  }
36943
37649
  },
36944
37650
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36946,6 +37652,7 @@
36946
37652
  "original": {
36947
37653
  "$value": "{fgColor.neutral}",
36948
37654
  "$type": "color",
37655
+ "$description": "Text color for draft state indicators",
36949
37656
  "$extensions": {
36950
37657
  "org.primer.figma": {
36951
37658
  "collection": "mode",
@@ -36954,6 +37661,10 @@
36954
37661
  "codeSyntax": {
36955
37662
  "web": "var(--fgColor-draft)"
36956
37663
  }
37664
+ },
37665
+ "org.primer.llm": {
37666
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37667
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36957
37668
  }
36958
37669
  },
36959
37670
  "key": "{fgColor.draft}"
@@ -36962,7 +37673,8 @@
36962
37673
  "attributes": {},
36963
37674
  "path": ["fgColor", "draft"],
36964
37675
  "value": "#d1d7e0",
36965
- "type": "color"
37676
+ "type": "color",
37677
+ "description": "Text color for draft state indicators"
36966
37678
  },
36967
37679
  "fgColor-link": {
36968
37680
  "key": "{fgColor.link}",
@@ -36974,6 +37686,10 @@
36974
37686
  "codeSyntax": {
36975
37687
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36976
37688
  }
37689
+ },
37690
+ "org.primer.llm": {
37691
+ "usage": ["link-text", "hyperlink"],
37692
+ "rules": "MUST use for all text links. Provides expected link affordance."
36977
37693
  }
36978
37694
  },
36979
37695
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36981,6 +37697,7 @@
36981
37697
  "original": {
36982
37698
  "$value": "{fgColor.accent}",
36983
37699
  "$type": "color",
37700
+ "$description": "Text color for hyperlinks",
36984
37701
  "$extensions": {
36985
37702
  "org.primer.figma": {
36986
37703
  "collection": "mode",
@@ -36989,6 +37706,10 @@
36989
37706
  "codeSyntax": {
36990
37707
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36991
37708
  }
37709
+ },
37710
+ "org.primer.llm": {
37711
+ "usage": ["link-text", "hyperlink"],
37712
+ "rules": "MUST use for all text links. Provides expected link affordance."
36992
37713
  }
36993
37714
  },
36994
37715
  "key": "{fgColor.link}"
@@ -36997,7 +37718,8 @@
36997
37718
  "attributes": {},
36998
37719
  "path": ["fgColor", "link"],
36999
37720
  "value": "#74b9ff",
37000
- "type": "color"
37721
+ "type": "color",
37722
+ "description": "Text color for hyperlinks"
37001
37723
  },
37002
37724
  "fgColor-muted": {
37003
37725
  "key": "{fgColor.muted}",
@@ -37018,6 +37740,10 @@
37018
37740
  "dark-dimmed-high-contrast": "#b7bdc8",
37019
37741
  "dark-tritanopia-high-contrast": "#b7bdc8",
37020
37742
  "dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
37743
+ },
37744
+ "org.primer.llm": {
37745
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37746
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37021
37747
  }
37022
37748
  },
37023
37749
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37025,6 +37751,7 @@
37025
37751
  "original": {
37026
37752
  "$value": "{base.color.neutral.10}",
37027
37753
  "$type": "color",
37754
+ "$description": "Muted text for secondary content and less important information",
37028
37755
  "$extensions": {
37029
37756
  "org.primer.figma": {
37030
37757
  "collection": "mode",
@@ -37042,6 +37769,10 @@
37042
37769
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37043
37770
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37044
37771
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37772
+ },
37773
+ "org.primer.llm": {
37774
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37775
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37045
37776
  }
37046
37777
  },
37047
37778
  "key": "{fgColor.muted}"
@@ -37050,7 +37781,8 @@
37050
37781
  "attributes": {},
37051
37782
  "path": ["fgColor", "muted"],
37052
37783
  "value": "#b7bdc8",
37053
- "type": "color"
37784
+ "type": "color",
37785
+ "description": "Muted text for secondary content and less important information"
37054
37786
  },
37055
37787
  "fgColor-neutral": {
37056
37788
  "key": "{fgColor.neutral}",
@@ -37068,6 +37800,10 @@
37068
37800
  "dark-dimmed-high-contrast": "#d1d7e0",
37069
37801
  "dark-tritanopia-high-contrast": "#d1d7e0",
37070
37802
  "dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
37803
+ },
37804
+ "org.primer.llm": {
37805
+ "usage": ["neutral-icon", "neutral-text"],
37806
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37071
37807
  }
37072
37808
  },
37073
37809
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37075,6 +37811,7 @@
37075
37811
  "original": {
37076
37812
  "$value": "{base.color.neutral.11}",
37077
37813
  "$type": "color",
37814
+ "$description": "Neutral semantic text for icons and secondary elements",
37078
37815
  "$extensions": {
37079
37816
  "org.primer.figma": {
37080
37817
  "collection": "mode",
@@ -37089,6 +37826,10 @@
37089
37826
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37090
37827
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37091
37828
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37829
+ },
37830
+ "org.primer.llm": {
37831
+ "usage": ["neutral-icon", "neutral-text"],
37832
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37092
37833
  }
37093
37834
  },
37094
37835
  "key": "{fgColor.neutral}"
@@ -37097,7 +37838,8 @@
37097
37838
  "attributes": {},
37098
37839
  "path": ["fgColor", "neutral"],
37099
37840
  "value": "#d1d7e0",
37100
- "type": "color"
37841
+ "type": "color",
37842
+ "description": "Neutral semantic text for icons and secondary elements"
37101
37843
  },
37102
37844
  "fgColor-onEmphasis": {
37103
37845
  "key": "{fgColor.onEmphasis}",
@@ -37114,6 +37856,10 @@
37114
37856
  "dark": "#ffffff",
37115
37857
  "dark-dimmed": "#f0f6fc",
37116
37858
  "dark-dimmed-high-contrast": "#ffffff"
37859
+ },
37860
+ "org.primer.llm": {
37861
+ "usage": ["text-on-emphasis", "contrast-text"],
37862
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37117
37863
  }
37118
37864
  },
37119
37865
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37121,6 +37867,7 @@
37121
37867
  "original": {
37122
37868
  "$value": "{base.color.neutral.13}",
37123
37869
  "$type": "color",
37870
+ "$description": "Text color for use on emphasis backgrounds",
37124
37871
  "$extensions": {
37125
37872
  "org.primer.figma": {
37126
37873
  "collection": "mode",
@@ -37134,6 +37881,10 @@
37134
37881
  "dark": "{base.color.neutral.13}",
37135
37882
  "dark-dimmed": "{base.color.neutral.12}",
37136
37883
  "dark-dimmed-high-contrast": "#ffffff"
37884
+ },
37885
+ "org.primer.llm": {
37886
+ "usage": ["text-on-emphasis", "contrast-text"],
37887
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37137
37888
  }
37138
37889
  },
37139
37890
  "key": "{fgColor.onEmphasis}"
@@ -37142,7 +37893,8 @@
37142
37893
  "attributes": {},
37143
37894
  "path": ["fgColor", "onEmphasis"],
37144
37895
  "value": "#ffffff",
37145
- "type": "color"
37896
+ "type": "color",
37897
+ "description": "Text color for use on emphasis backgrounds"
37146
37898
  },
37147
37899
  "fgColor-onInverse": {
37148
37900
  "key": "{fgColor.onInverse}",
@@ -37151,6 +37903,10 @@
37151
37903
  "collection": "mode",
37152
37904
  "group": "semantic",
37153
37905
  "scopes": ["fgColor"]
37906
+ },
37907
+ "org.primer.llm": {
37908
+ "usage": ["text-on-inverse", "inverse-text"],
37909
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37154
37910
  }
37155
37911
  },
37156
37912
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37158,11 +37914,16 @@
37158
37914
  "original": {
37159
37915
  "$value": "{base.color.neutral.0}",
37160
37916
  "$type": "color",
37917
+ "$description": "Text color for use on inverse backgrounds",
37161
37918
  "$extensions": {
37162
37919
  "org.primer.figma": {
37163
37920
  "collection": "mode",
37164
37921
  "group": "semantic",
37165
37922
  "scopes": ["fgColor"]
37923
+ },
37924
+ "org.primer.llm": {
37925
+ "usage": ["text-on-inverse", "inverse-text"],
37926
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37166
37927
  }
37167
37928
  },
37168
37929
  "key": "{fgColor.onInverse}"
@@ -37171,7 +37932,8 @@
37171
37932
  "attributes": {},
37172
37933
  "path": ["fgColor", "onInverse"],
37173
37934
  "value": "#010409",
37174
- "type": "color"
37935
+ "type": "color",
37936
+ "description": "Text color for use on inverse backgrounds"
37175
37937
  },
37176
37938
  "fgColor-open": {
37177
37939
  "key": "{fgColor.open}",
@@ -37193,6 +37955,10 @@
37193
37955
  "dark-tritanopia-high-contrast": "#ffb1af",
37194
37956
  "light-tritanopia": "#ff6a69",
37195
37957
  "light-tritanopia-high-contrast": "#ff4445"
37958
+ },
37959
+ "org.primer.llm": {
37960
+ "usage": ["open-text", "open-issue", "open-pr"],
37961
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37196
37962
  }
37197
37963
  },
37198
37964
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37200,6 +37966,7 @@
37200
37966
  "original": {
37201
37967
  "$value": "{fgColor.success}",
37202
37968
  "$type": "color",
37969
+ "$description": "Text color for open state indicators (issues, PRs)",
37203
37970
  "$extensions": {
37204
37971
  "org.primer.figma": {
37205
37972
  "collection": "mode",
@@ -37218,6 +37985,10 @@
37218
37985
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37219
37986
  "light-tritanopia": "{base.color.red.5}",
37220
37987
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37988
+ },
37989
+ "org.primer.llm": {
37990
+ "usage": ["open-text", "open-issue", "open-pr"],
37991
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37221
37992
  }
37222
37993
  },
37223
37994
  "key": "{fgColor.open}"
@@ -37226,7 +37997,8 @@
37226
37997
  "attributes": {},
37227
37998
  "path": ["fgColor", "open"],
37228
37999
  "value": "#2bd853",
37229
- "type": "color"
38000
+ "type": "color",
38001
+ "description": "Text color for open state indicators (issues, PRs)"
37230
38002
  },
37231
38003
  "fgColor-severe": {
37232
38004
  "key": "{fgColor.severe}",
@@ -37250,6 +38022,10 @@
37250
38022
  "light-tritanopia": "#ff6a69",
37251
38023
  "light-tritanopia-high-contrast": "#ff4445",
37252
38024
  "light-protanopia-deuteranopia-high-contrast": "#d57014"
38025
+ },
38026
+ "org.primer.llm": {
38027
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38028
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37253
38029
  }
37254
38030
  },
37255
38031
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37257,6 +38033,7 @@
37257
38033
  "original": {
37258
38034
  "$value": "{base.color.orange.3}",
37259
38035
  "$type": "color",
38036
+ "$description": "Severe text for high-priority warnings",
37260
38037
  "$extensions": {
37261
38038
  "org.primer.figma": {
37262
38039
  "collection": "mode",
@@ -37277,6 +38054,10 @@
37277
38054
  "light-tritanopia": "{base.color.red.5}",
37278
38055
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37279
38056
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
38057
+ },
38058
+ "org.primer.llm": {
38059
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
38060
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37280
38061
  }
37281
38062
  },
37282
38063
  "key": "{fgColor.severe}"
@@ -37285,7 +38066,8 @@
37285
38066
  "attributes": {},
37286
38067
  "path": ["fgColor", "severe"],
37287
38068
  "value": "#fe9a2d",
37288
- "type": "color"
38069
+ "type": "color",
38070
+ "description": "Severe text for high-priority warnings"
37289
38071
  },
37290
38072
  "fgColor-sponsors": {
37291
38073
  "key": "{fgColor.sponsors}",
@@ -37307,6 +38089,10 @@
37307
38089
  "light-high-contrast": "#e456a3",
37308
38090
  "light-protanopia-deuteranopia-high-contrast": "#e456a3",
37309
38091
  "light-tritanopia-high-contrast": "#e456a3"
38092
+ },
38093
+ "org.primer.llm": {
38094
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38095
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37310
38096
  }
37311
38097
  },
37312
38098
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37314,6 +38100,7 @@
37314
38100
  "original": {
37315
38101
  "$value": "#FF90C8",
37316
38102
  "$type": "color",
38103
+ "$description": "Text color for GitHub Sponsors content",
37317
38104
  "$extensions": {
37318
38105
  "org.primer.figma": {
37319
38106
  "collection": "mode",
@@ -37332,6 +38119,10 @@
37332
38119
  "light-high-contrast": "{base.color.pink.6}",
37333
38120
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37334
38121
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38122
+ },
38123
+ "org.primer.llm": {
38124
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38125
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37335
38126
  }
37336
38127
  },
37337
38128
  "key": "{fgColor.sponsors}"
@@ -37340,7 +38131,8 @@
37340
38131
  "attributes": {},
37341
38132
  "path": ["fgColor", "sponsors"],
37342
38133
  "value": "#ff90c8",
37343
- "type": "color"
38134
+ "type": "color",
38135
+ "description": "Text color for GitHub Sponsors content"
37344
38136
  },
37345
38137
  "fgColor-success": {
37346
38138
  "key": "{fgColor.success}",
@@ -37366,6 +38158,10 @@
37366
38158
  "dark-tritanopia-high-contrast": "#91cbff",
37367
38159
  "light-tritanopia": "#409eff",
37368
38160
  "light-tritanopia-high-contrast": "#318bf8"
38161
+ },
38162
+ "org.primer.llm": {
38163
+ "usage": ["success-text", "positive-text", "success-icon"],
38164
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37369
38165
  }
37370
38166
  },
37371
38167
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37373,6 +38169,7 @@
37373
38169
  "original": {
37374
38170
  "$value": "#2BD853",
37375
38171
  "$type": "color",
38172
+ "$description": "Success text for positive feedback and completed states",
37376
38173
  "$extensions": {
37377
38174
  "org.primer.figma": {
37378
38175
  "collection": "mode",
@@ -37395,6 +38192,10 @@
37395
38192
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37396
38193
  "light-tritanopia": "{base.color.blue.5}",
37397
38194
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38195
+ },
38196
+ "org.primer.llm": {
38197
+ "usage": ["success-text", "positive-text", "success-icon"],
38198
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37398
38199
  }
37399
38200
  },
37400
38201
  "key": "{fgColor.success}"
@@ -37403,7 +38204,8 @@
37403
38204
  "attributes": {},
37404
38205
  "path": ["fgColor", "success"],
37405
38206
  "value": "#2bd853",
37406
- "type": "color"
38207
+ "type": "color",
38208
+ "description": "Success text for positive feedback and completed states"
37407
38209
  },
37408
38210
  "fgColor-upsell": {
37409
38211
  "key": "{fgColor.upsell}",
@@ -37415,6 +38217,10 @@
37415
38217
  "codeSyntax": {
37416
38218
  "web": "var(--fgColor-upsell)"
37417
38219
  }
38220
+ },
38221
+ "org.primer.llm": {
38222
+ "usage": ["upsell-text", "premium-text", "promotional"],
38223
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37418
38224
  }
37419
38225
  },
37420
38226
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37422,6 +38228,7 @@
37422
38228
  "original": {
37423
38229
  "$value": "{fgColor.done}",
37424
38230
  "$type": "color",
38231
+ "$description": "Text color for upsell and promotional content",
37425
38232
  "$extensions": {
37426
38233
  "org.primer.figma": {
37427
38234
  "collection": "mode",
@@ -37430,6 +38237,10 @@
37430
38237
  "codeSyntax": {
37431
38238
  "web": "var(--fgColor-upsell)"
37432
38239
  }
38240
+ },
38241
+ "org.primer.llm": {
38242
+ "usage": ["upsell-text", "premium-text", "promotional"],
38243
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37433
38244
  }
37434
38245
  },
37435
38246
  "key": "{fgColor.upsell}"
@@ -37438,7 +38249,8 @@
37438
38249
  "attributes": {},
37439
38250
  "path": ["fgColor", "upsell"],
37440
38251
  "value": "#d3abff",
37441
- "type": "color"
38252
+ "type": "color",
38253
+ "description": "Text color for upsell and promotional content"
37442
38254
  },
37443
38255
  "fgColor-white": {
37444
38256
  "key": "{fgColor.white}",
@@ -37450,6 +38262,10 @@
37450
38262
  },
37451
38263
  "org.primer.overrides": {
37452
38264
  "dark": "#ffffff"
38265
+ },
38266
+ "org.primer.llm": {
38267
+ "doNotUse": true,
38268
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37453
38269
  }
37454
38270
  },
37455
38271
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37457,6 +38273,7 @@
37457
38273
  "original": {
37458
38274
  "$value": "{base.color.neutral.13}",
37459
38275
  "$type": "color",
38276
+ "$description": "Pure white text",
37460
38277
  "$extensions": {
37461
38278
  "org.primer.figma": {
37462
38279
  "collection": "mode",
@@ -37465,6 +38282,10 @@
37465
38282
  },
37466
38283
  "org.primer.overrides": {
37467
38284
  "dark": "{base.color.neutral.13}"
38285
+ },
38286
+ "org.primer.llm": {
38287
+ "doNotUse": true,
38288
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
37468
38289
  }
37469
38290
  },
37470
38291
  "key": "{fgColor.white}"
@@ -37473,10 +38294,17 @@
37473
38294
  "attributes": {},
37474
38295
  "path": ["fgColor", "white"],
37475
38296
  "value": "#ffffff",
37476
- "type": "color"
38297
+ "type": "color",
38298
+ "description": "Pure white text"
37477
38299
  },
37478
38300
  "focus-outline": {
37479
38301
  "key": "{focus.outline}",
38302
+ "$extensions": {
38303
+ "org.primer.llm": {
38304
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38305
+ "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
38306
+ }
38307
+ },
37480
38308
  "filePath": "src/tokens/functional/border/border.json5",
37481
38309
  "isSource": true,
37482
38310
  "original": {
@@ -37486,13 +38314,21 @@
37486
38314
  "width": "2px"
37487
38315
  },
37488
38316
  "$type": "border",
38317
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38318
+ "$extensions": {
38319
+ "org.primer.llm": {
38320
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38321
+ "rules": "Always ensure focus states are visible. Do not override with custom focus styles that reduce visibility. Use for interactive elements like buttons, links, and form controls."
38322
+ }
38323
+ },
37489
38324
  "key": "{focus.outline}"
37490
38325
  },
37491
38326
  "name": "focus-outline",
37492
38327
  "attributes": {},
37493
38328
  "path": ["focus", "outline"],
37494
38329
  "value": "2px solid #409eff",
37495
- "type": "border"
38330
+ "type": "border",
38331
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37496
38332
  },
37497
38333
  "focus-outlineColor": {
37498
38334
  "key": "{focus.outlineColor}",
@@ -37501,6 +38337,10 @@
37501
38337
  "collection": "mode",
37502
38338
  "group": "component (internal)",
37503
38339
  "scopes": ["borderColor", "effectColor"]
38340
+ },
38341
+ "org.primer.llm": {
38342
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38343
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37504
38344
  }
37505
38345
  },
37506
38346
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37508,11 +38348,16 @@
37508
38348
  "original": {
37509
38349
  "$value": "{borderColor.accent.emphasis}",
37510
38350
  "$type": "color",
38351
+ "$description": "Outline color for focus states on interactive elements",
37511
38352
  "$extensions": {
37512
38353
  "org.primer.figma": {
37513
38354
  "collection": "mode",
37514
38355
  "group": "component (internal)",
37515
38356
  "scopes": ["borderColor", "effectColor"]
38357
+ },
38358
+ "org.primer.llm": {
38359
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38360
+ "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
37516
38361
  }
37517
38362
  },
37518
38363
  "key": "{focus.outlineColor}"
@@ -37521,7 +38366,8 @@
37521
38366
  "attributes": {},
37522
38367
  "path": ["focus", "outlineColor"],
37523
38368
  "value": "#409eff",
37524
- "type": "color"
38369
+ "type": "color",
38370
+ "description": "Outline color for focus states on interactive elements"
37525
38371
  },
37526
38372
  "header-bgColor": {
37527
38373
  "key": "{header.bgColor}",
@@ -46582,6 +47428,10 @@
46582
47428
  "isSource": true,
46583
47429
  "$type": "color"
46584
47430
  }
47431
+ },
47432
+ "org.primer.llm": {
47433
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47434
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46585
47435
  }
46586
47436
  },
46587
47437
  "alpha": 0.7,
@@ -46590,6 +47440,7 @@
46590
47440
  "original": {
46591
47441
  "$value": "{bgColor.accent.emphasis}",
46592
47442
  "$type": "color",
47443
+ "$description": "Background color for text selection highlights",
46593
47444
  "$extensions": {
46594
47445
  "org.primer.figma": {
46595
47446
  "collection": "mode",
@@ -46604,6 +47455,10 @@
46604
47455
  "isSource": true,
46605
47456
  "$type": "color"
46606
47457
  }
47458
+ },
47459
+ "org.primer.llm": {
47460
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47461
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46607
47462
  }
46608
47463
  },
46609
47464
  "alpha": 0.7,
@@ -46613,7 +47468,8 @@
46613
47468
  "attributes": {},
46614
47469
  "path": ["selection", "bgColor"],
46615
47470
  "value": "#194fb1b3",
46616
- "type": "color"
47471
+ "type": "color",
47472
+ "description": "Background color for text selection highlights"
46617
47473
  },
46618
47474
  "shadow-floating-large": {
46619
47475
  "key": "{shadow.floating.large}",
@@ -46646,6 +47502,10 @@
46646
47502
  "isSource": true,
46647
47503
  "$type": "shadow"
46648
47504
  }
47505
+ },
47506
+ "org.primer.llm": {
47507
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47508
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46649
47509
  }
46650
47510
  },
46651
47511
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46670,6 +47530,7 @@
46670
47530
  }
46671
47531
  ],
46672
47532
  "$type": "shadow",
47533
+ "$description": "Large floating shadow for modals and dialogs",
46673
47534
  "$extensions": {
46674
47535
  "org.primer.figma": {
46675
47536
  "collection": "mode",
@@ -46699,6 +47560,10 @@
46699
47560
  "isSource": true,
46700
47561
  "$type": "shadow"
46701
47562
  }
47563
+ },
47564
+ "org.primer.llm": {
47565
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47566
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46702
47567
  }
46703
47568
  },
46704
47569
  "key": "{shadow.floating.large}"
@@ -46707,7 +47572,8 @@
46707
47572
  "attributes": {},
46708
47573
  "path": ["shadow", "floating", "large"],
46709
47574
  "value": "0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409",
46710
- "type": "shadow"
47575
+ "type": "shadow",
47576
+ "description": "Large floating shadow for modals and dialogs"
46711
47577
  },
46712
47578
  "shadow-floating-legacy": {
46713
47579
  "key": "{shadow.floating.legacy}",
@@ -46737,6 +47603,10 @@
46737
47603
  "isSource": true,
46738
47604
  "$type": "shadow"
46739
47605
  }
47606
+ },
47607
+ "org.primer.llm": {
47608
+ "usage": ["legacy-component", "backward-compatibility"],
47609
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46740
47610
  }
46741
47611
  },
46742
47612
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46761,6 +47631,7 @@
46761
47631
  }
46762
47632
  ],
46763
47633
  "$type": "shadow",
47634
+ "$description": "Legacy floating shadow for backward compatibility",
46764
47635
  "$extensions": {
46765
47636
  "org.primer.figma": {},
46766
47637
  "org.primer.overrides": {
@@ -46787,6 +47658,10 @@
46787
47658
  "isSource": true,
46788
47659
  "$type": "shadow"
46789
47660
  }
47661
+ },
47662
+ "org.primer.llm": {
47663
+ "usage": ["legacy-component", "backward-compatibility"],
47664
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46790
47665
  }
46791
47666
  },
46792
47667
  "key": "{shadow.floating.legacy}"
@@ -46795,7 +47670,8 @@
46795
47670
  "attributes": {},
46796
47671
  "path": ["shadow", "floating", "legacy"],
46797
47672
  "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
46798
- "type": "shadow"
47673
+ "type": "shadow",
47674
+ "description": "Legacy floating shadow for backward compatibility"
46799
47675
  },
46800
47676
  "shadow-floating-medium": {
46801
47677
  "key": "{shadow.floating.medium}",
@@ -46852,6 +47728,10 @@
46852
47728
  "isSource": true,
46853
47729
  "$type": "shadow"
46854
47730
  }
47731
+ },
47732
+ "org.primer.llm": {
47733
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47734
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46855
47735
  }
46856
47736
  },
46857
47737
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46900,6 +47780,7 @@
46900
47780
  }
46901
47781
  ],
46902
47782
  "$type": "shadow",
47783
+ "$description": "Medium floating shadow for popovers and action menus",
46903
47784
  "$extensions": {
46904
47785
  "org.primer.figma": {
46905
47786
  "collection": "mode",
@@ -46953,6 +47834,10 @@
46953
47834
  "isSource": true,
46954
47835
  "$type": "shadow"
46955
47836
  }
47837
+ },
47838
+ "org.primer.llm": {
47839
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47840
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
46956
47841
  }
46957
47842
  },
46958
47843
  "key": "{shadow.floating.medium}"
@@ -46961,7 +47846,8 @@
46961
47846
  "attributes": {},
46962
47847
  "path": ["shadow", "floating", "medium"],
46963
47848
  "value": "0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
46964
- "type": "shadow"
47849
+ "type": "shadow",
47850
+ "description": "Medium floating shadow for popovers and action menus"
46965
47851
  },
46966
47852
  "shadow-floating-small": {
46967
47853
  "key": "{shadow.floating.small}",
@@ -47002,6 +47888,10 @@
47002
47888
  "isSource": true,
47003
47889
  "$type": "shadow"
47004
47890
  }
47891
+ },
47892
+ "org.primer.llm": {
47893
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47894
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47005
47895
  }
47006
47896
  },
47007
47897
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47034,6 +47924,7 @@
47034
47924
  }
47035
47925
  ],
47036
47926
  "$type": "shadow",
47927
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47037
47928
  "$extensions": {
47038
47929
  "org.primer.figma": {
47039
47930
  "collection": "mode",
@@ -47071,6 +47962,10 @@
47071
47962
  "isSource": true,
47072
47963
  "$type": "shadow"
47073
47964
  }
47965
+ },
47966
+ "org.primer.llm": {
47967
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47968
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47074
47969
  }
47075
47970
  },
47076
47971
  "key": "{shadow.floating.small}"
@@ -47079,7 +47974,8 @@
47079
47974
  "attributes": {},
47080
47975
  "path": ["shadow", "floating", "small"],
47081
47976
  "value": "0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47082
- "type": "shadow"
47977
+ "type": "shadow",
47978
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47083
47979
  },
47084
47980
  "shadow-floating-xlarge": {
47085
47981
  "key": "{shadow.floating.xlarge}",
@@ -47112,6 +48008,10 @@
47112
48008
  "isSource": true,
47113
48009
  "$type": "shadow"
47114
48010
  }
48011
+ },
48012
+ "org.primer.llm": {
48013
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48014
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47115
48015
  }
47116
48016
  },
47117
48017
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47136,6 +48036,7 @@
47136
48036
  }
47137
48037
  ],
47138
48038
  "$type": "shadow",
48039
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47139
48040
  "$extensions": {
47140
48041
  "org.primer.figma": {
47141
48042
  "collection": "mode",
@@ -47165,6 +48066,10 @@
47165
48066
  "isSource": true,
47166
48067
  "$type": "shadow"
47167
48068
  }
48069
+ },
48070
+ "org.primer.llm": {
48071
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48072
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47168
48073
  }
47169
48074
  },
47170
48075
  "key": "{shadow.floating.xlarge}"
@@ -47173,7 +48078,8 @@
47173
48078
  "attributes": {},
47174
48079
  "path": ["shadow", "floating", "xlarge"],
47175
48080
  "value": "0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409",
47176
- "type": "shadow"
48081
+ "type": "shadow",
48082
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47177
48083
  },
47178
48084
  "shadow-inset": {
47179
48085
  "key": "{shadow.inset}",
@@ -47197,6 +48103,10 @@
47197
48103
  "isSource": true,
47198
48104
  "$type": "shadow"
47199
48105
  }
48106
+ },
48107
+ "org.primer.llm": {
48108
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48109
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47200
48110
  }
47201
48111
  },
47202
48112
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47212,6 +48122,7 @@
47212
48122
  "inset": true
47213
48123
  },
47214
48124
  "$type": "shadow",
48125
+ "$description": "Inset shadow for recessed elements",
47215
48126
  "$extensions": {
47216
48127
  "org.primer.figma": {
47217
48128
  "collection": "mode",
@@ -47232,6 +48143,10 @@
47232
48143
  "isSource": true,
47233
48144
  "$type": "shadow"
47234
48145
  }
48146
+ },
48147
+ "org.primer.llm": {
48148
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48149
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47235
48150
  }
47236
48151
  },
47237
48152
  "key": "{shadow.inset}"
@@ -47240,7 +48155,8 @@
47240
48155
  "attributes": {},
47241
48156
  "path": ["shadow", "inset"],
47242
48157
  "value": "inset 0px 1px 0px 0px #0104093d",
47243
- "type": "shadow"
48158
+ "type": "shadow",
48159
+ "description": "Inset shadow for recessed elements"
47244
48160
  },
47245
48161
  "shadow-resting-medium": {
47246
48162
  "key": "{shadow.resting.medium}",
@@ -47273,6 +48189,10 @@
47273
48189
  "isSource": true,
47274
48190
  "$type": "shadow"
47275
48191
  }
48192
+ },
48193
+ "org.primer.llm": {
48194
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48195
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47276
48196
  }
47277
48197
  },
47278
48198
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47297,6 +48217,7 @@
47297
48217
  }
47298
48218
  ],
47299
48219
  "$type": "shadow",
48220
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47300
48221
  "$extensions": {
47301
48222
  "org.primer.figma": {
47302
48223
  "collection": "mode",
@@ -47326,6 +48247,10 @@
47326
48247
  "isSource": true,
47327
48248
  "$type": "shadow"
47328
48249
  }
48250
+ },
48251
+ "org.primer.llm": {
48252
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48253
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
47329
48254
  }
47330
48255
  },
47331
48256
  "key": "{shadow.resting.medium}"
@@ -47334,7 +48259,8 @@
47334
48259
  "attributes": {},
47335
48260
  "path": ["shadow", "resting", "medium"],
47336
48261
  "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
47337
- "type": "shadow"
48262
+ "type": "shadow",
48263
+ "description": "Medium resting shadow for cards and elevated surfaces"
47338
48264
  },
47339
48265
  "shadow-resting-small": {
47340
48266
  "key": "{shadow.resting.small}",
@@ -47369,6 +48295,10 @@
47369
48295
  "isSource": true,
47370
48296
  "$type": "shadow"
47371
48297
  }
48298
+ },
48299
+ "org.primer.llm": {
48300
+ "usage": ["button", "interactive-card", "clickable-element"],
48301
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47372
48302
  }
47373
48303
  },
47374
48304
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47395,6 +48325,7 @@
47395
48325
  }
47396
48326
  ],
47397
48327
  "$type": "shadow",
48328
+ "$description": "Small resting shadow for buttons and interactive elements",
47398
48329
  "$extensions": {
47399
48330
  "org.primer.figma": {
47400
48331
  "collection": "mode",
@@ -47426,6 +48357,10 @@
47426
48357
  "isSource": true,
47427
48358
  "$type": "shadow"
47428
48359
  }
48360
+ },
48361
+ "org.primer.llm": {
48362
+ "usage": ["button", "interactive-card", "clickable-element"],
48363
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47429
48364
  }
47430
48365
  },
47431
48366
  "key": "{shadow.resting.small}"
@@ -47434,7 +48369,8 @@
47434
48369
  "attributes": {},
47435
48370
  "path": ["shadow", "resting", "small"],
47436
48371
  "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
47437
- "type": "shadow"
48372
+ "type": "shadow",
48373
+ "description": "Small resting shadow for buttons and interactive elements"
47438
48374
  },
47439
48375
  "shadow-resting-xsmall": {
47440
48376
  "key": "{shadow.resting.xsmall}",
@@ -47458,6 +48394,10 @@
47458
48394
  "isSource": true,
47459
48395
  "$type": "shadow"
47460
48396
  }
48397
+ },
48398
+ "org.primer.llm": {
48399
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48400
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47461
48401
  }
47462
48402
  },
47463
48403
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47473,6 +48413,7 @@
47473
48413
  "inset": false
47474
48414
  },
47475
48415
  "$type": "shadow",
48416
+ "$description": "Extra small resting shadow for minimal elevation",
47476
48417
  "$extensions": {
47477
48418
  "org.primer.figma": {
47478
48419
  "collection": "mode",
@@ -47493,6 +48434,10 @@
47493
48434
  "isSource": true,
47494
48435
  "$type": "shadow"
47495
48436
  }
48437
+ },
48438
+ "org.primer.llm": {
48439
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48440
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47496
48441
  }
47497
48442
  },
47498
48443
  "key": "{shadow.resting.xsmall}"
@@ -47501,7 +48446,8 @@
47501
48446
  "attributes": {},
47502
48447
  "path": ["shadow", "resting", "xsmall"],
47503
48448
  "value": "0px 1px 1px 0px #010409cc",
47504
- "type": "shadow"
48449
+ "type": "shadow",
48450
+ "description": "Extra small resting shadow for minimal elevation"
47505
48451
  },
47506
48452
  "sideNav-bgColor-selected": {
47507
48453
  "key": "{sideNav.bgColor.selected}",