@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": "#a0111f",
|
|
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.danger.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": "#fff0ee",
|
|
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.danger.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": "#a0111f",
|
|
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.red.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": "#fff0ee",
|
|
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.red.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": "#055d20",
|
|
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": "{bgColor.success.emphasis}",
|
|
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": "#d2fedb",
|
|
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": "{bgColor.success.muted}",
|
|
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": "#055d20",
|
|
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.green.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": "#d2fedb",
|
|
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.green.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 #a0111f",
|
|
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 #ee5a5d",
|
|
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 #a0111f",
|
|
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 #ee5a5d",
|
|
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 #055d20",
|
|
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 #26a148",
|
|
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 #dc6d1a",
|
|
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 #055d20",
|
|
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 #26a148",
|
|
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": "#a0111f",
|
|
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.danger.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": "#ee5a5d",
|
|
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",
|
|
@@ -3139,6 +3524,7 @@
|
|
|
3139
3524
|
"original": {
|
|
3140
3525
|
"$value": "{borderColor.danger.muted}",
|
|
3141
3526
|
"$type": "color",
|
|
3527
|
+
"$description": "Subtle border for closed state indicators",
|
|
3142
3528
|
"$extensions": {
|
|
3143
3529
|
"org.primer.figma": {
|
|
3144
3530
|
"collection": "mode",
|
|
@@ -3205,6 +3591,10 @@
|
|
|
3205
3591
|
"isSource": true,
|
|
3206
3592
|
"$type": "color"
|
|
3207
3593
|
}
|
|
3594
|
+
},
|
|
3595
|
+
"org.primer.llm": {
|
|
3596
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3597
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3208
3598
|
}
|
|
3209
3599
|
},
|
|
3210
3600
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3217,6 +3607,7 @@
|
|
|
3217
3607
|
"key": "{borderColor.danger.emphasis}",
|
|
3218
3608
|
"$value": "#a0111f",
|
|
3219
3609
|
"$type": "color",
|
|
3610
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3220
3611
|
"$extensions": {
|
|
3221
3612
|
"org.primer.figma": {
|
|
3222
3613
|
"collection": "mode",
|
|
@@ -3252,6 +3643,10 @@
|
|
|
3252
3643
|
"$type": "color"
|
|
3253
3644
|
},
|
|
3254
3645
|
"dark-dimmed-high-contrast": "#ff8e8a"
|
|
3646
|
+
},
|
|
3647
|
+
"org.primer.llm": {
|
|
3648
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3649
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3255
3650
|
}
|
|
3256
3651
|
},
|
|
3257
3652
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3259,6 +3654,7 @@
|
|
|
3259
3654
|
"original": {
|
|
3260
3655
|
"$value": "{base.color.red.5}",
|
|
3261
3656
|
"$type": "color",
|
|
3657
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3262
3658
|
"$extensions": {
|
|
3263
3659
|
"org.primer.figma": {
|
|
3264
3660
|
"collection": "mode",
|
|
@@ -3294,6 +3690,10 @@
|
|
|
3294
3690
|
"$type": "color"
|
|
3295
3691
|
},
|
|
3296
3692
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3693
|
+
},
|
|
3694
|
+
"org.primer.llm": {
|
|
3695
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3696
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3297
3697
|
}
|
|
3298
3698
|
},
|
|
3299
3699
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3306,6 +3706,7 @@
|
|
|
3306
3706
|
"key": "{borderColor.danger.muted}",
|
|
3307
3707
|
"$value": "#ee5a5d",
|
|
3308
3708
|
"$type": "color",
|
|
3709
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3309
3710
|
"$extensions": {
|
|
3310
3711
|
"org.primer.figma": {
|
|
3311
3712
|
"collection": "mode",
|
|
@@ -3379,6 +3780,10 @@
|
|
|
3379
3780
|
"isSource": true,
|
|
3380
3781
|
"$type": "color"
|
|
3381
3782
|
}
|
|
3783
|
+
},
|
|
3784
|
+
"org.primer.llm": {
|
|
3785
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3786
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3382
3787
|
}
|
|
3383
3788
|
},
|
|
3384
3789
|
"alpha": 1,
|
|
@@ -3387,6 +3792,7 @@
|
|
|
3387
3792
|
"original": {
|
|
3388
3793
|
"$value": "{base.color.red.3}",
|
|
3389
3794
|
"$type": "color",
|
|
3795
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3390
3796
|
"$extensions": {
|
|
3391
3797
|
"org.primer.figma": {
|
|
3392
3798
|
"collection": "mode",
|
|
@@ -3460,6 +3866,10 @@
|
|
|
3460
3866
|
"isSource": true,
|
|
3461
3867
|
"$type": "color"
|
|
3462
3868
|
}
|
|
3869
|
+
},
|
|
3870
|
+
"org.primer.llm": {
|
|
3871
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3872
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3463
3873
|
}
|
|
3464
3874
|
},
|
|
3465
3875
|
"alpha": 1,
|
|
@@ -3473,6 +3883,7 @@
|
|
|
3473
3883
|
"key": "{borderColor.default}",
|
|
3474
3884
|
"$value": "#454c54",
|
|
3475
3885
|
"$type": "color",
|
|
3886
|
+
"$description": "Default border color for most UI elements",
|
|
3476
3887
|
"$extensions": {
|
|
3477
3888
|
"org.primer.overrides": {
|
|
3478
3889
|
"dark": "#c8d1da",
|
|
@@ -3492,6 +3903,10 @@
|
|
|
3492
3903
|
"codeSyntax": {
|
|
3493
3904
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3494
3905
|
}
|
|
3906
|
+
},
|
|
3907
|
+
"org.primer.llm": {
|
|
3908
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3909
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3495
3910
|
}
|
|
3496
3911
|
},
|
|
3497
3912
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3499,6 +3914,7 @@
|
|
|
3499
3914
|
"original": {
|
|
3500
3915
|
"$value": "{base.color.neutral.10}",
|
|
3501
3916
|
"$type": "color",
|
|
3917
|
+
"$description": "Default border color for most UI elements",
|
|
3502
3918
|
"$extensions": {
|
|
3503
3919
|
"org.primer.overrides": {
|
|
3504
3920
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3518,6 +3934,10 @@
|
|
|
3518
3934
|
"codeSyntax": {
|
|
3519
3935
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3520
3936
|
}
|
|
3937
|
+
},
|
|
3938
|
+
"org.primer.llm": {
|
|
3939
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3940
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3521
3941
|
}
|
|
3522
3942
|
},
|
|
3523
3943
|
"key": "{borderColor.default}"
|
|
@@ -3530,6 +3950,7 @@
|
|
|
3530
3950
|
"key": "{borderColor.disabled}",
|
|
3531
3951
|
"$value": "#59636e1f",
|
|
3532
3952
|
"$type": "color",
|
|
3953
|
+
"$description": "Border color for disabled interactive elements",
|
|
3533
3954
|
"$extensions": {
|
|
3534
3955
|
"org.primer.figma": {
|
|
3535
3956
|
"collection": "mode",
|
|
@@ -3572,6 +3993,10 @@
|
|
|
3572
3993
|
"isSource": true,
|
|
3573
3994
|
"$type": "color"
|
|
3574
3995
|
}
|
|
3996
|
+
},
|
|
3997
|
+
"org.primer.llm": {
|
|
3998
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
3999
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3575
4000
|
}
|
|
3576
4001
|
},
|
|
3577
4002
|
"alpha": 0.12,
|
|
@@ -3580,6 +4005,7 @@
|
|
|
3580
4005
|
"original": {
|
|
3581
4006
|
"$value": "{base.color.neutral.9}",
|
|
3582
4007
|
"$type": "color",
|
|
4008
|
+
"$description": "Border color for disabled interactive elements",
|
|
3583
4009
|
"$extensions": {
|
|
3584
4010
|
"org.primer.figma": {
|
|
3585
4011
|
"collection": "mode",
|
|
@@ -3622,6 +4048,10 @@
|
|
|
3622
4048
|
"isSource": true,
|
|
3623
4049
|
"$type": "color"
|
|
3624
4050
|
}
|
|
4051
|
+
},
|
|
4052
|
+
"org.primer.llm": {
|
|
4053
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4054
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3625
4055
|
}
|
|
3626
4056
|
},
|
|
3627
4057
|
"alpha": 0.12,
|
|
@@ -3635,6 +4065,7 @@
|
|
|
3635
4065
|
"key": "{borderColor.done.emphasis}",
|
|
3636
4066
|
"$value": "#622cbc",
|
|
3637
4067
|
"$type": "color",
|
|
4068
|
+
"$description": "Strong border for completed/done state badges",
|
|
3638
4069
|
"$extensions": {
|
|
3639
4070
|
"org.primer.figma": {
|
|
3640
4071
|
"collection": "mode",
|
|
@@ -3646,6 +4077,10 @@
|
|
|
3646
4077
|
},
|
|
3647
4078
|
"org.primer.overrides": {
|
|
3648
4079
|
"dark-dimmed-high-contrast": "#c49bff"
|
|
4080
|
+
},
|
|
4081
|
+
"org.primer.llm": {
|
|
4082
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4083
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3649
4084
|
}
|
|
3650
4085
|
},
|
|
3651
4086
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3653,6 +4088,7 @@
|
|
|
3653
4088
|
"original": {
|
|
3654
4089
|
"$value": "{base.color.purple.5}",
|
|
3655
4090
|
"$type": "color",
|
|
4091
|
+
"$description": "Strong border for completed/done state badges",
|
|
3656
4092
|
"$extensions": {
|
|
3657
4093
|
"org.primer.figma": {
|
|
3658
4094
|
"collection": "mode",
|
|
@@ -3664,6 +4100,10 @@
|
|
|
3664
4100
|
},
|
|
3665
4101
|
"org.primer.overrides": {
|
|
3666
4102
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4103
|
+
},
|
|
4104
|
+
"org.primer.llm": {
|
|
4105
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4106
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3667
4107
|
}
|
|
3668
4108
|
},
|
|
3669
4109
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3676,6 +4116,7 @@
|
|
|
3676
4116
|
"key": "{borderColor.done.muted}",
|
|
3677
4117
|
"$value": "#a371f7",
|
|
3678
4118
|
"$type": "color",
|
|
4119
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3679
4120
|
"$extensions": {
|
|
3680
4121
|
"org.primer.figma": {
|
|
3681
4122
|
"collection": "mode",
|
|
@@ -3736,6 +4177,10 @@
|
|
|
3736
4177
|
"isSource": true,
|
|
3737
4178
|
"$type": "color"
|
|
3738
4179
|
}
|
|
4180
|
+
},
|
|
4181
|
+
"org.primer.llm": {
|
|
4182
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4183
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3739
4184
|
}
|
|
3740
4185
|
},
|
|
3741
4186
|
"alpha": 1,
|
|
@@ -3744,6 +4189,7 @@
|
|
|
3744
4189
|
"original": {
|
|
3745
4190
|
"$value": "{base.color.purple.3}",
|
|
3746
4191
|
"$type": "color",
|
|
4192
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3747
4193
|
"$extensions": {
|
|
3748
4194
|
"org.primer.figma": {
|
|
3749
4195
|
"collection": "mode",
|
|
@@ -3804,6 +4250,10 @@
|
|
|
3804
4250
|
"isSource": true,
|
|
3805
4251
|
"$type": "color"
|
|
3806
4252
|
}
|
|
4253
|
+
},
|
|
4254
|
+
"org.primer.llm": {
|
|
4255
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4256
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3807
4257
|
}
|
|
3808
4258
|
},
|
|
3809
4259
|
"alpha": 1,
|
|
@@ -3817,6 +4267,7 @@
|
|
|
3817
4267
|
"key": "{borderColor.draft.emphasis}",
|
|
3818
4268
|
"$value": "#59636e",
|
|
3819
4269
|
"$type": "color",
|
|
4270
|
+
"$description": "Strong border for draft state badges",
|
|
3820
4271
|
"$extensions": {
|
|
3821
4272
|
"org.primer.figma": {
|
|
3822
4273
|
"collection": "mode",
|
|
@@ -3825,6 +4276,10 @@
|
|
|
3825
4276
|
"codeSyntax": {
|
|
3826
4277
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3827
4278
|
}
|
|
4279
|
+
},
|
|
4280
|
+
"org.primer.llm": {
|
|
4281
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4282
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3828
4283
|
}
|
|
3829
4284
|
},
|
|
3830
4285
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3832,6 +4287,7 @@
|
|
|
3832
4287
|
"original": {
|
|
3833
4288
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3834
4289
|
"$type": "color",
|
|
4290
|
+
"$description": "Strong border for draft state badges",
|
|
3835
4291
|
"$extensions": {
|
|
3836
4292
|
"org.primer.figma": {
|
|
3837
4293
|
"collection": "mode",
|
|
@@ -3840,6 +4296,10 @@
|
|
|
3840
4296
|
"codeSyntax": {
|
|
3841
4297
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3842
4298
|
}
|
|
4299
|
+
},
|
|
4300
|
+
"org.primer.llm": {
|
|
4301
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4302
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3843
4303
|
}
|
|
3844
4304
|
},
|
|
3845
4305
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3852,6 +4312,7 @@
|
|
|
3852
4312
|
"key": "{borderColor.draft.muted}",
|
|
3853
4313
|
"$value": "#454c54",
|
|
3854
4314
|
"$type": "color",
|
|
4315
|
+
"$description": "Subtle border for draft state indicators",
|
|
3855
4316
|
"$extensions": {
|
|
3856
4317
|
"org.primer.figma": {
|
|
3857
4318
|
"collection": "mode",
|
|
@@ -3918,6 +4379,10 @@
|
|
|
3918
4379
|
"isSource": true,
|
|
3919
4380
|
"$type": "color"
|
|
3920
4381
|
}
|
|
4382
|
+
},
|
|
4383
|
+
"org.primer.llm": {
|
|
4384
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4385
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3921
4386
|
}
|
|
3922
4387
|
},
|
|
3923
4388
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3925,6 +4390,7 @@
|
|
|
3925
4390
|
"original": {
|
|
3926
4391
|
"$value": "{borderColor.neutral.muted}",
|
|
3927
4392
|
"$type": "color",
|
|
4393
|
+
"$description": "Subtle border for draft state indicators",
|
|
3928
4394
|
"$extensions": {
|
|
3929
4395
|
"org.primer.figma": {
|
|
3930
4396
|
"collection": "mode",
|
|
@@ -3991,6 +4457,10 @@
|
|
|
3991
4457
|
"isSource": true,
|
|
3992
4458
|
"$type": "color"
|
|
3993
4459
|
}
|
|
4460
|
+
},
|
|
4461
|
+
"org.primer.llm": {
|
|
4462
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4463
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3994
4464
|
}
|
|
3995
4465
|
},
|
|
3996
4466
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4003,6 +4473,7 @@
|
|
|
4003
4473
|
"key": "{borderColor.emphasis}",
|
|
4004
4474
|
"$value": "#454c54",
|
|
4005
4475
|
"$type": "color",
|
|
4476
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4006
4477
|
"$extensions": {
|
|
4007
4478
|
"org.primer.figma": {
|
|
4008
4479
|
"collection": "mode",
|
|
@@ -4017,6 +4488,10 @@
|
|
|
4017
4488
|
"dark-dimmed-high-contrast": "#454c54",
|
|
4018
4489
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
4019
4490
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
4491
|
+
},
|
|
4492
|
+
"org.primer.llm": {
|
|
4493
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4494
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4020
4495
|
}
|
|
4021
4496
|
},
|
|
4022
4497
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4024,6 +4499,7 @@
|
|
|
4024
4499
|
"original": {
|
|
4025
4500
|
"$value": "{borderColor.default}",
|
|
4026
4501
|
"$type": "color",
|
|
4502
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4027
4503
|
"$extensions": {
|
|
4028
4504
|
"org.primer.figma": {
|
|
4029
4505
|
"collection": "mode",
|
|
@@ -4038,6 +4514,10 @@
|
|
|
4038
4514
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4039
4515
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4040
4516
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4517
|
+
},
|
|
4518
|
+
"org.primer.llm": {
|
|
4519
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4520
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4041
4521
|
}
|
|
4042
4522
|
},
|
|
4043
4523
|
"key": "{borderColor.emphasis}"
|
|
@@ -4050,6 +4530,7 @@
|
|
|
4050
4530
|
"key": "{borderColor.muted}",
|
|
4051
4531
|
"$value": "#454c54",
|
|
4052
4532
|
"$type": "color",
|
|
4533
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4053
4534
|
"$extensions": {
|
|
4054
4535
|
"org.primer.figma": {
|
|
4055
4536
|
"collection": "mode",
|
|
@@ -4116,6 +4597,10 @@
|
|
|
4116
4597
|
"isSource": true,
|
|
4117
4598
|
"$type": "color"
|
|
4118
4599
|
}
|
|
4600
|
+
},
|
|
4601
|
+
"org.primer.llm": {
|
|
4602
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4603
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4119
4604
|
}
|
|
4120
4605
|
},
|
|
4121
4606
|
"alpha": 1,
|
|
@@ -4124,6 +4609,7 @@
|
|
|
4124
4609
|
"original": {
|
|
4125
4610
|
"$value": "{borderColor.default}",
|
|
4126
4611
|
"$type": "color",
|
|
4612
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4127
4613
|
"$extensions": {
|
|
4128
4614
|
"org.primer.figma": {
|
|
4129
4615
|
"collection": "mode",
|
|
@@ -4190,6 +4676,10 @@
|
|
|
4190
4676
|
"isSource": true,
|
|
4191
4677
|
"$type": "color"
|
|
4192
4678
|
}
|
|
4679
|
+
},
|
|
4680
|
+
"org.primer.llm": {
|
|
4681
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4682
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4193
4683
|
}
|
|
4194
4684
|
},
|
|
4195
4685
|
"alpha": 1,
|
|
@@ -4203,6 +4693,7 @@
|
|
|
4203
4693
|
"key": "{borderColor.neutral.emphasis}",
|
|
4204
4694
|
"$value": "#59636e",
|
|
4205
4695
|
"$type": "color",
|
|
4696
|
+
"$description": "Strong neutral semantic border",
|
|
4206
4697
|
"$extensions": {
|
|
4207
4698
|
"org.primer.figma": {
|
|
4208
4699
|
"collection": "mode",
|
|
@@ -4211,6 +4702,10 @@
|
|
|
4211
4702
|
},
|
|
4212
4703
|
"org.primer.overrides": {
|
|
4213
4704
|
"dark": "#454c54"
|
|
4705
|
+
},
|
|
4706
|
+
"org.primer.llm": {
|
|
4707
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4708
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4214
4709
|
}
|
|
4215
4710
|
},
|
|
4216
4711
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4218,6 +4713,7 @@
|
|
|
4218
4713
|
"original": {
|
|
4219
4714
|
"$value": "{base.color.neutral.9}",
|
|
4220
4715
|
"$type": "color",
|
|
4716
|
+
"$description": "Strong neutral semantic border",
|
|
4221
4717
|
"$extensions": {
|
|
4222
4718
|
"org.primer.figma": {
|
|
4223
4719
|
"collection": "mode",
|
|
@@ -4226,6 +4722,10 @@
|
|
|
4226
4722
|
},
|
|
4227
4723
|
"org.primer.overrides": {
|
|
4228
4724
|
"dark": "{borderColor.emphasis}"
|
|
4725
|
+
},
|
|
4726
|
+
"org.primer.llm": {
|
|
4727
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4728
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4229
4729
|
}
|
|
4230
4730
|
},
|
|
4231
4731
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4238,6 +4738,7 @@
|
|
|
4238
4738
|
"key": "{borderColor.neutral.muted}",
|
|
4239
4739
|
"$value": "#454c54",
|
|
4240
4740
|
"$type": "color",
|
|
4741
|
+
"$description": "Subtle neutral semantic border",
|
|
4241
4742
|
"$extensions": {
|
|
4242
4743
|
"org.primer.figma": {
|
|
4243
4744
|
"collection": "mode",
|
|
@@ -4259,6 +4760,10 @@
|
|
|
4259
4760
|
"isSource": true,
|
|
4260
4761
|
"$type": "color"
|
|
4261
4762
|
}
|
|
4763
|
+
},
|
|
4764
|
+
"org.primer.llm": {
|
|
4765
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4766
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4262
4767
|
}
|
|
4263
4768
|
},
|
|
4264
4769
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4266,6 +4771,7 @@
|
|
|
4266
4771
|
"original": {
|
|
4267
4772
|
"$value": "{borderColor.muted}",
|
|
4268
4773
|
"$type": "color",
|
|
4774
|
+
"$description": "Subtle neutral semantic border",
|
|
4269
4775
|
"$extensions": {
|
|
4270
4776
|
"org.primer.figma": {
|
|
4271
4777
|
"collection": "mode",
|
|
@@ -4287,6 +4793,10 @@
|
|
|
4287
4793
|
"isSource": true,
|
|
4288
4794
|
"$type": "color"
|
|
4289
4795
|
}
|
|
4796
|
+
},
|
|
4797
|
+
"org.primer.llm": {
|
|
4798
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4799
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4290
4800
|
}
|
|
4291
4801
|
},
|
|
4292
4802
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4299,6 +4809,7 @@
|
|
|
4299
4809
|
"key": "{borderColor.open.emphasis}",
|
|
4300
4810
|
"$value": "#055d20",
|
|
4301
4811
|
"$type": "color",
|
|
4812
|
+
"$description": "Strong border for open state badges",
|
|
4302
4813
|
"$extensions": {
|
|
4303
4814
|
"org.primer.figma": {
|
|
4304
4815
|
"collection": "mode",
|
|
@@ -4317,6 +4828,10 @@
|
|
|
4317
4828
|
"dark-protanopia-deuteranopia-high-contrast": "#873800",
|
|
4318
4829
|
"light-protanopia-deuteranopia": "#873800",
|
|
4319
4830
|
"light-protanopia-deuteranopia-high-contrast": "#873800"
|
|
4831
|
+
},
|
|
4832
|
+
"org.primer.llm": {
|
|
4833
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4834
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4320
4835
|
}
|
|
4321
4836
|
},
|
|
4322
4837
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4324,6 +4839,7 @@
|
|
|
4324
4839
|
"original": {
|
|
4325
4840
|
"$value": "{borderColor.success.emphasis}",
|
|
4326
4841
|
"$type": "color",
|
|
4842
|
+
"$description": "Strong border for open state badges",
|
|
4327
4843
|
"$extensions": {
|
|
4328
4844
|
"org.primer.figma": {
|
|
4329
4845
|
"collection": "mode",
|
|
@@ -4342,6 +4858,10 @@
|
|
|
4342
4858
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4343
4859
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4344
4860
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4861
|
+
},
|
|
4862
|
+
"org.primer.llm": {
|
|
4863
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4864
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4345
4865
|
}
|
|
4346
4866
|
},
|
|
4347
4867
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4354,6 +4874,7 @@
|
|
|
4354
4874
|
"key": "{borderColor.open.muted}",
|
|
4355
4875
|
"$value": "#26a148",
|
|
4356
4876
|
"$type": "color",
|
|
4877
|
+
"$description": "Subtle border for open state indicators",
|
|
4357
4878
|
"$extensions": {
|
|
4358
4879
|
"org.primer.figma": {
|
|
4359
4880
|
"collection": "mode",
|
|
@@ -4420,6 +4941,10 @@
|
|
|
4420
4941
|
"isSource": true,
|
|
4421
4942
|
"$type": "color"
|
|
4422
4943
|
}
|
|
4944
|
+
},
|
|
4945
|
+
"org.primer.llm": {
|
|
4946
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4947
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4423
4948
|
}
|
|
4424
4949
|
},
|
|
4425
4950
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4427,6 +4952,7 @@
|
|
|
4427
4952
|
"original": {
|
|
4428
4953
|
"$value": "{borderColor.success.muted}",
|
|
4429
4954
|
"$type": "color",
|
|
4955
|
+
"$description": "Subtle border for open state indicators",
|
|
4430
4956
|
"$extensions": {
|
|
4431
4957
|
"org.primer.figma": {
|
|
4432
4958
|
"collection": "mode",
|
|
@@ -4493,6 +5019,10 @@
|
|
|
4493
5019
|
"isSource": true,
|
|
4494
5020
|
"$type": "color"
|
|
4495
5021
|
}
|
|
5022
|
+
},
|
|
5023
|
+
"org.primer.llm": {
|
|
5024
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5025
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4496
5026
|
}
|
|
4497
5027
|
},
|
|
4498
5028
|
"key": "{borderColor.open.muted}"
|
|
@@ -4505,6 +5035,7 @@
|
|
|
4505
5035
|
"key": "{borderColor.severe.emphasis}",
|
|
4506
5036
|
"$value": "#873800",
|
|
4507
5037
|
"$type": "color",
|
|
5038
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4508
5039
|
"$extensions": {
|
|
4509
5040
|
"org.primer.figma": {
|
|
4510
5041
|
"collection": "mode",
|
|
@@ -4519,6 +5050,10 @@
|
|
|
4519
5050
|
"light-tritanopia": "#a0111f",
|
|
4520
5051
|
"light-tritanopia-high-contrast": "#a0111f",
|
|
4521
5052
|
"dark-dimmed-high-contrast": "#f99636"
|
|
5053
|
+
},
|
|
5054
|
+
"org.primer.llm": {
|
|
5055
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5056
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4522
5057
|
}
|
|
4523
5058
|
},
|
|
4524
5059
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4526,6 +5061,7 @@
|
|
|
4526
5061
|
"original": {
|
|
4527
5062
|
"$value": "{base.color.orange.5}",
|
|
4528
5063
|
"$type": "color",
|
|
5064
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4529
5065
|
"$extensions": {
|
|
4530
5066
|
"org.primer.figma": {
|
|
4531
5067
|
"collection": "mode",
|
|
@@ -4540,6 +5076,10 @@
|
|
|
4540
5076
|
"light-tritanopia": "{base.color.red.5}",
|
|
4541
5077
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4542
5078
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5079
|
+
},
|
|
5080
|
+
"org.primer.llm": {
|
|
5081
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5082
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4543
5083
|
}
|
|
4544
5084
|
},
|
|
4545
5085
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4552,6 +5092,7 @@
|
|
|
4552
5092
|
"key": "{borderColor.severe.muted}",
|
|
4553
5093
|
"$value": "#dc6d1a",
|
|
4554
5094
|
"$type": "color",
|
|
5095
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4555
5096
|
"$extensions": {
|
|
4556
5097
|
"org.primer.figma": {
|
|
4557
5098
|
"collection": "mode",
|
|
@@ -4607,6 +5148,10 @@
|
|
|
4607
5148
|
"isSource": true,
|
|
4608
5149
|
"$type": "color"
|
|
4609
5150
|
}
|
|
5151
|
+
},
|
|
5152
|
+
"org.primer.llm": {
|
|
5153
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5154
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4610
5155
|
}
|
|
4611
5156
|
},
|
|
4612
5157
|
"alpha": 1,
|
|
@@ -4615,6 +5160,7 @@
|
|
|
4615
5160
|
"original": {
|
|
4616
5161
|
"$value": "{base.color.orange.3}",
|
|
4617
5162
|
"$type": "color",
|
|
5163
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4618
5164
|
"$extensions": {
|
|
4619
5165
|
"org.primer.figma": {
|
|
4620
5166
|
"collection": "mode",
|
|
@@ -4670,6 +5216,10 @@
|
|
|
4670
5216
|
"isSource": true,
|
|
4671
5217
|
"$type": "color"
|
|
4672
5218
|
}
|
|
5219
|
+
},
|
|
5220
|
+
"org.primer.llm": {
|
|
5221
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5222
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4673
5223
|
}
|
|
4674
5224
|
},
|
|
4675
5225
|
"alpha": 1,
|
|
@@ -4683,6 +5233,7 @@
|
|
|
4683
5233
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4684
5234
|
"$value": "#971368",
|
|
4685
5235
|
"$type": "color",
|
|
5236
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4686
5237
|
"$extensions": {
|
|
4687
5238
|
"org.primer.figma": {
|
|
4688
5239
|
"collection": "mode",
|
|
@@ -4694,6 +5245,10 @@
|
|
|
4694
5245
|
},
|
|
4695
5246
|
"org.primer.overrides": {
|
|
4696
5247
|
"dark-dimmed-high-contrast": "#ed4baf"
|
|
5248
|
+
},
|
|
5249
|
+
"org.primer.llm": {
|
|
5250
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5251
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4697
5252
|
}
|
|
4698
5253
|
},
|
|
4699
5254
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4701,6 +5256,7 @@
|
|
|
4701
5256
|
"original": {
|
|
4702
5257
|
"$value": "{base.color.pink.5}",
|
|
4703
5258
|
"$type": "color",
|
|
5259
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4704
5260
|
"$extensions": {
|
|
4705
5261
|
"org.primer.figma": {
|
|
4706
5262
|
"collection": "mode",
|
|
@@ -4712,6 +5268,10 @@
|
|
|
4712
5268
|
},
|
|
4713
5269
|
"org.primer.overrides": {
|
|
4714
5270
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5271
|
+
},
|
|
5272
|
+
"org.primer.llm": {
|
|
5273
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5274
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4715
5275
|
}
|
|
4716
5276
|
},
|
|
4717
5277
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4724,6 +5284,7 @@
|
|
|
4724
5284
|
"key": "{borderColor.sponsors.muted}",
|
|
4725
5285
|
"$value": "#ed4baf",
|
|
4726
5286
|
"$type": "color",
|
|
5287
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4727
5288
|
"$extensions": {
|
|
4728
5289
|
"org.primer.figma": {
|
|
4729
5290
|
"collection": "mode",
|
|
@@ -4784,6 +5345,10 @@
|
|
|
4784
5345
|
"isSource": true,
|
|
4785
5346
|
"$type": "color"
|
|
4786
5347
|
}
|
|
5348
|
+
},
|
|
5349
|
+
"org.primer.llm": {
|
|
5350
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5351
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4787
5352
|
}
|
|
4788
5353
|
},
|
|
4789
5354
|
"alpha": 1,
|
|
@@ -4792,6 +5357,7 @@
|
|
|
4792
5357
|
"original": {
|
|
4793
5358
|
"$value": "{base.color.pink.3}",
|
|
4794
5359
|
"$type": "color",
|
|
5360
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4795
5361
|
"$extensions": {
|
|
4796
5362
|
"org.primer.figma": {
|
|
4797
5363
|
"collection": "mode",
|
|
@@ -4852,6 +5418,10 @@
|
|
|
4852
5418
|
"isSource": true,
|
|
4853
5419
|
"$type": "color"
|
|
4854
5420
|
}
|
|
5421
|
+
},
|
|
5422
|
+
"org.primer.llm": {
|
|
5423
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5424
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4855
5425
|
}
|
|
4856
5426
|
},
|
|
4857
5427
|
"alpha": 1,
|
|
@@ -4865,6 +5435,7 @@
|
|
|
4865
5435
|
"key": "{borderColor.success.emphasis}",
|
|
4866
5436
|
"$value": "#055d20",
|
|
4867
5437
|
"$type": "color",
|
|
5438
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4868
5439
|
"$extensions": {
|
|
4869
5440
|
"org.primer.figma": {
|
|
4870
5441
|
"collection": "mode",
|
|
@@ -4884,6 +5455,10 @@
|
|
|
4884
5455
|
"light-protanopia-deuteranopia": "#0349b4",
|
|
4885
5456
|
"light-protanopia-deuteranopia-high-contrast": "#0349b4",
|
|
4886
5457
|
"dark-dimmed-high-contrast": "#43c663"
|
|
5458
|
+
},
|
|
5459
|
+
"org.primer.llm": {
|
|
5460
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5461
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4887
5462
|
}
|
|
4888
5463
|
},
|
|
4889
5464
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4891,6 +5466,7 @@
|
|
|
4891
5466
|
"original": {
|
|
4892
5467
|
"$value": "{base.color.green.5}",
|
|
4893
5468
|
"$type": "color",
|
|
5469
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4894
5470
|
"$extensions": {
|
|
4895
5471
|
"org.primer.figma": {
|
|
4896
5472
|
"collection": "mode",
|
|
@@ -4910,6 +5486,10 @@
|
|
|
4910
5486
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4911
5487
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4912
5488
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5489
|
+
},
|
|
5490
|
+
"org.primer.llm": {
|
|
5491
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5492
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4913
5493
|
}
|
|
4914
5494
|
},
|
|
4915
5495
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4922,6 +5502,7 @@
|
|
|
4922
5502
|
"key": "{borderColor.success.muted}",
|
|
4923
5503
|
"$value": "#26a148",
|
|
4924
5504
|
"$type": "color",
|
|
5505
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4925
5506
|
"$extensions": {
|
|
4926
5507
|
"org.primer.figma": {
|
|
4927
5508
|
"collection": "mode",
|
|
@@ -5009,6 +5590,10 @@
|
|
|
5009
5590
|
"isSource": true,
|
|
5010
5591
|
"$type": "color"
|
|
5011
5592
|
}
|
|
5593
|
+
},
|
|
5594
|
+
"org.primer.llm": {
|
|
5595
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5596
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5012
5597
|
}
|
|
5013
5598
|
},
|
|
5014
5599
|
"alpha": 1,
|
|
@@ -5017,6 +5602,7 @@
|
|
|
5017
5602
|
"original": {
|
|
5018
5603
|
"$value": "{base.color.green.3}",
|
|
5019
5604
|
"$type": "color",
|
|
5605
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5020
5606
|
"$extensions": {
|
|
5021
5607
|
"org.primer.figma": {
|
|
5022
5608
|
"collection": "mode",
|
|
@@ -5104,6 +5690,10 @@
|
|
|
5104
5690
|
"isSource": true,
|
|
5105
5691
|
"$type": "color"
|
|
5106
5692
|
}
|
|
5693
|
+
},
|
|
5694
|
+
"org.primer.llm": {
|
|
5695
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5696
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5107
5697
|
}
|
|
5108
5698
|
},
|
|
5109
5699
|
"alpha": 1,
|
|
@@ -5117,6 +5707,7 @@
|
|
|
5117
5707
|
"key": "{borderColor.translucent}",
|
|
5118
5708
|
"$value": "#59636e",
|
|
5119
5709
|
"$type": "color",
|
|
5710
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5120
5711
|
"$extensions": {
|
|
5121
5712
|
"org.primer.figma": {
|
|
5122
5713
|
"collection": "mode",
|
|
@@ -5173,6 +5764,10 @@
|
|
|
5173
5764
|
"isSource": true,
|
|
5174
5765
|
"$type": "color"
|
|
5175
5766
|
}
|
|
5767
|
+
},
|
|
5768
|
+
"org.primer.llm": {
|
|
5769
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5770
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5176
5771
|
}
|
|
5177
5772
|
},
|
|
5178
5773
|
"alpha": 1,
|
|
@@ -5181,6 +5776,7 @@
|
|
|
5181
5776
|
"original": {
|
|
5182
5777
|
"$value": "{base.color.neutral.9}",
|
|
5183
5778
|
"$type": "color",
|
|
5779
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5184
5780
|
"$extensions": {
|
|
5185
5781
|
"org.primer.figma": {
|
|
5186
5782
|
"collection": "mode",
|
|
@@ -5237,6 +5833,10 @@
|
|
|
5237
5833
|
"isSource": true,
|
|
5238
5834
|
"$type": "color"
|
|
5239
5835
|
}
|
|
5836
|
+
},
|
|
5837
|
+
"org.primer.llm": {
|
|
5838
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5839
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5240
5840
|
}
|
|
5241
5841
|
},
|
|
5242
5842
|
"alpha": 1,
|
|
@@ -5250,6 +5850,7 @@
|
|
|
5250
5850
|
"key": "{borderColor.transparent}",
|
|
5251
5851
|
"$value": "#ffffff00",
|
|
5252
5852
|
"$type": "color",
|
|
5853
|
+
"$description": "Fully transparent border",
|
|
5253
5854
|
"$extensions": {
|
|
5254
5855
|
"org.primer.figma": {
|
|
5255
5856
|
"collection": "mode",
|
|
@@ -5262,6 +5863,7 @@
|
|
|
5262
5863
|
"original": {
|
|
5263
5864
|
"$value": "{base.color.transparent}",
|
|
5264
5865
|
"$type": "color",
|
|
5866
|
+
"$description": "Fully transparent border",
|
|
5265
5867
|
"$extensions": {
|
|
5266
5868
|
"org.primer.figma": {
|
|
5267
5869
|
"collection": "mode",
|
|
@@ -5279,6 +5881,7 @@
|
|
|
5279
5881
|
"key": "{borderColor.upsell.emphasis}",
|
|
5280
5882
|
"$value": "#622cbc",
|
|
5281
5883
|
"$type": "color",
|
|
5884
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5282
5885
|
"$extensions": {
|
|
5283
5886
|
"org.primer.figma": {
|
|
5284
5887
|
"collection": "mode",
|
|
@@ -5287,6 +5890,10 @@
|
|
|
5287
5890
|
"codeSyntax": {
|
|
5288
5891
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5289
5892
|
}
|
|
5893
|
+
},
|
|
5894
|
+
"org.primer.llm": {
|
|
5895
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5896
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5290
5897
|
}
|
|
5291
5898
|
},
|
|
5292
5899
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5294,6 +5901,7 @@
|
|
|
5294
5901
|
"original": {
|
|
5295
5902
|
"$value": "{borderColor.done.emphasis}",
|
|
5296
5903
|
"$type": "color",
|
|
5904
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5297
5905
|
"$extensions": {
|
|
5298
5906
|
"org.primer.figma": {
|
|
5299
5907
|
"collection": "mode",
|
|
@@ -5302,6 +5910,10 @@
|
|
|
5302
5910
|
"codeSyntax": {
|
|
5303
5911
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5304
5912
|
}
|
|
5913
|
+
},
|
|
5914
|
+
"org.primer.llm": {
|
|
5915
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5916
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5305
5917
|
}
|
|
5306
5918
|
},
|
|
5307
5919
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5314,6 +5926,7 @@
|
|
|
5314
5926
|
"key": "{borderColor.upsell.muted}",
|
|
5315
5927
|
"$value": "#a371f7",
|
|
5316
5928
|
"$type": "color",
|
|
5929
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5317
5930
|
"$extensions": {
|
|
5318
5931
|
"org.primer.figma": {
|
|
5319
5932
|
"collection": "mode",
|
|
@@ -5322,6 +5935,10 @@
|
|
|
5322
5935
|
"codeSyntax": {
|
|
5323
5936
|
"web": "var(--borderColor-upsell-muted)"
|
|
5324
5937
|
}
|
|
5938
|
+
},
|
|
5939
|
+
"org.primer.llm": {
|
|
5940
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5941
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5325
5942
|
}
|
|
5326
5943
|
},
|
|
5327
5944
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5329,6 +5946,7 @@
|
|
|
5329
5946
|
"original": {
|
|
5330
5947
|
"$value": "{borderColor.done.muted}",
|
|
5331
5948
|
"$type": "color",
|
|
5949
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5332
5950
|
"$extensions": {
|
|
5333
5951
|
"org.primer.figma": {
|
|
5334
5952
|
"collection": "mode",
|
|
@@ -5337,6 +5955,10 @@
|
|
|
5337
5955
|
"codeSyntax": {
|
|
5338
5956
|
"web": "var(--borderColor-upsell-muted)"
|
|
5339
5957
|
}
|
|
5958
|
+
},
|
|
5959
|
+
"org.primer.llm": {
|
|
5960
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5961
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5340
5962
|
}
|
|
5341
5963
|
},
|
|
5342
5964
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36475,6 +37097,7 @@
|
|
|
36475
37097
|
"key": "{fgColor.accent}",
|
|
36476
37098
|
"$value": "#023b95",
|
|
36477
37099
|
"$type": "color",
|
|
37100
|
+
"$description": "Accent text for links and interactive elements",
|
|
36478
37101
|
"$extensions": {
|
|
36479
37102
|
"org.primer.figma": {
|
|
36480
37103
|
"collection": "mode",
|
|
@@ -36494,6 +37117,10 @@
|
|
|
36494
37117
|
"light-high-contrast": "#023b95",
|
|
36495
37118
|
"light-tritanopia-high-contrast": "#023b95",
|
|
36496
37119
|
"light-protanopia-deuteranopia-high-contrast": "#023b95"
|
|
37120
|
+
},
|
|
37121
|
+
"org.primer.llm": {
|
|
37122
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37123
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36497
37124
|
}
|
|
36498
37125
|
},
|
|
36499
37126
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36501,6 +37128,7 @@
|
|
|
36501
37128
|
"original": {
|
|
36502
37129
|
"$value": "{base.color.blue.6}",
|
|
36503
37130
|
"$type": "color",
|
|
37131
|
+
"$description": "Accent text for links and interactive elements",
|
|
36504
37132
|
"$extensions": {
|
|
36505
37133
|
"org.primer.figma": {
|
|
36506
37134
|
"collection": "mode",
|
|
@@ -36520,6 +37148,10 @@
|
|
|
36520
37148
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36521
37149
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36522
37150
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37151
|
+
},
|
|
37152
|
+
"org.primer.llm": {
|
|
37153
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37154
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36523
37155
|
}
|
|
36524
37156
|
},
|
|
36525
37157
|
"key": "{fgColor.accent}"
|
|
@@ -36532,6 +37164,7 @@
|
|
|
36532
37164
|
"key": "{fgColor.attention}",
|
|
36533
37165
|
"$value": "#603700",
|
|
36534
37166
|
"$type": "color",
|
|
37167
|
+
"$description": "Attention text for warnings and caution states",
|
|
36535
37168
|
"$extensions": {
|
|
36536
37169
|
"org.primer.figma": {
|
|
36537
37170
|
"collection": "mode",
|
|
@@ -36547,6 +37180,10 @@
|
|
|
36547
37180
|
"light-protanopia-deuteranopia-high-contrast": "#603700",
|
|
36548
37181
|
"light-tritanopia-high-contrast": "#603700",
|
|
36549
37182
|
"dark-dimmed-high-contrast": "#f0ce53"
|
|
37183
|
+
},
|
|
37184
|
+
"org.primer.llm": {
|
|
37185
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37186
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36550
37187
|
}
|
|
36551
37188
|
},
|
|
36552
37189
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36554,6 +37191,7 @@
|
|
|
36554
37191
|
"original": {
|
|
36555
37192
|
"$value": "{base.color.yellow.6}",
|
|
36556
37193
|
"$type": "color",
|
|
37194
|
+
"$description": "Attention text for warnings and caution states",
|
|
36557
37195
|
"$extensions": {
|
|
36558
37196
|
"org.primer.figma": {
|
|
36559
37197
|
"collection": "mode",
|
|
@@ -36569,6 +37207,10 @@
|
|
|
36569
37207
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36570
37208
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36571
37209
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37210
|
+
},
|
|
37211
|
+
"org.primer.llm": {
|
|
37212
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37213
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36572
37214
|
}
|
|
36573
37215
|
},
|
|
36574
37216
|
"key": "{fgColor.attention}"
|
|
@@ -36581,6 +37223,7 @@
|
|
|
36581
37223
|
"key": "{fgColor.black}",
|
|
36582
37224
|
"$value": "#010409",
|
|
36583
37225
|
"$type": "color",
|
|
37226
|
+
"$description": "Pure black text",
|
|
36584
37227
|
"$extensions": {
|
|
36585
37228
|
"org.primer.figma": {
|
|
36586
37229
|
"collection": "mode",
|
|
@@ -36589,6 +37232,10 @@
|
|
|
36589
37232
|
},
|
|
36590
37233
|
"org.primer.overrides": {
|
|
36591
37234
|
"dark": "#ffffff"
|
|
37235
|
+
},
|
|
37236
|
+
"org.primer.llm": {
|
|
37237
|
+
"doNotUse": true,
|
|
37238
|
+
"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."
|
|
36592
37239
|
}
|
|
36593
37240
|
},
|
|
36594
37241
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36596,6 +37243,7 @@
|
|
|
36596
37243
|
"original": {
|
|
36597
37244
|
"$value": "{base.color.neutral.13}",
|
|
36598
37245
|
"$type": "color",
|
|
37246
|
+
"$description": "Pure black text",
|
|
36599
37247
|
"$extensions": {
|
|
36600
37248
|
"org.primer.figma": {
|
|
36601
37249
|
"collection": "mode",
|
|
@@ -36604,6 +37252,10 @@
|
|
|
36604
37252
|
},
|
|
36605
37253
|
"org.primer.overrides": {
|
|
36606
37254
|
"dark": "{base.color.neutral.0}"
|
|
37255
|
+
},
|
|
37256
|
+
"org.primer.llm": {
|
|
37257
|
+
"doNotUse": true,
|
|
37258
|
+
"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."
|
|
36607
37259
|
}
|
|
36608
37260
|
},
|
|
36609
37261
|
"key": "{fgColor.black}"
|
|
@@ -36616,6 +37268,7 @@
|
|
|
36616
37268
|
"key": "{fgColor.closed}",
|
|
36617
37269
|
"$value": "#86061d",
|
|
36618
37270
|
"$type": "color",
|
|
37271
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36619
37272
|
"$extensions": {
|
|
36620
37273
|
"org.primer.figma": {
|
|
36621
37274
|
"collection": "mode",
|
|
@@ -36634,6 +37287,10 @@
|
|
|
36634
37287
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36635
37288
|
"light-tritanopia": "#454c54",
|
|
36636
37289
|
"light-tritanopia-high-contrast": "#454c54"
|
|
37290
|
+
},
|
|
37291
|
+
"org.primer.llm": {
|
|
37292
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37293
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36637
37294
|
}
|
|
36638
37295
|
},
|
|
36639
37296
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36641,6 +37298,7 @@
|
|
|
36641
37298
|
"original": {
|
|
36642
37299
|
"$value": "{fgColor.danger}",
|
|
36643
37300
|
"$type": "color",
|
|
37301
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36644
37302
|
"$extensions": {
|
|
36645
37303
|
"org.primer.figma": {
|
|
36646
37304
|
"collection": "mode",
|
|
@@ -36659,6 +37317,10 @@
|
|
|
36659
37317
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36660
37318
|
"light-tritanopia": "{fgColor.muted}",
|
|
36661
37319
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37320
|
+
},
|
|
37321
|
+
"org.primer.llm": {
|
|
37322
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37323
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36662
37324
|
}
|
|
36663
37325
|
},
|
|
36664
37326
|
"key": "{fgColor.closed}"
|
|
@@ -36671,6 +37333,7 @@
|
|
|
36671
37333
|
"key": "{fgColor.danger}",
|
|
36672
37334
|
"$value": "#86061d",
|
|
36673
37335
|
"$type": "color",
|
|
37336
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36674
37337
|
"$extensions": {
|
|
36675
37338
|
"org.primer.figma": {
|
|
36676
37339
|
"collection": "mode",
|
|
@@ -36691,6 +37354,10 @@
|
|
|
36691
37354
|
"dark-tritanopia-high-contrast": "#ee5a5d",
|
|
36692
37355
|
"light-high-contrast": "#86061d",
|
|
36693
37356
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37357
|
+
},
|
|
37358
|
+
"org.primer.llm": {
|
|
37359
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37360
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36694
37361
|
}
|
|
36695
37362
|
},
|
|
36696
37363
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36698,6 +37365,7 @@
|
|
|
36698
37365
|
"original": {
|
|
36699
37366
|
"$value": "{base.color.red.6}",
|
|
36700
37367
|
"$type": "color",
|
|
37368
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36701
37369
|
"$extensions": {
|
|
36702
37370
|
"org.primer.figma": {
|
|
36703
37371
|
"collection": "mode",
|
|
@@ -36718,6 +37386,10 @@
|
|
|
36718
37386
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36719
37387
|
"light-high-contrast": "{base.color.red.6}",
|
|
36720
37388
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37389
|
+
},
|
|
37390
|
+
"org.primer.llm": {
|
|
37391
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37392
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36721
37393
|
}
|
|
36722
37394
|
},
|
|
36723
37395
|
"key": "{fgColor.danger}"
|
|
@@ -36730,6 +37402,7 @@
|
|
|
36730
37402
|
"key": "{fgColor.default}",
|
|
36731
37403
|
"$value": "#010409",
|
|
36732
37404
|
"$type": "color",
|
|
37405
|
+
"$description": "Default text color for primary content and headings",
|
|
36733
37406
|
"$extensions": {
|
|
36734
37407
|
"org.primer.figma": {
|
|
36735
37408
|
"collection": "mode",
|
|
@@ -36744,8 +37417,12 @@
|
|
|
36744
37417
|
"dark-high-contrast": "#010409",
|
|
36745
37418
|
"dark-tritanopia-high-contrast": "#010409",
|
|
36746
37419
|
"dark-protanopia-deuteranopia-high-contrast": "#010409",
|
|
36747
|
-
"dark-dimmed": "#
|
|
37420
|
+
"dark-dimmed": "#25292e",
|
|
36748
37421
|
"dark-dimmed-high-contrast": "#25292e"
|
|
37422
|
+
},
|
|
37423
|
+
"org.primer.llm": {
|
|
37424
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37425
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36749
37426
|
}
|
|
36750
37427
|
},
|
|
36751
37428
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36753,6 +37430,7 @@
|
|
|
36753
37430
|
"original": {
|
|
36754
37431
|
"$value": "{base.color.neutral.13}",
|
|
36755
37432
|
"$type": "color",
|
|
37433
|
+
"$description": "Default text color for primary content and headings",
|
|
36756
37434
|
"$extensions": {
|
|
36757
37435
|
"org.primer.figma": {
|
|
36758
37436
|
"collection": "mode",
|
|
@@ -36767,8 +37445,12 @@
|
|
|
36767
37445
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36768
37446
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36769
37447
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36770
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37448
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36771
37449
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37450
|
+
},
|
|
37451
|
+
"org.primer.llm": {
|
|
37452
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37453
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36772
37454
|
}
|
|
36773
37455
|
},
|
|
36774
37456
|
"key": "{fgColor.default}"
|
|
@@ -36781,6 +37463,7 @@
|
|
|
36781
37463
|
"key": "{fgColor.disabled}",
|
|
36782
37464
|
"$value": "#59636e",
|
|
36783
37465
|
"$type": "color",
|
|
37466
|
+
"$description": "Text color for disabled interactive elements",
|
|
36784
37467
|
"$extensions": {
|
|
36785
37468
|
"org.primer.figma": {
|
|
36786
37469
|
"collection": "mode",
|
|
@@ -36802,6 +37485,10 @@
|
|
|
36802
37485
|
"dark-high-contrast": "#818b98",
|
|
36803
37486
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
36804
37487
|
"dark-protanopia-deuteranopia-high-contrast": "#818b98"
|
|
37488
|
+
},
|
|
37489
|
+
"org.primer.llm": {
|
|
37490
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37491
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36805
37492
|
}
|
|
36806
37493
|
},
|
|
36807
37494
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36809,6 +37496,7 @@
|
|
|
36809
37496
|
"original": {
|
|
36810
37497
|
"$value": "{base.color.neutral.9}",
|
|
36811
37498
|
"$type": "color",
|
|
37499
|
+
"$description": "Text color for disabled interactive elements",
|
|
36812
37500
|
"$extensions": {
|
|
36813
37501
|
"org.primer.figma": {
|
|
36814
37502
|
"collection": "mode",
|
|
@@ -36830,6 +37518,10 @@
|
|
|
36830
37518
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36831
37519
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36832
37520
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37521
|
+
},
|
|
37522
|
+
"org.primer.llm": {
|
|
37523
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37524
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36833
37525
|
}
|
|
36834
37526
|
},
|
|
36835
37527
|
"key": "{fgColor.disabled}"
|
|
@@ -36842,6 +37534,7 @@
|
|
|
36842
37534
|
"key": "{fgColor.done}",
|
|
36843
37535
|
"$value": "#512598",
|
|
36844
37536
|
"$type": "color",
|
|
37537
|
+
"$description": "Text color for completed/done state indicators",
|
|
36845
37538
|
"$extensions": {
|
|
36846
37539
|
"org.primer.figma": {
|
|
36847
37540
|
"collection": "mode",
|
|
@@ -36860,6 +37553,10 @@
|
|
|
36860
37553
|
"light-high-contrast": "#512598",
|
|
36861
37554
|
"light-protanopia-deuteranopia-high-contrast": "#512598",
|
|
36862
37555
|
"light-tritanopia-high-contrast": "#512598"
|
|
37556
|
+
},
|
|
37557
|
+
"org.primer.llm": {
|
|
37558
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37559
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36863
37560
|
}
|
|
36864
37561
|
},
|
|
36865
37562
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36867,6 +37564,7 @@
|
|
|
36867
37564
|
"original": {
|
|
36868
37565
|
"$value": "{base.color.purple.6}",
|
|
36869
37566
|
"$type": "color",
|
|
37567
|
+
"$description": "Text color for completed/done state indicators",
|
|
36870
37568
|
"$extensions": {
|
|
36871
37569
|
"org.primer.figma": {
|
|
36872
37570
|
"collection": "mode",
|
|
@@ -36885,6 +37583,10 @@
|
|
|
36885
37583
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36886
37584
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36887
37585
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37586
|
+
},
|
|
37587
|
+
"org.primer.llm": {
|
|
37588
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37589
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36888
37590
|
}
|
|
36889
37591
|
},
|
|
36890
37592
|
"key": "{fgColor.done}"
|
|
@@ -36897,6 +37599,7 @@
|
|
|
36897
37599
|
"key": "{fgColor.draft}",
|
|
36898
37600
|
"$value": "#393f46",
|
|
36899
37601
|
"$type": "color",
|
|
37602
|
+
"$description": "Text color for draft state indicators",
|
|
36900
37603
|
"$extensions": {
|
|
36901
37604
|
"org.primer.figma": {
|
|
36902
37605
|
"collection": "mode",
|
|
@@ -36905,6 +37608,10 @@
|
|
|
36905
37608
|
"codeSyntax": {
|
|
36906
37609
|
"web": "var(--fgColor-draft)"
|
|
36907
37610
|
}
|
|
37611
|
+
},
|
|
37612
|
+
"org.primer.llm": {
|
|
37613
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37614
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36908
37615
|
}
|
|
36909
37616
|
},
|
|
36910
37617
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36912,6 +37619,7 @@
|
|
|
36912
37619
|
"original": {
|
|
36913
37620
|
"$value": "{fgColor.neutral}",
|
|
36914
37621
|
"$type": "color",
|
|
37622
|
+
"$description": "Text color for draft state indicators",
|
|
36915
37623
|
"$extensions": {
|
|
36916
37624
|
"org.primer.figma": {
|
|
36917
37625
|
"collection": "mode",
|
|
@@ -36920,6 +37628,10 @@
|
|
|
36920
37628
|
"codeSyntax": {
|
|
36921
37629
|
"web": "var(--fgColor-draft)"
|
|
36922
37630
|
}
|
|
37631
|
+
},
|
|
37632
|
+
"org.primer.llm": {
|
|
37633
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37634
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36923
37635
|
}
|
|
36924
37636
|
},
|
|
36925
37637
|
"key": "{fgColor.draft}"
|
|
@@ -36932,6 +37644,7 @@
|
|
|
36932
37644
|
"key": "{fgColor.link}",
|
|
36933
37645
|
"$value": "#023b95",
|
|
36934
37646
|
"$type": "color",
|
|
37647
|
+
"$description": "Text color for hyperlinks",
|
|
36935
37648
|
"$extensions": {
|
|
36936
37649
|
"org.primer.figma": {
|
|
36937
37650
|
"collection": "mode",
|
|
@@ -36940,6 +37653,10 @@
|
|
|
36940
37653
|
"codeSyntax": {
|
|
36941
37654
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36942
37655
|
}
|
|
37656
|
+
},
|
|
37657
|
+
"org.primer.llm": {
|
|
37658
|
+
"usage": ["link-text", "hyperlink"],
|
|
37659
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36943
37660
|
}
|
|
36944
37661
|
},
|
|
36945
37662
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36947,6 +37664,7 @@
|
|
|
36947
37664
|
"original": {
|
|
36948
37665
|
"$value": "{fgColor.accent}",
|
|
36949
37666
|
"$type": "color",
|
|
37667
|
+
"$description": "Text color for hyperlinks",
|
|
36950
37668
|
"$extensions": {
|
|
36951
37669
|
"org.primer.figma": {
|
|
36952
37670
|
"collection": "mode",
|
|
@@ -36955,6 +37673,10 @@
|
|
|
36955
37673
|
"codeSyntax": {
|
|
36956
37674
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36957
37675
|
}
|
|
37676
|
+
},
|
|
37677
|
+
"org.primer.llm": {
|
|
37678
|
+
"usage": ["link-text", "hyperlink"],
|
|
37679
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36958
37680
|
}
|
|
36959
37681
|
},
|
|
36960
37682
|
"key": "{fgColor.link}"
|
|
@@ -36967,6 +37689,7 @@
|
|
|
36967
37689
|
"key": "{fgColor.muted}",
|
|
36968
37690
|
"$value": "#454c54",
|
|
36969
37691
|
"$type": "color",
|
|
37692
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36970
37693
|
"$extensions": {
|
|
36971
37694
|
"org.primer.figma": {
|
|
36972
37695
|
"collection": "mode",
|
|
@@ -36984,6 +37707,10 @@
|
|
|
36984
37707
|
"dark-dimmed-high-contrast": "#454c54",
|
|
36985
37708
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36986
37709
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
37710
|
+
},
|
|
37711
|
+
"org.primer.llm": {
|
|
37712
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37713
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
36987
37714
|
}
|
|
36988
37715
|
},
|
|
36989
37716
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36991,6 +37718,7 @@
|
|
|
36991
37718
|
"original": {
|
|
36992
37719
|
"$value": "{base.color.neutral.10}",
|
|
36993
37720
|
"$type": "color",
|
|
37721
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36994
37722
|
"$extensions": {
|
|
36995
37723
|
"org.primer.figma": {
|
|
36996
37724
|
"collection": "mode",
|
|
@@ -37008,6 +37736,10 @@
|
|
|
37008
37736
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37009
37737
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37010
37738
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37739
|
+
},
|
|
37740
|
+
"org.primer.llm": {
|
|
37741
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37742
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37011
37743
|
}
|
|
37012
37744
|
},
|
|
37013
37745
|
"key": "{fgColor.muted}"
|
|
@@ -37020,6 +37752,7 @@
|
|
|
37020
37752
|
"key": "{fgColor.neutral}",
|
|
37021
37753
|
"$value": "#393f46",
|
|
37022
37754
|
"$type": "color",
|
|
37755
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37023
37756
|
"$extensions": {
|
|
37024
37757
|
"org.primer.figma": {
|
|
37025
37758
|
"collection": "mode",
|
|
@@ -37034,6 +37767,10 @@
|
|
|
37034
37767
|
"dark-dimmed-high-contrast": "#393f46",
|
|
37035
37768
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
37036
37769
|
"dark-protanopia-deuteranopia-high-contrast": "#393f46"
|
|
37770
|
+
},
|
|
37771
|
+
"org.primer.llm": {
|
|
37772
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37773
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37037
37774
|
}
|
|
37038
37775
|
},
|
|
37039
37776
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37041,6 +37778,7 @@
|
|
|
37041
37778
|
"original": {
|
|
37042
37779
|
"$value": "{base.color.neutral.11}",
|
|
37043
37780
|
"$type": "color",
|
|
37781
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37044
37782
|
"$extensions": {
|
|
37045
37783
|
"org.primer.figma": {
|
|
37046
37784
|
"collection": "mode",
|
|
@@ -37055,6 +37793,10 @@
|
|
|
37055
37793
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37056
37794
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37057
37795
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37796
|
+
},
|
|
37797
|
+
"org.primer.llm": {
|
|
37798
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37799
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37058
37800
|
}
|
|
37059
37801
|
},
|
|
37060
37802
|
"key": "{fgColor.neutral}"
|
|
@@ -37067,6 +37809,7 @@
|
|
|
37067
37809
|
"key": "{fgColor.onEmphasis}",
|
|
37068
37810
|
"$value": "#ffffff",
|
|
37069
37811
|
"$type": "color",
|
|
37812
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37070
37813
|
"$extensions": {
|
|
37071
37814
|
"org.primer.figma": {
|
|
37072
37815
|
"collection": "mode",
|
|
@@ -37080,6 +37823,10 @@
|
|
|
37080
37823
|
"dark": "#010409",
|
|
37081
37824
|
"dark-dimmed": "#25292e",
|
|
37082
37825
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37826
|
+
},
|
|
37827
|
+
"org.primer.llm": {
|
|
37828
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37829
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37083
37830
|
}
|
|
37084
37831
|
},
|
|
37085
37832
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37087,6 +37834,7 @@
|
|
|
37087
37834
|
"original": {
|
|
37088
37835
|
"$value": "{base.color.neutral.0}",
|
|
37089
37836
|
"$type": "color",
|
|
37837
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37090
37838
|
"$extensions": {
|
|
37091
37839
|
"org.primer.figma": {
|
|
37092
37840
|
"collection": "mode",
|
|
@@ -37100,6 +37848,10 @@
|
|
|
37100
37848
|
"dark": "{base.color.neutral.13}",
|
|
37101
37849
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37102
37850
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37851
|
+
},
|
|
37852
|
+
"org.primer.llm": {
|
|
37853
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37854
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37103
37855
|
}
|
|
37104
37856
|
},
|
|
37105
37857
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37112,11 +37864,16 @@
|
|
|
37112
37864
|
"key": "{fgColor.onInverse}",
|
|
37113
37865
|
"$value": "#ffffff",
|
|
37114
37866
|
"$type": "color",
|
|
37867
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37115
37868
|
"$extensions": {
|
|
37116
37869
|
"org.primer.figma": {
|
|
37117
37870
|
"collection": "mode",
|
|
37118
37871
|
"group": "semantic",
|
|
37119
37872
|
"scopes": ["fgColor"]
|
|
37873
|
+
},
|
|
37874
|
+
"org.primer.llm": {
|
|
37875
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37876
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37120
37877
|
}
|
|
37121
37878
|
},
|
|
37122
37879
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37124,11 +37881,16 @@
|
|
|
37124
37881
|
"original": {
|
|
37125
37882
|
"$value": "{base.color.neutral.0}",
|
|
37126
37883
|
"$type": "color",
|
|
37884
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37127
37885
|
"$extensions": {
|
|
37128
37886
|
"org.primer.figma": {
|
|
37129
37887
|
"collection": "mode",
|
|
37130
37888
|
"group": "semantic",
|
|
37131
37889
|
"scopes": ["fgColor"]
|
|
37890
|
+
},
|
|
37891
|
+
"org.primer.llm": {
|
|
37892
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37893
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37132
37894
|
}
|
|
37133
37895
|
},
|
|
37134
37896
|
"key": "{fgColor.onInverse}"
|
|
@@ -37141,6 +37903,7 @@
|
|
|
37141
37903
|
"key": "{fgColor.open}",
|
|
37142
37904
|
"$value": "#024c1a",
|
|
37143
37905
|
"$type": "color",
|
|
37906
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37144
37907
|
"$extensions": {
|
|
37145
37908
|
"org.primer.figma": {
|
|
37146
37909
|
"collection": "mode",
|
|
@@ -37159,6 +37922,10 @@
|
|
|
37159
37922
|
"dark-tritanopia-high-contrast": "#ff8e8a",
|
|
37160
37923
|
"light-tritanopia": "#a0111f",
|
|
37161
37924
|
"light-tritanopia-high-contrast": "#86061d"
|
|
37925
|
+
},
|
|
37926
|
+
"org.primer.llm": {
|
|
37927
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37928
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37162
37929
|
}
|
|
37163
37930
|
},
|
|
37164
37931
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37166,6 +37933,7 @@
|
|
|
37166
37933
|
"original": {
|
|
37167
37934
|
"$value": "{fgColor.success}",
|
|
37168
37935
|
"$type": "color",
|
|
37936
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37169
37937
|
"$extensions": {
|
|
37170
37938
|
"org.primer.figma": {
|
|
37171
37939
|
"collection": "mode",
|
|
@@ -37184,6 +37952,10 @@
|
|
|
37184
37952
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37185
37953
|
"light-tritanopia": "{base.color.red.5}",
|
|
37186
37954
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37955
|
+
},
|
|
37956
|
+
"org.primer.llm": {
|
|
37957
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37958
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37187
37959
|
}
|
|
37188
37960
|
},
|
|
37189
37961
|
"key": "{fgColor.open}"
|
|
@@ -37196,6 +37968,7 @@
|
|
|
37196
37968
|
"key": "{fgColor.severe}",
|
|
37197
37969
|
"$value": "#702c00",
|
|
37198
37970
|
"$type": "color",
|
|
37971
|
+
"$description": "Severe text for high-priority warnings",
|
|
37199
37972
|
"$extensions": {
|
|
37200
37973
|
"org.primer.figma": {
|
|
37201
37974
|
"collection": "mode",
|
|
@@ -37216,6 +37989,10 @@
|
|
|
37216
37989
|
"light-tritanopia": "#a0111f",
|
|
37217
37990
|
"light-tritanopia-high-contrast": "#86061d",
|
|
37218
37991
|
"light-protanopia-deuteranopia-high-contrast": "#702c00"
|
|
37992
|
+
},
|
|
37993
|
+
"org.primer.llm": {
|
|
37994
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
37995
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37219
37996
|
}
|
|
37220
37997
|
},
|
|
37221
37998
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37223,6 +38000,7 @@
|
|
|
37223
38000
|
"original": {
|
|
37224
38001
|
"$value": "{base.color.orange.6}",
|
|
37225
38002
|
"$type": "color",
|
|
38003
|
+
"$description": "Severe text for high-priority warnings",
|
|
37226
38004
|
"$extensions": {
|
|
37227
38005
|
"org.primer.figma": {
|
|
37228
38006
|
"collection": "mode",
|
|
@@ -37243,6 +38021,10 @@
|
|
|
37243
38021
|
"light-tritanopia": "{base.color.red.5}",
|
|
37244
38022
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37245
38023
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38024
|
+
},
|
|
38025
|
+
"org.primer.llm": {
|
|
38026
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38027
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37246
38028
|
}
|
|
37247
38029
|
},
|
|
37248
38030
|
"key": "{fgColor.severe}"
|
|
@@ -37255,6 +38037,7 @@
|
|
|
37255
38037
|
"key": "{fgColor.sponsors}",
|
|
37256
38038
|
"$value": "#7d0c57",
|
|
37257
38039
|
"$type": "color",
|
|
38040
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37258
38041
|
"$extensions": {
|
|
37259
38042
|
"org.primer.figma": {
|
|
37260
38043
|
"collection": "mode",
|
|
@@ -37273,6 +38056,10 @@
|
|
|
37273
38056
|
"light-high-contrast": "#7d0c57",
|
|
37274
38057
|
"light-protanopia-deuteranopia-high-contrast": "#7d0c57",
|
|
37275
38058
|
"light-tritanopia-high-contrast": "#7d0c57"
|
|
38059
|
+
},
|
|
38060
|
+
"org.primer.llm": {
|
|
38061
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38062
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37276
38063
|
}
|
|
37277
38064
|
},
|
|
37278
38065
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37280,6 +38067,7 @@
|
|
|
37280
38067
|
"original": {
|
|
37281
38068
|
"$value": "{base.color.pink.6}",
|
|
37282
38069
|
"$type": "color",
|
|
38070
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37283
38071
|
"$extensions": {
|
|
37284
38072
|
"org.primer.figma": {
|
|
37285
38073
|
"collection": "mode",
|
|
@@ -37298,6 +38086,10 @@
|
|
|
37298
38086
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37299
38087
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37300
38088
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38089
|
+
},
|
|
38090
|
+
"org.primer.llm": {
|
|
38091
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38092
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37301
38093
|
}
|
|
37302
38094
|
},
|
|
37303
38095
|
"key": "{fgColor.sponsors}"
|
|
@@ -37310,6 +38102,7 @@
|
|
|
37310
38102
|
"key": "{fgColor.success}",
|
|
37311
38103
|
"$value": "#024c1a",
|
|
37312
38104
|
"$type": "color",
|
|
38105
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37313
38106
|
"$extensions": {
|
|
37314
38107
|
"org.primer.figma": {
|
|
37315
38108
|
"collection": "mode",
|
|
@@ -37332,6 +38125,10 @@
|
|
|
37332
38125
|
"dark-tritanopia-high-contrast": "#67b3fd",
|
|
37333
38126
|
"light-tritanopia": "#0349b4",
|
|
37334
38127
|
"light-tritanopia-high-contrast": "#023b95"
|
|
38128
|
+
},
|
|
38129
|
+
"org.primer.llm": {
|
|
38130
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38131
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37335
38132
|
}
|
|
37336
38133
|
},
|
|
37337
38134
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37339,6 +38136,7 @@
|
|
|
37339
38136
|
"original": {
|
|
37340
38137
|
"$value": "{base.color.green.6}",
|
|
37341
38138
|
"$type": "color",
|
|
38139
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37342
38140
|
"$extensions": {
|
|
37343
38141
|
"org.primer.figma": {
|
|
37344
38142
|
"collection": "mode",
|
|
@@ -37361,6 +38159,10 @@
|
|
|
37361
38159
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37362
38160
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37363
38161
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38162
|
+
},
|
|
38163
|
+
"org.primer.llm": {
|
|
38164
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38165
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37364
38166
|
}
|
|
37365
38167
|
},
|
|
37366
38168
|
"key": "{fgColor.success}"
|
|
@@ -37373,6 +38175,7 @@
|
|
|
37373
38175
|
"key": "{fgColor.upsell}",
|
|
37374
38176
|
"$value": "#512598",
|
|
37375
38177
|
"$type": "color",
|
|
38178
|
+
"$description": "Text color for upsell and promotional content",
|
|
37376
38179
|
"$extensions": {
|
|
37377
38180
|
"org.primer.figma": {
|
|
37378
38181
|
"collection": "mode",
|
|
@@ -37381,6 +38184,10 @@
|
|
|
37381
38184
|
"codeSyntax": {
|
|
37382
38185
|
"web": "var(--fgColor-upsell)"
|
|
37383
38186
|
}
|
|
38187
|
+
},
|
|
38188
|
+
"org.primer.llm": {
|
|
38189
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38190
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37384
38191
|
}
|
|
37385
38192
|
},
|
|
37386
38193
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37388,6 +38195,7 @@
|
|
|
37388
38195
|
"original": {
|
|
37389
38196
|
"$value": "{fgColor.done}",
|
|
37390
38197
|
"$type": "color",
|
|
38198
|
+
"$description": "Text color for upsell and promotional content",
|
|
37391
38199
|
"$extensions": {
|
|
37392
38200
|
"org.primer.figma": {
|
|
37393
38201
|
"collection": "mode",
|
|
@@ -37396,6 +38204,10 @@
|
|
|
37396
38204
|
"codeSyntax": {
|
|
37397
38205
|
"web": "var(--fgColor-upsell)"
|
|
37398
38206
|
}
|
|
38207
|
+
},
|
|
38208
|
+
"org.primer.llm": {
|
|
38209
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38210
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37399
38211
|
}
|
|
37400
38212
|
},
|
|
37401
38213
|
"key": "{fgColor.upsell}"
|
|
@@ -37408,6 +38220,7 @@
|
|
|
37408
38220
|
"key": "{fgColor.white}",
|
|
37409
38221
|
"$value": "#ffffff",
|
|
37410
38222
|
"$type": "color",
|
|
38223
|
+
"$description": "Pure white text",
|
|
37411
38224
|
"$extensions": {
|
|
37412
38225
|
"org.primer.figma": {
|
|
37413
38226
|
"collection": "mode",
|
|
@@ -37416,6 +38229,10 @@
|
|
|
37416
38229
|
},
|
|
37417
38230
|
"org.primer.overrides": {
|
|
37418
38231
|
"dark": "#010409"
|
|
38232
|
+
},
|
|
38233
|
+
"org.primer.llm": {
|
|
38234
|
+
"doNotUse": true,
|
|
38235
|
+
"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."
|
|
37419
38236
|
}
|
|
37420
38237
|
},
|
|
37421
38238
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37423,6 +38240,7 @@
|
|
|
37423
38240
|
"original": {
|
|
37424
38241
|
"$value": "{base.color.neutral.0}",
|
|
37425
38242
|
"$type": "color",
|
|
38243
|
+
"$description": "Pure white text",
|
|
37426
38244
|
"$extensions": {
|
|
37427
38245
|
"org.primer.figma": {
|
|
37428
38246
|
"collection": "mode",
|
|
@@ -37431,6 +38249,10 @@
|
|
|
37431
38249
|
},
|
|
37432
38250
|
"org.primer.overrides": {
|
|
37433
38251
|
"dark": "{base.color.neutral.13}"
|
|
38252
|
+
},
|
|
38253
|
+
"org.primer.llm": {
|
|
38254
|
+
"doNotUse": true,
|
|
38255
|
+
"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."
|
|
37434
38256
|
}
|
|
37435
38257
|
},
|
|
37436
38258
|
"key": "{fgColor.white}"
|
|
@@ -37443,6 +38265,13 @@
|
|
|
37443
38265
|
"key": "{focus.outline}",
|
|
37444
38266
|
"$value": "2px solid #0349b4",
|
|
37445
38267
|
"$type": "border",
|
|
38268
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38269
|
+
"$extensions": {
|
|
38270
|
+
"org.primer.llm": {
|
|
38271
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38272
|
+
"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."
|
|
38273
|
+
}
|
|
38274
|
+
},
|
|
37446
38275
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37447
38276
|
"isSource": true,
|
|
37448
38277
|
"original": {
|
|
@@ -37452,6 +38281,13 @@
|
|
|
37452
38281
|
"width": "2px"
|
|
37453
38282
|
},
|
|
37454
38283
|
"$type": "border",
|
|
38284
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38285
|
+
"$extensions": {
|
|
38286
|
+
"org.primer.llm": {
|
|
38287
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38288
|
+
"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."
|
|
38289
|
+
}
|
|
38290
|
+
},
|
|
37455
38291
|
"key": "{focus.outline}"
|
|
37456
38292
|
},
|
|
37457
38293
|
"name": "focus-outline",
|
|
@@ -37462,11 +38298,16 @@
|
|
|
37462
38298
|
"key": "{focus.outlineColor}",
|
|
37463
38299
|
"$value": "#0349b4",
|
|
37464
38300
|
"$type": "color",
|
|
38301
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37465
38302
|
"$extensions": {
|
|
37466
38303
|
"org.primer.figma": {
|
|
37467
38304
|
"collection": "mode",
|
|
37468
38305
|
"group": "component (internal)",
|
|
37469
38306
|
"scopes": ["borderColor", "effectColor"]
|
|
38307
|
+
},
|
|
38308
|
+
"org.primer.llm": {
|
|
38309
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38310
|
+
"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."
|
|
37470
38311
|
}
|
|
37471
38312
|
},
|
|
37472
38313
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37474,11 +38315,16 @@
|
|
|
37474
38315
|
"original": {
|
|
37475
38316
|
"$value": "{borderColor.accent.emphasis}",
|
|
37476
38317
|
"$type": "color",
|
|
38318
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37477
38319
|
"$extensions": {
|
|
37478
38320
|
"org.primer.figma": {
|
|
37479
38321
|
"collection": "mode",
|
|
37480
38322
|
"group": "component (internal)",
|
|
37481
38323
|
"scopes": ["borderColor", "effectColor"]
|
|
38324
|
+
},
|
|
38325
|
+
"org.primer.llm": {
|
|
38326
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38327
|
+
"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."
|
|
37482
38328
|
}
|
|
37483
38329
|
},
|
|
37484
38330
|
"key": "{focus.outlineColor}"
|
|
@@ -46526,6 +47372,7 @@
|
|
|
46526
47372
|
"key": "{selection.bgColor}",
|
|
46527
47373
|
"$value": "#0349b433",
|
|
46528
47374
|
"$type": "color",
|
|
47375
|
+
"$description": "Background color for text selection highlights",
|
|
46529
47376
|
"$extensions": {
|
|
46530
47377
|
"org.primer.figma": {
|
|
46531
47378
|
"collection": "mode",
|
|
@@ -46540,6 +47387,10 @@
|
|
|
46540
47387
|
"isSource": true,
|
|
46541
47388
|
"$type": "color"
|
|
46542
47389
|
}
|
|
47390
|
+
},
|
|
47391
|
+
"org.primer.llm": {
|
|
47392
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47393
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46543
47394
|
}
|
|
46544
47395
|
},
|
|
46545
47396
|
"alpha": 0.2,
|
|
@@ -46548,6 +47399,7 @@
|
|
|
46548
47399
|
"original": {
|
|
46549
47400
|
"$value": "{bgColor.accent.emphasis}",
|
|
46550
47401
|
"$type": "color",
|
|
47402
|
+
"$description": "Background color for text selection highlights",
|
|
46551
47403
|
"$extensions": {
|
|
46552
47404
|
"org.primer.figma": {
|
|
46553
47405
|
"collection": "mode",
|
|
@@ -46562,6 +47414,10 @@
|
|
|
46562
47414
|
"isSource": true,
|
|
46563
47415
|
"$type": "color"
|
|
46564
47416
|
}
|
|
47417
|
+
},
|
|
47418
|
+
"org.primer.llm": {
|
|
47419
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47420
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46565
47421
|
}
|
|
46566
47422
|
},
|
|
46567
47423
|
"alpha": 0.2,
|
|
@@ -46575,6 +47431,7 @@
|
|
|
46575
47431
|
"key": "{shadow.floating.large}",
|
|
46576
47432
|
"$value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
|
|
46577
47433
|
"$type": "shadow",
|
|
47434
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46578
47435
|
"$extensions": {
|
|
46579
47436
|
"org.primer.figma": {
|
|
46580
47437
|
"collection": "mode",
|
|
@@ -46604,6 +47461,10 @@
|
|
|
46604
47461
|
"isSource": true,
|
|
46605
47462
|
"$type": "shadow"
|
|
46606
47463
|
}
|
|
47464
|
+
},
|
|
47465
|
+
"org.primer.llm": {
|
|
47466
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47467
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46607
47468
|
}
|
|
46608
47469
|
},
|
|
46609
47470
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46628,6 +47489,7 @@
|
|
|
46628
47489
|
}
|
|
46629
47490
|
],
|
|
46630
47491
|
"$type": "shadow",
|
|
47492
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46631
47493
|
"$extensions": {
|
|
46632
47494
|
"org.primer.figma": {
|
|
46633
47495
|
"collection": "mode",
|
|
@@ -46657,6 +47519,10 @@
|
|
|
46657
47519
|
"isSource": true,
|
|
46658
47520
|
"$type": "shadow"
|
|
46659
47521
|
}
|
|
47522
|
+
},
|
|
47523
|
+
"org.primer.llm": {
|
|
47524
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47525
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46660
47526
|
}
|
|
46661
47527
|
},
|
|
46662
47528
|
"key": "{shadow.floating.large}"
|
|
@@ -46669,6 +47535,7 @@
|
|
|
46669
47535
|
"key": "{shadow.floating.legacy}",
|
|
46670
47536
|
"$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46671
47537
|
"$type": "shadow",
|
|
47538
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46672
47539
|
"$extensions": {
|
|
46673
47540
|
"org.primer.figma": {},
|
|
46674
47541
|
"org.primer.overrides": {
|
|
@@ -46695,6 +47562,10 @@
|
|
|
46695
47562
|
"isSource": true,
|
|
46696
47563
|
"$type": "shadow"
|
|
46697
47564
|
}
|
|
47565
|
+
},
|
|
47566
|
+
"org.primer.llm": {
|
|
47567
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47568
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46698
47569
|
}
|
|
46699
47570
|
},
|
|
46700
47571
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46719,6 +47590,7 @@
|
|
|
46719
47590
|
}
|
|
46720
47591
|
],
|
|
46721
47592
|
"$type": "shadow",
|
|
47593
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46722
47594
|
"$extensions": {
|
|
46723
47595
|
"org.primer.figma": {},
|
|
46724
47596
|
"org.primer.overrides": {
|
|
@@ -46745,6 +47617,10 @@
|
|
|
46745
47617
|
"isSource": true,
|
|
46746
47618
|
"$type": "shadow"
|
|
46747
47619
|
}
|
|
47620
|
+
},
|
|
47621
|
+
"org.primer.llm": {
|
|
47622
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47623
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46748
47624
|
}
|
|
46749
47625
|
},
|
|
46750
47626
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46757,6 +47633,7 @@
|
|
|
46757
47633
|
"key": "{shadow.floating.medium}",
|
|
46758
47634
|
"$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",
|
|
46759
47635
|
"$type": "shadow",
|
|
47636
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46760
47637
|
"$extensions": {
|
|
46761
47638
|
"org.primer.figma": {
|
|
46762
47639
|
"collection": "mode",
|
|
@@ -46810,6 +47687,10 @@
|
|
|
46810
47687
|
"isSource": true,
|
|
46811
47688
|
"$type": "shadow"
|
|
46812
47689
|
}
|
|
47690
|
+
},
|
|
47691
|
+
"org.primer.llm": {
|
|
47692
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47693
|
+
"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."
|
|
46813
47694
|
}
|
|
46814
47695
|
},
|
|
46815
47696
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46858,6 +47739,7 @@
|
|
|
46858
47739
|
}
|
|
46859
47740
|
],
|
|
46860
47741
|
"$type": "shadow",
|
|
47742
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46861
47743
|
"$extensions": {
|
|
46862
47744
|
"org.primer.figma": {
|
|
46863
47745
|
"collection": "mode",
|
|
@@ -46911,6 +47793,10 @@
|
|
|
46911
47793
|
"isSource": true,
|
|
46912
47794
|
"$type": "shadow"
|
|
46913
47795
|
}
|
|
47796
|
+
},
|
|
47797
|
+
"org.primer.llm": {
|
|
47798
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47799
|
+
"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."
|
|
46914
47800
|
}
|
|
46915
47801
|
},
|
|
46916
47802
|
"key": "{shadow.floating.medium}"
|
|
@@ -46923,6 +47809,7 @@
|
|
|
46923
47809
|
"key": "{shadow.floating.small}",
|
|
46924
47810
|
"$value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46925
47811
|
"$type": "shadow",
|
|
47812
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46926
47813
|
"$extensions": {
|
|
46927
47814
|
"org.primer.figma": {
|
|
46928
47815
|
"collection": "mode",
|
|
@@ -46960,6 +47847,10 @@
|
|
|
46960
47847
|
"isSource": true,
|
|
46961
47848
|
"$type": "shadow"
|
|
46962
47849
|
}
|
|
47850
|
+
},
|
|
47851
|
+
"org.primer.llm": {
|
|
47852
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47853
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46963
47854
|
}
|
|
46964
47855
|
},
|
|
46965
47856
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46992,6 +47883,7 @@
|
|
|
46992
47883
|
}
|
|
46993
47884
|
],
|
|
46994
47885
|
"$type": "shadow",
|
|
47886
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46995
47887
|
"$extensions": {
|
|
46996
47888
|
"org.primer.figma": {
|
|
46997
47889
|
"collection": "mode",
|
|
@@ -47029,6 +47921,10 @@
|
|
|
47029
47921
|
"isSource": true,
|
|
47030
47922
|
"$type": "shadow"
|
|
47031
47923
|
}
|
|
47924
|
+
},
|
|
47925
|
+
"org.primer.llm": {
|
|
47926
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47927
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47032
47928
|
}
|
|
47033
47929
|
},
|
|
47034
47930
|
"key": "{shadow.floating.small}"
|
|
@@ -47041,6 +47937,7 @@
|
|
|
47041
47937
|
"key": "{shadow.floating.xlarge}",
|
|
47042
47938
|
"$value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
|
|
47043
47939
|
"$type": "shadow",
|
|
47940
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47044
47941
|
"$extensions": {
|
|
47045
47942
|
"org.primer.figma": {
|
|
47046
47943
|
"collection": "mode",
|
|
@@ -47070,6 +47967,10 @@
|
|
|
47070
47967
|
"isSource": true,
|
|
47071
47968
|
"$type": "shadow"
|
|
47072
47969
|
}
|
|
47970
|
+
},
|
|
47971
|
+
"org.primer.llm": {
|
|
47972
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47973
|
+
"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."
|
|
47073
47974
|
}
|
|
47074
47975
|
},
|
|
47075
47976
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47094,6 +47995,7 @@
|
|
|
47094
47995
|
}
|
|
47095
47996
|
],
|
|
47096
47997
|
"$type": "shadow",
|
|
47998
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47097
47999
|
"$extensions": {
|
|
47098
48000
|
"org.primer.figma": {
|
|
47099
48001
|
"collection": "mode",
|
|
@@ -47123,6 +48025,10 @@
|
|
|
47123
48025
|
"isSource": true,
|
|
47124
48026
|
"$type": "shadow"
|
|
47125
48027
|
}
|
|
48028
|
+
},
|
|
48029
|
+
"org.primer.llm": {
|
|
48030
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48031
|
+
"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."
|
|
47126
48032
|
}
|
|
47127
48033
|
},
|
|
47128
48034
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47135,6 +48041,7 @@
|
|
|
47135
48041
|
"key": "{shadow.inset}",
|
|
47136
48042
|
"$value": "inset 0px 1px 0px 0px #0104090a",
|
|
47137
48043
|
"$type": "shadow",
|
|
48044
|
+
"$description": "Inset shadow for recessed elements",
|
|
47138
48045
|
"$extensions": {
|
|
47139
48046
|
"org.primer.figma": {
|
|
47140
48047
|
"collection": "mode",
|
|
@@ -47155,6 +48062,10 @@
|
|
|
47155
48062
|
"isSource": true,
|
|
47156
48063
|
"$type": "shadow"
|
|
47157
48064
|
}
|
|
48065
|
+
},
|
|
48066
|
+
"org.primer.llm": {
|
|
48067
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48068
|
+
"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."
|
|
47158
48069
|
}
|
|
47159
48070
|
},
|
|
47160
48071
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47170,6 +48081,7 @@
|
|
|
47170
48081
|
"inset": true
|
|
47171
48082
|
},
|
|
47172
48083
|
"$type": "shadow",
|
|
48084
|
+
"$description": "Inset shadow for recessed elements",
|
|
47173
48085
|
"$extensions": {
|
|
47174
48086
|
"org.primer.figma": {
|
|
47175
48087
|
"collection": "mode",
|
|
@@ -47190,6 +48102,10 @@
|
|
|
47190
48102
|
"isSource": true,
|
|
47191
48103
|
"$type": "shadow"
|
|
47192
48104
|
}
|
|
48105
|
+
},
|
|
48106
|
+
"org.primer.llm": {
|
|
48107
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48108
|
+
"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."
|
|
47193
48109
|
}
|
|
47194
48110
|
},
|
|
47195
48111
|
"key": "{shadow.inset}"
|
|
@@ -47202,6 +48118,7 @@
|
|
|
47202
48118
|
"key": "{shadow.resting.medium}",
|
|
47203
48119
|
"$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
47204
48120
|
"$type": "shadow",
|
|
48121
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47205
48122
|
"$extensions": {
|
|
47206
48123
|
"org.primer.figma": {
|
|
47207
48124
|
"collection": "mode",
|
|
@@ -47231,6 +48148,10 @@
|
|
|
47231
48148
|
"isSource": true,
|
|
47232
48149
|
"$type": "shadow"
|
|
47233
48150
|
}
|
|
48151
|
+
},
|
|
48152
|
+
"org.primer.llm": {
|
|
48153
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48154
|
+
"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."
|
|
47234
48155
|
}
|
|
47235
48156
|
},
|
|
47236
48157
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47255,6 +48176,7 @@
|
|
|
47255
48176
|
}
|
|
47256
48177
|
],
|
|
47257
48178
|
"$type": "shadow",
|
|
48179
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47258
48180
|
"$extensions": {
|
|
47259
48181
|
"org.primer.figma": {
|
|
47260
48182
|
"collection": "mode",
|
|
@@ -47284,6 +48206,10 @@
|
|
|
47284
48206
|
"isSource": true,
|
|
47285
48207
|
"$type": "shadow"
|
|
47286
48208
|
}
|
|
48209
|
+
},
|
|
48210
|
+
"org.primer.llm": {
|
|
48211
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48212
|
+
"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."
|
|
47287
48213
|
}
|
|
47288
48214
|
},
|
|
47289
48215
|
"key": "{shadow.resting.medium}"
|
|
@@ -47294,8 +48220,9 @@
|
|
|
47294
48220
|
},
|
|
47295
48221
|
"shadow-resting-small": {
|
|
47296
48222
|
"key": "{shadow.resting.small}",
|
|
47297
|
-
"$value": "0px 1px 1px 0px #
|
|
48223
|
+
"$value": "0px 1px 1px 0px #0104090a, 0px 1px 2px 0px #01040908",
|
|
47298
48224
|
"$type": "shadow",
|
|
48225
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47299
48226
|
"$extensions": {
|
|
47300
48227
|
"org.primer.figma": {
|
|
47301
48228
|
"collection": "mode",
|
|
@@ -47327,6 +48254,10 @@
|
|
|
47327
48254
|
"isSource": true,
|
|
47328
48255
|
"$type": "shadow"
|
|
47329
48256
|
}
|
|
48257
|
+
},
|
|
48258
|
+
"org.primer.llm": {
|
|
48259
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48260
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47330
48261
|
}
|
|
47331
48262
|
},
|
|
47332
48263
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47335,7 +48266,7 @@
|
|
|
47335
48266
|
"$value": [
|
|
47336
48267
|
{
|
|
47337
48268
|
"color": "{base.color.neutral.13}",
|
|
47338
|
-
"alpha": 0.
|
|
48269
|
+
"alpha": 0.04,
|
|
47339
48270
|
"offsetX": "0px",
|
|
47340
48271
|
"offsetY": "1px",
|
|
47341
48272
|
"blur": "1px",
|
|
@@ -47344,15 +48275,16 @@
|
|
|
47344
48275
|
},
|
|
47345
48276
|
{
|
|
47346
48277
|
"color": "{base.color.neutral.13}",
|
|
47347
|
-
"alpha": 0.
|
|
48278
|
+
"alpha": 0.03,
|
|
47348
48279
|
"offsetX": "0px",
|
|
47349
48280
|
"offsetY": "1px",
|
|
47350
|
-
"blur": "
|
|
48281
|
+
"blur": "2px",
|
|
47351
48282
|
"spread": "0px",
|
|
47352
48283
|
"inset": false
|
|
47353
48284
|
}
|
|
47354
48285
|
],
|
|
47355
48286
|
"$type": "shadow",
|
|
48287
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47356
48288
|
"$extensions": {
|
|
47357
48289
|
"org.primer.figma": {
|
|
47358
48290
|
"collection": "mode",
|
|
@@ -47384,6 +48316,10 @@
|
|
|
47384
48316
|
"isSource": true,
|
|
47385
48317
|
"$type": "shadow"
|
|
47386
48318
|
}
|
|
48319
|
+
},
|
|
48320
|
+
"org.primer.llm": {
|
|
48321
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48322
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47387
48323
|
}
|
|
47388
48324
|
},
|
|
47389
48325
|
"key": "{shadow.resting.small}"
|
|
@@ -47394,8 +48330,9 @@
|
|
|
47394
48330
|
},
|
|
47395
48331
|
"shadow-resting-xsmall": {
|
|
47396
48332
|
"key": "{shadow.resting.xsmall}",
|
|
47397
|
-
"$value": "0px 1px 1px 0px #
|
|
48333
|
+
"$value": "0px 1px 1px 0px #0104090d",
|
|
47398
48334
|
"$type": "shadow",
|
|
48335
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47399
48336
|
"$extensions": {
|
|
47400
48337
|
"org.primer.figma": {
|
|
47401
48338
|
"collection": "mode",
|
|
@@ -47416,6 +48353,10 @@
|
|
|
47416
48353
|
"isSource": true,
|
|
47417
48354
|
"$type": "shadow"
|
|
47418
48355
|
}
|
|
48356
|
+
},
|
|
48357
|
+
"org.primer.llm": {
|
|
48358
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48359
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47419
48360
|
}
|
|
47420
48361
|
},
|
|
47421
48362
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47423,7 +48364,7 @@
|
|
|
47423
48364
|
"original": {
|
|
47424
48365
|
"$value": {
|
|
47425
48366
|
"color": "{base.color.neutral.13}",
|
|
47426
|
-
"alpha": 0.
|
|
48367
|
+
"alpha": 0.05,
|
|
47427
48368
|
"offsetX": "0px",
|
|
47428
48369
|
"offsetY": "1px",
|
|
47429
48370
|
"blur": "1px",
|
|
@@ -47431,6 +48372,7 @@
|
|
|
47431
48372
|
"inset": false
|
|
47432
48373
|
},
|
|
47433
48374
|
"$type": "shadow",
|
|
48375
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47434
48376
|
"$extensions": {
|
|
47435
48377
|
"org.primer.figma": {
|
|
47436
48378
|
"collection": "mode",
|
|
@@ -47451,6 +48393,10 @@
|
|
|
47451
48393
|
"isSource": true,
|
|
47452
48394
|
"$type": "shadow"
|
|
47453
48395
|
}
|
|
48396
|
+
},
|
|
48397
|
+
"org.primer.llm": {
|
|
48398
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48399
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47454
48400
|
}
|
|
47455
48401
|
},
|
|
47456
48402
|
"key": "{shadow.resting.xsmall}"
|