@primer/primitives 11.4.0 → 11.4.1-rc.0499d5a6

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 (165) 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 +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
@@ -167,7 +167,7 @@
167
167
  },
168
168
  "avatar-shadow": {
169
169
  "key": "{avatar.shadow}",
170
- "$value": "0px 0px 0px 2px #0d1117",
170
+ "$value": "0 0 0 2px #0d1117",
171
171
  "$type": "shadow",
172
172
  "$extensions": {
173
173
  "org.primer.figma": {
@@ -180,10 +180,22 @@
180
180
  {
181
181
  "color": "#0d1117",
182
182
  "alpha": 1,
183
- "offsetX": "0px",
184
- "offsetY": "0px",
185
- "blur": "0px",
186
- "spread": "2px"
183
+ "offsetX": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "offsetY": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "blur": {
192
+ "value": 0,
193
+ "unit": "px"
194
+ },
195
+ "spread": {
196
+ "value": 2,
197
+ "unit": "px"
198
+ }
187
199
  }
188
200
  ],
189
201
  "filePath": "src/tokens/component/avatar.json5",
@@ -199,10 +211,22 @@
199
211
  {
200
212
  "color": "{base.color.neutral.1}",
201
213
  "alpha": 1,
202
- "offsetX": "0px",
203
- "offsetY": "0px",
204
- "blur": "0px",
205
- "spread": "2px"
214
+ "offsetX": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "offsetY": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "blur": {
223
+ "value": 0,
224
+ "unit": "px"
225
+ },
226
+ "spread": {
227
+ "value": 2,
228
+ "unit": "px"
229
+ }
206
230
  }
207
231
  ],
208
232
  "$type": "shadow",
@@ -217,10 +241,22 @@
217
241
  {
218
242
  "color": "{base.color.neutral.1}",
219
243
  "alpha": 1,
220
- "offsetX": "0px",
221
- "offsetY": "0px",
222
- "blur": "0px",
223
- "spread": "2px"
244
+ "offsetX": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "offsetY": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "blur": {
253
+ "value": 0,
254
+ "unit": "px"
255
+ },
256
+ "spread": {
257
+ "value": 2,
258
+ "unit": "px"
259
+ }
224
260
  }
225
261
  ],
226
262
  "filePath": "src/tokens/component/avatar.json5",
@@ -552,6 +588,10 @@
552
588
  },
553
589
  "org.primer.overrides": {
554
590
  "dark": "#010409"
591
+ },
592
+ "org.primer.llm": {
593
+ "doNotUse": true,
594
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
555
595
  }
556
596
  },
557
597
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -568,6 +608,10 @@
568
608
  },
569
609
  "org.primer.overrides": {
570
610
  "dark": "{base.color.neutral.0}"
611
+ },
612
+ "org.primer.llm": {
613
+ "doNotUse": true,
614
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
571
615
  }
572
616
  },
573
617
  "key": "{bgColor.black}"
@@ -2460,6 +2504,10 @@
2460
2504
  },
2461
2505
  "org.primer.overrides": {
2462
2506
  "dark": "#ffffff"
2507
+ },
2508
+ "org.primer.llm": {
2509
+ "doNotUse": true,
2510
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2463
2511
  }
2464
2512
  },
2465
2513
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2476,6 +2524,10 @@
2476
2524
  },
2477
2525
  "org.primer.overrides": {
2478
2526
  "dark": "{base.color.neutral.13}"
2527
+ },
2528
+ "org.primer.llm": {
2529
+ "doNotUse": true,
2530
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2479
2531
  }
2480
2532
  },
2481
2533
  "key": "{bgColor.white}"
@@ -2486,7 +2538,11 @@
2486
2538
  },
2487
2539
  "border-accent-emphasis": {
2488
2540
  "key": "{border.accent.emphasis}",
2489
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2541
+ "$value": {
2542
+ "color": "#1f6feb",
2543
+ "style": "solid",
2544
+ "width": ["0.0625rem", "1px"]
2545
+ },
2490
2546
  "$type": "border",
2491
2547
  "filePath": "src/tokens/functional/border/border.json5",
2492
2548
  "isSource": true,
@@ -2505,7 +2561,11 @@
2505
2561
  },
2506
2562
  "border-accent-muted": {
2507
2563
  "key": "{border.accent.muted}",
2508
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2564
+ "$value": {
2565
+ "color": "#388bfd66",
2566
+ "style": "solid",
2567
+ "width": ["0.0625rem", "1px"]
2568
+ },
2509
2569
  "$type": "border",
2510
2570
  "filePath": "src/tokens/functional/border/border.json5",
2511
2571
  "isSource": true,
@@ -2524,7 +2584,11 @@
2524
2584
  },
2525
2585
  "border-attention-emphasis": {
2526
2586
  "key": "{border.attention.emphasis}",
2527
- "$value": "0.00390625rem,0.0625px solid #9e6a03",
2587
+ "$value": {
2588
+ "color": "#9e6a03",
2589
+ "style": "solid",
2590
+ "width": ["0.0625rem", "1px"]
2591
+ },
2528
2592
  "$type": "border",
2529
2593
  "filePath": "src/tokens/functional/border/border.json5",
2530
2594
  "isSource": true,
@@ -2543,7 +2607,11 @@
2543
2607
  },
2544
2608
  "border-attention-muted": {
2545
2609
  "key": "{border.attention.muted}",
2546
- "$value": "0.00390625rem,0.0625px solid #bb800966",
2610
+ "$value": {
2611
+ "color": "#bb800966",
2612
+ "style": "solid",
2613
+ "width": ["0.0625rem", "1px"]
2614
+ },
2547
2615
  "$type": "border",
2548
2616
  "filePath": "src/tokens/functional/border/border.json5",
2549
2617
  "isSource": true,
@@ -2562,7 +2630,11 @@
2562
2630
  },
2563
2631
  "border-closed-emphasis": {
2564
2632
  "key": "{border.closed.emphasis}",
2565
- "$value": "0.00390625rem,0.0625px solid #bd561d",
2633
+ "$value": {
2634
+ "color": "#bd561d",
2635
+ "style": "solid",
2636
+ "width": ["0.0625rem", "1px"]
2637
+ },
2566
2638
  "$type": "border",
2567
2639
  "filePath": "src/tokens/functional/border/border.json5",
2568
2640
  "isSource": true,
@@ -2577,7 +2649,11 @@
2577
2649
  },
2578
2650
  "border-closed-muted": {
2579
2651
  "key": "{border.closed.muted}",
2580
- "$value": "0.00390625rem,0.0625px solid #db6d2866",
2652
+ "$value": {
2653
+ "color": "#db6d2866",
2654
+ "style": "solid",
2655
+ "width": ["0.0625rem", "1px"]
2656
+ },
2581
2657
  "$type": "border",
2582
2658
  "filePath": "src/tokens/functional/border/border.json5",
2583
2659
  "isSource": true,
@@ -2592,7 +2668,11 @@
2592
2668
  },
2593
2669
  "border-danger-emphasis": {
2594
2670
  "key": "{border.danger.emphasis}",
2595
- "$value": "0.00390625rem,0.0625px solid #bd561d",
2671
+ "$value": {
2672
+ "color": "#bd561d",
2673
+ "style": "solid",
2674
+ "width": ["0.0625rem", "1px"]
2675
+ },
2596
2676
  "$type": "border",
2597
2677
  "filePath": "src/tokens/functional/border/border.json5",
2598
2678
  "isSource": true,
@@ -2611,7 +2691,11 @@
2611
2691
  },
2612
2692
  "border-danger-muted": {
2613
2693
  "key": "{border.danger.muted}",
2614
- "$value": "0.00390625rem,0.0625px solid #db6d2866",
2694
+ "$value": {
2695
+ "color": "#db6d2866",
2696
+ "style": "solid",
2697
+ "width": ["0.0625rem", "1px"]
2698
+ },
2615
2699
  "$type": "border",
2616
2700
  "filePath": "src/tokens/functional/border/border.json5",
2617
2701
  "isSource": true,
@@ -2630,7 +2714,11 @@
2630
2714
  },
2631
2715
  "border-default": {
2632
2716
  "key": "{border.default}",
2633
- "$value": "0.00390625rem,0.0625px solid #3d444d",
2717
+ "$value": {
2718
+ "color": "#3d444d",
2719
+ "style": "solid",
2720
+ "width": ["0.0625rem", "1px"]
2721
+ },
2634
2722
  "$type": "border",
2635
2723
  "filePath": "src/tokens/functional/border/border.json5",
2636
2724
  "isSource": true,
@@ -2649,7 +2737,11 @@
2649
2737
  },
2650
2738
  "border-disabled": {
2651
2739
  "key": "{border.disabled}",
2652
- "$value": "0.00390625rem,0.0625px solid #656c761a",
2740
+ "$value": {
2741
+ "color": "#656c761a",
2742
+ "style": "solid",
2743
+ "width": ["0.0625rem", "1px"]
2744
+ },
2653
2745
  "$type": "border",
2654
2746
  "filePath": "src/tokens/functional/border/border.json5",
2655
2747
  "isSource": true,
@@ -2668,7 +2760,11 @@
2668
2760
  },
2669
2761
  "border-done-emphasis": {
2670
2762
  "key": "{border.done.emphasis}",
2671
- "$value": "0.00390625rem,0.0625px solid #8957e5",
2763
+ "$value": {
2764
+ "color": "#8957e5",
2765
+ "style": "solid",
2766
+ "width": ["0.0625rem", "1px"]
2767
+ },
2672
2768
  "$type": "border",
2673
2769
  "filePath": "src/tokens/functional/border/border.json5",
2674
2770
  "isSource": true,
@@ -2687,7 +2783,11 @@
2687
2783
  },
2688
2784
  "border-done-muted": {
2689
2785
  "key": "{border.done.muted}",
2690
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
2786
+ "$value": {
2787
+ "color": "#ab7df866",
2788
+ "style": "solid",
2789
+ "width": ["0.0625rem", "1px"]
2790
+ },
2691
2791
  "$type": "border",
2692
2792
  "filePath": "src/tokens/functional/border/border.json5",
2693
2793
  "isSource": true,
@@ -2706,7 +2806,11 @@
2706
2806
  },
2707
2807
  "border-emphasis": {
2708
2808
  "key": "{border.emphasis}",
2709
- "$value": "0.00390625rem,0.0625px solid #656c76",
2809
+ "$value": {
2810
+ "color": "#656c76",
2811
+ "style": "solid",
2812
+ "width": ["0.0625rem", "1px"]
2813
+ },
2710
2814
  "$type": "border",
2711
2815
  "filePath": "src/tokens/functional/border/border.json5",
2712
2816
  "isSource": true,
@@ -2725,7 +2829,11 @@
2725
2829
  },
2726
2830
  "border-muted": {
2727
2831
  "key": "{border.muted}",
2728
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2832
+ "$value": {
2833
+ "color": "#3d444db3",
2834
+ "style": "solid",
2835
+ "width": ["0.0625rem", "1px"]
2836
+ },
2729
2837
  "$type": "border",
2730
2838
  "filePath": "src/tokens/functional/border/border.json5",
2731
2839
  "isSource": true,
@@ -2744,7 +2852,11 @@
2744
2852
  },
2745
2853
  "border-neutral-emphasis": {
2746
2854
  "key": "{border.neutral.emphasis}",
2747
- "$value": "0.00390625rem,0.0625px solid #656c76",
2855
+ "$value": {
2856
+ "color": "#656c76",
2857
+ "style": "solid",
2858
+ "width": ["0.0625rem", "1px"]
2859
+ },
2748
2860
  "$type": "border",
2749
2861
  "filePath": "src/tokens/functional/border/border.json5",
2750
2862
  "isSource": true,
@@ -2763,7 +2875,11 @@
2763
2875
  },
2764
2876
  "border-neutral-muted": {
2765
2877
  "key": "{border.neutral.muted}",
2766
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2878
+ "$value": {
2879
+ "color": "#3d444db3",
2880
+ "style": "solid",
2881
+ "width": ["0.0625rem", "1px"]
2882
+ },
2767
2883
  "$type": "border",
2768
2884
  "filePath": "src/tokens/functional/border/border.json5",
2769
2885
  "isSource": true,
@@ -2782,7 +2898,11 @@
2782
2898
  },
2783
2899
  "border-open-emphasis": {
2784
2900
  "key": "{border.open.emphasis}",
2785
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2901
+ "$value": {
2902
+ "color": "#1f6feb",
2903
+ "style": "solid",
2904
+ "width": ["0.0625rem", "1px"]
2905
+ },
2786
2906
  "$type": "border",
2787
2907
  "filePath": "src/tokens/functional/border/border.json5",
2788
2908
  "isSource": true,
@@ -2797,7 +2917,11 @@
2797
2917
  },
2798
2918
  "border-open-muted": {
2799
2919
  "key": "{border.open.muted}",
2800
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2920
+ "$value": {
2921
+ "color": "#388bfd66",
2922
+ "style": "solid",
2923
+ "width": ["0.0625rem", "1px"]
2924
+ },
2801
2925
  "$type": "border",
2802
2926
  "filePath": "src/tokens/functional/border/border.json5",
2803
2927
  "isSource": true,
@@ -2812,7 +2936,11 @@
2812
2936
  },
2813
2937
  "border-severe-emphasis": {
2814
2938
  "key": "{border.severe.emphasis}",
2815
- "$value": "0.00390625rem,0.0625px solid #bd561d",
2939
+ "$value": {
2940
+ "color": "#bd561d",
2941
+ "style": "solid",
2942
+ "width": ["0.0625rem", "1px"]
2943
+ },
2816
2944
  "$type": "border",
2817
2945
  "filePath": "src/tokens/functional/border/border.json5",
2818
2946
  "isSource": true,
@@ -2831,7 +2959,11 @@
2831
2959
  },
2832
2960
  "border-severe-muted": {
2833
2961
  "key": "{border.severe.muted}",
2834
- "$value": "0.00390625rem,0.0625px solid #db6d2866",
2962
+ "$value": {
2963
+ "color": "#db6d2866",
2964
+ "style": "solid",
2965
+ "width": ["0.0625rem", "1px"]
2966
+ },
2835
2967
  "$type": "border",
2836
2968
  "filePath": "src/tokens/functional/border/border.json5",
2837
2969
  "isSource": true,
@@ -2850,7 +2982,11 @@
2850
2982
  },
2851
2983
  "border-sponsors-emphasis": {
2852
2984
  "key": "{border.sponsors.emphasis}",
2853
- "$value": "0.00390625rem,0.0625px solid #bf4b8a",
2985
+ "$value": {
2986
+ "color": "#bf4b8a",
2987
+ "style": "solid",
2988
+ "width": ["0.0625rem", "1px"]
2989
+ },
2854
2990
  "$type": "border",
2855
2991
  "filePath": "src/tokens/functional/border/border.json5",
2856
2992
  "isSource": true,
@@ -2869,7 +3005,11 @@
2869
3005
  },
2870
3006
  "border-sponsors-muted": {
2871
3007
  "key": "{border.sponsors.muted}",
2872
- "$value": "0.00390625rem,0.0625px solid #db61a266",
3008
+ "$value": {
3009
+ "color": "#db61a266",
3010
+ "style": "solid",
3011
+ "width": ["0.0625rem", "1px"]
3012
+ },
2873
3013
  "$type": "border",
2874
3014
  "filePath": "src/tokens/functional/border/border.json5",
2875
3015
  "isSource": true,
@@ -2888,7 +3028,11 @@
2888
3028
  },
2889
3029
  "border-success-emphasis": {
2890
3030
  "key": "{border.success.emphasis}",
2891
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
3031
+ "$value": {
3032
+ "color": "#1f6feb",
3033
+ "style": "solid",
3034
+ "width": ["0.0625rem", "1px"]
3035
+ },
2892
3036
  "$type": "border",
2893
3037
  "filePath": "src/tokens/functional/border/border.json5",
2894
3038
  "isSource": true,
@@ -2907,7 +3051,11 @@
2907
3051
  },
2908
3052
  "border-success-muted": {
2909
3053
  "key": "{border.success.muted}",
2910
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
3054
+ "$value": {
3055
+ "color": "#388bfd66",
3056
+ "style": "solid",
3057
+ "width": ["0.0625rem", "1px"]
3058
+ },
2911
3059
  "$type": "border",
2912
3060
  "filePath": "src/tokens/functional/border/border.json5",
2913
3061
  "isSource": true,
@@ -2926,7 +3074,11 @@
2926
3074
  },
2927
3075
  "border-transparent": {
2928
3076
  "key": "{border.transparent}",
2929
- "$value": "0.00390625rem,0.0625px solid #00000000",
3077
+ "$value": {
3078
+ "color": "#00000000",
3079
+ "style": "solid",
3080
+ "width": ["0.0625rem", "1px"]
3081
+ },
2930
3082
  "$type": "border",
2931
3083
  "filePath": "src/tokens/functional/border/border.json5",
2932
3084
  "isSource": true,
@@ -2945,7 +3097,11 @@
2945
3097
  },
2946
3098
  "border-upsell-emphasis": {
2947
3099
  "key": "{border.upsell.emphasis}",
2948
- "$value": "0.00390625rem,0.0625px solid #8957e5",
3100
+ "$value": {
3101
+ "color": "#8957e5",
3102
+ "style": "solid",
3103
+ "width": ["0.0625rem", "1px"]
3104
+ },
2949
3105
  "$type": "border",
2950
3106
  "filePath": "src/tokens/functional/border/border.json5",
2951
3107
  "isSource": true,
@@ -2964,7 +3120,11 @@
2964
3120
  },
2965
3121
  "border-upsell-muted": {
2966
3122
  "key": "{border.upsell.muted}",
2967
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
3123
+ "$value": {
3124
+ "color": "#ab7df866",
3125
+ "style": "solid",
3126
+ "width": ["0.0625rem", "1px"]
3127
+ },
2968
3128
  "$type": "border",
2969
3129
  "filePath": "src/tokens/functional/border/border.json5",
2970
3130
  "isSource": true,
@@ -6956,7 +7116,7 @@
6956
7116
  },
6957
7117
  "button-danger-shadow-selected": {
6958
7118
  "key": "{button.danger.shadow.selected}",
6959
- "$value": "0px 0px 0px 0px #000000",
7119
+ "$value": "0 0 0 0 #00000000",
6960
7120
  "$type": "shadow",
6961
7121
  "$extensions": {
6962
7122
  "org.primer.figma": {
@@ -6969,10 +7129,22 @@
6969
7129
  {
6970
7130
  "color": "#3d1300",
6971
7131
  "alpha": 0.2,
6972
- "offsetX": "0px",
6973
- "offsetY": "1px",
6974
- "blur": "0px",
6975
- "spread": "0px",
7132
+ "offsetX": {
7133
+ "value": 0,
7134
+ "unit": "px"
7135
+ },
7136
+ "offsetY": {
7137
+ "value": 1,
7138
+ "unit": "px"
7139
+ },
7140
+ "blur": {
7141
+ "value": 0,
7142
+ "unit": "px"
7143
+ },
7144
+ "spread": {
7145
+ "value": 0,
7146
+ "unit": "px"
7147
+ },
6976
7148
  "inset": true
6977
7149
  }
6978
7150
  ],
@@ -6985,10 +7157,22 @@
6985
7157
  {
6986
7158
  "color": "#00000000",
6987
7159
  "alpha": 0,
6988
- "offsetX": "0px",
6989
- "offsetY": "0px",
6990
- "blur": "0px",
6991
- "spread": "0px",
7160
+ "offsetX": {
7161
+ "value": 0,
7162
+ "unit": "px"
7163
+ },
7164
+ "offsetY": {
7165
+ "value": 0,
7166
+ "unit": "px"
7167
+ },
7168
+ "blur": {
7169
+ "value": 0,
7170
+ "unit": "px"
7171
+ },
7172
+ "spread": {
7173
+ "value": 0,
7174
+ "unit": "px"
7175
+ },
6992
7176
  "inset": false
6993
7177
  }
6994
7178
  ],
@@ -7005,10 +7189,22 @@
7005
7189
  {
7006
7190
  "color": "{base.color.transparent}",
7007
7191
  "alpha": 0,
7008
- "offsetX": "0px",
7009
- "offsetY": "0px",
7010
- "blur": "0px",
7011
- "spread": "0px",
7192
+ "offsetX": {
7193
+ "value": 0,
7194
+ "unit": "px"
7195
+ },
7196
+ "offsetY": {
7197
+ "value": 0,
7198
+ "unit": "px"
7199
+ },
7200
+ "blur": {
7201
+ "value": 0,
7202
+ "unit": "px"
7203
+ },
7204
+ "spread": {
7205
+ "value": 0,
7206
+ "unit": "px"
7207
+ },
7012
7208
  "inset": false
7013
7209
  }
7014
7210
  ],
@@ -7024,10 +7220,22 @@
7024
7220
  {
7025
7221
  "color": "{base.color.orange.9}",
7026
7222
  "alpha": 0.2,
7027
- "offsetX": "0px",
7028
- "offsetY": "1px",
7029
- "blur": "0px",
7030
- "spread": "0px",
7223
+ "offsetX": {
7224
+ "value": 0,
7225
+ "unit": "px"
7226
+ },
7227
+ "offsetY": {
7228
+ "value": 1,
7229
+ "unit": "px"
7230
+ },
7231
+ "blur": {
7232
+ "value": 0,
7233
+ "unit": "px"
7234
+ },
7235
+ "spread": {
7236
+ "value": 0,
7237
+ "unit": "px"
7238
+ },
7031
7239
  "inset": true
7032
7240
  }
7033
7241
  ],
@@ -7040,10 +7248,22 @@
7040
7248
  {
7041
7249
  "color": "{base.color.transparent}",
7042
7250
  "alpha": 0,
7043
- "offsetX": "0px",
7044
- "offsetY": "0px",
7045
- "blur": "0px",
7046
- "spread": "0px",
7251
+ "offsetX": {
7252
+ "value": 0,
7253
+ "unit": "px"
7254
+ },
7255
+ "offsetY": {
7256
+ "value": 0,
7257
+ "unit": "px"
7258
+ },
7259
+ "blur": {
7260
+ "value": 0,
7261
+ "unit": "px"
7262
+ },
7263
+ "spread": {
7264
+ "value": 0,
7265
+ "unit": "px"
7266
+ },
7047
7267
  "inset": false
7048
7268
  }
7049
7269
  ],
@@ -7419,7 +7639,7 @@
7419
7639
  },
7420
7640
  "button-default-shadow-resting": {
7421
7641
  "key": "{button.default.shadow.resting}",
7422
- "$value": "0px 0px 0px 0px #000000",
7642
+ "$value": "0 0 0 0 #00000000",
7423
7643
  "$type": "shadow",
7424
7644
  "$extensions": {
7425
7645
  "org.primer.figma": {
@@ -7432,10 +7652,22 @@
7432
7652
  {
7433
7653
  "color": "#00000000",
7434
7654
  "alpha": 0,
7435
- "offsetX": "0px",
7436
- "offsetY": "0px",
7437
- "blur": "0px",
7438
- "spread": "0px",
7655
+ "offsetX": {
7656
+ "value": 0,
7657
+ "unit": "px"
7658
+ },
7659
+ "offsetY": {
7660
+ "value": 0,
7661
+ "unit": "px"
7662
+ },
7663
+ "blur": {
7664
+ "value": 0,
7665
+ "unit": "px"
7666
+ },
7667
+ "spread": {
7668
+ "value": 0,
7669
+ "unit": "px"
7670
+ },
7439
7671
  "inset": false
7440
7672
  }
7441
7673
  ],
@@ -7452,10 +7684,22 @@
7452
7684
  {
7453
7685
  "color": "{base.color.transparent}",
7454
7686
  "alpha": 0,
7455
- "offsetX": "0px",
7456
- "offsetY": "0px",
7457
- "blur": "0px",
7458
- "spread": "0px",
7687
+ "offsetX": {
7688
+ "value": 0,
7689
+ "unit": "px"
7690
+ },
7691
+ "offsetY": {
7692
+ "value": 0,
7693
+ "unit": "px"
7694
+ },
7695
+ "blur": {
7696
+ "value": 0,
7697
+ "unit": "px"
7698
+ },
7699
+ "spread": {
7700
+ "value": 0,
7701
+ "unit": "px"
7702
+ },
7459
7703
  "inset": false
7460
7704
  }
7461
7705
  ],
@@ -7471,10 +7715,22 @@
7471
7715
  {
7472
7716
  "color": "{base.color.transparent}",
7473
7717
  "alpha": 0,
7474
- "offsetX": "0px",
7475
- "offsetY": "0px",
7476
- "blur": "0px",
7477
- "spread": "0px",
7718
+ "offsetX": {
7719
+ "value": 0,
7720
+ "unit": "px"
7721
+ },
7722
+ "offsetY": {
7723
+ "value": 0,
7724
+ "unit": "px"
7725
+ },
7726
+ "blur": {
7727
+ "value": 0,
7728
+ "unit": "px"
7729
+ },
7730
+ "spread": {
7731
+ "value": 0,
7732
+ "unit": "px"
7733
+ },
7478
7734
  "inset": false
7479
7735
  }
7480
7736
  ],
@@ -9178,7 +9434,7 @@
9178
9434
  },
9179
9435
  "button-outline-shadow-selected": {
9180
9436
  "key": "{button.outline.shadow.selected}",
9181
- "$value": "0px 0px 0px 0px #000000",
9437
+ "$value": "0 0 0 0 #00000000",
9182
9438
  "$type": "shadow",
9183
9439
  "$extensions": {
9184
9440
  "org.primer.figma": {
@@ -9191,10 +9447,22 @@
9191
9447
  {
9192
9448
  "color": "#00000000",
9193
9449
  "alpha": 0,
9194
- "offsetX": "0px",
9195
- "offsetY": "0px",
9196
- "blur": "0px",
9197
- "spread": "0px",
9450
+ "offsetX": {
9451
+ "value": 0,
9452
+ "unit": "px"
9453
+ },
9454
+ "offsetY": {
9455
+ "value": 0,
9456
+ "unit": "px"
9457
+ },
9458
+ "blur": {
9459
+ "value": 0,
9460
+ "unit": "px"
9461
+ },
9462
+ "spread": {
9463
+ "value": 0,
9464
+ "unit": "px"
9465
+ },
9198
9466
  "inset": false
9199
9467
  }
9200
9468
  ],
@@ -9211,10 +9479,22 @@
9211
9479
  {
9212
9480
  "color": "{base.color.transparent}",
9213
9481
  "alpha": 0,
9214
- "offsetX": "0px",
9215
- "offsetY": "0px",
9216
- "blur": "0px",
9217
- "spread": "0px",
9482
+ "offsetX": {
9483
+ "value": 0,
9484
+ "unit": "px"
9485
+ },
9486
+ "offsetY": {
9487
+ "value": 0,
9488
+ "unit": "px"
9489
+ },
9490
+ "blur": {
9491
+ "value": 0,
9492
+ "unit": "px"
9493
+ },
9494
+ "spread": {
9495
+ "value": 0,
9496
+ "unit": "px"
9497
+ },
9218
9498
  "inset": false
9219
9499
  }
9220
9500
  ],
@@ -9230,10 +9510,22 @@
9230
9510
  {
9231
9511
  "color": "{base.color.transparent}",
9232
9512
  "alpha": 0,
9233
- "offsetX": "0px",
9234
- "offsetY": "0px",
9235
- "blur": "0px",
9236
- "spread": "0px",
9513
+ "offsetX": {
9514
+ "value": 0,
9515
+ "unit": "px"
9516
+ },
9517
+ "offsetY": {
9518
+ "value": 0,
9519
+ "unit": "px"
9520
+ },
9521
+ "blur": {
9522
+ "value": 0,
9523
+ "unit": "px"
9524
+ },
9525
+ "spread": {
9526
+ "value": 0,
9527
+ "unit": "px"
9528
+ },
9237
9529
  "inset": false
9238
9530
  }
9239
9531
  ],
@@ -10384,7 +10676,7 @@
10384
10676
  },
10385
10677
  "button-primary-shadow-selected": {
10386
10678
  "key": "{button.primary.shadow.selected}",
10387
- "$value": "0px 0px 0px 0px #000000",
10679
+ "$value": "0 0 0 0 #00000000",
10388
10680
  "$type": "shadow",
10389
10681
  "$extensions": {
10390
10682
  "org.primer.figma": {
@@ -10397,10 +10689,22 @@
10397
10689
  {
10398
10690
  "color": "#051d4d",
10399
10691
  "alpha": 0.3,
10400
- "offsetX": "0px",
10401
- "offsetY": "1px",
10402
- "blur": "0px",
10403
- "spread": "0px",
10692
+ "offsetX": {
10693
+ "value": 0,
10694
+ "unit": "px"
10695
+ },
10696
+ "offsetY": {
10697
+ "value": 1,
10698
+ "unit": "px"
10699
+ },
10700
+ "blur": {
10701
+ "value": 0,
10702
+ "unit": "px"
10703
+ },
10704
+ "spread": {
10705
+ "value": 0,
10706
+ "unit": "px"
10707
+ },
10404
10708
  "inset": true
10405
10709
  }
10406
10710
  ],
@@ -10413,10 +10717,22 @@
10413
10717
  {
10414
10718
  "color": "#051d4d",
10415
10719
  "alpha": 0.3,
10416
- "offsetX": "0px",
10417
- "offsetY": "1px",
10418
- "blur": "0px",
10419
- "spread": "0px",
10720
+ "offsetX": {
10721
+ "value": 0,
10722
+ "unit": "px"
10723
+ },
10724
+ "offsetY": {
10725
+ "value": 1,
10726
+ "unit": "px"
10727
+ },
10728
+ "blur": {
10729
+ "value": 0,
10730
+ "unit": "px"
10731
+ },
10732
+ "spread": {
10733
+ "value": 0,
10734
+ "unit": "px"
10735
+ },
10420
10736
  "inset": true
10421
10737
  }
10422
10738
  ],
@@ -10429,10 +10745,22 @@
10429
10745
  {
10430
10746
  "color": "#00000000",
10431
10747
  "alpha": 0,
10432
- "offsetX": "0px",
10433
- "offsetY": "0px",
10434
- "blur": "0px",
10435
- "spread": "0px",
10748
+ "offsetX": {
10749
+ "value": 0,
10750
+ "unit": "px"
10751
+ },
10752
+ "offsetY": {
10753
+ "value": 0,
10754
+ "unit": "px"
10755
+ },
10756
+ "blur": {
10757
+ "value": 0,
10758
+ "unit": "px"
10759
+ },
10760
+ "spread": {
10761
+ "value": 0,
10762
+ "unit": "px"
10763
+ },
10436
10764
  "inset": false
10437
10765
  }
10438
10766
  ],
@@ -10449,10 +10777,22 @@
10449
10777
  {
10450
10778
  "color": "{base.color.transparent}",
10451
10779
  "alpha": 0,
10452
- "offsetX": "0px",
10453
- "offsetY": "0px",
10454
- "blur": "0px",
10455
- "spread": "0px",
10780
+ "offsetX": {
10781
+ "value": 0,
10782
+ "unit": "px"
10783
+ },
10784
+ "offsetY": {
10785
+ "value": 0,
10786
+ "unit": "px"
10787
+ },
10788
+ "blur": {
10789
+ "value": 0,
10790
+ "unit": "px"
10791
+ },
10792
+ "spread": {
10793
+ "value": 0,
10794
+ "unit": "px"
10795
+ },
10456
10796
  "inset": false
10457
10797
  }
10458
10798
  ],
@@ -10468,10 +10808,22 @@
10468
10808
  {
10469
10809
  "color": "{base.color.blue.9}",
10470
10810
  "alpha": 0.3,
10471
- "offsetX": "0px",
10472
- "offsetY": "1px",
10473
- "blur": "0px",
10474
- "spread": "0px",
10811
+ "offsetX": {
10812
+ "value": 0,
10813
+ "unit": "px"
10814
+ },
10815
+ "offsetY": {
10816
+ "value": 1,
10817
+ "unit": "px"
10818
+ },
10819
+ "blur": {
10820
+ "value": 0,
10821
+ "unit": "px"
10822
+ },
10823
+ "spread": {
10824
+ "value": 0,
10825
+ "unit": "px"
10826
+ },
10475
10827
  "inset": true
10476
10828
  }
10477
10829
  ],
@@ -10484,10 +10836,22 @@
10484
10836
  {
10485
10837
  "color": "{base.color.blue.9}",
10486
10838
  "alpha": 0.3,
10487
- "offsetX": "0px",
10488
- "offsetY": "1px",
10489
- "blur": "0px",
10490
- "spread": "0px",
10839
+ "offsetX": {
10840
+ "value": 0,
10841
+ "unit": "px"
10842
+ },
10843
+ "offsetY": {
10844
+ "value": 1,
10845
+ "unit": "px"
10846
+ },
10847
+ "blur": {
10848
+ "value": 0,
10849
+ "unit": "px"
10850
+ },
10851
+ "spread": {
10852
+ "value": 0,
10853
+ "unit": "px"
10854
+ },
10491
10855
  "inset": true
10492
10856
  }
10493
10857
  ],
@@ -10500,10 +10864,22 @@
10500
10864
  {
10501
10865
  "color": "{base.color.transparent}",
10502
10866
  "alpha": 0,
10503
- "offsetX": "0px",
10504
- "offsetY": "0px",
10505
- "blur": "0px",
10506
- "spread": "0px",
10867
+ "offsetX": {
10868
+ "value": 0,
10869
+ "unit": "px"
10870
+ },
10871
+ "offsetY": {
10872
+ "value": 0,
10873
+ "unit": "px"
10874
+ },
10875
+ "blur": {
10876
+ "value": 0,
10877
+ "unit": "px"
10878
+ },
10879
+ "spread": {
10880
+ "value": 0,
10881
+ "unit": "px"
10882
+ },
10507
10883
  "inset": false
10508
10884
  }
10509
10885
  ],
@@ -37256,6 +37632,10 @@
37256
37632
  },
37257
37633
  "org.primer.overrides": {
37258
37634
  "dark": "#010409"
37635
+ },
37636
+ "org.primer.llm": {
37637
+ "doNotUse": true,
37638
+ "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."
37259
37639
  }
37260
37640
  },
37261
37641
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37272,6 +37652,10 @@
37272
37652
  },
37273
37653
  "org.primer.overrides": {
37274
37654
  "dark": "{base.color.neutral.0}"
37655
+ },
37656
+ "org.primer.llm": {
37657
+ "doNotUse": true,
37658
+ "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."
37275
37659
  }
37276
37660
  },
37277
37661
  "key": "{fgColor.black}"
@@ -38245,6 +38629,10 @@
38245
38629
  },
38246
38630
  "org.primer.overrides": {
38247
38631
  "dark": "#ffffff"
38632
+ },
38633
+ "org.primer.llm": {
38634
+ "doNotUse": true,
38635
+ "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."
38248
38636
  }
38249
38637
  },
38250
38638
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38261,6 +38649,10 @@
38261
38649
  },
38262
38650
  "org.primer.overrides": {
38263
38651
  "dark": "{base.color.neutral.13}"
38652
+ },
38653
+ "org.primer.llm": {
38654
+ "doNotUse": true,
38655
+ "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."
38264
38656
  }
38265
38657
  },
38266
38658
  "key": "{fgColor.white}"
@@ -38286,7 +38678,10 @@
38286
38678
  "$value": {
38287
38679
  "color": "{focus.outlineColor}",
38288
38680
  "style": "solid",
38289
- "width": "2px"
38681
+ "width": {
38682
+ "value": 2,
38683
+ "unit": "px"
38684
+ }
38290
38685
  },
38291
38686
  "$type": "border",
38292
38687
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47445,7 +47840,7 @@
47445
47840
  },
47446
47841
  "shadow-floating-large": {
47447
47842
  "key": "{shadow.floating.large}",
47448
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47843
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47449
47844
  "$type": "shadow",
47450
47845
  "$description": "Large floating shadow for modals and dialogs",
47451
47846
  "$extensions": {
@@ -47459,18 +47854,183 @@
47459
47854
  {
47460
47855
  "color": "#3d444db3",
47461
47856
  "alpha": 1,
47462
- "offsetX": "0px",
47463
- "offsetY": "0px",
47464
- "blur": "0px",
47465
- "spread": "1px"
47857
+ "offsetX": {
47858
+ "value": 0,
47859
+ "unit": "px"
47860
+ },
47861
+ "offsetY": {
47862
+ "value": 0,
47863
+ "unit": "px"
47864
+ },
47865
+ "blur": {
47866
+ "value": 0,
47867
+ "unit": "px"
47868
+ },
47869
+ "spread": {
47870
+ "value": 1,
47871
+ "unit": "px"
47872
+ }
47466
47873
  },
47467
47874
  {
47468
47875
  "color": "#010409",
47469
47876
  "alpha": 1,
47470
- "offsetX": "0px",
47471
- "offsetY": "24px",
47472
- "blur": "48px",
47473
- "spread": "0px"
47877
+ "offsetX": {
47878
+ "value": 0,
47879
+ "unit": "px"
47880
+ },
47881
+ "offsetY": {
47882
+ "value": 24,
47883
+ "unit": "px"
47884
+ },
47885
+ "blur": {
47886
+ "value": 48,
47887
+ "unit": "px"
47888
+ },
47889
+ "spread": {
47890
+ "value": 0,
47891
+ "unit": "px"
47892
+ }
47893
+ }
47894
+ ],
47895
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47896
+ "isSource": true,
47897
+ "$type": "shadow"
47898
+ },
47899
+ "light-high-contrast": {
47900
+ "$value": [
47901
+ {
47902
+ "color": "#3d444db3",
47903
+ "alpha": 1,
47904
+ "offsetX": {
47905
+ "value": 0,
47906
+ "unit": "px"
47907
+ },
47908
+ "offsetY": {
47909
+ "value": 0,
47910
+ "unit": "px"
47911
+ },
47912
+ "blur": {
47913
+ "value": 0,
47914
+ "unit": "px"
47915
+ },
47916
+ "spread": {
47917
+ "value": 1,
47918
+ "unit": "px"
47919
+ }
47920
+ },
47921
+ {
47922
+ "color": "#f0f6fc",
47923
+ "alpha": 0.24,
47924
+ "offsetX": {
47925
+ "value": 0,
47926
+ "unit": "px"
47927
+ },
47928
+ "offsetY": {
47929
+ "value": 40,
47930
+ "unit": "px"
47931
+ },
47932
+ "blur": {
47933
+ "value": 80,
47934
+ "unit": "px"
47935
+ },
47936
+ "spread": {
47937
+ "value": 0,
47938
+ "unit": "px"
47939
+ }
47940
+ }
47941
+ ],
47942
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47943
+ "isSource": true,
47944
+ "$type": "shadow"
47945
+ },
47946
+ "light-protanopia-deuteranopia-high-contrast": {
47947
+ "$value": [
47948
+ {
47949
+ "color": "#3d444db3",
47950
+ "alpha": 1,
47951
+ "offsetX": {
47952
+ "value": 0,
47953
+ "unit": "px"
47954
+ },
47955
+ "offsetY": {
47956
+ "value": 0,
47957
+ "unit": "px"
47958
+ },
47959
+ "blur": {
47960
+ "value": 0,
47961
+ "unit": "px"
47962
+ },
47963
+ "spread": {
47964
+ "value": 1,
47965
+ "unit": "px"
47966
+ }
47967
+ },
47968
+ {
47969
+ "color": "#f0f6fc",
47970
+ "alpha": 0.24,
47971
+ "offsetX": {
47972
+ "value": 0,
47973
+ "unit": "px"
47974
+ },
47975
+ "offsetY": {
47976
+ "value": 40,
47977
+ "unit": "px"
47978
+ },
47979
+ "blur": {
47980
+ "value": 80,
47981
+ "unit": "px"
47982
+ },
47983
+ "spread": {
47984
+ "value": 0,
47985
+ "unit": "px"
47986
+ }
47987
+ }
47988
+ ],
47989
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47990
+ "isSource": true,
47991
+ "$type": "shadow"
47992
+ },
47993
+ "light-tritanopia-high-contrast": {
47994
+ "$value": [
47995
+ {
47996
+ "color": "#3d444db3",
47997
+ "alpha": 1,
47998
+ "offsetX": {
47999
+ "value": 0,
48000
+ "unit": "px"
48001
+ },
48002
+ "offsetY": {
48003
+ "value": 0,
48004
+ "unit": "px"
48005
+ },
48006
+ "blur": {
48007
+ "value": 0,
48008
+ "unit": "px"
48009
+ },
48010
+ "spread": {
48011
+ "value": 1,
48012
+ "unit": "px"
48013
+ }
48014
+ },
48015
+ {
48016
+ "color": "#f0f6fc",
48017
+ "alpha": 0.24,
48018
+ "offsetX": {
48019
+ "value": 0,
48020
+ "unit": "px"
48021
+ },
48022
+ "offsetY": {
48023
+ "value": 40,
48024
+ "unit": "px"
48025
+ },
48026
+ "blur": {
48027
+ "value": 80,
48028
+ "unit": "px"
48029
+ },
48030
+ "spread": {
48031
+ "value": 0,
48032
+ "unit": "px"
48033
+ }
47474
48034
  }
47475
48035
  ],
47476
48036
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47490,18 +48050,42 @@
47490
48050
  {
47491
48051
  "color": "{overlay.borderColor}",
47492
48052
  "alpha": 1,
47493
- "offsetX": "0px",
47494
- "offsetY": "0px",
47495
- "blur": "0px",
47496
- "spread": "1px"
48053
+ "offsetX": {
48054
+ "value": 0,
48055
+ "unit": "px"
48056
+ },
48057
+ "offsetY": {
48058
+ "value": 0,
48059
+ "unit": "px"
48060
+ },
48061
+ "blur": {
48062
+ "value": 0,
48063
+ "unit": "px"
48064
+ },
48065
+ "spread": {
48066
+ "value": 1,
48067
+ "unit": "px"
48068
+ }
47497
48069
  },
47498
48070
  {
47499
48071
  "color": "{base.color.neutral.0}",
47500
48072
  "alpha": 1,
47501
- "offsetX": "0px",
47502
- "offsetY": "24px",
47503
- "blur": "48px",
47504
- "spread": "0px"
48073
+ "offsetX": {
48074
+ "value": 0,
48075
+ "unit": "px"
48076
+ },
48077
+ "offsetY": {
48078
+ "value": 24,
48079
+ "unit": "px"
48080
+ },
48081
+ "blur": {
48082
+ "value": 48,
48083
+ "unit": "px"
48084
+ },
48085
+ "spread": {
48086
+ "value": 0,
48087
+ "unit": "px"
48088
+ }
47505
48089
  }
47506
48090
  ],
47507
48091
  "$type": "shadow",
@@ -47517,18 +48101,183 @@
47517
48101
  {
47518
48102
  "color": "{overlay.borderColor}",
47519
48103
  "alpha": 1,
47520
- "offsetX": "0px",
47521
- "offsetY": "0px",
47522
- "blur": "0px",
47523
- "spread": "1px"
48104
+ "offsetX": {
48105
+ "value": 0,
48106
+ "unit": "px"
48107
+ },
48108
+ "offsetY": {
48109
+ "value": 0,
48110
+ "unit": "px"
48111
+ },
48112
+ "blur": {
48113
+ "value": 0,
48114
+ "unit": "px"
48115
+ },
48116
+ "spread": {
48117
+ "value": 1,
48118
+ "unit": "px"
48119
+ }
47524
48120
  },
47525
48121
  {
47526
48122
  "color": "{base.color.neutral.0}",
47527
48123
  "alpha": 1,
47528
- "offsetX": "0px",
47529
- "offsetY": "24px",
47530
- "blur": "48px",
47531
- "spread": "0px"
48124
+ "offsetX": {
48125
+ "value": 0,
48126
+ "unit": "px"
48127
+ },
48128
+ "offsetY": {
48129
+ "value": 24,
48130
+ "unit": "px"
48131
+ },
48132
+ "blur": {
48133
+ "value": 48,
48134
+ "unit": "px"
48135
+ },
48136
+ "spread": {
48137
+ "value": 0,
48138
+ "unit": "px"
48139
+ }
48140
+ }
48141
+ ],
48142
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48143
+ "isSource": true,
48144
+ "$type": "shadow"
48145
+ },
48146
+ "light-high-contrast": {
48147
+ "$value": [
48148
+ {
48149
+ "color": "{overlay.borderColor}",
48150
+ "alpha": 1,
48151
+ "offsetX": {
48152
+ "value": 0,
48153
+ "unit": "px"
48154
+ },
48155
+ "offsetY": {
48156
+ "value": 0,
48157
+ "unit": "px"
48158
+ },
48159
+ "blur": {
48160
+ "value": 0,
48161
+ "unit": "px"
48162
+ },
48163
+ "spread": {
48164
+ "value": 1,
48165
+ "unit": "px"
48166
+ }
48167
+ },
48168
+ {
48169
+ "color": "{base.color.neutral.12}",
48170
+ "alpha": 0.24,
48171
+ "offsetX": {
48172
+ "value": 0,
48173
+ "unit": "px"
48174
+ },
48175
+ "offsetY": {
48176
+ "value": 40,
48177
+ "unit": "px"
48178
+ },
48179
+ "blur": {
48180
+ "value": 80,
48181
+ "unit": "px"
48182
+ },
48183
+ "spread": {
48184
+ "value": 0,
48185
+ "unit": "px"
48186
+ }
48187
+ }
48188
+ ],
48189
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48190
+ "isSource": true,
48191
+ "$type": "shadow"
48192
+ },
48193
+ "light-protanopia-deuteranopia-high-contrast": {
48194
+ "$value": [
48195
+ {
48196
+ "color": "{overlay.borderColor}",
48197
+ "alpha": 1,
48198
+ "offsetX": {
48199
+ "value": 0,
48200
+ "unit": "px"
48201
+ },
48202
+ "offsetY": {
48203
+ "value": 0,
48204
+ "unit": "px"
48205
+ },
48206
+ "blur": {
48207
+ "value": 0,
48208
+ "unit": "px"
48209
+ },
48210
+ "spread": {
48211
+ "value": 1,
48212
+ "unit": "px"
48213
+ }
48214
+ },
48215
+ {
48216
+ "color": "{base.color.neutral.12}",
48217
+ "alpha": 0.24,
48218
+ "offsetX": {
48219
+ "value": 0,
48220
+ "unit": "px"
48221
+ },
48222
+ "offsetY": {
48223
+ "value": 40,
48224
+ "unit": "px"
48225
+ },
48226
+ "blur": {
48227
+ "value": 80,
48228
+ "unit": "px"
48229
+ },
48230
+ "spread": {
48231
+ "value": 0,
48232
+ "unit": "px"
48233
+ }
48234
+ }
48235
+ ],
48236
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48237
+ "isSource": true,
48238
+ "$type": "shadow"
48239
+ },
48240
+ "light-tritanopia-high-contrast": {
48241
+ "$value": [
48242
+ {
48243
+ "color": "{overlay.borderColor}",
48244
+ "alpha": 1,
48245
+ "offsetX": {
48246
+ "value": 0,
48247
+ "unit": "px"
48248
+ },
48249
+ "offsetY": {
48250
+ "value": 0,
48251
+ "unit": "px"
48252
+ },
48253
+ "blur": {
48254
+ "value": 0,
48255
+ "unit": "px"
48256
+ },
48257
+ "spread": {
48258
+ "value": 1,
48259
+ "unit": "px"
48260
+ }
48261
+ },
48262
+ {
48263
+ "color": "{base.color.neutral.12}",
48264
+ "alpha": 0.24,
48265
+ "offsetX": {
48266
+ "value": 0,
48267
+ "unit": "px"
48268
+ },
48269
+ "offsetY": {
48270
+ "value": 40,
48271
+ "unit": "px"
48272
+ },
48273
+ "blur": {
48274
+ "value": 80,
48275
+ "unit": "px"
48276
+ },
48277
+ "spread": {
48278
+ "value": 0,
48279
+ "unit": "px"
48280
+ }
47532
48281
  }
47533
48282
  ],
47534
48283
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47549,8 +48298,9 @@
47549
48298
  },
47550
48299
  "shadow-floating-legacy": {
47551
48300
  "key": "{shadow.floating.legacy}",
47552
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48301
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47553
48302
  "$type": "shadow",
48303
+ "$description": "Legacy floating shadow for backward compatibility",
47554
48304
  "$extensions": {
47555
48305
  "org.primer.figma": {},
47556
48306
  "org.primer.overrides": {
@@ -47559,24 +48309,52 @@
47559
48309
  {
47560
48310
  "color": "#010409",
47561
48311
  "alpha": 0.4,
47562
- "offsetX": "0px",
47563
- "offsetY": "6px",
47564
- "blur": "12px",
47565
- "spread": "-3px"
48312
+ "offsetX": {
48313
+ "value": 0,
48314
+ "unit": "px"
48315
+ },
48316
+ "offsetY": {
48317
+ "value": 6,
48318
+ "unit": "px"
48319
+ },
48320
+ "blur": {
48321
+ "value": 12,
48322
+ "unit": "px"
48323
+ },
48324
+ "spread": {
48325
+ "value": -3,
48326
+ "unit": "px"
48327
+ }
47566
48328
  },
47567
48329
  {
47568
48330
  "color": "#010409",
47569
48331
  "alpha": 0.4,
47570
- "offsetX": "0px",
47571
- "offsetY": "6px",
47572
- "blur": "18px",
47573
- "spread": "0px"
48332
+ "offsetX": {
48333
+ "value": 0,
48334
+ "unit": "px"
48335
+ },
48336
+ "offsetY": {
48337
+ "value": 6,
48338
+ "unit": "px"
48339
+ },
48340
+ "blur": {
48341
+ "value": 18,
48342
+ "unit": "px"
48343
+ },
48344
+ "spread": {
48345
+ "value": 0,
48346
+ "unit": "px"
48347
+ }
47574
48348
  }
47575
48349
  ],
47576
48350
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47577
48351
  "isSource": true,
47578
48352
  "$type": "shadow"
47579
48353
  }
48354
+ },
48355
+ "org.primer.llm": {
48356
+ "usage": ["legacy-component", "backward-compatibility"],
48357
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47580
48358
  }
47581
48359
  },
47582
48360
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47586,21 +48364,46 @@
47586
48364
  {
47587
48365
  "color": "{base.color.neutral.0}",
47588
48366
  "alpha": 0.4,
47589
- "offsetX": "0px",
47590
- "offsetY": "6px",
47591
- "blur": "12px",
47592
- "spread": "-3px"
48367
+ "offsetX": {
48368
+ "value": 0,
48369
+ "unit": "px"
48370
+ },
48371
+ "offsetY": {
48372
+ "value": 6,
48373
+ "unit": "px"
48374
+ },
48375
+ "blur": {
48376
+ "value": 12,
48377
+ "unit": "px"
48378
+ },
48379
+ "spread": {
48380
+ "value": -3,
48381
+ "unit": "px"
48382
+ }
47593
48383
  },
47594
48384
  {
47595
48385
  "color": "{base.color.neutral.0}",
47596
48386
  "alpha": 0.4,
47597
- "offsetX": "0px",
47598
- "offsetY": "6px",
47599
- "blur": "18px",
47600
- "spread": "0px"
48387
+ "offsetX": {
48388
+ "value": 0,
48389
+ "unit": "px"
48390
+ },
48391
+ "offsetY": {
48392
+ "value": 6,
48393
+ "unit": "px"
48394
+ },
48395
+ "blur": {
48396
+ "value": 18,
48397
+ "unit": "px"
48398
+ },
48399
+ "spread": {
48400
+ "value": 0,
48401
+ "unit": "px"
48402
+ }
47601
48403
  }
47602
48404
  ],
47603
48405
  "$type": "shadow",
48406
+ "$description": "Legacy floating shadow for backward compatibility",
47604
48407
  "$extensions": {
47605
48408
  "org.primer.figma": {},
47606
48409
  "org.primer.overrides": {
@@ -47609,24 +48412,52 @@
47609
48412
  {
47610
48413
  "color": "{base.color.neutral.0}",
47611
48414
  "alpha": 0.4,
47612
- "offsetX": "0px",
47613
- "offsetY": "6px",
47614
- "blur": "12px",
47615
- "spread": "-3px"
48415
+ "offsetX": {
48416
+ "value": 0,
48417
+ "unit": "px"
48418
+ },
48419
+ "offsetY": {
48420
+ "value": 6,
48421
+ "unit": "px"
48422
+ },
48423
+ "blur": {
48424
+ "value": 12,
48425
+ "unit": "px"
48426
+ },
48427
+ "spread": {
48428
+ "value": -3,
48429
+ "unit": "px"
48430
+ }
47616
48431
  },
47617
48432
  {
47618
48433
  "color": "{base.color.neutral.0}",
47619
48434
  "alpha": 0.4,
47620
- "offsetX": "0px",
47621
- "offsetY": "6px",
47622
- "blur": "18px",
47623
- "spread": "0px"
48435
+ "offsetX": {
48436
+ "value": 0,
48437
+ "unit": "px"
48438
+ },
48439
+ "offsetY": {
48440
+ "value": 6,
48441
+ "unit": "px"
48442
+ },
48443
+ "blur": {
48444
+ "value": 18,
48445
+ "unit": "px"
48446
+ },
48447
+ "spread": {
48448
+ "value": 0,
48449
+ "unit": "px"
48450
+ }
47624
48451
  }
47625
48452
  ],
47626
48453
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47627
48454
  "isSource": true,
47628
48455
  "$type": "shadow"
47629
48456
  }
48457
+ },
48458
+ "org.primer.llm": {
48459
+ "usage": ["legacy-component", "backward-compatibility"],
48460
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47630
48461
  }
47631
48462
  },
47632
48463
  "key": "{shadow.floating.legacy}"
@@ -47637,8 +48468,9 @@
47637
48468
  },
47638
48469
  "shadow-floating-medium": {
47639
48470
  "key": "{shadow.floating.medium}",
47640
- "$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",
48471
+ "$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",
47641
48472
  "$type": "shadow",
48473
+ "$description": "Medium floating shadow for popovers and action menus",
47642
48474
  "$extensions": {
47643
48475
  "org.primer.figma": {
47644
48476
  "collection": "mode",
@@ -47650,48 +48482,433 @@
47650
48482
  {
47651
48483
  "color": "#3d444db3",
47652
48484
  "alpha": 1,
47653
- "offsetX": "0px",
47654
- "offsetY": "0px",
47655
- "blur": "0px",
47656
- "spread": "1px"
48485
+ "offsetX": {
48486
+ "value": 0,
48487
+ "unit": "px"
48488
+ },
48489
+ "offsetY": {
48490
+ "value": 0,
48491
+ "unit": "px"
48492
+ },
48493
+ "blur": {
48494
+ "value": 0,
48495
+ "unit": "px"
48496
+ },
48497
+ "spread": {
48498
+ "value": 1,
48499
+ "unit": "px"
48500
+ }
47657
48501
  },
47658
48502
  {
47659
48503
  "color": "#010409",
47660
48504
  "alpha": 0.4,
47661
- "offsetX": "0px",
47662
- "offsetY": "8px",
47663
- "blur": "16px",
47664
- "spread": "-4px"
48505
+ "offsetX": {
48506
+ "value": 0,
48507
+ "unit": "px"
48508
+ },
48509
+ "offsetY": {
48510
+ "value": 8,
48511
+ "unit": "px"
48512
+ },
48513
+ "blur": {
48514
+ "value": 16,
48515
+ "unit": "px"
48516
+ },
48517
+ "spread": {
48518
+ "value": -4,
48519
+ "unit": "px"
48520
+ }
47665
48521
  },
47666
48522
  {
47667
48523
  "color": "#010409",
47668
48524
  "alpha": 0.4,
47669
- "offsetX": "0px",
47670
- "offsetY": "4px",
47671
- "blur": "32px",
47672
- "spread": "-4px"
48525
+ "offsetX": {
48526
+ "value": 0,
48527
+ "unit": "px"
48528
+ },
48529
+ "offsetY": {
48530
+ "value": 4,
48531
+ "unit": "px"
48532
+ },
48533
+ "blur": {
48534
+ "value": 32,
48535
+ "unit": "px"
48536
+ },
48537
+ "spread": {
48538
+ "value": -4,
48539
+ "unit": "px"
48540
+ }
47673
48541
  },
47674
48542
  {
47675
48543
  "color": "#010409",
47676
48544
  "alpha": 0.4,
47677
- "offsetX": "0px",
47678
- "offsetY": "24px",
47679
- "blur": "48px",
47680
- "spread": "-12px"
48545
+ "offsetX": {
48546
+ "value": 0,
48547
+ "unit": "px"
48548
+ },
48549
+ "offsetY": {
48550
+ "value": 24,
48551
+ "unit": "px"
48552
+ },
48553
+ "blur": {
48554
+ "value": 48,
48555
+ "unit": "px"
48556
+ },
48557
+ "spread": {
48558
+ "value": -12,
48559
+ "unit": "px"
48560
+ }
47681
48561
  },
47682
48562
  {
47683
48563
  "color": "#010409",
47684
48564
  "alpha": 0.4,
47685
- "offsetX": "0px",
47686
- "offsetY": "48px",
47687
- "blur": "96px",
47688
- "spread": "-24px"
48565
+ "offsetX": {
48566
+ "value": 0,
48567
+ "unit": "px"
48568
+ },
48569
+ "offsetY": {
48570
+ "value": 48,
48571
+ "unit": "px"
48572
+ },
48573
+ "blur": {
48574
+ "value": 96,
48575
+ "unit": "px"
48576
+ },
48577
+ "spread": {
48578
+ "value": -24,
48579
+ "unit": "px"
48580
+ }
48581
+ }
48582
+ ],
48583
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48584
+ "isSource": true,
48585
+ "$type": "shadow"
48586
+ },
48587
+ "light-high-contrast": {
48588
+ "$value": [
48589
+ {
48590
+ "color": "#3d444db3",
48591
+ "alpha": 1,
48592
+ "offsetX": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "offsetY": {
48597
+ "value": 0,
48598
+ "unit": "px"
48599
+ },
48600
+ "blur": {
48601
+ "value": 0,
48602
+ "unit": "px"
48603
+ },
48604
+ "spread": {
48605
+ "value": 1,
48606
+ "unit": "px"
48607
+ }
48608
+ },
48609
+ {
48610
+ "color": "#f0f6fc",
48611
+ "alpha": 0.08,
48612
+ "offsetX": {
48613
+ "value": 0,
48614
+ "unit": "px"
48615
+ },
48616
+ "offsetY": {
48617
+ "value": 8,
48618
+ "unit": "px"
48619
+ },
48620
+ "blur": {
48621
+ "value": 16,
48622
+ "unit": "px"
48623
+ },
48624
+ "spread": {
48625
+ "value": -4,
48626
+ "unit": "px"
48627
+ }
48628
+ },
48629
+ {
48630
+ "color": "#f0f6fc",
48631
+ "alpha": 0.08,
48632
+ "offsetX": {
48633
+ "value": 0,
48634
+ "unit": "px"
48635
+ },
48636
+ "offsetY": {
48637
+ "value": 4,
48638
+ "unit": "px"
48639
+ },
48640
+ "blur": {
48641
+ "value": 32,
48642
+ "unit": "px"
48643
+ },
48644
+ "spread": {
48645
+ "value": -4,
48646
+ "unit": "px"
48647
+ }
48648
+ },
48649
+ {
48650
+ "color": "#f0f6fc",
48651
+ "alpha": 0.08,
48652
+ "offsetX": {
48653
+ "value": 0,
48654
+ "unit": "px"
48655
+ },
48656
+ "offsetY": {
48657
+ "value": 24,
48658
+ "unit": "px"
48659
+ },
48660
+ "blur": {
48661
+ "value": 48,
48662
+ "unit": "px"
48663
+ },
48664
+ "spread": {
48665
+ "value": -12,
48666
+ "unit": "px"
48667
+ }
48668
+ },
48669
+ {
48670
+ "color": "#f0f6fc",
48671
+ "alpha": 0.08,
48672
+ "offsetX": {
48673
+ "value": 0,
48674
+ "unit": "px"
48675
+ },
48676
+ "offsetY": {
48677
+ "value": 48,
48678
+ "unit": "px"
48679
+ },
48680
+ "blur": {
48681
+ "value": 96,
48682
+ "unit": "px"
48683
+ },
48684
+ "spread": {
48685
+ "value": -24,
48686
+ "unit": "px"
48687
+ }
48688
+ }
48689
+ ],
48690
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48691
+ "isSource": true,
48692
+ "$type": "shadow"
48693
+ },
48694
+ "light-protanopia-deuteranopia-high-contrast": {
48695
+ "$value": [
48696
+ {
48697
+ "color": "#3d444db3",
48698
+ "alpha": 1,
48699
+ "offsetX": {
48700
+ "value": 0,
48701
+ "unit": "px"
48702
+ },
48703
+ "offsetY": {
48704
+ "value": 0,
48705
+ "unit": "px"
48706
+ },
48707
+ "blur": {
48708
+ "value": 0,
48709
+ "unit": "px"
48710
+ },
48711
+ "spread": {
48712
+ "value": 1,
48713
+ "unit": "px"
48714
+ }
48715
+ },
48716
+ {
48717
+ "color": "#f0f6fc",
48718
+ "alpha": 0.08,
48719
+ "offsetX": {
48720
+ "value": 0,
48721
+ "unit": "px"
48722
+ },
48723
+ "offsetY": {
48724
+ "value": 8,
48725
+ "unit": "px"
48726
+ },
48727
+ "blur": {
48728
+ "value": 16,
48729
+ "unit": "px"
48730
+ },
48731
+ "spread": {
48732
+ "value": -4,
48733
+ "unit": "px"
48734
+ }
48735
+ },
48736
+ {
48737
+ "color": "#f0f6fc",
48738
+ "alpha": 0.08,
48739
+ "offsetX": {
48740
+ "value": 0,
48741
+ "unit": "px"
48742
+ },
48743
+ "offsetY": {
48744
+ "value": 4,
48745
+ "unit": "px"
48746
+ },
48747
+ "blur": {
48748
+ "value": 32,
48749
+ "unit": "px"
48750
+ },
48751
+ "spread": {
48752
+ "value": -4,
48753
+ "unit": "px"
48754
+ }
48755
+ },
48756
+ {
48757
+ "color": "#f0f6fc",
48758
+ "alpha": 0.08,
48759
+ "offsetX": {
48760
+ "value": 0,
48761
+ "unit": "px"
48762
+ },
48763
+ "offsetY": {
48764
+ "value": 24,
48765
+ "unit": "px"
48766
+ },
48767
+ "blur": {
48768
+ "value": 48,
48769
+ "unit": "px"
48770
+ },
48771
+ "spread": {
48772
+ "value": -12,
48773
+ "unit": "px"
48774
+ }
48775
+ },
48776
+ {
48777
+ "color": "#f0f6fc",
48778
+ "alpha": 0.08,
48779
+ "offsetX": {
48780
+ "value": 0,
48781
+ "unit": "px"
48782
+ },
48783
+ "offsetY": {
48784
+ "value": 48,
48785
+ "unit": "px"
48786
+ },
48787
+ "blur": {
48788
+ "value": 96,
48789
+ "unit": "px"
48790
+ },
48791
+ "spread": {
48792
+ "value": -24,
48793
+ "unit": "px"
48794
+ }
48795
+ }
48796
+ ],
48797
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48798
+ "isSource": true,
48799
+ "$type": "shadow"
48800
+ },
48801
+ "light-tritanopia-high-contrast": {
48802
+ "$value": [
48803
+ {
48804
+ "color": "#3d444db3",
48805
+ "alpha": 1,
48806
+ "offsetX": {
48807
+ "value": 0,
48808
+ "unit": "px"
48809
+ },
48810
+ "offsetY": {
48811
+ "value": 0,
48812
+ "unit": "px"
48813
+ },
48814
+ "blur": {
48815
+ "value": 0,
48816
+ "unit": "px"
48817
+ },
48818
+ "spread": {
48819
+ "value": 1,
48820
+ "unit": "px"
48821
+ }
48822
+ },
48823
+ {
48824
+ "color": "#f0f6fc",
48825
+ "alpha": 0.08,
48826
+ "offsetX": {
48827
+ "value": 0,
48828
+ "unit": "px"
48829
+ },
48830
+ "offsetY": {
48831
+ "value": 8,
48832
+ "unit": "px"
48833
+ },
48834
+ "blur": {
48835
+ "value": 16,
48836
+ "unit": "px"
48837
+ },
48838
+ "spread": {
48839
+ "value": -4,
48840
+ "unit": "px"
48841
+ }
48842
+ },
48843
+ {
48844
+ "color": "#f0f6fc",
48845
+ "alpha": 0.08,
48846
+ "offsetX": {
48847
+ "value": 0,
48848
+ "unit": "px"
48849
+ },
48850
+ "offsetY": {
48851
+ "value": 4,
48852
+ "unit": "px"
48853
+ },
48854
+ "blur": {
48855
+ "value": 32,
48856
+ "unit": "px"
48857
+ },
48858
+ "spread": {
48859
+ "value": -4,
48860
+ "unit": "px"
48861
+ }
48862
+ },
48863
+ {
48864
+ "color": "#f0f6fc",
48865
+ "alpha": 0.08,
48866
+ "offsetX": {
48867
+ "value": 0,
48868
+ "unit": "px"
48869
+ },
48870
+ "offsetY": {
48871
+ "value": 24,
48872
+ "unit": "px"
48873
+ },
48874
+ "blur": {
48875
+ "value": 48,
48876
+ "unit": "px"
48877
+ },
48878
+ "spread": {
48879
+ "value": -12,
48880
+ "unit": "px"
48881
+ }
48882
+ },
48883
+ {
48884
+ "color": "#f0f6fc",
48885
+ "alpha": 0.08,
48886
+ "offsetX": {
48887
+ "value": 0,
48888
+ "unit": "px"
48889
+ },
48890
+ "offsetY": {
48891
+ "value": 48,
48892
+ "unit": "px"
48893
+ },
48894
+ "blur": {
48895
+ "value": 96,
48896
+ "unit": "px"
48897
+ },
48898
+ "spread": {
48899
+ "value": -24,
48900
+ "unit": "px"
48901
+ }
47689
48902
  }
47690
48903
  ],
47691
48904
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47692
48905
  "isSource": true,
47693
48906
  "$type": "shadow"
47694
48907
  }
48908
+ },
48909
+ "org.primer.llm": {
48910
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48911
+ "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."
47695
48912
  }
47696
48913
  },
47697
48914
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47701,45 +48918,106 @@
47701
48918
  {
47702
48919
  "color": "{overlay.borderColor}",
47703
48920
  "alpha": 1,
47704
- "offsetX": "0px",
47705
- "offsetY": "0px",
47706
- "blur": "0px",
47707
- "spread": "1px"
48921
+ "offsetX": {
48922
+ "value": 0,
48923
+ "unit": "px"
48924
+ },
48925
+ "offsetY": {
48926
+ "value": 0,
48927
+ "unit": "px"
48928
+ },
48929
+ "blur": {
48930
+ "value": 0,
48931
+ "unit": "px"
48932
+ },
48933
+ "spread": {
48934
+ "value": 1,
48935
+ "unit": "px"
48936
+ }
47708
48937
  },
47709
48938
  {
47710
48939
  "color": "{base.color.neutral.0}",
47711
48940
  "alpha": 0.4,
47712
- "offsetX": "0px",
47713
- "offsetY": "8px",
47714
- "blur": "16px",
47715
- "spread": "-4px"
48941
+ "offsetX": {
48942
+ "value": 0,
48943
+ "unit": "px"
48944
+ },
48945
+ "offsetY": {
48946
+ "value": 8,
48947
+ "unit": "px"
48948
+ },
48949
+ "blur": {
48950
+ "value": 16,
48951
+ "unit": "px"
48952
+ },
48953
+ "spread": {
48954
+ "value": -4,
48955
+ "unit": "px"
48956
+ }
47716
48957
  },
47717
48958
  {
47718
48959
  "color": "{base.color.neutral.0}",
47719
48960
  "alpha": 0.4,
47720
- "offsetX": "0px",
47721
- "offsetY": "4px",
47722
- "blur": "32px",
47723
- "spread": "-4px"
48961
+ "offsetX": {
48962
+ "value": 0,
48963
+ "unit": "px"
48964
+ },
48965
+ "offsetY": {
48966
+ "value": 4,
48967
+ "unit": "px"
48968
+ },
48969
+ "blur": {
48970
+ "value": 32,
48971
+ "unit": "px"
48972
+ },
48973
+ "spread": {
48974
+ "value": -4,
48975
+ "unit": "px"
48976
+ }
47724
48977
  },
47725
48978
  {
47726
48979
  "color": "{base.color.neutral.0}",
47727
48980
  "alpha": 0.4,
47728
- "offsetX": "0px",
47729
- "offsetY": "24px",
47730
- "blur": "48px",
47731
- "spread": "-12px"
48981
+ "offsetX": {
48982
+ "value": 0,
48983
+ "unit": "px"
48984
+ },
48985
+ "offsetY": {
48986
+ "value": 24,
48987
+ "unit": "px"
48988
+ },
48989
+ "blur": {
48990
+ "value": 48,
48991
+ "unit": "px"
48992
+ },
48993
+ "spread": {
48994
+ "value": -12,
48995
+ "unit": "px"
48996
+ }
47732
48997
  },
47733
48998
  {
47734
48999
  "color": "{base.color.neutral.0}",
47735
49000
  "alpha": 0.4,
47736
- "offsetX": "0px",
47737
- "offsetY": "48px",
47738
- "blur": "96px",
47739
- "spread": "-24px"
49001
+ "offsetX": {
49002
+ "value": 0,
49003
+ "unit": "px"
49004
+ },
49005
+ "offsetY": {
49006
+ "value": 48,
49007
+ "unit": "px"
49008
+ },
49009
+ "blur": {
49010
+ "value": 96,
49011
+ "unit": "px"
49012
+ },
49013
+ "spread": {
49014
+ "value": -24,
49015
+ "unit": "px"
49016
+ }
47740
49017
  }
47741
49018
  ],
47742
49019
  "$type": "shadow",
49020
+ "$description": "Medium floating shadow for popovers and action menus",
47743
49021
  "$extensions": {
47744
49022
  "org.primer.figma": {
47745
49023
  "collection": "mode",
@@ -47751,48 +49029,433 @@
47751
49029
  {
47752
49030
  "color": "{overlay.borderColor}",
47753
49031
  "alpha": 1,
47754
- "offsetX": "0px",
47755
- "offsetY": "0px",
47756
- "blur": "0px",
47757
- "spread": "1px"
49032
+ "offsetX": {
49033
+ "value": 0,
49034
+ "unit": "px"
49035
+ },
49036
+ "offsetY": {
49037
+ "value": 0,
49038
+ "unit": "px"
49039
+ },
49040
+ "blur": {
49041
+ "value": 0,
49042
+ "unit": "px"
49043
+ },
49044
+ "spread": {
49045
+ "value": 1,
49046
+ "unit": "px"
49047
+ }
47758
49048
  },
47759
49049
  {
47760
49050
  "color": "{base.color.neutral.0}",
47761
49051
  "alpha": 0.4,
47762
- "offsetX": "0px",
47763
- "offsetY": "8px",
47764
- "blur": "16px",
47765
- "spread": "-4px"
49052
+ "offsetX": {
49053
+ "value": 0,
49054
+ "unit": "px"
49055
+ },
49056
+ "offsetY": {
49057
+ "value": 8,
49058
+ "unit": "px"
49059
+ },
49060
+ "blur": {
49061
+ "value": 16,
49062
+ "unit": "px"
49063
+ },
49064
+ "spread": {
49065
+ "value": -4,
49066
+ "unit": "px"
49067
+ }
47766
49068
  },
47767
49069
  {
47768
49070
  "color": "{base.color.neutral.0}",
47769
49071
  "alpha": 0.4,
47770
- "offsetX": "0px",
47771
- "offsetY": "4px",
47772
- "blur": "32px",
47773
- "spread": "-4px"
49072
+ "offsetX": {
49073
+ "value": 0,
49074
+ "unit": "px"
49075
+ },
49076
+ "offsetY": {
49077
+ "value": 4,
49078
+ "unit": "px"
49079
+ },
49080
+ "blur": {
49081
+ "value": 32,
49082
+ "unit": "px"
49083
+ },
49084
+ "spread": {
49085
+ "value": -4,
49086
+ "unit": "px"
49087
+ }
47774
49088
  },
47775
49089
  {
47776
49090
  "color": "{base.color.neutral.0}",
47777
49091
  "alpha": 0.4,
47778
- "offsetX": "0px",
47779
- "offsetY": "24px",
47780
- "blur": "48px",
47781
- "spread": "-12px"
49092
+ "offsetX": {
49093
+ "value": 0,
49094
+ "unit": "px"
49095
+ },
49096
+ "offsetY": {
49097
+ "value": 24,
49098
+ "unit": "px"
49099
+ },
49100
+ "blur": {
49101
+ "value": 48,
49102
+ "unit": "px"
49103
+ },
49104
+ "spread": {
49105
+ "value": -12,
49106
+ "unit": "px"
49107
+ }
47782
49108
  },
47783
49109
  {
47784
49110
  "color": "{base.color.neutral.0}",
47785
49111
  "alpha": 0.4,
47786
- "offsetX": "0px",
47787
- "offsetY": "48px",
47788
- "blur": "96px",
47789
- "spread": "-24px"
49112
+ "offsetX": {
49113
+ "value": 0,
49114
+ "unit": "px"
49115
+ },
49116
+ "offsetY": {
49117
+ "value": 48,
49118
+ "unit": "px"
49119
+ },
49120
+ "blur": {
49121
+ "value": 96,
49122
+ "unit": "px"
49123
+ },
49124
+ "spread": {
49125
+ "value": -24,
49126
+ "unit": "px"
49127
+ }
49128
+ }
49129
+ ],
49130
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49131
+ "isSource": true,
49132
+ "$type": "shadow"
49133
+ },
49134
+ "light-high-contrast": {
49135
+ "$value": [
49136
+ {
49137
+ "color": "{overlay.borderColor}",
49138
+ "alpha": 1,
49139
+ "offsetX": {
49140
+ "value": 0,
49141
+ "unit": "px"
49142
+ },
49143
+ "offsetY": {
49144
+ "value": 0,
49145
+ "unit": "px"
49146
+ },
49147
+ "blur": {
49148
+ "value": 0,
49149
+ "unit": "px"
49150
+ },
49151
+ "spread": {
49152
+ "value": 1,
49153
+ "unit": "px"
49154
+ }
49155
+ },
49156
+ {
49157
+ "color": "{base.color.neutral.12}",
49158
+ "alpha": 0.08,
49159
+ "offsetX": {
49160
+ "value": 0,
49161
+ "unit": "px"
49162
+ },
49163
+ "offsetY": {
49164
+ "value": 8,
49165
+ "unit": "px"
49166
+ },
49167
+ "blur": {
49168
+ "value": 16,
49169
+ "unit": "px"
49170
+ },
49171
+ "spread": {
49172
+ "value": -4,
49173
+ "unit": "px"
49174
+ }
49175
+ },
49176
+ {
49177
+ "color": "{base.color.neutral.12}",
49178
+ "alpha": 0.08,
49179
+ "offsetX": {
49180
+ "value": 0,
49181
+ "unit": "px"
49182
+ },
49183
+ "offsetY": {
49184
+ "value": 4,
49185
+ "unit": "px"
49186
+ },
49187
+ "blur": {
49188
+ "value": 32,
49189
+ "unit": "px"
49190
+ },
49191
+ "spread": {
49192
+ "value": -4,
49193
+ "unit": "px"
49194
+ }
49195
+ },
49196
+ {
49197
+ "color": "{base.color.neutral.12}",
49198
+ "alpha": 0.08,
49199
+ "offsetX": {
49200
+ "value": 0,
49201
+ "unit": "px"
49202
+ },
49203
+ "offsetY": {
49204
+ "value": 24,
49205
+ "unit": "px"
49206
+ },
49207
+ "blur": {
49208
+ "value": 48,
49209
+ "unit": "px"
49210
+ },
49211
+ "spread": {
49212
+ "value": -12,
49213
+ "unit": "px"
49214
+ }
49215
+ },
49216
+ {
49217
+ "color": "{base.color.neutral.12}",
49218
+ "alpha": 0.08,
49219
+ "offsetX": {
49220
+ "value": 0,
49221
+ "unit": "px"
49222
+ },
49223
+ "offsetY": {
49224
+ "value": 48,
49225
+ "unit": "px"
49226
+ },
49227
+ "blur": {
49228
+ "value": 96,
49229
+ "unit": "px"
49230
+ },
49231
+ "spread": {
49232
+ "value": -24,
49233
+ "unit": "px"
49234
+ }
49235
+ }
49236
+ ],
49237
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49238
+ "isSource": true,
49239
+ "$type": "shadow"
49240
+ },
49241
+ "light-protanopia-deuteranopia-high-contrast": {
49242
+ "$value": [
49243
+ {
49244
+ "color": "{overlay.borderColor}",
49245
+ "alpha": 1,
49246
+ "offsetX": {
49247
+ "value": 0,
49248
+ "unit": "px"
49249
+ },
49250
+ "offsetY": {
49251
+ "value": 0,
49252
+ "unit": "px"
49253
+ },
49254
+ "blur": {
49255
+ "value": 0,
49256
+ "unit": "px"
49257
+ },
49258
+ "spread": {
49259
+ "value": 1,
49260
+ "unit": "px"
49261
+ }
49262
+ },
49263
+ {
49264
+ "color": "{base.color.neutral.12}",
49265
+ "alpha": 0.08,
49266
+ "offsetX": {
49267
+ "value": 0,
49268
+ "unit": "px"
49269
+ },
49270
+ "offsetY": {
49271
+ "value": 8,
49272
+ "unit": "px"
49273
+ },
49274
+ "blur": {
49275
+ "value": 16,
49276
+ "unit": "px"
49277
+ },
49278
+ "spread": {
49279
+ "value": -4,
49280
+ "unit": "px"
49281
+ }
49282
+ },
49283
+ {
49284
+ "color": "{base.color.neutral.12}",
49285
+ "alpha": 0.08,
49286
+ "offsetX": {
49287
+ "value": 0,
49288
+ "unit": "px"
49289
+ },
49290
+ "offsetY": {
49291
+ "value": 4,
49292
+ "unit": "px"
49293
+ },
49294
+ "blur": {
49295
+ "value": 32,
49296
+ "unit": "px"
49297
+ },
49298
+ "spread": {
49299
+ "value": -4,
49300
+ "unit": "px"
49301
+ }
49302
+ },
49303
+ {
49304
+ "color": "{base.color.neutral.12}",
49305
+ "alpha": 0.08,
49306
+ "offsetX": {
49307
+ "value": 0,
49308
+ "unit": "px"
49309
+ },
49310
+ "offsetY": {
49311
+ "value": 24,
49312
+ "unit": "px"
49313
+ },
49314
+ "blur": {
49315
+ "value": 48,
49316
+ "unit": "px"
49317
+ },
49318
+ "spread": {
49319
+ "value": -12,
49320
+ "unit": "px"
49321
+ }
49322
+ },
49323
+ {
49324
+ "color": "{base.color.neutral.12}",
49325
+ "alpha": 0.08,
49326
+ "offsetX": {
49327
+ "value": 0,
49328
+ "unit": "px"
49329
+ },
49330
+ "offsetY": {
49331
+ "value": 48,
49332
+ "unit": "px"
49333
+ },
49334
+ "blur": {
49335
+ "value": 96,
49336
+ "unit": "px"
49337
+ },
49338
+ "spread": {
49339
+ "value": -24,
49340
+ "unit": "px"
49341
+ }
49342
+ }
49343
+ ],
49344
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49345
+ "isSource": true,
49346
+ "$type": "shadow"
49347
+ },
49348
+ "light-tritanopia-high-contrast": {
49349
+ "$value": [
49350
+ {
49351
+ "color": "{overlay.borderColor}",
49352
+ "alpha": 1,
49353
+ "offsetX": {
49354
+ "value": 0,
49355
+ "unit": "px"
49356
+ },
49357
+ "offsetY": {
49358
+ "value": 0,
49359
+ "unit": "px"
49360
+ },
49361
+ "blur": {
49362
+ "value": 0,
49363
+ "unit": "px"
49364
+ },
49365
+ "spread": {
49366
+ "value": 1,
49367
+ "unit": "px"
49368
+ }
49369
+ },
49370
+ {
49371
+ "color": "{base.color.neutral.12}",
49372
+ "alpha": 0.08,
49373
+ "offsetX": {
49374
+ "value": 0,
49375
+ "unit": "px"
49376
+ },
49377
+ "offsetY": {
49378
+ "value": 8,
49379
+ "unit": "px"
49380
+ },
49381
+ "blur": {
49382
+ "value": 16,
49383
+ "unit": "px"
49384
+ },
49385
+ "spread": {
49386
+ "value": -4,
49387
+ "unit": "px"
49388
+ }
49389
+ },
49390
+ {
49391
+ "color": "{base.color.neutral.12}",
49392
+ "alpha": 0.08,
49393
+ "offsetX": {
49394
+ "value": 0,
49395
+ "unit": "px"
49396
+ },
49397
+ "offsetY": {
49398
+ "value": 4,
49399
+ "unit": "px"
49400
+ },
49401
+ "blur": {
49402
+ "value": 32,
49403
+ "unit": "px"
49404
+ },
49405
+ "spread": {
49406
+ "value": -4,
49407
+ "unit": "px"
49408
+ }
49409
+ },
49410
+ {
49411
+ "color": "{base.color.neutral.12}",
49412
+ "alpha": 0.08,
49413
+ "offsetX": {
49414
+ "value": 0,
49415
+ "unit": "px"
49416
+ },
49417
+ "offsetY": {
49418
+ "value": 24,
49419
+ "unit": "px"
49420
+ },
49421
+ "blur": {
49422
+ "value": 48,
49423
+ "unit": "px"
49424
+ },
49425
+ "spread": {
49426
+ "value": -12,
49427
+ "unit": "px"
49428
+ }
49429
+ },
49430
+ {
49431
+ "color": "{base.color.neutral.12}",
49432
+ "alpha": 0.08,
49433
+ "offsetX": {
49434
+ "value": 0,
49435
+ "unit": "px"
49436
+ },
49437
+ "offsetY": {
49438
+ "value": 48,
49439
+ "unit": "px"
49440
+ },
49441
+ "blur": {
49442
+ "value": 96,
49443
+ "unit": "px"
49444
+ },
49445
+ "spread": {
49446
+ "value": -24,
49447
+ "unit": "px"
49448
+ }
47790
49449
  }
47791
49450
  ],
47792
49451
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47793
49452
  "isSource": true,
47794
49453
  "$type": "shadow"
47795
49454
  }
49455
+ },
49456
+ "org.primer.llm": {
49457
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49458
+ "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."
47796
49459
  }
47797
49460
  },
47798
49461
  "key": "{shadow.floating.medium}"
@@ -47803,7 +49466,7 @@
47803
49466
  },
47804
49467
  "shadow-floating-small": {
47805
49468
  "key": "{shadow.floating.small}",
47806
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
49469
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47807
49470
  "$type": "shadow",
47808
49471
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47809
49472
  "$extensions": {
@@ -47817,26 +49480,62 @@
47817
49480
  {
47818
49481
  "color": "#3d444db3",
47819
49482
  "alpha": 1,
47820
- "offsetX": "0px",
47821
- "offsetY": "0px",
47822
- "blur": "0px",
47823
- "spread": "1px"
49483
+ "offsetX": {
49484
+ "value": 0,
49485
+ "unit": "px"
49486
+ },
49487
+ "offsetY": {
49488
+ "value": 0,
49489
+ "unit": "px"
49490
+ },
49491
+ "blur": {
49492
+ "value": 0,
49493
+ "unit": "px"
49494
+ },
49495
+ "spread": {
49496
+ "value": 1,
49497
+ "unit": "px"
49498
+ }
47824
49499
  },
47825
49500
  {
47826
49501
  "color": "#010409",
47827
49502
  "alpha": 0.4,
47828
- "offsetX": "0px",
47829
- "offsetY": "6px",
47830
- "blur": "12px",
47831
- "spread": "-3px"
49503
+ "offsetX": {
49504
+ "value": 0,
49505
+ "unit": "px"
49506
+ },
49507
+ "offsetY": {
49508
+ "value": 6,
49509
+ "unit": "px"
49510
+ },
49511
+ "blur": {
49512
+ "value": 12,
49513
+ "unit": "px"
49514
+ },
49515
+ "spread": {
49516
+ "value": -3,
49517
+ "unit": "px"
49518
+ }
47832
49519
  },
47833
49520
  {
47834
49521
  "color": "#010409",
47835
49522
  "alpha": 0.4,
47836
- "offsetX": "0px",
47837
- "offsetY": "6px",
47838
- "blur": "18px",
47839
- "spread": "0px"
49523
+ "offsetX": {
49524
+ "value": 0,
49525
+ "unit": "px"
49526
+ },
49527
+ "offsetY": {
49528
+ "value": 6,
49529
+ "unit": "px"
49530
+ },
49531
+ "blur": {
49532
+ "value": 18,
49533
+ "unit": "px"
49534
+ },
49535
+ "spread": {
49536
+ "value": 0,
49537
+ "unit": "px"
49538
+ }
47840
49539
  }
47841
49540
  ],
47842
49541
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47856,26 +49555,62 @@
47856
49555
  {
47857
49556
  "color": "{overlay.borderColor}",
47858
49557
  "alpha": 1,
47859
- "offsetX": "0px",
47860
- "offsetY": "0px",
47861
- "blur": "0px",
47862
- "spread": "1px"
49558
+ "offsetX": {
49559
+ "value": 0,
49560
+ "unit": "px"
49561
+ },
49562
+ "offsetY": {
49563
+ "value": 0,
49564
+ "unit": "px"
49565
+ },
49566
+ "blur": {
49567
+ "value": 0,
49568
+ "unit": "px"
49569
+ },
49570
+ "spread": {
49571
+ "value": 1,
49572
+ "unit": "px"
49573
+ }
47863
49574
  },
47864
49575
  {
47865
49576
  "color": "{base.color.neutral.0}",
47866
49577
  "alpha": 0.4,
47867
- "offsetX": "0px",
47868
- "offsetY": "6px",
47869
- "blur": "12px",
47870
- "spread": "-3px"
49578
+ "offsetX": {
49579
+ "value": 0,
49580
+ "unit": "px"
49581
+ },
49582
+ "offsetY": {
49583
+ "value": 6,
49584
+ "unit": "px"
49585
+ },
49586
+ "blur": {
49587
+ "value": 12,
49588
+ "unit": "px"
49589
+ },
49590
+ "spread": {
49591
+ "value": -3,
49592
+ "unit": "px"
49593
+ }
47871
49594
  },
47872
49595
  {
47873
49596
  "color": "{base.color.neutral.0}",
47874
49597
  "alpha": 0.4,
47875
- "offsetX": "0px",
47876
- "offsetY": "6px",
47877
- "blur": "18px",
47878
- "spread": "0px"
49598
+ "offsetX": {
49599
+ "value": 0,
49600
+ "unit": "px"
49601
+ },
49602
+ "offsetY": {
49603
+ "value": 6,
49604
+ "unit": "px"
49605
+ },
49606
+ "blur": {
49607
+ "value": 18,
49608
+ "unit": "px"
49609
+ },
49610
+ "spread": {
49611
+ "value": 0,
49612
+ "unit": "px"
49613
+ }
47879
49614
  }
47880
49615
  ],
47881
49616
  "$type": "shadow",
@@ -47891,26 +49626,62 @@
47891
49626
  {
47892
49627
  "color": "{overlay.borderColor}",
47893
49628
  "alpha": 1,
47894
- "offsetX": "0px",
47895
- "offsetY": "0px",
47896
- "blur": "0px",
47897
- "spread": "1px"
49629
+ "offsetX": {
49630
+ "value": 0,
49631
+ "unit": "px"
49632
+ },
49633
+ "offsetY": {
49634
+ "value": 0,
49635
+ "unit": "px"
49636
+ },
49637
+ "blur": {
49638
+ "value": 0,
49639
+ "unit": "px"
49640
+ },
49641
+ "spread": {
49642
+ "value": 1,
49643
+ "unit": "px"
49644
+ }
47898
49645
  },
47899
49646
  {
47900
49647
  "color": "{base.color.neutral.0}",
47901
49648
  "alpha": 0.4,
47902
- "offsetX": "0px",
47903
- "offsetY": "6px",
47904
- "blur": "12px",
47905
- "spread": "-3px"
49649
+ "offsetX": {
49650
+ "value": 0,
49651
+ "unit": "px"
49652
+ },
49653
+ "offsetY": {
49654
+ "value": 6,
49655
+ "unit": "px"
49656
+ },
49657
+ "blur": {
49658
+ "value": 12,
49659
+ "unit": "px"
49660
+ },
49661
+ "spread": {
49662
+ "value": -3,
49663
+ "unit": "px"
49664
+ }
47906
49665
  },
47907
49666
  {
47908
49667
  "color": "{base.color.neutral.0}",
47909
49668
  "alpha": 0.4,
47910
- "offsetX": "0px",
47911
- "offsetY": "6px",
47912
- "blur": "18px",
47913
- "spread": "0px"
49669
+ "offsetX": {
49670
+ "value": 0,
49671
+ "unit": "px"
49672
+ },
49673
+ "offsetY": {
49674
+ "value": 6,
49675
+ "unit": "px"
49676
+ },
49677
+ "blur": {
49678
+ "value": 18,
49679
+ "unit": "px"
49680
+ },
49681
+ "spread": {
49682
+ "value": 0,
49683
+ "unit": "px"
49684
+ }
47914
49685
  }
47915
49686
  ],
47916
49687
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47931,8 +49702,9 @@
47931
49702
  },
47932
49703
  "shadow-floating-xlarge": {
47933
49704
  "key": "{shadow.floating.xlarge}",
47934
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
49705
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47935
49706
  "$type": "shadow",
49707
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47936
49708
  "$extensions": {
47937
49709
  "org.primer.figma": {
47938
49710
  "collection": "mode",
@@ -47944,24 +49716,193 @@
47944
49716
  {
47945
49717
  "color": "#3d444db3",
47946
49718
  "alpha": 1,
47947
- "offsetX": "0px",
47948
- "offsetY": "0px",
47949
- "blur": "0px",
47950
- "spread": "1px"
49719
+ "offsetX": {
49720
+ "value": 0,
49721
+ "unit": "px"
49722
+ },
49723
+ "offsetY": {
49724
+ "value": 0,
49725
+ "unit": "px"
49726
+ },
49727
+ "blur": {
49728
+ "value": 0,
49729
+ "unit": "px"
49730
+ },
49731
+ "spread": {
49732
+ "value": 1,
49733
+ "unit": "px"
49734
+ }
47951
49735
  },
47952
49736
  {
47953
49737
  "color": "#010409",
47954
49738
  "alpha": 1,
47955
- "offsetX": "0px",
47956
- "offsetY": "32px",
47957
- "blur": "64px",
47958
- "spread": "0px"
49739
+ "offsetX": {
49740
+ "value": 0,
49741
+ "unit": "px"
49742
+ },
49743
+ "offsetY": {
49744
+ "value": 32,
49745
+ "unit": "px"
49746
+ },
49747
+ "blur": {
49748
+ "value": 64,
49749
+ "unit": "px"
49750
+ },
49751
+ "spread": {
49752
+ "value": 0,
49753
+ "unit": "px"
49754
+ }
49755
+ }
49756
+ ],
49757
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49758
+ "isSource": true,
49759
+ "$type": "shadow"
49760
+ },
49761
+ "light-high-contrast": {
49762
+ "$value": [
49763
+ {
49764
+ "color": "#3d444db3",
49765
+ "alpha": 1,
49766
+ "offsetX": {
49767
+ "value": 0,
49768
+ "unit": "px"
49769
+ },
49770
+ "offsetY": {
49771
+ "value": 0,
49772
+ "unit": "px"
49773
+ },
49774
+ "blur": {
49775
+ "value": 0,
49776
+ "unit": "px"
49777
+ },
49778
+ "spread": {
49779
+ "value": 1,
49780
+ "unit": "px"
49781
+ }
49782
+ },
49783
+ {
49784
+ "color": "#f0f6fc",
49785
+ "alpha": 0.32,
49786
+ "offsetX": {
49787
+ "value": 0,
49788
+ "unit": "px"
49789
+ },
49790
+ "offsetY": {
49791
+ "value": 56,
49792
+ "unit": "px"
49793
+ },
49794
+ "blur": {
49795
+ "value": 112,
49796
+ "unit": "px"
49797
+ },
49798
+ "spread": {
49799
+ "value": 0,
49800
+ "unit": "px"
49801
+ }
49802
+ }
49803
+ ],
49804
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49805
+ "isSource": true,
49806
+ "$type": "shadow"
49807
+ },
49808
+ "light-protanopia-deuteranopia-high-contrast": {
49809
+ "$value": [
49810
+ {
49811
+ "color": "#3d444db3",
49812
+ "alpha": 1,
49813
+ "offsetX": {
49814
+ "value": 0,
49815
+ "unit": "px"
49816
+ },
49817
+ "offsetY": {
49818
+ "value": 0,
49819
+ "unit": "px"
49820
+ },
49821
+ "blur": {
49822
+ "value": 0,
49823
+ "unit": "px"
49824
+ },
49825
+ "spread": {
49826
+ "value": 1,
49827
+ "unit": "px"
49828
+ }
49829
+ },
49830
+ {
49831
+ "color": "#f0f6fc",
49832
+ "alpha": 0.32,
49833
+ "offsetX": {
49834
+ "value": 0,
49835
+ "unit": "px"
49836
+ },
49837
+ "offsetY": {
49838
+ "value": 56,
49839
+ "unit": "px"
49840
+ },
49841
+ "blur": {
49842
+ "value": 112,
49843
+ "unit": "px"
49844
+ },
49845
+ "spread": {
49846
+ "value": 0,
49847
+ "unit": "px"
49848
+ }
49849
+ }
49850
+ ],
49851
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49852
+ "isSource": true,
49853
+ "$type": "shadow"
49854
+ },
49855
+ "light-tritanopia-high-contrast": {
49856
+ "$value": [
49857
+ {
49858
+ "color": "#3d444db3",
49859
+ "alpha": 1,
49860
+ "offsetX": {
49861
+ "value": 0,
49862
+ "unit": "px"
49863
+ },
49864
+ "offsetY": {
49865
+ "value": 0,
49866
+ "unit": "px"
49867
+ },
49868
+ "blur": {
49869
+ "value": 0,
49870
+ "unit": "px"
49871
+ },
49872
+ "spread": {
49873
+ "value": 1,
49874
+ "unit": "px"
49875
+ }
49876
+ },
49877
+ {
49878
+ "color": "#f0f6fc",
49879
+ "alpha": 0.32,
49880
+ "offsetX": {
49881
+ "value": 0,
49882
+ "unit": "px"
49883
+ },
49884
+ "offsetY": {
49885
+ "value": 56,
49886
+ "unit": "px"
49887
+ },
49888
+ "blur": {
49889
+ "value": 112,
49890
+ "unit": "px"
49891
+ },
49892
+ "spread": {
49893
+ "value": 0,
49894
+ "unit": "px"
49895
+ }
47959
49896
  }
47960
49897
  ],
47961
49898
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47962
49899
  "isSource": true,
47963
49900
  "$type": "shadow"
47964
49901
  }
49902
+ },
49903
+ "org.primer.llm": {
49904
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49905
+ "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."
47965
49906
  }
47966
49907
  },
47967
49908
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47971,21 +49912,46 @@
47971
49912
  {
47972
49913
  "color": "{overlay.borderColor}",
47973
49914
  "alpha": 1,
47974
- "offsetX": "0px",
47975
- "offsetY": "0px",
47976
- "blur": "0px",
47977
- "spread": "1px"
49915
+ "offsetX": {
49916
+ "value": 0,
49917
+ "unit": "px"
49918
+ },
49919
+ "offsetY": {
49920
+ "value": 0,
49921
+ "unit": "px"
49922
+ },
49923
+ "blur": {
49924
+ "value": 0,
49925
+ "unit": "px"
49926
+ },
49927
+ "spread": {
49928
+ "value": 1,
49929
+ "unit": "px"
49930
+ }
47978
49931
  },
47979
49932
  {
47980
49933
  "color": "{base.color.neutral.0}",
47981
49934
  "alpha": 1,
47982
- "offsetX": "0px",
47983
- "offsetY": "32px",
47984
- "blur": "64px",
47985
- "spread": "0px"
49935
+ "offsetX": {
49936
+ "value": 0,
49937
+ "unit": "px"
49938
+ },
49939
+ "offsetY": {
49940
+ "value": 32,
49941
+ "unit": "px"
49942
+ },
49943
+ "blur": {
49944
+ "value": 64,
49945
+ "unit": "px"
49946
+ },
49947
+ "spread": {
49948
+ "value": 0,
49949
+ "unit": "px"
49950
+ }
47986
49951
  }
47987
49952
  ],
47988
49953
  "$type": "shadow",
49954
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47989
49955
  "$extensions": {
47990
49956
  "org.primer.figma": {
47991
49957
  "collection": "mode",
@@ -47997,24 +49963,193 @@
47997
49963
  {
47998
49964
  "color": "{overlay.borderColor}",
47999
49965
  "alpha": 1,
48000
- "offsetX": "0px",
48001
- "offsetY": "0px",
48002
- "blur": "0px",
48003
- "spread": "1px"
49966
+ "offsetX": {
49967
+ "value": 0,
49968
+ "unit": "px"
49969
+ },
49970
+ "offsetY": {
49971
+ "value": 0,
49972
+ "unit": "px"
49973
+ },
49974
+ "blur": {
49975
+ "value": 0,
49976
+ "unit": "px"
49977
+ },
49978
+ "spread": {
49979
+ "value": 1,
49980
+ "unit": "px"
49981
+ }
48004
49982
  },
48005
49983
  {
48006
49984
  "color": "{base.color.neutral.0}",
48007
49985
  "alpha": 1,
48008
- "offsetX": "0px",
48009
- "offsetY": "32px",
48010
- "blur": "64px",
48011
- "spread": "0px"
49986
+ "offsetX": {
49987
+ "value": 0,
49988
+ "unit": "px"
49989
+ },
49990
+ "offsetY": {
49991
+ "value": 32,
49992
+ "unit": "px"
49993
+ },
49994
+ "blur": {
49995
+ "value": 64,
49996
+ "unit": "px"
49997
+ },
49998
+ "spread": {
49999
+ "value": 0,
50000
+ "unit": "px"
50001
+ }
50002
+ }
50003
+ ],
50004
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50005
+ "isSource": true,
50006
+ "$type": "shadow"
50007
+ },
50008
+ "light-high-contrast": {
50009
+ "$value": [
50010
+ {
50011
+ "color": "{overlay.borderColor}",
50012
+ "alpha": 1,
50013
+ "offsetX": {
50014
+ "value": 0,
50015
+ "unit": "px"
50016
+ },
50017
+ "offsetY": {
50018
+ "value": 0,
50019
+ "unit": "px"
50020
+ },
50021
+ "blur": {
50022
+ "value": 0,
50023
+ "unit": "px"
50024
+ },
50025
+ "spread": {
50026
+ "value": 1,
50027
+ "unit": "px"
50028
+ }
50029
+ },
50030
+ {
50031
+ "color": "{base.color.neutral.12}",
50032
+ "alpha": 0.32,
50033
+ "offsetX": {
50034
+ "value": 0,
50035
+ "unit": "px"
50036
+ },
50037
+ "offsetY": {
50038
+ "value": 56,
50039
+ "unit": "px"
50040
+ },
50041
+ "blur": {
50042
+ "value": 112,
50043
+ "unit": "px"
50044
+ },
50045
+ "spread": {
50046
+ "value": 0,
50047
+ "unit": "px"
50048
+ }
50049
+ }
50050
+ ],
50051
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50052
+ "isSource": true,
50053
+ "$type": "shadow"
50054
+ },
50055
+ "light-protanopia-deuteranopia-high-contrast": {
50056
+ "$value": [
50057
+ {
50058
+ "color": "{overlay.borderColor}",
50059
+ "alpha": 1,
50060
+ "offsetX": {
50061
+ "value": 0,
50062
+ "unit": "px"
50063
+ },
50064
+ "offsetY": {
50065
+ "value": 0,
50066
+ "unit": "px"
50067
+ },
50068
+ "blur": {
50069
+ "value": 0,
50070
+ "unit": "px"
50071
+ },
50072
+ "spread": {
50073
+ "value": 1,
50074
+ "unit": "px"
50075
+ }
50076
+ },
50077
+ {
50078
+ "color": "{base.color.neutral.12}",
50079
+ "alpha": 0.32,
50080
+ "offsetX": {
50081
+ "value": 0,
50082
+ "unit": "px"
50083
+ },
50084
+ "offsetY": {
50085
+ "value": 56,
50086
+ "unit": "px"
50087
+ },
50088
+ "blur": {
50089
+ "value": 112,
50090
+ "unit": "px"
50091
+ },
50092
+ "spread": {
50093
+ "value": 0,
50094
+ "unit": "px"
50095
+ }
50096
+ }
50097
+ ],
50098
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50099
+ "isSource": true,
50100
+ "$type": "shadow"
50101
+ },
50102
+ "light-tritanopia-high-contrast": {
50103
+ "$value": [
50104
+ {
50105
+ "color": "{overlay.borderColor}",
50106
+ "alpha": 1,
50107
+ "offsetX": {
50108
+ "value": 0,
50109
+ "unit": "px"
50110
+ },
50111
+ "offsetY": {
50112
+ "value": 0,
50113
+ "unit": "px"
50114
+ },
50115
+ "blur": {
50116
+ "value": 0,
50117
+ "unit": "px"
50118
+ },
50119
+ "spread": {
50120
+ "value": 1,
50121
+ "unit": "px"
50122
+ }
50123
+ },
50124
+ {
50125
+ "color": "{base.color.neutral.12}",
50126
+ "alpha": 0.32,
50127
+ "offsetX": {
50128
+ "value": 0,
50129
+ "unit": "px"
50130
+ },
50131
+ "offsetY": {
50132
+ "value": 56,
50133
+ "unit": "px"
50134
+ },
50135
+ "blur": {
50136
+ "value": 112,
50137
+ "unit": "px"
50138
+ },
50139
+ "spread": {
50140
+ "value": 0,
50141
+ "unit": "px"
50142
+ }
48012
50143
  }
48013
50144
  ],
48014
50145
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48015
50146
  "isSource": true,
48016
50147
  "$type": "shadow"
48017
50148
  }
50149
+ },
50150
+ "org.primer.llm": {
50151
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50152
+ "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."
48018
50153
  }
48019
50154
  },
48020
50155
  "key": "{shadow.floating.xlarge}"
@@ -48025,8 +50160,9 @@
48025
50160
  },
48026
50161
  "shadow-inset": {
48027
50162
  "key": "{shadow.inset}",
48028
- "$value": "inset 0px 1px 0px 0px #0104093d",
50163
+ "$value": "inset 0 1px 0 0 #0104093d",
48029
50164
  "$type": "shadow",
50165
+ "$description": "Inset shadow for recessed elements",
48030
50166
  "$extensions": {
48031
50167
  "org.primer.figma": {
48032
50168
  "collection": "mode",
@@ -48037,16 +50173,32 @@
48037
50173
  "$value": {
48038
50174
  "color": "#010409",
48039
50175
  "alpha": 0.24,
48040
- "offsetX": "0px",
48041
- "offsetY": "1px",
48042
- "blur": "0px",
48043
- "spread": "0px",
50176
+ "offsetX": {
50177
+ "value": 0,
50178
+ "unit": "px"
50179
+ },
50180
+ "offsetY": {
50181
+ "value": 1,
50182
+ "unit": "px"
50183
+ },
50184
+ "blur": {
50185
+ "value": 0,
50186
+ "unit": "px"
50187
+ },
50188
+ "spread": {
50189
+ "value": 0,
50190
+ "unit": "px"
50191
+ },
48044
50192
  "inset": true
48045
50193
  },
48046
50194
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48047
50195
  "isSource": true,
48048
50196
  "$type": "shadow"
48049
50197
  }
50198
+ },
50199
+ "org.primer.llm": {
50200
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50201
+ "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."
48050
50202
  }
48051
50203
  },
48052
50204
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48055,13 +50207,26 @@
48055
50207
  "$value": {
48056
50208
  "color": "{base.color.neutral.0}",
48057
50209
  "alpha": 0.24,
48058
- "offsetX": "0px",
48059
- "offsetY": "1px",
48060
- "blur": "0px",
48061
- "spread": "0px",
50210
+ "offsetX": {
50211
+ "value": 0,
50212
+ "unit": "px"
50213
+ },
50214
+ "offsetY": {
50215
+ "value": 1,
50216
+ "unit": "px"
50217
+ },
50218
+ "blur": {
50219
+ "value": 0,
50220
+ "unit": "px"
50221
+ },
50222
+ "spread": {
50223
+ "value": 0,
50224
+ "unit": "px"
50225
+ },
48062
50226
  "inset": true
48063
50227
  },
48064
50228
  "$type": "shadow",
50229
+ "$description": "Inset shadow for recessed elements",
48065
50230
  "$extensions": {
48066
50231
  "org.primer.figma": {
48067
50232
  "collection": "mode",
@@ -48072,16 +50237,32 @@
48072
50237
  "$value": {
48073
50238
  "color": "{base.color.neutral.0}",
48074
50239
  "alpha": 0.24,
48075
- "offsetX": "0px",
48076
- "offsetY": "1px",
48077
- "blur": "0px",
48078
- "spread": "0px",
50240
+ "offsetX": {
50241
+ "value": 0,
50242
+ "unit": "px"
50243
+ },
50244
+ "offsetY": {
50245
+ "value": 1,
50246
+ "unit": "px"
50247
+ },
50248
+ "blur": {
50249
+ "value": 0,
50250
+ "unit": "px"
50251
+ },
50252
+ "spread": {
50253
+ "value": 0,
50254
+ "unit": "px"
50255
+ },
48079
50256
  "inset": true
48080
50257
  },
48081
50258
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48082
50259
  "isSource": true,
48083
50260
  "$type": "shadow"
48084
50261
  }
50262
+ },
50263
+ "org.primer.llm": {
50264
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50265
+ "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."
48085
50266
  }
48086
50267
  },
48087
50268
  "key": "{shadow.inset}"
@@ -48092,8 +50273,9 @@
48092
50273
  },
48093
50274
  "shadow-resting-medium": {
48094
50275
  "key": "{shadow.resting.medium}",
48095
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
50276
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48096
50277
  "$type": "shadow",
50278
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48097
50279
  "$extensions": {
48098
50280
  "org.primer.figma": {
48099
50281
  "collection": "mode",
@@ -48105,24 +50287,52 @@
48105
50287
  {
48106
50288
  "color": "#010409",
48107
50289
  "alpha": 0.4,
48108
- "offsetX": "0px",
48109
- "offsetY": "1px",
48110
- "blur": "1px",
48111
- "spread": "0px"
50290
+ "offsetX": {
50291
+ "value": 0,
50292
+ "unit": "px"
50293
+ },
50294
+ "offsetY": {
50295
+ "value": 1,
50296
+ "unit": "px"
50297
+ },
50298
+ "blur": {
50299
+ "value": 1,
50300
+ "unit": "px"
50301
+ },
50302
+ "spread": {
50303
+ "value": 0,
50304
+ "unit": "px"
50305
+ }
48112
50306
  },
48113
50307
  {
48114
50308
  "color": "#010409",
48115
50309
  "alpha": 0.8,
48116
- "offsetX": "0px",
48117
- "offsetY": "3px",
48118
- "blur": "6px",
48119
- "spread": "0px"
50310
+ "offsetX": {
50311
+ "value": 0,
50312
+ "unit": "px"
50313
+ },
50314
+ "offsetY": {
50315
+ "value": 3,
50316
+ "unit": "px"
50317
+ },
50318
+ "blur": {
50319
+ "value": 6,
50320
+ "unit": "px"
50321
+ },
50322
+ "spread": {
50323
+ "value": 0,
50324
+ "unit": "px"
50325
+ }
48120
50326
  }
48121
50327
  ],
48122
50328
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48123
50329
  "isSource": true,
48124
50330
  "$type": "shadow"
48125
50331
  }
50332
+ },
50333
+ "org.primer.llm": {
50334
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50335
+ "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."
48126
50336
  }
48127
50337
  },
48128
50338
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48132,21 +50342,46 @@
48132
50342
  {
48133
50343
  "color": "{base.color.neutral.0}",
48134
50344
  "alpha": 0.4,
48135
- "offsetX": "0px",
48136
- "offsetY": "1px",
48137
- "blur": "1px",
48138
- "spread": "0px"
50345
+ "offsetX": {
50346
+ "value": 0,
50347
+ "unit": "px"
50348
+ },
50349
+ "offsetY": {
50350
+ "value": 1,
50351
+ "unit": "px"
50352
+ },
50353
+ "blur": {
50354
+ "value": 1,
50355
+ "unit": "px"
50356
+ },
50357
+ "spread": {
50358
+ "value": 0,
50359
+ "unit": "px"
50360
+ }
48139
50361
  },
48140
50362
  {
48141
50363
  "color": "{base.color.neutral.0}",
48142
50364
  "alpha": 0.8,
48143
- "offsetX": "0px",
48144
- "offsetY": "3px",
48145
- "blur": "6px",
48146
- "spread": "0px"
50365
+ "offsetX": {
50366
+ "value": 0,
50367
+ "unit": "px"
50368
+ },
50369
+ "offsetY": {
50370
+ "value": 3,
50371
+ "unit": "px"
50372
+ },
50373
+ "blur": {
50374
+ "value": 6,
50375
+ "unit": "px"
50376
+ },
50377
+ "spread": {
50378
+ "value": 0,
50379
+ "unit": "px"
50380
+ }
48147
50381
  }
48148
50382
  ],
48149
50383
  "$type": "shadow",
50384
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48150
50385
  "$extensions": {
48151
50386
  "org.primer.figma": {
48152
50387
  "collection": "mode",
@@ -48158,24 +50393,52 @@
48158
50393
  {
48159
50394
  "color": "{base.color.neutral.0}",
48160
50395
  "alpha": 0.4,
48161
- "offsetX": "0px",
48162
- "offsetY": "1px",
48163
- "blur": "1px",
48164
- "spread": "0px"
50396
+ "offsetX": {
50397
+ "value": 0,
50398
+ "unit": "px"
50399
+ },
50400
+ "offsetY": {
50401
+ "value": 1,
50402
+ "unit": "px"
50403
+ },
50404
+ "blur": {
50405
+ "value": 1,
50406
+ "unit": "px"
50407
+ },
50408
+ "spread": {
50409
+ "value": 0,
50410
+ "unit": "px"
50411
+ }
48165
50412
  },
48166
50413
  {
48167
50414
  "color": "{base.color.neutral.0}",
48168
50415
  "alpha": 0.8,
48169
- "offsetX": "0px",
48170
- "offsetY": "3px",
48171
- "blur": "6px",
48172
- "spread": "0px"
50416
+ "offsetX": {
50417
+ "value": 0,
50418
+ "unit": "px"
50419
+ },
50420
+ "offsetY": {
50421
+ "value": 3,
50422
+ "unit": "px"
50423
+ },
50424
+ "blur": {
50425
+ "value": 6,
50426
+ "unit": "px"
50427
+ },
50428
+ "spread": {
50429
+ "value": 0,
50430
+ "unit": "px"
50431
+ }
48173
50432
  }
48174
50433
  ],
48175
50434
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48176
50435
  "isSource": true,
48177
50436
  "$type": "shadow"
48178
50437
  }
50438
+ },
50439
+ "org.primer.llm": {
50440
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50441
+ "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."
48179
50442
  }
48180
50443
  },
48181
50444
  "key": "{shadow.resting.medium}"
@@ -48186,8 +50449,9 @@
48186
50449
  },
48187
50450
  "shadow-resting-small": {
48188
50451
  "key": "{shadow.resting.small}",
48189
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
50452
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48190
50453
  "$type": "shadow",
50454
+ "$description": "Small resting shadow for buttons and interactive elements",
48191
50455
  "$extensions": {
48192
50456
  "org.primer.figma": {
48193
50457
  "collection": "mode",
@@ -48199,19 +50463,43 @@
48199
50463
  {
48200
50464
  "color": "#010409",
48201
50465
  "alpha": 0.6,
48202
- "offsetX": "0px",
48203
- "offsetY": "1px",
48204
- "blur": "1px",
48205
- "spread": "0px",
50466
+ "offsetX": {
50467
+ "value": 0,
50468
+ "unit": "px"
50469
+ },
50470
+ "offsetY": {
50471
+ "value": 1,
50472
+ "unit": "px"
50473
+ },
50474
+ "blur": {
50475
+ "value": 1,
50476
+ "unit": "px"
50477
+ },
50478
+ "spread": {
50479
+ "value": 0,
50480
+ "unit": "px"
50481
+ },
48206
50482
  "inset": false
48207
50483
  },
48208
50484
  {
48209
50485
  "color": "#010409",
48210
50486
  "alpha": 0.6,
48211
- "offsetX": "0px",
48212
- "offsetY": "1px",
48213
- "blur": "3px",
48214
- "spread": "0px",
50487
+ "offsetX": {
50488
+ "value": 0,
50489
+ "unit": "px"
50490
+ },
50491
+ "offsetY": {
50492
+ "value": 1,
50493
+ "unit": "px"
50494
+ },
50495
+ "blur": {
50496
+ "value": 3,
50497
+ "unit": "px"
50498
+ },
50499
+ "spread": {
50500
+ "value": 0,
50501
+ "unit": "px"
50502
+ },
48215
50503
  "inset": false
48216
50504
  }
48217
50505
  ],
@@ -48219,6 +50507,10 @@
48219
50507
  "isSource": true,
48220
50508
  "$type": "shadow"
48221
50509
  }
50510
+ },
50511
+ "org.primer.llm": {
50512
+ "usage": ["button", "interactive-card", "clickable-element"],
50513
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48222
50514
  }
48223
50515
  },
48224
50516
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48228,23 +50520,48 @@
48228
50520
  {
48229
50521
  "color": "{base.color.neutral.0}",
48230
50522
  "alpha": 0.6,
48231
- "offsetX": "0px",
48232
- "offsetY": "1px",
48233
- "blur": "1px",
48234
- "spread": "0px",
50523
+ "offsetX": {
50524
+ "value": 0,
50525
+ "unit": "px"
50526
+ },
50527
+ "offsetY": {
50528
+ "value": 1,
50529
+ "unit": "px"
50530
+ },
50531
+ "blur": {
50532
+ "value": 1,
50533
+ "unit": "px"
50534
+ },
50535
+ "spread": {
50536
+ "value": 0,
50537
+ "unit": "px"
50538
+ },
48235
50539
  "inset": false
48236
50540
  },
48237
50541
  {
48238
50542
  "color": "{base.color.neutral.0}",
48239
50543
  "alpha": 0.6,
48240
- "offsetX": "0px",
48241
- "offsetY": "1px",
48242
- "blur": "3px",
48243
- "spread": "0px",
50544
+ "offsetX": {
50545
+ "value": 0,
50546
+ "unit": "px"
50547
+ },
50548
+ "offsetY": {
50549
+ "value": 1,
50550
+ "unit": "px"
50551
+ },
50552
+ "blur": {
50553
+ "value": 3,
50554
+ "unit": "px"
50555
+ },
50556
+ "spread": {
50557
+ "value": 0,
50558
+ "unit": "px"
50559
+ },
48244
50560
  "inset": false
48245
50561
  }
48246
50562
  ],
48247
50563
  "$type": "shadow",
50564
+ "$description": "Small resting shadow for buttons and interactive elements",
48248
50565
  "$extensions": {
48249
50566
  "org.primer.figma": {
48250
50567
  "collection": "mode",
@@ -48256,19 +50573,43 @@
48256
50573
  {
48257
50574
  "color": "{base.color.neutral.0}",
48258
50575
  "alpha": 0.6,
48259
- "offsetX": "0px",
48260
- "offsetY": "1px",
48261
- "blur": "1px",
48262
- "spread": "0px",
50576
+ "offsetX": {
50577
+ "value": 0,
50578
+ "unit": "px"
50579
+ },
50580
+ "offsetY": {
50581
+ "value": 1,
50582
+ "unit": "px"
50583
+ },
50584
+ "blur": {
50585
+ "value": 1,
50586
+ "unit": "px"
50587
+ },
50588
+ "spread": {
50589
+ "value": 0,
50590
+ "unit": "px"
50591
+ },
48263
50592
  "inset": false
48264
50593
  },
48265
50594
  {
48266
50595
  "color": "{base.color.neutral.0}",
48267
50596
  "alpha": 0.6,
48268
- "offsetX": "0px",
48269
- "offsetY": "1px",
48270
- "blur": "3px",
48271
- "spread": "0px",
50597
+ "offsetX": {
50598
+ "value": 0,
50599
+ "unit": "px"
50600
+ },
50601
+ "offsetY": {
50602
+ "value": 1,
50603
+ "unit": "px"
50604
+ },
50605
+ "blur": {
50606
+ "value": 3,
50607
+ "unit": "px"
50608
+ },
50609
+ "spread": {
50610
+ "value": 0,
50611
+ "unit": "px"
50612
+ },
48272
50613
  "inset": false
48273
50614
  }
48274
50615
  ],
@@ -48276,6 +50617,10 @@
48276
50617
  "isSource": true,
48277
50618
  "$type": "shadow"
48278
50619
  }
50620
+ },
50621
+ "org.primer.llm": {
50622
+ "usage": ["button", "interactive-card", "clickable-element"],
50623
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48279
50624
  }
48280
50625
  },
48281
50626
  "key": "{shadow.resting.small}"
@@ -48286,8 +50631,9 @@
48286
50631
  },
48287
50632
  "shadow-resting-xsmall": {
48288
50633
  "key": "{shadow.resting.xsmall}",
48289
- "$value": "0px 1px 1px 0px #010409cc",
50634
+ "$value": "0 1px 1px 0 #010409cc",
48290
50635
  "$type": "shadow",
50636
+ "$description": "Extra small resting shadow for minimal elevation",
48291
50637
  "$extensions": {
48292
50638
  "org.primer.figma": {
48293
50639
  "collection": "mode",
@@ -48298,16 +50644,32 @@
48298
50644
  "$value": {
48299
50645
  "color": "#010409",
48300
50646
  "alpha": 0.8,
48301
- "offsetX": "0px",
48302
- "offsetY": "1px",
48303
- "blur": "1px",
48304
- "spread": "0px",
50647
+ "offsetX": {
50648
+ "value": 0,
50649
+ "unit": "px"
50650
+ },
50651
+ "offsetY": {
50652
+ "value": 1,
50653
+ "unit": "px"
50654
+ },
50655
+ "blur": {
50656
+ "value": 1,
50657
+ "unit": "px"
50658
+ },
50659
+ "spread": {
50660
+ "value": 0,
50661
+ "unit": "px"
50662
+ },
48305
50663
  "inset": false
48306
50664
  },
48307
50665
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48308
50666
  "isSource": true,
48309
50667
  "$type": "shadow"
48310
50668
  }
50669
+ },
50670
+ "org.primer.llm": {
50671
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50672
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48311
50673
  }
48312
50674
  },
48313
50675
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48316,13 +50678,26 @@
48316
50678
  "$value": {
48317
50679
  "color": "{base.color.neutral.0}",
48318
50680
  "alpha": 0.8,
48319
- "offsetX": "0px",
48320
- "offsetY": "1px",
48321
- "blur": "1px",
48322
- "spread": "0px",
50681
+ "offsetX": {
50682
+ "value": 0,
50683
+ "unit": "px"
50684
+ },
50685
+ "offsetY": {
50686
+ "value": 1,
50687
+ "unit": "px"
50688
+ },
50689
+ "blur": {
50690
+ "value": 1,
50691
+ "unit": "px"
50692
+ },
50693
+ "spread": {
50694
+ "value": 0,
50695
+ "unit": "px"
50696
+ },
48323
50697
  "inset": false
48324
50698
  },
48325
50699
  "$type": "shadow",
50700
+ "$description": "Extra small resting shadow for minimal elevation",
48326
50701
  "$extensions": {
48327
50702
  "org.primer.figma": {
48328
50703
  "collection": "mode",
@@ -48333,16 +50708,32 @@
48333
50708
  "$value": {
48334
50709
  "color": "{base.color.neutral.0}",
48335
50710
  "alpha": 0.8,
48336
- "offsetX": "0px",
48337
- "offsetY": "1px",
48338
- "blur": "1px",
48339
- "spread": "0px",
50711
+ "offsetX": {
50712
+ "value": 0,
50713
+ "unit": "px"
50714
+ },
50715
+ "offsetY": {
50716
+ "value": 1,
50717
+ "unit": "px"
50718
+ },
50719
+ "blur": {
50720
+ "value": 1,
50721
+ "unit": "px"
50722
+ },
50723
+ "spread": {
50724
+ "value": 0,
50725
+ "unit": "px"
50726
+ },
48340
50727
  "inset": false
48341
50728
  },
48342
50729
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48343
50730
  "isSource": true,
48344
50731
  "$type": "shadow"
48345
50732
  }
50733
+ },
50734
+ "org.primer.llm": {
50735
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50736
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48346
50737
  }
48347
50738
  },
48348
50739
  "key": "{shadow.resting.xsmall}"