@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}"
@@ -2454,6 +2498,10 @@
2454
2498
  },
2455
2499
  "org.primer.overrides": {
2456
2500
  "dark": "#ffffff"
2501
+ },
2502
+ "org.primer.llm": {
2503
+ "doNotUse": true,
2504
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2457
2505
  }
2458
2506
  },
2459
2507
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2470,6 +2518,10 @@
2470
2518
  },
2471
2519
  "org.primer.overrides": {
2472
2520
  "dark": "{base.color.neutral.13}"
2521
+ },
2522
+ "org.primer.llm": {
2523
+ "doNotUse": true,
2524
+ "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."
2473
2525
  }
2474
2526
  },
2475
2527
  "key": "{bgColor.white}"
@@ -2480,7 +2532,11 @@
2480
2532
  },
2481
2533
  "border-accent-emphasis": {
2482
2534
  "key": "{border.accent.emphasis}",
2483
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2535
+ "$value": {
2536
+ "color": "#1f6feb",
2537
+ "style": "solid",
2538
+ "width": ["0.0625rem", "1px"]
2539
+ },
2484
2540
  "$type": "border",
2485
2541
  "filePath": "src/tokens/functional/border/border.json5",
2486
2542
  "isSource": true,
@@ -2499,7 +2555,11 @@
2499
2555
  },
2500
2556
  "border-accent-muted": {
2501
2557
  "key": "{border.accent.muted}",
2502
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2558
+ "$value": {
2559
+ "color": "#388bfd66",
2560
+ "style": "solid",
2561
+ "width": ["0.0625rem", "1px"]
2562
+ },
2503
2563
  "$type": "border",
2504
2564
  "filePath": "src/tokens/functional/border/border.json5",
2505
2565
  "isSource": true,
@@ -2518,7 +2578,11 @@
2518
2578
  },
2519
2579
  "border-attention-emphasis": {
2520
2580
  "key": "{border.attention.emphasis}",
2521
- "$value": "0.00390625rem,0.0625px solid #9e6a03",
2581
+ "$value": {
2582
+ "color": "#9e6a03",
2583
+ "style": "solid",
2584
+ "width": ["0.0625rem", "1px"]
2585
+ },
2522
2586
  "$type": "border",
2523
2587
  "filePath": "src/tokens/functional/border/border.json5",
2524
2588
  "isSource": true,
@@ -2537,7 +2601,11 @@
2537
2601
  },
2538
2602
  "border-attention-muted": {
2539
2603
  "key": "{border.attention.muted}",
2540
- "$value": "0.00390625rem,0.0625px solid #bb800966",
2604
+ "$value": {
2605
+ "color": "#bb800966",
2606
+ "style": "solid",
2607
+ "width": ["0.0625rem", "1px"]
2608
+ },
2541
2609
  "$type": "border",
2542
2610
  "filePath": "src/tokens/functional/border/border.json5",
2543
2611
  "isSource": true,
@@ -2556,7 +2624,11 @@
2556
2624
  },
2557
2625
  "border-closed-emphasis": {
2558
2626
  "key": "{border.closed.emphasis}",
2559
- "$value": "0.00390625rem,0.0625px solid #da3633",
2627
+ "$value": {
2628
+ "color": "#da3633",
2629
+ "style": "solid",
2630
+ "width": ["0.0625rem", "1px"]
2631
+ },
2560
2632
  "$type": "border",
2561
2633
  "filePath": "src/tokens/functional/border/border.json5",
2562
2634
  "isSource": true,
@@ -2571,7 +2643,11 @@
2571
2643
  },
2572
2644
  "border-closed-muted": {
2573
2645
  "key": "{border.closed.muted}",
2574
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2646
+ "$value": {
2647
+ "color": "#f8514966",
2648
+ "style": "solid",
2649
+ "width": ["0.0625rem", "1px"]
2650
+ },
2575
2651
  "$type": "border",
2576
2652
  "filePath": "src/tokens/functional/border/border.json5",
2577
2653
  "isSource": true,
@@ -2586,7 +2662,11 @@
2586
2662
  },
2587
2663
  "border-danger-emphasis": {
2588
2664
  "key": "{border.danger.emphasis}",
2589
- "$value": "0.00390625rem,0.0625px solid #da3633",
2665
+ "$value": {
2666
+ "color": "#da3633",
2667
+ "style": "solid",
2668
+ "width": ["0.0625rem", "1px"]
2669
+ },
2590
2670
  "$type": "border",
2591
2671
  "filePath": "src/tokens/functional/border/border.json5",
2592
2672
  "isSource": true,
@@ -2605,7 +2685,11 @@
2605
2685
  },
2606
2686
  "border-danger-muted": {
2607
2687
  "key": "{border.danger.muted}",
2608
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2688
+ "$value": {
2689
+ "color": "#f8514966",
2690
+ "style": "solid",
2691
+ "width": ["0.0625rem", "1px"]
2692
+ },
2609
2693
  "$type": "border",
2610
2694
  "filePath": "src/tokens/functional/border/border.json5",
2611
2695
  "isSource": true,
@@ -2624,7 +2708,11 @@
2624
2708
  },
2625
2709
  "border-default": {
2626
2710
  "key": "{border.default}",
2627
- "$value": "0.00390625rem,0.0625px solid #3d444d",
2711
+ "$value": {
2712
+ "color": "#3d444d",
2713
+ "style": "solid",
2714
+ "width": ["0.0625rem", "1px"]
2715
+ },
2628
2716
  "$type": "border",
2629
2717
  "filePath": "src/tokens/functional/border/border.json5",
2630
2718
  "isSource": true,
@@ -2643,7 +2731,11 @@
2643
2731
  },
2644
2732
  "border-disabled": {
2645
2733
  "key": "{border.disabled}",
2646
- "$value": "0.00390625rem,0.0625px solid #656c761a",
2734
+ "$value": {
2735
+ "color": "#656c761a",
2736
+ "style": "solid",
2737
+ "width": ["0.0625rem", "1px"]
2738
+ },
2647
2739
  "$type": "border",
2648
2740
  "filePath": "src/tokens/functional/border/border.json5",
2649
2741
  "isSource": true,
@@ -2662,7 +2754,11 @@
2662
2754
  },
2663
2755
  "border-done-emphasis": {
2664
2756
  "key": "{border.done.emphasis}",
2665
- "$value": "0.00390625rem,0.0625px solid #8957e5",
2757
+ "$value": {
2758
+ "color": "#8957e5",
2759
+ "style": "solid",
2760
+ "width": ["0.0625rem", "1px"]
2761
+ },
2666
2762
  "$type": "border",
2667
2763
  "filePath": "src/tokens/functional/border/border.json5",
2668
2764
  "isSource": true,
@@ -2681,7 +2777,11 @@
2681
2777
  },
2682
2778
  "border-done-muted": {
2683
2779
  "key": "{border.done.muted}",
2684
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
2780
+ "$value": {
2781
+ "color": "#ab7df866",
2782
+ "style": "solid",
2783
+ "width": ["0.0625rem", "1px"]
2784
+ },
2685
2785
  "$type": "border",
2686
2786
  "filePath": "src/tokens/functional/border/border.json5",
2687
2787
  "isSource": true,
@@ -2700,7 +2800,11 @@
2700
2800
  },
2701
2801
  "border-emphasis": {
2702
2802
  "key": "{border.emphasis}",
2703
- "$value": "0.00390625rem,0.0625px solid #656c76",
2803
+ "$value": {
2804
+ "color": "#656c76",
2805
+ "style": "solid",
2806
+ "width": ["0.0625rem", "1px"]
2807
+ },
2704
2808
  "$type": "border",
2705
2809
  "filePath": "src/tokens/functional/border/border.json5",
2706
2810
  "isSource": true,
@@ -2719,7 +2823,11 @@
2719
2823
  },
2720
2824
  "border-muted": {
2721
2825
  "key": "{border.muted}",
2722
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2826
+ "$value": {
2827
+ "color": "#3d444db3",
2828
+ "style": "solid",
2829
+ "width": ["0.0625rem", "1px"]
2830
+ },
2723
2831
  "$type": "border",
2724
2832
  "filePath": "src/tokens/functional/border/border.json5",
2725
2833
  "isSource": true,
@@ -2738,7 +2846,11 @@
2738
2846
  },
2739
2847
  "border-neutral-emphasis": {
2740
2848
  "key": "{border.neutral.emphasis}",
2741
- "$value": "0.00390625rem,0.0625px solid #656c76",
2849
+ "$value": {
2850
+ "color": "#656c76",
2851
+ "style": "solid",
2852
+ "width": ["0.0625rem", "1px"]
2853
+ },
2742
2854
  "$type": "border",
2743
2855
  "filePath": "src/tokens/functional/border/border.json5",
2744
2856
  "isSource": true,
@@ -2757,7 +2869,11 @@
2757
2869
  },
2758
2870
  "border-neutral-muted": {
2759
2871
  "key": "{border.neutral.muted}",
2760
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2872
+ "$value": {
2873
+ "color": "#3d444db3",
2874
+ "style": "solid",
2875
+ "width": ["0.0625rem", "1px"]
2876
+ },
2761
2877
  "$type": "border",
2762
2878
  "filePath": "src/tokens/functional/border/border.json5",
2763
2879
  "isSource": true,
@@ -2776,7 +2892,11 @@
2776
2892
  },
2777
2893
  "border-open-emphasis": {
2778
2894
  "key": "{border.open.emphasis}",
2779
- "$value": "0.00390625rem,0.0625px solid #238636",
2895
+ "$value": {
2896
+ "color": "#238636",
2897
+ "style": "solid",
2898
+ "width": ["0.0625rem", "1px"]
2899
+ },
2780
2900
  "$type": "border",
2781
2901
  "filePath": "src/tokens/functional/border/border.json5",
2782
2902
  "isSource": true,
@@ -2791,7 +2911,11 @@
2791
2911
  },
2792
2912
  "border-open-muted": {
2793
2913
  "key": "{border.open.muted}",
2794
- "$value": "0.00390625rem,0.0625px solid #2ea04366",
2914
+ "$value": {
2915
+ "color": "#2ea04366",
2916
+ "style": "solid",
2917
+ "width": ["0.0625rem", "1px"]
2918
+ },
2795
2919
  "$type": "border",
2796
2920
  "filePath": "src/tokens/functional/border/border.json5",
2797
2921
  "isSource": true,
@@ -2806,7 +2930,11 @@
2806
2930
  },
2807
2931
  "border-severe-emphasis": {
2808
2932
  "key": "{border.severe.emphasis}",
2809
- "$value": "0.00390625rem,0.0625px solid #bd561d",
2933
+ "$value": {
2934
+ "color": "#bd561d",
2935
+ "style": "solid",
2936
+ "width": ["0.0625rem", "1px"]
2937
+ },
2810
2938
  "$type": "border",
2811
2939
  "filePath": "src/tokens/functional/border/border.json5",
2812
2940
  "isSource": true,
@@ -2825,7 +2953,11 @@
2825
2953
  },
2826
2954
  "border-severe-muted": {
2827
2955
  "key": "{border.severe.muted}",
2828
- "$value": "0.00390625rem,0.0625px solid #db6d2866",
2956
+ "$value": {
2957
+ "color": "#db6d2866",
2958
+ "style": "solid",
2959
+ "width": ["0.0625rem", "1px"]
2960
+ },
2829
2961
  "$type": "border",
2830
2962
  "filePath": "src/tokens/functional/border/border.json5",
2831
2963
  "isSource": true,
@@ -2844,7 +2976,11 @@
2844
2976
  },
2845
2977
  "border-sponsors-emphasis": {
2846
2978
  "key": "{border.sponsors.emphasis}",
2847
- "$value": "0.00390625rem,0.0625px solid #bf4b8a",
2979
+ "$value": {
2980
+ "color": "#bf4b8a",
2981
+ "style": "solid",
2982
+ "width": ["0.0625rem", "1px"]
2983
+ },
2848
2984
  "$type": "border",
2849
2985
  "filePath": "src/tokens/functional/border/border.json5",
2850
2986
  "isSource": true,
@@ -2863,7 +2999,11 @@
2863
2999
  },
2864
3000
  "border-sponsors-muted": {
2865
3001
  "key": "{border.sponsors.muted}",
2866
- "$value": "0.00390625rem,0.0625px solid #db61a266",
3002
+ "$value": {
3003
+ "color": "#db61a266",
3004
+ "style": "solid",
3005
+ "width": ["0.0625rem", "1px"]
3006
+ },
2867
3007
  "$type": "border",
2868
3008
  "filePath": "src/tokens/functional/border/border.json5",
2869
3009
  "isSource": true,
@@ -2882,7 +3022,11 @@
2882
3022
  },
2883
3023
  "border-success-emphasis": {
2884
3024
  "key": "{border.success.emphasis}",
2885
- "$value": "0.00390625rem,0.0625px solid #238636",
3025
+ "$value": {
3026
+ "color": "#238636",
3027
+ "style": "solid",
3028
+ "width": ["0.0625rem", "1px"]
3029
+ },
2886
3030
  "$type": "border",
2887
3031
  "filePath": "src/tokens/functional/border/border.json5",
2888
3032
  "isSource": true,
@@ -2901,7 +3045,11 @@
2901
3045
  },
2902
3046
  "border-success-muted": {
2903
3047
  "key": "{border.success.muted}",
2904
- "$value": "0.00390625rem,0.0625px solid #2ea04366",
3048
+ "$value": {
3049
+ "color": "#2ea04366",
3050
+ "style": "solid",
3051
+ "width": ["0.0625rem", "1px"]
3052
+ },
2905
3053
  "$type": "border",
2906
3054
  "filePath": "src/tokens/functional/border/border.json5",
2907
3055
  "isSource": true,
@@ -2920,7 +3068,11 @@
2920
3068
  },
2921
3069
  "border-transparent": {
2922
3070
  "key": "{border.transparent}",
2923
- "$value": "0.00390625rem,0.0625px solid #00000000",
3071
+ "$value": {
3072
+ "color": "#00000000",
3073
+ "style": "solid",
3074
+ "width": ["0.0625rem", "1px"]
3075
+ },
2924
3076
  "$type": "border",
2925
3077
  "filePath": "src/tokens/functional/border/border.json5",
2926
3078
  "isSource": true,
@@ -2939,7 +3091,11 @@
2939
3091
  },
2940
3092
  "border-upsell-emphasis": {
2941
3093
  "key": "{border.upsell.emphasis}",
2942
- "$value": "0.00390625rem,0.0625px solid #8957e5",
3094
+ "$value": {
3095
+ "color": "#8957e5",
3096
+ "style": "solid",
3097
+ "width": ["0.0625rem", "1px"]
3098
+ },
2943
3099
  "$type": "border",
2944
3100
  "filePath": "src/tokens/functional/border/border.json5",
2945
3101
  "isSource": true,
@@ -2958,7 +3114,11 @@
2958
3114
  },
2959
3115
  "border-upsell-muted": {
2960
3116
  "key": "{border.upsell.muted}",
2961
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
3117
+ "$value": {
3118
+ "color": "#ab7df866",
3119
+ "style": "solid",
3120
+ "width": ["0.0625rem", "1px"]
3121
+ },
2962
3122
  "$type": "border",
2963
3123
  "filePath": "src/tokens/functional/border/border.json5",
2964
3124
  "isSource": true,
@@ -6944,7 +7104,7 @@
6944
7104
  },
6945
7105
  "button-danger-shadow-selected": {
6946
7106
  "key": "{button.danger.shadow.selected}",
6947
- "$value": "0px 0px 0px 0px #000000",
7107
+ "$value": "0 0 0 0 #000000",
6948
7108
  "$type": "shadow",
6949
7109
  "$extensions": {
6950
7110
  "org.primer.figma": {
@@ -6957,10 +7117,22 @@
6957
7117
  {
6958
7118
  "color": "#3d1300",
6959
7119
  "alpha": 0.2,
6960
- "offsetX": "0px",
6961
- "offsetY": "1px",
6962
- "blur": "0px",
6963
- "spread": "0px",
7120
+ "offsetX": {
7121
+ "value": 0,
7122
+ "unit": "px"
7123
+ },
7124
+ "offsetY": {
7125
+ "value": 1,
7126
+ "unit": "px"
7127
+ },
7128
+ "blur": {
7129
+ "value": 0,
7130
+ "unit": "px"
7131
+ },
7132
+ "spread": {
7133
+ "value": 0,
7134
+ "unit": "px"
7135
+ },
6964
7136
  "inset": true
6965
7137
  }
6966
7138
  ],
@@ -6973,10 +7145,22 @@
6973
7145
  {
6974
7146
  "color": "#00000000",
6975
7147
  "alpha": 0,
6976
- "offsetX": "0px",
6977
- "offsetY": "0px",
6978
- "blur": "0px",
6979
- "spread": "0px",
7148
+ "offsetX": {
7149
+ "value": 0,
7150
+ "unit": "px"
7151
+ },
7152
+ "offsetY": {
7153
+ "value": 0,
7154
+ "unit": "px"
7155
+ },
7156
+ "blur": {
7157
+ "value": 0,
7158
+ "unit": "px"
7159
+ },
7160
+ "spread": {
7161
+ "value": 0,
7162
+ "unit": "px"
7163
+ },
6980
7164
  "inset": false
6981
7165
  }
6982
7166
  ],
@@ -6993,10 +7177,22 @@
6993
7177
  {
6994
7178
  "color": "{base.color.transparent}",
6995
7179
  "alpha": 0,
6996
- "offsetX": "0px",
6997
- "offsetY": "0px",
6998
- "blur": "0px",
6999
- "spread": "0px",
7180
+ "offsetX": {
7181
+ "value": 0,
7182
+ "unit": "px"
7183
+ },
7184
+ "offsetY": {
7185
+ "value": 0,
7186
+ "unit": "px"
7187
+ },
7188
+ "blur": {
7189
+ "value": 0,
7190
+ "unit": "px"
7191
+ },
7192
+ "spread": {
7193
+ "value": 0,
7194
+ "unit": "px"
7195
+ },
7000
7196
  "inset": false
7001
7197
  }
7002
7198
  ],
@@ -7012,10 +7208,22 @@
7012
7208
  {
7013
7209
  "color": "{base.color.orange.9}",
7014
7210
  "alpha": 0.2,
7015
- "offsetX": "0px",
7016
- "offsetY": "1px",
7017
- "blur": "0px",
7018
- "spread": "0px",
7211
+ "offsetX": {
7212
+ "value": 0,
7213
+ "unit": "px"
7214
+ },
7215
+ "offsetY": {
7216
+ "value": 1,
7217
+ "unit": "px"
7218
+ },
7219
+ "blur": {
7220
+ "value": 0,
7221
+ "unit": "px"
7222
+ },
7223
+ "spread": {
7224
+ "value": 0,
7225
+ "unit": "px"
7226
+ },
7019
7227
  "inset": true
7020
7228
  }
7021
7229
  ],
@@ -7028,10 +7236,22 @@
7028
7236
  {
7029
7237
  "color": "{base.color.transparent}",
7030
7238
  "alpha": 0,
7031
- "offsetX": "0px",
7032
- "offsetY": "0px",
7033
- "blur": "0px",
7034
- "spread": "0px",
7239
+ "offsetX": {
7240
+ "value": 0,
7241
+ "unit": "px"
7242
+ },
7243
+ "offsetY": {
7244
+ "value": 0,
7245
+ "unit": "px"
7246
+ },
7247
+ "blur": {
7248
+ "value": 0,
7249
+ "unit": "px"
7250
+ },
7251
+ "spread": {
7252
+ "value": 0,
7253
+ "unit": "px"
7254
+ },
7035
7255
  "inset": false
7036
7256
  }
7037
7257
  ],
@@ -7407,7 +7627,7 @@
7407
7627
  },
7408
7628
  "button-default-shadow-resting": {
7409
7629
  "key": "{button.default.shadow.resting}",
7410
- "$value": "0px 0px 0px 0px #000000",
7630
+ "$value": "0 0 0 0 #000000",
7411
7631
  "$type": "shadow",
7412
7632
  "$extensions": {
7413
7633
  "org.primer.figma": {
@@ -7420,10 +7640,22 @@
7420
7640
  {
7421
7641
  "color": "#00000000",
7422
7642
  "alpha": 0,
7423
- "offsetX": "0px",
7424
- "offsetY": "0px",
7425
- "blur": "0px",
7426
- "spread": "0px",
7643
+ "offsetX": {
7644
+ "value": 0,
7645
+ "unit": "px"
7646
+ },
7647
+ "offsetY": {
7648
+ "value": 0,
7649
+ "unit": "px"
7650
+ },
7651
+ "blur": {
7652
+ "value": 0,
7653
+ "unit": "px"
7654
+ },
7655
+ "spread": {
7656
+ "value": 0,
7657
+ "unit": "px"
7658
+ },
7427
7659
  "inset": false
7428
7660
  }
7429
7661
  ],
@@ -7440,10 +7672,22 @@
7440
7672
  {
7441
7673
  "color": "{base.color.transparent}",
7442
7674
  "alpha": 0,
7443
- "offsetX": "0px",
7444
- "offsetY": "0px",
7445
- "blur": "0px",
7446
- "spread": "0px",
7675
+ "offsetX": {
7676
+ "value": 0,
7677
+ "unit": "px"
7678
+ },
7679
+ "offsetY": {
7680
+ "value": 0,
7681
+ "unit": "px"
7682
+ },
7683
+ "blur": {
7684
+ "value": 0,
7685
+ "unit": "px"
7686
+ },
7687
+ "spread": {
7688
+ "value": 0,
7689
+ "unit": "px"
7690
+ },
7447
7691
  "inset": false
7448
7692
  }
7449
7693
  ],
@@ -7459,10 +7703,22 @@
7459
7703
  {
7460
7704
  "color": "{base.color.transparent}",
7461
7705
  "alpha": 0,
7462
- "offsetX": "0px",
7463
- "offsetY": "0px",
7464
- "blur": "0px",
7465
- "spread": "0px",
7706
+ "offsetX": {
7707
+ "value": 0,
7708
+ "unit": "px"
7709
+ },
7710
+ "offsetY": {
7711
+ "value": 0,
7712
+ "unit": "px"
7713
+ },
7714
+ "blur": {
7715
+ "value": 0,
7716
+ "unit": "px"
7717
+ },
7718
+ "spread": {
7719
+ "value": 0,
7720
+ "unit": "px"
7721
+ },
7466
7722
  "inset": false
7467
7723
  }
7468
7724
  ],
@@ -9166,7 +9422,7 @@
9166
9422
  },
9167
9423
  "button-outline-shadow-selected": {
9168
9424
  "key": "{button.outline.shadow.selected}",
9169
- "$value": "0px 0px 0px 0px #000000",
9425
+ "$value": "0 0 0 0 #000000",
9170
9426
  "$type": "shadow",
9171
9427
  "$extensions": {
9172
9428
  "org.primer.figma": {
@@ -9179,10 +9435,22 @@
9179
9435
  {
9180
9436
  "color": "#00000000",
9181
9437
  "alpha": 0,
9182
- "offsetX": "0px",
9183
- "offsetY": "0px",
9184
- "blur": "0px",
9185
- "spread": "0px",
9438
+ "offsetX": {
9439
+ "value": 0,
9440
+ "unit": "px"
9441
+ },
9442
+ "offsetY": {
9443
+ "value": 0,
9444
+ "unit": "px"
9445
+ },
9446
+ "blur": {
9447
+ "value": 0,
9448
+ "unit": "px"
9449
+ },
9450
+ "spread": {
9451
+ "value": 0,
9452
+ "unit": "px"
9453
+ },
9186
9454
  "inset": false
9187
9455
  }
9188
9456
  ],
@@ -9199,10 +9467,22 @@
9199
9467
  {
9200
9468
  "color": "{base.color.transparent}",
9201
9469
  "alpha": 0,
9202
- "offsetX": "0px",
9203
- "offsetY": "0px",
9204
- "blur": "0px",
9205
- "spread": "0px",
9470
+ "offsetX": {
9471
+ "value": 0,
9472
+ "unit": "px"
9473
+ },
9474
+ "offsetY": {
9475
+ "value": 0,
9476
+ "unit": "px"
9477
+ },
9478
+ "blur": {
9479
+ "value": 0,
9480
+ "unit": "px"
9481
+ },
9482
+ "spread": {
9483
+ "value": 0,
9484
+ "unit": "px"
9485
+ },
9206
9486
  "inset": false
9207
9487
  }
9208
9488
  ],
@@ -9218,10 +9498,22 @@
9218
9498
  {
9219
9499
  "color": "{base.color.transparent}",
9220
9500
  "alpha": 0,
9221
- "offsetX": "0px",
9222
- "offsetY": "0px",
9223
- "blur": "0px",
9224
- "spread": "0px",
9501
+ "offsetX": {
9502
+ "value": 0,
9503
+ "unit": "px"
9504
+ },
9505
+ "offsetY": {
9506
+ "value": 0,
9507
+ "unit": "px"
9508
+ },
9509
+ "blur": {
9510
+ "value": 0,
9511
+ "unit": "px"
9512
+ },
9513
+ "spread": {
9514
+ "value": 0,
9515
+ "unit": "px"
9516
+ },
9225
9517
  "inset": false
9226
9518
  }
9227
9519
  ],
@@ -10372,7 +10664,7 @@
10372
10664
  },
10373
10665
  "button-primary-shadow-selected": {
10374
10666
  "key": "{button.primary.shadow.selected}",
10375
- "$value": "0px 0px 0px 0px #000000",
10667
+ "$value": "0 0 0 0 #000000",
10376
10668
  "$type": "shadow",
10377
10669
  "$extensions": {
10378
10670
  "org.primer.figma": {
@@ -10385,10 +10677,22 @@
10385
10677
  {
10386
10678
  "color": "#051d4d",
10387
10679
  "alpha": 0.3,
10388
- "offsetX": "0px",
10389
- "offsetY": "1px",
10390
- "blur": "0px",
10391
- "spread": "0px",
10680
+ "offsetX": {
10681
+ "value": 0,
10682
+ "unit": "px"
10683
+ },
10684
+ "offsetY": {
10685
+ "value": 1,
10686
+ "unit": "px"
10687
+ },
10688
+ "blur": {
10689
+ "value": 0,
10690
+ "unit": "px"
10691
+ },
10692
+ "spread": {
10693
+ "value": 0,
10694
+ "unit": "px"
10695
+ },
10392
10696
  "inset": true
10393
10697
  }
10394
10698
  ],
@@ -10401,10 +10705,22 @@
10401
10705
  {
10402
10706
  "color": "#051d4d",
10403
10707
  "alpha": 0.3,
10404
- "offsetX": "0px",
10405
- "offsetY": "1px",
10406
- "blur": "0px",
10407
- "spread": "0px",
10708
+ "offsetX": {
10709
+ "value": 0,
10710
+ "unit": "px"
10711
+ },
10712
+ "offsetY": {
10713
+ "value": 1,
10714
+ "unit": "px"
10715
+ },
10716
+ "blur": {
10717
+ "value": 0,
10718
+ "unit": "px"
10719
+ },
10720
+ "spread": {
10721
+ "value": 0,
10722
+ "unit": "px"
10723
+ },
10408
10724
  "inset": true
10409
10725
  }
10410
10726
  ],
@@ -10417,10 +10733,22 @@
10417
10733
  {
10418
10734
  "color": "#00000000",
10419
10735
  "alpha": 0,
10420
- "offsetX": "0px",
10421
- "offsetY": "0px",
10422
- "blur": "0px",
10423
- "spread": "0px",
10736
+ "offsetX": {
10737
+ "value": 0,
10738
+ "unit": "px"
10739
+ },
10740
+ "offsetY": {
10741
+ "value": 0,
10742
+ "unit": "px"
10743
+ },
10744
+ "blur": {
10745
+ "value": 0,
10746
+ "unit": "px"
10747
+ },
10748
+ "spread": {
10749
+ "value": 0,
10750
+ "unit": "px"
10751
+ },
10424
10752
  "inset": false
10425
10753
  }
10426
10754
  ],
@@ -10437,10 +10765,22 @@
10437
10765
  {
10438
10766
  "color": "{base.color.transparent}",
10439
10767
  "alpha": 0,
10440
- "offsetX": "0px",
10441
- "offsetY": "0px",
10442
- "blur": "0px",
10443
- "spread": "0px",
10768
+ "offsetX": {
10769
+ "value": 0,
10770
+ "unit": "px"
10771
+ },
10772
+ "offsetY": {
10773
+ "value": 0,
10774
+ "unit": "px"
10775
+ },
10776
+ "blur": {
10777
+ "value": 0,
10778
+ "unit": "px"
10779
+ },
10780
+ "spread": {
10781
+ "value": 0,
10782
+ "unit": "px"
10783
+ },
10444
10784
  "inset": false
10445
10785
  }
10446
10786
  ],
@@ -10456,10 +10796,22 @@
10456
10796
  {
10457
10797
  "color": "{base.color.blue.9}",
10458
10798
  "alpha": 0.3,
10459
- "offsetX": "0px",
10460
- "offsetY": "1px",
10461
- "blur": "0px",
10462
- "spread": "0px",
10799
+ "offsetX": {
10800
+ "value": 0,
10801
+ "unit": "px"
10802
+ },
10803
+ "offsetY": {
10804
+ "value": 1,
10805
+ "unit": "px"
10806
+ },
10807
+ "blur": {
10808
+ "value": 0,
10809
+ "unit": "px"
10810
+ },
10811
+ "spread": {
10812
+ "value": 0,
10813
+ "unit": "px"
10814
+ },
10463
10815
  "inset": true
10464
10816
  }
10465
10817
  ],
@@ -10472,10 +10824,22 @@
10472
10824
  {
10473
10825
  "color": "{base.color.blue.9}",
10474
10826
  "alpha": 0.3,
10475
- "offsetX": "0px",
10476
- "offsetY": "1px",
10477
- "blur": "0px",
10478
- "spread": "0px",
10827
+ "offsetX": {
10828
+ "value": 0,
10829
+ "unit": "px"
10830
+ },
10831
+ "offsetY": {
10832
+ "value": 1,
10833
+ "unit": "px"
10834
+ },
10835
+ "blur": {
10836
+ "value": 0,
10837
+ "unit": "px"
10838
+ },
10839
+ "spread": {
10840
+ "value": 0,
10841
+ "unit": "px"
10842
+ },
10479
10843
  "inset": true
10480
10844
  }
10481
10845
  ],
@@ -10488,10 +10852,22 @@
10488
10852
  {
10489
10853
  "color": "{base.color.transparent}",
10490
10854
  "alpha": 0,
10491
- "offsetX": "0px",
10492
- "offsetY": "0px",
10493
- "blur": "0px",
10494
- "spread": "0px",
10855
+ "offsetX": {
10856
+ "value": 0,
10857
+ "unit": "px"
10858
+ },
10859
+ "offsetY": {
10860
+ "value": 0,
10861
+ "unit": "px"
10862
+ },
10863
+ "blur": {
10864
+ "value": 0,
10865
+ "unit": "px"
10866
+ },
10867
+ "spread": {
10868
+ "value": 0,
10869
+ "unit": "px"
10870
+ },
10495
10871
  "inset": false
10496
10872
  }
10497
10873
  ],
@@ -37242,6 +37618,10 @@
37242
37618
  },
37243
37619
  "org.primer.overrides": {
37244
37620
  "dark": "#010409"
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."
37245
37625
  }
37246
37626
  },
37247
37627
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37258,6 +37638,10 @@
37258
37638
  },
37259
37639
  "org.primer.overrides": {
37260
37640
  "dark": "{base.color.neutral.0}"
37641
+ },
37642
+ "org.primer.llm": {
37643
+ "doNotUse": true,
37644
+ "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."
37261
37645
  }
37262
37646
  },
37263
37647
  "key": "{fgColor.black}"
@@ -38231,6 +38615,10 @@
38231
38615
  },
38232
38616
  "org.primer.overrides": {
38233
38617
  "dark": "#ffffff"
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."
38234
38622
  }
38235
38623
  },
38236
38624
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38247,6 +38635,10 @@
38247
38635
  },
38248
38636
  "org.primer.overrides": {
38249
38637
  "dark": "{base.color.neutral.13}"
38638
+ },
38639
+ "org.primer.llm": {
38640
+ "doNotUse": true,
38641
+ "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."
38250
38642
  }
38251
38643
  },
38252
38644
  "key": "{fgColor.white}"
@@ -38272,7 +38664,10 @@
38272
38664
  "$value": {
38273
38665
  "color": "{focus.outlineColor}",
38274
38666
  "style": "solid",
38275
- "width": "2px"
38667
+ "width": {
38668
+ "value": 2,
38669
+ "unit": "px"
38670
+ }
38276
38671
  },
38277
38672
  "$type": "border",
38278
38673
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47431,7 +47826,7 @@
47431
47826
  },
47432
47827
  "shadow-floating-large": {
47433
47828
  "key": "{shadow.floating.large}",
47434
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47829
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47435
47830
  "$type": "shadow",
47436
47831
  "$description": "Large floating shadow for modals and dialogs",
47437
47832
  "$extensions": {
@@ -47445,18 +47840,42 @@
47445
47840
  {
47446
47841
  "color": "#3d444db3",
47447
47842
  "alpha": 1,
47448
- "offsetX": "0px",
47449
- "offsetY": "0px",
47450
- "blur": "0px",
47451
- "spread": "1px"
47843
+ "offsetX": {
47844
+ "value": 0,
47845
+ "unit": "px"
47846
+ },
47847
+ "offsetY": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ },
47851
+ "blur": {
47852
+ "value": 0,
47853
+ "unit": "px"
47854
+ },
47855
+ "spread": {
47856
+ "value": 1,
47857
+ "unit": "px"
47858
+ }
47452
47859
  },
47453
47860
  {
47454
47861
  "color": "#010409",
47455
47862
  "alpha": 1,
47456
- "offsetX": "0px",
47457
- "offsetY": "24px",
47458
- "blur": "48px",
47459
- "spread": "0px"
47863
+ "offsetX": {
47864
+ "value": 0,
47865
+ "unit": "px"
47866
+ },
47867
+ "offsetY": {
47868
+ "value": 24,
47869
+ "unit": "px"
47870
+ },
47871
+ "blur": {
47872
+ "value": 48,
47873
+ "unit": "px"
47874
+ },
47875
+ "spread": {
47876
+ "value": 0,
47877
+ "unit": "px"
47878
+ }
47460
47879
  }
47461
47880
  ],
47462
47881
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47476,18 +47895,42 @@
47476
47895
  {
47477
47896
  "color": "{overlay.borderColor}",
47478
47897
  "alpha": 1,
47479
- "offsetX": "0px",
47480
- "offsetY": "0px",
47481
- "blur": "0px",
47482
- "spread": "1px"
47898
+ "offsetX": {
47899
+ "value": 0,
47900
+ "unit": "px"
47901
+ },
47902
+ "offsetY": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ },
47906
+ "blur": {
47907
+ "value": 0,
47908
+ "unit": "px"
47909
+ },
47910
+ "spread": {
47911
+ "value": 1,
47912
+ "unit": "px"
47913
+ }
47483
47914
  },
47484
47915
  {
47485
47916
  "color": "{base.color.neutral.0}",
47486
47917
  "alpha": 1,
47487
- "offsetX": "0px",
47488
- "offsetY": "24px",
47489
- "blur": "48px",
47490
- "spread": "0px"
47918
+ "offsetX": {
47919
+ "value": 0,
47920
+ "unit": "px"
47921
+ },
47922
+ "offsetY": {
47923
+ "value": 24,
47924
+ "unit": "px"
47925
+ },
47926
+ "blur": {
47927
+ "value": 48,
47928
+ "unit": "px"
47929
+ },
47930
+ "spread": {
47931
+ "value": 0,
47932
+ "unit": "px"
47933
+ }
47491
47934
  }
47492
47935
  ],
47493
47936
  "$type": "shadow",
@@ -47503,18 +47946,42 @@
47503
47946
  {
47504
47947
  "color": "{overlay.borderColor}",
47505
47948
  "alpha": 1,
47506
- "offsetX": "0px",
47507
- "offsetY": "0px",
47508
- "blur": "0px",
47509
- "spread": "1px"
47949
+ "offsetX": {
47950
+ "value": 0,
47951
+ "unit": "px"
47952
+ },
47953
+ "offsetY": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ },
47957
+ "blur": {
47958
+ "value": 0,
47959
+ "unit": "px"
47960
+ },
47961
+ "spread": {
47962
+ "value": 1,
47963
+ "unit": "px"
47964
+ }
47510
47965
  },
47511
47966
  {
47512
47967
  "color": "{base.color.neutral.0}",
47513
47968
  "alpha": 1,
47514
- "offsetX": "0px",
47515
- "offsetY": "24px",
47516
- "blur": "48px",
47517
- "spread": "0px"
47969
+ "offsetX": {
47970
+ "value": 0,
47971
+ "unit": "px"
47972
+ },
47973
+ "offsetY": {
47974
+ "value": 24,
47975
+ "unit": "px"
47976
+ },
47977
+ "blur": {
47978
+ "value": 48,
47979
+ "unit": "px"
47980
+ },
47981
+ "spread": {
47982
+ "value": 0,
47983
+ "unit": "px"
47984
+ }
47518
47985
  }
47519
47986
  ],
47520
47987
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47535,8 +48002,9 @@
47535
48002
  },
47536
48003
  "shadow-floating-legacy": {
47537
48004
  "key": "{shadow.floating.legacy}",
47538
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48005
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47539
48006
  "$type": "shadow",
48007
+ "$description": "Legacy floating shadow for backward compatibility",
47540
48008
  "$extensions": {
47541
48009
  "org.primer.figma": {},
47542
48010
  "org.primer.overrides": {
@@ -47545,24 +48013,52 @@
47545
48013
  {
47546
48014
  "color": "#010409",
47547
48015
  "alpha": 0.4,
47548
- "offsetX": "0px",
47549
- "offsetY": "6px",
47550
- "blur": "12px",
47551
- "spread": "-3px"
48016
+ "offsetX": {
48017
+ "value": 0,
48018
+ "unit": "px"
48019
+ },
48020
+ "offsetY": {
48021
+ "value": 6,
48022
+ "unit": "px"
48023
+ },
48024
+ "blur": {
48025
+ "value": 12,
48026
+ "unit": "px"
48027
+ },
48028
+ "spread": {
48029
+ "value": -3,
48030
+ "unit": "px"
48031
+ }
47552
48032
  },
47553
48033
  {
47554
48034
  "color": "#010409",
47555
48035
  "alpha": 0.4,
47556
- "offsetX": "0px",
47557
- "offsetY": "6px",
47558
- "blur": "18px",
47559
- "spread": "0px"
48036
+ "offsetX": {
48037
+ "value": 0,
48038
+ "unit": "px"
48039
+ },
48040
+ "offsetY": {
48041
+ "value": 6,
48042
+ "unit": "px"
48043
+ },
48044
+ "blur": {
48045
+ "value": 18,
48046
+ "unit": "px"
48047
+ },
48048
+ "spread": {
48049
+ "value": 0,
48050
+ "unit": "px"
48051
+ }
47560
48052
  }
47561
48053
  ],
47562
48054
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47563
48055
  "isSource": true,
47564
48056
  "$type": "shadow"
47565
48057
  }
48058
+ },
48059
+ "org.primer.llm": {
48060
+ "usage": ["legacy-component", "backward-compatibility"],
48061
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47566
48062
  }
47567
48063
  },
47568
48064
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47572,21 +48068,46 @@
47572
48068
  {
47573
48069
  "color": "{base.color.neutral.0}",
47574
48070
  "alpha": 0.4,
47575
- "offsetX": "0px",
47576
- "offsetY": "6px",
47577
- "blur": "12px",
47578
- "spread": "-3px"
48071
+ "offsetX": {
48072
+ "value": 0,
48073
+ "unit": "px"
48074
+ },
48075
+ "offsetY": {
48076
+ "value": 6,
48077
+ "unit": "px"
48078
+ },
48079
+ "blur": {
48080
+ "value": 12,
48081
+ "unit": "px"
48082
+ },
48083
+ "spread": {
48084
+ "value": -3,
48085
+ "unit": "px"
48086
+ }
47579
48087
  },
47580
48088
  {
47581
48089
  "color": "{base.color.neutral.0}",
47582
48090
  "alpha": 0.4,
47583
- "offsetX": "0px",
47584
- "offsetY": "6px",
47585
- "blur": "18px",
47586
- "spread": "0px"
48091
+ "offsetX": {
48092
+ "value": 0,
48093
+ "unit": "px"
48094
+ },
48095
+ "offsetY": {
48096
+ "value": 6,
48097
+ "unit": "px"
48098
+ },
48099
+ "blur": {
48100
+ "value": 18,
48101
+ "unit": "px"
48102
+ },
48103
+ "spread": {
48104
+ "value": 0,
48105
+ "unit": "px"
48106
+ }
47587
48107
  }
47588
48108
  ],
47589
48109
  "$type": "shadow",
48110
+ "$description": "Legacy floating shadow for backward compatibility",
47590
48111
  "$extensions": {
47591
48112
  "org.primer.figma": {},
47592
48113
  "org.primer.overrides": {
@@ -47595,24 +48116,52 @@
47595
48116
  {
47596
48117
  "color": "{base.color.neutral.0}",
47597
48118
  "alpha": 0.4,
47598
- "offsetX": "0px",
47599
- "offsetY": "6px",
47600
- "blur": "12px",
47601
- "spread": "-3px"
48119
+ "offsetX": {
48120
+ "value": 0,
48121
+ "unit": "px"
48122
+ },
48123
+ "offsetY": {
48124
+ "value": 6,
48125
+ "unit": "px"
48126
+ },
48127
+ "blur": {
48128
+ "value": 12,
48129
+ "unit": "px"
48130
+ },
48131
+ "spread": {
48132
+ "value": -3,
48133
+ "unit": "px"
48134
+ }
47602
48135
  },
47603
48136
  {
47604
48137
  "color": "{base.color.neutral.0}",
47605
48138
  "alpha": 0.4,
47606
- "offsetX": "0px",
47607
- "offsetY": "6px",
47608
- "blur": "18px",
47609
- "spread": "0px"
48139
+ "offsetX": {
48140
+ "value": 0,
48141
+ "unit": "px"
48142
+ },
48143
+ "offsetY": {
48144
+ "value": 6,
48145
+ "unit": "px"
48146
+ },
48147
+ "blur": {
48148
+ "value": 18,
48149
+ "unit": "px"
48150
+ },
48151
+ "spread": {
48152
+ "value": 0,
48153
+ "unit": "px"
48154
+ }
47610
48155
  }
47611
48156
  ],
47612
48157
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47613
48158
  "isSource": true,
47614
48159
  "$type": "shadow"
47615
48160
  }
48161
+ },
48162
+ "org.primer.llm": {
48163
+ "usage": ["legacy-component", "backward-compatibility"],
48164
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47616
48165
  }
47617
48166
  },
47618
48167
  "key": "{shadow.floating.legacy}"
@@ -47623,8 +48172,9 @@
47623
48172
  },
47624
48173
  "shadow-floating-medium": {
47625
48174
  "key": "{shadow.floating.medium}",
47626
- "$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",
48175
+ "$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",
47627
48176
  "$type": "shadow",
48177
+ "$description": "Medium floating shadow for popovers and action menus",
47628
48178
  "$extensions": {
47629
48179
  "org.primer.figma": {
47630
48180
  "collection": "mode",
@@ -47636,48 +48186,112 @@
47636
48186
  {
47637
48187
  "color": "#3d444db3",
47638
48188
  "alpha": 1,
47639
- "offsetX": "0px",
47640
- "offsetY": "0px",
47641
- "blur": "0px",
47642
- "spread": "1px"
48189
+ "offsetX": {
48190
+ "value": 0,
48191
+ "unit": "px"
48192
+ },
48193
+ "offsetY": {
48194
+ "value": 0,
48195
+ "unit": "px"
48196
+ },
48197
+ "blur": {
48198
+ "value": 0,
48199
+ "unit": "px"
48200
+ },
48201
+ "spread": {
48202
+ "value": 1,
48203
+ "unit": "px"
48204
+ }
47643
48205
  },
47644
48206
  {
47645
48207
  "color": "#010409",
47646
48208
  "alpha": 0.4,
47647
- "offsetX": "0px",
47648
- "offsetY": "8px",
47649
- "blur": "16px",
47650
- "spread": "-4px"
48209
+ "offsetX": {
48210
+ "value": 0,
48211
+ "unit": "px"
48212
+ },
48213
+ "offsetY": {
48214
+ "value": 8,
48215
+ "unit": "px"
48216
+ },
48217
+ "blur": {
48218
+ "value": 16,
48219
+ "unit": "px"
48220
+ },
48221
+ "spread": {
48222
+ "value": -4,
48223
+ "unit": "px"
48224
+ }
47651
48225
  },
47652
48226
  {
47653
48227
  "color": "#010409",
47654
48228
  "alpha": 0.4,
47655
- "offsetX": "0px",
47656
- "offsetY": "4px",
47657
- "blur": "32px",
47658
- "spread": "-4px"
48229
+ "offsetX": {
48230
+ "value": 0,
48231
+ "unit": "px"
48232
+ },
48233
+ "offsetY": {
48234
+ "value": 4,
48235
+ "unit": "px"
48236
+ },
48237
+ "blur": {
48238
+ "value": 32,
48239
+ "unit": "px"
48240
+ },
48241
+ "spread": {
48242
+ "value": -4,
48243
+ "unit": "px"
48244
+ }
47659
48245
  },
47660
48246
  {
47661
48247
  "color": "#010409",
47662
48248
  "alpha": 0.4,
47663
- "offsetX": "0px",
47664
- "offsetY": "24px",
47665
- "blur": "48px",
47666
- "spread": "-12px"
48249
+ "offsetX": {
48250
+ "value": 0,
48251
+ "unit": "px"
48252
+ },
48253
+ "offsetY": {
48254
+ "value": 24,
48255
+ "unit": "px"
48256
+ },
48257
+ "blur": {
48258
+ "value": 48,
48259
+ "unit": "px"
48260
+ },
48261
+ "spread": {
48262
+ "value": -12,
48263
+ "unit": "px"
48264
+ }
47667
48265
  },
47668
48266
  {
47669
48267
  "color": "#010409",
47670
48268
  "alpha": 0.4,
47671
- "offsetX": "0px",
47672
- "offsetY": "48px",
47673
- "blur": "96px",
47674
- "spread": "-24px"
48269
+ "offsetX": {
48270
+ "value": 0,
48271
+ "unit": "px"
48272
+ },
48273
+ "offsetY": {
48274
+ "value": 48,
48275
+ "unit": "px"
48276
+ },
48277
+ "blur": {
48278
+ "value": 96,
48279
+ "unit": "px"
48280
+ },
48281
+ "spread": {
48282
+ "value": -24,
48283
+ "unit": "px"
48284
+ }
47675
48285
  }
47676
48286
  ],
47677
48287
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47678
48288
  "isSource": true,
47679
48289
  "$type": "shadow"
47680
48290
  }
48291
+ },
48292
+ "org.primer.llm": {
48293
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48294
+ "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."
47681
48295
  }
47682
48296
  },
47683
48297
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47687,45 +48301,106 @@
47687
48301
  {
47688
48302
  "color": "{overlay.borderColor}",
47689
48303
  "alpha": 1,
47690
- "offsetX": "0px",
47691
- "offsetY": "0px",
47692
- "blur": "0px",
47693
- "spread": "1px"
48304
+ "offsetX": {
48305
+ "value": 0,
48306
+ "unit": "px"
48307
+ },
48308
+ "offsetY": {
48309
+ "value": 0,
48310
+ "unit": "px"
48311
+ },
48312
+ "blur": {
48313
+ "value": 0,
48314
+ "unit": "px"
48315
+ },
48316
+ "spread": {
48317
+ "value": 1,
48318
+ "unit": "px"
48319
+ }
47694
48320
  },
47695
48321
  {
47696
48322
  "color": "{base.color.neutral.0}",
47697
48323
  "alpha": 0.4,
47698
- "offsetX": "0px",
47699
- "offsetY": "8px",
47700
- "blur": "16px",
47701
- "spread": "-4px"
48324
+ "offsetX": {
48325
+ "value": 0,
48326
+ "unit": "px"
48327
+ },
48328
+ "offsetY": {
48329
+ "value": 8,
48330
+ "unit": "px"
48331
+ },
48332
+ "blur": {
48333
+ "value": 16,
48334
+ "unit": "px"
48335
+ },
48336
+ "spread": {
48337
+ "value": -4,
48338
+ "unit": "px"
48339
+ }
47702
48340
  },
47703
48341
  {
47704
48342
  "color": "{base.color.neutral.0}",
47705
48343
  "alpha": 0.4,
47706
- "offsetX": "0px",
47707
- "offsetY": "4px",
47708
- "blur": "32px",
47709
- "spread": "-4px"
48344
+ "offsetX": {
48345
+ "value": 0,
48346
+ "unit": "px"
48347
+ },
48348
+ "offsetY": {
48349
+ "value": 4,
48350
+ "unit": "px"
48351
+ },
48352
+ "blur": {
48353
+ "value": 32,
48354
+ "unit": "px"
48355
+ },
48356
+ "spread": {
48357
+ "value": -4,
48358
+ "unit": "px"
48359
+ }
47710
48360
  },
47711
48361
  {
47712
48362
  "color": "{base.color.neutral.0}",
47713
48363
  "alpha": 0.4,
47714
- "offsetX": "0px",
47715
- "offsetY": "24px",
47716
- "blur": "48px",
47717
- "spread": "-12px"
48364
+ "offsetX": {
48365
+ "value": 0,
48366
+ "unit": "px"
48367
+ },
48368
+ "offsetY": {
48369
+ "value": 24,
48370
+ "unit": "px"
48371
+ },
48372
+ "blur": {
48373
+ "value": 48,
48374
+ "unit": "px"
48375
+ },
48376
+ "spread": {
48377
+ "value": -12,
48378
+ "unit": "px"
48379
+ }
47718
48380
  },
47719
48381
  {
47720
48382
  "color": "{base.color.neutral.0}",
47721
48383
  "alpha": 0.4,
47722
- "offsetX": "0px",
47723
- "offsetY": "48px",
47724
- "blur": "96px",
47725
- "spread": "-24px"
48384
+ "offsetX": {
48385
+ "value": 0,
48386
+ "unit": "px"
48387
+ },
48388
+ "offsetY": {
48389
+ "value": 48,
48390
+ "unit": "px"
48391
+ },
48392
+ "blur": {
48393
+ "value": 96,
48394
+ "unit": "px"
48395
+ },
48396
+ "spread": {
48397
+ "value": -24,
48398
+ "unit": "px"
48399
+ }
47726
48400
  }
47727
48401
  ],
47728
48402
  "$type": "shadow",
48403
+ "$description": "Medium floating shadow for popovers and action menus",
47729
48404
  "$extensions": {
47730
48405
  "org.primer.figma": {
47731
48406
  "collection": "mode",
@@ -47737,48 +48412,112 @@
47737
48412
  {
47738
48413
  "color": "{overlay.borderColor}",
47739
48414
  "alpha": 1,
47740
- "offsetX": "0px",
47741
- "offsetY": "0px",
47742
- "blur": "0px",
47743
- "spread": "1px"
48415
+ "offsetX": {
48416
+ "value": 0,
48417
+ "unit": "px"
48418
+ },
48419
+ "offsetY": {
48420
+ "value": 0,
48421
+ "unit": "px"
48422
+ },
48423
+ "blur": {
48424
+ "value": 0,
48425
+ "unit": "px"
48426
+ },
48427
+ "spread": {
48428
+ "value": 1,
48429
+ "unit": "px"
48430
+ }
47744
48431
  },
47745
48432
  {
47746
48433
  "color": "{base.color.neutral.0}",
47747
48434
  "alpha": 0.4,
47748
- "offsetX": "0px",
47749
- "offsetY": "8px",
47750
- "blur": "16px",
47751
- "spread": "-4px"
48435
+ "offsetX": {
48436
+ "value": 0,
48437
+ "unit": "px"
48438
+ },
48439
+ "offsetY": {
48440
+ "value": 8,
48441
+ "unit": "px"
48442
+ },
48443
+ "blur": {
48444
+ "value": 16,
48445
+ "unit": "px"
48446
+ },
48447
+ "spread": {
48448
+ "value": -4,
48449
+ "unit": "px"
48450
+ }
47752
48451
  },
47753
48452
  {
47754
48453
  "color": "{base.color.neutral.0}",
47755
48454
  "alpha": 0.4,
47756
- "offsetX": "0px",
47757
- "offsetY": "4px",
47758
- "blur": "32px",
47759
- "spread": "-4px"
48455
+ "offsetX": {
48456
+ "value": 0,
48457
+ "unit": "px"
48458
+ },
48459
+ "offsetY": {
48460
+ "value": 4,
48461
+ "unit": "px"
48462
+ },
48463
+ "blur": {
48464
+ "value": 32,
48465
+ "unit": "px"
48466
+ },
48467
+ "spread": {
48468
+ "value": -4,
48469
+ "unit": "px"
48470
+ }
47760
48471
  },
47761
48472
  {
47762
48473
  "color": "{base.color.neutral.0}",
47763
48474
  "alpha": 0.4,
47764
- "offsetX": "0px",
47765
- "offsetY": "24px",
47766
- "blur": "48px",
47767
- "spread": "-12px"
48475
+ "offsetX": {
48476
+ "value": 0,
48477
+ "unit": "px"
48478
+ },
48479
+ "offsetY": {
48480
+ "value": 24,
48481
+ "unit": "px"
48482
+ },
48483
+ "blur": {
48484
+ "value": 48,
48485
+ "unit": "px"
48486
+ },
48487
+ "spread": {
48488
+ "value": -12,
48489
+ "unit": "px"
48490
+ }
47768
48491
  },
47769
48492
  {
47770
48493
  "color": "{base.color.neutral.0}",
47771
48494
  "alpha": 0.4,
47772
- "offsetX": "0px",
47773
- "offsetY": "48px",
47774
- "blur": "96px",
47775
- "spread": "-24px"
48495
+ "offsetX": {
48496
+ "value": 0,
48497
+ "unit": "px"
48498
+ },
48499
+ "offsetY": {
48500
+ "value": 48,
48501
+ "unit": "px"
48502
+ },
48503
+ "blur": {
48504
+ "value": 96,
48505
+ "unit": "px"
48506
+ },
48507
+ "spread": {
48508
+ "value": -24,
48509
+ "unit": "px"
48510
+ }
47776
48511
  }
47777
48512
  ],
47778
48513
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47779
48514
  "isSource": true,
47780
48515
  "$type": "shadow"
47781
48516
  }
48517
+ },
48518
+ "org.primer.llm": {
48519
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48520
+ "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."
47782
48521
  }
47783
48522
  },
47784
48523
  "key": "{shadow.floating.medium}"
@@ -47789,7 +48528,7 @@
47789
48528
  },
47790
48529
  "shadow-floating-small": {
47791
48530
  "key": "{shadow.floating.small}",
47792
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48531
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47793
48532
  "$type": "shadow",
47794
48533
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47795
48534
  "$extensions": {
@@ -47803,26 +48542,62 @@
47803
48542
  {
47804
48543
  "color": "#3d444db3",
47805
48544
  "alpha": 1,
47806
- "offsetX": "0px",
47807
- "offsetY": "0px",
47808
- "blur": "0px",
47809
- "spread": "1px"
48545
+ "offsetX": {
48546
+ "value": 0,
48547
+ "unit": "px"
48548
+ },
48549
+ "offsetY": {
48550
+ "value": 0,
48551
+ "unit": "px"
48552
+ },
48553
+ "blur": {
48554
+ "value": 0,
48555
+ "unit": "px"
48556
+ },
48557
+ "spread": {
48558
+ "value": 1,
48559
+ "unit": "px"
48560
+ }
47810
48561
  },
47811
48562
  {
47812
48563
  "color": "#010409",
47813
48564
  "alpha": 0.4,
47814
- "offsetX": "0px",
47815
- "offsetY": "6px",
47816
- "blur": "12px",
47817
- "spread": "-3px"
48565
+ "offsetX": {
48566
+ "value": 0,
48567
+ "unit": "px"
48568
+ },
48569
+ "offsetY": {
48570
+ "value": 6,
48571
+ "unit": "px"
48572
+ },
48573
+ "blur": {
48574
+ "value": 12,
48575
+ "unit": "px"
48576
+ },
48577
+ "spread": {
48578
+ "value": -3,
48579
+ "unit": "px"
48580
+ }
47818
48581
  },
47819
48582
  {
47820
48583
  "color": "#010409",
47821
48584
  "alpha": 0.4,
47822
- "offsetX": "0px",
47823
- "offsetY": "6px",
47824
- "blur": "18px",
47825
- "spread": "0px"
48585
+ "offsetX": {
48586
+ "value": 0,
48587
+ "unit": "px"
48588
+ },
48589
+ "offsetY": {
48590
+ "value": 6,
48591
+ "unit": "px"
48592
+ },
48593
+ "blur": {
48594
+ "value": 18,
48595
+ "unit": "px"
48596
+ },
48597
+ "spread": {
48598
+ "value": 0,
48599
+ "unit": "px"
48600
+ }
47826
48601
  }
47827
48602
  ],
47828
48603
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47842,26 +48617,62 @@
47842
48617
  {
47843
48618
  "color": "{overlay.borderColor}",
47844
48619
  "alpha": 1,
47845
- "offsetX": "0px",
47846
- "offsetY": "0px",
47847
- "blur": "0px",
47848
- "spread": "1px"
48620
+ "offsetX": {
48621
+ "value": 0,
48622
+ "unit": "px"
48623
+ },
48624
+ "offsetY": {
48625
+ "value": 0,
48626
+ "unit": "px"
48627
+ },
48628
+ "blur": {
48629
+ "value": 0,
48630
+ "unit": "px"
48631
+ },
48632
+ "spread": {
48633
+ "value": 1,
48634
+ "unit": "px"
48635
+ }
47849
48636
  },
47850
48637
  {
47851
48638
  "color": "{base.color.neutral.0}",
47852
48639
  "alpha": 0.4,
47853
- "offsetX": "0px",
47854
- "offsetY": "6px",
47855
- "blur": "12px",
47856
- "spread": "-3px"
48640
+ "offsetX": {
48641
+ "value": 0,
48642
+ "unit": "px"
48643
+ },
48644
+ "offsetY": {
48645
+ "value": 6,
48646
+ "unit": "px"
48647
+ },
48648
+ "blur": {
48649
+ "value": 12,
48650
+ "unit": "px"
48651
+ },
48652
+ "spread": {
48653
+ "value": -3,
48654
+ "unit": "px"
48655
+ }
47857
48656
  },
47858
48657
  {
47859
48658
  "color": "{base.color.neutral.0}",
47860
48659
  "alpha": 0.4,
47861
- "offsetX": "0px",
47862
- "offsetY": "6px",
47863
- "blur": "18px",
47864
- "spread": "0px"
48660
+ "offsetX": {
48661
+ "value": 0,
48662
+ "unit": "px"
48663
+ },
48664
+ "offsetY": {
48665
+ "value": 6,
48666
+ "unit": "px"
48667
+ },
48668
+ "blur": {
48669
+ "value": 18,
48670
+ "unit": "px"
48671
+ },
48672
+ "spread": {
48673
+ "value": 0,
48674
+ "unit": "px"
48675
+ }
47865
48676
  }
47866
48677
  ],
47867
48678
  "$type": "shadow",
@@ -47877,26 +48688,62 @@
47877
48688
  {
47878
48689
  "color": "{overlay.borderColor}",
47879
48690
  "alpha": 1,
47880
- "offsetX": "0px",
47881
- "offsetY": "0px",
47882
- "blur": "0px",
47883
- "spread": "1px"
48691
+ "offsetX": {
48692
+ "value": 0,
48693
+ "unit": "px"
48694
+ },
48695
+ "offsetY": {
48696
+ "value": 0,
48697
+ "unit": "px"
48698
+ },
48699
+ "blur": {
48700
+ "value": 0,
48701
+ "unit": "px"
48702
+ },
48703
+ "spread": {
48704
+ "value": 1,
48705
+ "unit": "px"
48706
+ }
47884
48707
  },
47885
48708
  {
47886
48709
  "color": "{base.color.neutral.0}",
47887
48710
  "alpha": 0.4,
47888
- "offsetX": "0px",
47889
- "offsetY": "6px",
47890
- "blur": "12px",
47891
- "spread": "-3px"
48711
+ "offsetX": {
48712
+ "value": 0,
48713
+ "unit": "px"
48714
+ },
48715
+ "offsetY": {
48716
+ "value": 6,
48717
+ "unit": "px"
48718
+ },
48719
+ "blur": {
48720
+ "value": 12,
48721
+ "unit": "px"
48722
+ },
48723
+ "spread": {
48724
+ "value": -3,
48725
+ "unit": "px"
48726
+ }
47892
48727
  },
47893
48728
  {
47894
48729
  "color": "{base.color.neutral.0}",
47895
48730
  "alpha": 0.4,
47896
- "offsetX": "0px",
47897
- "offsetY": "6px",
47898
- "blur": "18px",
47899
- "spread": "0px"
48731
+ "offsetX": {
48732
+ "value": 0,
48733
+ "unit": "px"
48734
+ },
48735
+ "offsetY": {
48736
+ "value": 6,
48737
+ "unit": "px"
48738
+ },
48739
+ "blur": {
48740
+ "value": 18,
48741
+ "unit": "px"
48742
+ },
48743
+ "spread": {
48744
+ "value": 0,
48745
+ "unit": "px"
48746
+ }
47900
48747
  }
47901
48748
  ],
47902
48749
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47917,8 +48764,9 @@
47917
48764
  },
47918
48765
  "shadow-floating-xlarge": {
47919
48766
  "key": "{shadow.floating.xlarge}",
47920
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48767
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47921
48768
  "$type": "shadow",
48769
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47922
48770
  "$extensions": {
47923
48771
  "org.primer.figma": {
47924
48772
  "collection": "mode",
@@ -47930,24 +48778,52 @@
47930
48778
  {
47931
48779
  "color": "#3d444db3",
47932
48780
  "alpha": 1,
47933
- "offsetX": "0px",
47934
- "offsetY": "0px",
47935
- "blur": "0px",
47936
- "spread": "1px"
48781
+ "offsetX": {
48782
+ "value": 0,
48783
+ "unit": "px"
48784
+ },
48785
+ "offsetY": {
48786
+ "value": 0,
48787
+ "unit": "px"
48788
+ },
48789
+ "blur": {
48790
+ "value": 0,
48791
+ "unit": "px"
48792
+ },
48793
+ "spread": {
48794
+ "value": 1,
48795
+ "unit": "px"
48796
+ }
47937
48797
  },
47938
48798
  {
47939
48799
  "color": "#010409",
47940
48800
  "alpha": 1,
47941
- "offsetX": "0px",
47942
- "offsetY": "32px",
47943
- "blur": "64px",
47944
- "spread": "0px"
48801
+ "offsetX": {
48802
+ "value": 0,
48803
+ "unit": "px"
48804
+ },
48805
+ "offsetY": {
48806
+ "value": 32,
48807
+ "unit": "px"
48808
+ },
48809
+ "blur": {
48810
+ "value": 64,
48811
+ "unit": "px"
48812
+ },
48813
+ "spread": {
48814
+ "value": 0,
48815
+ "unit": "px"
48816
+ }
47945
48817
  }
47946
48818
  ],
47947
48819
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47948
48820
  "isSource": true,
47949
48821
  "$type": "shadow"
47950
48822
  }
48823
+ },
48824
+ "org.primer.llm": {
48825
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48826
+ "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."
47951
48827
  }
47952
48828
  },
47953
48829
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47957,21 +48833,46 @@
47957
48833
  {
47958
48834
  "color": "{overlay.borderColor}",
47959
48835
  "alpha": 1,
47960
- "offsetX": "0px",
47961
- "offsetY": "0px",
47962
- "blur": "0px",
47963
- "spread": "1px"
48836
+ "offsetX": {
48837
+ "value": 0,
48838
+ "unit": "px"
48839
+ },
48840
+ "offsetY": {
48841
+ "value": 0,
48842
+ "unit": "px"
48843
+ },
48844
+ "blur": {
48845
+ "value": 0,
48846
+ "unit": "px"
48847
+ },
48848
+ "spread": {
48849
+ "value": 1,
48850
+ "unit": "px"
48851
+ }
47964
48852
  },
47965
48853
  {
47966
48854
  "color": "{base.color.neutral.0}",
47967
48855
  "alpha": 1,
47968
- "offsetX": "0px",
47969
- "offsetY": "32px",
47970
- "blur": "64px",
47971
- "spread": "0px"
48856
+ "offsetX": {
48857
+ "value": 0,
48858
+ "unit": "px"
48859
+ },
48860
+ "offsetY": {
48861
+ "value": 32,
48862
+ "unit": "px"
48863
+ },
48864
+ "blur": {
48865
+ "value": 64,
48866
+ "unit": "px"
48867
+ },
48868
+ "spread": {
48869
+ "value": 0,
48870
+ "unit": "px"
48871
+ }
47972
48872
  }
47973
48873
  ],
47974
48874
  "$type": "shadow",
48875
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47975
48876
  "$extensions": {
47976
48877
  "org.primer.figma": {
47977
48878
  "collection": "mode",
@@ -47983,24 +48884,52 @@
47983
48884
  {
47984
48885
  "color": "{overlay.borderColor}",
47985
48886
  "alpha": 1,
47986
- "offsetX": "0px",
47987
- "offsetY": "0px",
47988
- "blur": "0px",
47989
- "spread": "1px"
48887
+ "offsetX": {
48888
+ "value": 0,
48889
+ "unit": "px"
48890
+ },
48891
+ "offsetY": {
48892
+ "value": 0,
48893
+ "unit": "px"
48894
+ },
48895
+ "blur": {
48896
+ "value": 0,
48897
+ "unit": "px"
48898
+ },
48899
+ "spread": {
48900
+ "value": 1,
48901
+ "unit": "px"
48902
+ }
47990
48903
  },
47991
48904
  {
47992
48905
  "color": "{base.color.neutral.0}",
47993
48906
  "alpha": 1,
47994
- "offsetX": "0px",
47995
- "offsetY": "32px",
47996
- "blur": "64px",
47997
- "spread": "0px"
48907
+ "offsetX": {
48908
+ "value": 0,
48909
+ "unit": "px"
48910
+ },
48911
+ "offsetY": {
48912
+ "value": 32,
48913
+ "unit": "px"
48914
+ },
48915
+ "blur": {
48916
+ "value": 64,
48917
+ "unit": "px"
48918
+ },
48919
+ "spread": {
48920
+ "value": 0,
48921
+ "unit": "px"
48922
+ }
47998
48923
  }
47999
48924
  ],
48000
48925
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48001
48926
  "isSource": true,
48002
48927
  "$type": "shadow"
48003
48928
  }
48929
+ },
48930
+ "org.primer.llm": {
48931
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48932
+ "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."
48004
48933
  }
48005
48934
  },
48006
48935
  "key": "{shadow.floating.xlarge}"
@@ -48011,8 +48940,9 @@
48011
48940
  },
48012
48941
  "shadow-inset": {
48013
48942
  "key": "{shadow.inset}",
48014
- "$value": "inset 0px 1px 0px 0px #0104093d",
48943
+ "$value": "inset 0 1px 0 0 #0104093d",
48015
48944
  "$type": "shadow",
48945
+ "$description": "Inset shadow for recessed elements",
48016
48946
  "$extensions": {
48017
48947
  "org.primer.figma": {
48018
48948
  "collection": "mode",
@@ -48023,16 +48953,32 @@
48023
48953
  "$value": {
48024
48954
  "color": "#010409",
48025
48955
  "alpha": 0.24,
48026
- "offsetX": "0px",
48027
- "offsetY": "1px",
48028
- "blur": "0px",
48029
- "spread": "0px",
48956
+ "offsetX": {
48957
+ "value": 0,
48958
+ "unit": "px"
48959
+ },
48960
+ "offsetY": {
48961
+ "value": 1,
48962
+ "unit": "px"
48963
+ },
48964
+ "blur": {
48965
+ "value": 0,
48966
+ "unit": "px"
48967
+ },
48968
+ "spread": {
48969
+ "value": 0,
48970
+ "unit": "px"
48971
+ },
48030
48972
  "inset": true
48031
48973
  },
48032
48974
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48033
48975
  "isSource": true,
48034
48976
  "$type": "shadow"
48035
48977
  }
48978
+ },
48979
+ "org.primer.llm": {
48980
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48981
+ "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."
48036
48982
  }
48037
48983
  },
48038
48984
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48041,13 +48987,26 @@
48041
48987
  "$value": {
48042
48988
  "color": "{base.color.neutral.0}",
48043
48989
  "alpha": 0.24,
48044
- "offsetX": "0px",
48045
- "offsetY": "1px",
48046
- "blur": "0px",
48047
- "spread": "0px",
48990
+ "offsetX": {
48991
+ "value": 0,
48992
+ "unit": "px"
48993
+ },
48994
+ "offsetY": {
48995
+ "value": 1,
48996
+ "unit": "px"
48997
+ },
48998
+ "blur": {
48999
+ "value": 0,
49000
+ "unit": "px"
49001
+ },
49002
+ "spread": {
49003
+ "value": 0,
49004
+ "unit": "px"
49005
+ },
48048
49006
  "inset": true
48049
49007
  },
48050
49008
  "$type": "shadow",
49009
+ "$description": "Inset shadow for recessed elements",
48051
49010
  "$extensions": {
48052
49011
  "org.primer.figma": {
48053
49012
  "collection": "mode",
@@ -48058,16 +49017,32 @@
48058
49017
  "$value": {
48059
49018
  "color": "{base.color.neutral.0}",
48060
49019
  "alpha": 0.24,
48061
- "offsetX": "0px",
48062
- "offsetY": "1px",
48063
- "blur": "0px",
48064
- "spread": "0px",
49020
+ "offsetX": {
49021
+ "value": 0,
49022
+ "unit": "px"
49023
+ },
49024
+ "offsetY": {
49025
+ "value": 1,
49026
+ "unit": "px"
49027
+ },
49028
+ "blur": {
49029
+ "value": 0,
49030
+ "unit": "px"
49031
+ },
49032
+ "spread": {
49033
+ "value": 0,
49034
+ "unit": "px"
49035
+ },
48065
49036
  "inset": true
48066
49037
  },
48067
49038
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48068
49039
  "isSource": true,
48069
49040
  "$type": "shadow"
48070
49041
  }
49042
+ },
49043
+ "org.primer.llm": {
49044
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
49045
+ "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."
48071
49046
  }
48072
49047
  },
48073
49048
  "key": "{shadow.inset}"
@@ -48078,8 +49053,9 @@
48078
49053
  },
48079
49054
  "shadow-resting-medium": {
48080
49055
  "key": "{shadow.resting.medium}",
48081
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
49056
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48082
49057
  "$type": "shadow",
49058
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48083
49059
  "$extensions": {
48084
49060
  "org.primer.figma": {
48085
49061
  "collection": "mode",
@@ -48091,24 +49067,52 @@
48091
49067
  {
48092
49068
  "color": "#010409",
48093
49069
  "alpha": 0.4,
48094
- "offsetX": "0px",
48095
- "offsetY": "1px",
48096
- "blur": "1px",
48097
- "spread": "0px"
49070
+ "offsetX": {
49071
+ "value": 0,
49072
+ "unit": "px"
49073
+ },
49074
+ "offsetY": {
49075
+ "value": 1,
49076
+ "unit": "px"
49077
+ },
49078
+ "blur": {
49079
+ "value": 1,
49080
+ "unit": "px"
49081
+ },
49082
+ "spread": {
49083
+ "value": 0,
49084
+ "unit": "px"
49085
+ }
48098
49086
  },
48099
49087
  {
48100
49088
  "color": "#010409",
48101
49089
  "alpha": 0.8,
48102
- "offsetX": "0px",
48103
- "offsetY": "3px",
48104
- "blur": "6px",
48105
- "spread": "0px"
49090
+ "offsetX": {
49091
+ "value": 0,
49092
+ "unit": "px"
49093
+ },
49094
+ "offsetY": {
49095
+ "value": 3,
49096
+ "unit": "px"
49097
+ },
49098
+ "blur": {
49099
+ "value": 6,
49100
+ "unit": "px"
49101
+ },
49102
+ "spread": {
49103
+ "value": 0,
49104
+ "unit": "px"
49105
+ }
48106
49106
  }
48107
49107
  ],
48108
49108
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48109
49109
  "isSource": true,
48110
49110
  "$type": "shadow"
48111
49111
  }
49112
+ },
49113
+ "org.primer.llm": {
49114
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49115
+ "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."
48112
49116
  }
48113
49117
  },
48114
49118
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48118,21 +49122,46 @@
48118
49122
  {
48119
49123
  "color": "{base.color.neutral.0}",
48120
49124
  "alpha": 0.4,
48121
- "offsetX": "0px",
48122
- "offsetY": "1px",
48123
- "blur": "1px",
48124
- "spread": "0px"
49125
+ "offsetX": {
49126
+ "value": 0,
49127
+ "unit": "px"
49128
+ },
49129
+ "offsetY": {
49130
+ "value": 1,
49131
+ "unit": "px"
49132
+ },
49133
+ "blur": {
49134
+ "value": 1,
49135
+ "unit": "px"
49136
+ },
49137
+ "spread": {
49138
+ "value": 0,
49139
+ "unit": "px"
49140
+ }
48125
49141
  },
48126
49142
  {
48127
49143
  "color": "{base.color.neutral.0}",
48128
49144
  "alpha": 0.8,
48129
- "offsetX": "0px",
48130
- "offsetY": "3px",
48131
- "blur": "6px",
48132
- "spread": "0px"
49145
+ "offsetX": {
49146
+ "value": 0,
49147
+ "unit": "px"
49148
+ },
49149
+ "offsetY": {
49150
+ "value": 3,
49151
+ "unit": "px"
49152
+ },
49153
+ "blur": {
49154
+ "value": 6,
49155
+ "unit": "px"
49156
+ },
49157
+ "spread": {
49158
+ "value": 0,
49159
+ "unit": "px"
49160
+ }
48133
49161
  }
48134
49162
  ],
48135
49163
  "$type": "shadow",
49164
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48136
49165
  "$extensions": {
48137
49166
  "org.primer.figma": {
48138
49167
  "collection": "mode",
@@ -48144,24 +49173,52 @@
48144
49173
  {
48145
49174
  "color": "{base.color.neutral.0}",
48146
49175
  "alpha": 0.4,
48147
- "offsetX": "0px",
48148
- "offsetY": "1px",
48149
- "blur": "1px",
48150
- "spread": "0px"
49176
+ "offsetX": {
49177
+ "value": 0,
49178
+ "unit": "px"
49179
+ },
49180
+ "offsetY": {
49181
+ "value": 1,
49182
+ "unit": "px"
49183
+ },
49184
+ "blur": {
49185
+ "value": 1,
49186
+ "unit": "px"
49187
+ },
49188
+ "spread": {
49189
+ "value": 0,
49190
+ "unit": "px"
49191
+ }
48151
49192
  },
48152
49193
  {
48153
49194
  "color": "{base.color.neutral.0}",
48154
49195
  "alpha": 0.8,
48155
- "offsetX": "0px",
48156
- "offsetY": "3px",
48157
- "blur": "6px",
48158
- "spread": "0px"
49196
+ "offsetX": {
49197
+ "value": 0,
49198
+ "unit": "px"
49199
+ },
49200
+ "offsetY": {
49201
+ "value": 3,
49202
+ "unit": "px"
49203
+ },
49204
+ "blur": {
49205
+ "value": 6,
49206
+ "unit": "px"
49207
+ },
49208
+ "spread": {
49209
+ "value": 0,
49210
+ "unit": "px"
49211
+ }
48159
49212
  }
48160
49213
  ],
48161
49214
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48162
49215
  "isSource": true,
48163
49216
  "$type": "shadow"
48164
49217
  }
49218
+ },
49219
+ "org.primer.llm": {
49220
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49221
+ "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."
48165
49222
  }
48166
49223
  },
48167
49224
  "key": "{shadow.resting.medium}"
@@ -48172,8 +49229,9 @@
48172
49229
  },
48173
49230
  "shadow-resting-small": {
48174
49231
  "key": "{shadow.resting.small}",
48175
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
49232
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48176
49233
  "$type": "shadow",
49234
+ "$description": "Small resting shadow for buttons and interactive elements",
48177
49235
  "$extensions": {
48178
49236
  "org.primer.figma": {
48179
49237
  "collection": "mode",
@@ -48185,19 +49243,43 @@
48185
49243
  {
48186
49244
  "color": "#010409",
48187
49245
  "alpha": 0.6,
48188
- "offsetX": "0px",
48189
- "offsetY": "1px",
48190
- "blur": "1px",
48191
- "spread": "0px",
49246
+ "offsetX": {
49247
+ "value": 0,
49248
+ "unit": "px"
49249
+ },
49250
+ "offsetY": {
49251
+ "value": 1,
49252
+ "unit": "px"
49253
+ },
49254
+ "blur": {
49255
+ "value": 1,
49256
+ "unit": "px"
49257
+ },
49258
+ "spread": {
49259
+ "value": 0,
49260
+ "unit": "px"
49261
+ },
48192
49262
  "inset": false
48193
49263
  },
48194
49264
  {
48195
49265
  "color": "#010409",
48196
49266
  "alpha": 0.6,
48197
- "offsetX": "0px",
48198
- "offsetY": "1px",
48199
- "blur": "3px",
48200
- "spread": "0px",
49267
+ "offsetX": {
49268
+ "value": 0,
49269
+ "unit": "px"
49270
+ },
49271
+ "offsetY": {
49272
+ "value": 1,
49273
+ "unit": "px"
49274
+ },
49275
+ "blur": {
49276
+ "value": 3,
49277
+ "unit": "px"
49278
+ },
49279
+ "spread": {
49280
+ "value": 0,
49281
+ "unit": "px"
49282
+ },
48201
49283
  "inset": false
48202
49284
  }
48203
49285
  ],
@@ -48205,6 +49287,10 @@
48205
49287
  "isSource": true,
48206
49288
  "$type": "shadow"
48207
49289
  }
49290
+ },
49291
+ "org.primer.llm": {
49292
+ "usage": ["button", "interactive-card", "clickable-element"],
49293
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48208
49294
  }
48209
49295
  },
48210
49296
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48214,23 +49300,48 @@
48214
49300
  {
48215
49301
  "color": "{base.color.neutral.0}",
48216
49302
  "alpha": 0.6,
48217
- "offsetX": "0px",
48218
- "offsetY": "1px",
48219
- "blur": "1px",
48220
- "spread": "0px",
49303
+ "offsetX": {
49304
+ "value": 0,
49305
+ "unit": "px"
49306
+ },
49307
+ "offsetY": {
49308
+ "value": 1,
49309
+ "unit": "px"
49310
+ },
49311
+ "blur": {
49312
+ "value": 1,
49313
+ "unit": "px"
49314
+ },
49315
+ "spread": {
49316
+ "value": 0,
49317
+ "unit": "px"
49318
+ },
48221
49319
  "inset": false
48222
49320
  },
48223
49321
  {
48224
49322
  "color": "{base.color.neutral.0}",
48225
49323
  "alpha": 0.6,
48226
- "offsetX": "0px",
48227
- "offsetY": "1px",
48228
- "blur": "3px",
48229
- "spread": "0px",
49324
+ "offsetX": {
49325
+ "value": 0,
49326
+ "unit": "px"
49327
+ },
49328
+ "offsetY": {
49329
+ "value": 1,
49330
+ "unit": "px"
49331
+ },
49332
+ "blur": {
49333
+ "value": 3,
49334
+ "unit": "px"
49335
+ },
49336
+ "spread": {
49337
+ "value": 0,
49338
+ "unit": "px"
49339
+ },
48230
49340
  "inset": false
48231
49341
  }
48232
49342
  ],
48233
49343
  "$type": "shadow",
49344
+ "$description": "Small resting shadow for buttons and interactive elements",
48234
49345
  "$extensions": {
48235
49346
  "org.primer.figma": {
48236
49347
  "collection": "mode",
@@ -48242,19 +49353,43 @@
48242
49353
  {
48243
49354
  "color": "{base.color.neutral.0}",
48244
49355
  "alpha": 0.6,
48245
- "offsetX": "0px",
48246
- "offsetY": "1px",
48247
- "blur": "1px",
48248
- "spread": "0px",
49356
+ "offsetX": {
49357
+ "value": 0,
49358
+ "unit": "px"
49359
+ },
49360
+ "offsetY": {
49361
+ "value": 1,
49362
+ "unit": "px"
49363
+ },
49364
+ "blur": {
49365
+ "value": 1,
49366
+ "unit": "px"
49367
+ },
49368
+ "spread": {
49369
+ "value": 0,
49370
+ "unit": "px"
49371
+ },
48249
49372
  "inset": false
48250
49373
  },
48251
49374
  {
48252
49375
  "color": "{base.color.neutral.0}",
48253
49376
  "alpha": 0.6,
48254
- "offsetX": "0px",
48255
- "offsetY": "1px",
48256
- "blur": "3px",
48257
- "spread": "0px",
49377
+ "offsetX": {
49378
+ "value": 0,
49379
+ "unit": "px"
49380
+ },
49381
+ "offsetY": {
49382
+ "value": 1,
49383
+ "unit": "px"
49384
+ },
49385
+ "blur": {
49386
+ "value": 3,
49387
+ "unit": "px"
49388
+ },
49389
+ "spread": {
49390
+ "value": 0,
49391
+ "unit": "px"
49392
+ },
48258
49393
  "inset": false
48259
49394
  }
48260
49395
  ],
@@ -48262,6 +49397,10 @@
48262
49397
  "isSource": true,
48263
49398
  "$type": "shadow"
48264
49399
  }
49400
+ },
49401
+ "org.primer.llm": {
49402
+ "usage": ["button", "interactive-card", "clickable-element"],
49403
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48265
49404
  }
48266
49405
  },
48267
49406
  "key": "{shadow.resting.small}"
@@ -48272,8 +49411,9 @@
48272
49411
  },
48273
49412
  "shadow-resting-xsmall": {
48274
49413
  "key": "{shadow.resting.xsmall}",
48275
- "$value": "0px 1px 1px 0px #010409cc",
49414
+ "$value": "0 1px 1px 0 #010409cc",
48276
49415
  "$type": "shadow",
49416
+ "$description": "Extra small resting shadow for minimal elevation",
48277
49417
  "$extensions": {
48278
49418
  "org.primer.figma": {
48279
49419
  "collection": "mode",
@@ -48284,16 +49424,32 @@
48284
49424
  "$value": {
48285
49425
  "color": "#010409",
48286
49426
  "alpha": 0.8,
48287
- "offsetX": "0px",
48288
- "offsetY": "1px",
48289
- "blur": "1px",
48290
- "spread": "0px",
49427
+ "offsetX": {
49428
+ "value": 0,
49429
+ "unit": "px"
49430
+ },
49431
+ "offsetY": {
49432
+ "value": 1,
49433
+ "unit": "px"
49434
+ },
49435
+ "blur": {
49436
+ "value": 1,
49437
+ "unit": "px"
49438
+ },
49439
+ "spread": {
49440
+ "value": 0,
49441
+ "unit": "px"
49442
+ },
48291
49443
  "inset": false
48292
49444
  },
48293
49445
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48294
49446
  "isSource": true,
48295
49447
  "$type": "shadow"
48296
49448
  }
49449
+ },
49450
+ "org.primer.llm": {
49451
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49452
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48297
49453
  }
48298
49454
  },
48299
49455
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48302,13 +49458,26 @@
48302
49458
  "$value": {
48303
49459
  "color": "{base.color.neutral.0}",
48304
49460
  "alpha": 0.8,
48305
- "offsetX": "0px",
48306
- "offsetY": "1px",
48307
- "blur": "1px",
48308
- "spread": "0px",
49461
+ "offsetX": {
49462
+ "value": 0,
49463
+ "unit": "px"
49464
+ },
49465
+ "offsetY": {
49466
+ "value": 1,
49467
+ "unit": "px"
49468
+ },
49469
+ "blur": {
49470
+ "value": 1,
49471
+ "unit": "px"
49472
+ },
49473
+ "spread": {
49474
+ "value": 0,
49475
+ "unit": "px"
49476
+ },
48309
49477
  "inset": false
48310
49478
  },
48311
49479
  "$type": "shadow",
49480
+ "$description": "Extra small resting shadow for minimal elevation",
48312
49481
  "$extensions": {
48313
49482
  "org.primer.figma": {
48314
49483
  "collection": "mode",
@@ -48319,16 +49488,32 @@
48319
49488
  "$value": {
48320
49489
  "color": "{base.color.neutral.0}",
48321
49490
  "alpha": 0.8,
48322
- "offsetX": "0px",
48323
- "offsetY": "1px",
48324
- "blur": "1px",
48325
- "spread": "0px",
49491
+ "offsetX": {
49492
+ "value": 0,
49493
+ "unit": "px"
49494
+ },
49495
+ "offsetY": {
49496
+ "value": 1,
49497
+ "unit": "px"
49498
+ },
49499
+ "blur": {
49500
+ "value": 1,
49501
+ "unit": "px"
49502
+ },
49503
+ "spread": {
49504
+ "value": 0,
49505
+ "unit": "px"
49506
+ },
48326
49507
  "inset": false
48327
49508
  },
48328
49509
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48329
49510
  "isSource": true,
48330
49511
  "$type": "shadow"
48331
49512
  }
49513
+ },
49514
+ "org.primer.llm": {
49515
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49516
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48332
49517
  }
48333
49518
  },
48334
49519
  "key": "{shadow.resting.xsmall}"