@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": "#59636e",
|
|
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.neutral.emphasis}",
|
|
559
614
|
"$type": "color",
|
|
615
|
+
"$description": "Strong background for closed state badges and labels",
|
|
560
616
|
"$extensions": {
|
|
561
617
|
"org.primer.figma": {
|
|
562
618
|
"collection": "mode",
|
|
@@ -575,6 +631,10 @@
|
|
|
575
631
|
"light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}",
|
|
576
632
|
"dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}",
|
|
577
633
|
"dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}"
|
|
634
|
+
},
|
|
635
|
+
"org.primer.llm": {
|
|
636
|
+
"usage": ["closed-badge", "closed-label", "declined-status-badge"],
|
|
637
|
+
"rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text."
|
|
578
638
|
}
|
|
579
639
|
},
|
|
580
640
|
"key": "{bgColor.closed.emphasis}"
|
|
@@ -587,6 +647,7 @@
|
|
|
587
647
|
"key": "{bgColor.closed.muted}",
|
|
588
648
|
"$value": "#818b981f",
|
|
589
649
|
"$type": "color",
|
|
650
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
590
651
|
"$extensions": {
|
|
591
652
|
"org.primer.figma": {
|
|
592
653
|
"collection": "mode",
|
|
@@ -622,6 +683,10 @@
|
|
|
622
683
|
"isSource": true,
|
|
623
684
|
"$type": "color"
|
|
624
685
|
}
|
|
686
|
+
},
|
|
687
|
+
"org.primer.llm": {
|
|
688
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
689
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
625
690
|
}
|
|
626
691
|
},
|
|
627
692
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -629,6 +694,7 @@
|
|
|
629
694
|
"original": {
|
|
630
695
|
"$value": "{bgColor.neutral.muted}",
|
|
631
696
|
"$type": "color",
|
|
697
|
+
"$description": "Subtle background for closed state indicators (issues, PRs)",
|
|
632
698
|
"$extensions": {
|
|
633
699
|
"org.primer.figma": {
|
|
634
700
|
"collection": "mode",
|
|
@@ -664,6 +730,10 @@
|
|
|
664
730
|
"isSource": true,
|
|
665
731
|
"$type": "color"
|
|
666
732
|
}
|
|
733
|
+
},
|
|
734
|
+
"org.primer.llm": {
|
|
735
|
+
"usage": ["closed-issue", "closed-pr", "declined-state"],
|
|
736
|
+
"rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs."
|
|
667
737
|
}
|
|
668
738
|
},
|
|
669
739
|
"key": "{bgColor.closed.muted}"
|
|
@@ -676,6 +746,7 @@
|
|
|
676
746
|
"key": "{bgColor.danger.emphasis}",
|
|
677
747
|
"$value": "#bc4c00",
|
|
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.orange.5}",
|
|
702
777
|
"$type": "color",
|
|
778
|
+
"$description": "Emphasized danger background for critical errors and delete confirmations",
|
|
703
779
|
"$extensions": {
|
|
704
780
|
"org.primer.figma": {
|
|
705
781
|
"collection": "mode",
|
|
@@ -717,6 +793,10 @@
|
|
|
717
793
|
"dark-high-contrast": "{base.color.red.9}",
|
|
718
794
|
"dark-dimmed-high-contrast": "{base.color.red.7}",
|
|
719
795
|
"dark-tritanopia-high-contrast": "{base.color.red.9}"
|
|
796
|
+
},
|
|
797
|
+
"org.primer.llm": {
|
|
798
|
+
"usage": ["delete-button", "critical-alert", "destructive-confirmation"],
|
|
799
|
+
"rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background."
|
|
720
800
|
}
|
|
721
801
|
},
|
|
722
802
|
"key": "{bgColor.danger.emphasis}"
|
|
@@ -729,6 +809,7 @@
|
|
|
729
809
|
"key": "{bgColor.danger.muted}",
|
|
730
810
|
"$value": "#fff1e5",
|
|
731
811
|
"$type": "color",
|
|
812
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
732
813
|
"$extensions": {
|
|
733
814
|
"org.primer.figma": {
|
|
734
815
|
"collection": "mode",
|
|
@@ -755,6 +836,10 @@
|
|
|
755
836
|
"isSource": true,
|
|
756
837
|
"$type": "color"
|
|
757
838
|
}
|
|
839
|
+
},
|
|
840
|
+
"org.primer.llm": {
|
|
841
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
842
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
758
843
|
}
|
|
759
844
|
},
|
|
760
845
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -762,6 +847,7 @@
|
|
|
762
847
|
"original": {
|
|
763
848
|
"$value": "{base.color.orange.0}",
|
|
764
849
|
"$type": "color",
|
|
850
|
+
"$description": "Muted danger background for error states and destructive action contexts",
|
|
765
851
|
"$extensions": {
|
|
766
852
|
"org.primer.figma": {
|
|
767
853
|
"collection": "mode",
|
|
@@ -788,6 +874,10 @@
|
|
|
788
874
|
"isSource": true,
|
|
789
875
|
"$type": "color"
|
|
790
876
|
}
|
|
877
|
+
},
|
|
878
|
+
"org.primer.llm": {
|
|
879
|
+
"usage": ["error-message", "destructive-action", "validation-error"],
|
|
880
|
+
"rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text."
|
|
791
881
|
}
|
|
792
882
|
},
|
|
793
883
|
"key": "{bgColor.danger.muted}"
|
|
@@ -800,6 +890,7 @@
|
|
|
800
890
|
"key": "{bgColor.default}",
|
|
801
891
|
"$value": "#ffffff",
|
|
802
892
|
"$type": "color",
|
|
893
|
+
"$description": "Default background color for pages and main content areas",
|
|
803
894
|
"$extensions": {
|
|
804
895
|
"org.primer.figma": {
|
|
805
896
|
"collection": "mode",
|
|
@@ -816,6 +907,10 @@
|
|
|
816
907
|
"dark-high-contrast": "#ffffff",
|
|
817
908
|
"dark-tritanopia-high-contrast": "#ffffff",
|
|
818
909
|
"dark-protanopia-deuteranopia-high-contrast": "#ffffff"
|
|
910
|
+
},
|
|
911
|
+
"org.primer.llm": {
|
|
912
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
913
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
819
914
|
}
|
|
820
915
|
},
|
|
821
916
|
"filePath": "src/tokens/functional/color/bgColor.json5",
|
|
@@ -823,6 +918,7 @@
|
|
|
823
918
|
"original": {
|
|
824
919
|
"$value": "{base.color.neutral.0}",
|
|
825
920
|
"$type": "color",
|
|
921
|
+
"$description": "Default background color for pages and main content areas",
|
|
826
922
|
"$extensions": {
|
|
827
923
|
"org.primer.figma": {
|
|
828
924
|
"collection": "mode",
|
|
@@ -839,6 +935,10 @@
|
|
|
839
935
|
"dark-high-contrast": "{base.color.neutral.0}",
|
|
840
936
|
"dark-tritanopia-high-contrast": "{base.color.neutral.0}",
|
|
841
937
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}"
|
|
938
|
+
},
|
|
939
|
+
"org.primer.llm": {
|
|
940
|
+
"usage": ["page-background", "main-content", "card-background"],
|
|
941
|
+
"rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting."
|
|
842
942
|
}
|
|
843
943
|
},
|
|
844
944
|
"key": "{bgColor.default}"
|
|
@@ -851,6 +951,7 @@
|
|
|
851
951
|
"key": "{bgColor.disabled}",
|
|
852
952
|
"$value": "#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": "#bc4c00",
|
|
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": "{base.color.orange.5}",
|
|
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": "#fff1e5",
|
|
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": "{base.color.orange.0}",
|
|
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": "#0969da",
|
|
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": "{base.color.blue.5}",
|
|
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": "#ddf4ff",
|
|
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.blue.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 #bc4c00",
|
|
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 #fff1e5",
|
|
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 #bc4c00",
|
|
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 #fff1e5",
|
|
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 #0969da",
|
|
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 #ddf4ff",
|
|
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 #0969da",
|
|
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 #ddf4ff",
|
|
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": "#818b98",
|
|
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.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": "#d1d9e066",
|
|
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",
|
|
@@ -3142,6 +3527,7 @@
|
|
|
3142
3527
|
"original": {
|
|
3143
3528
|
"$value": "{borderColor.default}",
|
|
3144
3529
|
"$type": "color",
|
|
3530
|
+
"$description": "Subtle border for closed state indicators",
|
|
3145
3531
|
"$extensions": {
|
|
3146
3532
|
"org.primer.figma": {
|
|
3147
3533
|
"collection": "mode",
|
|
@@ -3208,6 +3594,10 @@
|
|
|
3208
3594
|
"isSource": true,
|
|
3209
3595
|
"$type": "color"
|
|
3210
3596
|
}
|
|
3597
|
+
},
|
|
3598
|
+
"org.primer.llm": {
|
|
3599
|
+
"usage": ["closed-muted", "closed-issue", "closed-pr"],
|
|
3600
|
+
"rules": "Use for closed/declined status borders. Specifically for GitHub issues and PRs."
|
|
3211
3601
|
}
|
|
3212
3602
|
},
|
|
3213
3603
|
"alpha": 0.4,
|
|
@@ -3221,6 +3611,7 @@
|
|
|
3221
3611
|
"key": "{borderColor.danger.emphasis}",
|
|
3222
3612
|
"$value": "#bc4c00",
|
|
3223
3613
|
"$type": "color",
|
|
3614
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3224
3615
|
"$extensions": {
|
|
3225
3616
|
"org.primer.figma": {
|
|
3226
3617
|
"collection": "mode",
|
|
@@ -3256,6 +3647,10 @@
|
|
|
3256
3647
|
"$type": "color"
|
|
3257
3648
|
},
|
|
3258
3649
|
"dark-dimmed-high-contrast": "#ffaba8"
|
|
3650
|
+
},
|
|
3651
|
+
"org.primer.llm": {
|
|
3652
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3653
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3259
3654
|
}
|
|
3260
3655
|
},
|
|
3261
3656
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3263,6 +3658,7 @@
|
|
|
3263
3658
|
"original": {
|
|
3264
3659
|
"$value": "{base.color.orange.5}",
|
|
3265
3660
|
"$type": "color",
|
|
3661
|
+
"$description": "Strong danger border for destructive actions and errors",
|
|
3266
3662
|
"$extensions": {
|
|
3267
3663
|
"org.primer.figma": {
|
|
3268
3664
|
"collection": "mode",
|
|
@@ -3298,6 +3694,10 @@
|
|
|
3298
3694
|
"$type": "color"
|
|
3299
3695
|
},
|
|
3300
3696
|
"dark-dimmed-high-contrast": "{base.color.red.2}"
|
|
3697
|
+
},
|
|
3698
|
+
"org.primer.llm": {
|
|
3699
|
+
"usage": ["danger-emphasis", "error-emphasis", "destructive-emphasis"],
|
|
3700
|
+
"rules": "MUST use for destructive action borders. Pair with bgColor.danger.emphasis."
|
|
3301
3701
|
}
|
|
3302
3702
|
},
|
|
3303
3703
|
"key": "{borderColor.danger.emphasis}"
|
|
@@ -3310,6 +3710,7 @@
|
|
|
3310
3710
|
"key": "{borderColor.danger.muted}",
|
|
3311
3711
|
"$value": "#fff1e5",
|
|
3312
3712
|
"$type": "color",
|
|
3713
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3313
3714
|
"$extensions": {
|
|
3314
3715
|
"org.primer.figma": {
|
|
3315
3716
|
"collection": "mode",
|
|
@@ -3383,6 +3784,10 @@
|
|
|
3383
3784
|
"isSource": true,
|
|
3384
3785
|
"$type": "color"
|
|
3385
3786
|
}
|
|
3787
|
+
},
|
|
3788
|
+
"org.primer.llm": {
|
|
3789
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3790
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3386
3791
|
}
|
|
3387
3792
|
},
|
|
3388
3793
|
"alpha": 1,
|
|
@@ -3391,6 +3796,7 @@
|
|
|
3391
3796
|
"original": {
|
|
3392
3797
|
"$value": "{base.color.orange.0}",
|
|
3393
3798
|
"$type": "color",
|
|
3799
|
+
"$description": "Subtle danger border for errors and destructive contexts",
|
|
3394
3800
|
"$extensions": {
|
|
3395
3801
|
"org.primer.figma": {
|
|
3396
3802
|
"collection": "mode",
|
|
@@ -3464,6 +3870,10 @@
|
|
|
3464
3870
|
"isSource": true,
|
|
3465
3871
|
"$type": "color"
|
|
3466
3872
|
}
|
|
3873
|
+
},
|
|
3874
|
+
"org.primer.llm": {
|
|
3875
|
+
"usage": ["danger-muted", "error-muted", "destructive-muted"],
|
|
3876
|
+
"rules": "Use for error state borders. Pair with bgColor.danger.muted."
|
|
3467
3877
|
}
|
|
3468
3878
|
},
|
|
3469
3879
|
"alpha": 1,
|
|
@@ -3477,6 +3887,7 @@
|
|
|
3477
3887
|
"key": "{borderColor.default}",
|
|
3478
3888
|
"$value": "#d1d9e0",
|
|
3479
3889
|
"$type": "color",
|
|
3890
|
+
"$description": "Default border color for most UI elements",
|
|
3480
3891
|
"$extensions": {
|
|
3481
3892
|
"org.primer.overrides": {
|
|
3482
3893
|
"dark": "#c8d1da",
|
|
@@ -3496,6 +3907,10 @@
|
|
|
3496
3907
|
"codeSyntax": {
|
|
3497
3908
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3498
3909
|
}
|
|
3910
|
+
},
|
|
3911
|
+
"org.primer.llm": {
|
|
3912
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3913
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3499
3914
|
}
|
|
3500
3915
|
},
|
|
3501
3916
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3503,6 +3918,7 @@
|
|
|
3503
3918
|
"original": {
|
|
3504
3919
|
"$value": "{base.color.neutral.6}",
|
|
3505
3920
|
"$type": "color",
|
|
3921
|
+
"$description": "Default border color for most UI elements",
|
|
3506
3922
|
"$extensions": {
|
|
3507
3923
|
"org.primer.overrides": {
|
|
3508
3924
|
"dark": "{base.color.neutral.7}",
|
|
@@ -3522,6 +3938,10 @@
|
|
|
3522
3938
|
"codeSyntax": {
|
|
3523
3939
|
"web": "var(--borderColor-default) /* utility class: .color-border-default */"
|
|
3524
3940
|
}
|
|
3941
|
+
},
|
|
3942
|
+
"org.primer.llm": {
|
|
3943
|
+
"usage": ["default-border", "card-border", "input-border", "divider"],
|
|
3944
|
+
"rules": "RECOMMENDED default for all borders. Use for cards, inputs, and dividers."
|
|
3525
3945
|
}
|
|
3526
3946
|
},
|
|
3527
3947
|
"key": "{borderColor.default}"
|
|
@@ -3534,6 +3954,7 @@
|
|
|
3534
3954
|
"key": "{borderColor.disabled}",
|
|
3535
3955
|
"$value": "#818b981a",
|
|
3536
3956
|
"$type": "color",
|
|
3957
|
+
"$description": "Border color for disabled interactive elements",
|
|
3537
3958
|
"$extensions": {
|
|
3538
3959
|
"org.primer.figma": {
|
|
3539
3960
|
"collection": "mode",
|
|
@@ -3576,6 +3997,10 @@
|
|
|
3576
3997
|
"isSource": true,
|
|
3577
3998
|
"$type": "color"
|
|
3578
3999
|
}
|
|
4000
|
+
},
|
|
4001
|
+
"org.primer.llm": {
|
|
4002
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4003
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3579
4004
|
}
|
|
3580
4005
|
},
|
|
3581
4006
|
"alpha": 0.1,
|
|
@@ -3584,6 +4009,7 @@
|
|
|
3584
4009
|
"original": {
|
|
3585
4010
|
"$value": "{base.color.neutral.8}",
|
|
3586
4011
|
"$type": "color",
|
|
4012
|
+
"$description": "Border color for disabled interactive elements",
|
|
3587
4013
|
"$extensions": {
|
|
3588
4014
|
"org.primer.figma": {
|
|
3589
4015
|
"collection": "mode",
|
|
@@ -3626,6 +4052,10 @@
|
|
|
3626
4052
|
"isSource": true,
|
|
3627
4053
|
"$type": "color"
|
|
3628
4054
|
}
|
|
4055
|
+
},
|
|
4056
|
+
"org.primer.llm": {
|
|
4057
|
+
"usage": ["disabled-border", "inactive-border", "unavailable"],
|
|
4058
|
+
"rules": "MUST use for disabled state borders. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
3629
4059
|
}
|
|
3630
4060
|
},
|
|
3631
4061
|
"alpha": 0.1,
|
|
@@ -3639,6 +4069,7 @@
|
|
|
3639
4069
|
"key": "{borderColor.done.emphasis}",
|
|
3640
4070
|
"$value": "#8250df",
|
|
3641
4071
|
"$type": "color",
|
|
4072
|
+
"$description": "Strong border for completed/done state badges",
|
|
3642
4073
|
"$extensions": {
|
|
3643
4074
|
"org.primer.figma": {
|
|
3644
4075
|
"collection": "mode",
|
|
@@ -3650,6 +4081,10 @@
|
|
|
3650
4081
|
},
|
|
3651
4082
|
"org.primer.overrides": {
|
|
3652
4083
|
"dark-dimmed-high-contrast": "#d8b9ff"
|
|
4084
|
+
},
|
|
4085
|
+
"org.primer.llm": {
|
|
4086
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4087
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3653
4088
|
}
|
|
3654
4089
|
},
|
|
3655
4090
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3657,6 +4092,7 @@
|
|
|
3657
4092
|
"original": {
|
|
3658
4093
|
"$value": "{base.color.purple.5}",
|
|
3659
4094
|
"$type": "color",
|
|
4095
|
+
"$description": "Strong border for completed/done state badges",
|
|
3660
4096
|
"$extensions": {
|
|
3661
4097
|
"org.primer.figma": {
|
|
3662
4098
|
"collection": "mode",
|
|
@@ -3668,6 +4104,10 @@
|
|
|
3668
4104
|
},
|
|
3669
4105
|
"org.primer.overrides": {
|
|
3670
4106
|
"dark-dimmed-high-contrast": "{base.color.purple.2}"
|
|
4107
|
+
},
|
|
4108
|
+
"org.primer.llm": {
|
|
4109
|
+
"usage": ["done-emphasis", "merged-status"],
|
|
4110
|
+
"rules": "Use for emphasized done state borders. Pair with bgColor.done.emphasis."
|
|
3671
4111
|
}
|
|
3672
4112
|
},
|
|
3673
4113
|
"key": "{borderColor.done.emphasis}"
|
|
@@ -3680,6 +4120,7 @@
|
|
|
3680
4120
|
"key": "{borderColor.done.muted}",
|
|
3681
4121
|
"$value": "#c297ff66",
|
|
3682
4122
|
"$type": "color",
|
|
4123
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3683
4124
|
"$extensions": {
|
|
3684
4125
|
"org.primer.figma": {
|
|
3685
4126
|
"collection": "mode",
|
|
@@ -3740,6 +4181,10 @@
|
|
|
3740
4181
|
"isSource": true,
|
|
3741
4182
|
"$type": "color"
|
|
3742
4183
|
}
|
|
4184
|
+
},
|
|
4185
|
+
"org.primer.llm": {
|
|
4186
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4187
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3743
4188
|
}
|
|
3744
4189
|
},
|
|
3745
4190
|
"alpha": 0.4,
|
|
@@ -3748,6 +4193,7 @@
|
|
|
3748
4193
|
"original": {
|
|
3749
4194
|
"$value": "{base.color.purple.3}",
|
|
3750
4195
|
"$type": "color",
|
|
4196
|
+
"$description": "Subtle border for completed/done state indicators",
|
|
3751
4197
|
"$extensions": {
|
|
3752
4198
|
"org.primer.figma": {
|
|
3753
4199
|
"collection": "mode",
|
|
@@ -3808,6 +4254,10 @@
|
|
|
3808
4254
|
"isSource": true,
|
|
3809
4255
|
"$type": "color"
|
|
3810
4256
|
}
|
|
4257
|
+
},
|
|
4258
|
+
"org.primer.llm": {
|
|
4259
|
+
"usage": ["done-muted", "merged", "completed"],
|
|
4260
|
+
"rules": "Use for completed/done status borders. Conveys finished or merged state."
|
|
3811
4261
|
}
|
|
3812
4262
|
},
|
|
3813
4263
|
"alpha": 0.4,
|
|
@@ -3821,6 +4271,7 @@
|
|
|
3821
4271
|
"key": "{borderColor.draft.emphasis}",
|
|
3822
4272
|
"$value": "#59636e",
|
|
3823
4273
|
"$type": "color",
|
|
4274
|
+
"$description": "Strong border for draft state badges",
|
|
3824
4275
|
"$extensions": {
|
|
3825
4276
|
"org.primer.figma": {
|
|
3826
4277
|
"collection": "mode",
|
|
@@ -3829,6 +4280,10 @@
|
|
|
3829
4280
|
"codeSyntax": {
|
|
3830
4281
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3831
4282
|
}
|
|
4283
|
+
},
|
|
4284
|
+
"org.primer.llm": {
|
|
4285
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4286
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3832
4287
|
}
|
|
3833
4288
|
},
|
|
3834
4289
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3836,6 +4291,7 @@
|
|
|
3836
4291
|
"original": {
|
|
3837
4292
|
"$value": "{borderColor.neutral.emphasis}",
|
|
3838
4293
|
"$type": "color",
|
|
4294
|
+
"$description": "Strong border for draft state badges",
|
|
3839
4295
|
"$extensions": {
|
|
3840
4296
|
"org.primer.figma": {
|
|
3841
4297
|
"collection": "mode",
|
|
@@ -3844,6 +4300,10 @@
|
|
|
3844
4300
|
"codeSyntax": {
|
|
3845
4301
|
"web": "var(--borderColor-draft-emphasis)"
|
|
3846
4302
|
}
|
|
4303
|
+
},
|
|
4304
|
+
"org.primer.llm": {
|
|
4305
|
+
"usage": ["draft-emphasis", "draft-status"],
|
|
4306
|
+
"rules": "Use for emphasized draft state borders. Pair with bgColor.draft.emphasis."
|
|
3847
4307
|
}
|
|
3848
4308
|
},
|
|
3849
4309
|
"key": "{borderColor.draft.emphasis}"
|
|
@@ -3856,6 +4316,7 @@
|
|
|
3856
4316
|
"key": "{borderColor.draft.muted}",
|
|
3857
4317
|
"$value": "#d1d9e066",
|
|
3858
4318
|
"$type": "color",
|
|
4319
|
+
"$description": "Subtle border for draft state indicators",
|
|
3859
4320
|
"$extensions": {
|
|
3860
4321
|
"org.primer.figma": {
|
|
3861
4322
|
"collection": "mode",
|
|
@@ -3922,6 +4383,10 @@
|
|
|
3922
4383
|
"isSource": true,
|
|
3923
4384
|
"$type": "color"
|
|
3924
4385
|
}
|
|
4386
|
+
},
|
|
4387
|
+
"org.primer.llm": {
|
|
4388
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4389
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3925
4390
|
}
|
|
3926
4391
|
},
|
|
3927
4392
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -3930,6 +4395,7 @@
|
|
|
3930
4395
|
"original": {
|
|
3931
4396
|
"$value": "{borderColor.default}",
|
|
3932
4397
|
"$type": "color",
|
|
4398
|
+
"$description": "Subtle border for draft state indicators",
|
|
3933
4399
|
"$extensions": {
|
|
3934
4400
|
"org.primer.figma": {
|
|
3935
4401
|
"collection": "mode",
|
|
@@ -3996,6 +4462,10 @@
|
|
|
3996
4462
|
"isSource": true,
|
|
3997
4463
|
"$type": "color"
|
|
3998
4464
|
}
|
|
4465
|
+
},
|
|
4466
|
+
"org.primer.llm": {
|
|
4467
|
+
"usage": ["draft-muted", "draft-pr", "draft-issue"],
|
|
4468
|
+
"rules": "Use for draft/WIP status borders. Conveys incomplete or pending state."
|
|
3999
4469
|
}
|
|
4000
4470
|
},
|
|
4001
4471
|
"alpha": 0.4,
|
|
@@ -4009,6 +4479,7 @@
|
|
|
4009
4479
|
"key": "{borderColor.emphasis}",
|
|
4010
4480
|
"$value": "#818b98",
|
|
4011
4481
|
"$type": "color",
|
|
4482
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4012
4483
|
"$extensions": {
|
|
4013
4484
|
"org.primer.figma": {
|
|
4014
4485
|
"collection": "mode",
|
|
@@ -4023,6 +4494,10 @@
|
|
|
4023
4494
|
"dark-dimmed-high-contrast": "#d1d9e0",
|
|
4024
4495
|
"dark-tritanopia-high-contrast": "#d1d9e0",
|
|
4025
4496
|
"dark-protanopia-deuteranopia-high-contrast": "#d1d9e0"
|
|
4497
|
+
},
|
|
4498
|
+
"org.primer.llm": {
|
|
4499
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4500
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4026
4501
|
}
|
|
4027
4502
|
},
|
|
4028
4503
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4030,6 +4505,7 @@
|
|
|
4030
4505
|
"original": {
|
|
4031
4506
|
"$value": "{base.color.neutral.8}",
|
|
4032
4507
|
"$type": "color",
|
|
4508
|
+
"$description": "Strong border for emphasis and visual weight",
|
|
4033
4509
|
"$extensions": {
|
|
4034
4510
|
"org.primer.figma": {
|
|
4035
4511
|
"collection": "mode",
|
|
@@ -4044,6 +4520,10 @@
|
|
|
4044
4520
|
"dark-dimmed-high-contrast": "{borderColor.default}",
|
|
4045
4521
|
"dark-tritanopia-high-contrast": "{borderColor.default}",
|
|
4046
4522
|
"dark-protanopia-deuteranopia-high-contrast": "{borderColor.default}"
|
|
4523
|
+
},
|
|
4524
|
+
"org.primer.llm": {
|
|
4525
|
+
"usage": ["emphasis-border", "strong-border", "selected-border"],
|
|
4526
|
+
"rules": "Use for borders needing more visual weight. Darker than borderColor.default."
|
|
4047
4527
|
}
|
|
4048
4528
|
},
|
|
4049
4529
|
"key": "{borderColor.emphasis}"
|
|
@@ -4056,6 +4536,7 @@
|
|
|
4056
4536
|
"key": "{borderColor.muted}",
|
|
4057
4537
|
"$value": "#d1d9e0b3",
|
|
4058
4538
|
"$type": "color",
|
|
4539
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4059
4540
|
"$extensions": {
|
|
4060
4541
|
"org.primer.figma": {
|
|
4061
4542
|
"collection": "mode",
|
|
@@ -4122,6 +4603,10 @@
|
|
|
4122
4603
|
"isSource": true,
|
|
4123
4604
|
"$type": "color"
|
|
4124
4605
|
}
|
|
4606
|
+
},
|
|
4607
|
+
"org.primer.llm": {
|
|
4608
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4609
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4125
4610
|
}
|
|
4126
4611
|
},
|
|
4127
4612
|
"alpha": 0.7,
|
|
@@ -4130,6 +4615,7 @@
|
|
|
4130
4615
|
"original": {
|
|
4131
4616
|
"$value": "{borderColor.default}",
|
|
4132
4617
|
"$type": "color",
|
|
4618
|
+
"$description": "Subtle border for secondary elements and light separators",
|
|
4133
4619
|
"$extensions": {
|
|
4134
4620
|
"org.primer.figma": {
|
|
4135
4621
|
"collection": "mode",
|
|
@@ -4196,6 +4682,10 @@
|
|
|
4196
4682
|
"isSource": true,
|
|
4197
4683
|
"$type": "color"
|
|
4198
4684
|
}
|
|
4685
|
+
},
|
|
4686
|
+
"org.primer.llm": {
|
|
4687
|
+
"usage": ["subtle-border", "light-divider", "secondary-border"],
|
|
4688
|
+
"rules": "Use for subtle borders and separators. Less prominent than borderColor.default."
|
|
4199
4689
|
}
|
|
4200
4690
|
},
|
|
4201
4691
|
"alpha": 0.7,
|
|
@@ -4209,6 +4699,7 @@
|
|
|
4209
4699
|
"key": "{borderColor.neutral.emphasis}",
|
|
4210
4700
|
"$value": "#59636e",
|
|
4211
4701
|
"$type": "color",
|
|
4702
|
+
"$description": "Strong neutral semantic border",
|
|
4212
4703
|
"$extensions": {
|
|
4213
4704
|
"org.primer.figma": {
|
|
4214
4705
|
"collection": "mode",
|
|
@@ -4217,6 +4708,10 @@
|
|
|
4217
4708
|
},
|
|
4218
4709
|
"org.primer.overrides": {
|
|
4219
4710
|
"dark": "#818b98"
|
|
4711
|
+
},
|
|
4712
|
+
"org.primer.llm": {
|
|
4713
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4714
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4220
4715
|
}
|
|
4221
4716
|
},
|
|
4222
4717
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4224,6 +4719,7 @@
|
|
|
4224
4719
|
"original": {
|
|
4225
4720
|
"$value": "{base.color.neutral.9}",
|
|
4226
4721
|
"$type": "color",
|
|
4722
|
+
"$description": "Strong neutral semantic border",
|
|
4227
4723
|
"$extensions": {
|
|
4228
4724
|
"org.primer.figma": {
|
|
4229
4725
|
"collection": "mode",
|
|
@@ -4232,6 +4728,10 @@
|
|
|
4232
4728
|
},
|
|
4233
4729
|
"org.primer.overrides": {
|
|
4234
4730
|
"dark": "{borderColor.emphasis}"
|
|
4731
|
+
},
|
|
4732
|
+
"org.primer.llm": {
|
|
4733
|
+
"usage": ["neutral-emphasis", "neutral-strong"],
|
|
4734
|
+
"rules": "Use for emphasized neutral semantic borders. Stronger than neutral.muted."
|
|
4235
4735
|
}
|
|
4236
4736
|
},
|
|
4237
4737
|
"key": "{borderColor.neutral.emphasis}"
|
|
@@ -4244,6 +4744,7 @@
|
|
|
4244
4744
|
"key": "{borderColor.neutral.muted}",
|
|
4245
4745
|
"$value": "#d1d9e0b3",
|
|
4246
4746
|
"$type": "color",
|
|
4747
|
+
"$description": "Subtle neutral semantic border",
|
|
4247
4748
|
"$extensions": {
|
|
4248
4749
|
"org.primer.figma": {
|
|
4249
4750
|
"collection": "mode",
|
|
@@ -4265,6 +4766,10 @@
|
|
|
4265
4766
|
"isSource": true,
|
|
4266
4767
|
"$type": "color"
|
|
4267
4768
|
}
|
|
4769
|
+
},
|
|
4770
|
+
"org.primer.llm": {
|
|
4771
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4772
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4268
4773
|
}
|
|
4269
4774
|
},
|
|
4270
4775
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4272,6 +4777,7 @@
|
|
|
4272
4777
|
"original": {
|
|
4273
4778
|
"$value": "{borderColor.muted}",
|
|
4274
4779
|
"$type": "color",
|
|
4780
|
+
"$description": "Subtle neutral semantic border",
|
|
4275
4781
|
"$extensions": {
|
|
4276
4782
|
"org.primer.figma": {
|
|
4277
4783
|
"collection": "mode",
|
|
@@ -4293,6 +4799,10 @@
|
|
|
4293
4799
|
"isSource": true,
|
|
4294
4800
|
"$type": "color"
|
|
4295
4801
|
}
|
|
4802
|
+
},
|
|
4803
|
+
"org.primer.llm": {
|
|
4804
|
+
"usage": ["neutral-muted", "neutral-secondary"],
|
|
4805
|
+
"rules": "Use for neutral semantic borders on tags and badges. Prefer borderColor.muted for general use."
|
|
4296
4806
|
}
|
|
4297
4807
|
},
|
|
4298
4808
|
"key": "{borderColor.neutral.muted}"
|
|
@@ -4305,6 +4815,7 @@
|
|
|
4305
4815
|
"key": "{borderColor.open.emphasis}",
|
|
4306
4816
|
"$value": "#bc4c00",
|
|
4307
4817
|
"$type": "color",
|
|
4818
|
+
"$description": "Strong border for open state badges",
|
|
4308
4819
|
"$extensions": {
|
|
4309
4820
|
"org.primer.figma": {
|
|
4310
4821
|
"collection": "mode",
|
|
@@ -4323,6 +4834,10 @@
|
|
|
4323
4834
|
"dark-protanopia-deuteranopia-high-contrast": "#bc4c00",
|
|
4324
4835
|
"light-protanopia-deuteranopia": "#bc4c00",
|
|
4325
4836
|
"light-protanopia-deuteranopia-high-contrast": "#bc4c00"
|
|
4837
|
+
},
|
|
4838
|
+
"org.primer.llm": {
|
|
4839
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4840
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4326
4841
|
}
|
|
4327
4842
|
},
|
|
4328
4843
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4330,6 +4845,7 @@
|
|
|
4330
4845
|
"original": {
|
|
4331
4846
|
"$value": "{base.color.orange.5}",
|
|
4332
4847
|
"$type": "color",
|
|
4848
|
+
"$description": "Strong border for open state badges",
|
|
4333
4849
|
"$extensions": {
|
|
4334
4850
|
"org.primer.figma": {
|
|
4335
4851
|
"collection": "mode",
|
|
@@ -4348,6 +4864,10 @@
|
|
|
4348
4864
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}",
|
|
4349
4865
|
"light-protanopia-deuteranopia": "{base.color.orange.5}",
|
|
4350
4866
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}"
|
|
4867
|
+
},
|
|
4868
|
+
"org.primer.llm": {
|
|
4869
|
+
"usage": ["open-emphasis", "open-status"],
|
|
4870
|
+
"rules": "Use for emphasized open state borders. Pair with bgColor.open.emphasis."
|
|
4351
4871
|
}
|
|
4352
4872
|
},
|
|
4353
4873
|
"key": "{borderColor.open.emphasis}"
|
|
@@ -4360,6 +4880,7 @@
|
|
|
4360
4880
|
"key": "{borderColor.open.muted}",
|
|
4361
4881
|
"$value": "#fb8f4466",
|
|
4362
4882
|
"$type": "color",
|
|
4883
|
+
"$description": "Subtle border for open state indicators",
|
|
4363
4884
|
"$extensions": {
|
|
4364
4885
|
"org.primer.figma": {
|
|
4365
4886
|
"collection": "mode",
|
|
@@ -4426,6 +4947,10 @@
|
|
|
4426
4947
|
"isSource": true,
|
|
4427
4948
|
"$type": "color"
|
|
4428
4949
|
}
|
|
4950
|
+
},
|
|
4951
|
+
"org.primer.llm": {
|
|
4952
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
4953
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4429
4954
|
}
|
|
4430
4955
|
},
|
|
4431
4956
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4434,6 +4959,7 @@
|
|
|
4434
4959
|
"original": {
|
|
4435
4960
|
"$value": "{base.color.orange.3}",
|
|
4436
4961
|
"$type": "color",
|
|
4962
|
+
"$description": "Subtle border for open state indicators",
|
|
4437
4963
|
"$extensions": {
|
|
4438
4964
|
"org.primer.figma": {
|
|
4439
4965
|
"collection": "mode",
|
|
@@ -4500,6 +5026,10 @@
|
|
|
4500
5026
|
"isSource": true,
|
|
4501
5027
|
"$type": "color"
|
|
4502
5028
|
}
|
|
5029
|
+
},
|
|
5030
|
+
"org.primer.llm": {
|
|
5031
|
+
"usage": ["open-muted", "open-issue", "open-pr"],
|
|
5032
|
+
"rules": "Use for open/active status borders. Specifically for GitHub issues and PRs."
|
|
4503
5033
|
}
|
|
4504
5034
|
},
|
|
4505
5035
|
"alpha": 0.4,
|
|
@@ -4513,6 +5043,7 @@
|
|
|
4513
5043
|
"key": "{borderColor.severe.emphasis}",
|
|
4514
5044
|
"$value": "#bc4c00",
|
|
4515
5045
|
"$type": "color",
|
|
5046
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4516
5047
|
"$extensions": {
|
|
4517
5048
|
"org.primer.figma": {
|
|
4518
5049
|
"collection": "mode",
|
|
@@ -4527,6 +5058,10 @@
|
|
|
4527
5058
|
"light-tritanopia": "#cf222e",
|
|
4528
5059
|
"light-tritanopia-high-contrast": "#cf222e",
|
|
4529
5060
|
"dark-dimmed-high-contrast": "#ffb77c"
|
|
5061
|
+
},
|
|
5062
|
+
"org.primer.llm": {
|
|
5063
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5064
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4530
5065
|
}
|
|
4531
5066
|
},
|
|
4532
5067
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4534,6 +5069,7 @@
|
|
|
4534
5069
|
"original": {
|
|
4535
5070
|
"$value": "{base.color.orange.5}",
|
|
4536
5071
|
"$type": "color",
|
|
5072
|
+
"$description": "Strong severe border for prominent high-priority warnings",
|
|
4537
5073
|
"$extensions": {
|
|
4538
5074
|
"org.primer.figma": {
|
|
4539
5075
|
"collection": "mode",
|
|
@@ -4548,6 +5084,10 @@
|
|
|
4548
5084
|
"light-tritanopia": "{base.color.red.5}",
|
|
4549
5085
|
"light-tritanopia-high-contrast": "{base.color.red.5}",
|
|
4550
5086
|
"dark-dimmed-high-contrast": "{base.color.orange.2}"
|
|
5087
|
+
},
|
|
5088
|
+
"org.primer.llm": {
|
|
5089
|
+
"usage": ["severe-emphasis", "urgent-emphasis"],
|
|
5090
|
+
"rules": "Use for emphasized severe borders. Pair with bgColor.severe.emphasis."
|
|
4551
5091
|
}
|
|
4552
5092
|
},
|
|
4553
5093
|
"key": "{borderColor.severe.emphasis}"
|
|
@@ -4560,6 +5100,7 @@
|
|
|
4560
5100
|
"key": "{borderColor.severe.muted}",
|
|
4561
5101
|
"$value": "#fb8f4466",
|
|
4562
5102
|
"$type": "color",
|
|
5103
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4563
5104
|
"$extensions": {
|
|
4564
5105
|
"org.primer.figma": {
|
|
4565
5106
|
"collection": "mode",
|
|
@@ -4615,6 +5156,10 @@
|
|
|
4615
5156
|
"isSource": true,
|
|
4616
5157
|
"$type": "color"
|
|
4617
5158
|
}
|
|
5159
|
+
},
|
|
5160
|
+
"org.primer.llm": {
|
|
5161
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5162
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4618
5163
|
}
|
|
4619
5164
|
},
|
|
4620
5165
|
"alpha": 0.4,
|
|
@@ -4623,6 +5168,7 @@
|
|
|
4623
5168
|
"original": {
|
|
4624
5169
|
"$value": "{base.color.orange.3}",
|
|
4625
5170
|
"$type": "color",
|
|
5171
|
+
"$description": "Subtle severe border for high-priority warnings",
|
|
4626
5172
|
"$extensions": {
|
|
4627
5173
|
"org.primer.figma": {
|
|
4628
5174
|
"collection": "mode",
|
|
@@ -4678,6 +5224,10 @@
|
|
|
4678
5224
|
"isSource": true,
|
|
4679
5225
|
"$type": "color"
|
|
4680
5226
|
}
|
|
5227
|
+
},
|
|
5228
|
+
"org.primer.llm": {
|
|
5229
|
+
"usage": ["severe-muted", "urgent-muted"],
|
|
5230
|
+
"rules": "Use for severe warning borders. More critical than attention, less than danger."
|
|
4681
5231
|
}
|
|
4682
5232
|
},
|
|
4683
5233
|
"alpha": 0.4,
|
|
@@ -4691,6 +5241,7 @@
|
|
|
4691
5241
|
"key": "{borderColor.sponsors.emphasis}",
|
|
4692
5242
|
"$value": "#bf3989",
|
|
4693
5243
|
"$type": "color",
|
|
5244
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4694
5245
|
"$extensions": {
|
|
4695
5246
|
"org.primer.figma": {
|
|
4696
5247
|
"collection": "mode",
|
|
@@ -4702,6 +5253,10 @@
|
|
|
4702
5253
|
},
|
|
4703
5254
|
"org.primer.overrides": {
|
|
4704
5255
|
"dark-dimmed-high-contrast": "#ff80c8"
|
|
5256
|
+
},
|
|
5257
|
+
"org.primer.llm": {
|
|
5258
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5259
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4705
5260
|
}
|
|
4706
5261
|
},
|
|
4707
5262
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4709,6 +5264,7 @@
|
|
|
4709
5264
|
"original": {
|
|
4710
5265
|
"$value": "{base.color.pink.5}",
|
|
4711
5266
|
"$type": "color",
|
|
5267
|
+
"$description": "Strong border for prominent GitHub Sponsors elements",
|
|
4712
5268
|
"$extensions": {
|
|
4713
5269
|
"org.primer.figma": {
|
|
4714
5270
|
"collection": "mode",
|
|
@@ -4720,6 +5276,10 @@
|
|
|
4720
5276
|
},
|
|
4721
5277
|
"org.primer.overrides": {
|
|
4722
5278
|
"dark-dimmed-high-contrast": "{base.color.pink.3}"
|
|
5279
|
+
},
|
|
5280
|
+
"org.primer.llm": {
|
|
5281
|
+
"usage": ["sponsors-emphasis", "funding-emphasis"],
|
|
5282
|
+
"rules": "Use for emphasized Sponsors borders. Pair with bgColor.sponsors.emphasis."
|
|
4723
5283
|
}
|
|
4724
5284
|
},
|
|
4725
5285
|
"key": "{borderColor.sponsors.emphasis}"
|
|
@@ -4732,6 +5292,7 @@
|
|
|
4732
5292
|
"key": "{borderColor.sponsors.muted}",
|
|
4733
5293
|
"$value": "#ff80c866",
|
|
4734
5294
|
"$type": "color",
|
|
5295
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4735
5296
|
"$extensions": {
|
|
4736
5297
|
"org.primer.figma": {
|
|
4737
5298
|
"collection": "mode",
|
|
@@ -4792,6 +5353,10 @@
|
|
|
4792
5353
|
"isSource": true,
|
|
4793
5354
|
"$type": "color"
|
|
4794
5355
|
}
|
|
5356
|
+
},
|
|
5357
|
+
"org.primer.llm": {
|
|
5358
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5359
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4795
5360
|
}
|
|
4796
5361
|
},
|
|
4797
5362
|
"alpha": 0.4,
|
|
@@ -4800,6 +5365,7 @@
|
|
|
4800
5365
|
"original": {
|
|
4801
5366
|
"$value": "{base.color.pink.3}",
|
|
4802
5367
|
"$type": "color",
|
|
5368
|
+
"$description": "Subtle border for GitHub Sponsors content",
|
|
4803
5369
|
"$extensions": {
|
|
4804
5370
|
"org.primer.figma": {
|
|
4805
5371
|
"collection": "mode",
|
|
@@ -4860,6 +5426,10 @@
|
|
|
4860
5426
|
"isSource": true,
|
|
4861
5427
|
"$type": "color"
|
|
4862
5428
|
}
|
|
5429
|
+
},
|
|
5430
|
+
"org.primer.llm": {
|
|
5431
|
+
"usage": ["sponsors-muted", "funding-muted"],
|
|
5432
|
+
"rules": "Use for GitHub Sponsors related borders. Do NOT use for general pink-colored elements."
|
|
4863
5433
|
}
|
|
4864
5434
|
},
|
|
4865
5435
|
"alpha": 0.4,
|
|
@@ -4873,6 +5443,7 @@
|
|
|
4873
5443
|
"key": "{borderColor.success.emphasis}",
|
|
4874
5444
|
"$value": "#0969da",
|
|
4875
5445
|
"$type": "color",
|
|
5446
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4876
5447
|
"$extensions": {
|
|
4877
5448
|
"org.primer.figma": {
|
|
4878
5449
|
"collection": "mode",
|
|
@@ -4892,6 +5463,10 @@
|
|
|
4892
5463
|
"light-protanopia-deuteranopia": "#0969da",
|
|
4893
5464
|
"light-protanopia-deuteranopia-high-contrast": "#0969da",
|
|
4894
5465
|
"dark-dimmed-high-contrast": "#6fdd8b"
|
|
5466
|
+
},
|
|
5467
|
+
"org.primer.llm": {
|
|
5468
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5469
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4895
5470
|
}
|
|
4896
5471
|
},
|
|
4897
5472
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -4899,6 +5474,7 @@
|
|
|
4899
5474
|
"original": {
|
|
4900
5475
|
"$value": "{base.color.blue.5}",
|
|
4901
5476
|
"$type": "color",
|
|
5477
|
+
"$description": "Strong success border for prominent positive elements",
|
|
4902
5478
|
"$extensions": {
|
|
4903
5479
|
"org.primer.figma": {
|
|
4904
5480
|
"collection": "mode",
|
|
@@ -4918,6 +5494,10 @@
|
|
|
4918
5494
|
"light-protanopia-deuteranopia": "{base.color.blue.5}",
|
|
4919
5495
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}",
|
|
4920
5496
|
"dark-dimmed-high-contrast": "{base.color.green.2}"
|
|
5497
|
+
},
|
|
5498
|
+
"org.primer.llm": {
|
|
5499
|
+
"usage": ["success-emphasis", "confirmed", "positive-emphasis"],
|
|
5500
|
+
"rules": "Use for emphasized success borders. Pair with bgColor.success.emphasis."
|
|
4921
5501
|
}
|
|
4922
5502
|
},
|
|
4923
5503
|
"key": "{borderColor.success.emphasis}"
|
|
@@ -4930,6 +5510,7 @@
|
|
|
4930
5510
|
"key": "{borderColor.success.muted}",
|
|
4931
5511
|
"$value": "#ddf4ff",
|
|
4932
5512
|
"$type": "color",
|
|
5513
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
4933
5514
|
"$extensions": {
|
|
4934
5515
|
"org.primer.figma": {
|
|
4935
5516
|
"collection": "mode",
|
|
@@ -5017,6 +5598,10 @@
|
|
|
5017
5598
|
"isSource": true,
|
|
5018
5599
|
"$type": "color"
|
|
5019
5600
|
}
|
|
5601
|
+
},
|
|
5602
|
+
"org.primer.llm": {
|
|
5603
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5604
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5020
5605
|
}
|
|
5021
5606
|
},
|
|
5022
5607
|
"alpha": 1,
|
|
@@ -5025,6 +5610,7 @@
|
|
|
5025
5610
|
"original": {
|
|
5026
5611
|
"$value": "{base.color.blue.0}",
|
|
5027
5612
|
"$type": "color",
|
|
5613
|
+
"$description": "Subtle success border for positive feedback elements",
|
|
5028
5614
|
"$extensions": {
|
|
5029
5615
|
"org.primer.figma": {
|
|
5030
5616
|
"collection": "mode",
|
|
@@ -5112,6 +5698,10 @@
|
|
|
5112
5698
|
"isSource": true,
|
|
5113
5699
|
"$type": "color"
|
|
5114
5700
|
}
|
|
5701
|
+
},
|
|
5702
|
+
"org.primer.llm": {
|
|
5703
|
+
"usage": ["success-muted", "valid-muted", "positive-muted"],
|
|
5704
|
+
"rules": "Use for success state borders. Pair with bgColor.success.muted."
|
|
5115
5705
|
}
|
|
5116
5706
|
},
|
|
5117
5707
|
"alpha": 1,
|
|
@@ -5125,6 +5715,7 @@
|
|
|
5125
5715
|
"key": "{borderColor.translucent}",
|
|
5126
5716
|
"$value": "#1f232826",
|
|
5127
5717
|
"$type": "color",
|
|
5718
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5128
5719
|
"$extensions": {
|
|
5129
5720
|
"org.primer.figma": {
|
|
5130
5721
|
"collection": "mode",
|
|
@@ -5181,6 +5772,10 @@
|
|
|
5181
5772
|
"isSource": true,
|
|
5182
5773
|
"$type": "color"
|
|
5183
5774
|
}
|
|
5775
|
+
},
|
|
5776
|
+
"org.primer.llm": {
|
|
5777
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5778
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5184
5779
|
}
|
|
5185
5780
|
},
|
|
5186
5781
|
"alpha": 0.15,
|
|
@@ -5189,6 +5784,7 @@
|
|
|
5189
5784
|
"original": {
|
|
5190
5785
|
"$value": "{base.color.neutral.13}",
|
|
5191
5786
|
"$type": "color",
|
|
5787
|
+
"$description": "Semi-transparent border for overlays and layered elements",
|
|
5192
5788
|
"$extensions": {
|
|
5193
5789
|
"org.primer.figma": {
|
|
5194
5790
|
"collection": "mode",
|
|
@@ -5245,6 +5841,10 @@
|
|
|
5245
5841
|
"isSource": true,
|
|
5246
5842
|
"$type": "color"
|
|
5247
5843
|
}
|
|
5844
|
+
},
|
|
5845
|
+
"org.primer.llm": {
|
|
5846
|
+
"usage": ["overlay-border", "translucent-border"],
|
|
5847
|
+
"rules": "Use for semi-transparent borders on overlays. Works well with translucent backgrounds."
|
|
5248
5848
|
}
|
|
5249
5849
|
},
|
|
5250
5850
|
"alpha": 0.15,
|
|
@@ -5258,6 +5858,7 @@
|
|
|
5258
5858
|
"key": "{borderColor.transparent}",
|
|
5259
5859
|
"$value": "#ffffff00",
|
|
5260
5860
|
"$type": "color",
|
|
5861
|
+
"$description": "Fully transparent border",
|
|
5261
5862
|
"$extensions": {
|
|
5262
5863
|
"org.primer.figma": {
|
|
5263
5864
|
"collection": "mode",
|
|
@@ -5270,6 +5871,7 @@
|
|
|
5270
5871
|
"original": {
|
|
5271
5872
|
"$value": "{base.color.transparent}",
|
|
5272
5873
|
"$type": "color",
|
|
5874
|
+
"$description": "Fully transparent border",
|
|
5273
5875
|
"$extensions": {
|
|
5274
5876
|
"org.primer.figma": {
|
|
5275
5877
|
"collection": "mode",
|
|
@@ -5287,6 +5889,7 @@
|
|
|
5287
5889
|
"key": "{borderColor.upsell.emphasis}",
|
|
5288
5890
|
"$value": "#8250df",
|
|
5289
5891
|
"$type": "color",
|
|
5892
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5290
5893
|
"$extensions": {
|
|
5291
5894
|
"org.primer.figma": {
|
|
5292
5895
|
"collection": "mode",
|
|
@@ -5295,6 +5898,10 @@
|
|
|
5295
5898
|
"codeSyntax": {
|
|
5296
5899
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5297
5900
|
}
|
|
5901
|
+
},
|
|
5902
|
+
"org.primer.llm": {
|
|
5903
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5904
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5298
5905
|
}
|
|
5299
5906
|
},
|
|
5300
5907
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5302,6 +5909,7 @@
|
|
|
5302
5909
|
"original": {
|
|
5303
5910
|
"$value": "{borderColor.done.emphasis}",
|
|
5304
5911
|
"$type": "color",
|
|
5912
|
+
"$description": "Strong border for prominent upsell elements",
|
|
5305
5913
|
"$extensions": {
|
|
5306
5914
|
"org.primer.figma": {
|
|
5307
5915
|
"collection": "mode",
|
|
@@ -5310,6 +5918,10 @@
|
|
|
5310
5918
|
"codeSyntax": {
|
|
5311
5919
|
"web": "var(--borderColor-upsell-emphasis)"
|
|
5312
5920
|
}
|
|
5921
|
+
},
|
|
5922
|
+
"org.primer.llm": {
|
|
5923
|
+
"usage": ["upsell-emphasis", "premium-emphasis"],
|
|
5924
|
+
"rules": "Use for emphasized upsell borders. Pair with bgColor.upsell.emphasis."
|
|
5313
5925
|
}
|
|
5314
5926
|
},
|
|
5315
5927
|
"key": "{borderColor.upsell.emphasis}"
|
|
@@ -5322,6 +5934,7 @@
|
|
|
5322
5934
|
"key": "{borderColor.upsell.muted}",
|
|
5323
5935
|
"$value": "#c297ff66",
|
|
5324
5936
|
"$type": "color",
|
|
5937
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5325
5938
|
"$extensions": {
|
|
5326
5939
|
"org.primer.figma": {
|
|
5327
5940
|
"collection": "mode",
|
|
@@ -5330,6 +5943,10 @@
|
|
|
5330
5943
|
"codeSyntax": {
|
|
5331
5944
|
"web": "var(--borderColor-upsell-muted)"
|
|
5332
5945
|
}
|
|
5946
|
+
},
|
|
5947
|
+
"org.primer.llm": {
|
|
5948
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5949
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5333
5950
|
}
|
|
5334
5951
|
},
|
|
5335
5952
|
"filePath": "src/tokens/functional/color/borderColor.json5",
|
|
@@ -5337,6 +5954,7 @@
|
|
|
5337
5954
|
"original": {
|
|
5338
5955
|
"$value": "{borderColor.done.muted}",
|
|
5339
5956
|
"$type": "color",
|
|
5957
|
+
"$description": "Subtle border for upsell and promotional content",
|
|
5340
5958
|
"$extensions": {
|
|
5341
5959
|
"org.primer.figma": {
|
|
5342
5960
|
"collection": "mode",
|
|
@@ -5345,6 +5963,10 @@
|
|
|
5345
5963
|
"codeSyntax": {
|
|
5346
5964
|
"web": "var(--borderColor-upsell-muted)"
|
|
5347
5965
|
}
|
|
5966
|
+
},
|
|
5967
|
+
"org.primer.llm": {
|
|
5968
|
+
"usage": ["upsell-muted", "premium-muted"],
|
|
5969
|
+
"rules": "Use for upgrade prompts and premium feature borders. Do NOT use for regular content."
|
|
5348
5970
|
}
|
|
5349
5971
|
},
|
|
5350
5972
|
"key": "{borderColor.upsell.muted}"
|
|
@@ -36479,6 +37101,7 @@
|
|
|
36479
37101
|
"key": "{fgColor.accent}",
|
|
36480
37102
|
"$value": "#0969da",
|
|
36481
37103
|
"$type": "color",
|
|
37104
|
+
"$description": "Accent text for links and interactive elements",
|
|
36482
37105
|
"$extensions": {
|
|
36483
37106
|
"org.primer.figma": {
|
|
36484
37107
|
"collection": "mode",
|
|
@@ -36498,6 +37121,10 @@
|
|
|
36498
37121
|
"light-high-contrast": "#0550ae",
|
|
36499
37122
|
"light-tritanopia-high-contrast": "#0550ae",
|
|
36500
37123
|
"light-protanopia-deuteranopia-high-contrast": "#0550ae"
|
|
37124
|
+
},
|
|
37125
|
+
"org.primer.llm": {
|
|
37126
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37127
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36501
37128
|
}
|
|
36502
37129
|
},
|
|
36503
37130
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36505,6 +37132,7 @@
|
|
|
36505
37132
|
"original": {
|
|
36506
37133
|
"$value": "{base.color.blue.5}",
|
|
36507
37134
|
"$type": "color",
|
|
37135
|
+
"$description": "Accent text for links and interactive elements",
|
|
36508
37136
|
"$extensions": {
|
|
36509
37137
|
"org.primer.figma": {
|
|
36510
37138
|
"collection": "mode",
|
|
@@ -36524,6 +37152,10 @@
|
|
|
36524
37152
|
"light-high-contrast": "{base.color.blue.6}",
|
|
36525
37153
|
"light-tritanopia-high-contrast": "{base.color.blue.6}",
|
|
36526
37154
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}"
|
|
37155
|
+
},
|
|
37156
|
+
"org.primer.llm": {
|
|
37157
|
+
"usage": ["accent-text", "info-text", "accent-icon"],
|
|
37158
|
+
"rules": "Use for accent-colored text and icons. Pair with bgColor.accent.muted for backgrounds."
|
|
36527
37159
|
}
|
|
36528
37160
|
},
|
|
36529
37161
|
"key": "{fgColor.accent}"
|
|
@@ -36536,6 +37168,7 @@
|
|
|
36536
37168
|
"key": "{fgColor.attention}",
|
|
36537
37169
|
"$value": "#9a6700",
|
|
36538
37170
|
"$type": "color",
|
|
37171
|
+
"$description": "Attention text for warnings and caution states",
|
|
36539
37172
|
"$extensions": {
|
|
36540
37173
|
"org.primer.figma": {
|
|
36541
37174
|
"collection": "mode",
|
|
@@ -36551,6 +37184,10 @@
|
|
|
36551
37184
|
"light-protanopia-deuteranopia-high-contrast": "#7d4e00",
|
|
36552
37185
|
"light-tritanopia-high-contrast": "#7d4e00",
|
|
36553
37186
|
"dark-dimmed-high-contrast": "#fae17d"
|
|
37187
|
+
},
|
|
37188
|
+
"org.primer.llm": {
|
|
37189
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37190
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36554
37191
|
}
|
|
36555
37192
|
},
|
|
36556
37193
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36558,6 +37195,7 @@
|
|
|
36558
37195
|
"original": {
|
|
36559
37196
|
"$value": "{base.color.yellow.5}",
|
|
36560
37197
|
"$type": "color",
|
|
37198
|
+
"$description": "Attention text for warnings and caution states",
|
|
36561
37199
|
"$extensions": {
|
|
36562
37200
|
"org.primer.figma": {
|
|
36563
37201
|
"collection": "mode",
|
|
@@ -36573,6 +37211,10 @@
|
|
|
36573
37211
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.yellow.6}",
|
|
36574
37212
|
"light-tritanopia-high-contrast": "{base.color.yellow.6}",
|
|
36575
37213
|
"dark-dimmed-high-contrast": "{base.color.yellow.1}"
|
|
37214
|
+
},
|
|
37215
|
+
"org.primer.llm": {
|
|
37216
|
+
"usage": ["attention-text", "warning-text", "caution-text"],
|
|
37217
|
+
"rules": "Use for warning and caution text. Pair with bgColor.attention.muted for backgrounds."
|
|
36576
37218
|
}
|
|
36577
37219
|
},
|
|
36578
37220
|
"key": "{fgColor.attention}"
|
|
@@ -36585,6 +37227,7 @@
|
|
|
36585
37227
|
"key": "{fgColor.black}",
|
|
36586
37228
|
"$value": "#1f2328",
|
|
36587
37229
|
"$type": "color",
|
|
37230
|
+
"$description": "Pure black text",
|
|
36588
37231
|
"$extensions": {
|
|
36589
37232
|
"org.primer.figma": {
|
|
36590
37233
|
"collection": "mode",
|
|
@@ -36593,6 +37236,10 @@
|
|
|
36593
37236
|
},
|
|
36594
37237
|
"org.primer.overrides": {
|
|
36595
37238
|
"dark": "#ffffff"
|
|
37239
|
+
},
|
|
37240
|
+
"org.primer.llm": {
|
|
37241
|
+
"doNotUse": true,
|
|
37242
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36596
37243
|
}
|
|
36597
37244
|
},
|
|
36598
37245
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36600,6 +37247,7 @@
|
|
|
36600
37247
|
"original": {
|
|
36601
37248
|
"$value": "{base.color.neutral.13}",
|
|
36602
37249
|
"$type": "color",
|
|
37250
|
+
"$description": "Pure black text",
|
|
36603
37251
|
"$extensions": {
|
|
36604
37252
|
"org.primer.figma": {
|
|
36605
37253
|
"collection": "mode",
|
|
@@ -36608,6 +37256,10 @@
|
|
|
36608
37256
|
},
|
|
36609
37257
|
"org.primer.overrides": {
|
|
36610
37258
|
"dark": "{base.color.neutral.0}"
|
|
37259
|
+
},
|
|
37260
|
+
"org.primer.llm": {
|
|
37261
|
+
"doNotUse": true,
|
|
37262
|
+
"rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
|
|
36611
37263
|
}
|
|
36612
37264
|
},
|
|
36613
37265
|
"key": "{fgColor.black}"
|
|
@@ -36620,6 +37272,7 @@
|
|
|
36620
37272
|
"key": "{fgColor.closed}",
|
|
36621
37273
|
"$value": "#59636e",
|
|
36622
37274
|
"$type": "color",
|
|
37275
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36623
37276
|
"$extensions": {
|
|
36624
37277
|
"org.primer.figma": {
|
|
36625
37278
|
"collection": "mode",
|
|
@@ -36638,6 +37291,10 @@
|
|
|
36638
37291
|
"dark-tritanopia-high-contrast": "#59636e",
|
|
36639
37292
|
"light-tritanopia": "#59636e",
|
|
36640
37293
|
"light-tritanopia-high-contrast": "#59636e"
|
|
37294
|
+
},
|
|
37295
|
+
"org.primer.llm": {
|
|
37296
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37297
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36641
37298
|
}
|
|
36642
37299
|
},
|
|
36643
37300
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36645,6 +37302,7 @@
|
|
|
36645
37302
|
"original": {
|
|
36646
37303
|
"$value": "{fgColor.muted}",
|
|
36647
37304
|
"$type": "color",
|
|
37305
|
+
"$description": "Text color for closed state indicators (issues, PRs)",
|
|
36648
37306
|
"$extensions": {
|
|
36649
37307
|
"org.primer.figma": {
|
|
36650
37308
|
"collection": "mode",
|
|
@@ -36663,6 +37321,10 @@
|
|
|
36663
37321
|
"dark-tritanopia-high-contrast": "{fgColor.muted}",
|
|
36664
37322
|
"light-tritanopia": "{fgColor.muted}",
|
|
36665
37323
|
"light-tritanopia-high-contrast": "{fgColor.muted}"
|
|
37324
|
+
},
|
|
37325
|
+
"org.primer.llm": {
|
|
37326
|
+
"usage": ["closed-text", "closed-issue", "closed-pr"],
|
|
37327
|
+
"rules": "Use for closed/declined status text. Specifically for GitHub issues and PRs."
|
|
36666
37328
|
}
|
|
36667
37329
|
},
|
|
36668
37330
|
"key": "{fgColor.closed}"
|
|
@@ -36675,6 +37337,7 @@
|
|
|
36675
37337
|
"key": "{fgColor.danger}",
|
|
36676
37338
|
"$value": "#bc4c00",
|
|
36677
37339
|
"$type": "color",
|
|
37340
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36678
37341
|
"$extensions": {
|
|
36679
37342
|
"org.primer.figma": {
|
|
36680
37343
|
"collection": "mode",
|
|
@@ -36695,6 +37358,10 @@
|
|
|
36695
37358
|
"dark-tritanopia-high-contrast": "#ff8182",
|
|
36696
37359
|
"light-high-contrast": "#a40e26",
|
|
36697
37360
|
"light-tritanopia-high-contrast": "#a40e26"
|
|
37361
|
+
},
|
|
37362
|
+
"org.primer.llm": {
|
|
37363
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37364
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36698
37365
|
}
|
|
36699
37366
|
},
|
|
36700
37367
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36702,6 +37369,7 @@
|
|
|
36702
37369
|
"original": {
|
|
36703
37370
|
"$value": "{base.color.orange.5}",
|
|
36704
37371
|
"$type": "color",
|
|
37372
|
+
"$description": "Danger text for errors and destructive actions",
|
|
36705
37373
|
"$extensions": {
|
|
36706
37374
|
"org.primer.figma": {
|
|
36707
37375
|
"collection": "mode",
|
|
@@ -36722,6 +37390,10 @@
|
|
|
36722
37390
|
"dark-tritanopia-high-contrast": "{base.color.red.3}",
|
|
36723
37391
|
"light-high-contrast": "{base.color.red.6}",
|
|
36724
37392
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37393
|
+
},
|
|
37394
|
+
"org.primer.llm": {
|
|
37395
|
+
"usage": ["danger-text", "error-text", "destructive-text"],
|
|
37396
|
+
"rules": "Use for error messages and destructive action text. Pair with bgColor.danger.muted for backgrounds."
|
|
36725
37397
|
}
|
|
36726
37398
|
},
|
|
36727
37399
|
"key": "{fgColor.danger}"
|
|
@@ -36734,6 +37406,7 @@
|
|
|
36734
37406
|
"key": "{fgColor.default}",
|
|
36735
37407
|
"$value": "#1f2328",
|
|
36736
37408
|
"$type": "color",
|
|
37409
|
+
"$description": "Default text color for primary content and headings",
|
|
36737
37410
|
"$extensions": {
|
|
36738
37411
|
"org.primer.figma": {
|
|
36739
37412
|
"collection": "mode",
|
|
@@ -36748,8 +37421,12 @@
|
|
|
36748
37421
|
"dark-high-contrast": "#1f2328",
|
|
36749
37422
|
"dark-tritanopia-high-contrast": "#1f2328",
|
|
36750
37423
|
"dark-protanopia-deuteranopia-high-contrast": "#1f2328",
|
|
36751
|
-
"dark-dimmed": "#
|
|
37424
|
+
"dark-dimmed": "#25292e",
|
|
36752
37425
|
"dark-dimmed-high-contrast": "#25292e"
|
|
37426
|
+
},
|
|
37427
|
+
"org.primer.llm": {
|
|
37428
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37429
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36753
37430
|
}
|
|
36754
37431
|
},
|
|
36755
37432
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36757,6 +37434,7 @@
|
|
|
36757
37434
|
"original": {
|
|
36758
37435
|
"$value": "{base.color.neutral.13}",
|
|
36759
37436
|
"$type": "color",
|
|
37437
|
+
"$description": "Default text color for primary content and headings",
|
|
36760
37438
|
"$extensions": {
|
|
36761
37439
|
"org.primer.figma": {
|
|
36762
37440
|
"collection": "mode",
|
|
@@ -36771,8 +37449,12 @@
|
|
|
36771
37449
|
"dark-high-contrast": "{base.color.neutral.13}",
|
|
36772
37450
|
"dark-tritanopia-high-contrast": "{base.color.neutral.13}",
|
|
36773
37451
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.13}",
|
|
36774
|
-
"dark-dimmed": "{base.color.neutral.
|
|
37452
|
+
"dark-dimmed": "{base.color.neutral.12}",
|
|
36775
37453
|
"dark-dimmed-high-contrast": "{base.color.neutral.12}"
|
|
37454
|
+
},
|
|
37455
|
+
"org.primer.llm": {
|
|
37456
|
+
"usage": ["default-text", "heading", "body-text"],
|
|
37457
|
+
"rules": "RECOMMENDED default for all text. Use for headings, body text, and primary labels."
|
|
36776
37458
|
}
|
|
36777
37459
|
},
|
|
36778
37460
|
"key": "{fgColor.default}"
|
|
@@ -36785,6 +37467,7 @@
|
|
|
36785
37467
|
"key": "{fgColor.disabled}",
|
|
36786
37468
|
"$value": "#818b98",
|
|
36787
37469
|
"$type": "color",
|
|
37470
|
+
"$description": "Text color for disabled interactive elements",
|
|
36788
37471
|
"$extensions": {
|
|
36789
37472
|
"org.primer.figma": {
|
|
36790
37473
|
"collection": "mode",
|
|
@@ -36806,6 +37489,10 @@
|
|
|
36806
37489
|
"dark-high-contrast": "#818b98",
|
|
36807
37490
|
"dark-tritanopia-high-contrast": "#818b98",
|
|
36808
37491
|
"dark-protanopia-deuteranopia-high-contrast": "#818b98"
|
|
37492
|
+
},
|
|
37493
|
+
"org.primer.llm": {
|
|
37494
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37495
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36809
37496
|
}
|
|
36810
37497
|
},
|
|
36811
37498
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36813,6 +37500,7 @@
|
|
|
36813
37500
|
"original": {
|
|
36814
37501
|
"$value": "{base.color.neutral.8}",
|
|
36815
37502
|
"$type": "color",
|
|
37503
|
+
"$description": "Text color for disabled interactive elements",
|
|
36816
37504
|
"$extensions": {
|
|
36817
37505
|
"org.primer.figma": {
|
|
36818
37506
|
"collection": "mode",
|
|
@@ -36834,6 +37522,10 @@
|
|
|
36834
37522
|
"dark-high-contrast": "{base.color.neutral.8}",
|
|
36835
37523
|
"dark-tritanopia-high-contrast": "{base.color.neutral.8}",
|
|
36836
37524
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.8}"
|
|
37525
|
+
},
|
|
37526
|
+
"org.primer.llm": {
|
|
37527
|
+
"usage": ["disabled-text", "inactive-text", "unavailable"],
|
|
37528
|
+
"rules": "MUST use for disabled state text. Pair with bgColor.disabled. Do NOT use for active elements."
|
|
36837
37529
|
}
|
|
36838
37530
|
},
|
|
36839
37531
|
"key": "{fgColor.disabled}"
|
|
@@ -36846,6 +37538,7 @@
|
|
|
36846
37538
|
"key": "{fgColor.done}",
|
|
36847
37539
|
"$value": "#8250df",
|
|
36848
37540
|
"$type": "color",
|
|
37541
|
+
"$description": "Text color for completed/done state indicators",
|
|
36849
37542
|
"$extensions": {
|
|
36850
37543
|
"org.primer.figma": {
|
|
36851
37544
|
"collection": "mode",
|
|
@@ -36864,6 +37557,10 @@
|
|
|
36864
37557
|
"light-high-contrast": "#6639ba",
|
|
36865
37558
|
"light-protanopia-deuteranopia-high-contrast": "#6639ba",
|
|
36866
37559
|
"light-tritanopia-high-contrast": "#6639ba"
|
|
37560
|
+
},
|
|
37561
|
+
"org.primer.llm": {
|
|
37562
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37563
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36867
37564
|
}
|
|
36868
37565
|
},
|
|
36869
37566
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36871,6 +37568,7 @@
|
|
|
36871
37568
|
"original": {
|
|
36872
37569
|
"$value": "{base.color.purple.5}",
|
|
36873
37570
|
"$type": "color",
|
|
37571
|
+
"$description": "Text color for completed/done state indicators",
|
|
36874
37572
|
"$extensions": {
|
|
36875
37573
|
"org.primer.figma": {
|
|
36876
37574
|
"collection": "mode",
|
|
@@ -36889,6 +37587,10 @@
|
|
|
36889
37587
|
"light-high-contrast": "{base.color.purple.6}",
|
|
36890
37588
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.purple.6}",
|
|
36891
37589
|
"light-tritanopia-high-contrast": "{base.color.purple.6}"
|
|
37590
|
+
},
|
|
37591
|
+
"org.primer.llm": {
|
|
37592
|
+
"usage": ["done-text", "merged", "completed"],
|
|
37593
|
+
"rules": "Use for completed/done status text. Conveys finished or merged state."
|
|
36892
37594
|
}
|
|
36893
37595
|
},
|
|
36894
37596
|
"key": "{fgColor.done}"
|
|
@@ -36901,6 +37603,7 @@
|
|
|
36901
37603
|
"key": "{fgColor.draft}",
|
|
36902
37604
|
"$value": "#59636e",
|
|
36903
37605
|
"$type": "color",
|
|
37606
|
+
"$description": "Text color for draft state indicators",
|
|
36904
37607
|
"$extensions": {
|
|
36905
37608
|
"org.primer.figma": {
|
|
36906
37609
|
"collection": "mode",
|
|
@@ -36909,6 +37612,10 @@
|
|
|
36909
37612
|
"codeSyntax": {
|
|
36910
37613
|
"web": "var(--fgColor-draft)"
|
|
36911
37614
|
}
|
|
37615
|
+
},
|
|
37616
|
+
"org.primer.llm": {
|
|
37617
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37618
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36912
37619
|
}
|
|
36913
37620
|
},
|
|
36914
37621
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36916,6 +37623,7 @@
|
|
|
36916
37623
|
"original": {
|
|
36917
37624
|
"$value": "{fgColor.neutral}",
|
|
36918
37625
|
"$type": "color",
|
|
37626
|
+
"$description": "Text color for draft state indicators",
|
|
36919
37627
|
"$extensions": {
|
|
36920
37628
|
"org.primer.figma": {
|
|
36921
37629
|
"collection": "mode",
|
|
@@ -36924,6 +37632,10 @@
|
|
|
36924
37632
|
"codeSyntax": {
|
|
36925
37633
|
"web": "var(--fgColor-draft)"
|
|
36926
37634
|
}
|
|
37635
|
+
},
|
|
37636
|
+
"org.primer.llm": {
|
|
37637
|
+
"usage": ["draft-text", "draft-pr", "draft-issue"],
|
|
37638
|
+
"rules": "Use for draft/WIP status text. Conveys incomplete or pending state."
|
|
36927
37639
|
}
|
|
36928
37640
|
},
|
|
36929
37641
|
"key": "{fgColor.draft}"
|
|
@@ -36936,6 +37648,7 @@
|
|
|
36936
37648
|
"key": "{fgColor.link}",
|
|
36937
37649
|
"$value": "#0969da",
|
|
36938
37650
|
"$type": "color",
|
|
37651
|
+
"$description": "Text color for hyperlinks",
|
|
36939
37652
|
"$extensions": {
|
|
36940
37653
|
"org.primer.figma": {
|
|
36941
37654
|
"collection": "mode",
|
|
@@ -36944,6 +37657,10 @@
|
|
|
36944
37657
|
"codeSyntax": {
|
|
36945
37658
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36946
37659
|
}
|
|
37660
|
+
},
|
|
37661
|
+
"org.primer.llm": {
|
|
37662
|
+
"usage": ["link-text", "hyperlink"],
|
|
37663
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36947
37664
|
}
|
|
36948
37665
|
},
|
|
36949
37666
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36951,6 +37668,7 @@
|
|
|
36951
37668
|
"original": {
|
|
36952
37669
|
"$value": "{fgColor.accent}",
|
|
36953
37670
|
"$type": "color",
|
|
37671
|
+
"$description": "Text color for hyperlinks",
|
|
36954
37672
|
"$extensions": {
|
|
36955
37673
|
"org.primer.figma": {
|
|
36956
37674
|
"collection": "mode",
|
|
@@ -36959,6 +37677,10 @@
|
|
|
36959
37677
|
"codeSyntax": {
|
|
36960
37678
|
"web": "var(--fgColor-link) /* utility class: .color-fg-accent */"
|
|
36961
37679
|
}
|
|
37680
|
+
},
|
|
37681
|
+
"org.primer.llm": {
|
|
37682
|
+
"usage": ["link-text", "hyperlink"],
|
|
37683
|
+
"rules": "MUST use for all text links. Provides expected link affordance."
|
|
36962
37684
|
}
|
|
36963
37685
|
},
|
|
36964
37686
|
"key": "{fgColor.link}"
|
|
@@ -36971,6 +37693,7 @@
|
|
|
36971
37693
|
"key": "{fgColor.muted}",
|
|
36972
37694
|
"$value": "#59636e",
|
|
36973
37695
|
"$type": "color",
|
|
37696
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36974
37697
|
"$extensions": {
|
|
36975
37698
|
"org.primer.figma": {
|
|
36976
37699
|
"collection": "mode",
|
|
@@ -36988,6 +37711,10 @@
|
|
|
36988
37711
|
"dark-dimmed-high-contrast": "#454c54",
|
|
36989
37712
|
"dark-tritanopia-high-contrast": "#454c54",
|
|
36990
37713
|
"dark-protanopia-deuteranopia-high-contrast": "#454c54"
|
|
37714
|
+
},
|
|
37715
|
+
"org.primer.llm": {
|
|
37716
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37717
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
36991
37718
|
}
|
|
36992
37719
|
},
|
|
36993
37720
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -36995,6 +37722,7 @@
|
|
|
36995
37722
|
"original": {
|
|
36996
37723
|
"$value": "{base.color.neutral.9}",
|
|
36997
37724
|
"$type": "color",
|
|
37725
|
+
"$description": "Muted text for secondary content and less important information",
|
|
36998
37726
|
"$extensions": {
|
|
36999
37727
|
"org.primer.figma": {
|
|
37000
37728
|
"collection": "mode",
|
|
@@ -37012,6 +37740,10 @@
|
|
|
37012
37740
|
"dark-dimmed-high-contrast": "{base.color.neutral.10}",
|
|
37013
37741
|
"dark-tritanopia-high-contrast": "{base.color.neutral.10}",
|
|
37014
37742
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}"
|
|
37743
|
+
},
|
|
37744
|
+
"org.primer.llm": {
|
|
37745
|
+
"usage": ["muted-text", "secondary-text", "helper-text", "placeholder"],
|
|
37746
|
+
"rules": "Use for secondary text like timestamps, metadata, and helper text. Do NOT use for primary content."
|
|
37015
37747
|
}
|
|
37016
37748
|
},
|
|
37017
37749
|
"key": "{fgColor.muted}"
|
|
@@ -37024,6 +37756,7 @@
|
|
|
37024
37756
|
"key": "{fgColor.neutral}",
|
|
37025
37757
|
"$value": "#59636e",
|
|
37026
37758
|
"$type": "color",
|
|
37759
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37027
37760
|
"$extensions": {
|
|
37028
37761
|
"org.primer.figma": {
|
|
37029
37762
|
"collection": "mode",
|
|
@@ -37038,6 +37771,10 @@
|
|
|
37038
37771
|
"dark-dimmed-high-contrast": "#393f46",
|
|
37039
37772
|
"dark-tritanopia-high-contrast": "#393f46",
|
|
37040
37773
|
"dark-protanopia-deuteranopia-high-contrast": "#393f46"
|
|
37774
|
+
},
|
|
37775
|
+
"org.primer.llm": {
|
|
37776
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37777
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37041
37778
|
}
|
|
37042
37779
|
},
|
|
37043
37780
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37045,6 +37782,7 @@
|
|
|
37045
37782
|
"original": {
|
|
37046
37783
|
"$value": "{base.color.neutral.9}",
|
|
37047
37784
|
"$type": "color",
|
|
37785
|
+
"$description": "Neutral semantic text for icons and secondary elements",
|
|
37048
37786
|
"$extensions": {
|
|
37049
37787
|
"org.primer.figma": {
|
|
37050
37788
|
"collection": "mode",
|
|
@@ -37059,6 +37797,10 @@
|
|
|
37059
37797
|
"dark-dimmed-high-contrast": "{base.color.neutral.11}",
|
|
37060
37798
|
"dark-tritanopia-high-contrast": "{base.color.neutral.11}",
|
|
37061
37799
|
"dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.11}"
|
|
37800
|
+
},
|
|
37801
|
+
"org.primer.llm": {
|
|
37802
|
+
"usage": ["neutral-icon", "neutral-text"],
|
|
37803
|
+
"rules": "Use for neutral semantic elements. Prefer fgColor.muted for secondary text."
|
|
37062
37804
|
}
|
|
37063
37805
|
},
|
|
37064
37806
|
"key": "{fgColor.neutral}"
|
|
@@ -37071,6 +37813,7 @@
|
|
|
37071
37813
|
"key": "{fgColor.onEmphasis}",
|
|
37072
37814
|
"$value": "#ffffff",
|
|
37073
37815
|
"$type": "color",
|
|
37816
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37074
37817
|
"$extensions": {
|
|
37075
37818
|
"org.primer.figma": {
|
|
37076
37819
|
"collection": "mode",
|
|
@@ -37084,6 +37827,10 @@
|
|
|
37084
37827
|
"dark": "#1f2328",
|
|
37085
37828
|
"dark-dimmed": "#25292e",
|
|
37086
37829
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37830
|
+
},
|
|
37831
|
+
"org.primer.llm": {
|
|
37832
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37833
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37087
37834
|
}
|
|
37088
37835
|
},
|
|
37089
37836
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37091,6 +37838,7 @@
|
|
|
37091
37838
|
"original": {
|
|
37092
37839
|
"$value": "{base.color.neutral.0}",
|
|
37093
37840
|
"$type": "color",
|
|
37841
|
+
"$description": "Text color for use on emphasis backgrounds",
|
|
37094
37842
|
"$extensions": {
|
|
37095
37843
|
"org.primer.figma": {
|
|
37096
37844
|
"collection": "mode",
|
|
@@ -37104,6 +37852,10 @@
|
|
|
37104
37852
|
"dark": "{base.color.neutral.13}",
|
|
37105
37853
|
"dark-dimmed": "{base.color.neutral.12}",
|
|
37106
37854
|
"dark-dimmed-high-contrast": "#ffffff"
|
|
37855
|
+
},
|
|
37856
|
+
"org.primer.llm": {
|
|
37857
|
+
"usage": ["text-on-emphasis", "contrast-text"],
|
|
37858
|
+
"rules": "MUST use for text on any emphasis background (bgColor.*.emphasis). Ensures accessibility contrast."
|
|
37107
37859
|
}
|
|
37108
37860
|
},
|
|
37109
37861
|
"key": "{fgColor.onEmphasis}"
|
|
@@ -37116,11 +37868,16 @@
|
|
|
37116
37868
|
"key": "{fgColor.onInverse}",
|
|
37117
37869
|
"$value": "#ffffff",
|
|
37118
37870
|
"$type": "color",
|
|
37871
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37119
37872
|
"$extensions": {
|
|
37120
37873
|
"org.primer.figma": {
|
|
37121
37874
|
"collection": "mode",
|
|
37122
37875
|
"group": "semantic",
|
|
37123
37876
|
"scopes": ["fgColor"]
|
|
37877
|
+
},
|
|
37878
|
+
"org.primer.llm": {
|
|
37879
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37880
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37124
37881
|
}
|
|
37125
37882
|
},
|
|
37126
37883
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37128,11 +37885,16 @@
|
|
|
37128
37885
|
"original": {
|
|
37129
37886
|
"$value": "{base.color.neutral.0}",
|
|
37130
37887
|
"$type": "color",
|
|
37888
|
+
"$description": "Text color for use on inverse backgrounds",
|
|
37131
37889
|
"$extensions": {
|
|
37132
37890
|
"org.primer.figma": {
|
|
37133
37891
|
"collection": "mode",
|
|
37134
37892
|
"group": "semantic",
|
|
37135
37893
|
"scopes": ["fgColor"]
|
|
37894
|
+
},
|
|
37895
|
+
"org.primer.llm": {
|
|
37896
|
+
"usage": ["text-on-inverse", "inverse-text"],
|
|
37897
|
+
"rules": "Use for text on bgColor.inverse. Provides appropriate contrast in both themes."
|
|
37136
37898
|
}
|
|
37137
37899
|
},
|
|
37138
37900
|
"key": "{fgColor.onInverse}"
|
|
@@ -37145,6 +37907,7 @@
|
|
|
37145
37907
|
"key": "{fgColor.open}",
|
|
37146
37908
|
"$value": "#bc4c00",
|
|
37147
37909
|
"$type": "color",
|
|
37910
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37148
37911
|
"$extensions": {
|
|
37149
37912
|
"org.primer.figma": {
|
|
37150
37913
|
"collection": "mode",
|
|
@@ -37163,6 +37926,10 @@
|
|
|
37163
37926
|
"dark-tritanopia-high-contrast": "#ffaba8",
|
|
37164
37927
|
"light-tritanopia": "#cf222e",
|
|
37165
37928
|
"light-tritanopia-high-contrast": "#a40e26"
|
|
37929
|
+
},
|
|
37930
|
+
"org.primer.llm": {
|
|
37931
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37932
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37166
37933
|
}
|
|
37167
37934
|
},
|
|
37168
37935
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37170,6 +37937,7 @@
|
|
|
37170
37937
|
"original": {
|
|
37171
37938
|
"$value": "{base.color.orange.5}",
|
|
37172
37939
|
"$type": "color",
|
|
37940
|
+
"$description": "Text color for open state indicators (issues, PRs)",
|
|
37173
37941
|
"$extensions": {
|
|
37174
37942
|
"org.primer.figma": {
|
|
37175
37943
|
"collection": "mode",
|
|
@@ -37188,6 +37956,10 @@
|
|
|
37188
37956
|
"dark-tritanopia-high-contrast": "{base.color.red.2}",
|
|
37189
37957
|
"light-tritanopia": "{base.color.red.5}",
|
|
37190
37958
|
"light-tritanopia-high-contrast": "{base.color.red.6}"
|
|
37959
|
+
},
|
|
37960
|
+
"org.primer.llm": {
|
|
37961
|
+
"usage": ["open-text", "open-issue", "open-pr"],
|
|
37962
|
+
"rules": "Use for open/active status text. Specifically for GitHub issues and PRs."
|
|
37191
37963
|
}
|
|
37192
37964
|
},
|
|
37193
37965
|
"key": "{fgColor.open}"
|
|
@@ -37200,6 +37972,7 @@
|
|
|
37200
37972
|
"key": "{fgColor.severe}",
|
|
37201
37973
|
"$value": "#bc4c00",
|
|
37202
37974
|
"$type": "color",
|
|
37975
|
+
"$description": "Severe text for high-priority warnings",
|
|
37203
37976
|
"$extensions": {
|
|
37204
37977
|
"org.primer.figma": {
|
|
37205
37978
|
"collection": "mode",
|
|
@@ -37220,6 +37993,10 @@
|
|
|
37220
37993
|
"light-tritanopia": "#cf222e",
|
|
37221
37994
|
"light-tritanopia-high-contrast": "#a40e26",
|
|
37222
37995
|
"light-protanopia-deuteranopia-high-contrast": "#953800"
|
|
37996
|
+
},
|
|
37997
|
+
"org.primer.llm": {
|
|
37998
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
37999
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37223
38000
|
}
|
|
37224
38001
|
},
|
|
37225
38002
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37227,6 +38004,7 @@
|
|
|
37227
38004
|
"original": {
|
|
37228
38005
|
"$value": "{base.color.orange.5}",
|
|
37229
38006
|
"$type": "color",
|
|
38007
|
+
"$description": "Severe text for high-priority warnings",
|
|
37230
38008
|
"$extensions": {
|
|
37231
38009
|
"org.primer.figma": {
|
|
37232
38010
|
"collection": "mode",
|
|
@@ -37247,6 +38025,10 @@
|
|
|
37247
38025
|
"light-tritanopia": "{base.color.red.5}",
|
|
37248
38026
|
"light-tritanopia-high-contrast": "{base.color.red.6}",
|
|
37249
38027
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}"
|
|
38028
|
+
},
|
|
38029
|
+
"org.primer.llm": {
|
|
38030
|
+
"usage": ["severe-text", "urgent-text", "severe-icon"],
|
|
38031
|
+
"rules": "Use for severe warnings, less critical than danger. Pair with bgColor.severe.muted for backgrounds."
|
|
37250
38032
|
}
|
|
37251
38033
|
},
|
|
37252
38034
|
"key": "{fgColor.severe}"
|
|
@@ -37259,6 +38041,7 @@
|
|
|
37259
38041
|
"key": "{fgColor.sponsors}",
|
|
37260
38042
|
"$value": "#bf3989",
|
|
37261
38043
|
"$type": "color",
|
|
38044
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37262
38045
|
"$extensions": {
|
|
37263
38046
|
"org.primer.figma": {
|
|
37264
38047
|
"collection": "mode",
|
|
@@ -37277,6 +38060,10 @@
|
|
|
37277
38060
|
"light-high-contrast": "#99286e",
|
|
37278
38061
|
"light-protanopia-deuteranopia-high-contrast": "#99286e",
|
|
37279
38062
|
"light-tritanopia-high-contrast": "#99286e"
|
|
38063
|
+
},
|
|
38064
|
+
"org.primer.llm": {
|
|
38065
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38066
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37280
38067
|
}
|
|
37281
38068
|
},
|
|
37282
38069
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37284,6 +38071,7 @@
|
|
|
37284
38071
|
"original": {
|
|
37285
38072
|
"$value": "{base.color.pink.5}",
|
|
37286
38073
|
"$type": "color",
|
|
38074
|
+
"$description": "Text color for GitHub Sponsors content",
|
|
37287
38075
|
"$extensions": {
|
|
37288
38076
|
"org.primer.figma": {
|
|
37289
38077
|
"collection": "mode",
|
|
@@ -37302,6 +38090,10 @@
|
|
|
37302
38090
|
"light-high-contrast": "{base.color.pink.6}",
|
|
37303
38091
|
"light-protanopia-deuteranopia-high-contrast": "{base.color.pink.6}",
|
|
37304
38092
|
"light-tritanopia-high-contrast": "{base.color.pink.6}"
|
|
38093
|
+
},
|
|
38094
|
+
"org.primer.llm": {
|
|
38095
|
+
"usage": ["sponsors-text", "funding-text", "sponsors-icon"],
|
|
38096
|
+
"rules": "Use for GitHub Sponsors related text. Do NOT use for general pink-colored text."
|
|
37305
38097
|
}
|
|
37306
38098
|
},
|
|
37307
38099
|
"key": "{fgColor.sponsors}"
|
|
@@ -37314,6 +38106,7 @@
|
|
|
37314
38106
|
"key": "{fgColor.success}",
|
|
37315
38107
|
"$value": "#0969da",
|
|
37316
38108
|
"$type": "color",
|
|
38109
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37317
38110
|
"$extensions": {
|
|
37318
38111
|
"org.primer.figma": {
|
|
37319
38112
|
"collection": "mode",
|
|
@@ -37336,6 +38129,10 @@
|
|
|
37336
38129
|
"dark-tritanopia-high-contrast": "#80ccff",
|
|
37337
38130
|
"light-tritanopia": "#0969da",
|
|
37338
38131
|
"light-tritanopia-high-contrast": "#0550ae"
|
|
38132
|
+
},
|
|
38133
|
+
"org.primer.llm": {
|
|
38134
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38135
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37339
38136
|
}
|
|
37340
38137
|
},
|
|
37341
38138
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37343,6 +38140,7 @@
|
|
|
37343
38140
|
"original": {
|
|
37344
38141
|
"$value": "{base.color.blue.5}",
|
|
37345
38142
|
"$type": "color",
|
|
38143
|
+
"$description": "Success text for positive feedback and completed states",
|
|
37346
38144
|
"$extensions": {
|
|
37347
38145
|
"org.primer.figma": {
|
|
37348
38146
|
"collection": "mode",
|
|
@@ -37365,6 +38163,10 @@
|
|
|
37365
38163
|
"dark-tritanopia-high-contrast": "{base.color.blue.2}",
|
|
37366
38164
|
"light-tritanopia": "{base.color.blue.5}",
|
|
37367
38165
|
"light-tritanopia-high-contrast": "{base.color.blue.6}"
|
|
38166
|
+
},
|
|
38167
|
+
"org.primer.llm": {
|
|
38168
|
+
"usage": ["success-text", "positive-text", "success-icon"],
|
|
38169
|
+
"rules": "Use for success states and positive feedback text. Pair with bgColor.success.muted for backgrounds."
|
|
37368
38170
|
}
|
|
37369
38171
|
},
|
|
37370
38172
|
"key": "{fgColor.success}"
|
|
@@ -37377,6 +38179,7 @@
|
|
|
37377
38179
|
"key": "{fgColor.upsell}",
|
|
37378
38180
|
"$value": "#8250df",
|
|
37379
38181
|
"$type": "color",
|
|
38182
|
+
"$description": "Text color for upsell and promotional content",
|
|
37380
38183
|
"$extensions": {
|
|
37381
38184
|
"org.primer.figma": {
|
|
37382
38185
|
"collection": "mode",
|
|
@@ -37385,6 +38188,10 @@
|
|
|
37385
38188
|
"codeSyntax": {
|
|
37386
38189
|
"web": "var(--fgColor-upsell)"
|
|
37387
38190
|
}
|
|
38191
|
+
},
|
|
38192
|
+
"org.primer.llm": {
|
|
38193
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38194
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37388
38195
|
}
|
|
37389
38196
|
},
|
|
37390
38197
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37392,6 +38199,7 @@
|
|
|
37392
38199
|
"original": {
|
|
37393
38200
|
"$value": "{fgColor.done}",
|
|
37394
38201
|
"$type": "color",
|
|
38202
|
+
"$description": "Text color for upsell and promotional content",
|
|
37395
38203
|
"$extensions": {
|
|
37396
38204
|
"org.primer.figma": {
|
|
37397
38205
|
"collection": "mode",
|
|
@@ -37400,6 +38208,10 @@
|
|
|
37400
38208
|
"codeSyntax": {
|
|
37401
38209
|
"web": "var(--fgColor-upsell)"
|
|
37402
38210
|
}
|
|
38211
|
+
},
|
|
38212
|
+
"org.primer.llm": {
|
|
38213
|
+
"usage": ["upsell-text", "premium-text", "promotional"],
|
|
38214
|
+
"rules": "Use for upgrade prompts and premium feature text. Do NOT use for regular content."
|
|
37403
38215
|
}
|
|
37404
38216
|
},
|
|
37405
38217
|
"key": "{fgColor.upsell}"
|
|
@@ -37412,6 +38224,7 @@
|
|
|
37412
38224
|
"key": "{fgColor.white}",
|
|
37413
38225
|
"$value": "#ffffff",
|
|
37414
38226
|
"$type": "color",
|
|
38227
|
+
"$description": "Pure white text",
|
|
37415
38228
|
"$extensions": {
|
|
37416
38229
|
"org.primer.figma": {
|
|
37417
38230
|
"collection": "mode",
|
|
@@ -37420,6 +38233,10 @@
|
|
|
37420
38233
|
},
|
|
37421
38234
|
"org.primer.overrides": {
|
|
37422
38235
|
"dark": "#1f2328"
|
|
38236
|
+
},
|
|
38237
|
+
"org.primer.llm": {
|
|
38238
|
+
"doNotUse": true,
|
|
38239
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37423
38240
|
}
|
|
37424
38241
|
},
|
|
37425
38242
|
"filePath": "src/tokens/functional/color/fgColor.json5",
|
|
@@ -37427,6 +38244,7 @@
|
|
|
37427
38244
|
"original": {
|
|
37428
38245
|
"$value": "{base.color.neutral.0}",
|
|
37429
38246
|
"$type": "color",
|
|
38247
|
+
"$description": "Pure white text",
|
|
37430
38248
|
"$extensions": {
|
|
37431
38249
|
"org.primer.figma": {
|
|
37432
38250
|
"collection": "mode",
|
|
@@ -37435,6 +38253,10 @@
|
|
|
37435
38253
|
},
|
|
37436
38254
|
"org.primer.overrides": {
|
|
37437
38255
|
"dark": "{base.color.neutral.13}"
|
|
38256
|
+
},
|
|
38257
|
+
"org.primer.llm": {
|
|
38258
|
+
"doNotUse": true,
|
|
38259
|
+
"rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
|
|
37438
38260
|
}
|
|
37439
38261
|
},
|
|
37440
38262
|
"key": "{fgColor.white}"
|
|
@@ -37447,6 +38269,13 @@
|
|
|
37447
38269
|
"key": "{focus.outline}",
|
|
37448
38270
|
"$value": "2px solid #0969da",
|
|
37449
38271
|
"$type": "border",
|
|
38272
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38273
|
+
"$extensions": {
|
|
38274
|
+
"org.primer.llm": {
|
|
38275
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38276
|
+
"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."
|
|
38277
|
+
}
|
|
38278
|
+
},
|
|
37450
38279
|
"filePath": "src/tokens/functional/border/border.json5",
|
|
37451
38280
|
"isSource": true,
|
|
37452
38281
|
"original": {
|
|
@@ -37456,6 +38285,13 @@
|
|
|
37456
38285
|
"width": "2px"
|
|
37457
38286
|
},
|
|
37458
38287
|
"$type": "border",
|
|
38288
|
+
"$description": "Focus ring outline for keyboard navigation and accessibility.",
|
|
38289
|
+
"$extensions": {
|
|
38290
|
+
"org.primer.llm": {
|
|
38291
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38292
|
+
"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."
|
|
38293
|
+
}
|
|
38294
|
+
},
|
|
37459
38295
|
"key": "{focus.outline}"
|
|
37460
38296
|
},
|
|
37461
38297
|
"name": "focus-outline",
|
|
@@ -37466,11 +38302,16 @@
|
|
|
37466
38302
|
"key": "{focus.outlineColor}",
|
|
37467
38303
|
"$value": "#0969da",
|
|
37468
38304
|
"$type": "color",
|
|
38305
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37469
38306
|
"$extensions": {
|
|
37470
38307
|
"org.primer.figma": {
|
|
37471
38308
|
"collection": "mode",
|
|
37472
38309
|
"group": "component (internal)",
|
|
37473
38310
|
"scopes": ["borderColor", "effectColor"]
|
|
38311
|
+
},
|
|
38312
|
+
"org.primer.llm": {
|
|
38313
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38314
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37474
38315
|
}
|
|
37475
38316
|
},
|
|
37476
38317
|
"filePath": "src/tokens/functional/color/focus.json5",
|
|
@@ -37478,11 +38319,16 @@
|
|
|
37478
38319
|
"original": {
|
|
37479
38320
|
"$value": "{borderColor.accent.emphasis}",
|
|
37480
38321
|
"$type": "color",
|
|
38322
|
+
"$description": "Outline color for focus states on interactive elements",
|
|
37481
38323
|
"$extensions": {
|
|
37482
38324
|
"org.primer.figma": {
|
|
37483
38325
|
"collection": "mode",
|
|
37484
38326
|
"group": "component (internal)",
|
|
37485
38327
|
"scopes": ["borderColor", "effectColor"]
|
|
38328
|
+
},
|
|
38329
|
+
"org.primer.llm": {
|
|
38330
|
+
"usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
|
|
38331
|
+
"rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
|
|
37486
38332
|
}
|
|
37487
38333
|
},
|
|
37488
38334
|
"key": "{focus.outlineColor}"
|
|
@@ -46530,6 +47376,7 @@
|
|
|
46530
47376
|
"key": "{selection.bgColor}",
|
|
46531
47377
|
"$value": "#0969da33",
|
|
46532
47378
|
"$type": "color",
|
|
47379
|
+
"$description": "Background color for text selection highlights",
|
|
46533
47380
|
"$extensions": {
|
|
46534
47381
|
"org.primer.figma": {
|
|
46535
47382
|
"collection": "mode",
|
|
@@ -46544,6 +47391,10 @@
|
|
|
46544
47391
|
"isSource": true,
|
|
46545
47392
|
"$type": "color"
|
|
46546
47393
|
}
|
|
47394
|
+
},
|
|
47395
|
+
"org.primer.llm": {
|
|
47396
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47397
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46547
47398
|
}
|
|
46548
47399
|
},
|
|
46549
47400
|
"alpha": 0.2,
|
|
@@ -46552,6 +47403,7 @@
|
|
|
46552
47403
|
"original": {
|
|
46553
47404
|
"$value": "{bgColor.accent.emphasis}",
|
|
46554
47405
|
"$type": "color",
|
|
47406
|
+
"$description": "Background color for text selection highlights",
|
|
46555
47407
|
"$extensions": {
|
|
46556
47408
|
"org.primer.figma": {
|
|
46557
47409
|
"collection": "mode",
|
|
@@ -46566,6 +47418,10 @@
|
|
|
46566
47418
|
"isSource": true,
|
|
46567
47419
|
"$type": "color"
|
|
46568
47420
|
}
|
|
47421
|
+
},
|
|
47422
|
+
"org.primer.llm": {
|
|
47423
|
+
"usage": ["text-selection", "highlighted-text", "selected-content"],
|
|
47424
|
+
"rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
|
|
46569
47425
|
}
|
|
46570
47426
|
},
|
|
46571
47427
|
"alpha": 0.2,
|
|
@@ -46579,6 +47435,7 @@
|
|
|
46579
47435
|
"key": "{shadow.floating.large}",
|
|
46580
47436
|
"$value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
|
|
46581
47437
|
"$type": "shadow",
|
|
47438
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46582
47439
|
"$extensions": {
|
|
46583
47440
|
"org.primer.figma": {
|
|
46584
47441
|
"collection": "mode",
|
|
@@ -46608,6 +47465,10 @@
|
|
|
46608
47465
|
"isSource": true,
|
|
46609
47466
|
"$type": "shadow"
|
|
46610
47467
|
}
|
|
47468
|
+
},
|
|
47469
|
+
"org.primer.llm": {
|
|
47470
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47471
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46611
47472
|
}
|
|
46612
47473
|
},
|
|
46613
47474
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46632,6 +47493,7 @@
|
|
|
46632
47493
|
}
|
|
46633
47494
|
],
|
|
46634
47495
|
"$type": "shadow",
|
|
47496
|
+
"$description": "Large floating shadow for modals and dialogs",
|
|
46635
47497
|
"$extensions": {
|
|
46636
47498
|
"org.primer.figma": {
|
|
46637
47499
|
"collection": "mode",
|
|
@@ -46661,6 +47523,10 @@
|
|
|
46661
47523
|
"isSource": true,
|
|
46662
47524
|
"$type": "shadow"
|
|
46663
47525
|
}
|
|
47526
|
+
},
|
|
47527
|
+
"org.primer.llm": {
|
|
47528
|
+
"usage": ["modal", "dialog", "full-screen-overlay"],
|
|
47529
|
+
"rules": "MUST use for modals and dialogs. Do NOT use for small floating elements."
|
|
46664
47530
|
}
|
|
46665
47531
|
},
|
|
46666
47532
|
"key": "{shadow.floating.large}"
|
|
@@ -46673,6 +47539,7 @@
|
|
|
46673
47539
|
"key": "{shadow.floating.legacy}",
|
|
46674
47540
|
"$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46675
47541
|
"$type": "shadow",
|
|
47542
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46676
47543
|
"$extensions": {
|
|
46677
47544
|
"org.primer.figma": {},
|
|
46678
47545
|
"org.primer.overrides": {
|
|
@@ -46699,6 +47566,10 @@
|
|
|
46699
47566
|
"isSource": true,
|
|
46700
47567
|
"$type": "shadow"
|
|
46701
47568
|
}
|
|
47569
|
+
},
|
|
47570
|
+
"org.primer.llm": {
|
|
47571
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47572
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46702
47573
|
}
|
|
46703
47574
|
},
|
|
46704
47575
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46723,6 +47594,7 @@
|
|
|
46723
47594
|
}
|
|
46724
47595
|
],
|
|
46725
47596
|
"$type": "shadow",
|
|
47597
|
+
"$description": "Legacy floating shadow for backward compatibility",
|
|
46726
47598
|
"$extensions": {
|
|
46727
47599
|
"org.primer.figma": {},
|
|
46728
47600
|
"org.primer.overrides": {
|
|
@@ -46749,6 +47621,10 @@
|
|
|
46749
47621
|
"isSource": true,
|
|
46750
47622
|
"$type": "shadow"
|
|
46751
47623
|
}
|
|
47624
|
+
},
|
|
47625
|
+
"org.primer.llm": {
|
|
47626
|
+
"usage": ["legacy-component", "backward-compatibility"],
|
|
47627
|
+
"rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
|
|
46752
47628
|
}
|
|
46753
47629
|
},
|
|
46754
47630
|
"key": "{shadow.floating.legacy}"
|
|
@@ -46761,6 +47637,7 @@
|
|
|
46761
47637
|
"key": "{shadow.floating.medium}",
|
|
46762
47638
|
"$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",
|
|
46763
47639
|
"$type": "shadow",
|
|
47640
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46764
47641
|
"$extensions": {
|
|
46765
47642
|
"org.primer.figma": {
|
|
46766
47643
|
"collection": "mode",
|
|
@@ -46814,6 +47691,10 @@
|
|
|
46814
47691
|
"isSource": true,
|
|
46815
47692
|
"$type": "shadow"
|
|
46816
47693
|
}
|
|
47694
|
+
},
|
|
47695
|
+
"org.primer.llm": {
|
|
47696
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47697
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46817
47698
|
}
|
|
46818
47699
|
},
|
|
46819
47700
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46862,6 +47743,7 @@
|
|
|
46862
47743
|
}
|
|
46863
47744
|
],
|
|
46864
47745
|
"$type": "shadow",
|
|
47746
|
+
"$description": "Medium floating shadow for popovers and action menus",
|
|
46865
47747
|
"$extensions": {
|
|
46866
47748
|
"org.primer.figma": {
|
|
46867
47749
|
"collection": "mode",
|
|
@@ -46915,6 +47797,10 @@
|
|
|
46915
47797
|
"isSource": true,
|
|
46916
47798
|
"$type": "shadow"
|
|
46917
47799
|
}
|
|
47800
|
+
},
|
|
47801
|
+
"org.primer.llm": {
|
|
47802
|
+
"usage": ["popover", "action-menu", "select-panel", "autocomplete"],
|
|
47803
|
+
"rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
|
|
46918
47804
|
}
|
|
46919
47805
|
},
|
|
46920
47806
|
"key": "{shadow.floating.medium}"
|
|
@@ -46927,6 +47813,7 @@
|
|
|
46927
47813
|
"key": "{shadow.floating.small}",
|
|
46928
47814
|
"$value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
|
|
46929
47815
|
"$type": "shadow",
|
|
47816
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46930
47817
|
"$extensions": {
|
|
46931
47818
|
"org.primer.figma": {
|
|
46932
47819
|
"collection": "mode",
|
|
@@ -46964,6 +47851,10 @@
|
|
|
46964
47851
|
"isSource": true,
|
|
46965
47852
|
"$type": "shadow"
|
|
46966
47853
|
}
|
|
47854
|
+
},
|
|
47855
|
+
"org.primer.llm": {
|
|
47856
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47857
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
46967
47858
|
}
|
|
46968
47859
|
},
|
|
46969
47860
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -46996,6 +47887,7 @@
|
|
|
46996
47887
|
}
|
|
46997
47888
|
],
|
|
46998
47889
|
"$type": "shadow",
|
|
47890
|
+
"$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
|
|
46999
47891
|
"$extensions": {
|
|
47000
47892
|
"org.primer.figma": {
|
|
47001
47893
|
"collection": "mode",
|
|
@@ -47033,6 +47925,10 @@
|
|
|
47033
47925
|
"isSource": true,
|
|
47034
47926
|
"$type": "shadow"
|
|
47035
47927
|
}
|
|
47928
|
+
},
|
|
47929
|
+
"org.primer.llm": {
|
|
47930
|
+
"usage": ["dropdown", "tooltip", "popover", "menu"],
|
|
47931
|
+
"rules": "Use for small floating elements like dropdowns and tooltips. Do NOT use for modals or dialogs."
|
|
47036
47932
|
}
|
|
47037
47933
|
},
|
|
47038
47934
|
"key": "{shadow.floating.small}"
|
|
@@ -47045,6 +47941,7 @@
|
|
|
47045
47941
|
"key": "{shadow.floating.xlarge}",
|
|
47046
47942
|
"$value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
|
|
47047
47943
|
"$type": "shadow",
|
|
47944
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47048
47945
|
"$extensions": {
|
|
47049
47946
|
"org.primer.figma": {
|
|
47050
47947
|
"collection": "mode",
|
|
@@ -47074,6 +47971,10 @@
|
|
|
47074
47971
|
"isSource": true,
|
|
47075
47972
|
"$type": "shadow"
|
|
47076
47973
|
}
|
|
47974
|
+
},
|
|
47975
|
+
"org.primer.llm": {
|
|
47976
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
47977
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47077
47978
|
}
|
|
47078
47979
|
},
|
|
47079
47980
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47098,6 +47999,7 @@
|
|
|
47098
47999
|
}
|
|
47099
48000
|
],
|
|
47100
48001
|
"$type": "shadow",
|
|
48002
|
+
"$description": "Extra large floating shadow for full-screen overlays and sheets",
|
|
47101
48003
|
"$extensions": {
|
|
47102
48004
|
"org.primer.figma": {
|
|
47103
48005
|
"collection": "mode",
|
|
@@ -47127,6 +48029,10 @@
|
|
|
47127
48029
|
"isSource": true,
|
|
47128
48030
|
"$type": "shadow"
|
|
47129
48031
|
}
|
|
48032
|
+
},
|
|
48033
|
+
"org.primer.llm": {
|
|
48034
|
+
"usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
|
|
48035
|
+
"rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
|
|
47130
48036
|
}
|
|
47131
48037
|
},
|
|
47132
48038
|
"key": "{shadow.floating.xlarge}"
|
|
@@ -47139,6 +48045,7 @@
|
|
|
47139
48045
|
"key": "{shadow.inset}",
|
|
47140
48046
|
"$value": "inset 0px 1px 0px 0px #1f23280a",
|
|
47141
48047
|
"$type": "shadow",
|
|
48048
|
+
"$description": "Inset shadow for recessed elements",
|
|
47142
48049
|
"$extensions": {
|
|
47143
48050
|
"org.primer.figma": {
|
|
47144
48051
|
"collection": "mode",
|
|
@@ -47159,6 +48066,10 @@
|
|
|
47159
48066
|
"isSource": true,
|
|
47160
48067
|
"$type": "shadow"
|
|
47161
48068
|
}
|
|
48069
|
+
},
|
|
48070
|
+
"org.primer.llm": {
|
|
48071
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48072
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47162
48073
|
}
|
|
47163
48074
|
},
|
|
47164
48075
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47174,6 +48085,7 @@
|
|
|
47174
48085
|
"inset": true
|
|
47175
48086
|
},
|
|
47176
48087
|
"$type": "shadow",
|
|
48088
|
+
"$description": "Inset shadow for recessed elements",
|
|
47177
48089
|
"$extensions": {
|
|
47178
48090
|
"org.primer.figma": {
|
|
47179
48091
|
"collection": "mode",
|
|
@@ -47194,6 +48106,10 @@
|
|
|
47194
48106
|
"isSource": true,
|
|
47195
48107
|
"$type": "shadow"
|
|
47196
48108
|
}
|
|
48109
|
+
},
|
|
48110
|
+
"org.primer.llm": {
|
|
48111
|
+
"usage": ["input-field", "pressed-button", "recessed-area", "well"],
|
|
48112
|
+
"rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
|
|
47197
48113
|
}
|
|
47198
48114
|
},
|
|
47199
48115
|
"key": "{shadow.inset}"
|
|
@@ -47206,6 +48122,7 @@
|
|
|
47206
48122
|
"key": "{shadow.resting.medium}",
|
|
47207
48123
|
"$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
|
|
47208
48124
|
"$type": "shadow",
|
|
48125
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47209
48126
|
"$extensions": {
|
|
47210
48127
|
"org.primer.figma": {
|
|
47211
48128
|
"collection": "mode",
|
|
@@ -47235,6 +48152,10 @@
|
|
|
47235
48152
|
"isSource": true,
|
|
47236
48153
|
"$type": "shadow"
|
|
47237
48154
|
}
|
|
48155
|
+
},
|
|
48156
|
+
"org.primer.llm": {
|
|
48157
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48158
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47238
48159
|
}
|
|
47239
48160
|
},
|
|
47240
48161
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47259,6 +48180,7 @@
|
|
|
47259
48180
|
}
|
|
47260
48181
|
],
|
|
47261
48182
|
"$type": "shadow",
|
|
48183
|
+
"$description": "Medium resting shadow for cards and elevated surfaces",
|
|
47262
48184
|
"$extensions": {
|
|
47263
48185
|
"org.primer.figma": {
|
|
47264
48186
|
"collection": "mode",
|
|
@@ -47288,6 +48210,10 @@
|
|
|
47288
48210
|
"isSource": true,
|
|
47289
48211
|
"$type": "shadow"
|
|
47290
48212
|
}
|
|
48213
|
+
},
|
|
48214
|
+
"org.primer.llm": {
|
|
48215
|
+
"usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
|
|
48216
|
+
"rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
|
|
47291
48217
|
}
|
|
47292
48218
|
},
|
|
47293
48219
|
"key": "{shadow.resting.medium}"
|
|
@@ -47298,8 +48224,9 @@
|
|
|
47298
48224
|
},
|
|
47299
48225
|
"shadow-resting-small": {
|
|
47300
48226
|
"key": "{shadow.resting.small}",
|
|
47301
|
-
"$value": "0px 1px 1px 0px #
|
|
48227
|
+
"$value": "0px 1px 1px 0px #1f23280a, 0px 1px 2px 0px #1f232808",
|
|
47302
48228
|
"$type": "shadow",
|
|
48229
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47303
48230
|
"$extensions": {
|
|
47304
48231
|
"org.primer.figma": {
|
|
47305
48232
|
"collection": "mode",
|
|
@@ -47331,6 +48258,10 @@
|
|
|
47331
48258
|
"isSource": true,
|
|
47332
48259
|
"$type": "shadow"
|
|
47333
48260
|
}
|
|
48261
|
+
},
|
|
48262
|
+
"org.primer.llm": {
|
|
48263
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48264
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47334
48265
|
}
|
|
47335
48266
|
},
|
|
47336
48267
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47339,7 +48270,7 @@
|
|
|
47339
48270
|
"$value": [
|
|
47340
48271
|
{
|
|
47341
48272
|
"color": "{base.color.neutral.13}",
|
|
47342
|
-
"alpha": 0.
|
|
48273
|
+
"alpha": 0.04,
|
|
47343
48274
|
"offsetX": "0px",
|
|
47344
48275
|
"offsetY": "1px",
|
|
47345
48276
|
"blur": "1px",
|
|
@@ -47348,15 +48279,16 @@
|
|
|
47348
48279
|
},
|
|
47349
48280
|
{
|
|
47350
48281
|
"color": "{base.color.neutral.13}",
|
|
47351
|
-
"alpha": 0.
|
|
48282
|
+
"alpha": 0.03,
|
|
47352
48283
|
"offsetX": "0px",
|
|
47353
48284
|
"offsetY": "1px",
|
|
47354
|
-
"blur": "
|
|
48285
|
+
"blur": "2px",
|
|
47355
48286
|
"spread": "0px",
|
|
47356
48287
|
"inset": false
|
|
47357
48288
|
}
|
|
47358
48289
|
],
|
|
47359
48290
|
"$type": "shadow",
|
|
48291
|
+
"$description": "Small resting shadow for buttons and interactive elements",
|
|
47360
48292
|
"$extensions": {
|
|
47361
48293
|
"org.primer.figma": {
|
|
47362
48294
|
"collection": "mode",
|
|
@@ -47388,6 +48320,10 @@
|
|
|
47388
48320
|
"isSource": true,
|
|
47389
48321
|
"$type": "shadow"
|
|
47390
48322
|
}
|
|
48323
|
+
},
|
|
48324
|
+
"org.primer.llm": {
|
|
48325
|
+
"usage": ["button", "interactive-card", "clickable-element"],
|
|
48326
|
+
"rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
|
|
47391
48327
|
}
|
|
47392
48328
|
},
|
|
47393
48329
|
"key": "{shadow.resting.small}"
|
|
@@ -47398,8 +48334,9 @@
|
|
|
47398
48334
|
},
|
|
47399
48335
|
"shadow-resting-xsmall": {
|
|
47400
48336
|
"key": "{shadow.resting.xsmall}",
|
|
47401
|
-
"$value": "0px 1px 1px 0px #
|
|
48337
|
+
"$value": "0px 1px 1px 0px #1f23280d",
|
|
47402
48338
|
"$type": "shadow",
|
|
48339
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47403
48340
|
"$extensions": {
|
|
47404
48341
|
"org.primer.figma": {
|
|
47405
48342
|
"collection": "mode",
|
|
@@ -47420,6 +48357,10 @@
|
|
|
47420
48357
|
"isSource": true,
|
|
47421
48358
|
"$type": "shadow"
|
|
47422
48359
|
}
|
|
48360
|
+
},
|
|
48361
|
+
"org.primer.llm": {
|
|
48362
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48363
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47423
48364
|
}
|
|
47424
48365
|
},
|
|
47425
48366
|
"filePath": "src/tokens/functional/shadow/shadow.json5",
|
|
@@ -47427,7 +48368,7 @@
|
|
|
47427
48368
|
"original": {
|
|
47428
48369
|
"$value": {
|
|
47429
48370
|
"color": "{base.color.neutral.13}",
|
|
47430
|
-
"alpha": 0.
|
|
48371
|
+
"alpha": 0.05,
|
|
47431
48372
|
"offsetX": "0px",
|
|
47432
48373
|
"offsetY": "1px",
|
|
47433
48374
|
"blur": "1px",
|
|
@@ -47435,6 +48376,7 @@
|
|
|
47435
48376
|
"inset": false
|
|
47436
48377
|
},
|
|
47437
48378
|
"$type": "shadow",
|
|
48379
|
+
"$description": "Extra small resting shadow for minimal elevation",
|
|
47438
48380
|
"$extensions": {
|
|
47439
48381
|
"org.primer.figma": {
|
|
47440
48382
|
"collection": "mode",
|
|
@@ -47455,6 +48397,10 @@
|
|
|
47455
48397
|
"isSource": true,
|
|
47456
48398
|
"$type": "shadow"
|
|
47457
48399
|
}
|
|
48400
|
+
},
|
|
48401
|
+
"org.primer.llm": {
|
|
48402
|
+
"usage": ["badge", "chip", "small-card", "subtle-elevation"],
|
|
48403
|
+
"rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
|
|
47458
48404
|
}
|
|
47459
48405
|
},
|
|
47460
48406
|
"key": "{shadow.resting.xsmall}"
|