@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
@@ -308,6 +308,10 @@
308
308
  "dark-dimmed-high-contrast": "#033d8b",
309
309
  "dark-tritanopia-high-contrast": "#002155",
310
310
  "dark-protanopia-deuteranopia-high-contrast": "#002155"
311
+ },
312
+ "org.primer.llm": {
313
+ "usage": ["active-states", "current", "selected", "active-toggle"],
314
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
311
315
  }
312
316
  },
313
317
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -315,6 +319,7 @@
315
319
  "original": {
316
320
  "$value": "{base.color.blue.5}",
317
321
  "$type": "color",
322
+ "$description": "Strong accent background for active states and focused states",
318
323
  "$extensions": {
319
324
  "org.primer.figma": {
320
325
  "collection": "mode",
@@ -330,6 +335,10 @@
330
335
  "dark-dimmed-high-contrast": "{base.color.blue.7}",
331
336
  "dark-tritanopia-high-contrast": "{base.color.blue.9}",
332
337
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
338
+ },
339
+ "org.primer.llm": {
340
+ "usage": ["active-states", "current", "selected", "active-toggle"],
341
+ "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
333
342
  }
334
343
  },
335
344
  "key": "{bgColor.accent.emphasis}"
@@ -338,7 +347,8 @@
338
347
  "attributes": {},
339
348
  "path": ["bgColor", "accent", "emphasis"],
340
349
  "value": "#0969da",
341
- "type": "color"
350
+ "type": "color",
351
+ "description": "Strong accent background for active states and focused states"
342
352
  },
343
353
  "bgColor-accent-muted": {
344
354
  "key": "{bgColor.accent.muted}",
@@ -359,6 +369,10 @@
359
369
  "isSource": true,
360
370
  "$type": "color"
361
371
  }
372
+ },
373
+ "org.primer.llm": {
374
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
375
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
362
376
  }
363
377
  },
364
378
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -366,6 +380,7 @@
366
380
  "original": {
367
381
  "$value": "{base.color.blue.0}",
368
382
  "$type": "color",
383
+ "$description": "Subtle accent background for informational or selected elements",
369
384
  "$extensions": {
370
385
  "org.primer.figma": {
371
386
  "collection": "mode",
@@ -383,6 +398,10 @@
383
398
  "isSource": true,
384
399
  "$type": "color"
385
400
  }
401
+ },
402
+ "org.primer.llm": {
403
+ "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
404
+ "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
386
405
  }
387
406
  },
388
407
  "key": "{bgColor.accent.muted}"
@@ -391,7 +410,8 @@
391
410
  "attributes": {},
392
411
  "path": ["bgColor", "accent", "muted"],
393
412
  "value": "#ddf4ff",
394
- "type": "color"
413
+ "type": "color",
414
+ "description": "Subtle accent background for informational or selected elements"
395
415
  },
396
416
  "bgColor-attention-emphasis": {
397
417
  "key": "{bgColor.attention.emphasis}",
@@ -409,6 +429,10 @@
409
429
  "dark-dimmed-high-contrast": "#633c01",
410
430
  "dark-protanopia-deuteranopia-high-contrast": "#3b2300",
411
431
  "dark-tritanopia-high-contrast": "#3b2300"
432
+ },
433
+ "org.primer.llm": {
434
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
435
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
412
436
  }
413
437
  },
414
438
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -416,6 +440,7 @@
416
440
  "original": {
417
441
  "$value": "{base.color.yellow.5}",
418
442
  "$type": "color",
443
+ "$description": "Strong attention background for prominent warnings",
419
444
  "$extensions": {
420
445
  "org.primer.figma": {
421
446
  "collection": "mode",
@@ -430,6 +455,10 @@
430
455
  "dark-dimmed-high-contrast": "{base.color.yellow.7}",
431
456
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
432
457
  "dark-tritanopia-high-contrast": "{base.color.yellow.9}"
458
+ },
459
+ "org.primer.llm": {
460
+ "usage": ["warning-badge", "caution-label", "attention-indicator"],
461
+ "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
433
462
  }
434
463
  },
435
464
  "key": "{bgColor.attention.emphasis}"
@@ -438,7 +467,8 @@
438
467
  "attributes": {},
439
468
  "path": ["bgColor", "attention", "emphasis"],
440
469
  "value": "#9a6700",
441
- "type": "color"
470
+ "type": "color",
471
+ "description": "Strong attention background for prominent warnings"
442
472
  },
443
473
  "bgColor-attention-muted": {
444
474
  "key": "{bgColor.attention.muted}",
@@ -459,6 +489,10 @@
459
489
  "isSource": true,
460
490
  "$type": "color"
461
491
  }
492
+ },
493
+ "org.primer.llm": {
494
+ "usage": ["warning-banner", "caution-message", "pending-state"],
495
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
462
496
  }
463
497
  },
464
498
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -466,6 +500,7 @@
466
500
  "original": {
467
501
  "$value": "{base.color.yellow.0}",
468
502
  "$type": "color",
503
+ "$description": "Subtle attention background for warnings and caution states",
469
504
  "$extensions": {
470
505
  "org.primer.figma": {
471
506
  "collection": "mode",
@@ -483,6 +518,10 @@
483
518
  "isSource": true,
484
519
  "$type": "color"
485
520
  }
521
+ },
522
+ "org.primer.llm": {
523
+ "usage": ["warning-banner", "caution-message", "pending-state"],
524
+ "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
486
525
  }
487
526
  },
488
527
  "key": "{bgColor.attention.muted}"
@@ -491,7 +530,8 @@
491
530
  "attributes": {},
492
531
  "path": ["bgColor", "attention", "muted"],
493
532
  "value": "#fff8c5",
494
- "type": "color"
533
+ "type": "color",
534
+ "description": "Subtle attention background for warnings and caution states"
495
535
  },
496
536
  "bgColor-black": {
497
537
  "key": "{bgColor.black}",
@@ -503,6 +543,10 @@
503
543
  },
504
544
  "org.primer.overrides": {
505
545
  "dark": "#ffffff"
546
+ },
547
+ "org.primer.llm": {
548
+ "doNotUse": true,
549
+ "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."
506
550
  }
507
551
  },
508
552
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -510,6 +554,7 @@
510
554
  "original": {
511
555
  "$value": "{base.color.neutral.13}",
512
556
  "$type": "color",
557
+ "$description": "Pure black background",
513
558
  "$extensions": {
514
559
  "org.primer.figma": {
515
560
  "collection": "mode",
@@ -518,6 +563,10 @@
518
563
  },
519
564
  "org.primer.overrides": {
520
565
  "dark": "{base.color.neutral.0}"
566
+ },
567
+ "org.primer.llm": {
568
+ "doNotUse": true,
569
+ "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."
521
570
  }
522
571
  },
523
572
  "key": "{bgColor.black}"
@@ -526,7 +575,8 @@
526
575
  "attributes": {},
527
576
  "path": ["bgColor", "black"],
528
577
  "value": "#1f2328",
529
- "type": "color"
578
+ "type": "color",
579
+ "description": "Pure black background"
530
580
  },
531
581
  "bgColor-closed-emphasis": {
532
582
  "key": "{bgColor.closed.emphasis}",
@@ -548,6 +598,10 @@
548
598
  "light-protanopia-deuteranopia-high-contrast": "#59636e",
549
599
  "dark-protanopia-deuteranopia": "#59636e",
550
600
  "dark-protanopia-deuteranopia-high-contrast": "#59636e"
601
+ },
602
+ "org.primer.llm": {
603
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
604
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
551
605
  }
552
606
  },
553
607
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -555,6 +609,7 @@
555
609
  "original": {
556
610
  "$value": "{bgColor.neutral.emphasis}",
557
611
  "$type": "color",
612
+ "$description": "Strong background for closed state badges and labels",
558
613
  "$extensions": {
559
614
  "org.primer.figma": {
560
615
  "collection": "mode",
@@ -573,6 +628,10 @@
573
628
  "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
574
629
  "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
575
630
  "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
631
+ },
632
+ "org.primer.llm": {
633
+ "usage": ["closed-badge", "closed-label", "declined-status-badge"],
634
+ "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
576
635
  }
577
636
  },
578
637
  "key": "{bgColor.closed.emphasis}"
@@ -581,7 +640,8 @@
581
640
  "attributes": {},
582
641
  "path": ["bgColor", "closed", "emphasis"],
583
642
  "value": "#59636e",
584
- "type": "color"
643
+ "type": "color",
644
+ "description": "Strong background for closed state badges and labels"
585
645
  },
586
646
  "bgColor-closed-muted": {
587
647
  "key": "{bgColor.closed.muted}",
@@ -620,6 +680,10 @@
620
680
  "isSource": true,
621
681
  "$type": "color"
622
682
  }
683
+ },
684
+ "org.primer.llm": {
685
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
686
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
623
687
  }
624
688
  },
625
689
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -627,6 +691,7 @@
627
691
  "original": {
628
692
  "$value": "{bgColor.neutral.muted}",
629
693
  "$type": "color",
694
+ "$description": "Subtle background for closed state indicators (issues, PRs)",
630
695
  "$extensions": {
631
696
  "org.primer.figma": {
632
697
  "collection": "mode",
@@ -662,6 +727,10 @@
662
727
  "isSource": true,
663
728
  "$type": "color"
664
729
  }
730
+ },
731
+ "org.primer.llm": {
732
+ "usage": ["closed-issue", "closed-pr", "declined-state"],
733
+ "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
665
734
  }
666
735
  },
667
736
  "key": "{bgColor.closed.muted}"
@@ -670,7 +739,8 @@
670
739
  "attributes": {},
671
740
  "path": ["bgColor", "closed", "muted"],
672
741
  "value": "#818b981f",
673
- "type": "color"
742
+ "type": "color",
743
+ "description": "Subtle background for closed state indicators (issues, PRs)"
674
744
  },
675
745
  "bgColor-danger-emphasis": {
676
746
  "key": "{bgColor.danger.emphasis}",
@@ -691,6 +761,10 @@
691
761
  "dark-high-contrast": "#4c0014",
692
762
  "dark-dimmed-high-contrast": "#82071e",
693
763
  "dark-tritanopia-high-contrast": "#4c0014"
764
+ },
765
+ "org.primer.llm": {
766
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
767
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
694
768
  }
695
769
  },
696
770
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -698,6 +772,7 @@
698
772
  "original": {
699
773
  "$value": "{base.color.orange.5}",
700
774
  "$type": "color",
775
+ "$description": "Emphasized danger background for critical errors and delete confirmations",
701
776
  "$extensions": {
702
777
  "org.primer.figma": {
703
778
  "collection": "mode",
@@ -715,6 +790,10 @@
715
790
  "dark-high-contrast": "{base.color.red.9}",
716
791
  "dark-dimmed-high-contrast": "{base.color.red.7}",
717
792
  "dark-tritanopia-high-contrast": "{base.color.red.9}"
793
+ },
794
+ "org.primer.llm": {
795
+ "usage": ["delete-button", "critical-alert", "destructive-confirmation"],
796
+ "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
718
797
  }
719
798
  },
720
799
  "key": "{bgColor.danger.emphasis}"
@@ -723,7 +802,8 @@
723
802
  "attributes": {},
724
803
  "path": ["bgColor", "danger", "emphasis"],
725
804
  "value": "#bc4c00",
726
- "type": "color"
805
+ "type": "color",
806
+ "description": "Emphasized danger background for critical errors and delete confirmations"
727
807
  },
728
808
  "bgColor-danger-muted": {
729
809
  "key": "{bgColor.danger.muted}",
@@ -753,6 +833,10 @@
753
833
  "isSource": true,
754
834
  "$type": "color"
755
835
  }
836
+ },
837
+ "org.primer.llm": {
838
+ "usage": ["error-message", "destructive-action", "validation-error"],
839
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
756
840
  }
757
841
  },
758
842
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -760,6 +844,7 @@
760
844
  "original": {
761
845
  "$value": "{base.color.orange.0}",
762
846
  "$type": "color",
847
+ "$description": "Muted danger background for error states and destructive action contexts",
763
848
  "$extensions": {
764
849
  "org.primer.figma": {
765
850
  "collection": "mode",
@@ -786,6 +871,10 @@
786
871
  "isSource": true,
787
872
  "$type": "color"
788
873
  }
874
+ },
875
+ "org.primer.llm": {
876
+ "usage": ["error-message", "destructive-action", "validation-error"],
877
+ "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
789
878
  }
790
879
  },
791
880
  "key": "{bgColor.danger.muted}"
@@ -794,7 +883,8 @@
794
883
  "attributes": {},
795
884
  "path": ["bgColor", "danger", "muted"],
796
885
  "value": "#fff1e5",
797
- "type": "color"
886
+ "type": "color",
887
+ "description": "Muted danger background for error states and destructive action contexts"
798
888
  },
799
889
  "bgColor-default": {
800
890
  "key": "{bgColor.default}",
@@ -814,6 +904,10 @@
814
904
  "dark-high-contrast": "#ffffff",
815
905
  "dark-tritanopia-high-contrast": "#ffffff",
816
906
  "dark-protanopia-deuteranopia-high-contrast": "#ffffff"
907
+ },
908
+ "org.primer.llm": {
909
+ "usage": ["page-background", "main-content", "card-background"],
910
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
817
911
  }
818
912
  },
819
913
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -821,6 +915,7 @@
821
915
  "original": {
822
916
  "$value": "{base.color.neutral.0}",
823
917
  "$type": "color",
918
+ "$description": "Default background color for pages and main content areas",
824
919
  "$extensions": {
825
920
  "org.primer.figma": {
826
921
  "collection": "mode",
@@ -837,6 +932,10 @@
837
932
  "dark-high-contrast": "{base.color.neutral.0}",
838
933
  "dark-tritanopia-high-contrast": "{base.color.neutral.0}",
839
934
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
935
+ },
936
+ "org.primer.llm": {
937
+ "usage": ["page-background", "main-content", "card-background"],
938
+ "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
840
939
  }
841
940
  },
842
941
  "key": "{bgColor.default}"
@@ -845,7 +944,8 @@
845
944
  "attributes": {},
846
945
  "path": ["bgColor", "default"],
847
946
  "value": "#ffffff",
848
- "type": "color"
947
+ "type": "color",
948
+ "description": "Default background color for pages and main content areas"
849
949
  },
850
950
  "bgColor-disabled": {
851
951
  "key": "{bgColor.disabled}",
@@ -865,6 +965,10 @@
865
965
  "dark-high-contrast": "#e0e6eb",
866
966
  "dark-tritanopia-high-contrast": "#e0e6eb",
867
967
  "dark-protanopia-deuteranopia-high-contrast": "#e0e6eb"
968
+ },
969
+ "org.primer.llm": {
970
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
971
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
868
972
  }
869
973
  },
870
974
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -872,6 +976,7 @@
872
976
  "original": {
873
977
  "$value": "{base.color.neutral.2}",
874
978
  "$type": "color",
979
+ "$description": "Background for disabled interactive elements",
875
980
  "$extensions": {
876
981
  "org.primer.figma": {
877
982
  "collection": "mode",
@@ -888,6 +993,10 @@
888
993
  "dark-high-contrast": "{base.color.neutral.4}",
889
994
  "dark-tritanopia-high-contrast": "{base.color.neutral.4}",
890
995
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
996
+ },
997
+ "org.primer.llm": {
998
+ "usage": ["disabled-button", "disabled-input", "inactive-element"],
999
+ "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
891
1000
  }
892
1001
  },
893
1002
  "key": "{bgColor.disabled}"
@@ -896,7 +1005,8 @@
896
1005
  "attributes": {},
897
1006
  "path": ["bgColor", "disabled"],
898
1007
  "value": "#eff2f5",
899
- "type": "color"
1008
+ "type": "color",
1009
+ "description": "Background for disabled interactive elements"
900
1010
  },
901
1011
  "bgColor-done-emphasis": {
902
1012
  "key": "{bgColor.done.emphasis}",
@@ -914,6 +1024,10 @@
914
1024
  "dark-dimmed-high-contrast": "#512a97",
915
1025
  "dark-tritanopia-high-contrast": "#2e1461",
916
1026
  "dark-protanopia-deuteranopia-high-contrast": "#2e1461"
1027
+ },
1028
+ "org.primer.llm": {
1029
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1030
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
917
1031
  }
918
1032
  },
919
1033
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -921,6 +1035,7 @@
921
1035
  "original": {
922
1036
  "$value": "{base.color.purple.5}",
923
1037
  "$type": "color",
1038
+ "$description": "Strong background for completed/done state badges and labels",
924
1039
  "$extensions": {
925
1040
  "org.primer.figma": {
926
1041
  "collection": "mode",
@@ -935,6 +1050,10 @@
935
1050
  "dark-dimmed-high-contrast": "{base.color.purple.7}",
936
1051
  "dark-tritanopia-high-contrast": "{base.color.purple.9}",
937
1052
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
1053
+ },
1054
+ "org.primer.llm": {
1055
+ "usage": ["done-badge", "merged-label", "completed-indicator"],
1056
+ "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
938
1057
  }
939
1058
  },
940
1059
  "key": "{bgColor.done.emphasis}"
@@ -943,7 +1062,8 @@
943
1062
  "attributes": {},
944
1063
  "path": ["bgColor", "done", "emphasis"],
945
1064
  "value": "#8250df",
946
- "type": "color"
1065
+ "type": "color",
1066
+ "description": "Strong background for completed/done state badges and labels"
947
1067
  },
948
1068
  "bgColor-done-muted": {
949
1069
  "key": "{bgColor.done.muted}",
@@ -964,6 +1084,10 @@
964
1084
  "isSource": true,
965
1085
  "$type": "color"
966
1086
  }
1087
+ },
1088
+ "org.primer.llm": {
1089
+ "usage": ["completed-task", "merged-pr", "done-state"],
1090
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
967
1091
  }
968
1092
  },
969
1093
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -971,6 +1095,7 @@
971
1095
  "original": {
972
1096
  "$value": "{base.color.purple.0}",
973
1097
  "$type": "color",
1098
+ "$description": "Subtle background for completed/done state indicators",
974
1099
  "$extensions": {
975
1100
  "org.primer.figma": {
976
1101
  "collection": "mode",
@@ -988,6 +1113,10 @@
988
1113
  "isSource": true,
989
1114
  "$type": "color"
990
1115
  }
1116
+ },
1117
+ "org.primer.llm": {
1118
+ "usage": ["completed-task", "merged-pr", "done-state"],
1119
+ "rules": "Use for completed/done status indicators. Conveys finished or merged state."
991
1120
  }
992
1121
  },
993
1122
  "key": "{bgColor.done.muted}"
@@ -996,7 +1125,8 @@
996
1125
  "attributes": {},
997
1126
  "path": ["bgColor", "done", "muted"],
998
1127
  "value": "#fbefff",
999
- "type": "color"
1128
+ "type": "color",
1129
+ "description": "Subtle background for completed/done state indicators"
1000
1130
  },
1001
1131
  "bgColor-draft-emphasis": {
1002
1132
  "key": "{bgColor.draft.emphasis}",
@@ -1008,6 +1138,10 @@
1008
1138
  "codeSyntax": {
1009
1139
  "web": "var(--bgColor-draft-emphasis)"
1010
1140
  }
1141
+ },
1142
+ "org.primer.llm": {
1143
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1144
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1011
1145
  }
1012
1146
  },
1013
1147
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1015,6 +1149,7 @@
1015
1149
  "original": {
1016
1150
  "$value": "{bgColor.neutral.emphasis}",
1017
1151
  "$type": "color",
1152
+ "$description": "Strong background for draft state badges and labels",
1018
1153
  "$extensions": {
1019
1154
  "org.primer.figma": {
1020
1155
  "collection": "mode",
@@ -1023,6 +1158,10 @@
1023
1158
  "codeSyntax": {
1024
1159
  "web": "var(--bgColor-draft-emphasis)"
1025
1160
  }
1161
+ },
1162
+ "org.primer.llm": {
1163
+ "usage": ["draft-badge", "draft-label", "wip-indicator"],
1164
+ "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
1026
1165
  }
1027
1166
  },
1028
1167
  "key": "{bgColor.draft.emphasis}"
@@ -1031,7 +1170,8 @@
1031
1170
  "attributes": {},
1032
1171
  "path": ["bgColor", "draft", "emphasis"],
1033
1172
  "value": "#59636e",
1034
- "type": "color"
1173
+ "type": "color",
1174
+ "description": "Strong background for draft state badges and labels"
1035
1175
  },
1036
1176
  "bgColor-draft-muted": {
1037
1177
  "key": "{bgColor.draft.muted}",
@@ -1070,6 +1210,10 @@
1070
1210
  "isSource": true,
1071
1211
  "$type": "color"
1072
1212
  }
1213
+ },
1214
+ "org.primer.llm": {
1215
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1216
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1073
1217
  }
1074
1218
  },
1075
1219
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1077,6 +1221,7 @@
1077
1221
  "original": {
1078
1222
  "$value": "{bgColor.neutral.muted}",
1079
1223
  "$type": "color",
1224
+ "$description": "Subtle background for draft state indicators",
1080
1225
  "$extensions": {
1081
1226
  "org.primer.figma": {
1082
1227
  "collection": "mode",
@@ -1112,6 +1257,10 @@
1112
1257
  "isSource": true,
1113
1258
  "$type": "color"
1114
1259
  }
1260
+ },
1261
+ "org.primer.llm": {
1262
+ "usage": ["draft-pr", "draft-issue", "work-in-progress"],
1263
+ "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
1115
1264
  }
1116
1265
  },
1117
1266
  "key": "{bgColor.draft.muted}"
@@ -1120,7 +1269,8 @@
1120
1269
  "attributes": {},
1121
1270
  "path": ["bgColor", "draft", "muted"],
1122
1271
  "value": "#818b981f",
1123
- "type": "color"
1272
+ "type": "color",
1273
+ "description": "Subtle background for draft state indicators"
1124
1274
  },
1125
1275
  "bgColor-emphasis": {
1126
1276
  "key": "{bgColor.emphasis}",
@@ -1135,6 +1285,10 @@
1135
1285
  },
1136
1286
  "org.primer.overrides": {
1137
1287
  "dark": "#c8d1da"
1288
+ },
1289
+ "org.primer.llm": {
1290
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1291
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1138
1292
  }
1139
1293
  },
1140
1294
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1142,6 +1296,7 @@
1142
1296
  "original": {
1143
1297
  "$value": "{base.color.neutral.12}",
1144
1298
  "$type": "color",
1299
+ "$description": "High-emphasis dark background for strong visual contrast",
1145
1300
  "$extensions": {
1146
1301
  "org.primer.figma": {
1147
1302
  "collection": "mode",
@@ -1153,6 +1308,10 @@
1153
1308
  },
1154
1309
  "org.primer.overrides": {
1155
1310
  "dark": "{base.color.neutral.7}"
1311
+ },
1312
+ "org.primer.llm": {
1313
+ "usage": ["tooltip", "badge-background", "high-contrast-element"],
1314
+ "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
1156
1315
  }
1157
1316
  },
1158
1317
  "key": "{bgColor.emphasis}"
@@ -1161,7 +1320,8 @@
1161
1320
  "attributes": {},
1162
1321
  "path": ["bgColor", "emphasis"],
1163
1322
  "value": "#25292e",
1164
- "type": "color"
1323
+ "type": "color",
1324
+ "description": "High-emphasis dark background for strong visual contrast"
1165
1325
  },
1166
1326
  "bgColor-inset": {
1167
1327
  "key": "{bgColor.inset}",
@@ -1181,6 +1341,10 @@
1181
1341
  "light-high-contrast": "#eff2f5",
1182
1342
  "light-tritanopia-high-contrast": "#eff2f5",
1183
1343
  "light-protanopia-deuteranopia-high-contrast": "#eff2f5"
1344
+ },
1345
+ "org.primer.llm": {
1346
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1347
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1184
1348
  }
1185
1349
  },
1186
1350
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1188,6 +1352,7 @@
1188
1352
  "original": {
1189
1353
  "$value": "{bgColor.muted}",
1190
1354
  "$type": "color",
1355
+ "$description": "Inset background for recessed content areas like wells or sunken panels",
1191
1356
  "$extensions": {
1192
1357
  "org.primer.figma": {
1193
1358
  "collection": "mode",
@@ -1204,6 +1369,10 @@
1204
1369
  "light-high-contrast": "{base.color.neutral.2}",
1205
1370
  "light-tritanopia-high-contrast": "{base.color.neutral.2}",
1206
1371
  "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1372
+ },
1373
+ "org.primer.llm": {
1374
+ "usage": ["well", "sunken-panel", "recessed-area", "input-background"],
1375
+ "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
1207
1376
  }
1208
1377
  },
1209
1378
  "key": "{bgColor.inset}"
@@ -1212,7 +1381,8 @@
1212
1381
  "attributes": {},
1213
1382
  "path": ["bgColor", "inset"],
1214
1383
  "value": "#f6f8fa",
1215
- "type": "color"
1384
+ "type": "color",
1385
+ "description": "Inset background for recessed content areas like wells or sunken panels"
1216
1386
  },
1217
1387
  "bgColor-inverse": {
1218
1388
  "key": "{bgColor.inverse}",
@@ -1224,6 +1394,10 @@
1224
1394
  },
1225
1395
  "org.primer.overrides": {
1226
1396
  "dark": "#1f2328"
1397
+ },
1398
+ "org.primer.llm": {
1399
+ "usage": ["overlay-content", "inverse-theme-element"],
1400
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1227
1401
  }
1228
1402
  },
1229
1403
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1231,6 +1405,7 @@
1231
1405
  "original": {
1232
1406
  "$value": "{base.color.neutral.12}",
1233
1407
  "$type": "color",
1408
+ "$description": "Inverse background that flips between light and dark modes",
1234
1409
  "$extensions": {
1235
1410
  "org.primer.figma": {
1236
1411
  "collection": "mode",
@@ -1239,6 +1414,10 @@
1239
1414
  },
1240
1415
  "org.primer.overrides": {
1241
1416
  "dark": "{base.color.neutral.13}"
1417
+ },
1418
+ "org.primer.llm": {
1419
+ "usage": ["overlay-content", "inverse-theme-element"],
1420
+ "rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
1242
1421
  }
1243
1422
  },
1244
1423
  "key": "{bgColor.inverse}"
@@ -1247,7 +1426,8 @@
1247
1426
  "attributes": {},
1248
1427
  "path": ["bgColor", "inverse"],
1249
1428
  "value": "#25292e",
1250
- "type": "color"
1429
+ "type": "color",
1430
+ "description": "Inverse background that flips between light and dark modes"
1251
1431
  },
1252
1432
  "bgColor-muted": {
1253
1433
  "key": "{bgColor.muted}",
@@ -1270,6 +1450,10 @@
1270
1450
  "dark-high-contrast": "#eff2f5",
1271
1451
  "dark-tritanopia-high-contrast": "#eff2f5",
1272
1452
  "dark-protanopia-deuteranopia-high-contrast": "#eff2f5"
1453
+ },
1454
+ "org.primer.llm": {
1455
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1456
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1273
1457
  }
1274
1458
  },
1275
1459
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1277,6 +1461,7 @@
1277
1461
  "original": {
1278
1462
  "$value": "{base.color.neutral.1}",
1279
1463
  "$type": "color",
1464
+ "$description": "Muted background for secondary content areas and subtle grouping",
1280
1465
  "$extensions": {
1281
1466
  "org.primer.figma": {
1282
1467
  "collection": "mode",
@@ -1296,6 +1481,10 @@
1296
1481
  "dark-high-contrast": "{base.color.neutral.2}",
1297
1482
  "dark-tritanopia-high-contrast": "{base.color.neutral.2}",
1298
1483
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
1484
+ },
1485
+ "org.primer.llm": {
1486
+ "usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
1487
+ "rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
1299
1488
  }
1300
1489
  },
1301
1490
  "key": "{bgColor.muted}"
@@ -1304,7 +1493,8 @@
1304
1493
  "attributes": {},
1305
1494
  "path": ["bgColor", "muted"],
1306
1495
  "value": "#f6f8fa",
1307
- "type": "color"
1496
+ "type": "color",
1497
+ "description": "Muted background for secondary content areas and subtle grouping"
1308
1498
  },
1309
1499
  "bgColor-neutral-emphasis": {
1310
1500
  "key": "{bgColor.neutral.emphasis}",
@@ -1324,6 +1514,10 @@
1324
1514
  "dark-high-contrast": "#c8d1da",
1325
1515
  "dark-tritanopia-high-contrast": "#c8d1da",
1326
1516
  "dark-protanopia-deuteranopia-high-contrast": "#c8d1da"
1517
+ },
1518
+ "org.primer.llm": {
1519
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1520
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1327
1521
  }
1328
1522
  },
1329
1523
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1331,6 +1525,7 @@
1331
1525
  "original": {
1332
1526
  "$value": "{base.color.neutral.9}",
1333
1527
  "$type": "color",
1528
+ "$description": "Strong neutral background for prominent neutral elements",
1334
1529
  "$extensions": {
1335
1530
  "org.primer.figma": {
1336
1531
  "collection": "mode",
@@ -1347,6 +1542,10 @@
1347
1542
  "dark-high-contrast": "{base.color.neutral.7}",
1348
1543
  "dark-tritanopia-high-contrast": "{base.color.neutral.7}",
1349
1544
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
1545
+ },
1546
+ "org.primer.llm": {
1547
+ "usage": ["neutral-button", "secondary-action", "neutral-indicator"],
1548
+ "rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
1350
1549
  }
1351
1550
  },
1352
1551
  "key": "{bgColor.neutral.emphasis}"
@@ -1355,7 +1554,8 @@
1355
1554
  "attributes": {},
1356
1555
  "path": ["bgColor", "neutral", "emphasis"],
1357
1556
  "value": "#59636e",
1358
- "type": "color"
1557
+ "type": "color",
1558
+ "description": "Strong neutral background for prominent neutral elements"
1359
1559
  },
1360
1560
  "bgColor-neutral-muted": {
1361
1561
  "key": "{bgColor.neutral.muted}",
@@ -1386,6 +1586,10 @@
1386
1586
  "dark-high-contrast": "#e6eaef",
1387
1587
  "dark-tritanopia-high-contrast": "#e6eaef",
1388
1588
  "dark-protanopia-deuteranopia-high-contrast": "#e6eaef"
1589
+ },
1590
+ "org.primer.llm": {
1591
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1592
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1389
1593
  }
1390
1594
  },
1391
1595
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1394,6 +1598,7 @@
1394
1598
  "original": {
1395
1599
  "$value": "{base.color.neutral.8}",
1396
1600
  "$type": "color",
1601
+ "$description": "Subtle neutral background for tags, labels, and secondary UI elements",
1397
1602
  "$extensions": {
1398
1603
  "org.primer.figma": {
1399
1604
  "collection": "mode",
@@ -1421,6 +1626,10 @@
1421
1626
  "dark-high-contrast": "{base.color.neutral.3}",
1422
1627
  "dark-tritanopia-high-contrast": "{base.color.neutral.3}",
1423
1628
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
1629
+ },
1630
+ "org.primer.llm": {
1631
+ "usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
1632
+ "rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
1424
1633
  }
1425
1634
  },
1426
1635
  "alpha": 0.12,
@@ -1430,7 +1639,8 @@
1430
1639
  "attributes": {},
1431
1640
  "path": ["bgColor", "neutral", "muted"],
1432
1641
  "value": "#818b981f",
1433
- "type": "color"
1642
+ "type": "color",
1643
+ "description": "Subtle neutral background for tags, labels, and secondary UI elements"
1434
1644
  },
1435
1645
  "bgColor-open-emphasis": {
1436
1646
  "key": "{bgColor.open.emphasis}",
@@ -1452,6 +1662,10 @@
1452
1662
  "light-protanopia-deuteranopia-high-contrast": "#bc4c00",
1453
1663
  "dark-protanopia-deuteranopia": "#bc4c00",
1454
1664
  "dark-protanopia-deuteranopia-high-contrast": "#471700"
1665
+ },
1666
+ "org.primer.llm": {
1667
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1668
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1455
1669
  }
1456
1670
  },
1457
1671
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1459,6 +1673,7 @@
1459
1673
  "original": {
1460
1674
  "$value": "{base.color.orange.5}",
1461
1675
  "$type": "color",
1676
+ "$description": "Strong background for open state badges and labels",
1462
1677
  "$extensions": {
1463
1678
  "org.primer.figma": {
1464
1679
  "collection": "mode",
@@ -1477,6 +1692,10 @@
1477
1692
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
1478
1693
  "dark-protanopia-deuteranopia": "{base.color.orange.5}",
1479
1694
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1695
+ },
1696
+ "org.primer.llm": {
1697
+ "usage": ["open-badge", "open-label", "active-status-badge"],
1698
+ "rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
1480
1699
  }
1481
1700
  },
1482
1701
  "key": "{bgColor.open.emphasis}"
@@ -1485,7 +1704,8 @@
1485
1704
  "attributes": {},
1486
1705
  "path": ["bgColor", "open", "emphasis"],
1487
1706
  "value": "#bc4c00",
1488
- "type": "color"
1707
+ "type": "color",
1708
+ "description": "Strong background for open state badges and labels"
1489
1709
  },
1490
1710
  "bgColor-open-muted": {
1491
1711
  "key": "{bgColor.open.muted}",
@@ -1531,6 +1751,10 @@
1531
1751
  "isSource": true,
1532
1752
  "$type": "color"
1533
1753
  }
1754
+ },
1755
+ "org.primer.llm": {
1756
+ "usage": ["open-issue", "open-pr", "active-status"],
1757
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1534
1758
  }
1535
1759
  },
1536
1760
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1538,6 +1762,7 @@
1538
1762
  "original": {
1539
1763
  "$value": "{base.color.orange.0}",
1540
1764
  "$type": "color",
1765
+ "$description": "Subtle background for open state indicators (issues, PRs)",
1541
1766
  "$extensions": {
1542
1767
  "org.primer.figma": {
1543
1768
  "collection": "mode",
@@ -1580,6 +1805,10 @@
1580
1805
  "isSource": true,
1581
1806
  "$type": "color"
1582
1807
  }
1808
+ },
1809
+ "org.primer.llm": {
1810
+ "usage": ["open-issue", "open-pr", "active-status"],
1811
+ "rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
1583
1812
  }
1584
1813
  },
1585
1814
  "key": "{bgColor.open.muted}"
@@ -1588,7 +1817,8 @@
1588
1817
  "attributes": {},
1589
1818
  "path": ["bgColor", "open", "muted"],
1590
1819
  "value": "#fff1e5",
1591
- "type": "color"
1820
+ "type": "color",
1821
+ "description": "Subtle background for open state indicators (issues, PRs)"
1592
1822
  },
1593
1823
  "bgColor-severe-emphasis": {
1594
1824
  "key": "{bgColor.severe.emphasis}",
@@ -1609,6 +1839,10 @@
1609
1839
  "dark-high-contrast": "#471700",
1610
1840
  "dark-dimmed-high-contrast": "#762c00",
1611
1841
  "dark-protanopia-deuteranopia-high-contrast": "#471700"
1842
+ },
1843
+ "org.primer.llm": {
1844
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1845
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1612
1846
  }
1613
1847
  },
1614
1848
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1616,6 +1850,7 @@
1616
1850
  "original": {
1617
1851
  "$value": "{base.color.orange.5}",
1618
1852
  "$type": "color",
1853
+ "$description": "Strong severe background for prominent high-priority warnings",
1619
1854
  "$extensions": {
1620
1855
  "org.primer.figma": {
1621
1856
  "collection": "mode",
@@ -1633,6 +1868,10 @@
1633
1868
  "dark-high-contrast": "{base.color.orange.9}",
1634
1869
  "dark-dimmed-high-contrast": "{base.color.orange.7}",
1635
1870
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
1871
+ },
1872
+ "org.primer.llm": {
1873
+ "usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
1874
+ "rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
1636
1875
  }
1637
1876
  },
1638
1877
  "key": "{bgColor.severe.emphasis}"
@@ -1641,7 +1880,8 @@
1641
1880
  "attributes": {},
1642
1881
  "path": ["bgColor", "severe", "emphasis"],
1643
1882
  "value": "#bc4c00",
1644
- "type": "color"
1883
+ "type": "color",
1884
+ "description": "Strong severe background for prominent high-priority warnings"
1645
1885
  },
1646
1886
  "bgColor-severe-muted": {
1647
1887
  "key": "{bgColor.severe.muted}",
@@ -1671,6 +1911,10 @@
1671
1911
  "isSource": true,
1672
1912
  "$type": "color"
1673
1913
  }
1914
+ },
1915
+ "org.primer.llm": {
1916
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1917
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1674
1918
  }
1675
1919
  },
1676
1920
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1678,6 +1922,7 @@
1678
1922
  "original": {
1679
1923
  "$value": "{base.color.orange.0}",
1680
1924
  "$type": "color",
1925
+ "$description": "Subtle severe background for high-priority warnings",
1681
1926
  "$extensions": {
1682
1927
  "org.primer.figma": {
1683
1928
  "collection": "mode",
@@ -1704,6 +1949,10 @@
1704
1949
  "isSource": true,
1705
1950
  "$type": "color"
1706
1951
  }
1952
+ },
1953
+ "org.primer.llm": {
1954
+ "usage": ["high-priority-warning", "urgent-message", "escalation"],
1955
+ "rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
1707
1956
  }
1708
1957
  },
1709
1958
  "key": "{bgColor.severe.muted}"
@@ -1712,7 +1961,8 @@
1712
1961
  "attributes": {},
1713
1962
  "path": ["bgColor", "severe", "muted"],
1714
1963
  "value": "#fff1e5",
1715
- "type": "color"
1964
+ "type": "color",
1965
+ "description": "Subtle severe background for high-priority warnings"
1716
1966
  },
1717
1967
  "bgColor-sponsors-emphasis": {
1718
1968
  "key": "{bgColor.sponsors.emphasis}",
@@ -1730,6 +1980,10 @@
1730
1980
  "dark-dimmed-high-contrast": "#772057",
1731
1981
  "dark-tritanopia-high-contrast": "#4d0336",
1732
1982
  "dark-protanopia-deuteranopia-high-contrast": "#4d0336"
1983
+ },
1984
+ "org.primer.llm": {
1985
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
1986
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1733
1987
  }
1734
1988
  },
1735
1989
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1737,6 +1991,7 @@
1737
1991
  "original": {
1738
1992
  "$value": "{base.color.pink.5}",
1739
1993
  "$type": "color",
1994
+ "$description": "Strong background for prominent GitHub Sponsors elements",
1740
1995
  "$extensions": {
1741
1996
  "org.primer.figma": {
1742
1997
  "collection": "mode",
@@ -1751,6 +2006,10 @@
1751
2006
  "dark-dimmed-high-contrast": "{base.color.pink.7}",
1752
2007
  "dark-tritanopia-high-contrast": "{base.color.pink.9}",
1753
2008
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
2009
+ },
2010
+ "org.primer.llm": {
2011
+ "usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
2012
+ "rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
1754
2013
  }
1755
2014
  },
1756
2015
  "key": "{bgColor.sponsors.emphasis}"
@@ -1759,7 +2018,8 @@
1759
2018
  "attributes": {},
1760
2019
  "path": ["bgColor", "sponsors", "emphasis"],
1761
2020
  "value": "#bf3989",
1762
- "type": "color"
2021
+ "type": "color",
2022
+ "description": "Strong background for prominent GitHub Sponsors elements"
1763
2023
  },
1764
2024
  "bgColor-sponsors-muted": {
1765
2025
  "key": "{bgColor.sponsors.muted}",
@@ -1787,6 +2047,10 @@
1787
2047
  "isSource": true,
1788
2048
  "$type": "color"
1789
2049
  }
2050
+ },
2051
+ "org.primer.llm": {
2052
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2053
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1790
2054
  }
1791
2055
  },
1792
2056
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1794,6 +2058,7 @@
1794
2058
  "original": {
1795
2059
  "$value": "{base.color.pink.0}",
1796
2060
  "$type": "color",
2061
+ "$description": "Subtle background for GitHub Sponsors content",
1797
2062
  "$extensions": {
1798
2063
  "org.primer.figma": {
1799
2064
  "collection": "mode",
@@ -1818,6 +2083,10 @@
1818
2083
  "isSource": true,
1819
2084
  "$type": "color"
1820
2085
  }
2086
+ },
2087
+ "org.primer.llm": {
2088
+ "usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
2089
+ "rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
1821
2090
  }
1822
2091
  },
1823
2092
  "key": "{bgColor.sponsors.muted}"
@@ -1826,7 +2095,8 @@
1826
2095
  "attributes": {},
1827
2096
  "path": ["bgColor", "sponsors", "muted"],
1828
2097
  "value": "#ffeff7",
1829
- "type": "color"
2098
+ "type": "color",
2099
+ "description": "Subtle background for GitHub Sponsors content"
1830
2100
  },
1831
2101
  "bgColor-success-emphasis": {
1832
2102
  "key": "{bgColor.success.emphasis}",
@@ -1852,6 +2122,10 @@
1852
2122
  "light-high-contrast": "#1a7f37",
1853
2123
  "dark-high-contrast": "#002d11",
1854
2124
  "dark-dimmed-high-contrast": "#044f1e"
2125
+ },
2126
+ "org.primer.llm": {
2127
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2128
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1855
2129
  }
1856
2130
  },
1857
2131
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1859,6 +2133,7 @@
1859
2133
  "original": {
1860
2134
  "$value": "{base.color.blue.5}",
1861
2135
  "$type": "color",
2136
+ "$description": "Strong success background for prominent positive actions",
1862
2137
  "$extensions": {
1863
2138
  "org.primer.figma": {
1864
2139
  "collection": "mode",
@@ -1881,6 +2156,10 @@
1881
2156
  "light-high-contrast": "{base.color.green.5}",
1882
2157
  "dark-high-contrast": "{base.color.green.9}",
1883
2158
  "dark-dimmed-high-contrast": "{base.color.green.7}"
2159
+ },
2160
+ "org.primer.llm": {
2161
+ "usage": ["merge-button", "confirm-action", "success-badge"],
2162
+ "rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
1884
2163
  }
1885
2164
  },
1886
2165
  "key": "{bgColor.success.emphasis}"
@@ -1889,7 +2168,8 @@
1889
2168
  "attributes": {},
1890
2169
  "path": ["bgColor", "success", "emphasis"],
1891
2170
  "value": "#0969da",
1892
- "type": "color"
2171
+ "type": "color",
2172
+ "description": "Strong success background for prominent positive actions"
1893
2173
  },
1894
2174
  "bgColor-success-muted": {
1895
2175
  "key": "{bgColor.success.muted}",
@@ -1942,6 +2222,10 @@
1942
2222
  "isSource": true,
1943
2223
  "$type": "color"
1944
2224
  }
2225
+ },
2226
+ "org.primer.llm": {
2227
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2228
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
1945
2229
  }
1946
2230
  },
1947
2231
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -1949,6 +2233,7 @@
1949
2233
  "original": {
1950
2234
  "$value": "{base.color.blue.0}",
1951
2235
  "$type": "color",
2236
+ "$description": "Subtle success background for positive feedback and completed states",
1952
2237
  "$extensions": {
1953
2238
  "org.primer.figma": {
1954
2239
  "collection": "mode",
@@ -1998,6 +2283,10 @@
1998
2283
  "isSource": true,
1999
2284
  "$type": "color"
2000
2285
  }
2286
+ },
2287
+ "org.primer.llm": {
2288
+ "usage": ["success-message", "completed-state", "positive-feedback"],
2289
+ "rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
2001
2290
  }
2002
2291
  },
2003
2292
  "key": "{bgColor.success.muted}"
@@ -2006,7 +2295,8 @@
2006
2295
  "attributes": {},
2007
2296
  "path": ["bgColor", "success", "muted"],
2008
2297
  "value": "#ddf4ff",
2009
- "type": "color"
2298
+ "type": "color",
2299
+ "description": "Subtle success background for positive feedback and completed states"
2010
2300
  },
2011
2301
  "bgColor-transparent": {
2012
2302
  "key": "{bgColor.transparent}",
@@ -2018,6 +2308,10 @@
2018
2308
  "codeSyntax": {
2019
2309
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2020
2310
  }
2311
+ },
2312
+ "org.primer.llm": {
2313
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2314
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2021
2315
  }
2022
2316
  },
2023
2317
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2025,6 +2319,7 @@
2025
2319
  "original": {
2026
2320
  "$value": "{base.color.transparent}",
2027
2321
  "$type": "color",
2322
+ "$description": "Fully transparent background",
2028
2323
  "$extensions": {
2029
2324
  "org.primer.figma": {
2030
2325
  "collection": "mode",
@@ -2033,6 +2328,10 @@
2033
2328
  "codeSyntax": {
2034
2329
  "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
2035
2330
  }
2331
+ },
2332
+ "org.primer.llm": {
2333
+ "usage": ["ghost-button", "icon-button", "overlay-trigger"],
2334
+ "rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
2036
2335
  }
2037
2336
  },
2038
2337
  "key": "{bgColor.transparent}"
@@ -2041,7 +2340,8 @@
2041
2340
  "attributes": {},
2042
2341
  "path": ["bgColor", "transparent"],
2043
2342
  "value": "#ffffff00",
2044
- "type": "color"
2343
+ "type": "color",
2344
+ "description": "Fully transparent background"
2045
2345
  },
2046
2346
  "bgColor-upsell-emphasis": {
2047
2347
  "key": "{bgColor.upsell.emphasis}",
@@ -2053,6 +2353,10 @@
2053
2353
  "codeSyntax": {
2054
2354
  "web": "var(--bgColor-upsell-emphasis)"
2055
2355
  }
2356
+ },
2357
+ "org.primer.llm": {
2358
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2359
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2056
2360
  }
2057
2361
  },
2058
2362
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2060,6 +2364,7 @@
2060
2364
  "original": {
2061
2365
  "$value": "{bgColor.done.emphasis}",
2062
2366
  "$type": "color",
2367
+ "$description": "Strong background for prominent upsell elements",
2063
2368
  "$extensions": {
2064
2369
  "org.primer.figma": {
2065
2370
  "collection": "mode",
@@ -2068,6 +2373,10 @@
2068
2373
  "codeSyntax": {
2069
2374
  "web": "var(--bgColor-upsell-emphasis)"
2070
2375
  }
2376
+ },
2377
+ "org.primer.llm": {
2378
+ "usage": ["upgrade-button", "premium-badge", "upsell-cta"],
2379
+ "rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
2071
2380
  }
2072
2381
  },
2073
2382
  "key": "{bgColor.upsell.emphasis}"
@@ -2076,7 +2385,8 @@
2076
2385
  "attributes": {},
2077
2386
  "path": ["bgColor", "upsell", "emphasis"],
2078
2387
  "value": "#8250df",
2079
- "type": "color"
2388
+ "type": "color",
2389
+ "description": "Strong background for prominent upsell elements"
2080
2390
  },
2081
2391
  "bgColor-upsell-muted": {
2082
2392
  "key": "{bgColor.upsell.muted}",
@@ -2088,6 +2398,10 @@
2088
2398
  "codeSyntax": {
2089
2399
  "web": "var(--bgColor-upsell-muted)"
2090
2400
  }
2401
+ },
2402
+ "org.primer.llm": {
2403
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2404
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2091
2405
  }
2092
2406
  },
2093
2407
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2095,6 +2409,7 @@
2095
2409
  "original": {
2096
2410
  "$value": "{bgColor.done.muted}",
2097
2411
  "$type": "color",
2412
+ "$description": "Subtle background for upsell and promotional content",
2098
2413
  "$extensions": {
2099
2414
  "org.primer.figma": {
2100
2415
  "collection": "mode",
@@ -2103,6 +2418,10 @@
2103
2418
  "codeSyntax": {
2104
2419
  "web": "var(--bgColor-upsell-muted)"
2105
2420
  }
2421
+ },
2422
+ "org.primer.llm": {
2423
+ "usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
2424
+ "rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
2106
2425
  }
2107
2426
  },
2108
2427
  "key": "{bgColor.upsell.muted}"
@@ -2111,7 +2430,8 @@
2111
2430
  "attributes": {},
2112
2431
  "path": ["bgColor", "upsell", "muted"],
2113
2432
  "value": "#fbefff",
2114
- "type": "color"
2433
+ "type": "color",
2434
+ "description": "Subtle background for upsell and promotional content"
2115
2435
  },
2116
2436
  "bgColor-white": {
2117
2437
  "key": "{bgColor.white}",
@@ -2123,6 +2443,10 @@
2123
2443
  },
2124
2444
  "org.primer.overrides": {
2125
2445
  "dark": "#1f2328"
2446
+ },
2447
+ "org.primer.llm": {
2448
+ "doNotUse": true,
2449
+ "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."
2126
2450
  }
2127
2451
  },
2128
2452
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2130,6 +2454,7 @@
2130
2454
  "original": {
2131
2455
  "$value": "{base.color.neutral.0}",
2132
2456
  "$type": "color",
2457
+ "$description": "Pure white background",
2133
2458
  "$extensions": {
2134
2459
  "org.primer.figma": {
2135
2460
  "collection": "mode",
@@ -2138,6 +2463,10 @@
2138
2463
  },
2139
2464
  "org.primer.overrides": {
2140
2465
  "dark": "{base.color.neutral.13}"
2466
+ },
2467
+ "org.primer.llm": {
2468
+ "doNotUse": true,
2469
+ "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."
2141
2470
  }
2142
2471
  },
2143
2472
  "key": "{bgColor.white}"
@@ -2146,7 +2475,8 @@
2146
2475
  "attributes": {},
2147
2476
  "path": ["bgColor", "white"],
2148
2477
  "value": "#ffffff",
2149
- "type": "color"
2478
+ "type": "color",
2479
+ "description": "Pure white background"
2150
2480
  },
2151
2481
  "border-accent-emphasis": {
2152
2482
  "key": "{border.accent.emphasis}",
@@ -2658,6 +2988,10 @@
2658
2988
  },
2659
2989
  "org.primer.overrides": {
2660
2990
  "dark-dimmed-high-contrast": "#80ccff"
2991
+ },
2992
+ "org.primer.llm": {
2993
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
2994
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2661
2995
  }
2662
2996
  },
2663
2997
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2665,6 +2999,7 @@
2665
2999
  "original": {
2666
3000
  "$value": "{base.color.blue.5}",
2667
3001
  "$type": "color",
3002
+ "$description": "Strong accent border for selected or focused elements",
2668
3003
  "$extensions": {
2669
3004
  "org.primer.figma": {
2670
3005
  "collection": "mode",
@@ -2676,6 +3011,10 @@
2676
3011
  },
2677
3012
  "org.primer.overrides": {
2678
3013
  "dark-dimmed-high-contrast": "{base.color.blue.2}"
3014
+ },
3015
+ "org.primer.llm": {
3016
+ "usage": ["accent-emphasis", "selected-border", "focus-border"],
3017
+ "rules": "Use for selected elements and focus states. Strong visual emphasis."
2679
3018
  }
2680
3019
  },
2681
3020
  "key": "{borderColor.accent.emphasis}"
@@ -2684,7 +3023,8 @@
2684
3023
  "attributes": {},
2685
3024
  "path": ["borderColor", "accent", "emphasis"],
2686
3025
  "value": "#0969da",
2687
- "type": "color"
3026
+ "type": "color",
3027
+ "description": "Strong accent border for selected or focused elements"
2688
3028
  },
2689
3029
  "borderColor-accent-muted": {
2690
3030
  "key": "{borderColor.accent.muted}",
@@ -2748,6 +3088,10 @@
2748
3088
  "isSource": true,
2749
3089
  "$type": "color"
2750
3090
  }
3091
+ },
3092
+ "org.primer.llm": {
3093
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3094
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2751
3095
  }
2752
3096
  },
2753
3097
  "alpha": 0.4,
@@ -2756,6 +3100,7 @@
2756
3100
  "original": {
2757
3101
  "$value": "{base.color.blue.3}",
2758
3102
  "$type": "color",
3103
+ "$description": "Subtle accent border for selected or focused elements",
2759
3104
  "$extensions": {
2760
3105
  "org.primer.figma": {
2761
3106
  "collection": "mode",
@@ -2816,6 +3161,10 @@
2816
3161
  "isSource": true,
2817
3162
  "$type": "color"
2818
3163
  }
3164
+ },
3165
+ "org.primer.llm": {
3166
+ "usage": ["accent-muted", "selected-muted", "info-muted"],
3167
+ "rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
2819
3168
  }
2820
3169
  },
2821
3170
  "alpha": 0.4,
@@ -2825,7 +3174,8 @@
2825
3174
  "attributes": {},
2826
3175
  "path": ["borderColor", "accent", "muted"],
2827
3176
  "value": "#54aeff66",
2828
- "type": "color"
3177
+ "type": "color",
3178
+ "description": "Subtle accent border for selected or focused elements"
2829
3179
  },
2830
3180
  "borderColor-attention-emphasis": {
2831
3181
  "key": "{borderColor.attention.emphasis}",
@@ -2840,6 +3190,10 @@
2840
3190
  },
2841
3191
  "org.primer.overrides": {
2842
3192
  "dark-dimmed-high-contrast": "#eac54f"
3193
+ },
3194
+ "org.primer.llm": {
3195
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3196
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2843
3197
  }
2844
3198
  },
2845
3199
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -2847,6 +3201,7 @@
2847
3201
  "original": {
2848
3202
  "$value": "{base.color.yellow.5}",
2849
3203
  "$type": "color",
3204
+ "$description": "Strong attention border for prominent warnings",
2850
3205
  "$extensions": {
2851
3206
  "org.primer.figma": {
2852
3207
  "collection": "mode",
@@ -2858,6 +3213,10 @@
2858
3213
  },
2859
3214
  "org.primer.overrides": {
2860
3215
  "dark-dimmed-high-contrast": "{base.color.yellow.2}"
3216
+ },
3217
+ "org.primer.llm": {
3218
+ "usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
3219
+ "rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
2861
3220
  }
2862
3221
  },
2863
3222
  "key": "{borderColor.attention.emphasis}"
@@ -2866,7 +3225,8 @@
2866
3225
  "attributes": {},
2867
3226
  "path": ["borderColor", "attention", "emphasis"],
2868
3227
  "value": "#9a6700",
2869
- "type": "color"
3228
+ "type": "color",
3229
+ "description": "Strong attention border for prominent warnings"
2870
3230
  },
2871
3231
  "borderColor-attention-muted": {
2872
3232
  "key": "{borderColor.attention.muted}",
@@ -2930,6 +3290,10 @@
2930
3290
  "isSource": true,
2931
3291
  "$type": "color"
2932
3292
  }
3293
+ },
3294
+ "org.primer.llm": {
3295
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3296
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
2933
3297
  }
2934
3298
  },
2935
3299
  "alpha": 0.4,
@@ -2938,6 +3302,7 @@
2938
3302
  "original": {
2939
3303
  "$value": "{base.color.yellow.3}",
2940
3304
  "$type": "color",
3305
+ "$description": "Subtle attention border for warnings and caution states",
2941
3306
  "$extensions": {
2942
3307
  "org.primer.figma": {
2943
3308
  "collection": "mode",
@@ -2998,6 +3363,10 @@
2998
3363
  "isSource": true,
2999
3364
  "$type": "color"
3000
3365
  }
3366
+ },
3367
+ "org.primer.llm": {
3368
+ "usage": ["attention-muted", "warning-muted", "caution-muted"],
3369
+ "rules": "Use for warning state borders. Pair with bgColor.attention.muted."
3001
3370
  }
3002
3371
  },
3003
3372
  "alpha": 0.4,
@@ -3007,7 +3376,8 @@
3007
3376
  "attributes": {},
3008
3377
  "path": ["borderColor", "attention", "muted"],
3009
3378
  "value": "#d4a72c66",
3010
- "type": "color"
3379
+ "type": "color",
3380
+ "description": "Subtle attention border for warnings and caution states"
3011
3381
  },
3012
3382
  "borderColor-closed-emphasis": {
3013
3383
  "key": "{borderColor.closed.emphasis}",
@@ -3029,6 +3399,10 @@
3029
3399
  "dark-tritanopia-high-contrast": "#818b98",
3030
3400
  "light-tritanopia": "#818b98",
3031
3401
  "light-tritanopia-high-contrast": "#818b98"
3402
+ },
3403
+ "org.primer.llm": {
3404
+ "usage": ["closed-emphasis", "closed-status"],
3405
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3032
3406
  }
3033
3407
  },
3034
3408
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3036,6 +3410,7 @@
3036
3410
  "original": {
3037
3411
  "$value": "{borderColor.emphasis}",
3038
3412
  "$type": "color",
3413
+ "$description": "Strong border for closed state badges",
3039
3414
  "$extensions": {
3040
3415
  "org.primer.figma": {
3041
3416
  "collection": "mode",
@@ -3054,6 +3429,10 @@
3054
3429
  "dark-tritanopia-high-contrast": "{borderColor.emphasis}",
3055
3430
  "light-tritanopia": "{borderColor.emphasis}",
3056
3431
  "light-tritanopia-high-contrast": "{borderColor.emphasis}"
3432
+ },
3433
+ "org.primer.llm": {
3434
+ "usage": ["closed-emphasis", "closed-status"],
3435
+ "rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
3057
3436
  }
3058
3437
  },
3059
3438
  "key": "{borderColor.closed.emphasis}"
@@ -3062,7 +3441,8 @@
3062
3441
  "attributes": {},
3063
3442
  "path": ["borderColor", "closed", "emphasis"],
3064
3443
  "value": "#818b98",
3065
- "type": "color"
3444
+ "type": "color",
3445
+ "description": "Strong border for closed state badges"
3066
3446
  },
3067
3447
  "borderColor-closed-muted": {
3068
3448
  "key": "{borderColor.closed.muted}",
@@ -3132,6 +3512,10 @@
3132
3512
  "isSource": true,
3133
3513
  "$type": "color"
3134
3514
  }
3515
+ },
3516
+ "org.primer.llm": {
3517
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3518
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3135
3519
  }
3136
3520
  },
3137
3521
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3140,6 +3524,7 @@
3140
3524
  "original": {
3141
3525
  "$value": "{borderColor.default}",
3142
3526
  "$type": "color",
3527
+ "$description": "Subtle border for closed state indicators",
3143
3528
  "$extensions": {
3144
3529
  "org.primer.figma": {
3145
3530
  "collection": "mode",
@@ -3206,6 +3591,10 @@
3206
3591
  "isSource": true,
3207
3592
  "$type": "color"
3208
3593
  }
3594
+ },
3595
+ "org.primer.llm": {
3596
+ "usage": ["closed-muted", "closed-issue", "closed-pr"],
3597
+ "rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
3209
3598
  }
3210
3599
  },
3211
3600
  "alpha": 0.4,
@@ -3215,7 +3604,8 @@
3215
3604
  "attributes": {},
3216
3605
  "path": ["borderColor", "closed", "muted"],
3217
3606
  "value": "#d1d9e066",
3218
- "type": "color"
3607
+ "type": "color",
3608
+ "description": "Subtle border for closed state indicators"
3219
3609
  },
3220
3610
  "borderColor-danger-emphasis": {
3221
3611
  "key": "{borderColor.danger.emphasis}",
@@ -3254,6 +3644,10 @@
3254
3644
  "$type": "color"
3255
3645
  },
3256
3646
  "dark-dimmed-high-contrast": "#ffaba8"
3647
+ },
3648
+ "org.primer.llm": {
3649
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3650
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3257
3651
  }
3258
3652
  },
3259
3653
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3261,6 +3655,7 @@
3261
3655
  "original": {
3262
3656
  "$value": "{base.color.orange.5}",
3263
3657
  "$type": "color",
3658
+ "$description": "Strong danger border for destructive actions and errors",
3264
3659
  "$extensions": {
3265
3660
  "org.primer.figma": {
3266
3661
  "collection": "mode",
@@ -3296,6 +3691,10 @@
3296
3691
  "$type": "color"
3297
3692
  },
3298
3693
  "dark-dimmed-high-contrast": "{base.color.red.2}"
3694
+ },
3695
+ "org.primer.llm": {
3696
+ "usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
3697
+ "rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
3299
3698
  }
3300
3699
  },
3301
3700
  "key": "{borderColor.danger.emphasis}"
@@ -3304,7 +3703,8 @@
3304
3703
  "attributes": {},
3305
3704
  "path": ["borderColor", "danger", "emphasis"],
3306
3705
  "value": "#bc4c00",
3307
- "type": "color"
3706
+ "type": "color",
3707
+ "description": "Strong danger border for destructive actions and errors"
3308
3708
  },
3309
3709
  "borderColor-danger-muted": {
3310
3710
  "key": "{borderColor.danger.muted}",
@@ -3381,6 +3781,10 @@
3381
3781
  "isSource": true,
3382
3782
  "$type": "color"
3383
3783
  }
3784
+ },
3785
+ "org.primer.llm": {
3786
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3787
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3384
3788
  }
3385
3789
  },
3386
3790
  "alpha": 1,
@@ -3389,6 +3793,7 @@
3389
3793
  "original": {
3390
3794
  "$value": "{base.color.orange.0}",
3391
3795
  "$type": "color",
3796
+ "$description": "Subtle danger border for errors and destructive contexts",
3392
3797
  "$extensions": {
3393
3798
  "org.primer.figma": {
3394
3799
  "collection": "mode",
@@ -3462,6 +3867,10 @@
3462
3867
  "isSource": true,
3463
3868
  "$type": "color"
3464
3869
  }
3870
+ },
3871
+ "org.primer.llm": {
3872
+ "usage": ["danger-muted", "error-muted", "destructive-muted"],
3873
+ "rules": "Use for error state borders. Pair with bgColor.danger.muted."
3465
3874
  }
3466
3875
  },
3467
3876
  "alpha": 1,
@@ -3471,7 +3880,8 @@
3471
3880
  "attributes": {},
3472
3881
  "path": ["borderColor", "danger", "muted"],
3473
3882
  "value": "#fff1e5",
3474
- "type": "color"
3883
+ "type": "color",
3884
+ "description": "Subtle danger border for errors and destructive contexts"
3475
3885
  },
3476
3886
  "borderColor-default": {
3477
3887
  "key": "{borderColor.default}",
@@ -3494,6 +3904,10 @@
3494
3904
  "codeSyntax": {
3495
3905
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3496
3906
  }
3907
+ },
3908
+ "org.primer.llm": {
3909
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3910
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3497
3911
  }
3498
3912
  },
3499
3913
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3501,6 +3915,7 @@
3501
3915
  "original": {
3502
3916
  "$value": "{base.color.neutral.6}",
3503
3917
  "$type": "color",
3918
+ "$description": "Default border color for most UI elements",
3504
3919
  "$extensions": {
3505
3920
  "org.primer.overrides": {
3506
3921
  "dark": "{base.color.neutral.7}",
@@ -3520,6 +3935,10 @@
3520
3935
  "codeSyntax": {
3521
3936
  "web": "var(--borderColor-default) /* utility class: .color-border-default */"
3522
3937
  }
3938
+ },
3939
+ "org.primer.llm": {
3940
+ "usage": ["default-border", "card-border", "input-border", "divider"],
3941
+ "rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
3523
3942
  }
3524
3943
  },
3525
3944
  "key": "{borderColor.default}"
@@ -3528,7 +3947,8 @@
3528
3947
  "attributes": {},
3529
3948
  "path": ["borderColor", "default"],
3530
3949
  "value": "#d1d9e0",
3531
- "type": "color"
3950
+ "type": "color",
3951
+ "description": "Default border color for most UI elements"
3532
3952
  },
3533
3953
  "borderColor-disabled": {
3534
3954
  "key": "{borderColor.disabled}",
@@ -3574,6 +3994,10 @@
3574
3994
  "isSource": true,
3575
3995
  "$type": "color"
3576
3996
  }
3997
+ },
3998
+ "org.primer.llm": {
3999
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4000
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3577
4001
  }
3578
4002
  },
3579
4003
  "alpha": 0.1,
@@ -3582,6 +4006,7 @@
3582
4006
  "original": {
3583
4007
  "$value": "{base.color.neutral.8}",
3584
4008
  "$type": "color",
4009
+ "$description": "Border color for disabled interactive elements",
3585
4010
  "$extensions": {
3586
4011
  "org.primer.figma": {
3587
4012
  "collection": "mode",
@@ -3624,6 +4049,10 @@
3624
4049
  "isSource": true,
3625
4050
  "$type": "color"
3626
4051
  }
4052
+ },
4053
+ "org.primer.llm": {
4054
+ "usage": ["disabled-border", "inactive-border", "unavailable"],
4055
+ "rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
3627
4056
  }
3628
4057
  },
3629
4058
  "alpha": 0.1,
@@ -3633,7 +4062,8 @@
3633
4062
  "attributes": {},
3634
4063
  "path": ["borderColor", "disabled"],
3635
4064
  "value": "#818b981a",
3636
- "type": "color"
4065
+ "type": "color",
4066
+ "description": "Border color for disabled interactive elements"
3637
4067
  },
3638
4068
  "borderColor-done-emphasis": {
3639
4069
  "key": "{borderColor.done.emphasis}",
@@ -3648,6 +4078,10 @@
3648
4078
  },
3649
4079
  "org.primer.overrides": {
3650
4080
  "dark-dimmed-high-contrast": "#d8b9ff"
4081
+ },
4082
+ "org.primer.llm": {
4083
+ "usage": ["done-emphasis", "merged-status"],
4084
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3651
4085
  }
3652
4086
  },
3653
4087
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3655,6 +4089,7 @@
3655
4089
  "original": {
3656
4090
  "$value": "{base.color.purple.5}",
3657
4091
  "$type": "color",
4092
+ "$description": "Strong border for completed/done state badges",
3658
4093
  "$extensions": {
3659
4094
  "org.primer.figma": {
3660
4095
  "collection": "mode",
@@ -3666,6 +4101,10 @@
3666
4101
  },
3667
4102
  "org.primer.overrides": {
3668
4103
  "dark-dimmed-high-contrast": "{base.color.purple.2}"
4104
+ },
4105
+ "org.primer.llm": {
4106
+ "usage": ["done-emphasis", "merged-status"],
4107
+ "rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
3669
4108
  }
3670
4109
  },
3671
4110
  "key": "{borderColor.done.emphasis}"
@@ -3674,7 +4113,8 @@
3674
4113
  "attributes": {},
3675
4114
  "path": ["borderColor", "done", "emphasis"],
3676
4115
  "value": "#8250df",
3677
- "type": "color"
4116
+ "type": "color",
4117
+ "description": "Strong border for completed/done state badges"
3678
4118
  },
3679
4119
  "borderColor-done-muted": {
3680
4120
  "key": "{borderColor.done.muted}",
@@ -3738,6 +4178,10 @@
3738
4178
  "isSource": true,
3739
4179
  "$type": "color"
3740
4180
  }
4181
+ },
4182
+ "org.primer.llm": {
4183
+ "usage": ["done-muted", "merged", "completed"],
4184
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3741
4185
  }
3742
4186
  },
3743
4187
  "alpha": 0.4,
@@ -3746,6 +4190,7 @@
3746
4190
  "original": {
3747
4191
  "$value": "{base.color.purple.3}",
3748
4192
  "$type": "color",
4193
+ "$description": "Subtle border for completed/done state indicators",
3749
4194
  "$extensions": {
3750
4195
  "org.primer.figma": {
3751
4196
  "collection": "mode",
@@ -3806,6 +4251,10 @@
3806
4251
  "isSource": true,
3807
4252
  "$type": "color"
3808
4253
  }
4254
+ },
4255
+ "org.primer.llm": {
4256
+ "usage": ["done-muted", "merged", "completed"],
4257
+ "rules": "Use for completed/done status borders. Conveys finished or merged state."
3809
4258
  }
3810
4259
  },
3811
4260
  "alpha": 0.4,
@@ -3815,7 +4264,8 @@
3815
4264
  "attributes": {},
3816
4265
  "path": ["borderColor", "done", "muted"],
3817
4266
  "value": "#c297ff66",
3818
- "type": "color"
4267
+ "type": "color",
4268
+ "description": "Subtle border for completed/done state indicators"
3819
4269
  },
3820
4270
  "borderColor-draft-emphasis": {
3821
4271
  "key": "{borderColor.draft.emphasis}",
@@ -3827,6 +4277,10 @@
3827
4277
  "codeSyntax": {
3828
4278
  "web": "var(--borderColor-draft-emphasis)"
3829
4279
  }
4280
+ },
4281
+ "org.primer.llm": {
4282
+ "usage": ["draft-emphasis", "draft-status"],
4283
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3830
4284
  }
3831
4285
  },
3832
4286
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3834,6 +4288,7 @@
3834
4288
  "original": {
3835
4289
  "$value": "{borderColor.neutral.emphasis}",
3836
4290
  "$type": "color",
4291
+ "$description": "Strong border for draft state badges",
3837
4292
  "$extensions": {
3838
4293
  "org.primer.figma": {
3839
4294
  "collection": "mode",
@@ -3842,6 +4297,10 @@
3842
4297
  "codeSyntax": {
3843
4298
  "web": "var(--borderColor-draft-emphasis)"
3844
4299
  }
4300
+ },
4301
+ "org.primer.llm": {
4302
+ "usage": ["draft-emphasis", "draft-status"],
4303
+ "rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
3845
4304
  }
3846
4305
  },
3847
4306
  "key": "{borderColor.draft.emphasis}"
@@ -3850,7 +4309,8 @@
3850
4309
  "attributes": {},
3851
4310
  "path": ["borderColor", "draft", "emphasis"],
3852
4311
  "value": "#59636e",
3853
- "type": "color"
4312
+ "type": "color",
4313
+ "description": "Strong border for draft state badges"
3854
4314
  },
3855
4315
  "borderColor-draft-muted": {
3856
4316
  "key": "{borderColor.draft.muted}",
@@ -3920,6 +4380,10 @@
3920
4380
  "isSource": true,
3921
4381
  "$type": "color"
3922
4382
  }
4383
+ },
4384
+ "org.primer.llm": {
4385
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4386
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3923
4387
  }
3924
4388
  },
3925
4389
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -3928,6 +4392,7 @@
3928
4392
  "original": {
3929
4393
  "$value": "{borderColor.default}",
3930
4394
  "$type": "color",
4395
+ "$description": "Subtle border for draft state indicators",
3931
4396
  "$extensions": {
3932
4397
  "org.primer.figma": {
3933
4398
  "collection": "mode",
@@ -3994,6 +4459,10 @@
3994
4459
  "isSource": true,
3995
4460
  "$type": "color"
3996
4461
  }
4462
+ },
4463
+ "org.primer.llm": {
4464
+ "usage": ["draft-muted", "draft-pr", "draft-issue"],
4465
+ "rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
3997
4466
  }
3998
4467
  },
3999
4468
  "alpha": 0.4,
@@ -4003,7 +4472,8 @@
4003
4472
  "attributes": {},
4004
4473
  "path": ["borderColor", "draft", "muted"],
4005
4474
  "value": "#d1d9e066",
4006
- "type": "color"
4475
+ "type": "color",
4476
+ "description": "Subtle border for draft state indicators"
4007
4477
  },
4008
4478
  "borderColor-emphasis": {
4009
4479
  "key": "{borderColor.emphasis}",
@@ -4021,6 +4491,10 @@
4021
4491
  "dark-dimmed-high-contrast": "#d1d9e0",
4022
4492
  "dark-tritanopia-high-contrast": "#d1d9e0",
4023
4493
  "dark-protanopia-deuteranopia-high-contrast": "#d1d9e0"
4494
+ },
4495
+ "org.primer.llm": {
4496
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4497
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4024
4498
  }
4025
4499
  },
4026
4500
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4028,6 +4502,7 @@
4028
4502
  "original": {
4029
4503
  "$value": "{base.color.neutral.8}",
4030
4504
  "$type": "color",
4505
+ "$description": "Strong border for emphasis and visual weight",
4031
4506
  "$extensions": {
4032
4507
  "org.primer.figma": {
4033
4508
  "collection": "mode",
@@ -4042,6 +4517,10 @@
4042
4517
  "dark-dimmed-high-contrast": "{borderColor.default}",
4043
4518
  "dark-tritanopia-high-contrast": "{borderColor.default}",
4044
4519
  "dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
4520
+ },
4521
+ "org.primer.llm": {
4522
+ "usage": ["emphasis-border", "strong-border", "selected-border"],
4523
+ "rules": "Use for borders needing more visual weight. Darker than borderColor.default."
4045
4524
  }
4046
4525
  },
4047
4526
  "key": "{borderColor.emphasis}"
@@ -4050,7 +4529,8 @@
4050
4529
  "attributes": {},
4051
4530
  "path": ["borderColor", "emphasis"],
4052
4531
  "value": "#818b98",
4053
- "type": "color"
4532
+ "type": "color",
4533
+ "description": "Strong border for emphasis and visual weight"
4054
4534
  },
4055
4535
  "borderColor-muted": {
4056
4536
  "key": "{borderColor.muted}",
@@ -4120,6 +4600,10 @@
4120
4600
  "isSource": true,
4121
4601
  "$type": "color"
4122
4602
  }
4603
+ },
4604
+ "org.primer.llm": {
4605
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4606
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4123
4607
  }
4124
4608
  },
4125
4609
  "alpha": 0.7,
@@ -4128,6 +4612,7 @@
4128
4612
  "original": {
4129
4613
  "$value": "{borderColor.default}",
4130
4614
  "$type": "color",
4615
+ "$description": "Subtle border for secondary elements and light separators",
4131
4616
  "$extensions": {
4132
4617
  "org.primer.figma": {
4133
4618
  "collection": "mode",
@@ -4194,6 +4679,10 @@
4194
4679
  "isSource": true,
4195
4680
  "$type": "color"
4196
4681
  }
4682
+ },
4683
+ "org.primer.llm": {
4684
+ "usage": ["subtle-border", "light-divider", "secondary-border"],
4685
+ "rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
4197
4686
  }
4198
4687
  },
4199
4688
  "alpha": 0.7,
@@ -4203,7 +4692,8 @@
4203
4692
  "attributes": {},
4204
4693
  "path": ["borderColor", "muted"],
4205
4694
  "value": "#d1d9e0b3",
4206
- "type": "color"
4695
+ "type": "color",
4696
+ "description": "Subtle border for secondary elements and light separators"
4207
4697
  },
4208
4698
  "borderColor-neutral-emphasis": {
4209
4699
  "key": "{borderColor.neutral.emphasis}",
@@ -4215,6 +4705,10 @@
4215
4705
  },
4216
4706
  "org.primer.overrides": {
4217
4707
  "dark": "#818b98"
4708
+ },
4709
+ "org.primer.llm": {
4710
+ "usage": ["neutral-emphasis", "neutral-strong"],
4711
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4218
4712
  }
4219
4713
  },
4220
4714
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4222,6 +4716,7 @@
4222
4716
  "original": {
4223
4717
  "$value": "{base.color.neutral.9}",
4224
4718
  "$type": "color",
4719
+ "$description": "Strong neutral semantic border",
4225
4720
  "$extensions": {
4226
4721
  "org.primer.figma": {
4227
4722
  "collection": "mode",
@@ -4230,6 +4725,10 @@
4230
4725
  },
4231
4726
  "org.primer.overrides": {
4232
4727
  "dark": "{borderColor.emphasis}"
4728
+ },
4729
+ "org.primer.llm": {
4730
+ "usage": ["neutral-emphasis", "neutral-strong"],
4731
+ "rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
4233
4732
  }
4234
4733
  },
4235
4734
  "key": "{borderColor.neutral.emphasis}"
@@ -4238,7 +4737,8 @@
4238
4737
  "attributes": {},
4239
4738
  "path": ["borderColor", "neutral", "emphasis"],
4240
4739
  "value": "#59636e",
4241
- "type": "color"
4740
+ "type": "color",
4741
+ "description": "Strong neutral semantic border"
4242
4742
  },
4243
4743
  "borderColor-neutral-muted": {
4244
4744
  "key": "{borderColor.neutral.muted}",
@@ -4263,6 +4763,10 @@
4263
4763
  "isSource": true,
4264
4764
  "$type": "color"
4265
4765
  }
4766
+ },
4767
+ "org.primer.llm": {
4768
+ "usage": ["neutral-muted", "neutral-secondary"],
4769
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4266
4770
  }
4267
4771
  },
4268
4772
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4270,6 +4774,7 @@
4270
4774
  "original": {
4271
4775
  "$value": "{borderColor.muted}",
4272
4776
  "$type": "color",
4777
+ "$description": "Subtle neutral semantic border",
4273
4778
  "$extensions": {
4274
4779
  "org.primer.figma": {
4275
4780
  "collection": "mode",
@@ -4291,6 +4796,10 @@
4291
4796
  "isSource": true,
4292
4797
  "$type": "color"
4293
4798
  }
4799
+ },
4800
+ "org.primer.llm": {
4801
+ "usage": ["neutral-muted", "neutral-secondary"],
4802
+ "rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
4294
4803
  }
4295
4804
  },
4296
4805
  "key": "{borderColor.neutral.muted}"
@@ -4299,7 +4808,8 @@
4299
4808
  "attributes": {},
4300
4809
  "path": ["borderColor", "neutral", "muted"],
4301
4810
  "value": "#d1d9e0b3",
4302
- "type": "color"
4811
+ "type": "color",
4812
+ "description": "Subtle neutral semantic border"
4303
4813
  },
4304
4814
  "borderColor-open-emphasis": {
4305
4815
  "key": "{borderColor.open.emphasis}",
@@ -4321,6 +4831,10 @@
4321
4831
  "dark-protanopia-deuteranopia-high-contrast": "#bc4c00",
4322
4832
  "light-protanopia-deuteranopia": "#bc4c00",
4323
4833
  "light-protanopia-deuteranopia-high-contrast": "#bc4c00"
4834
+ },
4835
+ "org.primer.llm": {
4836
+ "usage": ["open-emphasis", "open-status"],
4837
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4324
4838
  }
4325
4839
  },
4326
4840
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4328,6 +4842,7 @@
4328
4842
  "original": {
4329
4843
  "$value": "{base.color.orange.5}",
4330
4844
  "$type": "color",
4845
+ "$description": "Strong border for open state badges",
4331
4846
  "$extensions": {
4332
4847
  "org.primer.figma": {
4333
4848
  "collection": "mode",
@@ -4346,6 +4861,10 @@
4346
4861
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
4347
4862
  "light-protanopia-deuteranopia": "{base.color.orange.5}",
4348
4863
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
4864
+ },
4865
+ "org.primer.llm": {
4866
+ "usage": ["open-emphasis", "open-status"],
4867
+ "rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
4349
4868
  }
4350
4869
  },
4351
4870
  "key": "{borderColor.open.emphasis}"
@@ -4354,7 +4873,8 @@
4354
4873
  "attributes": {},
4355
4874
  "path": ["borderColor", "open", "emphasis"],
4356
4875
  "value": "#bc4c00",
4357
- "type": "color"
4876
+ "type": "color",
4877
+ "description": "Strong border for open state badges"
4358
4878
  },
4359
4879
  "borderColor-open-muted": {
4360
4880
  "key": "{borderColor.open.muted}",
@@ -4424,6 +4944,10 @@
4424
4944
  "isSource": true,
4425
4945
  "$type": "color"
4426
4946
  }
4947
+ },
4948
+ "org.primer.llm": {
4949
+ "usage": ["open-muted", "open-issue", "open-pr"],
4950
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4427
4951
  }
4428
4952
  },
4429
4953
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4432,6 +4956,7 @@
4432
4956
  "original": {
4433
4957
  "$value": "{base.color.orange.3}",
4434
4958
  "$type": "color",
4959
+ "$description": "Subtle border for open state indicators",
4435
4960
  "$extensions": {
4436
4961
  "org.primer.figma": {
4437
4962
  "collection": "mode",
@@ -4498,6 +5023,10 @@
4498
5023
  "isSource": true,
4499
5024
  "$type": "color"
4500
5025
  }
5026
+ },
5027
+ "org.primer.llm": {
5028
+ "usage": ["open-muted", "open-issue", "open-pr"],
5029
+ "rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
4501
5030
  }
4502
5031
  },
4503
5032
  "alpha": 0.4,
@@ -4507,7 +5036,8 @@
4507
5036
  "attributes": {},
4508
5037
  "path": ["borderColor", "open", "muted"],
4509
5038
  "value": "#fb8f4466",
4510
- "type": "color"
5039
+ "type": "color",
5040
+ "description": "Subtle border for open state indicators"
4511
5041
  },
4512
5042
  "borderColor-severe-emphasis": {
4513
5043
  "key": "{borderColor.severe.emphasis}",
@@ -4525,6 +5055,10 @@
4525
5055
  "light-tritanopia": "#cf222e",
4526
5056
  "light-tritanopia-high-contrast": "#cf222e",
4527
5057
  "dark-dimmed-high-contrast": "#ffb77c"
5058
+ },
5059
+ "org.primer.llm": {
5060
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5061
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4528
5062
  }
4529
5063
  },
4530
5064
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4532,6 +5066,7 @@
4532
5066
  "original": {
4533
5067
  "$value": "{base.color.orange.5}",
4534
5068
  "$type": "color",
5069
+ "$description": "Strong severe border for prominent high-priority warnings",
4535
5070
  "$extensions": {
4536
5071
  "org.primer.figma": {
4537
5072
  "collection": "mode",
@@ -4546,6 +5081,10 @@
4546
5081
  "light-tritanopia": "{base.color.red.5}",
4547
5082
  "light-tritanopia-high-contrast": "{base.color.red.5}",
4548
5083
  "dark-dimmed-high-contrast": "{base.color.orange.2}"
5084
+ },
5085
+ "org.primer.llm": {
5086
+ "usage": ["severe-emphasis", "urgent-emphasis"],
5087
+ "rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
4549
5088
  }
4550
5089
  },
4551
5090
  "key": "{borderColor.severe.emphasis}"
@@ -4554,7 +5093,8 @@
4554
5093
  "attributes": {},
4555
5094
  "path": ["borderColor", "severe", "emphasis"],
4556
5095
  "value": "#bc4c00",
4557
- "type": "color"
5096
+ "type": "color",
5097
+ "description": "Strong severe border for prominent high-priority warnings"
4558
5098
  },
4559
5099
  "borderColor-severe-muted": {
4560
5100
  "key": "{borderColor.severe.muted}",
@@ -4613,6 +5153,10 @@
4613
5153
  "isSource": true,
4614
5154
  "$type": "color"
4615
5155
  }
5156
+ },
5157
+ "org.primer.llm": {
5158
+ "usage": ["severe-muted", "urgent-muted"],
5159
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4616
5160
  }
4617
5161
  },
4618
5162
  "alpha": 0.4,
@@ -4621,6 +5165,7 @@
4621
5165
  "original": {
4622
5166
  "$value": "{base.color.orange.3}",
4623
5167
  "$type": "color",
5168
+ "$description": "Subtle severe border for high-priority warnings",
4624
5169
  "$extensions": {
4625
5170
  "org.primer.figma": {
4626
5171
  "collection": "mode",
@@ -4676,6 +5221,10 @@
4676
5221
  "isSource": true,
4677
5222
  "$type": "color"
4678
5223
  }
5224
+ },
5225
+ "org.primer.llm": {
5226
+ "usage": ["severe-muted", "urgent-muted"],
5227
+ "rules": "Use for severe warning borders. More critical than attention, less than danger."
4679
5228
  }
4680
5229
  },
4681
5230
  "alpha": 0.4,
@@ -4685,7 +5234,8 @@
4685
5234
  "attributes": {},
4686
5235
  "path": ["borderColor", "severe", "muted"],
4687
5236
  "value": "#fb8f4466",
4688
- "type": "color"
5237
+ "type": "color",
5238
+ "description": "Subtle severe border for high-priority warnings"
4689
5239
  },
4690
5240
  "borderColor-sponsors-emphasis": {
4691
5241
  "key": "{borderColor.sponsors.emphasis}",
@@ -4700,6 +5250,10 @@
4700
5250
  },
4701
5251
  "org.primer.overrides": {
4702
5252
  "dark-dimmed-high-contrast": "#ff80c8"
5253
+ },
5254
+ "org.primer.llm": {
5255
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5256
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4703
5257
  }
4704
5258
  },
4705
5259
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4707,6 +5261,7 @@
4707
5261
  "original": {
4708
5262
  "$value": "{base.color.pink.5}",
4709
5263
  "$type": "color",
5264
+ "$description": "Strong border for prominent GitHub Sponsors elements",
4710
5265
  "$extensions": {
4711
5266
  "org.primer.figma": {
4712
5267
  "collection": "mode",
@@ -4718,6 +5273,10 @@
4718
5273
  },
4719
5274
  "org.primer.overrides": {
4720
5275
  "dark-dimmed-high-contrast": "{base.color.pink.3}"
5276
+ },
5277
+ "org.primer.llm": {
5278
+ "usage": ["sponsors-emphasis", "funding-emphasis"],
5279
+ "rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
4721
5280
  }
4722
5281
  },
4723
5282
  "key": "{borderColor.sponsors.emphasis}"
@@ -4726,7 +5285,8 @@
4726
5285
  "attributes": {},
4727
5286
  "path": ["borderColor", "sponsors", "emphasis"],
4728
5287
  "value": "#bf3989",
4729
- "type": "color"
5288
+ "type": "color",
5289
+ "description": "Strong border for prominent GitHub Sponsors elements"
4730
5290
  },
4731
5291
  "borderColor-sponsors-muted": {
4732
5292
  "key": "{borderColor.sponsors.muted}",
@@ -4790,6 +5350,10 @@
4790
5350
  "isSource": true,
4791
5351
  "$type": "color"
4792
5352
  }
5353
+ },
5354
+ "org.primer.llm": {
5355
+ "usage": ["sponsors-muted", "funding-muted"],
5356
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4793
5357
  }
4794
5358
  },
4795
5359
  "alpha": 0.4,
@@ -4798,6 +5362,7 @@
4798
5362
  "original": {
4799
5363
  "$value": "{base.color.pink.3}",
4800
5364
  "$type": "color",
5365
+ "$description": "Subtle border for GitHub Sponsors content",
4801
5366
  "$extensions": {
4802
5367
  "org.primer.figma": {
4803
5368
  "collection": "mode",
@@ -4858,6 +5423,10 @@
4858
5423
  "isSource": true,
4859
5424
  "$type": "color"
4860
5425
  }
5426
+ },
5427
+ "org.primer.llm": {
5428
+ "usage": ["sponsors-muted", "funding-muted"],
5429
+ "rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
4861
5430
  }
4862
5431
  },
4863
5432
  "alpha": 0.4,
@@ -4867,7 +5436,8 @@
4867
5436
  "attributes": {},
4868
5437
  "path": ["borderColor", "sponsors", "muted"],
4869
5438
  "value": "#ff80c866",
4870
- "type": "color"
5439
+ "type": "color",
5440
+ "description": "Subtle border for GitHub Sponsors content"
4871
5441
  },
4872
5442
  "borderColor-success-emphasis": {
4873
5443
  "key": "{borderColor.success.emphasis}",
@@ -4890,6 +5460,10 @@
4890
5460
  "light-protanopia-deuteranopia": "#0969da",
4891
5461
  "light-protanopia-deuteranopia-high-contrast": "#0969da",
4892
5462
  "dark-dimmed-high-contrast": "#6fdd8b"
5463
+ },
5464
+ "org.primer.llm": {
5465
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5466
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4893
5467
  }
4894
5468
  },
4895
5469
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -4897,6 +5471,7 @@
4897
5471
  "original": {
4898
5472
  "$value": "{base.color.blue.5}",
4899
5473
  "$type": "color",
5474
+ "$description": "Strong success border for prominent positive elements",
4900
5475
  "$extensions": {
4901
5476
  "org.primer.figma": {
4902
5477
  "collection": "mode",
@@ -4916,6 +5491,10 @@
4916
5491
  "light-protanopia-deuteranopia": "{base.color.blue.5}",
4917
5492
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
4918
5493
  "dark-dimmed-high-contrast": "{base.color.green.2}"
5494
+ },
5495
+ "org.primer.llm": {
5496
+ "usage": ["success-emphasis", "confirmed", "positive-emphasis"],
5497
+ "rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
4919
5498
  }
4920
5499
  },
4921
5500
  "key": "{borderColor.success.emphasis}"
@@ -4924,7 +5503,8 @@
4924
5503
  "attributes": {},
4925
5504
  "path": ["borderColor", "success", "emphasis"],
4926
5505
  "value": "#0969da",
4927
- "type": "color"
5506
+ "type": "color",
5507
+ "description": "Strong success border for prominent positive elements"
4928
5508
  },
4929
5509
  "borderColor-success-muted": {
4930
5510
  "key": "{borderColor.success.muted}",
@@ -5015,6 +5595,10 @@
5015
5595
  "isSource": true,
5016
5596
  "$type": "color"
5017
5597
  }
5598
+ },
5599
+ "org.primer.llm": {
5600
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5601
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5018
5602
  }
5019
5603
  },
5020
5604
  "alpha": 1,
@@ -5023,6 +5607,7 @@
5023
5607
  "original": {
5024
5608
  "$value": "{base.color.blue.0}",
5025
5609
  "$type": "color",
5610
+ "$description": "Subtle success border for positive feedback elements",
5026
5611
  "$extensions": {
5027
5612
  "org.primer.figma": {
5028
5613
  "collection": "mode",
@@ -5110,6 +5695,10 @@
5110
5695
  "isSource": true,
5111
5696
  "$type": "color"
5112
5697
  }
5698
+ },
5699
+ "org.primer.llm": {
5700
+ "usage": ["success-muted", "valid-muted", "positive-muted"],
5701
+ "rules": "Use for success state borders. Pair with bgColor.success.muted."
5113
5702
  }
5114
5703
  },
5115
5704
  "alpha": 1,
@@ -5119,7 +5708,8 @@
5119
5708
  "attributes": {},
5120
5709
  "path": ["borderColor", "success", "muted"],
5121
5710
  "value": "#ddf4ff",
5122
- "type": "color"
5711
+ "type": "color",
5712
+ "description": "Subtle success border for positive feedback elements"
5123
5713
  },
5124
5714
  "borderColor-translucent": {
5125
5715
  "key": "{borderColor.translucent}",
@@ -5179,6 +5769,10 @@
5179
5769
  "isSource": true,
5180
5770
  "$type": "color"
5181
5771
  }
5772
+ },
5773
+ "org.primer.llm": {
5774
+ "usage": ["overlay-border", "translucent-border"],
5775
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5182
5776
  }
5183
5777
  },
5184
5778
  "alpha": 0.15,
@@ -5187,6 +5781,7 @@
5187
5781
  "original": {
5188
5782
  "$value": "{base.color.neutral.13}",
5189
5783
  "$type": "color",
5784
+ "$description": "Semi-transparent border for overlays and layered elements",
5190
5785
  "$extensions": {
5191
5786
  "org.primer.figma": {
5192
5787
  "collection": "mode",
@@ -5243,6 +5838,10 @@
5243
5838
  "isSource": true,
5244
5839
  "$type": "color"
5245
5840
  }
5841
+ },
5842
+ "org.primer.llm": {
5843
+ "usage": ["overlay-border", "translucent-border"],
5844
+ "rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
5246
5845
  }
5247
5846
  },
5248
5847
  "alpha": 0.15,
@@ -5252,7 +5851,8 @@
5252
5851
  "attributes": {},
5253
5852
  "path": ["borderColor", "translucent"],
5254
5853
  "value": "#1f232826",
5255
- "type": "color"
5854
+ "type": "color",
5855
+ "description": "Semi-transparent border for overlays and layered elements"
5256
5856
  },
5257
5857
  "borderColor-transparent": {
5258
5858
  "key": "{borderColor.transparent}",
@@ -5268,6 +5868,7 @@
5268
5868
  "original": {
5269
5869
  "$value": "{base.color.transparent}",
5270
5870
  "$type": "color",
5871
+ "$description": "Fully transparent border",
5271
5872
  "$extensions": {
5272
5873
  "org.primer.figma": {
5273
5874
  "collection": "mode",
@@ -5281,7 +5882,8 @@
5281
5882
  "attributes": {},
5282
5883
  "path": ["borderColor", "transparent"],
5283
5884
  "value": "#ffffff00",
5284
- "type": "color"
5885
+ "type": "color",
5886
+ "description": "Fully transparent border"
5285
5887
  },
5286
5888
  "borderColor-upsell-emphasis": {
5287
5889
  "key": "{borderColor.upsell.emphasis}",
@@ -5293,6 +5895,10 @@
5293
5895
  "codeSyntax": {
5294
5896
  "web": "var(--borderColor-upsell-emphasis)"
5295
5897
  }
5898
+ },
5899
+ "org.primer.llm": {
5900
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5901
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5296
5902
  }
5297
5903
  },
5298
5904
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5300,6 +5906,7 @@
5300
5906
  "original": {
5301
5907
  "$value": "{borderColor.done.emphasis}",
5302
5908
  "$type": "color",
5909
+ "$description": "Strong border for prominent upsell elements",
5303
5910
  "$extensions": {
5304
5911
  "org.primer.figma": {
5305
5912
  "collection": "mode",
@@ -5308,6 +5915,10 @@
5308
5915
  "codeSyntax": {
5309
5916
  "web": "var(--borderColor-upsell-emphasis)"
5310
5917
  }
5918
+ },
5919
+ "org.primer.llm": {
5920
+ "usage": ["upsell-emphasis", "premium-emphasis"],
5921
+ "rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
5311
5922
  }
5312
5923
  },
5313
5924
  "key": "{borderColor.upsell.emphasis}"
@@ -5316,7 +5927,8 @@
5316
5927
  "attributes": {},
5317
5928
  "path": ["borderColor", "upsell", "emphasis"],
5318
5929
  "value": "#8250df",
5319
- "type": "color"
5930
+ "type": "color",
5931
+ "description": "Strong border for prominent upsell elements"
5320
5932
  },
5321
5933
  "borderColor-upsell-muted": {
5322
5934
  "key": "{borderColor.upsell.muted}",
@@ -5328,6 +5940,10 @@
5328
5940
  "codeSyntax": {
5329
5941
  "web": "var(--borderColor-upsell-muted)"
5330
5942
  }
5943
+ },
5944
+ "org.primer.llm": {
5945
+ "usage": ["upsell-muted", "premium-muted"],
5946
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5331
5947
  }
5332
5948
  },
5333
5949
  "filePath": "src/tokens/functional/color/borderColor.json5",
@@ -5335,6 +5951,7 @@
5335
5951
  "original": {
5336
5952
  "$value": "{borderColor.done.muted}",
5337
5953
  "$type": "color",
5954
+ "$description": "Subtle border for upsell and promotional content",
5338
5955
  "$extensions": {
5339
5956
  "org.primer.figma": {
5340
5957
  "collection": "mode",
@@ -5343,6 +5960,10 @@
5343
5960
  "codeSyntax": {
5344
5961
  "web": "var(--borderColor-upsell-muted)"
5345
5962
  }
5963
+ },
5964
+ "org.primer.llm": {
5965
+ "usage": ["upsell-muted", "premium-muted"],
5966
+ "rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
5346
5967
  }
5347
5968
  },
5348
5969
  "key": "{borderColor.upsell.muted}"
@@ -5351,7 +5972,8 @@
5351
5972
  "attributes": {},
5352
5973
  "path": ["borderColor", "upsell", "muted"],
5353
5974
  "value": "#c297ff66",
5354
- "type": "color"
5975
+ "type": "color",
5976
+ "description": "Subtle border for upsell and promotional content"
5355
5977
  },
5356
5978
  "button-danger-bgColor-active": {
5357
5979
  "key": "{button.danger.bgColor.active}",
@@ -36496,6 +37118,10 @@
36496
37118
  "light-high-contrast": "#0550ae",
36497
37119
  "light-tritanopia-high-contrast": "#0550ae",
36498
37120
  "light-protanopia-deuteranopia-high-contrast": "#0550ae"
37121
+ },
37122
+ "org.primer.llm": {
37123
+ "usage": ["accent-text", "info-text", "accent-icon"],
37124
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36499
37125
  }
36500
37126
  },
36501
37127
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36503,6 +37129,7 @@
36503
37129
  "original": {
36504
37130
  "$value": "{base.color.blue.5}",
36505
37131
  "$type": "color",
37132
+ "$description": "Accent text for links and interactive elements",
36506
37133
  "$extensions": {
36507
37134
  "org.primer.figma": {
36508
37135
  "collection": "mode",
@@ -36522,6 +37149,10 @@
36522
37149
  "light-high-contrast": "{base.color.blue.6}",
36523
37150
  "light-tritanopia-high-contrast": "{base.color.blue.6}",
36524
37151
  "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
37152
+ },
37153
+ "org.primer.llm": {
37154
+ "usage": ["accent-text", "info-text", "accent-icon"],
37155
+ "rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
36525
37156
  }
36526
37157
  },
36527
37158
  "key": "{fgColor.accent}"
@@ -36530,7 +37161,8 @@
36530
37161
  "attributes": {},
36531
37162
  "path": ["fgColor", "accent"],
36532
37163
  "value": "#0969da",
36533
- "type": "color"
37164
+ "type": "color",
37165
+ "description": "Accent text for links and interactive elements"
36534
37166
  },
36535
37167
  "fgColor-attention": {
36536
37168
  "key": "{fgColor.attention}",
@@ -36549,6 +37181,10 @@
36549
37181
  "light-protanopia-deuteranopia-high-contrast": "#7d4e00",
36550
37182
  "light-tritanopia-high-contrast": "#7d4e00",
36551
37183
  "dark-dimmed-high-contrast": "#fae17d"
37184
+ },
37185
+ "org.primer.llm": {
37186
+ "usage": ["attention-text", "warning-text", "caution-text"],
37187
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36552
37188
  }
36553
37189
  },
36554
37190
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36556,6 +37192,7 @@
36556
37192
  "original": {
36557
37193
  "$value": "{base.color.yellow.5}",
36558
37194
  "$type": "color",
37195
+ "$description": "Attention text for warnings and caution states",
36559
37196
  "$extensions": {
36560
37197
  "org.primer.figma": {
36561
37198
  "collection": "mode",
@@ -36571,6 +37208,10 @@
36571
37208
  "light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
36572
37209
  "light-tritanopia-high-contrast": "{base.color.yellow.6}",
36573
37210
  "dark-dimmed-high-contrast": "{base.color.yellow.1}"
37211
+ },
37212
+ "org.primer.llm": {
37213
+ "usage": ["attention-text", "warning-text", "caution-text"],
37214
+ "rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
36574
37215
  }
36575
37216
  },
36576
37217
  "key": "{fgColor.attention}"
@@ -36579,7 +37220,8 @@
36579
37220
  "attributes": {},
36580
37221
  "path": ["fgColor", "attention"],
36581
37222
  "value": "#9a6700",
36582
- "type": "color"
37223
+ "type": "color",
37224
+ "description": "Attention text for warnings and caution states"
36583
37225
  },
36584
37226
  "fgColor-black": {
36585
37227
  "key": "{fgColor.black}",
@@ -36591,6 +37233,10 @@
36591
37233
  },
36592
37234
  "org.primer.overrides": {
36593
37235
  "dark": "#ffffff"
37236
+ },
37237
+ "org.primer.llm": {
37238
+ "doNotUse": true,
37239
+ "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."
36594
37240
  }
36595
37241
  },
36596
37242
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36598,6 +37244,7 @@
36598
37244
  "original": {
36599
37245
  "$value": "{base.color.neutral.13}",
36600
37246
  "$type": "color",
37247
+ "$description": "Pure black text",
36601
37248
  "$extensions": {
36602
37249
  "org.primer.figma": {
36603
37250
  "collection": "mode",
@@ -36606,6 +37253,10 @@
36606
37253
  },
36607
37254
  "org.primer.overrides": {
36608
37255
  "dark": "{base.color.neutral.0}"
37256
+ },
37257
+ "org.primer.llm": {
37258
+ "doNotUse": true,
37259
+ "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."
36609
37260
  }
36610
37261
  },
36611
37262
  "key": "{fgColor.black}"
@@ -36614,7 +37265,8 @@
36614
37265
  "attributes": {},
36615
37266
  "path": ["fgColor", "black"],
36616
37267
  "value": "#1f2328",
36617
- "type": "color"
37268
+ "type": "color",
37269
+ "description": "Pure black text"
36618
37270
  },
36619
37271
  "fgColor-closed": {
36620
37272
  "key": "{fgColor.closed}",
@@ -36636,6 +37288,10 @@
36636
37288
  "dark-tritanopia-high-contrast": "#59636e",
36637
37289
  "light-tritanopia": "#59636e",
36638
37290
  "light-tritanopia-high-contrast": "#59636e"
37291
+ },
37292
+ "org.primer.llm": {
37293
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37294
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36639
37295
  }
36640
37296
  },
36641
37297
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36643,6 +37299,7 @@
36643
37299
  "original": {
36644
37300
  "$value": "{fgColor.muted}",
36645
37301
  "$type": "color",
37302
+ "$description": "Text color for closed state indicators (issues, PRs)",
36646
37303
  "$extensions": {
36647
37304
  "org.primer.figma": {
36648
37305
  "collection": "mode",
@@ -36661,6 +37318,10 @@
36661
37318
  "dark-tritanopia-high-contrast": "{fgColor.muted}",
36662
37319
  "light-tritanopia": "{fgColor.muted}",
36663
37320
  "light-tritanopia-high-contrast": "{fgColor.muted}"
37321
+ },
37322
+ "org.primer.llm": {
37323
+ "usage": ["closed-text", "closed-issue", "closed-pr"],
37324
+ "rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
36664
37325
  }
36665
37326
  },
36666
37327
  "key": "{fgColor.closed}"
@@ -36669,7 +37330,8 @@
36669
37330
  "attributes": {},
36670
37331
  "path": ["fgColor", "closed"],
36671
37332
  "value": "#59636e",
36672
- "type": "color"
37333
+ "type": "color",
37334
+ "description": "Text color for closed state indicators (issues, PRs)"
36673
37335
  },
36674
37336
  "fgColor-danger": {
36675
37337
  "key": "{fgColor.danger}",
@@ -36693,6 +37355,10 @@
36693
37355
  "dark-tritanopia-high-contrast": "#ff8182",
36694
37356
  "light-high-contrast": "#a40e26",
36695
37357
  "light-tritanopia-high-contrast": "#a40e26"
37358
+ },
37359
+ "org.primer.llm": {
37360
+ "usage": ["danger-text", "error-text", "destructive-text"],
37361
+ "rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
36696
37362
  }
36697
37363
  },
36698
37364
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36700,6 +37366,7 @@
36700
37366
  "original": {
36701
37367
  "$value": "{base.color.orange.5}",
36702
37368
  "$type": "color",
37369
+ "$description": "Danger text for errors and destructive actions",
36703
37370
  "$extensions": {
36704
37371
  "org.primer.figma": {
36705
37372
  "collection": "mode",
@@ -36720,6 +37387,10 @@
36720
37387
  "dark-tritanopia-high-contrast": "{base.color.red.3}",
36721
37388
  "light-high-contrast": "{base.color.red.6}",
36722
37389
  "light-tritanopia-high-contrast": "{base.color.red.6}"
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."
36723
37394
  }
36724
37395
  },
36725
37396
  "key": "{fgColor.danger}"
@@ -36728,7 +37399,8 @@
36728
37399
  "attributes": {},
36729
37400
  "path": ["fgColor", "danger"],
36730
37401
  "value": "#bc4c00",
36731
- "type": "color"
37402
+ "type": "color",
37403
+ "description": "Danger text for errors and destructive actions"
36732
37404
  },
36733
37405
  "fgColor-default": {
36734
37406
  "key": "{fgColor.default}",
@@ -36746,8 +37418,12 @@
36746
37418
  "dark-high-contrast": "#1f2328",
36747
37419
  "dark-tritanopia-high-contrast": "#1f2328",
36748
37420
  "dark-protanopia-deuteranopia-high-contrast": "#1f2328",
36749
- "dark-dimmed": "#393f46",
37421
+ "dark-dimmed": "#25292e",
36750
37422
  "dark-dimmed-high-contrast": "#25292e"
37423
+ },
37424
+ "org.primer.llm": {
37425
+ "usage": ["default-text", "heading", "body-text"],
37426
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36751
37427
  }
36752
37428
  },
36753
37429
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36755,6 +37431,7 @@
36755
37431
  "original": {
36756
37432
  "$value": "{base.color.neutral.13}",
36757
37433
  "$type": "color",
37434
+ "$description": "Default text color for primary content and headings",
36758
37435
  "$extensions": {
36759
37436
  "org.primer.figma": {
36760
37437
  "collection": "mode",
@@ -36769,8 +37446,12 @@
36769
37446
  "dark-high-contrast": "{base.color.neutral.13}",
36770
37447
  "dark-tritanopia-high-contrast": "{base.color.neutral.13}",
36771
37448
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
36772
- "dark-dimmed": "{base.color.neutral.11}",
37449
+ "dark-dimmed": "{base.color.neutral.12}",
36773
37450
  "dark-dimmed-high-contrast": "{base.color.neutral.12}"
37451
+ },
37452
+ "org.primer.llm": {
37453
+ "usage": ["default-text", "heading", "body-text"],
37454
+ "rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
36774
37455
  }
36775
37456
  },
36776
37457
  "key": "{fgColor.default}"
@@ -36779,7 +37460,8 @@
36779
37460
  "attributes": {},
36780
37461
  "path": ["fgColor", "default"],
36781
37462
  "value": "#1f2328",
36782
- "type": "color"
37463
+ "type": "color",
37464
+ "description": "Default text color for primary content and headings"
36783
37465
  },
36784
37466
  "fgColor-disabled": {
36785
37467
  "key": "{fgColor.disabled}",
@@ -36804,6 +37486,10 @@
36804
37486
  "dark-high-contrast": "#818b98",
36805
37487
  "dark-tritanopia-high-contrast": "#818b98",
36806
37488
  "dark-protanopia-deuteranopia-high-contrast": "#818b98"
37489
+ },
37490
+ "org.primer.llm": {
37491
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37492
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36807
37493
  }
36808
37494
  },
36809
37495
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36811,6 +37497,7 @@
36811
37497
  "original": {
36812
37498
  "$value": "{base.color.neutral.8}",
36813
37499
  "$type": "color",
37500
+ "$description": "Text color for disabled interactive elements",
36814
37501
  "$extensions": {
36815
37502
  "org.primer.figma": {
36816
37503
  "collection": "mode",
@@ -36832,6 +37519,10 @@
36832
37519
  "dark-high-contrast": "{base.color.neutral.8}",
36833
37520
  "dark-tritanopia-high-contrast": "{base.color.neutral.8}",
36834
37521
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
37522
+ },
37523
+ "org.primer.llm": {
37524
+ "usage": ["disabled-text", "inactive-text", "unavailable"],
37525
+ "rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
36835
37526
  }
36836
37527
  },
36837
37528
  "key": "{fgColor.disabled}"
@@ -36840,7 +37531,8 @@
36840
37531
  "attributes": {},
36841
37532
  "path": ["fgColor", "disabled"],
36842
37533
  "value": "#818b98",
36843
- "type": "color"
37534
+ "type": "color",
37535
+ "description": "Text color for disabled interactive elements"
36844
37536
  },
36845
37537
  "fgColor-done": {
36846
37538
  "key": "{fgColor.done}",
@@ -36862,6 +37554,10 @@
36862
37554
  "light-high-contrast": "#6639ba",
36863
37555
  "light-protanopia-deuteranopia-high-contrast": "#6639ba",
36864
37556
  "light-tritanopia-high-contrast": "#6639ba"
37557
+ },
37558
+ "org.primer.llm": {
37559
+ "usage": ["done-text", "merged", "completed"],
37560
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36865
37561
  }
36866
37562
  },
36867
37563
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36869,6 +37565,7 @@
36869
37565
  "original": {
36870
37566
  "$value": "{base.color.purple.5}",
36871
37567
  "$type": "color",
37568
+ "$description": "Text color for completed/done state indicators",
36872
37569
  "$extensions": {
36873
37570
  "org.primer.figma": {
36874
37571
  "collection": "mode",
@@ -36887,6 +37584,10 @@
36887
37584
  "light-high-contrast": "{base.color.purple.6}",
36888
37585
  "light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
36889
37586
  "light-tritanopia-high-contrast": "{base.color.purple.6}"
37587
+ },
37588
+ "org.primer.llm": {
37589
+ "usage": ["done-text", "merged", "completed"],
37590
+ "rules": "Use for completed/done status text. Conveys finished or merged state."
36890
37591
  }
36891
37592
  },
36892
37593
  "key": "{fgColor.done}"
@@ -36895,7 +37596,8 @@
36895
37596
  "attributes": {},
36896
37597
  "path": ["fgColor", "done"],
36897
37598
  "value": "#8250df",
36898
- "type": "color"
37599
+ "type": "color",
37600
+ "description": "Text color for completed/done state indicators"
36899
37601
  },
36900
37602
  "fgColor-draft": {
36901
37603
  "key": "{fgColor.draft}",
@@ -36907,6 +37609,10 @@
36907
37609
  "codeSyntax": {
36908
37610
  "web": "var(--fgColor-draft)"
36909
37611
  }
37612
+ },
37613
+ "org.primer.llm": {
37614
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37615
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36910
37616
  }
36911
37617
  },
36912
37618
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36914,6 +37620,7 @@
36914
37620
  "original": {
36915
37621
  "$value": "{fgColor.neutral}",
36916
37622
  "$type": "color",
37623
+ "$description": "Text color for draft state indicators",
36917
37624
  "$extensions": {
36918
37625
  "org.primer.figma": {
36919
37626
  "collection": "mode",
@@ -36922,6 +37629,10 @@
36922
37629
  "codeSyntax": {
36923
37630
  "web": "var(--fgColor-draft)"
36924
37631
  }
37632
+ },
37633
+ "org.primer.llm": {
37634
+ "usage": ["draft-text", "draft-pr", "draft-issue"],
37635
+ "rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
36925
37636
  }
36926
37637
  },
36927
37638
  "key": "{fgColor.draft}"
@@ -36930,7 +37641,8 @@
36930
37641
  "attributes": {},
36931
37642
  "path": ["fgColor", "draft"],
36932
37643
  "value": "#59636e",
36933
- "type": "color"
37644
+ "type": "color",
37645
+ "description": "Text color for draft state indicators"
36934
37646
  },
36935
37647
  "fgColor-link": {
36936
37648
  "key": "{fgColor.link}",
@@ -36942,6 +37654,10 @@
36942
37654
  "codeSyntax": {
36943
37655
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36944
37656
  }
37657
+ },
37658
+ "org.primer.llm": {
37659
+ "usage": ["link-text", "hyperlink"],
37660
+ "rules": "MUST use for all text links. Provides expected link affordance."
36945
37661
  }
36946
37662
  },
36947
37663
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36949,6 +37665,7 @@
36949
37665
  "original": {
36950
37666
  "$value": "{fgColor.accent}",
36951
37667
  "$type": "color",
37668
+ "$description": "Text color for hyperlinks",
36952
37669
  "$extensions": {
36953
37670
  "org.primer.figma": {
36954
37671
  "collection": "mode",
@@ -36957,6 +37674,10 @@
36957
37674
  "codeSyntax": {
36958
37675
  "web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
36959
37676
  }
37677
+ },
37678
+ "org.primer.llm": {
37679
+ "usage": ["link-text", "hyperlink"],
37680
+ "rules": "MUST use for all text links. Provides expected link affordance."
36960
37681
  }
36961
37682
  },
36962
37683
  "key": "{fgColor.link}"
@@ -36965,7 +37686,8 @@
36965
37686
  "attributes": {},
36966
37687
  "path": ["fgColor", "link"],
36967
37688
  "value": "#0969da",
36968
- "type": "color"
37689
+ "type": "color",
37690
+ "description": "Text color for hyperlinks"
36969
37691
  },
36970
37692
  "fgColor-muted": {
36971
37693
  "key": "{fgColor.muted}",
@@ -36986,6 +37708,10 @@
36986
37708
  "dark-dimmed-high-contrast": "#454c54",
36987
37709
  "dark-tritanopia-high-contrast": "#454c54",
36988
37710
  "dark-protanopia-deuteranopia-high-contrast": "#454c54"
37711
+ },
37712
+ "org.primer.llm": {
37713
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37714
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
36989
37715
  }
36990
37716
  },
36991
37717
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -36993,6 +37719,7 @@
36993
37719
  "original": {
36994
37720
  "$value": "{base.color.neutral.9}",
36995
37721
  "$type": "color",
37722
+ "$description": "Muted text for secondary content and less important information",
36996
37723
  "$extensions": {
36997
37724
  "org.primer.figma": {
36998
37725
  "collection": "mode",
@@ -37010,6 +37737,10 @@
37010
37737
  "dark-dimmed-high-contrast": "{base.color.neutral.10}",
37011
37738
  "dark-tritanopia-high-contrast": "{base.color.neutral.10}",
37012
37739
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
37740
+ },
37741
+ "org.primer.llm": {
37742
+ "usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
37743
+ "rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
37013
37744
  }
37014
37745
  },
37015
37746
  "key": "{fgColor.muted}"
@@ -37018,7 +37749,8 @@
37018
37749
  "attributes": {},
37019
37750
  "path": ["fgColor", "muted"],
37020
37751
  "value": "#59636e",
37021
- "type": "color"
37752
+ "type": "color",
37753
+ "description": "Muted text for secondary content and less important information"
37022
37754
  },
37023
37755
  "fgColor-neutral": {
37024
37756
  "key": "{fgColor.neutral}",
@@ -37036,6 +37768,10 @@
37036
37768
  "dark-dimmed-high-contrast": "#393f46",
37037
37769
  "dark-tritanopia-high-contrast": "#393f46",
37038
37770
  "dark-protanopia-deuteranopia-high-contrast": "#393f46"
37771
+ },
37772
+ "org.primer.llm": {
37773
+ "usage": ["neutral-icon", "neutral-text"],
37774
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37039
37775
  }
37040
37776
  },
37041
37777
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37043,6 +37779,7 @@
37043
37779
  "original": {
37044
37780
  "$value": "{base.color.neutral.9}",
37045
37781
  "$type": "color",
37782
+ "$description": "Neutral semantic text for icons and secondary elements",
37046
37783
  "$extensions": {
37047
37784
  "org.primer.figma": {
37048
37785
  "collection": "mode",
@@ -37057,6 +37794,10 @@
37057
37794
  "dark-dimmed-high-contrast": "{base.color.neutral.11}",
37058
37795
  "dark-tritanopia-high-contrast": "{base.color.neutral.11}",
37059
37796
  "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
37797
+ },
37798
+ "org.primer.llm": {
37799
+ "usage": ["neutral-icon", "neutral-text"],
37800
+ "rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
37060
37801
  }
37061
37802
  },
37062
37803
  "key": "{fgColor.neutral}"
@@ -37065,7 +37806,8 @@
37065
37806
  "attributes": {},
37066
37807
  "path": ["fgColor", "neutral"],
37067
37808
  "value": "#59636e",
37068
- "type": "color"
37809
+ "type": "color",
37810
+ "description": "Neutral semantic text for icons and secondary elements"
37069
37811
  },
37070
37812
  "fgColor-onEmphasis": {
37071
37813
  "key": "{fgColor.onEmphasis}",
@@ -37082,6 +37824,10 @@
37082
37824
  "dark": "#1f2328",
37083
37825
  "dark-dimmed": "#25292e",
37084
37826
  "dark-dimmed-high-contrast": "#ffffff"
37827
+ },
37828
+ "org.primer.llm": {
37829
+ "usage": ["text-on-emphasis", "contrast-text"],
37830
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37085
37831
  }
37086
37832
  },
37087
37833
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37089,6 +37835,7 @@
37089
37835
  "original": {
37090
37836
  "$value": "{base.color.neutral.0}",
37091
37837
  "$type": "color",
37838
+ "$description": "Text color for use on emphasis backgrounds",
37092
37839
  "$extensions": {
37093
37840
  "org.primer.figma": {
37094
37841
  "collection": "mode",
@@ -37102,6 +37849,10 @@
37102
37849
  "dark": "{base.color.neutral.13}",
37103
37850
  "dark-dimmed": "{base.color.neutral.12}",
37104
37851
  "dark-dimmed-high-contrast": "#ffffff"
37852
+ },
37853
+ "org.primer.llm": {
37854
+ "usage": ["text-on-emphasis", "contrast-text"],
37855
+ "rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
37105
37856
  }
37106
37857
  },
37107
37858
  "key": "{fgColor.onEmphasis}"
@@ -37110,7 +37861,8 @@
37110
37861
  "attributes": {},
37111
37862
  "path": ["fgColor", "onEmphasis"],
37112
37863
  "value": "#ffffff",
37113
- "type": "color"
37864
+ "type": "color",
37865
+ "description": "Text color for use on emphasis backgrounds"
37114
37866
  },
37115
37867
  "fgColor-onInverse": {
37116
37868
  "key": "{fgColor.onInverse}",
@@ -37119,6 +37871,10 @@
37119
37871
  "collection": "mode",
37120
37872
  "group": "semantic",
37121
37873
  "scopes": ["fgColor"]
37874
+ },
37875
+ "org.primer.llm": {
37876
+ "usage": ["text-on-inverse", "inverse-text"],
37877
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37122
37878
  }
37123
37879
  },
37124
37880
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37126,11 +37882,16 @@
37126
37882
  "original": {
37127
37883
  "$value": "{base.color.neutral.0}",
37128
37884
  "$type": "color",
37885
+ "$description": "Text color for use on inverse backgrounds",
37129
37886
  "$extensions": {
37130
37887
  "org.primer.figma": {
37131
37888
  "collection": "mode",
37132
37889
  "group": "semantic",
37133
37890
  "scopes": ["fgColor"]
37891
+ },
37892
+ "org.primer.llm": {
37893
+ "usage": ["text-on-inverse", "inverse-text"],
37894
+ "rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
37134
37895
  }
37135
37896
  },
37136
37897
  "key": "{fgColor.onInverse}"
@@ -37139,7 +37900,8 @@
37139
37900
  "attributes": {},
37140
37901
  "path": ["fgColor", "onInverse"],
37141
37902
  "value": "#ffffff",
37142
- "type": "color"
37903
+ "type": "color",
37904
+ "description": "Text color for use on inverse backgrounds"
37143
37905
  },
37144
37906
  "fgColor-open": {
37145
37907
  "key": "{fgColor.open}",
@@ -37161,6 +37923,10 @@
37161
37923
  "dark-tritanopia-high-contrast": "#ffaba8",
37162
37924
  "light-tritanopia": "#cf222e",
37163
37925
  "light-tritanopia-high-contrast": "#a40e26"
37926
+ },
37927
+ "org.primer.llm": {
37928
+ "usage": ["open-text", "open-issue", "open-pr"],
37929
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37164
37930
  }
37165
37931
  },
37166
37932
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37168,6 +37934,7 @@
37168
37934
  "original": {
37169
37935
  "$value": "{base.color.orange.5}",
37170
37936
  "$type": "color",
37937
+ "$description": "Text color for open state indicators (issues, PRs)",
37171
37938
  "$extensions": {
37172
37939
  "org.primer.figma": {
37173
37940
  "collection": "mode",
@@ -37186,6 +37953,10 @@
37186
37953
  "dark-tritanopia-high-contrast": "{base.color.red.2}",
37187
37954
  "light-tritanopia": "{base.color.red.5}",
37188
37955
  "light-tritanopia-high-contrast": "{base.color.red.6}"
37956
+ },
37957
+ "org.primer.llm": {
37958
+ "usage": ["open-text", "open-issue", "open-pr"],
37959
+ "rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
37189
37960
  }
37190
37961
  },
37191
37962
  "key": "{fgColor.open}"
@@ -37194,7 +37965,8 @@
37194
37965
  "attributes": {},
37195
37966
  "path": ["fgColor", "open"],
37196
37967
  "value": "#bc4c00",
37197
- "type": "color"
37968
+ "type": "color",
37969
+ "description": "Text color for open state indicators (issues, PRs)"
37198
37970
  },
37199
37971
  "fgColor-severe": {
37200
37972
  "key": "{fgColor.severe}",
@@ -37218,6 +37990,10 @@
37218
37990
  "light-tritanopia": "#cf222e",
37219
37991
  "light-tritanopia-high-contrast": "#a40e26",
37220
37992
  "light-protanopia-deuteranopia-high-contrast": "#953800"
37993
+ },
37994
+ "org.primer.llm": {
37995
+ "usage": ["severe-text", "urgent-text", "severe-icon"],
37996
+ "rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
37221
37997
  }
37222
37998
  },
37223
37999
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37225,6 +38001,7 @@
37225
38001
  "original": {
37226
38002
  "$value": "{base.color.orange.5}",
37227
38003
  "$type": "color",
38004
+ "$description": "Severe text for high-priority warnings",
37228
38005
  "$extensions": {
37229
38006
  "org.primer.figma": {
37230
38007
  "collection": "mode",
@@ -37245,6 +38022,10 @@
37245
38022
  "light-tritanopia": "{base.color.red.5}",
37246
38023
  "light-tritanopia-high-contrast": "{base.color.red.6}",
37247
38024
  "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
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."
37248
38029
  }
37249
38030
  },
37250
38031
  "key": "{fgColor.severe}"
@@ -37253,7 +38034,8 @@
37253
38034
  "attributes": {},
37254
38035
  "path": ["fgColor", "severe"],
37255
38036
  "value": "#bc4c00",
37256
- "type": "color"
38037
+ "type": "color",
38038
+ "description": "Severe text for high-priority warnings"
37257
38039
  },
37258
38040
  "fgColor-sponsors": {
37259
38041
  "key": "{fgColor.sponsors}",
@@ -37275,6 +38057,10 @@
37275
38057
  "light-high-contrast": "#99286e",
37276
38058
  "light-protanopia-deuteranopia-high-contrast": "#99286e",
37277
38059
  "light-tritanopia-high-contrast": "#99286e"
38060
+ },
38061
+ "org.primer.llm": {
38062
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38063
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37278
38064
  }
37279
38065
  },
37280
38066
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37282,6 +38068,7 @@
37282
38068
  "original": {
37283
38069
  "$value": "{base.color.pink.5}",
37284
38070
  "$type": "color",
38071
+ "$description": "Text color for GitHub Sponsors content",
37285
38072
  "$extensions": {
37286
38073
  "org.primer.figma": {
37287
38074
  "collection": "mode",
@@ -37300,6 +38087,10 @@
37300
38087
  "light-high-contrast": "{base.color.pink.6}",
37301
38088
  "light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
37302
38089
  "light-tritanopia-high-contrast": "{base.color.pink.6}"
38090
+ },
38091
+ "org.primer.llm": {
38092
+ "usage": ["sponsors-text", "funding-text", "sponsors-icon"],
38093
+ "rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
37303
38094
  }
37304
38095
  },
37305
38096
  "key": "{fgColor.sponsors}"
@@ -37308,7 +38099,8 @@
37308
38099
  "attributes": {},
37309
38100
  "path": ["fgColor", "sponsors"],
37310
38101
  "value": "#bf3989",
37311
- "type": "color"
38102
+ "type": "color",
38103
+ "description": "Text color for GitHub Sponsors content"
37312
38104
  },
37313
38105
  "fgColor-success": {
37314
38106
  "key": "{fgColor.success}",
@@ -37334,6 +38126,10 @@
37334
38126
  "dark-tritanopia-high-contrast": "#80ccff",
37335
38127
  "light-tritanopia": "#0969da",
37336
38128
  "light-tritanopia-high-contrast": "#0550ae"
38129
+ },
38130
+ "org.primer.llm": {
38131
+ "usage": ["success-text", "positive-text", "success-icon"],
38132
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37337
38133
  }
37338
38134
  },
37339
38135
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37341,6 +38137,7 @@
37341
38137
  "original": {
37342
38138
  "$value": "{base.color.blue.5}",
37343
38139
  "$type": "color",
38140
+ "$description": "Success text for positive feedback and completed states",
37344
38141
  "$extensions": {
37345
38142
  "org.primer.figma": {
37346
38143
  "collection": "mode",
@@ -37363,6 +38160,10 @@
37363
38160
  "dark-tritanopia-high-contrast": "{base.color.blue.2}",
37364
38161
  "light-tritanopia": "{base.color.blue.5}",
37365
38162
  "light-tritanopia-high-contrast": "{base.color.blue.6}"
38163
+ },
38164
+ "org.primer.llm": {
38165
+ "usage": ["success-text", "positive-text", "success-icon"],
38166
+ "rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
37366
38167
  }
37367
38168
  },
37368
38169
  "key": "{fgColor.success}"
@@ -37371,7 +38172,8 @@
37371
38172
  "attributes": {},
37372
38173
  "path": ["fgColor", "success"],
37373
38174
  "value": "#0969da",
37374
- "type": "color"
38175
+ "type": "color",
38176
+ "description": "Success text for positive feedback and completed states"
37375
38177
  },
37376
38178
  "fgColor-upsell": {
37377
38179
  "key": "{fgColor.upsell}",
@@ -37383,6 +38185,10 @@
37383
38185
  "codeSyntax": {
37384
38186
  "web": "var(--fgColor-upsell)"
37385
38187
  }
38188
+ },
38189
+ "org.primer.llm": {
38190
+ "usage": ["upsell-text", "premium-text", "promotional"],
38191
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37386
38192
  }
37387
38193
  },
37388
38194
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37390,6 +38196,7 @@
37390
38196
  "original": {
37391
38197
  "$value": "{fgColor.done}",
37392
38198
  "$type": "color",
38199
+ "$description": "Text color for upsell and promotional content",
37393
38200
  "$extensions": {
37394
38201
  "org.primer.figma": {
37395
38202
  "collection": "mode",
@@ -37398,6 +38205,10 @@
37398
38205
  "codeSyntax": {
37399
38206
  "web": "var(--fgColor-upsell)"
37400
38207
  }
38208
+ },
38209
+ "org.primer.llm": {
38210
+ "usage": ["upsell-text", "premium-text", "promotional"],
38211
+ "rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
37401
38212
  }
37402
38213
  },
37403
38214
  "key": "{fgColor.upsell}"
@@ -37406,7 +38217,8 @@
37406
38217
  "attributes": {},
37407
38218
  "path": ["fgColor", "upsell"],
37408
38219
  "value": "#8250df",
37409
- "type": "color"
38220
+ "type": "color",
38221
+ "description": "Text color for upsell and promotional content"
37410
38222
  },
37411
38223
  "fgColor-white": {
37412
38224
  "key": "{fgColor.white}",
@@ -37418,6 +38230,10 @@
37418
38230
  },
37419
38231
  "org.primer.overrides": {
37420
38232
  "dark": "#1f2328"
38233
+ },
38234
+ "org.primer.llm": {
38235
+ "doNotUse": true,
38236
+ "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."
37421
38237
  }
37422
38238
  },
37423
38239
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37425,6 +38241,7 @@
37425
38241
  "original": {
37426
38242
  "$value": "{base.color.neutral.0}",
37427
38243
  "$type": "color",
38244
+ "$description": "Pure white text",
37428
38245
  "$extensions": {
37429
38246
  "org.primer.figma": {
37430
38247
  "collection": "mode",
@@ -37433,6 +38250,10 @@
37433
38250
  },
37434
38251
  "org.primer.overrides": {
37435
38252
  "dark": "{base.color.neutral.13}"
38253
+ },
38254
+ "org.primer.llm": {
38255
+ "doNotUse": true,
38256
+ "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."
37436
38257
  }
37437
38258
  },
37438
38259
  "key": "{fgColor.white}"
@@ -37441,10 +38262,17 @@
37441
38262
  "attributes": {},
37442
38263
  "path": ["fgColor", "white"],
37443
38264
  "value": "#ffffff",
37444
- "type": "color"
38265
+ "type": "color",
38266
+ "description": "Pure white text"
37445
38267
  },
37446
38268
  "focus-outline": {
37447
38269
  "key": "{focus.outline}",
38270
+ "$extensions": {
38271
+ "org.primer.llm": {
38272
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38273
+ "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."
38274
+ }
38275
+ },
37448
38276
  "filePath": "src/tokens/functional/border/border.json5",
37449
38277
  "isSource": true,
37450
38278
  "original": {
@@ -37454,13 +38282,21 @@
37454
38282
  "width": "2px"
37455
38283
  },
37456
38284
  "$type": "border",
38285
+ "$description": "Focus ring outline for keyboard navigation and accessibility.",
38286
+ "$extensions": {
38287
+ "org.primer.llm": {
38288
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38289
+ "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."
38290
+ }
38291
+ },
37457
38292
  "key": "{focus.outline}"
37458
38293
  },
37459
38294
  "name": "focus-outline",
37460
38295
  "attributes": {},
37461
38296
  "path": ["focus", "outline"],
37462
38297
  "value": "2px solid #0969da",
37463
- "type": "border"
38298
+ "type": "border",
38299
+ "description": "Focus ring outline for keyboard navigation and accessibility."
37464
38300
  },
37465
38301
  "focus-outlineColor": {
37466
38302
  "key": "{focus.outlineColor}",
@@ -37469,6 +38305,10 @@
37469
38305
  "collection": "mode",
37470
38306
  "group": "component (internal)",
37471
38307
  "scopes": ["borderColor", "effectColor"]
38308
+ },
38309
+ "org.primer.llm": {
38310
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38311
+ "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."
37472
38312
  }
37473
38313
  },
37474
38314
  "filePath": "src/tokens/functional/color/focus.json5",
@@ -37476,11 +38316,16 @@
37476
38316
  "original": {
37477
38317
  "$value": "{borderColor.accent.emphasis}",
37478
38318
  "$type": "color",
38319
+ "$description": "Outline color for focus states on interactive elements",
37479
38320
  "$extensions": {
37480
38321
  "org.primer.figma": {
37481
38322
  "collection": "mode",
37482
38323
  "group": "component (internal)",
37483
38324
  "scopes": ["borderColor", "effectColor"]
38325
+ },
38326
+ "org.primer.llm": {
38327
+ "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
38328
+ "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."
37484
38329
  }
37485
38330
  },
37486
38331
  "key": "{focus.outlineColor}"
@@ -37489,7 +38334,8 @@
37489
38334
  "attributes": {},
37490
38335
  "path": ["focus", "outlineColor"],
37491
38336
  "value": "#0969da",
37492
- "type": "color"
38337
+ "type": "color",
38338
+ "description": "Outline color for focus states on interactive elements"
37493
38339
  },
37494
38340
  "header-bgColor": {
37495
38341
  "key": "{header.bgColor}",
@@ -46542,6 +47388,10 @@
46542
47388
  "isSource": true,
46543
47389
  "$type": "color"
46544
47390
  }
47391
+ },
47392
+ "org.primer.llm": {
47393
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47394
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46545
47395
  }
46546
47396
  },
46547
47397
  "alpha": 0.2,
@@ -46550,6 +47400,7 @@
46550
47400
  "original": {
46551
47401
  "$value": "{bgColor.accent.emphasis}",
46552
47402
  "$type": "color",
47403
+ "$description": "Background color for text selection highlights",
46553
47404
  "$extensions": {
46554
47405
  "org.primer.figma": {
46555
47406
  "collection": "mode",
@@ -46564,6 +47415,10 @@
46564
47415
  "isSource": true,
46565
47416
  "$type": "color"
46566
47417
  }
47418
+ },
47419
+ "org.primer.llm": {
47420
+ "usage": ["text-selection", "highlighted-text", "selected-content"],
47421
+ "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
46567
47422
  }
46568
47423
  },
46569
47424
  "alpha": 0.2,
@@ -46573,7 +47428,8 @@
46573
47428
  "attributes": {},
46574
47429
  "path": ["selection", "bgColor"],
46575
47430
  "value": "#0969da33",
46576
- "type": "color"
47431
+ "type": "color",
47432
+ "description": "Background color for text selection highlights"
46577
47433
  },
46578
47434
  "shadow-floating-large": {
46579
47435
  "key": "{shadow.floating.large}",
@@ -46606,6 +47462,10 @@
46606
47462
  "isSource": true,
46607
47463
  "$type": "shadow"
46608
47464
  }
47465
+ },
47466
+ "org.primer.llm": {
47467
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47468
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46609
47469
  }
46610
47470
  },
46611
47471
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46630,6 +47490,7 @@
46630
47490
  }
46631
47491
  ],
46632
47492
  "$type": "shadow",
47493
+ "$description": "Large floating shadow for modals and dialogs",
46633
47494
  "$extensions": {
46634
47495
  "org.primer.figma": {
46635
47496
  "collection": "mode",
@@ -46659,6 +47520,10 @@
46659
47520
  "isSource": true,
46660
47521
  "$type": "shadow"
46661
47522
  }
47523
+ },
47524
+ "org.primer.llm": {
47525
+ "usage": ["modal", "dialog", "full-screen-overlay"],
47526
+ "rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
46662
47527
  }
46663
47528
  },
46664
47529
  "key": "{shadow.floating.large}"
@@ -46667,7 +47532,8 @@
46667
47532
  "attributes": {},
46668
47533
  "path": ["shadow", "floating", "large"],
46669
47534
  "value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
46670
- "type": "shadow"
47535
+ "type": "shadow",
47536
+ "description": "Large floating shadow for modals and dialogs"
46671
47537
  },
46672
47538
  "shadow-floating-legacy": {
46673
47539
  "key": "{shadow.floating.legacy}",
@@ -46697,6 +47563,10 @@
46697
47563
  "isSource": true,
46698
47564
  "$type": "shadow"
46699
47565
  }
47566
+ },
47567
+ "org.primer.llm": {
47568
+ "usage": ["legacy-component", "backward-compatibility"],
47569
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46700
47570
  }
46701
47571
  },
46702
47572
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46721,6 +47591,7 @@
46721
47591
  }
46722
47592
  ],
46723
47593
  "$type": "shadow",
47594
+ "$description": "Legacy floating shadow for backward compatibility",
46724
47595
  "$extensions": {
46725
47596
  "org.primer.figma": {},
46726
47597
  "org.primer.overrides": {
@@ -46747,6 +47618,10 @@
46747
47618
  "isSource": true,
46748
47619
  "$type": "shadow"
46749
47620
  }
47621
+ },
47622
+ "org.primer.llm": {
47623
+ "usage": ["legacy-component", "backward-compatibility"],
47624
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
46750
47625
  }
46751
47626
  },
46752
47627
  "key": "{shadow.floating.legacy}"
@@ -46755,7 +47630,8 @@
46755
47630
  "attributes": {},
46756
47631
  "path": ["shadow", "floating", "legacy"],
46757
47632
  "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
46758
- "type": "shadow"
47633
+ "type": "shadow",
47634
+ "description": "Legacy floating shadow for backward compatibility"
46759
47635
  },
46760
47636
  "shadow-floating-medium": {
46761
47637
  "key": "{shadow.floating.medium}",
@@ -46812,6 +47688,10 @@
46812
47688
  "isSource": true,
46813
47689
  "$type": "shadow"
46814
47690
  }
47691
+ },
47692
+ "org.primer.llm": {
47693
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47694
+ "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."
46815
47695
  }
46816
47696
  },
46817
47697
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46860,6 +47740,7 @@
46860
47740
  }
46861
47741
  ],
46862
47742
  "$type": "shadow",
47743
+ "$description": "Medium floating shadow for popovers and action menus",
46863
47744
  "$extensions": {
46864
47745
  "org.primer.figma": {
46865
47746
  "collection": "mode",
@@ -46913,6 +47794,10 @@
46913
47794
  "isSource": true,
46914
47795
  "$type": "shadow"
46915
47796
  }
47797
+ },
47798
+ "org.primer.llm": {
47799
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
47800
+ "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."
46916
47801
  }
46917
47802
  },
46918
47803
  "key": "{shadow.floating.medium}"
@@ -46921,7 +47806,8 @@
46921
47806
  "attributes": {},
46922
47807
  "path": ["shadow", "floating", "medium"],
46923
47808
  "value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
46924
- "type": "shadow"
47809
+ "type": "shadow",
47810
+ "description": "Medium floating shadow for popovers and action menus"
46925
47811
  },
46926
47812
  "shadow-floating-small": {
46927
47813
  "key": "{shadow.floating.small}",
@@ -46962,6 +47848,10 @@
46962
47848
  "isSource": true,
46963
47849
  "$type": "shadow"
46964
47850
  }
47851
+ },
47852
+ "org.primer.llm": {
47853
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47854
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
46965
47855
  }
46966
47856
  },
46967
47857
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -46994,6 +47884,7 @@
46994
47884
  }
46995
47885
  ],
46996
47886
  "$type": "shadow",
47887
+ "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
46997
47888
  "$extensions": {
46998
47889
  "org.primer.figma": {
46999
47890
  "collection": "mode",
@@ -47031,6 +47922,10 @@
47031
47922
  "isSource": true,
47032
47923
  "$type": "shadow"
47033
47924
  }
47925
+ },
47926
+ "org.primer.llm": {
47927
+ "usage": ["dropdown", "tooltip", "popover", "menu"],
47928
+ "rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
47034
47929
  }
47035
47930
  },
47036
47931
  "key": "{shadow.floating.small}"
@@ -47039,7 +47934,8 @@
47039
47934
  "attributes": {},
47040
47935
  "path": ["shadow", "floating", "small"],
47041
47936
  "value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47042
- "type": "shadow"
47937
+ "type": "shadow",
47938
+ "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47043
47939
  },
47044
47940
  "shadow-floating-xlarge": {
47045
47941
  "key": "{shadow.floating.xlarge}",
@@ -47072,6 +47968,10 @@
47072
47968
  "isSource": true,
47073
47969
  "$type": "shadow"
47074
47970
  }
47971
+ },
47972
+ "org.primer.llm": {
47973
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
47974
+ "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."
47075
47975
  }
47076
47976
  },
47077
47977
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47096,6 +47996,7 @@
47096
47996
  }
47097
47997
  ],
47098
47998
  "$type": "shadow",
47999
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47099
48000
  "$extensions": {
47100
48001
  "org.primer.figma": {
47101
48002
  "collection": "mode",
@@ -47125,6 +48026,10 @@
47125
48026
  "isSource": true,
47126
48027
  "$type": "shadow"
47127
48028
  }
48029
+ },
48030
+ "org.primer.llm": {
48031
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48032
+ "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."
47128
48033
  }
47129
48034
  },
47130
48035
  "key": "{shadow.floating.xlarge}"
@@ -47133,7 +48038,8 @@
47133
48038
  "attributes": {},
47134
48039
  "path": ["shadow", "floating", "xlarge"],
47135
48040
  "value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
47136
- "type": "shadow"
48041
+ "type": "shadow",
48042
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47137
48043
  },
47138
48044
  "shadow-inset": {
47139
48045
  "key": "{shadow.inset}",
@@ -47157,6 +48063,10 @@
47157
48063
  "isSource": true,
47158
48064
  "$type": "shadow"
47159
48065
  }
48066
+ },
48067
+ "org.primer.llm": {
48068
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48069
+ "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."
47160
48070
  }
47161
48071
  },
47162
48072
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47172,6 +48082,7 @@
47172
48082
  "inset": true
47173
48083
  },
47174
48084
  "$type": "shadow",
48085
+ "$description": "Inset shadow for recessed elements",
47175
48086
  "$extensions": {
47176
48087
  "org.primer.figma": {
47177
48088
  "collection": "mode",
@@ -47192,6 +48103,10 @@
47192
48103
  "isSource": true,
47193
48104
  "$type": "shadow"
47194
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."
47195
48110
  }
47196
48111
  },
47197
48112
  "key": "{shadow.inset}"
@@ -47200,7 +48115,8 @@
47200
48115
  "attributes": {},
47201
48116
  "path": ["shadow", "inset"],
47202
48117
  "value": "inset 0px 1px 0px 0px #1f23280a",
47203
- "type": "shadow"
48118
+ "type": "shadow",
48119
+ "description": "Inset shadow for recessed elements"
47204
48120
  },
47205
48121
  "shadow-resting-medium": {
47206
48122
  "key": "{shadow.resting.medium}",
@@ -47233,6 +48149,10 @@
47233
48149
  "isSource": true,
47234
48150
  "$type": "shadow"
47235
48151
  }
48152
+ },
48153
+ "org.primer.llm": {
48154
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48155
+ "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."
47236
48156
  }
47237
48157
  },
47238
48158
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47257,6 +48177,7 @@
47257
48177
  }
47258
48178
  ],
47259
48179
  "$type": "shadow",
48180
+ "$description": "Medium resting shadow for cards and elevated surfaces",
47260
48181
  "$extensions": {
47261
48182
  "org.primer.figma": {
47262
48183
  "collection": "mode",
@@ -47286,6 +48207,10 @@
47286
48207
  "isSource": true,
47287
48208
  "$type": "shadow"
47288
48209
  }
48210
+ },
48211
+ "org.primer.llm": {
48212
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48213
+ "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."
47289
48214
  }
47290
48215
  },
47291
48216
  "key": "{shadow.resting.medium}"
@@ -47294,7 +48219,8 @@
47294
48219
  "attributes": {},
47295
48220
  "path": ["shadow", "resting", "medium"],
47296
48221
  "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
47297
- "type": "shadow"
48222
+ "type": "shadow",
48223
+ "description": "Medium resting shadow for cards and elevated surfaces"
47298
48224
  },
47299
48225
  "shadow-resting-small": {
47300
48226
  "key": "{shadow.resting.small}",
@@ -47329,6 +48255,10 @@
47329
48255
  "isSource": true,
47330
48256
  "$type": "shadow"
47331
48257
  }
48258
+ },
48259
+ "org.primer.llm": {
48260
+ "usage": ["button", "interactive-card", "clickable-element"],
48261
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47332
48262
  }
47333
48263
  },
47334
48264
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47337,7 +48267,7 @@
47337
48267
  "$value": [
47338
48268
  {
47339
48269
  "color": "{base.color.neutral.13}",
47340
- "alpha": 0.06,
48270
+ "alpha": 0.04,
47341
48271
  "offsetX": "0px",
47342
48272
  "offsetY": "1px",
47343
48273
  "blur": "1px",
@@ -47346,15 +48276,16 @@
47346
48276
  },
47347
48277
  {
47348
48278
  "color": "{base.color.neutral.13}",
47349
- "alpha": 0.06,
48279
+ "alpha": 0.03,
47350
48280
  "offsetX": "0px",
47351
48281
  "offsetY": "1px",
47352
- "blur": "3px",
48282
+ "blur": "2px",
47353
48283
  "spread": "0px",
47354
48284
  "inset": false
47355
48285
  }
47356
48286
  ],
47357
48287
  "$type": "shadow",
48288
+ "$description": "Small resting shadow for buttons and interactive elements",
47358
48289
  "$extensions": {
47359
48290
  "org.primer.figma": {
47360
48291
  "collection": "mode",
@@ -47386,6 +48317,10 @@
47386
48317
  "isSource": true,
47387
48318
  "$type": "shadow"
47388
48319
  }
48320
+ },
48321
+ "org.primer.llm": {
48322
+ "usage": ["button", "interactive-card", "clickable-element"],
48323
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
47389
48324
  }
47390
48325
  },
47391
48326
  "key": "{shadow.resting.small}"
@@ -47393,8 +48328,9 @@
47393
48328
  "name": "shadow-resting-small",
47394
48329
  "attributes": {},
47395
48330
  "path": ["shadow", "resting", "small"],
47396
- "value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
47397
- "type": "shadow"
48331
+ "value": "0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808",
48332
+ "type": "shadow",
48333
+ "description": "Small resting shadow for buttons and interactive elements"
47398
48334
  },
47399
48335
  "shadow-resting-xsmall": {
47400
48336
  "key": "{shadow.resting.xsmall}",
@@ -47418,6 +48354,10 @@
47418
48354
  "isSource": true,
47419
48355
  "$type": "shadow"
47420
48356
  }
48357
+ },
48358
+ "org.primer.llm": {
48359
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
48360
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
47421
48361
  }
47422
48362
  },
47423
48363
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47425,7 +48365,7 @@
47425
48365
  "original": {
47426
48366
  "$value": {
47427
48367
  "color": "{base.color.neutral.13}",
47428
- "alpha": 0.06,
48368
+ "alpha": 0.05,
47429
48369
  "offsetX": "0px",
47430
48370
  "offsetY": "1px",
47431
48371
  "blur": "1px",
@@ -47433,6 +48373,7 @@
47433
48373
  "inset": false
47434
48374
  },
47435
48375
  "$type": "shadow",
48376
+ "$description": "Extra small resting shadow for minimal elevation",
47436
48377
  "$extensions": {
47437
48378
  "org.primer.figma": {
47438
48379
  "collection": "mode",
@@ -47453,6 +48394,10 @@
47453
48394
  "isSource": true,
47454
48395
  "$type": "shadow"
47455
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."
47456
48401
  }
47457
48402
  },
47458
48403
  "key": "{shadow.resting.xsmall}"
@@ -47460,8 +48405,9 @@
47460
48405
  "name": "shadow-resting-xsmall",
47461
48406
  "attributes": {},
47462
48407
  "path": ["shadow", "resting", "xsmall"],
47463
- "value": "0px 1px 1px 0px #1f23280f",
47464
- "type": "shadow"
48408
+ "value": "0px 1px 1px 0px #1f23280d",
48409
+ "type": "shadow",
48410
+ "description": "Extra small resting shadow for minimal elevation"
47465
48411
  },
47466
48412
  "sideNav-bgColor-selected": {
47467
48413
  "key": "{sideNav.bgColor.selected}",