@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-dimmed.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}"
@@ -2451,6 +2495,10 @@
2451
2495
  },
2452
2496
  "org.primer.overrides": {
2453
2497
  "dark": "#cdd9e5"
2498
+ },
2499
+ "org.primer.llm": {
2500
+ "doNotUse": true,
2501
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2454
2502
  }
2455
2503
  },
2456
2504
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2467,6 +2515,10 @@
2467
2515
  },
2468
2516
  "org.primer.overrides": {
2469
2517
  "dark": "{base.color.neutral.13}"
2518
+ },
2519
+ "org.primer.llm": {
2520
+ "doNotUse": true,
2521
+ "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."
2470
2522
  }
2471
2523
  },
2472
2524
  "key": "{bgColor.white}"
@@ -6957,10 +7009,22 @@
6957
7009
  {
6958
7010
  "color": "#4d210c",
6959
7011
  "alpha": 0.2,
6960
- "offsetX": "0px",
6961
- "offsetY": "1px",
6962
- "blur": "0px",
6963
- "spread": "0px",
7012
+ "offsetX": {
7013
+ "value": 0,
7014
+ "unit": "px"
7015
+ },
7016
+ "offsetY": {
7017
+ "value": 1,
7018
+ "unit": "px"
7019
+ },
7020
+ "blur": {
7021
+ "value": 0,
7022
+ "unit": "px"
7023
+ },
7024
+ "spread": {
7025
+ "value": 0,
7026
+ "unit": "px"
7027
+ },
6964
7028
  "inset": true
6965
7029
  }
6966
7030
  ],
@@ -6973,10 +7037,22 @@
6973
7037
  {
6974
7038
  "color": "#00000000",
6975
7039
  "alpha": 0,
6976
- "offsetX": "0px",
6977
- "offsetY": "0px",
6978
- "blur": "0px",
6979
- "spread": "0px",
7040
+ "offsetX": {
7041
+ "value": 0,
7042
+ "unit": "px"
7043
+ },
7044
+ "offsetY": {
7045
+ "value": 0,
7046
+ "unit": "px"
7047
+ },
7048
+ "blur": {
7049
+ "value": 0,
7050
+ "unit": "px"
7051
+ },
7052
+ "spread": {
7053
+ "value": 0,
7054
+ "unit": "px"
7055
+ },
6980
7056
  "inset": false
6981
7057
  }
6982
7058
  ],
@@ -6993,10 +7069,22 @@
6993
7069
  {
6994
7070
  "color": "{base.color.transparent}",
6995
7071
  "alpha": 0,
6996
- "offsetX": "0px",
6997
- "offsetY": "0px",
6998
- "blur": "0px",
6999
- "spread": "0px",
7072
+ "offsetX": {
7073
+ "value": 0,
7074
+ "unit": "px"
7075
+ },
7076
+ "offsetY": {
7077
+ "value": 0,
7078
+ "unit": "px"
7079
+ },
7080
+ "blur": {
7081
+ "value": 0,
7082
+ "unit": "px"
7083
+ },
7084
+ "spread": {
7085
+ "value": 0,
7086
+ "unit": "px"
7087
+ },
7000
7088
  "inset": false
7001
7089
  }
7002
7090
  ],
@@ -7012,10 +7100,22 @@
7012
7100
  {
7013
7101
  "color": "{base.color.orange.9}",
7014
7102
  "alpha": 0.2,
7015
- "offsetX": "0px",
7016
- "offsetY": "1px",
7017
- "blur": "0px",
7018
- "spread": "0px",
7103
+ "offsetX": {
7104
+ "value": 0,
7105
+ "unit": "px"
7106
+ },
7107
+ "offsetY": {
7108
+ "value": 1,
7109
+ "unit": "px"
7110
+ },
7111
+ "blur": {
7112
+ "value": 0,
7113
+ "unit": "px"
7114
+ },
7115
+ "spread": {
7116
+ "value": 0,
7117
+ "unit": "px"
7118
+ },
7019
7119
  "inset": true
7020
7120
  }
7021
7121
  ],
@@ -7028,10 +7128,22 @@
7028
7128
  {
7029
7129
  "color": "{base.color.transparent}",
7030
7130
  "alpha": 0,
7031
- "offsetX": "0px",
7032
- "offsetY": "0px",
7033
- "blur": "0px",
7034
- "spread": "0px",
7131
+ "offsetX": {
7132
+ "value": 0,
7133
+ "unit": "px"
7134
+ },
7135
+ "offsetY": {
7136
+ "value": 0,
7137
+ "unit": "px"
7138
+ },
7139
+ "blur": {
7140
+ "value": 0,
7141
+ "unit": "px"
7142
+ },
7143
+ "spread": {
7144
+ "value": 0,
7145
+ "unit": "px"
7146
+ },
7035
7147
  "inset": false
7036
7148
  }
7037
7149
  ],
@@ -7046,7 +7158,7 @@
7046
7158
  "name": "button-danger-shadow-selected",
7047
7159
  "attributes": {},
7048
7160
  "path": ["button", "danger", "shadow", "selected"],
7049
- "value": "0px 0px 0px 0px #000000",
7161
+ "value": "0 0 0 0 #00000000",
7050
7162
  "type": "shadow"
7051
7163
  },
7052
7164
  "button-default-bgColor-active": {
@@ -7420,10 +7532,22 @@
7420
7532
  {
7421
7533
  "color": "#00000000",
7422
7534
  "alpha": 0,
7423
- "offsetX": "0px",
7424
- "offsetY": "0px",
7425
- "blur": "0px",
7426
- "spread": "0px",
7535
+ "offsetX": {
7536
+ "value": 0,
7537
+ "unit": "px"
7538
+ },
7539
+ "offsetY": {
7540
+ "value": 0,
7541
+ "unit": "px"
7542
+ },
7543
+ "blur": {
7544
+ "value": 0,
7545
+ "unit": "px"
7546
+ },
7547
+ "spread": {
7548
+ "value": 0,
7549
+ "unit": "px"
7550
+ },
7427
7551
  "inset": false
7428
7552
  }
7429
7553
  ],
@@ -7440,10 +7564,22 @@
7440
7564
  {
7441
7565
  "color": "{base.color.transparent}",
7442
7566
  "alpha": 0,
7443
- "offsetX": "0px",
7444
- "offsetY": "0px",
7445
- "blur": "0px",
7446
- "spread": "0px",
7567
+ "offsetX": {
7568
+ "value": 0,
7569
+ "unit": "px"
7570
+ },
7571
+ "offsetY": {
7572
+ "value": 0,
7573
+ "unit": "px"
7574
+ },
7575
+ "blur": {
7576
+ "value": 0,
7577
+ "unit": "px"
7578
+ },
7579
+ "spread": {
7580
+ "value": 0,
7581
+ "unit": "px"
7582
+ },
7447
7583
  "inset": false
7448
7584
  }
7449
7585
  ],
@@ -7459,10 +7595,22 @@
7459
7595
  {
7460
7596
  "color": "{base.color.transparent}",
7461
7597
  "alpha": 0,
7462
- "offsetX": "0px",
7463
- "offsetY": "0px",
7464
- "blur": "0px",
7465
- "spread": "0px",
7598
+ "offsetX": {
7599
+ "value": 0,
7600
+ "unit": "px"
7601
+ },
7602
+ "offsetY": {
7603
+ "value": 0,
7604
+ "unit": "px"
7605
+ },
7606
+ "blur": {
7607
+ "value": 0,
7608
+ "unit": "px"
7609
+ },
7610
+ "spread": {
7611
+ "value": 0,
7612
+ "unit": "px"
7613
+ },
7466
7614
  "inset": false
7467
7615
  }
7468
7616
  ],
@@ -7477,7 +7625,7 @@
7477
7625
  "name": "button-default-shadow-resting",
7478
7626
  "attributes": {},
7479
7627
  "path": ["button", "default", "shadow", "resting"],
7480
- "value": "0px 0px 0px 0px #000000",
7628
+ "value": "0 0 0 0 #00000000",
7481
7629
  "type": "shadow"
7482
7630
  },
7483
7631
  "button-inactive-bgColor": {
@@ -9179,10 +9327,22 @@
9179
9327
  {
9180
9328
  "color": "#00000000",
9181
9329
  "alpha": 0,
9182
- "offsetX": "0px",
9183
- "offsetY": "0px",
9184
- "blur": "0px",
9185
- "spread": "0px",
9330
+ "offsetX": {
9331
+ "value": 0,
9332
+ "unit": "px"
9333
+ },
9334
+ "offsetY": {
9335
+ "value": 0,
9336
+ "unit": "px"
9337
+ },
9338
+ "blur": {
9339
+ "value": 0,
9340
+ "unit": "px"
9341
+ },
9342
+ "spread": {
9343
+ "value": 0,
9344
+ "unit": "px"
9345
+ },
9186
9346
  "inset": false
9187
9347
  }
9188
9348
  ],
@@ -9199,10 +9359,22 @@
9199
9359
  {
9200
9360
  "color": "{base.color.transparent}",
9201
9361
  "alpha": 0,
9202
- "offsetX": "0px",
9203
- "offsetY": "0px",
9204
- "blur": "0px",
9205
- "spread": "0px",
9362
+ "offsetX": {
9363
+ "value": 0,
9364
+ "unit": "px"
9365
+ },
9366
+ "offsetY": {
9367
+ "value": 0,
9368
+ "unit": "px"
9369
+ },
9370
+ "blur": {
9371
+ "value": 0,
9372
+ "unit": "px"
9373
+ },
9374
+ "spread": {
9375
+ "value": 0,
9376
+ "unit": "px"
9377
+ },
9206
9378
  "inset": false
9207
9379
  }
9208
9380
  ],
@@ -9218,10 +9390,22 @@
9218
9390
  {
9219
9391
  "color": "{base.color.transparent}",
9220
9392
  "alpha": 0,
9221
- "offsetX": "0px",
9222
- "offsetY": "0px",
9223
- "blur": "0px",
9224
- "spread": "0px",
9393
+ "offsetX": {
9394
+ "value": 0,
9395
+ "unit": "px"
9396
+ },
9397
+ "offsetY": {
9398
+ "value": 0,
9399
+ "unit": "px"
9400
+ },
9401
+ "blur": {
9402
+ "value": 0,
9403
+ "unit": "px"
9404
+ },
9405
+ "spread": {
9406
+ "value": 0,
9407
+ "unit": "px"
9408
+ },
9225
9409
  "inset": false
9226
9410
  }
9227
9411
  ],
@@ -9236,7 +9420,7 @@
9236
9420
  "name": "button-outline-shadow-selected",
9237
9421
  "attributes": {},
9238
9422
  "path": ["button", "outline", "shadow", "selected"],
9239
- "value": "0px 0px 0px 0px #000000",
9423
+ "value": "0 0 0 0 #00000000",
9240
9424
  "type": "shadow"
9241
9425
  },
9242
9426
  "button-primary-bgColor-active": {
@@ -10385,10 +10569,22 @@
10385
10569
  {
10386
10570
  "color": "#0f2d5c",
10387
10571
  "alpha": 0.3,
10388
- "offsetX": "0px",
10389
- "offsetY": "1px",
10390
- "blur": "0px",
10391
- "spread": "0px",
10572
+ "offsetX": {
10573
+ "value": 0,
10574
+ "unit": "px"
10575
+ },
10576
+ "offsetY": {
10577
+ "value": 1,
10578
+ "unit": "px"
10579
+ },
10580
+ "blur": {
10581
+ "value": 0,
10582
+ "unit": "px"
10583
+ },
10584
+ "spread": {
10585
+ "value": 0,
10586
+ "unit": "px"
10587
+ },
10392
10588
  "inset": true
10393
10589
  }
10394
10590
  ],
@@ -10401,10 +10597,22 @@
10401
10597
  {
10402
10598
  "color": "#0f2d5c",
10403
10599
  "alpha": 0.3,
10404
- "offsetX": "0px",
10405
- "offsetY": "1px",
10406
- "blur": "0px",
10407
- "spread": "0px",
10600
+ "offsetX": {
10601
+ "value": 0,
10602
+ "unit": "px"
10603
+ },
10604
+ "offsetY": {
10605
+ "value": 1,
10606
+ "unit": "px"
10607
+ },
10608
+ "blur": {
10609
+ "value": 0,
10610
+ "unit": "px"
10611
+ },
10612
+ "spread": {
10613
+ "value": 0,
10614
+ "unit": "px"
10615
+ },
10408
10616
  "inset": true
10409
10617
  }
10410
10618
  ],
@@ -10417,10 +10625,22 @@
10417
10625
  {
10418
10626
  "color": "#00000000",
10419
10627
  "alpha": 0,
10420
- "offsetX": "0px",
10421
- "offsetY": "0px",
10422
- "blur": "0px",
10423
- "spread": "0px",
10628
+ "offsetX": {
10629
+ "value": 0,
10630
+ "unit": "px"
10631
+ },
10632
+ "offsetY": {
10633
+ "value": 0,
10634
+ "unit": "px"
10635
+ },
10636
+ "blur": {
10637
+ "value": 0,
10638
+ "unit": "px"
10639
+ },
10640
+ "spread": {
10641
+ "value": 0,
10642
+ "unit": "px"
10643
+ },
10424
10644
  "inset": false
10425
10645
  }
10426
10646
  ],
@@ -10437,10 +10657,22 @@
10437
10657
  {
10438
10658
  "color": "{base.color.transparent}",
10439
10659
  "alpha": 0,
10440
- "offsetX": "0px",
10441
- "offsetY": "0px",
10442
- "blur": "0px",
10443
- "spread": "0px",
10660
+ "offsetX": {
10661
+ "value": 0,
10662
+ "unit": "px"
10663
+ },
10664
+ "offsetY": {
10665
+ "value": 0,
10666
+ "unit": "px"
10667
+ },
10668
+ "blur": {
10669
+ "value": 0,
10670
+ "unit": "px"
10671
+ },
10672
+ "spread": {
10673
+ "value": 0,
10674
+ "unit": "px"
10675
+ },
10444
10676
  "inset": false
10445
10677
  }
10446
10678
  ],
@@ -10456,10 +10688,22 @@
10456
10688
  {
10457
10689
  "color": "{base.color.blue.9}",
10458
10690
  "alpha": 0.3,
10459
- "offsetX": "0px",
10460
- "offsetY": "1px",
10461
- "blur": "0px",
10462
- "spread": "0px",
10691
+ "offsetX": {
10692
+ "value": 0,
10693
+ "unit": "px"
10694
+ },
10695
+ "offsetY": {
10696
+ "value": 1,
10697
+ "unit": "px"
10698
+ },
10699
+ "blur": {
10700
+ "value": 0,
10701
+ "unit": "px"
10702
+ },
10703
+ "spread": {
10704
+ "value": 0,
10705
+ "unit": "px"
10706
+ },
10463
10707
  "inset": true
10464
10708
  }
10465
10709
  ],
@@ -10472,10 +10716,22 @@
10472
10716
  {
10473
10717
  "color": "{base.color.blue.9}",
10474
10718
  "alpha": 0.3,
10475
- "offsetX": "0px",
10476
- "offsetY": "1px",
10477
- "blur": "0px",
10478
- "spread": "0px",
10719
+ "offsetX": {
10720
+ "value": 0,
10721
+ "unit": "px"
10722
+ },
10723
+ "offsetY": {
10724
+ "value": 1,
10725
+ "unit": "px"
10726
+ },
10727
+ "blur": {
10728
+ "value": 0,
10729
+ "unit": "px"
10730
+ },
10731
+ "spread": {
10732
+ "value": 0,
10733
+ "unit": "px"
10734
+ },
10479
10735
  "inset": true
10480
10736
  }
10481
10737
  ],
@@ -10488,10 +10744,22 @@
10488
10744
  {
10489
10745
  "color": "{base.color.transparent}",
10490
10746
  "alpha": 0,
10491
- "offsetX": "0px",
10492
- "offsetY": "0px",
10493
- "blur": "0px",
10494
- "spread": "0px",
10747
+ "offsetX": {
10748
+ "value": 0,
10749
+ "unit": "px"
10750
+ },
10751
+ "offsetY": {
10752
+ "value": 0,
10753
+ "unit": "px"
10754
+ },
10755
+ "blur": {
10756
+ "value": 0,
10757
+ "unit": "px"
10758
+ },
10759
+ "spread": {
10760
+ "value": 0,
10761
+ "unit": "px"
10762
+ },
10495
10763
  "inset": false
10496
10764
  }
10497
10765
  ],
@@ -10506,7 +10774,7 @@
10506
10774
  "name": "button-primary-shadow-selected",
10507
10775
  "attributes": {},
10508
10776
  "path": ["button", "primary", "shadow", "selected"],
10509
- "value": "0px 0px 0px 0px #000000",
10777
+ "value": "0 0 0 0 #00000000",
10510
10778
  "type": "shadow"
10511
10779
  },
10512
10780
  "button-star-iconColor": {
@@ -37243,6 +37511,10 @@
37243
37511
  },
37244
37512
  "org.primer.overrides": {
37245
37513
  "dark": "#010409"
37514
+ },
37515
+ "org.primer.llm": {
37516
+ "doNotUse": true,
37517
+ "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."
37246
37518
  }
37247
37519
  },
37248
37520
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37259,6 +37531,10 @@
37259
37531
  },
37260
37532
  "org.primer.overrides": {
37261
37533
  "dark": "{base.color.neutral.0}"
37534
+ },
37535
+ "org.primer.llm": {
37536
+ "doNotUse": true,
37537
+ "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."
37262
37538
  }
37263
37539
  },
37264
37540
  "key": "{fgColor.black}"
@@ -38232,6 +38508,10 @@
38232
38508
  },
38233
38509
  "org.primer.overrides": {
38234
38510
  "dark": "#cdd9e5"
38511
+ },
38512
+ "org.primer.llm": {
38513
+ "doNotUse": true,
38514
+ "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."
38235
38515
  }
38236
38516
  },
38237
38517
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38248,6 +38528,10 @@
38248
38528
  },
38249
38529
  "org.primer.overrides": {
38250
38530
  "dark": "{base.color.neutral.13}"
38531
+ },
38532
+ "org.primer.llm": {
38533
+ "doNotUse": true,
38534
+ "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."
38251
38535
  }
38252
38536
  },
38253
38537
  "key": "{fgColor.white}"
@@ -38273,7 +38557,10 @@
38273
38557
  "$value": {
38274
38558
  "color": "{focus.outlineColor}",
38275
38559
  "style": "solid",
38276
- "width": "2px"
38560
+ "width": {
38561
+ "value": 2,
38562
+ "unit": "px"
38563
+ }
38277
38564
  },
38278
38565
  "$type": "border",
38279
38566
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47446,18 +47733,183 @@
47446
47733
  {
47447
47734
  "color": "#3d444db3",
47448
47735
  "alpha": 1,
47449
- "offsetX": "0px",
47450
- "offsetY": "0px",
47451
- "blur": "0px",
47452
- "spread": "1px"
47736
+ "offsetX": {
47737
+ "value": 0,
47738
+ "unit": "px"
47739
+ },
47740
+ "offsetY": {
47741
+ "value": 0,
47742
+ "unit": "px"
47743
+ },
47744
+ "blur": {
47745
+ "value": 0,
47746
+ "unit": "px"
47747
+ },
47748
+ "spread": {
47749
+ "value": 1,
47750
+ "unit": "px"
47751
+ }
47453
47752
  },
47454
47753
  {
47455
47754
  "color": "#010409",
47456
47755
  "alpha": 1,
47457
- "offsetX": "0px",
47458
- "offsetY": "24px",
47459
- "blur": "48px",
47460
- "spread": "0px"
47756
+ "offsetX": {
47757
+ "value": 0,
47758
+ "unit": "px"
47759
+ },
47760
+ "offsetY": {
47761
+ "value": 24,
47762
+ "unit": "px"
47763
+ },
47764
+ "blur": {
47765
+ "value": 48,
47766
+ "unit": "px"
47767
+ },
47768
+ "spread": {
47769
+ "value": 0,
47770
+ "unit": "px"
47771
+ }
47772
+ }
47773
+ ],
47774
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47775
+ "isSource": true,
47776
+ "$type": "shadow"
47777
+ },
47778
+ "light-high-contrast": {
47779
+ "$value": [
47780
+ {
47781
+ "color": "#3d444db3",
47782
+ "alpha": 1,
47783
+ "offsetX": {
47784
+ "value": 0,
47785
+ "unit": "px"
47786
+ },
47787
+ "offsetY": {
47788
+ "value": 0,
47789
+ "unit": "px"
47790
+ },
47791
+ "blur": {
47792
+ "value": 0,
47793
+ "unit": "px"
47794
+ },
47795
+ "spread": {
47796
+ "value": 1,
47797
+ "unit": "px"
47798
+ }
47799
+ },
47800
+ {
47801
+ "color": "#f0f6fc",
47802
+ "alpha": 0.24,
47803
+ "offsetX": {
47804
+ "value": 0,
47805
+ "unit": "px"
47806
+ },
47807
+ "offsetY": {
47808
+ "value": 40,
47809
+ "unit": "px"
47810
+ },
47811
+ "blur": {
47812
+ "value": 80,
47813
+ "unit": "px"
47814
+ },
47815
+ "spread": {
47816
+ "value": 0,
47817
+ "unit": "px"
47818
+ }
47819
+ }
47820
+ ],
47821
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47822
+ "isSource": true,
47823
+ "$type": "shadow"
47824
+ },
47825
+ "light-protanopia-deuteranopia-high-contrast": {
47826
+ "$value": [
47827
+ {
47828
+ "color": "#3d444db3",
47829
+ "alpha": 1,
47830
+ "offsetX": {
47831
+ "value": 0,
47832
+ "unit": "px"
47833
+ },
47834
+ "offsetY": {
47835
+ "value": 0,
47836
+ "unit": "px"
47837
+ },
47838
+ "blur": {
47839
+ "value": 0,
47840
+ "unit": "px"
47841
+ },
47842
+ "spread": {
47843
+ "value": 1,
47844
+ "unit": "px"
47845
+ }
47846
+ },
47847
+ {
47848
+ "color": "#f0f6fc",
47849
+ "alpha": 0.24,
47850
+ "offsetX": {
47851
+ "value": 0,
47852
+ "unit": "px"
47853
+ },
47854
+ "offsetY": {
47855
+ "value": 40,
47856
+ "unit": "px"
47857
+ },
47858
+ "blur": {
47859
+ "value": 80,
47860
+ "unit": "px"
47861
+ },
47862
+ "spread": {
47863
+ "value": 0,
47864
+ "unit": "px"
47865
+ }
47866
+ }
47867
+ ],
47868
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47869
+ "isSource": true,
47870
+ "$type": "shadow"
47871
+ },
47872
+ "light-tritanopia-high-contrast": {
47873
+ "$value": [
47874
+ {
47875
+ "color": "#3d444db3",
47876
+ "alpha": 1,
47877
+ "offsetX": {
47878
+ "value": 0,
47879
+ "unit": "px"
47880
+ },
47881
+ "offsetY": {
47882
+ "value": 0,
47883
+ "unit": "px"
47884
+ },
47885
+ "blur": {
47886
+ "value": 0,
47887
+ "unit": "px"
47888
+ },
47889
+ "spread": {
47890
+ "value": 1,
47891
+ "unit": "px"
47892
+ }
47893
+ },
47894
+ {
47895
+ "color": "#f0f6fc",
47896
+ "alpha": 0.24,
47897
+ "offsetX": {
47898
+ "value": 0,
47899
+ "unit": "px"
47900
+ },
47901
+ "offsetY": {
47902
+ "value": 40,
47903
+ "unit": "px"
47904
+ },
47905
+ "blur": {
47906
+ "value": 80,
47907
+ "unit": "px"
47908
+ },
47909
+ "spread": {
47910
+ "value": 0,
47911
+ "unit": "px"
47912
+ }
47461
47913
  }
47462
47914
  ],
47463
47915
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47477,18 +47929,42 @@
47477
47929
  {
47478
47930
  "color": "{overlay.borderColor}",
47479
47931
  "alpha": 1,
47480
- "offsetX": "0px",
47481
- "offsetY": "0px",
47482
- "blur": "0px",
47483
- "spread": "1px"
47932
+ "offsetX": {
47933
+ "value": 0,
47934
+ "unit": "px"
47935
+ },
47936
+ "offsetY": {
47937
+ "value": 0,
47938
+ "unit": "px"
47939
+ },
47940
+ "blur": {
47941
+ "value": 0,
47942
+ "unit": "px"
47943
+ },
47944
+ "spread": {
47945
+ "value": 1,
47946
+ "unit": "px"
47947
+ }
47484
47948
  },
47485
47949
  {
47486
47950
  "color": "{base.color.neutral.0}",
47487
47951
  "alpha": 1,
47488
- "offsetX": "0px",
47489
- "offsetY": "24px",
47490
- "blur": "48px",
47491
- "spread": "0px"
47952
+ "offsetX": {
47953
+ "value": 0,
47954
+ "unit": "px"
47955
+ },
47956
+ "offsetY": {
47957
+ "value": 24,
47958
+ "unit": "px"
47959
+ },
47960
+ "blur": {
47961
+ "value": 48,
47962
+ "unit": "px"
47963
+ },
47964
+ "spread": {
47965
+ "value": 0,
47966
+ "unit": "px"
47967
+ }
47492
47968
  }
47493
47969
  ],
47494
47970
  "$type": "shadow",
@@ -47504,18 +47980,183 @@
47504
47980
  {
47505
47981
  "color": "{overlay.borderColor}",
47506
47982
  "alpha": 1,
47507
- "offsetX": "0px",
47508
- "offsetY": "0px",
47509
- "blur": "0px",
47510
- "spread": "1px"
47983
+ "offsetX": {
47984
+ "value": 0,
47985
+ "unit": "px"
47986
+ },
47987
+ "offsetY": {
47988
+ "value": 0,
47989
+ "unit": "px"
47990
+ },
47991
+ "blur": {
47992
+ "value": 0,
47993
+ "unit": "px"
47994
+ },
47995
+ "spread": {
47996
+ "value": 1,
47997
+ "unit": "px"
47998
+ }
47511
47999
  },
47512
48000
  {
47513
48001
  "color": "{base.color.neutral.0}",
47514
48002
  "alpha": 1,
47515
- "offsetX": "0px",
47516
- "offsetY": "24px",
47517
- "blur": "48px",
47518
- "spread": "0px"
48003
+ "offsetX": {
48004
+ "value": 0,
48005
+ "unit": "px"
48006
+ },
48007
+ "offsetY": {
48008
+ "value": 24,
48009
+ "unit": "px"
48010
+ },
48011
+ "blur": {
48012
+ "value": 48,
48013
+ "unit": "px"
48014
+ },
48015
+ "spread": {
48016
+ "value": 0,
48017
+ "unit": "px"
48018
+ }
48019
+ }
48020
+ ],
48021
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48022
+ "isSource": true,
48023
+ "$type": "shadow"
48024
+ },
48025
+ "light-high-contrast": {
48026
+ "$value": [
48027
+ {
48028
+ "color": "{overlay.borderColor}",
48029
+ "alpha": 1,
48030
+ "offsetX": {
48031
+ "value": 0,
48032
+ "unit": "px"
48033
+ },
48034
+ "offsetY": {
48035
+ "value": 0,
48036
+ "unit": "px"
48037
+ },
48038
+ "blur": {
48039
+ "value": 0,
48040
+ "unit": "px"
48041
+ },
48042
+ "spread": {
48043
+ "value": 1,
48044
+ "unit": "px"
48045
+ }
48046
+ },
48047
+ {
48048
+ "color": "{base.color.neutral.12}",
48049
+ "alpha": 0.24,
48050
+ "offsetX": {
48051
+ "value": 0,
48052
+ "unit": "px"
48053
+ },
48054
+ "offsetY": {
48055
+ "value": 40,
48056
+ "unit": "px"
48057
+ },
48058
+ "blur": {
48059
+ "value": 80,
48060
+ "unit": "px"
48061
+ },
48062
+ "spread": {
48063
+ "value": 0,
48064
+ "unit": "px"
48065
+ }
48066
+ }
48067
+ ],
48068
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48069
+ "isSource": true,
48070
+ "$type": "shadow"
48071
+ },
48072
+ "light-protanopia-deuteranopia-high-contrast": {
48073
+ "$value": [
48074
+ {
48075
+ "color": "{overlay.borderColor}",
48076
+ "alpha": 1,
48077
+ "offsetX": {
48078
+ "value": 0,
48079
+ "unit": "px"
48080
+ },
48081
+ "offsetY": {
48082
+ "value": 0,
48083
+ "unit": "px"
48084
+ },
48085
+ "blur": {
48086
+ "value": 0,
48087
+ "unit": "px"
48088
+ },
48089
+ "spread": {
48090
+ "value": 1,
48091
+ "unit": "px"
48092
+ }
48093
+ },
48094
+ {
48095
+ "color": "{base.color.neutral.12}",
48096
+ "alpha": 0.24,
48097
+ "offsetX": {
48098
+ "value": 0,
48099
+ "unit": "px"
48100
+ },
48101
+ "offsetY": {
48102
+ "value": 40,
48103
+ "unit": "px"
48104
+ },
48105
+ "blur": {
48106
+ "value": 80,
48107
+ "unit": "px"
48108
+ },
48109
+ "spread": {
48110
+ "value": 0,
48111
+ "unit": "px"
48112
+ }
48113
+ }
48114
+ ],
48115
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48116
+ "isSource": true,
48117
+ "$type": "shadow"
48118
+ },
48119
+ "light-tritanopia-high-contrast": {
48120
+ "$value": [
48121
+ {
48122
+ "color": "{overlay.borderColor}",
48123
+ "alpha": 1,
48124
+ "offsetX": {
48125
+ "value": 0,
48126
+ "unit": "px"
48127
+ },
48128
+ "offsetY": {
48129
+ "value": 0,
48130
+ "unit": "px"
48131
+ },
48132
+ "blur": {
48133
+ "value": 0,
48134
+ "unit": "px"
48135
+ },
48136
+ "spread": {
48137
+ "value": 1,
48138
+ "unit": "px"
48139
+ }
48140
+ },
48141
+ {
48142
+ "color": "{base.color.neutral.12}",
48143
+ "alpha": 0.24,
48144
+ "offsetX": {
48145
+ "value": 0,
48146
+ "unit": "px"
48147
+ },
48148
+ "offsetY": {
48149
+ "value": 40,
48150
+ "unit": "px"
48151
+ },
48152
+ "blur": {
48153
+ "value": 80,
48154
+ "unit": "px"
48155
+ },
48156
+ "spread": {
48157
+ "value": 0,
48158
+ "unit": "px"
48159
+ }
47519
48160
  }
47520
48161
  ],
47521
48162
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47533,7 +48174,7 @@
47533
48174
  "name": "shadow-floating-large",
47534
48175
  "attributes": {},
47535
48176
  "path": ["shadow", "floating", "large"],
47536
- "value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
48177
+ "value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47537
48178
  "type": "shadow",
47538
48179
  "description": "Large floating shadow for modals and dialogs"
47539
48180
  },
@@ -47547,24 +48188,52 @@
47547
48188
  {
47548
48189
  "color": "#010409",
47549
48190
  "alpha": 0.4,
47550
- "offsetX": "0px",
47551
- "offsetY": "6px",
47552
- "blur": "12px",
47553
- "spread": "-3px"
48191
+ "offsetX": {
48192
+ "value": 0,
48193
+ "unit": "px"
48194
+ },
48195
+ "offsetY": {
48196
+ "value": 6,
48197
+ "unit": "px"
48198
+ },
48199
+ "blur": {
48200
+ "value": 12,
48201
+ "unit": "px"
48202
+ },
48203
+ "spread": {
48204
+ "value": -3,
48205
+ "unit": "px"
48206
+ }
47554
48207
  },
47555
48208
  {
47556
48209
  "color": "#010409",
47557
48210
  "alpha": 0.4,
47558
- "offsetX": "0px",
47559
- "offsetY": "6px",
47560
- "blur": "18px",
47561
- "spread": "0px"
48211
+ "offsetX": {
48212
+ "value": 0,
48213
+ "unit": "px"
48214
+ },
48215
+ "offsetY": {
48216
+ "value": 6,
48217
+ "unit": "px"
48218
+ },
48219
+ "blur": {
48220
+ "value": 18,
48221
+ "unit": "px"
48222
+ },
48223
+ "spread": {
48224
+ "value": 0,
48225
+ "unit": "px"
48226
+ }
47562
48227
  }
47563
48228
  ],
47564
48229
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47565
48230
  "isSource": true,
47566
48231
  "$type": "shadow"
47567
48232
  }
48233
+ },
48234
+ "org.primer.llm": {
48235
+ "usage": ["legacy-component", "backward-compatibility"],
48236
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47568
48237
  }
47569
48238
  },
47570
48239
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47574,21 +48243,46 @@
47574
48243
  {
47575
48244
  "color": "{base.color.neutral.0}",
47576
48245
  "alpha": 0.4,
47577
- "offsetX": "0px",
47578
- "offsetY": "6px",
47579
- "blur": "12px",
47580
- "spread": "-3px"
48246
+ "offsetX": {
48247
+ "value": 0,
48248
+ "unit": "px"
48249
+ },
48250
+ "offsetY": {
48251
+ "value": 6,
48252
+ "unit": "px"
48253
+ },
48254
+ "blur": {
48255
+ "value": 12,
48256
+ "unit": "px"
48257
+ },
48258
+ "spread": {
48259
+ "value": -3,
48260
+ "unit": "px"
48261
+ }
47581
48262
  },
47582
48263
  {
47583
48264
  "color": "{base.color.neutral.0}",
47584
48265
  "alpha": 0.4,
47585
- "offsetX": "0px",
47586
- "offsetY": "6px",
47587
- "blur": "18px",
47588
- "spread": "0px"
48266
+ "offsetX": {
48267
+ "value": 0,
48268
+ "unit": "px"
48269
+ },
48270
+ "offsetY": {
48271
+ "value": 6,
48272
+ "unit": "px"
48273
+ },
48274
+ "blur": {
48275
+ "value": 18,
48276
+ "unit": "px"
48277
+ },
48278
+ "spread": {
48279
+ "value": 0,
48280
+ "unit": "px"
48281
+ }
47589
48282
  }
47590
48283
  ],
47591
48284
  "$type": "shadow",
48285
+ "$description": "Legacy floating shadow for backward compatibility",
47592
48286
  "$extensions": {
47593
48287
  "org.primer.figma": {},
47594
48288
  "org.primer.overrides": {
@@ -47597,24 +48291,52 @@
47597
48291
  {
47598
48292
  "color": "{base.color.neutral.0}",
47599
48293
  "alpha": 0.4,
47600
- "offsetX": "0px",
47601
- "offsetY": "6px",
47602
- "blur": "12px",
47603
- "spread": "-3px"
48294
+ "offsetX": {
48295
+ "value": 0,
48296
+ "unit": "px"
48297
+ },
48298
+ "offsetY": {
48299
+ "value": 6,
48300
+ "unit": "px"
48301
+ },
48302
+ "blur": {
48303
+ "value": 12,
48304
+ "unit": "px"
48305
+ },
48306
+ "spread": {
48307
+ "value": -3,
48308
+ "unit": "px"
48309
+ }
47604
48310
  },
47605
48311
  {
47606
48312
  "color": "{base.color.neutral.0}",
47607
48313
  "alpha": 0.4,
47608
- "offsetX": "0px",
47609
- "offsetY": "6px",
47610
- "blur": "18px",
47611
- "spread": "0px"
48314
+ "offsetX": {
48315
+ "value": 0,
48316
+ "unit": "px"
48317
+ },
48318
+ "offsetY": {
48319
+ "value": 6,
48320
+ "unit": "px"
48321
+ },
48322
+ "blur": {
48323
+ "value": 18,
48324
+ "unit": "px"
48325
+ },
48326
+ "spread": {
48327
+ "value": 0,
48328
+ "unit": "px"
48329
+ }
47612
48330
  }
47613
48331
  ],
47614
48332
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47615
48333
  "isSource": true,
47616
48334
  "$type": "shadow"
47617
48335
  }
48336
+ },
48337
+ "org.primer.llm": {
48338
+ "usage": ["legacy-component", "backward-compatibility"],
48339
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47618
48340
  }
47619
48341
  },
47620
48342
  "key": "{shadow.floating.legacy}"
@@ -47622,8 +48344,9 @@
47622
48344
  "name": "shadow-floating-legacy",
47623
48345
  "attributes": {},
47624
48346
  "path": ["shadow", "floating", "legacy"],
47625
- "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47626
- "type": "shadow"
48347
+ "value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
48348
+ "type": "shadow",
48349
+ "description": "Legacy floating shadow for backward compatibility"
47627
48350
  },
47628
48351
  "shadow-floating-medium": {
47629
48352
  "key": "{shadow.floating.medium}",
@@ -47638,48 +48361,433 @@
47638
48361
  {
47639
48362
  "color": "#3d444db3",
47640
48363
  "alpha": 1,
47641
- "offsetX": "0px",
47642
- "offsetY": "0px",
47643
- "blur": "0px",
47644
- "spread": "1px"
48364
+ "offsetX": {
48365
+ "value": 0,
48366
+ "unit": "px"
48367
+ },
48368
+ "offsetY": {
48369
+ "value": 0,
48370
+ "unit": "px"
48371
+ },
48372
+ "blur": {
48373
+ "value": 0,
48374
+ "unit": "px"
48375
+ },
48376
+ "spread": {
48377
+ "value": 1,
48378
+ "unit": "px"
48379
+ }
47645
48380
  },
47646
48381
  {
47647
48382
  "color": "#010409",
47648
48383
  "alpha": 0.4,
47649
- "offsetX": "0px",
47650
- "offsetY": "8px",
47651
- "blur": "16px",
47652
- "spread": "-4px"
48384
+ "offsetX": {
48385
+ "value": 0,
48386
+ "unit": "px"
48387
+ },
48388
+ "offsetY": {
48389
+ "value": 8,
48390
+ "unit": "px"
48391
+ },
48392
+ "blur": {
48393
+ "value": 16,
48394
+ "unit": "px"
48395
+ },
48396
+ "spread": {
48397
+ "value": -4,
48398
+ "unit": "px"
48399
+ }
47653
48400
  },
47654
48401
  {
47655
48402
  "color": "#010409",
47656
48403
  "alpha": 0.4,
47657
- "offsetX": "0px",
47658
- "offsetY": "4px",
47659
- "blur": "32px",
47660
- "spread": "-4px"
48404
+ "offsetX": {
48405
+ "value": 0,
48406
+ "unit": "px"
48407
+ },
48408
+ "offsetY": {
48409
+ "value": 4,
48410
+ "unit": "px"
48411
+ },
48412
+ "blur": {
48413
+ "value": 32,
48414
+ "unit": "px"
48415
+ },
48416
+ "spread": {
48417
+ "value": -4,
48418
+ "unit": "px"
48419
+ }
47661
48420
  },
47662
48421
  {
47663
48422
  "color": "#010409",
47664
48423
  "alpha": 0.4,
47665
- "offsetX": "0px",
47666
- "offsetY": "24px",
47667
- "blur": "48px",
47668
- "spread": "-12px"
48424
+ "offsetX": {
48425
+ "value": 0,
48426
+ "unit": "px"
48427
+ },
48428
+ "offsetY": {
48429
+ "value": 24,
48430
+ "unit": "px"
48431
+ },
48432
+ "blur": {
48433
+ "value": 48,
48434
+ "unit": "px"
48435
+ },
48436
+ "spread": {
48437
+ "value": -12,
48438
+ "unit": "px"
48439
+ }
47669
48440
  },
47670
48441
  {
47671
48442
  "color": "#010409",
47672
48443
  "alpha": 0.4,
47673
- "offsetX": "0px",
47674
- "offsetY": "48px",
47675
- "blur": "96px",
47676
- "spread": "-24px"
48444
+ "offsetX": {
48445
+ "value": 0,
48446
+ "unit": "px"
48447
+ },
48448
+ "offsetY": {
48449
+ "value": 48,
48450
+ "unit": "px"
48451
+ },
48452
+ "blur": {
48453
+ "value": 96,
48454
+ "unit": "px"
48455
+ },
48456
+ "spread": {
48457
+ "value": -24,
48458
+ "unit": "px"
48459
+ }
48460
+ }
48461
+ ],
48462
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48463
+ "isSource": true,
48464
+ "$type": "shadow"
48465
+ },
48466
+ "light-high-contrast": {
48467
+ "$value": [
48468
+ {
48469
+ "color": "#3d444db3",
48470
+ "alpha": 1,
48471
+ "offsetX": {
48472
+ "value": 0,
48473
+ "unit": "px"
48474
+ },
48475
+ "offsetY": {
48476
+ "value": 0,
48477
+ "unit": "px"
48478
+ },
48479
+ "blur": {
48480
+ "value": 0,
48481
+ "unit": "px"
48482
+ },
48483
+ "spread": {
48484
+ "value": 1,
48485
+ "unit": "px"
48486
+ }
48487
+ },
48488
+ {
48489
+ "color": "#f0f6fc",
48490
+ "alpha": 0.08,
48491
+ "offsetX": {
48492
+ "value": 0,
48493
+ "unit": "px"
48494
+ },
48495
+ "offsetY": {
48496
+ "value": 8,
48497
+ "unit": "px"
48498
+ },
48499
+ "blur": {
48500
+ "value": 16,
48501
+ "unit": "px"
48502
+ },
48503
+ "spread": {
48504
+ "value": -4,
48505
+ "unit": "px"
48506
+ }
48507
+ },
48508
+ {
48509
+ "color": "#f0f6fc",
48510
+ "alpha": 0.08,
48511
+ "offsetX": {
48512
+ "value": 0,
48513
+ "unit": "px"
48514
+ },
48515
+ "offsetY": {
48516
+ "value": 4,
48517
+ "unit": "px"
48518
+ },
48519
+ "blur": {
48520
+ "value": 32,
48521
+ "unit": "px"
48522
+ },
48523
+ "spread": {
48524
+ "value": -4,
48525
+ "unit": "px"
48526
+ }
48527
+ },
48528
+ {
48529
+ "color": "#f0f6fc",
48530
+ "alpha": 0.08,
48531
+ "offsetX": {
48532
+ "value": 0,
48533
+ "unit": "px"
48534
+ },
48535
+ "offsetY": {
48536
+ "value": 24,
48537
+ "unit": "px"
48538
+ },
48539
+ "blur": {
48540
+ "value": 48,
48541
+ "unit": "px"
48542
+ },
48543
+ "spread": {
48544
+ "value": -12,
48545
+ "unit": "px"
48546
+ }
48547
+ },
48548
+ {
48549
+ "color": "#f0f6fc",
48550
+ "alpha": 0.08,
48551
+ "offsetX": {
48552
+ "value": 0,
48553
+ "unit": "px"
48554
+ },
48555
+ "offsetY": {
48556
+ "value": 48,
48557
+ "unit": "px"
48558
+ },
48559
+ "blur": {
48560
+ "value": 96,
48561
+ "unit": "px"
48562
+ },
48563
+ "spread": {
48564
+ "value": -24,
48565
+ "unit": "px"
48566
+ }
48567
+ }
48568
+ ],
48569
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48570
+ "isSource": true,
48571
+ "$type": "shadow"
48572
+ },
48573
+ "light-protanopia-deuteranopia-high-contrast": {
48574
+ "$value": [
48575
+ {
48576
+ "color": "#3d444db3",
48577
+ "alpha": 1,
48578
+ "offsetX": {
48579
+ "value": 0,
48580
+ "unit": "px"
48581
+ },
48582
+ "offsetY": {
48583
+ "value": 0,
48584
+ "unit": "px"
48585
+ },
48586
+ "blur": {
48587
+ "value": 0,
48588
+ "unit": "px"
48589
+ },
48590
+ "spread": {
48591
+ "value": 1,
48592
+ "unit": "px"
48593
+ }
48594
+ },
48595
+ {
48596
+ "color": "#f0f6fc",
48597
+ "alpha": 0.08,
48598
+ "offsetX": {
48599
+ "value": 0,
48600
+ "unit": "px"
48601
+ },
48602
+ "offsetY": {
48603
+ "value": 8,
48604
+ "unit": "px"
48605
+ },
48606
+ "blur": {
48607
+ "value": 16,
48608
+ "unit": "px"
48609
+ },
48610
+ "spread": {
48611
+ "value": -4,
48612
+ "unit": "px"
48613
+ }
48614
+ },
48615
+ {
48616
+ "color": "#f0f6fc",
48617
+ "alpha": 0.08,
48618
+ "offsetX": {
48619
+ "value": 0,
48620
+ "unit": "px"
48621
+ },
48622
+ "offsetY": {
48623
+ "value": 4,
48624
+ "unit": "px"
48625
+ },
48626
+ "blur": {
48627
+ "value": 32,
48628
+ "unit": "px"
48629
+ },
48630
+ "spread": {
48631
+ "value": -4,
48632
+ "unit": "px"
48633
+ }
48634
+ },
48635
+ {
48636
+ "color": "#f0f6fc",
48637
+ "alpha": 0.08,
48638
+ "offsetX": {
48639
+ "value": 0,
48640
+ "unit": "px"
48641
+ },
48642
+ "offsetY": {
48643
+ "value": 24,
48644
+ "unit": "px"
48645
+ },
48646
+ "blur": {
48647
+ "value": 48,
48648
+ "unit": "px"
48649
+ },
48650
+ "spread": {
48651
+ "value": -12,
48652
+ "unit": "px"
48653
+ }
48654
+ },
48655
+ {
48656
+ "color": "#f0f6fc",
48657
+ "alpha": 0.08,
48658
+ "offsetX": {
48659
+ "value": 0,
48660
+ "unit": "px"
48661
+ },
48662
+ "offsetY": {
48663
+ "value": 48,
48664
+ "unit": "px"
48665
+ },
48666
+ "blur": {
48667
+ "value": 96,
48668
+ "unit": "px"
48669
+ },
48670
+ "spread": {
48671
+ "value": -24,
48672
+ "unit": "px"
48673
+ }
48674
+ }
48675
+ ],
48676
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48677
+ "isSource": true,
48678
+ "$type": "shadow"
48679
+ },
48680
+ "light-tritanopia-high-contrast": {
48681
+ "$value": [
48682
+ {
48683
+ "color": "#3d444db3",
48684
+ "alpha": 1,
48685
+ "offsetX": {
48686
+ "value": 0,
48687
+ "unit": "px"
48688
+ },
48689
+ "offsetY": {
48690
+ "value": 0,
48691
+ "unit": "px"
48692
+ },
48693
+ "blur": {
48694
+ "value": 0,
48695
+ "unit": "px"
48696
+ },
48697
+ "spread": {
48698
+ "value": 1,
48699
+ "unit": "px"
48700
+ }
48701
+ },
48702
+ {
48703
+ "color": "#f0f6fc",
48704
+ "alpha": 0.08,
48705
+ "offsetX": {
48706
+ "value": 0,
48707
+ "unit": "px"
48708
+ },
48709
+ "offsetY": {
48710
+ "value": 8,
48711
+ "unit": "px"
48712
+ },
48713
+ "blur": {
48714
+ "value": 16,
48715
+ "unit": "px"
48716
+ },
48717
+ "spread": {
48718
+ "value": -4,
48719
+ "unit": "px"
48720
+ }
48721
+ },
48722
+ {
48723
+ "color": "#f0f6fc",
48724
+ "alpha": 0.08,
48725
+ "offsetX": {
48726
+ "value": 0,
48727
+ "unit": "px"
48728
+ },
48729
+ "offsetY": {
48730
+ "value": 4,
48731
+ "unit": "px"
48732
+ },
48733
+ "blur": {
48734
+ "value": 32,
48735
+ "unit": "px"
48736
+ },
48737
+ "spread": {
48738
+ "value": -4,
48739
+ "unit": "px"
48740
+ }
48741
+ },
48742
+ {
48743
+ "color": "#f0f6fc",
48744
+ "alpha": 0.08,
48745
+ "offsetX": {
48746
+ "value": 0,
48747
+ "unit": "px"
48748
+ },
48749
+ "offsetY": {
48750
+ "value": 24,
48751
+ "unit": "px"
48752
+ },
48753
+ "blur": {
48754
+ "value": 48,
48755
+ "unit": "px"
48756
+ },
48757
+ "spread": {
48758
+ "value": -12,
48759
+ "unit": "px"
48760
+ }
48761
+ },
48762
+ {
48763
+ "color": "#f0f6fc",
48764
+ "alpha": 0.08,
48765
+ "offsetX": {
48766
+ "value": 0,
48767
+ "unit": "px"
48768
+ },
48769
+ "offsetY": {
48770
+ "value": 48,
48771
+ "unit": "px"
48772
+ },
48773
+ "blur": {
48774
+ "value": 96,
48775
+ "unit": "px"
48776
+ },
48777
+ "spread": {
48778
+ "value": -24,
48779
+ "unit": "px"
48780
+ }
47677
48781
  }
47678
48782
  ],
47679
48783
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47680
48784
  "isSource": true,
47681
48785
  "$type": "shadow"
47682
48786
  }
48787
+ },
48788
+ "org.primer.llm": {
48789
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48790
+ "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."
47683
48791
  }
47684
48792
  },
47685
48793
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47689,45 +48797,106 @@
47689
48797
  {
47690
48798
  "color": "{overlay.borderColor}",
47691
48799
  "alpha": 1,
47692
- "offsetX": "0px",
47693
- "offsetY": "0px",
47694
- "blur": "0px",
47695
- "spread": "1px"
48800
+ "offsetX": {
48801
+ "value": 0,
48802
+ "unit": "px"
48803
+ },
48804
+ "offsetY": {
48805
+ "value": 0,
48806
+ "unit": "px"
48807
+ },
48808
+ "blur": {
48809
+ "value": 0,
48810
+ "unit": "px"
48811
+ },
48812
+ "spread": {
48813
+ "value": 1,
48814
+ "unit": "px"
48815
+ }
47696
48816
  },
47697
48817
  {
47698
48818
  "color": "{base.color.neutral.0}",
47699
48819
  "alpha": 0.4,
47700
- "offsetX": "0px",
47701
- "offsetY": "8px",
47702
- "blur": "16px",
47703
- "spread": "-4px"
48820
+ "offsetX": {
48821
+ "value": 0,
48822
+ "unit": "px"
48823
+ },
48824
+ "offsetY": {
48825
+ "value": 8,
48826
+ "unit": "px"
48827
+ },
48828
+ "blur": {
48829
+ "value": 16,
48830
+ "unit": "px"
48831
+ },
48832
+ "spread": {
48833
+ "value": -4,
48834
+ "unit": "px"
48835
+ }
47704
48836
  },
47705
48837
  {
47706
48838
  "color": "{base.color.neutral.0}",
47707
48839
  "alpha": 0.4,
47708
- "offsetX": "0px",
47709
- "offsetY": "4px",
47710
- "blur": "32px",
47711
- "spread": "-4px"
48840
+ "offsetX": {
48841
+ "value": 0,
48842
+ "unit": "px"
48843
+ },
48844
+ "offsetY": {
48845
+ "value": 4,
48846
+ "unit": "px"
48847
+ },
48848
+ "blur": {
48849
+ "value": 32,
48850
+ "unit": "px"
48851
+ },
48852
+ "spread": {
48853
+ "value": -4,
48854
+ "unit": "px"
48855
+ }
47712
48856
  },
47713
48857
  {
47714
48858
  "color": "{base.color.neutral.0}",
47715
48859
  "alpha": 0.4,
47716
- "offsetX": "0px",
47717
- "offsetY": "24px",
47718
- "blur": "48px",
47719
- "spread": "-12px"
48860
+ "offsetX": {
48861
+ "value": 0,
48862
+ "unit": "px"
48863
+ },
48864
+ "offsetY": {
48865
+ "value": 24,
48866
+ "unit": "px"
48867
+ },
48868
+ "blur": {
48869
+ "value": 48,
48870
+ "unit": "px"
48871
+ },
48872
+ "spread": {
48873
+ "value": -12,
48874
+ "unit": "px"
48875
+ }
47720
48876
  },
47721
48877
  {
47722
48878
  "color": "{base.color.neutral.0}",
47723
48879
  "alpha": 0.4,
47724
- "offsetX": "0px",
47725
- "offsetY": "48px",
47726
- "blur": "96px",
47727
- "spread": "-24px"
48880
+ "offsetX": {
48881
+ "value": 0,
48882
+ "unit": "px"
48883
+ },
48884
+ "offsetY": {
48885
+ "value": 48,
48886
+ "unit": "px"
48887
+ },
48888
+ "blur": {
48889
+ "value": 96,
48890
+ "unit": "px"
48891
+ },
48892
+ "spread": {
48893
+ "value": -24,
48894
+ "unit": "px"
48895
+ }
47728
48896
  }
47729
48897
  ],
47730
48898
  "$type": "shadow",
48899
+ "$description": "Medium floating shadow for popovers and action menus",
47731
48900
  "$extensions": {
47732
48901
  "org.primer.figma": {
47733
48902
  "collection": "mode",
@@ -47739,48 +48908,433 @@
47739
48908
  {
47740
48909
  "color": "{overlay.borderColor}",
47741
48910
  "alpha": 1,
47742
- "offsetX": "0px",
47743
- "offsetY": "0px",
47744
- "blur": "0px",
47745
- "spread": "1px"
48911
+ "offsetX": {
48912
+ "value": 0,
48913
+ "unit": "px"
48914
+ },
48915
+ "offsetY": {
48916
+ "value": 0,
48917
+ "unit": "px"
48918
+ },
48919
+ "blur": {
48920
+ "value": 0,
48921
+ "unit": "px"
48922
+ },
48923
+ "spread": {
48924
+ "value": 1,
48925
+ "unit": "px"
48926
+ }
47746
48927
  },
47747
48928
  {
47748
48929
  "color": "{base.color.neutral.0}",
47749
48930
  "alpha": 0.4,
47750
- "offsetX": "0px",
47751
- "offsetY": "8px",
47752
- "blur": "16px",
47753
- "spread": "-4px"
48931
+ "offsetX": {
48932
+ "value": 0,
48933
+ "unit": "px"
48934
+ },
48935
+ "offsetY": {
48936
+ "value": 8,
48937
+ "unit": "px"
48938
+ },
48939
+ "blur": {
48940
+ "value": 16,
48941
+ "unit": "px"
48942
+ },
48943
+ "spread": {
48944
+ "value": -4,
48945
+ "unit": "px"
48946
+ }
47754
48947
  },
47755
48948
  {
47756
48949
  "color": "{base.color.neutral.0}",
47757
48950
  "alpha": 0.4,
47758
- "offsetX": "0px",
47759
- "offsetY": "4px",
47760
- "blur": "32px",
47761
- "spread": "-4px"
48951
+ "offsetX": {
48952
+ "value": 0,
48953
+ "unit": "px"
48954
+ },
48955
+ "offsetY": {
48956
+ "value": 4,
48957
+ "unit": "px"
48958
+ },
48959
+ "blur": {
48960
+ "value": 32,
48961
+ "unit": "px"
48962
+ },
48963
+ "spread": {
48964
+ "value": -4,
48965
+ "unit": "px"
48966
+ }
47762
48967
  },
47763
48968
  {
47764
48969
  "color": "{base.color.neutral.0}",
47765
48970
  "alpha": 0.4,
47766
- "offsetX": "0px",
47767
- "offsetY": "24px",
47768
- "blur": "48px",
47769
- "spread": "-12px"
48971
+ "offsetX": {
48972
+ "value": 0,
48973
+ "unit": "px"
48974
+ },
48975
+ "offsetY": {
48976
+ "value": 24,
48977
+ "unit": "px"
48978
+ },
48979
+ "blur": {
48980
+ "value": 48,
48981
+ "unit": "px"
48982
+ },
48983
+ "spread": {
48984
+ "value": -12,
48985
+ "unit": "px"
48986
+ }
47770
48987
  },
47771
48988
  {
47772
48989
  "color": "{base.color.neutral.0}",
47773
48990
  "alpha": 0.4,
47774
- "offsetX": "0px",
47775
- "offsetY": "48px",
47776
- "blur": "96px",
47777
- "spread": "-24px"
48991
+ "offsetX": {
48992
+ "value": 0,
48993
+ "unit": "px"
48994
+ },
48995
+ "offsetY": {
48996
+ "value": 48,
48997
+ "unit": "px"
48998
+ },
48999
+ "blur": {
49000
+ "value": 96,
49001
+ "unit": "px"
49002
+ },
49003
+ "spread": {
49004
+ "value": -24,
49005
+ "unit": "px"
49006
+ }
49007
+ }
49008
+ ],
49009
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49010
+ "isSource": true,
49011
+ "$type": "shadow"
49012
+ },
49013
+ "light-high-contrast": {
49014
+ "$value": [
49015
+ {
49016
+ "color": "{overlay.borderColor}",
49017
+ "alpha": 1,
49018
+ "offsetX": {
49019
+ "value": 0,
49020
+ "unit": "px"
49021
+ },
49022
+ "offsetY": {
49023
+ "value": 0,
49024
+ "unit": "px"
49025
+ },
49026
+ "blur": {
49027
+ "value": 0,
49028
+ "unit": "px"
49029
+ },
49030
+ "spread": {
49031
+ "value": 1,
49032
+ "unit": "px"
49033
+ }
49034
+ },
49035
+ {
49036
+ "color": "{base.color.neutral.12}",
49037
+ "alpha": 0.08,
49038
+ "offsetX": {
49039
+ "value": 0,
49040
+ "unit": "px"
49041
+ },
49042
+ "offsetY": {
49043
+ "value": 8,
49044
+ "unit": "px"
49045
+ },
49046
+ "blur": {
49047
+ "value": 16,
49048
+ "unit": "px"
49049
+ },
49050
+ "spread": {
49051
+ "value": -4,
49052
+ "unit": "px"
49053
+ }
49054
+ },
49055
+ {
49056
+ "color": "{base.color.neutral.12}",
49057
+ "alpha": 0.08,
49058
+ "offsetX": {
49059
+ "value": 0,
49060
+ "unit": "px"
49061
+ },
49062
+ "offsetY": {
49063
+ "value": 4,
49064
+ "unit": "px"
49065
+ },
49066
+ "blur": {
49067
+ "value": 32,
49068
+ "unit": "px"
49069
+ },
49070
+ "spread": {
49071
+ "value": -4,
49072
+ "unit": "px"
49073
+ }
49074
+ },
49075
+ {
49076
+ "color": "{base.color.neutral.12}",
49077
+ "alpha": 0.08,
49078
+ "offsetX": {
49079
+ "value": 0,
49080
+ "unit": "px"
49081
+ },
49082
+ "offsetY": {
49083
+ "value": 24,
49084
+ "unit": "px"
49085
+ },
49086
+ "blur": {
49087
+ "value": 48,
49088
+ "unit": "px"
49089
+ },
49090
+ "spread": {
49091
+ "value": -12,
49092
+ "unit": "px"
49093
+ }
49094
+ },
49095
+ {
49096
+ "color": "{base.color.neutral.12}",
49097
+ "alpha": 0.08,
49098
+ "offsetX": {
49099
+ "value": 0,
49100
+ "unit": "px"
49101
+ },
49102
+ "offsetY": {
49103
+ "value": 48,
49104
+ "unit": "px"
49105
+ },
49106
+ "blur": {
49107
+ "value": 96,
49108
+ "unit": "px"
49109
+ },
49110
+ "spread": {
49111
+ "value": -24,
49112
+ "unit": "px"
49113
+ }
49114
+ }
49115
+ ],
49116
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49117
+ "isSource": true,
49118
+ "$type": "shadow"
49119
+ },
49120
+ "light-protanopia-deuteranopia-high-contrast": {
49121
+ "$value": [
49122
+ {
49123
+ "color": "{overlay.borderColor}",
49124
+ "alpha": 1,
49125
+ "offsetX": {
49126
+ "value": 0,
49127
+ "unit": "px"
49128
+ },
49129
+ "offsetY": {
49130
+ "value": 0,
49131
+ "unit": "px"
49132
+ },
49133
+ "blur": {
49134
+ "value": 0,
49135
+ "unit": "px"
49136
+ },
49137
+ "spread": {
49138
+ "value": 1,
49139
+ "unit": "px"
49140
+ }
49141
+ },
49142
+ {
49143
+ "color": "{base.color.neutral.12}",
49144
+ "alpha": 0.08,
49145
+ "offsetX": {
49146
+ "value": 0,
49147
+ "unit": "px"
49148
+ },
49149
+ "offsetY": {
49150
+ "value": 8,
49151
+ "unit": "px"
49152
+ },
49153
+ "blur": {
49154
+ "value": 16,
49155
+ "unit": "px"
49156
+ },
49157
+ "spread": {
49158
+ "value": -4,
49159
+ "unit": "px"
49160
+ }
49161
+ },
49162
+ {
49163
+ "color": "{base.color.neutral.12}",
49164
+ "alpha": 0.08,
49165
+ "offsetX": {
49166
+ "value": 0,
49167
+ "unit": "px"
49168
+ },
49169
+ "offsetY": {
49170
+ "value": 4,
49171
+ "unit": "px"
49172
+ },
49173
+ "blur": {
49174
+ "value": 32,
49175
+ "unit": "px"
49176
+ },
49177
+ "spread": {
49178
+ "value": -4,
49179
+ "unit": "px"
49180
+ }
49181
+ },
49182
+ {
49183
+ "color": "{base.color.neutral.12}",
49184
+ "alpha": 0.08,
49185
+ "offsetX": {
49186
+ "value": 0,
49187
+ "unit": "px"
49188
+ },
49189
+ "offsetY": {
49190
+ "value": 24,
49191
+ "unit": "px"
49192
+ },
49193
+ "blur": {
49194
+ "value": 48,
49195
+ "unit": "px"
49196
+ },
49197
+ "spread": {
49198
+ "value": -12,
49199
+ "unit": "px"
49200
+ }
49201
+ },
49202
+ {
49203
+ "color": "{base.color.neutral.12}",
49204
+ "alpha": 0.08,
49205
+ "offsetX": {
49206
+ "value": 0,
49207
+ "unit": "px"
49208
+ },
49209
+ "offsetY": {
49210
+ "value": 48,
49211
+ "unit": "px"
49212
+ },
49213
+ "blur": {
49214
+ "value": 96,
49215
+ "unit": "px"
49216
+ },
49217
+ "spread": {
49218
+ "value": -24,
49219
+ "unit": "px"
49220
+ }
49221
+ }
49222
+ ],
49223
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49224
+ "isSource": true,
49225
+ "$type": "shadow"
49226
+ },
49227
+ "light-tritanopia-high-contrast": {
49228
+ "$value": [
49229
+ {
49230
+ "color": "{overlay.borderColor}",
49231
+ "alpha": 1,
49232
+ "offsetX": {
49233
+ "value": 0,
49234
+ "unit": "px"
49235
+ },
49236
+ "offsetY": {
49237
+ "value": 0,
49238
+ "unit": "px"
49239
+ },
49240
+ "blur": {
49241
+ "value": 0,
49242
+ "unit": "px"
49243
+ },
49244
+ "spread": {
49245
+ "value": 1,
49246
+ "unit": "px"
49247
+ }
49248
+ },
49249
+ {
49250
+ "color": "{base.color.neutral.12}",
49251
+ "alpha": 0.08,
49252
+ "offsetX": {
49253
+ "value": 0,
49254
+ "unit": "px"
49255
+ },
49256
+ "offsetY": {
49257
+ "value": 8,
49258
+ "unit": "px"
49259
+ },
49260
+ "blur": {
49261
+ "value": 16,
49262
+ "unit": "px"
49263
+ },
49264
+ "spread": {
49265
+ "value": -4,
49266
+ "unit": "px"
49267
+ }
49268
+ },
49269
+ {
49270
+ "color": "{base.color.neutral.12}",
49271
+ "alpha": 0.08,
49272
+ "offsetX": {
49273
+ "value": 0,
49274
+ "unit": "px"
49275
+ },
49276
+ "offsetY": {
49277
+ "value": 4,
49278
+ "unit": "px"
49279
+ },
49280
+ "blur": {
49281
+ "value": 32,
49282
+ "unit": "px"
49283
+ },
49284
+ "spread": {
49285
+ "value": -4,
49286
+ "unit": "px"
49287
+ }
49288
+ },
49289
+ {
49290
+ "color": "{base.color.neutral.12}",
49291
+ "alpha": 0.08,
49292
+ "offsetX": {
49293
+ "value": 0,
49294
+ "unit": "px"
49295
+ },
49296
+ "offsetY": {
49297
+ "value": 24,
49298
+ "unit": "px"
49299
+ },
49300
+ "blur": {
49301
+ "value": 48,
49302
+ "unit": "px"
49303
+ },
49304
+ "spread": {
49305
+ "value": -12,
49306
+ "unit": "px"
49307
+ }
49308
+ },
49309
+ {
49310
+ "color": "{base.color.neutral.12}",
49311
+ "alpha": 0.08,
49312
+ "offsetX": {
49313
+ "value": 0,
49314
+ "unit": "px"
49315
+ },
49316
+ "offsetY": {
49317
+ "value": 48,
49318
+ "unit": "px"
49319
+ },
49320
+ "blur": {
49321
+ "value": 96,
49322
+ "unit": "px"
49323
+ },
49324
+ "spread": {
49325
+ "value": -24,
49326
+ "unit": "px"
49327
+ }
47778
49328
  }
47779
49329
  ],
47780
49330
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47781
49331
  "isSource": true,
47782
49332
  "$type": "shadow"
47783
49333
  }
49334
+ },
49335
+ "org.primer.llm": {
49336
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49337
+ "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."
47784
49338
  }
47785
49339
  },
47786
49340
  "key": "{shadow.floating.medium}"
@@ -47788,8 +49342,9 @@
47788
49342
  "name": "shadow-floating-medium",
47789
49343
  "attributes": {},
47790
49344
  "path": ["shadow", "floating", "medium"],
47791
- "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",
47792
- "type": "shadow"
49345
+ "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",
49346
+ "type": "shadow",
49347
+ "description": "Medium floating shadow for popovers and action menus"
47793
49348
  },
47794
49349
  "shadow-floating-small": {
47795
49350
  "key": "{shadow.floating.small}",
@@ -47804,26 +49359,62 @@
47804
49359
  {
47805
49360
  "color": "#3d444db3",
47806
49361
  "alpha": 1,
47807
- "offsetX": "0px",
47808
- "offsetY": "0px",
47809
- "blur": "0px",
47810
- "spread": "1px"
49362
+ "offsetX": {
49363
+ "value": 0,
49364
+ "unit": "px"
49365
+ },
49366
+ "offsetY": {
49367
+ "value": 0,
49368
+ "unit": "px"
49369
+ },
49370
+ "blur": {
49371
+ "value": 0,
49372
+ "unit": "px"
49373
+ },
49374
+ "spread": {
49375
+ "value": 1,
49376
+ "unit": "px"
49377
+ }
47811
49378
  },
47812
49379
  {
47813
49380
  "color": "#010409",
47814
49381
  "alpha": 0.4,
47815
- "offsetX": "0px",
47816
- "offsetY": "6px",
47817
- "blur": "12px",
47818
- "spread": "-3px"
49382
+ "offsetX": {
49383
+ "value": 0,
49384
+ "unit": "px"
49385
+ },
49386
+ "offsetY": {
49387
+ "value": 6,
49388
+ "unit": "px"
49389
+ },
49390
+ "blur": {
49391
+ "value": 12,
49392
+ "unit": "px"
49393
+ },
49394
+ "spread": {
49395
+ "value": -3,
49396
+ "unit": "px"
49397
+ }
47819
49398
  },
47820
49399
  {
47821
49400
  "color": "#010409",
47822
49401
  "alpha": 0.4,
47823
- "offsetX": "0px",
47824
- "offsetY": "6px",
47825
- "blur": "18px",
47826
- "spread": "0px"
49402
+ "offsetX": {
49403
+ "value": 0,
49404
+ "unit": "px"
49405
+ },
49406
+ "offsetY": {
49407
+ "value": 6,
49408
+ "unit": "px"
49409
+ },
49410
+ "blur": {
49411
+ "value": 18,
49412
+ "unit": "px"
49413
+ },
49414
+ "spread": {
49415
+ "value": 0,
49416
+ "unit": "px"
49417
+ }
47827
49418
  }
47828
49419
  ],
47829
49420
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47843,26 +49434,62 @@
47843
49434
  {
47844
49435
  "color": "{overlay.borderColor}",
47845
49436
  "alpha": 1,
47846
- "offsetX": "0px",
47847
- "offsetY": "0px",
47848
- "blur": "0px",
47849
- "spread": "1px"
49437
+ "offsetX": {
49438
+ "value": 0,
49439
+ "unit": "px"
49440
+ },
49441
+ "offsetY": {
49442
+ "value": 0,
49443
+ "unit": "px"
49444
+ },
49445
+ "blur": {
49446
+ "value": 0,
49447
+ "unit": "px"
49448
+ },
49449
+ "spread": {
49450
+ "value": 1,
49451
+ "unit": "px"
49452
+ }
47850
49453
  },
47851
49454
  {
47852
49455
  "color": "{base.color.neutral.0}",
47853
49456
  "alpha": 0.4,
47854
- "offsetX": "0px",
47855
- "offsetY": "6px",
47856
- "blur": "12px",
47857
- "spread": "-3px"
49457
+ "offsetX": {
49458
+ "value": 0,
49459
+ "unit": "px"
49460
+ },
49461
+ "offsetY": {
49462
+ "value": 6,
49463
+ "unit": "px"
49464
+ },
49465
+ "blur": {
49466
+ "value": 12,
49467
+ "unit": "px"
49468
+ },
49469
+ "spread": {
49470
+ "value": -3,
49471
+ "unit": "px"
49472
+ }
47858
49473
  },
47859
49474
  {
47860
49475
  "color": "{base.color.neutral.0}",
47861
49476
  "alpha": 0.4,
47862
- "offsetX": "0px",
47863
- "offsetY": "6px",
47864
- "blur": "18px",
47865
- "spread": "0px"
49477
+ "offsetX": {
49478
+ "value": 0,
49479
+ "unit": "px"
49480
+ },
49481
+ "offsetY": {
49482
+ "value": 6,
49483
+ "unit": "px"
49484
+ },
49485
+ "blur": {
49486
+ "value": 18,
49487
+ "unit": "px"
49488
+ },
49489
+ "spread": {
49490
+ "value": 0,
49491
+ "unit": "px"
49492
+ }
47866
49493
  }
47867
49494
  ],
47868
49495
  "$type": "shadow",
@@ -47878,26 +49505,62 @@
47878
49505
  {
47879
49506
  "color": "{overlay.borderColor}",
47880
49507
  "alpha": 1,
47881
- "offsetX": "0px",
47882
- "offsetY": "0px",
47883
- "blur": "0px",
47884
- "spread": "1px"
49508
+ "offsetX": {
49509
+ "value": 0,
49510
+ "unit": "px"
49511
+ },
49512
+ "offsetY": {
49513
+ "value": 0,
49514
+ "unit": "px"
49515
+ },
49516
+ "blur": {
49517
+ "value": 0,
49518
+ "unit": "px"
49519
+ },
49520
+ "spread": {
49521
+ "value": 1,
49522
+ "unit": "px"
49523
+ }
47885
49524
  },
47886
49525
  {
47887
49526
  "color": "{base.color.neutral.0}",
47888
49527
  "alpha": 0.4,
47889
- "offsetX": "0px",
47890
- "offsetY": "6px",
47891
- "blur": "12px",
47892
- "spread": "-3px"
49528
+ "offsetX": {
49529
+ "value": 0,
49530
+ "unit": "px"
49531
+ },
49532
+ "offsetY": {
49533
+ "value": 6,
49534
+ "unit": "px"
49535
+ },
49536
+ "blur": {
49537
+ "value": 12,
49538
+ "unit": "px"
49539
+ },
49540
+ "spread": {
49541
+ "value": -3,
49542
+ "unit": "px"
49543
+ }
47893
49544
  },
47894
49545
  {
47895
49546
  "color": "{base.color.neutral.0}",
47896
49547
  "alpha": 0.4,
47897
- "offsetX": "0px",
47898
- "offsetY": "6px",
47899
- "blur": "18px",
47900
- "spread": "0px"
49548
+ "offsetX": {
49549
+ "value": 0,
49550
+ "unit": "px"
49551
+ },
49552
+ "offsetY": {
49553
+ "value": 6,
49554
+ "unit": "px"
49555
+ },
49556
+ "blur": {
49557
+ "value": 18,
49558
+ "unit": "px"
49559
+ },
49560
+ "spread": {
49561
+ "value": 0,
49562
+ "unit": "px"
49563
+ }
47901
49564
  }
47902
49565
  ],
47903
49566
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47915,7 +49578,7 @@
47915
49578
  "name": "shadow-floating-small",
47916
49579
  "attributes": {},
47917
49580
  "path": ["shadow", "floating", "small"],
47918
- "value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
49581
+ "value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47919
49582
  "type": "shadow",
47920
49583
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47921
49584
  },
@@ -47932,24 +49595,193 @@
47932
49595
  {
47933
49596
  "color": "#3d444db3",
47934
49597
  "alpha": 1,
47935
- "offsetX": "0px",
47936
- "offsetY": "0px",
47937
- "blur": "0px",
47938
- "spread": "1px"
49598
+ "offsetX": {
49599
+ "value": 0,
49600
+ "unit": "px"
49601
+ },
49602
+ "offsetY": {
49603
+ "value": 0,
49604
+ "unit": "px"
49605
+ },
49606
+ "blur": {
49607
+ "value": 0,
49608
+ "unit": "px"
49609
+ },
49610
+ "spread": {
49611
+ "value": 1,
49612
+ "unit": "px"
49613
+ }
47939
49614
  },
47940
49615
  {
47941
49616
  "color": "#010409",
47942
49617
  "alpha": 1,
47943
- "offsetX": "0px",
47944
- "offsetY": "32px",
47945
- "blur": "64px",
47946
- "spread": "0px"
49618
+ "offsetX": {
49619
+ "value": 0,
49620
+ "unit": "px"
49621
+ },
49622
+ "offsetY": {
49623
+ "value": 32,
49624
+ "unit": "px"
49625
+ },
49626
+ "blur": {
49627
+ "value": 64,
49628
+ "unit": "px"
49629
+ },
49630
+ "spread": {
49631
+ "value": 0,
49632
+ "unit": "px"
49633
+ }
49634
+ }
49635
+ ],
49636
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49637
+ "isSource": true,
49638
+ "$type": "shadow"
49639
+ },
49640
+ "light-high-contrast": {
49641
+ "$value": [
49642
+ {
49643
+ "color": "#3d444db3",
49644
+ "alpha": 1,
49645
+ "offsetX": {
49646
+ "value": 0,
49647
+ "unit": "px"
49648
+ },
49649
+ "offsetY": {
49650
+ "value": 0,
49651
+ "unit": "px"
49652
+ },
49653
+ "blur": {
49654
+ "value": 0,
49655
+ "unit": "px"
49656
+ },
49657
+ "spread": {
49658
+ "value": 1,
49659
+ "unit": "px"
49660
+ }
49661
+ },
49662
+ {
49663
+ "color": "#f0f6fc",
49664
+ "alpha": 0.32,
49665
+ "offsetX": {
49666
+ "value": 0,
49667
+ "unit": "px"
49668
+ },
49669
+ "offsetY": {
49670
+ "value": 56,
49671
+ "unit": "px"
49672
+ },
49673
+ "blur": {
49674
+ "value": 112,
49675
+ "unit": "px"
49676
+ },
49677
+ "spread": {
49678
+ "value": 0,
49679
+ "unit": "px"
49680
+ }
49681
+ }
49682
+ ],
49683
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49684
+ "isSource": true,
49685
+ "$type": "shadow"
49686
+ },
49687
+ "light-protanopia-deuteranopia-high-contrast": {
49688
+ "$value": [
49689
+ {
49690
+ "color": "#3d444db3",
49691
+ "alpha": 1,
49692
+ "offsetX": {
49693
+ "value": 0,
49694
+ "unit": "px"
49695
+ },
49696
+ "offsetY": {
49697
+ "value": 0,
49698
+ "unit": "px"
49699
+ },
49700
+ "blur": {
49701
+ "value": 0,
49702
+ "unit": "px"
49703
+ },
49704
+ "spread": {
49705
+ "value": 1,
49706
+ "unit": "px"
49707
+ }
49708
+ },
49709
+ {
49710
+ "color": "#f0f6fc",
49711
+ "alpha": 0.32,
49712
+ "offsetX": {
49713
+ "value": 0,
49714
+ "unit": "px"
49715
+ },
49716
+ "offsetY": {
49717
+ "value": 56,
49718
+ "unit": "px"
49719
+ },
49720
+ "blur": {
49721
+ "value": 112,
49722
+ "unit": "px"
49723
+ },
49724
+ "spread": {
49725
+ "value": 0,
49726
+ "unit": "px"
49727
+ }
49728
+ }
49729
+ ],
49730
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49731
+ "isSource": true,
49732
+ "$type": "shadow"
49733
+ },
49734
+ "light-tritanopia-high-contrast": {
49735
+ "$value": [
49736
+ {
49737
+ "color": "#3d444db3",
49738
+ "alpha": 1,
49739
+ "offsetX": {
49740
+ "value": 0,
49741
+ "unit": "px"
49742
+ },
49743
+ "offsetY": {
49744
+ "value": 0,
49745
+ "unit": "px"
49746
+ },
49747
+ "blur": {
49748
+ "value": 0,
49749
+ "unit": "px"
49750
+ },
49751
+ "spread": {
49752
+ "value": 1,
49753
+ "unit": "px"
49754
+ }
49755
+ },
49756
+ {
49757
+ "color": "#f0f6fc",
49758
+ "alpha": 0.32,
49759
+ "offsetX": {
49760
+ "value": 0,
49761
+ "unit": "px"
49762
+ },
49763
+ "offsetY": {
49764
+ "value": 56,
49765
+ "unit": "px"
49766
+ },
49767
+ "blur": {
49768
+ "value": 112,
49769
+ "unit": "px"
49770
+ },
49771
+ "spread": {
49772
+ "value": 0,
49773
+ "unit": "px"
49774
+ }
47947
49775
  }
47948
49776
  ],
47949
49777
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47950
49778
  "isSource": true,
47951
49779
  "$type": "shadow"
47952
49780
  }
49781
+ },
49782
+ "org.primer.llm": {
49783
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49784
+ "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."
47953
49785
  }
47954
49786
  },
47955
49787
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47959,21 +49791,46 @@
47959
49791
  {
47960
49792
  "color": "{overlay.borderColor}",
47961
49793
  "alpha": 1,
47962
- "offsetX": "0px",
47963
- "offsetY": "0px",
47964
- "blur": "0px",
47965
- "spread": "1px"
49794
+ "offsetX": {
49795
+ "value": 0,
49796
+ "unit": "px"
49797
+ },
49798
+ "offsetY": {
49799
+ "value": 0,
49800
+ "unit": "px"
49801
+ },
49802
+ "blur": {
49803
+ "value": 0,
49804
+ "unit": "px"
49805
+ },
49806
+ "spread": {
49807
+ "value": 1,
49808
+ "unit": "px"
49809
+ }
47966
49810
  },
47967
49811
  {
47968
49812
  "color": "{base.color.neutral.0}",
47969
49813
  "alpha": 1,
47970
- "offsetX": "0px",
47971
- "offsetY": "32px",
47972
- "blur": "64px",
47973
- "spread": "0px"
49814
+ "offsetX": {
49815
+ "value": 0,
49816
+ "unit": "px"
49817
+ },
49818
+ "offsetY": {
49819
+ "value": 32,
49820
+ "unit": "px"
49821
+ },
49822
+ "blur": {
49823
+ "value": 64,
49824
+ "unit": "px"
49825
+ },
49826
+ "spread": {
49827
+ "value": 0,
49828
+ "unit": "px"
49829
+ }
47974
49830
  }
47975
49831
  ],
47976
49832
  "$type": "shadow",
49833
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47977
49834
  "$extensions": {
47978
49835
  "org.primer.figma": {
47979
49836
  "collection": "mode",
@@ -47985,24 +49842,193 @@
47985
49842
  {
47986
49843
  "color": "{overlay.borderColor}",
47987
49844
  "alpha": 1,
47988
- "offsetX": "0px",
47989
- "offsetY": "0px",
47990
- "blur": "0px",
47991
- "spread": "1px"
49845
+ "offsetX": {
49846
+ "value": 0,
49847
+ "unit": "px"
49848
+ },
49849
+ "offsetY": {
49850
+ "value": 0,
49851
+ "unit": "px"
49852
+ },
49853
+ "blur": {
49854
+ "value": 0,
49855
+ "unit": "px"
49856
+ },
49857
+ "spread": {
49858
+ "value": 1,
49859
+ "unit": "px"
49860
+ }
47992
49861
  },
47993
49862
  {
47994
49863
  "color": "{base.color.neutral.0}",
47995
49864
  "alpha": 1,
47996
- "offsetX": "0px",
47997
- "offsetY": "32px",
47998
- "blur": "64px",
47999
- "spread": "0px"
49865
+ "offsetX": {
49866
+ "value": 0,
49867
+ "unit": "px"
49868
+ },
49869
+ "offsetY": {
49870
+ "value": 32,
49871
+ "unit": "px"
49872
+ },
49873
+ "blur": {
49874
+ "value": 64,
49875
+ "unit": "px"
49876
+ },
49877
+ "spread": {
49878
+ "value": 0,
49879
+ "unit": "px"
49880
+ }
49881
+ }
49882
+ ],
49883
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49884
+ "isSource": true,
49885
+ "$type": "shadow"
49886
+ },
49887
+ "light-high-contrast": {
49888
+ "$value": [
49889
+ {
49890
+ "color": "{overlay.borderColor}",
49891
+ "alpha": 1,
49892
+ "offsetX": {
49893
+ "value": 0,
49894
+ "unit": "px"
49895
+ },
49896
+ "offsetY": {
49897
+ "value": 0,
49898
+ "unit": "px"
49899
+ },
49900
+ "blur": {
49901
+ "value": 0,
49902
+ "unit": "px"
49903
+ },
49904
+ "spread": {
49905
+ "value": 1,
49906
+ "unit": "px"
49907
+ }
49908
+ },
49909
+ {
49910
+ "color": "{base.color.neutral.12}",
49911
+ "alpha": 0.32,
49912
+ "offsetX": {
49913
+ "value": 0,
49914
+ "unit": "px"
49915
+ },
49916
+ "offsetY": {
49917
+ "value": 56,
49918
+ "unit": "px"
49919
+ },
49920
+ "blur": {
49921
+ "value": 112,
49922
+ "unit": "px"
49923
+ },
49924
+ "spread": {
49925
+ "value": 0,
49926
+ "unit": "px"
49927
+ }
49928
+ }
49929
+ ],
49930
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49931
+ "isSource": true,
49932
+ "$type": "shadow"
49933
+ },
49934
+ "light-protanopia-deuteranopia-high-contrast": {
49935
+ "$value": [
49936
+ {
49937
+ "color": "{overlay.borderColor}",
49938
+ "alpha": 1,
49939
+ "offsetX": {
49940
+ "value": 0,
49941
+ "unit": "px"
49942
+ },
49943
+ "offsetY": {
49944
+ "value": 0,
49945
+ "unit": "px"
49946
+ },
49947
+ "blur": {
49948
+ "value": 0,
49949
+ "unit": "px"
49950
+ },
49951
+ "spread": {
49952
+ "value": 1,
49953
+ "unit": "px"
49954
+ }
49955
+ },
49956
+ {
49957
+ "color": "{base.color.neutral.12}",
49958
+ "alpha": 0.32,
49959
+ "offsetX": {
49960
+ "value": 0,
49961
+ "unit": "px"
49962
+ },
49963
+ "offsetY": {
49964
+ "value": 56,
49965
+ "unit": "px"
49966
+ },
49967
+ "blur": {
49968
+ "value": 112,
49969
+ "unit": "px"
49970
+ },
49971
+ "spread": {
49972
+ "value": 0,
49973
+ "unit": "px"
49974
+ }
49975
+ }
49976
+ ],
49977
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49978
+ "isSource": true,
49979
+ "$type": "shadow"
49980
+ },
49981
+ "light-tritanopia-high-contrast": {
49982
+ "$value": [
49983
+ {
49984
+ "color": "{overlay.borderColor}",
49985
+ "alpha": 1,
49986
+ "offsetX": {
49987
+ "value": 0,
49988
+ "unit": "px"
49989
+ },
49990
+ "offsetY": {
49991
+ "value": 0,
49992
+ "unit": "px"
49993
+ },
49994
+ "blur": {
49995
+ "value": 0,
49996
+ "unit": "px"
49997
+ },
49998
+ "spread": {
49999
+ "value": 1,
50000
+ "unit": "px"
50001
+ }
50002
+ },
50003
+ {
50004
+ "color": "{base.color.neutral.12}",
50005
+ "alpha": 0.32,
50006
+ "offsetX": {
50007
+ "value": 0,
50008
+ "unit": "px"
50009
+ },
50010
+ "offsetY": {
50011
+ "value": 56,
50012
+ "unit": "px"
50013
+ },
50014
+ "blur": {
50015
+ "value": 112,
50016
+ "unit": "px"
50017
+ },
50018
+ "spread": {
50019
+ "value": 0,
50020
+ "unit": "px"
50021
+ }
48000
50022
  }
48001
50023
  ],
48002
50024
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48003
50025
  "isSource": true,
48004
50026
  "$type": "shadow"
48005
50027
  }
50028
+ },
50029
+ "org.primer.llm": {
50030
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
50031
+ "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."
48006
50032
  }
48007
50033
  },
48008
50034
  "key": "{shadow.floating.xlarge}"
@@ -48010,8 +50036,9 @@
48010
50036
  "name": "shadow-floating-xlarge",
48011
50037
  "attributes": {},
48012
50038
  "path": ["shadow", "floating", "xlarge"],
48013
- "value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48014
- "type": "shadow"
50039
+ "value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
50040
+ "type": "shadow",
50041
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
48015
50042
  },
48016
50043
  "shadow-inset": {
48017
50044
  "key": "{shadow.inset}",
@@ -48025,16 +50052,32 @@
48025
50052
  "$value": {
48026
50053
  "color": "#010409",
48027
50054
  "alpha": 0.24,
48028
- "offsetX": "0px",
48029
- "offsetY": "1px",
48030
- "blur": "0px",
48031
- "spread": "0px",
50055
+ "offsetX": {
50056
+ "value": 0,
50057
+ "unit": "px"
50058
+ },
50059
+ "offsetY": {
50060
+ "value": 1,
50061
+ "unit": "px"
50062
+ },
50063
+ "blur": {
50064
+ "value": 0,
50065
+ "unit": "px"
50066
+ },
50067
+ "spread": {
50068
+ "value": 0,
50069
+ "unit": "px"
50070
+ },
48032
50071
  "inset": true
48033
50072
  },
48034
50073
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48035
50074
  "isSource": true,
48036
50075
  "$type": "shadow"
48037
50076
  }
50077
+ },
50078
+ "org.primer.llm": {
50079
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50080
+ "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."
48038
50081
  }
48039
50082
  },
48040
50083
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48043,13 +50086,26 @@
48043
50086
  "$value": {
48044
50087
  "color": "{base.color.neutral.0}",
48045
50088
  "alpha": 0.24,
48046
- "offsetX": "0px",
48047
- "offsetY": "1px",
48048
- "blur": "0px",
48049
- "spread": "0px",
50089
+ "offsetX": {
50090
+ "value": 0,
50091
+ "unit": "px"
50092
+ },
50093
+ "offsetY": {
50094
+ "value": 1,
50095
+ "unit": "px"
50096
+ },
50097
+ "blur": {
50098
+ "value": 0,
50099
+ "unit": "px"
50100
+ },
50101
+ "spread": {
50102
+ "value": 0,
50103
+ "unit": "px"
50104
+ },
48050
50105
  "inset": true
48051
50106
  },
48052
50107
  "$type": "shadow",
50108
+ "$description": "Inset shadow for recessed elements",
48053
50109
  "$extensions": {
48054
50110
  "org.primer.figma": {
48055
50111
  "collection": "mode",
@@ -48060,16 +50116,32 @@
48060
50116
  "$value": {
48061
50117
  "color": "{base.color.neutral.0}",
48062
50118
  "alpha": 0.24,
48063
- "offsetX": "0px",
48064
- "offsetY": "1px",
48065
- "blur": "0px",
48066
- "spread": "0px",
50119
+ "offsetX": {
50120
+ "value": 0,
50121
+ "unit": "px"
50122
+ },
50123
+ "offsetY": {
50124
+ "value": 1,
50125
+ "unit": "px"
50126
+ },
50127
+ "blur": {
50128
+ "value": 0,
50129
+ "unit": "px"
50130
+ },
50131
+ "spread": {
50132
+ "value": 0,
50133
+ "unit": "px"
50134
+ },
48067
50135
  "inset": true
48068
50136
  },
48069
50137
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48070
50138
  "isSource": true,
48071
50139
  "$type": "shadow"
48072
50140
  }
50141
+ },
50142
+ "org.primer.llm": {
50143
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50144
+ "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."
48073
50145
  }
48074
50146
  },
48075
50147
  "key": "{shadow.inset}"
@@ -48077,8 +50149,9 @@
48077
50149
  "name": "shadow-inset",
48078
50150
  "attributes": {},
48079
50151
  "path": ["shadow", "inset"],
48080
- "value": "inset 0px 1px 0px 0px #0104093d",
48081
- "type": "shadow"
50152
+ "value": "inset 0 1px 0 0 #0104093d",
50153
+ "type": "shadow",
50154
+ "description": "Inset shadow for recessed elements"
48082
50155
  },
48083
50156
  "shadow-resting-medium": {
48084
50157
  "key": "{shadow.resting.medium}",
@@ -48093,24 +50166,52 @@
48093
50166
  {
48094
50167
  "color": "#010409",
48095
50168
  "alpha": 0.4,
48096
- "offsetX": "0px",
48097
- "offsetY": "1px",
48098
- "blur": "1px",
48099
- "spread": "0px"
50169
+ "offsetX": {
50170
+ "value": 0,
50171
+ "unit": "px"
50172
+ },
50173
+ "offsetY": {
50174
+ "value": 1,
50175
+ "unit": "px"
50176
+ },
50177
+ "blur": {
50178
+ "value": 1,
50179
+ "unit": "px"
50180
+ },
50181
+ "spread": {
50182
+ "value": 0,
50183
+ "unit": "px"
50184
+ }
48100
50185
  },
48101
50186
  {
48102
50187
  "color": "#010409",
48103
50188
  "alpha": 0.8,
48104
- "offsetX": "0px",
48105
- "offsetY": "3px",
48106
- "blur": "6px",
48107
- "spread": "0px"
50189
+ "offsetX": {
50190
+ "value": 0,
50191
+ "unit": "px"
50192
+ },
50193
+ "offsetY": {
50194
+ "value": 3,
50195
+ "unit": "px"
50196
+ },
50197
+ "blur": {
50198
+ "value": 6,
50199
+ "unit": "px"
50200
+ },
50201
+ "spread": {
50202
+ "value": 0,
50203
+ "unit": "px"
50204
+ }
48108
50205
  }
48109
50206
  ],
48110
50207
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48111
50208
  "isSource": true,
48112
50209
  "$type": "shadow"
48113
50210
  }
50211
+ },
50212
+ "org.primer.llm": {
50213
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50214
+ "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."
48114
50215
  }
48115
50216
  },
48116
50217
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48120,21 +50221,46 @@
48120
50221
  {
48121
50222
  "color": "{base.color.neutral.0}",
48122
50223
  "alpha": 0.4,
48123
- "offsetX": "0px",
48124
- "offsetY": "1px",
48125
- "blur": "1px",
48126
- "spread": "0px"
50224
+ "offsetX": {
50225
+ "value": 0,
50226
+ "unit": "px"
50227
+ },
50228
+ "offsetY": {
50229
+ "value": 1,
50230
+ "unit": "px"
50231
+ },
50232
+ "blur": {
50233
+ "value": 1,
50234
+ "unit": "px"
50235
+ },
50236
+ "spread": {
50237
+ "value": 0,
50238
+ "unit": "px"
50239
+ }
48127
50240
  },
48128
50241
  {
48129
50242
  "color": "{base.color.neutral.0}",
48130
50243
  "alpha": 0.8,
48131
- "offsetX": "0px",
48132
- "offsetY": "3px",
48133
- "blur": "6px",
48134
- "spread": "0px"
50244
+ "offsetX": {
50245
+ "value": 0,
50246
+ "unit": "px"
50247
+ },
50248
+ "offsetY": {
50249
+ "value": 3,
50250
+ "unit": "px"
50251
+ },
50252
+ "blur": {
50253
+ "value": 6,
50254
+ "unit": "px"
50255
+ },
50256
+ "spread": {
50257
+ "value": 0,
50258
+ "unit": "px"
50259
+ }
48135
50260
  }
48136
50261
  ],
48137
50262
  "$type": "shadow",
50263
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48138
50264
  "$extensions": {
48139
50265
  "org.primer.figma": {
48140
50266
  "collection": "mode",
@@ -48146,24 +50272,52 @@
48146
50272
  {
48147
50273
  "color": "{base.color.neutral.0}",
48148
50274
  "alpha": 0.4,
48149
- "offsetX": "0px",
48150
- "offsetY": "1px",
48151
- "blur": "1px",
48152
- "spread": "0px"
50275
+ "offsetX": {
50276
+ "value": 0,
50277
+ "unit": "px"
50278
+ },
50279
+ "offsetY": {
50280
+ "value": 1,
50281
+ "unit": "px"
50282
+ },
50283
+ "blur": {
50284
+ "value": 1,
50285
+ "unit": "px"
50286
+ },
50287
+ "spread": {
50288
+ "value": 0,
50289
+ "unit": "px"
50290
+ }
48153
50291
  },
48154
50292
  {
48155
50293
  "color": "{base.color.neutral.0}",
48156
50294
  "alpha": 0.8,
48157
- "offsetX": "0px",
48158
- "offsetY": "3px",
48159
- "blur": "6px",
48160
- "spread": "0px"
50295
+ "offsetX": {
50296
+ "value": 0,
50297
+ "unit": "px"
50298
+ },
50299
+ "offsetY": {
50300
+ "value": 3,
50301
+ "unit": "px"
50302
+ },
50303
+ "blur": {
50304
+ "value": 6,
50305
+ "unit": "px"
50306
+ },
50307
+ "spread": {
50308
+ "value": 0,
50309
+ "unit": "px"
50310
+ }
48161
50311
  }
48162
50312
  ],
48163
50313
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48164
50314
  "isSource": true,
48165
50315
  "$type": "shadow"
48166
50316
  }
50317
+ },
50318
+ "org.primer.llm": {
50319
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50320
+ "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."
48167
50321
  }
48168
50322
  },
48169
50323
  "key": "{shadow.resting.medium}"
@@ -48171,8 +50325,9 @@
48171
50325
  "name": "shadow-resting-medium",
48172
50326
  "attributes": {},
48173
50327
  "path": ["shadow", "resting", "medium"],
48174
- "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
48175
- "type": "shadow"
50328
+ "value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
50329
+ "type": "shadow",
50330
+ "description": "Medium resting shadow for cards and elevated surfaces"
48176
50331
  },
48177
50332
  "shadow-resting-small": {
48178
50333
  "key": "{shadow.resting.small}",
@@ -48187,19 +50342,43 @@
48187
50342
  {
48188
50343
  "color": "#010409",
48189
50344
  "alpha": 0.6,
48190
- "offsetX": "0px",
48191
- "offsetY": "1px",
48192
- "blur": "1px",
48193
- "spread": "0px",
50345
+ "offsetX": {
50346
+ "value": 0,
50347
+ "unit": "px"
50348
+ },
50349
+ "offsetY": {
50350
+ "value": 1,
50351
+ "unit": "px"
50352
+ },
50353
+ "blur": {
50354
+ "value": 1,
50355
+ "unit": "px"
50356
+ },
50357
+ "spread": {
50358
+ "value": 0,
50359
+ "unit": "px"
50360
+ },
48194
50361
  "inset": false
48195
50362
  },
48196
50363
  {
48197
50364
  "color": "#010409",
48198
50365
  "alpha": 0.6,
48199
- "offsetX": "0px",
48200
- "offsetY": "1px",
48201
- "blur": "3px",
48202
- "spread": "0px",
50366
+ "offsetX": {
50367
+ "value": 0,
50368
+ "unit": "px"
50369
+ },
50370
+ "offsetY": {
50371
+ "value": 1,
50372
+ "unit": "px"
50373
+ },
50374
+ "blur": {
50375
+ "value": 3,
50376
+ "unit": "px"
50377
+ },
50378
+ "spread": {
50379
+ "value": 0,
50380
+ "unit": "px"
50381
+ },
48203
50382
  "inset": false
48204
50383
  }
48205
50384
  ],
@@ -48207,6 +50386,10 @@
48207
50386
  "isSource": true,
48208
50387
  "$type": "shadow"
48209
50388
  }
50389
+ },
50390
+ "org.primer.llm": {
50391
+ "usage": ["button", "interactive-card", "clickable-element"],
50392
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48210
50393
  }
48211
50394
  },
48212
50395
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48216,23 +50399,48 @@
48216
50399
  {
48217
50400
  "color": "{base.color.neutral.0}",
48218
50401
  "alpha": 0.6,
48219
- "offsetX": "0px",
48220
- "offsetY": "1px",
48221
- "blur": "1px",
48222
- "spread": "0px",
50402
+ "offsetX": {
50403
+ "value": 0,
50404
+ "unit": "px"
50405
+ },
50406
+ "offsetY": {
50407
+ "value": 1,
50408
+ "unit": "px"
50409
+ },
50410
+ "blur": {
50411
+ "value": 1,
50412
+ "unit": "px"
50413
+ },
50414
+ "spread": {
50415
+ "value": 0,
50416
+ "unit": "px"
50417
+ },
48223
50418
  "inset": false
48224
50419
  },
48225
50420
  {
48226
50421
  "color": "{base.color.neutral.0}",
48227
50422
  "alpha": 0.6,
48228
- "offsetX": "0px",
48229
- "offsetY": "1px",
48230
- "blur": "3px",
48231
- "spread": "0px",
50423
+ "offsetX": {
50424
+ "value": 0,
50425
+ "unit": "px"
50426
+ },
50427
+ "offsetY": {
50428
+ "value": 1,
50429
+ "unit": "px"
50430
+ },
50431
+ "blur": {
50432
+ "value": 3,
50433
+ "unit": "px"
50434
+ },
50435
+ "spread": {
50436
+ "value": 0,
50437
+ "unit": "px"
50438
+ },
48232
50439
  "inset": false
48233
50440
  }
48234
50441
  ],
48235
50442
  "$type": "shadow",
50443
+ "$description": "Small resting shadow for buttons and interactive elements",
48236
50444
  "$extensions": {
48237
50445
  "org.primer.figma": {
48238
50446
  "collection": "mode",
@@ -48244,19 +50452,43 @@
48244
50452
  {
48245
50453
  "color": "{base.color.neutral.0}",
48246
50454
  "alpha": 0.6,
48247
- "offsetX": "0px",
48248
- "offsetY": "1px",
48249
- "blur": "1px",
48250
- "spread": "0px",
50455
+ "offsetX": {
50456
+ "value": 0,
50457
+ "unit": "px"
50458
+ },
50459
+ "offsetY": {
50460
+ "value": 1,
50461
+ "unit": "px"
50462
+ },
50463
+ "blur": {
50464
+ "value": 1,
50465
+ "unit": "px"
50466
+ },
50467
+ "spread": {
50468
+ "value": 0,
50469
+ "unit": "px"
50470
+ },
48251
50471
  "inset": false
48252
50472
  },
48253
50473
  {
48254
50474
  "color": "{base.color.neutral.0}",
48255
50475
  "alpha": 0.6,
48256
- "offsetX": "0px",
48257
- "offsetY": "1px",
48258
- "blur": "3px",
48259
- "spread": "0px",
50476
+ "offsetX": {
50477
+ "value": 0,
50478
+ "unit": "px"
50479
+ },
50480
+ "offsetY": {
50481
+ "value": 1,
50482
+ "unit": "px"
50483
+ },
50484
+ "blur": {
50485
+ "value": 3,
50486
+ "unit": "px"
50487
+ },
50488
+ "spread": {
50489
+ "value": 0,
50490
+ "unit": "px"
50491
+ },
48260
50492
  "inset": false
48261
50493
  }
48262
50494
  ],
@@ -48264,6 +50496,10 @@
48264
50496
  "isSource": true,
48265
50497
  "$type": "shadow"
48266
50498
  }
50499
+ },
50500
+ "org.primer.llm": {
50501
+ "usage": ["button", "interactive-card", "clickable-element"],
50502
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48267
50503
  }
48268
50504
  },
48269
50505
  "key": "{shadow.resting.small}"
@@ -48271,8 +50507,9 @@
48271
50507
  "name": "shadow-resting-small",
48272
50508
  "attributes": {},
48273
50509
  "path": ["shadow", "resting", "small"],
48274
- "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
48275
- "type": "shadow"
50510
+ "value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
50511
+ "type": "shadow",
50512
+ "description": "Small resting shadow for buttons and interactive elements"
48276
50513
  },
48277
50514
  "shadow-resting-xsmall": {
48278
50515
  "key": "{shadow.resting.xsmall}",
@@ -48286,16 +50523,32 @@
48286
50523
  "$value": {
48287
50524
  "color": "#010409",
48288
50525
  "alpha": 0.8,
48289
- "offsetX": "0px",
48290
- "offsetY": "1px",
48291
- "blur": "1px",
48292
- "spread": "0px",
50526
+ "offsetX": {
50527
+ "value": 0,
50528
+ "unit": "px"
50529
+ },
50530
+ "offsetY": {
50531
+ "value": 1,
50532
+ "unit": "px"
50533
+ },
50534
+ "blur": {
50535
+ "value": 1,
50536
+ "unit": "px"
50537
+ },
50538
+ "spread": {
50539
+ "value": 0,
50540
+ "unit": "px"
50541
+ },
48293
50542
  "inset": false
48294
50543
  },
48295
50544
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48296
50545
  "isSource": true,
48297
50546
  "$type": "shadow"
48298
50547
  }
50548
+ },
50549
+ "org.primer.llm": {
50550
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50551
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48299
50552
  }
48300
50553
  },
48301
50554
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48304,13 +50557,26 @@
48304
50557
  "$value": {
48305
50558
  "color": "{base.color.neutral.0}",
48306
50559
  "alpha": 0.8,
48307
- "offsetX": "0px",
48308
- "offsetY": "1px",
48309
- "blur": "1px",
48310
- "spread": "0px",
50560
+ "offsetX": {
50561
+ "value": 0,
50562
+ "unit": "px"
50563
+ },
50564
+ "offsetY": {
50565
+ "value": 1,
50566
+ "unit": "px"
50567
+ },
50568
+ "blur": {
50569
+ "value": 1,
50570
+ "unit": "px"
50571
+ },
50572
+ "spread": {
50573
+ "value": 0,
50574
+ "unit": "px"
50575
+ },
48311
50576
  "inset": false
48312
50577
  },
48313
50578
  "$type": "shadow",
50579
+ "$description": "Extra small resting shadow for minimal elevation",
48314
50580
  "$extensions": {
48315
50581
  "org.primer.figma": {
48316
50582
  "collection": "mode",
@@ -48321,16 +50587,32 @@
48321
50587
  "$value": {
48322
50588
  "color": "{base.color.neutral.0}",
48323
50589
  "alpha": 0.8,
48324
- "offsetX": "0px",
48325
- "offsetY": "1px",
48326
- "blur": "1px",
48327
- "spread": "0px",
50590
+ "offsetX": {
50591
+ "value": 0,
50592
+ "unit": "px"
50593
+ },
50594
+ "offsetY": {
50595
+ "value": 1,
50596
+ "unit": "px"
50597
+ },
50598
+ "blur": {
50599
+ "value": 1,
50600
+ "unit": "px"
50601
+ },
50602
+ "spread": {
50603
+ "value": 0,
50604
+ "unit": "px"
50605
+ },
48328
50606
  "inset": false
48329
50607
  },
48330
50608
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48331
50609
  "isSource": true,
48332
50610
  "$type": "shadow"
48333
50611
  }
50612
+ },
50613
+ "org.primer.llm": {
50614
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50615
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48334
50616
  }
48335
50617
  },
48336
50618
  "key": "{shadow.resting.xsmall}"
@@ -48338,8 +50620,9 @@
48338
50620
  "name": "shadow-resting-xsmall",
48339
50621
  "attributes": {},
48340
50622
  "path": ["shadow", "resting", "xsmall"],
48341
- "value": "0px 1px 1px 0px #010409cc",
48342
- "type": "shadow"
50623
+ "value": "0 1px 1px 0 #010409cc",
50624
+ "type": "shadow",
50625
+ "description": "Extra small resting shadow for minimal elevation"
48343
50626
  },
48344
50627
  "sideNav-bgColor-selected": {
48345
50628
  "key": "{sideNav.bgColor.selected}",