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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
@@ -176,10 +176,22 @@
176
176
  {
177
177
  "color": "#f6f8fa",
178
178
  "alpha": 1,
179
- "offsetX": "0px",
180
- "offsetY": "0px",
181
- "blur": "0px",
182
- "spread": "2px"
179
+ "offsetX": {
180
+ "value": 0,
181
+ "unit": "px"
182
+ },
183
+ "offsetY": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "blur": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "spread": {
192
+ "value": 2,
193
+ "unit": "px"
194
+ }
183
195
  }
184
196
  ],
185
197
  "filePath": "src/tokens/component/avatar.json5",
@@ -195,10 +207,22 @@
195
207
  {
196
208
  "color": "{base.color.neutral.0}",
197
209
  "alpha": 0.8,
198
- "offsetX": "0px",
199
- "offsetY": "0px",
200
- "blur": "0px",
201
- "spread": "2px"
210
+ "offsetX": {
211
+ "value": 0,
212
+ "unit": "px"
213
+ },
214
+ "offsetY": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "blur": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "spread": {
223
+ "value": 2,
224
+ "unit": "px"
225
+ }
202
226
  }
203
227
  ],
204
228
  "$type": "shadow",
@@ -213,10 +237,22 @@
213
237
  {
214
238
  "color": "{base.color.neutral.1}",
215
239
  "alpha": 1,
216
- "offsetX": "0px",
217
- "offsetY": "0px",
218
- "blur": "0px",
219
- "spread": "2px"
240
+ "offsetX": {
241
+ "value": 0,
242
+ "unit": "px"
243
+ },
244
+ "offsetY": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "blur": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "spread": {
253
+ "value": 2,
254
+ "unit": "px"
255
+ }
220
256
  }
221
257
  ],
222
258
  "filePath": "src/tokens/component/avatar.json5",
@@ -230,7 +266,7 @@
230
266
  "name": "avatar-shadow",
231
267
  "attributes": {},
232
268
  "path": ["avatar", "shadow"],
233
- "value": "0px 0px 0px 2px #ffffffcc",
269
+ "value": "0 0 0 2px #ffffffcc",
234
270
  "type": "shadow"
235
271
  },
236
272
  "avatarStack-fade-bgColor-default": {
@@ -543,6 +579,10 @@
543
579
  },
544
580
  "org.primer.overrides": {
545
581
  "dark": "#ffffff"
582
+ },
583
+ "org.primer.llm": {
584
+ "doNotUse": true,
585
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
546
586
  }
547
587
  },
548
588
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -559,6 +599,10 @@
559
599
  },
560
600
  "org.primer.overrides": {
561
601
  "dark": "{base.color.neutral.0}"
602
+ },
603
+ "org.primer.llm": {
604
+ "doNotUse": true,
605
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
562
606
  }
563
607
  },
564
608
  "key": "{bgColor.black}"
@@ -2433,6 +2477,10 @@
2433
2477
  },
2434
2478
  "org.primer.overrides": {
2435
2479
  "dark": "#010409"
2480
+ },
2481
+ "org.primer.llm": {
2482
+ "doNotUse": true,
2483
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2436
2484
  }
2437
2485
  },
2438
2486
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2449,6 +2497,10 @@
2449
2497
  },
2450
2498
  "org.primer.overrides": {
2451
2499
  "dark": "{base.color.neutral.13}"
2500
+ },
2501
+ "org.primer.llm": {
2502
+ "doNotUse": true,
2503
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2452
2504
  }
2453
2505
  },
2454
2506
  "key": "{bgColor.white}"
@@ -6939,10 +6991,22 @@
6939
6991
  {
6940
6992
  "color": "#361200",
6941
6993
  "alpha": 0.2,
6942
- "offsetX": "0px",
6943
- "offsetY": "1px",
6944
- "blur": "0px",
6945
- "spread": "0px",
6994
+ "offsetX": {
6995
+ "value": 0,
6996
+ "unit": "px"
6997
+ },
6998
+ "offsetY": {
6999
+ "value": 1,
7000
+ "unit": "px"
7001
+ },
7002
+ "blur": {
7003
+ "value": 0,
7004
+ "unit": "px"
7005
+ },
7006
+ "spread": {
7007
+ "value": 0,
7008
+ "unit": "px"
7009
+ },
6946
7010
  "inset": true
6947
7011
  }
6948
7012
  ],
@@ -6955,10 +7019,22 @@
6955
7019
  {
6956
7020
  "color": "#ffffff00",
6957
7021
  "alpha": 0,
6958
- "offsetX": "0px",
6959
- "offsetY": "0px",
6960
- "blur": "0px",
6961
- "spread": "0px",
7022
+ "offsetX": {
7023
+ "value": 0,
7024
+ "unit": "px"
7025
+ },
7026
+ "offsetY": {
7027
+ "value": 0,
7028
+ "unit": "px"
7029
+ },
7030
+ "blur": {
7031
+ "value": 0,
7032
+ "unit": "px"
7033
+ },
7034
+ "spread": {
7035
+ "value": 0,
7036
+ "unit": "px"
7037
+ },
6962
7038
  "inset": false
6963
7039
  }
6964
7040
  ],
@@ -6975,10 +7051,22 @@
6975
7051
  {
6976
7052
  "color": "{base.color.red.9}",
6977
7053
  "alpha": 0.2,
6978
- "offsetX": "0px",
6979
- "offsetY": "1px",
6980
- "blur": "0px",
6981
- "spread": "0px",
7054
+ "offsetX": {
7055
+ "value": 0,
7056
+ "unit": "px"
7057
+ },
7058
+ "offsetY": {
7059
+ "value": 1,
7060
+ "unit": "px"
7061
+ },
7062
+ "blur": {
7063
+ "value": 0,
7064
+ "unit": "px"
7065
+ },
7066
+ "spread": {
7067
+ "value": 0,
7068
+ "unit": "px"
7069
+ },
6982
7070
  "inset": true
6983
7071
  }
6984
7072
  ],
@@ -6994,10 +7082,22 @@
6994
7082
  {
6995
7083
  "color": "{base.color.orange.9}",
6996
7084
  "alpha": 0.2,
6997
- "offsetX": "0px",
6998
- "offsetY": "1px",
6999
- "blur": "0px",
7000
- "spread": "0px",
7085
+ "offsetX": {
7086
+ "value": 0,
7087
+ "unit": "px"
7088
+ },
7089
+ "offsetY": {
7090
+ "value": 1,
7091
+ "unit": "px"
7092
+ },
7093
+ "blur": {
7094
+ "value": 0,
7095
+ "unit": "px"
7096
+ },
7097
+ "spread": {
7098
+ "value": 0,
7099
+ "unit": "px"
7100
+ },
7001
7101
  "inset": true
7002
7102
  }
7003
7103
  ],
@@ -7010,10 +7110,22 @@
7010
7110
  {
7011
7111
  "color": "{base.color.transparent}",
7012
7112
  "alpha": 0,
7013
- "offsetX": "0px",
7014
- "offsetY": "0px",
7015
- "blur": "0px",
7016
- "spread": "0px",
7113
+ "offsetX": {
7114
+ "value": 0,
7115
+ "unit": "px"
7116
+ },
7117
+ "offsetY": {
7118
+ "value": 0,
7119
+ "unit": "px"
7120
+ },
7121
+ "blur": {
7122
+ "value": 0,
7123
+ "unit": "px"
7124
+ },
7125
+ "spread": {
7126
+ "value": 0,
7127
+ "unit": "px"
7128
+ },
7017
7129
  "inset": false
7018
7130
  }
7019
7131
  ],
@@ -7028,7 +7140,7 @@
7028
7140
  "name": "button-danger-shadow-selected",
7029
7141
  "attributes": {},
7030
7142
  "path": ["button", "danger", "shadow", "selected"],
7031
- "value": "inset 0px 1px 0px 0px #43001133",
7143
+ "value": "inset 0 1px 0 0 #43001133",
7032
7144
  "type": "shadow"
7033
7145
  },
7034
7146
  "button-default-bgColor-active": {
@@ -7402,10 +7514,22 @@
7402
7514
  {
7403
7515
  "color": "#ffffff00",
7404
7516
  "alpha": 0,
7405
- "offsetX": "0px",
7406
- "offsetY": "0px",
7407
- "blur": "0px",
7408
- "spread": "0px",
7517
+ "offsetX": {
7518
+ "value": 0,
7519
+ "unit": "px"
7520
+ },
7521
+ "offsetY": {
7522
+ "value": 0,
7523
+ "unit": "px"
7524
+ },
7525
+ "blur": {
7526
+ "value": 0,
7527
+ "unit": "px"
7528
+ },
7529
+ "spread": {
7530
+ "value": 0,
7531
+ "unit": "px"
7532
+ },
7409
7533
  "inset": false
7410
7534
  }
7411
7535
  ],
@@ -7422,10 +7546,22 @@
7422
7546
  {
7423
7547
  "color": "{base.color.neutral.13}",
7424
7548
  "alpha": 0.04,
7425
- "offsetX": "0px",
7426
- "offsetY": "1px",
7427
- "blur": "0px",
7428
- "spread": "0px",
7549
+ "offsetX": {
7550
+ "value": 0,
7551
+ "unit": "px"
7552
+ },
7553
+ "offsetY": {
7554
+ "value": 1,
7555
+ "unit": "px"
7556
+ },
7557
+ "blur": {
7558
+ "value": 0,
7559
+ "unit": "px"
7560
+ },
7561
+ "spread": {
7562
+ "value": 0,
7563
+ "unit": "px"
7564
+ },
7429
7565
  "inset": false
7430
7566
  }
7431
7567
  ],
@@ -7441,10 +7577,22 @@
7441
7577
  {
7442
7578
  "color": "{base.color.transparent}",
7443
7579
  "alpha": 0,
7444
- "offsetX": "0px",
7445
- "offsetY": "0px",
7446
- "blur": "0px",
7447
- "spread": "0px",
7580
+ "offsetX": {
7581
+ "value": 0,
7582
+ "unit": "px"
7583
+ },
7584
+ "offsetY": {
7585
+ "value": 0,
7586
+ "unit": "px"
7587
+ },
7588
+ "blur": {
7589
+ "value": 0,
7590
+ "unit": "px"
7591
+ },
7592
+ "spread": {
7593
+ "value": 0,
7594
+ "unit": "px"
7595
+ },
7448
7596
  "inset": false
7449
7597
  }
7450
7598
  ],
@@ -7459,7 +7607,7 @@
7459
7607
  "name": "button-default-shadow-resting",
7460
7608
  "attributes": {},
7461
7609
  "path": ["button", "default", "shadow", "resting"],
7462
- "value": "0px 1px 0px 0px #0104090a",
7610
+ "value": "0 1px 0 0 #0104090a",
7463
7611
  "type": "shadow"
7464
7612
  },
7465
7613
  "button-inactive-bgColor": {
@@ -9161,10 +9309,22 @@
9161
9309
  {
9162
9310
  "color": "#ffffff00",
9163
9311
  "alpha": 0,
9164
- "offsetX": "0px",
9165
- "offsetY": "0px",
9166
- "blur": "0px",
9167
- "spread": "0px",
9312
+ "offsetX": {
9313
+ "value": 0,
9314
+ "unit": "px"
9315
+ },
9316
+ "offsetY": {
9317
+ "value": 0,
9318
+ "unit": "px"
9319
+ },
9320
+ "blur": {
9321
+ "value": 0,
9322
+ "unit": "px"
9323
+ },
9324
+ "spread": {
9325
+ "value": 0,
9326
+ "unit": "px"
9327
+ },
9168
9328
  "inset": false
9169
9329
  }
9170
9330
  ],
@@ -9181,10 +9341,22 @@
9181
9341
  {
9182
9342
  "color": "{base.color.blue.9}",
9183
9343
  "alpha": 0.2,
9184
- "offsetX": "0px",
9185
- "offsetY": "1px",
9186
- "blur": "0px",
9187
- "spread": "0px",
9344
+ "offsetX": {
9345
+ "value": 0,
9346
+ "unit": "px"
9347
+ },
9348
+ "offsetY": {
9349
+ "value": 1,
9350
+ "unit": "px"
9351
+ },
9352
+ "blur": {
9353
+ "value": 0,
9354
+ "unit": "px"
9355
+ },
9356
+ "spread": {
9357
+ "value": 0,
9358
+ "unit": "px"
9359
+ },
9188
9360
  "inset": true
9189
9361
  }
9190
9362
  ],
@@ -9200,10 +9372,22 @@
9200
9372
  {
9201
9373
  "color": "{base.color.transparent}",
9202
9374
  "alpha": 0,
9203
- "offsetX": "0px",
9204
- "offsetY": "0px",
9205
- "blur": "0px",
9206
- "spread": "0px",
9375
+ "offsetX": {
9376
+ "value": 0,
9377
+ "unit": "px"
9378
+ },
9379
+ "offsetY": {
9380
+ "value": 0,
9381
+ "unit": "px"
9382
+ },
9383
+ "blur": {
9384
+ "value": 0,
9385
+ "unit": "px"
9386
+ },
9387
+ "spread": {
9388
+ "value": 0,
9389
+ "unit": "px"
9390
+ },
9207
9391
  "inset": false
9208
9392
  }
9209
9393
  ],
@@ -9218,7 +9402,7 @@
9218
9402
  "name": "button-outline-shadow-selected",
9219
9403
  "attributes": {},
9220
9404
  "path": ["button", "outline", "shadow", "selected"],
9221
- "value": "inset 0px 1px 0px 0px #021a4a33",
9405
+ "value": "inset 0 1px 0 0 #021a4a33",
9222
9406
  "type": "shadow"
9223
9407
  },
9224
9408
  "button-primary-bgColor-active": {
@@ -10371,10 +10555,22 @@
10371
10555
  {
10372
10556
  "color": "#021a4a",
10373
10557
  "alpha": 0.3,
10374
- "offsetX": "0px",
10375
- "offsetY": "1px",
10376
- "blur": "0px",
10377
- "spread": "0px",
10558
+ "offsetX": {
10559
+ "value": 0,
10560
+ "unit": "px"
10561
+ },
10562
+ "offsetY": {
10563
+ "value": 1,
10564
+ "unit": "px"
10565
+ },
10566
+ "blur": {
10567
+ "value": 0,
10568
+ "unit": "px"
10569
+ },
10570
+ "spread": {
10571
+ "value": 0,
10572
+ "unit": "px"
10573
+ },
10378
10574
  "inset": true
10379
10575
  }
10380
10576
  ],
@@ -10387,10 +10583,22 @@
10387
10583
  {
10388
10584
  "color": "#021a4a",
10389
10585
  "alpha": 0.3,
10390
- "offsetX": "0px",
10391
- "offsetY": "1px",
10392
- "blur": "0px",
10393
- "spread": "0px",
10586
+ "offsetX": {
10587
+ "value": 0,
10588
+ "unit": "px"
10589
+ },
10590
+ "offsetY": {
10591
+ "value": 1,
10592
+ "unit": "px"
10593
+ },
10594
+ "blur": {
10595
+ "value": 0,
10596
+ "unit": "px"
10597
+ },
10598
+ "spread": {
10599
+ "value": 0,
10600
+ "unit": "px"
10601
+ },
10394
10602
  "inset": true
10395
10603
  }
10396
10604
  ],
@@ -10403,10 +10611,22 @@
10403
10611
  {
10404
10612
  "color": "#ffffff00",
10405
10613
  "alpha": 0,
10406
- "offsetX": "0px",
10407
- "offsetY": "0px",
10408
- "blur": "0px",
10409
- "spread": "0px",
10614
+ "offsetX": {
10615
+ "value": 0,
10616
+ "unit": "px"
10617
+ },
10618
+ "offsetY": {
10619
+ "value": 0,
10620
+ "unit": "px"
10621
+ },
10622
+ "blur": {
10623
+ "value": 0,
10624
+ "unit": "px"
10625
+ },
10626
+ "spread": {
10627
+ "value": 0,
10628
+ "unit": "px"
10629
+ },
10410
10630
  "inset": false
10411
10631
  }
10412
10632
  ],
@@ -10423,10 +10643,22 @@
10423
10643
  {
10424
10644
  "color": "{base.color.green.9}",
10425
10645
  "alpha": 0.3,
10426
- "offsetX": "0px",
10427
- "offsetY": "1px",
10428
- "blur": "0px",
10429
- "spread": "0px",
10646
+ "offsetX": {
10647
+ "value": 0,
10648
+ "unit": "px"
10649
+ },
10650
+ "offsetY": {
10651
+ "value": 1,
10652
+ "unit": "px"
10653
+ },
10654
+ "blur": {
10655
+ "value": 0,
10656
+ "unit": "px"
10657
+ },
10658
+ "spread": {
10659
+ "value": 0,
10660
+ "unit": "px"
10661
+ },
10430
10662
  "inset": true
10431
10663
  }
10432
10664
  ],
@@ -10442,10 +10674,22 @@
10442
10674
  {
10443
10675
  "color": "{base.color.blue.9}",
10444
10676
  "alpha": 0.3,
10445
- "offsetX": "0px",
10446
- "offsetY": "1px",
10447
- "blur": "0px",
10448
- "spread": "0px",
10677
+ "offsetX": {
10678
+ "value": 0,
10679
+ "unit": "px"
10680
+ },
10681
+ "offsetY": {
10682
+ "value": 1,
10683
+ "unit": "px"
10684
+ },
10685
+ "blur": {
10686
+ "value": 0,
10687
+ "unit": "px"
10688
+ },
10689
+ "spread": {
10690
+ "value": 0,
10691
+ "unit": "px"
10692
+ },
10449
10693
  "inset": true
10450
10694
  }
10451
10695
  ],
@@ -10458,10 +10702,22 @@
10458
10702
  {
10459
10703
  "color": "{base.color.blue.9}",
10460
10704
  "alpha": 0.3,
10461
- "offsetX": "0px",
10462
- "offsetY": "1px",
10463
- "blur": "0px",
10464
- "spread": "0px",
10705
+ "offsetX": {
10706
+ "value": 0,
10707
+ "unit": "px"
10708
+ },
10709
+ "offsetY": {
10710
+ "value": 1,
10711
+ "unit": "px"
10712
+ },
10713
+ "blur": {
10714
+ "value": 0,
10715
+ "unit": "px"
10716
+ },
10717
+ "spread": {
10718
+ "value": 0,
10719
+ "unit": "px"
10720
+ },
10465
10721
  "inset": true
10466
10722
  }
10467
10723
  ],
@@ -10474,10 +10730,22 @@
10474
10730
  {
10475
10731
  "color": "{base.color.transparent}",
10476
10732
  "alpha": 0,
10477
- "offsetX": "0px",
10478
- "offsetY": "0px",
10479
- "blur": "0px",
10480
- "spread": "0px",
10733
+ "offsetX": {
10734
+ "value": 0,
10735
+ "unit": "px"
10736
+ },
10737
+ "offsetY": {
10738
+ "value": 0,
10739
+ "unit": "px"
10740
+ },
10741
+ "blur": {
10742
+ "value": 0,
10743
+ "unit": "px"
10744
+ },
10745
+ "spread": {
10746
+ "value": 0,
10747
+ "unit": "px"
10748
+ },
10481
10749
  "inset": false
10482
10750
  }
10483
10751
  ],
@@ -10492,7 +10760,7 @@
10492
10760
  "name": "button-primary-shadow-selected",
10493
10761
  "attributes": {},
10494
10762
  "path": ["button", "primary", "shadow", "selected"],
10495
- "value": "inset 0px 1px 0px 0px #00230b4d",
10763
+ "value": "inset 0 1px 0 0 #00230b4d",
10496
10764
  "type": "shadow"
10497
10765
  },
10498
10766
  "button-star-iconColor": {
@@ -37213,6 +37481,10 @@
37213
37481
  },
37214
37482
  "org.primer.overrides": {
37215
37483
  "dark": "#ffffff"
37484
+ },
37485
+ "org.primer.llm": {
37486
+ "doNotUse": true,
37487
+ "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."
37216
37488
  }
37217
37489
  },
37218
37490
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37229,6 +37501,10 @@
37229
37501
  },
37230
37502
  "org.primer.overrides": {
37231
37503
  "dark": "{base.color.neutral.0}"
37504
+ },
37505
+ "org.primer.llm": {
37506
+ "doNotUse": true,
37507
+ "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."
37232
37508
  }
37233
37509
  },
37234
37510
  "key": "{fgColor.black}"
@@ -38202,6 +38478,10 @@
38202
38478
  },
38203
38479
  "org.primer.overrides": {
38204
38480
  "dark": "#010409"
38481
+ },
38482
+ "org.primer.llm": {
38483
+ "doNotUse": true,
38484
+ "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."
38205
38485
  }
38206
38486
  },
38207
38487
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38218,6 +38498,10 @@
38218
38498
  },
38219
38499
  "org.primer.overrides": {
38220
38500
  "dark": "{base.color.neutral.13}"
38501
+ },
38502
+ "org.primer.llm": {
38503
+ "doNotUse": true,
38504
+ "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."
38221
38505
  }
38222
38506
  },
38223
38507
  "key": "{fgColor.white}"
@@ -38243,7 +38527,10 @@
38243
38527
  "$value": {
38244
38528
  "color": "{focus.outlineColor}",
38245
38529
  "style": "solid",
38246
- "width": "2px"
38530
+ "width": {
38531
+ "value": 2,
38532
+ "unit": "px"
38533
+ }
38247
38534
  },
38248
38535
  "$type": "border",
38249
38536
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47408,18 +47695,183 @@
47408
47695
  {
47409
47696
  "color": "#454c54",
47410
47697
  "alpha": 1,
47411
- "offsetX": "0px",
47412
- "offsetY": "0px",
47413
- "blur": "0px",
47414
- "spread": "1px"
47698
+ "offsetX": {
47699
+ "value": 0,
47700
+ "unit": "px"
47701
+ },
47702
+ "offsetY": {
47703
+ "value": 0,
47704
+ "unit": "px"
47705
+ },
47706
+ "blur": {
47707
+ "value": 0,
47708
+ "unit": "px"
47709
+ },
47710
+ "spread": {
47711
+ "value": 1,
47712
+ "unit": "px"
47713
+ }
47415
47714
  },
47416
47715
  {
47417
47716
  "color": "#ffffff",
47418
47717
  "alpha": 1,
47419
- "offsetX": "0px",
47420
- "offsetY": "24px",
47421
- "blur": "48px",
47422
- "spread": "0px"
47718
+ "offsetX": {
47719
+ "value": 0,
47720
+ "unit": "px"
47721
+ },
47722
+ "offsetY": {
47723
+ "value": 24,
47724
+ "unit": "px"
47725
+ },
47726
+ "blur": {
47727
+ "value": 48,
47728
+ "unit": "px"
47729
+ },
47730
+ "spread": {
47731
+ "value": 0,
47732
+ "unit": "px"
47733
+ }
47734
+ }
47735
+ ],
47736
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47737
+ "isSource": true,
47738
+ "$type": "shadow"
47739
+ },
47740
+ "light-high-contrast": {
47741
+ "$value": [
47742
+ {
47743
+ "color": "#454c54",
47744
+ "alpha": 1,
47745
+ "offsetX": {
47746
+ "value": 0,
47747
+ "unit": "px"
47748
+ },
47749
+ "offsetY": {
47750
+ "value": 0,
47751
+ "unit": "px"
47752
+ },
47753
+ "blur": {
47754
+ "value": 0,
47755
+ "unit": "px"
47756
+ },
47757
+ "spread": {
47758
+ "value": 1,
47759
+ "unit": "px"
47760
+ }
47761
+ },
47762
+ {
47763
+ "color": "#25292e",
47764
+ "alpha": 0.24,
47765
+ "offsetX": {
47766
+ "value": 0,
47767
+ "unit": "px"
47768
+ },
47769
+ "offsetY": {
47770
+ "value": 40,
47771
+ "unit": "px"
47772
+ },
47773
+ "blur": {
47774
+ "value": 80,
47775
+ "unit": "px"
47776
+ },
47777
+ "spread": {
47778
+ "value": 0,
47779
+ "unit": "px"
47780
+ }
47781
+ }
47782
+ ],
47783
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47784
+ "isSource": true,
47785
+ "$type": "shadow"
47786
+ },
47787
+ "light-protanopia-deuteranopia-high-contrast": {
47788
+ "$value": [
47789
+ {
47790
+ "color": "#454c54",
47791
+ "alpha": 1,
47792
+ "offsetX": {
47793
+ "value": 0,
47794
+ "unit": "px"
47795
+ },
47796
+ "offsetY": {
47797
+ "value": 0,
47798
+ "unit": "px"
47799
+ },
47800
+ "blur": {
47801
+ "value": 0,
47802
+ "unit": "px"
47803
+ },
47804
+ "spread": {
47805
+ "value": 1,
47806
+ "unit": "px"
47807
+ }
47808
+ },
47809
+ {
47810
+ "color": "#25292e",
47811
+ "alpha": 0.24,
47812
+ "offsetX": {
47813
+ "value": 0,
47814
+ "unit": "px"
47815
+ },
47816
+ "offsetY": {
47817
+ "value": 40,
47818
+ "unit": "px"
47819
+ },
47820
+ "blur": {
47821
+ "value": 80,
47822
+ "unit": "px"
47823
+ },
47824
+ "spread": {
47825
+ "value": 0,
47826
+ "unit": "px"
47827
+ }
47828
+ }
47829
+ ],
47830
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47831
+ "isSource": true,
47832
+ "$type": "shadow"
47833
+ },
47834
+ "light-tritanopia-high-contrast": {
47835
+ "$value": [
47836
+ {
47837
+ "color": "#454c54",
47838
+ "alpha": 1,
47839
+ "offsetX": {
47840
+ "value": 0,
47841
+ "unit": "px"
47842
+ },
47843
+ "offsetY": {
47844
+ "value": 0,
47845
+ "unit": "px"
47846
+ },
47847
+ "blur": {
47848
+ "value": 0,
47849
+ "unit": "px"
47850
+ },
47851
+ "spread": {
47852
+ "value": 1,
47853
+ "unit": "px"
47854
+ }
47855
+ },
47856
+ {
47857
+ "color": "#25292e",
47858
+ "alpha": 0.24,
47859
+ "offsetX": {
47860
+ "value": 0,
47861
+ "unit": "px"
47862
+ },
47863
+ "offsetY": {
47864
+ "value": 40,
47865
+ "unit": "px"
47866
+ },
47867
+ "blur": {
47868
+ "value": 80,
47869
+ "unit": "px"
47870
+ },
47871
+ "spread": {
47872
+ "value": 0,
47873
+ "unit": "px"
47874
+ }
47423
47875
  }
47424
47876
  ],
47425
47877
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47438,19 +47890,43 @@
47438
47890
  "$value": [
47439
47891
  {
47440
47892
  "color": "{overlay.borderColor}",
47441
- "alpha": 0,
47442
- "offsetX": "0px",
47443
- "offsetY": "0px",
47444
- "blur": "0px",
47445
- "spread": "1px"
47893
+ "alpha": 1,
47894
+ "offsetX": {
47895
+ "value": 0,
47896
+ "unit": "px"
47897
+ },
47898
+ "offsetY": {
47899
+ "value": 0,
47900
+ "unit": "px"
47901
+ },
47902
+ "blur": {
47903
+ "value": 0,
47904
+ "unit": "px"
47905
+ },
47906
+ "spread": {
47907
+ "value": 1,
47908
+ "unit": "px"
47909
+ }
47446
47910
  },
47447
47911
  {
47448
47912
  "color": "{base.color.neutral.12}",
47449
47913
  "alpha": 0.24,
47450
- "offsetX": "0px",
47451
- "offsetY": "40px",
47452
- "blur": "80px",
47453
- "spread": "0px"
47914
+ "offsetX": {
47915
+ "value": 0,
47916
+ "unit": "px"
47917
+ },
47918
+ "offsetY": {
47919
+ "value": 40,
47920
+ "unit": "px"
47921
+ },
47922
+ "blur": {
47923
+ "value": 80,
47924
+ "unit": "px"
47925
+ },
47926
+ "spread": {
47927
+ "value": 0,
47928
+ "unit": "px"
47929
+ }
47454
47930
  }
47455
47931
  ],
47456
47932
  "$type": "shadow",
@@ -47466,18 +47942,183 @@
47466
47942
  {
47467
47943
  "color": "{overlay.borderColor}",
47468
47944
  "alpha": 1,
47469
- "offsetX": "0px",
47470
- "offsetY": "0px",
47471
- "blur": "0px",
47472
- "spread": "1px"
47945
+ "offsetX": {
47946
+ "value": 0,
47947
+ "unit": "px"
47948
+ },
47949
+ "offsetY": {
47950
+ "value": 0,
47951
+ "unit": "px"
47952
+ },
47953
+ "blur": {
47954
+ "value": 0,
47955
+ "unit": "px"
47956
+ },
47957
+ "spread": {
47958
+ "value": 1,
47959
+ "unit": "px"
47960
+ }
47473
47961
  },
47474
47962
  {
47475
47963
  "color": "{base.color.neutral.0}",
47476
47964
  "alpha": 1,
47477
- "offsetX": "0px",
47478
- "offsetY": "24px",
47479
- "blur": "48px",
47480
- "spread": "0px"
47965
+ "offsetX": {
47966
+ "value": 0,
47967
+ "unit": "px"
47968
+ },
47969
+ "offsetY": {
47970
+ "value": 24,
47971
+ "unit": "px"
47972
+ },
47973
+ "blur": {
47974
+ "value": 48,
47975
+ "unit": "px"
47976
+ },
47977
+ "spread": {
47978
+ "value": 0,
47979
+ "unit": "px"
47980
+ }
47981
+ }
47982
+ ],
47983
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
47984
+ "isSource": true,
47985
+ "$type": "shadow"
47986
+ },
47987
+ "light-high-contrast": {
47988
+ "$value": [
47989
+ {
47990
+ "color": "{overlay.borderColor}",
47991
+ "alpha": 1,
47992
+ "offsetX": {
47993
+ "value": 0,
47994
+ "unit": "px"
47995
+ },
47996
+ "offsetY": {
47997
+ "value": 0,
47998
+ "unit": "px"
47999
+ },
48000
+ "blur": {
48001
+ "value": 0,
48002
+ "unit": "px"
48003
+ },
48004
+ "spread": {
48005
+ "value": 1,
48006
+ "unit": "px"
48007
+ }
48008
+ },
48009
+ {
48010
+ "color": "{base.color.neutral.12}",
48011
+ "alpha": 0.24,
48012
+ "offsetX": {
48013
+ "value": 0,
48014
+ "unit": "px"
48015
+ },
48016
+ "offsetY": {
48017
+ "value": 40,
48018
+ "unit": "px"
48019
+ },
48020
+ "blur": {
48021
+ "value": 80,
48022
+ "unit": "px"
48023
+ },
48024
+ "spread": {
48025
+ "value": 0,
48026
+ "unit": "px"
48027
+ }
48028
+ }
48029
+ ],
48030
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48031
+ "isSource": true,
48032
+ "$type": "shadow"
48033
+ },
48034
+ "light-protanopia-deuteranopia-high-contrast": {
48035
+ "$value": [
48036
+ {
48037
+ "color": "{overlay.borderColor}",
48038
+ "alpha": 1,
48039
+ "offsetX": {
48040
+ "value": 0,
48041
+ "unit": "px"
48042
+ },
48043
+ "offsetY": {
48044
+ "value": 0,
48045
+ "unit": "px"
48046
+ },
48047
+ "blur": {
48048
+ "value": 0,
48049
+ "unit": "px"
48050
+ },
48051
+ "spread": {
48052
+ "value": 1,
48053
+ "unit": "px"
48054
+ }
48055
+ },
48056
+ {
48057
+ "color": "{base.color.neutral.12}",
48058
+ "alpha": 0.24,
48059
+ "offsetX": {
48060
+ "value": 0,
48061
+ "unit": "px"
48062
+ },
48063
+ "offsetY": {
48064
+ "value": 40,
48065
+ "unit": "px"
48066
+ },
48067
+ "blur": {
48068
+ "value": 80,
48069
+ "unit": "px"
48070
+ },
48071
+ "spread": {
48072
+ "value": 0,
48073
+ "unit": "px"
48074
+ }
48075
+ }
48076
+ ],
48077
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48078
+ "isSource": true,
48079
+ "$type": "shadow"
48080
+ },
48081
+ "light-tritanopia-high-contrast": {
48082
+ "$value": [
48083
+ {
48084
+ "color": "{overlay.borderColor}",
48085
+ "alpha": 1,
48086
+ "offsetX": {
48087
+ "value": 0,
48088
+ "unit": "px"
48089
+ },
48090
+ "offsetY": {
48091
+ "value": 0,
48092
+ "unit": "px"
48093
+ },
48094
+ "blur": {
48095
+ "value": 0,
48096
+ "unit": "px"
48097
+ },
48098
+ "spread": {
48099
+ "value": 1,
48100
+ "unit": "px"
48101
+ }
48102
+ },
48103
+ {
48104
+ "color": "{base.color.neutral.12}",
48105
+ "alpha": 0.24,
48106
+ "offsetX": {
48107
+ "value": 0,
48108
+ "unit": "px"
48109
+ },
48110
+ "offsetY": {
48111
+ "value": 40,
48112
+ "unit": "px"
48113
+ },
48114
+ "blur": {
48115
+ "value": 80,
48116
+ "unit": "px"
48117
+ },
48118
+ "spread": {
48119
+ "value": 0,
48120
+ "unit": "px"
48121
+ }
47481
48122
  }
47482
48123
  ],
47483
48124
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47495,7 +48136,7 @@
47495
48136
  "name": "shadow-floating-large",
47496
48137
  "attributes": {},
47497
48138
  "path": ["shadow", "floating", "large"],
47498
- "value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
48139
+ "value": "0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d",
47499
48140
  "type": "shadow",
47500
48141
  "description": "Large floating shadow for modals and dialogs"
47501
48142
  },
@@ -47509,24 +48150,52 @@
47509
48150
  {
47510
48151
  "color": "#ffffff",
47511
48152
  "alpha": 0.4,
47512
- "offsetX": "0px",
47513
- "offsetY": "6px",
47514
- "blur": "12px",
47515
- "spread": "-3px"
48153
+ "offsetX": {
48154
+ "value": 0,
48155
+ "unit": "px"
48156
+ },
48157
+ "offsetY": {
48158
+ "value": 6,
48159
+ "unit": "px"
48160
+ },
48161
+ "blur": {
48162
+ "value": 12,
48163
+ "unit": "px"
48164
+ },
48165
+ "spread": {
48166
+ "value": -3,
48167
+ "unit": "px"
48168
+ }
47516
48169
  },
47517
48170
  {
47518
48171
  "color": "#ffffff",
47519
48172
  "alpha": 0.4,
47520
- "offsetX": "0px",
47521
- "offsetY": "6px",
47522
- "blur": "18px",
47523
- "spread": "0px"
48173
+ "offsetX": {
48174
+ "value": 0,
48175
+ "unit": "px"
48176
+ },
48177
+ "offsetY": {
48178
+ "value": 6,
48179
+ "unit": "px"
48180
+ },
48181
+ "blur": {
48182
+ "value": 18,
48183
+ "unit": "px"
48184
+ },
48185
+ "spread": {
48186
+ "value": 0,
48187
+ "unit": "px"
48188
+ }
47524
48189
  }
47525
48190
  ],
47526
48191
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47527
48192
  "isSource": true,
47528
48193
  "$type": "shadow"
47529
48194
  }
48195
+ },
48196
+ "org.primer.llm": {
48197
+ "usage": ["legacy-component", "backward-compatibility"],
48198
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47530
48199
  }
47531
48200
  },
47532
48201
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47536,21 +48205,46 @@
47536
48205
  {
47537
48206
  "color": "{base.color.neutral.12}",
47538
48207
  "alpha": 0.04,
47539
- "offsetX": "0px",
47540
- "offsetY": "6px",
47541
- "blur": "12px",
47542
- "spread": "-3px"
48208
+ "offsetX": {
48209
+ "value": 0,
48210
+ "unit": "px"
48211
+ },
48212
+ "offsetY": {
48213
+ "value": 6,
48214
+ "unit": "px"
48215
+ },
48216
+ "blur": {
48217
+ "value": 12,
48218
+ "unit": "px"
48219
+ },
48220
+ "spread": {
48221
+ "value": -3,
48222
+ "unit": "px"
48223
+ }
47543
48224
  },
47544
48225
  {
47545
48226
  "color": "{base.color.neutral.12}",
47546
48227
  "alpha": 0.12,
47547
- "offsetX": "0px",
47548
- "offsetY": "6px",
47549
- "blur": "18px",
47550
- "spread": "0px"
48228
+ "offsetX": {
48229
+ "value": 0,
48230
+ "unit": "px"
48231
+ },
48232
+ "offsetY": {
48233
+ "value": 6,
48234
+ "unit": "px"
48235
+ },
48236
+ "blur": {
48237
+ "value": 18,
48238
+ "unit": "px"
48239
+ },
48240
+ "spread": {
48241
+ "value": 0,
48242
+ "unit": "px"
48243
+ }
47551
48244
  }
47552
48245
  ],
47553
48246
  "$type": "shadow",
48247
+ "$description": "Legacy floating shadow for backward compatibility",
47554
48248
  "$extensions": {
47555
48249
  "org.primer.figma": {},
47556
48250
  "org.primer.overrides": {
@@ -47559,24 +48253,52 @@
47559
48253
  {
47560
48254
  "color": "{base.color.neutral.0}",
47561
48255
  "alpha": 0.4,
47562
- "offsetX": "0px",
47563
- "offsetY": "6px",
47564
- "blur": "12px",
47565
- "spread": "-3px"
48256
+ "offsetX": {
48257
+ "value": 0,
48258
+ "unit": "px"
48259
+ },
48260
+ "offsetY": {
48261
+ "value": 6,
48262
+ "unit": "px"
48263
+ },
48264
+ "blur": {
48265
+ "value": 12,
48266
+ "unit": "px"
48267
+ },
48268
+ "spread": {
48269
+ "value": -3,
48270
+ "unit": "px"
48271
+ }
47566
48272
  },
47567
48273
  {
47568
48274
  "color": "{base.color.neutral.0}",
47569
48275
  "alpha": 0.4,
47570
- "offsetX": "0px",
47571
- "offsetY": "6px",
47572
- "blur": "18px",
47573
- "spread": "0px"
48276
+ "offsetX": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "offsetY": {
48281
+ "value": 6,
48282
+ "unit": "px"
48283
+ },
48284
+ "blur": {
48285
+ "value": 18,
48286
+ "unit": "px"
48287
+ },
48288
+ "spread": {
48289
+ "value": 0,
48290
+ "unit": "px"
48291
+ }
47574
48292
  }
47575
48293
  ],
47576
48294
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47577
48295
  "isSource": true,
47578
48296
  "$type": "shadow"
47579
48297
  }
48298
+ },
48299
+ "org.primer.llm": {
48300
+ "usage": ["legacy-component", "backward-compatibility"],
48301
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47580
48302
  }
47581
48303
  },
47582
48304
  "key": "{shadow.floating.legacy}"
@@ -47584,8 +48306,9 @@
47584
48306
  "name": "shadow-floating-legacy",
47585
48307
  "attributes": {},
47586
48308
  "path": ["shadow", "floating", "legacy"],
47587
- "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47588
- "type": "shadow"
48309
+ "value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
48310
+ "type": "shadow",
48311
+ "description": "Legacy floating shadow for backward compatibility"
47589
48312
  },
47590
48313
  "shadow-floating-medium": {
47591
48314
  "key": "{shadow.floating.medium}",
@@ -47600,48 +48323,433 @@
47600
48323
  {
47601
48324
  "color": "#454c54",
47602
48325
  "alpha": 1,
47603
- "offsetX": "0px",
47604
- "offsetY": "0px",
47605
- "blur": "0px",
47606
- "spread": "1px"
48326
+ "offsetX": {
48327
+ "value": 0,
48328
+ "unit": "px"
48329
+ },
48330
+ "offsetY": {
48331
+ "value": 0,
48332
+ "unit": "px"
48333
+ },
48334
+ "blur": {
48335
+ "value": 0,
48336
+ "unit": "px"
48337
+ },
48338
+ "spread": {
48339
+ "value": 1,
48340
+ "unit": "px"
48341
+ }
47607
48342
  },
47608
48343
  {
47609
48344
  "color": "#ffffff",
47610
48345
  "alpha": 0.4,
47611
- "offsetX": "0px",
47612
- "offsetY": "8px",
47613
- "blur": "16px",
47614
- "spread": "-4px"
48346
+ "offsetX": {
48347
+ "value": 0,
48348
+ "unit": "px"
48349
+ },
48350
+ "offsetY": {
48351
+ "value": 8,
48352
+ "unit": "px"
48353
+ },
48354
+ "blur": {
48355
+ "value": 16,
48356
+ "unit": "px"
48357
+ },
48358
+ "spread": {
48359
+ "value": -4,
48360
+ "unit": "px"
48361
+ }
47615
48362
  },
47616
48363
  {
47617
48364
  "color": "#ffffff",
47618
48365
  "alpha": 0.4,
47619
- "offsetX": "0px",
47620
- "offsetY": "4px",
47621
- "blur": "32px",
47622
- "spread": "-4px"
48366
+ "offsetX": {
48367
+ "value": 0,
48368
+ "unit": "px"
48369
+ },
48370
+ "offsetY": {
48371
+ "value": 4,
48372
+ "unit": "px"
48373
+ },
48374
+ "blur": {
48375
+ "value": 32,
48376
+ "unit": "px"
48377
+ },
48378
+ "spread": {
48379
+ "value": -4,
48380
+ "unit": "px"
48381
+ }
47623
48382
  },
47624
48383
  {
47625
48384
  "color": "#ffffff",
47626
48385
  "alpha": 0.4,
47627
- "offsetX": "0px",
47628
- "offsetY": "24px",
47629
- "blur": "48px",
47630
- "spread": "-12px"
48386
+ "offsetX": {
48387
+ "value": 0,
48388
+ "unit": "px"
48389
+ },
48390
+ "offsetY": {
48391
+ "value": 24,
48392
+ "unit": "px"
48393
+ },
48394
+ "blur": {
48395
+ "value": 48,
48396
+ "unit": "px"
48397
+ },
48398
+ "spread": {
48399
+ "value": -12,
48400
+ "unit": "px"
48401
+ }
47631
48402
  },
47632
48403
  {
47633
48404
  "color": "#ffffff",
47634
48405
  "alpha": 0.4,
47635
- "offsetX": "0px",
47636
- "offsetY": "48px",
47637
- "blur": "96px",
47638
- "spread": "-24px"
48406
+ "offsetX": {
48407
+ "value": 0,
48408
+ "unit": "px"
48409
+ },
48410
+ "offsetY": {
48411
+ "value": 48,
48412
+ "unit": "px"
48413
+ },
48414
+ "blur": {
48415
+ "value": 96,
48416
+ "unit": "px"
48417
+ },
48418
+ "spread": {
48419
+ "value": -24,
48420
+ "unit": "px"
48421
+ }
48422
+ }
48423
+ ],
48424
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48425
+ "isSource": true,
48426
+ "$type": "shadow"
48427
+ },
48428
+ "light-high-contrast": {
48429
+ "$value": [
48430
+ {
48431
+ "color": "#454c54",
48432
+ "alpha": 1,
48433
+ "offsetX": {
48434
+ "value": 0,
48435
+ "unit": "px"
48436
+ },
48437
+ "offsetY": {
48438
+ "value": 0,
48439
+ "unit": "px"
48440
+ },
48441
+ "blur": {
48442
+ "value": 0,
48443
+ "unit": "px"
48444
+ },
48445
+ "spread": {
48446
+ "value": 1,
48447
+ "unit": "px"
48448
+ }
48449
+ },
48450
+ {
48451
+ "color": "#25292e",
48452
+ "alpha": 0.08,
48453
+ "offsetX": {
48454
+ "value": 0,
48455
+ "unit": "px"
48456
+ },
48457
+ "offsetY": {
48458
+ "value": 8,
48459
+ "unit": "px"
48460
+ },
48461
+ "blur": {
48462
+ "value": 16,
48463
+ "unit": "px"
48464
+ },
48465
+ "spread": {
48466
+ "value": -4,
48467
+ "unit": "px"
48468
+ }
48469
+ },
48470
+ {
48471
+ "color": "#25292e",
48472
+ "alpha": 0.08,
48473
+ "offsetX": {
48474
+ "value": 0,
48475
+ "unit": "px"
48476
+ },
48477
+ "offsetY": {
48478
+ "value": 4,
48479
+ "unit": "px"
48480
+ },
48481
+ "blur": {
48482
+ "value": 32,
48483
+ "unit": "px"
48484
+ },
48485
+ "spread": {
48486
+ "value": -4,
48487
+ "unit": "px"
48488
+ }
48489
+ },
48490
+ {
48491
+ "color": "#25292e",
48492
+ "alpha": 0.08,
48493
+ "offsetX": {
48494
+ "value": 0,
48495
+ "unit": "px"
48496
+ },
48497
+ "offsetY": {
48498
+ "value": 24,
48499
+ "unit": "px"
48500
+ },
48501
+ "blur": {
48502
+ "value": 48,
48503
+ "unit": "px"
48504
+ },
48505
+ "spread": {
48506
+ "value": -12,
48507
+ "unit": "px"
48508
+ }
48509
+ },
48510
+ {
48511
+ "color": "#25292e",
48512
+ "alpha": 0.08,
48513
+ "offsetX": {
48514
+ "value": 0,
48515
+ "unit": "px"
48516
+ },
48517
+ "offsetY": {
48518
+ "value": 48,
48519
+ "unit": "px"
48520
+ },
48521
+ "blur": {
48522
+ "value": 96,
48523
+ "unit": "px"
48524
+ },
48525
+ "spread": {
48526
+ "value": -24,
48527
+ "unit": "px"
48528
+ }
48529
+ }
48530
+ ],
48531
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48532
+ "isSource": true,
48533
+ "$type": "shadow"
48534
+ },
48535
+ "light-protanopia-deuteranopia-high-contrast": {
48536
+ "$value": [
48537
+ {
48538
+ "color": "#454c54",
48539
+ "alpha": 1,
48540
+ "offsetX": {
48541
+ "value": 0,
48542
+ "unit": "px"
48543
+ },
48544
+ "offsetY": {
48545
+ "value": 0,
48546
+ "unit": "px"
48547
+ },
48548
+ "blur": {
48549
+ "value": 0,
48550
+ "unit": "px"
48551
+ },
48552
+ "spread": {
48553
+ "value": 1,
48554
+ "unit": "px"
48555
+ }
48556
+ },
48557
+ {
48558
+ "color": "#25292e",
48559
+ "alpha": 0.08,
48560
+ "offsetX": {
48561
+ "value": 0,
48562
+ "unit": "px"
48563
+ },
48564
+ "offsetY": {
48565
+ "value": 8,
48566
+ "unit": "px"
48567
+ },
48568
+ "blur": {
48569
+ "value": 16,
48570
+ "unit": "px"
48571
+ },
48572
+ "spread": {
48573
+ "value": -4,
48574
+ "unit": "px"
48575
+ }
48576
+ },
48577
+ {
48578
+ "color": "#25292e",
48579
+ "alpha": 0.08,
48580
+ "offsetX": {
48581
+ "value": 0,
48582
+ "unit": "px"
48583
+ },
48584
+ "offsetY": {
48585
+ "value": 4,
48586
+ "unit": "px"
48587
+ },
48588
+ "blur": {
48589
+ "value": 32,
48590
+ "unit": "px"
48591
+ },
48592
+ "spread": {
48593
+ "value": -4,
48594
+ "unit": "px"
48595
+ }
48596
+ },
48597
+ {
48598
+ "color": "#25292e",
48599
+ "alpha": 0.08,
48600
+ "offsetX": {
48601
+ "value": 0,
48602
+ "unit": "px"
48603
+ },
48604
+ "offsetY": {
48605
+ "value": 24,
48606
+ "unit": "px"
48607
+ },
48608
+ "blur": {
48609
+ "value": 48,
48610
+ "unit": "px"
48611
+ },
48612
+ "spread": {
48613
+ "value": -12,
48614
+ "unit": "px"
48615
+ }
48616
+ },
48617
+ {
48618
+ "color": "#25292e",
48619
+ "alpha": 0.08,
48620
+ "offsetX": {
48621
+ "value": 0,
48622
+ "unit": "px"
48623
+ },
48624
+ "offsetY": {
48625
+ "value": 48,
48626
+ "unit": "px"
48627
+ },
48628
+ "blur": {
48629
+ "value": 96,
48630
+ "unit": "px"
48631
+ },
48632
+ "spread": {
48633
+ "value": -24,
48634
+ "unit": "px"
48635
+ }
48636
+ }
48637
+ ],
48638
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48639
+ "isSource": true,
48640
+ "$type": "shadow"
48641
+ },
48642
+ "light-tritanopia-high-contrast": {
48643
+ "$value": [
48644
+ {
48645
+ "color": "#454c54",
48646
+ "alpha": 1,
48647
+ "offsetX": {
48648
+ "value": 0,
48649
+ "unit": "px"
48650
+ },
48651
+ "offsetY": {
48652
+ "value": 0,
48653
+ "unit": "px"
48654
+ },
48655
+ "blur": {
48656
+ "value": 0,
48657
+ "unit": "px"
48658
+ },
48659
+ "spread": {
48660
+ "value": 1,
48661
+ "unit": "px"
48662
+ }
48663
+ },
48664
+ {
48665
+ "color": "#25292e",
48666
+ "alpha": 0.08,
48667
+ "offsetX": {
48668
+ "value": 0,
48669
+ "unit": "px"
48670
+ },
48671
+ "offsetY": {
48672
+ "value": 8,
48673
+ "unit": "px"
48674
+ },
48675
+ "blur": {
48676
+ "value": 16,
48677
+ "unit": "px"
48678
+ },
48679
+ "spread": {
48680
+ "value": -4,
48681
+ "unit": "px"
48682
+ }
48683
+ },
48684
+ {
48685
+ "color": "#25292e",
48686
+ "alpha": 0.08,
48687
+ "offsetX": {
48688
+ "value": 0,
48689
+ "unit": "px"
48690
+ },
48691
+ "offsetY": {
48692
+ "value": 4,
48693
+ "unit": "px"
48694
+ },
48695
+ "blur": {
48696
+ "value": 32,
48697
+ "unit": "px"
48698
+ },
48699
+ "spread": {
48700
+ "value": -4,
48701
+ "unit": "px"
48702
+ }
48703
+ },
48704
+ {
48705
+ "color": "#25292e",
48706
+ "alpha": 0.08,
48707
+ "offsetX": {
48708
+ "value": 0,
48709
+ "unit": "px"
48710
+ },
48711
+ "offsetY": {
48712
+ "value": 24,
48713
+ "unit": "px"
48714
+ },
48715
+ "blur": {
48716
+ "value": 48,
48717
+ "unit": "px"
48718
+ },
48719
+ "spread": {
48720
+ "value": -12,
48721
+ "unit": "px"
48722
+ }
48723
+ },
48724
+ {
48725
+ "color": "#25292e",
48726
+ "alpha": 0.08,
48727
+ "offsetX": {
48728
+ "value": 0,
48729
+ "unit": "px"
48730
+ },
48731
+ "offsetY": {
48732
+ "value": 48,
48733
+ "unit": "px"
48734
+ },
48735
+ "blur": {
48736
+ "value": 96,
48737
+ "unit": "px"
48738
+ },
48739
+ "spread": {
48740
+ "value": -24,
48741
+ "unit": "px"
48742
+ }
47639
48743
  }
47640
48744
  ],
47641
48745
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47642
48746
  "isSource": true,
47643
48747
  "$type": "shadow"
47644
48748
  }
48749
+ },
48750
+ "org.primer.llm": {
48751
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48752
+ "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."
47645
48753
  }
47646
48754
  },
47647
48755
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47650,46 +48758,107 @@
47650
48758
  "$value": [
47651
48759
  {
47652
48760
  "color": "{overlay.borderColor}",
47653
- "alpha": 0,
47654
- "offsetX": "0px",
47655
- "offsetY": "0px",
47656
- "blur": "0px",
47657
- "spread": "1px"
48761
+ "alpha": 1,
48762
+ "offsetX": {
48763
+ "value": 0,
48764
+ "unit": "px"
48765
+ },
48766
+ "offsetY": {
48767
+ "value": 0,
48768
+ "unit": "px"
48769
+ },
48770
+ "blur": {
48771
+ "value": 0,
48772
+ "unit": "px"
48773
+ },
48774
+ "spread": {
48775
+ "value": 1,
48776
+ "unit": "px"
48777
+ }
47658
48778
  },
47659
48779
  {
47660
48780
  "color": "{base.color.neutral.12}",
47661
48781
  "alpha": 0.08,
47662
- "offsetX": "0px",
47663
- "offsetY": "8px",
47664
- "blur": "16px",
47665
- "spread": "-4px"
48782
+ "offsetX": {
48783
+ "value": 0,
48784
+ "unit": "px"
48785
+ },
48786
+ "offsetY": {
48787
+ "value": 8,
48788
+ "unit": "px"
48789
+ },
48790
+ "blur": {
48791
+ "value": 16,
48792
+ "unit": "px"
48793
+ },
48794
+ "spread": {
48795
+ "value": -4,
48796
+ "unit": "px"
48797
+ }
47666
48798
  },
47667
48799
  {
47668
48800
  "color": "{base.color.neutral.12}",
47669
48801
  "alpha": 0.08,
47670
- "offsetX": "0px",
47671
- "offsetY": "4px",
47672
- "blur": "32px",
47673
- "spread": "-4px"
48802
+ "offsetX": {
48803
+ "value": 0,
48804
+ "unit": "px"
48805
+ },
48806
+ "offsetY": {
48807
+ "value": 4,
48808
+ "unit": "px"
48809
+ },
48810
+ "blur": {
48811
+ "value": 32,
48812
+ "unit": "px"
48813
+ },
48814
+ "spread": {
48815
+ "value": -4,
48816
+ "unit": "px"
48817
+ }
47674
48818
  },
47675
48819
  {
47676
48820
  "color": "{base.color.neutral.12}",
47677
48821
  "alpha": 0.08,
47678
- "offsetX": "0px",
47679
- "offsetY": "24px",
47680
- "blur": "48px",
47681
- "spread": "-12px"
48822
+ "offsetX": {
48823
+ "value": 0,
48824
+ "unit": "px"
48825
+ },
48826
+ "offsetY": {
48827
+ "value": 24,
48828
+ "unit": "px"
48829
+ },
48830
+ "blur": {
48831
+ "value": 48,
48832
+ "unit": "px"
48833
+ },
48834
+ "spread": {
48835
+ "value": -12,
48836
+ "unit": "px"
48837
+ }
47682
48838
  },
47683
48839
  {
47684
48840
  "color": "{base.color.neutral.12}",
47685
48841
  "alpha": 0.08,
47686
- "offsetX": "0px",
47687
- "offsetY": "48px",
47688
- "blur": "96px",
47689
- "spread": "-24px"
48842
+ "offsetX": {
48843
+ "value": 0,
48844
+ "unit": "px"
48845
+ },
48846
+ "offsetY": {
48847
+ "value": 48,
48848
+ "unit": "px"
48849
+ },
48850
+ "blur": {
48851
+ "value": 96,
48852
+ "unit": "px"
48853
+ },
48854
+ "spread": {
48855
+ "value": -24,
48856
+ "unit": "px"
48857
+ }
47690
48858
  }
47691
48859
  ],
47692
48860
  "$type": "shadow",
48861
+ "$description": "Medium floating shadow for popovers and action menus",
47693
48862
  "$extensions": {
47694
48863
  "org.primer.figma": {
47695
48864
  "collection": "mode",
@@ -47701,48 +48870,433 @@
47701
48870
  {
47702
48871
  "color": "{overlay.borderColor}",
47703
48872
  "alpha": 1,
47704
- "offsetX": "0px",
47705
- "offsetY": "0px",
47706
- "blur": "0px",
47707
- "spread": "1px"
48873
+ "offsetX": {
48874
+ "value": 0,
48875
+ "unit": "px"
48876
+ },
48877
+ "offsetY": {
48878
+ "value": 0,
48879
+ "unit": "px"
48880
+ },
48881
+ "blur": {
48882
+ "value": 0,
48883
+ "unit": "px"
48884
+ },
48885
+ "spread": {
48886
+ "value": 1,
48887
+ "unit": "px"
48888
+ }
47708
48889
  },
47709
48890
  {
47710
48891
  "color": "{base.color.neutral.0}",
47711
48892
  "alpha": 0.4,
47712
- "offsetX": "0px",
47713
- "offsetY": "8px",
47714
- "blur": "16px",
47715
- "spread": "-4px"
48893
+ "offsetX": {
48894
+ "value": 0,
48895
+ "unit": "px"
48896
+ },
48897
+ "offsetY": {
48898
+ "value": 8,
48899
+ "unit": "px"
48900
+ },
48901
+ "blur": {
48902
+ "value": 16,
48903
+ "unit": "px"
48904
+ },
48905
+ "spread": {
48906
+ "value": -4,
48907
+ "unit": "px"
48908
+ }
47716
48909
  },
47717
48910
  {
47718
48911
  "color": "{base.color.neutral.0}",
47719
48912
  "alpha": 0.4,
47720
- "offsetX": "0px",
47721
- "offsetY": "4px",
47722
- "blur": "32px",
47723
- "spread": "-4px"
48913
+ "offsetX": {
48914
+ "value": 0,
48915
+ "unit": "px"
48916
+ },
48917
+ "offsetY": {
48918
+ "value": 4,
48919
+ "unit": "px"
48920
+ },
48921
+ "blur": {
48922
+ "value": 32,
48923
+ "unit": "px"
48924
+ },
48925
+ "spread": {
48926
+ "value": -4,
48927
+ "unit": "px"
48928
+ }
47724
48929
  },
47725
48930
  {
47726
48931
  "color": "{base.color.neutral.0}",
47727
48932
  "alpha": 0.4,
47728
- "offsetX": "0px",
47729
- "offsetY": "24px",
47730
- "blur": "48px",
47731
- "spread": "-12px"
48933
+ "offsetX": {
48934
+ "value": 0,
48935
+ "unit": "px"
48936
+ },
48937
+ "offsetY": {
48938
+ "value": 24,
48939
+ "unit": "px"
48940
+ },
48941
+ "blur": {
48942
+ "value": 48,
48943
+ "unit": "px"
48944
+ },
48945
+ "spread": {
48946
+ "value": -12,
48947
+ "unit": "px"
48948
+ }
47732
48949
  },
47733
48950
  {
47734
48951
  "color": "{base.color.neutral.0}",
47735
48952
  "alpha": 0.4,
47736
- "offsetX": "0px",
47737
- "offsetY": "48px",
47738
- "blur": "96px",
47739
- "spread": "-24px"
48953
+ "offsetX": {
48954
+ "value": 0,
48955
+ "unit": "px"
48956
+ },
48957
+ "offsetY": {
48958
+ "value": 48,
48959
+ "unit": "px"
48960
+ },
48961
+ "blur": {
48962
+ "value": 96,
48963
+ "unit": "px"
48964
+ },
48965
+ "spread": {
48966
+ "value": -24,
48967
+ "unit": "px"
48968
+ }
48969
+ }
48970
+ ],
48971
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
48972
+ "isSource": true,
48973
+ "$type": "shadow"
48974
+ },
48975
+ "light-high-contrast": {
48976
+ "$value": [
48977
+ {
48978
+ "color": "{overlay.borderColor}",
48979
+ "alpha": 1,
48980
+ "offsetX": {
48981
+ "value": 0,
48982
+ "unit": "px"
48983
+ },
48984
+ "offsetY": {
48985
+ "value": 0,
48986
+ "unit": "px"
48987
+ },
48988
+ "blur": {
48989
+ "value": 0,
48990
+ "unit": "px"
48991
+ },
48992
+ "spread": {
48993
+ "value": 1,
48994
+ "unit": "px"
48995
+ }
48996
+ },
48997
+ {
48998
+ "color": "{base.color.neutral.12}",
48999
+ "alpha": 0.08,
49000
+ "offsetX": {
49001
+ "value": 0,
49002
+ "unit": "px"
49003
+ },
49004
+ "offsetY": {
49005
+ "value": 8,
49006
+ "unit": "px"
49007
+ },
49008
+ "blur": {
49009
+ "value": 16,
49010
+ "unit": "px"
49011
+ },
49012
+ "spread": {
49013
+ "value": -4,
49014
+ "unit": "px"
49015
+ }
49016
+ },
49017
+ {
49018
+ "color": "{base.color.neutral.12}",
49019
+ "alpha": 0.08,
49020
+ "offsetX": {
49021
+ "value": 0,
49022
+ "unit": "px"
49023
+ },
49024
+ "offsetY": {
49025
+ "value": 4,
49026
+ "unit": "px"
49027
+ },
49028
+ "blur": {
49029
+ "value": 32,
49030
+ "unit": "px"
49031
+ },
49032
+ "spread": {
49033
+ "value": -4,
49034
+ "unit": "px"
49035
+ }
49036
+ },
49037
+ {
49038
+ "color": "{base.color.neutral.12}",
49039
+ "alpha": 0.08,
49040
+ "offsetX": {
49041
+ "value": 0,
49042
+ "unit": "px"
49043
+ },
49044
+ "offsetY": {
49045
+ "value": 24,
49046
+ "unit": "px"
49047
+ },
49048
+ "blur": {
49049
+ "value": 48,
49050
+ "unit": "px"
49051
+ },
49052
+ "spread": {
49053
+ "value": -12,
49054
+ "unit": "px"
49055
+ }
49056
+ },
49057
+ {
49058
+ "color": "{base.color.neutral.12}",
49059
+ "alpha": 0.08,
49060
+ "offsetX": {
49061
+ "value": 0,
49062
+ "unit": "px"
49063
+ },
49064
+ "offsetY": {
49065
+ "value": 48,
49066
+ "unit": "px"
49067
+ },
49068
+ "blur": {
49069
+ "value": 96,
49070
+ "unit": "px"
49071
+ },
49072
+ "spread": {
49073
+ "value": -24,
49074
+ "unit": "px"
49075
+ }
49076
+ }
49077
+ ],
49078
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49079
+ "isSource": true,
49080
+ "$type": "shadow"
49081
+ },
49082
+ "light-protanopia-deuteranopia-high-contrast": {
49083
+ "$value": [
49084
+ {
49085
+ "color": "{overlay.borderColor}",
49086
+ "alpha": 1,
49087
+ "offsetX": {
49088
+ "value": 0,
49089
+ "unit": "px"
49090
+ },
49091
+ "offsetY": {
49092
+ "value": 0,
49093
+ "unit": "px"
49094
+ },
49095
+ "blur": {
49096
+ "value": 0,
49097
+ "unit": "px"
49098
+ },
49099
+ "spread": {
49100
+ "value": 1,
49101
+ "unit": "px"
49102
+ }
49103
+ },
49104
+ {
49105
+ "color": "{base.color.neutral.12}",
49106
+ "alpha": 0.08,
49107
+ "offsetX": {
49108
+ "value": 0,
49109
+ "unit": "px"
49110
+ },
49111
+ "offsetY": {
49112
+ "value": 8,
49113
+ "unit": "px"
49114
+ },
49115
+ "blur": {
49116
+ "value": 16,
49117
+ "unit": "px"
49118
+ },
49119
+ "spread": {
49120
+ "value": -4,
49121
+ "unit": "px"
49122
+ }
49123
+ },
49124
+ {
49125
+ "color": "{base.color.neutral.12}",
49126
+ "alpha": 0.08,
49127
+ "offsetX": {
49128
+ "value": 0,
49129
+ "unit": "px"
49130
+ },
49131
+ "offsetY": {
49132
+ "value": 4,
49133
+ "unit": "px"
49134
+ },
49135
+ "blur": {
49136
+ "value": 32,
49137
+ "unit": "px"
49138
+ },
49139
+ "spread": {
49140
+ "value": -4,
49141
+ "unit": "px"
49142
+ }
49143
+ },
49144
+ {
49145
+ "color": "{base.color.neutral.12}",
49146
+ "alpha": 0.08,
49147
+ "offsetX": {
49148
+ "value": 0,
49149
+ "unit": "px"
49150
+ },
49151
+ "offsetY": {
49152
+ "value": 24,
49153
+ "unit": "px"
49154
+ },
49155
+ "blur": {
49156
+ "value": 48,
49157
+ "unit": "px"
49158
+ },
49159
+ "spread": {
49160
+ "value": -12,
49161
+ "unit": "px"
49162
+ }
49163
+ },
49164
+ {
49165
+ "color": "{base.color.neutral.12}",
49166
+ "alpha": 0.08,
49167
+ "offsetX": {
49168
+ "value": 0,
49169
+ "unit": "px"
49170
+ },
49171
+ "offsetY": {
49172
+ "value": 48,
49173
+ "unit": "px"
49174
+ },
49175
+ "blur": {
49176
+ "value": 96,
49177
+ "unit": "px"
49178
+ },
49179
+ "spread": {
49180
+ "value": -24,
49181
+ "unit": "px"
49182
+ }
49183
+ }
49184
+ ],
49185
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49186
+ "isSource": true,
49187
+ "$type": "shadow"
49188
+ },
49189
+ "light-tritanopia-high-contrast": {
49190
+ "$value": [
49191
+ {
49192
+ "color": "{overlay.borderColor}",
49193
+ "alpha": 1,
49194
+ "offsetX": {
49195
+ "value": 0,
49196
+ "unit": "px"
49197
+ },
49198
+ "offsetY": {
49199
+ "value": 0,
49200
+ "unit": "px"
49201
+ },
49202
+ "blur": {
49203
+ "value": 0,
49204
+ "unit": "px"
49205
+ },
49206
+ "spread": {
49207
+ "value": 1,
49208
+ "unit": "px"
49209
+ }
49210
+ },
49211
+ {
49212
+ "color": "{base.color.neutral.12}",
49213
+ "alpha": 0.08,
49214
+ "offsetX": {
49215
+ "value": 0,
49216
+ "unit": "px"
49217
+ },
49218
+ "offsetY": {
49219
+ "value": 8,
49220
+ "unit": "px"
49221
+ },
49222
+ "blur": {
49223
+ "value": 16,
49224
+ "unit": "px"
49225
+ },
49226
+ "spread": {
49227
+ "value": -4,
49228
+ "unit": "px"
49229
+ }
49230
+ },
49231
+ {
49232
+ "color": "{base.color.neutral.12}",
49233
+ "alpha": 0.08,
49234
+ "offsetX": {
49235
+ "value": 0,
49236
+ "unit": "px"
49237
+ },
49238
+ "offsetY": {
49239
+ "value": 4,
49240
+ "unit": "px"
49241
+ },
49242
+ "blur": {
49243
+ "value": 32,
49244
+ "unit": "px"
49245
+ },
49246
+ "spread": {
49247
+ "value": -4,
49248
+ "unit": "px"
49249
+ }
49250
+ },
49251
+ {
49252
+ "color": "{base.color.neutral.12}",
49253
+ "alpha": 0.08,
49254
+ "offsetX": {
49255
+ "value": 0,
49256
+ "unit": "px"
49257
+ },
49258
+ "offsetY": {
49259
+ "value": 24,
49260
+ "unit": "px"
49261
+ },
49262
+ "blur": {
49263
+ "value": 48,
49264
+ "unit": "px"
49265
+ },
49266
+ "spread": {
49267
+ "value": -12,
49268
+ "unit": "px"
49269
+ }
49270
+ },
49271
+ {
49272
+ "color": "{base.color.neutral.12}",
49273
+ "alpha": 0.08,
49274
+ "offsetX": {
49275
+ "value": 0,
49276
+ "unit": "px"
49277
+ },
49278
+ "offsetY": {
49279
+ "value": 48,
49280
+ "unit": "px"
49281
+ },
49282
+ "blur": {
49283
+ "value": 96,
49284
+ "unit": "px"
49285
+ },
49286
+ "spread": {
49287
+ "value": -24,
49288
+ "unit": "px"
49289
+ }
47740
49290
  }
47741
49291
  ],
47742
49292
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47743
49293
  "isSource": true,
47744
49294
  "$type": "shadow"
47745
49295
  }
49296
+ },
49297
+ "org.primer.llm": {
49298
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
49299
+ "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."
47746
49300
  }
47747
49301
  },
47748
49302
  "key": "{shadow.floating.medium}"
@@ -47750,8 +49304,9 @@
47750
49304
  "name": "shadow-floating-medium",
47751
49305
  "attributes": {},
47752
49306
  "path": ["shadow", "floating", "medium"],
47753
- "value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
47754
- "type": "shadow"
49307
+ "value": "0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
49308
+ "type": "shadow",
49309
+ "description": "Medium floating shadow for popovers and action menus"
47755
49310
  },
47756
49311
  "shadow-floating-small": {
47757
49312
  "key": "{shadow.floating.small}",
@@ -47766,26 +49321,62 @@
47766
49321
  {
47767
49322
  "color": "#454c54",
47768
49323
  "alpha": 1,
47769
- "offsetX": "0px",
47770
- "offsetY": "0px",
47771
- "blur": "0px",
47772
- "spread": "1px"
49324
+ "offsetX": {
49325
+ "value": 0,
49326
+ "unit": "px"
49327
+ },
49328
+ "offsetY": {
49329
+ "value": 0,
49330
+ "unit": "px"
49331
+ },
49332
+ "blur": {
49333
+ "value": 0,
49334
+ "unit": "px"
49335
+ },
49336
+ "spread": {
49337
+ "value": 1,
49338
+ "unit": "px"
49339
+ }
47773
49340
  },
47774
49341
  {
47775
49342
  "color": "#ffffff",
47776
49343
  "alpha": 0.4,
47777
- "offsetX": "0px",
47778
- "offsetY": "6px",
47779
- "blur": "12px",
47780
- "spread": "-3px"
49344
+ "offsetX": {
49345
+ "value": 0,
49346
+ "unit": "px"
49347
+ },
49348
+ "offsetY": {
49349
+ "value": 6,
49350
+ "unit": "px"
49351
+ },
49352
+ "blur": {
49353
+ "value": 12,
49354
+ "unit": "px"
49355
+ },
49356
+ "spread": {
49357
+ "value": -3,
49358
+ "unit": "px"
49359
+ }
47781
49360
  },
47782
49361
  {
47783
49362
  "color": "#ffffff",
47784
49363
  "alpha": 0.4,
47785
- "offsetX": "0px",
47786
- "offsetY": "6px",
47787
- "blur": "18px",
47788
- "spread": "0px"
49364
+ "offsetX": {
49365
+ "value": 0,
49366
+ "unit": "px"
49367
+ },
49368
+ "offsetY": {
49369
+ "value": 6,
49370
+ "unit": "px"
49371
+ },
49372
+ "blur": {
49373
+ "value": 18,
49374
+ "unit": "px"
49375
+ },
49376
+ "spread": {
49377
+ "value": 0,
49378
+ "unit": "px"
49379
+ }
47789
49380
  }
47790
49381
  ],
47791
49382
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47805,26 +49396,62 @@
47805
49396
  {
47806
49397
  "color": "{overlay.borderColor}",
47807
49398
  "alpha": 0.5,
47808
- "offsetX": "0px",
47809
- "offsetY": "0px",
47810
- "blur": "0px",
47811
- "spread": "1px"
49399
+ "offsetX": {
49400
+ "value": 0,
49401
+ "unit": "px"
49402
+ },
49403
+ "offsetY": {
49404
+ "value": 0,
49405
+ "unit": "px"
49406
+ },
49407
+ "blur": {
49408
+ "value": 0,
49409
+ "unit": "px"
49410
+ },
49411
+ "spread": {
49412
+ "value": 1,
49413
+ "unit": "px"
49414
+ }
47812
49415
  },
47813
49416
  {
47814
49417
  "color": "{base.color.neutral.12}",
47815
49418
  "alpha": 0.04,
47816
- "offsetX": "0px",
47817
- "offsetY": "6px",
47818
- "blur": "12px",
47819
- "spread": "-3px"
49419
+ "offsetX": {
49420
+ "value": 0,
49421
+ "unit": "px"
49422
+ },
49423
+ "offsetY": {
49424
+ "value": 6,
49425
+ "unit": "px"
49426
+ },
49427
+ "blur": {
49428
+ "value": 12,
49429
+ "unit": "px"
49430
+ },
49431
+ "spread": {
49432
+ "value": -3,
49433
+ "unit": "px"
49434
+ }
47820
49435
  },
47821
49436
  {
47822
49437
  "color": "{base.color.neutral.12}",
47823
49438
  "alpha": 0.12,
47824
- "offsetX": "0px",
47825
- "offsetY": "6px",
47826
- "blur": "18px",
47827
- "spread": "0px"
49439
+ "offsetX": {
49440
+ "value": 0,
49441
+ "unit": "px"
49442
+ },
49443
+ "offsetY": {
49444
+ "value": 6,
49445
+ "unit": "px"
49446
+ },
49447
+ "blur": {
49448
+ "value": 18,
49449
+ "unit": "px"
49450
+ },
49451
+ "spread": {
49452
+ "value": 0,
49453
+ "unit": "px"
49454
+ }
47828
49455
  }
47829
49456
  ],
47830
49457
  "$type": "shadow",
@@ -47840,26 +49467,62 @@
47840
49467
  {
47841
49468
  "color": "{overlay.borderColor}",
47842
49469
  "alpha": 1,
47843
- "offsetX": "0px",
47844
- "offsetY": "0px",
47845
- "blur": "0px",
47846
- "spread": "1px"
49470
+ "offsetX": {
49471
+ "value": 0,
49472
+ "unit": "px"
49473
+ },
49474
+ "offsetY": {
49475
+ "value": 0,
49476
+ "unit": "px"
49477
+ },
49478
+ "blur": {
49479
+ "value": 0,
49480
+ "unit": "px"
49481
+ },
49482
+ "spread": {
49483
+ "value": 1,
49484
+ "unit": "px"
49485
+ }
47847
49486
  },
47848
49487
  {
47849
49488
  "color": "{base.color.neutral.0}",
47850
49489
  "alpha": 0.4,
47851
- "offsetX": "0px",
47852
- "offsetY": "6px",
47853
- "blur": "12px",
47854
- "spread": "-3px"
49490
+ "offsetX": {
49491
+ "value": 0,
49492
+ "unit": "px"
49493
+ },
49494
+ "offsetY": {
49495
+ "value": 6,
49496
+ "unit": "px"
49497
+ },
49498
+ "blur": {
49499
+ "value": 12,
49500
+ "unit": "px"
49501
+ },
49502
+ "spread": {
49503
+ "value": -3,
49504
+ "unit": "px"
49505
+ }
47855
49506
  },
47856
49507
  {
47857
49508
  "color": "{base.color.neutral.0}",
47858
49509
  "alpha": 0.4,
47859
- "offsetX": "0px",
47860
- "offsetY": "6px",
47861
- "blur": "18px",
47862
- "spread": "0px"
49510
+ "offsetX": {
49511
+ "value": 0,
49512
+ "unit": "px"
49513
+ },
49514
+ "offsetY": {
49515
+ "value": 6,
49516
+ "unit": "px"
49517
+ },
49518
+ "blur": {
49519
+ "value": 18,
49520
+ "unit": "px"
49521
+ },
49522
+ "spread": {
49523
+ "value": 0,
49524
+ "unit": "px"
49525
+ }
47863
49526
  }
47864
49527
  ],
47865
49528
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47877,7 +49540,7 @@
47877
49540
  "name": "shadow-floating-small",
47878
49541
  "attributes": {},
47879
49542
  "path": ["shadow", "floating", "small"],
47880
- "value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
49543
+ "value": "0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47881
49544
  "type": "shadow",
47882
49545
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47883
49546
  },
@@ -47894,24 +49557,193 @@
47894
49557
  {
47895
49558
  "color": "#454c54",
47896
49559
  "alpha": 1,
47897
- "offsetX": "0px",
47898
- "offsetY": "0px",
47899
- "blur": "0px",
47900
- "spread": "1px"
49560
+ "offsetX": {
49561
+ "value": 0,
49562
+ "unit": "px"
49563
+ },
49564
+ "offsetY": {
49565
+ "value": 0,
49566
+ "unit": "px"
49567
+ },
49568
+ "blur": {
49569
+ "value": 0,
49570
+ "unit": "px"
49571
+ },
49572
+ "spread": {
49573
+ "value": 1,
49574
+ "unit": "px"
49575
+ }
47901
49576
  },
47902
49577
  {
47903
49578
  "color": "#ffffff",
47904
49579
  "alpha": 1,
47905
- "offsetX": "0px",
47906
- "offsetY": "32px",
47907
- "blur": "64px",
47908
- "spread": "0px"
49580
+ "offsetX": {
49581
+ "value": 0,
49582
+ "unit": "px"
49583
+ },
49584
+ "offsetY": {
49585
+ "value": 32,
49586
+ "unit": "px"
49587
+ },
49588
+ "blur": {
49589
+ "value": 64,
49590
+ "unit": "px"
49591
+ },
49592
+ "spread": {
49593
+ "value": 0,
49594
+ "unit": "px"
49595
+ }
49596
+ }
49597
+ ],
49598
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49599
+ "isSource": true,
49600
+ "$type": "shadow"
49601
+ },
49602
+ "light-high-contrast": {
49603
+ "$value": [
49604
+ {
49605
+ "color": "#454c54",
49606
+ "alpha": 1,
49607
+ "offsetX": {
49608
+ "value": 0,
49609
+ "unit": "px"
49610
+ },
49611
+ "offsetY": {
49612
+ "value": 0,
49613
+ "unit": "px"
49614
+ },
49615
+ "blur": {
49616
+ "value": 0,
49617
+ "unit": "px"
49618
+ },
49619
+ "spread": {
49620
+ "value": 1,
49621
+ "unit": "px"
49622
+ }
49623
+ },
49624
+ {
49625
+ "color": "#25292e",
49626
+ "alpha": 0.32,
49627
+ "offsetX": {
49628
+ "value": 0,
49629
+ "unit": "px"
49630
+ },
49631
+ "offsetY": {
49632
+ "value": 56,
49633
+ "unit": "px"
49634
+ },
49635
+ "blur": {
49636
+ "value": 112,
49637
+ "unit": "px"
49638
+ },
49639
+ "spread": {
49640
+ "value": 0,
49641
+ "unit": "px"
49642
+ }
49643
+ }
49644
+ ],
49645
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49646
+ "isSource": true,
49647
+ "$type": "shadow"
49648
+ },
49649
+ "light-protanopia-deuteranopia-high-contrast": {
49650
+ "$value": [
49651
+ {
49652
+ "color": "#454c54",
49653
+ "alpha": 1,
49654
+ "offsetX": {
49655
+ "value": 0,
49656
+ "unit": "px"
49657
+ },
49658
+ "offsetY": {
49659
+ "value": 0,
49660
+ "unit": "px"
49661
+ },
49662
+ "blur": {
49663
+ "value": 0,
49664
+ "unit": "px"
49665
+ },
49666
+ "spread": {
49667
+ "value": 1,
49668
+ "unit": "px"
49669
+ }
49670
+ },
49671
+ {
49672
+ "color": "#25292e",
49673
+ "alpha": 0.32,
49674
+ "offsetX": {
49675
+ "value": 0,
49676
+ "unit": "px"
49677
+ },
49678
+ "offsetY": {
49679
+ "value": 56,
49680
+ "unit": "px"
49681
+ },
49682
+ "blur": {
49683
+ "value": 112,
49684
+ "unit": "px"
49685
+ },
49686
+ "spread": {
49687
+ "value": 0,
49688
+ "unit": "px"
49689
+ }
49690
+ }
49691
+ ],
49692
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49693
+ "isSource": true,
49694
+ "$type": "shadow"
49695
+ },
49696
+ "light-tritanopia-high-contrast": {
49697
+ "$value": [
49698
+ {
49699
+ "color": "#454c54",
49700
+ "alpha": 1,
49701
+ "offsetX": {
49702
+ "value": 0,
49703
+ "unit": "px"
49704
+ },
49705
+ "offsetY": {
49706
+ "value": 0,
49707
+ "unit": "px"
49708
+ },
49709
+ "blur": {
49710
+ "value": 0,
49711
+ "unit": "px"
49712
+ },
49713
+ "spread": {
49714
+ "value": 1,
49715
+ "unit": "px"
49716
+ }
49717
+ },
49718
+ {
49719
+ "color": "#25292e",
49720
+ "alpha": 0.32,
49721
+ "offsetX": {
49722
+ "value": 0,
49723
+ "unit": "px"
49724
+ },
49725
+ "offsetY": {
49726
+ "value": 56,
49727
+ "unit": "px"
49728
+ },
49729
+ "blur": {
49730
+ "value": 112,
49731
+ "unit": "px"
49732
+ },
49733
+ "spread": {
49734
+ "value": 0,
49735
+ "unit": "px"
49736
+ }
47909
49737
  }
47910
49738
  ],
47911
49739
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47912
49740
  "isSource": true,
47913
49741
  "$type": "shadow"
47914
49742
  }
49743
+ },
49744
+ "org.primer.llm": {
49745
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49746
+ "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."
47915
49747
  }
47916
49748
  },
47917
49749
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47920,22 +49752,47 @@
47920
49752
  "$value": [
47921
49753
  {
47922
49754
  "color": "{overlay.borderColor}",
47923
- "alpha": 0,
47924
- "offsetX": "0px",
47925
- "offsetY": "0px",
47926
- "blur": "0px",
47927
- "spread": "1px"
49755
+ "alpha": 1,
49756
+ "offsetX": {
49757
+ "value": 0,
49758
+ "unit": "px"
49759
+ },
49760
+ "offsetY": {
49761
+ "value": 0,
49762
+ "unit": "px"
49763
+ },
49764
+ "blur": {
49765
+ "value": 0,
49766
+ "unit": "px"
49767
+ },
49768
+ "spread": {
49769
+ "value": 1,
49770
+ "unit": "px"
49771
+ }
47928
49772
  },
47929
49773
  {
47930
49774
  "color": "{base.color.neutral.12}",
47931
49775
  "alpha": 0.32,
47932
- "offsetX": "0px",
47933
- "offsetY": "56px",
47934
- "blur": "112px",
47935
- "spread": "0px"
49776
+ "offsetX": {
49777
+ "value": 0,
49778
+ "unit": "px"
49779
+ },
49780
+ "offsetY": {
49781
+ "value": 56,
49782
+ "unit": "px"
49783
+ },
49784
+ "blur": {
49785
+ "value": 112,
49786
+ "unit": "px"
49787
+ },
49788
+ "spread": {
49789
+ "value": 0,
49790
+ "unit": "px"
49791
+ }
47936
49792
  }
47937
49793
  ],
47938
49794
  "$type": "shadow",
49795
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47939
49796
  "$extensions": {
47940
49797
  "org.primer.figma": {
47941
49798
  "collection": "mode",
@@ -47947,24 +49804,193 @@
47947
49804
  {
47948
49805
  "color": "{overlay.borderColor}",
47949
49806
  "alpha": 1,
47950
- "offsetX": "0px",
47951
- "offsetY": "0px",
47952
- "blur": "0px",
47953
- "spread": "1px"
49807
+ "offsetX": {
49808
+ "value": 0,
49809
+ "unit": "px"
49810
+ },
49811
+ "offsetY": {
49812
+ "value": 0,
49813
+ "unit": "px"
49814
+ },
49815
+ "blur": {
49816
+ "value": 0,
49817
+ "unit": "px"
49818
+ },
49819
+ "spread": {
49820
+ "value": 1,
49821
+ "unit": "px"
49822
+ }
47954
49823
  },
47955
49824
  {
47956
49825
  "color": "{base.color.neutral.0}",
47957
49826
  "alpha": 1,
47958
- "offsetX": "0px",
47959
- "offsetY": "32px",
47960
- "blur": "64px",
47961
- "spread": "0px"
49827
+ "offsetX": {
49828
+ "value": 0,
49829
+ "unit": "px"
49830
+ },
49831
+ "offsetY": {
49832
+ "value": 32,
49833
+ "unit": "px"
49834
+ },
49835
+ "blur": {
49836
+ "value": 64,
49837
+ "unit": "px"
49838
+ },
49839
+ "spread": {
49840
+ "value": 0,
49841
+ "unit": "px"
49842
+ }
49843
+ }
49844
+ ],
49845
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49846
+ "isSource": true,
49847
+ "$type": "shadow"
49848
+ },
49849
+ "light-high-contrast": {
49850
+ "$value": [
49851
+ {
49852
+ "color": "{overlay.borderColor}",
49853
+ "alpha": 1,
49854
+ "offsetX": {
49855
+ "value": 0,
49856
+ "unit": "px"
49857
+ },
49858
+ "offsetY": {
49859
+ "value": 0,
49860
+ "unit": "px"
49861
+ },
49862
+ "blur": {
49863
+ "value": 0,
49864
+ "unit": "px"
49865
+ },
49866
+ "spread": {
49867
+ "value": 1,
49868
+ "unit": "px"
49869
+ }
49870
+ },
49871
+ {
49872
+ "color": "{base.color.neutral.12}",
49873
+ "alpha": 0.32,
49874
+ "offsetX": {
49875
+ "value": 0,
49876
+ "unit": "px"
49877
+ },
49878
+ "offsetY": {
49879
+ "value": 56,
49880
+ "unit": "px"
49881
+ },
49882
+ "blur": {
49883
+ "value": 112,
49884
+ "unit": "px"
49885
+ },
49886
+ "spread": {
49887
+ "value": 0,
49888
+ "unit": "px"
49889
+ }
49890
+ }
49891
+ ],
49892
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49893
+ "isSource": true,
49894
+ "$type": "shadow"
49895
+ },
49896
+ "light-protanopia-deuteranopia-high-contrast": {
49897
+ "$value": [
49898
+ {
49899
+ "color": "{overlay.borderColor}",
49900
+ "alpha": 1,
49901
+ "offsetX": {
49902
+ "value": 0,
49903
+ "unit": "px"
49904
+ },
49905
+ "offsetY": {
49906
+ "value": 0,
49907
+ "unit": "px"
49908
+ },
49909
+ "blur": {
49910
+ "value": 0,
49911
+ "unit": "px"
49912
+ },
49913
+ "spread": {
49914
+ "value": 1,
49915
+ "unit": "px"
49916
+ }
49917
+ },
49918
+ {
49919
+ "color": "{base.color.neutral.12}",
49920
+ "alpha": 0.32,
49921
+ "offsetX": {
49922
+ "value": 0,
49923
+ "unit": "px"
49924
+ },
49925
+ "offsetY": {
49926
+ "value": 56,
49927
+ "unit": "px"
49928
+ },
49929
+ "blur": {
49930
+ "value": 112,
49931
+ "unit": "px"
49932
+ },
49933
+ "spread": {
49934
+ "value": 0,
49935
+ "unit": "px"
49936
+ }
49937
+ }
49938
+ ],
49939
+ "filePath": "src/tokens/functional/shadow/shadow.json5",
49940
+ "isSource": true,
49941
+ "$type": "shadow"
49942
+ },
49943
+ "light-tritanopia-high-contrast": {
49944
+ "$value": [
49945
+ {
49946
+ "color": "{overlay.borderColor}",
49947
+ "alpha": 1,
49948
+ "offsetX": {
49949
+ "value": 0,
49950
+ "unit": "px"
49951
+ },
49952
+ "offsetY": {
49953
+ "value": 0,
49954
+ "unit": "px"
49955
+ },
49956
+ "blur": {
49957
+ "value": 0,
49958
+ "unit": "px"
49959
+ },
49960
+ "spread": {
49961
+ "value": 1,
49962
+ "unit": "px"
49963
+ }
49964
+ },
49965
+ {
49966
+ "color": "{base.color.neutral.12}",
49967
+ "alpha": 0.32,
49968
+ "offsetX": {
49969
+ "value": 0,
49970
+ "unit": "px"
49971
+ },
49972
+ "offsetY": {
49973
+ "value": 56,
49974
+ "unit": "px"
49975
+ },
49976
+ "blur": {
49977
+ "value": 112,
49978
+ "unit": "px"
49979
+ },
49980
+ "spread": {
49981
+ "value": 0,
49982
+ "unit": "px"
49983
+ }
47962
49984
  }
47963
49985
  ],
47964
49986
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47965
49987
  "isSource": true,
47966
49988
  "$type": "shadow"
47967
49989
  }
49990
+ },
49991
+ "org.primer.llm": {
49992
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
49993
+ "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."
47968
49994
  }
47969
49995
  },
47970
49996
  "key": "{shadow.floating.xlarge}"
@@ -47972,8 +49998,9 @@
47972
49998
  "name": "shadow-floating-xlarge",
47973
49999
  "attributes": {},
47974
50000
  "path": ["shadow", "floating", "xlarge"],
47975
- "value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
47976
- "type": "shadow"
50001
+ "value": "0 0 0 1px #454c54, 0 56px 112px 0 #25292e52",
50002
+ "type": "shadow",
50003
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47977
50004
  },
47978
50005
  "shadow-inset": {
47979
50006
  "key": "{shadow.inset}",
@@ -47987,16 +50014,32 @@
47987
50014
  "$value": {
47988
50015
  "color": "#ffffff",
47989
50016
  "alpha": 0.24,
47990
- "offsetX": "0px",
47991
- "offsetY": "1px",
47992
- "blur": "0px",
47993
- "spread": "0px",
50017
+ "offsetX": {
50018
+ "value": 0,
50019
+ "unit": "px"
50020
+ },
50021
+ "offsetY": {
50022
+ "value": 1,
50023
+ "unit": "px"
50024
+ },
50025
+ "blur": {
50026
+ "value": 0,
50027
+ "unit": "px"
50028
+ },
50029
+ "spread": {
50030
+ "value": 0,
50031
+ "unit": "px"
50032
+ },
47994
50033
  "inset": true
47995
50034
  },
47996
50035
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47997
50036
  "isSource": true,
47998
50037
  "$type": "shadow"
47999
50038
  }
50039
+ },
50040
+ "org.primer.llm": {
50041
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50042
+ "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."
48000
50043
  }
48001
50044
  },
48002
50045
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48005,13 +50048,26 @@
48005
50048
  "$value": {
48006
50049
  "color": "{base.color.neutral.13}",
48007
50050
  "alpha": 0.04,
48008
- "offsetX": "0px",
48009
- "offsetY": "1px",
48010
- "blur": "0px",
48011
- "spread": "0px",
50051
+ "offsetX": {
50052
+ "value": 0,
50053
+ "unit": "px"
50054
+ },
50055
+ "offsetY": {
50056
+ "value": 1,
50057
+ "unit": "px"
50058
+ },
50059
+ "blur": {
50060
+ "value": 0,
50061
+ "unit": "px"
50062
+ },
50063
+ "spread": {
50064
+ "value": 0,
50065
+ "unit": "px"
50066
+ },
48012
50067
  "inset": true
48013
50068
  },
48014
50069
  "$type": "shadow",
50070
+ "$description": "Inset shadow for recessed elements",
48015
50071
  "$extensions": {
48016
50072
  "org.primer.figma": {
48017
50073
  "collection": "mode",
@@ -48022,16 +50078,32 @@
48022
50078
  "$value": {
48023
50079
  "color": "{base.color.neutral.0}",
48024
50080
  "alpha": 0.24,
48025
- "offsetX": "0px",
48026
- "offsetY": "1px",
48027
- "blur": "0px",
48028
- "spread": "0px",
50081
+ "offsetX": {
50082
+ "value": 0,
50083
+ "unit": "px"
50084
+ },
50085
+ "offsetY": {
50086
+ "value": 1,
50087
+ "unit": "px"
50088
+ },
50089
+ "blur": {
50090
+ "value": 0,
50091
+ "unit": "px"
50092
+ },
50093
+ "spread": {
50094
+ "value": 0,
50095
+ "unit": "px"
50096
+ },
48029
50097
  "inset": true
48030
50098
  },
48031
50099
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48032
50100
  "isSource": true,
48033
50101
  "$type": "shadow"
48034
50102
  }
50103
+ },
50104
+ "org.primer.llm": {
50105
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
50106
+ "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."
48035
50107
  }
48036
50108
  },
48037
50109
  "key": "{shadow.inset}"
@@ -48039,8 +50111,9 @@
48039
50111
  "name": "shadow-inset",
48040
50112
  "attributes": {},
48041
50113
  "path": ["shadow", "inset"],
48042
- "value": "inset 0px 1px 0px 0px #0104090a",
48043
- "type": "shadow"
50114
+ "value": "inset 0 1px 0 0 #0104090a",
50115
+ "type": "shadow",
50116
+ "description": "Inset shadow for recessed elements"
48044
50117
  },
48045
50118
  "shadow-resting-medium": {
48046
50119
  "key": "{shadow.resting.medium}",
@@ -48055,24 +50128,52 @@
48055
50128
  {
48056
50129
  "color": "#ffffff",
48057
50130
  "alpha": 0.4,
48058
- "offsetX": "0px",
48059
- "offsetY": "1px",
48060
- "blur": "1px",
48061
- "spread": "0px"
50131
+ "offsetX": {
50132
+ "value": 0,
50133
+ "unit": "px"
50134
+ },
50135
+ "offsetY": {
50136
+ "value": 1,
50137
+ "unit": "px"
50138
+ },
50139
+ "blur": {
50140
+ "value": 1,
50141
+ "unit": "px"
50142
+ },
50143
+ "spread": {
50144
+ "value": 0,
50145
+ "unit": "px"
50146
+ }
48062
50147
  },
48063
50148
  {
48064
50149
  "color": "#ffffff",
48065
50150
  "alpha": 0.8,
48066
- "offsetX": "0px",
48067
- "offsetY": "3px",
48068
- "blur": "6px",
48069
- "spread": "0px"
50151
+ "offsetX": {
50152
+ "value": 0,
50153
+ "unit": "px"
50154
+ },
50155
+ "offsetY": {
50156
+ "value": 3,
50157
+ "unit": "px"
50158
+ },
50159
+ "blur": {
50160
+ "value": 6,
50161
+ "unit": "px"
50162
+ },
50163
+ "spread": {
50164
+ "value": 0,
50165
+ "unit": "px"
50166
+ }
48070
50167
  }
48071
50168
  ],
48072
50169
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48073
50170
  "isSource": true,
48074
50171
  "$type": "shadow"
48075
50172
  }
50173
+ },
50174
+ "org.primer.llm": {
50175
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50176
+ "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."
48076
50177
  }
48077
50178
  },
48078
50179
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48082,21 +50183,46 @@
48082
50183
  {
48083
50184
  "color": "{base.color.neutral.12}",
48084
50185
  "alpha": 0.1,
48085
- "offsetX": "0px",
48086
- "offsetY": "1px",
48087
- "blur": "1px",
48088
- "spread": "0px"
50186
+ "offsetX": {
50187
+ "value": 0,
50188
+ "unit": "px"
50189
+ },
50190
+ "offsetY": {
50191
+ "value": 1,
50192
+ "unit": "px"
50193
+ },
50194
+ "blur": {
50195
+ "value": 1,
50196
+ "unit": "px"
50197
+ },
50198
+ "spread": {
50199
+ "value": 0,
50200
+ "unit": "px"
50201
+ }
48089
50202
  },
48090
50203
  {
48091
50204
  "color": "{base.color.neutral.12}",
48092
50205
  "alpha": 0.12,
48093
- "offsetX": "0px",
48094
- "offsetY": "3px",
48095
- "blur": "6px",
48096
- "spread": "0px"
50206
+ "offsetX": {
50207
+ "value": 0,
50208
+ "unit": "px"
50209
+ },
50210
+ "offsetY": {
50211
+ "value": 3,
50212
+ "unit": "px"
50213
+ },
50214
+ "blur": {
50215
+ "value": 6,
50216
+ "unit": "px"
50217
+ },
50218
+ "spread": {
50219
+ "value": 0,
50220
+ "unit": "px"
50221
+ }
48097
50222
  }
48098
50223
  ],
48099
50224
  "$type": "shadow",
50225
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48100
50226
  "$extensions": {
48101
50227
  "org.primer.figma": {
48102
50228
  "collection": "mode",
@@ -48108,24 +50234,52 @@
48108
50234
  {
48109
50235
  "color": "{base.color.neutral.0}",
48110
50236
  "alpha": 0.4,
48111
- "offsetX": "0px",
48112
- "offsetY": "1px",
48113
- "blur": "1px",
48114
- "spread": "0px"
50237
+ "offsetX": {
50238
+ "value": 0,
50239
+ "unit": "px"
50240
+ },
50241
+ "offsetY": {
50242
+ "value": 1,
50243
+ "unit": "px"
50244
+ },
50245
+ "blur": {
50246
+ "value": 1,
50247
+ "unit": "px"
50248
+ },
50249
+ "spread": {
50250
+ "value": 0,
50251
+ "unit": "px"
50252
+ }
48115
50253
  },
48116
50254
  {
48117
50255
  "color": "{base.color.neutral.0}",
48118
50256
  "alpha": 0.8,
48119
- "offsetX": "0px",
48120
- "offsetY": "3px",
48121
- "blur": "6px",
48122
- "spread": "0px"
50257
+ "offsetX": {
50258
+ "value": 0,
50259
+ "unit": "px"
50260
+ },
50261
+ "offsetY": {
50262
+ "value": 3,
50263
+ "unit": "px"
50264
+ },
50265
+ "blur": {
50266
+ "value": 6,
50267
+ "unit": "px"
50268
+ },
50269
+ "spread": {
50270
+ "value": 0,
50271
+ "unit": "px"
50272
+ }
48123
50273
  }
48124
50274
  ],
48125
50275
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48126
50276
  "isSource": true,
48127
50277
  "$type": "shadow"
48128
50278
  }
50279
+ },
50280
+ "org.primer.llm": {
50281
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
50282
+ "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."
48129
50283
  }
48130
50284
  },
48131
50285
  "key": "{shadow.resting.medium}"
@@ -48133,8 +50287,9 @@
48133
50287
  "name": "shadow-resting-medium",
48134
50288
  "attributes": {},
48135
50289
  "path": ["shadow", "resting", "medium"],
48136
- "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
48137
- "type": "shadow"
50290
+ "value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
50291
+ "type": "shadow",
50292
+ "description": "Medium resting shadow for cards and elevated surfaces"
48138
50293
  },
48139
50294
  "shadow-resting-small": {
48140
50295
  "key": "{shadow.resting.small}",
@@ -48149,19 +50304,43 @@
48149
50304
  {
48150
50305
  "color": "#ffffff",
48151
50306
  "alpha": 0.6,
48152
- "offsetX": "0px",
48153
- "offsetY": "1px",
48154
- "blur": "1px",
48155
- "spread": "0px",
50307
+ "offsetX": {
50308
+ "value": 0,
50309
+ "unit": "px"
50310
+ },
50311
+ "offsetY": {
50312
+ "value": 1,
50313
+ "unit": "px"
50314
+ },
50315
+ "blur": {
50316
+ "value": 1,
50317
+ "unit": "px"
50318
+ },
50319
+ "spread": {
50320
+ "value": 0,
50321
+ "unit": "px"
50322
+ },
48156
50323
  "inset": false
48157
50324
  },
48158
50325
  {
48159
50326
  "color": "#ffffff",
48160
50327
  "alpha": 0.6,
48161
- "offsetX": "0px",
48162
- "offsetY": "1px",
48163
- "blur": "3px",
48164
- "spread": "0px",
50328
+ "offsetX": {
50329
+ "value": 0,
50330
+ "unit": "px"
50331
+ },
50332
+ "offsetY": {
50333
+ "value": 1,
50334
+ "unit": "px"
50335
+ },
50336
+ "blur": {
50337
+ "value": 3,
50338
+ "unit": "px"
50339
+ },
50340
+ "spread": {
50341
+ "value": 0,
50342
+ "unit": "px"
50343
+ },
48165
50344
  "inset": false
48166
50345
  }
48167
50346
  ],
@@ -48169,6 +50348,10 @@
48169
50348
  "isSource": true,
48170
50349
  "$type": "shadow"
48171
50350
  }
50351
+ },
50352
+ "org.primer.llm": {
50353
+ "usage": ["button", "interactive-card", "clickable-element"],
50354
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48172
50355
  }
48173
50356
  },
48174
50357
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48177,24 +50360,49 @@
48177
50360
  "$value": [
48178
50361
  {
48179
50362
  "color": "{base.color.neutral.13}",
48180
- "alpha": 0.06,
48181
- "offsetX": "0px",
48182
- "offsetY": "1px",
48183
- "blur": "1px",
48184
- "spread": "0px",
50363
+ "alpha": 0.04,
50364
+ "offsetX": {
50365
+ "value": 0,
50366
+ "unit": "px"
50367
+ },
50368
+ "offsetY": {
50369
+ "value": 1,
50370
+ "unit": "px"
50371
+ },
50372
+ "blur": {
50373
+ "value": 1,
50374
+ "unit": "px"
50375
+ },
50376
+ "spread": {
50377
+ "value": 0,
50378
+ "unit": "px"
50379
+ },
48185
50380
  "inset": false
48186
50381
  },
48187
50382
  {
48188
50383
  "color": "{base.color.neutral.13}",
48189
- "alpha": 0.06,
48190
- "offsetX": "0px",
48191
- "offsetY": "1px",
48192
- "blur": "3px",
48193
- "spread": "0px",
50384
+ "alpha": 0.03,
50385
+ "offsetX": {
50386
+ "value": 0,
50387
+ "unit": "px"
50388
+ },
50389
+ "offsetY": {
50390
+ "value": 1,
50391
+ "unit": "px"
50392
+ },
50393
+ "blur": {
50394
+ "value": 2,
50395
+ "unit": "px"
50396
+ },
50397
+ "spread": {
50398
+ "value": 0,
50399
+ "unit": "px"
50400
+ },
48194
50401
  "inset": false
48195
50402
  }
48196
50403
  ],
48197
50404
  "$type": "shadow",
50405
+ "$description": "Small resting shadow for buttons and interactive elements",
48198
50406
  "$extensions": {
48199
50407
  "org.primer.figma": {
48200
50408
  "collection": "mode",
@@ -48206,19 +50414,43 @@
48206
50414
  {
48207
50415
  "color": "{base.color.neutral.0}",
48208
50416
  "alpha": 0.6,
48209
- "offsetX": "0px",
48210
- "offsetY": "1px",
48211
- "blur": "1px",
48212
- "spread": "0px",
50417
+ "offsetX": {
50418
+ "value": 0,
50419
+ "unit": "px"
50420
+ },
50421
+ "offsetY": {
50422
+ "value": 1,
50423
+ "unit": "px"
50424
+ },
50425
+ "blur": {
50426
+ "value": 1,
50427
+ "unit": "px"
50428
+ },
50429
+ "spread": {
50430
+ "value": 0,
50431
+ "unit": "px"
50432
+ },
48213
50433
  "inset": false
48214
50434
  },
48215
50435
  {
48216
50436
  "color": "{base.color.neutral.0}",
48217
50437
  "alpha": 0.6,
48218
- "offsetX": "0px",
48219
- "offsetY": "1px",
48220
- "blur": "3px",
48221
- "spread": "0px",
50438
+ "offsetX": {
50439
+ "value": 0,
50440
+ "unit": "px"
50441
+ },
50442
+ "offsetY": {
50443
+ "value": 1,
50444
+ "unit": "px"
50445
+ },
50446
+ "blur": {
50447
+ "value": 3,
50448
+ "unit": "px"
50449
+ },
50450
+ "spread": {
50451
+ "value": 0,
50452
+ "unit": "px"
50453
+ },
48222
50454
  "inset": false
48223
50455
  }
48224
50456
  ],
@@ -48226,6 +50458,10 @@
48226
50458
  "isSource": true,
48227
50459
  "$type": "shadow"
48228
50460
  }
50461
+ },
50462
+ "org.primer.llm": {
50463
+ "usage": ["button", "interactive-card", "clickable-element"],
50464
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48229
50465
  }
48230
50466
  },
48231
50467
  "key": "{shadow.resting.small}"
@@ -48233,8 +50469,9 @@
48233
50469
  "name": "shadow-resting-small",
48234
50470
  "attributes": {},
48235
50471
  "path": ["shadow", "resting", "small"],
48236
- "value": "0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f",
48237
- "type": "shadow"
50472
+ "value": "0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908",
50473
+ "type": "shadow",
50474
+ "description": "Small resting shadow for buttons and interactive elements"
48238
50475
  },
48239
50476
  "shadow-resting-xsmall": {
48240
50477
  "key": "{shadow.resting.xsmall}",
@@ -48248,16 +50485,32 @@
48248
50485
  "$value": {
48249
50486
  "color": "#ffffff",
48250
50487
  "alpha": 0.8,
48251
- "offsetX": "0px",
48252
- "offsetY": "1px",
48253
- "blur": "1px",
48254
- "spread": "0px",
50488
+ "offsetX": {
50489
+ "value": 0,
50490
+ "unit": "px"
50491
+ },
50492
+ "offsetY": {
50493
+ "value": 1,
50494
+ "unit": "px"
50495
+ },
50496
+ "blur": {
50497
+ "value": 1,
50498
+ "unit": "px"
50499
+ },
50500
+ "spread": {
50501
+ "value": 0,
50502
+ "unit": "px"
50503
+ },
48255
50504
  "inset": false
48256
50505
  },
48257
50506
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48258
50507
  "isSource": true,
48259
50508
  "$type": "shadow"
48260
50509
  }
50510
+ },
50511
+ "org.primer.llm": {
50512
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50513
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48261
50514
  }
48262
50515
  },
48263
50516
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48265,14 +50518,27 @@
48265
50518
  "original": {
48266
50519
  "$value": {
48267
50520
  "color": "{base.color.neutral.13}",
48268
- "alpha": 0.06,
48269
- "offsetX": "0px",
48270
- "offsetY": "1px",
48271
- "blur": "1px",
48272
- "spread": "0px",
50521
+ "alpha": 0.05,
50522
+ "offsetX": {
50523
+ "value": 0,
50524
+ "unit": "px"
50525
+ },
50526
+ "offsetY": {
50527
+ "value": 1,
50528
+ "unit": "px"
50529
+ },
50530
+ "blur": {
50531
+ "value": 1,
50532
+ "unit": "px"
50533
+ },
50534
+ "spread": {
50535
+ "value": 0,
50536
+ "unit": "px"
50537
+ },
48273
50538
  "inset": false
48274
50539
  },
48275
50540
  "$type": "shadow",
50541
+ "$description": "Extra small resting shadow for minimal elevation",
48276
50542
  "$extensions": {
48277
50543
  "org.primer.figma": {
48278
50544
  "collection": "mode",
@@ -48283,16 +50549,32 @@
48283
50549
  "$value": {
48284
50550
  "color": "{base.color.neutral.0}",
48285
50551
  "alpha": 0.8,
48286
- "offsetX": "0px",
48287
- "offsetY": "1px",
48288
- "blur": "1px",
48289
- "spread": "0px",
50552
+ "offsetX": {
50553
+ "value": 0,
50554
+ "unit": "px"
50555
+ },
50556
+ "offsetY": {
50557
+ "value": 1,
50558
+ "unit": "px"
50559
+ },
50560
+ "blur": {
50561
+ "value": 1,
50562
+ "unit": "px"
50563
+ },
50564
+ "spread": {
50565
+ "value": 0,
50566
+ "unit": "px"
50567
+ },
48290
50568
  "inset": false
48291
50569
  },
48292
50570
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48293
50571
  "isSource": true,
48294
50572
  "$type": "shadow"
48295
50573
  }
50574
+ },
50575
+ "org.primer.llm": {
50576
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
50577
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48296
50578
  }
48297
50579
  },
48298
50580
  "key": "{shadow.resting.xsmall}"
@@ -48300,8 +50582,9 @@
48300
50582
  "name": "shadow-resting-xsmall",
48301
50583
  "attributes": {},
48302
50584
  "path": ["shadow", "resting", "xsmall"],
48303
- "value": "0px 1px 1px 0px #0104090f",
48304
- "type": "shadow"
50585
+ "value": "0 1px 1px 0 #0104090d",
50586
+ "type": "shadow",
50587
+ "description": "Extra small resting shadow for minimal elevation"
48305
50588
  },
48306
50589
  "sideNav-bgColor-selected": {
48307
50590
  "key": "{sideNav.bgColor.selected}",