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

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