@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

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 (152) 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 +17 -3
  7. package/dist/build/schemas/colorToken.d.ts +1 -1
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  10. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  11. package/dist/build/schemas/dimensionValue.js +10 -13
  12. package/dist/build/schemas/durationToken.d.ts +8 -2
  13. package/dist/build/schemas/durationValue.d.ts +11 -1
  14. package/dist/build/schemas/durationValue.js +13 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  16. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  17. package/dist/build/schemas/gradientToken.d.ts +1 -1
  18. package/dist/build/schemas/numberToken.d.ts +1 -1
  19. package/dist/build/schemas/shadowToken.d.ts +673 -85
  20. package/dist/build/schemas/stringToken.d.ts +1 -1
  21. package/dist/build/schemas/stringToken.js +1 -1
  22. package/dist/build/schemas/tokenType.d.ts +1 -1
  23. package/dist/build/schemas/transitionToken.d.ts +15 -3
  24. package/dist/build/schemas/typographyToken.d.ts +19 -5
  25. package/dist/build/schemas/typographyToken.js +1 -1
  26. package/dist/build/schemas/validTokenType.d.ts +1 -1
  27. package/dist/build/schemas/validTokenType.js +1 -1
  28. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  29. package/dist/build/transformers/borderToCss.js +17 -1
  30. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  31. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  32. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  33. package/dist/build/transformers/dimensionToRem.js +21 -22
  34. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  35. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  36. package/dist/build/transformers/durationToCss.d.ts +2 -1
  37. package/dist/build/transformers/durationToCss.js +18 -11
  38. package/dist/build/transformers/shadowToCss.js +12 -1
  39. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  40. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  41. package/dist/build/types/borderTokenValue.d.ts +3 -1
  42. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  43. package/dist/build/types/shadowTokenValue.d.ts +6 -4
  44. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  45. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  46. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  47. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  48. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  49. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  50. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  51. package/dist/css/functional/themes/dark.css +32 -28
  52. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  53. package/dist/css/functional/themes/light-colorblind.css +32 -28
  54. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  55. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  56. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  57. package/dist/css/functional/themes/light.css +32 -28
  58. package/dist/css/primitives.css +4 -0
  59. package/dist/docs/base/motion/motion.json +96 -24
  60. package/dist/docs/base/size/size.json +76 -19
  61. package/dist/docs/base/typography/typography.json +24 -6
  62. package/dist/docs/functional/size/border.json +26 -11
  63. package/dist/docs/functional/size/breakpoints.json +24 -6
  64. package/dist/docs/functional/size/radius.json +16 -4
  65. package/dist/docs/functional/size/size.json +60 -15
  66. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +1423 -346
  67. package/dist/docs/functional/themes/dark-colorblind.json +1423 -346
  68. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +1423 -346
  69. package/dist/docs/functional/themes/dark-dimmed.json +1423 -346
  70. package/dist/docs/functional/themes/dark-high-contrast.json +1423 -346
  71. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +1423 -346
  72. package/dist/docs/functional/themes/dark-tritanopia.json +1423 -346
  73. package/dist/docs/functional/themes/dark.json +1423 -346
  74. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +1426 -349
  75. package/dist/docs/functional/themes/light-colorblind.json +1426 -349
  76. package/dist/docs/functional/themes/light-high-contrast.json +1426 -349
  77. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +1426 -349
  78. package/dist/docs/functional/themes/light-tritanopia.json +1426 -349
  79. package/dist/docs/functional/themes/light.json +1426 -349
  80. package/dist/docs/functional/typography/typography.json +8 -2
  81. package/dist/fallbacks/base/motion/motion.json +48 -12
  82. package/dist/figma/themes/light-colorblind.json +4 -4
  83. package/dist/figma/themes/light-high-contrast.json +4 -4
  84. package/dist/figma/themes/light-tritanopia.json +4 -4
  85. package/dist/figma/themes/light.json +4 -4
  86. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  87. package/dist/internalCss/dark-colorblind.css +28 -28
  88. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  89. package/dist/internalCss/dark-dimmed.css +28 -28
  90. package/dist/internalCss/dark-high-contrast.css +28 -28
  91. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  92. package/dist/internalCss/dark-tritanopia.css +28 -28
  93. package/dist/internalCss/dark.css +28 -28
  94. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  95. package/dist/internalCss/light-colorblind.css +28 -28
  96. package/dist/internalCss/light-high-contrast.css +28 -28
  97. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  98. package/dist/internalCss/light-tritanopia.css +28 -28
  99. package/dist/internalCss/light.css +28 -28
  100. package/dist/styleLint/base/motion/motion.json +96 -24
  101. package/dist/styleLint/base/size/size.json +76 -19
  102. package/dist/styleLint/base/typography/typography.json +30 -12
  103. package/dist/styleLint/functional/size/border.json +27 -12
  104. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  105. package/dist/styleLint/functional/size/radius.json +17 -5
  106. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  107. package/dist/styleLint/functional/size/size-fine.json +3 -3
  108. package/dist/styleLint/functional/size/size.json +111 -66
  109. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +1551 -366
  110. package/dist/styleLint/functional/themes/dark-colorblind.json +1551 -366
  111. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +1551 -366
  112. package/dist/styleLint/functional/themes/dark-dimmed.json +1551 -366
  113. package/dist/styleLint/functional/themes/dark-high-contrast.json +1551 -366
  114. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +1551 -366
  115. package/dist/styleLint/functional/themes/dark-tritanopia.json +1551 -366
  116. package/dist/styleLint/functional/themes/dark.json +1551 -366
  117. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +1554 -369
  118. package/dist/styleLint/functional/themes/light-colorblind.json +1554 -369
  119. package/dist/styleLint/functional/themes/light-high-contrast.json +1554 -369
  120. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +1554 -369
  121. package/dist/styleLint/functional/themes/light-tritanopia.json +1554 -369
  122. package/dist/styleLint/functional/themes/light.json +1554 -369
  123. package/dist/styleLint/functional/typography/typography.json +28 -22
  124. package/package.json +6 -5
  125. package/src/tokens/base/motion/timing.json5 +12 -12
  126. package/src/tokens/base/size/size.json5 +19 -19
  127. package/src/tokens/base/typography/typography.json5 +6 -6
  128. package/src/tokens/component/avatar.json5 +72 -44
  129. package/src/tokens/component/button.json5 +1545 -1193
  130. package/src/tokens/functional/border/border.json5 +4 -1
  131. package/src/tokens/functional/color/bgColor.json5 +8 -0
  132. package/src/tokens/functional/color/display.json5 +7 -0
  133. package/src/tokens/functional/color/fgColor.json5 +8 -0
  134. package/src/tokens/functional/color/syntax.json5 +14 -0
  135. package/src/tokens/functional/shadow/shadow.json5 +678 -163
  136. package/src/tokens/functional/size/border.json5 +8 -8
  137. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  138. package/src/tokens/functional/size/radius.json5 +4 -4
  139. package/src/tokens/functional/size/size.json5 +15 -15
  140. package/src/tokens/functional/typography/typography.json5 +8 -4
  141. package/dist/build/parsers/index.d.ts +0 -1
  142. package/dist/build/parsers/index.js +0 -1
  143. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  144. package/dist/build/parsers/w3cJsonParser.js +0 -25
  145. package/dist/removed/testing.json5 +0 -4
  146. package/guidelines/color.llm.md +0 -16
  147. package/guidelines/guidelines.llm.md +0 -34
  148. package/guidelines/motion.llm.md +0 -41
  149. package/guidelines/spacing.llm.md +0 -20
  150. package/guidelines/typography.llm.md +0 -14
  151. package/src/tokens/removed/testing.json5 +0 -4
  152. package/token-guidelines.llm.md +0 -695
@@ -176,10 +176,22 @@
176
176
  {
177
177
  "color": "#f6f8fa",
178
178
  "alpha": 1,
179
- "offsetX": "0px",
180
- "offsetY": "0px",
181
- "blur": "0px",
182
- "spread": "2px"
179
+ "offsetX": {
180
+ "value": 0,
181
+ "unit": "px"
182
+ },
183
+ "offsetY": {
184
+ "value": 0,
185
+ "unit": "px"
186
+ },
187
+ "blur": {
188
+ "value": 0,
189
+ "unit": "px"
190
+ },
191
+ "spread": {
192
+ "value": 2,
193
+ "unit": "px"
194
+ }
183
195
  }
184
196
  ],
185
197
  "filePath": "src/tokens/component/avatar.json5",
@@ -195,10 +207,22 @@
195
207
  {
196
208
  "color": "{base.color.neutral.0}",
197
209
  "alpha": 0.8,
198
- "offsetX": "0px",
199
- "offsetY": "0px",
200
- "blur": "0px",
201
- "spread": "2px"
210
+ "offsetX": {
211
+ "value": 0,
212
+ "unit": "px"
213
+ },
214
+ "offsetY": {
215
+ "value": 0,
216
+ "unit": "px"
217
+ },
218
+ "blur": {
219
+ "value": 0,
220
+ "unit": "px"
221
+ },
222
+ "spread": {
223
+ "value": 2,
224
+ "unit": "px"
225
+ }
202
226
  }
203
227
  ],
204
228
  "$type": "shadow",
@@ -213,10 +237,22 @@
213
237
  {
214
238
  "color": "{base.color.neutral.1}",
215
239
  "alpha": 1,
216
- "offsetX": "0px",
217
- "offsetY": "0px",
218
- "blur": "0px",
219
- "spread": "2px"
240
+ "offsetX": {
241
+ "value": 0,
242
+ "unit": "px"
243
+ },
244
+ "offsetY": {
245
+ "value": 0,
246
+ "unit": "px"
247
+ },
248
+ "blur": {
249
+ "value": 0,
250
+ "unit": "px"
251
+ },
252
+ "spread": {
253
+ "value": 2,
254
+ "unit": "px"
255
+ }
220
256
  }
221
257
  ],
222
258
  "filePath": "src/tokens/component/avatar.json5",
@@ -230,7 +266,7 @@
230
266
  "name": "avatar-shadow",
231
267
  "attributes": {},
232
268
  "path": ["avatar", "shadow"],
233
- "value": "0px 0px 0px 2px #ffffffcc",
269
+ "value": "0 0 0 2px #ffffffcc",
234
270
  "type": "shadow"
235
271
  },
236
272
  "avatarStack-fade-bgColor-default": {
@@ -543,6 +579,10 @@
543
579
  },
544
580
  "org.primer.overrides": {
545
581
  "dark": "#ffffff"
582
+ },
583
+ "org.primer.llm": {
584
+ "doNotUse": true,
585
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
546
586
  }
547
587
  },
548
588
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -559,6 +599,10 @@
559
599
  },
560
600
  "org.primer.overrides": {
561
601
  "dark": "{base.color.neutral.0}"
602
+ },
603
+ "org.primer.llm": {
604
+ "doNotUse": true,
605
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
562
606
  }
563
607
  },
564
608
  "key": "{bgColor.black}"
@@ -2433,6 +2477,10 @@
2433
2477
  },
2434
2478
  "org.primer.overrides": {
2435
2479
  "dark": "#010409"
2480
+ },
2481
+ "org.primer.llm": {
2482
+ "doNotUse": true,
2483
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2436
2484
  }
2437
2485
  },
2438
2486
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2449,6 +2497,10 @@
2449
2497
  },
2450
2498
  "org.primer.overrides": {
2451
2499
  "dark": "{base.color.neutral.13}"
2500
+ },
2501
+ "org.primer.llm": {
2502
+ "doNotUse": true,
2503
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2452
2504
  }
2453
2505
  },
2454
2506
  "key": "{bgColor.white}"
@@ -6945,10 +6997,22 @@
6945
6997
  {
6946
6998
  "color": "#361200",
6947
6999
  "alpha": 0.2,
6948
- "offsetX": "0px",
6949
- "offsetY": "1px",
6950
- "blur": "0px",
6951
- "spread": "0px",
7000
+ "offsetX": {
7001
+ "value": 0,
7002
+ "unit": "px"
7003
+ },
7004
+ "offsetY": {
7005
+ "value": 1,
7006
+ "unit": "px"
7007
+ },
7008
+ "blur": {
7009
+ "value": 0,
7010
+ "unit": "px"
7011
+ },
7012
+ "spread": {
7013
+ "value": 0,
7014
+ "unit": "px"
7015
+ },
6952
7016
  "inset": true
6953
7017
  }
6954
7018
  ],
@@ -6961,10 +7025,22 @@
6961
7025
  {
6962
7026
  "color": "#ffffff00",
6963
7027
  "alpha": 0,
6964
- "offsetX": "0px",
6965
- "offsetY": "0px",
6966
- "blur": "0px",
6967
- "spread": "0px",
7028
+ "offsetX": {
7029
+ "value": 0,
7030
+ "unit": "px"
7031
+ },
7032
+ "offsetY": {
7033
+ "value": 0,
7034
+ "unit": "px"
7035
+ },
7036
+ "blur": {
7037
+ "value": 0,
7038
+ "unit": "px"
7039
+ },
7040
+ "spread": {
7041
+ "value": 0,
7042
+ "unit": "px"
7043
+ },
6968
7044
  "inset": false
6969
7045
  }
6970
7046
  ],
@@ -6981,10 +7057,22 @@
6981
7057
  {
6982
7058
  "color": "{base.color.red.9}",
6983
7059
  "alpha": 0.2,
6984
- "offsetX": "0px",
6985
- "offsetY": "1px",
6986
- "blur": "0px",
6987
- "spread": "0px",
7060
+ "offsetX": {
7061
+ "value": 0,
7062
+ "unit": "px"
7063
+ },
7064
+ "offsetY": {
7065
+ "value": 1,
7066
+ "unit": "px"
7067
+ },
7068
+ "blur": {
7069
+ "value": 0,
7070
+ "unit": "px"
7071
+ },
7072
+ "spread": {
7073
+ "value": 0,
7074
+ "unit": "px"
7075
+ },
6988
7076
  "inset": true
6989
7077
  }
6990
7078
  ],
@@ -7000,10 +7088,22 @@
7000
7088
  {
7001
7089
  "color": "{base.color.orange.9}",
7002
7090
  "alpha": 0.2,
7003
- "offsetX": "0px",
7004
- "offsetY": "1px",
7005
- "blur": "0px",
7006
- "spread": "0px",
7091
+ "offsetX": {
7092
+ "value": 0,
7093
+ "unit": "px"
7094
+ },
7095
+ "offsetY": {
7096
+ "value": 1,
7097
+ "unit": "px"
7098
+ },
7099
+ "blur": {
7100
+ "value": 0,
7101
+ "unit": "px"
7102
+ },
7103
+ "spread": {
7104
+ "value": 0,
7105
+ "unit": "px"
7106
+ },
7007
7107
  "inset": true
7008
7108
  }
7009
7109
  ],
@@ -7016,10 +7116,22 @@
7016
7116
  {
7017
7117
  "color": "{base.color.transparent}",
7018
7118
  "alpha": 0,
7019
- "offsetX": "0px",
7020
- "offsetY": "0px",
7021
- "blur": "0px",
7022
- "spread": "0px",
7119
+ "offsetX": {
7120
+ "value": 0,
7121
+ "unit": "px"
7122
+ },
7123
+ "offsetY": {
7124
+ "value": 0,
7125
+ "unit": "px"
7126
+ },
7127
+ "blur": {
7128
+ "value": 0,
7129
+ "unit": "px"
7130
+ },
7131
+ "spread": {
7132
+ "value": 0,
7133
+ "unit": "px"
7134
+ },
7023
7135
  "inset": false
7024
7136
  }
7025
7137
  ],
@@ -7034,7 +7146,7 @@
7034
7146
  "name": "button-danger-shadow-selected",
7035
7147
  "attributes": {},
7036
7148
  "path": ["button", "danger", "shadow", "selected"],
7037
- "value": "inset 0px 1px 0px 0px #43001133",
7149
+ "value": "inset 0 1px 0 0 #43001133",
7038
7150
  "type": "shadow"
7039
7151
  },
7040
7152
  "button-default-bgColor-active": {
@@ -7408,10 +7520,22 @@
7408
7520
  {
7409
7521
  "color": "#ffffff00",
7410
7522
  "alpha": 0,
7411
- "offsetX": "0px",
7412
- "offsetY": "0px",
7413
- "blur": "0px",
7414
- "spread": "0px",
7523
+ "offsetX": {
7524
+ "value": 0,
7525
+ "unit": "px"
7526
+ },
7527
+ "offsetY": {
7528
+ "value": 0,
7529
+ "unit": "px"
7530
+ },
7531
+ "blur": {
7532
+ "value": 0,
7533
+ "unit": "px"
7534
+ },
7535
+ "spread": {
7536
+ "value": 0,
7537
+ "unit": "px"
7538
+ },
7415
7539
  "inset": false
7416
7540
  }
7417
7541
  ],
@@ -7428,10 +7552,22 @@
7428
7552
  {
7429
7553
  "color": "{base.color.neutral.13}",
7430
7554
  "alpha": 0.04,
7431
- "offsetX": "0px",
7432
- "offsetY": "1px",
7433
- "blur": "0px",
7434
- "spread": "0px",
7555
+ "offsetX": {
7556
+ "value": 0,
7557
+ "unit": "px"
7558
+ },
7559
+ "offsetY": {
7560
+ "value": 1,
7561
+ "unit": "px"
7562
+ },
7563
+ "blur": {
7564
+ "value": 0,
7565
+ "unit": "px"
7566
+ },
7567
+ "spread": {
7568
+ "value": 0,
7569
+ "unit": "px"
7570
+ },
7435
7571
  "inset": false
7436
7572
  }
7437
7573
  ],
@@ -7447,10 +7583,22 @@
7447
7583
  {
7448
7584
  "color": "{base.color.transparent}",
7449
7585
  "alpha": 0,
7450
- "offsetX": "0px",
7451
- "offsetY": "0px",
7452
- "blur": "0px",
7453
- "spread": "0px",
7586
+ "offsetX": {
7587
+ "value": 0,
7588
+ "unit": "px"
7589
+ },
7590
+ "offsetY": {
7591
+ "value": 0,
7592
+ "unit": "px"
7593
+ },
7594
+ "blur": {
7595
+ "value": 0,
7596
+ "unit": "px"
7597
+ },
7598
+ "spread": {
7599
+ "value": 0,
7600
+ "unit": "px"
7601
+ },
7454
7602
  "inset": false
7455
7603
  }
7456
7604
  ],
@@ -7465,7 +7613,7 @@
7465
7613
  "name": "button-default-shadow-resting",
7466
7614
  "attributes": {},
7467
7615
  "path": ["button", "default", "shadow", "resting"],
7468
- "value": "0px 1px 0px 0px #0104090a",
7616
+ "value": "0 1px 0 0 #0104090a",
7469
7617
  "type": "shadow"
7470
7618
  },
7471
7619
  "button-inactive-bgColor": {
@@ -9167,10 +9315,22 @@
9167
9315
  {
9168
9316
  "color": "#ffffff00",
9169
9317
  "alpha": 0,
9170
- "offsetX": "0px",
9171
- "offsetY": "0px",
9172
- "blur": "0px",
9173
- "spread": "0px",
9318
+ "offsetX": {
9319
+ "value": 0,
9320
+ "unit": "px"
9321
+ },
9322
+ "offsetY": {
9323
+ "value": 0,
9324
+ "unit": "px"
9325
+ },
9326
+ "blur": {
9327
+ "value": 0,
9328
+ "unit": "px"
9329
+ },
9330
+ "spread": {
9331
+ "value": 0,
9332
+ "unit": "px"
9333
+ },
9174
9334
  "inset": false
9175
9335
  }
9176
9336
  ],
@@ -9187,10 +9347,22 @@
9187
9347
  {
9188
9348
  "color": "{base.color.blue.9}",
9189
9349
  "alpha": 0.2,
9190
- "offsetX": "0px",
9191
- "offsetY": "1px",
9192
- "blur": "0px",
9193
- "spread": "0px",
9350
+ "offsetX": {
9351
+ "value": 0,
9352
+ "unit": "px"
9353
+ },
9354
+ "offsetY": {
9355
+ "value": 1,
9356
+ "unit": "px"
9357
+ },
9358
+ "blur": {
9359
+ "value": 0,
9360
+ "unit": "px"
9361
+ },
9362
+ "spread": {
9363
+ "value": 0,
9364
+ "unit": "px"
9365
+ },
9194
9366
  "inset": true
9195
9367
  }
9196
9368
  ],
@@ -9206,10 +9378,22 @@
9206
9378
  {
9207
9379
  "color": "{base.color.transparent}",
9208
9380
  "alpha": 0,
9209
- "offsetX": "0px",
9210
- "offsetY": "0px",
9211
- "blur": "0px",
9212
- "spread": "0px",
9381
+ "offsetX": {
9382
+ "value": 0,
9383
+ "unit": "px"
9384
+ },
9385
+ "offsetY": {
9386
+ "value": 0,
9387
+ "unit": "px"
9388
+ },
9389
+ "blur": {
9390
+ "value": 0,
9391
+ "unit": "px"
9392
+ },
9393
+ "spread": {
9394
+ "value": 0,
9395
+ "unit": "px"
9396
+ },
9213
9397
  "inset": false
9214
9398
  }
9215
9399
  ],
@@ -9224,7 +9408,7 @@
9224
9408
  "name": "button-outline-shadow-selected",
9225
9409
  "attributes": {},
9226
9410
  "path": ["button", "outline", "shadow", "selected"],
9227
- "value": "inset 0px 1px 0px 0px #021a4a33",
9411
+ "value": "inset 0 1px 0 0 #021a4a33",
9228
9412
  "type": "shadow"
9229
9413
  },
9230
9414
  "button-primary-bgColor-active": {
@@ -10377,10 +10561,22 @@
10377
10561
  {
10378
10562
  "color": "#021a4a",
10379
10563
  "alpha": 0.3,
10380
- "offsetX": "0px",
10381
- "offsetY": "1px",
10382
- "blur": "0px",
10383
- "spread": "0px",
10564
+ "offsetX": {
10565
+ "value": 0,
10566
+ "unit": "px"
10567
+ },
10568
+ "offsetY": {
10569
+ "value": 1,
10570
+ "unit": "px"
10571
+ },
10572
+ "blur": {
10573
+ "value": 0,
10574
+ "unit": "px"
10575
+ },
10576
+ "spread": {
10577
+ "value": 0,
10578
+ "unit": "px"
10579
+ },
10384
10580
  "inset": true
10385
10581
  }
10386
10582
  ],
@@ -10393,10 +10589,22 @@
10393
10589
  {
10394
10590
  "color": "#021a4a",
10395
10591
  "alpha": 0.3,
10396
- "offsetX": "0px",
10397
- "offsetY": "1px",
10398
- "blur": "0px",
10399
- "spread": "0px",
10592
+ "offsetX": {
10593
+ "value": 0,
10594
+ "unit": "px"
10595
+ },
10596
+ "offsetY": {
10597
+ "value": 1,
10598
+ "unit": "px"
10599
+ },
10600
+ "blur": {
10601
+ "value": 0,
10602
+ "unit": "px"
10603
+ },
10604
+ "spread": {
10605
+ "value": 0,
10606
+ "unit": "px"
10607
+ },
10400
10608
  "inset": true
10401
10609
  }
10402
10610
  ],
@@ -10409,10 +10617,22 @@
10409
10617
  {
10410
10618
  "color": "#ffffff00",
10411
10619
  "alpha": 0,
10412
- "offsetX": "0px",
10413
- "offsetY": "0px",
10414
- "blur": "0px",
10415
- "spread": "0px",
10620
+ "offsetX": {
10621
+ "value": 0,
10622
+ "unit": "px"
10623
+ },
10624
+ "offsetY": {
10625
+ "value": 0,
10626
+ "unit": "px"
10627
+ },
10628
+ "blur": {
10629
+ "value": 0,
10630
+ "unit": "px"
10631
+ },
10632
+ "spread": {
10633
+ "value": 0,
10634
+ "unit": "px"
10635
+ },
10416
10636
  "inset": false
10417
10637
  }
10418
10638
  ],
@@ -10429,10 +10649,22 @@
10429
10649
  {
10430
10650
  "color": "{base.color.green.9}",
10431
10651
  "alpha": 0.3,
10432
- "offsetX": "0px",
10433
- "offsetY": "1px",
10434
- "blur": "0px",
10435
- "spread": "0px",
10652
+ "offsetX": {
10653
+ "value": 0,
10654
+ "unit": "px"
10655
+ },
10656
+ "offsetY": {
10657
+ "value": 1,
10658
+ "unit": "px"
10659
+ },
10660
+ "blur": {
10661
+ "value": 0,
10662
+ "unit": "px"
10663
+ },
10664
+ "spread": {
10665
+ "value": 0,
10666
+ "unit": "px"
10667
+ },
10436
10668
  "inset": true
10437
10669
  }
10438
10670
  ],
@@ -10448,10 +10680,22 @@
10448
10680
  {
10449
10681
  "color": "{base.color.blue.9}",
10450
10682
  "alpha": 0.3,
10451
- "offsetX": "0px",
10452
- "offsetY": "1px",
10453
- "blur": "0px",
10454
- "spread": "0px",
10683
+ "offsetX": {
10684
+ "value": 0,
10685
+ "unit": "px"
10686
+ },
10687
+ "offsetY": {
10688
+ "value": 1,
10689
+ "unit": "px"
10690
+ },
10691
+ "blur": {
10692
+ "value": 0,
10693
+ "unit": "px"
10694
+ },
10695
+ "spread": {
10696
+ "value": 0,
10697
+ "unit": "px"
10698
+ },
10455
10699
  "inset": true
10456
10700
  }
10457
10701
  ],
@@ -10464,10 +10708,22 @@
10464
10708
  {
10465
10709
  "color": "{base.color.blue.9}",
10466
10710
  "alpha": 0.3,
10467
- "offsetX": "0px",
10468
- "offsetY": "1px",
10469
- "blur": "0px",
10470
- "spread": "0px",
10711
+ "offsetX": {
10712
+ "value": 0,
10713
+ "unit": "px"
10714
+ },
10715
+ "offsetY": {
10716
+ "value": 1,
10717
+ "unit": "px"
10718
+ },
10719
+ "blur": {
10720
+ "value": 0,
10721
+ "unit": "px"
10722
+ },
10723
+ "spread": {
10724
+ "value": 0,
10725
+ "unit": "px"
10726
+ },
10471
10727
  "inset": true
10472
10728
  }
10473
10729
  ],
@@ -10480,10 +10736,22 @@
10480
10736
  {
10481
10737
  "color": "{base.color.transparent}",
10482
10738
  "alpha": 0,
10483
- "offsetX": "0px",
10484
- "offsetY": "0px",
10485
- "blur": "0px",
10486
- "spread": "0px",
10739
+ "offsetX": {
10740
+ "value": 0,
10741
+ "unit": "px"
10742
+ },
10743
+ "offsetY": {
10744
+ "value": 0,
10745
+ "unit": "px"
10746
+ },
10747
+ "blur": {
10748
+ "value": 0,
10749
+ "unit": "px"
10750
+ },
10751
+ "spread": {
10752
+ "value": 0,
10753
+ "unit": "px"
10754
+ },
10487
10755
  "inset": false
10488
10756
  }
10489
10757
  ],
@@ -10498,7 +10766,7 @@
10498
10766
  "name": "button-primary-shadow-selected",
10499
10767
  "attributes": {},
10500
10768
  "path": ["button", "primary", "shadow", "selected"],
10501
- "value": "inset 0px 1px 0px 0px #00230b4d",
10769
+ "value": "inset 0 1px 0 0 #00230b4d",
10502
10770
  "type": "shadow"
10503
10771
  },
10504
10772
  "button-star-iconColor": {
@@ -37219,6 +37487,10 @@
37219
37487
  },
37220
37488
  "org.primer.overrides": {
37221
37489
  "dark": "#ffffff"
37490
+ },
37491
+ "org.primer.llm": {
37492
+ "doNotUse": true,
37493
+ "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."
37222
37494
  }
37223
37495
  },
37224
37496
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37235,6 +37507,10 @@
37235
37507
  },
37236
37508
  "org.primer.overrides": {
37237
37509
  "dark": "{base.color.neutral.0}"
37510
+ },
37511
+ "org.primer.llm": {
37512
+ "doNotUse": true,
37513
+ "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."
37238
37514
  }
37239
37515
  },
37240
37516
  "key": "{fgColor.black}"
@@ -38208,6 +38484,10 @@
38208
38484
  },
38209
38485
  "org.primer.overrides": {
38210
38486
  "dark": "#010409"
38487
+ },
38488
+ "org.primer.llm": {
38489
+ "doNotUse": true,
38490
+ "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."
38211
38491
  }
38212
38492
  },
38213
38493
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38224,6 +38504,10 @@
38224
38504
  },
38225
38505
  "org.primer.overrides": {
38226
38506
  "dark": "{base.color.neutral.13}"
38507
+ },
38508
+ "org.primer.llm": {
38509
+ "doNotUse": true,
38510
+ "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."
38227
38511
  }
38228
38512
  },
38229
38513
  "key": "{fgColor.white}"
@@ -38249,7 +38533,10 @@
38249
38533
  "$value": {
38250
38534
  "color": "{focus.outlineColor}",
38251
38535
  "style": "solid",
38252
- "width": "2px"
38536
+ "width": {
38537
+ "value": 2,
38538
+ "unit": "px"
38539
+ }
38253
38540
  },
38254
38541
  "$type": "border",
38255
38542
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47414,18 +47701,42 @@
47414
47701
  {
47415
47702
  "color": "#454c54",
47416
47703
  "alpha": 1,
47417
- "offsetX": "0px",
47418
- "offsetY": "0px",
47419
- "blur": "0px",
47420
- "spread": "1px"
47704
+ "offsetX": {
47705
+ "value": 0,
47706
+ "unit": "px"
47707
+ },
47708
+ "offsetY": {
47709
+ "value": 0,
47710
+ "unit": "px"
47711
+ },
47712
+ "blur": {
47713
+ "value": 0,
47714
+ "unit": "px"
47715
+ },
47716
+ "spread": {
47717
+ "value": 1,
47718
+ "unit": "px"
47719
+ }
47421
47720
  },
47422
47721
  {
47423
47722
  "color": "#ffffff",
47424
47723
  "alpha": 1,
47425
- "offsetX": "0px",
47426
- "offsetY": "24px",
47427
- "blur": "48px",
47428
- "spread": "0px"
47724
+ "offsetX": {
47725
+ "value": 0,
47726
+ "unit": "px"
47727
+ },
47728
+ "offsetY": {
47729
+ "value": 24,
47730
+ "unit": "px"
47731
+ },
47732
+ "blur": {
47733
+ "value": 48,
47734
+ "unit": "px"
47735
+ },
47736
+ "spread": {
47737
+ "value": 0,
47738
+ "unit": "px"
47739
+ }
47429
47740
  }
47430
47741
  ],
47431
47742
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47445,18 +47756,42 @@
47445
47756
  {
47446
47757
  "color": "{overlay.borderColor}",
47447
47758
  "alpha": 0,
47448
- "offsetX": "0px",
47449
- "offsetY": "0px",
47450
- "blur": "0px",
47451
- "spread": "1px"
47759
+ "offsetX": {
47760
+ "value": 0,
47761
+ "unit": "px"
47762
+ },
47763
+ "offsetY": {
47764
+ "value": 0,
47765
+ "unit": "px"
47766
+ },
47767
+ "blur": {
47768
+ "value": 0,
47769
+ "unit": "px"
47770
+ },
47771
+ "spread": {
47772
+ "value": 1,
47773
+ "unit": "px"
47774
+ }
47452
47775
  },
47453
47776
  {
47454
47777
  "color": "{base.color.neutral.12}",
47455
47778
  "alpha": 0.24,
47456
- "offsetX": "0px",
47457
- "offsetY": "40px",
47458
- "blur": "80px",
47459
- "spread": "0px"
47779
+ "offsetX": {
47780
+ "value": 0,
47781
+ "unit": "px"
47782
+ },
47783
+ "offsetY": {
47784
+ "value": 40,
47785
+ "unit": "px"
47786
+ },
47787
+ "blur": {
47788
+ "value": 80,
47789
+ "unit": "px"
47790
+ },
47791
+ "spread": {
47792
+ "value": 0,
47793
+ "unit": "px"
47794
+ }
47460
47795
  }
47461
47796
  ],
47462
47797
  "$type": "shadow",
@@ -47472,18 +47807,42 @@
47472
47807
  {
47473
47808
  "color": "{overlay.borderColor}",
47474
47809
  "alpha": 1,
47475
- "offsetX": "0px",
47476
- "offsetY": "0px",
47477
- "blur": "0px",
47478
- "spread": "1px"
47810
+ "offsetX": {
47811
+ "value": 0,
47812
+ "unit": "px"
47813
+ },
47814
+ "offsetY": {
47815
+ "value": 0,
47816
+ "unit": "px"
47817
+ },
47818
+ "blur": {
47819
+ "value": 0,
47820
+ "unit": "px"
47821
+ },
47822
+ "spread": {
47823
+ "value": 1,
47824
+ "unit": "px"
47825
+ }
47479
47826
  },
47480
47827
  {
47481
47828
  "color": "{base.color.neutral.0}",
47482
47829
  "alpha": 1,
47483
- "offsetX": "0px",
47484
- "offsetY": "24px",
47485
- "blur": "48px",
47486
- "spread": "0px"
47830
+ "offsetX": {
47831
+ "value": 0,
47832
+ "unit": "px"
47833
+ },
47834
+ "offsetY": {
47835
+ "value": 24,
47836
+ "unit": "px"
47837
+ },
47838
+ "blur": {
47839
+ "value": 48,
47840
+ "unit": "px"
47841
+ },
47842
+ "spread": {
47843
+ "value": 0,
47844
+ "unit": "px"
47845
+ }
47487
47846
  }
47488
47847
  ],
47489
47848
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47501,7 +47860,7 @@
47501
47860
  "name": "shadow-floating-large",
47502
47861
  "attributes": {},
47503
47862
  "path": ["shadow", "floating", "large"],
47504
- "value": "0px 0px 0px 1px #454c54, 0px 40px 80px 0px #25292e3d",
47863
+ "value": "0 0 0 1px #454c54, 0 40px 80px 0 #25292e3d",
47505
47864
  "type": "shadow",
47506
47865
  "description": "Large floating shadow for modals and dialogs"
47507
47866
  },
@@ -47515,24 +47874,52 @@
47515
47874
  {
47516
47875
  "color": "#ffffff",
47517
47876
  "alpha": 0.4,
47518
- "offsetX": "0px",
47519
- "offsetY": "6px",
47520
- "blur": "12px",
47521
- "spread": "-3px"
47877
+ "offsetX": {
47878
+ "value": 0,
47879
+ "unit": "px"
47880
+ },
47881
+ "offsetY": {
47882
+ "value": 6,
47883
+ "unit": "px"
47884
+ },
47885
+ "blur": {
47886
+ "value": 12,
47887
+ "unit": "px"
47888
+ },
47889
+ "spread": {
47890
+ "value": -3,
47891
+ "unit": "px"
47892
+ }
47522
47893
  },
47523
47894
  {
47524
47895
  "color": "#ffffff",
47525
47896
  "alpha": 0.4,
47526
- "offsetX": "0px",
47527
- "offsetY": "6px",
47528
- "blur": "18px",
47529
- "spread": "0px"
47897
+ "offsetX": {
47898
+ "value": 0,
47899
+ "unit": "px"
47900
+ },
47901
+ "offsetY": {
47902
+ "value": 6,
47903
+ "unit": "px"
47904
+ },
47905
+ "blur": {
47906
+ "value": 18,
47907
+ "unit": "px"
47908
+ },
47909
+ "spread": {
47910
+ "value": 0,
47911
+ "unit": "px"
47912
+ }
47530
47913
  }
47531
47914
  ],
47532
47915
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47533
47916
  "isSource": true,
47534
47917
  "$type": "shadow"
47535
47918
  }
47919
+ },
47920
+ "org.primer.llm": {
47921
+ "usage": ["legacy-component", "backward-compatibility"],
47922
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47536
47923
  }
47537
47924
  },
47538
47925
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47542,21 +47929,46 @@
47542
47929
  {
47543
47930
  "color": "{base.color.neutral.12}",
47544
47931
  "alpha": 0.04,
47545
- "offsetX": "0px",
47546
- "offsetY": "6px",
47547
- "blur": "12px",
47548
- "spread": "-3px"
47932
+ "offsetX": {
47933
+ "value": 0,
47934
+ "unit": "px"
47935
+ },
47936
+ "offsetY": {
47937
+ "value": 6,
47938
+ "unit": "px"
47939
+ },
47940
+ "blur": {
47941
+ "value": 12,
47942
+ "unit": "px"
47943
+ },
47944
+ "spread": {
47945
+ "value": -3,
47946
+ "unit": "px"
47947
+ }
47549
47948
  },
47550
47949
  {
47551
47950
  "color": "{base.color.neutral.12}",
47552
47951
  "alpha": 0.12,
47553
- "offsetX": "0px",
47554
- "offsetY": "6px",
47555
- "blur": "18px",
47556
- "spread": "0px"
47952
+ "offsetX": {
47953
+ "value": 0,
47954
+ "unit": "px"
47955
+ },
47956
+ "offsetY": {
47957
+ "value": 6,
47958
+ "unit": "px"
47959
+ },
47960
+ "blur": {
47961
+ "value": 18,
47962
+ "unit": "px"
47963
+ },
47964
+ "spread": {
47965
+ "value": 0,
47966
+ "unit": "px"
47967
+ }
47557
47968
  }
47558
47969
  ],
47559
47970
  "$type": "shadow",
47971
+ "$description": "Legacy floating shadow for backward compatibility",
47560
47972
  "$extensions": {
47561
47973
  "org.primer.figma": {},
47562
47974
  "org.primer.overrides": {
@@ -47565,24 +47977,52 @@
47565
47977
  {
47566
47978
  "color": "{base.color.neutral.0}",
47567
47979
  "alpha": 0.4,
47568
- "offsetX": "0px",
47569
- "offsetY": "6px",
47570
- "blur": "12px",
47571
- "spread": "-3px"
47980
+ "offsetX": {
47981
+ "value": 0,
47982
+ "unit": "px"
47983
+ },
47984
+ "offsetY": {
47985
+ "value": 6,
47986
+ "unit": "px"
47987
+ },
47988
+ "blur": {
47989
+ "value": 12,
47990
+ "unit": "px"
47991
+ },
47992
+ "spread": {
47993
+ "value": -3,
47994
+ "unit": "px"
47995
+ }
47572
47996
  },
47573
47997
  {
47574
47998
  "color": "{base.color.neutral.0}",
47575
47999
  "alpha": 0.4,
47576
- "offsetX": "0px",
47577
- "offsetY": "6px",
47578
- "blur": "18px",
47579
- "spread": "0px"
48000
+ "offsetX": {
48001
+ "value": 0,
48002
+ "unit": "px"
48003
+ },
48004
+ "offsetY": {
48005
+ "value": 6,
48006
+ "unit": "px"
48007
+ },
48008
+ "blur": {
48009
+ "value": 18,
48010
+ "unit": "px"
48011
+ },
48012
+ "spread": {
48013
+ "value": 0,
48014
+ "unit": "px"
48015
+ }
47580
48016
  }
47581
48017
  ],
47582
48018
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47583
48019
  "isSource": true,
47584
48020
  "$type": "shadow"
47585
48021
  }
48022
+ },
48023
+ "org.primer.llm": {
48024
+ "usage": ["legacy-component", "backward-compatibility"],
48025
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47586
48026
  }
47587
48027
  },
47588
48028
  "key": "{shadow.floating.legacy}"
@@ -47590,8 +48030,9 @@
47590
48030
  "name": "shadow-floating-legacy",
47591
48031
  "attributes": {},
47592
48032
  "path": ["shadow", "floating", "legacy"],
47593
- "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47594
- "type": "shadow"
48033
+ "value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
48034
+ "type": "shadow",
48035
+ "description": "Legacy floating shadow for backward compatibility"
47595
48036
  },
47596
48037
  "shadow-floating-medium": {
47597
48038
  "key": "{shadow.floating.medium}",
@@ -47606,48 +48047,112 @@
47606
48047
  {
47607
48048
  "color": "#454c54",
47608
48049
  "alpha": 1,
47609
- "offsetX": "0px",
47610
- "offsetY": "0px",
47611
- "blur": "0px",
47612
- "spread": "1px"
48050
+ "offsetX": {
48051
+ "value": 0,
48052
+ "unit": "px"
48053
+ },
48054
+ "offsetY": {
48055
+ "value": 0,
48056
+ "unit": "px"
48057
+ },
48058
+ "blur": {
48059
+ "value": 0,
48060
+ "unit": "px"
48061
+ },
48062
+ "spread": {
48063
+ "value": 1,
48064
+ "unit": "px"
48065
+ }
47613
48066
  },
47614
48067
  {
47615
48068
  "color": "#ffffff",
47616
48069
  "alpha": 0.4,
47617
- "offsetX": "0px",
47618
- "offsetY": "8px",
47619
- "blur": "16px",
47620
- "spread": "-4px"
48070
+ "offsetX": {
48071
+ "value": 0,
48072
+ "unit": "px"
48073
+ },
48074
+ "offsetY": {
48075
+ "value": 8,
48076
+ "unit": "px"
48077
+ },
48078
+ "blur": {
48079
+ "value": 16,
48080
+ "unit": "px"
48081
+ },
48082
+ "spread": {
48083
+ "value": -4,
48084
+ "unit": "px"
48085
+ }
47621
48086
  },
47622
48087
  {
47623
48088
  "color": "#ffffff",
47624
48089
  "alpha": 0.4,
47625
- "offsetX": "0px",
47626
- "offsetY": "4px",
47627
- "blur": "32px",
47628
- "spread": "-4px"
48090
+ "offsetX": {
48091
+ "value": 0,
48092
+ "unit": "px"
48093
+ },
48094
+ "offsetY": {
48095
+ "value": 4,
48096
+ "unit": "px"
48097
+ },
48098
+ "blur": {
48099
+ "value": 32,
48100
+ "unit": "px"
48101
+ },
48102
+ "spread": {
48103
+ "value": -4,
48104
+ "unit": "px"
48105
+ }
47629
48106
  },
47630
48107
  {
47631
48108
  "color": "#ffffff",
47632
48109
  "alpha": 0.4,
47633
- "offsetX": "0px",
47634
- "offsetY": "24px",
47635
- "blur": "48px",
47636
- "spread": "-12px"
48110
+ "offsetX": {
48111
+ "value": 0,
48112
+ "unit": "px"
48113
+ },
48114
+ "offsetY": {
48115
+ "value": 24,
48116
+ "unit": "px"
48117
+ },
48118
+ "blur": {
48119
+ "value": 48,
48120
+ "unit": "px"
48121
+ },
48122
+ "spread": {
48123
+ "value": -12,
48124
+ "unit": "px"
48125
+ }
47637
48126
  },
47638
48127
  {
47639
48128
  "color": "#ffffff",
47640
48129
  "alpha": 0.4,
47641
- "offsetX": "0px",
47642
- "offsetY": "48px",
47643
- "blur": "96px",
47644
- "spread": "-24px"
48130
+ "offsetX": {
48131
+ "value": 0,
48132
+ "unit": "px"
48133
+ },
48134
+ "offsetY": {
48135
+ "value": 48,
48136
+ "unit": "px"
48137
+ },
48138
+ "blur": {
48139
+ "value": 96,
48140
+ "unit": "px"
48141
+ },
48142
+ "spread": {
48143
+ "value": -24,
48144
+ "unit": "px"
48145
+ }
47645
48146
  }
47646
48147
  ],
47647
48148
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47648
48149
  "isSource": true,
47649
48150
  "$type": "shadow"
47650
48151
  }
48152
+ },
48153
+ "org.primer.llm": {
48154
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48155
+ "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."
47651
48156
  }
47652
48157
  },
47653
48158
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47657,45 +48162,106 @@
47657
48162
  {
47658
48163
  "color": "{overlay.borderColor}",
47659
48164
  "alpha": 0,
47660
- "offsetX": "0px",
47661
- "offsetY": "0px",
47662
- "blur": "0px",
47663
- "spread": "1px"
48165
+ "offsetX": {
48166
+ "value": 0,
48167
+ "unit": "px"
48168
+ },
48169
+ "offsetY": {
48170
+ "value": 0,
48171
+ "unit": "px"
48172
+ },
48173
+ "blur": {
48174
+ "value": 0,
48175
+ "unit": "px"
48176
+ },
48177
+ "spread": {
48178
+ "value": 1,
48179
+ "unit": "px"
48180
+ }
47664
48181
  },
47665
48182
  {
47666
48183
  "color": "{base.color.neutral.12}",
47667
48184
  "alpha": 0.08,
47668
- "offsetX": "0px",
47669
- "offsetY": "8px",
47670
- "blur": "16px",
47671
- "spread": "-4px"
48185
+ "offsetX": {
48186
+ "value": 0,
48187
+ "unit": "px"
48188
+ },
48189
+ "offsetY": {
48190
+ "value": 8,
48191
+ "unit": "px"
48192
+ },
48193
+ "blur": {
48194
+ "value": 16,
48195
+ "unit": "px"
48196
+ },
48197
+ "spread": {
48198
+ "value": -4,
48199
+ "unit": "px"
48200
+ }
47672
48201
  },
47673
48202
  {
47674
48203
  "color": "{base.color.neutral.12}",
47675
48204
  "alpha": 0.08,
47676
- "offsetX": "0px",
47677
- "offsetY": "4px",
47678
- "blur": "32px",
47679
- "spread": "-4px"
48205
+ "offsetX": {
48206
+ "value": 0,
48207
+ "unit": "px"
48208
+ },
48209
+ "offsetY": {
48210
+ "value": 4,
48211
+ "unit": "px"
48212
+ },
48213
+ "blur": {
48214
+ "value": 32,
48215
+ "unit": "px"
48216
+ },
48217
+ "spread": {
48218
+ "value": -4,
48219
+ "unit": "px"
48220
+ }
47680
48221
  },
47681
48222
  {
47682
48223
  "color": "{base.color.neutral.12}",
47683
48224
  "alpha": 0.08,
47684
- "offsetX": "0px",
47685
- "offsetY": "24px",
47686
- "blur": "48px",
47687
- "spread": "-12px"
48225
+ "offsetX": {
48226
+ "value": 0,
48227
+ "unit": "px"
48228
+ },
48229
+ "offsetY": {
48230
+ "value": 24,
48231
+ "unit": "px"
48232
+ },
48233
+ "blur": {
48234
+ "value": 48,
48235
+ "unit": "px"
48236
+ },
48237
+ "spread": {
48238
+ "value": -12,
48239
+ "unit": "px"
48240
+ }
47688
48241
  },
47689
48242
  {
47690
48243
  "color": "{base.color.neutral.12}",
47691
48244
  "alpha": 0.08,
47692
- "offsetX": "0px",
47693
- "offsetY": "48px",
47694
- "blur": "96px",
47695
- "spread": "-24px"
48245
+ "offsetX": {
48246
+ "value": 0,
48247
+ "unit": "px"
48248
+ },
48249
+ "offsetY": {
48250
+ "value": 48,
48251
+ "unit": "px"
48252
+ },
48253
+ "blur": {
48254
+ "value": 96,
48255
+ "unit": "px"
48256
+ },
48257
+ "spread": {
48258
+ "value": -24,
48259
+ "unit": "px"
48260
+ }
47696
48261
  }
47697
48262
  ],
47698
48263
  "$type": "shadow",
48264
+ "$description": "Medium floating shadow for popovers and action menus",
47699
48265
  "$extensions": {
47700
48266
  "org.primer.figma": {
47701
48267
  "collection": "mode",
@@ -47707,48 +48273,112 @@
47707
48273
  {
47708
48274
  "color": "{overlay.borderColor}",
47709
48275
  "alpha": 1,
47710
- "offsetX": "0px",
47711
- "offsetY": "0px",
47712
- "blur": "0px",
47713
- "spread": "1px"
48276
+ "offsetX": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "offsetY": {
48281
+ "value": 0,
48282
+ "unit": "px"
48283
+ },
48284
+ "blur": {
48285
+ "value": 0,
48286
+ "unit": "px"
48287
+ },
48288
+ "spread": {
48289
+ "value": 1,
48290
+ "unit": "px"
48291
+ }
47714
48292
  },
47715
48293
  {
47716
48294
  "color": "{base.color.neutral.0}",
47717
48295
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "8px",
47720
- "blur": "16px",
47721
- "spread": "-4px"
48296
+ "offsetX": {
48297
+ "value": 0,
48298
+ "unit": "px"
48299
+ },
48300
+ "offsetY": {
48301
+ "value": 8,
48302
+ "unit": "px"
48303
+ },
48304
+ "blur": {
48305
+ "value": 16,
48306
+ "unit": "px"
48307
+ },
48308
+ "spread": {
48309
+ "value": -4,
48310
+ "unit": "px"
48311
+ }
47722
48312
  },
47723
48313
  {
47724
48314
  "color": "{base.color.neutral.0}",
47725
48315
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "4px",
47728
- "blur": "32px",
47729
- "spread": "-4px"
48316
+ "offsetX": {
48317
+ "value": 0,
48318
+ "unit": "px"
48319
+ },
48320
+ "offsetY": {
48321
+ "value": 4,
48322
+ "unit": "px"
48323
+ },
48324
+ "blur": {
48325
+ "value": 32,
48326
+ "unit": "px"
48327
+ },
48328
+ "spread": {
48329
+ "value": -4,
48330
+ "unit": "px"
48331
+ }
47730
48332
  },
47731
48333
  {
47732
48334
  "color": "{base.color.neutral.0}",
47733
48335
  "alpha": 0.4,
47734
- "offsetX": "0px",
47735
- "offsetY": "24px",
47736
- "blur": "48px",
47737
- "spread": "-12px"
48336
+ "offsetX": {
48337
+ "value": 0,
48338
+ "unit": "px"
48339
+ },
48340
+ "offsetY": {
48341
+ "value": 24,
48342
+ "unit": "px"
48343
+ },
48344
+ "blur": {
48345
+ "value": 48,
48346
+ "unit": "px"
48347
+ },
48348
+ "spread": {
48349
+ "value": -12,
48350
+ "unit": "px"
48351
+ }
47738
48352
  },
47739
48353
  {
47740
48354
  "color": "{base.color.neutral.0}",
47741
48355
  "alpha": 0.4,
47742
- "offsetX": "0px",
47743
- "offsetY": "48px",
47744
- "blur": "96px",
47745
- "spread": "-24px"
48356
+ "offsetX": {
48357
+ "value": 0,
48358
+ "unit": "px"
48359
+ },
48360
+ "offsetY": {
48361
+ "value": 48,
48362
+ "unit": "px"
48363
+ },
48364
+ "blur": {
48365
+ "value": 96,
48366
+ "unit": "px"
48367
+ },
48368
+ "spread": {
48369
+ "value": -24,
48370
+ "unit": "px"
48371
+ }
47746
48372
  }
47747
48373
  ],
47748
48374
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47749
48375
  "isSource": true,
47750
48376
  "$type": "shadow"
47751
48377
  }
48378
+ },
48379
+ "org.primer.llm": {
48380
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48381
+ "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."
47752
48382
  }
47753
48383
  },
47754
48384
  "key": "{shadow.floating.medium}"
@@ -47756,8 +48386,9 @@
47756
48386
  "name": "shadow-floating-medium",
47757
48387
  "attributes": {},
47758
48388
  "path": ["shadow", "floating", "medium"],
47759
- "value": "0px 0px 0px 1px #454c54, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
47760
- "type": "shadow"
48389
+ "value": "0 0 0 1px #454c54, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
48390
+ "type": "shadow",
48391
+ "description": "Medium floating shadow for popovers and action menus"
47761
48392
  },
47762
48393
  "shadow-floating-small": {
47763
48394
  "key": "{shadow.floating.small}",
@@ -47772,26 +48403,62 @@
47772
48403
  {
47773
48404
  "color": "#454c54",
47774
48405
  "alpha": 1,
47775
- "offsetX": "0px",
47776
- "offsetY": "0px",
47777
- "blur": "0px",
47778
- "spread": "1px"
48406
+ "offsetX": {
48407
+ "value": 0,
48408
+ "unit": "px"
48409
+ },
48410
+ "offsetY": {
48411
+ "value": 0,
48412
+ "unit": "px"
48413
+ },
48414
+ "blur": {
48415
+ "value": 0,
48416
+ "unit": "px"
48417
+ },
48418
+ "spread": {
48419
+ "value": 1,
48420
+ "unit": "px"
48421
+ }
47779
48422
  },
47780
48423
  {
47781
48424
  "color": "#ffffff",
47782
48425
  "alpha": 0.4,
47783
- "offsetX": "0px",
47784
- "offsetY": "6px",
47785
- "blur": "12px",
47786
- "spread": "-3px"
48426
+ "offsetX": {
48427
+ "value": 0,
48428
+ "unit": "px"
48429
+ },
48430
+ "offsetY": {
48431
+ "value": 6,
48432
+ "unit": "px"
48433
+ },
48434
+ "blur": {
48435
+ "value": 12,
48436
+ "unit": "px"
48437
+ },
48438
+ "spread": {
48439
+ "value": -3,
48440
+ "unit": "px"
48441
+ }
47787
48442
  },
47788
48443
  {
47789
48444
  "color": "#ffffff",
47790
48445
  "alpha": 0.4,
47791
- "offsetX": "0px",
47792
- "offsetY": "6px",
47793
- "blur": "18px",
47794
- "spread": "0px"
48446
+ "offsetX": {
48447
+ "value": 0,
48448
+ "unit": "px"
48449
+ },
48450
+ "offsetY": {
48451
+ "value": 6,
48452
+ "unit": "px"
48453
+ },
48454
+ "blur": {
48455
+ "value": 18,
48456
+ "unit": "px"
48457
+ },
48458
+ "spread": {
48459
+ "value": 0,
48460
+ "unit": "px"
48461
+ }
47795
48462
  }
47796
48463
  ],
47797
48464
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47811,26 +48478,62 @@
47811
48478
  {
47812
48479
  "color": "{overlay.borderColor}",
47813
48480
  "alpha": 0.5,
47814
- "offsetX": "0px",
47815
- "offsetY": "0px",
47816
- "blur": "0px",
47817
- "spread": "1px"
48481
+ "offsetX": {
48482
+ "value": 0,
48483
+ "unit": "px"
48484
+ },
48485
+ "offsetY": {
48486
+ "value": 0,
48487
+ "unit": "px"
48488
+ },
48489
+ "blur": {
48490
+ "value": 0,
48491
+ "unit": "px"
48492
+ },
48493
+ "spread": {
48494
+ "value": 1,
48495
+ "unit": "px"
48496
+ }
47818
48497
  },
47819
48498
  {
47820
48499
  "color": "{base.color.neutral.12}",
47821
48500
  "alpha": 0.04,
47822
- "offsetX": "0px",
47823
- "offsetY": "6px",
47824
- "blur": "12px",
47825
- "spread": "-3px"
48501
+ "offsetX": {
48502
+ "value": 0,
48503
+ "unit": "px"
48504
+ },
48505
+ "offsetY": {
48506
+ "value": 6,
48507
+ "unit": "px"
48508
+ },
48509
+ "blur": {
48510
+ "value": 12,
48511
+ "unit": "px"
48512
+ },
48513
+ "spread": {
48514
+ "value": -3,
48515
+ "unit": "px"
48516
+ }
47826
48517
  },
47827
48518
  {
47828
48519
  "color": "{base.color.neutral.12}",
47829
48520
  "alpha": 0.12,
47830
- "offsetX": "0px",
47831
- "offsetY": "6px",
47832
- "blur": "18px",
47833
- "spread": "0px"
48521
+ "offsetX": {
48522
+ "value": 0,
48523
+ "unit": "px"
48524
+ },
48525
+ "offsetY": {
48526
+ "value": 6,
48527
+ "unit": "px"
48528
+ },
48529
+ "blur": {
48530
+ "value": 18,
48531
+ "unit": "px"
48532
+ },
48533
+ "spread": {
48534
+ "value": 0,
48535
+ "unit": "px"
48536
+ }
47834
48537
  }
47835
48538
  ],
47836
48539
  "$type": "shadow",
@@ -47846,26 +48549,62 @@
47846
48549
  {
47847
48550
  "color": "{overlay.borderColor}",
47848
48551
  "alpha": 1,
47849
- "offsetX": "0px",
47850
- "offsetY": "0px",
47851
- "blur": "0px",
47852
- "spread": "1px"
48552
+ "offsetX": {
48553
+ "value": 0,
48554
+ "unit": "px"
48555
+ },
48556
+ "offsetY": {
48557
+ "value": 0,
48558
+ "unit": "px"
48559
+ },
48560
+ "blur": {
48561
+ "value": 0,
48562
+ "unit": "px"
48563
+ },
48564
+ "spread": {
48565
+ "value": 1,
48566
+ "unit": "px"
48567
+ }
47853
48568
  },
47854
48569
  {
47855
48570
  "color": "{base.color.neutral.0}",
47856
48571
  "alpha": 0.4,
47857
- "offsetX": "0px",
47858
- "offsetY": "6px",
47859
- "blur": "12px",
47860
- "spread": "-3px"
48572
+ "offsetX": {
48573
+ "value": 0,
48574
+ "unit": "px"
48575
+ },
48576
+ "offsetY": {
48577
+ "value": 6,
48578
+ "unit": "px"
48579
+ },
48580
+ "blur": {
48581
+ "value": 12,
48582
+ "unit": "px"
48583
+ },
48584
+ "spread": {
48585
+ "value": -3,
48586
+ "unit": "px"
48587
+ }
47861
48588
  },
47862
48589
  {
47863
48590
  "color": "{base.color.neutral.0}",
47864
48591
  "alpha": 0.4,
47865
- "offsetX": "0px",
47866
- "offsetY": "6px",
47867
- "blur": "18px",
47868
- "spread": "0px"
48592
+ "offsetX": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "offsetY": {
48597
+ "value": 6,
48598
+ "unit": "px"
48599
+ },
48600
+ "blur": {
48601
+ "value": 18,
48602
+ "unit": "px"
48603
+ },
48604
+ "spread": {
48605
+ "value": 0,
48606
+ "unit": "px"
48607
+ }
47869
48608
  }
47870
48609
  ],
47871
48610
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47883,7 +48622,7 @@
47883
48622
  "name": "shadow-floating-small",
47884
48623
  "attributes": {},
47885
48624
  "path": ["shadow", "floating", "small"],
47886
- "value": "0px 0px 0px 1px #454c5480, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
48625
+ "value": "0 0 0 1px #454c5480, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47887
48626
  "type": "shadow",
47888
48627
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47889
48628
  },
@@ -47900,24 +48639,52 @@
47900
48639
  {
47901
48640
  "color": "#454c54",
47902
48641
  "alpha": 1,
47903
- "offsetX": "0px",
47904
- "offsetY": "0px",
47905
- "blur": "0px",
47906
- "spread": "1px"
48642
+ "offsetX": {
48643
+ "value": 0,
48644
+ "unit": "px"
48645
+ },
48646
+ "offsetY": {
48647
+ "value": 0,
48648
+ "unit": "px"
48649
+ },
48650
+ "blur": {
48651
+ "value": 0,
48652
+ "unit": "px"
48653
+ },
48654
+ "spread": {
48655
+ "value": 1,
48656
+ "unit": "px"
48657
+ }
47907
48658
  },
47908
48659
  {
47909
48660
  "color": "#ffffff",
47910
48661
  "alpha": 1,
47911
- "offsetX": "0px",
47912
- "offsetY": "32px",
47913
- "blur": "64px",
47914
- "spread": "0px"
48662
+ "offsetX": {
48663
+ "value": 0,
48664
+ "unit": "px"
48665
+ },
48666
+ "offsetY": {
48667
+ "value": 32,
48668
+ "unit": "px"
48669
+ },
48670
+ "blur": {
48671
+ "value": 64,
48672
+ "unit": "px"
48673
+ },
48674
+ "spread": {
48675
+ "value": 0,
48676
+ "unit": "px"
48677
+ }
47915
48678
  }
47916
48679
  ],
47917
48680
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47918
48681
  "isSource": true,
47919
48682
  "$type": "shadow"
47920
48683
  }
48684
+ },
48685
+ "org.primer.llm": {
48686
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48687
+ "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."
47921
48688
  }
47922
48689
  },
47923
48690
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47927,21 +48694,46 @@
47927
48694
  {
47928
48695
  "color": "{overlay.borderColor}",
47929
48696
  "alpha": 0,
47930
- "offsetX": "0px",
47931
- "offsetY": "0px",
47932
- "blur": "0px",
47933
- "spread": "1px"
48697
+ "offsetX": {
48698
+ "value": 0,
48699
+ "unit": "px"
48700
+ },
48701
+ "offsetY": {
48702
+ "value": 0,
48703
+ "unit": "px"
48704
+ },
48705
+ "blur": {
48706
+ "value": 0,
48707
+ "unit": "px"
48708
+ },
48709
+ "spread": {
48710
+ "value": 1,
48711
+ "unit": "px"
48712
+ }
47934
48713
  },
47935
48714
  {
47936
48715
  "color": "{base.color.neutral.12}",
47937
48716
  "alpha": 0.32,
47938
- "offsetX": "0px",
47939
- "offsetY": "56px",
47940
- "blur": "112px",
47941
- "spread": "0px"
48717
+ "offsetX": {
48718
+ "value": 0,
48719
+ "unit": "px"
48720
+ },
48721
+ "offsetY": {
48722
+ "value": 56,
48723
+ "unit": "px"
48724
+ },
48725
+ "blur": {
48726
+ "value": 112,
48727
+ "unit": "px"
48728
+ },
48729
+ "spread": {
48730
+ "value": 0,
48731
+ "unit": "px"
48732
+ }
47942
48733
  }
47943
48734
  ],
47944
48735
  "$type": "shadow",
48736
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47945
48737
  "$extensions": {
47946
48738
  "org.primer.figma": {
47947
48739
  "collection": "mode",
@@ -47953,24 +48745,52 @@
47953
48745
  {
47954
48746
  "color": "{overlay.borderColor}",
47955
48747
  "alpha": 1,
47956
- "offsetX": "0px",
47957
- "offsetY": "0px",
47958
- "blur": "0px",
47959
- "spread": "1px"
48748
+ "offsetX": {
48749
+ "value": 0,
48750
+ "unit": "px"
48751
+ },
48752
+ "offsetY": {
48753
+ "value": 0,
48754
+ "unit": "px"
48755
+ },
48756
+ "blur": {
48757
+ "value": 0,
48758
+ "unit": "px"
48759
+ },
48760
+ "spread": {
48761
+ "value": 1,
48762
+ "unit": "px"
48763
+ }
47960
48764
  },
47961
48765
  {
47962
48766
  "color": "{base.color.neutral.0}",
47963
48767
  "alpha": 1,
47964
- "offsetX": "0px",
47965
- "offsetY": "32px",
47966
- "blur": "64px",
47967
- "spread": "0px"
48768
+ "offsetX": {
48769
+ "value": 0,
48770
+ "unit": "px"
48771
+ },
48772
+ "offsetY": {
48773
+ "value": 32,
48774
+ "unit": "px"
48775
+ },
48776
+ "blur": {
48777
+ "value": 64,
48778
+ "unit": "px"
48779
+ },
48780
+ "spread": {
48781
+ "value": 0,
48782
+ "unit": "px"
48783
+ }
47968
48784
  }
47969
48785
  ],
47970
48786
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47971
48787
  "isSource": true,
47972
48788
  "$type": "shadow"
47973
48789
  }
48790
+ },
48791
+ "org.primer.llm": {
48792
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48793
+ "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."
47974
48794
  }
47975
48795
  },
47976
48796
  "key": "{shadow.floating.xlarge}"
@@ -47978,8 +48798,9 @@
47978
48798
  "name": "shadow-floating-xlarge",
47979
48799
  "attributes": {},
47980
48800
  "path": ["shadow", "floating", "xlarge"],
47981
- "value": "0px 0px 0px 1px #454c54, 0px 56px 112px 0px #25292e52",
47982
- "type": "shadow"
48801
+ "value": "0 0 0 1px #454c54, 0 56px 112px 0 #25292e52",
48802
+ "type": "shadow",
48803
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47983
48804
  },
47984
48805
  "shadow-inset": {
47985
48806
  "key": "{shadow.inset}",
@@ -47993,16 +48814,32 @@
47993
48814
  "$value": {
47994
48815
  "color": "#ffffff",
47995
48816
  "alpha": 0.24,
47996
- "offsetX": "0px",
47997
- "offsetY": "1px",
47998
- "blur": "0px",
47999
- "spread": "0px",
48817
+ "offsetX": {
48818
+ "value": 0,
48819
+ "unit": "px"
48820
+ },
48821
+ "offsetY": {
48822
+ "value": 1,
48823
+ "unit": "px"
48824
+ },
48825
+ "blur": {
48826
+ "value": 0,
48827
+ "unit": "px"
48828
+ },
48829
+ "spread": {
48830
+ "value": 0,
48831
+ "unit": "px"
48832
+ },
48000
48833
  "inset": true
48001
48834
  },
48002
48835
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48003
48836
  "isSource": true,
48004
48837
  "$type": "shadow"
48005
48838
  }
48839
+ },
48840
+ "org.primer.llm": {
48841
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48842
+ "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."
48006
48843
  }
48007
48844
  },
48008
48845
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48011,13 +48848,26 @@
48011
48848
  "$value": {
48012
48849
  "color": "{base.color.neutral.13}",
48013
48850
  "alpha": 0.04,
48014
- "offsetX": "0px",
48015
- "offsetY": "1px",
48016
- "blur": "0px",
48017
- "spread": "0px",
48851
+ "offsetX": {
48852
+ "value": 0,
48853
+ "unit": "px"
48854
+ },
48855
+ "offsetY": {
48856
+ "value": 1,
48857
+ "unit": "px"
48858
+ },
48859
+ "blur": {
48860
+ "value": 0,
48861
+ "unit": "px"
48862
+ },
48863
+ "spread": {
48864
+ "value": 0,
48865
+ "unit": "px"
48866
+ },
48018
48867
  "inset": true
48019
48868
  },
48020
48869
  "$type": "shadow",
48870
+ "$description": "Inset shadow for recessed elements",
48021
48871
  "$extensions": {
48022
48872
  "org.primer.figma": {
48023
48873
  "collection": "mode",
@@ -48028,16 +48878,32 @@
48028
48878
  "$value": {
48029
48879
  "color": "{base.color.neutral.0}",
48030
48880
  "alpha": 0.24,
48031
- "offsetX": "0px",
48032
- "offsetY": "1px",
48033
- "blur": "0px",
48034
- "spread": "0px",
48881
+ "offsetX": {
48882
+ "value": 0,
48883
+ "unit": "px"
48884
+ },
48885
+ "offsetY": {
48886
+ "value": 1,
48887
+ "unit": "px"
48888
+ },
48889
+ "blur": {
48890
+ "value": 0,
48891
+ "unit": "px"
48892
+ },
48893
+ "spread": {
48894
+ "value": 0,
48895
+ "unit": "px"
48896
+ },
48035
48897
  "inset": true
48036
48898
  },
48037
48899
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48038
48900
  "isSource": true,
48039
48901
  "$type": "shadow"
48040
48902
  }
48903
+ },
48904
+ "org.primer.llm": {
48905
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48906
+ "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."
48041
48907
  }
48042
48908
  },
48043
48909
  "key": "{shadow.inset}"
@@ -48045,8 +48911,9 @@
48045
48911
  "name": "shadow-inset",
48046
48912
  "attributes": {},
48047
48913
  "path": ["shadow", "inset"],
48048
- "value": "inset 0px 1px 0px 0px #0104090a",
48049
- "type": "shadow"
48914
+ "value": "inset 0 1px 0 0 #0104090a",
48915
+ "type": "shadow",
48916
+ "description": "Inset shadow for recessed elements"
48050
48917
  },
48051
48918
  "shadow-resting-medium": {
48052
48919
  "key": "{shadow.resting.medium}",
@@ -48061,24 +48928,52 @@
48061
48928
  {
48062
48929
  "color": "#ffffff",
48063
48930
  "alpha": 0.4,
48064
- "offsetX": "0px",
48065
- "offsetY": "1px",
48066
- "blur": "1px",
48067
- "spread": "0px"
48931
+ "offsetX": {
48932
+ "value": 0,
48933
+ "unit": "px"
48934
+ },
48935
+ "offsetY": {
48936
+ "value": 1,
48937
+ "unit": "px"
48938
+ },
48939
+ "blur": {
48940
+ "value": 1,
48941
+ "unit": "px"
48942
+ },
48943
+ "spread": {
48944
+ "value": 0,
48945
+ "unit": "px"
48946
+ }
48068
48947
  },
48069
48948
  {
48070
48949
  "color": "#ffffff",
48071
48950
  "alpha": 0.8,
48072
- "offsetX": "0px",
48073
- "offsetY": "3px",
48074
- "blur": "6px",
48075
- "spread": "0px"
48951
+ "offsetX": {
48952
+ "value": 0,
48953
+ "unit": "px"
48954
+ },
48955
+ "offsetY": {
48956
+ "value": 3,
48957
+ "unit": "px"
48958
+ },
48959
+ "blur": {
48960
+ "value": 6,
48961
+ "unit": "px"
48962
+ },
48963
+ "spread": {
48964
+ "value": 0,
48965
+ "unit": "px"
48966
+ }
48076
48967
  }
48077
48968
  ],
48078
48969
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48079
48970
  "isSource": true,
48080
48971
  "$type": "shadow"
48081
48972
  }
48973
+ },
48974
+ "org.primer.llm": {
48975
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48976
+ "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."
48082
48977
  }
48083
48978
  },
48084
48979
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48088,21 +48983,46 @@
48088
48983
  {
48089
48984
  "color": "{base.color.neutral.12}",
48090
48985
  "alpha": 0.1,
48091
- "offsetX": "0px",
48092
- "offsetY": "1px",
48093
- "blur": "1px",
48094
- "spread": "0px"
48986
+ "offsetX": {
48987
+ "value": 0,
48988
+ "unit": "px"
48989
+ },
48990
+ "offsetY": {
48991
+ "value": 1,
48992
+ "unit": "px"
48993
+ },
48994
+ "blur": {
48995
+ "value": 1,
48996
+ "unit": "px"
48997
+ },
48998
+ "spread": {
48999
+ "value": 0,
49000
+ "unit": "px"
49001
+ }
48095
49002
  },
48096
49003
  {
48097
49004
  "color": "{base.color.neutral.12}",
48098
49005
  "alpha": 0.12,
48099
- "offsetX": "0px",
48100
- "offsetY": "3px",
48101
- "blur": "6px",
48102
- "spread": "0px"
49006
+ "offsetX": {
49007
+ "value": 0,
49008
+ "unit": "px"
49009
+ },
49010
+ "offsetY": {
49011
+ "value": 3,
49012
+ "unit": "px"
49013
+ },
49014
+ "blur": {
49015
+ "value": 6,
49016
+ "unit": "px"
49017
+ },
49018
+ "spread": {
49019
+ "value": 0,
49020
+ "unit": "px"
49021
+ }
48103
49022
  }
48104
49023
  ],
48105
49024
  "$type": "shadow",
49025
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48106
49026
  "$extensions": {
48107
49027
  "org.primer.figma": {
48108
49028
  "collection": "mode",
@@ -48114,24 +49034,52 @@
48114
49034
  {
48115
49035
  "color": "{base.color.neutral.0}",
48116
49036
  "alpha": 0.4,
48117
- "offsetX": "0px",
48118
- "offsetY": "1px",
48119
- "blur": "1px",
48120
- "spread": "0px"
49037
+ "offsetX": {
49038
+ "value": 0,
49039
+ "unit": "px"
49040
+ },
49041
+ "offsetY": {
49042
+ "value": 1,
49043
+ "unit": "px"
49044
+ },
49045
+ "blur": {
49046
+ "value": 1,
49047
+ "unit": "px"
49048
+ },
49049
+ "spread": {
49050
+ "value": 0,
49051
+ "unit": "px"
49052
+ }
48121
49053
  },
48122
49054
  {
48123
49055
  "color": "{base.color.neutral.0}",
48124
49056
  "alpha": 0.8,
48125
- "offsetX": "0px",
48126
- "offsetY": "3px",
48127
- "blur": "6px",
48128
- "spread": "0px"
49057
+ "offsetX": {
49058
+ "value": 0,
49059
+ "unit": "px"
49060
+ },
49061
+ "offsetY": {
49062
+ "value": 3,
49063
+ "unit": "px"
49064
+ },
49065
+ "blur": {
49066
+ "value": 6,
49067
+ "unit": "px"
49068
+ },
49069
+ "spread": {
49070
+ "value": 0,
49071
+ "unit": "px"
49072
+ }
48129
49073
  }
48130
49074
  ],
48131
49075
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48132
49076
  "isSource": true,
48133
49077
  "$type": "shadow"
48134
49078
  }
49079
+ },
49080
+ "org.primer.llm": {
49081
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49082
+ "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."
48135
49083
  }
48136
49084
  },
48137
49085
  "key": "{shadow.resting.medium}"
@@ -48139,8 +49087,9 @@
48139
49087
  "name": "shadow-resting-medium",
48140
49088
  "attributes": {},
48141
49089
  "path": ["shadow", "resting", "medium"],
48142
- "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
48143
- "type": "shadow"
49090
+ "value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
49091
+ "type": "shadow",
49092
+ "description": "Medium resting shadow for cards and elevated surfaces"
48144
49093
  },
48145
49094
  "shadow-resting-small": {
48146
49095
  "key": "{shadow.resting.small}",
@@ -48155,19 +49104,43 @@
48155
49104
  {
48156
49105
  "color": "#ffffff",
48157
49106
  "alpha": 0.6,
48158
- "offsetX": "0px",
48159
- "offsetY": "1px",
48160
- "blur": "1px",
48161
- "spread": "0px",
49107
+ "offsetX": {
49108
+ "value": 0,
49109
+ "unit": "px"
49110
+ },
49111
+ "offsetY": {
49112
+ "value": 1,
49113
+ "unit": "px"
49114
+ },
49115
+ "blur": {
49116
+ "value": 1,
49117
+ "unit": "px"
49118
+ },
49119
+ "spread": {
49120
+ "value": 0,
49121
+ "unit": "px"
49122
+ },
48162
49123
  "inset": false
48163
49124
  },
48164
49125
  {
48165
49126
  "color": "#ffffff",
48166
49127
  "alpha": 0.6,
48167
- "offsetX": "0px",
48168
- "offsetY": "1px",
48169
- "blur": "3px",
48170
- "spread": "0px",
49128
+ "offsetX": {
49129
+ "value": 0,
49130
+ "unit": "px"
49131
+ },
49132
+ "offsetY": {
49133
+ "value": 1,
49134
+ "unit": "px"
49135
+ },
49136
+ "blur": {
49137
+ "value": 3,
49138
+ "unit": "px"
49139
+ },
49140
+ "spread": {
49141
+ "value": 0,
49142
+ "unit": "px"
49143
+ },
48171
49144
  "inset": false
48172
49145
  }
48173
49146
  ],
@@ -48175,6 +49148,10 @@
48175
49148
  "isSource": true,
48176
49149
  "$type": "shadow"
48177
49150
  }
49151
+ },
49152
+ "org.primer.llm": {
49153
+ "usage": ["button", "interactive-card", "clickable-element"],
49154
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48178
49155
  }
48179
49156
  },
48180
49157
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48183,24 +49160,49 @@
48183
49160
  "$value": [
48184
49161
  {
48185
49162
  "color": "{base.color.neutral.13}",
48186
- "alpha": 0.06,
48187
- "offsetX": "0px",
48188
- "offsetY": "1px",
48189
- "blur": "1px",
48190
- "spread": "0px",
49163
+ "alpha": 0.04,
49164
+ "offsetX": {
49165
+ "value": 0,
49166
+ "unit": "px"
49167
+ },
49168
+ "offsetY": {
49169
+ "value": 1,
49170
+ "unit": "px"
49171
+ },
49172
+ "blur": {
49173
+ "value": 1,
49174
+ "unit": "px"
49175
+ },
49176
+ "spread": {
49177
+ "value": 0,
49178
+ "unit": "px"
49179
+ },
48191
49180
  "inset": false
48192
49181
  },
48193
49182
  {
48194
49183
  "color": "{base.color.neutral.13}",
48195
- "alpha": 0.06,
48196
- "offsetX": "0px",
48197
- "offsetY": "1px",
48198
- "blur": "3px",
48199
- "spread": "0px",
49184
+ "alpha": 0.03,
49185
+ "offsetX": {
49186
+ "value": 0,
49187
+ "unit": "px"
49188
+ },
49189
+ "offsetY": {
49190
+ "value": 1,
49191
+ "unit": "px"
49192
+ },
49193
+ "blur": {
49194
+ "value": 2,
49195
+ "unit": "px"
49196
+ },
49197
+ "spread": {
49198
+ "value": 0,
49199
+ "unit": "px"
49200
+ },
48200
49201
  "inset": false
48201
49202
  }
48202
49203
  ],
48203
49204
  "$type": "shadow",
49205
+ "$description": "Small resting shadow for buttons and interactive elements",
48204
49206
  "$extensions": {
48205
49207
  "org.primer.figma": {
48206
49208
  "collection": "mode",
@@ -48212,19 +49214,43 @@
48212
49214
  {
48213
49215
  "color": "{base.color.neutral.0}",
48214
49216
  "alpha": 0.6,
48215
- "offsetX": "0px",
48216
- "offsetY": "1px",
48217
- "blur": "1px",
48218
- "spread": "0px",
49217
+ "offsetX": {
49218
+ "value": 0,
49219
+ "unit": "px"
49220
+ },
49221
+ "offsetY": {
49222
+ "value": 1,
49223
+ "unit": "px"
49224
+ },
49225
+ "blur": {
49226
+ "value": 1,
49227
+ "unit": "px"
49228
+ },
49229
+ "spread": {
49230
+ "value": 0,
49231
+ "unit": "px"
49232
+ },
48219
49233
  "inset": false
48220
49234
  },
48221
49235
  {
48222
49236
  "color": "{base.color.neutral.0}",
48223
49237
  "alpha": 0.6,
48224
- "offsetX": "0px",
48225
- "offsetY": "1px",
48226
- "blur": "3px",
48227
- "spread": "0px",
49238
+ "offsetX": {
49239
+ "value": 0,
49240
+ "unit": "px"
49241
+ },
49242
+ "offsetY": {
49243
+ "value": 1,
49244
+ "unit": "px"
49245
+ },
49246
+ "blur": {
49247
+ "value": 3,
49248
+ "unit": "px"
49249
+ },
49250
+ "spread": {
49251
+ "value": 0,
49252
+ "unit": "px"
49253
+ },
48228
49254
  "inset": false
48229
49255
  }
48230
49256
  ],
@@ -48232,6 +49258,10 @@
48232
49258
  "isSource": true,
48233
49259
  "$type": "shadow"
48234
49260
  }
49261
+ },
49262
+ "org.primer.llm": {
49263
+ "usage": ["button", "interactive-card", "clickable-element"],
49264
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48235
49265
  }
48236
49266
  },
48237
49267
  "key": "{shadow.resting.small}"
@@ -48239,8 +49269,9 @@
48239
49269
  "name": "shadow-resting-small",
48240
49270
  "attributes": {},
48241
49271
  "path": ["shadow", "resting", "small"],
48242
- "value": "0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f",
48243
- "type": "shadow"
49272
+ "value": "0 1px 1px 0 #0104090a, 0 1px 2px 0 #01040908",
49273
+ "type": "shadow",
49274
+ "description": "Small resting shadow for buttons and interactive elements"
48244
49275
  },
48245
49276
  "shadow-resting-xsmall": {
48246
49277
  "key": "{shadow.resting.xsmall}",
@@ -48254,16 +49285,32 @@
48254
49285
  "$value": {
48255
49286
  "color": "#ffffff",
48256
49287
  "alpha": 0.8,
48257
- "offsetX": "0px",
48258
- "offsetY": "1px",
48259
- "blur": "1px",
48260
- "spread": "0px",
49288
+ "offsetX": {
49289
+ "value": 0,
49290
+ "unit": "px"
49291
+ },
49292
+ "offsetY": {
49293
+ "value": 1,
49294
+ "unit": "px"
49295
+ },
49296
+ "blur": {
49297
+ "value": 1,
49298
+ "unit": "px"
49299
+ },
49300
+ "spread": {
49301
+ "value": 0,
49302
+ "unit": "px"
49303
+ },
48261
49304
  "inset": false
48262
49305
  },
48263
49306
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48264
49307
  "isSource": true,
48265
49308
  "$type": "shadow"
48266
49309
  }
49310
+ },
49311
+ "org.primer.llm": {
49312
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49313
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48267
49314
  }
48268
49315
  },
48269
49316
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48271,14 +49318,27 @@
48271
49318
  "original": {
48272
49319
  "$value": {
48273
49320
  "color": "{base.color.neutral.13}",
48274
- "alpha": 0.06,
48275
- "offsetX": "0px",
48276
- "offsetY": "1px",
48277
- "blur": "1px",
48278
- "spread": "0px",
49321
+ "alpha": 0.05,
49322
+ "offsetX": {
49323
+ "value": 0,
49324
+ "unit": "px"
49325
+ },
49326
+ "offsetY": {
49327
+ "value": 1,
49328
+ "unit": "px"
49329
+ },
49330
+ "blur": {
49331
+ "value": 1,
49332
+ "unit": "px"
49333
+ },
49334
+ "spread": {
49335
+ "value": 0,
49336
+ "unit": "px"
49337
+ },
48279
49338
  "inset": false
48280
49339
  },
48281
49340
  "$type": "shadow",
49341
+ "$description": "Extra small resting shadow for minimal elevation",
48282
49342
  "$extensions": {
48283
49343
  "org.primer.figma": {
48284
49344
  "collection": "mode",
@@ -48289,16 +49349,32 @@
48289
49349
  "$value": {
48290
49350
  "color": "{base.color.neutral.0}",
48291
49351
  "alpha": 0.8,
48292
- "offsetX": "0px",
48293
- "offsetY": "1px",
48294
- "blur": "1px",
48295
- "spread": "0px",
49352
+ "offsetX": {
49353
+ "value": 0,
49354
+ "unit": "px"
49355
+ },
49356
+ "offsetY": {
49357
+ "value": 1,
49358
+ "unit": "px"
49359
+ },
49360
+ "blur": {
49361
+ "value": 1,
49362
+ "unit": "px"
49363
+ },
49364
+ "spread": {
49365
+ "value": 0,
49366
+ "unit": "px"
49367
+ },
48296
49368
  "inset": false
48297
49369
  },
48298
49370
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48299
49371
  "isSource": true,
48300
49372
  "$type": "shadow"
48301
49373
  }
49374
+ },
49375
+ "org.primer.llm": {
49376
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49377
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48302
49378
  }
48303
49379
  },
48304
49380
  "key": "{shadow.resting.xsmall}"
@@ -48306,8 +49382,9 @@
48306
49382
  "name": "shadow-resting-xsmall",
48307
49383
  "attributes": {},
48308
49384
  "path": ["shadow", "resting", "xsmall"],
48309
- "value": "0px 1px 1px 0px #0104090f",
48310
- "type": "shadow"
49385
+ "value": "0 1px 1px 0 #0104090d",
49386
+ "type": "shadow",
49387
+ "description": "Extra small resting shadow for minimal elevation"
48311
49388
  },
48312
49389
  "sideNav-bgColor-selected": {
48313
49390
  "key": "{sideNav.bgColor.selected}",