@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.
- package/DESIGN_TOKENS_GUIDE.md +185 -0
- package/DESIGN_TOKENS_SPEC.md +565 -0
- package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
- package/dist/build/filters/hasLlmExtensions.js +11 -0
- package/dist/build/filters/index.d.ts +1 -0
- package/dist/build/filters/index.js +1 -0
- package/dist/build/formats/index.d.ts +1 -0
- package/dist/build/formats/index.js +1 -0
- package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
- package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
- package/dist/build/platforms/index.d.ts +1 -0
- package/dist/build/platforms/index.js +1 -0
- package/dist/build/platforms/llmGuidelines.d.ts +2 -0
- package/dist/build/platforms/llmGuidelines.js +17 -0
- package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
- package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
- package/dist/build/primerStyleDictionary.js +7 -1
- package/dist/build/schemas/borderToken.d.ts +22 -2
- package/dist/build/schemas/borderToken.js +6 -0
- package/dist/build/schemas/colorToken.d.ts +4 -0
- package/dist/build/schemas/colorToken.js +2 -0
- package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
- package/dist/build/schemas/cubicBezierToken.js +10 -2
- package/dist/build/schemas/designToken.d.ts +1 -1
- package/dist/build/schemas/designToken.js +113 -21
- package/dist/build/schemas/dimensionToken.d.ts +14 -3
- package/dist/build/schemas/dimensionToken.js +6 -2
- package/dist/build/schemas/dimensionValue.d.ts +24 -1
- package/dist/build/schemas/dimensionValue.js +20 -1
- package/dist/build/schemas/durationToken.d.ts +13 -1
- package/dist/build/schemas/durationToken.js +6 -0
- package/dist/build/schemas/durationValue.d.ts +11 -1
- package/dist/build/schemas/durationValue.js +13 -3
- package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
- package/dist/build/schemas/fontFamilyToken.js +2 -0
- package/dist/build/schemas/fontWeightToken.d.ts +4 -0
- package/dist/build/schemas/fontWeightToken.js +2 -0
- package/dist/build/schemas/gradientToken.d.ts +4 -0
- package/dist/build/schemas/gradientToken.js +2 -0
- package/dist/build/schemas/llmExtension.d.ts +9 -0
- package/dist/build/schemas/llmExtension.js +11 -0
- package/dist/build/schemas/numberToken.d.ts +4 -0
- package/dist/build/schemas/numberToken.js +2 -0
- package/dist/build/schemas/shadowToken.d.ts +676 -84
- package/dist/build/schemas/shadowToken.js +2 -0
- package/dist/build/schemas/stringToken.d.ts +6 -0
- package/dist/build/schemas/stringToken.js +6 -0
- package/dist/build/schemas/transitionToken.d.ts +20 -2
- package/dist/build/schemas/transitionToken.js +6 -0
- package/dist/build/schemas/typographyToken.d.ts +38 -4
- package/dist/build/schemas/typographyToken.js +6 -0
- package/dist/build/schemas/validTokenType.d.ts +5 -1
- package/dist/build/schemas/validTokenType.js +71 -17
- package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
- package/dist/build/schemas/viewportRangeToken.js +6 -0
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
- package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
- package/dist/build/transformers/dimensionToRem.d.ts +2 -1
- package/dist/build/transformers/dimensionToRem.js +21 -22
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
- package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
- package/dist/build/transformers/durationToCss.d.ts +2 -1
- package/dist/build/transformers/durationToCss.js +18 -11
- package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
- package/dist/build/transformers/utilities/parseDimension.js +31 -0
- package/dist/build/types/dimensionTokenValue.d.ts +9 -0
- package/dist/css/base/motion/motion.css +5 -4
- package/dist/css/functional/size/border.css +9 -14
- package/dist/css/functional/size/radius.css +7 -0
- package/dist/css/functional/size/size-coarse.css +3 -3
- package/dist/css/functional/size/size-fine.css +3 -3
- package/dist/css/functional/size/viewport.css +1 -1
- package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-colorblind.css +194 -190
- package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-dimmed.css +194 -190
- package/dist/css/functional/themes/dark-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia.css +194 -190
- package/dist/css/functional/themes/dark.css +194 -190
- package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-colorblind.css +194 -190
- package/dist/css/functional/themes/light-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia.css +194 -190
- package/dist/css/functional/themes/light.css +194 -190
- package/dist/css/functional/typography/typography.css +4 -4
- package/dist/css/primitives.css +5 -0
- package/dist/docs/base/motion/motion.json +181 -32
- package/dist/docs/base/size/size.json +76 -19
- package/dist/docs/base/typography/typography.json +24 -6
- package/dist/docs/functional/size/border.json +62 -182
- package/dist/docs/functional/size/breakpoints.json +24 -6
- package/dist/docs/functional/size/radius.json +221 -0
- package/dist/docs/functional/size/size-coarse.json +45 -3
- package/dist/docs/functional/size/size-fine.json +45 -3
- package/dist/docs/functional/size/size.json +60 -15
- package/dist/docs/functional/size/viewport.json +2 -2
- package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
- package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
- package/dist/docs/functional/themes/dark.json +1043 -97
- package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-colorblind.json +1049 -103
- package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
- package/dist/docs/functional/themes/light.json +1049 -103
- package/dist/docs/functional/typography/typography.json +180 -10
- package/dist/fallbacks/base/motion/motion.json +49 -12
- package/dist/fallbacks/functional/size/border.json +0 -5
- package/dist/fallbacks/functional/size/radius.json +7 -0
- package/dist/fallbacks/functional/size/viewport.json +1 -1
- package/dist/figma/dimension/dimension.json +30 -20
- package/dist/figma/themes/dark-colorblind.json +85 -0
- package/dist/figma/themes/dark-dimmed.json +134 -49
- package/dist/figma/themes/dark-high-contrast.json +85 -0
- package/dist/figma/themes/dark-tritanopia.json +85 -0
- package/dist/figma/themes/dark.json +85 -0
- package/dist/figma/themes/light-colorblind.json +89 -4
- package/dist/figma/themes/light-high-contrast.json +89 -4
- package/dist/figma/themes/light-tritanopia.json +89 -4
- package/dist/figma/themes/light.json +89 -4
- package/dist/figma/typography/typography.json +44 -40
- package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/dark-colorblind.css +208 -218
- package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
- package/dist/internalCss/dark-dimmed.css +208 -218
- package/dist/internalCss/dark-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia.css +208 -218
- package/dist/internalCss/dark.css +208 -218
- package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/light-colorblind.css +208 -218
- package/dist/internalCss/light-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia.css +208 -218
- package/dist/internalCss/light.css +208 -218
- package/dist/styleLint/base/motion/motion.json +181 -32
- package/dist/styleLint/base/size/size.json +76 -19
- package/dist/styleLint/base/typography/typography.json +30 -12
- package/dist/styleLint/functional/size/border.json +55 -175
- package/dist/styleLint/functional/size/breakpoints.json +24 -6
- package/dist/styleLint/functional/size/radius.json +221 -0
- package/dist/styleLint/functional/size/size-coarse.json +45 -3
- package/dist/styleLint/functional/size/size-fine.json +45 -3
- package/dist/styleLint/functional/size/size.json +111 -66
- package/dist/styleLint/functional/size/viewport.json +2 -2
- package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
- package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
- package/dist/styleLint/functional/themes/dark.json +975 -29
- package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
- package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
- package/dist/styleLint/functional/themes/light.json +981 -35
- package/dist/styleLint/functional/typography/typography.json +196 -26
- package/package.json +6 -3
- package/src/tokens/base/motion/easing.json5 +39 -4
- package/src/tokens/base/motion/timing.json5 +12 -12
- package/src/tokens/base/size/size.json5 +19 -19
- package/src/tokens/base/typography/typography.json5 +6 -6
- package/src/tokens/functional/border/border.json5 +25 -0
- package/src/tokens/functional/color/bgColor.json5 +165 -0
- package/src/tokens/functional/color/borderColor.json5 +146 -0
- package/src/tokens/functional/color/control.json5 +24 -0
- package/src/tokens/functional/color/data-vis.json5 +7 -0
- package/src/tokens/functional/color/display.json5 +7 -0
- package/src/tokens/functional/color/fgColor.json5 +101 -1
- package/src/tokens/functional/color/focus.json5 +5 -0
- package/src/tokens/functional/color/selection.json5 +5 -0
- package/src/tokens/functional/color/syntax.json5 +14 -0
- package/src/tokens/functional/shadow/shadow.json5 +49 -4
- package/src/tokens/functional/size/border.json5 +22 -74
- package/src/tokens/functional/size/breakpoints.json5 +6 -6
- package/src/tokens/functional/size/radius.json5 +90 -0
- package/src/tokens/functional/size/size-coarse.json5 +24 -3
- package/src/tokens/functional/size/size-fine.json5 +45 -24
- package/src/tokens/functional/size/size.json5 +50 -15
- package/src/tokens/functional/size/viewport.json5 +1 -1
- package/src/tokens/functional/typography/font-stack.json5 +60 -0
- package/src/tokens/functional/typography/typography.json5 +71 -44
- package/dist/build/parsers/index.d.ts +0 -1
- package/dist/build/parsers/index.js +0 -1
- package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
- package/dist/build/parsers/w3cJsonParser.js +0 -25
- package/dist/removed/testing.json5 +0 -4
- package/src/tokens/removed/testing.json5 +0 -4
|
@@ -297,6 +297,7 @@
|
|
|
297
297
|
"key": "{bgColor.accent.emphasis}",
|
|
298
298
|
"$value": "#1f6feb",
|
|
299
299
|
"$type": "color",
|
|
300
|
+
"$description": "Strong accent background for active states and focused states",
|
|
300
301
|
"$extensions": {
|
|
301
302
|
"org.primer.figma": {
|
|
302
303
|
"collection": "mode",
|
|
@@ -312,6 +313,10 @@
|
|
|
312
313
|
"dark-dimmed-high-contrast": "#0d419d",
|
|
313
314
|
"dark-tritanopia-high-contrast": "#051d4d",
|
|
314
315
|
"dark-protanopia-deuteranopia-high-contrast": "#051d4d"
|
|
316
|
+
},
|
|
317
|
+
"org.primer.llm": {
|
|
318
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
319
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
315
320
|
}
|
|
316
321
|
},
|
|
317
322
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -319,6 +324,7 @@
|
|
|
319
324
|
"original": {
|
|
320
325
|
"$value": "{base.color.blue.5}",
|
|
321
326
|
"$type": "color",
|
|
327
|
+
"$description": "Strong accent background for active states and focused states",
|
|
322
328
|
"$extensions": {
|
|
323
329
|
"org.primer.figma": {
|
|
324
330
|
"collection": "mode",
|
|
@@ -334,6 +340,10 @@
|
|
|
334
340
|
"dark-dimmed-high-contrast": "{base.color.blue.7}",
|
|
335
341
|
"dark-tritanopia-high-contrast": "{base.color.blue.9}",
|
|
336
342
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
|
|
343
|
+
},
|
|
344
|
+
"org.primer.llm": {
|
|
345
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
346
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
337
347
|
}
|
|
338
348
|
},
|
|
339
349
|
"key": "{bgColor.accent.emphasis}"
|
|
@@ -346,6 +356,7 @@
|
|
|
346
356
|
"key": "{bgColor.accent.muted}",
|
|
347
357
|
"$value": "#388bfd1a",
|
|
348
358
|
"$type": "color",
|
|
359
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
349
360
|
"$extensions": {
|
|
350
361
|
"org.primer.figma": {
|
|
351
362
|
"collection": "mode",
|
|
@@ -363,6 +374,10 @@
|
|
|
363
374
|
"isSource": true,
|
|
364
375
|
"$type": "color"
|
|
365
376
|
}
|
|
377
|
+
},
|
|
378
|
+
"org.primer.llm": {
|
|
379
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
380
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
366
381
|
}
|
|
367
382
|
},
|
|
368
383
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -371,6 +386,7 @@
|
|
|
371
386
|
"original": {
|
|
372
387
|
"$value": "{base.color.blue.4}",
|
|
373
388
|
"$type": "color",
|
|
389
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
374
390
|
"$extensions": {
|
|
375
391
|
"org.primer.figma": {
|
|
376
392
|
"collection": "mode",
|
|
@@ -388,6 +404,10 @@
|
|
|
388
404
|
"isSource": true,
|
|
389
405
|
"$type": "color"
|
|
390
406
|
}
|
|
407
|
+
},
|
|
408
|
+
"org.primer.llm": {
|
|
409
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
410
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
391
411
|
}
|
|
392
412
|
},
|
|
393
413
|
"alpha": 0.1,
|
|
@@ -401,6 +421,7 @@
|
|
|
401
421
|
"key": "{bgColor.attention.emphasis}",
|
|
402
422
|
"$value": "#9e6a03",
|
|
403
423
|
"$type": "color",
|
|
424
|
+
"$description": "Strong attention background for prominent warnings",
|
|
404
425
|
"$extensions": {
|
|
405
426
|
"org.primer.figma": {
|
|
406
427
|
"collection": "mode",
|
|
@@ -415,6 +436,10 @@
|
|
|
415
436
|
"dark-dimmed-high-contrast": "#693e00",
|
|
416
437
|
"dark-protanopia-deuteranopia-high-contrast": "#341a00",
|
|
417
438
|
"dark-tritanopia-high-contrast": "#341a00"
|
|
439
|
+
},
|
|
440
|
+
"org.primer.llm": {
|
|
441
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
442
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
418
443
|
}
|
|
419
444
|
},
|
|
420
445
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -422,6 +447,7 @@
|
|
|
422
447
|
"original": {
|
|
423
448
|
"$value": "{base.color.yellow.5}",
|
|
424
449
|
"$type": "color",
|
|
450
|
+
"$description": "Strong attention background for prominent warnings",
|
|
425
451
|
"$extensions": {
|
|
426
452
|
"org.primer.figma": {
|
|
427
453
|
"collection": "mode",
|
|
@@ -436,6 +462,10 @@
|
|
|
436
462
|
"dark-dimmed-high-contrast": "{base.color.yellow.7}",
|
|
437
463
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
|
|
438
464
|
"dark-tritanopia-high-contrast": "{base.color.yellow.9}"
|
|
465
|
+
},
|
|
466
|
+
"org.primer.llm": {
|
|
467
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
468
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
439
469
|
}
|
|
440
470
|
},
|
|
441
471
|
"key": "{bgColor.attention.emphasis}"
|
|
@@ -448,6 +478,7 @@
|
|
|
448
478
|
"key": "{bgColor.attention.muted}",
|
|
449
479
|
"$value": "#bb800926",
|
|
450
480
|
"$type": "color",
|
|
481
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
451
482
|
"$extensions": {
|
|
452
483
|
"org.primer.figma": {
|
|
453
484
|
"collection": "mode",
|
|
@@ -465,6 +496,10 @@
|
|
|
465
496
|
"isSource": true,
|
|
466
497
|
"$type": "color"
|
|
467
498
|
}
|
|
499
|
+
},
|
|
500
|
+
"org.primer.llm": {
|
|
501
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
502
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
468
503
|
}
|
|
469
504
|
},
|
|
470
505
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -473,6 +508,7 @@
|
|
|
473
508
|
"original": {
|
|
474
509
|
"$value": "{base.color.yellow.4}",
|
|
475
510
|
"$type": "color",
|
|
511
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
476
512
|
"$extensions": {
|
|
477
513
|
"org.primer.figma": {
|
|
478
514
|
"collection": "mode",
|
|
@@ -490,6 +526,10 @@
|
|
|
490
526
|
"isSource": true,
|
|
491
527
|
"$type": "color"
|
|
492
528
|
}
|
|
529
|
+
},
|
|
530
|
+
"org.primer.llm": {
|
|
531
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
532
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
493
533
|
}
|
|
494
534
|
},
|
|
495
535
|
"alpha": 0.15,
|
|
@@ -503,6 +543,7 @@
|
|
|
503
543
|
"key": "{bgColor.black}",
|
|
504
544
|
"$value": "#010409",
|
|
505
545
|
"$type": "color",
|
|
546
|
+
"$description": "Pure black background",
|
|
506
547
|
"$extensions": {
|
|
507
548
|
"org.primer.figma": {
|
|
508
549
|
"collection": "mode",
|
|
@@ -511,6 +552,10 @@
|
|
|
511
552
|
},
|
|
512
553
|
"org.primer.overrides": {
|
|
513
554
|
"dark": "#010409"
|
|
555
|
+
},
|
|
556
|
+
"org.primer.llm": {
|
|
557
|
+
"doNotUse": true,
|
|
558
|
+
"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."
|
|
514
559
|
}
|
|
515
560
|
},
|
|
516
561
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -518,6 +563,7 @@
|
|
|
518
563
|
"original": {
|
|
519
564
|
"$value": "{base.color.neutral.0}",
|
|
520
565
|
"$type": "color",
|
|
566
|
+
"$description": "Pure black background",
|
|
521
567
|
"$extensions": {
|
|
522
568
|
"org.primer.figma": {
|
|
523
569
|
"collection": "mode",
|
|
@@ -526,6 +572,10 @@
|
|
|
526
572
|
},
|
|
527
573
|
"org.primer.overrides": {
|
|
528
574
|
"dark": "{base.color.neutral.0}"
|
|
575
|
+
},
|
|
576
|
+
"org.primer.llm": {
|
|
577
|
+
"doNotUse": true,
|
|
578
|
+
"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."
|
|
529
579
|
}
|
|
530
580
|
},
|
|
531
581
|
"key": "{bgColor.black}"
|
|
@@ -538,6 +588,7 @@
|
|
|
538
588
|
"key": "{bgColor.closed.emphasis}",
|
|
539
589
|
"$value": "#da3633",
|
|
540
590
|
"$type": "color",
|
|
591
|
+
"$description": "Strong background for closed state badges and labels",
|
|
541
592
|
"$extensions": {
|
|
542
593
|
"org.primer.figma": {
|
|
543
594
|
"collection": "mode",
|
|
@@ -556,6 +607,10 @@
|
|
|
556
607
|
"light-protanopia-deuteranopia-high-contrast": "#656c76",
|
|
557
608
|
"dark-protanopia-deuteranopia": "#656c76",
|
|
558
609
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
610
|
+
},
|
|
611
|
+
"org.primer.llm": {
|
|
612
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
613
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
559
614
|
}
|
|
560
615
|
},
|
|
561
616
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -563,6 +618,7 @@
|
|
|
563
618
|
"original": {
|
|
564
619
|
"$value": "{bgColor.danger.emphasis}",
|
|
565
620
|
"$type": "color",
|
|
621
|
+
"$description": "Strong background for closed state badges and labels",
|
|
566
622
|
"$extensions": {
|
|
567
623
|
"org.primer.figma": {
|
|
568
624
|
"collection": "mode",
|
|
@@ -581,6 +637,10 @@
|
|
|
581
637
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
582
638
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
583
639
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
640
|
+
},
|
|
641
|
+
"org.primer.llm": {
|
|
642
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
643
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
584
644
|
}
|
|
585
645
|
},
|
|
586
646
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -593,6 +653,7 @@
|
|
|
593
653
|
"key": "{bgColor.closed.muted}",
|
|
594
654
|
"$value": "#f851491a",
|
|
595
655
|
"$type": "color",
|
|
656
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
596
657
|
"$extensions": {
|
|
597
658
|
"org.primer.figma": {
|
|
598
659
|
"collection": "mode",
|
|
@@ -628,6 +689,10 @@
|
|
|
628
689
|
"isSource": true,
|
|
629
690
|
"$type": "color"
|
|
630
691
|
}
|
|
692
|
+
},
|
|
693
|
+
"org.primer.llm": {
|
|
694
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
695
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
631
696
|
}
|
|
632
697
|
},
|
|
633
698
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -635,6 +700,7 @@
|
|
|
635
700
|
"original": {
|
|
636
701
|
"$value": "{bgColor.danger.muted}",
|
|
637
702
|
"$type": "color",
|
|
703
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
638
704
|
"$extensions": {
|
|
639
705
|
"org.primer.figma": {
|
|
640
706
|
"collection": "mode",
|
|
@@ -670,6 +736,10 @@
|
|
|
670
736
|
"isSource": true,
|
|
671
737
|
"$type": "color"
|
|
672
738
|
}
|
|
739
|
+
},
|
|
740
|
+
"org.primer.llm": {
|
|
741
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
742
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
673
743
|
}
|
|
674
744
|
},
|
|
675
745
|
"key": "{bgColor.closed.muted}"
|
|
@@ -682,6 +752,7 @@
|
|
|
682
752
|
"key": "{bgColor.danger.emphasis}",
|
|
683
753
|
"$value": "#da3633",
|
|
684
754
|
"$type": "color",
|
|
755
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
685
756
|
"$extensions": {
|
|
686
757
|
"org.primer.figma": {
|
|
687
758
|
"collection": "mode",
|
|
@@ -699,6 +770,10 @@
|
|
|
699
770
|
"dark-high-contrast": "#490202",
|
|
700
771
|
"dark-dimmed-high-contrast": "#8e1519",
|
|
701
772
|
"dark-tritanopia-high-contrast": "#490202"
|
|
773
|
+
},
|
|
774
|
+
"org.primer.llm": {
|
|
775
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
776
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
702
777
|
}
|
|
703
778
|
},
|
|
704
779
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -706,6 +781,7 @@
|
|
|
706
781
|
"original": {
|
|
707
782
|
"$value": "{base.color.red.5}",
|
|
708
783
|
"$type": "color",
|
|
784
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
709
785
|
"$extensions": {
|
|
710
786
|
"org.primer.figma": {
|
|
711
787
|
"collection": "mode",
|
|
@@ -723,6 +799,10 @@
|
|
|
723
799
|
"dark-high-contrast": "{base.color.red.9}",
|
|
724
800
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
725
801
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
802
|
+
},
|
|
803
|
+
"org.primer.llm": {
|
|
804
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
805
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
726
806
|
}
|
|
727
807
|
},
|
|
728
808
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -735,6 +815,7 @@
|
|
|
735
815
|
"key": "{bgColor.danger.muted}",
|
|
736
816
|
"$value": "#f851491a",
|
|
737
817
|
"$type": "color",
|
|
818
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
738
819
|
"$extensions": {
|
|
739
820
|
"org.primer.figma": {
|
|
740
821
|
"collection": "mode",
|
|
@@ -761,6 +842,10 @@
|
|
|
761
842
|
"isSource": true,
|
|
762
843
|
"$type": "color"
|
|
763
844
|
}
|
|
845
|
+
},
|
|
846
|
+
"org.primer.llm": {
|
|
847
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
848
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
764
849
|
}
|
|
765
850
|
},
|
|
766
851
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -769,6 +854,7 @@
|
|
|
769
854
|
"original": {
|
|
770
855
|
"$value": "{base.color.red.4}",
|
|
771
856
|
"$type": "color",
|
|
857
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
772
858
|
"$extensions": {
|
|
773
859
|
"org.primer.figma": {
|
|
774
860
|
"collection": "mode",
|
|
@@ -795,6 +881,10 @@
|
|
|
795
881
|
"isSource": true,
|
|
796
882
|
"$type": "color"
|
|
797
883
|
}
|
|
884
|
+
},
|
|
885
|
+
"org.primer.llm": {
|
|
886
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
887
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
798
888
|
}
|
|
799
889
|
},
|
|
800
890
|
"alpha": 0.1,
|
|
@@ -808,6 +898,7 @@
|
|
|
808
898
|
"key": "{bgColor.default}",
|
|
809
899
|
"$value": "#0d1117",
|
|
810
900
|
"$type": "color",
|
|
901
|
+
"$description": "Default background color for pages and main content areas",
|
|
811
902
|
"$extensions": {
|
|
812
903
|
"org.primer.figma": {
|
|
813
904
|
"collection": "mode",
|
|
@@ -824,6 +915,10 @@
|
|
|
824
915
|
"dark-high-contrast": "#010409",
|
|
825
916
|
"dark-tritanopia-high-contrast": "#010409",
|
|
826
917
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
918
|
+
},
|
|
919
|
+
"org.primer.llm": {
|
|
920
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
921
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
827
922
|
}
|
|
828
923
|
},
|
|
829
924
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -831,6 +926,7 @@
|
|
|
831
926
|
"original": {
|
|
832
927
|
"$value": "{base.color.neutral.1}",
|
|
833
928
|
"$type": "color",
|
|
929
|
+
"$description": "Default background color for pages and main content areas",
|
|
834
930
|
"$extensions": {
|
|
835
931
|
"org.primer.figma": {
|
|
836
932
|
"collection": "mode",
|
|
@@ -847,6 +943,10 @@
|
|
|
847
943
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
848
944
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
849
945
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
946
|
+
},
|
|
947
|
+
"org.primer.llm": {
|
|
948
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
949
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
850
950
|
}
|
|
851
951
|
},
|
|
852
952
|
"key": "{bgColor.default}"
|
|
@@ -859,6 +959,7 @@
|
|
|
859
959
|
"key": "{bgColor.disabled}",
|
|
860
960
|
"$value": "#212830",
|
|
861
961
|
"$type": "color",
|
|
962
|
+
"$description": "Background for disabled interactive elements",
|
|
862
963
|
"$extensions": {
|
|
863
964
|
"org.primer.figma": {
|
|
864
965
|
"collection": "mode",
|
|
@@ -875,6 +976,10 @@
|
|
|
875
976
|
"dark-high-contrast": "#262c36",
|
|
876
977
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
877
978
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
979
|
+
},
|
|
980
|
+
"org.primer.llm": {
|
|
981
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
982
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
878
983
|
}
|
|
879
984
|
},
|
|
880
985
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -882,6 +987,7 @@
|
|
|
882
987
|
"original": {
|
|
883
988
|
"$value": "{base.color.neutral.3}",
|
|
884
989
|
"$type": "color",
|
|
990
|
+
"$description": "Background for disabled interactive elements",
|
|
885
991
|
"$extensions": {
|
|
886
992
|
"org.primer.figma": {
|
|
887
993
|
"collection": "mode",
|
|
@@ -898,6 +1004,10 @@
|
|
|
898
1004
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
899
1005
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
900
1006
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1007
|
+
},
|
|
1008
|
+
"org.primer.llm": {
|
|
1009
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1010
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
901
1011
|
}
|
|
902
1012
|
},
|
|
903
1013
|
"key": "{bgColor.disabled}"
|
|
@@ -910,6 +1020,7 @@
|
|
|
910
1020
|
"key": "{bgColor.done.emphasis}",
|
|
911
1021
|
"$value": "#8957e5",
|
|
912
1022
|
"$type": "color",
|
|
1023
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
913
1024
|
"$extensions": {
|
|
914
1025
|
"org.primer.figma": {
|
|
915
1026
|
"collection": "mode",
|
|
@@ -924,6 +1035,10 @@
|
|
|
924
1035
|
"dark-dimmed-high-contrast": "#553098",
|
|
925
1036
|
"dark-tritanopia-high-contrast": "#271052",
|
|
926
1037
|
"dark-protanopia-deuteranopia-high-contrast": "#271052"
|
|
1038
|
+
},
|
|
1039
|
+
"org.primer.llm": {
|
|
1040
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1041
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
927
1042
|
}
|
|
928
1043
|
},
|
|
929
1044
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -931,6 +1046,7 @@
|
|
|
931
1046
|
"original": {
|
|
932
1047
|
"$value": "{base.color.purple.5}",
|
|
933
1048
|
"$type": "color",
|
|
1049
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
934
1050
|
"$extensions": {
|
|
935
1051
|
"org.primer.figma": {
|
|
936
1052
|
"collection": "mode",
|
|
@@ -945,6 +1061,10 @@
|
|
|
945
1061
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
946
1062
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
947
1063
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1064
|
+
},
|
|
1065
|
+
"org.primer.llm": {
|
|
1066
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1067
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
948
1068
|
}
|
|
949
1069
|
},
|
|
950
1070
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -957,6 +1077,7 @@
|
|
|
957
1077
|
"key": "{bgColor.done.muted}",
|
|
958
1078
|
"$value": "#ab7df826",
|
|
959
1079
|
"$type": "color",
|
|
1080
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
960
1081
|
"$extensions": {
|
|
961
1082
|
"org.primer.figma": {
|
|
962
1083
|
"collection": "mode",
|
|
@@ -974,6 +1095,10 @@
|
|
|
974
1095
|
"isSource": true,
|
|
975
1096
|
"$type": "color"
|
|
976
1097
|
}
|
|
1098
|
+
},
|
|
1099
|
+
"org.primer.llm": {
|
|
1100
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1101
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
977
1102
|
}
|
|
978
1103
|
},
|
|
979
1104
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -982,6 +1107,7 @@
|
|
|
982
1107
|
"original": {
|
|
983
1108
|
"$value": "{base.color.purple.4}",
|
|
984
1109
|
"$type": "color",
|
|
1110
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
985
1111
|
"$extensions": {
|
|
986
1112
|
"org.primer.figma": {
|
|
987
1113
|
"collection": "mode",
|
|
@@ -999,6 +1125,10 @@
|
|
|
999
1125
|
"isSource": true,
|
|
1000
1126
|
"$type": "color"
|
|
1001
1127
|
}
|
|
1128
|
+
},
|
|
1129
|
+
"org.primer.llm": {
|
|
1130
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1131
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1002
1132
|
}
|
|
1003
1133
|
},
|
|
1004
1134
|
"alpha": 0.15,
|
|
@@ -1012,6 +1142,7 @@
|
|
|
1012
1142
|
"key": "{bgColor.draft.emphasis}",
|
|
1013
1143
|
"$value": "#656c76",
|
|
1014
1144
|
"$type": "color",
|
|
1145
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1015
1146
|
"$extensions": {
|
|
1016
1147
|
"org.primer.figma": {
|
|
1017
1148
|
"collection": "mode",
|
|
@@ -1020,6 +1151,10 @@
|
|
|
1020
1151
|
"codeSyntax": {
|
|
1021
1152
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1022
1153
|
}
|
|
1154
|
+
},
|
|
1155
|
+
"org.primer.llm": {
|
|
1156
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1157
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1023
1158
|
}
|
|
1024
1159
|
},
|
|
1025
1160
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1027,6 +1162,7 @@
|
|
|
1027
1162
|
"original": {
|
|
1028
1163
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1029
1164
|
"$type": "color",
|
|
1165
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1030
1166
|
"$extensions": {
|
|
1031
1167
|
"org.primer.figma": {
|
|
1032
1168
|
"collection": "mode",
|
|
@@ -1035,6 +1171,10 @@
|
|
|
1035
1171
|
"codeSyntax": {
|
|
1036
1172
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1037
1173
|
}
|
|
1174
|
+
},
|
|
1175
|
+
"org.primer.llm": {
|
|
1176
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1177
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1038
1178
|
}
|
|
1039
1179
|
},
|
|
1040
1180
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1047,6 +1187,7 @@
|
|
|
1047
1187
|
"key": "{bgColor.draft.muted}",
|
|
1048
1188
|
"$value": "#656c7633",
|
|
1049
1189
|
"$type": "color",
|
|
1190
|
+
"$description": "Subtle background for draft state indicators",
|
|
1050
1191
|
"$extensions": {
|
|
1051
1192
|
"org.primer.figma": {
|
|
1052
1193
|
"collection": "mode",
|
|
@@ -1082,6 +1223,10 @@
|
|
|
1082
1223
|
"isSource": true,
|
|
1083
1224
|
"$type": "color"
|
|
1084
1225
|
}
|
|
1226
|
+
},
|
|
1227
|
+
"org.primer.llm": {
|
|
1228
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1229
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1085
1230
|
}
|
|
1086
1231
|
},
|
|
1087
1232
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1089,6 +1234,7 @@
|
|
|
1089
1234
|
"original": {
|
|
1090
1235
|
"$value": "{bgColor.neutral.muted}",
|
|
1091
1236
|
"$type": "color",
|
|
1237
|
+
"$description": "Subtle background for draft state indicators",
|
|
1092
1238
|
"$extensions": {
|
|
1093
1239
|
"org.primer.figma": {
|
|
1094
1240
|
"collection": "mode",
|
|
@@ -1124,6 +1270,10 @@
|
|
|
1124
1270
|
"isSource": true,
|
|
1125
1271
|
"$type": "color"
|
|
1126
1272
|
}
|
|
1273
|
+
},
|
|
1274
|
+
"org.primer.llm": {
|
|
1275
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1276
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1127
1277
|
}
|
|
1128
1278
|
},
|
|
1129
1279
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1136,6 +1286,7 @@
|
|
|
1136
1286
|
"key": "{bgColor.emphasis}",
|
|
1137
1287
|
"$value": "#3d444d",
|
|
1138
1288
|
"$type": "color",
|
|
1289
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1139
1290
|
"$extensions": {
|
|
1140
1291
|
"org.primer.figma": {
|
|
1141
1292
|
"collection": "mode",
|
|
@@ -1147,6 +1298,10 @@
|
|
|
1147
1298
|
},
|
|
1148
1299
|
"org.primer.overrides": {
|
|
1149
1300
|
"dark": "#3d444d"
|
|
1301
|
+
},
|
|
1302
|
+
"org.primer.llm": {
|
|
1303
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1304
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1150
1305
|
}
|
|
1151
1306
|
},
|
|
1152
1307
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1154,6 +1309,7 @@
|
|
|
1154
1309
|
"original": {
|
|
1155
1310
|
"$value": "{base.color.neutral.7}",
|
|
1156
1311
|
"$type": "color",
|
|
1312
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1157
1313
|
"$extensions": {
|
|
1158
1314
|
"org.primer.figma": {
|
|
1159
1315
|
"collection": "mode",
|
|
@@ -1165,6 +1321,10 @@
|
|
|
1165
1321
|
},
|
|
1166
1322
|
"org.primer.overrides": {
|
|
1167
1323
|
"dark": "{base.color.neutral.7}"
|
|
1324
|
+
},
|
|
1325
|
+
"org.primer.llm": {
|
|
1326
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1327
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1168
1328
|
}
|
|
1169
1329
|
},
|
|
1170
1330
|
"key": "{bgColor.emphasis}"
|
|
@@ -1177,6 +1337,7 @@
|
|
|
1177
1337
|
"key": "{bgColor.inset}",
|
|
1178
1338
|
"$value": "#010409",
|
|
1179
1339
|
"$type": "color",
|
|
1340
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1180
1341
|
"$extensions": {
|
|
1181
1342
|
"org.primer.figma": {
|
|
1182
1343
|
"collection": "mode",
|
|
@@ -1193,6 +1354,10 @@
|
|
|
1193
1354
|
"light-high-contrast": "#151b23",
|
|
1194
1355
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1195
1356
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1357
|
+
},
|
|
1358
|
+
"org.primer.llm": {
|
|
1359
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1360
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1196
1361
|
}
|
|
1197
1362
|
},
|
|
1198
1363
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1200,6 +1365,7 @@
|
|
|
1200
1365
|
"original": {
|
|
1201
1366
|
"$value": "{base.color.neutral.0}",
|
|
1202
1367
|
"$type": "color",
|
|
1368
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1203
1369
|
"$extensions": {
|
|
1204
1370
|
"org.primer.figma": {
|
|
1205
1371
|
"collection": "mode",
|
|
@@ -1216,6 +1382,10 @@
|
|
|
1216
1382
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1217
1383
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1218
1384
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1385
|
+
},
|
|
1386
|
+
"org.primer.llm": {
|
|
1387
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1388
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1219
1389
|
}
|
|
1220
1390
|
},
|
|
1221
1391
|
"key": "{bgColor.inset}"
|
|
@@ -1228,6 +1398,7 @@
|
|
|
1228
1398
|
"key": "{bgColor.inverse}",
|
|
1229
1399
|
"$value": "#ffffff",
|
|
1230
1400
|
"$type": "color",
|
|
1401
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1231
1402
|
"$extensions": {
|
|
1232
1403
|
"org.primer.figma": {
|
|
1233
1404
|
"collection": "mode",
|
|
@@ -1236,6 +1407,10 @@
|
|
|
1236
1407
|
},
|
|
1237
1408
|
"org.primer.overrides": {
|
|
1238
1409
|
"dark": "#ffffff"
|
|
1410
|
+
},
|
|
1411
|
+
"org.primer.llm": {
|
|
1412
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1413
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1239
1414
|
}
|
|
1240
1415
|
},
|
|
1241
1416
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1243,6 +1418,7 @@
|
|
|
1243
1418
|
"original": {
|
|
1244
1419
|
"$value": "{base.color.neutral.13}",
|
|
1245
1420
|
"$type": "color",
|
|
1421
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1246
1422
|
"$extensions": {
|
|
1247
1423
|
"org.primer.figma": {
|
|
1248
1424
|
"collection": "mode",
|
|
@@ -1251,6 +1427,10 @@
|
|
|
1251
1427
|
},
|
|
1252
1428
|
"org.primer.overrides": {
|
|
1253
1429
|
"dark": "{base.color.neutral.13}"
|
|
1430
|
+
},
|
|
1431
|
+
"org.primer.llm": {
|
|
1432
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1433
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1254
1434
|
}
|
|
1255
1435
|
},
|
|
1256
1436
|
"key": "{bgColor.inverse}"
|
|
@@ -1263,6 +1443,7 @@
|
|
|
1263
1443
|
"key": "{bgColor.muted}",
|
|
1264
1444
|
"$value": "#151b23",
|
|
1265
1445
|
"$type": "color",
|
|
1446
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1266
1447
|
"$extensions": {
|
|
1267
1448
|
"org.primer.figma": {
|
|
1268
1449
|
"collection": "mode",
|
|
@@ -1282,6 +1463,10 @@
|
|
|
1282
1463
|
"dark-high-contrast": "#151b23",
|
|
1283
1464
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1284
1465
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1466
|
+
},
|
|
1467
|
+
"org.primer.llm": {
|
|
1468
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1469
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1285
1470
|
}
|
|
1286
1471
|
},
|
|
1287
1472
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1289,6 +1474,7 @@
|
|
|
1289
1474
|
"original": {
|
|
1290
1475
|
"$value": "{base.color.neutral.2}",
|
|
1291
1476
|
"$type": "color",
|
|
1477
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1292
1478
|
"$extensions": {
|
|
1293
1479
|
"org.primer.figma": {
|
|
1294
1480
|
"collection": "mode",
|
|
@@ -1308,6 +1494,10 @@
|
|
|
1308
1494
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1309
1495
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1310
1496
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1497
|
+
},
|
|
1498
|
+
"org.primer.llm": {
|
|
1499
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1500
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1311
1501
|
}
|
|
1312
1502
|
},
|
|
1313
1503
|
"key": "{bgColor.muted}"
|
|
@@ -1320,6 +1510,7 @@
|
|
|
1320
1510
|
"key": "{bgColor.neutral.emphasis}",
|
|
1321
1511
|
"$value": "#656c76",
|
|
1322
1512
|
"$type": "color",
|
|
1513
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1323
1514
|
"$extensions": {
|
|
1324
1515
|
"org.primer.figma": {
|
|
1325
1516
|
"collection": "mode",
|
|
@@ -1336,6 +1527,10 @@
|
|
|
1336
1527
|
"dark-high-contrast": "#3d444d",
|
|
1337
1528
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1338
1529
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1530
|
+
},
|
|
1531
|
+
"org.primer.llm": {
|
|
1532
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1533
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1339
1534
|
}
|
|
1340
1535
|
},
|
|
1341
1536
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1343,6 +1538,7 @@
|
|
|
1343
1538
|
"original": {
|
|
1344
1539
|
"$value": "{base.color.neutral.8}",
|
|
1345
1540
|
"$type": "color",
|
|
1541
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1346
1542
|
"$extensions": {
|
|
1347
1543
|
"org.primer.figma": {
|
|
1348
1544
|
"collection": "mode",
|
|
@@ -1359,6 +1555,10 @@
|
|
|
1359
1555
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1360
1556
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1361
1557
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1558
|
+
},
|
|
1559
|
+
"org.primer.llm": {
|
|
1560
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1561
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1362
1562
|
}
|
|
1363
1563
|
},
|
|
1364
1564
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1371,6 +1571,7 @@
|
|
|
1371
1571
|
"key": "{bgColor.neutral.muted}",
|
|
1372
1572
|
"$value": "#656c7633",
|
|
1373
1573
|
"$type": "color",
|
|
1574
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1374
1575
|
"$extensions": {
|
|
1375
1576
|
"org.primer.figma": {
|
|
1376
1577
|
"collection": "mode",
|
|
@@ -1398,6 +1599,10 @@
|
|
|
1398
1599
|
"dark-high-contrast": "#212830",
|
|
1399
1600
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1400
1601
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1602
|
+
},
|
|
1603
|
+
"org.primer.llm": {
|
|
1604
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1605
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1401
1606
|
}
|
|
1402
1607
|
},
|
|
1403
1608
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1406,6 +1611,7 @@
|
|
|
1406
1611
|
"original": {
|
|
1407
1612
|
"$value": "{base.color.neutral.8}",
|
|
1408
1613
|
"$type": "color",
|
|
1614
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1409
1615
|
"$extensions": {
|
|
1410
1616
|
"org.primer.figma": {
|
|
1411
1617
|
"collection": "mode",
|
|
@@ -1433,6 +1639,10 @@
|
|
|
1433
1639
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1434
1640
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1435
1641
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1642
|
+
},
|
|
1643
|
+
"org.primer.llm": {
|
|
1644
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1645
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1436
1646
|
}
|
|
1437
1647
|
},
|
|
1438
1648
|
"alpha": 0.2,
|
|
@@ -1446,6 +1656,7 @@
|
|
|
1446
1656
|
"key": "{bgColor.open.emphasis}",
|
|
1447
1657
|
"$value": "#238636",
|
|
1448
1658
|
"$type": "color",
|
|
1659
|
+
"$description": "Strong background for open state badges and labels",
|
|
1449
1660
|
"$extensions": {
|
|
1450
1661
|
"org.primer.figma": {
|
|
1451
1662
|
"collection": "mode",
|
|
@@ -1464,6 +1675,10 @@
|
|
|
1464
1675
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
1465
1676
|
"dark-protanopia-deuteranopia": "#bd561d",
|
|
1466
1677
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1678
|
+
},
|
|
1679
|
+
"org.primer.llm": {
|
|
1680
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1681
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1467
1682
|
}
|
|
1468
1683
|
},
|
|
1469
1684
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1471,6 +1686,7 @@
|
|
|
1471
1686
|
"original": {
|
|
1472
1687
|
"$value": "{bgColor.success.emphasis}",
|
|
1473
1688
|
"$type": "color",
|
|
1689
|
+
"$description": "Strong background for open state badges and labels",
|
|
1474
1690
|
"$extensions": {
|
|
1475
1691
|
"org.primer.figma": {
|
|
1476
1692
|
"collection": "mode",
|
|
@@ -1489,6 +1705,10 @@
|
|
|
1489
1705
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1490
1706
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1491
1707
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1708
|
+
},
|
|
1709
|
+
"org.primer.llm": {
|
|
1710
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1711
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1492
1712
|
}
|
|
1493
1713
|
},
|
|
1494
1714
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1501,6 +1721,7 @@
|
|
|
1501
1721
|
"key": "{bgColor.open.muted}",
|
|
1502
1722
|
"$value": "#2ea04326",
|
|
1503
1723
|
"$type": "color",
|
|
1724
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1504
1725
|
"$extensions": {
|
|
1505
1726
|
"org.primer.figma": {
|
|
1506
1727
|
"collection": "mode",
|
|
@@ -1543,6 +1764,10 @@
|
|
|
1543
1764
|
"isSource": true,
|
|
1544
1765
|
"$type": "color"
|
|
1545
1766
|
}
|
|
1767
|
+
},
|
|
1768
|
+
"org.primer.llm": {
|
|
1769
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1770
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1546
1771
|
}
|
|
1547
1772
|
},
|
|
1548
1773
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1550,6 +1775,7 @@
|
|
|
1550
1775
|
"original": {
|
|
1551
1776
|
"$value": "{bgColor.success.muted}",
|
|
1552
1777
|
"$type": "color",
|
|
1778
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1553
1779
|
"$extensions": {
|
|
1554
1780
|
"org.primer.figma": {
|
|
1555
1781
|
"collection": "mode",
|
|
@@ -1592,6 +1818,10 @@
|
|
|
1592
1818
|
"isSource": true,
|
|
1593
1819
|
"$type": "color"
|
|
1594
1820
|
}
|
|
1821
|
+
},
|
|
1822
|
+
"org.primer.llm": {
|
|
1823
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1824
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1595
1825
|
}
|
|
1596
1826
|
},
|
|
1597
1827
|
"key": "{bgColor.open.muted}"
|
|
@@ -1604,6 +1834,7 @@
|
|
|
1604
1834
|
"key": "{bgColor.severe.emphasis}",
|
|
1605
1835
|
"$value": "#bd561d",
|
|
1606
1836
|
"$type": "color",
|
|
1837
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1607
1838
|
"$extensions": {
|
|
1608
1839
|
"org.primer.figma": {
|
|
1609
1840
|
"collection": "mode",
|
|
@@ -1621,6 +1852,10 @@
|
|
|
1621
1852
|
"dark-high-contrast": "#3d1300",
|
|
1622
1853
|
"dark-dimmed-high-contrast": "#762d0a",
|
|
1623
1854
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1855
|
+
},
|
|
1856
|
+
"org.primer.llm": {
|
|
1857
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1858
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1624
1859
|
}
|
|
1625
1860
|
},
|
|
1626
1861
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1628,6 +1863,7 @@
|
|
|
1628
1863
|
"original": {
|
|
1629
1864
|
"$value": "{base.color.orange.5}",
|
|
1630
1865
|
"$type": "color",
|
|
1866
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1631
1867
|
"$extensions": {
|
|
1632
1868
|
"org.primer.figma": {
|
|
1633
1869
|
"collection": "mode",
|
|
@@ -1645,6 +1881,10 @@
|
|
|
1645
1881
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1646
1882
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1647
1883
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1884
|
+
},
|
|
1885
|
+
"org.primer.llm": {
|
|
1886
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1887
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1648
1888
|
}
|
|
1649
1889
|
},
|
|
1650
1890
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1657,6 +1897,7 @@
|
|
|
1657
1897
|
"key": "{bgColor.severe.muted}",
|
|
1658
1898
|
"$value": "#db6d281a",
|
|
1659
1899
|
"$type": "color",
|
|
1900
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1660
1901
|
"$extensions": {
|
|
1661
1902
|
"org.primer.figma": {
|
|
1662
1903
|
"collection": "mode",
|
|
@@ -1683,6 +1924,10 @@
|
|
|
1683
1924
|
"isSource": true,
|
|
1684
1925
|
"$type": "color"
|
|
1685
1926
|
}
|
|
1927
|
+
},
|
|
1928
|
+
"org.primer.llm": {
|
|
1929
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1930
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1686
1931
|
}
|
|
1687
1932
|
},
|
|
1688
1933
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1691,6 +1936,7 @@
|
|
|
1691
1936
|
"original": {
|
|
1692
1937
|
"$value": "{base.color.orange.4}",
|
|
1693
1938
|
"$type": "color",
|
|
1939
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1694
1940
|
"$extensions": {
|
|
1695
1941
|
"org.primer.figma": {
|
|
1696
1942
|
"collection": "mode",
|
|
@@ -1717,6 +1963,10 @@
|
|
|
1717
1963
|
"isSource": true,
|
|
1718
1964
|
"$type": "color"
|
|
1719
1965
|
}
|
|
1966
|
+
},
|
|
1967
|
+
"org.primer.llm": {
|
|
1968
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1969
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1720
1970
|
}
|
|
1721
1971
|
},
|
|
1722
1972
|
"alpha": 0.1,
|
|
@@ -1730,6 +1980,7 @@
|
|
|
1730
1980
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1731
1981
|
"$value": "#bf4b8a",
|
|
1732
1982
|
"$type": "color",
|
|
1983
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1733
1984
|
"$extensions": {
|
|
1734
1985
|
"org.primer.figma": {
|
|
1735
1986
|
"collection": "mode",
|
|
@@ -1744,6 +1995,10 @@
|
|
|
1744
1995
|
"dark-dimmed-high-contrast": "#7d2457",
|
|
1745
1996
|
"dark-tritanopia-high-contrast": "#42062a",
|
|
1746
1997
|
"dark-protanopia-deuteranopia-high-contrast": "#42062a"
|
|
1998
|
+
},
|
|
1999
|
+
"org.primer.llm": {
|
|
2000
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2001
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1747
2002
|
}
|
|
1748
2003
|
},
|
|
1749
2004
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1751,6 +2006,7 @@
|
|
|
1751
2006
|
"original": {
|
|
1752
2007
|
"$value": "{base.color.pink.5}",
|
|
1753
2008
|
"$type": "color",
|
|
2009
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1754
2010
|
"$extensions": {
|
|
1755
2011
|
"org.primer.figma": {
|
|
1756
2012
|
"collection": "mode",
|
|
@@ -1765,6 +2021,10 @@
|
|
|
1765
2021
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1766
2022
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1767
2023
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2024
|
+
},
|
|
2025
|
+
"org.primer.llm": {
|
|
2026
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2027
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1768
2028
|
}
|
|
1769
2029
|
},
|
|
1770
2030
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1777,6 +2037,7 @@
|
|
|
1777
2037
|
"key": "{bgColor.sponsors.muted}",
|
|
1778
2038
|
"$value": "#db61a21a",
|
|
1779
2039
|
"$type": "color",
|
|
2040
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1780
2041
|
"$extensions": {
|
|
1781
2042
|
"org.primer.figma": {
|
|
1782
2043
|
"collection": "mode",
|
|
@@ -1801,6 +2062,10 @@
|
|
|
1801
2062
|
"isSource": true,
|
|
1802
2063
|
"$type": "color"
|
|
1803
2064
|
}
|
|
2065
|
+
},
|
|
2066
|
+
"org.primer.llm": {
|
|
2067
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2068
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1804
2069
|
}
|
|
1805
2070
|
},
|
|
1806
2071
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1809,6 +2074,7 @@
|
|
|
1809
2074
|
"original": {
|
|
1810
2075
|
"$value": "{base.color.pink.4}",
|
|
1811
2076
|
"$type": "color",
|
|
2077
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1812
2078
|
"$extensions": {
|
|
1813
2079
|
"org.primer.figma": {
|
|
1814
2080
|
"collection": "mode",
|
|
@@ -1833,6 +2099,10 @@
|
|
|
1833
2099
|
"isSource": true,
|
|
1834
2100
|
"$type": "color"
|
|
1835
2101
|
}
|
|
2102
|
+
},
|
|
2103
|
+
"org.primer.llm": {
|
|
2104
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2105
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1836
2106
|
}
|
|
1837
2107
|
},
|
|
1838
2108
|
"alpha": 0.1,
|
|
@@ -1846,6 +2116,7 @@
|
|
|
1846
2116
|
"key": "{bgColor.success.emphasis}",
|
|
1847
2117
|
"$value": "#238636",
|
|
1848
2118
|
"$type": "color",
|
|
2119
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1849
2120
|
"$extensions": {
|
|
1850
2121
|
"org.primer.figma": {
|
|
1851
2122
|
"collection": "mode",
|
|
@@ -1868,6 +2139,10 @@
|
|
|
1868
2139
|
"light-high-contrast": "#238636",
|
|
1869
2140
|
"dark-high-contrast": "#04260f",
|
|
1870
2141
|
"dark-dimmed-high-contrast": "#0f5323"
|
|
2142
|
+
},
|
|
2143
|
+
"org.primer.llm": {
|
|
2144
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2145
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1871
2146
|
}
|
|
1872
2147
|
},
|
|
1873
2148
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1875,6 +2150,7 @@
|
|
|
1875
2150
|
"original": {
|
|
1876
2151
|
"$value": "{base.color.green.5}",
|
|
1877
2152
|
"$type": "color",
|
|
2153
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1878
2154
|
"$extensions": {
|
|
1879
2155
|
"org.primer.figma": {
|
|
1880
2156
|
"collection": "mode",
|
|
@@ -1897,6 +2173,10 @@
|
|
|
1897
2173
|
"light-high-contrast": "{base.color.green.5}",
|
|
1898
2174
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1899
2175
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2176
|
+
},
|
|
2177
|
+
"org.primer.llm": {
|
|
2178
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2179
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1900
2180
|
}
|
|
1901
2181
|
},
|
|
1902
2182
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1909,6 +2189,7 @@
|
|
|
1909
2189
|
"key": "{bgColor.success.muted}",
|
|
1910
2190
|
"$value": "#2ea04326",
|
|
1911
2191
|
"$type": "color",
|
|
2192
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1912
2193
|
"$extensions": {
|
|
1913
2194
|
"org.primer.figma": {
|
|
1914
2195
|
"collection": "mode",
|
|
@@ -1958,6 +2239,10 @@
|
|
|
1958
2239
|
"isSource": true,
|
|
1959
2240
|
"$type": "color"
|
|
1960
2241
|
}
|
|
2242
|
+
},
|
|
2243
|
+
"org.primer.llm": {
|
|
2244
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2245
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1961
2246
|
}
|
|
1962
2247
|
},
|
|
1963
2248
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1966,6 +2251,7 @@
|
|
|
1966
2251
|
"original": {
|
|
1967
2252
|
"$value": "{base.color.green.4}",
|
|
1968
2253
|
"$type": "color",
|
|
2254
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1969
2255
|
"$extensions": {
|
|
1970
2256
|
"org.primer.figma": {
|
|
1971
2257
|
"collection": "mode",
|
|
@@ -2015,6 +2301,10 @@
|
|
|
2015
2301
|
"isSource": true,
|
|
2016
2302
|
"$type": "color"
|
|
2017
2303
|
}
|
|
2304
|
+
},
|
|
2305
|
+
"org.primer.llm": {
|
|
2306
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2307
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2018
2308
|
}
|
|
2019
2309
|
},
|
|
2020
2310
|
"alpha": 0.15,
|
|
@@ -2028,6 +2318,7 @@
|
|
|
2028
2318
|
"key": "{bgColor.transparent}",
|
|
2029
2319
|
"$value": "#00000000",
|
|
2030
2320
|
"$type": "color",
|
|
2321
|
+
"$description": "Fully transparent background",
|
|
2031
2322
|
"$extensions": {
|
|
2032
2323
|
"org.primer.figma": {
|
|
2033
2324
|
"collection": "mode",
|
|
@@ -2036,6 +2327,10 @@
|
|
|
2036
2327
|
"codeSyntax": {
|
|
2037
2328
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2038
2329
|
}
|
|
2330
|
+
},
|
|
2331
|
+
"org.primer.llm": {
|
|
2332
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2333
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2039
2334
|
}
|
|
2040
2335
|
},
|
|
2041
2336
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2043,6 +2338,7 @@
|
|
|
2043
2338
|
"original": {
|
|
2044
2339
|
"$value": "{base.color.transparent}",
|
|
2045
2340
|
"$type": "color",
|
|
2341
|
+
"$description": "Fully transparent background",
|
|
2046
2342
|
"$extensions": {
|
|
2047
2343
|
"org.primer.figma": {
|
|
2048
2344
|
"collection": "mode",
|
|
@@ -2051,6 +2347,10 @@
|
|
|
2051
2347
|
"codeSyntax": {
|
|
2052
2348
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2053
2349
|
}
|
|
2350
|
+
},
|
|
2351
|
+
"org.primer.llm": {
|
|
2352
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2353
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2054
2354
|
}
|
|
2055
2355
|
},
|
|
2056
2356
|
"key": "{bgColor.transparent}"
|
|
@@ -2063,6 +2363,7 @@
|
|
|
2063
2363
|
"key": "{bgColor.upsell.emphasis}",
|
|
2064
2364
|
"$value": "#8957e5",
|
|
2065
2365
|
"$type": "color",
|
|
2366
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2066
2367
|
"$extensions": {
|
|
2067
2368
|
"org.primer.figma": {
|
|
2068
2369
|
"collection": "mode",
|
|
@@ -2071,6 +2372,10 @@
|
|
|
2071
2372
|
"codeSyntax": {
|
|
2072
2373
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2073
2374
|
}
|
|
2375
|
+
},
|
|
2376
|
+
"org.primer.llm": {
|
|
2377
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2378
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2074
2379
|
}
|
|
2075
2380
|
},
|
|
2076
2381
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2078,6 +2383,7 @@
|
|
|
2078
2383
|
"original": {
|
|
2079
2384
|
"$value": "{bgColor.done.emphasis}",
|
|
2080
2385
|
"$type": "color",
|
|
2386
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2081
2387
|
"$extensions": {
|
|
2082
2388
|
"org.primer.figma": {
|
|
2083
2389
|
"collection": "mode",
|
|
@@ -2086,6 +2392,10 @@
|
|
|
2086
2392
|
"codeSyntax": {
|
|
2087
2393
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2088
2394
|
}
|
|
2395
|
+
},
|
|
2396
|
+
"org.primer.llm": {
|
|
2397
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2398
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2089
2399
|
}
|
|
2090
2400
|
},
|
|
2091
2401
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2098,6 +2408,7 @@
|
|
|
2098
2408
|
"key": "{bgColor.upsell.muted}",
|
|
2099
2409
|
"$value": "#ab7df826",
|
|
2100
2410
|
"$type": "color",
|
|
2411
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2101
2412
|
"$extensions": {
|
|
2102
2413
|
"org.primer.figma": {
|
|
2103
2414
|
"collection": "mode",
|
|
@@ -2106,6 +2417,10 @@
|
|
|
2106
2417
|
"codeSyntax": {
|
|
2107
2418
|
"web": "var(--bgColor-upsell-muted)"
|
|
2108
2419
|
}
|
|
2420
|
+
},
|
|
2421
|
+
"org.primer.llm": {
|
|
2422
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2423
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2109
2424
|
}
|
|
2110
2425
|
},
|
|
2111
2426
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2113,6 +2428,7 @@
|
|
|
2113
2428
|
"original": {
|
|
2114
2429
|
"$value": "{bgColor.done.muted}",
|
|
2115
2430
|
"$type": "color",
|
|
2431
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2116
2432
|
"$extensions": {
|
|
2117
2433
|
"org.primer.figma": {
|
|
2118
2434
|
"collection": "mode",
|
|
@@ -2121,6 +2437,10 @@
|
|
|
2121
2437
|
"codeSyntax": {
|
|
2122
2438
|
"web": "var(--bgColor-upsell-muted)"
|
|
2123
2439
|
}
|
|
2440
|
+
},
|
|
2441
|
+
"org.primer.llm": {
|
|
2442
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2443
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2124
2444
|
}
|
|
2125
2445
|
},
|
|
2126
2446
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2133,6 +2453,7 @@
|
|
|
2133
2453
|
"key": "{bgColor.white}",
|
|
2134
2454
|
"$value": "#ffffff",
|
|
2135
2455
|
"$type": "color",
|
|
2456
|
+
"$description": "Pure white background",
|
|
2136
2457
|
"$extensions": {
|
|
2137
2458
|
"org.primer.figma": {
|
|
2138
2459
|
"collection": "mode",
|
|
@@ -2141,6 +2462,10 @@
|
|
|
2141
2462
|
},
|
|
2142
2463
|
"org.primer.overrides": {
|
|
2143
2464
|
"dark": "#ffffff"
|
|
2465
|
+
},
|
|
2466
|
+
"org.primer.llm": {
|
|
2467
|
+
"doNotUse": true,
|
|
2468
|
+
"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."
|
|
2144
2469
|
}
|
|
2145
2470
|
},
|
|
2146
2471
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2148,6 +2473,7 @@
|
|
|
2148
2473
|
"original": {
|
|
2149
2474
|
"$value": "{base.color.neutral.13}",
|
|
2150
2475
|
"$type": "color",
|
|
2476
|
+
"$description": "Pure white background",
|
|
2151
2477
|
"$extensions": {
|
|
2152
2478
|
"org.primer.figma": {
|
|
2153
2479
|
"collection": "mode",
|
|
@@ -2156,6 +2482,10 @@
|
|
|
2156
2482
|
},
|
|
2157
2483
|
"org.primer.overrides": {
|
|
2158
2484
|
"dark": "{base.color.neutral.13}"
|
|
2485
|
+
},
|
|
2486
|
+
"org.primer.llm": {
|
|
2487
|
+
"doNotUse": true,
|
|
2488
|
+
"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."
|
|
2159
2489
|
}
|
|
2160
2490
|
},
|
|
2161
2491
|
"key": "{bgColor.white}"
|
|
@@ -2166,7 +2496,7 @@
|
|
|
2166
2496
|
},
|
|
2167
2497
|
"border-accent-emphasis": {
|
|
2168
2498
|
"key": "{border.accent.emphasis}",
|
|
2169
|
-
"$value": "0.
|
|
2499
|
+
"$value": "0.0625rem,1px solid #1f6feb",
|
|
2170
2500
|
"$type": "border",
|
|
2171
2501
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2172
2502
|
"isSource": true,
|
|
@@ -2185,7 +2515,7 @@
|
|
|
2185
2515
|
},
|
|
2186
2516
|
"border-accent-muted": {
|
|
2187
2517
|
"key": "{border.accent.muted}",
|
|
2188
|
-
"$value": "0.
|
|
2518
|
+
"$value": "0.0625rem,1px solid #388bfd66",
|
|
2189
2519
|
"$type": "border",
|
|
2190
2520
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2191
2521
|
"isSource": true,
|
|
@@ -2204,7 +2534,7 @@
|
|
|
2204
2534
|
},
|
|
2205
2535
|
"border-attention-emphasis": {
|
|
2206
2536
|
"key": "{border.attention.emphasis}",
|
|
2207
|
-
"$value": "0.
|
|
2537
|
+
"$value": "0.0625rem,1px solid #9e6a03",
|
|
2208
2538
|
"$type": "border",
|
|
2209
2539
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2210
2540
|
"isSource": true,
|
|
@@ -2223,7 +2553,7 @@
|
|
|
2223
2553
|
},
|
|
2224
2554
|
"border-attention-muted": {
|
|
2225
2555
|
"key": "{border.attention.muted}",
|
|
2226
|
-
"$value": "0.
|
|
2556
|
+
"$value": "0.0625rem,1px solid #bb800966",
|
|
2227
2557
|
"$type": "border",
|
|
2228
2558
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2229
2559
|
"isSource": true,
|
|
@@ -2242,7 +2572,7 @@
|
|
|
2242
2572
|
},
|
|
2243
2573
|
"border-closed-emphasis": {
|
|
2244
2574
|
"key": "{border.closed.emphasis}",
|
|
2245
|
-
"$value": "0.
|
|
2575
|
+
"$value": "0.0625rem,1px solid #da3633",
|
|
2246
2576
|
"$type": "border",
|
|
2247
2577
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2248
2578
|
"isSource": true,
|
|
@@ -2257,7 +2587,7 @@
|
|
|
2257
2587
|
},
|
|
2258
2588
|
"border-closed-muted": {
|
|
2259
2589
|
"key": "{border.closed.muted}",
|
|
2260
|
-
"$value": "0.
|
|
2590
|
+
"$value": "0.0625rem,1px solid #f8514966",
|
|
2261
2591
|
"$type": "border",
|
|
2262
2592
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2263
2593
|
"isSource": true,
|
|
@@ -2272,7 +2602,7 @@
|
|
|
2272
2602
|
},
|
|
2273
2603
|
"border-danger-emphasis": {
|
|
2274
2604
|
"key": "{border.danger.emphasis}",
|
|
2275
|
-
"$value": "0.
|
|
2605
|
+
"$value": "0.0625rem,1px solid #da3633",
|
|
2276
2606
|
"$type": "border",
|
|
2277
2607
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2278
2608
|
"isSource": true,
|
|
@@ -2291,7 +2621,7 @@
|
|
|
2291
2621
|
},
|
|
2292
2622
|
"border-danger-muted": {
|
|
2293
2623
|
"key": "{border.danger.muted}",
|
|
2294
|
-
"$value": "0.
|
|
2624
|
+
"$value": "0.0625rem,1px solid #f8514966",
|
|
2295
2625
|
"$type": "border",
|
|
2296
2626
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2297
2627
|
"isSource": true,
|
|
@@ -2310,7 +2640,7 @@
|
|
|
2310
2640
|
},
|
|
2311
2641
|
"border-default": {
|
|
2312
2642
|
"key": "{border.default}",
|
|
2313
|
-
"$value": "0.
|
|
2643
|
+
"$value": "0.0625rem,1px solid #3d444d",
|
|
2314
2644
|
"$type": "border",
|
|
2315
2645
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2316
2646
|
"isSource": true,
|
|
@@ -2329,7 +2659,7 @@
|
|
|
2329
2659
|
},
|
|
2330
2660
|
"border-disabled": {
|
|
2331
2661
|
"key": "{border.disabled}",
|
|
2332
|
-
"$value": "0.
|
|
2662
|
+
"$value": "0.0625rem,1px solid #656c761a",
|
|
2333
2663
|
"$type": "border",
|
|
2334
2664
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2335
2665
|
"isSource": true,
|
|
@@ -2348,7 +2678,7 @@
|
|
|
2348
2678
|
},
|
|
2349
2679
|
"border-done-emphasis": {
|
|
2350
2680
|
"key": "{border.done.emphasis}",
|
|
2351
|
-
"$value": "0.
|
|
2681
|
+
"$value": "0.0625rem,1px solid #8957e5",
|
|
2352
2682
|
"$type": "border",
|
|
2353
2683
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2354
2684
|
"isSource": true,
|
|
@@ -2367,7 +2697,7 @@
|
|
|
2367
2697
|
},
|
|
2368
2698
|
"border-done-muted": {
|
|
2369
2699
|
"key": "{border.done.muted}",
|
|
2370
|
-
"$value": "0.
|
|
2700
|
+
"$value": "0.0625rem,1px solid #ab7df866",
|
|
2371
2701
|
"$type": "border",
|
|
2372
2702
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2373
2703
|
"isSource": true,
|
|
@@ -2386,7 +2716,7 @@
|
|
|
2386
2716
|
},
|
|
2387
2717
|
"border-emphasis": {
|
|
2388
2718
|
"key": "{border.emphasis}",
|
|
2389
|
-
"$value": "0.
|
|
2719
|
+
"$value": "0.0625rem,1px solid #656c76",
|
|
2390
2720
|
"$type": "border",
|
|
2391
2721
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2392
2722
|
"isSource": true,
|
|
@@ -2405,7 +2735,7 @@
|
|
|
2405
2735
|
},
|
|
2406
2736
|
"border-muted": {
|
|
2407
2737
|
"key": "{border.muted}",
|
|
2408
|
-
"$value": "0.
|
|
2738
|
+
"$value": "0.0625rem,1px solid #3d444db3",
|
|
2409
2739
|
"$type": "border",
|
|
2410
2740
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2411
2741
|
"isSource": true,
|
|
@@ -2424,7 +2754,7 @@
|
|
|
2424
2754
|
},
|
|
2425
2755
|
"border-neutral-emphasis": {
|
|
2426
2756
|
"key": "{border.neutral.emphasis}",
|
|
2427
|
-
"$value": "0.
|
|
2757
|
+
"$value": "0.0625rem,1px solid #656c76",
|
|
2428
2758
|
"$type": "border",
|
|
2429
2759
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2430
2760
|
"isSource": true,
|
|
@@ -2443,7 +2773,7 @@
|
|
|
2443
2773
|
},
|
|
2444
2774
|
"border-neutral-muted": {
|
|
2445
2775
|
"key": "{border.neutral.muted}",
|
|
2446
|
-
"$value": "0.
|
|
2776
|
+
"$value": "0.0625rem,1px solid #3d444db3",
|
|
2447
2777
|
"$type": "border",
|
|
2448
2778
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2449
2779
|
"isSource": true,
|
|
@@ -2462,7 +2792,7 @@
|
|
|
2462
2792
|
},
|
|
2463
2793
|
"border-open-emphasis": {
|
|
2464
2794
|
"key": "{border.open.emphasis}",
|
|
2465
|
-
"$value": "0.
|
|
2795
|
+
"$value": "0.0625rem,1px solid #238636",
|
|
2466
2796
|
"$type": "border",
|
|
2467
2797
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2468
2798
|
"isSource": true,
|
|
@@ -2477,7 +2807,7 @@
|
|
|
2477
2807
|
},
|
|
2478
2808
|
"border-open-muted": {
|
|
2479
2809
|
"key": "{border.open.muted}",
|
|
2480
|
-
"$value": "0.
|
|
2810
|
+
"$value": "0.0625rem,1px solid #2ea04366",
|
|
2481
2811
|
"$type": "border",
|
|
2482
2812
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2483
2813
|
"isSource": true,
|
|
@@ -2492,7 +2822,7 @@
|
|
|
2492
2822
|
},
|
|
2493
2823
|
"border-severe-emphasis": {
|
|
2494
2824
|
"key": "{border.severe.emphasis}",
|
|
2495
|
-
"$value": "0.
|
|
2825
|
+
"$value": "0.0625rem,1px solid #bd561d",
|
|
2496
2826
|
"$type": "border",
|
|
2497
2827
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2498
2828
|
"isSource": true,
|
|
@@ -2511,7 +2841,7 @@
|
|
|
2511
2841
|
},
|
|
2512
2842
|
"border-severe-muted": {
|
|
2513
2843
|
"key": "{border.severe.muted}",
|
|
2514
|
-
"$value": "0.
|
|
2844
|
+
"$value": "0.0625rem,1px solid #db6d2866",
|
|
2515
2845
|
"$type": "border",
|
|
2516
2846
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2517
2847
|
"isSource": true,
|
|
@@ -2530,7 +2860,7 @@
|
|
|
2530
2860
|
},
|
|
2531
2861
|
"border-sponsors-emphasis": {
|
|
2532
2862
|
"key": "{border.sponsors.emphasis}",
|
|
2533
|
-
"$value": "0.
|
|
2863
|
+
"$value": "0.0625rem,1px solid #bf4b8a",
|
|
2534
2864
|
"$type": "border",
|
|
2535
2865
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2536
2866
|
"isSource": true,
|
|
@@ -2549,7 +2879,7 @@
|
|
|
2549
2879
|
},
|
|
2550
2880
|
"border-sponsors-muted": {
|
|
2551
2881
|
"key": "{border.sponsors.muted}",
|
|
2552
|
-
"$value": "0.
|
|
2882
|
+
"$value": "0.0625rem,1px solid #db61a266",
|
|
2553
2883
|
"$type": "border",
|
|
2554
2884
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2555
2885
|
"isSource": true,
|
|
@@ -2568,7 +2898,7 @@
|
|
|
2568
2898
|
},
|
|
2569
2899
|
"border-success-emphasis": {
|
|
2570
2900
|
"key": "{border.success.emphasis}",
|
|
2571
|
-
"$value": "0.
|
|
2901
|
+
"$value": "0.0625rem,1px solid #238636",
|
|
2572
2902
|
"$type": "border",
|
|
2573
2903
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2574
2904
|
"isSource": true,
|
|
@@ -2587,7 +2917,7 @@
|
|
|
2587
2917
|
},
|
|
2588
2918
|
"border-success-muted": {
|
|
2589
2919
|
"key": "{border.success.muted}",
|
|
2590
|
-
"$value": "0.
|
|
2920
|
+
"$value": "0.0625rem,1px solid #2ea04366",
|
|
2591
2921
|
"$type": "border",
|
|
2592
2922
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2593
2923
|
"isSource": true,
|
|
@@ -2606,7 +2936,7 @@
|
|
|
2606
2936
|
},
|
|
2607
2937
|
"border-transparent": {
|
|
2608
2938
|
"key": "{border.transparent}",
|
|
2609
|
-
"$value": "0.
|
|
2939
|
+
"$value": "0.0625rem,1px solid #00000000",
|
|
2610
2940
|
"$type": "border",
|
|
2611
2941
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2612
2942
|
"isSource": true,
|
|
@@ -2625,7 +2955,7 @@
|
|
|
2625
2955
|
},
|
|
2626
2956
|
"border-upsell-emphasis": {
|
|
2627
2957
|
"key": "{border.upsell.emphasis}",
|
|
2628
|
-
"$value": "0.
|
|
2958
|
+
"$value": "0.0625rem,1px solid #8957e5",
|
|
2629
2959
|
"$type": "border",
|
|
2630
2960
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2631
2961
|
"isSource": true,
|
|
@@ -2644,7 +2974,7 @@
|
|
|
2644
2974
|
},
|
|
2645
2975
|
"border-upsell-muted": {
|
|
2646
2976
|
"key": "{border.upsell.muted}",
|
|
2647
|
-
"$value": "0.
|
|
2977
|
+
"$value": "0.0625rem,1px solid #ab7df866",
|
|
2648
2978
|
"$type": "border",
|
|
2649
2979
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2650
2980
|
"isSource": true,
|
|
@@ -2665,6 +2995,7 @@
|
|
|
2665
2995
|
"key": "{borderColor.accent.emphasis}",
|
|
2666
2996
|
"$value": "#1f6feb",
|
|
2667
2997
|
"$type": "color",
|
|
2998
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2668
2999
|
"$extensions": {
|
|
2669
3000
|
"org.primer.figma": {
|
|
2670
3001
|
"collection": "mode",
|
|
@@ -2676,6 +3007,10 @@
|
|
|
2676
3007
|
},
|
|
2677
3008
|
"org.primer.overrides": {
|
|
2678
3009
|
"dark-dimmed-high-contrast": "#79c0ff"
|
|
3010
|
+
},
|
|
3011
|
+
"org.primer.llm": {
|
|
3012
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3013
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2679
3014
|
}
|
|
2680
3015
|
},
|
|
2681
3016
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2683,6 +3018,7 @@
|
|
|
2683
3018
|
"original": {
|
|
2684
3019
|
"$value": "{base.color.blue.5}",
|
|
2685
3020
|
"$type": "color",
|
|
3021
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2686
3022
|
"$extensions": {
|
|
2687
3023
|
"org.primer.figma": {
|
|
2688
3024
|
"collection": "mode",
|
|
@@ -2694,6 +3030,10 @@
|
|
|
2694
3030
|
},
|
|
2695
3031
|
"org.primer.overrides": {
|
|
2696
3032
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3033
|
+
},
|
|
3034
|
+
"org.primer.llm": {
|
|
3035
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3036
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2697
3037
|
}
|
|
2698
3038
|
},
|
|
2699
3039
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2706,6 +3046,7 @@
|
|
|
2706
3046
|
"key": "{borderColor.accent.muted}",
|
|
2707
3047
|
"$value": "#388bfd66",
|
|
2708
3048
|
"$type": "color",
|
|
3049
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2709
3050
|
"$extensions": {
|
|
2710
3051
|
"org.primer.figma": {
|
|
2711
3052
|
"collection": "mode",
|
|
@@ -2766,6 +3107,10 @@
|
|
|
2766
3107
|
"isSource": true,
|
|
2767
3108
|
"$type": "color"
|
|
2768
3109
|
}
|
|
3110
|
+
},
|
|
3111
|
+
"org.primer.llm": {
|
|
3112
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3113
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2769
3114
|
}
|
|
2770
3115
|
},
|
|
2771
3116
|
"alpha": 0.4,
|
|
@@ -2774,6 +3119,7 @@
|
|
|
2774
3119
|
"original": {
|
|
2775
3120
|
"$value": "{base.color.blue.4}",
|
|
2776
3121
|
"$type": "color",
|
|
3122
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2777
3123
|
"$extensions": {
|
|
2778
3124
|
"org.primer.figma": {
|
|
2779
3125
|
"collection": "mode",
|
|
@@ -2834,6 +3180,10 @@
|
|
|
2834
3180
|
"isSource": true,
|
|
2835
3181
|
"$type": "color"
|
|
2836
3182
|
}
|
|
3183
|
+
},
|
|
3184
|
+
"org.primer.llm": {
|
|
3185
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3186
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2837
3187
|
}
|
|
2838
3188
|
},
|
|
2839
3189
|
"alpha": 0.4,
|
|
@@ -2847,6 +3197,7 @@
|
|
|
2847
3197
|
"key": "{borderColor.attention.emphasis}",
|
|
2848
3198
|
"$value": "#9e6a03",
|
|
2849
3199
|
"$type": "color",
|
|
3200
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2850
3201
|
"$extensions": {
|
|
2851
3202
|
"org.primer.figma": {
|
|
2852
3203
|
"collection": "mode",
|
|
@@ -2858,6 +3209,10 @@
|
|
|
2858
3209
|
},
|
|
2859
3210
|
"org.primer.overrides": {
|
|
2860
3211
|
"dark-dimmed-high-contrast": "#e3b341"
|
|
3212
|
+
},
|
|
3213
|
+
"org.primer.llm": {
|
|
3214
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3215
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2861
3216
|
}
|
|
2862
3217
|
},
|
|
2863
3218
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2865,6 +3220,7 @@
|
|
|
2865
3220
|
"original": {
|
|
2866
3221
|
"$value": "{base.color.yellow.5}",
|
|
2867
3222
|
"$type": "color",
|
|
3223
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2868
3224
|
"$extensions": {
|
|
2869
3225
|
"org.primer.figma": {
|
|
2870
3226
|
"collection": "mode",
|
|
@@ -2876,6 +3232,10 @@
|
|
|
2876
3232
|
},
|
|
2877
3233
|
"org.primer.overrides": {
|
|
2878
3234
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3235
|
+
},
|
|
3236
|
+
"org.primer.llm": {
|
|
3237
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3238
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2879
3239
|
}
|
|
2880
3240
|
},
|
|
2881
3241
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2888,6 +3248,7 @@
|
|
|
2888
3248
|
"key": "{borderColor.attention.muted}",
|
|
2889
3249
|
"$value": "#bb800966",
|
|
2890
3250
|
"$type": "color",
|
|
3251
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2891
3252
|
"$extensions": {
|
|
2892
3253
|
"org.primer.figma": {
|
|
2893
3254
|
"collection": "mode",
|
|
@@ -2948,6 +3309,10 @@
|
|
|
2948
3309
|
"isSource": true,
|
|
2949
3310
|
"$type": "color"
|
|
2950
3311
|
}
|
|
3312
|
+
},
|
|
3313
|
+
"org.primer.llm": {
|
|
3314
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3315
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2951
3316
|
}
|
|
2952
3317
|
},
|
|
2953
3318
|
"alpha": 0.4,
|
|
@@ -2956,6 +3321,7 @@
|
|
|
2956
3321
|
"original": {
|
|
2957
3322
|
"$value": "{base.color.yellow.4}",
|
|
2958
3323
|
"$type": "color",
|
|
3324
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2959
3325
|
"$extensions": {
|
|
2960
3326
|
"org.primer.figma": {
|
|
2961
3327
|
"collection": "mode",
|
|
@@ -3016,6 +3382,10 @@
|
|
|
3016
3382
|
"isSource": true,
|
|
3017
3383
|
"$type": "color"
|
|
3018
3384
|
}
|
|
3385
|
+
},
|
|
3386
|
+
"org.primer.llm": {
|
|
3387
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3388
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3019
3389
|
}
|
|
3020
3390
|
},
|
|
3021
3391
|
"alpha": 0.4,
|
|
@@ -3029,6 +3399,7 @@
|
|
|
3029
3399
|
"key": "{borderColor.closed.emphasis}",
|
|
3030
3400
|
"$value": "#da3633",
|
|
3031
3401
|
"$type": "color",
|
|
3402
|
+
"$description": "Strong border for closed state badges",
|
|
3032
3403
|
"$extensions": {
|
|
3033
3404
|
"org.primer.figma": {
|
|
3034
3405
|
"collection": "mode",
|
|
@@ -3047,6 +3418,10 @@
|
|
|
3047
3418
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
3048
3419
|
"light-tritanopia": "#656c76",
|
|
3049
3420
|
"light-tritanopia-high-contrast": "#656c76"
|
|
3421
|
+
},
|
|
3422
|
+
"org.primer.llm": {
|
|
3423
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3424
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3050
3425
|
}
|
|
3051
3426
|
},
|
|
3052
3427
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3054,6 +3429,7 @@
|
|
|
3054
3429
|
"original": {
|
|
3055
3430
|
"$value": "{borderColor.danger.emphasis}",
|
|
3056
3431
|
"$type": "color",
|
|
3432
|
+
"$description": "Strong border for closed state badges",
|
|
3057
3433
|
"$extensions": {
|
|
3058
3434
|
"org.primer.figma": {
|
|
3059
3435
|
"collection": "mode",
|
|
@@ -3072,6 +3448,10 @@
|
|
|
3072
3448
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3073
3449
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3074
3450
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3451
|
+
},
|
|
3452
|
+
"org.primer.llm": {
|
|
3453
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3454
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3075
3455
|
}
|
|
3076
3456
|
},
|
|
3077
3457
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3084,6 +3464,7 @@
|
|
|
3084
3464
|
"key": "{borderColor.closed.muted}",
|
|
3085
3465
|
"$value": "#f8514966",
|
|
3086
3466
|
"$type": "color",
|
|
3467
|
+
"$description": "Subtle border for closed state indicators",
|
|
3087
3468
|
"$extensions": {
|
|
3088
3469
|
"org.primer.figma": {
|
|
3089
3470
|
"collection": "mode",
|
|
@@ -3150,6 +3531,10 @@
|
|
|
3150
3531
|
"isSource": true,
|
|
3151
3532
|
"$type": "color"
|
|
3152
3533
|
}
|
|
3534
|
+
},
|
|
3535
|
+
"org.primer.llm": {
|
|
3536
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3537
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3153
3538
|
}
|
|
3154
3539
|
},
|
|
3155
3540
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3157,6 +3542,7 @@
|
|
|
3157
3542
|
"original": {
|
|
3158
3543
|
"$value": "{borderColor.danger.muted}",
|
|
3159
3544
|
"$type": "color",
|
|
3545
|
+
"$description": "Subtle border for closed state indicators",
|
|
3160
3546
|
"$extensions": {
|
|
3161
3547
|
"org.primer.figma": {
|
|
3162
3548
|
"collection": "mode",
|
|
@@ -3223,6 +3609,10 @@
|
|
|
3223
3609
|
"isSource": true,
|
|
3224
3610
|
"$type": "color"
|
|
3225
3611
|
}
|
|
3612
|
+
},
|
|
3613
|
+
"org.primer.llm": {
|
|
3614
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3615
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3226
3616
|
}
|
|
3227
3617
|
},
|
|
3228
3618
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3235,6 +3625,7 @@
|
|
|
3235
3625
|
"key": "{borderColor.danger.emphasis}",
|
|
3236
3626
|
"$value": "#da3633",
|
|
3237
3627
|
"$type": "color",
|
|
3628
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3238
3629
|
"$extensions": {
|
|
3239
3630
|
"org.primer.figma": {
|
|
3240
3631
|
"collection": "mode",
|
|
@@ -3270,6 +3661,10 @@
|
|
|
3270
3661
|
"$type": "color"
|
|
3271
3662
|
},
|
|
3272
3663
|
"dark-dimmed-high-contrast": "#ffa198"
|
|
3664
|
+
},
|
|
3665
|
+
"org.primer.llm": {
|
|
3666
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3667
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3273
3668
|
}
|
|
3274
3669
|
},
|
|
3275
3670
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3277,6 +3672,7 @@
|
|
|
3277
3672
|
"original": {
|
|
3278
3673
|
"$value": "{base.color.red.5}",
|
|
3279
3674
|
"$type": "color",
|
|
3675
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3280
3676
|
"$extensions": {
|
|
3281
3677
|
"org.primer.figma": {
|
|
3282
3678
|
"collection": "mode",
|
|
@@ -3312,6 +3708,10 @@
|
|
|
3312
3708
|
"$type": "color"
|
|
3313
3709
|
},
|
|
3314
3710
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3711
|
+
},
|
|
3712
|
+
"org.primer.llm": {
|
|
3713
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3714
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3315
3715
|
}
|
|
3316
3716
|
},
|
|
3317
3717
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3324,6 +3724,7 @@
|
|
|
3324
3724
|
"key": "{borderColor.danger.muted}",
|
|
3325
3725
|
"$value": "#f8514966",
|
|
3326
3726
|
"$type": "color",
|
|
3727
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3327
3728
|
"$extensions": {
|
|
3328
3729
|
"org.primer.figma": {
|
|
3329
3730
|
"collection": "mode",
|
|
@@ -3397,6 +3798,10 @@
|
|
|
3397
3798
|
"isSource": true,
|
|
3398
3799
|
"$type": "color"
|
|
3399
3800
|
}
|
|
3801
|
+
},
|
|
3802
|
+
"org.primer.llm": {
|
|
3803
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3804
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3400
3805
|
}
|
|
3401
3806
|
},
|
|
3402
3807
|
"alpha": 0.4,
|
|
@@ -3405,6 +3810,7 @@
|
|
|
3405
3810
|
"original": {
|
|
3406
3811
|
"$value": "{base.color.red.4}",
|
|
3407
3812
|
"$type": "color",
|
|
3813
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3408
3814
|
"$extensions": {
|
|
3409
3815
|
"org.primer.figma": {
|
|
3410
3816
|
"collection": "mode",
|
|
@@ -3478,6 +3884,10 @@
|
|
|
3478
3884
|
"isSource": true,
|
|
3479
3885
|
"$type": "color"
|
|
3480
3886
|
}
|
|
3887
|
+
},
|
|
3888
|
+
"org.primer.llm": {
|
|
3889
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3890
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3481
3891
|
}
|
|
3482
3892
|
},
|
|
3483
3893
|
"alpha": 0.4,
|
|
@@ -3491,6 +3901,7 @@
|
|
|
3491
3901
|
"key": "{borderColor.default}",
|
|
3492
3902
|
"$value": "#3d444d",
|
|
3493
3903
|
"$type": "color",
|
|
3904
|
+
"$description": "Default border color for most UI elements",
|
|
3494
3905
|
"$extensions": {
|
|
3495
3906
|
"org.primer.overrides": {
|
|
3496
3907
|
"dark": "#3d444d",
|
|
@@ -3510,6 +3921,10 @@
|
|
|
3510
3921
|
"codeSyntax": {
|
|
3511
3922
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3512
3923
|
}
|
|
3924
|
+
},
|
|
3925
|
+
"org.primer.llm": {
|
|
3926
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3927
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3513
3928
|
}
|
|
3514
3929
|
},
|
|
3515
3930
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3517,6 +3932,7 @@
|
|
|
3517
3932
|
"original": {
|
|
3518
3933
|
"$value": "{base.color.neutral.7}",
|
|
3519
3934
|
"$type": "color",
|
|
3935
|
+
"$description": "Default border color for most UI elements",
|
|
3520
3936
|
"$extensions": {
|
|
3521
3937
|
"org.primer.overrides": {
|
|
3522
3938
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3536,6 +3952,10 @@
|
|
|
3536
3952
|
"codeSyntax": {
|
|
3537
3953
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3538
3954
|
}
|
|
3955
|
+
},
|
|
3956
|
+
"org.primer.llm": {
|
|
3957
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3958
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3539
3959
|
}
|
|
3540
3960
|
},
|
|
3541
3961
|
"key": "{borderColor.default}"
|
|
@@ -3548,6 +3968,7 @@
|
|
|
3548
3968
|
"key": "{borderColor.disabled}",
|
|
3549
3969
|
"$value": "#656c761a",
|
|
3550
3970
|
"$type": "color",
|
|
3971
|
+
"$description": "Border color for disabled interactive elements",
|
|
3551
3972
|
"$extensions": {
|
|
3552
3973
|
"org.primer.figma": {
|
|
3553
3974
|
"collection": "mode",
|
|
@@ -3590,6 +4011,10 @@
|
|
|
3590
4011
|
"isSource": true,
|
|
3591
4012
|
"$type": "color"
|
|
3592
4013
|
}
|
|
4014
|
+
},
|
|
4015
|
+
"org.primer.llm": {
|
|
4016
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4017
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3593
4018
|
}
|
|
3594
4019
|
},
|
|
3595
4020
|
"alpha": 0.1,
|
|
@@ -3598,6 +4023,7 @@
|
|
|
3598
4023
|
"original": {
|
|
3599
4024
|
"$value": "{base.color.neutral.8}",
|
|
3600
4025
|
"$type": "color",
|
|
4026
|
+
"$description": "Border color for disabled interactive elements",
|
|
3601
4027
|
"$extensions": {
|
|
3602
4028
|
"org.primer.figma": {
|
|
3603
4029
|
"collection": "mode",
|
|
@@ -3640,6 +4066,10 @@
|
|
|
3640
4066
|
"isSource": true,
|
|
3641
4067
|
"$type": "color"
|
|
3642
4068
|
}
|
|
4069
|
+
},
|
|
4070
|
+
"org.primer.llm": {
|
|
4071
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4072
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3643
4073
|
}
|
|
3644
4074
|
},
|
|
3645
4075
|
"alpha": 0.1,
|
|
@@ -3653,6 +4083,7 @@
|
|
|
3653
4083
|
"key": "{borderColor.done.emphasis}",
|
|
3654
4084
|
"$value": "#8957e5",
|
|
3655
4085
|
"$type": "color",
|
|
4086
|
+
"$description": "Strong border for completed/done state badges",
|
|
3656
4087
|
"$extensions": {
|
|
3657
4088
|
"org.primer.figma": {
|
|
3658
4089
|
"collection": "mode",
|
|
@@ -3664,6 +4095,10 @@
|
|
|
3664
4095
|
},
|
|
3665
4096
|
"org.primer.overrides": {
|
|
3666
4097
|
"dark-dimmed-high-contrast": "#d2a8ff"
|
|
4098
|
+
},
|
|
4099
|
+
"org.primer.llm": {
|
|
4100
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4101
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3667
4102
|
}
|
|
3668
4103
|
},
|
|
3669
4104
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3671,6 +4106,7 @@
|
|
|
3671
4106
|
"original": {
|
|
3672
4107
|
"$value": "{base.color.purple.5}",
|
|
3673
4108
|
"$type": "color",
|
|
4109
|
+
"$description": "Strong border for completed/done state badges",
|
|
3674
4110
|
"$extensions": {
|
|
3675
4111
|
"org.primer.figma": {
|
|
3676
4112
|
"collection": "mode",
|
|
@@ -3682,6 +4118,10 @@
|
|
|
3682
4118
|
},
|
|
3683
4119
|
"org.primer.overrides": {
|
|
3684
4120
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4121
|
+
},
|
|
4122
|
+
"org.primer.llm": {
|
|
4123
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4124
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3685
4125
|
}
|
|
3686
4126
|
},
|
|
3687
4127
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3694,6 +4134,7 @@
|
|
|
3694
4134
|
"key": "{borderColor.done.muted}",
|
|
3695
4135
|
"$value": "#ab7df866",
|
|
3696
4136
|
"$type": "color",
|
|
4137
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3697
4138
|
"$extensions": {
|
|
3698
4139
|
"org.primer.figma": {
|
|
3699
4140
|
"collection": "mode",
|
|
@@ -3754,6 +4195,10 @@
|
|
|
3754
4195
|
"isSource": true,
|
|
3755
4196
|
"$type": "color"
|
|
3756
4197
|
}
|
|
4198
|
+
},
|
|
4199
|
+
"org.primer.llm": {
|
|
4200
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4201
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3757
4202
|
}
|
|
3758
4203
|
},
|
|
3759
4204
|
"alpha": 0.4,
|
|
@@ -3762,6 +4207,7 @@
|
|
|
3762
4207
|
"original": {
|
|
3763
4208
|
"$value": "{base.color.purple.4}",
|
|
3764
4209
|
"$type": "color",
|
|
4210
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3765
4211
|
"$extensions": {
|
|
3766
4212
|
"org.primer.figma": {
|
|
3767
4213
|
"collection": "mode",
|
|
@@ -3822,6 +4268,10 @@
|
|
|
3822
4268
|
"isSource": true,
|
|
3823
4269
|
"$type": "color"
|
|
3824
4270
|
}
|
|
4271
|
+
},
|
|
4272
|
+
"org.primer.llm": {
|
|
4273
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4274
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3825
4275
|
}
|
|
3826
4276
|
},
|
|
3827
4277
|
"alpha": 0.4,
|
|
@@ -3835,6 +4285,7 @@
|
|
|
3835
4285
|
"key": "{borderColor.draft.emphasis}",
|
|
3836
4286
|
"$value": "#656c76",
|
|
3837
4287
|
"$type": "color",
|
|
4288
|
+
"$description": "Strong border for draft state badges",
|
|
3838
4289
|
"$extensions": {
|
|
3839
4290
|
"org.primer.figma": {
|
|
3840
4291
|
"collection": "mode",
|
|
@@ -3843,6 +4294,10 @@
|
|
|
3843
4294
|
"codeSyntax": {
|
|
3844
4295
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3845
4296
|
}
|
|
4297
|
+
},
|
|
4298
|
+
"org.primer.llm": {
|
|
4299
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4300
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3846
4301
|
}
|
|
3847
4302
|
},
|
|
3848
4303
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3850,6 +4305,7 @@
|
|
|
3850
4305
|
"original": {
|
|
3851
4306
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3852
4307
|
"$type": "color",
|
|
4308
|
+
"$description": "Strong border for draft state badges",
|
|
3853
4309
|
"$extensions": {
|
|
3854
4310
|
"org.primer.figma": {
|
|
3855
4311
|
"collection": "mode",
|
|
@@ -3858,6 +4314,10 @@
|
|
|
3858
4314
|
"codeSyntax": {
|
|
3859
4315
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3860
4316
|
}
|
|
4317
|
+
},
|
|
4318
|
+
"org.primer.llm": {
|
|
4319
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4320
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3861
4321
|
}
|
|
3862
4322
|
},
|
|
3863
4323
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3870,6 +4330,7 @@
|
|
|
3870
4330
|
"key": "{borderColor.draft.muted}",
|
|
3871
4331
|
"$value": "#3d444db3",
|
|
3872
4332
|
"$type": "color",
|
|
4333
|
+
"$description": "Subtle border for draft state indicators",
|
|
3873
4334
|
"$extensions": {
|
|
3874
4335
|
"org.primer.figma": {
|
|
3875
4336
|
"collection": "mode",
|
|
@@ -3936,6 +4397,10 @@
|
|
|
3936
4397
|
"isSource": true,
|
|
3937
4398
|
"$type": "color"
|
|
3938
4399
|
}
|
|
4400
|
+
},
|
|
4401
|
+
"org.primer.llm": {
|
|
4402
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4403
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3939
4404
|
}
|
|
3940
4405
|
},
|
|
3941
4406
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3943,6 +4408,7 @@
|
|
|
3943
4408
|
"original": {
|
|
3944
4409
|
"$value": "{borderColor.neutral.muted}",
|
|
3945
4410
|
"$type": "color",
|
|
4411
|
+
"$description": "Subtle border for draft state indicators",
|
|
3946
4412
|
"$extensions": {
|
|
3947
4413
|
"org.primer.figma": {
|
|
3948
4414
|
"collection": "mode",
|
|
@@ -4009,6 +4475,10 @@
|
|
|
4009
4475
|
"isSource": true,
|
|
4010
4476
|
"$type": "color"
|
|
4011
4477
|
}
|
|
4478
|
+
},
|
|
4479
|
+
"org.primer.llm": {
|
|
4480
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4481
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4012
4482
|
}
|
|
4013
4483
|
},
|
|
4014
4484
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4021,6 +4491,7 @@
|
|
|
4021
4491
|
"key": "{borderColor.emphasis}",
|
|
4022
4492
|
"$value": "#656c76",
|
|
4023
4493
|
"$type": "color",
|
|
4494
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4024
4495
|
"$extensions": {
|
|
4025
4496
|
"org.primer.figma": {
|
|
4026
4497
|
"collection": "mode",
|
|
@@ -4035,6 +4506,10 @@
|
|
|
4035
4506
|
"dark-dimmed-high-contrast": "#3d444d",
|
|
4036
4507
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
4037
4508
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
4509
|
+
},
|
|
4510
|
+
"org.primer.llm": {
|
|
4511
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4512
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4038
4513
|
}
|
|
4039
4514
|
},
|
|
4040
4515
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4042,6 +4517,7 @@
|
|
|
4042
4517
|
"original": {
|
|
4043
4518
|
"$value": "{base.color.neutral.8}",
|
|
4044
4519
|
"$type": "color",
|
|
4520
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4045
4521
|
"$extensions": {
|
|
4046
4522
|
"org.primer.figma": {
|
|
4047
4523
|
"collection": "mode",
|
|
@@ -4056,6 +4532,10 @@
|
|
|
4056
4532
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4057
4533
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4058
4534
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4535
|
+
},
|
|
4536
|
+
"org.primer.llm": {
|
|
4537
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4538
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4059
4539
|
}
|
|
4060
4540
|
},
|
|
4061
4541
|
"key": "{borderColor.emphasis}"
|
|
@@ -4068,6 +4548,7 @@
|
|
|
4068
4548
|
"key": "{borderColor.muted}",
|
|
4069
4549
|
"$value": "#3d444db3",
|
|
4070
4550
|
"$type": "color",
|
|
4551
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4071
4552
|
"$extensions": {
|
|
4072
4553
|
"org.primer.figma": {
|
|
4073
4554
|
"collection": "mode",
|
|
@@ -4134,6 +4615,10 @@
|
|
|
4134
4615
|
"isSource": true,
|
|
4135
4616
|
"$type": "color"
|
|
4136
4617
|
}
|
|
4618
|
+
},
|
|
4619
|
+
"org.primer.llm": {
|
|
4620
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4621
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4137
4622
|
}
|
|
4138
4623
|
},
|
|
4139
4624
|
"alpha": 0.7,
|
|
@@ -4142,6 +4627,7 @@
|
|
|
4142
4627
|
"original": {
|
|
4143
4628
|
"$value": "{borderColor.default}",
|
|
4144
4629
|
"$type": "color",
|
|
4630
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4145
4631
|
"$extensions": {
|
|
4146
4632
|
"org.primer.figma": {
|
|
4147
4633
|
"collection": "mode",
|
|
@@ -4208,6 +4694,10 @@
|
|
|
4208
4694
|
"isSource": true,
|
|
4209
4695
|
"$type": "color"
|
|
4210
4696
|
}
|
|
4697
|
+
},
|
|
4698
|
+
"org.primer.llm": {
|
|
4699
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4700
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4211
4701
|
}
|
|
4212
4702
|
},
|
|
4213
4703
|
"alpha": 0.7,
|
|
@@ -4221,6 +4711,7 @@
|
|
|
4221
4711
|
"key": "{borderColor.neutral.emphasis}",
|
|
4222
4712
|
"$value": "#656c76",
|
|
4223
4713
|
"$type": "color",
|
|
4714
|
+
"$description": "Strong neutral semantic border",
|
|
4224
4715
|
"$extensions": {
|
|
4225
4716
|
"org.primer.figma": {
|
|
4226
4717
|
"collection": "mode",
|
|
@@ -4229,6 +4720,10 @@
|
|
|
4229
4720
|
},
|
|
4230
4721
|
"org.primer.overrides": {
|
|
4231
4722
|
"dark": "#656c76"
|
|
4723
|
+
},
|
|
4724
|
+
"org.primer.llm": {
|
|
4725
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4726
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4232
4727
|
}
|
|
4233
4728
|
},
|
|
4234
4729
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4236,6 +4731,7 @@
|
|
|
4236
4731
|
"original": {
|
|
4237
4732
|
"$value": "{borderColor.emphasis}",
|
|
4238
4733
|
"$type": "color",
|
|
4734
|
+
"$description": "Strong neutral semantic border",
|
|
4239
4735
|
"$extensions": {
|
|
4240
4736
|
"org.primer.figma": {
|
|
4241
4737
|
"collection": "mode",
|
|
@@ -4244,6 +4740,10 @@
|
|
|
4244
4740
|
},
|
|
4245
4741
|
"org.primer.overrides": {
|
|
4246
4742
|
"dark": "{borderColor.emphasis}"
|
|
4743
|
+
},
|
|
4744
|
+
"org.primer.llm": {
|
|
4745
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4746
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4247
4747
|
}
|
|
4248
4748
|
},
|
|
4249
4749
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4256,6 +4756,7 @@
|
|
|
4256
4756
|
"key": "{borderColor.neutral.muted}",
|
|
4257
4757
|
"$value": "#3d444db3",
|
|
4258
4758
|
"$type": "color",
|
|
4759
|
+
"$description": "Subtle neutral semantic border",
|
|
4259
4760
|
"$extensions": {
|
|
4260
4761
|
"org.primer.figma": {
|
|
4261
4762
|
"collection": "mode",
|
|
@@ -4277,6 +4778,10 @@
|
|
|
4277
4778
|
"isSource": true,
|
|
4278
4779
|
"$type": "color"
|
|
4279
4780
|
}
|
|
4781
|
+
},
|
|
4782
|
+
"org.primer.llm": {
|
|
4783
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4784
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4280
4785
|
}
|
|
4281
4786
|
},
|
|
4282
4787
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4284,6 +4789,7 @@
|
|
|
4284
4789
|
"original": {
|
|
4285
4790
|
"$value": "{borderColor.muted}",
|
|
4286
4791
|
"$type": "color",
|
|
4792
|
+
"$description": "Subtle neutral semantic border",
|
|
4287
4793
|
"$extensions": {
|
|
4288
4794
|
"org.primer.figma": {
|
|
4289
4795
|
"collection": "mode",
|
|
@@ -4305,6 +4811,10 @@
|
|
|
4305
4811
|
"isSource": true,
|
|
4306
4812
|
"$type": "color"
|
|
4307
4813
|
}
|
|
4814
|
+
},
|
|
4815
|
+
"org.primer.llm": {
|
|
4816
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4817
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4308
4818
|
}
|
|
4309
4819
|
},
|
|
4310
4820
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4317,6 +4827,7 @@
|
|
|
4317
4827
|
"key": "{borderColor.open.emphasis}",
|
|
4318
4828
|
"$value": "#238636",
|
|
4319
4829
|
"$type": "color",
|
|
4830
|
+
"$description": "Strong border for open state badges",
|
|
4320
4831
|
"$extensions": {
|
|
4321
4832
|
"org.primer.figma": {
|
|
4322
4833
|
"collection": "mode",
|
|
@@ -4335,6 +4846,10 @@
|
|
|
4335
4846
|
"dark-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
4336
4847
|
"light-protanopia-deuteranopia": "#bd561d",
|
|
4337
4848
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d"
|
|
4849
|
+
},
|
|
4850
|
+
"org.primer.llm": {
|
|
4851
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4852
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4338
4853
|
}
|
|
4339
4854
|
},
|
|
4340
4855
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4342,6 +4857,7 @@
|
|
|
4342
4857
|
"original": {
|
|
4343
4858
|
"$value": "{borderColor.success.emphasis}",
|
|
4344
4859
|
"$type": "color",
|
|
4860
|
+
"$description": "Strong border for open state badges",
|
|
4345
4861
|
"$extensions": {
|
|
4346
4862
|
"org.primer.figma": {
|
|
4347
4863
|
"collection": "mode",
|
|
@@ -4360,6 +4876,10 @@
|
|
|
4360
4876
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4361
4877
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4362
4878
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4879
|
+
},
|
|
4880
|
+
"org.primer.llm": {
|
|
4881
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4882
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4363
4883
|
}
|
|
4364
4884
|
},
|
|
4365
4885
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4372,6 +4892,7 @@
|
|
|
4372
4892
|
"key": "{borderColor.open.muted}",
|
|
4373
4893
|
"$value": "#2ea04366",
|
|
4374
4894
|
"$type": "color",
|
|
4895
|
+
"$description": "Subtle border for open state indicators",
|
|
4375
4896
|
"$extensions": {
|
|
4376
4897
|
"org.primer.figma": {
|
|
4377
4898
|
"collection": "mode",
|
|
@@ -4438,6 +4959,10 @@
|
|
|
4438
4959
|
"isSource": true,
|
|
4439
4960
|
"$type": "color"
|
|
4440
4961
|
}
|
|
4962
|
+
},
|
|
4963
|
+
"org.primer.llm": {
|
|
4964
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4965
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4441
4966
|
}
|
|
4442
4967
|
},
|
|
4443
4968
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4445,6 +4970,7 @@
|
|
|
4445
4970
|
"original": {
|
|
4446
4971
|
"$value": "{borderColor.success.muted}",
|
|
4447
4972
|
"$type": "color",
|
|
4973
|
+
"$description": "Subtle border for open state indicators",
|
|
4448
4974
|
"$extensions": {
|
|
4449
4975
|
"org.primer.figma": {
|
|
4450
4976
|
"collection": "mode",
|
|
@@ -4511,6 +5037,10 @@
|
|
|
4511
5037
|
"isSource": true,
|
|
4512
5038
|
"$type": "color"
|
|
4513
5039
|
}
|
|
5040
|
+
},
|
|
5041
|
+
"org.primer.llm": {
|
|
5042
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5043
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4514
5044
|
}
|
|
4515
5045
|
},
|
|
4516
5046
|
"key": "{borderColor.open.muted}"
|
|
@@ -4523,6 +5053,7 @@
|
|
|
4523
5053
|
"key": "{borderColor.severe.emphasis}",
|
|
4524
5054
|
"$value": "#bd561d",
|
|
4525
5055
|
"$type": "color",
|
|
5056
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4526
5057
|
"$extensions": {
|
|
4527
5058
|
"org.primer.figma": {
|
|
4528
5059
|
"collection": "mode",
|
|
@@ -4537,6 +5068,10 @@
|
|
|
4537
5068
|
"light-tritanopia": "#da3633",
|
|
4538
5069
|
"light-tritanopia-high-contrast": "#da3633",
|
|
4539
5070
|
"dark-dimmed-high-contrast": "#ffa657"
|
|
5071
|
+
},
|
|
5072
|
+
"org.primer.llm": {
|
|
5073
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5074
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4540
5075
|
}
|
|
4541
5076
|
},
|
|
4542
5077
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4544,6 +5079,7 @@
|
|
|
4544
5079
|
"original": {
|
|
4545
5080
|
"$value": "{base.color.orange.5}",
|
|
4546
5081
|
"$type": "color",
|
|
5082
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4547
5083
|
"$extensions": {
|
|
4548
5084
|
"org.primer.figma": {
|
|
4549
5085
|
"collection": "mode",
|
|
@@ -4558,6 +5094,10 @@
|
|
|
4558
5094
|
"light-tritanopia": "{base.color.red.5}",
|
|
4559
5095
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4560
5096
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5097
|
+
},
|
|
5098
|
+
"org.primer.llm": {
|
|
5099
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5100
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4561
5101
|
}
|
|
4562
5102
|
},
|
|
4563
5103
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4570,6 +5110,7 @@
|
|
|
4570
5110
|
"key": "{borderColor.severe.muted}",
|
|
4571
5111
|
"$value": "#db6d2866",
|
|
4572
5112
|
"$type": "color",
|
|
5113
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4573
5114
|
"$extensions": {
|
|
4574
5115
|
"org.primer.figma": {
|
|
4575
5116
|
"collection": "mode",
|
|
@@ -4625,6 +5166,10 @@
|
|
|
4625
5166
|
"isSource": true,
|
|
4626
5167
|
"$type": "color"
|
|
4627
5168
|
}
|
|
5169
|
+
},
|
|
5170
|
+
"org.primer.llm": {
|
|
5171
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5172
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4628
5173
|
}
|
|
4629
5174
|
},
|
|
4630
5175
|
"alpha": 0.4,
|
|
@@ -4633,6 +5178,7 @@
|
|
|
4633
5178
|
"original": {
|
|
4634
5179
|
"$value": "{base.color.orange.4}",
|
|
4635
5180
|
"$type": "color",
|
|
5181
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4636
5182
|
"$extensions": {
|
|
4637
5183
|
"org.primer.figma": {
|
|
4638
5184
|
"collection": "mode",
|
|
@@ -4688,6 +5234,10 @@
|
|
|
4688
5234
|
"isSource": true,
|
|
4689
5235
|
"$type": "color"
|
|
4690
5236
|
}
|
|
5237
|
+
},
|
|
5238
|
+
"org.primer.llm": {
|
|
5239
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5240
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4691
5241
|
}
|
|
4692
5242
|
},
|
|
4693
5243
|
"alpha": 0.4,
|
|
@@ -4701,6 +5251,7 @@
|
|
|
4701
5251
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4702
5252
|
"$value": "#bf4b8a",
|
|
4703
5253
|
"$type": "color",
|
|
5254
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4704
5255
|
"$extensions": {
|
|
4705
5256
|
"org.primer.figma": {
|
|
4706
5257
|
"collection": "mode",
|
|
@@ -4712,6 +5263,10 @@
|
|
|
4712
5263
|
},
|
|
4713
5264
|
"org.primer.overrides": {
|
|
4714
5265
|
"dark-dimmed-high-contrast": "#f778ba"
|
|
5266
|
+
},
|
|
5267
|
+
"org.primer.llm": {
|
|
5268
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5269
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4715
5270
|
}
|
|
4716
5271
|
},
|
|
4717
5272
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4719,6 +5274,7 @@
|
|
|
4719
5274
|
"original": {
|
|
4720
5275
|
"$value": "{base.color.pink.5}",
|
|
4721
5276
|
"$type": "color",
|
|
5277
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4722
5278
|
"$extensions": {
|
|
4723
5279
|
"org.primer.figma": {
|
|
4724
5280
|
"collection": "mode",
|
|
@@ -4730,6 +5286,10 @@
|
|
|
4730
5286
|
},
|
|
4731
5287
|
"org.primer.overrides": {
|
|
4732
5288
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5289
|
+
},
|
|
5290
|
+
"org.primer.llm": {
|
|
5291
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5292
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4733
5293
|
}
|
|
4734
5294
|
},
|
|
4735
5295
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4742,6 +5302,7 @@
|
|
|
4742
5302
|
"key": "{borderColor.sponsors.muted}",
|
|
4743
5303
|
"$value": "#db61a266",
|
|
4744
5304
|
"$type": "color",
|
|
5305
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4745
5306
|
"$extensions": {
|
|
4746
5307
|
"org.primer.figma": {
|
|
4747
5308
|
"collection": "mode",
|
|
@@ -4802,6 +5363,10 @@
|
|
|
4802
5363
|
"isSource": true,
|
|
4803
5364
|
"$type": "color"
|
|
4804
5365
|
}
|
|
5366
|
+
},
|
|
5367
|
+
"org.primer.llm": {
|
|
5368
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5369
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4805
5370
|
}
|
|
4806
5371
|
},
|
|
4807
5372
|
"alpha": 0.4,
|
|
@@ -4810,6 +5375,7 @@
|
|
|
4810
5375
|
"original": {
|
|
4811
5376
|
"$value": "{base.color.pink.4}",
|
|
4812
5377
|
"$type": "color",
|
|
5378
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4813
5379
|
"$extensions": {
|
|
4814
5380
|
"org.primer.figma": {
|
|
4815
5381
|
"collection": "mode",
|
|
@@ -4870,6 +5436,10 @@
|
|
|
4870
5436
|
"isSource": true,
|
|
4871
5437
|
"$type": "color"
|
|
4872
5438
|
}
|
|
5439
|
+
},
|
|
5440
|
+
"org.primer.llm": {
|
|
5441
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5442
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4873
5443
|
}
|
|
4874
5444
|
},
|
|
4875
5445
|
"alpha": 0.4,
|
|
@@ -4883,6 +5453,7 @@
|
|
|
4883
5453
|
"key": "{borderColor.success.emphasis}",
|
|
4884
5454
|
"$value": "#238636",
|
|
4885
5455
|
"$type": "color",
|
|
5456
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4886
5457
|
"$extensions": {
|
|
4887
5458
|
"org.primer.figma": {
|
|
4888
5459
|
"collection": "mode",
|
|
@@ -4902,6 +5473,10 @@
|
|
|
4902
5473
|
"light-protanopia-deuteranopia": "#1f6feb",
|
|
4903
5474
|
"light-protanopia-deuteranopia-high-contrast": "#1f6feb",
|
|
4904
5475
|
"dark-dimmed-high-contrast": "#56d364"
|
|
5476
|
+
},
|
|
5477
|
+
"org.primer.llm": {
|
|
5478
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5479
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4905
5480
|
}
|
|
4906
5481
|
},
|
|
4907
5482
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4909,6 +5484,7 @@
|
|
|
4909
5484
|
"original": {
|
|
4910
5485
|
"$value": "{base.color.green.5}",
|
|
4911
5486
|
"$type": "color",
|
|
5487
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4912
5488
|
"$extensions": {
|
|
4913
5489
|
"org.primer.figma": {
|
|
4914
5490
|
"collection": "mode",
|
|
@@ -4928,6 +5504,10 @@
|
|
|
4928
5504
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4929
5505
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4930
5506
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5507
|
+
},
|
|
5508
|
+
"org.primer.llm": {
|
|
5509
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5510
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4931
5511
|
}
|
|
4932
5512
|
},
|
|
4933
5513
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4940,6 +5520,7 @@
|
|
|
4940
5520
|
"key": "{borderColor.success.muted}",
|
|
4941
5521
|
"$value": "#2ea04366",
|
|
4942
5522
|
"$type": "color",
|
|
5523
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4943
5524
|
"$extensions": {
|
|
4944
5525
|
"org.primer.figma": {
|
|
4945
5526
|
"collection": "mode",
|
|
@@ -5027,6 +5608,10 @@
|
|
|
5027
5608
|
"isSource": true,
|
|
5028
5609
|
"$type": "color"
|
|
5029
5610
|
}
|
|
5611
|
+
},
|
|
5612
|
+
"org.primer.llm": {
|
|
5613
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5614
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5030
5615
|
}
|
|
5031
5616
|
},
|
|
5032
5617
|
"alpha": 0.4,
|
|
@@ -5035,6 +5620,7 @@
|
|
|
5035
5620
|
"original": {
|
|
5036
5621
|
"$value": "{base.color.green.4}",
|
|
5037
5622
|
"$type": "color",
|
|
5623
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5038
5624
|
"$extensions": {
|
|
5039
5625
|
"org.primer.figma": {
|
|
5040
5626
|
"collection": "mode",
|
|
@@ -5122,6 +5708,10 @@
|
|
|
5122
5708
|
"isSource": true,
|
|
5123
5709
|
"$type": "color"
|
|
5124
5710
|
}
|
|
5711
|
+
},
|
|
5712
|
+
"org.primer.llm": {
|
|
5713
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5714
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5125
5715
|
}
|
|
5126
5716
|
},
|
|
5127
5717
|
"alpha": 0.4,
|
|
@@ -5135,6 +5725,7 @@
|
|
|
5135
5725
|
"key": "{borderColor.translucent}",
|
|
5136
5726
|
"$value": "#ffffff26",
|
|
5137
5727
|
"$type": "color",
|
|
5728
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5138
5729
|
"$extensions": {
|
|
5139
5730
|
"org.primer.figma": {
|
|
5140
5731
|
"collection": "mode",
|
|
@@ -5191,6 +5782,10 @@
|
|
|
5191
5782
|
"isSource": true,
|
|
5192
5783
|
"$type": "color"
|
|
5193
5784
|
}
|
|
5785
|
+
},
|
|
5786
|
+
"org.primer.llm": {
|
|
5787
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5788
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5194
5789
|
}
|
|
5195
5790
|
},
|
|
5196
5791
|
"alpha": 0.15,
|
|
@@ -5199,6 +5794,7 @@
|
|
|
5199
5794
|
"original": {
|
|
5200
5795
|
"$value": "{base.color.neutral.13}",
|
|
5201
5796
|
"$type": "color",
|
|
5797
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5202
5798
|
"$extensions": {
|
|
5203
5799
|
"org.primer.figma": {
|
|
5204
5800
|
"collection": "mode",
|
|
@@ -5255,6 +5851,10 @@
|
|
|
5255
5851
|
"isSource": true,
|
|
5256
5852
|
"$type": "color"
|
|
5257
5853
|
}
|
|
5854
|
+
},
|
|
5855
|
+
"org.primer.llm": {
|
|
5856
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5857
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5258
5858
|
}
|
|
5259
5859
|
},
|
|
5260
5860
|
"alpha": 0.15,
|
|
@@ -5268,6 +5868,7 @@
|
|
|
5268
5868
|
"key": "{borderColor.transparent}",
|
|
5269
5869
|
"$value": "#00000000",
|
|
5270
5870
|
"$type": "color",
|
|
5871
|
+
"$description": "Fully transparent border",
|
|
5271
5872
|
"$extensions": {
|
|
5272
5873
|
"org.primer.figma": {
|
|
5273
5874
|
"collection": "mode",
|
|
@@ -5280,6 +5881,7 @@
|
|
|
5280
5881
|
"original": {
|
|
5281
5882
|
"$value": "{base.color.transparent}",
|
|
5282
5883
|
"$type": "color",
|
|
5884
|
+
"$description": "Fully transparent border",
|
|
5283
5885
|
"$extensions": {
|
|
5284
5886
|
"org.primer.figma": {
|
|
5285
5887
|
"collection": "mode",
|
|
@@ -5297,6 +5899,7 @@
|
|
|
5297
5899
|
"key": "{borderColor.upsell.emphasis}",
|
|
5298
5900
|
"$value": "#8957e5",
|
|
5299
5901
|
"$type": "color",
|
|
5902
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5300
5903
|
"$extensions": {
|
|
5301
5904
|
"org.primer.figma": {
|
|
5302
5905
|
"collection": "mode",
|
|
@@ -5305,6 +5908,10 @@
|
|
|
5305
5908
|
"codeSyntax": {
|
|
5306
5909
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5307
5910
|
}
|
|
5911
|
+
},
|
|
5912
|
+
"org.primer.llm": {
|
|
5913
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5914
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5308
5915
|
}
|
|
5309
5916
|
},
|
|
5310
5917
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5312,6 +5919,7 @@
|
|
|
5312
5919
|
"original": {
|
|
5313
5920
|
"$value": "{borderColor.done.emphasis}",
|
|
5314
5921
|
"$type": "color",
|
|
5922
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5315
5923
|
"$extensions": {
|
|
5316
5924
|
"org.primer.figma": {
|
|
5317
5925
|
"collection": "mode",
|
|
@@ -5320,6 +5928,10 @@
|
|
|
5320
5928
|
"codeSyntax": {
|
|
5321
5929
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5322
5930
|
}
|
|
5931
|
+
},
|
|
5932
|
+
"org.primer.llm": {
|
|
5933
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5934
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5323
5935
|
}
|
|
5324
5936
|
},
|
|
5325
5937
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5332,6 +5944,7 @@
|
|
|
5332
5944
|
"key": "{borderColor.upsell.muted}",
|
|
5333
5945
|
"$value": "#ab7df866",
|
|
5334
5946
|
"$type": "color",
|
|
5947
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5335
5948
|
"$extensions": {
|
|
5336
5949
|
"org.primer.figma": {
|
|
5337
5950
|
"collection": "mode",
|
|
@@ -5340,6 +5953,10 @@
|
|
|
5340
5953
|
"codeSyntax": {
|
|
5341
5954
|
"web": "var(--borderColor-upsell-muted)"
|
|
5342
5955
|
}
|
|
5956
|
+
},
|
|
5957
|
+
"org.primer.llm": {
|
|
5958
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5959
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5343
5960
|
}
|
|
5344
5961
|
},
|
|
5345
5962
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5347,6 +5964,7 @@
|
|
|
5347
5964
|
"original": {
|
|
5348
5965
|
"$value": "{borderColor.done.muted}",
|
|
5349
5966
|
"$type": "color",
|
|
5967
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5350
5968
|
"$extensions": {
|
|
5351
5969
|
"org.primer.figma": {
|
|
5352
5970
|
"collection": "mode",
|
|
@@ -5355,6 +5973,10 @@
|
|
|
5355
5973
|
"codeSyntax": {
|
|
5356
5974
|
"web": "var(--borderColor-upsell-muted)"
|
|
5357
5975
|
}
|
|
5976
|
+
},
|
|
5977
|
+
"org.primer.llm": {
|
|
5978
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5979
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5358
5980
|
}
|
|
5359
5981
|
},
|
|
5360
5982
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36501,6 +37123,7 @@
|
|
|
36501
37123
|
"key": "{fgColor.accent}",
|
|
36502
37124
|
"$value": "#4493f8",
|
|
36503
37125
|
"$type": "color",
|
|
37126
|
+
"$description": "Accent text for links and interactive elements",
|
|
36504
37127
|
"$extensions": {
|
|
36505
37128
|
"org.primer.figma": {
|
|
36506
37129
|
"collection": "mode",
|
|
@@ -36520,6 +37143,10 @@
|
|
|
36520
37143
|
"light-high-contrast": "#1158c7",
|
|
36521
37144
|
"light-tritanopia-high-contrast": "#1158c7",
|
|
36522
37145
|
"light-protanopia-deuteranopia-high-contrast": "#1158c7"
|
|
37146
|
+
},
|
|
37147
|
+
"org.primer.llm": {
|
|
37148
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37149
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36523
37150
|
}
|
|
36524
37151
|
},
|
|
36525
37152
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36527,6 +37154,7 @@
|
|
|
36527
37154
|
"original": {
|
|
36528
37155
|
"$value": "#4493F8",
|
|
36529
37156
|
"$type": "color",
|
|
37157
|
+
"$description": "Accent text for links and interactive elements",
|
|
36530
37158
|
"$extensions": {
|
|
36531
37159
|
"org.primer.figma": {
|
|
36532
37160
|
"collection": "mode",
|
|
@@ -36546,6 +37174,10 @@
|
|
|
36546
37174
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36547
37175
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36548
37176
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37177
|
+
},
|
|
37178
|
+
"org.primer.llm": {
|
|
37179
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37180
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36549
37181
|
}
|
|
36550
37182
|
},
|
|
36551
37183
|
"key": "{fgColor.accent}"
|
|
@@ -36558,6 +37190,7 @@
|
|
|
36558
37190
|
"key": "{fgColor.attention}",
|
|
36559
37191
|
"$value": "#d29922",
|
|
36560
37192
|
"$type": "color",
|
|
37193
|
+
"$description": "Attention text for warnings and caution states",
|
|
36561
37194
|
"$extensions": {
|
|
36562
37195
|
"org.primer.figma": {
|
|
36563
37196
|
"collection": "mode",
|
|
@@ -36573,6 +37206,10 @@
|
|
|
36573
37206
|
"light-protanopia-deuteranopia-high-contrast": "#845306",
|
|
36574
37207
|
"light-tritanopia-high-contrast": "#845306",
|
|
36575
37208
|
"dark-dimmed-high-contrast": "#f2cc60"
|
|
37209
|
+
},
|
|
37210
|
+
"org.primer.llm": {
|
|
37211
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37212
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36576
37213
|
}
|
|
36577
37214
|
},
|
|
36578
37215
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36580,6 +37217,7 @@
|
|
|
36580
37217
|
"original": {
|
|
36581
37218
|
"$value": "{base.color.yellow.3}",
|
|
36582
37219
|
"$type": "color",
|
|
37220
|
+
"$description": "Attention text for warnings and caution states",
|
|
36583
37221
|
"$extensions": {
|
|
36584
37222
|
"org.primer.figma": {
|
|
36585
37223
|
"collection": "mode",
|
|
@@ -36595,6 +37233,10 @@
|
|
|
36595
37233
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36596
37234
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36597
37235
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37236
|
+
},
|
|
37237
|
+
"org.primer.llm": {
|
|
37238
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37239
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36598
37240
|
}
|
|
36599
37241
|
},
|
|
36600
37242
|
"key": "{fgColor.attention}"
|
|
@@ -36607,6 +37249,7 @@
|
|
|
36607
37249
|
"key": "{fgColor.black}",
|
|
36608
37250
|
"$value": "#010409",
|
|
36609
37251
|
"$type": "color",
|
|
37252
|
+
"$description": "Pure black text",
|
|
36610
37253
|
"$extensions": {
|
|
36611
37254
|
"org.primer.figma": {
|
|
36612
37255
|
"collection": "mode",
|
|
@@ -36615,6 +37258,10 @@
|
|
|
36615
37258
|
},
|
|
36616
37259
|
"org.primer.overrides": {
|
|
36617
37260
|
"dark": "#010409"
|
|
37261
|
+
},
|
|
37262
|
+
"org.primer.llm": {
|
|
37263
|
+
"doNotUse": true,
|
|
37264
|
+
"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."
|
|
36618
37265
|
}
|
|
36619
37266
|
},
|
|
36620
37267
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36622,6 +37269,7 @@
|
|
|
36622
37269
|
"original": {
|
|
36623
37270
|
"$value": "{base.color.neutral.0}",
|
|
36624
37271
|
"$type": "color",
|
|
37272
|
+
"$description": "Pure black text",
|
|
36625
37273
|
"$extensions": {
|
|
36626
37274
|
"org.primer.figma": {
|
|
36627
37275
|
"collection": "mode",
|
|
@@ -36630,6 +37278,10 @@
|
|
|
36630
37278
|
},
|
|
36631
37279
|
"org.primer.overrides": {
|
|
36632
37280
|
"dark": "{base.color.neutral.0}"
|
|
37281
|
+
},
|
|
37282
|
+
"org.primer.llm": {
|
|
37283
|
+
"doNotUse": true,
|
|
37284
|
+
"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."
|
|
36633
37285
|
}
|
|
36634
37286
|
},
|
|
36635
37287
|
"key": "{fgColor.black}"
|
|
@@ -36642,6 +37294,7 @@
|
|
|
36642
37294
|
"key": "{fgColor.closed}",
|
|
36643
37295
|
"$value": "#f85149",
|
|
36644
37296
|
"$type": "color",
|
|
37297
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36645
37298
|
"$extensions": {
|
|
36646
37299
|
"org.primer.figma": {
|
|
36647
37300
|
"collection": "mode",
|
|
@@ -36660,6 +37313,10 @@
|
|
|
36660
37313
|
"dark-tritanopia-high-contrast": "#9198a1",
|
|
36661
37314
|
"light-tritanopia": "#9198a1",
|
|
36662
37315
|
"light-tritanopia-high-contrast": "#9198a1"
|
|
37316
|
+
},
|
|
37317
|
+
"org.primer.llm": {
|
|
37318
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37319
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36663
37320
|
}
|
|
36664
37321
|
},
|
|
36665
37322
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36667,6 +37324,7 @@
|
|
|
36667
37324
|
"original": {
|
|
36668
37325
|
"$value": "{fgColor.danger}",
|
|
36669
37326
|
"$type": "color",
|
|
37327
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36670
37328
|
"$extensions": {
|
|
36671
37329
|
"org.primer.figma": {
|
|
36672
37330
|
"collection": "mode",
|
|
@@ -36685,6 +37343,10 @@
|
|
|
36685
37343
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36686
37344
|
"light-tritanopia": "{fgColor.muted}",
|
|
36687
37345
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37346
|
+
},
|
|
37347
|
+
"org.primer.llm": {
|
|
37348
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37349
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36688
37350
|
}
|
|
36689
37351
|
},
|
|
36690
37352
|
"key": "{fgColor.closed}"
|
|
@@ -36697,6 +37359,7 @@
|
|
|
36697
37359
|
"key": "{fgColor.danger}",
|
|
36698
37360
|
"$value": "#f85149",
|
|
36699
37361
|
"$type": "color",
|
|
37362
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36700
37363
|
"$extensions": {
|
|
36701
37364
|
"org.primer.figma": {
|
|
36702
37365
|
"collection": "mode",
|
|
@@ -36717,6 +37380,10 @@
|
|
|
36717
37380
|
"dark-tritanopia-high-contrast": "#ff7b72",
|
|
36718
37381
|
"light-high-contrast": "#b62324",
|
|
36719
37382
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37383
|
+
},
|
|
37384
|
+
"org.primer.llm": {
|
|
37385
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37386
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36720
37387
|
}
|
|
36721
37388
|
},
|
|
36722
37389
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36724,6 +37391,7 @@
|
|
|
36724
37391
|
"original": {
|
|
36725
37392
|
"$value": "{base.color.red.4}",
|
|
36726
37393
|
"$type": "color",
|
|
37394
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36727
37395
|
"$extensions": {
|
|
36728
37396
|
"org.primer.figma": {
|
|
36729
37397
|
"collection": "mode",
|
|
@@ -36744,6 +37412,10 @@
|
|
|
36744
37412
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36745
37413
|
"light-high-contrast": "{base.color.red.6}",
|
|
36746
37414
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37415
|
+
},
|
|
37416
|
+
"org.primer.llm": {
|
|
37417
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37418
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36747
37419
|
}
|
|
36748
37420
|
},
|
|
36749
37421
|
"key": "{fgColor.danger}"
|
|
@@ -36756,6 +37428,7 @@
|
|
|
36756
37428
|
"key": "{fgColor.default}",
|
|
36757
37429
|
"$value": "#f0f6fc",
|
|
36758
37430
|
"$type": "color",
|
|
37431
|
+
"$description": "Default text color for primary content and headings",
|
|
36759
37432
|
"$extensions": {
|
|
36760
37433
|
"org.primer.figma": {
|
|
36761
37434
|
"collection": "mode",
|
|
@@ -36770,8 +37443,12 @@
|
|
|
36770
37443
|
"dark-high-contrast": "#ffffff",
|
|
36771
37444
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
36772
37445
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff",
|
|
36773
|
-
"dark-dimmed": "#
|
|
37446
|
+
"dark-dimmed": "#f0f6fc",
|
|
36774
37447
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37448
|
+
},
|
|
37449
|
+
"org.primer.llm": {
|
|
37450
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37451
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36775
37452
|
}
|
|
36776
37453
|
},
|
|
36777
37454
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36779,6 +37456,7 @@
|
|
|
36779
37456
|
"original": {
|
|
36780
37457
|
"$value": "{base.color.neutral.12}",
|
|
36781
37458
|
"$type": "color",
|
|
37459
|
+
"$description": "Default text color for primary content and headings",
|
|
36782
37460
|
"$extensions": {
|
|
36783
37461
|
"org.primer.figma": {
|
|
36784
37462
|
"collection": "mode",
|
|
@@ -36793,8 +37471,12 @@
|
|
|
36793
37471
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36794
37472
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36795
37473
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36796
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37474
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36797
37475
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37476
|
+
},
|
|
37477
|
+
"org.primer.llm": {
|
|
37478
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37479
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36798
37480
|
}
|
|
36799
37481
|
},
|
|
36800
37482
|
"key": "{fgColor.default}"
|
|
@@ -36807,6 +37489,7 @@
|
|
|
36807
37489
|
"key": "{fgColor.disabled}",
|
|
36808
37490
|
"$value": "#656c76",
|
|
36809
37491
|
"$type": "color",
|
|
37492
|
+
"$description": "Text color for disabled interactive elements",
|
|
36810
37493
|
"$extensions": {
|
|
36811
37494
|
"org.primer.figma": {
|
|
36812
37495
|
"collection": "mode",
|
|
@@ -36828,6 +37511,10 @@
|
|
|
36828
37511
|
"dark-high-contrast": "#656c76",
|
|
36829
37512
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36830
37513
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37514
|
+
},
|
|
37515
|
+
"org.primer.llm": {
|
|
37516
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37517
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36831
37518
|
}
|
|
36832
37519
|
},
|
|
36833
37520
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36835,6 +37522,7 @@
|
|
|
36835
37522
|
"original": {
|
|
36836
37523
|
"$value": "{base.color.neutral.8}",
|
|
36837
37524
|
"$type": "color",
|
|
37525
|
+
"$description": "Text color for disabled interactive elements",
|
|
36838
37526
|
"$extensions": {
|
|
36839
37527
|
"org.primer.figma": {
|
|
36840
37528
|
"collection": "mode",
|
|
@@ -36856,6 +37544,10 @@
|
|
|
36856
37544
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36857
37545
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36858
37546
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37547
|
+
},
|
|
37548
|
+
"org.primer.llm": {
|
|
37549
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37550
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36859
37551
|
}
|
|
36860
37552
|
},
|
|
36861
37553
|
"key": "{fgColor.disabled}"
|
|
@@ -36868,6 +37560,7 @@
|
|
|
36868
37560
|
"key": "{fgColor.done}",
|
|
36869
37561
|
"$value": "#ab7df8",
|
|
36870
37562
|
"$type": "color",
|
|
37563
|
+
"$description": "Text color for completed/done state indicators",
|
|
36871
37564
|
"$extensions": {
|
|
36872
37565
|
"org.primer.figma": {
|
|
36873
37566
|
"collection": "mode",
|
|
@@ -36886,6 +37579,10 @@
|
|
|
36886
37579
|
"light-high-contrast": "#6e40c9",
|
|
36887
37580
|
"light-protanopia-deuteranopia-high-contrast": "#6e40c9",
|
|
36888
37581
|
"light-tritanopia-high-contrast": "#6e40c9"
|
|
37582
|
+
},
|
|
37583
|
+
"org.primer.llm": {
|
|
37584
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37585
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36889
37586
|
}
|
|
36890
37587
|
},
|
|
36891
37588
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36893,6 +37590,7 @@
|
|
|
36893
37590
|
"original": {
|
|
36894
37591
|
"$value": "{base.color.purple.4}",
|
|
36895
37592
|
"$type": "color",
|
|
37593
|
+
"$description": "Text color for completed/done state indicators",
|
|
36896
37594
|
"$extensions": {
|
|
36897
37595
|
"org.primer.figma": {
|
|
36898
37596
|
"collection": "mode",
|
|
@@ -36911,6 +37609,10 @@
|
|
|
36911
37609
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36912
37610
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36913
37611
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37612
|
+
},
|
|
37613
|
+
"org.primer.llm": {
|
|
37614
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37615
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36914
37616
|
}
|
|
36915
37617
|
},
|
|
36916
37618
|
"key": "{fgColor.done}"
|
|
@@ -36923,6 +37625,7 @@
|
|
|
36923
37625
|
"key": "{fgColor.draft}",
|
|
36924
37626
|
"$value": "#9198a1",
|
|
36925
37627
|
"$type": "color",
|
|
37628
|
+
"$description": "Text color for draft state indicators",
|
|
36926
37629
|
"$extensions": {
|
|
36927
37630
|
"org.primer.figma": {
|
|
36928
37631
|
"collection": "mode",
|
|
@@ -36931,6 +37634,10 @@
|
|
|
36931
37634
|
"codeSyntax": {
|
|
36932
37635
|
"web": "var(--fgColor-draft)"
|
|
36933
37636
|
}
|
|
37637
|
+
},
|
|
37638
|
+
"org.primer.llm": {
|
|
37639
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37640
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36934
37641
|
}
|
|
36935
37642
|
},
|
|
36936
37643
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36938,6 +37645,7 @@
|
|
|
36938
37645
|
"original": {
|
|
36939
37646
|
"$value": "{fgColor.neutral}",
|
|
36940
37647
|
"$type": "color",
|
|
37648
|
+
"$description": "Text color for draft state indicators",
|
|
36941
37649
|
"$extensions": {
|
|
36942
37650
|
"org.primer.figma": {
|
|
36943
37651
|
"collection": "mode",
|
|
@@ -36946,6 +37654,10 @@
|
|
|
36946
37654
|
"codeSyntax": {
|
|
36947
37655
|
"web": "var(--fgColor-draft)"
|
|
36948
37656
|
}
|
|
37657
|
+
},
|
|
37658
|
+
"org.primer.llm": {
|
|
37659
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37660
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36949
37661
|
}
|
|
36950
37662
|
},
|
|
36951
37663
|
"key": "{fgColor.draft}"
|
|
@@ -36958,6 +37670,7 @@
|
|
|
36958
37670
|
"key": "{fgColor.link}",
|
|
36959
37671
|
"$value": "#4493f8",
|
|
36960
37672
|
"$type": "color",
|
|
37673
|
+
"$description": "Text color for hyperlinks",
|
|
36961
37674
|
"$extensions": {
|
|
36962
37675
|
"org.primer.figma": {
|
|
36963
37676
|
"collection": "mode",
|
|
@@ -36966,6 +37679,10 @@
|
|
|
36966
37679
|
"codeSyntax": {
|
|
36967
37680
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36968
37681
|
}
|
|
37682
|
+
},
|
|
37683
|
+
"org.primer.llm": {
|
|
37684
|
+
"usage": ["link-text", "hyperlink"],
|
|
37685
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36969
37686
|
}
|
|
36970
37687
|
},
|
|
36971
37688
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36973,6 +37690,7 @@
|
|
|
36973
37690
|
"original": {
|
|
36974
37691
|
"$value": "{fgColor.accent}",
|
|
36975
37692
|
"$type": "color",
|
|
37693
|
+
"$description": "Text color for hyperlinks",
|
|
36976
37694
|
"$extensions": {
|
|
36977
37695
|
"org.primer.figma": {
|
|
36978
37696
|
"collection": "mode",
|
|
@@ -36981,6 +37699,10 @@
|
|
|
36981
37699
|
"codeSyntax": {
|
|
36982
37700
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36983
37701
|
}
|
|
37702
|
+
},
|
|
37703
|
+
"org.primer.llm": {
|
|
37704
|
+
"usage": ["link-text", "hyperlink"],
|
|
37705
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36984
37706
|
}
|
|
36985
37707
|
},
|
|
36986
37708
|
"key": "{fgColor.link}"
|
|
@@ -36993,6 +37715,7 @@
|
|
|
36993
37715
|
"key": "{fgColor.muted}",
|
|
36994
37716
|
"$value": "#9198a1",
|
|
36995
37717
|
"$type": "color",
|
|
37718
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36996
37719
|
"$extensions": {
|
|
36997
37720
|
"org.primer.figma": {
|
|
36998
37721
|
"collection": "mode",
|
|
@@ -37010,6 +37733,10 @@
|
|
|
37010
37733
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37011
37734
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37012
37735
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37736
|
+
},
|
|
37737
|
+
"org.primer.llm": {
|
|
37738
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37739
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37013
37740
|
}
|
|
37014
37741
|
},
|
|
37015
37742
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37017,6 +37744,7 @@
|
|
|
37017
37744
|
"original": {
|
|
37018
37745
|
"$value": "{base.color.neutral.9}",
|
|
37019
37746
|
"$type": "color",
|
|
37747
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37020
37748
|
"$extensions": {
|
|
37021
37749
|
"org.primer.figma": {
|
|
37022
37750
|
"collection": "mode",
|
|
@@ -37034,6 +37762,10 @@
|
|
|
37034
37762
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37035
37763
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37036
37764
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37765
|
+
},
|
|
37766
|
+
"org.primer.llm": {
|
|
37767
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37768
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37037
37769
|
}
|
|
37038
37770
|
},
|
|
37039
37771
|
"key": "{fgColor.muted}"
|
|
@@ -37046,6 +37778,7 @@
|
|
|
37046
37778
|
"key": "{fgColor.neutral}",
|
|
37047
37779
|
"$value": "#9198a1",
|
|
37048
37780
|
"$type": "color",
|
|
37781
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37049
37782
|
"$extensions": {
|
|
37050
37783
|
"org.primer.figma": {
|
|
37051
37784
|
"collection": "mode",
|
|
@@ -37060,6 +37793,10 @@
|
|
|
37060
37793
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37061
37794
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37062
37795
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37796
|
+
},
|
|
37797
|
+
"org.primer.llm": {
|
|
37798
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37799
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37063
37800
|
}
|
|
37064
37801
|
},
|
|
37065
37802
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37067,6 +37804,7 @@
|
|
|
37067
37804
|
"original": {
|
|
37068
37805
|
"$value": "{base.color.neutral.9}",
|
|
37069
37806
|
"$type": "color",
|
|
37807
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37070
37808
|
"$extensions": {
|
|
37071
37809
|
"org.primer.figma": {
|
|
37072
37810
|
"collection": "mode",
|
|
@@ -37081,6 +37819,10 @@
|
|
|
37081
37819
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37082
37820
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37083
37821
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37822
|
+
},
|
|
37823
|
+
"org.primer.llm": {
|
|
37824
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37825
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37084
37826
|
}
|
|
37085
37827
|
},
|
|
37086
37828
|
"key": "{fgColor.neutral}"
|
|
@@ -37093,6 +37835,7 @@
|
|
|
37093
37835
|
"key": "{fgColor.onEmphasis}",
|
|
37094
37836
|
"$value": "#ffffff",
|
|
37095
37837
|
"$type": "color",
|
|
37838
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37096
37839
|
"$extensions": {
|
|
37097
37840
|
"org.primer.figma": {
|
|
37098
37841
|
"collection": "mode",
|
|
@@ -37106,6 +37849,10 @@
|
|
|
37106
37849
|
"dark": "#ffffff",
|
|
37107
37850
|
"dark-dimmed": "#f0f6fc",
|
|
37108
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."
|
|
37109
37856
|
}
|
|
37110
37857
|
},
|
|
37111
37858
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37113,6 +37860,7 @@
|
|
|
37113
37860
|
"original": {
|
|
37114
37861
|
"$value": "{base.color.neutral.13}",
|
|
37115
37862
|
"$type": "color",
|
|
37863
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37116
37864
|
"$extensions": {
|
|
37117
37865
|
"org.primer.figma": {
|
|
37118
37866
|
"collection": "mode",
|
|
@@ -37126,6 +37874,10 @@
|
|
|
37126
37874
|
"dark": "{base.color.neutral.13}",
|
|
37127
37875
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37128
37876
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37877
|
+
},
|
|
37878
|
+
"org.primer.llm": {
|
|
37879
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37880
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37129
37881
|
}
|
|
37130
37882
|
},
|
|
37131
37883
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37138,11 +37890,16 @@
|
|
|
37138
37890
|
"key": "{fgColor.onInverse}",
|
|
37139
37891
|
"$value": "#010409",
|
|
37140
37892
|
"$type": "color",
|
|
37893
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37141
37894
|
"$extensions": {
|
|
37142
37895
|
"org.primer.figma": {
|
|
37143
37896
|
"collection": "mode",
|
|
37144
37897
|
"group": "semantic",
|
|
37145
37898
|
"scopes": ["fgColor"]
|
|
37899
|
+
},
|
|
37900
|
+
"org.primer.llm": {
|
|
37901
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37902
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37146
37903
|
}
|
|
37147
37904
|
},
|
|
37148
37905
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37150,11 +37907,16 @@
|
|
|
37150
37907
|
"original": {
|
|
37151
37908
|
"$value": "{base.color.neutral.0}",
|
|
37152
37909
|
"$type": "color",
|
|
37910
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37153
37911
|
"$extensions": {
|
|
37154
37912
|
"org.primer.figma": {
|
|
37155
37913
|
"collection": "mode",
|
|
37156
37914
|
"group": "semantic",
|
|
37157
37915
|
"scopes": ["fgColor"]
|
|
37916
|
+
},
|
|
37917
|
+
"org.primer.llm": {
|
|
37918
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37919
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37158
37920
|
}
|
|
37159
37921
|
},
|
|
37160
37922
|
"key": "{fgColor.onInverse}"
|
|
@@ -37167,6 +37929,7 @@
|
|
|
37167
37929
|
"key": "{fgColor.open}",
|
|
37168
37930
|
"$value": "#3fb950",
|
|
37169
37931
|
"$type": "color",
|
|
37932
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37170
37933
|
"$extensions": {
|
|
37171
37934
|
"org.primer.figma": {
|
|
37172
37935
|
"collection": "mode",
|
|
@@ -37185,6 +37948,10 @@
|
|
|
37185
37948
|
"dark-tritanopia-high-contrast": "#ffa198",
|
|
37186
37949
|
"light-tritanopia": "#da3633",
|
|
37187
37950
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37951
|
+
},
|
|
37952
|
+
"org.primer.llm": {
|
|
37953
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37954
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37188
37955
|
}
|
|
37189
37956
|
},
|
|
37190
37957
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37192,6 +37959,7 @@
|
|
|
37192
37959
|
"original": {
|
|
37193
37960
|
"$value": "{fgColor.success}",
|
|
37194
37961
|
"$type": "color",
|
|
37962
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37195
37963
|
"$extensions": {
|
|
37196
37964
|
"org.primer.figma": {
|
|
37197
37965
|
"collection": "mode",
|
|
@@ -37210,6 +37978,10 @@
|
|
|
37210
37978
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37211
37979
|
"light-tritanopia": "{base.color.red.5}",
|
|
37212
37980
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37981
|
+
},
|
|
37982
|
+
"org.primer.llm": {
|
|
37983
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37984
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37213
37985
|
}
|
|
37214
37986
|
},
|
|
37215
37987
|
"key": "{fgColor.open}"
|
|
@@ -37222,6 +37994,7 @@
|
|
|
37222
37994
|
"key": "{fgColor.severe}",
|
|
37223
37995
|
"$value": "#db6d28",
|
|
37224
37996
|
"$type": "color",
|
|
37997
|
+
"$description": "Severe text for high-priority warnings",
|
|
37225
37998
|
"$extensions": {
|
|
37226
37999
|
"org.primer.figma": {
|
|
37227
38000
|
"collection": "mode",
|
|
@@ -37242,6 +38015,10 @@
|
|
|
37242
38015
|
"light-tritanopia": "#da3633",
|
|
37243
38016
|
"light-tritanopia-high-contrast": "#b62324",
|
|
37244
38017
|
"light-protanopia-deuteranopia-high-contrast": "#9b4215"
|
|
38018
|
+
},
|
|
38019
|
+
"org.primer.llm": {
|
|
38020
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38021
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37245
38022
|
}
|
|
37246
38023
|
},
|
|
37247
38024
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37249,6 +38026,7 @@
|
|
|
37249
38026
|
"original": {
|
|
37250
38027
|
"$value": "{base.color.orange.4}",
|
|
37251
38028
|
"$type": "color",
|
|
38029
|
+
"$description": "Severe text for high-priority warnings",
|
|
37252
38030
|
"$extensions": {
|
|
37253
38031
|
"org.primer.figma": {
|
|
37254
38032
|
"collection": "mode",
|
|
@@ -37269,6 +38047,10 @@
|
|
|
37269
38047
|
"light-tritanopia": "{base.color.red.5}",
|
|
37270
38048
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37271
38049
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38050
|
+
},
|
|
38051
|
+
"org.primer.llm": {
|
|
38052
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38053
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37272
38054
|
}
|
|
37273
38055
|
},
|
|
37274
38056
|
"key": "{fgColor.severe}"
|
|
@@ -37281,6 +38063,7 @@
|
|
|
37281
38063
|
"key": "{fgColor.sponsors}",
|
|
37282
38064
|
"$value": "#db61a2",
|
|
37283
38065
|
"$type": "color",
|
|
38066
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37284
38067
|
"$extensions": {
|
|
37285
38068
|
"org.primer.figma": {
|
|
37286
38069
|
"collection": "mode",
|
|
@@ -37299,6 +38082,10 @@
|
|
|
37299
38082
|
"light-high-contrast": "#9e3670",
|
|
37300
38083
|
"light-protanopia-deuteranopia-high-contrast": "#9e3670",
|
|
37301
38084
|
"light-tritanopia-high-contrast": "#9e3670"
|
|
38085
|
+
},
|
|
38086
|
+
"org.primer.llm": {
|
|
38087
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38088
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37302
38089
|
}
|
|
37303
38090
|
},
|
|
37304
38091
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37306,6 +38093,7 @@
|
|
|
37306
38093
|
"original": {
|
|
37307
38094
|
"$value": "{base.color.pink.4}",
|
|
37308
38095
|
"$type": "color",
|
|
38096
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37309
38097
|
"$extensions": {
|
|
37310
38098
|
"org.primer.figma": {
|
|
37311
38099
|
"collection": "mode",
|
|
@@ -37324,6 +38112,10 @@
|
|
|
37324
38112
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37325
38113
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37326
38114
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38115
|
+
},
|
|
38116
|
+
"org.primer.llm": {
|
|
38117
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38118
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37327
38119
|
}
|
|
37328
38120
|
},
|
|
37329
38121
|
"key": "{fgColor.sponsors}"
|
|
@@ -37336,6 +38128,7 @@
|
|
|
37336
38128
|
"key": "{fgColor.success}",
|
|
37337
38129
|
"$value": "#3fb950",
|
|
37338
38130
|
"$type": "color",
|
|
38131
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37339
38132
|
"$extensions": {
|
|
37340
38133
|
"org.primer.figma": {
|
|
37341
38134
|
"collection": "mode",
|
|
@@ -37358,6 +38151,10 @@
|
|
|
37358
38151
|
"dark-tritanopia-high-contrast": "#79c0ff",
|
|
37359
38152
|
"light-tritanopia": "#1f6feb",
|
|
37360
38153
|
"light-tritanopia-high-contrast": "#1158c7"
|
|
38154
|
+
},
|
|
38155
|
+
"org.primer.llm": {
|
|
38156
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38157
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37361
38158
|
}
|
|
37362
38159
|
},
|
|
37363
38160
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37365,6 +38162,7 @@
|
|
|
37365
38162
|
"original": {
|
|
37366
38163
|
"$value": "{base.color.green.3}",
|
|
37367
38164
|
"$type": "color",
|
|
38165
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37368
38166
|
"$extensions": {
|
|
37369
38167
|
"org.primer.figma": {
|
|
37370
38168
|
"collection": "mode",
|
|
@@ -37387,6 +38185,10 @@
|
|
|
37387
38185
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37388
38186
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37389
38187
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38188
|
+
},
|
|
38189
|
+
"org.primer.llm": {
|
|
38190
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38191
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37390
38192
|
}
|
|
37391
38193
|
},
|
|
37392
38194
|
"key": "{fgColor.success}"
|
|
@@ -37399,6 +38201,7 @@
|
|
|
37399
38201
|
"key": "{fgColor.upsell}",
|
|
37400
38202
|
"$value": "#ab7df8",
|
|
37401
38203
|
"$type": "color",
|
|
38204
|
+
"$description": "Text color for upsell and promotional content",
|
|
37402
38205
|
"$extensions": {
|
|
37403
38206
|
"org.primer.figma": {
|
|
37404
38207
|
"collection": "mode",
|
|
@@ -37407,6 +38210,10 @@
|
|
|
37407
38210
|
"codeSyntax": {
|
|
37408
38211
|
"web": "var(--fgColor-upsell)"
|
|
37409
38212
|
}
|
|
38213
|
+
},
|
|
38214
|
+
"org.primer.llm": {
|
|
38215
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38216
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37410
38217
|
}
|
|
37411
38218
|
},
|
|
37412
38219
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37414,6 +38221,7 @@
|
|
|
37414
38221
|
"original": {
|
|
37415
38222
|
"$value": "{fgColor.done}",
|
|
37416
38223
|
"$type": "color",
|
|
38224
|
+
"$description": "Text color for upsell and promotional content",
|
|
37417
38225
|
"$extensions": {
|
|
37418
38226
|
"org.primer.figma": {
|
|
37419
38227
|
"collection": "mode",
|
|
@@ -37422,6 +38230,10 @@
|
|
|
37422
38230
|
"codeSyntax": {
|
|
37423
38231
|
"web": "var(--fgColor-upsell)"
|
|
37424
38232
|
}
|
|
38233
|
+
},
|
|
38234
|
+
"org.primer.llm": {
|
|
38235
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38236
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37425
38237
|
}
|
|
37426
38238
|
},
|
|
37427
38239
|
"key": "{fgColor.upsell}"
|
|
@@ -37434,6 +38246,7 @@
|
|
|
37434
38246
|
"key": "{fgColor.white}",
|
|
37435
38247
|
"$value": "#ffffff",
|
|
37436
38248
|
"$type": "color",
|
|
38249
|
+
"$description": "Pure white text",
|
|
37437
38250
|
"$extensions": {
|
|
37438
38251
|
"org.primer.figma": {
|
|
37439
38252
|
"collection": "mode",
|
|
@@ -37442,6 +38255,10 @@
|
|
|
37442
38255
|
},
|
|
37443
38256
|
"org.primer.overrides": {
|
|
37444
38257
|
"dark": "#ffffff"
|
|
38258
|
+
},
|
|
38259
|
+
"org.primer.llm": {
|
|
38260
|
+
"doNotUse": true,
|
|
38261
|
+
"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."
|
|
37445
38262
|
}
|
|
37446
38263
|
},
|
|
37447
38264
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37449,6 +38266,7 @@
|
|
|
37449
38266
|
"original": {
|
|
37450
38267
|
"$value": "{base.color.neutral.13}",
|
|
37451
38268
|
"$type": "color",
|
|
38269
|
+
"$description": "Pure white text",
|
|
37452
38270
|
"$extensions": {
|
|
37453
38271
|
"org.primer.figma": {
|
|
37454
38272
|
"collection": "mode",
|
|
@@ -37457,6 +38275,10 @@
|
|
|
37457
38275
|
},
|
|
37458
38276
|
"org.primer.overrides": {
|
|
37459
38277
|
"dark": "{base.color.neutral.13}"
|
|
38278
|
+
},
|
|
38279
|
+
"org.primer.llm": {
|
|
38280
|
+
"doNotUse": true,
|
|
38281
|
+
"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."
|
|
37460
38282
|
}
|
|
37461
38283
|
},
|
|
37462
38284
|
"key": "{fgColor.white}"
|
|
@@ -37469,6 +38291,13 @@
|
|
|
37469
38291
|
"key": "{focus.outline}",
|
|
37470
38292
|
"$value": "2px solid #1f6feb",
|
|
37471
38293
|
"$type": "border",
|
|
38294
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38295
|
+
"$extensions": {
|
|
38296
|
+
"org.primer.llm": {
|
|
38297
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38298
|
+
"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."
|
|
38299
|
+
}
|
|
38300
|
+
},
|
|
37472
38301
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37473
38302
|
"isSource": true,
|
|
37474
38303
|
"original": {
|
|
@@ -37478,6 +38307,13 @@
|
|
|
37478
38307
|
"width": "2px"
|
|
37479
38308
|
},
|
|
37480
38309
|
"$type": "border",
|
|
38310
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38311
|
+
"$extensions": {
|
|
38312
|
+
"org.primer.llm": {
|
|
38313
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38314
|
+
"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."
|
|
38315
|
+
}
|
|
38316
|
+
},
|
|
37481
38317
|
"key": "{focus.outline}"
|
|
37482
38318
|
},
|
|
37483
38319
|
"name": "focus-outline",
|
|
@@ -37488,11 +38324,16 @@
|
|
|
37488
38324
|
"key": "{focus.outlineColor}",
|
|
37489
38325
|
"$value": "#1f6feb",
|
|
37490
38326
|
"$type": "color",
|
|
38327
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37491
38328
|
"$extensions": {
|
|
37492
38329
|
"org.primer.figma": {
|
|
37493
38330
|
"collection": "mode",
|
|
37494
38331
|
"group": "component (internal)",
|
|
37495
38332
|
"scopes": ["borderColor", "effectColor"]
|
|
38333
|
+
},
|
|
38334
|
+
"org.primer.llm": {
|
|
38335
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38336
|
+
"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."
|
|
37496
38337
|
}
|
|
37497
38338
|
},
|
|
37498
38339
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37500,11 +38341,16 @@
|
|
|
37500
38341
|
"original": {
|
|
37501
38342
|
"$value": "{borderColor.accent.emphasis}",
|
|
37502
38343
|
"$type": "color",
|
|
38344
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37503
38345
|
"$extensions": {
|
|
37504
38346
|
"org.primer.figma": {
|
|
37505
38347
|
"collection": "mode",
|
|
37506
38348
|
"group": "component (internal)",
|
|
37507
38349
|
"scopes": ["borderColor", "effectColor"]
|
|
38350
|
+
},
|
|
38351
|
+
"org.primer.llm": {
|
|
38352
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38353
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37508
38354
|
}
|
|
37509
38355
|
},
|
|
37510
38356
|
"key": "{focus.outlineColor}"
|
|
@@ -46560,6 +47406,7 @@
|
|
|
46560
47406
|
"key": "{selection.bgColor}",
|
|
46561
47407
|
"$value": "#1f6febb3",
|
|
46562
47408
|
"$type": "color",
|
|
47409
|
+
"$description": "Background color for text selection highlights",
|
|
46563
47410
|
"$extensions": {
|
|
46564
47411
|
"org.primer.figma": {
|
|
46565
47412
|
"collection": "mode",
|
|
@@ -46574,6 +47421,10 @@
|
|
|
46574
47421
|
"isSource": true,
|
|
46575
47422
|
"$type": "color"
|
|
46576
47423
|
}
|
|
47424
|
+
},
|
|
47425
|
+
"org.primer.llm": {
|
|
47426
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47427
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46577
47428
|
}
|
|
46578
47429
|
},
|
|
46579
47430
|
"alpha": 0.7,
|
|
@@ -46582,6 +47433,7 @@
|
|
|
46582
47433
|
"original": {
|
|
46583
47434
|
"$value": "{bgColor.accent.emphasis}",
|
|
46584
47435
|
"$type": "color",
|
|
47436
|
+
"$description": "Background color for text selection highlights",
|
|
46585
47437
|
"$extensions": {
|
|
46586
47438
|
"org.primer.figma": {
|
|
46587
47439
|
"collection": "mode",
|
|
@@ -46596,6 +47448,10 @@
|
|
|
46596
47448
|
"isSource": true,
|
|
46597
47449
|
"$type": "color"
|
|
46598
47450
|
}
|
|
47451
|
+
},
|
|
47452
|
+
"org.primer.llm": {
|
|
47453
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47454
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46599
47455
|
}
|
|
46600
47456
|
},
|
|
46601
47457
|
"alpha": 0.7,
|
|
@@ -46609,6 +47465,7 @@
|
|
|
46609
47465
|
"key": "{shadow.floating.large}",
|
|
46610
47466
|
"$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
|
|
46611
47467
|
"$type": "shadow",
|
|
47468
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46612
47469
|
"$extensions": {
|
|
46613
47470
|
"org.primer.figma": {
|
|
46614
47471
|
"collection": "mode",
|
|
@@ -46638,6 +47495,10 @@
|
|
|
46638
47495
|
"isSource": true,
|
|
46639
47496
|
"$type": "shadow"
|
|
46640
47497
|
}
|
|
47498
|
+
},
|
|
47499
|
+
"org.primer.llm": {
|
|
47500
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47501
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46641
47502
|
}
|
|
46642
47503
|
},
|
|
46643
47504
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46662,6 +47523,7 @@
|
|
|
46662
47523
|
}
|
|
46663
47524
|
],
|
|
46664
47525
|
"$type": "shadow",
|
|
47526
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46665
47527
|
"$extensions": {
|
|
46666
47528
|
"org.primer.figma": {
|
|
46667
47529
|
"collection": "mode",
|
|
@@ -46691,6 +47553,10 @@
|
|
|
46691
47553
|
"isSource": true,
|
|
46692
47554
|
"$type": "shadow"
|
|
46693
47555
|
}
|
|
47556
|
+
},
|
|
47557
|
+
"org.primer.llm": {
|
|
47558
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47559
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46694
47560
|
}
|
|
46695
47561
|
},
|
|
46696
47562
|
"key": "{shadow.floating.large}"
|
|
@@ -46703,6 +47569,7 @@
|
|
|
46703
47569
|
"key": "{shadow.floating.legacy}",
|
|
46704
47570
|
"$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46705
47571
|
"$type": "shadow",
|
|
47572
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46706
47573
|
"$extensions": {
|
|
46707
47574
|
"org.primer.figma": {},
|
|
46708
47575
|
"org.primer.overrides": {
|
|
@@ -46729,6 +47596,10 @@
|
|
|
46729
47596
|
"isSource": true,
|
|
46730
47597
|
"$type": "shadow"
|
|
46731
47598
|
}
|
|
47599
|
+
},
|
|
47600
|
+
"org.primer.llm": {
|
|
47601
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47602
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46732
47603
|
}
|
|
46733
47604
|
},
|
|
46734
47605
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46753,6 +47624,7 @@
|
|
|
46753
47624
|
}
|
|
46754
47625
|
],
|
|
46755
47626
|
"$type": "shadow",
|
|
47627
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46756
47628
|
"$extensions": {
|
|
46757
47629
|
"org.primer.figma": {},
|
|
46758
47630
|
"org.primer.overrides": {
|
|
@@ -46779,6 +47651,10 @@
|
|
|
46779
47651
|
"isSource": true,
|
|
46780
47652
|
"$type": "shadow"
|
|
46781
47653
|
}
|
|
47654
|
+
},
|
|
47655
|
+
"org.primer.llm": {
|
|
47656
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47657
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46782
47658
|
}
|
|
46783
47659
|
},
|
|
46784
47660
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46791,6 +47667,7 @@
|
|
|
46791
47667
|
"key": "{shadow.floating.medium}",
|
|
46792
47668
|
"$value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
|
|
46793
47669
|
"$type": "shadow",
|
|
47670
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46794
47671
|
"$extensions": {
|
|
46795
47672
|
"org.primer.figma": {
|
|
46796
47673
|
"collection": "mode",
|
|
@@ -46844,6 +47721,10 @@
|
|
|
46844
47721
|
"isSource": true,
|
|
46845
47722
|
"$type": "shadow"
|
|
46846
47723
|
}
|
|
47724
|
+
},
|
|
47725
|
+
"org.primer.llm": {
|
|
47726
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47727
|
+
"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."
|
|
46847
47728
|
}
|
|
46848
47729
|
},
|
|
46849
47730
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46892,6 +47773,7 @@
|
|
|
46892
47773
|
}
|
|
46893
47774
|
],
|
|
46894
47775
|
"$type": "shadow",
|
|
47776
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46895
47777
|
"$extensions": {
|
|
46896
47778
|
"org.primer.figma": {
|
|
46897
47779
|
"collection": "mode",
|
|
@@ -46945,6 +47827,10 @@
|
|
|
46945
47827
|
"isSource": true,
|
|
46946
47828
|
"$type": "shadow"
|
|
46947
47829
|
}
|
|
47830
|
+
},
|
|
47831
|
+
"org.primer.llm": {
|
|
47832
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47833
|
+
"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."
|
|
46948
47834
|
}
|
|
46949
47835
|
},
|
|
46950
47836
|
"key": "{shadow.floating.medium}"
|
|
@@ -46957,6 +47843,7 @@
|
|
|
46957
47843
|
"key": "{shadow.floating.small}",
|
|
46958
47844
|
"$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46959
47845
|
"$type": "shadow",
|
|
47846
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46960
47847
|
"$extensions": {
|
|
46961
47848
|
"org.primer.figma": {
|
|
46962
47849
|
"collection": "mode",
|
|
@@ -46994,6 +47881,10 @@
|
|
|
46994
47881
|
"isSource": true,
|
|
46995
47882
|
"$type": "shadow"
|
|
46996
47883
|
}
|
|
47884
|
+
},
|
|
47885
|
+
"org.primer.llm": {
|
|
47886
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47887
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46997
47888
|
}
|
|
46998
47889
|
},
|
|
46999
47890
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47026,6 +47917,7 @@
|
|
|
47026
47917
|
}
|
|
47027
47918
|
],
|
|
47028
47919
|
"$type": "shadow",
|
|
47920
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47029
47921
|
"$extensions": {
|
|
47030
47922
|
"org.primer.figma": {
|
|
47031
47923
|
"collection": "mode",
|
|
@@ -47063,6 +47955,10 @@
|
|
|
47063
47955
|
"isSource": true,
|
|
47064
47956
|
"$type": "shadow"
|
|
47065
47957
|
}
|
|
47958
|
+
},
|
|
47959
|
+
"org.primer.llm": {
|
|
47960
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47961
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47066
47962
|
}
|
|
47067
47963
|
},
|
|
47068
47964
|
"key": "{shadow.floating.small}"
|
|
@@ -47075,6 +47971,7 @@
|
|
|
47075
47971
|
"key": "{shadow.floating.xlarge}",
|
|
47076
47972
|
"$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
|
|
47077
47973
|
"$type": "shadow",
|
|
47974
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47078
47975
|
"$extensions": {
|
|
47079
47976
|
"org.primer.figma": {
|
|
47080
47977
|
"collection": "mode",
|
|
@@ -47104,6 +48001,10 @@
|
|
|
47104
48001
|
"isSource": true,
|
|
47105
48002
|
"$type": "shadow"
|
|
47106
48003
|
}
|
|
48004
|
+
},
|
|
48005
|
+
"org.primer.llm": {
|
|
48006
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48007
|
+
"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."
|
|
47107
48008
|
}
|
|
47108
48009
|
},
|
|
47109
48010
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47128,6 +48029,7 @@
|
|
|
47128
48029
|
}
|
|
47129
48030
|
],
|
|
47130
48031
|
"$type": "shadow",
|
|
48032
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47131
48033
|
"$extensions": {
|
|
47132
48034
|
"org.primer.figma": {
|
|
47133
48035
|
"collection": "mode",
|
|
@@ -47157,6 +48059,10 @@
|
|
|
47157
48059
|
"isSource": true,
|
|
47158
48060
|
"$type": "shadow"
|
|
47159
48061
|
}
|
|
48062
|
+
},
|
|
48063
|
+
"org.primer.llm": {
|
|
48064
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48065
|
+
"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."
|
|
47160
48066
|
}
|
|
47161
48067
|
},
|
|
47162
48068
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47169,6 +48075,7 @@
|
|
|
47169
48075
|
"key": "{shadow.inset}",
|
|
47170
48076
|
"$value": "inset 0px 1px 0px 0px #0104093d",
|
|
47171
48077
|
"$type": "shadow",
|
|
48078
|
+
"$description": "Inset shadow for recessed elements",
|
|
47172
48079
|
"$extensions": {
|
|
47173
48080
|
"org.primer.figma": {
|
|
47174
48081
|
"collection": "mode",
|
|
@@ -47189,6 +48096,10 @@
|
|
|
47189
48096
|
"isSource": true,
|
|
47190
48097
|
"$type": "shadow"
|
|
47191
48098
|
}
|
|
48099
|
+
},
|
|
48100
|
+
"org.primer.llm": {
|
|
48101
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48102
|
+
"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."
|
|
47192
48103
|
}
|
|
47193
48104
|
},
|
|
47194
48105
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47204,6 +48115,7 @@
|
|
|
47204
48115
|
"inset": true
|
|
47205
48116
|
},
|
|
47206
48117
|
"$type": "shadow",
|
|
48118
|
+
"$description": "Inset shadow for recessed elements",
|
|
47207
48119
|
"$extensions": {
|
|
47208
48120
|
"org.primer.figma": {
|
|
47209
48121
|
"collection": "mode",
|
|
@@ -47224,6 +48136,10 @@
|
|
|
47224
48136
|
"isSource": true,
|
|
47225
48137
|
"$type": "shadow"
|
|
47226
48138
|
}
|
|
48139
|
+
},
|
|
48140
|
+
"org.primer.llm": {
|
|
48141
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48142
|
+
"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."
|
|
47227
48143
|
}
|
|
47228
48144
|
},
|
|
47229
48145
|
"key": "{shadow.inset}"
|
|
@@ -47236,6 +48152,7 @@
|
|
|
47236
48152
|
"key": "{shadow.resting.medium}",
|
|
47237
48153
|
"$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47238
48154
|
"$type": "shadow",
|
|
48155
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47239
48156
|
"$extensions": {
|
|
47240
48157
|
"org.primer.figma": {
|
|
47241
48158
|
"collection": "mode",
|
|
@@ -47265,6 +48182,10 @@
|
|
|
47265
48182
|
"isSource": true,
|
|
47266
48183
|
"$type": "shadow"
|
|
47267
48184
|
}
|
|
48185
|
+
},
|
|
48186
|
+
"org.primer.llm": {
|
|
48187
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48188
|
+
"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."
|
|
47268
48189
|
}
|
|
47269
48190
|
},
|
|
47270
48191
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47289,6 +48210,7 @@
|
|
|
47289
48210
|
}
|
|
47290
48211
|
],
|
|
47291
48212
|
"$type": "shadow",
|
|
48213
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47292
48214
|
"$extensions": {
|
|
47293
48215
|
"org.primer.figma": {
|
|
47294
48216
|
"collection": "mode",
|
|
@@ -47318,6 +48240,10 @@
|
|
|
47318
48240
|
"isSource": true,
|
|
47319
48241
|
"$type": "shadow"
|
|
47320
48242
|
}
|
|
48243
|
+
},
|
|
48244
|
+
"org.primer.llm": {
|
|
48245
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48246
|
+
"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."
|
|
47321
48247
|
}
|
|
47322
48248
|
},
|
|
47323
48249
|
"key": "{shadow.resting.medium}"
|
|
@@ -47330,6 +48256,7 @@
|
|
|
47330
48256
|
"key": "{shadow.resting.small}",
|
|
47331
48257
|
"$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47332
48258
|
"$type": "shadow",
|
|
48259
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47333
48260
|
"$extensions": {
|
|
47334
48261
|
"org.primer.figma": {
|
|
47335
48262
|
"collection": "mode",
|
|
@@ -47361,6 +48288,10 @@
|
|
|
47361
48288
|
"isSource": true,
|
|
47362
48289
|
"$type": "shadow"
|
|
47363
48290
|
}
|
|
48291
|
+
},
|
|
48292
|
+
"org.primer.llm": {
|
|
48293
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48294
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47364
48295
|
}
|
|
47365
48296
|
},
|
|
47366
48297
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47387,6 +48318,7 @@
|
|
|
47387
48318
|
}
|
|
47388
48319
|
],
|
|
47389
48320
|
"$type": "shadow",
|
|
48321
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47390
48322
|
"$extensions": {
|
|
47391
48323
|
"org.primer.figma": {
|
|
47392
48324
|
"collection": "mode",
|
|
@@ -47418,6 +48350,10 @@
|
|
|
47418
48350
|
"isSource": true,
|
|
47419
48351
|
"$type": "shadow"
|
|
47420
48352
|
}
|
|
48353
|
+
},
|
|
48354
|
+
"org.primer.llm": {
|
|
48355
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48356
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47421
48357
|
}
|
|
47422
48358
|
},
|
|
47423
48359
|
"key": "{shadow.resting.small}"
|
|
@@ -47430,6 +48366,7 @@
|
|
|
47430
48366
|
"key": "{shadow.resting.xsmall}",
|
|
47431
48367
|
"$value": "0px 1px 1px 0px #010409cc",
|
|
47432
48368
|
"$type": "shadow",
|
|
48369
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47433
48370
|
"$extensions": {
|
|
47434
48371
|
"org.primer.figma": {
|
|
47435
48372
|
"collection": "mode",
|
|
@@ -47450,6 +48387,10 @@
|
|
|
47450
48387
|
"isSource": true,
|
|
47451
48388
|
"$type": "shadow"
|
|
47452
48389
|
}
|
|
48390
|
+
},
|
|
48391
|
+
"org.primer.llm": {
|
|
48392
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48393
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47453
48394
|
}
|
|
47454
48395
|
},
|
|
47455
48396
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47465,6 +48406,7 @@
|
|
|
47465
48406
|
"inset": false
|
|
47466
48407
|
},
|
|
47467
48408
|
"$type": "shadow",
|
|
48409
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47468
48410
|
"$extensions": {
|
|
47469
48411
|
"org.primer.figma": {
|
|
47470
48412
|
"collection": "mode",
|
|
@@ -47485,6 +48427,10 @@
|
|
|
47485
48427
|
"isSource": true,
|
|
47486
48428
|
"$type": "shadow"
|
|
47487
48429
|
}
|
|
48430
|
+
},
|
|
48431
|
+
"org.primer.llm": {
|
|
48432
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48433
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47488
48434
|
}
|
|
47489
48435
|
},
|
|
47490
48436
|
"key": "{shadow.resting.xsmall}"
|