@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
@@ -165,7 +165,7 @@
165
165
  },
166
166
  "avatar-shadow": {
167
167
  "key": "{avatar.shadow}",
168
- "$value": "0px 0px 0px 2px #ffffffcc",
168
+ "$value": "0 0 0 2px #ffffffcc",
169
169
  "$type": "shadow",
170
170
  "$extensions": {
171
171
  "org.primer.figma": {
@@ -178,10 +178,22 @@
178
178
  {
179
179
  "color": "#f6f8fa",
180
180
  "alpha": 1,
181
- "offsetX": "0px",
182
- "offsetY": "0px",
183
- "blur": "0px",
184
- "spread": "2px"
181
+ "offsetX": {
182
+ "value": 0,
183
+ "unit": "px"
184
+ },
185
+ "offsetY": {
186
+ "value": 0,
187
+ "unit": "px"
188
+ },
189
+ "blur": {
190
+ "value": 0,
191
+ "unit": "px"
192
+ },
193
+ "spread": {
194
+ "value": 2,
195
+ "unit": "px"
196
+ }
185
197
  }
186
198
  ],
187
199
  "filePath": "src/tokens/component/avatar.json5",
@@ -197,10 +209,22 @@
197
209
  {
198
210
  "color": "{base.color.neutral.0}",
199
211
  "alpha": 0.8,
200
- "offsetX": "0px",
201
- "offsetY": "0px",
202
- "blur": "0px",
203
- "spread": "2px"
212
+ "offsetX": {
213
+ "value": 0,
214
+ "unit": "px"
215
+ },
216
+ "offsetY": {
217
+ "value": 0,
218
+ "unit": "px"
219
+ },
220
+ "blur": {
221
+ "value": 0,
222
+ "unit": "px"
223
+ },
224
+ "spread": {
225
+ "value": 2,
226
+ "unit": "px"
227
+ }
204
228
  }
205
229
  ],
206
230
  "$type": "shadow",
@@ -215,10 +239,22 @@
215
239
  {
216
240
  "color": "{base.color.neutral.1}",
217
241
  "alpha": 1,
218
- "offsetX": "0px",
219
- "offsetY": "0px",
220
- "blur": "0px",
221
- "spread": "2px"
242
+ "offsetX": {
243
+ "value": 0,
244
+ "unit": "px"
245
+ },
246
+ "offsetY": {
247
+ "value": 0,
248
+ "unit": "px"
249
+ },
250
+ "blur": {
251
+ "value": 0,
252
+ "unit": "px"
253
+ },
254
+ "spread": {
255
+ "value": 2,
256
+ "unit": "px"
257
+ }
222
258
  }
223
259
  ],
224
260
  "filePath": "src/tokens/component/avatar.json5",
@@ -546,6 +582,10 @@
546
582
  },
547
583
  "org.primer.overrides": {
548
584
  "dark": "#ffffff"
585
+ },
586
+ "org.primer.llm": {
587
+ "doNotUse": true,
588
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
549
589
  }
550
590
  },
551
591
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -562,6 +602,10 @@
562
602
  },
563
603
  "org.primer.overrides": {
564
604
  "dark": "{base.color.neutral.0}"
605
+ },
606
+ "org.primer.llm": {
607
+ "doNotUse": true,
608
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
565
609
  }
566
610
  },
567
611
  "key": "{bgColor.black}"
@@ -2436,6 +2480,10 @@
2436
2480
  },
2437
2481
  "org.primer.overrides": {
2438
2482
  "dark": "#010409"
2483
+ },
2484
+ "org.primer.llm": {
2485
+ "doNotUse": true,
2486
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2439
2487
  }
2440
2488
  },
2441
2489
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2452,6 +2500,10 @@
2452
2500
  },
2453
2501
  "org.primer.overrides": {
2454
2502
  "dark": "{base.color.neutral.13}"
2503
+ },
2504
+ "org.primer.llm": {
2505
+ "doNotUse": true,
2506
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2455
2507
  }
2456
2508
  },
2457
2509
  "key": "{bgColor.white}"
@@ -2462,7 +2514,11 @@
2462
2514
  },
2463
2515
  "border-accent-emphasis": {
2464
2516
  "key": "{border.accent.emphasis}",
2465
- "$value": "0.00390625rem,0.0625px solid #0349b4",
2517
+ "$value": {
2518
+ "color": "#0349b4",
2519
+ "style": "solid",
2520
+ "width": ["0.0625rem", "1px"]
2521
+ },
2466
2522
  "$type": "border",
2467
2523
  "filePath": "src/tokens/functional/border/border.json5",
2468
2524
  "isSource": true,
@@ -2481,7 +2537,11 @@
2481
2537
  },
2482
2538
  "border-accent-muted": {
2483
2539
  "key": "{border.accent.muted}",
2484
- "$value": "0.00390625rem,0.0625px solid #368cf9",
2540
+ "$value": {
2541
+ "color": "#368cf9",
2542
+ "style": "solid",
2543
+ "width": ["0.0625rem", "1px"]
2544
+ },
2485
2545
  "$type": "border",
2486
2546
  "filePath": "src/tokens/functional/border/border.json5",
2487
2547
  "isSource": true,
@@ -2500,7 +2560,11 @@
2500
2560
  },
2501
2561
  "border-attention-emphasis": {
2502
2562
  "key": "{border.attention.emphasis}",
2503
- "$value": "0.00390625rem,0.0625px solid #744500",
2563
+ "$value": {
2564
+ "color": "#744500",
2565
+ "style": "solid",
2566
+ "width": ["0.0625rem", "1px"]
2567
+ },
2504
2568
  "$type": "border",
2505
2569
  "filePath": "src/tokens/functional/border/border.json5",
2506
2570
  "isSource": true,
@@ -2519,7 +2583,11 @@
2519
2583
  },
2520
2584
  "border-attention-muted": {
2521
2585
  "key": "{border.attention.muted}",
2522
- "$value": "0.00390625rem,0.0625px solid #b58407",
2586
+ "$value": {
2587
+ "color": "#b58407",
2588
+ "style": "solid",
2589
+ "width": ["0.0625rem", "1px"]
2590
+ },
2523
2591
  "$type": "border",
2524
2592
  "filePath": "src/tokens/functional/border/border.json5",
2525
2593
  "isSource": true,
@@ -2538,7 +2606,11 @@
2538
2606
  },
2539
2607
  "border-closed-emphasis": {
2540
2608
  "key": "{border.closed.emphasis}",
2541
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2609
+ "$value": {
2610
+ "color": "#a0111f",
2611
+ "style": "solid",
2612
+ "width": ["0.0625rem", "1px"]
2613
+ },
2542
2614
  "$type": "border",
2543
2615
  "filePath": "src/tokens/functional/border/border.json5",
2544
2616
  "isSource": true,
@@ -2553,7 +2625,11 @@
2553
2625
  },
2554
2626
  "border-closed-muted": {
2555
2627
  "key": "{border.closed.muted}",
2556
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2628
+ "$value": {
2629
+ "color": "#ee5a5d",
2630
+ "style": "solid",
2631
+ "width": ["0.0625rem", "1px"]
2632
+ },
2557
2633
  "$type": "border",
2558
2634
  "filePath": "src/tokens/functional/border/border.json5",
2559
2635
  "isSource": true,
@@ -2568,7 +2644,11 @@
2568
2644
  },
2569
2645
  "border-danger-emphasis": {
2570
2646
  "key": "{border.danger.emphasis}",
2571
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2647
+ "$value": {
2648
+ "color": "#a0111f",
2649
+ "style": "solid",
2650
+ "width": ["0.0625rem", "1px"]
2651
+ },
2572
2652
  "$type": "border",
2573
2653
  "filePath": "src/tokens/functional/border/border.json5",
2574
2654
  "isSource": true,
@@ -2587,7 +2667,11 @@
2587
2667
  },
2588
2668
  "border-danger-muted": {
2589
2669
  "key": "{border.danger.muted}",
2590
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2670
+ "$value": {
2671
+ "color": "#ee5a5d",
2672
+ "style": "solid",
2673
+ "width": ["0.0625rem", "1px"]
2674
+ },
2591
2675
  "$type": "border",
2592
2676
  "filePath": "src/tokens/functional/border/border.json5",
2593
2677
  "isSource": true,
@@ -2606,7 +2690,11 @@
2606
2690
  },
2607
2691
  "border-default": {
2608
2692
  "key": "{border.default}",
2609
- "$value": "0.00390625rem,0.0625px solid #454c54",
2693
+ "$value": {
2694
+ "color": "#454c54",
2695
+ "style": "solid",
2696
+ "width": ["0.0625rem", "1px"]
2697
+ },
2610
2698
  "$type": "border",
2611
2699
  "filePath": "src/tokens/functional/border/border.json5",
2612
2700
  "isSource": true,
@@ -2625,7 +2713,11 @@
2625
2713
  },
2626
2714
  "border-disabled": {
2627
2715
  "key": "{border.disabled}",
2628
- "$value": "0.00390625rem,0.0625px solid #59636e1f",
2716
+ "$value": {
2717
+ "color": "#59636e1f",
2718
+ "style": "solid",
2719
+ "width": ["0.0625rem", "1px"]
2720
+ },
2629
2721
  "$type": "border",
2630
2722
  "filePath": "src/tokens/functional/border/border.json5",
2631
2723
  "isSource": true,
@@ -2644,7 +2736,11 @@
2644
2736
  },
2645
2737
  "border-done-emphasis": {
2646
2738
  "key": "{border.done.emphasis}",
2647
- "$value": "0.00390625rem,0.0625px solid #622cbc",
2739
+ "$value": {
2740
+ "color": "#622cbc",
2741
+ "style": "solid",
2742
+ "width": ["0.0625rem", "1px"]
2743
+ },
2648
2744
  "$type": "border",
2649
2745
  "filePath": "src/tokens/functional/border/border.json5",
2650
2746
  "isSource": true,
@@ -2663,7 +2759,11 @@
2663
2759
  },
2664
2760
  "border-done-muted": {
2665
2761
  "key": "{border.done.muted}",
2666
- "$value": "0.00390625rem,0.0625px solid #a371f7",
2762
+ "$value": {
2763
+ "color": "#a371f7",
2764
+ "style": "solid",
2765
+ "width": ["0.0625rem", "1px"]
2766
+ },
2667
2767
  "$type": "border",
2668
2768
  "filePath": "src/tokens/functional/border/border.json5",
2669
2769
  "isSource": true,
@@ -2682,7 +2782,11 @@
2682
2782
  },
2683
2783
  "border-emphasis": {
2684
2784
  "key": "{border.emphasis}",
2685
- "$value": "0.00390625rem,0.0625px solid #454c54",
2785
+ "$value": {
2786
+ "color": "#454c54",
2787
+ "style": "solid",
2788
+ "width": ["0.0625rem", "1px"]
2789
+ },
2686
2790
  "$type": "border",
2687
2791
  "filePath": "src/tokens/functional/border/border.json5",
2688
2792
  "isSource": true,
@@ -2701,7 +2805,11 @@
2701
2805
  },
2702
2806
  "border-muted": {
2703
2807
  "key": "{border.muted}",
2704
- "$value": "0.00390625rem,0.0625px solid #454c54",
2808
+ "$value": {
2809
+ "color": "#454c54",
2810
+ "style": "solid",
2811
+ "width": ["0.0625rem", "1px"]
2812
+ },
2705
2813
  "$type": "border",
2706
2814
  "filePath": "src/tokens/functional/border/border.json5",
2707
2815
  "isSource": true,
@@ -2720,7 +2828,11 @@
2720
2828
  },
2721
2829
  "border-neutral-emphasis": {
2722
2830
  "key": "{border.neutral.emphasis}",
2723
- "$value": "0.00390625rem,0.0625px solid #59636e",
2831
+ "$value": {
2832
+ "color": "#59636e",
2833
+ "style": "solid",
2834
+ "width": ["0.0625rem", "1px"]
2835
+ },
2724
2836
  "$type": "border",
2725
2837
  "filePath": "src/tokens/functional/border/border.json5",
2726
2838
  "isSource": true,
@@ -2739,7 +2851,11 @@
2739
2851
  },
2740
2852
  "border-neutral-muted": {
2741
2853
  "key": "{border.neutral.muted}",
2742
- "$value": "0.00390625rem,0.0625px solid #454c54",
2854
+ "$value": {
2855
+ "color": "#454c54",
2856
+ "style": "solid",
2857
+ "width": ["0.0625rem", "1px"]
2858
+ },
2743
2859
  "$type": "border",
2744
2860
  "filePath": "src/tokens/functional/border/border.json5",
2745
2861
  "isSource": true,
@@ -2758,7 +2874,11 @@
2758
2874
  },
2759
2875
  "border-open-emphasis": {
2760
2876
  "key": "{border.open.emphasis}",
2761
- "$value": "0.00390625rem,0.0625px solid #0349b4",
2877
+ "$value": {
2878
+ "color": "#0349b4",
2879
+ "style": "solid",
2880
+ "width": ["0.0625rem", "1px"]
2881
+ },
2762
2882
  "$type": "border",
2763
2883
  "filePath": "src/tokens/functional/border/border.json5",
2764
2884
  "isSource": true,
@@ -2773,7 +2893,11 @@
2773
2893
  },
2774
2894
  "border-open-muted": {
2775
2895
  "key": "{border.open.muted}",
2776
- "$value": "0.00390625rem,0.0625px solid #368cf9",
2896
+ "$value": {
2897
+ "color": "#368cf9",
2898
+ "style": "solid",
2899
+ "width": ["0.0625rem", "1px"]
2900
+ },
2777
2901
  "$type": "border",
2778
2902
  "filePath": "src/tokens/functional/border/border.json5",
2779
2903
  "isSource": true,
@@ -2788,7 +2912,11 @@
2788
2912
  },
2789
2913
  "border-severe-emphasis": {
2790
2914
  "key": "{border.severe.emphasis}",
2791
- "$value": "0.00390625rem,0.0625px solid #a0111f",
2915
+ "$value": {
2916
+ "color": "#a0111f",
2917
+ "style": "solid",
2918
+ "width": ["0.0625rem", "1px"]
2919
+ },
2792
2920
  "$type": "border",
2793
2921
  "filePath": "src/tokens/functional/border/border.json5",
2794
2922
  "isSource": true,
@@ -2807,7 +2935,11 @@
2807
2935
  },
2808
2936
  "border-severe-muted": {
2809
2937
  "key": "{border.severe.muted}",
2810
- "$value": "0.00390625rem,0.0625px solid #ee5a5d",
2938
+ "$value": {
2939
+ "color": "#ee5a5d",
2940
+ "style": "solid",
2941
+ "width": ["0.0625rem", "1px"]
2942
+ },
2811
2943
  "$type": "border",
2812
2944
  "filePath": "src/tokens/functional/border/border.json5",
2813
2945
  "isSource": true,
@@ -2826,7 +2958,11 @@
2826
2958
  },
2827
2959
  "border-sponsors-emphasis": {
2828
2960
  "key": "{border.sponsors.emphasis}",
2829
- "$value": "0.00390625rem,0.0625px solid #971368",
2961
+ "$value": {
2962
+ "color": "#971368",
2963
+ "style": "solid",
2964
+ "width": ["0.0625rem", "1px"]
2965
+ },
2830
2966
  "$type": "border",
2831
2967
  "filePath": "src/tokens/functional/border/border.json5",
2832
2968
  "isSource": true,
@@ -2845,7 +2981,11 @@
2845
2981
  },
2846
2982
  "border-sponsors-muted": {
2847
2983
  "key": "{border.sponsors.muted}",
2848
- "$value": "0.00390625rem,0.0625px solid #ed4baf",
2984
+ "$value": {
2985
+ "color": "#ed4baf",
2986
+ "style": "solid",
2987
+ "width": ["0.0625rem", "1px"]
2988
+ },
2849
2989
  "$type": "border",
2850
2990
  "filePath": "src/tokens/functional/border/border.json5",
2851
2991
  "isSource": true,
@@ -2864,7 +3004,11 @@
2864
3004
  },
2865
3005
  "border-success-emphasis": {
2866
3006
  "key": "{border.success.emphasis}",
2867
- "$value": "0.00390625rem,0.0625px solid #0349b4",
3007
+ "$value": {
3008
+ "color": "#0349b4",
3009
+ "style": "solid",
3010
+ "width": ["0.0625rem", "1px"]
3011
+ },
2868
3012
  "$type": "border",
2869
3013
  "filePath": "src/tokens/functional/border/border.json5",
2870
3014
  "isSource": true,
@@ -2883,7 +3027,11 @@
2883
3027
  },
2884
3028
  "border-success-muted": {
2885
3029
  "key": "{border.success.muted}",
2886
- "$value": "0.00390625rem,0.0625px solid #368cf9",
3030
+ "$value": {
3031
+ "color": "#368cf9",
3032
+ "style": "solid",
3033
+ "width": ["0.0625rem", "1px"]
3034
+ },
2887
3035
  "$type": "border",
2888
3036
  "filePath": "src/tokens/functional/border/border.json5",
2889
3037
  "isSource": true,
@@ -2902,7 +3050,11 @@
2902
3050
  },
2903
3051
  "border-transparent": {
2904
3052
  "key": "{border.transparent}",
2905
- "$value": "0.00390625rem,0.0625px solid #ffffff00",
3053
+ "$value": {
3054
+ "color": "#ffffff00",
3055
+ "style": "solid",
3056
+ "width": ["0.0625rem", "1px"]
3057
+ },
2906
3058
  "$type": "border",
2907
3059
  "filePath": "src/tokens/functional/border/border.json5",
2908
3060
  "isSource": true,
@@ -2921,7 +3073,11 @@
2921
3073
  },
2922
3074
  "border-upsell-emphasis": {
2923
3075
  "key": "{border.upsell.emphasis}",
2924
- "$value": "0.00390625rem,0.0625px solid #622cbc",
3076
+ "$value": {
3077
+ "color": "#622cbc",
3078
+ "style": "solid",
3079
+ "width": ["0.0625rem", "1px"]
3080
+ },
2925
3081
  "$type": "border",
2926
3082
  "filePath": "src/tokens/functional/border/border.json5",
2927
3083
  "isSource": true,
@@ -2940,7 +3096,11 @@
2940
3096
  },
2941
3097
  "border-upsell-muted": {
2942
3098
  "key": "{border.upsell.muted}",
2943
- "$value": "0.00390625rem,0.0625px solid #a371f7",
3099
+ "$value": {
3100
+ "color": "#a371f7",
3101
+ "style": "solid",
3102
+ "width": ["0.0625rem", "1px"]
3103
+ },
2944
3104
  "$type": "border",
2945
3105
  "filePath": "src/tokens/functional/border/border.json5",
2946
3106
  "isSource": true,
@@ -6934,7 +7094,7 @@
6934
7094
  },
6935
7095
  "button-danger-shadow-selected": {
6936
7096
  "key": "{button.danger.shadow.selected}",
6937
- "$value": "inset 0px 1px 0px 0px #43001133",
7097
+ "$value": "inset 0 1px 0 0 #43001133",
6938
7098
  "$type": "shadow",
6939
7099
  "$extensions": {
6940
7100
  "org.primer.figma": {
@@ -6947,10 +7107,22 @@
6947
7107
  {
6948
7108
  "color": "#361200",
6949
7109
  "alpha": 0.2,
6950
- "offsetX": "0px",
6951
- "offsetY": "1px",
6952
- "blur": "0px",
6953
- "spread": "0px",
7110
+ "offsetX": {
7111
+ "value": 0,
7112
+ "unit": "px"
7113
+ },
7114
+ "offsetY": {
7115
+ "value": 1,
7116
+ "unit": "px"
7117
+ },
7118
+ "blur": {
7119
+ "value": 0,
7120
+ "unit": "px"
7121
+ },
7122
+ "spread": {
7123
+ "value": 0,
7124
+ "unit": "px"
7125
+ },
6954
7126
  "inset": true
6955
7127
  }
6956
7128
  ],
@@ -6963,10 +7135,22 @@
6963
7135
  {
6964
7136
  "color": "#ffffff00",
6965
7137
  "alpha": 0,
6966
- "offsetX": "0px",
6967
- "offsetY": "0px",
6968
- "blur": "0px",
6969
- "spread": "0px",
7138
+ "offsetX": {
7139
+ "value": 0,
7140
+ "unit": "px"
7141
+ },
7142
+ "offsetY": {
7143
+ "value": 0,
7144
+ "unit": "px"
7145
+ },
7146
+ "blur": {
7147
+ "value": 0,
7148
+ "unit": "px"
7149
+ },
7150
+ "spread": {
7151
+ "value": 0,
7152
+ "unit": "px"
7153
+ },
6970
7154
  "inset": false
6971
7155
  }
6972
7156
  ],
@@ -6983,10 +7167,22 @@
6983
7167
  {
6984
7168
  "color": "{base.color.red.9}",
6985
7169
  "alpha": 0.2,
6986
- "offsetX": "0px",
6987
- "offsetY": "1px",
6988
- "blur": "0px",
6989
- "spread": "0px",
7170
+ "offsetX": {
7171
+ "value": 0,
7172
+ "unit": "px"
7173
+ },
7174
+ "offsetY": {
7175
+ "value": 1,
7176
+ "unit": "px"
7177
+ },
7178
+ "blur": {
7179
+ "value": 0,
7180
+ "unit": "px"
7181
+ },
7182
+ "spread": {
7183
+ "value": 0,
7184
+ "unit": "px"
7185
+ },
6990
7186
  "inset": true
6991
7187
  }
6992
7188
  ],
@@ -7002,10 +7198,22 @@
7002
7198
  {
7003
7199
  "color": "{base.color.orange.9}",
7004
7200
  "alpha": 0.2,
7005
- "offsetX": "0px",
7006
- "offsetY": "1px",
7007
- "blur": "0px",
7008
- "spread": "0px",
7201
+ "offsetX": {
7202
+ "value": 0,
7203
+ "unit": "px"
7204
+ },
7205
+ "offsetY": {
7206
+ "value": 1,
7207
+ "unit": "px"
7208
+ },
7209
+ "blur": {
7210
+ "value": 0,
7211
+ "unit": "px"
7212
+ },
7213
+ "spread": {
7214
+ "value": 0,
7215
+ "unit": "px"
7216
+ },
7009
7217
  "inset": true
7010
7218
  }
7011
7219
  ],
@@ -7018,10 +7226,22 @@
7018
7226
  {
7019
7227
  "color": "{base.color.transparent}",
7020
7228
  "alpha": 0,
7021
- "offsetX": "0px",
7022
- "offsetY": "0px",
7023
- "blur": "0px",
7024
- "spread": "0px",
7229
+ "offsetX": {
7230
+ "value": 0,
7231
+ "unit": "px"
7232
+ },
7233
+ "offsetY": {
7234
+ "value": 0,
7235
+ "unit": "px"
7236
+ },
7237
+ "blur": {
7238
+ "value": 0,
7239
+ "unit": "px"
7240
+ },
7241
+ "spread": {
7242
+ "value": 0,
7243
+ "unit": "px"
7244
+ },
7025
7245
  "inset": false
7026
7246
  }
7027
7247
  ],
@@ -7397,7 +7617,7 @@
7397
7617
  },
7398
7618
  "button-default-shadow-resting": {
7399
7619
  "key": "{button.default.shadow.resting}",
7400
- "$value": "0px 1px 0px 0px #0104090a",
7620
+ "$value": "0 1px 0 0 #0104090a",
7401
7621
  "$type": "shadow",
7402
7622
  "$extensions": {
7403
7623
  "org.primer.figma": {
@@ -7410,10 +7630,22 @@
7410
7630
  {
7411
7631
  "color": "#ffffff00",
7412
7632
  "alpha": 0,
7413
- "offsetX": "0px",
7414
- "offsetY": "0px",
7415
- "blur": "0px",
7416
- "spread": "0px",
7633
+ "offsetX": {
7634
+ "value": 0,
7635
+ "unit": "px"
7636
+ },
7637
+ "offsetY": {
7638
+ "value": 0,
7639
+ "unit": "px"
7640
+ },
7641
+ "blur": {
7642
+ "value": 0,
7643
+ "unit": "px"
7644
+ },
7645
+ "spread": {
7646
+ "value": 0,
7647
+ "unit": "px"
7648
+ },
7417
7649
  "inset": false
7418
7650
  }
7419
7651
  ],
@@ -7430,10 +7662,22 @@
7430
7662
  {
7431
7663
  "color": "{base.color.neutral.13}",
7432
7664
  "alpha": 0.04,
7433
- "offsetX": "0px",
7434
- "offsetY": "1px",
7435
- "blur": "0px",
7436
- "spread": "0px",
7665
+ "offsetX": {
7666
+ "value": 0,
7667
+ "unit": "px"
7668
+ },
7669
+ "offsetY": {
7670
+ "value": 1,
7671
+ "unit": "px"
7672
+ },
7673
+ "blur": {
7674
+ "value": 0,
7675
+ "unit": "px"
7676
+ },
7677
+ "spread": {
7678
+ "value": 0,
7679
+ "unit": "px"
7680
+ },
7437
7681
  "inset": false
7438
7682
  }
7439
7683
  ],
@@ -7449,10 +7693,22 @@
7449
7693
  {
7450
7694
  "color": "{base.color.transparent}",
7451
7695
  "alpha": 0,
7452
- "offsetX": "0px",
7453
- "offsetY": "0px",
7454
- "blur": "0px",
7455
- "spread": "0px",
7696
+ "offsetX": {
7697
+ "value": 0,
7698
+ "unit": "px"
7699
+ },
7700
+ "offsetY": {
7701
+ "value": 0,
7702
+ "unit": "px"
7703
+ },
7704
+ "blur": {
7705
+ "value": 0,
7706
+ "unit": "px"
7707
+ },
7708
+ "spread": {
7709
+ "value": 0,
7710
+ "unit": "px"
7711
+ },
7456
7712
  "inset": false
7457
7713
  }
7458
7714
  ],
@@ -9156,7 +9412,7 @@
9156
9412
  },
9157
9413
  "button-outline-shadow-selected": {
9158
9414
  "key": "{button.outline.shadow.selected}",
9159
- "$value": "inset 0px 1px 0px 0px #021a4a33",
9415
+ "$value": "inset 0 1px 0 0 #021a4a33",
9160
9416
  "$type": "shadow",
9161
9417
  "$extensions": {
9162
9418
  "org.primer.figma": {
@@ -9169,10 +9425,22 @@
9169
9425
  {
9170
9426
  "color": "#ffffff00",
9171
9427
  "alpha": 0,
9172
- "offsetX": "0px",
9173
- "offsetY": "0px",
9174
- "blur": "0px",
9175
- "spread": "0px",
9428
+ "offsetX": {
9429
+ "value": 0,
9430
+ "unit": "px"
9431
+ },
9432
+ "offsetY": {
9433
+ "value": 0,
9434
+ "unit": "px"
9435
+ },
9436
+ "blur": {
9437
+ "value": 0,
9438
+ "unit": "px"
9439
+ },
9440
+ "spread": {
9441
+ "value": 0,
9442
+ "unit": "px"
9443
+ },
9176
9444
  "inset": false
9177
9445
  }
9178
9446
  ],
@@ -9189,10 +9457,22 @@
9189
9457
  {
9190
9458
  "color": "{base.color.blue.9}",
9191
9459
  "alpha": 0.2,
9192
- "offsetX": "0px",
9193
- "offsetY": "1px",
9194
- "blur": "0px",
9195
- "spread": "0px",
9460
+ "offsetX": {
9461
+ "value": 0,
9462
+ "unit": "px"
9463
+ },
9464
+ "offsetY": {
9465
+ "value": 1,
9466
+ "unit": "px"
9467
+ },
9468
+ "blur": {
9469
+ "value": 0,
9470
+ "unit": "px"
9471
+ },
9472
+ "spread": {
9473
+ "value": 0,
9474
+ "unit": "px"
9475
+ },
9196
9476
  "inset": true
9197
9477
  }
9198
9478
  ],
@@ -9208,10 +9488,22 @@
9208
9488
  {
9209
9489
  "color": "{base.color.transparent}",
9210
9490
  "alpha": 0,
9211
- "offsetX": "0px",
9212
- "offsetY": "0px",
9213
- "blur": "0px",
9214
- "spread": "0px",
9491
+ "offsetX": {
9492
+ "value": 0,
9493
+ "unit": "px"
9494
+ },
9495
+ "offsetY": {
9496
+ "value": 0,
9497
+ "unit": "px"
9498
+ },
9499
+ "blur": {
9500
+ "value": 0,
9501
+ "unit": "px"
9502
+ },
9503
+ "spread": {
9504
+ "value": 0,
9505
+ "unit": "px"
9506
+ },
9215
9507
  "inset": false
9216
9508
  }
9217
9509
  ],
@@ -10366,7 +10658,7 @@
10366
10658
  },
10367
10659
  "button-primary-shadow-selected": {
10368
10660
  "key": "{button.primary.shadow.selected}",
10369
- "$value": "inset 0px 1px 0px 0px #00230b4d",
10661
+ "$value": "inset 0 1px 0 0 #00230b4d",
10370
10662
  "$type": "shadow",
10371
10663
  "$extensions": {
10372
10664
  "org.primer.figma": {
@@ -10379,10 +10671,22 @@
10379
10671
  {
10380
10672
  "color": "#021a4a",
10381
10673
  "alpha": 0.3,
10382
- "offsetX": "0px",
10383
- "offsetY": "1px",
10384
- "blur": "0px",
10385
- "spread": "0px",
10674
+ "offsetX": {
10675
+ "value": 0,
10676
+ "unit": "px"
10677
+ },
10678
+ "offsetY": {
10679
+ "value": 1,
10680
+ "unit": "px"
10681
+ },
10682
+ "blur": {
10683
+ "value": 0,
10684
+ "unit": "px"
10685
+ },
10686
+ "spread": {
10687
+ "value": 0,
10688
+ "unit": "px"
10689
+ },
10386
10690
  "inset": true
10387
10691
  }
10388
10692
  ],
@@ -10395,10 +10699,22 @@
10395
10699
  {
10396
10700
  "color": "#021a4a",
10397
10701
  "alpha": 0.3,
10398
- "offsetX": "0px",
10399
- "offsetY": "1px",
10400
- "blur": "0px",
10401
- "spread": "0px",
10702
+ "offsetX": {
10703
+ "value": 0,
10704
+ "unit": "px"
10705
+ },
10706
+ "offsetY": {
10707
+ "value": 1,
10708
+ "unit": "px"
10709
+ },
10710
+ "blur": {
10711
+ "value": 0,
10712
+ "unit": "px"
10713
+ },
10714
+ "spread": {
10715
+ "value": 0,
10716
+ "unit": "px"
10717
+ },
10402
10718
  "inset": true
10403
10719
  }
10404
10720
  ],
@@ -10411,10 +10727,22 @@
10411
10727
  {
10412
10728
  "color": "#ffffff00",
10413
10729
  "alpha": 0,
10414
- "offsetX": "0px",
10415
- "offsetY": "0px",
10416
- "blur": "0px",
10417
- "spread": "0px",
10730
+ "offsetX": {
10731
+ "value": 0,
10732
+ "unit": "px"
10733
+ },
10734
+ "offsetY": {
10735
+ "value": 0,
10736
+ "unit": "px"
10737
+ },
10738
+ "blur": {
10739
+ "value": 0,
10740
+ "unit": "px"
10741
+ },
10742
+ "spread": {
10743
+ "value": 0,
10744
+ "unit": "px"
10745
+ },
10418
10746
  "inset": false
10419
10747
  }
10420
10748
  ],
@@ -10431,10 +10759,22 @@
10431
10759
  {
10432
10760
  "color": "{base.color.green.9}",
10433
10761
  "alpha": 0.3,
10434
- "offsetX": "0px",
10435
- "offsetY": "1px",
10436
- "blur": "0px",
10437
- "spread": "0px",
10762
+ "offsetX": {
10763
+ "value": 0,
10764
+ "unit": "px"
10765
+ },
10766
+ "offsetY": {
10767
+ "value": 1,
10768
+ "unit": "px"
10769
+ },
10770
+ "blur": {
10771
+ "value": 0,
10772
+ "unit": "px"
10773
+ },
10774
+ "spread": {
10775
+ "value": 0,
10776
+ "unit": "px"
10777
+ },
10438
10778
  "inset": true
10439
10779
  }
10440
10780
  ],
@@ -10450,10 +10790,22 @@
10450
10790
  {
10451
10791
  "color": "{base.color.blue.9}",
10452
10792
  "alpha": 0.3,
10453
- "offsetX": "0px",
10454
- "offsetY": "1px",
10455
- "blur": "0px",
10456
- "spread": "0px",
10793
+ "offsetX": {
10794
+ "value": 0,
10795
+ "unit": "px"
10796
+ },
10797
+ "offsetY": {
10798
+ "value": 1,
10799
+ "unit": "px"
10800
+ },
10801
+ "blur": {
10802
+ "value": 0,
10803
+ "unit": "px"
10804
+ },
10805
+ "spread": {
10806
+ "value": 0,
10807
+ "unit": "px"
10808
+ },
10457
10809
  "inset": true
10458
10810
  }
10459
10811
  ],
@@ -10466,10 +10818,22 @@
10466
10818
  {
10467
10819
  "color": "{base.color.blue.9}",
10468
10820
  "alpha": 0.3,
10469
- "offsetX": "0px",
10470
- "offsetY": "1px",
10471
- "blur": "0px",
10472
- "spread": "0px",
10821
+ "offsetX": {
10822
+ "value": 0,
10823
+ "unit": "px"
10824
+ },
10825
+ "offsetY": {
10826
+ "value": 1,
10827
+ "unit": "px"
10828
+ },
10829
+ "blur": {
10830
+ "value": 0,
10831
+ "unit": "px"
10832
+ },
10833
+ "spread": {
10834
+ "value": 0,
10835
+ "unit": "px"
10836
+ },
10473
10837
  "inset": true
10474
10838
  }
10475
10839
  ],
@@ -10482,10 +10846,22 @@
10482
10846
  {
10483
10847
  "color": "{base.color.transparent}",
10484
10848
  "alpha": 0,
10485
- "offsetX": "0px",
10486
- "offsetY": "0px",
10487
- "blur": "0px",
10488
- "spread": "0px",
10849
+ "offsetX": {
10850
+ "value": 0,
10851
+ "unit": "px"
10852
+ },
10853
+ "offsetY": {
10854
+ "value": 0,
10855
+ "unit": "px"
10856
+ },
10857
+ "blur": {
10858
+ "value": 0,
10859
+ "unit": "px"
10860
+ },
10861
+ "spread": {
10862
+ "value": 0,
10863
+ "unit": "px"
10864
+ },
10489
10865
  "inset": false
10490
10866
  }
10491
10867
  ],
@@ -37222,6 +37598,10 @@
37222
37598
  },
37223
37599
  "org.primer.overrides": {
37224
37600
  "dark": "#ffffff"
37601
+ },
37602
+ "org.primer.llm": {
37603
+ "doNotUse": true,
37604
+ "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."
37225
37605
  }
37226
37606
  },
37227
37607
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37238,6 +37618,10 @@
37238
37618
  },
37239
37619
  "org.primer.overrides": {
37240
37620
  "dark": "{base.color.neutral.0}"
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."
37241
37625
  }
37242
37626
  },
37243
37627
  "key": "{fgColor.black}"
@@ -38211,6 +38595,10 @@
38211
38595
  },
38212
38596
  "org.primer.overrides": {
38213
38597
  "dark": "#010409"
38598
+ },
38599
+ "org.primer.llm": {
38600
+ "doNotUse": true,
38601
+ "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."
38214
38602
  }
38215
38603
  },
38216
38604
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38227,6 +38615,10 @@
38227
38615
  },
38228
38616
  "org.primer.overrides": {
38229
38617
  "dark": "{base.color.neutral.13}"
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."
38230
38622
  }
38231
38623
  },
38232
38624
  "key": "{fgColor.white}"
@@ -38252,7 +38644,10 @@
38252
38644
  "$value": {
38253
38645
  "color": "{focus.outlineColor}",
38254
38646
  "style": "solid",
38255
- "width": "2px"
38647
+ "width": {
38648
+ "value": 2,
38649
+ "unit": "px"
38650
+ }
38256
38651
  },
38257
38652
  "$type": "border",
38258
38653
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47403,7 +47798,7 @@
47403
47798
  },
47404
47799
  "shadow-floating-large": {
47405
47800
  "key": "{shadow.floating.large}",
47406
- "$value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
47801
+ "$value": "0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d",
47407
47802
  "$type": "shadow",
47408
47803
  "$description": "Large floating shadow for modals and dialogs",
47409
47804
  "$extensions": {
@@ -47417,18 +47812,183 @@
47417
47812
  {
47418
47813
  "color": "#454c54",
47419
47814
  "alpha": 1,
47420
- "offsetX": "0px",
47421
- "offsetY": "0px",
47422
- "blur": "0px",
47423
- "spread": "1px"
47815
+ "offsetX": {
47816
+ "value": 0,
47817
+ "unit": "px"
47818
+ },
47819
+ "offsetY": {
47820
+ "value": 0,
47821
+ "unit": "px"
47822
+ },
47823
+ "blur": {
47824
+ "value": 0,
47825
+ "unit": "px"
47826
+ },
47827
+ "spread": {
47828
+ "value": 1,
47829
+ "unit": "px"
47830
+ }
47424
47831
  },
47425
47832
  {
47426
47833
  "color": "#ffffff",
47427
47834
  "alpha": 1,
47428
- "offsetX": "0px",
47429
- "offsetY": "24px",
47430
- "blur": "48px",
47431
- "spread": "0px"
47835
+ "offsetX": {
47836
+ "value": 0,
47837
+ "unit": "px"
47838
+ },
47839
+ "offsetY": {
47840
+ "value": 24,
47841
+ "unit": "px"
47842
+ },
47843
+ "blur": {
47844
+ "value": 48,
47845
+ "unit": "px"
47846
+ },
47847
+ "spread": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ }
47851
+ }
47852
+ ],
47853
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47854
+ "isSource": true,
47855
+ "$type": "shadow"
47856
+ },
47857
+ "light-high-contrast": {
47858
+ "$value": [
47859
+ {
47860
+ "color": "#454c54",
47861
+ "alpha": 1,
47862
+ "offsetX": {
47863
+ "value": 0,
47864
+ "unit": "px"
47865
+ },
47866
+ "offsetY": {
47867
+ "value": 0,
47868
+ "unit": "px"
47869
+ },
47870
+ "blur": {
47871
+ "value": 0,
47872
+ "unit": "px"
47873
+ },
47874
+ "spread": {
47875
+ "value": 1,
47876
+ "unit": "px"
47877
+ }
47878
+ },
47879
+ {
47880
+ "color": "#25292e",
47881
+ "alpha": 0.24,
47882
+ "offsetX": {
47883
+ "value": 0,
47884
+ "unit": "px"
47885
+ },
47886
+ "offsetY": {
47887
+ "value": 40,
47888
+ "unit": "px"
47889
+ },
47890
+ "blur": {
47891
+ "value": 80,
47892
+ "unit": "px"
47893
+ },
47894
+ "spread": {
47895
+ "value": 0,
47896
+ "unit": "px"
47897
+ }
47898
+ }
47899
+ ],
47900
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47901
+ "isSource": true,
47902
+ "$type": "shadow"
47903
+ },
47904
+ "light-protanopia-deuteranopia-high-contrast": {
47905
+ "$value": [
47906
+ {
47907
+ "color": "#454c54",
47908
+ "alpha": 1,
47909
+ "offsetX": {
47910
+ "value": 0,
47911
+ "unit": "px"
47912
+ },
47913
+ "offsetY": {
47914
+ "value": 0,
47915
+ "unit": "px"
47916
+ },
47917
+ "blur": {
47918
+ "value": 0,
47919
+ "unit": "px"
47920
+ },
47921
+ "spread": {
47922
+ "value": 1,
47923
+ "unit": "px"
47924
+ }
47925
+ },
47926
+ {
47927
+ "color": "#25292e",
47928
+ "alpha": 0.24,
47929
+ "offsetX": {
47930
+ "value": 0,
47931
+ "unit": "px"
47932
+ },
47933
+ "offsetY": {
47934
+ "value": 40,
47935
+ "unit": "px"
47936
+ },
47937
+ "blur": {
47938
+ "value": 80,
47939
+ "unit": "px"
47940
+ },
47941
+ "spread": {
47942
+ "value": 0,
47943
+ "unit": "px"
47944
+ }
47945
+ }
47946
+ ],
47947
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47948
+ "isSource": true,
47949
+ "$type": "shadow"
47950
+ },
47951
+ "light-tritanopia-high-contrast": {
47952
+ "$value": [
47953
+ {
47954
+ "color": "#454c54",
47955
+ "alpha": 1,
47956
+ "offsetX": {
47957
+ "value": 0,
47958
+ "unit": "px"
47959
+ },
47960
+ "offsetY": {
47961
+ "value": 0,
47962
+ "unit": "px"
47963
+ },
47964
+ "blur": {
47965
+ "value": 0,
47966
+ "unit": "px"
47967
+ },
47968
+ "spread": {
47969
+ "value": 1,
47970
+ "unit": "px"
47971
+ }
47972
+ },
47973
+ {
47974
+ "color": "#25292e",
47975
+ "alpha": 0.24,
47976
+ "offsetX": {
47977
+ "value": 0,
47978
+ "unit": "px"
47979
+ },
47980
+ "offsetY": {
47981
+ "value": 40,
47982
+ "unit": "px"
47983
+ },
47984
+ "blur": {
47985
+ "value": 80,
47986
+ "unit": "px"
47987
+ },
47988
+ "spread": {
47989
+ "value": 0,
47990
+ "unit": "px"
47991
+ }
47432
47992
  }
47433
47993
  ],
47434
47994
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47447,19 +48007,43 @@
47447
48007
  "$value": [
47448
48008
  {
47449
48009
  "color": "{overlay.borderColor}",
47450
- "alpha": 0,
47451
- "offsetX": "0px",
47452
- "offsetY": "0px",
47453
- "blur": "0px",
47454
- "spread": "1px"
48010
+ "alpha": 1,
48011
+ "offsetX": {
48012
+ "value": 0,
48013
+ "unit": "px"
48014
+ },
48015
+ "offsetY": {
48016
+ "value": 0,
48017
+ "unit": "px"
48018
+ },
48019
+ "blur": {
48020
+ "value": 0,
48021
+ "unit": "px"
48022
+ },
48023
+ "spread": {
48024
+ "value": 1,
48025
+ "unit": "px"
48026
+ }
47455
48027
  },
47456
48028
  {
47457
48029
  "color": "{base.color.neutral.12}",
47458
48030
  "alpha": 0.24,
47459
- "offsetX": "0px",
47460
- "offsetY": "40px",
47461
- "blur": "80px",
47462
- "spread": "0px"
48031
+ "offsetX": {
48032
+ "value": 0,
48033
+ "unit": "px"
48034
+ },
48035
+ "offsetY": {
48036
+ "value": 40,
48037
+ "unit": "px"
48038
+ },
48039
+ "blur": {
48040
+ "value": 80,
48041
+ "unit": "px"
48042
+ },
48043
+ "spread": {
48044
+ "value": 0,
48045
+ "unit": "px"
48046
+ }
47463
48047
  }
47464
48048
  ],
47465
48049
  "$type": "shadow",
@@ -47475,18 +48059,183 @@
47475
48059
  {
47476
48060
  "color": "{overlay.borderColor}",
47477
48061
  "alpha": 1,
47478
- "offsetX": "0px",
47479
- "offsetY": "0px",
47480
- "blur": "0px",
47481
- "spread": "1px"
48062
+ "offsetX": {
48063
+ "value": 0,
48064
+ "unit": "px"
48065
+ },
48066
+ "offsetY": {
48067
+ "value": 0,
48068
+ "unit": "px"
48069
+ },
48070
+ "blur": {
48071
+ "value": 0,
48072
+ "unit": "px"
48073
+ },
48074
+ "spread": {
48075
+ "value": 1,
48076
+ "unit": "px"
48077
+ }
47482
48078
  },
47483
48079
  {
47484
48080
  "color": "{base.color.neutral.0}",
47485
48081
  "alpha": 1,
47486
- "offsetX": "0px",
47487
- "offsetY": "24px",
47488
- "blur": "48px",
47489
- "spread": "0px"
48082
+ "offsetX": {
48083
+ "value": 0,
48084
+ "unit": "px"
48085
+ },
48086
+ "offsetY": {
48087
+ "value": 24,
48088
+ "unit": "px"
48089
+ },
48090
+ "blur": {
48091
+ "value": 48,
48092
+ "unit": "px"
48093
+ },
48094
+ "spread": {
48095
+ "value": 0,
48096
+ "unit": "px"
48097
+ }
48098
+ }
48099
+ ],
48100
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48101
+ "isSource": true,
48102
+ "$type": "shadow"
48103
+ },
48104
+ "light-high-contrast": {
48105
+ "$value": [
48106
+ {
48107
+ "color": "{overlay.borderColor}",
48108
+ "alpha": 1,
48109
+ "offsetX": {
48110
+ "value": 0,
48111
+ "unit": "px"
48112
+ },
48113
+ "offsetY": {
48114
+ "value": 0,
48115
+ "unit": "px"
48116
+ },
48117
+ "blur": {
48118
+ "value": 0,
48119
+ "unit": "px"
48120
+ },
48121
+ "spread": {
48122
+ "value": 1,
48123
+ "unit": "px"
48124
+ }
48125
+ },
48126
+ {
48127
+ "color": "{base.color.neutral.12}",
48128
+ "alpha": 0.24,
48129
+ "offsetX": {
48130
+ "value": 0,
48131
+ "unit": "px"
48132
+ },
48133
+ "offsetY": {
48134
+ "value": 40,
48135
+ "unit": "px"
48136
+ },
48137
+ "blur": {
48138
+ "value": 80,
48139
+ "unit": "px"
48140
+ },
48141
+ "spread": {
48142
+ "value": 0,
48143
+ "unit": "px"
48144
+ }
48145
+ }
48146
+ ],
48147
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48148
+ "isSource": true,
48149
+ "$type": "shadow"
48150
+ },
48151
+ "light-protanopia-deuteranopia-high-contrast": {
48152
+ "$value": [
48153
+ {
48154
+ "color": "{overlay.borderColor}",
48155
+ "alpha": 1,
48156
+ "offsetX": {
48157
+ "value": 0,
48158
+ "unit": "px"
48159
+ },
48160
+ "offsetY": {
48161
+ "value": 0,
48162
+ "unit": "px"
48163
+ },
48164
+ "blur": {
48165
+ "value": 0,
48166
+ "unit": "px"
48167
+ },
48168
+ "spread": {
48169
+ "value": 1,
48170
+ "unit": "px"
48171
+ }
48172
+ },
48173
+ {
48174
+ "color": "{base.color.neutral.12}",
48175
+ "alpha": 0.24,
48176
+ "offsetX": {
48177
+ "value": 0,
48178
+ "unit": "px"
48179
+ },
48180
+ "offsetY": {
48181
+ "value": 40,
48182
+ "unit": "px"
48183
+ },
48184
+ "blur": {
48185
+ "value": 80,
48186
+ "unit": "px"
48187
+ },
48188
+ "spread": {
48189
+ "value": 0,
48190
+ "unit": "px"
48191
+ }
48192
+ }
48193
+ ],
48194
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48195
+ "isSource": true,
48196
+ "$type": "shadow"
48197
+ },
48198
+ "light-tritanopia-high-contrast": {
48199
+ "$value": [
48200
+ {
48201
+ "color": "{overlay.borderColor}",
48202
+ "alpha": 1,
48203
+ "offsetX": {
48204
+ "value": 0,
48205
+ "unit": "px"
48206
+ },
48207
+ "offsetY": {
48208
+ "value": 0,
48209
+ "unit": "px"
48210
+ },
48211
+ "blur": {
48212
+ "value": 0,
48213
+ "unit": "px"
48214
+ },
48215
+ "spread": {
48216
+ "value": 1,
48217
+ "unit": "px"
48218
+ }
48219
+ },
48220
+ {
48221
+ "color": "{base.color.neutral.12}",
48222
+ "alpha": 0.24,
48223
+ "offsetX": {
48224
+ "value": 0,
48225
+ "unit": "px"
48226
+ },
48227
+ "offsetY": {
48228
+ "value": 40,
48229
+ "unit": "px"
48230
+ },
48231
+ "blur": {
48232
+ "value": 80,
48233
+ "unit": "px"
48234
+ },
48235
+ "spread": {
48236
+ "value": 0,
48237
+ "unit": "px"
48238
+ }
47490
48239
  }
47491
48240
  ],
47492
48241
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47507,8 +48256,9 @@
47507
48256
  },
47508
48257
  "shadow-floating-legacy": {
47509
48258
  "key": "{shadow.floating.legacy}",
47510
- "$value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
48259
+ "$value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47511
48260
  "$type": "shadow",
48261
+ "$description": "Legacy floating shadow for backward compatibility",
47512
48262
  "$extensions": {
47513
48263
  "org.primer.figma": {},
47514
48264
  "org.primer.overrides": {
@@ -47517,24 +48267,52 @@
47517
48267
  {
47518
48268
  "color": "#ffffff",
47519
48269
  "alpha": 0.4,
47520
- "offsetX": "0px",
47521
- "offsetY": "6px",
47522
- "blur": "12px",
47523
- "spread": "-3px"
48270
+ "offsetX": {
48271
+ "value": 0,
48272
+ "unit": "px"
48273
+ },
48274
+ "offsetY": {
48275
+ "value": 6,
48276
+ "unit": "px"
48277
+ },
48278
+ "blur": {
48279
+ "value": 12,
48280
+ "unit": "px"
48281
+ },
48282
+ "spread": {
48283
+ "value": -3,
48284
+ "unit": "px"
48285
+ }
47524
48286
  },
47525
48287
  {
47526
48288
  "color": "#ffffff",
47527
48289
  "alpha": 0.4,
47528
- "offsetX": "0px",
47529
- "offsetY": "6px",
47530
- "blur": "18px",
47531
- "spread": "0px"
48290
+ "offsetX": {
48291
+ "value": 0,
48292
+ "unit": "px"
48293
+ },
48294
+ "offsetY": {
48295
+ "value": 6,
48296
+ "unit": "px"
48297
+ },
48298
+ "blur": {
48299
+ "value": 18,
48300
+ "unit": "px"
48301
+ },
48302
+ "spread": {
48303
+ "value": 0,
48304
+ "unit": "px"
48305
+ }
47532
48306
  }
47533
48307
  ],
47534
48308
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47535
48309
  "isSource": true,
47536
48310
  "$type": "shadow"
47537
48311
  }
48312
+ },
48313
+ "org.primer.llm": {
48314
+ "usage": ["legacy-component", "backward-compatibility"],
48315
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47538
48316
  }
47539
48317
  },
47540
48318
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47544,21 +48322,46 @@
47544
48322
  {
47545
48323
  "color": "{base.color.neutral.12}",
47546
48324
  "alpha": 0.04,
47547
- "offsetX": "0px",
47548
- "offsetY": "6px",
47549
- "blur": "12px",
47550
- "spread": "-3px"
48325
+ "offsetX": {
48326
+ "value": 0,
48327
+ "unit": "px"
48328
+ },
48329
+ "offsetY": {
48330
+ "value": 6,
48331
+ "unit": "px"
48332
+ },
48333
+ "blur": {
48334
+ "value": 12,
48335
+ "unit": "px"
48336
+ },
48337
+ "spread": {
48338
+ "value": -3,
48339
+ "unit": "px"
48340
+ }
47551
48341
  },
47552
48342
  {
47553
48343
  "color": "{base.color.neutral.12}",
47554
48344
  "alpha": 0.12,
47555
- "offsetX": "0px",
47556
- "offsetY": "6px",
47557
- "blur": "18px",
47558
- "spread": "0px"
48345
+ "offsetX": {
48346
+ "value": 0,
48347
+ "unit": "px"
48348
+ },
48349
+ "offsetY": {
48350
+ "value": 6,
48351
+ "unit": "px"
48352
+ },
48353
+ "blur": {
48354
+ "value": 18,
48355
+ "unit": "px"
48356
+ },
48357
+ "spread": {
48358
+ "value": 0,
48359
+ "unit": "px"
48360
+ }
47559
48361
  }
47560
48362
  ],
47561
48363
  "$type": "shadow",
48364
+ "$description": "Legacy floating shadow for backward compatibility",
47562
48365
  "$extensions": {
47563
48366
  "org.primer.figma": {},
47564
48367
  "org.primer.overrides": {
@@ -47567,24 +48370,52 @@
47567
48370
  {
47568
48371
  "color": "{base.color.neutral.0}",
47569
48372
  "alpha": 0.4,
47570
- "offsetX": "0px",
47571
- "offsetY": "6px",
47572
- "blur": "12px",
47573
- "spread": "-3px"
48373
+ "offsetX": {
48374
+ "value": 0,
48375
+ "unit": "px"
48376
+ },
48377
+ "offsetY": {
48378
+ "value": 6,
48379
+ "unit": "px"
48380
+ },
48381
+ "blur": {
48382
+ "value": 12,
48383
+ "unit": "px"
48384
+ },
48385
+ "spread": {
48386
+ "value": -3,
48387
+ "unit": "px"
48388
+ }
47574
48389
  },
47575
48390
  {
47576
48391
  "color": "{base.color.neutral.0}",
47577
48392
  "alpha": 0.4,
47578
- "offsetX": "0px",
47579
- "offsetY": "6px",
47580
- "blur": "18px",
47581
- "spread": "0px"
48393
+ "offsetX": {
48394
+ "value": 0,
48395
+ "unit": "px"
48396
+ },
48397
+ "offsetY": {
48398
+ "value": 6,
48399
+ "unit": "px"
48400
+ },
48401
+ "blur": {
48402
+ "value": 18,
48403
+ "unit": "px"
48404
+ },
48405
+ "spread": {
48406
+ "value": 0,
48407
+ "unit": "px"
48408
+ }
47582
48409
  }
47583
48410
  ],
47584
48411
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47585
48412
  "isSource": true,
47586
48413
  "$type": "shadow"
47587
48414
  }
48415
+ },
48416
+ "org.primer.llm": {
48417
+ "usage": ["legacy-component", "backward-compatibility"],
48418
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47588
48419
  }
47589
48420
  },
47590
48421
  "key": "{shadow.floating.legacy}"
@@ -47595,8 +48426,9 @@
47595
48426
  },
47596
48427
  "shadow-floating-medium": {
47597
48428
  "key": "{shadow.floating.medium}",
47598
- "$value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
48429
+ "$value": "0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
47599
48430
  "$type": "shadow",
48431
+ "$description": "Medium floating shadow for popovers and action menus",
47600
48432
  "$extensions": {
47601
48433
  "org.primer.figma": {
47602
48434
  "collection": "mode",
@@ -47608,48 +48440,433 @@
47608
48440
  {
47609
48441
  "color": "#454c54",
47610
48442
  "alpha": 1,
47611
- "offsetX": "0px",
47612
- "offsetY": "0px",
47613
- "blur": "0px",
47614
- "spread": "1px"
48443
+ "offsetX": {
48444
+ "value": 0,
48445
+ "unit": "px"
48446
+ },
48447
+ "offsetY": {
48448
+ "value": 0,
48449
+ "unit": "px"
48450
+ },
48451
+ "blur": {
48452
+ "value": 0,
48453
+ "unit": "px"
48454
+ },
48455
+ "spread": {
48456
+ "value": 1,
48457
+ "unit": "px"
48458
+ }
47615
48459
  },
47616
48460
  {
47617
48461
  "color": "#ffffff",
47618
48462
  "alpha": 0.4,
47619
- "offsetX": "0px",
47620
- "offsetY": "8px",
47621
- "blur": "16px",
47622
- "spread": "-4px"
48463
+ "offsetX": {
48464
+ "value": 0,
48465
+ "unit": "px"
48466
+ },
48467
+ "offsetY": {
48468
+ "value": 8,
48469
+ "unit": "px"
48470
+ },
48471
+ "blur": {
48472
+ "value": 16,
48473
+ "unit": "px"
48474
+ },
48475
+ "spread": {
48476
+ "value": -4,
48477
+ "unit": "px"
48478
+ }
47623
48479
  },
47624
48480
  {
47625
48481
  "color": "#ffffff",
47626
48482
  "alpha": 0.4,
47627
- "offsetX": "0px",
47628
- "offsetY": "4px",
47629
- "blur": "32px",
47630
- "spread": "-4px"
48483
+ "offsetX": {
48484
+ "value": 0,
48485
+ "unit": "px"
48486
+ },
48487
+ "offsetY": {
48488
+ "value": 4,
48489
+ "unit": "px"
48490
+ },
48491
+ "blur": {
48492
+ "value": 32,
48493
+ "unit": "px"
48494
+ },
48495
+ "spread": {
48496
+ "value": -4,
48497
+ "unit": "px"
48498
+ }
47631
48499
  },
47632
48500
  {
47633
48501
  "color": "#ffffff",
47634
48502
  "alpha": 0.4,
47635
- "offsetX": "0px",
47636
- "offsetY": "24px",
47637
- "blur": "48px",
47638
- "spread": "-12px"
48503
+ "offsetX": {
48504
+ "value": 0,
48505
+ "unit": "px"
48506
+ },
48507
+ "offsetY": {
48508
+ "value": 24,
48509
+ "unit": "px"
48510
+ },
48511
+ "blur": {
48512
+ "value": 48,
48513
+ "unit": "px"
48514
+ },
48515
+ "spread": {
48516
+ "value": -12,
48517
+ "unit": "px"
48518
+ }
47639
48519
  },
47640
48520
  {
47641
48521
  "color": "#ffffff",
47642
48522
  "alpha": 0.4,
47643
- "offsetX": "0px",
47644
- "offsetY": "48px",
47645
- "blur": "96px",
47646
- "spread": "-24px"
48523
+ "offsetX": {
48524
+ "value": 0,
48525
+ "unit": "px"
48526
+ },
48527
+ "offsetY": {
48528
+ "value": 48,
48529
+ "unit": "px"
48530
+ },
48531
+ "blur": {
48532
+ "value": 96,
48533
+ "unit": "px"
48534
+ },
48535
+ "spread": {
48536
+ "value": -24,
48537
+ "unit": "px"
48538
+ }
48539
+ }
48540
+ ],
48541
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48542
+ "isSource": true,
48543
+ "$type": "shadow"
48544
+ },
48545
+ "light-high-contrast": {
48546
+ "$value": [
48547
+ {
48548
+ "color": "#454c54",
48549
+ "alpha": 1,
48550
+ "offsetX": {
48551
+ "value": 0,
48552
+ "unit": "px"
48553
+ },
48554
+ "offsetY": {
48555
+ "value": 0,
48556
+ "unit": "px"
48557
+ },
48558
+ "blur": {
48559
+ "value": 0,
48560
+ "unit": "px"
48561
+ },
48562
+ "spread": {
48563
+ "value": 1,
48564
+ "unit": "px"
48565
+ }
48566
+ },
48567
+ {
48568
+ "color": "#25292e",
48569
+ "alpha": 0.08,
48570
+ "offsetX": {
48571
+ "value": 0,
48572
+ "unit": "px"
48573
+ },
48574
+ "offsetY": {
48575
+ "value": 8,
48576
+ "unit": "px"
48577
+ },
48578
+ "blur": {
48579
+ "value": 16,
48580
+ "unit": "px"
48581
+ },
48582
+ "spread": {
48583
+ "value": -4,
48584
+ "unit": "px"
48585
+ }
48586
+ },
48587
+ {
48588
+ "color": "#25292e",
48589
+ "alpha": 0.08,
48590
+ "offsetX": {
48591
+ "value": 0,
48592
+ "unit": "px"
48593
+ },
48594
+ "offsetY": {
48595
+ "value": 4,
48596
+ "unit": "px"
48597
+ },
48598
+ "blur": {
48599
+ "value": 32,
48600
+ "unit": "px"
48601
+ },
48602
+ "spread": {
48603
+ "value": -4,
48604
+ "unit": "px"
48605
+ }
48606
+ },
48607
+ {
48608
+ "color": "#25292e",
48609
+ "alpha": 0.08,
48610
+ "offsetX": {
48611
+ "value": 0,
48612
+ "unit": "px"
48613
+ },
48614
+ "offsetY": {
48615
+ "value": 24,
48616
+ "unit": "px"
48617
+ },
48618
+ "blur": {
48619
+ "value": 48,
48620
+ "unit": "px"
48621
+ },
48622
+ "spread": {
48623
+ "value": -12,
48624
+ "unit": "px"
48625
+ }
48626
+ },
48627
+ {
48628
+ "color": "#25292e",
48629
+ "alpha": 0.08,
48630
+ "offsetX": {
48631
+ "value": 0,
48632
+ "unit": "px"
48633
+ },
48634
+ "offsetY": {
48635
+ "value": 48,
48636
+ "unit": "px"
48637
+ },
48638
+ "blur": {
48639
+ "value": 96,
48640
+ "unit": "px"
48641
+ },
48642
+ "spread": {
48643
+ "value": -24,
48644
+ "unit": "px"
48645
+ }
48646
+ }
48647
+ ],
48648
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48649
+ "isSource": true,
48650
+ "$type": "shadow"
48651
+ },
48652
+ "light-protanopia-deuteranopia-high-contrast": {
48653
+ "$value": [
48654
+ {
48655
+ "color": "#454c54",
48656
+ "alpha": 1,
48657
+ "offsetX": {
48658
+ "value": 0,
48659
+ "unit": "px"
48660
+ },
48661
+ "offsetY": {
48662
+ "value": 0,
48663
+ "unit": "px"
48664
+ },
48665
+ "blur": {
48666
+ "value": 0,
48667
+ "unit": "px"
48668
+ },
48669
+ "spread": {
48670
+ "value": 1,
48671
+ "unit": "px"
48672
+ }
48673
+ },
48674
+ {
48675
+ "color": "#25292e",
48676
+ "alpha": 0.08,
48677
+ "offsetX": {
48678
+ "value": 0,
48679
+ "unit": "px"
48680
+ },
48681
+ "offsetY": {
48682
+ "value": 8,
48683
+ "unit": "px"
48684
+ },
48685
+ "blur": {
48686
+ "value": 16,
48687
+ "unit": "px"
48688
+ },
48689
+ "spread": {
48690
+ "value": -4,
48691
+ "unit": "px"
48692
+ }
48693
+ },
48694
+ {
48695
+ "color": "#25292e",
48696
+ "alpha": 0.08,
48697
+ "offsetX": {
48698
+ "value": 0,
48699
+ "unit": "px"
48700
+ },
48701
+ "offsetY": {
48702
+ "value": 4,
48703
+ "unit": "px"
48704
+ },
48705
+ "blur": {
48706
+ "value": 32,
48707
+ "unit": "px"
48708
+ },
48709
+ "spread": {
48710
+ "value": -4,
48711
+ "unit": "px"
48712
+ }
48713
+ },
48714
+ {
48715
+ "color": "#25292e",
48716
+ "alpha": 0.08,
48717
+ "offsetX": {
48718
+ "value": 0,
48719
+ "unit": "px"
48720
+ },
48721
+ "offsetY": {
48722
+ "value": 24,
48723
+ "unit": "px"
48724
+ },
48725
+ "blur": {
48726
+ "value": 48,
48727
+ "unit": "px"
48728
+ },
48729
+ "spread": {
48730
+ "value": -12,
48731
+ "unit": "px"
48732
+ }
48733
+ },
48734
+ {
48735
+ "color": "#25292e",
48736
+ "alpha": 0.08,
48737
+ "offsetX": {
48738
+ "value": 0,
48739
+ "unit": "px"
48740
+ },
48741
+ "offsetY": {
48742
+ "value": 48,
48743
+ "unit": "px"
48744
+ },
48745
+ "blur": {
48746
+ "value": 96,
48747
+ "unit": "px"
48748
+ },
48749
+ "spread": {
48750
+ "value": -24,
48751
+ "unit": "px"
48752
+ }
48753
+ }
48754
+ ],
48755
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48756
+ "isSource": true,
48757
+ "$type": "shadow"
48758
+ },
48759
+ "light-tritanopia-high-contrast": {
48760
+ "$value": [
48761
+ {
48762
+ "color": "#454c54",
48763
+ "alpha": 1,
48764
+ "offsetX": {
48765
+ "value": 0,
48766
+ "unit": "px"
48767
+ },
48768
+ "offsetY": {
48769
+ "value": 0,
48770
+ "unit": "px"
48771
+ },
48772
+ "blur": {
48773
+ "value": 0,
48774
+ "unit": "px"
48775
+ },
48776
+ "spread": {
48777
+ "value": 1,
48778
+ "unit": "px"
48779
+ }
48780
+ },
48781
+ {
48782
+ "color": "#25292e",
48783
+ "alpha": 0.08,
48784
+ "offsetX": {
48785
+ "value": 0,
48786
+ "unit": "px"
48787
+ },
48788
+ "offsetY": {
48789
+ "value": 8,
48790
+ "unit": "px"
48791
+ },
48792
+ "blur": {
48793
+ "value": 16,
48794
+ "unit": "px"
48795
+ },
48796
+ "spread": {
48797
+ "value": -4,
48798
+ "unit": "px"
48799
+ }
48800
+ },
48801
+ {
48802
+ "color": "#25292e",
48803
+ "alpha": 0.08,
48804
+ "offsetX": {
48805
+ "value": 0,
48806
+ "unit": "px"
48807
+ },
48808
+ "offsetY": {
48809
+ "value": 4,
48810
+ "unit": "px"
48811
+ },
48812
+ "blur": {
48813
+ "value": 32,
48814
+ "unit": "px"
48815
+ },
48816
+ "spread": {
48817
+ "value": -4,
48818
+ "unit": "px"
48819
+ }
48820
+ },
48821
+ {
48822
+ "color": "#25292e",
48823
+ "alpha": 0.08,
48824
+ "offsetX": {
48825
+ "value": 0,
48826
+ "unit": "px"
48827
+ },
48828
+ "offsetY": {
48829
+ "value": 24,
48830
+ "unit": "px"
48831
+ },
48832
+ "blur": {
48833
+ "value": 48,
48834
+ "unit": "px"
48835
+ },
48836
+ "spread": {
48837
+ "value": -12,
48838
+ "unit": "px"
48839
+ }
48840
+ },
48841
+ {
48842
+ "color": "#25292e",
48843
+ "alpha": 0.08,
48844
+ "offsetX": {
48845
+ "value": 0,
48846
+ "unit": "px"
48847
+ },
48848
+ "offsetY": {
48849
+ "value": 48,
48850
+ "unit": "px"
48851
+ },
48852
+ "blur": {
48853
+ "value": 96,
48854
+ "unit": "px"
48855
+ },
48856
+ "spread": {
48857
+ "value": -24,
48858
+ "unit": "px"
48859
+ }
47647
48860
  }
47648
48861
  ],
47649
48862
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47650
48863
  "isSource": true,
47651
48864
  "$type": "shadow"
47652
48865
  }
48866
+ },
48867
+ "org.primer.llm": {
48868
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48869
+ "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."
47653
48870
  }
47654
48871
  },
47655
48872
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47658,46 +48875,107 @@
47658
48875
  "$value": [
47659
48876
  {
47660
48877
  "color": "{overlay.borderColor}",
47661
- "alpha": 0,
47662
- "offsetX": "0px",
47663
- "offsetY": "0px",
47664
- "blur": "0px",
47665
- "spread": "1px"
48878
+ "alpha": 1,
48879
+ "offsetX": {
48880
+ "value": 0,
48881
+ "unit": "px"
48882
+ },
48883
+ "offsetY": {
48884
+ "value": 0,
48885
+ "unit": "px"
48886
+ },
48887
+ "blur": {
48888
+ "value": 0,
48889
+ "unit": "px"
48890
+ },
48891
+ "spread": {
48892
+ "value": 1,
48893
+ "unit": "px"
48894
+ }
47666
48895
  },
47667
48896
  {
47668
48897
  "color": "{base.color.neutral.12}",
47669
48898
  "alpha": 0.08,
47670
- "offsetX": "0px",
47671
- "offsetY": "8px",
47672
- "blur": "16px",
47673
- "spread": "-4px"
48899
+ "offsetX": {
48900
+ "value": 0,
48901
+ "unit": "px"
48902
+ },
48903
+ "offsetY": {
48904
+ "value": 8,
48905
+ "unit": "px"
48906
+ },
48907
+ "blur": {
48908
+ "value": 16,
48909
+ "unit": "px"
48910
+ },
48911
+ "spread": {
48912
+ "value": -4,
48913
+ "unit": "px"
48914
+ }
47674
48915
  },
47675
48916
  {
47676
48917
  "color": "{base.color.neutral.12}",
47677
48918
  "alpha": 0.08,
47678
- "offsetX": "0px",
47679
- "offsetY": "4px",
47680
- "blur": "32px",
47681
- "spread": "-4px"
48919
+ "offsetX": {
48920
+ "value": 0,
48921
+ "unit": "px"
48922
+ },
48923
+ "offsetY": {
48924
+ "value": 4,
48925
+ "unit": "px"
48926
+ },
48927
+ "blur": {
48928
+ "value": 32,
48929
+ "unit": "px"
48930
+ },
48931
+ "spread": {
48932
+ "value": -4,
48933
+ "unit": "px"
48934
+ }
47682
48935
  },
47683
48936
  {
47684
48937
  "color": "{base.color.neutral.12}",
47685
48938
  "alpha": 0.08,
47686
- "offsetX": "0px",
47687
- "offsetY": "24px",
47688
- "blur": "48px",
47689
- "spread": "-12px"
48939
+ "offsetX": {
48940
+ "value": 0,
48941
+ "unit": "px"
48942
+ },
48943
+ "offsetY": {
48944
+ "value": 24,
48945
+ "unit": "px"
48946
+ },
48947
+ "blur": {
48948
+ "value": 48,
48949
+ "unit": "px"
48950
+ },
48951
+ "spread": {
48952
+ "value": -12,
48953
+ "unit": "px"
48954
+ }
47690
48955
  },
47691
48956
  {
47692
48957
  "color": "{base.color.neutral.12}",
47693
48958
  "alpha": 0.08,
47694
- "offsetX": "0px",
47695
- "offsetY": "48px",
47696
- "blur": "96px",
47697
- "spread": "-24px"
48959
+ "offsetX": {
48960
+ "value": 0,
48961
+ "unit": "px"
48962
+ },
48963
+ "offsetY": {
48964
+ "value": 48,
48965
+ "unit": "px"
48966
+ },
48967
+ "blur": {
48968
+ "value": 96,
48969
+ "unit": "px"
48970
+ },
48971
+ "spread": {
48972
+ "value": -24,
48973
+ "unit": "px"
48974
+ }
47698
48975
  }
47699
48976
  ],
47700
48977
  "$type": "shadow",
48978
+ "$description": "Medium floating shadow for popovers and action menus",
47701
48979
  "$extensions": {
47702
48980
  "org.primer.figma": {
47703
48981
  "collection": "mode",
@@ -47709,48 +48987,433 @@
47709
48987
  {
47710
48988
  "color": "{overlay.borderColor}",
47711
48989
  "alpha": 1,
47712
- "offsetX": "0px",
47713
- "offsetY": "0px",
47714
- "blur": "0px",
47715
- "spread": "1px"
48990
+ "offsetX": {
48991
+ "value": 0,
48992
+ "unit": "px"
48993
+ },
48994
+ "offsetY": {
48995
+ "value": 0,
48996
+ "unit": "px"
48997
+ },
48998
+ "blur": {
48999
+ "value": 0,
49000
+ "unit": "px"
49001
+ },
49002
+ "spread": {
49003
+ "value": 1,
49004
+ "unit": "px"
49005
+ }
47716
49006
  },
47717
49007
  {
47718
49008
  "color": "{base.color.neutral.0}",
47719
49009
  "alpha": 0.4,
47720
- "offsetX": "0px",
47721
- "offsetY": "8px",
47722
- "blur": "16px",
47723
- "spread": "-4px"
49010
+ "offsetX": {
49011
+ "value": 0,
49012
+ "unit": "px"
49013
+ },
49014
+ "offsetY": {
49015
+ "value": 8,
49016
+ "unit": "px"
49017
+ },
49018
+ "blur": {
49019
+ "value": 16,
49020
+ "unit": "px"
49021
+ },
49022
+ "spread": {
49023
+ "value": -4,
49024
+ "unit": "px"
49025
+ }
47724
49026
  },
47725
49027
  {
47726
49028
  "color": "{base.color.neutral.0}",
47727
49029
  "alpha": 0.4,
47728
- "offsetX": "0px",
47729
- "offsetY": "4px",
47730
- "blur": "32px",
47731
- "spread": "-4px"
49030
+ "offsetX": {
49031
+ "value": 0,
49032
+ "unit": "px"
49033
+ },
49034
+ "offsetY": {
49035
+ "value": 4,
49036
+ "unit": "px"
49037
+ },
49038
+ "blur": {
49039
+ "value": 32,
49040
+ "unit": "px"
49041
+ },
49042
+ "spread": {
49043
+ "value": -4,
49044
+ "unit": "px"
49045
+ }
47732
49046
  },
47733
49047
  {
47734
49048
  "color": "{base.color.neutral.0}",
47735
49049
  "alpha": 0.4,
47736
- "offsetX": "0px",
47737
- "offsetY": "24px",
47738
- "blur": "48px",
47739
- "spread": "-12px"
49050
+ "offsetX": {
49051
+ "value": 0,
49052
+ "unit": "px"
49053
+ },
49054
+ "offsetY": {
49055
+ "value": 24,
49056
+ "unit": "px"
49057
+ },
49058
+ "blur": {
49059
+ "value": 48,
49060
+ "unit": "px"
49061
+ },
49062
+ "spread": {
49063
+ "value": -12,
49064
+ "unit": "px"
49065
+ }
47740
49066
  },
47741
49067
  {
47742
49068
  "color": "{base.color.neutral.0}",
47743
49069
  "alpha": 0.4,
47744
- "offsetX": "0px",
47745
- "offsetY": "48px",
47746
- "blur": "96px",
47747
- "spread": "-24px"
49070
+ "offsetX": {
49071
+ "value": 0,
49072
+ "unit": "px"
49073
+ },
49074
+ "offsetY": {
49075
+ "value": 48,
49076
+ "unit": "px"
49077
+ },
49078
+ "blur": {
49079
+ "value": 96,
49080
+ "unit": "px"
49081
+ },
49082
+ "spread": {
49083
+ "value": -24,
49084
+ "unit": "px"
49085
+ }
49086
+ }
49087
+ ],
49088
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49089
+ "isSource": true,
49090
+ "$type": "shadow"
49091
+ },
49092
+ "light-high-contrast": {
49093
+ "$value": [
49094
+ {
49095
+ "color": "{overlay.borderColor}",
49096
+ "alpha": 1,
49097
+ "offsetX": {
49098
+ "value": 0,
49099
+ "unit": "px"
49100
+ },
49101
+ "offsetY": {
49102
+ "value": 0,
49103
+ "unit": "px"
49104
+ },
49105
+ "blur": {
49106
+ "value": 0,
49107
+ "unit": "px"
49108
+ },
49109
+ "spread": {
49110
+ "value": 1,
49111
+ "unit": "px"
49112
+ }
49113
+ },
49114
+ {
49115
+ "color": "{base.color.neutral.12}",
49116
+ "alpha": 0.08,
49117
+ "offsetX": {
49118
+ "value": 0,
49119
+ "unit": "px"
49120
+ },
49121
+ "offsetY": {
49122
+ "value": 8,
49123
+ "unit": "px"
49124
+ },
49125
+ "blur": {
49126
+ "value": 16,
49127
+ "unit": "px"
49128
+ },
49129
+ "spread": {
49130
+ "value": -4,
49131
+ "unit": "px"
49132
+ }
49133
+ },
49134
+ {
49135
+ "color": "{base.color.neutral.12}",
49136
+ "alpha": 0.08,
49137
+ "offsetX": {
49138
+ "value": 0,
49139
+ "unit": "px"
49140
+ },
49141
+ "offsetY": {
49142
+ "value": 4,
49143
+ "unit": "px"
49144
+ },
49145
+ "blur": {
49146
+ "value": 32,
49147
+ "unit": "px"
49148
+ },
49149
+ "spread": {
49150
+ "value": -4,
49151
+ "unit": "px"
49152
+ }
49153
+ },
49154
+ {
49155
+ "color": "{base.color.neutral.12}",
49156
+ "alpha": 0.08,
49157
+ "offsetX": {
49158
+ "value": 0,
49159
+ "unit": "px"
49160
+ },
49161
+ "offsetY": {
49162
+ "value": 24,
49163
+ "unit": "px"
49164
+ },
49165
+ "blur": {
49166
+ "value": 48,
49167
+ "unit": "px"
49168
+ },
49169
+ "spread": {
49170
+ "value": -12,
49171
+ "unit": "px"
49172
+ }
49173
+ },
49174
+ {
49175
+ "color": "{base.color.neutral.12}",
49176
+ "alpha": 0.08,
49177
+ "offsetX": {
49178
+ "value": 0,
49179
+ "unit": "px"
49180
+ },
49181
+ "offsetY": {
49182
+ "value": 48,
49183
+ "unit": "px"
49184
+ },
49185
+ "blur": {
49186
+ "value": 96,
49187
+ "unit": "px"
49188
+ },
49189
+ "spread": {
49190
+ "value": -24,
49191
+ "unit": "px"
49192
+ }
49193
+ }
49194
+ ],
49195
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49196
+ "isSource": true,
49197
+ "$type": "shadow"
49198
+ },
49199
+ "light-protanopia-deuteranopia-high-contrast": {
49200
+ "$value": [
49201
+ {
49202
+ "color": "{overlay.borderColor}",
49203
+ "alpha": 1,
49204
+ "offsetX": {
49205
+ "value": 0,
49206
+ "unit": "px"
49207
+ },
49208
+ "offsetY": {
49209
+ "value": 0,
49210
+ "unit": "px"
49211
+ },
49212
+ "blur": {
49213
+ "value": 0,
49214
+ "unit": "px"
49215
+ },
49216
+ "spread": {
49217
+ "value": 1,
49218
+ "unit": "px"
49219
+ }
49220
+ },
49221
+ {
49222
+ "color": "{base.color.neutral.12}",
49223
+ "alpha": 0.08,
49224
+ "offsetX": {
49225
+ "value": 0,
49226
+ "unit": "px"
49227
+ },
49228
+ "offsetY": {
49229
+ "value": 8,
49230
+ "unit": "px"
49231
+ },
49232
+ "blur": {
49233
+ "value": 16,
49234
+ "unit": "px"
49235
+ },
49236
+ "spread": {
49237
+ "value": -4,
49238
+ "unit": "px"
49239
+ }
49240
+ },
49241
+ {
49242
+ "color": "{base.color.neutral.12}",
49243
+ "alpha": 0.08,
49244
+ "offsetX": {
49245
+ "value": 0,
49246
+ "unit": "px"
49247
+ },
49248
+ "offsetY": {
49249
+ "value": 4,
49250
+ "unit": "px"
49251
+ },
49252
+ "blur": {
49253
+ "value": 32,
49254
+ "unit": "px"
49255
+ },
49256
+ "spread": {
49257
+ "value": -4,
49258
+ "unit": "px"
49259
+ }
49260
+ },
49261
+ {
49262
+ "color": "{base.color.neutral.12}",
49263
+ "alpha": 0.08,
49264
+ "offsetX": {
49265
+ "value": 0,
49266
+ "unit": "px"
49267
+ },
49268
+ "offsetY": {
49269
+ "value": 24,
49270
+ "unit": "px"
49271
+ },
49272
+ "blur": {
49273
+ "value": 48,
49274
+ "unit": "px"
49275
+ },
49276
+ "spread": {
49277
+ "value": -12,
49278
+ "unit": "px"
49279
+ }
49280
+ },
49281
+ {
49282
+ "color": "{base.color.neutral.12}",
49283
+ "alpha": 0.08,
49284
+ "offsetX": {
49285
+ "value": 0,
49286
+ "unit": "px"
49287
+ },
49288
+ "offsetY": {
49289
+ "value": 48,
49290
+ "unit": "px"
49291
+ },
49292
+ "blur": {
49293
+ "value": 96,
49294
+ "unit": "px"
49295
+ },
49296
+ "spread": {
49297
+ "value": -24,
49298
+ "unit": "px"
49299
+ }
49300
+ }
49301
+ ],
49302
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49303
+ "isSource": true,
49304
+ "$type": "shadow"
49305
+ },
49306
+ "light-tritanopia-high-contrast": {
49307
+ "$value": [
49308
+ {
49309
+ "color": "{overlay.borderColor}",
49310
+ "alpha": 1,
49311
+ "offsetX": {
49312
+ "value": 0,
49313
+ "unit": "px"
49314
+ },
49315
+ "offsetY": {
49316
+ "value": 0,
49317
+ "unit": "px"
49318
+ },
49319
+ "blur": {
49320
+ "value": 0,
49321
+ "unit": "px"
49322
+ },
49323
+ "spread": {
49324
+ "value": 1,
49325
+ "unit": "px"
49326
+ }
49327
+ },
49328
+ {
49329
+ "color": "{base.color.neutral.12}",
49330
+ "alpha": 0.08,
49331
+ "offsetX": {
49332
+ "value": 0,
49333
+ "unit": "px"
49334
+ },
49335
+ "offsetY": {
49336
+ "value": 8,
49337
+ "unit": "px"
49338
+ },
49339
+ "blur": {
49340
+ "value": 16,
49341
+ "unit": "px"
49342
+ },
49343
+ "spread": {
49344
+ "value": -4,
49345
+ "unit": "px"
49346
+ }
49347
+ },
49348
+ {
49349
+ "color": "{base.color.neutral.12}",
49350
+ "alpha": 0.08,
49351
+ "offsetX": {
49352
+ "value": 0,
49353
+ "unit": "px"
49354
+ },
49355
+ "offsetY": {
49356
+ "value": 4,
49357
+ "unit": "px"
49358
+ },
49359
+ "blur": {
49360
+ "value": 32,
49361
+ "unit": "px"
49362
+ },
49363
+ "spread": {
49364
+ "value": -4,
49365
+ "unit": "px"
49366
+ }
49367
+ },
49368
+ {
49369
+ "color": "{base.color.neutral.12}",
49370
+ "alpha": 0.08,
49371
+ "offsetX": {
49372
+ "value": 0,
49373
+ "unit": "px"
49374
+ },
49375
+ "offsetY": {
49376
+ "value": 24,
49377
+ "unit": "px"
49378
+ },
49379
+ "blur": {
49380
+ "value": 48,
49381
+ "unit": "px"
49382
+ },
49383
+ "spread": {
49384
+ "value": -12,
49385
+ "unit": "px"
49386
+ }
49387
+ },
49388
+ {
49389
+ "color": "{base.color.neutral.12}",
49390
+ "alpha": 0.08,
49391
+ "offsetX": {
49392
+ "value": 0,
49393
+ "unit": "px"
49394
+ },
49395
+ "offsetY": {
49396
+ "value": 48,
49397
+ "unit": "px"
49398
+ },
49399
+ "blur": {
49400
+ "value": 96,
49401
+ "unit": "px"
49402
+ },
49403
+ "spread": {
49404
+ "value": -24,
49405
+ "unit": "px"
49406
+ }
47748
49407
  }
47749
49408
  ],
47750
49409
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47751
49410
  "isSource": true,
47752
49411
  "$type": "shadow"
47753
49412
  }
49413
+ },
49414
+ "org.primer.llm": {
49415
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49416
+ "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."
47754
49417
  }
47755
49418
  },
47756
49419
  "key": "{shadow.floating.medium}"
@@ -47761,7 +49424,7 @@
47761
49424
  },
47762
49425
  "shadow-floating-small": {
47763
49426
  "key": "{shadow.floating.small}",
47764
- "$value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
49427
+ "$value": "0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47765
49428
  "$type": "shadow",
47766
49429
  "$description": "Small floating shadow for dropdowns, tooltips, and small overlays",
47767
49430
  "$extensions": {
@@ -47775,26 +49438,62 @@
47775
49438
  {
47776
49439
  "color": "#454c54",
47777
49440
  "alpha": 1,
47778
- "offsetX": "0px",
47779
- "offsetY": "0px",
47780
- "blur": "0px",
47781
- "spread": "1px"
49441
+ "offsetX": {
49442
+ "value": 0,
49443
+ "unit": "px"
49444
+ },
49445
+ "offsetY": {
49446
+ "value": 0,
49447
+ "unit": "px"
49448
+ },
49449
+ "blur": {
49450
+ "value": 0,
49451
+ "unit": "px"
49452
+ },
49453
+ "spread": {
49454
+ "value": 1,
49455
+ "unit": "px"
49456
+ }
47782
49457
  },
47783
49458
  {
47784
49459
  "color": "#ffffff",
47785
49460
  "alpha": 0.4,
47786
- "offsetX": "0px",
47787
- "offsetY": "6px",
47788
- "blur": "12px",
47789
- "spread": "-3px"
49461
+ "offsetX": {
49462
+ "value": 0,
49463
+ "unit": "px"
49464
+ },
49465
+ "offsetY": {
49466
+ "value": 6,
49467
+ "unit": "px"
49468
+ },
49469
+ "blur": {
49470
+ "value": 12,
49471
+ "unit": "px"
49472
+ },
49473
+ "spread": {
49474
+ "value": -3,
49475
+ "unit": "px"
49476
+ }
47790
49477
  },
47791
49478
  {
47792
49479
  "color": "#ffffff",
47793
49480
  "alpha": 0.4,
47794
- "offsetX": "0px",
47795
- "offsetY": "6px",
47796
- "blur": "18px",
47797
- "spread": "0px"
49481
+ "offsetX": {
49482
+ "value": 0,
49483
+ "unit": "px"
49484
+ },
49485
+ "offsetY": {
49486
+ "value": 6,
49487
+ "unit": "px"
49488
+ },
49489
+ "blur": {
49490
+ "value": 18,
49491
+ "unit": "px"
49492
+ },
49493
+ "spread": {
49494
+ "value": 0,
49495
+ "unit": "px"
49496
+ }
47798
49497
  }
47799
49498
  ],
47800
49499
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47814,26 +49513,62 @@
47814
49513
  {
47815
49514
  "color": "{overlay.borderColor}",
47816
49515
  "alpha": 0.5,
47817
- "offsetX": "0px",
47818
- "offsetY": "0px",
47819
- "blur": "0px",
47820
- "spread": "1px"
49516
+ "offsetX": {
49517
+ "value": 0,
49518
+ "unit": "px"
49519
+ },
49520
+ "offsetY": {
49521
+ "value": 0,
49522
+ "unit": "px"
49523
+ },
49524
+ "blur": {
49525
+ "value": 0,
49526
+ "unit": "px"
49527
+ },
49528
+ "spread": {
49529
+ "value": 1,
49530
+ "unit": "px"
49531
+ }
47821
49532
  },
47822
49533
  {
47823
49534
  "color": "{base.color.neutral.12}",
47824
49535
  "alpha": 0.04,
47825
- "offsetX": "0px",
47826
- "offsetY": "6px",
47827
- "blur": "12px",
47828
- "spread": "-3px"
49536
+ "offsetX": {
49537
+ "value": 0,
49538
+ "unit": "px"
49539
+ },
49540
+ "offsetY": {
49541
+ "value": 6,
49542
+ "unit": "px"
49543
+ },
49544
+ "blur": {
49545
+ "value": 12,
49546
+ "unit": "px"
49547
+ },
49548
+ "spread": {
49549
+ "value": -3,
49550
+ "unit": "px"
49551
+ }
47829
49552
  },
47830
49553
  {
47831
49554
  "color": "{base.color.neutral.12}",
47832
49555
  "alpha": 0.12,
47833
- "offsetX": "0px",
47834
- "offsetY": "6px",
47835
- "blur": "18px",
47836
- "spread": "0px"
49556
+ "offsetX": {
49557
+ "value": 0,
49558
+ "unit": "px"
49559
+ },
49560
+ "offsetY": {
49561
+ "value": 6,
49562
+ "unit": "px"
49563
+ },
49564
+ "blur": {
49565
+ "value": 18,
49566
+ "unit": "px"
49567
+ },
49568
+ "spread": {
49569
+ "value": 0,
49570
+ "unit": "px"
49571
+ }
47837
49572
  }
47838
49573
  ],
47839
49574
  "$type": "shadow",
@@ -47849,26 +49584,62 @@
47849
49584
  {
47850
49585
  "color": "{overlay.borderColor}",
47851
49586
  "alpha": 1,
47852
- "offsetX": "0px",
47853
- "offsetY": "0px",
47854
- "blur": "0px",
47855
- "spread": "1px"
49587
+ "offsetX": {
49588
+ "value": 0,
49589
+ "unit": "px"
49590
+ },
49591
+ "offsetY": {
49592
+ "value": 0,
49593
+ "unit": "px"
49594
+ },
49595
+ "blur": {
49596
+ "value": 0,
49597
+ "unit": "px"
49598
+ },
49599
+ "spread": {
49600
+ "value": 1,
49601
+ "unit": "px"
49602
+ }
47856
49603
  },
47857
49604
  {
47858
49605
  "color": "{base.color.neutral.0}",
47859
49606
  "alpha": 0.4,
47860
- "offsetX": "0px",
47861
- "offsetY": "6px",
47862
- "blur": "12px",
47863
- "spread": "-3px"
49607
+ "offsetX": {
49608
+ "value": 0,
49609
+ "unit": "px"
49610
+ },
49611
+ "offsetY": {
49612
+ "value": 6,
49613
+ "unit": "px"
49614
+ },
49615
+ "blur": {
49616
+ "value": 12,
49617
+ "unit": "px"
49618
+ },
49619
+ "spread": {
49620
+ "value": -3,
49621
+ "unit": "px"
49622
+ }
47864
49623
  },
47865
49624
  {
47866
49625
  "color": "{base.color.neutral.0}",
47867
49626
  "alpha": 0.4,
47868
- "offsetX": "0px",
47869
- "offsetY": "6px",
47870
- "blur": "18px",
47871
- "spread": "0px"
49627
+ "offsetX": {
49628
+ "value": 0,
49629
+ "unit": "px"
49630
+ },
49631
+ "offsetY": {
49632
+ "value": 6,
49633
+ "unit": "px"
49634
+ },
49635
+ "blur": {
49636
+ "value": 18,
49637
+ "unit": "px"
49638
+ },
49639
+ "spread": {
49640
+ "value": 0,
49641
+ "unit": "px"
49642
+ }
47872
49643
  }
47873
49644
  ],
47874
49645
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47889,8 +49660,9 @@
47889
49660
  },
47890
49661
  "shadow-floating-xlarge": {
47891
49662
  "key": "{shadow.floating.xlarge}",
47892
- "$value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
49663
+ "$value": "0 0 0 1px #454c54, 0 56px 112px 0 #25292e52",
47893
49664
  "$type": "shadow",
49665
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47894
49666
  "$extensions": {
47895
49667
  "org.primer.figma": {
47896
49668
  "collection": "mode",
@@ -47902,24 +49674,193 @@
47902
49674
  {
47903
49675
  "color": "#454c54",
47904
49676
  "alpha": 1,
47905
- "offsetX": "0px",
47906
- "offsetY": "0px",
47907
- "blur": "0px",
47908
- "spread": "1px"
49677
+ "offsetX": {
49678
+ "value": 0,
49679
+ "unit": "px"
49680
+ },
49681
+ "offsetY": {
49682
+ "value": 0,
49683
+ "unit": "px"
49684
+ },
49685
+ "blur": {
49686
+ "value": 0,
49687
+ "unit": "px"
49688
+ },
49689
+ "spread": {
49690
+ "value": 1,
49691
+ "unit": "px"
49692
+ }
47909
49693
  },
47910
49694
  {
47911
49695
  "color": "#ffffff",
47912
49696
  "alpha": 1,
47913
- "offsetX": "0px",
47914
- "offsetY": "32px",
47915
- "blur": "64px",
47916
- "spread": "0px"
49697
+ "offsetX": {
49698
+ "value": 0,
49699
+ "unit": "px"
49700
+ },
49701
+ "offsetY": {
49702
+ "value": 32,
49703
+ "unit": "px"
49704
+ },
49705
+ "blur": {
49706
+ "value": 64,
49707
+ "unit": "px"
49708
+ },
49709
+ "spread": {
49710
+ "value": 0,
49711
+ "unit": "px"
49712
+ }
49713
+ }
49714
+ ],
49715
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49716
+ "isSource": true,
49717
+ "$type": "shadow"
49718
+ },
49719
+ "light-high-contrast": {
49720
+ "$value": [
49721
+ {
49722
+ "color": "#454c54",
49723
+ "alpha": 1,
49724
+ "offsetX": {
49725
+ "value": 0,
49726
+ "unit": "px"
49727
+ },
49728
+ "offsetY": {
49729
+ "value": 0,
49730
+ "unit": "px"
49731
+ },
49732
+ "blur": {
49733
+ "value": 0,
49734
+ "unit": "px"
49735
+ },
49736
+ "spread": {
49737
+ "value": 1,
49738
+ "unit": "px"
49739
+ }
49740
+ },
49741
+ {
49742
+ "color": "#25292e",
49743
+ "alpha": 0.32,
49744
+ "offsetX": {
49745
+ "value": 0,
49746
+ "unit": "px"
49747
+ },
49748
+ "offsetY": {
49749
+ "value": 56,
49750
+ "unit": "px"
49751
+ },
49752
+ "blur": {
49753
+ "value": 112,
49754
+ "unit": "px"
49755
+ },
49756
+ "spread": {
49757
+ "value": 0,
49758
+ "unit": "px"
49759
+ }
49760
+ }
49761
+ ],
49762
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49763
+ "isSource": true,
49764
+ "$type": "shadow"
49765
+ },
49766
+ "light-protanopia-deuteranopia-high-contrast": {
49767
+ "$value": [
49768
+ {
49769
+ "color": "#454c54",
49770
+ "alpha": 1,
49771
+ "offsetX": {
49772
+ "value": 0,
49773
+ "unit": "px"
49774
+ },
49775
+ "offsetY": {
49776
+ "value": 0,
49777
+ "unit": "px"
49778
+ },
49779
+ "blur": {
49780
+ "value": 0,
49781
+ "unit": "px"
49782
+ },
49783
+ "spread": {
49784
+ "value": 1,
49785
+ "unit": "px"
49786
+ }
49787
+ },
49788
+ {
49789
+ "color": "#25292e",
49790
+ "alpha": 0.32,
49791
+ "offsetX": {
49792
+ "value": 0,
49793
+ "unit": "px"
49794
+ },
49795
+ "offsetY": {
49796
+ "value": 56,
49797
+ "unit": "px"
49798
+ },
49799
+ "blur": {
49800
+ "value": 112,
49801
+ "unit": "px"
49802
+ },
49803
+ "spread": {
49804
+ "value": 0,
49805
+ "unit": "px"
49806
+ }
49807
+ }
49808
+ ],
49809
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49810
+ "isSource": true,
49811
+ "$type": "shadow"
49812
+ },
49813
+ "light-tritanopia-high-contrast": {
49814
+ "$value": [
49815
+ {
49816
+ "color": "#454c54",
49817
+ "alpha": 1,
49818
+ "offsetX": {
49819
+ "value": 0,
49820
+ "unit": "px"
49821
+ },
49822
+ "offsetY": {
49823
+ "value": 0,
49824
+ "unit": "px"
49825
+ },
49826
+ "blur": {
49827
+ "value": 0,
49828
+ "unit": "px"
49829
+ },
49830
+ "spread": {
49831
+ "value": 1,
49832
+ "unit": "px"
49833
+ }
49834
+ },
49835
+ {
49836
+ "color": "#25292e",
49837
+ "alpha": 0.32,
49838
+ "offsetX": {
49839
+ "value": 0,
49840
+ "unit": "px"
49841
+ },
49842
+ "offsetY": {
49843
+ "value": 56,
49844
+ "unit": "px"
49845
+ },
49846
+ "blur": {
49847
+ "value": 112,
49848
+ "unit": "px"
49849
+ },
49850
+ "spread": {
49851
+ "value": 0,
49852
+ "unit": "px"
49853
+ }
47917
49854
  }
47918
49855
  ],
47919
49856
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47920
49857
  "isSource": true,
47921
49858
  "$type": "shadow"
47922
49859
  }
49860
+ },
49861
+ "org.primer.llm": {
49862
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49863
+ "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."
47923
49864
  }
47924
49865
  },
47925
49866
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47928,22 +49869,47 @@
47928
49869
  "$value": [
47929
49870
  {
47930
49871
  "color": "{overlay.borderColor}",
47931
- "alpha": 0,
47932
- "offsetX": "0px",
47933
- "offsetY": "0px",
47934
- "blur": "0px",
47935
- "spread": "1px"
49872
+ "alpha": 1,
49873
+ "offsetX": {
49874
+ "value": 0,
49875
+ "unit": "px"
49876
+ },
49877
+ "offsetY": {
49878
+ "value": 0,
49879
+ "unit": "px"
49880
+ },
49881
+ "blur": {
49882
+ "value": 0,
49883
+ "unit": "px"
49884
+ },
49885
+ "spread": {
49886
+ "value": 1,
49887
+ "unit": "px"
49888
+ }
47936
49889
  },
47937
49890
  {
47938
49891
  "color": "{base.color.neutral.12}",
47939
49892
  "alpha": 0.32,
47940
- "offsetX": "0px",
47941
- "offsetY": "56px",
47942
- "blur": "112px",
47943
- "spread": "0px"
49893
+ "offsetX": {
49894
+ "value": 0,
49895
+ "unit": "px"
49896
+ },
49897
+ "offsetY": {
49898
+ "value": 56,
49899
+ "unit": "px"
49900
+ },
49901
+ "blur": {
49902
+ "value": 112,
49903
+ "unit": "px"
49904
+ },
49905
+ "spread": {
49906
+ "value": 0,
49907
+ "unit": "px"
49908
+ }
47944
49909
  }
47945
49910
  ],
47946
49911
  "$type": "shadow",
49912
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47947
49913
  "$extensions": {
47948
49914
  "org.primer.figma": {
47949
49915
  "collection": "mode",
@@ -47955,24 +49921,193 @@
47955
49921
  {
47956
49922
  "color": "{overlay.borderColor}",
47957
49923
  "alpha": 1,
47958
- "offsetX": "0px",
47959
- "offsetY": "0px",
47960
- "blur": "0px",
47961
- "spread": "1px"
49924
+ "offsetX": {
49925
+ "value": 0,
49926
+ "unit": "px"
49927
+ },
49928
+ "offsetY": {
49929
+ "value": 0,
49930
+ "unit": "px"
49931
+ },
49932
+ "blur": {
49933
+ "value": 0,
49934
+ "unit": "px"
49935
+ },
49936
+ "spread": {
49937
+ "value": 1,
49938
+ "unit": "px"
49939
+ }
47962
49940
  },
47963
49941
  {
47964
49942
  "color": "{base.color.neutral.0}",
47965
49943
  "alpha": 1,
47966
- "offsetX": "0px",
47967
- "offsetY": "32px",
47968
- "blur": "64px",
47969
- "spread": "0px"
49944
+ "offsetX": {
49945
+ "value": 0,
49946
+ "unit": "px"
49947
+ },
49948
+ "offsetY": {
49949
+ "value": 32,
49950
+ "unit": "px"
49951
+ },
49952
+ "blur": {
49953
+ "value": 64,
49954
+ "unit": "px"
49955
+ },
49956
+ "spread": {
49957
+ "value": 0,
49958
+ "unit": "px"
49959
+ }
49960
+ }
49961
+ ],
49962
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49963
+ "isSource": true,
49964
+ "$type": "shadow"
49965
+ },
49966
+ "light-high-contrast": {
49967
+ "$value": [
49968
+ {
49969
+ "color": "{overlay.borderColor}",
49970
+ "alpha": 1,
49971
+ "offsetX": {
49972
+ "value": 0,
49973
+ "unit": "px"
49974
+ },
49975
+ "offsetY": {
49976
+ "value": 0,
49977
+ "unit": "px"
49978
+ },
49979
+ "blur": {
49980
+ "value": 0,
49981
+ "unit": "px"
49982
+ },
49983
+ "spread": {
49984
+ "value": 1,
49985
+ "unit": "px"
49986
+ }
49987
+ },
49988
+ {
49989
+ "color": "{base.color.neutral.12}",
49990
+ "alpha": 0.32,
49991
+ "offsetX": {
49992
+ "value": 0,
49993
+ "unit": "px"
49994
+ },
49995
+ "offsetY": {
49996
+ "value": 56,
49997
+ "unit": "px"
49998
+ },
49999
+ "blur": {
50000
+ "value": 112,
50001
+ "unit": "px"
50002
+ },
50003
+ "spread": {
50004
+ "value": 0,
50005
+ "unit": "px"
50006
+ }
50007
+ }
50008
+ ],
50009
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50010
+ "isSource": true,
50011
+ "$type": "shadow"
50012
+ },
50013
+ "light-protanopia-deuteranopia-high-contrast": {
50014
+ "$value": [
50015
+ {
50016
+ "color": "{overlay.borderColor}",
50017
+ "alpha": 1,
50018
+ "offsetX": {
50019
+ "value": 0,
50020
+ "unit": "px"
50021
+ },
50022
+ "offsetY": {
50023
+ "value": 0,
50024
+ "unit": "px"
50025
+ },
50026
+ "blur": {
50027
+ "value": 0,
50028
+ "unit": "px"
50029
+ },
50030
+ "spread": {
50031
+ "value": 1,
50032
+ "unit": "px"
50033
+ }
50034
+ },
50035
+ {
50036
+ "color": "{base.color.neutral.12}",
50037
+ "alpha": 0.32,
50038
+ "offsetX": {
50039
+ "value": 0,
50040
+ "unit": "px"
50041
+ },
50042
+ "offsetY": {
50043
+ "value": 56,
50044
+ "unit": "px"
50045
+ },
50046
+ "blur": {
50047
+ "value": 112,
50048
+ "unit": "px"
50049
+ },
50050
+ "spread": {
50051
+ "value": 0,
50052
+ "unit": "px"
50053
+ }
50054
+ }
50055
+ ],
50056
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
50057
+ "isSource": true,
50058
+ "$type": "shadow"
50059
+ },
50060
+ "light-tritanopia-high-contrast": {
50061
+ "$value": [
50062
+ {
50063
+ "color": "{overlay.borderColor}",
50064
+ "alpha": 1,
50065
+ "offsetX": {
50066
+ "value": 0,
50067
+ "unit": "px"
50068
+ },
50069
+ "offsetY": {
50070
+ "value": 0,
50071
+ "unit": "px"
50072
+ },
50073
+ "blur": {
50074
+ "value": 0,
50075
+ "unit": "px"
50076
+ },
50077
+ "spread": {
50078
+ "value": 1,
50079
+ "unit": "px"
50080
+ }
50081
+ },
50082
+ {
50083
+ "color": "{base.color.neutral.12}",
50084
+ "alpha": 0.32,
50085
+ "offsetX": {
50086
+ "value": 0,
50087
+ "unit": "px"
50088
+ },
50089
+ "offsetY": {
50090
+ "value": 56,
50091
+ "unit": "px"
50092
+ },
50093
+ "blur": {
50094
+ "value": 112,
50095
+ "unit": "px"
50096
+ },
50097
+ "spread": {
50098
+ "value": 0,
50099
+ "unit": "px"
50100
+ }
47970
50101
  }
47971
50102
  ],
47972
50103
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47973
50104
  "isSource": true,
47974
50105
  "$type": "shadow"
47975
50106
  }
50107
+ },
50108
+ "org.primer.llm": {
50109
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50110
+ "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."
47976
50111
  }
47977
50112
  },
47978
50113
  "key": "{shadow.floating.xlarge}"
@@ -47983,8 +50118,9 @@
47983
50118
  },
47984
50119
  "shadow-inset": {
47985
50120
  "key": "{shadow.inset}",
47986
- "$value": "inset 0px 1px 0px 0px #0104090a",
50121
+ "$value": "inset 0 1px 0 0 #0104090a",
47987
50122
  "$type": "shadow",
50123
+ "$description": "Inset shadow for recessed elements",
47988
50124
  "$extensions": {
47989
50125
  "org.primer.figma": {
47990
50126
  "collection": "mode",
@@ -47995,16 +50131,32 @@
47995
50131
  "$value": {
47996
50132
  "color": "#ffffff",
47997
50133
  "alpha": 0.24,
47998
- "offsetX": "0px",
47999
- "offsetY": "1px",
48000
- "blur": "0px",
48001
- "spread": "0px",
50134
+ "offsetX": {
50135
+ "value": 0,
50136
+ "unit": "px"
50137
+ },
50138
+ "offsetY": {
50139
+ "value": 1,
50140
+ "unit": "px"
50141
+ },
50142
+ "blur": {
50143
+ "value": 0,
50144
+ "unit": "px"
50145
+ },
50146
+ "spread": {
50147
+ "value": 0,
50148
+ "unit": "px"
50149
+ },
48002
50150
  "inset": true
48003
50151
  },
48004
50152
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48005
50153
  "isSource": true,
48006
50154
  "$type": "shadow"
48007
50155
  }
50156
+ },
50157
+ "org.primer.llm": {
50158
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50159
+ "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."
48008
50160
  }
48009
50161
  },
48010
50162
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48013,13 +50165,26 @@
48013
50165
  "$value": {
48014
50166
  "color": "{base.color.neutral.13}",
48015
50167
  "alpha": 0.04,
48016
- "offsetX": "0px",
48017
- "offsetY": "1px",
48018
- "blur": "0px",
48019
- "spread": "0px",
50168
+ "offsetX": {
50169
+ "value": 0,
50170
+ "unit": "px"
50171
+ },
50172
+ "offsetY": {
50173
+ "value": 1,
50174
+ "unit": "px"
50175
+ },
50176
+ "blur": {
50177
+ "value": 0,
50178
+ "unit": "px"
50179
+ },
50180
+ "spread": {
50181
+ "value": 0,
50182
+ "unit": "px"
50183
+ },
48020
50184
  "inset": true
48021
50185
  },
48022
50186
  "$type": "shadow",
50187
+ "$description": "Inset shadow for recessed elements",
48023
50188
  "$extensions": {
48024
50189
  "org.primer.figma": {
48025
50190
  "collection": "mode",
@@ -48030,16 +50195,32 @@
48030
50195
  "$value": {
48031
50196
  "color": "{base.color.neutral.0}",
48032
50197
  "alpha": 0.24,
48033
- "offsetX": "0px",
48034
- "offsetY": "1px",
48035
- "blur": "0px",
48036
- "spread": "0px",
50198
+ "offsetX": {
50199
+ "value": 0,
50200
+ "unit": "px"
50201
+ },
50202
+ "offsetY": {
50203
+ "value": 1,
50204
+ "unit": "px"
50205
+ },
50206
+ "blur": {
50207
+ "value": 0,
50208
+ "unit": "px"
50209
+ },
50210
+ "spread": {
50211
+ "value": 0,
50212
+ "unit": "px"
50213
+ },
48037
50214
  "inset": true
48038
50215
  },
48039
50216
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48040
50217
  "isSource": true,
48041
50218
  "$type": "shadow"
48042
50219
  }
50220
+ },
50221
+ "org.primer.llm": {
50222
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50223
+ "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."
48043
50224
  }
48044
50225
  },
48045
50226
  "key": "{shadow.inset}"
@@ -48050,8 +50231,9 @@
48050
50231
  },
48051
50232
  "shadow-resting-medium": {
48052
50233
  "key": "{shadow.resting.medium}",
48053
- "$value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
50234
+ "$value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
48054
50235
  "$type": "shadow",
50236
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48055
50237
  "$extensions": {
48056
50238
  "org.primer.figma": {
48057
50239
  "collection": "mode",
@@ -48063,24 +50245,52 @@
48063
50245
  {
48064
50246
  "color": "#ffffff",
48065
50247
  "alpha": 0.4,
48066
- "offsetX": "0px",
48067
- "offsetY": "1px",
48068
- "blur": "1px",
48069
- "spread": "0px"
50248
+ "offsetX": {
50249
+ "value": 0,
50250
+ "unit": "px"
50251
+ },
50252
+ "offsetY": {
50253
+ "value": 1,
50254
+ "unit": "px"
50255
+ },
50256
+ "blur": {
50257
+ "value": 1,
50258
+ "unit": "px"
50259
+ },
50260
+ "spread": {
50261
+ "value": 0,
50262
+ "unit": "px"
50263
+ }
48070
50264
  },
48071
50265
  {
48072
50266
  "color": "#ffffff",
48073
50267
  "alpha": 0.8,
48074
- "offsetX": "0px",
48075
- "offsetY": "3px",
48076
- "blur": "6px",
48077
- "spread": "0px"
50268
+ "offsetX": {
50269
+ "value": 0,
50270
+ "unit": "px"
50271
+ },
50272
+ "offsetY": {
50273
+ "value": 3,
50274
+ "unit": "px"
50275
+ },
50276
+ "blur": {
50277
+ "value": 6,
50278
+ "unit": "px"
50279
+ },
50280
+ "spread": {
50281
+ "value": 0,
50282
+ "unit": "px"
50283
+ }
48078
50284
  }
48079
50285
  ],
48080
50286
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48081
50287
  "isSource": true,
48082
50288
  "$type": "shadow"
48083
50289
  }
50290
+ },
50291
+ "org.primer.llm": {
50292
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50293
+ "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."
48084
50294
  }
48085
50295
  },
48086
50296
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48090,21 +50300,46 @@
48090
50300
  {
48091
50301
  "color": "{base.color.neutral.12}",
48092
50302
  "alpha": 0.1,
48093
- "offsetX": "0px",
48094
- "offsetY": "1px",
48095
- "blur": "1px",
48096
- "spread": "0px"
50303
+ "offsetX": {
50304
+ "value": 0,
50305
+ "unit": "px"
50306
+ },
50307
+ "offsetY": {
50308
+ "value": 1,
50309
+ "unit": "px"
50310
+ },
50311
+ "blur": {
50312
+ "value": 1,
50313
+ "unit": "px"
50314
+ },
50315
+ "spread": {
50316
+ "value": 0,
50317
+ "unit": "px"
50318
+ }
48097
50319
  },
48098
50320
  {
48099
50321
  "color": "{base.color.neutral.12}",
48100
50322
  "alpha": 0.12,
48101
- "offsetX": "0px",
48102
- "offsetY": "3px",
48103
- "blur": "6px",
48104
- "spread": "0px"
50323
+ "offsetX": {
50324
+ "value": 0,
50325
+ "unit": "px"
50326
+ },
50327
+ "offsetY": {
50328
+ "value": 3,
50329
+ "unit": "px"
50330
+ },
50331
+ "blur": {
50332
+ "value": 6,
50333
+ "unit": "px"
50334
+ },
50335
+ "spread": {
50336
+ "value": 0,
50337
+ "unit": "px"
50338
+ }
48105
50339
  }
48106
50340
  ],
48107
50341
  "$type": "shadow",
50342
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48108
50343
  "$extensions": {
48109
50344
  "org.primer.figma": {
48110
50345
  "collection": "mode",
@@ -48116,24 +50351,52 @@
48116
50351
  {
48117
50352
  "color": "{base.color.neutral.0}",
48118
50353
  "alpha": 0.4,
48119
- "offsetX": "0px",
48120
- "offsetY": "1px",
48121
- "blur": "1px",
48122
- "spread": "0px"
50354
+ "offsetX": {
50355
+ "value": 0,
50356
+ "unit": "px"
50357
+ },
50358
+ "offsetY": {
50359
+ "value": 1,
50360
+ "unit": "px"
50361
+ },
50362
+ "blur": {
50363
+ "value": 1,
50364
+ "unit": "px"
50365
+ },
50366
+ "spread": {
50367
+ "value": 0,
50368
+ "unit": "px"
50369
+ }
48123
50370
  },
48124
50371
  {
48125
50372
  "color": "{base.color.neutral.0}",
48126
50373
  "alpha": 0.8,
48127
- "offsetX": "0px",
48128
- "offsetY": "3px",
48129
- "blur": "6px",
48130
- "spread": "0px"
50374
+ "offsetX": {
50375
+ "value": 0,
50376
+ "unit": "px"
50377
+ },
50378
+ "offsetY": {
50379
+ "value": 3,
50380
+ "unit": "px"
50381
+ },
50382
+ "blur": {
50383
+ "value": 6,
50384
+ "unit": "px"
50385
+ },
50386
+ "spread": {
50387
+ "value": 0,
50388
+ "unit": "px"
50389
+ }
48131
50390
  }
48132
50391
  ],
48133
50392
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48134
50393
  "isSource": true,
48135
50394
  "$type": "shadow"
48136
50395
  }
50396
+ },
50397
+ "org.primer.llm": {
50398
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50399
+ "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."
48137
50400
  }
48138
50401
  },
48139
50402
  "key": "{shadow.resting.medium}"
@@ -48144,8 +50407,9 @@
48144
50407
  },
48145
50408
  "shadow-resting-small": {
48146
50409
  "key": "{shadow.resting.small}",
48147
- "$value": "0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f",
50410
+ "$value": "0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908",
48148
50411
  "$type": "shadow",
50412
+ "$description": "Small resting shadow for buttons and interactive elements",
48149
50413
  "$extensions": {
48150
50414
  "org.primer.figma": {
48151
50415
  "collection": "mode",
@@ -48157,19 +50421,43 @@
48157
50421
  {
48158
50422
  "color": "#ffffff",
48159
50423
  "alpha": 0.6,
48160
- "offsetX": "0px",
48161
- "offsetY": "1px",
48162
- "blur": "1px",
48163
- "spread": "0px",
50424
+ "offsetX": {
50425
+ "value": 0,
50426
+ "unit": "px"
50427
+ },
50428
+ "offsetY": {
50429
+ "value": 1,
50430
+ "unit": "px"
50431
+ },
50432
+ "blur": {
50433
+ "value": 1,
50434
+ "unit": "px"
50435
+ },
50436
+ "spread": {
50437
+ "value": 0,
50438
+ "unit": "px"
50439
+ },
48164
50440
  "inset": false
48165
50441
  },
48166
50442
  {
48167
50443
  "color": "#ffffff",
48168
50444
  "alpha": 0.6,
48169
- "offsetX": "0px",
48170
- "offsetY": "1px",
48171
- "blur": "3px",
48172
- "spread": "0px",
50445
+ "offsetX": {
50446
+ "value": 0,
50447
+ "unit": "px"
50448
+ },
50449
+ "offsetY": {
50450
+ "value": 1,
50451
+ "unit": "px"
50452
+ },
50453
+ "blur": {
50454
+ "value": 3,
50455
+ "unit": "px"
50456
+ },
50457
+ "spread": {
50458
+ "value": 0,
50459
+ "unit": "px"
50460
+ },
48173
50461
  "inset": false
48174
50462
  }
48175
50463
  ],
@@ -48177,6 +50465,10 @@
48177
50465
  "isSource": true,
48178
50466
  "$type": "shadow"
48179
50467
  }
50468
+ },
50469
+ "org.primer.llm": {
50470
+ "usage": ["button", "interactive-card", "clickable-element"],
50471
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48180
50472
  }
48181
50473
  },
48182
50474
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48185,24 +50477,49 @@
48185
50477
  "$value": [
48186
50478
  {
48187
50479
  "color": "{base.color.neutral.13}",
48188
- "alpha": 0.06,
48189
- "offsetX": "0px",
48190
- "offsetY": "1px",
48191
- "blur": "1px",
48192
- "spread": "0px",
50480
+ "alpha": 0.04,
50481
+ "offsetX": {
50482
+ "value": 0,
50483
+ "unit": "px"
50484
+ },
50485
+ "offsetY": {
50486
+ "value": 1,
50487
+ "unit": "px"
50488
+ },
50489
+ "blur": {
50490
+ "value": 1,
50491
+ "unit": "px"
50492
+ },
50493
+ "spread": {
50494
+ "value": 0,
50495
+ "unit": "px"
50496
+ },
48193
50497
  "inset": false
48194
50498
  },
48195
50499
  {
48196
50500
  "color": "{base.color.neutral.13}",
48197
- "alpha": 0.06,
48198
- "offsetX": "0px",
48199
- "offsetY": "1px",
48200
- "blur": "3px",
48201
- "spread": "0px",
50501
+ "alpha": 0.03,
50502
+ "offsetX": {
50503
+ "value": 0,
50504
+ "unit": "px"
50505
+ },
50506
+ "offsetY": {
50507
+ "value": 1,
50508
+ "unit": "px"
50509
+ },
50510
+ "blur": {
50511
+ "value": 2,
50512
+ "unit": "px"
50513
+ },
50514
+ "spread": {
50515
+ "value": 0,
50516
+ "unit": "px"
50517
+ },
48202
50518
  "inset": false
48203
50519
  }
48204
50520
  ],
48205
50521
  "$type": "shadow",
50522
+ "$description": "Small resting shadow for buttons and interactive elements",
48206
50523
  "$extensions": {
48207
50524
  "org.primer.figma": {
48208
50525
  "collection": "mode",
@@ -48214,19 +50531,43 @@
48214
50531
  {
48215
50532
  "color": "{base.color.neutral.0}",
48216
50533
  "alpha": 0.6,
48217
- "offsetX": "0px",
48218
- "offsetY": "1px",
48219
- "blur": "1px",
48220
- "spread": "0px",
50534
+ "offsetX": {
50535
+ "value": 0,
50536
+ "unit": "px"
50537
+ },
50538
+ "offsetY": {
50539
+ "value": 1,
50540
+ "unit": "px"
50541
+ },
50542
+ "blur": {
50543
+ "value": 1,
50544
+ "unit": "px"
50545
+ },
50546
+ "spread": {
50547
+ "value": 0,
50548
+ "unit": "px"
50549
+ },
48221
50550
  "inset": false
48222
50551
  },
48223
50552
  {
48224
50553
  "color": "{base.color.neutral.0}",
48225
50554
  "alpha": 0.6,
48226
- "offsetX": "0px",
48227
- "offsetY": "1px",
48228
- "blur": "3px",
48229
- "spread": "0px",
50555
+ "offsetX": {
50556
+ "value": 0,
50557
+ "unit": "px"
50558
+ },
50559
+ "offsetY": {
50560
+ "value": 1,
50561
+ "unit": "px"
50562
+ },
50563
+ "blur": {
50564
+ "value": 3,
50565
+ "unit": "px"
50566
+ },
50567
+ "spread": {
50568
+ "value": 0,
50569
+ "unit": "px"
50570
+ },
48230
50571
  "inset": false
48231
50572
  }
48232
50573
  ],
@@ -48234,6 +50575,10 @@
48234
50575
  "isSource": true,
48235
50576
  "$type": "shadow"
48236
50577
  }
50578
+ },
50579
+ "org.primer.llm": {
50580
+ "usage": ["button", "interactive-card", "clickable-element"],
50581
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48237
50582
  }
48238
50583
  },
48239
50584
  "key": "{shadow.resting.small}"
@@ -48244,8 +50589,9 @@
48244
50589
  },
48245
50590
  "shadow-resting-xsmall": {
48246
50591
  "key": "{shadow.resting.xsmall}",
48247
- "$value": "0px 1px 1px 0px #0104090f",
50592
+ "$value": "0 1px 1px 0 #0104090d",
48248
50593
  "$type": "shadow",
50594
+ "$description": "Extra small resting shadow for minimal elevation",
48249
50595
  "$extensions": {
48250
50596
  "org.primer.figma": {
48251
50597
  "collection": "mode",
@@ -48256,16 +50602,32 @@
48256
50602
  "$value": {
48257
50603
  "color": "#ffffff",
48258
50604
  "alpha": 0.8,
48259
- "offsetX": "0px",
48260
- "offsetY": "1px",
48261
- "blur": "1px",
48262
- "spread": "0px",
50605
+ "offsetX": {
50606
+ "value": 0,
50607
+ "unit": "px"
50608
+ },
50609
+ "offsetY": {
50610
+ "value": 1,
50611
+ "unit": "px"
50612
+ },
50613
+ "blur": {
50614
+ "value": 1,
50615
+ "unit": "px"
50616
+ },
50617
+ "spread": {
50618
+ "value": 0,
50619
+ "unit": "px"
50620
+ },
48263
50621
  "inset": false
48264
50622
  },
48265
50623
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48266
50624
  "isSource": true,
48267
50625
  "$type": "shadow"
48268
50626
  }
50627
+ },
50628
+ "org.primer.llm": {
50629
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50630
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48269
50631
  }
48270
50632
  },
48271
50633
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48273,14 +50635,27 @@
48273
50635
  "original": {
48274
50636
  "$value": {
48275
50637
  "color": "{base.color.neutral.13}",
48276
- "alpha": 0.06,
48277
- "offsetX": "0px",
48278
- "offsetY": "1px",
48279
- "blur": "1px",
48280
- "spread": "0px",
50638
+ "alpha": 0.05,
50639
+ "offsetX": {
50640
+ "value": 0,
50641
+ "unit": "px"
50642
+ },
50643
+ "offsetY": {
50644
+ "value": 1,
50645
+ "unit": "px"
50646
+ },
50647
+ "blur": {
50648
+ "value": 1,
50649
+ "unit": "px"
50650
+ },
50651
+ "spread": {
50652
+ "value": 0,
50653
+ "unit": "px"
50654
+ },
48281
50655
  "inset": false
48282
50656
  },
48283
50657
  "$type": "shadow",
50658
+ "$description": "Extra small resting shadow for minimal elevation",
48284
50659
  "$extensions": {
48285
50660
  "org.primer.figma": {
48286
50661
  "collection": "mode",
@@ -48291,16 +50666,32 @@
48291
50666
  "$value": {
48292
50667
  "color": "{base.color.neutral.0}",
48293
50668
  "alpha": 0.8,
48294
- "offsetX": "0px",
48295
- "offsetY": "1px",
48296
- "blur": "1px",
48297
- "spread": "0px",
50669
+ "offsetX": {
50670
+ "value": 0,
50671
+ "unit": "px"
50672
+ },
50673
+ "offsetY": {
50674
+ "value": 1,
50675
+ "unit": "px"
50676
+ },
50677
+ "blur": {
50678
+ "value": 1,
50679
+ "unit": "px"
50680
+ },
50681
+ "spread": {
50682
+ "value": 0,
50683
+ "unit": "px"
50684
+ },
48298
50685
  "inset": false
48299
50686
  },
48300
50687
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48301
50688
  "isSource": true,
48302
50689
  "$type": "shadow"
48303
50690
  }
50691
+ },
50692
+ "org.primer.llm": {
50693
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50694
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48304
50695
  }
48305
50696
  },
48306
50697
  "key": "{shadow.resting.xsmall}"