@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": "#194fb1",
|
|
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": "#2672f3",
|
|
313
314
|
"dark-tritanopia-high-contrast": "#194fb1",
|
|
314
315
|
"dark-protanopia-deuteranopia-high-contrast": "#194fb1"
|
|
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.9}",
|
|
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": "#5cacff1a",
|
|
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": "#7b4900",
|
|
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": "#ae7104",
|
|
416
437
|
"dark-protanopia-deuteranopia-high-contrast": "#7b4900",
|
|
417
438
|
"dark-tritanopia-high-contrast": "#7b4900"
|
|
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.9}",
|
|
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": "#edaa2726",
|
|
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": "#3d444d",
|
|
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": "#3d444d",
|
|
557
608
|
"dark-protanopia-deuteranopia": "#3d444d",
|
|
558
609
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
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": "#ff80801a",
|
|
595
655
|
"$type": "color",
|
|
656
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
596
657
|
"$extensions": {
|
|
597
658
|
"org.primer.figma": {
|
|
598
659
|
"collection": "mode",
|
|
@@ -628,6 +689,10 @@
|
|
|
628
689
|
"isSource": true,
|
|
629
690
|
"$type": "color"
|
|
630
691
|
}
|
|
692
|
+
},
|
|
693
|
+
"org.primer.llm": {
|
|
694
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
695
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
631
696
|
}
|
|
632
697
|
},
|
|
633
698
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -635,6 +700,7 @@
|
|
|
635
700
|
"original": {
|
|
636
701
|
"$value": "{bgColor.danger.muted}",
|
|
637
702
|
"$type": "color",
|
|
703
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
638
704
|
"$extensions": {
|
|
639
705
|
"org.primer.figma": {
|
|
640
706
|
"collection": "mode",
|
|
@@ -670,6 +736,10 @@
|
|
|
670
736
|
"isSource": true,
|
|
671
737
|
"$type": "color"
|
|
672
738
|
}
|
|
739
|
+
},
|
|
740
|
+
"org.primer.llm": {
|
|
741
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
742
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
673
743
|
}
|
|
674
744
|
},
|
|
675
745
|
"key": "{bgColor.closed.muted}"
|
|
@@ -682,6 +752,7 @@
|
|
|
682
752
|
"key": "{bgColor.danger.emphasis}",
|
|
683
753
|
"$value": "#ad0116",
|
|
684
754
|
"$type": "color",
|
|
755
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
685
756
|
"$extensions": {
|
|
686
757
|
"org.primer.figma": {
|
|
687
758
|
"collection": "mode",
|
|
@@ -699,6 +770,10 @@
|
|
|
699
770
|
"dark-high-contrast": "#ad0116",
|
|
700
771
|
"dark-dimmed-high-contrast": "#e82a2f",
|
|
701
772
|
"dark-tritanopia-high-contrast": "#ad0116"
|
|
773
|
+
},
|
|
774
|
+
"org.primer.llm": {
|
|
775
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
776
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
702
777
|
}
|
|
703
778
|
},
|
|
704
779
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -706,6 +781,7 @@
|
|
|
706
781
|
"original": {
|
|
707
782
|
"$value": "{base.color.red.9}",
|
|
708
783
|
"$type": "color",
|
|
784
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
709
785
|
"$extensions": {
|
|
710
786
|
"org.primer.figma": {
|
|
711
787
|
"collection": "mode",
|
|
@@ -723,6 +799,10 @@
|
|
|
723
799
|
"dark-high-contrast": "{base.color.red.9}",
|
|
724
800
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
725
801
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
802
|
+
},
|
|
803
|
+
"org.primer.llm": {
|
|
804
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
805
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
726
806
|
}
|
|
727
807
|
},
|
|
728
808
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -735,6 +815,7 @@
|
|
|
735
815
|
"key": "{bgColor.danger.muted}",
|
|
736
816
|
"$value": "#ff80801a",
|
|
737
817
|
"$type": "color",
|
|
818
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
738
819
|
"$extensions": {
|
|
739
820
|
"org.primer.figma": {
|
|
740
821
|
"collection": "mode",
|
|
@@ -761,6 +842,10 @@
|
|
|
761
842
|
"isSource": true,
|
|
762
843
|
"$type": "color"
|
|
763
844
|
}
|
|
845
|
+
},
|
|
846
|
+
"org.primer.llm": {
|
|
847
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
848
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
764
849
|
}
|
|
765
850
|
},
|
|
766
851
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -769,6 +854,7 @@
|
|
|
769
854
|
"original": {
|
|
770
855
|
"$value": "{base.color.red.4}",
|
|
771
856
|
"$type": "color",
|
|
857
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
772
858
|
"$extensions": {
|
|
773
859
|
"org.primer.figma": {
|
|
774
860
|
"collection": "mode",
|
|
@@ -795,6 +881,10 @@
|
|
|
795
881
|
"isSource": true,
|
|
796
882
|
"$type": "color"
|
|
797
883
|
}
|
|
884
|
+
},
|
|
885
|
+
"org.primer.llm": {
|
|
886
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
887
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
798
888
|
}
|
|
799
889
|
},
|
|
800
890
|
"alpha": 0.1,
|
|
@@ -808,6 +898,7 @@
|
|
|
808
898
|
"key": "{bgColor.default}",
|
|
809
899
|
"$value": "#010409",
|
|
810
900
|
"$type": "color",
|
|
901
|
+
"$description": "Default background color for pages and main content areas",
|
|
811
902
|
"$extensions": {
|
|
812
903
|
"org.primer.figma": {
|
|
813
904
|
"collection": "mode",
|
|
@@ -824,6 +915,10 @@
|
|
|
824
915
|
"dark-high-contrast": "#010409",
|
|
825
916
|
"dark-tritanopia-high-contrast": "#010409",
|
|
826
917
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
918
|
+
},
|
|
919
|
+
"org.primer.llm": {
|
|
920
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
921
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
827
922
|
}
|
|
828
923
|
},
|
|
829
924
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -831,6 +926,7 @@
|
|
|
831
926
|
"original": {
|
|
832
927
|
"$value": "{base.color.neutral.0}",
|
|
833
928
|
"$type": "color",
|
|
929
|
+
"$description": "Default background color for pages and main content areas",
|
|
834
930
|
"$extensions": {
|
|
835
931
|
"org.primer.figma": {
|
|
836
932
|
"collection": "mode",
|
|
@@ -847,6 +943,10 @@
|
|
|
847
943
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
848
944
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
849
945
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
946
|
+
},
|
|
947
|
+
"org.primer.llm": {
|
|
948
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
949
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
850
950
|
}
|
|
851
951
|
},
|
|
852
952
|
"key": "{bgColor.default}"
|
|
@@ -859,6 +959,7 @@
|
|
|
859
959
|
"key": "{bgColor.disabled}",
|
|
860
960
|
"$value": "#262c36",
|
|
861
961
|
"$type": "color",
|
|
962
|
+
"$description": "Background for disabled interactive elements",
|
|
862
963
|
"$extensions": {
|
|
863
964
|
"org.primer.figma": {
|
|
864
965
|
"collection": "mode",
|
|
@@ -875,6 +976,10 @@
|
|
|
875
976
|
"dark-high-contrast": "#262c36",
|
|
876
977
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
877
978
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
979
|
+
},
|
|
980
|
+
"org.primer.llm": {
|
|
981
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
982
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
878
983
|
}
|
|
879
984
|
},
|
|
880
985
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -882,6 +987,7 @@
|
|
|
882
987
|
"original": {
|
|
883
988
|
"$value": "{base.color.neutral.4}",
|
|
884
989
|
"$type": "color",
|
|
990
|
+
"$description": "Background for disabled interactive elements",
|
|
885
991
|
"$extensions": {
|
|
886
992
|
"org.primer.figma": {
|
|
887
993
|
"collection": "mode",
|
|
@@ -898,6 +1004,10 @@
|
|
|
898
1004
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
899
1005
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
900
1006
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1007
|
+
},
|
|
1008
|
+
"org.primer.llm": {
|
|
1009
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1010
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
901
1011
|
}
|
|
902
1012
|
},
|
|
903
1013
|
"key": "{bgColor.disabled}"
|
|
@@ -910,6 +1020,7 @@
|
|
|
910
1020
|
"key": "{bgColor.done.emphasis}",
|
|
911
1021
|
"$value": "#6921d7",
|
|
912
1022
|
"$type": "color",
|
|
1023
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
913
1024
|
"$extensions": {
|
|
914
1025
|
"org.primer.figma": {
|
|
915
1026
|
"collection": "mode",
|
|
@@ -924,6 +1035,10 @@
|
|
|
924
1035
|
"dark-dimmed-high-contrast": "#954ffd",
|
|
925
1036
|
"dark-tritanopia-high-contrast": "#6921d7",
|
|
926
1037
|
"dark-protanopia-deuteranopia-high-contrast": "#6921d7"
|
|
1038
|
+
},
|
|
1039
|
+
"org.primer.llm": {
|
|
1040
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1041
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
927
1042
|
}
|
|
928
1043
|
},
|
|
929
1044
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -931,6 +1046,7 @@
|
|
|
931
1046
|
"original": {
|
|
932
1047
|
"$value": "{base.color.purple.9}",
|
|
933
1048
|
"$type": "color",
|
|
1049
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
934
1050
|
"$extensions": {
|
|
935
1051
|
"org.primer.figma": {
|
|
936
1052
|
"collection": "mode",
|
|
@@ -945,6 +1061,10 @@
|
|
|
945
1061
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
946
1062
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
947
1063
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1064
|
+
},
|
|
1065
|
+
"org.primer.llm": {
|
|
1066
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1067
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
948
1068
|
}
|
|
949
1069
|
},
|
|
950
1070
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -957,6 +1077,7 @@
|
|
|
957
1077
|
"key": "{bgColor.done.muted}",
|
|
958
1078
|
"$value": "#bf8fff26",
|
|
959
1079
|
"$type": "color",
|
|
1080
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
960
1081
|
"$extensions": {
|
|
961
1082
|
"org.primer.figma": {
|
|
962
1083
|
"collection": "mode",
|
|
@@ -974,6 +1095,10 @@
|
|
|
974
1095
|
"isSource": true,
|
|
975
1096
|
"$type": "color"
|
|
976
1097
|
}
|
|
1098
|
+
},
|
|
1099
|
+
"org.primer.llm": {
|
|
1100
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1101
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
977
1102
|
}
|
|
978
1103
|
},
|
|
979
1104
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -982,6 +1107,7 @@
|
|
|
982
1107
|
"original": {
|
|
983
1108
|
"$value": "{base.color.purple.4}",
|
|
984
1109
|
"$type": "color",
|
|
1110
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
985
1111
|
"$extensions": {
|
|
986
1112
|
"org.primer.figma": {
|
|
987
1113
|
"collection": "mode",
|
|
@@ -999,6 +1125,10 @@
|
|
|
999
1125
|
"isSource": true,
|
|
1000
1126
|
"$type": "color"
|
|
1001
1127
|
}
|
|
1128
|
+
},
|
|
1129
|
+
"org.primer.llm": {
|
|
1130
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1131
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1002
1132
|
}
|
|
1003
1133
|
},
|
|
1004
1134
|
"alpha": 0.15,
|
|
@@ -1012,6 +1142,7 @@
|
|
|
1012
1142
|
"key": "{bgColor.draft.emphasis}",
|
|
1013
1143
|
"$value": "#3d444d",
|
|
1014
1144
|
"$type": "color",
|
|
1145
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1015
1146
|
"$extensions": {
|
|
1016
1147
|
"org.primer.figma": {
|
|
1017
1148
|
"collection": "mode",
|
|
@@ -1020,6 +1151,10 @@
|
|
|
1020
1151
|
"codeSyntax": {
|
|
1021
1152
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1022
1153
|
}
|
|
1154
|
+
},
|
|
1155
|
+
"org.primer.llm": {
|
|
1156
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1157
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1023
1158
|
}
|
|
1024
1159
|
},
|
|
1025
1160
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1027,6 +1162,7 @@
|
|
|
1027
1162
|
"original": {
|
|
1028
1163
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1029
1164
|
"$type": "color",
|
|
1165
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1030
1166
|
"$extensions": {
|
|
1031
1167
|
"org.primer.figma": {
|
|
1032
1168
|
"collection": "mode",
|
|
@@ -1035,6 +1171,10 @@
|
|
|
1035
1171
|
"codeSyntax": {
|
|
1036
1172
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1037
1173
|
}
|
|
1174
|
+
},
|
|
1175
|
+
"org.primer.llm": {
|
|
1176
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1177
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1038
1178
|
}
|
|
1039
1179
|
},
|
|
1040
1180
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1047,6 +1187,7 @@
|
|
|
1047
1187
|
"key": "{bgColor.draft.muted}",
|
|
1048
1188
|
"$value": "#212830",
|
|
1049
1189
|
"$type": "color",
|
|
1190
|
+
"$description": "Subtle background for draft state indicators",
|
|
1050
1191
|
"$extensions": {
|
|
1051
1192
|
"org.primer.figma": {
|
|
1052
1193
|
"collection": "mode",
|
|
@@ -1082,6 +1223,10 @@
|
|
|
1082
1223
|
"isSource": true,
|
|
1083
1224
|
"$type": "color"
|
|
1084
1225
|
}
|
|
1226
|
+
},
|
|
1227
|
+
"org.primer.llm": {
|
|
1228
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1229
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1085
1230
|
}
|
|
1086
1231
|
},
|
|
1087
1232
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1089,6 +1234,7 @@
|
|
|
1089
1234
|
"original": {
|
|
1090
1235
|
"$value": "{bgColor.neutral.muted}",
|
|
1091
1236
|
"$type": "color",
|
|
1237
|
+
"$description": "Subtle background for draft state indicators",
|
|
1092
1238
|
"$extensions": {
|
|
1093
1239
|
"org.primer.figma": {
|
|
1094
1240
|
"collection": "mode",
|
|
@@ -1124,6 +1270,10 @@
|
|
|
1124
1270
|
"isSource": true,
|
|
1125
1271
|
"$type": "color"
|
|
1126
1272
|
}
|
|
1273
|
+
},
|
|
1274
|
+
"org.primer.llm": {
|
|
1275
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1276
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1127
1277
|
}
|
|
1128
1278
|
},
|
|
1129
1279
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1136,6 +1286,7 @@
|
|
|
1136
1286
|
"key": "{bgColor.emphasis}",
|
|
1137
1287
|
"$value": "#3d444d",
|
|
1138
1288
|
"$type": "color",
|
|
1289
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1139
1290
|
"$extensions": {
|
|
1140
1291
|
"org.primer.figma": {
|
|
1141
1292
|
"collection": "mode",
|
|
@@ -1147,6 +1298,10 @@
|
|
|
1147
1298
|
},
|
|
1148
1299
|
"org.primer.overrides": {
|
|
1149
1300
|
"dark": "#3d444d"
|
|
1301
|
+
},
|
|
1302
|
+
"org.primer.llm": {
|
|
1303
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1304
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1150
1305
|
}
|
|
1151
1306
|
},
|
|
1152
1307
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1154,6 +1309,7 @@
|
|
|
1154
1309
|
"original": {
|
|
1155
1310
|
"$value": "{base.color.neutral.7}",
|
|
1156
1311
|
"$type": "color",
|
|
1312
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1157
1313
|
"$extensions": {
|
|
1158
1314
|
"org.primer.figma": {
|
|
1159
1315
|
"collection": "mode",
|
|
@@ -1165,6 +1321,10 @@
|
|
|
1165
1321
|
},
|
|
1166
1322
|
"org.primer.overrides": {
|
|
1167
1323
|
"dark": "{base.color.neutral.7}"
|
|
1324
|
+
},
|
|
1325
|
+
"org.primer.llm": {
|
|
1326
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1327
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1168
1328
|
}
|
|
1169
1329
|
},
|
|
1170
1330
|
"key": "{bgColor.emphasis}"
|
|
@@ -1177,6 +1337,7 @@
|
|
|
1177
1337
|
"key": "{bgColor.inset}",
|
|
1178
1338
|
"$value": "#010409",
|
|
1179
1339
|
"$type": "color",
|
|
1340
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1180
1341
|
"$extensions": {
|
|
1181
1342
|
"org.primer.figma": {
|
|
1182
1343
|
"collection": "mode",
|
|
@@ -1193,6 +1354,10 @@
|
|
|
1193
1354
|
"light-high-contrast": "#151b23",
|
|
1194
1355
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1195
1356
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1357
|
+
},
|
|
1358
|
+
"org.primer.llm": {
|
|
1359
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1360
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1196
1361
|
}
|
|
1197
1362
|
},
|
|
1198
1363
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1200,6 +1365,7 @@
|
|
|
1200
1365
|
"original": {
|
|
1201
1366
|
"$value": "{base.color.neutral.0}",
|
|
1202
1367
|
"$type": "color",
|
|
1368
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1203
1369
|
"$extensions": {
|
|
1204
1370
|
"org.primer.figma": {
|
|
1205
1371
|
"collection": "mode",
|
|
@@ -1216,6 +1382,10 @@
|
|
|
1216
1382
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1217
1383
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1218
1384
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1385
|
+
},
|
|
1386
|
+
"org.primer.llm": {
|
|
1387
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1388
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1219
1389
|
}
|
|
1220
1390
|
},
|
|
1221
1391
|
"key": "{bgColor.inset}"
|
|
@@ -1228,6 +1398,7 @@
|
|
|
1228
1398
|
"key": "{bgColor.inverse}",
|
|
1229
1399
|
"$value": "#ffffff",
|
|
1230
1400
|
"$type": "color",
|
|
1401
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1231
1402
|
"$extensions": {
|
|
1232
1403
|
"org.primer.figma": {
|
|
1233
1404
|
"collection": "mode",
|
|
@@ -1236,6 +1407,10 @@
|
|
|
1236
1407
|
},
|
|
1237
1408
|
"org.primer.overrides": {
|
|
1238
1409
|
"dark": "#ffffff"
|
|
1410
|
+
},
|
|
1411
|
+
"org.primer.llm": {
|
|
1412
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1413
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1239
1414
|
}
|
|
1240
1415
|
},
|
|
1241
1416
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1243,6 +1418,7 @@
|
|
|
1243
1418
|
"original": {
|
|
1244
1419
|
"$value": "{base.color.neutral.13}",
|
|
1245
1420
|
"$type": "color",
|
|
1421
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1246
1422
|
"$extensions": {
|
|
1247
1423
|
"org.primer.figma": {
|
|
1248
1424
|
"collection": "mode",
|
|
@@ -1251,6 +1427,10 @@
|
|
|
1251
1427
|
},
|
|
1252
1428
|
"org.primer.overrides": {
|
|
1253
1429
|
"dark": "{base.color.neutral.13}"
|
|
1430
|
+
},
|
|
1431
|
+
"org.primer.llm": {
|
|
1432
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1433
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1254
1434
|
}
|
|
1255
1435
|
},
|
|
1256
1436
|
"key": "{bgColor.inverse}"
|
|
@@ -1263,6 +1443,7 @@
|
|
|
1263
1443
|
"key": "{bgColor.muted}",
|
|
1264
1444
|
"$value": "#151b23",
|
|
1265
1445
|
"$type": "color",
|
|
1446
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1266
1447
|
"$extensions": {
|
|
1267
1448
|
"org.primer.figma": {
|
|
1268
1449
|
"collection": "mode",
|
|
@@ -1282,6 +1463,10 @@
|
|
|
1282
1463
|
"dark-high-contrast": "#151b23",
|
|
1283
1464
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1284
1465
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1466
|
+
},
|
|
1467
|
+
"org.primer.llm": {
|
|
1468
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1469
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1285
1470
|
}
|
|
1286
1471
|
},
|
|
1287
1472
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1289,6 +1474,7 @@
|
|
|
1289
1474
|
"original": {
|
|
1290
1475
|
"$value": "{base.color.neutral.2}",
|
|
1291
1476
|
"$type": "color",
|
|
1477
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1292
1478
|
"$extensions": {
|
|
1293
1479
|
"org.primer.figma": {
|
|
1294
1480
|
"collection": "mode",
|
|
@@ -1308,6 +1494,10 @@
|
|
|
1308
1494
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1309
1495
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1310
1496
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1497
|
+
},
|
|
1498
|
+
"org.primer.llm": {
|
|
1499
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1500
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1311
1501
|
}
|
|
1312
1502
|
},
|
|
1313
1503
|
"key": "{bgColor.muted}"
|
|
@@ -1320,6 +1510,7 @@
|
|
|
1320
1510
|
"key": "{bgColor.neutral.emphasis}",
|
|
1321
1511
|
"$value": "#3d444d",
|
|
1322
1512
|
"$type": "color",
|
|
1513
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1323
1514
|
"$extensions": {
|
|
1324
1515
|
"org.primer.figma": {
|
|
1325
1516
|
"collection": "mode",
|
|
@@ -1336,6 +1527,10 @@
|
|
|
1336
1527
|
"dark-high-contrast": "#3d444d",
|
|
1337
1528
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1338
1529
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1530
|
+
},
|
|
1531
|
+
"org.primer.llm": {
|
|
1532
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1533
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1339
1534
|
}
|
|
1340
1535
|
},
|
|
1341
1536
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1343,6 +1538,7 @@
|
|
|
1343
1538
|
"original": {
|
|
1344
1539
|
"$value": "{base.color.neutral.7}",
|
|
1345
1540
|
"$type": "color",
|
|
1541
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1346
1542
|
"$extensions": {
|
|
1347
1543
|
"org.primer.figma": {
|
|
1348
1544
|
"collection": "mode",
|
|
@@ -1359,6 +1555,10 @@
|
|
|
1359
1555
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1360
1556
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1361
1557
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1558
|
+
},
|
|
1559
|
+
"org.primer.llm": {
|
|
1560
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1561
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1362
1562
|
}
|
|
1363
1563
|
},
|
|
1364
1564
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1371,6 +1571,7 @@
|
|
|
1371
1571
|
"key": "{bgColor.neutral.muted}",
|
|
1372
1572
|
"$value": "#212830",
|
|
1373
1573
|
"$type": "color",
|
|
1574
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1374
1575
|
"$extensions": {
|
|
1375
1576
|
"org.primer.figma": {
|
|
1376
1577
|
"collection": "mode",
|
|
@@ -1398,6 +1599,10 @@
|
|
|
1398
1599
|
"dark-high-contrast": "#212830",
|
|
1399
1600
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1400
1601
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1602
|
+
},
|
|
1603
|
+
"org.primer.llm": {
|
|
1604
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1605
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1401
1606
|
}
|
|
1402
1607
|
},
|
|
1403
1608
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1405,6 +1610,7 @@
|
|
|
1405
1610
|
"original": {
|
|
1406
1611
|
"$value": "{base.color.neutral.3}",
|
|
1407
1612
|
"$type": "color",
|
|
1613
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1408
1614
|
"$extensions": {
|
|
1409
1615
|
"org.primer.figma": {
|
|
1410
1616
|
"collection": "mode",
|
|
@@ -1432,6 +1638,10 @@
|
|
|
1432
1638
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1433
1639
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1434
1640
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1641
|
+
},
|
|
1642
|
+
"org.primer.llm": {
|
|
1643
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1644
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1435
1645
|
}
|
|
1436
1646
|
},
|
|
1437
1647
|
"key": "{bgColor.neutral.muted}"
|
|
@@ -1444,6 +1654,7 @@
|
|
|
1444
1654
|
"key": "{bgColor.open.emphasis}",
|
|
1445
1655
|
"$value": "#ad0116",
|
|
1446
1656
|
"$type": "color",
|
|
1657
|
+
"$description": "Strong background for open state badges and labels",
|
|
1447
1658
|
"$extensions": {
|
|
1448
1659
|
"org.primer.figma": {
|
|
1449
1660
|
"collection": "mode",
|
|
@@ -1462,6 +1673,10 @@
|
|
|
1462
1673
|
"light-protanopia-deuteranopia-high-contrast": "#e7811d",
|
|
1463
1674
|
"dark-protanopia-deuteranopia": "#e7811d",
|
|
1464
1675
|
"dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
|
|
1676
|
+
},
|
|
1677
|
+
"org.primer.llm": {
|
|
1678
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1679
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1465
1680
|
}
|
|
1466
1681
|
},
|
|
1467
1682
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1469,6 +1684,7 @@
|
|
|
1469
1684
|
"original": {
|
|
1470
1685
|
"$value": "{base.color.red.9}",
|
|
1471
1686
|
"$type": "color",
|
|
1687
|
+
"$description": "Strong background for open state badges and labels",
|
|
1472
1688
|
"$extensions": {
|
|
1473
1689
|
"org.primer.figma": {
|
|
1474
1690
|
"collection": "mode",
|
|
@@ -1487,6 +1703,10 @@
|
|
|
1487
1703
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1488
1704
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1489
1705
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1706
|
+
},
|
|
1707
|
+
"org.primer.llm": {
|
|
1708
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1709
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1490
1710
|
}
|
|
1491
1711
|
},
|
|
1492
1712
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1499,6 +1719,7 @@
|
|
|
1499
1719
|
"key": "{bgColor.open.muted}",
|
|
1500
1720
|
"$value": "#ff80801a",
|
|
1501
1721
|
"$type": "color",
|
|
1722
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1502
1723
|
"$extensions": {
|
|
1503
1724
|
"org.primer.figma": {
|
|
1504
1725
|
"collection": "mode",
|
|
@@ -1541,6 +1762,10 @@
|
|
|
1541
1762
|
"isSource": true,
|
|
1542
1763
|
"$type": "color"
|
|
1543
1764
|
}
|
|
1765
|
+
},
|
|
1766
|
+
"org.primer.llm": {
|
|
1767
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1768
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1544
1769
|
}
|
|
1545
1770
|
},
|
|
1546
1771
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1549,6 +1774,7 @@
|
|
|
1549
1774
|
"original": {
|
|
1550
1775
|
"$value": "{base.color.red.4}",
|
|
1551
1776
|
"$type": "color",
|
|
1777
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1552
1778
|
"$extensions": {
|
|
1553
1779
|
"org.primer.figma": {
|
|
1554
1780
|
"collection": "mode",
|
|
@@ -1591,6 +1817,10 @@
|
|
|
1591
1817
|
"isSource": true,
|
|
1592
1818
|
"$type": "color"
|
|
1593
1819
|
}
|
|
1820
|
+
},
|
|
1821
|
+
"org.primer.llm": {
|
|
1822
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1823
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1594
1824
|
}
|
|
1595
1825
|
},
|
|
1596
1826
|
"alpha": 0.1,
|
|
@@ -1604,6 +1834,7 @@
|
|
|
1604
1834
|
"key": "{bgColor.severe.emphasis}",
|
|
1605
1835
|
"$value": "#ad0116",
|
|
1606
1836
|
"$type": "color",
|
|
1837
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1607
1838
|
"$extensions": {
|
|
1608
1839
|
"org.primer.figma": {
|
|
1609
1840
|
"collection": "mode",
|
|
@@ -1621,6 +1852,10 @@
|
|
|
1621
1852
|
"dark-high-contrast": "#8f3c00",
|
|
1622
1853
|
"dark-dimmed-high-contrast": "#bf5e0a",
|
|
1623
1854
|
"dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
|
|
1855
|
+
},
|
|
1856
|
+
"org.primer.llm": {
|
|
1857
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1858
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1624
1859
|
}
|
|
1625
1860
|
},
|
|
1626
1861
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1628,6 +1863,7 @@
|
|
|
1628
1863
|
"original": {
|
|
1629
1864
|
"$value": "{base.color.red.9}",
|
|
1630
1865
|
"$type": "color",
|
|
1866
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1631
1867
|
"$extensions": {
|
|
1632
1868
|
"org.primer.figma": {
|
|
1633
1869
|
"collection": "mode",
|
|
@@ -1645,6 +1881,10 @@
|
|
|
1645
1881
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1646
1882
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1647
1883
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1884
|
+
},
|
|
1885
|
+
"org.primer.llm": {
|
|
1886
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1887
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1648
1888
|
}
|
|
1649
1889
|
},
|
|
1650
1890
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1657,6 +1897,7 @@
|
|
|
1657
1897
|
"key": "{bgColor.severe.muted}",
|
|
1658
1898
|
"$value": "#f48b251a",
|
|
1659
1899
|
"$type": "color",
|
|
1900
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1660
1901
|
"$extensions": {
|
|
1661
1902
|
"org.primer.figma": {
|
|
1662
1903
|
"collection": "mode",
|
|
@@ -1683,6 +1924,10 @@
|
|
|
1683
1924
|
"isSource": true,
|
|
1684
1925
|
"$type": "color"
|
|
1685
1926
|
}
|
|
1927
|
+
},
|
|
1928
|
+
"org.primer.llm": {
|
|
1929
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1930
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1686
1931
|
}
|
|
1687
1932
|
},
|
|
1688
1933
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1691,6 +1936,7 @@
|
|
|
1691
1936
|
"original": {
|
|
1692
1937
|
"$value": "{base.color.orange.4}",
|
|
1693
1938
|
"$type": "color",
|
|
1939
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1694
1940
|
"$extensions": {
|
|
1695
1941
|
"org.primer.figma": {
|
|
1696
1942
|
"collection": "mode",
|
|
@@ -1717,6 +1963,10 @@
|
|
|
1717
1963
|
"isSource": true,
|
|
1718
1964
|
"$type": "color"
|
|
1719
1965
|
}
|
|
1966
|
+
},
|
|
1967
|
+
"org.primer.llm": {
|
|
1968
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1969
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1720
1970
|
}
|
|
1721
1971
|
},
|
|
1722
1972
|
"alpha": 0.1,
|
|
@@ -1730,6 +1980,7 @@
|
|
|
1730
1980
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1731
1981
|
"$value": "#9c1d6a",
|
|
1732
1982
|
"$type": "color",
|
|
1983
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1733
1984
|
"$extensions": {
|
|
1734
1985
|
"org.primer.figma": {
|
|
1735
1986
|
"collection": "mode",
|
|
@@ -1744,6 +1995,10 @@
|
|
|
1744
1995
|
"dark-dimmed-high-contrast": "#d23d91",
|
|
1745
1996
|
"dark-tritanopia-high-contrast": "#9c1d6a",
|
|
1746
1997
|
"dark-protanopia-deuteranopia-high-contrast": "#9c1d6a"
|
|
1998
|
+
},
|
|
1999
|
+
"org.primer.llm": {
|
|
2000
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2001
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1747
2002
|
}
|
|
1748
2003
|
},
|
|
1749
2004
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1751,6 +2006,7 @@
|
|
|
1751
2006
|
"original": {
|
|
1752
2007
|
"$value": "{base.color.pink.9}",
|
|
1753
2008
|
"$type": "color",
|
|
2009
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1754
2010
|
"$extensions": {
|
|
1755
2011
|
"org.primer.figma": {
|
|
1756
2012
|
"collection": "mode",
|
|
@@ -1765,6 +2021,10 @@
|
|
|
1765
2021
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1766
2022
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1767
2023
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2024
|
+
},
|
|
2025
|
+
"org.primer.llm": {
|
|
2026
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2027
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1768
2028
|
}
|
|
1769
2029
|
},
|
|
1770
2030
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1777,6 +2037,7 @@
|
|
|
1777
2037
|
"key": "{bgColor.sponsors.muted}",
|
|
1778
2038
|
"$value": "#f87cbd1a",
|
|
1779
2039
|
"$type": "color",
|
|
2040
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1780
2041
|
"$extensions": {
|
|
1781
2042
|
"org.primer.figma": {
|
|
1782
2043
|
"collection": "mode",
|
|
@@ -1801,6 +2062,10 @@
|
|
|
1801
2062
|
"isSource": true,
|
|
1802
2063
|
"$type": "color"
|
|
1803
2064
|
}
|
|
2065
|
+
},
|
|
2066
|
+
"org.primer.llm": {
|
|
2067
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2068
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1804
2069
|
}
|
|
1805
2070
|
},
|
|
1806
2071
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1809,6 +2074,7 @@
|
|
|
1809
2074
|
"original": {
|
|
1810
2075
|
"$value": "{base.color.pink.4}",
|
|
1811
2076
|
"$type": "color",
|
|
2077
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1812
2078
|
"$extensions": {
|
|
1813
2079
|
"org.primer.figma": {
|
|
1814
2080
|
"collection": "mode",
|
|
@@ -1833,6 +2099,10 @@
|
|
|
1833
2099
|
"isSource": true,
|
|
1834
2100
|
"$type": "color"
|
|
1835
2101
|
}
|
|
2102
|
+
},
|
|
2103
|
+
"org.primer.llm": {
|
|
2104
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2105
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1836
2106
|
}
|
|
1837
2107
|
},
|
|
1838
2108
|
"alpha": 0.1,
|
|
@@ -1846,6 +2116,7 @@
|
|
|
1846
2116
|
"key": "{bgColor.success.emphasis}",
|
|
1847
2117
|
"$value": "#194fb1",
|
|
1848
2118
|
"$type": "color",
|
|
2119
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1849
2120
|
"$extensions": {
|
|
1850
2121
|
"org.primer.figma": {
|
|
1851
2122
|
"collection": "mode",
|
|
@@ -1868,6 +2139,10 @@
|
|
|
1868
2139
|
"light-high-contrast": "#09b43a",
|
|
1869
2140
|
"dark-high-contrast": "#006222",
|
|
1870
2141
|
"dark-dimmed-high-contrast": "#008c2c"
|
|
2142
|
+
},
|
|
2143
|
+
"org.primer.llm": {
|
|
2144
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2145
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1871
2146
|
}
|
|
1872
2147
|
},
|
|
1873
2148
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1875,6 +2150,7 @@
|
|
|
1875
2150
|
"original": {
|
|
1876
2151
|
"$value": "{base.color.blue.9}",
|
|
1877
2152
|
"$type": "color",
|
|
2153
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1878
2154
|
"$extensions": {
|
|
1879
2155
|
"org.primer.figma": {
|
|
1880
2156
|
"collection": "mode",
|
|
@@ -1897,6 +2173,10 @@
|
|
|
1897
2173
|
"light-high-contrast": "{base.color.green.5}",
|
|
1898
2174
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1899
2175
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2176
|
+
},
|
|
2177
|
+
"org.primer.llm": {
|
|
2178
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2179
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1900
2180
|
}
|
|
1901
2181
|
},
|
|
1902
2182
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1909,6 +2189,7 @@
|
|
|
1909
2189
|
"key": "{bgColor.success.muted}",
|
|
1910
2190
|
"$value": "#5cacff26",
|
|
1911
2191
|
"$type": "color",
|
|
2192
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1912
2193
|
"$extensions": {
|
|
1913
2194
|
"org.primer.figma": {
|
|
1914
2195
|
"collection": "mode",
|
|
@@ -1958,6 +2239,10 @@
|
|
|
1958
2239
|
"isSource": true,
|
|
1959
2240
|
"$type": "color"
|
|
1960
2241
|
}
|
|
2242
|
+
},
|
|
2243
|
+
"org.primer.llm": {
|
|
2244
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2245
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1961
2246
|
}
|
|
1962
2247
|
},
|
|
1963
2248
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1966,6 +2251,7 @@
|
|
|
1966
2251
|
"original": {
|
|
1967
2252
|
"$value": "{base.color.blue.4}",
|
|
1968
2253
|
"$type": "color",
|
|
2254
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1969
2255
|
"$extensions": {
|
|
1970
2256
|
"org.primer.figma": {
|
|
1971
2257
|
"collection": "mode",
|
|
@@ -2015,6 +2301,10 @@
|
|
|
2015
2301
|
"isSource": true,
|
|
2016
2302
|
"$type": "color"
|
|
2017
2303
|
}
|
|
2304
|
+
},
|
|
2305
|
+
"org.primer.llm": {
|
|
2306
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2307
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2018
2308
|
}
|
|
2019
2309
|
},
|
|
2020
2310
|
"alpha": 0.15,
|
|
@@ -2028,6 +2318,7 @@
|
|
|
2028
2318
|
"key": "{bgColor.transparent}",
|
|
2029
2319
|
"$value": "#00000000",
|
|
2030
2320
|
"$type": "color",
|
|
2321
|
+
"$description": "Fully transparent background",
|
|
2031
2322
|
"$extensions": {
|
|
2032
2323
|
"org.primer.figma": {
|
|
2033
2324
|
"collection": "mode",
|
|
@@ -2036,6 +2327,10 @@
|
|
|
2036
2327
|
"codeSyntax": {
|
|
2037
2328
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2038
2329
|
}
|
|
2330
|
+
},
|
|
2331
|
+
"org.primer.llm": {
|
|
2332
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2333
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2039
2334
|
}
|
|
2040
2335
|
},
|
|
2041
2336
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2043,6 +2338,7 @@
|
|
|
2043
2338
|
"original": {
|
|
2044
2339
|
"$value": "{base.color.transparent}",
|
|
2045
2340
|
"$type": "color",
|
|
2341
|
+
"$description": "Fully transparent background",
|
|
2046
2342
|
"$extensions": {
|
|
2047
2343
|
"org.primer.figma": {
|
|
2048
2344
|
"collection": "mode",
|
|
@@ -2051,6 +2347,10 @@
|
|
|
2051
2347
|
"codeSyntax": {
|
|
2052
2348
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2053
2349
|
}
|
|
2350
|
+
},
|
|
2351
|
+
"org.primer.llm": {
|
|
2352
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2353
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2054
2354
|
}
|
|
2055
2355
|
},
|
|
2056
2356
|
"key": "{bgColor.transparent}"
|
|
@@ -2063,6 +2363,7 @@
|
|
|
2063
2363
|
"key": "{bgColor.upsell.emphasis}",
|
|
2064
2364
|
"$value": "#6921d7",
|
|
2065
2365
|
"$type": "color",
|
|
2366
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2066
2367
|
"$extensions": {
|
|
2067
2368
|
"org.primer.figma": {
|
|
2068
2369
|
"collection": "mode",
|
|
@@ -2071,6 +2372,10 @@
|
|
|
2071
2372
|
"codeSyntax": {
|
|
2072
2373
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2073
2374
|
}
|
|
2375
|
+
},
|
|
2376
|
+
"org.primer.llm": {
|
|
2377
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2378
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2074
2379
|
}
|
|
2075
2380
|
},
|
|
2076
2381
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2078,6 +2383,7 @@
|
|
|
2078
2383
|
"original": {
|
|
2079
2384
|
"$value": "{bgColor.done.emphasis}",
|
|
2080
2385
|
"$type": "color",
|
|
2386
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2081
2387
|
"$extensions": {
|
|
2082
2388
|
"org.primer.figma": {
|
|
2083
2389
|
"collection": "mode",
|
|
@@ -2086,6 +2392,10 @@
|
|
|
2086
2392
|
"codeSyntax": {
|
|
2087
2393
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2088
2394
|
}
|
|
2395
|
+
},
|
|
2396
|
+
"org.primer.llm": {
|
|
2397
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2398
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2089
2399
|
}
|
|
2090
2400
|
},
|
|
2091
2401
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2098,6 +2408,7 @@
|
|
|
2098
2408
|
"key": "{bgColor.upsell.muted}",
|
|
2099
2409
|
"$value": "#bf8fff26",
|
|
2100
2410
|
"$type": "color",
|
|
2411
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2101
2412
|
"$extensions": {
|
|
2102
2413
|
"org.primer.figma": {
|
|
2103
2414
|
"collection": "mode",
|
|
@@ -2106,6 +2417,10 @@
|
|
|
2106
2417
|
"codeSyntax": {
|
|
2107
2418
|
"web": "var(--bgColor-upsell-muted)"
|
|
2108
2419
|
}
|
|
2420
|
+
},
|
|
2421
|
+
"org.primer.llm": {
|
|
2422
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2423
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2109
2424
|
}
|
|
2110
2425
|
},
|
|
2111
2426
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2113,6 +2428,7 @@
|
|
|
2113
2428
|
"original": {
|
|
2114
2429
|
"$value": "{bgColor.done.muted}",
|
|
2115
2430
|
"$type": "color",
|
|
2431
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2116
2432
|
"$extensions": {
|
|
2117
2433
|
"org.primer.figma": {
|
|
2118
2434
|
"collection": "mode",
|
|
@@ -2121,6 +2437,10 @@
|
|
|
2121
2437
|
"codeSyntax": {
|
|
2122
2438
|
"web": "var(--bgColor-upsell-muted)"
|
|
2123
2439
|
}
|
|
2440
|
+
},
|
|
2441
|
+
"org.primer.llm": {
|
|
2442
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2443
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2124
2444
|
}
|
|
2125
2445
|
},
|
|
2126
2446
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2133,6 +2453,7 @@
|
|
|
2133
2453
|
"key": "{bgColor.white}",
|
|
2134
2454
|
"$value": "#ffffff",
|
|
2135
2455
|
"$type": "color",
|
|
2456
|
+
"$description": "Pure white background",
|
|
2136
2457
|
"$extensions": {
|
|
2137
2458
|
"org.primer.figma": {
|
|
2138
2459
|
"collection": "mode",
|
|
@@ -2141,6 +2462,10 @@
|
|
|
2141
2462
|
},
|
|
2142
2463
|
"org.primer.overrides": {
|
|
2143
2464
|
"dark": "#ffffff"
|
|
2465
|
+
},
|
|
2466
|
+
"org.primer.llm": {
|
|
2467
|
+
"doNotUse": true,
|
|
2468
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2144
2469
|
}
|
|
2145
2470
|
},
|
|
2146
2471
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2148,6 +2473,7 @@
|
|
|
2148
2473
|
"original": {
|
|
2149
2474
|
"$value": "{base.color.neutral.13}",
|
|
2150
2475
|
"$type": "color",
|
|
2476
|
+
"$description": "Pure white background",
|
|
2151
2477
|
"$extensions": {
|
|
2152
2478
|
"org.primer.figma": {
|
|
2153
2479
|
"collection": "mode",
|
|
@@ -2156,6 +2482,10 @@
|
|
|
2156
2482
|
},
|
|
2157
2483
|
"org.primer.overrides": {
|
|
2158
2484
|
"dark": "{base.color.neutral.13}"
|
|
2485
|
+
},
|
|
2486
|
+
"org.primer.llm": {
|
|
2487
|
+
"doNotUse": true,
|
|
2488
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2159
2489
|
}
|
|
2160
2490
|
},
|
|
2161
2491
|
"key": "{bgColor.white}"
|
|
@@ -2166,7 +2496,7 @@
|
|
|
2166
2496
|
},
|
|
2167
2497
|
"border-accent-emphasis": {
|
|
2168
2498
|
"key": "{border.accent.emphasis}",
|
|
2169
|
-
"$value": "0.
|
|
2499
|
+
"$value": "0.0625rem,1px solid #409eff",
|
|
2170
2500
|
"$type": "border",
|
|
2171
2501
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2172
2502
|
"isSource": true,
|
|
@@ -2185,7 +2515,7 @@
|
|
|
2185
2515
|
},
|
|
2186
2516
|
"border-accent-muted": {
|
|
2187
2517
|
"key": "{border.accent.muted}",
|
|
2188
|
-
"$value": "0.
|
|
2518
|
+
"$value": "0.0625rem,1px solid #5cacff",
|
|
2189
2519
|
"$type": "border",
|
|
2190
2520
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2191
2521
|
"isSource": true,
|
|
@@ -2204,7 +2534,7 @@
|
|
|
2204
2534
|
},
|
|
2205
2535
|
"border-attention-emphasis": {
|
|
2206
2536
|
"key": "{border.attention.emphasis}",
|
|
2207
|
-
"$value": "0.
|
|
2537
|
+
"$value": "0.0625rem,1px solid #e09b13",
|
|
2208
2538
|
"$type": "border",
|
|
2209
2539
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2210
2540
|
"isSource": true,
|
|
@@ -2223,7 +2553,7 @@
|
|
|
2223
2553
|
},
|
|
2224
2554
|
"border-attention-muted": {
|
|
2225
2555
|
"key": "{border.attention.muted}",
|
|
2226
|
-
"$value": "0.
|
|
2556
|
+
"$value": "0.0625rem,1px solid #edaa27",
|
|
2227
2557
|
"$type": "border",
|
|
2228
2558
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2229
2559
|
"isSource": true,
|
|
@@ -2242,7 +2572,7 @@
|
|
|
2242
2572
|
},
|
|
2243
2573
|
"border-closed-emphasis": {
|
|
2244
2574
|
"key": "{border.closed.emphasis}",
|
|
2245
|
-
"$value": "0.
|
|
2575
|
+
"$value": "0.0625rem,1px solid #ff6a69",
|
|
2246
2576
|
"$type": "border",
|
|
2247
2577
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2248
2578
|
"isSource": true,
|
|
@@ -2257,7 +2587,7 @@
|
|
|
2257
2587
|
},
|
|
2258
2588
|
"border-closed-muted": {
|
|
2259
2589
|
"key": "{border.closed.muted}",
|
|
2260
|
-
"$value": "0.
|
|
2590
|
+
"$value": "0.0625rem,1px solid #ff8080",
|
|
2261
2591
|
"$type": "border",
|
|
2262
2592
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2263
2593
|
"isSource": true,
|
|
@@ -2272,7 +2602,7 @@
|
|
|
2272
2602
|
},
|
|
2273
2603
|
"border-danger-emphasis": {
|
|
2274
2604
|
"key": "{border.danger.emphasis}",
|
|
2275
|
-
"$value": "0.
|
|
2605
|
+
"$value": "0.0625rem,1px solid #ff6a69",
|
|
2276
2606
|
"$type": "border",
|
|
2277
2607
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2278
2608
|
"isSource": true,
|
|
@@ -2291,7 +2621,7 @@
|
|
|
2291
2621
|
},
|
|
2292
2622
|
"border-danger-muted": {
|
|
2293
2623
|
"key": "{border.danger.muted}",
|
|
2294
|
-
"$value": "0.
|
|
2624
|
+
"$value": "0.0625rem,1px solid #ff8080",
|
|
2295
2625
|
"$type": "border",
|
|
2296
2626
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2297
2627
|
"isSource": true,
|
|
@@ -2310,7 +2640,7 @@
|
|
|
2310
2640
|
},
|
|
2311
2641
|
"border-default": {
|
|
2312
2642
|
"key": "{border.default}",
|
|
2313
|
-
"$value": "0.
|
|
2643
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2314
2644
|
"$type": "border",
|
|
2315
2645
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2316
2646
|
"isSource": true,
|
|
@@ -2329,7 +2659,7 @@
|
|
|
2329
2659
|
},
|
|
2330
2660
|
"border-disabled": {
|
|
2331
2661
|
"key": "{border.disabled}",
|
|
2332
|
-
"$value": "0.
|
|
2662
|
+
"$value": "0.0625rem,1px solid #656c761a",
|
|
2333
2663
|
"$type": "border",
|
|
2334
2664
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2335
2665
|
"isSource": true,
|
|
@@ -2348,7 +2678,7 @@
|
|
|
2348
2678
|
},
|
|
2349
2679
|
"border-done-emphasis": {
|
|
2350
2680
|
"key": "{border.done.emphasis}",
|
|
2351
|
-
"$value": "0.
|
|
2681
|
+
"$value": "0.0625rem,1px solid #b87fff",
|
|
2352
2682
|
"$type": "border",
|
|
2353
2683
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2354
2684
|
"isSource": true,
|
|
@@ -2367,7 +2697,7 @@
|
|
|
2367
2697
|
},
|
|
2368
2698
|
"border-done-muted": {
|
|
2369
2699
|
"key": "{border.done.muted}",
|
|
2370
|
-
"$value": "0.
|
|
2700
|
+
"$value": "0.0625rem,1px solid #bf8fff",
|
|
2371
2701
|
"$type": "border",
|
|
2372
2702
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2373
2703
|
"isSource": true,
|
|
@@ -2386,7 +2716,7 @@
|
|
|
2386
2716
|
},
|
|
2387
2717
|
"border-emphasis": {
|
|
2388
2718
|
"key": "{border.emphasis}",
|
|
2389
|
-
"$value": "0.
|
|
2719
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2390
2720
|
"$type": "border",
|
|
2391
2721
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2392
2722
|
"isSource": true,
|
|
@@ -2405,7 +2735,7 @@
|
|
|
2405
2735
|
},
|
|
2406
2736
|
"border-muted": {
|
|
2407
2737
|
"key": "{border.muted}",
|
|
2408
|
-
"$value": "0.
|
|
2738
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2409
2739
|
"$type": "border",
|
|
2410
2740
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2411
2741
|
"isSource": true,
|
|
@@ -2424,7 +2754,7 @@
|
|
|
2424
2754
|
},
|
|
2425
2755
|
"border-neutral-emphasis": {
|
|
2426
2756
|
"key": "{border.neutral.emphasis}",
|
|
2427
|
-
"$value": "0.
|
|
2757
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2428
2758
|
"$type": "border",
|
|
2429
2759
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2430
2760
|
"isSource": true,
|
|
@@ -2443,7 +2773,7 @@
|
|
|
2443
2773
|
},
|
|
2444
2774
|
"border-neutral-muted": {
|
|
2445
2775
|
"key": "{border.neutral.muted}",
|
|
2446
|
-
"$value": "0.
|
|
2776
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2447
2777
|
"$type": "border",
|
|
2448
2778
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2449
2779
|
"isSource": true,
|
|
@@ -2462,7 +2792,7 @@
|
|
|
2462
2792
|
},
|
|
2463
2793
|
"border-open-emphasis": {
|
|
2464
2794
|
"key": "{border.open.emphasis}",
|
|
2465
|
-
"$value": "0.
|
|
2795
|
+
"$value": "0.0625rem,1px solid #409eff",
|
|
2466
2796
|
"$type": "border",
|
|
2467
2797
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2468
2798
|
"isSource": true,
|
|
@@ -2477,7 +2807,7 @@
|
|
|
2477
2807
|
},
|
|
2478
2808
|
"border-open-muted": {
|
|
2479
2809
|
"key": "{border.open.muted}",
|
|
2480
|
-
"$value": "0.
|
|
2810
|
+
"$value": "0.0625rem,1px solid #5cacff",
|
|
2481
2811
|
"$type": "border",
|
|
2482
2812
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2483
2813
|
"isSource": true,
|
|
@@ -2492,7 +2822,7 @@
|
|
|
2492
2822
|
},
|
|
2493
2823
|
"border-severe-emphasis": {
|
|
2494
2824
|
"key": "{border.severe.emphasis}",
|
|
2495
|
-
"$value": "0.
|
|
2825
|
+
"$value": "0.0625rem,1px solid #e7811d",
|
|
2496
2826
|
"$type": "border",
|
|
2497
2827
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2498
2828
|
"isSource": true,
|
|
@@ -2511,7 +2841,7 @@
|
|
|
2511
2841
|
},
|
|
2512
2842
|
"border-severe-muted": {
|
|
2513
2843
|
"key": "{border.severe.muted}",
|
|
2514
|
-
"$value": "0.
|
|
2844
|
+
"$value": "0.0625rem,1px solid #ff8080",
|
|
2515
2845
|
"$type": "border",
|
|
2516
2846
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2517
2847
|
"isSource": true,
|
|
@@ -2530,7 +2860,7 @@
|
|
|
2530
2860
|
},
|
|
2531
2861
|
"border-sponsors-emphasis": {
|
|
2532
2862
|
"key": "{border.sponsors.emphasis}",
|
|
2533
|
-
"$value": "0.
|
|
2863
|
+
"$value": "0.0625rem,1px solid #ef6eb1",
|
|
2534
2864
|
"$type": "border",
|
|
2535
2865
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2536
2866
|
"isSource": true,
|
|
@@ -2549,7 +2879,7 @@
|
|
|
2549
2879
|
},
|
|
2550
2880
|
"border-sponsors-muted": {
|
|
2551
2881
|
"key": "{border.sponsors.muted}",
|
|
2552
|
-
"$value": "0.
|
|
2882
|
+
"$value": "0.0625rem,1px solid #f87cbd",
|
|
2553
2883
|
"$type": "border",
|
|
2554
2884
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2555
2885
|
"isSource": true,
|
|
@@ -2568,7 +2898,7 @@
|
|
|
2568
2898
|
},
|
|
2569
2899
|
"border-success-emphasis": {
|
|
2570
2900
|
"key": "{border.success.emphasis}",
|
|
2571
|
-
"$value": "0.
|
|
2901
|
+
"$value": "0.0625rem,1px solid #409eff",
|
|
2572
2902
|
"$type": "border",
|
|
2573
2903
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2574
2904
|
"isSource": true,
|
|
@@ -2587,7 +2917,7 @@
|
|
|
2587
2917
|
},
|
|
2588
2918
|
"border-success-muted": {
|
|
2589
2919
|
"key": "{border.success.muted}",
|
|
2590
|
-
"$value": "0.
|
|
2920
|
+
"$value": "0.0625rem,1px solid #5cacff",
|
|
2591
2921
|
"$type": "border",
|
|
2592
2922
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2593
2923
|
"isSource": true,
|
|
@@ -2606,7 +2936,7 @@
|
|
|
2606
2936
|
},
|
|
2607
2937
|
"border-transparent": {
|
|
2608
2938
|
"key": "{border.transparent}",
|
|
2609
|
-
"$value": "0.
|
|
2939
|
+
"$value": "0.0625rem,1px solid #00000000",
|
|
2610
2940
|
"$type": "border",
|
|
2611
2941
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2612
2942
|
"isSource": true,
|
|
@@ -2625,7 +2955,7 @@
|
|
|
2625
2955
|
},
|
|
2626
2956
|
"border-upsell-emphasis": {
|
|
2627
2957
|
"key": "{border.upsell.emphasis}",
|
|
2628
|
-
"$value": "0.
|
|
2958
|
+
"$value": "0.0625rem,1px solid #b87fff",
|
|
2629
2959
|
"$type": "border",
|
|
2630
2960
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2631
2961
|
"isSource": true,
|
|
@@ -2644,7 +2974,7 @@
|
|
|
2644
2974
|
},
|
|
2645
2975
|
"border-upsell-muted": {
|
|
2646
2976
|
"key": "{border.upsell.muted}",
|
|
2647
|
-
"$value": "0.
|
|
2977
|
+
"$value": "0.0625rem,1px solid #bf8fff",
|
|
2648
2978
|
"$type": "border",
|
|
2649
2979
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2650
2980
|
"isSource": true,
|
|
@@ -2665,6 +2995,7 @@
|
|
|
2665
2995
|
"key": "{borderColor.accent.emphasis}",
|
|
2666
2996
|
"$value": "#409eff",
|
|
2667
2997
|
"$type": "color",
|
|
2998
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2668
2999
|
"$extensions": {
|
|
2669
3000
|
"org.primer.figma": {
|
|
2670
3001
|
"collection": "mode",
|
|
@@ -2676,6 +3007,10 @@
|
|
|
2676
3007
|
},
|
|
2677
3008
|
"org.primer.overrides": {
|
|
2678
3009
|
"dark-dimmed-high-contrast": "#91cbff"
|
|
3010
|
+
},
|
|
3011
|
+
"org.primer.llm": {
|
|
3012
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3013
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2679
3014
|
}
|
|
2680
3015
|
},
|
|
2681
3016
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2683,6 +3018,7 @@
|
|
|
2683
3018
|
"original": {
|
|
2684
3019
|
"$value": "{base.color.blue.5}",
|
|
2685
3020
|
"$type": "color",
|
|
3021
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2686
3022
|
"$extensions": {
|
|
2687
3023
|
"org.primer.figma": {
|
|
2688
3024
|
"collection": "mode",
|
|
@@ -2694,6 +3030,10 @@
|
|
|
2694
3030
|
},
|
|
2695
3031
|
"org.primer.overrides": {
|
|
2696
3032
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3033
|
+
},
|
|
3034
|
+
"org.primer.llm": {
|
|
3035
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3036
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2697
3037
|
}
|
|
2698
3038
|
},
|
|
2699
3039
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2706,6 +3046,7 @@
|
|
|
2706
3046
|
"key": "{borderColor.accent.muted}",
|
|
2707
3047
|
"$value": "#5cacff",
|
|
2708
3048
|
"$type": "color",
|
|
3049
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2709
3050
|
"$extensions": {
|
|
2710
3051
|
"org.primer.figma": {
|
|
2711
3052
|
"collection": "mode",
|
|
@@ -2766,6 +3107,10 @@
|
|
|
2766
3107
|
"isSource": true,
|
|
2767
3108
|
"$type": "color"
|
|
2768
3109
|
}
|
|
3110
|
+
},
|
|
3111
|
+
"org.primer.llm": {
|
|
3112
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3113
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2769
3114
|
}
|
|
2770
3115
|
},
|
|
2771
3116
|
"alpha": 1,
|
|
@@ -2774,6 +3119,7 @@
|
|
|
2774
3119
|
"original": {
|
|
2775
3120
|
"$value": "{base.color.blue.4}",
|
|
2776
3121
|
"$type": "color",
|
|
3122
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2777
3123
|
"$extensions": {
|
|
2778
3124
|
"org.primer.figma": {
|
|
2779
3125
|
"collection": "mode",
|
|
@@ -2834,6 +3180,10 @@
|
|
|
2834
3180
|
"isSource": true,
|
|
2835
3181
|
"$type": "color"
|
|
2836
3182
|
}
|
|
3183
|
+
},
|
|
3184
|
+
"org.primer.llm": {
|
|
3185
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3186
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2837
3187
|
}
|
|
2838
3188
|
},
|
|
2839
3189
|
"alpha": 1,
|
|
@@ -2847,6 +3197,7 @@
|
|
|
2847
3197
|
"key": "{borderColor.attention.emphasis}",
|
|
2848
3198
|
"$value": "#e09b13",
|
|
2849
3199
|
"$type": "color",
|
|
3200
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2850
3201
|
"$extensions": {
|
|
2851
3202
|
"org.primer.figma": {
|
|
2852
3203
|
"collection": "mode",
|
|
@@ -2858,6 +3209,10 @@
|
|
|
2858
3209
|
},
|
|
2859
3210
|
"org.primer.overrides": {
|
|
2860
3211
|
"dark-dimmed-high-contrast": "#f7c843"
|
|
3212
|
+
},
|
|
3213
|
+
"org.primer.llm": {
|
|
3214
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3215
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2861
3216
|
}
|
|
2862
3217
|
},
|
|
2863
3218
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2865,6 +3220,7 @@
|
|
|
2865
3220
|
"original": {
|
|
2866
3221
|
"$value": "{base.color.yellow.5}",
|
|
2867
3222
|
"$type": "color",
|
|
3223
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2868
3224
|
"$extensions": {
|
|
2869
3225
|
"org.primer.figma": {
|
|
2870
3226
|
"collection": "mode",
|
|
@@ -2876,6 +3232,10 @@
|
|
|
2876
3232
|
},
|
|
2877
3233
|
"org.primer.overrides": {
|
|
2878
3234
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3235
|
+
},
|
|
3236
|
+
"org.primer.llm": {
|
|
3237
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3238
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2879
3239
|
}
|
|
2880
3240
|
},
|
|
2881
3241
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2888,6 +3248,7 @@
|
|
|
2888
3248
|
"key": "{borderColor.attention.muted}",
|
|
2889
3249
|
"$value": "#edaa27",
|
|
2890
3250
|
"$type": "color",
|
|
3251
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2891
3252
|
"$extensions": {
|
|
2892
3253
|
"org.primer.figma": {
|
|
2893
3254
|
"collection": "mode",
|
|
@@ -2948,6 +3309,10 @@
|
|
|
2948
3309
|
"isSource": true,
|
|
2949
3310
|
"$type": "color"
|
|
2950
3311
|
}
|
|
3312
|
+
},
|
|
3313
|
+
"org.primer.llm": {
|
|
3314
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3315
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2951
3316
|
}
|
|
2952
3317
|
},
|
|
2953
3318
|
"alpha": 1,
|
|
@@ -2956,6 +3321,7 @@
|
|
|
2956
3321
|
"original": {
|
|
2957
3322
|
"$value": "{base.color.yellow.4}",
|
|
2958
3323
|
"$type": "color",
|
|
3324
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2959
3325
|
"$extensions": {
|
|
2960
3326
|
"org.primer.figma": {
|
|
2961
3327
|
"collection": "mode",
|
|
@@ -3016,6 +3382,10 @@
|
|
|
3016
3382
|
"isSource": true,
|
|
3017
3383
|
"$type": "color"
|
|
3018
3384
|
}
|
|
3385
|
+
},
|
|
3386
|
+
"org.primer.llm": {
|
|
3387
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3388
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3019
3389
|
}
|
|
3020
3390
|
},
|
|
3021
3391
|
"alpha": 1,
|
|
@@ -3029,6 +3399,7 @@
|
|
|
3029
3399
|
"key": "{borderColor.closed.emphasis}",
|
|
3030
3400
|
"$value": "#b7bdc8",
|
|
3031
3401
|
"$type": "color",
|
|
3402
|
+
"$description": "Strong border for closed state badges",
|
|
3032
3403
|
"$extensions": {
|
|
3033
3404
|
"org.primer.figma": {
|
|
3034
3405
|
"collection": "mode",
|
|
@@ -3047,6 +3418,10 @@
|
|
|
3047
3418
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
3048
3419
|
"light-tritanopia": "#b7bdc8",
|
|
3049
3420
|
"light-tritanopia-high-contrast": "#b7bdc8"
|
|
3421
|
+
},
|
|
3422
|
+
"org.primer.llm": {
|
|
3423
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3424
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3050
3425
|
}
|
|
3051
3426
|
},
|
|
3052
3427
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3054,6 +3429,7 @@
|
|
|
3054
3429
|
"original": {
|
|
3055
3430
|
"$value": "{borderColor.emphasis}",
|
|
3056
3431
|
"$type": "color",
|
|
3432
|
+
"$description": "Strong border for closed state badges",
|
|
3057
3433
|
"$extensions": {
|
|
3058
3434
|
"org.primer.figma": {
|
|
3059
3435
|
"collection": "mode",
|
|
@@ -3072,6 +3448,10 @@
|
|
|
3072
3448
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3073
3449
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3074
3450
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3451
|
+
},
|
|
3452
|
+
"org.primer.llm": {
|
|
3453
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3454
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3075
3455
|
}
|
|
3076
3456
|
},
|
|
3077
3457
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3084,6 +3464,7 @@
|
|
|
3084
3464
|
"key": "{borderColor.closed.muted}",
|
|
3085
3465
|
"$value": "#b7bdc8",
|
|
3086
3466
|
"$type": "color",
|
|
3467
|
+
"$description": "Subtle border for closed state indicators",
|
|
3087
3468
|
"$extensions": {
|
|
3088
3469
|
"org.primer.figma": {
|
|
3089
3470
|
"collection": "mode",
|
|
@@ -3150,6 +3531,10 @@
|
|
|
3150
3531
|
"isSource": true,
|
|
3151
3532
|
"$type": "color"
|
|
3152
3533
|
}
|
|
3534
|
+
},
|
|
3535
|
+
"org.primer.llm": {
|
|
3536
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3537
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3153
3538
|
}
|
|
3154
3539
|
},
|
|
3155
3540
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3158,6 +3543,7 @@
|
|
|
3158
3543
|
"original": {
|
|
3159
3544
|
"$value": "{borderColor.default}",
|
|
3160
3545
|
"$type": "color",
|
|
3546
|
+
"$description": "Subtle border for closed state indicators",
|
|
3161
3547
|
"$extensions": {
|
|
3162
3548
|
"org.primer.figma": {
|
|
3163
3549
|
"collection": "mode",
|
|
@@ -3224,6 +3610,10 @@
|
|
|
3224
3610
|
"isSource": true,
|
|
3225
3611
|
"$type": "color"
|
|
3226
3612
|
}
|
|
3613
|
+
},
|
|
3614
|
+
"org.primer.llm": {
|
|
3615
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3616
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3227
3617
|
}
|
|
3228
3618
|
},
|
|
3229
3619
|
"alpha": 1,
|
|
@@ -3237,6 +3627,7 @@
|
|
|
3237
3627
|
"key": "{borderColor.danger.emphasis}",
|
|
3238
3628
|
"$value": "#ff6a69",
|
|
3239
3629
|
"$type": "color",
|
|
3630
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3240
3631
|
"$extensions": {
|
|
3241
3632
|
"org.primer.figma": {
|
|
3242
3633
|
"collection": "mode",
|
|
@@ -3272,6 +3663,10 @@
|
|
|
3272
3663
|
"$type": "color"
|
|
3273
3664
|
},
|
|
3274
3665
|
"dark-dimmed-high-contrast": "#ffb1af"
|
|
3666
|
+
},
|
|
3667
|
+
"org.primer.llm": {
|
|
3668
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3669
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3275
3670
|
}
|
|
3276
3671
|
},
|
|
3277
3672
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3279,6 +3674,7 @@
|
|
|
3279
3674
|
"original": {
|
|
3280
3675
|
"$value": "{base.color.red.5}",
|
|
3281
3676
|
"$type": "color",
|
|
3677
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3282
3678
|
"$extensions": {
|
|
3283
3679
|
"org.primer.figma": {
|
|
3284
3680
|
"collection": "mode",
|
|
@@ -3314,6 +3710,10 @@
|
|
|
3314
3710
|
"$type": "color"
|
|
3315
3711
|
},
|
|
3316
3712
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3713
|
+
},
|
|
3714
|
+
"org.primer.llm": {
|
|
3715
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3716
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3317
3717
|
}
|
|
3318
3718
|
},
|
|
3319
3719
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3326,6 +3726,7 @@
|
|
|
3326
3726
|
"key": "{borderColor.danger.muted}",
|
|
3327
3727
|
"$value": "#ff8080",
|
|
3328
3728
|
"$type": "color",
|
|
3729
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3329
3730
|
"$extensions": {
|
|
3330
3731
|
"org.primer.figma": {
|
|
3331
3732
|
"collection": "mode",
|
|
@@ -3399,6 +3800,10 @@
|
|
|
3399
3800
|
"isSource": true,
|
|
3400
3801
|
"$type": "color"
|
|
3401
3802
|
}
|
|
3803
|
+
},
|
|
3804
|
+
"org.primer.llm": {
|
|
3805
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3806
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3402
3807
|
}
|
|
3403
3808
|
},
|
|
3404
3809
|
"alpha": 1,
|
|
@@ -3407,6 +3812,7 @@
|
|
|
3407
3812
|
"original": {
|
|
3408
3813
|
"$value": "{base.color.red.4}",
|
|
3409
3814
|
"$type": "color",
|
|
3815
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3410
3816
|
"$extensions": {
|
|
3411
3817
|
"org.primer.figma": {
|
|
3412
3818
|
"collection": "mode",
|
|
@@ -3480,6 +3886,10 @@
|
|
|
3480
3886
|
"isSource": true,
|
|
3481
3887
|
"$type": "color"
|
|
3482
3888
|
}
|
|
3889
|
+
},
|
|
3890
|
+
"org.primer.llm": {
|
|
3891
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3892
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3483
3893
|
}
|
|
3484
3894
|
},
|
|
3485
3895
|
"alpha": 1,
|
|
@@ -3493,6 +3903,7 @@
|
|
|
3493
3903
|
"key": "{borderColor.default}",
|
|
3494
3904
|
"$value": "#b7bdc8",
|
|
3495
3905
|
"$type": "color",
|
|
3906
|
+
"$description": "Default border color for most UI elements",
|
|
3496
3907
|
"$extensions": {
|
|
3497
3908
|
"org.primer.overrides": {
|
|
3498
3909
|
"dark": "#3d444d",
|
|
@@ -3512,6 +3923,10 @@
|
|
|
3512
3923
|
"codeSyntax": {
|
|
3513
3924
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3514
3925
|
}
|
|
3926
|
+
},
|
|
3927
|
+
"org.primer.llm": {
|
|
3928
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3929
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3515
3930
|
}
|
|
3516
3931
|
},
|
|
3517
3932
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3519,6 +3934,7 @@
|
|
|
3519
3934
|
"original": {
|
|
3520
3935
|
"$value": "{base.color.neutral.10}",
|
|
3521
3936
|
"$type": "color",
|
|
3937
|
+
"$description": "Default border color for most UI elements",
|
|
3522
3938
|
"$extensions": {
|
|
3523
3939
|
"org.primer.overrides": {
|
|
3524
3940
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3538,6 +3954,10 @@
|
|
|
3538
3954
|
"codeSyntax": {
|
|
3539
3955
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3540
3956
|
}
|
|
3957
|
+
},
|
|
3958
|
+
"org.primer.llm": {
|
|
3959
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3960
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3541
3961
|
}
|
|
3542
3962
|
},
|
|
3543
3963
|
"key": "{borderColor.default}"
|
|
@@ -3550,6 +3970,7 @@
|
|
|
3550
3970
|
"key": "{borderColor.disabled}",
|
|
3551
3971
|
"$value": "#656c761a",
|
|
3552
3972
|
"$type": "color",
|
|
3973
|
+
"$description": "Border color for disabled interactive elements",
|
|
3553
3974
|
"$extensions": {
|
|
3554
3975
|
"org.primer.figma": {
|
|
3555
3976
|
"collection": "mode",
|
|
@@ -3592,6 +4013,10 @@
|
|
|
3592
4013
|
"isSource": true,
|
|
3593
4014
|
"$type": "color"
|
|
3594
4015
|
}
|
|
4016
|
+
},
|
|
4017
|
+
"org.primer.llm": {
|
|
4018
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4019
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3595
4020
|
}
|
|
3596
4021
|
},
|
|
3597
4022
|
"alpha": 0.1,
|
|
@@ -3600,6 +4025,7 @@
|
|
|
3600
4025
|
"original": {
|
|
3601
4026
|
"$value": "{base.color.neutral.8}",
|
|
3602
4027
|
"$type": "color",
|
|
4028
|
+
"$description": "Border color for disabled interactive elements",
|
|
3603
4029
|
"$extensions": {
|
|
3604
4030
|
"org.primer.figma": {
|
|
3605
4031
|
"collection": "mode",
|
|
@@ -3642,6 +4068,10 @@
|
|
|
3642
4068
|
"isSource": true,
|
|
3643
4069
|
"$type": "color"
|
|
3644
4070
|
}
|
|
4071
|
+
},
|
|
4072
|
+
"org.primer.llm": {
|
|
4073
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4074
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3645
4075
|
}
|
|
3646
4076
|
},
|
|
3647
4077
|
"alpha": 0.1,
|
|
@@ -3655,6 +4085,7 @@
|
|
|
3655
4085
|
"key": "{borderColor.done.emphasis}",
|
|
3656
4086
|
"$value": "#b87fff",
|
|
3657
4087
|
"$type": "color",
|
|
4088
|
+
"$description": "Strong border for completed/done state badges",
|
|
3658
4089
|
"$extensions": {
|
|
3659
4090
|
"org.primer.figma": {
|
|
3660
4091
|
"collection": "mode",
|
|
@@ -3666,6 +4097,10 @@
|
|
|
3666
4097
|
},
|
|
3667
4098
|
"org.primer.overrides": {
|
|
3668
4099
|
"dark-dimmed-high-contrast": "#dbb7ff"
|
|
4100
|
+
},
|
|
4101
|
+
"org.primer.llm": {
|
|
4102
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4103
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3669
4104
|
}
|
|
3670
4105
|
},
|
|
3671
4106
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3673,6 +4108,7 @@
|
|
|
3673
4108
|
"original": {
|
|
3674
4109
|
"$value": "{base.color.purple.5}",
|
|
3675
4110
|
"$type": "color",
|
|
4111
|
+
"$description": "Strong border for completed/done state badges",
|
|
3676
4112
|
"$extensions": {
|
|
3677
4113
|
"org.primer.figma": {
|
|
3678
4114
|
"collection": "mode",
|
|
@@ -3684,6 +4120,10 @@
|
|
|
3684
4120
|
},
|
|
3685
4121
|
"org.primer.overrides": {
|
|
3686
4122
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4123
|
+
},
|
|
4124
|
+
"org.primer.llm": {
|
|
4125
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4126
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3687
4127
|
}
|
|
3688
4128
|
},
|
|
3689
4129
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3696,6 +4136,7 @@
|
|
|
3696
4136
|
"key": "{borderColor.done.muted}",
|
|
3697
4137
|
"$value": "#bf8fff",
|
|
3698
4138
|
"$type": "color",
|
|
4139
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3699
4140
|
"$extensions": {
|
|
3700
4141
|
"org.primer.figma": {
|
|
3701
4142
|
"collection": "mode",
|
|
@@ -3756,6 +4197,10 @@
|
|
|
3756
4197
|
"isSource": true,
|
|
3757
4198
|
"$type": "color"
|
|
3758
4199
|
}
|
|
4200
|
+
},
|
|
4201
|
+
"org.primer.llm": {
|
|
4202
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4203
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3759
4204
|
}
|
|
3760
4205
|
},
|
|
3761
4206
|
"alpha": 1,
|
|
@@ -3764,6 +4209,7 @@
|
|
|
3764
4209
|
"original": {
|
|
3765
4210
|
"$value": "{base.color.purple.4}",
|
|
3766
4211
|
"$type": "color",
|
|
4212
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3767
4213
|
"$extensions": {
|
|
3768
4214
|
"org.primer.figma": {
|
|
3769
4215
|
"collection": "mode",
|
|
@@ -3824,6 +4270,10 @@
|
|
|
3824
4270
|
"isSource": true,
|
|
3825
4271
|
"$type": "color"
|
|
3826
4272
|
}
|
|
4273
|
+
},
|
|
4274
|
+
"org.primer.llm": {
|
|
4275
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4276
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3827
4277
|
}
|
|
3828
4278
|
},
|
|
3829
4279
|
"alpha": 1,
|
|
@@ -3837,6 +4287,7 @@
|
|
|
3837
4287
|
"key": "{borderColor.draft.emphasis}",
|
|
3838
4288
|
"$value": "#b7bdc8",
|
|
3839
4289
|
"$type": "color",
|
|
4290
|
+
"$description": "Strong border for draft state badges",
|
|
3840
4291
|
"$extensions": {
|
|
3841
4292
|
"org.primer.figma": {
|
|
3842
4293
|
"collection": "mode",
|
|
@@ -3845,6 +4296,10 @@
|
|
|
3845
4296
|
"codeSyntax": {
|
|
3846
4297
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3847
4298
|
}
|
|
4299
|
+
},
|
|
4300
|
+
"org.primer.llm": {
|
|
4301
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4302
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3848
4303
|
}
|
|
3849
4304
|
},
|
|
3850
4305
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3852,6 +4307,7 @@
|
|
|
3852
4307
|
"original": {
|
|
3853
4308
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3854
4309
|
"$type": "color",
|
|
4310
|
+
"$description": "Strong border for draft state badges",
|
|
3855
4311
|
"$extensions": {
|
|
3856
4312
|
"org.primer.figma": {
|
|
3857
4313
|
"collection": "mode",
|
|
@@ -3860,6 +4316,10 @@
|
|
|
3860
4316
|
"codeSyntax": {
|
|
3861
4317
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3862
4318
|
}
|
|
4319
|
+
},
|
|
4320
|
+
"org.primer.llm": {
|
|
4321
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4322
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3863
4323
|
}
|
|
3864
4324
|
},
|
|
3865
4325
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3872,6 +4332,7 @@
|
|
|
3872
4332
|
"key": "{borderColor.draft.muted}",
|
|
3873
4333
|
"$value": "#b7bdc8",
|
|
3874
4334
|
"$type": "color",
|
|
4335
|
+
"$description": "Subtle border for draft state indicators",
|
|
3875
4336
|
"$extensions": {
|
|
3876
4337
|
"org.primer.figma": {
|
|
3877
4338
|
"collection": "mode",
|
|
@@ -3938,6 +4399,10 @@
|
|
|
3938
4399
|
"isSource": true,
|
|
3939
4400
|
"$type": "color"
|
|
3940
4401
|
}
|
|
4402
|
+
},
|
|
4403
|
+
"org.primer.llm": {
|
|
4404
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4405
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3941
4406
|
}
|
|
3942
4407
|
},
|
|
3943
4408
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3946,6 +4411,7 @@
|
|
|
3946
4411
|
"original": {
|
|
3947
4412
|
"$value": "{borderColor.default}",
|
|
3948
4413
|
"$type": "color",
|
|
4414
|
+
"$description": "Subtle border for draft state indicators",
|
|
3949
4415
|
"$extensions": {
|
|
3950
4416
|
"org.primer.figma": {
|
|
3951
4417
|
"collection": "mode",
|
|
@@ -4012,6 +4478,10 @@
|
|
|
4012
4478
|
"isSource": true,
|
|
4013
4479
|
"$type": "color"
|
|
4014
4480
|
}
|
|
4481
|
+
},
|
|
4482
|
+
"org.primer.llm": {
|
|
4483
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4484
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4015
4485
|
}
|
|
4016
4486
|
},
|
|
4017
4487
|
"alpha": 1,
|
|
@@ -4025,6 +4495,7 @@
|
|
|
4025
4495
|
"key": "{borderColor.emphasis}",
|
|
4026
4496
|
"$value": "#b7bdc8",
|
|
4027
4497
|
"$type": "color",
|
|
4498
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4028
4499
|
"$extensions": {
|
|
4029
4500
|
"org.primer.figma": {
|
|
4030
4501
|
"collection": "mode",
|
|
@@ -4039,6 +4510,10 @@
|
|
|
4039
4510
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
4040
4511
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
4041
4512
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
4513
|
+
},
|
|
4514
|
+
"org.primer.llm": {
|
|
4515
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4516
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4042
4517
|
}
|
|
4043
4518
|
},
|
|
4044
4519
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4046,6 +4521,7 @@
|
|
|
4046
4521
|
"original": {
|
|
4047
4522
|
"$value": "{borderColor.default}",
|
|
4048
4523
|
"$type": "color",
|
|
4524
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4049
4525
|
"$extensions": {
|
|
4050
4526
|
"org.primer.figma": {
|
|
4051
4527
|
"collection": "mode",
|
|
@@ -4060,6 +4536,10 @@
|
|
|
4060
4536
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4061
4537
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4062
4538
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4539
|
+
},
|
|
4540
|
+
"org.primer.llm": {
|
|
4541
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4542
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4063
4543
|
}
|
|
4064
4544
|
},
|
|
4065
4545
|
"key": "{borderColor.emphasis}"
|
|
@@ -4072,6 +4552,7 @@
|
|
|
4072
4552
|
"key": "{borderColor.muted}",
|
|
4073
4553
|
"$value": "#b7bdc8",
|
|
4074
4554
|
"$type": "color",
|
|
4555
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4075
4556
|
"$extensions": {
|
|
4076
4557
|
"org.primer.figma": {
|
|
4077
4558
|
"collection": "mode",
|
|
@@ -4138,6 +4619,10 @@
|
|
|
4138
4619
|
"isSource": true,
|
|
4139
4620
|
"$type": "color"
|
|
4140
4621
|
}
|
|
4622
|
+
},
|
|
4623
|
+
"org.primer.llm": {
|
|
4624
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4625
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4141
4626
|
}
|
|
4142
4627
|
},
|
|
4143
4628
|
"alpha": 1,
|
|
@@ -4146,6 +4631,7 @@
|
|
|
4146
4631
|
"original": {
|
|
4147
4632
|
"$value": "{borderColor.default}",
|
|
4148
4633
|
"$type": "color",
|
|
4634
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4149
4635
|
"$extensions": {
|
|
4150
4636
|
"org.primer.figma": {
|
|
4151
4637
|
"collection": "mode",
|
|
@@ -4212,6 +4698,10 @@
|
|
|
4212
4698
|
"isSource": true,
|
|
4213
4699
|
"$type": "color"
|
|
4214
4700
|
}
|
|
4701
|
+
},
|
|
4702
|
+
"org.primer.llm": {
|
|
4703
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4704
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4215
4705
|
}
|
|
4216
4706
|
},
|
|
4217
4707
|
"alpha": 1,
|
|
@@ -4225,6 +4715,7 @@
|
|
|
4225
4715
|
"key": "{borderColor.neutral.emphasis}",
|
|
4226
4716
|
"$value": "#b7bdc8",
|
|
4227
4717
|
"$type": "color",
|
|
4718
|
+
"$description": "Strong neutral semantic border",
|
|
4228
4719
|
"$extensions": {
|
|
4229
4720
|
"org.primer.figma": {
|
|
4230
4721
|
"collection": "mode",
|
|
@@ -4233,6 +4724,10 @@
|
|
|
4233
4724
|
},
|
|
4234
4725
|
"org.primer.overrides": {
|
|
4235
4726
|
"dark": "#b7bdc8"
|
|
4727
|
+
},
|
|
4728
|
+
"org.primer.llm": {
|
|
4729
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4730
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4236
4731
|
}
|
|
4237
4732
|
},
|
|
4238
4733
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4240,6 +4735,7 @@
|
|
|
4240
4735
|
"original": {
|
|
4241
4736
|
"$value": "{borderColor.emphasis}",
|
|
4242
4737
|
"$type": "color",
|
|
4738
|
+
"$description": "Strong neutral semantic border",
|
|
4243
4739
|
"$extensions": {
|
|
4244
4740
|
"org.primer.figma": {
|
|
4245
4741
|
"collection": "mode",
|
|
@@ -4248,6 +4744,10 @@
|
|
|
4248
4744
|
},
|
|
4249
4745
|
"org.primer.overrides": {
|
|
4250
4746
|
"dark": "{borderColor.emphasis}"
|
|
4747
|
+
},
|
|
4748
|
+
"org.primer.llm": {
|
|
4749
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4750
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4251
4751
|
}
|
|
4252
4752
|
},
|
|
4253
4753
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4260,6 +4760,7 @@
|
|
|
4260
4760
|
"key": "{borderColor.neutral.muted}",
|
|
4261
4761
|
"$value": "#b7bdc8",
|
|
4262
4762
|
"$type": "color",
|
|
4763
|
+
"$description": "Subtle neutral semantic border",
|
|
4263
4764
|
"$extensions": {
|
|
4264
4765
|
"org.primer.figma": {
|
|
4265
4766
|
"collection": "mode",
|
|
@@ -4281,6 +4782,10 @@
|
|
|
4281
4782
|
"isSource": true,
|
|
4282
4783
|
"$type": "color"
|
|
4283
4784
|
}
|
|
4785
|
+
},
|
|
4786
|
+
"org.primer.llm": {
|
|
4787
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4788
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4284
4789
|
}
|
|
4285
4790
|
},
|
|
4286
4791
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4288,6 +4793,7 @@
|
|
|
4288
4793
|
"original": {
|
|
4289
4794
|
"$value": "{borderColor.muted}",
|
|
4290
4795
|
"$type": "color",
|
|
4796
|
+
"$description": "Subtle neutral semantic border",
|
|
4291
4797
|
"$extensions": {
|
|
4292
4798
|
"org.primer.figma": {
|
|
4293
4799
|
"collection": "mode",
|
|
@@ -4309,6 +4815,10 @@
|
|
|
4309
4815
|
"isSource": true,
|
|
4310
4816
|
"$type": "color"
|
|
4311
4817
|
}
|
|
4818
|
+
},
|
|
4819
|
+
"org.primer.llm": {
|
|
4820
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4821
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4312
4822
|
}
|
|
4313
4823
|
},
|
|
4314
4824
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4321,6 +4831,7 @@
|
|
|
4321
4831
|
"key": "{borderColor.open.emphasis}",
|
|
4322
4832
|
"$value": "#ff6a69",
|
|
4323
4833
|
"$type": "color",
|
|
4834
|
+
"$description": "Strong border for open state badges",
|
|
4324
4835
|
"$extensions": {
|
|
4325
4836
|
"org.primer.figma": {
|
|
4326
4837
|
"collection": "mode",
|
|
@@ -4339,6 +4850,10 @@
|
|
|
4339
4850
|
"dark-protanopia-deuteranopia-high-contrast": "#e7811d",
|
|
4340
4851
|
"light-protanopia-deuteranopia": "#e7811d",
|
|
4341
4852
|
"light-protanopia-deuteranopia-high-contrast": "#e7811d"
|
|
4853
|
+
},
|
|
4854
|
+
"org.primer.llm": {
|
|
4855
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4856
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4342
4857
|
}
|
|
4343
4858
|
},
|
|
4344
4859
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4346,6 +4861,7 @@
|
|
|
4346
4861
|
"original": {
|
|
4347
4862
|
"$value": "{base.color.red.5}",
|
|
4348
4863
|
"$type": "color",
|
|
4864
|
+
"$description": "Strong border for open state badges",
|
|
4349
4865
|
"$extensions": {
|
|
4350
4866
|
"org.primer.figma": {
|
|
4351
4867
|
"collection": "mode",
|
|
@@ -4364,6 +4880,10 @@
|
|
|
4364
4880
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4365
4881
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4366
4882
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4883
|
+
},
|
|
4884
|
+
"org.primer.llm": {
|
|
4885
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4886
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4367
4887
|
}
|
|
4368
4888
|
},
|
|
4369
4889
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4376,6 +4896,7 @@
|
|
|
4376
4896
|
"key": "{borderColor.open.muted}",
|
|
4377
4897
|
"$value": "#ff8080",
|
|
4378
4898
|
"$type": "color",
|
|
4899
|
+
"$description": "Subtle border for open state indicators",
|
|
4379
4900
|
"$extensions": {
|
|
4380
4901
|
"org.primer.figma": {
|
|
4381
4902
|
"collection": "mode",
|
|
@@ -4442,6 +4963,10 @@
|
|
|
4442
4963
|
"isSource": true,
|
|
4443
4964
|
"$type": "color"
|
|
4444
4965
|
}
|
|
4966
|
+
},
|
|
4967
|
+
"org.primer.llm": {
|
|
4968
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4969
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4445
4970
|
}
|
|
4446
4971
|
},
|
|
4447
4972
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4450,6 +4975,7 @@
|
|
|
4450
4975
|
"original": {
|
|
4451
4976
|
"$value": "{base.color.red.4}",
|
|
4452
4977
|
"$type": "color",
|
|
4978
|
+
"$description": "Subtle border for open state indicators",
|
|
4453
4979
|
"$extensions": {
|
|
4454
4980
|
"org.primer.figma": {
|
|
4455
4981
|
"collection": "mode",
|
|
@@ -4516,6 +5042,10 @@
|
|
|
4516
5042
|
"isSource": true,
|
|
4517
5043
|
"$type": "color"
|
|
4518
5044
|
}
|
|
5045
|
+
},
|
|
5046
|
+
"org.primer.llm": {
|
|
5047
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5048
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4519
5049
|
}
|
|
4520
5050
|
},
|
|
4521
5051
|
"alpha": 1,
|
|
@@ -4529,6 +5059,7 @@
|
|
|
4529
5059
|
"key": "{borderColor.severe.emphasis}",
|
|
4530
5060
|
"$value": "#e7811d",
|
|
4531
5061
|
"$type": "color",
|
|
5062
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4532
5063
|
"$extensions": {
|
|
4533
5064
|
"org.primer.figma": {
|
|
4534
5065
|
"collection": "mode",
|
|
@@ -4543,6 +5074,10 @@
|
|
|
4543
5074
|
"light-tritanopia": "#ff6a69",
|
|
4544
5075
|
"light-tritanopia-high-contrast": "#ff6a69",
|
|
4545
5076
|
"dark-dimmed-high-contrast": "#ffb757"
|
|
5077
|
+
},
|
|
5078
|
+
"org.primer.llm": {
|
|
5079
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5080
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4546
5081
|
}
|
|
4547
5082
|
},
|
|
4548
5083
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4550,6 +5085,7 @@
|
|
|
4550
5085
|
"original": {
|
|
4551
5086
|
"$value": "{base.color.orange.5}",
|
|
4552
5087
|
"$type": "color",
|
|
5088
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4553
5089
|
"$extensions": {
|
|
4554
5090
|
"org.primer.figma": {
|
|
4555
5091
|
"collection": "mode",
|
|
@@ -4564,6 +5100,10 @@
|
|
|
4564
5100
|
"light-tritanopia": "{base.color.red.5}",
|
|
4565
5101
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4566
5102
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5103
|
+
},
|
|
5104
|
+
"org.primer.llm": {
|
|
5105
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5106
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4567
5107
|
}
|
|
4568
5108
|
},
|
|
4569
5109
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4576,6 +5116,7 @@
|
|
|
4576
5116
|
"key": "{borderColor.severe.muted}",
|
|
4577
5117
|
"$value": "#ff8080",
|
|
4578
5118
|
"$type": "color",
|
|
5119
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4579
5120
|
"$extensions": {
|
|
4580
5121
|
"org.primer.figma": {
|
|
4581
5122
|
"collection": "mode",
|
|
@@ -4631,6 +5172,10 @@
|
|
|
4631
5172
|
"isSource": true,
|
|
4632
5173
|
"$type": "color"
|
|
4633
5174
|
}
|
|
5175
|
+
},
|
|
5176
|
+
"org.primer.llm": {
|
|
5177
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5178
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4634
5179
|
}
|
|
4635
5180
|
},
|
|
4636
5181
|
"alpha": 1,
|
|
@@ -4639,6 +5184,7 @@
|
|
|
4639
5184
|
"original": {
|
|
4640
5185
|
"$value": "{base.color.red.4}",
|
|
4641
5186
|
"$type": "color",
|
|
5187
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4642
5188
|
"$extensions": {
|
|
4643
5189
|
"org.primer.figma": {
|
|
4644
5190
|
"collection": "mode",
|
|
@@ -4694,6 +5240,10 @@
|
|
|
4694
5240
|
"isSource": true,
|
|
4695
5241
|
"$type": "color"
|
|
4696
5242
|
}
|
|
5243
|
+
},
|
|
5244
|
+
"org.primer.llm": {
|
|
5245
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5246
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4697
5247
|
}
|
|
4698
5248
|
},
|
|
4699
5249
|
"alpha": 1,
|
|
@@ -4707,6 +5257,7 @@
|
|
|
4707
5257
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4708
5258
|
"$value": "#ef6eb1",
|
|
4709
5259
|
"$type": "color",
|
|
5260
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4710
5261
|
"$extensions": {
|
|
4711
5262
|
"org.primer.figma": {
|
|
4712
5263
|
"collection": "mode",
|
|
@@ -4718,6 +5269,10 @@
|
|
|
4718
5269
|
},
|
|
4719
5270
|
"org.primer.overrides": {
|
|
4720
5271
|
"dark-dimmed-high-contrast": "#ff8dc7"
|
|
5272
|
+
},
|
|
5273
|
+
"org.primer.llm": {
|
|
5274
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5275
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4721
5276
|
}
|
|
4722
5277
|
},
|
|
4723
5278
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4725,6 +5280,7 @@
|
|
|
4725
5280
|
"original": {
|
|
4726
5281
|
"$value": "{base.color.pink.5}",
|
|
4727
5282
|
"$type": "color",
|
|
5283
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4728
5284
|
"$extensions": {
|
|
4729
5285
|
"org.primer.figma": {
|
|
4730
5286
|
"collection": "mode",
|
|
@@ -4736,6 +5292,10 @@
|
|
|
4736
5292
|
},
|
|
4737
5293
|
"org.primer.overrides": {
|
|
4738
5294
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5295
|
+
},
|
|
5296
|
+
"org.primer.llm": {
|
|
5297
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5298
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4739
5299
|
}
|
|
4740
5300
|
},
|
|
4741
5301
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4748,6 +5308,7 @@
|
|
|
4748
5308
|
"key": "{borderColor.sponsors.muted}",
|
|
4749
5309
|
"$value": "#f87cbd",
|
|
4750
5310
|
"$type": "color",
|
|
5311
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4751
5312
|
"$extensions": {
|
|
4752
5313
|
"org.primer.figma": {
|
|
4753
5314
|
"collection": "mode",
|
|
@@ -4808,6 +5369,10 @@
|
|
|
4808
5369
|
"isSource": true,
|
|
4809
5370
|
"$type": "color"
|
|
4810
5371
|
}
|
|
5372
|
+
},
|
|
5373
|
+
"org.primer.llm": {
|
|
5374
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5375
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4811
5376
|
}
|
|
4812
5377
|
},
|
|
4813
5378
|
"alpha": 1,
|
|
@@ -4816,6 +5381,7 @@
|
|
|
4816
5381
|
"original": {
|
|
4817
5382
|
"$value": "{base.color.pink.4}",
|
|
4818
5383
|
"$type": "color",
|
|
5384
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4819
5385
|
"$extensions": {
|
|
4820
5386
|
"org.primer.figma": {
|
|
4821
5387
|
"collection": "mode",
|
|
@@ -4876,6 +5442,10 @@
|
|
|
4876
5442
|
"isSource": true,
|
|
4877
5443
|
"$type": "color"
|
|
4878
5444
|
}
|
|
5445
|
+
},
|
|
5446
|
+
"org.primer.llm": {
|
|
5447
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5448
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4879
5449
|
}
|
|
4880
5450
|
},
|
|
4881
5451
|
"alpha": 1,
|
|
@@ -4889,6 +5459,7 @@
|
|
|
4889
5459
|
"key": "{borderColor.success.emphasis}",
|
|
4890
5460
|
"$value": "#409eff",
|
|
4891
5461
|
"$type": "color",
|
|
5462
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4892
5463
|
"$extensions": {
|
|
4893
5464
|
"org.primer.figma": {
|
|
4894
5465
|
"collection": "mode",
|
|
@@ -4908,6 +5479,10 @@
|
|
|
4908
5479
|
"light-protanopia-deuteranopia": "#409eff",
|
|
4909
5480
|
"light-protanopia-deuteranopia-high-contrast": "#409eff",
|
|
4910
5481
|
"dark-dimmed-high-contrast": "#4ae168"
|
|
5482
|
+
},
|
|
5483
|
+
"org.primer.llm": {
|
|
5484
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5485
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4911
5486
|
}
|
|
4912
5487
|
},
|
|
4913
5488
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4915,6 +5490,7 @@
|
|
|
4915
5490
|
"original": {
|
|
4916
5491
|
"$value": "{base.color.blue.5}",
|
|
4917
5492
|
"$type": "color",
|
|
5493
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4918
5494
|
"$extensions": {
|
|
4919
5495
|
"org.primer.figma": {
|
|
4920
5496
|
"collection": "mode",
|
|
@@ -4934,6 +5510,10 @@
|
|
|
4934
5510
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4935
5511
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4936
5512
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5513
|
+
},
|
|
5514
|
+
"org.primer.llm": {
|
|
5515
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5516
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4937
5517
|
}
|
|
4938
5518
|
},
|
|
4939
5519
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4946,6 +5526,7 @@
|
|
|
4946
5526
|
"key": "{borderColor.success.muted}",
|
|
4947
5527
|
"$value": "#5cacff",
|
|
4948
5528
|
"$type": "color",
|
|
5529
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4949
5530
|
"$extensions": {
|
|
4950
5531
|
"org.primer.figma": {
|
|
4951
5532
|
"collection": "mode",
|
|
@@ -5033,6 +5614,10 @@
|
|
|
5033
5614
|
"isSource": true,
|
|
5034
5615
|
"$type": "color"
|
|
5035
5616
|
}
|
|
5617
|
+
},
|
|
5618
|
+
"org.primer.llm": {
|
|
5619
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5620
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5036
5621
|
}
|
|
5037
5622
|
},
|
|
5038
5623
|
"alpha": 1,
|
|
@@ -5041,6 +5626,7 @@
|
|
|
5041
5626
|
"original": {
|
|
5042
5627
|
"$value": "{base.color.blue.4}",
|
|
5043
5628
|
"$type": "color",
|
|
5629
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5044
5630
|
"$extensions": {
|
|
5045
5631
|
"org.primer.figma": {
|
|
5046
5632
|
"collection": "mode",
|
|
@@ -5128,6 +5714,10 @@
|
|
|
5128
5714
|
"isSource": true,
|
|
5129
5715
|
"$type": "color"
|
|
5130
5716
|
}
|
|
5717
|
+
},
|
|
5718
|
+
"org.primer.llm": {
|
|
5719
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5720
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5131
5721
|
}
|
|
5132
5722
|
},
|
|
5133
5723
|
"alpha": 1,
|
|
@@ -5141,6 +5731,7 @@
|
|
|
5141
5731
|
"key": "{borderColor.translucent}",
|
|
5142
5732
|
"$value": "#9198a1",
|
|
5143
5733
|
"$type": "color",
|
|
5734
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5144
5735
|
"$extensions": {
|
|
5145
5736
|
"org.primer.figma": {
|
|
5146
5737
|
"collection": "mode",
|
|
@@ -5197,6 +5788,10 @@
|
|
|
5197
5788
|
"isSource": true,
|
|
5198
5789
|
"$type": "color"
|
|
5199
5790
|
}
|
|
5791
|
+
},
|
|
5792
|
+
"org.primer.llm": {
|
|
5793
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5794
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5200
5795
|
}
|
|
5201
5796
|
},
|
|
5202
5797
|
"alpha": 1,
|
|
@@ -5205,6 +5800,7 @@
|
|
|
5205
5800
|
"original": {
|
|
5206
5801
|
"$value": "{base.color.neutral.9}",
|
|
5207
5802
|
"$type": "color",
|
|
5803
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5208
5804
|
"$extensions": {
|
|
5209
5805
|
"org.primer.figma": {
|
|
5210
5806
|
"collection": "mode",
|
|
@@ -5261,6 +5857,10 @@
|
|
|
5261
5857
|
"isSource": true,
|
|
5262
5858
|
"$type": "color"
|
|
5263
5859
|
}
|
|
5860
|
+
},
|
|
5861
|
+
"org.primer.llm": {
|
|
5862
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5863
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5264
5864
|
}
|
|
5265
5865
|
},
|
|
5266
5866
|
"alpha": 1,
|
|
@@ -5274,6 +5874,7 @@
|
|
|
5274
5874
|
"key": "{borderColor.transparent}",
|
|
5275
5875
|
"$value": "#00000000",
|
|
5276
5876
|
"$type": "color",
|
|
5877
|
+
"$description": "Fully transparent border",
|
|
5277
5878
|
"$extensions": {
|
|
5278
5879
|
"org.primer.figma": {
|
|
5279
5880
|
"collection": "mode",
|
|
@@ -5286,6 +5887,7 @@
|
|
|
5286
5887
|
"original": {
|
|
5287
5888
|
"$value": "{base.color.transparent}",
|
|
5288
5889
|
"$type": "color",
|
|
5890
|
+
"$description": "Fully transparent border",
|
|
5289
5891
|
"$extensions": {
|
|
5290
5892
|
"org.primer.figma": {
|
|
5291
5893
|
"collection": "mode",
|
|
@@ -5303,6 +5905,7 @@
|
|
|
5303
5905
|
"key": "{borderColor.upsell.emphasis}",
|
|
5304
5906
|
"$value": "#b87fff",
|
|
5305
5907
|
"$type": "color",
|
|
5908
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5306
5909
|
"$extensions": {
|
|
5307
5910
|
"org.primer.figma": {
|
|
5308
5911
|
"collection": "mode",
|
|
@@ -5311,6 +5914,10 @@
|
|
|
5311
5914
|
"codeSyntax": {
|
|
5312
5915
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5313
5916
|
}
|
|
5917
|
+
},
|
|
5918
|
+
"org.primer.llm": {
|
|
5919
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5920
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5314
5921
|
}
|
|
5315
5922
|
},
|
|
5316
5923
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5318,6 +5925,7 @@
|
|
|
5318
5925
|
"original": {
|
|
5319
5926
|
"$value": "{borderColor.done.emphasis}",
|
|
5320
5927
|
"$type": "color",
|
|
5928
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5321
5929
|
"$extensions": {
|
|
5322
5930
|
"org.primer.figma": {
|
|
5323
5931
|
"collection": "mode",
|
|
@@ -5326,6 +5934,10 @@
|
|
|
5326
5934
|
"codeSyntax": {
|
|
5327
5935
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5328
5936
|
}
|
|
5937
|
+
},
|
|
5938
|
+
"org.primer.llm": {
|
|
5939
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5940
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5329
5941
|
}
|
|
5330
5942
|
},
|
|
5331
5943
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5338,6 +5950,7 @@
|
|
|
5338
5950
|
"key": "{borderColor.upsell.muted}",
|
|
5339
5951
|
"$value": "#bf8fff",
|
|
5340
5952
|
"$type": "color",
|
|
5953
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5341
5954
|
"$extensions": {
|
|
5342
5955
|
"org.primer.figma": {
|
|
5343
5956
|
"collection": "mode",
|
|
@@ -5346,6 +5959,10 @@
|
|
|
5346
5959
|
"codeSyntax": {
|
|
5347
5960
|
"web": "var(--borderColor-upsell-muted)"
|
|
5348
5961
|
}
|
|
5962
|
+
},
|
|
5963
|
+
"org.primer.llm": {
|
|
5964
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5965
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5349
5966
|
}
|
|
5350
5967
|
},
|
|
5351
5968
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5353,6 +5970,7 @@
|
|
|
5353
5970
|
"original": {
|
|
5354
5971
|
"$value": "{borderColor.done.muted}",
|
|
5355
5972
|
"$type": "color",
|
|
5973
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5356
5974
|
"$extensions": {
|
|
5357
5975
|
"org.primer.figma": {
|
|
5358
5976
|
"collection": "mode",
|
|
@@ -5361,6 +5979,10 @@
|
|
|
5361
5979
|
"codeSyntax": {
|
|
5362
5980
|
"web": "var(--borderColor-upsell-muted)"
|
|
5363
5981
|
}
|
|
5982
|
+
},
|
|
5983
|
+
"org.primer.llm": {
|
|
5984
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5985
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5364
5986
|
}
|
|
5365
5987
|
},
|
|
5366
5988
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36511,6 +37133,7 @@
|
|
|
36511
37133
|
"key": "{fgColor.accent}",
|
|
36512
37134
|
"$value": "#74b9ff",
|
|
36513
37135
|
"$type": "color",
|
|
37136
|
+
"$description": "Accent text for links and interactive elements",
|
|
36514
37137
|
"$extensions": {
|
|
36515
37138
|
"org.primer.figma": {
|
|
36516
37139
|
"collection": "mode",
|
|
@@ -36530,6 +37153,10 @@
|
|
|
36530
37153
|
"light-high-contrast": "#318bf8",
|
|
36531
37154
|
"light-tritanopia-high-contrast": "#318bf8",
|
|
36532
37155
|
"light-protanopia-deuteranopia-high-contrast": "#318bf8"
|
|
37156
|
+
},
|
|
37157
|
+
"org.primer.llm": {
|
|
37158
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37159
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36533
37160
|
}
|
|
36534
37161
|
},
|
|
36535
37162
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36537,6 +37164,7 @@
|
|
|
36537
37164
|
"original": {
|
|
36538
37165
|
"$value": "#74B9FF",
|
|
36539
37166
|
"$type": "color",
|
|
37167
|
+
"$description": "Accent text for links and interactive elements",
|
|
36540
37168
|
"$extensions": {
|
|
36541
37169
|
"org.primer.figma": {
|
|
36542
37170
|
"collection": "mode",
|
|
@@ -36556,6 +37184,10 @@
|
|
|
36556
37184
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36557
37185
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36558
37186
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37187
|
+
},
|
|
37188
|
+
"org.primer.llm": {
|
|
37189
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37190
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36559
37191
|
}
|
|
36560
37192
|
},
|
|
36561
37193
|
"key": "{fgColor.accent}"
|
|
@@ -36568,6 +37200,7 @@
|
|
|
36568
37200
|
"key": "{fgColor.attention}",
|
|
36569
37201
|
"$value": "#f0b72f",
|
|
36570
37202
|
"$type": "color",
|
|
37203
|
+
"$description": "Attention text for warnings and caution states",
|
|
36571
37204
|
"$extensions": {
|
|
36572
37205
|
"org.primer.figma": {
|
|
36573
37206
|
"collection": "mode",
|
|
@@ -36583,6 +37216,10 @@
|
|
|
36583
37216
|
"light-protanopia-deuteranopia-high-contrast": "#c88508",
|
|
36584
37217
|
"light-tritanopia-high-contrast": "#c88508",
|
|
36585
37218
|
"dark-dimmed-high-contrast": "#fbd669"
|
|
37219
|
+
},
|
|
37220
|
+
"org.primer.llm": {
|
|
37221
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37222
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36586
37223
|
}
|
|
36587
37224
|
},
|
|
36588
37225
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36590,6 +37227,7 @@
|
|
|
36590
37227
|
"original": {
|
|
36591
37228
|
"$value": "{base.color.yellow.3}",
|
|
36592
37229
|
"$type": "color",
|
|
37230
|
+
"$description": "Attention text for warnings and caution states",
|
|
36593
37231
|
"$extensions": {
|
|
36594
37232
|
"org.primer.figma": {
|
|
36595
37233
|
"collection": "mode",
|
|
@@ -36605,6 +37243,10 @@
|
|
|
36605
37243
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36606
37244
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36607
37245
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37246
|
+
},
|
|
37247
|
+
"org.primer.llm": {
|
|
37248
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37249
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36608
37250
|
}
|
|
36609
37251
|
},
|
|
36610
37252
|
"key": "{fgColor.attention}"
|
|
@@ -36617,6 +37259,7 @@
|
|
|
36617
37259
|
"key": "{fgColor.black}",
|
|
36618
37260
|
"$value": "#010409",
|
|
36619
37261
|
"$type": "color",
|
|
37262
|
+
"$description": "Pure black text",
|
|
36620
37263
|
"$extensions": {
|
|
36621
37264
|
"org.primer.figma": {
|
|
36622
37265
|
"collection": "mode",
|
|
@@ -36625,6 +37268,10 @@
|
|
|
36625
37268
|
},
|
|
36626
37269
|
"org.primer.overrides": {
|
|
36627
37270
|
"dark": "#010409"
|
|
37271
|
+
},
|
|
37272
|
+
"org.primer.llm": {
|
|
37273
|
+
"doNotUse": true,
|
|
37274
|
+
"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."
|
|
36628
37275
|
}
|
|
36629
37276
|
},
|
|
36630
37277
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36632,6 +37279,7 @@
|
|
|
36632
37279
|
"original": {
|
|
36633
37280
|
"$value": "{base.color.neutral.0}",
|
|
36634
37281
|
"$type": "color",
|
|
37282
|
+
"$description": "Pure black text",
|
|
36635
37283
|
"$extensions": {
|
|
36636
37284
|
"org.primer.figma": {
|
|
36637
37285
|
"collection": "mode",
|
|
@@ -36640,6 +37288,10 @@
|
|
|
36640
37288
|
},
|
|
36641
37289
|
"org.primer.overrides": {
|
|
36642
37290
|
"dark": "{base.color.neutral.0}"
|
|
37291
|
+
},
|
|
37292
|
+
"org.primer.llm": {
|
|
37293
|
+
"doNotUse": true,
|
|
37294
|
+
"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."
|
|
36643
37295
|
}
|
|
36644
37296
|
},
|
|
36645
37297
|
"key": "{fgColor.black}"
|
|
@@ -36652,6 +37304,7 @@
|
|
|
36652
37304
|
"key": "{fgColor.closed}",
|
|
36653
37305
|
"$value": "#b7bdc8",
|
|
36654
37306
|
"$type": "color",
|
|
37307
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36655
37308
|
"$extensions": {
|
|
36656
37309
|
"org.primer.figma": {
|
|
36657
37310
|
"collection": "mode",
|
|
@@ -36670,6 +37323,10 @@
|
|
|
36670
37323
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
36671
37324
|
"light-tritanopia": "#b7bdc8",
|
|
36672
37325
|
"light-tritanopia-high-contrast": "#b7bdc8"
|
|
37326
|
+
},
|
|
37327
|
+
"org.primer.llm": {
|
|
37328
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37329
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36673
37330
|
}
|
|
36674
37331
|
},
|
|
36675
37332
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36677,6 +37334,7 @@
|
|
|
36677
37334
|
"original": {
|
|
36678
37335
|
"$value": "{fgColor.muted}",
|
|
36679
37336
|
"$type": "color",
|
|
37337
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36680
37338
|
"$extensions": {
|
|
36681
37339
|
"org.primer.figma": {
|
|
36682
37340
|
"collection": "mode",
|
|
@@ -36695,6 +37353,10 @@
|
|
|
36695
37353
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36696
37354
|
"light-tritanopia": "{fgColor.muted}",
|
|
36697
37355
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37356
|
+
},
|
|
37357
|
+
"org.primer.llm": {
|
|
37358
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37359
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36698
37360
|
}
|
|
36699
37361
|
},
|
|
36700
37362
|
"key": "{fgColor.closed}"
|
|
@@ -36707,6 +37369,7 @@
|
|
|
36707
37369
|
"key": "{fgColor.danger}",
|
|
36708
37370
|
"$value": "#ff9492",
|
|
36709
37371
|
"$type": "color",
|
|
37372
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36710
37373
|
"$extensions": {
|
|
36711
37374
|
"org.primer.figma": {
|
|
36712
37375
|
"collection": "mode",
|
|
@@ -36727,6 +37390,10 @@
|
|
|
36727
37390
|
"dark-tritanopia-high-contrast": "#ff9492",
|
|
36728
37391
|
"light-high-contrast": "#ff4445",
|
|
36729
37392
|
"light-tritanopia-high-contrast": "#ff4445"
|
|
37393
|
+
},
|
|
37394
|
+
"org.primer.llm": {
|
|
37395
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37396
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36730
37397
|
}
|
|
36731
37398
|
},
|
|
36732
37399
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36734,6 +37401,7 @@
|
|
|
36734
37401
|
"original": {
|
|
36735
37402
|
"$value": "{base.color.red.3}",
|
|
36736
37403
|
"$type": "color",
|
|
37404
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36737
37405
|
"$extensions": {
|
|
36738
37406
|
"org.primer.figma": {
|
|
36739
37407
|
"collection": "mode",
|
|
@@ -36754,6 +37422,10 @@
|
|
|
36754
37422
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36755
37423
|
"light-high-contrast": "{base.color.red.6}",
|
|
36756
37424
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37425
|
+
},
|
|
37426
|
+
"org.primer.llm": {
|
|
37427
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37428
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36757
37429
|
}
|
|
36758
37430
|
},
|
|
36759
37431
|
"key": "{fgColor.danger}"
|
|
@@ -36766,6 +37438,7 @@
|
|
|
36766
37438
|
"key": "{fgColor.default}",
|
|
36767
37439
|
"$value": "#ffffff",
|
|
36768
37440
|
"$type": "color",
|
|
37441
|
+
"$description": "Default text color for primary content and headings",
|
|
36769
37442
|
"$extensions": {
|
|
36770
37443
|
"org.primer.figma": {
|
|
36771
37444
|
"collection": "mode",
|
|
@@ -36780,8 +37453,12 @@
|
|
|
36780
37453
|
"dark-high-contrast": "#ffffff",
|
|
36781
37454
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
36782
37455
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff",
|
|
36783
|
-
"dark-dimmed": "#
|
|
37456
|
+
"dark-dimmed": "#f0f6fc",
|
|
36784
37457
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37458
|
+
},
|
|
37459
|
+
"org.primer.llm": {
|
|
37460
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37461
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36785
37462
|
}
|
|
36786
37463
|
},
|
|
36787
37464
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36789,6 +37466,7 @@
|
|
|
36789
37466
|
"original": {
|
|
36790
37467
|
"$value": "{base.color.neutral.13}",
|
|
36791
37468
|
"$type": "color",
|
|
37469
|
+
"$description": "Default text color for primary content and headings",
|
|
36792
37470
|
"$extensions": {
|
|
36793
37471
|
"org.primer.figma": {
|
|
36794
37472
|
"collection": "mode",
|
|
@@ -36803,8 +37481,12 @@
|
|
|
36803
37481
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36804
37482
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36805
37483
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36806
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37484
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36807
37485
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37486
|
+
},
|
|
37487
|
+
"org.primer.llm": {
|
|
37488
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37489
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36808
37490
|
}
|
|
36809
37491
|
},
|
|
36810
37492
|
"key": "{fgColor.default}"
|
|
@@ -36817,6 +37499,7 @@
|
|
|
36817
37499
|
"key": "{fgColor.disabled}",
|
|
36818
37500
|
"$value": "#656c76",
|
|
36819
37501
|
"$type": "color",
|
|
37502
|
+
"$description": "Text color for disabled interactive elements",
|
|
36820
37503
|
"$extensions": {
|
|
36821
37504
|
"org.primer.figma": {
|
|
36822
37505
|
"collection": "mode",
|
|
@@ -36838,6 +37521,10 @@
|
|
|
36838
37521
|
"dark-high-contrast": "#656c76",
|
|
36839
37522
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36840
37523
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37524
|
+
},
|
|
37525
|
+
"org.primer.llm": {
|
|
37526
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37527
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36841
37528
|
}
|
|
36842
37529
|
},
|
|
36843
37530
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36845,6 +37532,7 @@
|
|
|
36845
37532
|
"original": {
|
|
36846
37533
|
"$value": "{base.color.neutral.8}",
|
|
36847
37534
|
"$type": "color",
|
|
37535
|
+
"$description": "Text color for disabled interactive elements",
|
|
36848
37536
|
"$extensions": {
|
|
36849
37537
|
"org.primer.figma": {
|
|
36850
37538
|
"collection": "mode",
|
|
@@ -36866,6 +37554,10 @@
|
|
|
36866
37554
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36867
37555
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36868
37556
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37557
|
+
},
|
|
37558
|
+
"org.primer.llm": {
|
|
37559
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37560
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36869
37561
|
}
|
|
36870
37562
|
},
|
|
36871
37563
|
"key": "{fgColor.disabled}"
|
|
@@ -36878,6 +37570,7 @@
|
|
|
36878
37570
|
"key": "{fgColor.done}",
|
|
36879
37571
|
"$value": "#d3abff",
|
|
36880
37572
|
"$type": "color",
|
|
37573
|
+
"$description": "Text color for completed/done state indicators",
|
|
36881
37574
|
"$extensions": {
|
|
36882
37575
|
"org.primer.figma": {
|
|
36883
37576
|
"collection": "mode",
|
|
@@ -36896,6 +37589,10 @@
|
|
|
36896
37589
|
"light-high-contrast": "#a66bff",
|
|
36897
37590
|
"light-protanopia-deuteranopia-high-contrast": "#a66bff",
|
|
36898
37591
|
"light-tritanopia-high-contrast": "#a66bff"
|
|
37592
|
+
},
|
|
37593
|
+
"org.primer.llm": {
|
|
37594
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37595
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36899
37596
|
}
|
|
36900
37597
|
},
|
|
36901
37598
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36903,6 +37600,7 @@
|
|
|
36903
37600
|
"original": {
|
|
36904
37601
|
"$value": "#D3ABFF",
|
|
36905
37602
|
"$type": "color",
|
|
37603
|
+
"$description": "Text color for completed/done state indicators",
|
|
36906
37604
|
"$extensions": {
|
|
36907
37605
|
"org.primer.figma": {
|
|
36908
37606
|
"collection": "mode",
|
|
@@ -36921,6 +37619,10 @@
|
|
|
36921
37619
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36922
37620
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36923
37621
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37622
|
+
},
|
|
37623
|
+
"org.primer.llm": {
|
|
37624
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37625
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36924
37626
|
}
|
|
36925
37627
|
},
|
|
36926
37628
|
"key": "{fgColor.done}"
|
|
@@ -36933,6 +37635,7 @@
|
|
|
36933
37635
|
"key": "{fgColor.draft}",
|
|
36934
37636
|
"$value": "#d1d7e0",
|
|
36935
37637
|
"$type": "color",
|
|
37638
|
+
"$description": "Text color for draft state indicators",
|
|
36936
37639
|
"$extensions": {
|
|
36937
37640
|
"org.primer.figma": {
|
|
36938
37641
|
"collection": "mode",
|
|
@@ -36941,6 +37644,10 @@
|
|
|
36941
37644
|
"codeSyntax": {
|
|
36942
37645
|
"web": "var(--fgColor-draft)"
|
|
36943
37646
|
}
|
|
37647
|
+
},
|
|
37648
|
+
"org.primer.llm": {
|
|
37649
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37650
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36944
37651
|
}
|
|
36945
37652
|
},
|
|
36946
37653
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36948,6 +37655,7 @@
|
|
|
36948
37655
|
"original": {
|
|
36949
37656
|
"$value": "{fgColor.neutral}",
|
|
36950
37657
|
"$type": "color",
|
|
37658
|
+
"$description": "Text color for draft state indicators",
|
|
36951
37659
|
"$extensions": {
|
|
36952
37660
|
"org.primer.figma": {
|
|
36953
37661
|
"collection": "mode",
|
|
@@ -36956,6 +37664,10 @@
|
|
|
36956
37664
|
"codeSyntax": {
|
|
36957
37665
|
"web": "var(--fgColor-draft)"
|
|
36958
37666
|
}
|
|
37667
|
+
},
|
|
37668
|
+
"org.primer.llm": {
|
|
37669
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37670
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36959
37671
|
}
|
|
36960
37672
|
},
|
|
36961
37673
|
"key": "{fgColor.draft}"
|
|
@@ -36968,6 +37680,7 @@
|
|
|
36968
37680
|
"key": "{fgColor.link}",
|
|
36969
37681
|
"$value": "#74b9ff",
|
|
36970
37682
|
"$type": "color",
|
|
37683
|
+
"$description": "Text color for hyperlinks",
|
|
36971
37684
|
"$extensions": {
|
|
36972
37685
|
"org.primer.figma": {
|
|
36973
37686
|
"collection": "mode",
|
|
@@ -36976,6 +37689,10 @@
|
|
|
36976
37689
|
"codeSyntax": {
|
|
36977
37690
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36978
37691
|
}
|
|
37692
|
+
},
|
|
37693
|
+
"org.primer.llm": {
|
|
37694
|
+
"usage": ["link-text", "hyperlink"],
|
|
37695
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36979
37696
|
}
|
|
36980
37697
|
},
|
|
36981
37698
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36983,6 +37700,7 @@
|
|
|
36983
37700
|
"original": {
|
|
36984
37701
|
"$value": "{fgColor.accent}",
|
|
36985
37702
|
"$type": "color",
|
|
37703
|
+
"$description": "Text color for hyperlinks",
|
|
36986
37704
|
"$extensions": {
|
|
36987
37705
|
"org.primer.figma": {
|
|
36988
37706
|
"collection": "mode",
|
|
@@ -36991,6 +37709,10 @@
|
|
|
36991
37709
|
"codeSyntax": {
|
|
36992
37710
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36993
37711
|
}
|
|
37712
|
+
},
|
|
37713
|
+
"org.primer.llm": {
|
|
37714
|
+
"usage": ["link-text", "hyperlink"],
|
|
37715
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36994
37716
|
}
|
|
36995
37717
|
},
|
|
36996
37718
|
"key": "{fgColor.link}"
|
|
@@ -37003,6 +37725,7 @@
|
|
|
37003
37725
|
"key": "{fgColor.muted}",
|
|
37004
37726
|
"$value": "#b7bdc8",
|
|
37005
37727
|
"$type": "color",
|
|
37728
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37006
37729
|
"$extensions": {
|
|
37007
37730
|
"org.primer.figma": {
|
|
37008
37731
|
"collection": "mode",
|
|
@@ -37020,6 +37743,10 @@
|
|
|
37020
37743
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37021
37744
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37022
37745
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37746
|
+
},
|
|
37747
|
+
"org.primer.llm": {
|
|
37748
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37749
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37023
37750
|
}
|
|
37024
37751
|
},
|
|
37025
37752
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37027,6 +37754,7 @@
|
|
|
37027
37754
|
"original": {
|
|
37028
37755
|
"$value": "{base.color.neutral.10}",
|
|
37029
37756
|
"$type": "color",
|
|
37757
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37030
37758
|
"$extensions": {
|
|
37031
37759
|
"org.primer.figma": {
|
|
37032
37760
|
"collection": "mode",
|
|
@@ -37044,6 +37772,10 @@
|
|
|
37044
37772
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37045
37773
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37046
37774
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37775
|
+
},
|
|
37776
|
+
"org.primer.llm": {
|
|
37777
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37778
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37047
37779
|
}
|
|
37048
37780
|
},
|
|
37049
37781
|
"key": "{fgColor.muted}"
|
|
@@ -37056,6 +37788,7 @@
|
|
|
37056
37788
|
"key": "{fgColor.neutral}",
|
|
37057
37789
|
"$value": "#d1d7e0",
|
|
37058
37790
|
"$type": "color",
|
|
37791
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37059
37792
|
"$extensions": {
|
|
37060
37793
|
"org.primer.figma": {
|
|
37061
37794
|
"collection": "mode",
|
|
@@ -37070,6 +37803,10 @@
|
|
|
37070
37803
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37071
37804
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37072
37805
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37806
|
+
},
|
|
37807
|
+
"org.primer.llm": {
|
|
37808
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37809
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37073
37810
|
}
|
|
37074
37811
|
},
|
|
37075
37812
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37077,6 +37814,7 @@
|
|
|
37077
37814
|
"original": {
|
|
37078
37815
|
"$value": "{base.color.neutral.11}",
|
|
37079
37816
|
"$type": "color",
|
|
37817
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37080
37818
|
"$extensions": {
|
|
37081
37819
|
"org.primer.figma": {
|
|
37082
37820
|
"collection": "mode",
|
|
@@ -37091,6 +37829,10 @@
|
|
|
37091
37829
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37092
37830
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37093
37831
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37832
|
+
},
|
|
37833
|
+
"org.primer.llm": {
|
|
37834
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37835
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37094
37836
|
}
|
|
37095
37837
|
},
|
|
37096
37838
|
"key": "{fgColor.neutral}"
|
|
@@ -37103,6 +37845,7 @@
|
|
|
37103
37845
|
"key": "{fgColor.onEmphasis}",
|
|
37104
37846
|
"$value": "#ffffff",
|
|
37105
37847
|
"$type": "color",
|
|
37848
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37106
37849
|
"$extensions": {
|
|
37107
37850
|
"org.primer.figma": {
|
|
37108
37851
|
"collection": "mode",
|
|
@@ -37116,6 +37859,10 @@
|
|
|
37116
37859
|
"dark": "#ffffff",
|
|
37117
37860
|
"dark-dimmed": "#f0f6fc",
|
|
37118
37861
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37862
|
+
},
|
|
37863
|
+
"org.primer.llm": {
|
|
37864
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37865
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37119
37866
|
}
|
|
37120
37867
|
},
|
|
37121
37868
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37123,6 +37870,7 @@
|
|
|
37123
37870
|
"original": {
|
|
37124
37871
|
"$value": "{base.color.neutral.13}",
|
|
37125
37872
|
"$type": "color",
|
|
37873
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37126
37874
|
"$extensions": {
|
|
37127
37875
|
"org.primer.figma": {
|
|
37128
37876
|
"collection": "mode",
|
|
@@ -37136,6 +37884,10 @@
|
|
|
37136
37884
|
"dark": "{base.color.neutral.13}",
|
|
37137
37885
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37138
37886
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37887
|
+
},
|
|
37888
|
+
"org.primer.llm": {
|
|
37889
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37890
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37139
37891
|
}
|
|
37140
37892
|
},
|
|
37141
37893
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37148,11 +37900,16 @@
|
|
|
37148
37900
|
"key": "{fgColor.onInverse}",
|
|
37149
37901
|
"$value": "#010409",
|
|
37150
37902
|
"$type": "color",
|
|
37903
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37151
37904
|
"$extensions": {
|
|
37152
37905
|
"org.primer.figma": {
|
|
37153
37906
|
"collection": "mode",
|
|
37154
37907
|
"group": "semantic",
|
|
37155
37908
|
"scopes": ["fgColor"]
|
|
37909
|
+
},
|
|
37910
|
+
"org.primer.llm": {
|
|
37911
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37912
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37156
37913
|
}
|
|
37157
37914
|
},
|
|
37158
37915
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37160,11 +37917,16 @@
|
|
|
37160
37917
|
"original": {
|
|
37161
37918
|
"$value": "{base.color.neutral.0}",
|
|
37162
37919
|
"$type": "color",
|
|
37920
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37163
37921
|
"$extensions": {
|
|
37164
37922
|
"org.primer.figma": {
|
|
37165
37923
|
"collection": "mode",
|
|
37166
37924
|
"group": "semantic",
|
|
37167
37925
|
"scopes": ["fgColor"]
|
|
37926
|
+
},
|
|
37927
|
+
"org.primer.llm": {
|
|
37928
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37929
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37168
37930
|
}
|
|
37169
37931
|
},
|
|
37170
37932
|
"key": "{fgColor.onInverse}"
|
|
@@ -37177,6 +37939,7 @@
|
|
|
37177
37939
|
"key": "{fgColor.open}",
|
|
37178
37940
|
"$value": "#ffb1af",
|
|
37179
37941
|
"$type": "color",
|
|
37942
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37180
37943
|
"$extensions": {
|
|
37181
37944
|
"org.primer.figma": {
|
|
37182
37945
|
"collection": "mode",
|
|
@@ -37195,6 +37958,10 @@
|
|
|
37195
37958
|
"dark-tritanopia-high-contrast": "#ffb1af",
|
|
37196
37959
|
"light-tritanopia": "#ff6a69",
|
|
37197
37960
|
"light-tritanopia-high-contrast": "#ff4445"
|
|
37961
|
+
},
|
|
37962
|
+
"org.primer.llm": {
|
|
37963
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37964
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37198
37965
|
}
|
|
37199
37966
|
},
|
|
37200
37967
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37202,6 +37969,7 @@
|
|
|
37202
37969
|
"original": {
|
|
37203
37970
|
"$value": "{base.color.red.2}",
|
|
37204
37971
|
"$type": "color",
|
|
37972
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37205
37973
|
"$extensions": {
|
|
37206
37974
|
"org.primer.figma": {
|
|
37207
37975
|
"collection": "mode",
|
|
@@ -37220,6 +37988,10 @@
|
|
|
37220
37988
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37221
37989
|
"light-tritanopia": "{base.color.red.5}",
|
|
37222
37990
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37991
|
+
},
|
|
37992
|
+
"org.primer.llm": {
|
|
37993
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37994
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37223
37995
|
}
|
|
37224
37996
|
},
|
|
37225
37997
|
"key": "{fgColor.open}"
|
|
@@ -37232,6 +38004,7 @@
|
|
|
37232
38004
|
"key": "{fgColor.severe}",
|
|
37233
38005
|
"$value": "#ff9492",
|
|
37234
38006
|
"$type": "color",
|
|
38007
|
+
"$description": "Severe text for high-priority warnings",
|
|
37235
38008
|
"$extensions": {
|
|
37236
38009
|
"org.primer.figma": {
|
|
37237
38010
|
"collection": "mode",
|
|
@@ -37252,6 +38025,10 @@
|
|
|
37252
38025
|
"light-tritanopia": "#ff6a69",
|
|
37253
38026
|
"light-tritanopia-high-contrast": "#ff4445",
|
|
37254
38027
|
"light-protanopia-deuteranopia-high-contrast": "#d57014"
|
|
38028
|
+
},
|
|
38029
|
+
"org.primer.llm": {
|
|
38030
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38031
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37255
38032
|
}
|
|
37256
38033
|
},
|
|
37257
38034
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37259,6 +38036,7 @@
|
|
|
37259
38036
|
"original": {
|
|
37260
38037
|
"$value": "{base.color.red.3}",
|
|
37261
38038
|
"$type": "color",
|
|
38039
|
+
"$description": "Severe text for high-priority warnings",
|
|
37262
38040
|
"$extensions": {
|
|
37263
38041
|
"org.primer.figma": {
|
|
37264
38042
|
"collection": "mode",
|
|
@@ -37279,6 +38057,10 @@
|
|
|
37279
38057
|
"light-tritanopia": "{base.color.red.5}",
|
|
37280
38058
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37281
38059
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38060
|
+
},
|
|
38061
|
+
"org.primer.llm": {
|
|
38062
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38063
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37282
38064
|
}
|
|
37283
38065
|
},
|
|
37284
38066
|
"key": "{fgColor.severe}"
|
|
@@ -37291,6 +38073,7 @@
|
|
|
37291
38073
|
"key": "{fgColor.sponsors}",
|
|
37292
38074
|
"$value": "#ff90c8",
|
|
37293
38075
|
"$type": "color",
|
|
38076
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37294
38077
|
"$extensions": {
|
|
37295
38078
|
"org.primer.figma": {
|
|
37296
38079
|
"collection": "mode",
|
|
@@ -37309,6 +38092,10 @@
|
|
|
37309
38092
|
"light-high-contrast": "#e456a3",
|
|
37310
38093
|
"light-protanopia-deuteranopia-high-contrast": "#e456a3",
|
|
37311
38094
|
"light-tritanopia-high-contrast": "#e456a3"
|
|
38095
|
+
},
|
|
38096
|
+
"org.primer.llm": {
|
|
38097
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38098
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37312
38099
|
}
|
|
37313
38100
|
},
|
|
37314
38101
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37316,6 +38103,7 @@
|
|
|
37316
38103
|
"original": {
|
|
37317
38104
|
"$value": "#FF90C8",
|
|
37318
38105
|
"$type": "color",
|
|
38106
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37319
38107
|
"$extensions": {
|
|
37320
38108
|
"org.primer.figma": {
|
|
37321
38109
|
"collection": "mode",
|
|
@@ -37334,6 +38122,10 @@
|
|
|
37334
38122
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37335
38123
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37336
38124
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38125
|
+
},
|
|
38126
|
+
"org.primer.llm": {
|
|
38127
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38128
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37337
38129
|
}
|
|
37338
38130
|
},
|
|
37339
38131
|
"key": "{fgColor.sponsors}"
|
|
@@ -37346,6 +38138,7 @@
|
|
|
37346
38138
|
"key": "{fgColor.success}",
|
|
37347
38139
|
"$value": "#91cbff",
|
|
37348
38140
|
"$type": "color",
|
|
38141
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37349
38142
|
"$extensions": {
|
|
37350
38143
|
"org.primer.figma": {
|
|
37351
38144
|
"collection": "mode",
|
|
@@ -37368,6 +38161,10 @@
|
|
|
37368
38161
|
"dark-tritanopia-high-contrast": "#91cbff",
|
|
37369
38162
|
"light-tritanopia": "#409eff",
|
|
37370
38163
|
"light-tritanopia-high-contrast": "#318bf8"
|
|
38164
|
+
},
|
|
38165
|
+
"org.primer.llm": {
|
|
38166
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38167
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37371
38168
|
}
|
|
37372
38169
|
},
|
|
37373
38170
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37375,6 +38172,7 @@
|
|
|
37375
38172
|
"original": {
|
|
37376
38173
|
"$value": "{base.color.blue.2}",
|
|
37377
38174
|
"$type": "color",
|
|
38175
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37378
38176
|
"$extensions": {
|
|
37379
38177
|
"org.primer.figma": {
|
|
37380
38178
|
"collection": "mode",
|
|
@@ -37397,6 +38195,10 @@
|
|
|
37397
38195
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37398
38196
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37399
38197
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38198
|
+
},
|
|
38199
|
+
"org.primer.llm": {
|
|
38200
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38201
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37400
38202
|
}
|
|
37401
38203
|
},
|
|
37402
38204
|
"key": "{fgColor.success}"
|
|
@@ -37409,6 +38211,7 @@
|
|
|
37409
38211
|
"key": "{fgColor.upsell}",
|
|
37410
38212
|
"$value": "#d3abff",
|
|
37411
38213
|
"$type": "color",
|
|
38214
|
+
"$description": "Text color for upsell and promotional content",
|
|
37412
38215
|
"$extensions": {
|
|
37413
38216
|
"org.primer.figma": {
|
|
37414
38217
|
"collection": "mode",
|
|
@@ -37417,6 +38220,10 @@
|
|
|
37417
38220
|
"codeSyntax": {
|
|
37418
38221
|
"web": "var(--fgColor-upsell)"
|
|
37419
38222
|
}
|
|
38223
|
+
},
|
|
38224
|
+
"org.primer.llm": {
|
|
38225
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38226
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37420
38227
|
}
|
|
37421
38228
|
},
|
|
37422
38229
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37424,6 +38231,7 @@
|
|
|
37424
38231
|
"original": {
|
|
37425
38232
|
"$value": "{fgColor.done}",
|
|
37426
38233
|
"$type": "color",
|
|
38234
|
+
"$description": "Text color for upsell and promotional content",
|
|
37427
38235
|
"$extensions": {
|
|
37428
38236
|
"org.primer.figma": {
|
|
37429
38237
|
"collection": "mode",
|
|
@@ -37432,6 +38240,10 @@
|
|
|
37432
38240
|
"codeSyntax": {
|
|
37433
38241
|
"web": "var(--fgColor-upsell)"
|
|
37434
38242
|
}
|
|
38243
|
+
},
|
|
38244
|
+
"org.primer.llm": {
|
|
38245
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38246
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37435
38247
|
}
|
|
37436
38248
|
},
|
|
37437
38249
|
"key": "{fgColor.upsell}"
|
|
@@ -37444,6 +38256,7 @@
|
|
|
37444
38256
|
"key": "{fgColor.white}",
|
|
37445
38257
|
"$value": "#ffffff",
|
|
37446
38258
|
"$type": "color",
|
|
38259
|
+
"$description": "Pure white text",
|
|
37447
38260
|
"$extensions": {
|
|
37448
38261
|
"org.primer.figma": {
|
|
37449
38262
|
"collection": "mode",
|
|
@@ -37452,6 +38265,10 @@
|
|
|
37452
38265
|
},
|
|
37453
38266
|
"org.primer.overrides": {
|
|
37454
38267
|
"dark": "#ffffff"
|
|
38268
|
+
},
|
|
38269
|
+
"org.primer.llm": {
|
|
38270
|
+
"doNotUse": true,
|
|
38271
|
+
"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."
|
|
37455
38272
|
}
|
|
37456
38273
|
},
|
|
37457
38274
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37459,6 +38276,7 @@
|
|
|
37459
38276
|
"original": {
|
|
37460
38277
|
"$value": "{base.color.neutral.13}",
|
|
37461
38278
|
"$type": "color",
|
|
38279
|
+
"$description": "Pure white text",
|
|
37462
38280
|
"$extensions": {
|
|
37463
38281
|
"org.primer.figma": {
|
|
37464
38282
|
"collection": "mode",
|
|
@@ -37467,6 +38285,10 @@
|
|
|
37467
38285
|
},
|
|
37468
38286
|
"org.primer.overrides": {
|
|
37469
38287
|
"dark": "{base.color.neutral.13}"
|
|
38288
|
+
},
|
|
38289
|
+
"org.primer.llm": {
|
|
38290
|
+
"doNotUse": true,
|
|
38291
|
+
"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."
|
|
37470
38292
|
}
|
|
37471
38293
|
},
|
|
37472
38294
|
"key": "{fgColor.white}"
|
|
@@ -37479,6 +38301,13 @@
|
|
|
37479
38301
|
"key": "{focus.outline}",
|
|
37480
38302
|
"$value": "2px solid #409eff",
|
|
37481
38303
|
"$type": "border",
|
|
38304
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38305
|
+
"$extensions": {
|
|
38306
|
+
"org.primer.llm": {
|
|
38307
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38308
|
+
"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."
|
|
38309
|
+
}
|
|
38310
|
+
},
|
|
37482
38311
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37483
38312
|
"isSource": true,
|
|
37484
38313
|
"original": {
|
|
@@ -37488,6 +38317,13 @@
|
|
|
37488
38317
|
"width": "2px"
|
|
37489
38318
|
},
|
|
37490
38319
|
"$type": "border",
|
|
38320
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38321
|
+
"$extensions": {
|
|
38322
|
+
"org.primer.llm": {
|
|
38323
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38324
|
+
"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."
|
|
38325
|
+
}
|
|
38326
|
+
},
|
|
37491
38327
|
"key": "{focus.outline}"
|
|
37492
38328
|
},
|
|
37493
38329
|
"name": "focus-outline",
|
|
@@ -37498,11 +38334,16 @@
|
|
|
37498
38334
|
"key": "{focus.outlineColor}",
|
|
37499
38335
|
"$value": "#409eff",
|
|
37500
38336
|
"$type": "color",
|
|
38337
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37501
38338
|
"$extensions": {
|
|
37502
38339
|
"org.primer.figma": {
|
|
37503
38340
|
"collection": "mode",
|
|
37504
38341
|
"group": "component (internal)",
|
|
37505
38342
|
"scopes": ["borderColor", "effectColor"]
|
|
38343
|
+
},
|
|
38344
|
+
"org.primer.llm": {
|
|
38345
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38346
|
+
"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."
|
|
37506
38347
|
}
|
|
37507
38348
|
},
|
|
37508
38349
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37510,11 +38351,16 @@
|
|
|
37510
38351
|
"original": {
|
|
37511
38352
|
"$value": "{borderColor.accent.emphasis}",
|
|
37512
38353
|
"$type": "color",
|
|
38354
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37513
38355
|
"$extensions": {
|
|
37514
38356
|
"org.primer.figma": {
|
|
37515
38357
|
"collection": "mode",
|
|
37516
38358
|
"group": "component (internal)",
|
|
37517
38359
|
"scopes": ["borderColor", "effectColor"]
|
|
38360
|
+
},
|
|
38361
|
+
"org.primer.llm": {
|
|
38362
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38363
|
+
"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."
|
|
37518
38364
|
}
|
|
37519
38365
|
},
|
|
37520
38366
|
"key": "{focus.outlineColor}"
|
|
@@ -46570,6 +47416,7 @@
|
|
|
46570
47416
|
"key": "{selection.bgColor}",
|
|
46571
47417
|
"$value": "#194fb1b3",
|
|
46572
47418
|
"$type": "color",
|
|
47419
|
+
"$description": "Background color for text selection highlights",
|
|
46573
47420
|
"$extensions": {
|
|
46574
47421
|
"org.primer.figma": {
|
|
46575
47422
|
"collection": "mode",
|
|
@@ -46584,6 +47431,10 @@
|
|
|
46584
47431
|
"isSource": true,
|
|
46585
47432
|
"$type": "color"
|
|
46586
47433
|
}
|
|
47434
|
+
},
|
|
47435
|
+
"org.primer.llm": {
|
|
47436
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47437
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46587
47438
|
}
|
|
46588
47439
|
},
|
|
46589
47440
|
"alpha": 0.7,
|
|
@@ -46592,6 +47443,7 @@
|
|
|
46592
47443
|
"original": {
|
|
46593
47444
|
"$value": "{bgColor.accent.emphasis}",
|
|
46594
47445
|
"$type": "color",
|
|
47446
|
+
"$description": "Background color for text selection highlights",
|
|
46595
47447
|
"$extensions": {
|
|
46596
47448
|
"org.primer.figma": {
|
|
46597
47449
|
"collection": "mode",
|
|
@@ -46606,6 +47458,10 @@
|
|
|
46606
47458
|
"isSource": true,
|
|
46607
47459
|
"$type": "color"
|
|
46608
47460
|
}
|
|
47461
|
+
},
|
|
47462
|
+
"org.primer.llm": {
|
|
47463
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47464
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46609
47465
|
}
|
|
46610
47466
|
},
|
|
46611
47467
|
"alpha": 0.7,
|
|
@@ -46619,6 +47475,7 @@
|
|
|
46619
47475
|
"key": "{shadow.floating.large}",
|
|
46620
47476
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409",
|
|
46621
47477
|
"$type": "shadow",
|
|
47478
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46622
47479
|
"$extensions": {
|
|
46623
47480
|
"org.primer.figma": {
|
|
46624
47481
|
"collection": "mode",
|
|
@@ -46648,6 +47505,10 @@
|
|
|
46648
47505
|
"isSource": true,
|
|
46649
47506
|
"$type": "shadow"
|
|
46650
47507
|
}
|
|
47508
|
+
},
|
|
47509
|
+
"org.primer.llm": {
|
|
47510
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47511
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46651
47512
|
}
|
|
46652
47513
|
},
|
|
46653
47514
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46672,6 +47533,7 @@
|
|
|
46672
47533
|
}
|
|
46673
47534
|
],
|
|
46674
47535
|
"$type": "shadow",
|
|
47536
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46675
47537
|
"$extensions": {
|
|
46676
47538
|
"org.primer.figma": {
|
|
46677
47539
|
"collection": "mode",
|
|
@@ -46701,6 +47563,10 @@
|
|
|
46701
47563
|
"isSource": true,
|
|
46702
47564
|
"$type": "shadow"
|
|
46703
47565
|
}
|
|
47566
|
+
},
|
|
47567
|
+
"org.primer.llm": {
|
|
47568
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47569
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46704
47570
|
}
|
|
46705
47571
|
},
|
|
46706
47572
|
"key": "{shadow.floating.large}"
|
|
@@ -46713,6 +47579,7 @@
|
|
|
46713
47579
|
"key": "{shadow.floating.legacy}",
|
|
46714
47580
|
"$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46715
47581
|
"$type": "shadow",
|
|
47582
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46716
47583
|
"$extensions": {
|
|
46717
47584
|
"org.primer.figma": {},
|
|
46718
47585
|
"org.primer.overrides": {
|
|
@@ -46739,6 +47606,10 @@
|
|
|
46739
47606
|
"isSource": true,
|
|
46740
47607
|
"$type": "shadow"
|
|
46741
47608
|
}
|
|
47609
|
+
},
|
|
47610
|
+
"org.primer.llm": {
|
|
47611
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47612
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46742
47613
|
}
|
|
46743
47614
|
},
|
|
46744
47615
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46763,6 +47634,7 @@
|
|
|
46763
47634
|
}
|
|
46764
47635
|
],
|
|
46765
47636
|
"$type": "shadow",
|
|
47637
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46766
47638
|
"$extensions": {
|
|
46767
47639
|
"org.primer.figma": {},
|
|
46768
47640
|
"org.primer.overrides": {
|
|
@@ -46789,6 +47661,10 @@
|
|
|
46789
47661
|
"isSource": true,
|
|
46790
47662
|
"$type": "shadow"
|
|
46791
47663
|
}
|
|
47664
|
+
},
|
|
47665
|
+
"org.primer.llm": {
|
|
47666
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47667
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46792
47668
|
}
|
|
46793
47669
|
},
|
|
46794
47670
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46801,6 +47677,7 @@
|
|
|
46801
47677
|
"key": "{shadow.floating.medium}",
|
|
46802
47678
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
|
|
46803
47679
|
"$type": "shadow",
|
|
47680
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46804
47681
|
"$extensions": {
|
|
46805
47682
|
"org.primer.figma": {
|
|
46806
47683
|
"collection": "mode",
|
|
@@ -46854,6 +47731,10 @@
|
|
|
46854
47731
|
"isSource": true,
|
|
46855
47732
|
"$type": "shadow"
|
|
46856
47733
|
}
|
|
47734
|
+
},
|
|
47735
|
+
"org.primer.llm": {
|
|
47736
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47737
|
+
"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."
|
|
46857
47738
|
}
|
|
46858
47739
|
},
|
|
46859
47740
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46902,6 +47783,7 @@
|
|
|
46902
47783
|
}
|
|
46903
47784
|
],
|
|
46904
47785
|
"$type": "shadow",
|
|
47786
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46905
47787
|
"$extensions": {
|
|
46906
47788
|
"org.primer.figma": {
|
|
46907
47789
|
"collection": "mode",
|
|
@@ -46955,6 +47837,10 @@
|
|
|
46955
47837
|
"isSource": true,
|
|
46956
47838
|
"$type": "shadow"
|
|
46957
47839
|
}
|
|
47840
|
+
},
|
|
47841
|
+
"org.primer.llm": {
|
|
47842
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47843
|
+
"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."
|
|
46958
47844
|
}
|
|
46959
47845
|
},
|
|
46960
47846
|
"key": "{shadow.floating.medium}"
|
|
@@ -46967,6 +47853,7 @@
|
|
|
46967
47853
|
"key": "{shadow.floating.small}",
|
|
46968
47854
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46969
47855
|
"$type": "shadow",
|
|
47856
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46970
47857
|
"$extensions": {
|
|
46971
47858
|
"org.primer.figma": {
|
|
46972
47859
|
"collection": "mode",
|
|
@@ -47004,6 +47891,10 @@
|
|
|
47004
47891
|
"isSource": true,
|
|
47005
47892
|
"$type": "shadow"
|
|
47006
47893
|
}
|
|
47894
|
+
},
|
|
47895
|
+
"org.primer.llm": {
|
|
47896
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47897
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47007
47898
|
}
|
|
47008
47899
|
},
|
|
47009
47900
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47036,6 +47927,7 @@
|
|
|
47036
47927
|
}
|
|
47037
47928
|
],
|
|
47038
47929
|
"$type": "shadow",
|
|
47930
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47039
47931
|
"$extensions": {
|
|
47040
47932
|
"org.primer.figma": {
|
|
47041
47933
|
"collection": "mode",
|
|
@@ -47073,6 +47965,10 @@
|
|
|
47073
47965
|
"isSource": true,
|
|
47074
47966
|
"$type": "shadow"
|
|
47075
47967
|
}
|
|
47968
|
+
},
|
|
47969
|
+
"org.primer.llm": {
|
|
47970
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47971
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47076
47972
|
}
|
|
47077
47973
|
},
|
|
47078
47974
|
"key": "{shadow.floating.small}"
|
|
@@ -47085,6 +47981,7 @@
|
|
|
47085
47981
|
"key": "{shadow.floating.xlarge}",
|
|
47086
47982
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409",
|
|
47087
47983
|
"$type": "shadow",
|
|
47984
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47088
47985
|
"$extensions": {
|
|
47089
47986
|
"org.primer.figma": {
|
|
47090
47987
|
"collection": "mode",
|
|
@@ -47114,6 +48011,10 @@
|
|
|
47114
48011
|
"isSource": true,
|
|
47115
48012
|
"$type": "shadow"
|
|
47116
48013
|
}
|
|
48014
|
+
},
|
|
48015
|
+
"org.primer.llm": {
|
|
48016
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48017
|
+
"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."
|
|
47117
48018
|
}
|
|
47118
48019
|
},
|
|
47119
48020
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47138,6 +48039,7 @@
|
|
|
47138
48039
|
}
|
|
47139
48040
|
],
|
|
47140
48041
|
"$type": "shadow",
|
|
48042
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47141
48043
|
"$extensions": {
|
|
47142
48044
|
"org.primer.figma": {
|
|
47143
48045
|
"collection": "mode",
|
|
@@ -47167,6 +48069,10 @@
|
|
|
47167
48069
|
"isSource": true,
|
|
47168
48070
|
"$type": "shadow"
|
|
47169
48071
|
}
|
|
48072
|
+
},
|
|
48073
|
+
"org.primer.llm": {
|
|
48074
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48075
|
+
"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."
|
|
47170
48076
|
}
|
|
47171
48077
|
},
|
|
47172
48078
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47179,6 +48085,7 @@
|
|
|
47179
48085
|
"key": "{shadow.inset}",
|
|
47180
48086
|
"$value": "inset 0px 1px 0px 0px #0104093d",
|
|
47181
48087
|
"$type": "shadow",
|
|
48088
|
+
"$description": "Inset shadow for recessed elements",
|
|
47182
48089
|
"$extensions": {
|
|
47183
48090
|
"org.primer.figma": {
|
|
47184
48091
|
"collection": "mode",
|
|
@@ -47199,6 +48106,10 @@
|
|
|
47199
48106
|
"isSource": true,
|
|
47200
48107
|
"$type": "shadow"
|
|
47201
48108
|
}
|
|
48109
|
+
},
|
|
48110
|
+
"org.primer.llm": {
|
|
48111
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48112
|
+
"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."
|
|
47202
48113
|
}
|
|
47203
48114
|
},
|
|
47204
48115
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47214,6 +48125,7 @@
|
|
|
47214
48125
|
"inset": true
|
|
47215
48126
|
},
|
|
47216
48127
|
"$type": "shadow",
|
|
48128
|
+
"$description": "Inset shadow for recessed elements",
|
|
47217
48129
|
"$extensions": {
|
|
47218
48130
|
"org.primer.figma": {
|
|
47219
48131
|
"collection": "mode",
|
|
@@ -47234,6 +48146,10 @@
|
|
|
47234
48146
|
"isSource": true,
|
|
47235
48147
|
"$type": "shadow"
|
|
47236
48148
|
}
|
|
48149
|
+
},
|
|
48150
|
+
"org.primer.llm": {
|
|
48151
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48152
|
+
"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."
|
|
47237
48153
|
}
|
|
47238
48154
|
},
|
|
47239
48155
|
"key": "{shadow.inset}"
|
|
@@ -47246,6 +48162,7 @@
|
|
|
47246
48162
|
"key": "{shadow.resting.medium}",
|
|
47247
48163
|
"$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47248
48164
|
"$type": "shadow",
|
|
48165
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47249
48166
|
"$extensions": {
|
|
47250
48167
|
"org.primer.figma": {
|
|
47251
48168
|
"collection": "mode",
|
|
@@ -47275,6 +48192,10 @@
|
|
|
47275
48192
|
"isSource": true,
|
|
47276
48193
|
"$type": "shadow"
|
|
47277
48194
|
}
|
|
48195
|
+
},
|
|
48196
|
+
"org.primer.llm": {
|
|
48197
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48198
|
+
"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."
|
|
47278
48199
|
}
|
|
47279
48200
|
},
|
|
47280
48201
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47299,6 +48220,7 @@
|
|
|
47299
48220
|
}
|
|
47300
48221
|
],
|
|
47301
48222
|
"$type": "shadow",
|
|
48223
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47302
48224
|
"$extensions": {
|
|
47303
48225
|
"org.primer.figma": {
|
|
47304
48226
|
"collection": "mode",
|
|
@@ -47328,6 +48250,10 @@
|
|
|
47328
48250
|
"isSource": true,
|
|
47329
48251
|
"$type": "shadow"
|
|
47330
48252
|
}
|
|
48253
|
+
},
|
|
48254
|
+
"org.primer.llm": {
|
|
48255
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48256
|
+
"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."
|
|
47331
48257
|
}
|
|
47332
48258
|
},
|
|
47333
48259
|
"key": "{shadow.resting.medium}"
|
|
@@ -47340,6 +48266,7 @@
|
|
|
47340
48266
|
"key": "{shadow.resting.small}",
|
|
47341
48267
|
"$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47342
48268
|
"$type": "shadow",
|
|
48269
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47343
48270
|
"$extensions": {
|
|
47344
48271
|
"org.primer.figma": {
|
|
47345
48272
|
"collection": "mode",
|
|
@@ -47371,6 +48298,10 @@
|
|
|
47371
48298
|
"isSource": true,
|
|
47372
48299
|
"$type": "shadow"
|
|
47373
48300
|
}
|
|
48301
|
+
},
|
|
48302
|
+
"org.primer.llm": {
|
|
48303
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48304
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47374
48305
|
}
|
|
47375
48306
|
},
|
|
47376
48307
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47397,6 +48328,7 @@
|
|
|
47397
48328
|
}
|
|
47398
48329
|
],
|
|
47399
48330
|
"$type": "shadow",
|
|
48331
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47400
48332
|
"$extensions": {
|
|
47401
48333
|
"org.primer.figma": {
|
|
47402
48334
|
"collection": "mode",
|
|
@@ -47428,6 +48360,10 @@
|
|
|
47428
48360
|
"isSource": true,
|
|
47429
48361
|
"$type": "shadow"
|
|
47430
48362
|
}
|
|
48363
|
+
},
|
|
48364
|
+
"org.primer.llm": {
|
|
48365
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48366
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47431
48367
|
}
|
|
47432
48368
|
},
|
|
47433
48369
|
"key": "{shadow.resting.small}"
|
|
@@ -47440,6 +48376,7 @@
|
|
|
47440
48376
|
"key": "{shadow.resting.xsmall}",
|
|
47441
48377
|
"$value": "0px 1px 1px 0px #010409cc",
|
|
47442
48378
|
"$type": "shadow",
|
|
48379
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47443
48380
|
"$extensions": {
|
|
47444
48381
|
"org.primer.figma": {
|
|
47445
48382
|
"collection": "mode",
|
|
@@ -47460,6 +48397,10 @@
|
|
|
47460
48397
|
"isSource": true,
|
|
47461
48398
|
"$type": "shadow"
|
|
47462
48399
|
}
|
|
48400
|
+
},
|
|
48401
|
+
"org.primer.llm": {
|
|
48402
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48403
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47463
48404
|
}
|
|
47464
48405
|
},
|
|
47465
48406
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47475,6 +48416,7 @@
|
|
|
47475
48416
|
"inset": false
|
|
47476
48417
|
},
|
|
47477
48418
|
"$type": "shadow",
|
|
48419
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47478
48420
|
"$extensions": {
|
|
47479
48421
|
"org.primer.figma": {
|
|
47480
48422
|
"collection": "mode",
|
|
@@ -47495,6 +48437,10 @@
|
|
|
47495
48437
|
"isSource": true,
|
|
47496
48438
|
"$type": "shadow"
|
|
47497
48439
|
}
|
|
48440
|
+
},
|
|
48441
|
+
"org.primer.llm": {
|
|
48442
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48443
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47498
48444
|
}
|
|
47499
48445
|
},
|
|
47500
48446
|
"key": "{shadow.resting.xsmall}"
|