@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
|
@@ -308,6 +308,10 @@
|
|
|
308
308
|
"dark-dimmed-high-contrast": "#022f7a",
|
|
309
309
|
"dark-tritanopia-high-contrast": "#021a4a",
|
|
310
310
|
"dark-protanopia-deuteranopia-high-contrast": "#021a4a"
|
|
311
|
+
},
|
|
312
|
+
"org.primer.llm": {
|
|
313
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
314
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
311
315
|
}
|
|
312
316
|
},
|
|
313
317
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -315,6 +319,7 @@
|
|
|
315
319
|
"original": {
|
|
316
320
|
"$value": "{base.color.blue.5}",
|
|
317
321
|
"$type": "color",
|
|
322
|
+
"$description": "Strong accent background for active states and focused states",
|
|
318
323
|
"$extensions": {
|
|
319
324
|
"org.primer.figma": {
|
|
320
325
|
"collection": "mode",
|
|
@@ -330,6 +335,10 @@
|
|
|
330
335
|
"dark-dimmed-high-contrast": "{base.color.blue.7}",
|
|
331
336
|
"dark-tritanopia-high-contrast": "{base.color.blue.9}",
|
|
332
337
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
|
|
338
|
+
},
|
|
339
|
+
"org.primer.llm": {
|
|
340
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
341
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
333
342
|
}
|
|
334
343
|
},
|
|
335
344
|
"key": "{bgColor.accent.emphasis}"
|
|
@@ -338,7 +347,8 @@
|
|
|
338
347
|
"attributes": {},
|
|
339
348
|
"path": ["bgColor", "accent", "emphasis"],
|
|
340
349
|
"value": "#0349b4",
|
|
341
|
-
"type": "color"
|
|
350
|
+
"type": "color",
|
|
351
|
+
"description": "Strong accent background for active states and focused states"
|
|
342
352
|
},
|
|
343
353
|
"bgColor-accent-muted": {
|
|
344
354
|
"key": "{bgColor.accent.muted}",
|
|
@@ -359,6 +369,10 @@
|
|
|
359
369
|
"isSource": true,
|
|
360
370
|
"$type": "color"
|
|
361
371
|
}
|
|
372
|
+
},
|
|
373
|
+
"org.primer.llm": {
|
|
374
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
375
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
362
376
|
}
|
|
363
377
|
},
|
|
364
378
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -366,6 +380,7 @@
|
|
|
366
380
|
"original": {
|
|
367
381
|
"$value": "{base.color.blue.0}",
|
|
368
382
|
"$type": "color",
|
|
383
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
369
384
|
"$extensions": {
|
|
370
385
|
"org.primer.figma": {
|
|
371
386
|
"collection": "mode",
|
|
@@ -383,6 +398,10 @@
|
|
|
383
398
|
"isSource": true,
|
|
384
399
|
"$type": "color"
|
|
385
400
|
}
|
|
401
|
+
},
|
|
402
|
+
"org.primer.llm": {
|
|
403
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
404
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
386
405
|
}
|
|
387
406
|
},
|
|
388
407
|
"key": "{bgColor.accent.muted}"
|
|
@@ -391,7 +410,8 @@
|
|
|
391
410
|
"attributes": {},
|
|
392
411
|
"path": ["bgColor", "accent", "muted"],
|
|
393
412
|
"value": "#dff7ff",
|
|
394
|
-
"type": "color"
|
|
413
|
+
"type": "color",
|
|
414
|
+
"description": "Subtle accent background for informational or selected elements"
|
|
395
415
|
},
|
|
396
416
|
"bgColor-attention-emphasis": {
|
|
397
417
|
"key": "{bgColor.attention.emphasis}",
|
|
@@ -409,6 +429,10 @@
|
|
|
409
429
|
"dark-dimmed-high-contrast": "#4e2c00",
|
|
410
430
|
"dark-protanopia-deuteranopia-high-contrast": "#2e1800",
|
|
411
431
|
"dark-tritanopia-high-contrast": "#2e1800"
|
|
432
|
+
},
|
|
433
|
+
"org.primer.llm": {
|
|
434
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
435
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
412
436
|
}
|
|
413
437
|
},
|
|
414
438
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -416,6 +440,7 @@
|
|
|
416
440
|
"original": {
|
|
417
441
|
"$value": "{base.color.yellow.5}",
|
|
418
442
|
"$type": "color",
|
|
443
|
+
"$description": "Strong attention background for prominent warnings",
|
|
419
444
|
"$extensions": {
|
|
420
445
|
"org.primer.figma": {
|
|
421
446
|
"collection": "mode",
|
|
@@ -430,6 +455,10 @@
|
|
|
430
455
|
"dark-dimmed-high-contrast": "{base.color.yellow.7}",
|
|
431
456
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
|
|
432
457
|
"dark-tritanopia-high-contrast": "{base.color.yellow.9}"
|
|
458
|
+
},
|
|
459
|
+
"org.primer.llm": {
|
|
460
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
461
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
433
462
|
}
|
|
434
463
|
},
|
|
435
464
|
"key": "{bgColor.attention.emphasis}"
|
|
@@ -438,7 +467,8 @@
|
|
|
438
467
|
"attributes": {},
|
|
439
468
|
"path": ["bgColor", "attention", "emphasis"],
|
|
440
469
|
"value": "#744500",
|
|
441
|
-
"type": "color"
|
|
470
|
+
"type": "color",
|
|
471
|
+
"description": "Strong attention background for prominent warnings"
|
|
442
472
|
},
|
|
443
473
|
"bgColor-attention-muted": {
|
|
444
474
|
"key": "{bgColor.attention.muted}",
|
|
@@ -459,6 +489,10 @@
|
|
|
459
489
|
"isSource": true,
|
|
460
490
|
"$type": "color"
|
|
461
491
|
}
|
|
492
|
+
},
|
|
493
|
+
"org.primer.llm": {
|
|
494
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
495
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
462
496
|
}
|
|
463
497
|
},
|
|
464
498
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -466,6 +500,7 @@
|
|
|
466
500
|
"original": {
|
|
467
501
|
"$value": "{base.color.yellow.0}",
|
|
468
502
|
"$type": "color",
|
|
503
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
469
504
|
"$extensions": {
|
|
470
505
|
"org.primer.figma": {
|
|
471
506
|
"collection": "mode",
|
|
@@ -483,6 +518,10 @@
|
|
|
483
518
|
"isSource": true,
|
|
484
519
|
"$type": "color"
|
|
485
520
|
}
|
|
521
|
+
},
|
|
522
|
+
"org.primer.llm": {
|
|
523
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
524
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
486
525
|
}
|
|
487
526
|
},
|
|
488
527
|
"key": "{bgColor.attention.muted}"
|
|
@@ -491,7 +530,8 @@
|
|
|
491
530
|
"attributes": {},
|
|
492
531
|
"path": ["bgColor", "attention", "muted"],
|
|
493
532
|
"value": "#fcf7be",
|
|
494
|
-
"type": "color"
|
|
533
|
+
"type": "color",
|
|
534
|
+
"description": "Subtle attention background for warnings and caution states"
|
|
495
535
|
},
|
|
496
536
|
"bgColor-black": {
|
|
497
537
|
"key": "{bgColor.black}",
|
|
@@ -503,6 +543,10 @@
|
|
|
503
543
|
},
|
|
504
544
|
"org.primer.overrides": {
|
|
505
545
|
"dark": "#ffffff"
|
|
546
|
+
},
|
|
547
|
+
"org.primer.llm": {
|
|
548
|
+
"doNotUse": true,
|
|
549
|
+
"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."
|
|
506
550
|
}
|
|
507
551
|
},
|
|
508
552
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -510,6 +554,7 @@
|
|
|
510
554
|
"original": {
|
|
511
555
|
"$value": "{base.color.neutral.13}",
|
|
512
556
|
"$type": "color",
|
|
557
|
+
"$description": "Pure black background",
|
|
513
558
|
"$extensions": {
|
|
514
559
|
"org.primer.figma": {
|
|
515
560
|
"collection": "mode",
|
|
@@ -518,6 +563,10 @@
|
|
|
518
563
|
},
|
|
519
564
|
"org.primer.overrides": {
|
|
520
565
|
"dark": "{base.color.neutral.0}"
|
|
566
|
+
},
|
|
567
|
+
"org.primer.llm": {
|
|
568
|
+
"doNotUse": true,
|
|
569
|
+
"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."
|
|
521
570
|
}
|
|
522
571
|
},
|
|
523
572
|
"key": "{bgColor.black}"
|
|
@@ -526,7 +575,8 @@
|
|
|
526
575
|
"attributes": {},
|
|
527
576
|
"path": ["bgColor", "black"],
|
|
528
577
|
"value": "#010409",
|
|
529
|
-
"type": "color"
|
|
578
|
+
"type": "color",
|
|
579
|
+
"description": "Pure black background"
|
|
530
580
|
},
|
|
531
581
|
"bgColor-closed-emphasis": {
|
|
532
582
|
"key": "{bgColor.closed.emphasis}",
|
|
@@ -548,6 +598,10 @@
|
|
|
548
598
|
"light-protanopia-deuteranopia-high-contrast": "#454c54",
|
|
549
599
|
"dark-protanopia-deuteranopia": "#454c54",
|
|
550
600
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
601
|
+
},
|
|
602
|
+
"org.primer.llm": {
|
|
603
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
604
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
551
605
|
}
|
|
552
606
|
},
|
|
553
607
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -555,6 +609,7 @@
|
|
|
555
609
|
"original": {
|
|
556
610
|
"$value": "{bgColor.neutral.emphasis}",
|
|
557
611
|
"$type": "color",
|
|
612
|
+
"$description": "Strong background for closed state badges and labels",
|
|
558
613
|
"$extensions": {
|
|
559
614
|
"org.primer.figma": {
|
|
560
615
|
"collection": "mode",
|
|
@@ -573,6 +628,10 @@
|
|
|
573
628
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
574
629
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
575
630
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
631
|
+
},
|
|
632
|
+
"org.primer.llm": {
|
|
633
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
634
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
576
635
|
}
|
|
577
636
|
},
|
|
578
637
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -581,7 +640,8 @@
|
|
|
581
640
|
"attributes": {},
|
|
582
641
|
"path": ["bgColor", "closed", "emphasis"],
|
|
583
642
|
"value": "#454c54",
|
|
584
|
-
"type": "color"
|
|
643
|
+
"type": "color",
|
|
644
|
+
"description": "Strong background for closed state badges and labels"
|
|
585
645
|
},
|
|
586
646
|
"bgColor-closed-muted": {
|
|
587
647
|
"key": "{bgColor.closed.muted}",
|
|
@@ -620,6 +680,10 @@
|
|
|
620
680
|
"isSource": true,
|
|
621
681
|
"$type": "color"
|
|
622
682
|
}
|
|
683
|
+
},
|
|
684
|
+
"org.primer.llm": {
|
|
685
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
686
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
623
687
|
}
|
|
624
688
|
},
|
|
625
689
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -627,6 +691,7 @@
|
|
|
627
691
|
"original": {
|
|
628
692
|
"$value": "{bgColor.neutral.muted}",
|
|
629
693
|
"$type": "color",
|
|
694
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
630
695
|
"$extensions": {
|
|
631
696
|
"org.primer.figma": {
|
|
632
697
|
"collection": "mode",
|
|
@@ -662,6 +727,10 @@
|
|
|
662
727
|
"isSource": true,
|
|
663
728
|
"$type": "color"
|
|
664
729
|
}
|
|
730
|
+
},
|
|
731
|
+
"org.primer.llm": {
|
|
732
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
733
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
665
734
|
}
|
|
666
735
|
},
|
|
667
736
|
"key": "{bgColor.closed.muted}"
|
|
@@ -670,7 +739,8 @@
|
|
|
670
739
|
"attributes": {},
|
|
671
740
|
"path": ["bgColor", "closed", "muted"],
|
|
672
741
|
"value": "#e0e6eb",
|
|
673
|
-
"type": "color"
|
|
742
|
+
"type": "color",
|
|
743
|
+
"description": "Subtle background for closed state indicators (issues, PRs)"
|
|
674
744
|
},
|
|
675
745
|
"bgColor-danger-emphasis": {
|
|
676
746
|
"key": "{bgColor.danger.emphasis}",
|
|
@@ -691,6 +761,10 @@
|
|
|
691
761
|
"dark-high-contrast": "#430011",
|
|
692
762
|
"dark-dimmed-high-contrast": "#6e011a",
|
|
693
763
|
"dark-tritanopia-high-contrast": "#430011"
|
|
764
|
+
},
|
|
765
|
+
"org.primer.llm": {
|
|
766
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
767
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
694
768
|
}
|
|
695
769
|
},
|
|
696
770
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -698,6 +772,7 @@
|
|
|
698
772
|
"original": {
|
|
699
773
|
"$value": "{base.color.red.5}",
|
|
700
774
|
"$type": "color",
|
|
775
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
701
776
|
"$extensions": {
|
|
702
777
|
"org.primer.figma": {
|
|
703
778
|
"collection": "mode",
|
|
@@ -715,6 +790,10 @@
|
|
|
715
790
|
"dark-high-contrast": "{base.color.red.9}",
|
|
716
791
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
717
792
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
793
|
+
},
|
|
794
|
+
"org.primer.llm": {
|
|
795
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
796
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
718
797
|
}
|
|
719
798
|
},
|
|
720
799
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -723,7 +802,8 @@
|
|
|
723
802
|
"attributes": {},
|
|
724
803
|
"path": ["bgColor", "danger", "emphasis"],
|
|
725
804
|
"value": "#a0111f",
|
|
726
|
-
"type": "color"
|
|
805
|
+
"type": "color",
|
|
806
|
+
"description": "Emphasized danger background for critical errors and delete confirmations"
|
|
727
807
|
},
|
|
728
808
|
"bgColor-danger-muted": {
|
|
729
809
|
"key": "{bgColor.danger.muted}",
|
|
@@ -753,6 +833,10 @@
|
|
|
753
833
|
"isSource": true,
|
|
754
834
|
"$type": "color"
|
|
755
835
|
}
|
|
836
|
+
},
|
|
837
|
+
"org.primer.llm": {
|
|
838
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
839
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
756
840
|
}
|
|
757
841
|
},
|
|
758
842
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -760,6 +844,7 @@
|
|
|
760
844
|
"original": {
|
|
761
845
|
"$value": "{base.color.red.0}",
|
|
762
846
|
"$type": "color",
|
|
847
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
763
848
|
"$extensions": {
|
|
764
849
|
"org.primer.figma": {
|
|
765
850
|
"collection": "mode",
|
|
@@ -786,6 +871,10 @@
|
|
|
786
871
|
"isSource": true,
|
|
787
872
|
"$type": "color"
|
|
788
873
|
}
|
|
874
|
+
},
|
|
875
|
+
"org.primer.llm": {
|
|
876
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
877
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
789
878
|
}
|
|
790
879
|
},
|
|
791
880
|
"key": "{bgColor.danger.muted}"
|
|
@@ -794,7 +883,8 @@
|
|
|
794
883
|
"attributes": {},
|
|
795
884
|
"path": ["bgColor", "danger", "muted"],
|
|
796
885
|
"value": "#fff0ee",
|
|
797
|
-
"type": "color"
|
|
886
|
+
"type": "color",
|
|
887
|
+
"description": "Muted danger background for error states and destructive action contexts"
|
|
798
888
|
},
|
|
799
889
|
"bgColor-default": {
|
|
800
890
|
"key": "{bgColor.default}",
|
|
@@ -814,6 +904,10 @@
|
|
|
814
904
|
"dark-high-contrast": "#ffffff",
|
|
815
905
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
816
906
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff"
|
|
907
|
+
},
|
|
908
|
+
"org.primer.llm": {
|
|
909
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
910
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
817
911
|
}
|
|
818
912
|
},
|
|
819
913
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -821,6 +915,7 @@
|
|
|
821
915
|
"original": {
|
|
822
916
|
"$value": "{base.color.neutral.0}",
|
|
823
917
|
"$type": "color",
|
|
918
|
+
"$description": "Default background color for pages and main content areas",
|
|
824
919
|
"$extensions": {
|
|
825
920
|
"org.primer.figma": {
|
|
826
921
|
"collection": "mode",
|
|
@@ -837,6 +932,10 @@
|
|
|
837
932
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
838
933
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
839
934
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
935
|
+
},
|
|
936
|
+
"org.primer.llm": {
|
|
937
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
938
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
840
939
|
}
|
|
841
940
|
},
|
|
842
941
|
"key": "{bgColor.default}"
|
|
@@ -845,7 +944,8 @@
|
|
|
845
944
|
"attributes": {},
|
|
846
945
|
"path": ["bgColor", "default"],
|
|
847
946
|
"value": "#ffffff",
|
|
848
|
-
"type": "color"
|
|
947
|
+
"type": "color",
|
|
948
|
+
"description": "Default background color for pages and main content areas"
|
|
849
949
|
},
|
|
850
950
|
"bgColor-disabled": {
|
|
851
951
|
"key": "{bgColor.disabled}",
|
|
@@ -865,6 +965,10 @@
|
|
|
865
965
|
"dark-high-contrast": "#e0e6eb",
|
|
866
966
|
"dark-tritanopia-high-contrast": "#e0e6eb",
|
|
867
967
|
"dark-protanopia-deuteranopia-high-contrast": "#e0e6eb"
|
|
968
|
+
},
|
|
969
|
+
"org.primer.llm": {
|
|
970
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
971
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
868
972
|
}
|
|
869
973
|
},
|
|
870
974
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -872,6 +976,7 @@
|
|
|
872
976
|
"original": {
|
|
873
977
|
"$value": "{base.color.neutral.4}",
|
|
874
978
|
"$type": "color",
|
|
979
|
+
"$description": "Background for disabled interactive elements",
|
|
875
980
|
"$extensions": {
|
|
876
981
|
"org.primer.figma": {
|
|
877
982
|
"collection": "mode",
|
|
@@ -888,6 +993,10 @@
|
|
|
888
993
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
889
994
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
890
995
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
996
|
+
},
|
|
997
|
+
"org.primer.llm": {
|
|
998
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
999
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
891
1000
|
}
|
|
892
1001
|
},
|
|
893
1002
|
"key": "{bgColor.disabled}"
|
|
@@ -896,7 +1005,8 @@
|
|
|
896
1005
|
"attributes": {},
|
|
897
1006
|
"path": ["bgColor", "disabled"],
|
|
898
1007
|
"value": "#e0e6eb",
|
|
899
|
-
"type": "color"
|
|
1008
|
+
"type": "color",
|
|
1009
|
+
"description": "Background for disabled interactive elements"
|
|
900
1010
|
},
|
|
901
1011
|
"bgColor-done-emphasis": {
|
|
902
1012
|
"key": "{bgColor.done.emphasis}",
|
|
@@ -914,6 +1024,10 @@
|
|
|
914
1024
|
"dark-dimmed-high-contrast": "#411d7b",
|
|
915
1025
|
"dark-tritanopia-high-contrast": "#260f49",
|
|
916
1026
|
"dark-protanopia-deuteranopia-high-contrast": "#260f49"
|
|
1027
|
+
},
|
|
1028
|
+
"org.primer.llm": {
|
|
1029
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1030
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
917
1031
|
}
|
|
918
1032
|
},
|
|
919
1033
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -921,6 +1035,7 @@
|
|
|
921
1035
|
"original": {
|
|
922
1036
|
"$value": "{base.color.purple.5}",
|
|
923
1037
|
"$type": "color",
|
|
1038
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
924
1039
|
"$extensions": {
|
|
925
1040
|
"org.primer.figma": {
|
|
926
1041
|
"collection": "mode",
|
|
@@ -935,6 +1050,10 @@
|
|
|
935
1050
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
936
1051
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
937
1052
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1053
|
+
},
|
|
1054
|
+
"org.primer.llm": {
|
|
1055
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1056
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
938
1057
|
}
|
|
939
1058
|
},
|
|
940
1059
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -943,7 +1062,8 @@
|
|
|
943
1062
|
"attributes": {},
|
|
944
1063
|
"path": ["bgColor", "done", "emphasis"],
|
|
945
1064
|
"value": "#622cbc",
|
|
946
|
-
"type": "color"
|
|
1065
|
+
"type": "color",
|
|
1066
|
+
"description": "Strong background for completed/done state badges and labels"
|
|
947
1067
|
},
|
|
948
1068
|
"bgColor-done-muted": {
|
|
949
1069
|
"key": "{bgColor.done.muted}",
|
|
@@ -964,6 +1084,10 @@
|
|
|
964
1084
|
"isSource": true,
|
|
965
1085
|
"$type": "color"
|
|
966
1086
|
}
|
|
1087
|
+
},
|
|
1088
|
+
"org.primer.llm": {
|
|
1089
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1090
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
967
1091
|
}
|
|
968
1092
|
},
|
|
969
1093
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -971,6 +1095,7 @@
|
|
|
971
1095
|
"original": {
|
|
972
1096
|
"$value": "{base.color.purple.0}",
|
|
973
1097
|
"$type": "color",
|
|
1098
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
974
1099
|
"$extensions": {
|
|
975
1100
|
"org.primer.figma": {
|
|
976
1101
|
"collection": "mode",
|
|
@@ -988,6 +1113,10 @@
|
|
|
988
1113
|
"isSource": true,
|
|
989
1114
|
"$type": "color"
|
|
990
1115
|
}
|
|
1116
|
+
},
|
|
1117
|
+
"org.primer.llm": {
|
|
1118
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1119
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
991
1120
|
}
|
|
992
1121
|
},
|
|
993
1122
|
"key": "{bgColor.done.muted}"
|
|
@@ -996,7 +1125,8 @@
|
|
|
996
1125
|
"attributes": {},
|
|
997
1126
|
"path": ["bgColor", "done", "muted"],
|
|
998
1127
|
"value": "#faf0fe",
|
|
999
|
-
"type": "color"
|
|
1128
|
+
"type": "color",
|
|
1129
|
+
"description": "Subtle background for completed/done state indicators"
|
|
1000
1130
|
},
|
|
1001
1131
|
"bgColor-draft-emphasis": {
|
|
1002
1132
|
"key": "{bgColor.draft.emphasis}",
|
|
@@ -1008,6 +1138,10 @@
|
|
|
1008
1138
|
"codeSyntax": {
|
|
1009
1139
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1010
1140
|
}
|
|
1141
|
+
},
|
|
1142
|
+
"org.primer.llm": {
|
|
1143
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1144
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1011
1145
|
}
|
|
1012
1146
|
},
|
|
1013
1147
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1015,6 +1149,7 @@
|
|
|
1015
1149
|
"original": {
|
|
1016
1150
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1017
1151
|
"$type": "color",
|
|
1152
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1018
1153
|
"$extensions": {
|
|
1019
1154
|
"org.primer.figma": {
|
|
1020
1155
|
"collection": "mode",
|
|
@@ -1023,6 +1158,10 @@
|
|
|
1023
1158
|
"codeSyntax": {
|
|
1024
1159
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1025
1160
|
}
|
|
1161
|
+
},
|
|
1162
|
+
"org.primer.llm": {
|
|
1163
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1164
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1026
1165
|
}
|
|
1027
1166
|
},
|
|
1028
1167
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1031,7 +1170,8 @@
|
|
|
1031
1170
|
"attributes": {},
|
|
1032
1171
|
"path": ["bgColor", "draft", "emphasis"],
|
|
1033
1172
|
"value": "#454c54",
|
|
1034
|
-
"type": "color"
|
|
1173
|
+
"type": "color",
|
|
1174
|
+
"description": "Strong background for draft state badges and labels"
|
|
1035
1175
|
},
|
|
1036
1176
|
"bgColor-draft-muted": {
|
|
1037
1177
|
"key": "{bgColor.draft.muted}",
|
|
@@ -1070,6 +1210,10 @@
|
|
|
1070
1210
|
"isSource": true,
|
|
1071
1211
|
"$type": "color"
|
|
1072
1212
|
}
|
|
1213
|
+
},
|
|
1214
|
+
"org.primer.llm": {
|
|
1215
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1216
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1073
1217
|
}
|
|
1074
1218
|
},
|
|
1075
1219
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1077,6 +1221,7 @@
|
|
|
1077
1221
|
"original": {
|
|
1078
1222
|
"$value": "{bgColor.neutral.muted}",
|
|
1079
1223
|
"$type": "color",
|
|
1224
|
+
"$description": "Subtle background for draft state indicators",
|
|
1080
1225
|
"$extensions": {
|
|
1081
1226
|
"org.primer.figma": {
|
|
1082
1227
|
"collection": "mode",
|
|
@@ -1112,6 +1257,10 @@
|
|
|
1112
1257
|
"isSource": true,
|
|
1113
1258
|
"$type": "color"
|
|
1114
1259
|
}
|
|
1260
|
+
},
|
|
1261
|
+
"org.primer.llm": {
|
|
1262
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1263
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1115
1264
|
}
|
|
1116
1265
|
},
|
|
1117
1266
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1120,7 +1269,8 @@
|
|
|
1120
1269
|
"attributes": {},
|
|
1121
1270
|
"path": ["bgColor", "draft", "muted"],
|
|
1122
1271
|
"value": "#e0e6eb",
|
|
1123
|
-
"type": "color"
|
|
1272
|
+
"type": "color",
|
|
1273
|
+
"description": "Subtle background for draft state indicators"
|
|
1124
1274
|
},
|
|
1125
1275
|
"bgColor-emphasis": {
|
|
1126
1276
|
"key": "{bgColor.emphasis}",
|
|
@@ -1135,6 +1285,10 @@
|
|
|
1135
1285
|
},
|
|
1136
1286
|
"org.primer.overrides": {
|
|
1137
1287
|
"dark": "#c8d1da"
|
|
1288
|
+
},
|
|
1289
|
+
"org.primer.llm": {
|
|
1290
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1291
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1138
1292
|
}
|
|
1139
1293
|
},
|
|
1140
1294
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1142,6 +1296,7 @@
|
|
|
1142
1296
|
"original": {
|
|
1143
1297
|
"$value": "{base.color.neutral.12}",
|
|
1144
1298
|
"$type": "color",
|
|
1299
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1145
1300
|
"$extensions": {
|
|
1146
1301
|
"org.primer.figma": {
|
|
1147
1302
|
"collection": "mode",
|
|
@@ -1153,6 +1308,10 @@
|
|
|
1153
1308
|
},
|
|
1154
1309
|
"org.primer.overrides": {
|
|
1155
1310
|
"dark": "{base.color.neutral.7}"
|
|
1311
|
+
},
|
|
1312
|
+
"org.primer.llm": {
|
|
1313
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1314
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1156
1315
|
}
|
|
1157
1316
|
},
|
|
1158
1317
|
"key": "{bgColor.emphasis}"
|
|
@@ -1161,7 +1320,8 @@
|
|
|
1161
1320
|
"attributes": {},
|
|
1162
1321
|
"path": ["bgColor", "emphasis"],
|
|
1163
1322
|
"value": "#25292e",
|
|
1164
|
-
"type": "color"
|
|
1323
|
+
"type": "color",
|
|
1324
|
+
"description": "High-emphasis dark background for strong visual contrast"
|
|
1165
1325
|
},
|
|
1166
1326
|
"bgColor-inset": {
|
|
1167
1327
|
"key": "{bgColor.inset}",
|
|
@@ -1181,6 +1341,10 @@
|
|
|
1181
1341
|
"light-high-contrast": "#eff2f5",
|
|
1182
1342
|
"light-tritanopia-high-contrast": "#eff2f5",
|
|
1183
1343
|
"light-protanopia-deuteranopia-high-contrast": "#eff2f5"
|
|
1344
|
+
},
|
|
1345
|
+
"org.primer.llm": {
|
|
1346
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1347
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1184
1348
|
}
|
|
1185
1349
|
},
|
|
1186
1350
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1188,6 +1352,7 @@
|
|
|
1188
1352
|
"original": {
|
|
1189
1353
|
"$value": "{base.color.neutral.2}",
|
|
1190
1354
|
"$type": "color",
|
|
1355
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1191
1356
|
"$extensions": {
|
|
1192
1357
|
"org.primer.figma": {
|
|
1193
1358
|
"collection": "mode",
|
|
@@ -1204,6 +1369,10 @@
|
|
|
1204
1369
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1205
1370
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1206
1371
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1372
|
+
},
|
|
1373
|
+
"org.primer.llm": {
|
|
1374
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1375
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1207
1376
|
}
|
|
1208
1377
|
},
|
|
1209
1378
|
"key": "{bgColor.inset}"
|
|
@@ -1212,7 +1381,8 @@
|
|
|
1212
1381
|
"attributes": {},
|
|
1213
1382
|
"path": ["bgColor", "inset"],
|
|
1214
1383
|
"value": "#eff2f5",
|
|
1215
|
-
"type": "color"
|
|
1384
|
+
"type": "color",
|
|
1385
|
+
"description": "Inset background for recessed content areas like wells or sunken panels"
|
|
1216
1386
|
},
|
|
1217
1387
|
"bgColor-inverse": {
|
|
1218
1388
|
"key": "{bgColor.inverse}",
|
|
@@ -1224,6 +1394,10 @@
|
|
|
1224
1394
|
},
|
|
1225
1395
|
"org.primer.overrides": {
|
|
1226
1396
|
"dark": "#010409"
|
|
1397
|
+
},
|
|
1398
|
+
"org.primer.llm": {
|
|
1399
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1400
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1227
1401
|
}
|
|
1228
1402
|
},
|
|
1229
1403
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1231,6 +1405,7 @@
|
|
|
1231
1405
|
"original": {
|
|
1232
1406
|
"$value": "{base.color.neutral.12}",
|
|
1233
1407
|
"$type": "color",
|
|
1408
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1234
1409
|
"$extensions": {
|
|
1235
1410
|
"org.primer.figma": {
|
|
1236
1411
|
"collection": "mode",
|
|
@@ -1239,6 +1414,10 @@
|
|
|
1239
1414
|
},
|
|
1240
1415
|
"org.primer.overrides": {
|
|
1241
1416
|
"dark": "{base.color.neutral.13}"
|
|
1417
|
+
},
|
|
1418
|
+
"org.primer.llm": {
|
|
1419
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1420
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1242
1421
|
}
|
|
1243
1422
|
},
|
|
1244
1423
|
"key": "{bgColor.inverse}"
|
|
@@ -1247,7 +1426,8 @@
|
|
|
1247
1426
|
"attributes": {},
|
|
1248
1427
|
"path": ["bgColor", "inverse"],
|
|
1249
1428
|
"value": "#25292e",
|
|
1250
|
-
"type": "color"
|
|
1429
|
+
"type": "color",
|
|
1430
|
+
"description": "Inverse background that flips between light and dark modes"
|
|
1251
1431
|
},
|
|
1252
1432
|
"bgColor-muted": {
|
|
1253
1433
|
"key": "{bgColor.muted}",
|
|
@@ -1270,6 +1450,10 @@
|
|
|
1270
1450
|
"dark-high-contrast": "#eff2f5",
|
|
1271
1451
|
"dark-tritanopia-high-contrast": "#eff2f5",
|
|
1272
1452
|
"dark-protanopia-deuteranopia-high-contrast": "#eff2f5"
|
|
1453
|
+
},
|
|
1454
|
+
"org.primer.llm": {
|
|
1455
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1456
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1273
1457
|
}
|
|
1274
1458
|
},
|
|
1275
1459
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1277,6 +1461,7 @@
|
|
|
1277
1461
|
"original": {
|
|
1278
1462
|
"$value": "{base.color.neutral.3}",
|
|
1279
1463
|
"$type": "color",
|
|
1464
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1280
1465
|
"$extensions": {
|
|
1281
1466
|
"org.primer.figma": {
|
|
1282
1467
|
"collection": "mode",
|
|
@@ -1296,6 +1481,10 @@
|
|
|
1296
1481
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1297
1482
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1298
1483
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1484
|
+
},
|
|
1485
|
+
"org.primer.llm": {
|
|
1486
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1487
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1299
1488
|
}
|
|
1300
1489
|
},
|
|
1301
1490
|
"key": "{bgColor.muted}"
|
|
@@ -1304,7 +1493,8 @@
|
|
|
1304
1493
|
"attributes": {},
|
|
1305
1494
|
"path": ["bgColor", "muted"],
|
|
1306
1495
|
"value": "#e6eaef",
|
|
1307
|
-
"type": "color"
|
|
1496
|
+
"type": "color",
|
|
1497
|
+
"description": "Muted background for secondary content areas and subtle grouping"
|
|
1308
1498
|
},
|
|
1309
1499
|
"bgColor-neutral-emphasis": {
|
|
1310
1500
|
"key": "{bgColor.neutral.emphasis}",
|
|
@@ -1324,6 +1514,10 @@
|
|
|
1324
1514
|
"dark-high-contrast": "#c8d1da",
|
|
1325
1515
|
"dark-tritanopia-high-contrast": "#c8d1da",
|
|
1326
1516
|
"dark-protanopia-deuteranopia-high-contrast": "#c8d1da"
|
|
1517
|
+
},
|
|
1518
|
+
"org.primer.llm": {
|
|
1519
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1520
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1327
1521
|
}
|
|
1328
1522
|
},
|
|
1329
1523
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1331,6 +1525,7 @@
|
|
|
1331
1525
|
"original": {
|
|
1332
1526
|
"$value": "{base.color.neutral.10}",
|
|
1333
1527
|
"$type": "color",
|
|
1528
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1334
1529
|
"$extensions": {
|
|
1335
1530
|
"org.primer.figma": {
|
|
1336
1531
|
"collection": "mode",
|
|
@@ -1347,6 +1542,10 @@
|
|
|
1347
1542
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1348
1543
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1349
1544
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1545
|
+
},
|
|
1546
|
+
"org.primer.llm": {
|
|
1547
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1548
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1350
1549
|
}
|
|
1351
1550
|
},
|
|
1352
1551
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1355,7 +1554,8 @@
|
|
|
1355
1554
|
"attributes": {},
|
|
1356
1555
|
"path": ["bgColor", "neutral", "emphasis"],
|
|
1357
1556
|
"value": "#454c54",
|
|
1358
|
-
"type": "color"
|
|
1557
|
+
"type": "color",
|
|
1558
|
+
"description": "Strong neutral background for prominent neutral elements"
|
|
1359
1559
|
},
|
|
1360
1560
|
"bgColor-neutral-muted": {
|
|
1361
1561
|
"key": "{bgColor.neutral.muted}",
|
|
@@ -1386,6 +1586,10 @@
|
|
|
1386
1586
|
"dark-high-contrast": "#e6eaef",
|
|
1387
1587
|
"dark-tritanopia-high-contrast": "#e6eaef",
|
|
1388
1588
|
"dark-protanopia-deuteranopia-high-contrast": "#e6eaef"
|
|
1589
|
+
},
|
|
1590
|
+
"org.primer.llm": {
|
|
1591
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1592
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1389
1593
|
}
|
|
1390
1594
|
},
|
|
1391
1595
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1393,6 +1597,7 @@
|
|
|
1393
1597
|
"original": {
|
|
1394
1598
|
"$value": "{base.color.neutral.4}",
|
|
1395
1599
|
"$type": "color",
|
|
1600
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1396
1601
|
"$extensions": {
|
|
1397
1602
|
"org.primer.figma": {
|
|
1398
1603
|
"collection": "mode",
|
|
@@ -1420,6 +1625,10 @@
|
|
|
1420
1625
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1421
1626
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1422
1627
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1628
|
+
},
|
|
1629
|
+
"org.primer.llm": {
|
|
1630
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1631
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1423
1632
|
}
|
|
1424
1633
|
},
|
|
1425
1634
|
"key": "{bgColor.neutral.muted}"
|
|
@@ -1428,7 +1637,8 @@
|
|
|
1428
1637
|
"attributes": {},
|
|
1429
1638
|
"path": ["bgColor", "neutral", "muted"],
|
|
1430
1639
|
"value": "#e0e6eb",
|
|
1431
|
-
"type": "color"
|
|
1640
|
+
"type": "color",
|
|
1641
|
+
"description": "Subtle neutral background for tags, labels, and secondary UI elements"
|
|
1432
1642
|
},
|
|
1433
1643
|
"bgColor-open-emphasis": {
|
|
1434
1644
|
"key": "{bgColor.open.emphasis}",
|
|
@@ -1450,6 +1660,10 @@
|
|
|
1450
1660
|
"light-protanopia-deuteranopia-high-contrast": "#873800",
|
|
1451
1661
|
"dark-protanopia-deuteranopia": "#873800",
|
|
1452
1662
|
"dark-protanopia-deuteranopia-high-contrast": "#361200"
|
|
1663
|
+
},
|
|
1664
|
+
"org.primer.llm": {
|
|
1665
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1666
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1453
1667
|
}
|
|
1454
1668
|
},
|
|
1455
1669
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1457,6 +1671,7 @@
|
|
|
1457
1671
|
"original": {
|
|
1458
1672
|
"$value": "{base.color.red.5}",
|
|
1459
1673
|
"$type": "color",
|
|
1674
|
+
"$description": "Strong background for open state badges and labels",
|
|
1460
1675
|
"$extensions": {
|
|
1461
1676
|
"org.primer.figma": {
|
|
1462
1677
|
"collection": "mode",
|
|
@@ -1475,6 +1690,10 @@
|
|
|
1475
1690
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1476
1691
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1477
1692
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1693
|
+
},
|
|
1694
|
+
"org.primer.llm": {
|
|
1695
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1696
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1478
1697
|
}
|
|
1479
1698
|
},
|
|
1480
1699
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1483,7 +1702,8 @@
|
|
|
1483
1702
|
"attributes": {},
|
|
1484
1703
|
"path": ["bgColor", "open", "emphasis"],
|
|
1485
1704
|
"value": "#a0111f",
|
|
1486
|
-
"type": "color"
|
|
1705
|
+
"type": "color",
|
|
1706
|
+
"description": "Strong background for open state badges and labels"
|
|
1487
1707
|
},
|
|
1488
1708
|
"bgColor-open-muted": {
|
|
1489
1709
|
"key": "{bgColor.open.muted}",
|
|
@@ -1529,6 +1749,10 @@
|
|
|
1529
1749
|
"isSource": true,
|
|
1530
1750
|
"$type": "color"
|
|
1531
1751
|
}
|
|
1752
|
+
},
|
|
1753
|
+
"org.primer.llm": {
|
|
1754
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1755
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1532
1756
|
}
|
|
1533
1757
|
},
|
|
1534
1758
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1536,6 +1760,7 @@
|
|
|
1536
1760
|
"original": {
|
|
1537
1761
|
"$value": "{base.color.red.0}",
|
|
1538
1762
|
"$type": "color",
|
|
1763
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1539
1764
|
"$extensions": {
|
|
1540
1765
|
"org.primer.figma": {
|
|
1541
1766
|
"collection": "mode",
|
|
@@ -1578,6 +1803,10 @@
|
|
|
1578
1803
|
"isSource": true,
|
|
1579
1804
|
"$type": "color"
|
|
1580
1805
|
}
|
|
1806
|
+
},
|
|
1807
|
+
"org.primer.llm": {
|
|
1808
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1809
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1581
1810
|
}
|
|
1582
1811
|
},
|
|
1583
1812
|
"key": "{bgColor.open.muted}"
|
|
@@ -1586,7 +1815,8 @@
|
|
|
1586
1815
|
"attributes": {},
|
|
1587
1816
|
"path": ["bgColor", "open", "muted"],
|
|
1588
1817
|
"value": "#fff0ee",
|
|
1589
|
-
"type": "color"
|
|
1818
|
+
"type": "color",
|
|
1819
|
+
"description": "Subtle background for open state indicators (issues, PRs)"
|
|
1590
1820
|
},
|
|
1591
1821
|
"bgColor-severe-emphasis": {
|
|
1592
1822
|
"key": "{bgColor.severe.emphasis}",
|
|
@@ -1607,6 +1837,10 @@
|
|
|
1607
1837
|
"dark-high-contrast": "#361200",
|
|
1608
1838
|
"dark-dimmed-high-contrast": "#5b2300",
|
|
1609
1839
|
"dark-protanopia-deuteranopia-high-contrast": "#361200"
|
|
1840
|
+
},
|
|
1841
|
+
"org.primer.llm": {
|
|
1842
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1843
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1610
1844
|
}
|
|
1611
1845
|
},
|
|
1612
1846
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1614,6 +1848,7 @@
|
|
|
1614
1848
|
"original": {
|
|
1615
1849
|
"$value": "{base.color.red.5}",
|
|
1616
1850
|
"$type": "color",
|
|
1851
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1617
1852
|
"$extensions": {
|
|
1618
1853
|
"org.primer.figma": {
|
|
1619
1854
|
"collection": "mode",
|
|
@@ -1631,6 +1866,10 @@
|
|
|
1631
1866
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1632
1867
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1633
1868
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1869
|
+
},
|
|
1870
|
+
"org.primer.llm": {
|
|
1871
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1872
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1634
1873
|
}
|
|
1635
1874
|
},
|
|
1636
1875
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1639,7 +1878,8 @@
|
|
|
1639
1878
|
"attributes": {},
|
|
1640
1879
|
"path": ["bgColor", "severe", "emphasis"],
|
|
1641
1880
|
"value": "#a0111f",
|
|
1642
|
-
"type": "color"
|
|
1881
|
+
"type": "color",
|
|
1882
|
+
"description": "Strong severe background for prominent high-priority warnings"
|
|
1643
1883
|
},
|
|
1644
1884
|
"bgColor-severe-muted": {
|
|
1645
1885
|
"key": "{bgColor.severe.muted}",
|
|
@@ -1669,6 +1909,10 @@
|
|
|
1669
1909
|
"isSource": true,
|
|
1670
1910
|
"$type": "color"
|
|
1671
1911
|
}
|
|
1912
|
+
},
|
|
1913
|
+
"org.primer.llm": {
|
|
1914
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1915
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1672
1916
|
}
|
|
1673
1917
|
},
|
|
1674
1918
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1676,6 +1920,7 @@
|
|
|
1676
1920
|
"original": {
|
|
1677
1921
|
"$value": "{base.color.red.0}",
|
|
1678
1922
|
"$type": "color",
|
|
1923
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1679
1924
|
"$extensions": {
|
|
1680
1925
|
"org.primer.figma": {
|
|
1681
1926
|
"collection": "mode",
|
|
@@ -1702,6 +1947,10 @@
|
|
|
1702
1947
|
"isSource": true,
|
|
1703
1948
|
"$type": "color"
|
|
1704
1949
|
}
|
|
1950
|
+
},
|
|
1951
|
+
"org.primer.llm": {
|
|
1952
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1953
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1705
1954
|
}
|
|
1706
1955
|
},
|
|
1707
1956
|
"key": "{bgColor.severe.muted}"
|
|
@@ -1710,7 +1959,8 @@
|
|
|
1710
1959
|
"attributes": {},
|
|
1711
1960
|
"path": ["bgColor", "severe", "muted"],
|
|
1712
1961
|
"value": "#fff0ee",
|
|
1713
|
-
"type": "color"
|
|
1962
|
+
"type": "color",
|
|
1963
|
+
"description": "Subtle severe background for high-priority warnings"
|
|
1714
1964
|
},
|
|
1715
1965
|
"bgColor-sponsors-emphasis": {
|
|
1716
1966
|
"key": "{bgColor.sponsors.emphasis}",
|
|
@@ -1728,6 +1978,10 @@
|
|
|
1728
1978
|
"dark-dimmed-high-contrast": "#660847",
|
|
1729
1979
|
"dark-tritanopia-high-contrast": "#3e022b",
|
|
1730
1980
|
"dark-protanopia-deuteranopia-high-contrast": "#3e022b"
|
|
1981
|
+
},
|
|
1982
|
+
"org.primer.llm": {
|
|
1983
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
1984
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1731
1985
|
}
|
|
1732
1986
|
},
|
|
1733
1987
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1735,6 +1989,7 @@
|
|
|
1735
1989
|
"original": {
|
|
1736
1990
|
"$value": "{base.color.pink.5}",
|
|
1737
1991
|
"$type": "color",
|
|
1992
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1738
1993
|
"$extensions": {
|
|
1739
1994
|
"org.primer.figma": {
|
|
1740
1995
|
"collection": "mode",
|
|
@@ -1749,6 +2004,10 @@
|
|
|
1749
2004
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1750
2005
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1751
2006
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2007
|
+
},
|
|
2008
|
+
"org.primer.llm": {
|
|
2009
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2010
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1752
2011
|
}
|
|
1753
2012
|
},
|
|
1754
2013
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1757,7 +2016,8 @@
|
|
|
1757
2016
|
"attributes": {},
|
|
1758
2017
|
"path": ["bgColor", "sponsors", "emphasis"],
|
|
1759
2018
|
"value": "#971368",
|
|
1760
|
-
"type": "color"
|
|
2019
|
+
"type": "color",
|
|
2020
|
+
"description": "Strong background for prominent GitHub Sponsors elements"
|
|
1761
2021
|
},
|
|
1762
2022
|
"bgColor-sponsors-muted": {
|
|
1763
2023
|
"key": "{bgColor.sponsors.muted}",
|
|
@@ -1785,6 +2045,10 @@
|
|
|
1785
2045
|
"isSource": true,
|
|
1786
2046
|
"$type": "color"
|
|
1787
2047
|
}
|
|
2048
|
+
},
|
|
2049
|
+
"org.primer.llm": {
|
|
2050
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2051
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1788
2052
|
}
|
|
1789
2053
|
},
|
|
1790
2054
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1792,6 +2056,7 @@
|
|
|
1792
2056
|
"original": {
|
|
1793
2057
|
"$value": "{base.color.pink.0}",
|
|
1794
2058
|
"$type": "color",
|
|
2059
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1795
2060
|
"$extensions": {
|
|
1796
2061
|
"org.primer.figma": {
|
|
1797
2062
|
"collection": "mode",
|
|
@@ -1816,6 +2081,10 @@
|
|
|
1816
2081
|
"isSource": true,
|
|
1817
2082
|
"$type": "color"
|
|
1818
2083
|
}
|
|
2084
|
+
},
|
|
2085
|
+
"org.primer.llm": {
|
|
2086
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2087
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1819
2088
|
}
|
|
1820
2089
|
},
|
|
1821
2090
|
"key": "{bgColor.sponsors.muted}"
|
|
@@ -1824,7 +2093,8 @@
|
|
|
1824
2093
|
"attributes": {},
|
|
1825
2094
|
"path": ["bgColor", "sponsors", "muted"],
|
|
1826
2095
|
"value": "#feeff7",
|
|
1827
|
-
"type": "color"
|
|
2096
|
+
"type": "color",
|
|
2097
|
+
"description": "Subtle background for GitHub Sponsors content"
|
|
1828
2098
|
},
|
|
1829
2099
|
"bgColor-success-emphasis": {
|
|
1830
2100
|
"key": "{bgColor.success.emphasis}",
|
|
@@ -1850,6 +2120,10 @@
|
|
|
1850
2120
|
"light-high-contrast": "#055d20",
|
|
1851
2121
|
"dark-high-contrast": "#00230b",
|
|
1852
2122
|
"dark-dimmed-high-contrast": "#013d14"
|
|
2123
|
+
},
|
|
2124
|
+
"org.primer.llm": {
|
|
2125
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2126
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1853
2127
|
}
|
|
1854
2128
|
},
|
|
1855
2129
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1857,6 +2131,7 @@
|
|
|
1857
2131
|
"original": {
|
|
1858
2132
|
"$value": "{base.color.blue.5}",
|
|
1859
2133
|
"$type": "color",
|
|
2134
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1860
2135
|
"$extensions": {
|
|
1861
2136
|
"org.primer.figma": {
|
|
1862
2137
|
"collection": "mode",
|
|
@@ -1879,6 +2154,10 @@
|
|
|
1879
2154
|
"light-high-contrast": "{base.color.green.5}",
|
|
1880
2155
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1881
2156
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2157
|
+
},
|
|
2158
|
+
"org.primer.llm": {
|
|
2159
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2160
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1882
2161
|
}
|
|
1883
2162
|
},
|
|
1884
2163
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1887,7 +2166,8 @@
|
|
|
1887
2166
|
"attributes": {},
|
|
1888
2167
|
"path": ["bgColor", "success", "emphasis"],
|
|
1889
2168
|
"value": "#0349b4",
|
|
1890
|
-
"type": "color"
|
|
2169
|
+
"type": "color",
|
|
2170
|
+
"description": "Strong success background for prominent positive actions"
|
|
1891
2171
|
},
|
|
1892
2172
|
"bgColor-success-muted": {
|
|
1893
2173
|
"key": "{bgColor.success.muted}",
|
|
@@ -1940,6 +2220,10 @@
|
|
|
1940
2220
|
"isSource": true,
|
|
1941
2221
|
"$type": "color"
|
|
1942
2222
|
}
|
|
2223
|
+
},
|
|
2224
|
+
"org.primer.llm": {
|
|
2225
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2226
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1943
2227
|
}
|
|
1944
2228
|
},
|
|
1945
2229
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1947,6 +2231,7 @@
|
|
|
1947
2231
|
"original": {
|
|
1948
2232
|
"$value": "{base.color.blue.0}",
|
|
1949
2233
|
"$type": "color",
|
|
2234
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1950
2235
|
"$extensions": {
|
|
1951
2236
|
"org.primer.figma": {
|
|
1952
2237
|
"collection": "mode",
|
|
@@ -1996,6 +2281,10 @@
|
|
|
1996
2281
|
"isSource": true,
|
|
1997
2282
|
"$type": "color"
|
|
1998
2283
|
}
|
|
2284
|
+
},
|
|
2285
|
+
"org.primer.llm": {
|
|
2286
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2287
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1999
2288
|
}
|
|
2000
2289
|
},
|
|
2001
2290
|
"key": "{bgColor.success.muted}"
|
|
@@ -2004,7 +2293,8 @@
|
|
|
2004
2293
|
"attributes": {},
|
|
2005
2294
|
"path": ["bgColor", "success", "muted"],
|
|
2006
2295
|
"value": "#dff7ff",
|
|
2007
|
-
"type": "color"
|
|
2296
|
+
"type": "color",
|
|
2297
|
+
"description": "Subtle success background for positive feedback and completed states"
|
|
2008
2298
|
},
|
|
2009
2299
|
"bgColor-transparent": {
|
|
2010
2300
|
"key": "{bgColor.transparent}",
|
|
@@ -2016,6 +2306,10 @@
|
|
|
2016
2306
|
"codeSyntax": {
|
|
2017
2307
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2018
2308
|
}
|
|
2309
|
+
},
|
|
2310
|
+
"org.primer.llm": {
|
|
2311
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2312
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2019
2313
|
}
|
|
2020
2314
|
},
|
|
2021
2315
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2023,6 +2317,7 @@
|
|
|
2023
2317
|
"original": {
|
|
2024
2318
|
"$value": "{base.color.transparent}",
|
|
2025
2319
|
"$type": "color",
|
|
2320
|
+
"$description": "Fully transparent background",
|
|
2026
2321
|
"$extensions": {
|
|
2027
2322
|
"org.primer.figma": {
|
|
2028
2323
|
"collection": "mode",
|
|
@@ -2031,6 +2326,10 @@
|
|
|
2031
2326
|
"codeSyntax": {
|
|
2032
2327
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2033
2328
|
}
|
|
2329
|
+
},
|
|
2330
|
+
"org.primer.llm": {
|
|
2331
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2332
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2034
2333
|
}
|
|
2035
2334
|
},
|
|
2036
2335
|
"key": "{bgColor.transparent}"
|
|
@@ -2039,7 +2338,8 @@
|
|
|
2039
2338
|
"attributes": {},
|
|
2040
2339
|
"path": ["bgColor", "transparent"],
|
|
2041
2340
|
"value": "#ffffff00",
|
|
2042
|
-
"type": "color"
|
|
2341
|
+
"type": "color",
|
|
2342
|
+
"description": "Fully transparent background"
|
|
2043
2343
|
},
|
|
2044
2344
|
"bgColor-upsell-emphasis": {
|
|
2045
2345
|
"key": "{bgColor.upsell.emphasis}",
|
|
@@ -2051,6 +2351,10 @@
|
|
|
2051
2351
|
"codeSyntax": {
|
|
2052
2352
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2053
2353
|
}
|
|
2354
|
+
},
|
|
2355
|
+
"org.primer.llm": {
|
|
2356
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2357
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2054
2358
|
}
|
|
2055
2359
|
},
|
|
2056
2360
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2058,6 +2362,7 @@
|
|
|
2058
2362
|
"original": {
|
|
2059
2363
|
"$value": "{bgColor.done.emphasis}",
|
|
2060
2364
|
"$type": "color",
|
|
2365
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2061
2366
|
"$extensions": {
|
|
2062
2367
|
"org.primer.figma": {
|
|
2063
2368
|
"collection": "mode",
|
|
@@ -2066,6 +2371,10 @@
|
|
|
2066
2371
|
"codeSyntax": {
|
|
2067
2372
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2068
2373
|
}
|
|
2374
|
+
},
|
|
2375
|
+
"org.primer.llm": {
|
|
2376
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2377
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2069
2378
|
}
|
|
2070
2379
|
},
|
|
2071
2380
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2074,7 +2383,8 @@
|
|
|
2074
2383
|
"attributes": {},
|
|
2075
2384
|
"path": ["bgColor", "upsell", "emphasis"],
|
|
2076
2385
|
"value": "#622cbc",
|
|
2077
|
-
"type": "color"
|
|
2386
|
+
"type": "color",
|
|
2387
|
+
"description": "Strong background for prominent upsell elements"
|
|
2078
2388
|
},
|
|
2079
2389
|
"bgColor-upsell-muted": {
|
|
2080
2390
|
"key": "{bgColor.upsell.muted}",
|
|
@@ -2086,6 +2396,10 @@
|
|
|
2086
2396
|
"codeSyntax": {
|
|
2087
2397
|
"web": "var(--bgColor-upsell-muted)"
|
|
2088
2398
|
}
|
|
2399
|
+
},
|
|
2400
|
+
"org.primer.llm": {
|
|
2401
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2402
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2089
2403
|
}
|
|
2090
2404
|
},
|
|
2091
2405
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2093,6 +2407,7 @@
|
|
|
2093
2407
|
"original": {
|
|
2094
2408
|
"$value": "{bgColor.done.muted}",
|
|
2095
2409
|
"$type": "color",
|
|
2410
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2096
2411
|
"$extensions": {
|
|
2097
2412
|
"org.primer.figma": {
|
|
2098
2413
|
"collection": "mode",
|
|
@@ -2101,6 +2416,10 @@
|
|
|
2101
2416
|
"codeSyntax": {
|
|
2102
2417
|
"web": "var(--bgColor-upsell-muted)"
|
|
2103
2418
|
}
|
|
2419
|
+
},
|
|
2420
|
+
"org.primer.llm": {
|
|
2421
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2422
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2104
2423
|
}
|
|
2105
2424
|
},
|
|
2106
2425
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2109,7 +2428,8 @@
|
|
|
2109
2428
|
"attributes": {},
|
|
2110
2429
|
"path": ["bgColor", "upsell", "muted"],
|
|
2111
2430
|
"value": "#faf0fe",
|
|
2112
|
-
"type": "color"
|
|
2431
|
+
"type": "color",
|
|
2432
|
+
"description": "Subtle background for upsell and promotional content"
|
|
2113
2433
|
},
|
|
2114
2434
|
"bgColor-white": {
|
|
2115
2435
|
"key": "{bgColor.white}",
|
|
@@ -2121,6 +2441,10 @@
|
|
|
2121
2441
|
},
|
|
2122
2442
|
"org.primer.overrides": {
|
|
2123
2443
|
"dark": "#010409"
|
|
2444
|
+
},
|
|
2445
|
+
"org.primer.llm": {
|
|
2446
|
+
"doNotUse": true,
|
|
2447
|
+
"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."
|
|
2124
2448
|
}
|
|
2125
2449
|
},
|
|
2126
2450
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2128,6 +2452,7 @@
|
|
|
2128
2452
|
"original": {
|
|
2129
2453
|
"$value": "{base.color.neutral.0}",
|
|
2130
2454
|
"$type": "color",
|
|
2455
|
+
"$description": "Pure white background",
|
|
2131
2456
|
"$extensions": {
|
|
2132
2457
|
"org.primer.figma": {
|
|
2133
2458
|
"collection": "mode",
|
|
@@ -2136,6 +2461,10 @@
|
|
|
2136
2461
|
},
|
|
2137
2462
|
"org.primer.overrides": {
|
|
2138
2463
|
"dark": "{base.color.neutral.13}"
|
|
2464
|
+
},
|
|
2465
|
+
"org.primer.llm": {
|
|
2466
|
+
"doNotUse": true,
|
|
2467
|
+
"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."
|
|
2139
2468
|
}
|
|
2140
2469
|
},
|
|
2141
2470
|
"key": "{bgColor.white}"
|
|
@@ -2144,7 +2473,8 @@
|
|
|
2144
2473
|
"attributes": {},
|
|
2145
2474
|
"path": ["bgColor", "white"],
|
|
2146
2475
|
"value": "#ffffff",
|
|
2147
|
-
"type": "color"
|
|
2476
|
+
"type": "color",
|
|
2477
|
+
"description": "Pure white background"
|
|
2148
2478
|
},
|
|
2149
2479
|
"border-accent-emphasis": {
|
|
2150
2480
|
"key": "{border.accent.emphasis}",
|
|
@@ -2656,6 +2986,10 @@
|
|
|
2656
2986
|
},
|
|
2657
2987
|
"org.primer.overrides": {
|
|
2658
2988
|
"dark-dimmed-high-contrast": "#67b3fd"
|
|
2989
|
+
},
|
|
2990
|
+
"org.primer.llm": {
|
|
2991
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
2992
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2659
2993
|
}
|
|
2660
2994
|
},
|
|
2661
2995
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2663,6 +2997,7 @@
|
|
|
2663
2997
|
"original": {
|
|
2664
2998
|
"$value": "{base.color.blue.5}",
|
|
2665
2999
|
"$type": "color",
|
|
3000
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2666
3001
|
"$extensions": {
|
|
2667
3002
|
"org.primer.figma": {
|
|
2668
3003
|
"collection": "mode",
|
|
@@ -2674,6 +3009,10 @@
|
|
|
2674
3009
|
},
|
|
2675
3010
|
"org.primer.overrides": {
|
|
2676
3011
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3012
|
+
},
|
|
3013
|
+
"org.primer.llm": {
|
|
3014
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3015
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2677
3016
|
}
|
|
2678
3017
|
},
|
|
2679
3018
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2682,7 +3021,8 @@
|
|
|
2682
3021
|
"attributes": {},
|
|
2683
3022
|
"path": ["borderColor", "accent", "emphasis"],
|
|
2684
3023
|
"value": "#0349b4",
|
|
2685
|
-
"type": "color"
|
|
3024
|
+
"type": "color",
|
|
3025
|
+
"description": "Strong accent border for selected or focused elements"
|
|
2686
3026
|
},
|
|
2687
3027
|
"borderColor-accent-muted": {
|
|
2688
3028
|
"key": "{borderColor.accent.muted}",
|
|
@@ -2746,6 +3086,10 @@
|
|
|
2746
3086
|
"isSource": true,
|
|
2747
3087
|
"$type": "color"
|
|
2748
3088
|
}
|
|
3089
|
+
},
|
|
3090
|
+
"org.primer.llm": {
|
|
3091
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3092
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2749
3093
|
}
|
|
2750
3094
|
},
|
|
2751
3095
|
"alpha": 1,
|
|
@@ -2754,6 +3098,7 @@
|
|
|
2754
3098
|
"original": {
|
|
2755
3099
|
"$value": "{base.color.blue.3}",
|
|
2756
3100
|
"$type": "color",
|
|
3101
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2757
3102
|
"$extensions": {
|
|
2758
3103
|
"org.primer.figma": {
|
|
2759
3104
|
"collection": "mode",
|
|
@@ -2814,6 +3159,10 @@
|
|
|
2814
3159
|
"isSource": true,
|
|
2815
3160
|
"$type": "color"
|
|
2816
3161
|
}
|
|
3162
|
+
},
|
|
3163
|
+
"org.primer.llm": {
|
|
3164
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3165
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2817
3166
|
}
|
|
2818
3167
|
},
|
|
2819
3168
|
"alpha": 1,
|
|
@@ -2823,7 +3172,8 @@
|
|
|
2823
3172
|
"attributes": {},
|
|
2824
3173
|
"path": ["borderColor", "accent", "muted"],
|
|
2825
3174
|
"value": "#368cf9",
|
|
2826
|
-
"type": "color"
|
|
3175
|
+
"type": "color",
|
|
3176
|
+
"description": "Subtle accent border for selected or focused elements"
|
|
2827
3177
|
},
|
|
2828
3178
|
"borderColor-attention-emphasis": {
|
|
2829
3179
|
"key": "{borderColor.attention.emphasis}",
|
|
@@ -2838,6 +3188,10 @@
|
|
|
2838
3188
|
},
|
|
2839
3189
|
"org.primer.overrides": {
|
|
2840
3190
|
"dark-dimmed-high-contrast": "#d5a824"
|
|
3191
|
+
},
|
|
3192
|
+
"org.primer.llm": {
|
|
3193
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3194
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2841
3195
|
}
|
|
2842
3196
|
},
|
|
2843
3197
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2845,6 +3199,7 @@
|
|
|
2845
3199
|
"original": {
|
|
2846
3200
|
"$value": "{base.color.yellow.5}",
|
|
2847
3201
|
"$type": "color",
|
|
3202
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2848
3203
|
"$extensions": {
|
|
2849
3204
|
"org.primer.figma": {
|
|
2850
3205
|
"collection": "mode",
|
|
@@ -2856,6 +3211,10 @@
|
|
|
2856
3211
|
},
|
|
2857
3212
|
"org.primer.overrides": {
|
|
2858
3213
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3214
|
+
},
|
|
3215
|
+
"org.primer.llm": {
|
|
3216
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3217
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2859
3218
|
}
|
|
2860
3219
|
},
|
|
2861
3220
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2864,7 +3223,8 @@
|
|
|
2864
3223
|
"attributes": {},
|
|
2865
3224
|
"path": ["borderColor", "attention", "emphasis"],
|
|
2866
3225
|
"value": "#744500",
|
|
2867
|
-
"type": "color"
|
|
3226
|
+
"type": "color",
|
|
3227
|
+
"description": "Strong attention border for prominent warnings"
|
|
2868
3228
|
},
|
|
2869
3229
|
"borderColor-attention-muted": {
|
|
2870
3230
|
"key": "{borderColor.attention.muted}",
|
|
@@ -2928,6 +3288,10 @@
|
|
|
2928
3288
|
"isSource": true,
|
|
2929
3289
|
"$type": "color"
|
|
2930
3290
|
}
|
|
3291
|
+
},
|
|
3292
|
+
"org.primer.llm": {
|
|
3293
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3294
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2931
3295
|
}
|
|
2932
3296
|
},
|
|
2933
3297
|
"alpha": 1,
|
|
@@ -2936,6 +3300,7 @@
|
|
|
2936
3300
|
"original": {
|
|
2937
3301
|
"$value": "{base.color.yellow.3}",
|
|
2938
3302
|
"$type": "color",
|
|
3303
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2939
3304
|
"$extensions": {
|
|
2940
3305
|
"org.primer.figma": {
|
|
2941
3306
|
"collection": "mode",
|
|
@@ -2996,6 +3361,10 @@
|
|
|
2996
3361
|
"isSource": true,
|
|
2997
3362
|
"$type": "color"
|
|
2998
3363
|
}
|
|
3364
|
+
},
|
|
3365
|
+
"org.primer.llm": {
|
|
3366
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3367
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2999
3368
|
}
|
|
3000
3369
|
},
|
|
3001
3370
|
"alpha": 1,
|
|
@@ -3005,7 +3374,8 @@
|
|
|
3005
3374
|
"attributes": {},
|
|
3006
3375
|
"path": ["borderColor", "attention", "muted"],
|
|
3007
3376
|
"value": "#b58407",
|
|
3008
|
-
"type": "color"
|
|
3377
|
+
"type": "color",
|
|
3378
|
+
"description": "Subtle attention border for warnings and caution states"
|
|
3009
3379
|
},
|
|
3010
3380
|
"borderColor-closed-emphasis": {
|
|
3011
3381
|
"key": "{borderColor.closed.emphasis}",
|
|
@@ -3027,6 +3397,10 @@
|
|
|
3027
3397
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
3028
3398
|
"light-tritanopia": "#454c54",
|
|
3029
3399
|
"light-tritanopia-high-contrast": "#454c54"
|
|
3400
|
+
},
|
|
3401
|
+
"org.primer.llm": {
|
|
3402
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3403
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3030
3404
|
}
|
|
3031
3405
|
},
|
|
3032
3406
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3034,6 +3408,7 @@
|
|
|
3034
3408
|
"original": {
|
|
3035
3409
|
"$value": "{borderColor.emphasis}",
|
|
3036
3410
|
"$type": "color",
|
|
3411
|
+
"$description": "Strong border for closed state badges",
|
|
3037
3412
|
"$extensions": {
|
|
3038
3413
|
"org.primer.figma": {
|
|
3039
3414
|
"collection": "mode",
|
|
@@ -3052,6 +3427,10 @@
|
|
|
3052
3427
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3053
3428
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3054
3429
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3430
|
+
},
|
|
3431
|
+
"org.primer.llm": {
|
|
3432
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3433
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3055
3434
|
}
|
|
3056
3435
|
},
|
|
3057
3436
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3060,7 +3439,8 @@
|
|
|
3060
3439
|
"attributes": {},
|
|
3061
3440
|
"path": ["borderColor", "closed", "emphasis"],
|
|
3062
3441
|
"value": "#454c54",
|
|
3063
|
-
"type": "color"
|
|
3442
|
+
"type": "color",
|
|
3443
|
+
"description": "Strong border for closed state badges"
|
|
3064
3444
|
},
|
|
3065
3445
|
"borderColor-closed-muted": {
|
|
3066
3446
|
"key": "{borderColor.closed.muted}",
|
|
@@ -3130,6 +3510,10 @@
|
|
|
3130
3510
|
"isSource": true,
|
|
3131
3511
|
"$type": "color"
|
|
3132
3512
|
}
|
|
3513
|
+
},
|
|
3514
|
+
"org.primer.llm": {
|
|
3515
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3516
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3133
3517
|
}
|
|
3134
3518
|
},
|
|
3135
3519
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3138,6 +3522,7 @@
|
|
|
3138
3522
|
"original": {
|
|
3139
3523
|
"$value": "{borderColor.default}",
|
|
3140
3524
|
"$type": "color",
|
|
3525
|
+
"$description": "Subtle border for closed state indicators",
|
|
3141
3526
|
"$extensions": {
|
|
3142
3527
|
"org.primer.figma": {
|
|
3143
3528
|
"collection": "mode",
|
|
@@ -3204,6 +3589,10 @@
|
|
|
3204
3589
|
"isSource": true,
|
|
3205
3590
|
"$type": "color"
|
|
3206
3591
|
}
|
|
3592
|
+
},
|
|
3593
|
+
"org.primer.llm": {
|
|
3594
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3595
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3207
3596
|
}
|
|
3208
3597
|
},
|
|
3209
3598
|
"alpha": 1,
|
|
@@ -3213,7 +3602,8 @@
|
|
|
3213
3602
|
"attributes": {},
|
|
3214
3603
|
"path": ["borderColor", "closed", "muted"],
|
|
3215
3604
|
"value": "#454c54",
|
|
3216
|
-
"type": "color"
|
|
3605
|
+
"type": "color",
|
|
3606
|
+
"description": "Subtle border for closed state indicators"
|
|
3217
3607
|
},
|
|
3218
3608
|
"borderColor-danger-emphasis": {
|
|
3219
3609
|
"key": "{borderColor.danger.emphasis}",
|
|
@@ -3252,6 +3642,10 @@
|
|
|
3252
3642
|
"$type": "color"
|
|
3253
3643
|
},
|
|
3254
3644
|
"dark-dimmed-high-contrast": "#ff8e8a"
|
|
3645
|
+
},
|
|
3646
|
+
"org.primer.llm": {
|
|
3647
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3648
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3255
3649
|
}
|
|
3256
3650
|
},
|
|
3257
3651
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3259,6 +3653,7 @@
|
|
|
3259
3653
|
"original": {
|
|
3260
3654
|
"$value": "{base.color.red.5}",
|
|
3261
3655
|
"$type": "color",
|
|
3656
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3262
3657
|
"$extensions": {
|
|
3263
3658
|
"org.primer.figma": {
|
|
3264
3659
|
"collection": "mode",
|
|
@@ -3294,6 +3689,10 @@
|
|
|
3294
3689
|
"$type": "color"
|
|
3295
3690
|
},
|
|
3296
3691
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3692
|
+
},
|
|
3693
|
+
"org.primer.llm": {
|
|
3694
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3695
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3297
3696
|
}
|
|
3298
3697
|
},
|
|
3299
3698
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3302,7 +3701,8 @@
|
|
|
3302
3701
|
"attributes": {},
|
|
3303
3702
|
"path": ["borderColor", "danger", "emphasis"],
|
|
3304
3703
|
"value": "#a0111f",
|
|
3305
|
-
"type": "color"
|
|
3704
|
+
"type": "color",
|
|
3705
|
+
"description": "Strong danger border for destructive actions and errors"
|
|
3306
3706
|
},
|
|
3307
3707
|
"borderColor-danger-muted": {
|
|
3308
3708
|
"key": "{borderColor.danger.muted}",
|
|
@@ -3379,6 +3779,10 @@
|
|
|
3379
3779
|
"isSource": true,
|
|
3380
3780
|
"$type": "color"
|
|
3381
3781
|
}
|
|
3782
|
+
},
|
|
3783
|
+
"org.primer.llm": {
|
|
3784
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3785
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3382
3786
|
}
|
|
3383
3787
|
},
|
|
3384
3788
|
"alpha": 1,
|
|
@@ -3387,6 +3791,7 @@
|
|
|
3387
3791
|
"original": {
|
|
3388
3792
|
"$value": "{base.color.red.3}",
|
|
3389
3793
|
"$type": "color",
|
|
3794
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3390
3795
|
"$extensions": {
|
|
3391
3796
|
"org.primer.figma": {
|
|
3392
3797
|
"collection": "mode",
|
|
@@ -3460,6 +3865,10 @@
|
|
|
3460
3865
|
"isSource": true,
|
|
3461
3866
|
"$type": "color"
|
|
3462
3867
|
}
|
|
3868
|
+
},
|
|
3869
|
+
"org.primer.llm": {
|
|
3870
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3871
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3463
3872
|
}
|
|
3464
3873
|
},
|
|
3465
3874
|
"alpha": 1,
|
|
@@ -3469,7 +3878,8 @@
|
|
|
3469
3878
|
"attributes": {},
|
|
3470
3879
|
"path": ["borderColor", "danger", "muted"],
|
|
3471
3880
|
"value": "#ee5a5d",
|
|
3472
|
-
"type": "color"
|
|
3881
|
+
"type": "color",
|
|
3882
|
+
"description": "Subtle danger border for errors and destructive contexts"
|
|
3473
3883
|
},
|
|
3474
3884
|
"borderColor-default": {
|
|
3475
3885
|
"key": "{borderColor.default}",
|
|
@@ -3492,6 +3902,10 @@
|
|
|
3492
3902
|
"codeSyntax": {
|
|
3493
3903
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3494
3904
|
}
|
|
3905
|
+
},
|
|
3906
|
+
"org.primer.llm": {
|
|
3907
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3908
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3495
3909
|
}
|
|
3496
3910
|
},
|
|
3497
3911
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3499,6 +3913,7 @@
|
|
|
3499
3913
|
"original": {
|
|
3500
3914
|
"$value": "{base.color.neutral.10}",
|
|
3501
3915
|
"$type": "color",
|
|
3916
|
+
"$description": "Default border color for most UI elements",
|
|
3502
3917
|
"$extensions": {
|
|
3503
3918
|
"org.primer.overrides": {
|
|
3504
3919
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3518,6 +3933,10 @@
|
|
|
3518
3933
|
"codeSyntax": {
|
|
3519
3934
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3520
3935
|
}
|
|
3936
|
+
},
|
|
3937
|
+
"org.primer.llm": {
|
|
3938
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3939
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3521
3940
|
}
|
|
3522
3941
|
},
|
|
3523
3942
|
"key": "{borderColor.default}"
|
|
@@ -3526,7 +3945,8 @@
|
|
|
3526
3945
|
"attributes": {},
|
|
3527
3946
|
"path": ["borderColor", "default"],
|
|
3528
3947
|
"value": "#454c54",
|
|
3529
|
-
"type": "color"
|
|
3948
|
+
"type": "color",
|
|
3949
|
+
"description": "Default border color for most UI elements"
|
|
3530
3950
|
},
|
|
3531
3951
|
"borderColor-disabled": {
|
|
3532
3952
|
"key": "{borderColor.disabled}",
|
|
@@ -3572,6 +3992,10 @@
|
|
|
3572
3992
|
"isSource": true,
|
|
3573
3993
|
"$type": "color"
|
|
3574
3994
|
}
|
|
3995
|
+
},
|
|
3996
|
+
"org.primer.llm": {
|
|
3997
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
3998
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3575
3999
|
}
|
|
3576
4000
|
},
|
|
3577
4001
|
"alpha": 0.12,
|
|
@@ -3580,6 +4004,7 @@
|
|
|
3580
4004
|
"original": {
|
|
3581
4005
|
"$value": "{base.color.neutral.9}",
|
|
3582
4006
|
"$type": "color",
|
|
4007
|
+
"$description": "Border color for disabled interactive elements",
|
|
3583
4008
|
"$extensions": {
|
|
3584
4009
|
"org.primer.figma": {
|
|
3585
4010
|
"collection": "mode",
|
|
@@ -3622,6 +4047,10 @@
|
|
|
3622
4047
|
"isSource": true,
|
|
3623
4048
|
"$type": "color"
|
|
3624
4049
|
}
|
|
4050
|
+
},
|
|
4051
|
+
"org.primer.llm": {
|
|
4052
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4053
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3625
4054
|
}
|
|
3626
4055
|
},
|
|
3627
4056
|
"alpha": 0.12,
|
|
@@ -3631,7 +4060,8 @@
|
|
|
3631
4060
|
"attributes": {},
|
|
3632
4061
|
"path": ["borderColor", "disabled"],
|
|
3633
4062
|
"value": "#59636e1f",
|
|
3634
|
-
"type": "color"
|
|
4063
|
+
"type": "color",
|
|
4064
|
+
"description": "Border color for disabled interactive elements"
|
|
3635
4065
|
},
|
|
3636
4066
|
"borderColor-done-emphasis": {
|
|
3637
4067
|
"key": "{borderColor.done.emphasis}",
|
|
@@ -3646,6 +4076,10 @@
|
|
|
3646
4076
|
},
|
|
3647
4077
|
"org.primer.overrides": {
|
|
3648
4078
|
"dark-dimmed-high-contrast": "#c49bff"
|
|
4079
|
+
},
|
|
4080
|
+
"org.primer.llm": {
|
|
4081
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4082
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3649
4083
|
}
|
|
3650
4084
|
},
|
|
3651
4085
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3653,6 +4087,7 @@
|
|
|
3653
4087
|
"original": {
|
|
3654
4088
|
"$value": "{base.color.purple.5}",
|
|
3655
4089
|
"$type": "color",
|
|
4090
|
+
"$description": "Strong border for completed/done state badges",
|
|
3656
4091
|
"$extensions": {
|
|
3657
4092
|
"org.primer.figma": {
|
|
3658
4093
|
"collection": "mode",
|
|
@@ -3664,6 +4099,10 @@
|
|
|
3664
4099
|
},
|
|
3665
4100
|
"org.primer.overrides": {
|
|
3666
4101
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4102
|
+
},
|
|
4103
|
+
"org.primer.llm": {
|
|
4104
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4105
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3667
4106
|
}
|
|
3668
4107
|
},
|
|
3669
4108
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3672,7 +4111,8 @@
|
|
|
3672
4111
|
"attributes": {},
|
|
3673
4112
|
"path": ["borderColor", "done", "emphasis"],
|
|
3674
4113
|
"value": "#622cbc",
|
|
3675
|
-
"type": "color"
|
|
4114
|
+
"type": "color",
|
|
4115
|
+
"description": "Strong border for completed/done state badges"
|
|
3676
4116
|
},
|
|
3677
4117
|
"borderColor-done-muted": {
|
|
3678
4118
|
"key": "{borderColor.done.muted}",
|
|
@@ -3736,6 +4176,10 @@
|
|
|
3736
4176
|
"isSource": true,
|
|
3737
4177
|
"$type": "color"
|
|
3738
4178
|
}
|
|
4179
|
+
},
|
|
4180
|
+
"org.primer.llm": {
|
|
4181
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4182
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3739
4183
|
}
|
|
3740
4184
|
},
|
|
3741
4185
|
"alpha": 1,
|
|
@@ -3744,6 +4188,7 @@
|
|
|
3744
4188
|
"original": {
|
|
3745
4189
|
"$value": "{base.color.purple.3}",
|
|
3746
4190
|
"$type": "color",
|
|
4191
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3747
4192
|
"$extensions": {
|
|
3748
4193
|
"org.primer.figma": {
|
|
3749
4194
|
"collection": "mode",
|
|
@@ -3804,6 +4249,10 @@
|
|
|
3804
4249
|
"isSource": true,
|
|
3805
4250
|
"$type": "color"
|
|
3806
4251
|
}
|
|
4252
|
+
},
|
|
4253
|
+
"org.primer.llm": {
|
|
4254
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4255
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3807
4256
|
}
|
|
3808
4257
|
},
|
|
3809
4258
|
"alpha": 1,
|
|
@@ -3813,7 +4262,8 @@
|
|
|
3813
4262
|
"attributes": {},
|
|
3814
4263
|
"path": ["borderColor", "done", "muted"],
|
|
3815
4264
|
"value": "#a371f7",
|
|
3816
|
-
"type": "color"
|
|
4265
|
+
"type": "color",
|
|
4266
|
+
"description": "Subtle border for completed/done state indicators"
|
|
3817
4267
|
},
|
|
3818
4268
|
"borderColor-draft-emphasis": {
|
|
3819
4269
|
"key": "{borderColor.draft.emphasis}",
|
|
@@ -3825,6 +4275,10 @@
|
|
|
3825
4275
|
"codeSyntax": {
|
|
3826
4276
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3827
4277
|
}
|
|
4278
|
+
},
|
|
4279
|
+
"org.primer.llm": {
|
|
4280
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4281
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3828
4282
|
}
|
|
3829
4283
|
},
|
|
3830
4284
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3832,6 +4286,7 @@
|
|
|
3832
4286
|
"original": {
|
|
3833
4287
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3834
4288
|
"$type": "color",
|
|
4289
|
+
"$description": "Strong border for draft state badges",
|
|
3835
4290
|
"$extensions": {
|
|
3836
4291
|
"org.primer.figma": {
|
|
3837
4292
|
"collection": "mode",
|
|
@@ -3840,6 +4295,10 @@
|
|
|
3840
4295
|
"codeSyntax": {
|
|
3841
4296
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3842
4297
|
}
|
|
4298
|
+
},
|
|
4299
|
+
"org.primer.llm": {
|
|
4300
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4301
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3843
4302
|
}
|
|
3844
4303
|
},
|
|
3845
4304
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3848,7 +4307,8 @@
|
|
|
3848
4307
|
"attributes": {},
|
|
3849
4308
|
"path": ["borderColor", "draft", "emphasis"],
|
|
3850
4309
|
"value": "#59636e",
|
|
3851
|
-
"type": "color"
|
|
4310
|
+
"type": "color",
|
|
4311
|
+
"description": "Strong border for draft state badges"
|
|
3852
4312
|
},
|
|
3853
4313
|
"borderColor-draft-muted": {
|
|
3854
4314
|
"key": "{borderColor.draft.muted}",
|
|
@@ -3918,6 +4378,10 @@
|
|
|
3918
4378
|
"isSource": true,
|
|
3919
4379
|
"$type": "color"
|
|
3920
4380
|
}
|
|
4381
|
+
},
|
|
4382
|
+
"org.primer.llm": {
|
|
4383
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4384
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3921
4385
|
}
|
|
3922
4386
|
},
|
|
3923
4387
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3926,6 +4390,7 @@
|
|
|
3926
4390
|
"original": {
|
|
3927
4391
|
"$value": "{borderColor.default}",
|
|
3928
4392
|
"$type": "color",
|
|
4393
|
+
"$description": "Subtle border for draft state indicators",
|
|
3929
4394
|
"$extensions": {
|
|
3930
4395
|
"org.primer.figma": {
|
|
3931
4396
|
"collection": "mode",
|
|
@@ -3992,6 +4457,10 @@
|
|
|
3992
4457
|
"isSource": true,
|
|
3993
4458
|
"$type": "color"
|
|
3994
4459
|
}
|
|
4460
|
+
},
|
|
4461
|
+
"org.primer.llm": {
|
|
4462
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4463
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3995
4464
|
}
|
|
3996
4465
|
},
|
|
3997
4466
|
"alpha": 1,
|
|
@@ -4001,7 +4470,8 @@
|
|
|
4001
4470
|
"attributes": {},
|
|
4002
4471
|
"path": ["borderColor", "draft", "muted"],
|
|
4003
4472
|
"value": "#454c54",
|
|
4004
|
-
"type": "color"
|
|
4473
|
+
"type": "color",
|
|
4474
|
+
"description": "Subtle border for draft state indicators"
|
|
4005
4475
|
},
|
|
4006
4476
|
"borderColor-emphasis": {
|
|
4007
4477
|
"key": "{borderColor.emphasis}",
|
|
@@ -4019,6 +4489,10 @@
|
|
|
4019
4489
|
"dark-dimmed-high-contrast": "#454c54",
|
|
4020
4490
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
4021
4491
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
4492
|
+
},
|
|
4493
|
+
"org.primer.llm": {
|
|
4494
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4495
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4022
4496
|
}
|
|
4023
4497
|
},
|
|
4024
4498
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4026,6 +4500,7 @@
|
|
|
4026
4500
|
"original": {
|
|
4027
4501
|
"$value": "{borderColor.default}",
|
|
4028
4502
|
"$type": "color",
|
|
4503
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4029
4504
|
"$extensions": {
|
|
4030
4505
|
"org.primer.figma": {
|
|
4031
4506
|
"collection": "mode",
|
|
@@ -4040,6 +4515,10 @@
|
|
|
4040
4515
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4041
4516
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4042
4517
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4518
|
+
},
|
|
4519
|
+
"org.primer.llm": {
|
|
4520
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4521
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4043
4522
|
}
|
|
4044
4523
|
},
|
|
4045
4524
|
"key": "{borderColor.emphasis}"
|
|
@@ -4048,7 +4527,8 @@
|
|
|
4048
4527
|
"attributes": {},
|
|
4049
4528
|
"path": ["borderColor", "emphasis"],
|
|
4050
4529
|
"value": "#454c54",
|
|
4051
|
-
"type": "color"
|
|
4530
|
+
"type": "color",
|
|
4531
|
+
"description": "Strong border for emphasis and visual weight"
|
|
4052
4532
|
},
|
|
4053
4533
|
"borderColor-muted": {
|
|
4054
4534
|
"key": "{borderColor.muted}",
|
|
@@ -4118,6 +4598,10 @@
|
|
|
4118
4598
|
"isSource": true,
|
|
4119
4599
|
"$type": "color"
|
|
4120
4600
|
}
|
|
4601
|
+
},
|
|
4602
|
+
"org.primer.llm": {
|
|
4603
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4604
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4121
4605
|
}
|
|
4122
4606
|
},
|
|
4123
4607
|
"alpha": 1,
|
|
@@ -4126,6 +4610,7 @@
|
|
|
4126
4610
|
"original": {
|
|
4127
4611
|
"$value": "{borderColor.default}",
|
|
4128
4612
|
"$type": "color",
|
|
4613
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4129
4614
|
"$extensions": {
|
|
4130
4615
|
"org.primer.figma": {
|
|
4131
4616
|
"collection": "mode",
|
|
@@ -4192,6 +4677,10 @@
|
|
|
4192
4677
|
"isSource": true,
|
|
4193
4678
|
"$type": "color"
|
|
4194
4679
|
}
|
|
4680
|
+
},
|
|
4681
|
+
"org.primer.llm": {
|
|
4682
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4683
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4195
4684
|
}
|
|
4196
4685
|
},
|
|
4197
4686
|
"alpha": 1,
|
|
@@ -4201,7 +4690,8 @@
|
|
|
4201
4690
|
"attributes": {},
|
|
4202
4691
|
"path": ["borderColor", "muted"],
|
|
4203
4692
|
"value": "#454c54",
|
|
4204
|
-
"type": "color"
|
|
4693
|
+
"type": "color",
|
|
4694
|
+
"description": "Subtle border for secondary elements and light separators"
|
|
4205
4695
|
},
|
|
4206
4696
|
"borderColor-neutral-emphasis": {
|
|
4207
4697
|
"key": "{borderColor.neutral.emphasis}",
|
|
@@ -4213,6 +4703,10 @@
|
|
|
4213
4703
|
},
|
|
4214
4704
|
"org.primer.overrides": {
|
|
4215
4705
|
"dark": "#454c54"
|
|
4706
|
+
},
|
|
4707
|
+
"org.primer.llm": {
|
|
4708
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4709
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4216
4710
|
}
|
|
4217
4711
|
},
|
|
4218
4712
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4220,6 +4714,7 @@
|
|
|
4220
4714
|
"original": {
|
|
4221
4715
|
"$value": "{base.color.neutral.9}",
|
|
4222
4716
|
"$type": "color",
|
|
4717
|
+
"$description": "Strong neutral semantic border",
|
|
4223
4718
|
"$extensions": {
|
|
4224
4719
|
"org.primer.figma": {
|
|
4225
4720
|
"collection": "mode",
|
|
@@ -4228,6 +4723,10 @@
|
|
|
4228
4723
|
},
|
|
4229
4724
|
"org.primer.overrides": {
|
|
4230
4725
|
"dark": "{borderColor.emphasis}"
|
|
4726
|
+
},
|
|
4727
|
+
"org.primer.llm": {
|
|
4728
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4729
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4231
4730
|
}
|
|
4232
4731
|
},
|
|
4233
4732
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4236,7 +4735,8 @@
|
|
|
4236
4735
|
"attributes": {},
|
|
4237
4736
|
"path": ["borderColor", "neutral", "emphasis"],
|
|
4238
4737
|
"value": "#59636e",
|
|
4239
|
-
"type": "color"
|
|
4738
|
+
"type": "color",
|
|
4739
|
+
"description": "Strong neutral semantic border"
|
|
4240
4740
|
},
|
|
4241
4741
|
"borderColor-neutral-muted": {
|
|
4242
4742
|
"key": "{borderColor.neutral.muted}",
|
|
@@ -4261,6 +4761,10 @@
|
|
|
4261
4761
|
"isSource": true,
|
|
4262
4762
|
"$type": "color"
|
|
4263
4763
|
}
|
|
4764
|
+
},
|
|
4765
|
+
"org.primer.llm": {
|
|
4766
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4767
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4264
4768
|
}
|
|
4265
4769
|
},
|
|
4266
4770
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4268,6 +4772,7 @@
|
|
|
4268
4772
|
"original": {
|
|
4269
4773
|
"$value": "{borderColor.muted}",
|
|
4270
4774
|
"$type": "color",
|
|
4775
|
+
"$description": "Subtle neutral semantic border",
|
|
4271
4776
|
"$extensions": {
|
|
4272
4777
|
"org.primer.figma": {
|
|
4273
4778
|
"collection": "mode",
|
|
@@ -4289,6 +4794,10 @@
|
|
|
4289
4794
|
"isSource": true,
|
|
4290
4795
|
"$type": "color"
|
|
4291
4796
|
}
|
|
4797
|
+
},
|
|
4798
|
+
"org.primer.llm": {
|
|
4799
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4800
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4292
4801
|
}
|
|
4293
4802
|
},
|
|
4294
4803
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4297,7 +4806,8 @@
|
|
|
4297
4806
|
"attributes": {},
|
|
4298
4807
|
"path": ["borderColor", "neutral", "muted"],
|
|
4299
4808
|
"value": "#454c54",
|
|
4300
|
-
"type": "color"
|
|
4809
|
+
"type": "color",
|
|
4810
|
+
"description": "Subtle neutral semantic border"
|
|
4301
4811
|
},
|
|
4302
4812
|
"borderColor-open-emphasis": {
|
|
4303
4813
|
"key": "{borderColor.open.emphasis}",
|
|
@@ -4319,6 +4829,10 @@
|
|
|
4319
4829
|
"dark-protanopia-deuteranopia-high-contrast": "#873800",
|
|
4320
4830
|
"light-protanopia-deuteranopia": "#873800",
|
|
4321
4831
|
"light-protanopia-deuteranopia-high-contrast": "#873800"
|
|
4832
|
+
},
|
|
4833
|
+
"org.primer.llm": {
|
|
4834
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4835
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4322
4836
|
}
|
|
4323
4837
|
},
|
|
4324
4838
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4326,6 +4840,7 @@
|
|
|
4326
4840
|
"original": {
|
|
4327
4841
|
"$value": "{base.color.red.5}",
|
|
4328
4842
|
"$type": "color",
|
|
4843
|
+
"$description": "Strong border for open state badges",
|
|
4329
4844
|
"$extensions": {
|
|
4330
4845
|
"org.primer.figma": {
|
|
4331
4846
|
"collection": "mode",
|
|
@@ -4344,6 +4859,10 @@
|
|
|
4344
4859
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4345
4860
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4346
4861
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4862
|
+
},
|
|
4863
|
+
"org.primer.llm": {
|
|
4864
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4865
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4347
4866
|
}
|
|
4348
4867
|
},
|
|
4349
4868
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4352,7 +4871,8 @@
|
|
|
4352
4871
|
"attributes": {},
|
|
4353
4872
|
"path": ["borderColor", "open", "emphasis"],
|
|
4354
4873
|
"value": "#a0111f",
|
|
4355
|
-
"type": "color"
|
|
4874
|
+
"type": "color",
|
|
4875
|
+
"description": "Strong border for open state badges"
|
|
4356
4876
|
},
|
|
4357
4877
|
"borderColor-open-muted": {
|
|
4358
4878
|
"key": "{borderColor.open.muted}",
|
|
@@ -4422,6 +4942,10 @@
|
|
|
4422
4942
|
"isSource": true,
|
|
4423
4943
|
"$type": "color"
|
|
4424
4944
|
}
|
|
4945
|
+
},
|
|
4946
|
+
"org.primer.llm": {
|
|
4947
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4948
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4425
4949
|
}
|
|
4426
4950
|
},
|
|
4427
4951
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4430,6 +4954,7 @@
|
|
|
4430
4954
|
"original": {
|
|
4431
4955
|
"$value": "{base.color.red.3}",
|
|
4432
4956
|
"$type": "color",
|
|
4957
|
+
"$description": "Subtle border for open state indicators",
|
|
4433
4958
|
"$extensions": {
|
|
4434
4959
|
"org.primer.figma": {
|
|
4435
4960
|
"collection": "mode",
|
|
@@ -4496,6 +5021,10 @@
|
|
|
4496
5021
|
"isSource": true,
|
|
4497
5022
|
"$type": "color"
|
|
4498
5023
|
}
|
|
5024
|
+
},
|
|
5025
|
+
"org.primer.llm": {
|
|
5026
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5027
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4499
5028
|
}
|
|
4500
5029
|
},
|
|
4501
5030
|
"alpha": 1,
|
|
@@ -4505,7 +5034,8 @@
|
|
|
4505
5034
|
"attributes": {},
|
|
4506
5035
|
"path": ["borderColor", "open", "muted"],
|
|
4507
5036
|
"value": "#ee5a5d",
|
|
4508
|
-
"type": "color"
|
|
5037
|
+
"type": "color",
|
|
5038
|
+
"description": "Subtle border for open state indicators"
|
|
4509
5039
|
},
|
|
4510
5040
|
"borderColor-severe-emphasis": {
|
|
4511
5041
|
"key": "{borderColor.severe.emphasis}",
|
|
@@ -4523,6 +5053,10 @@
|
|
|
4523
5053
|
"light-tritanopia": "#a0111f",
|
|
4524
5054
|
"light-tritanopia-high-contrast": "#a0111f",
|
|
4525
5055
|
"dark-dimmed-high-contrast": "#f99636"
|
|
5056
|
+
},
|
|
5057
|
+
"org.primer.llm": {
|
|
5058
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5059
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4526
5060
|
}
|
|
4527
5061
|
},
|
|
4528
5062
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4530,6 +5064,7 @@
|
|
|
4530
5064
|
"original": {
|
|
4531
5065
|
"$value": "{base.color.red.5}",
|
|
4532
5066
|
"$type": "color",
|
|
5067
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4533
5068
|
"$extensions": {
|
|
4534
5069
|
"org.primer.figma": {
|
|
4535
5070
|
"collection": "mode",
|
|
@@ -4544,6 +5079,10 @@
|
|
|
4544
5079
|
"light-tritanopia": "{base.color.red.5}",
|
|
4545
5080
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4546
5081
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5082
|
+
},
|
|
5083
|
+
"org.primer.llm": {
|
|
5084
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5085
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4547
5086
|
}
|
|
4548
5087
|
},
|
|
4549
5088
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4552,7 +5091,8 @@
|
|
|
4552
5091
|
"attributes": {},
|
|
4553
5092
|
"path": ["borderColor", "severe", "emphasis"],
|
|
4554
5093
|
"value": "#a0111f",
|
|
4555
|
-
"type": "color"
|
|
5094
|
+
"type": "color",
|
|
5095
|
+
"description": "Strong severe border for prominent high-priority warnings"
|
|
4556
5096
|
},
|
|
4557
5097
|
"borderColor-severe-muted": {
|
|
4558
5098
|
"key": "{borderColor.severe.muted}",
|
|
@@ -4611,6 +5151,10 @@
|
|
|
4611
5151
|
"isSource": true,
|
|
4612
5152
|
"$type": "color"
|
|
4613
5153
|
}
|
|
5154
|
+
},
|
|
5155
|
+
"org.primer.llm": {
|
|
5156
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5157
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4614
5158
|
}
|
|
4615
5159
|
},
|
|
4616
5160
|
"alpha": 1,
|
|
@@ -4619,6 +5163,7 @@
|
|
|
4619
5163
|
"original": {
|
|
4620
5164
|
"$value": "{base.color.red.3}",
|
|
4621
5165
|
"$type": "color",
|
|
5166
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4622
5167
|
"$extensions": {
|
|
4623
5168
|
"org.primer.figma": {
|
|
4624
5169
|
"collection": "mode",
|
|
@@ -4674,6 +5219,10 @@
|
|
|
4674
5219
|
"isSource": true,
|
|
4675
5220
|
"$type": "color"
|
|
4676
5221
|
}
|
|
5222
|
+
},
|
|
5223
|
+
"org.primer.llm": {
|
|
5224
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5225
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4677
5226
|
}
|
|
4678
5227
|
},
|
|
4679
5228
|
"alpha": 1,
|
|
@@ -4683,7 +5232,8 @@
|
|
|
4683
5232
|
"attributes": {},
|
|
4684
5233
|
"path": ["borderColor", "severe", "muted"],
|
|
4685
5234
|
"value": "#ee5a5d",
|
|
4686
|
-
"type": "color"
|
|
5235
|
+
"type": "color",
|
|
5236
|
+
"description": "Subtle severe border for high-priority warnings"
|
|
4687
5237
|
},
|
|
4688
5238
|
"borderColor-sponsors-emphasis": {
|
|
4689
5239
|
"key": "{borderColor.sponsors.emphasis}",
|
|
@@ -4698,6 +5248,10 @@
|
|
|
4698
5248
|
},
|
|
4699
5249
|
"org.primer.overrides": {
|
|
4700
5250
|
"dark-dimmed-high-contrast": "#ed4baf"
|
|
5251
|
+
},
|
|
5252
|
+
"org.primer.llm": {
|
|
5253
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5254
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4701
5255
|
}
|
|
4702
5256
|
},
|
|
4703
5257
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4705,6 +5259,7 @@
|
|
|
4705
5259
|
"original": {
|
|
4706
5260
|
"$value": "{base.color.pink.5}",
|
|
4707
5261
|
"$type": "color",
|
|
5262
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4708
5263
|
"$extensions": {
|
|
4709
5264
|
"org.primer.figma": {
|
|
4710
5265
|
"collection": "mode",
|
|
@@ -4716,6 +5271,10 @@
|
|
|
4716
5271
|
},
|
|
4717
5272
|
"org.primer.overrides": {
|
|
4718
5273
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5274
|
+
},
|
|
5275
|
+
"org.primer.llm": {
|
|
5276
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5277
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4719
5278
|
}
|
|
4720
5279
|
},
|
|
4721
5280
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4724,7 +5283,8 @@
|
|
|
4724
5283
|
"attributes": {},
|
|
4725
5284
|
"path": ["borderColor", "sponsors", "emphasis"],
|
|
4726
5285
|
"value": "#971368",
|
|
4727
|
-
"type": "color"
|
|
5286
|
+
"type": "color",
|
|
5287
|
+
"description": "Strong border for prominent GitHub Sponsors elements"
|
|
4728
5288
|
},
|
|
4729
5289
|
"borderColor-sponsors-muted": {
|
|
4730
5290
|
"key": "{borderColor.sponsors.muted}",
|
|
@@ -4788,6 +5348,10 @@
|
|
|
4788
5348
|
"isSource": true,
|
|
4789
5349
|
"$type": "color"
|
|
4790
5350
|
}
|
|
5351
|
+
},
|
|
5352
|
+
"org.primer.llm": {
|
|
5353
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5354
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4791
5355
|
}
|
|
4792
5356
|
},
|
|
4793
5357
|
"alpha": 1,
|
|
@@ -4796,6 +5360,7 @@
|
|
|
4796
5360
|
"original": {
|
|
4797
5361
|
"$value": "{base.color.pink.3}",
|
|
4798
5362
|
"$type": "color",
|
|
5363
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4799
5364
|
"$extensions": {
|
|
4800
5365
|
"org.primer.figma": {
|
|
4801
5366
|
"collection": "mode",
|
|
@@ -4856,6 +5421,10 @@
|
|
|
4856
5421
|
"isSource": true,
|
|
4857
5422
|
"$type": "color"
|
|
4858
5423
|
}
|
|
5424
|
+
},
|
|
5425
|
+
"org.primer.llm": {
|
|
5426
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5427
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4859
5428
|
}
|
|
4860
5429
|
},
|
|
4861
5430
|
"alpha": 1,
|
|
@@ -4865,7 +5434,8 @@
|
|
|
4865
5434
|
"attributes": {},
|
|
4866
5435
|
"path": ["borderColor", "sponsors", "muted"],
|
|
4867
5436
|
"value": "#ed4baf",
|
|
4868
|
-
"type": "color"
|
|
5437
|
+
"type": "color",
|
|
5438
|
+
"description": "Subtle border for GitHub Sponsors content"
|
|
4869
5439
|
},
|
|
4870
5440
|
"borderColor-success-emphasis": {
|
|
4871
5441
|
"key": "{borderColor.success.emphasis}",
|
|
@@ -4888,6 +5458,10 @@
|
|
|
4888
5458
|
"light-protanopia-deuteranopia": "#0349b4",
|
|
4889
5459
|
"light-protanopia-deuteranopia-high-contrast": "#0349b4",
|
|
4890
5460
|
"dark-dimmed-high-contrast": "#43c663"
|
|
5461
|
+
},
|
|
5462
|
+
"org.primer.llm": {
|
|
5463
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5464
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4891
5465
|
}
|
|
4892
5466
|
},
|
|
4893
5467
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4895,6 +5469,7 @@
|
|
|
4895
5469
|
"original": {
|
|
4896
5470
|
"$value": "{base.color.blue.5}",
|
|
4897
5471
|
"$type": "color",
|
|
5472
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4898
5473
|
"$extensions": {
|
|
4899
5474
|
"org.primer.figma": {
|
|
4900
5475
|
"collection": "mode",
|
|
@@ -4914,6 +5489,10 @@
|
|
|
4914
5489
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4915
5490
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4916
5491
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5492
|
+
},
|
|
5493
|
+
"org.primer.llm": {
|
|
5494
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5495
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4917
5496
|
}
|
|
4918
5497
|
},
|
|
4919
5498
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4922,7 +5501,8 @@
|
|
|
4922
5501
|
"attributes": {},
|
|
4923
5502
|
"path": ["borderColor", "success", "emphasis"],
|
|
4924
5503
|
"value": "#0349b4",
|
|
4925
|
-
"type": "color"
|
|
5504
|
+
"type": "color",
|
|
5505
|
+
"description": "Strong success border for prominent positive elements"
|
|
4926
5506
|
},
|
|
4927
5507
|
"borderColor-success-muted": {
|
|
4928
5508
|
"key": "{borderColor.success.muted}",
|
|
@@ -5013,6 +5593,10 @@
|
|
|
5013
5593
|
"isSource": true,
|
|
5014
5594
|
"$type": "color"
|
|
5015
5595
|
}
|
|
5596
|
+
},
|
|
5597
|
+
"org.primer.llm": {
|
|
5598
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5599
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5016
5600
|
}
|
|
5017
5601
|
},
|
|
5018
5602
|
"alpha": 1,
|
|
@@ -5021,6 +5605,7 @@
|
|
|
5021
5605
|
"original": {
|
|
5022
5606
|
"$value": "{base.color.blue.3}",
|
|
5023
5607
|
"$type": "color",
|
|
5608
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5024
5609
|
"$extensions": {
|
|
5025
5610
|
"org.primer.figma": {
|
|
5026
5611
|
"collection": "mode",
|
|
@@ -5108,6 +5693,10 @@
|
|
|
5108
5693
|
"isSource": true,
|
|
5109
5694
|
"$type": "color"
|
|
5110
5695
|
}
|
|
5696
|
+
},
|
|
5697
|
+
"org.primer.llm": {
|
|
5698
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5699
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5111
5700
|
}
|
|
5112
5701
|
},
|
|
5113
5702
|
"alpha": 1,
|
|
@@ -5117,7 +5706,8 @@
|
|
|
5117
5706
|
"attributes": {},
|
|
5118
5707
|
"path": ["borderColor", "success", "muted"],
|
|
5119
5708
|
"value": "#368cf9",
|
|
5120
|
-
"type": "color"
|
|
5709
|
+
"type": "color",
|
|
5710
|
+
"description": "Subtle success border for positive feedback elements"
|
|
5121
5711
|
},
|
|
5122
5712
|
"borderColor-translucent": {
|
|
5123
5713
|
"key": "{borderColor.translucent}",
|
|
@@ -5177,6 +5767,10 @@
|
|
|
5177
5767
|
"isSource": true,
|
|
5178
5768
|
"$type": "color"
|
|
5179
5769
|
}
|
|
5770
|
+
},
|
|
5771
|
+
"org.primer.llm": {
|
|
5772
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5773
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5180
5774
|
}
|
|
5181
5775
|
},
|
|
5182
5776
|
"alpha": 1,
|
|
@@ -5185,6 +5779,7 @@
|
|
|
5185
5779
|
"original": {
|
|
5186
5780
|
"$value": "{base.color.neutral.9}",
|
|
5187
5781
|
"$type": "color",
|
|
5782
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5188
5783
|
"$extensions": {
|
|
5189
5784
|
"org.primer.figma": {
|
|
5190
5785
|
"collection": "mode",
|
|
@@ -5241,6 +5836,10 @@
|
|
|
5241
5836
|
"isSource": true,
|
|
5242
5837
|
"$type": "color"
|
|
5243
5838
|
}
|
|
5839
|
+
},
|
|
5840
|
+
"org.primer.llm": {
|
|
5841
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5842
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5244
5843
|
}
|
|
5245
5844
|
},
|
|
5246
5845
|
"alpha": 1,
|
|
@@ -5250,7 +5849,8 @@
|
|
|
5250
5849
|
"attributes": {},
|
|
5251
5850
|
"path": ["borderColor", "translucent"],
|
|
5252
5851
|
"value": "#59636e",
|
|
5253
|
-
"type": "color"
|
|
5852
|
+
"type": "color",
|
|
5853
|
+
"description": "Semi-transparent border for overlays and layered elements"
|
|
5254
5854
|
},
|
|
5255
5855
|
"borderColor-transparent": {
|
|
5256
5856
|
"key": "{borderColor.transparent}",
|
|
@@ -5266,6 +5866,7 @@
|
|
|
5266
5866
|
"original": {
|
|
5267
5867
|
"$value": "{base.color.transparent}",
|
|
5268
5868
|
"$type": "color",
|
|
5869
|
+
"$description": "Fully transparent border",
|
|
5269
5870
|
"$extensions": {
|
|
5270
5871
|
"org.primer.figma": {
|
|
5271
5872
|
"collection": "mode",
|
|
@@ -5279,7 +5880,8 @@
|
|
|
5279
5880
|
"attributes": {},
|
|
5280
5881
|
"path": ["borderColor", "transparent"],
|
|
5281
5882
|
"value": "#ffffff00",
|
|
5282
|
-
"type": "color"
|
|
5883
|
+
"type": "color",
|
|
5884
|
+
"description": "Fully transparent border"
|
|
5283
5885
|
},
|
|
5284
5886
|
"borderColor-upsell-emphasis": {
|
|
5285
5887
|
"key": "{borderColor.upsell.emphasis}",
|
|
@@ -5291,6 +5893,10 @@
|
|
|
5291
5893
|
"codeSyntax": {
|
|
5292
5894
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5293
5895
|
}
|
|
5896
|
+
},
|
|
5897
|
+
"org.primer.llm": {
|
|
5898
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5899
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5294
5900
|
}
|
|
5295
5901
|
},
|
|
5296
5902
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5298,6 +5904,7 @@
|
|
|
5298
5904
|
"original": {
|
|
5299
5905
|
"$value": "{borderColor.done.emphasis}",
|
|
5300
5906
|
"$type": "color",
|
|
5907
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5301
5908
|
"$extensions": {
|
|
5302
5909
|
"org.primer.figma": {
|
|
5303
5910
|
"collection": "mode",
|
|
@@ -5306,6 +5913,10 @@
|
|
|
5306
5913
|
"codeSyntax": {
|
|
5307
5914
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5308
5915
|
}
|
|
5916
|
+
},
|
|
5917
|
+
"org.primer.llm": {
|
|
5918
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5919
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5309
5920
|
}
|
|
5310
5921
|
},
|
|
5311
5922
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5314,7 +5925,8 @@
|
|
|
5314
5925
|
"attributes": {},
|
|
5315
5926
|
"path": ["borderColor", "upsell", "emphasis"],
|
|
5316
5927
|
"value": "#622cbc",
|
|
5317
|
-
"type": "color"
|
|
5928
|
+
"type": "color",
|
|
5929
|
+
"description": "Strong border for prominent upsell elements"
|
|
5318
5930
|
},
|
|
5319
5931
|
"borderColor-upsell-muted": {
|
|
5320
5932
|
"key": "{borderColor.upsell.muted}",
|
|
@@ -5326,6 +5938,10 @@
|
|
|
5326
5938
|
"codeSyntax": {
|
|
5327
5939
|
"web": "var(--borderColor-upsell-muted)"
|
|
5328
5940
|
}
|
|
5941
|
+
},
|
|
5942
|
+
"org.primer.llm": {
|
|
5943
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5944
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5329
5945
|
}
|
|
5330
5946
|
},
|
|
5331
5947
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5333,6 +5949,7 @@
|
|
|
5333
5949
|
"original": {
|
|
5334
5950
|
"$value": "{borderColor.done.muted}",
|
|
5335
5951
|
"$type": "color",
|
|
5952
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5336
5953
|
"$extensions": {
|
|
5337
5954
|
"org.primer.figma": {
|
|
5338
5955
|
"collection": "mode",
|
|
@@ -5341,6 +5958,10 @@
|
|
|
5341
5958
|
"codeSyntax": {
|
|
5342
5959
|
"web": "var(--borderColor-upsell-muted)"
|
|
5343
5960
|
}
|
|
5961
|
+
},
|
|
5962
|
+
"org.primer.llm": {
|
|
5963
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5964
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5344
5965
|
}
|
|
5345
5966
|
},
|
|
5346
5967
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -5349,7 +5970,8 @@
|
|
|
5349
5970
|
"attributes": {},
|
|
5350
5971
|
"path": ["borderColor", "upsell", "muted"],
|
|
5351
5972
|
"value": "#a371f7",
|
|
5352
|
-
"type": "color"
|
|
5973
|
+
"type": "color",
|
|
5974
|
+
"description": "Subtle border for upsell and promotional content"
|
|
5353
5975
|
},
|
|
5354
5976
|
"button-danger-bgColor-active": {
|
|
5355
5977
|
"key": "{button.danger.bgColor.active}",
|
|
@@ -36498,6 +37120,10 @@
|
|
|
36498
37120
|
"light-high-contrast": "#023b95",
|
|
36499
37121
|
"light-tritanopia-high-contrast": "#023b95",
|
|
36500
37122
|
"light-protanopia-deuteranopia-high-contrast": "#023b95"
|
|
37123
|
+
},
|
|
37124
|
+
"org.primer.llm": {
|
|
37125
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37126
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36501
37127
|
}
|
|
36502
37128
|
},
|
|
36503
37129
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36505,6 +37131,7 @@
|
|
|
36505
37131
|
"original": {
|
|
36506
37132
|
"$value": "{base.color.blue.6}",
|
|
36507
37133
|
"$type": "color",
|
|
37134
|
+
"$description": "Accent text for links and interactive elements",
|
|
36508
37135
|
"$extensions": {
|
|
36509
37136
|
"org.primer.figma": {
|
|
36510
37137
|
"collection": "mode",
|
|
@@ -36524,6 +37151,10 @@
|
|
|
36524
37151
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36525
37152
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36526
37153
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37154
|
+
},
|
|
37155
|
+
"org.primer.llm": {
|
|
37156
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37157
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36527
37158
|
}
|
|
36528
37159
|
},
|
|
36529
37160
|
"key": "{fgColor.accent}"
|
|
@@ -36532,7 +37163,8 @@
|
|
|
36532
37163
|
"attributes": {},
|
|
36533
37164
|
"path": ["fgColor", "accent"],
|
|
36534
37165
|
"value": "#023b95",
|
|
36535
|
-
"type": "color"
|
|
37166
|
+
"type": "color",
|
|
37167
|
+
"description": "Accent text for links and interactive elements"
|
|
36536
37168
|
},
|
|
36537
37169
|
"fgColor-attention": {
|
|
36538
37170
|
"key": "{fgColor.attention}",
|
|
@@ -36551,6 +37183,10 @@
|
|
|
36551
37183
|
"light-protanopia-deuteranopia-high-contrast": "#603700",
|
|
36552
37184
|
"light-tritanopia-high-contrast": "#603700",
|
|
36553
37185
|
"dark-dimmed-high-contrast": "#f0ce53"
|
|
37186
|
+
},
|
|
37187
|
+
"org.primer.llm": {
|
|
37188
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37189
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36554
37190
|
}
|
|
36555
37191
|
},
|
|
36556
37192
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36558,6 +37194,7 @@
|
|
|
36558
37194
|
"original": {
|
|
36559
37195
|
"$value": "{base.color.yellow.6}",
|
|
36560
37196
|
"$type": "color",
|
|
37197
|
+
"$description": "Attention text for warnings and caution states",
|
|
36561
37198
|
"$extensions": {
|
|
36562
37199
|
"org.primer.figma": {
|
|
36563
37200
|
"collection": "mode",
|
|
@@ -36573,6 +37210,10 @@
|
|
|
36573
37210
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36574
37211
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36575
37212
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37213
|
+
},
|
|
37214
|
+
"org.primer.llm": {
|
|
37215
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37216
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36576
37217
|
}
|
|
36577
37218
|
},
|
|
36578
37219
|
"key": "{fgColor.attention}"
|
|
@@ -36581,7 +37222,8 @@
|
|
|
36581
37222
|
"attributes": {},
|
|
36582
37223
|
"path": ["fgColor", "attention"],
|
|
36583
37224
|
"value": "#603700",
|
|
36584
|
-
"type": "color"
|
|
37225
|
+
"type": "color",
|
|
37226
|
+
"description": "Attention text for warnings and caution states"
|
|
36585
37227
|
},
|
|
36586
37228
|
"fgColor-black": {
|
|
36587
37229
|
"key": "{fgColor.black}",
|
|
@@ -36593,6 +37235,10 @@
|
|
|
36593
37235
|
},
|
|
36594
37236
|
"org.primer.overrides": {
|
|
36595
37237
|
"dark": "#ffffff"
|
|
37238
|
+
},
|
|
37239
|
+
"org.primer.llm": {
|
|
37240
|
+
"doNotUse": true,
|
|
37241
|
+
"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."
|
|
36596
37242
|
}
|
|
36597
37243
|
},
|
|
36598
37244
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36600,6 +37246,7 @@
|
|
|
36600
37246
|
"original": {
|
|
36601
37247
|
"$value": "{base.color.neutral.13}",
|
|
36602
37248
|
"$type": "color",
|
|
37249
|
+
"$description": "Pure black text",
|
|
36603
37250
|
"$extensions": {
|
|
36604
37251
|
"org.primer.figma": {
|
|
36605
37252
|
"collection": "mode",
|
|
@@ -36608,6 +37255,10 @@
|
|
|
36608
37255
|
},
|
|
36609
37256
|
"org.primer.overrides": {
|
|
36610
37257
|
"dark": "{base.color.neutral.0}"
|
|
37258
|
+
},
|
|
37259
|
+
"org.primer.llm": {
|
|
37260
|
+
"doNotUse": true,
|
|
37261
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36611
37262
|
}
|
|
36612
37263
|
},
|
|
36613
37264
|
"key": "{fgColor.black}"
|
|
@@ -36616,7 +37267,8 @@
|
|
|
36616
37267
|
"attributes": {},
|
|
36617
37268
|
"path": ["fgColor", "black"],
|
|
36618
37269
|
"value": "#010409",
|
|
36619
|
-
"type": "color"
|
|
37270
|
+
"type": "color",
|
|
37271
|
+
"description": "Pure black text"
|
|
36620
37272
|
},
|
|
36621
37273
|
"fgColor-closed": {
|
|
36622
37274
|
"key": "{fgColor.closed}",
|
|
@@ -36638,6 +37290,10 @@
|
|
|
36638
37290
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
36639
37291
|
"light-tritanopia": "#393f46",
|
|
36640
37292
|
"light-tritanopia-high-contrast": "#393f46"
|
|
37293
|
+
},
|
|
37294
|
+
"org.primer.llm": {
|
|
37295
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37296
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36641
37297
|
}
|
|
36642
37298
|
},
|
|
36643
37299
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36645,6 +37301,7 @@
|
|
|
36645
37301
|
"original": {
|
|
36646
37302
|
"$value": "{fgColor.muted}",
|
|
36647
37303
|
"$type": "color",
|
|
37304
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36648
37305
|
"$extensions": {
|
|
36649
37306
|
"org.primer.figma": {
|
|
36650
37307
|
"collection": "mode",
|
|
@@ -36663,6 +37320,10 @@
|
|
|
36663
37320
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36664
37321
|
"light-tritanopia": "{fgColor.muted}",
|
|
36665
37322
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37323
|
+
},
|
|
37324
|
+
"org.primer.llm": {
|
|
37325
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37326
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36666
37327
|
}
|
|
36667
37328
|
},
|
|
36668
37329
|
"key": "{fgColor.closed}"
|
|
@@ -36671,7 +37332,8 @@
|
|
|
36671
37332
|
"attributes": {},
|
|
36672
37333
|
"path": ["fgColor", "closed"],
|
|
36673
37334
|
"value": "#393f46",
|
|
36674
|
-
"type": "color"
|
|
37335
|
+
"type": "color",
|
|
37336
|
+
"description": "Text color for closed state indicators (issues, PRs)"
|
|
36675
37337
|
},
|
|
36676
37338
|
"fgColor-danger": {
|
|
36677
37339
|
"key": "{fgColor.danger}",
|
|
@@ -36695,6 +37357,10 @@
|
|
|
36695
37357
|
"dark-tritanopia-high-contrast": "#ee5a5d",
|
|
36696
37358
|
"light-high-contrast": "#86061d",
|
|
36697
37359
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37360
|
+
},
|
|
37361
|
+
"org.primer.llm": {
|
|
37362
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37363
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36698
37364
|
}
|
|
36699
37365
|
},
|
|
36700
37366
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36702,6 +37368,7 @@
|
|
|
36702
37368
|
"original": {
|
|
36703
37369
|
"$value": "{base.color.red.6}",
|
|
36704
37370
|
"$type": "color",
|
|
37371
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36705
37372
|
"$extensions": {
|
|
36706
37373
|
"org.primer.figma": {
|
|
36707
37374
|
"collection": "mode",
|
|
@@ -36722,6 +37389,10 @@
|
|
|
36722
37389
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36723
37390
|
"light-high-contrast": "{base.color.red.6}",
|
|
36724
37391
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
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."
|
|
36725
37396
|
}
|
|
36726
37397
|
},
|
|
36727
37398
|
"key": "{fgColor.danger}"
|
|
@@ -36730,7 +37401,8 @@
|
|
|
36730
37401
|
"attributes": {},
|
|
36731
37402
|
"path": ["fgColor", "danger"],
|
|
36732
37403
|
"value": "#86061d",
|
|
36733
|
-
"type": "color"
|
|
37404
|
+
"type": "color",
|
|
37405
|
+
"description": "Danger text for errors and destructive actions"
|
|
36734
37406
|
},
|
|
36735
37407
|
"fgColor-default": {
|
|
36736
37408
|
"key": "{fgColor.default}",
|
|
@@ -36748,8 +37420,12 @@
|
|
|
36748
37420
|
"dark-high-contrast": "#010409",
|
|
36749
37421
|
"dark-tritanopia-high-contrast": "#010409",
|
|
36750
37422
|
"dark-protanopia-deuteranopia-high-contrast": "#010409",
|
|
36751
|
-
"dark-dimmed": "#
|
|
37423
|
+
"dark-dimmed": "#25292e",
|
|
36752
37424
|
"dark-dimmed-high-contrast": "#25292e"
|
|
37425
|
+
},
|
|
37426
|
+
"org.primer.llm": {
|
|
37427
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37428
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36753
37429
|
}
|
|
36754
37430
|
},
|
|
36755
37431
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36757,6 +37433,7 @@
|
|
|
36757
37433
|
"original": {
|
|
36758
37434
|
"$value": "{base.color.neutral.13}",
|
|
36759
37435
|
"$type": "color",
|
|
37436
|
+
"$description": "Default text color for primary content and headings",
|
|
36760
37437
|
"$extensions": {
|
|
36761
37438
|
"org.primer.figma": {
|
|
36762
37439
|
"collection": "mode",
|
|
@@ -36771,8 +37448,12 @@
|
|
|
36771
37448
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36772
37449
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36773
37450
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36774
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37451
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36775
37452
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37453
|
+
},
|
|
37454
|
+
"org.primer.llm": {
|
|
37455
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37456
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36776
37457
|
}
|
|
36777
37458
|
},
|
|
36778
37459
|
"key": "{fgColor.default}"
|
|
@@ -36781,7 +37462,8 @@
|
|
|
36781
37462
|
"attributes": {},
|
|
36782
37463
|
"path": ["fgColor", "default"],
|
|
36783
37464
|
"value": "#010409",
|
|
36784
|
-
"type": "color"
|
|
37465
|
+
"type": "color",
|
|
37466
|
+
"description": "Default text color for primary content and headings"
|
|
36785
37467
|
},
|
|
36786
37468
|
"fgColor-disabled": {
|
|
36787
37469
|
"key": "{fgColor.disabled}",
|
|
@@ -36806,6 +37488,10 @@
|
|
|
36806
37488
|
"dark-high-contrast": "#818b98",
|
|
36807
37489
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
36808
37490
|
"dark-protanopia-deuteranopia-high-contrast": "#818b98"
|
|
37491
|
+
},
|
|
37492
|
+
"org.primer.llm": {
|
|
37493
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37494
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36809
37495
|
}
|
|
36810
37496
|
},
|
|
36811
37497
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36813,6 +37499,7 @@
|
|
|
36813
37499
|
"original": {
|
|
36814
37500
|
"$value": "{base.color.neutral.9}",
|
|
36815
37501
|
"$type": "color",
|
|
37502
|
+
"$description": "Text color for disabled interactive elements",
|
|
36816
37503
|
"$extensions": {
|
|
36817
37504
|
"org.primer.figma": {
|
|
36818
37505
|
"collection": "mode",
|
|
@@ -36834,6 +37521,10 @@
|
|
|
36834
37521
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36835
37522
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36836
37523
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37524
|
+
},
|
|
37525
|
+
"org.primer.llm": {
|
|
37526
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37527
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36837
37528
|
}
|
|
36838
37529
|
},
|
|
36839
37530
|
"key": "{fgColor.disabled}"
|
|
@@ -36842,7 +37533,8 @@
|
|
|
36842
37533
|
"attributes": {},
|
|
36843
37534
|
"path": ["fgColor", "disabled"],
|
|
36844
37535
|
"value": "#59636e",
|
|
36845
|
-
"type": "color"
|
|
37536
|
+
"type": "color",
|
|
37537
|
+
"description": "Text color for disabled interactive elements"
|
|
36846
37538
|
},
|
|
36847
37539
|
"fgColor-done": {
|
|
36848
37540
|
"key": "{fgColor.done}",
|
|
@@ -36864,6 +37556,10 @@
|
|
|
36864
37556
|
"light-high-contrast": "#512598",
|
|
36865
37557
|
"light-protanopia-deuteranopia-high-contrast": "#512598",
|
|
36866
37558
|
"light-tritanopia-high-contrast": "#512598"
|
|
37559
|
+
},
|
|
37560
|
+
"org.primer.llm": {
|
|
37561
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37562
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36867
37563
|
}
|
|
36868
37564
|
},
|
|
36869
37565
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36871,6 +37567,7 @@
|
|
|
36871
37567
|
"original": {
|
|
36872
37568
|
"$value": "{base.color.purple.6}",
|
|
36873
37569
|
"$type": "color",
|
|
37570
|
+
"$description": "Text color for completed/done state indicators",
|
|
36874
37571
|
"$extensions": {
|
|
36875
37572
|
"org.primer.figma": {
|
|
36876
37573
|
"collection": "mode",
|
|
@@ -36889,6 +37586,10 @@
|
|
|
36889
37586
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36890
37587
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36891
37588
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37589
|
+
},
|
|
37590
|
+
"org.primer.llm": {
|
|
37591
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37592
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36892
37593
|
}
|
|
36893
37594
|
},
|
|
36894
37595
|
"key": "{fgColor.done}"
|
|
@@ -36897,7 +37598,8 @@
|
|
|
36897
37598
|
"attributes": {},
|
|
36898
37599
|
"path": ["fgColor", "done"],
|
|
36899
37600
|
"value": "#512598",
|
|
36900
|
-
"type": "color"
|
|
37601
|
+
"type": "color",
|
|
37602
|
+
"description": "Text color for completed/done state indicators"
|
|
36901
37603
|
},
|
|
36902
37604
|
"fgColor-draft": {
|
|
36903
37605
|
"key": "{fgColor.draft}",
|
|
@@ -36909,6 +37611,10 @@
|
|
|
36909
37611
|
"codeSyntax": {
|
|
36910
37612
|
"web": "var(--fgColor-draft)"
|
|
36911
37613
|
}
|
|
37614
|
+
},
|
|
37615
|
+
"org.primer.llm": {
|
|
37616
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37617
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36912
37618
|
}
|
|
36913
37619
|
},
|
|
36914
37620
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36916,6 +37622,7 @@
|
|
|
36916
37622
|
"original": {
|
|
36917
37623
|
"$value": "{fgColor.neutral}",
|
|
36918
37624
|
"$type": "color",
|
|
37625
|
+
"$description": "Text color for draft state indicators",
|
|
36919
37626
|
"$extensions": {
|
|
36920
37627
|
"org.primer.figma": {
|
|
36921
37628
|
"collection": "mode",
|
|
@@ -36924,6 +37631,10 @@
|
|
|
36924
37631
|
"codeSyntax": {
|
|
36925
37632
|
"web": "var(--fgColor-draft)"
|
|
36926
37633
|
}
|
|
37634
|
+
},
|
|
37635
|
+
"org.primer.llm": {
|
|
37636
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37637
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36927
37638
|
}
|
|
36928
37639
|
},
|
|
36929
37640
|
"key": "{fgColor.draft}"
|
|
@@ -36932,7 +37643,8 @@
|
|
|
36932
37643
|
"attributes": {},
|
|
36933
37644
|
"path": ["fgColor", "draft"],
|
|
36934
37645
|
"value": "#393f46",
|
|
36935
|
-
"type": "color"
|
|
37646
|
+
"type": "color",
|
|
37647
|
+
"description": "Text color for draft state indicators"
|
|
36936
37648
|
},
|
|
36937
37649
|
"fgColor-link": {
|
|
36938
37650
|
"key": "{fgColor.link}",
|
|
@@ -36944,6 +37656,10 @@
|
|
|
36944
37656
|
"codeSyntax": {
|
|
36945
37657
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36946
37658
|
}
|
|
37659
|
+
},
|
|
37660
|
+
"org.primer.llm": {
|
|
37661
|
+
"usage": ["link-text", "hyperlink"],
|
|
37662
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36947
37663
|
}
|
|
36948
37664
|
},
|
|
36949
37665
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36951,6 +37667,7 @@
|
|
|
36951
37667
|
"original": {
|
|
36952
37668
|
"$value": "{fgColor.accent}",
|
|
36953
37669
|
"$type": "color",
|
|
37670
|
+
"$description": "Text color for hyperlinks",
|
|
36954
37671
|
"$extensions": {
|
|
36955
37672
|
"org.primer.figma": {
|
|
36956
37673
|
"collection": "mode",
|
|
@@ -36959,6 +37676,10 @@
|
|
|
36959
37676
|
"codeSyntax": {
|
|
36960
37677
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36961
37678
|
}
|
|
37679
|
+
},
|
|
37680
|
+
"org.primer.llm": {
|
|
37681
|
+
"usage": ["link-text", "hyperlink"],
|
|
37682
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36962
37683
|
}
|
|
36963
37684
|
},
|
|
36964
37685
|
"key": "{fgColor.link}"
|
|
@@ -36967,7 +37688,8 @@
|
|
|
36967
37688
|
"attributes": {},
|
|
36968
37689
|
"path": ["fgColor", "link"],
|
|
36969
37690
|
"value": "#023b95",
|
|
36970
|
-
"type": "color"
|
|
37691
|
+
"type": "color",
|
|
37692
|
+
"description": "Text color for hyperlinks"
|
|
36971
37693
|
},
|
|
36972
37694
|
"fgColor-muted": {
|
|
36973
37695
|
"key": "{fgColor.muted}",
|
|
@@ -36988,6 +37710,10 @@
|
|
|
36988
37710
|
"dark-dimmed-high-contrast": "#454c54",
|
|
36989
37711
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36990
37712
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
37713
|
+
},
|
|
37714
|
+
"org.primer.llm": {
|
|
37715
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37716
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
36991
37717
|
}
|
|
36992
37718
|
},
|
|
36993
37719
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36995,6 +37721,7 @@
|
|
|
36995
37721
|
"original": {
|
|
36996
37722
|
"$value": "{base.color.neutral.11}",
|
|
36997
37723
|
"$type": "color",
|
|
37724
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36998
37725
|
"$extensions": {
|
|
36999
37726
|
"org.primer.figma": {
|
|
37000
37727
|
"collection": "mode",
|
|
@@ -37012,6 +37739,10 @@
|
|
|
37012
37739
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37013
37740
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37014
37741
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37742
|
+
},
|
|
37743
|
+
"org.primer.llm": {
|
|
37744
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37745
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37015
37746
|
}
|
|
37016
37747
|
},
|
|
37017
37748
|
"key": "{fgColor.muted}"
|
|
@@ -37020,7 +37751,8 @@
|
|
|
37020
37751
|
"attributes": {},
|
|
37021
37752
|
"path": ["fgColor", "muted"],
|
|
37022
37753
|
"value": "#393f46",
|
|
37023
|
-
"type": "color"
|
|
37754
|
+
"type": "color",
|
|
37755
|
+
"description": "Muted text for secondary content and less important information"
|
|
37024
37756
|
},
|
|
37025
37757
|
"fgColor-neutral": {
|
|
37026
37758
|
"key": "{fgColor.neutral}",
|
|
@@ -37038,6 +37770,10 @@
|
|
|
37038
37770
|
"dark-dimmed-high-contrast": "#393f46",
|
|
37039
37771
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
37040
37772
|
"dark-protanopia-deuteranopia-high-contrast": "#393f46"
|
|
37773
|
+
},
|
|
37774
|
+
"org.primer.llm": {
|
|
37775
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37776
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37041
37777
|
}
|
|
37042
37778
|
},
|
|
37043
37779
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37045,6 +37781,7 @@
|
|
|
37045
37781
|
"original": {
|
|
37046
37782
|
"$value": "{base.color.neutral.11}",
|
|
37047
37783
|
"$type": "color",
|
|
37784
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37048
37785
|
"$extensions": {
|
|
37049
37786
|
"org.primer.figma": {
|
|
37050
37787
|
"collection": "mode",
|
|
@@ -37059,6 +37796,10 @@
|
|
|
37059
37796
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37060
37797
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37061
37798
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37799
|
+
},
|
|
37800
|
+
"org.primer.llm": {
|
|
37801
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37802
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37062
37803
|
}
|
|
37063
37804
|
},
|
|
37064
37805
|
"key": "{fgColor.neutral}"
|
|
@@ -37067,7 +37808,8 @@
|
|
|
37067
37808
|
"attributes": {},
|
|
37068
37809
|
"path": ["fgColor", "neutral"],
|
|
37069
37810
|
"value": "#393f46",
|
|
37070
|
-
"type": "color"
|
|
37811
|
+
"type": "color",
|
|
37812
|
+
"description": "Neutral semantic text for icons and secondary elements"
|
|
37071
37813
|
},
|
|
37072
37814
|
"fgColor-onEmphasis": {
|
|
37073
37815
|
"key": "{fgColor.onEmphasis}",
|
|
@@ -37084,6 +37826,10 @@
|
|
|
37084
37826
|
"dark": "#010409",
|
|
37085
37827
|
"dark-dimmed": "#25292e",
|
|
37086
37828
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37829
|
+
},
|
|
37830
|
+
"org.primer.llm": {
|
|
37831
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37832
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37087
37833
|
}
|
|
37088
37834
|
},
|
|
37089
37835
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37091,6 +37837,7 @@
|
|
|
37091
37837
|
"original": {
|
|
37092
37838
|
"$value": "{base.color.neutral.0}",
|
|
37093
37839
|
"$type": "color",
|
|
37840
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37094
37841
|
"$extensions": {
|
|
37095
37842
|
"org.primer.figma": {
|
|
37096
37843
|
"collection": "mode",
|
|
@@ -37104,6 +37851,10 @@
|
|
|
37104
37851
|
"dark": "{base.color.neutral.13}",
|
|
37105
37852
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37106
37853
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37854
|
+
},
|
|
37855
|
+
"org.primer.llm": {
|
|
37856
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37857
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37107
37858
|
}
|
|
37108
37859
|
},
|
|
37109
37860
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37112,7 +37863,8 @@
|
|
|
37112
37863
|
"attributes": {},
|
|
37113
37864
|
"path": ["fgColor", "onEmphasis"],
|
|
37114
37865
|
"value": "#ffffff",
|
|
37115
|
-
"type": "color"
|
|
37866
|
+
"type": "color",
|
|
37867
|
+
"description": "Text color for use on emphasis backgrounds"
|
|
37116
37868
|
},
|
|
37117
37869
|
"fgColor-onInverse": {
|
|
37118
37870
|
"key": "{fgColor.onInverse}",
|
|
@@ -37121,6 +37873,10 @@
|
|
|
37121
37873
|
"collection": "mode",
|
|
37122
37874
|
"group": "semantic",
|
|
37123
37875
|
"scopes": ["fgColor"]
|
|
37876
|
+
},
|
|
37877
|
+
"org.primer.llm": {
|
|
37878
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37879
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37124
37880
|
}
|
|
37125
37881
|
},
|
|
37126
37882
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37128,11 +37884,16 @@
|
|
|
37128
37884
|
"original": {
|
|
37129
37885
|
"$value": "{base.color.neutral.0}",
|
|
37130
37886
|
"$type": "color",
|
|
37887
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37131
37888
|
"$extensions": {
|
|
37132
37889
|
"org.primer.figma": {
|
|
37133
37890
|
"collection": "mode",
|
|
37134
37891
|
"group": "semantic",
|
|
37135
37892
|
"scopes": ["fgColor"]
|
|
37893
|
+
},
|
|
37894
|
+
"org.primer.llm": {
|
|
37895
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37896
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37136
37897
|
}
|
|
37137
37898
|
},
|
|
37138
37899
|
"key": "{fgColor.onInverse}"
|
|
@@ -37141,7 +37902,8 @@
|
|
|
37141
37902
|
"attributes": {},
|
|
37142
37903
|
"path": ["fgColor", "onInverse"],
|
|
37143
37904
|
"value": "#ffffff",
|
|
37144
|
-
"type": "color"
|
|
37905
|
+
"type": "color",
|
|
37906
|
+
"description": "Text color for use on inverse backgrounds"
|
|
37145
37907
|
},
|
|
37146
37908
|
"fgColor-open": {
|
|
37147
37909
|
"key": "{fgColor.open}",
|
|
@@ -37163,6 +37925,10 @@
|
|
|
37163
37925
|
"dark-tritanopia-high-contrast": "#ff8e8a",
|
|
37164
37926
|
"light-tritanopia": "#a0111f",
|
|
37165
37927
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37928
|
+
},
|
|
37929
|
+
"org.primer.llm": {
|
|
37930
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37931
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37166
37932
|
}
|
|
37167
37933
|
},
|
|
37168
37934
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37170,6 +37936,7 @@
|
|
|
37170
37936
|
"original": {
|
|
37171
37937
|
"$value": "{base.color.red.6}",
|
|
37172
37938
|
"$type": "color",
|
|
37939
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37173
37940
|
"$extensions": {
|
|
37174
37941
|
"org.primer.figma": {
|
|
37175
37942
|
"collection": "mode",
|
|
@@ -37188,6 +37955,10 @@
|
|
|
37188
37955
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37189
37956
|
"light-tritanopia": "{base.color.red.5}",
|
|
37190
37957
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37958
|
+
},
|
|
37959
|
+
"org.primer.llm": {
|
|
37960
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37961
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37191
37962
|
}
|
|
37192
37963
|
},
|
|
37193
37964
|
"key": "{fgColor.open}"
|
|
@@ -37196,7 +37967,8 @@
|
|
|
37196
37967
|
"attributes": {},
|
|
37197
37968
|
"path": ["fgColor", "open"],
|
|
37198
37969
|
"value": "#86061d",
|
|
37199
|
-
"type": "color"
|
|
37970
|
+
"type": "color",
|
|
37971
|
+
"description": "Text color for open state indicators (issues, PRs)"
|
|
37200
37972
|
},
|
|
37201
37973
|
"fgColor-severe": {
|
|
37202
37974
|
"key": "{fgColor.severe}",
|
|
@@ -37220,6 +37992,10 @@
|
|
|
37220
37992
|
"light-tritanopia": "#a0111f",
|
|
37221
37993
|
"light-tritanopia-high-contrast": "#86061d",
|
|
37222
37994
|
"light-protanopia-deuteranopia-high-contrast": "#702c00"
|
|
37995
|
+
},
|
|
37996
|
+
"org.primer.llm": {
|
|
37997
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
37998
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37223
37999
|
}
|
|
37224
38000
|
},
|
|
37225
38001
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37227,6 +38003,7 @@
|
|
|
37227
38003
|
"original": {
|
|
37228
38004
|
"$value": "{base.color.red.6}",
|
|
37229
38005
|
"$type": "color",
|
|
38006
|
+
"$description": "Severe text for high-priority warnings",
|
|
37230
38007
|
"$extensions": {
|
|
37231
38008
|
"org.primer.figma": {
|
|
37232
38009
|
"collection": "mode",
|
|
@@ -37247,6 +38024,10 @@
|
|
|
37247
38024
|
"light-tritanopia": "{base.color.red.5}",
|
|
37248
38025
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37249
38026
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
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."
|
|
37250
38031
|
}
|
|
37251
38032
|
},
|
|
37252
38033
|
"key": "{fgColor.severe}"
|
|
@@ -37255,7 +38036,8 @@
|
|
|
37255
38036
|
"attributes": {},
|
|
37256
38037
|
"path": ["fgColor", "severe"],
|
|
37257
38038
|
"value": "#86061d",
|
|
37258
|
-
"type": "color"
|
|
38039
|
+
"type": "color",
|
|
38040
|
+
"description": "Severe text for high-priority warnings"
|
|
37259
38041
|
},
|
|
37260
38042
|
"fgColor-sponsors": {
|
|
37261
38043
|
"key": "{fgColor.sponsors}",
|
|
@@ -37277,6 +38059,10 @@
|
|
|
37277
38059
|
"light-high-contrast": "#7d0c57",
|
|
37278
38060
|
"light-protanopia-deuteranopia-high-contrast": "#7d0c57",
|
|
37279
38061
|
"light-tritanopia-high-contrast": "#7d0c57"
|
|
38062
|
+
},
|
|
38063
|
+
"org.primer.llm": {
|
|
38064
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38065
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37280
38066
|
}
|
|
37281
38067
|
},
|
|
37282
38068
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37284,6 +38070,7 @@
|
|
|
37284
38070
|
"original": {
|
|
37285
38071
|
"$value": "{base.color.pink.6}",
|
|
37286
38072
|
"$type": "color",
|
|
38073
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37287
38074
|
"$extensions": {
|
|
37288
38075
|
"org.primer.figma": {
|
|
37289
38076
|
"collection": "mode",
|
|
@@ -37302,6 +38089,10 @@
|
|
|
37302
38089
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37303
38090
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37304
38091
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38092
|
+
},
|
|
38093
|
+
"org.primer.llm": {
|
|
38094
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38095
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37305
38096
|
}
|
|
37306
38097
|
},
|
|
37307
38098
|
"key": "{fgColor.sponsors}"
|
|
@@ -37310,7 +38101,8 @@
|
|
|
37310
38101
|
"attributes": {},
|
|
37311
38102
|
"path": ["fgColor", "sponsors"],
|
|
37312
38103
|
"value": "#7d0c57",
|
|
37313
|
-
"type": "color"
|
|
38104
|
+
"type": "color",
|
|
38105
|
+
"description": "Text color for GitHub Sponsors content"
|
|
37314
38106
|
},
|
|
37315
38107
|
"fgColor-success": {
|
|
37316
38108
|
"key": "{fgColor.success}",
|
|
@@ -37336,6 +38128,10 @@
|
|
|
37336
38128
|
"dark-tritanopia-high-contrast": "#67b3fd",
|
|
37337
38129
|
"light-tritanopia": "#0349b4",
|
|
37338
38130
|
"light-tritanopia-high-contrast": "#023b95"
|
|
38131
|
+
},
|
|
38132
|
+
"org.primer.llm": {
|
|
38133
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38134
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37339
38135
|
}
|
|
37340
38136
|
},
|
|
37341
38137
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37343,6 +38139,7 @@
|
|
|
37343
38139
|
"original": {
|
|
37344
38140
|
"$value": "{base.color.blue.6}",
|
|
37345
38141
|
"$type": "color",
|
|
38142
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37346
38143
|
"$extensions": {
|
|
37347
38144
|
"org.primer.figma": {
|
|
37348
38145
|
"collection": "mode",
|
|
@@ -37365,6 +38162,10 @@
|
|
|
37365
38162
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37366
38163
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37367
38164
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38165
|
+
},
|
|
38166
|
+
"org.primer.llm": {
|
|
38167
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38168
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37368
38169
|
}
|
|
37369
38170
|
},
|
|
37370
38171
|
"key": "{fgColor.success}"
|
|
@@ -37373,7 +38174,8 @@
|
|
|
37373
38174
|
"attributes": {},
|
|
37374
38175
|
"path": ["fgColor", "success"],
|
|
37375
38176
|
"value": "#023b95",
|
|
37376
|
-
"type": "color"
|
|
38177
|
+
"type": "color",
|
|
38178
|
+
"description": "Success text for positive feedback and completed states"
|
|
37377
38179
|
},
|
|
37378
38180
|
"fgColor-upsell": {
|
|
37379
38181
|
"key": "{fgColor.upsell}",
|
|
@@ -37385,6 +38187,10 @@
|
|
|
37385
38187
|
"codeSyntax": {
|
|
37386
38188
|
"web": "var(--fgColor-upsell)"
|
|
37387
38189
|
}
|
|
38190
|
+
},
|
|
38191
|
+
"org.primer.llm": {
|
|
38192
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38193
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37388
38194
|
}
|
|
37389
38195
|
},
|
|
37390
38196
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37392,6 +38198,7 @@
|
|
|
37392
38198
|
"original": {
|
|
37393
38199
|
"$value": "{fgColor.done}",
|
|
37394
38200
|
"$type": "color",
|
|
38201
|
+
"$description": "Text color for upsell and promotional content",
|
|
37395
38202
|
"$extensions": {
|
|
37396
38203
|
"org.primer.figma": {
|
|
37397
38204
|
"collection": "mode",
|
|
@@ -37400,6 +38207,10 @@
|
|
|
37400
38207
|
"codeSyntax": {
|
|
37401
38208
|
"web": "var(--fgColor-upsell)"
|
|
37402
38209
|
}
|
|
38210
|
+
},
|
|
38211
|
+
"org.primer.llm": {
|
|
38212
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38213
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37403
38214
|
}
|
|
37404
38215
|
},
|
|
37405
38216
|
"key": "{fgColor.upsell}"
|
|
@@ -37408,7 +38219,8 @@
|
|
|
37408
38219
|
"attributes": {},
|
|
37409
38220
|
"path": ["fgColor", "upsell"],
|
|
37410
38221
|
"value": "#512598",
|
|
37411
|
-
"type": "color"
|
|
38222
|
+
"type": "color",
|
|
38223
|
+
"description": "Text color for upsell and promotional content"
|
|
37412
38224
|
},
|
|
37413
38225
|
"fgColor-white": {
|
|
37414
38226
|
"key": "{fgColor.white}",
|
|
@@ -37420,6 +38232,10 @@
|
|
|
37420
38232
|
},
|
|
37421
38233
|
"org.primer.overrides": {
|
|
37422
38234
|
"dark": "#010409"
|
|
38235
|
+
},
|
|
38236
|
+
"org.primer.llm": {
|
|
38237
|
+
"doNotUse": true,
|
|
38238
|
+
"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."
|
|
37423
38239
|
}
|
|
37424
38240
|
},
|
|
37425
38241
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37427,6 +38243,7 @@
|
|
|
37427
38243
|
"original": {
|
|
37428
38244
|
"$value": "{base.color.neutral.0}",
|
|
37429
38245
|
"$type": "color",
|
|
38246
|
+
"$description": "Pure white text",
|
|
37430
38247
|
"$extensions": {
|
|
37431
38248
|
"org.primer.figma": {
|
|
37432
38249
|
"collection": "mode",
|
|
@@ -37435,6 +38252,10 @@
|
|
|
37435
38252
|
},
|
|
37436
38253
|
"org.primer.overrides": {
|
|
37437
38254
|
"dark": "{base.color.neutral.13}"
|
|
38255
|
+
},
|
|
38256
|
+
"org.primer.llm": {
|
|
38257
|
+
"doNotUse": true,
|
|
38258
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37438
38259
|
}
|
|
37439
38260
|
},
|
|
37440
38261
|
"key": "{fgColor.white}"
|
|
@@ -37443,10 +38264,17 @@
|
|
|
37443
38264
|
"attributes": {},
|
|
37444
38265
|
"path": ["fgColor", "white"],
|
|
37445
38266
|
"value": "#ffffff",
|
|
37446
|
-
"type": "color"
|
|
38267
|
+
"type": "color",
|
|
38268
|
+
"description": "Pure white text"
|
|
37447
38269
|
},
|
|
37448
38270
|
"focus-outline": {
|
|
37449
38271
|
"key": "{focus.outline}",
|
|
38272
|
+
"$extensions": {
|
|
38273
|
+
"org.primer.llm": {
|
|
38274
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38275
|
+
"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."
|
|
38276
|
+
}
|
|
38277
|
+
},
|
|
37450
38278
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37451
38279
|
"isSource": true,
|
|
37452
38280
|
"original": {
|
|
@@ -37456,13 +38284,21 @@
|
|
|
37456
38284
|
"width": "2px"
|
|
37457
38285
|
},
|
|
37458
38286
|
"$type": "border",
|
|
38287
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38288
|
+
"$extensions": {
|
|
38289
|
+
"org.primer.llm": {
|
|
38290
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38291
|
+
"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."
|
|
38292
|
+
}
|
|
38293
|
+
},
|
|
37459
38294
|
"key": "{focus.outline}"
|
|
37460
38295
|
},
|
|
37461
38296
|
"name": "focus-outline",
|
|
37462
38297
|
"attributes": {},
|
|
37463
38298
|
"path": ["focus", "outline"],
|
|
37464
38299
|
"value": "2px solid #0349b4",
|
|
37465
|
-
"type": "border"
|
|
38300
|
+
"type": "border",
|
|
38301
|
+
"description": "Focus ring outline for keyboard navigation and accessibility."
|
|
37466
38302
|
},
|
|
37467
38303
|
"focus-outlineColor": {
|
|
37468
38304
|
"key": "{focus.outlineColor}",
|
|
@@ -37471,6 +38307,10 @@
|
|
|
37471
38307
|
"collection": "mode",
|
|
37472
38308
|
"group": "component (internal)",
|
|
37473
38309
|
"scopes": ["borderColor", "effectColor"]
|
|
38310
|
+
},
|
|
38311
|
+
"org.primer.llm": {
|
|
38312
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38313
|
+
"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."
|
|
37474
38314
|
}
|
|
37475
38315
|
},
|
|
37476
38316
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37478,11 +38318,16 @@
|
|
|
37478
38318
|
"original": {
|
|
37479
38319
|
"$value": "{borderColor.accent.emphasis}",
|
|
37480
38320
|
"$type": "color",
|
|
38321
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37481
38322
|
"$extensions": {
|
|
37482
38323
|
"org.primer.figma": {
|
|
37483
38324
|
"collection": "mode",
|
|
37484
38325
|
"group": "component (internal)",
|
|
37485
38326
|
"scopes": ["borderColor", "effectColor"]
|
|
38327
|
+
},
|
|
38328
|
+
"org.primer.llm": {
|
|
38329
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38330
|
+
"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."
|
|
37486
38331
|
}
|
|
37487
38332
|
},
|
|
37488
38333
|
"key": "{focus.outlineColor}"
|
|
@@ -37491,7 +38336,8 @@
|
|
|
37491
38336
|
"attributes": {},
|
|
37492
38337
|
"path": ["focus", "outlineColor"],
|
|
37493
38338
|
"value": "#0349b4",
|
|
37494
|
-
"type": "color"
|
|
38339
|
+
"type": "color",
|
|
38340
|
+
"description": "Outline color for focus states on interactive elements"
|
|
37495
38341
|
},
|
|
37496
38342
|
"header-bgColor": {
|
|
37497
38343
|
"key": "{header.bgColor}",
|
|
@@ -46544,6 +47390,10 @@
|
|
|
46544
47390
|
"isSource": true,
|
|
46545
47391
|
"$type": "color"
|
|
46546
47392
|
}
|
|
47393
|
+
},
|
|
47394
|
+
"org.primer.llm": {
|
|
47395
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47396
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46547
47397
|
}
|
|
46548
47398
|
},
|
|
46549
47399
|
"alpha": 0.2,
|
|
@@ -46552,6 +47402,7 @@
|
|
|
46552
47402
|
"original": {
|
|
46553
47403
|
"$value": "{bgColor.accent.emphasis}",
|
|
46554
47404
|
"$type": "color",
|
|
47405
|
+
"$description": "Background color for text selection highlights",
|
|
46555
47406
|
"$extensions": {
|
|
46556
47407
|
"org.primer.figma": {
|
|
46557
47408
|
"collection": "mode",
|
|
@@ -46566,6 +47417,10 @@
|
|
|
46566
47417
|
"isSource": true,
|
|
46567
47418
|
"$type": "color"
|
|
46568
47419
|
}
|
|
47420
|
+
},
|
|
47421
|
+
"org.primer.llm": {
|
|
47422
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47423
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46569
47424
|
}
|
|
46570
47425
|
},
|
|
46571
47426
|
"alpha": 0.2,
|
|
@@ -46575,7 +47430,8 @@
|
|
|
46575
47430
|
"attributes": {},
|
|
46576
47431
|
"path": ["selection", "bgColor"],
|
|
46577
47432
|
"value": "#0349b433",
|
|
46578
|
-
"type": "color"
|
|
47433
|
+
"type": "color",
|
|
47434
|
+
"description": "Background color for text selection highlights"
|
|
46579
47435
|
},
|
|
46580
47436
|
"shadow-floating-large": {
|
|
46581
47437
|
"key": "{shadow.floating.large}",
|
|
@@ -46608,6 +47464,10 @@
|
|
|
46608
47464
|
"isSource": true,
|
|
46609
47465
|
"$type": "shadow"
|
|
46610
47466
|
}
|
|
47467
|
+
},
|
|
47468
|
+
"org.primer.llm": {
|
|
47469
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47470
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46611
47471
|
}
|
|
46612
47472
|
},
|
|
46613
47473
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46632,6 +47492,7 @@
|
|
|
46632
47492
|
}
|
|
46633
47493
|
],
|
|
46634
47494
|
"$type": "shadow",
|
|
47495
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46635
47496
|
"$extensions": {
|
|
46636
47497
|
"org.primer.figma": {
|
|
46637
47498
|
"collection": "mode",
|
|
@@ -46661,6 +47522,10 @@
|
|
|
46661
47522
|
"isSource": true,
|
|
46662
47523
|
"$type": "shadow"
|
|
46663
47524
|
}
|
|
47525
|
+
},
|
|
47526
|
+
"org.primer.llm": {
|
|
47527
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47528
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46664
47529
|
}
|
|
46665
47530
|
},
|
|
46666
47531
|
"key": "{shadow.floating.large}"
|
|
@@ -46669,7 +47534,8 @@
|
|
|
46669
47534
|
"attributes": {},
|
|
46670
47535
|
"path": ["shadow", "floating", "large"],
|
|
46671
47536
|
"value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
|
|
46672
|
-
"type": "shadow"
|
|
47537
|
+
"type": "shadow",
|
|
47538
|
+
"description": "Large floating shadow for modals and dialogs"
|
|
46673
47539
|
},
|
|
46674
47540
|
"shadow-floating-legacy": {
|
|
46675
47541
|
"key": "{shadow.floating.legacy}",
|
|
@@ -46699,6 +47565,10 @@
|
|
|
46699
47565
|
"isSource": true,
|
|
46700
47566
|
"$type": "shadow"
|
|
46701
47567
|
}
|
|
47568
|
+
},
|
|
47569
|
+
"org.primer.llm": {
|
|
47570
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47571
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46702
47572
|
}
|
|
46703
47573
|
},
|
|
46704
47574
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46723,6 +47593,7 @@
|
|
|
46723
47593
|
}
|
|
46724
47594
|
],
|
|
46725
47595
|
"$type": "shadow",
|
|
47596
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46726
47597
|
"$extensions": {
|
|
46727
47598
|
"org.primer.figma": {},
|
|
46728
47599
|
"org.primer.overrides": {
|
|
@@ -46749,6 +47620,10 @@
|
|
|
46749
47620
|
"isSource": true,
|
|
46750
47621
|
"$type": "shadow"
|
|
46751
47622
|
}
|
|
47623
|
+
},
|
|
47624
|
+
"org.primer.llm": {
|
|
47625
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47626
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46752
47627
|
}
|
|
46753
47628
|
},
|
|
46754
47629
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46757,7 +47632,8 @@
|
|
|
46757
47632
|
"attributes": {},
|
|
46758
47633
|
"path": ["shadow", "floating", "legacy"],
|
|
46759
47634
|
"value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46760
|
-
"type": "shadow"
|
|
47635
|
+
"type": "shadow",
|
|
47636
|
+
"description": "Legacy floating shadow for backward compatibility"
|
|
46761
47637
|
},
|
|
46762
47638
|
"shadow-floating-medium": {
|
|
46763
47639
|
"key": "{shadow.floating.medium}",
|
|
@@ -46814,6 +47690,10 @@
|
|
|
46814
47690
|
"isSource": true,
|
|
46815
47691
|
"$type": "shadow"
|
|
46816
47692
|
}
|
|
47693
|
+
},
|
|
47694
|
+
"org.primer.llm": {
|
|
47695
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47696
|
+
"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."
|
|
46817
47697
|
}
|
|
46818
47698
|
},
|
|
46819
47699
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46862,6 +47742,7 @@
|
|
|
46862
47742
|
}
|
|
46863
47743
|
],
|
|
46864
47744
|
"$type": "shadow",
|
|
47745
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46865
47746
|
"$extensions": {
|
|
46866
47747
|
"org.primer.figma": {
|
|
46867
47748
|
"collection": "mode",
|
|
@@ -46915,6 +47796,10 @@
|
|
|
46915
47796
|
"isSource": true,
|
|
46916
47797
|
"$type": "shadow"
|
|
46917
47798
|
}
|
|
47799
|
+
},
|
|
47800
|
+
"org.primer.llm": {
|
|
47801
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47802
|
+
"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."
|
|
46918
47803
|
}
|
|
46919
47804
|
},
|
|
46920
47805
|
"key": "{shadow.floating.medium}"
|
|
@@ -46923,7 +47808,8 @@
|
|
|
46923
47808
|
"attributes": {},
|
|
46924
47809
|
"path": ["shadow", "floating", "medium"],
|
|
46925
47810
|
"value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
|
|
46926
|
-
"type": "shadow"
|
|
47811
|
+
"type": "shadow",
|
|
47812
|
+
"description": "Medium floating shadow for popovers and action menus"
|
|
46927
47813
|
},
|
|
46928
47814
|
"shadow-floating-small": {
|
|
46929
47815
|
"key": "{shadow.floating.small}",
|
|
@@ -46964,6 +47850,10 @@
|
|
|
46964
47850
|
"isSource": true,
|
|
46965
47851
|
"$type": "shadow"
|
|
46966
47852
|
}
|
|
47853
|
+
},
|
|
47854
|
+
"org.primer.llm": {
|
|
47855
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47856
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46967
47857
|
}
|
|
46968
47858
|
},
|
|
46969
47859
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46996,6 +47886,7 @@
|
|
|
46996
47886
|
}
|
|
46997
47887
|
],
|
|
46998
47888
|
"$type": "shadow",
|
|
47889
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46999
47890
|
"$extensions": {
|
|
47000
47891
|
"org.primer.figma": {
|
|
47001
47892
|
"collection": "mode",
|
|
@@ -47033,6 +47924,10 @@
|
|
|
47033
47924
|
"isSource": true,
|
|
47034
47925
|
"$type": "shadow"
|
|
47035
47926
|
}
|
|
47927
|
+
},
|
|
47928
|
+
"org.primer.llm": {
|
|
47929
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47930
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47036
47931
|
}
|
|
47037
47932
|
},
|
|
47038
47933
|
"key": "{shadow.floating.small}"
|
|
@@ -47041,7 +47936,8 @@
|
|
|
47041
47936
|
"attributes": {},
|
|
47042
47937
|
"path": ["shadow", "floating", "small"],
|
|
47043
47938
|
"value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
47044
|
-
"type": "shadow"
|
|
47939
|
+
"type": "shadow",
|
|
47940
|
+
"description": "Small floating shadow for dropdowns, tooltips, and small overlays"
|
|
47045
47941
|
},
|
|
47046
47942
|
"shadow-floating-xlarge": {
|
|
47047
47943
|
"key": "{shadow.floating.xlarge}",
|
|
@@ -47074,6 +47970,10 @@
|
|
|
47074
47970
|
"isSource": true,
|
|
47075
47971
|
"$type": "shadow"
|
|
47076
47972
|
}
|
|
47973
|
+
},
|
|
47974
|
+
"org.primer.llm": {
|
|
47975
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47976
|
+
"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."
|
|
47077
47977
|
}
|
|
47078
47978
|
},
|
|
47079
47979
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47098,6 +47998,7 @@
|
|
|
47098
47998
|
}
|
|
47099
47999
|
],
|
|
47100
48000
|
"$type": "shadow",
|
|
48001
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47101
48002
|
"$extensions": {
|
|
47102
48003
|
"org.primer.figma": {
|
|
47103
48004
|
"collection": "mode",
|
|
@@ -47127,6 +48028,10 @@
|
|
|
47127
48028
|
"isSource": true,
|
|
47128
48029
|
"$type": "shadow"
|
|
47129
48030
|
}
|
|
48031
|
+
},
|
|
48032
|
+
"org.primer.llm": {
|
|
48033
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48034
|
+
"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."
|
|
47130
48035
|
}
|
|
47131
48036
|
},
|
|
47132
48037
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47135,7 +48040,8 @@
|
|
|
47135
48040
|
"attributes": {},
|
|
47136
48041
|
"path": ["shadow", "floating", "xlarge"],
|
|
47137
48042
|
"value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
|
|
47138
|
-
"type": "shadow"
|
|
48043
|
+
"type": "shadow",
|
|
48044
|
+
"description": "Extra large floating shadow for full-screen overlays and sheets"
|
|
47139
48045
|
},
|
|
47140
48046
|
"shadow-inset": {
|
|
47141
48047
|
"key": "{shadow.inset}",
|
|
@@ -47159,6 +48065,10 @@
|
|
|
47159
48065
|
"isSource": true,
|
|
47160
48066
|
"$type": "shadow"
|
|
47161
48067
|
}
|
|
48068
|
+
},
|
|
48069
|
+
"org.primer.llm": {
|
|
48070
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48071
|
+
"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."
|
|
47162
48072
|
}
|
|
47163
48073
|
},
|
|
47164
48074
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47174,6 +48084,7 @@
|
|
|
47174
48084
|
"inset": true
|
|
47175
48085
|
},
|
|
47176
48086
|
"$type": "shadow",
|
|
48087
|
+
"$description": "Inset shadow for recessed elements",
|
|
47177
48088
|
"$extensions": {
|
|
47178
48089
|
"org.primer.figma": {
|
|
47179
48090
|
"collection": "mode",
|
|
@@ -47194,6 +48105,10 @@
|
|
|
47194
48105
|
"isSource": true,
|
|
47195
48106
|
"$type": "shadow"
|
|
47196
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."
|
|
47197
48112
|
}
|
|
47198
48113
|
},
|
|
47199
48114
|
"key": "{shadow.inset}"
|
|
@@ -47202,7 +48117,8 @@
|
|
|
47202
48117
|
"attributes": {},
|
|
47203
48118
|
"path": ["shadow", "inset"],
|
|
47204
48119
|
"value": "inset 0px 1px 0px 0px #0104090a",
|
|
47205
|
-
"type": "shadow"
|
|
48120
|
+
"type": "shadow",
|
|
48121
|
+
"description": "Inset shadow for recessed elements"
|
|
47206
48122
|
},
|
|
47207
48123
|
"shadow-resting-medium": {
|
|
47208
48124
|
"key": "{shadow.resting.medium}",
|
|
@@ -47235,6 +48151,10 @@
|
|
|
47235
48151
|
"isSource": true,
|
|
47236
48152
|
"$type": "shadow"
|
|
47237
48153
|
}
|
|
48154
|
+
},
|
|
48155
|
+
"org.primer.llm": {
|
|
48156
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48157
|
+
"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."
|
|
47238
48158
|
}
|
|
47239
48159
|
},
|
|
47240
48160
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47259,6 +48179,7 @@
|
|
|
47259
48179
|
}
|
|
47260
48180
|
],
|
|
47261
48181
|
"$type": "shadow",
|
|
48182
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47262
48183
|
"$extensions": {
|
|
47263
48184
|
"org.primer.figma": {
|
|
47264
48185
|
"collection": "mode",
|
|
@@ -47288,6 +48209,10 @@
|
|
|
47288
48209
|
"isSource": true,
|
|
47289
48210
|
"$type": "shadow"
|
|
47290
48211
|
}
|
|
48212
|
+
},
|
|
48213
|
+
"org.primer.llm": {
|
|
48214
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48215
|
+
"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."
|
|
47291
48216
|
}
|
|
47292
48217
|
},
|
|
47293
48218
|
"key": "{shadow.resting.medium}"
|
|
@@ -47296,7 +48221,8 @@
|
|
|
47296
48221
|
"attributes": {},
|
|
47297
48222
|
"path": ["shadow", "resting", "medium"],
|
|
47298
48223
|
"value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
47299
|
-
"type": "shadow"
|
|
48224
|
+
"type": "shadow",
|
|
48225
|
+
"description": "Medium resting shadow for cards and elevated surfaces"
|
|
47300
48226
|
},
|
|
47301
48227
|
"shadow-resting-small": {
|
|
47302
48228
|
"key": "{shadow.resting.small}",
|
|
@@ -47331,6 +48257,10 @@
|
|
|
47331
48257
|
"isSource": true,
|
|
47332
48258
|
"$type": "shadow"
|
|
47333
48259
|
}
|
|
48260
|
+
},
|
|
48261
|
+
"org.primer.llm": {
|
|
48262
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48263
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47334
48264
|
}
|
|
47335
48265
|
},
|
|
47336
48266
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47339,7 +48269,7 @@
|
|
|
47339
48269
|
"$value": [
|
|
47340
48270
|
{
|
|
47341
48271
|
"color": "{base.color.neutral.13}",
|
|
47342
|
-
"alpha": 0.
|
|
48272
|
+
"alpha": 0.04,
|
|
47343
48273
|
"offsetX": "0px",
|
|
47344
48274
|
"offsetY": "1px",
|
|
47345
48275
|
"blur": "1px",
|
|
@@ -47348,15 +48278,16 @@
|
|
|
47348
48278
|
},
|
|
47349
48279
|
{
|
|
47350
48280
|
"color": "{base.color.neutral.13}",
|
|
47351
|
-
"alpha": 0.
|
|
48281
|
+
"alpha": 0.03,
|
|
47352
48282
|
"offsetX": "0px",
|
|
47353
48283
|
"offsetY": "1px",
|
|
47354
|
-
"blur": "
|
|
48284
|
+
"blur": "2px",
|
|
47355
48285
|
"spread": "0px",
|
|
47356
48286
|
"inset": false
|
|
47357
48287
|
}
|
|
47358
48288
|
],
|
|
47359
48289
|
"$type": "shadow",
|
|
48290
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47360
48291
|
"$extensions": {
|
|
47361
48292
|
"org.primer.figma": {
|
|
47362
48293
|
"collection": "mode",
|
|
@@ -47388,6 +48319,10 @@
|
|
|
47388
48319
|
"isSource": true,
|
|
47389
48320
|
"$type": "shadow"
|
|
47390
48321
|
}
|
|
48322
|
+
},
|
|
48323
|
+
"org.primer.llm": {
|
|
48324
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48325
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47391
48326
|
}
|
|
47392
48327
|
},
|
|
47393
48328
|
"key": "{shadow.resting.small}"
|
|
@@ -47395,8 +48330,9 @@
|
|
|
47395
48330
|
"name": "shadow-resting-small",
|
|
47396
48331
|
"attributes": {},
|
|
47397
48332
|
"path": ["shadow", "resting", "small"],
|
|
47398
|
-
"value": "0px 1px 1px 0px #
|
|
47399
|
-
"type": "shadow"
|
|
48333
|
+
"value": "0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908",
|
|
48334
|
+
"type": "shadow",
|
|
48335
|
+
"description": "Small resting shadow for buttons and interactive elements"
|
|
47400
48336
|
},
|
|
47401
48337
|
"shadow-resting-xsmall": {
|
|
47402
48338
|
"key": "{shadow.resting.xsmall}",
|
|
@@ -47420,6 +48356,10 @@
|
|
|
47420
48356
|
"isSource": true,
|
|
47421
48357
|
"$type": "shadow"
|
|
47422
48358
|
}
|
|
48359
|
+
},
|
|
48360
|
+
"org.primer.llm": {
|
|
48361
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48362
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47423
48363
|
}
|
|
47424
48364
|
},
|
|
47425
48365
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47427,7 +48367,7 @@
|
|
|
47427
48367
|
"original": {
|
|
47428
48368
|
"$value": {
|
|
47429
48369
|
"color": "{base.color.neutral.13}",
|
|
47430
|
-
"alpha": 0.
|
|
48370
|
+
"alpha": 0.05,
|
|
47431
48371
|
"offsetX": "0px",
|
|
47432
48372
|
"offsetY": "1px",
|
|
47433
48373
|
"blur": "1px",
|
|
@@ -47435,6 +48375,7 @@
|
|
|
47435
48375
|
"inset": false
|
|
47436
48376
|
},
|
|
47437
48377
|
"$type": "shadow",
|
|
48378
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47438
48379
|
"$extensions": {
|
|
47439
48380
|
"org.primer.figma": {
|
|
47440
48381
|
"collection": "mode",
|
|
@@ -47455,6 +48396,10 @@
|
|
|
47455
48396
|
"isSource": true,
|
|
47456
48397
|
"$type": "shadow"
|
|
47457
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."
|
|
47458
48403
|
}
|
|
47459
48404
|
},
|
|
47460
48405
|
"key": "{shadow.resting.xsmall}"
|
|
@@ -47462,8 +48407,9 @@
|
|
|
47462
48407
|
"name": "shadow-resting-xsmall",
|
|
47463
48408
|
"attributes": {},
|
|
47464
48409
|
"path": ["shadow", "resting", "xsmall"],
|
|
47465
|
-
"value": "0px 1px 1px 0px #
|
|
47466
|
-
"type": "shadow"
|
|
48410
|
+
"value": "0px 1px 1px 0px #0104090d",
|
|
48411
|
+
"type": "shadow",
|
|
48412
|
+
"description": "Extra small resting shadow for minimal elevation"
|
|
47467
48413
|
},
|
|
47468
48414
|
"sideNav-bgColor-selected": {
|
|
47469
48415
|
"key": "{sideNav.bgColor.selected}",
|