@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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 #da3633",
2633
+ "$value": {
2634
+ "color": "#da3633",
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 #f8514966",
2652
+ "$value": {
2653
+ "color": "#f8514966",
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 #da3633",
2671
+ "$value": {
2672
+ "color": "#da3633",
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 #f8514966",
2694
+ "$value": {
2695
+ "color": "#f8514966",
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 #da3633",
2939
+ "$value": {
2940
+ "color": "#da3633",
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 #f8514966",
2962
+ "$value": {
2963
+ "color": "#f8514966",
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
  ],
@@ -37254,6 +37630,10 @@
37254
37630
  },
37255
37631
  "org.primer.overrides": {
37256
37632
  "dark": "#010409"
37633
+ },
37634
+ "org.primer.llm": {
37635
+ "doNotUse": true,
37636
+ "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."
37257
37637
  }
37258
37638
  },
37259
37639
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37270,6 +37650,10 @@
37270
37650
  },
37271
37651
  "org.primer.overrides": {
37272
37652
  "dark": "{base.color.neutral.0}"
37653
+ },
37654
+ "org.primer.llm": {
37655
+ "doNotUse": true,
37656
+ "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."
37273
37657
  }
37274
37658
  },
37275
37659
  "key": "{fgColor.black}"
@@ -38243,6 +38627,10 @@
38243
38627
  },
38244
38628
  "org.primer.overrides": {
38245
38629
  "dark": "#ffffff"
38630
+ },
38631
+ "org.primer.llm": {
38632
+ "doNotUse": true,
38633
+ "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."
38246
38634
  }
38247
38635
  },
38248
38636
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38259,6 +38647,10 @@
38259
38647
  },
38260
38648
  "org.primer.overrides": {
38261
38649
  "dark": "{base.color.neutral.13}"
38650
+ },
38651
+ "org.primer.llm": {
38652
+ "doNotUse": true,
38653
+ "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."
38262
38654
  }
38263
38655
  },
38264
38656
  "key": "{fgColor.white}"
@@ -38284,7 +38676,10 @@
38284
38676
  "$value": {
38285
38677
  "color": "{focus.outlineColor}",
38286
38678
  "style": "solid",
38287
- "width": "2px"
38679
+ "width": {
38680
+ "value": 2,
38681
+ "unit": "px"
38682
+ }
38288
38683
  },
38289
38684
  "$type": "border",
38290
38685
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47443,7 +47838,7 @@
47443
47838
  },
47444
47839
  "shadow-floating-large": {
47445
47840
  "key": "{shadow.floating.large}",
47446
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47841
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47447
47842
  "$type": "shadow",
47448
47843
  "$description": "Large floating shadow for modals and dialogs",
47449
47844
  "$extensions": {
@@ -47457,18 +47852,183 @@
47457
47852
  {
47458
47853
  "color": "#3d444db3",
47459
47854
  "alpha": 1,
47460
- "offsetX": "0px",
47461
- "offsetY": "0px",
47462
- "blur": "0px",
47463
- "spread": "1px"
47855
+ "offsetX": {
47856
+ "value": 0,
47857
+ "unit": "px"
47858
+ },
47859
+ "offsetY": {
47860
+ "value": 0,
47861
+ "unit": "px"
47862
+ },
47863
+ "blur": {
47864
+ "value": 0,
47865
+ "unit": "px"
47866
+ },
47867
+ "spread": {
47868
+ "value": 1,
47869
+ "unit": "px"
47870
+ }
47464
47871
  },
47465
47872
  {
47466
47873
  "color": "#010409",
47467
47874
  "alpha": 1,
47468
- "offsetX": "0px",
47469
- "offsetY": "24px",
47470
- "blur": "48px",
47471
- "spread": "0px"
47875
+ "offsetX": {
47876
+ "value": 0,
47877
+ "unit": "px"
47878
+ },
47879
+ "offsetY": {
47880
+ "value": 24,
47881
+ "unit": "px"
47882
+ },
47883
+ "blur": {
47884
+ "value": 48,
47885
+ "unit": "px"
47886
+ },
47887
+ "spread": {
47888
+ "value": 0,
47889
+ "unit": "px"
47890
+ }
47891
+ }
47892
+ ],
47893
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47894
+ "isSource": true,
47895
+ "$type": "shadow"
47896
+ },
47897
+ "light-high-contrast": {
47898
+ "$value": [
47899
+ {
47900
+ "color": "#3d444db3",
47901
+ "alpha": 1,
47902
+ "offsetX": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ },
47906
+ "offsetY": {
47907
+ "value": 0,
47908
+ "unit": "px"
47909
+ },
47910
+ "blur": {
47911
+ "value": 0,
47912
+ "unit": "px"
47913
+ },
47914
+ "spread": {
47915
+ "value": 1,
47916
+ "unit": "px"
47917
+ }
47918
+ },
47919
+ {
47920
+ "color": "#f0f6fc",
47921
+ "alpha": 0.24,
47922
+ "offsetX": {
47923
+ "value": 0,
47924
+ "unit": "px"
47925
+ },
47926
+ "offsetY": {
47927
+ "value": 40,
47928
+ "unit": "px"
47929
+ },
47930
+ "blur": {
47931
+ "value": 80,
47932
+ "unit": "px"
47933
+ },
47934
+ "spread": {
47935
+ "value": 0,
47936
+ "unit": "px"
47937
+ }
47938
+ }
47939
+ ],
47940
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47941
+ "isSource": true,
47942
+ "$type": "shadow"
47943
+ },
47944
+ "light-protanopia-deuteranopia-high-contrast": {
47945
+ "$value": [
47946
+ {
47947
+ "color": "#3d444db3",
47948
+ "alpha": 1,
47949
+ "offsetX": {
47950
+ "value": 0,
47951
+ "unit": "px"
47952
+ },
47953
+ "offsetY": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ },
47957
+ "blur": {
47958
+ "value": 0,
47959
+ "unit": "px"
47960
+ },
47961
+ "spread": {
47962
+ "value": 1,
47963
+ "unit": "px"
47964
+ }
47965
+ },
47966
+ {
47967
+ "color": "#f0f6fc",
47968
+ "alpha": 0.24,
47969
+ "offsetX": {
47970
+ "value": 0,
47971
+ "unit": "px"
47972
+ },
47973
+ "offsetY": {
47974
+ "value": 40,
47975
+ "unit": "px"
47976
+ },
47977
+ "blur": {
47978
+ "value": 80,
47979
+ "unit": "px"
47980
+ },
47981
+ "spread": {
47982
+ "value": 0,
47983
+ "unit": "px"
47984
+ }
47985
+ }
47986
+ ],
47987
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47988
+ "isSource": true,
47989
+ "$type": "shadow"
47990
+ },
47991
+ "light-tritanopia-high-contrast": {
47992
+ "$value": [
47993
+ {
47994
+ "color": "#3d444db3",
47995
+ "alpha": 1,
47996
+ "offsetX": {
47997
+ "value": 0,
47998
+ "unit": "px"
47999
+ },
48000
+ "offsetY": {
48001
+ "value": 0,
48002
+ "unit": "px"
48003
+ },
48004
+ "blur": {
48005
+ "value": 0,
48006
+ "unit": "px"
48007
+ },
48008
+ "spread": {
48009
+ "value": 1,
48010
+ "unit": "px"
48011
+ }
48012
+ },
48013
+ {
48014
+ "color": "#f0f6fc",
48015
+ "alpha": 0.24,
48016
+ "offsetX": {
48017
+ "value": 0,
48018
+ "unit": "px"
48019
+ },
48020
+ "offsetY": {
48021
+ "value": 40,
48022
+ "unit": "px"
48023
+ },
48024
+ "blur": {
48025
+ "value": 80,
48026
+ "unit": "px"
48027
+ },
48028
+ "spread": {
48029
+ "value": 0,
48030
+ "unit": "px"
48031
+ }
47472
48032
  }
47473
48033
  ],
47474
48034
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47488,18 +48048,42 @@
47488
48048
  {
47489
48049
  "color": "{overlay.borderColor}",
47490
48050
  "alpha": 1,
47491
- "offsetX": "0px",
47492
- "offsetY": "0px",
47493
- "blur": "0px",
47494
- "spread": "1px"
48051
+ "offsetX": {
48052
+ "value": 0,
48053
+ "unit": "px"
48054
+ },
48055
+ "offsetY": {
48056
+ "value": 0,
48057
+ "unit": "px"
48058
+ },
48059
+ "blur": {
48060
+ "value": 0,
48061
+ "unit": "px"
48062
+ },
48063
+ "spread": {
48064
+ "value": 1,
48065
+ "unit": "px"
48066
+ }
47495
48067
  },
47496
48068
  {
47497
48069
  "color": "{base.color.neutral.0}",
47498
48070
  "alpha": 1,
47499
- "offsetX": "0px",
47500
- "offsetY": "24px",
47501
- "blur": "48px",
47502
- "spread": "0px"
48071
+ "offsetX": {
48072
+ "value": 0,
48073
+ "unit": "px"
48074
+ },
48075
+ "offsetY": {
48076
+ "value": 24,
48077
+ "unit": "px"
48078
+ },
48079
+ "blur": {
48080
+ "value": 48,
48081
+ "unit": "px"
48082
+ },
48083
+ "spread": {
48084
+ "value": 0,
48085
+ "unit": "px"
48086
+ }
47503
48087
  }
47504
48088
  ],
47505
48089
  "$type": "shadow",
@@ -47515,18 +48099,183 @@
47515
48099
  {
47516
48100
  "color": "{overlay.borderColor}",
47517
48101
  "alpha": 1,
47518
- "offsetX": "0px",
47519
- "offsetY": "0px",
47520
- "blur": "0px",
47521
- "spread": "1px"
48102
+ "offsetX": {
48103
+ "value": 0,
48104
+ "unit": "px"
48105
+ },
48106
+ "offsetY": {
48107
+ "value": 0,
48108
+ "unit": "px"
48109
+ },
48110
+ "blur": {
48111
+ "value": 0,
48112
+ "unit": "px"
48113
+ },
48114
+ "spread": {
48115
+ "value": 1,
48116
+ "unit": "px"
48117
+ }
47522
48118
  },
47523
48119
  {
47524
48120
  "color": "{base.color.neutral.0}",
47525
48121
  "alpha": 1,
47526
- "offsetX": "0px",
47527
- "offsetY": "24px",
47528
- "blur": "48px",
47529
- "spread": "0px"
48122
+ "offsetX": {
48123
+ "value": 0,
48124
+ "unit": "px"
48125
+ },
48126
+ "offsetY": {
48127
+ "value": 24,
48128
+ "unit": "px"
48129
+ },
48130
+ "blur": {
48131
+ "value": 48,
48132
+ "unit": "px"
48133
+ },
48134
+ "spread": {
48135
+ "value": 0,
48136
+ "unit": "px"
48137
+ }
48138
+ }
48139
+ ],
48140
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48141
+ "isSource": true,
48142
+ "$type": "shadow"
48143
+ },
48144
+ "light-high-contrast": {
48145
+ "$value": [
48146
+ {
48147
+ "color": "{overlay.borderColor}",
48148
+ "alpha": 1,
48149
+ "offsetX": {
48150
+ "value": 0,
48151
+ "unit": "px"
48152
+ },
48153
+ "offsetY": {
48154
+ "value": 0,
48155
+ "unit": "px"
48156
+ },
48157
+ "blur": {
48158
+ "value": 0,
48159
+ "unit": "px"
48160
+ },
48161
+ "spread": {
48162
+ "value": 1,
48163
+ "unit": "px"
48164
+ }
48165
+ },
48166
+ {
48167
+ "color": "{base.color.neutral.12}",
48168
+ "alpha": 0.24,
48169
+ "offsetX": {
48170
+ "value": 0,
48171
+ "unit": "px"
48172
+ },
48173
+ "offsetY": {
48174
+ "value": 40,
48175
+ "unit": "px"
48176
+ },
48177
+ "blur": {
48178
+ "value": 80,
48179
+ "unit": "px"
48180
+ },
48181
+ "spread": {
48182
+ "value": 0,
48183
+ "unit": "px"
48184
+ }
48185
+ }
48186
+ ],
48187
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48188
+ "isSource": true,
48189
+ "$type": "shadow"
48190
+ },
48191
+ "light-protanopia-deuteranopia-high-contrast": {
48192
+ "$value": [
48193
+ {
48194
+ "color": "{overlay.borderColor}",
48195
+ "alpha": 1,
48196
+ "offsetX": {
48197
+ "value": 0,
48198
+ "unit": "px"
48199
+ },
48200
+ "offsetY": {
48201
+ "value": 0,
48202
+ "unit": "px"
48203
+ },
48204
+ "blur": {
48205
+ "value": 0,
48206
+ "unit": "px"
48207
+ },
48208
+ "spread": {
48209
+ "value": 1,
48210
+ "unit": "px"
48211
+ }
48212
+ },
48213
+ {
48214
+ "color": "{base.color.neutral.12}",
48215
+ "alpha": 0.24,
48216
+ "offsetX": {
48217
+ "value": 0,
48218
+ "unit": "px"
48219
+ },
48220
+ "offsetY": {
48221
+ "value": 40,
48222
+ "unit": "px"
48223
+ },
48224
+ "blur": {
48225
+ "value": 80,
48226
+ "unit": "px"
48227
+ },
48228
+ "spread": {
48229
+ "value": 0,
48230
+ "unit": "px"
48231
+ }
48232
+ }
48233
+ ],
48234
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48235
+ "isSource": true,
48236
+ "$type": "shadow"
48237
+ },
48238
+ "light-tritanopia-high-contrast": {
48239
+ "$value": [
48240
+ {
48241
+ "color": "{overlay.borderColor}",
48242
+ "alpha": 1,
48243
+ "offsetX": {
48244
+ "value": 0,
48245
+ "unit": "px"
48246
+ },
48247
+ "offsetY": {
48248
+ "value": 0,
48249
+ "unit": "px"
48250
+ },
48251
+ "blur": {
48252
+ "value": 0,
48253
+ "unit": "px"
48254
+ },
48255
+ "spread": {
48256
+ "value": 1,
48257
+ "unit": "px"
48258
+ }
48259
+ },
48260
+ {
48261
+ "color": "{base.color.neutral.12}",
48262
+ "alpha": 0.24,
48263
+ "offsetX": {
48264
+ "value": 0,
48265
+ "unit": "px"
48266
+ },
48267
+ "offsetY": {
48268
+ "value": 40,
48269
+ "unit": "px"
48270
+ },
48271
+ "blur": {
48272
+ "value": 80,
48273
+ "unit": "px"
48274
+ },
48275
+ "spread": {
48276
+ "value": 0,
48277
+ "unit": "px"
48278
+ }
47530
48279
  }
47531
48280
  ],
47532
48281
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47547,8 +48296,9 @@
47547
48296
  },
47548
48297
  "shadow-floating-legacy": {
47549
48298
  "key": "{shadow.floating.legacy}",
47550
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48299
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47551
48300
  "$type": "shadow",
48301
+ "$description": "Legacy floating shadow for backward compatibility",
47552
48302
  "$extensions": {
47553
48303
  "org.primer.figma": {},
47554
48304
  "org.primer.overrides": {
@@ -47557,24 +48307,52 @@
47557
48307
  {
47558
48308
  "color": "#010409",
47559
48309
  "alpha": 0.4,
47560
- "offsetX": "0px",
47561
- "offsetY": "6px",
47562
- "blur": "12px",
47563
- "spread": "-3px"
48310
+ "offsetX": {
48311
+ "value": 0,
48312
+ "unit": "px"
48313
+ },
48314
+ "offsetY": {
48315
+ "value": 6,
48316
+ "unit": "px"
48317
+ },
48318
+ "blur": {
48319
+ "value": 12,
48320
+ "unit": "px"
48321
+ },
48322
+ "spread": {
48323
+ "value": -3,
48324
+ "unit": "px"
48325
+ }
47564
48326
  },
47565
48327
  {
47566
48328
  "color": "#010409",
47567
48329
  "alpha": 0.4,
47568
- "offsetX": "0px",
47569
- "offsetY": "6px",
47570
- "blur": "18px",
47571
- "spread": "0px"
48330
+ "offsetX": {
48331
+ "value": 0,
48332
+ "unit": "px"
48333
+ },
48334
+ "offsetY": {
48335
+ "value": 6,
48336
+ "unit": "px"
48337
+ },
48338
+ "blur": {
48339
+ "value": 18,
48340
+ "unit": "px"
48341
+ },
48342
+ "spread": {
48343
+ "value": 0,
48344
+ "unit": "px"
48345
+ }
47572
48346
  }
47573
48347
  ],
47574
48348
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47575
48349
  "isSource": true,
47576
48350
  "$type": "shadow"
47577
48351
  }
48352
+ },
48353
+ "org.primer.llm": {
48354
+ "usage": ["legacy-component", "backward-compatibility"],
48355
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47578
48356
  }
47579
48357
  },
47580
48358
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47584,21 +48362,46 @@
47584
48362
  {
47585
48363
  "color": "{base.color.neutral.0}",
47586
48364
  "alpha": 0.4,
47587
- "offsetX": "0px",
47588
- "offsetY": "6px",
47589
- "blur": "12px",
47590
- "spread": "-3px"
48365
+ "offsetX": {
48366
+ "value": 0,
48367
+ "unit": "px"
48368
+ },
48369
+ "offsetY": {
48370
+ "value": 6,
48371
+ "unit": "px"
48372
+ },
48373
+ "blur": {
48374
+ "value": 12,
48375
+ "unit": "px"
48376
+ },
48377
+ "spread": {
48378
+ "value": -3,
48379
+ "unit": "px"
48380
+ }
47591
48381
  },
47592
48382
  {
47593
48383
  "color": "{base.color.neutral.0}",
47594
48384
  "alpha": 0.4,
47595
- "offsetX": "0px",
47596
- "offsetY": "6px",
47597
- "blur": "18px",
47598
- "spread": "0px"
48385
+ "offsetX": {
48386
+ "value": 0,
48387
+ "unit": "px"
48388
+ },
48389
+ "offsetY": {
48390
+ "value": 6,
48391
+ "unit": "px"
48392
+ },
48393
+ "blur": {
48394
+ "value": 18,
48395
+ "unit": "px"
48396
+ },
48397
+ "spread": {
48398
+ "value": 0,
48399
+ "unit": "px"
48400
+ }
47599
48401
  }
47600
48402
  ],
47601
48403
  "$type": "shadow",
48404
+ "$description": "Legacy floating shadow for backward compatibility",
47602
48405
  "$extensions": {
47603
48406
  "org.primer.figma": {},
47604
48407
  "org.primer.overrides": {
@@ -47607,24 +48410,52 @@
47607
48410
  {
47608
48411
  "color": "{base.color.neutral.0}",
47609
48412
  "alpha": 0.4,
47610
- "offsetX": "0px",
47611
- "offsetY": "6px",
47612
- "blur": "12px",
47613
- "spread": "-3px"
48413
+ "offsetX": {
48414
+ "value": 0,
48415
+ "unit": "px"
48416
+ },
48417
+ "offsetY": {
48418
+ "value": 6,
48419
+ "unit": "px"
48420
+ },
48421
+ "blur": {
48422
+ "value": 12,
48423
+ "unit": "px"
48424
+ },
48425
+ "spread": {
48426
+ "value": -3,
48427
+ "unit": "px"
48428
+ }
47614
48429
  },
47615
48430
  {
47616
48431
  "color": "{base.color.neutral.0}",
47617
48432
  "alpha": 0.4,
47618
- "offsetX": "0px",
47619
- "offsetY": "6px",
47620
- "blur": "18px",
47621
- "spread": "0px"
48433
+ "offsetX": {
48434
+ "value": 0,
48435
+ "unit": "px"
48436
+ },
48437
+ "offsetY": {
48438
+ "value": 6,
48439
+ "unit": "px"
48440
+ },
48441
+ "blur": {
48442
+ "value": 18,
48443
+ "unit": "px"
48444
+ },
48445
+ "spread": {
48446
+ "value": 0,
48447
+ "unit": "px"
48448
+ }
47622
48449
  }
47623
48450
  ],
47624
48451
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47625
48452
  "isSource": true,
47626
48453
  "$type": "shadow"
47627
48454
  }
48455
+ },
48456
+ "org.primer.llm": {
48457
+ "usage": ["legacy-component", "backward-compatibility"],
48458
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47628
48459
  }
47629
48460
  },
47630
48461
  "key": "{shadow.floating.legacy}"
@@ -47635,8 +48466,9 @@
47635
48466
  },
47636
48467
  "shadow-floating-medium": {
47637
48468
  "key": "{shadow.floating.medium}",
47638
- "$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",
48469
+ "$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",
47639
48470
  "$type": "shadow",
48471
+ "$description": "Medium floating shadow for popovers and action menus",
47640
48472
  "$extensions": {
47641
48473
  "org.primer.figma": {
47642
48474
  "collection": "mode",
@@ -47648,48 +48480,433 @@
47648
48480
  {
47649
48481
  "color": "#3d444db3",
47650
48482
  "alpha": 1,
47651
- "offsetX": "0px",
47652
- "offsetY": "0px",
47653
- "blur": "0px",
47654
- "spread": "1px"
48483
+ "offsetX": {
48484
+ "value": 0,
48485
+ "unit": "px"
48486
+ },
48487
+ "offsetY": {
48488
+ "value": 0,
48489
+ "unit": "px"
48490
+ },
48491
+ "blur": {
48492
+ "value": 0,
48493
+ "unit": "px"
48494
+ },
48495
+ "spread": {
48496
+ "value": 1,
48497
+ "unit": "px"
48498
+ }
47655
48499
  },
47656
48500
  {
47657
48501
  "color": "#010409",
47658
48502
  "alpha": 0.4,
47659
- "offsetX": "0px",
47660
- "offsetY": "8px",
47661
- "blur": "16px",
47662
- "spread": "-4px"
48503
+ "offsetX": {
48504
+ "value": 0,
48505
+ "unit": "px"
48506
+ },
48507
+ "offsetY": {
48508
+ "value": 8,
48509
+ "unit": "px"
48510
+ },
48511
+ "blur": {
48512
+ "value": 16,
48513
+ "unit": "px"
48514
+ },
48515
+ "spread": {
48516
+ "value": -4,
48517
+ "unit": "px"
48518
+ }
47663
48519
  },
47664
48520
  {
47665
48521
  "color": "#010409",
47666
48522
  "alpha": 0.4,
47667
- "offsetX": "0px",
47668
- "offsetY": "4px",
47669
- "blur": "32px",
47670
- "spread": "-4px"
48523
+ "offsetX": {
48524
+ "value": 0,
48525
+ "unit": "px"
48526
+ },
48527
+ "offsetY": {
48528
+ "value": 4,
48529
+ "unit": "px"
48530
+ },
48531
+ "blur": {
48532
+ "value": 32,
48533
+ "unit": "px"
48534
+ },
48535
+ "spread": {
48536
+ "value": -4,
48537
+ "unit": "px"
48538
+ }
47671
48539
  },
47672
48540
  {
47673
48541
  "color": "#010409",
47674
48542
  "alpha": 0.4,
47675
- "offsetX": "0px",
47676
- "offsetY": "24px",
47677
- "blur": "48px",
47678
- "spread": "-12px"
48543
+ "offsetX": {
48544
+ "value": 0,
48545
+ "unit": "px"
48546
+ },
48547
+ "offsetY": {
48548
+ "value": 24,
48549
+ "unit": "px"
48550
+ },
48551
+ "blur": {
48552
+ "value": 48,
48553
+ "unit": "px"
48554
+ },
48555
+ "spread": {
48556
+ "value": -12,
48557
+ "unit": "px"
48558
+ }
47679
48559
  },
47680
48560
  {
47681
48561
  "color": "#010409",
47682
48562
  "alpha": 0.4,
47683
- "offsetX": "0px",
47684
- "offsetY": "48px",
47685
- "blur": "96px",
47686
- "spread": "-24px"
48563
+ "offsetX": {
48564
+ "value": 0,
48565
+ "unit": "px"
48566
+ },
48567
+ "offsetY": {
48568
+ "value": 48,
48569
+ "unit": "px"
48570
+ },
48571
+ "blur": {
48572
+ "value": 96,
48573
+ "unit": "px"
48574
+ },
48575
+ "spread": {
48576
+ "value": -24,
48577
+ "unit": "px"
48578
+ }
48579
+ }
48580
+ ],
48581
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48582
+ "isSource": true,
48583
+ "$type": "shadow"
48584
+ },
48585
+ "light-high-contrast": {
48586
+ "$value": [
48587
+ {
48588
+ "color": "#3d444db3",
48589
+ "alpha": 1,
48590
+ "offsetX": {
48591
+ "value": 0,
48592
+ "unit": "px"
48593
+ },
48594
+ "offsetY": {
48595
+ "value": 0,
48596
+ "unit": "px"
48597
+ },
48598
+ "blur": {
48599
+ "value": 0,
48600
+ "unit": "px"
48601
+ },
48602
+ "spread": {
48603
+ "value": 1,
48604
+ "unit": "px"
48605
+ }
48606
+ },
48607
+ {
48608
+ "color": "#f0f6fc",
48609
+ "alpha": 0.08,
48610
+ "offsetX": {
48611
+ "value": 0,
48612
+ "unit": "px"
48613
+ },
48614
+ "offsetY": {
48615
+ "value": 8,
48616
+ "unit": "px"
48617
+ },
48618
+ "blur": {
48619
+ "value": 16,
48620
+ "unit": "px"
48621
+ },
48622
+ "spread": {
48623
+ "value": -4,
48624
+ "unit": "px"
48625
+ }
48626
+ },
48627
+ {
48628
+ "color": "#f0f6fc",
48629
+ "alpha": 0.08,
48630
+ "offsetX": {
48631
+ "value": 0,
48632
+ "unit": "px"
48633
+ },
48634
+ "offsetY": {
48635
+ "value": 4,
48636
+ "unit": "px"
48637
+ },
48638
+ "blur": {
48639
+ "value": 32,
48640
+ "unit": "px"
48641
+ },
48642
+ "spread": {
48643
+ "value": -4,
48644
+ "unit": "px"
48645
+ }
48646
+ },
48647
+ {
48648
+ "color": "#f0f6fc",
48649
+ "alpha": 0.08,
48650
+ "offsetX": {
48651
+ "value": 0,
48652
+ "unit": "px"
48653
+ },
48654
+ "offsetY": {
48655
+ "value": 24,
48656
+ "unit": "px"
48657
+ },
48658
+ "blur": {
48659
+ "value": 48,
48660
+ "unit": "px"
48661
+ },
48662
+ "spread": {
48663
+ "value": -12,
48664
+ "unit": "px"
48665
+ }
48666
+ },
48667
+ {
48668
+ "color": "#f0f6fc",
48669
+ "alpha": 0.08,
48670
+ "offsetX": {
48671
+ "value": 0,
48672
+ "unit": "px"
48673
+ },
48674
+ "offsetY": {
48675
+ "value": 48,
48676
+ "unit": "px"
48677
+ },
48678
+ "blur": {
48679
+ "value": 96,
48680
+ "unit": "px"
48681
+ },
48682
+ "spread": {
48683
+ "value": -24,
48684
+ "unit": "px"
48685
+ }
48686
+ }
48687
+ ],
48688
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48689
+ "isSource": true,
48690
+ "$type": "shadow"
48691
+ },
48692
+ "light-protanopia-deuteranopia-high-contrast": {
48693
+ "$value": [
48694
+ {
48695
+ "color": "#3d444db3",
48696
+ "alpha": 1,
48697
+ "offsetX": {
48698
+ "value": 0,
48699
+ "unit": "px"
48700
+ },
48701
+ "offsetY": {
48702
+ "value": 0,
48703
+ "unit": "px"
48704
+ },
48705
+ "blur": {
48706
+ "value": 0,
48707
+ "unit": "px"
48708
+ },
48709
+ "spread": {
48710
+ "value": 1,
48711
+ "unit": "px"
48712
+ }
48713
+ },
48714
+ {
48715
+ "color": "#f0f6fc",
48716
+ "alpha": 0.08,
48717
+ "offsetX": {
48718
+ "value": 0,
48719
+ "unit": "px"
48720
+ },
48721
+ "offsetY": {
48722
+ "value": 8,
48723
+ "unit": "px"
48724
+ },
48725
+ "blur": {
48726
+ "value": 16,
48727
+ "unit": "px"
48728
+ },
48729
+ "spread": {
48730
+ "value": -4,
48731
+ "unit": "px"
48732
+ }
48733
+ },
48734
+ {
48735
+ "color": "#f0f6fc",
48736
+ "alpha": 0.08,
48737
+ "offsetX": {
48738
+ "value": 0,
48739
+ "unit": "px"
48740
+ },
48741
+ "offsetY": {
48742
+ "value": 4,
48743
+ "unit": "px"
48744
+ },
48745
+ "blur": {
48746
+ "value": 32,
48747
+ "unit": "px"
48748
+ },
48749
+ "spread": {
48750
+ "value": -4,
48751
+ "unit": "px"
48752
+ }
48753
+ },
48754
+ {
48755
+ "color": "#f0f6fc",
48756
+ "alpha": 0.08,
48757
+ "offsetX": {
48758
+ "value": 0,
48759
+ "unit": "px"
48760
+ },
48761
+ "offsetY": {
48762
+ "value": 24,
48763
+ "unit": "px"
48764
+ },
48765
+ "blur": {
48766
+ "value": 48,
48767
+ "unit": "px"
48768
+ },
48769
+ "spread": {
48770
+ "value": -12,
48771
+ "unit": "px"
48772
+ }
48773
+ },
48774
+ {
48775
+ "color": "#f0f6fc",
48776
+ "alpha": 0.08,
48777
+ "offsetX": {
48778
+ "value": 0,
48779
+ "unit": "px"
48780
+ },
48781
+ "offsetY": {
48782
+ "value": 48,
48783
+ "unit": "px"
48784
+ },
48785
+ "blur": {
48786
+ "value": 96,
48787
+ "unit": "px"
48788
+ },
48789
+ "spread": {
48790
+ "value": -24,
48791
+ "unit": "px"
48792
+ }
48793
+ }
48794
+ ],
48795
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48796
+ "isSource": true,
48797
+ "$type": "shadow"
48798
+ },
48799
+ "light-tritanopia-high-contrast": {
48800
+ "$value": [
48801
+ {
48802
+ "color": "#3d444db3",
48803
+ "alpha": 1,
48804
+ "offsetX": {
48805
+ "value": 0,
48806
+ "unit": "px"
48807
+ },
48808
+ "offsetY": {
48809
+ "value": 0,
48810
+ "unit": "px"
48811
+ },
48812
+ "blur": {
48813
+ "value": 0,
48814
+ "unit": "px"
48815
+ },
48816
+ "spread": {
48817
+ "value": 1,
48818
+ "unit": "px"
48819
+ }
48820
+ },
48821
+ {
48822
+ "color": "#f0f6fc",
48823
+ "alpha": 0.08,
48824
+ "offsetX": {
48825
+ "value": 0,
48826
+ "unit": "px"
48827
+ },
48828
+ "offsetY": {
48829
+ "value": 8,
48830
+ "unit": "px"
48831
+ },
48832
+ "blur": {
48833
+ "value": 16,
48834
+ "unit": "px"
48835
+ },
48836
+ "spread": {
48837
+ "value": -4,
48838
+ "unit": "px"
48839
+ }
48840
+ },
48841
+ {
48842
+ "color": "#f0f6fc",
48843
+ "alpha": 0.08,
48844
+ "offsetX": {
48845
+ "value": 0,
48846
+ "unit": "px"
48847
+ },
48848
+ "offsetY": {
48849
+ "value": 4,
48850
+ "unit": "px"
48851
+ },
48852
+ "blur": {
48853
+ "value": 32,
48854
+ "unit": "px"
48855
+ },
48856
+ "spread": {
48857
+ "value": -4,
48858
+ "unit": "px"
48859
+ }
48860
+ },
48861
+ {
48862
+ "color": "#f0f6fc",
48863
+ "alpha": 0.08,
48864
+ "offsetX": {
48865
+ "value": 0,
48866
+ "unit": "px"
48867
+ },
48868
+ "offsetY": {
48869
+ "value": 24,
48870
+ "unit": "px"
48871
+ },
48872
+ "blur": {
48873
+ "value": 48,
48874
+ "unit": "px"
48875
+ },
48876
+ "spread": {
48877
+ "value": -12,
48878
+ "unit": "px"
48879
+ }
48880
+ },
48881
+ {
48882
+ "color": "#f0f6fc",
48883
+ "alpha": 0.08,
48884
+ "offsetX": {
48885
+ "value": 0,
48886
+ "unit": "px"
48887
+ },
48888
+ "offsetY": {
48889
+ "value": 48,
48890
+ "unit": "px"
48891
+ },
48892
+ "blur": {
48893
+ "value": 96,
48894
+ "unit": "px"
48895
+ },
48896
+ "spread": {
48897
+ "value": -24,
48898
+ "unit": "px"
48899
+ }
47687
48900
  }
47688
48901
  ],
47689
48902
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47690
48903
  "isSource": true,
47691
48904
  "$type": "shadow"
47692
48905
  }
48906
+ },
48907
+ "org.primer.llm": {
48908
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48909
+ "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."
47693
48910
  }
47694
48911
  },
47695
48912
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47699,45 +48916,106 @@
47699
48916
  {
47700
48917
  "color": "{overlay.borderColor}",
47701
48918
  "alpha": 1,
47702
- "offsetX": "0px",
47703
- "offsetY": "0px",
47704
- "blur": "0px",
47705
- "spread": "1px"
48919
+ "offsetX": {
48920
+ "value": 0,
48921
+ "unit": "px"
48922
+ },
48923
+ "offsetY": {
48924
+ "value": 0,
48925
+ "unit": "px"
48926
+ },
48927
+ "blur": {
48928
+ "value": 0,
48929
+ "unit": "px"
48930
+ },
48931
+ "spread": {
48932
+ "value": 1,
48933
+ "unit": "px"
48934
+ }
47706
48935
  },
47707
48936
  {
47708
48937
  "color": "{base.color.neutral.0}",
47709
48938
  "alpha": 0.4,
47710
- "offsetX": "0px",
47711
- "offsetY": "8px",
47712
- "blur": "16px",
47713
- "spread": "-4px"
48939
+ "offsetX": {
48940
+ "value": 0,
48941
+ "unit": "px"
48942
+ },
48943
+ "offsetY": {
48944
+ "value": 8,
48945
+ "unit": "px"
48946
+ },
48947
+ "blur": {
48948
+ "value": 16,
48949
+ "unit": "px"
48950
+ },
48951
+ "spread": {
48952
+ "value": -4,
48953
+ "unit": "px"
48954
+ }
47714
48955
  },
47715
48956
  {
47716
48957
  "color": "{base.color.neutral.0}",
47717
48958
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "4px",
47720
- "blur": "32px",
47721
- "spread": "-4px"
48959
+ "offsetX": {
48960
+ "value": 0,
48961
+ "unit": "px"
48962
+ },
48963
+ "offsetY": {
48964
+ "value": 4,
48965
+ "unit": "px"
48966
+ },
48967
+ "blur": {
48968
+ "value": 32,
48969
+ "unit": "px"
48970
+ },
48971
+ "spread": {
48972
+ "value": -4,
48973
+ "unit": "px"
48974
+ }
47722
48975
  },
47723
48976
  {
47724
48977
  "color": "{base.color.neutral.0}",
47725
48978
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "24px",
47728
- "blur": "48px",
47729
- "spread": "-12px"
48979
+ "offsetX": {
48980
+ "value": 0,
48981
+ "unit": "px"
48982
+ },
48983
+ "offsetY": {
48984
+ "value": 24,
48985
+ "unit": "px"
48986
+ },
48987
+ "blur": {
48988
+ "value": 48,
48989
+ "unit": "px"
48990
+ },
48991
+ "spread": {
48992
+ "value": -12,
48993
+ "unit": "px"
48994
+ }
47730
48995
  },
47731
48996
  {
47732
48997
  "color": "{base.color.neutral.0}",
47733
48998
  "alpha": 0.4,
47734
- "offsetX": "0px",
47735
- "offsetY": "48px",
47736
- "blur": "96px",
47737
- "spread": "-24px"
48999
+ "offsetX": {
49000
+ "value": 0,
49001
+ "unit": "px"
49002
+ },
49003
+ "offsetY": {
49004
+ "value": 48,
49005
+ "unit": "px"
49006
+ },
49007
+ "blur": {
49008
+ "value": 96,
49009
+ "unit": "px"
49010
+ },
49011
+ "spread": {
49012
+ "value": -24,
49013
+ "unit": "px"
49014
+ }
47738
49015
  }
47739
49016
  ],
47740
49017
  "$type": "shadow",
49018
+ "$description": "Medium floating shadow for popovers and action menus",
47741
49019
  "$extensions": {
47742
49020
  "org.primer.figma": {
47743
49021
  "collection": "mode",
@@ -47749,48 +49027,433 @@
47749
49027
  {
47750
49028
  "color": "{overlay.borderColor}",
47751
49029
  "alpha": 1,
47752
- "offsetX": "0px",
47753
- "offsetY": "0px",
47754
- "blur": "0px",
47755
- "spread": "1px"
49030
+ "offsetX": {
49031
+ "value": 0,
49032
+ "unit": "px"
49033
+ },
49034
+ "offsetY": {
49035
+ "value": 0,
49036
+ "unit": "px"
49037
+ },
49038
+ "blur": {
49039
+ "value": 0,
49040
+ "unit": "px"
49041
+ },
49042
+ "spread": {
49043
+ "value": 1,
49044
+ "unit": "px"
49045
+ }
47756
49046
  },
47757
49047
  {
47758
49048
  "color": "{base.color.neutral.0}",
47759
49049
  "alpha": 0.4,
47760
- "offsetX": "0px",
47761
- "offsetY": "8px",
47762
- "blur": "16px",
47763
- "spread": "-4px"
49050
+ "offsetX": {
49051
+ "value": 0,
49052
+ "unit": "px"
49053
+ },
49054
+ "offsetY": {
49055
+ "value": 8,
49056
+ "unit": "px"
49057
+ },
49058
+ "blur": {
49059
+ "value": 16,
49060
+ "unit": "px"
49061
+ },
49062
+ "spread": {
49063
+ "value": -4,
49064
+ "unit": "px"
49065
+ }
47764
49066
  },
47765
49067
  {
47766
49068
  "color": "{base.color.neutral.0}",
47767
49069
  "alpha": 0.4,
47768
- "offsetX": "0px",
47769
- "offsetY": "4px",
47770
- "blur": "32px",
47771
- "spread": "-4px"
49070
+ "offsetX": {
49071
+ "value": 0,
49072
+ "unit": "px"
49073
+ },
49074
+ "offsetY": {
49075
+ "value": 4,
49076
+ "unit": "px"
49077
+ },
49078
+ "blur": {
49079
+ "value": 32,
49080
+ "unit": "px"
49081
+ },
49082
+ "spread": {
49083
+ "value": -4,
49084
+ "unit": "px"
49085
+ }
47772
49086
  },
47773
49087
  {
47774
49088
  "color": "{base.color.neutral.0}",
47775
49089
  "alpha": 0.4,
47776
- "offsetX": "0px",
47777
- "offsetY": "24px",
47778
- "blur": "48px",
47779
- "spread": "-12px"
49090
+ "offsetX": {
49091
+ "value": 0,
49092
+ "unit": "px"
49093
+ },
49094
+ "offsetY": {
49095
+ "value": 24,
49096
+ "unit": "px"
49097
+ },
49098
+ "blur": {
49099
+ "value": 48,
49100
+ "unit": "px"
49101
+ },
49102
+ "spread": {
49103
+ "value": -12,
49104
+ "unit": "px"
49105
+ }
47780
49106
  },
47781
49107
  {
47782
49108
  "color": "{base.color.neutral.0}",
47783
49109
  "alpha": 0.4,
47784
- "offsetX": "0px",
47785
- "offsetY": "48px",
47786
- "blur": "96px",
47787
- "spread": "-24px"
49110
+ "offsetX": {
49111
+ "value": 0,
49112
+ "unit": "px"
49113
+ },
49114
+ "offsetY": {
49115
+ "value": 48,
49116
+ "unit": "px"
49117
+ },
49118
+ "blur": {
49119
+ "value": 96,
49120
+ "unit": "px"
49121
+ },
49122
+ "spread": {
49123
+ "value": -24,
49124
+ "unit": "px"
49125
+ }
49126
+ }
49127
+ ],
49128
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49129
+ "isSource": true,
49130
+ "$type": "shadow"
49131
+ },
49132
+ "light-high-contrast": {
49133
+ "$value": [
49134
+ {
49135
+ "color": "{overlay.borderColor}",
49136
+ "alpha": 1,
49137
+ "offsetX": {
49138
+ "value": 0,
49139
+ "unit": "px"
49140
+ },
49141
+ "offsetY": {
49142
+ "value": 0,
49143
+ "unit": "px"
49144
+ },
49145
+ "blur": {
49146
+ "value": 0,
49147
+ "unit": "px"
49148
+ },
49149
+ "spread": {
49150
+ "value": 1,
49151
+ "unit": "px"
49152
+ }
49153
+ },
49154
+ {
49155
+ "color": "{base.color.neutral.12}",
49156
+ "alpha": 0.08,
49157
+ "offsetX": {
49158
+ "value": 0,
49159
+ "unit": "px"
49160
+ },
49161
+ "offsetY": {
49162
+ "value": 8,
49163
+ "unit": "px"
49164
+ },
49165
+ "blur": {
49166
+ "value": 16,
49167
+ "unit": "px"
49168
+ },
49169
+ "spread": {
49170
+ "value": -4,
49171
+ "unit": "px"
49172
+ }
49173
+ },
49174
+ {
49175
+ "color": "{base.color.neutral.12}",
49176
+ "alpha": 0.08,
49177
+ "offsetX": {
49178
+ "value": 0,
49179
+ "unit": "px"
49180
+ },
49181
+ "offsetY": {
49182
+ "value": 4,
49183
+ "unit": "px"
49184
+ },
49185
+ "blur": {
49186
+ "value": 32,
49187
+ "unit": "px"
49188
+ },
49189
+ "spread": {
49190
+ "value": -4,
49191
+ "unit": "px"
49192
+ }
49193
+ },
49194
+ {
49195
+ "color": "{base.color.neutral.12}",
49196
+ "alpha": 0.08,
49197
+ "offsetX": {
49198
+ "value": 0,
49199
+ "unit": "px"
49200
+ },
49201
+ "offsetY": {
49202
+ "value": 24,
49203
+ "unit": "px"
49204
+ },
49205
+ "blur": {
49206
+ "value": 48,
49207
+ "unit": "px"
49208
+ },
49209
+ "spread": {
49210
+ "value": -12,
49211
+ "unit": "px"
49212
+ }
49213
+ },
49214
+ {
49215
+ "color": "{base.color.neutral.12}",
49216
+ "alpha": 0.08,
49217
+ "offsetX": {
49218
+ "value": 0,
49219
+ "unit": "px"
49220
+ },
49221
+ "offsetY": {
49222
+ "value": 48,
49223
+ "unit": "px"
49224
+ },
49225
+ "blur": {
49226
+ "value": 96,
49227
+ "unit": "px"
49228
+ },
49229
+ "spread": {
49230
+ "value": -24,
49231
+ "unit": "px"
49232
+ }
49233
+ }
49234
+ ],
49235
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49236
+ "isSource": true,
49237
+ "$type": "shadow"
49238
+ },
49239
+ "light-protanopia-deuteranopia-high-contrast": {
49240
+ "$value": [
49241
+ {
49242
+ "color": "{overlay.borderColor}",
49243
+ "alpha": 1,
49244
+ "offsetX": {
49245
+ "value": 0,
49246
+ "unit": "px"
49247
+ },
49248
+ "offsetY": {
49249
+ "value": 0,
49250
+ "unit": "px"
49251
+ },
49252
+ "blur": {
49253
+ "value": 0,
49254
+ "unit": "px"
49255
+ },
49256
+ "spread": {
49257
+ "value": 1,
49258
+ "unit": "px"
49259
+ }
49260
+ },
49261
+ {
49262
+ "color": "{base.color.neutral.12}",
49263
+ "alpha": 0.08,
49264
+ "offsetX": {
49265
+ "value": 0,
49266
+ "unit": "px"
49267
+ },
49268
+ "offsetY": {
49269
+ "value": 8,
49270
+ "unit": "px"
49271
+ },
49272
+ "blur": {
49273
+ "value": 16,
49274
+ "unit": "px"
49275
+ },
49276
+ "spread": {
49277
+ "value": -4,
49278
+ "unit": "px"
49279
+ }
49280
+ },
49281
+ {
49282
+ "color": "{base.color.neutral.12}",
49283
+ "alpha": 0.08,
49284
+ "offsetX": {
49285
+ "value": 0,
49286
+ "unit": "px"
49287
+ },
49288
+ "offsetY": {
49289
+ "value": 4,
49290
+ "unit": "px"
49291
+ },
49292
+ "blur": {
49293
+ "value": 32,
49294
+ "unit": "px"
49295
+ },
49296
+ "spread": {
49297
+ "value": -4,
49298
+ "unit": "px"
49299
+ }
49300
+ },
49301
+ {
49302
+ "color": "{base.color.neutral.12}",
49303
+ "alpha": 0.08,
49304
+ "offsetX": {
49305
+ "value": 0,
49306
+ "unit": "px"
49307
+ },
49308
+ "offsetY": {
49309
+ "value": 24,
49310
+ "unit": "px"
49311
+ },
49312
+ "blur": {
49313
+ "value": 48,
49314
+ "unit": "px"
49315
+ },
49316
+ "spread": {
49317
+ "value": -12,
49318
+ "unit": "px"
49319
+ }
49320
+ },
49321
+ {
49322
+ "color": "{base.color.neutral.12}",
49323
+ "alpha": 0.08,
49324
+ "offsetX": {
49325
+ "value": 0,
49326
+ "unit": "px"
49327
+ },
49328
+ "offsetY": {
49329
+ "value": 48,
49330
+ "unit": "px"
49331
+ },
49332
+ "blur": {
49333
+ "value": 96,
49334
+ "unit": "px"
49335
+ },
49336
+ "spread": {
49337
+ "value": -24,
49338
+ "unit": "px"
49339
+ }
49340
+ }
49341
+ ],
49342
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49343
+ "isSource": true,
49344
+ "$type": "shadow"
49345
+ },
49346
+ "light-tritanopia-high-contrast": {
49347
+ "$value": [
49348
+ {
49349
+ "color": "{overlay.borderColor}",
49350
+ "alpha": 1,
49351
+ "offsetX": {
49352
+ "value": 0,
49353
+ "unit": "px"
49354
+ },
49355
+ "offsetY": {
49356
+ "value": 0,
49357
+ "unit": "px"
49358
+ },
49359
+ "blur": {
49360
+ "value": 0,
49361
+ "unit": "px"
49362
+ },
49363
+ "spread": {
49364
+ "value": 1,
49365
+ "unit": "px"
49366
+ }
49367
+ },
49368
+ {
49369
+ "color": "{base.color.neutral.12}",
49370
+ "alpha": 0.08,
49371
+ "offsetX": {
49372
+ "value": 0,
49373
+ "unit": "px"
49374
+ },
49375
+ "offsetY": {
49376
+ "value": 8,
49377
+ "unit": "px"
49378
+ },
49379
+ "blur": {
49380
+ "value": 16,
49381
+ "unit": "px"
49382
+ },
49383
+ "spread": {
49384
+ "value": -4,
49385
+ "unit": "px"
49386
+ }
49387
+ },
49388
+ {
49389
+ "color": "{base.color.neutral.12}",
49390
+ "alpha": 0.08,
49391
+ "offsetX": {
49392
+ "value": 0,
49393
+ "unit": "px"
49394
+ },
49395
+ "offsetY": {
49396
+ "value": 4,
49397
+ "unit": "px"
49398
+ },
49399
+ "blur": {
49400
+ "value": 32,
49401
+ "unit": "px"
49402
+ },
49403
+ "spread": {
49404
+ "value": -4,
49405
+ "unit": "px"
49406
+ }
49407
+ },
49408
+ {
49409
+ "color": "{base.color.neutral.12}",
49410
+ "alpha": 0.08,
49411
+ "offsetX": {
49412
+ "value": 0,
49413
+ "unit": "px"
49414
+ },
49415
+ "offsetY": {
49416
+ "value": 24,
49417
+ "unit": "px"
49418
+ },
49419
+ "blur": {
49420
+ "value": 48,
49421
+ "unit": "px"
49422
+ },
49423
+ "spread": {
49424
+ "value": -12,
49425
+ "unit": "px"
49426
+ }
49427
+ },
49428
+ {
49429
+ "color": "{base.color.neutral.12}",
49430
+ "alpha": 0.08,
49431
+ "offsetX": {
49432
+ "value": 0,
49433
+ "unit": "px"
49434
+ },
49435
+ "offsetY": {
49436
+ "value": 48,
49437
+ "unit": "px"
49438
+ },
49439
+ "blur": {
49440
+ "value": 96,
49441
+ "unit": "px"
49442
+ },
49443
+ "spread": {
49444
+ "value": -24,
49445
+ "unit": "px"
49446
+ }
47788
49447
  }
47789
49448
  ],
47790
49449
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47791
49450
  "isSource": true,
47792
49451
  "$type": "shadow"
47793
49452
  }
49453
+ },
49454
+ "org.primer.llm": {
49455
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49456
+ "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."
47794
49457
  }
47795
49458
  },
47796
49459
  "key": "{shadow.floating.medium}"
@@ -47801,7 +49464,7 @@
47801
49464
  },
47802
49465
  "shadow-floating-small": {
47803
49466
  "key": "{shadow.floating.small}",
47804
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
49467
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47805
49468
  "$type": "shadow",
47806
49469
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47807
49470
  "$extensions": {
@@ -47815,26 +49478,62 @@
47815
49478
  {
47816
49479
  "color": "#3d444db3",
47817
49480
  "alpha": 1,
47818
- "offsetX": "0px",
47819
- "offsetY": "0px",
47820
- "blur": "0px",
47821
- "spread": "1px"
49481
+ "offsetX": {
49482
+ "value": 0,
49483
+ "unit": "px"
49484
+ },
49485
+ "offsetY": {
49486
+ "value": 0,
49487
+ "unit": "px"
49488
+ },
49489
+ "blur": {
49490
+ "value": 0,
49491
+ "unit": "px"
49492
+ },
49493
+ "spread": {
49494
+ "value": 1,
49495
+ "unit": "px"
49496
+ }
47822
49497
  },
47823
49498
  {
47824
49499
  "color": "#010409",
47825
49500
  "alpha": 0.4,
47826
- "offsetX": "0px",
47827
- "offsetY": "6px",
47828
- "blur": "12px",
47829
- "spread": "-3px"
49501
+ "offsetX": {
49502
+ "value": 0,
49503
+ "unit": "px"
49504
+ },
49505
+ "offsetY": {
49506
+ "value": 6,
49507
+ "unit": "px"
49508
+ },
49509
+ "blur": {
49510
+ "value": 12,
49511
+ "unit": "px"
49512
+ },
49513
+ "spread": {
49514
+ "value": -3,
49515
+ "unit": "px"
49516
+ }
47830
49517
  },
47831
49518
  {
47832
49519
  "color": "#010409",
47833
49520
  "alpha": 0.4,
47834
- "offsetX": "0px",
47835
- "offsetY": "6px",
47836
- "blur": "18px",
47837
- "spread": "0px"
49521
+ "offsetX": {
49522
+ "value": 0,
49523
+ "unit": "px"
49524
+ },
49525
+ "offsetY": {
49526
+ "value": 6,
49527
+ "unit": "px"
49528
+ },
49529
+ "blur": {
49530
+ "value": 18,
49531
+ "unit": "px"
49532
+ },
49533
+ "spread": {
49534
+ "value": 0,
49535
+ "unit": "px"
49536
+ }
47838
49537
  }
47839
49538
  ],
47840
49539
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47854,26 +49553,62 @@
47854
49553
  {
47855
49554
  "color": "{overlay.borderColor}",
47856
49555
  "alpha": 1,
47857
- "offsetX": "0px",
47858
- "offsetY": "0px",
47859
- "blur": "0px",
47860
- "spread": "1px"
49556
+ "offsetX": {
49557
+ "value": 0,
49558
+ "unit": "px"
49559
+ },
49560
+ "offsetY": {
49561
+ "value": 0,
49562
+ "unit": "px"
49563
+ },
49564
+ "blur": {
49565
+ "value": 0,
49566
+ "unit": "px"
49567
+ },
49568
+ "spread": {
49569
+ "value": 1,
49570
+ "unit": "px"
49571
+ }
47861
49572
  },
47862
49573
  {
47863
49574
  "color": "{base.color.neutral.0}",
47864
49575
  "alpha": 0.4,
47865
- "offsetX": "0px",
47866
- "offsetY": "6px",
47867
- "blur": "12px",
47868
- "spread": "-3px"
49576
+ "offsetX": {
49577
+ "value": 0,
49578
+ "unit": "px"
49579
+ },
49580
+ "offsetY": {
49581
+ "value": 6,
49582
+ "unit": "px"
49583
+ },
49584
+ "blur": {
49585
+ "value": 12,
49586
+ "unit": "px"
49587
+ },
49588
+ "spread": {
49589
+ "value": -3,
49590
+ "unit": "px"
49591
+ }
47869
49592
  },
47870
49593
  {
47871
49594
  "color": "{base.color.neutral.0}",
47872
49595
  "alpha": 0.4,
47873
- "offsetX": "0px",
47874
- "offsetY": "6px",
47875
- "blur": "18px",
47876
- "spread": "0px"
49596
+ "offsetX": {
49597
+ "value": 0,
49598
+ "unit": "px"
49599
+ },
49600
+ "offsetY": {
49601
+ "value": 6,
49602
+ "unit": "px"
49603
+ },
49604
+ "blur": {
49605
+ "value": 18,
49606
+ "unit": "px"
49607
+ },
49608
+ "spread": {
49609
+ "value": 0,
49610
+ "unit": "px"
49611
+ }
47877
49612
  }
47878
49613
  ],
47879
49614
  "$type": "shadow",
@@ -47889,26 +49624,62 @@
47889
49624
  {
47890
49625
  "color": "{overlay.borderColor}",
47891
49626
  "alpha": 1,
47892
- "offsetX": "0px",
47893
- "offsetY": "0px",
47894
- "blur": "0px",
47895
- "spread": "1px"
49627
+ "offsetX": {
49628
+ "value": 0,
49629
+ "unit": "px"
49630
+ },
49631
+ "offsetY": {
49632
+ "value": 0,
49633
+ "unit": "px"
49634
+ },
49635
+ "blur": {
49636
+ "value": 0,
49637
+ "unit": "px"
49638
+ },
49639
+ "spread": {
49640
+ "value": 1,
49641
+ "unit": "px"
49642
+ }
47896
49643
  },
47897
49644
  {
47898
49645
  "color": "{base.color.neutral.0}",
47899
49646
  "alpha": 0.4,
47900
- "offsetX": "0px",
47901
- "offsetY": "6px",
47902
- "blur": "12px",
47903
- "spread": "-3px"
49647
+ "offsetX": {
49648
+ "value": 0,
49649
+ "unit": "px"
49650
+ },
49651
+ "offsetY": {
49652
+ "value": 6,
49653
+ "unit": "px"
49654
+ },
49655
+ "blur": {
49656
+ "value": 12,
49657
+ "unit": "px"
49658
+ },
49659
+ "spread": {
49660
+ "value": -3,
49661
+ "unit": "px"
49662
+ }
47904
49663
  },
47905
49664
  {
47906
49665
  "color": "{base.color.neutral.0}",
47907
49666
  "alpha": 0.4,
47908
- "offsetX": "0px",
47909
- "offsetY": "6px",
47910
- "blur": "18px",
47911
- "spread": "0px"
49667
+ "offsetX": {
49668
+ "value": 0,
49669
+ "unit": "px"
49670
+ },
49671
+ "offsetY": {
49672
+ "value": 6,
49673
+ "unit": "px"
49674
+ },
49675
+ "blur": {
49676
+ "value": 18,
49677
+ "unit": "px"
49678
+ },
49679
+ "spread": {
49680
+ "value": 0,
49681
+ "unit": "px"
49682
+ }
47912
49683
  }
47913
49684
  ],
47914
49685
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47929,8 +49700,9 @@
47929
49700
  },
47930
49701
  "shadow-floating-xlarge": {
47931
49702
  "key": "{shadow.floating.xlarge}",
47932
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
49703
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47933
49704
  "$type": "shadow",
49705
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47934
49706
  "$extensions": {
47935
49707
  "org.primer.figma": {
47936
49708
  "collection": "mode",
@@ -47942,24 +49714,193 @@
47942
49714
  {
47943
49715
  "color": "#3d444db3",
47944
49716
  "alpha": 1,
47945
- "offsetX": "0px",
47946
- "offsetY": "0px",
47947
- "blur": "0px",
47948
- "spread": "1px"
49717
+ "offsetX": {
49718
+ "value": 0,
49719
+ "unit": "px"
49720
+ },
49721
+ "offsetY": {
49722
+ "value": 0,
49723
+ "unit": "px"
49724
+ },
49725
+ "blur": {
49726
+ "value": 0,
49727
+ "unit": "px"
49728
+ },
49729
+ "spread": {
49730
+ "value": 1,
49731
+ "unit": "px"
49732
+ }
47949
49733
  },
47950
49734
  {
47951
49735
  "color": "#010409",
47952
49736
  "alpha": 1,
47953
- "offsetX": "0px",
47954
- "offsetY": "32px",
47955
- "blur": "64px",
47956
- "spread": "0px"
49737
+ "offsetX": {
49738
+ "value": 0,
49739
+ "unit": "px"
49740
+ },
49741
+ "offsetY": {
49742
+ "value": 32,
49743
+ "unit": "px"
49744
+ },
49745
+ "blur": {
49746
+ "value": 64,
49747
+ "unit": "px"
49748
+ },
49749
+ "spread": {
49750
+ "value": 0,
49751
+ "unit": "px"
49752
+ }
49753
+ }
49754
+ ],
49755
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49756
+ "isSource": true,
49757
+ "$type": "shadow"
49758
+ },
49759
+ "light-high-contrast": {
49760
+ "$value": [
49761
+ {
49762
+ "color": "#3d444db3",
49763
+ "alpha": 1,
49764
+ "offsetX": {
49765
+ "value": 0,
49766
+ "unit": "px"
49767
+ },
49768
+ "offsetY": {
49769
+ "value": 0,
49770
+ "unit": "px"
49771
+ },
49772
+ "blur": {
49773
+ "value": 0,
49774
+ "unit": "px"
49775
+ },
49776
+ "spread": {
49777
+ "value": 1,
49778
+ "unit": "px"
49779
+ }
49780
+ },
49781
+ {
49782
+ "color": "#f0f6fc",
49783
+ "alpha": 0.32,
49784
+ "offsetX": {
49785
+ "value": 0,
49786
+ "unit": "px"
49787
+ },
49788
+ "offsetY": {
49789
+ "value": 56,
49790
+ "unit": "px"
49791
+ },
49792
+ "blur": {
49793
+ "value": 112,
49794
+ "unit": "px"
49795
+ },
49796
+ "spread": {
49797
+ "value": 0,
49798
+ "unit": "px"
49799
+ }
49800
+ }
49801
+ ],
49802
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49803
+ "isSource": true,
49804
+ "$type": "shadow"
49805
+ },
49806
+ "light-protanopia-deuteranopia-high-contrast": {
49807
+ "$value": [
49808
+ {
49809
+ "color": "#3d444db3",
49810
+ "alpha": 1,
49811
+ "offsetX": {
49812
+ "value": 0,
49813
+ "unit": "px"
49814
+ },
49815
+ "offsetY": {
49816
+ "value": 0,
49817
+ "unit": "px"
49818
+ },
49819
+ "blur": {
49820
+ "value": 0,
49821
+ "unit": "px"
49822
+ },
49823
+ "spread": {
49824
+ "value": 1,
49825
+ "unit": "px"
49826
+ }
49827
+ },
49828
+ {
49829
+ "color": "#f0f6fc",
49830
+ "alpha": 0.32,
49831
+ "offsetX": {
49832
+ "value": 0,
49833
+ "unit": "px"
49834
+ },
49835
+ "offsetY": {
49836
+ "value": 56,
49837
+ "unit": "px"
49838
+ },
49839
+ "blur": {
49840
+ "value": 112,
49841
+ "unit": "px"
49842
+ },
49843
+ "spread": {
49844
+ "value": 0,
49845
+ "unit": "px"
49846
+ }
49847
+ }
49848
+ ],
49849
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49850
+ "isSource": true,
49851
+ "$type": "shadow"
49852
+ },
49853
+ "light-tritanopia-high-contrast": {
49854
+ "$value": [
49855
+ {
49856
+ "color": "#3d444db3",
49857
+ "alpha": 1,
49858
+ "offsetX": {
49859
+ "value": 0,
49860
+ "unit": "px"
49861
+ },
49862
+ "offsetY": {
49863
+ "value": 0,
49864
+ "unit": "px"
49865
+ },
49866
+ "blur": {
49867
+ "value": 0,
49868
+ "unit": "px"
49869
+ },
49870
+ "spread": {
49871
+ "value": 1,
49872
+ "unit": "px"
49873
+ }
49874
+ },
49875
+ {
49876
+ "color": "#f0f6fc",
49877
+ "alpha": 0.32,
49878
+ "offsetX": {
49879
+ "value": 0,
49880
+ "unit": "px"
49881
+ },
49882
+ "offsetY": {
49883
+ "value": 56,
49884
+ "unit": "px"
49885
+ },
49886
+ "blur": {
49887
+ "value": 112,
49888
+ "unit": "px"
49889
+ },
49890
+ "spread": {
49891
+ "value": 0,
49892
+ "unit": "px"
49893
+ }
47957
49894
  }
47958
49895
  ],
47959
49896
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47960
49897
  "isSource": true,
47961
49898
  "$type": "shadow"
47962
49899
  }
49900
+ },
49901
+ "org.primer.llm": {
49902
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49903
+ "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."
47963
49904
  }
47964
49905
  },
47965
49906
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47969,21 +49910,46 @@
47969
49910
  {
47970
49911
  "color": "{overlay.borderColor}",
47971
49912
  "alpha": 1,
47972
- "offsetX": "0px",
47973
- "offsetY": "0px",
47974
- "blur": "0px",
47975
- "spread": "1px"
49913
+ "offsetX": {
49914
+ "value": 0,
49915
+ "unit": "px"
49916
+ },
49917
+ "offsetY": {
49918
+ "value": 0,
49919
+ "unit": "px"
49920
+ },
49921
+ "blur": {
49922
+ "value": 0,
49923
+ "unit": "px"
49924
+ },
49925
+ "spread": {
49926
+ "value": 1,
49927
+ "unit": "px"
49928
+ }
47976
49929
  },
47977
49930
  {
47978
49931
  "color": "{base.color.neutral.0}",
47979
49932
  "alpha": 1,
47980
- "offsetX": "0px",
47981
- "offsetY": "32px",
47982
- "blur": "64px",
47983
- "spread": "0px"
49933
+ "offsetX": {
49934
+ "value": 0,
49935
+ "unit": "px"
49936
+ },
49937
+ "offsetY": {
49938
+ "value": 32,
49939
+ "unit": "px"
49940
+ },
49941
+ "blur": {
49942
+ "value": 64,
49943
+ "unit": "px"
49944
+ },
49945
+ "spread": {
49946
+ "value": 0,
49947
+ "unit": "px"
49948
+ }
47984
49949
  }
47985
49950
  ],
47986
49951
  "$type": "shadow",
49952
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47987
49953
  "$extensions": {
47988
49954
  "org.primer.figma": {
47989
49955
  "collection": "mode",
@@ -47995,24 +49961,193 @@
47995
49961
  {
47996
49962
  "color": "{overlay.borderColor}",
47997
49963
  "alpha": 1,
47998
- "offsetX": "0px",
47999
- "offsetY": "0px",
48000
- "blur": "0px",
48001
- "spread": "1px"
49964
+ "offsetX": {
49965
+ "value": 0,
49966
+ "unit": "px"
49967
+ },
49968
+ "offsetY": {
49969
+ "value": 0,
49970
+ "unit": "px"
49971
+ },
49972
+ "blur": {
49973
+ "value": 0,
49974
+ "unit": "px"
49975
+ },
49976
+ "spread": {
49977
+ "value": 1,
49978
+ "unit": "px"
49979
+ }
48002
49980
  },
48003
49981
  {
48004
49982
  "color": "{base.color.neutral.0}",
48005
49983
  "alpha": 1,
48006
- "offsetX": "0px",
48007
- "offsetY": "32px",
48008
- "blur": "64px",
48009
- "spread": "0px"
49984
+ "offsetX": {
49985
+ "value": 0,
49986
+ "unit": "px"
49987
+ },
49988
+ "offsetY": {
49989
+ "value": 32,
49990
+ "unit": "px"
49991
+ },
49992
+ "blur": {
49993
+ "value": 64,
49994
+ "unit": "px"
49995
+ },
49996
+ "spread": {
49997
+ "value": 0,
49998
+ "unit": "px"
49999
+ }
50000
+ }
50001
+ ],
50002
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50003
+ "isSource": true,
50004
+ "$type": "shadow"
50005
+ },
50006
+ "light-high-contrast": {
50007
+ "$value": [
50008
+ {
50009
+ "color": "{overlay.borderColor}",
50010
+ "alpha": 1,
50011
+ "offsetX": {
50012
+ "value": 0,
50013
+ "unit": "px"
50014
+ },
50015
+ "offsetY": {
50016
+ "value": 0,
50017
+ "unit": "px"
50018
+ },
50019
+ "blur": {
50020
+ "value": 0,
50021
+ "unit": "px"
50022
+ },
50023
+ "spread": {
50024
+ "value": 1,
50025
+ "unit": "px"
50026
+ }
50027
+ },
50028
+ {
50029
+ "color": "{base.color.neutral.12}",
50030
+ "alpha": 0.32,
50031
+ "offsetX": {
50032
+ "value": 0,
50033
+ "unit": "px"
50034
+ },
50035
+ "offsetY": {
50036
+ "value": 56,
50037
+ "unit": "px"
50038
+ },
50039
+ "blur": {
50040
+ "value": 112,
50041
+ "unit": "px"
50042
+ },
50043
+ "spread": {
50044
+ "value": 0,
50045
+ "unit": "px"
50046
+ }
50047
+ }
50048
+ ],
50049
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50050
+ "isSource": true,
50051
+ "$type": "shadow"
50052
+ },
50053
+ "light-protanopia-deuteranopia-high-contrast": {
50054
+ "$value": [
50055
+ {
50056
+ "color": "{overlay.borderColor}",
50057
+ "alpha": 1,
50058
+ "offsetX": {
50059
+ "value": 0,
50060
+ "unit": "px"
50061
+ },
50062
+ "offsetY": {
50063
+ "value": 0,
50064
+ "unit": "px"
50065
+ },
50066
+ "blur": {
50067
+ "value": 0,
50068
+ "unit": "px"
50069
+ },
50070
+ "spread": {
50071
+ "value": 1,
50072
+ "unit": "px"
50073
+ }
50074
+ },
50075
+ {
50076
+ "color": "{base.color.neutral.12}",
50077
+ "alpha": 0.32,
50078
+ "offsetX": {
50079
+ "value": 0,
50080
+ "unit": "px"
50081
+ },
50082
+ "offsetY": {
50083
+ "value": 56,
50084
+ "unit": "px"
50085
+ },
50086
+ "blur": {
50087
+ "value": 112,
50088
+ "unit": "px"
50089
+ },
50090
+ "spread": {
50091
+ "value": 0,
50092
+ "unit": "px"
50093
+ }
50094
+ }
50095
+ ],
50096
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50097
+ "isSource": true,
50098
+ "$type": "shadow"
50099
+ },
50100
+ "light-tritanopia-high-contrast": {
50101
+ "$value": [
50102
+ {
50103
+ "color": "{overlay.borderColor}",
50104
+ "alpha": 1,
50105
+ "offsetX": {
50106
+ "value": 0,
50107
+ "unit": "px"
50108
+ },
50109
+ "offsetY": {
50110
+ "value": 0,
50111
+ "unit": "px"
50112
+ },
50113
+ "blur": {
50114
+ "value": 0,
50115
+ "unit": "px"
50116
+ },
50117
+ "spread": {
50118
+ "value": 1,
50119
+ "unit": "px"
50120
+ }
50121
+ },
50122
+ {
50123
+ "color": "{base.color.neutral.12}",
50124
+ "alpha": 0.32,
50125
+ "offsetX": {
50126
+ "value": 0,
50127
+ "unit": "px"
50128
+ },
50129
+ "offsetY": {
50130
+ "value": 56,
50131
+ "unit": "px"
50132
+ },
50133
+ "blur": {
50134
+ "value": 112,
50135
+ "unit": "px"
50136
+ },
50137
+ "spread": {
50138
+ "value": 0,
50139
+ "unit": "px"
50140
+ }
48010
50141
  }
48011
50142
  ],
48012
50143
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48013
50144
  "isSource": true,
48014
50145
  "$type": "shadow"
48015
50146
  }
50147
+ },
50148
+ "org.primer.llm": {
50149
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50150
+ "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."
48016
50151
  }
48017
50152
  },
48018
50153
  "key": "{shadow.floating.xlarge}"
@@ -48023,8 +50158,9 @@
48023
50158
  },
48024
50159
  "shadow-inset": {
48025
50160
  "key": "{shadow.inset}",
48026
- "$value": "inset 0px 1px 0px 0px #0104093d",
50161
+ "$value": "inset 0 1px 0 0 #0104093d",
48027
50162
  "$type": "shadow",
50163
+ "$description": "Inset shadow for recessed elements",
48028
50164
  "$extensions": {
48029
50165
  "org.primer.figma": {
48030
50166
  "collection": "mode",
@@ -48035,16 +50171,32 @@
48035
50171
  "$value": {
48036
50172
  "color": "#010409",
48037
50173
  "alpha": 0.24,
48038
- "offsetX": "0px",
48039
- "offsetY": "1px",
48040
- "blur": "0px",
48041
- "spread": "0px",
50174
+ "offsetX": {
50175
+ "value": 0,
50176
+ "unit": "px"
50177
+ },
50178
+ "offsetY": {
50179
+ "value": 1,
50180
+ "unit": "px"
50181
+ },
50182
+ "blur": {
50183
+ "value": 0,
50184
+ "unit": "px"
50185
+ },
50186
+ "spread": {
50187
+ "value": 0,
50188
+ "unit": "px"
50189
+ },
48042
50190
  "inset": true
48043
50191
  },
48044
50192
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48045
50193
  "isSource": true,
48046
50194
  "$type": "shadow"
48047
50195
  }
50196
+ },
50197
+ "org.primer.llm": {
50198
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50199
+ "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."
48048
50200
  }
48049
50201
  },
48050
50202
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48053,13 +50205,26 @@
48053
50205
  "$value": {
48054
50206
  "color": "{base.color.neutral.0}",
48055
50207
  "alpha": 0.24,
48056
- "offsetX": "0px",
48057
- "offsetY": "1px",
48058
- "blur": "0px",
48059
- "spread": "0px",
50208
+ "offsetX": {
50209
+ "value": 0,
50210
+ "unit": "px"
50211
+ },
50212
+ "offsetY": {
50213
+ "value": 1,
50214
+ "unit": "px"
50215
+ },
50216
+ "blur": {
50217
+ "value": 0,
50218
+ "unit": "px"
50219
+ },
50220
+ "spread": {
50221
+ "value": 0,
50222
+ "unit": "px"
50223
+ },
48060
50224
  "inset": true
48061
50225
  },
48062
50226
  "$type": "shadow",
50227
+ "$description": "Inset shadow for recessed elements",
48063
50228
  "$extensions": {
48064
50229
  "org.primer.figma": {
48065
50230
  "collection": "mode",
@@ -48070,16 +50235,32 @@
48070
50235
  "$value": {
48071
50236
  "color": "{base.color.neutral.0}",
48072
50237
  "alpha": 0.24,
48073
- "offsetX": "0px",
48074
- "offsetY": "1px",
48075
- "blur": "0px",
48076
- "spread": "0px",
50238
+ "offsetX": {
50239
+ "value": 0,
50240
+ "unit": "px"
50241
+ },
50242
+ "offsetY": {
50243
+ "value": 1,
50244
+ "unit": "px"
50245
+ },
50246
+ "blur": {
50247
+ "value": 0,
50248
+ "unit": "px"
50249
+ },
50250
+ "spread": {
50251
+ "value": 0,
50252
+ "unit": "px"
50253
+ },
48077
50254
  "inset": true
48078
50255
  },
48079
50256
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48080
50257
  "isSource": true,
48081
50258
  "$type": "shadow"
48082
50259
  }
50260
+ },
50261
+ "org.primer.llm": {
50262
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50263
+ "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."
48083
50264
  }
48084
50265
  },
48085
50266
  "key": "{shadow.inset}"
@@ -48090,8 +50271,9 @@
48090
50271
  },
48091
50272
  "shadow-resting-medium": {
48092
50273
  "key": "{shadow.resting.medium}",
48093
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
50274
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48094
50275
  "$type": "shadow",
50276
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48095
50277
  "$extensions": {
48096
50278
  "org.primer.figma": {
48097
50279
  "collection": "mode",
@@ -48103,24 +50285,52 @@
48103
50285
  {
48104
50286
  "color": "#010409",
48105
50287
  "alpha": 0.4,
48106
- "offsetX": "0px",
48107
- "offsetY": "1px",
48108
- "blur": "1px",
48109
- "spread": "0px"
50288
+ "offsetX": {
50289
+ "value": 0,
50290
+ "unit": "px"
50291
+ },
50292
+ "offsetY": {
50293
+ "value": 1,
50294
+ "unit": "px"
50295
+ },
50296
+ "blur": {
50297
+ "value": 1,
50298
+ "unit": "px"
50299
+ },
50300
+ "spread": {
50301
+ "value": 0,
50302
+ "unit": "px"
50303
+ }
48110
50304
  },
48111
50305
  {
48112
50306
  "color": "#010409",
48113
50307
  "alpha": 0.8,
48114
- "offsetX": "0px",
48115
- "offsetY": "3px",
48116
- "blur": "6px",
48117
- "spread": "0px"
50308
+ "offsetX": {
50309
+ "value": 0,
50310
+ "unit": "px"
50311
+ },
50312
+ "offsetY": {
50313
+ "value": 3,
50314
+ "unit": "px"
50315
+ },
50316
+ "blur": {
50317
+ "value": 6,
50318
+ "unit": "px"
50319
+ },
50320
+ "spread": {
50321
+ "value": 0,
50322
+ "unit": "px"
50323
+ }
48118
50324
  }
48119
50325
  ],
48120
50326
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48121
50327
  "isSource": true,
48122
50328
  "$type": "shadow"
48123
50329
  }
50330
+ },
50331
+ "org.primer.llm": {
50332
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50333
+ "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."
48124
50334
  }
48125
50335
  },
48126
50336
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48130,21 +50340,46 @@
48130
50340
  {
48131
50341
  "color": "{base.color.neutral.0}",
48132
50342
  "alpha": 0.4,
48133
- "offsetX": "0px",
48134
- "offsetY": "1px",
48135
- "blur": "1px",
48136
- "spread": "0px"
50343
+ "offsetX": {
50344
+ "value": 0,
50345
+ "unit": "px"
50346
+ },
50347
+ "offsetY": {
50348
+ "value": 1,
50349
+ "unit": "px"
50350
+ },
50351
+ "blur": {
50352
+ "value": 1,
50353
+ "unit": "px"
50354
+ },
50355
+ "spread": {
50356
+ "value": 0,
50357
+ "unit": "px"
50358
+ }
48137
50359
  },
48138
50360
  {
48139
50361
  "color": "{base.color.neutral.0}",
48140
50362
  "alpha": 0.8,
48141
- "offsetX": "0px",
48142
- "offsetY": "3px",
48143
- "blur": "6px",
48144
- "spread": "0px"
50363
+ "offsetX": {
50364
+ "value": 0,
50365
+ "unit": "px"
50366
+ },
50367
+ "offsetY": {
50368
+ "value": 3,
50369
+ "unit": "px"
50370
+ },
50371
+ "blur": {
50372
+ "value": 6,
50373
+ "unit": "px"
50374
+ },
50375
+ "spread": {
50376
+ "value": 0,
50377
+ "unit": "px"
50378
+ }
48145
50379
  }
48146
50380
  ],
48147
50381
  "$type": "shadow",
50382
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48148
50383
  "$extensions": {
48149
50384
  "org.primer.figma": {
48150
50385
  "collection": "mode",
@@ -48156,24 +50391,52 @@
48156
50391
  {
48157
50392
  "color": "{base.color.neutral.0}",
48158
50393
  "alpha": 0.4,
48159
- "offsetX": "0px",
48160
- "offsetY": "1px",
48161
- "blur": "1px",
48162
- "spread": "0px"
50394
+ "offsetX": {
50395
+ "value": 0,
50396
+ "unit": "px"
50397
+ },
50398
+ "offsetY": {
50399
+ "value": 1,
50400
+ "unit": "px"
50401
+ },
50402
+ "blur": {
50403
+ "value": 1,
50404
+ "unit": "px"
50405
+ },
50406
+ "spread": {
50407
+ "value": 0,
50408
+ "unit": "px"
50409
+ }
48163
50410
  },
48164
50411
  {
48165
50412
  "color": "{base.color.neutral.0}",
48166
50413
  "alpha": 0.8,
48167
- "offsetX": "0px",
48168
- "offsetY": "3px",
48169
- "blur": "6px",
48170
- "spread": "0px"
50414
+ "offsetX": {
50415
+ "value": 0,
50416
+ "unit": "px"
50417
+ },
50418
+ "offsetY": {
50419
+ "value": 3,
50420
+ "unit": "px"
50421
+ },
50422
+ "blur": {
50423
+ "value": 6,
50424
+ "unit": "px"
50425
+ },
50426
+ "spread": {
50427
+ "value": 0,
50428
+ "unit": "px"
50429
+ }
48171
50430
  }
48172
50431
  ],
48173
50432
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48174
50433
  "isSource": true,
48175
50434
  "$type": "shadow"
48176
50435
  }
50436
+ },
50437
+ "org.primer.llm": {
50438
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50439
+ "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."
48177
50440
  }
48178
50441
  },
48179
50442
  "key": "{shadow.resting.medium}"
@@ -48184,8 +50447,9 @@
48184
50447
  },
48185
50448
  "shadow-resting-small": {
48186
50449
  "key": "{shadow.resting.small}",
48187
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
50450
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48188
50451
  "$type": "shadow",
50452
+ "$description": "Small resting shadow for buttons and interactive elements",
48189
50453
  "$extensions": {
48190
50454
  "org.primer.figma": {
48191
50455
  "collection": "mode",
@@ -48197,19 +50461,43 @@
48197
50461
  {
48198
50462
  "color": "#010409",
48199
50463
  "alpha": 0.6,
48200
- "offsetX": "0px",
48201
- "offsetY": "1px",
48202
- "blur": "1px",
48203
- "spread": "0px",
50464
+ "offsetX": {
50465
+ "value": 0,
50466
+ "unit": "px"
50467
+ },
50468
+ "offsetY": {
50469
+ "value": 1,
50470
+ "unit": "px"
50471
+ },
50472
+ "blur": {
50473
+ "value": 1,
50474
+ "unit": "px"
50475
+ },
50476
+ "spread": {
50477
+ "value": 0,
50478
+ "unit": "px"
50479
+ },
48204
50480
  "inset": false
48205
50481
  },
48206
50482
  {
48207
50483
  "color": "#010409",
48208
50484
  "alpha": 0.6,
48209
- "offsetX": "0px",
48210
- "offsetY": "1px",
48211
- "blur": "3px",
48212
- "spread": "0px",
50485
+ "offsetX": {
50486
+ "value": 0,
50487
+ "unit": "px"
50488
+ },
50489
+ "offsetY": {
50490
+ "value": 1,
50491
+ "unit": "px"
50492
+ },
50493
+ "blur": {
50494
+ "value": 3,
50495
+ "unit": "px"
50496
+ },
50497
+ "spread": {
50498
+ "value": 0,
50499
+ "unit": "px"
50500
+ },
48213
50501
  "inset": false
48214
50502
  }
48215
50503
  ],
@@ -48217,6 +50505,10 @@
48217
50505
  "isSource": true,
48218
50506
  "$type": "shadow"
48219
50507
  }
50508
+ },
50509
+ "org.primer.llm": {
50510
+ "usage": ["button", "interactive-card", "clickable-element"],
50511
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48220
50512
  }
48221
50513
  },
48222
50514
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48226,23 +50518,48 @@
48226
50518
  {
48227
50519
  "color": "{base.color.neutral.0}",
48228
50520
  "alpha": 0.6,
48229
- "offsetX": "0px",
48230
- "offsetY": "1px",
48231
- "blur": "1px",
48232
- "spread": "0px",
50521
+ "offsetX": {
50522
+ "value": 0,
50523
+ "unit": "px"
50524
+ },
50525
+ "offsetY": {
50526
+ "value": 1,
50527
+ "unit": "px"
50528
+ },
50529
+ "blur": {
50530
+ "value": 1,
50531
+ "unit": "px"
50532
+ },
50533
+ "spread": {
50534
+ "value": 0,
50535
+ "unit": "px"
50536
+ },
48233
50537
  "inset": false
48234
50538
  },
48235
50539
  {
48236
50540
  "color": "{base.color.neutral.0}",
48237
50541
  "alpha": 0.6,
48238
- "offsetX": "0px",
48239
- "offsetY": "1px",
48240
- "blur": "3px",
48241
- "spread": "0px",
50542
+ "offsetX": {
50543
+ "value": 0,
50544
+ "unit": "px"
50545
+ },
50546
+ "offsetY": {
50547
+ "value": 1,
50548
+ "unit": "px"
50549
+ },
50550
+ "blur": {
50551
+ "value": 3,
50552
+ "unit": "px"
50553
+ },
50554
+ "spread": {
50555
+ "value": 0,
50556
+ "unit": "px"
50557
+ },
48242
50558
  "inset": false
48243
50559
  }
48244
50560
  ],
48245
50561
  "$type": "shadow",
50562
+ "$description": "Small resting shadow for buttons and interactive elements",
48246
50563
  "$extensions": {
48247
50564
  "org.primer.figma": {
48248
50565
  "collection": "mode",
@@ -48254,19 +50571,43 @@
48254
50571
  {
48255
50572
  "color": "{base.color.neutral.0}",
48256
50573
  "alpha": 0.6,
48257
- "offsetX": "0px",
48258
- "offsetY": "1px",
48259
- "blur": "1px",
48260
- "spread": "0px",
50574
+ "offsetX": {
50575
+ "value": 0,
50576
+ "unit": "px"
50577
+ },
50578
+ "offsetY": {
50579
+ "value": 1,
50580
+ "unit": "px"
50581
+ },
50582
+ "blur": {
50583
+ "value": 1,
50584
+ "unit": "px"
50585
+ },
50586
+ "spread": {
50587
+ "value": 0,
50588
+ "unit": "px"
50589
+ },
48261
50590
  "inset": false
48262
50591
  },
48263
50592
  {
48264
50593
  "color": "{base.color.neutral.0}",
48265
50594
  "alpha": 0.6,
48266
- "offsetX": "0px",
48267
- "offsetY": "1px",
48268
- "blur": "3px",
48269
- "spread": "0px",
50595
+ "offsetX": {
50596
+ "value": 0,
50597
+ "unit": "px"
50598
+ },
50599
+ "offsetY": {
50600
+ "value": 1,
50601
+ "unit": "px"
50602
+ },
50603
+ "blur": {
50604
+ "value": 3,
50605
+ "unit": "px"
50606
+ },
50607
+ "spread": {
50608
+ "value": 0,
50609
+ "unit": "px"
50610
+ },
48270
50611
  "inset": false
48271
50612
  }
48272
50613
  ],
@@ -48274,6 +50615,10 @@
48274
50615
  "isSource": true,
48275
50616
  "$type": "shadow"
48276
50617
  }
50618
+ },
50619
+ "org.primer.llm": {
50620
+ "usage": ["button", "interactive-card", "clickable-element"],
50621
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48277
50622
  }
48278
50623
  },
48279
50624
  "key": "{shadow.resting.small}"
@@ -48284,8 +50629,9 @@
48284
50629
  },
48285
50630
  "shadow-resting-xsmall": {
48286
50631
  "key": "{shadow.resting.xsmall}",
48287
- "$value": "0px 1px 1px 0px #010409cc",
50632
+ "$value": "0 1px 1px 0 #010409cc",
48288
50633
  "$type": "shadow",
50634
+ "$description": "Extra small resting shadow for minimal elevation",
48289
50635
  "$extensions": {
48290
50636
  "org.primer.figma": {
48291
50637
  "collection": "mode",
@@ -48296,16 +50642,32 @@
48296
50642
  "$value": {
48297
50643
  "color": "#010409",
48298
50644
  "alpha": 0.8,
48299
- "offsetX": "0px",
48300
- "offsetY": "1px",
48301
- "blur": "1px",
48302
- "spread": "0px",
50645
+ "offsetX": {
50646
+ "value": 0,
50647
+ "unit": "px"
50648
+ },
50649
+ "offsetY": {
50650
+ "value": 1,
50651
+ "unit": "px"
50652
+ },
50653
+ "blur": {
50654
+ "value": 1,
50655
+ "unit": "px"
50656
+ },
50657
+ "spread": {
50658
+ "value": 0,
50659
+ "unit": "px"
50660
+ },
48303
50661
  "inset": false
48304
50662
  },
48305
50663
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48306
50664
  "isSource": true,
48307
50665
  "$type": "shadow"
48308
50666
  }
50667
+ },
50668
+ "org.primer.llm": {
50669
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50670
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48309
50671
  }
48310
50672
  },
48311
50673
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48314,13 +50676,26 @@
48314
50676
  "$value": {
48315
50677
  "color": "{base.color.neutral.0}",
48316
50678
  "alpha": 0.8,
48317
- "offsetX": "0px",
48318
- "offsetY": "1px",
48319
- "blur": "1px",
48320
- "spread": "0px",
50679
+ "offsetX": {
50680
+ "value": 0,
50681
+ "unit": "px"
50682
+ },
50683
+ "offsetY": {
50684
+ "value": 1,
50685
+ "unit": "px"
50686
+ },
50687
+ "blur": {
50688
+ "value": 1,
50689
+ "unit": "px"
50690
+ },
50691
+ "spread": {
50692
+ "value": 0,
50693
+ "unit": "px"
50694
+ },
48321
50695
  "inset": false
48322
50696
  },
48323
50697
  "$type": "shadow",
50698
+ "$description": "Extra small resting shadow for minimal elevation",
48324
50699
  "$extensions": {
48325
50700
  "org.primer.figma": {
48326
50701
  "collection": "mode",
@@ -48331,16 +50706,32 @@
48331
50706
  "$value": {
48332
50707
  "color": "{base.color.neutral.0}",
48333
50708
  "alpha": 0.8,
48334
- "offsetX": "0px",
48335
- "offsetY": "1px",
48336
- "blur": "1px",
48337
- "spread": "0px",
50709
+ "offsetX": {
50710
+ "value": 0,
50711
+ "unit": "px"
50712
+ },
50713
+ "offsetY": {
50714
+ "value": 1,
50715
+ "unit": "px"
50716
+ },
50717
+ "blur": {
50718
+ "value": 1,
50719
+ "unit": "px"
50720
+ },
50721
+ "spread": {
50722
+ "value": 0,
50723
+ "unit": "px"
50724
+ },
48338
50725
  "inset": false
48339
50726
  },
48340
50727
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48341
50728
  "isSource": true,
48342
50729
  "$type": "shadow"
48343
50730
  }
50731
+ },
50732
+ "org.primer.llm": {
50733
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50734
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48344
50735
  }
48345
50736
  },
48346
50737
  "key": "{shadow.resting.xsmall}"