@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
|
@@ -295,6 +295,7 @@
|
|
|
295
295
|
"key": "{bgColor.accent.emphasis}",
|
|
296
296
|
"$value": "#0349b4",
|
|
297
297
|
"$type": "color",
|
|
298
|
+
"$description": "Strong accent background for active states and focused states",
|
|
298
299
|
"$extensions": {
|
|
299
300
|
"org.primer.figma": {
|
|
300
301
|
"collection": "mode",
|
|
@@ -310,6 +311,10 @@
|
|
|
310
311
|
"dark-dimmed-high-contrast": "#022f7a",
|
|
311
312
|
"dark-tritanopia-high-contrast": "#021a4a",
|
|
312
313
|
"dark-protanopia-deuteranopia-high-contrast": "#021a4a"
|
|
314
|
+
},
|
|
315
|
+
"org.primer.llm": {
|
|
316
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
317
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
313
318
|
}
|
|
314
319
|
},
|
|
315
320
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -317,6 +322,7 @@
|
|
|
317
322
|
"original": {
|
|
318
323
|
"$value": "{base.color.blue.5}",
|
|
319
324
|
"$type": "color",
|
|
325
|
+
"$description": "Strong accent background for active states and focused states",
|
|
320
326
|
"$extensions": {
|
|
321
327
|
"org.primer.figma": {
|
|
322
328
|
"collection": "mode",
|
|
@@ -332,6 +338,10 @@
|
|
|
332
338
|
"dark-dimmed-high-contrast": "{base.color.blue.7}",
|
|
333
339
|
"dark-tritanopia-high-contrast": "{base.color.blue.9}",
|
|
334
340
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}"
|
|
341
|
+
},
|
|
342
|
+
"org.primer.llm": {
|
|
343
|
+
"usage": ["active-states", "current", "selected", "active-toggle"],
|
|
344
|
+
"rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text."
|
|
335
345
|
}
|
|
336
346
|
},
|
|
337
347
|
"key": "{bgColor.accent.emphasis}"
|
|
@@ -344,6 +354,7 @@
|
|
|
344
354
|
"key": "{bgColor.accent.muted}",
|
|
345
355
|
"$value": "#dff7ff",
|
|
346
356
|
"$type": "color",
|
|
357
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
347
358
|
"$extensions": {
|
|
348
359
|
"org.primer.figma": {
|
|
349
360
|
"collection": "mode",
|
|
@@ -361,6 +372,10 @@
|
|
|
361
372
|
"isSource": true,
|
|
362
373
|
"$type": "color"
|
|
363
374
|
}
|
|
375
|
+
},
|
|
376
|
+
"org.primer.llm": {
|
|
377
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
378
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
364
379
|
}
|
|
365
380
|
},
|
|
366
381
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -368,6 +383,7 @@
|
|
|
368
383
|
"original": {
|
|
369
384
|
"$value": "{base.color.blue.0}",
|
|
370
385
|
"$type": "color",
|
|
386
|
+
"$description": "Subtle accent background for informational or selected elements",
|
|
371
387
|
"$extensions": {
|
|
372
388
|
"org.primer.figma": {
|
|
373
389
|
"collection": "mode",
|
|
@@ -385,6 +401,10 @@
|
|
|
385
401
|
"isSource": true,
|
|
386
402
|
"$type": "color"
|
|
387
403
|
}
|
|
404
|
+
},
|
|
405
|
+
"org.primer.llm": {
|
|
406
|
+
"usage": ["selected-row", "info-banner", "active-nav-item", "highlight"],
|
|
407
|
+
"rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text."
|
|
388
408
|
}
|
|
389
409
|
},
|
|
390
410
|
"key": "{bgColor.accent.muted}"
|
|
@@ -397,6 +417,7 @@
|
|
|
397
417
|
"key": "{bgColor.attention.emphasis}",
|
|
398
418
|
"$value": "#744500",
|
|
399
419
|
"$type": "color",
|
|
420
|
+
"$description": "Strong attention background for prominent warnings",
|
|
400
421
|
"$extensions": {
|
|
401
422
|
"org.primer.figma": {
|
|
402
423
|
"collection": "mode",
|
|
@@ -411,6 +432,10 @@
|
|
|
411
432
|
"dark-dimmed-high-contrast": "#4e2c00",
|
|
412
433
|
"dark-protanopia-deuteranopia-high-contrast": "#2e1800",
|
|
413
434
|
"dark-tritanopia-high-contrast": "#2e1800"
|
|
435
|
+
},
|
|
436
|
+
"org.primer.llm": {
|
|
437
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
438
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
414
439
|
}
|
|
415
440
|
},
|
|
416
441
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -418,6 +443,7 @@
|
|
|
418
443
|
"original": {
|
|
419
444
|
"$value": "{base.color.yellow.5}",
|
|
420
445
|
"$type": "color",
|
|
446
|
+
"$description": "Strong attention background for prominent warnings",
|
|
421
447
|
"$extensions": {
|
|
422
448
|
"org.primer.figma": {
|
|
423
449
|
"collection": "mode",
|
|
@@ -432,6 +458,10 @@
|
|
|
432
458
|
"dark-dimmed-high-contrast": "{base.color.yellow.7}",
|
|
433
459
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}",
|
|
434
460
|
"dark-tritanopia-high-contrast": "{base.color.yellow.9}"
|
|
461
|
+
},
|
|
462
|
+
"org.primer.llm": {
|
|
463
|
+
"usage": ["warning-badge", "caution-label", "attention-indicator"],
|
|
464
|
+
"rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast."
|
|
435
465
|
}
|
|
436
466
|
},
|
|
437
467
|
"key": "{bgColor.attention.emphasis}"
|
|
@@ -444,6 +474,7 @@
|
|
|
444
474
|
"key": "{bgColor.attention.muted}",
|
|
445
475
|
"$value": "#fcf7be",
|
|
446
476
|
"$type": "color",
|
|
477
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
447
478
|
"$extensions": {
|
|
448
479
|
"org.primer.figma": {
|
|
449
480
|
"collection": "mode",
|
|
@@ -461,6 +492,10 @@
|
|
|
461
492
|
"isSource": true,
|
|
462
493
|
"$type": "color"
|
|
463
494
|
}
|
|
495
|
+
},
|
|
496
|
+
"org.primer.llm": {
|
|
497
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
498
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
464
499
|
}
|
|
465
500
|
},
|
|
466
501
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -468,6 +503,7 @@
|
|
|
468
503
|
"original": {
|
|
469
504
|
"$value": "{base.color.yellow.0}",
|
|
470
505
|
"$type": "color",
|
|
506
|
+
"$description": "Subtle attention background for warnings and caution states",
|
|
471
507
|
"$extensions": {
|
|
472
508
|
"org.primer.figma": {
|
|
473
509
|
"collection": "mode",
|
|
@@ -485,6 +521,10 @@
|
|
|
485
521
|
"isSource": true,
|
|
486
522
|
"$type": "color"
|
|
487
523
|
}
|
|
524
|
+
},
|
|
525
|
+
"org.primer.llm": {
|
|
526
|
+
"usage": ["warning-banner", "caution-message", "pending-state"],
|
|
527
|
+
"rules": "Use for warnings that need user attention. Pair with fgColor.attention for text."
|
|
488
528
|
}
|
|
489
529
|
},
|
|
490
530
|
"key": "{bgColor.attention.muted}"
|
|
@@ -497,6 +537,7 @@
|
|
|
497
537
|
"key": "{bgColor.black}",
|
|
498
538
|
"$value": "#010409",
|
|
499
539
|
"$type": "color",
|
|
540
|
+
"$description": "Pure black background",
|
|
500
541
|
"$extensions": {
|
|
501
542
|
"org.primer.figma": {
|
|
502
543
|
"collection": "mode",
|
|
@@ -505,6 +546,10 @@
|
|
|
505
546
|
},
|
|
506
547
|
"org.primer.overrides": {
|
|
507
548
|
"dark": "#ffffff"
|
|
549
|
+
},
|
|
550
|
+
"org.primer.llm": {
|
|
551
|
+
"doNotUse": true,
|
|
552
|
+
"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."
|
|
508
553
|
}
|
|
509
554
|
},
|
|
510
555
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -512,6 +557,7 @@
|
|
|
512
557
|
"original": {
|
|
513
558
|
"$value": "{base.color.neutral.13}",
|
|
514
559
|
"$type": "color",
|
|
560
|
+
"$description": "Pure black background",
|
|
515
561
|
"$extensions": {
|
|
516
562
|
"org.primer.figma": {
|
|
517
563
|
"collection": "mode",
|
|
@@ -520,6 +566,10 @@
|
|
|
520
566
|
},
|
|
521
567
|
"org.primer.overrides": {
|
|
522
568
|
"dark": "{base.color.neutral.0}"
|
|
569
|
+
},
|
|
570
|
+
"org.primer.llm": {
|
|
571
|
+
"doNotUse": true,
|
|
572
|
+
"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."
|
|
523
573
|
}
|
|
524
574
|
},
|
|
525
575
|
"key": "{bgColor.black}"
|
|
@@ -532,6 +582,7 @@
|
|
|
532
582
|
"key": "{bgColor.closed.emphasis}",
|
|
533
583
|
"$value": "#454c54",
|
|
534
584
|
"$type": "color",
|
|
585
|
+
"$description": "Strong background for closed state badges and labels",
|
|
535
586
|
"$extensions": {
|
|
536
587
|
"org.primer.figma": {
|
|
537
588
|
"collection": "mode",
|
|
@@ -550,6 +601,10 @@
|
|
|
550
601
|
"light-protanopia-deuteranopia-high-contrast": "#454c54",
|
|
551
602
|
"dark-protanopia-deuteranopia": "#454c54",
|
|
552
603
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
604
|
+
},
|
|
605
|
+
"org.primer.llm": {
|
|
606
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
607
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
553
608
|
}
|
|
554
609
|
},
|
|
555
610
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -557,6 +612,7 @@
|
|
|
557
612
|
"original": {
|
|
558
613
|
"$value": "{bgColor.neutral.emphasis}",
|
|
559
614
|
"$type": "color",
|
|
615
|
+
"$description": "Strong background for closed state badges and labels",
|
|
560
616
|
"$extensions": {
|
|
561
617
|
"org.primer.figma": {
|
|
562
618
|
"collection": "mode",
|
|
@@ -575,6 +631,10 @@
|
|
|
575
631
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
576
632
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
577
633
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
634
|
+
},
|
|
635
|
+
"org.primer.llm": {
|
|
636
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
637
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
578
638
|
}
|
|
579
639
|
},
|
|
580
640
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -587,6 +647,7 @@
|
|
|
587
647
|
"key": "{bgColor.closed.muted}",
|
|
588
648
|
"$value": "#e0e6eb",
|
|
589
649
|
"$type": "color",
|
|
650
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
590
651
|
"$extensions": {
|
|
591
652
|
"org.primer.figma": {
|
|
592
653
|
"collection": "mode",
|
|
@@ -622,6 +683,10 @@
|
|
|
622
683
|
"isSource": true,
|
|
623
684
|
"$type": "color"
|
|
624
685
|
}
|
|
686
|
+
},
|
|
687
|
+
"org.primer.llm": {
|
|
688
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
689
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
625
690
|
}
|
|
626
691
|
},
|
|
627
692
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -629,6 +694,7 @@
|
|
|
629
694
|
"original": {
|
|
630
695
|
"$value": "{bgColor.neutral.muted}",
|
|
631
696
|
"$type": "color",
|
|
697
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
632
698
|
"$extensions": {
|
|
633
699
|
"org.primer.figma": {
|
|
634
700
|
"collection": "mode",
|
|
@@ -664,6 +730,10 @@
|
|
|
664
730
|
"isSource": true,
|
|
665
731
|
"$type": "color"
|
|
666
732
|
}
|
|
733
|
+
},
|
|
734
|
+
"org.primer.llm": {
|
|
735
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
736
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
667
737
|
}
|
|
668
738
|
},
|
|
669
739
|
"key": "{bgColor.closed.muted}"
|
|
@@ -676,6 +746,7 @@
|
|
|
676
746
|
"key": "{bgColor.danger.emphasis}",
|
|
677
747
|
"$value": "#873800",
|
|
678
748
|
"$type": "color",
|
|
749
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
679
750
|
"$extensions": {
|
|
680
751
|
"org.primer.figma": {
|
|
681
752
|
"collection": "mode",
|
|
@@ -693,6 +764,10 @@
|
|
|
693
764
|
"dark-high-contrast": "#430011",
|
|
694
765
|
"dark-dimmed-high-contrast": "#6e011a",
|
|
695
766
|
"dark-tritanopia-high-contrast": "#430011"
|
|
767
|
+
},
|
|
768
|
+
"org.primer.llm": {
|
|
769
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
770
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
696
771
|
}
|
|
697
772
|
},
|
|
698
773
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -700,6 +775,7 @@
|
|
|
700
775
|
"original": {
|
|
701
776
|
"$value": "{base.color.orange.5}",
|
|
702
777
|
"$type": "color",
|
|
778
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
703
779
|
"$extensions": {
|
|
704
780
|
"org.primer.figma": {
|
|
705
781
|
"collection": "mode",
|
|
@@ -717,6 +793,10 @@
|
|
|
717
793
|
"dark-high-contrast": "{base.color.red.9}",
|
|
718
794
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
719
795
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
796
|
+
},
|
|
797
|
+
"org.primer.llm": {
|
|
798
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
799
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
720
800
|
}
|
|
721
801
|
},
|
|
722
802
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -729,6 +809,7 @@
|
|
|
729
809
|
"key": "{bgColor.danger.muted}",
|
|
730
810
|
"$value": "#fff2d5",
|
|
731
811
|
"$type": "color",
|
|
812
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
732
813
|
"$extensions": {
|
|
733
814
|
"org.primer.figma": {
|
|
734
815
|
"collection": "mode",
|
|
@@ -755,6 +836,10 @@
|
|
|
755
836
|
"isSource": true,
|
|
756
837
|
"$type": "color"
|
|
757
838
|
}
|
|
839
|
+
},
|
|
840
|
+
"org.primer.llm": {
|
|
841
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
842
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
758
843
|
}
|
|
759
844
|
},
|
|
760
845
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -762,6 +847,7 @@
|
|
|
762
847
|
"original": {
|
|
763
848
|
"$value": "{base.color.orange.0}",
|
|
764
849
|
"$type": "color",
|
|
850
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
765
851
|
"$extensions": {
|
|
766
852
|
"org.primer.figma": {
|
|
767
853
|
"collection": "mode",
|
|
@@ -788,6 +874,10 @@
|
|
|
788
874
|
"isSource": true,
|
|
789
875
|
"$type": "color"
|
|
790
876
|
}
|
|
877
|
+
},
|
|
878
|
+
"org.primer.llm": {
|
|
879
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
880
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
791
881
|
}
|
|
792
882
|
},
|
|
793
883
|
"key": "{bgColor.danger.muted}"
|
|
@@ -800,6 +890,7 @@
|
|
|
800
890
|
"key": "{bgColor.default}",
|
|
801
891
|
"$value": "#ffffff",
|
|
802
892
|
"$type": "color",
|
|
893
|
+
"$description": "Default background color for pages and main content areas",
|
|
803
894
|
"$extensions": {
|
|
804
895
|
"org.primer.figma": {
|
|
805
896
|
"collection": "mode",
|
|
@@ -816,6 +907,10 @@
|
|
|
816
907
|
"dark-high-contrast": "#ffffff",
|
|
817
908
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
818
909
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff"
|
|
910
|
+
},
|
|
911
|
+
"org.primer.llm": {
|
|
912
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
913
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
819
914
|
}
|
|
820
915
|
},
|
|
821
916
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -823,6 +918,7 @@
|
|
|
823
918
|
"original": {
|
|
824
919
|
"$value": "{base.color.neutral.0}",
|
|
825
920
|
"$type": "color",
|
|
921
|
+
"$description": "Default background color for pages and main content areas",
|
|
826
922
|
"$extensions": {
|
|
827
923
|
"org.primer.figma": {
|
|
828
924
|
"collection": "mode",
|
|
@@ -839,6 +935,10 @@
|
|
|
839
935
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
840
936
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
841
937
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
938
|
+
},
|
|
939
|
+
"org.primer.llm": {
|
|
940
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
941
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
842
942
|
}
|
|
843
943
|
},
|
|
844
944
|
"key": "{bgColor.default}"
|
|
@@ -851,6 +951,7 @@
|
|
|
851
951
|
"key": "{bgColor.disabled}",
|
|
852
952
|
"$value": "#e0e6eb",
|
|
853
953
|
"$type": "color",
|
|
954
|
+
"$description": "Background for disabled interactive elements",
|
|
854
955
|
"$extensions": {
|
|
855
956
|
"org.primer.figma": {
|
|
856
957
|
"collection": "mode",
|
|
@@ -867,6 +968,10 @@
|
|
|
867
968
|
"dark-high-contrast": "#e0e6eb",
|
|
868
969
|
"dark-tritanopia-high-contrast": "#e0e6eb",
|
|
869
970
|
"dark-protanopia-deuteranopia-high-contrast": "#e0e6eb"
|
|
971
|
+
},
|
|
972
|
+
"org.primer.llm": {
|
|
973
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
974
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
870
975
|
}
|
|
871
976
|
},
|
|
872
977
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -874,6 +979,7 @@
|
|
|
874
979
|
"original": {
|
|
875
980
|
"$value": "{base.color.neutral.4}",
|
|
876
981
|
"$type": "color",
|
|
982
|
+
"$description": "Background for disabled interactive elements",
|
|
877
983
|
"$extensions": {
|
|
878
984
|
"org.primer.figma": {
|
|
879
985
|
"collection": "mode",
|
|
@@ -890,6 +996,10 @@
|
|
|
890
996
|
"dark-high-contrast": "{base.color.neutral.4}",
|
|
891
997
|
"dark-tritanopia-high-contrast": "{base.color.neutral.4}",
|
|
892
998
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}"
|
|
999
|
+
},
|
|
1000
|
+
"org.primer.llm": {
|
|
1001
|
+
"usage": ["disabled-button", "disabled-input", "inactive-element"],
|
|
1002
|
+
"rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements."
|
|
893
1003
|
}
|
|
894
1004
|
},
|
|
895
1005
|
"key": "{bgColor.disabled}"
|
|
@@ -902,6 +1012,7 @@
|
|
|
902
1012
|
"key": "{bgColor.done.emphasis}",
|
|
903
1013
|
"$value": "#622cbc",
|
|
904
1014
|
"$type": "color",
|
|
1015
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
905
1016
|
"$extensions": {
|
|
906
1017
|
"org.primer.figma": {
|
|
907
1018
|
"collection": "mode",
|
|
@@ -916,6 +1027,10 @@
|
|
|
916
1027
|
"dark-dimmed-high-contrast": "#411d7b",
|
|
917
1028
|
"dark-tritanopia-high-contrast": "#260f49",
|
|
918
1029
|
"dark-protanopia-deuteranopia-high-contrast": "#260f49"
|
|
1030
|
+
},
|
|
1031
|
+
"org.primer.llm": {
|
|
1032
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1033
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
919
1034
|
}
|
|
920
1035
|
},
|
|
921
1036
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -923,6 +1038,7 @@
|
|
|
923
1038
|
"original": {
|
|
924
1039
|
"$value": "{base.color.purple.5}",
|
|
925
1040
|
"$type": "color",
|
|
1041
|
+
"$description": "Strong background for completed/done state badges and labels",
|
|
926
1042
|
"$extensions": {
|
|
927
1043
|
"org.primer.figma": {
|
|
928
1044
|
"collection": "mode",
|
|
@@ -937,6 +1053,10 @@
|
|
|
937
1053
|
"dark-dimmed-high-contrast": "{base.color.purple.7}",
|
|
938
1054
|
"dark-tritanopia-high-contrast": "{base.color.purple.9}",
|
|
939
1055
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}"
|
|
1056
|
+
},
|
|
1057
|
+
"org.primer.llm": {
|
|
1058
|
+
"usage": ["done-badge", "merged-label", "completed-indicator"],
|
|
1059
|
+
"rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text."
|
|
940
1060
|
}
|
|
941
1061
|
},
|
|
942
1062
|
"key": "{bgColor.done.emphasis}"
|
|
@@ -949,6 +1069,7 @@
|
|
|
949
1069
|
"key": "{bgColor.done.muted}",
|
|
950
1070
|
"$value": "#faf0fe",
|
|
951
1071
|
"$type": "color",
|
|
1072
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
952
1073
|
"$extensions": {
|
|
953
1074
|
"org.primer.figma": {
|
|
954
1075
|
"collection": "mode",
|
|
@@ -966,6 +1087,10 @@
|
|
|
966
1087
|
"isSource": true,
|
|
967
1088
|
"$type": "color"
|
|
968
1089
|
}
|
|
1090
|
+
},
|
|
1091
|
+
"org.primer.llm": {
|
|
1092
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1093
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
969
1094
|
}
|
|
970
1095
|
},
|
|
971
1096
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -973,6 +1098,7 @@
|
|
|
973
1098
|
"original": {
|
|
974
1099
|
"$value": "{base.color.purple.0}",
|
|
975
1100
|
"$type": "color",
|
|
1101
|
+
"$description": "Subtle background for completed/done state indicators",
|
|
976
1102
|
"$extensions": {
|
|
977
1103
|
"org.primer.figma": {
|
|
978
1104
|
"collection": "mode",
|
|
@@ -990,6 +1116,10 @@
|
|
|
990
1116
|
"isSource": true,
|
|
991
1117
|
"$type": "color"
|
|
992
1118
|
}
|
|
1119
|
+
},
|
|
1120
|
+
"org.primer.llm": {
|
|
1121
|
+
"usage": ["completed-task", "merged-pr", "done-state"],
|
|
1122
|
+
"rules": "Use for completed/done status indicators. Conveys finished or merged state."
|
|
993
1123
|
}
|
|
994
1124
|
},
|
|
995
1125
|
"key": "{bgColor.done.muted}"
|
|
@@ -1002,6 +1132,7 @@
|
|
|
1002
1132
|
"key": "{bgColor.draft.emphasis}",
|
|
1003
1133
|
"$value": "#454c54",
|
|
1004
1134
|
"$type": "color",
|
|
1135
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1005
1136
|
"$extensions": {
|
|
1006
1137
|
"org.primer.figma": {
|
|
1007
1138
|
"collection": "mode",
|
|
@@ -1010,6 +1141,10 @@
|
|
|
1010
1141
|
"codeSyntax": {
|
|
1011
1142
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1012
1143
|
}
|
|
1144
|
+
},
|
|
1145
|
+
"org.primer.llm": {
|
|
1146
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1147
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1013
1148
|
}
|
|
1014
1149
|
},
|
|
1015
1150
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1017,6 +1152,7 @@
|
|
|
1017
1152
|
"original": {
|
|
1018
1153
|
"$value": "{bgColor.neutral.emphasis}",
|
|
1019
1154
|
"$type": "color",
|
|
1155
|
+
"$description": "Strong background for draft state badges and labels",
|
|
1020
1156
|
"$extensions": {
|
|
1021
1157
|
"org.primer.figma": {
|
|
1022
1158
|
"collection": "mode",
|
|
@@ -1025,6 +1161,10 @@
|
|
|
1025
1161
|
"codeSyntax": {
|
|
1026
1162
|
"web": "var(--bgColor-draft-emphasis)"
|
|
1027
1163
|
}
|
|
1164
|
+
},
|
|
1165
|
+
"org.primer.llm": {
|
|
1166
|
+
"usage": ["draft-badge", "draft-label", "wip-indicator"],
|
|
1167
|
+
"rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text."
|
|
1028
1168
|
}
|
|
1029
1169
|
},
|
|
1030
1170
|
"key": "{bgColor.draft.emphasis}"
|
|
@@ -1037,6 +1177,7 @@
|
|
|
1037
1177
|
"key": "{bgColor.draft.muted}",
|
|
1038
1178
|
"$value": "#e0e6eb",
|
|
1039
1179
|
"$type": "color",
|
|
1180
|
+
"$description": "Subtle background for draft state indicators",
|
|
1040
1181
|
"$extensions": {
|
|
1041
1182
|
"org.primer.figma": {
|
|
1042
1183
|
"collection": "mode",
|
|
@@ -1072,6 +1213,10 @@
|
|
|
1072
1213
|
"isSource": true,
|
|
1073
1214
|
"$type": "color"
|
|
1074
1215
|
}
|
|
1216
|
+
},
|
|
1217
|
+
"org.primer.llm": {
|
|
1218
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1219
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1075
1220
|
}
|
|
1076
1221
|
},
|
|
1077
1222
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1079,6 +1224,7 @@
|
|
|
1079
1224
|
"original": {
|
|
1080
1225
|
"$value": "{bgColor.neutral.muted}",
|
|
1081
1226
|
"$type": "color",
|
|
1227
|
+
"$description": "Subtle background for draft state indicators",
|
|
1082
1228
|
"$extensions": {
|
|
1083
1229
|
"org.primer.figma": {
|
|
1084
1230
|
"collection": "mode",
|
|
@@ -1114,6 +1260,10 @@
|
|
|
1114
1260
|
"isSource": true,
|
|
1115
1261
|
"$type": "color"
|
|
1116
1262
|
}
|
|
1263
|
+
},
|
|
1264
|
+
"org.primer.llm": {
|
|
1265
|
+
"usage": ["draft-pr", "draft-issue", "work-in-progress"],
|
|
1266
|
+
"rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state."
|
|
1117
1267
|
}
|
|
1118
1268
|
},
|
|
1119
1269
|
"key": "{bgColor.draft.muted}"
|
|
@@ -1126,6 +1276,7 @@
|
|
|
1126
1276
|
"key": "{bgColor.emphasis}",
|
|
1127
1277
|
"$value": "#25292e",
|
|
1128
1278
|
"$type": "color",
|
|
1279
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1129
1280
|
"$extensions": {
|
|
1130
1281
|
"org.primer.figma": {
|
|
1131
1282
|
"collection": "mode",
|
|
@@ -1137,6 +1288,10 @@
|
|
|
1137
1288
|
},
|
|
1138
1289
|
"org.primer.overrides": {
|
|
1139
1290
|
"dark": "#c8d1da"
|
|
1291
|
+
},
|
|
1292
|
+
"org.primer.llm": {
|
|
1293
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1294
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1140
1295
|
}
|
|
1141
1296
|
},
|
|
1142
1297
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1144,6 +1299,7 @@
|
|
|
1144
1299
|
"original": {
|
|
1145
1300
|
"$value": "{base.color.neutral.12}",
|
|
1146
1301
|
"$type": "color",
|
|
1302
|
+
"$description": "High-emphasis dark background for strong visual contrast",
|
|
1147
1303
|
"$extensions": {
|
|
1148
1304
|
"org.primer.figma": {
|
|
1149
1305
|
"collection": "mode",
|
|
@@ -1155,6 +1311,10 @@
|
|
|
1155
1311
|
},
|
|
1156
1312
|
"org.primer.overrides": {
|
|
1157
1313
|
"dark": "{base.color.neutral.7}"
|
|
1314
|
+
},
|
|
1315
|
+
"org.primer.llm": {
|
|
1316
|
+
"usage": ["tooltip", "badge-background", "high-contrast-element"],
|
|
1317
|
+
"rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas."
|
|
1158
1318
|
}
|
|
1159
1319
|
},
|
|
1160
1320
|
"key": "{bgColor.emphasis}"
|
|
@@ -1167,6 +1327,7 @@
|
|
|
1167
1327
|
"key": "{bgColor.inset}",
|
|
1168
1328
|
"$value": "#eff2f5",
|
|
1169
1329
|
"$type": "color",
|
|
1330
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1170
1331
|
"$extensions": {
|
|
1171
1332
|
"org.primer.figma": {
|
|
1172
1333
|
"collection": "mode",
|
|
@@ -1183,6 +1344,10 @@
|
|
|
1183
1344
|
"light-high-contrast": "#eff2f5",
|
|
1184
1345
|
"light-tritanopia-high-contrast": "#eff2f5",
|
|
1185
1346
|
"light-protanopia-deuteranopia-high-contrast": "#eff2f5"
|
|
1347
|
+
},
|
|
1348
|
+
"org.primer.llm": {
|
|
1349
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1350
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1186
1351
|
}
|
|
1187
1352
|
},
|
|
1188
1353
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1190,6 +1355,7 @@
|
|
|
1190
1355
|
"original": {
|
|
1191
1356
|
"$value": "{base.color.neutral.2}",
|
|
1192
1357
|
"$type": "color",
|
|
1358
|
+
"$description": "Inset background for recessed content areas like wells or sunken panels",
|
|
1193
1359
|
"$extensions": {
|
|
1194
1360
|
"org.primer.figma": {
|
|
1195
1361
|
"collection": "mode",
|
|
@@ -1206,6 +1372,10 @@
|
|
|
1206
1372
|
"light-high-contrast": "{base.color.neutral.2}",
|
|
1207
1373
|
"light-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1208
1374
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1375
|
+
},
|
|
1376
|
+
"org.primer.llm": {
|
|
1377
|
+
"usage": ["well", "sunken-panel", "recessed-area", "input-background"],
|
|
1378
|
+
"rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells."
|
|
1209
1379
|
}
|
|
1210
1380
|
},
|
|
1211
1381
|
"key": "{bgColor.inset}"
|
|
@@ -1218,6 +1388,7 @@
|
|
|
1218
1388
|
"key": "{bgColor.inverse}",
|
|
1219
1389
|
"$value": "#25292e",
|
|
1220
1390
|
"$type": "color",
|
|
1391
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1221
1392
|
"$extensions": {
|
|
1222
1393
|
"org.primer.figma": {
|
|
1223
1394
|
"collection": "mode",
|
|
@@ -1226,6 +1397,10 @@
|
|
|
1226
1397
|
},
|
|
1227
1398
|
"org.primer.overrides": {
|
|
1228
1399
|
"dark": "#010409"
|
|
1400
|
+
},
|
|
1401
|
+
"org.primer.llm": {
|
|
1402
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1403
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1229
1404
|
}
|
|
1230
1405
|
},
|
|
1231
1406
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1233,6 +1408,7 @@
|
|
|
1233
1408
|
"original": {
|
|
1234
1409
|
"$value": "{base.color.neutral.12}",
|
|
1235
1410
|
"$type": "color",
|
|
1411
|
+
"$description": "Inverse background that flips between light and dark modes",
|
|
1236
1412
|
"$extensions": {
|
|
1237
1413
|
"org.primer.figma": {
|
|
1238
1414
|
"collection": "mode",
|
|
@@ -1241,6 +1417,10 @@
|
|
|
1241
1417
|
},
|
|
1242
1418
|
"org.primer.overrides": {
|
|
1243
1419
|
"dark": "{base.color.neutral.13}"
|
|
1420
|
+
},
|
|
1421
|
+
"org.primer.llm": {
|
|
1422
|
+
"usage": ["overlay-content", "inverse-theme-element"],
|
|
1423
|
+
"rules": "Use when you need opposite theme background. Pair with fgColor.onInverse for text."
|
|
1244
1424
|
}
|
|
1245
1425
|
},
|
|
1246
1426
|
"key": "{bgColor.inverse}"
|
|
@@ -1253,6 +1433,7 @@
|
|
|
1253
1433
|
"key": "{bgColor.muted}",
|
|
1254
1434
|
"$value": "#e6eaef",
|
|
1255
1435
|
"$type": "color",
|
|
1436
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1256
1437
|
"$extensions": {
|
|
1257
1438
|
"org.primer.figma": {
|
|
1258
1439
|
"collection": "mode",
|
|
@@ -1272,6 +1453,10 @@
|
|
|
1272
1453
|
"dark-high-contrast": "#eff2f5",
|
|
1273
1454
|
"dark-tritanopia-high-contrast": "#eff2f5",
|
|
1274
1455
|
"dark-protanopia-deuteranopia-high-contrast": "#eff2f5"
|
|
1456
|
+
},
|
|
1457
|
+
"org.primer.llm": {
|
|
1458
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1459
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1275
1460
|
}
|
|
1276
1461
|
},
|
|
1277
1462
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1279,6 +1464,7 @@
|
|
|
1279
1464
|
"original": {
|
|
1280
1465
|
"$value": "{base.color.neutral.3}",
|
|
1281
1466
|
"$type": "color",
|
|
1467
|
+
"$description": "Muted background for secondary content areas and subtle grouping",
|
|
1282
1468
|
"$extensions": {
|
|
1283
1469
|
"org.primer.figma": {
|
|
1284
1470
|
"collection": "mode",
|
|
@@ -1298,6 +1484,10 @@
|
|
|
1298
1484
|
"dark-high-contrast": "{base.color.neutral.2}",
|
|
1299
1485
|
"dark-tritanopia-high-contrast": "{base.color.neutral.2}",
|
|
1300
1486
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}"
|
|
1487
|
+
},
|
|
1488
|
+
"org.primer.llm": {
|
|
1489
|
+
"usage": ["secondary-content", "code-block-background", "table-header", "sidebar"],
|
|
1490
|
+
"rules": "Use for secondary content areas or to create visual grouping. Do NOT use for primary page backgrounds."
|
|
1301
1491
|
}
|
|
1302
1492
|
},
|
|
1303
1493
|
"key": "{bgColor.muted}"
|
|
@@ -1310,6 +1500,7 @@
|
|
|
1310
1500
|
"key": "{bgColor.neutral.emphasis}",
|
|
1311
1501
|
"$value": "#454c54",
|
|
1312
1502
|
"$type": "color",
|
|
1503
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1313
1504
|
"$extensions": {
|
|
1314
1505
|
"org.primer.figma": {
|
|
1315
1506
|
"collection": "mode",
|
|
@@ -1326,6 +1517,10 @@
|
|
|
1326
1517
|
"dark-high-contrast": "#c8d1da",
|
|
1327
1518
|
"dark-tritanopia-high-contrast": "#c8d1da",
|
|
1328
1519
|
"dark-protanopia-deuteranopia-high-contrast": "#c8d1da"
|
|
1520
|
+
},
|
|
1521
|
+
"org.primer.llm": {
|
|
1522
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1523
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1329
1524
|
}
|
|
1330
1525
|
},
|
|
1331
1526
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1333,6 +1528,7 @@
|
|
|
1333
1528
|
"original": {
|
|
1334
1529
|
"$value": "{base.color.neutral.10}",
|
|
1335
1530
|
"$type": "color",
|
|
1531
|
+
"$description": "Strong neutral background for prominent neutral elements",
|
|
1336
1532
|
"$extensions": {
|
|
1337
1533
|
"org.primer.figma": {
|
|
1338
1534
|
"collection": "mode",
|
|
@@ -1349,6 +1545,10 @@
|
|
|
1349
1545
|
"dark-high-contrast": "{base.color.neutral.7}",
|
|
1350
1546
|
"dark-tritanopia-high-contrast": "{base.color.neutral.7}",
|
|
1351
1547
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}"
|
|
1548
|
+
},
|
|
1549
|
+
"org.primer.llm": {
|
|
1550
|
+
"usage": ["neutral-button", "secondary-action", "neutral-indicator"],
|
|
1551
|
+
"rules": "Use for emphasized neutral elements. Pair with fgColor.onEmphasis for text."
|
|
1352
1552
|
}
|
|
1353
1553
|
},
|
|
1354
1554
|
"key": "{bgColor.neutral.emphasis}"
|
|
@@ -1361,6 +1561,7 @@
|
|
|
1361
1561
|
"key": "{bgColor.neutral.muted}",
|
|
1362
1562
|
"$value": "#e0e6eb",
|
|
1363
1563
|
"$type": "color",
|
|
1564
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1364
1565
|
"$extensions": {
|
|
1365
1566
|
"org.primer.figma": {
|
|
1366
1567
|
"collection": "mode",
|
|
@@ -1388,6 +1589,10 @@
|
|
|
1388
1589
|
"dark-high-contrast": "#e6eaef",
|
|
1389
1590
|
"dark-tritanopia-high-contrast": "#e6eaef",
|
|
1390
1591
|
"dark-protanopia-deuteranopia-high-contrast": "#e6eaef"
|
|
1592
|
+
},
|
|
1593
|
+
"org.primer.llm": {
|
|
1594
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1595
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1391
1596
|
}
|
|
1392
1597
|
},
|
|
1393
1598
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1395,6 +1600,7 @@
|
|
|
1395
1600
|
"original": {
|
|
1396
1601
|
"$value": "{base.color.neutral.4}",
|
|
1397
1602
|
"$type": "color",
|
|
1603
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1398
1604
|
"$extensions": {
|
|
1399
1605
|
"org.primer.figma": {
|
|
1400
1606
|
"collection": "mode",
|
|
@@ -1422,6 +1628,10 @@
|
|
|
1422
1628
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1423
1629
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1424
1630
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1631
|
+
},
|
|
1632
|
+
"org.primer.llm": {
|
|
1633
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1634
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1425
1635
|
}
|
|
1426
1636
|
},
|
|
1427
1637
|
"key": "{bgColor.neutral.muted}"
|
|
@@ -1434,6 +1644,7 @@
|
|
|
1434
1644
|
"key": "{bgColor.open.emphasis}",
|
|
1435
1645
|
"$value": "#873800",
|
|
1436
1646
|
"$type": "color",
|
|
1647
|
+
"$description": "Strong background for open state badges and labels",
|
|
1437
1648
|
"$extensions": {
|
|
1438
1649
|
"org.primer.figma": {
|
|
1439
1650
|
"collection": "mode",
|
|
@@ -1452,6 +1663,10 @@
|
|
|
1452
1663
|
"light-protanopia-deuteranopia-high-contrast": "#873800",
|
|
1453
1664
|
"dark-protanopia-deuteranopia": "#873800",
|
|
1454
1665
|
"dark-protanopia-deuteranopia-high-contrast": "#361200"
|
|
1666
|
+
},
|
|
1667
|
+
"org.primer.llm": {
|
|
1668
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1669
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1455
1670
|
}
|
|
1456
1671
|
},
|
|
1457
1672
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1459,6 +1674,7 @@
|
|
|
1459
1674
|
"original": {
|
|
1460
1675
|
"$value": "{base.color.orange.5}",
|
|
1461
1676
|
"$type": "color",
|
|
1677
|
+
"$description": "Strong background for open state badges and labels",
|
|
1462
1678
|
"$extensions": {
|
|
1463
1679
|
"org.primer.figma": {
|
|
1464
1680
|
"collection": "mode",
|
|
@@ -1477,6 +1693,10 @@
|
|
|
1477
1693
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1478
1694
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1479
1695
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1696
|
+
},
|
|
1697
|
+
"org.primer.llm": {
|
|
1698
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1699
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1480
1700
|
}
|
|
1481
1701
|
},
|
|
1482
1702
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1489,6 +1709,7 @@
|
|
|
1489
1709
|
"key": "{bgColor.open.muted}",
|
|
1490
1710
|
"$value": "#fff2d5",
|
|
1491
1711
|
"$type": "color",
|
|
1712
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1492
1713
|
"$extensions": {
|
|
1493
1714
|
"org.primer.figma": {
|
|
1494
1715
|
"collection": "mode",
|
|
@@ -1531,6 +1752,10 @@
|
|
|
1531
1752
|
"isSource": true,
|
|
1532
1753
|
"$type": "color"
|
|
1533
1754
|
}
|
|
1755
|
+
},
|
|
1756
|
+
"org.primer.llm": {
|
|
1757
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1758
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1534
1759
|
}
|
|
1535
1760
|
},
|
|
1536
1761
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1538,6 +1763,7 @@
|
|
|
1538
1763
|
"original": {
|
|
1539
1764
|
"$value": "{base.color.orange.0}",
|
|
1540
1765
|
"$type": "color",
|
|
1766
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1541
1767
|
"$extensions": {
|
|
1542
1768
|
"org.primer.figma": {
|
|
1543
1769
|
"collection": "mode",
|
|
@@ -1580,6 +1806,10 @@
|
|
|
1580
1806
|
"isSource": true,
|
|
1581
1807
|
"$type": "color"
|
|
1582
1808
|
}
|
|
1809
|
+
},
|
|
1810
|
+
"org.primer.llm": {
|
|
1811
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1812
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1583
1813
|
}
|
|
1584
1814
|
},
|
|
1585
1815
|
"key": "{bgColor.open.muted}"
|
|
@@ -1592,6 +1822,7 @@
|
|
|
1592
1822
|
"key": "{bgColor.severe.emphasis}",
|
|
1593
1823
|
"$value": "#873800",
|
|
1594
1824
|
"$type": "color",
|
|
1825
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1595
1826
|
"$extensions": {
|
|
1596
1827
|
"org.primer.figma": {
|
|
1597
1828
|
"collection": "mode",
|
|
@@ -1609,6 +1840,10 @@
|
|
|
1609
1840
|
"dark-high-contrast": "#361200",
|
|
1610
1841
|
"dark-dimmed-high-contrast": "#5b2300",
|
|
1611
1842
|
"dark-protanopia-deuteranopia-high-contrast": "#361200"
|
|
1843
|
+
},
|
|
1844
|
+
"org.primer.llm": {
|
|
1845
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1846
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1612
1847
|
}
|
|
1613
1848
|
},
|
|
1614
1849
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1616,6 +1851,7 @@
|
|
|
1616
1851
|
"original": {
|
|
1617
1852
|
"$value": "{base.color.orange.5}",
|
|
1618
1853
|
"$type": "color",
|
|
1854
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1619
1855
|
"$extensions": {
|
|
1620
1856
|
"org.primer.figma": {
|
|
1621
1857
|
"collection": "mode",
|
|
@@ -1633,6 +1869,10 @@
|
|
|
1633
1869
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1634
1870
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1635
1871
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1872
|
+
},
|
|
1873
|
+
"org.primer.llm": {
|
|
1874
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1875
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1636
1876
|
}
|
|
1637
1877
|
},
|
|
1638
1878
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1645,6 +1885,7 @@
|
|
|
1645
1885
|
"key": "{bgColor.severe.muted}",
|
|
1646
1886
|
"$value": "#fff2d5",
|
|
1647
1887
|
"$type": "color",
|
|
1888
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1648
1889
|
"$extensions": {
|
|
1649
1890
|
"org.primer.figma": {
|
|
1650
1891
|
"collection": "mode",
|
|
@@ -1671,6 +1912,10 @@
|
|
|
1671
1912
|
"isSource": true,
|
|
1672
1913
|
"$type": "color"
|
|
1673
1914
|
}
|
|
1915
|
+
},
|
|
1916
|
+
"org.primer.llm": {
|
|
1917
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1918
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1674
1919
|
}
|
|
1675
1920
|
},
|
|
1676
1921
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1678,6 +1923,7 @@
|
|
|
1678
1923
|
"original": {
|
|
1679
1924
|
"$value": "{base.color.orange.0}",
|
|
1680
1925
|
"$type": "color",
|
|
1926
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1681
1927
|
"$extensions": {
|
|
1682
1928
|
"org.primer.figma": {
|
|
1683
1929
|
"collection": "mode",
|
|
@@ -1704,6 +1950,10 @@
|
|
|
1704
1950
|
"isSource": true,
|
|
1705
1951
|
"$type": "color"
|
|
1706
1952
|
}
|
|
1953
|
+
},
|
|
1954
|
+
"org.primer.llm": {
|
|
1955
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1956
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1707
1957
|
}
|
|
1708
1958
|
},
|
|
1709
1959
|
"key": "{bgColor.severe.muted}"
|
|
@@ -1716,6 +1966,7 @@
|
|
|
1716
1966
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1717
1967
|
"$value": "#971368",
|
|
1718
1968
|
"$type": "color",
|
|
1969
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1719
1970
|
"$extensions": {
|
|
1720
1971
|
"org.primer.figma": {
|
|
1721
1972
|
"collection": "mode",
|
|
@@ -1730,6 +1981,10 @@
|
|
|
1730
1981
|
"dark-dimmed-high-contrast": "#660847",
|
|
1731
1982
|
"dark-tritanopia-high-contrast": "#3e022b",
|
|
1732
1983
|
"dark-protanopia-deuteranopia-high-contrast": "#3e022b"
|
|
1984
|
+
},
|
|
1985
|
+
"org.primer.llm": {
|
|
1986
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
1987
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1733
1988
|
}
|
|
1734
1989
|
},
|
|
1735
1990
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1737,6 +1992,7 @@
|
|
|
1737
1992
|
"original": {
|
|
1738
1993
|
"$value": "{base.color.pink.5}",
|
|
1739
1994
|
"$type": "color",
|
|
1995
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1740
1996
|
"$extensions": {
|
|
1741
1997
|
"org.primer.figma": {
|
|
1742
1998
|
"collection": "mode",
|
|
@@ -1751,6 +2007,10 @@
|
|
|
1751
2007
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1752
2008
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1753
2009
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2010
|
+
},
|
|
2011
|
+
"org.primer.llm": {
|
|
2012
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2013
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1754
2014
|
}
|
|
1755
2015
|
},
|
|
1756
2016
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1763,6 +2023,7 @@
|
|
|
1763
2023
|
"key": "{bgColor.sponsors.muted}",
|
|
1764
2024
|
"$value": "#feeff7",
|
|
1765
2025
|
"$type": "color",
|
|
2026
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1766
2027
|
"$extensions": {
|
|
1767
2028
|
"org.primer.figma": {
|
|
1768
2029
|
"collection": "mode",
|
|
@@ -1787,6 +2048,10 @@
|
|
|
1787
2048
|
"isSource": true,
|
|
1788
2049
|
"$type": "color"
|
|
1789
2050
|
}
|
|
2051
|
+
},
|
|
2052
|
+
"org.primer.llm": {
|
|
2053
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2054
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1790
2055
|
}
|
|
1791
2056
|
},
|
|
1792
2057
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1794,6 +2059,7 @@
|
|
|
1794
2059
|
"original": {
|
|
1795
2060
|
"$value": "{base.color.pink.0}",
|
|
1796
2061
|
"$type": "color",
|
|
2062
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1797
2063
|
"$extensions": {
|
|
1798
2064
|
"org.primer.figma": {
|
|
1799
2065
|
"collection": "mode",
|
|
@@ -1818,6 +2084,10 @@
|
|
|
1818
2084
|
"isSource": true,
|
|
1819
2085
|
"$type": "color"
|
|
1820
2086
|
}
|
|
2087
|
+
},
|
|
2088
|
+
"org.primer.llm": {
|
|
2089
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2090
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1821
2091
|
}
|
|
1822
2092
|
},
|
|
1823
2093
|
"key": "{bgColor.sponsors.muted}"
|
|
@@ -1830,6 +2100,7 @@
|
|
|
1830
2100
|
"key": "{bgColor.success.emphasis}",
|
|
1831
2101
|
"$value": "#0349b4",
|
|
1832
2102
|
"$type": "color",
|
|
2103
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1833
2104
|
"$extensions": {
|
|
1834
2105
|
"org.primer.figma": {
|
|
1835
2106
|
"collection": "mode",
|
|
@@ -1852,6 +2123,10 @@
|
|
|
1852
2123
|
"light-high-contrast": "#055d20",
|
|
1853
2124
|
"dark-high-contrast": "#00230b",
|
|
1854
2125
|
"dark-dimmed-high-contrast": "#013d14"
|
|
2126
|
+
},
|
|
2127
|
+
"org.primer.llm": {
|
|
2128
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2129
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1855
2130
|
}
|
|
1856
2131
|
},
|
|
1857
2132
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1859,6 +2134,7 @@
|
|
|
1859
2134
|
"original": {
|
|
1860
2135
|
"$value": "{base.color.blue.5}",
|
|
1861
2136
|
"$type": "color",
|
|
2137
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1862
2138
|
"$extensions": {
|
|
1863
2139
|
"org.primer.figma": {
|
|
1864
2140
|
"collection": "mode",
|
|
@@ -1881,6 +2157,10 @@
|
|
|
1881
2157
|
"light-high-contrast": "{base.color.green.5}",
|
|
1882
2158
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1883
2159
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2160
|
+
},
|
|
2161
|
+
"org.primer.llm": {
|
|
2162
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2163
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1884
2164
|
}
|
|
1885
2165
|
},
|
|
1886
2166
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1893,6 +2173,7 @@
|
|
|
1893
2173
|
"key": "{bgColor.success.muted}",
|
|
1894
2174
|
"$value": "#dff7ff",
|
|
1895
2175
|
"$type": "color",
|
|
2176
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1896
2177
|
"$extensions": {
|
|
1897
2178
|
"org.primer.figma": {
|
|
1898
2179
|
"collection": "mode",
|
|
@@ -1942,6 +2223,10 @@
|
|
|
1942
2223
|
"isSource": true,
|
|
1943
2224
|
"$type": "color"
|
|
1944
2225
|
}
|
|
2226
|
+
},
|
|
2227
|
+
"org.primer.llm": {
|
|
2228
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2229
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1945
2230
|
}
|
|
1946
2231
|
},
|
|
1947
2232
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1949,6 +2234,7 @@
|
|
|
1949
2234
|
"original": {
|
|
1950
2235
|
"$value": "{base.color.blue.0}",
|
|
1951
2236
|
"$type": "color",
|
|
2237
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1952
2238
|
"$extensions": {
|
|
1953
2239
|
"org.primer.figma": {
|
|
1954
2240
|
"collection": "mode",
|
|
@@ -1998,6 +2284,10 @@
|
|
|
1998
2284
|
"isSource": true,
|
|
1999
2285
|
"$type": "color"
|
|
2000
2286
|
}
|
|
2287
|
+
},
|
|
2288
|
+
"org.primer.llm": {
|
|
2289
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2290
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2001
2291
|
}
|
|
2002
2292
|
},
|
|
2003
2293
|
"key": "{bgColor.success.muted}"
|
|
@@ -2010,6 +2300,7 @@
|
|
|
2010
2300
|
"key": "{bgColor.transparent}",
|
|
2011
2301
|
"$value": "#ffffff00",
|
|
2012
2302
|
"$type": "color",
|
|
2303
|
+
"$description": "Fully transparent background",
|
|
2013
2304
|
"$extensions": {
|
|
2014
2305
|
"org.primer.figma": {
|
|
2015
2306
|
"collection": "mode",
|
|
@@ -2018,6 +2309,10 @@
|
|
|
2018
2309
|
"codeSyntax": {
|
|
2019
2310
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2020
2311
|
}
|
|
2312
|
+
},
|
|
2313
|
+
"org.primer.llm": {
|
|
2314
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2315
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2021
2316
|
}
|
|
2022
2317
|
},
|
|
2023
2318
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2025,6 +2320,7 @@
|
|
|
2025
2320
|
"original": {
|
|
2026
2321
|
"$value": "{base.color.transparent}",
|
|
2027
2322
|
"$type": "color",
|
|
2323
|
+
"$description": "Fully transparent background",
|
|
2028
2324
|
"$extensions": {
|
|
2029
2325
|
"org.primer.figma": {
|
|
2030
2326
|
"collection": "mode",
|
|
@@ -2033,6 +2329,10 @@
|
|
|
2033
2329
|
"codeSyntax": {
|
|
2034
2330
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2035
2331
|
}
|
|
2332
|
+
},
|
|
2333
|
+
"org.primer.llm": {
|
|
2334
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2335
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2036
2336
|
}
|
|
2037
2337
|
},
|
|
2038
2338
|
"key": "{bgColor.transparent}"
|
|
@@ -2045,6 +2345,7 @@
|
|
|
2045
2345
|
"key": "{bgColor.upsell.emphasis}",
|
|
2046
2346
|
"$value": "#622cbc",
|
|
2047
2347
|
"$type": "color",
|
|
2348
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2048
2349
|
"$extensions": {
|
|
2049
2350
|
"org.primer.figma": {
|
|
2050
2351
|
"collection": "mode",
|
|
@@ -2053,6 +2354,10 @@
|
|
|
2053
2354
|
"codeSyntax": {
|
|
2054
2355
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2055
2356
|
}
|
|
2357
|
+
},
|
|
2358
|
+
"org.primer.llm": {
|
|
2359
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2360
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2056
2361
|
}
|
|
2057
2362
|
},
|
|
2058
2363
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2060,6 +2365,7 @@
|
|
|
2060
2365
|
"original": {
|
|
2061
2366
|
"$value": "{bgColor.done.emphasis}",
|
|
2062
2367
|
"$type": "color",
|
|
2368
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2063
2369
|
"$extensions": {
|
|
2064
2370
|
"org.primer.figma": {
|
|
2065
2371
|
"collection": "mode",
|
|
@@ -2068,6 +2374,10 @@
|
|
|
2068
2374
|
"codeSyntax": {
|
|
2069
2375
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2070
2376
|
}
|
|
2377
|
+
},
|
|
2378
|
+
"org.primer.llm": {
|
|
2379
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2380
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2071
2381
|
}
|
|
2072
2382
|
},
|
|
2073
2383
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2080,6 +2390,7 @@
|
|
|
2080
2390
|
"key": "{bgColor.upsell.muted}",
|
|
2081
2391
|
"$value": "#faf0fe",
|
|
2082
2392
|
"$type": "color",
|
|
2393
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2083
2394
|
"$extensions": {
|
|
2084
2395
|
"org.primer.figma": {
|
|
2085
2396
|
"collection": "mode",
|
|
@@ -2088,6 +2399,10 @@
|
|
|
2088
2399
|
"codeSyntax": {
|
|
2089
2400
|
"web": "var(--bgColor-upsell-muted)"
|
|
2090
2401
|
}
|
|
2402
|
+
},
|
|
2403
|
+
"org.primer.llm": {
|
|
2404
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2405
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2091
2406
|
}
|
|
2092
2407
|
},
|
|
2093
2408
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2095,6 +2410,7 @@
|
|
|
2095
2410
|
"original": {
|
|
2096
2411
|
"$value": "{bgColor.done.muted}",
|
|
2097
2412
|
"$type": "color",
|
|
2413
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2098
2414
|
"$extensions": {
|
|
2099
2415
|
"org.primer.figma": {
|
|
2100
2416
|
"collection": "mode",
|
|
@@ -2103,6 +2419,10 @@
|
|
|
2103
2419
|
"codeSyntax": {
|
|
2104
2420
|
"web": "var(--bgColor-upsell-muted)"
|
|
2105
2421
|
}
|
|
2422
|
+
},
|
|
2423
|
+
"org.primer.llm": {
|
|
2424
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2425
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2106
2426
|
}
|
|
2107
2427
|
},
|
|
2108
2428
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2115,6 +2435,7 @@
|
|
|
2115
2435
|
"key": "{bgColor.white}",
|
|
2116
2436
|
"$value": "#ffffff",
|
|
2117
2437
|
"$type": "color",
|
|
2438
|
+
"$description": "Pure white background",
|
|
2118
2439
|
"$extensions": {
|
|
2119
2440
|
"org.primer.figma": {
|
|
2120
2441
|
"collection": "mode",
|
|
@@ -2123,6 +2444,10 @@
|
|
|
2123
2444
|
},
|
|
2124
2445
|
"org.primer.overrides": {
|
|
2125
2446
|
"dark": "#010409"
|
|
2447
|
+
},
|
|
2448
|
+
"org.primer.llm": {
|
|
2449
|
+
"doNotUse": true,
|
|
2450
|
+
"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."
|
|
2126
2451
|
}
|
|
2127
2452
|
},
|
|
2128
2453
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2130,6 +2455,7 @@
|
|
|
2130
2455
|
"original": {
|
|
2131
2456
|
"$value": "{base.color.neutral.0}",
|
|
2132
2457
|
"$type": "color",
|
|
2458
|
+
"$description": "Pure white background",
|
|
2133
2459
|
"$extensions": {
|
|
2134
2460
|
"org.primer.figma": {
|
|
2135
2461
|
"collection": "mode",
|
|
@@ -2138,6 +2464,10 @@
|
|
|
2138
2464
|
},
|
|
2139
2465
|
"org.primer.overrides": {
|
|
2140
2466
|
"dark": "{base.color.neutral.13}"
|
|
2467
|
+
},
|
|
2468
|
+
"org.primer.llm": {
|
|
2469
|
+
"doNotUse": true,
|
|
2470
|
+
"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."
|
|
2141
2471
|
}
|
|
2142
2472
|
},
|
|
2143
2473
|
"key": "{bgColor.white}"
|
|
@@ -2148,7 +2478,7 @@
|
|
|
2148
2478
|
},
|
|
2149
2479
|
"border-accent-emphasis": {
|
|
2150
2480
|
"key": "{border.accent.emphasis}",
|
|
2151
|
-
"$value": "0.
|
|
2481
|
+
"$value": "0.0625rem,1px solid #0349b4",
|
|
2152
2482
|
"$type": "border",
|
|
2153
2483
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2154
2484
|
"isSource": true,
|
|
@@ -2167,7 +2497,7 @@
|
|
|
2167
2497
|
},
|
|
2168
2498
|
"border-accent-muted": {
|
|
2169
2499
|
"key": "{border.accent.muted}",
|
|
2170
|
-
"$value": "0.
|
|
2500
|
+
"$value": "0.0625rem,1px solid #368cf9",
|
|
2171
2501
|
"$type": "border",
|
|
2172
2502
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2173
2503
|
"isSource": true,
|
|
@@ -2186,7 +2516,7 @@
|
|
|
2186
2516
|
},
|
|
2187
2517
|
"border-attention-emphasis": {
|
|
2188
2518
|
"key": "{border.attention.emphasis}",
|
|
2189
|
-
"$value": "0.
|
|
2519
|
+
"$value": "0.0625rem,1px solid #744500",
|
|
2190
2520
|
"$type": "border",
|
|
2191
2521
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2192
2522
|
"isSource": true,
|
|
@@ -2205,7 +2535,7 @@
|
|
|
2205
2535
|
},
|
|
2206
2536
|
"border-attention-muted": {
|
|
2207
2537
|
"key": "{border.attention.muted}",
|
|
2208
|
-
"$value": "0.
|
|
2538
|
+
"$value": "0.0625rem,1px solid #b58407",
|
|
2209
2539
|
"$type": "border",
|
|
2210
2540
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2211
2541
|
"isSource": true,
|
|
@@ -2224,7 +2554,7 @@
|
|
|
2224
2554
|
},
|
|
2225
2555
|
"border-closed-emphasis": {
|
|
2226
2556
|
"key": "{border.closed.emphasis}",
|
|
2227
|
-
"$value": "0.
|
|
2557
|
+
"$value": "0.0625rem,1px solid #873800",
|
|
2228
2558
|
"$type": "border",
|
|
2229
2559
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2230
2560
|
"isSource": true,
|
|
@@ -2239,7 +2569,7 @@
|
|
|
2239
2569
|
},
|
|
2240
2570
|
"border-closed-muted": {
|
|
2241
2571
|
"key": "{border.closed.muted}",
|
|
2242
|
-
"$value": "0.
|
|
2572
|
+
"$value": "0.0625rem,1px solid #b45105",
|
|
2243
2573
|
"$type": "border",
|
|
2244
2574
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2245
2575
|
"isSource": true,
|
|
@@ -2254,7 +2584,7 @@
|
|
|
2254
2584
|
},
|
|
2255
2585
|
"border-danger-emphasis": {
|
|
2256
2586
|
"key": "{border.danger.emphasis}",
|
|
2257
|
-
"$value": "0.
|
|
2587
|
+
"$value": "0.0625rem,1px solid #873800",
|
|
2258
2588
|
"$type": "border",
|
|
2259
2589
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2260
2590
|
"isSource": true,
|
|
@@ -2273,7 +2603,7 @@
|
|
|
2273
2603
|
},
|
|
2274
2604
|
"border-danger-muted": {
|
|
2275
2605
|
"key": "{border.danger.muted}",
|
|
2276
|
-
"$value": "0.
|
|
2606
|
+
"$value": "0.0625rem,1px solid #b45105",
|
|
2277
2607
|
"$type": "border",
|
|
2278
2608
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2279
2609
|
"isSource": true,
|
|
@@ -2292,7 +2622,7 @@
|
|
|
2292
2622
|
},
|
|
2293
2623
|
"border-default": {
|
|
2294
2624
|
"key": "{border.default}",
|
|
2295
|
-
"$value": "0.
|
|
2625
|
+
"$value": "0.0625rem,1px solid #454c54",
|
|
2296
2626
|
"$type": "border",
|
|
2297
2627
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2298
2628
|
"isSource": true,
|
|
@@ -2311,7 +2641,7 @@
|
|
|
2311
2641
|
},
|
|
2312
2642
|
"border-disabled": {
|
|
2313
2643
|
"key": "{border.disabled}",
|
|
2314
|
-
"$value": "0.
|
|
2644
|
+
"$value": "0.0625rem,1px solid #59636e1f",
|
|
2315
2645
|
"$type": "border",
|
|
2316
2646
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2317
2647
|
"isSource": true,
|
|
@@ -2330,7 +2660,7 @@
|
|
|
2330
2660
|
},
|
|
2331
2661
|
"border-done-emphasis": {
|
|
2332
2662
|
"key": "{border.done.emphasis}",
|
|
2333
|
-
"$value": "0.
|
|
2663
|
+
"$value": "0.0625rem,1px solid #622cbc",
|
|
2334
2664
|
"$type": "border",
|
|
2335
2665
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2336
2666
|
"isSource": true,
|
|
@@ -2349,7 +2679,7 @@
|
|
|
2349
2679
|
},
|
|
2350
2680
|
"border-done-muted": {
|
|
2351
2681
|
"key": "{border.done.muted}",
|
|
2352
|
-
"$value": "0.
|
|
2682
|
+
"$value": "0.0625rem,1px solid #a371f7",
|
|
2353
2683
|
"$type": "border",
|
|
2354
2684
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2355
2685
|
"isSource": true,
|
|
@@ -2368,7 +2698,7 @@
|
|
|
2368
2698
|
},
|
|
2369
2699
|
"border-emphasis": {
|
|
2370
2700
|
"key": "{border.emphasis}",
|
|
2371
|
-
"$value": "0.
|
|
2701
|
+
"$value": "0.0625rem,1px solid #454c54",
|
|
2372
2702
|
"$type": "border",
|
|
2373
2703
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2374
2704
|
"isSource": true,
|
|
@@ -2387,7 +2717,7 @@
|
|
|
2387
2717
|
},
|
|
2388
2718
|
"border-muted": {
|
|
2389
2719
|
"key": "{border.muted}",
|
|
2390
|
-
"$value": "0.
|
|
2720
|
+
"$value": "0.0625rem,1px solid #454c54",
|
|
2391
2721
|
"$type": "border",
|
|
2392
2722
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2393
2723
|
"isSource": true,
|
|
@@ -2406,7 +2736,7 @@
|
|
|
2406
2736
|
},
|
|
2407
2737
|
"border-neutral-emphasis": {
|
|
2408
2738
|
"key": "{border.neutral.emphasis}",
|
|
2409
|
-
"$value": "0.
|
|
2739
|
+
"$value": "0.0625rem,1px solid #59636e",
|
|
2410
2740
|
"$type": "border",
|
|
2411
2741
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2412
2742
|
"isSource": true,
|
|
@@ -2425,7 +2755,7 @@
|
|
|
2425
2755
|
},
|
|
2426
2756
|
"border-neutral-muted": {
|
|
2427
2757
|
"key": "{border.neutral.muted}",
|
|
2428
|
-
"$value": "0.
|
|
2758
|
+
"$value": "0.0625rem,1px solid #454c54",
|
|
2429
2759
|
"$type": "border",
|
|
2430
2760
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2431
2761
|
"isSource": true,
|
|
@@ -2444,7 +2774,7 @@
|
|
|
2444
2774
|
},
|
|
2445
2775
|
"border-open-emphasis": {
|
|
2446
2776
|
"key": "{border.open.emphasis}",
|
|
2447
|
-
"$value": "0.
|
|
2777
|
+
"$value": "0.0625rem,1px solid #0349b4",
|
|
2448
2778
|
"$type": "border",
|
|
2449
2779
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2450
2780
|
"isSource": true,
|
|
@@ -2459,7 +2789,7 @@
|
|
|
2459
2789
|
},
|
|
2460
2790
|
"border-open-muted": {
|
|
2461
2791
|
"key": "{border.open.muted}",
|
|
2462
|
-
"$value": "0.
|
|
2792
|
+
"$value": "0.0625rem,1px solid #368cf9",
|
|
2463
2793
|
"$type": "border",
|
|
2464
2794
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2465
2795
|
"isSource": true,
|
|
@@ -2474,7 +2804,7 @@
|
|
|
2474
2804
|
},
|
|
2475
2805
|
"border-severe-emphasis": {
|
|
2476
2806
|
"key": "{border.severe.emphasis}",
|
|
2477
|
-
"$value": "0.
|
|
2807
|
+
"$value": "0.0625rem,1px solid #873800",
|
|
2478
2808
|
"$type": "border",
|
|
2479
2809
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2480
2810
|
"isSource": true,
|
|
@@ -2493,7 +2823,7 @@
|
|
|
2493
2823
|
},
|
|
2494
2824
|
"border-severe-muted": {
|
|
2495
2825
|
"key": "{border.severe.muted}",
|
|
2496
|
-
"$value": "0.
|
|
2826
|
+
"$value": "0.0625rem,1px solid #dc6d1a66",
|
|
2497
2827
|
"$type": "border",
|
|
2498
2828
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2499
2829
|
"isSource": true,
|
|
@@ -2512,7 +2842,7 @@
|
|
|
2512
2842
|
},
|
|
2513
2843
|
"border-sponsors-emphasis": {
|
|
2514
2844
|
"key": "{border.sponsors.emphasis}",
|
|
2515
|
-
"$value": "0.
|
|
2845
|
+
"$value": "0.0625rem,1px solid #971368",
|
|
2516
2846
|
"$type": "border",
|
|
2517
2847
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2518
2848
|
"isSource": true,
|
|
@@ -2531,7 +2861,7 @@
|
|
|
2531
2861
|
},
|
|
2532
2862
|
"border-sponsors-muted": {
|
|
2533
2863
|
"key": "{border.sponsors.muted}",
|
|
2534
|
-
"$value": "0.
|
|
2864
|
+
"$value": "0.0625rem,1px solid #ed4baf",
|
|
2535
2865
|
"$type": "border",
|
|
2536
2866
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2537
2867
|
"isSource": true,
|
|
@@ -2550,7 +2880,7 @@
|
|
|
2550
2880
|
},
|
|
2551
2881
|
"border-success-emphasis": {
|
|
2552
2882
|
"key": "{border.success.emphasis}",
|
|
2553
|
-
"$value": "0.
|
|
2883
|
+
"$value": "0.0625rem,1px solid #0349b4",
|
|
2554
2884
|
"$type": "border",
|
|
2555
2885
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2556
2886
|
"isSource": true,
|
|
@@ -2569,7 +2899,7 @@
|
|
|
2569
2899
|
},
|
|
2570
2900
|
"border-success-muted": {
|
|
2571
2901
|
"key": "{border.success.muted}",
|
|
2572
|
-
"$value": "0.
|
|
2902
|
+
"$value": "0.0625rem,1px solid #368cf9",
|
|
2573
2903
|
"$type": "border",
|
|
2574
2904
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2575
2905
|
"isSource": true,
|
|
@@ -2588,7 +2918,7 @@
|
|
|
2588
2918
|
},
|
|
2589
2919
|
"border-transparent": {
|
|
2590
2920
|
"key": "{border.transparent}",
|
|
2591
|
-
"$value": "0.
|
|
2921
|
+
"$value": "0.0625rem,1px solid #ffffff00",
|
|
2592
2922
|
"$type": "border",
|
|
2593
2923
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2594
2924
|
"isSource": true,
|
|
@@ -2607,7 +2937,7 @@
|
|
|
2607
2937
|
},
|
|
2608
2938
|
"border-upsell-emphasis": {
|
|
2609
2939
|
"key": "{border.upsell.emphasis}",
|
|
2610
|
-
"$value": "0.
|
|
2940
|
+
"$value": "0.0625rem,1px solid #622cbc",
|
|
2611
2941
|
"$type": "border",
|
|
2612
2942
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2613
2943
|
"isSource": true,
|
|
@@ -2626,7 +2956,7 @@
|
|
|
2626
2956
|
},
|
|
2627
2957
|
"border-upsell-muted": {
|
|
2628
2958
|
"key": "{border.upsell.muted}",
|
|
2629
|
-
"$value": "0.
|
|
2959
|
+
"$value": "0.0625rem,1px solid #a371f7",
|
|
2630
2960
|
"$type": "border",
|
|
2631
2961
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2632
2962
|
"isSource": true,
|
|
@@ -2647,6 +2977,7 @@
|
|
|
2647
2977
|
"key": "{borderColor.accent.emphasis}",
|
|
2648
2978
|
"$value": "#0349b4",
|
|
2649
2979
|
"$type": "color",
|
|
2980
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2650
2981
|
"$extensions": {
|
|
2651
2982
|
"org.primer.figma": {
|
|
2652
2983
|
"collection": "mode",
|
|
@@ -2658,6 +2989,10 @@
|
|
|
2658
2989
|
},
|
|
2659
2990
|
"org.primer.overrides": {
|
|
2660
2991
|
"dark-dimmed-high-contrast": "#67b3fd"
|
|
2992
|
+
},
|
|
2993
|
+
"org.primer.llm": {
|
|
2994
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
2995
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2661
2996
|
}
|
|
2662
2997
|
},
|
|
2663
2998
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2665,6 +3000,7 @@
|
|
|
2665
3000
|
"original": {
|
|
2666
3001
|
"$value": "{base.color.blue.5}",
|
|
2667
3002
|
"$type": "color",
|
|
3003
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2668
3004
|
"$extensions": {
|
|
2669
3005
|
"org.primer.figma": {
|
|
2670
3006
|
"collection": "mode",
|
|
@@ -2676,6 +3012,10 @@
|
|
|
2676
3012
|
},
|
|
2677
3013
|
"org.primer.overrides": {
|
|
2678
3014
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3015
|
+
},
|
|
3016
|
+
"org.primer.llm": {
|
|
3017
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3018
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2679
3019
|
}
|
|
2680
3020
|
},
|
|
2681
3021
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2688,6 +3028,7 @@
|
|
|
2688
3028
|
"key": "{borderColor.accent.muted}",
|
|
2689
3029
|
"$value": "#368cf9",
|
|
2690
3030
|
"$type": "color",
|
|
3031
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2691
3032
|
"$extensions": {
|
|
2692
3033
|
"org.primer.figma": {
|
|
2693
3034
|
"collection": "mode",
|
|
@@ -2748,6 +3089,10 @@
|
|
|
2748
3089
|
"isSource": true,
|
|
2749
3090
|
"$type": "color"
|
|
2750
3091
|
}
|
|
3092
|
+
},
|
|
3093
|
+
"org.primer.llm": {
|
|
3094
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3095
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2751
3096
|
}
|
|
2752
3097
|
},
|
|
2753
3098
|
"alpha": 1,
|
|
@@ -2756,6 +3101,7 @@
|
|
|
2756
3101
|
"original": {
|
|
2757
3102
|
"$value": "{base.color.blue.3}",
|
|
2758
3103
|
"$type": "color",
|
|
3104
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2759
3105
|
"$extensions": {
|
|
2760
3106
|
"org.primer.figma": {
|
|
2761
3107
|
"collection": "mode",
|
|
@@ -2816,6 +3162,10 @@
|
|
|
2816
3162
|
"isSource": true,
|
|
2817
3163
|
"$type": "color"
|
|
2818
3164
|
}
|
|
3165
|
+
},
|
|
3166
|
+
"org.primer.llm": {
|
|
3167
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3168
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2819
3169
|
}
|
|
2820
3170
|
},
|
|
2821
3171
|
"alpha": 1,
|
|
@@ -2829,6 +3179,7 @@
|
|
|
2829
3179
|
"key": "{borderColor.attention.emphasis}",
|
|
2830
3180
|
"$value": "#744500",
|
|
2831
3181
|
"$type": "color",
|
|
3182
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2832
3183
|
"$extensions": {
|
|
2833
3184
|
"org.primer.figma": {
|
|
2834
3185
|
"collection": "mode",
|
|
@@ -2840,6 +3191,10 @@
|
|
|
2840
3191
|
},
|
|
2841
3192
|
"org.primer.overrides": {
|
|
2842
3193
|
"dark-dimmed-high-contrast": "#d5a824"
|
|
3194
|
+
},
|
|
3195
|
+
"org.primer.llm": {
|
|
3196
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3197
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2843
3198
|
}
|
|
2844
3199
|
},
|
|
2845
3200
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2847,6 +3202,7 @@
|
|
|
2847
3202
|
"original": {
|
|
2848
3203
|
"$value": "{base.color.yellow.5}",
|
|
2849
3204
|
"$type": "color",
|
|
3205
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2850
3206
|
"$extensions": {
|
|
2851
3207
|
"org.primer.figma": {
|
|
2852
3208
|
"collection": "mode",
|
|
@@ -2858,6 +3214,10 @@
|
|
|
2858
3214
|
},
|
|
2859
3215
|
"org.primer.overrides": {
|
|
2860
3216
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3217
|
+
},
|
|
3218
|
+
"org.primer.llm": {
|
|
3219
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3220
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2861
3221
|
}
|
|
2862
3222
|
},
|
|
2863
3223
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2870,6 +3230,7 @@
|
|
|
2870
3230
|
"key": "{borderColor.attention.muted}",
|
|
2871
3231
|
"$value": "#b58407",
|
|
2872
3232
|
"$type": "color",
|
|
3233
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2873
3234
|
"$extensions": {
|
|
2874
3235
|
"org.primer.figma": {
|
|
2875
3236
|
"collection": "mode",
|
|
@@ -2930,6 +3291,10 @@
|
|
|
2930
3291
|
"isSource": true,
|
|
2931
3292
|
"$type": "color"
|
|
2932
3293
|
}
|
|
3294
|
+
},
|
|
3295
|
+
"org.primer.llm": {
|
|
3296
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3297
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2933
3298
|
}
|
|
2934
3299
|
},
|
|
2935
3300
|
"alpha": 1,
|
|
@@ -2938,6 +3303,7 @@
|
|
|
2938
3303
|
"original": {
|
|
2939
3304
|
"$value": "{base.color.yellow.3}",
|
|
2940
3305
|
"$type": "color",
|
|
3306
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2941
3307
|
"$extensions": {
|
|
2942
3308
|
"org.primer.figma": {
|
|
2943
3309
|
"collection": "mode",
|
|
@@ -2998,6 +3364,10 @@
|
|
|
2998
3364
|
"isSource": true,
|
|
2999
3365
|
"$type": "color"
|
|
3000
3366
|
}
|
|
3367
|
+
},
|
|
3368
|
+
"org.primer.llm": {
|
|
3369
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3370
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3001
3371
|
}
|
|
3002
3372
|
},
|
|
3003
3373
|
"alpha": 1,
|
|
@@ -3011,6 +3381,7 @@
|
|
|
3011
3381
|
"key": "{borderColor.closed.emphasis}",
|
|
3012
3382
|
"$value": "#454c54",
|
|
3013
3383
|
"$type": "color",
|
|
3384
|
+
"$description": "Strong border for closed state badges",
|
|
3014
3385
|
"$extensions": {
|
|
3015
3386
|
"org.primer.figma": {
|
|
3016
3387
|
"collection": "mode",
|
|
@@ -3029,6 +3400,10 @@
|
|
|
3029
3400
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
3030
3401
|
"light-tritanopia": "#454c54",
|
|
3031
3402
|
"light-tritanopia-high-contrast": "#454c54"
|
|
3403
|
+
},
|
|
3404
|
+
"org.primer.llm": {
|
|
3405
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3406
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3032
3407
|
}
|
|
3033
3408
|
},
|
|
3034
3409
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3036,6 +3411,7 @@
|
|
|
3036
3411
|
"original": {
|
|
3037
3412
|
"$value": "{borderColor.emphasis}",
|
|
3038
3413
|
"$type": "color",
|
|
3414
|
+
"$description": "Strong border for closed state badges",
|
|
3039
3415
|
"$extensions": {
|
|
3040
3416
|
"org.primer.figma": {
|
|
3041
3417
|
"collection": "mode",
|
|
@@ -3054,6 +3430,10 @@
|
|
|
3054
3430
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3055
3431
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3056
3432
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3433
|
+
},
|
|
3434
|
+
"org.primer.llm": {
|
|
3435
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3436
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3057
3437
|
}
|
|
3058
3438
|
},
|
|
3059
3439
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3066,6 +3446,7 @@
|
|
|
3066
3446
|
"key": "{borderColor.closed.muted}",
|
|
3067
3447
|
"$value": "#454c54",
|
|
3068
3448
|
"$type": "color",
|
|
3449
|
+
"$description": "Subtle border for closed state indicators",
|
|
3069
3450
|
"$extensions": {
|
|
3070
3451
|
"org.primer.figma": {
|
|
3071
3452
|
"collection": "mode",
|
|
@@ -3132,6 +3513,10 @@
|
|
|
3132
3513
|
"isSource": true,
|
|
3133
3514
|
"$type": "color"
|
|
3134
3515
|
}
|
|
3516
|
+
},
|
|
3517
|
+
"org.primer.llm": {
|
|
3518
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3519
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3135
3520
|
}
|
|
3136
3521
|
},
|
|
3137
3522
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3140,6 +3525,7 @@
|
|
|
3140
3525
|
"original": {
|
|
3141
3526
|
"$value": "{borderColor.default}",
|
|
3142
3527
|
"$type": "color",
|
|
3528
|
+
"$description": "Subtle border for closed state indicators",
|
|
3143
3529
|
"$extensions": {
|
|
3144
3530
|
"org.primer.figma": {
|
|
3145
3531
|
"collection": "mode",
|
|
@@ -3206,6 +3592,10 @@
|
|
|
3206
3592
|
"isSource": true,
|
|
3207
3593
|
"$type": "color"
|
|
3208
3594
|
}
|
|
3595
|
+
},
|
|
3596
|
+
"org.primer.llm": {
|
|
3597
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3598
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3209
3599
|
}
|
|
3210
3600
|
},
|
|
3211
3601
|
"alpha": 1,
|
|
@@ -3219,6 +3609,7 @@
|
|
|
3219
3609
|
"key": "{borderColor.danger.emphasis}",
|
|
3220
3610
|
"$value": "#873800",
|
|
3221
3611
|
"$type": "color",
|
|
3612
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3222
3613
|
"$extensions": {
|
|
3223
3614
|
"org.primer.figma": {
|
|
3224
3615
|
"collection": "mode",
|
|
@@ -3254,6 +3645,10 @@
|
|
|
3254
3645
|
"$type": "color"
|
|
3255
3646
|
},
|
|
3256
3647
|
"dark-dimmed-high-contrast": "#ff8e8a"
|
|
3648
|
+
},
|
|
3649
|
+
"org.primer.llm": {
|
|
3650
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3651
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3257
3652
|
}
|
|
3258
3653
|
},
|
|
3259
3654
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3261,6 +3656,7 @@
|
|
|
3261
3656
|
"original": {
|
|
3262
3657
|
"$value": "{base.color.orange.5}",
|
|
3263
3658
|
"$type": "color",
|
|
3659
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3264
3660
|
"$extensions": {
|
|
3265
3661
|
"org.primer.figma": {
|
|
3266
3662
|
"collection": "mode",
|
|
@@ -3296,6 +3692,10 @@
|
|
|
3296
3692
|
"$type": "color"
|
|
3297
3693
|
},
|
|
3298
3694
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3695
|
+
},
|
|
3696
|
+
"org.primer.llm": {
|
|
3697
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3698
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3299
3699
|
}
|
|
3300
3700
|
},
|
|
3301
3701
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3308,6 +3708,7 @@
|
|
|
3308
3708
|
"key": "{borderColor.danger.muted}",
|
|
3309
3709
|
"$value": "#b45105",
|
|
3310
3710
|
"$type": "color",
|
|
3711
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3311
3712
|
"$extensions": {
|
|
3312
3713
|
"org.primer.figma": {
|
|
3313
3714
|
"collection": "mode",
|
|
@@ -3381,6 +3782,10 @@
|
|
|
3381
3782
|
"isSource": true,
|
|
3382
3783
|
"$type": "color"
|
|
3383
3784
|
}
|
|
3785
|
+
},
|
|
3786
|
+
"org.primer.llm": {
|
|
3787
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3788
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3384
3789
|
}
|
|
3385
3790
|
},
|
|
3386
3791
|
"alpha": 1,
|
|
@@ -3389,6 +3794,7 @@
|
|
|
3389
3794
|
"original": {
|
|
3390
3795
|
"$value": "{base.color.orange.4}",
|
|
3391
3796
|
"$type": "color",
|
|
3797
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3392
3798
|
"$extensions": {
|
|
3393
3799
|
"org.primer.figma": {
|
|
3394
3800
|
"collection": "mode",
|
|
@@ -3462,6 +3868,10 @@
|
|
|
3462
3868
|
"isSource": true,
|
|
3463
3869
|
"$type": "color"
|
|
3464
3870
|
}
|
|
3871
|
+
},
|
|
3872
|
+
"org.primer.llm": {
|
|
3873
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3874
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3465
3875
|
}
|
|
3466
3876
|
},
|
|
3467
3877
|
"alpha": 1,
|
|
@@ -3475,6 +3885,7 @@
|
|
|
3475
3885
|
"key": "{borderColor.default}",
|
|
3476
3886
|
"$value": "#454c54",
|
|
3477
3887
|
"$type": "color",
|
|
3888
|
+
"$description": "Default border color for most UI elements",
|
|
3478
3889
|
"$extensions": {
|
|
3479
3890
|
"org.primer.overrides": {
|
|
3480
3891
|
"dark": "#c8d1da",
|
|
@@ -3494,6 +3905,10 @@
|
|
|
3494
3905
|
"codeSyntax": {
|
|
3495
3906
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3496
3907
|
}
|
|
3908
|
+
},
|
|
3909
|
+
"org.primer.llm": {
|
|
3910
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3911
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3497
3912
|
}
|
|
3498
3913
|
},
|
|
3499
3914
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3501,6 +3916,7 @@
|
|
|
3501
3916
|
"original": {
|
|
3502
3917
|
"$value": "{base.color.neutral.10}",
|
|
3503
3918
|
"$type": "color",
|
|
3919
|
+
"$description": "Default border color for most UI elements",
|
|
3504
3920
|
"$extensions": {
|
|
3505
3921
|
"org.primer.overrides": {
|
|
3506
3922
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3520,6 +3936,10 @@
|
|
|
3520
3936
|
"codeSyntax": {
|
|
3521
3937
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3522
3938
|
}
|
|
3939
|
+
},
|
|
3940
|
+
"org.primer.llm": {
|
|
3941
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3942
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3523
3943
|
}
|
|
3524
3944
|
},
|
|
3525
3945
|
"key": "{borderColor.default}"
|
|
@@ -3532,6 +3952,7 @@
|
|
|
3532
3952
|
"key": "{borderColor.disabled}",
|
|
3533
3953
|
"$value": "#59636e1f",
|
|
3534
3954
|
"$type": "color",
|
|
3955
|
+
"$description": "Border color for disabled interactive elements",
|
|
3535
3956
|
"$extensions": {
|
|
3536
3957
|
"org.primer.figma": {
|
|
3537
3958
|
"collection": "mode",
|
|
@@ -3574,6 +3995,10 @@
|
|
|
3574
3995
|
"isSource": true,
|
|
3575
3996
|
"$type": "color"
|
|
3576
3997
|
}
|
|
3998
|
+
},
|
|
3999
|
+
"org.primer.llm": {
|
|
4000
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4001
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3577
4002
|
}
|
|
3578
4003
|
},
|
|
3579
4004
|
"alpha": 0.12,
|
|
@@ -3582,6 +4007,7 @@
|
|
|
3582
4007
|
"original": {
|
|
3583
4008
|
"$value": "{base.color.neutral.9}",
|
|
3584
4009
|
"$type": "color",
|
|
4010
|
+
"$description": "Border color for disabled interactive elements",
|
|
3585
4011
|
"$extensions": {
|
|
3586
4012
|
"org.primer.figma": {
|
|
3587
4013
|
"collection": "mode",
|
|
@@ -3624,6 +4050,10 @@
|
|
|
3624
4050
|
"isSource": true,
|
|
3625
4051
|
"$type": "color"
|
|
3626
4052
|
}
|
|
4053
|
+
},
|
|
4054
|
+
"org.primer.llm": {
|
|
4055
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4056
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3627
4057
|
}
|
|
3628
4058
|
},
|
|
3629
4059
|
"alpha": 0.12,
|
|
@@ -3637,6 +4067,7 @@
|
|
|
3637
4067
|
"key": "{borderColor.done.emphasis}",
|
|
3638
4068
|
"$value": "#622cbc",
|
|
3639
4069
|
"$type": "color",
|
|
4070
|
+
"$description": "Strong border for completed/done state badges",
|
|
3640
4071
|
"$extensions": {
|
|
3641
4072
|
"org.primer.figma": {
|
|
3642
4073
|
"collection": "mode",
|
|
@@ -3648,6 +4079,10 @@
|
|
|
3648
4079
|
},
|
|
3649
4080
|
"org.primer.overrides": {
|
|
3650
4081
|
"dark-dimmed-high-contrast": "#c49bff"
|
|
4082
|
+
},
|
|
4083
|
+
"org.primer.llm": {
|
|
4084
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4085
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3651
4086
|
}
|
|
3652
4087
|
},
|
|
3653
4088
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3655,6 +4090,7 @@
|
|
|
3655
4090
|
"original": {
|
|
3656
4091
|
"$value": "{base.color.purple.5}",
|
|
3657
4092
|
"$type": "color",
|
|
4093
|
+
"$description": "Strong border for completed/done state badges",
|
|
3658
4094
|
"$extensions": {
|
|
3659
4095
|
"org.primer.figma": {
|
|
3660
4096
|
"collection": "mode",
|
|
@@ -3666,6 +4102,10 @@
|
|
|
3666
4102
|
},
|
|
3667
4103
|
"org.primer.overrides": {
|
|
3668
4104
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4105
|
+
},
|
|
4106
|
+
"org.primer.llm": {
|
|
4107
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4108
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3669
4109
|
}
|
|
3670
4110
|
},
|
|
3671
4111
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3678,6 +4118,7 @@
|
|
|
3678
4118
|
"key": "{borderColor.done.muted}",
|
|
3679
4119
|
"$value": "#a371f7",
|
|
3680
4120
|
"$type": "color",
|
|
4121
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3681
4122
|
"$extensions": {
|
|
3682
4123
|
"org.primer.figma": {
|
|
3683
4124
|
"collection": "mode",
|
|
@@ -3738,6 +4179,10 @@
|
|
|
3738
4179
|
"isSource": true,
|
|
3739
4180
|
"$type": "color"
|
|
3740
4181
|
}
|
|
4182
|
+
},
|
|
4183
|
+
"org.primer.llm": {
|
|
4184
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4185
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3741
4186
|
}
|
|
3742
4187
|
},
|
|
3743
4188
|
"alpha": 1,
|
|
@@ -3746,6 +4191,7 @@
|
|
|
3746
4191
|
"original": {
|
|
3747
4192
|
"$value": "{base.color.purple.3}",
|
|
3748
4193
|
"$type": "color",
|
|
4194
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3749
4195
|
"$extensions": {
|
|
3750
4196
|
"org.primer.figma": {
|
|
3751
4197
|
"collection": "mode",
|
|
@@ -3806,6 +4252,10 @@
|
|
|
3806
4252
|
"isSource": true,
|
|
3807
4253
|
"$type": "color"
|
|
3808
4254
|
}
|
|
4255
|
+
},
|
|
4256
|
+
"org.primer.llm": {
|
|
4257
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4258
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3809
4259
|
}
|
|
3810
4260
|
},
|
|
3811
4261
|
"alpha": 1,
|
|
@@ -3819,6 +4269,7 @@
|
|
|
3819
4269
|
"key": "{borderColor.draft.emphasis}",
|
|
3820
4270
|
"$value": "#59636e",
|
|
3821
4271
|
"$type": "color",
|
|
4272
|
+
"$description": "Strong border for draft state badges",
|
|
3822
4273
|
"$extensions": {
|
|
3823
4274
|
"org.primer.figma": {
|
|
3824
4275
|
"collection": "mode",
|
|
@@ -3827,6 +4278,10 @@
|
|
|
3827
4278
|
"codeSyntax": {
|
|
3828
4279
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3829
4280
|
}
|
|
4281
|
+
},
|
|
4282
|
+
"org.primer.llm": {
|
|
4283
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4284
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3830
4285
|
}
|
|
3831
4286
|
},
|
|
3832
4287
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3834,6 +4289,7 @@
|
|
|
3834
4289
|
"original": {
|
|
3835
4290
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3836
4291
|
"$type": "color",
|
|
4292
|
+
"$description": "Strong border for draft state badges",
|
|
3837
4293
|
"$extensions": {
|
|
3838
4294
|
"org.primer.figma": {
|
|
3839
4295
|
"collection": "mode",
|
|
@@ -3842,6 +4298,10 @@
|
|
|
3842
4298
|
"codeSyntax": {
|
|
3843
4299
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3844
4300
|
}
|
|
4301
|
+
},
|
|
4302
|
+
"org.primer.llm": {
|
|
4303
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4304
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3845
4305
|
}
|
|
3846
4306
|
},
|
|
3847
4307
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3854,6 +4314,7 @@
|
|
|
3854
4314
|
"key": "{borderColor.draft.muted}",
|
|
3855
4315
|
"$value": "#454c54",
|
|
3856
4316
|
"$type": "color",
|
|
4317
|
+
"$description": "Subtle border for draft state indicators",
|
|
3857
4318
|
"$extensions": {
|
|
3858
4319
|
"org.primer.figma": {
|
|
3859
4320
|
"collection": "mode",
|
|
@@ -3920,6 +4381,10 @@
|
|
|
3920
4381
|
"isSource": true,
|
|
3921
4382
|
"$type": "color"
|
|
3922
4383
|
}
|
|
4384
|
+
},
|
|
4385
|
+
"org.primer.llm": {
|
|
4386
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4387
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3923
4388
|
}
|
|
3924
4389
|
},
|
|
3925
4390
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3928,6 +4393,7 @@
|
|
|
3928
4393
|
"original": {
|
|
3929
4394
|
"$value": "{borderColor.default}",
|
|
3930
4395
|
"$type": "color",
|
|
4396
|
+
"$description": "Subtle border for draft state indicators",
|
|
3931
4397
|
"$extensions": {
|
|
3932
4398
|
"org.primer.figma": {
|
|
3933
4399
|
"collection": "mode",
|
|
@@ -3994,6 +4460,10 @@
|
|
|
3994
4460
|
"isSource": true,
|
|
3995
4461
|
"$type": "color"
|
|
3996
4462
|
}
|
|
4463
|
+
},
|
|
4464
|
+
"org.primer.llm": {
|
|
4465
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4466
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3997
4467
|
}
|
|
3998
4468
|
},
|
|
3999
4469
|
"alpha": 1,
|
|
@@ -4007,6 +4477,7 @@
|
|
|
4007
4477
|
"key": "{borderColor.emphasis}",
|
|
4008
4478
|
"$value": "#454c54",
|
|
4009
4479
|
"$type": "color",
|
|
4480
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4010
4481
|
"$extensions": {
|
|
4011
4482
|
"org.primer.figma": {
|
|
4012
4483
|
"collection": "mode",
|
|
@@ -4021,6 +4492,10 @@
|
|
|
4021
4492
|
"dark-dimmed-high-contrast": "#454c54",
|
|
4022
4493
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
4023
4494
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
4495
|
+
},
|
|
4496
|
+
"org.primer.llm": {
|
|
4497
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4498
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4024
4499
|
}
|
|
4025
4500
|
},
|
|
4026
4501
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4028,6 +4503,7 @@
|
|
|
4028
4503
|
"original": {
|
|
4029
4504
|
"$value": "{borderColor.default}",
|
|
4030
4505
|
"$type": "color",
|
|
4506
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4031
4507
|
"$extensions": {
|
|
4032
4508
|
"org.primer.figma": {
|
|
4033
4509
|
"collection": "mode",
|
|
@@ -4042,6 +4518,10 @@
|
|
|
4042
4518
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4043
4519
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4044
4520
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4521
|
+
},
|
|
4522
|
+
"org.primer.llm": {
|
|
4523
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4524
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4045
4525
|
}
|
|
4046
4526
|
},
|
|
4047
4527
|
"key": "{borderColor.emphasis}"
|
|
@@ -4054,6 +4534,7 @@
|
|
|
4054
4534
|
"key": "{borderColor.muted}",
|
|
4055
4535
|
"$value": "#454c54",
|
|
4056
4536
|
"$type": "color",
|
|
4537
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4057
4538
|
"$extensions": {
|
|
4058
4539
|
"org.primer.figma": {
|
|
4059
4540
|
"collection": "mode",
|
|
@@ -4120,6 +4601,10 @@
|
|
|
4120
4601
|
"isSource": true,
|
|
4121
4602
|
"$type": "color"
|
|
4122
4603
|
}
|
|
4604
|
+
},
|
|
4605
|
+
"org.primer.llm": {
|
|
4606
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4607
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4123
4608
|
}
|
|
4124
4609
|
},
|
|
4125
4610
|
"alpha": 1,
|
|
@@ -4128,6 +4613,7 @@
|
|
|
4128
4613
|
"original": {
|
|
4129
4614
|
"$value": "{borderColor.default}",
|
|
4130
4615
|
"$type": "color",
|
|
4616
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4131
4617
|
"$extensions": {
|
|
4132
4618
|
"org.primer.figma": {
|
|
4133
4619
|
"collection": "mode",
|
|
@@ -4194,6 +4680,10 @@
|
|
|
4194
4680
|
"isSource": true,
|
|
4195
4681
|
"$type": "color"
|
|
4196
4682
|
}
|
|
4683
|
+
},
|
|
4684
|
+
"org.primer.llm": {
|
|
4685
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4686
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4197
4687
|
}
|
|
4198
4688
|
},
|
|
4199
4689
|
"alpha": 1,
|
|
@@ -4207,6 +4697,7 @@
|
|
|
4207
4697
|
"key": "{borderColor.neutral.emphasis}",
|
|
4208
4698
|
"$value": "#59636e",
|
|
4209
4699
|
"$type": "color",
|
|
4700
|
+
"$description": "Strong neutral semantic border",
|
|
4210
4701
|
"$extensions": {
|
|
4211
4702
|
"org.primer.figma": {
|
|
4212
4703
|
"collection": "mode",
|
|
@@ -4215,6 +4706,10 @@
|
|
|
4215
4706
|
},
|
|
4216
4707
|
"org.primer.overrides": {
|
|
4217
4708
|
"dark": "#454c54"
|
|
4709
|
+
},
|
|
4710
|
+
"org.primer.llm": {
|
|
4711
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4712
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4218
4713
|
}
|
|
4219
4714
|
},
|
|
4220
4715
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4222,6 +4717,7 @@
|
|
|
4222
4717
|
"original": {
|
|
4223
4718
|
"$value": "{base.color.neutral.9}",
|
|
4224
4719
|
"$type": "color",
|
|
4720
|
+
"$description": "Strong neutral semantic border",
|
|
4225
4721
|
"$extensions": {
|
|
4226
4722
|
"org.primer.figma": {
|
|
4227
4723
|
"collection": "mode",
|
|
@@ -4230,6 +4726,10 @@
|
|
|
4230
4726
|
},
|
|
4231
4727
|
"org.primer.overrides": {
|
|
4232
4728
|
"dark": "{borderColor.emphasis}"
|
|
4729
|
+
},
|
|
4730
|
+
"org.primer.llm": {
|
|
4731
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4732
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4233
4733
|
}
|
|
4234
4734
|
},
|
|
4235
4735
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4242,6 +4742,7 @@
|
|
|
4242
4742
|
"key": "{borderColor.neutral.muted}",
|
|
4243
4743
|
"$value": "#454c54",
|
|
4244
4744
|
"$type": "color",
|
|
4745
|
+
"$description": "Subtle neutral semantic border",
|
|
4245
4746
|
"$extensions": {
|
|
4246
4747
|
"org.primer.figma": {
|
|
4247
4748
|
"collection": "mode",
|
|
@@ -4263,6 +4764,10 @@
|
|
|
4263
4764
|
"isSource": true,
|
|
4264
4765
|
"$type": "color"
|
|
4265
4766
|
}
|
|
4767
|
+
},
|
|
4768
|
+
"org.primer.llm": {
|
|
4769
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4770
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4266
4771
|
}
|
|
4267
4772
|
},
|
|
4268
4773
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4270,6 +4775,7 @@
|
|
|
4270
4775
|
"original": {
|
|
4271
4776
|
"$value": "{borderColor.muted}",
|
|
4272
4777
|
"$type": "color",
|
|
4778
|
+
"$description": "Subtle neutral semantic border",
|
|
4273
4779
|
"$extensions": {
|
|
4274
4780
|
"org.primer.figma": {
|
|
4275
4781
|
"collection": "mode",
|
|
@@ -4291,6 +4797,10 @@
|
|
|
4291
4797
|
"isSource": true,
|
|
4292
4798
|
"$type": "color"
|
|
4293
4799
|
}
|
|
4800
|
+
},
|
|
4801
|
+
"org.primer.llm": {
|
|
4802
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4803
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4294
4804
|
}
|
|
4295
4805
|
},
|
|
4296
4806
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4303,6 +4813,7 @@
|
|
|
4303
4813
|
"key": "{borderColor.open.emphasis}",
|
|
4304
4814
|
"$value": "#873800",
|
|
4305
4815
|
"$type": "color",
|
|
4816
|
+
"$description": "Strong border for open state badges",
|
|
4306
4817
|
"$extensions": {
|
|
4307
4818
|
"org.primer.figma": {
|
|
4308
4819
|
"collection": "mode",
|
|
@@ -4321,6 +4832,10 @@
|
|
|
4321
4832
|
"dark-protanopia-deuteranopia-high-contrast": "#873800",
|
|
4322
4833
|
"light-protanopia-deuteranopia": "#873800",
|
|
4323
4834
|
"light-protanopia-deuteranopia-high-contrast": "#873800"
|
|
4835
|
+
},
|
|
4836
|
+
"org.primer.llm": {
|
|
4837
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4838
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4324
4839
|
}
|
|
4325
4840
|
},
|
|
4326
4841
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4328,6 +4843,7 @@
|
|
|
4328
4843
|
"original": {
|
|
4329
4844
|
"$value": "{base.color.orange.5}",
|
|
4330
4845
|
"$type": "color",
|
|
4846
|
+
"$description": "Strong border for open state badges",
|
|
4331
4847
|
"$extensions": {
|
|
4332
4848
|
"org.primer.figma": {
|
|
4333
4849
|
"collection": "mode",
|
|
@@ -4346,6 +4862,10 @@
|
|
|
4346
4862
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4347
4863
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4348
4864
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4865
|
+
},
|
|
4866
|
+
"org.primer.llm": {
|
|
4867
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4868
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4349
4869
|
}
|
|
4350
4870
|
},
|
|
4351
4871
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4358,6 +4878,7 @@
|
|
|
4358
4878
|
"key": "{borderColor.open.muted}",
|
|
4359
4879
|
"$value": "#dc6d1a",
|
|
4360
4880
|
"$type": "color",
|
|
4881
|
+
"$description": "Subtle border for open state indicators",
|
|
4361
4882
|
"$extensions": {
|
|
4362
4883
|
"org.primer.figma": {
|
|
4363
4884
|
"collection": "mode",
|
|
@@ -4424,6 +4945,10 @@
|
|
|
4424
4945
|
"isSource": true,
|
|
4425
4946
|
"$type": "color"
|
|
4426
4947
|
}
|
|
4948
|
+
},
|
|
4949
|
+
"org.primer.llm": {
|
|
4950
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4951
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4427
4952
|
}
|
|
4428
4953
|
},
|
|
4429
4954
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4432,6 +4957,7 @@
|
|
|
4432
4957
|
"original": {
|
|
4433
4958
|
"$value": "{base.color.orange.3}",
|
|
4434
4959
|
"$type": "color",
|
|
4960
|
+
"$description": "Subtle border for open state indicators",
|
|
4435
4961
|
"$extensions": {
|
|
4436
4962
|
"org.primer.figma": {
|
|
4437
4963
|
"collection": "mode",
|
|
@@ -4498,6 +5024,10 @@
|
|
|
4498
5024
|
"isSource": true,
|
|
4499
5025
|
"$type": "color"
|
|
4500
5026
|
}
|
|
5027
|
+
},
|
|
5028
|
+
"org.primer.llm": {
|
|
5029
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5030
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4501
5031
|
}
|
|
4502
5032
|
},
|
|
4503
5033
|
"alpha": 1,
|
|
@@ -4511,6 +5041,7 @@
|
|
|
4511
5041
|
"key": "{borderColor.severe.emphasis}",
|
|
4512
5042
|
"$value": "#873800",
|
|
4513
5043
|
"$type": "color",
|
|
5044
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4514
5045
|
"$extensions": {
|
|
4515
5046
|
"org.primer.figma": {
|
|
4516
5047
|
"collection": "mode",
|
|
@@ -4525,6 +5056,10 @@
|
|
|
4525
5056
|
"light-tritanopia": "#a0111f",
|
|
4526
5057
|
"light-tritanopia-high-contrast": "#a0111f",
|
|
4527
5058
|
"dark-dimmed-high-contrast": "#f99636"
|
|
5059
|
+
},
|
|
5060
|
+
"org.primer.llm": {
|
|
5061
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5062
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4528
5063
|
}
|
|
4529
5064
|
},
|
|
4530
5065
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4532,6 +5067,7 @@
|
|
|
4532
5067
|
"original": {
|
|
4533
5068
|
"$value": "{base.color.orange.5}",
|
|
4534
5069
|
"$type": "color",
|
|
5070
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4535
5071
|
"$extensions": {
|
|
4536
5072
|
"org.primer.figma": {
|
|
4537
5073
|
"collection": "mode",
|
|
@@ -4546,6 +5082,10 @@
|
|
|
4546
5082
|
"light-tritanopia": "{base.color.red.5}",
|
|
4547
5083
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4548
5084
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5085
|
+
},
|
|
5086
|
+
"org.primer.llm": {
|
|
5087
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5088
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4549
5089
|
}
|
|
4550
5090
|
},
|
|
4551
5091
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4558,6 +5098,7 @@
|
|
|
4558
5098
|
"key": "{borderColor.severe.muted}",
|
|
4559
5099
|
"$value": "#dc6d1a66",
|
|
4560
5100
|
"$type": "color",
|
|
5101
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4561
5102
|
"$extensions": {
|
|
4562
5103
|
"org.primer.figma": {
|
|
4563
5104
|
"collection": "mode",
|
|
@@ -4613,6 +5154,10 @@
|
|
|
4613
5154
|
"isSource": true,
|
|
4614
5155
|
"$type": "color"
|
|
4615
5156
|
}
|
|
5157
|
+
},
|
|
5158
|
+
"org.primer.llm": {
|
|
5159
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5160
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4616
5161
|
}
|
|
4617
5162
|
},
|
|
4618
5163
|
"alpha": 0.4,
|
|
@@ -4621,6 +5166,7 @@
|
|
|
4621
5166
|
"original": {
|
|
4622
5167
|
"$value": "{base.color.orange.3}",
|
|
4623
5168
|
"$type": "color",
|
|
5169
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4624
5170
|
"$extensions": {
|
|
4625
5171
|
"org.primer.figma": {
|
|
4626
5172
|
"collection": "mode",
|
|
@@ -4676,6 +5222,10 @@
|
|
|
4676
5222
|
"isSource": true,
|
|
4677
5223
|
"$type": "color"
|
|
4678
5224
|
}
|
|
5225
|
+
},
|
|
5226
|
+
"org.primer.llm": {
|
|
5227
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5228
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4679
5229
|
}
|
|
4680
5230
|
},
|
|
4681
5231
|
"alpha": 0.4,
|
|
@@ -4689,6 +5239,7 @@
|
|
|
4689
5239
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4690
5240
|
"$value": "#971368",
|
|
4691
5241
|
"$type": "color",
|
|
5242
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4692
5243
|
"$extensions": {
|
|
4693
5244
|
"org.primer.figma": {
|
|
4694
5245
|
"collection": "mode",
|
|
@@ -4700,6 +5251,10 @@
|
|
|
4700
5251
|
},
|
|
4701
5252
|
"org.primer.overrides": {
|
|
4702
5253
|
"dark-dimmed-high-contrast": "#ed4baf"
|
|
5254
|
+
},
|
|
5255
|
+
"org.primer.llm": {
|
|
5256
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5257
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4703
5258
|
}
|
|
4704
5259
|
},
|
|
4705
5260
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4707,6 +5262,7 @@
|
|
|
4707
5262
|
"original": {
|
|
4708
5263
|
"$value": "{base.color.pink.5}",
|
|
4709
5264
|
"$type": "color",
|
|
5265
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4710
5266
|
"$extensions": {
|
|
4711
5267
|
"org.primer.figma": {
|
|
4712
5268
|
"collection": "mode",
|
|
@@ -4718,6 +5274,10 @@
|
|
|
4718
5274
|
},
|
|
4719
5275
|
"org.primer.overrides": {
|
|
4720
5276
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5277
|
+
},
|
|
5278
|
+
"org.primer.llm": {
|
|
5279
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5280
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4721
5281
|
}
|
|
4722
5282
|
},
|
|
4723
5283
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4730,6 +5290,7 @@
|
|
|
4730
5290
|
"key": "{borderColor.sponsors.muted}",
|
|
4731
5291
|
"$value": "#ed4baf",
|
|
4732
5292
|
"$type": "color",
|
|
5293
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4733
5294
|
"$extensions": {
|
|
4734
5295
|
"org.primer.figma": {
|
|
4735
5296
|
"collection": "mode",
|
|
@@ -4790,6 +5351,10 @@
|
|
|
4790
5351
|
"isSource": true,
|
|
4791
5352
|
"$type": "color"
|
|
4792
5353
|
}
|
|
5354
|
+
},
|
|
5355
|
+
"org.primer.llm": {
|
|
5356
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5357
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4793
5358
|
}
|
|
4794
5359
|
},
|
|
4795
5360
|
"alpha": 1,
|
|
@@ -4798,6 +5363,7 @@
|
|
|
4798
5363
|
"original": {
|
|
4799
5364
|
"$value": "{base.color.pink.3}",
|
|
4800
5365
|
"$type": "color",
|
|
5366
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4801
5367
|
"$extensions": {
|
|
4802
5368
|
"org.primer.figma": {
|
|
4803
5369
|
"collection": "mode",
|
|
@@ -4858,6 +5424,10 @@
|
|
|
4858
5424
|
"isSource": true,
|
|
4859
5425
|
"$type": "color"
|
|
4860
5426
|
}
|
|
5427
|
+
},
|
|
5428
|
+
"org.primer.llm": {
|
|
5429
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5430
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4861
5431
|
}
|
|
4862
5432
|
},
|
|
4863
5433
|
"alpha": 1,
|
|
@@ -4871,6 +5441,7 @@
|
|
|
4871
5441
|
"key": "{borderColor.success.emphasis}",
|
|
4872
5442
|
"$value": "#0349b4",
|
|
4873
5443
|
"$type": "color",
|
|
5444
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4874
5445
|
"$extensions": {
|
|
4875
5446
|
"org.primer.figma": {
|
|
4876
5447
|
"collection": "mode",
|
|
@@ -4890,6 +5461,10 @@
|
|
|
4890
5461
|
"light-protanopia-deuteranopia": "#0349b4",
|
|
4891
5462
|
"light-protanopia-deuteranopia-high-contrast": "#0349b4",
|
|
4892
5463
|
"dark-dimmed-high-contrast": "#43c663"
|
|
5464
|
+
},
|
|
5465
|
+
"org.primer.llm": {
|
|
5466
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5467
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4893
5468
|
}
|
|
4894
5469
|
},
|
|
4895
5470
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4897,6 +5472,7 @@
|
|
|
4897
5472
|
"original": {
|
|
4898
5473
|
"$value": "{base.color.blue.5}",
|
|
4899
5474
|
"$type": "color",
|
|
5475
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4900
5476
|
"$extensions": {
|
|
4901
5477
|
"org.primer.figma": {
|
|
4902
5478
|
"collection": "mode",
|
|
@@ -4916,6 +5492,10 @@
|
|
|
4916
5492
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4917
5493
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4918
5494
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5495
|
+
},
|
|
5496
|
+
"org.primer.llm": {
|
|
5497
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5498
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4919
5499
|
}
|
|
4920
5500
|
},
|
|
4921
5501
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4928,6 +5508,7 @@
|
|
|
4928
5508
|
"key": "{borderColor.success.muted}",
|
|
4929
5509
|
"$value": "#368cf9",
|
|
4930
5510
|
"$type": "color",
|
|
5511
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4931
5512
|
"$extensions": {
|
|
4932
5513
|
"org.primer.figma": {
|
|
4933
5514
|
"collection": "mode",
|
|
@@ -5015,6 +5596,10 @@
|
|
|
5015
5596
|
"isSource": true,
|
|
5016
5597
|
"$type": "color"
|
|
5017
5598
|
}
|
|
5599
|
+
},
|
|
5600
|
+
"org.primer.llm": {
|
|
5601
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5602
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5018
5603
|
}
|
|
5019
5604
|
},
|
|
5020
5605
|
"alpha": 1,
|
|
@@ -5023,6 +5608,7 @@
|
|
|
5023
5608
|
"original": {
|
|
5024
5609
|
"$value": "{base.color.blue.3}",
|
|
5025
5610
|
"$type": "color",
|
|
5611
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5026
5612
|
"$extensions": {
|
|
5027
5613
|
"org.primer.figma": {
|
|
5028
5614
|
"collection": "mode",
|
|
@@ -5110,6 +5696,10 @@
|
|
|
5110
5696
|
"isSource": true,
|
|
5111
5697
|
"$type": "color"
|
|
5112
5698
|
}
|
|
5699
|
+
},
|
|
5700
|
+
"org.primer.llm": {
|
|
5701
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5702
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5113
5703
|
}
|
|
5114
5704
|
},
|
|
5115
5705
|
"alpha": 1,
|
|
@@ -5123,6 +5713,7 @@
|
|
|
5123
5713
|
"key": "{borderColor.translucent}",
|
|
5124
5714
|
"$value": "#59636e",
|
|
5125
5715
|
"$type": "color",
|
|
5716
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5126
5717
|
"$extensions": {
|
|
5127
5718
|
"org.primer.figma": {
|
|
5128
5719
|
"collection": "mode",
|
|
@@ -5179,6 +5770,10 @@
|
|
|
5179
5770
|
"isSource": true,
|
|
5180
5771
|
"$type": "color"
|
|
5181
5772
|
}
|
|
5773
|
+
},
|
|
5774
|
+
"org.primer.llm": {
|
|
5775
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5776
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5182
5777
|
}
|
|
5183
5778
|
},
|
|
5184
5779
|
"alpha": 1,
|
|
@@ -5187,6 +5782,7 @@
|
|
|
5187
5782
|
"original": {
|
|
5188
5783
|
"$value": "{base.color.neutral.9}",
|
|
5189
5784
|
"$type": "color",
|
|
5785
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5190
5786
|
"$extensions": {
|
|
5191
5787
|
"org.primer.figma": {
|
|
5192
5788
|
"collection": "mode",
|
|
@@ -5243,6 +5839,10 @@
|
|
|
5243
5839
|
"isSource": true,
|
|
5244
5840
|
"$type": "color"
|
|
5245
5841
|
}
|
|
5842
|
+
},
|
|
5843
|
+
"org.primer.llm": {
|
|
5844
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5845
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5246
5846
|
}
|
|
5247
5847
|
},
|
|
5248
5848
|
"alpha": 1,
|
|
@@ -5256,6 +5856,7 @@
|
|
|
5256
5856
|
"key": "{borderColor.transparent}",
|
|
5257
5857
|
"$value": "#ffffff00",
|
|
5258
5858
|
"$type": "color",
|
|
5859
|
+
"$description": "Fully transparent border",
|
|
5259
5860
|
"$extensions": {
|
|
5260
5861
|
"org.primer.figma": {
|
|
5261
5862
|
"collection": "mode",
|
|
@@ -5268,6 +5869,7 @@
|
|
|
5268
5869
|
"original": {
|
|
5269
5870
|
"$value": "{base.color.transparent}",
|
|
5270
5871
|
"$type": "color",
|
|
5872
|
+
"$description": "Fully transparent border",
|
|
5271
5873
|
"$extensions": {
|
|
5272
5874
|
"org.primer.figma": {
|
|
5273
5875
|
"collection": "mode",
|
|
@@ -5285,6 +5887,7 @@
|
|
|
5285
5887
|
"key": "{borderColor.upsell.emphasis}",
|
|
5286
5888
|
"$value": "#622cbc",
|
|
5287
5889
|
"$type": "color",
|
|
5890
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5288
5891
|
"$extensions": {
|
|
5289
5892
|
"org.primer.figma": {
|
|
5290
5893
|
"collection": "mode",
|
|
@@ -5293,6 +5896,10 @@
|
|
|
5293
5896
|
"codeSyntax": {
|
|
5294
5897
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5295
5898
|
}
|
|
5899
|
+
},
|
|
5900
|
+
"org.primer.llm": {
|
|
5901
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5902
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5296
5903
|
}
|
|
5297
5904
|
},
|
|
5298
5905
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5300,6 +5907,7 @@
|
|
|
5300
5907
|
"original": {
|
|
5301
5908
|
"$value": "{borderColor.done.emphasis}",
|
|
5302
5909
|
"$type": "color",
|
|
5910
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5303
5911
|
"$extensions": {
|
|
5304
5912
|
"org.primer.figma": {
|
|
5305
5913
|
"collection": "mode",
|
|
@@ -5308,6 +5916,10 @@
|
|
|
5308
5916
|
"codeSyntax": {
|
|
5309
5917
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5310
5918
|
}
|
|
5919
|
+
},
|
|
5920
|
+
"org.primer.llm": {
|
|
5921
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5922
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5311
5923
|
}
|
|
5312
5924
|
},
|
|
5313
5925
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5320,6 +5932,7 @@
|
|
|
5320
5932
|
"key": "{borderColor.upsell.muted}",
|
|
5321
5933
|
"$value": "#a371f7",
|
|
5322
5934
|
"$type": "color",
|
|
5935
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5323
5936
|
"$extensions": {
|
|
5324
5937
|
"org.primer.figma": {
|
|
5325
5938
|
"collection": "mode",
|
|
@@ -5328,6 +5941,10 @@
|
|
|
5328
5941
|
"codeSyntax": {
|
|
5329
5942
|
"web": "var(--borderColor-upsell-muted)"
|
|
5330
5943
|
}
|
|
5944
|
+
},
|
|
5945
|
+
"org.primer.llm": {
|
|
5946
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5947
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5331
5948
|
}
|
|
5332
5949
|
},
|
|
5333
5950
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5335,6 +5952,7 @@
|
|
|
5335
5952
|
"original": {
|
|
5336
5953
|
"$value": "{borderColor.done.muted}",
|
|
5337
5954
|
"$type": "color",
|
|
5955
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5338
5956
|
"$extensions": {
|
|
5339
5957
|
"org.primer.figma": {
|
|
5340
5958
|
"collection": "mode",
|
|
@@ -5343,6 +5961,10 @@
|
|
|
5343
5961
|
"codeSyntax": {
|
|
5344
5962
|
"web": "var(--borderColor-upsell-muted)"
|
|
5345
5963
|
}
|
|
5964
|
+
},
|
|
5965
|
+
"org.primer.llm": {
|
|
5966
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5967
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5346
5968
|
}
|
|
5347
5969
|
},
|
|
5348
5970
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36481,6 +37103,7 @@
|
|
|
36481
37103
|
"key": "{fgColor.accent}",
|
|
36482
37104
|
"$value": "#023b95",
|
|
36483
37105
|
"$type": "color",
|
|
37106
|
+
"$description": "Accent text for links and interactive elements",
|
|
36484
37107
|
"$extensions": {
|
|
36485
37108
|
"org.primer.figma": {
|
|
36486
37109
|
"collection": "mode",
|
|
@@ -36500,6 +37123,10 @@
|
|
|
36500
37123
|
"light-high-contrast": "#023b95",
|
|
36501
37124
|
"light-tritanopia-high-contrast": "#023b95",
|
|
36502
37125
|
"light-protanopia-deuteranopia-high-contrast": "#023b95"
|
|
37126
|
+
},
|
|
37127
|
+
"org.primer.llm": {
|
|
37128
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37129
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36503
37130
|
}
|
|
36504
37131
|
},
|
|
36505
37132
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36507,6 +37134,7 @@
|
|
|
36507
37134
|
"original": {
|
|
36508
37135
|
"$value": "{base.color.blue.6}",
|
|
36509
37136
|
"$type": "color",
|
|
37137
|
+
"$description": "Accent text for links and interactive elements",
|
|
36510
37138
|
"$extensions": {
|
|
36511
37139
|
"org.primer.figma": {
|
|
36512
37140
|
"collection": "mode",
|
|
@@ -36526,6 +37154,10 @@
|
|
|
36526
37154
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36527
37155
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36528
37156
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37157
|
+
},
|
|
37158
|
+
"org.primer.llm": {
|
|
37159
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37160
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36529
37161
|
}
|
|
36530
37162
|
},
|
|
36531
37163
|
"key": "{fgColor.accent}"
|
|
@@ -36538,6 +37170,7 @@
|
|
|
36538
37170
|
"key": "{fgColor.attention}",
|
|
36539
37171
|
"$value": "#603700",
|
|
36540
37172
|
"$type": "color",
|
|
37173
|
+
"$description": "Attention text for warnings and caution states",
|
|
36541
37174
|
"$extensions": {
|
|
36542
37175
|
"org.primer.figma": {
|
|
36543
37176
|
"collection": "mode",
|
|
@@ -36553,6 +37186,10 @@
|
|
|
36553
37186
|
"light-protanopia-deuteranopia-high-contrast": "#603700",
|
|
36554
37187
|
"light-tritanopia-high-contrast": "#603700",
|
|
36555
37188
|
"dark-dimmed-high-contrast": "#f0ce53"
|
|
37189
|
+
},
|
|
37190
|
+
"org.primer.llm": {
|
|
37191
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37192
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36556
37193
|
}
|
|
36557
37194
|
},
|
|
36558
37195
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36560,6 +37197,7 @@
|
|
|
36560
37197
|
"original": {
|
|
36561
37198
|
"$value": "{base.color.yellow.6}",
|
|
36562
37199
|
"$type": "color",
|
|
37200
|
+
"$description": "Attention text for warnings and caution states",
|
|
36563
37201
|
"$extensions": {
|
|
36564
37202
|
"org.primer.figma": {
|
|
36565
37203
|
"collection": "mode",
|
|
@@ -36575,6 +37213,10 @@
|
|
|
36575
37213
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36576
37214
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36577
37215
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37216
|
+
},
|
|
37217
|
+
"org.primer.llm": {
|
|
37218
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37219
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36578
37220
|
}
|
|
36579
37221
|
},
|
|
36580
37222
|
"key": "{fgColor.attention}"
|
|
@@ -36587,6 +37229,7 @@
|
|
|
36587
37229
|
"key": "{fgColor.black}",
|
|
36588
37230
|
"$value": "#010409",
|
|
36589
37231
|
"$type": "color",
|
|
37232
|
+
"$description": "Pure black text",
|
|
36590
37233
|
"$extensions": {
|
|
36591
37234
|
"org.primer.figma": {
|
|
36592
37235
|
"collection": "mode",
|
|
@@ -36595,6 +37238,10 @@
|
|
|
36595
37238
|
},
|
|
36596
37239
|
"org.primer.overrides": {
|
|
36597
37240
|
"dark": "#ffffff"
|
|
37241
|
+
},
|
|
37242
|
+
"org.primer.llm": {
|
|
37243
|
+
"doNotUse": true,
|
|
37244
|
+
"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."
|
|
36598
37245
|
}
|
|
36599
37246
|
},
|
|
36600
37247
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36602,6 +37249,7 @@
|
|
|
36602
37249
|
"original": {
|
|
36603
37250
|
"$value": "{base.color.neutral.13}",
|
|
36604
37251
|
"$type": "color",
|
|
37252
|
+
"$description": "Pure black text",
|
|
36605
37253
|
"$extensions": {
|
|
36606
37254
|
"org.primer.figma": {
|
|
36607
37255
|
"collection": "mode",
|
|
@@ -36610,6 +37258,10 @@
|
|
|
36610
37258
|
},
|
|
36611
37259
|
"org.primer.overrides": {
|
|
36612
37260
|
"dark": "{base.color.neutral.0}"
|
|
37261
|
+
},
|
|
37262
|
+
"org.primer.llm": {
|
|
37263
|
+
"doNotUse": true,
|
|
37264
|
+
"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."
|
|
36613
37265
|
}
|
|
36614
37266
|
},
|
|
36615
37267
|
"key": "{fgColor.black}"
|
|
@@ -36622,6 +37274,7 @@
|
|
|
36622
37274
|
"key": "{fgColor.closed}",
|
|
36623
37275
|
"$value": "#393f46",
|
|
36624
37276
|
"$type": "color",
|
|
37277
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36625
37278
|
"$extensions": {
|
|
36626
37279
|
"org.primer.figma": {
|
|
36627
37280
|
"collection": "mode",
|
|
@@ -36640,6 +37293,10 @@
|
|
|
36640
37293
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
36641
37294
|
"light-tritanopia": "#393f46",
|
|
36642
37295
|
"light-tritanopia-high-contrast": "#393f46"
|
|
37296
|
+
},
|
|
37297
|
+
"org.primer.llm": {
|
|
37298
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37299
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36643
37300
|
}
|
|
36644
37301
|
},
|
|
36645
37302
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36647,6 +37304,7 @@
|
|
|
36647
37304
|
"original": {
|
|
36648
37305
|
"$value": "{fgColor.muted}",
|
|
36649
37306
|
"$type": "color",
|
|
37307
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36650
37308
|
"$extensions": {
|
|
36651
37309
|
"org.primer.figma": {
|
|
36652
37310
|
"collection": "mode",
|
|
@@ -36665,6 +37323,10 @@
|
|
|
36665
37323
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36666
37324
|
"light-tritanopia": "{fgColor.muted}",
|
|
36667
37325
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37326
|
+
},
|
|
37327
|
+
"org.primer.llm": {
|
|
37328
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37329
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36668
37330
|
}
|
|
36669
37331
|
},
|
|
36670
37332
|
"key": "{fgColor.closed}"
|
|
@@ -36677,6 +37339,7 @@
|
|
|
36677
37339
|
"key": "{fgColor.danger}",
|
|
36678
37340
|
"$value": "#702c00",
|
|
36679
37341
|
"$type": "color",
|
|
37342
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36680
37343
|
"$extensions": {
|
|
36681
37344
|
"org.primer.figma": {
|
|
36682
37345
|
"collection": "mode",
|
|
@@ -36697,6 +37360,10 @@
|
|
|
36697
37360
|
"dark-tritanopia-high-contrast": "#ee5a5d",
|
|
36698
37361
|
"light-high-contrast": "#86061d",
|
|
36699
37362
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37363
|
+
},
|
|
37364
|
+
"org.primer.llm": {
|
|
37365
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37366
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36700
37367
|
}
|
|
36701
37368
|
},
|
|
36702
37369
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36704,6 +37371,7 @@
|
|
|
36704
37371
|
"original": {
|
|
36705
37372
|
"$value": "{base.color.orange.6}",
|
|
36706
37373
|
"$type": "color",
|
|
37374
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36707
37375
|
"$extensions": {
|
|
36708
37376
|
"org.primer.figma": {
|
|
36709
37377
|
"collection": "mode",
|
|
@@ -36724,6 +37392,10 @@
|
|
|
36724
37392
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36725
37393
|
"light-high-contrast": "{base.color.red.6}",
|
|
36726
37394
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37395
|
+
},
|
|
37396
|
+
"org.primer.llm": {
|
|
37397
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37398
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36727
37399
|
}
|
|
36728
37400
|
},
|
|
36729
37401
|
"key": "{fgColor.danger}"
|
|
@@ -36736,6 +37408,7 @@
|
|
|
36736
37408
|
"key": "{fgColor.default}",
|
|
36737
37409
|
"$value": "#010409",
|
|
36738
37410
|
"$type": "color",
|
|
37411
|
+
"$description": "Default text color for primary content and headings",
|
|
36739
37412
|
"$extensions": {
|
|
36740
37413
|
"org.primer.figma": {
|
|
36741
37414
|
"collection": "mode",
|
|
@@ -36750,8 +37423,12 @@
|
|
|
36750
37423
|
"dark-high-contrast": "#010409",
|
|
36751
37424
|
"dark-tritanopia-high-contrast": "#010409",
|
|
36752
37425
|
"dark-protanopia-deuteranopia-high-contrast": "#010409",
|
|
36753
|
-
"dark-dimmed": "#
|
|
37426
|
+
"dark-dimmed": "#25292e",
|
|
36754
37427
|
"dark-dimmed-high-contrast": "#25292e"
|
|
37428
|
+
},
|
|
37429
|
+
"org.primer.llm": {
|
|
37430
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37431
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36755
37432
|
}
|
|
36756
37433
|
},
|
|
36757
37434
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36759,6 +37436,7 @@
|
|
|
36759
37436
|
"original": {
|
|
36760
37437
|
"$value": "{base.color.neutral.13}",
|
|
36761
37438
|
"$type": "color",
|
|
37439
|
+
"$description": "Default text color for primary content and headings",
|
|
36762
37440
|
"$extensions": {
|
|
36763
37441
|
"org.primer.figma": {
|
|
36764
37442
|
"collection": "mode",
|
|
@@ -36773,8 +37451,12 @@
|
|
|
36773
37451
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36774
37452
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36775
37453
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36776
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37454
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36777
37455
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37456
|
+
},
|
|
37457
|
+
"org.primer.llm": {
|
|
37458
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37459
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36778
37460
|
}
|
|
36779
37461
|
},
|
|
36780
37462
|
"key": "{fgColor.default}"
|
|
@@ -36787,6 +37469,7 @@
|
|
|
36787
37469
|
"key": "{fgColor.disabled}",
|
|
36788
37470
|
"$value": "#59636e",
|
|
36789
37471
|
"$type": "color",
|
|
37472
|
+
"$description": "Text color for disabled interactive elements",
|
|
36790
37473
|
"$extensions": {
|
|
36791
37474
|
"org.primer.figma": {
|
|
36792
37475
|
"collection": "mode",
|
|
@@ -36808,6 +37491,10 @@
|
|
|
36808
37491
|
"dark-high-contrast": "#818b98",
|
|
36809
37492
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
36810
37493
|
"dark-protanopia-deuteranopia-high-contrast": "#818b98"
|
|
37494
|
+
},
|
|
37495
|
+
"org.primer.llm": {
|
|
37496
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37497
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36811
37498
|
}
|
|
36812
37499
|
},
|
|
36813
37500
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36815,6 +37502,7 @@
|
|
|
36815
37502
|
"original": {
|
|
36816
37503
|
"$value": "{base.color.neutral.9}",
|
|
36817
37504
|
"$type": "color",
|
|
37505
|
+
"$description": "Text color for disabled interactive elements",
|
|
36818
37506
|
"$extensions": {
|
|
36819
37507
|
"org.primer.figma": {
|
|
36820
37508
|
"collection": "mode",
|
|
@@ -36836,6 +37524,10 @@
|
|
|
36836
37524
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36837
37525
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36838
37526
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37527
|
+
},
|
|
37528
|
+
"org.primer.llm": {
|
|
37529
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37530
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36839
37531
|
}
|
|
36840
37532
|
},
|
|
36841
37533
|
"key": "{fgColor.disabled}"
|
|
@@ -36848,6 +37540,7 @@
|
|
|
36848
37540
|
"key": "{fgColor.done}",
|
|
36849
37541
|
"$value": "#512598",
|
|
36850
37542
|
"$type": "color",
|
|
37543
|
+
"$description": "Text color for completed/done state indicators",
|
|
36851
37544
|
"$extensions": {
|
|
36852
37545
|
"org.primer.figma": {
|
|
36853
37546
|
"collection": "mode",
|
|
@@ -36866,6 +37559,10 @@
|
|
|
36866
37559
|
"light-high-contrast": "#512598",
|
|
36867
37560
|
"light-protanopia-deuteranopia-high-contrast": "#512598",
|
|
36868
37561
|
"light-tritanopia-high-contrast": "#512598"
|
|
37562
|
+
},
|
|
37563
|
+
"org.primer.llm": {
|
|
37564
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37565
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36869
37566
|
}
|
|
36870
37567
|
},
|
|
36871
37568
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36873,6 +37570,7 @@
|
|
|
36873
37570
|
"original": {
|
|
36874
37571
|
"$value": "{base.color.purple.6}",
|
|
36875
37572
|
"$type": "color",
|
|
37573
|
+
"$description": "Text color for completed/done state indicators",
|
|
36876
37574
|
"$extensions": {
|
|
36877
37575
|
"org.primer.figma": {
|
|
36878
37576
|
"collection": "mode",
|
|
@@ -36891,6 +37589,10 @@
|
|
|
36891
37589
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36892
37590
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36893
37591
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37592
|
+
},
|
|
37593
|
+
"org.primer.llm": {
|
|
37594
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37595
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36894
37596
|
}
|
|
36895
37597
|
},
|
|
36896
37598
|
"key": "{fgColor.done}"
|
|
@@ -36903,6 +37605,7 @@
|
|
|
36903
37605
|
"key": "{fgColor.draft}",
|
|
36904
37606
|
"$value": "#393f46",
|
|
36905
37607
|
"$type": "color",
|
|
37608
|
+
"$description": "Text color for draft state indicators",
|
|
36906
37609
|
"$extensions": {
|
|
36907
37610
|
"org.primer.figma": {
|
|
36908
37611
|
"collection": "mode",
|
|
@@ -36911,6 +37614,10 @@
|
|
|
36911
37614
|
"codeSyntax": {
|
|
36912
37615
|
"web": "var(--fgColor-draft)"
|
|
36913
37616
|
}
|
|
37617
|
+
},
|
|
37618
|
+
"org.primer.llm": {
|
|
37619
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37620
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36914
37621
|
}
|
|
36915
37622
|
},
|
|
36916
37623
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36918,6 +37625,7 @@
|
|
|
36918
37625
|
"original": {
|
|
36919
37626
|
"$value": "{fgColor.neutral}",
|
|
36920
37627
|
"$type": "color",
|
|
37628
|
+
"$description": "Text color for draft state indicators",
|
|
36921
37629
|
"$extensions": {
|
|
36922
37630
|
"org.primer.figma": {
|
|
36923
37631
|
"collection": "mode",
|
|
@@ -36926,6 +37634,10 @@
|
|
|
36926
37634
|
"codeSyntax": {
|
|
36927
37635
|
"web": "var(--fgColor-draft)"
|
|
36928
37636
|
}
|
|
37637
|
+
},
|
|
37638
|
+
"org.primer.llm": {
|
|
37639
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37640
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36929
37641
|
}
|
|
36930
37642
|
},
|
|
36931
37643
|
"key": "{fgColor.draft}"
|
|
@@ -36938,6 +37650,7 @@
|
|
|
36938
37650
|
"key": "{fgColor.link}",
|
|
36939
37651
|
"$value": "#023b95",
|
|
36940
37652
|
"$type": "color",
|
|
37653
|
+
"$description": "Text color for hyperlinks",
|
|
36941
37654
|
"$extensions": {
|
|
36942
37655
|
"org.primer.figma": {
|
|
36943
37656
|
"collection": "mode",
|
|
@@ -36946,6 +37659,10 @@
|
|
|
36946
37659
|
"codeSyntax": {
|
|
36947
37660
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36948
37661
|
}
|
|
37662
|
+
},
|
|
37663
|
+
"org.primer.llm": {
|
|
37664
|
+
"usage": ["link-text", "hyperlink"],
|
|
37665
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36949
37666
|
}
|
|
36950
37667
|
},
|
|
36951
37668
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36953,6 +37670,7 @@
|
|
|
36953
37670
|
"original": {
|
|
36954
37671
|
"$value": "{fgColor.accent}",
|
|
36955
37672
|
"$type": "color",
|
|
37673
|
+
"$description": "Text color for hyperlinks",
|
|
36956
37674
|
"$extensions": {
|
|
36957
37675
|
"org.primer.figma": {
|
|
36958
37676
|
"collection": "mode",
|
|
@@ -36961,6 +37679,10 @@
|
|
|
36961
37679
|
"codeSyntax": {
|
|
36962
37680
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36963
37681
|
}
|
|
37682
|
+
},
|
|
37683
|
+
"org.primer.llm": {
|
|
37684
|
+
"usage": ["link-text", "hyperlink"],
|
|
37685
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36964
37686
|
}
|
|
36965
37687
|
},
|
|
36966
37688
|
"key": "{fgColor.link}"
|
|
@@ -36973,6 +37695,7 @@
|
|
|
36973
37695
|
"key": "{fgColor.muted}",
|
|
36974
37696
|
"$value": "#393f46",
|
|
36975
37697
|
"$type": "color",
|
|
37698
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36976
37699
|
"$extensions": {
|
|
36977
37700
|
"org.primer.figma": {
|
|
36978
37701
|
"collection": "mode",
|
|
@@ -36990,6 +37713,10 @@
|
|
|
36990
37713
|
"dark-dimmed-high-contrast": "#454c54",
|
|
36991
37714
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36992
37715
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
37716
|
+
},
|
|
37717
|
+
"org.primer.llm": {
|
|
37718
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37719
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
36993
37720
|
}
|
|
36994
37721
|
},
|
|
36995
37722
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36997,6 +37724,7 @@
|
|
|
36997
37724
|
"original": {
|
|
36998
37725
|
"$value": "{base.color.neutral.11}",
|
|
36999
37726
|
"$type": "color",
|
|
37727
|
+
"$description": "Muted text for secondary content and less important information",
|
|
37000
37728
|
"$extensions": {
|
|
37001
37729
|
"org.primer.figma": {
|
|
37002
37730
|
"collection": "mode",
|
|
@@ -37014,6 +37742,10 @@
|
|
|
37014
37742
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37015
37743
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37016
37744
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37745
|
+
},
|
|
37746
|
+
"org.primer.llm": {
|
|
37747
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37748
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37017
37749
|
}
|
|
37018
37750
|
},
|
|
37019
37751
|
"key": "{fgColor.muted}"
|
|
@@ -37026,6 +37758,7 @@
|
|
|
37026
37758
|
"key": "{fgColor.neutral}",
|
|
37027
37759
|
"$value": "#393f46",
|
|
37028
37760
|
"$type": "color",
|
|
37761
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37029
37762
|
"$extensions": {
|
|
37030
37763
|
"org.primer.figma": {
|
|
37031
37764
|
"collection": "mode",
|
|
@@ -37040,6 +37773,10 @@
|
|
|
37040
37773
|
"dark-dimmed-high-contrast": "#393f46",
|
|
37041
37774
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
37042
37775
|
"dark-protanopia-deuteranopia-high-contrast": "#393f46"
|
|
37776
|
+
},
|
|
37777
|
+
"org.primer.llm": {
|
|
37778
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37779
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37043
37780
|
}
|
|
37044
37781
|
},
|
|
37045
37782
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37047,6 +37784,7 @@
|
|
|
37047
37784
|
"original": {
|
|
37048
37785
|
"$value": "{base.color.neutral.11}",
|
|
37049
37786
|
"$type": "color",
|
|
37787
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37050
37788
|
"$extensions": {
|
|
37051
37789
|
"org.primer.figma": {
|
|
37052
37790
|
"collection": "mode",
|
|
@@ -37061,6 +37799,10 @@
|
|
|
37061
37799
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37062
37800
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37063
37801
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37802
|
+
},
|
|
37803
|
+
"org.primer.llm": {
|
|
37804
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37805
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37064
37806
|
}
|
|
37065
37807
|
},
|
|
37066
37808
|
"key": "{fgColor.neutral}"
|
|
@@ -37073,6 +37815,7 @@
|
|
|
37073
37815
|
"key": "{fgColor.onEmphasis}",
|
|
37074
37816
|
"$value": "#ffffff",
|
|
37075
37817
|
"$type": "color",
|
|
37818
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37076
37819
|
"$extensions": {
|
|
37077
37820
|
"org.primer.figma": {
|
|
37078
37821
|
"collection": "mode",
|
|
@@ -37086,6 +37829,10 @@
|
|
|
37086
37829
|
"dark": "#010409",
|
|
37087
37830
|
"dark-dimmed": "#25292e",
|
|
37088
37831
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37832
|
+
},
|
|
37833
|
+
"org.primer.llm": {
|
|
37834
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37835
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37089
37836
|
}
|
|
37090
37837
|
},
|
|
37091
37838
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37093,6 +37840,7 @@
|
|
|
37093
37840
|
"original": {
|
|
37094
37841
|
"$value": "{base.color.neutral.0}",
|
|
37095
37842
|
"$type": "color",
|
|
37843
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37096
37844
|
"$extensions": {
|
|
37097
37845
|
"org.primer.figma": {
|
|
37098
37846
|
"collection": "mode",
|
|
@@ -37106,6 +37854,10 @@
|
|
|
37106
37854
|
"dark": "{base.color.neutral.13}",
|
|
37107
37855
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37108
37856
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37857
|
+
},
|
|
37858
|
+
"org.primer.llm": {
|
|
37859
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37860
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37109
37861
|
}
|
|
37110
37862
|
},
|
|
37111
37863
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37118,11 +37870,16 @@
|
|
|
37118
37870
|
"key": "{fgColor.onInverse}",
|
|
37119
37871
|
"$value": "#ffffff",
|
|
37120
37872
|
"$type": "color",
|
|
37873
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37121
37874
|
"$extensions": {
|
|
37122
37875
|
"org.primer.figma": {
|
|
37123
37876
|
"collection": "mode",
|
|
37124
37877
|
"group": "semantic",
|
|
37125
37878
|
"scopes": ["fgColor"]
|
|
37879
|
+
},
|
|
37880
|
+
"org.primer.llm": {
|
|
37881
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37882
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37126
37883
|
}
|
|
37127
37884
|
},
|
|
37128
37885
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37130,11 +37887,16 @@
|
|
|
37130
37887
|
"original": {
|
|
37131
37888
|
"$value": "{base.color.neutral.0}",
|
|
37132
37889
|
"$type": "color",
|
|
37890
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37133
37891
|
"$extensions": {
|
|
37134
37892
|
"org.primer.figma": {
|
|
37135
37893
|
"collection": "mode",
|
|
37136
37894
|
"group": "semantic",
|
|
37137
37895
|
"scopes": ["fgColor"]
|
|
37896
|
+
},
|
|
37897
|
+
"org.primer.llm": {
|
|
37898
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37899
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37138
37900
|
}
|
|
37139
37901
|
},
|
|
37140
37902
|
"key": "{fgColor.onInverse}"
|
|
@@ -37147,6 +37909,7 @@
|
|
|
37147
37909
|
"key": "{fgColor.open}",
|
|
37148
37910
|
"$value": "#702c00",
|
|
37149
37911
|
"$type": "color",
|
|
37912
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37150
37913
|
"$extensions": {
|
|
37151
37914
|
"org.primer.figma": {
|
|
37152
37915
|
"collection": "mode",
|
|
@@ -37165,6 +37928,10 @@
|
|
|
37165
37928
|
"dark-tritanopia-high-contrast": "#ff8e8a",
|
|
37166
37929
|
"light-tritanopia": "#a0111f",
|
|
37167
37930
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37931
|
+
},
|
|
37932
|
+
"org.primer.llm": {
|
|
37933
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37934
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37168
37935
|
}
|
|
37169
37936
|
},
|
|
37170
37937
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37172,6 +37939,7 @@
|
|
|
37172
37939
|
"original": {
|
|
37173
37940
|
"$value": "{base.color.orange.6}",
|
|
37174
37941
|
"$type": "color",
|
|
37942
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37175
37943
|
"$extensions": {
|
|
37176
37944
|
"org.primer.figma": {
|
|
37177
37945
|
"collection": "mode",
|
|
@@ -37190,6 +37958,10 @@
|
|
|
37190
37958
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37191
37959
|
"light-tritanopia": "{base.color.red.5}",
|
|
37192
37960
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37961
|
+
},
|
|
37962
|
+
"org.primer.llm": {
|
|
37963
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37964
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37193
37965
|
}
|
|
37194
37966
|
},
|
|
37195
37967
|
"key": "{fgColor.open}"
|
|
@@ -37202,6 +37974,7 @@
|
|
|
37202
37974
|
"key": "{fgColor.severe}",
|
|
37203
37975
|
"$value": "#702c00",
|
|
37204
37976
|
"$type": "color",
|
|
37977
|
+
"$description": "Severe text for high-priority warnings",
|
|
37205
37978
|
"$extensions": {
|
|
37206
37979
|
"org.primer.figma": {
|
|
37207
37980
|
"collection": "mode",
|
|
@@ -37222,6 +37995,10 @@
|
|
|
37222
37995
|
"light-tritanopia": "#a0111f",
|
|
37223
37996
|
"light-tritanopia-high-contrast": "#86061d",
|
|
37224
37997
|
"light-protanopia-deuteranopia-high-contrast": "#702c00"
|
|
37998
|
+
},
|
|
37999
|
+
"org.primer.llm": {
|
|
38000
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38001
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37225
38002
|
}
|
|
37226
38003
|
},
|
|
37227
38004
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37229,6 +38006,7 @@
|
|
|
37229
38006
|
"original": {
|
|
37230
38007
|
"$value": "{base.color.orange.6}",
|
|
37231
38008
|
"$type": "color",
|
|
38009
|
+
"$description": "Severe text for high-priority warnings",
|
|
37232
38010
|
"$extensions": {
|
|
37233
38011
|
"org.primer.figma": {
|
|
37234
38012
|
"collection": "mode",
|
|
@@ -37249,6 +38027,10 @@
|
|
|
37249
38027
|
"light-tritanopia": "{base.color.red.5}",
|
|
37250
38028
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37251
38029
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38030
|
+
},
|
|
38031
|
+
"org.primer.llm": {
|
|
38032
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38033
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37252
38034
|
}
|
|
37253
38035
|
},
|
|
37254
38036
|
"key": "{fgColor.severe}"
|
|
@@ -37261,6 +38043,7 @@
|
|
|
37261
38043
|
"key": "{fgColor.sponsors}",
|
|
37262
38044
|
"$value": "#7d0c57",
|
|
37263
38045
|
"$type": "color",
|
|
38046
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37264
38047
|
"$extensions": {
|
|
37265
38048
|
"org.primer.figma": {
|
|
37266
38049
|
"collection": "mode",
|
|
@@ -37279,6 +38062,10 @@
|
|
|
37279
38062
|
"light-high-contrast": "#7d0c57",
|
|
37280
38063
|
"light-protanopia-deuteranopia-high-contrast": "#7d0c57",
|
|
37281
38064
|
"light-tritanopia-high-contrast": "#7d0c57"
|
|
38065
|
+
},
|
|
38066
|
+
"org.primer.llm": {
|
|
38067
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38068
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37282
38069
|
}
|
|
37283
38070
|
},
|
|
37284
38071
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37286,6 +38073,7 @@
|
|
|
37286
38073
|
"original": {
|
|
37287
38074
|
"$value": "{base.color.pink.6}",
|
|
37288
38075
|
"$type": "color",
|
|
38076
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37289
38077
|
"$extensions": {
|
|
37290
38078
|
"org.primer.figma": {
|
|
37291
38079
|
"collection": "mode",
|
|
@@ -37304,6 +38092,10 @@
|
|
|
37304
38092
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37305
38093
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37306
38094
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38095
|
+
},
|
|
38096
|
+
"org.primer.llm": {
|
|
38097
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38098
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37307
38099
|
}
|
|
37308
38100
|
},
|
|
37309
38101
|
"key": "{fgColor.sponsors}"
|
|
@@ -37316,6 +38108,7 @@
|
|
|
37316
38108
|
"key": "{fgColor.success}",
|
|
37317
38109
|
"$value": "#023b95",
|
|
37318
38110
|
"$type": "color",
|
|
38111
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37319
38112
|
"$extensions": {
|
|
37320
38113
|
"org.primer.figma": {
|
|
37321
38114
|
"collection": "mode",
|
|
@@ -37338,6 +38131,10 @@
|
|
|
37338
38131
|
"dark-tritanopia-high-contrast": "#67b3fd",
|
|
37339
38132
|
"light-tritanopia": "#0349b4",
|
|
37340
38133
|
"light-tritanopia-high-contrast": "#023b95"
|
|
38134
|
+
},
|
|
38135
|
+
"org.primer.llm": {
|
|
38136
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38137
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37341
38138
|
}
|
|
37342
38139
|
},
|
|
37343
38140
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37345,6 +38142,7 @@
|
|
|
37345
38142
|
"original": {
|
|
37346
38143
|
"$value": "{base.color.blue.6}",
|
|
37347
38144
|
"$type": "color",
|
|
38145
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37348
38146
|
"$extensions": {
|
|
37349
38147
|
"org.primer.figma": {
|
|
37350
38148
|
"collection": "mode",
|
|
@@ -37367,6 +38165,10 @@
|
|
|
37367
38165
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37368
38166
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37369
38167
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38168
|
+
},
|
|
38169
|
+
"org.primer.llm": {
|
|
38170
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38171
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37370
38172
|
}
|
|
37371
38173
|
},
|
|
37372
38174
|
"key": "{fgColor.success}"
|
|
@@ -37379,6 +38181,7 @@
|
|
|
37379
38181
|
"key": "{fgColor.upsell}",
|
|
37380
38182
|
"$value": "#512598",
|
|
37381
38183
|
"$type": "color",
|
|
38184
|
+
"$description": "Text color for upsell and promotional content",
|
|
37382
38185
|
"$extensions": {
|
|
37383
38186
|
"org.primer.figma": {
|
|
37384
38187
|
"collection": "mode",
|
|
@@ -37387,6 +38190,10 @@
|
|
|
37387
38190
|
"codeSyntax": {
|
|
37388
38191
|
"web": "var(--fgColor-upsell)"
|
|
37389
38192
|
}
|
|
38193
|
+
},
|
|
38194
|
+
"org.primer.llm": {
|
|
38195
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38196
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37390
38197
|
}
|
|
37391
38198
|
},
|
|
37392
38199
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37394,6 +38201,7 @@
|
|
|
37394
38201
|
"original": {
|
|
37395
38202
|
"$value": "{fgColor.done}",
|
|
37396
38203
|
"$type": "color",
|
|
38204
|
+
"$description": "Text color for upsell and promotional content",
|
|
37397
38205
|
"$extensions": {
|
|
37398
38206
|
"org.primer.figma": {
|
|
37399
38207
|
"collection": "mode",
|
|
@@ -37402,6 +38210,10 @@
|
|
|
37402
38210
|
"codeSyntax": {
|
|
37403
38211
|
"web": "var(--fgColor-upsell)"
|
|
37404
38212
|
}
|
|
38213
|
+
},
|
|
38214
|
+
"org.primer.llm": {
|
|
38215
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38216
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37405
38217
|
}
|
|
37406
38218
|
},
|
|
37407
38219
|
"key": "{fgColor.upsell}"
|
|
@@ -37414,6 +38226,7 @@
|
|
|
37414
38226
|
"key": "{fgColor.white}",
|
|
37415
38227
|
"$value": "#ffffff",
|
|
37416
38228
|
"$type": "color",
|
|
38229
|
+
"$description": "Pure white text",
|
|
37417
38230
|
"$extensions": {
|
|
37418
38231
|
"org.primer.figma": {
|
|
37419
38232
|
"collection": "mode",
|
|
@@ -37422,6 +38235,10 @@
|
|
|
37422
38235
|
},
|
|
37423
38236
|
"org.primer.overrides": {
|
|
37424
38237
|
"dark": "#010409"
|
|
38238
|
+
},
|
|
38239
|
+
"org.primer.llm": {
|
|
38240
|
+
"doNotUse": true,
|
|
38241
|
+
"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."
|
|
37425
38242
|
}
|
|
37426
38243
|
},
|
|
37427
38244
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37429,6 +38246,7 @@
|
|
|
37429
38246
|
"original": {
|
|
37430
38247
|
"$value": "{base.color.neutral.0}",
|
|
37431
38248
|
"$type": "color",
|
|
38249
|
+
"$description": "Pure white text",
|
|
37432
38250
|
"$extensions": {
|
|
37433
38251
|
"org.primer.figma": {
|
|
37434
38252
|
"collection": "mode",
|
|
@@ -37437,6 +38255,10 @@
|
|
|
37437
38255
|
},
|
|
37438
38256
|
"org.primer.overrides": {
|
|
37439
38257
|
"dark": "{base.color.neutral.13}"
|
|
38258
|
+
},
|
|
38259
|
+
"org.primer.llm": {
|
|
38260
|
+
"doNotUse": true,
|
|
38261
|
+
"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."
|
|
37440
38262
|
}
|
|
37441
38263
|
},
|
|
37442
38264
|
"key": "{fgColor.white}"
|
|
@@ -37449,6 +38271,13 @@
|
|
|
37449
38271
|
"key": "{focus.outline}",
|
|
37450
38272
|
"$value": "2px solid #0349b4",
|
|
37451
38273
|
"$type": "border",
|
|
38274
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38275
|
+
"$extensions": {
|
|
38276
|
+
"org.primer.llm": {
|
|
38277
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38278
|
+
"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."
|
|
38279
|
+
}
|
|
38280
|
+
},
|
|
37452
38281
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37453
38282
|
"isSource": true,
|
|
37454
38283
|
"original": {
|
|
@@ -37458,6 +38287,13 @@
|
|
|
37458
38287
|
"width": "2px"
|
|
37459
38288
|
},
|
|
37460
38289
|
"$type": "border",
|
|
38290
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38291
|
+
"$extensions": {
|
|
38292
|
+
"org.primer.llm": {
|
|
38293
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38294
|
+
"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."
|
|
38295
|
+
}
|
|
38296
|
+
},
|
|
37461
38297
|
"key": "{focus.outline}"
|
|
37462
38298
|
},
|
|
37463
38299
|
"name": "focus-outline",
|
|
@@ -37468,11 +38304,16 @@
|
|
|
37468
38304
|
"key": "{focus.outlineColor}",
|
|
37469
38305
|
"$value": "#0349b4",
|
|
37470
38306
|
"$type": "color",
|
|
38307
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37471
38308
|
"$extensions": {
|
|
37472
38309
|
"org.primer.figma": {
|
|
37473
38310
|
"collection": "mode",
|
|
37474
38311
|
"group": "component (internal)",
|
|
37475
38312
|
"scopes": ["borderColor", "effectColor"]
|
|
38313
|
+
},
|
|
38314
|
+
"org.primer.llm": {
|
|
38315
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38316
|
+
"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."
|
|
37476
38317
|
}
|
|
37477
38318
|
},
|
|
37478
38319
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37480,11 +38321,16 @@
|
|
|
37480
38321
|
"original": {
|
|
37481
38322
|
"$value": "{borderColor.accent.emphasis}",
|
|
37482
38323
|
"$type": "color",
|
|
38324
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37483
38325
|
"$extensions": {
|
|
37484
38326
|
"org.primer.figma": {
|
|
37485
38327
|
"collection": "mode",
|
|
37486
38328
|
"group": "component (internal)",
|
|
37487
38329
|
"scopes": ["borderColor", "effectColor"]
|
|
38330
|
+
},
|
|
38331
|
+
"org.primer.llm": {
|
|
38332
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38333
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37488
38334
|
}
|
|
37489
38335
|
},
|
|
37490
38336
|
"key": "{focus.outlineColor}"
|
|
@@ -46532,6 +47378,7 @@
|
|
|
46532
47378
|
"key": "{selection.bgColor}",
|
|
46533
47379
|
"$value": "#0349b433",
|
|
46534
47380
|
"$type": "color",
|
|
47381
|
+
"$description": "Background color for text selection highlights",
|
|
46535
47382
|
"$extensions": {
|
|
46536
47383
|
"org.primer.figma": {
|
|
46537
47384
|
"collection": "mode",
|
|
@@ -46546,6 +47393,10 @@
|
|
|
46546
47393
|
"isSource": true,
|
|
46547
47394
|
"$type": "color"
|
|
46548
47395
|
}
|
|
47396
|
+
},
|
|
47397
|
+
"org.primer.llm": {
|
|
47398
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47399
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46549
47400
|
}
|
|
46550
47401
|
},
|
|
46551
47402
|
"alpha": 0.2,
|
|
@@ -46554,6 +47405,7 @@
|
|
|
46554
47405
|
"original": {
|
|
46555
47406
|
"$value": "{bgColor.accent.emphasis}",
|
|
46556
47407
|
"$type": "color",
|
|
47408
|
+
"$description": "Background color for text selection highlights",
|
|
46557
47409
|
"$extensions": {
|
|
46558
47410
|
"org.primer.figma": {
|
|
46559
47411
|
"collection": "mode",
|
|
@@ -46568,6 +47420,10 @@
|
|
|
46568
47420
|
"isSource": true,
|
|
46569
47421
|
"$type": "color"
|
|
46570
47422
|
}
|
|
47423
|
+
},
|
|
47424
|
+
"org.primer.llm": {
|
|
47425
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47426
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46571
47427
|
}
|
|
46572
47428
|
},
|
|
46573
47429
|
"alpha": 0.2,
|
|
@@ -46581,6 +47437,7 @@
|
|
|
46581
47437
|
"key": "{shadow.floating.large}",
|
|
46582
47438
|
"$value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
|
|
46583
47439
|
"$type": "shadow",
|
|
47440
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46584
47441
|
"$extensions": {
|
|
46585
47442
|
"org.primer.figma": {
|
|
46586
47443
|
"collection": "mode",
|
|
@@ -46610,6 +47467,10 @@
|
|
|
46610
47467
|
"isSource": true,
|
|
46611
47468
|
"$type": "shadow"
|
|
46612
47469
|
}
|
|
47470
|
+
},
|
|
47471
|
+
"org.primer.llm": {
|
|
47472
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47473
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46613
47474
|
}
|
|
46614
47475
|
},
|
|
46615
47476
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46634,6 +47495,7 @@
|
|
|
46634
47495
|
}
|
|
46635
47496
|
],
|
|
46636
47497
|
"$type": "shadow",
|
|
47498
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46637
47499
|
"$extensions": {
|
|
46638
47500
|
"org.primer.figma": {
|
|
46639
47501
|
"collection": "mode",
|
|
@@ -46663,6 +47525,10 @@
|
|
|
46663
47525
|
"isSource": true,
|
|
46664
47526
|
"$type": "shadow"
|
|
46665
47527
|
}
|
|
47528
|
+
},
|
|
47529
|
+
"org.primer.llm": {
|
|
47530
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47531
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46666
47532
|
}
|
|
46667
47533
|
},
|
|
46668
47534
|
"key": "{shadow.floating.large}"
|
|
@@ -46675,6 +47541,7 @@
|
|
|
46675
47541
|
"key": "{shadow.floating.legacy}",
|
|
46676
47542
|
"$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46677
47543
|
"$type": "shadow",
|
|
47544
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46678
47545
|
"$extensions": {
|
|
46679
47546
|
"org.primer.figma": {},
|
|
46680
47547
|
"org.primer.overrides": {
|
|
@@ -46701,6 +47568,10 @@
|
|
|
46701
47568
|
"isSource": true,
|
|
46702
47569
|
"$type": "shadow"
|
|
46703
47570
|
}
|
|
47571
|
+
},
|
|
47572
|
+
"org.primer.llm": {
|
|
47573
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47574
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46704
47575
|
}
|
|
46705
47576
|
},
|
|
46706
47577
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46725,6 +47596,7 @@
|
|
|
46725
47596
|
}
|
|
46726
47597
|
],
|
|
46727
47598
|
"$type": "shadow",
|
|
47599
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46728
47600
|
"$extensions": {
|
|
46729
47601
|
"org.primer.figma": {},
|
|
46730
47602
|
"org.primer.overrides": {
|
|
@@ -46751,6 +47623,10 @@
|
|
|
46751
47623
|
"isSource": true,
|
|
46752
47624
|
"$type": "shadow"
|
|
46753
47625
|
}
|
|
47626
|
+
},
|
|
47627
|
+
"org.primer.llm": {
|
|
47628
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47629
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46754
47630
|
}
|
|
46755
47631
|
},
|
|
46756
47632
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46763,6 +47639,7 @@
|
|
|
46763
47639
|
"key": "{shadow.floating.medium}",
|
|
46764
47640
|
"$value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
|
|
46765
47641
|
"$type": "shadow",
|
|
47642
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46766
47643
|
"$extensions": {
|
|
46767
47644
|
"org.primer.figma": {
|
|
46768
47645
|
"collection": "mode",
|
|
@@ -46816,6 +47693,10 @@
|
|
|
46816
47693
|
"isSource": true,
|
|
46817
47694
|
"$type": "shadow"
|
|
46818
47695
|
}
|
|
47696
|
+
},
|
|
47697
|
+
"org.primer.llm": {
|
|
47698
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47699
|
+
"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."
|
|
46819
47700
|
}
|
|
46820
47701
|
},
|
|
46821
47702
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46864,6 +47745,7 @@
|
|
|
46864
47745
|
}
|
|
46865
47746
|
],
|
|
46866
47747
|
"$type": "shadow",
|
|
47748
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46867
47749
|
"$extensions": {
|
|
46868
47750
|
"org.primer.figma": {
|
|
46869
47751
|
"collection": "mode",
|
|
@@ -46917,6 +47799,10 @@
|
|
|
46917
47799
|
"isSource": true,
|
|
46918
47800
|
"$type": "shadow"
|
|
46919
47801
|
}
|
|
47802
|
+
},
|
|
47803
|
+
"org.primer.llm": {
|
|
47804
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47805
|
+
"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."
|
|
46920
47806
|
}
|
|
46921
47807
|
},
|
|
46922
47808
|
"key": "{shadow.floating.medium}"
|
|
@@ -46929,6 +47815,7 @@
|
|
|
46929
47815
|
"key": "{shadow.floating.small}",
|
|
46930
47816
|
"$value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46931
47817
|
"$type": "shadow",
|
|
47818
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46932
47819
|
"$extensions": {
|
|
46933
47820
|
"org.primer.figma": {
|
|
46934
47821
|
"collection": "mode",
|
|
@@ -46966,6 +47853,10 @@
|
|
|
46966
47853
|
"isSource": true,
|
|
46967
47854
|
"$type": "shadow"
|
|
46968
47855
|
}
|
|
47856
|
+
},
|
|
47857
|
+
"org.primer.llm": {
|
|
47858
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47859
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46969
47860
|
}
|
|
46970
47861
|
},
|
|
46971
47862
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46998,6 +47889,7 @@
|
|
|
46998
47889
|
}
|
|
46999
47890
|
],
|
|
47000
47891
|
"$type": "shadow",
|
|
47892
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
47001
47893
|
"$extensions": {
|
|
47002
47894
|
"org.primer.figma": {
|
|
47003
47895
|
"collection": "mode",
|
|
@@ -47035,6 +47927,10 @@
|
|
|
47035
47927
|
"isSource": true,
|
|
47036
47928
|
"$type": "shadow"
|
|
47037
47929
|
}
|
|
47930
|
+
},
|
|
47931
|
+
"org.primer.llm": {
|
|
47932
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47933
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47038
47934
|
}
|
|
47039
47935
|
},
|
|
47040
47936
|
"key": "{shadow.floating.small}"
|
|
@@ -47047,6 +47943,7 @@
|
|
|
47047
47943
|
"key": "{shadow.floating.xlarge}",
|
|
47048
47944
|
"$value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
|
|
47049
47945
|
"$type": "shadow",
|
|
47946
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47050
47947
|
"$extensions": {
|
|
47051
47948
|
"org.primer.figma": {
|
|
47052
47949
|
"collection": "mode",
|
|
@@ -47076,6 +47973,10 @@
|
|
|
47076
47973
|
"isSource": true,
|
|
47077
47974
|
"$type": "shadow"
|
|
47078
47975
|
}
|
|
47976
|
+
},
|
|
47977
|
+
"org.primer.llm": {
|
|
47978
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47979
|
+
"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."
|
|
47079
47980
|
}
|
|
47080
47981
|
},
|
|
47081
47982
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47100,6 +48001,7 @@
|
|
|
47100
48001
|
}
|
|
47101
48002
|
],
|
|
47102
48003
|
"$type": "shadow",
|
|
48004
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47103
48005
|
"$extensions": {
|
|
47104
48006
|
"org.primer.figma": {
|
|
47105
48007
|
"collection": "mode",
|
|
@@ -47129,6 +48031,10 @@
|
|
|
47129
48031
|
"isSource": true,
|
|
47130
48032
|
"$type": "shadow"
|
|
47131
48033
|
}
|
|
48034
|
+
},
|
|
48035
|
+
"org.primer.llm": {
|
|
48036
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48037
|
+
"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."
|
|
47132
48038
|
}
|
|
47133
48039
|
},
|
|
47134
48040
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47141,6 +48047,7 @@
|
|
|
47141
48047
|
"key": "{shadow.inset}",
|
|
47142
48048
|
"$value": "inset 0px 1px 0px 0px #0104090a",
|
|
47143
48049
|
"$type": "shadow",
|
|
48050
|
+
"$description": "Inset shadow for recessed elements",
|
|
47144
48051
|
"$extensions": {
|
|
47145
48052
|
"org.primer.figma": {
|
|
47146
48053
|
"collection": "mode",
|
|
@@ -47161,6 +48068,10 @@
|
|
|
47161
48068
|
"isSource": true,
|
|
47162
48069
|
"$type": "shadow"
|
|
47163
48070
|
}
|
|
48071
|
+
},
|
|
48072
|
+
"org.primer.llm": {
|
|
48073
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48074
|
+
"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."
|
|
47164
48075
|
}
|
|
47165
48076
|
},
|
|
47166
48077
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47176,6 +48087,7 @@
|
|
|
47176
48087
|
"inset": true
|
|
47177
48088
|
},
|
|
47178
48089
|
"$type": "shadow",
|
|
48090
|
+
"$description": "Inset shadow for recessed elements",
|
|
47179
48091
|
"$extensions": {
|
|
47180
48092
|
"org.primer.figma": {
|
|
47181
48093
|
"collection": "mode",
|
|
@@ -47196,6 +48108,10 @@
|
|
|
47196
48108
|
"isSource": true,
|
|
47197
48109
|
"$type": "shadow"
|
|
47198
48110
|
}
|
|
48111
|
+
},
|
|
48112
|
+
"org.primer.llm": {
|
|
48113
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48114
|
+
"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."
|
|
47199
48115
|
}
|
|
47200
48116
|
},
|
|
47201
48117
|
"key": "{shadow.inset}"
|
|
@@ -47208,6 +48124,7 @@
|
|
|
47208
48124
|
"key": "{shadow.resting.medium}",
|
|
47209
48125
|
"$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
47210
48126
|
"$type": "shadow",
|
|
48127
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47211
48128
|
"$extensions": {
|
|
47212
48129
|
"org.primer.figma": {
|
|
47213
48130
|
"collection": "mode",
|
|
@@ -47237,6 +48154,10 @@
|
|
|
47237
48154
|
"isSource": true,
|
|
47238
48155
|
"$type": "shadow"
|
|
47239
48156
|
}
|
|
48157
|
+
},
|
|
48158
|
+
"org.primer.llm": {
|
|
48159
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48160
|
+
"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."
|
|
47240
48161
|
}
|
|
47241
48162
|
},
|
|
47242
48163
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47261,6 +48182,7 @@
|
|
|
47261
48182
|
}
|
|
47262
48183
|
],
|
|
47263
48184
|
"$type": "shadow",
|
|
48185
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47264
48186
|
"$extensions": {
|
|
47265
48187
|
"org.primer.figma": {
|
|
47266
48188
|
"collection": "mode",
|
|
@@ -47290,6 +48212,10 @@
|
|
|
47290
48212
|
"isSource": true,
|
|
47291
48213
|
"$type": "shadow"
|
|
47292
48214
|
}
|
|
48215
|
+
},
|
|
48216
|
+
"org.primer.llm": {
|
|
48217
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48218
|
+
"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."
|
|
47293
48219
|
}
|
|
47294
48220
|
},
|
|
47295
48221
|
"key": "{shadow.resting.medium}"
|
|
@@ -47300,8 +48226,9 @@
|
|
|
47300
48226
|
},
|
|
47301
48227
|
"shadow-resting-small": {
|
|
47302
48228
|
"key": "{shadow.resting.small}",
|
|
47303
|
-
"$value": "0px 1px 1px 0px #
|
|
48229
|
+
"$value": "0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908",
|
|
47304
48230
|
"$type": "shadow",
|
|
48231
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47305
48232
|
"$extensions": {
|
|
47306
48233
|
"org.primer.figma": {
|
|
47307
48234
|
"collection": "mode",
|
|
@@ -47333,6 +48260,10 @@
|
|
|
47333
48260
|
"isSource": true,
|
|
47334
48261
|
"$type": "shadow"
|
|
47335
48262
|
}
|
|
48263
|
+
},
|
|
48264
|
+
"org.primer.llm": {
|
|
48265
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48266
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47336
48267
|
}
|
|
47337
48268
|
},
|
|
47338
48269
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47341,7 +48272,7 @@
|
|
|
47341
48272
|
"$value": [
|
|
47342
48273
|
{
|
|
47343
48274
|
"color": "{base.color.neutral.13}",
|
|
47344
|
-
"alpha": 0.
|
|
48275
|
+
"alpha": 0.04,
|
|
47345
48276
|
"offsetX": "0px",
|
|
47346
48277
|
"offsetY": "1px",
|
|
47347
48278
|
"blur": "1px",
|
|
@@ -47350,15 +48281,16 @@
|
|
|
47350
48281
|
},
|
|
47351
48282
|
{
|
|
47352
48283
|
"color": "{base.color.neutral.13}",
|
|
47353
|
-
"alpha": 0.
|
|
48284
|
+
"alpha": 0.03,
|
|
47354
48285
|
"offsetX": "0px",
|
|
47355
48286
|
"offsetY": "1px",
|
|
47356
|
-
"blur": "
|
|
48287
|
+
"blur": "2px",
|
|
47357
48288
|
"spread": "0px",
|
|
47358
48289
|
"inset": false
|
|
47359
48290
|
}
|
|
47360
48291
|
],
|
|
47361
48292
|
"$type": "shadow",
|
|
48293
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47362
48294
|
"$extensions": {
|
|
47363
48295
|
"org.primer.figma": {
|
|
47364
48296
|
"collection": "mode",
|
|
@@ -47390,6 +48322,10 @@
|
|
|
47390
48322
|
"isSource": true,
|
|
47391
48323
|
"$type": "shadow"
|
|
47392
48324
|
}
|
|
48325
|
+
},
|
|
48326
|
+
"org.primer.llm": {
|
|
48327
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48328
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47393
48329
|
}
|
|
47394
48330
|
},
|
|
47395
48331
|
"key": "{shadow.resting.small}"
|
|
@@ -47400,8 +48336,9 @@
|
|
|
47400
48336
|
},
|
|
47401
48337
|
"shadow-resting-xsmall": {
|
|
47402
48338
|
"key": "{shadow.resting.xsmall}",
|
|
47403
|
-
"$value": "0px 1px 1px 0px #
|
|
48339
|
+
"$value": "0px 1px 1px 0px #0104090d",
|
|
47404
48340
|
"$type": "shadow",
|
|
48341
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47405
48342
|
"$extensions": {
|
|
47406
48343
|
"org.primer.figma": {
|
|
47407
48344
|
"collection": "mode",
|
|
@@ -47422,6 +48359,10 @@
|
|
|
47422
48359
|
"isSource": true,
|
|
47423
48360
|
"$type": "shadow"
|
|
47424
48361
|
}
|
|
48362
|
+
},
|
|
48363
|
+
"org.primer.llm": {
|
|
48364
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48365
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47425
48366
|
}
|
|
47426
48367
|
},
|
|
47427
48368
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47429,7 +48370,7 @@
|
|
|
47429
48370
|
"original": {
|
|
47430
48371
|
"$value": {
|
|
47431
48372
|
"color": "{base.color.neutral.13}",
|
|
47432
|
-
"alpha": 0.
|
|
48373
|
+
"alpha": 0.05,
|
|
47433
48374
|
"offsetX": "0px",
|
|
47434
48375
|
"offsetY": "1px",
|
|
47435
48376
|
"blur": "1px",
|
|
@@ -47437,6 +48378,7 @@
|
|
|
47437
48378
|
"inset": false
|
|
47438
48379
|
},
|
|
47439
48380
|
"$type": "shadow",
|
|
48381
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47440
48382
|
"$extensions": {
|
|
47441
48383
|
"org.primer.figma": {
|
|
47442
48384
|
"collection": "mode",
|
|
@@ -47457,6 +48399,10 @@
|
|
|
47457
48399
|
"isSource": true,
|
|
47458
48400
|
"$type": "shadow"
|
|
47459
48401
|
}
|
|
48402
|
+
},
|
|
48403
|
+
"org.primer.llm": {
|
|
48404
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48405
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47460
48406
|
}
|
|
47461
48407
|
},
|
|
47462
48408
|
"key": "{shadow.resting.xsmall}"
|