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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
package/dist/docs/functional/themes/dark-colorblind.json CHANGED
@@ -178,10 +178,22 @@
178
178
  {
179
179
  "color": "#0d1117",
180
180
  "alpha": 1,
181
- "offsetX": "0px",
182
- "offsetY": "0px",
183
- "blur": "0px",
184
- "spread": "2px"
181
+ "offsetX": {
182
+ "value": 0,
183
+ "unit": "px"
184
+ },
185
+ "offsetY": {
186
+ "value": 0,
187
+ "unit": "px"
188
+ },
189
+ "blur": {
190
+ "value": 0,
191
+ "unit": "px"
192
+ },
193
+ "spread": {
194
+ "value": 2,
195
+ "unit": "px"
196
+ }
185
197
  }
186
198
  ],
187
199
  "filePath": "src/tokens/component/avatar.json5",
@@ -197,10 +209,22 @@
197
209
  {
198
210
  "color": "{base.color.neutral.1}",
199
211
  "alpha": 1,
200
- "offsetX": "0px",
201
- "offsetY": "0px",
202
- "blur": "0px",
203
- "spread": "2px"
212
+ "offsetX": {
213
+ "value": 0,
214
+ "unit": "px"
215
+ },
216
+ "offsetY": {
217
+ "value": 0,
218
+ "unit": "px"
219
+ },
220
+ "blur": {
221
+ "value": 0,
222
+ "unit": "px"
223
+ },
224
+ "spread": {
225
+ "value": 2,
226
+ "unit": "px"
227
+ }
204
228
  }
205
229
  ],
206
230
  "$type": "shadow",
@@ -215,10 +239,22 @@
215
239
  {
216
240
  "color": "{base.color.neutral.1}",
217
241
  "alpha": 1,
218
- "offsetX": "0px",
219
- "offsetY": "0px",
220
- "blur": "0px",
221
- "spread": "2px"
242
+ "offsetX": {
243
+ "value": 0,
244
+ "unit": "px"
245
+ },
246
+ "offsetY": {
247
+ "value": 0,
248
+ "unit": "px"
249
+ },
250
+ "blur": {
251
+ "value": 0,
252
+ "unit": "px"
253
+ },
254
+ "spread": {
255
+ "value": 2,
256
+ "unit": "px"
257
+ }
222
258
  }
223
259
  ],
224
260
  "filePath": "src/tokens/component/avatar.json5",
@@ -232,7 +268,7 @@
232
268
  "name": "avatar-shadow",
233
269
  "attributes": {},
234
270
  "path": ["avatar", "shadow"],
235
- "value": "0px 0px 0px 2px #0d1117",
271
+ "value": "0 0 0 2px #0d1117",
236
272
  "type": "shadow"
237
273
  },
238
274
  "avatarStack-fade-bgColor-default": {
@@ -549,6 +585,10 @@
549
585
  },
550
586
  "org.primer.overrides": {
551
587
  "dark": "#010409"
588
+ },
589
+ "org.primer.llm": {
590
+ "doNotUse": true,
591
+ "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."
552
592
  }
553
593
  },
554
594
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -565,6 +605,10 @@
565
605
  },
566
606
  "org.primer.overrides": {
567
607
  "dark": "{base.color.neutral.0}"
608
+ },
609
+ "org.primer.llm": {
610
+ "doNotUse": true,
611
+ "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."
568
612
  }
569
613
  },
570
614
  "key": "{bgColor.black}"
@@ -2457,6 +2501,10 @@
2457
2501
  },
2458
2502
  "org.primer.overrides": {
2459
2503
  "dark": "#ffffff"
2504
+ },
2505
+ "org.primer.llm": {
2506
+ "doNotUse": true,
2507
+ "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."
2460
2508
  }
2461
2509
  },
2462
2510
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2473,6 +2521,10 @@
2473
2521
  },
2474
2522
  "org.primer.overrides": {
2475
2523
  "dark": "{base.color.neutral.13}"
2524
+ },
2525
+ "org.primer.llm": {
2526
+ "doNotUse": true,
2527
+ "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."
2476
2528
  }
2477
2529
  },
2478
2530
  "key": "{bgColor.white}"
@@ -6967,10 +7019,22 @@
6967
7019
  {
6968
7020
  "color": "#3d1300",
6969
7021
  "alpha": 0.2,
6970
- "offsetX": "0px",
6971
- "offsetY": "1px",
6972
- "blur": "0px",
6973
- "spread": "0px",
7022
+ "offsetX": {
7023
+ "value": 0,
7024
+ "unit": "px"
7025
+ },
7026
+ "offsetY": {
7027
+ "value": 1,
7028
+ "unit": "px"
7029
+ },
7030
+ "blur": {
7031
+ "value": 0,
7032
+ "unit": "px"
7033
+ },
7034
+ "spread": {
7035
+ "value": 0,
7036
+ "unit": "px"
7037
+ },
6974
7038
  "inset": true
6975
7039
  }
6976
7040
  ],
@@ -6983,10 +7047,22 @@
6983
7047
  {
6984
7048
  "color": "#00000000",
6985
7049
  "alpha": 0,
6986
- "offsetX": "0px",
6987
- "offsetY": "0px",
6988
- "blur": "0px",
6989
- "spread": "0px",
7050
+ "offsetX": {
7051
+ "value": 0,
7052
+ "unit": "px"
7053
+ },
7054
+ "offsetY": {
7055
+ "value": 0,
7056
+ "unit": "px"
7057
+ },
7058
+ "blur": {
7059
+ "value": 0,
7060
+ "unit": "px"
7061
+ },
7062
+ "spread": {
7063
+ "value": 0,
7064
+ "unit": "px"
7065
+ },
6990
7066
  "inset": false
6991
7067
  }
6992
7068
  ],
@@ -7003,10 +7079,22 @@
7003
7079
  {
7004
7080
  "color": "{base.color.transparent}",
7005
7081
  "alpha": 0,
7006
- "offsetX": "0px",
7007
- "offsetY": "0px",
7008
- "blur": "0px",
7009
- "spread": "0px",
7082
+ "offsetX": {
7083
+ "value": 0,
7084
+ "unit": "px"
7085
+ },
7086
+ "offsetY": {
7087
+ "value": 0,
7088
+ "unit": "px"
7089
+ },
7090
+ "blur": {
7091
+ "value": 0,
7092
+ "unit": "px"
7093
+ },
7094
+ "spread": {
7095
+ "value": 0,
7096
+ "unit": "px"
7097
+ },
7010
7098
  "inset": false
7011
7099
  }
7012
7100
  ],
@@ -7022,10 +7110,22 @@
7022
7110
  {
7023
7111
  "color": "{base.color.orange.9}",
7024
7112
  "alpha": 0.2,
7025
- "offsetX": "0px",
7026
- "offsetY": "1px",
7027
- "blur": "0px",
7028
- "spread": "0px",
7113
+ "offsetX": {
7114
+ "value": 0,
7115
+ "unit": "px"
7116
+ },
7117
+ "offsetY": {
7118
+ "value": 1,
7119
+ "unit": "px"
7120
+ },
7121
+ "blur": {
7122
+ "value": 0,
7123
+ "unit": "px"
7124
+ },
7125
+ "spread": {
7126
+ "value": 0,
7127
+ "unit": "px"
7128
+ },
7029
7129
  "inset": true
7030
7130
  }
7031
7131
  ],
@@ -7038,10 +7138,22 @@
7038
7138
  {
7039
7139
  "color": "{base.color.transparent}",
7040
7140
  "alpha": 0,
7041
- "offsetX": "0px",
7042
- "offsetY": "0px",
7043
- "blur": "0px",
7044
- "spread": "0px",
7141
+ "offsetX": {
7142
+ "value": 0,
7143
+ "unit": "px"
7144
+ },
7145
+ "offsetY": {
7146
+ "value": 0,
7147
+ "unit": "px"
7148
+ },
7149
+ "blur": {
7150
+ "value": 0,
7151
+ "unit": "px"
7152
+ },
7153
+ "spread": {
7154
+ "value": 0,
7155
+ "unit": "px"
7156
+ },
7045
7157
  "inset": false
7046
7158
  }
7047
7159
  ],
@@ -7056,7 +7168,7 @@
7056
7168
  "name": "button-danger-shadow-selected",
7057
7169
  "attributes": {},
7058
7170
  "path": ["button", "danger", "shadow", "selected"],
7059
- "value": "0px 0px 0px 0px #000000",
7171
+ "value": "0 0 0 0 #00000000",
7060
7172
  "type": "shadow"
7061
7173
  },
7062
7174
  "button-default-bgColor-active": {
@@ -7430,10 +7542,22 @@
7430
7542
  {
7431
7543
  "color": "#00000000",
7432
7544
  "alpha": 0,
7433
- "offsetX": "0px",
7434
- "offsetY": "0px",
7435
- "blur": "0px",
7436
- "spread": "0px",
7545
+ "offsetX": {
7546
+ "value": 0,
7547
+ "unit": "px"
7548
+ },
7549
+ "offsetY": {
7550
+ "value": 0,
7551
+ "unit": "px"
7552
+ },
7553
+ "blur": {
7554
+ "value": 0,
7555
+ "unit": "px"
7556
+ },
7557
+ "spread": {
7558
+ "value": 0,
7559
+ "unit": "px"
7560
+ },
7437
7561
  "inset": false
7438
7562
  }
7439
7563
  ],
@@ -7450,10 +7574,22 @@
7450
7574
  {
7451
7575
  "color": "{base.color.transparent}",
7452
7576
  "alpha": 0,
7453
- "offsetX": "0px",
7454
- "offsetY": "0px",
7455
- "blur": "0px",
7456
- "spread": "0px",
7577
+ "offsetX": {
7578
+ "value": 0,
7579
+ "unit": "px"
7580
+ },
7581
+ "offsetY": {
7582
+ "value": 0,
7583
+ "unit": "px"
7584
+ },
7585
+ "blur": {
7586
+ "value": 0,
7587
+ "unit": "px"
7588
+ },
7589
+ "spread": {
7590
+ "value": 0,
7591
+ "unit": "px"
7592
+ },
7457
7593
  "inset": false
7458
7594
  }
7459
7595
  ],
@@ -7469,10 +7605,22 @@
7469
7605
  {
7470
7606
  "color": "{base.color.transparent}",
7471
7607
  "alpha": 0,
7472
- "offsetX": "0px",
7473
- "offsetY": "0px",
7474
- "blur": "0px",
7475
- "spread": "0px",
7608
+ "offsetX": {
7609
+ "value": 0,
7610
+ "unit": "px"
7611
+ },
7612
+ "offsetY": {
7613
+ "value": 0,
7614
+ "unit": "px"
7615
+ },
7616
+ "blur": {
7617
+ "value": 0,
7618
+ "unit": "px"
7619
+ },
7620
+ "spread": {
7621
+ "value": 0,
7622
+ "unit": "px"
7623
+ },
7476
7624
  "inset": false
7477
7625
  }
7478
7626
  ],
@@ -7487,7 +7635,7 @@
7487
7635
  "name": "button-default-shadow-resting",
7488
7636
  "attributes": {},
7489
7637
  "path": ["button", "default", "shadow", "resting"],
7490
- "value": "0px 0px 0px 0px #000000",
7638
+ "value": "0 0 0 0 #00000000",
7491
7639
  "type": "shadow"
7492
7640
  },
7493
7641
  "button-inactive-bgColor": {
@@ -9189,10 +9337,22 @@
9189
9337
  {
9190
9338
  "color": "#00000000",
9191
9339
  "alpha": 0,
9192
- "offsetX": "0px",
9193
- "offsetY": "0px",
9194
- "blur": "0px",
9195
- "spread": "0px",
9340
+ "offsetX": {
9341
+ "value": 0,
9342
+ "unit": "px"
9343
+ },
9344
+ "offsetY": {
9345
+ "value": 0,
9346
+ "unit": "px"
9347
+ },
9348
+ "blur": {
9349
+ "value": 0,
9350
+ "unit": "px"
9351
+ },
9352
+ "spread": {
9353
+ "value": 0,
9354
+ "unit": "px"
9355
+ },
9196
9356
  "inset": false
9197
9357
  }
9198
9358
  ],
@@ -9209,10 +9369,22 @@
9209
9369
  {
9210
9370
  "color": "{base.color.transparent}",
9211
9371
  "alpha": 0,
9212
- "offsetX": "0px",
9213
- "offsetY": "0px",
9214
- "blur": "0px",
9215
- "spread": "0px",
9372
+ "offsetX": {
9373
+ "value": 0,
9374
+ "unit": "px"
9375
+ },
9376
+ "offsetY": {
9377
+ "value": 0,
9378
+ "unit": "px"
9379
+ },
9380
+ "blur": {
9381
+ "value": 0,
9382
+ "unit": "px"
9383
+ },
9384
+ "spread": {
9385
+ "value": 0,
9386
+ "unit": "px"
9387
+ },
9216
9388
  "inset": false
9217
9389
  }
9218
9390
  ],
@@ -9228,10 +9400,22 @@
9228
9400
  {
9229
9401
  "color": "{base.color.transparent}",
9230
9402
  "alpha": 0,
9231
- "offsetX": "0px",
9232
- "offsetY": "0px",
9233
- "blur": "0px",
9234
- "spread": "0px",
9403
+ "offsetX": {
9404
+ "value": 0,
9405
+ "unit": "px"
9406
+ },
9407
+ "offsetY": {
9408
+ "value": 0,
9409
+ "unit": "px"
9410
+ },
9411
+ "blur": {
9412
+ "value": 0,
9413
+ "unit": "px"
9414
+ },
9415
+ "spread": {
9416
+ "value": 0,
9417
+ "unit": "px"
9418
+ },
9235
9419
  "inset": false
9236
9420
  }
9237
9421
  ],
@@ -9246,7 +9430,7 @@
9246
9430
  "name": "button-outline-shadow-selected",
9247
9431
  "attributes": {},
9248
9432
  "path": ["button", "outline", "shadow", "selected"],
9249
- "value": "0px 0px 0px 0px #000000",
9433
+ "value": "0 0 0 0 #00000000",
9250
9434
  "type": "shadow"
9251
9435
  },
9252
9436
  "button-primary-bgColor-active": {
@@ -10395,10 +10579,22 @@
10395
10579
  {
10396
10580
  "color": "#051d4d",
10397
10581
  "alpha": 0.3,
10398
- "offsetX": "0px",
10399
- "offsetY": "1px",
10400
- "blur": "0px",
10401
- "spread": "0px",
10582
+ "offsetX": {
10583
+ "value": 0,
10584
+ "unit": "px"
10585
+ },
10586
+ "offsetY": {
10587
+ "value": 1,
10588
+ "unit": "px"
10589
+ },
10590
+ "blur": {
10591
+ "value": 0,
10592
+ "unit": "px"
10593
+ },
10594
+ "spread": {
10595
+ "value": 0,
10596
+ "unit": "px"
10597
+ },
10402
10598
  "inset": true
10403
10599
  }
10404
10600
  ],
@@ -10411,10 +10607,22 @@
10411
10607
  {
10412
10608
  "color": "#051d4d",
10413
10609
  "alpha": 0.3,
10414
- "offsetX": "0px",
10415
- "offsetY": "1px",
10416
- "blur": "0px",
10417
- "spread": "0px",
10610
+ "offsetX": {
10611
+ "value": 0,
10612
+ "unit": "px"
10613
+ },
10614
+ "offsetY": {
10615
+ "value": 1,
10616
+ "unit": "px"
10617
+ },
10618
+ "blur": {
10619
+ "value": 0,
10620
+ "unit": "px"
10621
+ },
10622
+ "spread": {
10623
+ "value": 0,
10624
+ "unit": "px"
10625
+ },
10418
10626
  "inset": true
10419
10627
  }
10420
10628
  ],
@@ -10427,10 +10635,22 @@
10427
10635
  {
10428
10636
  "color": "#00000000",
10429
10637
  "alpha": 0,
10430
- "offsetX": "0px",
10431
- "offsetY": "0px",
10432
- "blur": "0px",
10433
- "spread": "0px",
10638
+ "offsetX": {
10639
+ "value": 0,
10640
+ "unit": "px"
10641
+ },
10642
+ "offsetY": {
10643
+ "value": 0,
10644
+ "unit": "px"
10645
+ },
10646
+ "blur": {
10647
+ "value": 0,
10648
+ "unit": "px"
10649
+ },
10650
+ "spread": {
10651
+ "value": 0,
10652
+ "unit": "px"
10653
+ },
10434
10654
  "inset": false
10435
10655
  }
10436
10656
  ],
@@ -10447,10 +10667,22 @@
10447
10667
  {
10448
10668
  "color": "{base.color.transparent}",
10449
10669
  "alpha": 0,
10450
- "offsetX": "0px",
10451
- "offsetY": "0px",
10452
- "blur": "0px",
10453
- "spread": "0px",
10670
+ "offsetX": {
10671
+ "value": 0,
10672
+ "unit": "px"
10673
+ },
10674
+ "offsetY": {
10675
+ "value": 0,
10676
+ "unit": "px"
10677
+ },
10678
+ "blur": {
10679
+ "value": 0,
10680
+ "unit": "px"
10681
+ },
10682
+ "spread": {
10683
+ "value": 0,
10684
+ "unit": "px"
10685
+ },
10454
10686
  "inset": false
10455
10687
  }
10456
10688
  ],
@@ -10466,10 +10698,22 @@
10466
10698
  {
10467
10699
  "color": "{base.color.blue.9}",
10468
10700
  "alpha": 0.3,
10469
- "offsetX": "0px",
10470
- "offsetY": "1px",
10471
- "blur": "0px",
10472
- "spread": "0px",
10701
+ "offsetX": {
10702
+ "value": 0,
10703
+ "unit": "px"
10704
+ },
10705
+ "offsetY": {
10706
+ "value": 1,
10707
+ "unit": "px"
10708
+ },
10709
+ "blur": {
10710
+ "value": 0,
10711
+ "unit": "px"
10712
+ },
10713
+ "spread": {
10714
+ "value": 0,
10715
+ "unit": "px"
10716
+ },
10473
10717
  "inset": true
10474
10718
  }
10475
10719
  ],
@@ -10482,10 +10726,22 @@
10482
10726
  {
10483
10727
  "color": "{base.color.blue.9}",
10484
10728
  "alpha": 0.3,
10485
- "offsetX": "0px",
10486
- "offsetY": "1px",
10487
- "blur": "0px",
10488
- "spread": "0px",
10729
+ "offsetX": {
10730
+ "value": 0,
10731
+ "unit": "px"
10732
+ },
10733
+ "offsetY": {
10734
+ "value": 1,
10735
+ "unit": "px"
10736
+ },
10737
+ "blur": {
10738
+ "value": 0,
10739
+ "unit": "px"
10740
+ },
10741
+ "spread": {
10742
+ "value": 0,
10743
+ "unit": "px"
10744
+ },
10489
10745
  "inset": true
10490
10746
  }
10491
10747
  ],
@@ -10498,10 +10754,22 @@
10498
10754
  {
10499
10755
  "color": "{base.color.transparent}",
10500
10756
  "alpha": 0,
10501
- "offsetX": "0px",
10502
- "offsetY": "0px",
10503
- "blur": "0px",
10504
- "spread": "0px",
10757
+ "offsetX": {
10758
+ "value": 0,
10759
+ "unit": "px"
10760
+ },
10761
+ "offsetY": {
10762
+ "value": 0,
10763
+ "unit": "px"
10764
+ },
10765
+ "blur": {
10766
+ "value": 0,
10767
+ "unit": "px"
10768
+ },
10769
+ "spread": {
10770
+ "value": 0,
10771
+ "unit": "px"
10772
+ },
10505
10773
  "inset": false
10506
10774
  }
10507
10775
  ],
@@ -10516,7 +10784,7 @@
10516
10784
  "name": "button-primary-shadow-selected",
10517
10785
  "attributes": {},
10518
10786
  "path": ["button", "primary", "shadow", "selected"],
10519
- "value": "0px 0px 0px 0px #000000",
10787
+ "value": "0 0 0 0 #00000000",
10520
10788
  "type": "shadow"
10521
10789
  },
10522
10790
  "button-star-iconColor": {
@@ -37253,6 +37521,10 @@
37253
37521
  },
37254
37522
  "org.primer.overrides": {
37255
37523
  "dark": "#010409"
37524
+ },
37525
+ "org.primer.llm": {
37526
+ "doNotUse": true,
37527
+ "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."
37256
37528
  }
37257
37529
  },
37258
37530
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37269,6 +37541,10 @@
37269
37541
  },
37270
37542
  "org.primer.overrides": {
37271
37543
  "dark": "{base.color.neutral.0}"
37544
+ },
37545
+ "org.primer.llm": {
37546
+ "doNotUse": true,
37547
+ "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."
37272
37548
  }
37273
37549
  },
37274
37550
  "key": "{fgColor.black}"
@@ -38242,6 +38518,10 @@
38242
38518
  },
38243
38519
  "org.primer.overrides": {
38244
38520
  "dark": "#ffffff"
38521
+ },
38522
+ "org.primer.llm": {
38523
+ "doNotUse": true,
38524
+ "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."
38245
38525
  }
38246
38526
  },
38247
38527
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38258,6 +38538,10 @@
38258
38538
  },
38259
38539
  "org.primer.overrides": {
38260
38540
  "dark": "{base.color.neutral.13}"
38541
+ },
38542
+ "org.primer.llm": {
38543
+ "doNotUse": true,
38544
+ "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."
38261
38545
  }
38262
38546
  },
38263
38547
  "key": "{fgColor.white}"
@@ -38283,7 +38567,10 @@
38283
38567
  "$value": {
38284
38568
  "color": "{focus.outlineColor}",
38285
38569
  "style": "solid",
38286
- "width": "2px"
38570
+ "width": {
38571
+ "value": 2,
38572
+ "unit": "px"
38573
+ }
38287
38574
  },
38288
38575
  "$type": "border",
38289
38576
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47456,18 +47743,183 @@
47456
47743
  {
47457
47744
  "color": "#3d444db3",
47458
47745
  "alpha": 1,
47459
- "offsetX": "0px",
47460
- "offsetY": "0px",
47461
- "blur": "0px",
47462
- "spread": "1px"
47746
+ "offsetX": {
47747
+ "value": 0,
47748
+ "unit": "px"
47749
+ },
47750
+ "offsetY": {
47751
+ "value": 0,
47752
+ "unit": "px"
47753
+ },
47754
+ "blur": {
47755
+ "value": 0,
47756
+ "unit": "px"
47757
+ },
47758
+ "spread": {
47759
+ "value": 1,
47760
+ "unit": "px"
47761
+ }
47463
47762
  },
47464
47763
  {
47465
47764
  "color": "#010409",
47466
47765
  "alpha": 1,
47467
- "offsetX": "0px",
47468
- "offsetY": "24px",
47469
- "blur": "48px",
47470
- "spread": "0px"
47766
+ "offsetX": {
47767
+ "value": 0,
47768
+ "unit": "px"
47769
+ },
47770
+ "offsetY": {
47771
+ "value": 24,
47772
+ "unit": "px"
47773
+ },
47774
+ "blur": {
47775
+ "value": 48,
47776
+ "unit": "px"
47777
+ },
47778
+ "spread": {
47779
+ "value": 0,
47780
+ "unit": "px"
47781
+ }
47782
+ }
47783
+ ],
47784
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47785
+ "isSource": true,
47786
+ "$type": "shadow"
47787
+ },
47788
+ "light-high-contrast": {
47789
+ "$value": [
47790
+ {
47791
+ "color": "#3d444db3",
47792
+ "alpha": 1,
47793
+ "offsetX": {
47794
+ "value": 0,
47795
+ "unit": "px"
47796
+ },
47797
+ "offsetY": {
47798
+ "value": 0,
47799
+ "unit": "px"
47800
+ },
47801
+ "blur": {
47802
+ "value": 0,
47803
+ "unit": "px"
47804
+ },
47805
+ "spread": {
47806
+ "value": 1,
47807
+ "unit": "px"
47808
+ }
47809
+ },
47810
+ {
47811
+ "color": "#f0f6fc",
47812
+ "alpha": 0.24,
47813
+ "offsetX": {
47814
+ "value": 0,
47815
+ "unit": "px"
47816
+ },
47817
+ "offsetY": {
47818
+ "value": 40,
47819
+ "unit": "px"
47820
+ },
47821
+ "blur": {
47822
+ "value": 80,
47823
+ "unit": "px"
47824
+ },
47825
+ "spread": {
47826
+ "value": 0,
47827
+ "unit": "px"
47828
+ }
47829
+ }
47830
+ ],
47831
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47832
+ "isSource": true,
47833
+ "$type": "shadow"
47834
+ },
47835
+ "light-protanopia-deuteranopia-high-contrast": {
47836
+ "$value": [
47837
+ {
47838
+ "color": "#3d444db3",
47839
+ "alpha": 1,
47840
+ "offsetX": {
47841
+ "value": 0,
47842
+ "unit": "px"
47843
+ },
47844
+ "offsetY": {
47845
+ "value": 0,
47846
+ "unit": "px"
47847
+ },
47848
+ "blur": {
47849
+ "value": 0,
47850
+ "unit": "px"
47851
+ },
47852
+ "spread": {
47853
+ "value": 1,
47854
+ "unit": "px"
47855
+ }
47856
+ },
47857
+ {
47858
+ "color": "#f0f6fc",
47859
+ "alpha": 0.24,
47860
+ "offsetX": {
47861
+ "value": 0,
47862
+ "unit": "px"
47863
+ },
47864
+ "offsetY": {
47865
+ "value": 40,
47866
+ "unit": "px"
47867
+ },
47868
+ "blur": {
47869
+ "value": 80,
47870
+ "unit": "px"
47871
+ },
47872
+ "spread": {
47873
+ "value": 0,
47874
+ "unit": "px"
47875
+ }
47876
+ }
47877
+ ],
47878
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47879
+ "isSource": true,
47880
+ "$type": "shadow"
47881
+ },
47882
+ "light-tritanopia-high-contrast": {
47883
+ "$value": [
47884
+ {
47885
+ "color": "#3d444db3",
47886
+ "alpha": 1,
47887
+ "offsetX": {
47888
+ "value": 0,
47889
+ "unit": "px"
47890
+ },
47891
+ "offsetY": {
47892
+ "value": 0,
47893
+ "unit": "px"
47894
+ },
47895
+ "blur": {
47896
+ "value": 0,
47897
+ "unit": "px"
47898
+ },
47899
+ "spread": {
47900
+ "value": 1,
47901
+ "unit": "px"
47902
+ }
47903
+ },
47904
+ {
47905
+ "color": "#f0f6fc",
47906
+ "alpha": 0.24,
47907
+ "offsetX": {
47908
+ "value": 0,
47909
+ "unit": "px"
47910
+ },
47911
+ "offsetY": {
47912
+ "value": 40,
47913
+ "unit": "px"
47914
+ },
47915
+ "blur": {
47916
+ "value": 80,
47917
+ "unit": "px"
47918
+ },
47919
+ "spread": {
47920
+ "value": 0,
47921
+ "unit": "px"
47922
+ }
47471
47923
  }
47472
47924
  ],
47473
47925
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47487,18 +47939,42 @@
47487
47939
  {
47488
47940
  "color": "{overlay.borderColor}",
47489
47941
  "alpha": 1,
47490
- "offsetX": "0px",
47491
- "offsetY": "0px",
47492
- "blur": "0px",
47493
- "spread": "1px"
47942
+ "offsetX": {
47943
+ "value": 0,
47944
+ "unit": "px"
47945
+ },
47946
+ "offsetY": {
47947
+ "value": 0,
47948
+ "unit": "px"
47949
+ },
47950
+ "blur": {
47951
+ "value": 0,
47952
+ "unit": "px"
47953
+ },
47954
+ "spread": {
47955
+ "value": 1,
47956
+ "unit": "px"
47957
+ }
47494
47958
  },
47495
47959
  {
47496
47960
  "color": "{base.color.neutral.0}",
47497
47961
  "alpha": 1,
47498
- "offsetX": "0px",
47499
- "offsetY": "24px",
47500
- "blur": "48px",
47501
- "spread": "0px"
47962
+ "offsetX": {
47963
+ "value": 0,
47964
+ "unit": "px"
47965
+ },
47966
+ "offsetY": {
47967
+ "value": 24,
47968
+ "unit": "px"
47969
+ },
47970
+ "blur": {
47971
+ "value": 48,
47972
+ "unit": "px"
47973
+ },
47974
+ "spread": {
47975
+ "value": 0,
47976
+ "unit": "px"
47977
+ }
47502
47978
  }
47503
47979
  ],
47504
47980
  "$type": "shadow",
@@ -47514,18 +47990,183 @@
47514
47990
  {
47515
47991
  "color": "{overlay.borderColor}",
47516
47992
  "alpha": 1,
47517
- "offsetX": "0px",
47518
- "offsetY": "0px",
47519
- "blur": "0px",
47520
- "spread": "1px"
47993
+ "offsetX": {
47994
+ "value": 0,
47995
+ "unit": "px"
47996
+ },
47997
+ "offsetY": {
47998
+ "value": 0,
47999
+ "unit": "px"
48000
+ },
48001
+ "blur": {
48002
+ "value": 0,
48003
+ "unit": "px"
48004
+ },
48005
+ "spread": {
48006
+ "value": 1,
48007
+ "unit": "px"
48008
+ }
47521
48009
  },
47522
48010
  {
47523
48011
  "color": "{base.color.neutral.0}",
47524
48012
  "alpha": 1,
47525
- "offsetX": "0px",
47526
- "offsetY": "24px",
47527
- "blur": "48px",
47528
- "spread": "0px"
48013
+ "offsetX": {
48014
+ "value": 0,
48015
+ "unit": "px"
48016
+ },
48017
+ "offsetY": {
48018
+ "value": 24,
48019
+ "unit": "px"
48020
+ },
48021
+ "blur": {
48022
+ "value": 48,
48023
+ "unit": "px"
48024
+ },
48025
+ "spread": {
48026
+ "value": 0,
48027
+ "unit": "px"
48028
+ }
48029
+ }
48030
+ ],
48031
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48032
+ "isSource": true,
48033
+ "$type": "shadow"
48034
+ },
48035
+ "light-high-contrast": {
48036
+ "$value": [
48037
+ {
48038
+ "color": "{overlay.borderColor}",
48039
+ "alpha": 1,
48040
+ "offsetX": {
48041
+ "value": 0,
48042
+ "unit": "px"
48043
+ },
48044
+ "offsetY": {
48045
+ "value": 0,
48046
+ "unit": "px"
48047
+ },
48048
+ "blur": {
48049
+ "value": 0,
48050
+ "unit": "px"
48051
+ },
48052
+ "spread": {
48053
+ "value": 1,
48054
+ "unit": "px"
48055
+ }
48056
+ },
48057
+ {
48058
+ "color": "{base.color.neutral.12}",
48059
+ "alpha": 0.24,
48060
+ "offsetX": {
48061
+ "value": 0,
48062
+ "unit": "px"
48063
+ },
48064
+ "offsetY": {
48065
+ "value": 40,
48066
+ "unit": "px"
48067
+ },
48068
+ "blur": {
48069
+ "value": 80,
48070
+ "unit": "px"
48071
+ },
48072
+ "spread": {
48073
+ "value": 0,
48074
+ "unit": "px"
48075
+ }
48076
+ }
48077
+ ],
48078
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48079
+ "isSource": true,
48080
+ "$type": "shadow"
48081
+ },
48082
+ "light-protanopia-deuteranopia-high-contrast": {
48083
+ "$value": [
48084
+ {
48085
+ "color": "{overlay.borderColor}",
48086
+ "alpha": 1,
48087
+ "offsetX": {
48088
+ "value": 0,
48089
+ "unit": "px"
48090
+ },
48091
+ "offsetY": {
48092
+ "value": 0,
48093
+ "unit": "px"
48094
+ },
48095
+ "blur": {
48096
+ "value": 0,
48097
+ "unit": "px"
48098
+ },
48099
+ "spread": {
48100
+ "value": 1,
48101
+ "unit": "px"
48102
+ }
48103
+ },
48104
+ {
48105
+ "color": "{base.color.neutral.12}",
48106
+ "alpha": 0.24,
48107
+ "offsetX": {
48108
+ "value": 0,
48109
+ "unit": "px"
48110
+ },
48111
+ "offsetY": {
48112
+ "value": 40,
48113
+ "unit": "px"
48114
+ },
48115
+ "blur": {
48116
+ "value": 80,
48117
+ "unit": "px"
48118
+ },
48119
+ "spread": {
48120
+ "value": 0,
48121
+ "unit": "px"
48122
+ }
48123
+ }
48124
+ ],
48125
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48126
+ "isSource": true,
48127
+ "$type": "shadow"
48128
+ },
48129
+ "light-tritanopia-high-contrast": {
48130
+ "$value": [
48131
+ {
48132
+ "color": "{overlay.borderColor}",
48133
+ "alpha": 1,
48134
+ "offsetX": {
48135
+ "value": 0,
48136
+ "unit": "px"
48137
+ },
48138
+ "offsetY": {
48139
+ "value": 0,
48140
+ "unit": "px"
48141
+ },
48142
+ "blur": {
48143
+ "value": 0,
48144
+ "unit": "px"
48145
+ },
48146
+ "spread": {
48147
+ "value": 1,
48148
+ "unit": "px"
48149
+ }
48150
+ },
48151
+ {
48152
+ "color": "{base.color.neutral.12}",
48153
+ "alpha": 0.24,
48154
+ "offsetX": {
48155
+ "value": 0,
48156
+ "unit": "px"
48157
+ },
48158
+ "offsetY": {
48159
+ "value": 40,
48160
+ "unit": "px"
48161
+ },
48162
+ "blur": {
48163
+ "value": 80,
48164
+ "unit": "px"
48165
+ },
48166
+ "spread": {
48167
+ "value": 0,
48168
+ "unit": "px"
48169
+ }
47529
48170
  }
47530
48171
  ],
47531
48172
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47543,7 +48184,7 @@
47543
48184
  "name": "shadow-floating-large",
47544
48185
  "attributes": {},
47545
48186
  "path": ["shadow", "floating", "large"],
47546
- "value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
48187
+ "value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47547
48188
  "type": "shadow",
47548
48189
  "description": "Large floating shadow for modals and dialogs"
47549
48190
  },
@@ -47557,24 +48198,52 @@
47557
48198
  {
47558
48199
  "color": "#010409",
47559
48200
  "alpha": 0.4,
47560
- "offsetX": "0px",
47561
- "offsetY": "6px",
47562
- "blur": "12px",
47563
- "spread": "-3px"
48201
+ "offsetX": {
48202
+ "value": 0,
48203
+ "unit": "px"
48204
+ },
48205
+ "offsetY": {
48206
+ "value": 6,
48207
+ "unit": "px"
48208
+ },
48209
+ "blur": {
48210
+ "value": 12,
48211
+ "unit": "px"
48212
+ },
48213
+ "spread": {
48214
+ "value": -3,
48215
+ "unit": "px"
48216
+ }
47564
48217
  },
47565
48218
  {
47566
48219
  "color": "#010409",
47567
48220
  "alpha": 0.4,
47568
- "offsetX": "0px",
47569
- "offsetY": "6px",
47570
- "blur": "18px",
47571
- "spread": "0px"
48221
+ "offsetX": {
48222
+ "value": 0,
48223
+ "unit": "px"
48224
+ },
48225
+ "offsetY": {
48226
+ "value": 6,
48227
+ "unit": "px"
48228
+ },
48229
+ "blur": {
48230
+ "value": 18,
48231
+ "unit": "px"
48232
+ },
48233
+ "spread": {
48234
+ "value": 0,
48235
+ "unit": "px"
48236
+ }
47572
48237
  }
47573
48238
  ],
47574
48239
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47575
48240
  "isSource": true,
47576
48241
  "$type": "shadow"
47577
48242
  }
48243
+ },
48244
+ "org.primer.llm": {
48245
+ "usage": ["legacy-component", "backward-compatibility"],
48246
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47578
48247
  }
47579
48248
  },
47580
48249
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47584,21 +48253,46 @@
47584
48253
  {
47585
48254
  "color": "{base.color.neutral.0}",
47586
48255
  "alpha": 0.4,
47587
- "offsetX": "0px",
47588
- "offsetY": "6px",
47589
- "blur": "12px",
47590
- "spread": "-3px"
48256
+ "offsetX": {
48257
+ "value": 0,
48258
+ "unit": "px"
48259
+ },
48260
+ "offsetY": {
48261
+ "value": 6,
48262
+ "unit": "px"
48263
+ },
48264
+ "blur": {
48265
+ "value": 12,
48266
+ "unit": "px"
48267
+ },
48268
+ "spread": {
48269
+ "value": -3,
48270
+ "unit": "px"
48271
+ }
47591
48272
  },
47592
48273
  {
47593
48274
  "color": "{base.color.neutral.0}",
47594
48275
  "alpha": 0.4,
47595
- "offsetX": "0px",
47596
- "offsetY": "6px",
47597
- "blur": "18px",
47598
- "spread": "0px"
48276
+ "offsetX": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "offsetY": {
48281
+ "value": 6,
48282
+ "unit": "px"
48283
+ },
48284
+ "blur": {
48285
+ "value": 18,
48286
+ "unit": "px"
48287
+ },
48288
+ "spread": {
48289
+ "value": 0,
48290
+ "unit": "px"
48291
+ }
47599
48292
  }
47600
48293
  ],
47601
48294
  "$type": "shadow",
48295
+ "$description": "Legacy floating shadow for backward compatibility",
47602
48296
  "$extensions": {
47603
48297
  "org.primer.figma": {},
47604
48298
  "org.primer.overrides": {
@@ -47607,24 +48301,52 @@
47607
48301
  {
47608
48302
  "color": "{base.color.neutral.0}",
47609
48303
  "alpha": 0.4,
47610
- "offsetX": "0px",
47611
- "offsetY": "6px",
47612
- "blur": "12px",
47613
- "spread": "-3px"
48304
+ "offsetX": {
48305
+ "value": 0,
48306
+ "unit": "px"
48307
+ },
48308
+ "offsetY": {
48309
+ "value": 6,
48310
+ "unit": "px"
48311
+ },
48312
+ "blur": {
48313
+ "value": 12,
48314
+ "unit": "px"
48315
+ },
48316
+ "spread": {
48317
+ "value": -3,
48318
+ "unit": "px"
48319
+ }
47614
48320
  },
47615
48321
  {
47616
48322
  "color": "{base.color.neutral.0}",
47617
48323
  "alpha": 0.4,
47618
- "offsetX": "0px",
47619
- "offsetY": "6px",
47620
- "blur": "18px",
47621
- "spread": "0px"
48324
+ "offsetX": {
48325
+ "value": 0,
48326
+ "unit": "px"
48327
+ },
48328
+ "offsetY": {
48329
+ "value": 6,
48330
+ "unit": "px"
48331
+ },
48332
+ "blur": {
48333
+ "value": 18,
48334
+ "unit": "px"
48335
+ },
48336
+ "spread": {
48337
+ "value": 0,
48338
+ "unit": "px"
48339
+ }
47622
48340
  }
47623
48341
  ],
47624
48342
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47625
48343
  "isSource": true,
47626
48344
  "$type": "shadow"
47627
48345
  }
48346
+ },
48347
+ "org.primer.llm": {
48348
+ "usage": ["legacy-component", "backward-compatibility"],
48349
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47628
48350
  }
47629
48351
  },
47630
48352
  "key": "{shadow.floating.legacy}"
@@ -47632,8 +48354,9 @@
47632
48354
  "name": "shadow-floating-legacy",
47633
48355
  "attributes": {},
47634
48356
  "path": ["shadow", "floating", "legacy"],
47635
- "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47636
- "type": "shadow"
48357
+ "value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
48358
+ "type": "shadow",
48359
+ "description": "Legacy floating shadow for backward compatibility"
47637
48360
  },
47638
48361
  "shadow-floating-medium": {
47639
48362
  "key": "{shadow.floating.medium}",
@@ -47648,48 +48371,433 @@
47648
48371
  {
47649
48372
  "color": "#3d444db3",
47650
48373
  "alpha": 1,
47651
- "offsetX": "0px",
47652
- "offsetY": "0px",
47653
- "blur": "0px",
47654
- "spread": "1px"
48374
+ "offsetX": {
48375
+ "value": 0,
48376
+ "unit": "px"
48377
+ },
48378
+ "offsetY": {
48379
+ "value": 0,
48380
+ "unit": "px"
48381
+ },
48382
+ "blur": {
48383
+ "value": 0,
48384
+ "unit": "px"
48385
+ },
48386
+ "spread": {
48387
+ "value": 1,
48388
+ "unit": "px"
48389
+ }
47655
48390
  },
47656
48391
  {
47657
48392
  "color": "#010409",
47658
48393
  "alpha": 0.4,
47659
- "offsetX": "0px",
47660
- "offsetY": "8px",
47661
- "blur": "16px",
47662
- "spread": "-4px"
48394
+ "offsetX": {
48395
+ "value": 0,
48396
+ "unit": "px"
48397
+ },
48398
+ "offsetY": {
48399
+ "value": 8,
48400
+ "unit": "px"
48401
+ },
48402
+ "blur": {
48403
+ "value": 16,
48404
+ "unit": "px"
48405
+ },
48406
+ "spread": {
48407
+ "value": -4,
48408
+ "unit": "px"
48409
+ }
47663
48410
  },
47664
48411
  {
47665
48412
  "color": "#010409",
47666
48413
  "alpha": 0.4,
47667
- "offsetX": "0px",
47668
- "offsetY": "4px",
47669
- "blur": "32px",
47670
- "spread": "-4px"
48414
+ "offsetX": {
48415
+ "value": 0,
48416
+ "unit": "px"
48417
+ },
48418
+ "offsetY": {
48419
+ "value": 4,
48420
+ "unit": "px"
48421
+ },
48422
+ "blur": {
48423
+ "value": 32,
48424
+ "unit": "px"
48425
+ },
48426
+ "spread": {
48427
+ "value": -4,
48428
+ "unit": "px"
48429
+ }
47671
48430
  },
47672
48431
  {
47673
48432
  "color": "#010409",
47674
48433
  "alpha": 0.4,
47675
- "offsetX": "0px",
47676
- "offsetY": "24px",
47677
- "blur": "48px",
47678
- "spread": "-12px"
48434
+ "offsetX": {
48435
+ "value": 0,
48436
+ "unit": "px"
48437
+ },
48438
+ "offsetY": {
48439
+ "value": 24,
48440
+ "unit": "px"
48441
+ },
48442
+ "blur": {
48443
+ "value": 48,
48444
+ "unit": "px"
48445
+ },
48446
+ "spread": {
48447
+ "value": -12,
48448
+ "unit": "px"
48449
+ }
47679
48450
  },
47680
48451
  {
47681
48452
  "color": "#010409",
47682
48453
  "alpha": 0.4,
47683
- "offsetX": "0px",
47684
- "offsetY": "48px",
47685
- "blur": "96px",
47686
- "spread": "-24px"
48454
+ "offsetX": {
48455
+ "value": 0,
48456
+ "unit": "px"
48457
+ },
48458
+ "offsetY": {
48459
+ "value": 48,
48460
+ "unit": "px"
48461
+ },
48462
+ "blur": {
48463
+ "value": 96,
48464
+ "unit": "px"
48465
+ },
48466
+ "spread": {
48467
+ "value": -24,
48468
+ "unit": "px"
48469
+ }
48470
+ }
48471
+ ],
48472
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48473
+ "isSource": true,
48474
+ "$type": "shadow"
48475
+ },
48476
+ "light-high-contrast": {
48477
+ "$value": [
48478
+ {
48479
+ "color": "#3d444db3",
48480
+ "alpha": 1,
48481
+ "offsetX": {
48482
+ "value": 0,
48483
+ "unit": "px"
48484
+ },
48485
+ "offsetY": {
48486
+ "value": 0,
48487
+ "unit": "px"
48488
+ },
48489
+ "blur": {
48490
+ "value": 0,
48491
+ "unit": "px"
48492
+ },
48493
+ "spread": {
48494
+ "value": 1,
48495
+ "unit": "px"
48496
+ }
48497
+ },
48498
+ {
48499
+ "color": "#f0f6fc",
48500
+ "alpha": 0.08,
48501
+ "offsetX": {
48502
+ "value": 0,
48503
+ "unit": "px"
48504
+ },
48505
+ "offsetY": {
48506
+ "value": 8,
48507
+ "unit": "px"
48508
+ },
48509
+ "blur": {
48510
+ "value": 16,
48511
+ "unit": "px"
48512
+ },
48513
+ "spread": {
48514
+ "value": -4,
48515
+ "unit": "px"
48516
+ }
48517
+ },
48518
+ {
48519
+ "color": "#f0f6fc",
48520
+ "alpha": 0.08,
48521
+ "offsetX": {
48522
+ "value": 0,
48523
+ "unit": "px"
48524
+ },
48525
+ "offsetY": {
48526
+ "value": 4,
48527
+ "unit": "px"
48528
+ },
48529
+ "blur": {
48530
+ "value": 32,
48531
+ "unit": "px"
48532
+ },
48533
+ "spread": {
48534
+ "value": -4,
48535
+ "unit": "px"
48536
+ }
48537
+ },
48538
+ {
48539
+ "color": "#f0f6fc",
48540
+ "alpha": 0.08,
48541
+ "offsetX": {
48542
+ "value": 0,
48543
+ "unit": "px"
48544
+ },
48545
+ "offsetY": {
48546
+ "value": 24,
48547
+ "unit": "px"
48548
+ },
48549
+ "blur": {
48550
+ "value": 48,
48551
+ "unit": "px"
48552
+ },
48553
+ "spread": {
48554
+ "value": -12,
48555
+ "unit": "px"
48556
+ }
48557
+ },
48558
+ {
48559
+ "color": "#f0f6fc",
48560
+ "alpha": 0.08,
48561
+ "offsetX": {
48562
+ "value": 0,
48563
+ "unit": "px"
48564
+ },
48565
+ "offsetY": {
48566
+ "value": 48,
48567
+ "unit": "px"
48568
+ },
48569
+ "blur": {
48570
+ "value": 96,
48571
+ "unit": "px"
48572
+ },
48573
+ "spread": {
48574
+ "value": -24,
48575
+ "unit": "px"
48576
+ }
48577
+ }
48578
+ ],
48579
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48580
+ "isSource": true,
48581
+ "$type": "shadow"
48582
+ },
48583
+ "light-protanopia-deuteranopia-high-contrast": {
48584
+ "$value": [
48585
+ {
48586
+ "color": "#3d444db3",
48587
+ "alpha": 1,
48588
+ "offsetX": {
48589
+ "value": 0,
48590
+ "unit": "px"
48591
+ },
48592
+ "offsetY": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "blur": {
48597
+ "value": 0,
48598
+ "unit": "px"
48599
+ },
48600
+ "spread": {
48601
+ "value": 1,
48602
+ "unit": "px"
48603
+ }
48604
+ },
48605
+ {
48606
+ "color": "#f0f6fc",
48607
+ "alpha": 0.08,
48608
+ "offsetX": {
48609
+ "value": 0,
48610
+ "unit": "px"
48611
+ },
48612
+ "offsetY": {
48613
+ "value": 8,
48614
+ "unit": "px"
48615
+ },
48616
+ "blur": {
48617
+ "value": 16,
48618
+ "unit": "px"
48619
+ },
48620
+ "spread": {
48621
+ "value": -4,
48622
+ "unit": "px"
48623
+ }
48624
+ },
48625
+ {
48626
+ "color": "#f0f6fc",
48627
+ "alpha": 0.08,
48628
+ "offsetX": {
48629
+ "value": 0,
48630
+ "unit": "px"
48631
+ },
48632
+ "offsetY": {
48633
+ "value": 4,
48634
+ "unit": "px"
48635
+ },
48636
+ "blur": {
48637
+ "value": 32,
48638
+ "unit": "px"
48639
+ },
48640
+ "spread": {
48641
+ "value": -4,
48642
+ "unit": "px"
48643
+ }
48644
+ },
48645
+ {
48646
+ "color": "#f0f6fc",
48647
+ "alpha": 0.08,
48648
+ "offsetX": {
48649
+ "value": 0,
48650
+ "unit": "px"
48651
+ },
48652
+ "offsetY": {
48653
+ "value": 24,
48654
+ "unit": "px"
48655
+ },
48656
+ "blur": {
48657
+ "value": 48,
48658
+ "unit": "px"
48659
+ },
48660
+ "spread": {
48661
+ "value": -12,
48662
+ "unit": "px"
48663
+ }
48664
+ },
48665
+ {
48666
+ "color": "#f0f6fc",
48667
+ "alpha": 0.08,
48668
+ "offsetX": {
48669
+ "value": 0,
48670
+ "unit": "px"
48671
+ },
48672
+ "offsetY": {
48673
+ "value": 48,
48674
+ "unit": "px"
48675
+ },
48676
+ "blur": {
48677
+ "value": 96,
48678
+ "unit": "px"
48679
+ },
48680
+ "spread": {
48681
+ "value": -24,
48682
+ "unit": "px"
48683
+ }
48684
+ }
48685
+ ],
48686
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48687
+ "isSource": true,
48688
+ "$type": "shadow"
48689
+ },
48690
+ "light-tritanopia-high-contrast": {
48691
+ "$value": [
48692
+ {
48693
+ "color": "#3d444db3",
48694
+ "alpha": 1,
48695
+ "offsetX": {
48696
+ "value": 0,
48697
+ "unit": "px"
48698
+ },
48699
+ "offsetY": {
48700
+ "value": 0,
48701
+ "unit": "px"
48702
+ },
48703
+ "blur": {
48704
+ "value": 0,
48705
+ "unit": "px"
48706
+ },
48707
+ "spread": {
48708
+ "value": 1,
48709
+ "unit": "px"
48710
+ }
48711
+ },
48712
+ {
48713
+ "color": "#f0f6fc",
48714
+ "alpha": 0.08,
48715
+ "offsetX": {
48716
+ "value": 0,
48717
+ "unit": "px"
48718
+ },
48719
+ "offsetY": {
48720
+ "value": 8,
48721
+ "unit": "px"
48722
+ },
48723
+ "blur": {
48724
+ "value": 16,
48725
+ "unit": "px"
48726
+ },
48727
+ "spread": {
48728
+ "value": -4,
48729
+ "unit": "px"
48730
+ }
48731
+ },
48732
+ {
48733
+ "color": "#f0f6fc",
48734
+ "alpha": 0.08,
48735
+ "offsetX": {
48736
+ "value": 0,
48737
+ "unit": "px"
48738
+ },
48739
+ "offsetY": {
48740
+ "value": 4,
48741
+ "unit": "px"
48742
+ },
48743
+ "blur": {
48744
+ "value": 32,
48745
+ "unit": "px"
48746
+ },
48747
+ "spread": {
48748
+ "value": -4,
48749
+ "unit": "px"
48750
+ }
48751
+ },
48752
+ {
48753
+ "color": "#f0f6fc",
48754
+ "alpha": 0.08,
48755
+ "offsetX": {
48756
+ "value": 0,
48757
+ "unit": "px"
48758
+ },
48759
+ "offsetY": {
48760
+ "value": 24,
48761
+ "unit": "px"
48762
+ },
48763
+ "blur": {
48764
+ "value": 48,
48765
+ "unit": "px"
48766
+ },
48767
+ "spread": {
48768
+ "value": -12,
48769
+ "unit": "px"
48770
+ }
48771
+ },
48772
+ {
48773
+ "color": "#f0f6fc",
48774
+ "alpha": 0.08,
48775
+ "offsetX": {
48776
+ "value": 0,
48777
+ "unit": "px"
48778
+ },
48779
+ "offsetY": {
48780
+ "value": 48,
48781
+ "unit": "px"
48782
+ },
48783
+ "blur": {
48784
+ "value": 96,
48785
+ "unit": "px"
48786
+ },
48787
+ "spread": {
48788
+ "value": -24,
48789
+ "unit": "px"
48790
+ }
47687
48791
  }
47688
48792
  ],
47689
48793
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47690
48794
  "isSource": true,
47691
48795
  "$type": "shadow"
47692
48796
  }
48797
+ },
48798
+ "org.primer.llm": {
48799
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48800
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47693
48801
  }
47694
48802
  },
47695
48803
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47699,45 +48807,106 @@
47699
48807
  {
47700
48808
  "color": "{overlay.borderColor}",
47701
48809
  "alpha": 1,
47702
- "offsetX": "0px",
47703
- "offsetY": "0px",
47704
- "blur": "0px",
47705
- "spread": "1px"
48810
+ "offsetX": {
48811
+ "value": 0,
48812
+ "unit": "px"
48813
+ },
48814
+ "offsetY": {
48815
+ "value": 0,
48816
+ "unit": "px"
48817
+ },
48818
+ "blur": {
48819
+ "value": 0,
48820
+ "unit": "px"
48821
+ },
48822
+ "spread": {
48823
+ "value": 1,
48824
+ "unit": "px"
48825
+ }
47706
48826
  },
47707
48827
  {
47708
48828
  "color": "{base.color.neutral.0}",
47709
48829
  "alpha": 0.4,
47710
- "offsetX": "0px",
47711
- "offsetY": "8px",
47712
- "blur": "16px",
47713
- "spread": "-4px"
48830
+ "offsetX": {
48831
+ "value": 0,
48832
+ "unit": "px"
48833
+ },
48834
+ "offsetY": {
48835
+ "value": 8,
48836
+ "unit": "px"
48837
+ },
48838
+ "blur": {
48839
+ "value": 16,
48840
+ "unit": "px"
48841
+ },
48842
+ "spread": {
48843
+ "value": -4,
48844
+ "unit": "px"
48845
+ }
47714
48846
  },
47715
48847
  {
47716
48848
  "color": "{base.color.neutral.0}",
47717
48849
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "4px",
47720
- "blur": "32px",
47721
- "spread": "-4px"
48850
+ "offsetX": {
48851
+ "value": 0,
48852
+ "unit": "px"
48853
+ },
48854
+ "offsetY": {
48855
+ "value": 4,
48856
+ "unit": "px"
48857
+ },
48858
+ "blur": {
48859
+ "value": 32,
48860
+ "unit": "px"
48861
+ },
48862
+ "spread": {
48863
+ "value": -4,
48864
+ "unit": "px"
48865
+ }
47722
48866
  },
47723
48867
  {
47724
48868
  "color": "{base.color.neutral.0}",
47725
48869
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "24px",
47728
- "blur": "48px",
47729
- "spread": "-12px"
48870
+ "offsetX": {
48871
+ "value": 0,
48872
+ "unit": "px"
48873
+ },
48874
+ "offsetY": {
48875
+ "value": 24,
48876
+ "unit": "px"
48877
+ },
48878
+ "blur": {
48879
+ "value": 48,
48880
+ "unit": "px"
48881
+ },
48882
+ "spread": {
48883
+ "value": -12,
48884
+ "unit": "px"
48885
+ }
47730
48886
  },
47731
48887
  {
47732
48888
  "color": "{base.color.neutral.0}",
47733
48889
  "alpha": 0.4,
47734
- "offsetX": "0px",
47735
- "offsetY": "48px",
47736
- "blur": "96px",
47737
- "spread": "-24px"
48890
+ "offsetX": {
48891
+ "value": 0,
48892
+ "unit": "px"
48893
+ },
48894
+ "offsetY": {
48895
+ "value": 48,
48896
+ "unit": "px"
48897
+ },
48898
+ "blur": {
48899
+ "value": 96,
48900
+ "unit": "px"
48901
+ },
48902
+ "spread": {
48903
+ "value": -24,
48904
+ "unit": "px"
48905
+ }
47738
48906
  }
47739
48907
  ],
47740
48908
  "$type": "shadow",
48909
+ "$description": "Medium floating shadow for popovers and action menus",
47741
48910
  "$extensions": {
47742
48911
  "org.primer.figma": {
47743
48912
  "collection": "mode",
@@ -47749,48 +48918,433 @@
47749
48918
  {
47750
48919
  "color": "{overlay.borderColor}",
47751
48920
  "alpha": 1,
47752
- "offsetX": "0px",
47753
- "offsetY": "0px",
47754
- "blur": "0px",
47755
- "spread": "1px"
48921
+ "offsetX": {
48922
+ "value": 0,
48923
+ "unit": "px"
48924
+ },
48925
+ "offsetY": {
48926
+ "value": 0,
48927
+ "unit": "px"
48928
+ },
48929
+ "blur": {
48930
+ "value": 0,
48931
+ "unit": "px"
48932
+ },
48933
+ "spread": {
48934
+ "value": 1,
48935
+ "unit": "px"
48936
+ }
47756
48937
  },
47757
48938
  {
47758
48939
  "color": "{base.color.neutral.0}",
47759
48940
  "alpha": 0.4,
47760
- "offsetX": "0px",
47761
- "offsetY": "8px",
47762
- "blur": "16px",
47763
- "spread": "-4px"
48941
+ "offsetX": {
48942
+ "value": 0,
48943
+ "unit": "px"
48944
+ },
48945
+ "offsetY": {
48946
+ "value": 8,
48947
+ "unit": "px"
48948
+ },
48949
+ "blur": {
48950
+ "value": 16,
48951
+ "unit": "px"
48952
+ },
48953
+ "spread": {
48954
+ "value": -4,
48955
+ "unit": "px"
48956
+ }
47764
48957
  },
47765
48958
  {
47766
48959
  "color": "{base.color.neutral.0}",
47767
48960
  "alpha": 0.4,
47768
- "offsetX": "0px",
47769
- "offsetY": "4px",
47770
- "blur": "32px",
47771
- "spread": "-4px"
48961
+ "offsetX": {
48962
+ "value": 0,
48963
+ "unit": "px"
48964
+ },
48965
+ "offsetY": {
48966
+ "value": 4,
48967
+ "unit": "px"
48968
+ },
48969
+ "blur": {
48970
+ "value": 32,
48971
+ "unit": "px"
48972
+ },
48973
+ "spread": {
48974
+ "value": -4,
48975
+ "unit": "px"
48976
+ }
47772
48977
  },
47773
48978
  {
47774
48979
  "color": "{base.color.neutral.0}",
47775
48980
  "alpha": 0.4,
47776
- "offsetX": "0px",
47777
- "offsetY": "24px",
47778
- "blur": "48px",
47779
- "spread": "-12px"
48981
+ "offsetX": {
48982
+ "value": 0,
48983
+ "unit": "px"
48984
+ },
48985
+ "offsetY": {
48986
+ "value": 24,
48987
+ "unit": "px"
48988
+ },
48989
+ "blur": {
48990
+ "value": 48,
48991
+ "unit": "px"
48992
+ },
48993
+ "spread": {
48994
+ "value": -12,
48995
+ "unit": "px"
48996
+ }
47780
48997
  },
47781
48998
  {
47782
48999
  "color": "{base.color.neutral.0}",
47783
49000
  "alpha": 0.4,
47784
- "offsetX": "0px",
47785
- "offsetY": "48px",
47786
- "blur": "96px",
47787
- "spread": "-24px"
49001
+ "offsetX": {
49002
+ "value": 0,
49003
+ "unit": "px"
49004
+ },
49005
+ "offsetY": {
49006
+ "value": 48,
49007
+ "unit": "px"
49008
+ },
49009
+ "blur": {
49010
+ "value": 96,
49011
+ "unit": "px"
49012
+ },
49013
+ "spread": {
49014
+ "value": -24,
49015
+ "unit": "px"
49016
+ }
49017
+ }
49018
+ ],
49019
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49020
+ "isSource": true,
49021
+ "$type": "shadow"
49022
+ },
49023
+ "light-high-contrast": {
49024
+ "$value": [
49025
+ {
49026
+ "color": "{overlay.borderColor}",
49027
+ "alpha": 1,
49028
+ "offsetX": {
49029
+ "value": 0,
49030
+ "unit": "px"
49031
+ },
49032
+ "offsetY": {
49033
+ "value": 0,
49034
+ "unit": "px"
49035
+ },
49036
+ "blur": {
49037
+ "value": 0,
49038
+ "unit": "px"
49039
+ },
49040
+ "spread": {
49041
+ "value": 1,
49042
+ "unit": "px"
49043
+ }
49044
+ },
49045
+ {
49046
+ "color": "{base.color.neutral.12}",
49047
+ "alpha": 0.08,
49048
+ "offsetX": {
49049
+ "value": 0,
49050
+ "unit": "px"
49051
+ },
49052
+ "offsetY": {
49053
+ "value": 8,
49054
+ "unit": "px"
49055
+ },
49056
+ "blur": {
49057
+ "value": 16,
49058
+ "unit": "px"
49059
+ },
49060
+ "spread": {
49061
+ "value": -4,
49062
+ "unit": "px"
49063
+ }
49064
+ },
49065
+ {
49066
+ "color": "{base.color.neutral.12}",
49067
+ "alpha": 0.08,
49068
+ "offsetX": {
49069
+ "value": 0,
49070
+ "unit": "px"
49071
+ },
49072
+ "offsetY": {
49073
+ "value": 4,
49074
+ "unit": "px"
49075
+ },
49076
+ "blur": {
49077
+ "value": 32,
49078
+ "unit": "px"
49079
+ },
49080
+ "spread": {
49081
+ "value": -4,
49082
+ "unit": "px"
49083
+ }
49084
+ },
49085
+ {
49086
+ "color": "{base.color.neutral.12}",
49087
+ "alpha": 0.08,
49088
+ "offsetX": {
49089
+ "value": 0,
49090
+ "unit": "px"
49091
+ },
49092
+ "offsetY": {
49093
+ "value": 24,
49094
+ "unit": "px"
49095
+ },
49096
+ "blur": {
49097
+ "value": 48,
49098
+ "unit": "px"
49099
+ },
49100
+ "spread": {
49101
+ "value": -12,
49102
+ "unit": "px"
49103
+ }
49104
+ },
49105
+ {
49106
+ "color": "{base.color.neutral.12}",
49107
+ "alpha": 0.08,
49108
+ "offsetX": {
49109
+ "value": 0,
49110
+ "unit": "px"
49111
+ },
49112
+ "offsetY": {
49113
+ "value": 48,
49114
+ "unit": "px"
49115
+ },
49116
+ "blur": {
49117
+ "value": 96,
49118
+ "unit": "px"
49119
+ },
49120
+ "spread": {
49121
+ "value": -24,
49122
+ "unit": "px"
49123
+ }
49124
+ }
49125
+ ],
49126
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49127
+ "isSource": true,
49128
+ "$type": "shadow"
49129
+ },
49130
+ "light-protanopia-deuteranopia-high-contrast": {
49131
+ "$value": [
49132
+ {
49133
+ "color": "{overlay.borderColor}",
49134
+ "alpha": 1,
49135
+ "offsetX": {
49136
+ "value": 0,
49137
+ "unit": "px"
49138
+ },
49139
+ "offsetY": {
49140
+ "value": 0,
49141
+ "unit": "px"
49142
+ },
49143
+ "blur": {
49144
+ "value": 0,
49145
+ "unit": "px"
49146
+ },
49147
+ "spread": {
49148
+ "value": 1,
49149
+ "unit": "px"
49150
+ }
49151
+ },
49152
+ {
49153
+ "color": "{base.color.neutral.12}",
49154
+ "alpha": 0.08,
49155
+ "offsetX": {
49156
+ "value": 0,
49157
+ "unit": "px"
49158
+ },
49159
+ "offsetY": {
49160
+ "value": 8,
49161
+ "unit": "px"
49162
+ },
49163
+ "blur": {
49164
+ "value": 16,
49165
+ "unit": "px"
49166
+ },
49167
+ "spread": {
49168
+ "value": -4,
49169
+ "unit": "px"
49170
+ }
49171
+ },
49172
+ {
49173
+ "color": "{base.color.neutral.12}",
49174
+ "alpha": 0.08,
49175
+ "offsetX": {
49176
+ "value": 0,
49177
+ "unit": "px"
49178
+ },
49179
+ "offsetY": {
49180
+ "value": 4,
49181
+ "unit": "px"
49182
+ },
49183
+ "blur": {
49184
+ "value": 32,
49185
+ "unit": "px"
49186
+ },
49187
+ "spread": {
49188
+ "value": -4,
49189
+ "unit": "px"
49190
+ }
49191
+ },
49192
+ {
49193
+ "color": "{base.color.neutral.12}",
49194
+ "alpha": 0.08,
49195
+ "offsetX": {
49196
+ "value": 0,
49197
+ "unit": "px"
49198
+ },
49199
+ "offsetY": {
49200
+ "value": 24,
49201
+ "unit": "px"
49202
+ },
49203
+ "blur": {
49204
+ "value": 48,
49205
+ "unit": "px"
49206
+ },
49207
+ "spread": {
49208
+ "value": -12,
49209
+ "unit": "px"
49210
+ }
49211
+ },
49212
+ {
49213
+ "color": "{base.color.neutral.12}",
49214
+ "alpha": 0.08,
49215
+ "offsetX": {
49216
+ "value": 0,
49217
+ "unit": "px"
49218
+ },
49219
+ "offsetY": {
49220
+ "value": 48,
49221
+ "unit": "px"
49222
+ },
49223
+ "blur": {
49224
+ "value": 96,
49225
+ "unit": "px"
49226
+ },
49227
+ "spread": {
49228
+ "value": -24,
49229
+ "unit": "px"
49230
+ }
49231
+ }
49232
+ ],
49233
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49234
+ "isSource": true,
49235
+ "$type": "shadow"
49236
+ },
49237
+ "light-tritanopia-high-contrast": {
49238
+ "$value": [
49239
+ {
49240
+ "color": "{overlay.borderColor}",
49241
+ "alpha": 1,
49242
+ "offsetX": {
49243
+ "value": 0,
49244
+ "unit": "px"
49245
+ },
49246
+ "offsetY": {
49247
+ "value": 0,
49248
+ "unit": "px"
49249
+ },
49250
+ "blur": {
49251
+ "value": 0,
49252
+ "unit": "px"
49253
+ },
49254
+ "spread": {
49255
+ "value": 1,
49256
+ "unit": "px"
49257
+ }
49258
+ },
49259
+ {
49260
+ "color": "{base.color.neutral.12}",
49261
+ "alpha": 0.08,
49262
+ "offsetX": {
49263
+ "value": 0,
49264
+ "unit": "px"
49265
+ },
49266
+ "offsetY": {
49267
+ "value": 8,
49268
+ "unit": "px"
49269
+ },
49270
+ "blur": {
49271
+ "value": 16,
49272
+ "unit": "px"
49273
+ },
49274
+ "spread": {
49275
+ "value": -4,
49276
+ "unit": "px"
49277
+ }
49278
+ },
49279
+ {
49280
+ "color": "{base.color.neutral.12}",
49281
+ "alpha": 0.08,
49282
+ "offsetX": {
49283
+ "value": 0,
49284
+ "unit": "px"
49285
+ },
49286
+ "offsetY": {
49287
+ "value": 4,
49288
+ "unit": "px"
49289
+ },
49290
+ "blur": {
49291
+ "value": 32,
49292
+ "unit": "px"
49293
+ },
49294
+ "spread": {
49295
+ "value": -4,
49296
+ "unit": "px"
49297
+ }
49298
+ },
49299
+ {
49300
+ "color": "{base.color.neutral.12}",
49301
+ "alpha": 0.08,
49302
+ "offsetX": {
49303
+ "value": 0,
49304
+ "unit": "px"
49305
+ },
49306
+ "offsetY": {
49307
+ "value": 24,
49308
+ "unit": "px"
49309
+ },
49310
+ "blur": {
49311
+ "value": 48,
49312
+ "unit": "px"
49313
+ },
49314
+ "spread": {
49315
+ "value": -12,
49316
+ "unit": "px"
49317
+ }
49318
+ },
49319
+ {
49320
+ "color": "{base.color.neutral.12}",
49321
+ "alpha": 0.08,
49322
+ "offsetX": {
49323
+ "value": 0,
49324
+ "unit": "px"
49325
+ },
49326
+ "offsetY": {
49327
+ "value": 48,
49328
+ "unit": "px"
49329
+ },
49330
+ "blur": {
49331
+ "value": 96,
49332
+ "unit": "px"
49333
+ },
49334
+ "spread": {
49335
+ "value": -24,
49336
+ "unit": "px"
49337
+ }
47788
49338
  }
47789
49339
  ],
47790
49340
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47791
49341
  "isSource": true,
47792
49342
  "$type": "shadow"
47793
49343
  }
49344
+ },
49345
+ "org.primer.llm": {
49346
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49347
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47794
49348
  }
47795
49349
  },
47796
49350
  "key": "{shadow.floating.medium}"
@@ -47798,8 +49352,9 @@
47798
49352
  "name": "shadow-floating-medium",
47799
49353
  "attributes": {},
47800
49354
  "path": ["shadow", "floating", "medium"],
47801
- "value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
47802
- "type": "shadow"
49355
+ "value": "0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966",
49356
+ "type": "shadow",
49357
+ "description": "Medium floating shadow for popovers and action menus"
47803
49358
  },
47804
49359
  "shadow-floating-small": {
47805
49360
  "key": "{shadow.floating.small}",
@@ -47814,26 +49369,62 @@
47814
49369
  {
47815
49370
  "color": "#3d444db3",
47816
49371
  "alpha": 1,
47817
- "offsetX": "0px",
47818
- "offsetY": "0px",
47819
- "blur": "0px",
47820
- "spread": "1px"
49372
+ "offsetX": {
49373
+ "value": 0,
49374
+ "unit": "px"
49375
+ },
49376
+ "offsetY": {
49377
+ "value": 0,
49378
+ "unit": "px"
49379
+ },
49380
+ "blur": {
49381
+ "value": 0,
49382
+ "unit": "px"
49383
+ },
49384
+ "spread": {
49385
+ "value": 1,
49386
+ "unit": "px"
49387
+ }
47821
49388
  },
47822
49389
  {
47823
49390
  "color": "#010409",
47824
49391
  "alpha": 0.4,
47825
- "offsetX": "0px",
47826
- "offsetY": "6px",
47827
- "blur": "12px",
47828
- "spread": "-3px"
49392
+ "offsetX": {
49393
+ "value": 0,
49394
+ "unit": "px"
49395
+ },
49396
+ "offsetY": {
49397
+ "value": 6,
49398
+ "unit": "px"
49399
+ },
49400
+ "blur": {
49401
+ "value": 12,
49402
+ "unit": "px"
49403
+ },
49404
+ "spread": {
49405
+ "value": -3,
49406
+ "unit": "px"
49407
+ }
47829
49408
  },
47830
49409
  {
47831
49410
  "color": "#010409",
47832
49411
  "alpha": 0.4,
47833
- "offsetX": "0px",
47834
- "offsetY": "6px",
47835
- "blur": "18px",
47836
- "spread": "0px"
49412
+ "offsetX": {
49413
+ "value": 0,
49414
+ "unit": "px"
49415
+ },
49416
+ "offsetY": {
49417
+ "value": 6,
49418
+ "unit": "px"
49419
+ },
49420
+ "blur": {
49421
+ "value": 18,
49422
+ "unit": "px"
49423
+ },
49424
+ "spread": {
49425
+ "value": 0,
49426
+ "unit": "px"
49427
+ }
47837
49428
  }
47838
49429
  ],
47839
49430
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47853,26 +49444,62 @@
47853
49444
  {
47854
49445
  "color": "{overlay.borderColor}",
47855
49446
  "alpha": 1,
47856
- "offsetX": "0px",
47857
- "offsetY": "0px",
47858
- "blur": "0px",
47859
- "spread": "1px"
49447
+ "offsetX": {
49448
+ "value": 0,
49449
+ "unit": "px"
49450
+ },
49451
+ "offsetY": {
49452
+ "value": 0,
49453
+ "unit": "px"
49454
+ },
49455
+ "blur": {
49456
+ "value": 0,
49457
+ "unit": "px"
49458
+ },
49459
+ "spread": {
49460
+ "value": 1,
49461
+ "unit": "px"
49462
+ }
47860
49463
  },
47861
49464
  {
47862
49465
  "color": "{base.color.neutral.0}",
47863
49466
  "alpha": 0.4,
47864
- "offsetX": "0px",
47865
- "offsetY": "6px",
47866
- "blur": "12px",
47867
- "spread": "-3px"
49467
+ "offsetX": {
49468
+ "value": 0,
49469
+ "unit": "px"
49470
+ },
49471
+ "offsetY": {
49472
+ "value": 6,
49473
+ "unit": "px"
49474
+ },
49475
+ "blur": {
49476
+ "value": 12,
49477
+ "unit": "px"
49478
+ },
49479
+ "spread": {
49480
+ "value": -3,
49481
+ "unit": "px"
49482
+ }
47868
49483
  },
47869
49484
  {
47870
49485
  "color": "{base.color.neutral.0}",
47871
49486
  "alpha": 0.4,
47872
- "offsetX": "0px",
47873
- "offsetY": "6px",
47874
- "blur": "18px",
47875
- "spread": "0px"
49487
+ "offsetX": {
49488
+ "value": 0,
49489
+ "unit": "px"
49490
+ },
49491
+ "offsetY": {
49492
+ "value": 6,
49493
+ "unit": "px"
49494
+ },
49495
+ "blur": {
49496
+ "value": 18,
49497
+ "unit": "px"
49498
+ },
49499
+ "spread": {
49500
+ "value": 0,
49501
+ "unit": "px"
49502
+ }
47876
49503
  }
47877
49504
  ],
47878
49505
  "$type": "shadow",
@@ -47888,26 +49515,62 @@
47888
49515
  {
47889
49516
  "color": "{overlay.borderColor}",
47890
49517
  "alpha": 1,
47891
- "offsetX": "0px",
47892
- "offsetY": "0px",
47893
- "blur": "0px",
47894
- "spread": "1px"
49518
+ "offsetX": {
49519
+ "value": 0,
49520
+ "unit": "px"
49521
+ },
49522
+ "offsetY": {
49523
+ "value": 0,
49524
+ "unit": "px"
49525
+ },
49526
+ "blur": {
49527
+ "value": 0,
49528
+ "unit": "px"
49529
+ },
49530
+ "spread": {
49531
+ "value": 1,
49532
+ "unit": "px"
49533
+ }
47895
49534
  },
47896
49535
  {
47897
49536
  "color": "{base.color.neutral.0}",
47898
49537
  "alpha": 0.4,
47899
- "offsetX": "0px",
47900
- "offsetY": "6px",
47901
- "blur": "12px",
47902
- "spread": "-3px"
49538
+ "offsetX": {
49539
+ "value": 0,
49540
+ "unit": "px"
49541
+ },
49542
+ "offsetY": {
49543
+ "value": 6,
49544
+ "unit": "px"
49545
+ },
49546
+ "blur": {
49547
+ "value": 12,
49548
+ "unit": "px"
49549
+ },
49550
+ "spread": {
49551
+ "value": -3,
49552
+ "unit": "px"
49553
+ }
47903
49554
  },
47904
49555
  {
47905
49556
  "color": "{base.color.neutral.0}",
47906
49557
  "alpha": 0.4,
47907
- "offsetX": "0px",
47908
- "offsetY": "6px",
47909
- "blur": "18px",
47910
- "spread": "0px"
49558
+ "offsetX": {
49559
+ "value": 0,
49560
+ "unit": "px"
49561
+ },
49562
+ "offsetY": {
49563
+ "value": 6,
49564
+ "unit": "px"
49565
+ },
49566
+ "blur": {
49567
+ "value": 18,
49568
+ "unit": "px"
49569
+ },
49570
+ "spread": {
49571
+ "value": 0,
49572
+ "unit": "px"
49573
+ }
47911
49574
  }
47912
49575
  ],
47913
49576
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47925,7 +49588,7 @@
47925
49588
  "name": "shadow-floating-small",
47926
49589
  "attributes": {},
47927
49590
  "path": ["shadow", "floating", "small"],
47928
- "value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
49591
+ "value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47929
49592
  "type": "shadow",
47930
49593
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47931
49594
  },
@@ -47942,24 +49605,193 @@
47942
49605
  {
47943
49606
  "color": "#3d444db3",
47944
49607
  "alpha": 1,
47945
- "offsetX": "0px",
47946
- "offsetY": "0px",
47947
- "blur": "0px",
47948
- "spread": "1px"
49608
+ "offsetX": {
49609
+ "value": 0,
49610
+ "unit": "px"
49611
+ },
49612
+ "offsetY": {
49613
+ "value": 0,
49614
+ "unit": "px"
49615
+ },
49616
+ "blur": {
49617
+ "value": 0,
49618
+ "unit": "px"
49619
+ },
49620
+ "spread": {
49621
+ "value": 1,
49622
+ "unit": "px"
49623
+ }
47949
49624
  },
47950
49625
  {
47951
49626
  "color": "#010409",
47952
49627
  "alpha": 1,
47953
- "offsetX": "0px",
47954
- "offsetY": "32px",
47955
- "blur": "64px",
47956
- "spread": "0px"
49628
+ "offsetX": {
49629
+ "value": 0,
49630
+ "unit": "px"
49631
+ },
49632
+ "offsetY": {
49633
+ "value": 32,
49634
+ "unit": "px"
49635
+ },
49636
+ "blur": {
49637
+ "value": 64,
49638
+ "unit": "px"
49639
+ },
49640
+ "spread": {
49641
+ "value": 0,
49642
+ "unit": "px"
49643
+ }
49644
+ }
49645
+ ],
49646
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49647
+ "isSource": true,
49648
+ "$type": "shadow"
49649
+ },
49650
+ "light-high-contrast": {
49651
+ "$value": [
49652
+ {
49653
+ "color": "#3d444db3",
49654
+ "alpha": 1,
49655
+ "offsetX": {
49656
+ "value": 0,
49657
+ "unit": "px"
49658
+ },
49659
+ "offsetY": {
49660
+ "value": 0,
49661
+ "unit": "px"
49662
+ },
49663
+ "blur": {
49664
+ "value": 0,
49665
+ "unit": "px"
49666
+ },
49667
+ "spread": {
49668
+ "value": 1,
49669
+ "unit": "px"
49670
+ }
49671
+ },
49672
+ {
49673
+ "color": "#f0f6fc",
49674
+ "alpha": 0.32,
49675
+ "offsetX": {
49676
+ "value": 0,
49677
+ "unit": "px"
49678
+ },
49679
+ "offsetY": {
49680
+ "value": 56,
49681
+ "unit": "px"
49682
+ },
49683
+ "blur": {
49684
+ "value": 112,
49685
+ "unit": "px"
49686
+ },
49687
+ "spread": {
49688
+ "value": 0,
49689
+ "unit": "px"
49690
+ }
49691
+ }
49692
+ ],
49693
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49694
+ "isSource": true,
49695
+ "$type": "shadow"
49696
+ },
49697
+ "light-protanopia-deuteranopia-high-contrast": {
49698
+ "$value": [
49699
+ {
49700
+ "color": "#3d444db3",
49701
+ "alpha": 1,
49702
+ "offsetX": {
49703
+ "value": 0,
49704
+ "unit": "px"
49705
+ },
49706
+ "offsetY": {
49707
+ "value": 0,
49708
+ "unit": "px"
49709
+ },
49710
+ "blur": {
49711
+ "value": 0,
49712
+ "unit": "px"
49713
+ },
49714
+ "spread": {
49715
+ "value": 1,
49716
+ "unit": "px"
49717
+ }
49718
+ },
49719
+ {
49720
+ "color": "#f0f6fc",
49721
+ "alpha": 0.32,
49722
+ "offsetX": {
49723
+ "value": 0,
49724
+ "unit": "px"
49725
+ },
49726
+ "offsetY": {
49727
+ "value": 56,
49728
+ "unit": "px"
49729
+ },
49730
+ "blur": {
49731
+ "value": 112,
49732
+ "unit": "px"
49733
+ },
49734
+ "spread": {
49735
+ "value": 0,
49736
+ "unit": "px"
49737
+ }
49738
+ }
49739
+ ],
49740
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49741
+ "isSource": true,
49742
+ "$type": "shadow"
49743
+ },
49744
+ "light-tritanopia-high-contrast": {
49745
+ "$value": [
49746
+ {
49747
+ "color": "#3d444db3",
49748
+ "alpha": 1,
49749
+ "offsetX": {
49750
+ "value": 0,
49751
+ "unit": "px"
49752
+ },
49753
+ "offsetY": {
49754
+ "value": 0,
49755
+ "unit": "px"
49756
+ },
49757
+ "blur": {
49758
+ "value": 0,
49759
+ "unit": "px"
49760
+ },
49761
+ "spread": {
49762
+ "value": 1,
49763
+ "unit": "px"
49764
+ }
49765
+ },
49766
+ {
49767
+ "color": "#f0f6fc",
49768
+ "alpha": 0.32,
49769
+ "offsetX": {
49770
+ "value": 0,
49771
+ "unit": "px"
49772
+ },
49773
+ "offsetY": {
49774
+ "value": 56,
49775
+ "unit": "px"
49776
+ },
49777
+ "blur": {
49778
+ "value": 112,
49779
+ "unit": "px"
49780
+ },
49781
+ "spread": {
49782
+ "value": 0,
49783
+ "unit": "px"
49784
+ }
47957
49785
  }
47958
49786
  ],
47959
49787
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47960
49788
  "isSource": true,
47961
49789
  "$type": "shadow"
47962
49790
  }
49791
+ },
49792
+ "org.primer.llm": {
49793
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49794
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47963
49795
  }
47964
49796
  },
47965
49797
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47969,21 +49801,46 @@
47969
49801
  {
47970
49802
  "color": "{overlay.borderColor}",
47971
49803
  "alpha": 1,
47972
- "offsetX": "0px",
47973
- "offsetY": "0px",
47974
- "blur": "0px",
47975
- "spread": "1px"
49804
+ "offsetX": {
49805
+ "value": 0,
49806
+ "unit": "px"
49807
+ },
49808
+ "offsetY": {
49809
+ "value": 0,
49810
+ "unit": "px"
49811
+ },
49812
+ "blur": {
49813
+ "value": 0,
49814
+ "unit": "px"
49815
+ },
49816
+ "spread": {
49817
+ "value": 1,
49818
+ "unit": "px"
49819
+ }
47976
49820
  },
47977
49821
  {
47978
49822
  "color": "{base.color.neutral.0}",
47979
49823
  "alpha": 1,
47980
- "offsetX": "0px",
47981
- "offsetY": "32px",
47982
- "blur": "64px",
47983
- "spread": "0px"
49824
+ "offsetX": {
49825
+ "value": 0,
49826
+ "unit": "px"
49827
+ },
49828
+ "offsetY": {
49829
+ "value": 32,
49830
+ "unit": "px"
49831
+ },
49832
+ "blur": {
49833
+ "value": 64,
49834
+ "unit": "px"
49835
+ },
49836
+ "spread": {
49837
+ "value": 0,
49838
+ "unit": "px"
49839
+ }
47984
49840
  }
47985
49841
  ],
47986
49842
  "$type": "shadow",
49843
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47987
49844
  "$extensions": {
47988
49845
  "org.primer.figma": {
47989
49846
  "collection": "mode",
@@ -47995,24 +49852,193 @@
47995
49852
  {
47996
49853
  "color": "{overlay.borderColor}",
47997
49854
  "alpha": 1,
47998
- "offsetX": "0px",
47999
- "offsetY": "0px",
48000
- "blur": "0px",
48001
- "spread": "1px"
49855
+ "offsetX": {
49856
+ "value": 0,
49857
+ "unit": "px"
49858
+ },
49859
+ "offsetY": {
49860
+ "value": 0,
49861
+ "unit": "px"
49862
+ },
49863
+ "blur": {
49864
+ "value": 0,
49865
+ "unit": "px"
49866
+ },
49867
+ "spread": {
49868
+ "value": 1,
49869
+ "unit": "px"
49870
+ }
48002
49871
  },
48003
49872
  {
48004
49873
  "color": "{base.color.neutral.0}",
48005
49874
  "alpha": 1,
48006
- "offsetX": "0px",
48007
- "offsetY": "32px",
48008
- "blur": "64px",
48009
- "spread": "0px"
49875
+ "offsetX": {
49876
+ "value": 0,
49877
+ "unit": "px"
49878
+ },
49879
+ "offsetY": {
49880
+ "value": 32,
49881
+ "unit": "px"
49882
+ },
49883
+ "blur": {
49884
+ "value": 64,
49885
+ "unit": "px"
49886
+ },
49887
+ "spread": {
49888
+ "value": 0,
49889
+ "unit": "px"
49890
+ }
49891
+ }
49892
+ ],
49893
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49894
+ "isSource": true,
49895
+ "$type": "shadow"
49896
+ },
49897
+ "light-high-contrast": {
49898
+ "$value": [
49899
+ {
49900
+ "color": "{overlay.borderColor}",
49901
+ "alpha": 1,
49902
+ "offsetX": {
49903
+ "value": 0,
49904
+ "unit": "px"
49905
+ },
49906
+ "offsetY": {
49907
+ "value": 0,
49908
+ "unit": "px"
49909
+ },
49910
+ "blur": {
49911
+ "value": 0,
49912
+ "unit": "px"
49913
+ },
49914
+ "spread": {
49915
+ "value": 1,
49916
+ "unit": "px"
49917
+ }
49918
+ },
49919
+ {
49920
+ "color": "{base.color.neutral.12}",
49921
+ "alpha": 0.32,
49922
+ "offsetX": {
49923
+ "value": 0,
49924
+ "unit": "px"
49925
+ },
49926
+ "offsetY": {
49927
+ "value": 56,
49928
+ "unit": "px"
49929
+ },
49930
+ "blur": {
49931
+ "value": 112,
49932
+ "unit": "px"
49933
+ },
49934
+ "spread": {
49935
+ "value": 0,
49936
+ "unit": "px"
49937
+ }
49938
+ }
49939
+ ],
49940
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49941
+ "isSource": true,
49942
+ "$type": "shadow"
49943
+ },
49944
+ "light-protanopia-deuteranopia-high-contrast": {
49945
+ "$value": [
49946
+ {
49947
+ "color": "{overlay.borderColor}",
49948
+ "alpha": 1,
49949
+ "offsetX": {
49950
+ "value": 0,
49951
+ "unit": "px"
49952
+ },
49953
+ "offsetY": {
49954
+ "value": 0,
49955
+ "unit": "px"
49956
+ },
49957
+ "blur": {
49958
+ "value": 0,
49959
+ "unit": "px"
49960
+ },
49961
+ "spread": {
49962
+ "value": 1,
49963
+ "unit": "px"
49964
+ }
49965
+ },
49966
+ {
49967
+ "color": "{base.color.neutral.12}",
49968
+ "alpha": 0.32,
49969
+ "offsetX": {
49970
+ "value": 0,
49971
+ "unit": "px"
49972
+ },
49973
+ "offsetY": {
49974
+ "value": 56,
49975
+ "unit": "px"
49976
+ },
49977
+ "blur": {
49978
+ "value": 112,
49979
+ "unit": "px"
49980
+ },
49981
+ "spread": {
49982
+ "value": 0,
49983
+ "unit": "px"
49984
+ }
49985
+ }
49986
+ ],
49987
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49988
+ "isSource": true,
49989
+ "$type": "shadow"
49990
+ },
49991
+ "light-tritanopia-high-contrast": {
49992
+ "$value": [
49993
+ {
49994
+ "color": "{overlay.borderColor}",
49995
+ "alpha": 1,
49996
+ "offsetX": {
49997
+ "value": 0,
49998
+ "unit": "px"
49999
+ },
50000
+ "offsetY": {
50001
+ "value": 0,
50002
+ "unit": "px"
50003
+ },
50004
+ "blur": {
50005
+ "value": 0,
50006
+ "unit": "px"
50007
+ },
50008
+ "spread": {
50009
+ "value": 1,
50010
+ "unit": "px"
50011
+ }
50012
+ },
50013
+ {
50014
+ "color": "{base.color.neutral.12}",
50015
+ "alpha": 0.32,
50016
+ "offsetX": {
50017
+ "value": 0,
50018
+ "unit": "px"
50019
+ },
50020
+ "offsetY": {
50021
+ "value": 56,
50022
+ "unit": "px"
50023
+ },
50024
+ "blur": {
50025
+ "value": 112,
50026
+ "unit": "px"
50027
+ },
50028
+ "spread": {
50029
+ "value": 0,
50030
+ "unit": "px"
50031
+ }
48010
50032
  }
48011
50033
  ],
48012
50034
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48013
50035
  "isSource": true,
48014
50036
  "$type": "shadow"
48015
50037
  }
50038
+ },
50039
+ "org.primer.llm": {
50040
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50041
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
48016
50042
  }
48017
50043
  },
48018
50044
  "key": "{shadow.floating.xlarge}"
@@ -48020,8 +50046,9 @@
48020
50046
  "name": "shadow-floating-xlarge",
48021
50047
  "attributes": {},
48022
50048
  "path": ["shadow", "floating", "xlarge"],
48023
- "value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48024
- "type": "shadow"
50049
+ "value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
50050
+ "type": "shadow",
50051
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
48025
50052
  },
48026
50053
  "shadow-inset": {
48027
50054
  "key": "{shadow.inset}",
@@ -48035,16 +50062,32 @@
48035
50062
  "$value": {
48036
50063
  "color": "#010409",
48037
50064
  "alpha": 0.24,
48038
- "offsetX": "0px",
48039
- "offsetY": "1px",
48040
- "blur": "0px",
48041
- "spread": "0px",
50065
+ "offsetX": {
50066
+ "value": 0,
50067
+ "unit": "px"
50068
+ },
50069
+ "offsetY": {
50070
+ "value": 1,
50071
+ "unit": "px"
50072
+ },
50073
+ "blur": {
50074
+ "value": 0,
50075
+ "unit": "px"
50076
+ },
50077
+ "spread": {
50078
+ "value": 0,
50079
+ "unit": "px"
50080
+ },
48042
50081
  "inset": true
48043
50082
  },
48044
50083
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48045
50084
  "isSource": true,
48046
50085
  "$type": "shadow"
48047
50086
  }
50087
+ },
50088
+ "org.primer.llm": {
50089
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50090
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48048
50091
  }
48049
50092
  },
48050
50093
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48053,13 +50096,26 @@
48053
50096
  "$value": {
48054
50097
  "color": "{base.color.neutral.0}",
48055
50098
  "alpha": 0.24,
48056
- "offsetX": "0px",
48057
- "offsetY": "1px",
48058
- "blur": "0px",
48059
- "spread": "0px",
50099
+ "offsetX": {
50100
+ "value": 0,
50101
+ "unit": "px"
50102
+ },
50103
+ "offsetY": {
50104
+ "value": 1,
50105
+ "unit": "px"
50106
+ },
50107
+ "blur": {
50108
+ "value": 0,
50109
+ "unit": "px"
50110
+ },
50111
+ "spread": {
50112
+ "value": 0,
50113
+ "unit": "px"
50114
+ },
48060
50115
  "inset": true
48061
50116
  },
48062
50117
  "$type": "shadow",
50118
+ "$description": "Inset shadow for recessed elements",
48063
50119
  "$extensions": {
48064
50120
  "org.primer.figma": {
48065
50121
  "collection": "mode",
@@ -48070,16 +50126,32 @@
48070
50126
  "$value": {
48071
50127
  "color": "{base.color.neutral.0}",
48072
50128
  "alpha": 0.24,
48073
- "offsetX": "0px",
48074
- "offsetY": "1px",
48075
- "blur": "0px",
48076
- "spread": "0px",
50129
+ "offsetX": {
50130
+ "value": 0,
50131
+ "unit": "px"
50132
+ },
50133
+ "offsetY": {
50134
+ "value": 1,
50135
+ "unit": "px"
50136
+ },
50137
+ "blur": {
50138
+ "value": 0,
50139
+ "unit": "px"
50140
+ },
50141
+ "spread": {
50142
+ "value": 0,
50143
+ "unit": "px"
50144
+ },
48077
50145
  "inset": true
48078
50146
  },
48079
50147
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48080
50148
  "isSource": true,
48081
50149
  "$type": "shadow"
48082
50150
  }
50151
+ },
50152
+ "org.primer.llm": {
50153
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50154
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48083
50155
  }
48084
50156
  },
48085
50157
  "key": "{shadow.inset}"
@@ -48087,8 +50159,9 @@
48087
50159
  "name": "shadow-inset",
48088
50160
  "attributes": {},
48089
50161
  "path": ["shadow", "inset"],
48090
- "value": "inset 0px 1px 0px 0px #0104093d",
48091
- "type": "shadow"
50162
+ "value": "inset 0 1px 0 0 #0104093d",
50163
+ "type": "shadow",
50164
+ "description": "Inset shadow for recessed elements"
48092
50165
  },
48093
50166
  "shadow-resting-medium": {
48094
50167
  "key": "{shadow.resting.medium}",
@@ -48103,24 +50176,52 @@
48103
50176
  {
48104
50177
  "color": "#010409",
48105
50178
  "alpha": 0.4,
48106
- "offsetX": "0px",
48107
- "offsetY": "1px",
48108
- "blur": "1px",
48109
- "spread": "0px"
50179
+ "offsetX": {
50180
+ "value": 0,
50181
+ "unit": "px"
50182
+ },
50183
+ "offsetY": {
50184
+ "value": 1,
50185
+ "unit": "px"
50186
+ },
50187
+ "blur": {
50188
+ "value": 1,
50189
+ "unit": "px"
50190
+ },
50191
+ "spread": {
50192
+ "value": 0,
50193
+ "unit": "px"
50194
+ }
48110
50195
  },
48111
50196
  {
48112
50197
  "color": "#010409",
48113
50198
  "alpha": 0.8,
48114
- "offsetX": "0px",
48115
- "offsetY": "3px",
48116
- "blur": "6px",
48117
- "spread": "0px"
50199
+ "offsetX": {
50200
+ "value": 0,
50201
+ "unit": "px"
50202
+ },
50203
+ "offsetY": {
50204
+ "value": 3,
50205
+ "unit": "px"
50206
+ },
50207
+ "blur": {
50208
+ "value": 6,
50209
+ "unit": "px"
50210
+ },
50211
+ "spread": {
50212
+ "value": 0,
50213
+ "unit": "px"
50214
+ }
48118
50215
  }
48119
50216
  ],
48120
50217
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48121
50218
  "isSource": true,
48122
50219
  "$type": "shadow"
48123
50220
  }
50221
+ },
50222
+ "org.primer.llm": {
50223
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50224
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48124
50225
  }
48125
50226
  },
48126
50227
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48130,21 +50231,46 @@
48130
50231
  {
48131
50232
  "color": "{base.color.neutral.0}",
48132
50233
  "alpha": 0.4,
48133
- "offsetX": "0px",
48134
- "offsetY": "1px",
48135
- "blur": "1px",
48136
- "spread": "0px"
50234
+ "offsetX": {
50235
+ "value": 0,
50236
+ "unit": "px"
50237
+ },
50238
+ "offsetY": {
50239
+ "value": 1,
50240
+ "unit": "px"
50241
+ },
50242
+ "blur": {
50243
+ "value": 1,
50244
+ "unit": "px"
50245
+ },
50246
+ "spread": {
50247
+ "value": 0,
50248
+ "unit": "px"
50249
+ }
48137
50250
  },
48138
50251
  {
48139
50252
  "color": "{base.color.neutral.0}",
48140
50253
  "alpha": 0.8,
48141
- "offsetX": "0px",
48142
- "offsetY": "3px",
48143
- "blur": "6px",
48144
- "spread": "0px"
50254
+ "offsetX": {
50255
+ "value": 0,
50256
+ "unit": "px"
50257
+ },
50258
+ "offsetY": {
50259
+ "value": 3,
50260
+ "unit": "px"
50261
+ },
50262
+ "blur": {
50263
+ "value": 6,
50264
+ "unit": "px"
50265
+ },
50266
+ "spread": {
50267
+ "value": 0,
50268
+ "unit": "px"
50269
+ }
48145
50270
  }
48146
50271
  ],
48147
50272
  "$type": "shadow",
50273
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48148
50274
  "$extensions": {
48149
50275
  "org.primer.figma": {
48150
50276
  "collection": "mode",
@@ -48156,24 +50282,52 @@
48156
50282
  {
48157
50283
  "color": "{base.color.neutral.0}",
48158
50284
  "alpha": 0.4,
48159
- "offsetX": "0px",
48160
- "offsetY": "1px",
48161
- "blur": "1px",
48162
- "spread": "0px"
50285
+ "offsetX": {
50286
+ "value": 0,
50287
+ "unit": "px"
50288
+ },
50289
+ "offsetY": {
50290
+ "value": 1,
50291
+ "unit": "px"
50292
+ },
50293
+ "blur": {
50294
+ "value": 1,
50295
+ "unit": "px"
50296
+ },
50297
+ "spread": {
50298
+ "value": 0,
50299
+ "unit": "px"
50300
+ }
48163
50301
  },
48164
50302
  {
48165
50303
  "color": "{base.color.neutral.0}",
48166
50304
  "alpha": 0.8,
48167
- "offsetX": "0px",
48168
- "offsetY": "3px",
48169
- "blur": "6px",
48170
- "spread": "0px"
50305
+ "offsetX": {
50306
+ "value": 0,
50307
+ "unit": "px"
50308
+ },
50309
+ "offsetY": {
50310
+ "value": 3,
50311
+ "unit": "px"
50312
+ },
50313
+ "blur": {
50314
+ "value": 6,
50315
+ "unit": "px"
50316
+ },
50317
+ "spread": {
50318
+ "value": 0,
50319
+ "unit": "px"
50320
+ }
48171
50321
  }
48172
50322
  ],
48173
50323
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48174
50324
  "isSource": true,
48175
50325
  "$type": "shadow"
48176
50326
  }
50327
+ },
50328
+ "org.primer.llm": {
50329
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50330
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48177
50331
  }
48178
50332
  },
48179
50333
  "key": "{shadow.resting.medium}"
@@ -48181,8 +50335,9 @@
48181
50335
  "name": "shadow-resting-medium",
48182
50336
  "attributes": {},
48183
50337
  "path": ["shadow", "resting", "medium"],
48184
- "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
48185
- "type": "shadow"
50338
+ "value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
50339
+ "type": "shadow",
50340
+ "description": "Medium resting shadow for cards and elevated surfaces"
48186
50341
  },
48187
50342
  "shadow-resting-small": {
48188
50343
  "key": "{shadow.resting.small}",
@@ -48197,19 +50352,43 @@
48197
50352
  {
48198
50353
  "color": "#010409",
48199
50354
  "alpha": 0.6,
48200
- "offsetX": "0px",
48201
- "offsetY": "1px",
48202
- "blur": "1px",
48203
- "spread": "0px",
50355
+ "offsetX": {
50356
+ "value": 0,
50357
+ "unit": "px"
50358
+ },
50359
+ "offsetY": {
50360
+ "value": 1,
50361
+ "unit": "px"
50362
+ },
50363
+ "blur": {
50364
+ "value": 1,
50365
+ "unit": "px"
50366
+ },
50367
+ "spread": {
50368
+ "value": 0,
50369
+ "unit": "px"
50370
+ },
48204
50371
  "inset": false
48205
50372
  },
48206
50373
  {
48207
50374
  "color": "#010409",
48208
50375
  "alpha": 0.6,
48209
- "offsetX": "0px",
48210
- "offsetY": "1px",
48211
- "blur": "3px",
48212
- "spread": "0px",
50376
+ "offsetX": {
50377
+ "value": 0,
50378
+ "unit": "px"
50379
+ },
50380
+ "offsetY": {
50381
+ "value": 1,
50382
+ "unit": "px"
50383
+ },
50384
+ "blur": {
50385
+ "value": 3,
50386
+ "unit": "px"
50387
+ },
50388
+ "spread": {
50389
+ "value": 0,
50390
+ "unit": "px"
50391
+ },
48213
50392
  "inset": false
48214
50393
  }
48215
50394
  ],
@@ -48217,6 +50396,10 @@
48217
50396
  "isSource": true,
48218
50397
  "$type": "shadow"
48219
50398
  }
50399
+ },
50400
+ "org.primer.llm": {
50401
+ "usage": ["button", "interactive-card", "clickable-element"],
50402
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48220
50403
  }
48221
50404
  },
48222
50405
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48226,23 +50409,48 @@
48226
50409
  {
48227
50410
  "color": "{base.color.neutral.0}",
48228
50411
  "alpha": 0.6,
48229
- "offsetX": "0px",
48230
- "offsetY": "1px",
48231
- "blur": "1px",
48232
- "spread": "0px",
50412
+ "offsetX": {
50413
+ "value": 0,
50414
+ "unit": "px"
50415
+ },
50416
+ "offsetY": {
50417
+ "value": 1,
50418
+ "unit": "px"
50419
+ },
50420
+ "blur": {
50421
+ "value": 1,
50422
+ "unit": "px"
50423
+ },
50424
+ "spread": {
50425
+ "value": 0,
50426
+ "unit": "px"
50427
+ },
48233
50428
  "inset": false
48234
50429
  },
48235
50430
  {
48236
50431
  "color": "{base.color.neutral.0}",
48237
50432
  "alpha": 0.6,
48238
- "offsetX": "0px",
48239
- "offsetY": "1px",
48240
- "blur": "3px",
48241
- "spread": "0px",
50433
+ "offsetX": {
50434
+ "value": 0,
50435
+ "unit": "px"
50436
+ },
50437
+ "offsetY": {
50438
+ "value": 1,
50439
+ "unit": "px"
50440
+ },
50441
+ "blur": {
50442
+ "value": 3,
50443
+ "unit": "px"
50444
+ },
50445
+ "spread": {
50446
+ "value": 0,
50447
+ "unit": "px"
50448
+ },
48242
50449
  "inset": false
48243
50450
  }
48244
50451
  ],
48245
50452
  "$type": "shadow",
50453
+ "$description": "Small resting shadow for buttons and interactive elements",
48246
50454
  "$extensions": {
48247
50455
  "org.primer.figma": {
48248
50456
  "collection": "mode",
@@ -48254,19 +50462,43 @@
48254
50462
  {
48255
50463
  "color": "{base.color.neutral.0}",
48256
50464
  "alpha": 0.6,
48257
- "offsetX": "0px",
48258
- "offsetY": "1px",
48259
- "blur": "1px",
48260
- "spread": "0px",
50465
+ "offsetX": {
50466
+ "value": 0,
50467
+ "unit": "px"
50468
+ },
50469
+ "offsetY": {
50470
+ "value": 1,
50471
+ "unit": "px"
50472
+ },
50473
+ "blur": {
50474
+ "value": 1,
50475
+ "unit": "px"
50476
+ },
50477
+ "spread": {
50478
+ "value": 0,
50479
+ "unit": "px"
50480
+ },
48261
50481
  "inset": false
48262
50482
  },
48263
50483
  {
48264
50484
  "color": "{base.color.neutral.0}",
48265
50485
  "alpha": 0.6,
48266
- "offsetX": "0px",
48267
- "offsetY": "1px",
48268
- "blur": "3px",
48269
- "spread": "0px",
50486
+ "offsetX": {
50487
+ "value": 0,
50488
+ "unit": "px"
50489
+ },
50490
+ "offsetY": {
50491
+ "value": 1,
50492
+ "unit": "px"
50493
+ },
50494
+ "blur": {
50495
+ "value": 3,
50496
+ "unit": "px"
50497
+ },
50498
+ "spread": {
50499
+ "value": 0,
50500
+ "unit": "px"
50501
+ },
48270
50502
  "inset": false
48271
50503
  }
48272
50504
  ],
@@ -48274,6 +50506,10 @@
48274
50506
  "isSource": true,
48275
50507
  "$type": "shadow"
48276
50508
  }
50509
+ },
50510
+ "org.primer.llm": {
50511
+ "usage": ["button", "interactive-card", "clickable-element"],
50512
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48277
50513
  }
48278
50514
  },
48279
50515
  "key": "{shadow.resting.small}"
@@ -48281,8 +50517,9 @@
48281
50517
  "name": "shadow-resting-small",
48282
50518
  "attributes": {},
48283
50519
  "path": ["shadow", "resting", "small"],
48284
- "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
48285
- "type": "shadow"
50520
+ "value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
50521
+ "type": "shadow",
50522
+ "description": "Small resting shadow for buttons and interactive elements"
48286
50523
  },
48287
50524
  "shadow-resting-xsmall": {
48288
50525
  "key": "{shadow.resting.xsmall}",
@@ -48296,16 +50533,32 @@
48296
50533
  "$value": {
48297
50534
  "color": "#010409",
48298
50535
  "alpha": 0.8,
48299
- "offsetX": "0px",
48300
- "offsetY": "1px",
48301
- "blur": "1px",
48302
- "spread": "0px",
50536
+ "offsetX": {
50537
+ "value": 0,
50538
+ "unit": "px"
50539
+ },
50540
+ "offsetY": {
50541
+ "value": 1,
50542
+ "unit": "px"
50543
+ },
50544
+ "blur": {
50545
+ "value": 1,
50546
+ "unit": "px"
50547
+ },
50548
+ "spread": {
50549
+ "value": 0,
50550
+ "unit": "px"
50551
+ },
48303
50552
  "inset": false
48304
50553
  },
48305
50554
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48306
50555
  "isSource": true,
48307
50556
  "$type": "shadow"
48308
50557
  }
50558
+ },
50559
+ "org.primer.llm": {
50560
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50561
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48309
50562
  }
48310
50563
  },
48311
50564
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48314,13 +50567,26 @@
48314
50567
  "$value": {
48315
50568
  "color": "{base.color.neutral.0}",
48316
50569
  "alpha": 0.8,
48317
- "offsetX": "0px",
48318
- "offsetY": "1px",
48319
- "blur": "1px",
48320
- "spread": "0px",
50570
+ "offsetX": {
50571
+ "value": 0,
50572
+ "unit": "px"
50573
+ },
50574
+ "offsetY": {
50575
+ "value": 1,
50576
+ "unit": "px"
50577
+ },
50578
+ "blur": {
50579
+ "value": 1,
50580
+ "unit": "px"
50581
+ },
50582
+ "spread": {
50583
+ "value": 0,
50584
+ "unit": "px"
50585
+ },
48321
50586
  "inset": false
48322
50587
  },
48323
50588
  "$type": "shadow",
50589
+ "$description": "Extra small resting shadow for minimal elevation",
48324
50590
  "$extensions": {
48325
50591
  "org.primer.figma": {
48326
50592
  "collection": "mode",
@@ -48331,16 +50597,32 @@
48331
50597
  "$value": {
48332
50598
  "color": "{base.color.neutral.0}",
48333
50599
  "alpha": 0.8,
48334
- "offsetX": "0px",
48335
- "offsetY": "1px",
48336
- "blur": "1px",
48337
- "spread": "0px",
50600
+ "offsetX": {
50601
+ "value": 0,
50602
+ "unit": "px"
50603
+ },
50604
+ "offsetY": {
50605
+ "value": 1,
50606
+ "unit": "px"
50607
+ },
50608
+ "blur": {
50609
+ "value": 1,
50610
+ "unit": "px"
50611
+ },
50612
+ "spread": {
50613
+ "value": 0,
50614
+ "unit": "px"
50615
+ },
48338
50616
  "inset": false
48339
50617
  },
48340
50618
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48341
50619
  "isSource": true,
48342
50620
  "$type": "shadow"
48343
50621
  }
50622
+ },
50623
+ "org.primer.llm": {
50624
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50625
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48344
50626
  }
48345
50627
  },
48346
50628
  "key": "{shadow.resting.xsmall}"
@@ -48348,8 +50630,9 @@
48348
50630
  "name": "shadow-resting-xsmall",
48349
50631
  "attributes": {},
48350
50632
  "path": ["shadow", "resting", "xsmall"],
48351
- "value": "0px 1px 1px 0px #010409cc",
48352
- "type": "shadow"
50633
+ "value": "0 1px 1px 0 #010409cc",
50634
+ "type": "shadow",
50635
+ "description": "Extra small resting shadow for minimal elevation"
48353
50636
  },
48354
50637
  "sideNav-bgColor-selected": {
48355
50638
  "key": "{sideNav.bgColor.selected}",