@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
package/dist/docs/functional/themes/light-colorblind.json CHANGED
@@ -176,10 +176,22 @@
176
176
  {
177
177
  "color": "#f6f8fa",
178
178
  "alpha": 1,
179
- "offsetX": "0px",
180
- "offsetY": "0px",
181
- "blur": "0px",
182
- "spread": "2px"
179
+ "offsetX": {
180
+ "value": 0,
181
+ "unit": "px"
182
+ },
183
+ "offsetY": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "blur": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "spread": {
192
+ "value": 2,
193
+ "unit": "px"
194
+ }
183
195
  }
184
196
  ],
185
197
  "filePath": "src/tokens/component/avatar.json5",
@@ -195,10 +207,22 @@
195
207
  {
196
208
  "color": "{base.color.neutral.0}",
197
209
  "alpha": 0.8,
198
- "offsetX": "0px",
199
- "offsetY": "0px",
200
- "blur": "0px",
201
- "spread": "2px"
210
+ "offsetX": {
211
+ "value": 0,
212
+ "unit": "px"
213
+ },
214
+ "offsetY": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "blur": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "spread": {
223
+ "value": 2,
224
+ "unit": "px"
225
+ }
202
226
  }
203
227
  ],
204
228
  "$type": "shadow",
@@ -213,10 +237,22 @@
213
237
  {
214
238
  "color": "{base.color.neutral.1}",
215
239
  "alpha": 1,
216
- "offsetX": "0px",
217
- "offsetY": "0px",
218
- "blur": "0px",
219
- "spread": "2px"
240
+ "offsetX": {
241
+ "value": 0,
242
+ "unit": "px"
243
+ },
244
+ "offsetY": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "blur": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "spread": {
253
+ "value": 2,
254
+ "unit": "px"
255
+ }
220
256
  }
221
257
  ],
222
258
  "filePath": "src/tokens/component/avatar.json5",
@@ -230,7 +266,7 @@
230
266
  "name": "avatar-shadow",
231
267
  "attributes": {},
232
268
  "path": ["avatar", "shadow"],
233
- "value": "0px 0px 0px 2px #ffffffcc",
269
+ "value": "0 0 0 2px #ffffffcc",
234
270
  "type": "shadow"
235
271
  },
236
272
  "avatarStack-fade-bgColor-default": {
@@ -543,6 +579,10 @@
543
579
  },
544
580
  "org.primer.overrides": {
545
581
  "dark": "#ffffff"
582
+ },
583
+ "org.primer.llm": {
584
+ "doNotUse": true,
585
+ "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."
546
586
  }
547
587
  },
548
588
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -559,6 +599,10 @@
559
599
  },
560
600
  "org.primer.overrides": {
561
601
  "dark": "{base.color.neutral.0}"
602
+ },
603
+ "org.primer.llm": {
604
+ "doNotUse": true,
605
+ "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."
562
606
  }
563
607
  },
564
608
  "key": "{bgColor.black}"
@@ -2435,6 +2479,10 @@
2435
2479
  },
2436
2480
  "org.primer.overrides": {
2437
2481
  "dark": "#1f2328"
2482
+ },
2483
+ "org.primer.llm": {
2484
+ "doNotUse": true,
2485
+ "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."
2438
2486
  }
2439
2487
  },
2440
2488
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2451,6 +2499,10 @@
2451
2499
  },
2452
2500
  "org.primer.overrides": {
2453
2501
  "dark": "{base.color.neutral.13}"
2502
+ },
2503
+ "org.primer.llm": {
2504
+ "doNotUse": true,
2505
+ "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."
2454
2506
  }
2455
2507
  },
2456
2508
  "key": "{bgColor.white}"
@@ -6945,10 +6997,22 @@
6945
6997
  {
6946
6998
  "color": "#471700",
6947
6999
  "alpha": 0.2,
6948
- "offsetX": "0px",
6949
- "offsetY": "1px",
6950
- "blur": "0px",
6951
- "spread": "0px",
7000
+ "offsetX": {
7001
+ "value": 0,
7002
+ "unit": "px"
7003
+ },
7004
+ "offsetY": {
7005
+ "value": 1,
7006
+ "unit": "px"
7007
+ },
7008
+ "blur": {
7009
+ "value": 0,
7010
+ "unit": "px"
7011
+ },
7012
+ "spread": {
7013
+ "value": 0,
7014
+ "unit": "px"
7015
+ },
6952
7016
  "inset": true
6953
7017
  }
6954
7018
  ],
@@ -6961,10 +7025,22 @@
6961
7025
  {
6962
7026
  "color": "#ffffff00",
6963
7027
  "alpha": 0,
6964
- "offsetX": "0px",
6965
- "offsetY": "0px",
6966
- "blur": "0px",
6967
- "spread": "0px",
7028
+ "offsetX": {
7029
+ "value": 0,
7030
+ "unit": "px"
7031
+ },
7032
+ "offsetY": {
7033
+ "value": 0,
7034
+ "unit": "px"
7035
+ },
7036
+ "blur": {
7037
+ "value": 0,
7038
+ "unit": "px"
7039
+ },
7040
+ "spread": {
7041
+ "value": 0,
7042
+ "unit": "px"
7043
+ },
6968
7044
  "inset": false
6969
7045
  }
6970
7046
  ],
@@ -6981,10 +7057,22 @@
6981
7057
  {
6982
7058
  "color": "{base.color.orange.9}",
6983
7059
  "alpha": 0.2,
6984
- "offsetX": "0px",
6985
- "offsetY": "1px",
6986
- "blur": "0px",
6987
- "spread": "0px",
7060
+ "offsetX": {
7061
+ "value": 0,
7062
+ "unit": "px"
7063
+ },
7064
+ "offsetY": {
7065
+ "value": 1,
7066
+ "unit": "px"
7067
+ },
7068
+ "blur": {
7069
+ "value": 0,
7070
+ "unit": "px"
7071
+ },
7072
+ "spread": {
7073
+ "value": 0,
7074
+ "unit": "px"
7075
+ },
6988
7076
  "inset": true
6989
7077
  }
6990
7078
  ],
@@ -7000,10 +7088,22 @@
7000
7088
  {
7001
7089
  "color": "{base.color.orange.9}",
7002
7090
  "alpha": 0.2,
7003
- "offsetX": "0px",
7004
- "offsetY": "1px",
7005
- "blur": "0px",
7006
- "spread": "0px",
7091
+ "offsetX": {
7092
+ "value": 0,
7093
+ "unit": "px"
7094
+ },
7095
+ "offsetY": {
7096
+ "value": 1,
7097
+ "unit": "px"
7098
+ },
7099
+ "blur": {
7100
+ "value": 0,
7101
+ "unit": "px"
7102
+ },
7103
+ "spread": {
7104
+ "value": 0,
7105
+ "unit": "px"
7106
+ },
7007
7107
  "inset": true
7008
7108
  }
7009
7109
  ],
@@ -7016,10 +7116,22 @@
7016
7116
  {
7017
7117
  "color": "{base.color.transparent}",
7018
7118
  "alpha": 0,
7019
- "offsetX": "0px",
7020
- "offsetY": "0px",
7021
- "blur": "0px",
7022
- "spread": "0px",
7119
+ "offsetX": {
7120
+ "value": 0,
7121
+ "unit": "px"
7122
+ },
7123
+ "offsetY": {
7124
+ "value": 0,
7125
+ "unit": "px"
7126
+ },
7127
+ "blur": {
7128
+ "value": 0,
7129
+ "unit": "px"
7130
+ },
7131
+ "spread": {
7132
+ "value": 0,
7133
+ "unit": "px"
7134
+ },
7023
7135
  "inset": false
7024
7136
  }
7025
7137
  ],
@@ -7034,7 +7146,7 @@
7034
7146
  "name": "button-danger-shadow-selected",
7035
7147
  "attributes": {},
7036
7148
  "path": ["button", "danger", "shadow", "selected"],
7037
- "value": "inset 0px 1px 0px 0px #47170033",
7149
+ "value": "inset 0 1px 0 0 #47170033",
7038
7150
  "type": "shadow"
7039
7151
  },
7040
7152
  "button-default-bgColor-active": {
@@ -7408,10 +7520,22 @@
7408
7520
  {
7409
7521
  "color": "#ffffff00",
7410
7522
  "alpha": 0,
7411
- "offsetX": "0px",
7412
- "offsetY": "0px",
7413
- "blur": "0px",
7414
- "spread": "0px",
7523
+ "offsetX": {
7524
+ "value": 0,
7525
+ "unit": "px"
7526
+ },
7527
+ "offsetY": {
7528
+ "value": 0,
7529
+ "unit": "px"
7530
+ },
7531
+ "blur": {
7532
+ "value": 0,
7533
+ "unit": "px"
7534
+ },
7535
+ "spread": {
7536
+ "value": 0,
7537
+ "unit": "px"
7538
+ },
7415
7539
  "inset": false
7416
7540
  }
7417
7541
  ],
@@ -7428,10 +7552,22 @@
7428
7552
  {
7429
7553
  "color": "{base.color.neutral.13}",
7430
7554
  "alpha": 0.04,
7431
- "offsetX": "0px",
7432
- "offsetY": "1px",
7433
- "blur": "0px",
7434
- "spread": "0px",
7555
+ "offsetX": {
7556
+ "value": 0,
7557
+ "unit": "px"
7558
+ },
7559
+ "offsetY": {
7560
+ "value": 1,
7561
+ "unit": "px"
7562
+ },
7563
+ "blur": {
7564
+ "value": 0,
7565
+ "unit": "px"
7566
+ },
7567
+ "spread": {
7568
+ "value": 0,
7569
+ "unit": "px"
7570
+ },
7435
7571
  "inset": false
7436
7572
  }
7437
7573
  ],
@@ -7447,10 +7583,22 @@
7447
7583
  {
7448
7584
  "color": "{base.color.transparent}",
7449
7585
  "alpha": 0,
7450
- "offsetX": "0px",
7451
- "offsetY": "0px",
7452
- "blur": "0px",
7453
- "spread": "0px",
7586
+ "offsetX": {
7587
+ "value": 0,
7588
+ "unit": "px"
7589
+ },
7590
+ "offsetY": {
7591
+ "value": 0,
7592
+ "unit": "px"
7593
+ },
7594
+ "blur": {
7595
+ "value": 0,
7596
+ "unit": "px"
7597
+ },
7598
+ "spread": {
7599
+ "value": 0,
7600
+ "unit": "px"
7601
+ },
7454
7602
  "inset": false
7455
7603
  }
7456
7604
  ],
@@ -7465,7 +7613,7 @@
7465
7613
  "name": "button-default-shadow-resting",
7466
7614
  "attributes": {},
7467
7615
  "path": ["button", "default", "shadow", "resting"],
7468
- "value": "0px 1px 0px 0px #1f23280a",
7616
+ "value": "0 1px 0 0 #1f23280a",
7469
7617
  "type": "shadow"
7470
7618
  },
7471
7619
  "button-inactive-bgColor": {
@@ -9167,10 +9315,22 @@
9167
9315
  {
9168
9316
  "color": "#ffffff00",
9169
9317
  "alpha": 0,
9170
- "offsetX": "0px",
9171
- "offsetY": "0px",
9172
- "blur": "0px",
9173
- "spread": "0px",
9318
+ "offsetX": {
9319
+ "value": 0,
9320
+ "unit": "px"
9321
+ },
9322
+ "offsetY": {
9323
+ "value": 0,
9324
+ "unit": "px"
9325
+ },
9326
+ "blur": {
9327
+ "value": 0,
9328
+ "unit": "px"
9329
+ },
9330
+ "spread": {
9331
+ "value": 0,
9332
+ "unit": "px"
9333
+ },
9174
9334
  "inset": false
9175
9335
  }
9176
9336
  ],
@@ -9187,10 +9347,22 @@
9187
9347
  {
9188
9348
  "color": "{base.color.blue.9}",
9189
9349
  "alpha": 0.2,
9190
- "offsetX": "0px",
9191
- "offsetY": "1px",
9192
- "blur": "0px",
9193
- "spread": "0px",
9350
+ "offsetX": {
9351
+ "value": 0,
9352
+ "unit": "px"
9353
+ },
9354
+ "offsetY": {
9355
+ "value": 1,
9356
+ "unit": "px"
9357
+ },
9358
+ "blur": {
9359
+ "value": 0,
9360
+ "unit": "px"
9361
+ },
9362
+ "spread": {
9363
+ "value": 0,
9364
+ "unit": "px"
9365
+ },
9194
9366
  "inset": true
9195
9367
  }
9196
9368
  ],
@@ -9206,10 +9378,22 @@
9206
9378
  {
9207
9379
  "color": "{base.color.transparent}",
9208
9380
  "alpha": 0,
9209
- "offsetX": "0px",
9210
- "offsetY": "0px",
9211
- "blur": "0px",
9212
- "spread": "0px",
9381
+ "offsetX": {
9382
+ "value": 0,
9383
+ "unit": "px"
9384
+ },
9385
+ "offsetY": {
9386
+ "value": 0,
9387
+ "unit": "px"
9388
+ },
9389
+ "blur": {
9390
+ "value": 0,
9391
+ "unit": "px"
9392
+ },
9393
+ "spread": {
9394
+ "value": 0,
9395
+ "unit": "px"
9396
+ },
9213
9397
  "inset": false
9214
9398
  }
9215
9399
  ],
@@ -9224,7 +9408,7 @@
9224
9408
  "name": "button-outline-shadow-selected",
9225
9409
  "attributes": {},
9226
9410
  "path": ["button", "outline", "shadow", "selected"],
9227
- "value": "inset 0px 1px 0px 0px #00215533",
9411
+ "value": "inset 0 1px 0 0 #00215533",
9228
9412
  "type": "shadow"
9229
9413
  },
9230
9414
  "button-primary-bgColor-active": {
@@ -10375,10 +10559,22 @@
10375
10559
  {
10376
10560
  "color": "#002155",
10377
10561
  "alpha": 0.3,
10378
- "offsetX": "0px",
10379
- "offsetY": "1px",
10380
- "blur": "0px",
10381
- "spread": "0px",
10562
+ "offsetX": {
10563
+ "value": 0,
10564
+ "unit": "px"
10565
+ },
10566
+ "offsetY": {
10567
+ "value": 1,
10568
+ "unit": "px"
10569
+ },
10570
+ "blur": {
10571
+ "value": 0,
10572
+ "unit": "px"
10573
+ },
10574
+ "spread": {
10575
+ "value": 0,
10576
+ "unit": "px"
10577
+ },
10382
10578
  "inset": true
10383
10579
  }
10384
10580
  ],
@@ -10391,10 +10587,22 @@
10391
10587
  {
10392
10588
  "color": "#002155",
10393
10589
  "alpha": 0.3,
10394
- "offsetX": "0px",
10395
- "offsetY": "1px",
10396
- "blur": "0px",
10397
- "spread": "0px",
10590
+ "offsetX": {
10591
+ "value": 0,
10592
+ "unit": "px"
10593
+ },
10594
+ "offsetY": {
10595
+ "value": 1,
10596
+ "unit": "px"
10597
+ },
10598
+ "blur": {
10599
+ "value": 0,
10600
+ "unit": "px"
10601
+ },
10602
+ "spread": {
10603
+ "value": 0,
10604
+ "unit": "px"
10605
+ },
10398
10606
  "inset": true
10399
10607
  }
10400
10608
  ],
@@ -10407,10 +10615,22 @@
10407
10615
  {
10408
10616
  "color": "#ffffff00",
10409
10617
  "alpha": 0,
10410
- "offsetX": "0px",
10411
- "offsetY": "0px",
10412
- "blur": "0px",
10413
- "spread": "0px",
10618
+ "offsetX": {
10619
+ "value": 0,
10620
+ "unit": "px"
10621
+ },
10622
+ "offsetY": {
10623
+ "value": 0,
10624
+ "unit": "px"
10625
+ },
10626
+ "blur": {
10627
+ "value": 0,
10628
+ "unit": "px"
10629
+ },
10630
+ "spread": {
10631
+ "value": 0,
10632
+ "unit": "px"
10633
+ },
10414
10634
  "inset": false
10415
10635
  }
10416
10636
  ],
@@ -10427,10 +10647,22 @@
10427
10647
  {
10428
10648
  "color": "{base.color.blue.9}",
10429
10649
  "alpha": 0.3,
10430
- "offsetX": "0px",
10431
- "offsetY": "1px",
10432
- "blur": "0px",
10433
- "spread": "0px",
10650
+ "offsetX": {
10651
+ "value": 0,
10652
+ "unit": "px"
10653
+ },
10654
+ "offsetY": {
10655
+ "value": 1,
10656
+ "unit": "px"
10657
+ },
10658
+ "blur": {
10659
+ "value": 0,
10660
+ "unit": "px"
10661
+ },
10662
+ "spread": {
10663
+ "value": 0,
10664
+ "unit": "px"
10665
+ },
10434
10666
  "inset": true
10435
10667
  }
10436
10668
  ],
@@ -10446,10 +10678,22 @@
10446
10678
  {
10447
10679
  "color": "{base.color.blue.9}",
10448
10680
  "alpha": 0.3,
10449
- "offsetX": "0px",
10450
- "offsetY": "1px",
10451
- "blur": "0px",
10452
- "spread": "0px",
10681
+ "offsetX": {
10682
+ "value": 0,
10683
+ "unit": "px"
10684
+ },
10685
+ "offsetY": {
10686
+ "value": 1,
10687
+ "unit": "px"
10688
+ },
10689
+ "blur": {
10690
+ "value": 0,
10691
+ "unit": "px"
10692
+ },
10693
+ "spread": {
10694
+ "value": 0,
10695
+ "unit": "px"
10696
+ },
10453
10697
  "inset": true
10454
10698
  }
10455
10699
  ],
@@ -10462,10 +10706,22 @@
10462
10706
  {
10463
10707
  "color": "{base.color.blue.9}",
10464
10708
  "alpha": 0.3,
10465
- "offsetX": "0px",
10466
- "offsetY": "1px",
10467
- "blur": "0px",
10468
- "spread": "0px",
10709
+ "offsetX": {
10710
+ "value": 0,
10711
+ "unit": "px"
10712
+ },
10713
+ "offsetY": {
10714
+ "value": 1,
10715
+ "unit": "px"
10716
+ },
10717
+ "blur": {
10718
+ "value": 0,
10719
+ "unit": "px"
10720
+ },
10721
+ "spread": {
10722
+ "value": 0,
10723
+ "unit": "px"
10724
+ },
10469
10725
  "inset": true
10470
10726
  }
10471
10727
  ],
@@ -10478,10 +10734,22 @@
10478
10734
  {
10479
10735
  "color": "{base.color.transparent}",
10480
10736
  "alpha": 0,
10481
- "offsetX": "0px",
10482
- "offsetY": "0px",
10483
- "blur": "0px",
10484
- "spread": "0px",
10737
+ "offsetX": {
10738
+ "value": 0,
10739
+ "unit": "px"
10740
+ },
10741
+ "offsetY": {
10742
+ "value": 0,
10743
+ "unit": "px"
10744
+ },
10745
+ "blur": {
10746
+ "value": 0,
10747
+ "unit": "px"
10748
+ },
10749
+ "spread": {
10750
+ "value": 0,
10751
+ "unit": "px"
10752
+ },
10485
10753
  "inset": false
10486
10754
  }
10487
10755
  ],
@@ -10496,7 +10764,7 @@
10496
10764
  "name": "button-primary-shadow-selected",
10497
10765
  "attributes": {},
10498
10766
  "path": ["button", "primary", "shadow", "selected"],
10499
- "value": "inset 0px 1px 0px 0px #0021554d",
10767
+ "value": "inset 0 1px 0 0 #0021554d",
10500
10768
  "type": "shadow"
10501
10769
  },
10502
10770
  "button-star-iconColor": {
@@ -37217,6 +37485,10 @@
37217
37485
  },
37218
37486
  "org.primer.overrides": {
37219
37487
  "dark": "#ffffff"
37488
+ },
37489
+ "org.primer.llm": {
37490
+ "doNotUse": true,
37491
+ "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."
37220
37492
  }
37221
37493
  },
37222
37494
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37233,6 +37505,10 @@
37233
37505
  },
37234
37506
  "org.primer.overrides": {
37235
37507
  "dark": "{base.color.neutral.0}"
37508
+ },
37509
+ "org.primer.llm": {
37510
+ "doNotUse": true,
37511
+ "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."
37236
37512
  }
37237
37513
  },
37238
37514
  "key": "{fgColor.black}"
@@ -38206,6 +38482,10 @@
38206
38482
  },
38207
38483
  "org.primer.overrides": {
38208
38484
  "dark": "#1f2328"
38485
+ },
38486
+ "org.primer.llm": {
38487
+ "doNotUse": true,
38488
+ "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."
38209
38489
  }
38210
38490
  },
38211
38491
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38222,6 +38502,10 @@
38222
38502
  },
38223
38503
  "org.primer.overrides": {
38224
38504
  "dark": "{base.color.neutral.13}"
38505
+ },
38506
+ "org.primer.llm": {
38507
+ "doNotUse": true,
38508
+ "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."
38225
38509
  }
38226
38510
  },
38227
38511
  "key": "{fgColor.white}"
@@ -38247,7 +38531,10 @@
38247
38531
  "$value": {
38248
38532
  "color": "{focus.outlineColor}",
38249
38533
  "style": "solid",
38250
- "width": "2px"
38534
+ "width": {
38535
+ "value": 2,
38536
+ "unit": "px"
38537
+ }
38251
38538
  },
38252
38539
  "$type": "border",
38253
38540
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47412,18 +47699,183 @@
47412
47699
  {
47413
47700
  "color": "#d1d9e080",
47414
47701
  "alpha": 1,
47415
- "offsetX": "0px",
47416
- "offsetY": "0px",
47417
- "blur": "0px",
47418
- "spread": "1px"
47702
+ "offsetX": {
47703
+ "value": 0,
47704
+ "unit": "px"
47705
+ },
47706
+ "offsetY": {
47707
+ "value": 0,
47708
+ "unit": "px"
47709
+ },
47710
+ "blur": {
47711
+ "value": 0,
47712
+ "unit": "px"
47713
+ },
47714
+ "spread": {
47715
+ "value": 1,
47716
+ "unit": "px"
47717
+ }
47419
47718
  },
47420
47719
  {
47421
47720
  "color": "#ffffff",
47422
47721
  "alpha": 1,
47423
- "offsetX": "0px",
47424
- "offsetY": "24px",
47425
- "blur": "48px",
47426
- "spread": "0px"
47722
+ "offsetX": {
47723
+ "value": 0,
47724
+ "unit": "px"
47725
+ },
47726
+ "offsetY": {
47727
+ "value": 24,
47728
+ "unit": "px"
47729
+ },
47730
+ "blur": {
47731
+ "value": 48,
47732
+ "unit": "px"
47733
+ },
47734
+ "spread": {
47735
+ "value": 0,
47736
+ "unit": "px"
47737
+ }
47738
+ }
47739
+ ],
47740
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47741
+ "isSource": true,
47742
+ "$type": "shadow"
47743
+ },
47744
+ "light-high-contrast": {
47745
+ "$value": [
47746
+ {
47747
+ "color": "#d1d9e080",
47748
+ "alpha": 1,
47749
+ "offsetX": {
47750
+ "value": 0,
47751
+ "unit": "px"
47752
+ },
47753
+ "offsetY": {
47754
+ "value": 0,
47755
+ "unit": "px"
47756
+ },
47757
+ "blur": {
47758
+ "value": 0,
47759
+ "unit": "px"
47760
+ },
47761
+ "spread": {
47762
+ "value": 1,
47763
+ "unit": "px"
47764
+ }
47765
+ },
47766
+ {
47767
+ "color": "#25292e",
47768
+ "alpha": 0.24,
47769
+ "offsetX": {
47770
+ "value": 0,
47771
+ "unit": "px"
47772
+ },
47773
+ "offsetY": {
47774
+ "value": 40,
47775
+ "unit": "px"
47776
+ },
47777
+ "blur": {
47778
+ "value": 80,
47779
+ "unit": "px"
47780
+ },
47781
+ "spread": {
47782
+ "value": 0,
47783
+ "unit": "px"
47784
+ }
47785
+ }
47786
+ ],
47787
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47788
+ "isSource": true,
47789
+ "$type": "shadow"
47790
+ },
47791
+ "light-protanopia-deuteranopia-high-contrast": {
47792
+ "$value": [
47793
+ {
47794
+ "color": "#d1d9e080",
47795
+ "alpha": 1,
47796
+ "offsetX": {
47797
+ "value": 0,
47798
+ "unit": "px"
47799
+ },
47800
+ "offsetY": {
47801
+ "value": 0,
47802
+ "unit": "px"
47803
+ },
47804
+ "blur": {
47805
+ "value": 0,
47806
+ "unit": "px"
47807
+ },
47808
+ "spread": {
47809
+ "value": 1,
47810
+ "unit": "px"
47811
+ }
47812
+ },
47813
+ {
47814
+ "color": "#25292e",
47815
+ "alpha": 0.24,
47816
+ "offsetX": {
47817
+ "value": 0,
47818
+ "unit": "px"
47819
+ },
47820
+ "offsetY": {
47821
+ "value": 40,
47822
+ "unit": "px"
47823
+ },
47824
+ "blur": {
47825
+ "value": 80,
47826
+ "unit": "px"
47827
+ },
47828
+ "spread": {
47829
+ "value": 0,
47830
+ "unit": "px"
47831
+ }
47832
+ }
47833
+ ],
47834
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47835
+ "isSource": true,
47836
+ "$type": "shadow"
47837
+ },
47838
+ "light-tritanopia-high-contrast": {
47839
+ "$value": [
47840
+ {
47841
+ "color": "#d1d9e080",
47842
+ "alpha": 1,
47843
+ "offsetX": {
47844
+ "value": 0,
47845
+ "unit": "px"
47846
+ },
47847
+ "offsetY": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ },
47851
+ "blur": {
47852
+ "value": 0,
47853
+ "unit": "px"
47854
+ },
47855
+ "spread": {
47856
+ "value": 1,
47857
+ "unit": "px"
47858
+ }
47859
+ },
47860
+ {
47861
+ "color": "#25292e",
47862
+ "alpha": 0.24,
47863
+ "offsetX": {
47864
+ "value": 0,
47865
+ "unit": "px"
47866
+ },
47867
+ "offsetY": {
47868
+ "value": 40,
47869
+ "unit": "px"
47870
+ },
47871
+ "blur": {
47872
+ "value": 80,
47873
+ "unit": "px"
47874
+ },
47875
+ "spread": {
47876
+ "value": 0,
47877
+ "unit": "px"
47878
+ }
47427
47879
  }
47428
47880
  ],
47429
47881
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47443,18 +47895,42 @@
47443
47895
  {
47444
47896
  "color": "{overlay.borderColor}",
47445
47897
  "alpha": 0,
47446
- "offsetX": "0px",
47447
- "offsetY": "0px",
47448
- "blur": "0px",
47449
- "spread": "1px"
47898
+ "offsetX": {
47899
+ "value": 0,
47900
+ "unit": "px"
47901
+ },
47902
+ "offsetY": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ },
47906
+ "blur": {
47907
+ "value": 0,
47908
+ "unit": "px"
47909
+ },
47910
+ "spread": {
47911
+ "value": 1,
47912
+ "unit": "px"
47913
+ }
47450
47914
  },
47451
47915
  {
47452
47916
  "color": "{base.color.neutral.12}",
47453
47917
  "alpha": 0.24,
47454
- "offsetX": "0px",
47455
- "offsetY": "40px",
47456
- "blur": "80px",
47457
- "spread": "0px"
47918
+ "offsetX": {
47919
+ "value": 0,
47920
+ "unit": "px"
47921
+ },
47922
+ "offsetY": {
47923
+ "value": 40,
47924
+ "unit": "px"
47925
+ },
47926
+ "blur": {
47927
+ "value": 80,
47928
+ "unit": "px"
47929
+ },
47930
+ "spread": {
47931
+ "value": 0,
47932
+ "unit": "px"
47933
+ }
47458
47934
  }
47459
47935
  ],
47460
47936
  "$type": "shadow",
@@ -47470,18 +47946,183 @@
47470
47946
  {
47471
47947
  "color": "{overlay.borderColor}",
47472
47948
  "alpha": 1,
47473
- "offsetX": "0px",
47474
- "offsetY": "0px",
47475
- "blur": "0px",
47476
- "spread": "1px"
47949
+ "offsetX": {
47950
+ "value": 0,
47951
+ "unit": "px"
47952
+ },
47953
+ "offsetY": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ },
47957
+ "blur": {
47958
+ "value": 0,
47959
+ "unit": "px"
47960
+ },
47961
+ "spread": {
47962
+ "value": 1,
47963
+ "unit": "px"
47964
+ }
47477
47965
  },
47478
47966
  {
47479
47967
  "color": "{base.color.neutral.0}",
47480
47968
  "alpha": 1,
47481
- "offsetX": "0px",
47482
- "offsetY": "24px",
47483
- "blur": "48px",
47484
- "spread": "0px"
47969
+ "offsetX": {
47970
+ "value": 0,
47971
+ "unit": "px"
47972
+ },
47973
+ "offsetY": {
47974
+ "value": 24,
47975
+ "unit": "px"
47976
+ },
47977
+ "blur": {
47978
+ "value": 48,
47979
+ "unit": "px"
47980
+ },
47981
+ "spread": {
47982
+ "value": 0,
47983
+ "unit": "px"
47984
+ }
47985
+ }
47986
+ ],
47987
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47988
+ "isSource": true,
47989
+ "$type": "shadow"
47990
+ },
47991
+ "light-high-contrast": {
47992
+ "$value": [
47993
+ {
47994
+ "color": "{overlay.borderColor}",
47995
+ "alpha": 1,
47996
+ "offsetX": {
47997
+ "value": 0,
47998
+ "unit": "px"
47999
+ },
48000
+ "offsetY": {
48001
+ "value": 0,
48002
+ "unit": "px"
48003
+ },
48004
+ "blur": {
48005
+ "value": 0,
48006
+ "unit": "px"
48007
+ },
48008
+ "spread": {
48009
+ "value": 1,
48010
+ "unit": "px"
48011
+ }
48012
+ },
48013
+ {
48014
+ "color": "{base.color.neutral.12}",
48015
+ "alpha": 0.24,
48016
+ "offsetX": {
48017
+ "value": 0,
48018
+ "unit": "px"
48019
+ },
48020
+ "offsetY": {
48021
+ "value": 40,
48022
+ "unit": "px"
48023
+ },
48024
+ "blur": {
48025
+ "value": 80,
48026
+ "unit": "px"
48027
+ },
48028
+ "spread": {
48029
+ "value": 0,
48030
+ "unit": "px"
48031
+ }
48032
+ }
48033
+ ],
48034
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48035
+ "isSource": true,
48036
+ "$type": "shadow"
48037
+ },
48038
+ "light-protanopia-deuteranopia-high-contrast": {
48039
+ "$value": [
48040
+ {
48041
+ "color": "{overlay.borderColor}",
48042
+ "alpha": 1,
48043
+ "offsetX": {
48044
+ "value": 0,
48045
+ "unit": "px"
48046
+ },
48047
+ "offsetY": {
48048
+ "value": 0,
48049
+ "unit": "px"
48050
+ },
48051
+ "blur": {
48052
+ "value": 0,
48053
+ "unit": "px"
48054
+ },
48055
+ "spread": {
48056
+ "value": 1,
48057
+ "unit": "px"
48058
+ }
48059
+ },
48060
+ {
48061
+ "color": "{base.color.neutral.12}",
48062
+ "alpha": 0.24,
48063
+ "offsetX": {
48064
+ "value": 0,
48065
+ "unit": "px"
48066
+ },
48067
+ "offsetY": {
48068
+ "value": 40,
48069
+ "unit": "px"
48070
+ },
48071
+ "blur": {
48072
+ "value": 80,
48073
+ "unit": "px"
48074
+ },
48075
+ "spread": {
48076
+ "value": 0,
48077
+ "unit": "px"
48078
+ }
48079
+ }
48080
+ ],
48081
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48082
+ "isSource": true,
48083
+ "$type": "shadow"
48084
+ },
48085
+ "light-tritanopia-high-contrast": {
48086
+ "$value": [
48087
+ {
48088
+ "color": "{overlay.borderColor}",
48089
+ "alpha": 1,
48090
+ "offsetX": {
48091
+ "value": 0,
48092
+ "unit": "px"
48093
+ },
48094
+ "offsetY": {
48095
+ "value": 0,
48096
+ "unit": "px"
48097
+ },
48098
+ "blur": {
48099
+ "value": 0,
48100
+ "unit": "px"
48101
+ },
48102
+ "spread": {
48103
+ "value": 1,
48104
+ "unit": "px"
48105
+ }
48106
+ },
48107
+ {
48108
+ "color": "{base.color.neutral.12}",
48109
+ "alpha": 0.24,
48110
+ "offsetX": {
48111
+ "value": 0,
48112
+ "unit": "px"
48113
+ },
48114
+ "offsetY": {
48115
+ "value": 40,
48116
+ "unit": "px"
48117
+ },
48118
+ "blur": {
48119
+ "value": 80,
48120
+ "unit": "px"
48121
+ },
48122
+ "spread": {
48123
+ "value": 0,
48124
+ "unit": "px"
48125
+ }
47485
48126
  }
47486
48127
  ],
47487
48128
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47499,7 +48140,7 @@
47499
48140
  "name": "shadow-floating-large",
47500
48141
  "attributes": {},
47501
48142
  "path": ["shadow", "floating", "large"],
47502
- "value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
48143
+ "value": "0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d",
47503
48144
  "type": "shadow",
47504
48145
  "description": "Large floating shadow for modals and dialogs"
47505
48146
  },
@@ -47513,24 +48154,52 @@
47513
48154
  {
47514
48155
  "color": "#ffffff",
47515
48156
  "alpha": 0.4,
47516
- "offsetX": "0px",
47517
- "offsetY": "6px",
47518
- "blur": "12px",
47519
- "spread": "-3px"
48157
+ "offsetX": {
48158
+ "value": 0,
48159
+ "unit": "px"
48160
+ },
48161
+ "offsetY": {
48162
+ "value": 6,
48163
+ "unit": "px"
48164
+ },
48165
+ "blur": {
48166
+ "value": 12,
48167
+ "unit": "px"
48168
+ },
48169
+ "spread": {
48170
+ "value": -3,
48171
+ "unit": "px"
48172
+ }
47520
48173
  },
47521
48174
  {
47522
48175
  "color": "#ffffff",
47523
48176
  "alpha": 0.4,
47524
- "offsetX": "0px",
47525
- "offsetY": "6px",
47526
- "blur": "18px",
47527
- "spread": "0px"
48177
+ "offsetX": {
48178
+ "value": 0,
48179
+ "unit": "px"
48180
+ },
48181
+ "offsetY": {
48182
+ "value": 6,
48183
+ "unit": "px"
48184
+ },
48185
+ "blur": {
48186
+ "value": 18,
48187
+ "unit": "px"
48188
+ },
48189
+ "spread": {
48190
+ "value": 0,
48191
+ "unit": "px"
48192
+ }
47528
48193
  }
47529
48194
  ],
47530
48195
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47531
48196
  "isSource": true,
47532
48197
  "$type": "shadow"
47533
48198
  }
48199
+ },
48200
+ "org.primer.llm": {
48201
+ "usage": ["legacy-component", "backward-compatibility"],
48202
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47534
48203
  }
47535
48204
  },
47536
48205
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47540,21 +48209,46 @@
47540
48209
  {
47541
48210
  "color": "{base.color.neutral.12}",
47542
48211
  "alpha": 0.04,
47543
- "offsetX": "0px",
47544
- "offsetY": "6px",
47545
- "blur": "12px",
47546
- "spread": "-3px"
48212
+ "offsetX": {
48213
+ "value": 0,
48214
+ "unit": "px"
48215
+ },
48216
+ "offsetY": {
48217
+ "value": 6,
48218
+ "unit": "px"
48219
+ },
48220
+ "blur": {
48221
+ "value": 12,
48222
+ "unit": "px"
48223
+ },
48224
+ "spread": {
48225
+ "value": -3,
48226
+ "unit": "px"
48227
+ }
47547
48228
  },
47548
48229
  {
47549
48230
  "color": "{base.color.neutral.12}",
47550
48231
  "alpha": 0.12,
47551
- "offsetX": "0px",
47552
- "offsetY": "6px",
47553
- "blur": "18px",
47554
- "spread": "0px"
48232
+ "offsetX": {
48233
+ "value": 0,
48234
+ "unit": "px"
48235
+ },
48236
+ "offsetY": {
48237
+ "value": 6,
48238
+ "unit": "px"
48239
+ },
48240
+ "blur": {
48241
+ "value": 18,
48242
+ "unit": "px"
48243
+ },
48244
+ "spread": {
48245
+ "value": 0,
48246
+ "unit": "px"
48247
+ }
47555
48248
  }
47556
48249
  ],
47557
48250
  "$type": "shadow",
48251
+ "$description": "Legacy floating shadow for backward compatibility",
47558
48252
  "$extensions": {
47559
48253
  "org.primer.figma": {},
47560
48254
  "org.primer.overrides": {
@@ -47563,24 +48257,52 @@
47563
48257
  {
47564
48258
  "color": "{base.color.neutral.0}",
47565
48259
  "alpha": 0.4,
47566
- "offsetX": "0px",
47567
- "offsetY": "6px",
47568
- "blur": "12px",
47569
- "spread": "-3px"
48260
+ "offsetX": {
48261
+ "value": 0,
48262
+ "unit": "px"
48263
+ },
48264
+ "offsetY": {
48265
+ "value": 6,
48266
+ "unit": "px"
48267
+ },
48268
+ "blur": {
48269
+ "value": 12,
48270
+ "unit": "px"
48271
+ },
48272
+ "spread": {
48273
+ "value": -3,
48274
+ "unit": "px"
48275
+ }
47570
48276
  },
47571
48277
  {
47572
48278
  "color": "{base.color.neutral.0}",
47573
48279
  "alpha": 0.4,
47574
- "offsetX": "0px",
47575
- "offsetY": "6px",
47576
- "blur": "18px",
47577
- "spread": "0px"
48280
+ "offsetX": {
48281
+ "value": 0,
48282
+ "unit": "px"
48283
+ },
48284
+ "offsetY": {
48285
+ "value": 6,
48286
+ "unit": "px"
48287
+ },
48288
+ "blur": {
48289
+ "value": 18,
48290
+ "unit": "px"
48291
+ },
48292
+ "spread": {
48293
+ "value": 0,
48294
+ "unit": "px"
48295
+ }
47578
48296
  }
47579
48297
  ],
47580
48298
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47581
48299
  "isSource": true,
47582
48300
  "$type": "shadow"
47583
48301
  }
48302
+ },
48303
+ "org.primer.llm": {
48304
+ "usage": ["legacy-component", "backward-compatibility"],
48305
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47584
48306
  }
47585
48307
  },
47586
48308
  "key": "{shadow.floating.legacy}"
@@ -47588,8 +48310,9 @@
47588
48310
  "name": "shadow-floating-legacy",
47589
48311
  "attributes": {},
47590
48312
  "path": ["shadow", "floating", "legacy"],
47591
- "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47592
- "type": "shadow"
48313
+ "value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
48314
+ "type": "shadow",
48315
+ "description": "Legacy floating shadow for backward compatibility"
47593
48316
  },
47594
48317
  "shadow-floating-medium": {
47595
48318
  "key": "{shadow.floating.medium}",
@@ -47604,48 +48327,433 @@
47604
48327
  {
47605
48328
  "color": "#d1d9e080",
47606
48329
  "alpha": 1,
47607
- "offsetX": "0px",
47608
- "offsetY": "0px",
47609
- "blur": "0px",
47610
- "spread": "1px"
48330
+ "offsetX": {
48331
+ "value": 0,
48332
+ "unit": "px"
48333
+ },
48334
+ "offsetY": {
48335
+ "value": 0,
48336
+ "unit": "px"
48337
+ },
48338
+ "blur": {
48339
+ "value": 0,
48340
+ "unit": "px"
48341
+ },
48342
+ "spread": {
48343
+ "value": 1,
48344
+ "unit": "px"
48345
+ }
47611
48346
  },
47612
48347
  {
47613
48348
  "color": "#ffffff",
47614
48349
  "alpha": 0.4,
47615
- "offsetX": "0px",
47616
- "offsetY": "8px",
47617
- "blur": "16px",
47618
- "spread": "-4px"
48350
+ "offsetX": {
48351
+ "value": 0,
48352
+ "unit": "px"
48353
+ },
48354
+ "offsetY": {
48355
+ "value": 8,
48356
+ "unit": "px"
48357
+ },
48358
+ "blur": {
48359
+ "value": 16,
48360
+ "unit": "px"
48361
+ },
48362
+ "spread": {
48363
+ "value": -4,
48364
+ "unit": "px"
48365
+ }
47619
48366
  },
47620
48367
  {
47621
48368
  "color": "#ffffff",
47622
48369
  "alpha": 0.4,
47623
- "offsetX": "0px",
47624
- "offsetY": "4px",
47625
- "blur": "32px",
47626
- "spread": "-4px"
48370
+ "offsetX": {
48371
+ "value": 0,
48372
+ "unit": "px"
48373
+ },
48374
+ "offsetY": {
48375
+ "value": 4,
48376
+ "unit": "px"
48377
+ },
48378
+ "blur": {
48379
+ "value": 32,
48380
+ "unit": "px"
48381
+ },
48382
+ "spread": {
48383
+ "value": -4,
48384
+ "unit": "px"
48385
+ }
47627
48386
  },
47628
48387
  {
47629
48388
  "color": "#ffffff",
47630
48389
  "alpha": 0.4,
47631
- "offsetX": "0px",
47632
- "offsetY": "24px",
47633
- "blur": "48px",
47634
- "spread": "-12px"
48390
+ "offsetX": {
48391
+ "value": 0,
48392
+ "unit": "px"
48393
+ },
48394
+ "offsetY": {
48395
+ "value": 24,
48396
+ "unit": "px"
48397
+ },
48398
+ "blur": {
48399
+ "value": 48,
48400
+ "unit": "px"
48401
+ },
48402
+ "spread": {
48403
+ "value": -12,
48404
+ "unit": "px"
48405
+ }
47635
48406
  },
47636
48407
  {
47637
48408
  "color": "#ffffff",
47638
48409
  "alpha": 0.4,
47639
- "offsetX": "0px",
47640
- "offsetY": "48px",
47641
- "blur": "96px",
47642
- "spread": "-24px"
48410
+ "offsetX": {
48411
+ "value": 0,
48412
+ "unit": "px"
48413
+ },
48414
+ "offsetY": {
48415
+ "value": 48,
48416
+ "unit": "px"
48417
+ },
48418
+ "blur": {
48419
+ "value": 96,
48420
+ "unit": "px"
48421
+ },
48422
+ "spread": {
48423
+ "value": -24,
48424
+ "unit": "px"
48425
+ }
48426
+ }
48427
+ ],
48428
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48429
+ "isSource": true,
48430
+ "$type": "shadow"
48431
+ },
48432
+ "light-high-contrast": {
48433
+ "$value": [
48434
+ {
48435
+ "color": "#d1d9e080",
48436
+ "alpha": 1,
48437
+ "offsetX": {
48438
+ "value": 0,
48439
+ "unit": "px"
48440
+ },
48441
+ "offsetY": {
48442
+ "value": 0,
48443
+ "unit": "px"
48444
+ },
48445
+ "blur": {
48446
+ "value": 0,
48447
+ "unit": "px"
48448
+ },
48449
+ "spread": {
48450
+ "value": 1,
48451
+ "unit": "px"
48452
+ }
48453
+ },
48454
+ {
48455
+ "color": "#25292e",
48456
+ "alpha": 0.08,
48457
+ "offsetX": {
48458
+ "value": 0,
48459
+ "unit": "px"
48460
+ },
48461
+ "offsetY": {
48462
+ "value": 8,
48463
+ "unit": "px"
48464
+ },
48465
+ "blur": {
48466
+ "value": 16,
48467
+ "unit": "px"
48468
+ },
48469
+ "spread": {
48470
+ "value": -4,
48471
+ "unit": "px"
48472
+ }
48473
+ },
48474
+ {
48475
+ "color": "#25292e",
48476
+ "alpha": 0.08,
48477
+ "offsetX": {
48478
+ "value": 0,
48479
+ "unit": "px"
48480
+ },
48481
+ "offsetY": {
48482
+ "value": 4,
48483
+ "unit": "px"
48484
+ },
48485
+ "blur": {
48486
+ "value": 32,
48487
+ "unit": "px"
48488
+ },
48489
+ "spread": {
48490
+ "value": -4,
48491
+ "unit": "px"
48492
+ }
48493
+ },
48494
+ {
48495
+ "color": "#25292e",
48496
+ "alpha": 0.08,
48497
+ "offsetX": {
48498
+ "value": 0,
48499
+ "unit": "px"
48500
+ },
48501
+ "offsetY": {
48502
+ "value": 24,
48503
+ "unit": "px"
48504
+ },
48505
+ "blur": {
48506
+ "value": 48,
48507
+ "unit": "px"
48508
+ },
48509
+ "spread": {
48510
+ "value": -12,
48511
+ "unit": "px"
48512
+ }
48513
+ },
48514
+ {
48515
+ "color": "#25292e",
48516
+ "alpha": 0.08,
48517
+ "offsetX": {
48518
+ "value": 0,
48519
+ "unit": "px"
48520
+ },
48521
+ "offsetY": {
48522
+ "value": 48,
48523
+ "unit": "px"
48524
+ },
48525
+ "blur": {
48526
+ "value": 96,
48527
+ "unit": "px"
48528
+ },
48529
+ "spread": {
48530
+ "value": -24,
48531
+ "unit": "px"
48532
+ }
48533
+ }
48534
+ ],
48535
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48536
+ "isSource": true,
48537
+ "$type": "shadow"
48538
+ },
48539
+ "light-protanopia-deuteranopia-high-contrast": {
48540
+ "$value": [
48541
+ {
48542
+ "color": "#d1d9e080",
48543
+ "alpha": 1,
48544
+ "offsetX": {
48545
+ "value": 0,
48546
+ "unit": "px"
48547
+ },
48548
+ "offsetY": {
48549
+ "value": 0,
48550
+ "unit": "px"
48551
+ },
48552
+ "blur": {
48553
+ "value": 0,
48554
+ "unit": "px"
48555
+ },
48556
+ "spread": {
48557
+ "value": 1,
48558
+ "unit": "px"
48559
+ }
48560
+ },
48561
+ {
48562
+ "color": "#25292e",
48563
+ "alpha": 0.08,
48564
+ "offsetX": {
48565
+ "value": 0,
48566
+ "unit": "px"
48567
+ },
48568
+ "offsetY": {
48569
+ "value": 8,
48570
+ "unit": "px"
48571
+ },
48572
+ "blur": {
48573
+ "value": 16,
48574
+ "unit": "px"
48575
+ },
48576
+ "spread": {
48577
+ "value": -4,
48578
+ "unit": "px"
48579
+ }
48580
+ },
48581
+ {
48582
+ "color": "#25292e",
48583
+ "alpha": 0.08,
48584
+ "offsetX": {
48585
+ "value": 0,
48586
+ "unit": "px"
48587
+ },
48588
+ "offsetY": {
48589
+ "value": 4,
48590
+ "unit": "px"
48591
+ },
48592
+ "blur": {
48593
+ "value": 32,
48594
+ "unit": "px"
48595
+ },
48596
+ "spread": {
48597
+ "value": -4,
48598
+ "unit": "px"
48599
+ }
48600
+ },
48601
+ {
48602
+ "color": "#25292e",
48603
+ "alpha": 0.08,
48604
+ "offsetX": {
48605
+ "value": 0,
48606
+ "unit": "px"
48607
+ },
48608
+ "offsetY": {
48609
+ "value": 24,
48610
+ "unit": "px"
48611
+ },
48612
+ "blur": {
48613
+ "value": 48,
48614
+ "unit": "px"
48615
+ },
48616
+ "spread": {
48617
+ "value": -12,
48618
+ "unit": "px"
48619
+ }
48620
+ },
48621
+ {
48622
+ "color": "#25292e",
48623
+ "alpha": 0.08,
48624
+ "offsetX": {
48625
+ "value": 0,
48626
+ "unit": "px"
48627
+ },
48628
+ "offsetY": {
48629
+ "value": 48,
48630
+ "unit": "px"
48631
+ },
48632
+ "blur": {
48633
+ "value": 96,
48634
+ "unit": "px"
48635
+ },
48636
+ "spread": {
48637
+ "value": -24,
48638
+ "unit": "px"
48639
+ }
48640
+ }
48641
+ ],
48642
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48643
+ "isSource": true,
48644
+ "$type": "shadow"
48645
+ },
48646
+ "light-tritanopia-high-contrast": {
48647
+ "$value": [
48648
+ {
48649
+ "color": "#d1d9e080",
48650
+ "alpha": 1,
48651
+ "offsetX": {
48652
+ "value": 0,
48653
+ "unit": "px"
48654
+ },
48655
+ "offsetY": {
48656
+ "value": 0,
48657
+ "unit": "px"
48658
+ },
48659
+ "blur": {
48660
+ "value": 0,
48661
+ "unit": "px"
48662
+ },
48663
+ "spread": {
48664
+ "value": 1,
48665
+ "unit": "px"
48666
+ }
48667
+ },
48668
+ {
48669
+ "color": "#25292e",
48670
+ "alpha": 0.08,
48671
+ "offsetX": {
48672
+ "value": 0,
48673
+ "unit": "px"
48674
+ },
48675
+ "offsetY": {
48676
+ "value": 8,
48677
+ "unit": "px"
48678
+ },
48679
+ "blur": {
48680
+ "value": 16,
48681
+ "unit": "px"
48682
+ },
48683
+ "spread": {
48684
+ "value": -4,
48685
+ "unit": "px"
48686
+ }
48687
+ },
48688
+ {
48689
+ "color": "#25292e",
48690
+ "alpha": 0.08,
48691
+ "offsetX": {
48692
+ "value": 0,
48693
+ "unit": "px"
48694
+ },
48695
+ "offsetY": {
48696
+ "value": 4,
48697
+ "unit": "px"
48698
+ },
48699
+ "blur": {
48700
+ "value": 32,
48701
+ "unit": "px"
48702
+ },
48703
+ "spread": {
48704
+ "value": -4,
48705
+ "unit": "px"
48706
+ }
48707
+ },
48708
+ {
48709
+ "color": "#25292e",
48710
+ "alpha": 0.08,
48711
+ "offsetX": {
48712
+ "value": 0,
48713
+ "unit": "px"
48714
+ },
48715
+ "offsetY": {
48716
+ "value": 24,
48717
+ "unit": "px"
48718
+ },
48719
+ "blur": {
48720
+ "value": 48,
48721
+ "unit": "px"
48722
+ },
48723
+ "spread": {
48724
+ "value": -12,
48725
+ "unit": "px"
48726
+ }
48727
+ },
48728
+ {
48729
+ "color": "#25292e",
48730
+ "alpha": 0.08,
48731
+ "offsetX": {
48732
+ "value": 0,
48733
+ "unit": "px"
48734
+ },
48735
+ "offsetY": {
48736
+ "value": 48,
48737
+ "unit": "px"
48738
+ },
48739
+ "blur": {
48740
+ "value": 96,
48741
+ "unit": "px"
48742
+ },
48743
+ "spread": {
48744
+ "value": -24,
48745
+ "unit": "px"
48746
+ }
47643
48747
  }
47644
48748
  ],
47645
48749
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47646
48750
  "isSource": true,
47647
48751
  "$type": "shadow"
47648
48752
  }
48753
+ },
48754
+ "org.primer.llm": {
48755
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48756
+ "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."
47649
48757
  }
47650
48758
  },
47651
48759
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47655,45 +48763,106 @@
47655
48763
  {
47656
48764
  "color": "{overlay.borderColor}",
47657
48765
  "alpha": 0,
47658
- "offsetX": "0px",
47659
- "offsetY": "0px",
47660
- "blur": "0px",
47661
- "spread": "1px"
48766
+ "offsetX": {
48767
+ "value": 0,
48768
+ "unit": "px"
48769
+ },
48770
+ "offsetY": {
48771
+ "value": 0,
48772
+ "unit": "px"
48773
+ },
48774
+ "blur": {
48775
+ "value": 0,
48776
+ "unit": "px"
48777
+ },
48778
+ "spread": {
48779
+ "value": 1,
48780
+ "unit": "px"
48781
+ }
47662
48782
  },
47663
48783
  {
47664
48784
  "color": "{base.color.neutral.12}",
47665
48785
  "alpha": 0.08,
47666
- "offsetX": "0px",
47667
- "offsetY": "8px",
47668
- "blur": "16px",
47669
- "spread": "-4px"
48786
+ "offsetX": {
48787
+ "value": 0,
48788
+ "unit": "px"
48789
+ },
48790
+ "offsetY": {
48791
+ "value": 8,
48792
+ "unit": "px"
48793
+ },
48794
+ "blur": {
48795
+ "value": 16,
48796
+ "unit": "px"
48797
+ },
48798
+ "spread": {
48799
+ "value": -4,
48800
+ "unit": "px"
48801
+ }
47670
48802
  },
47671
48803
  {
47672
48804
  "color": "{base.color.neutral.12}",
47673
48805
  "alpha": 0.08,
47674
- "offsetX": "0px",
47675
- "offsetY": "4px",
47676
- "blur": "32px",
47677
- "spread": "-4px"
48806
+ "offsetX": {
48807
+ "value": 0,
48808
+ "unit": "px"
48809
+ },
48810
+ "offsetY": {
48811
+ "value": 4,
48812
+ "unit": "px"
48813
+ },
48814
+ "blur": {
48815
+ "value": 32,
48816
+ "unit": "px"
48817
+ },
48818
+ "spread": {
48819
+ "value": -4,
48820
+ "unit": "px"
48821
+ }
47678
48822
  },
47679
48823
  {
47680
48824
  "color": "{base.color.neutral.12}",
47681
48825
  "alpha": 0.08,
47682
- "offsetX": "0px",
47683
- "offsetY": "24px",
47684
- "blur": "48px",
47685
- "spread": "-12px"
48826
+ "offsetX": {
48827
+ "value": 0,
48828
+ "unit": "px"
48829
+ },
48830
+ "offsetY": {
48831
+ "value": 24,
48832
+ "unit": "px"
48833
+ },
48834
+ "blur": {
48835
+ "value": 48,
48836
+ "unit": "px"
48837
+ },
48838
+ "spread": {
48839
+ "value": -12,
48840
+ "unit": "px"
48841
+ }
47686
48842
  },
47687
48843
  {
47688
48844
  "color": "{base.color.neutral.12}",
47689
48845
  "alpha": 0.08,
47690
- "offsetX": "0px",
47691
- "offsetY": "48px",
47692
- "blur": "96px",
47693
- "spread": "-24px"
48846
+ "offsetX": {
48847
+ "value": 0,
48848
+ "unit": "px"
48849
+ },
48850
+ "offsetY": {
48851
+ "value": 48,
48852
+ "unit": "px"
48853
+ },
48854
+ "blur": {
48855
+ "value": 96,
48856
+ "unit": "px"
48857
+ },
48858
+ "spread": {
48859
+ "value": -24,
48860
+ "unit": "px"
48861
+ }
47694
48862
  }
47695
48863
  ],
47696
48864
  "$type": "shadow",
48865
+ "$description": "Medium floating shadow for popovers and action menus",
47697
48866
  "$extensions": {
47698
48867
  "org.primer.figma": {
47699
48868
  "collection": "mode",
@@ -47705,48 +48874,433 @@
47705
48874
  {
47706
48875
  "color": "{overlay.borderColor}",
47707
48876
  "alpha": 1,
47708
- "offsetX": "0px",
47709
- "offsetY": "0px",
47710
- "blur": "0px",
47711
- "spread": "1px"
48877
+ "offsetX": {
48878
+ "value": 0,
48879
+ "unit": "px"
48880
+ },
48881
+ "offsetY": {
48882
+ "value": 0,
48883
+ "unit": "px"
48884
+ },
48885
+ "blur": {
48886
+ "value": 0,
48887
+ "unit": "px"
48888
+ },
48889
+ "spread": {
48890
+ "value": 1,
48891
+ "unit": "px"
48892
+ }
47712
48893
  },
47713
48894
  {
47714
48895
  "color": "{base.color.neutral.0}",
47715
48896
  "alpha": 0.4,
47716
- "offsetX": "0px",
47717
- "offsetY": "8px",
47718
- "blur": "16px",
47719
- "spread": "-4px"
48897
+ "offsetX": {
48898
+ "value": 0,
48899
+ "unit": "px"
48900
+ },
48901
+ "offsetY": {
48902
+ "value": 8,
48903
+ "unit": "px"
48904
+ },
48905
+ "blur": {
48906
+ "value": 16,
48907
+ "unit": "px"
48908
+ },
48909
+ "spread": {
48910
+ "value": -4,
48911
+ "unit": "px"
48912
+ }
47720
48913
  },
47721
48914
  {
47722
48915
  "color": "{base.color.neutral.0}",
47723
48916
  "alpha": 0.4,
47724
- "offsetX": "0px",
47725
- "offsetY": "4px",
47726
- "blur": "32px",
47727
- "spread": "-4px"
48917
+ "offsetX": {
48918
+ "value": 0,
48919
+ "unit": "px"
48920
+ },
48921
+ "offsetY": {
48922
+ "value": 4,
48923
+ "unit": "px"
48924
+ },
48925
+ "blur": {
48926
+ "value": 32,
48927
+ "unit": "px"
48928
+ },
48929
+ "spread": {
48930
+ "value": -4,
48931
+ "unit": "px"
48932
+ }
47728
48933
  },
47729
48934
  {
47730
48935
  "color": "{base.color.neutral.0}",
47731
48936
  "alpha": 0.4,
47732
- "offsetX": "0px",
47733
- "offsetY": "24px",
47734
- "blur": "48px",
47735
- "spread": "-12px"
48937
+ "offsetX": {
48938
+ "value": 0,
48939
+ "unit": "px"
48940
+ },
48941
+ "offsetY": {
48942
+ "value": 24,
48943
+ "unit": "px"
48944
+ },
48945
+ "blur": {
48946
+ "value": 48,
48947
+ "unit": "px"
48948
+ },
48949
+ "spread": {
48950
+ "value": -12,
48951
+ "unit": "px"
48952
+ }
47736
48953
  },
47737
48954
  {
47738
48955
  "color": "{base.color.neutral.0}",
47739
48956
  "alpha": 0.4,
47740
- "offsetX": "0px",
47741
- "offsetY": "48px",
47742
- "blur": "96px",
47743
- "spread": "-24px"
48957
+ "offsetX": {
48958
+ "value": 0,
48959
+ "unit": "px"
48960
+ },
48961
+ "offsetY": {
48962
+ "value": 48,
48963
+ "unit": "px"
48964
+ },
48965
+ "blur": {
48966
+ "value": 96,
48967
+ "unit": "px"
48968
+ },
48969
+ "spread": {
48970
+ "value": -24,
48971
+ "unit": "px"
48972
+ }
48973
+ }
48974
+ ],
48975
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48976
+ "isSource": true,
48977
+ "$type": "shadow"
48978
+ },
48979
+ "light-high-contrast": {
48980
+ "$value": [
48981
+ {
48982
+ "color": "{overlay.borderColor}",
48983
+ "alpha": 1,
48984
+ "offsetX": {
48985
+ "value": 0,
48986
+ "unit": "px"
48987
+ },
48988
+ "offsetY": {
48989
+ "value": 0,
48990
+ "unit": "px"
48991
+ },
48992
+ "blur": {
48993
+ "value": 0,
48994
+ "unit": "px"
48995
+ },
48996
+ "spread": {
48997
+ "value": 1,
48998
+ "unit": "px"
48999
+ }
49000
+ },
49001
+ {
49002
+ "color": "{base.color.neutral.12}",
49003
+ "alpha": 0.08,
49004
+ "offsetX": {
49005
+ "value": 0,
49006
+ "unit": "px"
49007
+ },
49008
+ "offsetY": {
49009
+ "value": 8,
49010
+ "unit": "px"
49011
+ },
49012
+ "blur": {
49013
+ "value": 16,
49014
+ "unit": "px"
49015
+ },
49016
+ "spread": {
49017
+ "value": -4,
49018
+ "unit": "px"
49019
+ }
49020
+ },
49021
+ {
49022
+ "color": "{base.color.neutral.12}",
49023
+ "alpha": 0.08,
49024
+ "offsetX": {
49025
+ "value": 0,
49026
+ "unit": "px"
49027
+ },
49028
+ "offsetY": {
49029
+ "value": 4,
49030
+ "unit": "px"
49031
+ },
49032
+ "blur": {
49033
+ "value": 32,
49034
+ "unit": "px"
49035
+ },
49036
+ "spread": {
49037
+ "value": -4,
49038
+ "unit": "px"
49039
+ }
49040
+ },
49041
+ {
49042
+ "color": "{base.color.neutral.12}",
49043
+ "alpha": 0.08,
49044
+ "offsetX": {
49045
+ "value": 0,
49046
+ "unit": "px"
49047
+ },
49048
+ "offsetY": {
49049
+ "value": 24,
49050
+ "unit": "px"
49051
+ },
49052
+ "blur": {
49053
+ "value": 48,
49054
+ "unit": "px"
49055
+ },
49056
+ "spread": {
49057
+ "value": -12,
49058
+ "unit": "px"
49059
+ }
49060
+ },
49061
+ {
49062
+ "color": "{base.color.neutral.12}",
49063
+ "alpha": 0.08,
49064
+ "offsetX": {
49065
+ "value": 0,
49066
+ "unit": "px"
49067
+ },
49068
+ "offsetY": {
49069
+ "value": 48,
49070
+ "unit": "px"
49071
+ },
49072
+ "blur": {
49073
+ "value": 96,
49074
+ "unit": "px"
49075
+ },
49076
+ "spread": {
49077
+ "value": -24,
49078
+ "unit": "px"
49079
+ }
49080
+ }
49081
+ ],
49082
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49083
+ "isSource": true,
49084
+ "$type": "shadow"
49085
+ },
49086
+ "light-protanopia-deuteranopia-high-contrast": {
49087
+ "$value": [
49088
+ {
49089
+ "color": "{overlay.borderColor}",
49090
+ "alpha": 1,
49091
+ "offsetX": {
49092
+ "value": 0,
49093
+ "unit": "px"
49094
+ },
49095
+ "offsetY": {
49096
+ "value": 0,
49097
+ "unit": "px"
49098
+ },
49099
+ "blur": {
49100
+ "value": 0,
49101
+ "unit": "px"
49102
+ },
49103
+ "spread": {
49104
+ "value": 1,
49105
+ "unit": "px"
49106
+ }
49107
+ },
49108
+ {
49109
+ "color": "{base.color.neutral.12}",
49110
+ "alpha": 0.08,
49111
+ "offsetX": {
49112
+ "value": 0,
49113
+ "unit": "px"
49114
+ },
49115
+ "offsetY": {
49116
+ "value": 8,
49117
+ "unit": "px"
49118
+ },
49119
+ "blur": {
49120
+ "value": 16,
49121
+ "unit": "px"
49122
+ },
49123
+ "spread": {
49124
+ "value": -4,
49125
+ "unit": "px"
49126
+ }
49127
+ },
49128
+ {
49129
+ "color": "{base.color.neutral.12}",
49130
+ "alpha": 0.08,
49131
+ "offsetX": {
49132
+ "value": 0,
49133
+ "unit": "px"
49134
+ },
49135
+ "offsetY": {
49136
+ "value": 4,
49137
+ "unit": "px"
49138
+ },
49139
+ "blur": {
49140
+ "value": 32,
49141
+ "unit": "px"
49142
+ },
49143
+ "spread": {
49144
+ "value": -4,
49145
+ "unit": "px"
49146
+ }
49147
+ },
49148
+ {
49149
+ "color": "{base.color.neutral.12}",
49150
+ "alpha": 0.08,
49151
+ "offsetX": {
49152
+ "value": 0,
49153
+ "unit": "px"
49154
+ },
49155
+ "offsetY": {
49156
+ "value": 24,
49157
+ "unit": "px"
49158
+ },
49159
+ "blur": {
49160
+ "value": 48,
49161
+ "unit": "px"
49162
+ },
49163
+ "spread": {
49164
+ "value": -12,
49165
+ "unit": "px"
49166
+ }
49167
+ },
49168
+ {
49169
+ "color": "{base.color.neutral.12}",
49170
+ "alpha": 0.08,
49171
+ "offsetX": {
49172
+ "value": 0,
49173
+ "unit": "px"
49174
+ },
49175
+ "offsetY": {
49176
+ "value": 48,
49177
+ "unit": "px"
49178
+ },
49179
+ "blur": {
49180
+ "value": 96,
49181
+ "unit": "px"
49182
+ },
49183
+ "spread": {
49184
+ "value": -24,
49185
+ "unit": "px"
49186
+ }
49187
+ }
49188
+ ],
49189
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49190
+ "isSource": true,
49191
+ "$type": "shadow"
49192
+ },
49193
+ "light-tritanopia-high-contrast": {
49194
+ "$value": [
49195
+ {
49196
+ "color": "{overlay.borderColor}",
49197
+ "alpha": 1,
49198
+ "offsetX": {
49199
+ "value": 0,
49200
+ "unit": "px"
49201
+ },
49202
+ "offsetY": {
49203
+ "value": 0,
49204
+ "unit": "px"
49205
+ },
49206
+ "blur": {
49207
+ "value": 0,
49208
+ "unit": "px"
49209
+ },
49210
+ "spread": {
49211
+ "value": 1,
49212
+ "unit": "px"
49213
+ }
49214
+ },
49215
+ {
49216
+ "color": "{base.color.neutral.12}",
49217
+ "alpha": 0.08,
49218
+ "offsetX": {
49219
+ "value": 0,
49220
+ "unit": "px"
49221
+ },
49222
+ "offsetY": {
49223
+ "value": 8,
49224
+ "unit": "px"
49225
+ },
49226
+ "blur": {
49227
+ "value": 16,
49228
+ "unit": "px"
49229
+ },
49230
+ "spread": {
49231
+ "value": -4,
49232
+ "unit": "px"
49233
+ }
49234
+ },
49235
+ {
49236
+ "color": "{base.color.neutral.12}",
49237
+ "alpha": 0.08,
49238
+ "offsetX": {
49239
+ "value": 0,
49240
+ "unit": "px"
49241
+ },
49242
+ "offsetY": {
49243
+ "value": 4,
49244
+ "unit": "px"
49245
+ },
49246
+ "blur": {
49247
+ "value": 32,
49248
+ "unit": "px"
49249
+ },
49250
+ "spread": {
49251
+ "value": -4,
49252
+ "unit": "px"
49253
+ }
49254
+ },
49255
+ {
49256
+ "color": "{base.color.neutral.12}",
49257
+ "alpha": 0.08,
49258
+ "offsetX": {
49259
+ "value": 0,
49260
+ "unit": "px"
49261
+ },
49262
+ "offsetY": {
49263
+ "value": 24,
49264
+ "unit": "px"
49265
+ },
49266
+ "blur": {
49267
+ "value": 48,
49268
+ "unit": "px"
49269
+ },
49270
+ "spread": {
49271
+ "value": -12,
49272
+ "unit": "px"
49273
+ }
49274
+ },
49275
+ {
49276
+ "color": "{base.color.neutral.12}",
49277
+ "alpha": 0.08,
49278
+ "offsetX": {
49279
+ "value": 0,
49280
+ "unit": "px"
49281
+ },
49282
+ "offsetY": {
49283
+ "value": 48,
49284
+ "unit": "px"
49285
+ },
49286
+ "blur": {
49287
+ "value": 96,
49288
+ "unit": "px"
49289
+ },
49290
+ "spread": {
49291
+ "value": -24,
49292
+ "unit": "px"
49293
+ }
47744
49294
  }
47745
49295
  ],
47746
49296
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47747
49297
  "isSource": true,
47748
49298
  "$type": "shadow"
47749
49299
  }
49300
+ },
49301
+ "org.primer.llm": {
49302
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49303
+ "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."
47750
49304
  }
47751
49305
  },
47752
49306
  "key": "{shadow.floating.medium}"
@@ -47754,8 +49308,9 @@
47754
49308
  "name": "shadow-floating-medium",
47755
49309
  "attributes": {},
47756
49310
  "path": ["shadow", "floating", "medium"],
47757
- "value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
47758
- "type": "shadow"
49311
+ "value": "0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
49312
+ "type": "shadow",
49313
+ "description": "Medium floating shadow for popovers and action menus"
47759
49314
  },
47760
49315
  "shadow-floating-small": {
47761
49316
  "key": "{shadow.floating.small}",
@@ -47770,26 +49325,62 @@
47770
49325
  {
47771
49326
  "color": "#d1d9e080",
47772
49327
  "alpha": 1,
47773
- "offsetX": "0px",
47774
- "offsetY": "0px",
47775
- "blur": "0px",
47776
- "spread": "1px"
49328
+ "offsetX": {
49329
+ "value": 0,
49330
+ "unit": "px"
49331
+ },
49332
+ "offsetY": {
49333
+ "value": 0,
49334
+ "unit": "px"
49335
+ },
49336
+ "blur": {
49337
+ "value": 0,
49338
+ "unit": "px"
49339
+ },
49340
+ "spread": {
49341
+ "value": 1,
49342
+ "unit": "px"
49343
+ }
47777
49344
  },
47778
49345
  {
47779
49346
  "color": "#ffffff",
47780
49347
  "alpha": 0.4,
47781
- "offsetX": "0px",
47782
- "offsetY": "6px",
47783
- "blur": "12px",
47784
- "spread": "-3px"
49348
+ "offsetX": {
49349
+ "value": 0,
49350
+ "unit": "px"
49351
+ },
49352
+ "offsetY": {
49353
+ "value": 6,
49354
+ "unit": "px"
49355
+ },
49356
+ "blur": {
49357
+ "value": 12,
49358
+ "unit": "px"
49359
+ },
49360
+ "spread": {
49361
+ "value": -3,
49362
+ "unit": "px"
49363
+ }
47785
49364
  },
47786
49365
  {
47787
49366
  "color": "#ffffff",
47788
49367
  "alpha": 0.4,
47789
- "offsetX": "0px",
47790
- "offsetY": "6px",
47791
- "blur": "18px",
47792
- "spread": "0px"
49368
+ "offsetX": {
49369
+ "value": 0,
49370
+ "unit": "px"
49371
+ },
49372
+ "offsetY": {
49373
+ "value": 6,
49374
+ "unit": "px"
49375
+ },
49376
+ "blur": {
49377
+ "value": 18,
49378
+ "unit": "px"
49379
+ },
49380
+ "spread": {
49381
+ "value": 0,
49382
+ "unit": "px"
49383
+ }
47793
49384
  }
47794
49385
  ],
47795
49386
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47809,26 +49400,62 @@
47809
49400
  {
47810
49401
  "color": "{overlay.borderColor}",
47811
49402
  "alpha": 0.5,
47812
- "offsetX": "0px",
47813
- "offsetY": "0px",
47814
- "blur": "0px",
47815
- "spread": "1px"
49403
+ "offsetX": {
49404
+ "value": 0,
49405
+ "unit": "px"
49406
+ },
49407
+ "offsetY": {
49408
+ "value": 0,
49409
+ "unit": "px"
49410
+ },
49411
+ "blur": {
49412
+ "value": 0,
49413
+ "unit": "px"
49414
+ },
49415
+ "spread": {
49416
+ "value": 1,
49417
+ "unit": "px"
49418
+ }
47816
49419
  },
47817
49420
  {
47818
49421
  "color": "{base.color.neutral.12}",
47819
49422
  "alpha": 0.04,
47820
- "offsetX": "0px",
47821
- "offsetY": "6px",
47822
- "blur": "12px",
47823
- "spread": "-3px"
49423
+ "offsetX": {
49424
+ "value": 0,
49425
+ "unit": "px"
49426
+ },
49427
+ "offsetY": {
49428
+ "value": 6,
49429
+ "unit": "px"
49430
+ },
49431
+ "blur": {
49432
+ "value": 12,
49433
+ "unit": "px"
49434
+ },
49435
+ "spread": {
49436
+ "value": -3,
49437
+ "unit": "px"
49438
+ }
47824
49439
  },
47825
49440
  {
47826
49441
  "color": "{base.color.neutral.12}",
47827
49442
  "alpha": 0.12,
47828
- "offsetX": "0px",
47829
- "offsetY": "6px",
47830
- "blur": "18px",
47831
- "spread": "0px"
49443
+ "offsetX": {
49444
+ "value": 0,
49445
+ "unit": "px"
49446
+ },
49447
+ "offsetY": {
49448
+ "value": 6,
49449
+ "unit": "px"
49450
+ },
49451
+ "blur": {
49452
+ "value": 18,
49453
+ "unit": "px"
49454
+ },
49455
+ "spread": {
49456
+ "value": 0,
49457
+ "unit": "px"
49458
+ }
47832
49459
  }
47833
49460
  ],
47834
49461
  "$type": "shadow",
@@ -47844,26 +49471,62 @@
47844
49471
  {
47845
49472
  "color": "{overlay.borderColor}",
47846
49473
  "alpha": 1,
47847
- "offsetX": "0px",
47848
- "offsetY": "0px",
47849
- "blur": "0px",
47850
- "spread": "1px"
49474
+ "offsetX": {
49475
+ "value": 0,
49476
+ "unit": "px"
49477
+ },
49478
+ "offsetY": {
49479
+ "value": 0,
49480
+ "unit": "px"
49481
+ },
49482
+ "blur": {
49483
+ "value": 0,
49484
+ "unit": "px"
49485
+ },
49486
+ "spread": {
49487
+ "value": 1,
49488
+ "unit": "px"
49489
+ }
47851
49490
  },
47852
49491
  {
47853
49492
  "color": "{base.color.neutral.0}",
47854
49493
  "alpha": 0.4,
47855
- "offsetX": "0px",
47856
- "offsetY": "6px",
47857
- "blur": "12px",
47858
- "spread": "-3px"
49494
+ "offsetX": {
49495
+ "value": 0,
49496
+ "unit": "px"
49497
+ },
49498
+ "offsetY": {
49499
+ "value": 6,
49500
+ "unit": "px"
49501
+ },
49502
+ "blur": {
49503
+ "value": 12,
49504
+ "unit": "px"
49505
+ },
49506
+ "spread": {
49507
+ "value": -3,
49508
+ "unit": "px"
49509
+ }
47859
49510
  },
47860
49511
  {
47861
49512
  "color": "{base.color.neutral.0}",
47862
49513
  "alpha": 0.4,
47863
- "offsetX": "0px",
47864
- "offsetY": "6px",
47865
- "blur": "18px",
47866
- "spread": "0px"
49514
+ "offsetX": {
49515
+ "value": 0,
49516
+ "unit": "px"
49517
+ },
49518
+ "offsetY": {
49519
+ "value": 6,
49520
+ "unit": "px"
49521
+ },
49522
+ "blur": {
49523
+ "value": 18,
49524
+ "unit": "px"
49525
+ },
49526
+ "spread": {
49527
+ "value": 0,
49528
+ "unit": "px"
49529
+ }
47867
49530
  }
47868
49531
  ],
47869
49532
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47881,7 +49544,7 @@
47881
49544
  "name": "shadow-floating-small",
47882
49545
  "attributes": {},
47883
49546
  "path": ["shadow", "floating", "small"],
47884
- "value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
49547
+ "value": "0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47885
49548
  "type": "shadow",
47886
49549
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47887
49550
  },
@@ -47898,24 +49561,193 @@
47898
49561
  {
47899
49562
  "color": "#d1d9e080",
47900
49563
  "alpha": 1,
47901
- "offsetX": "0px",
47902
- "offsetY": "0px",
47903
- "blur": "0px",
47904
- "spread": "1px"
49564
+ "offsetX": {
49565
+ "value": 0,
49566
+ "unit": "px"
49567
+ },
49568
+ "offsetY": {
49569
+ "value": 0,
49570
+ "unit": "px"
49571
+ },
49572
+ "blur": {
49573
+ "value": 0,
49574
+ "unit": "px"
49575
+ },
49576
+ "spread": {
49577
+ "value": 1,
49578
+ "unit": "px"
49579
+ }
47905
49580
  },
47906
49581
  {
47907
49582
  "color": "#ffffff",
47908
49583
  "alpha": 1,
47909
- "offsetX": "0px",
47910
- "offsetY": "32px",
47911
- "blur": "64px",
47912
- "spread": "0px"
49584
+ "offsetX": {
49585
+ "value": 0,
49586
+ "unit": "px"
49587
+ },
49588
+ "offsetY": {
49589
+ "value": 32,
49590
+ "unit": "px"
49591
+ },
49592
+ "blur": {
49593
+ "value": 64,
49594
+ "unit": "px"
49595
+ },
49596
+ "spread": {
49597
+ "value": 0,
49598
+ "unit": "px"
49599
+ }
49600
+ }
49601
+ ],
49602
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49603
+ "isSource": true,
49604
+ "$type": "shadow"
49605
+ },
49606
+ "light-high-contrast": {
49607
+ "$value": [
49608
+ {
49609
+ "color": "#d1d9e080",
49610
+ "alpha": 1,
49611
+ "offsetX": {
49612
+ "value": 0,
49613
+ "unit": "px"
49614
+ },
49615
+ "offsetY": {
49616
+ "value": 0,
49617
+ "unit": "px"
49618
+ },
49619
+ "blur": {
49620
+ "value": 0,
49621
+ "unit": "px"
49622
+ },
49623
+ "spread": {
49624
+ "value": 1,
49625
+ "unit": "px"
49626
+ }
49627
+ },
49628
+ {
49629
+ "color": "#25292e",
49630
+ "alpha": 0.32,
49631
+ "offsetX": {
49632
+ "value": 0,
49633
+ "unit": "px"
49634
+ },
49635
+ "offsetY": {
49636
+ "value": 56,
49637
+ "unit": "px"
49638
+ },
49639
+ "blur": {
49640
+ "value": 112,
49641
+ "unit": "px"
49642
+ },
49643
+ "spread": {
49644
+ "value": 0,
49645
+ "unit": "px"
49646
+ }
49647
+ }
49648
+ ],
49649
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49650
+ "isSource": true,
49651
+ "$type": "shadow"
49652
+ },
49653
+ "light-protanopia-deuteranopia-high-contrast": {
49654
+ "$value": [
49655
+ {
49656
+ "color": "#d1d9e080",
49657
+ "alpha": 1,
49658
+ "offsetX": {
49659
+ "value": 0,
49660
+ "unit": "px"
49661
+ },
49662
+ "offsetY": {
49663
+ "value": 0,
49664
+ "unit": "px"
49665
+ },
49666
+ "blur": {
49667
+ "value": 0,
49668
+ "unit": "px"
49669
+ },
49670
+ "spread": {
49671
+ "value": 1,
49672
+ "unit": "px"
49673
+ }
49674
+ },
49675
+ {
49676
+ "color": "#25292e",
49677
+ "alpha": 0.32,
49678
+ "offsetX": {
49679
+ "value": 0,
49680
+ "unit": "px"
49681
+ },
49682
+ "offsetY": {
49683
+ "value": 56,
49684
+ "unit": "px"
49685
+ },
49686
+ "blur": {
49687
+ "value": 112,
49688
+ "unit": "px"
49689
+ },
49690
+ "spread": {
49691
+ "value": 0,
49692
+ "unit": "px"
49693
+ }
49694
+ }
49695
+ ],
49696
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49697
+ "isSource": true,
49698
+ "$type": "shadow"
49699
+ },
49700
+ "light-tritanopia-high-contrast": {
49701
+ "$value": [
49702
+ {
49703
+ "color": "#d1d9e080",
49704
+ "alpha": 1,
49705
+ "offsetX": {
49706
+ "value": 0,
49707
+ "unit": "px"
49708
+ },
49709
+ "offsetY": {
49710
+ "value": 0,
49711
+ "unit": "px"
49712
+ },
49713
+ "blur": {
49714
+ "value": 0,
49715
+ "unit": "px"
49716
+ },
49717
+ "spread": {
49718
+ "value": 1,
49719
+ "unit": "px"
49720
+ }
49721
+ },
49722
+ {
49723
+ "color": "#25292e",
49724
+ "alpha": 0.32,
49725
+ "offsetX": {
49726
+ "value": 0,
49727
+ "unit": "px"
49728
+ },
49729
+ "offsetY": {
49730
+ "value": 56,
49731
+ "unit": "px"
49732
+ },
49733
+ "blur": {
49734
+ "value": 112,
49735
+ "unit": "px"
49736
+ },
49737
+ "spread": {
49738
+ "value": 0,
49739
+ "unit": "px"
49740
+ }
47913
49741
  }
47914
49742
  ],
47915
49743
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47916
49744
  "isSource": true,
47917
49745
  "$type": "shadow"
47918
49746
  }
49747
+ },
49748
+ "org.primer.llm": {
49749
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49750
+ "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."
47919
49751
  }
47920
49752
  },
47921
49753
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47925,21 +49757,46 @@
47925
49757
  {
47926
49758
  "color": "{overlay.borderColor}",
47927
49759
  "alpha": 0,
47928
- "offsetX": "0px",
47929
- "offsetY": "0px",
47930
- "blur": "0px",
47931
- "spread": "1px"
49760
+ "offsetX": {
49761
+ "value": 0,
49762
+ "unit": "px"
49763
+ },
49764
+ "offsetY": {
49765
+ "value": 0,
49766
+ "unit": "px"
49767
+ },
49768
+ "blur": {
49769
+ "value": 0,
49770
+ "unit": "px"
49771
+ },
49772
+ "spread": {
49773
+ "value": 1,
49774
+ "unit": "px"
49775
+ }
47932
49776
  },
47933
49777
  {
47934
49778
  "color": "{base.color.neutral.12}",
47935
49779
  "alpha": 0.32,
47936
- "offsetX": "0px",
47937
- "offsetY": "56px",
47938
- "blur": "112px",
47939
- "spread": "0px"
49780
+ "offsetX": {
49781
+ "value": 0,
49782
+ "unit": "px"
49783
+ },
49784
+ "offsetY": {
49785
+ "value": 56,
49786
+ "unit": "px"
49787
+ },
49788
+ "blur": {
49789
+ "value": 112,
49790
+ "unit": "px"
49791
+ },
49792
+ "spread": {
49793
+ "value": 0,
49794
+ "unit": "px"
49795
+ }
47940
49796
  }
47941
49797
  ],
47942
49798
  "$type": "shadow",
49799
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47943
49800
  "$extensions": {
47944
49801
  "org.primer.figma": {
47945
49802
  "collection": "mode",
@@ -47951,24 +49808,193 @@
47951
49808
  {
47952
49809
  "color": "{overlay.borderColor}",
47953
49810
  "alpha": 1,
47954
- "offsetX": "0px",
47955
- "offsetY": "0px",
47956
- "blur": "0px",
47957
- "spread": "1px"
49811
+ "offsetX": {
49812
+ "value": 0,
49813
+ "unit": "px"
49814
+ },
49815
+ "offsetY": {
49816
+ "value": 0,
49817
+ "unit": "px"
49818
+ },
49819
+ "blur": {
49820
+ "value": 0,
49821
+ "unit": "px"
49822
+ },
49823
+ "spread": {
49824
+ "value": 1,
49825
+ "unit": "px"
49826
+ }
47958
49827
  },
47959
49828
  {
47960
49829
  "color": "{base.color.neutral.0}",
47961
49830
  "alpha": 1,
47962
- "offsetX": "0px",
47963
- "offsetY": "32px",
47964
- "blur": "64px",
47965
- "spread": "0px"
49831
+ "offsetX": {
49832
+ "value": 0,
49833
+ "unit": "px"
49834
+ },
49835
+ "offsetY": {
49836
+ "value": 32,
49837
+ "unit": "px"
49838
+ },
49839
+ "blur": {
49840
+ "value": 64,
49841
+ "unit": "px"
49842
+ },
49843
+ "spread": {
49844
+ "value": 0,
49845
+ "unit": "px"
49846
+ }
49847
+ }
49848
+ ],
49849
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49850
+ "isSource": true,
49851
+ "$type": "shadow"
49852
+ },
49853
+ "light-high-contrast": {
49854
+ "$value": [
49855
+ {
49856
+ "color": "{overlay.borderColor}",
49857
+ "alpha": 1,
49858
+ "offsetX": {
49859
+ "value": 0,
49860
+ "unit": "px"
49861
+ },
49862
+ "offsetY": {
49863
+ "value": 0,
49864
+ "unit": "px"
49865
+ },
49866
+ "blur": {
49867
+ "value": 0,
49868
+ "unit": "px"
49869
+ },
49870
+ "spread": {
49871
+ "value": 1,
49872
+ "unit": "px"
49873
+ }
49874
+ },
49875
+ {
49876
+ "color": "{base.color.neutral.12}",
49877
+ "alpha": 0.32,
49878
+ "offsetX": {
49879
+ "value": 0,
49880
+ "unit": "px"
49881
+ },
49882
+ "offsetY": {
49883
+ "value": 56,
49884
+ "unit": "px"
49885
+ },
49886
+ "blur": {
49887
+ "value": 112,
49888
+ "unit": "px"
49889
+ },
49890
+ "spread": {
49891
+ "value": 0,
49892
+ "unit": "px"
49893
+ }
49894
+ }
49895
+ ],
49896
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49897
+ "isSource": true,
49898
+ "$type": "shadow"
49899
+ },
49900
+ "light-protanopia-deuteranopia-high-contrast": {
49901
+ "$value": [
49902
+ {
49903
+ "color": "{overlay.borderColor}",
49904
+ "alpha": 1,
49905
+ "offsetX": {
49906
+ "value": 0,
49907
+ "unit": "px"
49908
+ },
49909
+ "offsetY": {
49910
+ "value": 0,
49911
+ "unit": "px"
49912
+ },
49913
+ "blur": {
49914
+ "value": 0,
49915
+ "unit": "px"
49916
+ },
49917
+ "spread": {
49918
+ "value": 1,
49919
+ "unit": "px"
49920
+ }
49921
+ },
49922
+ {
49923
+ "color": "{base.color.neutral.12}",
49924
+ "alpha": 0.32,
49925
+ "offsetX": {
49926
+ "value": 0,
49927
+ "unit": "px"
49928
+ },
49929
+ "offsetY": {
49930
+ "value": 56,
49931
+ "unit": "px"
49932
+ },
49933
+ "blur": {
49934
+ "value": 112,
49935
+ "unit": "px"
49936
+ },
49937
+ "spread": {
49938
+ "value": 0,
49939
+ "unit": "px"
49940
+ }
49941
+ }
49942
+ ],
49943
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49944
+ "isSource": true,
49945
+ "$type": "shadow"
49946
+ },
49947
+ "light-tritanopia-high-contrast": {
49948
+ "$value": [
49949
+ {
49950
+ "color": "{overlay.borderColor}",
49951
+ "alpha": 1,
49952
+ "offsetX": {
49953
+ "value": 0,
49954
+ "unit": "px"
49955
+ },
49956
+ "offsetY": {
49957
+ "value": 0,
49958
+ "unit": "px"
49959
+ },
49960
+ "blur": {
49961
+ "value": 0,
49962
+ "unit": "px"
49963
+ },
49964
+ "spread": {
49965
+ "value": 1,
49966
+ "unit": "px"
49967
+ }
49968
+ },
49969
+ {
49970
+ "color": "{base.color.neutral.12}",
49971
+ "alpha": 0.32,
49972
+ "offsetX": {
49973
+ "value": 0,
49974
+ "unit": "px"
49975
+ },
49976
+ "offsetY": {
49977
+ "value": 56,
49978
+ "unit": "px"
49979
+ },
49980
+ "blur": {
49981
+ "value": 112,
49982
+ "unit": "px"
49983
+ },
49984
+ "spread": {
49985
+ "value": 0,
49986
+ "unit": "px"
49987
+ }
47966
49988
  }
47967
49989
  ],
47968
49990
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47969
49991
  "isSource": true,
47970
49992
  "$type": "shadow"
47971
49993
  }
49994
+ },
49995
+ "org.primer.llm": {
49996
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49997
+ "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."
47972
49998
  }
47973
49999
  },
47974
50000
  "key": "{shadow.floating.xlarge}"
@@ -47976,8 +50002,9 @@
47976
50002
  "name": "shadow-floating-xlarge",
47977
50003
  "attributes": {},
47978
50004
  "path": ["shadow", "floating", "xlarge"],
47979
- "value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
47980
- "type": "shadow"
50005
+ "value": "0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52",
50006
+ "type": "shadow",
50007
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47981
50008
  },
47982
50009
  "shadow-inset": {
47983
50010
  "key": "{shadow.inset}",
@@ -47991,16 +50018,32 @@
47991
50018
  "$value": {
47992
50019
  "color": "#ffffff",
47993
50020
  "alpha": 0.24,
47994
- "offsetX": "0px",
47995
- "offsetY": "1px",
47996
- "blur": "0px",
47997
- "spread": "0px",
50021
+ "offsetX": {
50022
+ "value": 0,
50023
+ "unit": "px"
50024
+ },
50025
+ "offsetY": {
50026
+ "value": 1,
50027
+ "unit": "px"
50028
+ },
50029
+ "blur": {
50030
+ "value": 0,
50031
+ "unit": "px"
50032
+ },
50033
+ "spread": {
50034
+ "value": 0,
50035
+ "unit": "px"
50036
+ },
47998
50037
  "inset": true
47999
50038
  },
48000
50039
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48001
50040
  "isSource": true,
48002
50041
  "$type": "shadow"
48003
50042
  }
50043
+ },
50044
+ "org.primer.llm": {
50045
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50046
+ "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."
48004
50047
  }
48005
50048
  },
48006
50049
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48009,13 +50052,26 @@
48009
50052
  "$value": {
48010
50053
  "color": "{base.color.neutral.13}",
48011
50054
  "alpha": 0.04,
48012
- "offsetX": "0px",
48013
- "offsetY": "1px",
48014
- "blur": "0px",
48015
- "spread": "0px",
50055
+ "offsetX": {
50056
+ "value": 0,
50057
+ "unit": "px"
50058
+ },
50059
+ "offsetY": {
50060
+ "value": 1,
50061
+ "unit": "px"
50062
+ },
50063
+ "blur": {
50064
+ "value": 0,
50065
+ "unit": "px"
50066
+ },
50067
+ "spread": {
50068
+ "value": 0,
50069
+ "unit": "px"
50070
+ },
48016
50071
  "inset": true
48017
50072
  },
48018
50073
  "$type": "shadow",
50074
+ "$description": "Inset shadow for recessed elements",
48019
50075
  "$extensions": {
48020
50076
  "org.primer.figma": {
48021
50077
  "collection": "mode",
@@ -48026,16 +50082,32 @@
48026
50082
  "$value": {
48027
50083
  "color": "{base.color.neutral.0}",
48028
50084
  "alpha": 0.24,
48029
- "offsetX": "0px",
48030
- "offsetY": "1px",
48031
- "blur": "0px",
48032
- "spread": "0px",
50085
+ "offsetX": {
50086
+ "value": 0,
50087
+ "unit": "px"
50088
+ },
50089
+ "offsetY": {
50090
+ "value": 1,
50091
+ "unit": "px"
50092
+ },
50093
+ "blur": {
50094
+ "value": 0,
50095
+ "unit": "px"
50096
+ },
50097
+ "spread": {
50098
+ "value": 0,
50099
+ "unit": "px"
50100
+ },
48033
50101
  "inset": true
48034
50102
  },
48035
50103
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48036
50104
  "isSource": true,
48037
50105
  "$type": "shadow"
48038
50106
  }
50107
+ },
50108
+ "org.primer.llm": {
50109
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50110
+ "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."
48039
50111
  }
48040
50112
  },
48041
50113
  "key": "{shadow.inset}"
@@ -48043,8 +50115,9 @@
48043
50115
  "name": "shadow-inset",
48044
50116
  "attributes": {},
48045
50117
  "path": ["shadow", "inset"],
48046
- "value": "inset 0px 1px 0px 0px #1f23280a",
48047
- "type": "shadow"
50118
+ "value": "inset 0 1px 0 0 #1f23280a",
50119
+ "type": "shadow",
50120
+ "description": "Inset shadow for recessed elements"
48048
50121
  },
48049
50122
  "shadow-resting-medium": {
48050
50123
  "key": "{shadow.resting.medium}",
@@ -48059,24 +50132,52 @@
48059
50132
  {
48060
50133
  "color": "#ffffff",
48061
50134
  "alpha": 0.4,
48062
- "offsetX": "0px",
48063
- "offsetY": "1px",
48064
- "blur": "1px",
48065
- "spread": "0px"
50135
+ "offsetX": {
50136
+ "value": 0,
50137
+ "unit": "px"
50138
+ },
50139
+ "offsetY": {
50140
+ "value": 1,
50141
+ "unit": "px"
50142
+ },
50143
+ "blur": {
50144
+ "value": 1,
50145
+ "unit": "px"
50146
+ },
50147
+ "spread": {
50148
+ "value": 0,
50149
+ "unit": "px"
50150
+ }
48066
50151
  },
48067
50152
  {
48068
50153
  "color": "#ffffff",
48069
50154
  "alpha": 0.8,
48070
- "offsetX": "0px",
48071
- "offsetY": "3px",
48072
- "blur": "6px",
48073
- "spread": "0px"
50155
+ "offsetX": {
50156
+ "value": 0,
50157
+ "unit": "px"
50158
+ },
50159
+ "offsetY": {
50160
+ "value": 3,
50161
+ "unit": "px"
50162
+ },
50163
+ "blur": {
50164
+ "value": 6,
50165
+ "unit": "px"
50166
+ },
50167
+ "spread": {
50168
+ "value": 0,
50169
+ "unit": "px"
50170
+ }
48074
50171
  }
48075
50172
  ],
48076
50173
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48077
50174
  "isSource": true,
48078
50175
  "$type": "shadow"
48079
50176
  }
50177
+ },
50178
+ "org.primer.llm": {
50179
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50180
+ "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."
48080
50181
  }
48081
50182
  },
48082
50183
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48086,21 +50187,46 @@
48086
50187
  {
48087
50188
  "color": "{base.color.neutral.12}",
48088
50189
  "alpha": 0.1,
48089
- "offsetX": "0px",
48090
- "offsetY": "1px",
48091
- "blur": "1px",
48092
- "spread": "0px"
50190
+ "offsetX": {
50191
+ "value": 0,
50192
+ "unit": "px"
50193
+ },
50194
+ "offsetY": {
50195
+ "value": 1,
50196
+ "unit": "px"
50197
+ },
50198
+ "blur": {
50199
+ "value": 1,
50200
+ "unit": "px"
50201
+ },
50202
+ "spread": {
50203
+ "value": 0,
50204
+ "unit": "px"
50205
+ }
48093
50206
  },
48094
50207
  {
48095
50208
  "color": "{base.color.neutral.12}",
48096
50209
  "alpha": 0.12,
48097
- "offsetX": "0px",
48098
- "offsetY": "3px",
48099
- "blur": "6px",
48100
- "spread": "0px"
50210
+ "offsetX": {
50211
+ "value": 0,
50212
+ "unit": "px"
50213
+ },
50214
+ "offsetY": {
50215
+ "value": 3,
50216
+ "unit": "px"
50217
+ },
50218
+ "blur": {
50219
+ "value": 6,
50220
+ "unit": "px"
50221
+ },
50222
+ "spread": {
50223
+ "value": 0,
50224
+ "unit": "px"
50225
+ }
48101
50226
  }
48102
50227
  ],
48103
50228
  "$type": "shadow",
50229
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48104
50230
  "$extensions": {
48105
50231
  "org.primer.figma": {
48106
50232
  "collection": "mode",
@@ -48112,24 +50238,52 @@
48112
50238
  {
48113
50239
  "color": "{base.color.neutral.0}",
48114
50240
  "alpha": 0.4,
48115
- "offsetX": "0px",
48116
- "offsetY": "1px",
48117
- "blur": "1px",
48118
- "spread": "0px"
50241
+ "offsetX": {
50242
+ "value": 0,
50243
+ "unit": "px"
50244
+ },
50245
+ "offsetY": {
50246
+ "value": 1,
50247
+ "unit": "px"
50248
+ },
50249
+ "blur": {
50250
+ "value": 1,
50251
+ "unit": "px"
50252
+ },
50253
+ "spread": {
50254
+ "value": 0,
50255
+ "unit": "px"
50256
+ }
48119
50257
  },
48120
50258
  {
48121
50259
  "color": "{base.color.neutral.0}",
48122
50260
  "alpha": 0.8,
48123
- "offsetX": "0px",
48124
- "offsetY": "3px",
48125
- "blur": "6px",
48126
- "spread": "0px"
50261
+ "offsetX": {
50262
+ "value": 0,
50263
+ "unit": "px"
50264
+ },
50265
+ "offsetY": {
50266
+ "value": 3,
50267
+ "unit": "px"
50268
+ },
50269
+ "blur": {
50270
+ "value": 6,
50271
+ "unit": "px"
50272
+ },
50273
+ "spread": {
50274
+ "value": 0,
50275
+ "unit": "px"
50276
+ }
48127
50277
  }
48128
50278
  ],
48129
50279
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48130
50280
  "isSource": true,
48131
50281
  "$type": "shadow"
48132
50282
  }
50283
+ },
50284
+ "org.primer.llm": {
50285
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50286
+ "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."
48133
50287
  }
48134
50288
  },
48135
50289
  "key": "{shadow.resting.medium}"
@@ -48137,8 +50291,9 @@
48137
50291
  "name": "shadow-resting-medium",
48138
50292
  "attributes": {},
48139
50293
  "path": ["shadow", "resting", "medium"],
48140
- "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
48141
- "type": "shadow"
50294
+ "value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
50295
+ "type": "shadow",
50296
+ "description": "Medium resting shadow for cards and elevated surfaces"
48142
50297
  },
48143
50298
  "shadow-resting-small": {
48144
50299
  "key": "{shadow.resting.small}",
@@ -48153,19 +50308,43 @@
48153
50308
  {
48154
50309
  "color": "#ffffff",
48155
50310
  "alpha": 0.6,
48156
- "offsetX": "0px",
48157
- "offsetY": "1px",
48158
- "blur": "1px",
48159
- "spread": "0px",
50311
+ "offsetX": {
50312
+ "value": 0,
50313
+ "unit": "px"
50314
+ },
50315
+ "offsetY": {
50316
+ "value": 1,
50317
+ "unit": "px"
50318
+ },
50319
+ "blur": {
50320
+ "value": 1,
50321
+ "unit": "px"
50322
+ },
50323
+ "spread": {
50324
+ "value": 0,
50325
+ "unit": "px"
50326
+ },
48160
50327
  "inset": false
48161
50328
  },
48162
50329
  {
48163
50330
  "color": "#ffffff",
48164
50331
  "alpha": 0.6,
48165
- "offsetX": "0px",
48166
- "offsetY": "1px",
48167
- "blur": "3px",
48168
- "spread": "0px",
50332
+ "offsetX": {
50333
+ "value": 0,
50334
+ "unit": "px"
50335
+ },
50336
+ "offsetY": {
50337
+ "value": 1,
50338
+ "unit": "px"
50339
+ },
50340
+ "blur": {
50341
+ "value": 3,
50342
+ "unit": "px"
50343
+ },
50344
+ "spread": {
50345
+ "value": 0,
50346
+ "unit": "px"
50347
+ },
48169
50348
  "inset": false
48170
50349
  }
48171
50350
  ],
@@ -48173,6 +50352,10 @@
48173
50352
  "isSource": true,
48174
50353
  "$type": "shadow"
48175
50354
  }
50355
+ },
50356
+ "org.primer.llm": {
50357
+ "usage": ["button", "interactive-card", "clickable-element"],
50358
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48176
50359
  }
48177
50360
  },
48178
50361
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48181,24 +50364,49 @@
48181
50364
  "$value": [
48182
50365
  {
48183
50366
  "color": "{base.color.neutral.13}",
48184
- "alpha": 0.06,
48185
- "offsetX": "0px",
48186
- "offsetY": "1px",
48187
- "blur": "1px",
48188
- "spread": "0px",
50367
+ "alpha": 0.04,
50368
+ "offsetX": {
50369
+ "value": 0,
50370
+ "unit": "px"
50371
+ },
50372
+ "offsetY": {
50373
+ "value": 1,
50374
+ "unit": "px"
50375
+ },
50376
+ "blur": {
50377
+ "value": 1,
50378
+ "unit": "px"
50379
+ },
50380
+ "spread": {
50381
+ "value": 0,
50382
+ "unit": "px"
50383
+ },
48189
50384
  "inset": false
48190
50385
  },
48191
50386
  {
48192
50387
  "color": "{base.color.neutral.13}",
48193
- "alpha": 0.06,
48194
- "offsetX": "0px",
48195
- "offsetY": "1px",
48196
- "blur": "3px",
48197
- "spread": "0px",
50388
+ "alpha": 0.03,
50389
+ "offsetX": {
50390
+ "value": 0,
50391
+ "unit": "px"
50392
+ },
50393
+ "offsetY": {
50394
+ "value": 1,
50395
+ "unit": "px"
50396
+ },
50397
+ "blur": {
50398
+ "value": 2,
50399
+ "unit": "px"
50400
+ },
50401
+ "spread": {
50402
+ "value": 0,
50403
+ "unit": "px"
50404
+ },
48198
50405
  "inset": false
48199
50406
  }
48200
50407
  ],
48201
50408
  "$type": "shadow",
50409
+ "$description": "Small resting shadow for buttons and interactive elements",
48202
50410
  "$extensions": {
48203
50411
  "org.primer.figma": {
48204
50412
  "collection": "mode",
@@ -48210,19 +50418,43 @@
48210
50418
  {
48211
50419
  "color": "{base.color.neutral.0}",
48212
50420
  "alpha": 0.6,
48213
- "offsetX": "0px",
48214
- "offsetY": "1px",
48215
- "blur": "1px",
48216
- "spread": "0px",
50421
+ "offsetX": {
50422
+ "value": 0,
50423
+ "unit": "px"
50424
+ },
50425
+ "offsetY": {
50426
+ "value": 1,
50427
+ "unit": "px"
50428
+ },
50429
+ "blur": {
50430
+ "value": 1,
50431
+ "unit": "px"
50432
+ },
50433
+ "spread": {
50434
+ "value": 0,
50435
+ "unit": "px"
50436
+ },
48217
50437
  "inset": false
48218
50438
  },
48219
50439
  {
48220
50440
  "color": "{base.color.neutral.0}",
48221
50441
  "alpha": 0.6,
48222
- "offsetX": "0px",
48223
- "offsetY": "1px",
48224
- "blur": "3px",
48225
- "spread": "0px",
50442
+ "offsetX": {
50443
+ "value": 0,
50444
+ "unit": "px"
50445
+ },
50446
+ "offsetY": {
50447
+ "value": 1,
50448
+ "unit": "px"
50449
+ },
50450
+ "blur": {
50451
+ "value": 3,
50452
+ "unit": "px"
50453
+ },
50454
+ "spread": {
50455
+ "value": 0,
50456
+ "unit": "px"
50457
+ },
48226
50458
  "inset": false
48227
50459
  }
48228
50460
  ],
@@ -48230,6 +50462,10 @@
48230
50462
  "isSource": true,
48231
50463
  "$type": "shadow"
48232
50464
  }
50465
+ },
50466
+ "org.primer.llm": {
50467
+ "usage": ["button", "interactive-card", "clickable-element"],
50468
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48233
50469
  }
48234
50470
  },
48235
50471
  "key": "{shadow.resting.small}"
@@ -48237,8 +50473,9 @@
48237
50473
  "name": "shadow-resting-small",
48238
50474
  "attributes": {},
48239
50475
  "path": ["shadow", "resting", "small"],
48240
- "value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
48241
- "type": "shadow"
50476
+ "value": "0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808",
50477
+ "type": "shadow",
50478
+ "description": "Small resting shadow for buttons and interactive elements"
48242
50479
  },
48243
50480
  "shadow-resting-xsmall": {
48244
50481
  "key": "{shadow.resting.xsmall}",
@@ -48252,16 +50489,32 @@
48252
50489
  "$value": {
48253
50490
  "color": "#ffffff",
48254
50491
  "alpha": 0.8,
48255
- "offsetX": "0px",
48256
- "offsetY": "1px",
48257
- "blur": "1px",
48258
- "spread": "0px",
50492
+ "offsetX": {
50493
+ "value": 0,
50494
+ "unit": "px"
50495
+ },
50496
+ "offsetY": {
50497
+ "value": 1,
50498
+ "unit": "px"
50499
+ },
50500
+ "blur": {
50501
+ "value": 1,
50502
+ "unit": "px"
50503
+ },
50504
+ "spread": {
50505
+ "value": 0,
50506
+ "unit": "px"
50507
+ },
48259
50508
  "inset": false
48260
50509
  },
48261
50510
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48262
50511
  "isSource": true,
48263
50512
  "$type": "shadow"
48264
50513
  }
50514
+ },
50515
+ "org.primer.llm": {
50516
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50517
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48265
50518
  }
48266
50519
  },
48267
50520
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48269,14 +50522,27 @@
48269
50522
  "original": {
48270
50523
  "$value": {
48271
50524
  "color": "{base.color.neutral.13}",
48272
- "alpha": 0.06,
48273
- "offsetX": "0px",
48274
- "offsetY": "1px",
48275
- "blur": "1px",
48276
- "spread": "0px",
50525
+ "alpha": 0.05,
50526
+ "offsetX": {
50527
+ "value": 0,
50528
+ "unit": "px"
50529
+ },
50530
+ "offsetY": {
50531
+ "value": 1,
50532
+ "unit": "px"
50533
+ },
50534
+ "blur": {
50535
+ "value": 1,
50536
+ "unit": "px"
50537
+ },
50538
+ "spread": {
50539
+ "value": 0,
50540
+ "unit": "px"
50541
+ },
48277
50542
  "inset": false
48278
50543
  },
48279
50544
  "$type": "shadow",
50545
+ "$description": "Extra small resting shadow for minimal elevation",
48280
50546
  "$extensions": {
48281
50547
  "org.primer.figma": {
48282
50548
  "collection": "mode",
@@ -48287,16 +50553,32 @@
48287
50553
  "$value": {
48288
50554
  "color": "{base.color.neutral.0}",
48289
50555
  "alpha": 0.8,
48290
- "offsetX": "0px",
48291
- "offsetY": "1px",
48292
- "blur": "1px",
48293
- "spread": "0px",
50556
+ "offsetX": {
50557
+ "value": 0,
50558
+ "unit": "px"
50559
+ },
50560
+ "offsetY": {
50561
+ "value": 1,
50562
+ "unit": "px"
50563
+ },
50564
+ "blur": {
50565
+ "value": 1,
50566
+ "unit": "px"
50567
+ },
50568
+ "spread": {
50569
+ "value": 0,
50570
+ "unit": "px"
50571
+ },
48294
50572
  "inset": false
48295
50573
  },
48296
50574
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48297
50575
  "isSource": true,
48298
50576
  "$type": "shadow"
48299
50577
  }
50578
+ },
50579
+ "org.primer.llm": {
50580
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50581
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48300
50582
  }
48301
50583
  },
48302
50584
  "key": "{shadow.resting.xsmall}"
@@ -48304,8 +50586,9 @@
48304
50586
  "name": "shadow-resting-xsmall",
48305
50587
  "attributes": {},
48306
50588
  "path": ["shadow", "resting", "xsmall"],
48307
- "value": "0px 1px 1px 0px #1f23280f",
48308
- "type": "shadow"
50589
+ "value": "0 1px 1px 0 #1f23280d",
50590
+ "type": "shadow",
50591
+ "description": "Extra small resting shadow for minimal elevation"
48309
50592
  },
48310
50593
  "sideNav-bgColor-selected": {
48311
50594
  "key": "{sideNav.bgColor.selected}",