@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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