@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": "#ad0116",
|
|
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.danger.emphasis}",
|
|
565
620
|
"$type": "color",
|
|
621
|
+
"$description": "Strong background for closed state badges and labels",
|
|
566
622
|
"$extensions": {
|
|
567
623
|
"org.primer.figma": {
|
|
568
624
|
"collection": "mode",
|
|
@@ -581,6 +637,10 @@
|
|
|
581
637
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
582
638
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
583
639
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
640
|
+
},
|
|
641
|
+
"org.primer.llm": {
|
|
642
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
643
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
584
644
|
}
|
|
585
645
|
},
|
|
586
646
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -593,6 +653,7 @@
|
|
|
593
653
|
"key": "{bgColor.closed.muted}",
|
|
594
654
|
"$value": "#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": "#006222",
|
|
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": "{bgColor.success.emphasis}",
|
|
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": "#0ac74026",
|
|
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",
|
|
@@ -1548,6 +1773,7 @@
|
|
|
1548
1773
|
"original": {
|
|
1549
1774
|
"$value": "{bgColor.success.muted}",
|
|
1550
1775
|
"$type": "color",
|
|
1776
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1551
1777
|
"$extensions": {
|
|
1552
1778
|
"org.primer.figma": {
|
|
1553
1779
|
"collection": "mode",
|
|
@@ -1590,6 +1816,10 @@
|
|
|
1590
1816
|
"isSource": true,
|
|
1591
1817
|
"$type": "color"
|
|
1592
1818
|
}
|
|
1819
|
+
},
|
|
1820
|
+
"org.primer.llm": {
|
|
1821
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1822
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1593
1823
|
}
|
|
1594
1824
|
},
|
|
1595
1825
|
"key": "{bgColor.open.muted}"
|
|
@@ -1602,6 +1832,7 @@
|
|
|
1602
1832
|
"key": "{bgColor.severe.emphasis}",
|
|
1603
1833
|
"$value": "#8f3c00",
|
|
1604
1834
|
"$type": "color",
|
|
1835
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1605
1836
|
"$extensions": {
|
|
1606
1837
|
"org.primer.figma": {
|
|
1607
1838
|
"collection": "mode",
|
|
@@ -1619,6 +1850,10 @@
|
|
|
1619
1850
|
"dark-high-contrast": "#8f3c00",
|
|
1620
1851
|
"dark-dimmed-high-contrast": "#bf5e0a",
|
|
1621
1852
|
"dark-protanopia-deuteranopia-high-contrast": "#8f3c00"
|
|
1853
|
+
},
|
|
1854
|
+
"org.primer.llm": {
|
|
1855
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1856
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1622
1857
|
}
|
|
1623
1858
|
},
|
|
1624
1859
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1626,6 +1861,7 @@
|
|
|
1626
1861
|
"original": {
|
|
1627
1862
|
"$value": "{base.color.orange.9}",
|
|
1628
1863
|
"$type": "color",
|
|
1864
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1629
1865
|
"$extensions": {
|
|
1630
1866
|
"org.primer.figma": {
|
|
1631
1867
|
"collection": "mode",
|
|
@@ -1643,6 +1879,10 @@
|
|
|
1643
1879
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1644
1880
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1645
1881
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1882
|
+
},
|
|
1883
|
+
"org.primer.llm": {
|
|
1884
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1885
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1646
1886
|
}
|
|
1647
1887
|
},
|
|
1648
1888
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1655,6 +1895,7 @@
|
|
|
1655
1895
|
"key": "{bgColor.severe.muted}",
|
|
1656
1896
|
"$value": "#f48b251a",
|
|
1657
1897
|
"$type": "color",
|
|
1898
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1658
1899
|
"$extensions": {
|
|
1659
1900
|
"org.primer.figma": {
|
|
1660
1901
|
"collection": "mode",
|
|
@@ -1681,6 +1922,10 @@
|
|
|
1681
1922
|
"isSource": true,
|
|
1682
1923
|
"$type": "color"
|
|
1683
1924
|
}
|
|
1925
|
+
},
|
|
1926
|
+
"org.primer.llm": {
|
|
1927
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1928
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1684
1929
|
}
|
|
1685
1930
|
},
|
|
1686
1931
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1689,6 +1934,7 @@
|
|
|
1689
1934
|
"original": {
|
|
1690
1935
|
"$value": "{base.color.orange.4}",
|
|
1691
1936
|
"$type": "color",
|
|
1937
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1692
1938
|
"$extensions": {
|
|
1693
1939
|
"org.primer.figma": {
|
|
1694
1940
|
"collection": "mode",
|
|
@@ -1715,6 +1961,10 @@
|
|
|
1715
1961
|
"isSource": true,
|
|
1716
1962
|
"$type": "color"
|
|
1717
1963
|
}
|
|
1964
|
+
},
|
|
1965
|
+
"org.primer.llm": {
|
|
1966
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1967
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1718
1968
|
}
|
|
1719
1969
|
},
|
|
1720
1970
|
"alpha": 0.1,
|
|
@@ -1728,6 +1978,7 @@
|
|
|
1728
1978
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1729
1979
|
"$value": "#9c1d6a",
|
|
1730
1980
|
"$type": "color",
|
|
1981
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1731
1982
|
"$extensions": {
|
|
1732
1983
|
"org.primer.figma": {
|
|
1733
1984
|
"collection": "mode",
|
|
@@ -1742,6 +1993,10 @@
|
|
|
1742
1993
|
"dark-dimmed-high-contrast": "#d23d91",
|
|
1743
1994
|
"dark-tritanopia-high-contrast": "#9c1d6a",
|
|
1744
1995
|
"dark-protanopia-deuteranopia-high-contrast": "#9c1d6a"
|
|
1996
|
+
},
|
|
1997
|
+
"org.primer.llm": {
|
|
1998
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
1999
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1745
2000
|
}
|
|
1746
2001
|
},
|
|
1747
2002
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1749,6 +2004,7 @@
|
|
|
1749
2004
|
"original": {
|
|
1750
2005
|
"$value": "{base.color.pink.9}",
|
|
1751
2006
|
"$type": "color",
|
|
2007
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1752
2008
|
"$extensions": {
|
|
1753
2009
|
"org.primer.figma": {
|
|
1754
2010
|
"collection": "mode",
|
|
@@ -1763,6 +2019,10 @@
|
|
|
1763
2019
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1764
2020
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1765
2021
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2022
|
+
},
|
|
2023
|
+
"org.primer.llm": {
|
|
2024
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2025
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1766
2026
|
}
|
|
1767
2027
|
},
|
|
1768
2028
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1775,6 +2035,7 @@
|
|
|
1775
2035
|
"key": "{bgColor.sponsors.muted}",
|
|
1776
2036
|
"$value": "#f87cbd1a",
|
|
1777
2037
|
"$type": "color",
|
|
2038
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1778
2039
|
"$extensions": {
|
|
1779
2040
|
"org.primer.figma": {
|
|
1780
2041
|
"collection": "mode",
|
|
@@ -1799,6 +2060,10 @@
|
|
|
1799
2060
|
"isSource": true,
|
|
1800
2061
|
"$type": "color"
|
|
1801
2062
|
}
|
|
2063
|
+
},
|
|
2064
|
+
"org.primer.llm": {
|
|
2065
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2066
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1802
2067
|
}
|
|
1803
2068
|
},
|
|
1804
2069
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1807,6 +2072,7 @@
|
|
|
1807
2072
|
"original": {
|
|
1808
2073
|
"$value": "{base.color.pink.4}",
|
|
1809
2074
|
"$type": "color",
|
|
2075
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1810
2076
|
"$extensions": {
|
|
1811
2077
|
"org.primer.figma": {
|
|
1812
2078
|
"collection": "mode",
|
|
@@ -1831,6 +2097,10 @@
|
|
|
1831
2097
|
"isSource": true,
|
|
1832
2098
|
"$type": "color"
|
|
1833
2099
|
}
|
|
2100
|
+
},
|
|
2101
|
+
"org.primer.llm": {
|
|
2102
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2103
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1834
2104
|
}
|
|
1835
2105
|
},
|
|
1836
2106
|
"alpha": 0.1,
|
|
@@ -1844,6 +2114,7 @@
|
|
|
1844
2114
|
"key": "{bgColor.success.emphasis}",
|
|
1845
2115
|
"$value": "#006222",
|
|
1846
2116
|
"$type": "color",
|
|
2117
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1847
2118
|
"$extensions": {
|
|
1848
2119
|
"org.primer.figma": {
|
|
1849
2120
|
"collection": "mode",
|
|
@@ -1866,6 +2137,10 @@
|
|
|
1866
2137
|
"light-high-contrast": "#09b43a",
|
|
1867
2138
|
"dark-high-contrast": "#006222",
|
|
1868
2139
|
"dark-dimmed-high-contrast": "#008c2c"
|
|
2140
|
+
},
|
|
2141
|
+
"org.primer.llm": {
|
|
2142
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2143
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1869
2144
|
}
|
|
1870
2145
|
},
|
|
1871
2146
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1873,6 +2148,7 @@
|
|
|
1873
2148
|
"original": {
|
|
1874
2149
|
"$value": "{base.color.green.9}",
|
|
1875
2150
|
"$type": "color",
|
|
2151
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1876
2152
|
"$extensions": {
|
|
1877
2153
|
"org.primer.figma": {
|
|
1878
2154
|
"collection": "mode",
|
|
@@ -1895,6 +2171,10 @@
|
|
|
1895
2171
|
"light-high-contrast": "{base.color.green.5}",
|
|
1896
2172
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1897
2173
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2174
|
+
},
|
|
2175
|
+
"org.primer.llm": {
|
|
2176
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2177
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1898
2178
|
}
|
|
1899
2179
|
},
|
|
1900
2180
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1907,6 +2187,7 @@
|
|
|
1907
2187
|
"key": "{bgColor.success.muted}",
|
|
1908
2188
|
"$value": "#0ac74026",
|
|
1909
2189
|
"$type": "color",
|
|
2190
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1910
2191
|
"$extensions": {
|
|
1911
2192
|
"org.primer.figma": {
|
|
1912
2193
|
"collection": "mode",
|
|
@@ -1956,6 +2237,10 @@
|
|
|
1956
2237
|
"isSource": true,
|
|
1957
2238
|
"$type": "color"
|
|
1958
2239
|
}
|
|
2240
|
+
},
|
|
2241
|
+
"org.primer.llm": {
|
|
2242
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2243
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1959
2244
|
}
|
|
1960
2245
|
},
|
|
1961
2246
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1964,6 +2249,7 @@
|
|
|
1964
2249
|
"original": {
|
|
1965
2250
|
"$value": "{base.color.green.4}",
|
|
1966
2251
|
"$type": "color",
|
|
2252
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1967
2253
|
"$extensions": {
|
|
1968
2254
|
"org.primer.figma": {
|
|
1969
2255
|
"collection": "mode",
|
|
@@ -2013,6 +2299,10 @@
|
|
|
2013
2299
|
"isSource": true,
|
|
2014
2300
|
"$type": "color"
|
|
2015
2301
|
}
|
|
2302
|
+
},
|
|
2303
|
+
"org.primer.llm": {
|
|
2304
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2305
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2016
2306
|
}
|
|
2017
2307
|
},
|
|
2018
2308
|
"alpha": 0.15,
|
|
@@ -2026,6 +2316,7 @@
|
|
|
2026
2316
|
"key": "{bgColor.transparent}",
|
|
2027
2317
|
"$value": "#00000000",
|
|
2028
2318
|
"$type": "color",
|
|
2319
|
+
"$description": "Fully transparent background",
|
|
2029
2320
|
"$extensions": {
|
|
2030
2321
|
"org.primer.figma": {
|
|
2031
2322
|
"collection": "mode",
|
|
@@ -2034,6 +2325,10 @@
|
|
|
2034
2325
|
"codeSyntax": {
|
|
2035
2326
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2036
2327
|
}
|
|
2328
|
+
},
|
|
2329
|
+
"org.primer.llm": {
|
|
2330
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2331
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2037
2332
|
}
|
|
2038
2333
|
},
|
|
2039
2334
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2041,6 +2336,7 @@
|
|
|
2041
2336
|
"original": {
|
|
2042
2337
|
"$value": "{base.color.transparent}",
|
|
2043
2338
|
"$type": "color",
|
|
2339
|
+
"$description": "Fully transparent background",
|
|
2044
2340
|
"$extensions": {
|
|
2045
2341
|
"org.primer.figma": {
|
|
2046
2342
|
"collection": "mode",
|
|
@@ -2049,6 +2345,10 @@
|
|
|
2049
2345
|
"codeSyntax": {
|
|
2050
2346
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2051
2347
|
}
|
|
2348
|
+
},
|
|
2349
|
+
"org.primer.llm": {
|
|
2350
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2351
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2052
2352
|
}
|
|
2053
2353
|
},
|
|
2054
2354
|
"key": "{bgColor.transparent}"
|
|
@@ -2061,6 +2361,7 @@
|
|
|
2061
2361
|
"key": "{bgColor.upsell.emphasis}",
|
|
2062
2362
|
"$value": "#6921d7",
|
|
2063
2363
|
"$type": "color",
|
|
2364
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2064
2365
|
"$extensions": {
|
|
2065
2366
|
"org.primer.figma": {
|
|
2066
2367
|
"collection": "mode",
|
|
@@ -2069,6 +2370,10 @@
|
|
|
2069
2370
|
"codeSyntax": {
|
|
2070
2371
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2071
2372
|
}
|
|
2373
|
+
},
|
|
2374
|
+
"org.primer.llm": {
|
|
2375
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2376
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2072
2377
|
}
|
|
2073
2378
|
},
|
|
2074
2379
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2076,6 +2381,7 @@
|
|
|
2076
2381
|
"original": {
|
|
2077
2382
|
"$value": "{bgColor.done.emphasis}",
|
|
2078
2383
|
"$type": "color",
|
|
2384
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2079
2385
|
"$extensions": {
|
|
2080
2386
|
"org.primer.figma": {
|
|
2081
2387
|
"collection": "mode",
|
|
@@ -2084,6 +2390,10 @@
|
|
|
2084
2390
|
"codeSyntax": {
|
|
2085
2391
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2086
2392
|
}
|
|
2393
|
+
},
|
|
2394
|
+
"org.primer.llm": {
|
|
2395
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2396
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2087
2397
|
}
|
|
2088
2398
|
},
|
|
2089
2399
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2096,6 +2406,7 @@
|
|
|
2096
2406
|
"key": "{bgColor.upsell.muted}",
|
|
2097
2407
|
"$value": "#bf8fff26",
|
|
2098
2408
|
"$type": "color",
|
|
2409
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2099
2410
|
"$extensions": {
|
|
2100
2411
|
"org.primer.figma": {
|
|
2101
2412
|
"collection": "mode",
|
|
@@ -2104,6 +2415,10 @@
|
|
|
2104
2415
|
"codeSyntax": {
|
|
2105
2416
|
"web": "var(--bgColor-upsell-muted)"
|
|
2106
2417
|
}
|
|
2418
|
+
},
|
|
2419
|
+
"org.primer.llm": {
|
|
2420
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2421
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2107
2422
|
}
|
|
2108
2423
|
},
|
|
2109
2424
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2111,6 +2426,7 @@
|
|
|
2111
2426
|
"original": {
|
|
2112
2427
|
"$value": "{bgColor.done.muted}",
|
|
2113
2428
|
"$type": "color",
|
|
2429
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2114
2430
|
"$extensions": {
|
|
2115
2431
|
"org.primer.figma": {
|
|
2116
2432
|
"collection": "mode",
|
|
@@ -2119,6 +2435,10 @@
|
|
|
2119
2435
|
"codeSyntax": {
|
|
2120
2436
|
"web": "var(--bgColor-upsell-muted)"
|
|
2121
2437
|
}
|
|
2438
|
+
},
|
|
2439
|
+
"org.primer.llm": {
|
|
2440
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2441
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2122
2442
|
}
|
|
2123
2443
|
},
|
|
2124
2444
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2131,6 +2451,7 @@
|
|
|
2131
2451
|
"key": "{bgColor.white}",
|
|
2132
2452
|
"$value": "#ffffff",
|
|
2133
2453
|
"$type": "color",
|
|
2454
|
+
"$description": "Pure white background",
|
|
2134
2455
|
"$extensions": {
|
|
2135
2456
|
"org.primer.figma": {
|
|
2136
2457
|
"collection": "mode",
|
|
@@ -2139,6 +2460,10 @@
|
|
|
2139
2460
|
},
|
|
2140
2461
|
"org.primer.overrides": {
|
|
2141
2462
|
"dark": "#ffffff"
|
|
2463
|
+
},
|
|
2464
|
+
"org.primer.llm": {
|
|
2465
|
+
"doNotUse": true,
|
|
2466
|
+
"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."
|
|
2142
2467
|
}
|
|
2143
2468
|
},
|
|
2144
2469
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2146,6 +2471,7 @@
|
|
|
2146
2471
|
"original": {
|
|
2147
2472
|
"$value": "{base.color.neutral.13}",
|
|
2148
2473
|
"$type": "color",
|
|
2474
|
+
"$description": "Pure white background",
|
|
2149
2475
|
"$extensions": {
|
|
2150
2476
|
"org.primer.figma": {
|
|
2151
2477
|
"collection": "mode",
|
|
@@ -2154,6 +2480,10 @@
|
|
|
2154
2480
|
},
|
|
2155
2481
|
"org.primer.overrides": {
|
|
2156
2482
|
"dark": "{base.color.neutral.13}"
|
|
2483
|
+
},
|
|
2484
|
+
"org.primer.llm": {
|
|
2485
|
+
"doNotUse": true,
|
|
2486
|
+
"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."
|
|
2157
2487
|
}
|
|
2158
2488
|
},
|
|
2159
2489
|
"key": "{bgColor.white}"
|
|
@@ -2164,7 +2494,7 @@
|
|
|
2164
2494
|
},
|
|
2165
2495
|
"border-accent-emphasis": {
|
|
2166
2496
|
"key": "{border.accent.emphasis}",
|
|
2167
|
-
"$value": "0.
|
|
2497
|
+
"$value": "0.0625rem,1px solid #409eff",
|
|
2168
2498
|
"$type": "border",
|
|
2169
2499
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2170
2500
|
"isSource": true,
|
|
@@ -2183,7 +2513,7 @@
|
|
|
2183
2513
|
},
|
|
2184
2514
|
"border-accent-muted": {
|
|
2185
2515
|
"key": "{border.accent.muted}",
|
|
2186
|
-
"$value": "0.
|
|
2516
|
+
"$value": "0.0625rem,1px solid #5cacff",
|
|
2187
2517
|
"$type": "border",
|
|
2188
2518
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2189
2519
|
"isSource": true,
|
|
@@ -2202,7 +2532,7 @@
|
|
|
2202
2532
|
},
|
|
2203
2533
|
"border-attention-emphasis": {
|
|
2204
2534
|
"key": "{border.attention.emphasis}",
|
|
2205
|
-
"$value": "0.
|
|
2535
|
+
"$value": "0.0625rem,1px solid #e09b13",
|
|
2206
2536
|
"$type": "border",
|
|
2207
2537
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2208
2538
|
"isSource": true,
|
|
@@ -2221,7 +2551,7 @@
|
|
|
2221
2551
|
},
|
|
2222
2552
|
"border-attention-muted": {
|
|
2223
2553
|
"key": "{border.attention.muted}",
|
|
2224
|
-
"$value": "0.
|
|
2554
|
+
"$value": "0.0625rem,1px solid #edaa27",
|
|
2225
2555
|
"$type": "border",
|
|
2226
2556
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2227
2557
|
"isSource": true,
|
|
@@ -2240,7 +2570,7 @@
|
|
|
2240
2570
|
},
|
|
2241
2571
|
"border-closed-emphasis": {
|
|
2242
2572
|
"key": "{border.closed.emphasis}",
|
|
2243
|
-
"$value": "0.
|
|
2573
|
+
"$value": "0.0625rem,1px solid #ff6a69",
|
|
2244
2574
|
"$type": "border",
|
|
2245
2575
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2246
2576
|
"isSource": true,
|
|
@@ -2255,7 +2585,7 @@
|
|
|
2255
2585
|
},
|
|
2256
2586
|
"border-closed-muted": {
|
|
2257
2587
|
"key": "{border.closed.muted}",
|
|
2258
|
-
"$value": "0.
|
|
2588
|
+
"$value": "0.0625rem,1px solid #ff8080",
|
|
2259
2589
|
"$type": "border",
|
|
2260
2590
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2261
2591
|
"isSource": true,
|
|
@@ -2270,7 +2600,7 @@
|
|
|
2270
2600
|
},
|
|
2271
2601
|
"border-danger-emphasis": {
|
|
2272
2602
|
"key": "{border.danger.emphasis}",
|
|
2273
|
-
"$value": "0.
|
|
2603
|
+
"$value": "0.0625rem,1px solid #ff6a69",
|
|
2274
2604
|
"$type": "border",
|
|
2275
2605
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2276
2606
|
"isSource": true,
|
|
@@ -2289,7 +2619,7 @@
|
|
|
2289
2619
|
},
|
|
2290
2620
|
"border-danger-muted": {
|
|
2291
2621
|
"key": "{border.danger.muted}",
|
|
2292
|
-
"$value": "0.
|
|
2622
|
+
"$value": "0.0625rem,1px solid #ff8080",
|
|
2293
2623
|
"$type": "border",
|
|
2294
2624
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2295
2625
|
"isSource": true,
|
|
@@ -2308,7 +2638,7 @@
|
|
|
2308
2638
|
},
|
|
2309
2639
|
"border-default": {
|
|
2310
2640
|
"key": "{border.default}",
|
|
2311
|
-
"$value": "0.
|
|
2641
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2312
2642
|
"$type": "border",
|
|
2313
2643
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2314
2644
|
"isSource": true,
|
|
@@ -2327,7 +2657,7 @@
|
|
|
2327
2657
|
},
|
|
2328
2658
|
"border-disabled": {
|
|
2329
2659
|
"key": "{border.disabled}",
|
|
2330
|
-
"$value": "0.
|
|
2660
|
+
"$value": "0.0625rem,1px solid #656c761a",
|
|
2331
2661
|
"$type": "border",
|
|
2332
2662
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2333
2663
|
"isSource": true,
|
|
@@ -2346,7 +2676,7 @@
|
|
|
2346
2676
|
},
|
|
2347
2677
|
"border-done-emphasis": {
|
|
2348
2678
|
"key": "{border.done.emphasis}",
|
|
2349
|
-
"$value": "0.
|
|
2679
|
+
"$value": "0.0625rem,1px solid #b87fff",
|
|
2350
2680
|
"$type": "border",
|
|
2351
2681
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2352
2682
|
"isSource": true,
|
|
@@ -2365,7 +2695,7 @@
|
|
|
2365
2695
|
},
|
|
2366
2696
|
"border-done-muted": {
|
|
2367
2697
|
"key": "{border.done.muted}",
|
|
2368
|
-
"$value": "0.
|
|
2698
|
+
"$value": "0.0625rem,1px solid #bf8fff",
|
|
2369
2699
|
"$type": "border",
|
|
2370
2700
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2371
2701
|
"isSource": true,
|
|
@@ -2384,7 +2714,7 @@
|
|
|
2384
2714
|
},
|
|
2385
2715
|
"border-emphasis": {
|
|
2386
2716
|
"key": "{border.emphasis}",
|
|
2387
|
-
"$value": "0.
|
|
2717
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2388
2718
|
"$type": "border",
|
|
2389
2719
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2390
2720
|
"isSource": true,
|
|
@@ -2403,7 +2733,7 @@
|
|
|
2403
2733
|
},
|
|
2404
2734
|
"border-muted": {
|
|
2405
2735
|
"key": "{border.muted}",
|
|
2406
|
-
"$value": "0.
|
|
2736
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2407
2737
|
"$type": "border",
|
|
2408
2738
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2409
2739
|
"isSource": true,
|
|
@@ -2422,7 +2752,7 @@
|
|
|
2422
2752
|
},
|
|
2423
2753
|
"border-neutral-emphasis": {
|
|
2424
2754
|
"key": "{border.neutral.emphasis}",
|
|
2425
|
-
"$value": "0.
|
|
2755
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2426
2756
|
"$type": "border",
|
|
2427
2757
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2428
2758
|
"isSource": true,
|
|
@@ -2441,7 +2771,7 @@
|
|
|
2441
2771
|
},
|
|
2442
2772
|
"border-neutral-muted": {
|
|
2443
2773
|
"key": "{border.neutral.muted}",
|
|
2444
|
-
"$value": "0.
|
|
2774
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2445
2775
|
"$type": "border",
|
|
2446
2776
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2447
2777
|
"isSource": true,
|
|
@@ -2460,7 +2790,7 @@
|
|
|
2460
2790
|
},
|
|
2461
2791
|
"border-open-emphasis": {
|
|
2462
2792
|
"key": "{border.open.emphasis}",
|
|
2463
|
-
"$value": "0.
|
|
2793
|
+
"$value": "0.0625rem,1px solid #09b43a",
|
|
2464
2794
|
"$type": "border",
|
|
2465
2795
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2466
2796
|
"isSource": true,
|
|
@@ -2475,7 +2805,7 @@
|
|
|
2475
2805
|
},
|
|
2476
2806
|
"border-open-muted": {
|
|
2477
2807
|
"key": "{border.open.muted}",
|
|
2478
|
-
"$value": "0.
|
|
2808
|
+
"$value": "0.0625rem,1px solid #0ac740",
|
|
2479
2809
|
"$type": "border",
|
|
2480
2810
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2481
2811
|
"isSource": true,
|
|
@@ -2490,7 +2820,7 @@
|
|
|
2490
2820
|
},
|
|
2491
2821
|
"border-severe-emphasis": {
|
|
2492
2822
|
"key": "{border.severe.emphasis}",
|
|
2493
|
-
"$value": "0.
|
|
2823
|
+
"$value": "0.0625rem,1px solid #e7811d",
|
|
2494
2824
|
"$type": "border",
|
|
2495
2825
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2496
2826
|
"isSource": true,
|
|
@@ -2509,7 +2839,7 @@
|
|
|
2509
2839
|
},
|
|
2510
2840
|
"border-severe-muted": {
|
|
2511
2841
|
"key": "{border.severe.muted}",
|
|
2512
|
-
"$value": "0.
|
|
2842
|
+
"$value": "0.0625rem,1px solid #f48b25",
|
|
2513
2843
|
"$type": "border",
|
|
2514
2844
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2515
2845
|
"isSource": true,
|
|
@@ -2528,7 +2858,7 @@
|
|
|
2528
2858
|
},
|
|
2529
2859
|
"border-sponsors-emphasis": {
|
|
2530
2860
|
"key": "{border.sponsors.emphasis}",
|
|
2531
|
-
"$value": "0.
|
|
2861
|
+
"$value": "0.0625rem,1px solid #ef6eb1",
|
|
2532
2862
|
"$type": "border",
|
|
2533
2863
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2534
2864
|
"isSource": true,
|
|
@@ -2547,7 +2877,7 @@
|
|
|
2547
2877
|
},
|
|
2548
2878
|
"border-sponsors-muted": {
|
|
2549
2879
|
"key": "{border.sponsors.muted}",
|
|
2550
|
-
"$value": "0.
|
|
2880
|
+
"$value": "0.0625rem,1px solid #f87cbd",
|
|
2551
2881
|
"$type": "border",
|
|
2552
2882
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2553
2883
|
"isSource": true,
|
|
@@ -2566,7 +2896,7 @@
|
|
|
2566
2896
|
},
|
|
2567
2897
|
"border-success-emphasis": {
|
|
2568
2898
|
"key": "{border.success.emphasis}",
|
|
2569
|
-
"$value": "0.
|
|
2899
|
+
"$value": "0.0625rem,1px solid #09b43a",
|
|
2570
2900
|
"$type": "border",
|
|
2571
2901
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2572
2902
|
"isSource": true,
|
|
@@ -2585,7 +2915,7 @@
|
|
|
2585
2915
|
},
|
|
2586
2916
|
"border-success-muted": {
|
|
2587
2917
|
"key": "{border.success.muted}",
|
|
2588
|
-
"$value": "0.
|
|
2918
|
+
"$value": "0.0625rem,1px solid #0ac740",
|
|
2589
2919
|
"$type": "border",
|
|
2590
2920
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2591
2921
|
"isSource": true,
|
|
@@ -2604,7 +2934,7 @@
|
|
|
2604
2934
|
},
|
|
2605
2935
|
"border-transparent": {
|
|
2606
2936
|
"key": "{border.transparent}",
|
|
2607
|
-
"$value": "0.
|
|
2937
|
+
"$value": "0.0625rem,1px solid #00000000",
|
|
2608
2938
|
"$type": "border",
|
|
2609
2939
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2610
2940
|
"isSource": true,
|
|
@@ -2623,7 +2953,7 @@
|
|
|
2623
2953
|
},
|
|
2624
2954
|
"border-upsell-emphasis": {
|
|
2625
2955
|
"key": "{border.upsell.emphasis}",
|
|
2626
|
-
"$value": "0.
|
|
2956
|
+
"$value": "0.0625rem,1px solid #b87fff",
|
|
2627
2957
|
"$type": "border",
|
|
2628
2958
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2629
2959
|
"isSource": true,
|
|
@@ -2642,7 +2972,7 @@
|
|
|
2642
2972
|
},
|
|
2643
2973
|
"border-upsell-muted": {
|
|
2644
2974
|
"key": "{border.upsell.muted}",
|
|
2645
|
-
"$value": "0.
|
|
2975
|
+
"$value": "0.0625rem,1px solid #bf8fff",
|
|
2646
2976
|
"$type": "border",
|
|
2647
2977
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2648
2978
|
"isSource": true,
|
|
@@ -2663,6 +2993,7 @@
|
|
|
2663
2993
|
"key": "{borderColor.accent.emphasis}",
|
|
2664
2994
|
"$value": "#409eff",
|
|
2665
2995
|
"$type": "color",
|
|
2996
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2666
2997
|
"$extensions": {
|
|
2667
2998
|
"org.primer.figma": {
|
|
2668
2999
|
"collection": "mode",
|
|
@@ -2674,6 +3005,10 @@
|
|
|
2674
3005
|
},
|
|
2675
3006
|
"org.primer.overrides": {
|
|
2676
3007
|
"dark-dimmed-high-contrast": "#91cbff"
|
|
3008
|
+
},
|
|
3009
|
+
"org.primer.llm": {
|
|
3010
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3011
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2677
3012
|
}
|
|
2678
3013
|
},
|
|
2679
3014
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2681,6 +3016,7 @@
|
|
|
2681
3016
|
"original": {
|
|
2682
3017
|
"$value": "{base.color.blue.5}",
|
|
2683
3018
|
"$type": "color",
|
|
3019
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2684
3020
|
"$extensions": {
|
|
2685
3021
|
"org.primer.figma": {
|
|
2686
3022
|
"collection": "mode",
|
|
@@ -2692,6 +3028,10 @@
|
|
|
2692
3028
|
},
|
|
2693
3029
|
"org.primer.overrides": {
|
|
2694
3030
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3031
|
+
},
|
|
3032
|
+
"org.primer.llm": {
|
|
3033
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3034
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2695
3035
|
}
|
|
2696
3036
|
},
|
|
2697
3037
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2704,6 +3044,7 @@
|
|
|
2704
3044
|
"key": "{borderColor.accent.muted}",
|
|
2705
3045
|
"$value": "#5cacff",
|
|
2706
3046
|
"$type": "color",
|
|
3047
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2707
3048
|
"$extensions": {
|
|
2708
3049
|
"org.primer.figma": {
|
|
2709
3050
|
"collection": "mode",
|
|
@@ -2764,6 +3105,10 @@
|
|
|
2764
3105
|
"isSource": true,
|
|
2765
3106
|
"$type": "color"
|
|
2766
3107
|
}
|
|
3108
|
+
},
|
|
3109
|
+
"org.primer.llm": {
|
|
3110
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3111
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2767
3112
|
}
|
|
2768
3113
|
},
|
|
2769
3114
|
"alpha": 1,
|
|
@@ -2772,6 +3117,7 @@
|
|
|
2772
3117
|
"original": {
|
|
2773
3118
|
"$value": "{base.color.blue.4}",
|
|
2774
3119
|
"$type": "color",
|
|
3120
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2775
3121
|
"$extensions": {
|
|
2776
3122
|
"org.primer.figma": {
|
|
2777
3123
|
"collection": "mode",
|
|
@@ -2832,6 +3178,10 @@
|
|
|
2832
3178
|
"isSource": true,
|
|
2833
3179
|
"$type": "color"
|
|
2834
3180
|
}
|
|
3181
|
+
},
|
|
3182
|
+
"org.primer.llm": {
|
|
3183
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3184
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2835
3185
|
}
|
|
2836
3186
|
},
|
|
2837
3187
|
"alpha": 1,
|
|
@@ -2845,6 +3195,7 @@
|
|
|
2845
3195
|
"key": "{borderColor.attention.emphasis}",
|
|
2846
3196
|
"$value": "#e09b13",
|
|
2847
3197
|
"$type": "color",
|
|
3198
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2848
3199
|
"$extensions": {
|
|
2849
3200
|
"org.primer.figma": {
|
|
2850
3201
|
"collection": "mode",
|
|
@@ -2856,6 +3207,10 @@
|
|
|
2856
3207
|
},
|
|
2857
3208
|
"org.primer.overrides": {
|
|
2858
3209
|
"dark-dimmed-high-contrast": "#f7c843"
|
|
3210
|
+
},
|
|
3211
|
+
"org.primer.llm": {
|
|
3212
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3213
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2859
3214
|
}
|
|
2860
3215
|
},
|
|
2861
3216
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2863,6 +3218,7 @@
|
|
|
2863
3218
|
"original": {
|
|
2864
3219
|
"$value": "{base.color.yellow.5}",
|
|
2865
3220
|
"$type": "color",
|
|
3221
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2866
3222
|
"$extensions": {
|
|
2867
3223
|
"org.primer.figma": {
|
|
2868
3224
|
"collection": "mode",
|
|
@@ -2874,6 +3230,10 @@
|
|
|
2874
3230
|
},
|
|
2875
3231
|
"org.primer.overrides": {
|
|
2876
3232
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3233
|
+
},
|
|
3234
|
+
"org.primer.llm": {
|
|
3235
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3236
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2877
3237
|
}
|
|
2878
3238
|
},
|
|
2879
3239
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2886,6 +3246,7 @@
|
|
|
2886
3246
|
"key": "{borderColor.attention.muted}",
|
|
2887
3247
|
"$value": "#edaa27",
|
|
2888
3248
|
"$type": "color",
|
|
3249
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2889
3250
|
"$extensions": {
|
|
2890
3251
|
"org.primer.figma": {
|
|
2891
3252
|
"collection": "mode",
|
|
@@ -2946,6 +3307,10 @@
|
|
|
2946
3307
|
"isSource": true,
|
|
2947
3308
|
"$type": "color"
|
|
2948
3309
|
}
|
|
3310
|
+
},
|
|
3311
|
+
"org.primer.llm": {
|
|
3312
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3313
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2949
3314
|
}
|
|
2950
3315
|
},
|
|
2951
3316
|
"alpha": 1,
|
|
@@ -2954,6 +3319,7 @@
|
|
|
2954
3319
|
"original": {
|
|
2955
3320
|
"$value": "{base.color.yellow.4}",
|
|
2956
3321
|
"$type": "color",
|
|
3322
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2957
3323
|
"$extensions": {
|
|
2958
3324
|
"org.primer.figma": {
|
|
2959
3325
|
"collection": "mode",
|
|
@@ -3014,6 +3380,10 @@
|
|
|
3014
3380
|
"isSource": true,
|
|
3015
3381
|
"$type": "color"
|
|
3016
3382
|
}
|
|
3383
|
+
},
|
|
3384
|
+
"org.primer.llm": {
|
|
3385
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3386
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3017
3387
|
}
|
|
3018
3388
|
},
|
|
3019
3389
|
"alpha": 1,
|
|
@@ -3027,6 +3397,7 @@
|
|
|
3027
3397
|
"key": "{borderColor.closed.emphasis}",
|
|
3028
3398
|
"$value": "#ff6a69",
|
|
3029
3399
|
"$type": "color",
|
|
3400
|
+
"$description": "Strong border for closed state badges",
|
|
3030
3401
|
"$extensions": {
|
|
3031
3402
|
"org.primer.figma": {
|
|
3032
3403
|
"collection": "mode",
|
|
@@ -3045,6 +3416,10 @@
|
|
|
3045
3416
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
3046
3417
|
"light-tritanopia": "#b7bdc8",
|
|
3047
3418
|
"light-tritanopia-high-contrast": "#b7bdc8"
|
|
3419
|
+
},
|
|
3420
|
+
"org.primer.llm": {
|
|
3421
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3422
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3048
3423
|
}
|
|
3049
3424
|
},
|
|
3050
3425
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3052,6 +3427,7 @@
|
|
|
3052
3427
|
"original": {
|
|
3053
3428
|
"$value": "{borderColor.danger.emphasis}",
|
|
3054
3429
|
"$type": "color",
|
|
3430
|
+
"$description": "Strong border for closed state badges",
|
|
3055
3431
|
"$extensions": {
|
|
3056
3432
|
"org.primer.figma": {
|
|
3057
3433
|
"collection": "mode",
|
|
@@ -3070,6 +3446,10 @@
|
|
|
3070
3446
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3071
3447
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3072
3448
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3449
|
+
},
|
|
3450
|
+
"org.primer.llm": {
|
|
3451
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3452
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3073
3453
|
}
|
|
3074
3454
|
},
|
|
3075
3455
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3082,6 +3462,7 @@
|
|
|
3082
3462
|
"key": "{borderColor.closed.muted}",
|
|
3083
3463
|
"$value": "#ff8080",
|
|
3084
3464
|
"$type": "color",
|
|
3465
|
+
"$description": "Subtle border for closed state indicators",
|
|
3085
3466
|
"$extensions": {
|
|
3086
3467
|
"org.primer.figma": {
|
|
3087
3468
|
"collection": "mode",
|
|
@@ -3148,6 +3529,10 @@
|
|
|
3148
3529
|
"isSource": true,
|
|
3149
3530
|
"$type": "color"
|
|
3150
3531
|
}
|
|
3532
|
+
},
|
|
3533
|
+
"org.primer.llm": {
|
|
3534
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3535
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3151
3536
|
}
|
|
3152
3537
|
},
|
|
3153
3538
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3155,6 +3540,7 @@
|
|
|
3155
3540
|
"original": {
|
|
3156
3541
|
"$value": "{borderColor.danger.muted}",
|
|
3157
3542
|
"$type": "color",
|
|
3543
|
+
"$description": "Subtle border for closed state indicators",
|
|
3158
3544
|
"$extensions": {
|
|
3159
3545
|
"org.primer.figma": {
|
|
3160
3546
|
"collection": "mode",
|
|
@@ -3221,6 +3607,10 @@
|
|
|
3221
3607
|
"isSource": true,
|
|
3222
3608
|
"$type": "color"
|
|
3223
3609
|
}
|
|
3610
|
+
},
|
|
3611
|
+
"org.primer.llm": {
|
|
3612
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3613
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3224
3614
|
}
|
|
3225
3615
|
},
|
|
3226
3616
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3233,6 +3623,7 @@
|
|
|
3233
3623
|
"key": "{borderColor.danger.emphasis}",
|
|
3234
3624
|
"$value": "#ff6a69",
|
|
3235
3625
|
"$type": "color",
|
|
3626
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3236
3627
|
"$extensions": {
|
|
3237
3628
|
"org.primer.figma": {
|
|
3238
3629
|
"collection": "mode",
|
|
@@ -3268,6 +3659,10 @@
|
|
|
3268
3659
|
"$type": "color"
|
|
3269
3660
|
},
|
|
3270
3661
|
"dark-dimmed-high-contrast": "#ffb1af"
|
|
3662
|
+
},
|
|
3663
|
+
"org.primer.llm": {
|
|
3664
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3665
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3271
3666
|
}
|
|
3272
3667
|
},
|
|
3273
3668
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3275,6 +3670,7 @@
|
|
|
3275
3670
|
"original": {
|
|
3276
3671
|
"$value": "{base.color.red.5}",
|
|
3277
3672
|
"$type": "color",
|
|
3673
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3278
3674
|
"$extensions": {
|
|
3279
3675
|
"org.primer.figma": {
|
|
3280
3676
|
"collection": "mode",
|
|
@@ -3310,6 +3706,10 @@
|
|
|
3310
3706
|
"$type": "color"
|
|
3311
3707
|
},
|
|
3312
3708
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3709
|
+
},
|
|
3710
|
+
"org.primer.llm": {
|
|
3711
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3712
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3313
3713
|
}
|
|
3314
3714
|
},
|
|
3315
3715
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3322,6 +3722,7 @@
|
|
|
3322
3722
|
"key": "{borderColor.danger.muted}",
|
|
3323
3723
|
"$value": "#ff8080",
|
|
3324
3724
|
"$type": "color",
|
|
3725
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3325
3726
|
"$extensions": {
|
|
3326
3727
|
"org.primer.figma": {
|
|
3327
3728
|
"collection": "mode",
|
|
@@ -3395,6 +3796,10 @@
|
|
|
3395
3796
|
"isSource": true,
|
|
3396
3797
|
"$type": "color"
|
|
3397
3798
|
}
|
|
3799
|
+
},
|
|
3800
|
+
"org.primer.llm": {
|
|
3801
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3802
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3398
3803
|
}
|
|
3399
3804
|
},
|
|
3400
3805
|
"alpha": 1,
|
|
@@ -3403,6 +3808,7 @@
|
|
|
3403
3808
|
"original": {
|
|
3404
3809
|
"$value": "{base.color.red.4}",
|
|
3405
3810
|
"$type": "color",
|
|
3811
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3406
3812
|
"$extensions": {
|
|
3407
3813
|
"org.primer.figma": {
|
|
3408
3814
|
"collection": "mode",
|
|
@@ -3476,6 +3882,10 @@
|
|
|
3476
3882
|
"isSource": true,
|
|
3477
3883
|
"$type": "color"
|
|
3478
3884
|
}
|
|
3885
|
+
},
|
|
3886
|
+
"org.primer.llm": {
|
|
3887
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3888
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3479
3889
|
}
|
|
3480
3890
|
},
|
|
3481
3891
|
"alpha": 1,
|
|
@@ -3489,6 +3899,7 @@
|
|
|
3489
3899
|
"key": "{borderColor.default}",
|
|
3490
3900
|
"$value": "#b7bdc8",
|
|
3491
3901
|
"$type": "color",
|
|
3902
|
+
"$description": "Default border color for most UI elements",
|
|
3492
3903
|
"$extensions": {
|
|
3493
3904
|
"org.primer.overrides": {
|
|
3494
3905
|
"dark": "#3d444d",
|
|
@@ -3508,6 +3919,10 @@
|
|
|
3508
3919
|
"codeSyntax": {
|
|
3509
3920
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3510
3921
|
}
|
|
3922
|
+
},
|
|
3923
|
+
"org.primer.llm": {
|
|
3924
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3925
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3511
3926
|
}
|
|
3512
3927
|
},
|
|
3513
3928
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3515,6 +3930,7 @@
|
|
|
3515
3930
|
"original": {
|
|
3516
3931
|
"$value": "{base.color.neutral.10}",
|
|
3517
3932
|
"$type": "color",
|
|
3933
|
+
"$description": "Default border color for most UI elements",
|
|
3518
3934
|
"$extensions": {
|
|
3519
3935
|
"org.primer.overrides": {
|
|
3520
3936
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3534,6 +3950,10 @@
|
|
|
3534
3950
|
"codeSyntax": {
|
|
3535
3951
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3536
3952
|
}
|
|
3953
|
+
},
|
|
3954
|
+
"org.primer.llm": {
|
|
3955
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3956
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3537
3957
|
}
|
|
3538
3958
|
},
|
|
3539
3959
|
"key": "{borderColor.default}"
|
|
@@ -3546,6 +3966,7 @@
|
|
|
3546
3966
|
"key": "{borderColor.disabled}",
|
|
3547
3967
|
"$value": "#656c761a",
|
|
3548
3968
|
"$type": "color",
|
|
3969
|
+
"$description": "Border color for disabled interactive elements",
|
|
3549
3970
|
"$extensions": {
|
|
3550
3971
|
"org.primer.figma": {
|
|
3551
3972
|
"collection": "mode",
|
|
@@ -3588,6 +4009,10 @@
|
|
|
3588
4009
|
"isSource": true,
|
|
3589
4010
|
"$type": "color"
|
|
3590
4011
|
}
|
|
4012
|
+
},
|
|
4013
|
+
"org.primer.llm": {
|
|
4014
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4015
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3591
4016
|
}
|
|
3592
4017
|
},
|
|
3593
4018
|
"alpha": 0.1,
|
|
@@ -3596,6 +4021,7 @@
|
|
|
3596
4021
|
"original": {
|
|
3597
4022
|
"$value": "{base.color.neutral.8}",
|
|
3598
4023
|
"$type": "color",
|
|
4024
|
+
"$description": "Border color for disabled interactive elements",
|
|
3599
4025
|
"$extensions": {
|
|
3600
4026
|
"org.primer.figma": {
|
|
3601
4027
|
"collection": "mode",
|
|
@@ -3638,6 +4064,10 @@
|
|
|
3638
4064
|
"isSource": true,
|
|
3639
4065
|
"$type": "color"
|
|
3640
4066
|
}
|
|
4067
|
+
},
|
|
4068
|
+
"org.primer.llm": {
|
|
4069
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4070
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3641
4071
|
}
|
|
3642
4072
|
},
|
|
3643
4073
|
"alpha": 0.1,
|
|
@@ -3651,6 +4081,7 @@
|
|
|
3651
4081
|
"key": "{borderColor.done.emphasis}",
|
|
3652
4082
|
"$value": "#b87fff",
|
|
3653
4083
|
"$type": "color",
|
|
4084
|
+
"$description": "Strong border for completed/done state badges",
|
|
3654
4085
|
"$extensions": {
|
|
3655
4086
|
"org.primer.figma": {
|
|
3656
4087
|
"collection": "mode",
|
|
@@ -3662,6 +4093,10 @@
|
|
|
3662
4093
|
},
|
|
3663
4094
|
"org.primer.overrides": {
|
|
3664
4095
|
"dark-dimmed-high-contrast": "#dbb7ff"
|
|
4096
|
+
},
|
|
4097
|
+
"org.primer.llm": {
|
|
4098
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4099
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3665
4100
|
}
|
|
3666
4101
|
},
|
|
3667
4102
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3669,6 +4104,7 @@
|
|
|
3669
4104
|
"original": {
|
|
3670
4105
|
"$value": "{base.color.purple.5}",
|
|
3671
4106
|
"$type": "color",
|
|
4107
|
+
"$description": "Strong border for completed/done state badges",
|
|
3672
4108
|
"$extensions": {
|
|
3673
4109
|
"org.primer.figma": {
|
|
3674
4110
|
"collection": "mode",
|
|
@@ -3680,6 +4116,10 @@
|
|
|
3680
4116
|
},
|
|
3681
4117
|
"org.primer.overrides": {
|
|
3682
4118
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4119
|
+
},
|
|
4120
|
+
"org.primer.llm": {
|
|
4121
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4122
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3683
4123
|
}
|
|
3684
4124
|
},
|
|
3685
4125
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3692,6 +4132,7 @@
|
|
|
3692
4132
|
"key": "{borderColor.done.muted}",
|
|
3693
4133
|
"$value": "#bf8fff",
|
|
3694
4134
|
"$type": "color",
|
|
4135
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3695
4136
|
"$extensions": {
|
|
3696
4137
|
"org.primer.figma": {
|
|
3697
4138
|
"collection": "mode",
|
|
@@ -3752,6 +4193,10 @@
|
|
|
3752
4193
|
"isSource": true,
|
|
3753
4194
|
"$type": "color"
|
|
3754
4195
|
}
|
|
4196
|
+
},
|
|
4197
|
+
"org.primer.llm": {
|
|
4198
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4199
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3755
4200
|
}
|
|
3756
4201
|
},
|
|
3757
4202
|
"alpha": 1,
|
|
@@ -3760,6 +4205,7 @@
|
|
|
3760
4205
|
"original": {
|
|
3761
4206
|
"$value": "{base.color.purple.4}",
|
|
3762
4207
|
"$type": "color",
|
|
4208
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3763
4209
|
"$extensions": {
|
|
3764
4210
|
"org.primer.figma": {
|
|
3765
4211
|
"collection": "mode",
|
|
@@ -3820,6 +4266,10 @@
|
|
|
3820
4266
|
"isSource": true,
|
|
3821
4267
|
"$type": "color"
|
|
3822
4268
|
}
|
|
4269
|
+
},
|
|
4270
|
+
"org.primer.llm": {
|
|
4271
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4272
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3823
4273
|
}
|
|
3824
4274
|
},
|
|
3825
4275
|
"alpha": 1,
|
|
@@ -3833,6 +4283,7 @@
|
|
|
3833
4283
|
"key": "{borderColor.draft.emphasis}",
|
|
3834
4284
|
"$value": "#b7bdc8",
|
|
3835
4285
|
"$type": "color",
|
|
4286
|
+
"$description": "Strong border for draft state badges",
|
|
3836
4287
|
"$extensions": {
|
|
3837
4288
|
"org.primer.figma": {
|
|
3838
4289
|
"collection": "mode",
|
|
@@ -3841,6 +4292,10 @@
|
|
|
3841
4292
|
"codeSyntax": {
|
|
3842
4293
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3843
4294
|
}
|
|
4295
|
+
},
|
|
4296
|
+
"org.primer.llm": {
|
|
4297
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4298
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3844
4299
|
}
|
|
3845
4300
|
},
|
|
3846
4301
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3848,6 +4303,7 @@
|
|
|
3848
4303
|
"original": {
|
|
3849
4304
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3850
4305
|
"$type": "color",
|
|
4306
|
+
"$description": "Strong border for draft state badges",
|
|
3851
4307
|
"$extensions": {
|
|
3852
4308
|
"org.primer.figma": {
|
|
3853
4309
|
"collection": "mode",
|
|
@@ -3856,6 +4312,10 @@
|
|
|
3856
4312
|
"codeSyntax": {
|
|
3857
4313
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3858
4314
|
}
|
|
4315
|
+
},
|
|
4316
|
+
"org.primer.llm": {
|
|
4317
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4318
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3859
4319
|
}
|
|
3860
4320
|
},
|
|
3861
4321
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3868,6 +4328,7 @@
|
|
|
3868
4328
|
"key": "{borderColor.draft.muted}",
|
|
3869
4329
|
"$value": "#b7bdc8",
|
|
3870
4330
|
"$type": "color",
|
|
4331
|
+
"$description": "Subtle border for draft state indicators",
|
|
3871
4332
|
"$extensions": {
|
|
3872
4333
|
"org.primer.figma": {
|
|
3873
4334
|
"collection": "mode",
|
|
@@ -3934,6 +4395,10 @@
|
|
|
3934
4395
|
"isSource": true,
|
|
3935
4396
|
"$type": "color"
|
|
3936
4397
|
}
|
|
4398
|
+
},
|
|
4399
|
+
"org.primer.llm": {
|
|
4400
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4401
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3937
4402
|
}
|
|
3938
4403
|
},
|
|
3939
4404
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3941,6 +4406,7 @@
|
|
|
3941
4406
|
"original": {
|
|
3942
4407
|
"$value": "{borderColor.neutral.muted}",
|
|
3943
4408
|
"$type": "color",
|
|
4409
|
+
"$description": "Subtle border for draft state indicators",
|
|
3944
4410
|
"$extensions": {
|
|
3945
4411
|
"org.primer.figma": {
|
|
3946
4412
|
"collection": "mode",
|
|
@@ -4007,6 +4473,10 @@
|
|
|
4007
4473
|
"isSource": true,
|
|
4008
4474
|
"$type": "color"
|
|
4009
4475
|
}
|
|
4476
|
+
},
|
|
4477
|
+
"org.primer.llm": {
|
|
4478
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4479
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4010
4480
|
}
|
|
4011
4481
|
},
|
|
4012
4482
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4019,6 +4489,7 @@
|
|
|
4019
4489
|
"key": "{borderColor.emphasis}",
|
|
4020
4490
|
"$value": "#b7bdc8",
|
|
4021
4491
|
"$type": "color",
|
|
4492
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4022
4493
|
"$extensions": {
|
|
4023
4494
|
"org.primer.figma": {
|
|
4024
4495
|
"collection": "mode",
|
|
@@ -4033,6 +4504,10 @@
|
|
|
4033
4504
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
4034
4505
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
4035
4506
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
4507
|
+
},
|
|
4508
|
+
"org.primer.llm": {
|
|
4509
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4510
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4036
4511
|
}
|
|
4037
4512
|
},
|
|
4038
4513
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4040,6 +4515,7 @@
|
|
|
4040
4515
|
"original": {
|
|
4041
4516
|
"$value": "{borderColor.default}",
|
|
4042
4517
|
"$type": "color",
|
|
4518
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4043
4519
|
"$extensions": {
|
|
4044
4520
|
"org.primer.figma": {
|
|
4045
4521
|
"collection": "mode",
|
|
@@ -4054,6 +4530,10 @@
|
|
|
4054
4530
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4055
4531
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4056
4532
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4533
|
+
},
|
|
4534
|
+
"org.primer.llm": {
|
|
4535
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4536
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4057
4537
|
}
|
|
4058
4538
|
},
|
|
4059
4539
|
"key": "{borderColor.emphasis}"
|
|
@@ -4066,6 +4546,7 @@
|
|
|
4066
4546
|
"key": "{borderColor.muted}",
|
|
4067
4547
|
"$value": "#b7bdc8",
|
|
4068
4548
|
"$type": "color",
|
|
4549
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4069
4550
|
"$extensions": {
|
|
4070
4551
|
"org.primer.figma": {
|
|
4071
4552
|
"collection": "mode",
|
|
@@ -4132,6 +4613,10 @@
|
|
|
4132
4613
|
"isSource": true,
|
|
4133
4614
|
"$type": "color"
|
|
4134
4615
|
}
|
|
4616
|
+
},
|
|
4617
|
+
"org.primer.llm": {
|
|
4618
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4619
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4135
4620
|
}
|
|
4136
4621
|
},
|
|
4137
4622
|
"alpha": 1,
|
|
@@ -4140,6 +4625,7 @@
|
|
|
4140
4625
|
"original": {
|
|
4141
4626
|
"$value": "{borderColor.default}",
|
|
4142
4627
|
"$type": "color",
|
|
4628
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4143
4629
|
"$extensions": {
|
|
4144
4630
|
"org.primer.figma": {
|
|
4145
4631
|
"collection": "mode",
|
|
@@ -4206,6 +4692,10 @@
|
|
|
4206
4692
|
"isSource": true,
|
|
4207
4693
|
"$type": "color"
|
|
4208
4694
|
}
|
|
4695
|
+
},
|
|
4696
|
+
"org.primer.llm": {
|
|
4697
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4698
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4209
4699
|
}
|
|
4210
4700
|
},
|
|
4211
4701
|
"alpha": 1,
|
|
@@ -4219,6 +4709,7 @@
|
|
|
4219
4709
|
"key": "{borderColor.neutral.emphasis}",
|
|
4220
4710
|
"$value": "#b7bdc8",
|
|
4221
4711
|
"$type": "color",
|
|
4712
|
+
"$description": "Strong neutral semantic border",
|
|
4222
4713
|
"$extensions": {
|
|
4223
4714
|
"org.primer.figma": {
|
|
4224
4715
|
"collection": "mode",
|
|
@@ -4227,6 +4718,10 @@
|
|
|
4227
4718
|
},
|
|
4228
4719
|
"org.primer.overrides": {
|
|
4229
4720
|
"dark": "#b7bdc8"
|
|
4721
|
+
},
|
|
4722
|
+
"org.primer.llm": {
|
|
4723
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4724
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4230
4725
|
}
|
|
4231
4726
|
},
|
|
4232
4727
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4234,6 +4729,7 @@
|
|
|
4234
4729
|
"original": {
|
|
4235
4730
|
"$value": "{borderColor.emphasis}",
|
|
4236
4731
|
"$type": "color",
|
|
4732
|
+
"$description": "Strong neutral semantic border",
|
|
4237
4733
|
"$extensions": {
|
|
4238
4734
|
"org.primer.figma": {
|
|
4239
4735
|
"collection": "mode",
|
|
@@ -4242,6 +4738,10 @@
|
|
|
4242
4738
|
},
|
|
4243
4739
|
"org.primer.overrides": {
|
|
4244
4740
|
"dark": "{borderColor.emphasis}"
|
|
4741
|
+
},
|
|
4742
|
+
"org.primer.llm": {
|
|
4743
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4744
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4245
4745
|
}
|
|
4246
4746
|
},
|
|
4247
4747
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4254,6 +4754,7 @@
|
|
|
4254
4754
|
"key": "{borderColor.neutral.muted}",
|
|
4255
4755
|
"$value": "#b7bdc8",
|
|
4256
4756
|
"$type": "color",
|
|
4757
|
+
"$description": "Subtle neutral semantic border",
|
|
4257
4758
|
"$extensions": {
|
|
4258
4759
|
"org.primer.figma": {
|
|
4259
4760
|
"collection": "mode",
|
|
@@ -4275,6 +4776,10 @@
|
|
|
4275
4776
|
"isSource": true,
|
|
4276
4777
|
"$type": "color"
|
|
4277
4778
|
}
|
|
4779
|
+
},
|
|
4780
|
+
"org.primer.llm": {
|
|
4781
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4782
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4278
4783
|
}
|
|
4279
4784
|
},
|
|
4280
4785
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4282,6 +4787,7 @@
|
|
|
4282
4787
|
"original": {
|
|
4283
4788
|
"$value": "{borderColor.muted}",
|
|
4284
4789
|
"$type": "color",
|
|
4790
|
+
"$description": "Subtle neutral semantic border",
|
|
4285
4791
|
"$extensions": {
|
|
4286
4792
|
"org.primer.figma": {
|
|
4287
4793
|
"collection": "mode",
|
|
@@ -4303,6 +4809,10 @@
|
|
|
4303
4809
|
"isSource": true,
|
|
4304
4810
|
"$type": "color"
|
|
4305
4811
|
}
|
|
4812
|
+
},
|
|
4813
|
+
"org.primer.llm": {
|
|
4814
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4815
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4306
4816
|
}
|
|
4307
4817
|
},
|
|
4308
4818
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4315,6 +4825,7 @@
|
|
|
4315
4825
|
"key": "{borderColor.open.emphasis}",
|
|
4316
4826
|
"$value": "#09b43a",
|
|
4317
4827
|
"$type": "color",
|
|
4828
|
+
"$description": "Strong border for open state badges",
|
|
4318
4829
|
"$extensions": {
|
|
4319
4830
|
"org.primer.figma": {
|
|
4320
4831
|
"collection": "mode",
|
|
@@ -4333,6 +4844,10 @@
|
|
|
4333
4844
|
"dark-protanopia-deuteranopia-high-contrast": "#e7811d",
|
|
4334
4845
|
"light-protanopia-deuteranopia": "#e7811d",
|
|
4335
4846
|
"light-protanopia-deuteranopia-high-contrast": "#e7811d"
|
|
4847
|
+
},
|
|
4848
|
+
"org.primer.llm": {
|
|
4849
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4850
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4336
4851
|
}
|
|
4337
4852
|
},
|
|
4338
4853
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4340,6 +4855,7 @@
|
|
|
4340
4855
|
"original": {
|
|
4341
4856
|
"$value": "{borderColor.success.emphasis}",
|
|
4342
4857
|
"$type": "color",
|
|
4858
|
+
"$description": "Strong border for open state badges",
|
|
4343
4859
|
"$extensions": {
|
|
4344
4860
|
"org.primer.figma": {
|
|
4345
4861
|
"collection": "mode",
|
|
@@ -4358,6 +4874,10 @@
|
|
|
4358
4874
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4359
4875
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4360
4876
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4877
|
+
},
|
|
4878
|
+
"org.primer.llm": {
|
|
4879
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4880
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4361
4881
|
}
|
|
4362
4882
|
},
|
|
4363
4883
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4370,6 +4890,7 @@
|
|
|
4370
4890
|
"key": "{borderColor.open.muted}",
|
|
4371
4891
|
"$value": "#0ac740",
|
|
4372
4892
|
"$type": "color",
|
|
4893
|
+
"$description": "Subtle border for open state indicators",
|
|
4373
4894
|
"$extensions": {
|
|
4374
4895
|
"org.primer.figma": {
|
|
4375
4896
|
"collection": "mode",
|
|
@@ -4436,6 +4957,10 @@
|
|
|
4436
4957
|
"isSource": true,
|
|
4437
4958
|
"$type": "color"
|
|
4438
4959
|
}
|
|
4960
|
+
},
|
|
4961
|
+
"org.primer.llm": {
|
|
4962
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4963
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4439
4964
|
}
|
|
4440
4965
|
},
|
|
4441
4966
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4443,6 +4968,7 @@
|
|
|
4443
4968
|
"original": {
|
|
4444
4969
|
"$value": "{borderColor.success.muted}",
|
|
4445
4970
|
"$type": "color",
|
|
4971
|
+
"$description": "Subtle border for open state indicators",
|
|
4446
4972
|
"$extensions": {
|
|
4447
4973
|
"org.primer.figma": {
|
|
4448
4974
|
"collection": "mode",
|
|
@@ -4509,6 +5035,10 @@
|
|
|
4509
5035
|
"isSource": true,
|
|
4510
5036
|
"$type": "color"
|
|
4511
5037
|
}
|
|
5038
|
+
},
|
|
5039
|
+
"org.primer.llm": {
|
|
5040
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5041
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4512
5042
|
}
|
|
4513
5043
|
},
|
|
4514
5044
|
"key": "{borderColor.open.muted}"
|
|
@@ -4521,6 +5051,7 @@
|
|
|
4521
5051
|
"key": "{borderColor.severe.emphasis}",
|
|
4522
5052
|
"$value": "#e7811d",
|
|
4523
5053
|
"$type": "color",
|
|
5054
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4524
5055
|
"$extensions": {
|
|
4525
5056
|
"org.primer.figma": {
|
|
4526
5057
|
"collection": "mode",
|
|
@@ -4535,6 +5066,10 @@
|
|
|
4535
5066
|
"light-tritanopia": "#ff6a69",
|
|
4536
5067
|
"light-tritanopia-high-contrast": "#ff6a69",
|
|
4537
5068
|
"dark-dimmed-high-contrast": "#ffb757"
|
|
5069
|
+
},
|
|
5070
|
+
"org.primer.llm": {
|
|
5071
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5072
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4538
5073
|
}
|
|
4539
5074
|
},
|
|
4540
5075
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4542,6 +5077,7 @@
|
|
|
4542
5077
|
"original": {
|
|
4543
5078
|
"$value": "{base.color.orange.5}",
|
|
4544
5079
|
"$type": "color",
|
|
5080
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4545
5081
|
"$extensions": {
|
|
4546
5082
|
"org.primer.figma": {
|
|
4547
5083
|
"collection": "mode",
|
|
@@ -4556,6 +5092,10 @@
|
|
|
4556
5092
|
"light-tritanopia": "{base.color.red.5}",
|
|
4557
5093
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4558
5094
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5095
|
+
},
|
|
5096
|
+
"org.primer.llm": {
|
|
5097
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5098
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4559
5099
|
}
|
|
4560
5100
|
},
|
|
4561
5101
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4568,6 +5108,7 @@
|
|
|
4568
5108
|
"key": "{borderColor.severe.muted}",
|
|
4569
5109
|
"$value": "#f48b25",
|
|
4570
5110
|
"$type": "color",
|
|
5111
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4571
5112
|
"$extensions": {
|
|
4572
5113
|
"org.primer.figma": {
|
|
4573
5114
|
"collection": "mode",
|
|
@@ -4623,6 +5164,10 @@
|
|
|
4623
5164
|
"isSource": true,
|
|
4624
5165
|
"$type": "color"
|
|
4625
5166
|
}
|
|
5167
|
+
},
|
|
5168
|
+
"org.primer.llm": {
|
|
5169
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5170
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4626
5171
|
}
|
|
4627
5172
|
},
|
|
4628
5173
|
"alpha": 1,
|
|
@@ -4631,6 +5176,7 @@
|
|
|
4631
5176
|
"original": {
|
|
4632
5177
|
"$value": "{base.color.orange.4}",
|
|
4633
5178
|
"$type": "color",
|
|
5179
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4634
5180
|
"$extensions": {
|
|
4635
5181
|
"org.primer.figma": {
|
|
4636
5182
|
"collection": "mode",
|
|
@@ -4686,6 +5232,10 @@
|
|
|
4686
5232
|
"isSource": true,
|
|
4687
5233
|
"$type": "color"
|
|
4688
5234
|
}
|
|
5235
|
+
},
|
|
5236
|
+
"org.primer.llm": {
|
|
5237
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5238
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4689
5239
|
}
|
|
4690
5240
|
},
|
|
4691
5241
|
"alpha": 1,
|
|
@@ -4699,6 +5249,7 @@
|
|
|
4699
5249
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4700
5250
|
"$value": "#ef6eb1",
|
|
4701
5251
|
"$type": "color",
|
|
5252
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4702
5253
|
"$extensions": {
|
|
4703
5254
|
"org.primer.figma": {
|
|
4704
5255
|
"collection": "mode",
|
|
@@ -4710,6 +5261,10 @@
|
|
|
4710
5261
|
},
|
|
4711
5262
|
"org.primer.overrides": {
|
|
4712
5263
|
"dark-dimmed-high-contrast": "#ff8dc7"
|
|
5264
|
+
},
|
|
5265
|
+
"org.primer.llm": {
|
|
5266
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5267
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4713
5268
|
}
|
|
4714
5269
|
},
|
|
4715
5270
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4717,6 +5272,7 @@
|
|
|
4717
5272
|
"original": {
|
|
4718
5273
|
"$value": "{base.color.pink.5}",
|
|
4719
5274
|
"$type": "color",
|
|
5275
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4720
5276
|
"$extensions": {
|
|
4721
5277
|
"org.primer.figma": {
|
|
4722
5278
|
"collection": "mode",
|
|
@@ -4728,6 +5284,10 @@
|
|
|
4728
5284
|
},
|
|
4729
5285
|
"org.primer.overrides": {
|
|
4730
5286
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5287
|
+
},
|
|
5288
|
+
"org.primer.llm": {
|
|
5289
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5290
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4731
5291
|
}
|
|
4732
5292
|
},
|
|
4733
5293
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4740,6 +5300,7 @@
|
|
|
4740
5300
|
"key": "{borderColor.sponsors.muted}",
|
|
4741
5301
|
"$value": "#f87cbd",
|
|
4742
5302
|
"$type": "color",
|
|
5303
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4743
5304
|
"$extensions": {
|
|
4744
5305
|
"org.primer.figma": {
|
|
4745
5306
|
"collection": "mode",
|
|
@@ -4800,6 +5361,10 @@
|
|
|
4800
5361
|
"isSource": true,
|
|
4801
5362
|
"$type": "color"
|
|
4802
5363
|
}
|
|
5364
|
+
},
|
|
5365
|
+
"org.primer.llm": {
|
|
5366
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5367
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4803
5368
|
}
|
|
4804
5369
|
},
|
|
4805
5370
|
"alpha": 1,
|
|
@@ -4808,6 +5373,7 @@
|
|
|
4808
5373
|
"original": {
|
|
4809
5374
|
"$value": "{base.color.pink.4}",
|
|
4810
5375
|
"$type": "color",
|
|
5376
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4811
5377
|
"$extensions": {
|
|
4812
5378
|
"org.primer.figma": {
|
|
4813
5379
|
"collection": "mode",
|
|
@@ -4868,6 +5434,10 @@
|
|
|
4868
5434
|
"isSource": true,
|
|
4869
5435
|
"$type": "color"
|
|
4870
5436
|
}
|
|
5437
|
+
},
|
|
5438
|
+
"org.primer.llm": {
|
|
5439
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5440
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4871
5441
|
}
|
|
4872
5442
|
},
|
|
4873
5443
|
"alpha": 1,
|
|
@@ -4881,6 +5451,7 @@
|
|
|
4881
5451
|
"key": "{borderColor.success.emphasis}",
|
|
4882
5452
|
"$value": "#09b43a",
|
|
4883
5453
|
"$type": "color",
|
|
5454
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4884
5455
|
"$extensions": {
|
|
4885
5456
|
"org.primer.figma": {
|
|
4886
5457
|
"collection": "mode",
|
|
@@ -4900,6 +5471,10 @@
|
|
|
4900
5471
|
"light-protanopia-deuteranopia": "#409eff",
|
|
4901
5472
|
"light-protanopia-deuteranopia-high-contrast": "#409eff",
|
|
4902
5473
|
"dark-dimmed-high-contrast": "#4ae168"
|
|
5474
|
+
},
|
|
5475
|
+
"org.primer.llm": {
|
|
5476
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5477
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4903
5478
|
}
|
|
4904
5479
|
},
|
|
4905
5480
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4907,6 +5482,7 @@
|
|
|
4907
5482
|
"original": {
|
|
4908
5483
|
"$value": "{base.color.green.5}",
|
|
4909
5484
|
"$type": "color",
|
|
5485
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4910
5486
|
"$extensions": {
|
|
4911
5487
|
"org.primer.figma": {
|
|
4912
5488
|
"collection": "mode",
|
|
@@ -4926,6 +5502,10 @@
|
|
|
4926
5502
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4927
5503
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4928
5504
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5505
|
+
},
|
|
5506
|
+
"org.primer.llm": {
|
|
5507
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5508
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4929
5509
|
}
|
|
4930
5510
|
},
|
|
4931
5511
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4938,6 +5518,7 @@
|
|
|
4938
5518
|
"key": "{borderColor.success.muted}",
|
|
4939
5519
|
"$value": "#0ac740",
|
|
4940
5520
|
"$type": "color",
|
|
5521
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4941
5522
|
"$extensions": {
|
|
4942
5523
|
"org.primer.figma": {
|
|
4943
5524
|
"collection": "mode",
|
|
@@ -5025,6 +5606,10 @@
|
|
|
5025
5606
|
"isSource": true,
|
|
5026
5607
|
"$type": "color"
|
|
5027
5608
|
}
|
|
5609
|
+
},
|
|
5610
|
+
"org.primer.llm": {
|
|
5611
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5612
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5028
5613
|
}
|
|
5029
5614
|
},
|
|
5030
5615
|
"alpha": 1,
|
|
@@ -5033,6 +5618,7 @@
|
|
|
5033
5618
|
"original": {
|
|
5034
5619
|
"$value": "{base.color.green.4}",
|
|
5035
5620
|
"$type": "color",
|
|
5621
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5036
5622
|
"$extensions": {
|
|
5037
5623
|
"org.primer.figma": {
|
|
5038
5624
|
"collection": "mode",
|
|
@@ -5120,6 +5706,10 @@
|
|
|
5120
5706
|
"isSource": true,
|
|
5121
5707
|
"$type": "color"
|
|
5122
5708
|
}
|
|
5709
|
+
},
|
|
5710
|
+
"org.primer.llm": {
|
|
5711
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5712
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5123
5713
|
}
|
|
5124
5714
|
},
|
|
5125
5715
|
"alpha": 1,
|
|
@@ -5133,6 +5723,7 @@
|
|
|
5133
5723
|
"key": "{borderColor.translucent}",
|
|
5134
5724
|
"$value": "#9198a1",
|
|
5135
5725
|
"$type": "color",
|
|
5726
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5136
5727
|
"$extensions": {
|
|
5137
5728
|
"org.primer.figma": {
|
|
5138
5729
|
"collection": "mode",
|
|
@@ -5189,6 +5780,10 @@
|
|
|
5189
5780
|
"isSource": true,
|
|
5190
5781
|
"$type": "color"
|
|
5191
5782
|
}
|
|
5783
|
+
},
|
|
5784
|
+
"org.primer.llm": {
|
|
5785
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5786
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5192
5787
|
}
|
|
5193
5788
|
},
|
|
5194
5789
|
"alpha": 1,
|
|
@@ -5197,6 +5792,7 @@
|
|
|
5197
5792
|
"original": {
|
|
5198
5793
|
"$value": "{base.color.neutral.9}",
|
|
5199
5794
|
"$type": "color",
|
|
5795
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5200
5796
|
"$extensions": {
|
|
5201
5797
|
"org.primer.figma": {
|
|
5202
5798
|
"collection": "mode",
|
|
@@ -5253,6 +5849,10 @@
|
|
|
5253
5849
|
"isSource": true,
|
|
5254
5850
|
"$type": "color"
|
|
5255
5851
|
}
|
|
5852
|
+
},
|
|
5853
|
+
"org.primer.llm": {
|
|
5854
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5855
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5256
5856
|
}
|
|
5257
5857
|
},
|
|
5258
5858
|
"alpha": 1,
|
|
@@ -5266,6 +5866,7 @@
|
|
|
5266
5866
|
"key": "{borderColor.transparent}",
|
|
5267
5867
|
"$value": "#00000000",
|
|
5268
5868
|
"$type": "color",
|
|
5869
|
+
"$description": "Fully transparent border",
|
|
5269
5870
|
"$extensions": {
|
|
5270
5871
|
"org.primer.figma": {
|
|
5271
5872
|
"collection": "mode",
|
|
@@ -5278,6 +5879,7 @@
|
|
|
5278
5879
|
"original": {
|
|
5279
5880
|
"$value": "{base.color.transparent}",
|
|
5280
5881
|
"$type": "color",
|
|
5882
|
+
"$description": "Fully transparent border",
|
|
5281
5883
|
"$extensions": {
|
|
5282
5884
|
"org.primer.figma": {
|
|
5283
5885
|
"collection": "mode",
|
|
@@ -5295,6 +5897,7 @@
|
|
|
5295
5897
|
"key": "{borderColor.upsell.emphasis}",
|
|
5296
5898
|
"$value": "#b87fff",
|
|
5297
5899
|
"$type": "color",
|
|
5900
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5298
5901
|
"$extensions": {
|
|
5299
5902
|
"org.primer.figma": {
|
|
5300
5903
|
"collection": "mode",
|
|
@@ -5303,6 +5906,10 @@
|
|
|
5303
5906
|
"codeSyntax": {
|
|
5304
5907
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5305
5908
|
}
|
|
5909
|
+
},
|
|
5910
|
+
"org.primer.llm": {
|
|
5911
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5912
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5306
5913
|
}
|
|
5307
5914
|
},
|
|
5308
5915
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5310,6 +5917,7 @@
|
|
|
5310
5917
|
"original": {
|
|
5311
5918
|
"$value": "{borderColor.done.emphasis}",
|
|
5312
5919
|
"$type": "color",
|
|
5920
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5313
5921
|
"$extensions": {
|
|
5314
5922
|
"org.primer.figma": {
|
|
5315
5923
|
"collection": "mode",
|
|
@@ -5318,6 +5926,10 @@
|
|
|
5318
5926
|
"codeSyntax": {
|
|
5319
5927
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5320
5928
|
}
|
|
5929
|
+
},
|
|
5930
|
+
"org.primer.llm": {
|
|
5931
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5932
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5321
5933
|
}
|
|
5322
5934
|
},
|
|
5323
5935
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5330,6 +5942,7 @@
|
|
|
5330
5942
|
"key": "{borderColor.upsell.muted}",
|
|
5331
5943
|
"$value": "#bf8fff",
|
|
5332
5944
|
"$type": "color",
|
|
5945
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5333
5946
|
"$extensions": {
|
|
5334
5947
|
"org.primer.figma": {
|
|
5335
5948
|
"collection": "mode",
|
|
@@ -5338,6 +5951,10 @@
|
|
|
5338
5951
|
"codeSyntax": {
|
|
5339
5952
|
"web": "var(--borderColor-upsell-muted)"
|
|
5340
5953
|
}
|
|
5954
|
+
},
|
|
5955
|
+
"org.primer.llm": {
|
|
5956
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5957
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5341
5958
|
}
|
|
5342
5959
|
},
|
|
5343
5960
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5345,6 +5962,7 @@
|
|
|
5345
5962
|
"original": {
|
|
5346
5963
|
"$value": "{borderColor.done.muted}",
|
|
5347
5964
|
"$type": "color",
|
|
5965
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5348
5966
|
"$extensions": {
|
|
5349
5967
|
"org.primer.figma": {
|
|
5350
5968
|
"collection": "mode",
|
|
@@ -5353,6 +5971,10 @@
|
|
|
5353
5971
|
"codeSyntax": {
|
|
5354
5972
|
"web": "var(--borderColor-upsell-muted)"
|
|
5355
5973
|
}
|
|
5974
|
+
},
|
|
5975
|
+
"org.primer.llm": {
|
|
5976
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5977
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5356
5978
|
}
|
|
5357
5979
|
},
|
|
5358
5980
|
"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": "#ff9492",
|
|
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.danger}",
|
|
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": "#2bd853",
|
|
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": "{fgColor.success}",
|
|
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": "#fe9a2d",
|
|
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.orange.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": "#2bd853",
|
|
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": "#2BD853",
|
|
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}"
|