@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.neutral.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": "#656c76",
|
|
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",
|
|
@@ -634,6 +698,7 @@
|
|
|
634
698
|
"original": {
|
|
635
699
|
"$value": "{bgColor.neutral.muted}",
|
|
636
700
|
"$type": "color",
|
|
701
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
637
702
|
"$extensions": {
|
|
638
703
|
"org.primer.figma": {
|
|
639
704
|
"collection": "mode",
|
|
@@ -669,6 +734,10 @@
|
|
|
669
734
|
"isSource": true,
|
|
670
735
|
"$type": "color"
|
|
671
736
|
}
|
|
737
|
+
},
|
|
738
|
+
"org.primer.llm": {
|
|
739
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
740
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
672
741
|
}
|
|
673
742
|
},
|
|
674
743
|
"alpha": 0.1,
|
|
@@ -678,7 +747,8 @@
|
|
|
678
747
|
"attributes": {},
|
|
679
748
|
"path": ["bgColor", "closed", "muted"],
|
|
680
749
|
"value": "#656c761a",
|
|
681
|
-
"type": "color"
|
|
750
|
+
"type": "color",
|
|
751
|
+
"description": "Subtle background for closed state indicators (issues, PRs)"
|
|
682
752
|
},
|
|
683
753
|
"bgColor-danger-emphasis": {
|
|
684
754
|
"key": "{bgColor.danger.emphasis}",
|
|
@@ -699,6 +769,10 @@
|
|
|
699
769
|
"dark-high-contrast": "#490202",
|
|
700
770
|
"dark-dimmed-high-contrast": "#8e1519",
|
|
701
771
|
"dark-tritanopia-high-contrast": "#490202"
|
|
772
|
+
},
|
|
773
|
+
"org.primer.llm": {
|
|
774
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
775
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
702
776
|
}
|
|
703
777
|
},
|
|
704
778
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -706,6 +780,7 @@
|
|
|
706
780
|
"original": {
|
|
707
781
|
"$value": "{base.color.red.5}",
|
|
708
782
|
"$type": "color",
|
|
783
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
709
784
|
"$extensions": {
|
|
710
785
|
"org.primer.figma": {
|
|
711
786
|
"collection": "mode",
|
|
@@ -723,6 +798,10 @@
|
|
|
723
798
|
"dark-high-contrast": "{base.color.red.9}",
|
|
724
799
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
725
800
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
801
|
+
},
|
|
802
|
+
"org.primer.llm": {
|
|
803
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
804
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
726
805
|
}
|
|
727
806
|
},
|
|
728
807
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -731,7 +810,8 @@
|
|
|
731
810
|
"attributes": {},
|
|
732
811
|
"path": ["bgColor", "danger", "emphasis"],
|
|
733
812
|
"value": "#da3633",
|
|
734
|
-
"type": "color"
|
|
813
|
+
"type": "color",
|
|
814
|
+
"description": "Emphasized danger background for critical errors and delete confirmations"
|
|
735
815
|
},
|
|
736
816
|
"bgColor-danger-muted": {
|
|
737
817
|
"key": "{bgColor.danger.muted}",
|
|
@@ -761,6 +841,10 @@
|
|
|
761
841
|
"isSource": true,
|
|
762
842
|
"$type": "color"
|
|
763
843
|
}
|
|
844
|
+
},
|
|
845
|
+
"org.primer.llm": {
|
|
846
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
847
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
764
848
|
}
|
|
765
849
|
},
|
|
766
850
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -769,6 +853,7 @@
|
|
|
769
853
|
"original": {
|
|
770
854
|
"$value": "{base.color.red.4}",
|
|
771
855
|
"$type": "color",
|
|
856
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
772
857
|
"$extensions": {
|
|
773
858
|
"org.primer.figma": {
|
|
774
859
|
"collection": "mode",
|
|
@@ -795,6 +880,10 @@
|
|
|
795
880
|
"isSource": true,
|
|
796
881
|
"$type": "color"
|
|
797
882
|
}
|
|
883
|
+
},
|
|
884
|
+
"org.primer.llm": {
|
|
885
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
886
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
798
887
|
}
|
|
799
888
|
},
|
|
800
889
|
"alpha": 0.1,
|
|
@@ -804,7 +893,8 @@
|
|
|
804
893
|
"attributes": {},
|
|
805
894
|
"path": ["bgColor", "danger", "muted"],
|
|
806
895
|
"value": "#f851491a",
|
|
807
|
-
"type": "color"
|
|
896
|
+
"type": "color",
|
|
897
|
+
"description": "Muted danger background for error states and destructive action contexts"
|
|
808
898
|
},
|
|
809
899
|
"bgColor-default": {
|
|
810
900
|
"key": "{bgColor.default}",
|
|
@@ -824,6 +914,10 @@
|
|
|
824
914
|
"dark-high-contrast": "#010409",
|
|
825
915
|
"dark-tritanopia-high-contrast": "#010409",
|
|
826
916
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
917
|
+
},
|
|
918
|
+
"org.primer.llm": {
|
|
919
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
920
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
827
921
|
}
|
|
828
922
|
},
|
|
829
923
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -831,6 +925,7 @@
|
|
|
831
925
|
"original": {
|
|
832
926
|
"$value": "{base.color.neutral.1}",
|
|
833
927
|
"$type": "color",
|
|
928
|
+
"$description": "Default background color for pages and main content areas",
|
|
834
929
|
"$extensions": {
|
|
835
930
|
"org.primer.figma": {
|
|
836
931
|
"collection": "mode",
|
|
@@ -847,6 +942,10 @@
|
|
|
847
942
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
848
943
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
849
944
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
945
|
+
},
|
|
946
|
+
"org.primer.llm": {
|
|
947
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
948
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
850
949
|
}
|
|
851
950
|
},
|
|
852
951
|
"key": "{bgColor.default}"
|
|
@@ -855,7 +954,8 @@
|
|
|
855
954
|
"attributes": {},
|
|
856
955
|
"path": ["bgColor", "default"],
|
|
857
956
|
"value": "#0d1117",
|
|
858
|
-
"type": "color"
|
|
957
|
+
"type": "color",
|
|
958
|
+
"description": "Default background color for pages and main content areas"
|
|
859
959
|
},
|
|
860
960
|
"bgColor-disabled": {
|
|
861
961
|
"key": "{bgColor.disabled}",
|
|
@@ -875,6 +975,10 @@
|
|
|
875
975
|
"dark-high-contrast": "#262c36",
|
|
876
976
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
877
977
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
978
|
+
},
|
|
979
|
+
"org.primer.llm": {
|
|
980
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
981
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
878
982
|
}
|
|
879
983
|
},
|
|
880
984
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -882,6 +986,7 @@
|
|
|
882
986
|
"original": {
|
|
883
987
|
"$value": "{base.color.neutral.3}",
|
|
884
988
|
"$type": "color",
|
|
989
|
+
"$description": "Background for disabled interactive elements",
|
|
885
990
|
"$extensions": {
|
|
886
991
|
"org.primer.figma": {
|
|
887
992
|
"collection": "mode",
|
|
@@ -898,6 +1003,10 @@
|
|
|
898
1003
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
899
1004
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
900
1005
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1006
|
+
},
|
|
1007
|
+
"org.primer.llm": {
|
|
1008
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1009
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
901
1010
|
}
|
|
902
1011
|
},
|
|
903
1012
|
"key": "{bgColor.disabled}"
|
|
@@ -906,7 +1015,8 @@
|
|
|
906
1015
|
"attributes": {},
|
|
907
1016
|
"path": ["bgColor", "disabled"],
|
|
908
1017
|
"value": "#212830",
|
|
909
|
-
"type": "color"
|
|
1018
|
+
"type": "color",
|
|
1019
|
+
"description": "Background for disabled interactive elements"
|
|
910
1020
|
},
|
|
911
1021
|
"bgColor-done-emphasis": {
|
|
912
1022
|
"key": "{bgColor.done.emphasis}",
|
|
@@ -924,6 +1034,10 @@
|
|
|
924
1034
|
"dark-dimmed-high-contrast": "#553098",
|
|
925
1035
|
"dark-tritanopia-high-contrast": "#271052",
|
|
926
1036
|
"dark-protanopia-deuteranopia-high-contrast": "#271052"
|
|
1037
|
+
},
|
|
1038
|
+
"org.primer.llm": {
|
|
1039
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1040
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
927
1041
|
}
|
|
928
1042
|
},
|
|
929
1043
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -931,6 +1045,7 @@
|
|
|
931
1045
|
"original": {
|
|
932
1046
|
"$value": "{base.color.purple.5}",
|
|
933
1047
|
"$type": "color",
|
|
1048
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
934
1049
|
"$extensions": {
|
|
935
1050
|
"org.primer.figma": {
|
|
936
1051
|
"collection": "mode",
|
|
@@ -945,6 +1060,10 @@
|
|
|
945
1060
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
946
1061
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
947
1062
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1063
|
+
},
|
|
1064
|
+
"org.primer.llm": {
|
|
1065
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1066
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
948
1067
|
}
|
|
949
1068
|
},
|
|
950
1069
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -953,7 +1072,8 @@
|
|
|
953
1072
|
"attributes": {},
|
|
954
1073
|
"path": ["bgColor", "done", "emphasis"],
|
|
955
1074
|
"value": "#8957e5",
|
|
956
|
-
"type": "color"
|
|
1075
|
+
"type": "color",
|
|
1076
|
+
"description": "Strong background for completed/done state badges and labels"
|
|
957
1077
|
},
|
|
958
1078
|
"bgColor-done-muted": {
|
|
959
1079
|
"key": "{bgColor.done.muted}",
|
|
@@ -974,6 +1094,10 @@
|
|
|
974
1094
|
"isSource": true,
|
|
975
1095
|
"$type": "color"
|
|
976
1096
|
}
|
|
1097
|
+
},
|
|
1098
|
+
"org.primer.llm": {
|
|
1099
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1100
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
977
1101
|
}
|
|
978
1102
|
},
|
|
979
1103
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -982,6 +1106,7 @@
|
|
|
982
1106
|
"original": {
|
|
983
1107
|
"$value": "{base.color.purple.4}",
|
|
984
1108
|
"$type": "color",
|
|
1109
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
985
1110
|
"$extensions": {
|
|
986
1111
|
"org.primer.figma": {
|
|
987
1112
|
"collection": "mode",
|
|
@@ -999,6 +1124,10 @@
|
|
|
999
1124
|
"isSource": true,
|
|
1000
1125
|
"$type": "color"
|
|
1001
1126
|
}
|
|
1127
|
+
},
|
|
1128
|
+
"org.primer.llm": {
|
|
1129
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1130
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1002
1131
|
}
|
|
1003
1132
|
},
|
|
1004
1133
|
"alpha": 0.15,
|
|
@@ -1008,7 +1137,8 @@
|
|
|
1008
1137
|
"attributes": {},
|
|
1009
1138
|
"path": ["bgColor", "done", "muted"],
|
|
1010
1139
|
"value": "#ab7df826",
|
|
1011
|
-
"type": "color"
|
|
1140
|
+
"type": "color",
|
|
1141
|
+
"description": "Subtle background for completed/done state indicators"
|
|
1012
1142
|
},
|
|
1013
1143
|
"bgColor-draft-emphasis": {
|
|
1014
1144
|
"key": "{bgColor.draft.emphasis}",
|
|
@@ -1020,6 +1150,10 @@
|
|
|
1020
1150
|
"codeSyntax": {
|
|
1021
1151
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1022
1152
|
}
|
|
1153
|
+
},
|
|
1154
|
+
"org.primer.llm": {
|
|
1155
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1156
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1023
1157
|
}
|
|
1024
1158
|
},
|
|
1025
1159
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1027,6 +1161,7 @@
|
|
|
1027
1161
|
"original": {
|
|
1028
1162
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1029
1163
|
"$type": "color",
|
|
1164
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1030
1165
|
"$extensions": {
|
|
1031
1166
|
"org.primer.figma": {
|
|
1032
1167
|
"collection": "mode",
|
|
@@ -1035,6 +1170,10 @@
|
|
|
1035
1170
|
"codeSyntax": {
|
|
1036
1171
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1037
1172
|
}
|
|
1173
|
+
},
|
|
1174
|
+
"org.primer.llm": {
|
|
1175
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1176
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1038
1177
|
}
|
|
1039
1178
|
},
|
|
1040
1179
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1043,7 +1182,8 @@
|
|
|
1043
1182
|
"attributes": {},
|
|
1044
1183
|
"path": ["bgColor", "draft", "emphasis"],
|
|
1045
1184
|
"value": "#656c76",
|
|
1046
|
-
"type": "color"
|
|
1185
|
+
"type": "color",
|
|
1186
|
+
"description": "Strong background for draft state badges and labels"
|
|
1047
1187
|
},
|
|
1048
1188
|
"bgColor-draft-muted": {
|
|
1049
1189
|
"key": "{bgColor.draft.muted}",
|
|
@@ -1082,6 +1222,10 @@
|
|
|
1082
1222
|
"isSource": true,
|
|
1083
1223
|
"$type": "color"
|
|
1084
1224
|
}
|
|
1225
|
+
},
|
|
1226
|
+
"org.primer.llm": {
|
|
1227
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1228
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1085
1229
|
}
|
|
1086
1230
|
},
|
|
1087
1231
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1090,6 +1234,7 @@
|
|
|
1090
1234
|
"original": {
|
|
1091
1235
|
"$value": "{bgColor.neutral.muted}",
|
|
1092
1236
|
"$type": "color",
|
|
1237
|
+
"$description": "Subtle background for draft state indicators",
|
|
1093
1238
|
"$extensions": {
|
|
1094
1239
|
"org.primer.figma": {
|
|
1095
1240
|
"collection": "mode",
|
|
@@ -1125,6 +1270,10 @@
|
|
|
1125
1270
|
"isSource": true,
|
|
1126
1271
|
"$type": "color"
|
|
1127
1272
|
}
|
|
1273
|
+
},
|
|
1274
|
+
"org.primer.llm": {
|
|
1275
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1276
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1128
1277
|
}
|
|
1129
1278
|
},
|
|
1130
1279
|
"alpha": 0.1,
|
|
@@ -1134,7 +1283,8 @@
|
|
|
1134
1283
|
"attributes": {},
|
|
1135
1284
|
"path": ["bgColor", "draft", "muted"],
|
|
1136
1285
|
"value": "#656c761a",
|
|
1137
|
-
"type": "color"
|
|
1286
|
+
"type": "color",
|
|
1287
|
+
"description": "Subtle background for draft state indicators"
|
|
1138
1288
|
},
|
|
1139
1289
|
"bgColor-emphasis": {
|
|
1140
1290
|
"key": "{bgColor.emphasis}",
|
|
@@ -1149,6 +1299,10 @@
|
|
|
1149
1299
|
},
|
|
1150
1300
|
"org.primer.overrides": {
|
|
1151
1301
|
"dark": "#3d444d"
|
|
1302
|
+
},
|
|
1303
|
+
"org.primer.llm": {
|
|
1304
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1305
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1152
1306
|
}
|
|
1153
1307
|
},
|
|
1154
1308
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1156,6 +1310,7 @@
|
|
|
1156
1310
|
"original": {
|
|
1157
1311
|
"$value": "{base.color.neutral.7}",
|
|
1158
1312
|
"$type": "color",
|
|
1313
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1159
1314
|
"$extensions": {
|
|
1160
1315
|
"org.primer.figma": {
|
|
1161
1316
|
"collection": "mode",
|
|
@@ -1167,6 +1322,10 @@
|
|
|
1167
1322
|
},
|
|
1168
1323
|
"org.primer.overrides": {
|
|
1169
1324
|
"dark": "{base.color.neutral.7}"
|
|
1325
|
+
},
|
|
1326
|
+
"org.primer.llm": {
|
|
1327
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1328
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1170
1329
|
}
|
|
1171
1330
|
},
|
|
1172
1331
|
"key": "{bgColor.emphasis}"
|
|
@@ -1175,7 +1334,8 @@
|
|
|
1175
1334
|
"attributes": {},
|
|
1176
1335
|
"path": ["bgColor", "emphasis"],
|
|
1177
1336
|
"value": "#3d444d",
|
|
1178
|
-
"type": "color"
|
|
1337
|
+
"type": "color",
|
|
1338
|
+
"description": "High-emphasis dark background for strong visual contrast"
|
|
1179
1339
|
},
|
|
1180
1340
|
"bgColor-inset": {
|
|
1181
1341
|
"key": "{bgColor.inset}",
|
|
@@ -1195,6 +1355,10 @@
|
|
|
1195
1355
|
"light-high-contrast": "#151b23",
|
|
1196
1356
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1197
1357
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1358
|
+
},
|
|
1359
|
+
"org.primer.llm": {
|
|
1360
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1361
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1198
1362
|
}
|
|
1199
1363
|
},
|
|
1200
1364
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1202,6 +1366,7 @@
|
|
|
1202
1366
|
"original": {
|
|
1203
1367
|
"$value": "{base.color.neutral.0}",
|
|
1204
1368
|
"$type": "color",
|
|
1369
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1205
1370
|
"$extensions": {
|
|
1206
1371
|
"org.primer.figma": {
|
|
1207
1372
|
"collection": "mode",
|
|
@@ -1218,6 +1383,10 @@
|
|
|
1218
1383
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1219
1384
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1220
1385
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1386
|
+
},
|
|
1387
|
+
"org.primer.llm": {
|
|
1388
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1389
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1221
1390
|
}
|
|
1222
1391
|
},
|
|
1223
1392
|
"key": "{bgColor.inset}"
|
|
@@ -1226,7 +1395,8 @@
|
|
|
1226
1395
|
"attributes": {},
|
|
1227
1396
|
"path": ["bgColor", "inset"],
|
|
1228
1397
|
"value": "#010409",
|
|
1229
|
-
"type": "color"
|
|
1398
|
+
"type": "color",
|
|
1399
|
+
"description": "Inset background for recessed content areas like wells or sunken panels"
|
|
1230
1400
|
},
|
|
1231
1401
|
"bgColor-inverse": {
|
|
1232
1402
|
"key": "{bgColor.inverse}",
|
|
@@ -1238,6 +1408,10 @@
|
|
|
1238
1408
|
},
|
|
1239
1409
|
"org.primer.overrides": {
|
|
1240
1410
|
"dark": "#ffffff"
|
|
1411
|
+
},
|
|
1412
|
+
"org.primer.llm": {
|
|
1413
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1414
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1241
1415
|
}
|
|
1242
1416
|
},
|
|
1243
1417
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1245,6 +1419,7 @@
|
|
|
1245
1419
|
"original": {
|
|
1246
1420
|
"$value": "{base.color.neutral.13}",
|
|
1247
1421
|
"$type": "color",
|
|
1422
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1248
1423
|
"$extensions": {
|
|
1249
1424
|
"org.primer.figma": {
|
|
1250
1425
|
"collection": "mode",
|
|
@@ -1253,6 +1428,10 @@
|
|
|
1253
1428
|
},
|
|
1254
1429
|
"org.primer.overrides": {
|
|
1255
1430
|
"dark": "{base.color.neutral.13}"
|
|
1431
|
+
},
|
|
1432
|
+
"org.primer.llm": {
|
|
1433
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1434
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1256
1435
|
}
|
|
1257
1436
|
},
|
|
1258
1437
|
"key": "{bgColor.inverse}"
|
|
@@ -1261,7 +1440,8 @@
|
|
|
1261
1440
|
"attributes": {},
|
|
1262
1441
|
"path": ["bgColor", "inverse"],
|
|
1263
1442
|
"value": "#ffffff",
|
|
1264
|
-
"type": "color"
|
|
1443
|
+
"type": "color",
|
|
1444
|
+
"description": "Inverse background that flips between light and dark modes"
|
|
1265
1445
|
},
|
|
1266
1446
|
"bgColor-muted": {
|
|
1267
1447
|
"key": "{bgColor.muted}",
|
|
@@ -1284,6 +1464,10 @@
|
|
|
1284
1464
|
"dark-high-contrast": "#151b23",
|
|
1285
1465
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1286
1466
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1467
|
+
},
|
|
1468
|
+
"org.primer.llm": {
|
|
1469
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1470
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1287
1471
|
}
|
|
1288
1472
|
},
|
|
1289
1473
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1291,6 +1475,7 @@
|
|
|
1291
1475
|
"original": {
|
|
1292
1476
|
"$value": "{base.color.neutral.2}",
|
|
1293
1477
|
"$type": "color",
|
|
1478
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1294
1479
|
"$extensions": {
|
|
1295
1480
|
"org.primer.figma": {
|
|
1296
1481
|
"collection": "mode",
|
|
@@ -1310,6 +1495,10 @@
|
|
|
1310
1495
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1311
1496
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1312
1497
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1498
|
+
},
|
|
1499
|
+
"org.primer.llm": {
|
|
1500
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1501
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1313
1502
|
}
|
|
1314
1503
|
},
|
|
1315
1504
|
"key": "{bgColor.muted}"
|
|
@@ -1318,7 +1507,8 @@
|
|
|
1318
1507
|
"attributes": {},
|
|
1319
1508
|
"path": ["bgColor", "muted"],
|
|
1320
1509
|
"value": "#151b23",
|
|
1321
|
-
"type": "color"
|
|
1510
|
+
"type": "color",
|
|
1511
|
+
"description": "Muted background for secondary content areas and subtle grouping"
|
|
1322
1512
|
},
|
|
1323
1513
|
"bgColor-neutral-emphasis": {
|
|
1324
1514
|
"key": "{bgColor.neutral.emphasis}",
|
|
@@ -1338,6 +1528,10 @@
|
|
|
1338
1528
|
"dark-high-contrast": "#3d444d",
|
|
1339
1529
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1340
1530
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1531
|
+
},
|
|
1532
|
+
"org.primer.llm": {
|
|
1533
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1534
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1341
1535
|
}
|
|
1342
1536
|
},
|
|
1343
1537
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1345,6 +1539,7 @@
|
|
|
1345
1539
|
"original": {
|
|
1346
1540
|
"$value": "{base.color.neutral.8}",
|
|
1347
1541
|
"$type": "color",
|
|
1542
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1348
1543
|
"$extensions": {
|
|
1349
1544
|
"org.primer.figma": {
|
|
1350
1545
|
"collection": "mode",
|
|
@@ -1361,6 +1556,10 @@
|
|
|
1361
1556
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1362
1557
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1363
1558
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1559
|
+
},
|
|
1560
|
+
"org.primer.llm": {
|
|
1561
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1562
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1364
1563
|
}
|
|
1365
1564
|
},
|
|
1366
1565
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1369,7 +1568,8 @@
|
|
|
1369
1568
|
"attributes": {},
|
|
1370
1569
|
"path": ["bgColor", "neutral", "emphasis"],
|
|
1371
1570
|
"value": "#656c76",
|
|
1372
|
-
"type": "color"
|
|
1571
|
+
"type": "color",
|
|
1572
|
+
"description": "Strong neutral background for prominent neutral elements"
|
|
1373
1573
|
},
|
|
1374
1574
|
"bgColor-neutral-muted": {
|
|
1375
1575
|
"key": "{bgColor.neutral.muted}",
|
|
@@ -1400,6 +1600,10 @@
|
|
|
1400
1600
|
"dark-high-contrast": "#212830",
|
|
1401
1601
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1402
1602
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1603
|
+
},
|
|
1604
|
+
"org.primer.llm": {
|
|
1605
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1606
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1403
1607
|
}
|
|
1404
1608
|
},
|
|
1405
1609
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1408,6 +1612,7 @@
|
|
|
1408
1612
|
"original": {
|
|
1409
1613
|
"$value": "{base.color.neutral.8}",
|
|
1410
1614
|
"$type": "color",
|
|
1615
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1411
1616
|
"$extensions": {
|
|
1412
1617
|
"org.primer.figma": {
|
|
1413
1618
|
"collection": "mode",
|
|
@@ -1435,6 +1640,10 @@
|
|
|
1435
1640
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1436
1641
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1437
1642
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1643
|
+
},
|
|
1644
|
+
"org.primer.llm": {
|
|
1645
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1646
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1438
1647
|
}
|
|
1439
1648
|
},
|
|
1440
1649
|
"alpha": 0.2,
|
|
@@ -1444,7 +1653,8 @@
|
|
|
1444
1653
|
"attributes": {},
|
|
1445
1654
|
"path": ["bgColor", "neutral", "muted"],
|
|
1446
1655
|
"value": "#656c7633",
|
|
1447
|
-
"type": "color"
|
|
1656
|
+
"type": "color",
|
|
1657
|
+
"description": "Subtle neutral background for tags, labels, and secondary UI elements"
|
|
1448
1658
|
},
|
|
1449
1659
|
"bgColor-open-emphasis": {
|
|
1450
1660
|
"key": "{bgColor.open.emphasis}",
|
|
@@ -1466,6 +1676,10 @@
|
|
|
1466
1676
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
1467
1677
|
"dark-protanopia-deuteranopia": "#bd561d",
|
|
1468
1678
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1679
|
+
},
|
|
1680
|
+
"org.primer.llm": {
|
|
1681
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1682
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1469
1683
|
}
|
|
1470
1684
|
},
|
|
1471
1685
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1473,6 +1687,7 @@
|
|
|
1473
1687
|
"original": {
|
|
1474
1688
|
"$value": "{base.color.red.5}",
|
|
1475
1689
|
"$type": "color",
|
|
1690
|
+
"$description": "Strong background for open state badges and labels",
|
|
1476
1691
|
"$extensions": {
|
|
1477
1692
|
"org.primer.figma": {
|
|
1478
1693
|
"collection": "mode",
|
|
@@ -1491,6 +1706,10 @@
|
|
|
1491
1706
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1492
1707
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1493
1708
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1709
|
+
},
|
|
1710
|
+
"org.primer.llm": {
|
|
1711
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1712
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1494
1713
|
}
|
|
1495
1714
|
},
|
|
1496
1715
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1499,7 +1718,8 @@
|
|
|
1499
1718
|
"attributes": {},
|
|
1500
1719
|
"path": ["bgColor", "open", "emphasis"],
|
|
1501
1720
|
"value": "#da3633",
|
|
1502
|
-
"type": "color"
|
|
1721
|
+
"type": "color",
|
|
1722
|
+
"description": "Strong background for open state badges and labels"
|
|
1503
1723
|
},
|
|
1504
1724
|
"bgColor-open-muted": {
|
|
1505
1725
|
"key": "{bgColor.open.muted}",
|
|
@@ -1545,6 +1765,10 @@
|
|
|
1545
1765
|
"isSource": true,
|
|
1546
1766
|
"$type": "color"
|
|
1547
1767
|
}
|
|
1768
|
+
},
|
|
1769
|
+
"org.primer.llm": {
|
|
1770
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1771
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1548
1772
|
}
|
|
1549
1773
|
},
|
|
1550
1774
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1553,6 +1777,7 @@
|
|
|
1553
1777
|
"original": {
|
|
1554
1778
|
"$value": "{base.color.red.4}",
|
|
1555
1779
|
"$type": "color",
|
|
1780
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1556
1781
|
"$extensions": {
|
|
1557
1782
|
"org.primer.figma": {
|
|
1558
1783
|
"collection": "mode",
|
|
@@ -1595,6 +1820,10 @@
|
|
|
1595
1820
|
"isSource": true,
|
|
1596
1821
|
"$type": "color"
|
|
1597
1822
|
}
|
|
1823
|
+
},
|
|
1824
|
+
"org.primer.llm": {
|
|
1825
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1826
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1598
1827
|
}
|
|
1599
1828
|
},
|
|
1600
1829
|
"alpha": 0.1,
|
|
@@ -1604,7 +1833,8 @@
|
|
|
1604
1833
|
"attributes": {},
|
|
1605
1834
|
"path": ["bgColor", "open", "muted"],
|
|
1606
1835
|
"value": "#f851491a",
|
|
1607
|
-
"type": "color"
|
|
1836
|
+
"type": "color",
|
|
1837
|
+
"description": "Subtle background for open state indicators (issues, PRs)"
|
|
1608
1838
|
},
|
|
1609
1839
|
"bgColor-severe-emphasis": {
|
|
1610
1840
|
"key": "{bgColor.severe.emphasis}",
|
|
@@ -1625,6 +1855,10 @@
|
|
|
1625
1855
|
"dark-high-contrast": "#3d1300",
|
|
1626
1856
|
"dark-dimmed-high-contrast": "#762d0a",
|
|
1627
1857
|
"dark-protanopia-deuteranopia-high-contrast": "#3d1300"
|
|
1858
|
+
},
|
|
1859
|
+
"org.primer.llm": {
|
|
1860
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1861
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1628
1862
|
}
|
|
1629
1863
|
},
|
|
1630
1864
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1632,6 +1866,7 @@
|
|
|
1632
1866
|
"original": {
|
|
1633
1867
|
"$value": "{base.color.red.5}",
|
|
1634
1868
|
"$type": "color",
|
|
1869
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1635
1870
|
"$extensions": {
|
|
1636
1871
|
"org.primer.figma": {
|
|
1637
1872
|
"collection": "mode",
|
|
@@ -1649,6 +1884,10 @@
|
|
|
1649
1884
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1650
1885
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1651
1886
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1887
|
+
},
|
|
1888
|
+
"org.primer.llm": {
|
|
1889
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1890
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1652
1891
|
}
|
|
1653
1892
|
},
|
|
1654
1893
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1657,7 +1896,8 @@
|
|
|
1657
1896
|
"attributes": {},
|
|
1658
1897
|
"path": ["bgColor", "severe", "emphasis"],
|
|
1659
1898
|
"value": "#da3633",
|
|
1660
|
-
"type": "color"
|
|
1899
|
+
"type": "color",
|
|
1900
|
+
"description": "Strong severe background for prominent high-priority warnings"
|
|
1661
1901
|
},
|
|
1662
1902
|
"bgColor-severe-muted": {
|
|
1663
1903
|
"key": "{bgColor.severe.muted}",
|
|
@@ -1687,6 +1927,10 @@
|
|
|
1687
1927
|
"isSource": true,
|
|
1688
1928
|
"$type": "color"
|
|
1689
1929
|
}
|
|
1930
|
+
},
|
|
1931
|
+
"org.primer.llm": {
|
|
1932
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1933
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1690
1934
|
}
|
|
1691
1935
|
},
|
|
1692
1936
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1695,6 +1939,7 @@
|
|
|
1695
1939
|
"original": {
|
|
1696
1940
|
"$value": "{base.color.red.4}",
|
|
1697
1941
|
"$type": "color",
|
|
1942
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1698
1943
|
"$extensions": {
|
|
1699
1944
|
"org.primer.figma": {
|
|
1700
1945
|
"collection": "mode",
|
|
@@ -1721,6 +1966,10 @@
|
|
|
1721
1966
|
"isSource": true,
|
|
1722
1967
|
"$type": "color"
|
|
1723
1968
|
}
|
|
1969
|
+
},
|
|
1970
|
+
"org.primer.llm": {
|
|
1971
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1972
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1724
1973
|
}
|
|
1725
1974
|
},
|
|
1726
1975
|
"alpha": 0.1,
|
|
@@ -1730,7 +1979,8 @@
|
|
|
1730
1979
|
"attributes": {},
|
|
1731
1980
|
"path": ["bgColor", "severe", "muted"],
|
|
1732
1981
|
"value": "#f851491a",
|
|
1733
|
-
"type": "color"
|
|
1982
|
+
"type": "color",
|
|
1983
|
+
"description": "Subtle severe background for high-priority warnings"
|
|
1734
1984
|
},
|
|
1735
1985
|
"bgColor-sponsors-emphasis": {
|
|
1736
1986
|
"key": "{bgColor.sponsors.emphasis}",
|
|
@@ -1748,6 +1998,10 @@
|
|
|
1748
1998
|
"dark-dimmed-high-contrast": "#7d2457",
|
|
1749
1999
|
"dark-tritanopia-high-contrast": "#42062a",
|
|
1750
2000
|
"dark-protanopia-deuteranopia-high-contrast": "#42062a"
|
|
2001
|
+
},
|
|
2002
|
+
"org.primer.llm": {
|
|
2003
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2004
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1751
2005
|
}
|
|
1752
2006
|
},
|
|
1753
2007
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1755,6 +2009,7 @@
|
|
|
1755
2009
|
"original": {
|
|
1756
2010
|
"$value": "{base.color.pink.5}",
|
|
1757
2011
|
"$type": "color",
|
|
2012
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1758
2013
|
"$extensions": {
|
|
1759
2014
|
"org.primer.figma": {
|
|
1760
2015
|
"collection": "mode",
|
|
@@ -1769,6 +2024,10 @@
|
|
|
1769
2024
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1770
2025
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1771
2026
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2027
|
+
},
|
|
2028
|
+
"org.primer.llm": {
|
|
2029
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2030
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1772
2031
|
}
|
|
1773
2032
|
},
|
|
1774
2033
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1777,7 +2036,8 @@
|
|
|
1777
2036
|
"attributes": {},
|
|
1778
2037
|
"path": ["bgColor", "sponsors", "emphasis"],
|
|
1779
2038
|
"value": "#bf4b8a",
|
|
1780
|
-
"type": "color"
|
|
2039
|
+
"type": "color",
|
|
2040
|
+
"description": "Strong background for prominent GitHub Sponsors elements"
|
|
1781
2041
|
},
|
|
1782
2042
|
"bgColor-sponsors-muted": {
|
|
1783
2043
|
"key": "{bgColor.sponsors.muted}",
|
|
@@ -1805,6 +2065,10 @@
|
|
|
1805
2065
|
"isSource": true,
|
|
1806
2066
|
"$type": "color"
|
|
1807
2067
|
}
|
|
2068
|
+
},
|
|
2069
|
+
"org.primer.llm": {
|
|
2070
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2071
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1808
2072
|
}
|
|
1809
2073
|
},
|
|
1810
2074
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1813,6 +2077,7 @@
|
|
|
1813
2077
|
"original": {
|
|
1814
2078
|
"$value": "#db61a2",
|
|
1815
2079
|
"$type": "color",
|
|
2080
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1816
2081
|
"$extensions": {
|
|
1817
2082
|
"org.primer.figma": {
|
|
1818
2083
|
"collection": "mode",
|
|
@@ -1837,6 +2102,10 @@
|
|
|
1837
2102
|
"isSource": true,
|
|
1838
2103
|
"$type": "color"
|
|
1839
2104
|
}
|
|
2105
|
+
},
|
|
2106
|
+
"org.primer.llm": {
|
|
2107
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2108
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1840
2109
|
}
|
|
1841
2110
|
},
|
|
1842
2111
|
"alpha": 0.1,
|
|
@@ -1846,7 +2115,8 @@
|
|
|
1846
2115
|
"attributes": {},
|
|
1847
2116
|
"path": ["bgColor", "sponsors", "muted"],
|
|
1848
2117
|
"value": "#db61a21a",
|
|
1849
|
-
"type": "color"
|
|
2118
|
+
"type": "color",
|
|
2119
|
+
"description": "Subtle background for GitHub Sponsors content"
|
|
1850
2120
|
},
|
|
1851
2121
|
"bgColor-success-emphasis": {
|
|
1852
2122
|
"key": "{bgColor.success.emphasis}",
|
|
@@ -1872,6 +2142,10 @@
|
|
|
1872
2142
|
"light-high-contrast": "#238636",
|
|
1873
2143
|
"dark-high-contrast": "#04260f",
|
|
1874
2144
|
"dark-dimmed-high-contrast": "#0f5323"
|
|
2145
|
+
},
|
|
2146
|
+
"org.primer.llm": {
|
|
2147
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2148
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1875
2149
|
}
|
|
1876
2150
|
},
|
|
1877
2151
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1879,6 +2153,7 @@
|
|
|
1879
2153
|
"original": {
|
|
1880
2154
|
"$value": "{base.color.blue.5}",
|
|
1881
2155
|
"$type": "color",
|
|
2156
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1882
2157
|
"$extensions": {
|
|
1883
2158
|
"org.primer.figma": {
|
|
1884
2159
|
"collection": "mode",
|
|
@@ -1901,6 +2176,10 @@
|
|
|
1901
2176
|
"light-high-contrast": "{base.color.green.5}",
|
|
1902
2177
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1903
2178
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2179
|
+
},
|
|
2180
|
+
"org.primer.llm": {
|
|
2181
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2182
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1904
2183
|
}
|
|
1905
2184
|
},
|
|
1906
2185
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1909,7 +2188,8 @@
|
|
|
1909
2188
|
"attributes": {},
|
|
1910
2189
|
"path": ["bgColor", "success", "emphasis"],
|
|
1911
2190
|
"value": "#1f6feb",
|
|
1912
|
-
"type": "color"
|
|
2191
|
+
"type": "color",
|
|
2192
|
+
"description": "Strong success background for prominent positive actions"
|
|
1913
2193
|
},
|
|
1914
2194
|
"bgColor-success-muted": {
|
|
1915
2195
|
"key": "{bgColor.success.muted}",
|
|
@@ -1962,6 +2242,10 @@
|
|
|
1962
2242
|
"isSource": true,
|
|
1963
2243
|
"$type": "color"
|
|
1964
2244
|
}
|
|
2245
|
+
},
|
|
2246
|
+
"org.primer.llm": {
|
|
2247
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2248
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1965
2249
|
}
|
|
1966
2250
|
},
|
|
1967
2251
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1970,6 +2254,7 @@
|
|
|
1970
2254
|
"original": {
|
|
1971
2255
|
"$value": "{base.color.blue.4}",
|
|
1972
2256
|
"$type": "color",
|
|
2257
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1973
2258
|
"$extensions": {
|
|
1974
2259
|
"org.primer.figma": {
|
|
1975
2260
|
"collection": "mode",
|
|
@@ -2019,6 +2304,10 @@
|
|
|
2019
2304
|
"isSource": true,
|
|
2020
2305
|
"$type": "color"
|
|
2021
2306
|
}
|
|
2307
|
+
},
|
|
2308
|
+
"org.primer.llm": {
|
|
2309
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2310
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2022
2311
|
}
|
|
2023
2312
|
},
|
|
2024
2313
|
"alpha": 0.15,
|
|
@@ -2028,7 +2317,8 @@
|
|
|
2028
2317
|
"attributes": {},
|
|
2029
2318
|
"path": ["bgColor", "success", "muted"],
|
|
2030
2319
|
"value": "#388bfd26",
|
|
2031
|
-
"type": "color"
|
|
2320
|
+
"type": "color",
|
|
2321
|
+
"description": "Subtle success background for positive feedback and completed states"
|
|
2032
2322
|
},
|
|
2033
2323
|
"bgColor-transparent": {
|
|
2034
2324
|
"key": "{bgColor.transparent}",
|
|
@@ -2040,6 +2330,10 @@
|
|
|
2040
2330
|
"codeSyntax": {
|
|
2041
2331
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2042
2332
|
}
|
|
2333
|
+
},
|
|
2334
|
+
"org.primer.llm": {
|
|
2335
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2336
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2043
2337
|
}
|
|
2044
2338
|
},
|
|
2045
2339
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2047,6 +2341,7 @@
|
|
|
2047
2341
|
"original": {
|
|
2048
2342
|
"$value": "{base.color.transparent}",
|
|
2049
2343
|
"$type": "color",
|
|
2344
|
+
"$description": "Fully transparent background",
|
|
2050
2345
|
"$extensions": {
|
|
2051
2346
|
"org.primer.figma": {
|
|
2052
2347
|
"collection": "mode",
|
|
@@ -2055,6 +2350,10 @@
|
|
|
2055
2350
|
"codeSyntax": {
|
|
2056
2351
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2057
2352
|
}
|
|
2353
|
+
},
|
|
2354
|
+
"org.primer.llm": {
|
|
2355
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2356
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2058
2357
|
}
|
|
2059
2358
|
},
|
|
2060
2359
|
"key": "{bgColor.transparent}"
|
|
@@ -2063,7 +2362,8 @@
|
|
|
2063
2362
|
"attributes": {},
|
|
2064
2363
|
"path": ["bgColor", "transparent"],
|
|
2065
2364
|
"value": "#00000000",
|
|
2066
|
-
"type": "color"
|
|
2365
|
+
"type": "color",
|
|
2366
|
+
"description": "Fully transparent background"
|
|
2067
2367
|
},
|
|
2068
2368
|
"bgColor-upsell-emphasis": {
|
|
2069
2369
|
"key": "{bgColor.upsell.emphasis}",
|
|
@@ -2075,6 +2375,10 @@
|
|
|
2075
2375
|
"codeSyntax": {
|
|
2076
2376
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2077
2377
|
}
|
|
2378
|
+
},
|
|
2379
|
+
"org.primer.llm": {
|
|
2380
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2381
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2078
2382
|
}
|
|
2079
2383
|
},
|
|
2080
2384
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2082,6 +2386,7 @@
|
|
|
2082
2386
|
"original": {
|
|
2083
2387
|
"$value": "{bgColor.done.emphasis}",
|
|
2084
2388
|
"$type": "color",
|
|
2389
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2085
2390
|
"$extensions": {
|
|
2086
2391
|
"org.primer.figma": {
|
|
2087
2392
|
"collection": "mode",
|
|
@@ -2090,6 +2395,10 @@
|
|
|
2090
2395
|
"codeSyntax": {
|
|
2091
2396
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2092
2397
|
}
|
|
2398
|
+
},
|
|
2399
|
+
"org.primer.llm": {
|
|
2400
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2401
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2093
2402
|
}
|
|
2094
2403
|
},
|
|
2095
2404
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2098,7 +2407,8 @@
|
|
|
2098
2407
|
"attributes": {},
|
|
2099
2408
|
"path": ["bgColor", "upsell", "emphasis"],
|
|
2100
2409
|
"value": "#8957e5",
|
|
2101
|
-
"type": "color"
|
|
2410
|
+
"type": "color",
|
|
2411
|
+
"description": "Strong background for prominent upsell elements"
|
|
2102
2412
|
},
|
|
2103
2413
|
"bgColor-upsell-muted": {
|
|
2104
2414
|
"key": "{bgColor.upsell.muted}",
|
|
@@ -2110,6 +2420,10 @@
|
|
|
2110
2420
|
"codeSyntax": {
|
|
2111
2421
|
"web": "var(--bgColor-upsell-muted)"
|
|
2112
2422
|
}
|
|
2423
|
+
},
|
|
2424
|
+
"org.primer.llm": {
|
|
2425
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2426
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2113
2427
|
}
|
|
2114
2428
|
},
|
|
2115
2429
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2117,6 +2431,7 @@
|
|
|
2117
2431
|
"original": {
|
|
2118
2432
|
"$value": "{bgColor.done.muted}",
|
|
2119
2433
|
"$type": "color",
|
|
2434
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2120
2435
|
"$extensions": {
|
|
2121
2436
|
"org.primer.figma": {
|
|
2122
2437
|
"collection": "mode",
|
|
@@ -2125,6 +2440,10 @@
|
|
|
2125
2440
|
"codeSyntax": {
|
|
2126
2441
|
"web": "var(--bgColor-upsell-muted)"
|
|
2127
2442
|
}
|
|
2443
|
+
},
|
|
2444
|
+
"org.primer.llm": {
|
|
2445
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2446
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2128
2447
|
}
|
|
2129
2448
|
},
|
|
2130
2449
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2133,7 +2452,8 @@
|
|
|
2133
2452
|
"attributes": {},
|
|
2134
2453
|
"path": ["bgColor", "upsell", "muted"],
|
|
2135
2454
|
"value": "#ab7df826",
|
|
2136
|
-
"type": "color"
|
|
2455
|
+
"type": "color",
|
|
2456
|
+
"description": "Subtle background for upsell and promotional content"
|
|
2137
2457
|
},
|
|
2138
2458
|
"bgColor-white": {
|
|
2139
2459
|
"key": "{bgColor.white}",
|
|
@@ -2145,6 +2465,10 @@
|
|
|
2145
2465
|
},
|
|
2146
2466
|
"org.primer.overrides": {
|
|
2147
2467
|
"dark": "#ffffff"
|
|
2468
|
+
},
|
|
2469
|
+
"org.primer.llm": {
|
|
2470
|
+
"doNotUse": true,
|
|
2471
|
+
"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."
|
|
2148
2472
|
}
|
|
2149
2473
|
},
|
|
2150
2474
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2152,6 +2476,7 @@
|
|
|
2152
2476
|
"original": {
|
|
2153
2477
|
"$value": "{base.color.neutral.13}",
|
|
2154
2478
|
"$type": "color",
|
|
2479
|
+
"$description": "Pure white background",
|
|
2155
2480
|
"$extensions": {
|
|
2156
2481
|
"org.primer.figma": {
|
|
2157
2482
|
"collection": "mode",
|
|
@@ -2160,6 +2485,10 @@
|
|
|
2160
2485
|
},
|
|
2161
2486
|
"org.primer.overrides": {
|
|
2162
2487
|
"dark": "{base.color.neutral.13}"
|
|
2488
|
+
},
|
|
2489
|
+
"org.primer.llm": {
|
|
2490
|
+
"doNotUse": true,
|
|
2491
|
+
"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."
|
|
2163
2492
|
}
|
|
2164
2493
|
},
|
|
2165
2494
|
"key": "{bgColor.white}"
|
|
@@ -2168,7 +2497,8 @@
|
|
|
2168
2497
|
"attributes": {},
|
|
2169
2498
|
"path": ["bgColor", "white"],
|
|
2170
2499
|
"value": "#ffffff",
|
|
2171
|
-
"type": "color"
|
|
2500
|
+
"type": "color",
|
|
2501
|
+
"description": "Pure white background"
|
|
2172
2502
|
},
|
|
2173
2503
|
"border-accent-emphasis": {
|
|
2174
2504
|
"key": "{border.accent.emphasis}",
|
|
@@ -2680,6 +3010,10 @@
|
|
|
2680
3010
|
},
|
|
2681
3011
|
"org.primer.overrides": {
|
|
2682
3012
|
"dark-dimmed-high-contrast": "#79c0ff"
|
|
3013
|
+
},
|
|
3014
|
+
"org.primer.llm": {
|
|
3015
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3016
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2683
3017
|
}
|
|
2684
3018
|
},
|
|
2685
3019
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2687,6 +3021,7 @@
|
|
|
2687
3021
|
"original": {
|
|
2688
3022
|
"$value": "{base.color.blue.5}",
|
|
2689
3023
|
"$type": "color",
|
|
3024
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2690
3025
|
"$extensions": {
|
|
2691
3026
|
"org.primer.figma": {
|
|
2692
3027
|
"collection": "mode",
|
|
@@ -2698,6 +3033,10 @@
|
|
|
2698
3033
|
},
|
|
2699
3034
|
"org.primer.overrides": {
|
|
2700
3035
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3036
|
+
},
|
|
3037
|
+
"org.primer.llm": {
|
|
3038
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3039
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2701
3040
|
}
|
|
2702
3041
|
},
|
|
2703
3042
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2706,7 +3045,8 @@
|
|
|
2706
3045
|
"attributes": {},
|
|
2707
3046
|
"path": ["borderColor", "accent", "emphasis"],
|
|
2708
3047
|
"value": "#1f6feb",
|
|
2709
|
-
"type": "color"
|
|
3048
|
+
"type": "color",
|
|
3049
|
+
"description": "Strong accent border for selected or focused elements"
|
|
2710
3050
|
},
|
|
2711
3051
|
"borderColor-accent-muted": {
|
|
2712
3052
|
"key": "{borderColor.accent.muted}",
|
|
@@ -2770,6 +3110,10 @@
|
|
|
2770
3110
|
"isSource": true,
|
|
2771
3111
|
"$type": "color"
|
|
2772
3112
|
}
|
|
3113
|
+
},
|
|
3114
|
+
"org.primer.llm": {
|
|
3115
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3116
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2773
3117
|
}
|
|
2774
3118
|
},
|
|
2775
3119
|
"alpha": 0.4,
|
|
@@ -2778,6 +3122,7 @@
|
|
|
2778
3122
|
"original": {
|
|
2779
3123
|
"$value": "{base.color.blue.4}",
|
|
2780
3124
|
"$type": "color",
|
|
3125
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2781
3126
|
"$extensions": {
|
|
2782
3127
|
"org.primer.figma": {
|
|
2783
3128
|
"collection": "mode",
|
|
@@ -2838,6 +3183,10 @@
|
|
|
2838
3183
|
"isSource": true,
|
|
2839
3184
|
"$type": "color"
|
|
2840
3185
|
}
|
|
3186
|
+
},
|
|
3187
|
+
"org.primer.llm": {
|
|
3188
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3189
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2841
3190
|
}
|
|
2842
3191
|
},
|
|
2843
3192
|
"alpha": 0.4,
|
|
@@ -2847,7 +3196,8 @@
|
|
|
2847
3196
|
"attributes": {},
|
|
2848
3197
|
"path": ["borderColor", "accent", "muted"],
|
|
2849
3198
|
"value": "#388bfd66",
|
|
2850
|
-
"type": "color"
|
|
3199
|
+
"type": "color",
|
|
3200
|
+
"description": "Subtle accent border for selected or focused elements"
|
|
2851
3201
|
},
|
|
2852
3202
|
"borderColor-attention-emphasis": {
|
|
2853
3203
|
"key": "{borderColor.attention.emphasis}",
|
|
@@ -2862,6 +3212,10 @@
|
|
|
2862
3212
|
},
|
|
2863
3213
|
"org.primer.overrides": {
|
|
2864
3214
|
"dark-dimmed-high-contrast": "#e3b341"
|
|
3215
|
+
},
|
|
3216
|
+
"org.primer.llm": {
|
|
3217
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3218
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2865
3219
|
}
|
|
2866
3220
|
},
|
|
2867
3221
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2869,6 +3223,7 @@
|
|
|
2869
3223
|
"original": {
|
|
2870
3224
|
"$value": "{base.color.yellow.5}",
|
|
2871
3225
|
"$type": "color",
|
|
3226
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2872
3227
|
"$extensions": {
|
|
2873
3228
|
"org.primer.figma": {
|
|
2874
3229
|
"collection": "mode",
|
|
@@ -2880,6 +3235,10 @@
|
|
|
2880
3235
|
},
|
|
2881
3236
|
"org.primer.overrides": {
|
|
2882
3237
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3238
|
+
},
|
|
3239
|
+
"org.primer.llm": {
|
|
3240
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3241
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2883
3242
|
}
|
|
2884
3243
|
},
|
|
2885
3244
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2888,7 +3247,8 @@
|
|
|
2888
3247
|
"attributes": {},
|
|
2889
3248
|
"path": ["borderColor", "attention", "emphasis"],
|
|
2890
3249
|
"value": "#9e6a03",
|
|
2891
|
-
"type": "color"
|
|
3250
|
+
"type": "color",
|
|
3251
|
+
"description": "Strong attention border for prominent warnings"
|
|
2892
3252
|
},
|
|
2893
3253
|
"borderColor-attention-muted": {
|
|
2894
3254
|
"key": "{borderColor.attention.muted}",
|
|
@@ -2952,6 +3312,10 @@
|
|
|
2952
3312
|
"isSource": true,
|
|
2953
3313
|
"$type": "color"
|
|
2954
3314
|
}
|
|
3315
|
+
},
|
|
3316
|
+
"org.primer.llm": {
|
|
3317
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3318
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2955
3319
|
}
|
|
2956
3320
|
},
|
|
2957
3321
|
"alpha": 0.4,
|
|
@@ -2960,6 +3324,7 @@
|
|
|
2960
3324
|
"original": {
|
|
2961
3325
|
"$value": "{base.color.yellow.4}",
|
|
2962
3326
|
"$type": "color",
|
|
3327
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2963
3328
|
"$extensions": {
|
|
2964
3329
|
"org.primer.figma": {
|
|
2965
3330
|
"collection": "mode",
|
|
@@ -3020,6 +3385,10 @@
|
|
|
3020
3385
|
"isSource": true,
|
|
3021
3386
|
"$type": "color"
|
|
3022
3387
|
}
|
|
3388
|
+
},
|
|
3389
|
+
"org.primer.llm": {
|
|
3390
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3391
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3023
3392
|
}
|
|
3024
3393
|
},
|
|
3025
3394
|
"alpha": 0.4,
|
|
@@ -3029,7 +3398,8 @@
|
|
|
3029
3398
|
"attributes": {},
|
|
3030
3399
|
"path": ["borderColor", "attention", "muted"],
|
|
3031
3400
|
"value": "#bb800966",
|
|
3032
|
-
"type": "color"
|
|
3401
|
+
"type": "color",
|
|
3402
|
+
"description": "Subtle attention border for warnings and caution states"
|
|
3033
3403
|
},
|
|
3034
3404
|
"borderColor-closed-emphasis": {
|
|
3035
3405
|
"key": "{borderColor.closed.emphasis}",
|
|
@@ -3051,6 +3421,10 @@
|
|
|
3051
3421
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
3052
3422
|
"light-tritanopia": "#656c76",
|
|
3053
3423
|
"light-tritanopia-high-contrast": "#656c76"
|
|
3424
|
+
},
|
|
3425
|
+
"org.primer.llm": {
|
|
3426
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3427
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3054
3428
|
}
|
|
3055
3429
|
},
|
|
3056
3430
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3058,6 +3432,7 @@
|
|
|
3058
3432
|
"original": {
|
|
3059
3433
|
"$value": "{borderColor.emphasis}",
|
|
3060
3434
|
"$type": "color",
|
|
3435
|
+
"$description": "Strong border for closed state badges",
|
|
3061
3436
|
"$extensions": {
|
|
3062
3437
|
"org.primer.figma": {
|
|
3063
3438
|
"collection": "mode",
|
|
@@ -3076,6 +3451,10 @@
|
|
|
3076
3451
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3077
3452
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3078
3453
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3454
|
+
},
|
|
3455
|
+
"org.primer.llm": {
|
|
3456
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3457
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3079
3458
|
}
|
|
3080
3459
|
},
|
|
3081
3460
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3084,7 +3463,8 @@
|
|
|
3084
3463
|
"attributes": {},
|
|
3085
3464
|
"path": ["borderColor", "closed", "emphasis"],
|
|
3086
3465
|
"value": "#656c76",
|
|
3087
|
-
"type": "color"
|
|
3466
|
+
"type": "color",
|
|
3467
|
+
"description": "Strong border for closed state badges"
|
|
3088
3468
|
},
|
|
3089
3469
|
"borderColor-closed-muted": {
|
|
3090
3470
|
"key": "{borderColor.closed.muted}",
|
|
@@ -3154,6 +3534,10 @@
|
|
|
3154
3534
|
"isSource": true,
|
|
3155
3535
|
"$type": "color"
|
|
3156
3536
|
}
|
|
3537
|
+
},
|
|
3538
|
+
"org.primer.llm": {
|
|
3539
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3540
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3157
3541
|
}
|
|
3158
3542
|
},
|
|
3159
3543
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3162,6 +3546,7 @@
|
|
|
3162
3546
|
"original": {
|
|
3163
3547
|
"$value": "{borderColor.default}",
|
|
3164
3548
|
"$type": "color",
|
|
3549
|
+
"$description": "Subtle border for closed state indicators",
|
|
3165
3550
|
"$extensions": {
|
|
3166
3551
|
"org.primer.figma": {
|
|
3167
3552
|
"collection": "mode",
|
|
@@ -3228,6 +3613,10 @@
|
|
|
3228
3613
|
"isSource": true,
|
|
3229
3614
|
"$type": "color"
|
|
3230
3615
|
}
|
|
3616
|
+
},
|
|
3617
|
+
"org.primer.llm": {
|
|
3618
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3619
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3231
3620
|
}
|
|
3232
3621
|
},
|
|
3233
3622
|
"alpha": 0.4,
|
|
@@ -3237,7 +3626,8 @@
|
|
|
3237
3626
|
"attributes": {},
|
|
3238
3627
|
"path": ["borderColor", "closed", "muted"],
|
|
3239
3628
|
"value": "#3d444d66",
|
|
3240
|
-
"type": "color"
|
|
3629
|
+
"type": "color",
|
|
3630
|
+
"description": "Subtle border for closed state indicators"
|
|
3241
3631
|
},
|
|
3242
3632
|
"borderColor-danger-emphasis": {
|
|
3243
3633
|
"key": "{borderColor.danger.emphasis}",
|
|
@@ -3276,6 +3666,10 @@
|
|
|
3276
3666
|
"$type": "color"
|
|
3277
3667
|
},
|
|
3278
3668
|
"dark-dimmed-high-contrast": "#ffa198"
|
|
3669
|
+
},
|
|
3670
|
+
"org.primer.llm": {
|
|
3671
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3672
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3279
3673
|
}
|
|
3280
3674
|
},
|
|
3281
3675
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3283,6 +3677,7 @@
|
|
|
3283
3677
|
"original": {
|
|
3284
3678
|
"$value": "{base.color.red.5}",
|
|
3285
3679
|
"$type": "color",
|
|
3680
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3286
3681
|
"$extensions": {
|
|
3287
3682
|
"org.primer.figma": {
|
|
3288
3683
|
"collection": "mode",
|
|
@@ -3318,6 +3713,10 @@
|
|
|
3318
3713
|
"$type": "color"
|
|
3319
3714
|
},
|
|
3320
3715
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3716
|
+
},
|
|
3717
|
+
"org.primer.llm": {
|
|
3718
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3719
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3321
3720
|
}
|
|
3322
3721
|
},
|
|
3323
3722
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3326,7 +3725,8 @@
|
|
|
3326
3725
|
"attributes": {},
|
|
3327
3726
|
"path": ["borderColor", "danger", "emphasis"],
|
|
3328
3727
|
"value": "#da3633",
|
|
3329
|
-
"type": "color"
|
|
3728
|
+
"type": "color",
|
|
3729
|
+
"description": "Strong danger border for destructive actions and errors"
|
|
3330
3730
|
},
|
|
3331
3731
|
"borderColor-danger-muted": {
|
|
3332
3732
|
"key": "{borderColor.danger.muted}",
|
|
@@ -3403,6 +3803,10 @@
|
|
|
3403
3803
|
"isSource": true,
|
|
3404
3804
|
"$type": "color"
|
|
3405
3805
|
}
|
|
3806
|
+
},
|
|
3807
|
+
"org.primer.llm": {
|
|
3808
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3809
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3406
3810
|
}
|
|
3407
3811
|
},
|
|
3408
3812
|
"alpha": 0.4,
|
|
@@ -3411,6 +3815,7 @@
|
|
|
3411
3815
|
"original": {
|
|
3412
3816
|
"$value": "{base.color.red.4}",
|
|
3413
3817
|
"$type": "color",
|
|
3818
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3414
3819
|
"$extensions": {
|
|
3415
3820
|
"org.primer.figma": {
|
|
3416
3821
|
"collection": "mode",
|
|
@@ -3484,6 +3889,10 @@
|
|
|
3484
3889
|
"isSource": true,
|
|
3485
3890
|
"$type": "color"
|
|
3486
3891
|
}
|
|
3892
|
+
},
|
|
3893
|
+
"org.primer.llm": {
|
|
3894
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3895
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3487
3896
|
}
|
|
3488
3897
|
},
|
|
3489
3898
|
"alpha": 0.4,
|
|
@@ -3493,7 +3902,8 @@
|
|
|
3493
3902
|
"attributes": {},
|
|
3494
3903
|
"path": ["borderColor", "danger", "muted"],
|
|
3495
3904
|
"value": "#f8514966",
|
|
3496
|
-
"type": "color"
|
|
3905
|
+
"type": "color",
|
|
3906
|
+
"description": "Subtle danger border for errors and destructive contexts"
|
|
3497
3907
|
},
|
|
3498
3908
|
"borderColor-default": {
|
|
3499
3909
|
"key": "{borderColor.default}",
|
|
@@ -3516,6 +3926,10 @@
|
|
|
3516
3926
|
"codeSyntax": {
|
|
3517
3927
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3518
3928
|
}
|
|
3929
|
+
},
|
|
3930
|
+
"org.primer.llm": {
|
|
3931
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3932
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3519
3933
|
}
|
|
3520
3934
|
},
|
|
3521
3935
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3523,6 +3937,7 @@
|
|
|
3523
3937
|
"original": {
|
|
3524
3938
|
"$value": "{base.color.neutral.7}",
|
|
3525
3939
|
"$type": "color",
|
|
3940
|
+
"$description": "Default border color for most UI elements",
|
|
3526
3941
|
"$extensions": {
|
|
3527
3942
|
"org.primer.overrides": {
|
|
3528
3943
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3542,6 +3957,10 @@
|
|
|
3542
3957
|
"codeSyntax": {
|
|
3543
3958
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3544
3959
|
}
|
|
3960
|
+
},
|
|
3961
|
+
"org.primer.llm": {
|
|
3962
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3963
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3545
3964
|
}
|
|
3546
3965
|
},
|
|
3547
3966
|
"key": "{borderColor.default}"
|
|
@@ -3550,7 +3969,8 @@
|
|
|
3550
3969
|
"attributes": {},
|
|
3551
3970
|
"path": ["borderColor", "default"],
|
|
3552
3971
|
"value": "#3d444d",
|
|
3553
|
-
"type": "color"
|
|
3972
|
+
"type": "color",
|
|
3973
|
+
"description": "Default border color for most UI elements"
|
|
3554
3974
|
},
|
|
3555
3975
|
"borderColor-disabled": {
|
|
3556
3976
|
"key": "{borderColor.disabled}",
|
|
@@ -3596,6 +4016,10 @@
|
|
|
3596
4016
|
"isSource": true,
|
|
3597
4017
|
"$type": "color"
|
|
3598
4018
|
}
|
|
4019
|
+
},
|
|
4020
|
+
"org.primer.llm": {
|
|
4021
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4022
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3599
4023
|
}
|
|
3600
4024
|
},
|
|
3601
4025
|
"alpha": 0.1,
|
|
@@ -3604,6 +4028,7 @@
|
|
|
3604
4028
|
"original": {
|
|
3605
4029
|
"$value": "{base.color.neutral.8}",
|
|
3606
4030
|
"$type": "color",
|
|
4031
|
+
"$description": "Border color for disabled interactive elements",
|
|
3607
4032
|
"$extensions": {
|
|
3608
4033
|
"org.primer.figma": {
|
|
3609
4034
|
"collection": "mode",
|
|
@@ -3646,6 +4071,10 @@
|
|
|
3646
4071
|
"isSource": true,
|
|
3647
4072
|
"$type": "color"
|
|
3648
4073
|
}
|
|
4074
|
+
},
|
|
4075
|
+
"org.primer.llm": {
|
|
4076
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4077
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3649
4078
|
}
|
|
3650
4079
|
},
|
|
3651
4080
|
"alpha": 0.1,
|
|
@@ -3655,7 +4084,8 @@
|
|
|
3655
4084
|
"attributes": {},
|
|
3656
4085
|
"path": ["borderColor", "disabled"],
|
|
3657
4086
|
"value": "#656c761a",
|
|
3658
|
-
"type": "color"
|
|
4087
|
+
"type": "color",
|
|
4088
|
+
"description": "Border color for disabled interactive elements"
|
|
3659
4089
|
},
|
|
3660
4090
|
"borderColor-done-emphasis": {
|
|
3661
4091
|
"key": "{borderColor.done.emphasis}",
|
|
@@ -3670,6 +4100,10 @@
|
|
|
3670
4100
|
},
|
|
3671
4101
|
"org.primer.overrides": {
|
|
3672
4102
|
"dark-dimmed-high-contrast": "#d2a8ff"
|
|
4103
|
+
},
|
|
4104
|
+
"org.primer.llm": {
|
|
4105
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4106
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3673
4107
|
}
|
|
3674
4108
|
},
|
|
3675
4109
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3677,6 +4111,7 @@
|
|
|
3677
4111
|
"original": {
|
|
3678
4112
|
"$value": "{base.color.purple.5}",
|
|
3679
4113
|
"$type": "color",
|
|
4114
|
+
"$description": "Strong border for completed/done state badges",
|
|
3680
4115
|
"$extensions": {
|
|
3681
4116
|
"org.primer.figma": {
|
|
3682
4117
|
"collection": "mode",
|
|
@@ -3688,6 +4123,10 @@
|
|
|
3688
4123
|
},
|
|
3689
4124
|
"org.primer.overrides": {
|
|
3690
4125
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4126
|
+
},
|
|
4127
|
+
"org.primer.llm": {
|
|
4128
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4129
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3691
4130
|
}
|
|
3692
4131
|
},
|
|
3693
4132
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3696,7 +4135,8 @@
|
|
|
3696
4135
|
"attributes": {},
|
|
3697
4136
|
"path": ["borderColor", "done", "emphasis"],
|
|
3698
4137
|
"value": "#8957e5",
|
|
3699
|
-
"type": "color"
|
|
4138
|
+
"type": "color",
|
|
4139
|
+
"description": "Strong border for completed/done state badges"
|
|
3700
4140
|
},
|
|
3701
4141
|
"borderColor-done-muted": {
|
|
3702
4142
|
"key": "{borderColor.done.muted}",
|
|
@@ -3760,6 +4200,10 @@
|
|
|
3760
4200
|
"isSource": true,
|
|
3761
4201
|
"$type": "color"
|
|
3762
4202
|
}
|
|
4203
|
+
},
|
|
4204
|
+
"org.primer.llm": {
|
|
4205
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4206
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3763
4207
|
}
|
|
3764
4208
|
},
|
|
3765
4209
|
"alpha": 0.4,
|
|
@@ -3768,6 +4212,7 @@
|
|
|
3768
4212
|
"original": {
|
|
3769
4213
|
"$value": "{base.color.purple.4}",
|
|
3770
4214
|
"$type": "color",
|
|
4215
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3771
4216
|
"$extensions": {
|
|
3772
4217
|
"org.primer.figma": {
|
|
3773
4218
|
"collection": "mode",
|
|
@@ -3828,6 +4273,10 @@
|
|
|
3828
4273
|
"isSource": true,
|
|
3829
4274
|
"$type": "color"
|
|
3830
4275
|
}
|
|
4276
|
+
},
|
|
4277
|
+
"org.primer.llm": {
|
|
4278
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4279
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3831
4280
|
}
|
|
3832
4281
|
},
|
|
3833
4282
|
"alpha": 0.4,
|
|
@@ -3837,7 +4286,8 @@
|
|
|
3837
4286
|
"attributes": {},
|
|
3838
4287
|
"path": ["borderColor", "done", "muted"],
|
|
3839
4288
|
"value": "#ab7df866",
|
|
3840
|
-
"type": "color"
|
|
4289
|
+
"type": "color",
|
|
4290
|
+
"description": "Subtle border for completed/done state indicators"
|
|
3841
4291
|
},
|
|
3842
4292
|
"borderColor-draft-emphasis": {
|
|
3843
4293
|
"key": "{borderColor.draft.emphasis}",
|
|
@@ -3849,6 +4299,10 @@
|
|
|
3849
4299
|
"codeSyntax": {
|
|
3850
4300
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3851
4301
|
}
|
|
4302
|
+
},
|
|
4303
|
+
"org.primer.llm": {
|
|
4304
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4305
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3852
4306
|
}
|
|
3853
4307
|
},
|
|
3854
4308
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3856,6 +4310,7 @@
|
|
|
3856
4310
|
"original": {
|
|
3857
4311
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3858
4312
|
"$type": "color",
|
|
4313
|
+
"$description": "Strong border for draft state badges",
|
|
3859
4314
|
"$extensions": {
|
|
3860
4315
|
"org.primer.figma": {
|
|
3861
4316
|
"collection": "mode",
|
|
@@ -3864,6 +4319,10 @@
|
|
|
3864
4319
|
"codeSyntax": {
|
|
3865
4320
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3866
4321
|
}
|
|
4322
|
+
},
|
|
4323
|
+
"org.primer.llm": {
|
|
4324
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4325
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3867
4326
|
}
|
|
3868
4327
|
},
|
|
3869
4328
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3872,7 +4331,8 @@
|
|
|
3872
4331
|
"attributes": {},
|
|
3873
4332
|
"path": ["borderColor", "draft", "emphasis"],
|
|
3874
4333
|
"value": "#656c76",
|
|
3875
|
-
"type": "color"
|
|
4334
|
+
"type": "color",
|
|
4335
|
+
"description": "Strong border for draft state badges"
|
|
3876
4336
|
},
|
|
3877
4337
|
"borderColor-draft-muted": {
|
|
3878
4338
|
"key": "{borderColor.draft.muted}",
|
|
@@ -3942,6 +4402,10 @@
|
|
|
3942
4402
|
"isSource": true,
|
|
3943
4403
|
"$type": "color"
|
|
3944
4404
|
}
|
|
4405
|
+
},
|
|
4406
|
+
"org.primer.llm": {
|
|
4407
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4408
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3945
4409
|
}
|
|
3946
4410
|
},
|
|
3947
4411
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3950,6 +4414,7 @@
|
|
|
3950
4414
|
"original": {
|
|
3951
4415
|
"$value": "{borderColor.default}",
|
|
3952
4416
|
"$type": "color",
|
|
4417
|
+
"$description": "Subtle border for draft state indicators",
|
|
3953
4418
|
"$extensions": {
|
|
3954
4419
|
"org.primer.figma": {
|
|
3955
4420
|
"collection": "mode",
|
|
@@ -4016,6 +4481,10 @@
|
|
|
4016
4481
|
"isSource": true,
|
|
4017
4482
|
"$type": "color"
|
|
4018
4483
|
}
|
|
4484
|
+
},
|
|
4485
|
+
"org.primer.llm": {
|
|
4486
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4487
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4019
4488
|
}
|
|
4020
4489
|
},
|
|
4021
4490
|
"alpha": 0.4,
|
|
@@ -4025,7 +4494,8 @@
|
|
|
4025
4494
|
"attributes": {},
|
|
4026
4495
|
"path": ["borderColor", "draft", "muted"],
|
|
4027
4496
|
"value": "#3d444d66",
|
|
4028
|
-
"type": "color"
|
|
4497
|
+
"type": "color",
|
|
4498
|
+
"description": "Subtle border for draft state indicators"
|
|
4029
4499
|
},
|
|
4030
4500
|
"borderColor-emphasis": {
|
|
4031
4501
|
"key": "{borderColor.emphasis}",
|
|
@@ -4043,6 +4513,10 @@
|
|
|
4043
4513
|
"dark-dimmed-high-contrast": "#3d444d",
|
|
4044
4514
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
4045
4515
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
4516
|
+
},
|
|
4517
|
+
"org.primer.llm": {
|
|
4518
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4519
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4046
4520
|
}
|
|
4047
4521
|
},
|
|
4048
4522
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4050,6 +4524,7 @@
|
|
|
4050
4524
|
"original": {
|
|
4051
4525
|
"$value": "{base.color.neutral.8}",
|
|
4052
4526
|
"$type": "color",
|
|
4527
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4053
4528
|
"$extensions": {
|
|
4054
4529
|
"org.primer.figma": {
|
|
4055
4530
|
"collection": "mode",
|
|
@@ -4064,6 +4539,10 @@
|
|
|
4064
4539
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4065
4540
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4066
4541
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4542
|
+
},
|
|
4543
|
+
"org.primer.llm": {
|
|
4544
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4545
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4067
4546
|
}
|
|
4068
4547
|
},
|
|
4069
4548
|
"key": "{borderColor.emphasis}"
|
|
@@ -4072,7 +4551,8 @@
|
|
|
4072
4551
|
"attributes": {},
|
|
4073
4552
|
"path": ["borderColor", "emphasis"],
|
|
4074
4553
|
"value": "#656c76",
|
|
4075
|
-
"type": "color"
|
|
4554
|
+
"type": "color",
|
|
4555
|
+
"description": "Strong border for emphasis and visual weight"
|
|
4076
4556
|
},
|
|
4077
4557
|
"borderColor-muted": {
|
|
4078
4558
|
"key": "{borderColor.muted}",
|
|
@@ -4142,6 +4622,10 @@
|
|
|
4142
4622
|
"isSource": true,
|
|
4143
4623
|
"$type": "color"
|
|
4144
4624
|
}
|
|
4625
|
+
},
|
|
4626
|
+
"org.primer.llm": {
|
|
4627
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4628
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4145
4629
|
}
|
|
4146
4630
|
},
|
|
4147
4631
|
"alpha": 0.7,
|
|
@@ -4150,6 +4634,7 @@
|
|
|
4150
4634
|
"original": {
|
|
4151
4635
|
"$value": "{borderColor.default}",
|
|
4152
4636
|
"$type": "color",
|
|
4637
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4153
4638
|
"$extensions": {
|
|
4154
4639
|
"org.primer.figma": {
|
|
4155
4640
|
"collection": "mode",
|
|
@@ -4216,6 +4701,10 @@
|
|
|
4216
4701
|
"isSource": true,
|
|
4217
4702
|
"$type": "color"
|
|
4218
4703
|
}
|
|
4704
|
+
},
|
|
4705
|
+
"org.primer.llm": {
|
|
4706
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4707
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4219
4708
|
}
|
|
4220
4709
|
},
|
|
4221
4710
|
"alpha": 0.7,
|
|
@@ -4225,7 +4714,8 @@
|
|
|
4225
4714
|
"attributes": {},
|
|
4226
4715
|
"path": ["borderColor", "muted"],
|
|
4227
4716
|
"value": "#3d444db3",
|
|
4228
|
-
"type": "color"
|
|
4717
|
+
"type": "color",
|
|
4718
|
+
"description": "Subtle border for secondary elements and light separators"
|
|
4229
4719
|
},
|
|
4230
4720
|
"borderColor-neutral-emphasis": {
|
|
4231
4721
|
"key": "{borderColor.neutral.emphasis}",
|
|
@@ -4237,6 +4727,10 @@
|
|
|
4237
4727
|
},
|
|
4238
4728
|
"org.primer.overrides": {
|
|
4239
4729
|
"dark": "#656c76"
|
|
4730
|
+
},
|
|
4731
|
+
"org.primer.llm": {
|
|
4732
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4733
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4240
4734
|
}
|
|
4241
4735
|
},
|
|
4242
4736
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4244,6 +4738,7 @@
|
|
|
4244
4738
|
"original": {
|
|
4245
4739
|
"$value": "{borderColor.emphasis}",
|
|
4246
4740
|
"$type": "color",
|
|
4741
|
+
"$description": "Strong neutral semantic border",
|
|
4247
4742
|
"$extensions": {
|
|
4248
4743
|
"org.primer.figma": {
|
|
4249
4744
|
"collection": "mode",
|
|
@@ -4252,6 +4747,10 @@
|
|
|
4252
4747
|
},
|
|
4253
4748
|
"org.primer.overrides": {
|
|
4254
4749
|
"dark": "{borderColor.emphasis}"
|
|
4750
|
+
},
|
|
4751
|
+
"org.primer.llm": {
|
|
4752
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4753
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4255
4754
|
}
|
|
4256
4755
|
},
|
|
4257
4756
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4260,7 +4759,8 @@
|
|
|
4260
4759
|
"attributes": {},
|
|
4261
4760
|
"path": ["borderColor", "neutral", "emphasis"],
|
|
4262
4761
|
"value": "#656c76",
|
|
4263
|
-
"type": "color"
|
|
4762
|
+
"type": "color",
|
|
4763
|
+
"description": "Strong neutral semantic border"
|
|
4264
4764
|
},
|
|
4265
4765
|
"borderColor-neutral-muted": {
|
|
4266
4766
|
"key": "{borderColor.neutral.muted}",
|
|
@@ -4285,6 +4785,10 @@
|
|
|
4285
4785
|
"isSource": true,
|
|
4286
4786
|
"$type": "color"
|
|
4287
4787
|
}
|
|
4788
|
+
},
|
|
4789
|
+
"org.primer.llm": {
|
|
4790
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4791
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4288
4792
|
}
|
|
4289
4793
|
},
|
|
4290
4794
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4292,6 +4796,7 @@
|
|
|
4292
4796
|
"original": {
|
|
4293
4797
|
"$value": "{borderColor.muted}",
|
|
4294
4798
|
"$type": "color",
|
|
4799
|
+
"$description": "Subtle neutral semantic border",
|
|
4295
4800
|
"$extensions": {
|
|
4296
4801
|
"org.primer.figma": {
|
|
4297
4802
|
"collection": "mode",
|
|
@@ -4313,6 +4818,10 @@
|
|
|
4313
4818
|
"isSource": true,
|
|
4314
4819
|
"$type": "color"
|
|
4315
4820
|
}
|
|
4821
|
+
},
|
|
4822
|
+
"org.primer.llm": {
|
|
4823
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4824
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4316
4825
|
}
|
|
4317
4826
|
},
|
|
4318
4827
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4321,7 +4830,8 @@
|
|
|
4321
4830
|
"attributes": {},
|
|
4322
4831
|
"path": ["borderColor", "neutral", "muted"],
|
|
4323
4832
|
"value": "#3d444db3",
|
|
4324
|
-
"type": "color"
|
|
4833
|
+
"type": "color",
|
|
4834
|
+
"description": "Subtle neutral semantic border"
|
|
4325
4835
|
},
|
|
4326
4836
|
"borderColor-open-emphasis": {
|
|
4327
4837
|
"key": "{borderColor.open.emphasis}",
|
|
@@ -4343,6 +4853,10 @@
|
|
|
4343
4853
|
"dark-protanopia-deuteranopia-high-contrast": "#bd561d",
|
|
4344
4854
|
"light-protanopia-deuteranopia": "#bd561d",
|
|
4345
4855
|
"light-protanopia-deuteranopia-high-contrast": "#bd561d"
|
|
4856
|
+
},
|
|
4857
|
+
"org.primer.llm": {
|
|
4858
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4859
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4346
4860
|
}
|
|
4347
4861
|
},
|
|
4348
4862
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4350,6 +4864,7 @@
|
|
|
4350
4864
|
"original": {
|
|
4351
4865
|
"$value": "{base.color.red.5}",
|
|
4352
4866
|
"$type": "color",
|
|
4867
|
+
"$description": "Strong border for open state badges",
|
|
4353
4868
|
"$extensions": {
|
|
4354
4869
|
"org.primer.figma": {
|
|
4355
4870
|
"collection": "mode",
|
|
@@ -4368,6 +4883,10 @@
|
|
|
4368
4883
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4369
4884
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4370
4885
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4886
|
+
},
|
|
4887
|
+
"org.primer.llm": {
|
|
4888
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4889
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4371
4890
|
}
|
|
4372
4891
|
},
|
|
4373
4892
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4376,7 +4895,8 @@
|
|
|
4376
4895
|
"attributes": {},
|
|
4377
4896
|
"path": ["borderColor", "open", "emphasis"],
|
|
4378
4897
|
"value": "#da3633",
|
|
4379
|
-
"type": "color"
|
|
4898
|
+
"type": "color",
|
|
4899
|
+
"description": "Strong border for open state badges"
|
|
4380
4900
|
},
|
|
4381
4901
|
"borderColor-open-muted": {
|
|
4382
4902
|
"key": "{borderColor.open.muted}",
|
|
@@ -4446,6 +4966,10 @@
|
|
|
4446
4966
|
"isSource": true,
|
|
4447
4967
|
"$type": "color"
|
|
4448
4968
|
}
|
|
4969
|
+
},
|
|
4970
|
+
"org.primer.llm": {
|
|
4971
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4972
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4449
4973
|
}
|
|
4450
4974
|
},
|
|
4451
4975
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4454,6 +4978,7 @@
|
|
|
4454
4978
|
"original": {
|
|
4455
4979
|
"$value": "{base.color.red.4}",
|
|
4456
4980
|
"$type": "color",
|
|
4981
|
+
"$description": "Subtle border for open state indicators",
|
|
4457
4982
|
"$extensions": {
|
|
4458
4983
|
"org.primer.figma": {
|
|
4459
4984
|
"collection": "mode",
|
|
@@ -4520,6 +5045,10 @@
|
|
|
4520
5045
|
"isSource": true,
|
|
4521
5046
|
"$type": "color"
|
|
4522
5047
|
}
|
|
5048
|
+
},
|
|
5049
|
+
"org.primer.llm": {
|
|
5050
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5051
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4523
5052
|
}
|
|
4524
5053
|
},
|
|
4525
5054
|
"alpha": 0.4,
|
|
@@ -4529,7 +5058,8 @@
|
|
|
4529
5058
|
"attributes": {},
|
|
4530
5059
|
"path": ["borderColor", "open", "muted"],
|
|
4531
5060
|
"value": "#f8514966",
|
|
4532
|
-
"type": "color"
|
|
5061
|
+
"type": "color",
|
|
5062
|
+
"description": "Subtle border for open state indicators"
|
|
4533
5063
|
},
|
|
4534
5064
|
"borderColor-severe-emphasis": {
|
|
4535
5065
|
"key": "{borderColor.severe.emphasis}",
|
|
@@ -4547,6 +5077,10 @@
|
|
|
4547
5077
|
"light-tritanopia": "#da3633",
|
|
4548
5078
|
"light-tritanopia-high-contrast": "#da3633",
|
|
4549
5079
|
"dark-dimmed-high-contrast": "#ffa657"
|
|
5080
|
+
},
|
|
5081
|
+
"org.primer.llm": {
|
|
5082
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5083
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4550
5084
|
}
|
|
4551
5085
|
},
|
|
4552
5086
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4554,6 +5088,7 @@
|
|
|
4554
5088
|
"original": {
|
|
4555
5089
|
"$value": "{base.color.red.5}",
|
|
4556
5090
|
"$type": "color",
|
|
5091
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4557
5092
|
"$extensions": {
|
|
4558
5093
|
"org.primer.figma": {
|
|
4559
5094
|
"collection": "mode",
|
|
@@ -4568,6 +5103,10 @@
|
|
|
4568
5103
|
"light-tritanopia": "{base.color.red.5}",
|
|
4569
5104
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4570
5105
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5106
|
+
},
|
|
5107
|
+
"org.primer.llm": {
|
|
5108
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5109
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4571
5110
|
}
|
|
4572
5111
|
},
|
|
4573
5112
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4576,7 +5115,8 @@
|
|
|
4576
5115
|
"attributes": {},
|
|
4577
5116
|
"path": ["borderColor", "severe", "emphasis"],
|
|
4578
5117
|
"value": "#da3633",
|
|
4579
|
-
"type": "color"
|
|
5118
|
+
"type": "color",
|
|
5119
|
+
"description": "Strong severe border for prominent high-priority warnings"
|
|
4580
5120
|
},
|
|
4581
5121
|
"borderColor-severe-muted": {
|
|
4582
5122
|
"key": "{borderColor.severe.muted}",
|
|
@@ -4635,6 +5175,10 @@
|
|
|
4635
5175
|
"isSource": true,
|
|
4636
5176
|
"$type": "color"
|
|
4637
5177
|
}
|
|
5178
|
+
},
|
|
5179
|
+
"org.primer.llm": {
|
|
5180
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5181
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4638
5182
|
}
|
|
4639
5183
|
},
|
|
4640
5184
|
"alpha": 0.4,
|
|
@@ -4643,6 +5187,7 @@
|
|
|
4643
5187
|
"original": {
|
|
4644
5188
|
"$value": "{base.color.red.4}",
|
|
4645
5189
|
"$type": "color",
|
|
5190
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4646
5191
|
"$extensions": {
|
|
4647
5192
|
"org.primer.figma": {
|
|
4648
5193
|
"collection": "mode",
|
|
@@ -4698,6 +5243,10 @@
|
|
|
4698
5243
|
"isSource": true,
|
|
4699
5244
|
"$type": "color"
|
|
4700
5245
|
}
|
|
5246
|
+
},
|
|
5247
|
+
"org.primer.llm": {
|
|
5248
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5249
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4701
5250
|
}
|
|
4702
5251
|
},
|
|
4703
5252
|
"alpha": 0.4,
|
|
@@ -4707,7 +5256,8 @@
|
|
|
4707
5256
|
"attributes": {},
|
|
4708
5257
|
"path": ["borderColor", "severe", "muted"],
|
|
4709
5258
|
"value": "#f8514966",
|
|
4710
|
-
"type": "color"
|
|
5259
|
+
"type": "color",
|
|
5260
|
+
"description": "Subtle severe border for high-priority warnings"
|
|
4711
5261
|
},
|
|
4712
5262
|
"borderColor-sponsors-emphasis": {
|
|
4713
5263
|
"key": "{borderColor.sponsors.emphasis}",
|
|
@@ -4722,6 +5272,10 @@
|
|
|
4722
5272
|
},
|
|
4723
5273
|
"org.primer.overrides": {
|
|
4724
5274
|
"dark-dimmed-high-contrast": "#f778ba"
|
|
5275
|
+
},
|
|
5276
|
+
"org.primer.llm": {
|
|
5277
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5278
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4725
5279
|
}
|
|
4726
5280
|
},
|
|
4727
5281
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4729,6 +5283,7 @@
|
|
|
4729
5283
|
"original": {
|
|
4730
5284
|
"$value": "{base.color.pink.5}",
|
|
4731
5285
|
"$type": "color",
|
|
5286
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4732
5287
|
"$extensions": {
|
|
4733
5288
|
"org.primer.figma": {
|
|
4734
5289
|
"collection": "mode",
|
|
@@ -4740,6 +5295,10 @@
|
|
|
4740
5295
|
},
|
|
4741
5296
|
"org.primer.overrides": {
|
|
4742
5297
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5298
|
+
},
|
|
5299
|
+
"org.primer.llm": {
|
|
5300
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5301
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4743
5302
|
}
|
|
4744
5303
|
},
|
|
4745
5304
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4748,7 +5307,8 @@
|
|
|
4748
5307
|
"attributes": {},
|
|
4749
5308
|
"path": ["borderColor", "sponsors", "emphasis"],
|
|
4750
5309
|
"value": "#bf4b8a",
|
|
4751
|
-
"type": "color"
|
|
5310
|
+
"type": "color",
|
|
5311
|
+
"description": "Strong border for prominent GitHub Sponsors elements"
|
|
4752
5312
|
},
|
|
4753
5313
|
"borderColor-sponsors-muted": {
|
|
4754
5314
|
"key": "{borderColor.sponsors.muted}",
|
|
@@ -4812,6 +5372,10 @@
|
|
|
4812
5372
|
"isSource": true,
|
|
4813
5373
|
"$type": "color"
|
|
4814
5374
|
}
|
|
5375
|
+
},
|
|
5376
|
+
"org.primer.llm": {
|
|
5377
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5378
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4815
5379
|
}
|
|
4816
5380
|
},
|
|
4817
5381
|
"alpha": 0.4,
|
|
@@ -4820,6 +5384,7 @@
|
|
|
4820
5384
|
"original": {
|
|
4821
5385
|
"$value": "{base.color.pink.4}",
|
|
4822
5386
|
"$type": "color",
|
|
5387
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4823
5388
|
"$extensions": {
|
|
4824
5389
|
"org.primer.figma": {
|
|
4825
5390
|
"collection": "mode",
|
|
@@ -4880,6 +5445,10 @@
|
|
|
4880
5445
|
"isSource": true,
|
|
4881
5446
|
"$type": "color"
|
|
4882
5447
|
}
|
|
5448
|
+
},
|
|
5449
|
+
"org.primer.llm": {
|
|
5450
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5451
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4883
5452
|
}
|
|
4884
5453
|
},
|
|
4885
5454
|
"alpha": 0.4,
|
|
@@ -4889,7 +5458,8 @@
|
|
|
4889
5458
|
"attributes": {},
|
|
4890
5459
|
"path": ["borderColor", "sponsors", "muted"],
|
|
4891
5460
|
"value": "#db61a266",
|
|
4892
|
-
"type": "color"
|
|
5461
|
+
"type": "color",
|
|
5462
|
+
"description": "Subtle border for GitHub Sponsors content"
|
|
4893
5463
|
},
|
|
4894
5464
|
"borderColor-success-emphasis": {
|
|
4895
5465
|
"key": "{borderColor.success.emphasis}",
|
|
@@ -4912,6 +5482,10 @@
|
|
|
4912
5482
|
"light-protanopia-deuteranopia": "#1f6feb",
|
|
4913
5483
|
"light-protanopia-deuteranopia-high-contrast": "#1f6feb",
|
|
4914
5484
|
"dark-dimmed-high-contrast": "#56d364"
|
|
5485
|
+
},
|
|
5486
|
+
"org.primer.llm": {
|
|
5487
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5488
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4915
5489
|
}
|
|
4916
5490
|
},
|
|
4917
5491
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4919,6 +5493,7 @@
|
|
|
4919
5493
|
"original": {
|
|
4920
5494
|
"$value": "{base.color.blue.5}",
|
|
4921
5495
|
"$type": "color",
|
|
5496
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4922
5497
|
"$extensions": {
|
|
4923
5498
|
"org.primer.figma": {
|
|
4924
5499
|
"collection": "mode",
|
|
@@ -4938,6 +5513,10 @@
|
|
|
4938
5513
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4939
5514
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4940
5515
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5516
|
+
},
|
|
5517
|
+
"org.primer.llm": {
|
|
5518
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5519
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4941
5520
|
}
|
|
4942
5521
|
},
|
|
4943
5522
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4946,7 +5525,8 @@
|
|
|
4946
5525
|
"attributes": {},
|
|
4947
5526
|
"path": ["borderColor", "success", "emphasis"],
|
|
4948
5527
|
"value": "#1f6feb",
|
|
4949
|
-
"type": "color"
|
|
5528
|
+
"type": "color",
|
|
5529
|
+
"description": "Strong success border for prominent positive elements"
|
|
4950
5530
|
},
|
|
4951
5531
|
"borderColor-success-muted": {
|
|
4952
5532
|
"key": "{borderColor.success.muted}",
|
|
@@ -5037,6 +5617,10 @@
|
|
|
5037
5617
|
"isSource": true,
|
|
5038
5618
|
"$type": "color"
|
|
5039
5619
|
}
|
|
5620
|
+
},
|
|
5621
|
+
"org.primer.llm": {
|
|
5622
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5623
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5040
5624
|
}
|
|
5041
5625
|
},
|
|
5042
5626
|
"alpha": 0.4,
|
|
@@ -5045,6 +5629,7 @@
|
|
|
5045
5629
|
"original": {
|
|
5046
5630
|
"$value": "{base.color.blue.4}",
|
|
5047
5631
|
"$type": "color",
|
|
5632
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5048
5633
|
"$extensions": {
|
|
5049
5634
|
"org.primer.figma": {
|
|
5050
5635
|
"collection": "mode",
|
|
@@ -5132,6 +5717,10 @@
|
|
|
5132
5717
|
"isSource": true,
|
|
5133
5718
|
"$type": "color"
|
|
5134
5719
|
}
|
|
5720
|
+
},
|
|
5721
|
+
"org.primer.llm": {
|
|
5722
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5723
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5135
5724
|
}
|
|
5136
5725
|
},
|
|
5137
5726
|
"alpha": 0.4,
|
|
@@ -5141,7 +5730,8 @@
|
|
|
5141
5730
|
"attributes": {},
|
|
5142
5731
|
"path": ["borderColor", "success", "muted"],
|
|
5143
5732
|
"value": "#388bfd66",
|
|
5144
|
-
"type": "color"
|
|
5733
|
+
"type": "color",
|
|
5734
|
+
"description": "Subtle success border for positive feedback elements"
|
|
5145
5735
|
},
|
|
5146
5736
|
"borderColor-translucent": {
|
|
5147
5737
|
"key": "{borderColor.translucent}",
|
|
@@ -5201,6 +5791,10 @@
|
|
|
5201
5791
|
"isSource": true,
|
|
5202
5792
|
"$type": "color"
|
|
5203
5793
|
}
|
|
5794
|
+
},
|
|
5795
|
+
"org.primer.llm": {
|
|
5796
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5797
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5204
5798
|
}
|
|
5205
5799
|
},
|
|
5206
5800
|
"alpha": 0.15,
|
|
@@ -5209,6 +5803,7 @@
|
|
|
5209
5803
|
"original": {
|
|
5210
5804
|
"$value": "{base.color.neutral.13}",
|
|
5211
5805
|
"$type": "color",
|
|
5806
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5212
5807
|
"$extensions": {
|
|
5213
5808
|
"org.primer.figma": {
|
|
5214
5809
|
"collection": "mode",
|
|
@@ -5265,6 +5860,10 @@
|
|
|
5265
5860
|
"isSource": true,
|
|
5266
5861
|
"$type": "color"
|
|
5267
5862
|
}
|
|
5863
|
+
},
|
|
5864
|
+
"org.primer.llm": {
|
|
5865
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5866
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5268
5867
|
}
|
|
5269
5868
|
},
|
|
5270
5869
|
"alpha": 0.15,
|
|
@@ -5274,7 +5873,8 @@
|
|
|
5274
5873
|
"attributes": {},
|
|
5275
5874
|
"path": ["borderColor", "translucent"],
|
|
5276
5875
|
"value": "#ffffff26",
|
|
5277
|
-
"type": "color"
|
|
5876
|
+
"type": "color",
|
|
5877
|
+
"description": "Semi-transparent border for overlays and layered elements"
|
|
5278
5878
|
},
|
|
5279
5879
|
"borderColor-transparent": {
|
|
5280
5880
|
"key": "{borderColor.transparent}",
|
|
@@ -5290,6 +5890,7 @@
|
|
|
5290
5890
|
"original": {
|
|
5291
5891
|
"$value": "{base.color.transparent}",
|
|
5292
5892
|
"$type": "color",
|
|
5893
|
+
"$description": "Fully transparent border",
|
|
5293
5894
|
"$extensions": {
|
|
5294
5895
|
"org.primer.figma": {
|
|
5295
5896
|
"collection": "mode",
|
|
@@ -5303,7 +5904,8 @@
|
|
|
5303
5904
|
"attributes": {},
|
|
5304
5905
|
"path": ["borderColor", "transparent"],
|
|
5305
5906
|
"value": "#00000000",
|
|
5306
|
-
"type": "color"
|
|
5907
|
+
"type": "color",
|
|
5908
|
+
"description": "Fully transparent border"
|
|
5307
5909
|
},
|
|
5308
5910
|
"borderColor-upsell-emphasis": {
|
|
5309
5911
|
"key": "{borderColor.upsell.emphasis}",
|
|
@@ -5315,6 +5917,10 @@
|
|
|
5315
5917
|
"codeSyntax": {
|
|
5316
5918
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5317
5919
|
}
|
|
5920
|
+
},
|
|
5921
|
+
"org.primer.llm": {
|
|
5922
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5923
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5318
5924
|
}
|
|
5319
5925
|
},
|
|
5320
5926
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5322,6 +5928,7 @@
|
|
|
5322
5928
|
"original": {
|
|
5323
5929
|
"$value": "{borderColor.done.emphasis}",
|
|
5324
5930
|
"$type": "color",
|
|
5931
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5325
5932
|
"$extensions": {
|
|
5326
5933
|
"org.primer.figma": {
|
|
5327
5934
|
"collection": "mode",
|
|
@@ -5330,6 +5937,10 @@
|
|
|
5330
5937
|
"codeSyntax": {
|
|
5331
5938
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5332
5939
|
}
|
|
5940
|
+
},
|
|
5941
|
+
"org.primer.llm": {
|
|
5942
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5943
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5333
5944
|
}
|
|
5334
5945
|
},
|
|
5335
5946
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5338,7 +5949,8 @@
|
|
|
5338
5949
|
"attributes": {},
|
|
5339
5950
|
"path": ["borderColor", "upsell", "emphasis"],
|
|
5340
5951
|
"value": "#8957e5",
|
|
5341
|
-
"type": "color"
|
|
5952
|
+
"type": "color",
|
|
5953
|
+
"description": "Strong border for prominent upsell elements"
|
|
5342
5954
|
},
|
|
5343
5955
|
"borderColor-upsell-muted": {
|
|
5344
5956
|
"key": "{borderColor.upsell.muted}",
|
|
@@ -5350,6 +5962,10 @@
|
|
|
5350
5962
|
"codeSyntax": {
|
|
5351
5963
|
"web": "var(--borderColor-upsell-muted)"
|
|
5352
5964
|
}
|
|
5965
|
+
},
|
|
5966
|
+
"org.primer.llm": {
|
|
5967
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5968
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5353
5969
|
}
|
|
5354
5970
|
},
|
|
5355
5971
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5357,6 +5973,7 @@
|
|
|
5357
5973
|
"original": {
|
|
5358
5974
|
"$value": "{borderColor.done.muted}",
|
|
5359
5975
|
"$type": "color",
|
|
5976
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5360
5977
|
"$extensions": {
|
|
5361
5978
|
"org.primer.figma": {
|
|
5362
5979
|
"collection": "mode",
|
|
@@ -5365,6 +5982,10 @@
|
|
|
5365
5982
|
"codeSyntax": {
|
|
5366
5983
|
"web": "var(--borderColor-upsell-muted)"
|
|
5367
5984
|
}
|
|
5985
|
+
},
|
|
5986
|
+
"org.primer.llm": {
|
|
5987
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5988
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5368
5989
|
}
|
|
5369
5990
|
},
|
|
5370
5991
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -5373,7 +5994,8 @@
|
|
|
5373
5994
|
"attributes": {},
|
|
5374
5995
|
"path": ["borderColor", "upsell", "muted"],
|
|
5375
5996
|
"value": "#ab7df866",
|
|
5376
|
-
"type": "color"
|
|
5997
|
+
"type": "color",
|
|
5998
|
+
"description": "Subtle border for upsell and promotional content"
|
|
5377
5999
|
},
|
|
5378
6000
|
"button-danger-bgColor-active": {
|
|
5379
6001
|
"key": "{button.danger.bgColor.active}",
|
|
@@ -36530,6 +37152,10 @@
|
|
|
36530
37152
|
"light-high-contrast": "#1158c7",
|
|
36531
37153
|
"light-tritanopia-high-contrast": "#1158c7",
|
|
36532
37154
|
"light-protanopia-deuteranopia-high-contrast": "#1158c7"
|
|
37155
|
+
},
|
|
37156
|
+
"org.primer.llm": {
|
|
37157
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37158
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36533
37159
|
}
|
|
36534
37160
|
},
|
|
36535
37161
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36537,6 +37163,7 @@
|
|
|
36537
37163
|
"original": {
|
|
36538
37164
|
"$value": "#4493F8",
|
|
36539
37165
|
"$type": "color",
|
|
37166
|
+
"$description": "Accent text for links and interactive elements",
|
|
36540
37167
|
"$extensions": {
|
|
36541
37168
|
"org.primer.figma": {
|
|
36542
37169
|
"collection": "mode",
|
|
@@ -36556,6 +37183,10 @@
|
|
|
36556
37183
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36557
37184
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36558
37185
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37186
|
+
},
|
|
37187
|
+
"org.primer.llm": {
|
|
37188
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37189
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36559
37190
|
}
|
|
36560
37191
|
},
|
|
36561
37192
|
"key": "{fgColor.accent}"
|
|
@@ -36564,7 +37195,8 @@
|
|
|
36564
37195
|
"attributes": {},
|
|
36565
37196
|
"path": ["fgColor", "accent"],
|
|
36566
37197
|
"value": "#4493f8",
|
|
36567
|
-
"type": "color"
|
|
37198
|
+
"type": "color",
|
|
37199
|
+
"description": "Accent text for links and interactive elements"
|
|
36568
37200
|
},
|
|
36569
37201
|
"fgColor-attention": {
|
|
36570
37202
|
"key": "{fgColor.attention}",
|
|
@@ -36583,6 +37215,10 @@
|
|
|
36583
37215
|
"light-protanopia-deuteranopia-high-contrast": "#845306",
|
|
36584
37216
|
"light-tritanopia-high-contrast": "#845306",
|
|
36585
37217
|
"dark-dimmed-high-contrast": "#f2cc60"
|
|
37218
|
+
},
|
|
37219
|
+
"org.primer.llm": {
|
|
37220
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37221
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36586
37222
|
}
|
|
36587
37223
|
},
|
|
36588
37224
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36590,6 +37226,7 @@
|
|
|
36590
37226
|
"original": {
|
|
36591
37227
|
"$value": "{base.color.yellow.3}",
|
|
36592
37228
|
"$type": "color",
|
|
37229
|
+
"$description": "Attention text for warnings and caution states",
|
|
36593
37230
|
"$extensions": {
|
|
36594
37231
|
"org.primer.figma": {
|
|
36595
37232
|
"collection": "mode",
|
|
@@ -36605,6 +37242,10 @@
|
|
|
36605
37242
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36606
37243
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36607
37244
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37245
|
+
},
|
|
37246
|
+
"org.primer.llm": {
|
|
37247
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37248
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36608
37249
|
}
|
|
36609
37250
|
},
|
|
36610
37251
|
"key": "{fgColor.attention}"
|
|
@@ -36613,7 +37254,8 @@
|
|
|
36613
37254
|
"attributes": {},
|
|
36614
37255
|
"path": ["fgColor", "attention"],
|
|
36615
37256
|
"value": "#d29922",
|
|
36616
|
-
"type": "color"
|
|
37257
|
+
"type": "color",
|
|
37258
|
+
"description": "Attention text for warnings and caution states"
|
|
36617
37259
|
},
|
|
36618
37260
|
"fgColor-black": {
|
|
36619
37261
|
"key": "{fgColor.black}",
|
|
@@ -36625,6 +37267,10 @@
|
|
|
36625
37267
|
},
|
|
36626
37268
|
"org.primer.overrides": {
|
|
36627
37269
|
"dark": "#010409"
|
|
37270
|
+
},
|
|
37271
|
+
"org.primer.llm": {
|
|
37272
|
+
"doNotUse": true,
|
|
37273
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36628
37274
|
}
|
|
36629
37275
|
},
|
|
36630
37276
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36632,6 +37278,7 @@
|
|
|
36632
37278
|
"original": {
|
|
36633
37279
|
"$value": "{base.color.neutral.0}",
|
|
36634
37280
|
"$type": "color",
|
|
37281
|
+
"$description": "Pure black text",
|
|
36635
37282
|
"$extensions": {
|
|
36636
37283
|
"org.primer.figma": {
|
|
36637
37284
|
"collection": "mode",
|
|
@@ -36640,6 +37287,10 @@
|
|
|
36640
37287
|
},
|
|
36641
37288
|
"org.primer.overrides": {
|
|
36642
37289
|
"dark": "{base.color.neutral.0}"
|
|
37290
|
+
},
|
|
37291
|
+
"org.primer.llm": {
|
|
37292
|
+
"doNotUse": true,
|
|
37293
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36643
37294
|
}
|
|
36644
37295
|
},
|
|
36645
37296
|
"key": "{fgColor.black}"
|
|
@@ -36648,7 +37299,8 @@
|
|
|
36648
37299
|
"attributes": {},
|
|
36649
37300
|
"path": ["fgColor", "black"],
|
|
36650
37301
|
"value": "#010409",
|
|
36651
|
-
"type": "color"
|
|
37302
|
+
"type": "color",
|
|
37303
|
+
"description": "Pure black text"
|
|
36652
37304
|
},
|
|
36653
37305
|
"fgColor-closed": {
|
|
36654
37306
|
"key": "{fgColor.closed}",
|
|
@@ -36670,6 +37322,10 @@
|
|
|
36670
37322
|
"dark-tritanopia-high-contrast": "#9198a1",
|
|
36671
37323
|
"light-tritanopia": "#9198a1",
|
|
36672
37324
|
"light-tritanopia-high-contrast": "#9198a1"
|
|
37325
|
+
},
|
|
37326
|
+
"org.primer.llm": {
|
|
37327
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37328
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36673
37329
|
}
|
|
36674
37330
|
},
|
|
36675
37331
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36677,6 +37333,7 @@
|
|
|
36677
37333
|
"original": {
|
|
36678
37334
|
"$value": "{fgColor.muted}",
|
|
36679
37335
|
"$type": "color",
|
|
37336
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36680
37337
|
"$extensions": {
|
|
36681
37338
|
"org.primer.figma": {
|
|
36682
37339
|
"collection": "mode",
|
|
@@ -36695,6 +37352,10 @@
|
|
|
36695
37352
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36696
37353
|
"light-tritanopia": "{fgColor.muted}",
|
|
36697
37354
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37355
|
+
},
|
|
37356
|
+
"org.primer.llm": {
|
|
37357
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37358
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36698
37359
|
}
|
|
36699
37360
|
},
|
|
36700
37361
|
"key": "{fgColor.closed}"
|
|
@@ -36703,7 +37364,8 @@
|
|
|
36703
37364
|
"attributes": {},
|
|
36704
37365
|
"path": ["fgColor", "closed"],
|
|
36705
37366
|
"value": "#9198a1",
|
|
36706
|
-
"type": "color"
|
|
37367
|
+
"type": "color",
|
|
37368
|
+
"description": "Text color for closed state indicators (issues, PRs)"
|
|
36707
37369
|
},
|
|
36708
37370
|
"fgColor-danger": {
|
|
36709
37371
|
"key": "{fgColor.danger}",
|
|
@@ -36727,6 +37389,10 @@
|
|
|
36727
37389
|
"dark-tritanopia-high-contrast": "#ff7b72",
|
|
36728
37390
|
"light-high-contrast": "#b62324",
|
|
36729
37391
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37392
|
+
},
|
|
37393
|
+
"org.primer.llm": {
|
|
37394
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37395
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36730
37396
|
}
|
|
36731
37397
|
},
|
|
36732
37398
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36734,6 +37400,7 @@
|
|
|
36734
37400
|
"original": {
|
|
36735
37401
|
"$value": "{base.color.red.4}",
|
|
36736
37402
|
"$type": "color",
|
|
37403
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36737
37404
|
"$extensions": {
|
|
36738
37405
|
"org.primer.figma": {
|
|
36739
37406
|
"collection": "mode",
|
|
@@ -36754,6 +37421,10 @@
|
|
|
36754
37421
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36755
37422
|
"light-high-contrast": "{base.color.red.6}",
|
|
36756
37423
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37424
|
+
},
|
|
37425
|
+
"org.primer.llm": {
|
|
37426
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37427
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36757
37428
|
}
|
|
36758
37429
|
},
|
|
36759
37430
|
"key": "{fgColor.danger}"
|
|
@@ -36762,7 +37433,8 @@
|
|
|
36762
37433
|
"attributes": {},
|
|
36763
37434
|
"path": ["fgColor", "danger"],
|
|
36764
37435
|
"value": "#f85149",
|
|
36765
|
-
"type": "color"
|
|
37436
|
+
"type": "color",
|
|
37437
|
+
"description": "Danger text for errors and destructive actions"
|
|
36766
37438
|
},
|
|
36767
37439
|
"fgColor-default": {
|
|
36768
37440
|
"key": "{fgColor.default}",
|
|
@@ -36780,8 +37452,12 @@
|
|
|
36780
37452
|
"dark-high-contrast": "#ffffff",
|
|
36781
37453
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
36782
37454
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff",
|
|
36783
|
-
"dark-dimmed": "#
|
|
37455
|
+
"dark-dimmed": "#f0f6fc",
|
|
36784
37456
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37457
|
+
},
|
|
37458
|
+
"org.primer.llm": {
|
|
37459
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37460
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36785
37461
|
}
|
|
36786
37462
|
},
|
|
36787
37463
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36789,6 +37465,7 @@
|
|
|
36789
37465
|
"original": {
|
|
36790
37466
|
"$value": "{base.color.neutral.12}",
|
|
36791
37467
|
"$type": "color",
|
|
37468
|
+
"$description": "Default text color for primary content and headings",
|
|
36792
37469
|
"$extensions": {
|
|
36793
37470
|
"org.primer.figma": {
|
|
36794
37471
|
"collection": "mode",
|
|
@@ -36803,8 +37480,12 @@
|
|
|
36803
37480
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36804
37481
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36805
37482
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36806
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37483
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36807
37484
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37485
|
+
},
|
|
37486
|
+
"org.primer.llm": {
|
|
37487
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37488
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36808
37489
|
}
|
|
36809
37490
|
},
|
|
36810
37491
|
"key": "{fgColor.default}"
|
|
@@ -36813,7 +37494,8 @@
|
|
|
36813
37494
|
"attributes": {},
|
|
36814
37495
|
"path": ["fgColor", "default"],
|
|
36815
37496
|
"value": "#f0f6fc",
|
|
36816
|
-
"type": "color"
|
|
37497
|
+
"type": "color",
|
|
37498
|
+
"description": "Default text color for primary content and headings"
|
|
36817
37499
|
},
|
|
36818
37500
|
"fgColor-disabled": {
|
|
36819
37501
|
"key": "{fgColor.disabled}",
|
|
@@ -36838,6 +37520,10 @@
|
|
|
36838
37520
|
"dark-high-contrast": "#656c76",
|
|
36839
37521
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36840
37522
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37523
|
+
},
|
|
37524
|
+
"org.primer.llm": {
|
|
37525
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37526
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36841
37527
|
}
|
|
36842
37528
|
},
|
|
36843
37529
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36845,6 +37531,7 @@
|
|
|
36845
37531
|
"original": {
|
|
36846
37532
|
"$value": "{base.color.neutral.8}",
|
|
36847
37533
|
"$type": "color",
|
|
37534
|
+
"$description": "Text color for disabled interactive elements",
|
|
36848
37535
|
"$extensions": {
|
|
36849
37536
|
"org.primer.figma": {
|
|
36850
37537
|
"collection": "mode",
|
|
@@ -36866,6 +37553,10 @@
|
|
|
36866
37553
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36867
37554
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36868
37555
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37556
|
+
},
|
|
37557
|
+
"org.primer.llm": {
|
|
37558
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37559
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36869
37560
|
}
|
|
36870
37561
|
},
|
|
36871
37562
|
"key": "{fgColor.disabled}"
|
|
@@ -36874,7 +37565,8 @@
|
|
|
36874
37565
|
"attributes": {},
|
|
36875
37566
|
"path": ["fgColor", "disabled"],
|
|
36876
37567
|
"value": "#656c76",
|
|
36877
|
-
"type": "color"
|
|
37568
|
+
"type": "color",
|
|
37569
|
+
"description": "Text color for disabled interactive elements"
|
|
36878
37570
|
},
|
|
36879
37571
|
"fgColor-done": {
|
|
36880
37572
|
"key": "{fgColor.done}",
|
|
@@ -36896,6 +37588,10 @@
|
|
|
36896
37588
|
"light-high-contrast": "#6e40c9",
|
|
36897
37589
|
"light-protanopia-deuteranopia-high-contrast": "#6e40c9",
|
|
36898
37590
|
"light-tritanopia-high-contrast": "#6e40c9"
|
|
37591
|
+
},
|
|
37592
|
+
"org.primer.llm": {
|
|
37593
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37594
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36899
37595
|
}
|
|
36900
37596
|
},
|
|
36901
37597
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36903,6 +37599,7 @@
|
|
|
36903
37599
|
"original": {
|
|
36904
37600
|
"$value": "{base.color.purple.4}",
|
|
36905
37601
|
"$type": "color",
|
|
37602
|
+
"$description": "Text color for completed/done state indicators",
|
|
36906
37603
|
"$extensions": {
|
|
36907
37604
|
"org.primer.figma": {
|
|
36908
37605
|
"collection": "mode",
|
|
@@ -36921,6 +37618,10 @@
|
|
|
36921
37618
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36922
37619
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36923
37620
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37621
|
+
},
|
|
37622
|
+
"org.primer.llm": {
|
|
37623
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37624
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36924
37625
|
}
|
|
36925
37626
|
},
|
|
36926
37627
|
"key": "{fgColor.done}"
|
|
@@ -36929,7 +37630,8 @@
|
|
|
36929
37630
|
"attributes": {},
|
|
36930
37631
|
"path": ["fgColor", "done"],
|
|
36931
37632
|
"value": "#ab7df8",
|
|
36932
|
-
"type": "color"
|
|
37633
|
+
"type": "color",
|
|
37634
|
+
"description": "Text color for completed/done state indicators"
|
|
36933
37635
|
},
|
|
36934
37636
|
"fgColor-draft": {
|
|
36935
37637
|
"key": "{fgColor.draft}",
|
|
@@ -36941,6 +37643,10 @@
|
|
|
36941
37643
|
"codeSyntax": {
|
|
36942
37644
|
"web": "var(--fgColor-draft)"
|
|
36943
37645
|
}
|
|
37646
|
+
},
|
|
37647
|
+
"org.primer.llm": {
|
|
37648
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37649
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36944
37650
|
}
|
|
36945
37651
|
},
|
|
36946
37652
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36948,6 +37654,7 @@
|
|
|
36948
37654
|
"original": {
|
|
36949
37655
|
"$value": "{fgColor.neutral}",
|
|
36950
37656
|
"$type": "color",
|
|
37657
|
+
"$description": "Text color for draft state indicators",
|
|
36951
37658
|
"$extensions": {
|
|
36952
37659
|
"org.primer.figma": {
|
|
36953
37660
|
"collection": "mode",
|
|
@@ -36956,6 +37663,10 @@
|
|
|
36956
37663
|
"codeSyntax": {
|
|
36957
37664
|
"web": "var(--fgColor-draft)"
|
|
36958
37665
|
}
|
|
37666
|
+
},
|
|
37667
|
+
"org.primer.llm": {
|
|
37668
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37669
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36959
37670
|
}
|
|
36960
37671
|
},
|
|
36961
37672
|
"key": "{fgColor.draft}"
|
|
@@ -36964,7 +37675,8 @@
|
|
|
36964
37675
|
"attributes": {},
|
|
36965
37676
|
"path": ["fgColor", "draft"],
|
|
36966
37677
|
"value": "#9198a1",
|
|
36967
|
-
"type": "color"
|
|
37678
|
+
"type": "color",
|
|
37679
|
+
"description": "Text color for draft state indicators"
|
|
36968
37680
|
},
|
|
36969
37681
|
"fgColor-link": {
|
|
36970
37682
|
"key": "{fgColor.link}",
|
|
@@ -36976,6 +37688,10 @@
|
|
|
36976
37688
|
"codeSyntax": {
|
|
36977
37689
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36978
37690
|
}
|
|
37691
|
+
},
|
|
37692
|
+
"org.primer.llm": {
|
|
37693
|
+
"usage": ["link-text", "hyperlink"],
|
|
37694
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36979
37695
|
}
|
|
36980
37696
|
},
|
|
36981
37697
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36983,6 +37699,7 @@
|
|
|
36983
37699
|
"original": {
|
|
36984
37700
|
"$value": "{fgColor.accent}",
|
|
36985
37701
|
"$type": "color",
|
|
37702
|
+
"$description": "Text color for hyperlinks",
|
|
36986
37703
|
"$extensions": {
|
|
36987
37704
|
"org.primer.figma": {
|
|
36988
37705
|
"collection": "mode",
|
|
@@ -36991,6 +37708,10 @@
|
|
|
36991
37708
|
"codeSyntax": {
|
|
36992
37709
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36993
37710
|
}
|
|
37711
|
+
},
|
|
37712
|
+
"org.primer.llm": {
|
|
37713
|
+
"usage": ["link-text", "hyperlink"],
|
|
37714
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36994
37715
|
}
|
|
36995
37716
|
},
|
|
36996
37717
|
"key": "{fgColor.link}"
|
|
@@ -36999,7 +37720,8 @@
|
|
|
36999
37720
|
"attributes": {},
|
|
37000
37721
|
"path": ["fgColor", "link"],
|
|
37001
37722
|
"value": "#4493f8",
|
|
37002
|
-
"type": "color"
|
|
37723
|
+
"type": "color",
|
|
37724
|
+
"description": "Text color for hyperlinks"
|
|
37003
37725
|
},
|
|
37004
37726
|
"fgColor-muted": {
|
|
37005
37727
|
"key": "{fgColor.muted}",
|
|
@@ -37020,6 +37742,10 @@
|
|
|
37020
37742
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37021
37743
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37022
37744
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37745
|
+
},
|
|
37746
|
+
"org.primer.llm": {
|
|
37747
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37748
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37023
37749
|
}
|
|
37024
37750
|
},
|
|
37025
37751
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37027,6 +37753,7 @@
|
|
|
37027
37753
|
"original": {
|
|
37028
37754
|
"$value": "{base.color.neutral.9}",
|
|
37029
37755
|
"$type": "color",
|
|
37756
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37030
37757
|
"$extensions": {
|
|
37031
37758
|
"org.primer.figma": {
|
|
37032
37759
|
"collection": "mode",
|
|
@@ -37044,6 +37771,10 @@
|
|
|
37044
37771
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37045
37772
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37046
37773
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37774
|
+
},
|
|
37775
|
+
"org.primer.llm": {
|
|
37776
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37777
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37047
37778
|
}
|
|
37048
37779
|
},
|
|
37049
37780
|
"key": "{fgColor.muted}"
|
|
@@ -37052,7 +37783,8 @@
|
|
|
37052
37783
|
"attributes": {},
|
|
37053
37784
|
"path": ["fgColor", "muted"],
|
|
37054
37785
|
"value": "#9198a1",
|
|
37055
|
-
"type": "color"
|
|
37786
|
+
"type": "color",
|
|
37787
|
+
"description": "Muted text for secondary content and less important information"
|
|
37056
37788
|
},
|
|
37057
37789
|
"fgColor-neutral": {
|
|
37058
37790
|
"key": "{fgColor.neutral}",
|
|
@@ -37070,6 +37802,10 @@
|
|
|
37070
37802
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37071
37803
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37072
37804
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37805
|
+
},
|
|
37806
|
+
"org.primer.llm": {
|
|
37807
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37808
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37073
37809
|
}
|
|
37074
37810
|
},
|
|
37075
37811
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37077,6 +37813,7 @@
|
|
|
37077
37813
|
"original": {
|
|
37078
37814
|
"$value": "{base.color.neutral.9}",
|
|
37079
37815
|
"$type": "color",
|
|
37816
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37080
37817
|
"$extensions": {
|
|
37081
37818
|
"org.primer.figma": {
|
|
37082
37819
|
"collection": "mode",
|
|
@@ -37091,6 +37828,10 @@
|
|
|
37091
37828
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37092
37829
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37093
37830
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37831
|
+
},
|
|
37832
|
+
"org.primer.llm": {
|
|
37833
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37834
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37094
37835
|
}
|
|
37095
37836
|
},
|
|
37096
37837
|
"key": "{fgColor.neutral}"
|
|
@@ -37099,7 +37840,8 @@
|
|
|
37099
37840
|
"attributes": {},
|
|
37100
37841
|
"path": ["fgColor", "neutral"],
|
|
37101
37842
|
"value": "#9198a1",
|
|
37102
|
-
"type": "color"
|
|
37843
|
+
"type": "color",
|
|
37844
|
+
"description": "Neutral semantic text for icons and secondary elements"
|
|
37103
37845
|
},
|
|
37104
37846
|
"fgColor-onEmphasis": {
|
|
37105
37847
|
"key": "{fgColor.onEmphasis}",
|
|
@@ -37116,6 +37858,10 @@
|
|
|
37116
37858
|
"dark": "#ffffff",
|
|
37117
37859
|
"dark-dimmed": "#f0f6fc",
|
|
37118
37860
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37861
|
+
},
|
|
37862
|
+
"org.primer.llm": {
|
|
37863
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37864
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37119
37865
|
}
|
|
37120
37866
|
},
|
|
37121
37867
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37123,6 +37869,7 @@
|
|
|
37123
37869
|
"original": {
|
|
37124
37870
|
"$value": "{base.color.neutral.13}",
|
|
37125
37871
|
"$type": "color",
|
|
37872
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37126
37873
|
"$extensions": {
|
|
37127
37874
|
"org.primer.figma": {
|
|
37128
37875
|
"collection": "mode",
|
|
@@ -37136,6 +37883,10 @@
|
|
|
37136
37883
|
"dark": "{base.color.neutral.13}",
|
|
37137
37884
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37138
37885
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37886
|
+
},
|
|
37887
|
+
"org.primer.llm": {
|
|
37888
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37889
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37139
37890
|
}
|
|
37140
37891
|
},
|
|
37141
37892
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37144,7 +37895,8 @@
|
|
|
37144
37895
|
"attributes": {},
|
|
37145
37896
|
"path": ["fgColor", "onEmphasis"],
|
|
37146
37897
|
"value": "#ffffff",
|
|
37147
|
-
"type": "color"
|
|
37898
|
+
"type": "color",
|
|
37899
|
+
"description": "Text color for use on emphasis backgrounds"
|
|
37148
37900
|
},
|
|
37149
37901
|
"fgColor-onInverse": {
|
|
37150
37902
|
"key": "{fgColor.onInverse}",
|
|
@@ -37153,6 +37905,10 @@
|
|
|
37153
37905
|
"collection": "mode",
|
|
37154
37906
|
"group": "semantic",
|
|
37155
37907
|
"scopes": ["fgColor"]
|
|
37908
|
+
},
|
|
37909
|
+
"org.primer.llm": {
|
|
37910
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37911
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37156
37912
|
}
|
|
37157
37913
|
},
|
|
37158
37914
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37160,11 +37916,16 @@
|
|
|
37160
37916
|
"original": {
|
|
37161
37917
|
"$value": "{base.color.neutral.0}",
|
|
37162
37918
|
"$type": "color",
|
|
37919
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37163
37920
|
"$extensions": {
|
|
37164
37921
|
"org.primer.figma": {
|
|
37165
37922
|
"collection": "mode",
|
|
37166
37923
|
"group": "semantic",
|
|
37167
37924
|
"scopes": ["fgColor"]
|
|
37925
|
+
},
|
|
37926
|
+
"org.primer.llm": {
|
|
37927
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37928
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37168
37929
|
}
|
|
37169
37930
|
},
|
|
37170
37931
|
"key": "{fgColor.onInverse}"
|
|
@@ -37173,7 +37934,8 @@
|
|
|
37173
37934
|
"attributes": {},
|
|
37174
37935
|
"path": ["fgColor", "onInverse"],
|
|
37175
37936
|
"value": "#010409",
|
|
37176
|
-
"type": "color"
|
|
37937
|
+
"type": "color",
|
|
37938
|
+
"description": "Text color for use on inverse backgrounds"
|
|
37177
37939
|
},
|
|
37178
37940
|
"fgColor-open": {
|
|
37179
37941
|
"key": "{fgColor.open}",
|
|
@@ -37195,6 +37957,10 @@
|
|
|
37195
37957
|
"dark-tritanopia-high-contrast": "#ffa198",
|
|
37196
37958
|
"light-tritanopia": "#da3633",
|
|
37197
37959
|
"light-tritanopia-high-contrast": "#b62324"
|
|
37960
|
+
},
|
|
37961
|
+
"org.primer.llm": {
|
|
37962
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37963
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37198
37964
|
}
|
|
37199
37965
|
},
|
|
37200
37966
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37202,6 +37968,7 @@
|
|
|
37202
37968
|
"original": {
|
|
37203
37969
|
"$value": "{base.color.red.4}",
|
|
37204
37970
|
"$type": "color",
|
|
37971
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37205
37972
|
"$extensions": {
|
|
37206
37973
|
"org.primer.figma": {
|
|
37207
37974
|
"collection": "mode",
|
|
@@ -37220,6 +37987,10 @@
|
|
|
37220
37987
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37221
37988
|
"light-tritanopia": "{base.color.red.5}",
|
|
37222
37989
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37990
|
+
},
|
|
37991
|
+
"org.primer.llm": {
|
|
37992
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37993
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37223
37994
|
}
|
|
37224
37995
|
},
|
|
37225
37996
|
"key": "{fgColor.open}"
|
|
@@ -37228,7 +37999,8 @@
|
|
|
37228
37999
|
"attributes": {},
|
|
37229
38000
|
"path": ["fgColor", "open"],
|
|
37230
38001
|
"value": "#f85149",
|
|
37231
|
-
"type": "color"
|
|
38002
|
+
"type": "color",
|
|
38003
|
+
"description": "Text color for open state indicators (issues, PRs)"
|
|
37232
38004
|
},
|
|
37233
38005
|
"fgColor-severe": {
|
|
37234
38006
|
"key": "{fgColor.severe}",
|
|
@@ -37252,6 +38024,10 @@
|
|
|
37252
38024
|
"light-tritanopia": "#da3633",
|
|
37253
38025
|
"light-tritanopia-high-contrast": "#b62324",
|
|
37254
38026
|
"light-protanopia-deuteranopia-high-contrast": "#9b4215"
|
|
38027
|
+
},
|
|
38028
|
+
"org.primer.llm": {
|
|
38029
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38030
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37255
38031
|
}
|
|
37256
38032
|
},
|
|
37257
38033
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37259,6 +38035,7 @@
|
|
|
37259
38035
|
"original": {
|
|
37260
38036
|
"$value": "{base.color.red.4}",
|
|
37261
38037
|
"$type": "color",
|
|
38038
|
+
"$description": "Severe text for high-priority warnings",
|
|
37262
38039
|
"$extensions": {
|
|
37263
38040
|
"org.primer.figma": {
|
|
37264
38041
|
"collection": "mode",
|
|
@@ -37279,6 +38056,10 @@
|
|
|
37279
38056
|
"light-tritanopia": "{base.color.red.5}",
|
|
37280
38057
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37281
38058
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38059
|
+
},
|
|
38060
|
+
"org.primer.llm": {
|
|
38061
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38062
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37282
38063
|
}
|
|
37283
38064
|
},
|
|
37284
38065
|
"key": "{fgColor.severe}"
|
|
@@ -37287,7 +38068,8 @@
|
|
|
37287
38068
|
"attributes": {},
|
|
37288
38069
|
"path": ["fgColor", "severe"],
|
|
37289
38070
|
"value": "#f85149",
|
|
37290
|
-
"type": "color"
|
|
38071
|
+
"type": "color",
|
|
38072
|
+
"description": "Severe text for high-priority warnings"
|
|
37291
38073
|
},
|
|
37292
38074
|
"fgColor-sponsors": {
|
|
37293
38075
|
"key": "{fgColor.sponsors}",
|
|
@@ -37309,6 +38091,10 @@
|
|
|
37309
38091
|
"light-high-contrast": "#9e3670",
|
|
37310
38092
|
"light-protanopia-deuteranopia-high-contrast": "#9e3670",
|
|
37311
38093
|
"light-tritanopia-high-contrast": "#9e3670"
|
|
38094
|
+
},
|
|
38095
|
+
"org.primer.llm": {
|
|
38096
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38097
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37312
38098
|
}
|
|
37313
38099
|
},
|
|
37314
38100
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37316,6 +38102,7 @@
|
|
|
37316
38102
|
"original": {
|
|
37317
38103
|
"$value": "{base.color.pink.4}",
|
|
37318
38104
|
"$type": "color",
|
|
38105
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37319
38106
|
"$extensions": {
|
|
37320
38107
|
"org.primer.figma": {
|
|
37321
38108
|
"collection": "mode",
|
|
@@ -37334,6 +38121,10 @@
|
|
|
37334
38121
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37335
38122
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37336
38123
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38124
|
+
},
|
|
38125
|
+
"org.primer.llm": {
|
|
38126
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38127
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37337
38128
|
}
|
|
37338
38129
|
},
|
|
37339
38130
|
"key": "{fgColor.sponsors}"
|
|
@@ -37342,7 +38133,8 @@
|
|
|
37342
38133
|
"attributes": {},
|
|
37343
38134
|
"path": ["fgColor", "sponsors"],
|
|
37344
38135
|
"value": "#db61a2",
|
|
37345
|
-
"type": "color"
|
|
38136
|
+
"type": "color",
|
|
38137
|
+
"description": "Text color for GitHub Sponsors content"
|
|
37346
38138
|
},
|
|
37347
38139
|
"fgColor-success": {
|
|
37348
38140
|
"key": "{fgColor.success}",
|
|
@@ -37368,6 +38160,10 @@
|
|
|
37368
38160
|
"dark-tritanopia-high-contrast": "#79c0ff",
|
|
37369
38161
|
"light-tritanopia": "#1f6feb",
|
|
37370
38162
|
"light-tritanopia-high-contrast": "#1158c7"
|
|
38163
|
+
},
|
|
38164
|
+
"org.primer.llm": {
|
|
38165
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38166
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37371
38167
|
}
|
|
37372
38168
|
},
|
|
37373
38169
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37375,6 +38171,7 @@
|
|
|
37375
38171
|
"original": {
|
|
37376
38172
|
"$value": "{base.color.blue.3}",
|
|
37377
38173
|
"$type": "color",
|
|
38174
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37378
38175
|
"$extensions": {
|
|
37379
38176
|
"org.primer.figma": {
|
|
37380
38177
|
"collection": "mode",
|
|
@@ -37397,6 +38194,10 @@
|
|
|
37397
38194
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37398
38195
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37399
38196
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38197
|
+
},
|
|
38198
|
+
"org.primer.llm": {
|
|
38199
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38200
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37400
38201
|
}
|
|
37401
38202
|
},
|
|
37402
38203
|
"key": "{fgColor.success}"
|
|
@@ -37405,7 +38206,8 @@
|
|
|
37405
38206
|
"attributes": {},
|
|
37406
38207
|
"path": ["fgColor", "success"],
|
|
37407
38208
|
"value": "#58a6ff",
|
|
37408
|
-
"type": "color"
|
|
38209
|
+
"type": "color",
|
|
38210
|
+
"description": "Success text for positive feedback and completed states"
|
|
37409
38211
|
},
|
|
37410
38212
|
"fgColor-upsell": {
|
|
37411
38213
|
"key": "{fgColor.upsell}",
|
|
@@ -37417,6 +38219,10 @@
|
|
|
37417
38219
|
"codeSyntax": {
|
|
37418
38220
|
"web": "var(--fgColor-upsell)"
|
|
37419
38221
|
}
|
|
38222
|
+
},
|
|
38223
|
+
"org.primer.llm": {
|
|
38224
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38225
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37420
38226
|
}
|
|
37421
38227
|
},
|
|
37422
38228
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37424,6 +38230,7 @@
|
|
|
37424
38230
|
"original": {
|
|
37425
38231
|
"$value": "{fgColor.done}",
|
|
37426
38232
|
"$type": "color",
|
|
38233
|
+
"$description": "Text color for upsell and promotional content",
|
|
37427
38234
|
"$extensions": {
|
|
37428
38235
|
"org.primer.figma": {
|
|
37429
38236
|
"collection": "mode",
|
|
@@ -37432,6 +38239,10 @@
|
|
|
37432
38239
|
"codeSyntax": {
|
|
37433
38240
|
"web": "var(--fgColor-upsell)"
|
|
37434
38241
|
}
|
|
38242
|
+
},
|
|
38243
|
+
"org.primer.llm": {
|
|
38244
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38245
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37435
38246
|
}
|
|
37436
38247
|
},
|
|
37437
38248
|
"key": "{fgColor.upsell}"
|
|
@@ -37440,7 +38251,8 @@
|
|
|
37440
38251
|
"attributes": {},
|
|
37441
38252
|
"path": ["fgColor", "upsell"],
|
|
37442
38253
|
"value": "#ab7df8",
|
|
37443
|
-
"type": "color"
|
|
38254
|
+
"type": "color",
|
|
38255
|
+
"description": "Text color for upsell and promotional content"
|
|
37444
38256
|
},
|
|
37445
38257
|
"fgColor-white": {
|
|
37446
38258
|
"key": "{fgColor.white}",
|
|
@@ -37452,6 +38264,10 @@
|
|
|
37452
38264
|
},
|
|
37453
38265
|
"org.primer.overrides": {
|
|
37454
38266
|
"dark": "#ffffff"
|
|
38267
|
+
},
|
|
38268
|
+
"org.primer.llm": {
|
|
38269
|
+
"doNotUse": true,
|
|
38270
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37455
38271
|
}
|
|
37456
38272
|
},
|
|
37457
38273
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37459,6 +38275,7 @@
|
|
|
37459
38275
|
"original": {
|
|
37460
38276
|
"$value": "{base.color.neutral.13}",
|
|
37461
38277
|
"$type": "color",
|
|
38278
|
+
"$description": "Pure white text",
|
|
37462
38279
|
"$extensions": {
|
|
37463
38280
|
"org.primer.figma": {
|
|
37464
38281
|
"collection": "mode",
|
|
@@ -37467,6 +38284,10 @@
|
|
|
37467
38284
|
},
|
|
37468
38285
|
"org.primer.overrides": {
|
|
37469
38286
|
"dark": "{base.color.neutral.13}"
|
|
38287
|
+
},
|
|
38288
|
+
"org.primer.llm": {
|
|
38289
|
+
"doNotUse": true,
|
|
38290
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37470
38291
|
}
|
|
37471
38292
|
},
|
|
37472
38293
|
"key": "{fgColor.white}"
|
|
@@ -37475,10 +38296,17 @@
|
|
|
37475
38296
|
"attributes": {},
|
|
37476
38297
|
"path": ["fgColor", "white"],
|
|
37477
38298
|
"value": "#ffffff",
|
|
37478
|
-
"type": "color"
|
|
38299
|
+
"type": "color",
|
|
38300
|
+
"description": "Pure white text"
|
|
37479
38301
|
},
|
|
37480
38302
|
"focus-outline": {
|
|
37481
38303
|
"key": "{focus.outline}",
|
|
38304
|
+
"$extensions": {
|
|
38305
|
+
"org.primer.llm": {
|
|
38306
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38307
|
+
"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."
|
|
38308
|
+
}
|
|
38309
|
+
},
|
|
37482
38310
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37483
38311
|
"isSource": true,
|
|
37484
38312
|
"original": {
|
|
@@ -37488,13 +38316,21 @@
|
|
|
37488
38316
|
"width": "2px"
|
|
37489
38317
|
},
|
|
37490
38318
|
"$type": "border",
|
|
38319
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38320
|
+
"$extensions": {
|
|
38321
|
+
"org.primer.llm": {
|
|
38322
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38323
|
+
"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."
|
|
38324
|
+
}
|
|
38325
|
+
},
|
|
37491
38326
|
"key": "{focus.outline}"
|
|
37492
38327
|
},
|
|
37493
38328
|
"name": "focus-outline",
|
|
37494
38329
|
"attributes": {},
|
|
37495
38330
|
"path": ["focus", "outline"],
|
|
37496
38331
|
"value": "2px solid #1f6feb",
|
|
37497
|
-
"type": "border"
|
|
38332
|
+
"type": "border",
|
|
38333
|
+
"description": "Focus ring outline for keyboard navigation and accessibility."
|
|
37498
38334
|
},
|
|
37499
38335
|
"focus-outlineColor": {
|
|
37500
38336
|
"key": "{focus.outlineColor}",
|
|
@@ -37503,6 +38339,10 @@
|
|
|
37503
38339
|
"collection": "mode",
|
|
37504
38340
|
"group": "component (internal)",
|
|
37505
38341
|
"scopes": ["borderColor", "effectColor"]
|
|
38342
|
+
},
|
|
38343
|
+
"org.primer.llm": {
|
|
38344
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38345
|
+
"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
38346
|
}
|
|
37507
38347
|
},
|
|
37508
38348
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37510,11 +38350,16 @@
|
|
|
37510
38350
|
"original": {
|
|
37511
38351
|
"$value": "{borderColor.accent.emphasis}",
|
|
37512
38352
|
"$type": "color",
|
|
38353
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37513
38354
|
"$extensions": {
|
|
37514
38355
|
"org.primer.figma": {
|
|
37515
38356
|
"collection": "mode",
|
|
37516
38357
|
"group": "component (internal)",
|
|
37517
38358
|
"scopes": ["borderColor", "effectColor"]
|
|
38359
|
+
},
|
|
38360
|
+
"org.primer.llm": {
|
|
38361
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38362
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37518
38363
|
}
|
|
37519
38364
|
},
|
|
37520
38365
|
"key": "{focus.outlineColor}"
|
|
@@ -37523,7 +38368,8 @@
|
|
|
37523
38368
|
"attributes": {},
|
|
37524
38369
|
"path": ["focus", "outlineColor"],
|
|
37525
38370
|
"value": "#1f6feb",
|
|
37526
|
-
"type": "color"
|
|
38371
|
+
"type": "color",
|
|
38372
|
+
"description": "Outline color for focus states on interactive elements"
|
|
37527
38373
|
},
|
|
37528
38374
|
"header-bgColor": {
|
|
37529
38375
|
"key": "{header.bgColor}",
|
|
@@ -46584,6 +47430,10 @@
|
|
|
46584
47430
|
"isSource": true,
|
|
46585
47431
|
"$type": "color"
|
|
46586
47432
|
}
|
|
47433
|
+
},
|
|
47434
|
+
"org.primer.llm": {
|
|
47435
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47436
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46587
47437
|
}
|
|
46588
47438
|
},
|
|
46589
47439
|
"alpha": 0.7,
|
|
@@ -46592,6 +47442,7 @@
|
|
|
46592
47442
|
"original": {
|
|
46593
47443
|
"$value": "{bgColor.accent.emphasis}",
|
|
46594
47444
|
"$type": "color",
|
|
47445
|
+
"$description": "Background color for text selection highlights",
|
|
46595
47446
|
"$extensions": {
|
|
46596
47447
|
"org.primer.figma": {
|
|
46597
47448
|
"collection": "mode",
|
|
@@ -46606,6 +47457,10 @@
|
|
|
46606
47457
|
"isSource": true,
|
|
46607
47458
|
"$type": "color"
|
|
46608
47459
|
}
|
|
47460
|
+
},
|
|
47461
|
+
"org.primer.llm": {
|
|
47462
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47463
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46609
47464
|
}
|
|
46610
47465
|
},
|
|
46611
47466
|
"alpha": 0.7,
|
|
@@ -46615,7 +47470,8 @@
|
|
|
46615
47470
|
"attributes": {},
|
|
46616
47471
|
"path": ["selection", "bgColor"],
|
|
46617
47472
|
"value": "#1f6febb3",
|
|
46618
|
-
"type": "color"
|
|
47473
|
+
"type": "color",
|
|
47474
|
+
"description": "Background color for text selection highlights"
|
|
46619
47475
|
},
|
|
46620
47476
|
"shadow-floating-large": {
|
|
46621
47477
|
"key": "{shadow.floating.large}",
|
|
@@ -46648,6 +47504,10 @@
|
|
|
46648
47504
|
"isSource": true,
|
|
46649
47505
|
"$type": "shadow"
|
|
46650
47506
|
}
|
|
47507
|
+
},
|
|
47508
|
+
"org.primer.llm": {
|
|
47509
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47510
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46651
47511
|
}
|
|
46652
47512
|
},
|
|
46653
47513
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46672,6 +47532,7 @@
|
|
|
46672
47532
|
}
|
|
46673
47533
|
],
|
|
46674
47534
|
"$type": "shadow",
|
|
47535
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46675
47536
|
"$extensions": {
|
|
46676
47537
|
"org.primer.figma": {
|
|
46677
47538
|
"collection": "mode",
|
|
@@ -46701,6 +47562,10 @@
|
|
|
46701
47562
|
"isSource": true,
|
|
46702
47563
|
"$type": "shadow"
|
|
46703
47564
|
}
|
|
47565
|
+
},
|
|
47566
|
+
"org.primer.llm": {
|
|
47567
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47568
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46704
47569
|
}
|
|
46705
47570
|
},
|
|
46706
47571
|
"key": "{shadow.floating.large}"
|
|
@@ -46709,7 +47574,8 @@
|
|
|
46709
47574
|
"attributes": {},
|
|
46710
47575
|
"path": ["shadow", "floating", "large"],
|
|
46711
47576
|
"value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
|
|
46712
|
-
"type": "shadow"
|
|
47577
|
+
"type": "shadow",
|
|
47578
|
+
"description": "Large floating shadow for modals and dialogs"
|
|
46713
47579
|
},
|
|
46714
47580
|
"shadow-floating-legacy": {
|
|
46715
47581
|
"key": "{shadow.floating.legacy}",
|
|
@@ -46739,6 +47605,10 @@
|
|
|
46739
47605
|
"isSource": true,
|
|
46740
47606
|
"$type": "shadow"
|
|
46741
47607
|
}
|
|
47608
|
+
},
|
|
47609
|
+
"org.primer.llm": {
|
|
47610
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47611
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46742
47612
|
}
|
|
46743
47613
|
},
|
|
46744
47614
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46763,6 +47633,7 @@
|
|
|
46763
47633
|
}
|
|
46764
47634
|
],
|
|
46765
47635
|
"$type": "shadow",
|
|
47636
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46766
47637
|
"$extensions": {
|
|
46767
47638
|
"org.primer.figma": {},
|
|
46768
47639
|
"org.primer.overrides": {
|
|
@@ -46789,6 +47660,10 @@
|
|
|
46789
47660
|
"isSource": true,
|
|
46790
47661
|
"$type": "shadow"
|
|
46791
47662
|
}
|
|
47663
|
+
},
|
|
47664
|
+
"org.primer.llm": {
|
|
47665
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47666
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46792
47667
|
}
|
|
46793
47668
|
},
|
|
46794
47669
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46797,7 +47672,8 @@
|
|
|
46797
47672
|
"attributes": {},
|
|
46798
47673
|
"path": ["shadow", "floating", "legacy"],
|
|
46799
47674
|
"value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46800
|
-
"type": "shadow"
|
|
47675
|
+
"type": "shadow",
|
|
47676
|
+
"description": "Legacy floating shadow for backward compatibility"
|
|
46801
47677
|
},
|
|
46802
47678
|
"shadow-floating-medium": {
|
|
46803
47679
|
"key": "{shadow.floating.medium}",
|
|
@@ -46854,6 +47730,10 @@
|
|
|
46854
47730
|
"isSource": true,
|
|
46855
47731
|
"$type": "shadow"
|
|
46856
47732
|
}
|
|
47733
|
+
},
|
|
47734
|
+
"org.primer.llm": {
|
|
47735
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47736
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46857
47737
|
}
|
|
46858
47738
|
},
|
|
46859
47739
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46902,6 +47782,7 @@
|
|
|
46902
47782
|
}
|
|
46903
47783
|
],
|
|
46904
47784
|
"$type": "shadow",
|
|
47785
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46905
47786
|
"$extensions": {
|
|
46906
47787
|
"org.primer.figma": {
|
|
46907
47788
|
"collection": "mode",
|
|
@@ -46955,6 +47836,10 @@
|
|
|
46955
47836
|
"isSource": true,
|
|
46956
47837
|
"$type": "shadow"
|
|
46957
47838
|
}
|
|
47839
|
+
},
|
|
47840
|
+
"org.primer.llm": {
|
|
47841
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47842
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46958
47843
|
}
|
|
46959
47844
|
},
|
|
46960
47845
|
"key": "{shadow.floating.medium}"
|
|
@@ -46963,7 +47848,8 @@
|
|
|
46963
47848
|
"attributes": {},
|
|
46964
47849
|
"path": ["shadow", "floating", "medium"],
|
|
46965
47850
|
"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",
|
|
46966
|
-
"type": "shadow"
|
|
47851
|
+
"type": "shadow",
|
|
47852
|
+
"description": "Medium floating shadow for popovers and action menus"
|
|
46967
47853
|
},
|
|
46968
47854
|
"shadow-floating-small": {
|
|
46969
47855
|
"key": "{shadow.floating.small}",
|
|
@@ -47004,6 +47890,10 @@
|
|
|
47004
47890
|
"isSource": true,
|
|
47005
47891
|
"$type": "shadow"
|
|
47006
47892
|
}
|
|
47893
|
+
},
|
|
47894
|
+
"org.primer.llm": {
|
|
47895
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47896
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47007
47897
|
}
|
|
47008
47898
|
},
|
|
47009
47899
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47036,6 +47926,7 @@
|
|
|
47036
47926
|
}
|
|
47037
47927
|
],
|
|
47038
47928
|
"$type": "shadow",
|
|
47929
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47039
47930
|
"$extensions": {
|
|
47040
47931
|
"org.primer.figma": {
|
|
47041
47932
|
"collection": "mode",
|
|
@@ -47073,6 +47964,10 @@
|
|
|
47073
47964
|
"isSource": true,
|
|
47074
47965
|
"$type": "shadow"
|
|
47075
47966
|
}
|
|
47967
|
+
},
|
|
47968
|
+
"org.primer.llm": {
|
|
47969
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47970
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47076
47971
|
}
|
|
47077
47972
|
},
|
|
47078
47973
|
"key": "{shadow.floating.small}"
|
|
@@ -47081,7 +47976,8 @@
|
|
|
47081
47976
|
"attributes": {},
|
|
47082
47977
|
"path": ["shadow", "floating", "small"],
|
|
47083
47978
|
"value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
47084
|
-
"type": "shadow"
|
|
47979
|
+
"type": "shadow",
|
|
47980
|
+
"description": "Small floating shadow for dropdowns, tooltips, and small overlays"
|
|
47085
47981
|
},
|
|
47086
47982
|
"shadow-floating-xlarge": {
|
|
47087
47983
|
"key": "{shadow.floating.xlarge}",
|
|
@@ -47114,6 +48010,10 @@
|
|
|
47114
48010
|
"isSource": true,
|
|
47115
48011
|
"$type": "shadow"
|
|
47116
48012
|
}
|
|
48013
|
+
},
|
|
48014
|
+
"org.primer.llm": {
|
|
48015
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48016
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47117
48017
|
}
|
|
47118
48018
|
},
|
|
47119
48019
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47138,6 +48038,7 @@
|
|
|
47138
48038
|
}
|
|
47139
48039
|
],
|
|
47140
48040
|
"$type": "shadow",
|
|
48041
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47141
48042
|
"$extensions": {
|
|
47142
48043
|
"org.primer.figma": {
|
|
47143
48044
|
"collection": "mode",
|
|
@@ -47167,6 +48068,10 @@
|
|
|
47167
48068
|
"isSource": true,
|
|
47168
48069
|
"$type": "shadow"
|
|
47169
48070
|
}
|
|
48071
|
+
},
|
|
48072
|
+
"org.primer.llm": {
|
|
48073
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48074
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47170
48075
|
}
|
|
47171
48076
|
},
|
|
47172
48077
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47175,7 +48080,8 @@
|
|
|
47175
48080
|
"attributes": {},
|
|
47176
48081
|
"path": ["shadow", "floating", "xlarge"],
|
|
47177
48082
|
"value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
|
|
47178
|
-
"type": "shadow"
|
|
48083
|
+
"type": "shadow",
|
|
48084
|
+
"description": "Extra large floating shadow for full-screen overlays and sheets"
|
|
47179
48085
|
},
|
|
47180
48086
|
"shadow-inset": {
|
|
47181
48087
|
"key": "{shadow.inset}",
|
|
@@ -47199,6 +48105,10 @@
|
|
|
47199
48105
|
"isSource": true,
|
|
47200
48106
|
"$type": "shadow"
|
|
47201
48107
|
}
|
|
48108
|
+
},
|
|
48109
|
+
"org.primer.llm": {
|
|
48110
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48111
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47202
48112
|
}
|
|
47203
48113
|
},
|
|
47204
48114
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47214,6 +48124,7 @@
|
|
|
47214
48124
|
"inset": true
|
|
47215
48125
|
},
|
|
47216
48126
|
"$type": "shadow",
|
|
48127
|
+
"$description": "Inset shadow for recessed elements",
|
|
47217
48128
|
"$extensions": {
|
|
47218
48129
|
"org.primer.figma": {
|
|
47219
48130
|
"collection": "mode",
|
|
@@ -47234,6 +48145,10 @@
|
|
|
47234
48145
|
"isSource": true,
|
|
47235
48146
|
"$type": "shadow"
|
|
47236
48147
|
}
|
|
48148
|
+
},
|
|
48149
|
+
"org.primer.llm": {
|
|
48150
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48151
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47237
48152
|
}
|
|
47238
48153
|
},
|
|
47239
48154
|
"key": "{shadow.inset}"
|
|
@@ -47242,7 +48157,8 @@
|
|
|
47242
48157
|
"attributes": {},
|
|
47243
48158
|
"path": ["shadow", "inset"],
|
|
47244
48159
|
"value": "inset 0px 1px 0px 0px #0104093d",
|
|
47245
|
-
"type": "shadow"
|
|
48160
|
+
"type": "shadow",
|
|
48161
|
+
"description": "Inset shadow for recessed elements"
|
|
47246
48162
|
},
|
|
47247
48163
|
"shadow-resting-medium": {
|
|
47248
48164
|
"key": "{shadow.resting.medium}",
|
|
@@ -47275,6 +48191,10 @@
|
|
|
47275
48191
|
"isSource": true,
|
|
47276
48192
|
"$type": "shadow"
|
|
47277
48193
|
}
|
|
48194
|
+
},
|
|
48195
|
+
"org.primer.llm": {
|
|
48196
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48197
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47278
48198
|
}
|
|
47279
48199
|
},
|
|
47280
48200
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47299,6 +48219,7 @@
|
|
|
47299
48219
|
}
|
|
47300
48220
|
],
|
|
47301
48221
|
"$type": "shadow",
|
|
48222
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47302
48223
|
"$extensions": {
|
|
47303
48224
|
"org.primer.figma": {
|
|
47304
48225
|
"collection": "mode",
|
|
@@ -47328,6 +48249,10 @@
|
|
|
47328
48249
|
"isSource": true,
|
|
47329
48250
|
"$type": "shadow"
|
|
47330
48251
|
}
|
|
48252
|
+
},
|
|
48253
|
+
"org.primer.llm": {
|
|
48254
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48255
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47331
48256
|
}
|
|
47332
48257
|
},
|
|
47333
48258
|
"key": "{shadow.resting.medium}"
|
|
@@ -47336,7 +48261,8 @@
|
|
|
47336
48261
|
"attributes": {},
|
|
47337
48262
|
"path": ["shadow", "resting", "medium"],
|
|
47338
48263
|
"value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47339
|
-
"type": "shadow"
|
|
48264
|
+
"type": "shadow",
|
|
48265
|
+
"description": "Medium resting shadow for cards and elevated surfaces"
|
|
47340
48266
|
},
|
|
47341
48267
|
"shadow-resting-small": {
|
|
47342
48268
|
"key": "{shadow.resting.small}",
|
|
@@ -47371,6 +48297,10 @@
|
|
|
47371
48297
|
"isSource": true,
|
|
47372
48298
|
"$type": "shadow"
|
|
47373
48299
|
}
|
|
48300
|
+
},
|
|
48301
|
+
"org.primer.llm": {
|
|
48302
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48303
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47374
48304
|
}
|
|
47375
48305
|
},
|
|
47376
48306
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47397,6 +48327,7 @@
|
|
|
47397
48327
|
}
|
|
47398
48328
|
],
|
|
47399
48329
|
"$type": "shadow",
|
|
48330
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47400
48331
|
"$extensions": {
|
|
47401
48332
|
"org.primer.figma": {
|
|
47402
48333
|
"collection": "mode",
|
|
@@ -47428,6 +48359,10 @@
|
|
|
47428
48359
|
"isSource": true,
|
|
47429
48360
|
"$type": "shadow"
|
|
47430
48361
|
}
|
|
48362
|
+
},
|
|
48363
|
+
"org.primer.llm": {
|
|
48364
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48365
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47431
48366
|
}
|
|
47432
48367
|
},
|
|
47433
48368
|
"key": "{shadow.resting.small}"
|
|
@@ -47436,7 +48371,8 @@
|
|
|
47436
48371
|
"attributes": {},
|
|
47437
48372
|
"path": ["shadow", "resting", "small"],
|
|
47438
48373
|
"value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47439
|
-
"type": "shadow"
|
|
48374
|
+
"type": "shadow",
|
|
48375
|
+
"description": "Small resting shadow for buttons and interactive elements"
|
|
47440
48376
|
},
|
|
47441
48377
|
"shadow-resting-xsmall": {
|
|
47442
48378
|
"key": "{shadow.resting.xsmall}",
|
|
@@ -47460,6 +48396,10 @@
|
|
|
47460
48396
|
"isSource": true,
|
|
47461
48397
|
"$type": "shadow"
|
|
47462
48398
|
}
|
|
48399
|
+
},
|
|
48400
|
+
"org.primer.llm": {
|
|
48401
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48402
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47463
48403
|
}
|
|
47464
48404
|
},
|
|
47465
48405
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47475,6 +48415,7 @@
|
|
|
47475
48415
|
"inset": false
|
|
47476
48416
|
},
|
|
47477
48417
|
"$type": "shadow",
|
|
48418
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47478
48419
|
"$extensions": {
|
|
47479
48420
|
"org.primer.figma": {
|
|
47480
48421
|
"collection": "mode",
|
|
@@ -47495,6 +48436,10 @@
|
|
|
47495
48436
|
"isSource": true,
|
|
47496
48437
|
"$type": "shadow"
|
|
47497
48438
|
}
|
|
48439
|
+
},
|
|
48440
|
+
"org.primer.llm": {
|
|
48441
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48442
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47498
48443
|
}
|
|
47499
48444
|
},
|
|
47500
48445
|
"key": "{shadow.resting.xsmall}"
|
|
@@ -47503,7 +48448,8 @@
|
|
|
47503
48448
|
"attributes": {},
|
|
47504
48449
|
"path": ["shadow", "resting", "xsmall"],
|
|
47505
48450
|
"value": "0px 1px 1px 0px #010409cc",
|
|
47506
|
-
"type": "shadow"
|
|
48451
|
+
"type": "shadow",
|
|
48452
|
+
"description": "Extra small resting shadow for minimal elevation"
|
|
47507
48453
|
},
|
|
47508
48454
|
"sideNav-bgColor-selected": {
|
|
47509
48455
|
"key": "{sideNav.bgColor.selected}",
|