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