@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": "#cdd9e5"
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 #316dca",
2535
+ "$value": {
2536
+ "color": "#316dca",
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 #4184e466",
2558
+ "$value": {
2559
+ "color": "#4184e466",
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 #966600",
2581
+ "$value": {
2582
+ "color": "#966600",
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 #ae7c1466",
2604
+ "$value": {
2605
+ "color": "#ae7c1466",
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 #c93c37",
2627
+ "$value": {
2628
+ "color": "#c93c37",
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 #e5534b66",
2646
+ "$value": {
2647
+ "color": "#e5534b66",
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 #c93c37",
2665
+ "$value": {
2666
+ "color": "#c93c37",
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 #e5534b66",
2688
+ "$value": {
2689
+ "color": "#e5534b66",
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 #8256d0",
2757
+ "$value": {
2758
+ "color": "#8256d0",
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 #986ee266",
2780
+ "$value": {
2781
+ "color": "#986ee266",
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 #347d39",
2895
+ "$value": {
2896
+ "color": "#347d39",
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 #46954a66",
2914
+ "$value": {
2915
+ "color": "#46954a66",
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 #ae5622",
2933
+ "$value": {
2934
+ "color": "#ae5622",
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 #cc6b2c66",
2956
+ "$value": {
2957
+ "color": "#cc6b2c66",
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 #ae4c82",
2979
+ "$value": {
2980
+ "color": "#ae4c82",
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 #c9619866",
3002
+ "$value": {
3003
+ "color": "#c9619866",
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 #347d39",
3025
+ "$value": {
3026
+ "color": "#347d39",
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 #46954a66",
3048
+ "$value": {
3049
+ "color": "#46954a66",
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 #8256d0",
3094
+ "$value": {
3095
+ "color": "#8256d0",
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 #986ee266",
3117
+ "$value": {
3118
+ "color": "#986ee266",
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,
@@ -6946,7 +7106,7 @@
6946
7106
  },
6947
7107
  "button-danger-shadow-selected": {
6948
7108
  "key": "{button.danger.shadow.selected}",
6949
- "$value": "0px 0px 0px 0px #000000",
7109
+ "$value": "0 0 0 0 #000000",
6950
7110
  "$type": "shadow",
6951
7111
  "$extensions": {
6952
7112
  "org.primer.figma": {
@@ -6959,10 +7119,22 @@
6959
7119
  {
6960
7120
  "color": "#4d210c",
6961
7121
  "alpha": 0.2,
6962
- "offsetX": "0px",
6963
- "offsetY": "1px",
6964
- "blur": "0px",
6965
- "spread": "0px",
7122
+ "offsetX": {
7123
+ "value": 0,
7124
+ "unit": "px"
7125
+ },
7126
+ "offsetY": {
7127
+ "value": 1,
7128
+ "unit": "px"
7129
+ },
7130
+ "blur": {
7131
+ "value": 0,
7132
+ "unit": "px"
7133
+ },
7134
+ "spread": {
7135
+ "value": 0,
7136
+ "unit": "px"
7137
+ },
6966
7138
  "inset": true
6967
7139
  }
6968
7140
  ],
@@ -6975,10 +7147,22 @@
6975
7147
  {
6976
7148
  "color": "#00000000",
6977
7149
  "alpha": 0,
6978
- "offsetX": "0px",
6979
- "offsetY": "0px",
6980
- "blur": "0px",
6981
- "spread": "0px",
7150
+ "offsetX": {
7151
+ "value": 0,
7152
+ "unit": "px"
7153
+ },
7154
+ "offsetY": {
7155
+ "value": 0,
7156
+ "unit": "px"
7157
+ },
7158
+ "blur": {
7159
+ "value": 0,
7160
+ "unit": "px"
7161
+ },
7162
+ "spread": {
7163
+ "value": 0,
7164
+ "unit": "px"
7165
+ },
6982
7166
  "inset": false
6983
7167
  }
6984
7168
  ],
@@ -6995,10 +7179,22 @@
6995
7179
  {
6996
7180
  "color": "{base.color.transparent}",
6997
7181
  "alpha": 0,
6998
- "offsetX": "0px",
6999
- "offsetY": "0px",
7000
- "blur": "0px",
7001
- "spread": "0px",
7182
+ "offsetX": {
7183
+ "value": 0,
7184
+ "unit": "px"
7185
+ },
7186
+ "offsetY": {
7187
+ "value": 0,
7188
+ "unit": "px"
7189
+ },
7190
+ "blur": {
7191
+ "value": 0,
7192
+ "unit": "px"
7193
+ },
7194
+ "spread": {
7195
+ "value": 0,
7196
+ "unit": "px"
7197
+ },
7002
7198
  "inset": false
7003
7199
  }
7004
7200
  ],
@@ -7014,10 +7210,22 @@
7014
7210
  {
7015
7211
  "color": "{base.color.orange.9}",
7016
7212
  "alpha": 0.2,
7017
- "offsetX": "0px",
7018
- "offsetY": "1px",
7019
- "blur": "0px",
7020
- "spread": "0px",
7213
+ "offsetX": {
7214
+ "value": 0,
7215
+ "unit": "px"
7216
+ },
7217
+ "offsetY": {
7218
+ "value": 1,
7219
+ "unit": "px"
7220
+ },
7221
+ "blur": {
7222
+ "value": 0,
7223
+ "unit": "px"
7224
+ },
7225
+ "spread": {
7226
+ "value": 0,
7227
+ "unit": "px"
7228
+ },
7021
7229
  "inset": true
7022
7230
  }
7023
7231
  ],
@@ -7030,10 +7238,22 @@
7030
7238
  {
7031
7239
  "color": "{base.color.transparent}",
7032
7240
  "alpha": 0,
7033
- "offsetX": "0px",
7034
- "offsetY": "0px",
7035
- "blur": "0px",
7036
- "spread": "0px",
7241
+ "offsetX": {
7242
+ "value": 0,
7243
+ "unit": "px"
7244
+ },
7245
+ "offsetY": {
7246
+ "value": 0,
7247
+ "unit": "px"
7248
+ },
7249
+ "blur": {
7250
+ "value": 0,
7251
+ "unit": "px"
7252
+ },
7253
+ "spread": {
7254
+ "value": 0,
7255
+ "unit": "px"
7256
+ },
7037
7257
  "inset": false
7038
7258
  }
7039
7259
  ],
@@ -7409,7 +7629,7 @@
7409
7629
  },
7410
7630
  "button-default-shadow-resting": {
7411
7631
  "key": "{button.default.shadow.resting}",
7412
- "$value": "0px 0px 0px 0px #000000",
7632
+ "$value": "0 0 0 0 #000000",
7413
7633
  "$type": "shadow",
7414
7634
  "$extensions": {
7415
7635
  "org.primer.figma": {
@@ -7422,10 +7642,22 @@
7422
7642
  {
7423
7643
  "color": "#00000000",
7424
7644
  "alpha": 0,
7425
- "offsetX": "0px",
7426
- "offsetY": "0px",
7427
- "blur": "0px",
7428
- "spread": "0px",
7645
+ "offsetX": {
7646
+ "value": 0,
7647
+ "unit": "px"
7648
+ },
7649
+ "offsetY": {
7650
+ "value": 0,
7651
+ "unit": "px"
7652
+ },
7653
+ "blur": {
7654
+ "value": 0,
7655
+ "unit": "px"
7656
+ },
7657
+ "spread": {
7658
+ "value": 0,
7659
+ "unit": "px"
7660
+ },
7429
7661
  "inset": false
7430
7662
  }
7431
7663
  ],
@@ -7442,10 +7674,22 @@
7442
7674
  {
7443
7675
  "color": "{base.color.transparent}",
7444
7676
  "alpha": 0,
7445
- "offsetX": "0px",
7446
- "offsetY": "0px",
7447
- "blur": "0px",
7448
- "spread": "0px",
7677
+ "offsetX": {
7678
+ "value": 0,
7679
+ "unit": "px"
7680
+ },
7681
+ "offsetY": {
7682
+ "value": 0,
7683
+ "unit": "px"
7684
+ },
7685
+ "blur": {
7686
+ "value": 0,
7687
+ "unit": "px"
7688
+ },
7689
+ "spread": {
7690
+ "value": 0,
7691
+ "unit": "px"
7692
+ },
7449
7693
  "inset": false
7450
7694
  }
7451
7695
  ],
@@ -7461,10 +7705,22 @@
7461
7705
  {
7462
7706
  "color": "{base.color.transparent}",
7463
7707
  "alpha": 0,
7464
- "offsetX": "0px",
7465
- "offsetY": "0px",
7466
- "blur": "0px",
7467
- "spread": "0px",
7708
+ "offsetX": {
7709
+ "value": 0,
7710
+ "unit": "px"
7711
+ },
7712
+ "offsetY": {
7713
+ "value": 0,
7714
+ "unit": "px"
7715
+ },
7716
+ "blur": {
7717
+ "value": 0,
7718
+ "unit": "px"
7719
+ },
7720
+ "spread": {
7721
+ "value": 0,
7722
+ "unit": "px"
7723
+ },
7468
7724
  "inset": false
7469
7725
  }
7470
7726
  ],
@@ -9168,7 +9424,7 @@
9168
9424
  },
9169
9425
  "button-outline-shadow-selected": {
9170
9426
  "key": "{button.outline.shadow.selected}",
9171
- "$value": "0px 0px 0px 0px #000000",
9427
+ "$value": "0 0 0 0 #000000",
9172
9428
  "$type": "shadow",
9173
9429
  "$extensions": {
9174
9430
  "org.primer.figma": {
@@ -9181,10 +9437,22 @@
9181
9437
  {
9182
9438
  "color": "#00000000",
9183
9439
  "alpha": 0,
9184
- "offsetX": "0px",
9185
- "offsetY": "0px",
9186
- "blur": "0px",
9187
- "spread": "0px",
9440
+ "offsetX": {
9441
+ "value": 0,
9442
+ "unit": "px"
9443
+ },
9444
+ "offsetY": {
9445
+ "value": 0,
9446
+ "unit": "px"
9447
+ },
9448
+ "blur": {
9449
+ "value": 0,
9450
+ "unit": "px"
9451
+ },
9452
+ "spread": {
9453
+ "value": 0,
9454
+ "unit": "px"
9455
+ },
9188
9456
  "inset": false
9189
9457
  }
9190
9458
  ],
@@ -9201,10 +9469,22 @@
9201
9469
  {
9202
9470
  "color": "{base.color.transparent}",
9203
9471
  "alpha": 0,
9204
- "offsetX": "0px",
9205
- "offsetY": "0px",
9206
- "blur": "0px",
9207
- "spread": "0px",
9472
+ "offsetX": {
9473
+ "value": 0,
9474
+ "unit": "px"
9475
+ },
9476
+ "offsetY": {
9477
+ "value": 0,
9478
+ "unit": "px"
9479
+ },
9480
+ "blur": {
9481
+ "value": 0,
9482
+ "unit": "px"
9483
+ },
9484
+ "spread": {
9485
+ "value": 0,
9486
+ "unit": "px"
9487
+ },
9208
9488
  "inset": false
9209
9489
  }
9210
9490
  ],
@@ -9220,10 +9500,22 @@
9220
9500
  {
9221
9501
  "color": "{base.color.transparent}",
9222
9502
  "alpha": 0,
9223
- "offsetX": "0px",
9224
- "offsetY": "0px",
9225
- "blur": "0px",
9226
- "spread": "0px",
9503
+ "offsetX": {
9504
+ "value": 0,
9505
+ "unit": "px"
9506
+ },
9507
+ "offsetY": {
9508
+ "value": 0,
9509
+ "unit": "px"
9510
+ },
9511
+ "blur": {
9512
+ "value": 0,
9513
+ "unit": "px"
9514
+ },
9515
+ "spread": {
9516
+ "value": 0,
9517
+ "unit": "px"
9518
+ },
9227
9519
  "inset": false
9228
9520
  }
9229
9521
  ],
@@ -10374,7 +10666,7 @@
10374
10666
  },
10375
10667
  "button-primary-shadow-selected": {
10376
10668
  "key": "{button.primary.shadow.selected}",
10377
- "$value": "0px 0px 0px 0px #000000",
10669
+ "$value": "0 0 0 0 #000000",
10378
10670
  "$type": "shadow",
10379
10671
  "$extensions": {
10380
10672
  "org.primer.figma": {
@@ -10387,10 +10679,22 @@
10387
10679
  {
10388
10680
  "color": "#0f2d5c",
10389
10681
  "alpha": 0.3,
10390
- "offsetX": "0px",
10391
- "offsetY": "1px",
10392
- "blur": "0px",
10393
- "spread": "0px",
10682
+ "offsetX": {
10683
+ "value": 0,
10684
+ "unit": "px"
10685
+ },
10686
+ "offsetY": {
10687
+ "value": 1,
10688
+ "unit": "px"
10689
+ },
10690
+ "blur": {
10691
+ "value": 0,
10692
+ "unit": "px"
10693
+ },
10694
+ "spread": {
10695
+ "value": 0,
10696
+ "unit": "px"
10697
+ },
10394
10698
  "inset": true
10395
10699
  }
10396
10700
  ],
@@ -10403,10 +10707,22 @@
10403
10707
  {
10404
10708
  "color": "#0f2d5c",
10405
10709
  "alpha": 0.3,
10406
- "offsetX": "0px",
10407
- "offsetY": "1px",
10408
- "blur": "0px",
10409
- "spread": "0px",
10710
+ "offsetX": {
10711
+ "value": 0,
10712
+ "unit": "px"
10713
+ },
10714
+ "offsetY": {
10715
+ "value": 1,
10716
+ "unit": "px"
10717
+ },
10718
+ "blur": {
10719
+ "value": 0,
10720
+ "unit": "px"
10721
+ },
10722
+ "spread": {
10723
+ "value": 0,
10724
+ "unit": "px"
10725
+ },
10410
10726
  "inset": true
10411
10727
  }
10412
10728
  ],
@@ -10419,10 +10735,22 @@
10419
10735
  {
10420
10736
  "color": "#00000000",
10421
10737
  "alpha": 0,
10422
- "offsetX": "0px",
10423
- "offsetY": "0px",
10424
- "blur": "0px",
10425
- "spread": "0px",
10738
+ "offsetX": {
10739
+ "value": 0,
10740
+ "unit": "px"
10741
+ },
10742
+ "offsetY": {
10743
+ "value": 0,
10744
+ "unit": "px"
10745
+ },
10746
+ "blur": {
10747
+ "value": 0,
10748
+ "unit": "px"
10749
+ },
10750
+ "spread": {
10751
+ "value": 0,
10752
+ "unit": "px"
10753
+ },
10426
10754
  "inset": false
10427
10755
  }
10428
10756
  ],
@@ -10439,10 +10767,22 @@
10439
10767
  {
10440
10768
  "color": "{base.color.transparent}",
10441
10769
  "alpha": 0,
10442
- "offsetX": "0px",
10443
- "offsetY": "0px",
10444
- "blur": "0px",
10445
- "spread": "0px",
10770
+ "offsetX": {
10771
+ "value": 0,
10772
+ "unit": "px"
10773
+ },
10774
+ "offsetY": {
10775
+ "value": 0,
10776
+ "unit": "px"
10777
+ },
10778
+ "blur": {
10779
+ "value": 0,
10780
+ "unit": "px"
10781
+ },
10782
+ "spread": {
10783
+ "value": 0,
10784
+ "unit": "px"
10785
+ },
10446
10786
  "inset": false
10447
10787
  }
10448
10788
  ],
@@ -10458,10 +10798,22 @@
10458
10798
  {
10459
10799
  "color": "{base.color.blue.9}",
10460
10800
  "alpha": 0.3,
10461
- "offsetX": "0px",
10462
- "offsetY": "1px",
10463
- "blur": "0px",
10464
- "spread": "0px",
10801
+ "offsetX": {
10802
+ "value": 0,
10803
+ "unit": "px"
10804
+ },
10805
+ "offsetY": {
10806
+ "value": 1,
10807
+ "unit": "px"
10808
+ },
10809
+ "blur": {
10810
+ "value": 0,
10811
+ "unit": "px"
10812
+ },
10813
+ "spread": {
10814
+ "value": 0,
10815
+ "unit": "px"
10816
+ },
10465
10817
  "inset": true
10466
10818
  }
10467
10819
  ],
@@ -10474,10 +10826,22 @@
10474
10826
  {
10475
10827
  "color": "{base.color.blue.9}",
10476
10828
  "alpha": 0.3,
10477
- "offsetX": "0px",
10478
- "offsetY": "1px",
10479
- "blur": "0px",
10480
- "spread": "0px",
10829
+ "offsetX": {
10830
+ "value": 0,
10831
+ "unit": "px"
10832
+ },
10833
+ "offsetY": {
10834
+ "value": 1,
10835
+ "unit": "px"
10836
+ },
10837
+ "blur": {
10838
+ "value": 0,
10839
+ "unit": "px"
10840
+ },
10841
+ "spread": {
10842
+ "value": 0,
10843
+ "unit": "px"
10844
+ },
10481
10845
  "inset": true
10482
10846
  }
10483
10847
  ],
@@ -10490,10 +10854,22 @@
10490
10854
  {
10491
10855
  "color": "{base.color.transparent}",
10492
10856
  "alpha": 0,
10493
- "offsetX": "0px",
10494
- "offsetY": "0px",
10495
- "blur": "0px",
10496
- "spread": "0px",
10857
+ "offsetX": {
10858
+ "value": 0,
10859
+ "unit": "px"
10860
+ },
10861
+ "offsetY": {
10862
+ "value": 0,
10863
+ "unit": "px"
10864
+ },
10865
+ "blur": {
10866
+ "value": 0,
10867
+ "unit": "px"
10868
+ },
10869
+ "spread": {
10870
+ "value": 0,
10871
+ "unit": "px"
10872
+ },
10497
10873
  "inset": false
10498
10874
  }
10499
10875
  ],
@@ -37246,6 +37622,10 @@
37246
37622
  },
37247
37623
  "org.primer.overrides": {
37248
37624
  "dark": "#010409"
37625
+ },
37626
+ "org.primer.llm": {
37627
+ "doNotUse": true,
37628
+ "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."
37249
37629
  }
37250
37630
  },
37251
37631
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37262,6 +37642,10 @@
37262
37642
  },
37263
37643
  "org.primer.overrides": {
37264
37644
  "dark": "{base.color.neutral.0}"
37645
+ },
37646
+ "org.primer.llm": {
37647
+ "doNotUse": true,
37648
+ "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."
37265
37649
  }
37266
37650
  },
37267
37651
  "key": "{fgColor.black}"
@@ -38235,6 +38619,10 @@
38235
38619
  },
38236
38620
  "org.primer.overrides": {
38237
38621
  "dark": "#cdd9e5"
38622
+ },
38623
+ "org.primer.llm": {
38624
+ "doNotUse": true,
38625
+ "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."
38238
38626
  }
38239
38627
  },
38240
38628
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38251,6 +38639,10 @@
38251
38639
  },
38252
38640
  "org.primer.overrides": {
38253
38641
  "dark": "{base.color.neutral.13}"
38642
+ },
38643
+ "org.primer.llm": {
38644
+ "doNotUse": true,
38645
+ "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."
38254
38646
  }
38255
38647
  },
38256
38648
  "key": "{fgColor.white}"
@@ -38276,7 +38668,10 @@
38276
38668
  "$value": {
38277
38669
  "color": "{focus.outlineColor}",
38278
38670
  "style": "solid",
38279
- "width": "2px"
38671
+ "width": {
38672
+ "value": 2,
38673
+ "unit": "px"
38674
+ }
38280
38675
  },
38281
38676
  "$type": "border",
38282
38677
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47435,7 +47830,7 @@
47435
47830
  },
47436
47831
  "shadow-floating-large": {
47437
47832
  "key": "{shadow.floating.large}",
47438
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47833
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47439
47834
  "$type": "shadow",
47440
47835
  "$description": "Large floating shadow for modals and dialogs",
47441
47836
  "$extensions": {
@@ -47449,18 +47844,42 @@
47449
47844
  {
47450
47845
  "color": "#3d444db3",
47451
47846
  "alpha": 1,
47452
- "offsetX": "0px",
47453
- "offsetY": "0px",
47454
- "blur": "0px",
47455
- "spread": "1px"
47847
+ "offsetX": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ },
47851
+ "offsetY": {
47852
+ "value": 0,
47853
+ "unit": "px"
47854
+ },
47855
+ "blur": {
47856
+ "value": 0,
47857
+ "unit": "px"
47858
+ },
47859
+ "spread": {
47860
+ "value": 1,
47861
+ "unit": "px"
47862
+ }
47456
47863
  },
47457
47864
  {
47458
47865
  "color": "#010409",
47459
47866
  "alpha": 1,
47460
- "offsetX": "0px",
47461
- "offsetY": "24px",
47462
- "blur": "48px",
47463
- "spread": "0px"
47867
+ "offsetX": {
47868
+ "value": 0,
47869
+ "unit": "px"
47870
+ },
47871
+ "offsetY": {
47872
+ "value": 24,
47873
+ "unit": "px"
47874
+ },
47875
+ "blur": {
47876
+ "value": 48,
47877
+ "unit": "px"
47878
+ },
47879
+ "spread": {
47880
+ "value": 0,
47881
+ "unit": "px"
47882
+ }
47464
47883
  }
47465
47884
  ],
47466
47885
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47480,18 +47899,42 @@
47480
47899
  {
47481
47900
  "color": "{overlay.borderColor}",
47482
47901
  "alpha": 1,
47483
- "offsetX": "0px",
47484
- "offsetY": "0px",
47485
- "blur": "0px",
47486
- "spread": "1px"
47902
+ "offsetX": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ },
47906
+ "offsetY": {
47907
+ "value": 0,
47908
+ "unit": "px"
47909
+ },
47910
+ "blur": {
47911
+ "value": 0,
47912
+ "unit": "px"
47913
+ },
47914
+ "spread": {
47915
+ "value": 1,
47916
+ "unit": "px"
47917
+ }
47487
47918
  },
47488
47919
  {
47489
47920
  "color": "{base.color.neutral.0}",
47490
47921
  "alpha": 1,
47491
- "offsetX": "0px",
47492
- "offsetY": "24px",
47493
- "blur": "48px",
47494
- "spread": "0px"
47922
+ "offsetX": {
47923
+ "value": 0,
47924
+ "unit": "px"
47925
+ },
47926
+ "offsetY": {
47927
+ "value": 24,
47928
+ "unit": "px"
47929
+ },
47930
+ "blur": {
47931
+ "value": 48,
47932
+ "unit": "px"
47933
+ },
47934
+ "spread": {
47935
+ "value": 0,
47936
+ "unit": "px"
47937
+ }
47495
47938
  }
47496
47939
  ],
47497
47940
  "$type": "shadow",
@@ -47507,18 +47950,42 @@
47507
47950
  {
47508
47951
  "color": "{overlay.borderColor}",
47509
47952
  "alpha": 1,
47510
- "offsetX": "0px",
47511
- "offsetY": "0px",
47512
- "blur": "0px",
47513
- "spread": "1px"
47953
+ "offsetX": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ },
47957
+ "offsetY": {
47958
+ "value": 0,
47959
+ "unit": "px"
47960
+ },
47961
+ "blur": {
47962
+ "value": 0,
47963
+ "unit": "px"
47964
+ },
47965
+ "spread": {
47966
+ "value": 1,
47967
+ "unit": "px"
47968
+ }
47514
47969
  },
47515
47970
  {
47516
47971
  "color": "{base.color.neutral.0}",
47517
47972
  "alpha": 1,
47518
- "offsetX": "0px",
47519
- "offsetY": "24px",
47520
- "blur": "48px",
47521
- "spread": "0px"
47973
+ "offsetX": {
47974
+ "value": 0,
47975
+ "unit": "px"
47976
+ },
47977
+ "offsetY": {
47978
+ "value": 24,
47979
+ "unit": "px"
47980
+ },
47981
+ "blur": {
47982
+ "value": 48,
47983
+ "unit": "px"
47984
+ },
47985
+ "spread": {
47986
+ "value": 0,
47987
+ "unit": "px"
47988
+ }
47522
47989
  }
47523
47990
  ],
47524
47991
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47539,8 +48006,9 @@
47539
48006
  },
47540
48007
  "shadow-floating-legacy": {
47541
48008
  "key": "{shadow.floating.legacy}",
47542
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48009
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47543
48010
  "$type": "shadow",
48011
+ "$description": "Legacy floating shadow for backward compatibility",
47544
48012
  "$extensions": {
47545
48013
  "org.primer.figma": {},
47546
48014
  "org.primer.overrides": {
@@ -47549,24 +48017,52 @@
47549
48017
  {
47550
48018
  "color": "#010409",
47551
48019
  "alpha": 0.4,
47552
- "offsetX": "0px",
47553
- "offsetY": "6px",
47554
- "blur": "12px",
47555
- "spread": "-3px"
48020
+ "offsetX": {
48021
+ "value": 0,
48022
+ "unit": "px"
48023
+ },
48024
+ "offsetY": {
48025
+ "value": 6,
48026
+ "unit": "px"
48027
+ },
48028
+ "blur": {
48029
+ "value": 12,
48030
+ "unit": "px"
48031
+ },
48032
+ "spread": {
48033
+ "value": -3,
48034
+ "unit": "px"
48035
+ }
47556
48036
  },
47557
48037
  {
47558
48038
  "color": "#010409",
47559
48039
  "alpha": 0.4,
47560
- "offsetX": "0px",
47561
- "offsetY": "6px",
47562
- "blur": "18px",
47563
- "spread": "0px"
48040
+ "offsetX": {
48041
+ "value": 0,
48042
+ "unit": "px"
48043
+ },
48044
+ "offsetY": {
48045
+ "value": 6,
48046
+ "unit": "px"
48047
+ },
48048
+ "blur": {
48049
+ "value": 18,
48050
+ "unit": "px"
48051
+ },
48052
+ "spread": {
48053
+ "value": 0,
48054
+ "unit": "px"
48055
+ }
47564
48056
  }
47565
48057
  ],
47566
48058
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47567
48059
  "isSource": true,
47568
48060
  "$type": "shadow"
47569
48061
  }
48062
+ },
48063
+ "org.primer.llm": {
48064
+ "usage": ["legacy-component", "backward-compatibility"],
48065
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47570
48066
  }
47571
48067
  },
47572
48068
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47576,21 +48072,46 @@
47576
48072
  {
47577
48073
  "color": "{base.color.neutral.0}",
47578
48074
  "alpha": 0.4,
47579
- "offsetX": "0px",
47580
- "offsetY": "6px",
47581
- "blur": "12px",
47582
- "spread": "-3px"
48075
+ "offsetX": {
48076
+ "value": 0,
48077
+ "unit": "px"
48078
+ },
48079
+ "offsetY": {
48080
+ "value": 6,
48081
+ "unit": "px"
48082
+ },
48083
+ "blur": {
48084
+ "value": 12,
48085
+ "unit": "px"
48086
+ },
48087
+ "spread": {
48088
+ "value": -3,
48089
+ "unit": "px"
48090
+ }
47583
48091
  },
47584
48092
  {
47585
48093
  "color": "{base.color.neutral.0}",
47586
48094
  "alpha": 0.4,
47587
- "offsetX": "0px",
47588
- "offsetY": "6px",
47589
- "blur": "18px",
47590
- "spread": "0px"
48095
+ "offsetX": {
48096
+ "value": 0,
48097
+ "unit": "px"
48098
+ },
48099
+ "offsetY": {
48100
+ "value": 6,
48101
+ "unit": "px"
48102
+ },
48103
+ "blur": {
48104
+ "value": 18,
48105
+ "unit": "px"
48106
+ },
48107
+ "spread": {
48108
+ "value": 0,
48109
+ "unit": "px"
48110
+ }
47591
48111
  }
47592
48112
  ],
47593
48113
  "$type": "shadow",
48114
+ "$description": "Legacy floating shadow for backward compatibility",
47594
48115
  "$extensions": {
47595
48116
  "org.primer.figma": {},
47596
48117
  "org.primer.overrides": {
@@ -47599,24 +48120,52 @@
47599
48120
  {
47600
48121
  "color": "{base.color.neutral.0}",
47601
48122
  "alpha": 0.4,
47602
- "offsetX": "0px",
47603
- "offsetY": "6px",
47604
- "blur": "12px",
47605
- "spread": "-3px"
48123
+ "offsetX": {
48124
+ "value": 0,
48125
+ "unit": "px"
48126
+ },
48127
+ "offsetY": {
48128
+ "value": 6,
48129
+ "unit": "px"
48130
+ },
48131
+ "blur": {
48132
+ "value": 12,
48133
+ "unit": "px"
48134
+ },
48135
+ "spread": {
48136
+ "value": -3,
48137
+ "unit": "px"
48138
+ }
47606
48139
  },
47607
48140
  {
47608
48141
  "color": "{base.color.neutral.0}",
47609
48142
  "alpha": 0.4,
47610
- "offsetX": "0px",
47611
- "offsetY": "6px",
47612
- "blur": "18px",
47613
- "spread": "0px"
48143
+ "offsetX": {
48144
+ "value": 0,
48145
+ "unit": "px"
48146
+ },
48147
+ "offsetY": {
48148
+ "value": 6,
48149
+ "unit": "px"
48150
+ },
48151
+ "blur": {
48152
+ "value": 18,
48153
+ "unit": "px"
48154
+ },
48155
+ "spread": {
48156
+ "value": 0,
48157
+ "unit": "px"
48158
+ }
47614
48159
  }
47615
48160
  ],
47616
48161
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47617
48162
  "isSource": true,
47618
48163
  "$type": "shadow"
47619
48164
  }
48165
+ },
48166
+ "org.primer.llm": {
48167
+ "usage": ["legacy-component", "backward-compatibility"],
48168
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47620
48169
  }
47621
48170
  },
47622
48171
  "key": "{shadow.floating.legacy}"
@@ -47627,8 +48176,9 @@
47627
48176
  },
47628
48177
  "shadow-floating-medium": {
47629
48178
  "key": "{shadow.floating.medium}",
47630
- "$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",
48179
+ "$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",
47631
48180
  "$type": "shadow",
48181
+ "$description": "Medium floating shadow for popovers and action menus",
47632
48182
  "$extensions": {
47633
48183
  "org.primer.figma": {
47634
48184
  "collection": "mode",
@@ -47640,48 +48190,112 @@
47640
48190
  {
47641
48191
  "color": "#3d444db3",
47642
48192
  "alpha": 1,
47643
- "offsetX": "0px",
47644
- "offsetY": "0px",
47645
- "blur": "0px",
47646
- "spread": "1px"
48193
+ "offsetX": {
48194
+ "value": 0,
48195
+ "unit": "px"
48196
+ },
48197
+ "offsetY": {
48198
+ "value": 0,
48199
+ "unit": "px"
48200
+ },
48201
+ "blur": {
48202
+ "value": 0,
48203
+ "unit": "px"
48204
+ },
48205
+ "spread": {
48206
+ "value": 1,
48207
+ "unit": "px"
48208
+ }
47647
48209
  },
47648
48210
  {
47649
48211
  "color": "#010409",
47650
48212
  "alpha": 0.4,
47651
- "offsetX": "0px",
47652
- "offsetY": "8px",
47653
- "blur": "16px",
47654
- "spread": "-4px"
48213
+ "offsetX": {
48214
+ "value": 0,
48215
+ "unit": "px"
48216
+ },
48217
+ "offsetY": {
48218
+ "value": 8,
48219
+ "unit": "px"
48220
+ },
48221
+ "blur": {
48222
+ "value": 16,
48223
+ "unit": "px"
48224
+ },
48225
+ "spread": {
48226
+ "value": -4,
48227
+ "unit": "px"
48228
+ }
47655
48229
  },
47656
48230
  {
47657
48231
  "color": "#010409",
47658
48232
  "alpha": 0.4,
47659
- "offsetX": "0px",
47660
- "offsetY": "4px",
47661
- "blur": "32px",
47662
- "spread": "-4px"
48233
+ "offsetX": {
48234
+ "value": 0,
48235
+ "unit": "px"
48236
+ },
48237
+ "offsetY": {
48238
+ "value": 4,
48239
+ "unit": "px"
48240
+ },
48241
+ "blur": {
48242
+ "value": 32,
48243
+ "unit": "px"
48244
+ },
48245
+ "spread": {
48246
+ "value": -4,
48247
+ "unit": "px"
48248
+ }
47663
48249
  },
47664
48250
  {
47665
48251
  "color": "#010409",
47666
48252
  "alpha": 0.4,
47667
- "offsetX": "0px",
47668
- "offsetY": "24px",
47669
- "blur": "48px",
47670
- "spread": "-12px"
48253
+ "offsetX": {
48254
+ "value": 0,
48255
+ "unit": "px"
48256
+ },
48257
+ "offsetY": {
48258
+ "value": 24,
48259
+ "unit": "px"
48260
+ },
48261
+ "blur": {
48262
+ "value": 48,
48263
+ "unit": "px"
48264
+ },
48265
+ "spread": {
48266
+ "value": -12,
48267
+ "unit": "px"
48268
+ }
47671
48269
  },
47672
48270
  {
47673
48271
  "color": "#010409",
47674
48272
  "alpha": 0.4,
47675
- "offsetX": "0px",
47676
- "offsetY": "48px",
47677
- "blur": "96px",
47678
- "spread": "-24px"
48273
+ "offsetX": {
48274
+ "value": 0,
48275
+ "unit": "px"
48276
+ },
48277
+ "offsetY": {
48278
+ "value": 48,
48279
+ "unit": "px"
48280
+ },
48281
+ "blur": {
48282
+ "value": 96,
48283
+ "unit": "px"
48284
+ },
48285
+ "spread": {
48286
+ "value": -24,
48287
+ "unit": "px"
48288
+ }
47679
48289
  }
47680
48290
  ],
47681
48291
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47682
48292
  "isSource": true,
47683
48293
  "$type": "shadow"
47684
48294
  }
48295
+ },
48296
+ "org.primer.llm": {
48297
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48298
+ "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."
47685
48299
  }
47686
48300
  },
47687
48301
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47691,45 +48305,106 @@
47691
48305
  {
47692
48306
  "color": "{overlay.borderColor}",
47693
48307
  "alpha": 1,
47694
- "offsetX": "0px",
47695
- "offsetY": "0px",
47696
- "blur": "0px",
47697
- "spread": "1px"
48308
+ "offsetX": {
48309
+ "value": 0,
48310
+ "unit": "px"
48311
+ },
48312
+ "offsetY": {
48313
+ "value": 0,
48314
+ "unit": "px"
48315
+ },
48316
+ "blur": {
48317
+ "value": 0,
48318
+ "unit": "px"
48319
+ },
48320
+ "spread": {
48321
+ "value": 1,
48322
+ "unit": "px"
48323
+ }
47698
48324
  },
47699
48325
  {
47700
48326
  "color": "{base.color.neutral.0}",
47701
48327
  "alpha": 0.4,
47702
- "offsetX": "0px",
47703
- "offsetY": "8px",
47704
- "blur": "16px",
47705
- "spread": "-4px"
48328
+ "offsetX": {
48329
+ "value": 0,
48330
+ "unit": "px"
48331
+ },
48332
+ "offsetY": {
48333
+ "value": 8,
48334
+ "unit": "px"
48335
+ },
48336
+ "blur": {
48337
+ "value": 16,
48338
+ "unit": "px"
48339
+ },
48340
+ "spread": {
48341
+ "value": -4,
48342
+ "unit": "px"
48343
+ }
47706
48344
  },
47707
48345
  {
47708
48346
  "color": "{base.color.neutral.0}",
47709
48347
  "alpha": 0.4,
47710
- "offsetX": "0px",
47711
- "offsetY": "4px",
47712
- "blur": "32px",
47713
- "spread": "-4px"
48348
+ "offsetX": {
48349
+ "value": 0,
48350
+ "unit": "px"
48351
+ },
48352
+ "offsetY": {
48353
+ "value": 4,
48354
+ "unit": "px"
48355
+ },
48356
+ "blur": {
48357
+ "value": 32,
48358
+ "unit": "px"
48359
+ },
48360
+ "spread": {
48361
+ "value": -4,
48362
+ "unit": "px"
48363
+ }
47714
48364
  },
47715
48365
  {
47716
48366
  "color": "{base.color.neutral.0}",
47717
48367
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "24px",
47720
- "blur": "48px",
47721
- "spread": "-12px"
48368
+ "offsetX": {
48369
+ "value": 0,
48370
+ "unit": "px"
48371
+ },
48372
+ "offsetY": {
48373
+ "value": 24,
48374
+ "unit": "px"
48375
+ },
48376
+ "blur": {
48377
+ "value": 48,
48378
+ "unit": "px"
48379
+ },
48380
+ "spread": {
48381
+ "value": -12,
48382
+ "unit": "px"
48383
+ }
47722
48384
  },
47723
48385
  {
47724
48386
  "color": "{base.color.neutral.0}",
47725
48387
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "48px",
47728
- "blur": "96px",
47729
- "spread": "-24px"
48388
+ "offsetX": {
48389
+ "value": 0,
48390
+ "unit": "px"
48391
+ },
48392
+ "offsetY": {
48393
+ "value": 48,
48394
+ "unit": "px"
48395
+ },
48396
+ "blur": {
48397
+ "value": 96,
48398
+ "unit": "px"
48399
+ },
48400
+ "spread": {
48401
+ "value": -24,
48402
+ "unit": "px"
48403
+ }
47730
48404
  }
47731
48405
  ],
47732
48406
  "$type": "shadow",
48407
+ "$description": "Medium floating shadow for popovers and action menus",
47733
48408
  "$extensions": {
47734
48409
  "org.primer.figma": {
47735
48410
  "collection": "mode",
@@ -47741,48 +48416,112 @@
47741
48416
  {
47742
48417
  "color": "{overlay.borderColor}",
47743
48418
  "alpha": 1,
47744
- "offsetX": "0px",
47745
- "offsetY": "0px",
47746
- "blur": "0px",
47747
- "spread": "1px"
48419
+ "offsetX": {
48420
+ "value": 0,
48421
+ "unit": "px"
48422
+ },
48423
+ "offsetY": {
48424
+ "value": 0,
48425
+ "unit": "px"
48426
+ },
48427
+ "blur": {
48428
+ "value": 0,
48429
+ "unit": "px"
48430
+ },
48431
+ "spread": {
48432
+ "value": 1,
48433
+ "unit": "px"
48434
+ }
47748
48435
  },
47749
48436
  {
47750
48437
  "color": "{base.color.neutral.0}",
47751
48438
  "alpha": 0.4,
47752
- "offsetX": "0px",
47753
- "offsetY": "8px",
47754
- "blur": "16px",
47755
- "spread": "-4px"
48439
+ "offsetX": {
48440
+ "value": 0,
48441
+ "unit": "px"
48442
+ },
48443
+ "offsetY": {
48444
+ "value": 8,
48445
+ "unit": "px"
48446
+ },
48447
+ "blur": {
48448
+ "value": 16,
48449
+ "unit": "px"
48450
+ },
48451
+ "spread": {
48452
+ "value": -4,
48453
+ "unit": "px"
48454
+ }
47756
48455
  },
47757
48456
  {
47758
48457
  "color": "{base.color.neutral.0}",
47759
48458
  "alpha": 0.4,
47760
- "offsetX": "0px",
47761
- "offsetY": "4px",
47762
- "blur": "32px",
47763
- "spread": "-4px"
48459
+ "offsetX": {
48460
+ "value": 0,
48461
+ "unit": "px"
48462
+ },
48463
+ "offsetY": {
48464
+ "value": 4,
48465
+ "unit": "px"
48466
+ },
48467
+ "blur": {
48468
+ "value": 32,
48469
+ "unit": "px"
48470
+ },
48471
+ "spread": {
48472
+ "value": -4,
48473
+ "unit": "px"
48474
+ }
47764
48475
  },
47765
48476
  {
47766
48477
  "color": "{base.color.neutral.0}",
47767
48478
  "alpha": 0.4,
47768
- "offsetX": "0px",
47769
- "offsetY": "24px",
47770
- "blur": "48px",
47771
- "spread": "-12px"
48479
+ "offsetX": {
48480
+ "value": 0,
48481
+ "unit": "px"
48482
+ },
48483
+ "offsetY": {
48484
+ "value": 24,
48485
+ "unit": "px"
48486
+ },
48487
+ "blur": {
48488
+ "value": 48,
48489
+ "unit": "px"
48490
+ },
48491
+ "spread": {
48492
+ "value": -12,
48493
+ "unit": "px"
48494
+ }
47772
48495
  },
47773
48496
  {
47774
48497
  "color": "{base.color.neutral.0}",
47775
48498
  "alpha": 0.4,
47776
- "offsetX": "0px",
47777
- "offsetY": "48px",
47778
- "blur": "96px",
47779
- "spread": "-24px"
48499
+ "offsetX": {
48500
+ "value": 0,
48501
+ "unit": "px"
48502
+ },
48503
+ "offsetY": {
48504
+ "value": 48,
48505
+ "unit": "px"
48506
+ },
48507
+ "blur": {
48508
+ "value": 96,
48509
+ "unit": "px"
48510
+ },
48511
+ "spread": {
48512
+ "value": -24,
48513
+ "unit": "px"
48514
+ }
47780
48515
  }
47781
48516
  ],
47782
48517
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47783
48518
  "isSource": true,
47784
48519
  "$type": "shadow"
47785
48520
  }
48521
+ },
48522
+ "org.primer.llm": {
48523
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48524
+ "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."
47786
48525
  }
47787
48526
  },
47788
48527
  "key": "{shadow.floating.medium}"
@@ -47793,7 +48532,7 @@
47793
48532
  },
47794
48533
  "shadow-floating-small": {
47795
48534
  "key": "{shadow.floating.small}",
47796
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48535
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47797
48536
  "$type": "shadow",
47798
48537
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47799
48538
  "$extensions": {
@@ -47807,26 +48546,62 @@
47807
48546
  {
47808
48547
  "color": "#3d444db3",
47809
48548
  "alpha": 1,
47810
- "offsetX": "0px",
47811
- "offsetY": "0px",
47812
- "blur": "0px",
47813
- "spread": "1px"
48549
+ "offsetX": {
48550
+ "value": 0,
48551
+ "unit": "px"
48552
+ },
48553
+ "offsetY": {
48554
+ "value": 0,
48555
+ "unit": "px"
48556
+ },
48557
+ "blur": {
48558
+ "value": 0,
48559
+ "unit": "px"
48560
+ },
48561
+ "spread": {
48562
+ "value": 1,
48563
+ "unit": "px"
48564
+ }
47814
48565
  },
47815
48566
  {
47816
48567
  "color": "#010409",
47817
48568
  "alpha": 0.4,
47818
- "offsetX": "0px",
47819
- "offsetY": "6px",
47820
- "blur": "12px",
47821
- "spread": "-3px"
48569
+ "offsetX": {
48570
+ "value": 0,
48571
+ "unit": "px"
48572
+ },
48573
+ "offsetY": {
48574
+ "value": 6,
48575
+ "unit": "px"
48576
+ },
48577
+ "blur": {
48578
+ "value": 12,
48579
+ "unit": "px"
48580
+ },
48581
+ "spread": {
48582
+ "value": -3,
48583
+ "unit": "px"
48584
+ }
47822
48585
  },
47823
48586
  {
47824
48587
  "color": "#010409",
47825
48588
  "alpha": 0.4,
47826
- "offsetX": "0px",
47827
- "offsetY": "6px",
47828
- "blur": "18px",
47829
- "spread": "0px"
48589
+ "offsetX": {
48590
+ "value": 0,
48591
+ "unit": "px"
48592
+ },
48593
+ "offsetY": {
48594
+ "value": 6,
48595
+ "unit": "px"
48596
+ },
48597
+ "blur": {
48598
+ "value": 18,
48599
+ "unit": "px"
48600
+ },
48601
+ "spread": {
48602
+ "value": 0,
48603
+ "unit": "px"
48604
+ }
47830
48605
  }
47831
48606
  ],
47832
48607
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47846,26 +48621,62 @@
47846
48621
  {
47847
48622
  "color": "{overlay.borderColor}",
47848
48623
  "alpha": 1,
47849
- "offsetX": "0px",
47850
- "offsetY": "0px",
47851
- "blur": "0px",
47852
- "spread": "1px"
48624
+ "offsetX": {
48625
+ "value": 0,
48626
+ "unit": "px"
48627
+ },
48628
+ "offsetY": {
48629
+ "value": 0,
48630
+ "unit": "px"
48631
+ },
48632
+ "blur": {
48633
+ "value": 0,
48634
+ "unit": "px"
48635
+ },
48636
+ "spread": {
48637
+ "value": 1,
48638
+ "unit": "px"
48639
+ }
47853
48640
  },
47854
48641
  {
47855
48642
  "color": "{base.color.neutral.0}",
47856
48643
  "alpha": 0.4,
47857
- "offsetX": "0px",
47858
- "offsetY": "6px",
47859
- "blur": "12px",
47860
- "spread": "-3px"
48644
+ "offsetX": {
48645
+ "value": 0,
48646
+ "unit": "px"
48647
+ },
48648
+ "offsetY": {
48649
+ "value": 6,
48650
+ "unit": "px"
48651
+ },
48652
+ "blur": {
48653
+ "value": 12,
48654
+ "unit": "px"
48655
+ },
48656
+ "spread": {
48657
+ "value": -3,
48658
+ "unit": "px"
48659
+ }
47861
48660
  },
47862
48661
  {
47863
48662
  "color": "{base.color.neutral.0}",
47864
48663
  "alpha": 0.4,
47865
- "offsetX": "0px",
47866
- "offsetY": "6px",
47867
- "blur": "18px",
47868
- "spread": "0px"
48664
+ "offsetX": {
48665
+ "value": 0,
48666
+ "unit": "px"
48667
+ },
48668
+ "offsetY": {
48669
+ "value": 6,
48670
+ "unit": "px"
48671
+ },
48672
+ "blur": {
48673
+ "value": 18,
48674
+ "unit": "px"
48675
+ },
48676
+ "spread": {
48677
+ "value": 0,
48678
+ "unit": "px"
48679
+ }
47869
48680
  }
47870
48681
  ],
47871
48682
  "$type": "shadow",
@@ -47881,26 +48692,62 @@
47881
48692
  {
47882
48693
  "color": "{overlay.borderColor}",
47883
48694
  "alpha": 1,
47884
- "offsetX": "0px",
47885
- "offsetY": "0px",
47886
- "blur": "0px",
47887
- "spread": "1px"
48695
+ "offsetX": {
48696
+ "value": 0,
48697
+ "unit": "px"
48698
+ },
48699
+ "offsetY": {
48700
+ "value": 0,
48701
+ "unit": "px"
48702
+ },
48703
+ "blur": {
48704
+ "value": 0,
48705
+ "unit": "px"
48706
+ },
48707
+ "spread": {
48708
+ "value": 1,
48709
+ "unit": "px"
48710
+ }
47888
48711
  },
47889
48712
  {
47890
48713
  "color": "{base.color.neutral.0}",
47891
48714
  "alpha": 0.4,
47892
- "offsetX": "0px",
47893
- "offsetY": "6px",
47894
- "blur": "12px",
47895
- "spread": "-3px"
48715
+ "offsetX": {
48716
+ "value": 0,
48717
+ "unit": "px"
48718
+ },
48719
+ "offsetY": {
48720
+ "value": 6,
48721
+ "unit": "px"
48722
+ },
48723
+ "blur": {
48724
+ "value": 12,
48725
+ "unit": "px"
48726
+ },
48727
+ "spread": {
48728
+ "value": -3,
48729
+ "unit": "px"
48730
+ }
47896
48731
  },
47897
48732
  {
47898
48733
  "color": "{base.color.neutral.0}",
47899
48734
  "alpha": 0.4,
47900
- "offsetX": "0px",
47901
- "offsetY": "6px",
47902
- "blur": "18px",
47903
- "spread": "0px"
48735
+ "offsetX": {
48736
+ "value": 0,
48737
+ "unit": "px"
48738
+ },
48739
+ "offsetY": {
48740
+ "value": 6,
48741
+ "unit": "px"
48742
+ },
48743
+ "blur": {
48744
+ "value": 18,
48745
+ "unit": "px"
48746
+ },
48747
+ "spread": {
48748
+ "value": 0,
48749
+ "unit": "px"
48750
+ }
47904
48751
  }
47905
48752
  ],
47906
48753
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47921,8 +48768,9 @@
47921
48768
  },
47922
48769
  "shadow-floating-xlarge": {
47923
48770
  "key": "{shadow.floating.xlarge}",
47924
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48771
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47925
48772
  "$type": "shadow",
48773
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47926
48774
  "$extensions": {
47927
48775
  "org.primer.figma": {
47928
48776
  "collection": "mode",
@@ -47934,24 +48782,52 @@
47934
48782
  {
47935
48783
  "color": "#3d444db3",
47936
48784
  "alpha": 1,
47937
- "offsetX": "0px",
47938
- "offsetY": "0px",
47939
- "blur": "0px",
47940
- "spread": "1px"
48785
+ "offsetX": {
48786
+ "value": 0,
48787
+ "unit": "px"
48788
+ },
48789
+ "offsetY": {
48790
+ "value": 0,
48791
+ "unit": "px"
48792
+ },
48793
+ "blur": {
48794
+ "value": 0,
48795
+ "unit": "px"
48796
+ },
48797
+ "spread": {
48798
+ "value": 1,
48799
+ "unit": "px"
48800
+ }
47941
48801
  },
47942
48802
  {
47943
48803
  "color": "#010409",
47944
48804
  "alpha": 1,
47945
- "offsetX": "0px",
47946
- "offsetY": "32px",
47947
- "blur": "64px",
47948
- "spread": "0px"
48805
+ "offsetX": {
48806
+ "value": 0,
48807
+ "unit": "px"
48808
+ },
48809
+ "offsetY": {
48810
+ "value": 32,
48811
+ "unit": "px"
48812
+ },
48813
+ "blur": {
48814
+ "value": 64,
48815
+ "unit": "px"
48816
+ },
48817
+ "spread": {
48818
+ "value": 0,
48819
+ "unit": "px"
48820
+ }
47949
48821
  }
47950
48822
  ],
47951
48823
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47952
48824
  "isSource": true,
47953
48825
  "$type": "shadow"
47954
48826
  }
48827
+ },
48828
+ "org.primer.llm": {
48829
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48830
+ "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."
47955
48831
  }
47956
48832
  },
47957
48833
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47961,21 +48837,46 @@
47961
48837
  {
47962
48838
  "color": "{overlay.borderColor}",
47963
48839
  "alpha": 1,
47964
- "offsetX": "0px",
47965
- "offsetY": "0px",
47966
- "blur": "0px",
47967
- "spread": "1px"
48840
+ "offsetX": {
48841
+ "value": 0,
48842
+ "unit": "px"
48843
+ },
48844
+ "offsetY": {
48845
+ "value": 0,
48846
+ "unit": "px"
48847
+ },
48848
+ "blur": {
48849
+ "value": 0,
48850
+ "unit": "px"
48851
+ },
48852
+ "spread": {
48853
+ "value": 1,
48854
+ "unit": "px"
48855
+ }
47968
48856
  },
47969
48857
  {
47970
48858
  "color": "{base.color.neutral.0}",
47971
48859
  "alpha": 1,
47972
- "offsetX": "0px",
47973
- "offsetY": "32px",
47974
- "blur": "64px",
47975
- "spread": "0px"
48860
+ "offsetX": {
48861
+ "value": 0,
48862
+ "unit": "px"
48863
+ },
48864
+ "offsetY": {
48865
+ "value": 32,
48866
+ "unit": "px"
48867
+ },
48868
+ "blur": {
48869
+ "value": 64,
48870
+ "unit": "px"
48871
+ },
48872
+ "spread": {
48873
+ "value": 0,
48874
+ "unit": "px"
48875
+ }
47976
48876
  }
47977
48877
  ],
47978
48878
  "$type": "shadow",
48879
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47979
48880
  "$extensions": {
47980
48881
  "org.primer.figma": {
47981
48882
  "collection": "mode",
@@ -47987,24 +48888,52 @@
47987
48888
  {
47988
48889
  "color": "{overlay.borderColor}",
47989
48890
  "alpha": 1,
47990
- "offsetX": "0px",
47991
- "offsetY": "0px",
47992
- "blur": "0px",
47993
- "spread": "1px"
48891
+ "offsetX": {
48892
+ "value": 0,
48893
+ "unit": "px"
48894
+ },
48895
+ "offsetY": {
48896
+ "value": 0,
48897
+ "unit": "px"
48898
+ },
48899
+ "blur": {
48900
+ "value": 0,
48901
+ "unit": "px"
48902
+ },
48903
+ "spread": {
48904
+ "value": 1,
48905
+ "unit": "px"
48906
+ }
47994
48907
  },
47995
48908
  {
47996
48909
  "color": "{base.color.neutral.0}",
47997
48910
  "alpha": 1,
47998
- "offsetX": "0px",
47999
- "offsetY": "32px",
48000
- "blur": "64px",
48001
- "spread": "0px"
48911
+ "offsetX": {
48912
+ "value": 0,
48913
+ "unit": "px"
48914
+ },
48915
+ "offsetY": {
48916
+ "value": 32,
48917
+ "unit": "px"
48918
+ },
48919
+ "blur": {
48920
+ "value": 64,
48921
+ "unit": "px"
48922
+ },
48923
+ "spread": {
48924
+ "value": 0,
48925
+ "unit": "px"
48926
+ }
48002
48927
  }
48003
48928
  ],
48004
48929
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48005
48930
  "isSource": true,
48006
48931
  "$type": "shadow"
48007
48932
  }
48933
+ },
48934
+ "org.primer.llm": {
48935
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48936
+ "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."
48008
48937
  }
48009
48938
  },
48010
48939
  "key": "{shadow.floating.xlarge}"
@@ -48015,8 +48944,9 @@
48015
48944
  },
48016
48945
  "shadow-inset": {
48017
48946
  "key": "{shadow.inset}",
48018
- "$value": "inset 0px 1px 0px 0px #0104093d",
48947
+ "$value": "inset 0 1px 0 0 #0104093d",
48019
48948
  "$type": "shadow",
48949
+ "$description": "Inset shadow for recessed elements",
48020
48950
  "$extensions": {
48021
48951
  "org.primer.figma": {
48022
48952
  "collection": "mode",
@@ -48027,16 +48957,32 @@
48027
48957
  "$value": {
48028
48958
  "color": "#010409",
48029
48959
  "alpha": 0.24,
48030
- "offsetX": "0px",
48031
- "offsetY": "1px",
48032
- "blur": "0px",
48033
- "spread": "0px",
48960
+ "offsetX": {
48961
+ "value": 0,
48962
+ "unit": "px"
48963
+ },
48964
+ "offsetY": {
48965
+ "value": 1,
48966
+ "unit": "px"
48967
+ },
48968
+ "blur": {
48969
+ "value": 0,
48970
+ "unit": "px"
48971
+ },
48972
+ "spread": {
48973
+ "value": 0,
48974
+ "unit": "px"
48975
+ },
48034
48976
  "inset": true
48035
48977
  },
48036
48978
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48037
48979
  "isSource": true,
48038
48980
  "$type": "shadow"
48039
48981
  }
48982
+ },
48983
+ "org.primer.llm": {
48984
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48985
+ "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."
48040
48986
  }
48041
48987
  },
48042
48988
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48045,13 +48991,26 @@
48045
48991
  "$value": {
48046
48992
  "color": "{base.color.neutral.0}",
48047
48993
  "alpha": 0.24,
48048
- "offsetX": "0px",
48049
- "offsetY": "1px",
48050
- "blur": "0px",
48051
- "spread": "0px",
48994
+ "offsetX": {
48995
+ "value": 0,
48996
+ "unit": "px"
48997
+ },
48998
+ "offsetY": {
48999
+ "value": 1,
49000
+ "unit": "px"
49001
+ },
49002
+ "blur": {
49003
+ "value": 0,
49004
+ "unit": "px"
49005
+ },
49006
+ "spread": {
49007
+ "value": 0,
49008
+ "unit": "px"
49009
+ },
48052
49010
  "inset": true
48053
49011
  },
48054
49012
  "$type": "shadow",
49013
+ "$description": "Inset shadow for recessed elements",
48055
49014
  "$extensions": {
48056
49015
  "org.primer.figma": {
48057
49016
  "collection": "mode",
@@ -48062,16 +49021,32 @@
48062
49021
  "$value": {
48063
49022
  "color": "{base.color.neutral.0}",
48064
49023
  "alpha": 0.24,
48065
- "offsetX": "0px",
48066
- "offsetY": "1px",
48067
- "blur": "0px",
48068
- "spread": "0px",
49024
+ "offsetX": {
49025
+ "value": 0,
49026
+ "unit": "px"
49027
+ },
49028
+ "offsetY": {
49029
+ "value": 1,
49030
+ "unit": "px"
49031
+ },
49032
+ "blur": {
49033
+ "value": 0,
49034
+ "unit": "px"
49035
+ },
49036
+ "spread": {
49037
+ "value": 0,
49038
+ "unit": "px"
49039
+ },
48069
49040
  "inset": true
48070
49041
  },
48071
49042
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48072
49043
  "isSource": true,
48073
49044
  "$type": "shadow"
48074
49045
  }
49046
+ },
49047
+ "org.primer.llm": {
49048
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
49049
+ "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."
48075
49050
  }
48076
49051
  },
48077
49052
  "key": "{shadow.inset}"
@@ -48082,8 +49057,9 @@
48082
49057
  },
48083
49058
  "shadow-resting-medium": {
48084
49059
  "key": "{shadow.resting.medium}",
48085
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
49060
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48086
49061
  "$type": "shadow",
49062
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48087
49063
  "$extensions": {
48088
49064
  "org.primer.figma": {
48089
49065
  "collection": "mode",
@@ -48095,24 +49071,52 @@
48095
49071
  {
48096
49072
  "color": "#010409",
48097
49073
  "alpha": 0.4,
48098
- "offsetX": "0px",
48099
- "offsetY": "1px",
48100
- "blur": "1px",
48101
- "spread": "0px"
49074
+ "offsetX": {
49075
+ "value": 0,
49076
+ "unit": "px"
49077
+ },
49078
+ "offsetY": {
49079
+ "value": 1,
49080
+ "unit": "px"
49081
+ },
49082
+ "blur": {
49083
+ "value": 1,
49084
+ "unit": "px"
49085
+ },
49086
+ "spread": {
49087
+ "value": 0,
49088
+ "unit": "px"
49089
+ }
48102
49090
  },
48103
49091
  {
48104
49092
  "color": "#010409",
48105
49093
  "alpha": 0.8,
48106
- "offsetX": "0px",
48107
- "offsetY": "3px",
48108
- "blur": "6px",
48109
- "spread": "0px"
49094
+ "offsetX": {
49095
+ "value": 0,
49096
+ "unit": "px"
49097
+ },
49098
+ "offsetY": {
49099
+ "value": 3,
49100
+ "unit": "px"
49101
+ },
49102
+ "blur": {
49103
+ "value": 6,
49104
+ "unit": "px"
49105
+ },
49106
+ "spread": {
49107
+ "value": 0,
49108
+ "unit": "px"
49109
+ }
48110
49110
  }
48111
49111
  ],
48112
49112
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48113
49113
  "isSource": true,
48114
49114
  "$type": "shadow"
48115
49115
  }
49116
+ },
49117
+ "org.primer.llm": {
49118
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49119
+ "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."
48116
49120
  }
48117
49121
  },
48118
49122
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48122,21 +49126,46 @@
48122
49126
  {
48123
49127
  "color": "{base.color.neutral.0}",
48124
49128
  "alpha": 0.4,
48125
- "offsetX": "0px",
48126
- "offsetY": "1px",
48127
- "blur": "1px",
48128
- "spread": "0px"
49129
+ "offsetX": {
49130
+ "value": 0,
49131
+ "unit": "px"
49132
+ },
49133
+ "offsetY": {
49134
+ "value": 1,
49135
+ "unit": "px"
49136
+ },
49137
+ "blur": {
49138
+ "value": 1,
49139
+ "unit": "px"
49140
+ },
49141
+ "spread": {
49142
+ "value": 0,
49143
+ "unit": "px"
49144
+ }
48129
49145
  },
48130
49146
  {
48131
49147
  "color": "{base.color.neutral.0}",
48132
49148
  "alpha": 0.8,
48133
- "offsetX": "0px",
48134
- "offsetY": "3px",
48135
- "blur": "6px",
48136
- "spread": "0px"
49149
+ "offsetX": {
49150
+ "value": 0,
49151
+ "unit": "px"
49152
+ },
49153
+ "offsetY": {
49154
+ "value": 3,
49155
+ "unit": "px"
49156
+ },
49157
+ "blur": {
49158
+ "value": 6,
49159
+ "unit": "px"
49160
+ },
49161
+ "spread": {
49162
+ "value": 0,
49163
+ "unit": "px"
49164
+ }
48137
49165
  }
48138
49166
  ],
48139
49167
  "$type": "shadow",
49168
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48140
49169
  "$extensions": {
48141
49170
  "org.primer.figma": {
48142
49171
  "collection": "mode",
@@ -48148,24 +49177,52 @@
48148
49177
  {
48149
49178
  "color": "{base.color.neutral.0}",
48150
49179
  "alpha": 0.4,
48151
- "offsetX": "0px",
48152
- "offsetY": "1px",
48153
- "blur": "1px",
48154
- "spread": "0px"
49180
+ "offsetX": {
49181
+ "value": 0,
49182
+ "unit": "px"
49183
+ },
49184
+ "offsetY": {
49185
+ "value": 1,
49186
+ "unit": "px"
49187
+ },
49188
+ "blur": {
49189
+ "value": 1,
49190
+ "unit": "px"
49191
+ },
49192
+ "spread": {
49193
+ "value": 0,
49194
+ "unit": "px"
49195
+ }
48155
49196
  },
48156
49197
  {
48157
49198
  "color": "{base.color.neutral.0}",
48158
49199
  "alpha": 0.8,
48159
- "offsetX": "0px",
48160
- "offsetY": "3px",
48161
- "blur": "6px",
48162
- "spread": "0px"
49200
+ "offsetX": {
49201
+ "value": 0,
49202
+ "unit": "px"
49203
+ },
49204
+ "offsetY": {
49205
+ "value": 3,
49206
+ "unit": "px"
49207
+ },
49208
+ "blur": {
49209
+ "value": 6,
49210
+ "unit": "px"
49211
+ },
49212
+ "spread": {
49213
+ "value": 0,
49214
+ "unit": "px"
49215
+ }
48163
49216
  }
48164
49217
  ],
48165
49218
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48166
49219
  "isSource": true,
48167
49220
  "$type": "shadow"
48168
49221
  }
49222
+ },
49223
+ "org.primer.llm": {
49224
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49225
+ "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."
48169
49226
  }
48170
49227
  },
48171
49228
  "key": "{shadow.resting.medium}"
@@ -48176,8 +49233,9 @@
48176
49233
  },
48177
49234
  "shadow-resting-small": {
48178
49235
  "key": "{shadow.resting.small}",
48179
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
49236
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48180
49237
  "$type": "shadow",
49238
+ "$description": "Small resting shadow for buttons and interactive elements",
48181
49239
  "$extensions": {
48182
49240
  "org.primer.figma": {
48183
49241
  "collection": "mode",
@@ -48189,19 +49247,43 @@
48189
49247
  {
48190
49248
  "color": "#010409",
48191
49249
  "alpha": 0.6,
48192
- "offsetX": "0px",
48193
- "offsetY": "1px",
48194
- "blur": "1px",
48195
- "spread": "0px",
49250
+ "offsetX": {
49251
+ "value": 0,
49252
+ "unit": "px"
49253
+ },
49254
+ "offsetY": {
49255
+ "value": 1,
49256
+ "unit": "px"
49257
+ },
49258
+ "blur": {
49259
+ "value": 1,
49260
+ "unit": "px"
49261
+ },
49262
+ "spread": {
49263
+ "value": 0,
49264
+ "unit": "px"
49265
+ },
48196
49266
  "inset": false
48197
49267
  },
48198
49268
  {
48199
49269
  "color": "#010409",
48200
49270
  "alpha": 0.6,
48201
- "offsetX": "0px",
48202
- "offsetY": "1px",
48203
- "blur": "3px",
48204
- "spread": "0px",
49271
+ "offsetX": {
49272
+ "value": 0,
49273
+ "unit": "px"
49274
+ },
49275
+ "offsetY": {
49276
+ "value": 1,
49277
+ "unit": "px"
49278
+ },
49279
+ "blur": {
49280
+ "value": 3,
49281
+ "unit": "px"
49282
+ },
49283
+ "spread": {
49284
+ "value": 0,
49285
+ "unit": "px"
49286
+ },
48205
49287
  "inset": false
48206
49288
  }
48207
49289
  ],
@@ -48209,6 +49291,10 @@
48209
49291
  "isSource": true,
48210
49292
  "$type": "shadow"
48211
49293
  }
49294
+ },
49295
+ "org.primer.llm": {
49296
+ "usage": ["button", "interactive-card", "clickable-element"],
49297
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48212
49298
  }
48213
49299
  },
48214
49300
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48218,23 +49304,48 @@
48218
49304
  {
48219
49305
  "color": "{base.color.neutral.0}",
48220
49306
  "alpha": 0.6,
48221
- "offsetX": "0px",
48222
- "offsetY": "1px",
48223
- "blur": "1px",
48224
- "spread": "0px",
49307
+ "offsetX": {
49308
+ "value": 0,
49309
+ "unit": "px"
49310
+ },
49311
+ "offsetY": {
49312
+ "value": 1,
49313
+ "unit": "px"
49314
+ },
49315
+ "blur": {
49316
+ "value": 1,
49317
+ "unit": "px"
49318
+ },
49319
+ "spread": {
49320
+ "value": 0,
49321
+ "unit": "px"
49322
+ },
48225
49323
  "inset": false
48226
49324
  },
48227
49325
  {
48228
49326
  "color": "{base.color.neutral.0}",
48229
49327
  "alpha": 0.6,
48230
- "offsetX": "0px",
48231
- "offsetY": "1px",
48232
- "blur": "3px",
48233
- "spread": "0px",
49328
+ "offsetX": {
49329
+ "value": 0,
49330
+ "unit": "px"
49331
+ },
49332
+ "offsetY": {
49333
+ "value": 1,
49334
+ "unit": "px"
49335
+ },
49336
+ "blur": {
49337
+ "value": 3,
49338
+ "unit": "px"
49339
+ },
49340
+ "spread": {
49341
+ "value": 0,
49342
+ "unit": "px"
49343
+ },
48234
49344
  "inset": false
48235
49345
  }
48236
49346
  ],
48237
49347
  "$type": "shadow",
49348
+ "$description": "Small resting shadow for buttons and interactive elements",
48238
49349
  "$extensions": {
48239
49350
  "org.primer.figma": {
48240
49351
  "collection": "mode",
@@ -48246,19 +49357,43 @@
48246
49357
  {
48247
49358
  "color": "{base.color.neutral.0}",
48248
49359
  "alpha": 0.6,
48249
- "offsetX": "0px",
48250
- "offsetY": "1px",
48251
- "blur": "1px",
48252
- "spread": "0px",
49360
+ "offsetX": {
49361
+ "value": 0,
49362
+ "unit": "px"
49363
+ },
49364
+ "offsetY": {
49365
+ "value": 1,
49366
+ "unit": "px"
49367
+ },
49368
+ "blur": {
49369
+ "value": 1,
49370
+ "unit": "px"
49371
+ },
49372
+ "spread": {
49373
+ "value": 0,
49374
+ "unit": "px"
49375
+ },
48253
49376
  "inset": false
48254
49377
  },
48255
49378
  {
48256
49379
  "color": "{base.color.neutral.0}",
48257
49380
  "alpha": 0.6,
48258
- "offsetX": "0px",
48259
- "offsetY": "1px",
48260
- "blur": "3px",
48261
- "spread": "0px",
49381
+ "offsetX": {
49382
+ "value": 0,
49383
+ "unit": "px"
49384
+ },
49385
+ "offsetY": {
49386
+ "value": 1,
49387
+ "unit": "px"
49388
+ },
49389
+ "blur": {
49390
+ "value": 3,
49391
+ "unit": "px"
49392
+ },
49393
+ "spread": {
49394
+ "value": 0,
49395
+ "unit": "px"
49396
+ },
48262
49397
  "inset": false
48263
49398
  }
48264
49399
  ],
@@ -48266,6 +49401,10 @@
48266
49401
  "isSource": true,
48267
49402
  "$type": "shadow"
48268
49403
  }
49404
+ },
49405
+ "org.primer.llm": {
49406
+ "usage": ["button", "interactive-card", "clickable-element"],
49407
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48269
49408
  }
48270
49409
  },
48271
49410
  "key": "{shadow.resting.small}"
@@ -48276,8 +49415,9 @@
48276
49415
  },
48277
49416
  "shadow-resting-xsmall": {
48278
49417
  "key": "{shadow.resting.xsmall}",
48279
- "$value": "0px 1px 1px 0px #010409cc",
49418
+ "$value": "0 1px 1px 0 #010409cc",
48280
49419
  "$type": "shadow",
49420
+ "$description": "Extra small resting shadow for minimal elevation",
48281
49421
  "$extensions": {
48282
49422
  "org.primer.figma": {
48283
49423
  "collection": "mode",
@@ -48288,16 +49428,32 @@
48288
49428
  "$value": {
48289
49429
  "color": "#010409",
48290
49430
  "alpha": 0.8,
48291
- "offsetX": "0px",
48292
- "offsetY": "1px",
48293
- "blur": "1px",
48294
- "spread": "0px",
49431
+ "offsetX": {
49432
+ "value": 0,
49433
+ "unit": "px"
49434
+ },
49435
+ "offsetY": {
49436
+ "value": 1,
49437
+ "unit": "px"
49438
+ },
49439
+ "blur": {
49440
+ "value": 1,
49441
+ "unit": "px"
49442
+ },
49443
+ "spread": {
49444
+ "value": 0,
49445
+ "unit": "px"
49446
+ },
48295
49447
  "inset": false
48296
49448
  },
48297
49449
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48298
49450
  "isSource": true,
48299
49451
  "$type": "shadow"
48300
49452
  }
49453
+ },
49454
+ "org.primer.llm": {
49455
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49456
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48301
49457
  }
48302
49458
  },
48303
49459
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48306,13 +49462,26 @@
48306
49462
  "$value": {
48307
49463
  "color": "{base.color.neutral.0}",
48308
49464
  "alpha": 0.8,
48309
- "offsetX": "0px",
48310
- "offsetY": "1px",
48311
- "blur": "1px",
48312
- "spread": "0px",
49465
+ "offsetX": {
49466
+ "value": 0,
49467
+ "unit": "px"
49468
+ },
49469
+ "offsetY": {
49470
+ "value": 1,
49471
+ "unit": "px"
49472
+ },
49473
+ "blur": {
49474
+ "value": 1,
49475
+ "unit": "px"
49476
+ },
49477
+ "spread": {
49478
+ "value": 0,
49479
+ "unit": "px"
49480
+ },
48313
49481
  "inset": false
48314
49482
  },
48315
49483
  "$type": "shadow",
49484
+ "$description": "Extra small resting shadow for minimal elevation",
48316
49485
  "$extensions": {
48317
49486
  "org.primer.figma": {
48318
49487
  "collection": "mode",
@@ -48323,16 +49492,32 @@
48323
49492
  "$value": {
48324
49493
  "color": "{base.color.neutral.0}",
48325
49494
  "alpha": 0.8,
48326
- "offsetX": "0px",
48327
- "offsetY": "1px",
48328
- "blur": "1px",
48329
- "spread": "0px",
49495
+ "offsetX": {
49496
+ "value": 0,
49497
+ "unit": "px"
49498
+ },
49499
+ "offsetY": {
49500
+ "value": 1,
49501
+ "unit": "px"
49502
+ },
49503
+ "blur": {
49504
+ "value": 1,
49505
+ "unit": "px"
49506
+ },
49507
+ "spread": {
49508
+ "value": 0,
49509
+ "unit": "px"
49510
+ },
48330
49511
  "inset": false
48331
49512
  },
48332
49513
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48333
49514
  "isSource": true,
48334
49515
  "$type": "shadow"
48335
49516
  }
49517
+ },
49518
+ "org.primer.llm": {
49519
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49520
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48336
49521
  }
48337
49522
  },
48338
49523
  "key": "{shadow.resting.xsmall}"