@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": "#0969da",
|
|
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": "#033d8b",
|
|
311
312
|
"dark-tritanopia-high-contrast": "#002155",
|
|
312
313
|
"dark-protanopia-deuteranopia-high-contrast": "#002155"
|
|
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": "#ddf4ff",
|
|
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": "#9a6700",
|
|
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": "#633c01",
|
|
412
433
|
"dark-protanopia-deuteranopia-high-contrast": "#3b2300",
|
|
413
434
|
"dark-tritanopia-high-contrast": "#3b2300"
|
|
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": "#fff8c5",
|
|
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": "#1f2328",
|
|
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": "#cf222e",
|
|
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": "#59636e",
|
|
551
602
|
"dark-protanopia-deuteranopia": "#59636e",
|
|
552
603
|
"dark-protanopia-deuteranopia-high-contrast": "#59636e"
|
|
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": "#ffebe9",
|
|
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": "#cf222e",
|
|
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": "#4c0014",
|
|
694
765
|
"dark-dimmed-high-contrast": "#82071e",
|
|
695
766
|
"dark-tritanopia-high-contrast": "#4c0014"
|
|
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": "#ffebe9",
|
|
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": "#eff2f5",
|
|
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.2}",
|
|
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": "#8250df",
|
|
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": "#512a97",
|
|
917
1028
|
"dark-tritanopia-high-contrast": "#2e1461",
|
|
918
1029
|
"dark-protanopia-deuteranopia-high-contrast": "#2e1461"
|
|
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": "#fbefff",
|
|
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": "#59636e",
|
|
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": "#818b981f",
|
|
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": "#f6f8fa",
|
|
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": "{bgColor.muted}",
|
|
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": "#1f2328"
|
|
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": "#f6f8fa",
|
|
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.1}",
|
|
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": "#59636e",
|
|
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.9}",
|
|
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": "#818b981f",
|
|
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",
|
|
@@ -1396,6 +1601,7 @@
|
|
|
1396
1601
|
"original": {
|
|
1397
1602
|
"$value": "{base.color.neutral.8}",
|
|
1398
1603
|
"$type": "color",
|
|
1604
|
+
"$description": "Subtle neutral background for tags, labels, and secondary UI elements",
|
|
1399
1605
|
"$extensions": {
|
|
1400
1606
|
"org.primer.figma": {
|
|
1401
1607
|
"collection": "mode",
|
|
@@ -1423,6 +1629,10 @@
|
|
|
1423
1629
|
"dark-high-contrast": "{base.color.neutral.3}",
|
|
1424
1630
|
"dark-tritanopia-high-contrast": "{base.color.neutral.3}",
|
|
1425
1631
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}"
|
|
1632
|
+
},
|
|
1633
|
+
"org.primer.llm": {
|
|
1634
|
+
"usage": ["neutral-label", "neutral-badge", "secondary-tag", "counter"],
|
|
1635
|
+
"rules": "Use for neutral semantic meaning. Pair with fgColor.default for text. Do NOT use for status indicators."
|
|
1426
1636
|
}
|
|
1427
1637
|
},
|
|
1428
1638
|
"alpha": 0.12,
|
|
@@ -1436,6 +1646,7 @@
|
|
|
1436
1646
|
"key": "{bgColor.open.emphasis}",
|
|
1437
1647
|
"$value": "#1f883d",
|
|
1438
1648
|
"$type": "color",
|
|
1649
|
+
"$description": "Strong background for open state badges and labels",
|
|
1439
1650
|
"$extensions": {
|
|
1440
1651
|
"org.primer.figma": {
|
|
1441
1652
|
"collection": "mode",
|
|
@@ -1454,6 +1665,10 @@
|
|
|
1454
1665
|
"light-protanopia-deuteranopia-high-contrast": "#bc4c00",
|
|
1455
1666
|
"dark-protanopia-deuteranopia": "#bc4c00",
|
|
1456
1667
|
"dark-protanopia-deuteranopia-high-contrast": "#471700"
|
|
1668
|
+
},
|
|
1669
|
+
"org.primer.llm": {
|
|
1670
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1671
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1457
1672
|
}
|
|
1458
1673
|
},
|
|
1459
1674
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1461,6 +1676,7 @@
|
|
|
1461
1676
|
"original": {
|
|
1462
1677
|
"$value": "{bgColor.success.emphasis}",
|
|
1463
1678
|
"$type": "color",
|
|
1679
|
+
"$description": "Strong background for open state badges and labels",
|
|
1464
1680
|
"$extensions": {
|
|
1465
1681
|
"org.primer.figma": {
|
|
1466
1682
|
"collection": "mode",
|
|
@@ -1479,6 +1695,10 @@
|
|
|
1479
1695
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
1480
1696
|
"dark-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
1481
1697
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1698
|
+
},
|
|
1699
|
+
"org.primer.llm": {
|
|
1700
|
+
"usage": ["open-badge", "open-label", "active-status-badge"],
|
|
1701
|
+
"rules": "Use for prominent open/active state indicators. Pair with fgColor.onEmphasis for text."
|
|
1482
1702
|
}
|
|
1483
1703
|
},
|
|
1484
1704
|
"key": "{bgColor.open.emphasis}"
|
|
@@ -1491,6 +1711,7 @@
|
|
|
1491
1711
|
"key": "{bgColor.open.muted}",
|
|
1492
1712
|
"$value": "#dafbe1",
|
|
1493
1713
|
"$type": "color",
|
|
1714
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1494
1715
|
"$extensions": {
|
|
1495
1716
|
"org.primer.figma": {
|
|
1496
1717
|
"collection": "mode",
|
|
@@ -1533,6 +1754,10 @@
|
|
|
1533
1754
|
"isSource": true,
|
|
1534
1755
|
"$type": "color"
|
|
1535
1756
|
}
|
|
1757
|
+
},
|
|
1758
|
+
"org.primer.llm": {
|
|
1759
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1760
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1536
1761
|
}
|
|
1537
1762
|
},
|
|
1538
1763
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1540,6 +1765,7 @@
|
|
|
1540
1765
|
"original": {
|
|
1541
1766
|
"$value": "{bgColor.success.muted}",
|
|
1542
1767
|
"$type": "color",
|
|
1768
|
+
"$description": "Subtle background for open state indicators (issues, PRs)",
|
|
1543
1769
|
"$extensions": {
|
|
1544
1770
|
"org.primer.figma": {
|
|
1545
1771
|
"collection": "mode",
|
|
@@ -1582,6 +1808,10 @@
|
|
|
1582
1808
|
"isSource": true,
|
|
1583
1809
|
"$type": "color"
|
|
1584
1810
|
}
|
|
1811
|
+
},
|
|
1812
|
+
"org.primer.llm": {
|
|
1813
|
+
"usage": ["open-issue", "open-pr", "active-status"],
|
|
1814
|
+
"rules": "Use for open/active status indicators. Specifically for GitHub issues and PRs."
|
|
1585
1815
|
}
|
|
1586
1816
|
},
|
|
1587
1817
|
"key": "{bgColor.open.muted}"
|
|
@@ -1594,6 +1824,7 @@
|
|
|
1594
1824
|
"key": "{bgColor.severe.emphasis}",
|
|
1595
1825
|
"$value": "#bc4c00",
|
|
1596
1826
|
"$type": "color",
|
|
1827
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1597
1828
|
"$extensions": {
|
|
1598
1829
|
"org.primer.figma": {
|
|
1599
1830
|
"collection": "mode",
|
|
@@ -1611,6 +1842,10 @@
|
|
|
1611
1842
|
"dark-high-contrast": "#471700",
|
|
1612
1843
|
"dark-dimmed-high-contrast": "#762c00",
|
|
1613
1844
|
"dark-protanopia-deuteranopia-high-contrast": "#471700"
|
|
1845
|
+
},
|
|
1846
|
+
"org.primer.llm": {
|
|
1847
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1848
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1614
1849
|
}
|
|
1615
1850
|
},
|
|
1616
1851
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1618,6 +1853,7 @@
|
|
|
1618
1853
|
"original": {
|
|
1619
1854
|
"$value": "{base.color.orange.5}",
|
|
1620
1855
|
"$type": "color",
|
|
1856
|
+
"$description": "Strong severe background for prominent high-priority warnings",
|
|
1621
1857
|
"$extensions": {
|
|
1622
1858
|
"org.primer.figma": {
|
|
1623
1859
|
"collection": "mode",
|
|
@@ -1635,6 +1871,10 @@
|
|
|
1635
1871
|
"dark-high-contrast": "{base.color.orange.9}",
|
|
1636
1872
|
"dark-dimmed-high-contrast": "{base.color.orange.7}",
|
|
1637
1873
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}"
|
|
1874
|
+
},
|
|
1875
|
+
"org.primer.llm": {
|
|
1876
|
+
"usage": ["severe-badge", "urgent-label", "high-priority-indicator"],
|
|
1877
|
+
"rules": "Use for prominent severe warnings. Pair with fgColor.onEmphasis for text."
|
|
1638
1878
|
}
|
|
1639
1879
|
},
|
|
1640
1880
|
"key": "{bgColor.severe.emphasis}"
|
|
@@ -1647,6 +1887,7 @@
|
|
|
1647
1887
|
"key": "{bgColor.severe.muted}",
|
|
1648
1888
|
"$value": "#fff1e5",
|
|
1649
1889
|
"$type": "color",
|
|
1890
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1650
1891
|
"$extensions": {
|
|
1651
1892
|
"org.primer.figma": {
|
|
1652
1893
|
"collection": "mode",
|
|
@@ -1673,6 +1914,10 @@
|
|
|
1673
1914
|
"isSource": true,
|
|
1674
1915
|
"$type": "color"
|
|
1675
1916
|
}
|
|
1917
|
+
},
|
|
1918
|
+
"org.primer.llm": {
|
|
1919
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1920
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1676
1921
|
}
|
|
1677
1922
|
},
|
|
1678
1923
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1680,6 +1925,7 @@
|
|
|
1680
1925
|
"original": {
|
|
1681
1926
|
"$value": "{base.color.orange.0}",
|
|
1682
1927
|
"$type": "color",
|
|
1928
|
+
"$description": "Subtle severe background for high-priority warnings",
|
|
1683
1929
|
"$extensions": {
|
|
1684
1930
|
"org.primer.figma": {
|
|
1685
1931
|
"collection": "mode",
|
|
@@ -1706,6 +1952,10 @@
|
|
|
1706
1952
|
"isSource": true,
|
|
1707
1953
|
"$type": "color"
|
|
1708
1954
|
}
|
|
1955
|
+
},
|
|
1956
|
+
"org.primer.llm": {
|
|
1957
|
+
"usage": ["high-priority-warning", "urgent-message", "escalation"],
|
|
1958
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with fgColor.severe for text."
|
|
1709
1959
|
}
|
|
1710
1960
|
},
|
|
1711
1961
|
"key": "{bgColor.severe.muted}"
|
|
@@ -1718,6 +1968,7 @@
|
|
|
1718
1968
|
"key": "{bgColor.sponsors.emphasis}",
|
|
1719
1969
|
"$value": "#bf3989",
|
|
1720
1970
|
"$type": "color",
|
|
1971
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1721
1972
|
"$extensions": {
|
|
1722
1973
|
"org.primer.figma": {
|
|
1723
1974
|
"collection": "mode",
|
|
@@ -1732,6 +1983,10 @@
|
|
|
1732
1983
|
"dark-dimmed-high-contrast": "#772057",
|
|
1733
1984
|
"dark-tritanopia-high-contrast": "#4d0336",
|
|
1734
1985
|
"dark-protanopia-deuteranopia-high-contrast": "#4d0336"
|
|
1986
|
+
},
|
|
1987
|
+
"org.primer.llm": {
|
|
1988
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
1989
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1735
1990
|
}
|
|
1736
1991
|
},
|
|
1737
1992
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1739,6 +1994,7 @@
|
|
|
1739
1994
|
"original": {
|
|
1740
1995
|
"$value": "{base.color.pink.5}",
|
|
1741
1996
|
"$type": "color",
|
|
1997
|
+
"$description": "Strong background for prominent GitHub Sponsors elements",
|
|
1742
1998
|
"$extensions": {
|
|
1743
1999
|
"org.primer.figma": {
|
|
1744
2000
|
"collection": "mode",
|
|
@@ -1753,6 +2009,10 @@
|
|
|
1753
2009
|
"dark-dimmed-high-contrast": "{base.color.pink.7}",
|
|
1754
2010
|
"dark-tritanopia-high-contrast": "{base.color.pink.9}",
|
|
1755
2011
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.pink.9}"
|
|
2012
|
+
},
|
|
2013
|
+
"org.primer.llm": {
|
|
2014
|
+
"usage": ["sponsor-button", "sponsor-badge", "funding-cta"],
|
|
2015
|
+
"rules": "Use for prominent Sponsors CTAs. Pair with fgColor.onEmphasis for text."
|
|
1756
2016
|
}
|
|
1757
2017
|
},
|
|
1758
2018
|
"key": "{bgColor.sponsors.emphasis}"
|
|
@@ -1765,6 +2025,7 @@
|
|
|
1765
2025
|
"key": "{bgColor.sponsors.muted}",
|
|
1766
2026
|
"$value": "#ffeff7",
|
|
1767
2027
|
"$type": "color",
|
|
2028
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1768
2029
|
"$extensions": {
|
|
1769
2030
|
"org.primer.figma": {
|
|
1770
2031
|
"collection": "mode",
|
|
@@ -1789,6 +2050,10 @@
|
|
|
1789
2050
|
"isSource": true,
|
|
1790
2051
|
"$type": "color"
|
|
1791
2052
|
}
|
|
2053
|
+
},
|
|
2054
|
+
"org.primer.llm": {
|
|
2055
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2056
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1792
2057
|
}
|
|
1793
2058
|
},
|
|
1794
2059
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1796,6 +2061,7 @@
|
|
|
1796
2061
|
"original": {
|
|
1797
2062
|
"$value": "{base.color.pink.0}",
|
|
1798
2063
|
"$type": "color",
|
|
2064
|
+
"$description": "Subtle background for GitHub Sponsors content",
|
|
1799
2065
|
"$extensions": {
|
|
1800
2066
|
"org.primer.figma": {
|
|
1801
2067
|
"collection": "mode",
|
|
@@ -1820,6 +2086,10 @@
|
|
|
1820
2086
|
"isSource": true,
|
|
1821
2087
|
"$type": "color"
|
|
1822
2088
|
}
|
|
2089
|
+
},
|
|
2090
|
+
"org.primer.llm": {
|
|
2091
|
+
"usage": ["sponsor-card", "sponsor-highlight", "funding-prompt"],
|
|
2092
|
+
"rules": "Use for GitHub Sponsors related content. Do NOT use for general pink-colored elements."
|
|
1823
2093
|
}
|
|
1824
2094
|
},
|
|
1825
2095
|
"key": "{bgColor.sponsors.muted}"
|
|
@@ -1832,6 +2102,7 @@
|
|
|
1832
2102
|
"key": "{bgColor.success.emphasis}",
|
|
1833
2103
|
"$value": "#1f883d",
|
|
1834
2104
|
"$type": "color",
|
|
2105
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1835
2106
|
"$extensions": {
|
|
1836
2107
|
"org.primer.figma": {
|
|
1837
2108
|
"collection": "mode",
|
|
@@ -1854,6 +2125,10 @@
|
|
|
1854
2125
|
"light-high-contrast": "#1a7f37",
|
|
1855
2126
|
"dark-high-contrast": "#002d11",
|
|
1856
2127
|
"dark-dimmed-high-contrast": "#044f1e"
|
|
2128
|
+
},
|
|
2129
|
+
"org.primer.llm": {
|
|
2130
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2131
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1857
2132
|
}
|
|
1858
2133
|
},
|
|
1859
2134
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1861,6 +2136,7 @@
|
|
|
1861
2136
|
"original": {
|
|
1862
2137
|
"$value": "#1f883d",
|
|
1863
2138
|
"$type": "color",
|
|
2139
|
+
"$description": "Strong success background for prominent positive actions",
|
|
1864
2140
|
"$extensions": {
|
|
1865
2141
|
"org.primer.figma": {
|
|
1866
2142
|
"collection": "mode",
|
|
@@ -1883,6 +2159,10 @@
|
|
|
1883
2159
|
"light-high-contrast": "{base.color.green.5}",
|
|
1884
2160
|
"dark-high-contrast": "{base.color.green.9}",
|
|
1885
2161
|
"dark-dimmed-high-contrast": "{base.color.green.7}"
|
|
2162
|
+
},
|
|
2163
|
+
"org.primer.llm": {
|
|
2164
|
+
"usage": ["merge-button", "confirm-action", "success-badge"],
|
|
2165
|
+
"rules": "Use for positive action buttons like merge or confirm. Pair with fgColor.onEmphasis for text."
|
|
1886
2166
|
}
|
|
1887
2167
|
},
|
|
1888
2168
|
"key": "{bgColor.success.emphasis}"
|
|
@@ -1895,6 +2175,7 @@
|
|
|
1895
2175
|
"key": "{bgColor.success.muted}",
|
|
1896
2176
|
"$value": "#dafbe1",
|
|
1897
2177
|
"$type": "color",
|
|
2178
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1898
2179
|
"$extensions": {
|
|
1899
2180
|
"org.primer.figma": {
|
|
1900
2181
|
"collection": "mode",
|
|
@@ -1944,6 +2225,10 @@
|
|
|
1944
2225
|
"isSource": true,
|
|
1945
2226
|
"$type": "color"
|
|
1946
2227
|
}
|
|
2228
|
+
},
|
|
2229
|
+
"org.primer.llm": {
|
|
2230
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2231
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
1947
2232
|
}
|
|
1948
2233
|
},
|
|
1949
2234
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -1951,6 +2236,7 @@
|
|
|
1951
2236
|
"original": {
|
|
1952
2237
|
"$value": "{base.color.green.0}",
|
|
1953
2238
|
"$type": "color",
|
|
2239
|
+
"$description": "Subtle success background for positive feedback and completed states",
|
|
1954
2240
|
"$extensions": {
|
|
1955
2241
|
"org.primer.figma": {
|
|
1956
2242
|
"collection": "mode",
|
|
@@ -2000,6 +2286,10 @@
|
|
|
2000
2286
|
"isSource": true,
|
|
2001
2287
|
"$type": "color"
|
|
2002
2288
|
}
|
|
2289
|
+
},
|
|
2290
|
+
"org.primer.llm": {
|
|
2291
|
+
"usage": ["success-message", "completed-state", "positive-feedback"],
|
|
2292
|
+
"rules": "Use for success states and positive feedback. Pair with fgColor.success for text."
|
|
2003
2293
|
}
|
|
2004
2294
|
},
|
|
2005
2295
|
"key": "{bgColor.success.muted}"
|
|
@@ -2012,6 +2302,7 @@
|
|
|
2012
2302
|
"key": "{bgColor.transparent}",
|
|
2013
2303
|
"$value": "#ffffff00",
|
|
2014
2304
|
"$type": "color",
|
|
2305
|
+
"$description": "Fully transparent background",
|
|
2015
2306
|
"$extensions": {
|
|
2016
2307
|
"org.primer.figma": {
|
|
2017
2308
|
"collection": "mode",
|
|
@@ -2020,6 +2311,10 @@
|
|
|
2020
2311
|
"codeSyntax": {
|
|
2021
2312
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2022
2313
|
}
|
|
2314
|
+
},
|
|
2315
|
+
"org.primer.llm": {
|
|
2316
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2317
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2023
2318
|
}
|
|
2024
2319
|
},
|
|
2025
2320
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2027,6 +2322,7 @@
|
|
|
2027
2322
|
"original": {
|
|
2028
2323
|
"$value": "{base.color.transparent}",
|
|
2029
2324
|
"$type": "color",
|
|
2325
|
+
"$description": "Fully transparent background",
|
|
2030
2326
|
"$extensions": {
|
|
2031
2327
|
"org.primer.figma": {
|
|
2032
2328
|
"collection": "mode",
|
|
@@ -2035,6 +2331,10 @@
|
|
|
2035
2331
|
"codeSyntax": {
|
|
2036
2332
|
"web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */"
|
|
2037
2333
|
}
|
|
2334
|
+
},
|
|
2335
|
+
"org.primer.llm": {
|
|
2336
|
+
"usage": ["ghost-button", "icon-button", "overlay-trigger"],
|
|
2337
|
+
"rules": "Use for ghost/icon buttons or when element should blend with parent. Ensure sufficient contrast for interactive states."
|
|
2038
2338
|
}
|
|
2039
2339
|
},
|
|
2040
2340
|
"key": "{bgColor.transparent}"
|
|
@@ -2047,6 +2347,7 @@
|
|
|
2047
2347
|
"key": "{bgColor.upsell.emphasis}",
|
|
2048
2348
|
"$value": "#8250df",
|
|
2049
2349
|
"$type": "color",
|
|
2350
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2050
2351
|
"$extensions": {
|
|
2051
2352
|
"org.primer.figma": {
|
|
2052
2353
|
"collection": "mode",
|
|
@@ -2055,6 +2356,10 @@
|
|
|
2055
2356
|
"codeSyntax": {
|
|
2056
2357
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2057
2358
|
}
|
|
2359
|
+
},
|
|
2360
|
+
"org.primer.llm": {
|
|
2361
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2362
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2058
2363
|
}
|
|
2059
2364
|
},
|
|
2060
2365
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2062,6 +2367,7 @@
|
|
|
2062
2367
|
"original": {
|
|
2063
2368
|
"$value": "{bgColor.done.emphasis}",
|
|
2064
2369
|
"$type": "color",
|
|
2370
|
+
"$description": "Strong background for prominent upsell elements",
|
|
2065
2371
|
"$extensions": {
|
|
2066
2372
|
"org.primer.figma": {
|
|
2067
2373
|
"collection": "mode",
|
|
@@ -2070,6 +2376,10 @@
|
|
|
2070
2376
|
"codeSyntax": {
|
|
2071
2377
|
"web": "var(--bgColor-upsell-emphasis)"
|
|
2072
2378
|
}
|
|
2379
|
+
},
|
|
2380
|
+
"org.primer.llm": {
|
|
2381
|
+
"usage": ["upgrade-button", "premium-badge", "upsell-cta"],
|
|
2382
|
+
"rules": "Use for prominent upgrade/upsell CTAs. Pair with fgColor.onEmphasis for text."
|
|
2073
2383
|
}
|
|
2074
2384
|
},
|
|
2075
2385
|
"key": "{bgColor.upsell.emphasis}"
|
|
@@ -2082,6 +2392,7 @@
|
|
|
2082
2392
|
"key": "{bgColor.upsell.muted}",
|
|
2083
2393
|
"$value": "#fbefff",
|
|
2084
2394
|
"$type": "color",
|
|
2395
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2085
2396
|
"$extensions": {
|
|
2086
2397
|
"org.primer.figma": {
|
|
2087
2398
|
"collection": "mode",
|
|
@@ -2090,6 +2401,10 @@
|
|
|
2090
2401
|
"codeSyntax": {
|
|
2091
2402
|
"web": "var(--bgColor-upsell-muted)"
|
|
2092
2403
|
}
|
|
2404
|
+
},
|
|
2405
|
+
"org.primer.llm": {
|
|
2406
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2407
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2093
2408
|
}
|
|
2094
2409
|
},
|
|
2095
2410
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2097,6 +2412,7 @@
|
|
|
2097
2412
|
"original": {
|
|
2098
2413
|
"$value": "{bgColor.done.muted}",
|
|
2099
2414
|
"$type": "color",
|
|
2415
|
+
"$description": "Subtle background for upsell and promotional content",
|
|
2100
2416
|
"$extensions": {
|
|
2101
2417
|
"org.primer.figma": {
|
|
2102
2418
|
"collection": "mode",
|
|
@@ -2105,6 +2421,10 @@
|
|
|
2105
2421
|
"codeSyntax": {
|
|
2106
2422
|
"web": "var(--bgColor-upsell-muted)"
|
|
2107
2423
|
}
|
|
2424
|
+
},
|
|
2425
|
+
"org.primer.llm": {
|
|
2426
|
+
"usage": ["upgrade-prompt", "premium-feature", "promotional-banner"],
|
|
2427
|
+
"rules": "Use for upgrade prompts and premium feature highlights. Do NOT use for regular content."
|
|
2108
2428
|
}
|
|
2109
2429
|
},
|
|
2110
2430
|
"key": "{bgColor.upsell.muted}"
|
|
@@ -2117,6 +2437,7 @@
|
|
|
2117
2437
|
"key": "{bgColor.white}",
|
|
2118
2438
|
"$value": "#ffffff",
|
|
2119
2439
|
"$type": "color",
|
|
2440
|
+
"$description": "Pure white background",
|
|
2120
2441
|
"$extensions": {
|
|
2121
2442
|
"org.primer.figma": {
|
|
2122
2443
|
"collection": "mode",
|
|
@@ -2125,6 +2446,10 @@
|
|
|
2125
2446
|
},
|
|
2126
2447
|
"org.primer.overrides": {
|
|
2127
2448
|
"dark": "#1f2328"
|
|
2449
|
+
},
|
|
2450
|
+
"org.primer.llm": {
|
|
2451
|
+
"doNotUse": true,
|
|
2452
|
+
"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."
|
|
2128
2453
|
}
|
|
2129
2454
|
},
|
|
2130
2455
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -2132,6 +2457,7 @@
|
|
|
2132
2457
|
"original": {
|
|
2133
2458
|
"$value": "{base.color.neutral.0}",
|
|
2134
2459
|
"$type": "color",
|
|
2460
|
+
"$description": "Pure white background",
|
|
2135
2461
|
"$extensions": {
|
|
2136
2462
|
"org.primer.figma": {
|
|
2137
2463
|
"collection": "mode",
|
|
@@ -2140,6 +2466,10 @@
|
|
|
2140
2466
|
},
|
|
2141
2467
|
"org.primer.overrides": {
|
|
2142
2468
|
"dark": "{base.color.neutral.13}"
|
|
2469
|
+
},
|
|
2470
|
+
"org.primer.llm": {
|
|
2471
|
+
"doNotUse": true,
|
|
2472
|
+
"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."
|
|
2143
2473
|
}
|
|
2144
2474
|
},
|
|
2145
2475
|
"key": "{bgColor.white}"
|
|
@@ -2150,7 +2480,7 @@
|
|
|
2150
2480
|
},
|
|
2151
2481
|
"border-accent-emphasis": {
|
|
2152
2482
|
"key": "{border.accent.emphasis}",
|
|
2153
|
-
"$value": "0.
|
|
2483
|
+
"$value": "0.0625rem,1px solid #0969da",
|
|
2154
2484
|
"$type": "border",
|
|
2155
2485
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2156
2486
|
"isSource": true,
|
|
@@ -2169,7 +2499,7 @@
|
|
|
2169
2499
|
},
|
|
2170
2500
|
"border-accent-muted": {
|
|
2171
2501
|
"key": "{border.accent.muted}",
|
|
2172
|
-
"$value": "0.
|
|
2502
|
+
"$value": "0.0625rem,1px solid #54aeff66",
|
|
2173
2503
|
"$type": "border",
|
|
2174
2504
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2175
2505
|
"isSource": true,
|
|
@@ -2188,7 +2518,7 @@
|
|
|
2188
2518
|
},
|
|
2189
2519
|
"border-attention-emphasis": {
|
|
2190
2520
|
"key": "{border.attention.emphasis}",
|
|
2191
|
-
"$value": "0.
|
|
2521
|
+
"$value": "0.0625rem,1px solid #9a6700",
|
|
2192
2522
|
"$type": "border",
|
|
2193
2523
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2194
2524
|
"isSource": true,
|
|
@@ -2207,7 +2537,7 @@
|
|
|
2207
2537
|
},
|
|
2208
2538
|
"border-attention-muted": {
|
|
2209
2539
|
"key": "{border.attention.muted}",
|
|
2210
|
-
"$value": "0.
|
|
2540
|
+
"$value": "0.0625rem,1px solid #d4a72c66",
|
|
2211
2541
|
"$type": "border",
|
|
2212
2542
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2213
2543
|
"isSource": true,
|
|
@@ -2226,7 +2556,7 @@
|
|
|
2226
2556
|
},
|
|
2227
2557
|
"border-closed-emphasis": {
|
|
2228
2558
|
"key": "{border.closed.emphasis}",
|
|
2229
|
-
"$value": "0.
|
|
2559
|
+
"$value": "0.0625rem,1px solid #cf222e",
|
|
2230
2560
|
"$type": "border",
|
|
2231
2561
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2232
2562
|
"isSource": true,
|
|
@@ -2241,7 +2571,7 @@
|
|
|
2241
2571
|
},
|
|
2242
2572
|
"border-closed-muted": {
|
|
2243
2573
|
"key": "{border.closed.muted}",
|
|
2244
|
-
"$value": "0.
|
|
2574
|
+
"$value": "0.0625rem,1px solid #ff818266",
|
|
2245
2575
|
"$type": "border",
|
|
2246
2576
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2247
2577
|
"isSource": true,
|
|
@@ -2256,7 +2586,7 @@
|
|
|
2256
2586
|
},
|
|
2257
2587
|
"border-danger-emphasis": {
|
|
2258
2588
|
"key": "{border.danger.emphasis}",
|
|
2259
|
-
"$value": "0.
|
|
2589
|
+
"$value": "0.0625rem,1px solid #cf222e",
|
|
2260
2590
|
"$type": "border",
|
|
2261
2591
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2262
2592
|
"isSource": true,
|
|
@@ -2275,7 +2605,7 @@
|
|
|
2275
2605
|
},
|
|
2276
2606
|
"border-danger-muted": {
|
|
2277
2607
|
"key": "{border.danger.muted}",
|
|
2278
|
-
"$value": "0.
|
|
2608
|
+
"$value": "0.0625rem,1px solid #ff818266",
|
|
2279
2609
|
"$type": "border",
|
|
2280
2610
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2281
2611
|
"isSource": true,
|
|
@@ -2294,7 +2624,7 @@
|
|
|
2294
2624
|
},
|
|
2295
2625
|
"border-default": {
|
|
2296
2626
|
"key": "{border.default}",
|
|
2297
|
-
"$value": "0.
|
|
2627
|
+
"$value": "0.0625rem,1px solid #d1d9e0",
|
|
2298
2628
|
"$type": "border",
|
|
2299
2629
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2300
2630
|
"isSource": true,
|
|
@@ -2313,7 +2643,7 @@
|
|
|
2313
2643
|
},
|
|
2314
2644
|
"border-disabled": {
|
|
2315
2645
|
"key": "{border.disabled}",
|
|
2316
|
-
"$value": "0.
|
|
2646
|
+
"$value": "0.0625rem,1px solid #818b981a",
|
|
2317
2647
|
"$type": "border",
|
|
2318
2648
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2319
2649
|
"isSource": true,
|
|
@@ -2332,7 +2662,7 @@
|
|
|
2332
2662
|
},
|
|
2333
2663
|
"border-done-emphasis": {
|
|
2334
2664
|
"key": "{border.done.emphasis}",
|
|
2335
|
-
"$value": "0.
|
|
2665
|
+
"$value": "0.0625rem,1px solid #8250df",
|
|
2336
2666
|
"$type": "border",
|
|
2337
2667
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2338
2668
|
"isSource": true,
|
|
@@ -2351,7 +2681,7 @@
|
|
|
2351
2681
|
},
|
|
2352
2682
|
"border-done-muted": {
|
|
2353
2683
|
"key": "{border.done.muted}",
|
|
2354
|
-
"$value": "0.
|
|
2684
|
+
"$value": "0.0625rem,1px solid #c297ff66",
|
|
2355
2685
|
"$type": "border",
|
|
2356
2686
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2357
2687
|
"isSource": true,
|
|
@@ -2370,7 +2700,7 @@
|
|
|
2370
2700
|
},
|
|
2371
2701
|
"border-emphasis": {
|
|
2372
2702
|
"key": "{border.emphasis}",
|
|
2373
|
-
"$value": "0.
|
|
2703
|
+
"$value": "0.0625rem,1px solid #818b98",
|
|
2374
2704
|
"$type": "border",
|
|
2375
2705
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2376
2706
|
"isSource": true,
|
|
@@ -2389,7 +2719,7 @@
|
|
|
2389
2719
|
},
|
|
2390
2720
|
"border-muted": {
|
|
2391
2721
|
"key": "{border.muted}",
|
|
2392
|
-
"$value": "0.
|
|
2722
|
+
"$value": "0.0625rem,1px solid #d1d9e0b3",
|
|
2393
2723
|
"$type": "border",
|
|
2394
2724
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2395
2725
|
"isSource": true,
|
|
@@ -2408,7 +2738,7 @@
|
|
|
2408
2738
|
},
|
|
2409
2739
|
"border-neutral-emphasis": {
|
|
2410
2740
|
"key": "{border.neutral.emphasis}",
|
|
2411
|
-
"$value": "0.
|
|
2741
|
+
"$value": "0.0625rem,1px solid #59636e",
|
|
2412
2742
|
"$type": "border",
|
|
2413
2743
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2414
2744
|
"isSource": true,
|
|
@@ -2427,7 +2757,7 @@
|
|
|
2427
2757
|
},
|
|
2428
2758
|
"border-neutral-muted": {
|
|
2429
2759
|
"key": "{border.neutral.muted}",
|
|
2430
|
-
"$value": "0.
|
|
2760
|
+
"$value": "0.0625rem,1px solid #d1d9e0b3",
|
|
2431
2761
|
"$type": "border",
|
|
2432
2762
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2433
2763
|
"isSource": true,
|
|
@@ -2446,7 +2776,7 @@
|
|
|
2446
2776
|
},
|
|
2447
2777
|
"border-open-emphasis": {
|
|
2448
2778
|
"key": "{border.open.emphasis}",
|
|
2449
|
-
"$value": "0.
|
|
2779
|
+
"$value": "0.0625rem,1px solid #1a7f37",
|
|
2450
2780
|
"$type": "border",
|
|
2451
2781
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2452
2782
|
"isSource": true,
|
|
@@ -2461,7 +2791,7 @@
|
|
|
2461
2791
|
},
|
|
2462
2792
|
"border-open-muted": {
|
|
2463
2793
|
"key": "{border.open.muted}",
|
|
2464
|
-
"$value": "0.
|
|
2794
|
+
"$value": "0.0625rem,1px solid #4ac26b66",
|
|
2465
2795
|
"$type": "border",
|
|
2466
2796
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2467
2797
|
"isSource": true,
|
|
@@ -2476,7 +2806,7 @@
|
|
|
2476
2806
|
},
|
|
2477
2807
|
"border-severe-emphasis": {
|
|
2478
2808
|
"key": "{border.severe.emphasis}",
|
|
2479
|
-
"$value": "0.
|
|
2809
|
+
"$value": "0.0625rem,1px solid #bc4c00",
|
|
2480
2810
|
"$type": "border",
|
|
2481
2811
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2482
2812
|
"isSource": true,
|
|
@@ -2495,7 +2825,7 @@
|
|
|
2495
2825
|
},
|
|
2496
2826
|
"border-severe-muted": {
|
|
2497
2827
|
"key": "{border.severe.muted}",
|
|
2498
|
-
"$value": "0.
|
|
2828
|
+
"$value": "0.0625rem,1px solid #fb8f4466",
|
|
2499
2829
|
"$type": "border",
|
|
2500
2830
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2501
2831
|
"isSource": true,
|
|
@@ -2514,7 +2844,7 @@
|
|
|
2514
2844
|
},
|
|
2515
2845
|
"border-sponsors-emphasis": {
|
|
2516
2846
|
"key": "{border.sponsors.emphasis}",
|
|
2517
|
-
"$value": "0.
|
|
2847
|
+
"$value": "0.0625rem,1px solid #bf3989",
|
|
2518
2848
|
"$type": "border",
|
|
2519
2849
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2520
2850
|
"isSource": true,
|
|
@@ -2533,7 +2863,7 @@
|
|
|
2533
2863
|
},
|
|
2534
2864
|
"border-sponsors-muted": {
|
|
2535
2865
|
"key": "{border.sponsors.muted}",
|
|
2536
|
-
"$value": "0.
|
|
2866
|
+
"$value": "0.0625rem,1px solid #ff80c866",
|
|
2537
2867
|
"$type": "border",
|
|
2538
2868
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2539
2869
|
"isSource": true,
|
|
@@ -2552,7 +2882,7 @@
|
|
|
2552
2882
|
},
|
|
2553
2883
|
"border-success-emphasis": {
|
|
2554
2884
|
"key": "{border.success.emphasis}",
|
|
2555
|
-
"$value": "0.
|
|
2885
|
+
"$value": "0.0625rem,1px solid #1a7f37",
|
|
2556
2886
|
"$type": "border",
|
|
2557
2887
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2558
2888
|
"isSource": true,
|
|
@@ -2571,7 +2901,7 @@
|
|
|
2571
2901
|
},
|
|
2572
2902
|
"border-success-muted": {
|
|
2573
2903
|
"key": "{border.success.muted}",
|
|
2574
|
-
"$value": "0.
|
|
2904
|
+
"$value": "0.0625rem,1px solid #4ac26b66",
|
|
2575
2905
|
"$type": "border",
|
|
2576
2906
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2577
2907
|
"isSource": true,
|
|
@@ -2590,7 +2920,7 @@
|
|
|
2590
2920
|
},
|
|
2591
2921
|
"border-transparent": {
|
|
2592
2922
|
"key": "{border.transparent}",
|
|
2593
|
-
"$value": "0.
|
|
2923
|
+
"$value": "0.0625rem,1px solid #ffffff00",
|
|
2594
2924
|
"$type": "border",
|
|
2595
2925
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2596
2926
|
"isSource": true,
|
|
@@ -2609,7 +2939,7 @@
|
|
|
2609
2939
|
},
|
|
2610
2940
|
"border-upsell-emphasis": {
|
|
2611
2941
|
"key": "{border.upsell.emphasis}",
|
|
2612
|
-
"$value": "0.
|
|
2942
|
+
"$value": "0.0625rem,1px solid #8250df",
|
|
2613
2943
|
"$type": "border",
|
|
2614
2944
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2615
2945
|
"isSource": true,
|
|
@@ -2628,7 +2958,7 @@
|
|
|
2628
2958
|
},
|
|
2629
2959
|
"border-upsell-muted": {
|
|
2630
2960
|
"key": "{border.upsell.muted}",
|
|
2631
|
-
"$value": "0.
|
|
2961
|
+
"$value": "0.0625rem,1px solid #c297ff66",
|
|
2632
2962
|
"$type": "border",
|
|
2633
2963
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
2634
2964
|
"isSource": true,
|
|
@@ -2649,6 +2979,7 @@
|
|
|
2649
2979
|
"key": "{borderColor.accent.emphasis}",
|
|
2650
2980
|
"$value": "#0969da",
|
|
2651
2981
|
"$type": "color",
|
|
2982
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2652
2983
|
"$extensions": {
|
|
2653
2984
|
"org.primer.figma": {
|
|
2654
2985
|
"collection": "mode",
|
|
@@ -2660,6 +2991,10 @@
|
|
|
2660
2991
|
},
|
|
2661
2992
|
"org.primer.overrides": {
|
|
2662
2993
|
"dark-dimmed-high-contrast": "#80ccff"
|
|
2994
|
+
},
|
|
2995
|
+
"org.primer.llm": {
|
|
2996
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
2997
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2663
2998
|
}
|
|
2664
2999
|
},
|
|
2665
3000
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2667,6 +3002,7 @@
|
|
|
2667
3002
|
"original": {
|
|
2668
3003
|
"$value": "{base.color.blue.5}",
|
|
2669
3004
|
"$type": "color",
|
|
3005
|
+
"$description": "Strong accent border for selected or focused elements",
|
|
2670
3006
|
"$extensions": {
|
|
2671
3007
|
"org.primer.figma": {
|
|
2672
3008
|
"collection": "mode",
|
|
@@ -2678,6 +3014,10 @@
|
|
|
2678
3014
|
},
|
|
2679
3015
|
"org.primer.overrides": {
|
|
2680
3016
|
"dark-dimmed-high-contrast": "{base.color.blue.2}"
|
|
3017
|
+
},
|
|
3018
|
+
"org.primer.llm": {
|
|
3019
|
+
"usage": ["accent-emphasis", "selected-border", "focus-border"],
|
|
3020
|
+
"rules": "Use for selected elements and focus states. Strong visual emphasis."
|
|
2681
3021
|
}
|
|
2682
3022
|
},
|
|
2683
3023
|
"key": "{borderColor.accent.emphasis}"
|
|
@@ -2690,6 +3030,7 @@
|
|
|
2690
3030
|
"key": "{borderColor.accent.muted}",
|
|
2691
3031
|
"$value": "#54aeff66",
|
|
2692
3032
|
"$type": "color",
|
|
3033
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2693
3034
|
"$extensions": {
|
|
2694
3035
|
"org.primer.figma": {
|
|
2695
3036
|
"collection": "mode",
|
|
@@ -2750,6 +3091,10 @@
|
|
|
2750
3091
|
"isSource": true,
|
|
2751
3092
|
"$type": "color"
|
|
2752
3093
|
}
|
|
3094
|
+
},
|
|
3095
|
+
"org.primer.llm": {
|
|
3096
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3097
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2753
3098
|
}
|
|
2754
3099
|
},
|
|
2755
3100
|
"alpha": 0.4,
|
|
@@ -2758,6 +3103,7 @@
|
|
|
2758
3103
|
"original": {
|
|
2759
3104
|
"$value": "{base.color.blue.3}",
|
|
2760
3105
|
"$type": "color",
|
|
3106
|
+
"$description": "Subtle accent border for selected or focused elements",
|
|
2761
3107
|
"$extensions": {
|
|
2762
3108
|
"org.primer.figma": {
|
|
2763
3109
|
"collection": "mode",
|
|
@@ -2818,6 +3164,10 @@
|
|
|
2818
3164
|
"isSource": true,
|
|
2819
3165
|
"$type": "color"
|
|
2820
3166
|
}
|
|
3167
|
+
},
|
|
3168
|
+
"org.primer.llm": {
|
|
3169
|
+
"usage": ["accent-muted", "selected-muted", "info-muted"],
|
|
3170
|
+
"rules": "Use for accent-colored borders on selected elements. Pair with bgColor.accent.muted."
|
|
2821
3171
|
}
|
|
2822
3172
|
},
|
|
2823
3173
|
"alpha": 0.4,
|
|
@@ -2831,6 +3181,7 @@
|
|
|
2831
3181
|
"key": "{borderColor.attention.emphasis}",
|
|
2832
3182
|
"$value": "#9a6700",
|
|
2833
3183
|
"$type": "color",
|
|
3184
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2834
3185
|
"$extensions": {
|
|
2835
3186
|
"org.primer.figma": {
|
|
2836
3187
|
"collection": "mode",
|
|
@@ -2842,6 +3193,10 @@
|
|
|
2842
3193
|
},
|
|
2843
3194
|
"org.primer.overrides": {
|
|
2844
3195
|
"dark-dimmed-high-contrast": "#eac54f"
|
|
3196
|
+
},
|
|
3197
|
+
"org.primer.llm": {
|
|
3198
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3199
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2845
3200
|
}
|
|
2846
3201
|
},
|
|
2847
3202
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -2849,6 +3204,7 @@
|
|
|
2849
3204
|
"original": {
|
|
2850
3205
|
"$value": "{base.color.yellow.5}",
|
|
2851
3206
|
"$type": "color",
|
|
3207
|
+
"$description": "Strong attention border for prominent warnings",
|
|
2852
3208
|
"$extensions": {
|
|
2853
3209
|
"org.primer.figma": {
|
|
2854
3210
|
"collection": "mode",
|
|
@@ -2860,6 +3216,10 @@
|
|
|
2860
3216
|
},
|
|
2861
3217
|
"org.primer.overrides": {
|
|
2862
3218
|
"dark-dimmed-high-contrast": "{base.color.yellow.2}"
|
|
3219
|
+
},
|
|
3220
|
+
"org.primer.llm": {
|
|
3221
|
+
"usage": ["attention-emphasis", "warning-emphasis", "caution-emphasis"],
|
|
3222
|
+
"rules": "Use for emphasized warning borders. Pair with bgColor.attention.emphasis."
|
|
2863
3223
|
}
|
|
2864
3224
|
},
|
|
2865
3225
|
"key": "{borderColor.attention.emphasis}"
|
|
@@ -2872,6 +3232,7 @@
|
|
|
2872
3232
|
"key": "{borderColor.attention.muted}",
|
|
2873
3233
|
"$value": "#d4a72c66",
|
|
2874
3234
|
"$type": "color",
|
|
3235
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2875
3236
|
"$extensions": {
|
|
2876
3237
|
"org.primer.figma": {
|
|
2877
3238
|
"collection": "mode",
|
|
@@ -2932,6 +3293,10 @@
|
|
|
2932
3293
|
"isSource": true,
|
|
2933
3294
|
"$type": "color"
|
|
2934
3295
|
}
|
|
3296
|
+
},
|
|
3297
|
+
"org.primer.llm": {
|
|
3298
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3299
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
2935
3300
|
}
|
|
2936
3301
|
},
|
|
2937
3302
|
"alpha": 0.4,
|
|
@@ -2940,6 +3305,7 @@
|
|
|
2940
3305
|
"original": {
|
|
2941
3306
|
"$value": "{base.color.yellow.3}",
|
|
2942
3307
|
"$type": "color",
|
|
3308
|
+
"$description": "Subtle attention border for warnings and caution states",
|
|
2943
3309
|
"$extensions": {
|
|
2944
3310
|
"org.primer.figma": {
|
|
2945
3311
|
"collection": "mode",
|
|
@@ -3000,6 +3366,10 @@
|
|
|
3000
3366
|
"isSource": true,
|
|
3001
3367
|
"$type": "color"
|
|
3002
3368
|
}
|
|
3369
|
+
},
|
|
3370
|
+
"org.primer.llm": {
|
|
3371
|
+
"usage": ["attention-muted", "warning-muted", "caution-muted"],
|
|
3372
|
+
"rules": "Use for warning state borders. Pair with bgColor.attention.muted."
|
|
3003
3373
|
}
|
|
3004
3374
|
},
|
|
3005
3375
|
"alpha": 0.4,
|
|
@@ -3013,6 +3383,7 @@
|
|
|
3013
3383
|
"key": "{borderColor.closed.emphasis}",
|
|
3014
3384
|
"$value": "#cf222e",
|
|
3015
3385
|
"$type": "color",
|
|
3386
|
+
"$description": "Strong border for closed state badges",
|
|
3016
3387
|
"$extensions": {
|
|
3017
3388
|
"org.primer.figma": {
|
|
3018
3389
|
"collection": "mode",
|
|
@@ -3031,6 +3402,10 @@
|
|
|
3031
3402
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
3032
3403
|
"light-tritanopia": "#818b98",
|
|
3033
3404
|
"light-tritanopia-high-contrast": "#818b98"
|
|
3405
|
+
},
|
|
3406
|
+
"org.primer.llm": {
|
|
3407
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3408
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3034
3409
|
}
|
|
3035
3410
|
},
|
|
3036
3411
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3038,6 +3413,7 @@
|
|
|
3038
3413
|
"original": {
|
|
3039
3414
|
"$value": "{borderColor.danger.emphasis}",
|
|
3040
3415
|
"$type": "color",
|
|
3416
|
+
"$description": "Strong border for closed state badges",
|
|
3041
3417
|
"$extensions": {
|
|
3042
3418
|
"org.primer.figma": {
|
|
3043
3419
|
"collection": "mode",
|
|
@@ -3056,6 +3432,10 @@
|
|
|
3056
3432
|
"dark-tritanopia-high-contrast": "{borderColor.emphasis}",
|
|
3057
3433
|
"light-tritanopia": "{borderColor.emphasis}",
|
|
3058
3434
|
"light-tritanopia-high-contrast": "{borderColor.emphasis}"
|
|
3435
|
+
},
|
|
3436
|
+
"org.primer.llm": {
|
|
3437
|
+
"usage": ["closed-emphasis", "closed-status"],
|
|
3438
|
+
"rules": "Use for emphasized closed state borders. Pair with bgColor.closed.emphasis."
|
|
3059
3439
|
}
|
|
3060
3440
|
},
|
|
3061
3441
|
"key": "{borderColor.closed.emphasis}"
|
|
@@ -3068,6 +3448,7 @@
|
|
|
3068
3448
|
"key": "{borderColor.closed.muted}",
|
|
3069
3449
|
"$value": "#ff818266",
|
|
3070
3450
|
"$type": "color",
|
|
3451
|
+
"$description": "Subtle border for closed state indicators",
|
|
3071
3452
|
"$extensions": {
|
|
3072
3453
|
"org.primer.figma": {
|
|
3073
3454
|
"collection": "mode",
|
|
@@ -3134,6 +3515,10 @@
|
|
|
3134
3515
|
"isSource": true,
|
|
3135
3516
|
"$type": "color"
|
|
3136
3517
|
}
|
|
3518
|
+
},
|
|
3519
|
+
"org.primer.llm": {
|
|
3520
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3521
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3137
3522
|
}
|
|
3138
3523
|
},
|
|
3139
3524
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3141,6 +3526,7 @@
|
|
|
3141
3526
|
"original": {
|
|
3142
3527
|
"$value": "{borderColor.danger.muted}",
|
|
3143
3528
|
"$type": "color",
|
|
3529
|
+
"$description": "Subtle border for closed state indicators",
|
|
3144
3530
|
"$extensions": {
|
|
3145
3531
|
"org.primer.figma": {
|
|
3146
3532
|
"collection": "mode",
|
|
@@ -3207,6 +3593,10 @@
|
|
|
3207
3593
|
"isSource": true,
|
|
3208
3594
|
"$type": "color"
|
|
3209
3595
|
}
|
|
3596
|
+
},
|
|
3597
|
+
"org.primer.llm": {
|
|
3598
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3599
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3210
3600
|
}
|
|
3211
3601
|
},
|
|
3212
3602
|
"key": "{borderColor.closed.muted}"
|
|
@@ -3219,6 +3609,7 @@
|
|
|
3219
3609
|
"key": "{borderColor.danger.emphasis}",
|
|
3220
3610
|
"$value": "#cf222e",
|
|
3221
3611
|
"$type": "color",
|
|
3612
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3222
3613
|
"$extensions": {
|
|
3223
3614
|
"org.primer.figma": {
|
|
3224
3615
|
"collection": "mode",
|
|
@@ -3254,6 +3645,10 @@
|
|
|
3254
3645
|
"$type": "color"
|
|
3255
3646
|
},
|
|
3256
3647
|
"dark-dimmed-high-contrast": "#ffaba8"
|
|
3648
|
+
},
|
|
3649
|
+
"org.primer.llm": {
|
|
3650
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3651
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3257
3652
|
}
|
|
3258
3653
|
},
|
|
3259
3654
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3261,6 +3656,7 @@
|
|
|
3261
3656
|
"original": {
|
|
3262
3657
|
"$value": "{base.color.red.5}",
|
|
3263
3658
|
"$type": "color",
|
|
3659
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3264
3660
|
"$extensions": {
|
|
3265
3661
|
"org.primer.figma": {
|
|
3266
3662
|
"collection": "mode",
|
|
@@ -3296,6 +3692,10 @@
|
|
|
3296
3692
|
"$type": "color"
|
|
3297
3693
|
},
|
|
3298
3694
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3695
|
+
},
|
|
3696
|
+
"org.primer.llm": {
|
|
3697
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3698
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3299
3699
|
}
|
|
3300
3700
|
},
|
|
3301
3701
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3308,6 +3708,7 @@
|
|
|
3308
3708
|
"key": "{borderColor.danger.muted}",
|
|
3309
3709
|
"$value": "#ff818266",
|
|
3310
3710
|
"$type": "color",
|
|
3711
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3311
3712
|
"$extensions": {
|
|
3312
3713
|
"org.primer.figma": {
|
|
3313
3714
|
"collection": "mode",
|
|
@@ -3381,6 +3782,10 @@
|
|
|
3381
3782
|
"isSource": true,
|
|
3382
3783
|
"$type": "color"
|
|
3383
3784
|
}
|
|
3785
|
+
},
|
|
3786
|
+
"org.primer.llm": {
|
|
3787
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3788
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3384
3789
|
}
|
|
3385
3790
|
},
|
|
3386
3791
|
"alpha": 0.4,
|
|
@@ -3389,6 +3794,7 @@
|
|
|
3389
3794
|
"original": {
|
|
3390
3795
|
"$value": "{base.color.red.3}",
|
|
3391
3796
|
"$type": "color",
|
|
3797
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3392
3798
|
"$extensions": {
|
|
3393
3799
|
"org.primer.figma": {
|
|
3394
3800
|
"collection": "mode",
|
|
@@ -3462,6 +3868,10 @@
|
|
|
3462
3868
|
"isSource": true,
|
|
3463
3869
|
"$type": "color"
|
|
3464
3870
|
}
|
|
3871
|
+
},
|
|
3872
|
+
"org.primer.llm": {
|
|
3873
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3874
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3465
3875
|
}
|
|
3466
3876
|
},
|
|
3467
3877
|
"alpha": 0.4,
|
|
@@ -3475,6 +3885,7 @@
|
|
|
3475
3885
|
"key": "{borderColor.default}",
|
|
3476
3886
|
"$value": "#d1d9e0",
|
|
3477
3887
|
"$type": "color",
|
|
3888
|
+
"$description": "Default border color for most UI elements",
|
|
3478
3889
|
"$extensions": {
|
|
3479
3890
|
"org.primer.overrides": {
|
|
3480
3891
|
"dark": "#c8d1da",
|
|
@@ -3494,6 +3905,10 @@
|
|
|
3494
3905
|
"codeSyntax": {
|
|
3495
3906
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3496
3907
|
}
|
|
3908
|
+
},
|
|
3909
|
+
"org.primer.llm": {
|
|
3910
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3911
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3497
3912
|
}
|
|
3498
3913
|
},
|
|
3499
3914
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3501,6 +3916,7 @@
|
|
|
3501
3916
|
"original": {
|
|
3502
3917
|
"$value": "{base.color.neutral.6}",
|
|
3503
3918
|
"$type": "color",
|
|
3919
|
+
"$description": "Default border color for most UI elements",
|
|
3504
3920
|
"$extensions": {
|
|
3505
3921
|
"org.primer.overrides": {
|
|
3506
3922
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3520,6 +3936,10 @@
|
|
|
3520
3936
|
"codeSyntax": {
|
|
3521
3937
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3522
3938
|
}
|
|
3939
|
+
},
|
|
3940
|
+
"org.primer.llm": {
|
|
3941
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3942
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3523
3943
|
}
|
|
3524
3944
|
},
|
|
3525
3945
|
"key": "{borderColor.default}"
|
|
@@ -3532,6 +3952,7 @@
|
|
|
3532
3952
|
"key": "{borderColor.disabled}",
|
|
3533
3953
|
"$value": "#818b981a",
|
|
3534
3954
|
"$type": "color",
|
|
3955
|
+
"$description": "Border color for disabled interactive elements",
|
|
3535
3956
|
"$extensions": {
|
|
3536
3957
|
"org.primer.figma": {
|
|
3537
3958
|
"collection": "mode",
|
|
@@ -3574,6 +3995,10 @@
|
|
|
3574
3995
|
"isSource": true,
|
|
3575
3996
|
"$type": "color"
|
|
3576
3997
|
}
|
|
3998
|
+
},
|
|
3999
|
+
"org.primer.llm": {
|
|
4000
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4001
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3577
4002
|
}
|
|
3578
4003
|
},
|
|
3579
4004
|
"alpha": 0.1,
|
|
@@ -3582,6 +4007,7 @@
|
|
|
3582
4007
|
"original": {
|
|
3583
4008
|
"$value": "{base.color.neutral.8}",
|
|
3584
4009
|
"$type": "color",
|
|
4010
|
+
"$description": "Border color for disabled interactive elements",
|
|
3585
4011
|
"$extensions": {
|
|
3586
4012
|
"org.primer.figma": {
|
|
3587
4013
|
"collection": "mode",
|
|
@@ -3624,6 +4050,10 @@
|
|
|
3624
4050
|
"isSource": true,
|
|
3625
4051
|
"$type": "color"
|
|
3626
4052
|
}
|
|
4053
|
+
},
|
|
4054
|
+
"org.primer.llm": {
|
|
4055
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4056
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3627
4057
|
}
|
|
3628
4058
|
},
|
|
3629
4059
|
"alpha": 0.1,
|
|
@@ -3637,6 +4067,7 @@
|
|
|
3637
4067
|
"key": "{borderColor.done.emphasis}",
|
|
3638
4068
|
"$value": "#8250df",
|
|
3639
4069
|
"$type": "color",
|
|
4070
|
+
"$description": "Strong border for completed/done state badges",
|
|
3640
4071
|
"$extensions": {
|
|
3641
4072
|
"org.primer.figma": {
|
|
3642
4073
|
"collection": "mode",
|
|
@@ -3648,6 +4079,10 @@
|
|
|
3648
4079
|
},
|
|
3649
4080
|
"org.primer.overrides": {
|
|
3650
4081
|
"dark-dimmed-high-contrast": "#d8b9ff"
|
|
4082
|
+
},
|
|
4083
|
+
"org.primer.llm": {
|
|
4084
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4085
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3651
4086
|
}
|
|
3652
4087
|
},
|
|
3653
4088
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3655,6 +4090,7 @@
|
|
|
3655
4090
|
"original": {
|
|
3656
4091
|
"$value": "{base.color.purple.5}",
|
|
3657
4092
|
"$type": "color",
|
|
4093
|
+
"$description": "Strong border for completed/done state badges",
|
|
3658
4094
|
"$extensions": {
|
|
3659
4095
|
"org.primer.figma": {
|
|
3660
4096
|
"collection": "mode",
|
|
@@ -3666,6 +4102,10 @@
|
|
|
3666
4102
|
},
|
|
3667
4103
|
"org.primer.overrides": {
|
|
3668
4104
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4105
|
+
},
|
|
4106
|
+
"org.primer.llm": {
|
|
4107
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4108
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3669
4109
|
}
|
|
3670
4110
|
},
|
|
3671
4111
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3678,6 +4118,7 @@
|
|
|
3678
4118
|
"key": "{borderColor.done.muted}",
|
|
3679
4119
|
"$value": "#c297ff66",
|
|
3680
4120
|
"$type": "color",
|
|
4121
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3681
4122
|
"$extensions": {
|
|
3682
4123
|
"org.primer.figma": {
|
|
3683
4124
|
"collection": "mode",
|
|
@@ -3738,6 +4179,10 @@
|
|
|
3738
4179
|
"isSource": true,
|
|
3739
4180
|
"$type": "color"
|
|
3740
4181
|
}
|
|
4182
|
+
},
|
|
4183
|
+
"org.primer.llm": {
|
|
4184
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4185
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3741
4186
|
}
|
|
3742
4187
|
},
|
|
3743
4188
|
"alpha": 0.4,
|
|
@@ -3746,6 +4191,7 @@
|
|
|
3746
4191
|
"original": {
|
|
3747
4192
|
"$value": "{base.color.purple.3}",
|
|
3748
4193
|
"$type": "color",
|
|
4194
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3749
4195
|
"$extensions": {
|
|
3750
4196
|
"org.primer.figma": {
|
|
3751
4197
|
"collection": "mode",
|
|
@@ -3806,6 +4252,10 @@
|
|
|
3806
4252
|
"isSource": true,
|
|
3807
4253
|
"$type": "color"
|
|
3808
4254
|
}
|
|
4255
|
+
},
|
|
4256
|
+
"org.primer.llm": {
|
|
4257
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4258
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3809
4259
|
}
|
|
3810
4260
|
},
|
|
3811
4261
|
"alpha": 0.4,
|
|
@@ -3819,6 +4269,7 @@
|
|
|
3819
4269
|
"key": "{borderColor.draft.emphasis}",
|
|
3820
4270
|
"$value": "#59636e",
|
|
3821
4271
|
"$type": "color",
|
|
4272
|
+
"$description": "Strong border for draft state badges",
|
|
3822
4273
|
"$extensions": {
|
|
3823
4274
|
"org.primer.figma": {
|
|
3824
4275
|
"collection": "mode",
|
|
@@ -3827,6 +4278,10 @@
|
|
|
3827
4278
|
"codeSyntax": {
|
|
3828
4279
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3829
4280
|
}
|
|
4281
|
+
},
|
|
4282
|
+
"org.primer.llm": {
|
|
4283
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4284
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3830
4285
|
}
|
|
3831
4286
|
},
|
|
3832
4287
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3834,6 +4289,7 @@
|
|
|
3834
4289
|
"original": {
|
|
3835
4290
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3836
4291
|
"$type": "color",
|
|
4292
|
+
"$description": "Strong border for draft state badges",
|
|
3837
4293
|
"$extensions": {
|
|
3838
4294
|
"org.primer.figma": {
|
|
3839
4295
|
"collection": "mode",
|
|
@@ -3842,6 +4298,10 @@
|
|
|
3842
4298
|
"codeSyntax": {
|
|
3843
4299
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3844
4300
|
}
|
|
4301
|
+
},
|
|
4302
|
+
"org.primer.llm": {
|
|
4303
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4304
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3845
4305
|
}
|
|
3846
4306
|
},
|
|
3847
4307
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3854,6 +4314,7 @@
|
|
|
3854
4314
|
"key": "{borderColor.draft.muted}",
|
|
3855
4315
|
"$value": "#d1d9e0b3",
|
|
3856
4316
|
"$type": "color",
|
|
4317
|
+
"$description": "Subtle border for draft state indicators",
|
|
3857
4318
|
"$extensions": {
|
|
3858
4319
|
"org.primer.figma": {
|
|
3859
4320
|
"collection": "mode",
|
|
@@ -3920,6 +4381,10 @@
|
|
|
3920
4381
|
"isSource": true,
|
|
3921
4382
|
"$type": "color"
|
|
3922
4383
|
}
|
|
4384
|
+
},
|
|
4385
|
+
"org.primer.llm": {
|
|
4386
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4387
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3923
4388
|
}
|
|
3924
4389
|
},
|
|
3925
4390
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3927,6 +4392,7 @@
|
|
|
3927
4392
|
"original": {
|
|
3928
4393
|
"$value": "{borderColor.neutral.muted}",
|
|
3929
4394
|
"$type": "color",
|
|
4395
|
+
"$description": "Subtle border for draft state indicators",
|
|
3930
4396
|
"$extensions": {
|
|
3931
4397
|
"org.primer.figma": {
|
|
3932
4398
|
"collection": "mode",
|
|
@@ -3993,6 +4459,10 @@
|
|
|
3993
4459
|
"isSource": true,
|
|
3994
4460
|
"$type": "color"
|
|
3995
4461
|
}
|
|
4462
|
+
},
|
|
4463
|
+
"org.primer.llm": {
|
|
4464
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4465
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3996
4466
|
}
|
|
3997
4467
|
},
|
|
3998
4468
|
"key": "{borderColor.draft.muted}"
|
|
@@ -4005,6 +4475,7 @@
|
|
|
4005
4475
|
"key": "{borderColor.emphasis}",
|
|
4006
4476
|
"$value": "#818b98",
|
|
4007
4477
|
"$type": "color",
|
|
4478
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4008
4479
|
"$extensions": {
|
|
4009
4480
|
"org.primer.figma": {
|
|
4010
4481
|
"collection": "mode",
|
|
@@ -4019,6 +4490,10 @@
|
|
|
4019
4490
|
"dark-dimmed-high-contrast": "#d1d9e0",
|
|
4020
4491
|
"dark-tritanopia-high-contrast": "#d1d9e0",
|
|
4021
4492
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d9e0"
|
|
4493
|
+
},
|
|
4494
|
+
"org.primer.llm": {
|
|
4495
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4496
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4022
4497
|
}
|
|
4023
4498
|
},
|
|
4024
4499
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4026,6 +4501,7 @@
|
|
|
4026
4501
|
"original": {
|
|
4027
4502
|
"$value": "{base.color.neutral.8}",
|
|
4028
4503
|
"$type": "color",
|
|
4504
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4029
4505
|
"$extensions": {
|
|
4030
4506
|
"org.primer.figma": {
|
|
4031
4507
|
"collection": "mode",
|
|
@@ -4040,6 +4516,10 @@
|
|
|
4040
4516
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4041
4517
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4042
4518
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4519
|
+
},
|
|
4520
|
+
"org.primer.llm": {
|
|
4521
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4522
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4043
4523
|
}
|
|
4044
4524
|
},
|
|
4045
4525
|
"key": "{borderColor.emphasis}"
|
|
@@ -4052,6 +4532,7 @@
|
|
|
4052
4532
|
"key": "{borderColor.muted}",
|
|
4053
4533
|
"$value": "#d1d9e0b3",
|
|
4054
4534
|
"$type": "color",
|
|
4535
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4055
4536
|
"$extensions": {
|
|
4056
4537
|
"org.primer.figma": {
|
|
4057
4538
|
"collection": "mode",
|
|
@@ -4118,6 +4599,10 @@
|
|
|
4118
4599
|
"isSource": true,
|
|
4119
4600
|
"$type": "color"
|
|
4120
4601
|
}
|
|
4602
|
+
},
|
|
4603
|
+
"org.primer.llm": {
|
|
4604
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4605
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4121
4606
|
}
|
|
4122
4607
|
},
|
|
4123
4608
|
"alpha": 0.7,
|
|
@@ -4126,6 +4611,7 @@
|
|
|
4126
4611
|
"original": {
|
|
4127
4612
|
"$value": "{borderColor.default}",
|
|
4128
4613
|
"$type": "color",
|
|
4614
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4129
4615
|
"$extensions": {
|
|
4130
4616
|
"org.primer.figma": {
|
|
4131
4617
|
"collection": "mode",
|
|
@@ -4192,6 +4678,10 @@
|
|
|
4192
4678
|
"isSource": true,
|
|
4193
4679
|
"$type": "color"
|
|
4194
4680
|
}
|
|
4681
|
+
},
|
|
4682
|
+
"org.primer.llm": {
|
|
4683
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4684
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4195
4685
|
}
|
|
4196
4686
|
},
|
|
4197
4687
|
"alpha": 0.7,
|
|
@@ -4205,6 +4695,7 @@
|
|
|
4205
4695
|
"key": "{borderColor.neutral.emphasis}",
|
|
4206
4696
|
"$value": "#59636e",
|
|
4207
4697
|
"$type": "color",
|
|
4698
|
+
"$description": "Strong neutral semantic border",
|
|
4208
4699
|
"$extensions": {
|
|
4209
4700
|
"org.primer.figma": {
|
|
4210
4701
|
"collection": "mode",
|
|
@@ -4213,6 +4704,10 @@
|
|
|
4213
4704
|
},
|
|
4214
4705
|
"org.primer.overrides": {
|
|
4215
4706
|
"dark": "#818b98"
|
|
4707
|
+
},
|
|
4708
|
+
"org.primer.llm": {
|
|
4709
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4710
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4216
4711
|
}
|
|
4217
4712
|
},
|
|
4218
4713
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4220,6 +4715,7 @@
|
|
|
4220
4715
|
"original": {
|
|
4221
4716
|
"$value": "{base.color.neutral.9}",
|
|
4222
4717
|
"$type": "color",
|
|
4718
|
+
"$description": "Strong neutral semantic border",
|
|
4223
4719
|
"$extensions": {
|
|
4224
4720
|
"org.primer.figma": {
|
|
4225
4721
|
"collection": "mode",
|
|
@@ -4228,6 +4724,10 @@
|
|
|
4228
4724
|
},
|
|
4229
4725
|
"org.primer.overrides": {
|
|
4230
4726
|
"dark": "{borderColor.emphasis}"
|
|
4727
|
+
},
|
|
4728
|
+
"org.primer.llm": {
|
|
4729
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4730
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4231
4731
|
}
|
|
4232
4732
|
},
|
|
4233
4733
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4240,6 +4740,7 @@
|
|
|
4240
4740
|
"key": "{borderColor.neutral.muted}",
|
|
4241
4741
|
"$value": "#d1d9e0b3",
|
|
4242
4742
|
"$type": "color",
|
|
4743
|
+
"$description": "Subtle neutral semantic border",
|
|
4243
4744
|
"$extensions": {
|
|
4244
4745
|
"org.primer.figma": {
|
|
4245
4746
|
"collection": "mode",
|
|
@@ -4261,6 +4762,10 @@
|
|
|
4261
4762
|
"isSource": true,
|
|
4262
4763
|
"$type": "color"
|
|
4263
4764
|
}
|
|
4765
|
+
},
|
|
4766
|
+
"org.primer.llm": {
|
|
4767
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4768
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4264
4769
|
}
|
|
4265
4770
|
},
|
|
4266
4771
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4268,6 +4773,7 @@
|
|
|
4268
4773
|
"original": {
|
|
4269
4774
|
"$value": "{borderColor.muted}",
|
|
4270
4775
|
"$type": "color",
|
|
4776
|
+
"$description": "Subtle neutral semantic border",
|
|
4271
4777
|
"$extensions": {
|
|
4272
4778
|
"org.primer.figma": {
|
|
4273
4779
|
"collection": "mode",
|
|
@@ -4289,6 +4795,10 @@
|
|
|
4289
4795
|
"isSource": true,
|
|
4290
4796
|
"$type": "color"
|
|
4291
4797
|
}
|
|
4798
|
+
},
|
|
4799
|
+
"org.primer.llm": {
|
|
4800
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4801
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4292
4802
|
}
|
|
4293
4803
|
},
|
|
4294
4804
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4301,6 +4811,7 @@
|
|
|
4301
4811
|
"key": "{borderColor.open.emphasis}",
|
|
4302
4812
|
"$value": "#1a7f37",
|
|
4303
4813
|
"$type": "color",
|
|
4814
|
+
"$description": "Strong border for open state badges",
|
|
4304
4815
|
"$extensions": {
|
|
4305
4816
|
"org.primer.figma": {
|
|
4306
4817
|
"collection": "mode",
|
|
@@ -4319,6 +4830,10 @@
|
|
|
4319
4830
|
"dark-protanopia-deuteranopia-high-contrast": "#bc4c00",
|
|
4320
4831
|
"light-protanopia-deuteranopia": "#bc4c00",
|
|
4321
4832
|
"light-protanopia-deuteranopia-high-contrast": "#bc4c00"
|
|
4833
|
+
},
|
|
4834
|
+
"org.primer.llm": {
|
|
4835
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4836
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4322
4837
|
}
|
|
4323
4838
|
},
|
|
4324
4839
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4326,6 +4841,7 @@
|
|
|
4326
4841
|
"original": {
|
|
4327
4842
|
"$value": "{borderColor.success.emphasis}",
|
|
4328
4843
|
"$type": "color",
|
|
4844
|
+
"$description": "Strong border for open state badges",
|
|
4329
4845
|
"$extensions": {
|
|
4330
4846
|
"org.primer.figma": {
|
|
4331
4847
|
"collection": "mode",
|
|
@@ -4344,6 +4860,10 @@
|
|
|
4344
4860
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4345
4861
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4346
4862
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4863
|
+
},
|
|
4864
|
+
"org.primer.llm": {
|
|
4865
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4866
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4347
4867
|
}
|
|
4348
4868
|
},
|
|
4349
4869
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4356,6 +4876,7 @@
|
|
|
4356
4876
|
"key": "{borderColor.open.muted}",
|
|
4357
4877
|
"$value": "#4ac26b66",
|
|
4358
4878
|
"$type": "color",
|
|
4879
|
+
"$description": "Subtle border for open state indicators",
|
|
4359
4880
|
"$extensions": {
|
|
4360
4881
|
"org.primer.figma": {
|
|
4361
4882
|
"collection": "mode",
|
|
@@ -4422,6 +4943,10 @@
|
|
|
4422
4943
|
"isSource": true,
|
|
4423
4944
|
"$type": "color"
|
|
4424
4945
|
}
|
|
4946
|
+
},
|
|
4947
|
+
"org.primer.llm": {
|
|
4948
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4949
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4425
4950
|
}
|
|
4426
4951
|
},
|
|
4427
4952
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4429,6 +4954,7 @@
|
|
|
4429
4954
|
"original": {
|
|
4430
4955
|
"$value": "{borderColor.success.muted}",
|
|
4431
4956
|
"$type": "color",
|
|
4957
|
+
"$description": "Subtle border for open state indicators",
|
|
4432
4958
|
"$extensions": {
|
|
4433
4959
|
"org.primer.figma": {
|
|
4434
4960
|
"collection": "mode",
|
|
@@ -4495,6 +5021,10 @@
|
|
|
4495
5021
|
"isSource": true,
|
|
4496
5022
|
"$type": "color"
|
|
4497
5023
|
}
|
|
5024
|
+
},
|
|
5025
|
+
"org.primer.llm": {
|
|
5026
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5027
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4498
5028
|
}
|
|
4499
5029
|
},
|
|
4500
5030
|
"key": "{borderColor.open.muted}"
|
|
@@ -4507,6 +5037,7 @@
|
|
|
4507
5037
|
"key": "{borderColor.severe.emphasis}",
|
|
4508
5038
|
"$value": "#bc4c00",
|
|
4509
5039
|
"$type": "color",
|
|
5040
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4510
5041
|
"$extensions": {
|
|
4511
5042
|
"org.primer.figma": {
|
|
4512
5043
|
"collection": "mode",
|
|
@@ -4521,6 +5052,10 @@
|
|
|
4521
5052
|
"light-tritanopia": "#cf222e",
|
|
4522
5053
|
"light-tritanopia-high-contrast": "#cf222e",
|
|
4523
5054
|
"dark-dimmed-high-contrast": "#ffb77c"
|
|
5055
|
+
},
|
|
5056
|
+
"org.primer.llm": {
|
|
5057
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5058
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4524
5059
|
}
|
|
4525
5060
|
},
|
|
4526
5061
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4528,6 +5063,7 @@
|
|
|
4528
5063
|
"original": {
|
|
4529
5064
|
"$value": "{base.color.orange.5}",
|
|
4530
5065
|
"$type": "color",
|
|
5066
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4531
5067
|
"$extensions": {
|
|
4532
5068
|
"org.primer.figma": {
|
|
4533
5069
|
"collection": "mode",
|
|
@@ -4542,6 +5078,10 @@
|
|
|
4542
5078
|
"light-tritanopia": "{base.color.red.5}",
|
|
4543
5079
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4544
5080
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5081
|
+
},
|
|
5082
|
+
"org.primer.llm": {
|
|
5083
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5084
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4545
5085
|
}
|
|
4546
5086
|
},
|
|
4547
5087
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4554,6 +5094,7 @@
|
|
|
4554
5094
|
"key": "{borderColor.severe.muted}",
|
|
4555
5095
|
"$value": "#fb8f4466",
|
|
4556
5096
|
"$type": "color",
|
|
5097
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4557
5098
|
"$extensions": {
|
|
4558
5099
|
"org.primer.figma": {
|
|
4559
5100
|
"collection": "mode",
|
|
@@ -4609,6 +5150,10 @@
|
|
|
4609
5150
|
"isSource": true,
|
|
4610
5151
|
"$type": "color"
|
|
4611
5152
|
}
|
|
5153
|
+
},
|
|
5154
|
+
"org.primer.llm": {
|
|
5155
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5156
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4612
5157
|
}
|
|
4613
5158
|
},
|
|
4614
5159
|
"alpha": 0.4,
|
|
@@ -4617,6 +5162,7 @@
|
|
|
4617
5162
|
"original": {
|
|
4618
5163
|
"$value": "{base.color.orange.3}",
|
|
4619
5164
|
"$type": "color",
|
|
5165
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4620
5166
|
"$extensions": {
|
|
4621
5167
|
"org.primer.figma": {
|
|
4622
5168
|
"collection": "mode",
|
|
@@ -4672,6 +5218,10 @@
|
|
|
4672
5218
|
"isSource": true,
|
|
4673
5219
|
"$type": "color"
|
|
4674
5220
|
}
|
|
5221
|
+
},
|
|
5222
|
+
"org.primer.llm": {
|
|
5223
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5224
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4675
5225
|
}
|
|
4676
5226
|
},
|
|
4677
5227
|
"alpha": 0.4,
|
|
@@ -4685,6 +5235,7 @@
|
|
|
4685
5235
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4686
5236
|
"$value": "#bf3989",
|
|
4687
5237
|
"$type": "color",
|
|
5238
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4688
5239
|
"$extensions": {
|
|
4689
5240
|
"org.primer.figma": {
|
|
4690
5241
|
"collection": "mode",
|
|
@@ -4696,6 +5247,10 @@
|
|
|
4696
5247
|
},
|
|
4697
5248
|
"org.primer.overrides": {
|
|
4698
5249
|
"dark-dimmed-high-contrast": "#ff80c8"
|
|
5250
|
+
},
|
|
5251
|
+
"org.primer.llm": {
|
|
5252
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5253
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4699
5254
|
}
|
|
4700
5255
|
},
|
|
4701
5256
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4703,6 +5258,7 @@
|
|
|
4703
5258
|
"original": {
|
|
4704
5259
|
"$value": "{base.color.pink.5}",
|
|
4705
5260
|
"$type": "color",
|
|
5261
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4706
5262
|
"$extensions": {
|
|
4707
5263
|
"org.primer.figma": {
|
|
4708
5264
|
"collection": "mode",
|
|
@@ -4714,6 +5270,10 @@
|
|
|
4714
5270
|
},
|
|
4715
5271
|
"org.primer.overrides": {
|
|
4716
5272
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5273
|
+
},
|
|
5274
|
+
"org.primer.llm": {
|
|
5275
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5276
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4717
5277
|
}
|
|
4718
5278
|
},
|
|
4719
5279
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4726,6 +5286,7 @@
|
|
|
4726
5286
|
"key": "{borderColor.sponsors.muted}",
|
|
4727
5287
|
"$value": "#ff80c866",
|
|
4728
5288
|
"$type": "color",
|
|
5289
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4729
5290
|
"$extensions": {
|
|
4730
5291
|
"org.primer.figma": {
|
|
4731
5292
|
"collection": "mode",
|
|
@@ -4786,6 +5347,10 @@
|
|
|
4786
5347
|
"isSource": true,
|
|
4787
5348
|
"$type": "color"
|
|
4788
5349
|
}
|
|
5350
|
+
},
|
|
5351
|
+
"org.primer.llm": {
|
|
5352
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5353
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4789
5354
|
}
|
|
4790
5355
|
},
|
|
4791
5356
|
"alpha": 0.4,
|
|
@@ -4794,6 +5359,7 @@
|
|
|
4794
5359
|
"original": {
|
|
4795
5360
|
"$value": "{base.color.pink.3}",
|
|
4796
5361
|
"$type": "color",
|
|
5362
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4797
5363
|
"$extensions": {
|
|
4798
5364
|
"org.primer.figma": {
|
|
4799
5365
|
"collection": "mode",
|
|
@@ -4854,6 +5420,10 @@
|
|
|
4854
5420
|
"isSource": true,
|
|
4855
5421
|
"$type": "color"
|
|
4856
5422
|
}
|
|
5423
|
+
},
|
|
5424
|
+
"org.primer.llm": {
|
|
5425
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5426
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4857
5427
|
}
|
|
4858
5428
|
},
|
|
4859
5429
|
"alpha": 0.4,
|
|
@@ -4867,6 +5437,7 @@
|
|
|
4867
5437
|
"key": "{borderColor.success.emphasis}",
|
|
4868
5438
|
"$value": "#1a7f37",
|
|
4869
5439
|
"$type": "color",
|
|
5440
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4870
5441
|
"$extensions": {
|
|
4871
5442
|
"org.primer.figma": {
|
|
4872
5443
|
"collection": "mode",
|
|
@@ -4886,6 +5457,10 @@
|
|
|
4886
5457
|
"light-protanopia-deuteranopia": "#0969da",
|
|
4887
5458
|
"light-protanopia-deuteranopia-high-contrast": "#0969da",
|
|
4888
5459
|
"dark-dimmed-high-contrast": "#6fdd8b"
|
|
5460
|
+
},
|
|
5461
|
+
"org.primer.llm": {
|
|
5462
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5463
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4889
5464
|
}
|
|
4890
5465
|
},
|
|
4891
5466
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4893,6 +5468,7 @@
|
|
|
4893
5468
|
"original": {
|
|
4894
5469
|
"$value": "{base.color.green.5}",
|
|
4895
5470
|
"$type": "color",
|
|
5471
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4896
5472
|
"$extensions": {
|
|
4897
5473
|
"org.primer.figma": {
|
|
4898
5474
|
"collection": "mode",
|
|
@@ -4912,6 +5488,10 @@
|
|
|
4912
5488
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4913
5489
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4914
5490
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5491
|
+
},
|
|
5492
|
+
"org.primer.llm": {
|
|
5493
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5494
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4915
5495
|
}
|
|
4916
5496
|
},
|
|
4917
5497
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4924,6 +5504,7 @@
|
|
|
4924
5504
|
"key": "{borderColor.success.muted}",
|
|
4925
5505
|
"$value": "#4ac26b66",
|
|
4926
5506
|
"$type": "color",
|
|
5507
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4927
5508
|
"$extensions": {
|
|
4928
5509
|
"org.primer.figma": {
|
|
4929
5510
|
"collection": "mode",
|
|
@@ -5011,6 +5592,10 @@
|
|
|
5011
5592
|
"isSource": true,
|
|
5012
5593
|
"$type": "color"
|
|
5013
5594
|
}
|
|
5595
|
+
},
|
|
5596
|
+
"org.primer.llm": {
|
|
5597
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5598
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5014
5599
|
}
|
|
5015
5600
|
},
|
|
5016
5601
|
"alpha": 0.4,
|
|
@@ -5019,6 +5604,7 @@
|
|
|
5019
5604
|
"original": {
|
|
5020
5605
|
"$value": "{base.color.green.3}",
|
|
5021
5606
|
"$type": "color",
|
|
5607
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5022
5608
|
"$extensions": {
|
|
5023
5609
|
"org.primer.figma": {
|
|
5024
5610
|
"collection": "mode",
|
|
@@ -5106,6 +5692,10 @@
|
|
|
5106
5692
|
"isSource": true,
|
|
5107
5693
|
"$type": "color"
|
|
5108
5694
|
}
|
|
5695
|
+
},
|
|
5696
|
+
"org.primer.llm": {
|
|
5697
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5698
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5109
5699
|
}
|
|
5110
5700
|
},
|
|
5111
5701
|
"alpha": 0.4,
|
|
@@ -5119,6 +5709,7 @@
|
|
|
5119
5709
|
"key": "{borderColor.translucent}",
|
|
5120
5710
|
"$value": "#1f232826",
|
|
5121
5711
|
"$type": "color",
|
|
5712
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5122
5713
|
"$extensions": {
|
|
5123
5714
|
"org.primer.figma": {
|
|
5124
5715
|
"collection": "mode",
|
|
@@ -5175,6 +5766,10 @@
|
|
|
5175
5766
|
"isSource": true,
|
|
5176
5767
|
"$type": "color"
|
|
5177
5768
|
}
|
|
5769
|
+
},
|
|
5770
|
+
"org.primer.llm": {
|
|
5771
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5772
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5178
5773
|
}
|
|
5179
5774
|
},
|
|
5180
5775
|
"alpha": 0.15,
|
|
@@ -5183,6 +5778,7 @@
|
|
|
5183
5778
|
"original": {
|
|
5184
5779
|
"$value": "{base.color.neutral.13}",
|
|
5185
5780
|
"$type": "color",
|
|
5781
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5186
5782
|
"$extensions": {
|
|
5187
5783
|
"org.primer.figma": {
|
|
5188
5784
|
"collection": "mode",
|
|
@@ -5239,6 +5835,10 @@
|
|
|
5239
5835
|
"isSource": true,
|
|
5240
5836
|
"$type": "color"
|
|
5241
5837
|
}
|
|
5838
|
+
},
|
|
5839
|
+
"org.primer.llm": {
|
|
5840
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5841
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5242
5842
|
}
|
|
5243
5843
|
},
|
|
5244
5844
|
"alpha": 0.15,
|
|
@@ -5252,6 +5852,7 @@
|
|
|
5252
5852
|
"key": "{borderColor.transparent}",
|
|
5253
5853
|
"$value": "#ffffff00",
|
|
5254
5854
|
"$type": "color",
|
|
5855
|
+
"$description": "Fully transparent border",
|
|
5255
5856
|
"$extensions": {
|
|
5256
5857
|
"org.primer.figma": {
|
|
5257
5858
|
"collection": "mode",
|
|
@@ -5264,6 +5865,7 @@
|
|
|
5264
5865
|
"original": {
|
|
5265
5866
|
"$value": "{base.color.transparent}",
|
|
5266
5867
|
"$type": "color",
|
|
5868
|
+
"$description": "Fully transparent border",
|
|
5267
5869
|
"$extensions": {
|
|
5268
5870
|
"org.primer.figma": {
|
|
5269
5871
|
"collection": "mode",
|
|
@@ -5281,6 +5883,7 @@
|
|
|
5281
5883
|
"key": "{borderColor.upsell.emphasis}",
|
|
5282
5884
|
"$value": "#8250df",
|
|
5283
5885
|
"$type": "color",
|
|
5886
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5284
5887
|
"$extensions": {
|
|
5285
5888
|
"org.primer.figma": {
|
|
5286
5889
|
"collection": "mode",
|
|
@@ -5289,6 +5892,10 @@
|
|
|
5289
5892
|
"codeSyntax": {
|
|
5290
5893
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5291
5894
|
}
|
|
5895
|
+
},
|
|
5896
|
+
"org.primer.llm": {
|
|
5897
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5898
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5292
5899
|
}
|
|
5293
5900
|
},
|
|
5294
5901
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5296,6 +5903,7 @@
|
|
|
5296
5903
|
"original": {
|
|
5297
5904
|
"$value": "{borderColor.done.emphasis}",
|
|
5298
5905
|
"$type": "color",
|
|
5906
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5299
5907
|
"$extensions": {
|
|
5300
5908
|
"org.primer.figma": {
|
|
5301
5909
|
"collection": "mode",
|
|
@@ -5304,6 +5912,10 @@
|
|
|
5304
5912
|
"codeSyntax": {
|
|
5305
5913
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5306
5914
|
}
|
|
5915
|
+
},
|
|
5916
|
+
"org.primer.llm": {
|
|
5917
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5918
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5307
5919
|
}
|
|
5308
5920
|
},
|
|
5309
5921
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5316,6 +5928,7 @@
|
|
|
5316
5928
|
"key": "{borderColor.upsell.muted}",
|
|
5317
5929
|
"$value": "#c297ff66",
|
|
5318
5930
|
"$type": "color",
|
|
5931
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5319
5932
|
"$extensions": {
|
|
5320
5933
|
"org.primer.figma": {
|
|
5321
5934
|
"collection": "mode",
|
|
@@ -5324,6 +5937,10 @@
|
|
|
5324
5937
|
"codeSyntax": {
|
|
5325
5938
|
"web": "var(--borderColor-upsell-muted)"
|
|
5326
5939
|
}
|
|
5940
|
+
},
|
|
5941
|
+
"org.primer.llm": {
|
|
5942
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5943
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5327
5944
|
}
|
|
5328
5945
|
},
|
|
5329
5946
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5331,6 +5948,7 @@
|
|
|
5331
5948
|
"original": {
|
|
5332
5949
|
"$value": "{borderColor.done.muted}",
|
|
5333
5950
|
"$type": "color",
|
|
5951
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5334
5952
|
"$extensions": {
|
|
5335
5953
|
"org.primer.figma": {
|
|
5336
5954
|
"collection": "mode",
|
|
@@ -5339,6 +5957,10 @@
|
|
|
5339
5957
|
"codeSyntax": {
|
|
5340
5958
|
"web": "var(--borderColor-upsell-muted)"
|
|
5341
5959
|
}
|
|
5960
|
+
},
|
|
5961
|
+
"org.primer.llm": {
|
|
5962
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5963
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5342
5964
|
}
|
|
5343
5965
|
},
|
|
5344
5966
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36473,6 +37095,7 @@
|
|
|
36473
37095
|
"key": "{fgColor.accent}",
|
|
36474
37096
|
"$value": "#0969da",
|
|
36475
37097
|
"$type": "color",
|
|
37098
|
+
"$description": "Accent text for links and interactive elements",
|
|
36476
37099
|
"$extensions": {
|
|
36477
37100
|
"org.primer.figma": {
|
|
36478
37101
|
"collection": "mode",
|
|
@@ -36492,6 +37115,10 @@
|
|
|
36492
37115
|
"light-high-contrast": "#0550ae",
|
|
36493
37116
|
"light-tritanopia-high-contrast": "#0550ae",
|
|
36494
37117
|
"light-protanopia-deuteranopia-high-contrast": "#0550ae"
|
|
37118
|
+
},
|
|
37119
|
+
"org.primer.llm": {
|
|
37120
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37121
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36495
37122
|
}
|
|
36496
37123
|
},
|
|
36497
37124
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36499,6 +37126,7 @@
|
|
|
36499
37126
|
"original": {
|
|
36500
37127
|
"$value": "{base.color.blue.5}",
|
|
36501
37128
|
"$type": "color",
|
|
37129
|
+
"$description": "Accent text for links and interactive elements",
|
|
36502
37130
|
"$extensions": {
|
|
36503
37131
|
"org.primer.figma": {
|
|
36504
37132
|
"collection": "mode",
|
|
@@ -36518,6 +37146,10 @@
|
|
|
36518
37146
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36519
37147
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36520
37148
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37149
|
+
},
|
|
37150
|
+
"org.primer.llm": {
|
|
37151
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37152
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36521
37153
|
}
|
|
36522
37154
|
},
|
|
36523
37155
|
"key": "{fgColor.accent}"
|
|
@@ -36530,6 +37162,7 @@
|
|
|
36530
37162
|
"key": "{fgColor.attention}",
|
|
36531
37163
|
"$value": "#9a6700",
|
|
36532
37164
|
"$type": "color",
|
|
37165
|
+
"$description": "Attention text for warnings and caution states",
|
|
36533
37166
|
"$extensions": {
|
|
36534
37167
|
"org.primer.figma": {
|
|
36535
37168
|
"collection": "mode",
|
|
@@ -36545,6 +37178,10 @@
|
|
|
36545
37178
|
"light-protanopia-deuteranopia-high-contrast": "#7d4e00",
|
|
36546
37179
|
"light-tritanopia-high-contrast": "#7d4e00",
|
|
36547
37180
|
"dark-dimmed-high-contrast": "#fae17d"
|
|
37181
|
+
},
|
|
37182
|
+
"org.primer.llm": {
|
|
37183
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37184
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36548
37185
|
}
|
|
36549
37186
|
},
|
|
36550
37187
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36552,6 +37189,7 @@
|
|
|
36552
37189
|
"original": {
|
|
36553
37190
|
"$value": "{base.color.yellow.5}",
|
|
36554
37191
|
"$type": "color",
|
|
37192
|
+
"$description": "Attention text for warnings and caution states",
|
|
36555
37193
|
"$extensions": {
|
|
36556
37194
|
"org.primer.figma": {
|
|
36557
37195
|
"collection": "mode",
|
|
@@ -36567,6 +37205,10 @@
|
|
|
36567
37205
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36568
37206
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36569
37207
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37208
|
+
},
|
|
37209
|
+
"org.primer.llm": {
|
|
37210
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37211
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36570
37212
|
}
|
|
36571
37213
|
},
|
|
36572
37214
|
"key": "{fgColor.attention}"
|
|
@@ -36579,6 +37221,7 @@
|
|
|
36579
37221
|
"key": "{fgColor.black}",
|
|
36580
37222
|
"$value": "#1f2328",
|
|
36581
37223
|
"$type": "color",
|
|
37224
|
+
"$description": "Pure black text",
|
|
36582
37225
|
"$extensions": {
|
|
36583
37226
|
"org.primer.figma": {
|
|
36584
37227
|
"collection": "mode",
|
|
@@ -36587,6 +37230,10 @@
|
|
|
36587
37230
|
},
|
|
36588
37231
|
"org.primer.overrides": {
|
|
36589
37232
|
"dark": "#ffffff"
|
|
37233
|
+
},
|
|
37234
|
+
"org.primer.llm": {
|
|
37235
|
+
"doNotUse": true,
|
|
37236
|
+
"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."
|
|
36590
37237
|
}
|
|
36591
37238
|
},
|
|
36592
37239
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36594,6 +37241,7 @@
|
|
|
36594
37241
|
"original": {
|
|
36595
37242
|
"$value": "{base.color.neutral.13}",
|
|
36596
37243
|
"$type": "color",
|
|
37244
|
+
"$description": "Pure black text",
|
|
36597
37245
|
"$extensions": {
|
|
36598
37246
|
"org.primer.figma": {
|
|
36599
37247
|
"collection": "mode",
|
|
@@ -36602,6 +37250,10 @@
|
|
|
36602
37250
|
},
|
|
36603
37251
|
"org.primer.overrides": {
|
|
36604
37252
|
"dark": "{base.color.neutral.0}"
|
|
37253
|
+
},
|
|
37254
|
+
"org.primer.llm": {
|
|
37255
|
+
"doNotUse": true,
|
|
37256
|
+
"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."
|
|
36605
37257
|
}
|
|
36606
37258
|
},
|
|
36607
37259
|
"key": "{fgColor.black}"
|
|
@@ -36614,6 +37266,7 @@
|
|
|
36614
37266
|
"key": "{fgColor.closed}",
|
|
36615
37267
|
"$value": "#d1242f",
|
|
36616
37268
|
"$type": "color",
|
|
37269
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36617
37270
|
"$extensions": {
|
|
36618
37271
|
"org.primer.figma": {
|
|
36619
37272
|
"collection": "mode",
|
|
@@ -36632,6 +37285,10 @@
|
|
|
36632
37285
|
"dark-tritanopia-high-contrast": "#59636e",
|
|
36633
37286
|
"light-tritanopia": "#59636e",
|
|
36634
37287
|
"light-tritanopia-high-contrast": "#59636e"
|
|
37288
|
+
},
|
|
37289
|
+
"org.primer.llm": {
|
|
37290
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37291
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36635
37292
|
}
|
|
36636
37293
|
},
|
|
36637
37294
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36639,6 +37296,7 @@
|
|
|
36639
37296
|
"original": {
|
|
36640
37297
|
"$value": "{fgColor.danger}",
|
|
36641
37298
|
"$type": "color",
|
|
37299
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36642
37300
|
"$extensions": {
|
|
36643
37301
|
"org.primer.figma": {
|
|
36644
37302
|
"collection": "mode",
|
|
@@ -36657,6 +37315,10 @@
|
|
|
36657
37315
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36658
37316
|
"light-tritanopia": "{fgColor.muted}",
|
|
36659
37317
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37318
|
+
},
|
|
37319
|
+
"org.primer.llm": {
|
|
37320
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37321
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36660
37322
|
}
|
|
36661
37323
|
},
|
|
36662
37324
|
"key": "{fgColor.closed}"
|
|
@@ -36669,6 +37331,7 @@
|
|
|
36669
37331
|
"key": "{fgColor.danger}",
|
|
36670
37332
|
"$value": "#d1242f",
|
|
36671
37333
|
"$type": "color",
|
|
37334
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36672
37335
|
"$extensions": {
|
|
36673
37336
|
"org.primer.figma": {
|
|
36674
37337
|
"collection": "mode",
|
|
@@ -36689,6 +37352,10 @@
|
|
|
36689
37352
|
"dark-tritanopia-high-contrast": "#ff8182",
|
|
36690
37353
|
"light-high-contrast": "#a40e26",
|
|
36691
37354
|
"light-tritanopia-high-contrast": "#a40e26"
|
|
37355
|
+
},
|
|
37356
|
+
"org.primer.llm": {
|
|
37357
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37358
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36692
37359
|
}
|
|
36693
37360
|
},
|
|
36694
37361
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36696,6 +37363,7 @@
|
|
|
36696
37363
|
"original": {
|
|
36697
37364
|
"$value": "#d1242f",
|
|
36698
37365
|
"$type": "color",
|
|
37366
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36699
37367
|
"$extensions": {
|
|
36700
37368
|
"org.primer.figma": {
|
|
36701
37369
|
"collection": "mode",
|
|
@@ -36716,6 +37384,10 @@
|
|
|
36716
37384
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36717
37385
|
"light-high-contrast": "{base.color.red.6}",
|
|
36718
37386
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37387
|
+
},
|
|
37388
|
+
"org.primer.llm": {
|
|
37389
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37390
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36719
37391
|
}
|
|
36720
37392
|
},
|
|
36721
37393
|
"key": "{fgColor.danger}"
|
|
@@ -36728,6 +37400,7 @@
|
|
|
36728
37400
|
"key": "{fgColor.default}",
|
|
36729
37401
|
"$value": "#1f2328",
|
|
36730
37402
|
"$type": "color",
|
|
37403
|
+
"$description": "Default text color for primary content and headings",
|
|
36731
37404
|
"$extensions": {
|
|
36732
37405
|
"org.primer.figma": {
|
|
36733
37406
|
"collection": "mode",
|
|
@@ -36742,8 +37415,12 @@
|
|
|
36742
37415
|
"dark-high-contrast": "#1f2328",
|
|
36743
37416
|
"dark-tritanopia-high-contrast": "#1f2328",
|
|
36744
37417
|
"dark-protanopia-deuteranopia-high-contrast": "#1f2328",
|
|
36745
|
-
"dark-dimmed": "#
|
|
37418
|
+
"dark-dimmed": "#25292e",
|
|
36746
37419
|
"dark-dimmed-high-contrast": "#25292e"
|
|
37420
|
+
},
|
|
37421
|
+
"org.primer.llm": {
|
|
37422
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37423
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36747
37424
|
}
|
|
36748
37425
|
},
|
|
36749
37426
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36751,6 +37428,7 @@
|
|
|
36751
37428
|
"original": {
|
|
36752
37429
|
"$value": "{base.color.neutral.13}",
|
|
36753
37430
|
"$type": "color",
|
|
37431
|
+
"$description": "Default text color for primary content and headings",
|
|
36754
37432
|
"$extensions": {
|
|
36755
37433
|
"org.primer.figma": {
|
|
36756
37434
|
"collection": "mode",
|
|
@@ -36765,8 +37443,12 @@
|
|
|
36765
37443
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36766
37444
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36767
37445
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36768
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37446
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36769
37447
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37448
|
+
},
|
|
37449
|
+
"org.primer.llm": {
|
|
37450
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37451
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36770
37452
|
}
|
|
36771
37453
|
},
|
|
36772
37454
|
"key": "{fgColor.default}"
|
|
@@ -36779,6 +37461,7 @@
|
|
|
36779
37461
|
"key": "{fgColor.disabled}",
|
|
36780
37462
|
"$value": "#818b98",
|
|
36781
37463
|
"$type": "color",
|
|
37464
|
+
"$description": "Text color for disabled interactive elements",
|
|
36782
37465
|
"$extensions": {
|
|
36783
37466
|
"org.primer.figma": {
|
|
36784
37467
|
"collection": "mode",
|
|
@@ -36800,6 +37483,10 @@
|
|
|
36800
37483
|
"dark-high-contrast": "#818b98",
|
|
36801
37484
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
36802
37485
|
"dark-protanopia-deuteranopia-high-contrast": "#818b98"
|
|
37486
|
+
},
|
|
37487
|
+
"org.primer.llm": {
|
|
37488
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37489
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36803
37490
|
}
|
|
36804
37491
|
},
|
|
36805
37492
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36807,6 +37494,7 @@
|
|
|
36807
37494
|
"original": {
|
|
36808
37495
|
"$value": "{base.color.neutral.8}",
|
|
36809
37496
|
"$type": "color",
|
|
37497
|
+
"$description": "Text color for disabled interactive elements",
|
|
36810
37498
|
"$extensions": {
|
|
36811
37499
|
"org.primer.figma": {
|
|
36812
37500
|
"collection": "mode",
|
|
@@ -36828,6 +37516,10 @@
|
|
|
36828
37516
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36829
37517
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36830
37518
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37519
|
+
},
|
|
37520
|
+
"org.primer.llm": {
|
|
37521
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37522
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36831
37523
|
}
|
|
36832
37524
|
},
|
|
36833
37525
|
"key": "{fgColor.disabled}"
|
|
@@ -36840,6 +37532,7 @@
|
|
|
36840
37532
|
"key": "{fgColor.done}",
|
|
36841
37533
|
"$value": "#8250df",
|
|
36842
37534
|
"$type": "color",
|
|
37535
|
+
"$description": "Text color for completed/done state indicators",
|
|
36843
37536
|
"$extensions": {
|
|
36844
37537
|
"org.primer.figma": {
|
|
36845
37538
|
"collection": "mode",
|
|
@@ -36858,6 +37551,10 @@
|
|
|
36858
37551
|
"light-high-contrast": "#6639ba",
|
|
36859
37552
|
"light-protanopia-deuteranopia-high-contrast": "#6639ba",
|
|
36860
37553
|
"light-tritanopia-high-contrast": "#6639ba"
|
|
37554
|
+
},
|
|
37555
|
+
"org.primer.llm": {
|
|
37556
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37557
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36861
37558
|
}
|
|
36862
37559
|
},
|
|
36863
37560
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36865,6 +37562,7 @@
|
|
|
36865
37562
|
"original": {
|
|
36866
37563
|
"$value": "{base.color.purple.5}",
|
|
36867
37564
|
"$type": "color",
|
|
37565
|
+
"$description": "Text color for completed/done state indicators",
|
|
36868
37566
|
"$extensions": {
|
|
36869
37567
|
"org.primer.figma": {
|
|
36870
37568
|
"collection": "mode",
|
|
@@ -36883,6 +37581,10 @@
|
|
|
36883
37581
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36884
37582
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36885
37583
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37584
|
+
},
|
|
37585
|
+
"org.primer.llm": {
|
|
37586
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37587
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36886
37588
|
}
|
|
36887
37589
|
},
|
|
36888
37590
|
"key": "{fgColor.done}"
|
|
@@ -36895,6 +37597,7 @@
|
|
|
36895
37597
|
"key": "{fgColor.draft}",
|
|
36896
37598
|
"$value": "#59636e",
|
|
36897
37599
|
"$type": "color",
|
|
37600
|
+
"$description": "Text color for draft state indicators",
|
|
36898
37601
|
"$extensions": {
|
|
36899
37602
|
"org.primer.figma": {
|
|
36900
37603
|
"collection": "mode",
|
|
@@ -36903,6 +37606,10 @@
|
|
|
36903
37606
|
"codeSyntax": {
|
|
36904
37607
|
"web": "var(--fgColor-draft)"
|
|
36905
37608
|
}
|
|
37609
|
+
},
|
|
37610
|
+
"org.primer.llm": {
|
|
37611
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37612
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36906
37613
|
}
|
|
36907
37614
|
},
|
|
36908
37615
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36910,6 +37617,7 @@
|
|
|
36910
37617
|
"original": {
|
|
36911
37618
|
"$value": "{fgColor.neutral}",
|
|
36912
37619
|
"$type": "color",
|
|
37620
|
+
"$description": "Text color for draft state indicators",
|
|
36913
37621
|
"$extensions": {
|
|
36914
37622
|
"org.primer.figma": {
|
|
36915
37623
|
"collection": "mode",
|
|
@@ -36918,6 +37626,10 @@
|
|
|
36918
37626
|
"codeSyntax": {
|
|
36919
37627
|
"web": "var(--fgColor-draft)"
|
|
36920
37628
|
}
|
|
37629
|
+
},
|
|
37630
|
+
"org.primer.llm": {
|
|
37631
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37632
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36921
37633
|
}
|
|
36922
37634
|
},
|
|
36923
37635
|
"key": "{fgColor.draft}"
|
|
@@ -36930,6 +37642,7 @@
|
|
|
36930
37642
|
"key": "{fgColor.link}",
|
|
36931
37643
|
"$value": "#0969da",
|
|
36932
37644
|
"$type": "color",
|
|
37645
|
+
"$description": "Text color for hyperlinks",
|
|
36933
37646
|
"$extensions": {
|
|
36934
37647
|
"org.primer.figma": {
|
|
36935
37648
|
"collection": "mode",
|
|
@@ -36938,6 +37651,10 @@
|
|
|
36938
37651
|
"codeSyntax": {
|
|
36939
37652
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36940
37653
|
}
|
|
37654
|
+
},
|
|
37655
|
+
"org.primer.llm": {
|
|
37656
|
+
"usage": ["link-text", "hyperlink"],
|
|
37657
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36941
37658
|
}
|
|
36942
37659
|
},
|
|
36943
37660
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36945,6 +37662,7 @@
|
|
|
36945
37662
|
"original": {
|
|
36946
37663
|
"$value": "{fgColor.accent}",
|
|
36947
37664
|
"$type": "color",
|
|
37665
|
+
"$description": "Text color for hyperlinks",
|
|
36948
37666
|
"$extensions": {
|
|
36949
37667
|
"org.primer.figma": {
|
|
36950
37668
|
"collection": "mode",
|
|
@@ -36953,6 +37671,10 @@
|
|
|
36953
37671
|
"codeSyntax": {
|
|
36954
37672
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36955
37673
|
}
|
|
37674
|
+
},
|
|
37675
|
+
"org.primer.llm": {
|
|
37676
|
+
"usage": ["link-text", "hyperlink"],
|
|
37677
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36956
37678
|
}
|
|
36957
37679
|
},
|
|
36958
37680
|
"key": "{fgColor.link}"
|
|
@@ -36965,6 +37687,7 @@
|
|
|
36965
37687
|
"key": "{fgColor.muted}",
|
|
36966
37688
|
"$value": "#59636e",
|
|
36967
37689
|
"$type": "color",
|
|
37690
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36968
37691
|
"$extensions": {
|
|
36969
37692
|
"org.primer.figma": {
|
|
36970
37693
|
"collection": "mode",
|
|
@@ -36982,6 +37705,10 @@
|
|
|
36982
37705
|
"dark-dimmed-high-contrast": "#454c54",
|
|
36983
37706
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36984
37707
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
37708
|
+
},
|
|
37709
|
+
"org.primer.llm": {
|
|
37710
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37711
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
36985
37712
|
}
|
|
36986
37713
|
},
|
|
36987
37714
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36989,6 +37716,7 @@
|
|
|
36989
37716
|
"original": {
|
|
36990
37717
|
"$value": "{base.color.neutral.9}",
|
|
36991
37718
|
"$type": "color",
|
|
37719
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36992
37720
|
"$extensions": {
|
|
36993
37721
|
"org.primer.figma": {
|
|
36994
37722
|
"collection": "mode",
|
|
@@ -37006,6 +37734,10 @@
|
|
|
37006
37734
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37007
37735
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37008
37736
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37737
|
+
},
|
|
37738
|
+
"org.primer.llm": {
|
|
37739
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37740
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37009
37741
|
}
|
|
37010
37742
|
},
|
|
37011
37743
|
"key": "{fgColor.muted}"
|
|
@@ -37018,6 +37750,7 @@
|
|
|
37018
37750
|
"key": "{fgColor.neutral}",
|
|
37019
37751
|
"$value": "#59636e",
|
|
37020
37752
|
"$type": "color",
|
|
37753
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37021
37754
|
"$extensions": {
|
|
37022
37755
|
"org.primer.figma": {
|
|
37023
37756
|
"collection": "mode",
|
|
@@ -37032,6 +37765,10 @@
|
|
|
37032
37765
|
"dark-dimmed-high-contrast": "#393f46",
|
|
37033
37766
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
37034
37767
|
"dark-protanopia-deuteranopia-high-contrast": "#393f46"
|
|
37768
|
+
},
|
|
37769
|
+
"org.primer.llm": {
|
|
37770
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37771
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37035
37772
|
}
|
|
37036
37773
|
},
|
|
37037
37774
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37039,6 +37776,7 @@
|
|
|
37039
37776
|
"original": {
|
|
37040
37777
|
"$value": "{base.color.neutral.9}",
|
|
37041
37778
|
"$type": "color",
|
|
37779
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37042
37780
|
"$extensions": {
|
|
37043
37781
|
"org.primer.figma": {
|
|
37044
37782
|
"collection": "mode",
|
|
@@ -37053,6 +37791,10 @@
|
|
|
37053
37791
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37054
37792
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37055
37793
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37794
|
+
},
|
|
37795
|
+
"org.primer.llm": {
|
|
37796
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37797
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37056
37798
|
}
|
|
37057
37799
|
},
|
|
37058
37800
|
"key": "{fgColor.neutral}"
|
|
@@ -37065,6 +37807,7 @@
|
|
|
37065
37807
|
"key": "{fgColor.onEmphasis}",
|
|
37066
37808
|
"$value": "#ffffff",
|
|
37067
37809
|
"$type": "color",
|
|
37810
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37068
37811
|
"$extensions": {
|
|
37069
37812
|
"org.primer.figma": {
|
|
37070
37813
|
"collection": "mode",
|
|
@@ -37078,6 +37821,10 @@
|
|
|
37078
37821
|
"dark": "#1f2328",
|
|
37079
37822
|
"dark-dimmed": "#25292e",
|
|
37080
37823
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37824
|
+
},
|
|
37825
|
+
"org.primer.llm": {
|
|
37826
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37827
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37081
37828
|
}
|
|
37082
37829
|
},
|
|
37083
37830
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37085,6 +37832,7 @@
|
|
|
37085
37832
|
"original": {
|
|
37086
37833
|
"$value": "{base.color.neutral.0}",
|
|
37087
37834
|
"$type": "color",
|
|
37835
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37088
37836
|
"$extensions": {
|
|
37089
37837
|
"org.primer.figma": {
|
|
37090
37838
|
"collection": "mode",
|
|
@@ -37098,6 +37846,10 @@
|
|
|
37098
37846
|
"dark": "{base.color.neutral.13}",
|
|
37099
37847
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37100
37848
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37849
|
+
},
|
|
37850
|
+
"org.primer.llm": {
|
|
37851
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37852
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37101
37853
|
}
|
|
37102
37854
|
},
|
|
37103
37855
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37110,11 +37862,16 @@
|
|
|
37110
37862
|
"key": "{fgColor.onInverse}",
|
|
37111
37863
|
"$value": "#ffffff",
|
|
37112
37864
|
"$type": "color",
|
|
37865
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37113
37866
|
"$extensions": {
|
|
37114
37867
|
"org.primer.figma": {
|
|
37115
37868
|
"collection": "mode",
|
|
37116
37869
|
"group": "semantic",
|
|
37117
37870
|
"scopes": ["fgColor"]
|
|
37871
|
+
},
|
|
37872
|
+
"org.primer.llm": {
|
|
37873
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37874
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37118
37875
|
}
|
|
37119
37876
|
},
|
|
37120
37877
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37122,11 +37879,16 @@
|
|
|
37122
37879
|
"original": {
|
|
37123
37880
|
"$value": "{base.color.neutral.0}",
|
|
37124
37881
|
"$type": "color",
|
|
37882
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37125
37883
|
"$extensions": {
|
|
37126
37884
|
"org.primer.figma": {
|
|
37127
37885
|
"collection": "mode",
|
|
37128
37886
|
"group": "semantic",
|
|
37129
37887
|
"scopes": ["fgColor"]
|
|
37888
|
+
},
|
|
37889
|
+
"org.primer.llm": {
|
|
37890
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37891
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37130
37892
|
}
|
|
37131
37893
|
},
|
|
37132
37894
|
"key": "{fgColor.onInverse}"
|
|
@@ -37139,6 +37901,7 @@
|
|
|
37139
37901
|
"key": "{fgColor.open}",
|
|
37140
37902
|
"$value": "#1a7f37",
|
|
37141
37903
|
"$type": "color",
|
|
37904
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37142
37905
|
"$extensions": {
|
|
37143
37906
|
"org.primer.figma": {
|
|
37144
37907
|
"collection": "mode",
|
|
@@ -37157,6 +37920,10 @@
|
|
|
37157
37920
|
"dark-tritanopia-high-contrast": "#ffaba8",
|
|
37158
37921
|
"light-tritanopia": "#cf222e",
|
|
37159
37922
|
"light-tritanopia-high-contrast": "#a40e26"
|
|
37923
|
+
},
|
|
37924
|
+
"org.primer.llm": {
|
|
37925
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37926
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37160
37927
|
}
|
|
37161
37928
|
},
|
|
37162
37929
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37164,6 +37931,7 @@
|
|
|
37164
37931
|
"original": {
|
|
37165
37932
|
"$value": "{fgColor.success}",
|
|
37166
37933
|
"$type": "color",
|
|
37934
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37167
37935
|
"$extensions": {
|
|
37168
37936
|
"org.primer.figma": {
|
|
37169
37937
|
"collection": "mode",
|
|
@@ -37182,6 +37950,10 @@
|
|
|
37182
37950
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37183
37951
|
"light-tritanopia": "{base.color.red.5}",
|
|
37184
37952
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37953
|
+
},
|
|
37954
|
+
"org.primer.llm": {
|
|
37955
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37956
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37185
37957
|
}
|
|
37186
37958
|
},
|
|
37187
37959
|
"key": "{fgColor.open}"
|
|
@@ -37194,6 +37966,7 @@
|
|
|
37194
37966
|
"key": "{fgColor.severe}",
|
|
37195
37967
|
"$value": "#bc4c00",
|
|
37196
37968
|
"$type": "color",
|
|
37969
|
+
"$description": "Severe text for high-priority warnings",
|
|
37197
37970
|
"$extensions": {
|
|
37198
37971
|
"org.primer.figma": {
|
|
37199
37972
|
"collection": "mode",
|
|
@@ -37214,6 +37987,10 @@
|
|
|
37214
37987
|
"light-tritanopia": "#cf222e",
|
|
37215
37988
|
"light-tritanopia-high-contrast": "#a40e26",
|
|
37216
37989
|
"light-protanopia-deuteranopia-high-contrast": "#953800"
|
|
37990
|
+
},
|
|
37991
|
+
"org.primer.llm": {
|
|
37992
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
37993
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37217
37994
|
}
|
|
37218
37995
|
},
|
|
37219
37996
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37221,6 +37998,7 @@
|
|
|
37221
37998
|
"original": {
|
|
37222
37999
|
"$value": "{base.color.orange.5}",
|
|
37223
38000
|
"$type": "color",
|
|
38001
|
+
"$description": "Severe text for high-priority warnings",
|
|
37224
38002
|
"$extensions": {
|
|
37225
38003
|
"org.primer.figma": {
|
|
37226
38004
|
"collection": "mode",
|
|
@@ -37241,6 +38019,10 @@
|
|
|
37241
38019
|
"light-tritanopia": "{base.color.red.5}",
|
|
37242
38020
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37243
38021
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38022
|
+
},
|
|
38023
|
+
"org.primer.llm": {
|
|
38024
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38025
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37244
38026
|
}
|
|
37245
38027
|
},
|
|
37246
38028
|
"key": "{fgColor.severe}"
|
|
@@ -37253,6 +38035,7 @@
|
|
|
37253
38035
|
"key": "{fgColor.sponsors}",
|
|
37254
38036
|
"$value": "#bf3989",
|
|
37255
38037
|
"$type": "color",
|
|
38038
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37256
38039
|
"$extensions": {
|
|
37257
38040
|
"org.primer.figma": {
|
|
37258
38041
|
"collection": "mode",
|
|
@@ -37271,6 +38054,10 @@
|
|
|
37271
38054
|
"light-high-contrast": "#99286e",
|
|
37272
38055
|
"light-protanopia-deuteranopia-high-contrast": "#99286e",
|
|
37273
38056
|
"light-tritanopia-high-contrast": "#99286e"
|
|
38057
|
+
},
|
|
38058
|
+
"org.primer.llm": {
|
|
38059
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38060
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37274
38061
|
}
|
|
37275
38062
|
},
|
|
37276
38063
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37278,6 +38065,7 @@
|
|
|
37278
38065
|
"original": {
|
|
37279
38066
|
"$value": "{base.color.pink.5}",
|
|
37280
38067
|
"$type": "color",
|
|
38068
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37281
38069
|
"$extensions": {
|
|
37282
38070
|
"org.primer.figma": {
|
|
37283
38071
|
"collection": "mode",
|
|
@@ -37296,6 +38084,10 @@
|
|
|
37296
38084
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37297
38085
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37298
38086
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38087
|
+
},
|
|
38088
|
+
"org.primer.llm": {
|
|
38089
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38090
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37299
38091
|
}
|
|
37300
38092
|
},
|
|
37301
38093
|
"key": "{fgColor.sponsors}"
|
|
@@ -37308,6 +38100,7 @@
|
|
|
37308
38100
|
"key": "{fgColor.success}",
|
|
37309
38101
|
"$value": "#1a7f37",
|
|
37310
38102
|
"$type": "color",
|
|
38103
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37311
38104
|
"$extensions": {
|
|
37312
38105
|
"org.primer.figma": {
|
|
37313
38106
|
"collection": "mode",
|
|
@@ -37330,6 +38123,10 @@
|
|
|
37330
38123
|
"dark-tritanopia-high-contrast": "#80ccff",
|
|
37331
38124
|
"light-tritanopia": "#0969da",
|
|
37332
38125
|
"light-tritanopia-high-contrast": "#0550ae"
|
|
38126
|
+
},
|
|
38127
|
+
"org.primer.llm": {
|
|
38128
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38129
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37333
38130
|
}
|
|
37334
38131
|
},
|
|
37335
38132
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37337,6 +38134,7 @@
|
|
|
37337
38134
|
"original": {
|
|
37338
38135
|
"$value": "{base.color.green.5}",
|
|
37339
38136
|
"$type": "color",
|
|
38137
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37340
38138
|
"$extensions": {
|
|
37341
38139
|
"org.primer.figma": {
|
|
37342
38140
|
"collection": "mode",
|
|
@@ -37359,6 +38157,10 @@
|
|
|
37359
38157
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37360
38158
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37361
38159
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38160
|
+
},
|
|
38161
|
+
"org.primer.llm": {
|
|
38162
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38163
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37362
38164
|
}
|
|
37363
38165
|
},
|
|
37364
38166
|
"key": "{fgColor.success}"
|
|
@@ -37371,6 +38173,7 @@
|
|
|
37371
38173
|
"key": "{fgColor.upsell}",
|
|
37372
38174
|
"$value": "#8250df",
|
|
37373
38175
|
"$type": "color",
|
|
38176
|
+
"$description": "Text color for upsell and promotional content",
|
|
37374
38177
|
"$extensions": {
|
|
37375
38178
|
"org.primer.figma": {
|
|
37376
38179
|
"collection": "mode",
|
|
@@ -37379,6 +38182,10 @@
|
|
|
37379
38182
|
"codeSyntax": {
|
|
37380
38183
|
"web": "var(--fgColor-upsell)"
|
|
37381
38184
|
}
|
|
38185
|
+
},
|
|
38186
|
+
"org.primer.llm": {
|
|
38187
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38188
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37382
38189
|
}
|
|
37383
38190
|
},
|
|
37384
38191
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37386,6 +38193,7 @@
|
|
|
37386
38193
|
"original": {
|
|
37387
38194
|
"$value": "{fgColor.done}",
|
|
37388
38195
|
"$type": "color",
|
|
38196
|
+
"$description": "Text color for upsell and promotional content",
|
|
37389
38197
|
"$extensions": {
|
|
37390
38198
|
"org.primer.figma": {
|
|
37391
38199
|
"collection": "mode",
|
|
@@ -37394,6 +38202,10 @@
|
|
|
37394
38202
|
"codeSyntax": {
|
|
37395
38203
|
"web": "var(--fgColor-upsell)"
|
|
37396
38204
|
}
|
|
38205
|
+
},
|
|
38206
|
+
"org.primer.llm": {
|
|
38207
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38208
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37397
38209
|
}
|
|
37398
38210
|
},
|
|
37399
38211
|
"key": "{fgColor.upsell}"
|
|
@@ -37406,6 +38218,7 @@
|
|
|
37406
38218
|
"key": "{fgColor.white}",
|
|
37407
38219
|
"$value": "#ffffff",
|
|
37408
38220
|
"$type": "color",
|
|
38221
|
+
"$description": "Pure white text",
|
|
37409
38222
|
"$extensions": {
|
|
37410
38223
|
"org.primer.figma": {
|
|
37411
38224
|
"collection": "mode",
|
|
@@ -37414,6 +38227,10 @@
|
|
|
37414
38227
|
},
|
|
37415
38228
|
"org.primer.overrides": {
|
|
37416
38229
|
"dark": "#1f2328"
|
|
38230
|
+
},
|
|
38231
|
+
"org.primer.llm": {
|
|
38232
|
+
"doNotUse": true,
|
|
38233
|
+
"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."
|
|
37417
38234
|
}
|
|
37418
38235
|
},
|
|
37419
38236
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37421,6 +38238,7 @@
|
|
|
37421
38238
|
"original": {
|
|
37422
38239
|
"$value": "{base.color.neutral.0}",
|
|
37423
38240
|
"$type": "color",
|
|
38241
|
+
"$description": "Pure white text",
|
|
37424
38242
|
"$extensions": {
|
|
37425
38243
|
"org.primer.figma": {
|
|
37426
38244
|
"collection": "mode",
|
|
@@ -37429,6 +38247,10 @@
|
|
|
37429
38247
|
},
|
|
37430
38248
|
"org.primer.overrides": {
|
|
37431
38249
|
"dark": "{base.color.neutral.13}"
|
|
38250
|
+
},
|
|
38251
|
+
"org.primer.llm": {
|
|
38252
|
+
"doNotUse": true,
|
|
38253
|
+
"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."
|
|
37432
38254
|
}
|
|
37433
38255
|
},
|
|
37434
38256
|
"key": "{fgColor.white}"
|
|
@@ -37441,6 +38263,13 @@
|
|
|
37441
38263
|
"key": "{focus.outline}",
|
|
37442
38264
|
"$value": "2px solid #0969da",
|
|
37443
38265
|
"$type": "border",
|
|
38266
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38267
|
+
"$extensions": {
|
|
38268
|
+
"org.primer.llm": {
|
|
38269
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38270
|
+
"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."
|
|
38271
|
+
}
|
|
38272
|
+
},
|
|
37444
38273
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37445
38274
|
"isSource": true,
|
|
37446
38275
|
"original": {
|
|
@@ -37450,6 +38279,13 @@
|
|
|
37450
38279
|
"width": "2px"
|
|
37451
38280
|
},
|
|
37452
38281
|
"$type": "border",
|
|
38282
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38283
|
+
"$extensions": {
|
|
38284
|
+
"org.primer.llm": {
|
|
38285
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38286
|
+
"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."
|
|
38287
|
+
}
|
|
38288
|
+
},
|
|
37453
38289
|
"key": "{focus.outline}"
|
|
37454
38290
|
},
|
|
37455
38291
|
"name": "focus-outline",
|
|
@@ -37460,11 +38296,16 @@
|
|
|
37460
38296
|
"key": "{focus.outlineColor}",
|
|
37461
38297
|
"$value": "#0969da",
|
|
37462
38298
|
"$type": "color",
|
|
38299
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37463
38300
|
"$extensions": {
|
|
37464
38301
|
"org.primer.figma": {
|
|
37465
38302
|
"collection": "mode",
|
|
37466
38303
|
"group": "component (internal)",
|
|
37467
38304
|
"scopes": ["borderColor", "effectColor"]
|
|
38305
|
+
},
|
|
38306
|
+
"org.primer.llm": {
|
|
38307
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38308
|
+
"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."
|
|
37468
38309
|
}
|
|
37469
38310
|
},
|
|
37470
38311
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37472,11 +38313,16 @@
|
|
|
37472
38313
|
"original": {
|
|
37473
38314
|
"$value": "{borderColor.accent.emphasis}",
|
|
37474
38315
|
"$type": "color",
|
|
38316
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37475
38317
|
"$extensions": {
|
|
37476
38318
|
"org.primer.figma": {
|
|
37477
38319
|
"collection": "mode",
|
|
37478
38320
|
"group": "component (internal)",
|
|
37479
38321
|
"scopes": ["borderColor", "effectColor"]
|
|
38322
|
+
},
|
|
38323
|
+
"org.primer.llm": {
|
|
38324
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38325
|
+
"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."
|
|
37480
38326
|
}
|
|
37481
38327
|
},
|
|
37482
38328
|
"key": "{focus.outlineColor}"
|
|
@@ -46524,6 +47370,7 @@
|
|
|
46524
47370
|
"key": "{selection.bgColor}",
|
|
46525
47371
|
"$value": "#0969da33",
|
|
46526
47372
|
"$type": "color",
|
|
47373
|
+
"$description": "Background color for text selection highlights",
|
|
46527
47374
|
"$extensions": {
|
|
46528
47375
|
"org.primer.figma": {
|
|
46529
47376
|
"collection": "mode",
|
|
@@ -46538,6 +47385,10 @@
|
|
|
46538
47385
|
"isSource": true,
|
|
46539
47386
|
"$type": "color"
|
|
46540
47387
|
}
|
|
47388
|
+
},
|
|
47389
|
+
"org.primer.llm": {
|
|
47390
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47391
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46541
47392
|
}
|
|
46542
47393
|
},
|
|
46543
47394
|
"alpha": 0.2,
|
|
@@ -46546,6 +47397,7 @@
|
|
|
46546
47397
|
"original": {
|
|
46547
47398
|
"$value": "{bgColor.accent.emphasis}",
|
|
46548
47399
|
"$type": "color",
|
|
47400
|
+
"$description": "Background color for text selection highlights",
|
|
46549
47401
|
"$extensions": {
|
|
46550
47402
|
"org.primer.figma": {
|
|
46551
47403
|
"collection": "mode",
|
|
@@ -46560,6 +47412,10 @@
|
|
|
46560
47412
|
"isSource": true,
|
|
46561
47413
|
"$type": "color"
|
|
46562
47414
|
}
|
|
47415
|
+
},
|
|
47416
|
+
"org.primer.llm": {
|
|
47417
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47418
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46563
47419
|
}
|
|
46564
47420
|
},
|
|
46565
47421
|
"alpha": 0.2,
|
|
@@ -46573,6 +47429,7 @@
|
|
|
46573
47429
|
"key": "{shadow.floating.large}",
|
|
46574
47430
|
"$value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
|
|
46575
47431
|
"$type": "shadow",
|
|
47432
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46576
47433
|
"$extensions": {
|
|
46577
47434
|
"org.primer.figma": {
|
|
46578
47435
|
"collection": "mode",
|
|
@@ -46602,6 +47459,10 @@
|
|
|
46602
47459
|
"isSource": true,
|
|
46603
47460
|
"$type": "shadow"
|
|
46604
47461
|
}
|
|
47462
|
+
},
|
|
47463
|
+
"org.primer.llm": {
|
|
47464
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47465
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46605
47466
|
}
|
|
46606
47467
|
},
|
|
46607
47468
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46626,6 +47487,7 @@
|
|
|
46626
47487
|
}
|
|
46627
47488
|
],
|
|
46628
47489
|
"$type": "shadow",
|
|
47490
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46629
47491
|
"$extensions": {
|
|
46630
47492
|
"org.primer.figma": {
|
|
46631
47493
|
"collection": "mode",
|
|
@@ -46655,6 +47517,10 @@
|
|
|
46655
47517
|
"isSource": true,
|
|
46656
47518
|
"$type": "shadow"
|
|
46657
47519
|
}
|
|
47520
|
+
},
|
|
47521
|
+
"org.primer.llm": {
|
|
47522
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47523
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46658
47524
|
}
|
|
46659
47525
|
},
|
|
46660
47526
|
"key": "{shadow.floating.large}"
|
|
@@ -46667,6 +47533,7 @@
|
|
|
46667
47533
|
"key": "{shadow.floating.legacy}",
|
|
46668
47534
|
"$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46669
47535
|
"$type": "shadow",
|
|
47536
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46670
47537
|
"$extensions": {
|
|
46671
47538
|
"org.primer.figma": {},
|
|
46672
47539
|
"org.primer.overrides": {
|
|
@@ -46693,6 +47560,10 @@
|
|
|
46693
47560
|
"isSource": true,
|
|
46694
47561
|
"$type": "shadow"
|
|
46695
47562
|
}
|
|
47563
|
+
},
|
|
47564
|
+
"org.primer.llm": {
|
|
47565
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47566
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46696
47567
|
}
|
|
46697
47568
|
},
|
|
46698
47569
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46717,6 +47588,7 @@
|
|
|
46717
47588
|
}
|
|
46718
47589
|
],
|
|
46719
47590
|
"$type": "shadow",
|
|
47591
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46720
47592
|
"$extensions": {
|
|
46721
47593
|
"org.primer.figma": {},
|
|
46722
47594
|
"org.primer.overrides": {
|
|
@@ -46743,6 +47615,10 @@
|
|
|
46743
47615
|
"isSource": true,
|
|
46744
47616
|
"$type": "shadow"
|
|
46745
47617
|
}
|
|
47618
|
+
},
|
|
47619
|
+
"org.primer.llm": {
|
|
47620
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47621
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46746
47622
|
}
|
|
46747
47623
|
},
|
|
46748
47624
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46755,6 +47631,7 @@
|
|
|
46755
47631
|
"key": "{shadow.floating.medium}",
|
|
46756
47632
|
"$value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
|
|
46757
47633
|
"$type": "shadow",
|
|
47634
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46758
47635
|
"$extensions": {
|
|
46759
47636
|
"org.primer.figma": {
|
|
46760
47637
|
"collection": "mode",
|
|
@@ -46808,6 +47685,10 @@
|
|
|
46808
47685
|
"isSource": true,
|
|
46809
47686
|
"$type": "shadow"
|
|
46810
47687
|
}
|
|
47688
|
+
},
|
|
47689
|
+
"org.primer.llm": {
|
|
47690
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47691
|
+
"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."
|
|
46811
47692
|
}
|
|
46812
47693
|
},
|
|
46813
47694
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46856,6 +47737,7 @@
|
|
|
46856
47737
|
}
|
|
46857
47738
|
],
|
|
46858
47739
|
"$type": "shadow",
|
|
47740
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46859
47741
|
"$extensions": {
|
|
46860
47742
|
"org.primer.figma": {
|
|
46861
47743
|
"collection": "mode",
|
|
@@ -46909,6 +47791,10 @@
|
|
|
46909
47791
|
"isSource": true,
|
|
46910
47792
|
"$type": "shadow"
|
|
46911
47793
|
}
|
|
47794
|
+
},
|
|
47795
|
+
"org.primer.llm": {
|
|
47796
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47797
|
+
"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."
|
|
46912
47798
|
}
|
|
46913
47799
|
},
|
|
46914
47800
|
"key": "{shadow.floating.medium}"
|
|
@@ -46921,6 +47807,7 @@
|
|
|
46921
47807
|
"key": "{shadow.floating.small}",
|
|
46922
47808
|
"$value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46923
47809
|
"$type": "shadow",
|
|
47810
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46924
47811
|
"$extensions": {
|
|
46925
47812
|
"org.primer.figma": {
|
|
46926
47813
|
"collection": "mode",
|
|
@@ -46958,6 +47845,10 @@
|
|
|
46958
47845
|
"isSource": true,
|
|
46959
47846
|
"$type": "shadow"
|
|
46960
47847
|
}
|
|
47848
|
+
},
|
|
47849
|
+
"org.primer.llm": {
|
|
47850
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47851
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46961
47852
|
}
|
|
46962
47853
|
},
|
|
46963
47854
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46990,6 +47881,7 @@
|
|
|
46990
47881
|
}
|
|
46991
47882
|
],
|
|
46992
47883
|
"$type": "shadow",
|
|
47884
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46993
47885
|
"$extensions": {
|
|
46994
47886
|
"org.primer.figma": {
|
|
46995
47887
|
"collection": "mode",
|
|
@@ -47027,6 +47919,10 @@
|
|
|
47027
47919
|
"isSource": true,
|
|
47028
47920
|
"$type": "shadow"
|
|
47029
47921
|
}
|
|
47922
|
+
},
|
|
47923
|
+
"org.primer.llm": {
|
|
47924
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47925
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47030
47926
|
}
|
|
47031
47927
|
},
|
|
47032
47928
|
"key": "{shadow.floating.small}"
|
|
@@ -47039,6 +47935,7 @@
|
|
|
47039
47935
|
"key": "{shadow.floating.xlarge}",
|
|
47040
47936
|
"$value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
|
|
47041
47937
|
"$type": "shadow",
|
|
47938
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47042
47939
|
"$extensions": {
|
|
47043
47940
|
"org.primer.figma": {
|
|
47044
47941
|
"collection": "mode",
|
|
@@ -47068,6 +47965,10 @@
|
|
|
47068
47965
|
"isSource": true,
|
|
47069
47966
|
"$type": "shadow"
|
|
47070
47967
|
}
|
|
47968
|
+
},
|
|
47969
|
+
"org.primer.llm": {
|
|
47970
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47971
|
+
"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."
|
|
47071
47972
|
}
|
|
47072
47973
|
},
|
|
47073
47974
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47092,6 +47993,7 @@
|
|
|
47092
47993
|
}
|
|
47093
47994
|
],
|
|
47094
47995
|
"$type": "shadow",
|
|
47996
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47095
47997
|
"$extensions": {
|
|
47096
47998
|
"org.primer.figma": {
|
|
47097
47999
|
"collection": "mode",
|
|
@@ -47121,6 +48023,10 @@
|
|
|
47121
48023
|
"isSource": true,
|
|
47122
48024
|
"$type": "shadow"
|
|
47123
48025
|
}
|
|
48026
|
+
},
|
|
48027
|
+
"org.primer.llm": {
|
|
48028
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48029
|
+
"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."
|
|
47124
48030
|
}
|
|
47125
48031
|
},
|
|
47126
48032
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47133,6 +48039,7 @@
|
|
|
47133
48039
|
"key": "{shadow.inset}",
|
|
47134
48040
|
"$value": "inset 0px 1px 0px 0px #1f23280a",
|
|
47135
48041
|
"$type": "shadow",
|
|
48042
|
+
"$description": "Inset shadow for recessed elements",
|
|
47136
48043
|
"$extensions": {
|
|
47137
48044
|
"org.primer.figma": {
|
|
47138
48045
|
"collection": "mode",
|
|
@@ -47153,6 +48060,10 @@
|
|
|
47153
48060
|
"isSource": true,
|
|
47154
48061
|
"$type": "shadow"
|
|
47155
48062
|
}
|
|
48063
|
+
},
|
|
48064
|
+
"org.primer.llm": {
|
|
48065
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48066
|
+
"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."
|
|
47156
48067
|
}
|
|
47157
48068
|
},
|
|
47158
48069
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47168,6 +48079,7 @@
|
|
|
47168
48079
|
"inset": true
|
|
47169
48080
|
},
|
|
47170
48081
|
"$type": "shadow",
|
|
48082
|
+
"$description": "Inset shadow for recessed elements",
|
|
47171
48083
|
"$extensions": {
|
|
47172
48084
|
"org.primer.figma": {
|
|
47173
48085
|
"collection": "mode",
|
|
@@ -47188,6 +48100,10 @@
|
|
|
47188
48100
|
"isSource": true,
|
|
47189
48101
|
"$type": "shadow"
|
|
47190
48102
|
}
|
|
48103
|
+
},
|
|
48104
|
+
"org.primer.llm": {
|
|
48105
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48106
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47191
48107
|
}
|
|
47192
48108
|
},
|
|
47193
48109
|
"key": "{shadow.inset}"
|
|
@@ -47200,6 +48116,7 @@
|
|
|
47200
48116
|
"key": "{shadow.resting.medium}",
|
|
47201
48117
|
"$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
47202
48118
|
"$type": "shadow",
|
|
48119
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47203
48120
|
"$extensions": {
|
|
47204
48121
|
"org.primer.figma": {
|
|
47205
48122
|
"collection": "mode",
|
|
@@ -47229,6 +48146,10 @@
|
|
|
47229
48146
|
"isSource": true,
|
|
47230
48147
|
"$type": "shadow"
|
|
47231
48148
|
}
|
|
48149
|
+
},
|
|
48150
|
+
"org.primer.llm": {
|
|
48151
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48152
|
+
"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."
|
|
47232
48153
|
}
|
|
47233
48154
|
},
|
|
47234
48155
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47253,6 +48174,7 @@
|
|
|
47253
48174
|
}
|
|
47254
48175
|
],
|
|
47255
48176
|
"$type": "shadow",
|
|
48177
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47256
48178
|
"$extensions": {
|
|
47257
48179
|
"org.primer.figma": {
|
|
47258
48180
|
"collection": "mode",
|
|
@@ -47282,6 +48204,10 @@
|
|
|
47282
48204
|
"isSource": true,
|
|
47283
48205
|
"$type": "shadow"
|
|
47284
48206
|
}
|
|
48207
|
+
},
|
|
48208
|
+
"org.primer.llm": {
|
|
48209
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48210
|
+
"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."
|
|
47285
48211
|
}
|
|
47286
48212
|
},
|
|
47287
48213
|
"key": "{shadow.resting.medium}"
|
|
@@ -47292,8 +48218,9 @@
|
|
|
47292
48218
|
},
|
|
47293
48219
|
"shadow-resting-small": {
|
|
47294
48220
|
"key": "{shadow.resting.small}",
|
|
47295
|
-
"$value": "0px 1px 1px 0px #
|
|
48221
|
+
"$value": "0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808",
|
|
47296
48222
|
"$type": "shadow",
|
|
48223
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47297
48224
|
"$extensions": {
|
|
47298
48225
|
"org.primer.figma": {
|
|
47299
48226
|
"collection": "mode",
|
|
@@ -47325,6 +48252,10 @@
|
|
|
47325
48252
|
"isSource": true,
|
|
47326
48253
|
"$type": "shadow"
|
|
47327
48254
|
}
|
|
48255
|
+
},
|
|
48256
|
+
"org.primer.llm": {
|
|
48257
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48258
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47328
48259
|
}
|
|
47329
48260
|
},
|
|
47330
48261
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47333,7 +48264,7 @@
|
|
|
47333
48264
|
"$value": [
|
|
47334
48265
|
{
|
|
47335
48266
|
"color": "{base.color.neutral.13}",
|
|
47336
|
-
"alpha": 0.
|
|
48267
|
+
"alpha": 0.04,
|
|
47337
48268
|
"offsetX": "0px",
|
|
47338
48269
|
"offsetY": "1px",
|
|
47339
48270
|
"blur": "1px",
|
|
@@ -47342,15 +48273,16 @@
|
|
|
47342
48273
|
},
|
|
47343
48274
|
{
|
|
47344
48275
|
"color": "{base.color.neutral.13}",
|
|
47345
|
-
"alpha": 0.
|
|
48276
|
+
"alpha": 0.03,
|
|
47346
48277
|
"offsetX": "0px",
|
|
47347
48278
|
"offsetY": "1px",
|
|
47348
|
-
"blur": "
|
|
48279
|
+
"blur": "2px",
|
|
47349
48280
|
"spread": "0px",
|
|
47350
48281
|
"inset": false
|
|
47351
48282
|
}
|
|
47352
48283
|
],
|
|
47353
48284
|
"$type": "shadow",
|
|
48285
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47354
48286
|
"$extensions": {
|
|
47355
48287
|
"org.primer.figma": {
|
|
47356
48288
|
"collection": "mode",
|
|
@@ -47382,6 +48314,10 @@
|
|
|
47382
48314
|
"isSource": true,
|
|
47383
48315
|
"$type": "shadow"
|
|
47384
48316
|
}
|
|
48317
|
+
},
|
|
48318
|
+
"org.primer.llm": {
|
|
48319
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48320
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47385
48321
|
}
|
|
47386
48322
|
},
|
|
47387
48323
|
"key": "{shadow.resting.small}"
|
|
@@ -47392,8 +48328,9 @@
|
|
|
47392
48328
|
},
|
|
47393
48329
|
"shadow-resting-xsmall": {
|
|
47394
48330
|
"key": "{shadow.resting.xsmall}",
|
|
47395
|
-
"$value": "0px 1px 1px 0px #
|
|
48331
|
+
"$value": "0px 1px 1px 0px #1f23280d",
|
|
47396
48332
|
"$type": "shadow",
|
|
48333
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47397
48334
|
"$extensions": {
|
|
47398
48335
|
"org.primer.figma": {
|
|
47399
48336
|
"collection": "mode",
|
|
@@ -47414,6 +48351,10 @@
|
|
|
47414
48351
|
"isSource": true,
|
|
47415
48352
|
"$type": "shadow"
|
|
47416
48353
|
}
|
|
48354
|
+
},
|
|
48355
|
+
"org.primer.llm": {
|
|
48356
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48357
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47417
48358
|
}
|
|
47418
48359
|
},
|
|
47419
48360
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47421,7 +48362,7 @@
|
|
|
47421
48362
|
"original": {
|
|
47422
48363
|
"$value": {
|
|
47423
48364
|
"color": "{base.color.neutral.13}",
|
|
47424
|
-
"alpha": 0.
|
|
48365
|
+
"alpha": 0.05,
|
|
47425
48366
|
"offsetX": "0px",
|
|
47426
48367
|
"offsetY": "1px",
|
|
47427
48368
|
"blur": "1px",
|
|
@@ -47429,6 +48370,7 @@
|
|
|
47429
48370
|
"inset": false
|
|
47430
48371
|
},
|
|
47431
48372
|
"$type": "shadow",
|
|
48373
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47432
48374
|
"$extensions": {
|
|
47433
48375
|
"org.primer.figma": {
|
|
47434
48376
|
"collection": "mode",
|
|
@@ -47449,6 +48391,10 @@
|
|
|
47449
48391
|
"isSource": true,
|
|
47450
48392
|
"$type": "shadow"
|
|
47451
48393
|
}
|
|
48394
|
+
},
|
|
48395
|
+
"org.primer.llm": {
|
|
48396
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48397
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47452
48398
|
}
|
|
47453
48399
|
},
|
|
47454
48400
|
"key": "{shadow.resting.xsmall}"
|