@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN_TOKENS_GUIDE.md +185 -0
- package/DESIGN_TOKENS_SPEC.md +565 -0
- package/dist/build/filters/hasLlmExtensions.d.ts +7 -0
- package/dist/build/filters/hasLlmExtensions.js +11 -0
- package/dist/build/filters/index.d.ts +1 -0
- package/dist/build/filters/index.js +1 -0
- package/dist/build/formats/index.d.ts +1 -0
- package/dist/build/formats/index.js +1 -0
- package/dist/build/formats/markdownLlmGuidelines.d.ts +11 -0
- package/dist/build/formats/markdownLlmGuidelines.js +1168 -0
- package/dist/build/platforms/index.d.ts +1 -0
- package/dist/build/platforms/index.js +1 -0
- package/dist/build/platforms/llmGuidelines.d.ts +2 -0
- package/dist/build/platforms/llmGuidelines.js +17 -0
- package/dist/build/preprocessors/inheritGroupProperties.d.ts +7 -0
- package/dist/build/preprocessors/inheritGroupProperties.js +70 -0
- package/dist/build/primerStyleDictionary.js +7 -1
- package/dist/build/schemas/borderToken.d.ts +22 -2
- package/dist/build/schemas/borderToken.js +6 -0
- package/dist/build/schemas/colorToken.d.ts +4 -0
- package/dist/build/schemas/colorToken.js +2 -0
- package/dist/build/schemas/cubicBezierToken.d.ts +6 -0
- package/dist/build/schemas/cubicBezierToken.js +10 -2
- package/dist/build/schemas/designToken.d.ts +1 -1
- package/dist/build/schemas/designToken.js +113 -21
- package/dist/build/schemas/dimensionToken.d.ts +14 -3
- package/dist/build/schemas/dimensionToken.js +6 -2
- package/dist/build/schemas/dimensionValue.d.ts +24 -1
- package/dist/build/schemas/dimensionValue.js +20 -1
- package/dist/build/schemas/durationToken.d.ts +13 -1
- package/dist/build/schemas/durationToken.js +6 -0
- package/dist/build/schemas/durationValue.d.ts +11 -1
- package/dist/build/schemas/durationValue.js +13 -3
- package/dist/build/schemas/fontFamilyToken.d.ts +4 -0
- package/dist/build/schemas/fontFamilyToken.js +2 -0
- package/dist/build/schemas/fontWeightToken.d.ts +4 -0
- package/dist/build/schemas/fontWeightToken.js +2 -0
- package/dist/build/schemas/gradientToken.d.ts +4 -0
- package/dist/build/schemas/gradientToken.js +2 -0
- package/dist/build/schemas/llmExtension.d.ts +9 -0
- package/dist/build/schemas/llmExtension.js +11 -0
- package/dist/build/schemas/numberToken.d.ts +4 -0
- package/dist/build/schemas/numberToken.js +2 -0
- package/dist/build/schemas/shadowToken.d.ts +676 -84
- package/dist/build/schemas/shadowToken.js +2 -0
- package/dist/build/schemas/stringToken.d.ts +6 -0
- package/dist/build/schemas/stringToken.js +6 -0
- package/dist/build/schemas/transitionToken.d.ts +20 -2
- package/dist/build/schemas/transitionToken.js +6 -0
- package/dist/build/schemas/typographyToken.d.ts +38 -4
- package/dist/build/schemas/typographyToken.js +6 -0
- package/dist/build/schemas/validTokenType.d.ts +5 -1
- package/dist/build/schemas/validTokenType.js +71 -17
- package/dist/build/schemas/viewportRangeToken.d.ts +6 -0
- package/dist/build/schemas/viewportRangeToken.js +6 -0
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
- package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
- package/dist/build/transformers/dimensionToRem.d.ts +2 -1
- package/dist/build/transformers/dimensionToRem.js +21 -22
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
- package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
- package/dist/build/transformers/durationToCss.d.ts +2 -1
- package/dist/build/transformers/durationToCss.js +18 -11
- package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
- package/dist/build/transformers/utilities/parseDimension.js +31 -0
- package/dist/build/types/dimensionTokenValue.d.ts +9 -0
- package/dist/css/base/motion/motion.css +5 -4
- package/dist/css/functional/size/border.css +9 -14
- package/dist/css/functional/size/radius.css +7 -0
- package/dist/css/functional/size/size-coarse.css +3 -3
- package/dist/css/functional/size/size-fine.css +3 -3
- package/dist/css/functional/size/viewport.css +1 -1
- package/dist/css/functional/themes/dark-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-colorblind.css +194 -190
- package/dist/css/functional/themes/dark-dimmed-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-dimmed.css +194 -190
- package/dist/css/functional/themes/dark-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/dark-tritanopia.css +194 -190
- package/dist/css/functional/themes/dark.css +194 -190
- package/dist/css/functional/themes/light-colorblind-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-colorblind.css +194 -190
- package/dist/css/functional/themes/light-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia-high-contrast.css +194 -190
- package/dist/css/functional/themes/light-tritanopia.css +194 -190
- package/dist/css/functional/themes/light.css +194 -190
- package/dist/css/functional/typography/typography.css +4 -4
- package/dist/css/primitives.css +5 -0
- package/dist/docs/base/motion/motion.json +181 -32
- package/dist/docs/base/size/size.json +76 -19
- package/dist/docs/base/typography/typography.json +24 -6
- package/dist/docs/functional/size/border.json +62 -182
- package/dist/docs/functional/size/breakpoints.json +24 -6
- package/dist/docs/functional/size/radius.json +221 -0
- package/dist/docs/functional/size/size-coarse.json +45 -3
- package/dist/docs/functional/size/size-fine.json +45 -3
- package/dist/docs/functional/size/size.json +60 -15
- package/dist/docs/functional/size/viewport.json +2 -2
- package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-colorblind.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-dimmed.json +1081 -135
- package/dist/docs/functional/themes/dark-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1043 -97
- package/dist/docs/functional/themes/dark-tritanopia.json +1043 -97
- package/dist/docs/functional/themes/dark.json +1043 -97
- package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-colorblind.json +1049 -103
- package/dist/docs/functional/themes/light-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1049 -103
- package/dist/docs/functional/themes/light-tritanopia.json +1049 -103
- package/dist/docs/functional/themes/light.json +1049 -103
- package/dist/docs/functional/typography/typography.json +180 -10
- package/dist/fallbacks/base/motion/motion.json +49 -12
- package/dist/fallbacks/functional/size/border.json +0 -5
- package/dist/fallbacks/functional/size/radius.json +7 -0
- package/dist/fallbacks/functional/size/viewport.json +1 -1
- package/dist/figma/dimension/dimension.json +30 -20
- package/dist/figma/themes/dark-colorblind.json +85 -0
- package/dist/figma/themes/dark-dimmed.json +134 -49
- package/dist/figma/themes/dark-high-contrast.json +85 -0
- package/dist/figma/themes/dark-tritanopia.json +85 -0
- package/dist/figma/themes/dark.json +85 -0
- package/dist/figma/themes/light-colorblind.json +89 -4
- package/dist/figma/themes/light-high-contrast.json +89 -4
- package/dist/figma/themes/light-tritanopia.json +89 -4
- package/dist/figma/themes/light.json +89 -4
- package/dist/figma/typography/typography.json +44 -40
- package/dist/internalCss/dark-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/dark-colorblind.css +208 -218
- package/dist/internalCss/dark-dimmed-high-contrast.css +208 -218
- package/dist/internalCss/dark-dimmed.css +208 -218
- package/dist/internalCss/dark-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/dark-tritanopia.css +208 -218
- package/dist/internalCss/dark.css +208 -218
- package/dist/internalCss/light-colorblind-high-contrast.css +208 -218
- package/dist/internalCss/light-colorblind.css +208 -218
- package/dist/internalCss/light-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia-high-contrast.css +208 -218
- package/dist/internalCss/light-tritanopia.css +208 -218
- package/dist/internalCss/light.css +208 -218
- package/dist/styleLint/base/motion/motion.json +181 -32
- package/dist/styleLint/base/size/size.json +76 -19
- package/dist/styleLint/base/typography/typography.json +30 -12
- package/dist/styleLint/functional/size/border.json +55 -175
- package/dist/styleLint/functional/size/breakpoints.json +24 -6
- package/dist/styleLint/functional/size/radius.json +221 -0
- package/dist/styleLint/functional/size/size-coarse.json +45 -3
- package/dist/styleLint/functional/size/size-fine.json +45 -3
- package/dist/styleLint/functional/size/size.json +111 -66
- package/dist/styleLint/functional/size/viewport.json +2 -2
- package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-colorblind.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-dimmed.json +1013 -67
- package/dist/styleLint/functional/themes/dark-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +975 -29
- package/dist/styleLint/functional/themes/dark-tritanopia.json +975 -29
- package/dist/styleLint/functional/themes/dark.json +975 -29
- package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-colorblind.json +981 -35
- package/dist/styleLint/functional/themes/light-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +981 -35
- package/dist/styleLint/functional/themes/light-tritanopia.json +981 -35
- package/dist/styleLint/functional/themes/light.json +981 -35
- package/dist/styleLint/functional/typography/typography.json +196 -26
- package/package.json +6 -3
- package/src/tokens/base/motion/easing.json5 +39 -4
- package/src/tokens/base/motion/timing.json5 +12 -12
- package/src/tokens/base/size/size.json5 +19 -19
- package/src/tokens/base/typography/typography.json5 +6 -6
- package/src/tokens/functional/border/border.json5 +25 -0
- package/src/tokens/functional/color/bgColor.json5 +165 -0
- package/src/tokens/functional/color/borderColor.json5 +146 -0
- package/src/tokens/functional/color/control.json5 +24 -0
- package/src/tokens/functional/color/data-vis.json5 +7 -0
- package/src/tokens/functional/color/display.json5 +7 -0
- package/src/tokens/functional/color/fgColor.json5 +101 -1
- package/src/tokens/functional/color/focus.json5 +5 -0
- package/src/tokens/functional/color/selection.json5 +5 -0
- package/src/tokens/functional/color/syntax.json5 +14 -0
- package/src/tokens/functional/shadow/shadow.json5 +49 -4
- package/src/tokens/functional/size/border.json5 +22 -74
- package/src/tokens/functional/size/breakpoints.json5 +6 -6
- package/src/tokens/functional/size/radius.json5 +90 -0
- package/src/tokens/functional/size/size-coarse.json5 +24 -3
- package/src/tokens/functional/size/size-fine.json5 +45 -24
- package/src/tokens/functional/size/size.json5 +50 -15
- package/src/tokens/functional/size/viewport.json5 +1 -1
- package/src/tokens/functional/typography/font-stack.json5 +60 -0
- package/src/tokens/functional/typography/typography.json5 +71 -44
- package/dist/build/parsers/index.d.ts +0 -1
- package/dist/build/parsers/index.js +0 -1
- package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
- package/dist/build/parsers/w3cJsonParser.js +0 -25
- package/dist/removed/testing.json5 +0 -4
- package/src/tokens/removed/testing.json5 +0 -4
|
@@ -297,6 +297,7 @@
|
|
|
297
297
|
"key": "{bgColor.accent.emphasis}",
|
|
298
298
|
"$value": "#1b4b91",
|
|
299
299
|
"$type": "color",
|
|
300
|
+
"$description": "Strong accent background for active states and focused states",
|
|
300
301
|
"$extensions": {
|
|
301
302
|
"org.primer.figma": {
|
|
302
303
|
"collection": "mode",
|
|
@@ -312,6 +313,10 @@
|
|
|
312
313
|
"dark-dimmed-high-contrast": "#1b4b91",
|
|
313
314
|
"dark-tritanopia-high-contrast": "#0f2d5c",
|
|
314
315
|
"dark-protanopia-deuteranopia-high-contrast": "#0f2d5c"
|
|
316
|
+
},
|
|
317
|
+
"org.primer.llm": {
|
|
318
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
319
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
315
320
|
}
|
|
316
321
|
},
|
|
317
322
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -319,6 +324,7 @@
|
|
|
319
324
|
"original": {
|
|
320
325
|
"$value": "{base.color.blue.7}",
|
|
321
326
|
"$type": "color",
|
|
327
|
+
"$description": "Strong accent background for active states and focused states",
|
|
322
328
|
"$extensions": {
|
|
323
329
|
"org.primer.figma": {
|
|
324
330
|
"collection": "mode",
|
|
@@ -334,6 +340,10 @@
|
|
|
334
340
|
"dark-dimmed-high-contrast": "{base.color.blue.7}",
|
|
335
341
|
"dark-tritanopia-high-contrast": "{base.color.blue.9}",
|
|
336
342
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
|
|
343
|
+
},
|
|
344
|
+
"org.primer.llm": {
|
|
345
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
346
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
337
347
|
}
|
|
338
348
|
},
|
|
339
349
|
"key": "{bgColor.accent.emphasis}"
|
|
@@ -346,6 +356,7 @@
|
|
|
346
356
|
"key": "{bgColor.accent.muted}",
|
|
347
357
|
"$value": "#4184e41a",
|
|
348
358
|
"$type": "color",
|
|
359
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
349
360
|
"$extensions": {
|
|
350
361
|
"org.primer.figma": {
|
|
351
362
|
"collection": "mode",
|
|
@@ -363,6 +374,10 @@
|
|
|
363
374
|
"isSource": true,
|
|
364
375
|
"$type": "color"
|
|
365
376
|
}
|
|
377
|
+
},
|
|
378
|
+
"org.primer.llm": {
|
|
379
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
380
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
366
381
|
}
|
|
367
382
|
},
|
|
368
383
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -371,6 +386,7 @@
|
|
|
371
386
|
"original": {
|
|
372
387
|
"$value": "{base.color.blue.4}",
|
|
373
388
|
"$type": "color",
|
|
389
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
374
390
|
"$extensions": {
|
|
375
391
|
"org.primer.figma": {
|
|
376
392
|
"collection": "mode",
|
|
@@ -388,6 +404,10 @@
|
|
|
388
404
|
"isSource": true,
|
|
389
405
|
"$type": "color"
|
|
390
406
|
}
|
|
407
|
+
},
|
|
408
|
+
"org.primer.llm": {
|
|
409
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
410
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
391
411
|
}
|
|
392
412
|
},
|
|
393
413
|
"alpha": 0.1,
|
|
@@ -401,6 +421,7 @@
|
|
|
401
421
|
"key": "{bgColor.attention.emphasis}",
|
|
402
422
|
"$value": "#6c4400",
|
|
403
423
|
"$type": "color",
|
|
424
|
+
"$description": "Strong attention background for prominent warnings",
|
|
404
425
|
"$extensions": {
|
|
405
426
|
"org.primer.figma": {
|
|
406
427
|
"collection": "mode",
|
|
@@ -415,6 +436,10 @@
|
|
|
415
436
|
"dark-dimmed-high-contrast": "#6c4400",
|
|
416
437
|
"dark-protanopia-deuteranopia-high-contrast": "#452700",
|
|
417
438
|
"dark-tritanopia-high-contrast": "#452700"
|
|
439
|
+
},
|
|
440
|
+
"org.primer.llm": {
|
|
441
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
442
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
418
443
|
}
|
|
419
444
|
},
|
|
420
445
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -422,6 +447,7 @@
|
|
|
422
447
|
"original": {
|
|
423
448
|
"$value": "{base.color.yellow.7}",
|
|
424
449
|
"$type": "color",
|
|
450
|
+
"$description": "Strong attention background for prominent warnings",
|
|
425
451
|
"$extensions": {
|
|
426
452
|
"org.primer.figma": {
|
|
427
453
|
"collection": "mode",
|
|
@@ -436,6 +462,10 @@
|
|
|
436
462
|
"dark-dimmed-high-contrast": "{base.color.yellow.7}",
|
|
437
463
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
|
|
438
464
|
"dark-tritanopia-high-contrast": "{base.color.yellow.9}"
|
|
465
|
+
},
|
|
466
|
+
"org.primer.llm": {
|
|
467
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
468
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
439
469
|
}
|
|
440
470
|
},
|
|
441
471
|
"key": "{bgColor.attention.emphasis}"
|
|
@@ -448,6 +478,7 @@
|
|
|
448
478
|
"key": "{bgColor.attention.muted}",
|
|
449
479
|
"$value": "#ae7c1426",
|
|
450
480
|
"$type": "color",
|
|
481
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
451
482
|
"$extensions": {
|
|
452
483
|
"org.primer.figma": {
|
|
453
484
|
"collection": "mode",
|
|
@@ -465,6 +496,10 @@
|
|
|
465
496
|
"isSource": true,
|
|
466
497
|
"$type": "color"
|
|
467
498
|
}
|
|
499
|
+
},
|
|
500
|
+
"org.primer.llm": {
|
|
501
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
502
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
468
503
|
}
|
|
469
504
|
},
|
|
470
505
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -473,6 +508,7 @@
|
|
|
473
508
|
"original": {
|
|
474
509
|
"$value": "{base.color.yellow.4}",
|
|
475
510
|
"$type": "color",
|
|
511
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
476
512
|
"$extensions": {
|
|
477
513
|
"org.primer.figma": {
|
|
478
514
|
"collection": "mode",
|
|
@@ -490,6 +526,10 @@
|
|
|
490
526
|
"isSource": true,
|
|
491
527
|
"$type": "color"
|
|
492
528
|
}
|
|
529
|
+
},
|
|
530
|
+
"org.primer.llm": {
|
|
531
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
532
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
493
533
|
}
|
|
494
534
|
},
|
|
495
535
|
"alpha": 0.15,
|
|
@@ -503,6 +543,7 @@
|
|
|
503
543
|
"key": "{bgColor.black}",
|
|
504
544
|
"$value": "#010409",
|
|
505
545
|
"$type": "color",
|
|
546
|
+
"$description": "Pure black background",
|
|
506
547
|
"$extensions": {
|
|
507
548
|
"org.primer.figma": {
|
|
508
549
|
"collection": "mode",
|
|
@@ -511,6 +552,10 @@
|
|
|
511
552
|
},
|
|
512
553
|
"org.primer.overrides": {
|
|
513
554
|
"dark": "#010409"
|
|
555
|
+
},
|
|
556
|
+
"org.primer.llm": {
|
|
557
|
+
"doNotUse": true,
|
|
558
|
+
"rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
514
559
|
}
|
|
515
560
|
},
|
|
516
561
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -518,6 +563,7 @@
|
|
|
518
563
|
"original": {
|
|
519
564
|
"$value": "{base.color.neutral.0}",
|
|
520
565
|
"$type": "color",
|
|
566
|
+
"$description": "Pure black background",
|
|
521
567
|
"$extensions": {
|
|
522
568
|
"org.primer.figma": {
|
|
523
569
|
"collection": "mode",
|
|
@@ -526,6 +572,10 @@
|
|
|
526
572
|
},
|
|
527
573
|
"org.primer.overrides": {
|
|
528
574
|
"dark": "{base.color.neutral.0}"
|
|
575
|
+
},
|
|
576
|
+
"org.primer.llm": {
|
|
577
|
+
"doNotUse": true,
|
|
578
|
+
"rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
529
579
|
}
|
|
530
580
|
},
|
|
531
581
|
"key": "{bgColor.black}"
|
|
@@ -538,6 +588,7 @@
|
|
|
538
588
|
"key": "{bgColor.closed.emphasis}",
|
|
539
589
|
"$value": "#922323",
|
|
540
590
|
"$type": "color",
|
|
591
|
+
"$description": "Strong background for closed state badges and labels",
|
|
541
592
|
"$extensions": {
|
|
542
593
|
"org.primer.figma": {
|
|
543
594
|
"collection": "mode",
|
|
@@ -556,6 +607,10 @@
|
|
|
556
607
|
"light-protanopia-deuteranopia-high-contrast": "#3d444d",
|
|
557
608
|
"dark-protanopia-deuteranopia": "#3d444d",
|
|
558
609
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
610
|
+
},
|
|
611
|
+
"org.primer.llm": {
|
|
612
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
613
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
559
614
|
}
|
|
560
615
|
},
|
|
561
616
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -563,6 +618,7 @@
|
|
|
563
618
|
"original": {
|
|
564
619
|
"$value": "{bgColor.danger.emphasis}",
|
|
565
620
|
"$type": "color",
|
|
621
|
+
"$description": "Strong background for closed state badges and labels",
|
|
566
622
|
"$extensions": {
|
|
567
623
|
"org.primer.figma": {
|
|
568
624
|
"collection": "mode",
|
|
@@ -581,6 +637,10 @@
|
|
|
581
637
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
582
638
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
583
639
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
640
|
+
},
|
|
641
|
+
"org.primer.llm": {
|
|
642
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
643
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
584
644
|
}
|
|
585
645
|
},
|
|
586
646
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -593,6 +653,7 @@
|
|
|
593
653
|
"key": "{bgColor.closed.muted}",
|
|
594
654
|
"$value": "#e5534b1a",
|
|
595
655
|
"$type": "color",
|
|
656
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
596
657
|
"$extensions": {
|
|
597
658
|
"org.primer.figma": {
|
|
598
659
|
"collection": "mode",
|
|
@@ -628,6 +689,10 @@
|
|
|
628
689
|
"isSource": true,
|
|
629
690
|
"$type": "color"
|
|
630
691
|
}
|
|
692
|
+
},
|
|
693
|
+
"org.primer.llm": {
|
|
694
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
695
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
631
696
|
}
|
|
632
697
|
},
|
|
633
698
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -635,6 +700,7 @@
|
|
|
635
700
|
"original": {
|
|
636
701
|
"$value": "{bgColor.danger.muted}",
|
|
637
702
|
"$type": "color",
|
|
703
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
638
704
|
"$extensions": {
|
|
639
705
|
"org.primer.figma": {
|
|
640
706
|
"collection": "mode",
|
|
@@ -670,6 +736,10 @@
|
|
|
670
736
|
"isSource": true,
|
|
671
737
|
"$type": "color"
|
|
672
738
|
}
|
|
739
|
+
},
|
|
740
|
+
"org.primer.llm": {
|
|
741
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
742
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
673
743
|
}
|
|
674
744
|
},
|
|
675
745
|
"key": "{bgColor.closed.muted}"
|
|
@@ -682,6 +752,7 @@
|
|
|
682
752
|
"key": "{bgColor.danger.emphasis}",
|
|
683
753
|
"$value": "#922323",
|
|
684
754
|
"$type": "color",
|
|
755
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
685
756
|
"$extensions": {
|
|
686
757
|
"org.primer.figma": {
|
|
687
758
|
"collection": "mode",
|
|
@@ -699,6 +770,10 @@
|
|
|
699
770
|
"dark-high-contrast": "#5d0f12",
|
|
700
771
|
"dark-dimmed-high-contrast": "#922323",
|
|
701
772
|
"dark-tritanopia-high-contrast": "#5d0f12"
|
|
773
|
+
},
|
|
774
|
+
"org.primer.llm": {
|
|
775
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
776
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
702
777
|
}
|
|
703
778
|
},
|
|
704
779
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -706,6 +781,7 @@
|
|
|
706
781
|
"original": {
|
|
707
782
|
"$value": "{base.color.red.7}",
|
|
708
783
|
"$type": "color",
|
|
784
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
709
785
|
"$extensions": {
|
|
710
786
|
"org.primer.figma": {
|
|
711
787
|
"collection": "mode",
|
|
@@ -723,6 +799,10 @@
|
|
|
723
799
|
"dark-high-contrast": "{base.color.red.9}",
|
|
724
800
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
725
801
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
802
|
+
},
|
|
803
|
+
"org.primer.llm": {
|
|
804
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
805
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
726
806
|
}
|
|
727
807
|
},
|
|
728
808
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -735,6 +815,7 @@
|
|
|
735
815
|
"key": "{bgColor.danger.muted}",
|
|
736
816
|
"$value": "#e5534b1a",
|
|
737
817
|
"$type": "color",
|
|
818
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
738
819
|
"$extensions": {
|
|
739
820
|
"org.primer.figma": {
|
|
740
821
|
"collection": "mode",
|
|
@@ -761,6 +842,10 @@
|
|
|
761
842
|
"isSource": true,
|
|
762
843
|
"$type": "color"
|
|
763
844
|
}
|
|
845
|
+
},
|
|
846
|
+
"org.primer.llm": {
|
|
847
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
848
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
764
849
|
}
|
|
765
850
|
},
|
|
766
851
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -769,6 +854,7 @@
|
|
|
769
854
|
"original": {
|
|
770
855
|
"$value": "{base.color.red.4}",
|
|
771
856
|
"$type": "color",
|
|
857
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
772
858
|
"$extensions": {
|
|
773
859
|
"org.primer.figma": {
|
|
774
860
|
"collection": "mode",
|
|
@@ -795,6 +881,10 @@
|
|
|
795
881
|
"isSource": true,
|
|
796
882
|
"$type": "color"
|
|
797
883
|
}
|
|
884
|
+
},
|
|
885
|
+
"org.primer.llm": {
|
|
886
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
887
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
798
888
|
}
|
|
799
889
|
},
|
|
800
890
|
"alpha": 0.1,
|
|
@@ -808,6 +898,7 @@
|
|
|
808
898
|
"key": "{bgColor.default}",
|
|
809
899
|
"$value": "#212830",
|
|
810
900
|
"$type": "color",
|
|
901
|
+
"$description": "Default background color for pages and main content areas",
|
|
811
902
|
"$extensions": {
|
|
812
903
|
"org.primer.figma": {
|
|
813
904
|
"collection": "mode",
|
|
@@ -824,6 +915,10 @@
|
|
|
824
915
|
"dark-high-contrast": "#010409",
|
|
825
916
|
"dark-tritanopia-high-contrast": "#010409",
|
|
826
917
|
"dark-protanopia-deuteranopia-high-contrast": "#010409"
|
|
918
|
+
},
|
|
919
|
+
"org.primer.llm": {
|
|
920
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
921
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
827
922
|
}
|
|
828
923
|
},
|
|
829
924
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -831,6 +926,7 @@
|
|
|
831
926
|
"original": {
|
|
832
927
|
"$value": "{base.color.neutral.3}",
|
|
833
928
|
"$type": "color",
|
|
929
|
+
"$description": "Default background color for pages and main content areas",
|
|
834
930
|
"$extensions": {
|
|
835
931
|
"org.primer.figma": {
|
|
836
932
|
"collection": "mode",
|
|
@@ -847,6 +943,10 @@
|
|
|
847
943
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
848
944
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
849
945
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
946
|
+
},
|
|
947
|
+
"org.primer.llm": {
|
|
948
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
949
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
850
950
|
}
|
|
851
951
|
},
|
|
852
952
|
"key": "{bgColor.default}"
|
|
@@ -859,6 +959,7 @@
|
|
|
859
959
|
"key": "{bgColor.disabled}",
|
|
860
960
|
"$value": "#2a313c",
|
|
861
961
|
"$type": "color",
|
|
962
|
+
"$description": "Background for disabled interactive elements",
|
|
862
963
|
"$extensions": {
|
|
863
964
|
"org.primer.figma": {
|
|
864
965
|
"collection": "mode",
|
|
@@ -875,6 +976,10 @@
|
|
|
875
976
|
"dark-high-contrast": "#262c36",
|
|
876
977
|
"dark-tritanopia-high-contrast": "#262c36",
|
|
877
978
|
"dark-protanopia-deuteranopia-high-contrast": "#262c36"
|
|
979
|
+
},
|
|
980
|
+
"org.primer.llm": {
|
|
981
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
982
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
878
983
|
}
|
|
879
984
|
},
|
|
880
985
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -882,6 +987,7 @@
|
|
|
882
987
|
"original": {
|
|
883
988
|
"$value": "{base.color.neutral.5}",
|
|
884
989
|
"$type": "color",
|
|
990
|
+
"$description": "Background for disabled interactive elements",
|
|
885
991
|
"$extensions": {
|
|
886
992
|
"org.primer.figma": {
|
|
887
993
|
"collection": "mode",
|
|
@@ -898,6 +1004,10 @@
|
|
|
898
1004
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
899
1005
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
900
1006
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
1007
|
+
},
|
|
1008
|
+
"org.primer.llm": {
|
|
1009
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1010
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
901
1011
|
}
|
|
902
1012
|
},
|
|
903
1013
|
"key": "{bgColor.disabled}"
|
|
@@ -910,6 +1020,7 @@
|
|
|
910
1020
|
"key": "{bgColor.done.emphasis}",
|
|
911
1021
|
"$value": "#5936a2",
|
|
912
1022
|
"$type": "color",
|
|
1023
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
913
1024
|
"$extensions": {
|
|
914
1025
|
"org.primer.figma": {
|
|
915
1026
|
"collection": "mode",
|
|
@@ -924,6 +1035,10 @@
|
|
|
924
1035
|
"dark-dimmed-high-contrast": "#5936a2",
|
|
925
1036
|
"dark-tritanopia-high-contrast": "#352160",
|
|
926
1037
|
"dark-protanopia-deuteranopia-high-contrast": "#352160"
|
|
1038
|
+
},
|
|
1039
|
+
"org.primer.llm": {
|
|
1040
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1041
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
927
1042
|
}
|
|
928
1043
|
},
|
|
929
1044
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -931,6 +1046,7 @@
|
|
|
931
1046
|
"original": {
|
|
932
1047
|
"$value": "{base.color.purple.7}",
|
|
933
1048
|
"$type": "color",
|
|
1049
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
934
1050
|
"$extensions": {
|
|
935
1051
|
"org.primer.figma": {
|
|
936
1052
|
"collection": "mode",
|
|
@@ -945,6 +1061,10 @@
|
|
|
945
1061
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
946
1062
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
947
1063
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1064
|
+
},
|
|
1065
|
+
"org.primer.llm": {
|
|
1066
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1067
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
948
1068
|
}
|
|
949
1069
|
},
|
|
950
1070
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -957,6 +1077,7 @@
|
|
|
957
1077
|
"key": "{bgColor.done.muted}",
|
|
958
1078
|
"$value": "#986ee226",
|
|
959
1079
|
"$type": "color",
|
|
1080
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
960
1081
|
"$extensions": {
|
|
961
1082
|
"org.primer.figma": {
|
|
962
1083
|
"collection": "mode",
|
|
@@ -974,6 +1095,10 @@
|
|
|
974
1095
|
"isSource": true,
|
|
975
1096
|
"$type": "color"
|
|
976
1097
|
}
|
|
1098
|
+
},
|
|
1099
|
+
"org.primer.llm": {
|
|
1100
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1101
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
977
1102
|
}
|
|
978
1103
|
},
|
|
979
1104
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -982,6 +1107,7 @@
|
|
|
982
1107
|
"original": {
|
|
983
1108
|
"$value": "{base.color.purple.4}",
|
|
984
1109
|
"$type": "color",
|
|
1110
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
985
1111
|
"$extensions": {
|
|
986
1112
|
"org.primer.figma": {
|
|
987
1113
|
"collection": "mode",
|
|
@@ -999,6 +1125,10 @@
|
|
|
999
1125
|
"isSource": true,
|
|
1000
1126
|
"$type": "color"
|
|
1001
1127
|
}
|
|
1128
|
+
},
|
|
1129
|
+
"org.primer.llm": {
|
|
1130
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1131
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
1002
1132
|
}
|
|
1003
1133
|
},
|
|
1004
1134
|
"alpha": 0.15,
|
|
@@ -1012,6 +1142,7 @@
|
|
|
1012
1142
|
"key": "{bgColor.draft.emphasis}",
|
|
1013
1143
|
"$value": "#3d444d",
|
|
1014
1144
|
"$type": "color",
|
|
1145
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1015
1146
|
"$extensions": {
|
|
1016
1147
|
"org.primer.figma": {
|
|
1017
1148
|
"collection": "mode",
|
|
@@ -1020,6 +1151,10 @@
|
|
|
1020
1151
|
"codeSyntax": {
|
|
1021
1152
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1022
1153
|
}
|
|
1154
|
+
},
|
|
1155
|
+
"org.primer.llm": {
|
|
1156
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1157
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1023
1158
|
}
|
|
1024
1159
|
},
|
|
1025
1160
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1027,6 +1162,7 @@
|
|
|
1027
1162
|
"original": {
|
|
1028
1163
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1029
1164
|
"$type": "color",
|
|
1165
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1030
1166
|
"$extensions": {
|
|
1031
1167
|
"org.primer.figma": {
|
|
1032
1168
|
"collection": "mode",
|
|
@@ -1035,6 +1171,10 @@
|
|
|
1035
1171
|
"codeSyntax": {
|
|
1036
1172
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1037
1173
|
}
|
|
1174
|
+
},
|
|
1175
|
+
"org.primer.llm": {
|
|
1176
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1177
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1038
1178
|
}
|
|
1039
1179
|
},
|
|
1040
1180
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1047,6 +1187,7 @@
|
|
|
1047
1187
|
"key": "{bgColor.draft.muted}",
|
|
1048
1188
|
"$value": "#656c7633",
|
|
1049
1189
|
"$type": "color",
|
|
1190
|
+
"$description": "Subtle background for draft state indicators",
|
|
1050
1191
|
"$extensions": {
|
|
1051
1192
|
"org.primer.figma": {
|
|
1052
1193
|
"collection": "mode",
|
|
@@ -1082,6 +1223,10 @@
|
|
|
1082
1223
|
"isSource": true,
|
|
1083
1224
|
"$type": "color"
|
|
1084
1225
|
}
|
|
1226
|
+
},
|
|
1227
|
+
"org.primer.llm": {
|
|
1228
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1229
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1085
1230
|
}
|
|
1086
1231
|
},
|
|
1087
1232
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1089,6 +1234,7 @@
|
|
|
1089
1234
|
"original": {
|
|
1090
1235
|
"$value": "{bgColor.neutral.muted}",
|
|
1091
1236
|
"$type": "color",
|
|
1237
|
+
"$description": "Subtle background for draft state indicators",
|
|
1092
1238
|
"$extensions": {
|
|
1093
1239
|
"org.primer.figma": {
|
|
1094
1240
|
"collection": "mode",
|
|
@@ -1124,6 +1270,10 @@
|
|
|
1124
1270
|
"isSource": true,
|
|
1125
1271
|
"$type": "color"
|
|
1126
1272
|
}
|
|
1273
|
+
},
|
|
1274
|
+
"org.primer.llm": {
|
|
1275
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1276
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1127
1277
|
}
|
|
1128
1278
|
},
|
|
1129
1279
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1136,6 +1286,7 @@
|
|
|
1136
1286
|
"key": "{bgColor.emphasis}",
|
|
1137
1287
|
"$value": "#3d444d",
|
|
1138
1288
|
"$type": "color",
|
|
1289
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1139
1290
|
"$extensions": {
|
|
1140
1291
|
"org.primer.figma": {
|
|
1141
1292
|
"collection": "mode",
|
|
@@ -1147,6 +1298,10 @@
|
|
|
1147
1298
|
},
|
|
1148
1299
|
"org.primer.overrides": {
|
|
1149
1300
|
"dark": "#3d444d"
|
|
1301
|
+
},
|
|
1302
|
+
"org.primer.llm": {
|
|
1303
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1304
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1150
1305
|
}
|
|
1151
1306
|
},
|
|
1152
1307
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1154,6 +1309,7 @@
|
|
|
1154
1309
|
"original": {
|
|
1155
1310
|
"$value": "{base.color.neutral.7}",
|
|
1156
1311
|
"$type": "color",
|
|
1312
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1157
1313
|
"$extensions": {
|
|
1158
1314
|
"org.primer.figma": {
|
|
1159
1315
|
"collection": "mode",
|
|
@@ -1165,6 +1321,10 @@
|
|
|
1165
1321
|
},
|
|
1166
1322
|
"org.primer.overrides": {
|
|
1167
1323
|
"dark": "{base.color.neutral.7}"
|
|
1324
|
+
},
|
|
1325
|
+
"org.primer.llm": {
|
|
1326
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1327
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1168
1328
|
}
|
|
1169
1329
|
},
|
|
1170
1330
|
"key": "{bgColor.emphasis}"
|
|
@@ -1177,6 +1337,7 @@
|
|
|
1177
1337
|
"key": "{bgColor.inset}",
|
|
1178
1338
|
"$value": "#151b23",
|
|
1179
1339
|
"$type": "color",
|
|
1340
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1180
1341
|
"$extensions": {
|
|
1181
1342
|
"org.primer.figma": {
|
|
1182
1343
|
"collection": "mode",
|
|
@@ -1193,6 +1354,10 @@
|
|
|
1193
1354
|
"light-high-contrast": "#151b23",
|
|
1194
1355
|
"light-tritanopia-high-contrast": "#151b23",
|
|
1195
1356
|
"light-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1357
|
+
},
|
|
1358
|
+
"org.primer.llm": {
|
|
1359
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1360
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1196
1361
|
}
|
|
1197
1362
|
},
|
|
1198
1363
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1200,6 +1365,7 @@
|
|
|
1200
1365
|
"original": {
|
|
1201
1366
|
"$value": "{base.color.neutral.2}",
|
|
1202
1367
|
"$type": "color",
|
|
1368
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1203
1369
|
"$extensions": {
|
|
1204
1370
|
"org.primer.figma": {
|
|
1205
1371
|
"collection": "mode",
|
|
@@ -1216,6 +1382,10 @@
|
|
|
1216
1382
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1217
1383
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1218
1384
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1385
|
+
},
|
|
1386
|
+
"org.primer.llm": {
|
|
1387
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1388
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1219
1389
|
}
|
|
1220
1390
|
},
|
|
1221
1391
|
"key": "{bgColor.inset}"
|
|
@@ -1228,6 +1398,7 @@
|
|
|
1228
1398
|
"key": "{bgColor.inverse}",
|
|
1229
1399
|
"$value": "#cdd9e5",
|
|
1230
1400
|
"$type": "color",
|
|
1401
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1231
1402
|
"$extensions": {
|
|
1232
1403
|
"org.primer.figma": {
|
|
1233
1404
|
"collection": "mode",
|
|
@@ -1236,6 +1407,10 @@
|
|
|
1236
1407
|
},
|
|
1237
1408
|
"org.primer.overrides": {
|
|
1238
1409
|
"dark": "#cdd9e5"
|
|
1410
|
+
},
|
|
1411
|
+
"org.primer.llm": {
|
|
1412
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1413
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1239
1414
|
}
|
|
1240
1415
|
},
|
|
1241
1416
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1243,6 +1418,7 @@
|
|
|
1243
1418
|
"original": {
|
|
1244
1419
|
"$value": "{base.color.neutral.13}",
|
|
1245
1420
|
"$type": "color",
|
|
1421
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1246
1422
|
"$extensions": {
|
|
1247
1423
|
"org.primer.figma": {
|
|
1248
1424
|
"collection": "mode",
|
|
@@ -1251,6 +1427,10 @@
|
|
|
1251
1427
|
},
|
|
1252
1428
|
"org.primer.overrides": {
|
|
1253
1429
|
"dark": "{base.color.neutral.13}"
|
|
1430
|
+
},
|
|
1431
|
+
"org.primer.llm": {
|
|
1432
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1433
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1254
1434
|
}
|
|
1255
1435
|
},
|
|
1256
1436
|
"key": "{bgColor.inverse}"
|
|
@@ -1263,6 +1443,7 @@
|
|
|
1263
1443
|
"key": "{bgColor.muted}",
|
|
1264
1444
|
"$value": "#262c36",
|
|
1265
1445
|
"$type": "color",
|
|
1446
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1266
1447
|
"$extensions": {
|
|
1267
1448
|
"org.primer.figma": {
|
|
1268
1449
|
"collection": "mode",
|
|
@@ -1282,6 +1463,10 @@
|
|
|
1282
1463
|
"dark-high-contrast": "#151b23",
|
|
1283
1464
|
"dark-tritanopia-high-contrast": "#151b23",
|
|
1284
1465
|
"dark-protanopia-deuteranopia-high-contrast": "#151b23"
|
|
1466
|
+
},
|
|
1467
|
+
"org.primer.llm": {
|
|
1468
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1469
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1285
1470
|
}
|
|
1286
1471
|
},
|
|
1287
1472
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1289,6 +1474,7 @@
|
|
|
1289
1474
|
"original": {
|
|
1290
1475
|
"$value": "{base.color.neutral.4}",
|
|
1291
1476
|
"$type": "color",
|
|
1477
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1292
1478
|
"$extensions": {
|
|
1293
1479
|
"org.primer.figma": {
|
|
1294
1480
|
"collection": "mode",
|
|
@@ -1308,6 +1494,10 @@
|
|
|
1308
1494
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1309
1495
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1310
1496
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1497
|
+
},
|
|
1498
|
+
"org.primer.llm": {
|
|
1499
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1500
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1311
1501
|
}
|
|
1312
1502
|
},
|
|
1313
1503
|
"key": "{bgColor.muted}"
|
|
@@ -1320,6 +1510,7 @@
|
|
|
1320
1510
|
"key": "{bgColor.neutral.emphasis}",
|
|
1321
1511
|
"$value": "#3d444d",
|
|
1322
1512
|
"$type": "color",
|
|
1513
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1323
1514
|
"$extensions": {
|
|
1324
1515
|
"org.primer.figma": {
|
|
1325
1516
|
"collection": "mode",
|
|
@@ -1336,6 +1527,10 @@
|
|
|
1336
1527
|
"dark-high-contrast": "#3d444d",
|
|
1337
1528
|
"dark-tritanopia-high-contrast": "#3d444d",
|
|
1338
1529
|
"dark-protanopia-deuteranopia-high-contrast": "#3d444d"
|
|
1530
|
+
},
|
|
1531
|
+
"org.primer.llm": {
|
|
1532
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1533
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1339
1534
|
}
|
|
1340
1535
|
},
|
|
1341
1536
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1343,6 +1538,7 @@
|
|
|
1343
1538
|
"original": {
|
|
1344
1539
|
"$value": "{base.color.neutral.7}",
|
|
1345
1540
|
"$type": "color",
|
|
1541
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1346
1542
|
"$extensions": {
|
|
1347
1543
|
"org.primer.figma": {
|
|
1348
1544
|
"collection": "mode",
|
|
@@ -1359,6 +1555,10 @@
|
|
|
1359
1555
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1360
1556
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1361
1557
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1558
|
+
},
|
|
1559
|
+
"org.primer.llm": {
|
|
1560
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1561
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1362
1562
|
}
|
|
1363
1563
|
},
|
|
1364
1564
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1371,6 +1571,7 @@
|
|
|
1371
1571
|
"key": "{bgColor.neutral.muted}",
|
|
1372
1572
|
"$value": "#656c7633",
|
|
1373
1573
|
"$type": "color",
|
|
1574
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1374
1575
|
"$extensions": {
|
|
1375
1576
|
"org.primer.figma": {
|
|
1376
1577
|
"collection": "mode",
|
|
@@ -1398,6 +1599,10 @@
|
|
|
1398
1599
|
"dark-high-contrast": "#212830",
|
|
1399
1600
|
"dark-tritanopia-high-contrast": "#212830",
|
|
1400
1601
|
"dark-protanopia-deuteranopia-high-contrast": "#212830"
|
|
1602
|
+
},
|
|
1603
|
+
"org.primer.llm": {
|
|
1604
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1605
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1401
1606
|
}
|
|
1402
1607
|
},
|
|
1403
1608
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1406,6 +1611,7 @@
|
|
|
1406
1611
|
"original": {
|
|
1407
1612
|
"$value": "{base.color.neutral.8}",
|
|
1408
1613
|
"$type": "color",
|
|
1614
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1409
1615
|
"$extensions": {
|
|
1410
1616
|
"org.primer.figma": {
|
|
1411
1617
|
"collection": "mode",
|
|
@@ -1433,6 +1639,10 @@
|
|
|
1433
1639
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1434
1640
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1435
1641
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1642
|
+
},
|
|
1643
|
+
"org.primer.llm": {
|
|
1644
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1645
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1436
1646
|
}
|
|
1437
1647
|
},
|
|
1438
1648
|
"alpha": 0.2,
|
|
@@ -1446,6 +1656,7 @@
|
|
|
1446
1656
|
"key": "{bgColor.open.emphasis}",
|
|
1447
1657
|
"$value": "#245829",
|
|
1448
1658
|
"$type": "color",
|
|
1659
|
+
"$description": "Strong background for open state badges and labels",
|
|
1449
1660
|
"$extensions": {
|
|
1450
1661
|
"org.primer.figma": {
|
|
1451
1662
|
"collection": "mode",
|
|
@@ -1464,6 +1675,10 @@
|
|
|
1464
1675
|
"light-protanopia-deuteranopia-high-contrast": "#ae5622",
|
|
1465
1676
|
"dark-protanopia-deuteranopia": "#ae5622",
|
|
1466
1677
|
"dark-protanopia-deuteranopia-high-contrast": "#4d210c"
|
|
1678
|
+
},
|
|
1679
|
+
"org.primer.llm": {
|
|
1680
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1681
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1467
1682
|
}
|
|
1468
1683
|
},
|
|
1469
1684
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1471,6 +1686,7 @@
|
|
|
1471
1686
|
"original": {
|
|
1472
1687
|
"$value": "{bgColor.success.emphasis}",
|
|
1473
1688
|
"$type": "color",
|
|
1689
|
+
"$description": "Strong background for open state badges and labels",
|
|
1474
1690
|
"$extensions": {
|
|
1475
1691
|
"org.primer.figma": {
|
|
1476
1692
|
"collection": "mode",
|
|
@@ -1489,6 +1705,10 @@
|
|
|
1489
1705
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1490
1706
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1491
1707
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1708
|
+
},
|
|
1709
|
+
"org.primer.llm": {
|
|
1710
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1711
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1492
1712
|
}
|
|
1493
1713
|
},
|
|
1494
1714
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1501,6 +1721,7 @@
|
|
|
1501
1721
|
"key": "{bgColor.open.muted}",
|
|
1502
1722
|
"$value": "#46954a26",
|
|
1503
1723
|
"$type": "color",
|
|
1724
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1504
1725
|
"$extensions": {
|
|
1505
1726
|
"org.primer.figma": {
|
|
1506
1727
|
"collection": "mode",
|
|
@@ -1543,6 +1764,10 @@
|
|
|
1543
1764
|
"isSource": true,
|
|
1544
1765
|
"$type": "color"
|
|
1545
1766
|
}
|
|
1767
|
+
},
|
|
1768
|
+
"org.primer.llm": {
|
|
1769
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1770
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1546
1771
|
}
|
|
1547
1772
|
},
|
|
1548
1773
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1550,6 +1775,7 @@
|
|
|
1550
1775
|
"original": {
|
|
1551
1776
|
"$value": "{bgColor.success.muted}",
|
|
1552
1777
|
"$type": "color",
|
|
1778
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1553
1779
|
"$extensions": {
|
|
1554
1780
|
"org.primer.figma": {
|
|
1555
1781
|
"collection": "mode",
|
|
@@ -1592,6 +1818,10 @@
|
|
|
1592
1818
|
"isSource": true,
|
|
1593
1819
|
"$type": "color"
|
|
1594
1820
|
}
|
|
1821
|
+
},
|
|
1822
|
+
"org.primer.llm": {
|
|
1823
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1824
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1595
1825
|
}
|
|
1596
1826
|
},
|
|
1597
1827
|
"key": "{bgColor.open.muted}"
|
|
@@ -1604,6 +1834,7 @@
|
|
|
1604
1834
|
"key": "{bgColor.severe.emphasis}",
|
|
1605
1835
|
"$value": "#7f3913",
|
|
1606
1836
|
"$type": "color",
|
|
1837
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1607
1838
|
"$extensions": {
|
|
1608
1839
|
"org.primer.figma": {
|
|
1609
1840
|
"collection": "mode",
|
|
@@ -1621,6 +1852,10 @@
|
|
|
1621
1852
|
"dark-high-contrast": "#4d210c",
|
|
1622
1853
|
"dark-dimmed-high-contrast": "#7f3913",
|
|
1623
1854
|
"dark-protanopia-deuteranopia-high-contrast": "#4d210c"
|
|
1855
|
+
},
|
|
1856
|
+
"org.primer.llm": {
|
|
1857
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1858
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1624
1859
|
}
|
|
1625
1860
|
},
|
|
1626
1861
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1628,6 +1863,7 @@
|
|
|
1628
1863
|
"original": {
|
|
1629
1864
|
"$value": "{base.color.orange.7}",
|
|
1630
1865
|
"$type": "color",
|
|
1866
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1631
1867
|
"$extensions": {
|
|
1632
1868
|
"org.primer.figma": {
|
|
1633
1869
|
"collection": "mode",
|
|
@@ -1645,6 +1881,10 @@
|
|
|
1645
1881
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1646
1882
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1647
1883
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1884
|
+
},
|
|
1885
|
+
"org.primer.llm": {
|
|
1886
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1887
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1648
1888
|
}
|
|
1649
1889
|
},
|
|
1650
1890
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1657,6 +1897,7 @@
|
|
|
1657
1897
|
"key": "{bgColor.severe.muted}",
|
|
1658
1898
|
"$value": "#cc6b2c1a",
|
|
1659
1899
|
"$type": "color",
|
|
1900
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1660
1901
|
"$extensions": {
|
|
1661
1902
|
"org.primer.figma": {
|
|
1662
1903
|
"collection": "mode",
|
|
@@ -1683,6 +1924,10 @@
|
|
|
1683
1924
|
"isSource": true,
|
|
1684
1925
|
"$type": "color"
|
|
1685
1926
|
}
|
|
1927
|
+
},
|
|
1928
|
+
"org.primer.llm": {
|
|
1929
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1930
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1686
1931
|
}
|
|
1687
1932
|
},
|
|
1688
1933
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1691,6 +1936,7 @@
|
|
|
1691
1936
|
"original": {
|
|
1692
1937
|
"$value": "{base.color.orange.4}",
|
|
1693
1938
|
"$type": "color",
|
|
1939
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1694
1940
|
"$extensions": {
|
|
1695
1941
|
"org.primer.figma": {
|
|
1696
1942
|
"collection": "mode",
|
|
@@ -1717,6 +1963,10 @@
|
|
|
1717
1963
|
"isSource": true,
|
|
1718
1964
|
"$type": "color"
|
|
1719
1965
|
}
|
|
1966
|
+
},
|
|
1967
|
+
"org.primer.llm": {
|
|
1968
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1969
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1720
1970
|
}
|
|
1721
1971
|
},
|
|
1722
1972
|
"alpha": 0.1,
|
|
@@ -1730,6 +1980,7 @@
|
|
|
1730
1980
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1731
1981
|
"$value": "#7e325a",
|
|
1732
1982
|
"$type": "color",
|
|
1983
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1733
1984
|
"$extensions": {
|
|
1734
1985
|
"org.primer.figma": {
|
|
1735
1986
|
"collection": "mode",
|
|
@@ -1744,6 +1995,10 @@
|
|
|
1744
1995
|
"dark-dimmed-high-contrast": "#7e325a",
|
|
1745
1996
|
"dark-tritanopia-high-contrast": "#551639",
|
|
1746
1997
|
"dark-protanopia-deuteranopia-high-contrast": "#551639"
|
|
1998
|
+
},
|
|
1999
|
+
"org.primer.llm": {
|
|
2000
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2001
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1747
2002
|
}
|
|
1748
2003
|
},
|
|
1749
2004
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1751,6 +2006,7 @@
|
|
|
1751
2006
|
"original": {
|
|
1752
2007
|
"$value": "{base.color.pink.7}",
|
|
1753
2008
|
"$type": "color",
|
|
2009
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1754
2010
|
"$extensions": {
|
|
1755
2011
|
"org.primer.figma": {
|
|
1756
2012
|
"collection": "mode",
|
|
@@ -1765,6 +2021,10 @@
|
|
|
1765
2021
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1766
2022
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1767
2023
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2024
|
+
},
|
|
2025
|
+
"org.primer.llm": {
|
|
2026
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2027
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1768
2028
|
}
|
|
1769
2029
|
},
|
|
1770
2030
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1777,6 +2037,7 @@
|
|
|
1777
2037
|
"key": "{bgColor.sponsors.muted}",
|
|
1778
2038
|
"$value": "#c961981a",
|
|
1779
2039
|
"$type": "color",
|
|
2040
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1780
2041
|
"$extensions": {
|
|
1781
2042
|
"org.primer.figma": {
|
|
1782
2043
|
"collection": "mode",
|
|
@@ -1801,6 +2062,10 @@
|
|
|
1801
2062
|
"isSource": true,
|
|
1802
2063
|
"$type": "color"
|
|
1803
2064
|
}
|
|
2065
|
+
},
|
|
2066
|
+
"org.primer.llm": {
|
|
2067
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2068
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1804
2069
|
}
|
|
1805
2070
|
},
|
|
1806
2071
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1809,6 +2074,7 @@
|
|
|
1809
2074
|
"original": {
|
|
1810
2075
|
"$value": "{base.color.pink.4}",
|
|
1811
2076
|
"$type": "color",
|
|
2077
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1812
2078
|
"$extensions": {
|
|
1813
2079
|
"org.primer.figma": {
|
|
1814
2080
|
"collection": "mode",
|
|
@@ -1833,6 +2099,10 @@
|
|
|
1833
2099
|
"isSource": true,
|
|
1834
2100
|
"$type": "color"
|
|
1835
2101
|
}
|
|
2102
|
+
},
|
|
2103
|
+
"org.primer.llm": {
|
|
2104
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2105
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1836
2106
|
}
|
|
1837
2107
|
},
|
|
1838
2108
|
"alpha": 0.1,
|
|
@@ -1846,6 +2116,7 @@
|
|
|
1846
2116
|
"key": "{bgColor.success.emphasis}",
|
|
1847
2117
|
"$value": "#245829",
|
|
1848
2118
|
"$type": "color",
|
|
2119
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1849
2120
|
"$extensions": {
|
|
1850
2121
|
"org.primer.figma": {
|
|
1851
2122
|
"collection": "mode",
|
|
@@ -1868,6 +2139,10 @@
|
|
|
1868
2139
|
"light-high-contrast": "#347d39",
|
|
1869
2140
|
"dark-high-contrast": "#113417",
|
|
1870
2141
|
"dark-dimmed-high-contrast": "#245829"
|
|
2142
|
+
},
|
|
2143
|
+
"org.primer.llm": {
|
|
2144
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2145
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1871
2146
|
}
|
|
1872
2147
|
},
|
|
1873
2148
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1875,6 +2150,7 @@
|
|
|
1875
2150
|
"original": {
|
|
1876
2151
|
"$value": "{base.color.green.7}",
|
|
1877
2152
|
"$type": "color",
|
|
2153
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1878
2154
|
"$extensions": {
|
|
1879
2155
|
"org.primer.figma": {
|
|
1880
2156
|
"collection": "mode",
|
|
@@ -1897,6 +2173,10 @@
|
|
|
1897
2173
|
"light-high-contrast": "{base.color.green.5}",
|
|
1898
2174
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1899
2175
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2176
|
+
},
|
|
2177
|
+
"org.primer.llm": {
|
|
2178
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2179
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1900
2180
|
}
|
|
1901
2181
|
},
|
|
1902
2182
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1909,6 +2189,7 @@
|
|
|
1909
2189
|
"key": "{bgColor.success.muted}",
|
|
1910
2190
|
"$value": "#46954a26",
|
|
1911
2191
|
"$type": "color",
|
|
2192
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1912
2193
|
"$extensions": {
|
|
1913
2194
|
"org.primer.figma": {
|
|
1914
2195
|
"collection": "mode",
|
|
@@ -1958,6 +2239,10 @@
|
|
|
1958
2239
|
"isSource": true,
|
|
1959
2240
|
"$type": "color"
|
|
1960
2241
|
}
|
|
2242
|
+
},
|
|
2243
|
+
"org.primer.llm": {
|
|
2244
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2245
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1961
2246
|
}
|
|
1962
2247
|
},
|
|
1963
2248
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1966,6 +2251,7 @@
|
|
|
1966
2251
|
"original": {
|
|
1967
2252
|
"$value": "{base.color.green.4}",
|
|
1968
2253
|
"$type": "color",
|
|
2254
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1969
2255
|
"$extensions": {
|
|
1970
2256
|
"org.primer.figma": {
|
|
1971
2257
|
"collection": "mode",
|
|
@@ -2015,6 +2301,10 @@
|
|
|
2015
2301
|
"isSource": true,
|
|
2016
2302
|
"$type": "color"
|
|
2017
2303
|
}
|
|
2304
|
+
},
|
|
2305
|
+
"org.primer.llm": {
|
|
2306
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2307
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2018
2308
|
}
|
|
2019
2309
|
},
|
|
2020
2310
|
"alpha": 0.15,
|
|
@@ -2028,6 +2318,7 @@
|
|
|
2028
2318
|
"key": "{bgColor.transparent}",
|
|
2029
2319
|
"$value": "#00000000",
|
|
2030
2320
|
"$type": "color",
|
|
2321
|
+
"$description": "Fully transparent background",
|
|
2031
2322
|
"$extensions": {
|
|
2032
2323
|
"org.primer.figma": {
|
|
2033
2324
|
"collection": "mode",
|
|
@@ -2036,6 +2327,10 @@
|
|
|
2036
2327
|
"codeSyntax": {
|
|
2037
2328
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2038
2329
|
}
|
|
2330
|
+
},
|
|
2331
|
+
"org.primer.llm": {
|
|
2332
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2333
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2039
2334
|
}
|
|
2040
2335
|
},
|
|
2041
2336
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2043,6 +2338,7 @@
|
|
|
2043
2338
|
"original": {
|
|
2044
2339
|
"$value": "{base.color.transparent}",
|
|
2045
2340
|
"$type": "color",
|
|
2341
|
+
"$description": "Fully transparent background",
|
|
2046
2342
|
"$extensions": {
|
|
2047
2343
|
"org.primer.figma": {
|
|
2048
2344
|
"collection": "mode",
|
|
@@ -2051,6 +2347,10 @@
|
|
|
2051
2347
|
"codeSyntax": {
|
|
2052
2348
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2053
2349
|
}
|
|
2350
|
+
},
|
|
2351
|
+
"org.primer.llm": {
|
|
2352
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2353
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2054
2354
|
}
|
|
2055
2355
|
},
|
|
2056
2356
|
"key": "{bgColor.transparent}"
|
|
@@ -2063,6 +2363,7 @@
|
|
|
2063
2363
|
"key": "{bgColor.upsell.emphasis}",
|
|
2064
2364
|
"$value": "#5936a2",
|
|
2065
2365
|
"$type": "color",
|
|
2366
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2066
2367
|
"$extensions": {
|
|
2067
2368
|
"org.primer.figma": {
|
|
2068
2369
|
"collection": "mode",
|
|
@@ -2071,6 +2372,10 @@
|
|
|
2071
2372
|
"codeSyntax": {
|
|
2072
2373
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2073
2374
|
}
|
|
2375
|
+
},
|
|
2376
|
+
"org.primer.llm": {
|
|
2377
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2378
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2074
2379
|
}
|
|
2075
2380
|
},
|
|
2076
2381
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2078,6 +2383,7 @@
|
|
|
2078
2383
|
"original": {
|
|
2079
2384
|
"$value": "{bgColor.done.emphasis}",
|
|
2080
2385
|
"$type": "color",
|
|
2386
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2081
2387
|
"$extensions": {
|
|
2082
2388
|
"org.primer.figma": {
|
|
2083
2389
|
"collection": "mode",
|
|
@@ -2086,6 +2392,10 @@
|
|
|
2086
2392
|
"codeSyntax": {
|
|
2087
2393
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2088
2394
|
}
|
|
2395
|
+
},
|
|
2396
|
+
"org.primer.llm": {
|
|
2397
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2398
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2089
2399
|
}
|
|
2090
2400
|
},
|
|
2091
2401
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2098,6 +2408,7 @@
|
|
|
2098
2408
|
"key": "{bgColor.upsell.muted}",
|
|
2099
2409
|
"$value": "#986ee226",
|
|
2100
2410
|
"$type": "color",
|
|
2411
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2101
2412
|
"$extensions": {
|
|
2102
2413
|
"org.primer.figma": {
|
|
2103
2414
|
"collection": "mode",
|
|
@@ -2106,6 +2417,10 @@
|
|
|
2106
2417
|
"codeSyntax": {
|
|
2107
2418
|
"web": "var(--bgColor-upsell-muted)"
|
|
2108
2419
|
}
|
|
2420
|
+
},
|
|
2421
|
+
"org.primer.llm": {
|
|
2422
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2423
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2109
2424
|
}
|
|
2110
2425
|
},
|
|
2111
2426
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2113,6 +2428,7 @@
|
|
|
2113
2428
|
"original": {
|
|
2114
2429
|
"$value": "{bgColor.done.muted}",
|
|
2115
2430
|
"$type": "color",
|
|
2431
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2116
2432
|
"$extensions": {
|
|
2117
2433
|
"org.primer.figma": {
|
|
2118
2434
|
"collection": "mode",
|
|
@@ -2121,6 +2437,10 @@
|
|
|
2121
2437
|
"codeSyntax": {
|
|
2122
2438
|
"web": "var(--bgColor-upsell-muted)"
|
|
2123
2439
|
}
|
|
2440
|
+
},
|
|
2441
|
+
"org.primer.llm": {
|
|
2442
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2443
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2124
2444
|
}
|
|
2125
2445
|
},
|
|
2126
2446
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2133,6 +2453,7 @@
|
|
|
2133
2453
|
"key": "{bgColor.white}",
|
|
2134
2454
|
"$value": "#cdd9e5",
|
|
2135
2455
|
"$type": "color",
|
|
2456
|
+
"$description": "Pure white background",
|
|
2136
2457
|
"$extensions": {
|
|
2137
2458
|
"org.primer.figma": {
|
|
2138
2459
|
"collection": "mode",
|
|
@@ -2141,6 +2462,10 @@
|
|
|
2141
2462
|
},
|
|
2142
2463
|
"org.primer.overrides": {
|
|
2143
2464
|
"dark": "#cdd9e5"
|
|
2465
|
+
},
|
|
2466
|
+
"org.primer.llm": {
|
|
2467
|
+
"doNotUse": true,
|
|
2468
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2144
2469
|
}
|
|
2145
2470
|
},
|
|
2146
2471
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2148,6 +2473,7 @@
|
|
|
2148
2473
|
"original": {
|
|
2149
2474
|
"$value": "{base.color.neutral.13}",
|
|
2150
2475
|
"$type": "color",
|
|
2476
|
+
"$description": "Pure white background",
|
|
2151
2477
|
"$extensions": {
|
|
2152
2478
|
"org.primer.figma": {
|
|
2153
2479
|
"collection": "mode",
|
|
@@ -2156,6 +2482,10 @@
|
|
|
2156
2482
|
},
|
|
2157
2483
|
"org.primer.overrides": {
|
|
2158
2484
|
"dark": "{base.color.neutral.13}"
|
|
2485
|
+
},
|
|
2486
|
+
"org.primer.llm": {
|
|
2487
|
+
"doNotUse": true,
|
|
2488
|
+
"rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
2159
2489
|
}
|
|
2160
2490
|
},
|
|
2161
2491
|
"key": "{bgColor.white}"
|
|
@@ -2166,7 +2496,7 @@
|
|
|
2166
2496
|
},
|
|
2167
2497
|
"border-accent-emphasis": {
|
|
2168
2498
|
"key": "{border.accent.emphasis}",
|
|
2169
|
-
"$value": "0.
|
|
2499
|
+
"$value": "0.0625rem,1px solid #6cb6ff",
|
|
2170
2500
|
"$type": "border",
|
|
2171
2501
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2172
2502
|
"isSource": true,
|
|
@@ -2185,7 +2515,7 @@
|
|
|
2185
2515
|
},
|
|
2186
2516
|
"border-accent-muted": {
|
|
2187
2517
|
"key": "{border.accent.muted}",
|
|
2188
|
-
"$value": "0.
|
|
2518
|
+
"$value": "0.0625rem,1px solid #6cb6ff",
|
|
2189
2519
|
"$type": "border",
|
|
2190
2520
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2191
2521
|
"isSource": true,
|
|
@@ -2204,7 +2534,7 @@
|
|
|
2204
2534
|
},
|
|
2205
2535
|
"border-attention-emphasis": {
|
|
2206
2536
|
"key": "{border.attention.emphasis}",
|
|
2207
|
-
"$value": "0.
|
|
2537
|
+
"$value": "0.0625rem,1px solid #daaa3f",
|
|
2208
2538
|
"$type": "border",
|
|
2209
2539
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2210
2540
|
"isSource": true,
|
|
@@ -2223,7 +2553,7 @@
|
|
|
2223
2553
|
},
|
|
2224
2554
|
"border-attention-muted": {
|
|
2225
2555
|
"key": "{border.attention.muted}",
|
|
2226
|
-
"$value": "0.
|
|
2556
|
+
"$value": "0.0625rem,1px solid #daaa3f",
|
|
2227
2557
|
"$type": "border",
|
|
2228
2558
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2229
2559
|
"isSource": true,
|
|
@@ -2242,7 +2572,7 @@
|
|
|
2242
2572
|
},
|
|
2243
2573
|
"border-closed-emphasis": {
|
|
2244
2574
|
"key": "{border.closed.emphasis}",
|
|
2245
|
-
"$value": "0.
|
|
2575
|
+
"$value": "0.0625rem,1px solid #ff938a",
|
|
2246
2576
|
"$type": "border",
|
|
2247
2577
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2248
2578
|
"isSource": true,
|
|
@@ -2257,7 +2587,7 @@
|
|
|
2257
2587
|
},
|
|
2258
2588
|
"border-closed-muted": {
|
|
2259
2589
|
"key": "{border.closed.muted}",
|
|
2260
|
-
"$value": "0.
|
|
2590
|
+
"$value": "0.0625rem,1px solid #ff938a",
|
|
2261
2591
|
"$type": "border",
|
|
2262
2592
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2263
2593
|
"isSource": true,
|
|
@@ -2272,7 +2602,7 @@
|
|
|
2272
2602
|
},
|
|
2273
2603
|
"border-danger-emphasis": {
|
|
2274
2604
|
"key": "{border.danger.emphasis}",
|
|
2275
|
-
"$value": "0.
|
|
2605
|
+
"$value": "0.0625rem,1px solid #ff938a",
|
|
2276
2606
|
"$type": "border",
|
|
2277
2607
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2278
2608
|
"isSource": true,
|
|
@@ -2291,7 +2621,7 @@
|
|
|
2291
2621
|
},
|
|
2292
2622
|
"border-danger-muted": {
|
|
2293
2623
|
"key": "{border.danger.muted}",
|
|
2294
|
-
"$value": "0.
|
|
2624
|
+
"$value": "0.0625rem,1px solid #ff938a",
|
|
2295
2625
|
"$type": "border",
|
|
2296
2626
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2297
2627
|
"isSource": true,
|
|
@@ -2310,7 +2640,7 @@
|
|
|
2310
2640
|
},
|
|
2311
2641
|
"border-default": {
|
|
2312
2642
|
"key": "{border.default}",
|
|
2313
|
-
"$value": "0.
|
|
2643
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2314
2644
|
"$type": "border",
|
|
2315
2645
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2316
2646
|
"isSource": true,
|
|
@@ -2329,7 +2659,7 @@
|
|
|
2329
2659
|
},
|
|
2330
2660
|
"border-disabled": {
|
|
2331
2661
|
"key": "{border.disabled}",
|
|
2332
|
-
"$value": "0.
|
|
2662
|
+
"$value": "0.0625rem,1px solid #656c761a",
|
|
2333
2663
|
"$type": "border",
|
|
2334
2664
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2335
2665
|
"isSource": true,
|
|
@@ -2348,7 +2678,7 @@
|
|
|
2348
2678
|
},
|
|
2349
2679
|
"border-done-emphasis": {
|
|
2350
2680
|
"key": "{border.done.emphasis}",
|
|
2351
|
-
"$value": "0.
|
|
2681
|
+
"$value": "0.0625rem,1px solid #dcbdfb",
|
|
2352
2682
|
"$type": "border",
|
|
2353
2683
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2354
2684
|
"isSource": true,
|
|
@@ -2367,7 +2697,7 @@
|
|
|
2367
2697
|
},
|
|
2368
2698
|
"border-done-muted": {
|
|
2369
2699
|
"key": "{border.done.muted}",
|
|
2370
|
-
"$value": "0.
|
|
2700
|
+
"$value": "0.0625rem,1px solid #dcbdfb",
|
|
2371
2701
|
"$type": "border",
|
|
2372
2702
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2373
2703
|
"isSource": true,
|
|
@@ -2386,7 +2716,7 @@
|
|
|
2386
2716
|
},
|
|
2387
2717
|
"border-emphasis": {
|
|
2388
2718
|
"key": "{border.emphasis}",
|
|
2389
|
-
"$value": "0.
|
|
2719
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2390
2720
|
"$type": "border",
|
|
2391
2721
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2392
2722
|
"isSource": true,
|
|
@@ -2405,7 +2735,7 @@
|
|
|
2405
2735
|
},
|
|
2406
2736
|
"border-muted": {
|
|
2407
2737
|
"key": "{border.muted}",
|
|
2408
|
-
"$value": "0.
|
|
2738
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2409
2739
|
"$type": "border",
|
|
2410
2740
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2411
2741
|
"isSource": true,
|
|
@@ -2424,7 +2754,7 @@
|
|
|
2424
2754
|
},
|
|
2425
2755
|
"border-neutral-emphasis": {
|
|
2426
2756
|
"key": "{border.neutral.emphasis}",
|
|
2427
|
-
"$value": "0.
|
|
2757
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2428
2758
|
"$type": "border",
|
|
2429
2759
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2430
2760
|
"isSource": true,
|
|
@@ -2443,7 +2773,7 @@
|
|
|
2443
2773
|
},
|
|
2444
2774
|
"border-neutral-muted": {
|
|
2445
2775
|
"key": "{border.neutral.muted}",
|
|
2446
|
-
"$value": "0.
|
|
2776
|
+
"$value": "0.0625rem,1px solid #b7bdc8",
|
|
2447
2777
|
"$type": "border",
|
|
2448
2778
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2449
2779
|
"isSource": true,
|
|
@@ -2462,7 +2792,7 @@
|
|
|
2462
2792
|
},
|
|
2463
2793
|
"border-open-emphasis": {
|
|
2464
2794
|
"key": "{border.open.emphasis}",
|
|
2465
|
-
"$value": "0.
|
|
2795
|
+
"$value": "0.0625rem,1px solid #6bc46d",
|
|
2466
2796
|
"$type": "border",
|
|
2467
2797
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2468
2798
|
"isSource": true,
|
|
@@ -2477,7 +2807,7 @@
|
|
|
2477
2807
|
},
|
|
2478
2808
|
"border-open-muted": {
|
|
2479
2809
|
"key": "{border.open.muted}",
|
|
2480
|
-
"$value": "0.
|
|
2810
|
+
"$value": "0.0625rem,1px solid #6bc46d",
|
|
2481
2811
|
"$type": "border",
|
|
2482
2812
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2483
2813
|
"isSource": true,
|
|
@@ -2492,7 +2822,7 @@
|
|
|
2492
2822
|
},
|
|
2493
2823
|
"border-severe-emphasis": {
|
|
2494
2824
|
"key": "{border.severe.emphasis}",
|
|
2495
|
-
"$value": "0.
|
|
2825
|
+
"$value": "0.0625rem,1px solid #f69d50",
|
|
2496
2826
|
"$type": "border",
|
|
2497
2827
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2498
2828
|
"isSource": true,
|
|
@@ -2511,7 +2841,7 @@
|
|
|
2511
2841
|
},
|
|
2512
2842
|
"border-severe-muted": {
|
|
2513
2843
|
"key": "{border.severe.muted}",
|
|
2514
|
-
"$value": "0.
|
|
2844
|
+
"$value": "0.0625rem,1px solid #f69d50",
|
|
2515
2845
|
"$type": "border",
|
|
2516
2846
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2517
2847
|
"isSource": true,
|
|
@@ -2530,7 +2860,7 @@
|
|
|
2530
2860
|
},
|
|
2531
2861
|
"border-sponsors-emphasis": {
|
|
2532
2862
|
"key": "{border.sponsors.emphasis}",
|
|
2533
|
-
"$value": "0.
|
|
2863
|
+
"$value": "0.0625rem,1px solid #e275ad",
|
|
2534
2864
|
"$type": "border",
|
|
2535
2865
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2536
2866
|
"isSource": true,
|
|
@@ -2549,7 +2879,7 @@
|
|
|
2549
2879
|
},
|
|
2550
2880
|
"border-sponsors-muted": {
|
|
2551
2881
|
"key": "{border.sponsors.muted}",
|
|
2552
|
-
"$value": "0.
|
|
2882
|
+
"$value": "0.0625rem,1px solid #fc8dc7",
|
|
2553
2883
|
"$type": "border",
|
|
2554
2884
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2555
2885
|
"isSource": true,
|
|
@@ -2568,7 +2898,7 @@
|
|
|
2568
2898
|
},
|
|
2569
2899
|
"border-success-emphasis": {
|
|
2570
2900
|
"key": "{border.success.emphasis}",
|
|
2571
|
-
"$value": "0.
|
|
2901
|
+
"$value": "0.0625rem,1px solid #6bc46d",
|
|
2572
2902
|
"$type": "border",
|
|
2573
2903
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2574
2904
|
"isSource": true,
|
|
@@ -2587,7 +2917,7 @@
|
|
|
2587
2917
|
},
|
|
2588
2918
|
"border-success-muted": {
|
|
2589
2919
|
"key": "{border.success.muted}",
|
|
2590
|
-
"$value": "0.
|
|
2920
|
+
"$value": "0.0625rem,1px solid #6bc46d",
|
|
2591
2921
|
"$type": "border",
|
|
2592
2922
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2593
2923
|
"isSource": true,
|
|
@@ -2606,7 +2936,7 @@
|
|
|
2606
2936
|
},
|
|
2607
2937
|
"border-transparent": {
|
|
2608
2938
|
"key": "{border.transparent}",
|
|
2609
|
-
"$value": "0.
|
|
2939
|
+
"$value": "0.0625rem,1px solid #00000000",
|
|
2610
2940
|
"$type": "border",
|
|
2611
2941
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2612
2942
|
"isSource": true,
|
|
@@ -2625,7 +2955,7 @@
|
|
|
2625
2955
|
},
|
|
2626
2956
|
"border-upsell-emphasis": {
|
|
2627
2957
|
"key": "{border.upsell.emphasis}",
|
|
2628
|
-
"$value": "0.
|
|
2958
|
+
"$value": "0.0625rem,1px solid #dcbdfb",
|
|
2629
2959
|
"$type": "border",
|
|
2630
2960
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2631
2961
|
"isSource": true,
|
|
@@ -2644,7 +2974,7 @@
|
|
|
2644
2974
|
},
|
|
2645
2975
|
"border-upsell-muted": {
|
|
2646
2976
|
"key": "{border.upsell.muted}",
|
|
2647
|
-
"$value": "0.
|
|
2977
|
+
"$value": "0.0625rem,1px solid #dcbdfb",
|
|
2648
2978
|
"$type": "border",
|
|
2649
2979
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2650
2980
|
"isSource": true,
|
|
@@ -2665,6 +2995,7 @@
|
|
|
2665
2995
|
"key": "{borderColor.accent.emphasis}",
|
|
2666
2996
|
"$value": "#6cb6ff",
|
|
2667
2997
|
"$type": "color",
|
|
2998
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2668
2999
|
"$extensions": {
|
|
2669
3000
|
"org.primer.figma": {
|
|
2670
3001
|
"collection": "mode",
|
|
@@ -2676,6 +3007,10 @@
|
|
|
2676
3007
|
},
|
|
2677
3008
|
"org.primer.overrides": {
|
|
2678
3009
|
"dark-dimmed-high-contrast": "#6cb6ff"
|
|
3010
|
+
},
|
|
3011
|
+
"org.primer.llm": {
|
|
3012
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3013
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2679
3014
|
}
|
|
2680
3015
|
},
|
|
2681
3016
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2683,6 +3018,7 @@
|
|
|
2683
3018
|
"original": {
|
|
2684
3019
|
"$value": "{base.color.blue.2}",
|
|
2685
3020
|
"$type": "color",
|
|
3021
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2686
3022
|
"$extensions": {
|
|
2687
3023
|
"org.primer.figma": {
|
|
2688
3024
|
"collection": "mode",
|
|
@@ -2694,6 +3030,10 @@
|
|
|
2694
3030
|
},
|
|
2695
3031
|
"org.primer.overrides": {
|
|
2696
3032
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3033
|
+
},
|
|
3034
|
+
"org.primer.llm": {
|
|
3035
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3036
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2697
3037
|
}
|
|
2698
3038
|
},
|
|
2699
3039
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2706,6 +3046,7 @@
|
|
|
2706
3046
|
"key": "{borderColor.accent.muted}",
|
|
2707
3047
|
"$value": "#6cb6ff",
|
|
2708
3048
|
"$type": "color",
|
|
3049
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2709
3050
|
"$extensions": {
|
|
2710
3051
|
"org.primer.figma": {
|
|
2711
3052
|
"collection": "mode",
|
|
@@ -2766,6 +3107,10 @@
|
|
|
2766
3107
|
"isSource": true,
|
|
2767
3108
|
"$type": "color"
|
|
2768
3109
|
}
|
|
3110
|
+
},
|
|
3111
|
+
"org.primer.llm": {
|
|
3112
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3113
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2769
3114
|
}
|
|
2770
3115
|
},
|
|
2771
3116
|
"alpha": 1,
|
|
@@ -2774,6 +3119,7 @@
|
|
|
2774
3119
|
"original": {
|
|
2775
3120
|
"$value": "{base.color.blue.2}",
|
|
2776
3121
|
"$type": "color",
|
|
3122
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2777
3123
|
"$extensions": {
|
|
2778
3124
|
"org.primer.figma": {
|
|
2779
3125
|
"collection": "mode",
|
|
@@ -2834,6 +3180,10 @@
|
|
|
2834
3180
|
"isSource": true,
|
|
2835
3181
|
"$type": "color"
|
|
2836
3182
|
}
|
|
3183
|
+
},
|
|
3184
|
+
"org.primer.llm": {
|
|
3185
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3186
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2837
3187
|
}
|
|
2838
3188
|
},
|
|
2839
3189
|
"alpha": 1,
|
|
@@ -2847,6 +3197,7 @@
|
|
|
2847
3197
|
"key": "{borderColor.attention.emphasis}",
|
|
2848
3198
|
"$value": "#daaa3f",
|
|
2849
3199
|
"$type": "color",
|
|
3200
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2850
3201
|
"$extensions": {
|
|
2851
3202
|
"org.primer.figma": {
|
|
2852
3203
|
"collection": "mode",
|
|
@@ -2858,6 +3209,10 @@
|
|
|
2858
3209
|
},
|
|
2859
3210
|
"org.primer.overrides": {
|
|
2860
3211
|
"dark-dimmed-high-contrast": "#daaa3f"
|
|
3212
|
+
},
|
|
3213
|
+
"org.primer.llm": {
|
|
3214
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3215
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2861
3216
|
}
|
|
2862
3217
|
},
|
|
2863
3218
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2865,6 +3220,7 @@
|
|
|
2865
3220
|
"original": {
|
|
2866
3221
|
"$value": "{base.color.yellow.2}",
|
|
2867
3222
|
"$type": "color",
|
|
3223
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2868
3224
|
"$extensions": {
|
|
2869
3225
|
"org.primer.figma": {
|
|
2870
3226
|
"collection": "mode",
|
|
@@ -2876,6 +3232,10 @@
|
|
|
2876
3232
|
},
|
|
2877
3233
|
"org.primer.overrides": {
|
|
2878
3234
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3235
|
+
},
|
|
3236
|
+
"org.primer.llm": {
|
|
3237
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3238
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2879
3239
|
}
|
|
2880
3240
|
},
|
|
2881
3241
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2888,6 +3248,7 @@
|
|
|
2888
3248
|
"key": "{borderColor.attention.muted}",
|
|
2889
3249
|
"$value": "#daaa3f",
|
|
2890
3250
|
"$type": "color",
|
|
3251
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2891
3252
|
"$extensions": {
|
|
2892
3253
|
"org.primer.figma": {
|
|
2893
3254
|
"collection": "mode",
|
|
@@ -2948,6 +3309,10 @@
|
|
|
2948
3309
|
"isSource": true,
|
|
2949
3310
|
"$type": "color"
|
|
2950
3311
|
}
|
|
3312
|
+
},
|
|
3313
|
+
"org.primer.llm": {
|
|
3314
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3315
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2951
3316
|
}
|
|
2952
3317
|
},
|
|
2953
3318
|
"alpha": 1,
|
|
@@ -2956,6 +3321,7 @@
|
|
|
2956
3321
|
"original": {
|
|
2957
3322
|
"$value": "{base.color.yellow.2}",
|
|
2958
3323
|
"$type": "color",
|
|
3324
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2959
3325
|
"$extensions": {
|
|
2960
3326
|
"org.primer.figma": {
|
|
2961
3327
|
"collection": "mode",
|
|
@@ -3016,6 +3382,10 @@
|
|
|
3016
3382
|
"isSource": true,
|
|
3017
3383
|
"$type": "color"
|
|
3018
3384
|
}
|
|
3385
|
+
},
|
|
3386
|
+
"org.primer.llm": {
|
|
3387
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3388
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3019
3389
|
}
|
|
3020
3390
|
},
|
|
3021
3391
|
"alpha": 1,
|
|
@@ -3029,6 +3399,7 @@
|
|
|
3029
3399
|
"key": "{borderColor.closed.emphasis}",
|
|
3030
3400
|
"$value": "#ff938a",
|
|
3031
3401
|
"$type": "color",
|
|
3402
|
+
"$description": "Strong border for closed state badges",
|
|
3032
3403
|
"$extensions": {
|
|
3033
3404
|
"org.primer.figma": {
|
|
3034
3405
|
"collection": "mode",
|
|
@@ -3047,6 +3418,10 @@
|
|
|
3047
3418
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
3048
3419
|
"light-tritanopia": "#b7bdc8",
|
|
3049
3420
|
"light-tritanopia-high-contrast": "#b7bdc8"
|
|
3421
|
+
},
|
|
3422
|
+
"org.primer.llm": {
|
|
3423
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3424
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3050
3425
|
}
|
|
3051
3426
|
},
|
|
3052
3427
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3054,6 +3429,7 @@
|
|
|
3054
3429
|
"original": {
|
|
3055
3430
|
"$value": "{borderColor.danger.emphasis}",
|
|
3056
3431
|
"$type": "color",
|
|
3432
|
+
"$description": "Strong border for closed state badges",
|
|
3057
3433
|
"$extensions": {
|
|
3058
3434
|
"org.primer.figma": {
|
|
3059
3435
|
"collection": "mode",
|
|
@@ -3072,6 +3448,10 @@
|
|
|
3072
3448
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3073
3449
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3074
3450
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3451
|
+
},
|
|
3452
|
+
"org.primer.llm": {
|
|
3453
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3454
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3075
3455
|
}
|
|
3076
3456
|
},
|
|
3077
3457
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3084,6 +3464,7 @@
|
|
|
3084
3464
|
"key": "{borderColor.closed.muted}",
|
|
3085
3465
|
"$value": "#ff938a",
|
|
3086
3466
|
"$type": "color",
|
|
3467
|
+
"$description": "Subtle border for closed state indicators",
|
|
3087
3468
|
"$extensions": {
|
|
3088
3469
|
"org.primer.figma": {
|
|
3089
3470
|
"collection": "mode",
|
|
@@ -3150,6 +3531,10 @@
|
|
|
3150
3531
|
"isSource": true,
|
|
3151
3532
|
"$type": "color"
|
|
3152
3533
|
}
|
|
3534
|
+
},
|
|
3535
|
+
"org.primer.llm": {
|
|
3536
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3537
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3153
3538
|
}
|
|
3154
3539
|
},
|
|
3155
3540
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3157,6 +3542,7 @@
|
|
|
3157
3542
|
"original": {
|
|
3158
3543
|
"$value": "{borderColor.danger.muted}",
|
|
3159
3544
|
"$type": "color",
|
|
3545
|
+
"$description": "Subtle border for closed state indicators",
|
|
3160
3546
|
"$extensions": {
|
|
3161
3547
|
"org.primer.figma": {
|
|
3162
3548
|
"collection": "mode",
|
|
@@ -3223,6 +3609,10 @@
|
|
|
3223
3609
|
"isSource": true,
|
|
3224
3610
|
"$type": "color"
|
|
3225
3611
|
}
|
|
3612
|
+
},
|
|
3613
|
+
"org.primer.llm": {
|
|
3614
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3615
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3226
3616
|
}
|
|
3227
3617
|
},
|
|
3228
3618
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3235,6 +3625,7 @@
|
|
|
3235
3625
|
"key": "{borderColor.danger.emphasis}",
|
|
3236
3626
|
"$value": "#ff938a",
|
|
3237
3627
|
"$type": "color",
|
|
3628
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3238
3629
|
"$extensions": {
|
|
3239
3630
|
"org.primer.figma": {
|
|
3240
3631
|
"collection": "mode",
|
|
@@ -3270,6 +3661,10 @@
|
|
|
3270
3661
|
"$type": "color"
|
|
3271
3662
|
},
|
|
3272
3663
|
"dark-dimmed-high-contrast": "#ff938a"
|
|
3664
|
+
},
|
|
3665
|
+
"org.primer.llm": {
|
|
3666
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3667
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3273
3668
|
}
|
|
3274
3669
|
},
|
|
3275
3670
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3277,6 +3672,7 @@
|
|
|
3277
3672
|
"original": {
|
|
3278
3673
|
"$value": "{base.color.red.2}",
|
|
3279
3674
|
"$type": "color",
|
|
3675
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3280
3676
|
"$extensions": {
|
|
3281
3677
|
"org.primer.figma": {
|
|
3282
3678
|
"collection": "mode",
|
|
@@ -3312,6 +3708,10 @@
|
|
|
3312
3708
|
"$type": "color"
|
|
3313
3709
|
},
|
|
3314
3710
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3711
|
+
},
|
|
3712
|
+
"org.primer.llm": {
|
|
3713
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3714
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3315
3715
|
}
|
|
3316
3716
|
},
|
|
3317
3717
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3324,6 +3724,7 @@
|
|
|
3324
3724
|
"key": "{borderColor.danger.muted}",
|
|
3325
3725
|
"$value": "#ff938a",
|
|
3326
3726
|
"$type": "color",
|
|
3727
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3327
3728
|
"$extensions": {
|
|
3328
3729
|
"org.primer.figma": {
|
|
3329
3730
|
"collection": "mode",
|
|
@@ -3397,6 +3798,10 @@
|
|
|
3397
3798
|
"isSource": true,
|
|
3398
3799
|
"$type": "color"
|
|
3399
3800
|
}
|
|
3801
|
+
},
|
|
3802
|
+
"org.primer.llm": {
|
|
3803
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3804
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3400
3805
|
}
|
|
3401
3806
|
},
|
|
3402
3807
|
"alpha": 1,
|
|
@@ -3405,6 +3810,7 @@
|
|
|
3405
3810
|
"original": {
|
|
3406
3811
|
"$value": "{base.color.red.2}",
|
|
3407
3812
|
"$type": "color",
|
|
3813
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3408
3814
|
"$extensions": {
|
|
3409
3815
|
"org.primer.figma": {
|
|
3410
3816
|
"collection": "mode",
|
|
@@ -3478,6 +3884,10 @@
|
|
|
3478
3884
|
"isSource": true,
|
|
3479
3885
|
"$type": "color"
|
|
3480
3886
|
}
|
|
3887
|
+
},
|
|
3888
|
+
"org.primer.llm": {
|
|
3889
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3890
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3481
3891
|
}
|
|
3482
3892
|
},
|
|
3483
3893
|
"alpha": 1,
|
|
@@ -3491,6 +3901,7 @@
|
|
|
3491
3901
|
"key": "{borderColor.default}",
|
|
3492
3902
|
"$value": "#b7bdc8",
|
|
3493
3903
|
"$type": "color",
|
|
3904
|
+
"$description": "Default border color for most UI elements",
|
|
3494
3905
|
"$extensions": {
|
|
3495
3906
|
"org.primer.overrides": {
|
|
3496
3907
|
"dark": "#3d444d",
|
|
@@ -3510,6 +3921,10 @@
|
|
|
3510
3921
|
"codeSyntax": {
|
|
3511
3922
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3512
3923
|
}
|
|
3924
|
+
},
|
|
3925
|
+
"org.primer.llm": {
|
|
3926
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3927
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3513
3928
|
}
|
|
3514
3929
|
},
|
|
3515
3930
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3517,6 +3932,7 @@
|
|
|
3517
3932
|
"original": {
|
|
3518
3933
|
"$value": "{base.color.neutral.10}",
|
|
3519
3934
|
"$type": "color",
|
|
3935
|
+
"$description": "Default border color for most UI elements",
|
|
3520
3936
|
"$extensions": {
|
|
3521
3937
|
"org.primer.overrides": {
|
|
3522
3938
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3536,6 +3952,10 @@
|
|
|
3536
3952
|
"codeSyntax": {
|
|
3537
3953
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3538
3954
|
}
|
|
3955
|
+
},
|
|
3956
|
+
"org.primer.llm": {
|
|
3957
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3958
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3539
3959
|
}
|
|
3540
3960
|
},
|
|
3541
3961
|
"key": "{borderColor.default}"
|
|
@@ -3548,6 +3968,7 @@
|
|
|
3548
3968
|
"key": "{borderColor.disabled}",
|
|
3549
3969
|
"$value": "#656c761a",
|
|
3550
3970
|
"$type": "color",
|
|
3971
|
+
"$description": "Border color for disabled interactive elements",
|
|
3551
3972
|
"$extensions": {
|
|
3552
3973
|
"org.primer.figma": {
|
|
3553
3974
|
"collection": "mode",
|
|
@@ -3590,6 +4011,10 @@
|
|
|
3590
4011
|
"isSource": true,
|
|
3591
4012
|
"$type": "color"
|
|
3592
4013
|
}
|
|
4014
|
+
},
|
|
4015
|
+
"org.primer.llm": {
|
|
4016
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4017
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3593
4018
|
}
|
|
3594
4019
|
},
|
|
3595
4020
|
"alpha": 0.1,
|
|
@@ -3598,6 +4023,7 @@
|
|
|
3598
4023
|
"original": {
|
|
3599
4024
|
"$value": "{base.color.neutral.8}",
|
|
3600
4025
|
"$type": "color",
|
|
4026
|
+
"$description": "Border color for disabled interactive elements",
|
|
3601
4027
|
"$extensions": {
|
|
3602
4028
|
"org.primer.figma": {
|
|
3603
4029
|
"collection": "mode",
|
|
@@ -3640,6 +4066,10 @@
|
|
|
3640
4066
|
"isSource": true,
|
|
3641
4067
|
"$type": "color"
|
|
3642
4068
|
}
|
|
4069
|
+
},
|
|
4070
|
+
"org.primer.llm": {
|
|
4071
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4072
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3643
4073
|
}
|
|
3644
4074
|
},
|
|
3645
4075
|
"alpha": 0.1,
|
|
@@ -3653,6 +4083,7 @@
|
|
|
3653
4083
|
"key": "{borderColor.done.emphasis}",
|
|
3654
4084
|
"$value": "#dcbdfb",
|
|
3655
4085
|
"$type": "color",
|
|
4086
|
+
"$description": "Strong border for completed/done state badges",
|
|
3656
4087
|
"$extensions": {
|
|
3657
4088
|
"org.primer.figma": {
|
|
3658
4089
|
"collection": "mode",
|
|
@@ -3664,6 +4095,10 @@
|
|
|
3664
4095
|
},
|
|
3665
4096
|
"org.primer.overrides": {
|
|
3666
4097
|
"dark-dimmed-high-contrast": "#dcbdfb"
|
|
4098
|
+
},
|
|
4099
|
+
"org.primer.llm": {
|
|
4100
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4101
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3667
4102
|
}
|
|
3668
4103
|
},
|
|
3669
4104
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3671,6 +4106,7 @@
|
|
|
3671
4106
|
"original": {
|
|
3672
4107
|
"$value": "{base.color.purple.2}",
|
|
3673
4108
|
"$type": "color",
|
|
4109
|
+
"$description": "Strong border for completed/done state badges",
|
|
3674
4110
|
"$extensions": {
|
|
3675
4111
|
"org.primer.figma": {
|
|
3676
4112
|
"collection": "mode",
|
|
@@ -3682,6 +4118,10 @@
|
|
|
3682
4118
|
},
|
|
3683
4119
|
"org.primer.overrides": {
|
|
3684
4120
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4121
|
+
},
|
|
4122
|
+
"org.primer.llm": {
|
|
4123
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4124
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3685
4125
|
}
|
|
3686
4126
|
},
|
|
3687
4127
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3694,6 +4134,7 @@
|
|
|
3694
4134
|
"key": "{borderColor.done.muted}",
|
|
3695
4135
|
"$value": "#dcbdfb",
|
|
3696
4136
|
"$type": "color",
|
|
4137
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3697
4138
|
"$extensions": {
|
|
3698
4139
|
"org.primer.figma": {
|
|
3699
4140
|
"collection": "mode",
|
|
@@ -3754,6 +4195,10 @@
|
|
|
3754
4195
|
"isSource": true,
|
|
3755
4196
|
"$type": "color"
|
|
3756
4197
|
}
|
|
4198
|
+
},
|
|
4199
|
+
"org.primer.llm": {
|
|
4200
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4201
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3757
4202
|
}
|
|
3758
4203
|
},
|
|
3759
4204
|
"alpha": 1,
|
|
@@ -3762,6 +4207,7 @@
|
|
|
3762
4207
|
"original": {
|
|
3763
4208
|
"$value": "{base.color.purple.2}",
|
|
3764
4209
|
"$type": "color",
|
|
4210
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3765
4211
|
"$extensions": {
|
|
3766
4212
|
"org.primer.figma": {
|
|
3767
4213
|
"collection": "mode",
|
|
@@ -3822,6 +4268,10 @@
|
|
|
3822
4268
|
"isSource": true,
|
|
3823
4269
|
"$type": "color"
|
|
3824
4270
|
}
|
|
4271
|
+
},
|
|
4272
|
+
"org.primer.llm": {
|
|
4273
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4274
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3825
4275
|
}
|
|
3826
4276
|
},
|
|
3827
4277
|
"alpha": 1,
|
|
@@ -3835,6 +4285,7 @@
|
|
|
3835
4285
|
"key": "{borderColor.draft.emphasis}",
|
|
3836
4286
|
"$value": "#b7bdc8",
|
|
3837
4287
|
"$type": "color",
|
|
4288
|
+
"$description": "Strong border for draft state badges",
|
|
3838
4289
|
"$extensions": {
|
|
3839
4290
|
"org.primer.figma": {
|
|
3840
4291
|
"collection": "mode",
|
|
@@ -3843,6 +4294,10 @@
|
|
|
3843
4294
|
"codeSyntax": {
|
|
3844
4295
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3845
4296
|
}
|
|
4297
|
+
},
|
|
4298
|
+
"org.primer.llm": {
|
|
4299
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4300
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3846
4301
|
}
|
|
3847
4302
|
},
|
|
3848
4303
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3850,6 +4305,7 @@
|
|
|
3850
4305
|
"original": {
|
|
3851
4306
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3852
4307
|
"$type": "color",
|
|
4308
|
+
"$description": "Strong border for draft state badges",
|
|
3853
4309
|
"$extensions": {
|
|
3854
4310
|
"org.primer.figma": {
|
|
3855
4311
|
"collection": "mode",
|
|
@@ -3858,6 +4314,10 @@
|
|
|
3858
4314
|
"codeSyntax": {
|
|
3859
4315
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3860
4316
|
}
|
|
4317
|
+
},
|
|
4318
|
+
"org.primer.llm": {
|
|
4319
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4320
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3861
4321
|
}
|
|
3862
4322
|
},
|
|
3863
4323
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3870,6 +4330,7 @@
|
|
|
3870
4330
|
"key": "{borderColor.draft.muted}",
|
|
3871
4331
|
"$value": "#b7bdc8",
|
|
3872
4332
|
"$type": "color",
|
|
4333
|
+
"$description": "Subtle border for draft state indicators",
|
|
3873
4334
|
"$extensions": {
|
|
3874
4335
|
"org.primer.figma": {
|
|
3875
4336
|
"collection": "mode",
|
|
@@ -3936,6 +4397,10 @@
|
|
|
3936
4397
|
"isSource": true,
|
|
3937
4398
|
"$type": "color"
|
|
3938
4399
|
}
|
|
4400
|
+
},
|
|
4401
|
+
"org.primer.llm": {
|
|
4402
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4403
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3939
4404
|
}
|
|
3940
4405
|
},
|
|
3941
4406
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3943,6 +4408,7 @@
|
|
|
3943
4408
|
"original": {
|
|
3944
4409
|
"$value": "{borderColor.neutral.muted}",
|
|
3945
4410
|
"$type": "color",
|
|
4411
|
+
"$description": "Subtle border for draft state indicators",
|
|
3946
4412
|
"$extensions": {
|
|
3947
4413
|
"org.primer.figma": {
|
|
3948
4414
|
"collection": "mode",
|
|
@@ -4009,6 +4475,10 @@
|
|
|
4009
4475
|
"isSource": true,
|
|
4010
4476
|
"$type": "color"
|
|
4011
4477
|
}
|
|
4478
|
+
},
|
|
4479
|
+
"org.primer.llm": {
|
|
4480
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4481
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
4012
4482
|
}
|
|
4013
4483
|
},
|
|
4014
4484
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4021,6 +4491,7 @@
|
|
|
4021
4491
|
"key": "{borderColor.emphasis}",
|
|
4022
4492
|
"$value": "#b7bdc8",
|
|
4023
4493
|
"$type": "color",
|
|
4494
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4024
4495
|
"$extensions": {
|
|
4025
4496
|
"org.primer.figma": {
|
|
4026
4497
|
"collection": "mode",
|
|
@@ -4035,6 +4506,10 @@
|
|
|
4035
4506
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
4036
4507
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
4037
4508
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
4509
|
+
},
|
|
4510
|
+
"org.primer.llm": {
|
|
4511
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4512
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4038
4513
|
}
|
|
4039
4514
|
},
|
|
4040
4515
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4042,6 +4517,7 @@
|
|
|
4042
4517
|
"original": {
|
|
4043
4518
|
"$value": "{borderColor.default}",
|
|
4044
4519
|
"$type": "color",
|
|
4520
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4045
4521
|
"$extensions": {
|
|
4046
4522
|
"org.primer.figma": {
|
|
4047
4523
|
"collection": "mode",
|
|
@@ -4056,6 +4532,10 @@
|
|
|
4056
4532
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4057
4533
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4058
4534
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4535
|
+
},
|
|
4536
|
+
"org.primer.llm": {
|
|
4537
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4538
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4059
4539
|
}
|
|
4060
4540
|
},
|
|
4061
4541
|
"key": "{borderColor.emphasis}"
|
|
@@ -4068,6 +4548,7 @@
|
|
|
4068
4548
|
"key": "{borderColor.muted}",
|
|
4069
4549
|
"$value": "#b7bdc8",
|
|
4070
4550
|
"$type": "color",
|
|
4551
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4071
4552
|
"$extensions": {
|
|
4072
4553
|
"org.primer.figma": {
|
|
4073
4554
|
"collection": "mode",
|
|
@@ -4134,6 +4615,10 @@
|
|
|
4134
4615
|
"isSource": true,
|
|
4135
4616
|
"$type": "color"
|
|
4136
4617
|
}
|
|
4618
|
+
},
|
|
4619
|
+
"org.primer.llm": {
|
|
4620
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4621
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4137
4622
|
}
|
|
4138
4623
|
},
|
|
4139
4624
|
"alpha": 1,
|
|
@@ -4142,6 +4627,7 @@
|
|
|
4142
4627
|
"original": {
|
|
4143
4628
|
"$value": "{borderColor.default}",
|
|
4144
4629
|
"$type": "color",
|
|
4630
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4145
4631
|
"$extensions": {
|
|
4146
4632
|
"org.primer.figma": {
|
|
4147
4633
|
"collection": "mode",
|
|
@@ -4208,6 +4694,10 @@
|
|
|
4208
4694
|
"isSource": true,
|
|
4209
4695
|
"$type": "color"
|
|
4210
4696
|
}
|
|
4697
|
+
},
|
|
4698
|
+
"org.primer.llm": {
|
|
4699
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4700
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4211
4701
|
}
|
|
4212
4702
|
},
|
|
4213
4703
|
"alpha": 1,
|
|
@@ -4221,6 +4711,7 @@
|
|
|
4221
4711
|
"key": "{borderColor.neutral.emphasis}",
|
|
4222
4712
|
"$value": "#b7bdc8",
|
|
4223
4713
|
"$type": "color",
|
|
4714
|
+
"$description": "Strong neutral semantic border",
|
|
4224
4715
|
"$extensions": {
|
|
4225
4716
|
"org.primer.figma": {
|
|
4226
4717
|
"collection": "mode",
|
|
@@ -4229,6 +4720,10 @@
|
|
|
4229
4720
|
},
|
|
4230
4721
|
"org.primer.overrides": {
|
|
4231
4722
|
"dark": "#b7bdc8"
|
|
4723
|
+
},
|
|
4724
|
+
"org.primer.llm": {
|
|
4725
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4726
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4232
4727
|
}
|
|
4233
4728
|
},
|
|
4234
4729
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4236,6 +4731,7 @@
|
|
|
4236
4731
|
"original": {
|
|
4237
4732
|
"$value": "{borderColor.emphasis}",
|
|
4238
4733
|
"$type": "color",
|
|
4734
|
+
"$description": "Strong neutral semantic border",
|
|
4239
4735
|
"$extensions": {
|
|
4240
4736
|
"org.primer.figma": {
|
|
4241
4737
|
"collection": "mode",
|
|
@@ -4244,6 +4740,10 @@
|
|
|
4244
4740
|
},
|
|
4245
4741
|
"org.primer.overrides": {
|
|
4246
4742
|
"dark": "{borderColor.emphasis}"
|
|
4743
|
+
},
|
|
4744
|
+
"org.primer.llm": {
|
|
4745
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4746
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4247
4747
|
}
|
|
4248
4748
|
},
|
|
4249
4749
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4256,6 +4756,7 @@
|
|
|
4256
4756
|
"key": "{borderColor.neutral.muted}",
|
|
4257
4757
|
"$value": "#b7bdc8",
|
|
4258
4758
|
"$type": "color",
|
|
4759
|
+
"$description": "Subtle neutral semantic border",
|
|
4259
4760
|
"$extensions": {
|
|
4260
4761
|
"org.primer.figma": {
|
|
4261
4762
|
"collection": "mode",
|
|
@@ -4277,6 +4778,10 @@
|
|
|
4277
4778
|
"isSource": true,
|
|
4278
4779
|
"$type": "color"
|
|
4279
4780
|
}
|
|
4781
|
+
},
|
|
4782
|
+
"org.primer.llm": {
|
|
4783
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4784
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4280
4785
|
}
|
|
4281
4786
|
},
|
|
4282
4787
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4285,6 +4790,7 @@
|
|
|
4285
4790
|
"original": {
|
|
4286
4791
|
"$value": "{borderColor.muted}",
|
|
4287
4792
|
"$type": "color",
|
|
4793
|
+
"$description": "Subtle neutral semantic border",
|
|
4288
4794
|
"$extensions": {
|
|
4289
4795
|
"org.primer.figma": {
|
|
4290
4796
|
"collection": "mode",
|
|
@@ -4306,6 +4812,10 @@
|
|
|
4306
4812
|
"isSource": true,
|
|
4307
4813
|
"$type": "color"
|
|
4308
4814
|
}
|
|
4815
|
+
},
|
|
4816
|
+
"org.primer.llm": {
|
|
4817
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4818
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4309
4819
|
}
|
|
4310
4820
|
},
|
|
4311
4821
|
"alpha": 1,
|
|
@@ -4319,6 +4829,7 @@
|
|
|
4319
4829
|
"key": "{borderColor.open.emphasis}",
|
|
4320
4830
|
"$value": "#6bc46d",
|
|
4321
4831
|
"$type": "color",
|
|
4832
|
+
"$description": "Strong border for open state badges",
|
|
4322
4833
|
"$extensions": {
|
|
4323
4834
|
"org.primer.figma": {
|
|
4324
4835
|
"collection": "mode",
|
|
@@ -4337,6 +4848,10 @@
|
|
|
4337
4848
|
"dark-protanopia-deuteranopia-high-contrast": "#ae5622",
|
|
4338
4849
|
"light-protanopia-deuteranopia": "#ae5622",
|
|
4339
4850
|
"light-protanopia-deuteranopia-high-contrast": "#ae5622"
|
|
4851
|
+
},
|
|
4852
|
+
"org.primer.llm": {
|
|
4853
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4854
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4340
4855
|
}
|
|
4341
4856
|
},
|
|
4342
4857
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4344,6 +4859,7 @@
|
|
|
4344
4859
|
"original": {
|
|
4345
4860
|
"$value": "{borderColor.success.emphasis}",
|
|
4346
4861
|
"$type": "color",
|
|
4862
|
+
"$description": "Strong border for open state badges",
|
|
4347
4863
|
"$extensions": {
|
|
4348
4864
|
"org.primer.figma": {
|
|
4349
4865
|
"collection": "mode",
|
|
@@ -4362,6 +4878,10 @@
|
|
|
4362
4878
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4363
4879
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4364
4880
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4881
|
+
},
|
|
4882
|
+
"org.primer.llm": {
|
|
4883
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4884
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4365
4885
|
}
|
|
4366
4886
|
},
|
|
4367
4887
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4374,6 +4894,7 @@
|
|
|
4374
4894
|
"key": "{borderColor.open.muted}",
|
|
4375
4895
|
"$value": "#6bc46d",
|
|
4376
4896
|
"$type": "color",
|
|
4897
|
+
"$description": "Subtle border for open state indicators",
|
|
4377
4898
|
"$extensions": {
|
|
4378
4899
|
"org.primer.figma": {
|
|
4379
4900
|
"collection": "mode",
|
|
@@ -4440,6 +4961,10 @@
|
|
|
4440
4961
|
"isSource": true,
|
|
4441
4962
|
"$type": "color"
|
|
4442
4963
|
}
|
|
4964
|
+
},
|
|
4965
|
+
"org.primer.llm": {
|
|
4966
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4967
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4443
4968
|
}
|
|
4444
4969
|
},
|
|
4445
4970
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4447,6 +4972,7 @@
|
|
|
4447
4972
|
"original": {
|
|
4448
4973
|
"$value": "{borderColor.success.muted}",
|
|
4449
4974
|
"$type": "color",
|
|
4975
|
+
"$description": "Subtle border for open state indicators",
|
|
4450
4976
|
"$extensions": {
|
|
4451
4977
|
"org.primer.figma": {
|
|
4452
4978
|
"collection": "mode",
|
|
@@ -4513,6 +5039,10 @@
|
|
|
4513
5039
|
"isSource": true,
|
|
4514
5040
|
"$type": "color"
|
|
4515
5041
|
}
|
|
5042
|
+
},
|
|
5043
|
+
"org.primer.llm": {
|
|
5044
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5045
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4516
5046
|
}
|
|
4517
5047
|
},
|
|
4518
5048
|
"key": "{borderColor.open.muted}"
|
|
@@ -4525,6 +5055,7 @@
|
|
|
4525
5055
|
"key": "{borderColor.severe.emphasis}",
|
|
4526
5056
|
"$value": "#f69d50",
|
|
4527
5057
|
"$type": "color",
|
|
5058
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4528
5059
|
"$extensions": {
|
|
4529
5060
|
"org.primer.figma": {
|
|
4530
5061
|
"collection": "mode",
|
|
@@ -4539,6 +5070,10 @@
|
|
|
4539
5070
|
"light-tritanopia": "#c93c37",
|
|
4540
5071
|
"light-tritanopia-high-contrast": "#c93c37",
|
|
4541
5072
|
"dark-dimmed-high-contrast": "#f69d50"
|
|
5073
|
+
},
|
|
5074
|
+
"org.primer.llm": {
|
|
5075
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5076
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4542
5077
|
}
|
|
4543
5078
|
},
|
|
4544
5079
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4546,6 +5081,7 @@
|
|
|
4546
5081
|
"original": {
|
|
4547
5082
|
"$value": "{base.color.orange.2}",
|
|
4548
5083
|
"$type": "color",
|
|
5084
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4549
5085
|
"$extensions": {
|
|
4550
5086
|
"org.primer.figma": {
|
|
4551
5087
|
"collection": "mode",
|
|
@@ -4560,6 +5096,10 @@
|
|
|
4560
5096
|
"light-tritanopia": "{base.color.red.5}",
|
|
4561
5097
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4562
5098
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5099
|
+
},
|
|
5100
|
+
"org.primer.llm": {
|
|
5101
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5102
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4563
5103
|
}
|
|
4564
5104
|
},
|
|
4565
5105
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4572,6 +5112,7 @@
|
|
|
4572
5112
|
"key": "{borderColor.severe.muted}",
|
|
4573
5113
|
"$value": "#f69d50",
|
|
4574
5114
|
"$type": "color",
|
|
5115
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4575
5116
|
"$extensions": {
|
|
4576
5117
|
"org.primer.figma": {
|
|
4577
5118
|
"collection": "mode",
|
|
@@ -4627,6 +5168,10 @@
|
|
|
4627
5168
|
"isSource": true,
|
|
4628
5169
|
"$type": "color"
|
|
4629
5170
|
}
|
|
5171
|
+
},
|
|
5172
|
+
"org.primer.llm": {
|
|
5173
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5174
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4630
5175
|
}
|
|
4631
5176
|
},
|
|
4632
5177
|
"alpha": 1,
|
|
@@ -4635,6 +5180,7 @@
|
|
|
4635
5180
|
"original": {
|
|
4636
5181
|
"$value": "{base.color.orange.2}",
|
|
4637
5182
|
"$type": "color",
|
|
5183
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4638
5184
|
"$extensions": {
|
|
4639
5185
|
"org.primer.figma": {
|
|
4640
5186
|
"collection": "mode",
|
|
@@ -4690,6 +5236,10 @@
|
|
|
4690
5236
|
"isSource": true,
|
|
4691
5237
|
"$type": "color"
|
|
4692
5238
|
}
|
|
5239
|
+
},
|
|
5240
|
+
"org.primer.llm": {
|
|
5241
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5242
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4693
5243
|
}
|
|
4694
5244
|
},
|
|
4695
5245
|
"alpha": 1,
|
|
@@ -4703,6 +5253,7 @@
|
|
|
4703
5253
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4704
5254
|
"$value": "#e275ad",
|
|
4705
5255
|
"$type": "color",
|
|
5256
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4706
5257
|
"$extensions": {
|
|
4707
5258
|
"org.primer.figma": {
|
|
4708
5259
|
"collection": "mode",
|
|
@@ -4714,6 +5265,10 @@
|
|
|
4714
5265
|
},
|
|
4715
5266
|
"org.primer.overrides": {
|
|
4716
5267
|
"dark-dimmed-high-contrast": "#e275ad"
|
|
5268
|
+
},
|
|
5269
|
+
"org.primer.llm": {
|
|
5270
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5271
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4717
5272
|
}
|
|
4718
5273
|
},
|
|
4719
5274
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4721,6 +5276,7 @@
|
|
|
4721
5276
|
"original": {
|
|
4722
5277
|
"$value": "{base.color.pink.3}",
|
|
4723
5278
|
"$type": "color",
|
|
5279
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4724
5280
|
"$extensions": {
|
|
4725
5281
|
"org.primer.figma": {
|
|
4726
5282
|
"collection": "mode",
|
|
@@ -4732,6 +5288,10 @@
|
|
|
4732
5288
|
},
|
|
4733
5289
|
"org.primer.overrides": {
|
|
4734
5290
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5291
|
+
},
|
|
5292
|
+
"org.primer.llm": {
|
|
5293
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5294
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4735
5295
|
}
|
|
4736
5296
|
},
|
|
4737
5297
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4744,6 +5304,7 @@
|
|
|
4744
5304
|
"key": "{borderColor.sponsors.muted}",
|
|
4745
5305
|
"$value": "#fc8dc7",
|
|
4746
5306
|
"$type": "color",
|
|
5307
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4747
5308
|
"$extensions": {
|
|
4748
5309
|
"org.primer.figma": {
|
|
4749
5310
|
"collection": "mode",
|
|
@@ -4804,6 +5365,10 @@
|
|
|
4804
5365
|
"isSource": true,
|
|
4805
5366
|
"$type": "color"
|
|
4806
5367
|
}
|
|
5368
|
+
},
|
|
5369
|
+
"org.primer.llm": {
|
|
5370
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5371
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4807
5372
|
}
|
|
4808
5373
|
},
|
|
4809
5374
|
"alpha": 1,
|
|
@@ -4812,6 +5377,7 @@
|
|
|
4812
5377
|
"original": {
|
|
4813
5378
|
"$value": "{base.color.pink.2}",
|
|
4814
5379
|
"$type": "color",
|
|
5380
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4815
5381
|
"$extensions": {
|
|
4816
5382
|
"org.primer.figma": {
|
|
4817
5383
|
"collection": "mode",
|
|
@@ -4872,6 +5438,10 @@
|
|
|
4872
5438
|
"isSource": true,
|
|
4873
5439
|
"$type": "color"
|
|
4874
5440
|
}
|
|
5441
|
+
},
|
|
5442
|
+
"org.primer.llm": {
|
|
5443
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5444
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4875
5445
|
}
|
|
4876
5446
|
},
|
|
4877
5447
|
"alpha": 1,
|
|
@@ -4885,6 +5455,7 @@
|
|
|
4885
5455
|
"key": "{borderColor.success.emphasis}",
|
|
4886
5456
|
"$value": "#6bc46d",
|
|
4887
5457
|
"$type": "color",
|
|
5458
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4888
5459
|
"$extensions": {
|
|
4889
5460
|
"org.primer.figma": {
|
|
4890
5461
|
"collection": "mode",
|
|
@@ -4904,6 +5475,10 @@
|
|
|
4904
5475
|
"light-protanopia-deuteranopia": "#316dca",
|
|
4905
5476
|
"light-protanopia-deuteranopia-high-contrast": "#316dca",
|
|
4906
5477
|
"dark-dimmed-high-contrast": "#6bc46d"
|
|
5478
|
+
},
|
|
5479
|
+
"org.primer.llm": {
|
|
5480
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5481
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4907
5482
|
}
|
|
4908
5483
|
},
|
|
4909
5484
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4911,6 +5486,7 @@
|
|
|
4911
5486
|
"original": {
|
|
4912
5487
|
"$value": "{base.color.green.2}",
|
|
4913
5488
|
"$type": "color",
|
|
5489
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4914
5490
|
"$extensions": {
|
|
4915
5491
|
"org.primer.figma": {
|
|
4916
5492
|
"collection": "mode",
|
|
@@ -4930,6 +5506,10 @@
|
|
|
4930
5506
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4931
5507
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4932
5508
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5509
|
+
},
|
|
5510
|
+
"org.primer.llm": {
|
|
5511
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5512
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4933
5513
|
}
|
|
4934
5514
|
},
|
|
4935
5515
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4942,6 +5522,7 @@
|
|
|
4942
5522
|
"key": "{borderColor.success.muted}",
|
|
4943
5523
|
"$value": "#6bc46d",
|
|
4944
5524
|
"$type": "color",
|
|
5525
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4945
5526
|
"$extensions": {
|
|
4946
5527
|
"org.primer.figma": {
|
|
4947
5528
|
"collection": "mode",
|
|
@@ -5029,6 +5610,10 @@
|
|
|
5029
5610
|
"isSource": true,
|
|
5030
5611
|
"$type": "color"
|
|
5031
5612
|
}
|
|
5613
|
+
},
|
|
5614
|
+
"org.primer.llm": {
|
|
5615
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5616
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5032
5617
|
}
|
|
5033
5618
|
},
|
|
5034
5619
|
"alpha": 1,
|
|
@@ -5037,6 +5622,7 @@
|
|
|
5037
5622
|
"original": {
|
|
5038
5623
|
"$value": "{base.color.green.2}",
|
|
5039
5624
|
"$type": "color",
|
|
5625
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5040
5626
|
"$extensions": {
|
|
5041
5627
|
"org.primer.figma": {
|
|
5042
5628
|
"collection": "mode",
|
|
@@ -5124,6 +5710,10 @@
|
|
|
5124
5710
|
"isSource": true,
|
|
5125
5711
|
"$type": "color"
|
|
5126
5712
|
}
|
|
5713
|
+
},
|
|
5714
|
+
"org.primer.llm": {
|
|
5715
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5716
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5127
5717
|
}
|
|
5128
5718
|
},
|
|
5129
5719
|
"alpha": 1,
|
|
@@ -5137,6 +5727,7 @@
|
|
|
5137
5727
|
"key": "{borderColor.translucent}",
|
|
5138
5728
|
"$value": "#9198a1",
|
|
5139
5729
|
"$type": "color",
|
|
5730
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5140
5731
|
"$extensions": {
|
|
5141
5732
|
"org.primer.figma": {
|
|
5142
5733
|
"collection": "mode",
|
|
@@ -5193,6 +5784,10 @@
|
|
|
5193
5784
|
"isSource": true,
|
|
5194
5785
|
"$type": "color"
|
|
5195
5786
|
}
|
|
5787
|
+
},
|
|
5788
|
+
"org.primer.llm": {
|
|
5789
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5790
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5196
5791
|
}
|
|
5197
5792
|
},
|
|
5198
5793
|
"alpha": 1,
|
|
@@ -5201,6 +5796,7 @@
|
|
|
5201
5796
|
"original": {
|
|
5202
5797
|
"$value": "{base.color.neutral.9}",
|
|
5203
5798
|
"$type": "color",
|
|
5799
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5204
5800
|
"$extensions": {
|
|
5205
5801
|
"org.primer.figma": {
|
|
5206
5802
|
"collection": "mode",
|
|
@@ -5257,6 +5853,10 @@
|
|
|
5257
5853
|
"isSource": true,
|
|
5258
5854
|
"$type": "color"
|
|
5259
5855
|
}
|
|
5856
|
+
},
|
|
5857
|
+
"org.primer.llm": {
|
|
5858
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5859
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5260
5860
|
}
|
|
5261
5861
|
},
|
|
5262
5862
|
"alpha": 1,
|
|
@@ -5270,6 +5870,7 @@
|
|
|
5270
5870
|
"key": "{borderColor.transparent}",
|
|
5271
5871
|
"$value": "#00000000",
|
|
5272
5872
|
"$type": "color",
|
|
5873
|
+
"$description": "Fully transparent border",
|
|
5273
5874
|
"$extensions": {
|
|
5274
5875
|
"org.primer.figma": {
|
|
5275
5876
|
"collection": "mode",
|
|
@@ -5282,6 +5883,7 @@
|
|
|
5282
5883
|
"original": {
|
|
5283
5884
|
"$value": "{base.color.transparent}",
|
|
5284
5885
|
"$type": "color",
|
|
5886
|
+
"$description": "Fully transparent border",
|
|
5285
5887
|
"$extensions": {
|
|
5286
5888
|
"org.primer.figma": {
|
|
5287
5889
|
"collection": "mode",
|
|
@@ -5299,6 +5901,7 @@
|
|
|
5299
5901
|
"key": "{borderColor.upsell.emphasis}",
|
|
5300
5902
|
"$value": "#dcbdfb",
|
|
5301
5903
|
"$type": "color",
|
|
5904
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5302
5905
|
"$extensions": {
|
|
5303
5906
|
"org.primer.figma": {
|
|
5304
5907
|
"collection": "mode",
|
|
@@ -5307,6 +5910,10 @@
|
|
|
5307
5910
|
"codeSyntax": {
|
|
5308
5911
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5309
5912
|
}
|
|
5913
|
+
},
|
|
5914
|
+
"org.primer.llm": {
|
|
5915
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5916
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5310
5917
|
}
|
|
5311
5918
|
},
|
|
5312
5919
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5314,6 +5921,7 @@
|
|
|
5314
5921
|
"original": {
|
|
5315
5922
|
"$value": "{borderColor.done.emphasis}",
|
|
5316
5923
|
"$type": "color",
|
|
5924
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5317
5925
|
"$extensions": {
|
|
5318
5926
|
"org.primer.figma": {
|
|
5319
5927
|
"collection": "mode",
|
|
@@ -5322,6 +5930,10 @@
|
|
|
5322
5930
|
"codeSyntax": {
|
|
5323
5931
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5324
5932
|
}
|
|
5933
|
+
},
|
|
5934
|
+
"org.primer.llm": {
|
|
5935
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5936
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5325
5937
|
}
|
|
5326
5938
|
},
|
|
5327
5939
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5334,6 +5946,7 @@
|
|
|
5334
5946
|
"key": "{borderColor.upsell.muted}",
|
|
5335
5947
|
"$value": "#dcbdfb",
|
|
5336
5948
|
"$type": "color",
|
|
5949
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5337
5950
|
"$extensions": {
|
|
5338
5951
|
"org.primer.figma": {
|
|
5339
5952
|
"collection": "mode",
|
|
@@ -5342,6 +5955,10 @@
|
|
|
5342
5955
|
"codeSyntax": {
|
|
5343
5956
|
"web": "var(--borderColor-upsell-muted)"
|
|
5344
5957
|
}
|
|
5958
|
+
},
|
|
5959
|
+
"org.primer.llm": {
|
|
5960
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5961
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5345
5962
|
}
|
|
5346
5963
|
},
|
|
5347
5964
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5349,6 +5966,7 @@
|
|
|
5349
5966
|
"original": {
|
|
5350
5967
|
"$value": "{borderColor.done.muted}",
|
|
5351
5968
|
"$type": "color",
|
|
5969
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5352
5970
|
"$extensions": {
|
|
5353
5971
|
"org.primer.figma": {
|
|
5354
5972
|
"collection": "mode",
|
|
@@ -5357,6 +5975,10 @@
|
|
|
5357
5975
|
"codeSyntax": {
|
|
5358
5976
|
"web": "var(--borderColor-upsell-muted)"
|
|
5359
5977
|
}
|
|
5978
|
+
},
|
|
5979
|
+
"org.primer.llm": {
|
|
5980
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5981
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5360
5982
|
}
|
|
5361
5983
|
},
|
|
5362
5984
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36505,6 +37127,7 @@
|
|
|
36505
37127
|
"key": "{fgColor.accent}",
|
|
36506
37128
|
"$value": "#96d0ff",
|
|
36507
37129
|
"$type": "color",
|
|
37130
|
+
"$description": "Accent text for links and interactive elements",
|
|
36508
37131
|
"$extensions": {
|
|
36509
37132
|
"org.primer.figma": {
|
|
36510
37133
|
"collection": "mode",
|
|
@@ -36524,6 +37147,10 @@
|
|
|
36524
37147
|
"light-high-contrast": "#255ab2",
|
|
36525
37148
|
"light-tritanopia-high-contrast": "#255ab2",
|
|
36526
37149
|
"light-protanopia-deuteranopia-high-contrast": "#255ab2"
|
|
37150
|
+
},
|
|
37151
|
+
"org.primer.llm": {
|
|
37152
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37153
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36527
37154
|
}
|
|
36528
37155
|
},
|
|
36529
37156
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36531,6 +37158,7 @@
|
|
|
36531
37158
|
"original": {
|
|
36532
37159
|
"$value": "{base.color.blue.1}",
|
|
36533
37160
|
"$type": "color",
|
|
37161
|
+
"$description": "Accent text for links and interactive elements",
|
|
36534
37162
|
"$extensions": {
|
|
36535
37163
|
"org.primer.figma": {
|
|
36536
37164
|
"collection": "mode",
|
|
@@ -36550,6 +37178,10 @@
|
|
|
36550
37178
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36551
37179
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36552
37180
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37181
|
+
},
|
|
37182
|
+
"org.primer.llm": {
|
|
37183
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37184
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36553
37185
|
}
|
|
36554
37186
|
},
|
|
36555
37187
|
"key": "{fgColor.accent}"
|
|
@@ -36562,6 +37194,7 @@
|
|
|
36562
37194
|
"key": "{fgColor.attention}",
|
|
36563
37195
|
"$value": "#eac55f",
|
|
36564
37196
|
"$type": "color",
|
|
37197
|
+
"$description": "Attention text for warnings and caution states",
|
|
36565
37198
|
"$extensions": {
|
|
36566
37199
|
"org.primer.figma": {
|
|
36567
37200
|
"collection": "mode",
|
|
@@ -36577,6 +37210,10 @@
|
|
|
36577
37210
|
"light-protanopia-deuteranopia-high-contrast": "#805400",
|
|
36578
37211
|
"light-tritanopia-high-contrast": "#805400",
|
|
36579
37212
|
"dark-dimmed-high-contrast": "#eac55f"
|
|
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."
|
|
36580
37217
|
}
|
|
36581
37218
|
},
|
|
36582
37219
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36584,6 +37221,7 @@
|
|
|
36584
37221
|
"original": {
|
|
36585
37222
|
"$value": "{base.color.yellow.1}",
|
|
36586
37223
|
"$type": "color",
|
|
37224
|
+
"$description": "Attention text for warnings and caution states",
|
|
36587
37225
|
"$extensions": {
|
|
36588
37226
|
"org.primer.figma": {
|
|
36589
37227
|
"collection": "mode",
|
|
@@ -36599,6 +37237,10 @@
|
|
|
36599
37237
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36600
37238
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36601
37239
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37240
|
+
},
|
|
37241
|
+
"org.primer.llm": {
|
|
37242
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37243
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36602
37244
|
}
|
|
36603
37245
|
},
|
|
36604
37246
|
"key": "{fgColor.attention}"
|
|
@@ -36611,6 +37253,7 @@
|
|
|
36611
37253
|
"key": "{fgColor.black}",
|
|
36612
37254
|
"$value": "#010409",
|
|
36613
37255
|
"$type": "color",
|
|
37256
|
+
"$description": "Pure black text",
|
|
36614
37257
|
"$extensions": {
|
|
36615
37258
|
"org.primer.figma": {
|
|
36616
37259
|
"collection": "mode",
|
|
@@ -36619,6 +37262,10 @@
|
|
|
36619
37262
|
},
|
|
36620
37263
|
"org.primer.overrides": {
|
|
36621
37264
|
"dark": "#010409"
|
|
37265
|
+
},
|
|
37266
|
+
"org.primer.llm": {
|
|
37267
|
+
"doNotUse": true,
|
|
37268
|
+
"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."
|
|
36622
37269
|
}
|
|
36623
37270
|
},
|
|
36624
37271
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36626,6 +37273,7 @@
|
|
|
36626
37273
|
"original": {
|
|
36627
37274
|
"$value": "{base.color.neutral.0}",
|
|
36628
37275
|
"$type": "color",
|
|
37276
|
+
"$description": "Pure black text",
|
|
36629
37277
|
"$extensions": {
|
|
36630
37278
|
"org.primer.figma": {
|
|
36631
37279
|
"collection": "mode",
|
|
@@ -36634,6 +37282,10 @@
|
|
|
36634
37282
|
},
|
|
36635
37283
|
"org.primer.overrides": {
|
|
36636
37284
|
"dark": "{base.color.neutral.0}"
|
|
37285
|
+
},
|
|
37286
|
+
"org.primer.llm": {
|
|
37287
|
+
"doNotUse": true,
|
|
37288
|
+
"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."
|
|
36637
37289
|
}
|
|
36638
37290
|
},
|
|
36639
37291
|
"key": "{fgColor.black}"
|
|
@@ -36646,6 +37298,7 @@
|
|
|
36646
37298
|
"key": "{fgColor.closed}",
|
|
36647
37299
|
"$value": "#ffb8b0",
|
|
36648
37300
|
"$type": "color",
|
|
37301
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36649
37302
|
"$extensions": {
|
|
36650
37303
|
"org.primer.figma": {
|
|
36651
37304
|
"collection": "mode",
|
|
@@ -36664,6 +37317,10 @@
|
|
|
36664
37317
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
36665
37318
|
"light-tritanopia": "#b7bdc8",
|
|
36666
37319
|
"light-tritanopia-high-contrast": "#b7bdc8"
|
|
37320
|
+
},
|
|
37321
|
+
"org.primer.llm": {
|
|
37322
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37323
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36667
37324
|
}
|
|
36668
37325
|
},
|
|
36669
37326
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36671,6 +37328,7 @@
|
|
|
36671
37328
|
"original": {
|
|
36672
37329
|
"$value": "{fgColor.danger}",
|
|
36673
37330
|
"$type": "color",
|
|
37331
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36674
37332
|
"$extensions": {
|
|
36675
37333
|
"org.primer.figma": {
|
|
36676
37334
|
"collection": "mode",
|
|
@@ -36689,6 +37347,10 @@
|
|
|
36689
37347
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36690
37348
|
"light-tritanopia": "{fgColor.muted}",
|
|
36691
37349
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37350
|
+
},
|
|
37351
|
+
"org.primer.llm": {
|
|
37352
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37353
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36692
37354
|
}
|
|
36693
37355
|
},
|
|
36694
37356
|
"key": "{fgColor.closed}"
|
|
@@ -36701,6 +37363,7 @@
|
|
|
36701
37363
|
"key": "{fgColor.danger}",
|
|
36702
37364
|
"$value": "#ffb8b0",
|
|
36703
37365
|
"$type": "color",
|
|
37366
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36704
37367
|
"$extensions": {
|
|
36705
37368
|
"org.primer.figma": {
|
|
36706
37369
|
"collection": "mode",
|
|
@@ -36721,6 +37384,10 @@
|
|
|
36721
37384
|
"dark-tritanopia-high-contrast": "#f47067",
|
|
36722
37385
|
"light-high-contrast": "#ad2e2c",
|
|
36723
37386
|
"light-tritanopia-high-contrast": "#ad2e2c"
|
|
37387
|
+
},
|
|
37388
|
+
"org.primer.llm": {
|
|
37389
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37390
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36724
37391
|
}
|
|
36725
37392
|
},
|
|
36726
37393
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36728,6 +37395,7 @@
|
|
|
36728
37395
|
"original": {
|
|
36729
37396
|
"$value": "{base.color.red.1}",
|
|
36730
37397
|
"$type": "color",
|
|
37398
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36731
37399
|
"$extensions": {
|
|
36732
37400
|
"org.primer.figma": {
|
|
36733
37401
|
"collection": "mode",
|
|
@@ -36748,6 +37416,10 @@
|
|
|
36748
37416
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36749
37417
|
"light-high-contrast": "{base.color.red.6}",
|
|
36750
37418
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37419
|
+
},
|
|
37420
|
+
"org.primer.llm": {
|
|
37421
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37422
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36751
37423
|
}
|
|
36752
37424
|
},
|
|
36753
37425
|
"key": "{fgColor.danger}"
|
|
@@ -36760,6 +37432,7 @@
|
|
|
36760
37432
|
"key": "{fgColor.default}",
|
|
36761
37433
|
"$value": "#f0f6fc",
|
|
36762
37434
|
"$type": "color",
|
|
37435
|
+
"$description": "Default text color for primary content and headings",
|
|
36763
37436
|
"$extensions": {
|
|
36764
37437
|
"org.primer.figma": {
|
|
36765
37438
|
"collection": "mode",
|
|
@@ -36774,8 +37447,12 @@
|
|
|
36774
37447
|
"dark-high-contrast": "#cdd9e5",
|
|
36775
37448
|
"dark-tritanopia-high-contrast": "#cdd9e5",
|
|
36776
37449
|
"dark-protanopia-deuteranopia-high-contrast": "#cdd9e5",
|
|
36777
|
-
"dark-dimmed": "#
|
|
37450
|
+
"dark-dimmed": "#f0f6fc",
|
|
36778
37451
|
"dark-dimmed-high-contrast": "#f0f6fc"
|
|
37452
|
+
},
|
|
37453
|
+
"org.primer.llm": {
|
|
37454
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37455
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36779
37456
|
}
|
|
36780
37457
|
},
|
|
36781
37458
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36783,6 +37460,7 @@
|
|
|
36783
37460
|
"original": {
|
|
36784
37461
|
"$value": "{base.color.neutral.12}",
|
|
36785
37462
|
"$type": "color",
|
|
37463
|
+
"$description": "Default text color for primary content and headings",
|
|
36786
37464
|
"$extensions": {
|
|
36787
37465
|
"org.primer.figma": {
|
|
36788
37466
|
"collection": "mode",
|
|
@@ -36797,8 +37475,12 @@
|
|
|
36797
37475
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36798
37476
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36799
37477
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36800
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37478
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36801
37479
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37480
|
+
},
|
|
37481
|
+
"org.primer.llm": {
|
|
37482
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37483
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36802
37484
|
}
|
|
36803
37485
|
},
|
|
36804
37486
|
"key": "{fgColor.default}"
|
|
@@ -36811,6 +37493,7 @@
|
|
|
36811
37493
|
"key": "{fgColor.disabled}",
|
|
36812
37494
|
"$value": "#656c76",
|
|
36813
37495
|
"$type": "color",
|
|
37496
|
+
"$description": "Text color for disabled interactive elements",
|
|
36814
37497
|
"$extensions": {
|
|
36815
37498
|
"org.primer.figma": {
|
|
36816
37499
|
"collection": "mode",
|
|
@@ -36832,6 +37515,10 @@
|
|
|
36832
37515
|
"dark-high-contrast": "#656c76",
|
|
36833
37516
|
"dark-tritanopia-high-contrast": "#656c76",
|
|
36834
37517
|
"dark-protanopia-deuteranopia-high-contrast": "#656c76"
|
|
37518
|
+
},
|
|
37519
|
+
"org.primer.llm": {
|
|
37520
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37521
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36835
37522
|
}
|
|
36836
37523
|
},
|
|
36837
37524
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36839,6 +37526,7 @@
|
|
|
36839
37526
|
"original": {
|
|
36840
37527
|
"$value": "{base.color.neutral.8}",
|
|
36841
37528
|
"$type": "color",
|
|
37529
|
+
"$description": "Text color for disabled interactive elements",
|
|
36842
37530
|
"$extensions": {
|
|
36843
37531
|
"org.primer.figma": {
|
|
36844
37532
|
"collection": "mode",
|
|
@@ -36860,6 +37548,10 @@
|
|
|
36860
37548
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36861
37549
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36862
37550
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37551
|
+
},
|
|
37552
|
+
"org.primer.llm": {
|
|
37553
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37554
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36863
37555
|
}
|
|
36864
37556
|
},
|
|
36865
37557
|
"key": "{fgColor.disabled}"
|
|
@@ -36872,6 +37564,7 @@
|
|
|
36872
37564
|
"key": "{fgColor.done}",
|
|
36873
37565
|
"$value": "#dcbdfb",
|
|
36874
37566
|
"$type": "color",
|
|
37567
|
+
"$description": "Text color for completed/done state indicators",
|
|
36875
37568
|
"$extensions": {
|
|
36876
37569
|
"org.primer.figma": {
|
|
36877
37570
|
"collection": "mode",
|
|
@@ -36890,6 +37583,10 @@
|
|
|
36890
37583
|
"light-high-contrast": "#6b44bc",
|
|
36891
37584
|
"light-protanopia-deuteranopia-high-contrast": "#6b44bc",
|
|
36892
37585
|
"light-tritanopia-high-contrast": "#6b44bc"
|
|
37586
|
+
},
|
|
37587
|
+
"org.primer.llm": {
|
|
37588
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37589
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36893
37590
|
}
|
|
36894
37591
|
},
|
|
36895
37592
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36897,6 +37594,7 @@
|
|
|
36897
37594
|
"original": {
|
|
36898
37595
|
"$value": "{base.color.purple.1}",
|
|
36899
37596
|
"$type": "color",
|
|
37597
|
+
"$description": "Text color for completed/done state indicators",
|
|
36900
37598
|
"$extensions": {
|
|
36901
37599
|
"org.primer.figma": {
|
|
36902
37600
|
"collection": "mode",
|
|
@@ -36915,6 +37613,10 @@
|
|
|
36915
37613
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36916
37614
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36917
37615
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37616
|
+
},
|
|
37617
|
+
"org.primer.llm": {
|
|
37618
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37619
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36918
37620
|
}
|
|
36919
37621
|
},
|
|
36920
37622
|
"key": "{fgColor.done}"
|
|
@@ -36927,6 +37629,7 @@
|
|
|
36927
37629
|
"key": "{fgColor.draft}",
|
|
36928
37630
|
"$value": "#d1d7e0",
|
|
36929
37631
|
"$type": "color",
|
|
37632
|
+
"$description": "Text color for draft state indicators",
|
|
36930
37633
|
"$extensions": {
|
|
36931
37634
|
"org.primer.figma": {
|
|
36932
37635
|
"collection": "mode",
|
|
@@ -36935,6 +37638,10 @@
|
|
|
36935
37638
|
"codeSyntax": {
|
|
36936
37639
|
"web": "var(--fgColor-draft)"
|
|
36937
37640
|
}
|
|
37641
|
+
},
|
|
37642
|
+
"org.primer.llm": {
|
|
37643
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37644
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36938
37645
|
}
|
|
36939
37646
|
},
|
|
36940
37647
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36942,6 +37649,7 @@
|
|
|
36942
37649
|
"original": {
|
|
36943
37650
|
"$value": "{fgColor.neutral}",
|
|
36944
37651
|
"$type": "color",
|
|
37652
|
+
"$description": "Text color for draft state indicators",
|
|
36945
37653
|
"$extensions": {
|
|
36946
37654
|
"org.primer.figma": {
|
|
36947
37655
|
"collection": "mode",
|
|
@@ -36950,6 +37658,10 @@
|
|
|
36950
37658
|
"codeSyntax": {
|
|
36951
37659
|
"web": "var(--fgColor-draft)"
|
|
36952
37660
|
}
|
|
37661
|
+
},
|
|
37662
|
+
"org.primer.llm": {
|
|
37663
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37664
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36953
37665
|
}
|
|
36954
37666
|
},
|
|
36955
37667
|
"key": "{fgColor.draft}"
|
|
@@ -36962,6 +37674,7 @@
|
|
|
36962
37674
|
"key": "{fgColor.link}",
|
|
36963
37675
|
"$value": "#96d0ff",
|
|
36964
37676
|
"$type": "color",
|
|
37677
|
+
"$description": "Text color for hyperlinks",
|
|
36965
37678
|
"$extensions": {
|
|
36966
37679
|
"org.primer.figma": {
|
|
36967
37680
|
"collection": "mode",
|
|
@@ -36970,6 +37683,10 @@
|
|
|
36970
37683
|
"codeSyntax": {
|
|
36971
37684
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36972
37685
|
}
|
|
37686
|
+
},
|
|
37687
|
+
"org.primer.llm": {
|
|
37688
|
+
"usage": ["link-text", "hyperlink"],
|
|
37689
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36973
37690
|
}
|
|
36974
37691
|
},
|
|
36975
37692
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36977,6 +37694,7 @@
|
|
|
36977
37694
|
"original": {
|
|
36978
37695
|
"$value": "{fgColor.accent}",
|
|
36979
37696
|
"$type": "color",
|
|
37697
|
+
"$description": "Text color for hyperlinks",
|
|
36980
37698
|
"$extensions": {
|
|
36981
37699
|
"org.primer.figma": {
|
|
36982
37700
|
"collection": "mode",
|
|
@@ -36985,6 +37703,10 @@
|
|
|
36985
37703
|
"codeSyntax": {
|
|
36986
37704
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36987
37705
|
}
|
|
37706
|
+
},
|
|
37707
|
+
"org.primer.llm": {
|
|
37708
|
+
"usage": ["link-text", "hyperlink"],
|
|
37709
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36988
37710
|
}
|
|
36989
37711
|
},
|
|
36990
37712
|
"key": "{fgColor.link}"
|
|
@@ -36997,6 +37719,7 @@
|
|
|
36997
37719
|
"key": "{fgColor.muted}",
|
|
36998
37720
|
"$value": "#b7bdc8",
|
|
36999
37721
|
"$type": "color",
|
|
37722
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37000
37723
|
"$extensions": {
|
|
37001
37724
|
"org.primer.figma": {
|
|
37002
37725
|
"collection": "mode",
|
|
@@ -37014,6 +37737,10 @@
|
|
|
37014
37737
|
"dark-dimmed-high-contrast": "#b7bdc8",
|
|
37015
37738
|
"dark-tritanopia-high-contrast": "#b7bdc8",
|
|
37016
37739
|
"dark-protanopia-deuteranopia-high-contrast": "#b7bdc8"
|
|
37740
|
+
},
|
|
37741
|
+
"org.primer.llm": {
|
|
37742
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37743
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37017
37744
|
}
|
|
37018
37745
|
},
|
|
37019
37746
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37021,6 +37748,7 @@
|
|
|
37021
37748
|
"original": {
|
|
37022
37749
|
"$value": "{base.color.neutral.10}",
|
|
37023
37750
|
"$type": "color",
|
|
37751
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37024
37752
|
"$extensions": {
|
|
37025
37753
|
"org.primer.figma": {
|
|
37026
37754
|
"collection": "mode",
|
|
@@ -37038,6 +37766,10 @@
|
|
|
37038
37766
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37039
37767
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37040
37768
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37769
|
+
},
|
|
37770
|
+
"org.primer.llm": {
|
|
37771
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37772
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37041
37773
|
}
|
|
37042
37774
|
},
|
|
37043
37775
|
"key": "{fgColor.muted}"
|
|
@@ -37050,6 +37782,7 @@
|
|
|
37050
37782
|
"key": "{fgColor.neutral}",
|
|
37051
37783
|
"$value": "#d1d7e0",
|
|
37052
37784
|
"$type": "color",
|
|
37785
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37053
37786
|
"$extensions": {
|
|
37054
37787
|
"org.primer.figma": {
|
|
37055
37788
|
"collection": "mode",
|
|
@@ -37064,6 +37797,10 @@
|
|
|
37064
37797
|
"dark-dimmed-high-contrast": "#d1d7e0",
|
|
37065
37798
|
"dark-tritanopia-high-contrast": "#d1d7e0",
|
|
37066
37799
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d7e0"
|
|
37800
|
+
},
|
|
37801
|
+
"org.primer.llm": {
|
|
37802
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37803
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37067
37804
|
}
|
|
37068
37805
|
},
|
|
37069
37806
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37071,6 +37808,7 @@
|
|
|
37071
37808
|
"original": {
|
|
37072
37809
|
"$value": "{base.color.neutral.11}",
|
|
37073
37810
|
"$type": "color",
|
|
37811
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37074
37812
|
"$extensions": {
|
|
37075
37813
|
"org.primer.figma": {
|
|
37076
37814
|
"collection": "mode",
|
|
@@ -37085,6 +37823,10 @@
|
|
|
37085
37823
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37086
37824
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37087
37825
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37826
|
+
},
|
|
37827
|
+
"org.primer.llm": {
|
|
37828
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37829
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37088
37830
|
}
|
|
37089
37831
|
},
|
|
37090
37832
|
"key": "{fgColor.neutral}"
|
|
@@ -37097,6 +37839,7 @@
|
|
|
37097
37839
|
"key": "{fgColor.onEmphasis}",
|
|
37098
37840
|
"$value": "#ffffff",
|
|
37099
37841
|
"$type": "color",
|
|
37842
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37100
37843
|
"$extensions": {
|
|
37101
37844
|
"org.primer.figma": {
|
|
37102
37845
|
"collection": "mode",
|
|
@@ -37110,6 +37853,10 @@
|
|
|
37110
37853
|
"dark": "#cdd9e5",
|
|
37111
37854
|
"dark-dimmed": "#f0f6fc",
|
|
37112
37855
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37856
|
+
},
|
|
37857
|
+
"org.primer.llm": {
|
|
37858
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37859
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37113
37860
|
}
|
|
37114
37861
|
},
|
|
37115
37862
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37117,6 +37864,7 @@
|
|
|
37117
37864
|
"original": {
|
|
37118
37865
|
"$value": "#ffffff",
|
|
37119
37866
|
"$type": "color",
|
|
37867
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37120
37868
|
"$extensions": {
|
|
37121
37869
|
"org.primer.figma": {
|
|
37122
37870
|
"collection": "mode",
|
|
@@ -37130,6 +37878,10 @@
|
|
|
37130
37878
|
"dark": "{base.color.neutral.13}",
|
|
37131
37879
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37132
37880
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37881
|
+
},
|
|
37882
|
+
"org.primer.llm": {
|
|
37883
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37884
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37133
37885
|
}
|
|
37134
37886
|
},
|
|
37135
37887
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37142,11 +37894,16 @@
|
|
|
37142
37894
|
"key": "{fgColor.onInverse}",
|
|
37143
37895
|
"$value": "#010409",
|
|
37144
37896
|
"$type": "color",
|
|
37897
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37145
37898
|
"$extensions": {
|
|
37146
37899
|
"org.primer.figma": {
|
|
37147
37900
|
"collection": "mode",
|
|
37148
37901
|
"group": "semantic",
|
|
37149
37902
|
"scopes": ["fgColor"]
|
|
37903
|
+
},
|
|
37904
|
+
"org.primer.llm": {
|
|
37905
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37906
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37150
37907
|
}
|
|
37151
37908
|
},
|
|
37152
37909
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37154,11 +37911,16 @@
|
|
|
37154
37911
|
"original": {
|
|
37155
37912
|
"$value": "{base.color.neutral.0}",
|
|
37156
37913
|
"$type": "color",
|
|
37914
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37157
37915
|
"$extensions": {
|
|
37158
37916
|
"org.primer.figma": {
|
|
37159
37917
|
"collection": "mode",
|
|
37160
37918
|
"group": "semantic",
|
|
37161
37919
|
"scopes": ["fgColor"]
|
|
37920
|
+
},
|
|
37921
|
+
"org.primer.llm": {
|
|
37922
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37923
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37162
37924
|
}
|
|
37163
37925
|
},
|
|
37164
37926
|
"key": "{fgColor.onInverse}"
|
|
@@ -37171,6 +37933,7 @@
|
|
|
37171
37933
|
"key": "{fgColor.open}",
|
|
37172
37934
|
"$value": "#b4f1b4",
|
|
37173
37935
|
"$type": "color",
|
|
37936
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37174
37937
|
"$extensions": {
|
|
37175
37938
|
"org.primer.figma": {
|
|
37176
37939
|
"collection": "mode",
|
|
@@ -37189,6 +37952,10 @@
|
|
|
37189
37952
|
"dark-tritanopia-high-contrast": "#ff938a",
|
|
37190
37953
|
"light-tritanopia": "#c93c37",
|
|
37191
37954
|
"light-tritanopia-high-contrast": "#ad2e2c"
|
|
37955
|
+
},
|
|
37956
|
+
"org.primer.llm": {
|
|
37957
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37958
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37192
37959
|
}
|
|
37193
37960
|
},
|
|
37194
37961
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37196,6 +37963,7 @@
|
|
|
37196
37963
|
"original": {
|
|
37197
37964
|
"$value": "{fgColor.success}",
|
|
37198
37965
|
"$type": "color",
|
|
37966
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37199
37967
|
"$extensions": {
|
|
37200
37968
|
"org.primer.figma": {
|
|
37201
37969
|
"collection": "mode",
|
|
@@ -37214,6 +37982,10 @@
|
|
|
37214
37982
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37215
37983
|
"light-tritanopia": "{base.color.red.5}",
|
|
37216
37984
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37985
|
+
},
|
|
37986
|
+
"org.primer.llm": {
|
|
37987
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37988
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37217
37989
|
}
|
|
37218
37990
|
},
|
|
37219
37991
|
"key": "{fgColor.open}"
|
|
@@ -37226,6 +37998,7 @@
|
|
|
37226
37998
|
"key": "{fgColor.severe}",
|
|
37227
37999
|
"$value": "#ffbc6f",
|
|
37228
38000
|
"$type": "color",
|
|
38001
|
+
"$description": "Severe text for high-priority warnings",
|
|
37229
38002
|
"$extensions": {
|
|
37230
38003
|
"org.primer.figma": {
|
|
37231
38004
|
"collection": "mode",
|
|
@@ -37246,6 +38019,10 @@
|
|
|
37246
38019
|
"light-tritanopia": "#c93c37",
|
|
37247
38020
|
"light-tritanopia-high-contrast": "#ad2e2c",
|
|
37248
38021
|
"light-protanopia-deuteranopia-high-contrast": "#94471b"
|
|
38022
|
+
},
|
|
38023
|
+
"org.primer.llm": {
|
|
38024
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38025
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37249
38026
|
}
|
|
37250
38027
|
},
|
|
37251
38028
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37253,6 +38030,7 @@
|
|
|
37253
38030
|
"original": {
|
|
37254
38031
|
"$value": "{base.color.orange.1}",
|
|
37255
38032
|
"$type": "color",
|
|
38033
|
+
"$description": "Severe text for high-priority warnings",
|
|
37256
38034
|
"$extensions": {
|
|
37257
38035
|
"org.primer.figma": {
|
|
37258
38036
|
"collection": "mode",
|
|
@@ -37273,6 +38051,10 @@
|
|
|
37273
38051
|
"light-tritanopia": "{base.color.red.5}",
|
|
37274
38052
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37275
38053
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38054
|
+
},
|
|
38055
|
+
"org.primer.llm": {
|
|
38056
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38057
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37276
38058
|
}
|
|
37277
38059
|
},
|
|
37278
38060
|
"key": "{fgColor.severe}"
|
|
@@ -37285,6 +38067,7 @@
|
|
|
37285
38067
|
"key": "{fgColor.sponsors}",
|
|
37286
38068
|
"$value": "#ffb3d8",
|
|
37287
38069
|
"$type": "color",
|
|
38070
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37288
38071
|
"$extensions": {
|
|
37289
38072
|
"org.primer.figma": {
|
|
37290
38073
|
"collection": "mode",
|
|
@@ -37303,6 +38086,10 @@
|
|
|
37303
38086
|
"light-high-contrast": "#983b6e",
|
|
37304
38087
|
"light-protanopia-deuteranopia-high-contrast": "#983b6e",
|
|
37305
38088
|
"light-tritanopia-high-contrast": "#983b6e"
|
|
38089
|
+
},
|
|
38090
|
+
"org.primer.llm": {
|
|
38091
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38092
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37306
38093
|
}
|
|
37307
38094
|
},
|
|
37308
38095
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37310,6 +38097,7 @@
|
|
|
37310
38097
|
"original": {
|
|
37311
38098
|
"$value": "{base.color.pink.1}",
|
|
37312
38099
|
"$type": "color",
|
|
38100
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37313
38101
|
"$extensions": {
|
|
37314
38102
|
"org.primer.figma": {
|
|
37315
38103
|
"collection": "mode",
|
|
@@ -37328,6 +38116,10 @@
|
|
|
37328
38116
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37329
38117
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37330
38118
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38119
|
+
},
|
|
38120
|
+
"org.primer.llm": {
|
|
38121
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38122
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37331
38123
|
}
|
|
37332
38124
|
},
|
|
37333
38125
|
"key": "{fgColor.sponsors}"
|
|
@@ -37340,6 +38132,7 @@
|
|
|
37340
38132
|
"key": "{fgColor.success}",
|
|
37341
38133
|
"$value": "#b4f1b4",
|
|
37342
38134
|
"$type": "color",
|
|
38135
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37343
38136
|
"$extensions": {
|
|
37344
38137
|
"org.primer.figma": {
|
|
37345
38138
|
"collection": "mode",
|
|
@@ -37362,6 +38155,10 @@
|
|
|
37362
38155
|
"dark-tritanopia-high-contrast": "#6cb6ff",
|
|
37363
38156
|
"light-tritanopia": "#316dca",
|
|
37364
38157
|
"light-tritanopia-high-contrast": "#255ab2"
|
|
38158
|
+
},
|
|
38159
|
+
"org.primer.llm": {
|
|
38160
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38161
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37365
38162
|
}
|
|
37366
38163
|
},
|
|
37367
38164
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37369,6 +38166,7 @@
|
|
|
37369
38166
|
"original": {
|
|
37370
38167
|
"$value": "{base.color.green.0}",
|
|
37371
38168
|
"$type": "color",
|
|
38169
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37372
38170
|
"$extensions": {
|
|
37373
38171
|
"org.primer.figma": {
|
|
37374
38172
|
"collection": "mode",
|
|
@@ -37391,6 +38189,10 @@
|
|
|
37391
38189
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37392
38190
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37393
38191
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38192
|
+
},
|
|
38193
|
+
"org.primer.llm": {
|
|
38194
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38195
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37394
38196
|
}
|
|
37395
38197
|
},
|
|
37396
38198
|
"key": "{fgColor.success}"
|
|
@@ -37403,6 +38205,7 @@
|
|
|
37403
38205
|
"key": "{fgColor.upsell}",
|
|
37404
38206
|
"$value": "#dcbdfb",
|
|
37405
38207
|
"$type": "color",
|
|
38208
|
+
"$description": "Text color for upsell and promotional content",
|
|
37406
38209
|
"$extensions": {
|
|
37407
38210
|
"org.primer.figma": {
|
|
37408
38211
|
"collection": "mode",
|
|
@@ -37411,6 +38214,10 @@
|
|
|
37411
38214
|
"codeSyntax": {
|
|
37412
38215
|
"web": "var(--fgColor-upsell)"
|
|
37413
38216
|
}
|
|
38217
|
+
},
|
|
38218
|
+
"org.primer.llm": {
|
|
38219
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38220
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37414
38221
|
}
|
|
37415
38222
|
},
|
|
37416
38223
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37418,6 +38225,7 @@
|
|
|
37418
38225
|
"original": {
|
|
37419
38226
|
"$value": "{fgColor.done}",
|
|
37420
38227
|
"$type": "color",
|
|
38228
|
+
"$description": "Text color for upsell and promotional content",
|
|
37421
38229
|
"$extensions": {
|
|
37422
38230
|
"org.primer.figma": {
|
|
37423
38231
|
"collection": "mode",
|
|
@@ -37426,6 +38234,10 @@
|
|
|
37426
38234
|
"codeSyntax": {
|
|
37427
38235
|
"web": "var(--fgColor-upsell)"
|
|
37428
38236
|
}
|
|
38237
|
+
},
|
|
38238
|
+
"org.primer.llm": {
|
|
38239
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38240
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37429
38241
|
}
|
|
37430
38242
|
},
|
|
37431
38243
|
"key": "{fgColor.upsell}"
|
|
@@ -37438,6 +38250,7 @@
|
|
|
37438
38250
|
"key": "{fgColor.white}",
|
|
37439
38251
|
"$value": "#cdd9e5",
|
|
37440
38252
|
"$type": "color",
|
|
38253
|
+
"$description": "Pure white text",
|
|
37441
38254
|
"$extensions": {
|
|
37442
38255
|
"org.primer.figma": {
|
|
37443
38256
|
"collection": "mode",
|
|
@@ -37446,6 +38259,10 @@
|
|
|
37446
38259
|
},
|
|
37447
38260
|
"org.primer.overrides": {
|
|
37448
38261
|
"dark": "#cdd9e5"
|
|
38262
|
+
},
|
|
38263
|
+
"org.primer.llm": {
|
|
38264
|
+
"doNotUse": true,
|
|
38265
|
+
"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."
|
|
37449
38266
|
}
|
|
37450
38267
|
},
|
|
37451
38268
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37453,6 +38270,7 @@
|
|
|
37453
38270
|
"original": {
|
|
37454
38271
|
"$value": "{base.color.neutral.13}",
|
|
37455
38272
|
"$type": "color",
|
|
38273
|
+
"$description": "Pure white text",
|
|
37456
38274
|
"$extensions": {
|
|
37457
38275
|
"org.primer.figma": {
|
|
37458
38276
|
"collection": "mode",
|
|
@@ -37461,6 +38279,10 @@
|
|
|
37461
38279
|
},
|
|
37462
38280
|
"org.primer.overrides": {
|
|
37463
38281
|
"dark": "{base.color.neutral.13}"
|
|
38282
|
+
},
|
|
38283
|
+
"org.primer.llm": {
|
|
38284
|
+
"doNotUse": true,
|
|
38285
|
+
"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."
|
|
37464
38286
|
}
|
|
37465
38287
|
},
|
|
37466
38288
|
"key": "{fgColor.white}"
|
|
@@ -37473,6 +38295,13 @@
|
|
|
37473
38295
|
"key": "{focus.outline}",
|
|
37474
38296
|
"$value": "2px solid #6cb6ff",
|
|
37475
38297
|
"$type": "border",
|
|
38298
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38299
|
+
"$extensions": {
|
|
38300
|
+
"org.primer.llm": {
|
|
38301
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38302
|
+
"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."
|
|
38303
|
+
}
|
|
38304
|
+
},
|
|
37476
38305
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37477
38306
|
"isSource": true,
|
|
37478
38307
|
"original": {
|
|
@@ -37482,6 +38311,13 @@
|
|
|
37482
38311
|
"width": "2px"
|
|
37483
38312
|
},
|
|
37484
38313
|
"$type": "border",
|
|
38314
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38315
|
+
"$extensions": {
|
|
38316
|
+
"org.primer.llm": {
|
|
38317
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38318
|
+
"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."
|
|
38319
|
+
}
|
|
38320
|
+
},
|
|
37485
38321
|
"key": "{focus.outline}"
|
|
37486
38322
|
},
|
|
37487
38323
|
"name": "focus-outline",
|
|
@@ -37492,11 +38328,16 @@
|
|
|
37492
38328
|
"key": "{focus.outlineColor}",
|
|
37493
38329
|
"$value": "#6cb6ff",
|
|
37494
38330
|
"$type": "color",
|
|
38331
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37495
38332
|
"$extensions": {
|
|
37496
38333
|
"org.primer.figma": {
|
|
37497
38334
|
"collection": "mode",
|
|
37498
38335
|
"group": "component (internal)",
|
|
37499
38336
|
"scopes": ["borderColor", "effectColor"]
|
|
38337
|
+
},
|
|
38338
|
+
"org.primer.llm": {
|
|
38339
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38340
|
+
"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."
|
|
37500
38341
|
}
|
|
37501
38342
|
},
|
|
37502
38343
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37504,11 +38345,16 @@
|
|
|
37504
38345
|
"original": {
|
|
37505
38346
|
"$value": "{borderColor.accent.emphasis}",
|
|
37506
38347
|
"$type": "color",
|
|
38348
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37507
38349
|
"$extensions": {
|
|
37508
38350
|
"org.primer.figma": {
|
|
37509
38351
|
"collection": "mode",
|
|
37510
38352
|
"group": "component (internal)",
|
|
37511
38353
|
"scopes": ["borderColor", "effectColor"]
|
|
38354
|
+
},
|
|
38355
|
+
"org.primer.llm": {
|
|
38356
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38357
|
+
"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."
|
|
37512
38358
|
}
|
|
37513
38359
|
},
|
|
37514
38360
|
"key": "{focus.outlineColor}"
|
|
@@ -46564,6 +47410,7 @@
|
|
|
46564
47410
|
"key": "{selection.bgColor}",
|
|
46565
47411
|
"$value": "#1b4b91b3",
|
|
46566
47412
|
"$type": "color",
|
|
47413
|
+
"$description": "Background color for text selection highlights",
|
|
46567
47414
|
"$extensions": {
|
|
46568
47415
|
"org.primer.figma": {
|
|
46569
47416
|
"collection": "mode",
|
|
@@ -46578,6 +47425,10 @@
|
|
|
46578
47425
|
"isSource": true,
|
|
46579
47426
|
"$type": "color"
|
|
46580
47427
|
}
|
|
47428
|
+
},
|
|
47429
|
+
"org.primer.llm": {
|
|
47430
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47431
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46581
47432
|
}
|
|
46582
47433
|
},
|
|
46583
47434
|
"alpha": 0.7,
|
|
@@ -46586,6 +47437,7 @@
|
|
|
46586
47437
|
"original": {
|
|
46587
47438
|
"$value": "{bgColor.accent.emphasis}",
|
|
46588
47439
|
"$type": "color",
|
|
47440
|
+
"$description": "Background color for text selection highlights",
|
|
46589
47441
|
"$extensions": {
|
|
46590
47442
|
"org.primer.figma": {
|
|
46591
47443
|
"collection": "mode",
|
|
@@ -46600,6 +47452,10 @@
|
|
|
46600
47452
|
"isSource": true,
|
|
46601
47453
|
"$type": "color"
|
|
46602
47454
|
}
|
|
47455
|
+
},
|
|
47456
|
+
"org.primer.llm": {
|
|
47457
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47458
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46603
47459
|
}
|
|
46604
47460
|
},
|
|
46605
47461
|
"alpha": 0.7,
|
|
@@ -46613,6 +47469,7 @@
|
|
|
46613
47469
|
"key": "{shadow.floating.large}",
|
|
46614
47470
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 24px 48px 0px #010409",
|
|
46615
47471
|
"$type": "shadow",
|
|
47472
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46616
47473
|
"$extensions": {
|
|
46617
47474
|
"org.primer.figma": {
|
|
46618
47475
|
"collection": "mode",
|
|
@@ -46642,6 +47499,10 @@
|
|
|
46642
47499
|
"isSource": true,
|
|
46643
47500
|
"$type": "shadow"
|
|
46644
47501
|
}
|
|
47502
|
+
},
|
|
47503
|
+
"org.primer.llm": {
|
|
47504
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47505
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46645
47506
|
}
|
|
46646
47507
|
},
|
|
46647
47508
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46666,6 +47527,7 @@
|
|
|
46666
47527
|
}
|
|
46667
47528
|
],
|
|
46668
47529
|
"$type": "shadow",
|
|
47530
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46669
47531
|
"$extensions": {
|
|
46670
47532
|
"org.primer.figma": {
|
|
46671
47533
|
"collection": "mode",
|
|
@@ -46695,6 +47557,10 @@
|
|
|
46695
47557
|
"isSource": true,
|
|
46696
47558
|
"$type": "shadow"
|
|
46697
47559
|
}
|
|
47560
|
+
},
|
|
47561
|
+
"org.primer.llm": {
|
|
47562
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47563
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46698
47564
|
}
|
|
46699
47565
|
},
|
|
46700
47566
|
"key": "{shadow.floating.large}"
|
|
@@ -46707,6 +47573,7 @@
|
|
|
46707
47573
|
"key": "{shadow.floating.legacy}",
|
|
46708
47574
|
"$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46709
47575
|
"$type": "shadow",
|
|
47576
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46710
47577
|
"$extensions": {
|
|
46711
47578
|
"org.primer.figma": {},
|
|
46712
47579
|
"org.primer.overrides": {
|
|
@@ -46733,6 +47600,10 @@
|
|
|
46733
47600
|
"isSource": true,
|
|
46734
47601
|
"$type": "shadow"
|
|
46735
47602
|
}
|
|
47603
|
+
},
|
|
47604
|
+
"org.primer.llm": {
|
|
47605
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47606
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46736
47607
|
}
|
|
46737
47608
|
},
|
|
46738
47609
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46757,6 +47628,7 @@
|
|
|
46757
47628
|
}
|
|
46758
47629
|
],
|
|
46759
47630
|
"$type": "shadow",
|
|
47631
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46760
47632
|
"$extensions": {
|
|
46761
47633
|
"org.primer.figma": {},
|
|
46762
47634
|
"org.primer.overrides": {
|
|
@@ -46783,6 +47655,10 @@
|
|
|
46783
47655
|
"isSource": true,
|
|
46784
47656
|
"$type": "shadow"
|
|
46785
47657
|
}
|
|
47658
|
+
},
|
|
47659
|
+
"org.primer.llm": {
|
|
47660
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47661
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46786
47662
|
}
|
|
46787
47663
|
},
|
|
46788
47664
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46795,6 +47671,7 @@
|
|
|
46795
47671
|
"key": "{shadow.floating.medium}",
|
|
46796
47672
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
|
|
46797
47673
|
"$type": "shadow",
|
|
47674
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46798
47675
|
"$extensions": {
|
|
46799
47676
|
"org.primer.figma": {
|
|
46800
47677
|
"collection": "mode",
|
|
@@ -46848,6 +47725,10 @@
|
|
|
46848
47725
|
"isSource": true,
|
|
46849
47726
|
"$type": "shadow"
|
|
46850
47727
|
}
|
|
47728
|
+
},
|
|
47729
|
+
"org.primer.llm": {
|
|
47730
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47731
|
+
"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."
|
|
46851
47732
|
}
|
|
46852
47733
|
},
|
|
46853
47734
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46896,6 +47777,7 @@
|
|
|
46896
47777
|
}
|
|
46897
47778
|
],
|
|
46898
47779
|
"$type": "shadow",
|
|
47780
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46899
47781
|
"$extensions": {
|
|
46900
47782
|
"org.primer.figma": {
|
|
46901
47783
|
"collection": "mode",
|
|
@@ -46949,6 +47831,10 @@
|
|
|
46949
47831
|
"isSource": true,
|
|
46950
47832
|
"$type": "shadow"
|
|
46951
47833
|
}
|
|
47834
|
+
},
|
|
47835
|
+
"org.primer.llm": {
|
|
47836
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47837
|
+
"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."
|
|
46952
47838
|
}
|
|
46953
47839
|
},
|
|
46954
47840
|
"key": "{shadow.floating.medium}"
|
|
@@ -46961,6 +47847,7 @@
|
|
|
46961
47847
|
"key": "{shadow.floating.small}",
|
|
46962
47848
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
|
|
46963
47849
|
"$type": "shadow",
|
|
47850
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46964
47851
|
"$extensions": {
|
|
46965
47852
|
"org.primer.figma": {
|
|
46966
47853
|
"collection": "mode",
|
|
@@ -46998,6 +47885,10 @@
|
|
|
46998
47885
|
"isSource": true,
|
|
46999
47886
|
"$type": "shadow"
|
|
47000
47887
|
}
|
|
47888
|
+
},
|
|
47889
|
+
"org.primer.llm": {
|
|
47890
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47891
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47001
47892
|
}
|
|
47002
47893
|
},
|
|
47003
47894
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47030,6 +47921,7 @@
|
|
|
47030
47921
|
}
|
|
47031
47922
|
],
|
|
47032
47923
|
"$type": "shadow",
|
|
47924
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47033
47925
|
"$extensions": {
|
|
47034
47926
|
"org.primer.figma": {
|
|
47035
47927
|
"collection": "mode",
|
|
@@ -47067,6 +47959,10 @@
|
|
|
47067
47959
|
"isSource": true,
|
|
47068
47960
|
"$type": "shadow"
|
|
47069
47961
|
}
|
|
47962
|
+
},
|
|
47963
|
+
"org.primer.llm": {
|
|
47964
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47965
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47070
47966
|
}
|
|
47071
47967
|
},
|
|
47072
47968
|
"key": "{shadow.floating.small}"
|
|
@@ -47079,6 +47975,7 @@
|
|
|
47079
47975
|
"key": "{shadow.floating.xlarge}",
|
|
47080
47976
|
"$value": "0px 0px 0px 1px #b7bdc8, 0px 32px 64px 0px #010409",
|
|
47081
47977
|
"$type": "shadow",
|
|
47978
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47082
47979
|
"$extensions": {
|
|
47083
47980
|
"org.primer.figma": {
|
|
47084
47981
|
"collection": "mode",
|
|
@@ -47108,6 +48005,10 @@
|
|
|
47108
48005
|
"isSource": true,
|
|
47109
48006
|
"$type": "shadow"
|
|
47110
48007
|
}
|
|
48008
|
+
},
|
|
48009
|
+
"org.primer.llm": {
|
|
48010
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48011
|
+
"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."
|
|
47111
48012
|
}
|
|
47112
48013
|
},
|
|
47113
48014
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47132,6 +48033,7 @@
|
|
|
47132
48033
|
}
|
|
47133
48034
|
],
|
|
47134
48035
|
"$type": "shadow",
|
|
48036
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47135
48037
|
"$extensions": {
|
|
47136
48038
|
"org.primer.figma": {
|
|
47137
48039
|
"collection": "mode",
|
|
@@ -47161,6 +48063,10 @@
|
|
|
47161
48063
|
"isSource": true,
|
|
47162
48064
|
"$type": "shadow"
|
|
47163
48065
|
}
|
|
48066
|
+
},
|
|
48067
|
+
"org.primer.llm": {
|
|
48068
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48069
|
+
"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."
|
|
47164
48070
|
}
|
|
47165
48071
|
},
|
|
47166
48072
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47173,6 +48079,7 @@
|
|
|
47173
48079
|
"key": "{shadow.inset}",
|
|
47174
48080
|
"$value": "inset 0px 1px 0px 0px #0104093d",
|
|
47175
48081
|
"$type": "shadow",
|
|
48082
|
+
"$description": "Inset shadow for recessed elements",
|
|
47176
48083
|
"$extensions": {
|
|
47177
48084
|
"org.primer.figma": {
|
|
47178
48085
|
"collection": "mode",
|
|
@@ -47193,6 +48100,10 @@
|
|
|
47193
48100
|
"isSource": true,
|
|
47194
48101
|
"$type": "shadow"
|
|
47195
48102
|
}
|
|
48103
|
+
},
|
|
48104
|
+
"org.primer.llm": {
|
|
48105
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48106
|
+
"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."
|
|
47196
48107
|
}
|
|
47197
48108
|
},
|
|
47198
48109
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47208,6 +48119,7 @@
|
|
|
47208
48119
|
"inset": true
|
|
47209
48120
|
},
|
|
47210
48121
|
"$type": "shadow",
|
|
48122
|
+
"$description": "Inset shadow for recessed elements",
|
|
47211
48123
|
"$extensions": {
|
|
47212
48124
|
"org.primer.figma": {
|
|
47213
48125
|
"collection": "mode",
|
|
@@ -47228,6 +48140,10 @@
|
|
|
47228
48140
|
"isSource": true,
|
|
47229
48141
|
"$type": "shadow"
|
|
47230
48142
|
}
|
|
48143
|
+
},
|
|
48144
|
+
"org.primer.llm": {
|
|
48145
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48146
|
+
"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."
|
|
47231
48147
|
}
|
|
47232
48148
|
},
|
|
47233
48149
|
"key": "{shadow.inset}"
|
|
@@ -47240,6 +48156,7 @@
|
|
|
47240
48156
|
"key": "{shadow.resting.medium}",
|
|
47241
48157
|
"$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
|
|
47242
48158
|
"$type": "shadow",
|
|
48159
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47243
48160
|
"$extensions": {
|
|
47244
48161
|
"org.primer.figma": {
|
|
47245
48162
|
"collection": "mode",
|
|
@@ -47269,6 +48186,10 @@
|
|
|
47269
48186
|
"isSource": true,
|
|
47270
48187
|
"$type": "shadow"
|
|
47271
48188
|
}
|
|
48189
|
+
},
|
|
48190
|
+
"org.primer.llm": {
|
|
48191
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48192
|
+
"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."
|
|
47272
48193
|
}
|
|
47273
48194
|
},
|
|
47274
48195
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47293,6 +48214,7 @@
|
|
|
47293
48214
|
}
|
|
47294
48215
|
],
|
|
47295
48216
|
"$type": "shadow",
|
|
48217
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47296
48218
|
"$extensions": {
|
|
47297
48219
|
"org.primer.figma": {
|
|
47298
48220
|
"collection": "mode",
|
|
@@ -47322,6 +48244,10 @@
|
|
|
47322
48244
|
"isSource": true,
|
|
47323
48245
|
"$type": "shadow"
|
|
47324
48246
|
}
|
|
48247
|
+
},
|
|
48248
|
+
"org.primer.llm": {
|
|
48249
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48250
|
+
"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."
|
|
47325
48251
|
}
|
|
47326
48252
|
},
|
|
47327
48253
|
"key": "{shadow.resting.medium}"
|
|
@@ -47334,6 +48260,7 @@
|
|
|
47334
48260
|
"key": "{shadow.resting.small}",
|
|
47335
48261
|
"$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
|
|
47336
48262
|
"$type": "shadow",
|
|
48263
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47337
48264
|
"$extensions": {
|
|
47338
48265
|
"org.primer.figma": {
|
|
47339
48266
|
"collection": "mode",
|
|
@@ -47365,6 +48292,10 @@
|
|
|
47365
48292
|
"isSource": true,
|
|
47366
48293
|
"$type": "shadow"
|
|
47367
48294
|
}
|
|
48295
|
+
},
|
|
48296
|
+
"org.primer.llm": {
|
|
48297
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48298
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47368
48299
|
}
|
|
47369
48300
|
},
|
|
47370
48301
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47391,6 +48322,7 @@
|
|
|
47391
48322
|
}
|
|
47392
48323
|
],
|
|
47393
48324
|
"$type": "shadow",
|
|
48325
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47394
48326
|
"$extensions": {
|
|
47395
48327
|
"org.primer.figma": {
|
|
47396
48328
|
"collection": "mode",
|
|
@@ -47422,6 +48354,10 @@
|
|
|
47422
48354
|
"isSource": true,
|
|
47423
48355
|
"$type": "shadow"
|
|
47424
48356
|
}
|
|
48357
|
+
},
|
|
48358
|
+
"org.primer.llm": {
|
|
48359
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48360
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47425
48361
|
}
|
|
47426
48362
|
},
|
|
47427
48363
|
"key": "{shadow.resting.small}"
|
|
@@ -47434,6 +48370,7 @@
|
|
|
47434
48370
|
"key": "{shadow.resting.xsmall}",
|
|
47435
48371
|
"$value": "0px 1px 1px 0px #010409cc",
|
|
47436
48372
|
"$type": "shadow",
|
|
48373
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47437
48374
|
"$extensions": {
|
|
47438
48375
|
"org.primer.figma": {
|
|
47439
48376
|
"collection": "mode",
|
|
@@ -47454,6 +48391,10 @@
|
|
|
47454
48391
|
"isSource": true,
|
|
47455
48392
|
"$type": "shadow"
|
|
47456
48393
|
}
|
|
48394
|
+
},
|
|
48395
|
+
"org.primer.llm": {
|
|
48396
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48397
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47457
48398
|
}
|
|
47458
48399
|
},
|
|
47459
48400
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47469,6 +48410,7 @@
|
|
|
47469
48410
|
"inset": false
|
|
47470
48411
|
},
|
|
47471
48412
|
"$type": "shadow",
|
|
48413
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47472
48414
|
"$extensions": {
|
|
47473
48415
|
"org.primer.figma": {
|
|
47474
48416
|
"collection": "mode",
|
|
@@ -47489,6 +48431,10 @@
|
|
|
47489
48431
|
"isSource": true,
|
|
47490
48432
|
"$type": "shadow"
|
|
47491
48433
|
}
|
|
48434
|
+
},
|
|
48435
|
+
"org.primer.llm": {
|
|
48436
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48437
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47492
48438
|
}
|
|
47493
48439
|
},
|
|
47494
48440
|
"key": "{shadow.resting.xsmall}"
|