@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
|
@@ -310,6 +310,10 @@
|
|
|
310
310
|
"dark-dimmed-high-contrast": "#0d419d",
|
|
311
311
|
"dark-tritanopia-high-contrast": "#051d4d",
|
|
312
312
|
"dark-protanopia-deuteranopia-high-contrast": "#051d4d"
|
|
313
|
+
},
|
|
314
|
+
"org.primer.llm": {
|
|
315
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
316
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
313
317
|
}
|
|
314
318
|
},
|
|
315
319
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -317,6 +321,7 @@
|
|
|
317
321
|
"original": {
|
|
318
322
|
"$value": "{base.color.blue.5}",
|
|
319
323
|
"$type": "color",
|
|
324
|
+
"$description": "Strong accent background for active states and focused states",
|
|
320
325
|
"$extensions": {
|
|
321
326
|
"org.primer.figma": {
|
|
322
327
|
"collection": "mode",
|
|
@@ -332,6 +337,10 @@
|
|
|
332
337
|
"dark-dimmed-high-contrast": "{base.color.blue.7}",
|
|
333
338
|
"dark-tritanopia-high-contrast": "{base.color.blue.9}",
|
|
334
339
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
|
|
340
|
+
},
|
|
341
|
+
"org.primer.llm": {
|
|
342
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
343
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
335
344
|
}
|
|
336
345
|
},
|
|
337
346
|
"key": "{bgColor.accent.emphasis}"
|
|
@@ -340,7 +349,8 @@
|
|
|
340
349
|
"attributes": {},
|
|
341
350
|
"path": ["bgColor", "accent", "emphasis"],
|
|
342
351
|
"value": "#1f6feb",
|
|
343
|
-
"type": "color"
|
|
352
|
+
"type": "color",
|
|
353
|
+
"description": "Strong accent background for active states and focused states"
|
|
344
354
|
},
|
|
345
355
|
"bgColor-accent-muted": {
|
|
346
356
|
"key": "{bgColor.accent.muted}",
|
|
@@ -361,6 +371,10 @@
|
|
|
361
371
|
"isSource": true,
|
|
362
372
|
"$type": "color"
|
|
363
373
|
}
|
|
374
|
+
},
|
|
375
|
+
"org.primer.llm": {
|
|
376
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
377
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
364
378
|
}
|
|
365
379
|
},
|
|
366
380
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -369,6 +383,7 @@
|
|
|
369
383
|
"original": {
|
|
370
384
|
"$value": "{base.color.blue.4}",
|
|
371
385
|
"$type": "color",
|
|
386
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
372
387
|
"$extensions": {
|
|
373
388
|
"org.primer.figma": {
|
|
374
389
|
"collection": "mode",
|
|
@@ -386,6 +401,10 @@
|
|
|
386
401
|
"isSource": true,
|
|
387
402
|
"$type": "color"
|
|
388
403
|
}
|
|
404
|
+
},
|
|
405
|
+
"org.primer.llm": {
|
|
406
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
407
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
389
408
|
}
|
|
390
409
|
},
|
|
391
410
|
"alpha": 0.1,
|
|
@@ -395,7 +414,8 @@
|
|
|
395
414
|
"attributes": {},
|
|
396
415
|
"path": ["bgColor", "accent", "muted"],
|
|
397
416
|
"value": "#388bfd1a",
|
|
398
|
-
"type": "color"
|
|
417
|
+
"type": "color",
|
|
418
|
+
"description": "Subtle accent background for informational or selected elements"
|
|
399
419
|
},
|
|
400
420
|
"bgColor-attention-emphasis": {
|
|
401
421
|
"key": "{bgColor.attention.emphasis}",
|
|
@@ -413,6 +433,10 @@
|
|
|
413
433
|
"dark-dimmed-high-contrast": "#693e00",
|
|
414
434
|
"dark-protanopia-deuteranopia-high-contrast": "#341a00",
|
|
415
435
|
"dark-tritanopia-high-contrast": "#341a00"
|
|
436
|
+
},
|
|
437
|
+
"org.primer.llm": {
|
|
438
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
439
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
416
440
|
}
|
|
417
441
|
},
|
|
418
442
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -420,6 +444,7 @@
|
|
|
420
444
|
"original": {
|
|
421
445
|
"$value": "{base.color.yellow.5}",
|
|
422
446
|
"$type": "color",
|
|
447
|
+
"$description": "Strong attention background for prominent warnings",
|
|
423
448
|
"$extensions": {
|
|
424
449
|
"org.primer.figma": {
|
|
425
450
|
"collection": "mode",
|
|
@@ -434,6 +459,10 @@
|
|
|
434
459
|
"dark-dimmed-high-contrast": "{base.color.yellow.7}",
|
|
435
460
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
|
|
436
461
|
"dark-tritanopia-high-contrast": "{base.color.yellow.9}"
|
|
462
|
+
},
|
|
463
|
+
"org.primer.llm": {
|
|
464
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
465
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
437
466
|
}
|
|
438
467
|
},
|
|
439
468
|
"key": "{bgColor.attention.emphasis}"
|
|
@@ -442,7 +471,8 @@
|
|
|
442
471
|
"attributes": {},
|
|
443
472
|
"path": ["bgColor", "attention", "emphasis"],
|
|
444
473
|
"value": "#9e6a03",
|
|
445
|
-
"type": "color"
|
|
474
|
+
"type": "color",
|
|
475
|
+
"description": "Strong attention background for prominent warnings"
|
|
446
476
|
},
|
|
447
477
|
"bgColor-attention-muted": {
|
|
448
478
|
"key": "{bgColor.attention.muted}",
|
|
@@ -463,6 +493,10 @@
|
|
|
463
493
|
"isSource": true,
|
|
464
494
|
"$type": "color"
|
|
465
495
|
}
|
|
496
|
+
},
|
|
497
|
+
"org.primer.llm": {
|
|
498
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
499
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
466
500
|
}
|
|
467
501
|
},
|
|
468
502
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -471,6 +505,7 @@
|
|
|
471
505
|
"original": {
|
|
472
506
|
"$value": "{base.color.yellow.4}",
|
|
473
507
|
"$type": "color",
|
|
508
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
474
509
|
"$extensions": {
|
|
475
510
|
"org.primer.figma": {
|
|
476
511
|
"collection": "mode",
|
|
@@ -488,6 +523,10 @@
|
|
|
488
523
|
"isSource": true,
|
|
489
524
|
"$type": "color"
|
|
490
525
|
}
|
|
526
|
+
},
|
|
527
|
+
"org.primer.llm": {
|
|
528
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
529
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
491
530
|
}
|
|
492
531
|
},
|
|
493
532
|
"alpha": 0.15,
|
|
@@ -497,7 +536,8 @@
|
|
|
497
536
|
"attributes": {},
|
|
498
537
|
"path": ["bgColor", "attention", "muted"],
|
|
499
538
|
"value": "#bb800926",
|
|
500
|
-
"type": "color"
|
|
539
|
+
"type": "color",
|
|
540
|
+
"description": "Subtle attention background for warnings and caution states"
|
|
501
541
|
},
|
|
502
542
|
"bgColor-black": {
|
|
503
543
|
"key": "{bgColor.black}",
|
|
@@ -509,6 +549,10 @@
|
|
|
509
549
|
},
|
|
510
550
|
"org.primer.overrides": {
|
|
511
551
|
"dark": "#010409"
|
|
552
|
+
},
|
|
553
|
+
"org.primer.llm": {
|
|
554
|
+
"doNotUse": true,
|
|
555
|
+
"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."
|
|
512
556
|
}
|
|
513
557
|
},
|
|
514
558
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -516,6 +560,7 @@
|
|
|
516
560
|
"original": {
|
|
517
561
|
"$value": "{base.color.neutral.0}",
|
|
518
562
|
"$type": "color",
|
|
563
|
+
"$description": "Pure black background",
|
|
519
564
|
"$extensions": {
|
|
520
565
|
"org.primer.figma": {
|
|
521
566
|
"collection": "mode",
|
|
@@ -524,6 +569,10 @@
|
|
|
524
569
|
},
|
|
525
570
|
"org.primer.overrides": {
|
|
526
571
|
"dark": "{base.color.neutral.0}"
|
|
572
|
+
},
|
|
573
|
+
"org.primer.llm": {
|
|
574
|
+
"doNotUse": true,
|
|
575
|
+
"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."
|
|
527
576
|
}
|
|
528
577
|
},
|
|
529
578
|
"key": "{bgColor.black}"
|
|
@@ -532,7 +581,8 @@
|
|
|
532
581
|
"attributes": {},
|
|
533
582
|
"path": ["bgColor", "black"],
|
|
534
583
|
"value": "#010409",
|
|
535
|
-
"type": "color"
|
|
584
|
+
"type": "color",
|
|
585
|
+
"description": "Pure black background"
|
|
536
586
|
},
|
|
537
587
|
"bgColor-closed-emphasis": {
|
|
538
588
|
"key": "{bgColor.closed.emphasis}",
|
|
@@ -554,6 +604,10 @@
|
|
|
554
604
|
"light-protanopia-deuteranopia-high-contrast": "#656c76",
|
|
555
605
|
"dark-protanopia-deuteranopia": "#656c76",
|
|
556
606
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
607
|
+
},
|
|
608
|
+
"org.primer.llm": {
|
|
609
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
610
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
557
611
|
}
|
|
558
612
|
},
|
|
559
613
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -561,6 +615,7 @@
|
|
|
561
615
|
"original": {
|
|
562
616
|
"$value": "{bgColor.danger.emphasis}",
|
|
563
617
|
"$type": "color",
|
|
618
|
+
"$description": "Strong background for closed state badges and labels",
|
|
564
619
|
"$extensions": {
|
|
565
620
|
"org.primer.figma": {
|
|
566
621
|
"collection": "mode",
|
|
@@ -579,6 +634,10 @@
|
|
|
579
634
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
580
635
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
581
636
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
637
|
+
},
|
|
638
|
+
"org.primer.llm": {
|
|
639
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
640
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
582
641
|
}
|
|
583
642
|
},
|
|
584
643
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -587,7 +646,8 @@
|
|
|
587
646
|
"attributes": {},
|
|
588
647
|
"path": ["bgColor", "closed", "emphasis"],
|
|
589
648
|
"value": "#da3633",
|
|
590
|
-
"type": "color"
|
|
649
|
+
"type": "color",
|
|
650
|
+
"description": "Strong background for closed state badges and labels"
|
|
591
651
|
},
|
|
592
652
|
"bgColor-closed-muted": {
|
|
593
653
|
"key": "{bgColor.closed.muted}",
|
|
@@ -626,6 +686,10 @@
|
|
|
626
686
|
"isSource": true,
|
|
627
687
|
"$type": "color"
|
|
628
688
|
}
|
|
689
|
+
},
|
|
690
|
+
"org.primer.llm": {
|
|
691
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
692
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
629
693
|
}
|
|
630
694
|
},
|
|
631
695
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -633,6 +697,7 @@
|
|
|
633
697
|
"original": {
|
|
634
698
|
"$value": "{bgColor.danger.muted}",
|
|
635
699
|
"$type": "color",
|
|
700
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
636
701
|
"$extensions": {
|
|
637
702
|
"org.primer.figma": {
|
|
638
703
|
"collection": "mode",
|
|
@@ -668,6 +733,10 @@
|
|
|
668
733
|
"isSource": true,
|
|
669
734
|
"$type": "color"
|
|
670
735
|
}
|
|
736
|
+
},
|
|
737
|
+
"org.primer.llm": {
|
|
738
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
739
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
671
740
|
}
|
|
672
741
|
},
|
|
673
742
|
"key": "{bgColor.closed.muted}"
|
|
@@ -676,7 +745,8 @@
|
|
|
676
745
|
"attributes": {},
|
|
677
746
|
"path": ["bgColor", "closed", "muted"],
|
|
678
747
|
"value": "#f851491a",
|
|
679
|
-
"type": "color"
|
|
748
|
+
"type": "color",
|
|
749
|
+
"description": "Subtle background for closed state indicators (issues, PRs)"
|
|
680
750
|
},
|
|
681
751
|
"bgColor-danger-emphasis": {
|
|
682
752
|
"key": "{bgColor.danger.emphasis}",
|
|
@@ -697,6 +767,10 @@
|
|
|
697
767
|
"dark-high-contrast": "#490202",
|
|
698
768
|
"dark-dimmed-high-contrast": "#8e1519",
|
|
699
769
|
"dark-tritanopia-high-contrast": "#490202"
|
|
770
|
+
},
|
|
771
|
+
"org.primer.llm": {
|
|
772
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
773
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
700
774
|
}
|
|
701
775
|
},
|
|
702
776
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -704,6 +778,7 @@
|
|
|
704
778
|
"original": {
|
|
705
779
|
"$value": "{base.color.red.5}",
|
|
706
780
|
"$type": "color",
|
|
781
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
707
782
|
"$extensions": {
|
|
708
783
|
"org.primer.figma": {
|
|
709
784
|
"collection": "mode",
|
|
@@ -721,6 +796,10 @@
|
|
|
721
796
|
"dark-high-contrast": "{base.color.red.9}",
|
|
722
797
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
723
798
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
799
|
+
},
|
|
800
|
+
"org.primer.llm": {
|
|
801
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
802
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
724
803
|
}
|
|
725
804
|
},
|
|
726
805
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -729,7 +808,8 @@
|
|
|
729
808
|
"attributes": {},
|
|
730
809
|
"path": ["bgColor", "danger", "emphasis"],
|
|
731
810
|
"value": "#da3633",
|
|
732
|
-
"type": "color"
|
|
811
|
+
"type": "color",
|
|
812
|
+
"description": "Emphasized danger background for critical errors and delete confirmations"
|
|
733
813
|
},
|
|
734
814
|
"bgColor-danger-muted": {
|
|
735
815
|
"key": "{bgColor.danger.muted}",
|
|
@@ -759,6 +839,10 @@
|
|
|
759
839
|
"isSource": true,
|
|
760
840
|
"$type": "color"
|
|
761
841
|
}
|
|
842
|
+
},
|
|
843
|
+
"org.primer.llm": {
|
|
844
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
845
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
762
846
|
}
|
|
763
847
|
},
|
|
764
848
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -767,6 +851,7 @@
|
|
|
767
851
|
"original": {
|
|
768
852
|
"$value": "{base.color.red.4}",
|
|
769
853
|
"$type": "color",
|
|
854
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
770
855
|
"$extensions": {
|
|
771
856
|
"org.primer.figma": {
|
|
772
857
|
"collection": "mode",
|
|
@@ -793,6 +878,10 @@
|
|
|
793
878
|
"isSource": true,
|
|
794
879
|
"$type": "color"
|
|
795
880
|
}
|
|
881
|
+
},
|
|
882
|
+
"org.primer.llm": {
|
|
883
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
884
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
796
885
|
}
|
|
797
886
|
},
|
|
798
887
|
"alpha": 0.1,
|
|
@@ -802,7 +891,8 @@
|
|
|
802
891
|
"attributes": {},
|
|
803
892
|
"path": ["bgColor", "danger", "muted"],
|
|
804
893
|
"value": "#f851491a",
|
|
805
|
-
"type": "color"
|
|
894
|
+
"type": "color",
|
|
895
|
+
"description": "Muted danger background for error states and destructive action contexts"
|
|
806
896
|
},
|
|
807
897
|
"bgColor-default": {
|
|
808
898
|
"key": "{bgColor.default}",
|
|
@@ -822,6 +912,10 @@
|
|
|
822
912
|
"dark-high-contrast": "#010409",
|
|
823
913
|
"dark-tritanopia-high-contrast": "#010409",
|
|
824
914
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
915
|
+
},
|
|
916
|
+
"org.primer.llm": {
|
|
917
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
918
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
825
919
|
}
|
|
826
920
|
},
|
|
827
921
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -829,6 +923,7 @@
|
|
|
829
923
|
"original": {
|
|
830
924
|
"$value": "{base.color.neutral.1}",
|
|
831
925
|
"$type": "color",
|
|
926
|
+
"$description": "Default background color for pages and main content areas",
|
|
832
927
|
"$extensions": {
|
|
833
928
|
"org.primer.figma": {
|
|
834
929
|
"collection": "mode",
|
|
@@ -845,6 +940,10 @@
|
|
|
845
940
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
846
941
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
847
942
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
943
|
+
},
|
|
944
|
+
"org.primer.llm": {
|
|
945
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
946
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
848
947
|
}
|
|
849
948
|
},
|
|
850
949
|
"key": "{bgColor.default}"
|
|
@@ -853,7 +952,8 @@
|
|
|
853
952
|
"attributes": {},
|
|
854
953
|
"path": ["bgColor", "default"],
|
|
855
954
|
"value": "#0d1117",
|
|
856
|
-
"type": "color"
|
|
955
|
+
"type": "color",
|
|
956
|
+
"description": "Default background color for pages and main content areas"
|
|
857
957
|
},
|
|
858
958
|
"bgColor-disabled": {
|
|
859
959
|
"key": "{bgColor.disabled}",
|
|
@@ -873,6 +973,10 @@
|
|
|
873
973
|
"dark-high-contrast": "#262c36",
|
|
874
974
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
875
975
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
976
|
+
},
|
|
977
|
+
"org.primer.llm": {
|
|
978
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
979
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
876
980
|
}
|
|
877
981
|
},
|
|
878
982
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -880,6 +984,7 @@
|
|
|
880
984
|
"original": {
|
|
881
985
|
"$value": "{base.color.neutral.3}",
|
|
882
986
|
"$type": "color",
|
|
987
|
+
"$description": "Background for disabled interactive elements",
|
|
883
988
|
"$extensions": {
|
|
884
989
|
"org.primer.figma": {
|
|
885
990
|
"collection": "mode",
|
|
@@ -896,6 +1001,10 @@
|
|
|
896
1001
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
897
1002
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
898
1003
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1004
|
+
},
|
|
1005
|
+
"org.primer.llm": {
|
|
1006
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1007
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
899
1008
|
}
|
|
900
1009
|
},
|
|
901
1010
|
"key": "{bgColor.disabled}"
|
|
@@ -904,7 +1013,8 @@
|
|
|
904
1013
|
"attributes": {},
|
|
905
1014
|
"path": ["bgColor", "disabled"],
|
|
906
1015
|
"value": "#212830",
|
|
907
|
-
"type": "color"
|
|
1016
|
+
"type": "color",
|
|
1017
|
+
"description": "Background for disabled interactive elements"
|
|
908
1018
|
},
|
|
909
1019
|
"bgColor-done-emphasis": {
|
|
910
1020
|
"key": "{bgColor.done.emphasis}",
|
|
@@ -922,6 +1032,10 @@
|
|
|
922
1032
|
"dark-dimmed-high-contrast": "#553098",
|
|
923
1033
|
"dark-tritanopia-high-contrast": "#271052",
|
|
924
1034
|
"dark-protanopia-deuteranopia-high-contrast": "#271052"
|
|
1035
|
+
},
|
|
1036
|
+
"org.primer.llm": {
|
|
1037
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1038
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
925
1039
|
}
|
|
926
1040
|
},
|
|
927
1041
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -929,6 +1043,7 @@
|
|
|
929
1043
|
"original": {
|
|
930
1044
|
"$value": "{base.color.purple.5}",
|
|
931
1045
|
"$type": "color",
|
|
1046
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
932
1047
|
"$extensions": {
|
|
933
1048
|
"org.primer.figma": {
|
|
934
1049
|
"collection": "mode",
|
|
@@ -943,6 +1058,10 @@
|
|
|
943
1058
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
944
1059
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
945
1060
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1061
|
+
},
|
|
1062
|
+
"org.primer.llm": {
|
|
1063
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1064
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
946
1065
|
}
|
|
947
1066
|
},
|
|
948
1067
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -951,7 +1070,8 @@
|
|
|
951
1070
|
"attributes": {},
|
|
952
1071
|
"path": ["bgColor", "done", "emphasis"],
|
|
953
1072
|
"value": "#8957e5",
|
|
954
|
-
"type": "color"
|
|
1073
|
+
"type": "color",
|
|
1074
|
+
"description": "Strong background for completed/done state badges and labels"
|
|
955
1075
|
},
|
|
956
1076
|
"bgColor-done-muted": {
|
|
957
1077
|
"key": "{bgColor.done.muted}",
|
|
@@ -972,6 +1092,10 @@
|
|
|
972
1092
|
"isSource": true,
|
|
973
1093
|
"$type": "color"
|
|
974
1094
|
}
|
|
1095
|
+
},
|
|
1096
|
+
"org.primer.llm": {
|
|
1097
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1098
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
975
1099
|
}
|
|
976
1100
|
},
|
|
977
1101
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -980,6 +1104,7 @@
|
|
|
980
1104
|
"original": {
|
|
981
1105
|
"$value": "{base.color.purple.4}",
|
|
982
1106
|
"$type": "color",
|
|
1107
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
983
1108
|
"$extensions": {
|
|
984
1109
|
"org.primer.figma": {
|
|
985
1110
|
"collection": "mode",
|
|
@@ -997,6 +1122,10 @@
|
|
|
997
1122
|
"isSource": true,
|
|
998
1123
|
"$type": "color"
|
|
999
1124
|
}
|
|
1125
|
+
},
|
|
1126
|
+
"org.primer.llm": {
|
|
1127
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1128
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1000
1129
|
}
|
|
1001
1130
|
},
|
|
1002
1131
|
"alpha": 0.15,
|
|
@@ -1006,7 +1135,8 @@
|
|
|
1006
1135
|
"attributes": {},
|
|
1007
1136
|
"path": ["bgColor", "done", "muted"],
|
|
1008
1137
|
"value": "#ab7df826",
|
|
1009
|
-
"type": "color"
|
|
1138
|
+
"type": "color",
|
|
1139
|
+
"description": "Subtle background for completed/done state indicators"
|
|
1010
1140
|
},
|
|
1011
1141
|
"bgColor-draft-emphasis": {
|
|
1012
1142
|
"key": "{bgColor.draft.emphasis}",
|
|
@@ -1018,6 +1148,10 @@
|
|
|
1018
1148
|
"codeSyntax": {
|
|
1019
1149
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1020
1150
|
}
|
|
1151
|
+
},
|
|
1152
|
+
"org.primer.llm": {
|
|
1153
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1154
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1021
1155
|
}
|
|
1022
1156
|
},
|
|
1023
1157
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1025,6 +1159,7 @@
|
|
|
1025
1159
|
"original": {
|
|
1026
1160
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1027
1161
|
"$type": "color",
|
|
1162
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1028
1163
|
"$extensions": {
|
|
1029
1164
|
"org.primer.figma": {
|
|
1030
1165
|
"collection": "mode",
|
|
@@ -1033,6 +1168,10 @@
|
|
|
1033
1168
|
"codeSyntax": {
|
|
1034
1169
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1035
1170
|
}
|
|
1171
|
+
},
|
|
1172
|
+
"org.primer.llm": {
|
|
1173
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1174
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1036
1175
|
}
|
|
1037
1176
|
},
|
|
1038
1177
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1041,7 +1180,8 @@
|
|
|
1041
1180
|
"attributes": {},
|
|
1042
1181
|
"path": ["bgColor", "draft", "emphasis"],
|
|
1043
1182
|
"value": "#656c76",
|
|
1044
|
-
"type": "color"
|
|
1183
|
+
"type": "color",
|
|
1184
|
+
"description": "Strong background for draft state badges and labels"
|
|
1045
1185
|
},
|
|
1046
1186
|
"bgColor-draft-muted": {
|
|
1047
1187
|
"key": "{bgColor.draft.muted}",
|
|
@@ -1080,6 +1220,10 @@
|
|
|
1080
1220
|
"isSource": true,
|
|
1081
1221
|
"$type": "color"
|
|
1082
1222
|
}
|
|
1223
|
+
},
|
|
1224
|
+
"org.primer.llm": {
|
|
1225
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1226
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1083
1227
|
}
|
|
1084
1228
|
},
|
|
1085
1229
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1087,6 +1231,7 @@
|
|
|
1087
1231
|
"original": {
|
|
1088
1232
|
"$value": "{bgColor.neutral.muted}",
|
|
1089
1233
|
"$type": "color",
|
|
1234
|
+
"$description": "Subtle background for draft state indicators",
|
|
1090
1235
|
"$extensions": {
|
|
1091
1236
|
"org.primer.figma": {
|
|
1092
1237
|
"collection": "mode",
|
|
@@ -1122,6 +1267,10 @@
|
|
|
1122
1267
|
"isSource": true,
|
|
1123
1268
|
"$type": "color"
|
|
1124
1269
|
}
|
|
1270
|
+
},
|
|
1271
|
+
"org.primer.llm": {
|
|
1272
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1273
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1125
1274
|
}
|
|
1126
1275
|
},
|
|
1127
1276
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1130,7 +1279,8 @@
|
|
|
1130
1279
|
"attributes": {},
|
|
1131
1280
|
"path": ["bgColor", "draft", "muted"],
|
|
1132
1281
|
"value": "#656c7633",
|
|
1133
|
-
"type": "color"
|
|
1282
|
+
"type": "color",
|
|
1283
|
+
"description": "Subtle background for draft state indicators"
|
|
1134
1284
|
},
|
|
1135
1285
|
"bgColor-emphasis": {
|
|
1136
1286
|
"key": "{bgColor.emphasis}",
|
|
@@ -1145,6 +1295,10 @@
|
|
|
1145
1295
|
},
|
|
1146
1296
|
"org.primer.overrides": {
|
|
1147
1297
|
"dark": "#3d444d"
|
|
1298
|
+
},
|
|
1299
|
+
"org.primer.llm": {
|
|
1300
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1301
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1148
1302
|
}
|
|
1149
1303
|
},
|
|
1150
1304
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1152,6 +1306,7 @@
|
|
|
1152
1306
|
"original": {
|
|
1153
1307
|
"$value": "{base.color.neutral.7}",
|
|
1154
1308
|
"$type": "color",
|
|
1309
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1155
1310
|
"$extensions": {
|
|
1156
1311
|
"org.primer.figma": {
|
|
1157
1312
|
"collection": "mode",
|
|
@@ -1163,6 +1318,10 @@
|
|
|
1163
1318
|
},
|
|
1164
1319
|
"org.primer.overrides": {
|
|
1165
1320
|
"dark": "{base.color.neutral.7}"
|
|
1321
|
+
},
|
|
1322
|
+
"org.primer.llm": {
|
|
1323
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1324
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1166
1325
|
}
|
|
1167
1326
|
},
|
|
1168
1327
|
"key": "{bgColor.emphasis}"
|
|
@@ -1171,7 +1330,8 @@
|
|
|
1171
1330
|
"attributes": {},
|
|
1172
1331
|
"path": ["bgColor", "emphasis"],
|
|
1173
1332
|
"value": "#3d444d",
|
|
1174
|
-
"type": "color"
|
|
1333
|
+
"type": "color",
|
|
1334
|
+
"description": "High-emphasis dark background for strong visual contrast"
|
|
1175
1335
|
},
|
|
1176
1336
|
"bgColor-inset": {
|
|
1177
1337
|
"key": "{bgColor.inset}",
|
|
@@ -1191,6 +1351,10 @@
|
|
|
1191
1351
|
"light-high-contrast": "#151b23",
|
|
1192
1352
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1193
1353
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1354
|
+
},
|
|
1355
|
+
"org.primer.llm": {
|
|
1356
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1357
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1194
1358
|
}
|
|
1195
1359
|
},
|
|
1196
1360
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1198,6 +1362,7 @@
|
|
|
1198
1362
|
"original": {
|
|
1199
1363
|
"$value": "{base.color.neutral.0}",
|
|
1200
1364
|
"$type": "color",
|
|
1365
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1201
1366
|
"$extensions": {
|
|
1202
1367
|
"org.primer.figma": {
|
|
1203
1368
|
"collection": "mode",
|
|
@@ -1214,6 +1379,10 @@
|
|
|
1214
1379
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1215
1380
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1216
1381
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1382
|
+
},
|
|
1383
|
+
"org.primer.llm": {
|
|
1384
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1385
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1217
1386
|
}
|
|
1218
1387
|
},
|
|
1219
1388
|
"key": "{bgColor.inset}"
|
|
@@ -1222,7 +1391,8 @@
|
|
|
1222
1391
|
"attributes": {},
|
|
1223
1392
|
"path": ["bgColor", "inset"],
|
|
1224
1393
|
"value": "#010409",
|
|
1225
|
-
"type": "color"
|
|
1394
|
+
"type": "color",
|
|
1395
|
+
"description": "Inset background for recessed content areas like wells or sunken panels"
|
|
1226
1396
|
},
|
|
1227
1397
|
"bgColor-inverse": {
|
|
1228
1398
|
"key": "{bgColor.inverse}",
|
|
@@ -1234,6 +1404,10 @@
|
|
|
1234
1404
|
},
|
|
1235
1405
|
"org.primer.overrides": {
|
|
1236
1406
|
"dark": "#ffffff"
|
|
1407
|
+
},
|
|
1408
|
+
"org.primer.llm": {
|
|
1409
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1410
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1237
1411
|
}
|
|
1238
1412
|
},
|
|
1239
1413
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1241,6 +1415,7 @@
|
|
|
1241
1415
|
"original": {
|
|
1242
1416
|
"$value": "{base.color.neutral.13}",
|
|
1243
1417
|
"$type": "color",
|
|
1418
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1244
1419
|
"$extensions": {
|
|
1245
1420
|
"org.primer.figma": {
|
|
1246
1421
|
"collection": "mode",
|
|
@@ -1249,6 +1424,10 @@
|
|
|
1249
1424
|
},
|
|
1250
1425
|
"org.primer.overrides": {
|
|
1251
1426
|
"dark": "{base.color.neutral.13}"
|
|
1427
|
+
},
|
|
1428
|
+
"org.primer.llm": {
|
|
1429
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1430
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1252
1431
|
}
|
|
1253
1432
|
},
|
|
1254
1433
|
"key": "{bgColor.inverse}"
|
|
@@ -1257,7 +1436,8 @@
|
|
|
1257
1436
|
"attributes": {},
|
|
1258
1437
|
"path": ["bgColor", "inverse"],
|
|
1259
1438
|
"value": "#ffffff",
|
|
1260
|
-
"type": "color"
|
|
1439
|
+
"type": "color",
|
|
1440
|
+
"description": "Inverse background that flips between light and dark modes"
|
|
1261
1441
|
},
|
|
1262
1442
|
"bgColor-muted": {
|
|
1263
1443
|
"key": "{bgColor.muted}",
|
|
@@ -1280,6 +1460,10 @@
|
|
|
1280
1460
|
"dark-high-contrast": "#151b23",
|
|
1281
1461
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1282
1462
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1463
|
+
},
|
|
1464
|
+
"org.primer.llm": {
|
|
1465
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1466
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1283
1467
|
}
|
|
1284
1468
|
},
|
|
1285
1469
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1287,6 +1471,7 @@
|
|
|
1287
1471
|
"original": {
|
|
1288
1472
|
"$value": "{base.color.neutral.2}",
|
|
1289
1473
|
"$type": "color",
|
|
1474
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1290
1475
|
"$extensions": {
|
|
1291
1476
|
"org.primer.figma": {
|
|
1292
1477
|
"collection": "mode",
|
|
@@ -1306,6 +1491,10 @@
|
|
|
1306
1491
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1307
1492
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1308
1493
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1494
|
+
},
|
|
1495
|
+
"org.primer.llm": {
|
|
1496
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1497
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1309
1498
|
}
|
|
1310
1499
|
},
|
|
1311
1500
|
"key": "{bgColor.muted}"
|
|
@@ -1314,7 +1503,8 @@
|
|
|
1314
1503
|
"attributes": {},
|
|
1315
1504
|
"path": ["bgColor", "muted"],
|
|
1316
1505
|
"value": "#151b23",
|
|
1317
|
-
"type": "color"
|
|
1506
|
+
"type": "color",
|
|
1507
|
+
"description": "Muted background for secondary content areas and subtle grouping"
|
|
1318
1508
|
},
|
|
1319
1509
|
"bgColor-neutral-emphasis": {
|
|
1320
1510
|
"key": "{bgColor.neutral.emphasis}",
|
|
@@ -1334,6 +1524,10 @@
|
|
|
1334
1524
|
"dark-high-contrast": "#3d444d",
|
|
1335
1525
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1336
1526
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1527
|
+
},
|
|
1528
|
+
"org.primer.llm": {
|
|
1529
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1530
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1337
1531
|
}
|
|
1338
1532
|
},
|
|
1339
1533
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1341,6 +1535,7 @@
|
|
|
1341
1535
|
"original": {
|
|
1342
1536
|
"$value": "{base.color.neutral.8}",
|
|
1343
1537
|
"$type": "color",
|
|
1538
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1344
1539
|
"$extensions": {
|
|
1345
1540
|
"org.primer.figma": {
|
|
1346
1541
|
"collection": "mode",
|
|
@@ -1357,6 +1552,10 @@
|
|
|
1357
1552
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1358
1553
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1359
1554
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1555
|
+
},
|
|
1556
|
+
"org.primer.llm": {
|
|
1557
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1558
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1360
1559
|
}
|
|
1361
1560
|
},
|
|
1362
1561
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1365,7 +1564,8 @@
|
|
|
1365
1564
|
"attributes": {},
|
|
1366
1565
|
"path": ["bgColor", "neutral", "emphasis"],
|
|
1367
1566
|
"value": "#656c76",
|
|
1368
|
-
"type": "color"
|
|
1567
|
+
"type": "color",
|
|
1568
|
+
"description": "Strong neutral background for prominent neutral elements"
|
|
1369
1569
|
},
|
|
1370
1570
|
"bgColor-neutral-muted": {
|
|
1371
1571
|
"key": "{bgColor.neutral.muted}",
|
|
@@ -1396,6 +1596,10 @@
|
|
|
1396
1596
|
"dark-high-contrast": "#212830",
|
|
1397
1597
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1398
1598
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1599
|
+
},
|
|
1600
|
+
"org.primer.llm": {
|
|
1601
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1602
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1399
1603
|
}
|
|
1400
1604
|
},
|
|
1401
1605
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1404,6 +1608,7 @@
|
|
|
1404
1608
|
"original": {
|
|
1405
1609
|
"$value": "{base.color.neutral.8}",
|
|
1406
1610
|
"$type": "color",
|
|
1611
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1407
1612
|
"$extensions": {
|
|
1408
1613
|
"org.primer.figma": {
|
|
1409
1614
|
"collection": "mode",
|
|
@@ -1431,6 +1636,10 @@
|
|
|
1431
1636
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1432
1637
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1433
1638
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1639
|
+
},
|
|
1640
|
+
"org.primer.llm": {
|
|
1641
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1642
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1434
1643
|
}
|
|
1435
1644
|
},
|
|
1436
1645
|
"alpha": 0.2,
|
|
@@ -1440,7 +1649,8 @@
|
|
|
1440
1649
|
"attributes": {},
|
|
1441
1650
|
"path": ["bgColor", "neutral", "muted"],
|
|
1442
1651
|
"value": "#656c7633",
|
|
1443
|
-
"type": "color"
|
|
1652
|
+
"type": "color",
|
|
1653
|
+
"description": "Subtle neutral background for tags, labels, and secondary UI elements"
|
|
1444
1654
|
},
|
|
1445
1655
|
"bgColor-open-emphasis": {
|
|
1446
1656
|
"key": "{bgColor.open.emphasis}",
|
|
@@ -1462,6 +1672,10 @@
|
|
|
1462
1672
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
1463
1673
|
"dark-protanopia-deuteranopia": "#bd561d",
|
|
1464
1674
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1675
|
+
},
|
|
1676
|
+
"org.primer.llm": {
|
|
1677
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1678
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1465
1679
|
}
|
|
1466
1680
|
},
|
|
1467
1681
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1469,6 +1683,7 @@
|
|
|
1469
1683
|
"original": {
|
|
1470
1684
|
"$value": "{bgColor.success.emphasis}",
|
|
1471
1685
|
"$type": "color",
|
|
1686
|
+
"$description": "Strong background for open state badges and labels",
|
|
1472
1687
|
"$extensions": {
|
|
1473
1688
|
"org.primer.figma": {
|
|
1474
1689
|
"collection": "mode",
|
|
@@ -1487,6 +1702,10 @@
|
|
|
1487
1702
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1488
1703
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1489
1704
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1705
|
+
},
|
|
1706
|
+
"org.primer.llm": {
|
|
1707
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1708
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1490
1709
|
}
|
|
1491
1710
|
},
|
|
1492
1711
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1495,7 +1714,8 @@
|
|
|
1495
1714
|
"attributes": {},
|
|
1496
1715
|
"path": ["bgColor", "open", "emphasis"],
|
|
1497
1716
|
"value": "#238636",
|
|
1498
|
-
"type": "color"
|
|
1717
|
+
"type": "color",
|
|
1718
|
+
"description": "Strong background for open state badges and labels"
|
|
1499
1719
|
},
|
|
1500
1720
|
"bgColor-open-muted": {
|
|
1501
1721
|
"key": "{bgColor.open.muted}",
|
|
@@ -1541,6 +1761,10 @@
|
|
|
1541
1761
|
"isSource": true,
|
|
1542
1762
|
"$type": "color"
|
|
1543
1763
|
}
|
|
1764
|
+
},
|
|
1765
|
+
"org.primer.llm": {
|
|
1766
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1767
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1544
1768
|
}
|
|
1545
1769
|
},
|
|
1546
1770
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1548,6 +1772,7 @@
|
|
|
1548
1772
|
"original": {
|
|
1549
1773
|
"$value": "{bgColor.success.muted}",
|
|
1550
1774
|
"$type": "color",
|
|
1775
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1551
1776
|
"$extensions": {
|
|
1552
1777
|
"org.primer.figma": {
|
|
1553
1778
|
"collection": "mode",
|
|
@@ -1590,6 +1815,10 @@
|
|
|
1590
1815
|
"isSource": true,
|
|
1591
1816
|
"$type": "color"
|
|
1592
1817
|
}
|
|
1818
|
+
},
|
|
1819
|
+
"org.primer.llm": {
|
|
1820
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1821
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1593
1822
|
}
|
|
1594
1823
|
},
|
|
1595
1824
|
"key": "{bgColor.open.muted}"
|
|
@@ -1598,7 +1827,8 @@
|
|
|
1598
1827
|
"attributes": {},
|
|
1599
1828
|
"path": ["bgColor", "open", "muted"],
|
|
1600
1829
|
"value": "#2ea04326",
|
|
1601
|
-
"type": "color"
|
|
1830
|
+
"type": "color",
|
|
1831
|
+
"description": "Subtle background for open state indicators (issues, PRs)"
|
|
1602
1832
|
},
|
|
1603
1833
|
"bgColor-severe-emphasis": {
|
|
1604
1834
|
"key": "{bgColor.severe.emphasis}",
|
|
@@ -1619,6 +1849,10 @@
|
|
|
1619
1849
|
"dark-high-contrast": "#3d1300",
|
|
1620
1850
|
"dark-dimmed-high-contrast": "#762d0a",
|
|
1621
1851
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1852
|
+
},
|
|
1853
|
+
"org.primer.llm": {
|
|
1854
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1855
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1622
1856
|
}
|
|
1623
1857
|
},
|
|
1624
1858
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1626,6 +1860,7 @@
|
|
|
1626
1860
|
"original": {
|
|
1627
1861
|
"$value": "{base.color.orange.5}",
|
|
1628
1862
|
"$type": "color",
|
|
1863
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1629
1864
|
"$extensions": {
|
|
1630
1865
|
"org.primer.figma": {
|
|
1631
1866
|
"collection": "mode",
|
|
@@ -1643,6 +1878,10 @@
|
|
|
1643
1878
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1644
1879
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1645
1880
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1881
|
+
},
|
|
1882
|
+
"org.primer.llm": {
|
|
1883
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1884
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1646
1885
|
}
|
|
1647
1886
|
},
|
|
1648
1887
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1651,7 +1890,8 @@
|
|
|
1651
1890
|
"attributes": {},
|
|
1652
1891
|
"path": ["bgColor", "severe", "emphasis"],
|
|
1653
1892
|
"value": "#bd561d",
|
|
1654
|
-
"type": "color"
|
|
1893
|
+
"type": "color",
|
|
1894
|
+
"description": "Strong severe background for prominent high-priority warnings"
|
|
1655
1895
|
},
|
|
1656
1896
|
"bgColor-severe-muted": {
|
|
1657
1897
|
"key": "{bgColor.severe.muted}",
|
|
@@ -1681,6 +1921,10 @@
|
|
|
1681
1921
|
"isSource": true,
|
|
1682
1922
|
"$type": "color"
|
|
1683
1923
|
}
|
|
1924
|
+
},
|
|
1925
|
+
"org.primer.llm": {
|
|
1926
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1927
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1684
1928
|
}
|
|
1685
1929
|
},
|
|
1686
1930
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1689,6 +1933,7 @@
|
|
|
1689
1933
|
"original": {
|
|
1690
1934
|
"$value": "{base.color.orange.4}",
|
|
1691
1935
|
"$type": "color",
|
|
1936
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1692
1937
|
"$extensions": {
|
|
1693
1938
|
"org.primer.figma": {
|
|
1694
1939
|
"collection": "mode",
|
|
@@ -1715,6 +1960,10 @@
|
|
|
1715
1960
|
"isSource": true,
|
|
1716
1961
|
"$type": "color"
|
|
1717
1962
|
}
|
|
1963
|
+
},
|
|
1964
|
+
"org.primer.llm": {
|
|
1965
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1966
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1718
1967
|
}
|
|
1719
1968
|
},
|
|
1720
1969
|
"alpha": 0.1,
|
|
@@ -1724,7 +1973,8 @@
|
|
|
1724
1973
|
"attributes": {},
|
|
1725
1974
|
"path": ["bgColor", "severe", "muted"],
|
|
1726
1975
|
"value": "#db6d281a",
|
|
1727
|
-
"type": "color"
|
|
1976
|
+
"type": "color",
|
|
1977
|
+
"description": "Subtle severe background for high-priority warnings"
|
|
1728
1978
|
},
|
|
1729
1979
|
"bgColor-sponsors-emphasis": {
|
|
1730
1980
|
"key": "{bgColor.sponsors.emphasis}",
|
|
@@ -1742,6 +1992,10 @@
|
|
|
1742
1992
|
"dark-dimmed-high-contrast": "#7d2457",
|
|
1743
1993
|
"dark-tritanopia-high-contrast": "#42062a",
|
|
1744
1994
|
"dark-protanopia-deuteranopia-high-contrast": "#42062a"
|
|
1995
|
+
},
|
|
1996
|
+
"org.primer.llm": {
|
|
1997
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
1998
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1745
1999
|
}
|
|
1746
2000
|
},
|
|
1747
2001
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1749,6 +2003,7 @@
|
|
|
1749
2003
|
"original": {
|
|
1750
2004
|
"$value": "{base.color.pink.5}",
|
|
1751
2005
|
"$type": "color",
|
|
2006
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1752
2007
|
"$extensions": {
|
|
1753
2008
|
"org.primer.figma": {
|
|
1754
2009
|
"collection": "mode",
|
|
@@ -1763,6 +2018,10 @@
|
|
|
1763
2018
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1764
2019
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1765
2020
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2021
|
+
},
|
|
2022
|
+
"org.primer.llm": {
|
|
2023
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2024
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1766
2025
|
}
|
|
1767
2026
|
},
|
|
1768
2027
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1771,7 +2030,8 @@
|
|
|
1771
2030
|
"attributes": {},
|
|
1772
2031
|
"path": ["bgColor", "sponsors", "emphasis"],
|
|
1773
2032
|
"value": "#bf4b8a",
|
|
1774
|
-
"type": "color"
|
|
2033
|
+
"type": "color",
|
|
2034
|
+
"description": "Strong background for prominent GitHub Sponsors elements"
|
|
1775
2035
|
},
|
|
1776
2036
|
"bgColor-sponsors-muted": {
|
|
1777
2037
|
"key": "{bgColor.sponsors.muted}",
|
|
@@ -1799,6 +2059,10 @@
|
|
|
1799
2059
|
"isSource": true,
|
|
1800
2060
|
"$type": "color"
|
|
1801
2061
|
}
|
|
2062
|
+
},
|
|
2063
|
+
"org.primer.llm": {
|
|
2064
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2065
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1802
2066
|
}
|
|
1803
2067
|
},
|
|
1804
2068
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1807,6 +2071,7 @@
|
|
|
1807
2071
|
"original": {
|
|
1808
2072
|
"$value": "{base.color.pink.4}",
|
|
1809
2073
|
"$type": "color",
|
|
2074
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1810
2075
|
"$extensions": {
|
|
1811
2076
|
"org.primer.figma": {
|
|
1812
2077
|
"collection": "mode",
|
|
@@ -1831,6 +2096,10 @@
|
|
|
1831
2096
|
"isSource": true,
|
|
1832
2097
|
"$type": "color"
|
|
1833
2098
|
}
|
|
2099
|
+
},
|
|
2100
|
+
"org.primer.llm": {
|
|
2101
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2102
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1834
2103
|
}
|
|
1835
2104
|
},
|
|
1836
2105
|
"alpha": 0.1,
|
|
@@ -1840,7 +2109,8 @@
|
|
|
1840
2109
|
"attributes": {},
|
|
1841
2110
|
"path": ["bgColor", "sponsors", "muted"],
|
|
1842
2111
|
"value": "#db61a21a",
|
|
1843
|
-
"type": "color"
|
|
2112
|
+
"type": "color",
|
|
2113
|
+
"description": "Subtle background for GitHub Sponsors content"
|
|
1844
2114
|
},
|
|
1845
2115
|
"bgColor-success-emphasis": {
|
|
1846
2116
|
"key": "{bgColor.success.emphasis}",
|
|
@@ -1866,6 +2136,10 @@
|
|
|
1866
2136
|
"light-high-contrast": "#238636",
|
|
1867
2137
|
"dark-high-contrast": "#04260f",
|
|
1868
2138
|
"dark-dimmed-high-contrast": "#0f5323"
|
|
2139
|
+
},
|
|
2140
|
+
"org.primer.llm": {
|
|
2141
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2142
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1869
2143
|
}
|
|
1870
2144
|
},
|
|
1871
2145
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1873,6 +2147,7 @@
|
|
|
1873
2147
|
"original": {
|
|
1874
2148
|
"$value": "{base.color.green.5}",
|
|
1875
2149
|
"$type": "color",
|
|
2150
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1876
2151
|
"$extensions": {
|
|
1877
2152
|
"org.primer.figma": {
|
|
1878
2153
|
"collection": "mode",
|
|
@@ -1895,6 +2170,10 @@
|
|
|
1895
2170
|
"light-high-contrast": "{base.color.green.5}",
|
|
1896
2171
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1897
2172
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2173
|
+
},
|
|
2174
|
+
"org.primer.llm": {
|
|
2175
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2176
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1898
2177
|
}
|
|
1899
2178
|
},
|
|
1900
2179
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1903,7 +2182,8 @@
|
|
|
1903
2182
|
"attributes": {},
|
|
1904
2183
|
"path": ["bgColor", "success", "emphasis"],
|
|
1905
2184
|
"value": "#238636",
|
|
1906
|
-
"type": "color"
|
|
2185
|
+
"type": "color",
|
|
2186
|
+
"description": "Strong success background for prominent positive actions"
|
|
1907
2187
|
},
|
|
1908
2188
|
"bgColor-success-muted": {
|
|
1909
2189
|
"key": "{bgColor.success.muted}",
|
|
@@ -1956,6 +2236,10 @@
|
|
|
1956
2236
|
"isSource": true,
|
|
1957
2237
|
"$type": "color"
|
|
1958
2238
|
}
|
|
2239
|
+
},
|
|
2240
|
+
"org.primer.llm": {
|
|
2241
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2242
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1959
2243
|
}
|
|
1960
2244
|
},
|
|
1961
2245
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1964,6 +2248,7 @@
|
|
|
1964
2248
|
"original": {
|
|
1965
2249
|
"$value": "{base.color.green.4}",
|
|
1966
2250
|
"$type": "color",
|
|
2251
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1967
2252
|
"$extensions": {
|
|
1968
2253
|
"org.primer.figma": {
|
|
1969
2254
|
"collection": "mode",
|
|
@@ -2013,6 +2298,10 @@
|
|
|
2013
2298
|
"isSource": true,
|
|
2014
2299
|
"$type": "color"
|
|
2015
2300
|
}
|
|
2301
|
+
},
|
|
2302
|
+
"org.primer.llm": {
|
|
2303
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2304
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2016
2305
|
}
|
|
2017
2306
|
},
|
|
2018
2307
|
"alpha": 0.15,
|
|
@@ -2022,7 +2311,8 @@
|
|
|
2022
2311
|
"attributes": {},
|
|
2023
2312
|
"path": ["bgColor", "success", "muted"],
|
|
2024
2313
|
"value": "#2ea04326",
|
|
2025
|
-
"type": "color"
|
|
2314
|
+
"type": "color",
|
|
2315
|
+
"description": "Subtle success background for positive feedback and completed states"
|
|
2026
2316
|
},
|
|
2027
2317
|
"bgColor-transparent": {
|
|
2028
2318
|
"key": "{bgColor.transparent}",
|
|
@@ -2034,6 +2324,10 @@
|
|
|
2034
2324
|
"codeSyntax": {
|
|
2035
2325
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2036
2326
|
}
|
|
2327
|
+
},
|
|
2328
|
+
"org.primer.llm": {
|
|
2329
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2330
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2037
2331
|
}
|
|
2038
2332
|
},
|
|
2039
2333
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2041,6 +2335,7 @@
|
|
|
2041
2335
|
"original": {
|
|
2042
2336
|
"$value": "{base.color.transparent}",
|
|
2043
2337
|
"$type": "color",
|
|
2338
|
+
"$description": "Fully transparent background",
|
|
2044
2339
|
"$extensions": {
|
|
2045
2340
|
"org.primer.figma": {
|
|
2046
2341
|
"collection": "mode",
|
|
@@ -2049,6 +2344,10 @@
|
|
|
2049
2344
|
"codeSyntax": {
|
|
2050
2345
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2051
2346
|
}
|
|
2347
|
+
},
|
|
2348
|
+
"org.primer.llm": {
|
|
2349
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2350
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2052
2351
|
}
|
|
2053
2352
|
},
|
|
2054
2353
|
"key": "{bgColor.transparent}"
|
|
@@ -2057,7 +2356,8 @@
|
|
|
2057
2356
|
"attributes": {},
|
|
2058
2357
|
"path": ["bgColor", "transparent"],
|
|
2059
2358
|
"value": "#00000000",
|
|
2060
|
-
"type": "color"
|
|
2359
|
+
"type": "color",
|
|
2360
|
+
"description": "Fully transparent background"
|
|
2061
2361
|
},
|
|
2062
2362
|
"bgColor-upsell-emphasis": {
|
|
2063
2363
|
"key": "{bgColor.upsell.emphasis}",
|
|
@@ -2069,6 +2369,10 @@
|
|
|
2069
2369
|
"codeSyntax": {
|
|
2070
2370
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2071
2371
|
}
|
|
2372
|
+
},
|
|
2373
|
+
"org.primer.llm": {
|
|
2374
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2375
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2072
2376
|
}
|
|
2073
2377
|
},
|
|
2074
2378
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2076,6 +2380,7 @@
|
|
|
2076
2380
|
"original": {
|
|
2077
2381
|
"$value": "{bgColor.done.emphasis}",
|
|
2078
2382
|
"$type": "color",
|
|
2383
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2079
2384
|
"$extensions": {
|
|
2080
2385
|
"org.primer.figma": {
|
|
2081
2386
|
"collection": "mode",
|
|
@@ -2084,6 +2389,10 @@
|
|
|
2084
2389
|
"codeSyntax": {
|
|
2085
2390
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2086
2391
|
}
|
|
2392
|
+
},
|
|
2393
|
+
"org.primer.llm": {
|
|
2394
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2395
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2087
2396
|
}
|
|
2088
2397
|
},
|
|
2089
2398
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2092,7 +2401,8 @@
|
|
|
2092
2401
|
"attributes": {},
|
|
2093
2402
|
"path": ["bgColor", "upsell", "emphasis"],
|
|
2094
2403
|
"value": "#8957e5",
|
|
2095
|
-
"type": "color"
|
|
2404
|
+
"type": "color",
|
|
2405
|
+
"description": "Strong background for prominent upsell elements"
|
|
2096
2406
|
},
|
|
2097
2407
|
"bgColor-upsell-muted": {
|
|
2098
2408
|
"key": "{bgColor.upsell.muted}",
|
|
@@ -2104,6 +2414,10 @@
|
|
|
2104
2414
|
"codeSyntax": {
|
|
2105
2415
|
"web": "var(--bgColor-upsell-muted)"
|
|
2106
2416
|
}
|
|
2417
|
+
},
|
|
2418
|
+
"org.primer.llm": {
|
|
2419
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2420
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2107
2421
|
}
|
|
2108
2422
|
},
|
|
2109
2423
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2111,6 +2425,7 @@
|
|
|
2111
2425
|
"original": {
|
|
2112
2426
|
"$value": "{bgColor.done.muted}",
|
|
2113
2427
|
"$type": "color",
|
|
2428
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2114
2429
|
"$extensions": {
|
|
2115
2430
|
"org.primer.figma": {
|
|
2116
2431
|
"collection": "mode",
|
|
@@ -2119,6 +2434,10 @@
|
|
|
2119
2434
|
"codeSyntax": {
|
|
2120
2435
|
"web": "var(--bgColor-upsell-muted)"
|
|
2121
2436
|
}
|
|
2437
|
+
},
|
|
2438
|
+
"org.primer.llm": {
|
|
2439
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2440
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2122
2441
|
}
|
|
2123
2442
|
},
|
|
2124
2443
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2127,7 +2446,8 @@
|
|
|
2127
2446
|
"attributes": {},
|
|
2128
2447
|
"path": ["bgColor", "upsell", "muted"],
|
|
2129
2448
|
"value": "#ab7df826",
|
|
2130
|
-
"type": "color"
|
|
2449
|
+
"type": "color",
|
|
2450
|
+
"description": "Subtle background for upsell and promotional content"
|
|
2131
2451
|
},
|
|
2132
2452
|
"bgColor-white": {
|
|
2133
2453
|
"key": "{bgColor.white}",
|
|
@@ -2139,6 +2459,10 @@
|
|
|
2139
2459
|
},
|
|
2140
2460
|
"org.primer.overrides": {
|
|
2141
2461
|
"dark": "#ffffff"
|
|
2462
|
+
},
|
|
2463
|
+
"org.primer.llm": {
|
|
2464
|
+
"doNotUse": true,
|
|
2465
|
+
"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
2466
|
}
|
|
2143
2467
|
},
|
|
2144
2468
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2146,6 +2470,7 @@
|
|
|
2146
2470
|
"original": {
|
|
2147
2471
|
"$value": "{base.color.neutral.13}",
|
|
2148
2472
|
"$type": "color",
|
|
2473
|
+
"$description": "Pure white background",
|
|
2149
2474
|
"$extensions": {
|
|
2150
2475
|
"org.primer.figma": {
|
|
2151
2476
|
"collection": "mode",
|
|
@@ -2154,6 +2479,10 @@
|
|
|
2154
2479
|
},
|
|
2155
2480
|
"org.primer.overrides": {
|
|
2156
2481
|
"dark": "{base.color.neutral.13}"
|
|
2482
|
+
},
|
|
2483
|
+
"org.primer.llm": {
|
|
2484
|
+
"doNotUse": true,
|
|
2485
|
+
"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
2486
|
}
|
|
2158
2487
|
},
|
|
2159
2488
|
"key": "{bgColor.white}"
|
|
@@ -2162,7 +2491,8 @@
|
|
|
2162
2491
|
"attributes": {},
|
|
2163
2492
|
"path": ["bgColor", "white"],
|
|
2164
2493
|
"value": "#ffffff",
|
|
2165
|
-
"type": "color"
|
|
2494
|
+
"type": "color",
|
|
2495
|
+
"description": "Pure white background"
|
|
2166
2496
|
},
|
|
2167
2497
|
"border-accent-emphasis": {
|
|
2168
2498
|
"key": "{border.accent.emphasis}",
|
|
@@ -2674,6 +3004,10 @@
|
|
|
2674
3004
|
},
|
|
2675
3005
|
"org.primer.overrides": {
|
|
2676
3006
|
"dark-dimmed-high-contrast": "#79c0ff"
|
|
3007
|
+
},
|
|
3008
|
+
"org.primer.llm": {
|
|
3009
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3010
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2677
3011
|
}
|
|
2678
3012
|
},
|
|
2679
3013
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2681,6 +3015,7 @@
|
|
|
2681
3015
|
"original": {
|
|
2682
3016
|
"$value": "{base.color.blue.5}",
|
|
2683
3017
|
"$type": "color",
|
|
3018
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2684
3019
|
"$extensions": {
|
|
2685
3020
|
"org.primer.figma": {
|
|
2686
3021
|
"collection": "mode",
|
|
@@ -2692,6 +3027,10 @@
|
|
|
2692
3027
|
},
|
|
2693
3028
|
"org.primer.overrides": {
|
|
2694
3029
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3030
|
+
},
|
|
3031
|
+
"org.primer.llm": {
|
|
3032
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3033
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2695
3034
|
}
|
|
2696
3035
|
},
|
|
2697
3036
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2700,7 +3039,8 @@
|
|
|
2700
3039
|
"attributes": {},
|
|
2701
3040
|
"path": ["borderColor", "accent", "emphasis"],
|
|
2702
3041
|
"value": "#1f6feb",
|
|
2703
|
-
"type": "color"
|
|
3042
|
+
"type": "color",
|
|
3043
|
+
"description": "Strong accent border for selected or focused elements"
|
|
2704
3044
|
},
|
|
2705
3045
|
"borderColor-accent-muted": {
|
|
2706
3046
|
"key": "{borderColor.accent.muted}",
|
|
@@ -2764,6 +3104,10 @@
|
|
|
2764
3104
|
"isSource": true,
|
|
2765
3105
|
"$type": "color"
|
|
2766
3106
|
}
|
|
3107
|
+
},
|
|
3108
|
+
"org.primer.llm": {
|
|
3109
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3110
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2767
3111
|
}
|
|
2768
3112
|
},
|
|
2769
3113
|
"alpha": 0.4,
|
|
@@ -2772,6 +3116,7 @@
|
|
|
2772
3116
|
"original": {
|
|
2773
3117
|
"$value": "{base.color.blue.4}",
|
|
2774
3118
|
"$type": "color",
|
|
3119
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2775
3120
|
"$extensions": {
|
|
2776
3121
|
"org.primer.figma": {
|
|
2777
3122
|
"collection": "mode",
|
|
@@ -2832,6 +3177,10 @@
|
|
|
2832
3177
|
"isSource": true,
|
|
2833
3178
|
"$type": "color"
|
|
2834
3179
|
}
|
|
3180
|
+
},
|
|
3181
|
+
"org.primer.llm": {
|
|
3182
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3183
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2835
3184
|
}
|
|
2836
3185
|
},
|
|
2837
3186
|
"alpha": 0.4,
|
|
@@ -2841,7 +3190,8 @@
|
|
|
2841
3190
|
"attributes": {},
|
|
2842
3191
|
"path": ["borderColor", "accent", "muted"],
|
|
2843
3192
|
"value": "#388bfd66",
|
|
2844
|
-
"type": "color"
|
|
3193
|
+
"type": "color",
|
|
3194
|
+
"description": "Subtle accent border for selected or focused elements"
|
|
2845
3195
|
},
|
|
2846
3196
|
"borderColor-attention-emphasis": {
|
|
2847
3197
|
"key": "{borderColor.attention.emphasis}",
|
|
@@ -2856,6 +3206,10 @@
|
|
|
2856
3206
|
},
|
|
2857
3207
|
"org.primer.overrides": {
|
|
2858
3208
|
"dark-dimmed-high-contrast": "#e3b341"
|
|
3209
|
+
},
|
|
3210
|
+
"org.primer.llm": {
|
|
3211
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3212
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2859
3213
|
}
|
|
2860
3214
|
},
|
|
2861
3215
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2863,6 +3217,7 @@
|
|
|
2863
3217
|
"original": {
|
|
2864
3218
|
"$value": "{base.color.yellow.5}",
|
|
2865
3219
|
"$type": "color",
|
|
3220
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2866
3221
|
"$extensions": {
|
|
2867
3222
|
"org.primer.figma": {
|
|
2868
3223
|
"collection": "mode",
|
|
@@ -2874,6 +3229,10 @@
|
|
|
2874
3229
|
},
|
|
2875
3230
|
"org.primer.overrides": {
|
|
2876
3231
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3232
|
+
},
|
|
3233
|
+
"org.primer.llm": {
|
|
3234
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3235
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2877
3236
|
}
|
|
2878
3237
|
},
|
|
2879
3238
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2882,7 +3241,8 @@
|
|
|
2882
3241
|
"attributes": {},
|
|
2883
3242
|
"path": ["borderColor", "attention", "emphasis"],
|
|
2884
3243
|
"value": "#9e6a03",
|
|
2885
|
-
"type": "color"
|
|
3244
|
+
"type": "color",
|
|
3245
|
+
"description": "Strong attention border for prominent warnings"
|
|
2886
3246
|
},
|
|
2887
3247
|
"borderColor-attention-muted": {
|
|
2888
3248
|
"key": "{borderColor.attention.muted}",
|
|
@@ -2946,6 +3306,10 @@
|
|
|
2946
3306
|
"isSource": true,
|
|
2947
3307
|
"$type": "color"
|
|
2948
3308
|
}
|
|
3309
|
+
},
|
|
3310
|
+
"org.primer.llm": {
|
|
3311
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3312
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2949
3313
|
}
|
|
2950
3314
|
},
|
|
2951
3315
|
"alpha": 0.4,
|
|
@@ -2954,6 +3318,7 @@
|
|
|
2954
3318
|
"original": {
|
|
2955
3319
|
"$value": "{base.color.yellow.4}",
|
|
2956
3320
|
"$type": "color",
|
|
3321
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2957
3322
|
"$extensions": {
|
|
2958
3323
|
"org.primer.figma": {
|
|
2959
3324
|
"collection": "mode",
|
|
@@ -3014,6 +3379,10 @@
|
|
|
3014
3379
|
"isSource": true,
|
|
3015
3380
|
"$type": "color"
|
|
3016
3381
|
}
|
|
3382
|
+
},
|
|
3383
|
+
"org.primer.llm": {
|
|
3384
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3385
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3017
3386
|
}
|
|
3018
3387
|
},
|
|
3019
3388
|
"alpha": 0.4,
|
|
@@ -3023,7 +3392,8 @@
|
|
|
3023
3392
|
"attributes": {},
|
|
3024
3393
|
"path": ["borderColor", "attention", "muted"],
|
|
3025
3394
|
"value": "#bb800966",
|
|
3026
|
-
"type": "color"
|
|
3395
|
+
"type": "color",
|
|
3396
|
+
"description": "Subtle attention border for warnings and caution states"
|
|
3027
3397
|
},
|
|
3028
3398
|
"borderColor-closed-emphasis": {
|
|
3029
3399
|
"key": "{borderColor.closed.emphasis}",
|
|
@@ -3045,6 +3415,10 @@
|
|
|
3045
3415
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
3046
3416
|
"light-tritanopia": "#656c76",
|
|
3047
3417
|
"light-tritanopia-high-contrast": "#656c76"
|
|
3418
|
+
},
|
|
3419
|
+
"org.primer.llm": {
|
|
3420
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3421
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3048
3422
|
}
|
|
3049
3423
|
},
|
|
3050
3424
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3052,6 +3426,7 @@
|
|
|
3052
3426
|
"original": {
|
|
3053
3427
|
"$value": "{borderColor.danger.emphasis}",
|
|
3054
3428
|
"$type": "color",
|
|
3429
|
+
"$description": "Strong border for closed state badges",
|
|
3055
3430
|
"$extensions": {
|
|
3056
3431
|
"org.primer.figma": {
|
|
3057
3432
|
"collection": "mode",
|
|
@@ -3070,6 +3445,10 @@
|
|
|
3070
3445
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3071
3446
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3072
3447
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3448
|
+
},
|
|
3449
|
+
"org.primer.llm": {
|
|
3450
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3451
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3073
3452
|
}
|
|
3074
3453
|
},
|
|
3075
3454
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3078,7 +3457,8 @@
|
|
|
3078
3457
|
"attributes": {},
|
|
3079
3458
|
"path": ["borderColor", "closed", "emphasis"],
|
|
3080
3459
|
"value": "#da3633",
|
|
3081
|
-
"type": "color"
|
|
3460
|
+
"type": "color",
|
|
3461
|
+
"description": "Strong border for closed state badges"
|
|
3082
3462
|
},
|
|
3083
3463
|
"borderColor-closed-muted": {
|
|
3084
3464
|
"key": "{borderColor.closed.muted}",
|
|
@@ -3148,6 +3528,10 @@
|
|
|
3148
3528
|
"isSource": true,
|
|
3149
3529
|
"$type": "color"
|
|
3150
3530
|
}
|
|
3531
|
+
},
|
|
3532
|
+
"org.primer.llm": {
|
|
3533
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3534
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3151
3535
|
}
|
|
3152
3536
|
},
|
|
3153
3537
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3155,6 +3539,7 @@
|
|
|
3155
3539
|
"original": {
|
|
3156
3540
|
"$value": "{borderColor.danger.muted}",
|
|
3157
3541
|
"$type": "color",
|
|
3542
|
+
"$description": "Subtle border for closed state indicators",
|
|
3158
3543
|
"$extensions": {
|
|
3159
3544
|
"org.primer.figma": {
|
|
3160
3545
|
"collection": "mode",
|
|
@@ -3221,6 +3606,10 @@
|
|
|
3221
3606
|
"isSource": true,
|
|
3222
3607
|
"$type": "color"
|
|
3223
3608
|
}
|
|
3609
|
+
},
|
|
3610
|
+
"org.primer.llm": {
|
|
3611
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3612
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3224
3613
|
}
|
|
3225
3614
|
},
|
|
3226
3615
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3229,7 +3618,8 @@
|
|
|
3229
3618
|
"attributes": {},
|
|
3230
3619
|
"path": ["borderColor", "closed", "muted"],
|
|
3231
3620
|
"value": "#f8514966",
|
|
3232
|
-
"type": "color"
|
|
3621
|
+
"type": "color",
|
|
3622
|
+
"description": "Subtle border for closed state indicators"
|
|
3233
3623
|
},
|
|
3234
3624
|
"borderColor-danger-emphasis": {
|
|
3235
3625
|
"key": "{borderColor.danger.emphasis}",
|
|
@@ -3268,6 +3658,10 @@
|
|
|
3268
3658
|
"$type": "color"
|
|
3269
3659
|
},
|
|
3270
3660
|
"dark-dimmed-high-contrast": "#ffa198"
|
|
3661
|
+
},
|
|
3662
|
+
"org.primer.llm": {
|
|
3663
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3664
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3271
3665
|
}
|
|
3272
3666
|
},
|
|
3273
3667
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3275,6 +3669,7 @@
|
|
|
3275
3669
|
"original": {
|
|
3276
3670
|
"$value": "{base.color.red.5}",
|
|
3277
3671
|
"$type": "color",
|
|
3672
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3278
3673
|
"$extensions": {
|
|
3279
3674
|
"org.primer.figma": {
|
|
3280
3675
|
"collection": "mode",
|
|
@@ -3310,6 +3705,10 @@
|
|
|
3310
3705
|
"$type": "color"
|
|
3311
3706
|
},
|
|
3312
3707
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3708
|
+
},
|
|
3709
|
+
"org.primer.llm": {
|
|
3710
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3711
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3313
3712
|
}
|
|
3314
3713
|
},
|
|
3315
3714
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3318,7 +3717,8 @@
|
|
|
3318
3717
|
"attributes": {},
|
|
3319
3718
|
"path": ["borderColor", "danger", "emphasis"],
|
|
3320
3719
|
"value": "#da3633",
|
|
3321
|
-
"type": "color"
|
|
3720
|
+
"type": "color",
|
|
3721
|
+
"description": "Strong danger border for destructive actions and errors"
|
|
3322
3722
|
},
|
|
3323
3723
|
"borderColor-danger-muted": {
|
|
3324
3724
|
"key": "{borderColor.danger.muted}",
|
|
@@ -3395,6 +3795,10 @@
|
|
|
3395
3795
|
"isSource": true,
|
|
3396
3796
|
"$type": "color"
|
|
3397
3797
|
}
|
|
3798
|
+
},
|
|
3799
|
+
"org.primer.llm": {
|
|
3800
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3801
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3398
3802
|
}
|
|
3399
3803
|
},
|
|
3400
3804
|
"alpha": 0.4,
|
|
@@ -3403,6 +3807,7 @@
|
|
|
3403
3807
|
"original": {
|
|
3404
3808
|
"$value": "{base.color.red.4}",
|
|
3405
3809
|
"$type": "color",
|
|
3810
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3406
3811
|
"$extensions": {
|
|
3407
3812
|
"org.primer.figma": {
|
|
3408
3813
|
"collection": "mode",
|
|
@@ -3476,6 +3881,10 @@
|
|
|
3476
3881
|
"isSource": true,
|
|
3477
3882
|
"$type": "color"
|
|
3478
3883
|
}
|
|
3884
|
+
},
|
|
3885
|
+
"org.primer.llm": {
|
|
3886
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3887
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3479
3888
|
}
|
|
3480
3889
|
},
|
|
3481
3890
|
"alpha": 0.4,
|
|
@@ -3485,7 +3894,8 @@
|
|
|
3485
3894
|
"attributes": {},
|
|
3486
3895
|
"path": ["borderColor", "danger", "muted"],
|
|
3487
3896
|
"value": "#f8514966",
|
|
3488
|
-
"type": "color"
|
|
3897
|
+
"type": "color",
|
|
3898
|
+
"description": "Subtle danger border for errors and destructive contexts"
|
|
3489
3899
|
},
|
|
3490
3900
|
"borderColor-default": {
|
|
3491
3901
|
"key": "{borderColor.default}",
|
|
@@ -3508,6 +3918,10 @@
|
|
|
3508
3918
|
"codeSyntax": {
|
|
3509
3919
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3510
3920
|
}
|
|
3921
|
+
},
|
|
3922
|
+
"org.primer.llm": {
|
|
3923
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3924
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3511
3925
|
}
|
|
3512
3926
|
},
|
|
3513
3927
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3515,6 +3929,7 @@
|
|
|
3515
3929
|
"original": {
|
|
3516
3930
|
"$value": "{base.color.neutral.7}",
|
|
3517
3931
|
"$type": "color",
|
|
3932
|
+
"$description": "Default border color for most UI elements",
|
|
3518
3933
|
"$extensions": {
|
|
3519
3934
|
"org.primer.overrides": {
|
|
3520
3935
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3534,6 +3949,10 @@
|
|
|
3534
3949
|
"codeSyntax": {
|
|
3535
3950
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3536
3951
|
}
|
|
3952
|
+
},
|
|
3953
|
+
"org.primer.llm": {
|
|
3954
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3955
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3537
3956
|
}
|
|
3538
3957
|
},
|
|
3539
3958
|
"key": "{borderColor.default}"
|
|
@@ -3542,7 +3961,8 @@
|
|
|
3542
3961
|
"attributes": {},
|
|
3543
3962
|
"path": ["borderColor", "default"],
|
|
3544
3963
|
"value": "#3d444d",
|
|
3545
|
-
"type": "color"
|
|
3964
|
+
"type": "color",
|
|
3965
|
+
"description": "Default border color for most UI elements"
|
|
3546
3966
|
},
|
|
3547
3967
|
"borderColor-disabled": {
|
|
3548
3968
|
"key": "{borderColor.disabled}",
|
|
@@ -3588,6 +4008,10 @@
|
|
|
3588
4008
|
"isSource": true,
|
|
3589
4009
|
"$type": "color"
|
|
3590
4010
|
}
|
|
4011
|
+
},
|
|
4012
|
+
"org.primer.llm": {
|
|
4013
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4014
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3591
4015
|
}
|
|
3592
4016
|
},
|
|
3593
4017
|
"alpha": 0.1,
|
|
@@ -3596,6 +4020,7 @@
|
|
|
3596
4020
|
"original": {
|
|
3597
4021
|
"$value": "{base.color.neutral.8}",
|
|
3598
4022
|
"$type": "color",
|
|
4023
|
+
"$description": "Border color for disabled interactive elements",
|
|
3599
4024
|
"$extensions": {
|
|
3600
4025
|
"org.primer.figma": {
|
|
3601
4026
|
"collection": "mode",
|
|
@@ -3638,6 +4063,10 @@
|
|
|
3638
4063
|
"isSource": true,
|
|
3639
4064
|
"$type": "color"
|
|
3640
4065
|
}
|
|
4066
|
+
},
|
|
4067
|
+
"org.primer.llm": {
|
|
4068
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4069
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3641
4070
|
}
|
|
3642
4071
|
},
|
|
3643
4072
|
"alpha": 0.1,
|
|
@@ -3647,7 +4076,8 @@
|
|
|
3647
4076
|
"attributes": {},
|
|
3648
4077
|
"path": ["borderColor", "disabled"],
|
|
3649
4078
|
"value": "#656c761a",
|
|
3650
|
-
"type": "color"
|
|
4079
|
+
"type": "color",
|
|
4080
|
+
"description": "Border color for disabled interactive elements"
|
|
3651
4081
|
},
|
|
3652
4082
|
"borderColor-done-emphasis": {
|
|
3653
4083
|
"key": "{borderColor.done.emphasis}",
|
|
@@ -3662,6 +4092,10 @@
|
|
|
3662
4092
|
},
|
|
3663
4093
|
"org.primer.overrides": {
|
|
3664
4094
|
"dark-dimmed-high-contrast": "#d2a8ff"
|
|
4095
|
+
},
|
|
4096
|
+
"org.primer.llm": {
|
|
4097
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4098
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3665
4099
|
}
|
|
3666
4100
|
},
|
|
3667
4101
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3669,6 +4103,7 @@
|
|
|
3669
4103
|
"original": {
|
|
3670
4104
|
"$value": "{base.color.purple.5}",
|
|
3671
4105
|
"$type": "color",
|
|
4106
|
+
"$description": "Strong border for completed/done state badges",
|
|
3672
4107
|
"$extensions": {
|
|
3673
4108
|
"org.primer.figma": {
|
|
3674
4109
|
"collection": "mode",
|
|
@@ -3680,6 +4115,10 @@
|
|
|
3680
4115
|
},
|
|
3681
4116
|
"org.primer.overrides": {
|
|
3682
4117
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4118
|
+
},
|
|
4119
|
+
"org.primer.llm": {
|
|
4120
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4121
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3683
4122
|
}
|
|
3684
4123
|
},
|
|
3685
4124
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3688,7 +4127,8 @@
|
|
|
3688
4127
|
"attributes": {},
|
|
3689
4128
|
"path": ["borderColor", "done", "emphasis"],
|
|
3690
4129
|
"value": "#8957e5",
|
|
3691
|
-
"type": "color"
|
|
4130
|
+
"type": "color",
|
|
4131
|
+
"description": "Strong border for completed/done state badges"
|
|
3692
4132
|
},
|
|
3693
4133
|
"borderColor-done-muted": {
|
|
3694
4134
|
"key": "{borderColor.done.muted}",
|
|
@@ -3752,6 +4192,10 @@
|
|
|
3752
4192
|
"isSource": true,
|
|
3753
4193
|
"$type": "color"
|
|
3754
4194
|
}
|
|
4195
|
+
},
|
|
4196
|
+
"org.primer.llm": {
|
|
4197
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4198
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3755
4199
|
}
|
|
3756
4200
|
},
|
|
3757
4201
|
"alpha": 0.4,
|
|
@@ -3760,6 +4204,7 @@
|
|
|
3760
4204
|
"original": {
|
|
3761
4205
|
"$value": "{base.color.purple.4}",
|
|
3762
4206
|
"$type": "color",
|
|
4207
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3763
4208
|
"$extensions": {
|
|
3764
4209
|
"org.primer.figma": {
|
|
3765
4210
|
"collection": "mode",
|
|
@@ -3820,6 +4265,10 @@
|
|
|
3820
4265
|
"isSource": true,
|
|
3821
4266
|
"$type": "color"
|
|
3822
4267
|
}
|
|
4268
|
+
},
|
|
4269
|
+
"org.primer.llm": {
|
|
4270
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4271
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3823
4272
|
}
|
|
3824
4273
|
},
|
|
3825
4274
|
"alpha": 0.4,
|
|
@@ -3829,7 +4278,8 @@
|
|
|
3829
4278
|
"attributes": {},
|
|
3830
4279
|
"path": ["borderColor", "done", "muted"],
|
|
3831
4280
|
"value": "#ab7df866",
|
|
3832
|
-
"type": "color"
|
|
4281
|
+
"type": "color",
|
|
4282
|
+
"description": "Subtle border for completed/done state indicators"
|
|
3833
4283
|
},
|
|
3834
4284
|
"borderColor-draft-emphasis": {
|
|
3835
4285
|
"key": "{borderColor.draft.emphasis}",
|
|
@@ -3841,6 +4291,10 @@
|
|
|
3841
4291
|
"codeSyntax": {
|
|
3842
4292
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3843
4293
|
}
|
|
4294
|
+
},
|
|
4295
|
+
"org.primer.llm": {
|
|
4296
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4297
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3844
4298
|
}
|
|
3845
4299
|
},
|
|
3846
4300
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3848,6 +4302,7 @@
|
|
|
3848
4302
|
"original": {
|
|
3849
4303
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3850
4304
|
"$type": "color",
|
|
4305
|
+
"$description": "Strong border for draft state badges",
|
|
3851
4306
|
"$extensions": {
|
|
3852
4307
|
"org.primer.figma": {
|
|
3853
4308
|
"collection": "mode",
|
|
@@ -3856,6 +4311,10 @@
|
|
|
3856
4311
|
"codeSyntax": {
|
|
3857
4312
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3858
4313
|
}
|
|
4314
|
+
},
|
|
4315
|
+
"org.primer.llm": {
|
|
4316
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4317
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3859
4318
|
}
|
|
3860
4319
|
},
|
|
3861
4320
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3864,7 +4323,8 @@
|
|
|
3864
4323
|
"attributes": {},
|
|
3865
4324
|
"path": ["borderColor", "draft", "emphasis"],
|
|
3866
4325
|
"value": "#656c76",
|
|
3867
|
-
"type": "color"
|
|
4326
|
+
"type": "color",
|
|
4327
|
+
"description": "Strong border for draft state badges"
|
|
3868
4328
|
},
|
|
3869
4329
|
"borderColor-draft-muted": {
|
|
3870
4330
|
"key": "{borderColor.draft.muted}",
|
|
@@ -3934,6 +4394,10 @@
|
|
|
3934
4394
|
"isSource": true,
|
|
3935
4395
|
"$type": "color"
|
|
3936
4396
|
}
|
|
4397
|
+
},
|
|
4398
|
+
"org.primer.llm": {
|
|
4399
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4400
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3937
4401
|
}
|
|
3938
4402
|
},
|
|
3939
4403
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3941,6 +4405,7 @@
|
|
|
3941
4405
|
"original": {
|
|
3942
4406
|
"$value": "{borderColor.neutral.muted}",
|
|
3943
4407
|
"$type": "color",
|
|
4408
|
+
"$description": "Subtle border for draft state indicators",
|
|
3944
4409
|
"$extensions": {
|
|
3945
4410
|
"org.primer.figma": {
|
|
3946
4411
|
"collection": "mode",
|
|
@@ -4007,6 +4472,10 @@
|
|
|
4007
4472
|
"isSource": true,
|
|
4008
4473
|
"$type": "color"
|
|
4009
4474
|
}
|
|
4475
|
+
},
|
|
4476
|
+
"org.primer.llm": {
|
|
4477
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4478
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4010
4479
|
}
|
|
4011
4480
|
},
|
|
4012
4481
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4015,7 +4484,8 @@
|
|
|
4015
4484
|
"attributes": {},
|
|
4016
4485
|
"path": ["borderColor", "draft", "muted"],
|
|
4017
4486
|
"value": "#3d444db3",
|
|
4018
|
-
"type": "color"
|
|
4487
|
+
"type": "color",
|
|
4488
|
+
"description": "Subtle border for draft state indicators"
|
|
4019
4489
|
},
|
|
4020
4490
|
"borderColor-emphasis": {
|
|
4021
4491
|
"key": "{borderColor.emphasis}",
|
|
@@ -4033,6 +4503,10 @@
|
|
|
4033
4503
|
"dark-dimmed-high-contrast": "#3d444d",
|
|
4034
4504
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
4035
4505
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
4506
|
+
},
|
|
4507
|
+
"org.primer.llm": {
|
|
4508
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4509
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4036
4510
|
}
|
|
4037
4511
|
},
|
|
4038
4512
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4040,6 +4514,7 @@
|
|
|
4040
4514
|
"original": {
|
|
4041
4515
|
"$value": "{base.color.neutral.8}",
|
|
4042
4516
|
"$type": "color",
|
|
4517
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4043
4518
|
"$extensions": {
|
|
4044
4519
|
"org.primer.figma": {
|
|
4045
4520
|
"collection": "mode",
|
|
@@ -4054,6 +4529,10 @@
|
|
|
4054
4529
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4055
4530
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4056
4531
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4532
|
+
},
|
|
4533
|
+
"org.primer.llm": {
|
|
4534
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4535
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4057
4536
|
}
|
|
4058
4537
|
},
|
|
4059
4538
|
"key": "{borderColor.emphasis}"
|
|
@@ -4062,7 +4541,8 @@
|
|
|
4062
4541
|
"attributes": {},
|
|
4063
4542
|
"path": ["borderColor", "emphasis"],
|
|
4064
4543
|
"value": "#656c76",
|
|
4065
|
-
"type": "color"
|
|
4544
|
+
"type": "color",
|
|
4545
|
+
"description": "Strong border for emphasis and visual weight"
|
|
4066
4546
|
},
|
|
4067
4547
|
"borderColor-muted": {
|
|
4068
4548
|
"key": "{borderColor.muted}",
|
|
@@ -4132,6 +4612,10 @@
|
|
|
4132
4612
|
"isSource": true,
|
|
4133
4613
|
"$type": "color"
|
|
4134
4614
|
}
|
|
4615
|
+
},
|
|
4616
|
+
"org.primer.llm": {
|
|
4617
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4618
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4135
4619
|
}
|
|
4136
4620
|
},
|
|
4137
4621
|
"alpha": 0.7,
|
|
@@ -4140,6 +4624,7 @@
|
|
|
4140
4624
|
"original": {
|
|
4141
4625
|
"$value": "{borderColor.default}",
|
|
4142
4626
|
"$type": "color",
|
|
4627
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4143
4628
|
"$extensions": {
|
|
4144
4629
|
"org.primer.figma": {
|
|
4145
4630
|
"collection": "mode",
|
|
@@ -4206,6 +4691,10 @@
|
|
|
4206
4691
|
"isSource": true,
|
|
4207
4692
|
"$type": "color"
|
|
4208
4693
|
}
|
|
4694
|
+
},
|
|
4695
|
+
"org.primer.llm": {
|
|
4696
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4697
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4209
4698
|
}
|
|
4210
4699
|
},
|
|
4211
4700
|
"alpha": 0.7,
|
|
@@ -4215,7 +4704,8 @@
|
|
|
4215
4704
|
"attributes": {},
|
|
4216
4705
|
"path": ["borderColor", "muted"],
|
|
4217
4706
|
"value": "#3d444db3",
|
|
4218
|
-
"type": "color"
|
|
4707
|
+
"type": "color",
|
|
4708
|
+
"description": "Subtle border for secondary elements and light separators"
|
|
4219
4709
|
},
|
|
4220
4710
|
"borderColor-neutral-emphasis": {
|
|
4221
4711
|
"key": "{borderColor.neutral.emphasis}",
|
|
@@ -4227,6 +4717,10 @@
|
|
|
4227
4717
|
},
|
|
4228
4718
|
"org.primer.overrides": {
|
|
4229
4719
|
"dark": "#656c76"
|
|
4720
|
+
},
|
|
4721
|
+
"org.primer.llm": {
|
|
4722
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4723
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4230
4724
|
}
|
|
4231
4725
|
},
|
|
4232
4726
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4234,6 +4728,7 @@
|
|
|
4234
4728
|
"original": {
|
|
4235
4729
|
"$value": "{borderColor.emphasis}",
|
|
4236
4730
|
"$type": "color",
|
|
4731
|
+
"$description": "Strong neutral semantic border",
|
|
4237
4732
|
"$extensions": {
|
|
4238
4733
|
"org.primer.figma": {
|
|
4239
4734
|
"collection": "mode",
|
|
@@ -4242,6 +4737,10 @@
|
|
|
4242
4737
|
},
|
|
4243
4738
|
"org.primer.overrides": {
|
|
4244
4739
|
"dark": "{borderColor.emphasis}"
|
|
4740
|
+
},
|
|
4741
|
+
"org.primer.llm": {
|
|
4742
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4743
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4245
4744
|
}
|
|
4246
4745
|
},
|
|
4247
4746
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4250,7 +4749,8 @@
|
|
|
4250
4749
|
"attributes": {},
|
|
4251
4750
|
"path": ["borderColor", "neutral", "emphasis"],
|
|
4252
4751
|
"value": "#656c76",
|
|
4253
|
-
"type": "color"
|
|
4752
|
+
"type": "color",
|
|
4753
|
+
"description": "Strong neutral semantic border"
|
|
4254
4754
|
},
|
|
4255
4755
|
"borderColor-neutral-muted": {
|
|
4256
4756
|
"key": "{borderColor.neutral.muted}",
|
|
@@ -4275,6 +4775,10 @@
|
|
|
4275
4775
|
"isSource": true,
|
|
4276
4776
|
"$type": "color"
|
|
4277
4777
|
}
|
|
4778
|
+
},
|
|
4779
|
+
"org.primer.llm": {
|
|
4780
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4781
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4278
4782
|
}
|
|
4279
4783
|
},
|
|
4280
4784
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4282,6 +4786,7 @@
|
|
|
4282
4786
|
"original": {
|
|
4283
4787
|
"$value": "{borderColor.muted}",
|
|
4284
4788
|
"$type": "color",
|
|
4789
|
+
"$description": "Subtle neutral semantic border",
|
|
4285
4790
|
"$extensions": {
|
|
4286
4791
|
"org.primer.figma": {
|
|
4287
4792
|
"collection": "mode",
|
|
@@ -4303,6 +4808,10 @@
|
|
|
4303
4808
|
"isSource": true,
|
|
4304
4809
|
"$type": "color"
|
|
4305
4810
|
}
|
|
4811
|
+
},
|
|
4812
|
+
"org.primer.llm": {
|
|
4813
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4814
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4306
4815
|
}
|
|
4307
4816
|
},
|
|
4308
4817
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4311,7 +4820,8 @@
|
|
|
4311
4820
|
"attributes": {},
|
|
4312
4821
|
"path": ["borderColor", "neutral", "muted"],
|
|
4313
4822
|
"value": "#3d444db3",
|
|
4314
|
-
"type": "color"
|
|
4823
|
+
"type": "color",
|
|
4824
|
+
"description": "Subtle neutral semantic border"
|
|
4315
4825
|
},
|
|
4316
4826
|
"borderColor-open-emphasis": {
|
|
4317
4827
|
"key": "{borderColor.open.emphasis}",
|
|
@@ -4333,6 +4843,10 @@
|
|
|
4333
4843
|
"dark-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
4334
4844
|
"light-protanopia-deuteranopia": "#bd561d",
|
|
4335
4845
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d"
|
|
4846
|
+
},
|
|
4847
|
+
"org.primer.llm": {
|
|
4848
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4849
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4336
4850
|
}
|
|
4337
4851
|
},
|
|
4338
4852
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4340,6 +4854,7 @@
|
|
|
4340
4854
|
"original": {
|
|
4341
4855
|
"$value": "{borderColor.success.emphasis}",
|
|
4342
4856
|
"$type": "color",
|
|
4857
|
+
"$description": "Strong border for open state badges",
|
|
4343
4858
|
"$extensions": {
|
|
4344
4859
|
"org.primer.figma": {
|
|
4345
4860
|
"collection": "mode",
|
|
@@ -4358,6 +4873,10 @@
|
|
|
4358
4873
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4359
4874
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4360
4875
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4876
|
+
},
|
|
4877
|
+
"org.primer.llm": {
|
|
4878
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4879
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4361
4880
|
}
|
|
4362
4881
|
},
|
|
4363
4882
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4366,7 +4885,8 @@
|
|
|
4366
4885
|
"attributes": {},
|
|
4367
4886
|
"path": ["borderColor", "open", "emphasis"],
|
|
4368
4887
|
"value": "#238636",
|
|
4369
|
-
"type": "color"
|
|
4888
|
+
"type": "color",
|
|
4889
|
+
"description": "Strong border for open state badges"
|
|
4370
4890
|
},
|
|
4371
4891
|
"borderColor-open-muted": {
|
|
4372
4892
|
"key": "{borderColor.open.muted}",
|
|
@@ -4436,6 +4956,10 @@
|
|
|
4436
4956
|
"isSource": true,
|
|
4437
4957
|
"$type": "color"
|
|
4438
4958
|
}
|
|
4959
|
+
},
|
|
4960
|
+
"org.primer.llm": {
|
|
4961
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4962
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4439
4963
|
}
|
|
4440
4964
|
},
|
|
4441
4965
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4443,6 +4967,7 @@
|
|
|
4443
4967
|
"original": {
|
|
4444
4968
|
"$value": "{borderColor.success.muted}",
|
|
4445
4969
|
"$type": "color",
|
|
4970
|
+
"$description": "Subtle border for open state indicators",
|
|
4446
4971
|
"$extensions": {
|
|
4447
4972
|
"org.primer.figma": {
|
|
4448
4973
|
"collection": "mode",
|
|
@@ -4509,6 +5034,10 @@
|
|
|
4509
5034
|
"isSource": true,
|
|
4510
5035
|
"$type": "color"
|
|
4511
5036
|
}
|
|
5037
|
+
},
|
|
5038
|
+
"org.primer.llm": {
|
|
5039
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5040
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4512
5041
|
}
|
|
4513
5042
|
},
|
|
4514
5043
|
"key": "{borderColor.open.muted}"
|
|
@@ -4517,7 +5046,8 @@
|
|
|
4517
5046
|
"attributes": {},
|
|
4518
5047
|
"path": ["borderColor", "open", "muted"],
|
|
4519
5048
|
"value": "#2ea04366",
|
|
4520
|
-
"type": "color"
|
|
5049
|
+
"type": "color",
|
|
5050
|
+
"description": "Subtle border for open state indicators"
|
|
4521
5051
|
},
|
|
4522
5052
|
"borderColor-severe-emphasis": {
|
|
4523
5053
|
"key": "{borderColor.severe.emphasis}",
|
|
@@ -4535,6 +5065,10 @@
|
|
|
4535
5065
|
"light-tritanopia": "#da3633",
|
|
4536
5066
|
"light-tritanopia-high-contrast": "#da3633",
|
|
4537
5067
|
"dark-dimmed-high-contrast": "#ffa657"
|
|
5068
|
+
},
|
|
5069
|
+
"org.primer.llm": {
|
|
5070
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5071
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4538
5072
|
}
|
|
4539
5073
|
},
|
|
4540
5074
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4542,6 +5076,7 @@
|
|
|
4542
5076
|
"original": {
|
|
4543
5077
|
"$value": "{base.color.orange.5}",
|
|
4544
5078
|
"$type": "color",
|
|
5079
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4545
5080
|
"$extensions": {
|
|
4546
5081
|
"org.primer.figma": {
|
|
4547
5082
|
"collection": "mode",
|
|
@@ -4556,6 +5091,10 @@
|
|
|
4556
5091
|
"light-tritanopia": "{base.color.red.5}",
|
|
4557
5092
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4558
5093
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5094
|
+
},
|
|
5095
|
+
"org.primer.llm": {
|
|
5096
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5097
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4559
5098
|
}
|
|
4560
5099
|
},
|
|
4561
5100
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4564,7 +5103,8 @@
|
|
|
4564
5103
|
"attributes": {},
|
|
4565
5104
|
"path": ["borderColor", "severe", "emphasis"],
|
|
4566
5105
|
"value": "#bd561d",
|
|
4567
|
-
"type": "color"
|
|
5106
|
+
"type": "color",
|
|
5107
|
+
"description": "Strong severe border for prominent high-priority warnings"
|
|
4568
5108
|
},
|
|
4569
5109
|
"borderColor-severe-muted": {
|
|
4570
5110
|
"key": "{borderColor.severe.muted}",
|
|
@@ -4623,6 +5163,10 @@
|
|
|
4623
5163
|
"isSource": true,
|
|
4624
5164
|
"$type": "color"
|
|
4625
5165
|
}
|
|
5166
|
+
},
|
|
5167
|
+
"org.primer.llm": {
|
|
5168
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5169
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4626
5170
|
}
|
|
4627
5171
|
},
|
|
4628
5172
|
"alpha": 0.4,
|
|
@@ -4631,6 +5175,7 @@
|
|
|
4631
5175
|
"original": {
|
|
4632
5176
|
"$value": "{base.color.orange.4}",
|
|
4633
5177
|
"$type": "color",
|
|
5178
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4634
5179
|
"$extensions": {
|
|
4635
5180
|
"org.primer.figma": {
|
|
4636
5181
|
"collection": "mode",
|
|
@@ -4686,6 +5231,10 @@
|
|
|
4686
5231
|
"isSource": true,
|
|
4687
5232
|
"$type": "color"
|
|
4688
5233
|
}
|
|
5234
|
+
},
|
|
5235
|
+
"org.primer.llm": {
|
|
5236
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5237
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4689
5238
|
}
|
|
4690
5239
|
},
|
|
4691
5240
|
"alpha": 0.4,
|
|
@@ -4695,7 +5244,8 @@
|
|
|
4695
5244
|
"attributes": {},
|
|
4696
5245
|
"path": ["borderColor", "severe", "muted"],
|
|
4697
5246
|
"value": "#db6d2866",
|
|
4698
|
-
"type": "color"
|
|
5247
|
+
"type": "color",
|
|
5248
|
+
"description": "Subtle severe border for high-priority warnings"
|
|
4699
5249
|
},
|
|
4700
5250
|
"borderColor-sponsors-emphasis": {
|
|
4701
5251
|
"key": "{borderColor.sponsors.emphasis}",
|
|
@@ -4710,6 +5260,10 @@
|
|
|
4710
5260
|
},
|
|
4711
5261
|
"org.primer.overrides": {
|
|
4712
5262
|
"dark-dimmed-high-contrast": "#f778ba"
|
|
5263
|
+
},
|
|
5264
|
+
"org.primer.llm": {
|
|
5265
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5266
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4713
5267
|
}
|
|
4714
5268
|
},
|
|
4715
5269
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4717,6 +5271,7 @@
|
|
|
4717
5271
|
"original": {
|
|
4718
5272
|
"$value": "{base.color.pink.5}",
|
|
4719
5273
|
"$type": "color",
|
|
5274
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4720
5275
|
"$extensions": {
|
|
4721
5276
|
"org.primer.figma": {
|
|
4722
5277
|
"collection": "mode",
|
|
@@ -4728,6 +5283,10 @@
|
|
|
4728
5283
|
},
|
|
4729
5284
|
"org.primer.overrides": {
|
|
4730
5285
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5286
|
+
},
|
|
5287
|
+
"org.primer.llm": {
|
|
5288
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5289
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4731
5290
|
}
|
|
4732
5291
|
},
|
|
4733
5292
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4736,7 +5295,8 @@
|
|
|
4736
5295
|
"attributes": {},
|
|
4737
5296
|
"path": ["borderColor", "sponsors", "emphasis"],
|
|
4738
5297
|
"value": "#bf4b8a",
|
|
4739
|
-
"type": "color"
|
|
5298
|
+
"type": "color",
|
|
5299
|
+
"description": "Strong border for prominent GitHub Sponsors elements"
|
|
4740
5300
|
},
|
|
4741
5301
|
"borderColor-sponsors-muted": {
|
|
4742
5302
|
"key": "{borderColor.sponsors.muted}",
|
|
@@ -4800,6 +5360,10 @@
|
|
|
4800
5360
|
"isSource": true,
|
|
4801
5361
|
"$type": "color"
|
|
4802
5362
|
}
|
|
5363
|
+
},
|
|
5364
|
+
"org.primer.llm": {
|
|
5365
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5366
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4803
5367
|
}
|
|
4804
5368
|
},
|
|
4805
5369
|
"alpha": 0.4,
|
|
@@ -4808,6 +5372,7 @@
|
|
|
4808
5372
|
"original": {
|
|
4809
5373
|
"$value": "{base.color.pink.4}",
|
|
4810
5374
|
"$type": "color",
|
|
5375
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4811
5376
|
"$extensions": {
|
|
4812
5377
|
"org.primer.figma": {
|
|
4813
5378
|
"collection": "mode",
|
|
@@ -4868,6 +5433,10 @@
|
|
|
4868
5433
|
"isSource": true,
|
|
4869
5434
|
"$type": "color"
|
|
4870
5435
|
}
|
|
5436
|
+
},
|
|
5437
|
+
"org.primer.llm": {
|
|
5438
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5439
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4871
5440
|
}
|
|
4872
5441
|
},
|
|
4873
5442
|
"alpha": 0.4,
|
|
@@ -4877,7 +5446,8 @@
|
|
|
4877
5446
|
"attributes": {},
|
|
4878
5447
|
"path": ["borderColor", "sponsors", "muted"],
|
|
4879
5448
|
"value": "#db61a266",
|
|
4880
|
-
"type": "color"
|
|
5449
|
+
"type": "color",
|
|
5450
|
+
"description": "Subtle border for GitHub Sponsors content"
|
|
4881
5451
|
},
|
|
4882
5452
|
"borderColor-success-emphasis": {
|
|
4883
5453
|
"key": "{borderColor.success.emphasis}",
|
|
@@ -4900,6 +5470,10 @@
|
|
|
4900
5470
|
"light-protanopia-deuteranopia": "#1f6feb",
|
|
4901
5471
|
"light-protanopia-deuteranopia-high-contrast": "#1f6feb",
|
|
4902
5472
|
"dark-dimmed-high-contrast": "#56d364"
|
|
5473
|
+
},
|
|
5474
|
+
"org.primer.llm": {
|
|
5475
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5476
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4903
5477
|
}
|
|
4904
5478
|
},
|
|
4905
5479
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4907,6 +5481,7 @@
|
|
|
4907
5481
|
"original": {
|
|
4908
5482
|
"$value": "{base.color.green.5}",
|
|
4909
5483
|
"$type": "color",
|
|
5484
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4910
5485
|
"$extensions": {
|
|
4911
5486
|
"org.primer.figma": {
|
|
4912
5487
|
"collection": "mode",
|
|
@@ -4926,6 +5501,10 @@
|
|
|
4926
5501
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4927
5502
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4928
5503
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5504
|
+
},
|
|
5505
|
+
"org.primer.llm": {
|
|
5506
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5507
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4929
5508
|
}
|
|
4930
5509
|
},
|
|
4931
5510
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4934,7 +5513,8 @@
|
|
|
4934
5513
|
"attributes": {},
|
|
4935
5514
|
"path": ["borderColor", "success", "emphasis"],
|
|
4936
5515
|
"value": "#238636",
|
|
4937
|
-
"type": "color"
|
|
5516
|
+
"type": "color",
|
|
5517
|
+
"description": "Strong success border for prominent positive elements"
|
|
4938
5518
|
},
|
|
4939
5519
|
"borderColor-success-muted": {
|
|
4940
5520
|
"key": "{borderColor.success.muted}",
|
|
@@ -5025,6 +5605,10 @@
|
|
|
5025
5605
|
"isSource": true,
|
|
5026
5606
|
"$type": "color"
|
|
5027
5607
|
}
|
|
5608
|
+
},
|
|
5609
|
+
"org.primer.llm": {
|
|
5610
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5611
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5028
5612
|
}
|
|
5029
5613
|
},
|
|
5030
5614
|
"alpha": 0.4,
|
|
@@ -5033,6 +5617,7 @@
|
|
|
5033
5617
|
"original": {
|
|
5034
5618
|
"$value": "{base.color.green.4}",
|
|
5035
5619
|
"$type": "color",
|
|
5620
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5036
5621
|
"$extensions": {
|
|
5037
5622
|
"org.primer.figma": {
|
|
5038
5623
|
"collection": "mode",
|
|
@@ -5120,6 +5705,10 @@
|
|
|
5120
5705
|
"isSource": true,
|
|
5121
5706
|
"$type": "color"
|
|
5122
5707
|
}
|
|
5708
|
+
},
|
|
5709
|
+
"org.primer.llm": {
|
|
5710
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5711
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5123
5712
|
}
|
|
5124
5713
|
},
|
|
5125
5714
|
"alpha": 0.4,
|
|
@@ -5129,7 +5718,8 @@
|
|
|
5129
5718
|
"attributes": {},
|
|
5130
5719
|
"path": ["borderColor", "success", "muted"],
|
|
5131
5720
|
"value": "#2ea04366",
|
|
5132
|
-
"type": "color"
|
|
5721
|
+
"type": "color",
|
|
5722
|
+
"description": "Subtle success border for positive feedback elements"
|
|
5133
5723
|
},
|
|
5134
5724
|
"borderColor-translucent": {
|
|
5135
5725
|
"key": "{borderColor.translucent}",
|
|
@@ -5189,6 +5779,10 @@
|
|
|
5189
5779
|
"isSource": true,
|
|
5190
5780
|
"$type": "color"
|
|
5191
5781
|
}
|
|
5782
|
+
},
|
|
5783
|
+
"org.primer.llm": {
|
|
5784
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5785
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5192
5786
|
}
|
|
5193
5787
|
},
|
|
5194
5788
|
"alpha": 0.15,
|
|
@@ -5197,6 +5791,7 @@
|
|
|
5197
5791
|
"original": {
|
|
5198
5792
|
"$value": "{base.color.neutral.13}",
|
|
5199
5793
|
"$type": "color",
|
|
5794
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5200
5795
|
"$extensions": {
|
|
5201
5796
|
"org.primer.figma": {
|
|
5202
5797
|
"collection": "mode",
|
|
@@ -5253,6 +5848,10 @@
|
|
|
5253
5848
|
"isSource": true,
|
|
5254
5849
|
"$type": "color"
|
|
5255
5850
|
}
|
|
5851
|
+
},
|
|
5852
|
+
"org.primer.llm": {
|
|
5853
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5854
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5256
5855
|
}
|
|
5257
5856
|
},
|
|
5258
5857
|
"alpha": 0.15,
|
|
@@ -5262,7 +5861,8 @@
|
|
|
5262
5861
|
"attributes": {},
|
|
5263
5862
|
"path": ["borderColor", "translucent"],
|
|
5264
5863
|
"value": "#ffffff26",
|
|
5265
|
-
"type": "color"
|
|
5864
|
+
"type": "color",
|
|
5865
|
+
"description": "Semi-transparent border for overlays and layered elements"
|
|
5266
5866
|
},
|
|
5267
5867
|
"borderColor-transparent": {
|
|
5268
5868
|
"key": "{borderColor.transparent}",
|
|
@@ -5278,6 +5878,7 @@
|
|
|
5278
5878
|
"original": {
|
|
5279
5879
|
"$value": "{base.color.transparent}",
|
|
5280
5880
|
"$type": "color",
|
|
5881
|
+
"$description": "Fully transparent border",
|
|
5281
5882
|
"$extensions": {
|
|
5282
5883
|
"org.primer.figma": {
|
|
5283
5884
|
"collection": "mode",
|
|
@@ -5291,7 +5892,8 @@
|
|
|
5291
5892
|
"attributes": {},
|
|
5292
5893
|
"path": ["borderColor", "transparent"],
|
|
5293
5894
|
"value": "#00000000",
|
|
5294
|
-
"type": "color"
|
|
5895
|
+
"type": "color",
|
|
5896
|
+
"description": "Fully transparent border"
|
|
5295
5897
|
},
|
|
5296
5898
|
"borderColor-upsell-emphasis": {
|
|
5297
5899
|
"key": "{borderColor.upsell.emphasis}",
|
|
@@ -5303,6 +5905,10 @@
|
|
|
5303
5905
|
"codeSyntax": {
|
|
5304
5906
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5305
5907
|
}
|
|
5908
|
+
},
|
|
5909
|
+
"org.primer.llm": {
|
|
5910
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5911
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5306
5912
|
}
|
|
5307
5913
|
},
|
|
5308
5914
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5310,6 +5916,7 @@
|
|
|
5310
5916
|
"original": {
|
|
5311
5917
|
"$value": "{borderColor.done.emphasis}",
|
|
5312
5918
|
"$type": "color",
|
|
5919
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5313
5920
|
"$extensions": {
|
|
5314
5921
|
"org.primer.figma": {
|
|
5315
5922
|
"collection": "mode",
|
|
@@ -5318,6 +5925,10 @@
|
|
|
5318
5925
|
"codeSyntax": {
|
|
5319
5926
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5320
5927
|
}
|
|
5928
|
+
},
|
|
5929
|
+
"org.primer.llm": {
|
|
5930
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5931
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5321
5932
|
}
|
|
5322
5933
|
},
|
|
5323
5934
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5326,7 +5937,8 @@
|
|
|
5326
5937
|
"attributes": {},
|
|
5327
5938
|
"path": ["borderColor", "upsell", "emphasis"],
|
|
5328
5939
|
"value": "#8957e5",
|
|
5329
|
-
"type": "color"
|
|
5940
|
+
"type": "color",
|
|
5941
|
+
"description": "Strong border for prominent upsell elements"
|
|
5330
5942
|
},
|
|
5331
5943
|
"borderColor-upsell-muted": {
|
|
5332
5944
|
"key": "{borderColor.upsell.muted}",
|
|
@@ -5338,6 +5950,10 @@
|
|
|
5338
5950
|
"codeSyntax": {
|
|
5339
5951
|
"web": "var(--borderColor-upsell-muted)"
|
|
5340
5952
|
}
|
|
5953
|
+
},
|
|
5954
|
+
"org.primer.llm": {
|
|
5955
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5956
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5341
5957
|
}
|
|
5342
5958
|
},
|
|
5343
5959
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5345,6 +5961,7 @@
|
|
|
5345
5961
|
"original": {
|
|
5346
5962
|
"$value": "{borderColor.done.muted}",
|
|
5347
5963
|
"$type": "color",
|
|
5964
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5348
5965
|
"$extensions": {
|
|
5349
5966
|
"org.primer.figma": {
|
|
5350
5967
|
"collection": "mode",
|
|
@@ -5353,6 +5970,10 @@
|
|
|
5353
5970
|
"codeSyntax": {
|
|
5354
5971
|
"web": "var(--borderColor-upsell-muted)"
|
|
5355
5972
|
}
|
|
5973
|
+
},
|
|
5974
|
+
"org.primer.llm": {
|
|
5975
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5976
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5356
5977
|
}
|
|
5357
5978
|
},
|
|
5358
5979
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -5361,7 +5982,8 @@
|
|
|
5361
5982
|
"attributes": {},
|
|
5362
5983
|
"path": ["borderColor", "upsell", "muted"],
|
|
5363
5984
|
"value": "#ab7df866",
|
|
5364
|
-
"type": "color"
|
|
5985
|
+
"type": "color",
|
|
5986
|
+
"description": "Subtle border for upsell and promotional content"
|
|
5365
5987
|
},
|
|
5366
5988
|
"button-danger-bgColor-active": {
|
|
5367
5989
|
"key": "{button.danger.bgColor.active}",
|
|
@@ -36518,6 +37140,10 @@
|
|
|
36518
37140
|
"light-high-contrast": "#1158c7",
|
|
36519
37141
|
"light-tritanopia-high-contrast": "#1158c7",
|
|
36520
37142
|
"light-protanopia-deuteranopia-high-contrast": "#1158c7"
|
|
37143
|
+
},
|
|
37144
|
+
"org.primer.llm": {
|
|
37145
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37146
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36521
37147
|
}
|
|
36522
37148
|
},
|
|
36523
37149
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36525,6 +37151,7 @@
|
|
|
36525
37151
|
"original": {
|
|
36526
37152
|
"$value": "#4493F8",
|
|
36527
37153
|
"$type": "color",
|
|
37154
|
+
"$description": "Accent text for links and interactive elements",
|
|
36528
37155
|
"$extensions": {
|
|
36529
37156
|
"org.primer.figma": {
|
|
36530
37157
|
"collection": "mode",
|
|
@@ -36544,6 +37171,10 @@
|
|
|
36544
37171
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36545
37172
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36546
37173
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37174
|
+
},
|
|
37175
|
+
"org.primer.llm": {
|
|
37176
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37177
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36547
37178
|
}
|
|
36548
37179
|
},
|
|
36549
37180
|
"key": "{fgColor.accent}"
|
|
@@ -36552,7 +37183,8 @@
|
|
|
36552
37183
|
"attributes": {},
|
|
36553
37184
|
"path": ["fgColor", "accent"],
|
|
36554
37185
|
"value": "#4493f8",
|
|
36555
|
-
"type": "color"
|
|
37186
|
+
"type": "color",
|
|
37187
|
+
"description": "Accent text for links and interactive elements"
|
|
36556
37188
|
},
|
|
36557
37189
|
"fgColor-attention": {
|
|
36558
37190
|
"key": "{fgColor.attention}",
|
|
@@ -36571,6 +37203,10 @@
|
|
|
36571
37203
|
"light-protanopia-deuteranopia-high-contrast": "#845306",
|
|
36572
37204
|
"light-tritanopia-high-contrast": "#845306",
|
|
36573
37205
|
"dark-dimmed-high-contrast": "#f2cc60"
|
|
37206
|
+
},
|
|
37207
|
+
"org.primer.llm": {
|
|
37208
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37209
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36574
37210
|
}
|
|
36575
37211
|
},
|
|
36576
37212
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36578,6 +37214,7 @@
|
|
|
36578
37214
|
"original": {
|
|
36579
37215
|
"$value": "{base.color.yellow.3}",
|
|
36580
37216
|
"$type": "color",
|
|
37217
|
+
"$description": "Attention text for warnings and caution states",
|
|
36581
37218
|
"$extensions": {
|
|
36582
37219
|
"org.primer.figma": {
|
|
36583
37220
|
"collection": "mode",
|
|
@@ -36593,6 +37230,10 @@
|
|
|
36593
37230
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36594
37231
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36595
37232
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37233
|
+
},
|
|
37234
|
+
"org.primer.llm": {
|
|
37235
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37236
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36596
37237
|
}
|
|
36597
37238
|
},
|
|
36598
37239
|
"key": "{fgColor.attention}"
|
|
@@ -36601,7 +37242,8 @@
|
|
|
36601
37242
|
"attributes": {},
|
|
36602
37243
|
"path": ["fgColor", "attention"],
|
|
36603
37244
|
"value": "#d29922",
|
|
36604
|
-
"type": "color"
|
|
37245
|
+
"type": "color",
|
|
37246
|
+
"description": "Attention text for warnings and caution states"
|
|
36605
37247
|
},
|
|
36606
37248
|
"fgColor-black": {
|
|
36607
37249
|
"key": "{fgColor.black}",
|
|
@@ -36613,6 +37255,10 @@
|
|
|
36613
37255
|
},
|
|
36614
37256
|
"org.primer.overrides": {
|
|
36615
37257
|
"dark": "#010409"
|
|
37258
|
+
},
|
|
37259
|
+
"org.primer.llm": {
|
|
37260
|
+
"doNotUse": true,
|
|
37261
|
+
"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."
|
|
36616
37262
|
}
|
|
36617
37263
|
},
|
|
36618
37264
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36620,6 +37266,7 @@
|
|
|
36620
37266
|
"original": {
|
|
36621
37267
|
"$value": "{base.color.neutral.0}",
|
|
36622
37268
|
"$type": "color",
|
|
37269
|
+
"$description": "Pure black text",
|
|
36623
37270
|
"$extensions": {
|
|
36624
37271
|
"org.primer.figma": {
|
|
36625
37272
|
"collection": "mode",
|
|
@@ -36628,6 +37275,10 @@
|
|
|
36628
37275
|
},
|
|
36629
37276
|
"org.primer.overrides": {
|
|
36630
37277
|
"dark": "{base.color.neutral.0}"
|
|
37278
|
+
},
|
|
37279
|
+
"org.primer.llm": {
|
|
37280
|
+
"doNotUse": true,
|
|
37281
|
+
"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."
|
|
36631
37282
|
}
|
|
36632
37283
|
},
|
|
36633
37284
|
"key": "{fgColor.black}"
|
|
@@ -36636,7 +37287,8 @@
|
|
|
36636
37287
|
"attributes": {},
|
|
36637
37288
|
"path": ["fgColor", "black"],
|
|
36638
37289
|
"value": "#010409",
|
|
36639
|
-
"type": "color"
|
|
37290
|
+
"type": "color",
|
|
37291
|
+
"description": "Pure black text"
|
|
36640
37292
|
},
|
|
36641
37293
|
"fgColor-closed": {
|
|
36642
37294
|
"key": "{fgColor.closed}",
|
|
@@ -36658,6 +37310,10 @@
|
|
|
36658
37310
|
"dark-tritanopia-high-contrast": "#9198a1",
|
|
36659
37311
|
"light-tritanopia": "#9198a1",
|
|
36660
37312
|
"light-tritanopia-high-contrast": "#9198a1"
|
|
37313
|
+
},
|
|
37314
|
+
"org.primer.llm": {
|
|
37315
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37316
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36661
37317
|
}
|
|
36662
37318
|
},
|
|
36663
37319
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36665,6 +37321,7 @@
|
|
|
36665
37321
|
"original": {
|
|
36666
37322
|
"$value": "{fgColor.danger}",
|
|
36667
37323
|
"$type": "color",
|
|
37324
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36668
37325
|
"$extensions": {
|
|
36669
37326
|
"org.primer.figma": {
|
|
36670
37327
|
"collection": "mode",
|
|
@@ -36683,6 +37340,10 @@
|
|
|
36683
37340
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36684
37341
|
"light-tritanopia": "{fgColor.muted}",
|
|
36685
37342
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37343
|
+
},
|
|
37344
|
+
"org.primer.llm": {
|
|
37345
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37346
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36686
37347
|
}
|
|
36687
37348
|
},
|
|
36688
37349
|
"key": "{fgColor.closed}"
|
|
@@ -36691,7 +37352,8 @@
|
|
|
36691
37352
|
"attributes": {},
|
|
36692
37353
|
"path": ["fgColor", "closed"],
|
|
36693
37354
|
"value": "#f85149",
|
|
36694
|
-
"type": "color"
|
|
37355
|
+
"type": "color",
|
|
37356
|
+
"description": "Text color for closed state indicators (issues, PRs)"
|
|
36695
37357
|
},
|
|
36696
37358
|
"fgColor-danger": {
|
|
36697
37359
|
"key": "{fgColor.danger}",
|
|
@@ -36715,6 +37377,10 @@
|
|
|
36715
37377
|
"dark-tritanopia-high-contrast": "#ff7b72",
|
|
36716
37378
|
"light-high-contrast": "#b62324",
|
|
36717
37379
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37380
|
+
},
|
|
37381
|
+
"org.primer.llm": {
|
|
37382
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37383
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36718
37384
|
}
|
|
36719
37385
|
},
|
|
36720
37386
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36722,6 +37388,7 @@
|
|
|
36722
37388
|
"original": {
|
|
36723
37389
|
"$value": "{base.color.red.4}",
|
|
36724
37390
|
"$type": "color",
|
|
37391
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36725
37392
|
"$extensions": {
|
|
36726
37393
|
"org.primer.figma": {
|
|
36727
37394
|
"collection": "mode",
|
|
@@ -36742,6 +37409,10 @@
|
|
|
36742
37409
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36743
37410
|
"light-high-contrast": "{base.color.red.6}",
|
|
36744
37411
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37412
|
+
},
|
|
37413
|
+
"org.primer.llm": {
|
|
37414
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37415
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36745
37416
|
}
|
|
36746
37417
|
},
|
|
36747
37418
|
"key": "{fgColor.danger}"
|
|
@@ -36750,7 +37421,8 @@
|
|
|
36750
37421
|
"attributes": {},
|
|
36751
37422
|
"path": ["fgColor", "danger"],
|
|
36752
37423
|
"value": "#f85149",
|
|
36753
|
-
"type": "color"
|
|
37424
|
+
"type": "color",
|
|
37425
|
+
"description": "Danger text for errors and destructive actions"
|
|
36754
37426
|
},
|
|
36755
37427
|
"fgColor-default": {
|
|
36756
37428
|
"key": "{fgColor.default}",
|
|
@@ -36768,8 +37440,12 @@
|
|
|
36768
37440
|
"dark-high-contrast": "#ffffff",
|
|
36769
37441
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
36770
37442
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff",
|
|
36771
|
-
"dark-dimmed": "#
|
|
37443
|
+
"dark-dimmed": "#f0f6fc",
|
|
36772
37444
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37445
|
+
},
|
|
37446
|
+
"org.primer.llm": {
|
|
37447
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37448
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36773
37449
|
}
|
|
36774
37450
|
},
|
|
36775
37451
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36777,6 +37453,7 @@
|
|
|
36777
37453
|
"original": {
|
|
36778
37454
|
"$value": "{base.color.neutral.12}",
|
|
36779
37455
|
"$type": "color",
|
|
37456
|
+
"$description": "Default text color for primary content and headings",
|
|
36780
37457
|
"$extensions": {
|
|
36781
37458
|
"org.primer.figma": {
|
|
36782
37459
|
"collection": "mode",
|
|
@@ -36791,8 +37468,12 @@
|
|
|
36791
37468
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36792
37469
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36793
37470
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36794
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37471
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36795
37472
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37473
|
+
},
|
|
37474
|
+
"org.primer.llm": {
|
|
37475
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37476
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36796
37477
|
}
|
|
36797
37478
|
},
|
|
36798
37479
|
"key": "{fgColor.default}"
|
|
@@ -36801,7 +37482,8 @@
|
|
|
36801
37482
|
"attributes": {},
|
|
36802
37483
|
"path": ["fgColor", "default"],
|
|
36803
37484
|
"value": "#f0f6fc",
|
|
36804
|
-
"type": "color"
|
|
37485
|
+
"type": "color",
|
|
37486
|
+
"description": "Default text color for primary content and headings"
|
|
36805
37487
|
},
|
|
36806
37488
|
"fgColor-disabled": {
|
|
36807
37489
|
"key": "{fgColor.disabled}",
|
|
@@ -36826,6 +37508,10 @@
|
|
|
36826
37508
|
"dark-high-contrast": "#656c76",
|
|
36827
37509
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36828
37510
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37511
|
+
},
|
|
37512
|
+
"org.primer.llm": {
|
|
37513
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37514
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36829
37515
|
}
|
|
36830
37516
|
},
|
|
36831
37517
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36833,6 +37519,7 @@
|
|
|
36833
37519
|
"original": {
|
|
36834
37520
|
"$value": "{base.color.neutral.8}",
|
|
36835
37521
|
"$type": "color",
|
|
37522
|
+
"$description": "Text color for disabled interactive elements",
|
|
36836
37523
|
"$extensions": {
|
|
36837
37524
|
"org.primer.figma": {
|
|
36838
37525
|
"collection": "mode",
|
|
@@ -36854,6 +37541,10 @@
|
|
|
36854
37541
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36855
37542
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36856
37543
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37544
|
+
},
|
|
37545
|
+
"org.primer.llm": {
|
|
37546
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37547
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36857
37548
|
}
|
|
36858
37549
|
},
|
|
36859
37550
|
"key": "{fgColor.disabled}"
|
|
@@ -36862,7 +37553,8 @@
|
|
|
36862
37553
|
"attributes": {},
|
|
36863
37554
|
"path": ["fgColor", "disabled"],
|
|
36864
37555
|
"value": "#656c76",
|
|
36865
|
-
"type": "color"
|
|
37556
|
+
"type": "color",
|
|
37557
|
+
"description": "Text color for disabled interactive elements"
|
|
36866
37558
|
},
|
|
36867
37559
|
"fgColor-done": {
|
|
36868
37560
|
"key": "{fgColor.done}",
|
|
@@ -36884,6 +37576,10 @@
|
|
|
36884
37576
|
"light-high-contrast": "#6e40c9",
|
|
36885
37577
|
"light-protanopia-deuteranopia-high-contrast": "#6e40c9",
|
|
36886
37578
|
"light-tritanopia-high-contrast": "#6e40c9"
|
|
37579
|
+
},
|
|
37580
|
+
"org.primer.llm": {
|
|
37581
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37582
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36887
37583
|
}
|
|
36888
37584
|
},
|
|
36889
37585
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36891,6 +37587,7 @@
|
|
|
36891
37587
|
"original": {
|
|
36892
37588
|
"$value": "{base.color.purple.4}",
|
|
36893
37589
|
"$type": "color",
|
|
37590
|
+
"$description": "Text color for completed/done state indicators",
|
|
36894
37591
|
"$extensions": {
|
|
36895
37592
|
"org.primer.figma": {
|
|
36896
37593
|
"collection": "mode",
|
|
@@ -36909,6 +37606,10 @@
|
|
|
36909
37606
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36910
37607
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36911
37608
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37609
|
+
},
|
|
37610
|
+
"org.primer.llm": {
|
|
37611
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37612
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36912
37613
|
}
|
|
36913
37614
|
},
|
|
36914
37615
|
"key": "{fgColor.done}"
|
|
@@ -36917,7 +37618,8 @@
|
|
|
36917
37618
|
"attributes": {},
|
|
36918
37619
|
"path": ["fgColor", "done"],
|
|
36919
37620
|
"value": "#ab7df8",
|
|
36920
|
-
"type": "color"
|
|
37621
|
+
"type": "color",
|
|
37622
|
+
"description": "Text color for completed/done state indicators"
|
|
36921
37623
|
},
|
|
36922
37624
|
"fgColor-draft": {
|
|
36923
37625
|
"key": "{fgColor.draft}",
|
|
@@ -36929,6 +37631,10 @@
|
|
|
36929
37631
|
"codeSyntax": {
|
|
36930
37632
|
"web": "var(--fgColor-draft)"
|
|
36931
37633
|
}
|
|
37634
|
+
},
|
|
37635
|
+
"org.primer.llm": {
|
|
37636
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37637
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36932
37638
|
}
|
|
36933
37639
|
},
|
|
36934
37640
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36936,6 +37642,7 @@
|
|
|
36936
37642
|
"original": {
|
|
36937
37643
|
"$value": "{fgColor.neutral}",
|
|
36938
37644
|
"$type": "color",
|
|
37645
|
+
"$description": "Text color for draft state indicators",
|
|
36939
37646
|
"$extensions": {
|
|
36940
37647
|
"org.primer.figma": {
|
|
36941
37648
|
"collection": "mode",
|
|
@@ -36944,6 +37651,10 @@
|
|
|
36944
37651
|
"codeSyntax": {
|
|
36945
37652
|
"web": "var(--fgColor-draft)"
|
|
36946
37653
|
}
|
|
37654
|
+
},
|
|
37655
|
+
"org.primer.llm": {
|
|
37656
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37657
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36947
37658
|
}
|
|
36948
37659
|
},
|
|
36949
37660
|
"key": "{fgColor.draft}"
|
|
@@ -36952,7 +37663,8 @@
|
|
|
36952
37663
|
"attributes": {},
|
|
36953
37664
|
"path": ["fgColor", "draft"],
|
|
36954
37665
|
"value": "#9198a1",
|
|
36955
|
-
"type": "color"
|
|
37666
|
+
"type": "color",
|
|
37667
|
+
"description": "Text color for draft state indicators"
|
|
36956
37668
|
},
|
|
36957
37669
|
"fgColor-link": {
|
|
36958
37670
|
"key": "{fgColor.link}",
|
|
@@ -36964,6 +37676,10 @@
|
|
|
36964
37676
|
"codeSyntax": {
|
|
36965
37677
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36966
37678
|
}
|
|
37679
|
+
},
|
|
37680
|
+
"org.primer.llm": {
|
|
37681
|
+
"usage": ["link-text", "hyperlink"],
|
|
37682
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36967
37683
|
}
|
|
36968
37684
|
},
|
|
36969
37685
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36971,6 +37687,7 @@
|
|
|
36971
37687
|
"original": {
|
|
36972
37688
|
"$value": "{fgColor.accent}",
|
|
36973
37689
|
"$type": "color",
|
|
37690
|
+
"$description": "Text color for hyperlinks",
|
|
36974
37691
|
"$extensions": {
|
|
36975
37692
|
"org.primer.figma": {
|
|
36976
37693
|
"collection": "mode",
|
|
@@ -36979,6 +37696,10 @@
|
|
|
36979
37696
|
"codeSyntax": {
|
|
36980
37697
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36981
37698
|
}
|
|
37699
|
+
},
|
|
37700
|
+
"org.primer.llm": {
|
|
37701
|
+
"usage": ["link-text", "hyperlink"],
|
|
37702
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36982
37703
|
}
|
|
36983
37704
|
},
|
|
36984
37705
|
"key": "{fgColor.link}"
|
|
@@ -36987,7 +37708,8 @@
|
|
|
36987
37708
|
"attributes": {},
|
|
36988
37709
|
"path": ["fgColor", "link"],
|
|
36989
37710
|
"value": "#4493f8",
|
|
36990
|
-
"type": "color"
|
|
37711
|
+
"type": "color",
|
|
37712
|
+
"description": "Text color for hyperlinks"
|
|
36991
37713
|
},
|
|
36992
37714
|
"fgColor-muted": {
|
|
36993
37715
|
"key": "{fgColor.muted}",
|
|
@@ -37008,6 +37730,10 @@
|
|
|
37008
37730
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37009
37731
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37010
37732
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37733
|
+
},
|
|
37734
|
+
"org.primer.llm": {
|
|
37735
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37736
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37011
37737
|
}
|
|
37012
37738
|
},
|
|
37013
37739
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37015,6 +37741,7 @@
|
|
|
37015
37741
|
"original": {
|
|
37016
37742
|
"$value": "{base.color.neutral.9}",
|
|
37017
37743
|
"$type": "color",
|
|
37744
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37018
37745
|
"$extensions": {
|
|
37019
37746
|
"org.primer.figma": {
|
|
37020
37747
|
"collection": "mode",
|
|
@@ -37032,6 +37759,10 @@
|
|
|
37032
37759
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37033
37760
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37034
37761
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37762
|
+
},
|
|
37763
|
+
"org.primer.llm": {
|
|
37764
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37765
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37035
37766
|
}
|
|
37036
37767
|
},
|
|
37037
37768
|
"key": "{fgColor.muted}"
|
|
@@ -37040,7 +37771,8 @@
|
|
|
37040
37771
|
"attributes": {},
|
|
37041
37772
|
"path": ["fgColor", "muted"],
|
|
37042
37773
|
"value": "#9198a1",
|
|
37043
|
-
"type": "color"
|
|
37774
|
+
"type": "color",
|
|
37775
|
+
"description": "Muted text for secondary content and less important information"
|
|
37044
37776
|
},
|
|
37045
37777
|
"fgColor-neutral": {
|
|
37046
37778
|
"key": "{fgColor.neutral}",
|
|
@@ -37058,6 +37790,10 @@
|
|
|
37058
37790
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37059
37791
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37060
37792
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37793
|
+
},
|
|
37794
|
+
"org.primer.llm": {
|
|
37795
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37796
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37061
37797
|
}
|
|
37062
37798
|
},
|
|
37063
37799
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37065,6 +37801,7 @@
|
|
|
37065
37801
|
"original": {
|
|
37066
37802
|
"$value": "{base.color.neutral.9}",
|
|
37067
37803
|
"$type": "color",
|
|
37804
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37068
37805
|
"$extensions": {
|
|
37069
37806
|
"org.primer.figma": {
|
|
37070
37807
|
"collection": "mode",
|
|
@@ -37079,6 +37816,10 @@
|
|
|
37079
37816
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37080
37817
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37081
37818
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37819
|
+
},
|
|
37820
|
+
"org.primer.llm": {
|
|
37821
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37822
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37082
37823
|
}
|
|
37083
37824
|
},
|
|
37084
37825
|
"key": "{fgColor.neutral}"
|
|
@@ -37087,7 +37828,8 @@
|
|
|
37087
37828
|
"attributes": {},
|
|
37088
37829
|
"path": ["fgColor", "neutral"],
|
|
37089
37830
|
"value": "#9198a1",
|
|
37090
|
-
"type": "color"
|
|
37831
|
+
"type": "color",
|
|
37832
|
+
"description": "Neutral semantic text for icons and secondary elements"
|
|
37091
37833
|
},
|
|
37092
37834
|
"fgColor-onEmphasis": {
|
|
37093
37835
|
"key": "{fgColor.onEmphasis}",
|
|
@@ -37104,6 +37846,10 @@
|
|
|
37104
37846
|
"dark": "#ffffff",
|
|
37105
37847
|
"dark-dimmed": "#f0f6fc",
|
|
37106
37848
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37849
|
+
},
|
|
37850
|
+
"org.primer.llm": {
|
|
37851
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37852
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37107
37853
|
}
|
|
37108
37854
|
},
|
|
37109
37855
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37111,6 +37857,7 @@
|
|
|
37111
37857
|
"original": {
|
|
37112
37858
|
"$value": "{base.color.neutral.13}",
|
|
37113
37859
|
"$type": "color",
|
|
37860
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37114
37861
|
"$extensions": {
|
|
37115
37862
|
"org.primer.figma": {
|
|
37116
37863
|
"collection": "mode",
|
|
@@ -37124,6 +37871,10 @@
|
|
|
37124
37871
|
"dark": "{base.color.neutral.13}",
|
|
37125
37872
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37126
37873
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37874
|
+
},
|
|
37875
|
+
"org.primer.llm": {
|
|
37876
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37877
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37127
37878
|
}
|
|
37128
37879
|
},
|
|
37129
37880
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37132,7 +37883,8 @@
|
|
|
37132
37883
|
"attributes": {},
|
|
37133
37884
|
"path": ["fgColor", "onEmphasis"],
|
|
37134
37885
|
"value": "#ffffff",
|
|
37135
|
-
"type": "color"
|
|
37886
|
+
"type": "color",
|
|
37887
|
+
"description": "Text color for use on emphasis backgrounds"
|
|
37136
37888
|
},
|
|
37137
37889
|
"fgColor-onInverse": {
|
|
37138
37890
|
"key": "{fgColor.onInverse}",
|
|
@@ -37141,6 +37893,10 @@
|
|
|
37141
37893
|
"collection": "mode",
|
|
37142
37894
|
"group": "semantic",
|
|
37143
37895
|
"scopes": ["fgColor"]
|
|
37896
|
+
},
|
|
37897
|
+
"org.primer.llm": {
|
|
37898
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37899
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37144
37900
|
}
|
|
37145
37901
|
},
|
|
37146
37902
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37148,11 +37904,16 @@
|
|
|
37148
37904
|
"original": {
|
|
37149
37905
|
"$value": "{base.color.neutral.0}",
|
|
37150
37906
|
"$type": "color",
|
|
37907
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37151
37908
|
"$extensions": {
|
|
37152
37909
|
"org.primer.figma": {
|
|
37153
37910
|
"collection": "mode",
|
|
37154
37911
|
"group": "semantic",
|
|
37155
37912
|
"scopes": ["fgColor"]
|
|
37913
|
+
},
|
|
37914
|
+
"org.primer.llm": {
|
|
37915
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37916
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37156
37917
|
}
|
|
37157
37918
|
},
|
|
37158
37919
|
"key": "{fgColor.onInverse}"
|
|
@@ -37161,7 +37922,8 @@
|
|
|
37161
37922
|
"attributes": {},
|
|
37162
37923
|
"path": ["fgColor", "onInverse"],
|
|
37163
37924
|
"value": "#010409",
|
|
37164
|
-
"type": "color"
|
|
37925
|
+
"type": "color",
|
|
37926
|
+
"description": "Text color for use on inverse backgrounds"
|
|
37165
37927
|
},
|
|
37166
37928
|
"fgColor-open": {
|
|
37167
37929
|
"key": "{fgColor.open}",
|
|
@@ -37183,6 +37945,10 @@
|
|
|
37183
37945
|
"dark-tritanopia-high-contrast": "#ffa198",
|
|
37184
37946
|
"light-tritanopia": "#da3633",
|
|
37185
37947
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37948
|
+
},
|
|
37949
|
+
"org.primer.llm": {
|
|
37950
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37951
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37186
37952
|
}
|
|
37187
37953
|
},
|
|
37188
37954
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37190,6 +37956,7 @@
|
|
|
37190
37956
|
"original": {
|
|
37191
37957
|
"$value": "{fgColor.success}",
|
|
37192
37958
|
"$type": "color",
|
|
37959
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37193
37960
|
"$extensions": {
|
|
37194
37961
|
"org.primer.figma": {
|
|
37195
37962
|
"collection": "mode",
|
|
@@ -37208,6 +37975,10 @@
|
|
|
37208
37975
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37209
37976
|
"light-tritanopia": "{base.color.red.5}",
|
|
37210
37977
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37978
|
+
},
|
|
37979
|
+
"org.primer.llm": {
|
|
37980
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37981
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37211
37982
|
}
|
|
37212
37983
|
},
|
|
37213
37984
|
"key": "{fgColor.open}"
|
|
@@ -37216,7 +37987,8 @@
|
|
|
37216
37987
|
"attributes": {},
|
|
37217
37988
|
"path": ["fgColor", "open"],
|
|
37218
37989
|
"value": "#3fb950",
|
|
37219
|
-
"type": "color"
|
|
37990
|
+
"type": "color",
|
|
37991
|
+
"description": "Text color for open state indicators (issues, PRs)"
|
|
37220
37992
|
},
|
|
37221
37993
|
"fgColor-severe": {
|
|
37222
37994
|
"key": "{fgColor.severe}",
|
|
@@ -37240,6 +38012,10 @@
|
|
|
37240
38012
|
"light-tritanopia": "#da3633",
|
|
37241
38013
|
"light-tritanopia-high-contrast": "#b62324",
|
|
37242
38014
|
"light-protanopia-deuteranopia-high-contrast": "#9b4215"
|
|
38015
|
+
},
|
|
38016
|
+
"org.primer.llm": {
|
|
38017
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38018
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37243
38019
|
}
|
|
37244
38020
|
},
|
|
37245
38021
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37247,6 +38023,7 @@
|
|
|
37247
38023
|
"original": {
|
|
37248
38024
|
"$value": "{base.color.orange.4}",
|
|
37249
38025
|
"$type": "color",
|
|
38026
|
+
"$description": "Severe text for high-priority warnings",
|
|
37250
38027
|
"$extensions": {
|
|
37251
38028
|
"org.primer.figma": {
|
|
37252
38029
|
"collection": "mode",
|
|
@@ -37267,6 +38044,10 @@
|
|
|
37267
38044
|
"light-tritanopia": "{base.color.red.5}",
|
|
37268
38045
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37269
38046
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38047
|
+
},
|
|
38048
|
+
"org.primer.llm": {
|
|
38049
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38050
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37270
38051
|
}
|
|
37271
38052
|
},
|
|
37272
38053
|
"key": "{fgColor.severe}"
|
|
@@ -37275,7 +38056,8 @@
|
|
|
37275
38056
|
"attributes": {},
|
|
37276
38057
|
"path": ["fgColor", "severe"],
|
|
37277
38058
|
"value": "#db6d28",
|
|
37278
|
-
"type": "color"
|
|
38059
|
+
"type": "color",
|
|
38060
|
+
"description": "Severe text for high-priority warnings"
|
|
37279
38061
|
},
|
|
37280
38062
|
"fgColor-sponsors": {
|
|
37281
38063
|
"key": "{fgColor.sponsors}",
|
|
@@ -37297,6 +38079,10 @@
|
|
|
37297
38079
|
"light-high-contrast": "#9e3670",
|
|
37298
38080
|
"light-protanopia-deuteranopia-high-contrast": "#9e3670",
|
|
37299
38081
|
"light-tritanopia-high-contrast": "#9e3670"
|
|
38082
|
+
},
|
|
38083
|
+
"org.primer.llm": {
|
|
38084
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38085
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37300
38086
|
}
|
|
37301
38087
|
},
|
|
37302
38088
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37304,6 +38090,7 @@
|
|
|
37304
38090
|
"original": {
|
|
37305
38091
|
"$value": "{base.color.pink.4}",
|
|
37306
38092
|
"$type": "color",
|
|
38093
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37307
38094
|
"$extensions": {
|
|
37308
38095
|
"org.primer.figma": {
|
|
37309
38096
|
"collection": "mode",
|
|
@@ -37322,6 +38109,10 @@
|
|
|
37322
38109
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37323
38110
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37324
38111
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38112
|
+
},
|
|
38113
|
+
"org.primer.llm": {
|
|
38114
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38115
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37325
38116
|
}
|
|
37326
38117
|
},
|
|
37327
38118
|
"key": "{fgColor.sponsors}"
|
|
@@ -37330,7 +38121,8 @@
|
|
|
37330
38121
|
"attributes": {},
|
|
37331
38122
|
"path": ["fgColor", "sponsors"],
|
|
37332
38123
|
"value": "#db61a2",
|
|
37333
|
-
"type": "color"
|
|
38124
|
+
"type": "color",
|
|
38125
|
+
"description": "Text color for GitHub Sponsors content"
|
|
37334
38126
|
},
|
|
37335
38127
|
"fgColor-success": {
|
|
37336
38128
|
"key": "{fgColor.success}",
|
|
@@ -37356,6 +38148,10 @@
|
|
|
37356
38148
|
"dark-tritanopia-high-contrast": "#79c0ff",
|
|
37357
38149
|
"light-tritanopia": "#1f6feb",
|
|
37358
38150
|
"light-tritanopia-high-contrast": "#1158c7"
|
|
38151
|
+
},
|
|
38152
|
+
"org.primer.llm": {
|
|
38153
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38154
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37359
38155
|
}
|
|
37360
38156
|
},
|
|
37361
38157
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37363,6 +38159,7 @@
|
|
|
37363
38159
|
"original": {
|
|
37364
38160
|
"$value": "{base.color.green.3}",
|
|
37365
38161
|
"$type": "color",
|
|
38162
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37366
38163
|
"$extensions": {
|
|
37367
38164
|
"org.primer.figma": {
|
|
37368
38165
|
"collection": "mode",
|
|
@@ -37385,6 +38182,10 @@
|
|
|
37385
38182
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37386
38183
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37387
38184
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38185
|
+
},
|
|
38186
|
+
"org.primer.llm": {
|
|
38187
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38188
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37388
38189
|
}
|
|
37389
38190
|
},
|
|
37390
38191
|
"key": "{fgColor.success}"
|
|
@@ -37393,7 +38194,8 @@
|
|
|
37393
38194
|
"attributes": {},
|
|
37394
38195
|
"path": ["fgColor", "success"],
|
|
37395
38196
|
"value": "#3fb950",
|
|
37396
|
-
"type": "color"
|
|
38197
|
+
"type": "color",
|
|
38198
|
+
"description": "Success text for positive feedback and completed states"
|
|
37397
38199
|
},
|
|
37398
38200
|
"fgColor-upsell": {
|
|
37399
38201
|
"key": "{fgColor.upsell}",
|
|
@@ -37405,6 +38207,10 @@
|
|
|
37405
38207
|
"codeSyntax": {
|
|
37406
38208
|
"web": "var(--fgColor-upsell)"
|
|
37407
38209
|
}
|
|
38210
|
+
},
|
|
38211
|
+
"org.primer.llm": {
|
|
38212
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38213
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37408
38214
|
}
|
|
37409
38215
|
},
|
|
37410
38216
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37412,6 +38218,7 @@
|
|
|
37412
38218
|
"original": {
|
|
37413
38219
|
"$value": "{fgColor.done}",
|
|
37414
38220
|
"$type": "color",
|
|
38221
|
+
"$description": "Text color for upsell and promotional content",
|
|
37415
38222
|
"$extensions": {
|
|
37416
38223
|
"org.primer.figma": {
|
|
37417
38224
|
"collection": "mode",
|
|
@@ -37420,6 +38227,10 @@
|
|
|
37420
38227
|
"codeSyntax": {
|
|
37421
38228
|
"web": "var(--fgColor-upsell)"
|
|
37422
38229
|
}
|
|
38230
|
+
},
|
|
38231
|
+
"org.primer.llm": {
|
|
38232
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38233
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37423
38234
|
}
|
|
37424
38235
|
},
|
|
37425
38236
|
"key": "{fgColor.upsell}"
|
|
@@ -37428,7 +38239,8 @@
|
|
|
37428
38239
|
"attributes": {},
|
|
37429
38240
|
"path": ["fgColor", "upsell"],
|
|
37430
38241
|
"value": "#ab7df8",
|
|
37431
|
-
"type": "color"
|
|
38242
|
+
"type": "color",
|
|
38243
|
+
"description": "Text color for upsell and promotional content"
|
|
37432
38244
|
},
|
|
37433
38245
|
"fgColor-white": {
|
|
37434
38246
|
"key": "{fgColor.white}",
|
|
@@ -37440,6 +38252,10 @@
|
|
|
37440
38252
|
},
|
|
37441
38253
|
"org.primer.overrides": {
|
|
37442
38254
|
"dark": "#ffffff"
|
|
38255
|
+
},
|
|
38256
|
+
"org.primer.llm": {
|
|
38257
|
+
"doNotUse": true,
|
|
38258
|
+
"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."
|
|
37443
38259
|
}
|
|
37444
38260
|
},
|
|
37445
38261
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37447,6 +38263,7 @@
|
|
|
37447
38263
|
"original": {
|
|
37448
38264
|
"$value": "{base.color.neutral.13}",
|
|
37449
38265
|
"$type": "color",
|
|
38266
|
+
"$description": "Pure white text",
|
|
37450
38267
|
"$extensions": {
|
|
37451
38268
|
"org.primer.figma": {
|
|
37452
38269
|
"collection": "mode",
|
|
@@ -37455,6 +38272,10 @@
|
|
|
37455
38272
|
},
|
|
37456
38273
|
"org.primer.overrides": {
|
|
37457
38274
|
"dark": "{base.color.neutral.13}"
|
|
38275
|
+
},
|
|
38276
|
+
"org.primer.llm": {
|
|
38277
|
+
"doNotUse": true,
|
|
38278
|
+
"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."
|
|
37458
38279
|
}
|
|
37459
38280
|
},
|
|
37460
38281
|
"key": "{fgColor.white}"
|
|
@@ -37463,10 +38284,17 @@
|
|
|
37463
38284
|
"attributes": {},
|
|
37464
38285
|
"path": ["fgColor", "white"],
|
|
37465
38286
|
"value": "#ffffff",
|
|
37466
|
-
"type": "color"
|
|
38287
|
+
"type": "color",
|
|
38288
|
+
"description": "Pure white text"
|
|
37467
38289
|
},
|
|
37468
38290
|
"focus-outline": {
|
|
37469
38291
|
"key": "{focus.outline}",
|
|
38292
|
+
"$extensions": {
|
|
38293
|
+
"org.primer.llm": {
|
|
38294
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38295
|
+
"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."
|
|
38296
|
+
}
|
|
38297
|
+
},
|
|
37470
38298
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37471
38299
|
"isSource": true,
|
|
37472
38300
|
"original": {
|
|
@@ -37476,13 +38304,21 @@
|
|
|
37476
38304
|
"width": "2px"
|
|
37477
38305
|
},
|
|
37478
38306
|
"$type": "border",
|
|
38307
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38308
|
+
"$extensions": {
|
|
38309
|
+
"org.primer.llm": {
|
|
38310
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38311
|
+
"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."
|
|
38312
|
+
}
|
|
38313
|
+
},
|
|
37479
38314
|
"key": "{focus.outline}"
|
|
37480
38315
|
},
|
|
37481
38316
|
"name": "focus-outline",
|
|
37482
38317
|
"attributes": {},
|
|
37483
38318
|
"path": ["focus", "outline"],
|
|
37484
38319
|
"value": "2px solid #1f6feb",
|
|
37485
|
-
"type": "border"
|
|
38320
|
+
"type": "border",
|
|
38321
|
+
"description": "Focus ring outline for keyboard navigation and accessibility."
|
|
37486
38322
|
},
|
|
37487
38323
|
"focus-outlineColor": {
|
|
37488
38324
|
"key": "{focus.outlineColor}",
|
|
@@ -37491,6 +38327,10 @@
|
|
|
37491
38327
|
"collection": "mode",
|
|
37492
38328
|
"group": "component (internal)",
|
|
37493
38329
|
"scopes": ["borderColor", "effectColor"]
|
|
38330
|
+
},
|
|
38331
|
+
"org.primer.llm": {
|
|
38332
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38333
|
+
"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."
|
|
37494
38334
|
}
|
|
37495
38335
|
},
|
|
37496
38336
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37498,11 +38338,16 @@
|
|
|
37498
38338
|
"original": {
|
|
37499
38339
|
"$value": "{borderColor.accent.emphasis}",
|
|
37500
38340
|
"$type": "color",
|
|
38341
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37501
38342
|
"$extensions": {
|
|
37502
38343
|
"org.primer.figma": {
|
|
37503
38344
|
"collection": "mode",
|
|
37504
38345
|
"group": "component (internal)",
|
|
37505
38346
|
"scopes": ["borderColor", "effectColor"]
|
|
38347
|
+
},
|
|
38348
|
+
"org.primer.llm": {
|
|
38349
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38350
|
+
"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
38351
|
}
|
|
37507
38352
|
},
|
|
37508
38353
|
"key": "{focus.outlineColor}"
|
|
@@ -37511,7 +38356,8 @@
|
|
|
37511
38356
|
"attributes": {},
|
|
37512
38357
|
"path": ["focus", "outlineColor"],
|
|
37513
38358
|
"value": "#1f6feb",
|
|
37514
|
-
"type": "color"
|
|
38359
|
+
"type": "color",
|
|
38360
|
+
"description": "Outline color for focus states on interactive elements"
|
|
37515
38361
|
},
|
|
37516
38362
|
"header-bgColor": {
|
|
37517
38363
|
"key": "{header.bgColor}",
|
|
@@ -46572,6 +47418,10 @@
|
|
|
46572
47418
|
"isSource": true,
|
|
46573
47419
|
"$type": "color"
|
|
46574
47420
|
}
|
|
47421
|
+
},
|
|
47422
|
+
"org.primer.llm": {
|
|
47423
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47424
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46575
47425
|
}
|
|
46576
47426
|
},
|
|
46577
47427
|
"alpha": 0.7,
|
|
@@ -46580,6 +47430,7 @@
|
|
|
46580
47430
|
"original": {
|
|
46581
47431
|
"$value": "{bgColor.accent.emphasis}",
|
|
46582
47432
|
"$type": "color",
|
|
47433
|
+
"$description": "Background color for text selection highlights",
|
|
46583
47434
|
"$extensions": {
|
|
46584
47435
|
"org.primer.figma": {
|
|
46585
47436
|
"collection": "mode",
|
|
@@ -46594,6 +47445,10 @@
|
|
|
46594
47445
|
"isSource": true,
|
|
46595
47446
|
"$type": "color"
|
|
46596
47447
|
}
|
|
47448
|
+
},
|
|
47449
|
+
"org.primer.llm": {
|
|
47450
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47451
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46597
47452
|
}
|
|
46598
47453
|
},
|
|
46599
47454
|
"alpha": 0.7,
|
|
@@ -46603,7 +47458,8 @@
|
|
|
46603
47458
|
"attributes": {},
|
|
46604
47459
|
"path": ["selection", "bgColor"],
|
|
46605
47460
|
"value": "#1f6febb3",
|
|
46606
|
-
"type": "color"
|
|
47461
|
+
"type": "color",
|
|
47462
|
+
"description": "Background color for text selection highlights"
|
|
46607
47463
|
},
|
|
46608
47464
|
"shadow-floating-large": {
|
|
46609
47465
|
"key": "{shadow.floating.large}",
|
|
@@ -46636,6 +47492,10 @@
|
|
|
46636
47492
|
"isSource": true,
|
|
46637
47493
|
"$type": "shadow"
|
|
46638
47494
|
}
|
|
47495
|
+
},
|
|
47496
|
+
"org.primer.llm": {
|
|
47497
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47498
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46639
47499
|
}
|
|
46640
47500
|
},
|
|
46641
47501
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46660,6 +47520,7 @@
|
|
|
46660
47520
|
}
|
|
46661
47521
|
],
|
|
46662
47522
|
"$type": "shadow",
|
|
47523
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46663
47524
|
"$extensions": {
|
|
46664
47525
|
"org.primer.figma": {
|
|
46665
47526
|
"collection": "mode",
|
|
@@ -46689,6 +47550,10 @@
|
|
|
46689
47550
|
"isSource": true,
|
|
46690
47551
|
"$type": "shadow"
|
|
46691
47552
|
}
|
|
47553
|
+
},
|
|
47554
|
+
"org.primer.llm": {
|
|
47555
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47556
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46692
47557
|
}
|
|
46693
47558
|
},
|
|
46694
47559
|
"key": "{shadow.floating.large}"
|
|
@@ -46697,7 +47562,8 @@
|
|
|
46697
47562
|
"attributes": {},
|
|
46698
47563
|
"path": ["shadow", "floating", "large"],
|
|
46699
47564
|
"value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
|
|
46700
|
-
"type": "shadow"
|
|
47565
|
+
"type": "shadow",
|
|
47566
|
+
"description": "Large floating shadow for modals and dialogs"
|
|
46701
47567
|
},
|
|
46702
47568
|
"shadow-floating-legacy": {
|
|
46703
47569
|
"key": "{shadow.floating.legacy}",
|
|
@@ -46727,6 +47593,10 @@
|
|
|
46727
47593
|
"isSource": true,
|
|
46728
47594
|
"$type": "shadow"
|
|
46729
47595
|
}
|
|
47596
|
+
},
|
|
47597
|
+
"org.primer.llm": {
|
|
47598
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47599
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46730
47600
|
}
|
|
46731
47601
|
},
|
|
46732
47602
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46751,6 +47621,7 @@
|
|
|
46751
47621
|
}
|
|
46752
47622
|
],
|
|
46753
47623
|
"$type": "shadow",
|
|
47624
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46754
47625
|
"$extensions": {
|
|
46755
47626
|
"org.primer.figma": {},
|
|
46756
47627
|
"org.primer.overrides": {
|
|
@@ -46777,6 +47648,10 @@
|
|
|
46777
47648
|
"isSource": true,
|
|
46778
47649
|
"$type": "shadow"
|
|
46779
47650
|
}
|
|
47651
|
+
},
|
|
47652
|
+
"org.primer.llm": {
|
|
47653
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47654
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46780
47655
|
}
|
|
46781
47656
|
},
|
|
46782
47657
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46785,7 +47660,8 @@
|
|
|
46785
47660
|
"attributes": {},
|
|
46786
47661
|
"path": ["shadow", "floating", "legacy"],
|
|
46787
47662
|
"value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46788
|
-
"type": "shadow"
|
|
47663
|
+
"type": "shadow",
|
|
47664
|
+
"description": "Legacy floating shadow for backward compatibility"
|
|
46789
47665
|
},
|
|
46790
47666
|
"shadow-floating-medium": {
|
|
46791
47667
|
"key": "{shadow.floating.medium}",
|
|
@@ -46842,6 +47718,10 @@
|
|
|
46842
47718
|
"isSource": true,
|
|
46843
47719
|
"$type": "shadow"
|
|
46844
47720
|
}
|
|
47721
|
+
},
|
|
47722
|
+
"org.primer.llm": {
|
|
47723
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47724
|
+
"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."
|
|
46845
47725
|
}
|
|
46846
47726
|
},
|
|
46847
47727
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46890,6 +47770,7 @@
|
|
|
46890
47770
|
}
|
|
46891
47771
|
],
|
|
46892
47772
|
"$type": "shadow",
|
|
47773
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46893
47774
|
"$extensions": {
|
|
46894
47775
|
"org.primer.figma": {
|
|
46895
47776
|
"collection": "mode",
|
|
@@ -46943,6 +47824,10 @@
|
|
|
46943
47824
|
"isSource": true,
|
|
46944
47825
|
"$type": "shadow"
|
|
46945
47826
|
}
|
|
47827
|
+
},
|
|
47828
|
+
"org.primer.llm": {
|
|
47829
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47830
|
+
"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."
|
|
46946
47831
|
}
|
|
46947
47832
|
},
|
|
46948
47833
|
"key": "{shadow.floating.medium}"
|
|
@@ -46951,7 +47836,8 @@
|
|
|
46951
47836
|
"attributes": {},
|
|
46952
47837
|
"path": ["shadow", "floating", "medium"],
|
|
46953
47838
|
"value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
|
|
46954
|
-
"type": "shadow"
|
|
47839
|
+
"type": "shadow",
|
|
47840
|
+
"description": "Medium floating shadow for popovers and action menus"
|
|
46955
47841
|
},
|
|
46956
47842
|
"shadow-floating-small": {
|
|
46957
47843
|
"key": "{shadow.floating.small}",
|
|
@@ -46992,6 +47878,10 @@
|
|
|
46992
47878
|
"isSource": true,
|
|
46993
47879
|
"$type": "shadow"
|
|
46994
47880
|
}
|
|
47881
|
+
},
|
|
47882
|
+
"org.primer.llm": {
|
|
47883
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47884
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46995
47885
|
}
|
|
46996
47886
|
},
|
|
46997
47887
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47024,6 +47914,7 @@
|
|
|
47024
47914
|
}
|
|
47025
47915
|
],
|
|
47026
47916
|
"$type": "shadow",
|
|
47917
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47027
47918
|
"$extensions": {
|
|
47028
47919
|
"org.primer.figma": {
|
|
47029
47920
|
"collection": "mode",
|
|
@@ -47061,6 +47952,10 @@
|
|
|
47061
47952
|
"isSource": true,
|
|
47062
47953
|
"$type": "shadow"
|
|
47063
47954
|
}
|
|
47955
|
+
},
|
|
47956
|
+
"org.primer.llm": {
|
|
47957
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47958
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47064
47959
|
}
|
|
47065
47960
|
},
|
|
47066
47961
|
"key": "{shadow.floating.small}"
|
|
@@ -47069,7 +47964,8 @@
|
|
|
47069
47964
|
"attributes": {},
|
|
47070
47965
|
"path": ["shadow", "floating", "small"],
|
|
47071
47966
|
"value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
47072
|
-
"type": "shadow"
|
|
47967
|
+
"type": "shadow",
|
|
47968
|
+
"description": "Small floating shadow for dropdowns, tooltips, and small overlays"
|
|
47073
47969
|
},
|
|
47074
47970
|
"shadow-floating-xlarge": {
|
|
47075
47971
|
"key": "{shadow.floating.xlarge}",
|
|
@@ -47102,6 +47998,10 @@
|
|
|
47102
47998
|
"isSource": true,
|
|
47103
47999
|
"$type": "shadow"
|
|
47104
48000
|
}
|
|
48001
|
+
},
|
|
48002
|
+
"org.primer.llm": {
|
|
48003
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48004
|
+
"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."
|
|
47105
48005
|
}
|
|
47106
48006
|
},
|
|
47107
48007
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47126,6 +48026,7 @@
|
|
|
47126
48026
|
}
|
|
47127
48027
|
],
|
|
47128
48028
|
"$type": "shadow",
|
|
48029
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47129
48030
|
"$extensions": {
|
|
47130
48031
|
"org.primer.figma": {
|
|
47131
48032
|
"collection": "mode",
|
|
@@ -47155,6 +48056,10 @@
|
|
|
47155
48056
|
"isSource": true,
|
|
47156
48057
|
"$type": "shadow"
|
|
47157
48058
|
}
|
|
48059
|
+
},
|
|
48060
|
+
"org.primer.llm": {
|
|
48061
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48062
|
+
"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."
|
|
47158
48063
|
}
|
|
47159
48064
|
},
|
|
47160
48065
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47163,7 +48068,8 @@
|
|
|
47163
48068
|
"attributes": {},
|
|
47164
48069
|
"path": ["shadow", "floating", "xlarge"],
|
|
47165
48070
|
"value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
|
|
47166
|
-
"type": "shadow"
|
|
48071
|
+
"type": "shadow",
|
|
48072
|
+
"description": "Extra large floating shadow for full-screen overlays and sheets"
|
|
47167
48073
|
},
|
|
47168
48074
|
"shadow-inset": {
|
|
47169
48075
|
"key": "{shadow.inset}",
|
|
@@ -47187,6 +48093,10 @@
|
|
|
47187
48093
|
"isSource": true,
|
|
47188
48094
|
"$type": "shadow"
|
|
47189
48095
|
}
|
|
48096
|
+
},
|
|
48097
|
+
"org.primer.llm": {
|
|
48098
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48099
|
+
"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."
|
|
47190
48100
|
}
|
|
47191
48101
|
},
|
|
47192
48102
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47202,6 +48112,7 @@
|
|
|
47202
48112
|
"inset": true
|
|
47203
48113
|
},
|
|
47204
48114
|
"$type": "shadow",
|
|
48115
|
+
"$description": "Inset shadow for recessed elements",
|
|
47205
48116
|
"$extensions": {
|
|
47206
48117
|
"org.primer.figma": {
|
|
47207
48118
|
"collection": "mode",
|
|
@@ -47222,6 +48133,10 @@
|
|
|
47222
48133
|
"isSource": true,
|
|
47223
48134
|
"$type": "shadow"
|
|
47224
48135
|
}
|
|
48136
|
+
},
|
|
48137
|
+
"org.primer.llm": {
|
|
48138
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48139
|
+
"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."
|
|
47225
48140
|
}
|
|
47226
48141
|
},
|
|
47227
48142
|
"key": "{shadow.inset}"
|
|
@@ -47230,7 +48145,8 @@
|
|
|
47230
48145
|
"attributes": {},
|
|
47231
48146
|
"path": ["shadow", "inset"],
|
|
47232
48147
|
"value": "inset 0px 1px 0px 0px #0104093d",
|
|
47233
|
-
"type": "shadow"
|
|
48148
|
+
"type": "shadow",
|
|
48149
|
+
"description": "Inset shadow for recessed elements"
|
|
47234
48150
|
},
|
|
47235
48151
|
"shadow-resting-medium": {
|
|
47236
48152
|
"key": "{shadow.resting.medium}",
|
|
@@ -47263,6 +48179,10 @@
|
|
|
47263
48179
|
"isSource": true,
|
|
47264
48180
|
"$type": "shadow"
|
|
47265
48181
|
}
|
|
48182
|
+
},
|
|
48183
|
+
"org.primer.llm": {
|
|
48184
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48185
|
+
"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."
|
|
47266
48186
|
}
|
|
47267
48187
|
},
|
|
47268
48188
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47287,6 +48207,7 @@
|
|
|
47287
48207
|
}
|
|
47288
48208
|
],
|
|
47289
48209
|
"$type": "shadow",
|
|
48210
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47290
48211
|
"$extensions": {
|
|
47291
48212
|
"org.primer.figma": {
|
|
47292
48213
|
"collection": "mode",
|
|
@@ -47316,6 +48237,10 @@
|
|
|
47316
48237
|
"isSource": true,
|
|
47317
48238
|
"$type": "shadow"
|
|
47318
48239
|
}
|
|
48240
|
+
},
|
|
48241
|
+
"org.primer.llm": {
|
|
48242
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48243
|
+
"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."
|
|
47319
48244
|
}
|
|
47320
48245
|
},
|
|
47321
48246
|
"key": "{shadow.resting.medium}"
|
|
@@ -47324,7 +48249,8 @@
|
|
|
47324
48249
|
"attributes": {},
|
|
47325
48250
|
"path": ["shadow", "resting", "medium"],
|
|
47326
48251
|
"value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47327
|
-
"type": "shadow"
|
|
48252
|
+
"type": "shadow",
|
|
48253
|
+
"description": "Medium resting shadow for cards and elevated surfaces"
|
|
47328
48254
|
},
|
|
47329
48255
|
"shadow-resting-small": {
|
|
47330
48256
|
"key": "{shadow.resting.small}",
|
|
@@ -47359,6 +48285,10 @@
|
|
|
47359
48285
|
"isSource": true,
|
|
47360
48286
|
"$type": "shadow"
|
|
47361
48287
|
}
|
|
48288
|
+
},
|
|
48289
|
+
"org.primer.llm": {
|
|
48290
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48291
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47362
48292
|
}
|
|
47363
48293
|
},
|
|
47364
48294
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47385,6 +48315,7 @@
|
|
|
47385
48315
|
}
|
|
47386
48316
|
],
|
|
47387
48317
|
"$type": "shadow",
|
|
48318
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47388
48319
|
"$extensions": {
|
|
47389
48320
|
"org.primer.figma": {
|
|
47390
48321
|
"collection": "mode",
|
|
@@ -47416,6 +48347,10 @@
|
|
|
47416
48347
|
"isSource": true,
|
|
47417
48348
|
"$type": "shadow"
|
|
47418
48349
|
}
|
|
48350
|
+
},
|
|
48351
|
+
"org.primer.llm": {
|
|
48352
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48353
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47419
48354
|
}
|
|
47420
48355
|
},
|
|
47421
48356
|
"key": "{shadow.resting.small}"
|
|
@@ -47424,7 +48359,8 @@
|
|
|
47424
48359
|
"attributes": {},
|
|
47425
48360
|
"path": ["shadow", "resting", "small"],
|
|
47426
48361
|
"value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47427
|
-
"type": "shadow"
|
|
48362
|
+
"type": "shadow",
|
|
48363
|
+
"description": "Small resting shadow for buttons and interactive elements"
|
|
47428
48364
|
},
|
|
47429
48365
|
"shadow-resting-xsmall": {
|
|
47430
48366
|
"key": "{shadow.resting.xsmall}",
|
|
@@ -47448,6 +48384,10 @@
|
|
|
47448
48384
|
"isSource": true,
|
|
47449
48385
|
"$type": "shadow"
|
|
47450
48386
|
}
|
|
48387
|
+
},
|
|
48388
|
+
"org.primer.llm": {
|
|
48389
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48390
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47451
48391
|
}
|
|
47452
48392
|
},
|
|
47453
48393
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47463,6 +48403,7 @@
|
|
|
47463
48403
|
"inset": false
|
|
47464
48404
|
},
|
|
47465
48405
|
"$type": "shadow",
|
|
48406
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47466
48407
|
"$extensions": {
|
|
47467
48408
|
"org.primer.figma": {
|
|
47468
48409
|
"collection": "mode",
|
|
@@ -47483,6 +48424,10 @@
|
|
|
47483
48424
|
"isSource": true,
|
|
47484
48425
|
"$type": "shadow"
|
|
47485
48426
|
}
|
|
48427
|
+
},
|
|
48428
|
+
"org.primer.llm": {
|
|
48429
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48430
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47486
48431
|
}
|
|
47487
48432
|
},
|
|
47488
48433
|
"key": "{shadow.resting.xsmall}"
|
|
@@ -47491,7 +48436,8 @@
|
|
|
47491
48436
|
"attributes": {},
|
|
47492
48437
|
"path": ["shadow", "resting", "xsmall"],
|
|
47493
48438
|
"value": "0px 1px 1px 0px #010409cc",
|
|
47494
|
-
"type": "shadow"
|
|
48439
|
+
"type": "shadow",
|
|
48440
|
+
"description": "Extra small resting shadow for minimal elevation"
|
|
47495
48441
|
},
|
|
47496
48442
|
"sideNav-bgColor-selected": {
|
|
47497
48443
|
"key": "{sideNav.bgColor.selected}",
|