@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}"
@@ -2436,6 +2480,10 @@
2436
2480
  },
2437
2481
  "org.primer.overrides": {
2438
2482
  "dark": "#010409"
2483
+ },
2484
+ "org.primer.llm": {
2485
+ "doNotUse": true,
2486
+ "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."
2439
2487
  }
2440
2488
  },
2441
2489
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2452,6 +2500,10 @@
2452
2500
  },
2453
2501
  "org.primer.overrides": {
2454
2502
  "dark": "{base.color.neutral.13}"
2503
+ },
2504
+ "org.primer.llm": {
2505
+ "doNotUse": true,
2506
+ "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."
2455
2507
  }
2456
2508
  },
2457
2509
  "key": "{bgColor.white}"
@@ -2462,7 +2514,11 @@
2462
2514
  },
2463
2515
  "border-accent-emphasis": {
2464
2516
  "key": "{border.accent.emphasis}",
2465
- "$value": "0.00390625rem,0.0625px solid #0349b4",
2517
+ "$value": {
2518
+ "color": "#0349b4",
2519
+ "style": "solid",
2520
+ "width": ["0.0625rem", "1px"]
2521
+ },
2466
2522
  "$type": "border",
2467
2523
  "filePath": "src/tokens/functional/border/border.json5",
2468
2524
  "isSource": true,
@@ -2481,7 +2537,11 @@
2481
2537
  },
2482
2538
  "border-accent-muted": {
2483
2539
  "key": "{border.accent.muted}",
2484
- "$value": "0.00390625rem,0.0625px solid #368cf9",
2540
+ "$value": {
2541
+ "color": "#368cf9",
2542
+ "style": "solid",
2543
+ "width": ["0.0625rem", "1px"]
2544
+ },
2485
2545
  "$type": "border",
2486
2546
  "filePath": "src/tokens/functional/border/border.json5",
2487
2547
  "isSource": true,
@@ -2500,7 +2560,11 @@
2500
2560
  },
2501
2561
  "border-attention-emphasis": {
2502
2562
  "key": "{border.attention.emphasis}",
2503
- "$value": "0.00390625rem,0.0625px solid #744500",
2563
+ "$value": {
2564
+ "color": "#744500",
2565
+ "style": "solid",
2566
+ "width": ["0.0625rem", "1px"]
2567
+ },
2504
2568
  "$type": "border",
2505
2569
  "filePath": "src/tokens/functional/border/border.json5",
2506
2570
  "isSource": true,
@@ -2519,7 +2583,11 @@
2519
2583
  },
2520
2584
  "border-attention-muted": {
2521
2585
  "key": "{border.attention.muted}",
2522
- "$value": "0.00390625rem,0.0625px solid #b58407",
2586
+ "$value": {
2587
+ "color": "#b58407",
2588
+ "style": "solid",
2589
+ "width": ["0.0625rem", "1px"]
2590
+ },
2523
2591
  "$type": "border",
2524
2592
  "filePath": "src/tokens/functional/border/border.json5",
2525
2593
  "isSource": true,
@@ -2538,7 +2606,11 @@
2538
2606
  },
2539
2607
  "border-closed-emphasis": {
2540
2608
  "key": "{border.closed.emphasis}",
2541
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2609
+ "$value": {
2610
+ "color": "#a0111f",
2611
+ "style": "solid",
2612
+ "width": ["0.0625rem", "1px"]
2613
+ },
2542
2614
  "$type": "border",
2543
2615
  "filePath": "src/tokens/functional/border/border.json5",
2544
2616
  "isSource": true,
@@ -2553,7 +2625,11 @@
2553
2625
  },
2554
2626
  "border-closed-muted": {
2555
2627
  "key": "{border.closed.muted}",
2556
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2628
+ "$value": {
2629
+ "color": "#ee5a5d",
2630
+ "style": "solid",
2631
+ "width": ["0.0625rem", "1px"]
2632
+ },
2557
2633
  "$type": "border",
2558
2634
  "filePath": "src/tokens/functional/border/border.json5",
2559
2635
  "isSource": true,
@@ -2568,7 +2644,11 @@
2568
2644
  },
2569
2645
  "border-danger-emphasis": {
2570
2646
  "key": "{border.danger.emphasis}",
2571
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2647
+ "$value": {
2648
+ "color": "#a0111f",
2649
+ "style": "solid",
2650
+ "width": ["0.0625rem", "1px"]
2651
+ },
2572
2652
  "$type": "border",
2573
2653
  "filePath": "src/tokens/functional/border/border.json5",
2574
2654
  "isSource": true,
@@ -2587,7 +2667,11 @@
2587
2667
  },
2588
2668
  "border-danger-muted": {
2589
2669
  "key": "{border.danger.muted}",
2590
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2670
+ "$value": {
2671
+ "color": "#ee5a5d",
2672
+ "style": "solid",
2673
+ "width": ["0.0625rem", "1px"]
2674
+ },
2591
2675
  "$type": "border",
2592
2676
  "filePath": "src/tokens/functional/border/border.json5",
2593
2677
  "isSource": true,
@@ -2606,7 +2690,11 @@
2606
2690
  },
2607
2691
  "border-default": {
2608
2692
  "key": "{border.default}",
2609
- "$value": "0.00390625rem,0.0625px solid #454c54",
2693
+ "$value": {
2694
+ "color": "#454c54",
2695
+ "style": "solid",
2696
+ "width": ["0.0625rem", "1px"]
2697
+ },
2610
2698
  "$type": "border",
2611
2699
  "filePath": "src/tokens/functional/border/border.json5",
2612
2700
  "isSource": true,
@@ -2625,7 +2713,11 @@
2625
2713
  },
2626
2714
  "border-disabled": {
2627
2715
  "key": "{border.disabled}",
2628
- "$value": "0.00390625rem,0.0625px solid #59636e1f",
2716
+ "$value": {
2717
+ "color": "#59636e1f",
2718
+ "style": "solid",
2719
+ "width": ["0.0625rem", "1px"]
2720
+ },
2629
2721
  "$type": "border",
2630
2722
  "filePath": "src/tokens/functional/border/border.json5",
2631
2723
  "isSource": true,
@@ -2644,7 +2736,11 @@
2644
2736
  },
2645
2737
  "border-done-emphasis": {
2646
2738
  "key": "{border.done.emphasis}",
2647
- "$value": "0.00390625rem,0.0625px solid #622cbc",
2739
+ "$value": {
2740
+ "color": "#622cbc",
2741
+ "style": "solid",
2742
+ "width": ["0.0625rem", "1px"]
2743
+ },
2648
2744
  "$type": "border",
2649
2745
  "filePath": "src/tokens/functional/border/border.json5",
2650
2746
  "isSource": true,
@@ -2663,7 +2759,11 @@
2663
2759
  },
2664
2760
  "border-done-muted": {
2665
2761
  "key": "{border.done.muted}",
2666
- "$value": "0.00390625rem,0.0625px solid #a371f7",
2762
+ "$value": {
2763
+ "color": "#a371f7",
2764
+ "style": "solid",
2765
+ "width": ["0.0625rem", "1px"]
2766
+ },
2667
2767
  "$type": "border",
2668
2768
  "filePath": "src/tokens/functional/border/border.json5",
2669
2769
  "isSource": true,
@@ -2682,7 +2782,11 @@
2682
2782
  },
2683
2783
  "border-emphasis": {
2684
2784
  "key": "{border.emphasis}",
2685
- "$value": "0.00390625rem,0.0625px solid #454c54",
2785
+ "$value": {
2786
+ "color": "#454c54",
2787
+ "style": "solid",
2788
+ "width": ["0.0625rem", "1px"]
2789
+ },
2686
2790
  "$type": "border",
2687
2791
  "filePath": "src/tokens/functional/border/border.json5",
2688
2792
  "isSource": true,
@@ -2701,7 +2805,11 @@
2701
2805
  },
2702
2806
  "border-muted": {
2703
2807
  "key": "{border.muted}",
2704
- "$value": "0.00390625rem,0.0625px solid #454c54",
2808
+ "$value": {
2809
+ "color": "#454c54",
2810
+ "style": "solid",
2811
+ "width": ["0.0625rem", "1px"]
2812
+ },
2705
2813
  "$type": "border",
2706
2814
  "filePath": "src/tokens/functional/border/border.json5",
2707
2815
  "isSource": true,
@@ -2720,7 +2828,11 @@
2720
2828
  },
2721
2829
  "border-neutral-emphasis": {
2722
2830
  "key": "{border.neutral.emphasis}",
2723
- "$value": "0.00390625rem,0.0625px solid #59636e",
2831
+ "$value": {
2832
+ "color": "#59636e",
2833
+ "style": "solid",
2834
+ "width": ["0.0625rem", "1px"]
2835
+ },
2724
2836
  "$type": "border",
2725
2837
  "filePath": "src/tokens/functional/border/border.json5",
2726
2838
  "isSource": true,
@@ -2739,7 +2851,11 @@
2739
2851
  },
2740
2852
  "border-neutral-muted": {
2741
2853
  "key": "{border.neutral.muted}",
2742
- "$value": "0.00390625rem,0.0625px solid #454c54",
2854
+ "$value": {
2855
+ "color": "#454c54",
2856
+ "style": "solid",
2857
+ "width": ["0.0625rem", "1px"]
2858
+ },
2743
2859
  "$type": "border",
2744
2860
  "filePath": "src/tokens/functional/border/border.json5",
2745
2861
  "isSource": true,
@@ -2758,7 +2874,11 @@
2758
2874
  },
2759
2875
  "border-open-emphasis": {
2760
2876
  "key": "{border.open.emphasis}",
2761
- "$value": "0.00390625rem,0.0625px solid #0349b4",
2877
+ "$value": {
2878
+ "color": "#0349b4",
2879
+ "style": "solid",
2880
+ "width": ["0.0625rem", "1px"]
2881
+ },
2762
2882
  "$type": "border",
2763
2883
  "filePath": "src/tokens/functional/border/border.json5",
2764
2884
  "isSource": true,
@@ -2773,7 +2893,11 @@
2773
2893
  },
2774
2894
  "border-open-muted": {
2775
2895
  "key": "{border.open.muted}",
2776
- "$value": "0.00390625rem,0.0625px solid #368cf9",
2896
+ "$value": {
2897
+ "color": "#368cf9",
2898
+ "style": "solid",
2899
+ "width": ["0.0625rem", "1px"]
2900
+ },
2777
2901
  "$type": "border",
2778
2902
  "filePath": "src/tokens/functional/border/border.json5",
2779
2903
  "isSource": true,
@@ -2788,7 +2912,11 @@
2788
2912
  },
2789
2913
  "border-severe-emphasis": {
2790
2914
  "key": "{border.severe.emphasis}",
2791
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2915
+ "$value": {
2916
+ "color": "#a0111f",
2917
+ "style": "solid",
2918
+ "width": ["0.0625rem", "1px"]
2919
+ },
2792
2920
  "$type": "border",
2793
2921
  "filePath": "src/tokens/functional/border/border.json5",
2794
2922
  "isSource": true,
@@ -2807,7 +2935,11 @@
2807
2935
  },
2808
2936
  "border-severe-muted": {
2809
2937
  "key": "{border.severe.muted}",
2810
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2938
+ "$value": {
2939
+ "color": "#ee5a5d",
2940
+ "style": "solid",
2941
+ "width": ["0.0625rem", "1px"]
2942
+ },
2811
2943
  "$type": "border",
2812
2944
  "filePath": "src/tokens/functional/border/border.json5",
2813
2945
  "isSource": true,
@@ -2826,7 +2958,11 @@
2826
2958
  },
2827
2959
  "border-sponsors-emphasis": {
2828
2960
  "key": "{border.sponsors.emphasis}",
2829
- "$value": "0.00390625rem,0.0625px solid #971368",
2961
+ "$value": {
2962
+ "color": "#971368",
2963
+ "style": "solid",
2964
+ "width": ["0.0625rem", "1px"]
2965
+ },
2830
2966
  "$type": "border",
2831
2967
  "filePath": "src/tokens/functional/border/border.json5",
2832
2968
  "isSource": true,
@@ -2845,7 +2981,11 @@
2845
2981
  },
2846
2982
  "border-sponsors-muted": {
2847
2983
  "key": "{border.sponsors.muted}",
2848
- "$value": "0.00390625rem,0.0625px solid #ed4baf",
2984
+ "$value": {
2985
+ "color": "#ed4baf",
2986
+ "style": "solid",
2987
+ "width": ["0.0625rem", "1px"]
2988
+ },
2849
2989
  "$type": "border",
2850
2990
  "filePath": "src/tokens/functional/border/border.json5",
2851
2991
  "isSource": true,
@@ -2864,7 +3004,11 @@
2864
3004
  },
2865
3005
  "border-success-emphasis": {
2866
3006
  "key": "{border.success.emphasis}",
2867
- "$value": "0.00390625rem,0.0625px solid #0349b4",
3007
+ "$value": {
3008
+ "color": "#0349b4",
3009
+ "style": "solid",
3010
+ "width": ["0.0625rem", "1px"]
3011
+ },
2868
3012
  "$type": "border",
2869
3013
  "filePath": "src/tokens/functional/border/border.json5",
2870
3014
  "isSource": true,
@@ -2883,7 +3027,11 @@
2883
3027
  },
2884
3028
  "border-success-muted": {
2885
3029
  "key": "{border.success.muted}",
2886
- "$value": "0.00390625rem,0.0625px solid #368cf9",
3030
+ "$value": {
3031
+ "color": "#368cf9",
3032
+ "style": "solid",
3033
+ "width": ["0.0625rem", "1px"]
3034
+ },
2887
3035
  "$type": "border",
2888
3036
  "filePath": "src/tokens/functional/border/border.json5",
2889
3037
  "isSource": true,
@@ -2902,7 +3050,11 @@
2902
3050
  },
2903
3051
  "border-transparent": {
2904
3052
  "key": "{border.transparent}",
2905
- "$value": "0.00390625rem,0.0625px solid #ffffff00",
3053
+ "$value": {
3054
+ "color": "#ffffff00",
3055
+ "style": "solid",
3056
+ "width": ["0.0625rem", "1px"]
3057
+ },
2906
3058
  "$type": "border",
2907
3059
  "filePath": "src/tokens/functional/border/border.json5",
2908
3060
  "isSource": true,
@@ -2921,7 +3073,11 @@
2921
3073
  },
2922
3074
  "border-upsell-emphasis": {
2923
3075
  "key": "{border.upsell.emphasis}",
2924
- "$value": "0.00390625rem,0.0625px solid #622cbc",
3076
+ "$value": {
3077
+ "color": "#622cbc",
3078
+ "style": "solid",
3079
+ "width": ["0.0625rem", "1px"]
3080
+ },
2925
3081
  "$type": "border",
2926
3082
  "filePath": "src/tokens/functional/border/border.json5",
2927
3083
  "isSource": true,
@@ -2940,7 +3096,11 @@
2940
3096
  },
2941
3097
  "border-upsell-muted": {
2942
3098
  "key": "{border.upsell.muted}",
2943
- "$value": "0.00390625rem,0.0625px solid #a371f7",
3099
+ "$value": {
3100
+ "color": "#a371f7",
3101
+ "style": "solid",
3102
+ "width": ["0.0625rem", "1px"]
3103
+ },
2944
3104
  "$type": "border",
2945
3105
  "filePath": "src/tokens/functional/border/border.json5",
2946
3106
  "isSource": true,
@@ -6934,7 +7094,7 @@
6934
7094
  },
6935
7095
  "button-danger-shadow-selected": {
6936
7096
  "key": "{button.danger.shadow.selected}",
6937
- "$value": "inset 0px 1px 0px 0px #43001133",
7097
+ "$value": "inset 0 1px 0 0 #43001133",
6938
7098
  "$type": "shadow",
6939
7099
  "$extensions": {
6940
7100
  "org.primer.figma": {
@@ -6947,10 +7107,22 @@
6947
7107
  {
6948
7108
  "color": "#361200",
6949
7109
  "alpha": 0.2,
6950
- "offsetX": "0px",
6951
- "offsetY": "1px",
6952
- "blur": "0px",
6953
- "spread": "0px",
7110
+ "offsetX": {
7111
+ "value": 0,
7112
+ "unit": "px"
7113
+ },
7114
+ "offsetY": {
7115
+ "value": 1,
7116
+ "unit": "px"
7117
+ },
7118
+ "blur": {
7119
+ "value": 0,
7120
+ "unit": "px"
7121
+ },
7122
+ "spread": {
7123
+ "value": 0,
7124
+ "unit": "px"
7125
+ },
6954
7126
  "inset": true
6955
7127
  }
6956
7128
  ],
@@ -6963,10 +7135,22 @@
6963
7135
  {
6964
7136
  "color": "#ffffff00",
6965
7137
  "alpha": 0,
6966
- "offsetX": "0px",
6967
- "offsetY": "0px",
6968
- "blur": "0px",
6969
- "spread": "0px",
7138
+ "offsetX": {
7139
+ "value": 0,
7140
+ "unit": "px"
7141
+ },
7142
+ "offsetY": {
7143
+ "value": 0,
7144
+ "unit": "px"
7145
+ },
7146
+ "blur": {
7147
+ "value": 0,
7148
+ "unit": "px"
7149
+ },
7150
+ "spread": {
7151
+ "value": 0,
7152
+ "unit": "px"
7153
+ },
6970
7154
  "inset": false
6971
7155
  }
6972
7156
  ],
@@ -6983,10 +7167,22 @@
6983
7167
  {
6984
7168
  "color": "{base.color.red.9}",
6985
7169
  "alpha": 0.2,
6986
- "offsetX": "0px",
6987
- "offsetY": "1px",
6988
- "blur": "0px",
6989
- "spread": "0px",
7170
+ "offsetX": {
7171
+ "value": 0,
7172
+ "unit": "px"
7173
+ },
7174
+ "offsetY": {
7175
+ "value": 1,
7176
+ "unit": "px"
7177
+ },
7178
+ "blur": {
7179
+ "value": 0,
7180
+ "unit": "px"
7181
+ },
7182
+ "spread": {
7183
+ "value": 0,
7184
+ "unit": "px"
7185
+ },
6990
7186
  "inset": true
6991
7187
  }
6992
7188
  ],
@@ -7002,10 +7198,22 @@
7002
7198
  {
7003
7199
  "color": "{base.color.orange.9}",
7004
7200
  "alpha": 0.2,
7005
- "offsetX": "0px",
7006
- "offsetY": "1px",
7007
- "blur": "0px",
7008
- "spread": "0px",
7201
+ "offsetX": {
7202
+ "value": 0,
7203
+ "unit": "px"
7204
+ },
7205
+ "offsetY": {
7206
+ "value": 1,
7207
+ "unit": "px"
7208
+ },
7209
+ "blur": {
7210
+ "value": 0,
7211
+ "unit": "px"
7212
+ },
7213
+ "spread": {
7214
+ "value": 0,
7215
+ "unit": "px"
7216
+ },
7009
7217
  "inset": true
7010
7218
  }
7011
7219
  ],
@@ -7018,10 +7226,22 @@
7018
7226
  {
7019
7227
  "color": "{base.color.transparent}",
7020
7228
  "alpha": 0,
7021
- "offsetX": "0px",
7022
- "offsetY": "0px",
7023
- "blur": "0px",
7024
- "spread": "0px",
7229
+ "offsetX": {
7230
+ "value": 0,
7231
+ "unit": "px"
7232
+ },
7233
+ "offsetY": {
7234
+ "value": 0,
7235
+ "unit": "px"
7236
+ },
7237
+ "blur": {
7238
+ "value": 0,
7239
+ "unit": "px"
7240
+ },
7241
+ "spread": {
7242
+ "value": 0,
7243
+ "unit": "px"
7244
+ },
7025
7245
  "inset": false
7026
7246
  }
7027
7247
  ],
@@ -7397,7 +7617,7 @@
7397
7617
  },
7398
7618
  "button-default-shadow-resting": {
7399
7619
  "key": "{button.default.shadow.resting}",
7400
- "$value": "0px 1px 0px 0px #0104090a",
7620
+ "$value": "0 1px 0 0 #0104090a",
7401
7621
  "$type": "shadow",
7402
7622
  "$extensions": {
7403
7623
  "org.primer.figma": {
@@ -7410,10 +7630,22 @@
7410
7630
  {
7411
7631
  "color": "#ffffff00",
7412
7632
  "alpha": 0,
7413
- "offsetX": "0px",
7414
- "offsetY": "0px",
7415
- "blur": "0px",
7416
- "spread": "0px",
7633
+ "offsetX": {
7634
+ "value": 0,
7635
+ "unit": "px"
7636
+ },
7637
+ "offsetY": {
7638
+ "value": 0,
7639
+ "unit": "px"
7640
+ },
7641
+ "blur": {
7642
+ "value": 0,
7643
+ "unit": "px"
7644
+ },
7645
+ "spread": {
7646
+ "value": 0,
7647
+ "unit": "px"
7648
+ },
7417
7649
  "inset": false
7418
7650
  }
7419
7651
  ],
@@ -7430,10 +7662,22 @@
7430
7662
  {
7431
7663
  "color": "{base.color.neutral.13}",
7432
7664
  "alpha": 0.04,
7433
- "offsetX": "0px",
7434
- "offsetY": "1px",
7435
- "blur": "0px",
7436
- "spread": "0px",
7665
+ "offsetX": {
7666
+ "value": 0,
7667
+ "unit": "px"
7668
+ },
7669
+ "offsetY": {
7670
+ "value": 1,
7671
+ "unit": "px"
7672
+ },
7673
+ "blur": {
7674
+ "value": 0,
7675
+ "unit": "px"
7676
+ },
7677
+ "spread": {
7678
+ "value": 0,
7679
+ "unit": "px"
7680
+ },
7437
7681
  "inset": false
7438
7682
  }
7439
7683
  ],
@@ -7449,10 +7693,22 @@
7449
7693
  {
7450
7694
  "color": "{base.color.transparent}",
7451
7695
  "alpha": 0,
7452
- "offsetX": "0px",
7453
- "offsetY": "0px",
7454
- "blur": "0px",
7455
- "spread": "0px",
7696
+ "offsetX": {
7697
+ "value": 0,
7698
+ "unit": "px"
7699
+ },
7700
+ "offsetY": {
7701
+ "value": 0,
7702
+ "unit": "px"
7703
+ },
7704
+ "blur": {
7705
+ "value": 0,
7706
+ "unit": "px"
7707
+ },
7708
+ "spread": {
7709
+ "value": 0,
7710
+ "unit": "px"
7711
+ },
7456
7712
  "inset": false
7457
7713
  }
7458
7714
  ],
@@ -9156,7 +9412,7 @@
9156
9412
  },
9157
9413
  "button-outline-shadow-selected": {
9158
9414
  "key": "{button.outline.shadow.selected}",
9159
- "$value": "inset 0px 1px 0px 0px #021a4a33",
9415
+ "$value": "inset 0 1px 0 0 #021a4a33",
9160
9416
  "$type": "shadow",
9161
9417
  "$extensions": {
9162
9418
  "org.primer.figma": {
@@ -9169,10 +9425,22 @@
9169
9425
  {
9170
9426
  "color": "#ffffff00",
9171
9427
  "alpha": 0,
9172
- "offsetX": "0px",
9173
- "offsetY": "0px",
9174
- "blur": "0px",
9175
- "spread": "0px",
9428
+ "offsetX": {
9429
+ "value": 0,
9430
+ "unit": "px"
9431
+ },
9432
+ "offsetY": {
9433
+ "value": 0,
9434
+ "unit": "px"
9435
+ },
9436
+ "blur": {
9437
+ "value": 0,
9438
+ "unit": "px"
9439
+ },
9440
+ "spread": {
9441
+ "value": 0,
9442
+ "unit": "px"
9443
+ },
9176
9444
  "inset": false
9177
9445
  }
9178
9446
  ],
@@ -9189,10 +9457,22 @@
9189
9457
  {
9190
9458
  "color": "{base.color.blue.9}",
9191
9459
  "alpha": 0.2,
9192
- "offsetX": "0px",
9193
- "offsetY": "1px",
9194
- "blur": "0px",
9195
- "spread": "0px",
9460
+ "offsetX": {
9461
+ "value": 0,
9462
+ "unit": "px"
9463
+ },
9464
+ "offsetY": {
9465
+ "value": 1,
9466
+ "unit": "px"
9467
+ },
9468
+ "blur": {
9469
+ "value": 0,
9470
+ "unit": "px"
9471
+ },
9472
+ "spread": {
9473
+ "value": 0,
9474
+ "unit": "px"
9475
+ },
9196
9476
  "inset": true
9197
9477
  }
9198
9478
  ],
@@ -9208,10 +9488,22 @@
9208
9488
  {
9209
9489
  "color": "{base.color.transparent}",
9210
9490
  "alpha": 0,
9211
- "offsetX": "0px",
9212
- "offsetY": "0px",
9213
- "blur": "0px",
9214
- "spread": "0px",
9491
+ "offsetX": {
9492
+ "value": 0,
9493
+ "unit": "px"
9494
+ },
9495
+ "offsetY": {
9496
+ "value": 0,
9497
+ "unit": "px"
9498
+ },
9499
+ "blur": {
9500
+ "value": 0,
9501
+ "unit": "px"
9502
+ },
9503
+ "spread": {
9504
+ "value": 0,
9505
+ "unit": "px"
9506
+ },
9215
9507
  "inset": false
9216
9508
  }
9217
9509
  ],
@@ -10366,7 +10658,7 @@
10366
10658
  },
10367
10659
  "button-primary-shadow-selected": {
10368
10660
  "key": "{button.primary.shadow.selected}",
10369
- "$value": "inset 0px 1px 0px 0px #00230b4d",
10661
+ "$value": "inset 0 1px 0 0 #00230b4d",
10370
10662
  "$type": "shadow",
10371
10663
  "$extensions": {
10372
10664
  "org.primer.figma": {
@@ -10379,10 +10671,22 @@
10379
10671
  {
10380
10672
  "color": "#021a4a",
10381
10673
  "alpha": 0.3,
10382
- "offsetX": "0px",
10383
- "offsetY": "1px",
10384
- "blur": "0px",
10385
- "spread": "0px",
10674
+ "offsetX": {
10675
+ "value": 0,
10676
+ "unit": "px"
10677
+ },
10678
+ "offsetY": {
10679
+ "value": 1,
10680
+ "unit": "px"
10681
+ },
10682
+ "blur": {
10683
+ "value": 0,
10684
+ "unit": "px"
10685
+ },
10686
+ "spread": {
10687
+ "value": 0,
10688
+ "unit": "px"
10689
+ },
10386
10690
  "inset": true
10387
10691
  }
10388
10692
  ],
@@ -10395,10 +10699,22 @@
10395
10699
  {
10396
10700
  "color": "#021a4a",
10397
10701
  "alpha": 0.3,
10398
- "offsetX": "0px",
10399
- "offsetY": "1px",
10400
- "blur": "0px",
10401
- "spread": "0px",
10702
+ "offsetX": {
10703
+ "value": 0,
10704
+ "unit": "px"
10705
+ },
10706
+ "offsetY": {
10707
+ "value": 1,
10708
+ "unit": "px"
10709
+ },
10710
+ "blur": {
10711
+ "value": 0,
10712
+ "unit": "px"
10713
+ },
10714
+ "spread": {
10715
+ "value": 0,
10716
+ "unit": "px"
10717
+ },
10402
10718
  "inset": true
10403
10719
  }
10404
10720
  ],
@@ -10411,10 +10727,22 @@
10411
10727
  {
10412
10728
  "color": "#ffffff00",
10413
10729
  "alpha": 0,
10414
- "offsetX": "0px",
10415
- "offsetY": "0px",
10416
- "blur": "0px",
10417
- "spread": "0px",
10730
+ "offsetX": {
10731
+ "value": 0,
10732
+ "unit": "px"
10733
+ },
10734
+ "offsetY": {
10735
+ "value": 0,
10736
+ "unit": "px"
10737
+ },
10738
+ "blur": {
10739
+ "value": 0,
10740
+ "unit": "px"
10741
+ },
10742
+ "spread": {
10743
+ "value": 0,
10744
+ "unit": "px"
10745
+ },
10418
10746
  "inset": false
10419
10747
  }
10420
10748
  ],
@@ -10431,10 +10759,22 @@
10431
10759
  {
10432
10760
  "color": "{base.color.green.9}",
10433
10761
  "alpha": 0.3,
10434
- "offsetX": "0px",
10435
- "offsetY": "1px",
10436
- "blur": "0px",
10437
- "spread": "0px",
10762
+ "offsetX": {
10763
+ "value": 0,
10764
+ "unit": "px"
10765
+ },
10766
+ "offsetY": {
10767
+ "value": 1,
10768
+ "unit": "px"
10769
+ },
10770
+ "blur": {
10771
+ "value": 0,
10772
+ "unit": "px"
10773
+ },
10774
+ "spread": {
10775
+ "value": 0,
10776
+ "unit": "px"
10777
+ },
10438
10778
  "inset": true
10439
10779
  }
10440
10780
  ],
@@ -10450,10 +10790,22 @@
10450
10790
  {
10451
10791
  "color": "{base.color.blue.9}",
10452
10792
  "alpha": 0.3,
10453
- "offsetX": "0px",
10454
- "offsetY": "1px",
10455
- "blur": "0px",
10456
- "spread": "0px",
10793
+ "offsetX": {
10794
+ "value": 0,
10795
+ "unit": "px"
10796
+ },
10797
+ "offsetY": {
10798
+ "value": 1,
10799
+ "unit": "px"
10800
+ },
10801
+ "blur": {
10802
+ "value": 0,
10803
+ "unit": "px"
10804
+ },
10805
+ "spread": {
10806
+ "value": 0,
10807
+ "unit": "px"
10808
+ },
10457
10809
  "inset": true
10458
10810
  }
10459
10811
  ],
@@ -10466,10 +10818,22 @@
10466
10818
  {
10467
10819
  "color": "{base.color.blue.9}",
10468
10820
  "alpha": 0.3,
10469
- "offsetX": "0px",
10470
- "offsetY": "1px",
10471
- "blur": "0px",
10472
- "spread": "0px",
10821
+ "offsetX": {
10822
+ "value": 0,
10823
+ "unit": "px"
10824
+ },
10825
+ "offsetY": {
10826
+ "value": 1,
10827
+ "unit": "px"
10828
+ },
10829
+ "blur": {
10830
+ "value": 0,
10831
+ "unit": "px"
10832
+ },
10833
+ "spread": {
10834
+ "value": 0,
10835
+ "unit": "px"
10836
+ },
10473
10837
  "inset": true
10474
10838
  }
10475
10839
  ],
@@ -10482,10 +10846,22 @@
10482
10846
  {
10483
10847
  "color": "{base.color.transparent}",
10484
10848
  "alpha": 0,
10485
- "offsetX": "0px",
10486
- "offsetY": "0px",
10487
- "blur": "0px",
10488
- "spread": "0px",
10849
+ "offsetX": {
10850
+ "value": 0,
10851
+ "unit": "px"
10852
+ },
10853
+ "offsetY": {
10854
+ "value": 0,
10855
+ "unit": "px"
10856
+ },
10857
+ "blur": {
10858
+ "value": 0,
10859
+ "unit": "px"
10860
+ },
10861
+ "spread": {
10862
+ "value": 0,
10863
+ "unit": "px"
10864
+ },
10489
10865
  "inset": false
10490
10866
  }
10491
10867
  ],
@@ -37222,6 +37598,10 @@
37222
37598
  },
37223
37599
  "org.primer.overrides": {
37224
37600
  "dark": "#ffffff"
37601
+ },
37602
+ "org.primer.llm": {
37603
+ "doNotUse": true,
37604
+ "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."
37225
37605
  }
37226
37606
  },
37227
37607
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37238,6 +37618,10 @@
37238
37618
  },
37239
37619
  "org.primer.overrides": {
37240
37620
  "dark": "{base.color.neutral.0}"
37621
+ },
37622
+ "org.primer.llm": {
37623
+ "doNotUse": true,
37624
+ "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."
37241
37625
  }
37242
37626
  },
37243
37627
  "key": "{fgColor.black}"
@@ -38211,6 +38595,10 @@
38211
38595
  },
38212
38596
  "org.primer.overrides": {
38213
38597
  "dark": "#010409"
38598
+ },
38599
+ "org.primer.llm": {
38600
+ "doNotUse": true,
38601
+ "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."
38214
38602
  }
38215
38603
  },
38216
38604
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38227,6 +38615,10 @@
38227
38615
  },
38228
38616
  "org.primer.overrides": {
38229
38617
  "dark": "{base.color.neutral.13}"
38618
+ },
38619
+ "org.primer.llm": {
38620
+ "doNotUse": true,
38621
+ "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."
38230
38622
  }
38231
38623
  },
38232
38624
  "key": "{fgColor.white}"
@@ -38252,7 +38644,10 @@
38252
38644
  "$value": {
38253
38645
  "color": "{focus.outlineColor}",
38254
38646
  "style": "solid",
38255
- "width": "2px"
38647
+ "width": {
38648
+ "value": 2,
38649
+ "unit": "px"
38650
+ }
38256
38651
  },
38257
38652
  "$type": "border",
38258
38653
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47403,7 +47798,7 @@
47403
47798
  },
47404
47799
  "shadow-floating-large": {
47405
47800
  "key": "{shadow.floating.large}",
47406
- "$value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
47801
+ "$value": "0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d",
47407
47802
  "$type": "shadow",
47408
47803
  "$description": "Large floating shadow for modals and dialogs",
47409
47804
  "$extensions": {
@@ -47417,18 +47812,42 @@
47417
47812
  {
47418
47813
  "color": "#454c54",
47419
47814
  "alpha": 1,
47420
- "offsetX": "0px",
47421
- "offsetY": "0px",
47422
- "blur": "0px",
47423
- "spread": "1px"
47815
+ "offsetX": {
47816
+ "value": 0,
47817
+ "unit": "px"
47818
+ },
47819
+ "offsetY": {
47820
+ "value": 0,
47821
+ "unit": "px"
47822
+ },
47823
+ "blur": {
47824
+ "value": 0,
47825
+ "unit": "px"
47826
+ },
47827
+ "spread": {
47828
+ "value": 1,
47829
+ "unit": "px"
47830
+ }
47424
47831
  },
47425
47832
  {
47426
47833
  "color": "#ffffff",
47427
47834
  "alpha": 1,
47428
- "offsetX": "0px",
47429
- "offsetY": "24px",
47430
- "blur": "48px",
47431
- "spread": "0px"
47835
+ "offsetX": {
47836
+ "value": 0,
47837
+ "unit": "px"
47838
+ },
47839
+ "offsetY": {
47840
+ "value": 24,
47841
+ "unit": "px"
47842
+ },
47843
+ "blur": {
47844
+ "value": 48,
47845
+ "unit": "px"
47846
+ },
47847
+ "spread": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ }
47432
47851
  }
47433
47852
  ],
47434
47853
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47448,18 +47867,42 @@
47448
47867
  {
47449
47868
  "color": "{overlay.borderColor}",
47450
47869
  "alpha": 0,
47451
- "offsetX": "0px",
47452
- "offsetY": "0px",
47453
- "blur": "0px",
47454
- "spread": "1px"
47870
+ "offsetX": {
47871
+ "value": 0,
47872
+ "unit": "px"
47873
+ },
47874
+ "offsetY": {
47875
+ "value": 0,
47876
+ "unit": "px"
47877
+ },
47878
+ "blur": {
47879
+ "value": 0,
47880
+ "unit": "px"
47881
+ },
47882
+ "spread": {
47883
+ "value": 1,
47884
+ "unit": "px"
47885
+ }
47455
47886
  },
47456
47887
  {
47457
47888
  "color": "{base.color.neutral.12}",
47458
47889
  "alpha": 0.24,
47459
- "offsetX": "0px",
47460
- "offsetY": "40px",
47461
- "blur": "80px",
47462
- "spread": "0px"
47890
+ "offsetX": {
47891
+ "value": 0,
47892
+ "unit": "px"
47893
+ },
47894
+ "offsetY": {
47895
+ "value": 40,
47896
+ "unit": "px"
47897
+ },
47898
+ "blur": {
47899
+ "value": 80,
47900
+ "unit": "px"
47901
+ },
47902
+ "spread": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ }
47463
47906
  }
47464
47907
  ],
47465
47908
  "$type": "shadow",
@@ -47475,18 +47918,42 @@
47475
47918
  {
47476
47919
  "color": "{overlay.borderColor}",
47477
47920
  "alpha": 1,
47478
- "offsetX": "0px",
47479
- "offsetY": "0px",
47480
- "blur": "0px",
47481
- "spread": "1px"
47921
+ "offsetX": {
47922
+ "value": 0,
47923
+ "unit": "px"
47924
+ },
47925
+ "offsetY": {
47926
+ "value": 0,
47927
+ "unit": "px"
47928
+ },
47929
+ "blur": {
47930
+ "value": 0,
47931
+ "unit": "px"
47932
+ },
47933
+ "spread": {
47934
+ "value": 1,
47935
+ "unit": "px"
47936
+ }
47482
47937
  },
47483
47938
  {
47484
47939
  "color": "{base.color.neutral.0}",
47485
47940
  "alpha": 1,
47486
- "offsetX": "0px",
47487
- "offsetY": "24px",
47488
- "blur": "48px",
47489
- "spread": "0px"
47941
+ "offsetX": {
47942
+ "value": 0,
47943
+ "unit": "px"
47944
+ },
47945
+ "offsetY": {
47946
+ "value": 24,
47947
+ "unit": "px"
47948
+ },
47949
+ "blur": {
47950
+ "value": 48,
47951
+ "unit": "px"
47952
+ },
47953
+ "spread": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ }
47490
47957
  }
47491
47958
  ],
47492
47959
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47507,8 +47974,9 @@
47507
47974
  },
47508
47975
  "shadow-floating-legacy": {
47509
47976
  "key": "{shadow.floating.legacy}",
47510
- "$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47977
+ "$value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47511
47978
  "$type": "shadow",
47979
+ "$description": "Legacy floating shadow for backward compatibility",
47512
47980
  "$extensions": {
47513
47981
  "org.primer.figma": {},
47514
47982
  "org.primer.overrides": {
@@ -47517,24 +47985,52 @@
47517
47985
  {
47518
47986
  "color": "#ffffff",
47519
47987
  "alpha": 0.4,
47520
- "offsetX": "0px",
47521
- "offsetY": "6px",
47522
- "blur": "12px",
47523
- "spread": "-3px"
47988
+ "offsetX": {
47989
+ "value": 0,
47990
+ "unit": "px"
47991
+ },
47992
+ "offsetY": {
47993
+ "value": 6,
47994
+ "unit": "px"
47995
+ },
47996
+ "blur": {
47997
+ "value": 12,
47998
+ "unit": "px"
47999
+ },
48000
+ "spread": {
48001
+ "value": -3,
48002
+ "unit": "px"
48003
+ }
47524
48004
  },
47525
48005
  {
47526
48006
  "color": "#ffffff",
47527
48007
  "alpha": 0.4,
47528
- "offsetX": "0px",
47529
- "offsetY": "6px",
47530
- "blur": "18px",
47531
- "spread": "0px"
48008
+ "offsetX": {
48009
+ "value": 0,
48010
+ "unit": "px"
48011
+ },
48012
+ "offsetY": {
48013
+ "value": 6,
48014
+ "unit": "px"
48015
+ },
48016
+ "blur": {
48017
+ "value": 18,
48018
+ "unit": "px"
48019
+ },
48020
+ "spread": {
48021
+ "value": 0,
48022
+ "unit": "px"
48023
+ }
47532
48024
  }
47533
48025
  ],
47534
48026
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47535
48027
  "isSource": true,
47536
48028
  "$type": "shadow"
47537
48029
  }
48030
+ },
48031
+ "org.primer.llm": {
48032
+ "usage": ["legacy-component", "backward-compatibility"],
48033
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47538
48034
  }
47539
48035
  },
47540
48036
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47544,21 +48040,46 @@
47544
48040
  {
47545
48041
  "color": "{base.color.neutral.12}",
47546
48042
  "alpha": 0.04,
47547
- "offsetX": "0px",
47548
- "offsetY": "6px",
47549
- "blur": "12px",
47550
- "spread": "-3px"
48043
+ "offsetX": {
48044
+ "value": 0,
48045
+ "unit": "px"
48046
+ },
48047
+ "offsetY": {
48048
+ "value": 6,
48049
+ "unit": "px"
48050
+ },
48051
+ "blur": {
48052
+ "value": 12,
48053
+ "unit": "px"
48054
+ },
48055
+ "spread": {
48056
+ "value": -3,
48057
+ "unit": "px"
48058
+ }
47551
48059
  },
47552
48060
  {
47553
48061
  "color": "{base.color.neutral.12}",
47554
48062
  "alpha": 0.12,
47555
- "offsetX": "0px",
47556
- "offsetY": "6px",
47557
- "blur": "18px",
47558
- "spread": "0px"
48063
+ "offsetX": {
48064
+ "value": 0,
48065
+ "unit": "px"
48066
+ },
48067
+ "offsetY": {
48068
+ "value": 6,
48069
+ "unit": "px"
48070
+ },
48071
+ "blur": {
48072
+ "value": 18,
48073
+ "unit": "px"
48074
+ },
48075
+ "spread": {
48076
+ "value": 0,
48077
+ "unit": "px"
48078
+ }
47559
48079
  }
47560
48080
  ],
47561
48081
  "$type": "shadow",
48082
+ "$description": "Legacy floating shadow for backward compatibility",
47562
48083
  "$extensions": {
47563
48084
  "org.primer.figma": {},
47564
48085
  "org.primer.overrides": {
@@ -47567,24 +48088,52 @@
47567
48088
  {
47568
48089
  "color": "{base.color.neutral.0}",
47569
48090
  "alpha": 0.4,
47570
- "offsetX": "0px",
47571
- "offsetY": "6px",
47572
- "blur": "12px",
47573
- "spread": "-3px"
48091
+ "offsetX": {
48092
+ "value": 0,
48093
+ "unit": "px"
48094
+ },
48095
+ "offsetY": {
48096
+ "value": 6,
48097
+ "unit": "px"
48098
+ },
48099
+ "blur": {
48100
+ "value": 12,
48101
+ "unit": "px"
48102
+ },
48103
+ "spread": {
48104
+ "value": -3,
48105
+ "unit": "px"
48106
+ }
47574
48107
  },
47575
48108
  {
47576
48109
  "color": "{base.color.neutral.0}",
47577
48110
  "alpha": 0.4,
47578
- "offsetX": "0px",
47579
- "offsetY": "6px",
47580
- "blur": "18px",
47581
- "spread": "0px"
48111
+ "offsetX": {
48112
+ "value": 0,
48113
+ "unit": "px"
48114
+ },
48115
+ "offsetY": {
48116
+ "value": 6,
48117
+ "unit": "px"
48118
+ },
48119
+ "blur": {
48120
+ "value": 18,
48121
+ "unit": "px"
48122
+ },
48123
+ "spread": {
48124
+ "value": 0,
48125
+ "unit": "px"
48126
+ }
47582
48127
  }
47583
48128
  ],
47584
48129
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47585
48130
  "isSource": true,
47586
48131
  "$type": "shadow"
47587
48132
  }
48133
+ },
48134
+ "org.primer.llm": {
48135
+ "usage": ["legacy-component", "backward-compatibility"],
48136
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47588
48137
  }
47589
48138
  },
47590
48139
  "key": "{shadow.floating.legacy}"
@@ -47595,8 +48144,9 @@
47595
48144
  },
47596
48145
  "shadow-floating-medium": {
47597
48146
  "key": "{shadow.floating.medium}",
47598
- "$value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
48147
+ "$value": "0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
47599
48148
  "$type": "shadow",
48149
+ "$description": "Medium floating shadow for popovers and action menus",
47600
48150
  "$extensions": {
47601
48151
  "org.primer.figma": {
47602
48152
  "collection": "mode",
@@ -47608,48 +48158,112 @@
47608
48158
  {
47609
48159
  "color": "#454c54",
47610
48160
  "alpha": 1,
47611
- "offsetX": "0px",
47612
- "offsetY": "0px",
47613
- "blur": "0px",
47614
- "spread": "1px"
48161
+ "offsetX": {
48162
+ "value": 0,
48163
+ "unit": "px"
48164
+ },
48165
+ "offsetY": {
48166
+ "value": 0,
48167
+ "unit": "px"
48168
+ },
48169
+ "blur": {
48170
+ "value": 0,
48171
+ "unit": "px"
48172
+ },
48173
+ "spread": {
48174
+ "value": 1,
48175
+ "unit": "px"
48176
+ }
47615
48177
  },
47616
48178
  {
47617
48179
  "color": "#ffffff",
47618
48180
  "alpha": 0.4,
47619
- "offsetX": "0px",
47620
- "offsetY": "8px",
47621
- "blur": "16px",
47622
- "spread": "-4px"
48181
+ "offsetX": {
48182
+ "value": 0,
48183
+ "unit": "px"
48184
+ },
48185
+ "offsetY": {
48186
+ "value": 8,
48187
+ "unit": "px"
48188
+ },
48189
+ "blur": {
48190
+ "value": 16,
48191
+ "unit": "px"
48192
+ },
48193
+ "spread": {
48194
+ "value": -4,
48195
+ "unit": "px"
48196
+ }
47623
48197
  },
47624
48198
  {
47625
48199
  "color": "#ffffff",
47626
48200
  "alpha": 0.4,
47627
- "offsetX": "0px",
47628
- "offsetY": "4px",
47629
- "blur": "32px",
47630
- "spread": "-4px"
48201
+ "offsetX": {
48202
+ "value": 0,
48203
+ "unit": "px"
48204
+ },
48205
+ "offsetY": {
48206
+ "value": 4,
48207
+ "unit": "px"
48208
+ },
48209
+ "blur": {
48210
+ "value": 32,
48211
+ "unit": "px"
48212
+ },
48213
+ "spread": {
48214
+ "value": -4,
48215
+ "unit": "px"
48216
+ }
47631
48217
  },
47632
48218
  {
47633
48219
  "color": "#ffffff",
47634
48220
  "alpha": 0.4,
47635
- "offsetX": "0px",
47636
- "offsetY": "24px",
47637
- "blur": "48px",
47638
- "spread": "-12px"
48221
+ "offsetX": {
48222
+ "value": 0,
48223
+ "unit": "px"
48224
+ },
48225
+ "offsetY": {
48226
+ "value": 24,
48227
+ "unit": "px"
48228
+ },
48229
+ "blur": {
48230
+ "value": 48,
48231
+ "unit": "px"
48232
+ },
48233
+ "spread": {
48234
+ "value": -12,
48235
+ "unit": "px"
48236
+ }
47639
48237
  },
47640
48238
  {
47641
48239
  "color": "#ffffff",
47642
48240
  "alpha": 0.4,
47643
- "offsetX": "0px",
47644
- "offsetY": "48px",
47645
- "blur": "96px",
47646
- "spread": "-24px"
48241
+ "offsetX": {
48242
+ "value": 0,
48243
+ "unit": "px"
48244
+ },
48245
+ "offsetY": {
48246
+ "value": 48,
48247
+ "unit": "px"
48248
+ },
48249
+ "blur": {
48250
+ "value": 96,
48251
+ "unit": "px"
48252
+ },
48253
+ "spread": {
48254
+ "value": -24,
48255
+ "unit": "px"
48256
+ }
47647
48257
  }
47648
48258
  ],
47649
48259
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47650
48260
  "isSource": true,
47651
48261
  "$type": "shadow"
47652
48262
  }
48263
+ },
48264
+ "org.primer.llm": {
48265
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48266
+ "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."
47653
48267
  }
47654
48268
  },
47655
48269
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47659,45 +48273,106 @@
47659
48273
  {
47660
48274
  "color": "{overlay.borderColor}",
47661
48275
  "alpha": 0,
47662
- "offsetX": "0px",
47663
- "offsetY": "0px",
47664
- "blur": "0px",
47665
- "spread": "1px"
48276
+ "offsetX": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "offsetY": {
48281
+ "value": 0,
48282
+ "unit": "px"
48283
+ },
48284
+ "blur": {
48285
+ "value": 0,
48286
+ "unit": "px"
48287
+ },
48288
+ "spread": {
48289
+ "value": 1,
48290
+ "unit": "px"
48291
+ }
47666
48292
  },
47667
48293
  {
47668
48294
  "color": "{base.color.neutral.12}",
47669
48295
  "alpha": 0.08,
47670
- "offsetX": "0px",
47671
- "offsetY": "8px",
47672
- "blur": "16px",
47673
- "spread": "-4px"
48296
+ "offsetX": {
48297
+ "value": 0,
48298
+ "unit": "px"
48299
+ },
48300
+ "offsetY": {
48301
+ "value": 8,
48302
+ "unit": "px"
48303
+ },
48304
+ "blur": {
48305
+ "value": 16,
48306
+ "unit": "px"
48307
+ },
48308
+ "spread": {
48309
+ "value": -4,
48310
+ "unit": "px"
48311
+ }
47674
48312
  },
47675
48313
  {
47676
48314
  "color": "{base.color.neutral.12}",
47677
48315
  "alpha": 0.08,
47678
- "offsetX": "0px",
47679
- "offsetY": "4px",
47680
- "blur": "32px",
47681
- "spread": "-4px"
48316
+ "offsetX": {
48317
+ "value": 0,
48318
+ "unit": "px"
48319
+ },
48320
+ "offsetY": {
48321
+ "value": 4,
48322
+ "unit": "px"
48323
+ },
48324
+ "blur": {
48325
+ "value": 32,
48326
+ "unit": "px"
48327
+ },
48328
+ "spread": {
48329
+ "value": -4,
48330
+ "unit": "px"
48331
+ }
47682
48332
  },
47683
48333
  {
47684
48334
  "color": "{base.color.neutral.12}",
47685
48335
  "alpha": 0.08,
47686
- "offsetX": "0px",
47687
- "offsetY": "24px",
47688
- "blur": "48px",
47689
- "spread": "-12px"
48336
+ "offsetX": {
48337
+ "value": 0,
48338
+ "unit": "px"
48339
+ },
48340
+ "offsetY": {
48341
+ "value": 24,
48342
+ "unit": "px"
48343
+ },
48344
+ "blur": {
48345
+ "value": 48,
48346
+ "unit": "px"
48347
+ },
48348
+ "spread": {
48349
+ "value": -12,
48350
+ "unit": "px"
48351
+ }
47690
48352
  },
47691
48353
  {
47692
48354
  "color": "{base.color.neutral.12}",
47693
48355
  "alpha": 0.08,
47694
- "offsetX": "0px",
47695
- "offsetY": "48px",
47696
- "blur": "96px",
47697
- "spread": "-24px"
48356
+ "offsetX": {
48357
+ "value": 0,
48358
+ "unit": "px"
48359
+ },
48360
+ "offsetY": {
48361
+ "value": 48,
48362
+ "unit": "px"
48363
+ },
48364
+ "blur": {
48365
+ "value": 96,
48366
+ "unit": "px"
48367
+ },
48368
+ "spread": {
48369
+ "value": -24,
48370
+ "unit": "px"
48371
+ }
47698
48372
  }
47699
48373
  ],
47700
48374
  "$type": "shadow",
48375
+ "$description": "Medium floating shadow for popovers and action menus",
47701
48376
  "$extensions": {
47702
48377
  "org.primer.figma": {
47703
48378
  "collection": "mode",
@@ -47709,48 +48384,112 @@
47709
48384
  {
47710
48385
  "color": "{overlay.borderColor}",
47711
48386
  "alpha": 1,
47712
- "offsetX": "0px",
47713
- "offsetY": "0px",
47714
- "blur": "0px",
47715
- "spread": "1px"
48387
+ "offsetX": {
48388
+ "value": 0,
48389
+ "unit": "px"
48390
+ },
48391
+ "offsetY": {
48392
+ "value": 0,
48393
+ "unit": "px"
48394
+ },
48395
+ "blur": {
48396
+ "value": 0,
48397
+ "unit": "px"
48398
+ },
48399
+ "spread": {
48400
+ "value": 1,
48401
+ "unit": "px"
48402
+ }
47716
48403
  },
47717
48404
  {
47718
48405
  "color": "{base.color.neutral.0}",
47719
48406
  "alpha": 0.4,
47720
- "offsetX": "0px",
47721
- "offsetY": "8px",
47722
- "blur": "16px",
47723
- "spread": "-4px"
48407
+ "offsetX": {
48408
+ "value": 0,
48409
+ "unit": "px"
48410
+ },
48411
+ "offsetY": {
48412
+ "value": 8,
48413
+ "unit": "px"
48414
+ },
48415
+ "blur": {
48416
+ "value": 16,
48417
+ "unit": "px"
48418
+ },
48419
+ "spread": {
48420
+ "value": -4,
48421
+ "unit": "px"
48422
+ }
47724
48423
  },
47725
48424
  {
47726
48425
  "color": "{base.color.neutral.0}",
47727
48426
  "alpha": 0.4,
47728
- "offsetX": "0px",
47729
- "offsetY": "4px",
47730
- "blur": "32px",
47731
- "spread": "-4px"
48427
+ "offsetX": {
48428
+ "value": 0,
48429
+ "unit": "px"
48430
+ },
48431
+ "offsetY": {
48432
+ "value": 4,
48433
+ "unit": "px"
48434
+ },
48435
+ "blur": {
48436
+ "value": 32,
48437
+ "unit": "px"
48438
+ },
48439
+ "spread": {
48440
+ "value": -4,
48441
+ "unit": "px"
48442
+ }
47732
48443
  },
47733
48444
  {
47734
48445
  "color": "{base.color.neutral.0}",
47735
48446
  "alpha": 0.4,
47736
- "offsetX": "0px",
47737
- "offsetY": "24px",
47738
- "blur": "48px",
47739
- "spread": "-12px"
48447
+ "offsetX": {
48448
+ "value": 0,
48449
+ "unit": "px"
48450
+ },
48451
+ "offsetY": {
48452
+ "value": 24,
48453
+ "unit": "px"
48454
+ },
48455
+ "blur": {
48456
+ "value": 48,
48457
+ "unit": "px"
48458
+ },
48459
+ "spread": {
48460
+ "value": -12,
48461
+ "unit": "px"
48462
+ }
47740
48463
  },
47741
48464
  {
47742
48465
  "color": "{base.color.neutral.0}",
47743
48466
  "alpha": 0.4,
47744
- "offsetX": "0px",
47745
- "offsetY": "48px",
47746
- "blur": "96px",
47747
- "spread": "-24px"
48467
+ "offsetX": {
48468
+ "value": 0,
48469
+ "unit": "px"
48470
+ },
48471
+ "offsetY": {
48472
+ "value": 48,
48473
+ "unit": "px"
48474
+ },
48475
+ "blur": {
48476
+ "value": 96,
48477
+ "unit": "px"
48478
+ },
48479
+ "spread": {
48480
+ "value": -24,
48481
+ "unit": "px"
48482
+ }
47748
48483
  }
47749
48484
  ],
47750
48485
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47751
48486
  "isSource": true,
47752
48487
  "$type": "shadow"
47753
48488
  }
48489
+ },
48490
+ "org.primer.llm": {
48491
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48492
+ "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."
47754
48493
  }
47755
48494
  },
47756
48495
  "key": "{shadow.floating.medium}"
@@ -47761,7 +48500,7 @@
47761
48500
  },
47762
48501
  "shadow-floating-small": {
47763
48502
  "key": "{shadow.floating.small}",
47764
- "$value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
48503
+ "$value": "0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47765
48504
  "$type": "shadow",
47766
48505
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47767
48506
  "$extensions": {
@@ -47775,26 +48514,62 @@
47775
48514
  {
47776
48515
  "color": "#454c54",
47777
48516
  "alpha": 1,
47778
- "offsetX": "0px",
47779
- "offsetY": "0px",
47780
- "blur": "0px",
47781
- "spread": "1px"
48517
+ "offsetX": {
48518
+ "value": 0,
48519
+ "unit": "px"
48520
+ },
48521
+ "offsetY": {
48522
+ "value": 0,
48523
+ "unit": "px"
48524
+ },
48525
+ "blur": {
48526
+ "value": 0,
48527
+ "unit": "px"
48528
+ },
48529
+ "spread": {
48530
+ "value": 1,
48531
+ "unit": "px"
48532
+ }
47782
48533
  },
47783
48534
  {
47784
48535
  "color": "#ffffff",
47785
48536
  "alpha": 0.4,
47786
- "offsetX": "0px",
47787
- "offsetY": "6px",
47788
- "blur": "12px",
47789
- "spread": "-3px"
48537
+ "offsetX": {
48538
+ "value": 0,
48539
+ "unit": "px"
48540
+ },
48541
+ "offsetY": {
48542
+ "value": 6,
48543
+ "unit": "px"
48544
+ },
48545
+ "blur": {
48546
+ "value": 12,
48547
+ "unit": "px"
48548
+ },
48549
+ "spread": {
48550
+ "value": -3,
48551
+ "unit": "px"
48552
+ }
47790
48553
  },
47791
48554
  {
47792
48555
  "color": "#ffffff",
47793
48556
  "alpha": 0.4,
47794
- "offsetX": "0px",
47795
- "offsetY": "6px",
47796
- "blur": "18px",
47797
- "spread": "0px"
48557
+ "offsetX": {
48558
+ "value": 0,
48559
+ "unit": "px"
48560
+ },
48561
+ "offsetY": {
48562
+ "value": 6,
48563
+ "unit": "px"
48564
+ },
48565
+ "blur": {
48566
+ "value": 18,
48567
+ "unit": "px"
48568
+ },
48569
+ "spread": {
48570
+ "value": 0,
48571
+ "unit": "px"
48572
+ }
47798
48573
  }
47799
48574
  ],
47800
48575
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47814,26 +48589,62 @@
47814
48589
  {
47815
48590
  "color": "{overlay.borderColor}",
47816
48591
  "alpha": 0.5,
47817
- "offsetX": "0px",
47818
- "offsetY": "0px",
47819
- "blur": "0px",
47820
- "spread": "1px"
48592
+ "offsetX": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "offsetY": {
48597
+ "value": 0,
48598
+ "unit": "px"
48599
+ },
48600
+ "blur": {
48601
+ "value": 0,
48602
+ "unit": "px"
48603
+ },
48604
+ "spread": {
48605
+ "value": 1,
48606
+ "unit": "px"
48607
+ }
47821
48608
  },
47822
48609
  {
47823
48610
  "color": "{base.color.neutral.12}",
47824
48611
  "alpha": 0.04,
47825
- "offsetX": "0px",
47826
- "offsetY": "6px",
47827
- "blur": "12px",
47828
- "spread": "-3px"
48612
+ "offsetX": {
48613
+ "value": 0,
48614
+ "unit": "px"
48615
+ },
48616
+ "offsetY": {
48617
+ "value": 6,
48618
+ "unit": "px"
48619
+ },
48620
+ "blur": {
48621
+ "value": 12,
48622
+ "unit": "px"
48623
+ },
48624
+ "spread": {
48625
+ "value": -3,
48626
+ "unit": "px"
48627
+ }
47829
48628
  },
47830
48629
  {
47831
48630
  "color": "{base.color.neutral.12}",
47832
48631
  "alpha": 0.12,
47833
- "offsetX": "0px",
47834
- "offsetY": "6px",
47835
- "blur": "18px",
47836
- "spread": "0px"
48632
+ "offsetX": {
48633
+ "value": 0,
48634
+ "unit": "px"
48635
+ },
48636
+ "offsetY": {
48637
+ "value": 6,
48638
+ "unit": "px"
48639
+ },
48640
+ "blur": {
48641
+ "value": 18,
48642
+ "unit": "px"
48643
+ },
48644
+ "spread": {
48645
+ "value": 0,
48646
+ "unit": "px"
48647
+ }
47837
48648
  }
47838
48649
  ],
47839
48650
  "$type": "shadow",
@@ -47849,26 +48660,62 @@
47849
48660
  {
47850
48661
  "color": "{overlay.borderColor}",
47851
48662
  "alpha": 1,
47852
- "offsetX": "0px",
47853
- "offsetY": "0px",
47854
- "blur": "0px",
47855
- "spread": "1px"
48663
+ "offsetX": {
48664
+ "value": 0,
48665
+ "unit": "px"
48666
+ },
48667
+ "offsetY": {
48668
+ "value": 0,
48669
+ "unit": "px"
48670
+ },
48671
+ "blur": {
48672
+ "value": 0,
48673
+ "unit": "px"
48674
+ },
48675
+ "spread": {
48676
+ "value": 1,
48677
+ "unit": "px"
48678
+ }
47856
48679
  },
47857
48680
  {
47858
48681
  "color": "{base.color.neutral.0}",
47859
48682
  "alpha": 0.4,
47860
- "offsetX": "0px",
47861
- "offsetY": "6px",
47862
- "blur": "12px",
47863
- "spread": "-3px"
48683
+ "offsetX": {
48684
+ "value": 0,
48685
+ "unit": "px"
48686
+ },
48687
+ "offsetY": {
48688
+ "value": 6,
48689
+ "unit": "px"
48690
+ },
48691
+ "blur": {
48692
+ "value": 12,
48693
+ "unit": "px"
48694
+ },
48695
+ "spread": {
48696
+ "value": -3,
48697
+ "unit": "px"
48698
+ }
47864
48699
  },
47865
48700
  {
47866
48701
  "color": "{base.color.neutral.0}",
47867
48702
  "alpha": 0.4,
47868
- "offsetX": "0px",
47869
- "offsetY": "6px",
47870
- "blur": "18px",
47871
- "spread": "0px"
48703
+ "offsetX": {
48704
+ "value": 0,
48705
+ "unit": "px"
48706
+ },
48707
+ "offsetY": {
48708
+ "value": 6,
48709
+ "unit": "px"
48710
+ },
48711
+ "blur": {
48712
+ "value": 18,
48713
+ "unit": "px"
48714
+ },
48715
+ "spread": {
48716
+ "value": 0,
48717
+ "unit": "px"
48718
+ }
47872
48719
  }
47873
48720
  ],
47874
48721
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47889,8 +48736,9 @@
47889
48736
  },
47890
48737
  "shadow-floating-xlarge": {
47891
48738
  "key": "{shadow.floating.xlarge}",
47892
- "$value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
48739
+ "$value": "0 0 0 1px #454c54, 0 56px 112px 0 #25292e52",
47893
48740
  "$type": "shadow",
48741
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47894
48742
  "$extensions": {
47895
48743
  "org.primer.figma": {
47896
48744
  "collection": "mode",
@@ -47902,24 +48750,52 @@
47902
48750
  {
47903
48751
  "color": "#454c54",
47904
48752
  "alpha": 1,
47905
- "offsetX": "0px",
47906
- "offsetY": "0px",
47907
- "blur": "0px",
47908
- "spread": "1px"
48753
+ "offsetX": {
48754
+ "value": 0,
48755
+ "unit": "px"
48756
+ },
48757
+ "offsetY": {
48758
+ "value": 0,
48759
+ "unit": "px"
48760
+ },
48761
+ "blur": {
48762
+ "value": 0,
48763
+ "unit": "px"
48764
+ },
48765
+ "spread": {
48766
+ "value": 1,
48767
+ "unit": "px"
48768
+ }
47909
48769
  },
47910
48770
  {
47911
48771
  "color": "#ffffff",
47912
48772
  "alpha": 1,
47913
- "offsetX": "0px",
47914
- "offsetY": "32px",
47915
- "blur": "64px",
47916
- "spread": "0px"
48773
+ "offsetX": {
48774
+ "value": 0,
48775
+ "unit": "px"
48776
+ },
48777
+ "offsetY": {
48778
+ "value": 32,
48779
+ "unit": "px"
48780
+ },
48781
+ "blur": {
48782
+ "value": 64,
48783
+ "unit": "px"
48784
+ },
48785
+ "spread": {
48786
+ "value": 0,
48787
+ "unit": "px"
48788
+ }
47917
48789
  }
47918
48790
  ],
47919
48791
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47920
48792
  "isSource": true,
47921
48793
  "$type": "shadow"
47922
48794
  }
48795
+ },
48796
+ "org.primer.llm": {
48797
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48798
+ "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."
47923
48799
  }
47924
48800
  },
47925
48801
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47929,21 +48805,46 @@
47929
48805
  {
47930
48806
  "color": "{overlay.borderColor}",
47931
48807
  "alpha": 0,
47932
- "offsetX": "0px",
47933
- "offsetY": "0px",
47934
- "blur": "0px",
47935
- "spread": "1px"
48808
+ "offsetX": {
48809
+ "value": 0,
48810
+ "unit": "px"
48811
+ },
48812
+ "offsetY": {
48813
+ "value": 0,
48814
+ "unit": "px"
48815
+ },
48816
+ "blur": {
48817
+ "value": 0,
48818
+ "unit": "px"
48819
+ },
48820
+ "spread": {
48821
+ "value": 1,
48822
+ "unit": "px"
48823
+ }
47936
48824
  },
47937
48825
  {
47938
48826
  "color": "{base.color.neutral.12}",
47939
48827
  "alpha": 0.32,
47940
- "offsetX": "0px",
47941
- "offsetY": "56px",
47942
- "blur": "112px",
47943
- "spread": "0px"
48828
+ "offsetX": {
48829
+ "value": 0,
48830
+ "unit": "px"
48831
+ },
48832
+ "offsetY": {
48833
+ "value": 56,
48834
+ "unit": "px"
48835
+ },
48836
+ "blur": {
48837
+ "value": 112,
48838
+ "unit": "px"
48839
+ },
48840
+ "spread": {
48841
+ "value": 0,
48842
+ "unit": "px"
48843
+ }
47944
48844
  }
47945
48845
  ],
47946
48846
  "$type": "shadow",
48847
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47947
48848
  "$extensions": {
47948
48849
  "org.primer.figma": {
47949
48850
  "collection": "mode",
@@ -47955,24 +48856,52 @@
47955
48856
  {
47956
48857
  "color": "{overlay.borderColor}",
47957
48858
  "alpha": 1,
47958
- "offsetX": "0px",
47959
- "offsetY": "0px",
47960
- "blur": "0px",
47961
- "spread": "1px"
48859
+ "offsetX": {
48860
+ "value": 0,
48861
+ "unit": "px"
48862
+ },
48863
+ "offsetY": {
48864
+ "value": 0,
48865
+ "unit": "px"
48866
+ },
48867
+ "blur": {
48868
+ "value": 0,
48869
+ "unit": "px"
48870
+ },
48871
+ "spread": {
48872
+ "value": 1,
48873
+ "unit": "px"
48874
+ }
47962
48875
  },
47963
48876
  {
47964
48877
  "color": "{base.color.neutral.0}",
47965
48878
  "alpha": 1,
47966
- "offsetX": "0px",
47967
- "offsetY": "32px",
47968
- "blur": "64px",
47969
- "spread": "0px"
48879
+ "offsetX": {
48880
+ "value": 0,
48881
+ "unit": "px"
48882
+ },
48883
+ "offsetY": {
48884
+ "value": 32,
48885
+ "unit": "px"
48886
+ },
48887
+ "blur": {
48888
+ "value": 64,
48889
+ "unit": "px"
48890
+ },
48891
+ "spread": {
48892
+ "value": 0,
48893
+ "unit": "px"
48894
+ }
47970
48895
  }
47971
48896
  ],
47972
48897
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47973
48898
  "isSource": true,
47974
48899
  "$type": "shadow"
47975
48900
  }
48901
+ },
48902
+ "org.primer.llm": {
48903
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48904
+ "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."
47976
48905
  }
47977
48906
  },
47978
48907
  "key": "{shadow.floating.xlarge}"
@@ -47983,8 +48912,9 @@
47983
48912
  },
47984
48913
  "shadow-inset": {
47985
48914
  "key": "{shadow.inset}",
47986
- "$value": "inset 0px 1px 0px 0px #0104090a",
48915
+ "$value": "inset 0 1px 0 0 #0104090a",
47987
48916
  "$type": "shadow",
48917
+ "$description": "Inset shadow for recessed elements",
47988
48918
  "$extensions": {
47989
48919
  "org.primer.figma": {
47990
48920
  "collection": "mode",
@@ -47995,16 +48925,32 @@
47995
48925
  "$value": {
47996
48926
  "color": "#ffffff",
47997
48927
  "alpha": 0.24,
47998
- "offsetX": "0px",
47999
- "offsetY": "1px",
48000
- "blur": "0px",
48001
- "spread": "0px",
48928
+ "offsetX": {
48929
+ "value": 0,
48930
+ "unit": "px"
48931
+ },
48932
+ "offsetY": {
48933
+ "value": 1,
48934
+ "unit": "px"
48935
+ },
48936
+ "blur": {
48937
+ "value": 0,
48938
+ "unit": "px"
48939
+ },
48940
+ "spread": {
48941
+ "value": 0,
48942
+ "unit": "px"
48943
+ },
48002
48944
  "inset": true
48003
48945
  },
48004
48946
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48005
48947
  "isSource": true,
48006
48948
  "$type": "shadow"
48007
48949
  }
48950
+ },
48951
+ "org.primer.llm": {
48952
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48953
+ "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."
48008
48954
  }
48009
48955
  },
48010
48956
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48013,13 +48959,26 @@
48013
48959
  "$value": {
48014
48960
  "color": "{base.color.neutral.13}",
48015
48961
  "alpha": 0.04,
48016
- "offsetX": "0px",
48017
- "offsetY": "1px",
48018
- "blur": "0px",
48019
- "spread": "0px",
48962
+ "offsetX": {
48963
+ "value": 0,
48964
+ "unit": "px"
48965
+ },
48966
+ "offsetY": {
48967
+ "value": 1,
48968
+ "unit": "px"
48969
+ },
48970
+ "blur": {
48971
+ "value": 0,
48972
+ "unit": "px"
48973
+ },
48974
+ "spread": {
48975
+ "value": 0,
48976
+ "unit": "px"
48977
+ },
48020
48978
  "inset": true
48021
48979
  },
48022
48980
  "$type": "shadow",
48981
+ "$description": "Inset shadow for recessed elements",
48023
48982
  "$extensions": {
48024
48983
  "org.primer.figma": {
48025
48984
  "collection": "mode",
@@ -48030,16 +48989,32 @@
48030
48989
  "$value": {
48031
48990
  "color": "{base.color.neutral.0}",
48032
48991
  "alpha": 0.24,
48033
- "offsetX": "0px",
48034
- "offsetY": "1px",
48035
- "blur": "0px",
48036
- "spread": "0px",
48992
+ "offsetX": {
48993
+ "value": 0,
48994
+ "unit": "px"
48995
+ },
48996
+ "offsetY": {
48997
+ "value": 1,
48998
+ "unit": "px"
48999
+ },
49000
+ "blur": {
49001
+ "value": 0,
49002
+ "unit": "px"
49003
+ },
49004
+ "spread": {
49005
+ "value": 0,
49006
+ "unit": "px"
49007
+ },
48037
49008
  "inset": true
48038
49009
  },
48039
49010
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48040
49011
  "isSource": true,
48041
49012
  "$type": "shadow"
48042
49013
  }
49014
+ },
49015
+ "org.primer.llm": {
49016
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
49017
+ "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."
48043
49018
  }
48044
49019
  },
48045
49020
  "key": "{shadow.inset}"
@@ -48050,8 +49025,9 @@
48050
49025
  },
48051
49026
  "shadow-resting-medium": {
48052
49027
  "key": "{shadow.resting.medium}",
48053
- "$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
49028
+ "$value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
48054
49029
  "$type": "shadow",
49030
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48055
49031
  "$extensions": {
48056
49032
  "org.primer.figma": {
48057
49033
  "collection": "mode",
@@ -48063,24 +49039,52 @@
48063
49039
  {
48064
49040
  "color": "#ffffff",
48065
49041
  "alpha": 0.4,
48066
- "offsetX": "0px",
48067
- "offsetY": "1px",
48068
- "blur": "1px",
48069
- "spread": "0px"
49042
+ "offsetX": {
49043
+ "value": 0,
49044
+ "unit": "px"
49045
+ },
49046
+ "offsetY": {
49047
+ "value": 1,
49048
+ "unit": "px"
49049
+ },
49050
+ "blur": {
49051
+ "value": 1,
49052
+ "unit": "px"
49053
+ },
49054
+ "spread": {
49055
+ "value": 0,
49056
+ "unit": "px"
49057
+ }
48070
49058
  },
48071
49059
  {
48072
49060
  "color": "#ffffff",
48073
49061
  "alpha": 0.8,
48074
- "offsetX": "0px",
48075
- "offsetY": "3px",
48076
- "blur": "6px",
48077
- "spread": "0px"
49062
+ "offsetX": {
49063
+ "value": 0,
49064
+ "unit": "px"
49065
+ },
49066
+ "offsetY": {
49067
+ "value": 3,
49068
+ "unit": "px"
49069
+ },
49070
+ "blur": {
49071
+ "value": 6,
49072
+ "unit": "px"
49073
+ },
49074
+ "spread": {
49075
+ "value": 0,
49076
+ "unit": "px"
49077
+ }
48078
49078
  }
48079
49079
  ],
48080
49080
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48081
49081
  "isSource": true,
48082
49082
  "$type": "shadow"
48083
49083
  }
49084
+ },
49085
+ "org.primer.llm": {
49086
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49087
+ "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."
48084
49088
  }
48085
49089
  },
48086
49090
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48090,21 +49094,46 @@
48090
49094
  {
48091
49095
  "color": "{base.color.neutral.12}",
48092
49096
  "alpha": 0.1,
48093
- "offsetX": "0px",
48094
- "offsetY": "1px",
48095
- "blur": "1px",
48096
- "spread": "0px"
49097
+ "offsetX": {
49098
+ "value": 0,
49099
+ "unit": "px"
49100
+ },
49101
+ "offsetY": {
49102
+ "value": 1,
49103
+ "unit": "px"
49104
+ },
49105
+ "blur": {
49106
+ "value": 1,
49107
+ "unit": "px"
49108
+ },
49109
+ "spread": {
49110
+ "value": 0,
49111
+ "unit": "px"
49112
+ }
48097
49113
  },
48098
49114
  {
48099
49115
  "color": "{base.color.neutral.12}",
48100
49116
  "alpha": 0.12,
48101
- "offsetX": "0px",
48102
- "offsetY": "3px",
48103
- "blur": "6px",
48104
- "spread": "0px"
49117
+ "offsetX": {
49118
+ "value": 0,
49119
+ "unit": "px"
49120
+ },
49121
+ "offsetY": {
49122
+ "value": 3,
49123
+ "unit": "px"
49124
+ },
49125
+ "blur": {
49126
+ "value": 6,
49127
+ "unit": "px"
49128
+ },
49129
+ "spread": {
49130
+ "value": 0,
49131
+ "unit": "px"
49132
+ }
48105
49133
  }
48106
49134
  ],
48107
49135
  "$type": "shadow",
49136
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48108
49137
  "$extensions": {
48109
49138
  "org.primer.figma": {
48110
49139
  "collection": "mode",
@@ -48116,24 +49145,52 @@
48116
49145
  {
48117
49146
  "color": "{base.color.neutral.0}",
48118
49147
  "alpha": 0.4,
48119
- "offsetX": "0px",
48120
- "offsetY": "1px",
48121
- "blur": "1px",
48122
- "spread": "0px"
49148
+ "offsetX": {
49149
+ "value": 0,
49150
+ "unit": "px"
49151
+ },
49152
+ "offsetY": {
49153
+ "value": 1,
49154
+ "unit": "px"
49155
+ },
49156
+ "blur": {
49157
+ "value": 1,
49158
+ "unit": "px"
49159
+ },
49160
+ "spread": {
49161
+ "value": 0,
49162
+ "unit": "px"
49163
+ }
48123
49164
  },
48124
49165
  {
48125
49166
  "color": "{base.color.neutral.0}",
48126
49167
  "alpha": 0.8,
48127
- "offsetX": "0px",
48128
- "offsetY": "3px",
48129
- "blur": "6px",
48130
- "spread": "0px"
49168
+ "offsetX": {
49169
+ "value": 0,
49170
+ "unit": "px"
49171
+ },
49172
+ "offsetY": {
49173
+ "value": 3,
49174
+ "unit": "px"
49175
+ },
49176
+ "blur": {
49177
+ "value": 6,
49178
+ "unit": "px"
49179
+ },
49180
+ "spread": {
49181
+ "value": 0,
49182
+ "unit": "px"
49183
+ }
48131
49184
  }
48132
49185
  ],
48133
49186
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48134
49187
  "isSource": true,
48135
49188
  "$type": "shadow"
48136
49189
  }
49190
+ },
49191
+ "org.primer.llm": {
49192
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49193
+ "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."
48137
49194
  }
48138
49195
  },
48139
49196
  "key": "{shadow.resting.medium}"
@@ -48144,8 +49201,9 @@
48144
49201
  },
48145
49202
  "shadow-resting-small": {
48146
49203
  "key": "{shadow.resting.small}",
48147
- "$value": "0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f",
49204
+ "$value": "0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908",
48148
49205
  "$type": "shadow",
49206
+ "$description": "Small resting shadow for buttons and interactive elements",
48149
49207
  "$extensions": {
48150
49208
  "org.primer.figma": {
48151
49209
  "collection": "mode",
@@ -48157,19 +49215,43 @@
48157
49215
  {
48158
49216
  "color": "#ffffff",
48159
49217
  "alpha": 0.6,
48160
- "offsetX": "0px",
48161
- "offsetY": "1px",
48162
- "blur": "1px",
48163
- "spread": "0px",
49218
+ "offsetX": {
49219
+ "value": 0,
49220
+ "unit": "px"
49221
+ },
49222
+ "offsetY": {
49223
+ "value": 1,
49224
+ "unit": "px"
49225
+ },
49226
+ "blur": {
49227
+ "value": 1,
49228
+ "unit": "px"
49229
+ },
49230
+ "spread": {
49231
+ "value": 0,
49232
+ "unit": "px"
49233
+ },
48164
49234
  "inset": false
48165
49235
  },
48166
49236
  {
48167
49237
  "color": "#ffffff",
48168
49238
  "alpha": 0.6,
48169
- "offsetX": "0px",
48170
- "offsetY": "1px",
48171
- "blur": "3px",
48172
- "spread": "0px",
49239
+ "offsetX": {
49240
+ "value": 0,
49241
+ "unit": "px"
49242
+ },
49243
+ "offsetY": {
49244
+ "value": 1,
49245
+ "unit": "px"
49246
+ },
49247
+ "blur": {
49248
+ "value": 3,
49249
+ "unit": "px"
49250
+ },
49251
+ "spread": {
49252
+ "value": 0,
49253
+ "unit": "px"
49254
+ },
48173
49255
  "inset": false
48174
49256
  }
48175
49257
  ],
@@ -48177,6 +49259,10 @@
48177
49259
  "isSource": true,
48178
49260
  "$type": "shadow"
48179
49261
  }
49262
+ },
49263
+ "org.primer.llm": {
49264
+ "usage": ["button", "interactive-card", "clickable-element"],
49265
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48180
49266
  }
48181
49267
  },
48182
49268
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48185,24 +49271,49 @@
48185
49271
  "$value": [
48186
49272
  {
48187
49273
  "color": "{base.color.neutral.13}",
48188
- "alpha": 0.06,
48189
- "offsetX": "0px",
48190
- "offsetY": "1px",
48191
- "blur": "1px",
48192
- "spread": "0px",
49274
+ "alpha": 0.04,
49275
+ "offsetX": {
49276
+ "value": 0,
49277
+ "unit": "px"
49278
+ },
49279
+ "offsetY": {
49280
+ "value": 1,
49281
+ "unit": "px"
49282
+ },
49283
+ "blur": {
49284
+ "value": 1,
49285
+ "unit": "px"
49286
+ },
49287
+ "spread": {
49288
+ "value": 0,
49289
+ "unit": "px"
49290
+ },
48193
49291
  "inset": false
48194
49292
  },
48195
49293
  {
48196
49294
  "color": "{base.color.neutral.13}",
48197
- "alpha": 0.06,
48198
- "offsetX": "0px",
48199
- "offsetY": "1px",
48200
- "blur": "3px",
48201
- "spread": "0px",
49295
+ "alpha": 0.03,
49296
+ "offsetX": {
49297
+ "value": 0,
49298
+ "unit": "px"
49299
+ },
49300
+ "offsetY": {
49301
+ "value": 1,
49302
+ "unit": "px"
49303
+ },
49304
+ "blur": {
49305
+ "value": 2,
49306
+ "unit": "px"
49307
+ },
49308
+ "spread": {
49309
+ "value": 0,
49310
+ "unit": "px"
49311
+ },
48202
49312
  "inset": false
48203
49313
  }
48204
49314
  ],
48205
49315
  "$type": "shadow",
49316
+ "$description": "Small resting shadow for buttons and interactive elements",
48206
49317
  "$extensions": {
48207
49318
  "org.primer.figma": {
48208
49319
  "collection": "mode",
@@ -48214,19 +49325,43 @@
48214
49325
  {
48215
49326
  "color": "{base.color.neutral.0}",
48216
49327
  "alpha": 0.6,
48217
- "offsetX": "0px",
48218
- "offsetY": "1px",
48219
- "blur": "1px",
48220
- "spread": "0px",
49328
+ "offsetX": {
49329
+ "value": 0,
49330
+ "unit": "px"
49331
+ },
49332
+ "offsetY": {
49333
+ "value": 1,
49334
+ "unit": "px"
49335
+ },
49336
+ "blur": {
49337
+ "value": 1,
49338
+ "unit": "px"
49339
+ },
49340
+ "spread": {
49341
+ "value": 0,
49342
+ "unit": "px"
49343
+ },
48221
49344
  "inset": false
48222
49345
  },
48223
49346
  {
48224
49347
  "color": "{base.color.neutral.0}",
48225
49348
  "alpha": 0.6,
48226
- "offsetX": "0px",
48227
- "offsetY": "1px",
48228
- "blur": "3px",
48229
- "spread": "0px",
49349
+ "offsetX": {
49350
+ "value": 0,
49351
+ "unit": "px"
49352
+ },
49353
+ "offsetY": {
49354
+ "value": 1,
49355
+ "unit": "px"
49356
+ },
49357
+ "blur": {
49358
+ "value": 3,
49359
+ "unit": "px"
49360
+ },
49361
+ "spread": {
49362
+ "value": 0,
49363
+ "unit": "px"
49364
+ },
48230
49365
  "inset": false
48231
49366
  }
48232
49367
  ],
@@ -48234,6 +49369,10 @@
48234
49369
  "isSource": true,
48235
49370
  "$type": "shadow"
48236
49371
  }
49372
+ },
49373
+ "org.primer.llm": {
49374
+ "usage": ["button", "interactive-card", "clickable-element"],
49375
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48237
49376
  }
48238
49377
  },
48239
49378
  "key": "{shadow.resting.small}"
@@ -48244,8 +49383,9 @@
48244
49383
  },
48245
49384
  "shadow-resting-xsmall": {
48246
49385
  "key": "{shadow.resting.xsmall}",
48247
- "$value": "0px 1px 1px 0px #0104090f",
49386
+ "$value": "0 1px 1px 0 #0104090d",
48248
49387
  "$type": "shadow",
49388
+ "$description": "Extra small resting shadow for minimal elevation",
48249
49389
  "$extensions": {
48250
49390
  "org.primer.figma": {
48251
49391
  "collection": "mode",
@@ -48256,16 +49396,32 @@
48256
49396
  "$value": {
48257
49397
  "color": "#ffffff",
48258
49398
  "alpha": 0.8,
48259
- "offsetX": "0px",
48260
- "offsetY": "1px",
48261
- "blur": "1px",
48262
- "spread": "0px",
49399
+ "offsetX": {
49400
+ "value": 0,
49401
+ "unit": "px"
49402
+ },
49403
+ "offsetY": {
49404
+ "value": 1,
49405
+ "unit": "px"
49406
+ },
49407
+ "blur": {
49408
+ "value": 1,
49409
+ "unit": "px"
49410
+ },
49411
+ "spread": {
49412
+ "value": 0,
49413
+ "unit": "px"
49414
+ },
48263
49415
  "inset": false
48264
49416
  },
48265
49417
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48266
49418
  "isSource": true,
48267
49419
  "$type": "shadow"
48268
49420
  }
49421
+ },
49422
+ "org.primer.llm": {
49423
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49424
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48269
49425
  }
48270
49426
  },
48271
49427
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48273,14 +49429,27 @@
48273
49429
  "original": {
48274
49430
  "$value": {
48275
49431
  "color": "{base.color.neutral.13}",
48276
- "alpha": 0.06,
48277
- "offsetX": "0px",
48278
- "offsetY": "1px",
48279
- "blur": "1px",
48280
- "spread": "0px",
49432
+ "alpha": 0.05,
49433
+ "offsetX": {
49434
+ "value": 0,
49435
+ "unit": "px"
49436
+ },
49437
+ "offsetY": {
49438
+ "value": 1,
49439
+ "unit": "px"
49440
+ },
49441
+ "blur": {
49442
+ "value": 1,
49443
+ "unit": "px"
49444
+ },
49445
+ "spread": {
49446
+ "value": 0,
49447
+ "unit": "px"
49448
+ },
48281
49449
  "inset": false
48282
49450
  },
48283
49451
  "$type": "shadow",
49452
+ "$description": "Extra small resting shadow for minimal elevation",
48284
49453
  "$extensions": {
48285
49454
  "org.primer.figma": {
48286
49455
  "collection": "mode",
@@ -48291,16 +49460,32 @@
48291
49460
  "$value": {
48292
49461
  "color": "{base.color.neutral.0}",
48293
49462
  "alpha": 0.8,
48294
- "offsetX": "0px",
48295
- "offsetY": "1px",
48296
- "blur": "1px",
48297
- "spread": "0px",
49463
+ "offsetX": {
49464
+ "value": 0,
49465
+ "unit": "px"
49466
+ },
49467
+ "offsetY": {
49468
+ "value": 1,
49469
+ "unit": "px"
49470
+ },
49471
+ "blur": {
49472
+ "value": 1,
49473
+ "unit": "px"
49474
+ },
49475
+ "spread": {
49476
+ "value": 0,
49477
+ "unit": "px"
49478
+ },
48298
49479
  "inset": false
48299
49480
  },
48300
49481
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48301
49482
  "isSource": true,
48302
49483
  "$type": "shadow"
48303
49484
  }
49485
+ },
49486
+ "org.primer.llm": {
49487
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49488
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48304
49489
  }
48305
49490
  },
48306
49491
  "key": "{shadow.resting.xsmall}"