@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
@@ -178,10 +178,22 @@
178
178
  {
179
179
  "color": "#0d1117",
180
180
  "alpha": 1,
181
- "offsetX": "0px",
182
- "offsetY": "0px",
183
- "blur": "0px",
184
- "spread": "2px"
181
+ "offsetX": {
182
+ "value": 0,
183
+ "unit": "px"
184
+ },
185
+ "offsetY": {
186
+ "value": 0,
187
+ "unit": "px"
188
+ },
189
+ "blur": {
190
+ "value": 0,
191
+ "unit": "px"
192
+ },
193
+ "spread": {
194
+ "value": 2,
195
+ "unit": "px"
196
+ }
185
197
  }
186
198
  ],
187
199
  "filePath": "src/tokens/component/avatar.json5",
@@ -197,10 +209,22 @@
197
209
  {
198
210
  "color": "{base.color.neutral.1}",
199
211
  "alpha": 1,
200
- "offsetX": "0px",
201
- "offsetY": "0px",
202
- "blur": "0px",
203
- "spread": "2px"
212
+ "offsetX": {
213
+ "value": 0,
214
+ "unit": "px"
215
+ },
216
+ "offsetY": {
217
+ "value": 0,
218
+ "unit": "px"
219
+ },
220
+ "blur": {
221
+ "value": 0,
222
+ "unit": "px"
223
+ },
224
+ "spread": {
225
+ "value": 2,
226
+ "unit": "px"
227
+ }
204
228
  }
205
229
  ],
206
230
  "$type": "shadow",
@@ -215,10 +239,22 @@
215
239
  {
216
240
  "color": "{base.color.neutral.1}",
217
241
  "alpha": 1,
218
- "offsetX": "0px",
219
- "offsetY": "0px",
220
- "blur": "0px",
221
- "spread": "2px"
242
+ "offsetX": {
243
+ "value": 0,
244
+ "unit": "px"
245
+ },
246
+ "offsetY": {
247
+ "value": 0,
248
+ "unit": "px"
249
+ },
250
+ "blur": {
251
+ "value": 0,
252
+ "unit": "px"
253
+ },
254
+ "spread": {
255
+ "value": 2,
256
+ "unit": "px"
257
+ }
222
258
  }
223
259
  ],
224
260
  "filePath": "src/tokens/component/avatar.json5",
@@ -232,7 +268,7 @@
232
268
  "name": "avatar-shadow",
233
269
  "attributes": {},
234
270
  "path": ["avatar", "shadow"],
235
- "value": "0px 0px 0px 2px #0d1117",
271
+ "value": "0 0 0 2px #0d1117",
236
272
  "type": "shadow"
237
273
  },
238
274
  "avatarStack-fade-bgColor-default": {
@@ -549,6 +585,10 @@
549
585
  },
550
586
  "org.primer.overrides": {
551
587
  "dark": "#010409"
588
+ },
589
+ "org.primer.llm": {
590
+ "doNotUse": true,
591
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
552
592
  }
553
593
  },
554
594
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -565,6 +605,10 @@
565
605
  },
566
606
  "org.primer.overrides": {
567
607
  "dark": "{base.color.neutral.0}"
608
+ },
609
+ "org.primer.llm": {
610
+ "doNotUse": true,
611
+ "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
568
612
  }
569
613
  },
570
614
  "key": "{bgColor.black}"
@@ -2457,6 +2501,10 @@
2457
2501
  },
2458
2502
  "org.primer.overrides": {
2459
2503
  "dark": "#ffffff"
2504
+ },
2505
+ "org.primer.llm": {
2506
+ "doNotUse": true,
2507
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2460
2508
  }
2461
2509
  },
2462
2510
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2473,6 +2521,10 @@
2473
2521
  },
2474
2522
  "org.primer.overrides": {
2475
2523
  "dark": "{base.color.neutral.13}"
2524
+ },
2525
+ "org.primer.llm": {
2526
+ "doNotUse": true,
2527
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2476
2528
  }
2477
2529
  },
2478
2530
  "key": "{bgColor.white}"
@@ -6967,10 +7019,22 @@
6967
7019
  {
6968
7020
  "color": "#3d1300",
6969
7021
  "alpha": 0.2,
6970
- "offsetX": "0px",
6971
- "offsetY": "1px",
6972
- "blur": "0px",
6973
- "spread": "0px",
7022
+ "offsetX": {
7023
+ "value": 0,
7024
+ "unit": "px"
7025
+ },
7026
+ "offsetY": {
7027
+ "value": 1,
7028
+ "unit": "px"
7029
+ },
7030
+ "blur": {
7031
+ "value": 0,
7032
+ "unit": "px"
7033
+ },
7034
+ "spread": {
7035
+ "value": 0,
7036
+ "unit": "px"
7037
+ },
6974
7038
  "inset": true
6975
7039
  }
6976
7040
  ],
@@ -6983,10 +7047,22 @@
6983
7047
  {
6984
7048
  "color": "#00000000",
6985
7049
  "alpha": 0,
6986
- "offsetX": "0px",
6987
- "offsetY": "0px",
6988
- "blur": "0px",
6989
- "spread": "0px",
7050
+ "offsetX": {
7051
+ "value": 0,
7052
+ "unit": "px"
7053
+ },
7054
+ "offsetY": {
7055
+ "value": 0,
7056
+ "unit": "px"
7057
+ },
7058
+ "blur": {
7059
+ "value": 0,
7060
+ "unit": "px"
7061
+ },
7062
+ "spread": {
7063
+ "value": 0,
7064
+ "unit": "px"
7065
+ },
6990
7066
  "inset": false
6991
7067
  }
6992
7068
  ],
@@ -7003,10 +7079,22 @@
7003
7079
  {
7004
7080
  "color": "{base.color.transparent}",
7005
7081
  "alpha": 0,
7006
- "offsetX": "0px",
7007
- "offsetY": "0px",
7008
- "blur": "0px",
7009
- "spread": "0px",
7082
+ "offsetX": {
7083
+ "value": 0,
7084
+ "unit": "px"
7085
+ },
7086
+ "offsetY": {
7087
+ "value": 0,
7088
+ "unit": "px"
7089
+ },
7090
+ "blur": {
7091
+ "value": 0,
7092
+ "unit": "px"
7093
+ },
7094
+ "spread": {
7095
+ "value": 0,
7096
+ "unit": "px"
7097
+ },
7010
7098
  "inset": false
7011
7099
  }
7012
7100
  ],
@@ -7022,10 +7110,22 @@
7022
7110
  {
7023
7111
  "color": "{base.color.orange.9}",
7024
7112
  "alpha": 0.2,
7025
- "offsetX": "0px",
7026
- "offsetY": "1px",
7027
- "blur": "0px",
7028
- "spread": "0px",
7113
+ "offsetX": {
7114
+ "value": 0,
7115
+ "unit": "px"
7116
+ },
7117
+ "offsetY": {
7118
+ "value": 1,
7119
+ "unit": "px"
7120
+ },
7121
+ "blur": {
7122
+ "value": 0,
7123
+ "unit": "px"
7124
+ },
7125
+ "spread": {
7126
+ "value": 0,
7127
+ "unit": "px"
7128
+ },
7029
7129
  "inset": true
7030
7130
  }
7031
7131
  ],
@@ -7038,10 +7138,22 @@
7038
7138
  {
7039
7139
  "color": "{base.color.transparent}",
7040
7140
  "alpha": 0,
7041
- "offsetX": "0px",
7042
- "offsetY": "0px",
7043
- "blur": "0px",
7044
- "spread": "0px",
7141
+ "offsetX": {
7142
+ "value": 0,
7143
+ "unit": "px"
7144
+ },
7145
+ "offsetY": {
7146
+ "value": 0,
7147
+ "unit": "px"
7148
+ },
7149
+ "blur": {
7150
+ "value": 0,
7151
+ "unit": "px"
7152
+ },
7153
+ "spread": {
7154
+ "value": 0,
7155
+ "unit": "px"
7156
+ },
7045
7157
  "inset": false
7046
7158
  }
7047
7159
  ],
@@ -7056,7 +7168,7 @@
7056
7168
  "name": "button-danger-shadow-selected",
7057
7169
  "attributes": {},
7058
7170
  "path": ["button", "danger", "shadow", "selected"],
7059
- "value": "0px 0px 0px 0px #000000",
7171
+ "value": "0 0 0 0 #000000",
7060
7172
  "type": "shadow"
7061
7173
  },
7062
7174
  "button-default-bgColor-active": {
@@ -7430,10 +7542,22 @@
7430
7542
  {
7431
7543
  "color": "#00000000",
7432
7544
  "alpha": 0,
7433
- "offsetX": "0px",
7434
- "offsetY": "0px",
7435
- "blur": "0px",
7436
- "spread": "0px",
7545
+ "offsetX": {
7546
+ "value": 0,
7547
+ "unit": "px"
7548
+ },
7549
+ "offsetY": {
7550
+ "value": 0,
7551
+ "unit": "px"
7552
+ },
7553
+ "blur": {
7554
+ "value": 0,
7555
+ "unit": "px"
7556
+ },
7557
+ "spread": {
7558
+ "value": 0,
7559
+ "unit": "px"
7560
+ },
7437
7561
  "inset": false
7438
7562
  }
7439
7563
  ],
@@ -7450,10 +7574,22 @@
7450
7574
  {
7451
7575
  "color": "{base.color.transparent}",
7452
7576
  "alpha": 0,
7453
- "offsetX": "0px",
7454
- "offsetY": "0px",
7455
- "blur": "0px",
7456
- "spread": "0px",
7577
+ "offsetX": {
7578
+ "value": 0,
7579
+ "unit": "px"
7580
+ },
7581
+ "offsetY": {
7582
+ "value": 0,
7583
+ "unit": "px"
7584
+ },
7585
+ "blur": {
7586
+ "value": 0,
7587
+ "unit": "px"
7588
+ },
7589
+ "spread": {
7590
+ "value": 0,
7591
+ "unit": "px"
7592
+ },
7457
7593
  "inset": false
7458
7594
  }
7459
7595
  ],
@@ -7469,10 +7605,22 @@
7469
7605
  {
7470
7606
  "color": "{base.color.transparent}",
7471
7607
  "alpha": 0,
7472
- "offsetX": "0px",
7473
- "offsetY": "0px",
7474
- "blur": "0px",
7475
- "spread": "0px",
7608
+ "offsetX": {
7609
+ "value": 0,
7610
+ "unit": "px"
7611
+ },
7612
+ "offsetY": {
7613
+ "value": 0,
7614
+ "unit": "px"
7615
+ },
7616
+ "blur": {
7617
+ "value": 0,
7618
+ "unit": "px"
7619
+ },
7620
+ "spread": {
7621
+ "value": 0,
7622
+ "unit": "px"
7623
+ },
7476
7624
  "inset": false
7477
7625
  }
7478
7626
  ],
@@ -7487,7 +7635,7 @@
7487
7635
  "name": "button-default-shadow-resting",
7488
7636
  "attributes": {},
7489
7637
  "path": ["button", "default", "shadow", "resting"],
7490
- "value": "0px 0px 0px 0px #000000",
7638
+ "value": "0 0 0 0 #000000",
7491
7639
  "type": "shadow"
7492
7640
  },
7493
7641
  "button-inactive-bgColor": {
@@ -9189,10 +9337,22 @@
9189
9337
  {
9190
9338
  "color": "#00000000",
9191
9339
  "alpha": 0,
9192
- "offsetX": "0px",
9193
- "offsetY": "0px",
9194
- "blur": "0px",
9195
- "spread": "0px",
9340
+ "offsetX": {
9341
+ "value": 0,
9342
+ "unit": "px"
9343
+ },
9344
+ "offsetY": {
9345
+ "value": 0,
9346
+ "unit": "px"
9347
+ },
9348
+ "blur": {
9349
+ "value": 0,
9350
+ "unit": "px"
9351
+ },
9352
+ "spread": {
9353
+ "value": 0,
9354
+ "unit": "px"
9355
+ },
9196
9356
  "inset": false
9197
9357
  }
9198
9358
  ],
@@ -9209,10 +9369,22 @@
9209
9369
  {
9210
9370
  "color": "{base.color.transparent}",
9211
9371
  "alpha": 0,
9212
- "offsetX": "0px",
9213
- "offsetY": "0px",
9214
- "blur": "0px",
9215
- "spread": "0px",
9372
+ "offsetX": {
9373
+ "value": 0,
9374
+ "unit": "px"
9375
+ },
9376
+ "offsetY": {
9377
+ "value": 0,
9378
+ "unit": "px"
9379
+ },
9380
+ "blur": {
9381
+ "value": 0,
9382
+ "unit": "px"
9383
+ },
9384
+ "spread": {
9385
+ "value": 0,
9386
+ "unit": "px"
9387
+ },
9216
9388
  "inset": false
9217
9389
  }
9218
9390
  ],
@@ -9228,10 +9400,22 @@
9228
9400
  {
9229
9401
  "color": "{base.color.transparent}",
9230
9402
  "alpha": 0,
9231
- "offsetX": "0px",
9232
- "offsetY": "0px",
9233
- "blur": "0px",
9234
- "spread": "0px",
9403
+ "offsetX": {
9404
+ "value": 0,
9405
+ "unit": "px"
9406
+ },
9407
+ "offsetY": {
9408
+ "value": 0,
9409
+ "unit": "px"
9410
+ },
9411
+ "blur": {
9412
+ "value": 0,
9413
+ "unit": "px"
9414
+ },
9415
+ "spread": {
9416
+ "value": 0,
9417
+ "unit": "px"
9418
+ },
9235
9419
  "inset": false
9236
9420
  }
9237
9421
  ],
@@ -9246,7 +9430,7 @@
9246
9430
  "name": "button-outline-shadow-selected",
9247
9431
  "attributes": {},
9248
9432
  "path": ["button", "outline", "shadow", "selected"],
9249
- "value": "0px 0px 0px 0px #000000",
9433
+ "value": "0 0 0 0 #000000",
9250
9434
  "type": "shadow"
9251
9435
  },
9252
9436
  "button-primary-bgColor-active": {
@@ -10395,10 +10579,22 @@
10395
10579
  {
10396
10580
  "color": "#051d4d",
10397
10581
  "alpha": 0.3,
10398
- "offsetX": "0px",
10399
- "offsetY": "1px",
10400
- "blur": "0px",
10401
- "spread": "0px",
10582
+ "offsetX": {
10583
+ "value": 0,
10584
+ "unit": "px"
10585
+ },
10586
+ "offsetY": {
10587
+ "value": 1,
10588
+ "unit": "px"
10589
+ },
10590
+ "blur": {
10591
+ "value": 0,
10592
+ "unit": "px"
10593
+ },
10594
+ "spread": {
10595
+ "value": 0,
10596
+ "unit": "px"
10597
+ },
10402
10598
  "inset": true
10403
10599
  }
10404
10600
  ],
@@ -10411,10 +10607,22 @@
10411
10607
  {
10412
10608
  "color": "#051d4d",
10413
10609
  "alpha": 0.3,
10414
- "offsetX": "0px",
10415
- "offsetY": "1px",
10416
- "blur": "0px",
10417
- "spread": "0px",
10610
+ "offsetX": {
10611
+ "value": 0,
10612
+ "unit": "px"
10613
+ },
10614
+ "offsetY": {
10615
+ "value": 1,
10616
+ "unit": "px"
10617
+ },
10618
+ "blur": {
10619
+ "value": 0,
10620
+ "unit": "px"
10621
+ },
10622
+ "spread": {
10623
+ "value": 0,
10624
+ "unit": "px"
10625
+ },
10418
10626
  "inset": true
10419
10627
  }
10420
10628
  ],
@@ -10427,10 +10635,22 @@
10427
10635
  {
10428
10636
  "color": "#00000000",
10429
10637
  "alpha": 0,
10430
- "offsetX": "0px",
10431
- "offsetY": "0px",
10432
- "blur": "0px",
10433
- "spread": "0px",
10638
+ "offsetX": {
10639
+ "value": 0,
10640
+ "unit": "px"
10641
+ },
10642
+ "offsetY": {
10643
+ "value": 0,
10644
+ "unit": "px"
10645
+ },
10646
+ "blur": {
10647
+ "value": 0,
10648
+ "unit": "px"
10649
+ },
10650
+ "spread": {
10651
+ "value": 0,
10652
+ "unit": "px"
10653
+ },
10434
10654
  "inset": false
10435
10655
  }
10436
10656
  ],
@@ -10447,10 +10667,22 @@
10447
10667
  {
10448
10668
  "color": "{base.color.transparent}",
10449
10669
  "alpha": 0,
10450
- "offsetX": "0px",
10451
- "offsetY": "0px",
10452
- "blur": "0px",
10453
- "spread": "0px",
10670
+ "offsetX": {
10671
+ "value": 0,
10672
+ "unit": "px"
10673
+ },
10674
+ "offsetY": {
10675
+ "value": 0,
10676
+ "unit": "px"
10677
+ },
10678
+ "blur": {
10679
+ "value": 0,
10680
+ "unit": "px"
10681
+ },
10682
+ "spread": {
10683
+ "value": 0,
10684
+ "unit": "px"
10685
+ },
10454
10686
  "inset": false
10455
10687
  }
10456
10688
  ],
@@ -10466,10 +10698,22 @@
10466
10698
  {
10467
10699
  "color": "{base.color.blue.9}",
10468
10700
  "alpha": 0.3,
10469
- "offsetX": "0px",
10470
- "offsetY": "1px",
10471
- "blur": "0px",
10472
- "spread": "0px",
10701
+ "offsetX": {
10702
+ "value": 0,
10703
+ "unit": "px"
10704
+ },
10705
+ "offsetY": {
10706
+ "value": 1,
10707
+ "unit": "px"
10708
+ },
10709
+ "blur": {
10710
+ "value": 0,
10711
+ "unit": "px"
10712
+ },
10713
+ "spread": {
10714
+ "value": 0,
10715
+ "unit": "px"
10716
+ },
10473
10717
  "inset": true
10474
10718
  }
10475
10719
  ],
@@ -10482,10 +10726,22 @@
10482
10726
  {
10483
10727
  "color": "{base.color.blue.9}",
10484
10728
  "alpha": 0.3,
10485
- "offsetX": "0px",
10486
- "offsetY": "1px",
10487
- "blur": "0px",
10488
- "spread": "0px",
10729
+ "offsetX": {
10730
+ "value": 0,
10731
+ "unit": "px"
10732
+ },
10733
+ "offsetY": {
10734
+ "value": 1,
10735
+ "unit": "px"
10736
+ },
10737
+ "blur": {
10738
+ "value": 0,
10739
+ "unit": "px"
10740
+ },
10741
+ "spread": {
10742
+ "value": 0,
10743
+ "unit": "px"
10744
+ },
10489
10745
  "inset": true
10490
10746
  }
10491
10747
  ],
@@ -10498,10 +10754,22 @@
10498
10754
  {
10499
10755
  "color": "{base.color.transparent}",
10500
10756
  "alpha": 0,
10501
- "offsetX": "0px",
10502
- "offsetY": "0px",
10503
- "blur": "0px",
10504
- "spread": "0px",
10757
+ "offsetX": {
10758
+ "value": 0,
10759
+ "unit": "px"
10760
+ },
10761
+ "offsetY": {
10762
+ "value": 0,
10763
+ "unit": "px"
10764
+ },
10765
+ "blur": {
10766
+ "value": 0,
10767
+ "unit": "px"
10768
+ },
10769
+ "spread": {
10770
+ "value": 0,
10771
+ "unit": "px"
10772
+ },
10505
10773
  "inset": false
10506
10774
  }
10507
10775
  ],
@@ -10516,7 +10784,7 @@
10516
10784
  "name": "button-primary-shadow-selected",
10517
10785
  "attributes": {},
10518
10786
  "path": ["button", "primary", "shadow", "selected"],
10519
- "value": "0px 0px 0px 0px #000000",
10787
+ "value": "0 0 0 0 #000000",
10520
10788
  "type": "shadow"
10521
10789
  },
10522
10790
  "button-star-iconColor": {
@@ -37251,6 +37519,10 @@
37251
37519
  },
37252
37520
  "org.primer.overrides": {
37253
37521
  "dark": "#010409"
37522
+ },
37523
+ "org.primer.llm": {
37524
+ "doNotUse": true,
37525
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37254
37526
  }
37255
37527
  },
37256
37528
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37267,6 +37539,10 @@
37267
37539
  },
37268
37540
  "org.primer.overrides": {
37269
37541
  "dark": "{base.color.neutral.0}"
37542
+ },
37543
+ "org.primer.llm": {
37544
+ "doNotUse": true,
37545
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37270
37546
  }
37271
37547
  },
37272
37548
  "key": "{fgColor.black}"
@@ -38240,6 +38516,10 @@
38240
38516
  },
38241
38517
  "org.primer.overrides": {
38242
38518
  "dark": "#ffffff"
38519
+ },
38520
+ "org.primer.llm": {
38521
+ "doNotUse": true,
38522
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38243
38523
  }
38244
38524
  },
38245
38525
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38256,6 +38536,10 @@
38256
38536
  },
38257
38537
  "org.primer.overrides": {
38258
38538
  "dark": "{base.color.neutral.13}"
38539
+ },
38540
+ "org.primer.llm": {
38541
+ "doNotUse": true,
38542
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38259
38543
  }
38260
38544
  },
38261
38545
  "key": "{fgColor.white}"
@@ -38281,7 +38565,10 @@
38281
38565
  "$value": {
38282
38566
  "color": "{focus.outlineColor}",
38283
38567
  "style": "solid",
38284
- "width": "2px"
38568
+ "width": {
38569
+ "value": 2,
38570
+ "unit": "px"
38571
+ }
38285
38572
  },
38286
38573
  "$type": "border",
38287
38574
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47454,18 +47741,42 @@
47454
47741
  {
47455
47742
  "color": "#3d444db3",
47456
47743
  "alpha": 1,
47457
- "offsetX": "0px",
47458
- "offsetY": "0px",
47459
- "blur": "0px",
47460
- "spread": "1px"
47744
+ "offsetX": {
47745
+ "value": 0,
47746
+ "unit": "px"
47747
+ },
47748
+ "offsetY": {
47749
+ "value": 0,
47750
+ "unit": "px"
47751
+ },
47752
+ "blur": {
47753
+ "value": 0,
47754
+ "unit": "px"
47755
+ },
47756
+ "spread": {
47757
+ "value": 1,
47758
+ "unit": "px"
47759
+ }
47461
47760
  },
47462
47761
  {
47463
47762
  "color": "#010409",
47464
47763
  "alpha": 1,
47465
- "offsetX": "0px",
47466
- "offsetY": "24px",
47467
- "blur": "48px",
47468
- "spread": "0px"
47764
+ "offsetX": {
47765
+ "value": 0,
47766
+ "unit": "px"
47767
+ },
47768
+ "offsetY": {
47769
+ "value": 24,
47770
+ "unit": "px"
47771
+ },
47772
+ "blur": {
47773
+ "value": 48,
47774
+ "unit": "px"
47775
+ },
47776
+ "spread": {
47777
+ "value": 0,
47778
+ "unit": "px"
47779
+ }
47469
47780
  }
47470
47781
  ],
47471
47782
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47485,18 +47796,42 @@
47485
47796
  {
47486
47797
  "color": "{overlay.borderColor}",
47487
47798
  "alpha": 1,
47488
- "offsetX": "0px",
47489
- "offsetY": "0px",
47490
- "blur": "0px",
47491
- "spread": "1px"
47799
+ "offsetX": {
47800
+ "value": 0,
47801
+ "unit": "px"
47802
+ },
47803
+ "offsetY": {
47804
+ "value": 0,
47805
+ "unit": "px"
47806
+ },
47807
+ "blur": {
47808
+ "value": 0,
47809
+ "unit": "px"
47810
+ },
47811
+ "spread": {
47812
+ "value": 1,
47813
+ "unit": "px"
47814
+ }
47492
47815
  },
47493
47816
  {
47494
47817
  "color": "{base.color.neutral.0}",
47495
47818
  "alpha": 1,
47496
- "offsetX": "0px",
47497
- "offsetY": "24px",
47498
- "blur": "48px",
47499
- "spread": "0px"
47819
+ "offsetX": {
47820
+ "value": 0,
47821
+ "unit": "px"
47822
+ },
47823
+ "offsetY": {
47824
+ "value": 24,
47825
+ "unit": "px"
47826
+ },
47827
+ "blur": {
47828
+ "value": 48,
47829
+ "unit": "px"
47830
+ },
47831
+ "spread": {
47832
+ "value": 0,
47833
+ "unit": "px"
47834
+ }
47500
47835
  }
47501
47836
  ],
47502
47837
  "$type": "shadow",
@@ -47512,18 +47847,42 @@
47512
47847
  {
47513
47848
  "color": "{overlay.borderColor}",
47514
47849
  "alpha": 1,
47515
- "offsetX": "0px",
47516
- "offsetY": "0px",
47517
- "blur": "0px",
47518
- "spread": "1px"
47850
+ "offsetX": {
47851
+ "value": 0,
47852
+ "unit": "px"
47853
+ },
47854
+ "offsetY": {
47855
+ "value": 0,
47856
+ "unit": "px"
47857
+ },
47858
+ "blur": {
47859
+ "value": 0,
47860
+ "unit": "px"
47861
+ },
47862
+ "spread": {
47863
+ "value": 1,
47864
+ "unit": "px"
47865
+ }
47519
47866
  },
47520
47867
  {
47521
47868
  "color": "{base.color.neutral.0}",
47522
47869
  "alpha": 1,
47523
- "offsetX": "0px",
47524
- "offsetY": "24px",
47525
- "blur": "48px",
47526
- "spread": "0px"
47870
+ "offsetX": {
47871
+ "value": 0,
47872
+ "unit": "px"
47873
+ },
47874
+ "offsetY": {
47875
+ "value": 24,
47876
+ "unit": "px"
47877
+ },
47878
+ "blur": {
47879
+ "value": 48,
47880
+ "unit": "px"
47881
+ },
47882
+ "spread": {
47883
+ "value": 0,
47884
+ "unit": "px"
47885
+ }
47527
47886
  }
47528
47887
  ],
47529
47888
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47541,7 +47900,7 @@
47541
47900
  "name": "shadow-floating-large",
47542
47901
  "attributes": {},
47543
47902
  "path": ["shadow", "floating", "large"],
47544
- "value": "0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409",
47903
+ "value": "0 0 0 1px #3d444d, 0 24px 48px 0 #010409",
47545
47904
  "type": "shadow",
47546
47905
  "description": "Large floating shadow for modals and dialogs"
47547
47906
  },
@@ -47555,24 +47914,52 @@
47555
47914
  {
47556
47915
  "color": "#010409",
47557
47916
  "alpha": 0.4,
47558
- "offsetX": "0px",
47559
- "offsetY": "6px",
47560
- "blur": "12px",
47561
- "spread": "-3px"
47917
+ "offsetX": {
47918
+ "value": 0,
47919
+ "unit": "px"
47920
+ },
47921
+ "offsetY": {
47922
+ "value": 6,
47923
+ "unit": "px"
47924
+ },
47925
+ "blur": {
47926
+ "value": 12,
47927
+ "unit": "px"
47928
+ },
47929
+ "spread": {
47930
+ "value": -3,
47931
+ "unit": "px"
47932
+ }
47562
47933
  },
47563
47934
  {
47564
47935
  "color": "#010409",
47565
47936
  "alpha": 0.4,
47566
- "offsetX": "0px",
47567
- "offsetY": "6px",
47568
- "blur": "18px",
47569
- "spread": "0px"
47937
+ "offsetX": {
47938
+ "value": 0,
47939
+ "unit": "px"
47940
+ },
47941
+ "offsetY": {
47942
+ "value": 6,
47943
+ "unit": "px"
47944
+ },
47945
+ "blur": {
47946
+ "value": 18,
47947
+ "unit": "px"
47948
+ },
47949
+ "spread": {
47950
+ "value": 0,
47951
+ "unit": "px"
47952
+ }
47570
47953
  }
47571
47954
  ],
47572
47955
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47573
47956
  "isSource": true,
47574
47957
  "$type": "shadow"
47575
47958
  }
47959
+ },
47960
+ "org.primer.llm": {
47961
+ "usage": ["legacy-component", "backward-compatibility"],
47962
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47576
47963
  }
47577
47964
  },
47578
47965
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47582,21 +47969,46 @@
47582
47969
  {
47583
47970
  "color": "{base.color.neutral.0}",
47584
47971
  "alpha": 0.4,
47585
- "offsetX": "0px",
47586
- "offsetY": "6px",
47587
- "blur": "12px",
47588
- "spread": "-3px"
47972
+ "offsetX": {
47973
+ "value": 0,
47974
+ "unit": "px"
47975
+ },
47976
+ "offsetY": {
47977
+ "value": 6,
47978
+ "unit": "px"
47979
+ },
47980
+ "blur": {
47981
+ "value": 12,
47982
+ "unit": "px"
47983
+ },
47984
+ "spread": {
47985
+ "value": -3,
47986
+ "unit": "px"
47987
+ }
47589
47988
  },
47590
47989
  {
47591
47990
  "color": "{base.color.neutral.0}",
47592
47991
  "alpha": 0.4,
47593
- "offsetX": "0px",
47594
- "offsetY": "6px",
47595
- "blur": "18px",
47596
- "spread": "0px"
47992
+ "offsetX": {
47993
+ "value": 0,
47994
+ "unit": "px"
47995
+ },
47996
+ "offsetY": {
47997
+ "value": 6,
47998
+ "unit": "px"
47999
+ },
48000
+ "blur": {
48001
+ "value": 18,
48002
+ "unit": "px"
48003
+ },
48004
+ "spread": {
48005
+ "value": 0,
48006
+ "unit": "px"
48007
+ }
47597
48008
  }
47598
48009
  ],
47599
48010
  "$type": "shadow",
48011
+ "$description": "Legacy floating shadow for backward compatibility",
47600
48012
  "$extensions": {
47601
48013
  "org.primer.figma": {},
47602
48014
  "org.primer.overrides": {
@@ -47605,24 +48017,52 @@
47605
48017
  {
47606
48018
  "color": "{base.color.neutral.0}",
47607
48019
  "alpha": 0.4,
47608
- "offsetX": "0px",
47609
- "offsetY": "6px",
47610
- "blur": "12px",
47611
- "spread": "-3px"
48020
+ "offsetX": {
48021
+ "value": 0,
48022
+ "unit": "px"
48023
+ },
48024
+ "offsetY": {
48025
+ "value": 6,
48026
+ "unit": "px"
48027
+ },
48028
+ "blur": {
48029
+ "value": 12,
48030
+ "unit": "px"
48031
+ },
48032
+ "spread": {
48033
+ "value": -3,
48034
+ "unit": "px"
48035
+ }
47612
48036
  },
47613
48037
  {
47614
48038
  "color": "{base.color.neutral.0}",
47615
48039
  "alpha": 0.4,
47616
- "offsetX": "0px",
47617
- "offsetY": "6px",
47618
- "blur": "18px",
47619
- "spread": "0px"
48040
+ "offsetX": {
48041
+ "value": 0,
48042
+ "unit": "px"
48043
+ },
48044
+ "offsetY": {
48045
+ "value": 6,
48046
+ "unit": "px"
48047
+ },
48048
+ "blur": {
48049
+ "value": 18,
48050
+ "unit": "px"
48051
+ },
48052
+ "spread": {
48053
+ "value": 0,
48054
+ "unit": "px"
48055
+ }
47620
48056
  }
47621
48057
  ],
47622
48058
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47623
48059
  "isSource": true,
47624
48060
  "$type": "shadow"
47625
48061
  }
48062
+ },
48063
+ "org.primer.llm": {
48064
+ "usage": ["legacy-component", "backward-compatibility"],
48065
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47626
48066
  }
47627
48067
  },
47628
48068
  "key": "{shadow.floating.legacy}"
@@ -47630,8 +48070,9 @@
47630
48070
  "name": "shadow-floating-legacy",
47631
48071
  "attributes": {},
47632
48072
  "path": ["shadow", "floating", "legacy"],
47633
- "value": "0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
47634
- "type": "shadow"
48073
+ "value": "0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
48074
+ "type": "shadow",
48075
+ "description": "Legacy floating shadow for backward compatibility"
47635
48076
  },
47636
48077
  "shadow-floating-medium": {
47637
48078
  "key": "{shadow.floating.medium}",
@@ -47646,48 +48087,112 @@
47646
48087
  {
47647
48088
  "color": "#3d444db3",
47648
48089
  "alpha": 1,
47649
- "offsetX": "0px",
47650
- "offsetY": "0px",
47651
- "blur": "0px",
47652
- "spread": "1px"
48090
+ "offsetX": {
48091
+ "value": 0,
48092
+ "unit": "px"
48093
+ },
48094
+ "offsetY": {
48095
+ "value": 0,
48096
+ "unit": "px"
48097
+ },
48098
+ "blur": {
48099
+ "value": 0,
48100
+ "unit": "px"
48101
+ },
48102
+ "spread": {
48103
+ "value": 1,
48104
+ "unit": "px"
48105
+ }
47653
48106
  },
47654
48107
  {
47655
48108
  "color": "#010409",
47656
48109
  "alpha": 0.4,
47657
- "offsetX": "0px",
47658
- "offsetY": "8px",
47659
- "blur": "16px",
47660
- "spread": "-4px"
48110
+ "offsetX": {
48111
+ "value": 0,
48112
+ "unit": "px"
48113
+ },
48114
+ "offsetY": {
48115
+ "value": 8,
48116
+ "unit": "px"
48117
+ },
48118
+ "blur": {
48119
+ "value": 16,
48120
+ "unit": "px"
48121
+ },
48122
+ "spread": {
48123
+ "value": -4,
48124
+ "unit": "px"
48125
+ }
47661
48126
  },
47662
48127
  {
47663
48128
  "color": "#010409",
47664
48129
  "alpha": 0.4,
47665
- "offsetX": "0px",
47666
- "offsetY": "4px",
47667
- "blur": "32px",
47668
- "spread": "-4px"
48130
+ "offsetX": {
48131
+ "value": 0,
48132
+ "unit": "px"
48133
+ },
48134
+ "offsetY": {
48135
+ "value": 4,
48136
+ "unit": "px"
48137
+ },
48138
+ "blur": {
48139
+ "value": 32,
48140
+ "unit": "px"
48141
+ },
48142
+ "spread": {
48143
+ "value": -4,
48144
+ "unit": "px"
48145
+ }
47669
48146
  },
47670
48147
  {
47671
48148
  "color": "#010409",
47672
48149
  "alpha": 0.4,
47673
- "offsetX": "0px",
47674
- "offsetY": "24px",
47675
- "blur": "48px",
47676
- "spread": "-12px"
48150
+ "offsetX": {
48151
+ "value": 0,
48152
+ "unit": "px"
48153
+ },
48154
+ "offsetY": {
48155
+ "value": 24,
48156
+ "unit": "px"
48157
+ },
48158
+ "blur": {
48159
+ "value": 48,
48160
+ "unit": "px"
48161
+ },
48162
+ "spread": {
48163
+ "value": -12,
48164
+ "unit": "px"
48165
+ }
47677
48166
  },
47678
48167
  {
47679
48168
  "color": "#010409",
47680
48169
  "alpha": 0.4,
47681
- "offsetX": "0px",
47682
- "offsetY": "48px",
47683
- "blur": "96px",
47684
- "spread": "-24px"
48170
+ "offsetX": {
48171
+ "value": 0,
48172
+ "unit": "px"
48173
+ },
48174
+ "offsetY": {
48175
+ "value": 48,
48176
+ "unit": "px"
48177
+ },
48178
+ "blur": {
48179
+ "value": 96,
48180
+ "unit": "px"
48181
+ },
48182
+ "spread": {
48183
+ "value": -24,
48184
+ "unit": "px"
48185
+ }
47685
48186
  }
47686
48187
  ],
47687
48188
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47688
48189
  "isSource": true,
47689
48190
  "$type": "shadow"
47690
48191
  }
48192
+ },
48193
+ "org.primer.llm": {
48194
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48195
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47691
48196
  }
47692
48197
  },
47693
48198
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47697,45 +48202,106 @@
47697
48202
  {
47698
48203
  "color": "{overlay.borderColor}",
47699
48204
  "alpha": 1,
47700
- "offsetX": "0px",
47701
- "offsetY": "0px",
47702
- "blur": "0px",
47703
- "spread": "1px"
48205
+ "offsetX": {
48206
+ "value": 0,
48207
+ "unit": "px"
48208
+ },
48209
+ "offsetY": {
48210
+ "value": 0,
48211
+ "unit": "px"
48212
+ },
48213
+ "blur": {
48214
+ "value": 0,
48215
+ "unit": "px"
48216
+ },
48217
+ "spread": {
48218
+ "value": 1,
48219
+ "unit": "px"
48220
+ }
47704
48221
  },
47705
48222
  {
47706
48223
  "color": "{base.color.neutral.0}",
47707
48224
  "alpha": 0.4,
47708
- "offsetX": "0px",
47709
- "offsetY": "8px",
47710
- "blur": "16px",
47711
- "spread": "-4px"
48225
+ "offsetX": {
48226
+ "value": 0,
48227
+ "unit": "px"
48228
+ },
48229
+ "offsetY": {
48230
+ "value": 8,
48231
+ "unit": "px"
48232
+ },
48233
+ "blur": {
48234
+ "value": 16,
48235
+ "unit": "px"
48236
+ },
48237
+ "spread": {
48238
+ "value": -4,
48239
+ "unit": "px"
48240
+ }
47712
48241
  },
47713
48242
  {
47714
48243
  "color": "{base.color.neutral.0}",
47715
48244
  "alpha": 0.4,
47716
- "offsetX": "0px",
47717
- "offsetY": "4px",
47718
- "blur": "32px",
47719
- "spread": "-4px"
48245
+ "offsetX": {
48246
+ "value": 0,
48247
+ "unit": "px"
48248
+ },
48249
+ "offsetY": {
48250
+ "value": 4,
48251
+ "unit": "px"
48252
+ },
48253
+ "blur": {
48254
+ "value": 32,
48255
+ "unit": "px"
48256
+ },
48257
+ "spread": {
48258
+ "value": -4,
48259
+ "unit": "px"
48260
+ }
47720
48261
  },
47721
48262
  {
47722
48263
  "color": "{base.color.neutral.0}",
47723
48264
  "alpha": 0.4,
47724
- "offsetX": "0px",
47725
- "offsetY": "24px",
47726
- "blur": "48px",
47727
- "spread": "-12px"
48265
+ "offsetX": {
48266
+ "value": 0,
48267
+ "unit": "px"
48268
+ },
48269
+ "offsetY": {
48270
+ "value": 24,
48271
+ "unit": "px"
48272
+ },
48273
+ "blur": {
48274
+ "value": 48,
48275
+ "unit": "px"
48276
+ },
48277
+ "spread": {
48278
+ "value": -12,
48279
+ "unit": "px"
48280
+ }
47728
48281
  },
47729
48282
  {
47730
48283
  "color": "{base.color.neutral.0}",
47731
48284
  "alpha": 0.4,
47732
- "offsetX": "0px",
47733
- "offsetY": "48px",
47734
- "blur": "96px",
47735
- "spread": "-24px"
48285
+ "offsetX": {
48286
+ "value": 0,
48287
+ "unit": "px"
48288
+ },
48289
+ "offsetY": {
48290
+ "value": 48,
48291
+ "unit": "px"
48292
+ },
48293
+ "blur": {
48294
+ "value": 96,
48295
+ "unit": "px"
48296
+ },
48297
+ "spread": {
48298
+ "value": -24,
48299
+ "unit": "px"
48300
+ }
47736
48301
  }
47737
48302
  ],
47738
48303
  "$type": "shadow",
48304
+ "$description": "Medium floating shadow for popovers and action menus",
47739
48305
  "$extensions": {
47740
48306
  "org.primer.figma": {
47741
48307
  "collection": "mode",
@@ -47747,48 +48313,112 @@
47747
48313
  {
47748
48314
  "color": "{overlay.borderColor}",
47749
48315
  "alpha": 1,
47750
- "offsetX": "0px",
47751
- "offsetY": "0px",
47752
- "blur": "0px",
47753
- "spread": "1px"
48316
+ "offsetX": {
48317
+ "value": 0,
48318
+ "unit": "px"
48319
+ },
48320
+ "offsetY": {
48321
+ "value": 0,
48322
+ "unit": "px"
48323
+ },
48324
+ "blur": {
48325
+ "value": 0,
48326
+ "unit": "px"
48327
+ },
48328
+ "spread": {
48329
+ "value": 1,
48330
+ "unit": "px"
48331
+ }
47754
48332
  },
47755
48333
  {
47756
48334
  "color": "{base.color.neutral.0}",
47757
48335
  "alpha": 0.4,
47758
- "offsetX": "0px",
47759
- "offsetY": "8px",
47760
- "blur": "16px",
47761
- "spread": "-4px"
48336
+ "offsetX": {
48337
+ "value": 0,
48338
+ "unit": "px"
48339
+ },
48340
+ "offsetY": {
48341
+ "value": 8,
48342
+ "unit": "px"
48343
+ },
48344
+ "blur": {
48345
+ "value": 16,
48346
+ "unit": "px"
48347
+ },
48348
+ "spread": {
48349
+ "value": -4,
48350
+ "unit": "px"
48351
+ }
47762
48352
  },
47763
48353
  {
47764
48354
  "color": "{base.color.neutral.0}",
47765
48355
  "alpha": 0.4,
47766
- "offsetX": "0px",
47767
- "offsetY": "4px",
47768
- "blur": "32px",
47769
- "spread": "-4px"
48356
+ "offsetX": {
48357
+ "value": 0,
48358
+ "unit": "px"
48359
+ },
48360
+ "offsetY": {
48361
+ "value": 4,
48362
+ "unit": "px"
48363
+ },
48364
+ "blur": {
48365
+ "value": 32,
48366
+ "unit": "px"
48367
+ },
48368
+ "spread": {
48369
+ "value": -4,
48370
+ "unit": "px"
48371
+ }
47770
48372
  },
47771
48373
  {
47772
48374
  "color": "{base.color.neutral.0}",
47773
48375
  "alpha": 0.4,
47774
- "offsetX": "0px",
47775
- "offsetY": "24px",
47776
- "blur": "48px",
47777
- "spread": "-12px"
48376
+ "offsetX": {
48377
+ "value": 0,
48378
+ "unit": "px"
48379
+ },
48380
+ "offsetY": {
48381
+ "value": 24,
48382
+ "unit": "px"
48383
+ },
48384
+ "blur": {
48385
+ "value": 48,
48386
+ "unit": "px"
48387
+ },
48388
+ "spread": {
48389
+ "value": -12,
48390
+ "unit": "px"
48391
+ }
47778
48392
  },
47779
48393
  {
47780
48394
  "color": "{base.color.neutral.0}",
47781
48395
  "alpha": 0.4,
47782
- "offsetX": "0px",
47783
- "offsetY": "48px",
47784
- "blur": "96px",
47785
- "spread": "-24px"
48396
+ "offsetX": {
48397
+ "value": 0,
48398
+ "unit": "px"
48399
+ },
48400
+ "offsetY": {
48401
+ "value": 48,
48402
+ "unit": "px"
48403
+ },
48404
+ "blur": {
48405
+ "value": 96,
48406
+ "unit": "px"
48407
+ },
48408
+ "spread": {
48409
+ "value": -24,
48410
+ "unit": "px"
48411
+ }
47786
48412
  }
47787
48413
  ],
47788
48414
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47789
48415
  "isSource": true,
47790
48416
  "$type": "shadow"
47791
48417
  }
48418
+ },
48419
+ "org.primer.llm": {
48420
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48421
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47792
48422
  }
47793
48423
  },
47794
48424
  "key": "{shadow.floating.medium}"
@@ -47796,8 +48426,9 @@
47796
48426
  "name": "shadow-floating-medium",
47797
48427
  "attributes": {},
47798
48428
  "path": ["shadow", "floating", "medium"],
47799
- "value": "0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966",
47800
- "type": "shadow"
48429
+ "value": "0 0 0 1px #3d444d, 0 8px 16px -4px #01040966, 0 4px 32px -4px #01040966, 0 24px 48px -12px #01040966, 0 48px 96px -24px #01040966",
48430
+ "type": "shadow",
48431
+ "description": "Medium floating shadow for popovers and action menus"
47801
48432
  },
47802
48433
  "shadow-floating-small": {
47803
48434
  "key": "{shadow.floating.small}",
@@ -47812,26 +48443,62 @@
47812
48443
  {
47813
48444
  "color": "#3d444db3",
47814
48445
  "alpha": 1,
47815
- "offsetX": "0px",
47816
- "offsetY": "0px",
47817
- "blur": "0px",
47818
- "spread": "1px"
48446
+ "offsetX": {
48447
+ "value": 0,
48448
+ "unit": "px"
48449
+ },
48450
+ "offsetY": {
48451
+ "value": 0,
48452
+ "unit": "px"
48453
+ },
48454
+ "blur": {
48455
+ "value": 0,
48456
+ "unit": "px"
48457
+ },
48458
+ "spread": {
48459
+ "value": 1,
48460
+ "unit": "px"
48461
+ }
47819
48462
  },
47820
48463
  {
47821
48464
  "color": "#010409",
47822
48465
  "alpha": 0.4,
47823
- "offsetX": "0px",
47824
- "offsetY": "6px",
47825
- "blur": "12px",
47826
- "spread": "-3px"
48466
+ "offsetX": {
48467
+ "value": 0,
48468
+ "unit": "px"
48469
+ },
48470
+ "offsetY": {
48471
+ "value": 6,
48472
+ "unit": "px"
48473
+ },
48474
+ "blur": {
48475
+ "value": 12,
48476
+ "unit": "px"
48477
+ },
48478
+ "spread": {
48479
+ "value": -3,
48480
+ "unit": "px"
48481
+ }
47827
48482
  },
47828
48483
  {
47829
48484
  "color": "#010409",
47830
48485
  "alpha": 0.4,
47831
- "offsetX": "0px",
47832
- "offsetY": "6px",
47833
- "blur": "18px",
47834
- "spread": "0px"
48486
+ "offsetX": {
48487
+ "value": 0,
48488
+ "unit": "px"
48489
+ },
48490
+ "offsetY": {
48491
+ "value": 6,
48492
+ "unit": "px"
48493
+ },
48494
+ "blur": {
48495
+ "value": 18,
48496
+ "unit": "px"
48497
+ },
48498
+ "spread": {
48499
+ "value": 0,
48500
+ "unit": "px"
48501
+ }
47835
48502
  }
47836
48503
  ],
47837
48504
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47851,26 +48518,62 @@
47851
48518
  {
47852
48519
  "color": "{overlay.borderColor}",
47853
48520
  "alpha": 1,
47854
- "offsetX": "0px",
47855
- "offsetY": "0px",
47856
- "blur": "0px",
47857
- "spread": "1px"
48521
+ "offsetX": {
48522
+ "value": 0,
48523
+ "unit": "px"
48524
+ },
48525
+ "offsetY": {
48526
+ "value": 0,
48527
+ "unit": "px"
48528
+ },
48529
+ "blur": {
48530
+ "value": 0,
48531
+ "unit": "px"
48532
+ },
48533
+ "spread": {
48534
+ "value": 1,
48535
+ "unit": "px"
48536
+ }
47858
48537
  },
47859
48538
  {
47860
48539
  "color": "{base.color.neutral.0}",
47861
48540
  "alpha": 0.4,
47862
- "offsetX": "0px",
47863
- "offsetY": "6px",
47864
- "blur": "12px",
47865
- "spread": "-3px"
48541
+ "offsetX": {
48542
+ "value": 0,
48543
+ "unit": "px"
48544
+ },
48545
+ "offsetY": {
48546
+ "value": 6,
48547
+ "unit": "px"
48548
+ },
48549
+ "blur": {
48550
+ "value": 12,
48551
+ "unit": "px"
48552
+ },
48553
+ "spread": {
48554
+ "value": -3,
48555
+ "unit": "px"
48556
+ }
47866
48557
  },
47867
48558
  {
47868
48559
  "color": "{base.color.neutral.0}",
47869
48560
  "alpha": 0.4,
47870
- "offsetX": "0px",
47871
- "offsetY": "6px",
47872
- "blur": "18px",
47873
- "spread": "0px"
48561
+ "offsetX": {
48562
+ "value": 0,
48563
+ "unit": "px"
48564
+ },
48565
+ "offsetY": {
48566
+ "value": 6,
48567
+ "unit": "px"
48568
+ },
48569
+ "blur": {
48570
+ "value": 18,
48571
+ "unit": "px"
48572
+ },
48573
+ "spread": {
48574
+ "value": 0,
48575
+ "unit": "px"
48576
+ }
47874
48577
  }
47875
48578
  ],
47876
48579
  "$type": "shadow",
@@ -47886,26 +48589,62 @@
47886
48589
  {
47887
48590
  "color": "{overlay.borderColor}",
47888
48591
  "alpha": 1,
47889
- "offsetX": "0px",
47890
- "offsetY": "0px",
47891
- "blur": "0px",
47892
- "spread": "1px"
48592
+ "offsetX": {
48593
+ "value": 0,
48594
+ "unit": "px"
48595
+ },
48596
+ "offsetY": {
48597
+ "value": 0,
48598
+ "unit": "px"
48599
+ },
48600
+ "blur": {
48601
+ "value": 0,
48602
+ "unit": "px"
48603
+ },
48604
+ "spread": {
48605
+ "value": 1,
48606
+ "unit": "px"
48607
+ }
47893
48608
  },
47894
48609
  {
47895
48610
  "color": "{base.color.neutral.0}",
47896
48611
  "alpha": 0.4,
47897
- "offsetX": "0px",
47898
- "offsetY": "6px",
47899
- "blur": "12px",
47900
- "spread": "-3px"
48612
+ "offsetX": {
48613
+ "value": 0,
48614
+ "unit": "px"
48615
+ },
48616
+ "offsetY": {
48617
+ "value": 6,
48618
+ "unit": "px"
48619
+ },
48620
+ "blur": {
48621
+ "value": 12,
48622
+ "unit": "px"
48623
+ },
48624
+ "spread": {
48625
+ "value": -3,
48626
+ "unit": "px"
48627
+ }
47901
48628
  },
47902
48629
  {
47903
48630
  "color": "{base.color.neutral.0}",
47904
48631
  "alpha": 0.4,
47905
- "offsetX": "0px",
47906
- "offsetY": "6px",
47907
- "blur": "18px",
47908
- "spread": "0px"
48632
+ "offsetX": {
48633
+ "value": 0,
48634
+ "unit": "px"
48635
+ },
48636
+ "offsetY": {
48637
+ "value": 6,
48638
+ "unit": "px"
48639
+ },
48640
+ "blur": {
48641
+ "value": 18,
48642
+ "unit": "px"
48643
+ },
48644
+ "spread": {
48645
+ "value": 0,
48646
+ "unit": "px"
48647
+ }
47909
48648
  }
47910
48649
  ],
47911
48650
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47923,7 +48662,7 @@
47923
48662
  "name": "shadow-floating-small",
47924
48663
  "attributes": {},
47925
48664
  "path": ["shadow", "floating", "small"],
47926
- "value": "0px 0px 0px 1px #3d444d, 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966",
48665
+ "value": "0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966",
47927
48666
  "type": "shadow",
47928
48667
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47929
48668
  },
@@ -47940,24 +48679,52 @@
47940
48679
  {
47941
48680
  "color": "#3d444db3",
47942
48681
  "alpha": 1,
47943
- "offsetX": "0px",
47944
- "offsetY": "0px",
47945
- "blur": "0px",
47946
- "spread": "1px"
48682
+ "offsetX": {
48683
+ "value": 0,
48684
+ "unit": "px"
48685
+ },
48686
+ "offsetY": {
48687
+ "value": 0,
48688
+ "unit": "px"
48689
+ },
48690
+ "blur": {
48691
+ "value": 0,
48692
+ "unit": "px"
48693
+ },
48694
+ "spread": {
48695
+ "value": 1,
48696
+ "unit": "px"
48697
+ }
47947
48698
  },
47948
48699
  {
47949
48700
  "color": "#010409",
47950
48701
  "alpha": 1,
47951
- "offsetX": "0px",
47952
- "offsetY": "32px",
47953
- "blur": "64px",
47954
- "spread": "0px"
48702
+ "offsetX": {
48703
+ "value": 0,
48704
+ "unit": "px"
48705
+ },
48706
+ "offsetY": {
48707
+ "value": 32,
48708
+ "unit": "px"
48709
+ },
48710
+ "blur": {
48711
+ "value": 64,
48712
+ "unit": "px"
48713
+ },
48714
+ "spread": {
48715
+ "value": 0,
48716
+ "unit": "px"
48717
+ }
47955
48718
  }
47956
48719
  ],
47957
48720
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47958
48721
  "isSource": true,
47959
48722
  "$type": "shadow"
47960
48723
  }
48724
+ },
48725
+ "org.primer.llm": {
48726
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48727
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47961
48728
  }
47962
48729
  },
47963
48730
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47967,21 +48734,46 @@
47967
48734
  {
47968
48735
  "color": "{overlay.borderColor}",
47969
48736
  "alpha": 1,
47970
- "offsetX": "0px",
47971
- "offsetY": "0px",
47972
- "blur": "0px",
47973
- "spread": "1px"
48737
+ "offsetX": {
48738
+ "value": 0,
48739
+ "unit": "px"
48740
+ },
48741
+ "offsetY": {
48742
+ "value": 0,
48743
+ "unit": "px"
48744
+ },
48745
+ "blur": {
48746
+ "value": 0,
48747
+ "unit": "px"
48748
+ },
48749
+ "spread": {
48750
+ "value": 1,
48751
+ "unit": "px"
48752
+ }
47974
48753
  },
47975
48754
  {
47976
48755
  "color": "{base.color.neutral.0}",
47977
48756
  "alpha": 1,
47978
- "offsetX": "0px",
47979
- "offsetY": "32px",
47980
- "blur": "64px",
47981
- "spread": "0px"
48757
+ "offsetX": {
48758
+ "value": 0,
48759
+ "unit": "px"
48760
+ },
48761
+ "offsetY": {
48762
+ "value": 32,
48763
+ "unit": "px"
48764
+ },
48765
+ "blur": {
48766
+ "value": 64,
48767
+ "unit": "px"
48768
+ },
48769
+ "spread": {
48770
+ "value": 0,
48771
+ "unit": "px"
48772
+ }
47982
48773
  }
47983
48774
  ],
47984
48775
  "$type": "shadow",
48776
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47985
48777
  "$extensions": {
47986
48778
  "org.primer.figma": {
47987
48779
  "collection": "mode",
@@ -47993,24 +48785,52 @@
47993
48785
  {
47994
48786
  "color": "{overlay.borderColor}",
47995
48787
  "alpha": 1,
47996
- "offsetX": "0px",
47997
- "offsetY": "0px",
47998
- "blur": "0px",
47999
- "spread": "1px"
48788
+ "offsetX": {
48789
+ "value": 0,
48790
+ "unit": "px"
48791
+ },
48792
+ "offsetY": {
48793
+ "value": 0,
48794
+ "unit": "px"
48795
+ },
48796
+ "blur": {
48797
+ "value": 0,
48798
+ "unit": "px"
48799
+ },
48800
+ "spread": {
48801
+ "value": 1,
48802
+ "unit": "px"
48803
+ }
48000
48804
  },
48001
48805
  {
48002
48806
  "color": "{base.color.neutral.0}",
48003
48807
  "alpha": 1,
48004
- "offsetX": "0px",
48005
- "offsetY": "32px",
48006
- "blur": "64px",
48007
- "spread": "0px"
48808
+ "offsetX": {
48809
+ "value": 0,
48810
+ "unit": "px"
48811
+ },
48812
+ "offsetY": {
48813
+ "value": 32,
48814
+ "unit": "px"
48815
+ },
48816
+ "blur": {
48817
+ "value": 64,
48818
+ "unit": "px"
48819
+ },
48820
+ "spread": {
48821
+ "value": 0,
48822
+ "unit": "px"
48823
+ }
48008
48824
  }
48009
48825
  ],
48010
48826
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48011
48827
  "isSource": true,
48012
48828
  "$type": "shadow"
48013
48829
  }
48830
+ },
48831
+ "org.primer.llm": {
48832
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48833
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
48014
48834
  }
48015
48835
  },
48016
48836
  "key": "{shadow.floating.xlarge}"
@@ -48018,8 +48838,9 @@
48018
48838
  "name": "shadow-floating-xlarge",
48019
48839
  "attributes": {},
48020
48840
  "path": ["shadow", "floating", "xlarge"],
48021
- "value": "0px 0px 0px 1px #3d444d, 0px 32px 64px 0px #010409",
48022
- "type": "shadow"
48841
+ "value": "0 0 0 1px #3d444d, 0 32px 64px 0 #010409",
48842
+ "type": "shadow",
48843
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
48023
48844
  },
48024
48845
  "shadow-inset": {
48025
48846
  "key": "{shadow.inset}",
@@ -48033,16 +48854,32 @@
48033
48854
  "$value": {
48034
48855
  "color": "#010409",
48035
48856
  "alpha": 0.24,
48036
- "offsetX": "0px",
48037
- "offsetY": "1px",
48038
- "blur": "0px",
48039
- "spread": "0px",
48857
+ "offsetX": {
48858
+ "value": 0,
48859
+ "unit": "px"
48860
+ },
48861
+ "offsetY": {
48862
+ "value": 1,
48863
+ "unit": "px"
48864
+ },
48865
+ "blur": {
48866
+ "value": 0,
48867
+ "unit": "px"
48868
+ },
48869
+ "spread": {
48870
+ "value": 0,
48871
+ "unit": "px"
48872
+ },
48040
48873
  "inset": true
48041
48874
  },
48042
48875
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48043
48876
  "isSource": true,
48044
48877
  "$type": "shadow"
48045
48878
  }
48879
+ },
48880
+ "org.primer.llm": {
48881
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48882
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48046
48883
  }
48047
48884
  },
48048
48885
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48051,13 +48888,26 @@
48051
48888
  "$value": {
48052
48889
  "color": "{base.color.neutral.0}",
48053
48890
  "alpha": 0.24,
48054
- "offsetX": "0px",
48055
- "offsetY": "1px",
48056
- "blur": "0px",
48057
- "spread": "0px",
48891
+ "offsetX": {
48892
+ "value": 0,
48893
+ "unit": "px"
48894
+ },
48895
+ "offsetY": {
48896
+ "value": 1,
48897
+ "unit": "px"
48898
+ },
48899
+ "blur": {
48900
+ "value": 0,
48901
+ "unit": "px"
48902
+ },
48903
+ "spread": {
48904
+ "value": 0,
48905
+ "unit": "px"
48906
+ },
48058
48907
  "inset": true
48059
48908
  },
48060
48909
  "$type": "shadow",
48910
+ "$description": "Inset shadow for recessed elements",
48061
48911
  "$extensions": {
48062
48912
  "org.primer.figma": {
48063
48913
  "collection": "mode",
@@ -48068,16 +48918,32 @@
48068
48918
  "$value": {
48069
48919
  "color": "{base.color.neutral.0}",
48070
48920
  "alpha": 0.24,
48071
- "offsetX": "0px",
48072
- "offsetY": "1px",
48073
- "blur": "0px",
48074
- "spread": "0px",
48921
+ "offsetX": {
48922
+ "value": 0,
48923
+ "unit": "px"
48924
+ },
48925
+ "offsetY": {
48926
+ "value": 1,
48927
+ "unit": "px"
48928
+ },
48929
+ "blur": {
48930
+ "value": 0,
48931
+ "unit": "px"
48932
+ },
48933
+ "spread": {
48934
+ "value": 0,
48935
+ "unit": "px"
48936
+ },
48075
48937
  "inset": true
48076
48938
  },
48077
48939
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48078
48940
  "isSource": true,
48079
48941
  "$type": "shadow"
48080
48942
  }
48943
+ },
48944
+ "org.primer.llm": {
48945
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48946
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48081
48947
  }
48082
48948
  },
48083
48949
  "key": "{shadow.inset}"
@@ -48085,8 +48951,9 @@
48085
48951
  "name": "shadow-inset",
48086
48952
  "attributes": {},
48087
48953
  "path": ["shadow", "inset"],
48088
- "value": "inset 0px 1px 0px 0px #0104093d",
48089
- "type": "shadow"
48954
+ "value": "inset 0 1px 0 0 #0104093d",
48955
+ "type": "shadow",
48956
+ "description": "Inset shadow for recessed elements"
48090
48957
  },
48091
48958
  "shadow-resting-medium": {
48092
48959
  "key": "{shadow.resting.medium}",
@@ -48101,24 +48968,52 @@
48101
48968
  {
48102
48969
  "color": "#010409",
48103
48970
  "alpha": 0.4,
48104
- "offsetX": "0px",
48105
- "offsetY": "1px",
48106
- "blur": "1px",
48107
- "spread": "0px"
48971
+ "offsetX": {
48972
+ "value": 0,
48973
+ "unit": "px"
48974
+ },
48975
+ "offsetY": {
48976
+ "value": 1,
48977
+ "unit": "px"
48978
+ },
48979
+ "blur": {
48980
+ "value": 1,
48981
+ "unit": "px"
48982
+ },
48983
+ "spread": {
48984
+ "value": 0,
48985
+ "unit": "px"
48986
+ }
48108
48987
  },
48109
48988
  {
48110
48989
  "color": "#010409",
48111
48990
  "alpha": 0.8,
48112
- "offsetX": "0px",
48113
- "offsetY": "3px",
48114
- "blur": "6px",
48115
- "spread": "0px"
48991
+ "offsetX": {
48992
+ "value": 0,
48993
+ "unit": "px"
48994
+ },
48995
+ "offsetY": {
48996
+ "value": 3,
48997
+ "unit": "px"
48998
+ },
48999
+ "blur": {
49000
+ "value": 6,
49001
+ "unit": "px"
49002
+ },
49003
+ "spread": {
49004
+ "value": 0,
49005
+ "unit": "px"
49006
+ }
48116
49007
  }
48117
49008
  ],
48118
49009
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48119
49010
  "isSource": true,
48120
49011
  "$type": "shadow"
48121
49012
  }
49013
+ },
49014
+ "org.primer.llm": {
49015
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49016
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48122
49017
  }
48123
49018
  },
48124
49019
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48128,21 +49023,46 @@
48128
49023
  {
48129
49024
  "color": "{base.color.neutral.0}",
48130
49025
  "alpha": 0.4,
48131
- "offsetX": "0px",
48132
- "offsetY": "1px",
48133
- "blur": "1px",
48134
- "spread": "0px"
49026
+ "offsetX": {
49027
+ "value": 0,
49028
+ "unit": "px"
49029
+ },
49030
+ "offsetY": {
49031
+ "value": 1,
49032
+ "unit": "px"
49033
+ },
49034
+ "blur": {
49035
+ "value": 1,
49036
+ "unit": "px"
49037
+ },
49038
+ "spread": {
49039
+ "value": 0,
49040
+ "unit": "px"
49041
+ }
48135
49042
  },
48136
49043
  {
48137
49044
  "color": "{base.color.neutral.0}",
48138
49045
  "alpha": 0.8,
48139
- "offsetX": "0px",
48140
- "offsetY": "3px",
48141
- "blur": "6px",
48142
- "spread": "0px"
49046
+ "offsetX": {
49047
+ "value": 0,
49048
+ "unit": "px"
49049
+ },
49050
+ "offsetY": {
49051
+ "value": 3,
49052
+ "unit": "px"
49053
+ },
49054
+ "blur": {
49055
+ "value": 6,
49056
+ "unit": "px"
49057
+ },
49058
+ "spread": {
49059
+ "value": 0,
49060
+ "unit": "px"
49061
+ }
48143
49062
  }
48144
49063
  ],
48145
49064
  "$type": "shadow",
49065
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48146
49066
  "$extensions": {
48147
49067
  "org.primer.figma": {
48148
49068
  "collection": "mode",
@@ -48154,24 +49074,52 @@
48154
49074
  {
48155
49075
  "color": "{base.color.neutral.0}",
48156
49076
  "alpha": 0.4,
48157
- "offsetX": "0px",
48158
- "offsetY": "1px",
48159
- "blur": "1px",
48160
- "spread": "0px"
49077
+ "offsetX": {
49078
+ "value": 0,
49079
+ "unit": "px"
49080
+ },
49081
+ "offsetY": {
49082
+ "value": 1,
49083
+ "unit": "px"
49084
+ },
49085
+ "blur": {
49086
+ "value": 1,
49087
+ "unit": "px"
49088
+ },
49089
+ "spread": {
49090
+ "value": 0,
49091
+ "unit": "px"
49092
+ }
48161
49093
  },
48162
49094
  {
48163
49095
  "color": "{base.color.neutral.0}",
48164
49096
  "alpha": 0.8,
48165
- "offsetX": "0px",
48166
- "offsetY": "3px",
48167
- "blur": "6px",
48168
- "spread": "0px"
49097
+ "offsetX": {
49098
+ "value": 0,
49099
+ "unit": "px"
49100
+ },
49101
+ "offsetY": {
49102
+ "value": 3,
49103
+ "unit": "px"
49104
+ },
49105
+ "blur": {
49106
+ "value": 6,
49107
+ "unit": "px"
49108
+ },
49109
+ "spread": {
49110
+ "value": 0,
49111
+ "unit": "px"
49112
+ }
48169
49113
  }
48170
49114
  ],
48171
49115
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48172
49116
  "isSource": true,
48173
49117
  "$type": "shadow"
48174
49118
  }
49119
+ },
49120
+ "org.primer.llm": {
49121
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49122
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48175
49123
  }
48176
49124
  },
48177
49125
  "key": "{shadow.resting.medium}"
@@ -48179,8 +49127,9 @@
48179
49127
  "name": "shadow-resting-medium",
48180
49128
  "attributes": {},
48181
49129
  "path": ["shadow", "resting", "medium"],
48182
- "value": "0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc",
48183
- "type": "shadow"
49130
+ "value": "0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc",
49131
+ "type": "shadow",
49132
+ "description": "Medium resting shadow for cards and elevated surfaces"
48184
49133
  },
48185
49134
  "shadow-resting-small": {
48186
49135
  "key": "{shadow.resting.small}",
@@ -48195,19 +49144,43 @@
48195
49144
  {
48196
49145
  "color": "#010409",
48197
49146
  "alpha": 0.6,
48198
- "offsetX": "0px",
48199
- "offsetY": "1px",
48200
- "blur": "1px",
48201
- "spread": "0px",
49147
+ "offsetX": {
49148
+ "value": 0,
49149
+ "unit": "px"
49150
+ },
49151
+ "offsetY": {
49152
+ "value": 1,
49153
+ "unit": "px"
49154
+ },
49155
+ "blur": {
49156
+ "value": 1,
49157
+ "unit": "px"
49158
+ },
49159
+ "spread": {
49160
+ "value": 0,
49161
+ "unit": "px"
49162
+ },
48202
49163
  "inset": false
48203
49164
  },
48204
49165
  {
48205
49166
  "color": "#010409",
48206
49167
  "alpha": 0.6,
48207
- "offsetX": "0px",
48208
- "offsetY": "1px",
48209
- "blur": "3px",
48210
- "spread": "0px",
49168
+ "offsetX": {
49169
+ "value": 0,
49170
+ "unit": "px"
49171
+ },
49172
+ "offsetY": {
49173
+ "value": 1,
49174
+ "unit": "px"
49175
+ },
49176
+ "blur": {
49177
+ "value": 3,
49178
+ "unit": "px"
49179
+ },
49180
+ "spread": {
49181
+ "value": 0,
49182
+ "unit": "px"
49183
+ },
48211
49184
  "inset": false
48212
49185
  }
48213
49186
  ],
@@ -48215,6 +49188,10 @@
48215
49188
  "isSource": true,
48216
49189
  "$type": "shadow"
48217
49190
  }
49191
+ },
49192
+ "org.primer.llm": {
49193
+ "usage": ["button", "interactive-card", "clickable-element"],
49194
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48218
49195
  }
48219
49196
  },
48220
49197
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48224,23 +49201,48 @@
48224
49201
  {
48225
49202
  "color": "{base.color.neutral.0}",
48226
49203
  "alpha": 0.6,
48227
- "offsetX": "0px",
48228
- "offsetY": "1px",
48229
- "blur": "1px",
48230
- "spread": "0px",
49204
+ "offsetX": {
49205
+ "value": 0,
49206
+ "unit": "px"
49207
+ },
49208
+ "offsetY": {
49209
+ "value": 1,
49210
+ "unit": "px"
49211
+ },
49212
+ "blur": {
49213
+ "value": 1,
49214
+ "unit": "px"
49215
+ },
49216
+ "spread": {
49217
+ "value": 0,
49218
+ "unit": "px"
49219
+ },
48231
49220
  "inset": false
48232
49221
  },
48233
49222
  {
48234
49223
  "color": "{base.color.neutral.0}",
48235
49224
  "alpha": 0.6,
48236
- "offsetX": "0px",
48237
- "offsetY": "1px",
48238
- "blur": "3px",
48239
- "spread": "0px",
49225
+ "offsetX": {
49226
+ "value": 0,
49227
+ "unit": "px"
49228
+ },
49229
+ "offsetY": {
49230
+ "value": 1,
49231
+ "unit": "px"
49232
+ },
49233
+ "blur": {
49234
+ "value": 3,
49235
+ "unit": "px"
49236
+ },
49237
+ "spread": {
49238
+ "value": 0,
49239
+ "unit": "px"
49240
+ },
48240
49241
  "inset": false
48241
49242
  }
48242
49243
  ],
48243
49244
  "$type": "shadow",
49245
+ "$description": "Small resting shadow for buttons and interactive elements",
48244
49246
  "$extensions": {
48245
49247
  "org.primer.figma": {
48246
49248
  "collection": "mode",
@@ -48252,19 +49254,43 @@
48252
49254
  {
48253
49255
  "color": "{base.color.neutral.0}",
48254
49256
  "alpha": 0.6,
48255
- "offsetX": "0px",
48256
- "offsetY": "1px",
48257
- "blur": "1px",
48258
- "spread": "0px",
49257
+ "offsetX": {
49258
+ "value": 0,
49259
+ "unit": "px"
49260
+ },
49261
+ "offsetY": {
49262
+ "value": 1,
49263
+ "unit": "px"
49264
+ },
49265
+ "blur": {
49266
+ "value": 1,
49267
+ "unit": "px"
49268
+ },
49269
+ "spread": {
49270
+ "value": 0,
49271
+ "unit": "px"
49272
+ },
48259
49273
  "inset": false
48260
49274
  },
48261
49275
  {
48262
49276
  "color": "{base.color.neutral.0}",
48263
49277
  "alpha": 0.6,
48264
- "offsetX": "0px",
48265
- "offsetY": "1px",
48266
- "blur": "3px",
48267
- "spread": "0px",
49278
+ "offsetX": {
49279
+ "value": 0,
49280
+ "unit": "px"
49281
+ },
49282
+ "offsetY": {
49283
+ "value": 1,
49284
+ "unit": "px"
49285
+ },
49286
+ "blur": {
49287
+ "value": 3,
49288
+ "unit": "px"
49289
+ },
49290
+ "spread": {
49291
+ "value": 0,
49292
+ "unit": "px"
49293
+ },
48268
49294
  "inset": false
48269
49295
  }
48270
49296
  ],
@@ -48272,6 +49298,10 @@
48272
49298
  "isSource": true,
48273
49299
  "$type": "shadow"
48274
49300
  }
49301
+ },
49302
+ "org.primer.llm": {
49303
+ "usage": ["button", "interactive-card", "clickable-element"],
49304
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48275
49305
  }
48276
49306
  },
48277
49307
  "key": "{shadow.resting.small}"
@@ -48279,8 +49309,9 @@
48279
49309
  "name": "shadow-resting-small",
48280
49310
  "attributes": {},
48281
49311
  "path": ["shadow", "resting", "small"],
48282
- "value": "0px 1px 1px 0px #01040999, 0px 1px 3px 0px #01040999",
48283
- "type": "shadow"
49312
+ "value": "0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999",
49313
+ "type": "shadow",
49314
+ "description": "Small resting shadow for buttons and interactive elements"
48284
49315
  },
48285
49316
  "shadow-resting-xsmall": {
48286
49317
  "key": "{shadow.resting.xsmall}",
@@ -48294,16 +49325,32 @@
48294
49325
  "$value": {
48295
49326
  "color": "#010409",
48296
49327
  "alpha": 0.8,
48297
- "offsetX": "0px",
48298
- "offsetY": "1px",
48299
- "blur": "1px",
48300
- "spread": "0px",
49328
+ "offsetX": {
49329
+ "value": 0,
49330
+ "unit": "px"
49331
+ },
49332
+ "offsetY": {
49333
+ "value": 1,
49334
+ "unit": "px"
49335
+ },
49336
+ "blur": {
49337
+ "value": 1,
49338
+ "unit": "px"
49339
+ },
49340
+ "spread": {
49341
+ "value": 0,
49342
+ "unit": "px"
49343
+ },
48301
49344
  "inset": false
48302
49345
  },
48303
49346
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48304
49347
  "isSource": true,
48305
49348
  "$type": "shadow"
48306
49349
  }
49350
+ },
49351
+ "org.primer.llm": {
49352
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49353
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48307
49354
  }
48308
49355
  },
48309
49356
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48312,13 +49359,26 @@
48312
49359
  "$value": {
48313
49360
  "color": "{base.color.neutral.0}",
48314
49361
  "alpha": 0.8,
48315
- "offsetX": "0px",
48316
- "offsetY": "1px",
48317
- "blur": "1px",
48318
- "spread": "0px",
49362
+ "offsetX": {
49363
+ "value": 0,
49364
+ "unit": "px"
49365
+ },
49366
+ "offsetY": {
49367
+ "value": 1,
49368
+ "unit": "px"
49369
+ },
49370
+ "blur": {
49371
+ "value": 1,
49372
+ "unit": "px"
49373
+ },
49374
+ "spread": {
49375
+ "value": 0,
49376
+ "unit": "px"
49377
+ },
48319
49378
  "inset": false
48320
49379
  },
48321
49380
  "$type": "shadow",
49381
+ "$description": "Extra small resting shadow for minimal elevation",
48322
49382
  "$extensions": {
48323
49383
  "org.primer.figma": {
48324
49384
  "collection": "mode",
@@ -48329,16 +49389,32 @@
48329
49389
  "$value": {
48330
49390
  "color": "{base.color.neutral.0}",
48331
49391
  "alpha": 0.8,
48332
- "offsetX": "0px",
48333
- "offsetY": "1px",
48334
- "blur": "1px",
48335
- "spread": "0px",
49392
+ "offsetX": {
49393
+ "value": 0,
49394
+ "unit": "px"
49395
+ },
49396
+ "offsetY": {
49397
+ "value": 1,
49398
+ "unit": "px"
49399
+ },
49400
+ "blur": {
49401
+ "value": 1,
49402
+ "unit": "px"
49403
+ },
49404
+ "spread": {
49405
+ "value": 0,
49406
+ "unit": "px"
49407
+ },
48336
49408
  "inset": false
48337
49409
  },
48338
49410
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48339
49411
  "isSource": true,
48340
49412
  "$type": "shadow"
48341
49413
  }
49414
+ },
49415
+ "org.primer.llm": {
49416
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49417
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48342
49418
  }
48343
49419
  },
48344
49420
  "key": "{shadow.resting.xsmall}"
@@ -48346,8 +49422,9 @@
48346
49422
  "name": "shadow-resting-xsmall",
48347
49423
  "attributes": {},
48348
49424
  "path": ["shadow", "resting", "xsmall"],
48349
- "value": "0px 1px 1px 0px #010409cc",
48350
- "type": "shadow"
49425
+ "value": "0 1px 1px 0 #010409cc",
49426
+ "type": "shadow",
49427
+ "description": "Extra small resting shadow for minimal elevation"
48351
49428
  },
48352
49429
  "sideNav-bgColor-selected": {
48353
49430
  "key": "{sideNav.bgColor.selected}",