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