@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

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.
Files changed (152) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +17 -3
  7. package/dist/build/schemas/colorToken.d.ts +1 -1
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  10. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  11. package/dist/build/schemas/dimensionValue.js +10 -13
  12. package/dist/build/schemas/durationToken.d.ts +8 -2
  13. package/dist/build/schemas/durationValue.d.ts +11 -1
  14. package/dist/build/schemas/durationValue.js +13 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  16. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  17. package/dist/build/schemas/gradientToken.d.ts +1 -1
  18. package/dist/build/schemas/numberToken.d.ts +1 -1
  19. package/dist/build/schemas/shadowToken.d.ts +673 -85
  20. package/dist/build/schemas/stringToken.d.ts +1 -1
  21. package/dist/build/schemas/stringToken.js +1 -1
  22. package/dist/build/schemas/tokenType.d.ts +1 -1
  23. package/dist/build/schemas/transitionToken.d.ts +15 -3
  24. package/dist/build/schemas/typographyToken.d.ts +19 -5
  25. package/dist/build/schemas/typographyToken.js +1 -1
  26. package/dist/build/schemas/validTokenType.d.ts +1 -1
  27. package/dist/build/schemas/validTokenType.js +1 -1
  28. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  29. package/dist/build/transformers/borderToCss.js +17 -1
  30. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  31. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  32. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  33. package/dist/build/transformers/dimensionToRem.js +21 -22
  34. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  35. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  36. package/dist/build/transformers/durationToCss.d.ts +2 -1
  37. package/dist/build/transformers/durationToCss.js +18 -11
  38. package/dist/build/transformers/shadowToCss.js +12 -1
  39. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  40. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  41. package/dist/build/types/borderTokenValue.d.ts +3 -1
  42. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  43. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  44. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  45. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  46. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  47. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  48. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  49. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  50. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  51. package/dist/css/functional/themes/dark.css +32 -28
  52. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  53. package/dist/css/functional/themes/light-colorblind.css +32 -28
  54. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  55. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  56. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  57. package/dist/css/functional/themes/light.css +32 -28
  58. package/dist/css/primitives.css +4 -0
  59. package/dist/docs/base/motion/motion.json +96 -24
  60. package/dist/docs/base/size/size.json +76 -19
  61. package/dist/docs/base/typography/typography.json +24 -6
  62. package/dist/docs/functional/size/border.json +26 -11
  63. package/dist/docs/functional/size/breakpoints.json +24 -6
  64. package/dist/docs/functional/size/radius.json +16 -4
  65. package/dist/docs/functional/size/size.json +60 -15
  66. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  68. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  70. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  71. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  72. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  73. package/dist/docs/functional/themes/dark.json +1423 -346
  74. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  76. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  77. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  78. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  79. package/dist/docs/functional/themes/light.json +1426 -349
  80. package/dist/docs/functional/typography/typography.json +8 -2
  81. package/dist/fallbacks/base/motion/motion.json +48 -12
  82. package/dist/figma/themes/light-colorblind.json +4 -4
  83. package/dist/figma/themes/light-high-contrast.json +4 -4
  84. package/dist/figma/themes/light-tritanopia.json +4 -4
  85. package/dist/figma/themes/light.json +4 -4
  86. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-colorblind.css +28 -28
  88. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-dimmed.css +28 -28
  90. package/dist/internalCss/dark-high-contrast.css +28 -28
  91. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  92. package/dist/internalCss/dark-tritanopia.css +28 -28
  93. package/dist/internalCss/dark.css +28 -28
  94. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  95. package/dist/internalCss/light-colorblind.css +28 -28
  96. package/dist/internalCss/light-high-contrast.css +28 -28
  97. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  98. package/dist/internalCss/light-tritanopia.css +28 -28
  99. package/dist/internalCss/light.css +28 -28
  100. package/dist/styleLint/base/motion/motion.json +96 -24
  101. package/dist/styleLint/base/size/size.json +76 -19
  102. package/dist/styleLint/base/typography/typography.json +30 -12
  103. package/dist/styleLint/functional/size/border.json +27 -12
  104. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  105. package/dist/styleLint/functional/size/radius.json +17 -5
  106. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  107. package/dist/styleLint/functional/size/size-fine.json +3 -3
  108. package/dist/styleLint/functional/size/size.json +111 -66
  109. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  115. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  116. package/dist/styleLint/functional/themes/dark.json +1551 -366
  117. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  120. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  121. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  122. package/dist/styleLint/functional/themes/light.json +1554 -369
  123. package/dist/styleLint/functional/typography/typography.json +28 -22
  124. package/package.json +6 -5
  125. package/src/tokens/base/motion/timing.json5 +12 -12
  126. package/src/tokens/base/size/size.json5 +19 -19
  127. package/src/tokens/base/typography/typography.json5 +6 -6
  128. package/src/tokens/component/avatar.json5 +72 -44
  129. package/src/tokens/component/button.json5 +1545 -1193
  130. package/src/tokens/functional/border/border.json5 +4 -1
  131. package/src/tokens/functional/color/bgColor.json5 +8 -0
  132. package/src/tokens/functional/color/display.json5 +7 -0
  133. package/src/tokens/functional/color/fgColor.json5 +8 -0
  134. package/src/tokens/functional/color/syntax.json5 +14 -0
  135. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  136. package/src/tokens/functional/size/border.json5 +8 -8
  137. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  138. package/src/tokens/functional/size/radius.json5 +4 -4
  139. package/src/tokens/functional/size/size.json5 +15 -15
  140. package/src/tokens/functional/typography/typography.json5 +8 -4
  141. package/dist/build/parsers/index.d.ts +0 -1
  142. package/dist/build/parsers/index.js +0 -1
  143. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  144. package/dist/build/parsers/w3cJsonParser.js +0 -25
  145. package/dist/removed/testing.json5 +0 -4
  146. package/guidelines/color.llm.md +0 -16
  147. package/guidelines/guidelines.llm.md +0 -34
  148. package/guidelines/motion.llm.md +0 -41
  149. package/guidelines/spacing.llm.md +0 -20
  150. package/guidelines/typography.llm.md +0 -14
  151. package/src/tokens/removed/testing.json5 +0 -4
  152. package/token-guidelines.llm.md +0 -695
@@ -165,7 +165,7 @@
165
165
  },
166
166
  "avatar-shadow": {
167
167
  "key": "{avatar.shadow}",
168
- "$value": "0px 0px 0px 2px #ffffffcc",
168
+ "$value": "0 0 0 2px #ffffffcc",
169
169
  "$type": "shadow",
170
170
  "$extensions": {
171
171
  "org.primer.figma": {
@@ -178,10 +178,22 @@
178
178
  {
179
179
  "color": "#f6f8fa",
180
180
  "alpha": 1,
181
- "offsetX": "0px",
182
- "offsetY": "0px",
183
- "blur": "0px",
184
- "spread": "2px"
181
+ "offsetX": {
182
+ "value": 0,
183
+ "unit": "px"
184
+ },
185
+ "offsetY": {
186
+ "value": 0,
187
+ "unit": "px"
188
+ },
189
+ "blur": {
190
+ "value": 0,
191
+ "unit": "px"
192
+ },
193
+ "spread": {
194
+ "value": 2,
195
+ "unit": "px"
196
+ }
185
197
  }
186
198
  ],
187
199
  "filePath": "src/tokens/component/avatar.json5",
@@ -197,10 +209,22 @@
197
209
  {
198
210
  "color": "{base.color.neutral.0}",
199
211
  "alpha": 0.8,
200
- "offsetX": "0px",
201
- "offsetY": "0px",
202
- "blur": "0px",
203
- "spread": "2px"
212
+ "offsetX": {
213
+ "value": 0,
214
+ "unit": "px"
215
+ },
216
+ "offsetY": {
217
+ "value": 0,
218
+ "unit": "px"
219
+ },
220
+ "blur": {
221
+ "value": 0,
222
+ "unit": "px"
223
+ },
224
+ "spread": {
225
+ "value": 2,
226
+ "unit": "px"
227
+ }
204
228
  }
205
229
  ],
206
230
  "$type": "shadow",
@@ -215,10 +239,22 @@
215
239
  {
216
240
  "color": "{base.color.neutral.1}",
217
241
  "alpha": 1,
218
- "offsetX": "0px",
219
- "offsetY": "0px",
220
- "blur": "0px",
221
- "spread": "2px"
242
+ "offsetX": {
243
+ "value": 0,
244
+ "unit": "px"
245
+ },
246
+ "offsetY": {
247
+ "value": 0,
248
+ "unit": "px"
249
+ },
250
+ "blur": {
251
+ "value": 0,
252
+ "unit": "px"
253
+ },
254
+ "spread": {
255
+ "value": 2,
256
+ "unit": "px"
257
+ }
222
258
  }
223
259
  ],
224
260
  "filePath": "src/tokens/component/avatar.json5",
@@ -546,6 +582,10 @@
546
582
  },
547
583
  "org.primer.overrides": {
548
584
  "dark": "#ffffff"
585
+ },
586
+ "org.primer.llm": {
587
+ "doNotUse": true,
588
+ "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."
549
589
  }
550
590
  },
551
591
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -562,6 +602,10 @@
562
602
  },
563
603
  "org.primer.overrides": {
564
604
  "dark": "{base.color.neutral.0}"
605
+ },
606
+ "org.primer.llm": {
607
+ "doNotUse": true,
608
+ "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."
565
609
  }
566
610
  },
567
611
  "key": "{bgColor.black}"
@@ -2438,6 +2482,10 @@
2438
2482
  },
2439
2483
  "org.primer.overrides": {
2440
2484
  "dark": "#1f2328"
2485
+ },
2486
+ "org.primer.llm": {
2487
+ "doNotUse": true,
2488
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2441
2489
  }
2442
2490
  },
2443
2491
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2454,6 +2502,10 @@
2454
2502
  },
2455
2503
  "org.primer.overrides": {
2456
2504
  "dark": "{base.color.neutral.13}"
2505
+ },
2506
+ "org.primer.llm": {
2507
+ "doNotUse": true,
2508
+ "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."
2457
2509
  }
2458
2510
  },
2459
2511
  "key": "{bgColor.white}"
@@ -2464,7 +2516,11 @@
2464
2516
  },
2465
2517
  "border-accent-emphasis": {
2466
2518
  "key": "{border.accent.emphasis}",
2467
- "$value": "0.00390625rem,0.0625px solid #0969da",
2519
+ "$value": {
2520
+ "color": "#0969da",
2521
+ "style": "solid",
2522
+ "width": ["0.0625rem", "1px"]
2523
+ },
2468
2524
  "$type": "border",
2469
2525
  "filePath": "src/tokens/functional/border/border.json5",
2470
2526
  "isSource": true,
@@ -2483,7 +2539,11 @@
2483
2539
  },
2484
2540
  "border-accent-muted": {
2485
2541
  "key": "{border.accent.muted}",
2486
- "$value": "0.00390625rem,0.0625px solid #54aeff66",
2542
+ "$value": {
2543
+ "color": "#54aeff66",
2544
+ "style": "solid",
2545
+ "width": ["0.0625rem", "1px"]
2546
+ },
2487
2547
  "$type": "border",
2488
2548
  "filePath": "src/tokens/functional/border/border.json5",
2489
2549
  "isSource": true,
@@ -2502,7 +2562,11 @@
2502
2562
  },
2503
2563
  "border-attention-emphasis": {
2504
2564
  "key": "{border.attention.emphasis}",
2505
- "$value": "0.00390625rem,0.0625px solid #9a6700",
2565
+ "$value": {
2566
+ "color": "#9a6700",
2567
+ "style": "solid",
2568
+ "width": ["0.0625rem", "1px"]
2569
+ },
2506
2570
  "$type": "border",
2507
2571
  "filePath": "src/tokens/functional/border/border.json5",
2508
2572
  "isSource": true,
@@ -2521,7 +2585,11 @@
2521
2585
  },
2522
2586
  "border-attention-muted": {
2523
2587
  "key": "{border.attention.muted}",
2524
- "$value": "0.00390625rem,0.0625px solid #d4a72c66",
2588
+ "$value": {
2589
+ "color": "#d4a72c66",
2590
+ "style": "solid",
2591
+ "width": ["0.0625rem", "1px"]
2592
+ },
2525
2593
  "$type": "border",
2526
2594
  "filePath": "src/tokens/functional/border/border.json5",
2527
2595
  "isSource": true,
@@ -2540,7 +2608,11 @@
2540
2608
  },
2541
2609
  "border-closed-emphasis": {
2542
2610
  "key": "{border.closed.emphasis}",
2543
- "$value": "0.00390625rem,0.0625px solid #cf222e",
2611
+ "$value": {
2612
+ "color": "#cf222e",
2613
+ "style": "solid",
2614
+ "width": ["0.0625rem", "1px"]
2615
+ },
2544
2616
  "$type": "border",
2545
2617
  "filePath": "src/tokens/functional/border/border.json5",
2546
2618
  "isSource": true,
@@ -2555,7 +2627,11 @@
2555
2627
  },
2556
2628
  "border-closed-muted": {
2557
2629
  "key": "{border.closed.muted}",
2558
- "$value": "0.00390625rem,0.0625px solid #ff818266",
2630
+ "$value": {
2631
+ "color": "#ff818266",
2632
+ "style": "solid",
2633
+ "width": ["0.0625rem", "1px"]
2634
+ },
2559
2635
  "$type": "border",
2560
2636
  "filePath": "src/tokens/functional/border/border.json5",
2561
2637
  "isSource": true,
@@ -2570,7 +2646,11 @@
2570
2646
  },
2571
2647
  "border-danger-emphasis": {
2572
2648
  "key": "{border.danger.emphasis}",
2573
- "$value": "0.00390625rem,0.0625px solid #cf222e",
2649
+ "$value": {
2650
+ "color": "#cf222e",
2651
+ "style": "solid",
2652
+ "width": ["0.0625rem", "1px"]
2653
+ },
2574
2654
  "$type": "border",
2575
2655
  "filePath": "src/tokens/functional/border/border.json5",
2576
2656
  "isSource": true,
@@ -2589,7 +2669,11 @@
2589
2669
  },
2590
2670
  "border-danger-muted": {
2591
2671
  "key": "{border.danger.muted}",
2592
- "$value": "0.00390625rem,0.0625px solid #ff818266",
2672
+ "$value": {
2673
+ "color": "#ff818266",
2674
+ "style": "solid",
2675
+ "width": ["0.0625rem", "1px"]
2676
+ },
2593
2677
  "$type": "border",
2594
2678
  "filePath": "src/tokens/functional/border/border.json5",
2595
2679
  "isSource": true,
@@ -2608,7 +2692,11 @@
2608
2692
  },
2609
2693
  "border-default": {
2610
2694
  "key": "{border.default}",
2611
- "$value": "0.00390625rem,0.0625px solid #d1d9e0",
2695
+ "$value": {
2696
+ "color": "#d1d9e0",
2697
+ "style": "solid",
2698
+ "width": ["0.0625rem", "1px"]
2699
+ },
2612
2700
  "$type": "border",
2613
2701
  "filePath": "src/tokens/functional/border/border.json5",
2614
2702
  "isSource": true,
@@ -2627,7 +2715,11 @@
2627
2715
  },
2628
2716
  "border-disabled": {
2629
2717
  "key": "{border.disabled}",
2630
- "$value": "0.00390625rem,0.0625px solid #818b981a",
2718
+ "$value": {
2719
+ "color": "#818b981a",
2720
+ "style": "solid",
2721
+ "width": ["0.0625rem", "1px"]
2722
+ },
2631
2723
  "$type": "border",
2632
2724
  "filePath": "src/tokens/functional/border/border.json5",
2633
2725
  "isSource": true,
@@ -2646,7 +2738,11 @@
2646
2738
  },
2647
2739
  "border-done-emphasis": {
2648
2740
  "key": "{border.done.emphasis}",
2649
- "$value": "0.00390625rem,0.0625px solid #8250df",
2741
+ "$value": {
2742
+ "color": "#8250df",
2743
+ "style": "solid",
2744
+ "width": ["0.0625rem", "1px"]
2745
+ },
2650
2746
  "$type": "border",
2651
2747
  "filePath": "src/tokens/functional/border/border.json5",
2652
2748
  "isSource": true,
@@ -2665,7 +2761,11 @@
2665
2761
  },
2666
2762
  "border-done-muted": {
2667
2763
  "key": "{border.done.muted}",
2668
- "$value": "0.00390625rem,0.0625px solid #c297ff66",
2764
+ "$value": {
2765
+ "color": "#c297ff66",
2766
+ "style": "solid",
2767
+ "width": ["0.0625rem", "1px"]
2768
+ },
2669
2769
  "$type": "border",
2670
2770
  "filePath": "src/tokens/functional/border/border.json5",
2671
2771
  "isSource": true,
@@ -2684,7 +2784,11 @@
2684
2784
  },
2685
2785
  "border-emphasis": {
2686
2786
  "key": "{border.emphasis}",
2687
- "$value": "0.00390625rem,0.0625px solid #818b98",
2787
+ "$value": {
2788
+ "color": "#818b98",
2789
+ "style": "solid",
2790
+ "width": ["0.0625rem", "1px"]
2791
+ },
2688
2792
  "$type": "border",
2689
2793
  "filePath": "src/tokens/functional/border/border.json5",
2690
2794
  "isSource": true,
@@ -2703,7 +2807,11 @@
2703
2807
  },
2704
2808
  "border-muted": {
2705
2809
  "key": "{border.muted}",
2706
- "$value": "0.00390625rem,0.0625px solid #d1d9e0b3",
2810
+ "$value": {
2811
+ "color": "#d1d9e0b3",
2812
+ "style": "solid",
2813
+ "width": ["0.0625rem", "1px"]
2814
+ },
2707
2815
  "$type": "border",
2708
2816
  "filePath": "src/tokens/functional/border/border.json5",
2709
2817
  "isSource": true,
@@ -2722,7 +2830,11 @@
2722
2830
  },
2723
2831
  "border-neutral-emphasis": {
2724
2832
  "key": "{border.neutral.emphasis}",
2725
- "$value": "0.00390625rem,0.0625px solid #59636e",
2833
+ "$value": {
2834
+ "color": "#59636e",
2835
+ "style": "solid",
2836
+ "width": ["0.0625rem", "1px"]
2837
+ },
2726
2838
  "$type": "border",
2727
2839
  "filePath": "src/tokens/functional/border/border.json5",
2728
2840
  "isSource": true,
@@ -2741,7 +2853,11 @@
2741
2853
  },
2742
2854
  "border-neutral-muted": {
2743
2855
  "key": "{border.neutral.muted}",
2744
- "$value": "0.00390625rem,0.0625px solid #d1d9e0b3",
2856
+ "$value": {
2857
+ "color": "#d1d9e0b3",
2858
+ "style": "solid",
2859
+ "width": ["0.0625rem", "1px"]
2860
+ },
2745
2861
  "$type": "border",
2746
2862
  "filePath": "src/tokens/functional/border/border.json5",
2747
2863
  "isSource": true,
@@ -2760,7 +2876,11 @@
2760
2876
  },
2761
2877
  "border-open-emphasis": {
2762
2878
  "key": "{border.open.emphasis}",
2763
- "$value": "0.00390625rem,0.0625px solid #1a7f37",
2879
+ "$value": {
2880
+ "color": "#1a7f37",
2881
+ "style": "solid",
2882
+ "width": ["0.0625rem", "1px"]
2883
+ },
2764
2884
  "$type": "border",
2765
2885
  "filePath": "src/tokens/functional/border/border.json5",
2766
2886
  "isSource": true,
@@ -2775,7 +2895,11 @@
2775
2895
  },
2776
2896
  "border-open-muted": {
2777
2897
  "key": "{border.open.muted}",
2778
- "$value": "0.00390625rem,0.0625px solid #4ac26b66",
2898
+ "$value": {
2899
+ "color": "#4ac26b66",
2900
+ "style": "solid",
2901
+ "width": ["0.0625rem", "1px"]
2902
+ },
2779
2903
  "$type": "border",
2780
2904
  "filePath": "src/tokens/functional/border/border.json5",
2781
2905
  "isSource": true,
@@ -2790,7 +2914,11 @@
2790
2914
  },
2791
2915
  "border-severe-emphasis": {
2792
2916
  "key": "{border.severe.emphasis}",
2793
- "$value": "0.00390625rem,0.0625px solid #bc4c00",
2917
+ "$value": {
2918
+ "color": "#bc4c00",
2919
+ "style": "solid",
2920
+ "width": ["0.0625rem", "1px"]
2921
+ },
2794
2922
  "$type": "border",
2795
2923
  "filePath": "src/tokens/functional/border/border.json5",
2796
2924
  "isSource": true,
@@ -2809,7 +2937,11 @@
2809
2937
  },
2810
2938
  "border-severe-muted": {
2811
2939
  "key": "{border.severe.muted}",
2812
- "$value": "0.00390625rem,0.0625px solid #fb8f4466",
2940
+ "$value": {
2941
+ "color": "#fb8f4466",
2942
+ "style": "solid",
2943
+ "width": ["0.0625rem", "1px"]
2944
+ },
2813
2945
  "$type": "border",
2814
2946
  "filePath": "src/tokens/functional/border/border.json5",
2815
2947
  "isSource": true,
@@ -2828,7 +2960,11 @@
2828
2960
  },
2829
2961
  "border-sponsors-emphasis": {
2830
2962
  "key": "{border.sponsors.emphasis}",
2831
- "$value": "0.00390625rem,0.0625px solid #bf3989",
2963
+ "$value": {
2964
+ "color": "#bf3989",
2965
+ "style": "solid",
2966
+ "width": ["0.0625rem", "1px"]
2967
+ },
2832
2968
  "$type": "border",
2833
2969
  "filePath": "src/tokens/functional/border/border.json5",
2834
2970
  "isSource": true,
@@ -2847,7 +2983,11 @@
2847
2983
  },
2848
2984
  "border-sponsors-muted": {
2849
2985
  "key": "{border.sponsors.muted}",
2850
- "$value": "0.00390625rem,0.0625px solid #ff80c866",
2986
+ "$value": {
2987
+ "color": "#ff80c866",
2988
+ "style": "solid",
2989
+ "width": ["0.0625rem", "1px"]
2990
+ },
2851
2991
  "$type": "border",
2852
2992
  "filePath": "src/tokens/functional/border/border.json5",
2853
2993
  "isSource": true,
@@ -2866,7 +3006,11 @@
2866
3006
  },
2867
3007
  "border-success-emphasis": {
2868
3008
  "key": "{border.success.emphasis}",
2869
- "$value": "0.00390625rem,0.0625px solid #1a7f37",
3009
+ "$value": {
3010
+ "color": "#1a7f37",
3011
+ "style": "solid",
3012
+ "width": ["0.0625rem", "1px"]
3013
+ },
2870
3014
  "$type": "border",
2871
3015
  "filePath": "src/tokens/functional/border/border.json5",
2872
3016
  "isSource": true,
@@ -2885,7 +3029,11 @@
2885
3029
  },
2886
3030
  "border-success-muted": {
2887
3031
  "key": "{border.success.muted}",
2888
- "$value": "0.00390625rem,0.0625px solid #4ac26b66",
3032
+ "$value": {
3033
+ "color": "#4ac26b66",
3034
+ "style": "solid",
3035
+ "width": ["0.0625rem", "1px"]
3036
+ },
2889
3037
  "$type": "border",
2890
3038
  "filePath": "src/tokens/functional/border/border.json5",
2891
3039
  "isSource": true,
@@ -2904,7 +3052,11 @@
2904
3052
  },
2905
3053
  "border-transparent": {
2906
3054
  "key": "{border.transparent}",
2907
- "$value": "0.00390625rem,0.0625px solid #ffffff00",
3055
+ "$value": {
3056
+ "color": "#ffffff00",
3057
+ "style": "solid",
3058
+ "width": ["0.0625rem", "1px"]
3059
+ },
2908
3060
  "$type": "border",
2909
3061
  "filePath": "src/tokens/functional/border/border.json5",
2910
3062
  "isSource": true,
@@ -2923,7 +3075,11 @@
2923
3075
  },
2924
3076
  "border-upsell-emphasis": {
2925
3077
  "key": "{border.upsell.emphasis}",
2926
- "$value": "0.00390625rem,0.0625px solid #8250df",
3078
+ "$value": {
3079
+ "color": "#8250df",
3080
+ "style": "solid",
3081
+ "width": ["0.0625rem", "1px"]
3082
+ },
2927
3083
  "$type": "border",
2928
3084
  "filePath": "src/tokens/functional/border/border.json5",
2929
3085
  "isSource": true,
@@ -2942,7 +3098,11 @@
2942
3098
  },
2943
3099
  "border-upsell-muted": {
2944
3100
  "key": "{border.upsell.muted}",
2945
- "$value": "0.00390625rem,0.0625px solid #c297ff66",
3101
+ "$value": {
3102
+ "color": "#c297ff66",
3103
+ "style": "solid",
3104
+ "width": ["0.0625rem", "1px"]
3105
+ },
2946
3106
  "$type": "border",
2947
3107
  "filePath": "src/tokens/functional/border/border.json5",
2948
3108
  "isSource": true,
@@ -6928,7 +7088,7 @@
6928
7088
  },
6929
7089
  "button-danger-shadow-selected": {
6930
7090
  "key": "{button.danger.shadow.selected}",
6931
- "$value": "inset 0px 1px 0px 0px #4c001433",
7091
+ "$value": "inset 0 1px 0 0 #4c001433",
6932
7092
  "$type": "shadow",
6933
7093
  "$extensions": {
6934
7094
  "org.primer.figma": {
@@ -6941,10 +7101,22 @@
6941
7101
  {
6942
7102
  "color": "#471700",
6943
7103
  "alpha": 0.2,
6944
- "offsetX": "0px",
6945
- "offsetY": "1px",
6946
- "blur": "0px",
6947
- "spread": "0px",
7104
+ "offsetX": {
7105
+ "value": 0,
7106
+ "unit": "px"
7107
+ },
7108
+ "offsetY": {
7109
+ "value": 1,
7110
+ "unit": "px"
7111
+ },
7112
+ "blur": {
7113
+ "value": 0,
7114
+ "unit": "px"
7115
+ },
7116
+ "spread": {
7117
+ "value": 0,
7118
+ "unit": "px"
7119
+ },
6948
7120
  "inset": true
6949
7121
  }
6950
7122
  ],
@@ -6957,10 +7129,22 @@
6957
7129
  {
6958
7130
  "color": "#ffffff00",
6959
7131
  "alpha": 0,
6960
- "offsetX": "0px",
6961
- "offsetY": "0px",
6962
- "blur": "0px",
6963
- "spread": "0px",
7132
+ "offsetX": {
7133
+ "value": 0,
7134
+ "unit": "px"
7135
+ },
7136
+ "offsetY": {
7137
+ "value": 0,
7138
+ "unit": "px"
7139
+ },
7140
+ "blur": {
7141
+ "value": 0,
7142
+ "unit": "px"
7143
+ },
7144
+ "spread": {
7145
+ "value": 0,
7146
+ "unit": "px"
7147
+ },
6964
7148
  "inset": false
6965
7149
  }
6966
7150
  ],
@@ -6977,10 +7161,22 @@
6977
7161
  {
6978
7162
  "color": "{base.color.red.9}",
6979
7163
  "alpha": 0.2,
6980
- "offsetX": "0px",
6981
- "offsetY": "1px",
6982
- "blur": "0px",
6983
- "spread": "0px",
7164
+ "offsetX": {
7165
+ "value": 0,
7166
+ "unit": "px"
7167
+ },
7168
+ "offsetY": {
7169
+ "value": 1,
7170
+ "unit": "px"
7171
+ },
7172
+ "blur": {
7173
+ "value": 0,
7174
+ "unit": "px"
7175
+ },
7176
+ "spread": {
7177
+ "value": 0,
7178
+ "unit": "px"
7179
+ },
6984
7180
  "inset": true
6985
7181
  }
6986
7182
  ],
@@ -6996,10 +7192,22 @@
6996
7192
  {
6997
7193
  "color": "{base.color.orange.9}",
6998
7194
  "alpha": 0.2,
6999
- "offsetX": "0px",
7000
- "offsetY": "1px",
7001
- "blur": "0px",
7002
- "spread": "0px",
7195
+ "offsetX": {
7196
+ "value": 0,
7197
+ "unit": "px"
7198
+ },
7199
+ "offsetY": {
7200
+ "value": 1,
7201
+ "unit": "px"
7202
+ },
7203
+ "blur": {
7204
+ "value": 0,
7205
+ "unit": "px"
7206
+ },
7207
+ "spread": {
7208
+ "value": 0,
7209
+ "unit": "px"
7210
+ },
7003
7211
  "inset": true
7004
7212
  }
7005
7213
  ],
@@ -7012,10 +7220,22 @@
7012
7220
  {
7013
7221
  "color": "{base.color.transparent}",
7014
7222
  "alpha": 0,
7015
- "offsetX": "0px",
7016
- "offsetY": "0px",
7017
- "blur": "0px",
7018
- "spread": "0px",
7223
+ "offsetX": {
7224
+ "value": 0,
7225
+ "unit": "px"
7226
+ },
7227
+ "offsetY": {
7228
+ "value": 0,
7229
+ "unit": "px"
7230
+ },
7231
+ "blur": {
7232
+ "value": 0,
7233
+ "unit": "px"
7234
+ },
7235
+ "spread": {
7236
+ "value": 0,
7237
+ "unit": "px"
7238
+ },
7019
7239
  "inset": false
7020
7240
  }
7021
7241
  ],
@@ -7391,7 +7611,7 @@
7391
7611
  },
7392
7612
  "button-default-shadow-resting": {
7393
7613
  "key": "{button.default.shadow.resting}",
7394
- "$value": "0px 1px 0px 0px #1f23280a",
7614
+ "$value": "0 1px 0 0 #1f23280a",
7395
7615
  "$type": "shadow",
7396
7616
  "$extensions": {
7397
7617
  "org.primer.figma": {
@@ -7404,10 +7624,22 @@
7404
7624
  {
7405
7625
  "color": "#ffffff00",
7406
7626
  "alpha": 0,
7407
- "offsetX": "0px",
7408
- "offsetY": "0px",
7409
- "blur": "0px",
7410
- "spread": "0px",
7627
+ "offsetX": {
7628
+ "value": 0,
7629
+ "unit": "px"
7630
+ },
7631
+ "offsetY": {
7632
+ "value": 0,
7633
+ "unit": "px"
7634
+ },
7635
+ "blur": {
7636
+ "value": 0,
7637
+ "unit": "px"
7638
+ },
7639
+ "spread": {
7640
+ "value": 0,
7641
+ "unit": "px"
7642
+ },
7411
7643
  "inset": false
7412
7644
  }
7413
7645
  ],
@@ -7424,10 +7656,22 @@
7424
7656
  {
7425
7657
  "color": "{base.color.neutral.13}",
7426
7658
  "alpha": 0.04,
7427
- "offsetX": "0px",
7428
- "offsetY": "1px",
7429
- "blur": "0px",
7430
- "spread": "0px",
7659
+ "offsetX": {
7660
+ "value": 0,
7661
+ "unit": "px"
7662
+ },
7663
+ "offsetY": {
7664
+ "value": 1,
7665
+ "unit": "px"
7666
+ },
7667
+ "blur": {
7668
+ "value": 0,
7669
+ "unit": "px"
7670
+ },
7671
+ "spread": {
7672
+ "value": 0,
7673
+ "unit": "px"
7674
+ },
7431
7675
  "inset": false
7432
7676
  }
7433
7677
  ],
@@ -7443,10 +7687,22 @@
7443
7687
  {
7444
7688
  "color": "{base.color.transparent}",
7445
7689
  "alpha": 0,
7446
- "offsetX": "0px",
7447
- "offsetY": "0px",
7448
- "blur": "0px",
7449
- "spread": "0px",
7690
+ "offsetX": {
7691
+ "value": 0,
7692
+ "unit": "px"
7693
+ },
7694
+ "offsetY": {
7695
+ "value": 0,
7696
+ "unit": "px"
7697
+ },
7698
+ "blur": {
7699
+ "value": 0,
7700
+ "unit": "px"
7701
+ },
7702
+ "spread": {
7703
+ "value": 0,
7704
+ "unit": "px"
7705
+ },
7450
7706
  "inset": false
7451
7707
  }
7452
7708
  ],
@@ -9150,7 +9406,7 @@
9150
9406
  },
9151
9407
  "button-outline-shadow-selected": {
9152
9408
  "key": "{button.outline.shadow.selected}",
9153
- "$value": "inset 0px 1px 0px 0px #00215533",
9409
+ "$value": "inset 0 1px 0 0 #00215533",
9154
9410
  "$type": "shadow",
9155
9411
  "$extensions": {
9156
9412
  "org.primer.figma": {
@@ -9163,10 +9419,22 @@
9163
9419
  {
9164
9420
  "color": "#ffffff00",
9165
9421
  "alpha": 0,
9166
- "offsetX": "0px",
9167
- "offsetY": "0px",
9168
- "blur": "0px",
9169
- "spread": "0px",
9422
+ "offsetX": {
9423
+ "value": 0,
9424
+ "unit": "px"
9425
+ },
9426
+ "offsetY": {
9427
+ "value": 0,
9428
+ "unit": "px"
9429
+ },
9430
+ "blur": {
9431
+ "value": 0,
9432
+ "unit": "px"
9433
+ },
9434
+ "spread": {
9435
+ "value": 0,
9436
+ "unit": "px"
9437
+ },
9170
9438
  "inset": false
9171
9439
  }
9172
9440
  ],
@@ -9183,10 +9451,22 @@
9183
9451
  {
9184
9452
  "color": "{base.color.blue.9}",
9185
9453
  "alpha": 0.2,
9186
- "offsetX": "0px",
9187
- "offsetY": "1px",
9188
- "blur": "0px",
9189
- "spread": "0px",
9454
+ "offsetX": {
9455
+ "value": 0,
9456
+ "unit": "px"
9457
+ },
9458
+ "offsetY": {
9459
+ "value": 1,
9460
+ "unit": "px"
9461
+ },
9462
+ "blur": {
9463
+ "value": 0,
9464
+ "unit": "px"
9465
+ },
9466
+ "spread": {
9467
+ "value": 0,
9468
+ "unit": "px"
9469
+ },
9190
9470
  "inset": true
9191
9471
  }
9192
9472
  ],
@@ -9202,10 +9482,22 @@
9202
9482
  {
9203
9483
  "color": "{base.color.transparent}",
9204
9484
  "alpha": 0,
9205
- "offsetX": "0px",
9206
- "offsetY": "0px",
9207
- "blur": "0px",
9208
- "spread": "0px",
9485
+ "offsetX": {
9486
+ "value": 0,
9487
+ "unit": "px"
9488
+ },
9489
+ "offsetY": {
9490
+ "value": 0,
9491
+ "unit": "px"
9492
+ },
9493
+ "blur": {
9494
+ "value": 0,
9495
+ "unit": "px"
9496
+ },
9497
+ "spread": {
9498
+ "value": 0,
9499
+ "unit": "px"
9500
+ },
9209
9501
  "inset": false
9210
9502
  }
9211
9503
  ],
@@ -10358,7 +10650,7 @@
10358
10650
  },
10359
10651
  "button-primary-shadow-selected": {
10360
10652
  "key": "{button.primary.shadow.selected}",
10361
- "$value": "inset 0px 1px 0px 0px #002d114d",
10653
+ "$value": "inset 0 1px 0 0 #002d114d",
10362
10654
  "$type": "shadow",
10363
10655
  "$extensions": {
10364
10656
  "org.primer.figma": {
@@ -10371,10 +10663,22 @@
10371
10663
  {
10372
10664
  "color": "#002155",
10373
10665
  "alpha": 0.3,
10374
- "offsetX": "0px",
10375
- "offsetY": "1px",
10376
- "blur": "0px",
10377
- "spread": "0px",
10666
+ "offsetX": {
10667
+ "value": 0,
10668
+ "unit": "px"
10669
+ },
10670
+ "offsetY": {
10671
+ "value": 1,
10672
+ "unit": "px"
10673
+ },
10674
+ "blur": {
10675
+ "value": 0,
10676
+ "unit": "px"
10677
+ },
10678
+ "spread": {
10679
+ "value": 0,
10680
+ "unit": "px"
10681
+ },
10378
10682
  "inset": true
10379
10683
  }
10380
10684
  ],
@@ -10387,10 +10691,22 @@
10387
10691
  {
10388
10692
  "color": "#002155",
10389
10693
  "alpha": 0.3,
10390
- "offsetX": "0px",
10391
- "offsetY": "1px",
10392
- "blur": "0px",
10393
- "spread": "0px",
10694
+ "offsetX": {
10695
+ "value": 0,
10696
+ "unit": "px"
10697
+ },
10698
+ "offsetY": {
10699
+ "value": 1,
10700
+ "unit": "px"
10701
+ },
10702
+ "blur": {
10703
+ "value": 0,
10704
+ "unit": "px"
10705
+ },
10706
+ "spread": {
10707
+ "value": 0,
10708
+ "unit": "px"
10709
+ },
10394
10710
  "inset": true
10395
10711
  }
10396
10712
  ],
@@ -10403,10 +10719,22 @@
10403
10719
  {
10404
10720
  "color": "#ffffff00",
10405
10721
  "alpha": 0,
10406
- "offsetX": "0px",
10407
- "offsetY": "0px",
10408
- "blur": "0px",
10409
- "spread": "0px",
10722
+ "offsetX": {
10723
+ "value": 0,
10724
+ "unit": "px"
10725
+ },
10726
+ "offsetY": {
10727
+ "value": 0,
10728
+ "unit": "px"
10729
+ },
10730
+ "blur": {
10731
+ "value": 0,
10732
+ "unit": "px"
10733
+ },
10734
+ "spread": {
10735
+ "value": 0,
10736
+ "unit": "px"
10737
+ },
10410
10738
  "inset": false
10411
10739
  }
10412
10740
  ],
@@ -10423,10 +10751,22 @@
10423
10751
  {
10424
10752
  "color": "{base.color.green.9}",
10425
10753
  "alpha": 0.3,
10426
- "offsetX": "0px",
10427
- "offsetY": "1px",
10428
- "blur": "0px",
10429
- "spread": "0px",
10754
+ "offsetX": {
10755
+ "value": 0,
10756
+ "unit": "px"
10757
+ },
10758
+ "offsetY": {
10759
+ "value": 1,
10760
+ "unit": "px"
10761
+ },
10762
+ "blur": {
10763
+ "value": 0,
10764
+ "unit": "px"
10765
+ },
10766
+ "spread": {
10767
+ "value": 0,
10768
+ "unit": "px"
10769
+ },
10430
10770
  "inset": true
10431
10771
  }
10432
10772
  ],
@@ -10442,10 +10782,22 @@
10442
10782
  {
10443
10783
  "color": "{base.color.blue.9}",
10444
10784
  "alpha": 0.3,
10445
- "offsetX": "0px",
10446
- "offsetY": "1px",
10447
- "blur": "0px",
10448
- "spread": "0px",
10785
+ "offsetX": {
10786
+ "value": 0,
10787
+ "unit": "px"
10788
+ },
10789
+ "offsetY": {
10790
+ "value": 1,
10791
+ "unit": "px"
10792
+ },
10793
+ "blur": {
10794
+ "value": 0,
10795
+ "unit": "px"
10796
+ },
10797
+ "spread": {
10798
+ "value": 0,
10799
+ "unit": "px"
10800
+ },
10449
10801
  "inset": true
10450
10802
  }
10451
10803
  ],
@@ -10458,10 +10810,22 @@
10458
10810
  {
10459
10811
  "color": "{base.color.blue.9}",
10460
10812
  "alpha": 0.3,
10461
- "offsetX": "0px",
10462
- "offsetY": "1px",
10463
- "blur": "0px",
10464
- "spread": "0px",
10813
+ "offsetX": {
10814
+ "value": 0,
10815
+ "unit": "px"
10816
+ },
10817
+ "offsetY": {
10818
+ "value": 1,
10819
+ "unit": "px"
10820
+ },
10821
+ "blur": {
10822
+ "value": 0,
10823
+ "unit": "px"
10824
+ },
10825
+ "spread": {
10826
+ "value": 0,
10827
+ "unit": "px"
10828
+ },
10465
10829
  "inset": true
10466
10830
  }
10467
10831
  ],
@@ -10474,10 +10838,22 @@
10474
10838
  {
10475
10839
  "color": "{base.color.transparent}",
10476
10840
  "alpha": 0,
10477
- "offsetX": "0px",
10478
- "offsetY": "0px",
10479
- "blur": "0px",
10480
- "spread": "0px",
10841
+ "offsetX": {
10842
+ "value": 0,
10843
+ "unit": "px"
10844
+ },
10845
+ "offsetY": {
10846
+ "value": 0,
10847
+ "unit": "px"
10848
+ },
10849
+ "blur": {
10850
+ "value": 0,
10851
+ "unit": "px"
10852
+ },
10853
+ "spread": {
10854
+ "value": 0,
10855
+ "unit": "px"
10856
+ },
10481
10857
  "inset": false
10482
10858
  }
10483
10859
  ],
@@ -37214,6 +37590,10 @@
37214
37590
  },
37215
37591
  "org.primer.overrides": {
37216
37592
  "dark": "#ffffff"
37593
+ },
37594
+ "org.primer.llm": {
37595
+ "doNotUse": true,
37596
+ "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."
37217
37597
  }
37218
37598
  },
37219
37599
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37230,6 +37610,10 @@
37230
37610
  },
37231
37611
  "org.primer.overrides": {
37232
37612
  "dark": "{base.color.neutral.0}"
37613
+ },
37614
+ "org.primer.llm": {
37615
+ "doNotUse": true,
37616
+ "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."
37233
37617
  }
37234
37618
  },
37235
37619
  "key": "{fgColor.black}"
@@ -38203,6 +38587,10 @@
38203
38587
  },
38204
38588
  "org.primer.overrides": {
38205
38589
  "dark": "#1f2328"
38590
+ },
38591
+ "org.primer.llm": {
38592
+ "doNotUse": true,
38593
+ "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."
38206
38594
  }
38207
38595
  },
38208
38596
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38219,6 +38607,10 @@
38219
38607
  },
38220
38608
  "org.primer.overrides": {
38221
38609
  "dark": "{base.color.neutral.13}"
38610
+ },
38611
+ "org.primer.llm": {
38612
+ "doNotUse": true,
38613
+ "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."
38222
38614
  }
38223
38615
  },
38224
38616
  "key": "{fgColor.white}"
@@ -38244,7 +38636,10 @@
38244
38636
  "$value": {
38245
38637
  "color": "{focus.outlineColor}",
38246
38638
  "style": "solid",
38247
- "width": "2px"
38639
+ "width": {
38640
+ "value": 2,
38641
+ "unit": "px"
38642
+ }
38248
38643
  },
38249
38644
  "$type": "border",
38250
38645
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47395,7 +47790,7 @@
47395
47790
  },
47396
47791
  "shadow-floating-large": {
47397
47792
  "key": "{shadow.floating.large}",
47398
- "$value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
47793
+ "$value": "0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d",
47399
47794
  "$type": "shadow",
47400
47795
  "$description": "Large floating shadow for modals and dialogs",
47401
47796
  "$extensions": {
@@ -47409,18 +47804,42 @@
47409
47804
  {
47410
47805
  "color": "#d1d9e080",
47411
47806
  "alpha": 1,
47412
- "offsetX": "0px",
47413
- "offsetY": "0px",
47414
- "blur": "0px",
47415
- "spread": "1px"
47807
+ "offsetX": {
47808
+ "value": 0,
47809
+ "unit": "px"
47810
+ },
47811
+ "offsetY": {
47812
+ "value": 0,
47813
+ "unit": "px"
47814
+ },
47815
+ "blur": {
47816
+ "value": 0,
47817
+ "unit": "px"
47818
+ },
47819
+ "spread": {
47820
+ "value": 1,
47821
+ "unit": "px"
47822
+ }
47416
47823
  },
47417
47824
  {
47418
47825
  "color": "#ffffff",
47419
47826
  "alpha": 1,
47420
- "offsetX": "0px",
47421
- "offsetY": "24px",
47422
- "blur": "48px",
47423
- "spread": "0px"
47827
+ "offsetX": {
47828
+ "value": 0,
47829
+ "unit": "px"
47830
+ },
47831
+ "offsetY": {
47832
+ "value": 24,
47833
+ "unit": "px"
47834
+ },
47835
+ "blur": {
47836
+ "value": 48,
47837
+ "unit": "px"
47838
+ },
47839
+ "spread": {
47840
+ "value": 0,
47841
+ "unit": "px"
47842
+ }
47424
47843
  }
47425
47844
  ],
47426
47845
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47440,18 +47859,42 @@
47440
47859
  {
47441
47860
  "color": "{overlay.borderColor}",
47442
47861
  "alpha": 0,
47443
- "offsetX": "0px",
47444
- "offsetY": "0px",
47445
- "blur": "0px",
47446
- "spread": "1px"
47862
+ "offsetX": {
47863
+ "value": 0,
47864
+ "unit": "px"
47865
+ },
47866
+ "offsetY": {
47867
+ "value": 0,
47868
+ "unit": "px"
47869
+ },
47870
+ "blur": {
47871
+ "value": 0,
47872
+ "unit": "px"
47873
+ },
47874
+ "spread": {
47875
+ "value": 1,
47876
+ "unit": "px"
47877
+ }
47447
47878
  },
47448
47879
  {
47449
47880
  "color": "{base.color.neutral.12}",
47450
47881
  "alpha": 0.24,
47451
- "offsetX": "0px",
47452
- "offsetY": "40px",
47453
- "blur": "80px",
47454
- "spread": "0px"
47882
+ "offsetX": {
47883
+ "value": 0,
47884
+ "unit": "px"
47885
+ },
47886
+ "offsetY": {
47887
+ "value": 40,
47888
+ "unit": "px"
47889
+ },
47890
+ "blur": {
47891
+ "value": 80,
47892
+ "unit": "px"
47893
+ },
47894
+ "spread": {
47895
+ "value": 0,
47896
+ "unit": "px"
47897
+ }
47455
47898
  }
47456
47899
  ],
47457
47900
  "$type": "shadow",
@@ -47467,18 +47910,42 @@
47467
47910
  {
47468
47911
  "color": "{overlay.borderColor}",
47469
47912
  "alpha": 1,
47470
- "offsetX": "0px",
47471
- "offsetY": "0px",
47472
- "blur": "0px",
47473
- "spread": "1px"
47913
+ "offsetX": {
47914
+ "value": 0,
47915
+ "unit": "px"
47916
+ },
47917
+ "offsetY": {
47918
+ "value": 0,
47919
+ "unit": "px"
47920
+ },
47921
+ "blur": {
47922
+ "value": 0,
47923
+ "unit": "px"
47924
+ },
47925
+ "spread": {
47926
+ "value": 1,
47927
+ "unit": "px"
47928
+ }
47474
47929
  },
47475
47930
  {
47476
47931
  "color": "{base.color.neutral.0}",
47477
47932
  "alpha": 1,
47478
- "offsetX": "0px",
47479
- "offsetY": "24px",
47480
- "blur": "48px",
47481
- "spread": "0px"
47933
+ "offsetX": {
47934
+ "value": 0,
47935
+ "unit": "px"
47936
+ },
47937
+ "offsetY": {
47938
+ "value": 24,
47939
+ "unit": "px"
47940
+ },
47941
+ "blur": {
47942
+ "value": 48,
47943
+ "unit": "px"
47944
+ },
47945
+ "spread": {
47946
+ "value": 0,
47947
+ "unit": "px"
47948
+ }
47482
47949
  }
47483
47950
  ],
47484
47951
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47499,8 +47966,9 @@
47499
47966
  },
47500
47967
  "shadow-floating-legacy": {
47501
47968
  "key": "{shadow.floating.legacy}",
47502
- "$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47969
+ "$value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47503
47970
  "$type": "shadow",
47971
+ "$description": "Legacy floating shadow for backward compatibility",
47504
47972
  "$extensions": {
47505
47973
  "org.primer.figma": {},
47506
47974
  "org.primer.overrides": {
@@ -47509,24 +47977,52 @@
47509
47977
  {
47510
47978
  "color": "#ffffff",
47511
47979
  "alpha": 0.4,
47512
- "offsetX": "0px",
47513
- "offsetY": "6px",
47514
- "blur": "12px",
47515
- "spread": "-3px"
47980
+ "offsetX": {
47981
+ "value": 0,
47982
+ "unit": "px"
47983
+ },
47984
+ "offsetY": {
47985
+ "value": 6,
47986
+ "unit": "px"
47987
+ },
47988
+ "blur": {
47989
+ "value": 12,
47990
+ "unit": "px"
47991
+ },
47992
+ "spread": {
47993
+ "value": -3,
47994
+ "unit": "px"
47995
+ }
47516
47996
  },
47517
47997
  {
47518
47998
  "color": "#ffffff",
47519
47999
  "alpha": 0.4,
47520
- "offsetX": "0px",
47521
- "offsetY": "6px",
47522
- "blur": "18px",
47523
- "spread": "0px"
48000
+ "offsetX": {
48001
+ "value": 0,
48002
+ "unit": "px"
48003
+ },
48004
+ "offsetY": {
48005
+ "value": 6,
48006
+ "unit": "px"
48007
+ },
48008
+ "blur": {
48009
+ "value": 18,
48010
+ "unit": "px"
48011
+ },
48012
+ "spread": {
48013
+ "value": 0,
48014
+ "unit": "px"
48015
+ }
47524
48016
  }
47525
48017
  ],
47526
48018
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47527
48019
  "isSource": true,
47528
48020
  "$type": "shadow"
47529
48021
  }
48022
+ },
48023
+ "org.primer.llm": {
48024
+ "usage": ["legacy-component", "backward-compatibility"],
48025
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47530
48026
  }
47531
48027
  },
47532
48028
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47536,21 +48032,46 @@
47536
48032
  {
47537
48033
  "color": "{base.color.neutral.12}",
47538
48034
  "alpha": 0.04,
47539
- "offsetX": "0px",
47540
- "offsetY": "6px",
47541
- "blur": "12px",
47542
- "spread": "-3px"
48035
+ "offsetX": {
48036
+ "value": 0,
48037
+ "unit": "px"
48038
+ },
48039
+ "offsetY": {
48040
+ "value": 6,
48041
+ "unit": "px"
48042
+ },
48043
+ "blur": {
48044
+ "value": 12,
48045
+ "unit": "px"
48046
+ },
48047
+ "spread": {
48048
+ "value": -3,
48049
+ "unit": "px"
48050
+ }
47543
48051
  },
47544
48052
  {
47545
48053
  "color": "{base.color.neutral.12}",
47546
48054
  "alpha": 0.12,
47547
- "offsetX": "0px",
47548
- "offsetY": "6px",
47549
- "blur": "18px",
47550
- "spread": "0px"
48055
+ "offsetX": {
48056
+ "value": 0,
48057
+ "unit": "px"
48058
+ },
48059
+ "offsetY": {
48060
+ "value": 6,
48061
+ "unit": "px"
48062
+ },
48063
+ "blur": {
48064
+ "value": 18,
48065
+ "unit": "px"
48066
+ },
48067
+ "spread": {
48068
+ "value": 0,
48069
+ "unit": "px"
48070
+ }
47551
48071
  }
47552
48072
  ],
47553
48073
  "$type": "shadow",
48074
+ "$description": "Legacy floating shadow for backward compatibility",
47554
48075
  "$extensions": {
47555
48076
  "org.primer.figma": {},
47556
48077
  "org.primer.overrides": {
@@ -47559,24 +48080,52 @@
47559
48080
  {
47560
48081
  "color": "{base.color.neutral.0}",
47561
48082
  "alpha": 0.4,
47562
- "offsetX": "0px",
47563
- "offsetY": "6px",
47564
- "blur": "12px",
47565
- "spread": "-3px"
48083
+ "offsetX": {
48084
+ "value": 0,
48085
+ "unit": "px"
48086
+ },
48087
+ "offsetY": {
48088
+ "value": 6,
48089
+ "unit": "px"
48090
+ },
48091
+ "blur": {
48092
+ "value": 12,
48093
+ "unit": "px"
48094
+ },
48095
+ "spread": {
48096
+ "value": -3,
48097
+ "unit": "px"
48098
+ }
47566
48099
  },
47567
48100
  {
47568
48101
  "color": "{base.color.neutral.0}",
47569
48102
  "alpha": 0.4,
47570
- "offsetX": "0px",
47571
- "offsetY": "6px",
47572
- "blur": "18px",
47573
- "spread": "0px"
48103
+ "offsetX": {
48104
+ "value": 0,
48105
+ "unit": "px"
48106
+ },
48107
+ "offsetY": {
48108
+ "value": 6,
48109
+ "unit": "px"
48110
+ },
48111
+ "blur": {
48112
+ "value": 18,
48113
+ "unit": "px"
48114
+ },
48115
+ "spread": {
48116
+ "value": 0,
48117
+ "unit": "px"
48118
+ }
47574
48119
  }
47575
48120
  ],
47576
48121
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47577
48122
  "isSource": true,
47578
48123
  "$type": "shadow"
47579
48124
  }
48125
+ },
48126
+ "org.primer.llm": {
48127
+ "usage": ["legacy-component", "backward-compatibility"],
48128
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47580
48129
  }
47581
48130
  },
47582
48131
  "key": "{shadow.floating.legacy}"
@@ -47587,8 +48136,9 @@
47587
48136
  },
47588
48137
  "shadow-floating-medium": {
47589
48138
  "key": "{shadow.floating.medium}",
47590
- "$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",
48139
+ "$value": "0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
47591
48140
  "$type": "shadow",
48141
+ "$description": "Medium floating shadow for popovers and action menus",
47592
48142
  "$extensions": {
47593
48143
  "org.primer.figma": {
47594
48144
  "collection": "mode",
@@ -47600,48 +48150,112 @@
47600
48150
  {
47601
48151
  "color": "#d1d9e080",
47602
48152
  "alpha": 1,
47603
- "offsetX": "0px",
47604
- "offsetY": "0px",
47605
- "blur": "0px",
47606
- "spread": "1px"
48153
+ "offsetX": {
48154
+ "value": 0,
48155
+ "unit": "px"
48156
+ },
48157
+ "offsetY": {
48158
+ "value": 0,
48159
+ "unit": "px"
48160
+ },
48161
+ "blur": {
48162
+ "value": 0,
48163
+ "unit": "px"
48164
+ },
48165
+ "spread": {
48166
+ "value": 1,
48167
+ "unit": "px"
48168
+ }
47607
48169
  },
47608
48170
  {
47609
48171
  "color": "#ffffff",
47610
48172
  "alpha": 0.4,
47611
- "offsetX": "0px",
47612
- "offsetY": "8px",
47613
- "blur": "16px",
47614
- "spread": "-4px"
48173
+ "offsetX": {
48174
+ "value": 0,
48175
+ "unit": "px"
48176
+ },
48177
+ "offsetY": {
48178
+ "value": 8,
48179
+ "unit": "px"
48180
+ },
48181
+ "blur": {
48182
+ "value": 16,
48183
+ "unit": "px"
48184
+ },
48185
+ "spread": {
48186
+ "value": -4,
48187
+ "unit": "px"
48188
+ }
47615
48189
  },
47616
48190
  {
47617
48191
  "color": "#ffffff",
47618
48192
  "alpha": 0.4,
47619
- "offsetX": "0px",
47620
- "offsetY": "4px",
47621
- "blur": "32px",
47622
- "spread": "-4px"
48193
+ "offsetX": {
48194
+ "value": 0,
48195
+ "unit": "px"
48196
+ },
48197
+ "offsetY": {
48198
+ "value": 4,
48199
+ "unit": "px"
48200
+ },
48201
+ "blur": {
48202
+ "value": 32,
48203
+ "unit": "px"
48204
+ },
48205
+ "spread": {
48206
+ "value": -4,
48207
+ "unit": "px"
48208
+ }
47623
48209
  },
47624
48210
  {
47625
48211
  "color": "#ffffff",
47626
48212
  "alpha": 0.4,
47627
- "offsetX": "0px",
47628
- "offsetY": "24px",
47629
- "blur": "48px",
47630
- "spread": "-12px"
48213
+ "offsetX": {
48214
+ "value": 0,
48215
+ "unit": "px"
48216
+ },
48217
+ "offsetY": {
48218
+ "value": 24,
48219
+ "unit": "px"
48220
+ },
48221
+ "blur": {
48222
+ "value": 48,
48223
+ "unit": "px"
48224
+ },
48225
+ "spread": {
48226
+ "value": -12,
48227
+ "unit": "px"
48228
+ }
47631
48229
  },
47632
48230
  {
47633
48231
  "color": "#ffffff",
47634
48232
  "alpha": 0.4,
47635
- "offsetX": "0px",
47636
- "offsetY": "48px",
47637
- "blur": "96px",
47638
- "spread": "-24px"
48233
+ "offsetX": {
48234
+ "value": 0,
48235
+ "unit": "px"
48236
+ },
48237
+ "offsetY": {
48238
+ "value": 48,
48239
+ "unit": "px"
48240
+ },
48241
+ "blur": {
48242
+ "value": 96,
48243
+ "unit": "px"
48244
+ },
48245
+ "spread": {
48246
+ "value": -24,
48247
+ "unit": "px"
48248
+ }
47639
48249
  }
47640
48250
  ],
47641
48251
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47642
48252
  "isSource": true,
47643
48253
  "$type": "shadow"
47644
48254
  }
48255
+ },
48256
+ "org.primer.llm": {
48257
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48258
+ "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."
47645
48259
  }
47646
48260
  },
47647
48261
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47651,45 +48265,106 @@
47651
48265
  {
47652
48266
  "color": "{overlay.borderColor}",
47653
48267
  "alpha": 0,
47654
- "offsetX": "0px",
47655
- "offsetY": "0px",
47656
- "blur": "0px",
47657
- "spread": "1px"
48268
+ "offsetX": {
48269
+ "value": 0,
48270
+ "unit": "px"
48271
+ },
48272
+ "offsetY": {
48273
+ "value": 0,
48274
+ "unit": "px"
48275
+ },
48276
+ "blur": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "spread": {
48281
+ "value": 1,
48282
+ "unit": "px"
48283
+ }
47658
48284
  },
47659
48285
  {
47660
48286
  "color": "{base.color.neutral.12}",
47661
48287
  "alpha": 0.08,
47662
- "offsetX": "0px",
47663
- "offsetY": "8px",
47664
- "blur": "16px",
47665
- "spread": "-4px"
48288
+ "offsetX": {
48289
+ "value": 0,
48290
+ "unit": "px"
48291
+ },
48292
+ "offsetY": {
48293
+ "value": 8,
48294
+ "unit": "px"
48295
+ },
48296
+ "blur": {
48297
+ "value": 16,
48298
+ "unit": "px"
48299
+ },
48300
+ "spread": {
48301
+ "value": -4,
48302
+ "unit": "px"
48303
+ }
47666
48304
  },
47667
48305
  {
47668
48306
  "color": "{base.color.neutral.12}",
47669
48307
  "alpha": 0.08,
47670
- "offsetX": "0px",
47671
- "offsetY": "4px",
47672
- "blur": "32px",
47673
- "spread": "-4px"
48308
+ "offsetX": {
48309
+ "value": 0,
48310
+ "unit": "px"
48311
+ },
48312
+ "offsetY": {
48313
+ "value": 4,
48314
+ "unit": "px"
48315
+ },
48316
+ "blur": {
48317
+ "value": 32,
48318
+ "unit": "px"
48319
+ },
48320
+ "spread": {
48321
+ "value": -4,
48322
+ "unit": "px"
48323
+ }
47674
48324
  },
47675
48325
  {
47676
48326
  "color": "{base.color.neutral.12}",
47677
48327
  "alpha": 0.08,
47678
- "offsetX": "0px",
47679
- "offsetY": "24px",
47680
- "blur": "48px",
47681
- "spread": "-12px"
48328
+ "offsetX": {
48329
+ "value": 0,
48330
+ "unit": "px"
48331
+ },
48332
+ "offsetY": {
48333
+ "value": 24,
48334
+ "unit": "px"
48335
+ },
48336
+ "blur": {
48337
+ "value": 48,
48338
+ "unit": "px"
48339
+ },
48340
+ "spread": {
48341
+ "value": -12,
48342
+ "unit": "px"
48343
+ }
47682
48344
  },
47683
48345
  {
47684
48346
  "color": "{base.color.neutral.12}",
47685
48347
  "alpha": 0.08,
47686
- "offsetX": "0px",
47687
- "offsetY": "48px",
47688
- "blur": "96px",
47689
- "spread": "-24px"
48348
+ "offsetX": {
48349
+ "value": 0,
48350
+ "unit": "px"
48351
+ },
48352
+ "offsetY": {
48353
+ "value": 48,
48354
+ "unit": "px"
48355
+ },
48356
+ "blur": {
48357
+ "value": 96,
48358
+ "unit": "px"
48359
+ },
48360
+ "spread": {
48361
+ "value": -24,
48362
+ "unit": "px"
48363
+ }
47690
48364
  }
47691
48365
  ],
47692
48366
  "$type": "shadow",
48367
+ "$description": "Medium floating shadow for popovers and action menus",
47693
48368
  "$extensions": {
47694
48369
  "org.primer.figma": {
47695
48370
  "collection": "mode",
@@ -47701,48 +48376,112 @@
47701
48376
  {
47702
48377
  "color": "{overlay.borderColor}",
47703
48378
  "alpha": 1,
47704
- "offsetX": "0px",
47705
- "offsetY": "0px",
47706
- "blur": "0px",
47707
- "spread": "1px"
48379
+ "offsetX": {
48380
+ "value": 0,
48381
+ "unit": "px"
48382
+ },
48383
+ "offsetY": {
48384
+ "value": 0,
48385
+ "unit": "px"
48386
+ },
48387
+ "blur": {
48388
+ "value": 0,
48389
+ "unit": "px"
48390
+ },
48391
+ "spread": {
48392
+ "value": 1,
48393
+ "unit": "px"
48394
+ }
47708
48395
  },
47709
48396
  {
47710
48397
  "color": "{base.color.neutral.0}",
47711
48398
  "alpha": 0.4,
47712
- "offsetX": "0px",
47713
- "offsetY": "8px",
47714
- "blur": "16px",
47715
- "spread": "-4px"
48399
+ "offsetX": {
48400
+ "value": 0,
48401
+ "unit": "px"
48402
+ },
48403
+ "offsetY": {
48404
+ "value": 8,
48405
+ "unit": "px"
48406
+ },
48407
+ "blur": {
48408
+ "value": 16,
48409
+ "unit": "px"
48410
+ },
48411
+ "spread": {
48412
+ "value": -4,
48413
+ "unit": "px"
48414
+ }
47716
48415
  },
47717
48416
  {
47718
48417
  "color": "{base.color.neutral.0}",
47719
48418
  "alpha": 0.4,
47720
- "offsetX": "0px",
47721
- "offsetY": "4px",
47722
- "blur": "32px",
47723
- "spread": "-4px"
48419
+ "offsetX": {
48420
+ "value": 0,
48421
+ "unit": "px"
48422
+ },
48423
+ "offsetY": {
48424
+ "value": 4,
48425
+ "unit": "px"
48426
+ },
48427
+ "blur": {
48428
+ "value": 32,
48429
+ "unit": "px"
48430
+ },
48431
+ "spread": {
48432
+ "value": -4,
48433
+ "unit": "px"
48434
+ }
47724
48435
  },
47725
48436
  {
47726
48437
  "color": "{base.color.neutral.0}",
47727
48438
  "alpha": 0.4,
47728
- "offsetX": "0px",
47729
- "offsetY": "24px",
47730
- "blur": "48px",
47731
- "spread": "-12px"
48439
+ "offsetX": {
48440
+ "value": 0,
48441
+ "unit": "px"
48442
+ },
48443
+ "offsetY": {
48444
+ "value": 24,
48445
+ "unit": "px"
48446
+ },
48447
+ "blur": {
48448
+ "value": 48,
48449
+ "unit": "px"
48450
+ },
48451
+ "spread": {
48452
+ "value": -12,
48453
+ "unit": "px"
48454
+ }
47732
48455
  },
47733
48456
  {
47734
48457
  "color": "{base.color.neutral.0}",
47735
48458
  "alpha": 0.4,
47736
- "offsetX": "0px",
47737
- "offsetY": "48px",
47738
- "blur": "96px",
47739
- "spread": "-24px"
48459
+ "offsetX": {
48460
+ "value": 0,
48461
+ "unit": "px"
48462
+ },
48463
+ "offsetY": {
48464
+ "value": 48,
48465
+ "unit": "px"
48466
+ },
48467
+ "blur": {
48468
+ "value": 96,
48469
+ "unit": "px"
48470
+ },
48471
+ "spread": {
48472
+ "value": -24,
48473
+ "unit": "px"
48474
+ }
47740
48475
  }
47741
48476
  ],
47742
48477
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47743
48478
  "isSource": true,
47744
48479
  "$type": "shadow"
47745
48480
  }
48481
+ },
48482
+ "org.primer.llm": {
48483
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48484
+ "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."
47746
48485
  }
47747
48486
  },
47748
48487
  "key": "{shadow.floating.medium}"
@@ -47753,7 +48492,7 @@
47753
48492
  },
47754
48493
  "shadow-floating-small": {
47755
48494
  "key": "{shadow.floating.small}",
47756
- "$value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
48495
+ "$value": "0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47757
48496
  "$type": "shadow",
47758
48497
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47759
48498
  "$extensions": {
@@ -47767,26 +48506,62 @@
47767
48506
  {
47768
48507
  "color": "#d1d9e080",
47769
48508
  "alpha": 1,
47770
- "offsetX": "0px",
47771
- "offsetY": "0px",
47772
- "blur": "0px",
47773
- "spread": "1px"
48509
+ "offsetX": {
48510
+ "value": 0,
48511
+ "unit": "px"
48512
+ },
48513
+ "offsetY": {
48514
+ "value": 0,
48515
+ "unit": "px"
48516
+ },
48517
+ "blur": {
48518
+ "value": 0,
48519
+ "unit": "px"
48520
+ },
48521
+ "spread": {
48522
+ "value": 1,
48523
+ "unit": "px"
48524
+ }
47774
48525
  },
47775
48526
  {
47776
48527
  "color": "#ffffff",
47777
48528
  "alpha": 0.4,
47778
- "offsetX": "0px",
47779
- "offsetY": "6px",
47780
- "blur": "12px",
47781
- "spread": "-3px"
48529
+ "offsetX": {
48530
+ "value": 0,
48531
+ "unit": "px"
48532
+ },
48533
+ "offsetY": {
48534
+ "value": 6,
48535
+ "unit": "px"
48536
+ },
48537
+ "blur": {
48538
+ "value": 12,
48539
+ "unit": "px"
48540
+ },
48541
+ "spread": {
48542
+ "value": -3,
48543
+ "unit": "px"
48544
+ }
47782
48545
  },
47783
48546
  {
47784
48547
  "color": "#ffffff",
47785
48548
  "alpha": 0.4,
47786
- "offsetX": "0px",
47787
- "offsetY": "6px",
47788
- "blur": "18px",
47789
- "spread": "0px"
48549
+ "offsetX": {
48550
+ "value": 0,
48551
+ "unit": "px"
48552
+ },
48553
+ "offsetY": {
48554
+ "value": 6,
48555
+ "unit": "px"
48556
+ },
48557
+ "blur": {
48558
+ "value": 18,
48559
+ "unit": "px"
48560
+ },
48561
+ "spread": {
48562
+ "value": 0,
48563
+ "unit": "px"
48564
+ }
47790
48565
  }
47791
48566
  ],
47792
48567
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47806,26 +48581,62 @@
47806
48581
  {
47807
48582
  "color": "{overlay.borderColor}",
47808
48583
  "alpha": 0.5,
47809
- "offsetX": "0px",
47810
- "offsetY": "0px",
47811
- "blur": "0px",
47812
- "spread": "1px"
48584
+ "offsetX": {
48585
+ "value": 0,
48586
+ "unit": "px"
48587
+ },
48588
+ "offsetY": {
48589
+ "value": 0,
48590
+ "unit": "px"
48591
+ },
48592
+ "blur": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "spread": {
48597
+ "value": 1,
48598
+ "unit": "px"
48599
+ }
47813
48600
  },
47814
48601
  {
47815
48602
  "color": "{base.color.neutral.12}",
47816
48603
  "alpha": 0.04,
47817
- "offsetX": "0px",
47818
- "offsetY": "6px",
47819
- "blur": "12px",
47820
- "spread": "-3px"
48604
+ "offsetX": {
48605
+ "value": 0,
48606
+ "unit": "px"
48607
+ },
48608
+ "offsetY": {
48609
+ "value": 6,
48610
+ "unit": "px"
48611
+ },
48612
+ "blur": {
48613
+ "value": 12,
48614
+ "unit": "px"
48615
+ },
48616
+ "spread": {
48617
+ "value": -3,
48618
+ "unit": "px"
48619
+ }
47821
48620
  },
47822
48621
  {
47823
48622
  "color": "{base.color.neutral.12}",
47824
48623
  "alpha": 0.12,
47825
- "offsetX": "0px",
47826
- "offsetY": "6px",
47827
- "blur": "18px",
47828
- "spread": "0px"
48624
+ "offsetX": {
48625
+ "value": 0,
48626
+ "unit": "px"
48627
+ },
48628
+ "offsetY": {
48629
+ "value": 6,
48630
+ "unit": "px"
48631
+ },
48632
+ "blur": {
48633
+ "value": 18,
48634
+ "unit": "px"
48635
+ },
48636
+ "spread": {
48637
+ "value": 0,
48638
+ "unit": "px"
48639
+ }
47829
48640
  }
47830
48641
  ],
47831
48642
  "$type": "shadow",
@@ -47841,26 +48652,62 @@
47841
48652
  {
47842
48653
  "color": "{overlay.borderColor}",
47843
48654
  "alpha": 1,
47844
- "offsetX": "0px",
47845
- "offsetY": "0px",
47846
- "blur": "0px",
47847
- "spread": "1px"
48655
+ "offsetX": {
48656
+ "value": 0,
48657
+ "unit": "px"
48658
+ },
48659
+ "offsetY": {
48660
+ "value": 0,
48661
+ "unit": "px"
48662
+ },
48663
+ "blur": {
48664
+ "value": 0,
48665
+ "unit": "px"
48666
+ },
48667
+ "spread": {
48668
+ "value": 1,
48669
+ "unit": "px"
48670
+ }
47848
48671
  },
47849
48672
  {
47850
48673
  "color": "{base.color.neutral.0}",
47851
48674
  "alpha": 0.4,
47852
- "offsetX": "0px",
47853
- "offsetY": "6px",
47854
- "blur": "12px",
47855
- "spread": "-3px"
48675
+ "offsetX": {
48676
+ "value": 0,
48677
+ "unit": "px"
48678
+ },
48679
+ "offsetY": {
48680
+ "value": 6,
48681
+ "unit": "px"
48682
+ },
48683
+ "blur": {
48684
+ "value": 12,
48685
+ "unit": "px"
48686
+ },
48687
+ "spread": {
48688
+ "value": -3,
48689
+ "unit": "px"
48690
+ }
47856
48691
  },
47857
48692
  {
47858
48693
  "color": "{base.color.neutral.0}",
47859
48694
  "alpha": 0.4,
47860
- "offsetX": "0px",
47861
- "offsetY": "6px",
47862
- "blur": "18px",
47863
- "spread": "0px"
48695
+ "offsetX": {
48696
+ "value": 0,
48697
+ "unit": "px"
48698
+ },
48699
+ "offsetY": {
48700
+ "value": 6,
48701
+ "unit": "px"
48702
+ },
48703
+ "blur": {
48704
+ "value": 18,
48705
+ "unit": "px"
48706
+ },
48707
+ "spread": {
48708
+ "value": 0,
48709
+ "unit": "px"
48710
+ }
47864
48711
  }
47865
48712
  ],
47866
48713
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47881,8 +48728,9 @@
47881
48728
  },
47882
48729
  "shadow-floating-xlarge": {
47883
48730
  "key": "{shadow.floating.xlarge}",
47884
- "$value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
48731
+ "$value": "0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52",
47885
48732
  "$type": "shadow",
48733
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47886
48734
  "$extensions": {
47887
48735
  "org.primer.figma": {
47888
48736
  "collection": "mode",
@@ -47894,24 +48742,52 @@
47894
48742
  {
47895
48743
  "color": "#d1d9e080",
47896
48744
  "alpha": 1,
47897
- "offsetX": "0px",
47898
- "offsetY": "0px",
47899
- "blur": "0px",
47900
- "spread": "1px"
48745
+ "offsetX": {
48746
+ "value": 0,
48747
+ "unit": "px"
48748
+ },
48749
+ "offsetY": {
48750
+ "value": 0,
48751
+ "unit": "px"
48752
+ },
48753
+ "blur": {
48754
+ "value": 0,
48755
+ "unit": "px"
48756
+ },
48757
+ "spread": {
48758
+ "value": 1,
48759
+ "unit": "px"
48760
+ }
47901
48761
  },
47902
48762
  {
47903
48763
  "color": "#ffffff",
47904
48764
  "alpha": 1,
47905
- "offsetX": "0px",
47906
- "offsetY": "32px",
47907
- "blur": "64px",
47908
- "spread": "0px"
48765
+ "offsetX": {
48766
+ "value": 0,
48767
+ "unit": "px"
48768
+ },
48769
+ "offsetY": {
48770
+ "value": 32,
48771
+ "unit": "px"
48772
+ },
48773
+ "blur": {
48774
+ "value": 64,
48775
+ "unit": "px"
48776
+ },
48777
+ "spread": {
48778
+ "value": 0,
48779
+ "unit": "px"
48780
+ }
47909
48781
  }
47910
48782
  ],
47911
48783
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47912
48784
  "isSource": true,
47913
48785
  "$type": "shadow"
47914
48786
  }
48787
+ },
48788
+ "org.primer.llm": {
48789
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48790
+ "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."
47915
48791
  }
47916
48792
  },
47917
48793
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47921,21 +48797,46 @@
47921
48797
  {
47922
48798
  "color": "{overlay.borderColor}",
47923
48799
  "alpha": 0,
47924
- "offsetX": "0px",
47925
- "offsetY": "0px",
47926
- "blur": "0px",
47927
- "spread": "1px"
48800
+ "offsetX": {
48801
+ "value": 0,
48802
+ "unit": "px"
48803
+ },
48804
+ "offsetY": {
48805
+ "value": 0,
48806
+ "unit": "px"
48807
+ },
48808
+ "blur": {
48809
+ "value": 0,
48810
+ "unit": "px"
48811
+ },
48812
+ "spread": {
48813
+ "value": 1,
48814
+ "unit": "px"
48815
+ }
47928
48816
  },
47929
48817
  {
47930
48818
  "color": "{base.color.neutral.12}",
47931
48819
  "alpha": 0.32,
47932
- "offsetX": "0px",
47933
- "offsetY": "56px",
47934
- "blur": "112px",
47935
- "spread": "0px"
48820
+ "offsetX": {
48821
+ "value": 0,
48822
+ "unit": "px"
48823
+ },
48824
+ "offsetY": {
48825
+ "value": 56,
48826
+ "unit": "px"
48827
+ },
48828
+ "blur": {
48829
+ "value": 112,
48830
+ "unit": "px"
48831
+ },
48832
+ "spread": {
48833
+ "value": 0,
48834
+ "unit": "px"
48835
+ }
47936
48836
  }
47937
48837
  ],
47938
48838
  "$type": "shadow",
48839
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47939
48840
  "$extensions": {
47940
48841
  "org.primer.figma": {
47941
48842
  "collection": "mode",
@@ -47947,24 +48848,52 @@
47947
48848
  {
47948
48849
  "color": "{overlay.borderColor}",
47949
48850
  "alpha": 1,
47950
- "offsetX": "0px",
47951
- "offsetY": "0px",
47952
- "blur": "0px",
47953
- "spread": "1px"
48851
+ "offsetX": {
48852
+ "value": 0,
48853
+ "unit": "px"
48854
+ },
48855
+ "offsetY": {
48856
+ "value": 0,
48857
+ "unit": "px"
48858
+ },
48859
+ "blur": {
48860
+ "value": 0,
48861
+ "unit": "px"
48862
+ },
48863
+ "spread": {
48864
+ "value": 1,
48865
+ "unit": "px"
48866
+ }
47954
48867
  },
47955
48868
  {
47956
48869
  "color": "{base.color.neutral.0}",
47957
48870
  "alpha": 1,
47958
- "offsetX": "0px",
47959
- "offsetY": "32px",
47960
- "blur": "64px",
47961
- "spread": "0px"
48871
+ "offsetX": {
48872
+ "value": 0,
48873
+ "unit": "px"
48874
+ },
48875
+ "offsetY": {
48876
+ "value": 32,
48877
+ "unit": "px"
48878
+ },
48879
+ "blur": {
48880
+ "value": 64,
48881
+ "unit": "px"
48882
+ },
48883
+ "spread": {
48884
+ "value": 0,
48885
+ "unit": "px"
48886
+ }
47962
48887
  }
47963
48888
  ],
47964
48889
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47965
48890
  "isSource": true,
47966
48891
  "$type": "shadow"
47967
48892
  }
48893
+ },
48894
+ "org.primer.llm": {
48895
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48896
+ "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."
47968
48897
  }
47969
48898
  },
47970
48899
  "key": "{shadow.floating.xlarge}"
@@ -47975,8 +48904,9 @@
47975
48904
  },
47976
48905
  "shadow-inset": {
47977
48906
  "key": "{shadow.inset}",
47978
- "$value": "inset 0px 1px 0px 0px #1f23280a",
48907
+ "$value": "inset 0 1px 0 0 #1f23280a",
47979
48908
  "$type": "shadow",
48909
+ "$description": "Inset shadow for recessed elements",
47980
48910
  "$extensions": {
47981
48911
  "org.primer.figma": {
47982
48912
  "collection": "mode",
@@ -47987,16 +48917,32 @@
47987
48917
  "$value": {
47988
48918
  "color": "#ffffff",
47989
48919
  "alpha": 0.24,
47990
- "offsetX": "0px",
47991
- "offsetY": "1px",
47992
- "blur": "0px",
47993
- "spread": "0px",
48920
+ "offsetX": {
48921
+ "value": 0,
48922
+ "unit": "px"
48923
+ },
48924
+ "offsetY": {
48925
+ "value": 1,
48926
+ "unit": "px"
48927
+ },
48928
+ "blur": {
48929
+ "value": 0,
48930
+ "unit": "px"
48931
+ },
48932
+ "spread": {
48933
+ "value": 0,
48934
+ "unit": "px"
48935
+ },
47994
48936
  "inset": true
47995
48937
  },
47996
48938
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47997
48939
  "isSource": true,
47998
48940
  "$type": "shadow"
47999
48941
  }
48942
+ },
48943
+ "org.primer.llm": {
48944
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48945
+ "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."
48000
48946
  }
48001
48947
  },
48002
48948
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48005,13 +48951,26 @@
48005
48951
  "$value": {
48006
48952
  "color": "{base.color.neutral.13}",
48007
48953
  "alpha": 0.04,
48008
- "offsetX": "0px",
48009
- "offsetY": "1px",
48010
- "blur": "0px",
48011
- "spread": "0px",
48954
+ "offsetX": {
48955
+ "value": 0,
48956
+ "unit": "px"
48957
+ },
48958
+ "offsetY": {
48959
+ "value": 1,
48960
+ "unit": "px"
48961
+ },
48962
+ "blur": {
48963
+ "value": 0,
48964
+ "unit": "px"
48965
+ },
48966
+ "spread": {
48967
+ "value": 0,
48968
+ "unit": "px"
48969
+ },
48012
48970
  "inset": true
48013
48971
  },
48014
48972
  "$type": "shadow",
48973
+ "$description": "Inset shadow for recessed elements",
48015
48974
  "$extensions": {
48016
48975
  "org.primer.figma": {
48017
48976
  "collection": "mode",
@@ -48022,16 +48981,32 @@
48022
48981
  "$value": {
48023
48982
  "color": "{base.color.neutral.0}",
48024
48983
  "alpha": 0.24,
48025
- "offsetX": "0px",
48026
- "offsetY": "1px",
48027
- "blur": "0px",
48028
- "spread": "0px",
48984
+ "offsetX": {
48985
+ "value": 0,
48986
+ "unit": "px"
48987
+ },
48988
+ "offsetY": {
48989
+ "value": 1,
48990
+ "unit": "px"
48991
+ },
48992
+ "blur": {
48993
+ "value": 0,
48994
+ "unit": "px"
48995
+ },
48996
+ "spread": {
48997
+ "value": 0,
48998
+ "unit": "px"
48999
+ },
48029
49000
  "inset": true
48030
49001
  },
48031
49002
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48032
49003
  "isSource": true,
48033
49004
  "$type": "shadow"
48034
49005
  }
49006
+ },
49007
+ "org.primer.llm": {
49008
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
49009
+ "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."
48035
49010
  }
48036
49011
  },
48037
49012
  "key": "{shadow.inset}"
@@ -48042,8 +49017,9 @@
48042
49017
  },
48043
49018
  "shadow-resting-medium": {
48044
49019
  "key": "{shadow.resting.medium}",
48045
- "$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
49020
+ "$value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
48046
49021
  "$type": "shadow",
49022
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48047
49023
  "$extensions": {
48048
49024
  "org.primer.figma": {
48049
49025
  "collection": "mode",
@@ -48055,24 +49031,52 @@
48055
49031
  {
48056
49032
  "color": "#ffffff",
48057
49033
  "alpha": 0.4,
48058
- "offsetX": "0px",
48059
- "offsetY": "1px",
48060
- "blur": "1px",
48061
- "spread": "0px"
49034
+ "offsetX": {
49035
+ "value": 0,
49036
+ "unit": "px"
49037
+ },
49038
+ "offsetY": {
49039
+ "value": 1,
49040
+ "unit": "px"
49041
+ },
49042
+ "blur": {
49043
+ "value": 1,
49044
+ "unit": "px"
49045
+ },
49046
+ "spread": {
49047
+ "value": 0,
49048
+ "unit": "px"
49049
+ }
48062
49050
  },
48063
49051
  {
48064
49052
  "color": "#ffffff",
48065
49053
  "alpha": 0.8,
48066
- "offsetX": "0px",
48067
- "offsetY": "3px",
48068
- "blur": "6px",
48069
- "spread": "0px"
49054
+ "offsetX": {
49055
+ "value": 0,
49056
+ "unit": "px"
49057
+ },
49058
+ "offsetY": {
49059
+ "value": 3,
49060
+ "unit": "px"
49061
+ },
49062
+ "blur": {
49063
+ "value": 6,
49064
+ "unit": "px"
49065
+ },
49066
+ "spread": {
49067
+ "value": 0,
49068
+ "unit": "px"
49069
+ }
48070
49070
  }
48071
49071
  ],
48072
49072
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48073
49073
  "isSource": true,
48074
49074
  "$type": "shadow"
48075
49075
  }
49076
+ },
49077
+ "org.primer.llm": {
49078
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49079
+ "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."
48076
49080
  }
48077
49081
  },
48078
49082
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48082,21 +49086,46 @@
48082
49086
  {
48083
49087
  "color": "{base.color.neutral.12}",
48084
49088
  "alpha": 0.1,
48085
- "offsetX": "0px",
48086
- "offsetY": "1px",
48087
- "blur": "1px",
48088
- "spread": "0px"
49089
+ "offsetX": {
49090
+ "value": 0,
49091
+ "unit": "px"
49092
+ },
49093
+ "offsetY": {
49094
+ "value": 1,
49095
+ "unit": "px"
49096
+ },
49097
+ "blur": {
49098
+ "value": 1,
49099
+ "unit": "px"
49100
+ },
49101
+ "spread": {
49102
+ "value": 0,
49103
+ "unit": "px"
49104
+ }
48089
49105
  },
48090
49106
  {
48091
49107
  "color": "{base.color.neutral.12}",
48092
49108
  "alpha": 0.12,
48093
- "offsetX": "0px",
48094
- "offsetY": "3px",
48095
- "blur": "6px",
48096
- "spread": "0px"
49109
+ "offsetX": {
49110
+ "value": 0,
49111
+ "unit": "px"
49112
+ },
49113
+ "offsetY": {
49114
+ "value": 3,
49115
+ "unit": "px"
49116
+ },
49117
+ "blur": {
49118
+ "value": 6,
49119
+ "unit": "px"
49120
+ },
49121
+ "spread": {
49122
+ "value": 0,
49123
+ "unit": "px"
49124
+ }
48097
49125
  }
48098
49126
  ],
48099
49127
  "$type": "shadow",
49128
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48100
49129
  "$extensions": {
48101
49130
  "org.primer.figma": {
48102
49131
  "collection": "mode",
@@ -48108,24 +49137,52 @@
48108
49137
  {
48109
49138
  "color": "{base.color.neutral.0}",
48110
49139
  "alpha": 0.4,
48111
- "offsetX": "0px",
48112
- "offsetY": "1px",
48113
- "blur": "1px",
48114
- "spread": "0px"
49140
+ "offsetX": {
49141
+ "value": 0,
49142
+ "unit": "px"
49143
+ },
49144
+ "offsetY": {
49145
+ "value": 1,
49146
+ "unit": "px"
49147
+ },
49148
+ "blur": {
49149
+ "value": 1,
49150
+ "unit": "px"
49151
+ },
49152
+ "spread": {
49153
+ "value": 0,
49154
+ "unit": "px"
49155
+ }
48115
49156
  },
48116
49157
  {
48117
49158
  "color": "{base.color.neutral.0}",
48118
49159
  "alpha": 0.8,
48119
- "offsetX": "0px",
48120
- "offsetY": "3px",
48121
- "blur": "6px",
48122
- "spread": "0px"
49160
+ "offsetX": {
49161
+ "value": 0,
49162
+ "unit": "px"
49163
+ },
49164
+ "offsetY": {
49165
+ "value": 3,
49166
+ "unit": "px"
49167
+ },
49168
+ "blur": {
49169
+ "value": 6,
49170
+ "unit": "px"
49171
+ },
49172
+ "spread": {
49173
+ "value": 0,
49174
+ "unit": "px"
49175
+ }
48123
49176
  }
48124
49177
  ],
48125
49178
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48126
49179
  "isSource": true,
48127
49180
  "$type": "shadow"
48128
49181
  }
49182
+ },
49183
+ "org.primer.llm": {
49184
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49185
+ "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."
48129
49186
  }
48130
49187
  },
48131
49188
  "key": "{shadow.resting.medium}"
@@ -48136,8 +49193,9 @@
48136
49193
  },
48137
49194
  "shadow-resting-small": {
48138
49195
  "key": "{shadow.resting.small}",
48139
- "$value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
49196
+ "$value": "0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808",
48140
49197
  "$type": "shadow",
49198
+ "$description": "Small resting shadow for buttons and interactive elements",
48141
49199
  "$extensions": {
48142
49200
  "org.primer.figma": {
48143
49201
  "collection": "mode",
@@ -48149,19 +49207,43 @@
48149
49207
  {
48150
49208
  "color": "#ffffff",
48151
49209
  "alpha": 0.6,
48152
- "offsetX": "0px",
48153
- "offsetY": "1px",
48154
- "blur": "1px",
48155
- "spread": "0px",
49210
+ "offsetX": {
49211
+ "value": 0,
49212
+ "unit": "px"
49213
+ },
49214
+ "offsetY": {
49215
+ "value": 1,
49216
+ "unit": "px"
49217
+ },
49218
+ "blur": {
49219
+ "value": 1,
49220
+ "unit": "px"
49221
+ },
49222
+ "spread": {
49223
+ "value": 0,
49224
+ "unit": "px"
49225
+ },
48156
49226
  "inset": false
48157
49227
  },
48158
49228
  {
48159
49229
  "color": "#ffffff",
48160
49230
  "alpha": 0.6,
48161
- "offsetX": "0px",
48162
- "offsetY": "1px",
48163
- "blur": "3px",
48164
- "spread": "0px",
49231
+ "offsetX": {
49232
+ "value": 0,
49233
+ "unit": "px"
49234
+ },
49235
+ "offsetY": {
49236
+ "value": 1,
49237
+ "unit": "px"
49238
+ },
49239
+ "blur": {
49240
+ "value": 3,
49241
+ "unit": "px"
49242
+ },
49243
+ "spread": {
49244
+ "value": 0,
49245
+ "unit": "px"
49246
+ },
48165
49247
  "inset": false
48166
49248
  }
48167
49249
  ],
@@ -48169,6 +49251,10 @@
48169
49251
  "isSource": true,
48170
49252
  "$type": "shadow"
48171
49253
  }
49254
+ },
49255
+ "org.primer.llm": {
49256
+ "usage": ["button", "interactive-card", "clickable-element"],
49257
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48172
49258
  }
48173
49259
  },
48174
49260
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48177,24 +49263,49 @@
48177
49263
  "$value": [
48178
49264
  {
48179
49265
  "color": "{base.color.neutral.13}",
48180
- "alpha": 0.06,
48181
- "offsetX": "0px",
48182
- "offsetY": "1px",
48183
- "blur": "1px",
48184
- "spread": "0px",
49266
+ "alpha": 0.04,
49267
+ "offsetX": {
49268
+ "value": 0,
49269
+ "unit": "px"
49270
+ },
49271
+ "offsetY": {
49272
+ "value": 1,
49273
+ "unit": "px"
49274
+ },
49275
+ "blur": {
49276
+ "value": 1,
49277
+ "unit": "px"
49278
+ },
49279
+ "spread": {
49280
+ "value": 0,
49281
+ "unit": "px"
49282
+ },
48185
49283
  "inset": false
48186
49284
  },
48187
49285
  {
48188
49286
  "color": "{base.color.neutral.13}",
48189
- "alpha": 0.06,
48190
- "offsetX": "0px",
48191
- "offsetY": "1px",
48192
- "blur": "3px",
48193
- "spread": "0px",
49287
+ "alpha": 0.03,
49288
+ "offsetX": {
49289
+ "value": 0,
49290
+ "unit": "px"
49291
+ },
49292
+ "offsetY": {
49293
+ "value": 1,
49294
+ "unit": "px"
49295
+ },
49296
+ "blur": {
49297
+ "value": 2,
49298
+ "unit": "px"
49299
+ },
49300
+ "spread": {
49301
+ "value": 0,
49302
+ "unit": "px"
49303
+ },
48194
49304
  "inset": false
48195
49305
  }
48196
49306
  ],
48197
49307
  "$type": "shadow",
49308
+ "$description": "Small resting shadow for buttons and interactive elements",
48198
49309
  "$extensions": {
48199
49310
  "org.primer.figma": {
48200
49311
  "collection": "mode",
@@ -48206,19 +49317,43 @@
48206
49317
  {
48207
49318
  "color": "{base.color.neutral.0}",
48208
49319
  "alpha": 0.6,
48209
- "offsetX": "0px",
48210
- "offsetY": "1px",
48211
- "blur": "1px",
48212
- "spread": "0px",
49320
+ "offsetX": {
49321
+ "value": 0,
49322
+ "unit": "px"
49323
+ },
49324
+ "offsetY": {
49325
+ "value": 1,
49326
+ "unit": "px"
49327
+ },
49328
+ "blur": {
49329
+ "value": 1,
49330
+ "unit": "px"
49331
+ },
49332
+ "spread": {
49333
+ "value": 0,
49334
+ "unit": "px"
49335
+ },
48213
49336
  "inset": false
48214
49337
  },
48215
49338
  {
48216
49339
  "color": "{base.color.neutral.0}",
48217
49340
  "alpha": 0.6,
48218
- "offsetX": "0px",
48219
- "offsetY": "1px",
48220
- "blur": "3px",
48221
- "spread": "0px",
49341
+ "offsetX": {
49342
+ "value": 0,
49343
+ "unit": "px"
49344
+ },
49345
+ "offsetY": {
49346
+ "value": 1,
49347
+ "unit": "px"
49348
+ },
49349
+ "blur": {
49350
+ "value": 3,
49351
+ "unit": "px"
49352
+ },
49353
+ "spread": {
49354
+ "value": 0,
49355
+ "unit": "px"
49356
+ },
48222
49357
  "inset": false
48223
49358
  }
48224
49359
  ],
@@ -48226,6 +49361,10 @@
48226
49361
  "isSource": true,
48227
49362
  "$type": "shadow"
48228
49363
  }
49364
+ },
49365
+ "org.primer.llm": {
49366
+ "usage": ["button", "interactive-card", "clickable-element"],
49367
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48229
49368
  }
48230
49369
  },
48231
49370
  "key": "{shadow.resting.small}"
@@ -48236,8 +49375,9 @@
48236
49375
  },
48237
49376
  "shadow-resting-xsmall": {
48238
49377
  "key": "{shadow.resting.xsmall}",
48239
- "$value": "0px 1px 1px 0px #1f23280f",
49378
+ "$value": "0 1px 1px 0 #1f23280d",
48240
49379
  "$type": "shadow",
49380
+ "$description": "Extra small resting shadow for minimal elevation",
48241
49381
  "$extensions": {
48242
49382
  "org.primer.figma": {
48243
49383
  "collection": "mode",
@@ -48248,16 +49388,32 @@
48248
49388
  "$value": {
48249
49389
  "color": "#ffffff",
48250
49390
  "alpha": 0.8,
48251
- "offsetX": "0px",
48252
- "offsetY": "1px",
48253
- "blur": "1px",
48254
- "spread": "0px",
49391
+ "offsetX": {
49392
+ "value": 0,
49393
+ "unit": "px"
49394
+ },
49395
+ "offsetY": {
49396
+ "value": 1,
49397
+ "unit": "px"
49398
+ },
49399
+ "blur": {
49400
+ "value": 1,
49401
+ "unit": "px"
49402
+ },
49403
+ "spread": {
49404
+ "value": 0,
49405
+ "unit": "px"
49406
+ },
48255
49407
  "inset": false
48256
49408
  },
48257
49409
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48258
49410
  "isSource": true,
48259
49411
  "$type": "shadow"
48260
49412
  }
49413
+ },
49414
+ "org.primer.llm": {
49415
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49416
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48261
49417
  }
48262
49418
  },
48263
49419
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48265,14 +49421,27 @@
48265
49421
  "original": {
48266
49422
  "$value": {
48267
49423
  "color": "{base.color.neutral.13}",
48268
- "alpha": 0.06,
48269
- "offsetX": "0px",
48270
- "offsetY": "1px",
48271
- "blur": "1px",
48272
- "spread": "0px",
49424
+ "alpha": 0.05,
49425
+ "offsetX": {
49426
+ "value": 0,
49427
+ "unit": "px"
49428
+ },
49429
+ "offsetY": {
49430
+ "value": 1,
49431
+ "unit": "px"
49432
+ },
49433
+ "blur": {
49434
+ "value": 1,
49435
+ "unit": "px"
49436
+ },
49437
+ "spread": {
49438
+ "value": 0,
49439
+ "unit": "px"
49440
+ },
48273
49441
  "inset": false
48274
49442
  },
48275
49443
  "$type": "shadow",
49444
+ "$description": "Extra small resting shadow for minimal elevation",
48276
49445
  "$extensions": {
48277
49446
  "org.primer.figma": {
48278
49447
  "collection": "mode",
@@ -48283,16 +49452,32 @@
48283
49452
  "$value": {
48284
49453
  "color": "{base.color.neutral.0}",
48285
49454
  "alpha": 0.8,
48286
- "offsetX": "0px",
48287
- "offsetY": "1px",
48288
- "blur": "1px",
48289
- "spread": "0px",
49455
+ "offsetX": {
49456
+ "value": 0,
49457
+ "unit": "px"
49458
+ },
49459
+ "offsetY": {
49460
+ "value": 1,
49461
+ "unit": "px"
49462
+ },
49463
+ "blur": {
49464
+ "value": 1,
49465
+ "unit": "px"
49466
+ },
49467
+ "spread": {
49468
+ "value": 0,
49469
+ "unit": "px"
49470
+ },
48290
49471
  "inset": false
48291
49472
  },
48292
49473
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48293
49474
  "isSource": true,
48294
49475
  "$type": "shadow"
48295
49476
  }
49477
+ },
49478
+ "org.primer.llm": {
49479
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49480
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48296
49481
  }
48297
49482
  },
48298
49483
  "key": "{shadow.resting.xsmall}"