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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
@@ -167,7 +167,7 @@
167
167
  },
168
168
  "avatar-shadow": {
169
169
  "key": "{avatar.shadow}",
170
- "$value": "0px 0px 0px 2px #0d1117",
170
+ "$value": "0 0 0 2px #0d1117",
171
171
  "$type": "shadow",
172
172
  "$extensions": {
173
173
  "org.primer.figma": {
@@ -180,10 +180,22 @@
180
180
  {
181
181
  "color": "#0d1117",
182
182
  "alpha": 1,
183
- "offsetX": "0px",
184
- "offsetY": "0px",
185
- "blur": "0px",
186
- "spread": "2px"
183
+ "offsetX": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "offsetY": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "blur": {
192
+ "value": 0,
193
+ "unit": "px"
194
+ },
195
+ "spread": {
196
+ "value": 2,
197
+ "unit": "px"
198
+ }
187
199
  }
188
200
  ],
189
201
  "filePath": "src/tokens/component/avatar.json5",
@@ -199,10 +211,22 @@
199
211
  {
200
212
  "color": "{base.color.neutral.1}",
201
213
  "alpha": 1,
202
- "offsetX": "0px",
203
- "offsetY": "0px",
204
- "blur": "0px",
205
- "spread": "2px"
214
+ "offsetX": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "offsetY": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "blur": {
223
+ "value": 0,
224
+ "unit": "px"
225
+ },
226
+ "spread": {
227
+ "value": 2,
228
+ "unit": "px"
229
+ }
206
230
  }
207
231
  ],
208
232
  "$type": "shadow",
@@ -217,10 +241,22 @@
217
241
  {
218
242
  "color": "{base.color.neutral.1}",
219
243
  "alpha": 1,
220
- "offsetX": "0px",
221
- "offsetY": "0px",
222
- "blur": "0px",
223
- "spread": "2px"
244
+ "offsetX": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "offsetY": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "blur": {
253
+ "value": 0,
254
+ "unit": "px"
255
+ },
256
+ "spread": {
257
+ "value": 2,
258
+ "unit": "px"
259
+ }
224
260
  }
225
261
  ],
226
262
  "filePath": "src/tokens/component/avatar.json5",
@@ -552,6 +588,10 @@
552
588
  },
553
589
  "org.primer.overrides": {
554
590
  "dark": "#010409"
591
+ },
592
+ "org.primer.llm": {
593
+ "doNotUse": true,
594
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
555
595
  }
556
596
  },
557
597
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -568,6 +608,10 @@
568
608
  },
569
609
  "org.primer.overrides": {
570
610
  "dark": "{base.color.neutral.0}"
611
+ },
612
+ "org.primer.llm": {
613
+ "doNotUse": true,
614
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
571
615
  }
572
616
  },
573
617
  "key": "{bgColor.black}"
@@ -2454,6 +2498,10 @@
2454
2498
  },
2455
2499
  "org.primer.overrides": {
2456
2500
  "dark": "#ffffff"
2501
+ },
2502
+ "org.primer.llm": {
2503
+ "doNotUse": true,
2504
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2457
2505
  }
2458
2506
  },
2459
2507
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2470,6 +2518,10 @@
2470
2518
  },
2471
2519
  "org.primer.overrides": {
2472
2520
  "dark": "{base.color.neutral.13}"
2521
+ },
2522
+ "org.primer.llm": {
2523
+ "doNotUse": true,
2524
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2473
2525
  }
2474
2526
  },
2475
2527
  "key": "{bgColor.white}"
@@ -2480,7 +2532,11 @@
2480
2532
  },
2481
2533
  "border-accent-emphasis": {
2482
2534
  "key": "{border.accent.emphasis}",
2483
- "$value": "0.00390625rem,0.0625px solid #1f6feb",
2535
+ "$value": {
2536
+ "color": "#1f6feb",
2537
+ "style": "solid",
2538
+ "width": ["0.0625rem", "1px"]
2539
+ },
2484
2540
  "$type": "border",
2485
2541
  "filePath": "src/tokens/functional/border/border.json5",
2486
2542
  "isSource": true,
@@ -2499,7 +2555,11 @@
2499
2555
  },
2500
2556
  "border-accent-muted": {
2501
2557
  "key": "{border.accent.muted}",
2502
- "$value": "0.00390625rem,0.0625px solid #388bfd66",
2558
+ "$value": {
2559
+ "color": "#388bfd66",
2560
+ "style": "solid",
2561
+ "width": ["0.0625rem", "1px"]
2562
+ },
2503
2563
  "$type": "border",
2504
2564
  "filePath": "src/tokens/functional/border/border.json5",
2505
2565
  "isSource": true,
@@ -2518,7 +2578,11 @@
2518
2578
  },
2519
2579
  "border-attention-emphasis": {
2520
2580
  "key": "{border.attention.emphasis}",
2521
- "$value": "0.00390625rem,0.0625px solid #9e6a03",
2581
+ "$value": {
2582
+ "color": "#9e6a03",
2583
+ "style": "solid",
2584
+ "width": ["0.0625rem", "1px"]
2585
+ },
2522
2586
  "$type": "border",
2523
2587
  "filePath": "src/tokens/functional/border/border.json5",
2524
2588
  "isSource": true,
@@ -2537,7 +2601,11 @@
2537
2601
  },
2538
2602
  "border-attention-muted": {
2539
2603
  "key": "{border.attention.muted}",
2540
- "$value": "0.00390625rem,0.0625px solid #bb800966",
2604
+ "$value": {
2605
+ "color": "#bb800966",
2606
+ "style": "solid",
2607
+ "width": ["0.0625rem", "1px"]
2608
+ },
2541
2609
  "$type": "border",
2542
2610
  "filePath": "src/tokens/functional/border/border.json5",
2543
2611
  "isSource": true,
@@ -2556,7 +2624,11 @@
2556
2624
  },
2557
2625
  "border-closed-emphasis": {
2558
2626
  "key": "{border.closed.emphasis}",
2559
- "$value": "0.00390625rem,0.0625px solid #da3633",
2627
+ "$value": {
2628
+ "color": "#da3633",
2629
+ "style": "solid",
2630
+ "width": ["0.0625rem", "1px"]
2631
+ },
2560
2632
  "$type": "border",
2561
2633
  "filePath": "src/tokens/functional/border/border.json5",
2562
2634
  "isSource": true,
@@ -2571,7 +2643,11 @@
2571
2643
  },
2572
2644
  "border-closed-muted": {
2573
2645
  "key": "{border.closed.muted}",
2574
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2646
+ "$value": {
2647
+ "color": "#f8514966",
2648
+ "style": "solid",
2649
+ "width": ["0.0625rem", "1px"]
2650
+ },
2575
2651
  "$type": "border",
2576
2652
  "filePath": "src/tokens/functional/border/border.json5",
2577
2653
  "isSource": true,
@@ -2586,7 +2662,11 @@
2586
2662
  },
2587
2663
  "border-danger-emphasis": {
2588
2664
  "key": "{border.danger.emphasis}",
2589
- "$value": "0.00390625rem,0.0625px solid #da3633",
2665
+ "$value": {
2666
+ "color": "#da3633",
2667
+ "style": "solid",
2668
+ "width": ["0.0625rem", "1px"]
2669
+ },
2590
2670
  "$type": "border",
2591
2671
  "filePath": "src/tokens/functional/border/border.json5",
2592
2672
  "isSource": true,
@@ -2605,7 +2685,11 @@
2605
2685
  },
2606
2686
  "border-danger-muted": {
2607
2687
  "key": "{border.danger.muted}",
2608
- "$value": "0.00390625rem,0.0625px solid #f8514966",
2688
+ "$value": {
2689
+ "color": "#f8514966",
2690
+ "style": "solid",
2691
+ "width": ["0.0625rem", "1px"]
2692
+ },
2609
2693
  "$type": "border",
2610
2694
  "filePath": "src/tokens/functional/border/border.json5",
2611
2695
  "isSource": true,
@@ -2624,7 +2708,11 @@
2624
2708
  },
2625
2709
  "border-default": {
2626
2710
  "key": "{border.default}",
2627
- "$value": "0.00390625rem,0.0625px solid #3d444d",
2711
+ "$value": {
2712
+ "color": "#3d444d",
2713
+ "style": "solid",
2714
+ "width": ["0.0625rem", "1px"]
2715
+ },
2628
2716
  "$type": "border",
2629
2717
  "filePath": "src/tokens/functional/border/border.json5",
2630
2718
  "isSource": true,
@@ -2643,7 +2731,11 @@
2643
2731
  },
2644
2732
  "border-disabled": {
2645
2733
  "key": "{border.disabled}",
2646
- "$value": "0.00390625rem,0.0625px solid #656c761a",
2734
+ "$value": {
2735
+ "color": "#656c761a",
2736
+ "style": "solid",
2737
+ "width": ["0.0625rem", "1px"]
2738
+ },
2647
2739
  "$type": "border",
2648
2740
  "filePath": "src/tokens/functional/border/border.json5",
2649
2741
  "isSource": true,
@@ -2662,7 +2754,11 @@
2662
2754
  },
2663
2755
  "border-done-emphasis": {
2664
2756
  "key": "{border.done.emphasis}",
2665
- "$value": "0.00390625rem,0.0625px solid #8957e5",
2757
+ "$value": {
2758
+ "color": "#8957e5",
2759
+ "style": "solid",
2760
+ "width": ["0.0625rem", "1px"]
2761
+ },
2666
2762
  "$type": "border",
2667
2763
  "filePath": "src/tokens/functional/border/border.json5",
2668
2764
  "isSource": true,
@@ -2681,7 +2777,11 @@
2681
2777
  },
2682
2778
  "border-done-muted": {
2683
2779
  "key": "{border.done.muted}",
2684
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
2780
+ "$value": {
2781
+ "color": "#ab7df866",
2782
+ "style": "solid",
2783
+ "width": ["0.0625rem", "1px"]
2784
+ },
2685
2785
  "$type": "border",
2686
2786
  "filePath": "src/tokens/functional/border/border.json5",
2687
2787
  "isSource": true,
@@ -2700,7 +2800,11 @@
2700
2800
  },
2701
2801
  "border-emphasis": {
2702
2802
  "key": "{border.emphasis}",
2703
- "$value": "0.00390625rem,0.0625px solid #656c76",
2803
+ "$value": {
2804
+ "color": "#656c76",
2805
+ "style": "solid",
2806
+ "width": ["0.0625rem", "1px"]
2807
+ },
2704
2808
  "$type": "border",
2705
2809
  "filePath": "src/tokens/functional/border/border.json5",
2706
2810
  "isSource": true,
@@ -2719,7 +2823,11 @@
2719
2823
  },
2720
2824
  "border-muted": {
2721
2825
  "key": "{border.muted}",
2722
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2826
+ "$value": {
2827
+ "color": "#3d444db3",
2828
+ "style": "solid",
2829
+ "width": ["0.0625rem", "1px"]
2830
+ },
2723
2831
  "$type": "border",
2724
2832
  "filePath": "src/tokens/functional/border/border.json5",
2725
2833
  "isSource": true,
@@ -2738,7 +2846,11 @@
2738
2846
  },
2739
2847
  "border-neutral-emphasis": {
2740
2848
  "key": "{border.neutral.emphasis}",
2741
- "$value": "0.00390625rem,0.0625px solid #656c76",
2849
+ "$value": {
2850
+ "color": "#656c76",
2851
+ "style": "solid",
2852
+ "width": ["0.0625rem", "1px"]
2853
+ },
2742
2854
  "$type": "border",
2743
2855
  "filePath": "src/tokens/functional/border/border.json5",
2744
2856
  "isSource": true,
@@ -2757,7 +2869,11 @@
2757
2869
  },
2758
2870
  "border-neutral-muted": {
2759
2871
  "key": "{border.neutral.muted}",
2760
- "$value": "0.00390625rem,0.0625px solid #3d444db3",
2872
+ "$value": {
2873
+ "color": "#3d444db3",
2874
+ "style": "solid",
2875
+ "width": ["0.0625rem", "1px"]
2876
+ },
2761
2877
  "$type": "border",
2762
2878
  "filePath": "src/tokens/functional/border/border.json5",
2763
2879
  "isSource": true,
@@ -2776,7 +2892,11 @@
2776
2892
  },
2777
2893
  "border-open-emphasis": {
2778
2894
  "key": "{border.open.emphasis}",
2779
- "$value": "0.00390625rem,0.0625px solid #238636",
2895
+ "$value": {
2896
+ "color": "#238636",
2897
+ "style": "solid",
2898
+ "width": ["0.0625rem", "1px"]
2899
+ },
2780
2900
  "$type": "border",
2781
2901
  "filePath": "src/tokens/functional/border/border.json5",
2782
2902
  "isSource": true,
@@ -2791,7 +2911,11 @@
2791
2911
  },
2792
2912
  "border-open-muted": {
2793
2913
  "key": "{border.open.muted}",
2794
- "$value": "0.00390625rem,0.0625px solid #2ea04366",
2914
+ "$value": {
2915
+ "color": "#2ea04366",
2916
+ "style": "solid",
2917
+ "width": ["0.0625rem", "1px"]
2918
+ },
2795
2919
  "$type": "border",
2796
2920
  "filePath": "src/tokens/functional/border/border.json5",
2797
2921
  "isSource": true,
@@ -2806,7 +2930,11 @@
2806
2930
  },
2807
2931
  "border-severe-emphasis": {
2808
2932
  "key": "{border.severe.emphasis}",
2809
- "$value": "0.00390625rem,0.0625px solid #bd561d",
2933
+ "$value": {
2934
+ "color": "#bd561d",
2935
+ "style": "solid",
2936
+ "width": ["0.0625rem", "1px"]
2937
+ },
2810
2938
  "$type": "border",
2811
2939
  "filePath": "src/tokens/functional/border/border.json5",
2812
2940
  "isSource": true,
@@ -2825,7 +2953,11 @@
2825
2953
  },
2826
2954
  "border-severe-muted": {
2827
2955
  "key": "{border.severe.muted}",
2828
- "$value": "0.00390625rem,0.0625px solid #db6d2866",
2956
+ "$value": {
2957
+ "color": "#db6d2866",
2958
+ "style": "solid",
2959
+ "width": ["0.0625rem", "1px"]
2960
+ },
2829
2961
  "$type": "border",
2830
2962
  "filePath": "src/tokens/functional/border/border.json5",
2831
2963
  "isSource": true,
@@ -2844,7 +2976,11 @@
2844
2976
  },
2845
2977
  "border-sponsors-emphasis": {
2846
2978
  "key": "{border.sponsors.emphasis}",
2847
- "$value": "0.00390625rem,0.0625px solid #bf4b8a",
2979
+ "$value": {
2980
+ "color": "#bf4b8a",
2981
+ "style": "solid",
2982
+ "width": ["0.0625rem", "1px"]
2983
+ },
2848
2984
  "$type": "border",
2849
2985
  "filePath": "src/tokens/functional/border/border.json5",
2850
2986
  "isSource": true,
@@ -2863,7 +2999,11 @@
2863
2999
  },
2864
3000
  "border-sponsors-muted": {
2865
3001
  "key": "{border.sponsors.muted}",
2866
- "$value": "0.00390625rem,0.0625px solid #db61a266",
3002
+ "$value": {
3003
+ "color": "#db61a266",
3004
+ "style": "solid",
3005
+ "width": ["0.0625rem", "1px"]
3006
+ },
2867
3007
  "$type": "border",
2868
3008
  "filePath": "src/tokens/functional/border/border.json5",
2869
3009
  "isSource": true,
@@ -2882,7 +3022,11 @@
2882
3022
  },
2883
3023
  "border-success-emphasis": {
2884
3024
  "key": "{border.success.emphasis}",
2885
- "$value": "0.00390625rem,0.0625px solid #238636",
3025
+ "$value": {
3026
+ "color": "#238636",
3027
+ "style": "solid",
3028
+ "width": ["0.0625rem", "1px"]
3029
+ },
2886
3030
  "$type": "border",
2887
3031
  "filePath": "src/tokens/functional/border/border.json5",
2888
3032
  "isSource": true,
@@ -2901,7 +3045,11 @@
2901
3045
  },
2902
3046
  "border-success-muted": {
2903
3047
  "key": "{border.success.muted}",
2904
- "$value": "0.00390625rem,0.0625px solid #2ea04366",
3048
+ "$value": {
3049
+ "color": "#2ea04366",
3050
+ "style": "solid",
3051
+ "width": ["0.0625rem", "1px"]
3052
+ },
2905
3053
  "$type": "border",
2906
3054
  "filePath": "src/tokens/functional/border/border.json5",
2907
3055
  "isSource": true,
@@ -2920,7 +3068,11 @@
2920
3068
  },
2921
3069
  "border-transparent": {
2922
3070
  "key": "{border.transparent}",
2923
- "$value": "0.00390625rem,0.0625px solid #00000000",
3071
+ "$value": {
3072
+ "color": "#00000000",
3073
+ "style": "solid",
3074
+ "width": ["0.0625rem", "1px"]
3075
+ },
2924
3076
  "$type": "border",
2925
3077
  "filePath": "src/tokens/functional/border/border.json5",
2926
3078
  "isSource": true,
@@ -2939,7 +3091,11 @@
2939
3091
  },
2940
3092
  "border-upsell-emphasis": {
2941
3093
  "key": "{border.upsell.emphasis}",
2942
- "$value": "0.00390625rem,0.0625px solid #8957e5",
3094
+ "$value": {
3095
+ "color": "#8957e5",
3096
+ "style": "solid",
3097
+ "width": ["0.0625rem", "1px"]
3098
+ },
2943
3099
  "$type": "border",
2944
3100
  "filePath": "src/tokens/functional/border/border.json5",
2945
3101
  "isSource": true,
@@ -2958,7 +3114,11 @@
2958
3114
  },
2959
3115
  "border-upsell-muted": {
2960
3116
  "key": "{border.upsell.muted}",
2961
- "$value": "0.00390625rem,0.0625px solid #ab7df866",
3117
+ "$value": {
3118
+ "color": "#ab7df866",
3119
+ "style": "solid",
3120
+ "width": ["0.0625rem", "1px"]
3121
+ },
2962
3122
  "$type": "border",
2963
3123
  "filePath": "src/tokens/functional/border/border.json5",
2964
3124
  "isSource": true,
@@ -6944,7 +7104,7 @@
6944
7104
  },
6945
7105
  "button-danger-shadow-selected": {
6946
7106
  "key": "{button.danger.shadow.selected}",
6947
- "$value": "0px 0px 0px 0px #000000",
7107
+ "$value": "0 0 0 0 #00000000",
6948
7108
  "$type": "shadow",
6949
7109
  "$extensions": {
6950
7110
  "org.primer.figma": {
@@ -6957,10 +7117,22 @@
6957
7117
  {
6958
7118
  "color": "#3d1300",
6959
7119
  "alpha": 0.2,
6960
- "offsetX": "0px",
6961
- "offsetY": "1px",
6962
- "blur": "0px",
6963
- "spread": "0px",
7120
+ "offsetX": {
7121
+ "value": 0,
7122
+ "unit": "px"
7123
+ },
7124
+ "offsetY": {
7125
+ "value": 1,
7126
+ "unit": "px"
7127
+ },
7128
+ "blur": {
7129
+ "value": 0,
7130
+ "unit": "px"
7131
+ },
7132
+ "spread": {
7133
+ "value": 0,
7134
+ "unit": "px"
7135
+ },
6964
7136
  "inset": true
6965
7137
  }
6966
7138
  ],
@@ -6973,10 +7145,22 @@
6973
7145
  {
6974
7146
  "color": "#00000000",
6975
7147
  "alpha": 0,
6976
- "offsetX": "0px",
6977
- "offsetY": "0px",
6978
- "blur": "0px",
6979
- "spread": "0px",
7148
+ "offsetX": {
7149
+ "value": 0,
7150
+ "unit": "px"
7151
+ },
7152
+ "offsetY": {
7153
+ "value": 0,
7154
+ "unit": "px"
7155
+ },
7156
+ "blur": {
7157
+ "value": 0,
7158
+ "unit": "px"
7159
+ },
7160
+ "spread": {
7161
+ "value": 0,
7162
+ "unit": "px"
7163
+ },
6980
7164
  "inset": false
6981
7165
  }
6982
7166
  ],
@@ -6993,10 +7177,22 @@
6993
7177
  {
6994
7178
  "color": "{base.color.transparent}",
6995
7179
  "alpha": 0,
6996
- "offsetX": "0px",
6997
- "offsetY": "0px",
6998
- "blur": "0px",
6999
- "spread": "0px",
7180
+ "offsetX": {
7181
+ "value": 0,
7182
+ "unit": "px"
7183
+ },
7184
+ "offsetY": {
7185
+ "value": 0,
7186
+ "unit": "px"
7187
+ },
7188
+ "blur": {
7189
+ "value": 0,
7190
+ "unit": "px"
7191
+ },
7192
+ "spread": {
7193
+ "value": 0,
7194
+ "unit": "px"
7195
+ },
7000
7196
  "inset": false
7001
7197
  }
7002
7198
  ],
@@ -7012,10 +7208,22 @@
7012
7208
  {
7013
7209
  "color": "{base.color.orange.9}",
7014
7210
  "alpha": 0.2,
7015
- "offsetX": "0px",
7016
- "offsetY": "1px",
7017
- "blur": "0px",
7018
- "spread": "0px",
7211
+ "offsetX": {
7212
+ "value": 0,
7213
+ "unit": "px"
7214
+ },
7215
+ "offsetY": {
7216
+ "value": 1,
7217
+ "unit": "px"
7218
+ },
7219
+ "blur": {
7220
+ "value": 0,
7221
+ "unit": "px"
7222
+ },
7223
+ "spread": {
7224
+ "value": 0,
7225
+ "unit": "px"
7226
+ },
7019
7227
  "inset": true
7020
7228
  }
7021
7229
  ],
@@ -7028,10 +7236,22 @@
7028
7236
  {
7029
7237
  "color": "{base.color.transparent}",
7030
7238
  "alpha": 0,
7031
- "offsetX": "0px",
7032
- "offsetY": "0px",
7033
- "blur": "0px",
7034
- "spread": "0px",
7239
+ "offsetX": {
7240
+ "value": 0,
7241
+ "unit": "px"
7242
+ },
7243
+ "offsetY": {
7244
+ "value": 0,
7245
+ "unit": "px"
7246
+ },
7247
+ "blur": {
7248
+ "value": 0,
7249
+ "unit": "px"
7250
+ },
7251
+ "spread": {
7252
+ "value": 0,
7253
+ "unit": "px"
7254
+ },
7035
7255
  "inset": false
7036
7256
  }
7037
7257
  ],
@@ -7407,7 +7627,7 @@
7407
7627
  },
7408
7628
  "button-default-shadow-resting": {
7409
7629
  "key": "{button.default.shadow.resting}",
7410
- "$value": "0px 0px 0px 0px #000000",
7630
+ "$value": "0 0 0 0 #00000000",
7411
7631
  "$type": "shadow",
7412
7632
  "$extensions": {
7413
7633
  "org.primer.figma": {
@@ -7420,10 +7640,22 @@
7420
7640
  {
7421
7641
  "color": "#00000000",
7422
7642
  "alpha": 0,
7423
- "offsetX": "0px",
7424
- "offsetY": "0px",
7425
- "blur": "0px",
7426
- "spread": "0px",
7643
+ "offsetX": {
7644
+ "value": 0,
7645
+ "unit": "px"
7646
+ },
7647
+ "offsetY": {
7648
+ "value": 0,
7649
+ "unit": "px"
7650
+ },
7651
+ "blur": {
7652
+ "value": 0,
7653
+ "unit": "px"
7654
+ },
7655
+ "spread": {
7656
+ "value": 0,
7657
+ "unit": "px"
7658
+ },
7427
7659
  "inset": false
7428
7660
  }
7429
7661
  ],
@@ -7440,10 +7672,22 @@
7440
7672
  {
7441
7673
  "color": "{base.color.transparent}",
7442
7674
  "alpha": 0,
7443
- "offsetX": "0px",
7444
- "offsetY": "0px",
7445
- "blur": "0px",
7446
- "spread": "0px",
7675
+ "offsetX": {
7676
+ "value": 0,
7677
+ "unit": "px"
7678
+ },
7679
+ "offsetY": {
7680
+ "value": 0,
7681
+ "unit": "px"
7682
+ },
7683
+ "blur": {
7684
+ "value": 0,
7685
+ "unit": "px"
7686
+ },
7687
+ "spread": {
7688
+ "value": 0,
7689
+ "unit": "px"
7690
+ },
7447
7691
  "inset": false
7448
7692
  }
7449
7693
  ],
@@ -7459,10 +7703,22 @@
7459
7703
  {
7460
7704
  "color": "{base.color.transparent}",
7461
7705
  "alpha": 0,
7462
- "offsetX": "0px",
7463
- "offsetY": "0px",
7464
- "blur": "0px",
7465
- "spread": "0px",
7706
+ "offsetX": {
7707
+ "value": 0,
7708
+ "unit": "px"
7709
+ },
7710
+ "offsetY": {
7711
+ "value": 0,
7712
+ "unit": "px"
7713
+ },
7714
+ "blur": {
7715
+ "value": 0,
7716
+ "unit": "px"
7717
+ },
7718
+ "spread": {
7719
+ "value": 0,
7720
+ "unit": "px"
7721
+ },
7466
7722
  "inset": false
7467
7723
  }
7468
7724
  ],
@@ -9166,7 +9422,7 @@
9166
9422
  },
9167
9423
  "button-outline-shadow-selected": {
9168
9424
  "key": "{button.outline.shadow.selected}",
9169
- "$value": "0px 0px 0px 0px #000000",
9425
+ "$value": "0 0 0 0 #00000000",
9170
9426
  "$type": "shadow",
9171
9427
  "$extensions": {
9172
9428
  "org.primer.figma": {
@@ -9179,10 +9435,22 @@
9179
9435
  {
9180
9436
  "color": "#00000000",
9181
9437
  "alpha": 0,
9182
- "offsetX": "0px",
9183
- "offsetY": "0px",
9184
- "blur": "0px",
9185
- "spread": "0px",
9438
+ "offsetX": {
9439
+ "value": 0,
9440
+ "unit": "px"
9441
+ },
9442
+ "offsetY": {
9443
+ "value": 0,
9444
+ "unit": "px"
9445
+ },
9446
+ "blur": {
9447
+ "value": 0,
9448
+ "unit": "px"
9449
+ },
9450
+ "spread": {
9451
+ "value": 0,
9452
+ "unit": "px"
9453
+ },
9186
9454
  "inset": false
9187
9455
  }
9188
9456
  ],
@@ -9199,10 +9467,22 @@
9199
9467
  {
9200
9468
  "color": "{base.color.transparent}",
9201
9469
  "alpha": 0,
9202
- "offsetX": "0px",
9203
- "offsetY": "0px",
9204
- "blur": "0px",
9205
- "spread": "0px",
9470
+ "offsetX": {
9471
+ "value": 0,
9472
+ "unit": "px"
9473
+ },
9474
+ "offsetY": {
9475
+ "value": 0,
9476
+ "unit": "px"
9477
+ },
9478
+ "blur": {
9479
+ "value": 0,
9480
+ "unit": "px"
9481
+ },
9482
+ "spread": {
9483
+ "value": 0,
9484
+ "unit": "px"
9485
+ },
9206
9486
  "inset": false
9207
9487
  }
9208
9488
  ],
@@ -9218,10 +9498,22 @@
9218
9498
  {
9219
9499
  "color": "{base.color.transparent}",
9220
9500
  "alpha": 0,
9221
- "offsetX": "0px",
9222
- "offsetY": "0px",
9223
- "blur": "0px",
9224
- "spread": "0px",
9501
+ "offsetX": {
9502
+ "value": 0,
9503
+ "unit": "px"
9504
+ },
9505
+ "offsetY": {
9506
+ "value": 0,
9507
+ "unit": "px"
9508
+ },
9509
+ "blur": {
9510
+ "value": 0,
9511
+ "unit": "px"
9512
+ },
9513
+ "spread": {
9514
+ "value": 0,
9515
+ "unit": "px"
9516
+ },
9225
9517
  "inset": false
9226
9518
  }
9227
9519
  ],
@@ -10372,7 +10664,7 @@
10372
10664
  },
10373
10665
  "button-primary-shadow-selected": {
10374
10666
  "key": "{button.primary.shadow.selected}",
10375
- "$value": "0px 0px 0px 0px #000000",
10667
+ "$value": "0 0 0 0 #00000000",
10376
10668
  "$type": "shadow",
10377
10669
  "$extensions": {
10378
10670
  "org.primer.figma": {
@@ -10385,10 +10677,22 @@
10385
10677
  {
10386
10678
  "color": "#051d4d",
10387
10679
  "alpha": 0.3,
10388
- "offsetX": "0px",
10389
- "offsetY": "1px",
10390
- "blur": "0px",
10391
- "spread": "0px",
10680
+ "offsetX": {
10681
+ "value": 0,
10682
+ "unit": "px"
10683
+ },
10684
+ "offsetY": {
10685
+ "value": 1,
10686
+ "unit": "px"
10687
+ },
10688
+ "blur": {
10689
+ "value": 0,
10690
+ "unit": "px"
10691
+ },
10692
+ "spread": {
10693
+ "value": 0,
10694
+ "unit": "px"
10695
+ },
10392
10696
  "inset": true
10393
10697
  }
10394
10698
  ],
@@ -10401,10 +10705,22 @@
10401
10705
  {
10402
10706
  "color": "#051d4d",
10403
10707
  "alpha": 0.3,
10404
- "offsetX": "0px",
10405
- "offsetY": "1px",
10406
- "blur": "0px",
10407
- "spread": "0px",
10708
+ "offsetX": {
10709
+ "value": 0,
10710
+ "unit": "px"
10711
+ },
10712
+ "offsetY": {
10713
+ "value": 1,
10714
+ "unit": "px"
10715
+ },
10716
+ "blur": {
10717
+ "value": 0,
10718
+ "unit": "px"
10719
+ },
10720
+ "spread": {
10721
+ "value": 0,
10722
+ "unit": "px"
10723
+ },
10408
10724
  "inset": true
10409
10725
  }
10410
10726
  ],
@@ -10417,10 +10733,22 @@
10417
10733
  {
10418
10734
  "color": "#00000000",
10419
10735
  "alpha": 0,
10420
- "offsetX": "0px",
10421
- "offsetY": "0px",
10422
- "blur": "0px",
10423
- "spread": "0px",
10736
+ "offsetX": {
10737
+ "value": 0,
10738
+ "unit": "px"
10739
+ },
10740
+ "offsetY": {
10741
+ "value": 0,
10742
+ "unit": "px"
10743
+ },
10744
+ "blur": {
10745
+ "value": 0,
10746
+ "unit": "px"
10747
+ },
10748
+ "spread": {
10749
+ "value": 0,
10750
+ "unit": "px"
10751
+ },
10424
10752
  "inset": false
10425
10753
  }
10426
10754
  ],
@@ -10437,10 +10765,22 @@
10437
10765
  {
10438
10766
  "color": "{base.color.transparent}",
10439
10767
  "alpha": 0,
10440
- "offsetX": "0px",
10441
- "offsetY": "0px",
10442
- "blur": "0px",
10443
- "spread": "0px",
10768
+ "offsetX": {
10769
+ "value": 0,
10770
+ "unit": "px"
10771
+ },
10772
+ "offsetY": {
10773
+ "value": 0,
10774
+ "unit": "px"
10775
+ },
10776
+ "blur": {
10777
+ "value": 0,
10778
+ "unit": "px"
10779
+ },
10780
+ "spread": {
10781
+ "value": 0,
10782
+ "unit": "px"
10783
+ },
10444
10784
  "inset": false
10445
10785
  }
10446
10786
  ],
@@ -10456,10 +10796,22 @@
10456
10796
  {
10457
10797
  "color": "{base.color.blue.9}",
10458
10798
  "alpha": 0.3,
10459
- "offsetX": "0px",
10460
- "offsetY": "1px",
10461
- "blur": "0px",
10462
- "spread": "0px",
10799
+ "offsetX": {
10800
+ "value": 0,
10801
+ "unit": "px"
10802
+ },
10803
+ "offsetY": {
10804
+ "value": 1,
10805
+ "unit": "px"
10806
+ },
10807
+ "blur": {
10808
+ "value": 0,
10809
+ "unit": "px"
10810
+ },
10811
+ "spread": {
10812
+ "value": 0,
10813
+ "unit": "px"
10814
+ },
10463
10815
  "inset": true
10464
10816
  }
10465
10817
  ],
@@ -10472,10 +10824,22 @@
10472
10824
  {
10473
10825
  "color": "{base.color.blue.9}",
10474
10826
  "alpha": 0.3,
10475
- "offsetX": "0px",
10476
- "offsetY": "1px",
10477
- "blur": "0px",
10478
- "spread": "0px",
10827
+ "offsetX": {
10828
+ "value": 0,
10829
+ "unit": "px"
10830
+ },
10831
+ "offsetY": {
10832
+ "value": 1,
10833
+ "unit": "px"
10834
+ },
10835
+ "blur": {
10836
+ "value": 0,
10837
+ "unit": "px"
10838
+ },
10839
+ "spread": {
10840
+ "value": 0,
10841
+ "unit": "px"
10842
+ },
10479
10843
  "inset": true
10480
10844
  }
10481
10845
  ],
@@ -10488,10 +10852,22 @@
10488
10852
  {
10489
10853
  "color": "{base.color.transparent}",
10490
10854
  "alpha": 0,
10491
- "offsetX": "0px",
10492
- "offsetY": "0px",
10493
- "blur": "0px",
10494
- "spread": "0px",
10855
+ "offsetX": {
10856
+ "value": 0,
10857
+ "unit": "px"
10858
+ },
10859
+ "offsetY": {
10860
+ "value": 0,
10861
+ "unit": "px"
10862
+ },
10863
+ "blur": {
10864
+ "value": 0,
10865
+ "unit": "px"
10866
+ },
10867
+ "spread": {
10868
+ "value": 0,
10869
+ "unit": "px"
10870
+ },
10495
10871
  "inset": false
10496
10872
  }
10497
10873
  ],
@@ -37242,6 +37618,10 @@
37242
37618
  },
37243
37619
  "org.primer.overrides": {
37244
37620
  "dark": "#010409"
37621
+ },
37622
+ "org.primer.llm": {
37623
+ "doNotUse": true,
37624
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37245
37625
  }
37246
37626
  },
37247
37627
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37258,6 +37638,10 @@
37258
37638
  },
37259
37639
  "org.primer.overrides": {
37260
37640
  "dark": "{base.color.neutral.0}"
37641
+ },
37642
+ "org.primer.llm": {
37643
+ "doNotUse": true,
37644
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37261
37645
  }
37262
37646
  },
37263
37647
  "key": "{fgColor.black}"
@@ -38231,6 +38615,10 @@
38231
38615
  },
38232
38616
  "org.primer.overrides": {
38233
38617
  "dark": "#ffffff"
38618
+ },
38619
+ "org.primer.llm": {
38620
+ "doNotUse": true,
38621
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38234
38622
  }
38235
38623
  },
38236
38624
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38247,6 +38635,10 @@
38247
38635
  },
38248
38636
  "org.primer.overrides": {
38249
38637
  "dark": "{base.color.neutral.13}"
38638
+ },
38639
+ "org.primer.llm": {
38640
+ "doNotUse": true,
38641
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38250
38642
  }
38251
38643
  },
38252
38644
  "key": "{fgColor.white}"
@@ -38272,7 +38664,10 @@
38272
38664
  "$value": {
38273
38665
  "color": "{focus.outlineColor}",
38274
38666
  "style": "solid",
38275
- "width": "2px"
38667
+ "width": {
38668
+ "value": 2,
38669
+ "unit": "px"
38670
+ }
38276
38671
  },
38277
38672
  "$type": "border",
38278
38673
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47431,7 +47826,7 @@
47431
47826
  },
47432
47827
  "shadow-floating-large": {
47433
47828
  "key": "{shadow.floating.large}",
47434
- "$value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47829
+ "$value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47435
47830
  "$type": "shadow",
47436
47831
  "$description": "Large floating shadow for modals and dialogs",
47437
47832
  "$extensions": {
@@ -47445,18 +47840,183 @@
47445
47840
  {
47446
47841
  "color": "#3d444db3",
47447
47842
  "alpha": 1,
47448
- "offsetX": "0px",
47449
- "offsetY": "0px",
47450
- "blur": "0px",
47451
- "spread": "1px"
47843
+ "offsetX": {
47844
+ "value": 0,
47845
+ "unit": "px"
47846
+ },
47847
+ "offsetY": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ },
47851
+ "blur": {
47852
+ "value": 0,
47853
+ "unit": "px"
47854
+ },
47855
+ "spread": {
47856
+ "value": 1,
47857
+ "unit": "px"
47858
+ }
47452
47859
  },
47453
47860
  {
47454
47861
  "color": "#010409",
47455
47862
  "alpha": 1,
47456
- "offsetX": "0px",
47457
- "offsetY": "24px",
47458
- "blur": "48px",
47459
- "spread": "0px"
47863
+ "offsetX": {
47864
+ "value": 0,
47865
+ "unit": "px"
47866
+ },
47867
+ "offsetY": {
47868
+ "value": 24,
47869
+ "unit": "px"
47870
+ },
47871
+ "blur": {
47872
+ "value": 48,
47873
+ "unit": "px"
47874
+ },
47875
+ "spread": {
47876
+ "value": 0,
47877
+ "unit": "px"
47878
+ }
47879
+ }
47880
+ ],
47881
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47882
+ "isSource": true,
47883
+ "$type": "shadow"
47884
+ },
47885
+ "light-high-contrast": {
47886
+ "$value": [
47887
+ {
47888
+ "color": "#3d444db3",
47889
+ "alpha": 1,
47890
+ "offsetX": {
47891
+ "value": 0,
47892
+ "unit": "px"
47893
+ },
47894
+ "offsetY": {
47895
+ "value": 0,
47896
+ "unit": "px"
47897
+ },
47898
+ "blur": {
47899
+ "value": 0,
47900
+ "unit": "px"
47901
+ },
47902
+ "spread": {
47903
+ "value": 1,
47904
+ "unit": "px"
47905
+ }
47906
+ },
47907
+ {
47908
+ "color": "#f0f6fc",
47909
+ "alpha": 0.24,
47910
+ "offsetX": {
47911
+ "value": 0,
47912
+ "unit": "px"
47913
+ },
47914
+ "offsetY": {
47915
+ "value": 40,
47916
+ "unit": "px"
47917
+ },
47918
+ "blur": {
47919
+ "value": 80,
47920
+ "unit": "px"
47921
+ },
47922
+ "spread": {
47923
+ "value": 0,
47924
+ "unit": "px"
47925
+ }
47926
+ }
47927
+ ],
47928
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47929
+ "isSource": true,
47930
+ "$type": "shadow"
47931
+ },
47932
+ "light-protanopia-deuteranopia-high-contrast": {
47933
+ "$value": [
47934
+ {
47935
+ "color": "#3d444db3",
47936
+ "alpha": 1,
47937
+ "offsetX": {
47938
+ "value": 0,
47939
+ "unit": "px"
47940
+ },
47941
+ "offsetY": {
47942
+ "value": 0,
47943
+ "unit": "px"
47944
+ },
47945
+ "blur": {
47946
+ "value": 0,
47947
+ "unit": "px"
47948
+ },
47949
+ "spread": {
47950
+ "value": 1,
47951
+ "unit": "px"
47952
+ }
47953
+ },
47954
+ {
47955
+ "color": "#f0f6fc",
47956
+ "alpha": 0.24,
47957
+ "offsetX": {
47958
+ "value": 0,
47959
+ "unit": "px"
47960
+ },
47961
+ "offsetY": {
47962
+ "value": 40,
47963
+ "unit": "px"
47964
+ },
47965
+ "blur": {
47966
+ "value": 80,
47967
+ "unit": "px"
47968
+ },
47969
+ "spread": {
47970
+ "value": 0,
47971
+ "unit": "px"
47972
+ }
47973
+ }
47974
+ ],
47975
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47976
+ "isSource": true,
47977
+ "$type": "shadow"
47978
+ },
47979
+ "light-tritanopia-high-contrast": {
47980
+ "$value": [
47981
+ {
47982
+ "color": "#3d444db3",
47983
+ "alpha": 1,
47984
+ "offsetX": {
47985
+ "value": 0,
47986
+ "unit": "px"
47987
+ },
47988
+ "offsetY": {
47989
+ "value": 0,
47990
+ "unit": "px"
47991
+ },
47992
+ "blur": {
47993
+ "value": 0,
47994
+ "unit": "px"
47995
+ },
47996
+ "spread": {
47997
+ "value": 1,
47998
+ "unit": "px"
47999
+ }
48000
+ },
48001
+ {
48002
+ "color": "#f0f6fc",
48003
+ "alpha": 0.24,
48004
+ "offsetX": {
48005
+ "value": 0,
48006
+ "unit": "px"
48007
+ },
48008
+ "offsetY": {
48009
+ "value": 40,
48010
+ "unit": "px"
48011
+ },
48012
+ "blur": {
48013
+ "value": 80,
48014
+ "unit": "px"
48015
+ },
48016
+ "spread": {
48017
+ "value": 0,
48018
+ "unit": "px"
48019
+ }
47460
48020
  }
47461
48021
  ],
47462
48022
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47476,18 +48036,42 @@
47476
48036
  {
47477
48037
  "color": "{overlay.borderColor}",
47478
48038
  "alpha": 1,
47479
- "offsetX": "0px",
47480
- "offsetY": "0px",
47481
- "blur": "0px",
47482
- "spread": "1px"
48039
+ "offsetX": {
48040
+ "value": 0,
48041
+ "unit": "px"
48042
+ },
48043
+ "offsetY": {
48044
+ "value": 0,
48045
+ "unit": "px"
48046
+ },
48047
+ "blur": {
48048
+ "value": 0,
48049
+ "unit": "px"
48050
+ },
48051
+ "spread": {
48052
+ "value": 1,
48053
+ "unit": "px"
48054
+ }
47483
48055
  },
47484
48056
  {
47485
48057
  "color": "{base.color.neutral.0}",
47486
48058
  "alpha": 1,
47487
- "offsetX": "0px",
47488
- "offsetY": "24px",
47489
- "blur": "48px",
47490
- "spread": "0px"
48059
+ "offsetX": {
48060
+ "value": 0,
48061
+ "unit": "px"
48062
+ },
48063
+ "offsetY": {
48064
+ "value": 24,
48065
+ "unit": "px"
48066
+ },
48067
+ "blur": {
48068
+ "value": 48,
48069
+ "unit": "px"
48070
+ },
48071
+ "spread": {
48072
+ "value": 0,
48073
+ "unit": "px"
48074
+ }
47491
48075
  }
47492
48076
  ],
47493
48077
  "$type": "shadow",
@@ -47503,18 +48087,183 @@
47503
48087
  {
47504
48088
  "color": "{overlay.borderColor}",
47505
48089
  "alpha": 1,
47506
- "offsetX": "0px",
47507
- "offsetY": "0px",
47508
- "blur": "0px",
47509
- "spread": "1px"
48090
+ "offsetX": {
48091
+ "value": 0,
48092
+ "unit": "px"
48093
+ },
48094
+ "offsetY": {
48095
+ "value": 0,
48096
+ "unit": "px"
48097
+ },
48098
+ "blur": {
48099
+ "value": 0,
48100
+ "unit": "px"
48101
+ },
48102
+ "spread": {
48103
+ "value": 1,
48104
+ "unit": "px"
48105
+ }
47510
48106
  },
47511
48107
  {
47512
48108
  "color": "{base.color.neutral.0}",
47513
48109
  "alpha": 1,
47514
- "offsetX": "0px",
47515
- "offsetY": "24px",
47516
- "blur": "48px",
47517
- "spread": "0px"
48110
+ "offsetX": {
48111
+ "value": 0,
48112
+ "unit": "px"
48113
+ },
48114
+ "offsetY": {
48115
+ "value": 24,
48116
+ "unit": "px"
48117
+ },
48118
+ "blur": {
48119
+ "value": 48,
48120
+ "unit": "px"
48121
+ },
48122
+ "spread": {
48123
+ "value": 0,
48124
+ "unit": "px"
48125
+ }
48126
+ }
48127
+ ],
48128
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48129
+ "isSource": true,
48130
+ "$type": "shadow"
48131
+ },
48132
+ "light-high-contrast": {
48133
+ "$value": [
48134
+ {
48135
+ "color": "{overlay.borderColor}",
48136
+ "alpha": 1,
48137
+ "offsetX": {
48138
+ "value": 0,
48139
+ "unit": "px"
48140
+ },
48141
+ "offsetY": {
48142
+ "value": 0,
48143
+ "unit": "px"
48144
+ },
48145
+ "blur": {
48146
+ "value": 0,
48147
+ "unit": "px"
48148
+ },
48149
+ "spread": {
48150
+ "value": 1,
48151
+ "unit": "px"
48152
+ }
48153
+ },
48154
+ {
48155
+ "color": "{base.color.neutral.12}",
48156
+ "alpha": 0.24,
48157
+ "offsetX": {
48158
+ "value": 0,
48159
+ "unit": "px"
48160
+ },
48161
+ "offsetY": {
48162
+ "value": 40,
48163
+ "unit": "px"
48164
+ },
48165
+ "blur": {
48166
+ "value": 80,
48167
+ "unit": "px"
48168
+ },
48169
+ "spread": {
48170
+ "value": 0,
48171
+ "unit": "px"
48172
+ }
48173
+ }
48174
+ ],
48175
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48176
+ "isSource": true,
48177
+ "$type": "shadow"
48178
+ },
48179
+ "light-protanopia-deuteranopia-high-contrast": {
48180
+ "$value": [
48181
+ {
48182
+ "color": "{overlay.borderColor}",
48183
+ "alpha": 1,
48184
+ "offsetX": {
48185
+ "value": 0,
48186
+ "unit": "px"
48187
+ },
48188
+ "offsetY": {
48189
+ "value": 0,
48190
+ "unit": "px"
48191
+ },
48192
+ "blur": {
48193
+ "value": 0,
48194
+ "unit": "px"
48195
+ },
48196
+ "spread": {
48197
+ "value": 1,
48198
+ "unit": "px"
48199
+ }
48200
+ },
48201
+ {
48202
+ "color": "{base.color.neutral.12}",
48203
+ "alpha": 0.24,
48204
+ "offsetX": {
48205
+ "value": 0,
48206
+ "unit": "px"
48207
+ },
48208
+ "offsetY": {
48209
+ "value": 40,
48210
+ "unit": "px"
48211
+ },
48212
+ "blur": {
48213
+ "value": 80,
48214
+ "unit": "px"
48215
+ },
48216
+ "spread": {
48217
+ "value": 0,
48218
+ "unit": "px"
48219
+ }
48220
+ }
48221
+ ],
48222
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48223
+ "isSource": true,
48224
+ "$type": "shadow"
48225
+ },
48226
+ "light-tritanopia-high-contrast": {
48227
+ "$value": [
48228
+ {
48229
+ "color": "{overlay.borderColor}",
48230
+ "alpha": 1,
48231
+ "offsetX": {
48232
+ "value": 0,
48233
+ "unit": "px"
48234
+ },
48235
+ "offsetY": {
48236
+ "value": 0,
48237
+ "unit": "px"
48238
+ },
48239
+ "blur": {
48240
+ "value": 0,
48241
+ "unit": "px"
48242
+ },
48243
+ "spread": {
48244
+ "value": 1,
48245
+ "unit": "px"
48246
+ }
48247
+ },
48248
+ {
48249
+ "color": "{base.color.neutral.12}",
48250
+ "alpha": 0.24,
48251
+ "offsetX": {
48252
+ "value": 0,
48253
+ "unit": "px"
48254
+ },
48255
+ "offsetY": {
48256
+ "value": 40,
48257
+ "unit": "px"
48258
+ },
48259
+ "blur": {
48260
+ "value": 80,
48261
+ "unit": "px"
48262
+ },
48263
+ "spread": {
48264
+ "value": 0,
48265
+ "unit": "px"
48266
+ }
47518
48267
  }
47519
48268
  ],
47520
48269
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47535,8 +48284,9 @@
47535
48284
  },
47536
48285
  "shadow-floating-legacy": {
47537
48286
  "key": "{shadow.floating.legacy}",
47538
- "$value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48287
+ "$value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47539
48288
  "$type": "shadow",
48289
+ "$description": "Legacy floating shadow for backward compatibility",
47540
48290
  "$extensions": {
47541
48291
  "org.primer.figma": {},
47542
48292
  "org.primer.overrides": {
@@ -47545,24 +48295,52 @@
47545
48295
  {
47546
48296
  "color": "#010409",
47547
48297
  "alpha": 0.4,
47548
- "offsetX": "0px",
47549
- "offsetY": "6px",
47550
- "blur": "12px",
47551
- "spread": "-3px"
48298
+ "offsetX": {
48299
+ "value": 0,
48300
+ "unit": "px"
48301
+ },
48302
+ "offsetY": {
48303
+ "value": 6,
48304
+ "unit": "px"
48305
+ },
48306
+ "blur": {
48307
+ "value": 12,
48308
+ "unit": "px"
48309
+ },
48310
+ "spread": {
48311
+ "value": -3,
48312
+ "unit": "px"
48313
+ }
47552
48314
  },
47553
48315
  {
47554
48316
  "color": "#010409",
47555
48317
  "alpha": 0.4,
47556
- "offsetX": "0px",
47557
- "offsetY": "6px",
47558
- "blur": "18px",
47559
- "spread": "0px"
48318
+ "offsetX": {
48319
+ "value": 0,
48320
+ "unit": "px"
48321
+ },
48322
+ "offsetY": {
48323
+ "value": 6,
48324
+ "unit": "px"
48325
+ },
48326
+ "blur": {
48327
+ "value": 18,
48328
+ "unit": "px"
48329
+ },
48330
+ "spread": {
48331
+ "value": 0,
48332
+ "unit": "px"
48333
+ }
47560
48334
  }
47561
48335
  ],
47562
48336
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47563
48337
  "isSource": true,
47564
48338
  "$type": "shadow"
47565
48339
  }
48340
+ },
48341
+ "org.primer.llm": {
48342
+ "usage": ["legacy-component", "backward-compatibility"],
48343
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47566
48344
  }
47567
48345
  },
47568
48346
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47572,21 +48350,46 @@
47572
48350
  {
47573
48351
  "color": "{base.color.neutral.0}",
47574
48352
  "alpha": 0.4,
47575
- "offsetX": "0px",
47576
- "offsetY": "6px",
47577
- "blur": "12px",
47578
- "spread": "-3px"
48353
+ "offsetX": {
48354
+ "value": 0,
48355
+ "unit": "px"
48356
+ },
48357
+ "offsetY": {
48358
+ "value": 6,
48359
+ "unit": "px"
48360
+ },
48361
+ "blur": {
48362
+ "value": 12,
48363
+ "unit": "px"
48364
+ },
48365
+ "spread": {
48366
+ "value": -3,
48367
+ "unit": "px"
48368
+ }
47579
48369
  },
47580
48370
  {
47581
48371
  "color": "{base.color.neutral.0}",
47582
48372
  "alpha": 0.4,
47583
- "offsetX": "0px",
47584
- "offsetY": "6px",
47585
- "blur": "18px",
47586
- "spread": "0px"
48373
+ "offsetX": {
48374
+ "value": 0,
48375
+ "unit": "px"
48376
+ },
48377
+ "offsetY": {
48378
+ "value": 6,
48379
+ "unit": "px"
48380
+ },
48381
+ "blur": {
48382
+ "value": 18,
48383
+ "unit": "px"
48384
+ },
48385
+ "spread": {
48386
+ "value": 0,
48387
+ "unit": "px"
48388
+ }
47587
48389
  }
47588
48390
  ],
47589
48391
  "$type": "shadow",
48392
+ "$description": "Legacy floating shadow for backward compatibility",
47590
48393
  "$extensions": {
47591
48394
  "org.primer.figma": {},
47592
48395
  "org.primer.overrides": {
@@ -47595,24 +48398,52 @@
47595
48398
  {
47596
48399
  "color": "{base.color.neutral.0}",
47597
48400
  "alpha": 0.4,
47598
- "offsetX": "0px",
47599
- "offsetY": "6px",
47600
- "blur": "12px",
47601
- "spread": "-3px"
48401
+ "offsetX": {
48402
+ "value": 0,
48403
+ "unit": "px"
48404
+ },
48405
+ "offsetY": {
48406
+ "value": 6,
48407
+ "unit": "px"
48408
+ },
48409
+ "blur": {
48410
+ "value": 12,
48411
+ "unit": "px"
48412
+ },
48413
+ "spread": {
48414
+ "value": -3,
48415
+ "unit": "px"
48416
+ }
47602
48417
  },
47603
48418
  {
47604
48419
  "color": "{base.color.neutral.0}",
47605
48420
  "alpha": 0.4,
47606
- "offsetX": "0px",
47607
- "offsetY": "6px",
47608
- "blur": "18px",
47609
- "spread": "0px"
48421
+ "offsetX": {
48422
+ "value": 0,
48423
+ "unit": "px"
48424
+ },
48425
+ "offsetY": {
48426
+ "value": 6,
48427
+ "unit": "px"
48428
+ },
48429
+ "blur": {
48430
+ "value": 18,
48431
+ "unit": "px"
48432
+ },
48433
+ "spread": {
48434
+ "value": 0,
48435
+ "unit": "px"
48436
+ }
47610
48437
  }
47611
48438
  ],
47612
48439
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47613
48440
  "isSource": true,
47614
48441
  "$type": "shadow"
47615
48442
  }
48443
+ },
48444
+ "org.primer.llm": {
48445
+ "usage": ["legacy-component", "backward-compatibility"],
48446
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47616
48447
  }
47617
48448
  },
47618
48449
  "key": "{shadow.floating.legacy}"
@@ -47623,8 +48454,9 @@
47623
48454
  },
47624
48455
  "shadow-floating-medium": {
47625
48456
  "key": "{shadow.floating.medium}",
47626
- "$value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
48457
+ "$value": "0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966",
47627
48458
  "$type": "shadow",
48459
+ "$description": "Medium floating shadow for popovers and action menus",
47628
48460
  "$extensions": {
47629
48461
  "org.primer.figma": {
47630
48462
  "collection": "mode",
@@ -47636,48 +48468,433 @@
47636
48468
  {
47637
48469
  "color": "#3d444db3",
47638
48470
  "alpha": 1,
47639
- "offsetX": "0px",
47640
- "offsetY": "0px",
47641
- "blur": "0px",
47642
- "spread": "1px"
48471
+ "offsetX": {
48472
+ "value": 0,
48473
+ "unit": "px"
48474
+ },
48475
+ "offsetY": {
48476
+ "value": 0,
48477
+ "unit": "px"
48478
+ },
48479
+ "blur": {
48480
+ "value": 0,
48481
+ "unit": "px"
48482
+ },
48483
+ "spread": {
48484
+ "value": 1,
48485
+ "unit": "px"
48486
+ }
47643
48487
  },
47644
48488
  {
47645
48489
  "color": "#010409",
47646
48490
  "alpha": 0.4,
47647
- "offsetX": "0px",
47648
- "offsetY": "8px",
47649
- "blur": "16px",
47650
- "spread": "-4px"
48491
+ "offsetX": {
48492
+ "value": 0,
48493
+ "unit": "px"
48494
+ },
48495
+ "offsetY": {
48496
+ "value": 8,
48497
+ "unit": "px"
48498
+ },
48499
+ "blur": {
48500
+ "value": 16,
48501
+ "unit": "px"
48502
+ },
48503
+ "spread": {
48504
+ "value": -4,
48505
+ "unit": "px"
48506
+ }
47651
48507
  },
47652
48508
  {
47653
48509
  "color": "#010409",
47654
48510
  "alpha": 0.4,
47655
- "offsetX": "0px",
47656
- "offsetY": "4px",
47657
- "blur": "32px",
47658
- "spread": "-4px"
48511
+ "offsetX": {
48512
+ "value": 0,
48513
+ "unit": "px"
48514
+ },
48515
+ "offsetY": {
48516
+ "value": 4,
48517
+ "unit": "px"
48518
+ },
48519
+ "blur": {
48520
+ "value": 32,
48521
+ "unit": "px"
48522
+ },
48523
+ "spread": {
48524
+ "value": -4,
48525
+ "unit": "px"
48526
+ }
47659
48527
  },
47660
48528
  {
47661
48529
  "color": "#010409",
47662
48530
  "alpha": 0.4,
47663
- "offsetX": "0px",
47664
- "offsetY": "24px",
47665
- "blur": "48px",
47666
- "spread": "-12px"
48531
+ "offsetX": {
48532
+ "value": 0,
48533
+ "unit": "px"
48534
+ },
48535
+ "offsetY": {
48536
+ "value": 24,
48537
+ "unit": "px"
48538
+ },
48539
+ "blur": {
48540
+ "value": 48,
48541
+ "unit": "px"
48542
+ },
48543
+ "spread": {
48544
+ "value": -12,
48545
+ "unit": "px"
48546
+ }
47667
48547
  },
47668
48548
  {
47669
48549
  "color": "#010409",
47670
48550
  "alpha": 0.4,
47671
- "offsetX": "0px",
47672
- "offsetY": "48px",
47673
- "blur": "96px",
47674
- "spread": "-24px"
48551
+ "offsetX": {
48552
+ "value": 0,
48553
+ "unit": "px"
48554
+ },
48555
+ "offsetY": {
48556
+ "value": 48,
48557
+ "unit": "px"
48558
+ },
48559
+ "blur": {
48560
+ "value": 96,
48561
+ "unit": "px"
48562
+ },
48563
+ "spread": {
48564
+ "value": -24,
48565
+ "unit": "px"
48566
+ }
48567
+ }
48568
+ ],
48569
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48570
+ "isSource": true,
48571
+ "$type": "shadow"
48572
+ },
48573
+ "light-high-contrast": {
48574
+ "$value": [
48575
+ {
48576
+ "color": "#3d444db3",
48577
+ "alpha": 1,
48578
+ "offsetX": {
48579
+ "value": 0,
48580
+ "unit": "px"
48581
+ },
48582
+ "offsetY": {
48583
+ "value": 0,
48584
+ "unit": "px"
48585
+ },
48586
+ "blur": {
48587
+ "value": 0,
48588
+ "unit": "px"
48589
+ },
48590
+ "spread": {
48591
+ "value": 1,
48592
+ "unit": "px"
48593
+ }
48594
+ },
48595
+ {
48596
+ "color": "#f0f6fc",
48597
+ "alpha": 0.08,
48598
+ "offsetX": {
48599
+ "value": 0,
48600
+ "unit": "px"
48601
+ },
48602
+ "offsetY": {
48603
+ "value": 8,
48604
+ "unit": "px"
48605
+ },
48606
+ "blur": {
48607
+ "value": 16,
48608
+ "unit": "px"
48609
+ },
48610
+ "spread": {
48611
+ "value": -4,
48612
+ "unit": "px"
48613
+ }
48614
+ },
48615
+ {
48616
+ "color": "#f0f6fc",
48617
+ "alpha": 0.08,
48618
+ "offsetX": {
48619
+ "value": 0,
48620
+ "unit": "px"
48621
+ },
48622
+ "offsetY": {
48623
+ "value": 4,
48624
+ "unit": "px"
48625
+ },
48626
+ "blur": {
48627
+ "value": 32,
48628
+ "unit": "px"
48629
+ },
48630
+ "spread": {
48631
+ "value": -4,
48632
+ "unit": "px"
48633
+ }
48634
+ },
48635
+ {
48636
+ "color": "#f0f6fc",
48637
+ "alpha": 0.08,
48638
+ "offsetX": {
48639
+ "value": 0,
48640
+ "unit": "px"
48641
+ },
48642
+ "offsetY": {
48643
+ "value": 24,
48644
+ "unit": "px"
48645
+ },
48646
+ "blur": {
48647
+ "value": 48,
48648
+ "unit": "px"
48649
+ },
48650
+ "spread": {
48651
+ "value": -12,
48652
+ "unit": "px"
48653
+ }
48654
+ },
48655
+ {
48656
+ "color": "#f0f6fc",
48657
+ "alpha": 0.08,
48658
+ "offsetX": {
48659
+ "value": 0,
48660
+ "unit": "px"
48661
+ },
48662
+ "offsetY": {
48663
+ "value": 48,
48664
+ "unit": "px"
48665
+ },
48666
+ "blur": {
48667
+ "value": 96,
48668
+ "unit": "px"
48669
+ },
48670
+ "spread": {
48671
+ "value": -24,
48672
+ "unit": "px"
48673
+ }
48674
+ }
48675
+ ],
48676
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48677
+ "isSource": true,
48678
+ "$type": "shadow"
48679
+ },
48680
+ "light-protanopia-deuteranopia-high-contrast": {
48681
+ "$value": [
48682
+ {
48683
+ "color": "#3d444db3",
48684
+ "alpha": 1,
48685
+ "offsetX": {
48686
+ "value": 0,
48687
+ "unit": "px"
48688
+ },
48689
+ "offsetY": {
48690
+ "value": 0,
48691
+ "unit": "px"
48692
+ },
48693
+ "blur": {
48694
+ "value": 0,
48695
+ "unit": "px"
48696
+ },
48697
+ "spread": {
48698
+ "value": 1,
48699
+ "unit": "px"
48700
+ }
48701
+ },
48702
+ {
48703
+ "color": "#f0f6fc",
48704
+ "alpha": 0.08,
48705
+ "offsetX": {
48706
+ "value": 0,
48707
+ "unit": "px"
48708
+ },
48709
+ "offsetY": {
48710
+ "value": 8,
48711
+ "unit": "px"
48712
+ },
48713
+ "blur": {
48714
+ "value": 16,
48715
+ "unit": "px"
48716
+ },
48717
+ "spread": {
48718
+ "value": -4,
48719
+ "unit": "px"
48720
+ }
48721
+ },
48722
+ {
48723
+ "color": "#f0f6fc",
48724
+ "alpha": 0.08,
48725
+ "offsetX": {
48726
+ "value": 0,
48727
+ "unit": "px"
48728
+ },
48729
+ "offsetY": {
48730
+ "value": 4,
48731
+ "unit": "px"
48732
+ },
48733
+ "blur": {
48734
+ "value": 32,
48735
+ "unit": "px"
48736
+ },
48737
+ "spread": {
48738
+ "value": -4,
48739
+ "unit": "px"
48740
+ }
48741
+ },
48742
+ {
48743
+ "color": "#f0f6fc",
48744
+ "alpha": 0.08,
48745
+ "offsetX": {
48746
+ "value": 0,
48747
+ "unit": "px"
48748
+ },
48749
+ "offsetY": {
48750
+ "value": 24,
48751
+ "unit": "px"
48752
+ },
48753
+ "blur": {
48754
+ "value": 48,
48755
+ "unit": "px"
48756
+ },
48757
+ "spread": {
48758
+ "value": -12,
48759
+ "unit": "px"
48760
+ }
48761
+ },
48762
+ {
48763
+ "color": "#f0f6fc",
48764
+ "alpha": 0.08,
48765
+ "offsetX": {
48766
+ "value": 0,
48767
+ "unit": "px"
48768
+ },
48769
+ "offsetY": {
48770
+ "value": 48,
48771
+ "unit": "px"
48772
+ },
48773
+ "blur": {
48774
+ "value": 96,
48775
+ "unit": "px"
48776
+ },
48777
+ "spread": {
48778
+ "value": -24,
48779
+ "unit": "px"
48780
+ }
48781
+ }
48782
+ ],
48783
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48784
+ "isSource": true,
48785
+ "$type": "shadow"
48786
+ },
48787
+ "light-tritanopia-high-contrast": {
48788
+ "$value": [
48789
+ {
48790
+ "color": "#3d444db3",
48791
+ "alpha": 1,
48792
+ "offsetX": {
48793
+ "value": 0,
48794
+ "unit": "px"
48795
+ },
48796
+ "offsetY": {
48797
+ "value": 0,
48798
+ "unit": "px"
48799
+ },
48800
+ "blur": {
48801
+ "value": 0,
48802
+ "unit": "px"
48803
+ },
48804
+ "spread": {
48805
+ "value": 1,
48806
+ "unit": "px"
48807
+ }
48808
+ },
48809
+ {
48810
+ "color": "#f0f6fc",
48811
+ "alpha": 0.08,
48812
+ "offsetX": {
48813
+ "value": 0,
48814
+ "unit": "px"
48815
+ },
48816
+ "offsetY": {
48817
+ "value": 8,
48818
+ "unit": "px"
48819
+ },
48820
+ "blur": {
48821
+ "value": 16,
48822
+ "unit": "px"
48823
+ },
48824
+ "spread": {
48825
+ "value": -4,
48826
+ "unit": "px"
48827
+ }
48828
+ },
48829
+ {
48830
+ "color": "#f0f6fc",
48831
+ "alpha": 0.08,
48832
+ "offsetX": {
48833
+ "value": 0,
48834
+ "unit": "px"
48835
+ },
48836
+ "offsetY": {
48837
+ "value": 4,
48838
+ "unit": "px"
48839
+ },
48840
+ "blur": {
48841
+ "value": 32,
48842
+ "unit": "px"
48843
+ },
48844
+ "spread": {
48845
+ "value": -4,
48846
+ "unit": "px"
48847
+ }
48848
+ },
48849
+ {
48850
+ "color": "#f0f6fc",
48851
+ "alpha": 0.08,
48852
+ "offsetX": {
48853
+ "value": 0,
48854
+ "unit": "px"
48855
+ },
48856
+ "offsetY": {
48857
+ "value": 24,
48858
+ "unit": "px"
48859
+ },
48860
+ "blur": {
48861
+ "value": 48,
48862
+ "unit": "px"
48863
+ },
48864
+ "spread": {
48865
+ "value": -12,
48866
+ "unit": "px"
48867
+ }
48868
+ },
48869
+ {
48870
+ "color": "#f0f6fc",
48871
+ "alpha": 0.08,
48872
+ "offsetX": {
48873
+ "value": 0,
48874
+ "unit": "px"
48875
+ },
48876
+ "offsetY": {
48877
+ "value": 48,
48878
+ "unit": "px"
48879
+ },
48880
+ "blur": {
48881
+ "value": 96,
48882
+ "unit": "px"
48883
+ },
48884
+ "spread": {
48885
+ "value": -24,
48886
+ "unit": "px"
48887
+ }
47675
48888
  }
47676
48889
  ],
47677
48890
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47678
48891
  "isSource": true,
47679
48892
  "$type": "shadow"
47680
48893
  }
48894
+ },
48895
+ "org.primer.llm": {
48896
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48897
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47681
48898
  }
47682
48899
  },
47683
48900
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47687,45 +48904,106 @@
47687
48904
  {
47688
48905
  "color": "{overlay.borderColor}",
47689
48906
  "alpha": 1,
47690
- "offsetX": "0px",
47691
- "offsetY": "0px",
47692
- "blur": "0px",
47693
- "spread": "1px"
48907
+ "offsetX": {
48908
+ "value": 0,
48909
+ "unit": "px"
48910
+ },
48911
+ "offsetY": {
48912
+ "value": 0,
48913
+ "unit": "px"
48914
+ },
48915
+ "blur": {
48916
+ "value": 0,
48917
+ "unit": "px"
48918
+ },
48919
+ "spread": {
48920
+ "value": 1,
48921
+ "unit": "px"
48922
+ }
47694
48923
  },
47695
48924
  {
47696
48925
  "color": "{base.color.neutral.0}",
47697
48926
  "alpha": 0.4,
47698
- "offsetX": "0px",
47699
- "offsetY": "8px",
47700
- "blur": "16px",
47701
- "spread": "-4px"
48927
+ "offsetX": {
48928
+ "value": 0,
48929
+ "unit": "px"
48930
+ },
48931
+ "offsetY": {
48932
+ "value": 8,
48933
+ "unit": "px"
48934
+ },
48935
+ "blur": {
48936
+ "value": 16,
48937
+ "unit": "px"
48938
+ },
48939
+ "spread": {
48940
+ "value": -4,
48941
+ "unit": "px"
48942
+ }
47702
48943
  },
47703
48944
  {
47704
48945
  "color": "{base.color.neutral.0}",
47705
48946
  "alpha": 0.4,
47706
- "offsetX": "0px",
47707
- "offsetY": "4px",
47708
- "blur": "32px",
47709
- "spread": "-4px"
48947
+ "offsetX": {
48948
+ "value": 0,
48949
+ "unit": "px"
48950
+ },
48951
+ "offsetY": {
48952
+ "value": 4,
48953
+ "unit": "px"
48954
+ },
48955
+ "blur": {
48956
+ "value": 32,
48957
+ "unit": "px"
48958
+ },
48959
+ "spread": {
48960
+ "value": -4,
48961
+ "unit": "px"
48962
+ }
47710
48963
  },
47711
48964
  {
47712
48965
  "color": "{base.color.neutral.0}",
47713
48966
  "alpha": 0.4,
47714
- "offsetX": "0px",
47715
- "offsetY": "24px",
47716
- "blur": "48px",
47717
- "spread": "-12px"
48967
+ "offsetX": {
48968
+ "value": 0,
48969
+ "unit": "px"
48970
+ },
48971
+ "offsetY": {
48972
+ "value": 24,
48973
+ "unit": "px"
48974
+ },
48975
+ "blur": {
48976
+ "value": 48,
48977
+ "unit": "px"
48978
+ },
48979
+ "spread": {
48980
+ "value": -12,
48981
+ "unit": "px"
48982
+ }
47718
48983
  },
47719
48984
  {
47720
48985
  "color": "{base.color.neutral.0}",
47721
48986
  "alpha": 0.4,
47722
- "offsetX": "0px",
47723
- "offsetY": "48px",
47724
- "blur": "96px",
47725
- "spread": "-24px"
48987
+ "offsetX": {
48988
+ "value": 0,
48989
+ "unit": "px"
48990
+ },
48991
+ "offsetY": {
48992
+ "value": 48,
48993
+ "unit": "px"
48994
+ },
48995
+ "blur": {
48996
+ "value": 96,
48997
+ "unit": "px"
48998
+ },
48999
+ "spread": {
49000
+ "value": -24,
49001
+ "unit": "px"
49002
+ }
47726
49003
  }
47727
49004
  ],
47728
49005
  "$type": "shadow",
49006
+ "$description": "Medium floating shadow for popovers and action menus",
47729
49007
  "$extensions": {
47730
49008
  "org.primer.figma": {
47731
49009
  "collection": "mode",
@@ -47737,48 +49015,433 @@
47737
49015
  {
47738
49016
  "color": "{overlay.borderColor}",
47739
49017
  "alpha": 1,
47740
- "offsetX": "0px",
47741
- "offsetY": "0px",
47742
- "blur": "0px",
47743
- "spread": "1px"
49018
+ "offsetX": {
49019
+ "value": 0,
49020
+ "unit": "px"
49021
+ },
49022
+ "offsetY": {
49023
+ "value": 0,
49024
+ "unit": "px"
49025
+ },
49026
+ "blur": {
49027
+ "value": 0,
49028
+ "unit": "px"
49029
+ },
49030
+ "spread": {
49031
+ "value": 1,
49032
+ "unit": "px"
49033
+ }
47744
49034
  },
47745
49035
  {
47746
49036
  "color": "{base.color.neutral.0}",
47747
49037
  "alpha": 0.4,
47748
- "offsetX": "0px",
47749
- "offsetY": "8px",
47750
- "blur": "16px",
47751
- "spread": "-4px"
49038
+ "offsetX": {
49039
+ "value": 0,
49040
+ "unit": "px"
49041
+ },
49042
+ "offsetY": {
49043
+ "value": 8,
49044
+ "unit": "px"
49045
+ },
49046
+ "blur": {
49047
+ "value": 16,
49048
+ "unit": "px"
49049
+ },
49050
+ "spread": {
49051
+ "value": -4,
49052
+ "unit": "px"
49053
+ }
47752
49054
  },
47753
49055
  {
47754
49056
  "color": "{base.color.neutral.0}",
47755
49057
  "alpha": 0.4,
47756
- "offsetX": "0px",
47757
- "offsetY": "4px",
47758
- "blur": "32px",
47759
- "spread": "-4px"
49058
+ "offsetX": {
49059
+ "value": 0,
49060
+ "unit": "px"
49061
+ },
49062
+ "offsetY": {
49063
+ "value": 4,
49064
+ "unit": "px"
49065
+ },
49066
+ "blur": {
49067
+ "value": 32,
49068
+ "unit": "px"
49069
+ },
49070
+ "spread": {
49071
+ "value": -4,
49072
+ "unit": "px"
49073
+ }
47760
49074
  },
47761
49075
  {
47762
49076
  "color": "{base.color.neutral.0}",
47763
49077
  "alpha": 0.4,
47764
- "offsetX": "0px",
47765
- "offsetY": "24px",
47766
- "blur": "48px",
47767
- "spread": "-12px"
49078
+ "offsetX": {
49079
+ "value": 0,
49080
+ "unit": "px"
49081
+ },
49082
+ "offsetY": {
49083
+ "value": 24,
49084
+ "unit": "px"
49085
+ },
49086
+ "blur": {
49087
+ "value": 48,
49088
+ "unit": "px"
49089
+ },
49090
+ "spread": {
49091
+ "value": -12,
49092
+ "unit": "px"
49093
+ }
47768
49094
  },
47769
49095
  {
47770
49096
  "color": "{base.color.neutral.0}",
47771
49097
  "alpha": 0.4,
47772
- "offsetX": "0px",
47773
- "offsetY": "48px",
47774
- "blur": "96px",
47775
- "spread": "-24px"
49098
+ "offsetX": {
49099
+ "value": 0,
49100
+ "unit": "px"
49101
+ },
49102
+ "offsetY": {
49103
+ "value": 48,
49104
+ "unit": "px"
49105
+ },
49106
+ "blur": {
49107
+ "value": 96,
49108
+ "unit": "px"
49109
+ },
49110
+ "spread": {
49111
+ "value": -24,
49112
+ "unit": "px"
49113
+ }
49114
+ }
49115
+ ],
49116
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49117
+ "isSource": true,
49118
+ "$type": "shadow"
49119
+ },
49120
+ "light-high-contrast": {
49121
+ "$value": [
49122
+ {
49123
+ "color": "{overlay.borderColor}",
49124
+ "alpha": 1,
49125
+ "offsetX": {
49126
+ "value": 0,
49127
+ "unit": "px"
49128
+ },
49129
+ "offsetY": {
49130
+ "value": 0,
49131
+ "unit": "px"
49132
+ },
49133
+ "blur": {
49134
+ "value": 0,
49135
+ "unit": "px"
49136
+ },
49137
+ "spread": {
49138
+ "value": 1,
49139
+ "unit": "px"
49140
+ }
49141
+ },
49142
+ {
49143
+ "color": "{base.color.neutral.12}",
49144
+ "alpha": 0.08,
49145
+ "offsetX": {
49146
+ "value": 0,
49147
+ "unit": "px"
49148
+ },
49149
+ "offsetY": {
49150
+ "value": 8,
49151
+ "unit": "px"
49152
+ },
49153
+ "blur": {
49154
+ "value": 16,
49155
+ "unit": "px"
49156
+ },
49157
+ "spread": {
49158
+ "value": -4,
49159
+ "unit": "px"
49160
+ }
49161
+ },
49162
+ {
49163
+ "color": "{base.color.neutral.12}",
49164
+ "alpha": 0.08,
49165
+ "offsetX": {
49166
+ "value": 0,
49167
+ "unit": "px"
49168
+ },
49169
+ "offsetY": {
49170
+ "value": 4,
49171
+ "unit": "px"
49172
+ },
49173
+ "blur": {
49174
+ "value": 32,
49175
+ "unit": "px"
49176
+ },
49177
+ "spread": {
49178
+ "value": -4,
49179
+ "unit": "px"
49180
+ }
49181
+ },
49182
+ {
49183
+ "color": "{base.color.neutral.12}",
49184
+ "alpha": 0.08,
49185
+ "offsetX": {
49186
+ "value": 0,
49187
+ "unit": "px"
49188
+ },
49189
+ "offsetY": {
49190
+ "value": 24,
49191
+ "unit": "px"
49192
+ },
49193
+ "blur": {
49194
+ "value": 48,
49195
+ "unit": "px"
49196
+ },
49197
+ "spread": {
49198
+ "value": -12,
49199
+ "unit": "px"
49200
+ }
49201
+ },
49202
+ {
49203
+ "color": "{base.color.neutral.12}",
49204
+ "alpha": 0.08,
49205
+ "offsetX": {
49206
+ "value": 0,
49207
+ "unit": "px"
49208
+ },
49209
+ "offsetY": {
49210
+ "value": 48,
49211
+ "unit": "px"
49212
+ },
49213
+ "blur": {
49214
+ "value": 96,
49215
+ "unit": "px"
49216
+ },
49217
+ "spread": {
49218
+ "value": -24,
49219
+ "unit": "px"
49220
+ }
49221
+ }
49222
+ ],
49223
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49224
+ "isSource": true,
49225
+ "$type": "shadow"
49226
+ },
49227
+ "light-protanopia-deuteranopia-high-contrast": {
49228
+ "$value": [
49229
+ {
49230
+ "color": "{overlay.borderColor}",
49231
+ "alpha": 1,
49232
+ "offsetX": {
49233
+ "value": 0,
49234
+ "unit": "px"
49235
+ },
49236
+ "offsetY": {
49237
+ "value": 0,
49238
+ "unit": "px"
49239
+ },
49240
+ "blur": {
49241
+ "value": 0,
49242
+ "unit": "px"
49243
+ },
49244
+ "spread": {
49245
+ "value": 1,
49246
+ "unit": "px"
49247
+ }
49248
+ },
49249
+ {
49250
+ "color": "{base.color.neutral.12}",
49251
+ "alpha": 0.08,
49252
+ "offsetX": {
49253
+ "value": 0,
49254
+ "unit": "px"
49255
+ },
49256
+ "offsetY": {
49257
+ "value": 8,
49258
+ "unit": "px"
49259
+ },
49260
+ "blur": {
49261
+ "value": 16,
49262
+ "unit": "px"
49263
+ },
49264
+ "spread": {
49265
+ "value": -4,
49266
+ "unit": "px"
49267
+ }
49268
+ },
49269
+ {
49270
+ "color": "{base.color.neutral.12}",
49271
+ "alpha": 0.08,
49272
+ "offsetX": {
49273
+ "value": 0,
49274
+ "unit": "px"
49275
+ },
49276
+ "offsetY": {
49277
+ "value": 4,
49278
+ "unit": "px"
49279
+ },
49280
+ "blur": {
49281
+ "value": 32,
49282
+ "unit": "px"
49283
+ },
49284
+ "spread": {
49285
+ "value": -4,
49286
+ "unit": "px"
49287
+ }
49288
+ },
49289
+ {
49290
+ "color": "{base.color.neutral.12}",
49291
+ "alpha": 0.08,
49292
+ "offsetX": {
49293
+ "value": 0,
49294
+ "unit": "px"
49295
+ },
49296
+ "offsetY": {
49297
+ "value": 24,
49298
+ "unit": "px"
49299
+ },
49300
+ "blur": {
49301
+ "value": 48,
49302
+ "unit": "px"
49303
+ },
49304
+ "spread": {
49305
+ "value": -12,
49306
+ "unit": "px"
49307
+ }
49308
+ },
49309
+ {
49310
+ "color": "{base.color.neutral.12}",
49311
+ "alpha": 0.08,
49312
+ "offsetX": {
49313
+ "value": 0,
49314
+ "unit": "px"
49315
+ },
49316
+ "offsetY": {
49317
+ "value": 48,
49318
+ "unit": "px"
49319
+ },
49320
+ "blur": {
49321
+ "value": 96,
49322
+ "unit": "px"
49323
+ },
49324
+ "spread": {
49325
+ "value": -24,
49326
+ "unit": "px"
49327
+ }
49328
+ }
49329
+ ],
49330
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49331
+ "isSource": true,
49332
+ "$type": "shadow"
49333
+ },
49334
+ "light-tritanopia-high-contrast": {
49335
+ "$value": [
49336
+ {
49337
+ "color": "{overlay.borderColor}",
49338
+ "alpha": 1,
49339
+ "offsetX": {
49340
+ "value": 0,
49341
+ "unit": "px"
49342
+ },
49343
+ "offsetY": {
49344
+ "value": 0,
49345
+ "unit": "px"
49346
+ },
49347
+ "blur": {
49348
+ "value": 0,
49349
+ "unit": "px"
49350
+ },
49351
+ "spread": {
49352
+ "value": 1,
49353
+ "unit": "px"
49354
+ }
49355
+ },
49356
+ {
49357
+ "color": "{base.color.neutral.12}",
49358
+ "alpha": 0.08,
49359
+ "offsetX": {
49360
+ "value": 0,
49361
+ "unit": "px"
49362
+ },
49363
+ "offsetY": {
49364
+ "value": 8,
49365
+ "unit": "px"
49366
+ },
49367
+ "blur": {
49368
+ "value": 16,
49369
+ "unit": "px"
49370
+ },
49371
+ "spread": {
49372
+ "value": -4,
49373
+ "unit": "px"
49374
+ }
49375
+ },
49376
+ {
49377
+ "color": "{base.color.neutral.12}",
49378
+ "alpha": 0.08,
49379
+ "offsetX": {
49380
+ "value": 0,
49381
+ "unit": "px"
49382
+ },
49383
+ "offsetY": {
49384
+ "value": 4,
49385
+ "unit": "px"
49386
+ },
49387
+ "blur": {
49388
+ "value": 32,
49389
+ "unit": "px"
49390
+ },
49391
+ "spread": {
49392
+ "value": -4,
49393
+ "unit": "px"
49394
+ }
49395
+ },
49396
+ {
49397
+ "color": "{base.color.neutral.12}",
49398
+ "alpha": 0.08,
49399
+ "offsetX": {
49400
+ "value": 0,
49401
+ "unit": "px"
49402
+ },
49403
+ "offsetY": {
49404
+ "value": 24,
49405
+ "unit": "px"
49406
+ },
49407
+ "blur": {
49408
+ "value": 48,
49409
+ "unit": "px"
49410
+ },
49411
+ "spread": {
49412
+ "value": -12,
49413
+ "unit": "px"
49414
+ }
49415
+ },
49416
+ {
49417
+ "color": "{base.color.neutral.12}",
49418
+ "alpha": 0.08,
49419
+ "offsetX": {
49420
+ "value": 0,
49421
+ "unit": "px"
49422
+ },
49423
+ "offsetY": {
49424
+ "value": 48,
49425
+ "unit": "px"
49426
+ },
49427
+ "blur": {
49428
+ "value": 96,
49429
+ "unit": "px"
49430
+ },
49431
+ "spread": {
49432
+ "value": -24,
49433
+ "unit": "px"
49434
+ }
47776
49435
  }
47777
49436
  ],
47778
49437
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47779
49438
  "isSource": true,
47780
49439
  "$type": "shadow"
47781
49440
  }
49441
+ },
49442
+ "org.primer.llm": {
49443
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49444
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47782
49445
  }
47783
49446
  },
47784
49447
  "key": "{shadow.floating.medium}"
@@ -47789,7 +49452,7 @@
47789
49452
  },
47790
49453
  "shadow-floating-small": {
47791
49454
  "key": "{shadow.floating.small}",
47792
- "$value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
49455
+ "$value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47793
49456
  "$type": "shadow",
47794
49457
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47795
49458
  "$extensions": {
@@ -47803,26 +49466,62 @@
47803
49466
  {
47804
49467
  "color": "#3d444db3",
47805
49468
  "alpha": 1,
47806
- "offsetX": "0px",
47807
- "offsetY": "0px",
47808
- "blur": "0px",
47809
- "spread": "1px"
49469
+ "offsetX": {
49470
+ "value": 0,
49471
+ "unit": "px"
49472
+ },
49473
+ "offsetY": {
49474
+ "value": 0,
49475
+ "unit": "px"
49476
+ },
49477
+ "blur": {
49478
+ "value": 0,
49479
+ "unit": "px"
49480
+ },
49481
+ "spread": {
49482
+ "value": 1,
49483
+ "unit": "px"
49484
+ }
47810
49485
  },
47811
49486
  {
47812
49487
  "color": "#010409",
47813
49488
  "alpha": 0.4,
47814
- "offsetX": "0px",
47815
- "offsetY": "6px",
47816
- "blur": "12px",
47817
- "spread": "-3px"
49489
+ "offsetX": {
49490
+ "value": 0,
49491
+ "unit": "px"
49492
+ },
49493
+ "offsetY": {
49494
+ "value": 6,
49495
+ "unit": "px"
49496
+ },
49497
+ "blur": {
49498
+ "value": 12,
49499
+ "unit": "px"
49500
+ },
49501
+ "spread": {
49502
+ "value": -3,
49503
+ "unit": "px"
49504
+ }
47818
49505
  },
47819
49506
  {
47820
49507
  "color": "#010409",
47821
49508
  "alpha": 0.4,
47822
- "offsetX": "0px",
47823
- "offsetY": "6px",
47824
- "blur": "18px",
47825
- "spread": "0px"
49509
+ "offsetX": {
49510
+ "value": 0,
49511
+ "unit": "px"
49512
+ },
49513
+ "offsetY": {
49514
+ "value": 6,
49515
+ "unit": "px"
49516
+ },
49517
+ "blur": {
49518
+ "value": 18,
49519
+ "unit": "px"
49520
+ },
49521
+ "spread": {
49522
+ "value": 0,
49523
+ "unit": "px"
49524
+ }
47826
49525
  }
47827
49526
  ],
47828
49527
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47842,26 +49541,62 @@
47842
49541
  {
47843
49542
  "color": "{overlay.borderColor}",
47844
49543
  "alpha": 1,
47845
- "offsetX": "0px",
47846
- "offsetY": "0px",
47847
- "blur": "0px",
47848
- "spread": "1px"
49544
+ "offsetX": {
49545
+ "value": 0,
49546
+ "unit": "px"
49547
+ },
49548
+ "offsetY": {
49549
+ "value": 0,
49550
+ "unit": "px"
49551
+ },
49552
+ "blur": {
49553
+ "value": 0,
49554
+ "unit": "px"
49555
+ },
49556
+ "spread": {
49557
+ "value": 1,
49558
+ "unit": "px"
49559
+ }
47849
49560
  },
47850
49561
  {
47851
49562
  "color": "{base.color.neutral.0}",
47852
49563
  "alpha": 0.4,
47853
- "offsetX": "0px",
47854
- "offsetY": "6px",
47855
- "blur": "12px",
47856
- "spread": "-3px"
49564
+ "offsetX": {
49565
+ "value": 0,
49566
+ "unit": "px"
49567
+ },
49568
+ "offsetY": {
49569
+ "value": 6,
49570
+ "unit": "px"
49571
+ },
49572
+ "blur": {
49573
+ "value": 12,
49574
+ "unit": "px"
49575
+ },
49576
+ "spread": {
49577
+ "value": -3,
49578
+ "unit": "px"
49579
+ }
47857
49580
  },
47858
49581
  {
47859
49582
  "color": "{base.color.neutral.0}",
47860
49583
  "alpha": 0.4,
47861
- "offsetX": "0px",
47862
- "offsetY": "6px",
47863
- "blur": "18px",
47864
- "spread": "0px"
49584
+ "offsetX": {
49585
+ "value": 0,
49586
+ "unit": "px"
49587
+ },
49588
+ "offsetY": {
49589
+ "value": 6,
49590
+ "unit": "px"
49591
+ },
49592
+ "blur": {
49593
+ "value": 18,
49594
+ "unit": "px"
49595
+ },
49596
+ "spread": {
49597
+ "value": 0,
49598
+ "unit": "px"
49599
+ }
47865
49600
  }
47866
49601
  ],
47867
49602
  "$type": "shadow",
@@ -47877,26 +49612,62 @@
47877
49612
  {
47878
49613
  "color": "{overlay.borderColor}",
47879
49614
  "alpha": 1,
47880
- "offsetX": "0px",
47881
- "offsetY": "0px",
47882
- "blur": "0px",
47883
- "spread": "1px"
49615
+ "offsetX": {
49616
+ "value": 0,
49617
+ "unit": "px"
49618
+ },
49619
+ "offsetY": {
49620
+ "value": 0,
49621
+ "unit": "px"
49622
+ },
49623
+ "blur": {
49624
+ "value": 0,
49625
+ "unit": "px"
49626
+ },
49627
+ "spread": {
49628
+ "value": 1,
49629
+ "unit": "px"
49630
+ }
47884
49631
  },
47885
49632
  {
47886
49633
  "color": "{base.color.neutral.0}",
47887
49634
  "alpha": 0.4,
47888
- "offsetX": "0px",
47889
- "offsetY": "6px",
47890
- "blur": "12px",
47891
- "spread": "-3px"
49635
+ "offsetX": {
49636
+ "value": 0,
49637
+ "unit": "px"
49638
+ },
49639
+ "offsetY": {
49640
+ "value": 6,
49641
+ "unit": "px"
49642
+ },
49643
+ "blur": {
49644
+ "value": 12,
49645
+ "unit": "px"
49646
+ },
49647
+ "spread": {
49648
+ "value": -3,
49649
+ "unit": "px"
49650
+ }
47892
49651
  },
47893
49652
  {
47894
49653
  "color": "{base.color.neutral.0}",
47895
49654
  "alpha": 0.4,
47896
- "offsetX": "0px",
47897
- "offsetY": "6px",
47898
- "blur": "18px",
47899
- "spread": "0px"
49655
+ "offsetX": {
49656
+ "value": 0,
49657
+ "unit": "px"
49658
+ },
49659
+ "offsetY": {
49660
+ "value": 6,
49661
+ "unit": "px"
49662
+ },
49663
+ "blur": {
49664
+ "value": 18,
49665
+ "unit": "px"
49666
+ },
49667
+ "spread": {
49668
+ "value": 0,
49669
+ "unit": "px"
49670
+ }
47900
49671
  }
47901
49672
  ],
47902
49673
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47917,8 +49688,9 @@
47917
49688
  },
47918
49689
  "shadow-floating-xlarge": {
47919
49690
  "key": "{shadow.floating.xlarge}",
47920
- "$value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
49691
+ "$value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
47921
49692
  "$type": "shadow",
49693
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47922
49694
  "$extensions": {
47923
49695
  "org.primer.figma": {
47924
49696
  "collection": "mode",
@@ -47930,24 +49702,193 @@
47930
49702
  {
47931
49703
  "color": "#3d444db3",
47932
49704
  "alpha": 1,
47933
- "offsetX": "0px",
47934
- "offsetY": "0px",
47935
- "blur": "0px",
47936
- "spread": "1px"
49705
+ "offsetX": {
49706
+ "value": 0,
49707
+ "unit": "px"
49708
+ },
49709
+ "offsetY": {
49710
+ "value": 0,
49711
+ "unit": "px"
49712
+ },
49713
+ "blur": {
49714
+ "value": 0,
49715
+ "unit": "px"
49716
+ },
49717
+ "spread": {
49718
+ "value": 1,
49719
+ "unit": "px"
49720
+ }
47937
49721
  },
47938
49722
  {
47939
49723
  "color": "#010409",
47940
49724
  "alpha": 1,
47941
- "offsetX": "0px",
47942
- "offsetY": "32px",
47943
- "blur": "64px",
47944
- "spread": "0px"
49725
+ "offsetX": {
49726
+ "value": 0,
49727
+ "unit": "px"
49728
+ },
49729
+ "offsetY": {
49730
+ "value": 32,
49731
+ "unit": "px"
49732
+ },
49733
+ "blur": {
49734
+ "value": 64,
49735
+ "unit": "px"
49736
+ },
49737
+ "spread": {
49738
+ "value": 0,
49739
+ "unit": "px"
49740
+ }
49741
+ }
49742
+ ],
49743
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49744
+ "isSource": true,
49745
+ "$type": "shadow"
49746
+ },
49747
+ "light-high-contrast": {
49748
+ "$value": [
49749
+ {
49750
+ "color": "#3d444db3",
49751
+ "alpha": 1,
49752
+ "offsetX": {
49753
+ "value": 0,
49754
+ "unit": "px"
49755
+ },
49756
+ "offsetY": {
49757
+ "value": 0,
49758
+ "unit": "px"
49759
+ },
49760
+ "blur": {
49761
+ "value": 0,
49762
+ "unit": "px"
49763
+ },
49764
+ "spread": {
49765
+ "value": 1,
49766
+ "unit": "px"
49767
+ }
49768
+ },
49769
+ {
49770
+ "color": "#f0f6fc",
49771
+ "alpha": 0.32,
49772
+ "offsetX": {
49773
+ "value": 0,
49774
+ "unit": "px"
49775
+ },
49776
+ "offsetY": {
49777
+ "value": 56,
49778
+ "unit": "px"
49779
+ },
49780
+ "blur": {
49781
+ "value": 112,
49782
+ "unit": "px"
49783
+ },
49784
+ "spread": {
49785
+ "value": 0,
49786
+ "unit": "px"
49787
+ }
49788
+ }
49789
+ ],
49790
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49791
+ "isSource": true,
49792
+ "$type": "shadow"
49793
+ },
49794
+ "light-protanopia-deuteranopia-high-contrast": {
49795
+ "$value": [
49796
+ {
49797
+ "color": "#3d444db3",
49798
+ "alpha": 1,
49799
+ "offsetX": {
49800
+ "value": 0,
49801
+ "unit": "px"
49802
+ },
49803
+ "offsetY": {
49804
+ "value": 0,
49805
+ "unit": "px"
49806
+ },
49807
+ "blur": {
49808
+ "value": 0,
49809
+ "unit": "px"
49810
+ },
49811
+ "spread": {
49812
+ "value": 1,
49813
+ "unit": "px"
49814
+ }
49815
+ },
49816
+ {
49817
+ "color": "#f0f6fc",
49818
+ "alpha": 0.32,
49819
+ "offsetX": {
49820
+ "value": 0,
49821
+ "unit": "px"
49822
+ },
49823
+ "offsetY": {
49824
+ "value": 56,
49825
+ "unit": "px"
49826
+ },
49827
+ "blur": {
49828
+ "value": 112,
49829
+ "unit": "px"
49830
+ },
49831
+ "spread": {
49832
+ "value": 0,
49833
+ "unit": "px"
49834
+ }
49835
+ }
49836
+ ],
49837
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49838
+ "isSource": true,
49839
+ "$type": "shadow"
49840
+ },
49841
+ "light-tritanopia-high-contrast": {
49842
+ "$value": [
49843
+ {
49844
+ "color": "#3d444db3",
49845
+ "alpha": 1,
49846
+ "offsetX": {
49847
+ "value": 0,
49848
+ "unit": "px"
49849
+ },
49850
+ "offsetY": {
49851
+ "value": 0,
49852
+ "unit": "px"
49853
+ },
49854
+ "blur": {
49855
+ "value": 0,
49856
+ "unit": "px"
49857
+ },
49858
+ "spread": {
49859
+ "value": 1,
49860
+ "unit": "px"
49861
+ }
49862
+ },
49863
+ {
49864
+ "color": "#f0f6fc",
49865
+ "alpha": 0.32,
49866
+ "offsetX": {
49867
+ "value": 0,
49868
+ "unit": "px"
49869
+ },
49870
+ "offsetY": {
49871
+ "value": 56,
49872
+ "unit": "px"
49873
+ },
49874
+ "blur": {
49875
+ "value": 112,
49876
+ "unit": "px"
49877
+ },
49878
+ "spread": {
49879
+ "value": 0,
49880
+ "unit": "px"
49881
+ }
47945
49882
  }
47946
49883
  ],
47947
49884
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47948
49885
  "isSource": true,
47949
49886
  "$type": "shadow"
47950
49887
  }
49888
+ },
49889
+ "org.primer.llm": {
49890
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49891
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47951
49892
  }
47952
49893
  },
47953
49894
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47957,21 +49898,46 @@
47957
49898
  {
47958
49899
  "color": "{overlay.borderColor}",
47959
49900
  "alpha": 1,
47960
- "offsetX": "0px",
47961
- "offsetY": "0px",
47962
- "blur": "0px",
47963
- "spread": "1px"
49901
+ "offsetX": {
49902
+ "value": 0,
49903
+ "unit": "px"
49904
+ },
49905
+ "offsetY": {
49906
+ "value": 0,
49907
+ "unit": "px"
49908
+ },
49909
+ "blur": {
49910
+ "value": 0,
49911
+ "unit": "px"
49912
+ },
49913
+ "spread": {
49914
+ "value": 1,
49915
+ "unit": "px"
49916
+ }
47964
49917
  },
47965
49918
  {
47966
49919
  "color": "{base.color.neutral.0}",
47967
49920
  "alpha": 1,
47968
- "offsetX": "0px",
47969
- "offsetY": "32px",
47970
- "blur": "64px",
47971
- "spread": "0px"
49921
+ "offsetX": {
49922
+ "value": 0,
49923
+ "unit": "px"
49924
+ },
49925
+ "offsetY": {
49926
+ "value": 32,
49927
+ "unit": "px"
49928
+ },
49929
+ "blur": {
49930
+ "value": 64,
49931
+ "unit": "px"
49932
+ },
49933
+ "spread": {
49934
+ "value": 0,
49935
+ "unit": "px"
49936
+ }
47972
49937
  }
47973
49938
  ],
47974
49939
  "$type": "shadow",
49940
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47975
49941
  "$extensions": {
47976
49942
  "org.primer.figma": {
47977
49943
  "collection": "mode",
@@ -47983,24 +49949,193 @@
47983
49949
  {
47984
49950
  "color": "{overlay.borderColor}",
47985
49951
  "alpha": 1,
47986
- "offsetX": "0px",
47987
- "offsetY": "0px",
47988
- "blur": "0px",
47989
- "spread": "1px"
49952
+ "offsetX": {
49953
+ "value": 0,
49954
+ "unit": "px"
49955
+ },
49956
+ "offsetY": {
49957
+ "value": 0,
49958
+ "unit": "px"
49959
+ },
49960
+ "blur": {
49961
+ "value": 0,
49962
+ "unit": "px"
49963
+ },
49964
+ "spread": {
49965
+ "value": 1,
49966
+ "unit": "px"
49967
+ }
47990
49968
  },
47991
49969
  {
47992
49970
  "color": "{base.color.neutral.0}",
47993
49971
  "alpha": 1,
47994
- "offsetX": "0px",
47995
- "offsetY": "32px",
47996
- "blur": "64px",
47997
- "spread": "0px"
49972
+ "offsetX": {
49973
+ "value": 0,
49974
+ "unit": "px"
49975
+ },
49976
+ "offsetY": {
49977
+ "value": 32,
49978
+ "unit": "px"
49979
+ },
49980
+ "blur": {
49981
+ "value": 64,
49982
+ "unit": "px"
49983
+ },
49984
+ "spread": {
49985
+ "value": 0,
49986
+ "unit": "px"
49987
+ }
49988
+ }
49989
+ ],
49990
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49991
+ "isSource": true,
49992
+ "$type": "shadow"
49993
+ },
49994
+ "light-high-contrast": {
49995
+ "$value": [
49996
+ {
49997
+ "color": "{overlay.borderColor}",
49998
+ "alpha": 1,
49999
+ "offsetX": {
50000
+ "value": 0,
50001
+ "unit": "px"
50002
+ },
50003
+ "offsetY": {
50004
+ "value": 0,
50005
+ "unit": "px"
50006
+ },
50007
+ "blur": {
50008
+ "value": 0,
50009
+ "unit": "px"
50010
+ },
50011
+ "spread": {
50012
+ "value": 1,
50013
+ "unit": "px"
50014
+ }
50015
+ },
50016
+ {
50017
+ "color": "{base.color.neutral.12}",
50018
+ "alpha": 0.32,
50019
+ "offsetX": {
50020
+ "value": 0,
50021
+ "unit": "px"
50022
+ },
50023
+ "offsetY": {
50024
+ "value": 56,
50025
+ "unit": "px"
50026
+ },
50027
+ "blur": {
50028
+ "value": 112,
50029
+ "unit": "px"
50030
+ },
50031
+ "spread": {
50032
+ "value": 0,
50033
+ "unit": "px"
50034
+ }
50035
+ }
50036
+ ],
50037
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50038
+ "isSource": true,
50039
+ "$type": "shadow"
50040
+ },
50041
+ "light-protanopia-deuteranopia-high-contrast": {
50042
+ "$value": [
50043
+ {
50044
+ "color": "{overlay.borderColor}",
50045
+ "alpha": 1,
50046
+ "offsetX": {
50047
+ "value": 0,
50048
+ "unit": "px"
50049
+ },
50050
+ "offsetY": {
50051
+ "value": 0,
50052
+ "unit": "px"
50053
+ },
50054
+ "blur": {
50055
+ "value": 0,
50056
+ "unit": "px"
50057
+ },
50058
+ "spread": {
50059
+ "value": 1,
50060
+ "unit": "px"
50061
+ }
50062
+ },
50063
+ {
50064
+ "color": "{base.color.neutral.12}",
50065
+ "alpha": 0.32,
50066
+ "offsetX": {
50067
+ "value": 0,
50068
+ "unit": "px"
50069
+ },
50070
+ "offsetY": {
50071
+ "value": 56,
50072
+ "unit": "px"
50073
+ },
50074
+ "blur": {
50075
+ "value": 112,
50076
+ "unit": "px"
50077
+ },
50078
+ "spread": {
50079
+ "value": 0,
50080
+ "unit": "px"
50081
+ }
50082
+ }
50083
+ ],
50084
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50085
+ "isSource": true,
50086
+ "$type": "shadow"
50087
+ },
50088
+ "light-tritanopia-high-contrast": {
50089
+ "$value": [
50090
+ {
50091
+ "color": "{overlay.borderColor}",
50092
+ "alpha": 1,
50093
+ "offsetX": {
50094
+ "value": 0,
50095
+ "unit": "px"
50096
+ },
50097
+ "offsetY": {
50098
+ "value": 0,
50099
+ "unit": "px"
50100
+ },
50101
+ "blur": {
50102
+ "value": 0,
50103
+ "unit": "px"
50104
+ },
50105
+ "spread": {
50106
+ "value": 1,
50107
+ "unit": "px"
50108
+ }
50109
+ },
50110
+ {
50111
+ "color": "{base.color.neutral.12}",
50112
+ "alpha": 0.32,
50113
+ "offsetX": {
50114
+ "value": 0,
50115
+ "unit": "px"
50116
+ },
50117
+ "offsetY": {
50118
+ "value": 56,
50119
+ "unit": "px"
50120
+ },
50121
+ "blur": {
50122
+ "value": 112,
50123
+ "unit": "px"
50124
+ },
50125
+ "spread": {
50126
+ "value": 0,
50127
+ "unit": "px"
50128
+ }
47998
50129
  }
47999
50130
  ],
48000
50131
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48001
50132
  "isSource": true,
48002
50133
  "$type": "shadow"
48003
50134
  }
50135
+ },
50136
+ "org.primer.llm": {
50137
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50138
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
48004
50139
  }
48005
50140
  },
48006
50141
  "key": "{shadow.floating.xlarge}"
@@ -48011,8 +50146,9 @@
48011
50146
  },
48012
50147
  "shadow-inset": {
48013
50148
  "key": "{shadow.inset}",
48014
- "$value": "inset 0px 1px 0px 0px #0104093d",
50149
+ "$value": "inset 0 1px 0 0 #0104093d",
48015
50150
  "$type": "shadow",
50151
+ "$description": "Inset shadow for recessed elements",
48016
50152
  "$extensions": {
48017
50153
  "org.primer.figma": {
48018
50154
  "collection": "mode",
@@ -48023,16 +50159,32 @@
48023
50159
  "$value": {
48024
50160
  "color": "#010409",
48025
50161
  "alpha": 0.24,
48026
- "offsetX": "0px",
48027
- "offsetY": "1px",
48028
- "blur": "0px",
48029
- "spread": "0px",
50162
+ "offsetX": {
50163
+ "value": 0,
50164
+ "unit": "px"
50165
+ },
50166
+ "offsetY": {
50167
+ "value": 1,
50168
+ "unit": "px"
50169
+ },
50170
+ "blur": {
50171
+ "value": 0,
50172
+ "unit": "px"
50173
+ },
50174
+ "spread": {
50175
+ "value": 0,
50176
+ "unit": "px"
50177
+ },
48030
50178
  "inset": true
48031
50179
  },
48032
50180
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48033
50181
  "isSource": true,
48034
50182
  "$type": "shadow"
48035
50183
  }
50184
+ },
50185
+ "org.primer.llm": {
50186
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50187
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48036
50188
  }
48037
50189
  },
48038
50190
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48041,13 +50193,26 @@
48041
50193
  "$value": {
48042
50194
  "color": "{base.color.neutral.0}",
48043
50195
  "alpha": 0.24,
48044
- "offsetX": "0px",
48045
- "offsetY": "1px",
48046
- "blur": "0px",
48047
- "spread": "0px",
50196
+ "offsetX": {
50197
+ "value": 0,
50198
+ "unit": "px"
50199
+ },
50200
+ "offsetY": {
50201
+ "value": 1,
50202
+ "unit": "px"
50203
+ },
50204
+ "blur": {
50205
+ "value": 0,
50206
+ "unit": "px"
50207
+ },
50208
+ "spread": {
50209
+ "value": 0,
50210
+ "unit": "px"
50211
+ },
48048
50212
  "inset": true
48049
50213
  },
48050
50214
  "$type": "shadow",
50215
+ "$description": "Inset shadow for recessed elements",
48051
50216
  "$extensions": {
48052
50217
  "org.primer.figma": {
48053
50218
  "collection": "mode",
@@ -48058,16 +50223,32 @@
48058
50223
  "$value": {
48059
50224
  "color": "{base.color.neutral.0}",
48060
50225
  "alpha": 0.24,
48061
- "offsetX": "0px",
48062
- "offsetY": "1px",
48063
- "blur": "0px",
48064
- "spread": "0px",
50226
+ "offsetX": {
50227
+ "value": 0,
50228
+ "unit": "px"
50229
+ },
50230
+ "offsetY": {
50231
+ "value": 1,
50232
+ "unit": "px"
50233
+ },
50234
+ "blur": {
50235
+ "value": 0,
50236
+ "unit": "px"
50237
+ },
50238
+ "spread": {
50239
+ "value": 0,
50240
+ "unit": "px"
50241
+ },
48065
50242
  "inset": true
48066
50243
  },
48067
50244
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48068
50245
  "isSource": true,
48069
50246
  "$type": "shadow"
48070
50247
  }
50248
+ },
50249
+ "org.primer.llm": {
50250
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50251
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48071
50252
  }
48072
50253
  },
48073
50254
  "key": "{shadow.inset}"
@@ -48078,8 +50259,9 @@
48078
50259
  },
48079
50260
  "shadow-resting-medium": {
48080
50261
  "key": "{shadow.resting.medium}",
48081
- "$value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
50262
+ "$value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
48082
50263
  "$type": "shadow",
50264
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48083
50265
  "$extensions": {
48084
50266
  "org.primer.figma": {
48085
50267
  "collection": "mode",
@@ -48091,24 +50273,52 @@
48091
50273
  {
48092
50274
  "color": "#010409",
48093
50275
  "alpha": 0.4,
48094
- "offsetX": "0px",
48095
- "offsetY": "1px",
48096
- "blur": "1px",
48097
- "spread": "0px"
50276
+ "offsetX": {
50277
+ "value": 0,
50278
+ "unit": "px"
50279
+ },
50280
+ "offsetY": {
50281
+ "value": 1,
50282
+ "unit": "px"
50283
+ },
50284
+ "blur": {
50285
+ "value": 1,
50286
+ "unit": "px"
50287
+ },
50288
+ "spread": {
50289
+ "value": 0,
50290
+ "unit": "px"
50291
+ }
48098
50292
  },
48099
50293
  {
48100
50294
  "color": "#010409",
48101
50295
  "alpha": 0.8,
48102
- "offsetX": "0px",
48103
- "offsetY": "3px",
48104
- "blur": "6px",
48105
- "spread": "0px"
50296
+ "offsetX": {
50297
+ "value": 0,
50298
+ "unit": "px"
50299
+ },
50300
+ "offsetY": {
50301
+ "value": 3,
50302
+ "unit": "px"
50303
+ },
50304
+ "blur": {
50305
+ "value": 6,
50306
+ "unit": "px"
50307
+ },
50308
+ "spread": {
50309
+ "value": 0,
50310
+ "unit": "px"
50311
+ }
48106
50312
  }
48107
50313
  ],
48108
50314
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48109
50315
  "isSource": true,
48110
50316
  "$type": "shadow"
48111
50317
  }
50318
+ },
50319
+ "org.primer.llm": {
50320
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50321
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48112
50322
  }
48113
50323
  },
48114
50324
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48118,21 +50328,46 @@
48118
50328
  {
48119
50329
  "color": "{base.color.neutral.0}",
48120
50330
  "alpha": 0.4,
48121
- "offsetX": "0px",
48122
- "offsetY": "1px",
48123
- "blur": "1px",
48124
- "spread": "0px"
50331
+ "offsetX": {
50332
+ "value": 0,
50333
+ "unit": "px"
50334
+ },
50335
+ "offsetY": {
50336
+ "value": 1,
50337
+ "unit": "px"
50338
+ },
50339
+ "blur": {
50340
+ "value": 1,
50341
+ "unit": "px"
50342
+ },
50343
+ "spread": {
50344
+ "value": 0,
50345
+ "unit": "px"
50346
+ }
48125
50347
  },
48126
50348
  {
48127
50349
  "color": "{base.color.neutral.0}",
48128
50350
  "alpha": 0.8,
48129
- "offsetX": "0px",
48130
- "offsetY": "3px",
48131
- "blur": "6px",
48132
- "spread": "0px"
50351
+ "offsetX": {
50352
+ "value": 0,
50353
+ "unit": "px"
50354
+ },
50355
+ "offsetY": {
50356
+ "value": 3,
50357
+ "unit": "px"
50358
+ },
50359
+ "blur": {
50360
+ "value": 6,
50361
+ "unit": "px"
50362
+ },
50363
+ "spread": {
50364
+ "value": 0,
50365
+ "unit": "px"
50366
+ }
48133
50367
  }
48134
50368
  ],
48135
50369
  "$type": "shadow",
50370
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48136
50371
  "$extensions": {
48137
50372
  "org.primer.figma": {
48138
50373
  "collection": "mode",
@@ -48144,24 +50379,52 @@
48144
50379
  {
48145
50380
  "color": "{base.color.neutral.0}",
48146
50381
  "alpha": 0.4,
48147
- "offsetX": "0px",
48148
- "offsetY": "1px",
48149
- "blur": "1px",
48150
- "spread": "0px"
50382
+ "offsetX": {
50383
+ "value": 0,
50384
+ "unit": "px"
50385
+ },
50386
+ "offsetY": {
50387
+ "value": 1,
50388
+ "unit": "px"
50389
+ },
50390
+ "blur": {
50391
+ "value": 1,
50392
+ "unit": "px"
50393
+ },
50394
+ "spread": {
50395
+ "value": 0,
50396
+ "unit": "px"
50397
+ }
48151
50398
  },
48152
50399
  {
48153
50400
  "color": "{base.color.neutral.0}",
48154
50401
  "alpha": 0.8,
48155
- "offsetX": "0px",
48156
- "offsetY": "3px",
48157
- "blur": "6px",
48158
- "spread": "0px"
50402
+ "offsetX": {
50403
+ "value": 0,
50404
+ "unit": "px"
50405
+ },
50406
+ "offsetY": {
50407
+ "value": 3,
50408
+ "unit": "px"
50409
+ },
50410
+ "blur": {
50411
+ "value": 6,
50412
+ "unit": "px"
50413
+ },
50414
+ "spread": {
50415
+ "value": 0,
50416
+ "unit": "px"
50417
+ }
48159
50418
  }
48160
50419
  ],
48161
50420
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48162
50421
  "isSource": true,
48163
50422
  "$type": "shadow"
48164
50423
  }
50424
+ },
50425
+ "org.primer.llm": {
50426
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50427
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48165
50428
  }
48166
50429
  },
48167
50430
  "key": "{shadow.resting.medium}"
@@ -48172,8 +50435,9 @@
48172
50435
  },
48173
50436
  "shadow-resting-small": {
48174
50437
  "key": "{shadow.resting.small}",
48175
- "$value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
50438
+ "$value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
48176
50439
  "$type": "shadow",
50440
+ "$description": "Small resting shadow for buttons and interactive elements",
48177
50441
  "$extensions": {
48178
50442
  "org.primer.figma": {
48179
50443
  "collection": "mode",
@@ -48185,19 +50449,43 @@
48185
50449
  {
48186
50450
  "color": "#010409",
48187
50451
  "alpha": 0.6,
48188
- "offsetX": "0px",
48189
- "offsetY": "1px",
48190
- "blur": "1px",
48191
- "spread": "0px",
50452
+ "offsetX": {
50453
+ "value": 0,
50454
+ "unit": "px"
50455
+ },
50456
+ "offsetY": {
50457
+ "value": 1,
50458
+ "unit": "px"
50459
+ },
50460
+ "blur": {
50461
+ "value": 1,
50462
+ "unit": "px"
50463
+ },
50464
+ "spread": {
50465
+ "value": 0,
50466
+ "unit": "px"
50467
+ },
48192
50468
  "inset": false
48193
50469
  },
48194
50470
  {
48195
50471
  "color": "#010409",
48196
50472
  "alpha": 0.6,
48197
- "offsetX": "0px",
48198
- "offsetY": "1px",
48199
- "blur": "3px",
48200
- "spread": "0px",
50473
+ "offsetX": {
50474
+ "value": 0,
50475
+ "unit": "px"
50476
+ },
50477
+ "offsetY": {
50478
+ "value": 1,
50479
+ "unit": "px"
50480
+ },
50481
+ "blur": {
50482
+ "value": 3,
50483
+ "unit": "px"
50484
+ },
50485
+ "spread": {
50486
+ "value": 0,
50487
+ "unit": "px"
50488
+ },
48201
50489
  "inset": false
48202
50490
  }
48203
50491
  ],
@@ -48205,6 +50493,10 @@
48205
50493
  "isSource": true,
48206
50494
  "$type": "shadow"
48207
50495
  }
50496
+ },
50497
+ "org.primer.llm": {
50498
+ "usage": ["button", "interactive-card", "clickable-element"],
50499
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48208
50500
  }
48209
50501
  },
48210
50502
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48214,23 +50506,48 @@
48214
50506
  {
48215
50507
  "color": "{base.color.neutral.0}",
48216
50508
  "alpha": 0.6,
48217
- "offsetX": "0px",
48218
- "offsetY": "1px",
48219
- "blur": "1px",
48220
- "spread": "0px",
50509
+ "offsetX": {
50510
+ "value": 0,
50511
+ "unit": "px"
50512
+ },
50513
+ "offsetY": {
50514
+ "value": 1,
50515
+ "unit": "px"
50516
+ },
50517
+ "blur": {
50518
+ "value": 1,
50519
+ "unit": "px"
50520
+ },
50521
+ "spread": {
50522
+ "value": 0,
50523
+ "unit": "px"
50524
+ },
48221
50525
  "inset": false
48222
50526
  },
48223
50527
  {
48224
50528
  "color": "{base.color.neutral.0}",
48225
50529
  "alpha": 0.6,
48226
- "offsetX": "0px",
48227
- "offsetY": "1px",
48228
- "blur": "3px",
48229
- "spread": "0px",
50530
+ "offsetX": {
50531
+ "value": 0,
50532
+ "unit": "px"
50533
+ },
50534
+ "offsetY": {
50535
+ "value": 1,
50536
+ "unit": "px"
50537
+ },
50538
+ "blur": {
50539
+ "value": 3,
50540
+ "unit": "px"
50541
+ },
50542
+ "spread": {
50543
+ "value": 0,
50544
+ "unit": "px"
50545
+ },
48230
50546
  "inset": false
48231
50547
  }
48232
50548
  ],
48233
50549
  "$type": "shadow",
50550
+ "$description": "Small resting shadow for buttons and interactive elements",
48234
50551
  "$extensions": {
48235
50552
  "org.primer.figma": {
48236
50553
  "collection": "mode",
@@ -48242,19 +50559,43 @@
48242
50559
  {
48243
50560
  "color": "{base.color.neutral.0}",
48244
50561
  "alpha": 0.6,
48245
- "offsetX": "0px",
48246
- "offsetY": "1px",
48247
- "blur": "1px",
48248
- "spread": "0px",
50562
+ "offsetX": {
50563
+ "value": 0,
50564
+ "unit": "px"
50565
+ },
50566
+ "offsetY": {
50567
+ "value": 1,
50568
+ "unit": "px"
50569
+ },
50570
+ "blur": {
50571
+ "value": 1,
50572
+ "unit": "px"
50573
+ },
50574
+ "spread": {
50575
+ "value": 0,
50576
+ "unit": "px"
50577
+ },
48249
50578
  "inset": false
48250
50579
  },
48251
50580
  {
48252
50581
  "color": "{base.color.neutral.0}",
48253
50582
  "alpha": 0.6,
48254
- "offsetX": "0px",
48255
- "offsetY": "1px",
48256
- "blur": "3px",
48257
- "spread": "0px",
50583
+ "offsetX": {
50584
+ "value": 0,
50585
+ "unit": "px"
50586
+ },
50587
+ "offsetY": {
50588
+ "value": 1,
50589
+ "unit": "px"
50590
+ },
50591
+ "blur": {
50592
+ "value": 3,
50593
+ "unit": "px"
50594
+ },
50595
+ "spread": {
50596
+ "value": 0,
50597
+ "unit": "px"
50598
+ },
48258
50599
  "inset": false
48259
50600
  }
48260
50601
  ],
@@ -48262,6 +50603,10 @@
48262
50603
  "isSource": true,
48263
50604
  "$type": "shadow"
48264
50605
  }
50606
+ },
50607
+ "org.primer.llm": {
50608
+ "usage": ["button", "interactive-card", "clickable-element"],
50609
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48265
50610
  }
48266
50611
  },
48267
50612
  "key": "{shadow.resting.small}"
@@ -48272,8 +50617,9 @@
48272
50617
  },
48273
50618
  "shadow-resting-xsmall": {
48274
50619
  "key": "{shadow.resting.xsmall}",
48275
- "$value": "0px 1px 1px 0px #010409cc",
50620
+ "$value": "0 1px 1px 0 #010409cc",
48276
50621
  "$type": "shadow",
50622
+ "$description": "Extra small resting shadow for minimal elevation",
48277
50623
  "$extensions": {
48278
50624
  "org.primer.figma": {
48279
50625
  "collection": "mode",
@@ -48284,16 +50630,32 @@
48284
50630
  "$value": {
48285
50631
  "color": "#010409",
48286
50632
  "alpha": 0.8,
48287
- "offsetX": "0px",
48288
- "offsetY": "1px",
48289
- "blur": "1px",
48290
- "spread": "0px",
50633
+ "offsetX": {
50634
+ "value": 0,
50635
+ "unit": "px"
50636
+ },
50637
+ "offsetY": {
50638
+ "value": 1,
50639
+ "unit": "px"
50640
+ },
50641
+ "blur": {
50642
+ "value": 1,
50643
+ "unit": "px"
50644
+ },
50645
+ "spread": {
50646
+ "value": 0,
50647
+ "unit": "px"
50648
+ },
48291
50649
  "inset": false
48292
50650
  },
48293
50651
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48294
50652
  "isSource": true,
48295
50653
  "$type": "shadow"
48296
50654
  }
50655
+ },
50656
+ "org.primer.llm": {
50657
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50658
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48297
50659
  }
48298
50660
  },
48299
50661
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48302,13 +50664,26 @@
48302
50664
  "$value": {
48303
50665
  "color": "{base.color.neutral.0}",
48304
50666
  "alpha": 0.8,
48305
- "offsetX": "0px",
48306
- "offsetY": "1px",
48307
- "blur": "1px",
48308
- "spread": "0px",
50667
+ "offsetX": {
50668
+ "value": 0,
50669
+ "unit": "px"
50670
+ },
50671
+ "offsetY": {
50672
+ "value": 1,
50673
+ "unit": "px"
50674
+ },
50675
+ "blur": {
50676
+ "value": 1,
50677
+ "unit": "px"
50678
+ },
50679
+ "spread": {
50680
+ "value": 0,
50681
+ "unit": "px"
50682
+ },
48309
50683
  "inset": false
48310
50684
  },
48311
50685
  "$type": "shadow",
50686
+ "$description": "Extra small resting shadow for minimal elevation",
48312
50687
  "$extensions": {
48313
50688
  "org.primer.figma": {
48314
50689
  "collection": "mode",
@@ -48319,16 +50694,32 @@
48319
50694
  "$value": {
48320
50695
  "color": "{base.color.neutral.0}",
48321
50696
  "alpha": 0.8,
48322
- "offsetX": "0px",
48323
- "offsetY": "1px",
48324
- "blur": "1px",
48325
- "spread": "0px",
50697
+ "offsetX": {
50698
+ "value": 0,
50699
+ "unit": "px"
50700
+ },
50701
+ "offsetY": {
50702
+ "value": 1,
50703
+ "unit": "px"
50704
+ },
50705
+ "blur": {
50706
+ "value": 1,
50707
+ "unit": "px"
50708
+ },
50709
+ "spread": {
50710
+ "value": 0,
50711
+ "unit": "px"
50712
+ },
48326
50713
  "inset": false
48327
50714
  },
48328
50715
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48329
50716
  "isSource": true,
48330
50717
  "$type": "shadow"
48331
50718
  }
50719
+ },
50720
+ "org.primer.llm": {
50721
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50722
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48332
50723
  }
48333
50724
  },
48334
50725
  "key": "{shadow.resting.xsmall}"