@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
@@ -167,7 +167,7 @@
167
167
  },
168
168
  "avatar-shadow": {
169
169
  "key": "{avatar.shadow}",
170
- "$value": "0px 0px 0px 2px #0d1117",
170
+ "$value": "0 0 0 2px #0d1117",
171
171
  "$type": "shadow",
172
172
  "$extensions": {
173
173
  "org.primer.figma": {
@@ -180,10 +180,22 @@
180
180
  {
181
181
  "color": "#0d1117",
182
182
  "alpha": 1,
183
- "offsetX": "0px",
184
- "offsetY": "0px",
185
- "blur": "0px",
186
- "spread": "2px"
183
+ "offsetX": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "offsetY": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "blur": {
192
+ "value": 0,
193
+ "unit": "px"
194
+ },
195
+ "spread": {
196
+ "value": 2,
197
+ "unit": "px"
198
+ }
187
199
  }
188
200
  ],
189
201
  "filePath": "src/tokens/component/avatar.json5",
@@ -199,10 +211,22 @@
199
211
  {
200
212
  "color": "{base.color.neutral.1}",
201
213
  "alpha": 1,
202
- "offsetX": "0px",
203
- "offsetY": "0px",
204
- "blur": "0px",
205
- "spread": "2px"
214
+ "offsetX": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "offsetY": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "blur": {
223
+ "value": 0,
224
+ "unit": "px"
225
+ },
226
+ "spread": {
227
+ "value": 2,
228
+ "unit": "px"
229
+ }
206
230
  }
207
231
  ],
208
232
  "$type": "shadow",
@@ -217,10 +241,22 @@
217
241
  {
218
242
  "color": "{base.color.neutral.1}",
219
243
  "alpha": 1,
220
- "offsetX": "0px",
221
- "offsetY": "0px",
222
- "blur": "0px",
223
- "spread": "2px"
244
+ "offsetX": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "offsetY": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "blur": {
253
+ "value": 0,
254
+ "unit": "px"
255
+ },
256
+ "spread": {
257
+ "value": 2,
258
+ "unit": "px"
259
+ }
224
260
  }
225
261
  ],
226
262
  "filePath": "src/tokens/component/avatar.json5",
@@ -552,6 +588,10 @@
552
588
  },
553
589
  "org.primer.overrides": {
554
590
  "dark": "#010409"
591
+ },
592
+ "org.primer.llm": {
593
+ "doNotUse": true,
594
+ "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."
555
595
  }
556
596
  },
557
597
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -568,6 +608,10 @@
568
608
  },
569
609
  "org.primer.overrides": {
570
610
  "dark": "{base.color.neutral.0}"
611
+ },
612
+ "org.primer.llm": {
613
+ "doNotUse": true,
614
+ "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."
571
615
  }
572
616
  },
573
617
  "key": "{bgColor.black}"
@@ -2460,6 +2504,10 @@
2460
2504
  },
2461
2505
  "org.primer.overrides": {
2462
2506
  "dark": "#ffffff"
2507
+ },
2508
+ "org.primer.llm": {
2509
+ "doNotUse": true,
2510
+ "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."
2463
2511
  }
2464
2512
  },
2465
2513
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2476,6 +2524,10 @@
2476
2524
  },
2477
2525
  "org.primer.overrides": {
2478
2526
  "dark": "{base.color.neutral.13}"
2527
+ },
2528
+ "org.primer.llm": {
2529
+ "doNotUse": true,
2530
+ "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."
2479
2531
  }
2480
2532
  },
2481
2533
  "key": "{bgColor.white}"
@@ -2486,7 +2538,11 @@
2486
2538
  },
2487
2539
  "border-accent-emphasis": {
2488
2540
  "key": "{border.accent.emphasis}",
2489
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2541
+ "$value": {
2542
+ "color": "#1f6feb",
2543
+ "style": "solid",
2544
+ "width": ["0.0625rem", "1px"]
2545
+ },
2490
2546
  "$type": "border",
2491
2547
  "filePath": "src/tokens/functional/border/border.json5",
2492
2548
  "isSource": true,
@@ -2505,7 +2561,11 @@
2505
2561
  },
2506
2562
  "border-accent-muted": {
2507
2563
  "key": "{border.accent.muted}",
2508
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2564
+ "$value": {
2565
+ "color": "#388bfd66",
2566
+ "style": "solid",
2567
+ "width": ["0.0625rem", "1px"]
2568
+ },
2509
2569
  "$type": "border",
2510
2570
  "filePath": "src/tokens/functional/border/border.json5",
2511
2571
  "isSource": true,
@@ -2524,7 +2584,11 @@
2524
2584
  },
2525
2585
  "border-attention-emphasis": {
2526
2586
  "key": "{border.attention.emphasis}",
2527
- "$value": "0.00390625rem,0.0625px solid #9e6a03",
2587
+ "$value": {
2588
+ "color": "#9e6a03",
2589
+ "style": "solid",
2590
+ "width": ["0.0625rem", "1px"]
2591
+ },
2528
2592
  "$type": "border",
2529
2593
  "filePath": "src/tokens/functional/border/border.json5",
2530
2594
  "isSource": true,
@@ -2543,7 +2607,11 @@
2543
2607
  },
2544
2608
  "border-attention-muted": {
2545
2609
  "key": "{border.attention.muted}",
2546
- "$value": "0.00390625rem,0.0625px solid #bb800966",
2610
+ "$value": {
2611
+ "color": "#bb800966",
2612
+ "style": "solid",
2613
+ "width": ["0.0625rem", "1px"]
2614
+ },
2547
2615
  "$type": "border",
2548
2616
  "filePath": "src/tokens/functional/border/border.json5",
2549
2617
  "isSource": true,
@@ -2562,7 +2630,11 @@
2562
2630
  },
2563
2631
  "border-closed-emphasis": {
2564
2632
  "key": "{border.closed.emphasis}",
2565
- "$value": "0.00390625rem,0.0625px solid #da3633",
2633
+ "$value": {
2634
+ "color": "#da3633",
2635
+ "style": "solid",
2636
+ "width": ["0.0625rem", "1px"]
2637
+ },
2566
2638
  "$type": "border",
2567
2639
  "filePath": "src/tokens/functional/border/border.json5",
2568
2640
  "isSource": true,
@@ -2577,7 +2649,11 @@
2577
2649
  },
2578
2650
  "border-closed-muted": {
2579
2651
  "key": "{border.closed.muted}",
2580
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2652
+ "$value": {
2653
+ "color": "#f8514966",
2654
+ "style": "solid",
2655
+ "width": ["0.0625rem", "1px"]
2656
+ },
2581
2657
  "$type": "border",
2582
2658
  "filePath": "src/tokens/functional/border/border.json5",
2583
2659
  "isSource": true,
@@ -2592,7 +2668,11 @@
2592
2668
  },
2593
2669
  "border-danger-emphasis": {
2594
2670
  "key": "{border.danger.emphasis}",
2595
- "$value": "0.00390625rem,0.0625px solid #da3633",
2671
+ "$value": {
2672
+ "color": "#da3633",
2673
+ "style": "solid",
2674
+ "width": ["0.0625rem", "1px"]
2675
+ },
2596
2676
  "$type": "border",
2597
2677
  "filePath": "src/tokens/functional/border/border.json5",
2598
2678
  "isSource": true,
@@ -2611,7 +2691,11 @@
2611
2691
  },
2612
2692
  "border-danger-muted": {
2613
2693
  "key": "{border.danger.muted}",
2614
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2694
+ "$value": {
2695
+ "color": "#f8514966",
2696
+ "style": "solid",
2697
+ "width": ["0.0625rem", "1px"]
2698
+ },
2615
2699
  "$type": "border",
2616
2700
  "filePath": "src/tokens/functional/border/border.json5",
2617
2701
  "isSource": true,
@@ -2630,7 +2714,11 @@
2630
2714
  },
2631
2715
  "border-default": {
2632
2716
  "key": "{border.default}",
2633
- "$value": "0.00390625rem,0.0625px solid #3d444d",
2717
+ "$value": {
2718
+ "color": "#3d444d",
2719
+ "style": "solid",
2720
+ "width": ["0.0625rem", "1px"]
2721
+ },
2634
2722
  "$type": "border",
2635
2723
  "filePath": "src/tokens/functional/border/border.json5",
2636
2724
  "isSource": true,
@@ -2649,7 +2737,11 @@
2649
2737
  },
2650
2738
  "border-disabled": {
2651
2739
  "key": "{border.disabled}",
2652
- "$value": "0.00390625rem,0.0625px solid #656c761a",
2740
+ "$value": {
2741
+ "color": "#656c761a",
2742
+ "style": "solid",
2743
+ "width": ["0.0625rem", "1px"]
2744
+ },
2653
2745
  "$type": "border",
2654
2746
  "filePath": "src/tokens/functional/border/border.json5",
2655
2747
  "isSource": true,
@@ -2668,7 +2760,11 @@
2668
2760
  },
2669
2761
  "border-done-emphasis": {
2670
2762
  "key": "{border.done.emphasis}",
2671
- "$value": "0.00390625rem,0.0625px solid #8957e5",
2763
+ "$value": {
2764
+ "color": "#8957e5",
2765
+ "style": "solid",
2766
+ "width": ["0.0625rem", "1px"]
2767
+ },
2672
2768
  "$type": "border",
2673
2769
  "filePath": "src/tokens/functional/border/border.json5",
2674
2770
  "isSource": true,
@@ -2687,7 +2783,11 @@
2687
2783
  },
2688
2784
  "border-done-muted": {
2689
2785
  "key": "{border.done.muted}",
2690
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
2786
+ "$value": {
2787
+ "color": "#ab7df866",
2788
+ "style": "solid",
2789
+ "width": ["0.0625rem", "1px"]
2790
+ },
2691
2791
  "$type": "border",
2692
2792
  "filePath": "src/tokens/functional/border/border.json5",
2693
2793
  "isSource": true,
@@ -2706,7 +2806,11 @@
2706
2806
  },
2707
2807
  "border-emphasis": {
2708
2808
  "key": "{border.emphasis}",
2709
- "$value": "0.00390625rem,0.0625px solid #656c76",
2809
+ "$value": {
2810
+ "color": "#656c76",
2811
+ "style": "solid",
2812
+ "width": ["0.0625rem", "1px"]
2813
+ },
2710
2814
  "$type": "border",
2711
2815
  "filePath": "src/tokens/functional/border/border.json5",
2712
2816
  "isSource": true,
@@ -2725,7 +2829,11 @@
2725
2829
  },
2726
2830
  "border-muted": {
2727
2831
  "key": "{border.muted}",
2728
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2832
+ "$value": {
2833
+ "color": "#3d444db3",
2834
+ "style": "solid",
2835
+ "width": ["0.0625rem", "1px"]
2836
+ },
2729
2837
  "$type": "border",
2730
2838
  "filePath": "src/tokens/functional/border/border.json5",
2731
2839
  "isSource": true,
@@ -2744,7 +2852,11 @@
2744
2852
  },
2745
2853
  "border-neutral-emphasis": {
2746
2854
  "key": "{border.neutral.emphasis}",
2747
- "$value": "0.00390625rem,0.0625px solid #656c76",
2855
+ "$value": {
2856
+ "color": "#656c76",
2857
+ "style": "solid",
2858
+ "width": ["0.0625rem", "1px"]
2859
+ },
2748
2860
  "$type": "border",
2749
2861
  "filePath": "src/tokens/functional/border/border.json5",
2750
2862
  "isSource": true,
@@ -2763,7 +2875,11 @@
2763
2875
  },
2764
2876
  "border-neutral-muted": {
2765
2877
  "key": "{border.neutral.muted}",
2766
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2878
+ "$value": {
2879
+ "color": "#3d444db3",
2880
+ "style": "solid",
2881
+ "width": ["0.0625rem", "1px"]
2882
+ },
2767
2883
  "$type": "border",
2768
2884
  "filePath": "src/tokens/functional/border/border.json5",
2769
2885
  "isSource": true,
@@ -2782,7 +2898,11 @@
2782
2898
  },
2783
2899
  "border-open-emphasis": {
2784
2900
  "key": "{border.open.emphasis}",
2785
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2901
+ "$value": {
2902
+ "color": "#1f6feb",
2903
+ "style": "solid",
2904
+ "width": ["0.0625rem", "1px"]
2905
+ },
2786
2906
  "$type": "border",
2787
2907
  "filePath": "src/tokens/functional/border/border.json5",
2788
2908
  "isSource": true,
@@ -2797,7 +2917,11 @@
2797
2917
  },
2798
2918
  "border-open-muted": {
2799
2919
  "key": "{border.open.muted}",
2800
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2920
+ "$value": {
2921
+ "color": "#388bfd66",
2922
+ "style": "solid",
2923
+ "width": ["0.0625rem", "1px"]
2924
+ },
2801
2925
  "$type": "border",
2802
2926
  "filePath": "src/tokens/functional/border/border.json5",
2803
2927
  "isSource": true,
@@ -2812,7 +2936,11 @@
2812
2936
  },
2813
2937
  "border-severe-emphasis": {
2814
2938
  "key": "{border.severe.emphasis}",
2815
- "$value": "0.00390625rem,0.0625px solid #da3633",
2939
+ "$value": {
2940
+ "color": "#da3633",
2941
+ "style": "solid",
2942
+ "width": ["0.0625rem", "1px"]
2943
+ },
2816
2944
  "$type": "border",
2817
2945
  "filePath": "src/tokens/functional/border/border.json5",
2818
2946
  "isSource": true,
@@ -2831,7 +2959,11 @@
2831
2959
  },
2832
2960
  "border-severe-muted": {
2833
2961
  "key": "{border.severe.muted}",
2834
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2962
+ "$value": {
2963
+ "color": "#f8514966",
2964
+ "style": "solid",
2965
+ "width": ["0.0625rem", "1px"]
2966
+ },
2835
2967
  "$type": "border",
2836
2968
  "filePath": "src/tokens/functional/border/border.json5",
2837
2969
  "isSource": true,
@@ -2850,7 +2982,11 @@
2850
2982
  },
2851
2983
  "border-sponsors-emphasis": {
2852
2984
  "key": "{border.sponsors.emphasis}",
2853
- "$value": "0.00390625rem,0.0625px solid #bf4b8a",
2985
+ "$value": {
2986
+ "color": "#bf4b8a",
2987
+ "style": "solid",
2988
+ "width": ["0.0625rem", "1px"]
2989
+ },
2854
2990
  "$type": "border",
2855
2991
  "filePath": "src/tokens/functional/border/border.json5",
2856
2992
  "isSource": true,
@@ -2869,7 +3005,11 @@
2869
3005
  },
2870
3006
  "border-sponsors-muted": {
2871
3007
  "key": "{border.sponsors.muted}",
2872
- "$value": "0.00390625rem,0.0625px solid #db61a266",
3008
+ "$value": {
3009
+ "color": "#db61a266",
3010
+ "style": "solid",
3011
+ "width": ["0.0625rem", "1px"]
3012
+ },
2873
3013
  "$type": "border",
2874
3014
  "filePath": "src/tokens/functional/border/border.json5",
2875
3015
  "isSource": true,
@@ -2888,7 +3028,11 @@
2888
3028
  },
2889
3029
  "border-success-emphasis": {
2890
3030
  "key": "{border.success.emphasis}",
2891
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
3031
+ "$value": {
3032
+ "color": "#1f6feb",
3033
+ "style": "solid",
3034
+ "width": ["0.0625rem", "1px"]
3035
+ },
2892
3036
  "$type": "border",
2893
3037
  "filePath": "src/tokens/functional/border/border.json5",
2894
3038
  "isSource": true,
@@ -2907,7 +3051,11 @@
2907
3051
  },
2908
3052
  "border-success-muted": {
2909
3053
  "key": "{border.success.muted}",
2910
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
3054
+ "$value": {
3055
+ "color": "#388bfd66",
3056
+ "style": "solid",
3057
+ "width": ["0.0625rem", "1px"]
3058
+ },
2911
3059
  "$type": "border",
2912
3060
  "filePath": "src/tokens/functional/border/border.json5",
2913
3061
  "isSource": true,
@@ -2926,7 +3074,11 @@
2926
3074
  },
2927
3075
  "border-transparent": {
2928
3076
  "key": "{border.transparent}",
2929
- "$value": "0.00390625rem,0.0625px solid #00000000",
3077
+ "$value": {
3078
+ "color": "#00000000",
3079
+ "style": "solid",
3080
+ "width": ["0.0625rem", "1px"]
3081
+ },
2930
3082
  "$type": "border",
2931
3083
  "filePath": "src/tokens/functional/border/border.json5",
2932
3084
  "isSource": true,
@@ -2945,7 +3097,11 @@
2945
3097
  },
2946
3098
  "border-upsell-emphasis": {
2947
3099
  "key": "{border.upsell.emphasis}",
2948
- "$value": "0.00390625rem,0.0625px solid #8957e5",
3100
+ "$value": {
3101
+ "color": "#8957e5",
3102
+ "style": "solid",
3103
+ "width": ["0.0625rem", "1px"]
3104
+ },
2949
3105
  "$type": "border",
2950
3106
  "filePath": "src/tokens/functional/border/border.json5",
2951
3107
  "isSource": true,
@@ -2964,7 +3120,11 @@
2964
3120
  },
2965
3121
  "border-upsell-muted": {
2966
3122
  "key": "{border.upsell.muted}",
2967
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
3123
+ "$value": {
3124
+ "color": "#ab7df866",
3125
+ "style": "solid",
3126
+ "width": ["0.0625rem", "1px"]
3127
+ },
2968
3128
  "$type": "border",
2969
3129
  "filePath": "src/tokens/functional/border/border.json5",
2970
3130
  "isSource": true,
@@ -6956,7 +7116,7 @@
6956
7116
  },
6957
7117
  "button-danger-shadow-selected": {
6958
7118
  "key": "{button.danger.shadow.selected}",
6959
- "$value": "0px 0px 0px 0px #000000",
7119
+ "$value": "0 0 0 0 #000000",
6960
7120
  "$type": "shadow",
6961
7121
  "$extensions": {
6962
7122
  "org.primer.figma": {
@@ -6969,10 +7129,22 @@
6969
7129
  {
6970
7130
  "color": "#3d1300",
6971
7131
  "alpha": 0.2,
6972
- "offsetX": "0px",
6973
- "offsetY": "1px",
6974
- "blur": "0px",
6975
- "spread": "0px",
7132
+ "offsetX": {
7133
+ "value": 0,
7134
+ "unit": "px"
7135
+ },
7136
+ "offsetY": {
7137
+ "value": 1,
7138
+ "unit": "px"
7139
+ },
7140
+ "blur": {
7141
+ "value": 0,
7142
+ "unit": "px"
7143
+ },
7144
+ "spread": {
7145
+ "value": 0,
7146
+ "unit": "px"
7147
+ },
6976
7148
  "inset": true
6977
7149
  }
6978
7150
  ],
@@ -6985,10 +7157,22 @@
6985
7157
  {
6986
7158
  "color": "#00000000",
6987
7159
  "alpha": 0,
6988
- "offsetX": "0px",
6989
- "offsetY": "0px",
6990
- "blur": "0px",
6991
- "spread": "0px",
7160
+ "offsetX": {
7161
+ "value": 0,
7162
+ "unit": "px"
7163
+ },
7164
+ "offsetY": {
7165
+ "value": 0,
7166
+ "unit": "px"
7167
+ },
7168
+ "blur": {
7169
+ "value": 0,
7170
+ "unit": "px"
7171
+ },
7172
+ "spread": {
7173
+ "value": 0,
7174
+ "unit": "px"
7175
+ },
6992
7176
  "inset": false
6993
7177
  }
6994
7178
  ],
@@ -7005,10 +7189,22 @@
7005
7189
  {
7006
7190
  "color": "{base.color.transparent}",
7007
7191
  "alpha": 0,
7008
- "offsetX": "0px",
7009
- "offsetY": "0px",
7010
- "blur": "0px",
7011
- "spread": "0px",
7192
+ "offsetX": {
7193
+ "value": 0,
7194
+ "unit": "px"
7195
+ },
7196
+ "offsetY": {
7197
+ "value": 0,
7198
+ "unit": "px"
7199
+ },
7200
+ "blur": {
7201
+ "value": 0,
7202
+ "unit": "px"
7203
+ },
7204
+ "spread": {
7205
+ "value": 0,
7206
+ "unit": "px"
7207
+ },
7012
7208
  "inset": false
7013
7209
  }
7014
7210
  ],
@@ -7024,10 +7220,22 @@
7024
7220
  {
7025
7221
  "color": "{base.color.orange.9}",
7026
7222
  "alpha": 0.2,
7027
- "offsetX": "0px",
7028
- "offsetY": "1px",
7029
- "blur": "0px",
7030
- "spread": "0px",
7223
+ "offsetX": {
7224
+ "value": 0,
7225
+ "unit": "px"
7226
+ },
7227
+ "offsetY": {
7228
+ "value": 1,
7229
+ "unit": "px"
7230
+ },
7231
+ "blur": {
7232
+ "value": 0,
7233
+ "unit": "px"
7234
+ },
7235
+ "spread": {
7236
+ "value": 0,
7237
+ "unit": "px"
7238
+ },
7031
7239
  "inset": true
7032
7240
  }
7033
7241
  ],
@@ -7040,10 +7248,22 @@
7040
7248
  {
7041
7249
  "color": "{base.color.transparent}",
7042
7250
  "alpha": 0,
7043
- "offsetX": "0px",
7044
- "offsetY": "0px",
7045
- "blur": "0px",
7046
- "spread": "0px",
7251
+ "offsetX": {
7252
+ "value": 0,
7253
+ "unit": "px"
7254
+ },
7255
+ "offsetY": {
7256
+ "value": 0,
7257
+ "unit": "px"
7258
+ },
7259
+ "blur": {
7260
+ "value": 0,
7261
+ "unit": "px"
7262
+ },
7263
+ "spread": {
7264
+ "value": 0,
7265
+ "unit": "px"
7266
+ },
7047
7267
  "inset": false
7048
7268
  }
7049
7269
  ],
@@ -7419,7 +7639,7 @@
7419
7639
  },
7420
7640
  "button-default-shadow-resting": {
7421
7641
  "key": "{button.default.shadow.resting}",
7422
- "$value": "0px 0px 0px 0px #000000",
7642
+ "$value": "0 0 0 0 #000000",
7423
7643
  "$type": "shadow",
7424
7644
  "$extensions": {
7425
7645
  "org.primer.figma": {
@@ -7432,10 +7652,22 @@
7432
7652
  {
7433
7653
  "color": "#00000000",
7434
7654
  "alpha": 0,
7435
- "offsetX": "0px",
7436
- "offsetY": "0px",
7437
- "blur": "0px",
7438
- "spread": "0px",
7655
+ "offsetX": {
7656
+ "value": 0,
7657
+ "unit": "px"
7658
+ },
7659
+ "offsetY": {
7660
+ "value": 0,
7661
+ "unit": "px"
7662
+ },
7663
+ "blur": {
7664
+ "value": 0,
7665
+ "unit": "px"
7666
+ },
7667
+ "spread": {
7668
+ "value": 0,
7669
+ "unit": "px"
7670
+ },
7439
7671
  "inset": false
7440
7672
  }
7441
7673
  ],
@@ -7452,10 +7684,22 @@
7452
7684
  {
7453
7685
  "color": "{base.color.transparent}",
7454
7686
  "alpha": 0,
7455
- "offsetX": "0px",
7456
- "offsetY": "0px",
7457
- "blur": "0px",
7458
- "spread": "0px",
7687
+ "offsetX": {
7688
+ "value": 0,
7689
+ "unit": "px"
7690
+ },
7691
+ "offsetY": {
7692
+ "value": 0,
7693
+ "unit": "px"
7694
+ },
7695
+ "blur": {
7696
+ "value": 0,
7697
+ "unit": "px"
7698
+ },
7699
+ "spread": {
7700
+ "value": 0,
7701
+ "unit": "px"
7702
+ },
7459
7703
  "inset": false
7460
7704
  }
7461
7705
  ],
@@ -7471,10 +7715,22 @@
7471
7715
  {
7472
7716
  "color": "{base.color.transparent}",
7473
7717
  "alpha": 0,
7474
- "offsetX": "0px",
7475
- "offsetY": "0px",
7476
- "blur": "0px",
7477
- "spread": "0px",
7718
+ "offsetX": {
7719
+ "value": 0,
7720
+ "unit": "px"
7721
+ },
7722
+ "offsetY": {
7723
+ "value": 0,
7724
+ "unit": "px"
7725
+ },
7726
+ "blur": {
7727
+ "value": 0,
7728
+ "unit": "px"
7729
+ },
7730
+ "spread": {
7731
+ "value": 0,
7732
+ "unit": "px"
7733
+ },
7478
7734
  "inset": false
7479
7735
  }
7480
7736
  ],
@@ -9178,7 +9434,7 @@
9178
9434
  },
9179
9435
  "button-outline-shadow-selected": {
9180
9436
  "key": "{button.outline.shadow.selected}",
9181
- "$value": "0px 0px 0px 0px #000000",
9437
+ "$value": "0 0 0 0 #000000",
9182
9438
  "$type": "shadow",
9183
9439
  "$extensions": {
9184
9440
  "org.primer.figma": {
@@ -9191,10 +9447,22 @@
9191
9447
  {
9192
9448
  "color": "#00000000",
9193
9449
  "alpha": 0,
9194
- "offsetX": "0px",
9195
- "offsetY": "0px",
9196
- "blur": "0px",
9197
- "spread": "0px",
9450
+ "offsetX": {
9451
+ "value": 0,
9452
+ "unit": "px"
9453
+ },
9454
+ "offsetY": {
9455
+ "value": 0,
9456
+ "unit": "px"
9457
+ },
9458
+ "blur": {
9459
+ "value": 0,
9460
+ "unit": "px"
9461
+ },
9462
+ "spread": {
9463
+ "value": 0,
9464
+ "unit": "px"
9465
+ },
9198
9466
  "inset": false
9199
9467
  }
9200
9468
  ],
@@ -9211,10 +9479,22 @@
9211
9479
  {
9212
9480
  "color": "{base.color.transparent}",
9213
9481
  "alpha": 0,
9214
- "offsetX": "0px",
9215
- "offsetY": "0px",
9216
- "blur": "0px",
9217
- "spread": "0px",
9482
+ "offsetX": {
9483
+ "value": 0,
9484
+ "unit": "px"
9485
+ },
9486
+ "offsetY": {
9487
+ "value": 0,
9488
+ "unit": "px"
9489
+ },
9490
+ "blur": {
9491
+ "value": 0,
9492
+ "unit": "px"
9493
+ },
9494
+ "spread": {
9495
+ "value": 0,
9496
+ "unit": "px"
9497
+ },
9218
9498
  "inset": false
9219
9499
  }
9220
9500
  ],
@@ -9230,10 +9510,22 @@
9230
9510
  {
9231
9511
  "color": "{base.color.transparent}",
9232
9512
  "alpha": 0,
9233
- "offsetX": "0px",
9234
- "offsetY": "0px",
9235
- "blur": "0px",
9236
- "spread": "0px",
9513
+ "offsetX": {
9514
+ "value": 0,
9515
+ "unit": "px"
9516
+ },
9517
+ "offsetY": {
9518
+ "value": 0,
9519
+ "unit": "px"
9520
+ },
9521
+ "blur": {
9522
+ "value": 0,
9523
+ "unit": "px"
9524
+ },
9525
+ "spread": {
9526
+ "value": 0,
9527
+ "unit": "px"
9528
+ },
9237
9529
  "inset": false
9238
9530
  }
9239
9531
  ],
@@ -10384,7 +10676,7 @@
10384
10676
  },
10385
10677
  "button-primary-shadow-selected": {
10386
10678
  "key": "{button.primary.shadow.selected}",
10387
- "$value": "0px 0px 0px 0px #000000",
10679
+ "$value": "0 0 0 0 #000000",
10388
10680
  "$type": "shadow",
10389
10681
  "$extensions": {
10390
10682
  "org.primer.figma": {
@@ -10397,10 +10689,22 @@
10397
10689
  {
10398
10690
  "color": "#051d4d",
10399
10691
  "alpha": 0.3,
10400
- "offsetX": "0px",
10401
- "offsetY": "1px",
10402
- "blur": "0px",
10403
- "spread": "0px",
10692
+ "offsetX": {
10693
+ "value": 0,
10694
+ "unit": "px"
10695
+ },
10696
+ "offsetY": {
10697
+ "value": 1,
10698
+ "unit": "px"
10699
+ },
10700
+ "blur": {
10701
+ "value": 0,
10702
+ "unit": "px"
10703
+ },
10704
+ "spread": {
10705
+ "value": 0,
10706
+ "unit": "px"
10707
+ },
10404
10708
  "inset": true
10405
10709
  }
10406
10710
  ],
@@ -10413,10 +10717,22 @@
10413
10717
  {
10414
10718
  "color": "#051d4d",
10415
10719
  "alpha": 0.3,
10416
- "offsetX": "0px",
10417
- "offsetY": "1px",
10418
- "blur": "0px",
10419
- "spread": "0px",
10720
+ "offsetX": {
10721
+ "value": 0,
10722
+ "unit": "px"
10723
+ },
10724
+ "offsetY": {
10725
+ "value": 1,
10726
+ "unit": "px"
10727
+ },
10728
+ "blur": {
10729
+ "value": 0,
10730
+ "unit": "px"
10731
+ },
10732
+ "spread": {
10733
+ "value": 0,
10734
+ "unit": "px"
10735
+ },
10420
10736
  "inset": true
10421
10737
  }
10422
10738
  ],
@@ -10429,10 +10745,22 @@
10429
10745
  {
10430
10746
  "color": "#00000000",
10431
10747
  "alpha": 0,
10432
- "offsetX": "0px",
10433
- "offsetY": "0px",
10434
- "blur": "0px",
10435
- "spread": "0px",
10748
+ "offsetX": {
10749
+ "value": 0,
10750
+ "unit": "px"
10751
+ },
10752
+ "offsetY": {
10753
+ "value": 0,
10754
+ "unit": "px"
10755
+ },
10756
+ "blur": {
10757
+ "value": 0,
10758
+ "unit": "px"
10759
+ },
10760
+ "spread": {
10761
+ "value": 0,
10762
+ "unit": "px"
10763
+ },
10436
10764
  "inset": false
10437
10765
  }
10438
10766
  ],
@@ -10449,10 +10777,22 @@
10449
10777
  {
10450
10778
  "color": "{base.color.transparent}",
10451
10779
  "alpha": 0,
10452
- "offsetX": "0px",
10453
- "offsetY": "0px",
10454
- "blur": "0px",
10455
- "spread": "0px",
10780
+ "offsetX": {
10781
+ "value": 0,
10782
+ "unit": "px"
10783
+ },
10784
+ "offsetY": {
10785
+ "value": 0,
10786
+ "unit": "px"
10787
+ },
10788
+ "blur": {
10789
+ "value": 0,
10790
+ "unit": "px"
10791
+ },
10792
+ "spread": {
10793
+ "value": 0,
10794
+ "unit": "px"
10795
+ },
10456
10796
  "inset": false
10457
10797
  }
10458
10798
  ],
@@ -10468,10 +10808,22 @@
10468
10808
  {
10469
10809
  "color": "{base.color.blue.9}",
10470
10810
  "alpha": 0.3,
10471
- "offsetX": "0px",
10472
- "offsetY": "1px",
10473
- "blur": "0px",
10474
- "spread": "0px",
10811
+ "offsetX": {
10812
+ "value": 0,
10813
+ "unit": "px"
10814
+ },
10815
+ "offsetY": {
10816
+ "value": 1,
10817
+ "unit": "px"
10818
+ },
10819
+ "blur": {
10820
+ "value": 0,
10821
+ "unit": "px"
10822
+ },
10823
+ "spread": {
10824
+ "value": 0,
10825
+ "unit": "px"
10826
+ },
10475
10827
  "inset": true
10476
10828
  }
10477
10829
  ],
@@ -10484,10 +10836,22 @@
10484
10836
  {
10485
10837
  "color": "{base.color.blue.9}",
10486
10838
  "alpha": 0.3,
10487
- "offsetX": "0px",
10488
- "offsetY": "1px",
10489
- "blur": "0px",
10490
- "spread": "0px",
10839
+ "offsetX": {
10840
+ "value": 0,
10841
+ "unit": "px"
10842
+ },
10843
+ "offsetY": {
10844
+ "value": 1,
10845
+ "unit": "px"
10846
+ },
10847
+ "blur": {
10848
+ "value": 0,
10849
+ "unit": "px"
10850
+ },
10851
+ "spread": {
10852
+ "value": 0,
10853
+ "unit": "px"
10854
+ },
10491
10855
  "inset": true
10492
10856
  }
10493
10857
  ],
@@ -10500,10 +10864,22 @@
10500
10864
  {
10501
10865
  "color": "{base.color.transparent}",
10502
10866
  "alpha": 0,
10503
- "offsetX": "0px",
10504
- "offsetY": "0px",
10505
- "blur": "0px",
10506
- "spread": "0px",
10867
+ "offsetX": {
10868
+ "value": 0,
10869
+ "unit": "px"
10870
+ },
10871
+ "offsetY": {
10872
+ "value": 0,
10873
+ "unit": "px"
10874
+ },
10875
+ "blur": {
10876
+ "value": 0,
10877
+ "unit": "px"
10878
+ },
10879
+ "spread": {
10880
+ "value": 0,
10881
+ "unit": "px"
10882
+ },
10507
10883
  "inset": false
10508
10884
  }
10509
10885
  ],
@@ -37254,6 +37630,10 @@
37254
37630
  },
37255
37631
  "org.primer.overrides": {
37256
37632
  "dark": "#010409"
37633
+ },
37634
+ "org.primer.llm": {
37635
+ "doNotUse": true,
37636
+ "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."
37257
37637
  }
37258
37638
  },
37259
37639
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37270,6 +37650,10 @@
37270
37650
  },
37271
37651
  "org.primer.overrides": {
37272
37652
  "dark": "{base.color.neutral.0}"
37653
+ },
37654
+ "org.primer.llm": {
37655
+ "doNotUse": true,
37656
+ "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."
37273
37657
  }
37274
37658
  },
37275
37659
  "key": "{fgColor.black}"
@@ -38243,6 +38627,10 @@
38243
38627
  },
38244
38628
  "org.primer.overrides": {
38245
38629
  "dark": "#ffffff"
38630
+ },
38631
+ "org.primer.llm": {
38632
+ "doNotUse": true,
38633
+ "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."
38246
38634
  }
38247
38635
  },
38248
38636
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38259,6 +38647,10 @@
38259
38647
  },
38260
38648
  "org.primer.overrides": {
38261
38649
  "dark": "{base.color.neutral.13}"
38650
+ },
38651
+ "org.primer.llm": {
38652
+ "doNotUse": true,
38653
+ "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."
38262
38654
  }
38263
38655
  },
38264
38656
  "key": "{fgColor.white}"
@@ -38284,7 +38676,10 @@
38284
38676
  "$value": {
38285
38677
  "color": "{focus.outlineColor}",
38286
38678
  "style": "solid",
38287
- "width": "2px"
38679
+ "width": {
38680
+ "value": 2,
38681
+ "unit": "px"
38682
+ }
38288
38683
  },
38289
38684
  "$type": "border",
38290
38685
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47443,7 +47838,7 @@
47443
47838
  },
47444
47839
  "shadow-floating-large": {
47445
47840
  "key": "{shadow.floating.large}",
47446
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47841
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47447
47842
  "$type": "shadow",
47448
47843
  "$description": "Large floating shadow for modals and dialogs",
47449
47844
  "$extensions": {
@@ -47457,18 +47852,42 @@
47457
47852
  {
47458
47853
  "color": "#3d444db3",
47459
47854
  "alpha": 1,
47460
- "offsetX": "0px",
47461
- "offsetY": "0px",
47462
- "blur": "0px",
47463
- "spread": "1px"
47855
+ "offsetX": {
47856
+ "value": 0,
47857
+ "unit": "px"
47858
+ },
47859
+ "offsetY": {
47860
+ "value": 0,
47861
+ "unit": "px"
47862
+ },
47863
+ "blur": {
47864
+ "value": 0,
47865
+ "unit": "px"
47866
+ },
47867
+ "spread": {
47868
+ "value": 1,
47869
+ "unit": "px"
47870
+ }
47464
47871
  },
47465
47872
  {
47466
47873
  "color": "#010409",
47467
47874
  "alpha": 1,
47468
- "offsetX": "0px",
47469
- "offsetY": "24px",
47470
- "blur": "48px",
47471
- "spread": "0px"
47875
+ "offsetX": {
47876
+ "value": 0,
47877
+ "unit": "px"
47878
+ },
47879
+ "offsetY": {
47880
+ "value": 24,
47881
+ "unit": "px"
47882
+ },
47883
+ "blur": {
47884
+ "value": 48,
47885
+ "unit": "px"
47886
+ },
47887
+ "spread": {
47888
+ "value": 0,
47889
+ "unit": "px"
47890
+ }
47472
47891
  }
47473
47892
  ],
47474
47893
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47488,18 +47907,42 @@
47488
47907
  {
47489
47908
  "color": "{overlay.borderColor}",
47490
47909
  "alpha": 1,
47491
- "offsetX": "0px",
47492
- "offsetY": "0px",
47493
- "blur": "0px",
47494
- "spread": "1px"
47910
+ "offsetX": {
47911
+ "value": 0,
47912
+ "unit": "px"
47913
+ },
47914
+ "offsetY": {
47915
+ "value": 0,
47916
+ "unit": "px"
47917
+ },
47918
+ "blur": {
47919
+ "value": 0,
47920
+ "unit": "px"
47921
+ },
47922
+ "spread": {
47923
+ "value": 1,
47924
+ "unit": "px"
47925
+ }
47495
47926
  },
47496
47927
  {
47497
47928
  "color": "{base.color.neutral.0}",
47498
47929
  "alpha": 1,
47499
- "offsetX": "0px",
47500
- "offsetY": "24px",
47501
- "blur": "48px",
47502
- "spread": "0px"
47930
+ "offsetX": {
47931
+ "value": 0,
47932
+ "unit": "px"
47933
+ },
47934
+ "offsetY": {
47935
+ "value": 24,
47936
+ "unit": "px"
47937
+ },
47938
+ "blur": {
47939
+ "value": 48,
47940
+ "unit": "px"
47941
+ },
47942
+ "spread": {
47943
+ "value": 0,
47944
+ "unit": "px"
47945
+ }
47503
47946
  }
47504
47947
  ],
47505
47948
  "$type": "shadow",
@@ -47515,18 +47958,42 @@
47515
47958
  {
47516
47959
  "color": "{overlay.borderColor}",
47517
47960
  "alpha": 1,
47518
- "offsetX": "0px",
47519
- "offsetY": "0px",
47520
- "blur": "0px",
47521
- "spread": "1px"
47961
+ "offsetX": {
47962
+ "value": 0,
47963
+ "unit": "px"
47964
+ },
47965
+ "offsetY": {
47966
+ "value": 0,
47967
+ "unit": "px"
47968
+ },
47969
+ "blur": {
47970
+ "value": 0,
47971
+ "unit": "px"
47972
+ },
47973
+ "spread": {
47974
+ "value": 1,
47975
+ "unit": "px"
47976
+ }
47522
47977
  },
47523
47978
  {
47524
47979
  "color": "{base.color.neutral.0}",
47525
47980
  "alpha": 1,
47526
- "offsetX": "0px",
47527
- "offsetY": "24px",
47528
- "blur": "48px",
47529
- "spread": "0px"
47981
+ "offsetX": {
47982
+ "value": 0,
47983
+ "unit": "px"
47984
+ },
47985
+ "offsetY": {
47986
+ "value": 24,
47987
+ "unit": "px"
47988
+ },
47989
+ "blur": {
47990
+ "value": 48,
47991
+ "unit": "px"
47992
+ },
47993
+ "spread": {
47994
+ "value": 0,
47995
+ "unit": "px"
47996
+ }
47530
47997
  }
47531
47998
  ],
47532
47999
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47547,8 +48014,9 @@
47547
48014
  },
47548
48015
  "shadow-floating-legacy": {
47549
48016
  "key": "{shadow.floating.legacy}",
47550
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48017
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47551
48018
  "$type": "shadow",
48019
+ "$description": "Legacy floating shadow for backward compatibility",
47552
48020
  "$extensions": {
47553
48021
  "org.primer.figma": {},
47554
48022
  "org.primer.overrides": {
@@ -47557,24 +48025,52 @@
47557
48025
  {
47558
48026
  "color": "#010409",
47559
48027
  "alpha": 0.4,
47560
- "offsetX": "0px",
47561
- "offsetY": "6px",
47562
- "blur": "12px",
47563
- "spread": "-3px"
48028
+ "offsetX": {
48029
+ "value": 0,
48030
+ "unit": "px"
48031
+ },
48032
+ "offsetY": {
48033
+ "value": 6,
48034
+ "unit": "px"
48035
+ },
48036
+ "blur": {
48037
+ "value": 12,
48038
+ "unit": "px"
48039
+ },
48040
+ "spread": {
48041
+ "value": -3,
48042
+ "unit": "px"
48043
+ }
47564
48044
  },
47565
48045
  {
47566
48046
  "color": "#010409",
47567
48047
  "alpha": 0.4,
47568
- "offsetX": "0px",
47569
- "offsetY": "6px",
47570
- "blur": "18px",
47571
- "spread": "0px"
48048
+ "offsetX": {
48049
+ "value": 0,
48050
+ "unit": "px"
48051
+ },
48052
+ "offsetY": {
48053
+ "value": 6,
48054
+ "unit": "px"
48055
+ },
48056
+ "blur": {
48057
+ "value": 18,
48058
+ "unit": "px"
48059
+ },
48060
+ "spread": {
48061
+ "value": 0,
48062
+ "unit": "px"
48063
+ }
47572
48064
  }
47573
48065
  ],
47574
48066
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47575
48067
  "isSource": true,
47576
48068
  "$type": "shadow"
47577
48069
  }
48070
+ },
48071
+ "org.primer.llm": {
48072
+ "usage": ["legacy-component", "backward-compatibility"],
48073
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47578
48074
  }
47579
48075
  },
47580
48076
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47584,21 +48080,46 @@
47584
48080
  {
47585
48081
  "color": "{base.color.neutral.0}",
47586
48082
  "alpha": 0.4,
47587
- "offsetX": "0px",
47588
- "offsetY": "6px",
47589
- "blur": "12px",
47590
- "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
+ }
47591
48099
  },
47592
48100
  {
47593
48101
  "color": "{base.color.neutral.0}",
47594
48102
  "alpha": 0.4,
47595
- "offsetX": "0px",
47596
- "offsetY": "6px",
47597
- "blur": "18px",
47598
- "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
+ }
47599
48119
  }
47600
48120
  ],
47601
48121
  "$type": "shadow",
48122
+ "$description": "Legacy floating shadow for backward compatibility",
47602
48123
  "$extensions": {
47603
48124
  "org.primer.figma": {},
47604
48125
  "org.primer.overrides": {
@@ -47607,24 +48128,52 @@
47607
48128
  {
47608
48129
  "color": "{base.color.neutral.0}",
47609
48130
  "alpha": 0.4,
47610
- "offsetX": "0px",
47611
- "offsetY": "6px",
47612
- "blur": "12px",
47613
- "spread": "-3px"
48131
+ "offsetX": {
48132
+ "value": 0,
48133
+ "unit": "px"
48134
+ },
48135
+ "offsetY": {
48136
+ "value": 6,
48137
+ "unit": "px"
48138
+ },
48139
+ "blur": {
48140
+ "value": 12,
48141
+ "unit": "px"
48142
+ },
48143
+ "spread": {
48144
+ "value": -3,
48145
+ "unit": "px"
48146
+ }
47614
48147
  },
47615
48148
  {
47616
48149
  "color": "{base.color.neutral.0}",
47617
48150
  "alpha": 0.4,
47618
- "offsetX": "0px",
47619
- "offsetY": "6px",
47620
- "blur": "18px",
47621
- "spread": "0px"
48151
+ "offsetX": {
48152
+ "value": 0,
48153
+ "unit": "px"
48154
+ },
48155
+ "offsetY": {
48156
+ "value": 6,
48157
+ "unit": "px"
48158
+ },
48159
+ "blur": {
48160
+ "value": 18,
48161
+ "unit": "px"
48162
+ },
48163
+ "spread": {
48164
+ "value": 0,
48165
+ "unit": "px"
48166
+ }
47622
48167
  }
47623
48168
  ],
47624
48169
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47625
48170
  "isSource": true,
47626
48171
  "$type": "shadow"
47627
48172
  }
48173
+ },
48174
+ "org.primer.llm": {
48175
+ "usage": ["legacy-component", "backward-compatibility"],
48176
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47628
48177
  }
47629
48178
  },
47630
48179
  "key": "{shadow.floating.legacy}"
@@ -47635,8 +48184,9 @@
47635
48184
  },
47636
48185
  "shadow-floating-medium": {
47637
48186
  "key": "{shadow.floating.medium}",
47638
- "$value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
48187
+ "$value": "0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966",
47639
48188
  "$type": "shadow",
48189
+ "$description": "Medium floating shadow for popovers and action menus",
47640
48190
  "$extensions": {
47641
48191
  "org.primer.figma": {
47642
48192
  "collection": "mode",
@@ -47648,48 +48198,112 @@
47648
48198
  {
47649
48199
  "color": "#3d444db3",
47650
48200
  "alpha": 1,
47651
- "offsetX": "0px",
47652
- "offsetY": "0px",
47653
- "blur": "0px",
47654
- "spread": "1px"
48201
+ "offsetX": {
48202
+ "value": 0,
48203
+ "unit": "px"
48204
+ },
48205
+ "offsetY": {
48206
+ "value": 0,
48207
+ "unit": "px"
48208
+ },
48209
+ "blur": {
48210
+ "value": 0,
48211
+ "unit": "px"
48212
+ },
48213
+ "spread": {
48214
+ "value": 1,
48215
+ "unit": "px"
48216
+ }
47655
48217
  },
47656
48218
  {
47657
48219
  "color": "#010409",
47658
48220
  "alpha": 0.4,
47659
- "offsetX": "0px",
47660
- "offsetY": "8px",
47661
- "blur": "16px",
47662
- "spread": "-4px"
48221
+ "offsetX": {
48222
+ "value": 0,
48223
+ "unit": "px"
48224
+ },
48225
+ "offsetY": {
48226
+ "value": 8,
48227
+ "unit": "px"
48228
+ },
48229
+ "blur": {
48230
+ "value": 16,
48231
+ "unit": "px"
48232
+ },
48233
+ "spread": {
48234
+ "value": -4,
48235
+ "unit": "px"
48236
+ }
47663
48237
  },
47664
48238
  {
47665
48239
  "color": "#010409",
47666
48240
  "alpha": 0.4,
47667
- "offsetX": "0px",
47668
- "offsetY": "4px",
47669
- "blur": "32px",
47670
- "spread": "-4px"
48241
+ "offsetX": {
48242
+ "value": 0,
48243
+ "unit": "px"
48244
+ },
48245
+ "offsetY": {
48246
+ "value": 4,
48247
+ "unit": "px"
48248
+ },
48249
+ "blur": {
48250
+ "value": 32,
48251
+ "unit": "px"
48252
+ },
48253
+ "spread": {
48254
+ "value": -4,
48255
+ "unit": "px"
48256
+ }
47671
48257
  },
47672
48258
  {
47673
48259
  "color": "#010409",
47674
48260
  "alpha": 0.4,
47675
- "offsetX": "0px",
47676
- "offsetY": "24px",
47677
- "blur": "48px",
47678
- "spread": "-12px"
48261
+ "offsetX": {
48262
+ "value": 0,
48263
+ "unit": "px"
48264
+ },
48265
+ "offsetY": {
48266
+ "value": 24,
48267
+ "unit": "px"
48268
+ },
48269
+ "blur": {
48270
+ "value": 48,
48271
+ "unit": "px"
48272
+ },
48273
+ "spread": {
48274
+ "value": -12,
48275
+ "unit": "px"
48276
+ }
47679
48277
  },
47680
48278
  {
47681
48279
  "color": "#010409",
47682
48280
  "alpha": 0.4,
47683
- "offsetX": "0px",
47684
- "offsetY": "48px",
47685
- "blur": "96px",
47686
- "spread": "-24px"
48281
+ "offsetX": {
48282
+ "value": 0,
48283
+ "unit": "px"
48284
+ },
48285
+ "offsetY": {
48286
+ "value": 48,
48287
+ "unit": "px"
48288
+ },
48289
+ "blur": {
48290
+ "value": 96,
48291
+ "unit": "px"
48292
+ },
48293
+ "spread": {
48294
+ "value": -24,
48295
+ "unit": "px"
48296
+ }
47687
48297
  }
47688
48298
  ],
47689
48299
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47690
48300
  "isSource": true,
47691
48301
  "$type": "shadow"
47692
48302
  }
48303
+ },
48304
+ "org.primer.llm": {
48305
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48306
+ "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."
47693
48307
  }
47694
48308
  },
47695
48309
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47699,45 +48313,106 @@
47699
48313
  {
47700
48314
  "color": "{overlay.borderColor}",
47701
48315
  "alpha": 1,
47702
- "offsetX": "0px",
47703
- "offsetY": "0px",
47704
- "blur": "0px",
47705
- "spread": "1px"
48316
+ "offsetX": {
48317
+ "value": 0,
48318
+ "unit": "px"
48319
+ },
48320
+ "offsetY": {
48321
+ "value": 0,
48322
+ "unit": "px"
48323
+ },
48324
+ "blur": {
48325
+ "value": 0,
48326
+ "unit": "px"
48327
+ },
48328
+ "spread": {
48329
+ "value": 1,
48330
+ "unit": "px"
48331
+ }
47706
48332
  },
47707
48333
  {
47708
48334
  "color": "{base.color.neutral.0}",
47709
48335
  "alpha": 0.4,
47710
- "offsetX": "0px",
47711
- "offsetY": "8px",
47712
- "blur": "16px",
47713
- "spread": "-4px"
48336
+ "offsetX": {
48337
+ "value": 0,
48338
+ "unit": "px"
48339
+ },
48340
+ "offsetY": {
48341
+ "value": 8,
48342
+ "unit": "px"
48343
+ },
48344
+ "blur": {
48345
+ "value": 16,
48346
+ "unit": "px"
48347
+ },
48348
+ "spread": {
48349
+ "value": -4,
48350
+ "unit": "px"
48351
+ }
47714
48352
  },
47715
48353
  {
47716
48354
  "color": "{base.color.neutral.0}",
47717
48355
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "4px",
47720
- "blur": "32px",
47721
- "spread": "-4px"
48356
+ "offsetX": {
48357
+ "value": 0,
48358
+ "unit": "px"
48359
+ },
48360
+ "offsetY": {
48361
+ "value": 4,
48362
+ "unit": "px"
48363
+ },
48364
+ "blur": {
48365
+ "value": 32,
48366
+ "unit": "px"
48367
+ },
48368
+ "spread": {
48369
+ "value": -4,
48370
+ "unit": "px"
48371
+ }
47722
48372
  },
47723
48373
  {
47724
48374
  "color": "{base.color.neutral.0}",
47725
48375
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "24px",
47728
- "blur": "48px",
47729
- "spread": "-12px"
48376
+ "offsetX": {
48377
+ "value": 0,
48378
+ "unit": "px"
48379
+ },
48380
+ "offsetY": {
48381
+ "value": 24,
48382
+ "unit": "px"
48383
+ },
48384
+ "blur": {
48385
+ "value": 48,
48386
+ "unit": "px"
48387
+ },
48388
+ "spread": {
48389
+ "value": -12,
48390
+ "unit": "px"
48391
+ }
47730
48392
  },
47731
48393
  {
47732
48394
  "color": "{base.color.neutral.0}",
47733
48395
  "alpha": 0.4,
47734
- "offsetX": "0px",
47735
- "offsetY": "48px",
47736
- "blur": "96px",
47737
- "spread": "-24px"
48396
+ "offsetX": {
48397
+ "value": 0,
48398
+ "unit": "px"
48399
+ },
48400
+ "offsetY": {
48401
+ "value": 48,
48402
+ "unit": "px"
48403
+ },
48404
+ "blur": {
48405
+ "value": 96,
48406
+ "unit": "px"
48407
+ },
48408
+ "spread": {
48409
+ "value": -24,
48410
+ "unit": "px"
48411
+ }
47738
48412
  }
47739
48413
  ],
47740
48414
  "$type": "shadow",
48415
+ "$description": "Medium floating shadow for popovers and action menus",
47741
48416
  "$extensions": {
47742
48417
  "org.primer.figma": {
47743
48418
  "collection": "mode",
@@ -47749,48 +48424,112 @@
47749
48424
  {
47750
48425
  "color": "{overlay.borderColor}",
47751
48426
  "alpha": 1,
47752
- "offsetX": "0px",
47753
- "offsetY": "0px",
47754
- "blur": "0px",
47755
- "spread": "1px"
48427
+ "offsetX": {
48428
+ "value": 0,
48429
+ "unit": "px"
48430
+ },
48431
+ "offsetY": {
48432
+ "value": 0,
48433
+ "unit": "px"
48434
+ },
48435
+ "blur": {
48436
+ "value": 0,
48437
+ "unit": "px"
48438
+ },
48439
+ "spread": {
48440
+ "value": 1,
48441
+ "unit": "px"
48442
+ }
47756
48443
  },
47757
48444
  {
47758
48445
  "color": "{base.color.neutral.0}",
47759
48446
  "alpha": 0.4,
47760
- "offsetX": "0px",
47761
- "offsetY": "8px",
47762
- "blur": "16px",
47763
- "spread": "-4px"
48447
+ "offsetX": {
48448
+ "value": 0,
48449
+ "unit": "px"
48450
+ },
48451
+ "offsetY": {
48452
+ "value": 8,
48453
+ "unit": "px"
48454
+ },
48455
+ "blur": {
48456
+ "value": 16,
48457
+ "unit": "px"
48458
+ },
48459
+ "spread": {
48460
+ "value": -4,
48461
+ "unit": "px"
48462
+ }
47764
48463
  },
47765
48464
  {
47766
48465
  "color": "{base.color.neutral.0}",
47767
48466
  "alpha": 0.4,
47768
- "offsetX": "0px",
47769
- "offsetY": "4px",
47770
- "blur": "32px",
47771
- "spread": "-4px"
48467
+ "offsetX": {
48468
+ "value": 0,
48469
+ "unit": "px"
48470
+ },
48471
+ "offsetY": {
48472
+ "value": 4,
48473
+ "unit": "px"
48474
+ },
48475
+ "blur": {
48476
+ "value": 32,
48477
+ "unit": "px"
48478
+ },
48479
+ "spread": {
48480
+ "value": -4,
48481
+ "unit": "px"
48482
+ }
47772
48483
  },
47773
48484
  {
47774
48485
  "color": "{base.color.neutral.0}",
47775
48486
  "alpha": 0.4,
47776
- "offsetX": "0px",
47777
- "offsetY": "24px",
47778
- "blur": "48px",
47779
- "spread": "-12px"
48487
+ "offsetX": {
48488
+ "value": 0,
48489
+ "unit": "px"
48490
+ },
48491
+ "offsetY": {
48492
+ "value": 24,
48493
+ "unit": "px"
48494
+ },
48495
+ "blur": {
48496
+ "value": 48,
48497
+ "unit": "px"
48498
+ },
48499
+ "spread": {
48500
+ "value": -12,
48501
+ "unit": "px"
48502
+ }
47780
48503
  },
47781
48504
  {
47782
48505
  "color": "{base.color.neutral.0}",
47783
48506
  "alpha": 0.4,
47784
- "offsetX": "0px",
47785
- "offsetY": "48px",
47786
- "blur": "96px",
47787
- "spread": "-24px"
48507
+ "offsetX": {
48508
+ "value": 0,
48509
+ "unit": "px"
48510
+ },
48511
+ "offsetY": {
48512
+ "value": 48,
48513
+ "unit": "px"
48514
+ },
48515
+ "blur": {
48516
+ "value": 96,
48517
+ "unit": "px"
48518
+ },
48519
+ "spread": {
48520
+ "value": -24,
48521
+ "unit": "px"
48522
+ }
47788
48523
  }
47789
48524
  ],
47790
48525
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47791
48526
  "isSource": true,
47792
48527
  "$type": "shadow"
47793
48528
  }
48529
+ },
48530
+ "org.primer.llm": {
48531
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48532
+ "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."
47794
48533
  }
47795
48534
  },
47796
48535
  "key": "{shadow.floating.medium}"
@@ -47801,7 +48540,7 @@
47801
48540
  },
47802
48541
  "shadow-floating-small": {
47803
48542
  "key": "{shadow.floating.small}",
47804
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48543
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47805
48544
  "$type": "shadow",
47806
48545
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47807
48546
  "$extensions": {
@@ -47815,26 +48554,62 @@
47815
48554
  {
47816
48555
  "color": "#3d444db3",
47817
48556
  "alpha": 1,
47818
- "offsetX": "0px",
47819
- "offsetY": "0px",
47820
- "blur": "0px",
47821
- "spread": "1px"
48557
+ "offsetX": {
48558
+ "value": 0,
48559
+ "unit": "px"
48560
+ },
48561
+ "offsetY": {
48562
+ "value": 0,
48563
+ "unit": "px"
48564
+ },
48565
+ "blur": {
48566
+ "value": 0,
48567
+ "unit": "px"
48568
+ },
48569
+ "spread": {
48570
+ "value": 1,
48571
+ "unit": "px"
48572
+ }
47822
48573
  },
47823
48574
  {
47824
48575
  "color": "#010409",
47825
48576
  "alpha": 0.4,
47826
- "offsetX": "0px",
47827
- "offsetY": "6px",
47828
- "blur": "12px",
47829
- "spread": "-3px"
48577
+ "offsetX": {
48578
+ "value": 0,
48579
+ "unit": "px"
48580
+ },
48581
+ "offsetY": {
48582
+ "value": 6,
48583
+ "unit": "px"
48584
+ },
48585
+ "blur": {
48586
+ "value": 12,
48587
+ "unit": "px"
48588
+ },
48589
+ "spread": {
48590
+ "value": -3,
48591
+ "unit": "px"
48592
+ }
47830
48593
  },
47831
48594
  {
47832
48595
  "color": "#010409",
47833
48596
  "alpha": 0.4,
47834
- "offsetX": "0px",
47835
- "offsetY": "6px",
47836
- "blur": "18px",
47837
- "spread": "0px"
48597
+ "offsetX": {
48598
+ "value": 0,
48599
+ "unit": "px"
48600
+ },
48601
+ "offsetY": {
48602
+ "value": 6,
48603
+ "unit": "px"
48604
+ },
48605
+ "blur": {
48606
+ "value": 18,
48607
+ "unit": "px"
48608
+ },
48609
+ "spread": {
48610
+ "value": 0,
48611
+ "unit": "px"
48612
+ }
47838
48613
  }
47839
48614
  ],
47840
48615
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47854,26 +48629,62 @@
47854
48629
  {
47855
48630
  "color": "{overlay.borderColor}",
47856
48631
  "alpha": 1,
47857
- "offsetX": "0px",
47858
- "offsetY": "0px",
47859
- "blur": "0px",
47860
- "spread": "1px"
48632
+ "offsetX": {
48633
+ "value": 0,
48634
+ "unit": "px"
48635
+ },
48636
+ "offsetY": {
48637
+ "value": 0,
48638
+ "unit": "px"
48639
+ },
48640
+ "blur": {
48641
+ "value": 0,
48642
+ "unit": "px"
48643
+ },
48644
+ "spread": {
48645
+ "value": 1,
48646
+ "unit": "px"
48647
+ }
47861
48648
  },
47862
48649
  {
47863
48650
  "color": "{base.color.neutral.0}",
47864
48651
  "alpha": 0.4,
47865
- "offsetX": "0px",
47866
- "offsetY": "6px",
47867
- "blur": "12px",
47868
- "spread": "-3px"
48652
+ "offsetX": {
48653
+ "value": 0,
48654
+ "unit": "px"
48655
+ },
48656
+ "offsetY": {
48657
+ "value": 6,
48658
+ "unit": "px"
48659
+ },
48660
+ "blur": {
48661
+ "value": 12,
48662
+ "unit": "px"
48663
+ },
48664
+ "spread": {
48665
+ "value": -3,
48666
+ "unit": "px"
48667
+ }
47869
48668
  },
47870
48669
  {
47871
48670
  "color": "{base.color.neutral.0}",
47872
48671
  "alpha": 0.4,
47873
- "offsetX": "0px",
47874
- "offsetY": "6px",
47875
- "blur": "18px",
47876
- "spread": "0px"
48672
+ "offsetX": {
48673
+ "value": 0,
48674
+ "unit": "px"
48675
+ },
48676
+ "offsetY": {
48677
+ "value": 6,
48678
+ "unit": "px"
48679
+ },
48680
+ "blur": {
48681
+ "value": 18,
48682
+ "unit": "px"
48683
+ },
48684
+ "spread": {
48685
+ "value": 0,
48686
+ "unit": "px"
48687
+ }
47877
48688
  }
47878
48689
  ],
47879
48690
  "$type": "shadow",
@@ -47889,26 +48700,62 @@
47889
48700
  {
47890
48701
  "color": "{overlay.borderColor}",
47891
48702
  "alpha": 1,
47892
- "offsetX": "0px",
47893
- "offsetY": "0px",
47894
- "blur": "0px",
47895
- "spread": "1px"
48703
+ "offsetX": {
48704
+ "value": 0,
48705
+ "unit": "px"
48706
+ },
48707
+ "offsetY": {
48708
+ "value": 0,
48709
+ "unit": "px"
48710
+ },
48711
+ "blur": {
48712
+ "value": 0,
48713
+ "unit": "px"
48714
+ },
48715
+ "spread": {
48716
+ "value": 1,
48717
+ "unit": "px"
48718
+ }
47896
48719
  },
47897
48720
  {
47898
48721
  "color": "{base.color.neutral.0}",
47899
48722
  "alpha": 0.4,
47900
- "offsetX": "0px",
47901
- "offsetY": "6px",
47902
- "blur": "12px",
47903
- "spread": "-3px"
48723
+ "offsetX": {
48724
+ "value": 0,
48725
+ "unit": "px"
48726
+ },
48727
+ "offsetY": {
48728
+ "value": 6,
48729
+ "unit": "px"
48730
+ },
48731
+ "blur": {
48732
+ "value": 12,
48733
+ "unit": "px"
48734
+ },
48735
+ "spread": {
48736
+ "value": -3,
48737
+ "unit": "px"
48738
+ }
47904
48739
  },
47905
48740
  {
47906
48741
  "color": "{base.color.neutral.0}",
47907
48742
  "alpha": 0.4,
47908
- "offsetX": "0px",
47909
- "offsetY": "6px",
47910
- "blur": "18px",
47911
- "spread": "0px"
48743
+ "offsetX": {
48744
+ "value": 0,
48745
+ "unit": "px"
48746
+ },
48747
+ "offsetY": {
48748
+ "value": 6,
48749
+ "unit": "px"
48750
+ },
48751
+ "blur": {
48752
+ "value": 18,
48753
+ "unit": "px"
48754
+ },
48755
+ "spread": {
48756
+ "value": 0,
48757
+ "unit": "px"
48758
+ }
47912
48759
  }
47913
48760
  ],
47914
48761
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47929,8 +48776,9 @@
47929
48776
  },
47930
48777
  "shadow-floating-xlarge": {
47931
48778
  "key": "{shadow.floating.xlarge}",
47932
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48779
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47933
48780
  "$type": "shadow",
48781
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47934
48782
  "$extensions": {
47935
48783
  "org.primer.figma": {
47936
48784
  "collection": "mode",
@@ -47942,24 +48790,52 @@
47942
48790
  {
47943
48791
  "color": "#3d444db3",
47944
48792
  "alpha": 1,
47945
- "offsetX": "0px",
47946
- "offsetY": "0px",
47947
- "blur": "0px",
47948
- "spread": "1px"
48793
+ "offsetX": {
48794
+ "value": 0,
48795
+ "unit": "px"
48796
+ },
48797
+ "offsetY": {
48798
+ "value": 0,
48799
+ "unit": "px"
48800
+ },
48801
+ "blur": {
48802
+ "value": 0,
48803
+ "unit": "px"
48804
+ },
48805
+ "spread": {
48806
+ "value": 1,
48807
+ "unit": "px"
48808
+ }
47949
48809
  },
47950
48810
  {
47951
48811
  "color": "#010409",
47952
48812
  "alpha": 1,
47953
- "offsetX": "0px",
47954
- "offsetY": "32px",
47955
- "blur": "64px",
47956
- "spread": "0px"
48813
+ "offsetX": {
48814
+ "value": 0,
48815
+ "unit": "px"
48816
+ },
48817
+ "offsetY": {
48818
+ "value": 32,
48819
+ "unit": "px"
48820
+ },
48821
+ "blur": {
48822
+ "value": 64,
48823
+ "unit": "px"
48824
+ },
48825
+ "spread": {
48826
+ "value": 0,
48827
+ "unit": "px"
48828
+ }
47957
48829
  }
47958
48830
  ],
47959
48831
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47960
48832
  "isSource": true,
47961
48833
  "$type": "shadow"
47962
48834
  }
48835
+ },
48836
+ "org.primer.llm": {
48837
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48838
+ "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."
47963
48839
  }
47964
48840
  },
47965
48841
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47969,21 +48845,46 @@
47969
48845
  {
47970
48846
  "color": "{overlay.borderColor}",
47971
48847
  "alpha": 1,
47972
- "offsetX": "0px",
47973
- "offsetY": "0px",
47974
- "blur": "0px",
47975
- "spread": "1px"
48848
+ "offsetX": {
48849
+ "value": 0,
48850
+ "unit": "px"
48851
+ },
48852
+ "offsetY": {
48853
+ "value": 0,
48854
+ "unit": "px"
48855
+ },
48856
+ "blur": {
48857
+ "value": 0,
48858
+ "unit": "px"
48859
+ },
48860
+ "spread": {
48861
+ "value": 1,
48862
+ "unit": "px"
48863
+ }
47976
48864
  },
47977
48865
  {
47978
48866
  "color": "{base.color.neutral.0}",
47979
48867
  "alpha": 1,
47980
- "offsetX": "0px",
47981
- "offsetY": "32px",
47982
- "blur": "64px",
47983
- "spread": "0px"
48868
+ "offsetX": {
48869
+ "value": 0,
48870
+ "unit": "px"
48871
+ },
48872
+ "offsetY": {
48873
+ "value": 32,
48874
+ "unit": "px"
48875
+ },
48876
+ "blur": {
48877
+ "value": 64,
48878
+ "unit": "px"
48879
+ },
48880
+ "spread": {
48881
+ "value": 0,
48882
+ "unit": "px"
48883
+ }
47984
48884
  }
47985
48885
  ],
47986
48886
  "$type": "shadow",
48887
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47987
48888
  "$extensions": {
47988
48889
  "org.primer.figma": {
47989
48890
  "collection": "mode",
@@ -47995,24 +48896,52 @@
47995
48896
  {
47996
48897
  "color": "{overlay.borderColor}",
47997
48898
  "alpha": 1,
47998
- "offsetX": "0px",
47999
- "offsetY": "0px",
48000
- "blur": "0px",
48001
- "spread": "1px"
48899
+ "offsetX": {
48900
+ "value": 0,
48901
+ "unit": "px"
48902
+ },
48903
+ "offsetY": {
48904
+ "value": 0,
48905
+ "unit": "px"
48906
+ },
48907
+ "blur": {
48908
+ "value": 0,
48909
+ "unit": "px"
48910
+ },
48911
+ "spread": {
48912
+ "value": 1,
48913
+ "unit": "px"
48914
+ }
48002
48915
  },
48003
48916
  {
48004
48917
  "color": "{base.color.neutral.0}",
48005
48918
  "alpha": 1,
48006
- "offsetX": "0px",
48007
- "offsetY": "32px",
48008
- "blur": "64px",
48009
- "spread": "0px"
48919
+ "offsetX": {
48920
+ "value": 0,
48921
+ "unit": "px"
48922
+ },
48923
+ "offsetY": {
48924
+ "value": 32,
48925
+ "unit": "px"
48926
+ },
48927
+ "blur": {
48928
+ "value": 64,
48929
+ "unit": "px"
48930
+ },
48931
+ "spread": {
48932
+ "value": 0,
48933
+ "unit": "px"
48934
+ }
48010
48935
  }
48011
48936
  ],
48012
48937
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48013
48938
  "isSource": true,
48014
48939
  "$type": "shadow"
48015
48940
  }
48941
+ },
48942
+ "org.primer.llm": {
48943
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48944
+ "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."
48016
48945
  }
48017
48946
  },
48018
48947
  "key": "{shadow.floating.xlarge}"
@@ -48023,8 +48952,9 @@
48023
48952
  },
48024
48953
  "shadow-inset": {
48025
48954
  "key": "{shadow.inset}",
48026
- "$value": "inset 0px 1px 0px 0px #0104093d",
48955
+ "$value": "inset 0 1px 0 0 #0104093d",
48027
48956
  "$type": "shadow",
48957
+ "$description": "Inset shadow for recessed elements",
48028
48958
  "$extensions": {
48029
48959
  "org.primer.figma": {
48030
48960
  "collection": "mode",
@@ -48035,16 +48965,32 @@
48035
48965
  "$value": {
48036
48966
  "color": "#010409",
48037
48967
  "alpha": 0.24,
48038
- "offsetX": "0px",
48039
- "offsetY": "1px",
48040
- "blur": "0px",
48041
- "spread": "0px",
48968
+ "offsetX": {
48969
+ "value": 0,
48970
+ "unit": "px"
48971
+ },
48972
+ "offsetY": {
48973
+ "value": 1,
48974
+ "unit": "px"
48975
+ },
48976
+ "blur": {
48977
+ "value": 0,
48978
+ "unit": "px"
48979
+ },
48980
+ "spread": {
48981
+ "value": 0,
48982
+ "unit": "px"
48983
+ },
48042
48984
  "inset": true
48043
48985
  },
48044
48986
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48045
48987
  "isSource": true,
48046
48988
  "$type": "shadow"
48047
48989
  }
48990
+ },
48991
+ "org.primer.llm": {
48992
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48993
+ "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."
48048
48994
  }
48049
48995
  },
48050
48996
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48053,13 +48999,26 @@
48053
48999
  "$value": {
48054
49000
  "color": "{base.color.neutral.0}",
48055
49001
  "alpha": 0.24,
48056
- "offsetX": "0px",
48057
- "offsetY": "1px",
48058
- "blur": "0px",
48059
- "spread": "0px",
49002
+ "offsetX": {
49003
+ "value": 0,
49004
+ "unit": "px"
49005
+ },
49006
+ "offsetY": {
49007
+ "value": 1,
49008
+ "unit": "px"
49009
+ },
49010
+ "blur": {
49011
+ "value": 0,
49012
+ "unit": "px"
49013
+ },
49014
+ "spread": {
49015
+ "value": 0,
49016
+ "unit": "px"
49017
+ },
48060
49018
  "inset": true
48061
49019
  },
48062
49020
  "$type": "shadow",
49021
+ "$description": "Inset shadow for recessed elements",
48063
49022
  "$extensions": {
48064
49023
  "org.primer.figma": {
48065
49024
  "collection": "mode",
@@ -48070,16 +49029,32 @@
48070
49029
  "$value": {
48071
49030
  "color": "{base.color.neutral.0}",
48072
49031
  "alpha": 0.24,
48073
- "offsetX": "0px",
48074
- "offsetY": "1px",
48075
- "blur": "0px",
48076
- "spread": "0px",
49032
+ "offsetX": {
49033
+ "value": 0,
49034
+ "unit": "px"
49035
+ },
49036
+ "offsetY": {
49037
+ "value": 1,
49038
+ "unit": "px"
49039
+ },
49040
+ "blur": {
49041
+ "value": 0,
49042
+ "unit": "px"
49043
+ },
49044
+ "spread": {
49045
+ "value": 0,
49046
+ "unit": "px"
49047
+ },
48077
49048
  "inset": true
48078
49049
  },
48079
49050
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48080
49051
  "isSource": true,
48081
49052
  "$type": "shadow"
48082
49053
  }
49054
+ },
49055
+ "org.primer.llm": {
49056
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
49057
+ "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."
48083
49058
  }
48084
49059
  },
48085
49060
  "key": "{shadow.inset}"
@@ -48090,8 +49065,9 @@
48090
49065
  },
48091
49066
  "shadow-resting-medium": {
48092
49067
  "key": "{shadow.resting.medium}",
48093
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
49068
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48094
49069
  "$type": "shadow",
49070
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48095
49071
  "$extensions": {
48096
49072
  "org.primer.figma": {
48097
49073
  "collection": "mode",
@@ -48103,24 +49079,52 @@
48103
49079
  {
48104
49080
  "color": "#010409",
48105
49081
  "alpha": 0.4,
48106
- "offsetX": "0px",
48107
- "offsetY": "1px",
48108
- "blur": "1px",
48109
- "spread": "0px"
49082
+ "offsetX": {
49083
+ "value": 0,
49084
+ "unit": "px"
49085
+ },
49086
+ "offsetY": {
49087
+ "value": 1,
49088
+ "unit": "px"
49089
+ },
49090
+ "blur": {
49091
+ "value": 1,
49092
+ "unit": "px"
49093
+ },
49094
+ "spread": {
49095
+ "value": 0,
49096
+ "unit": "px"
49097
+ }
48110
49098
  },
48111
49099
  {
48112
49100
  "color": "#010409",
48113
49101
  "alpha": 0.8,
48114
- "offsetX": "0px",
48115
- "offsetY": "3px",
48116
- "blur": "6px",
48117
- "spread": "0px"
49102
+ "offsetX": {
49103
+ "value": 0,
49104
+ "unit": "px"
49105
+ },
49106
+ "offsetY": {
49107
+ "value": 3,
49108
+ "unit": "px"
49109
+ },
49110
+ "blur": {
49111
+ "value": 6,
49112
+ "unit": "px"
49113
+ },
49114
+ "spread": {
49115
+ "value": 0,
49116
+ "unit": "px"
49117
+ }
48118
49118
  }
48119
49119
  ],
48120
49120
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48121
49121
  "isSource": true,
48122
49122
  "$type": "shadow"
48123
49123
  }
49124
+ },
49125
+ "org.primer.llm": {
49126
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49127
+ "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."
48124
49128
  }
48125
49129
  },
48126
49130
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48130,21 +49134,46 @@
48130
49134
  {
48131
49135
  "color": "{base.color.neutral.0}",
48132
49136
  "alpha": 0.4,
48133
- "offsetX": "0px",
48134
- "offsetY": "1px",
48135
- "blur": "1px",
48136
- "spread": "0px"
49137
+ "offsetX": {
49138
+ "value": 0,
49139
+ "unit": "px"
49140
+ },
49141
+ "offsetY": {
49142
+ "value": 1,
49143
+ "unit": "px"
49144
+ },
49145
+ "blur": {
49146
+ "value": 1,
49147
+ "unit": "px"
49148
+ },
49149
+ "spread": {
49150
+ "value": 0,
49151
+ "unit": "px"
49152
+ }
48137
49153
  },
48138
49154
  {
48139
49155
  "color": "{base.color.neutral.0}",
48140
49156
  "alpha": 0.8,
48141
- "offsetX": "0px",
48142
- "offsetY": "3px",
48143
- "blur": "6px",
48144
- "spread": "0px"
49157
+ "offsetX": {
49158
+ "value": 0,
49159
+ "unit": "px"
49160
+ },
49161
+ "offsetY": {
49162
+ "value": 3,
49163
+ "unit": "px"
49164
+ },
49165
+ "blur": {
49166
+ "value": 6,
49167
+ "unit": "px"
49168
+ },
49169
+ "spread": {
49170
+ "value": 0,
49171
+ "unit": "px"
49172
+ }
48145
49173
  }
48146
49174
  ],
48147
49175
  "$type": "shadow",
49176
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48148
49177
  "$extensions": {
48149
49178
  "org.primer.figma": {
48150
49179
  "collection": "mode",
@@ -48156,24 +49185,52 @@
48156
49185
  {
48157
49186
  "color": "{base.color.neutral.0}",
48158
49187
  "alpha": 0.4,
48159
- "offsetX": "0px",
48160
- "offsetY": "1px",
48161
- "blur": "1px",
48162
- "spread": "0px"
49188
+ "offsetX": {
49189
+ "value": 0,
49190
+ "unit": "px"
49191
+ },
49192
+ "offsetY": {
49193
+ "value": 1,
49194
+ "unit": "px"
49195
+ },
49196
+ "blur": {
49197
+ "value": 1,
49198
+ "unit": "px"
49199
+ },
49200
+ "spread": {
49201
+ "value": 0,
49202
+ "unit": "px"
49203
+ }
48163
49204
  },
48164
49205
  {
48165
49206
  "color": "{base.color.neutral.0}",
48166
49207
  "alpha": 0.8,
48167
- "offsetX": "0px",
48168
- "offsetY": "3px",
48169
- "blur": "6px",
48170
- "spread": "0px"
49208
+ "offsetX": {
49209
+ "value": 0,
49210
+ "unit": "px"
49211
+ },
49212
+ "offsetY": {
49213
+ "value": 3,
49214
+ "unit": "px"
49215
+ },
49216
+ "blur": {
49217
+ "value": 6,
49218
+ "unit": "px"
49219
+ },
49220
+ "spread": {
49221
+ "value": 0,
49222
+ "unit": "px"
49223
+ }
48171
49224
  }
48172
49225
  ],
48173
49226
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48174
49227
  "isSource": true,
48175
49228
  "$type": "shadow"
48176
49229
  }
49230
+ },
49231
+ "org.primer.llm": {
49232
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49233
+ "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."
48177
49234
  }
48178
49235
  },
48179
49236
  "key": "{shadow.resting.medium}"
@@ -48184,8 +49241,9 @@
48184
49241
  },
48185
49242
  "shadow-resting-small": {
48186
49243
  "key": "{shadow.resting.small}",
48187
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
49244
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48188
49245
  "$type": "shadow",
49246
+ "$description": "Small resting shadow for buttons and interactive elements",
48189
49247
  "$extensions": {
48190
49248
  "org.primer.figma": {
48191
49249
  "collection": "mode",
@@ -48197,19 +49255,43 @@
48197
49255
  {
48198
49256
  "color": "#010409",
48199
49257
  "alpha": 0.6,
48200
- "offsetX": "0px",
48201
- "offsetY": "1px",
48202
- "blur": "1px",
48203
- "spread": "0px",
49258
+ "offsetX": {
49259
+ "value": 0,
49260
+ "unit": "px"
49261
+ },
49262
+ "offsetY": {
49263
+ "value": 1,
49264
+ "unit": "px"
49265
+ },
49266
+ "blur": {
49267
+ "value": 1,
49268
+ "unit": "px"
49269
+ },
49270
+ "spread": {
49271
+ "value": 0,
49272
+ "unit": "px"
49273
+ },
48204
49274
  "inset": false
48205
49275
  },
48206
49276
  {
48207
49277
  "color": "#010409",
48208
49278
  "alpha": 0.6,
48209
- "offsetX": "0px",
48210
- "offsetY": "1px",
48211
- "blur": "3px",
48212
- "spread": "0px",
49279
+ "offsetX": {
49280
+ "value": 0,
49281
+ "unit": "px"
49282
+ },
49283
+ "offsetY": {
49284
+ "value": 1,
49285
+ "unit": "px"
49286
+ },
49287
+ "blur": {
49288
+ "value": 3,
49289
+ "unit": "px"
49290
+ },
49291
+ "spread": {
49292
+ "value": 0,
49293
+ "unit": "px"
49294
+ },
48213
49295
  "inset": false
48214
49296
  }
48215
49297
  ],
@@ -48217,6 +49299,10 @@
48217
49299
  "isSource": true,
48218
49300
  "$type": "shadow"
48219
49301
  }
49302
+ },
49303
+ "org.primer.llm": {
49304
+ "usage": ["button", "interactive-card", "clickable-element"],
49305
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48220
49306
  }
48221
49307
  },
48222
49308
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48226,23 +49312,48 @@
48226
49312
  {
48227
49313
  "color": "{base.color.neutral.0}",
48228
49314
  "alpha": 0.6,
48229
- "offsetX": "0px",
48230
- "offsetY": "1px",
48231
- "blur": "1px",
48232
- "spread": "0px",
49315
+ "offsetX": {
49316
+ "value": 0,
49317
+ "unit": "px"
49318
+ },
49319
+ "offsetY": {
49320
+ "value": 1,
49321
+ "unit": "px"
49322
+ },
49323
+ "blur": {
49324
+ "value": 1,
49325
+ "unit": "px"
49326
+ },
49327
+ "spread": {
49328
+ "value": 0,
49329
+ "unit": "px"
49330
+ },
48233
49331
  "inset": false
48234
49332
  },
48235
49333
  {
48236
49334
  "color": "{base.color.neutral.0}",
48237
49335
  "alpha": 0.6,
48238
- "offsetX": "0px",
48239
- "offsetY": "1px",
48240
- "blur": "3px",
48241
- "spread": "0px",
49336
+ "offsetX": {
49337
+ "value": 0,
49338
+ "unit": "px"
49339
+ },
49340
+ "offsetY": {
49341
+ "value": 1,
49342
+ "unit": "px"
49343
+ },
49344
+ "blur": {
49345
+ "value": 3,
49346
+ "unit": "px"
49347
+ },
49348
+ "spread": {
49349
+ "value": 0,
49350
+ "unit": "px"
49351
+ },
48242
49352
  "inset": false
48243
49353
  }
48244
49354
  ],
48245
49355
  "$type": "shadow",
49356
+ "$description": "Small resting shadow for buttons and interactive elements",
48246
49357
  "$extensions": {
48247
49358
  "org.primer.figma": {
48248
49359
  "collection": "mode",
@@ -48254,19 +49365,43 @@
48254
49365
  {
48255
49366
  "color": "{base.color.neutral.0}",
48256
49367
  "alpha": 0.6,
48257
- "offsetX": "0px",
48258
- "offsetY": "1px",
48259
- "blur": "1px",
48260
- "spread": "0px",
49368
+ "offsetX": {
49369
+ "value": 0,
49370
+ "unit": "px"
49371
+ },
49372
+ "offsetY": {
49373
+ "value": 1,
49374
+ "unit": "px"
49375
+ },
49376
+ "blur": {
49377
+ "value": 1,
49378
+ "unit": "px"
49379
+ },
49380
+ "spread": {
49381
+ "value": 0,
49382
+ "unit": "px"
49383
+ },
48261
49384
  "inset": false
48262
49385
  },
48263
49386
  {
48264
49387
  "color": "{base.color.neutral.0}",
48265
49388
  "alpha": 0.6,
48266
- "offsetX": "0px",
48267
- "offsetY": "1px",
48268
- "blur": "3px",
48269
- "spread": "0px",
49389
+ "offsetX": {
49390
+ "value": 0,
49391
+ "unit": "px"
49392
+ },
49393
+ "offsetY": {
49394
+ "value": 1,
49395
+ "unit": "px"
49396
+ },
49397
+ "blur": {
49398
+ "value": 3,
49399
+ "unit": "px"
49400
+ },
49401
+ "spread": {
49402
+ "value": 0,
49403
+ "unit": "px"
49404
+ },
48270
49405
  "inset": false
48271
49406
  }
48272
49407
  ],
@@ -48274,6 +49409,10 @@
48274
49409
  "isSource": true,
48275
49410
  "$type": "shadow"
48276
49411
  }
49412
+ },
49413
+ "org.primer.llm": {
49414
+ "usage": ["button", "interactive-card", "clickable-element"],
49415
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48277
49416
  }
48278
49417
  },
48279
49418
  "key": "{shadow.resting.small}"
@@ -48284,8 +49423,9 @@
48284
49423
  },
48285
49424
  "shadow-resting-xsmall": {
48286
49425
  "key": "{shadow.resting.xsmall}",
48287
- "$value": "0px 1px 1px 0px #010409cc",
49426
+ "$value": "0 1px 1px 0 #010409cc",
48288
49427
  "$type": "shadow",
49428
+ "$description": "Extra small resting shadow for minimal elevation",
48289
49429
  "$extensions": {
48290
49430
  "org.primer.figma": {
48291
49431
  "collection": "mode",
@@ -48296,16 +49436,32 @@
48296
49436
  "$value": {
48297
49437
  "color": "#010409",
48298
49438
  "alpha": 0.8,
48299
- "offsetX": "0px",
48300
- "offsetY": "1px",
48301
- "blur": "1px",
48302
- "spread": "0px",
49439
+ "offsetX": {
49440
+ "value": 0,
49441
+ "unit": "px"
49442
+ },
49443
+ "offsetY": {
49444
+ "value": 1,
49445
+ "unit": "px"
49446
+ },
49447
+ "blur": {
49448
+ "value": 1,
49449
+ "unit": "px"
49450
+ },
49451
+ "spread": {
49452
+ "value": 0,
49453
+ "unit": "px"
49454
+ },
48303
49455
  "inset": false
48304
49456
  },
48305
49457
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48306
49458
  "isSource": true,
48307
49459
  "$type": "shadow"
48308
49460
  }
49461
+ },
49462
+ "org.primer.llm": {
49463
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49464
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48309
49465
  }
48310
49466
  },
48311
49467
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48314,13 +49470,26 @@
48314
49470
  "$value": {
48315
49471
  "color": "{base.color.neutral.0}",
48316
49472
  "alpha": 0.8,
48317
- "offsetX": "0px",
48318
- "offsetY": "1px",
48319
- "blur": "1px",
48320
- "spread": "0px",
49473
+ "offsetX": {
49474
+ "value": 0,
49475
+ "unit": "px"
49476
+ },
49477
+ "offsetY": {
49478
+ "value": 1,
49479
+ "unit": "px"
49480
+ },
49481
+ "blur": {
49482
+ "value": 1,
49483
+ "unit": "px"
49484
+ },
49485
+ "spread": {
49486
+ "value": 0,
49487
+ "unit": "px"
49488
+ },
48321
49489
  "inset": false
48322
49490
  },
48323
49491
  "$type": "shadow",
49492
+ "$description": "Extra small resting shadow for minimal elevation",
48324
49493
  "$extensions": {
48325
49494
  "org.primer.figma": {
48326
49495
  "collection": "mode",
@@ -48331,16 +49500,32 @@
48331
49500
  "$value": {
48332
49501
  "color": "{base.color.neutral.0}",
48333
49502
  "alpha": 0.8,
48334
- "offsetX": "0px",
48335
- "offsetY": "1px",
48336
- "blur": "1px",
48337
- "spread": "0px",
49503
+ "offsetX": {
49504
+ "value": 0,
49505
+ "unit": "px"
49506
+ },
49507
+ "offsetY": {
49508
+ "value": 1,
49509
+ "unit": "px"
49510
+ },
49511
+ "blur": {
49512
+ "value": 1,
49513
+ "unit": "px"
49514
+ },
49515
+ "spread": {
49516
+ "value": 0,
49517
+ "unit": "px"
49518
+ },
48338
49519
  "inset": false
48339
49520
  },
48340
49521
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48341
49522
  "isSource": true,
48342
49523
  "$type": "shadow"
48343
49524
  }
49525
+ },
49526
+ "org.primer.llm": {
49527
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49528
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48344
49529
  }
48345
49530
  },
48346
49531
  "key": "{shadow.resting.xsmall}"