@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": "#656c76",
|
|
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.neutral.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": "#656c761a",
|
|
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",
|
|
@@ -636,6 +701,7 @@
|
|
|
636
701
|
"original": {
|
|
637
702
|
"$value": "{bgColor.neutral.muted}",
|
|
638
703
|
"$type": "color",
|
|
704
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
639
705
|
"$extensions": {
|
|
640
706
|
"org.primer.figma": {
|
|
641
707
|
"collection": "mode",
|
|
@@ -671,6 +737,10 @@
|
|
|
671
737
|
"isSource": true,
|
|
672
738
|
"$type": "color"
|
|
673
739
|
}
|
|
740
|
+
},
|
|
741
|
+
"org.primer.llm": {
|
|
742
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
743
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
674
744
|
}
|
|
675
745
|
},
|
|
676
746
|
"alpha": 0.1,
|
|
@@ -684,6 +754,7 @@
|
|
|
684
754
|
"key": "{bgColor.danger.emphasis}",
|
|
685
755
|
"$value": "#da3633",
|
|
686
756
|
"$type": "color",
|
|
757
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
687
758
|
"$extensions": {
|
|
688
759
|
"org.primer.figma": {
|
|
689
760
|
"collection": "mode",
|
|
@@ -701,6 +772,10 @@
|
|
|
701
772
|
"dark-high-contrast": "#490202",
|
|
702
773
|
"dark-dimmed-high-contrast": "#8e1519",
|
|
703
774
|
"dark-tritanopia-high-contrast": "#490202"
|
|
775
|
+
},
|
|
776
|
+
"org.primer.llm": {
|
|
777
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
778
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
704
779
|
}
|
|
705
780
|
},
|
|
706
781
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -708,6 +783,7 @@
|
|
|
708
783
|
"original": {
|
|
709
784
|
"$value": "{base.color.red.5}",
|
|
710
785
|
"$type": "color",
|
|
786
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
711
787
|
"$extensions": {
|
|
712
788
|
"org.primer.figma": {
|
|
713
789
|
"collection": "mode",
|
|
@@ -725,6 +801,10 @@
|
|
|
725
801
|
"dark-high-contrast": "{base.color.red.9}",
|
|
726
802
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
727
803
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
804
|
+
},
|
|
805
|
+
"org.primer.llm": {
|
|
806
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
807
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
728
808
|
}
|
|
729
809
|
},
|
|
730
810
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -737,6 +817,7 @@
|
|
|
737
817
|
"key": "{bgColor.danger.muted}",
|
|
738
818
|
"$value": "#f851491a",
|
|
739
819
|
"$type": "color",
|
|
820
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
740
821
|
"$extensions": {
|
|
741
822
|
"org.primer.figma": {
|
|
742
823
|
"collection": "mode",
|
|
@@ -763,6 +844,10 @@
|
|
|
763
844
|
"isSource": true,
|
|
764
845
|
"$type": "color"
|
|
765
846
|
}
|
|
847
|
+
},
|
|
848
|
+
"org.primer.llm": {
|
|
849
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
850
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
766
851
|
}
|
|
767
852
|
},
|
|
768
853
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -771,6 +856,7 @@
|
|
|
771
856
|
"original": {
|
|
772
857
|
"$value": "{base.color.red.4}",
|
|
773
858
|
"$type": "color",
|
|
859
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
774
860
|
"$extensions": {
|
|
775
861
|
"org.primer.figma": {
|
|
776
862
|
"collection": "mode",
|
|
@@ -797,6 +883,10 @@
|
|
|
797
883
|
"isSource": true,
|
|
798
884
|
"$type": "color"
|
|
799
885
|
}
|
|
886
|
+
},
|
|
887
|
+
"org.primer.llm": {
|
|
888
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
889
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
800
890
|
}
|
|
801
891
|
},
|
|
802
892
|
"alpha": 0.1,
|
|
@@ -810,6 +900,7 @@
|
|
|
810
900
|
"key": "{bgColor.default}",
|
|
811
901
|
"$value": "#0d1117",
|
|
812
902
|
"$type": "color",
|
|
903
|
+
"$description": "Default background color for pages and main content areas",
|
|
813
904
|
"$extensions": {
|
|
814
905
|
"org.primer.figma": {
|
|
815
906
|
"collection": "mode",
|
|
@@ -826,6 +917,10 @@
|
|
|
826
917
|
"dark-high-contrast": "#010409",
|
|
827
918
|
"dark-tritanopia-high-contrast": "#010409",
|
|
828
919
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
920
|
+
},
|
|
921
|
+
"org.primer.llm": {
|
|
922
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
923
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
829
924
|
}
|
|
830
925
|
},
|
|
831
926
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -833,6 +928,7 @@
|
|
|
833
928
|
"original": {
|
|
834
929
|
"$value": "{base.color.neutral.1}",
|
|
835
930
|
"$type": "color",
|
|
931
|
+
"$description": "Default background color for pages and main content areas",
|
|
836
932
|
"$extensions": {
|
|
837
933
|
"org.primer.figma": {
|
|
838
934
|
"collection": "mode",
|
|
@@ -849,6 +945,10 @@
|
|
|
849
945
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
850
946
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
851
947
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
948
|
+
},
|
|
949
|
+
"org.primer.llm": {
|
|
950
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
951
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
852
952
|
}
|
|
853
953
|
},
|
|
854
954
|
"key": "{bgColor.default}"
|
|
@@ -861,6 +961,7 @@
|
|
|
861
961
|
"key": "{bgColor.disabled}",
|
|
862
962
|
"$value": "#212830",
|
|
863
963
|
"$type": "color",
|
|
964
|
+
"$description": "Background for disabled interactive elements",
|
|
864
965
|
"$extensions": {
|
|
865
966
|
"org.primer.figma": {
|
|
866
967
|
"collection": "mode",
|
|
@@ -877,6 +978,10 @@
|
|
|
877
978
|
"dark-high-contrast": "#262c36",
|
|
878
979
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
879
980
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
981
|
+
},
|
|
982
|
+
"org.primer.llm": {
|
|
983
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
984
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
880
985
|
}
|
|
881
986
|
},
|
|
882
987
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -884,6 +989,7 @@
|
|
|
884
989
|
"original": {
|
|
885
990
|
"$value": "{base.color.neutral.3}",
|
|
886
991
|
"$type": "color",
|
|
992
|
+
"$description": "Background for disabled interactive elements",
|
|
887
993
|
"$extensions": {
|
|
888
994
|
"org.primer.figma": {
|
|
889
995
|
"collection": "mode",
|
|
@@ -900,6 +1006,10 @@
|
|
|
900
1006
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
901
1007
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
902
1008
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1009
|
+
},
|
|
1010
|
+
"org.primer.llm": {
|
|
1011
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1012
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
903
1013
|
}
|
|
904
1014
|
},
|
|
905
1015
|
"key": "{bgColor.disabled}"
|
|
@@ -912,6 +1022,7 @@
|
|
|
912
1022
|
"key": "{bgColor.done.emphasis}",
|
|
913
1023
|
"$value": "#8957e5",
|
|
914
1024
|
"$type": "color",
|
|
1025
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
915
1026
|
"$extensions": {
|
|
916
1027
|
"org.primer.figma": {
|
|
917
1028
|
"collection": "mode",
|
|
@@ -926,6 +1037,10 @@
|
|
|
926
1037
|
"dark-dimmed-high-contrast": "#553098",
|
|
927
1038
|
"dark-tritanopia-high-contrast": "#271052",
|
|
928
1039
|
"dark-protanopia-deuteranopia-high-contrast": "#271052"
|
|
1040
|
+
},
|
|
1041
|
+
"org.primer.llm": {
|
|
1042
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1043
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
929
1044
|
}
|
|
930
1045
|
},
|
|
931
1046
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -933,6 +1048,7 @@
|
|
|
933
1048
|
"original": {
|
|
934
1049
|
"$value": "{base.color.purple.5}",
|
|
935
1050
|
"$type": "color",
|
|
1051
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
936
1052
|
"$extensions": {
|
|
937
1053
|
"org.primer.figma": {
|
|
938
1054
|
"collection": "mode",
|
|
@@ -947,6 +1063,10 @@
|
|
|
947
1063
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
948
1064
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
949
1065
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1066
|
+
},
|
|
1067
|
+
"org.primer.llm": {
|
|
1068
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1069
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
950
1070
|
}
|
|
951
1071
|
},
|
|
952
1072
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -959,6 +1079,7 @@
|
|
|
959
1079
|
"key": "{bgColor.done.muted}",
|
|
960
1080
|
"$value": "#ab7df826",
|
|
961
1081
|
"$type": "color",
|
|
1082
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
962
1083
|
"$extensions": {
|
|
963
1084
|
"org.primer.figma": {
|
|
964
1085
|
"collection": "mode",
|
|
@@ -976,6 +1097,10 @@
|
|
|
976
1097
|
"isSource": true,
|
|
977
1098
|
"$type": "color"
|
|
978
1099
|
}
|
|
1100
|
+
},
|
|
1101
|
+
"org.primer.llm": {
|
|
1102
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1103
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
979
1104
|
}
|
|
980
1105
|
},
|
|
981
1106
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -984,6 +1109,7 @@
|
|
|
984
1109
|
"original": {
|
|
985
1110
|
"$value": "{base.color.purple.4}",
|
|
986
1111
|
"$type": "color",
|
|
1112
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
987
1113
|
"$extensions": {
|
|
988
1114
|
"org.primer.figma": {
|
|
989
1115
|
"collection": "mode",
|
|
@@ -1001,6 +1127,10 @@
|
|
|
1001
1127
|
"isSource": true,
|
|
1002
1128
|
"$type": "color"
|
|
1003
1129
|
}
|
|
1130
|
+
},
|
|
1131
|
+
"org.primer.llm": {
|
|
1132
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1133
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1004
1134
|
}
|
|
1005
1135
|
},
|
|
1006
1136
|
"alpha": 0.15,
|
|
@@ -1014,6 +1144,7 @@
|
|
|
1014
1144
|
"key": "{bgColor.draft.emphasis}",
|
|
1015
1145
|
"$value": "#656c76",
|
|
1016
1146
|
"$type": "color",
|
|
1147
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1017
1148
|
"$extensions": {
|
|
1018
1149
|
"org.primer.figma": {
|
|
1019
1150
|
"collection": "mode",
|
|
@@ -1022,6 +1153,10 @@
|
|
|
1022
1153
|
"codeSyntax": {
|
|
1023
1154
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1024
1155
|
}
|
|
1156
|
+
},
|
|
1157
|
+
"org.primer.llm": {
|
|
1158
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1159
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1025
1160
|
}
|
|
1026
1161
|
},
|
|
1027
1162
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1029,6 +1164,7 @@
|
|
|
1029
1164
|
"original": {
|
|
1030
1165
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1031
1166
|
"$type": "color",
|
|
1167
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1032
1168
|
"$extensions": {
|
|
1033
1169
|
"org.primer.figma": {
|
|
1034
1170
|
"collection": "mode",
|
|
@@ -1037,6 +1173,10 @@
|
|
|
1037
1173
|
"codeSyntax": {
|
|
1038
1174
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1039
1175
|
}
|
|
1176
|
+
},
|
|
1177
|
+
"org.primer.llm": {
|
|
1178
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1179
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1040
1180
|
}
|
|
1041
1181
|
},
|
|
1042
1182
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1049,6 +1189,7 @@
|
|
|
1049
1189
|
"key": "{bgColor.draft.muted}",
|
|
1050
1190
|
"$value": "#656c761a",
|
|
1051
1191
|
"$type": "color",
|
|
1192
|
+
"$description": "Subtle background for draft state indicators",
|
|
1052
1193
|
"$extensions": {
|
|
1053
1194
|
"org.primer.figma": {
|
|
1054
1195
|
"collection": "mode",
|
|
@@ -1084,6 +1225,10 @@
|
|
|
1084
1225
|
"isSource": true,
|
|
1085
1226
|
"$type": "color"
|
|
1086
1227
|
}
|
|
1228
|
+
},
|
|
1229
|
+
"org.primer.llm": {
|
|
1230
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1231
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1087
1232
|
}
|
|
1088
1233
|
},
|
|
1089
1234
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1092,6 +1237,7 @@
|
|
|
1092
1237
|
"original": {
|
|
1093
1238
|
"$value": "{bgColor.neutral.muted}",
|
|
1094
1239
|
"$type": "color",
|
|
1240
|
+
"$description": "Subtle background for draft state indicators",
|
|
1095
1241
|
"$extensions": {
|
|
1096
1242
|
"org.primer.figma": {
|
|
1097
1243
|
"collection": "mode",
|
|
@@ -1127,6 +1273,10 @@
|
|
|
1127
1273
|
"isSource": true,
|
|
1128
1274
|
"$type": "color"
|
|
1129
1275
|
}
|
|
1276
|
+
},
|
|
1277
|
+
"org.primer.llm": {
|
|
1278
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1279
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1130
1280
|
}
|
|
1131
1281
|
},
|
|
1132
1282
|
"alpha": 0.1,
|
|
@@ -1140,6 +1290,7 @@
|
|
|
1140
1290
|
"key": "{bgColor.emphasis}",
|
|
1141
1291
|
"$value": "#3d444d",
|
|
1142
1292
|
"$type": "color",
|
|
1293
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1143
1294
|
"$extensions": {
|
|
1144
1295
|
"org.primer.figma": {
|
|
1145
1296
|
"collection": "mode",
|
|
@@ -1151,6 +1302,10 @@
|
|
|
1151
1302
|
},
|
|
1152
1303
|
"org.primer.overrides": {
|
|
1153
1304
|
"dark": "#3d444d"
|
|
1305
|
+
},
|
|
1306
|
+
"org.primer.llm": {
|
|
1307
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1308
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1154
1309
|
}
|
|
1155
1310
|
},
|
|
1156
1311
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1158,6 +1313,7 @@
|
|
|
1158
1313
|
"original": {
|
|
1159
1314
|
"$value": "{base.color.neutral.7}",
|
|
1160
1315
|
"$type": "color",
|
|
1316
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1161
1317
|
"$extensions": {
|
|
1162
1318
|
"org.primer.figma": {
|
|
1163
1319
|
"collection": "mode",
|
|
@@ -1169,6 +1325,10 @@
|
|
|
1169
1325
|
},
|
|
1170
1326
|
"org.primer.overrides": {
|
|
1171
1327
|
"dark": "{base.color.neutral.7}"
|
|
1328
|
+
},
|
|
1329
|
+
"org.primer.llm": {
|
|
1330
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1331
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1172
1332
|
}
|
|
1173
1333
|
},
|
|
1174
1334
|
"key": "{bgColor.emphasis}"
|
|
@@ -1181,6 +1341,7 @@
|
|
|
1181
1341
|
"key": "{bgColor.inset}",
|
|
1182
1342
|
"$value": "#010409",
|
|
1183
1343
|
"$type": "color",
|
|
1344
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1184
1345
|
"$extensions": {
|
|
1185
1346
|
"org.primer.figma": {
|
|
1186
1347
|
"collection": "mode",
|
|
@@ -1197,6 +1358,10 @@
|
|
|
1197
1358
|
"light-high-contrast": "#151b23",
|
|
1198
1359
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1199
1360
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1361
|
+
},
|
|
1362
|
+
"org.primer.llm": {
|
|
1363
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1364
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1200
1365
|
}
|
|
1201
1366
|
},
|
|
1202
1367
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1204,6 +1369,7 @@
|
|
|
1204
1369
|
"original": {
|
|
1205
1370
|
"$value": "{base.color.neutral.0}",
|
|
1206
1371
|
"$type": "color",
|
|
1372
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1207
1373
|
"$extensions": {
|
|
1208
1374
|
"org.primer.figma": {
|
|
1209
1375
|
"collection": "mode",
|
|
@@ -1220,6 +1386,10 @@
|
|
|
1220
1386
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1221
1387
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1222
1388
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1389
|
+
},
|
|
1390
|
+
"org.primer.llm": {
|
|
1391
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1392
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1223
1393
|
}
|
|
1224
1394
|
},
|
|
1225
1395
|
"key": "{bgColor.inset}"
|
|
@@ -1232,6 +1402,7 @@
|
|
|
1232
1402
|
"key": "{bgColor.inverse}",
|
|
1233
1403
|
"$value": "#ffffff",
|
|
1234
1404
|
"$type": "color",
|
|
1405
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1235
1406
|
"$extensions": {
|
|
1236
1407
|
"org.primer.figma": {
|
|
1237
1408
|
"collection": "mode",
|
|
@@ -1240,6 +1411,10 @@
|
|
|
1240
1411
|
},
|
|
1241
1412
|
"org.primer.overrides": {
|
|
1242
1413
|
"dark": "#ffffff"
|
|
1414
|
+
},
|
|
1415
|
+
"org.primer.llm": {
|
|
1416
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1417
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1243
1418
|
}
|
|
1244
1419
|
},
|
|
1245
1420
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1247,6 +1422,7 @@
|
|
|
1247
1422
|
"original": {
|
|
1248
1423
|
"$value": "{base.color.neutral.13}",
|
|
1249
1424
|
"$type": "color",
|
|
1425
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1250
1426
|
"$extensions": {
|
|
1251
1427
|
"org.primer.figma": {
|
|
1252
1428
|
"collection": "mode",
|
|
@@ -1255,6 +1431,10 @@
|
|
|
1255
1431
|
},
|
|
1256
1432
|
"org.primer.overrides": {
|
|
1257
1433
|
"dark": "{base.color.neutral.13}"
|
|
1434
|
+
},
|
|
1435
|
+
"org.primer.llm": {
|
|
1436
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1437
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1258
1438
|
}
|
|
1259
1439
|
},
|
|
1260
1440
|
"key": "{bgColor.inverse}"
|
|
@@ -1267,6 +1447,7 @@
|
|
|
1267
1447
|
"key": "{bgColor.muted}",
|
|
1268
1448
|
"$value": "#151b23",
|
|
1269
1449
|
"$type": "color",
|
|
1450
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1270
1451
|
"$extensions": {
|
|
1271
1452
|
"org.primer.figma": {
|
|
1272
1453
|
"collection": "mode",
|
|
@@ -1286,6 +1467,10 @@
|
|
|
1286
1467
|
"dark-high-contrast": "#151b23",
|
|
1287
1468
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1288
1469
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1470
|
+
},
|
|
1471
|
+
"org.primer.llm": {
|
|
1472
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1473
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1289
1474
|
}
|
|
1290
1475
|
},
|
|
1291
1476
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1293,6 +1478,7 @@
|
|
|
1293
1478
|
"original": {
|
|
1294
1479
|
"$value": "{base.color.neutral.2}",
|
|
1295
1480
|
"$type": "color",
|
|
1481
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1296
1482
|
"$extensions": {
|
|
1297
1483
|
"org.primer.figma": {
|
|
1298
1484
|
"collection": "mode",
|
|
@@ -1312,6 +1498,10 @@
|
|
|
1312
1498
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1313
1499
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1314
1500
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1501
|
+
},
|
|
1502
|
+
"org.primer.llm": {
|
|
1503
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1504
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1315
1505
|
}
|
|
1316
1506
|
},
|
|
1317
1507
|
"key": "{bgColor.muted}"
|
|
@@ -1324,6 +1514,7 @@
|
|
|
1324
1514
|
"key": "{bgColor.neutral.emphasis}",
|
|
1325
1515
|
"$value": "#656c76",
|
|
1326
1516
|
"$type": "color",
|
|
1517
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1327
1518
|
"$extensions": {
|
|
1328
1519
|
"org.primer.figma": {
|
|
1329
1520
|
"collection": "mode",
|
|
@@ -1340,6 +1531,10 @@
|
|
|
1340
1531
|
"dark-high-contrast": "#3d444d",
|
|
1341
1532
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1342
1533
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1534
|
+
},
|
|
1535
|
+
"org.primer.llm": {
|
|
1536
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1537
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1343
1538
|
}
|
|
1344
1539
|
},
|
|
1345
1540
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1347,6 +1542,7 @@
|
|
|
1347
1542
|
"original": {
|
|
1348
1543
|
"$value": "{base.color.neutral.8}",
|
|
1349
1544
|
"$type": "color",
|
|
1545
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1350
1546
|
"$extensions": {
|
|
1351
1547
|
"org.primer.figma": {
|
|
1352
1548
|
"collection": "mode",
|
|
@@ -1363,6 +1559,10 @@
|
|
|
1363
1559
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1364
1560
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1365
1561
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1562
|
+
},
|
|
1563
|
+
"org.primer.llm": {
|
|
1564
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1565
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1366
1566
|
}
|
|
1367
1567
|
},
|
|
1368
1568
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1375,6 +1575,7 @@
|
|
|
1375
1575
|
"key": "{bgColor.neutral.muted}",
|
|
1376
1576
|
"$value": "#656c7633",
|
|
1377
1577
|
"$type": "color",
|
|
1578
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1378
1579
|
"$extensions": {
|
|
1379
1580
|
"org.primer.figma": {
|
|
1380
1581
|
"collection": "mode",
|
|
@@ -1402,6 +1603,10 @@
|
|
|
1402
1603
|
"dark-high-contrast": "#212830",
|
|
1403
1604
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1404
1605
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1606
|
+
},
|
|
1607
|
+
"org.primer.llm": {
|
|
1608
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1609
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1405
1610
|
}
|
|
1406
1611
|
},
|
|
1407
1612
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1410,6 +1615,7 @@
|
|
|
1410
1615
|
"original": {
|
|
1411
1616
|
"$value": "{base.color.neutral.8}",
|
|
1412
1617
|
"$type": "color",
|
|
1618
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1413
1619
|
"$extensions": {
|
|
1414
1620
|
"org.primer.figma": {
|
|
1415
1621
|
"collection": "mode",
|
|
@@ -1437,6 +1643,10 @@
|
|
|
1437
1643
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1438
1644
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1439
1645
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1646
|
+
},
|
|
1647
|
+
"org.primer.llm": {
|
|
1648
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1649
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1440
1650
|
}
|
|
1441
1651
|
},
|
|
1442
1652
|
"alpha": 0.2,
|
|
@@ -1450,6 +1660,7 @@
|
|
|
1450
1660
|
"key": "{bgColor.open.emphasis}",
|
|
1451
1661
|
"$value": "#da3633",
|
|
1452
1662
|
"$type": "color",
|
|
1663
|
+
"$description": "Strong background for open state badges and labels",
|
|
1453
1664
|
"$extensions": {
|
|
1454
1665
|
"org.primer.figma": {
|
|
1455
1666
|
"collection": "mode",
|
|
@@ -1468,6 +1679,10 @@
|
|
|
1468
1679
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
1469
1680
|
"dark-protanopia-deuteranopia": "#bd561d",
|
|
1470
1681
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1682
|
+
},
|
|
1683
|
+
"org.primer.llm": {
|
|
1684
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1685
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1471
1686
|
}
|
|
1472
1687
|
},
|
|
1473
1688
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1475,6 +1690,7 @@
|
|
|
1475
1690
|
"original": {
|
|
1476
1691
|
"$value": "{base.color.red.5}",
|
|
1477
1692
|
"$type": "color",
|
|
1693
|
+
"$description": "Strong background for open state badges and labels",
|
|
1478
1694
|
"$extensions": {
|
|
1479
1695
|
"org.primer.figma": {
|
|
1480
1696
|
"collection": "mode",
|
|
@@ -1493,6 +1709,10 @@
|
|
|
1493
1709
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1494
1710
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1495
1711
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1712
|
+
},
|
|
1713
|
+
"org.primer.llm": {
|
|
1714
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1715
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1496
1716
|
}
|
|
1497
1717
|
},
|
|
1498
1718
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1505,6 +1725,7 @@
|
|
|
1505
1725
|
"key": "{bgColor.open.muted}",
|
|
1506
1726
|
"$value": "#f851491a",
|
|
1507
1727
|
"$type": "color",
|
|
1728
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1508
1729
|
"$extensions": {
|
|
1509
1730
|
"org.primer.figma": {
|
|
1510
1731
|
"collection": "mode",
|
|
@@ -1547,6 +1768,10 @@
|
|
|
1547
1768
|
"isSource": true,
|
|
1548
1769
|
"$type": "color"
|
|
1549
1770
|
}
|
|
1771
|
+
},
|
|
1772
|
+
"org.primer.llm": {
|
|
1773
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1774
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1550
1775
|
}
|
|
1551
1776
|
},
|
|
1552
1777
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1555,6 +1780,7 @@
|
|
|
1555
1780
|
"original": {
|
|
1556
1781
|
"$value": "{base.color.red.4}",
|
|
1557
1782
|
"$type": "color",
|
|
1783
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1558
1784
|
"$extensions": {
|
|
1559
1785
|
"org.primer.figma": {
|
|
1560
1786
|
"collection": "mode",
|
|
@@ -1597,6 +1823,10 @@
|
|
|
1597
1823
|
"isSource": true,
|
|
1598
1824
|
"$type": "color"
|
|
1599
1825
|
}
|
|
1826
|
+
},
|
|
1827
|
+
"org.primer.llm": {
|
|
1828
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1829
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1600
1830
|
}
|
|
1601
1831
|
},
|
|
1602
1832
|
"alpha": 0.1,
|
|
@@ -1610,6 +1840,7 @@
|
|
|
1610
1840
|
"key": "{bgColor.severe.emphasis}",
|
|
1611
1841
|
"$value": "#da3633",
|
|
1612
1842
|
"$type": "color",
|
|
1843
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1613
1844
|
"$extensions": {
|
|
1614
1845
|
"org.primer.figma": {
|
|
1615
1846
|
"collection": "mode",
|
|
@@ -1627,6 +1858,10 @@
|
|
|
1627
1858
|
"dark-high-contrast": "#3d1300",
|
|
1628
1859
|
"dark-dimmed-high-contrast": "#762d0a",
|
|
1629
1860
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1861
|
+
},
|
|
1862
|
+
"org.primer.llm": {
|
|
1863
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1864
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1630
1865
|
}
|
|
1631
1866
|
},
|
|
1632
1867
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1634,6 +1869,7 @@
|
|
|
1634
1869
|
"original": {
|
|
1635
1870
|
"$value": "{base.color.red.5}",
|
|
1636
1871
|
"$type": "color",
|
|
1872
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1637
1873
|
"$extensions": {
|
|
1638
1874
|
"org.primer.figma": {
|
|
1639
1875
|
"collection": "mode",
|
|
@@ -1651,6 +1887,10 @@
|
|
|
1651
1887
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1652
1888
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1653
1889
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1890
|
+
},
|
|
1891
|
+
"org.primer.llm": {
|
|
1892
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1893
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1654
1894
|
}
|
|
1655
1895
|
},
|
|
1656
1896
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1663,6 +1903,7 @@
|
|
|
1663
1903
|
"key": "{bgColor.severe.muted}",
|
|
1664
1904
|
"$value": "#f851491a",
|
|
1665
1905
|
"$type": "color",
|
|
1906
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1666
1907
|
"$extensions": {
|
|
1667
1908
|
"org.primer.figma": {
|
|
1668
1909
|
"collection": "mode",
|
|
@@ -1689,6 +1930,10 @@
|
|
|
1689
1930
|
"isSource": true,
|
|
1690
1931
|
"$type": "color"
|
|
1691
1932
|
}
|
|
1933
|
+
},
|
|
1934
|
+
"org.primer.llm": {
|
|
1935
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1936
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1692
1937
|
}
|
|
1693
1938
|
},
|
|
1694
1939
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1697,6 +1942,7 @@
|
|
|
1697
1942
|
"original": {
|
|
1698
1943
|
"$value": "{base.color.red.4}",
|
|
1699
1944
|
"$type": "color",
|
|
1945
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1700
1946
|
"$extensions": {
|
|
1701
1947
|
"org.primer.figma": {
|
|
1702
1948
|
"collection": "mode",
|
|
@@ -1723,6 +1969,10 @@
|
|
|
1723
1969
|
"isSource": true,
|
|
1724
1970
|
"$type": "color"
|
|
1725
1971
|
}
|
|
1972
|
+
},
|
|
1973
|
+
"org.primer.llm": {
|
|
1974
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1975
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1726
1976
|
}
|
|
1727
1977
|
},
|
|
1728
1978
|
"alpha": 0.1,
|
|
@@ -1736,6 +1986,7 @@
|
|
|
1736
1986
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1737
1987
|
"$value": "#bf4b8a",
|
|
1738
1988
|
"$type": "color",
|
|
1989
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1739
1990
|
"$extensions": {
|
|
1740
1991
|
"org.primer.figma": {
|
|
1741
1992
|
"collection": "mode",
|
|
@@ -1750,6 +2001,10 @@
|
|
|
1750
2001
|
"dark-dimmed-high-contrast": "#7d2457",
|
|
1751
2002
|
"dark-tritanopia-high-contrast": "#42062a",
|
|
1752
2003
|
"dark-protanopia-deuteranopia-high-contrast": "#42062a"
|
|
2004
|
+
},
|
|
2005
|
+
"org.primer.llm": {
|
|
2006
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2007
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1753
2008
|
}
|
|
1754
2009
|
},
|
|
1755
2010
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1757,6 +2012,7 @@
|
|
|
1757
2012
|
"original": {
|
|
1758
2013
|
"$value": "{base.color.pink.5}",
|
|
1759
2014
|
"$type": "color",
|
|
2015
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1760
2016
|
"$extensions": {
|
|
1761
2017
|
"org.primer.figma": {
|
|
1762
2018
|
"collection": "mode",
|
|
@@ -1771,6 +2027,10 @@
|
|
|
1771
2027
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1772
2028
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1773
2029
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2030
|
+
},
|
|
2031
|
+
"org.primer.llm": {
|
|
2032
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2033
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1774
2034
|
}
|
|
1775
2035
|
},
|
|
1776
2036
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1783,6 +2043,7 @@
|
|
|
1783
2043
|
"key": "{bgColor.sponsors.muted}",
|
|
1784
2044
|
"$value": "#db61a21a",
|
|
1785
2045
|
"$type": "color",
|
|
2046
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1786
2047
|
"$extensions": {
|
|
1787
2048
|
"org.primer.figma": {
|
|
1788
2049
|
"collection": "mode",
|
|
@@ -1807,6 +2068,10 @@
|
|
|
1807
2068
|
"isSource": true,
|
|
1808
2069
|
"$type": "color"
|
|
1809
2070
|
}
|
|
2071
|
+
},
|
|
2072
|
+
"org.primer.llm": {
|
|
2073
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2074
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1810
2075
|
}
|
|
1811
2076
|
},
|
|
1812
2077
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1815,6 +2080,7 @@
|
|
|
1815
2080
|
"original": {
|
|
1816
2081
|
"$value": "#db61a2",
|
|
1817
2082
|
"$type": "color",
|
|
2083
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1818
2084
|
"$extensions": {
|
|
1819
2085
|
"org.primer.figma": {
|
|
1820
2086
|
"collection": "mode",
|
|
@@ -1839,6 +2105,10 @@
|
|
|
1839
2105
|
"isSource": true,
|
|
1840
2106
|
"$type": "color"
|
|
1841
2107
|
}
|
|
2108
|
+
},
|
|
2109
|
+
"org.primer.llm": {
|
|
2110
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2111
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1842
2112
|
}
|
|
1843
2113
|
},
|
|
1844
2114
|
"alpha": 0.1,
|
|
@@ -1852,6 +2122,7 @@
|
|
|
1852
2122
|
"key": "{bgColor.success.emphasis}",
|
|
1853
2123
|
"$value": "#1f6feb",
|
|
1854
2124
|
"$type": "color",
|
|
2125
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1855
2126
|
"$extensions": {
|
|
1856
2127
|
"org.primer.figma": {
|
|
1857
2128
|
"collection": "mode",
|
|
@@ -1874,6 +2145,10 @@
|
|
|
1874
2145
|
"light-high-contrast": "#238636",
|
|
1875
2146
|
"dark-high-contrast": "#04260f",
|
|
1876
2147
|
"dark-dimmed-high-contrast": "#0f5323"
|
|
2148
|
+
},
|
|
2149
|
+
"org.primer.llm": {
|
|
2150
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2151
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1877
2152
|
}
|
|
1878
2153
|
},
|
|
1879
2154
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1881,6 +2156,7 @@
|
|
|
1881
2156
|
"original": {
|
|
1882
2157
|
"$value": "{base.color.blue.5}",
|
|
1883
2158
|
"$type": "color",
|
|
2159
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1884
2160
|
"$extensions": {
|
|
1885
2161
|
"org.primer.figma": {
|
|
1886
2162
|
"collection": "mode",
|
|
@@ -1903,6 +2179,10 @@
|
|
|
1903
2179
|
"light-high-contrast": "{base.color.green.5}",
|
|
1904
2180
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1905
2181
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2182
|
+
},
|
|
2183
|
+
"org.primer.llm": {
|
|
2184
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2185
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1906
2186
|
}
|
|
1907
2187
|
},
|
|
1908
2188
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1915,6 +2195,7 @@
|
|
|
1915
2195
|
"key": "{bgColor.success.muted}",
|
|
1916
2196
|
"$value": "#388bfd26",
|
|
1917
2197
|
"$type": "color",
|
|
2198
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1918
2199
|
"$extensions": {
|
|
1919
2200
|
"org.primer.figma": {
|
|
1920
2201
|
"collection": "mode",
|
|
@@ -1964,6 +2245,10 @@
|
|
|
1964
2245
|
"isSource": true,
|
|
1965
2246
|
"$type": "color"
|
|
1966
2247
|
}
|
|
2248
|
+
},
|
|
2249
|
+
"org.primer.llm": {
|
|
2250
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2251
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1967
2252
|
}
|
|
1968
2253
|
},
|
|
1969
2254
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1972,6 +2257,7 @@
|
|
|
1972
2257
|
"original": {
|
|
1973
2258
|
"$value": "{base.color.blue.4}",
|
|
1974
2259
|
"$type": "color",
|
|
2260
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1975
2261
|
"$extensions": {
|
|
1976
2262
|
"org.primer.figma": {
|
|
1977
2263
|
"collection": "mode",
|
|
@@ -2021,6 +2307,10 @@
|
|
|
2021
2307
|
"isSource": true,
|
|
2022
2308
|
"$type": "color"
|
|
2023
2309
|
}
|
|
2310
|
+
},
|
|
2311
|
+
"org.primer.llm": {
|
|
2312
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2313
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2024
2314
|
}
|
|
2025
2315
|
},
|
|
2026
2316
|
"alpha": 0.15,
|
|
@@ -2034,6 +2324,7 @@
|
|
|
2034
2324
|
"key": "{bgColor.transparent}",
|
|
2035
2325
|
"$value": "#00000000",
|
|
2036
2326
|
"$type": "color",
|
|
2327
|
+
"$description": "Fully transparent background",
|
|
2037
2328
|
"$extensions": {
|
|
2038
2329
|
"org.primer.figma": {
|
|
2039
2330
|
"collection": "mode",
|
|
@@ -2042,6 +2333,10 @@
|
|
|
2042
2333
|
"codeSyntax": {
|
|
2043
2334
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2044
2335
|
}
|
|
2336
|
+
},
|
|
2337
|
+
"org.primer.llm": {
|
|
2338
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2339
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2045
2340
|
}
|
|
2046
2341
|
},
|
|
2047
2342
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2049,6 +2344,7 @@
|
|
|
2049
2344
|
"original": {
|
|
2050
2345
|
"$value": "{base.color.transparent}",
|
|
2051
2346
|
"$type": "color",
|
|
2347
|
+
"$description": "Fully transparent background",
|
|
2052
2348
|
"$extensions": {
|
|
2053
2349
|
"org.primer.figma": {
|
|
2054
2350
|
"collection": "mode",
|
|
@@ -2057,6 +2353,10 @@
|
|
|
2057
2353
|
"codeSyntax": {
|
|
2058
2354
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2059
2355
|
}
|
|
2356
|
+
},
|
|
2357
|
+
"org.primer.llm": {
|
|
2358
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2359
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2060
2360
|
}
|
|
2061
2361
|
},
|
|
2062
2362
|
"key": "{bgColor.transparent}"
|
|
@@ -2069,6 +2369,7 @@
|
|
|
2069
2369
|
"key": "{bgColor.upsell.emphasis}",
|
|
2070
2370
|
"$value": "#8957e5",
|
|
2071
2371
|
"$type": "color",
|
|
2372
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2072
2373
|
"$extensions": {
|
|
2073
2374
|
"org.primer.figma": {
|
|
2074
2375
|
"collection": "mode",
|
|
@@ -2077,6 +2378,10 @@
|
|
|
2077
2378
|
"codeSyntax": {
|
|
2078
2379
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2079
2380
|
}
|
|
2381
|
+
},
|
|
2382
|
+
"org.primer.llm": {
|
|
2383
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2384
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2080
2385
|
}
|
|
2081
2386
|
},
|
|
2082
2387
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2084,6 +2389,7 @@
|
|
|
2084
2389
|
"original": {
|
|
2085
2390
|
"$value": "{bgColor.done.emphasis}",
|
|
2086
2391
|
"$type": "color",
|
|
2392
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2087
2393
|
"$extensions": {
|
|
2088
2394
|
"org.primer.figma": {
|
|
2089
2395
|
"collection": "mode",
|
|
@@ -2092,6 +2398,10 @@
|
|
|
2092
2398
|
"codeSyntax": {
|
|
2093
2399
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2094
2400
|
}
|
|
2401
|
+
},
|
|
2402
|
+
"org.primer.llm": {
|
|
2403
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2404
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2095
2405
|
}
|
|
2096
2406
|
},
|
|
2097
2407
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2104,6 +2414,7 @@
|
|
|
2104
2414
|
"key": "{bgColor.upsell.muted}",
|
|
2105
2415
|
"$value": "#ab7df826",
|
|
2106
2416
|
"$type": "color",
|
|
2417
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2107
2418
|
"$extensions": {
|
|
2108
2419
|
"org.primer.figma": {
|
|
2109
2420
|
"collection": "mode",
|
|
@@ -2112,6 +2423,10 @@
|
|
|
2112
2423
|
"codeSyntax": {
|
|
2113
2424
|
"web": "var(--bgColor-upsell-muted)"
|
|
2114
2425
|
}
|
|
2426
|
+
},
|
|
2427
|
+
"org.primer.llm": {
|
|
2428
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2429
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2115
2430
|
}
|
|
2116
2431
|
},
|
|
2117
2432
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2119,6 +2434,7 @@
|
|
|
2119
2434
|
"original": {
|
|
2120
2435
|
"$value": "{bgColor.done.muted}",
|
|
2121
2436
|
"$type": "color",
|
|
2437
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2122
2438
|
"$extensions": {
|
|
2123
2439
|
"org.primer.figma": {
|
|
2124
2440
|
"collection": "mode",
|
|
@@ -2127,6 +2443,10 @@
|
|
|
2127
2443
|
"codeSyntax": {
|
|
2128
2444
|
"web": "var(--bgColor-upsell-muted)"
|
|
2129
2445
|
}
|
|
2446
|
+
},
|
|
2447
|
+
"org.primer.llm": {
|
|
2448
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2449
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2130
2450
|
}
|
|
2131
2451
|
},
|
|
2132
2452
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2139,6 +2459,7 @@
|
|
|
2139
2459
|
"key": "{bgColor.white}",
|
|
2140
2460
|
"$value": "#ffffff",
|
|
2141
2461
|
"$type": "color",
|
|
2462
|
+
"$description": "Pure white background",
|
|
2142
2463
|
"$extensions": {
|
|
2143
2464
|
"org.primer.figma": {
|
|
2144
2465
|
"collection": "mode",
|
|
@@ -2147,6 +2468,10 @@
|
|
|
2147
2468
|
},
|
|
2148
2469
|
"org.primer.overrides": {
|
|
2149
2470
|
"dark": "#ffffff"
|
|
2471
|
+
},
|
|
2472
|
+
"org.primer.llm": {
|
|
2473
|
+
"doNotUse": true,
|
|
2474
|
+
"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."
|
|
2150
2475
|
}
|
|
2151
2476
|
},
|
|
2152
2477
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2154,6 +2479,7 @@
|
|
|
2154
2479
|
"original": {
|
|
2155
2480
|
"$value": "{base.color.neutral.13}",
|
|
2156
2481
|
"$type": "color",
|
|
2482
|
+
"$description": "Pure white background",
|
|
2157
2483
|
"$extensions": {
|
|
2158
2484
|
"org.primer.figma": {
|
|
2159
2485
|
"collection": "mode",
|
|
@@ -2162,6 +2488,10 @@
|
|
|
2162
2488
|
},
|
|
2163
2489
|
"org.primer.overrides": {
|
|
2164
2490
|
"dark": "{base.color.neutral.13}"
|
|
2491
|
+
},
|
|
2492
|
+
"org.primer.llm": {
|
|
2493
|
+
"doNotUse": true,
|
|
2494
|
+
"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."
|
|
2165
2495
|
}
|
|
2166
2496
|
},
|
|
2167
2497
|
"key": "{bgColor.white}"
|
|
@@ -2172,7 +2502,7 @@
|
|
|
2172
2502
|
},
|
|
2173
2503
|
"border-accent-emphasis": {
|
|
2174
2504
|
"key": "{border.accent.emphasis}",
|
|
2175
|
-
"$value": "0.
|
|
2505
|
+
"$value": "0.0625rem,1px solid #1f6feb",
|
|
2176
2506
|
"$type": "border",
|
|
2177
2507
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2178
2508
|
"isSource": true,
|
|
@@ -2191,7 +2521,7 @@
|
|
|
2191
2521
|
},
|
|
2192
2522
|
"border-accent-muted": {
|
|
2193
2523
|
"key": "{border.accent.muted}",
|
|
2194
|
-
"$value": "0.
|
|
2524
|
+
"$value": "0.0625rem,1px solid #388bfd66",
|
|
2195
2525
|
"$type": "border",
|
|
2196
2526
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2197
2527
|
"isSource": true,
|
|
@@ -2210,7 +2540,7 @@
|
|
|
2210
2540
|
},
|
|
2211
2541
|
"border-attention-emphasis": {
|
|
2212
2542
|
"key": "{border.attention.emphasis}",
|
|
2213
|
-
"$value": "0.
|
|
2543
|
+
"$value": "0.0625rem,1px solid #9e6a03",
|
|
2214
2544
|
"$type": "border",
|
|
2215
2545
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2216
2546
|
"isSource": true,
|
|
@@ -2229,7 +2559,7 @@
|
|
|
2229
2559
|
},
|
|
2230
2560
|
"border-attention-muted": {
|
|
2231
2561
|
"key": "{border.attention.muted}",
|
|
2232
|
-
"$value": "0.
|
|
2562
|
+
"$value": "0.0625rem,1px solid #bb800966",
|
|
2233
2563
|
"$type": "border",
|
|
2234
2564
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2235
2565
|
"isSource": true,
|
|
@@ -2248,7 +2578,7 @@
|
|
|
2248
2578
|
},
|
|
2249
2579
|
"border-closed-emphasis": {
|
|
2250
2580
|
"key": "{border.closed.emphasis}",
|
|
2251
|
-
"$value": "0.
|
|
2581
|
+
"$value": "0.0625rem,1px solid #da3633",
|
|
2252
2582
|
"$type": "border",
|
|
2253
2583
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2254
2584
|
"isSource": true,
|
|
@@ -2263,7 +2593,7 @@
|
|
|
2263
2593
|
},
|
|
2264
2594
|
"border-closed-muted": {
|
|
2265
2595
|
"key": "{border.closed.muted}",
|
|
2266
|
-
"$value": "0.
|
|
2596
|
+
"$value": "0.0625rem,1px solid #f8514966",
|
|
2267
2597
|
"$type": "border",
|
|
2268
2598
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2269
2599
|
"isSource": true,
|
|
@@ -2278,7 +2608,7 @@
|
|
|
2278
2608
|
},
|
|
2279
2609
|
"border-danger-emphasis": {
|
|
2280
2610
|
"key": "{border.danger.emphasis}",
|
|
2281
|
-
"$value": "0.
|
|
2611
|
+
"$value": "0.0625rem,1px solid #da3633",
|
|
2282
2612
|
"$type": "border",
|
|
2283
2613
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2284
2614
|
"isSource": true,
|
|
@@ -2297,7 +2627,7 @@
|
|
|
2297
2627
|
},
|
|
2298
2628
|
"border-danger-muted": {
|
|
2299
2629
|
"key": "{border.danger.muted}",
|
|
2300
|
-
"$value": "0.
|
|
2630
|
+
"$value": "0.0625rem,1px solid #f8514966",
|
|
2301
2631
|
"$type": "border",
|
|
2302
2632
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2303
2633
|
"isSource": true,
|
|
@@ -2316,7 +2646,7 @@
|
|
|
2316
2646
|
},
|
|
2317
2647
|
"border-default": {
|
|
2318
2648
|
"key": "{border.default}",
|
|
2319
|
-
"$value": "0.
|
|
2649
|
+
"$value": "0.0625rem,1px solid #3d444d",
|
|
2320
2650
|
"$type": "border",
|
|
2321
2651
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2322
2652
|
"isSource": true,
|
|
@@ -2335,7 +2665,7 @@
|
|
|
2335
2665
|
},
|
|
2336
2666
|
"border-disabled": {
|
|
2337
2667
|
"key": "{border.disabled}",
|
|
2338
|
-
"$value": "0.
|
|
2668
|
+
"$value": "0.0625rem,1px solid #656c761a",
|
|
2339
2669
|
"$type": "border",
|
|
2340
2670
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2341
2671
|
"isSource": true,
|
|
@@ -2354,7 +2684,7 @@
|
|
|
2354
2684
|
},
|
|
2355
2685
|
"border-done-emphasis": {
|
|
2356
2686
|
"key": "{border.done.emphasis}",
|
|
2357
|
-
"$value": "0.
|
|
2687
|
+
"$value": "0.0625rem,1px solid #8957e5",
|
|
2358
2688
|
"$type": "border",
|
|
2359
2689
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2360
2690
|
"isSource": true,
|
|
@@ -2373,7 +2703,7 @@
|
|
|
2373
2703
|
},
|
|
2374
2704
|
"border-done-muted": {
|
|
2375
2705
|
"key": "{border.done.muted}",
|
|
2376
|
-
"$value": "0.
|
|
2706
|
+
"$value": "0.0625rem,1px solid #ab7df866",
|
|
2377
2707
|
"$type": "border",
|
|
2378
2708
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2379
2709
|
"isSource": true,
|
|
@@ -2392,7 +2722,7 @@
|
|
|
2392
2722
|
},
|
|
2393
2723
|
"border-emphasis": {
|
|
2394
2724
|
"key": "{border.emphasis}",
|
|
2395
|
-
"$value": "0.
|
|
2725
|
+
"$value": "0.0625rem,1px solid #656c76",
|
|
2396
2726
|
"$type": "border",
|
|
2397
2727
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2398
2728
|
"isSource": true,
|
|
@@ -2411,7 +2741,7 @@
|
|
|
2411
2741
|
},
|
|
2412
2742
|
"border-muted": {
|
|
2413
2743
|
"key": "{border.muted}",
|
|
2414
|
-
"$value": "0.
|
|
2744
|
+
"$value": "0.0625rem,1px solid #3d444db3",
|
|
2415
2745
|
"$type": "border",
|
|
2416
2746
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2417
2747
|
"isSource": true,
|
|
@@ -2430,7 +2760,7 @@
|
|
|
2430
2760
|
},
|
|
2431
2761
|
"border-neutral-emphasis": {
|
|
2432
2762
|
"key": "{border.neutral.emphasis}",
|
|
2433
|
-
"$value": "0.
|
|
2763
|
+
"$value": "0.0625rem,1px solid #656c76",
|
|
2434
2764
|
"$type": "border",
|
|
2435
2765
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2436
2766
|
"isSource": true,
|
|
@@ -2449,7 +2779,7 @@
|
|
|
2449
2779
|
},
|
|
2450
2780
|
"border-neutral-muted": {
|
|
2451
2781
|
"key": "{border.neutral.muted}",
|
|
2452
|
-
"$value": "0.
|
|
2782
|
+
"$value": "0.0625rem,1px solid #3d444db3",
|
|
2453
2783
|
"$type": "border",
|
|
2454
2784
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2455
2785
|
"isSource": true,
|
|
@@ -2468,7 +2798,7 @@
|
|
|
2468
2798
|
},
|
|
2469
2799
|
"border-open-emphasis": {
|
|
2470
2800
|
"key": "{border.open.emphasis}",
|
|
2471
|
-
"$value": "0.
|
|
2801
|
+
"$value": "0.0625rem,1px solid #1f6feb",
|
|
2472
2802
|
"$type": "border",
|
|
2473
2803
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2474
2804
|
"isSource": true,
|
|
@@ -2483,7 +2813,7 @@
|
|
|
2483
2813
|
},
|
|
2484
2814
|
"border-open-muted": {
|
|
2485
2815
|
"key": "{border.open.muted}",
|
|
2486
|
-
"$value": "0.
|
|
2816
|
+
"$value": "0.0625rem,1px solid #388bfd66",
|
|
2487
2817
|
"$type": "border",
|
|
2488
2818
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2489
2819
|
"isSource": true,
|
|
@@ -2498,7 +2828,7 @@
|
|
|
2498
2828
|
},
|
|
2499
2829
|
"border-severe-emphasis": {
|
|
2500
2830
|
"key": "{border.severe.emphasis}",
|
|
2501
|
-
"$value": "0.
|
|
2831
|
+
"$value": "0.0625rem,1px solid #da3633",
|
|
2502
2832
|
"$type": "border",
|
|
2503
2833
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2504
2834
|
"isSource": true,
|
|
@@ -2517,7 +2847,7 @@
|
|
|
2517
2847
|
},
|
|
2518
2848
|
"border-severe-muted": {
|
|
2519
2849
|
"key": "{border.severe.muted}",
|
|
2520
|
-
"$value": "0.
|
|
2850
|
+
"$value": "0.0625rem,1px solid #f8514966",
|
|
2521
2851
|
"$type": "border",
|
|
2522
2852
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2523
2853
|
"isSource": true,
|
|
@@ -2536,7 +2866,7 @@
|
|
|
2536
2866
|
},
|
|
2537
2867
|
"border-sponsors-emphasis": {
|
|
2538
2868
|
"key": "{border.sponsors.emphasis}",
|
|
2539
|
-
"$value": "0.
|
|
2869
|
+
"$value": "0.0625rem,1px solid #bf4b8a",
|
|
2540
2870
|
"$type": "border",
|
|
2541
2871
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2542
2872
|
"isSource": true,
|
|
@@ -2555,7 +2885,7 @@
|
|
|
2555
2885
|
},
|
|
2556
2886
|
"border-sponsors-muted": {
|
|
2557
2887
|
"key": "{border.sponsors.muted}",
|
|
2558
|
-
"$value": "0.
|
|
2888
|
+
"$value": "0.0625rem,1px solid #db61a266",
|
|
2559
2889
|
"$type": "border",
|
|
2560
2890
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2561
2891
|
"isSource": true,
|
|
@@ -2574,7 +2904,7 @@
|
|
|
2574
2904
|
},
|
|
2575
2905
|
"border-success-emphasis": {
|
|
2576
2906
|
"key": "{border.success.emphasis}",
|
|
2577
|
-
"$value": "0.
|
|
2907
|
+
"$value": "0.0625rem,1px solid #1f6feb",
|
|
2578
2908
|
"$type": "border",
|
|
2579
2909
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2580
2910
|
"isSource": true,
|
|
@@ -2593,7 +2923,7 @@
|
|
|
2593
2923
|
},
|
|
2594
2924
|
"border-success-muted": {
|
|
2595
2925
|
"key": "{border.success.muted}",
|
|
2596
|
-
"$value": "0.
|
|
2926
|
+
"$value": "0.0625rem,1px solid #388bfd66",
|
|
2597
2927
|
"$type": "border",
|
|
2598
2928
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2599
2929
|
"isSource": true,
|
|
@@ -2612,7 +2942,7 @@
|
|
|
2612
2942
|
},
|
|
2613
2943
|
"border-transparent": {
|
|
2614
2944
|
"key": "{border.transparent}",
|
|
2615
|
-
"$value": "0.
|
|
2945
|
+
"$value": "0.0625rem,1px solid #00000000",
|
|
2616
2946
|
"$type": "border",
|
|
2617
2947
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2618
2948
|
"isSource": true,
|
|
@@ -2631,7 +2961,7 @@
|
|
|
2631
2961
|
},
|
|
2632
2962
|
"border-upsell-emphasis": {
|
|
2633
2963
|
"key": "{border.upsell.emphasis}",
|
|
2634
|
-
"$value": "0.
|
|
2964
|
+
"$value": "0.0625rem,1px solid #8957e5",
|
|
2635
2965
|
"$type": "border",
|
|
2636
2966
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2637
2967
|
"isSource": true,
|
|
@@ -2650,7 +2980,7 @@
|
|
|
2650
2980
|
},
|
|
2651
2981
|
"border-upsell-muted": {
|
|
2652
2982
|
"key": "{border.upsell.muted}",
|
|
2653
|
-
"$value": "0.
|
|
2983
|
+
"$value": "0.0625rem,1px solid #ab7df866",
|
|
2654
2984
|
"$type": "border",
|
|
2655
2985
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2656
2986
|
"isSource": true,
|
|
@@ -2671,6 +3001,7 @@
|
|
|
2671
3001
|
"key": "{borderColor.accent.emphasis}",
|
|
2672
3002
|
"$value": "#1f6feb",
|
|
2673
3003
|
"$type": "color",
|
|
3004
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2674
3005
|
"$extensions": {
|
|
2675
3006
|
"org.primer.figma": {
|
|
2676
3007
|
"collection": "mode",
|
|
@@ -2682,6 +3013,10 @@
|
|
|
2682
3013
|
},
|
|
2683
3014
|
"org.primer.overrides": {
|
|
2684
3015
|
"dark-dimmed-high-contrast": "#79c0ff"
|
|
3016
|
+
},
|
|
3017
|
+
"org.primer.llm": {
|
|
3018
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3019
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2685
3020
|
}
|
|
2686
3021
|
},
|
|
2687
3022
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2689,6 +3024,7 @@
|
|
|
2689
3024
|
"original": {
|
|
2690
3025
|
"$value": "{base.color.blue.5}",
|
|
2691
3026
|
"$type": "color",
|
|
3027
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2692
3028
|
"$extensions": {
|
|
2693
3029
|
"org.primer.figma": {
|
|
2694
3030
|
"collection": "mode",
|
|
@@ -2700,6 +3036,10 @@
|
|
|
2700
3036
|
},
|
|
2701
3037
|
"org.primer.overrides": {
|
|
2702
3038
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3039
|
+
},
|
|
3040
|
+
"org.primer.llm": {
|
|
3041
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3042
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2703
3043
|
}
|
|
2704
3044
|
},
|
|
2705
3045
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2712,6 +3052,7 @@
|
|
|
2712
3052
|
"key": "{borderColor.accent.muted}",
|
|
2713
3053
|
"$value": "#388bfd66",
|
|
2714
3054
|
"$type": "color",
|
|
3055
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2715
3056
|
"$extensions": {
|
|
2716
3057
|
"org.primer.figma": {
|
|
2717
3058
|
"collection": "mode",
|
|
@@ -2772,6 +3113,10 @@
|
|
|
2772
3113
|
"isSource": true,
|
|
2773
3114
|
"$type": "color"
|
|
2774
3115
|
}
|
|
3116
|
+
},
|
|
3117
|
+
"org.primer.llm": {
|
|
3118
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3119
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2775
3120
|
}
|
|
2776
3121
|
},
|
|
2777
3122
|
"alpha": 0.4,
|
|
@@ -2780,6 +3125,7 @@
|
|
|
2780
3125
|
"original": {
|
|
2781
3126
|
"$value": "{base.color.blue.4}",
|
|
2782
3127
|
"$type": "color",
|
|
3128
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2783
3129
|
"$extensions": {
|
|
2784
3130
|
"org.primer.figma": {
|
|
2785
3131
|
"collection": "mode",
|
|
@@ -2840,6 +3186,10 @@
|
|
|
2840
3186
|
"isSource": true,
|
|
2841
3187
|
"$type": "color"
|
|
2842
3188
|
}
|
|
3189
|
+
},
|
|
3190
|
+
"org.primer.llm": {
|
|
3191
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3192
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2843
3193
|
}
|
|
2844
3194
|
},
|
|
2845
3195
|
"alpha": 0.4,
|
|
@@ -2853,6 +3203,7 @@
|
|
|
2853
3203
|
"key": "{borderColor.attention.emphasis}",
|
|
2854
3204
|
"$value": "#9e6a03",
|
|
2855
3205
|
"$type": "color",
|
|
3206
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2856
3207
|
"$extensions": {
|
|
2857
3208
|
"org.primer.figma": {
|
|
2858
3209
|
"collection": "mode",
|
|
@@ -2864,6 +3215,10 @@
|
|
|
2864
3215
|
},
|
|
2865
3216
|
"org.primer.overrides": {
|
|
2866
3217
|
"dark-dimmed-high-contrast": "#e3b341"
|
|
3218
|
+
},
|
|
3219
|
+
"org.primer.llm": {
|
|
3220
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3221
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2867
3222
|
}
|
|
2868
3223
|
},
|
|
2869
3224
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2871,6 +3226,7 @@
|
|
|
2871
3226
|
"original": {
|
|
2872
3227
|
"$value": "{base.color.yellow.5}",
|
|
2873
3228
|
"$type": "color",
|
|
3229
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2874
3230
|
"$extensions": {
|
|
2875
3231
|
"org.primer.figma": {
|
|
2876
3232
|
"collection": "mode",
|
|
@@ -2882,6 +3238,10 @@
|
|
|
2882
3238
|
},
|
|
2883
3239
|
"org.primer.overrides": {
|
|
2884
3240
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3241
|
+
},
|
|
3242
|
+
"org.primer.llm": {
|
|
3243
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3244
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2885
3245
|
}
|
|
2886
3246
|
},
|
|
2887
3247
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2894,6 +3254,7 @@
|
|
|
2894
3254
|
"key": "{borderColor.attention.muted}",
|
|
2895
3255
|
"$value": "#bb800966",
|
|
2896
3256
|
"$type": "color",
|
|
3257
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2897
3258
|
"$extensions": {
|
|
2898
3259
|
"org.primer.figma": {
|
|
2899
3260
|
"collection": "mode",
|
|
@@ -2954,6 +3315,10 @@
|
|
|
2954
3315
|
"isSource": true,
|
|
2955
3316
|
"$type": "color"
|
|
2956
3317
|
}
|
|
3318
|
+
},
|
|
3319
|
+
"org.primer.llm": {
|
|
3320
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3321
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2957
3322
|
}
|
|
2958
3323
|
},
|
|
2959
3324
|
"alpha": 0.4,
|
|
@@ -2962,6 +3327,7 @@
|
|
|
2962
3327
|
"original": {
|
|
2963
3328
|
"$value": "{base.color.yellow.4}",
|
|
2964
3329
|
"$type": "color",
|
|
3330
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2965
3331
|
"$extensions": {
|
|
2966
3332
|
"org.primer.figma": {
|
|
2967
3333
|
"collection": "mode",
|
|
@@ -3022,6 +3388,10 @@
|
|
|
3022
3388
|
"isSource": true,
|
|
3023
3389
|
"$type": "color"
|
|
3024
3390
|
}
|
|
3391
|
+
},
|
|
3392
|
+
"org.primer.llm": {
|
|
3393
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3394
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3025
3395
|
}
|
|
3026
3396
|
},
|
|
3027
3397
|
"alpha": 0.4,
|
|
@@ -3035,6 +3405,7 @@
|
|
|
3035
3405
|
"key": "{borderColor.closed.emphasis}",
|
|
3036
3406
|
"$value": "#656c76",
|
|
3037
3407
|
"$type": "color",
|
|
3408
|
+
"$description": "Strong border for closed state badges",
|
|
3038
3409
|
"$extensions": {
|
|
3039
3410
|
"org.primer.figma": {
|
|
3040
3411
|
"collection": "mode",
|
|
@@ -3053,6 +3424,10 @@
|
|
|
3053
3424
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
3054
3425
|
"light-tritanopia": "#656c76",
|
|
3055
3426
|
"light-tritanopia-high-contrast": "#656c76"
|
|
3427
|
+
},
|
|
3428
|
+
"org.primer.llm": {
|
|
3429
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3430
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3056
3431
|
}
|
|
3057
3432
|
},
|
|
3058
3433
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3060,6 +3435,7 @@
|
|
|
3060
3435
|
"original": {
|
|
3061
3436
|
"$value": "{borderColor.emphasis}",
|
|
3062
3437
|
"$type": "color",
|
|
3438
|
+
"$description": "Strong border for closed state badges",
|
|
3063
3439
|
"$extensions": {
|
|
3064
3440
|
"org.primer.figma": {
|
|
3065
3441
|
"collection": "mode",
|
|
@@ -3078,6 +3454,10 @@
|
|
|
3078
3454
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3079
3455
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3080
3456
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3457
|
+
},
|
|
3458
|
+
"org.primer.llm": {
|
|
3459
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3460
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3081
3461
|
}
|
|
3082
3462
|
},
|
|
3083
3463
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3090,6 +3470,7 @@
|
|
|
3090
3470
|
"key": "{borderColor.closed.muted}",
|
|
3091
3471
|
"$value": "#3d444d66",
|
|
3092
3472
|
"$type": "color",
|
|
3473
|
+
"$description": "Subtle border for closed state indicators",
|
|
3093
3474
|
"$extensions": {
|
|
3094
3475
|
"org.primer.figma": {
|
|
3095
3476
|
"collection": "mode",
|
|
@@ -3156,6 +3537,10 @@
|
|
|
3156
3537
|
"isSource": true,
|
|
3157
3538
|
"$type": "color"
|
|
3158
3539
|
}
|
|
3540
|
+
},
|
|
3541
|
+
"org.primer.llm": {
|
|
3542
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3543
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3159
3544
|
}
|
|
3160
3545
|
},
|
|
3161
3546
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3164,6 +3549,7 @@
|
|
|
3164
3549
|
"original": {
|
|
3165
3550
|
"$value": "{borderColor.default}",
|
|
3166
3551
|
"$type": "color",
|
|
3552
|
+
"$description": "Subtle border for closed state indicators",
|
|
3167
3553
|
"$extensions": {
|
|
3168
3554
|
"org.primer.figma": {
|
|
3169
3555
|
"collection": "mode",
|
|
@@ -3230,6 +3616,10 @@
|
|
|
3230
3616
|
"isSource": true,
|
|
3231
3617
|
"$type": "color"
|
|
3232
3618
|
}
|
|
3619
|
+
},
|
|
3620
|
+
"org.primer.llm": {
|
|
3621
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3622
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3233
3623
|
}
|
|
3234
3624
|
},
|
|
3235
3625
|
"alpha": 0.4,
|
|
@@ -3243,6 +3633,7 @@
|
|
|
3243
3633
|
"key": "{borderColor.danger.emphasis}",
|
|
3244
3634
|
"$value": "#da3633",
|
|
3245
3635
|
"$type": "color",
|
|
3636
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3246
3637
|
"$extensions": {
|
|
3247
3638
|
"org.primer.figma": {
|
|
3248
3639
|
"collection": "mode",
|
|
@@ -3278,6 +3669,10 @@
|
|
|
3278
3669
|
"$type": "color"
|
|
3279
3670
|
},
|
|
3280
3671
|
"dark-dimmed-high-contrast": "#ffa198"
|
|
3672
|
+
},
|
|
3673
|
+
"org.primer.llm": {
|
|
3674
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3675
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3281
3676
|
}
|
|
3282
3677
|
},
|
|
3283
3678
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3285,6 +3680,7 @@
|
|
|
3285
3680
|
"original": {
|
|
3286
3681
|
"$value": "{base.color.red.5}",
|
|
3287
3682
|
"$type": "color",
|
|
3683
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3288
3684
|
"$extensions": {
|
|
3289
3685
|
"org.primer.figma": {
|
|
3290
3686
|
"collection": "mode",
|
|
@@ -3320,6 +3716,10 @@
|
|
|
3320
3716
|
"$type": "color"
|
|
3321
3717
|
},
|
|
3322
3718
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3719
|
+
},
|
|
3720
|
+
"org.primer.llm": {
|
|
3721
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3722
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3323
3723
|
}
|
|
3324
3724
|
},
|
|
3325
3725
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3332,6 +3732,7 @@
|
|
|
3332
3732
|
"key": "{borderColor.danger.muted}",
|
|
3333
3733
|
"$value": "#f8514966",
|
|
3334
3734
|
"$type": "color",
|
|
3735
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3335
3736
|
"$extensions": {
|
|
3336
3737
|
"org.primer.figma": {
|
|
3337
3738
|
"collection": "mode",
|
|
@@ -3405,6 +3806,10 @@
|
|
|
3405
3806
|
"isSource": true,
|
|
3406
3807
|
"$type": "color"
|
|
3407
3808
|
}
|
|
3809
|
+
},
|
|
3810
|
+
"org.primer.llm": {
|
|
3811
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3812
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3408
3813
|
}
|
|
3409
3814
|
},
|
|
3410
3815
|
"alpha": 0.4,
|
|
@@ -3413,6 +3818,7 @@
|
|
|
3413
3818
|
"original": {
|
|
3414
3819
|
"$value": "{base.color.red.4}",
|
|
3415
3820
|
"$type": "color",
|
|
3821
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3416
3822
|
"$extensions": {
|
|
3417
3823
|
"org.primer.figma": {
|
|
3418
3824
|
"collection": "mode",
|
|
@@ -3486,6 +3892,10 @@
|
|
|
3486
3892
|
"isSource": true,
|
|
3487
3893
|
"$type": "color"
|
|
3488
3894
|
}
|
|
3895
|
+
},
|
|
3896
|
+
"org.primer.llm": {
|
|
3897
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3898
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3489
3899
|
}
|
|
3490
3900
|
},
|
|
3491
3901
|
"alpha": 0.4,
|
|
@@ -3499,6 +3909,7 @@
|
|
|
3499
3909
|
"key": "{borderColor.default}",
|
|
3500
3910
|
"$value": "#3d444d",
|
|
3501
3911
|
"$type": "color",
|
|
3912
|
+
"$description": "Default border color for most UI elements",
|
|
3502
3913
|
"$extensions": {
|
|
3503
3914
|
"org.primer.overrides": {
|
|
3504
3915
|
"dark": "#3d444d",
|
|
@@ -3518,6 +3929,10 @@
|
|
|
3518
3929
|
"codeSyntax": {
|
|
3519
3930
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3520
3931
|
}
|
|
3932
|
+
},
|
|
3933
|
+
"org.primer.llm": {
|
|
3934
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3935
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3521
3936
|
}
|
|
3522
3937
|
},
|
|
3523
3938
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3525,6 +3940,7 @@
|
|
|
3525
3940
|
"original": {
|
|
3526
3941
|
"$value": "{base.color.neutral.7}",
|
|
3527
3942
|
"$type": "color",
|
|
3943
|
+
"$description": "Default border color for most UI elements",
|
|
3528
3944
|
"$extensions": {
|
|
3529
3945
|
"org.primer.overrides": {
|
|
3530
3946
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3544,6 +3960,10 @@
|
|
|
3544
3960
|
"codeSyntax": {
|
|
3545
3961
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3546
3962
|
}
|
|
3963
|
+
},
|
|
3964
|
+
"org.primer.llm": {
|
|
3965
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3966
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3547
3967
|
}
|
|
3548
3968
|
},
|
|
3549
3969
|
"key": "{borderColor.default}"
|
|
@@ -3556,6 +3976,7 @@
|
|
|
3556
3976
|
"key": "{borderColor.disabled}",
|
|
3557
3977
|
"$value": "#656c761a",
|
|
3558
3978
|
"$type": "color",
|
|
3979
|
+
"$description": "Border color for disabled interactive elements",
|
|
3559
3980
|
"$extensions": {
|
|
3560
3981
|
"org.primer.figma": {
|
|
3561
3982
|
"collection": "mode",
|
|
@@ -3598,6 +4019,10 @@
|
|
|
3598
4019
|
"isSource": true,
|
|
3599
4020
|
"$type": "color"
|
|
3600
4021
|
}
|
|
4022
|
+
},
|
|
4023
|
+
"org.primer.llm": {
|
|
4024
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4025
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3601
4026
|
}
|
|
3602
4027
|
},
|
|
3603
4028
|
"alpha": 0.1,
|
|
@@ -3606,6 +4031,7 @@
|
|
|
3606
4031
|
"original": {
|
|
3607
4032
|
"$value": "{base.color.neutral.8}",
|
|
3608
4033
|
"$type": "color",
|
|
4034
|
+
"$description": "Border color for disabled interactive elements",
|
|
3609
4035
|
"$extensions": {
|
|
3610
4036
|
"org.primer.figma": {
|
|
3611
4037
|
"collection": "mode",
|
|
@@ -3648,6 +4074,10 @@
|
|
|
3648
4074
|
"isSource": true,
|
|
3649
4075
|
"$type": "color"
|
|
3650
4076
|
}
|
|
4077
|
+
},
|
|
4078
|
+
"org.primer.llm": {
|
|
4079
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4080
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3651
4081
|
}
|
|
3652
4082
|
},
|
|
3653
4083
|
"alpha": 0.1,
|
|
@@ -3661,6 +4091,7 @@
|
|
|
3661
4091
|
"key": "{borderColor.done.emphasis}",
|
|
3662
4092
|
"$value": "#8957e5",
|
|
3663
4093
|
"$type": "color",
|
|
4094
|
+
"$description": "Strong border for completed/done state badges",
|
|
3664
4095
|
"$extensions": {
|
|
3665
4096
|
"org.primer.figma": {
|
|
3666
4097
|
"collection": "mode",
|
|
@@ -3672,6 +4103,10 @@
|
|
|
3672
4103
|
},
|
|
3673
4104
|
"org.primer.overrides": {
|
|
3674
4105
|
"dark-dimmed-high-contrast": "#d2a8ff"
|
|
4106
|
+
},
|
|
4107
|
+
"org.primer.llm": {
|
|
4108
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4109
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3675
4110
|
}
|
|
3676
4111
|
},
|
|
3677
4112
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3679,6 +4114,7 @@
|
|
|
3679
4114
|
"original": {
|
|
3680
4115
|
"$value": "{base.color.purple.5}",
|
|
3681
4116
|
"$type": "color",
|
|
4117
|
+
"$description": "Strong border for completed/done state badges",
|
|
3682
4118
|
"$extensions": {
|
|
3683
4119
|
"org.primer.figma": {
|
|
3684
4120
|
"collection": "mode",
|
|
@@ -3690,6 +4126,10 @@
|
|
|
3690
4126
|
},
|
|
3691
4127
|
"org.primer.overrides": {
|
|
3692
4128
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4129
|
+
},
|
|
4130
|
+
"org.primer.llm": {
|
|
4131
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4132
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3693
4133
|
}
|
|
3694
4134
|
},
|
|
3695
4135
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3702,6 +4142,7 @@
|
|
|
3702
4142
|
"key": "{borderColor.done.muted}",
|
|
3703
4143
|
"$value": "#ab7df866",
|
|
3704
4144
|
"$type": "color",
|
|
4145
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3705
4146
|
"$extensions": {
|
|
3706
4147
|
"org.primer.figma": {
|
|
3707
4148
|
"collection": "mode",
|
|
@@ -3762,6 +4203,10 @@
|
|
|
3762
4203
|
"isSource": true,
|
|
3763
4204
|
"$type": "color"
|
|
3764
4205
|
}
|
|
4206
|
+
},
|
|
4207
|
+
"org.primer.llm": {
|
|
4208
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4209
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3765
4210
|
}
|
|
3766
4211
|
},
|
|
3767
4212
|
"alpha": 0.4,
|
|
@@ -3770,6 +4215,7 @@
|
|
|
3770
4215
|
"original": {
|
|
3771
4216
|
"$value": "{base.color.purple.4}",
|
|
3772
4217
|
"$type": "color",
|
|
4218
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3773
4219
|
"$extensions": {
|
|
3774
4220
|
"org.primer.figma": {
|
|
3775
4221
|
"collection": "mode",
|
|
@@ -3830,6 +4276,10 @@
|
|
|
3830
4276
|
"isSource": true,
|
|
3831
4277
|
"$type": "color"
|
|
3832
4278
|
}
|
|
4279
|
+
},
|
|
4280
|
+
"org.primer.llm": {
|
|
4281
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4282
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3833
4283
|
}
|
|
3834
4284
|
},
|
|
3835
4285
|
"alpha": 0.4,
|
|
@@ -3843,6 +4293,7 @@
|
|
|
3843
4293
|
"key": "{borderColor.draft.emphasis}",
|
|
3844
4294
|
"$value": "#656c76",
|
|
3845
4295
|
"$type": "color",
|
|
4296
|
+
"$description": "Strong border for draft state badges",
|
|
3846
4297
|
"$extensions": {
|
|
3847
4298
|
"org.primer.figma": {
|
|
3848
4299
|
"collection": "mode",
|
|
@@ -3851,6 +4302,10 @@
|
|
|
3851
4302
|
"codeSyntax": {
|
|
3852
4303
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3853
4304
|
}
|
|
4305
|
+
},
|
|
4306
|
+
"org.primer.llm": {
|
|
4307
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4308
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3854
4309
|
}
|
|
3855
4310
|
},
|
|
3856
4311
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3858,6 +4313,7 @@
|
|
|
3858
4313
|
"original": {
|
|
3859
4314
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3860
4315
|
"$type": "color",
|
|
4316
|
+
"$description": "Strong border for draft state badges",
|
|
3861
4317
|
"$extensions": {
|
|
3862
4318
|
"org.primer.figma": {
|
|
3863
4319
|
"collection": "mode",
|
|
@@ -3866,6 +4322,10 @@
|
|
|
3866
4322
|
"codeSyntax": {
|
|
3867
4323
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3868
4324
|
}
|
|
4325
|
+
},
|
|
4326
|
+
"org.primer.llm": {
|
|
4327
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4328
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3869
4329
|
}
|
|
3870
4330
|
},
|
|
3871
4331
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3878,6 +4338,7 @@
|
|
|
3878
4338
|
"key": "{borderColor.draft.muted}",
|
|
3879
4339
|
"$value": "#3d444d66",
|
|
3880
4340
|
"$type": "color",
|
|
4341
|
+
"$description": "Subtle border for draft state indicators",
|
|
3881
4342
|
"$extensions": {
|
|
3882
4343
|
"org.primer.figma": {
|
|
3883
4344
|
"collection": "mode",
|
|
@@ -3944,6 +4405,10 @@
|
|
|
3944
4405
|
"isSource": true,
|
|
3945
4406
|
"$type": "color"
|
|
3946
4407
|
}
|
|
4408
|
+
},
|
|
4409
|
+
"org.primer.llm": {
|
|
4410
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4411
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3947
4412
|
}
|
|
3948
4413
|
},
|
|
3949
4414
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3952,6 +4417,7 @@
|
|
|
3952
4417
|
"original": {
|
|
3953
4418
|
"$value": "{borderColor.default}",
|
|
3954
4419
|
"$type": "color",
|
|
4420
|
+
"$description": "Subtle border for draft state indicators",
|
|
3955
4421
|
"$extensions": {
|
|
3956
4422
|
"org.primer.figma": {
|
|
3957
4423
|
"collection": "mode",
|
|
@@ -4018,6 +4484,10 @@
|
|
|
4018
4484
|
"isSource": true,
|
|
4019
4485
|
"$type": "color"
|
|
4020
4486
|
}
|
|
4487
|
+
},
|
|
4488
|
+
"org.primer.llm": {
|
|
4489
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4490
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4021
4491
|
}
|
|
4022
4492
|
},
|
|
4023
4493
|
"alpha": 0.4,
|
|
@@ -4031,6 +4501,7 @@
|
|
|
4031
4501
|
"key": "{borderColor.emphasis}",
|
|
4032
4502
|
"$value": "#656c76",
|
|
4033
4503
|
"$type": "color",
|
|
4504
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4034
4505
|
"$extensions": {
|
|
4035
4506
|
"org.primer.figma": {
|
|
4036
4507
|
"collection": "mode",
|
|
@@ -4045,6 +4516,10 @@
|
|
|
4045
4516
|
"dark-dimmed-high-contrast": "#3d444d",
|
|
4046
4517
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
4047
4518
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
4519
|
+
},
|
|
4520
|
+
"org.primer.llm": {
|
|
4521
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4522
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4048
4523
|
}
|
|
4049
4524
|
},
|
|
4050
4525
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4052,6 +4527,7 @@
|
|
|
4052
4527
|
"original": {
|
|
4053
4528
|
"$value": "{base.color.neutral.8}",
|
|
4054
4529
|
"$type": "color",
|
|
4530
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4055
4531
|
"$extensions": {
|
|
4056
4532
|
"org.primer.figma": {
|
|
4057
4533
|
"collection": "mode",
|
|
@@ -4066,6 +4542,10 @@
|
|
|
4066
4542
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4067
4543
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4068
4544
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4545
|
+
},
|
|
4546
|
+
"org.primer.llm": {
|
|
4547
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4548
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4069
4549
|
}
|
|
4070
4550
|
},
|
|
4071
4551
|
"key": "{borderColor.emphasis}"
|
|
@@ -4078,6 +4558,7 @@
|
|
|
4078
4558
|
"key": "{borderColor.muted}",
|
|
4079
4559
|
"$value": "#3d444db3",
|
|
4080
4560
|
"$type": "color",
|
|
4561
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4081
4562
|
"$extensions": {
|
|
4082
4563
|
"org.primer.figma": {
|
|
4083
4564
|
"collection": "mode",
|
|
@@ -4144,6 +4625,10 @@
|
|
|
4144
4625
|
"isSource": true,
|
|
4145
4626
|
"$type": "color"
|
|
4146
4627
|
}
|
|
4628
|
+
},
|
|
4629
|
+
"org.primer.llm": {
|
|
4630
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4631
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4147
4632
|
}
|
|
4148
4633
|
},
|
|
4149
4634
|
"alpha": 0.7,
|
|
@@ -4152,6 +4637,7 @@
|
|
|
4152
4637
|
"original": {
|
|
4153
4638
|
"$value": "{borderColor.default}",
|
|
4154
4639
|
"$type": "color",
|
|
4640
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4155
4641
|
"$extensions": {
|
|
4156
4642
|
"org.primer.figma": {
|
|
4157
4643
|
"collection": "mode",
|
|
@@ -4218,6 +4704,10 @@
|
|
|
4218
4704
|
"isSource": true,
|
|
4219
4705
|
"$type": "color"
|
|
4220
4706
|
}
|
|
4707
|
+
},
|
|
4708
|
+
"org.primer.llm": {
|
|
4709
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4710
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4221
4711
|
}
|
|
4222
4712
|
},
|
|
4223
4713
|
"alpha": 0.7,
|
|
@@ -4231,6 +4721,7 @@
|
|
|
4231
4721
|
"key": "{borderColor.neutral.emphasis}",
|
|
4232
4722
|
"$value": "#656c76",
|
|
4233
4723
|
"$type": "color",
|
|
4724
|
+
"$description": "Strong neutral semantic border",
|
|
4234
4725
|
"$extensions": {
|
|
4235
4726
|
"org.primer.figma": {
|
|
4236
4727
|
"collection": "mode",
|
|
@@ -4239,6 +4730,10 @@
|
|
|
4239
4730
|
},
|
|
4240
4731
|
"org.primer.overrides": {
|
|
4241
4732
|
"dark": "#656c76"
|
|
4733
|
+
},
|
|
4734
|
+
"org.primer.llm": {
|
|
4735
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4736
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4242
4737
|
}
|
|
4243
4738
|
},
|
|
4244
4739
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4246,6 +4741,7 @@
|
|
|
4246
4741
|
"original": {
|
|
4247
4742
|
"$value": "{borderColor.emphasis}",
|
|
4248
4743
|
"$type": "color",
|
|
4744
|
+
"$description": "Strong neutral semantic border",
|
|
4249
4745
|
"$extensions": {
|
|
4250
4746
|
"org.primer.figma": {
|
|
4251
4747
|
"collection": "mode",
|
|
@@ -4254,6 +4750,10 @@
|
|
|
4254
4750
|
},
|
|
4255
4751
|
"org.primer.overrides": {
|
|
4256
4752
|
"dark": "{borderColor.emphasis}"
|
|
4753
|
+
},
|
|
4754
|
+
"org.primer.llm": {
|
|
4755
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4756
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4257
4757
|
}
|
|
4258
4758
|
},
|
|
4259
4759
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4266,6 +4766,7 @@
|
|
|
4266
4766
|
"key": "{borderColor.neutral.muted}",
|
|
4267
4767
|
"$value": "#3d444db3",
|
|
4268
4768
|
"$type": "color",
|
|
4769
|
+
"$description": "Subtle neutral semantic border",
|
|
4269
4770
|
"$extensions": {
|
|
4270
4771
|
"org.primer.figma": {
|
|
4271
4772
|
"collection": "mode",
|
|
@@ -4287,6 +4788,10 @@
|
|
|
4287
4788
|
"isSource": true,
|
|
4288
4789
|
"$type": "color"
|
|
4289
4790
|
}
|
|
4791
|
+
},
|
|
4792
|
+
"org.primer.llm": {
|
|
4793
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4794
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4290
4795
|
}
|
|
4291
4796
|
},
|
|
4292
4797
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4294,6 +4799,7 @@
|
|
|
4294
4799
|
"original": {
|
|
4295
4800
|
"$value": "{borderColor.muted}",
|
|
4296
4801
|
"$type": "color",
|
|
4802
|
+
"$description": "Subtle neutral semantic border",
|
|
4297
4803
|
"$extensions": {
|
|
4298
4804
|
"org.primer.figma": {
|
|
4299
4805
|
"collection": "mode",
|
|
@@ -4315,6 +4821,10 @@
|
|
|
4315
4821
|
"isSource": true,
|
|
4316
4822
|
"$type": "color"
|
|
4317
4823
|
}
|
|
4824
|
+
},
|
|
4825
|
+
"org.primer.llm": {
|
|
4826
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4827
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4318
4828
|
}
|
|
4319
4829
|
},
|
|
4320
4830
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4327,6 +4837,7 @@
|
|
|
4327
4837
|
"key": "{borderColor.open.emphasis}",
|
|
4328
4838
|
"$value": "#da3633",
|
|
4329
4839
|
"$type": "color",
|
|
4840
|
+
"$description": "Strong border for open state badges",
|
|
4330
4841
|
"$extensions": {
|
|
4331
4842
|
"org.primer.figma": {
|
|
4332
4843
|
"collection": "mode",
|
|
@@ -4345,6 +4856,10 @@
|
|
|
4345
4856
|
"dark-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
4346
4857
|
"light-protanopia-deuteranopia": "#bd561d",
|
|
4347
4858
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d"
|
|
4859
|
+
},
|
|
4860
|
+
"org.primer.llm": {
|
|
4861
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4862
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4348
4863
|
}
|
|
4349
4864
|
},
|
|
4350
4865
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4352,6 +4867,7 @@
|
|
|
4352
4867
|
"original": {
|
|
4353
4868
|
"$value": "{base.color.red.5}",
|
|
4354
4869
|
"$type": "color",
|
|
4870
|
+
"$description": "Strong border for open state badges",
|
|
4355
4871
|
"$extensions": {
|
|
4356
4872
|
"org.primer.figma": {
|
|
4357
4873
|
"collection": "mode",
|
|
@@ -4370,6 +4886,10 @@
|
|
|
4370
4886
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4371
4887
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4372
4888
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4889
|
+
},
|
|
4890
|
+
"org.primer.llm": {
|
|
4891
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4892
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4373
4893
|
}
|
|
4374
4894
|
},
|
|
4375
4895
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4382,6 +4902,7 @@
|
|
|
4382
4902
|
"key": "{borderColor.open.muted}",
|
|
4383
4903
|
"$value": "#f8514966",
|
|
4384
4904
|
"$type": "color",
|
|
4905
|
+
"$description": "Subtle border for open state indicators",
|
|
4385
4906
|
"$extensions": {
|
|
4386
4907
|
"org.primer.figma": {
|
|
4387
4908
|
"collection": "mode",
|
|
@@ -4448,6 +4969,10 @@
|
|
|
4448
4969
|
"isSource": true,
|
|
4449
4970
|
"$type": "color"
|
|
4450
4971
|
}
|
|
4972
|
+
},
|
|
4973
|
+
"org.primer.llm": {
|
|
4974
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4975
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4451
4976
|
}
|
|
4452
4977
|
},
|
|
4453
4978
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4456,6 +4981,7 @@
|
|
|
4456
4981
|
"original": {
|
|
4457
4982
|
"$value": "{base.color.red.4}",
|
|
4458
4983
|
"$type": "color",
|
|
4984
|
+
"$description": "Subtle border for open state indicators",
|
|
4459
4985
|
"$extensions": {
|
|
4460
4986
|
"org.primer.figma": {
|
|
4461
4987
|
"collection": "mode",
|
|
@@ -4522,6 +5048,10 @@
|
|
|
4522
5048
|
"isSource": true,
|
|
4523
5049
|
"$type": "color"
|
|
4524
5050
|
}
|
|
5051
|
+
},
|
|
5052
|
+
"org.primer.llm": {
|
|
5053
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5054
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4525
5055
|
}
|
|
4526
5056
|
},
|
|
4527
5057
|
"alpha": 0.4,
|
|
@@ -4535,6 +5065,7 @@
|
|
|
4535
5065
|
"key": "{borderColor.severe.emphasis}",
|
|
4536
5066
|
"$value": "#da3633",
|
|
4537
5067
|
"$type": "color",
|
|
5068
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4538
5069
|
"$extensions": {
|
|
4539
5070
|
"org.primer.figma": {
|
|
4540
5071
|
"collection": "mode",
|
|
@@ -4549,6 +5080,10 @@
|
|
|
4549
5080
|
"light-tritanopia": "#da3633",
|
|
4550
5081
|
"light-tritanopia-high-contrast": "#da3633",
|
|
4551
5082
|
"dark-dimmed-high-contrast": "#ffa657"
|
|
5083
|
+
},
|
|
5084
|
+
"org.primer.llm": {
|
|
5085
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5086
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4552
5087
|
}
|
|
4553
5088
|
},
|
|
4554
5089
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4556,6 +5091,7 @@
|
|
|
4556
5091
|
"original": {
|
|
4557
5092
|
"$value": "{base.color.red.5}",
|
|
4558
5093
|
"$type": "color",
|
|
5094
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4559
5095
|
"$extensions": {
|
|
4560
5096
|
"org.primer.figma": {
|
|
4561
5097
|
"collection": "mode",
|
|
@@ -4570,6 +5106,10 @@
|
|
|
4570
5106
|
"light-tritanopia": "{base.color.red.5}",
|
|
4571
5107
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4572
5108
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5109
|
+
},
|
|
5110
|
+
"org.primer.llm": {
|
|
5111
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5112
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4573
5113
|
}
|
|
4574
5114
|
},
|
|
4575
5115
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4582,6 +5122,7 @@
|
|
|
4582
5122
|
"key": "{borderColor.severe.muted}",
|
|
4583
5123
|
"$value": "#f8514966",
|
|
4584
5124
|
"$type": "color",
|
|
5125
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4585
5126
|
"$extensions": {
|
|
4586
5127
|
"org.primer.figma": {
|
|
4587
5128
|
"collection": "mode",
|
|
@@ -4637,6 +5178,10 @@
|
|
|
4637
5178
|
"isSource": true,
|
|
4638
5179
|
"$type": "color"
|
|
4639
5180
|
}
|
|
5181
|
+
},
|
|
5182
|
+
"org.primer.llm": {
|
|
5183
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5184
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4640
5185
|
}
|
|
4641
5186
|
},
|
|
4642
5187
|
"alpha": 0.4,
|
|
@@ -4645,6 +5190,7 @@
|
|
|
4645
5190
|
"original": {
|
|
4646
5191
|
"$value": "{base.color.red.4}",
|
|
4647
5192
|
"$type": "color",
|
|
5193
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4648
5194
|
"$extensions": {
|
|
4649
5195
|
"org.primer.figma": {
|
|
4650
5196
|
"collection": "mode",
|
|
@@ -4700,6 +5246,10 @@
|
|
|
4700
5246
|
"isSource": true,
|
|
4701
5247
|
"$type": "color"
|
|
4702
5248
|
}
|
|
5249
|
+
},
|
|
5250
|
+
"org.primer.llm": {
|
|
5251
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5252
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4703
5253
|
}
|
|
4704
5254
|
},
|
|
4705
5255
|
"alpha": 0.4,
|
|
@@ -4713,6 +5263,7 @@
|
|
|
4713
5263
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4714
5264
|
"$value": "#bf4b8a",
|
|
4715
5265
|
"$type": "color",
|
|
5266
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4716
5267
|
"$extensions": {
|
|
4717
5268
|
"org.primer.figma": {
|
|
4718
5269
|
"collection": "mode",
|
|
@@ -4724,6 +5275,10 @@
|
|
|
4724
5275
|
},
|
|
4725
5276
|
"org.primer.overrides": {
|
|
4726
5277
|
"dark-dimmed-high-contrast": "#f778ba"
|
|
5278
|
+
},
|
|
5279
|
+
"org.primer.llm": {
|
|
5280
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5281
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4727
5282
|
}
|
|
4728
5283
|
},
|
|
4729
5284
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4731,6 +5286,7 @@
|
|
|
4731
5286
|
"original": {
|
|
4732
5287
|
"$value": "{base.color.pink.5}",
|
|
4733
5288
|
"$type": "color",
|
|
5289
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4734
5290
|
"$extensions": {
|
|
4735
5291
|
"org.primer.figma": {
|
|
4736
5292
|
"collection": "mode",
|
|
@@ -4742,6 +5298,10 @@
|
|
|
4742
5298
|
},
|
|
4743
5299
|
"org.primer.overrides": {
|
|
4744
5300
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5301
|
+
},
|
|
5302
|
+
"org.primer.llm": {
|
|
5303
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5304
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4745
5305
|
}
|
|
4746
5306
|
},
|
|
4747
5307
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4754,6 +5314,7 @@
|
|
|
4754
5314
|
"key": "{borderColor.sponsors.muted}",
|
|
4755
5315
|
"$value": "#db61a266",
|
|
4756
5316
|
"$type": "color",
|
|
5317
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4757
5318
|
"$extensions": {
|
|
4758
5319
|
"org.primer.figma": {
|
|
4759
5320
|
"collection": "mode",
|
|
@@ -4814,6 +5375,10 @@
|
|
|
4814
5375
|
"isSource": true,
|
|
4815
5376
|
"$type": "color"
|
|
4816
5377
|
}
|
|
5378
|
+
},
|
|
5379
|
+
"org.primer.llm": {
|
|
5380
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5381
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4817
5382
|
}
|
|
4818
5383
|
},
|
|
4819
5384
|
"alpha": 0.4,
|
|
@@ -4822,6 +5387,7 @@
|
|
|
4822
5387
|
"original": {
|
|
4823
5388
|
"$value": "{base.color.pink.4}",
|
|
4824
5389
|
"$type": "color",
|
|
5390
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4825
5391
|
"$extensions": {
|
|
4826
5392
|
"org.primer.figma": {
|
|
4827
5393
|
"collection": "mode",
|
|
@@ -4882,6 +5448,10 @@
|
|
|
4882
5448
|
"isSource": true,
|
|
4883
5449
|
"$type": "color"
|
|
4884
5450
|
}
|
|
5451
|
+
},
|
|
5452
|
+
"org.primer.llm": {
|
|
5453
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5454
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4885
5455
|
}
|
|
4886
5456
|
},
|
|
4887
5457
|
"alpha": 0.4,
|
|
@@ -4895,6 +5465,7 @@
|
|
|
4895
5465
|
"key": "{borderColor.success.emphasis}",
|
|
4896
5466
|
"$value": "#1f6feb",
|
|
4897
5467
|
"$type": "color",
|
|
5468
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4898
5469
|
"$extensions": {
|
|
4899
5470
|
"org.primer.figma": {
|
|
4900
5471
|
"collection": "mode",
|
|
@@ -4914,6 +5485,10 @@
|
|
|
4914
5485
|
"light-protanopia-deuteranopia": "#1f6feb",
|
|
4915
5486
|
"light-protanopia-deuteranopia-high-contrast": "#1f6feb",
|
|
4916
5487
|
"dark-dimmed-high-contrast": "#56d364"
|
|
5488
|
+
},
|
|
5489
|
+
"org.primer.llm": {
|
|
5490
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5491
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4917
5492
|
}
|
|
4918
5493
|
},
|
|
4919
5494
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4921,6 +5496,7 @@
|
|
|
4921
5496
|
"original": {
|
|
4922
5497
|
"$value": "{base.color.blue.5}",
|
|
4923
5498
|
"$type": "color",
|
|
5499
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4924
5500
|
"$extensions": {
|
|
4925
5501
|
"org.primer.figma": {
|
|
4926
5502
|
"collection": "mode",
|
|
@@ -4940,6 +5516,10 @@
|
|
|
4940
5516
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4941
5517
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4942
5518
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5519
|
+
},
|
|
5520
|
+
"org.primer.llm": {
|
|
5521
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5522
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4943
5523
|
}
|
|
4944
5524
|
},
|
|
4945
5525
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4952,6 +5532,7 @@
|
|
|
4952
5532
|
"key": "{borderColor.success.muted}",
|
|
4953
5533
|
"$value": "#388bfd66",
|
|
4954
5534
|
"$type": "color",
|
|
5535
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4955
5536
|
"$extensions": {
|
|
4956
5537
|
"org.primer.figma": {
|
|
4957
5538
|
"collection": "mode",
|
|
@@ -5039,6 +5620,10 @@
|
|
|
5039
5620
|
"isSource": true,
|
|
5040
5621
|
"$type": "color"
|
|
5041
5622
|
}
|
|
5623
|
+
},
|
|
5624
|
+
"org.primer.llm": {
|
|
5625
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5626
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5042
5627
|
}
|
|
5043
5628
|
},
|
|
5044
5629
|
"alpha": 0.4,
|
|
@@ -5047,6 +5632,7 @@
|
|
|
5047
5632
|
"original": {
|
|
5048
5633
|
"$value": "{base.color.blue.4}",
|
|
5049
5634
|
"$type": "color",
|
|
5635
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5050
5636
|
"$extensions": {
|
|
5051
5637
|
"org.primer.figma": {
|
|
5052
5638
|
"collection": "mode",
|
|
@@ -5134,6 +5720,10 @@
|
|
|
5134
5720
|
"isSource": true,
|
|
5135
5721
|
"$type": "color"
|
|
5136
5722
|
}
|
|
5723
|
+
},
|
|
5724
|
+
"org.primer.llm": {
|
|
5725
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5726
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5137
5727
|
}
|
|
5138
5728
|
},
|
|
5139
5729
|
"alpha": 0.4,
|
|
@@ -5147,6 +5737,7 @@
|
|
|
5147
5737
|
"key": "{borderColor.translucent}",
|
|
5148
5738
|
"$value": "#ffffff26",
|
|
5149
5739
|
"$type": "color",
|
|
5740
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5150
5741
|
"$extensions": {
|
|
5151
5742
|
"org.primer.figma": {
|
|
5152
5743
|
"collection": "mode",
|
|
@@ -5203,6 +5794,10 @@
|
|
|
5203
5794
|
"isSource": true,
|
|
5204
5795
|
"$type": "color"
|
|
5205
5796
|
}
|
|
5797
|
+
},
|
|
5798
|
+
"org.primer.llm": {
|
|
5799
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5800
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5206
5801
|
}
|
|
5207
5802
|
},
|
|
5208
5803
|
"alpha": 0.15,
|
|
@@ -5211,6 +5806,7 @@
|
|
|
5211
5806
|
"original": {
|
|
5212
5807
|
"$value": "{base.color.neutral.13}",
|
|
5213
5808
|
"$type": "color",
|
|
5809
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5214
5810
|
"$extensions": {
|
|
5215
5811
|
"org.primer.figma": {
|
|
5216
5812
|
"collection": "mode",
|
|
@@ -5267,6 +5863,10 @@
|
|
|
5267
5863
|
"isSource": true,
|
|
5268
5864
|
"$type": "color"
|
|
5269
5865
|
}
|
|
5866
|
+
},
|
|
5867
|
+
"org.primer.llm": {
|
|
5868
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5869
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5270
5870
|
}
|
|
5271
5871
|
},
|
|
5272
5872
|
"alpha": 0.15,
|
|
@@ -5280,6 +5880,7 @@
|
|
|
5280
5880
|
"key": "{borderColor.transparent}",
|
|
5281
5881
|
"$value": "#00000000",
|
|
5282
5882
|
"$type": "color",
|
|
5883
|
+
"$description": "Fully transparent border",
|
|
5283
5884
|
"$extensions": {
|
|
5284
5885
|
"org.primer.figma": {
|
|
5285
5886
|
"collection": "mode",
|
|
@@ -5292,6 +5893,7 @@
|
|
|
5292
5893
|
"original": {
|
|
5293
5894
|
"$value": "{base.color.transparent}",
|
|
5294
5895
|
"$type": "color",
|
|
5896
|
+
"$description": "Fully transparent border",
|
|
5295
5897
|
"$extensions": {
|
|
5296
5898
|
"org.primer.figma": {
|
|
5297
5899
|
"collection": "mode",
|
|
@@ -5309,6 +5911,7 @@
|
|
|
5309
5911
|
"key": "{borderColor.upsell.emphasis}",
|
|
5310
5912
|
"$value": "#8957e5",
|
|
5311
5913
|
"$type": "color",
|
|
5914
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5312
5915
|
"$extensions": {
|
|
5313
5916
|
"org.primer.figma": {
|
|
5314
5917
|
"collection": "mode",
|
|
@@ -5317,6 +5920,10 @@
|
|
|
5317
5920
|
"codeSyntax": {
|
|
5318
5921
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5319
5922
|
}
|
|
5923
|
+
},
|
|
5924
|
+
"org.primer.llm": {
|
|
5925
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5926
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5320
5927
|
}
|
|
5321
5928
|
},
|
|
5322
5929
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5324,6 +5931,7 @@
|
|
|
5324
5931
|
"original": {
|
|
5325
5932
|
"$value": "{borderColor.done.emphasis}",
|
|
5326
5933
|
"$type": "color",
|
|
5934
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5327
5935
|
"$extensions": {
|
|
5328
5936
|
"org.primer.figma": {
|
|
5329
5937
|
"collection": "mode",
|
|
@@ -5332,6 +5940,10 @@
|
|
|
5332
5940
|
"codeSyntax": {
|
|
5333
5941
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5334
5942
|
}
|
|
5943
|
+
},
|
|
5944
|
+
"org.primer.llm": {
|
|
5945
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5946
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5335
5947
|
}
|
|
5336
5948
|
},
|
|
5337
5949
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5344,6 +5956,7 @@
|
|
|
5344
5956
|
"key": "{borderColor.upsell.muted}",
|
|
5345
5957
|
"$value": "#ab7df866",
|
|
5346
5958
|
"$type": "color",
|
|
5959
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5347
5960
|
"$extensions": {
|
|
5348
5961
|
"org.primer.figma": {
|
|
5349
5962
|
"collection": "mode",
|
|
@@ -5352,6 +5965,10 @@
|
|
|
5352
5965
|
"codeSyntax": {
|
|
5353
5966
|
"web": "var(--borderColor-upsell-muted)"
|
|
5354
5967
|
}
|
|
5968
|
+
},
|
|
5969
|
+
"org.primer.llm": {
|
|
5970
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5971
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5355
5972
|
}
|
|
5356
5973
|
},
|
|
5357
5974
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5359,6 +5976,7 @@
|
|
|
5359
5976
|
"original": {
|
|
5360
5977
|
"$value": "{borderColor.done.muted}",
|
|
5361
5978
|
"$type": "color",
|
|
5979
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5362
5980
|
"$extensions": {
|
|
5363
5981
|
"org.primer.figma": {
|
|
5364
5982
|
"collection": "mode",
|
|
@@ -5367,6 +5985,10 @@
|
|
|
5367
5985
|
"codeSyntax": {
|
|
5368
5986
|
"web": "var(--borderColor-upsell-muted)"
|
|
5369
5987
|
}
|
|
5988
|
+
},
|
|
5989
|
+
"org.primer.llm": {
|
|
5990
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5991
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5370
5992
|
}
|
|
5371
5993
|
},
|
|
5372
5994
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36513,6 +37135,7 @@
|
|
|
36513
37135
|
"key": "{fgColor.accent}",
|
|
36514
37136
|
"$value": "#4493f8",
|
|
36515
37137
|
"$type": "color",
|
|
37138
|
+
"$description": "Accent text for links and interactive elements",
|
|
36516
37139
|
"$extensions": {
|
|
36517
37140
|
"org.primer.figma": {
|
|
36518
37141
|
"collection": "mode",
|
|
@@ -36532,6 +37155,10 @@
|
|
|
36532
37155
|
"light-high-contrast": "#1158c7",
|
|
36533
37156
|
"light-tritanopia-high-contrast": "#1158c7",
|
|
36534
37157
|
"light-protanopia-deuteranopia-high-contrast": "#1158c7"
|
|
37158
|
+
},
|
|
37159
|
+
"org.primer.llm": {
|
|
37160
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37161
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36535
37162
|
}
|
|
36536
37163
|
},
|
|
36537
37164
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36539,6 +37166,7 @@
|
|
|
36539
37166
|
"original": {
|
|
36540
37167
|
"$value": "#4493F8",
|
|
36541
37168
|
"$type": "color",
|
|
37169
|
+
"$description": "Accent text for links and interactive elements",
|
|
36542
37170
|
"$extensions": {
|
|
36543
37171
|
"org.primer.figma": {
|
|
36544
37172
|
"collection": "mode",
|
|
@@ -36558,6 +37186,10 @@
|
|
|
36558
37186
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36559
37187
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36560
37188
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37189
|
+
},
|
|
37190
|
+
"org.primer.llm": {
|
|
37191
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37192
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36561
37193
|
}
|
|
36562
37194
|
},
|
|
36563
37195
|
"key": "{fgColor.accent}"
|
|
@@ -36570,6 +37202,7 @@
|
|
|
36570
37202
|
"key": "{fgColor.attention}",
|
|
36571
37203
|
"$value": "#d29922",
|
|
36572
37204
|
"$type": "color",
|
|
37205
|
+
"$description": "Attention text for warnings and caution states",
|
|
36573
37206
|
"$extensions": {
|
|
36574
37207
|
"org.primer.figma": {
|
|
36575
37208
|
"collection": "mode",
|
|
@@ -36585,6 +37218,10 @@
|
|
|
36585
37218
|
"light-protanopia-deuteranopia-high-contrast": "#845306",
|
|
36586
37219
|
"light-tritanopia-high-contrast": "#845306",
|
|
36587
37220
|
"dark-dimmed-high-contrast": "#f2cc60"
|
|
37221
|
+
},
|
|
37222
|
+
"org.primer.llm": {
|
|
37223
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37224
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36588
37225
|
}
|
|
36589
37226
|
},
|
|
36590
37227
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36592,6 +37229,7 @@
|
|
|
36592
37229
|
"original": {
|
|
36593
37230
|
"$value": "{base.color.yellow.3}",
|
|
36594
37231
|
"$type": "color",
|
|
37232
|
+
"$description": "Attention text for warnings and caution states",
|
|
36595
37233
|
"$extensions": {
|
|
36596
37234
|
"org.primer.figma": {
|
|
36597
37235
|
"collection": "mode",
|
|
@@ -36607,6 +37245,10 @@
|
|
|
36607
37245
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36608
37246
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36609
37247
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37248
|
+
},
|
|
37249
|
+
"org.primer.llm": {
|
|
37250
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37251
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36610
37252
|
}
|
|
36611
37253
|
},
|
|
36612
37254
|
"key": "{fgColor.attention}"
|
|
@@ -36619,6 +37261,7 @@
|
|
|
36619
37261
|
"key": "{fgColor.black}",
|
|
36620
37262
|
"$value": "#010409",
|
|
36621
37263
|
"$type": "color",
|
|
37264
|
+
"$description": "Pure black text",
|
|
36622
37265
|
"$extensions": {
|
|
36623
37266
|
"org.primer.figma": {
|
|
36624
37267
|
"collection": "mode",
|
|
@@ -36627,6 +37270,10 @@
|
|
|
36627
37270
|
},
|
|
36628
37271
|
"org.primer.overrides": {
|
|
36629
37272
|
"dark": "#010409"
|
|
37273
|
+
},
|
|
37274
|
+
"org.primer.llm": {
|
|
37275
|
+
"doNotUse": true,
|
|
37276
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36630
37277
|
}
|
|
36631
37278
|
},
|
|
36632
37279
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36634,6 +37281,7 @@
|
|
|
36634
37281
|
"original": {
|
|
36635
37282
|
"$value": "{base.color.neutral.0}",
|
|
36636
37283
|
"$type": "color",
|
|
37284
|
+
"$description": "Pure black text",
|
|
36637
37285
|
"$extensions": {
|
|
36638
37286
|
"org.primer.figma": {
|
|
36639
37287
|
"collection": "mode",
|
|
@@ -36642,6 +37290,10 @@
|
|
|
36642
37290
|
},
|
|
36643
37291
|
"org.primer.overrides": {
|
|
36644
37292
|
"dark": "{base.color.neutral.0}"
|
|
37293
|
+
},
|
|
37294
|
+
"org.primer.llm": {
|
|
37295
|
+
"doNotUse": true,
|
|
37296
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36645
37297
|
}
|
|
36646
37298
|
},
|
|
36647
37299
|
"key": "{fgColor.black}"
|
|
@@ -36654,6 +37306,7 @@
|
|
|
36654
37306
|
"key": "{fgColor.closed}",
|
|
36655
37307
|
"$value": "#9198a1",
|
|
36656
37308
|
"$type": "color",
|
|
37309
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36657
37310
|
"$extensions": {
|
|
36658
37311
|
"org.primer.figma": {
|
|
36659
37312
|
"collection": "mode",
|
|
@@ -36672,6 +37325,10 @@
|
|
|
36672
37325
|
"dark-tritanopia-high-contrast": "#9198a1",
|
|
36673
37326
|
"light-tritanopia": "#9198a1",
|
|
36674
37327
|
"light-tritanopia-high-contrast": "#9198a1"
|
|
37328
|
+
},
|
|
37329
|
+
"org.primer.llm": {
|
|
37330
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37331
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36675
37332
|
}
|
|
36676
37333
|
},
|
|
36677
37334
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36679,6 +37336,7 @@
|
|
|
36679
37336
|
"original": {
|
|
36680
37337
|
"$value": "{fgColor.muted}",
|
|
36681
37338
|
"$type": "color",
|
|
37339
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36682
37340
|
"$extensions": {
|
|
36683
37341
|
"org.primer.figma": {
|
|
36684
37342
|
"collection": "mode",
|
|
@@ -36697,6 +37355,10 @@
|
|
|
36697
37355
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36698
37356
|
"light-tritanopia": "{fgColor.muted}",
|
|
36699
37357
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37358
|
+
},
|
|
37359
|
+
"org.primer.llm": {
|
|
37360
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37361
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36700
37362
|
}
|
|
36701
37363
|
},
|
|
36702
37364
|
"key": "{fgColor.closed}"
|
|
@@ -36709,6 +37371,7 @@
|
|
|
36709
37371
|
"key": "{fgColor.danger}",
|
|
36710
37372
|
"$value": "#f85149",
|
|
36711
37373
|
"$type": "color",
|
|
37374
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36712
37375
|
"$extensions": {
|
|
36713
37376
|
"org.primer.figma": {
|
|
36714
37377
|
"collection": "mode",
|
|
@@ -36729,6 +37392,10 @@
|
|
|
36729
37392
|
"dark-tritanopia-high-contrast": "#ff7b72",
|
|
36730
37393
|
"light-high-contrast": "#b62324",
|
|
36731
37394
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37395
|
+
},
|
|
37396
|
+
"org.primer.llm": {
|
|
37397
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37398
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36732
37399
|
}
|
|
36733
37400
|
},
|
|
36734
37401
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36736,6 +37403,7 @@
|
|
|
36736
37403
|
"original": {
|
|
36737
37404
|
"$value": "{base.color.red.4}",
|
|
36738
37405
|
"$type": "color",
|
|
37406
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36739
37407
|
"$extensions": {
|
|
36740
37408
|
"org.primer.figma": {
|
|
36741
37409
|
"collection": "mode",
|
|
@@ -36756,6 +37424,10 @@
|
|
|
36756
37424
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36757
37425
|
"light-high-contrast": "{base.color.red.6}",
|
|
36758
37426
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37427
|
+
},
|
|
37428
|
+
"org.primer.llm": {
|
|
37429
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37430
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36759
37431
|
}
|
|
36760
37432
|
},
|
|
36761
37433
|
"key": "{fgColor.danger}"
|
|
@@ -36768,6 +37440,7 @@
|
|
|
36768
37440
|
"key": "{fgColor.default}",
|
|
36769
37441
|
"$value": "#f0f6fc",
|
|
36770
37442
|
"$type": "color",
|
|
37443
|
+
"$description": "Default text color for primary content and headings",
|
|
36771
37444
|
"$extensions": {
|
|
36772
37445
|
"org.primer.figma": {
|
|
36773
37446
|
"collection": "mode",
|
|
@@ -36782,8 +37455,12 @@
|
|
|
36782
37455
|
"dark-high-contrast": "#ffffff",
|
|
36783
37456
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
36784
37457
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff",
|
|
36785
|
-
"dark-dimmed": "#
|
|
37458
|
+
"dark-dimmed": "#f0f6fc",
|
|
36786
37459
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37460
|
+
},
|
|
37461
|
+
"org.primer.llm": {
|
|
37462
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37463
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36787
37464
|
}
|
|
36788
37465
|
},
|
|
36789
37466
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36791,6 +37468,7 @@
|
|
|
36791
37468
|
"original": {
|
|
36792
37469
|
"$value": "{base.color.neutral.12}",
|
|
36793
37470
|
"$type": "color",
|
|
37471
|
+
"$description": "Default text color for primary content and headings",
|
|
36794
37472
|
"$extensions": {
|
|
36795
37473
|
"org.primer.figma": {
|
|
36796
37474
|
"collection": "mode",
|
|
@@ -36805,8 +37483,12 @@
|
|
|
36805
37483
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36806
37484
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36807
37485
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36808
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37486
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36809
37487
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37488
|
+
},
|
|
37489
|
+
"org.primer.llm": {
|
|
37490
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37491
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36810
37492
|
}
|
|
36811
37493
|
},
|
|
36812
37494
|
"key": "{fgColor.default}"
|
|
@@ -36819,6 +37501,7 @@
|
|
|
36819
37501
|
"key": "{fgColor.disabled}",
|
|
36820
37502
|
"$value": "#656c76",
|
|
36821
37503
|
"$type": "color",
|
|
37504
|
+
"$description": "Text color for disabled interactive elements",
|
|
36822
37505
|
"$extensions": {
|
|
36823
37506
|
"org.primer.figma": {
|
|
36824
37507
|
"collection": "mode",
|
|
@@ -36840,6 +37523,10 @@
|
|
|
36840
37523
|
"dark-high-contrast": "#656c76",
|
|
36841
37524
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36842
37525
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37526
|
+
},
|
|
37527
|
+
"org.primer.llm": {
|
|
37528
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37529
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36843
37530
|
}
|
|
36844
37531
|
},
|
|
36845
37532
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36847,6 +37534,7 @@
|
|
|
36847
37534
|
"original": {
|
|
36848
37535
|
"$value": "{base.color.neutral.8}",
|
|
36849
37536
|
"$type": "color",
|
|
37537
|
+
"$description": "Text color for disabled interactive elements",
|
|
36850
37538
|
"$extensions": {
|
|
36851
37539
|
"org.primer.figma": {
|
|
36852
37540
|
"collection": "mode",
|
|
@@ -36868,6 +37556,10 @@
|
|
|
36868
37556
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36869
37557
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36870
37558
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37559
|
+
},
|
|
37560
|
+
"org.primer.llm": {
|
|
37561
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37562
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36871
37563
|
}
|
|
36872
37564
|
},
|
|
36873
37565
|
"key": "{fgColor.disabled}"
|
|
@@ -36880,6 +37572,7 @@
|
|
|
36880
37572
|
"key": "{fgColor.done}",
|
|
36881
37573
|
"$value": "#ab7df8",
|
|
36882
37574
|
"$type": "color",
|
|
37575
|
+
"$description": "Text color for completed/done state indicators",
|
|
36883
37576
|
"$extensions": {
|
|
36884
37577
|
"org.primer.figma": {
|
|
36885
37578
|
"collection": "mode",
|
|
@@ -36898,6 +37591,10 @@
|
|
|
36898
37591
|
"light-high-contrast": "#6e40c9",
|
|
36899
37592
|
"light-protanopia-deuteranopia-high-contrast": "#6e40c9",
|
|
36900
37593
|
"light-tritanopia-high-contrast": "#6e40c9"
|
|
37594
|
+
},
|
|
37595
|
+
"org.primer.llm": {
|
|
37596
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37597
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36901
37598
|
}
|
|
36902
37599
|
},
|
|
36903
37600
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36905,6 +37602,7 @@
|
|
|
36905
37602
|
"original": {
|
|
36906
37603
|
"$value": "{base.color.purple.4}",
|
|
36907
37604
|
"$type": "color",
|
|
37605
|
+
"$description": "Text color for completed/done state indicators",
|
|
36908
37606
|
"$extensions": {
|
|
36909
37607
|
"org.primer.figma": {
|
|
36910
37608
|
"collection": "mode",
|
|
@@ -36923,6 +37621,10 @@
|
|
|
36923
37621
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36924
37622
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36925
37623
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37624
|
+
},
|
|
37625
|
+
"org.primer.llm": {
|
|
37626
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37627
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36926
37628
|
}
|
|
36927
37629
|
},
|
|
36928
37630
|
"key": "{fgColor.done}"
|
|
@@ -36935,6 +37637,7 @@
|
|
|
36935
37637
|
"key": "{fgColor.draft}",
|
|
36936
37638
|
"$value": "#9198a1",
|
|
36937
37639
|
"$type": "color",
|
|
37640
|
+
"$description": "Text color for draft state indicators",
|
|
36938
37641
|
"$extensions": {
|
|
36939
37642
|
"org.primer.figma": {
|
|
36940
37643
|
"collection": "mode",
|
|
@@ -36943,6 +37646,10 @@
|
|
|
36943
37646
|
"codeSyntax": {
|
|
36944
37647
|
"web": "var(--fgColor-draft)"
|
|
36945
37648
|
}
|
|
37649
|
+
},
|
|
37650
|
+
"org.primer.llm": {
|
|
37651
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37652
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36946
37653
|
}
|
|
36947
37654
|
},
|
|
36948
37655
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36950,6 +37657,7 @@
|
|
|
36950
37657
|
"original": {
|
|
36951
37658
|
"$value": "{fgColor.neutral}",
|
|
36952
37659
|
"$type": "color",
|
|
37660
|
+
"$description": "Text color for draft state indicators",
|
|
36953
37661
|
"$extensions": {
|
|
36954
37662
|
"org.primer.figma": {
|
|
36955
37663
|
"collection": "mode",
|
|
@@ -36958,6 +37666,10 @@
|
|
|
36958
37666
|
"codeSyntax": {
|
|
36959
37667
|
"web": "var(--fgColor-draft)"
|
|
36960
37668
|
}
|
|
37669
|
+
},
|
|
37670
|
+
"org.primer.llm": {
|
|
37671
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37672
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36961
37673
|
}
|
|
36962
37674
|
},
|
|
36963
37675
|
"key": "{fgColor.draft}"
|
|
@@ -36970,6 +37682,7 @@
|
|
|
36970
37682
|
"key": "{fgColor.link}",
|
|
36971
37683
|
"$value": "#4493f8",
|
|
36972
37684
|
"$type": "color",
|
|
37685
|
+
"$description": "Text color for hyperlinks",
|
|
36973
37686
|
"$extensions": {
|
|
36974
37687
|
"org.primer.figma": {
|
|
36975
37688
|
"collection": "mode",
|
|
@@ -36978,6 +37691,10 @@
|
|
|
36978
37691
|
"codeSyntax": {
|
|
36979
37692
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36980
37693
|
}
|
|
37694
|
+
},
|
|
37695
|
+
"org.primer.llm": {
|
|
37696
|
+
"usage": ["link-text", "hyperlink"],
|
|
37697
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36981
37698
|
}
|
|
36982
37699
|
},
|
|
36983
37700
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36985,6 +37702,7 @@
|
|
|
36985
37702
|
"original": {
|
|
36986
37703
|
"$value": "{fgColor.accent}",
|
|
36987
37704
|
"$type": "color",
|
|
37705
|
+
"$description": "Text color for hyperlinks",
|
|
36988
37706
|
"$extensions": {
|
|
36989
37707
|
"org.primer.figma": {
|
|
36990
37708
|
"collection": "mode",
|
|
@@ -36993,6 +37711,10 @@
|
|
|
36993
37711
|
"codeSyntax": {
|
|
36994
37712
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36995
37713
|
}
|
|
37714
|
+
},
|
|
37715
|
+
"org.primer.llm": {
|
|
37716
|
+
"usage": ["link-text", "hyperlink"],
|
|
37717
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36996
37718
|
}
|
|
36997
37719
|
},
|
|
36998
37720
|
"key": "{fgColor.link}"
|
|
@@ -37005,6 +37727,7 @@
|
|
|
37005
37727
|
"key": "{fgColor.muted}",
|
|
37006
37728
|
"$value": "#9198a1",
|
|
37007
37729
|
"$type": "color",
|
|
37730
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37008
37731
|
"$extensions": {
|
|
37009
37732
|
"org.primer.figma": {
|
|
37010
37733
|
"collection": "mode",
|
|
@@ -37022,6 +37745,10 @@
|
|
|
37022
37745
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37023
37746
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37024
37747
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37748
|
+
},
|
|
37749
|
+
"org.primer.llm": {
|
|
37750
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37751
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37025
37752
|
}
|
|
37026
37753
|
},
|
|
37027
37754
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37029,6 +37756,7 @@
|
|
|
37029
37756
|
"original": {
|
|
37030
37757
|
"$value": "{base.color.neutral.9}",
|
|
37031
37758
|
"$type": "color",
|
|
37759
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37032
37760
|
"$extensions": {
|
|
37033
37761
|
"org.primer.figma": {
|
|
37034
37762
|
"collection": "mode",
|
|
@@ -37046,6 +37774,10 @@
|
|
|
37046
37774
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37047
37775
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37048
37776
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37777
|
+
},
|
|
37778
|
+
"org.primer.llm": {
|
|
37779
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37780
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37049
37781
|
}
|
|
37050
37782
|
},
|
|
37051
37783
|
"key": "{fgColor.muted}"
|
|
@@ -37058,6 +37790,7 @@
|
|
|
37058
37790
|
"key": "{fgColor.neutral}",
|
|
37059
37791
|
"$value": "#9198a1",
|
|
37060
37792
|
"$type": "color",
|
|
37793
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37061
37794
|
"$extensions": {
|
|
37062
37795
|
"org.primer.figma": {
|
|
37063
37796
|
"collection": "mode",
|
|
@@ -37072,6 +37805,10 @@
|
|
|
37072
37805
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37073
37806
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37074
37807
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37808
|
+
},
|
|
37809
|
+
"org.primer.llm": {
|
|
37810
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37811
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37075
37812
|
}
|
|
37076
37813
|
},
|
|
37077
37814
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37079,6 +37816,7 @@
|
|
|
37079
37816
|
"original": {
|
|
37080
37817
|
"$value": "{base.color.neutral.9}",
|
|
37081
37818
|
"$type": "color",
|
|
37819
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37082
37820
|
"$extensions": {
|
|
37083
37821
|
"org.primer.figma": {
|
|
37084
37822
|
"collection": "mode",
|
|
@@ -37093,6 +37831,10 @@
|
|
|
37093
37831
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37094
37832
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37095
37833
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37834
|
+
},
|
|
37835
|
+
"org.primer.llm": {
|
|
37836
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37837
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37096
37838
|
}
|
|
37097
37839
|
},
|
|
37098
37840
|
"key": "{fgColor.neutral}"
|
|
@@ -37105,6 +37847,7 @@
|
|
|
37105
37847
|
"key": "{fgColor.onEmphasis}",
|
|
37106
37848
|
"$value": "#ffffff",
|
|
37107
37849
|
"$type": "color",
|
|
37850
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37108
37851
|
"$extensions": {
|
|
37109
37852
|
"org.primer.figma": {
|
|
37110
37853
|
"collection": "mode",
|
|
@@ -37118,6 +37861,10 @@
|
|
|
37118
37861
|
"dark": "#ffffff",
|
|
37119
37862
|
"dark-dimmed": "#f0f6fc",
|
|
37120
37863
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37864
|
+
},
|
|
37865
|
+
"org.primer.llm": {
|
|
37866
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37867
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37121
37868
|
}
|
|
37122
37869
|
},
|
|
37123
37870
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37125,6 +37872,7 @@
|
|
|
37125
37872
|
"original": {
|
|
37126
37873
|
"$value": "{base.color.neutral.13}",
|
|
37127
37874
|
"$type": "color",
|
|
37875
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37128
37876
|
"$extensions": {
|
|
37129
37877
|
"org.primer.figma": {
|
|
37130
37878
|
"collection": "mode",
|
|
@@ -37138,6 +37886,10 @@
|
|
|
37138
37886
|
"dark": "{base.color.neutral.13}",
|
|
37139
37887
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37140
37888
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37889
|
+
},
|
|
37890
|
+
"org.primer.llm": {
|
|
37891
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37892
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37141
37893
|
}
|
|
37142
37894
|
},
|
|
37143
37895
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37150,11 +37902,16 @@
|
|
|
37150
37902
|
"key": "{fgColor.onInverse}",
|
|
37151
37903
|
"$value": "#010409",
|
|
37152
37904
|
"$type": "color",
|
|
37905
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37153
37906
|
"$extensions": {
|
|
37154
37907
|
"org.primer.figma": {
|
|
37155
37908
|
"collection": "mode",
|
|
37156
37909
|
"group": "semantic",
|
|
37157
37910
|
"scopes": ["fgColor"]
|
|
37911
|
+
},
|
|
37912
|
+
"org.primer.llm": {
|
|
37913
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37914
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37158
37915
|
}
|
|
37159
37916
|
},
|
|
37160
37917
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37162,11 +37919,16 @@
|
|
|
37162
37919
|
"original": {
|
|
37163
37920
|
"$value": "{base.color.neutral.0}",
|
|
37164
37921
|
"$type": "color",
|
|
37922
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37165
37923
|
"$extensions": {
|
|
37166
37924
|
"org.primer.figma": {
|
|
37167
37925
|
"collection": "mode",
|
|
37168
37926
|
"group": "semantic",
|
|
37169
37927
|
"scopes": ["fgColor"]
|
|
37928
|
+
},
|
|
37929
|
+
"org.primer.llm": {
|
|
37930
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37931
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37170
37932
|
}
|
|
37171
37933
|
},
|
|
37172
37934
|
"key": "{fgColor.onInverse}"
|
|
@@ -37179,6 +37941,7 @@
|
|
|
37179
37941
|
"key": "{fgColor.open}",
|
|
37180
37942
|
"$value": "#f85149",
|
|
37181
37943
|
"$type": "color",
|
|
37944
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37182
37945
|
"$extensions": {
|
|
37183
37946
|
"org.primer.figma": {
|
|
37184
37947
|
"collection": "mode",
|
|
@@ -37197,6 +37960,10 @@
|
|
|
37197
37960
|
"dark-tritanopia-high-contrast": "#ffa198",
|
|
37198
37961
|
"light-tritanopia": "#da3633",
|
|
37199
37962
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37963
|
+
},
|
|
37964
|
+
"org.primer.llm": {
|
|
37965
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37966
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37200
37967
|
}
|
|
37201
37968
|
},
|
|
37202
37969
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37204,6 +37971,7 @@
|
|
|
37204
37971
|
"original": {
|
|
37205
37972
|
"$value": "{base.color.red.4}",
|
|
37206
37973
|
"$type": "color",
|
|
37974
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37207
37975
|
"$extensions": {
|
|
37208
37976
|
"org.primer.figma": {
|
|
37209
37977
|
"collection": "mode",
|
|
@@ -37222,6 +37990,10 @@
|
|
|
37222
37990
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37223
37991
|
"light-tritanopia": "{base.color.red.5}",
|
|
37224
37992
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37993
|
+
},
|
|
37994
|
+
"org.primer.llm": {
|
|
37995
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37996
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37225
37997
|
}
|
|
37226
37998
|
},
|
|
37227
37999
|
"key": "{fgColor.open}"
|
|
@@ -37234,6 +38006,7 @@
|
|
|
37234
38006
|
"key": "{fgColor.severe}",
|
|
37235
38007
|
"$value": "#f85149",
|
|
37236
38008
|
"$type": "color",
|
|
38009
|
+
"$description": "Severe text for high-priority warnings",
|
|
37237
38010
|
"$extensions": {
|
|
37238
38011
|
"org.primer.figma": {
|
|
37239
38012
|
"collection": "mode",
|
|
@@ -37254,6 +38027,10 @@
|
|
|
37254
38027
|
"light-tritanopia": "#da3633",
|
|
37255
38028
|
"light-tritanopia-high-contrast": "#b62324",
|
|
37256
38029
|
"light-protanopia-deuteranopia-high-contrast": "#9b4215"
|
|
38030
|
+
},
|
|
38031
|
+
"org.primer.llm": {
|
|
38032
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38033
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37257
38034
|
}
|
|
37258
38035
|
},
|
|
37259
38036
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37261,6 +38038,7 @@
|
|
|
37261
38038
|
"original": {
|
|
37262
38039
|
"$value": "{base.color.red.4}",
|
|
37263
38040
|
"$type": "color",
|
|
38041
|
+
"$description": "Severe text for high-priority warnings",
|
|
37264
38042
|
"$extensions": {
|
|
37265
38043
|
"org.primer.figma": {
|
|
37266
38044
|
"collection": "mode",
|
|
@@ -37281,6 +38059,10 @@
|
|
|
37281
38059
|
"light-tritanopia": "{base.color.red.5}",
|
|
37282
38060
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37283
38061
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38062
|
+
},
|
|
38063
|
+
"org.primer.llm": {
|
|
38064
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38065
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37284
38066
|
}
|
|
37285
38067
|
},
|
|
37286
38068
|
"key": "{fgColor.severe}"
|
|
@@ -37293,6 +38075,7 @@
|
|
|
37293
38075
|
"key": "{fgColor.sponsors}",
|
|
37294
38076
|
"$value": "#db61a2",
|
|
37295
38077
|
"$type": "color",
|
|
38078
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37296
38079
|
"$extensions": {
|
|
37297
38080
|
"org.primer.figma": {
|
|
37298
38081
|
"collection": "mode",
|
|
@@ -37311,6 +38094,10 @@
|
|
|
37311
38094
|
"light-high-contrast": "#9e3670",
|
|
37312
38095
|
"light-protanopia-deuteranopia-high-contrast": "#9e3670",
|
|
37313
38096
|
"light-tritanopia-high-contrast": "#9e3670"
|
|
38097
|
+
},
|
|
38098
|
+
"org.primer.llm": {
|
|
38099
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38100
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37314
38101
|
}
|
|
37315
38102
|
},
|
|
37316
38103
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37318,6 +38105,7 @@
|
|
|
37318
38105
|
"original": {
|
|
37319
38106
|
"$value": "{base.color.pink.4}",
|
|
37320
38107
|
"$type": "color",
|
|
38108
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37321
38109
|
"$extensions": {
|
|
37322
38110
|
"org.primer.figma": {
|
|
37323
38111
|
"collection": "mode",
|
|
@@ -37336,6 +38124,10 @@
|
|
|
37336
38124
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37337
38125
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37338
38126
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38127
|
+
},
|
|
38128
|
+
"org.primer.llm": {
|
|
38129
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38130
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37339
38131
|
}
|
|
37340
38132
|
},
|
|
37341
38133
|
"key": "{fgColor.sponsors}"
|
|
@@ -37348,6 +38140,7 @@
|
|
|
37348
38140
|
"key": "{fgColor.success}",
|
|
37349
38141
|
"$value": "#58a6ff",
|
|
37350
38142
|
"$type": "color",
|
|
38143
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37351
38144
|
"$extensions": {
|
|
37352
38145
|
"org.primer.figma": {
|
|
37353
38146
|
"collection": "mode",
|
|
@@ -37370,6 +38163,10 @@
|
|
|
37370
38163
|
"dark-tritanopia-high-contrast": "#79c0ff",
|
|
37371
38164
|
"light-tritanopia": "#1f6feb",
|
|
37372
38165
|
"light-tritanopia-high-contrast": "#1158c7"
|
|
38166
|
+
},
|
|
38167
|
+
"org.primer.llm": {
|
|
38168
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38169
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37373
38170
|
}
|
|
37374
38171
|
},
|
|
37375
38172
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37377,6 +38174,7 @@
|
|
|
37377
38174
|
"original": {
|
|
37378
38175
|
"$value": "{base.color.blue.3}",
|
|
37379
38176
|
"$type": "color",
|
|
38177
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37380
38178
|
"$extensions": {
|
|
37381
38179
|
"org.primer.figma": {
|
|
37382
38180
|
"collection": "mode",
|
|
@@ -37399,6 +38197,10 @@
|
|
|
37399
38197
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37400
38198
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37401
38199
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38200
|
+
},
|
|
38201
|
+
"org.primer.llm": {
|
|
38202
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38203
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37402
38204
|
}
|
|
37403
38205
|
},
|
|
37404
38206
|
"key": "{fgColor.success}"
|
|
@@ -37411,6 +38213,7 @@
|
|
|
37411
38213
|
"key": "{fgColor.upsell}",
|
|
37412
38214
|
"$value": "#ab7df8",
|
|
37413
38215
|
"$type": "color",
|
|
38216
|
+
"$description": "Text color for upsell and promotional content",
|
|
37414
38217
|
"$extensions": {
|
|
37415
38218
|
"org.primer.figma": {
|
|
37416
38219
|
"collection": "mode",
|
|
@@ -37419,6 +38222,10 @@
|
|
|
37419
38222
|
"codeSyntax": {
|
|
37420
38223
|
"web": "var(--fgColor-upsell)"
|
|
37421
38224
|
}
|
|
38225
|
+
},
|
|
38226
|
+
"org.primer.llm": {
|
|
38227
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38228
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37422
38229
|
}
|
|
37423
38230
|
},
|
|
37424
38231
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37426,6 +38233,7 @@
|
|
|
37426
38233
|
"original": {
|
|
37427
38234
|
"$value": "{fgColor.done}",
|
|
37428
38235
|
"$type": "color",
|
|
38236
|
+
"$description": "Text color for upsell and promotional content",
|
|
37429
38237
|
"$extensions": {
|
|
37430
38238
|
"org.primer.figma": {
|
|
37431
38239
|
"collection": "mode",
|
|
@@ -37434,6 +38242,10 @@
|
|
|
37434
38242
|
"codeSyntax": {
|
|
37435
38243
|
"web": "var(--fgColor-upsell)"
|
|
37436
38244
|
}
|
|
38245
|
+
},
|
|
38246
|
+
"org.primer.llm": {
|
|
38247
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38248
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37437
38249
|
}
|
|
37438
38250
|
},
|
|
37439
38251
|
"key": "{fgColor.upsell}"
|
|
@@ -37446,6 +38258,7 @@
|
|
|
37446
38258
|
"key": "{fgColor.white}",
|
|
37447
38259
|
"$value": "#ffffff",
|
|
37448
38260
|
"$type": "color",
|
|
38261
|
+
"$description": "Pure white text",
|
|
37449
38262
|
"$extensions": {
|
|
37450
38263
|
"org.primer.figma": {
|
|
37451
38264
|
"collection": "mode",
|
|
@@ -37454,6 +38267,10 @@
|
|
|
37454
38267
|
},
|
|
37455
38268
|
"org.primer.overrides": {
|
|
37456
38269
|
"dark": "#ffffff"
|
|
38270
|
+
},
|
|
38271
|
+
"org.primer.llm": {
|
|
38272
|
+
"doNotUse": true,
|
|
38273
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37457
38274
|
}
|
|
37458
38275
|
},
|
|
37459
38276
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37461,6 +38278,7 @@
|
|
|
37461
38278
|
"original": {
|
|
37462
38279
|
"$value": "{base.color.neutral.13}",
|
|
37463
38280
|
"$type": "color",
|
|
38281
|
+
"$description": "Pure white text",
|
|
37464
38282
|
"$extensions": {
|
|
37465
38283
|
"org.primer.figma": {
|
|
37466
38284
|
"collection": "mode",
|
|
@@ -37469,6 +38287,10 @@
|
|
|
37469
38287
|
},
|
|
37470
38288
|
"org.primer.overrides": {
|
|
37471
38289
|
"dark": "{base.color.neutral.13}"
|
|
38290
|
+
},
|
|
38291
|
+
"org.primer.llm": {
|
|
38292
|
+
"doNotUse": true,
|
|
38293
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37472
38294
|
}
|
|
37473
38295
|
},
|
|
37474
38296
|
"key": "{fgColor.white}"
|
|
@@ -37481,6 +38303,13 @@
|
|
|
37481
38303
|
"key": "{focus.outline}",
|
|
37482
38304
|
"$value": "2px solid #1f6feb",
|
|
37483
38305
|
"$type": "border",
|
|
38306
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38307
|
+
"$extensions": {
|
|
38308
|
+
"org.primer.llm": {
|
|
38309
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38310
|
+
"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."
|
|
38311
|
+
}
|
|
38312
|
+
},
|
|
37484
38313
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37485
38314
|
"isSource": true,
|
|
37486
38315
|
"original": {
|
|
@@ -37490,6 +38319,13 @@
|
|
|
37490
38319
|
"width": "2px"
|
|
37491
38320
|
},
|
|
37492
38321
|
"$type": "border",
|
|
38322
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38323
|
+
"$extensions": {
|
|
38324
|
+
"org.primer.llm": {
|
|
38325
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38326
|
+
"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."
|
|
38327
|
+
}
|
|
38328
|
+
},
|
|
37493
38329
|
"key": "{focus.outline}"
|
|
37494
38330
|
},
|
|
37495
38331
|
"name": "focus-outline",
|
|
@@ -37500,11 +38336,16 @@
|
|
|
37500
38336
|
"key": "{focus.outlineColor}",
|
|
37501
38337
|
"$value": "#1f6feb",
|
|
37502
38338
|
"$type": "color",
|
|
38339
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37503
38340
|
"$extensions": {
|
|
37504
38341
|
"org.primer.figma": {
|
|
37505
38342
|
"collection": "mode",
|
|
37506
38343
|
"group": "component (internal)",
|
|
37507
38344
|
"scopes": ["borderColor", "effectColor"]
|
|
38345
|
+
},
|
|
38346
|
+
"org.primer.llm": {
|
|
38347
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38348
|
+
"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
38349
|
}
|
|
37509
38350
|
},
|
|
37510
38351
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37512,11 +38353,16 @@
|
|
|
37512
38353
|
"original": {
|
|
37513
38354
|
"$value": "{borderColor.accent.emphasis}",
|
|
37514
38355
|
"$type": "color",
|
|
38356
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37515
38357
|
"$extensions": {
|
|
37516
38358
|
"org.primer.figma": {
|
|
37517
38359
|
"collection": "mode",
|
|
37518
38360
|
"group": "component (internal)",
|
|
37519
38361
|
"scopes": ["borderColor", "effectColor"]
|
|
38362
|
+
},
|
|
38363
|
+
"org.primer.llm": {
|
|
38364
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38365
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37520
38366
|
}
|
|
37521
38367
|
},
|
|
37522
38368
|
"key": "{focus.outlineColor}"
|
|
@@ -46572,6 +47418,7 @@
|
|
|
46572
47418
|
"key": "{selection.bgColor}",
|
|
46573
47419
|
"$value": "#1f6febb3",
|
|
46574
47420
|
"$type": "color",
|
|
47421
|
+
"$description": "Background color for text selection highlights",
|
|
46575
47422
|
"$extensions": {
|
|
46576
47423
|
"org.primer.figma": {
|
|
46577
47424
|
"collection": "mode",
|
|
@@ -46586,6 +47433,10 @@
|
|
|
46586
47433
|
"isSource": true,
|
|
46587
47434
|
"$type": "color"
|
|
46588
47435
|
}
|
|
47436
|
+
},
|
|
47437
|
+
"org.primer.llm": {
|
|
47438
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47439
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46589
47440
|
}
|
|
46590
47441
|
},
|
|
46591
47442
|
"alpha": 0.7,
|
|
@@ -46594,6 +47445,7 @@
|
|
|
46594
47445
|
"original": {
|
|
46595
47446
|
"$value": "{bgColor.accent.emphasis}",
|
|
46596
47447
|
"$type": "color",
|
|
47448
|
+
"$description": "Background color for text selection highlights",
|
|
46597
47449
|
"$extensions": {
|
|
46598
47450
|
"org.primer.figma": {
|
|
46599
47451
|
"collection": "mode",
|
|
@@ -46608,6 +47460,10 @@
|
|
|
46608
47460
|
"isSource": true,
|
|
46609
47461
|
"$type": "color"
|
|
46610
47462
|
}
|
|
47463
|
+
},
|
|
47464
|
+
"org.primer.llm": {
|
|
47465
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47466
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46611
47467
|
}
|
|
46612
47468
|
},
|
|
46613
47469
|
"alpha": 0.7,
|
|
@@ -46621,6 +47477,7 @@
|
|
|
46621
47477
|
"key": "{shadow.floating.large}",
|
|
46622
47478
|
"$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
|
|
46623
47479
|
"$type": "shadow",
|
|
47480
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46624
47481
|
"$extensions": {
|
|
46625
47482
|
"org.primer.figma": {
|
|
46626
47483
|
"collection": "mode",
|
|
@@ -46650,6 +47507,10 @@
|
|
|
46650
47507
|
"isSource": true,
|
|
46651
47508
|
"$type": "shadow"
|
|
46652
47509
|
}
|
|
47510
|
+
},
|
|
47511
|
+
"org.primer.llm": {
|
|
47512
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47513
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46653
47514
|
}
|
|
46654
47515
|
},
|
|
46655
47516
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46674,6 +47535,7 @@
|
|
|
46674
47535
|
}
|
|
46675
47536
|
],
|
|
46676
47537
|
"$type": "shadow",
|
|
47538
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46677
47539
|
"$extensions": {
|
|
46678
47540
|
"org.primer.figma": {
|
|
46679
47541
|
"collection": "mode",
|
|
@@ -46703,6 +47565,10 @@
|
|
|
46703
47565
|
"isSource": true,
|
|
46704
47566
|
"$type": "shadow"
|
|
46705
47567
|
}
|
|
47568
|
+
},
|
|
47569
|
+
"org.primer.llm": {
|
|
47570
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47571
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46706
47572
|
}
|
|
46707
47573
|
},
|
|
46708
47574
|
"key": "{shadow.floating.large}"
|
|
@@ -46715,6 +47581,7 @@
|
|
|
46715
47581
|
"key": "{shadow.floating.legacy}",
|
|
46716
47582
|
"$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46717
47583
|
"$type": "shadow",
|
|
47584
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46718
47585
|
"$extensions": {
|
|
46719
47586
|
"org.primer.figma": {},
|
|
46720
47587
|
"org.primer.overrides": {
|
|
@@ -46741,6 +47608,10 @@
|
|
|
46741
47608
|
"isSource": true,
|
|
46742
47609
|
"$type": "shadow"
|
|
46743
47610
|
}
|
|
47611
|
+
},
|
|
47612
|
+
"org.primer.llm": {
|
|
47613
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47614
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46744
47615
|
}
|
|
46745
47616
|
},
|
|
46746
47617
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46765,6 +47636,7 @@
|
|
|
46765
47636
|
}
|
|
46766
47637
|
],
|
|
46767
47638
|
"$type": "shadow",
|
|
47639
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46768
47640
|
"$extensions": {
|
|
46769
47641
|
"org.primer.figma": {},
|
|
46770
47642
|
"org.primer.overrides": {
|
|
@@ -46791,6 +47663,10 @@
|
|
|
46791
47663
|
"isSource": true,
|
|
46792
47664
|
"$type": "shadow"
|
|
46793
47665
|
}
|
|
47666
|
+
},
|
|
47667
|
+
"org.primer.llm": {
|
|
47668
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47669
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46794
47670
|
}
|
|
46795
47671
|
},
|
|
46796
47672
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46803,6 +47679,7 @@
|
|
|
46803
47679
|
"key": "{shadow.floating.medium}",
|
|
46804
47680
|
"$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",
|
|
46805
47681
|
"$type": "shadow",
|
|
47682
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46806
47683
|
"$extensions": {
|
|
46807
47684
|
"org.primer.figma": {
|
|
46808
47685
|
"collection": "mode",
|
|
@@ -46856,6 +47733,10 @@
|
|
|
46856
47733
|
"isSource": true,
|
|
46857
47734
|
"$type": "shadow"
|
|
46858
47735
|
}
|
|
47736
|
+
},
|
|
47737
|
+
"org.primer.llm": {
|
|
47738
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47739
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46859
47740
|
}
|
|
46860
47741
|
},
|
|
46861
47742
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46904,6 +47785,7 @@
|
|
|
46904
47785
|
}
|
|
46905
47786
|
],
|
|
46906
47787
|
"$type": "shadow",
|
|
47788
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46907
47789
|
"$extensions": {
|
|
46908
47790
|
"org.primer.figma": {
|
|
46909
47791
|
"collection": "mode",
|
|
@@ -46957,6 +47839,10 @@
|
|
|
46957
47839
|
"isSource": true,
|
|
46958
47840
|
"$type": "shadow"
|
|
46959
47841
|
}
|
|
47842
|
+
},
|
|
47843
|
+
"org.primer.llm": {
|
|
47844
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47845
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46960
47846
|
}
|
|
46961
47847
|
},
|
|
46962
47848
|
"key": "{shadow.floating.medium}"
|
|
@@ -46969,6 +47855,7 @@
|
|
|
46969
47855
|
"key": "{shadow.floating.small}",
|
|
46970
47856
|
"$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46971
47857
|
"$type": "shadow",
|
|
47858
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46972
47859
|
"$extensions": {
|
|
46973
47860
|
"org.primer.figma": {
|
|
46974
47861
|
"collection": "mode",
|
|
@@ -47006,6 +47893,10 @@
|
|
|
47006
47893
|
"isSource": true,
|
|
47007
47894
|
"$type": "shadow"
|
|
47008
47895
|
}
|
|
47896
|
+
},
|
|
47897
|
+
"org.primer.llm": {
|
|
47898
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47899
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47009
47900
|
}
|
|
47010
47901
|
},
|
|
47011
47902
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47038,6 +47929,7 @@
|
|
|
47038
47929
|
}
|
|
47039
47930
|
],
|
|
47040
47931
|
"$type": "shadow",
|
|
47932
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47041
47933
|
"$extensions": {
|
|
47042
47934
|
"org.primer.figma": {
|
|
47043
47935
|
"collection": "mode",
|
|
@@ -47075,6 +47967,10 @@
|
|
|
47075
47967
|
"isSource": true,
|
|
47076
47968
|
"$type": "shadow"
|
|
47077
47969
|
}
|
|
47970
|
+
},
|
|
47971
|
+
"org.primer.llm": {
|
|
47972
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47973
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47078
47974
|
}
|
|
47079
47975
|
},
|
|
47080
47976
|
"key": "{shadow.floating.small}"
|
|
@@ -47087,6 +47983,7 @@
|
|
|
47087
47983
|
"key": "{shadow.floating.xlarge}",
|
|
47088
47984
|
"$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
|
|
47089
47985
|
"$type": "shadow",
|
|
47986
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47090
47987
|
"$extensions": {
|
|
47091
47988
|
"org.primer.figma": {
|
|
47092
47989
|
"collection": "mode",
|
|
@@ -47116,6 +48013,10 @@
|
|
|
47116
48013
|
"isSource": true,
|
|
47117
48014
|
"$type": "shadow"
|
|
47118
48015
|
}
|
|
48016
|
+
},
|
|
48017
|
+
"org.primer.llm": {
|
|
48018
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48019
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47119
48020
|
}
|
|
47120
48021
|
},
|
|
47121
48022
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47140,6 +48041,7 @@
|
|
|
47140
48041
|
}
|
|
47141
48042
|
],
|
|
47142
48043
|
"$type": "shadow",
|
|
48044
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47143
48045
|
"$extensions": {
|
|
47144
48046
|
"org.primer.figma": {
|
|
47145
48047
|
"collection": "mode",
|
|
@@ -47169,6 +48071,10 @@
|
|
|
47169
48071
|
"isSource": true,
|
|
47170
48072
|
"$type": "shadow"
|
|
47171
48073
|
}
|
|
48074
|
+
},
|
|
48075
|
+
"org.primer.llm": {
|
|
48076
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48077
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47172
48078
|
}
|
|
47173
48079
|
},
|
|
47174
48080
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47181,6 +48087,7 @@
|
|
|
47181
48087
|
"key": "{shadow.inset}",
|
|
47182
48088
|
"$value": "inset 0px 1px 0px 0px #0104093d",
|
|
47183
48089
|
"$type": "shadow",
|
|
48090
|
+
"$description": "Inset shadow for recessed elements",
|
|
47184
48091
|
"$extensions": {
|
|
47185
48092
|
"org.primer.figma": {
|
|
47186
48093
|
"collection": "mode",
|
|
@@ -47201,6 +48108,10 @@
|
|
|
47201
48108
|
"isSource": true,
|
|
47202
48109
|
"$type": "shadow"
|
|
47203
48110
|
}
|
|
48111
|
+
},
|
|
48112
|
+
"org.primer.llm": {
|
|
48113
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48114
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47204
48115
|
}
|
|
47205
48116
|
},
|
|
47206
48117
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47216,6 +48127,7 @@
|
|
|
47216
48127
|
"inset": true
|
|
47217
48128
|
},
|
|
47218
48129
|
"$type": "shadow",
|
|
48130
|
+
"$description": "Inset shadow for recessed elements",
|
|
47219
48131
|
"$extensions": {
|
|
47220
48132
|
"org.primer.figma": {
|
|
47221
48133
|
"collection": "mode",
|
|
@@ -47236,6 +48148,10 @@
|
|
|
47236
48148
|
"isSource": true,
|
|
47237
48149
|
"$type": "shadow"
|
|
47238
48150
|
}
|
|
48151
|
+
},
|
|
48152
|
+
"org.primer.llm": {
|
|
48153
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48154
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47239
48155
|
}
|
|
47240
48156
|
},
|
|
47241
48157
|
"key": "{shadow.inset}"
|
|
@@ -47248,6 +48164,7 @@
|
|
|
47248
48164
|
"key": "{shadow.resting.medium}",
|
|
47249
48165
|
"$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47250
48166
|
"$type": "shadow",
|
|
48167
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47251
48168
|
"$extensions": {
|
|
47252
48169
|
"org.primer.figma": {
|
|
47253
48170
|
"collection": "mode",
|
|
@@ -47277,6 +48194,10 @@
|
|
|
47277
48194
|
"isSource": true,
|
|
47278
48195
|
"$type": "shadow"
|
|
47279
48196
|
}
|
|
48197
|
+
},
|
|
48198
|
+
"org.primer.llm": {
|
|
48199
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48200
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47280
48201
|
}
|
|
47281
48202
|
},
|
|
47282
48203
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47301,6 +48222,7 @@
|
|
|
47301
48222
|
}
|
|
47302
48223
|
],
|
|
47303
48224
|
"$type": "shadow",
|
|
48225
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47304
48226
|
"$extensions": {
|
|
47305
48227
|
"org.primer.figma": {
|
|
47306
48228
|
"collection": "mode",
|
|
@@ -47330,6 +48252,10 @@
|
|
|
47330
48252
|
"isSource": true,
|
|
47331
48253
|
"$type": "shadow"
|
|
47332
48254
|
}
|
|
48255
|
+
},
|
|
48256
|
+
"org.primer.llm": {
|
|
48257
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48258
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47333
48259
|
}
|
|
47334
48260
|
},
|
|
47335
48261
|
"key": "{shadow.resting.medium}"
|
|
@@ -47342,6 +48268,7 @@
|
|
|
47342
48268
|
"key": "{shadow.resting.small}",
|
|
47343
48269
|
"$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47344
48270
|
"$type": "shadow",
|
|
48271
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47345
48272
|
"$extensions": {
|
|
47346
48273
|
"org.primer.figma": {
|
|
47347
48274
|
"collection": "mode",
|
|
@@ -47373,6 +48300,10 @@
|
|
|
47373
48300
|
"isSource": true,
|
|
47374
48301
|
"$type": "shadow"
|
|
47375
48302
|
}
|
|
48303
|
+
},
|
|
48304
|
+
"org.primer.llm": {
|
|
48305
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48306
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47376
48307
|
}
|
|
47377
48308
|
},
|
|
47378
48309
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47399,6 +48330,7 @@
|
|
|
47399
48330
|
}
|
|
47400
48331
|
],
|
|
47401
48332
|
"$type": "shadow",
|
|
48333
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47402
48334
|
"$extensions": {
|
|
47403
48335
|
"org.primer.figma": {
|
|
47404
48336
|
"collection": "mode",
|
|
@@ -47430,6 +48362,10 @@
|
|
|
47430
48362
|
"isSource": true,
|
|
47431
48363
|
"$type": "shadow"
|
|
47432
48364
|
}
|
|
48365
|
+
},
|
|
48366
|
+
"org.primer.llm": {
|
|
48367
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48368
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47433
48369
|
}
|
|
47434
48370
|
},
|
|
47435
48371
|
"key": "{shadow.resting.small}"
|
|
@@ -47442,6 +48378,7 @@
|
|
|
47442
48378
|
"key": "{shadow.resting.xsmall}",
|
|
47443
48379
|
"$value": "0px 1px 1px 0px #010409cc",
|
|
47444
48380
|
"$type": "shadow",
|
|
48381
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47445
48382
|
"$extensions": {
|
|
47446
48383
|
"org.primer.figma": {
|
|
47447
48384
|
"collection": "mode",
|
|
@@ -47462,6 +48399,10 @@
|
|
|
47462
48399
|
"isSource": true,
|
|
47463
48400
|
"$type": "shadow"
|
|
47464
48401
|
}
|
|
48402
|
+
},
|
|
48403
|
+
"org.primer.llm": {
|
|
48404
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48405
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47465
48406
|
}
|
|
47466
48407
|
},
|
|
47467
48408
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47477,6 +48418,7 @@
|
|
|
47477
48418
|
"inset": false
|
|
47478
48419
|
},
|
|
47479
48420
|
"$type": "shadow",
|
|
48421
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47480
48422
|
"$extensions": {
|
|
47481
48423
|
"org.primer.figma": {
|
|
47482
48424
|
"collection": "mode",
|
|
@@ -47497,6 +48439,10 @@
|
|
|
47497
48439
|
"isSource": true,
|
|
47498
48440
|
"$type": "shadow"
|
|
47499
48441
|
}
|
|
48442
|
+
},
|
|
48443
|
+
"org.primer.llm": {
|
|
48444
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48445
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47500
48446
|
}
|
|
47501
48447
|
},
|
|
47502
48448
|
"key": "{shadow.resting.xsmall}"
|