@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}"
@@ -2435,6 +2479,10 @@
2435
2479
  },
2436
2480
  "org.primer.overrides": {
2437
2481
  "dark": "#1f2328"
2482
+ },
2483
+ "org.primer.llm": {
2484
+ "doNotUse": true,
2485
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2438
2486
  }
2439
2487
  },
2440
2488
  "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2451,6 +2499,10 @@
2451
2499
  },
2452
2500
  "org.primer.overrides": {
2453
2501
  "dark": "{base.color.neutral.13}"
2502
+ },
2503
+ "org.primer.llm": {
2504
+ "doNotUse": true,
2505
+ "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
2454
2506
  }
2455
2507
  },
2456
2508
  "key": "{bgColor.white}"
@@ -6939,10 +6991,22 @@
6939
6991
  {
6940
6992
  "color": "#471700",
6941
6993
  "alpha": 0.2,
6942
- "offsetX": "0px",
6943
- "offsetY": "1px",
6944
- "blur": "0px",
6945
- "spread": "0px",
6994
+ "offsetX": {
6995
+ "value": 0,
6996
+ "unit": "px"
6997
+ },
6998
+ "offsetY": {
6999
+ "value": 1,
7000
+ "unit": "px"
7001
+ },
7002
+ "blur": {
7003
+ "value": 0,
7004
+ "unit": "px"
7005
+ },
7006
+ "spread": {
7007
+ "value": 0,
7008
+ "unit": "px"
7009
+ },
6946
7010
  "inset": true
6947
7011
  }
6948
7012
  ],
@@ -6955,10 +7019,22 @@
6955
7019
  {
6956
7020
  "color": "#ffffff00",
6957
7021
  "alpha": 0,
6958
- "offsetX": "0px",
6959
- "offsetY": "0px",
6960
- "blur": "0px",
6961
- "spread": "0px",
7022
+ "offsetX": {
7023
+ "value": 0,
7024
+ "unit": "px"
7025
+ },
7026
+ "offsetY": {
7027
+ "value": 0,
7028
+ "unit": "px"
7029
+ },
7030
+ "blur": {
7031
+ "value": 0,
7032
+ "unit": "px"
7033
+ },
7034
+ "spread": {
7035
+ "value": 0,
7036
+ "unit": "px"
7037
+ },
6962
7038
  "inset": false
6963
7039
  }
6964
7040
  ],
@@ -6975,10 +7051,22 @@
6975
7051
  {
6976
7052
  "color": "{base.color.red.9}",
6977
7053
  "alpha": 0.2,
6978
- "offsetX": "0px",
6979
- "offsetY": "1px",
6980
- "blur": "0px",
6981
- "spread": "0px",
7054
+ "offsetX": {
7055
+ "value": 0,
7056
+ "unit": "px"
7057
+ },
7058
+ "offsetY": {
7059
+ "value": 1,
7060
+ "unit": "px"
7061
+ },
7062
+ "blur": {
7063
+ "value": 0,
7064
+ "unit": "px"
7065
+ },
7066
+ "spread": {
7067
+ "value": 0,
7068
+ "unit": "px"
7069
+ },
6982
7070
  "inset": true
6983
7071
  }
6984
7072
  ],
@@ -6994,10 +7082,22 @@
6994
7082
  {
6995
7083
  "color": "{base.color.orange.9}",
6996
7084
  "alpha": 0.2,
6997
- "offsetX": "0px",
6998
- "offsetY": "1px",
6999
- "blur": "0px",
7000
- "spread": "0px",
7085
+ "offsetX": {
7086
+ "value": 0,
7087
+ "unit": "px"
7088
+ },
7089
+ "offsetY": {
7090
+ "value": 1,
7091
+ "unit": "px"
7092
+ },
7093
+ "blur": {
7094
+ "value": 0,
7095
+ "unit": "px"
7096
+ },
7097
+ "spread": {
7098
+ "value": 0,
7099
+ "unit": "px"
7100
+ },
7001
7101
  "inset": true
7002
7102
  }
7003
7103
  ],
@@ -7010,10 +7110,22 @@
7010
7110
  {
7011
7111
  "color": "{base.color.transparent}",
7012
7112
  "alpha": 0,
7013
- "offsetX": "0px",
7014
- "offsetY": "0px",
7015
- "blur": "0px",
7016
- "spread": "0px",
7113
+ "offsetX": {
7114
+ "value": 0,
7115
+ "unit": "px"
7116
+ },
7117
+ "offsetY": {
7118
+ "value": 0,
7119
+ "unit": "px"
7120
+ },
7121
+ "blur": {
7122
+ "value": 0,
7123
+ "unit": "px"
7124
+ },
7125
+ "spread": {
7126
+ "value": 0,
7127
+ "unit": "px"
7128
+ },
7017
7129
  "inset": false
7018
7130
  }
7019
7131
  ],
@@ -7028,7 +7140,7 @@
7028
7140
  "name": "button-danger-shadow-selected",
7029
7141
  "attributes": {},
7030
7142
  "path": ["button", "danger", "shadow", "selected"],
7031
- "value": "inset 0px 1px 0px 0px #4c001433",
7143
+ "value": "inset 0 1px 0 0 #4c001433",
7032
7144
  "type": "shadow"
7033
7145
  },
7034
7146
  "button-default-bgColor-active": {
@@ -7402,10 +7514,22 @@
7402
7514
  {
7403
7515
  "color": "#ffffff00",
7404
7516
  "alpha": 0,
7405
- "offsetX": "0px",
7406
- "offsetY": "0px",
7407
- "blur": "0px",
7408
- "spread": "0px",
7517
+ "offsetX": {
7518
+ "value": 0,
7519
+ "unit": "px"
7520
+ },
7521
+ "offsetY": {
7522
+ "value": 0,
7523
+ "unit": "px"
7524
+ },
7525
+ "blur": {
7526
+ "value": 0,
7527
+ "unit": "px"
7528
+ },
7529
+ "spread": {
7530
+ "value": 0,
7531
+ "unit": "px"
7532
+ },
7409
7533
  "inset": false
7410
7534
  }
7411
7535
  ],
@@ -7422,10 +7546,22 @@
7422
7546
  {
7423
7547
  "color": "{base.color.neutral.13}",
7424
7548
  "alpha": 0.04,
7425
- "offsetX": "0px",
7426
- "offsetY": "1px",
7427
- "blur": "0px",
7428
- "spread": "0px",
7549
+ "offsetX": {
7550
+ "value": 0,
7551
+ "unit": "px"
7552
+ },
7553
+ "offsetY": {
7554
+ "value": 1,
7555
+ "unit": "px"
7556
+ },
7557
+ "blur": {
7558
+ "value": 0,
7559
+ "unit": "px"
7560
+ },
7561
+ "spread": {
7562
+ "value": 0,
7563
+ "unit": "px"
7564
+ },
7429
7565
  "inset": false
7430
7566
  }
7431
7567
  ],
@@ -7441,10 +7577,22 @@
7441
7577
  {
7442
7578
  "color": "{base.color.transparent}",
7443
7579
  "alpha": 0,
7444
- "offsetX": "0px",
7445
- "offsetY": "0px",
7446
- "blur": "0px",
7447
- "spread": "0px",
7580
+ "offsetX": {
7581
+ "value": 0,
7582
+ "unit": "px"
7583
+ },
7584
+ "offsetY": {
7585
+ "value": 0,
7586
+ "unit": "px"
7587
+ },
7588
+ "blur": {
7589
+ "value": 0,
7590
+ "unit": "px"
7591
+ },
7592
+ "spread": {
7593
+ "value": 0,
7594
+ "unit": "px"
7595
+ },
7448
7596
  "inset": false
7449
7597
  }
7450
7598
  ],
@@ -7459,7 +7607,7 @@
7459
7607
  "name": "button-default-shadow-resting",
7460
7608
  "attributes": {},
7461
7609
  "path": ["button", "default", "shadow", "resting"],
7462
- "value": "0px 1px 0px 0px #1f23280a",
7610
+ "value": "0 1px 0 0 #1f23280a",
7463
7611
  "type": "shadow"
7464
7612
  },
7465
7613
  "button-inactive-bgColor": {
@@ -9161,10 +9309,22 @@
9161
9309
  {
9162
9310
  "color": "#ffffff00",
9163
9311
  "alpha": 0,
9164
- "offsetX": "0px",
9165
- "offsetY": "0px",
9166
- "blur": "0px",
9167
- "spread": "0px",
9312
+ "offsetX": {
9313
+ "value": 0,
9314
+ "unit": "px"
9315
+ },
9316
+ "offsetY": {
9317
+ "value": 0,
9318
+ "unit": "px"
9319
+ },
9320
+ "blur": {
9321
+ "value": 0,
9322
+ "unit": "px"
9323
+ },
9324
+ "spread": {
9325
+ "value": 0,
9326
+ "unit": "px"
9327
+ },
9168
9328
  "inset": false
9169
9329
  }
9170
9330
  ],
@@ -9181,10 +9341,22 @@
9181
9341
  {
9182
9342
  "color": "{base.color.blue.9}",
9183
9343
  "alpha": 0.2,
9184
- "offsetX": "0px",
9185
- "offsetY": "1px",
9186
- "blur": "0px",
9187
- "spread": "0px",
9344
+ "offsetX": {
9345
+ "value": 0,
9346
+ "unit": "px"
9347
+ },
9348
+ "offsetY": {
9349
+ "value": 1,
9350
+ "unit": "px"
9351
+ },
9352
+ "blur": {
9353
+ "value": 0,
9354
+ "unit": "px"
9355
+ },
9356
+ "spread": {
9357
+ "value": 0,
9358
+ "unit": "px"
9359
+ },
9188
9360
  "inset": true
9189
9361
  }
9190
9362
  ],
@@ -9200,10 +9372,22 @@
9200
9372
  {
9201
9373
  "color": "{base.color.transparent}",
9202
9374
  "alpha": 0,
9203
- "offsetX": "0px",
9204
- "offsetY": "0px",
9205
- "blur": "0px",
9206
- "spread": "0px",
9375
+ "offsetX": {
9376
+ "value": 0,
9377
+ "unit": "px"
9378
+ },
9379
+ "offsetY": {
9380
+ "value": 0,
9381
+ "unit": "px"
9382
+ },
9383
+ "blur": {
9384
+ "value": 0,
9385
+ "unit": "px"
9386
+ },
9387
+ "spread": {
9388
+ "value": 0,
9389
+ "unit": "px"
9390
+ },
9207
9391
  "inset": false
9208
9392
  }
9209
9393
  ],
@@ -9218,7 +9402,7 @@
9218
9402
  "name": "button-outline-shadow-selected",
9219
9403
  "attributes": {},
9220
9404
  "path": ["button", "outline", "shadow", "selected"],
9221
- "value": "inset 0px 1px 0px 0px #00215533",
9405
+ "value": "inset 0 1px 0 0 #00215533",
9222
9406
  "type": "shadow"
9223
9407
  },
9224
9408
  "button-primary-bgColor-active": {
@@ -10369,10 +10553,22 @@
10369
10553
  {
10370
10554
  "color": "#002155",
10371
10555
  "alpha": 0.3,
10372
- "offsetX": "0px",
10373
- "offsetY": "1px",
10374
- "blur": "0px",
10375
- "spread": "0px",
10556
+ "offsetX": {
10557
+ "value": 0,
10558
+ "unit": "px"
10559
+ },
10560
+ "offsetY": {
10561
+ "value": 1,
10562
+ "unit": "px"
10563
+ },
10564
+ "blur": {
10565
+ "value": 0,
10566
+ "unit": "px"
10567
+ },
10568
+ "spread": {
10569
+ "value": 0,
10570
+ "unit": "px"
10571
+ },
10376
10572
  "inset": true
10377
10573
  }
10378
10574
  ],
@@ -10385,10 +10581,22 @@
10385
10581
  {
10386
10582
  "color": "#002155",
10387
10583
  "alpha": 0.3,
10388
- "offsetX": "0px",
10389
- "offsetY": "1px",
10390
- "blur": "0px",
10391
- "spread": "0px",
10584
+ "offsetX": {
10585
+ "value": 0,
10586
+ "unit": "px"
10587
+ },
10588
+ "offsetY": {
10589
+ "value": 1,
10590
+ "unit": "px"
10591
+ },
10592
+ "blur": {
10593
+ "value": 0,
10594
+ "unit": "px"
10595
+ },
10596
+ "spread": {
10597
+ "value": 0,
10598
+ "unit": "px"
10599
+ },
10392
10600
  "inset": true
10393
10601
  }
10394
10602
  ],
@@ -10401,10 +10609,22 @@
10401
10609
  {
10402
10610
  "color": "#ffffff00",
10403
10611
  "alpha": 0,
10404
- "offsetX": "0px",
10405
- "offsetY": "0px",
10406
- "blur": "0px",
10407
- "spread": "0px",
10612
+ "offsetX": {
10613
+ "value": 0,
10614
+ "unit": "px"
10615
+ },
10616
+ "offsetY": {
10617
+ "value": 0,
10618
+ "unit": "px"
10619
+ },
10620
+ "blur": {
10621
+ "value": 0,
10622
+ "unit": "px"
10623
+ },
10624
+ "spread": {
10625
+ "value": 0,
10626
+ "unit": "px"
10627
+ },
10408
10628
  "inset": false
10409
10629
  }
10410
10630
  ],
@@ -10421,10 +10641,22 @@
10421
10641
  {
10422
10642
  "color": "{base.color.green.9}",
10423
10643
  "alpha": 0.3,
10424
- "offsetX": "0px",
10425
- "offsetY": "1px",
10426
- "blur": "0px",
10427
- "spread": "0px",
10644
+ "offsetX": {
10645
+ "value": 0,
10646
+ "unit": "px"
10647
+ },
10648
+ "offsetY": {
10649
+ "value": 1,
10650
+ "unit": "px"
10651
+ },
10652
+ "blur": {
10653
+ "value": 0,
10654
+ "unit": "px"
10655
+ },
10656
+ "spread": {
10657
+ "value": 0,
10658
+ "unit": "px"
10659
+ },
10428
10660
  "inset": true
10429
10661
  }
10430
10662
  ],
@@ -10440,10 +10672,22 @@
10440
10672
  {
10441
10673
  "color": "{base.color.blue.9}",
10442
10674
  "alpha": 0.3,
10443
- "offsetX": "0px",
10444
- "offsetY": "1px",
10445
- "blur": "0px",
10446
- "spread": "0px",
10675
+ "offsetX": {
10676
+ "value": 0,
10677
+ "unit": "px"
10678
+ },
10679
+ "offsetY": {
10680
+ "value": 1,
10681
+ "unit": "px"
10682
+ },
10683
+ "blur": {
10684
+ "value": 0,
10685
+ "unit": "px"
10686
+ },
10687
+ "spread": {
10688
+ "value": 0,
10689
+ "unit": "px"
10690
+ },
10447
10691
  "inset": true
10448
10692
  }
10449
10693
  ],
@@ -10456,10 +10700,22 @@
10456
10700
  {
10457
10701
  "color": "{base.color.blue.9}",
10458
10702
  "alpha": 0.3,
10459
- "offsetX": "0px",
10460
- "offsetY": "1px",
10461
- "blur": "0px",
10462
- "spread": "0px",
10703
+ "offsetX": {
10704
+ "value": 0,
10705
+ "unit": "px"
10706
+ },
10707
+ "offsetY": {
10708
+ "value": 1,
10709
+ "unit": "px"
10710
+ },
10711
+ "blur": {
10712
+ "value": 0,
10713
+ "unit": "px"
10714
+ },
10715
+ "spread": {
10716
+ "value": 0,
10717
+ "unit": "px"
10718
+ },
10463
10719
  "inset": true
10464
10720
  }
10465
10721
  ],
@@ -10472,10 +10728,22 @@
10472
10728
  {
10473
10729
  "color": "{base.color.transparent}",
10474
10730
  "alpha": 0,
10475
- "offsetX": "0px",
10476
- "offsetY": "0px",
10477
- "blur": "0px",
10478
- "spread": "0px",
10731
+ "offsetX": {
10732
+ "value": 0,
10733
+ "unit": "px"
10734
+ },
10735
+ "offsetY": {
10736
+ "value": 0,
10737
+ "unit": "px"
10738
+ },
10739
+ "blur": {
10740
+ "value": 0,
10741
+ "unit": "px"
10742
+ },
10743
+ "spread": {
10744
+ "value": 0,
10745
+ "unit": "px"
10746
+ },
10479
10747
  "inset": false
10480
10748
  }
10481
10749
  ],
@@ -10490,7 +10758,7 @@
10490
10758
  "name": "button-primary-shadow-selected",
10491
10759
  "attributes": {},
10492
10760
  "path": ["button", "primary", "shadow", "selected"],
10493
- "value": "inset 0px 1px 0px 0px #002d114d",
10761
+ "value": "inset 0 1px 0 0 #002d114d",
10494
10762
  "type": "shadow"
10495
10763
  },
10496
10764
  "button-star-iconColor": {
@@ -37211,6 +37479,10 @@
37211
37479
  },
37212
37480
  "org.primer.overrides": {
37213
37481
  "dark": "#ffffff"
37482
+ },
37483
+ "org.primer.llm": {
37484
+ "doNotUse": true,
37485
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37214
37486
  }
37215
37487
  },
37216
37488
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37227,6 +37499,10 @@
37227
37499
  },
37228
37500
  "org.primer.overrides": {
37229
37501
  "dark": "{base.color.neutral.0}"
37502
+ },
37503
+ "org.primer.llm": {
37504
+ "doNotUse": true,
37505
+ "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
37230
37506
  }
37231
37507
  },
37232
37508
  "key": "{fgColor.black}"
@@ -38200,6 +38476,10 @@
38200
38476
  },
38201
38477
  "org.primer.overrides": {
38202
38478
  "dark": "#1f2328"
38479
+ },
38480
+ "org.primer.llm": {
38481
+ "doNotUse": true,
38482
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38203
38483
  }
38204
38484
  },
38205
38485
  "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38216,6 +38496,10 @@
38216
38496
  },
38217
38497
  "org.primer.overrides": {
38218
38498
  "dark": "{base.color.neutral.13}"
38499
+ },
38500
+ "org.primer.llm": {
38501
+ "doNotUse": true,
38502
+ "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
38219
38503
  }
38220
38504
  },
38221
38505
  "key": "{fgColor.white}"
@@ -38241,7 +38525,10 @@
38241
38525
  "$value": {
38242
38526
  "color": "{focus.outlineColor}",
38243
38527
  "style": "solid",
38244
- "width": "2px"
38528
+ "width": {
38529
+ "value": 2,
38530
+ "unit": "px"
38531
+ }
38245
38532
  },
38246
38533
  "$type": "border",
38247
38534
  "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47406,18 +47693,42 @@
47406
47693
  {
47407
47694
  "color": "#d1d9e080",
47408
47695
  "alpha": 1,
47409
- "offsetX": "0px",
47410
- "offsetY": "0px",
47411
- "blur": "0px",
47412
- "spread": "1px"
47696
+ "offsetX": {
47697
+ "value": 0,
47698
+ "unit": "px"
47699
+ },
47700
+ "offsetY": {
47701
+ "value": 0,
47702
+ "unit": "px"
47703
+ },
47704
+ "blur": {
47705
+ "value": 0,
47706
+ "unit": "px"
47707
+ },
47708
+ "spread": {
47709
+ "value": 1,
47710
+ "unit": "px"
47711
+ }
47413
47712
  },
47414
47713
  {
47415
47714
  "color": "#ffffff",
47416
47715
  "alpha": 1,
47417
- "offsetX": "0px",
47418
- "offsetY": "24px",
47419
- "blur": "48px",
47420
- "spread": "0px"
47716
+ "offsetX": {
47717
+ "value": 0,
47718
+ "unit": "px"
47719
+ },
47720
+ "offsetY": {
47721
+ "value": 24,
47722
+ "unit": "px"
47723
+ },
47724
+ "blur": {
47725
+ "value": 48,
47726
+ "unit": "px"
47727
+ },
47728
+ "spread": {
47729
+ "value": 0,
47730
+ "unit": "px"
47731
+ }
47421
47732
  }
47422
47733
  ],
47423
47734
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47437,18 +47748,42 @@
47437
47748
  {
47438
47749
  "color": "{overlay.borderColor}",
47439
47750
  "alpha": 0,
47440
- "offsetX": "0px",
47441
- "offsetY": "0px",
47442
- "blur": "0px",
47443
- "spread": "1px"
47751
+ "offsetX": {
47752
+ "value": 0,
47753
+ "unit": "px"
47754
+ },
47755
+ "offsetY": {
47756
+ "value": 0,
47757
+ "unit": "px"
47758
+ },
47759
+ "blur": {
47760
+ "value": 0,
47761
+ "unit": "px"
47762
+ },
47763
+ "spread": {
47764
+ "value": 1,
47765
+ "unit": "px"
47766
+ }
47444
47767
  },
47445
47768
  {
47446
47769
  "color": "{base.color.neutral.12}",
47447
47770
  "alpha": 0.24,
47448
- "offsetX": "0px",
47449
- "offsetY": "40px",
47450
- "blur": "80px",
47451
- "spread": "0px"
47771
+ "offsetX": {
47772
+ "value": 0,
47773
+ "unit": "px"
47774
+ },
47775
+ "offsetY": {
47776
+ "value": 40,
47777
+ "unit": "px"
47778
+ },
47779
+ "blur": {
47780
+ "value": 80,
47781
+ "unit": "px"
47782
+ },
47783
+ "spread": {
47784
+ "value": 0,
47785
+ "unit": "px"
47786
+ }
47452
47787
  }
47453
47788
  ],
47454
47789
  "$type": "shadow",
@@ -47464,18 +47799,42 @@
47464
47799
  {
47465
47800
  "color": "{overlay.borderColor}",
47466
47801
  "alpha": 1,
47467
- "offsetX": "0px",
47468
- "offsetY": "0px",
47469
- "blur": "0px",
47470
- "spread": "1px"
47802
+ "offsetX": {
47803
+ "value": 0,
47804
+ "unit": "px"
47805
+ },
47806
+ "offsetY": {
47807
+ "value": 0,
47808
+ "unit": "px"
47809
+ },
47810
+ "blur": {
47811
+ "value": 0,
47812
+ "unit": "px"
47813
+ },
47814
+ "spread": {
47815
+ "value": 1,
47816
+ "unit": "px"
47817
+ }
47471
47818
  },
47472
47819
  {
47473
47820
  "color": "{base.color.neutral.0}",
47474
47821
  "alpha": 1,
47475
- "offsetX": "0px",
47476
- "offsetY": "24px",
47477
- "blur": "48px",
47478
- "spread": "0px"
47822
+ "offsetX": {
47823
+ "value": 0,
47824
+ "unit": "px"
47825
+ },
47826
+ "offsetY": {
47827
+ "value": 24,
47828
+ "unit": "px"
47829
+ },
47830
+ "blur": {
47831
+ "value": 48,
47832
+ "unit": "px"
47833
+ },
47834
+ "spread": {
47835
+ "value": 0,
47836
+ "unit": "px"
47837
+ }
47479
47838
  }
47480
47839
  ],
47481
47840
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47493,7 +47852,7 @@
47493
47852
  "name": "shadow-floating-large",
47494
47853
  "attributes": {},
47495
47854
  "path": ["shadow", "floating", "large"],
47496
- "value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
47855
+ "value": "0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d",
47497
47856
  "type": "shadow",
47498
47857
  "description": "Large floating shadow for modals and dialogs"
47499
47858
  },
@@ -47507,24 +47866,52 @@
47507
47866
  {
47508
47867
  "color": "#ffffff",
47509
47868
  "alpha": 0.4,
47510
- "offsetX": "0px",
47511
- "offsetY": "6px",
47512
- "blur": "12px",
47513
- "spread": "-3px"
47869
+ "offsetX": {
47870
+ "value": 0,
47871
+ "unit": "px"
47872
+ },
47873
+ "offsetY": {
47874
+ "value": 6,
47875
+ "unit": "px"
47876
+ },
47877
+ "blur": {
47878
+ "value": 12,
47879
+ "unit": "px"
47880
+ },
47881
+ "spread": {
47882
+ "value": -3,
47883
+ "unit": "px"
47884
+ }
47514
47885
  },
47515
47886
  {
47516
47887
  "color": "#ffffff",
47517
47888
  "alpha": 0.4,
47518
- "offsetX": "0px",
47519
- "offsetY": "6px",
47520
- "blur": "18px",
47521
- "spread": "0px"
47889
+ "offsetX": {
47890
+ "value": 0,
47891
+ "unit": "px"
47892
+ },
47893
+ "offsetY": {
47894
+ "value": 6,
47895
+ "unit": "px"
47896
+ },
47897
+ "blur": {
47898
+ "value": 18,
47899
+ "unit": "px"
47900
+ },
47901
+ "spread": {
47902
+ "value": 0,
47903
+ "unit": "px"
47904
+ }
47522
47905
  }
47523
47906
  ],
47524
47907
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47525
47908
  "isSource": true,
47526
47909
  "$type": "shadow"
47527
47910
  }
47911
+ },
47912
+ "org.primer.llm": {
47913
+ "usage": ["legacy-component", "backward-compatibility"],
47914
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47528
47915
  }
47529
47916
  },
47530
47917
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47534,21 +47921,46 @@
47534
47921
  {
47535
47922
  "color": "{base.color.neutral.12}",
47536
47923
  "alpha": 0.04,
47537
- "offsetX": "0px",
47538
- "offsetY": "6px",
47539
- "blur": "12px",
47540
- "spread": "-3px"
47924
+ "offsetX": {
47925
+ "value": 0,
47926
+ "unit": "px"
47927
+ },
47928
+ "offsetY": {
47929
+ "value": 6,
47930
+ "unit": "px"
47931
+ },
47932
+ "blur": {
47933
+ "value": 12,
47934
+ "unit": "px"
47935
+ },
47936
+ "spread": {
47937
+ "value": -3,
47938
+ "unit": "px"
47939
+ }
47541
47940
  },
47542
47941
  {
47543
47942
  "color": "{base.color.neutral.12}",
47544
47943
  "alpha": 0.12,
47545
- "offsetX": "0px",
47546
- "offsetY": "6px",
47547
- "blur": "18px",
47548
- "spread": "0px"
47944
+ "offsetX": {
47945
+ "value": 0,
47946
+ "unit": "px"
47947
+ },
47948
+ "offsetY": {
47949
+ "value": 6,
47950
+ "unit": "px"
47951
+ },
47952
+ "blur": {
47953
+ "value": 18,
47954
+ "unit": "px"
47955
+ },
47956
+ "spread": {
47957
+ "value": 0,
47958
+ "unit": "px"
47959
+ }
47549
47960
  }
47550
47961
  ],
47551
47962
  "$type": "shadow",
47963
+ "$description": "Legacy floating shadow for backward compatibility",
47552
47964
  "$extensions": {
47553
47965
  "org.primer.figma": {},
47554
47966
  "org.primer.overrides": {
@@ -47557,24 +47969,52 @@
47557
47969
  {
47558
47970
  "color": "{base.color.neutral.0}",
47559
47971
  "alpha": 0.4,
47560
- "offsetX": "0px",
47561
- "offsetY": "6px",
47562
- "blur": "12px",
47563
- "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
+ }
47564
47988
  },
47565
47989
  {
47566
47990
  "color": "{base.color.neutral.0}",
47567
47991
  "alpha": 0.4,
47568
- "offsetX": "0px",
47569
- "offsetY": "6px",
47570
- "blur": "18px",
47571
- "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
+ }
47572
48008
  }
47573
48009
  ],
47574
48010
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47575
48011
  "isSource": true,
47576
48012
  "$type": "shadow"
47577
48013
  }
48014
+ },
48015
+ "org.primer.llm": {
48016
+ "usage": ["legacy-component", "backward-compatibility"],
48017
+ "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
47578
48018
  }
47579
48019
  },
47580
48020
  "key": "{shadow.floating.legacy}"
@@ -47582,8 +48022,9 @@
47582
48022
  "name": "shadow-floating-legacy",
47583
48023
  "attributes": {},
47584
48024
  "path": ["shadow", "floating", "legacy"],
47585
- "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
47586
- "type": "shadow"
48025
+ "value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
48026
+ "type": "shadow",
48027
+ "description": "Legacy floating shadow for backward compatibility"
47587
48028
  },
47588
48029
  "shadow-floating-medium": {
47589
48030
  "key": "{shadow.floating.medium}",
@@ -47598,48 +48039,112 @@
47598
48039
  {
47599
48040
  "color": "#d1d9e080",
47600
48041
  "alpha": 1,
47601
- "offsetX": "0px",
47602
- "offsetY": "0px",
47603
- "blur": "0px",
47604
- "spread": "1px"
48042
+ "offsetX": {
48043
+ "value": 0,
48044
+ "unit": "px"
48045
+ },
48046
+ "offsetY": {
48047
+ "value": 0,
48048
+ "unit": "px"
48049
+ },
48050
+ "blur": {
48051
+ "value": 0,
48052
+ "unit": "px"
48053
+ },
48054
+ "spread": {
48055
+ "value": 1,
48056
+ "unit": "px"
48057
+ }
47605
48058
  },
47606
48059
  {
47607
48060
  "color": "#ffffff",
47608
48061
  "alpha": 0.4,
47609
- "offsetX": "0px",
47610
- "offsetY": "8px",
47611
- "blur": "16px",
47612
- "spread": "-4px"
48062
+ "offsetX": {
48063
+ "value": 0,
48064
+ "unit": "px"
48065
+ },
48066
+ "offsetY": {
48067
+ "value": 8,
48068
+ "unit": "px"
48069
+ },
48070
+ "blur": {
48071
+ "value": 16,
48072
+ "unit": "px"
48073
+ },
48074
+ "spread": {
48075
+ "value": -4,
48076
+ "unit": "px"
48077
+ }
47613
48078
  },
47614
48079
  {
47615
48080
  "color": "#ffffff",
47616
48081
  "alpha": 0.4,
47617
- "offsetX": "0px",
47618
- "offsetY": "4px",
47619
- "blur": "32px",
47620
- "spread": "-4px"
48082
+ "offsetX": {
48083
+ "value": 0,
48084
+ "unit": "px"
48085
+ },
48086
+ "offsetY": {
48087
+ "value": 4,
48088
+ "unit": "px"
48089
+ },
48090
+ "blur": {
48091
+ "value": 32,
48092
+ "unit": "px"
48093
+ },
48094
+ "spread": {
48095
+ "value": -4,
48096
+ "unit": "px"
48097
+ }
47621
48098
  },
47622
48099
  {
47623
48100
  "color": "#ffffff",
47624
48101
  "alpha": 0.4,
47625
- "offsetX": "0px",
47626
- "offsetY": "24px",
47627
- "blur": "48px",
47628
- "spread": "-12px"
48102
+ "offsetX": {
48103
+ "value": 0,
48104
+ "unit": "px"
48105
+ },
48106
+ "offsetY": {
48107
+ "value": 24,
48108
+ "unit": "px"
48109
+ },
48110
+ "blur": {
48111
+ "value": 48,
48112
+ "unit": "px"
48113
+ },
48114
+ "spread": {
48115
+ "value": -12,
48116
+ "unit": "px"
48117
+ }
47629
48118
  },
47630
48119
  {
47631
48120
  "color": "#ffffff",
47632
48121
  "alpha": 0.4,
47633
- "offsetX": "0px",
47634
- "offsetY": "48px",
47635
- "blur": "96px",
47636
- "spread": "-24px"
48122
+ "offsetX": {
48123
+ "value": 0,
48124
+ "unit": "px"
48125
+ },
48126
+ "offsetY": {
48127
+ "value": 48,
48128
+ "unit": "px"
48129
+ },
48130
+ "blur": {
48131
+ "value": 96,
48132
+ "unit": "px"
48133
+ },
48134
+ "spread": {
48135
+ "value": -24,
48136
+ "unit": "px"
48137
+ }
47637
48138
  }
47638
48139
  ],
47639
48140
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47640
48141
  "isSource": true,
47641
48142
  "$type": "shadow"
47642
48143
  }
48144
+ },
48145
+ "org.primer.llm": {
48146
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48147
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47643
48148
  }
47644
48149
  },
47645
48150
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47649,45 +48154,106 @@
47649
48154
  {
47650
48155
  "color": "{overlay.borderColor}",
47651
48156
  "alpha": 0,
47652
- "offsetX": "0px",
47653
- "offsetY": "0px",
47654
- "blur": "0px",
47655
- "spread": "1px"
48157
+ "offsetX": {
48158
+ "value": 0,
48159
+ "unit": "px"
48160
+ },
48161
+ "offsetY": {
48162
+ "value": 0,
48163
+ "unit": "px"
48164
+ },
48165
+ "blur": {
48166
+ "value": 0,
48167
+ "unit": "px"
48168
+ },
48169
+ "spread": {
48170
+ "value": 1,
48171
+ "unit": "px"
48172
+ }
47656
48173
  },
47657
48174
  {
47658
48175
  "color": "{base.color.neutral.12}",
47659
48176
  "alpha": 0.08,
47660
- "offsetX": "0px",
47661
- "offsetY": "8px",
47662
- "blur": "16px",
47663
- "spread": "-4px"
48177
+ "offsetX": {
48178
+ "value": 0,
48179
+ "unit": "px"
48180
+ },
48181
+ "offsetY": {
48182
+ "value": 8,
48183
+ "unit": "px"
48184
+ },
48185
+ "blur": {
48186
+ "value": 16,
48187
+ "unit": "px"
48188
+ },
48189
+ "spread": {
48190
+ "value": -4,
48191
+ "unit": "px"
48192
+ }
47664
48193
  },
47665
48194
  {
47666
48195
  "color": "{base.color.neutral.12}",
47667
48196
  "alpha": 0.08,
47668
- "offsetX": "0px",
47669
- "offsetY": "4px",
47670
- "blur": "32px",
47671
- "spread": "-4px"
48197
+ "offsetX": {
48198
+ "value": 0,
48199
+ "unit": "px"
48200
+ },
48201
+ "offsetY": {
48202
+ "value": 4,
48203
+ "unit": "px"
48204
+ },
48205
+ "blur": {
48206
+ "value": 32,
48207
+ "unit": "px"
48208
+ },
48209
+ "spread": {
48210
+ "value": -4,
48211
+ "unit": "px"
48212
+ }
47672
48213
  },
47673
48214
  {
47674
48215
  "color": "{base.color.neutral.12}",
47675
48216
  "alpha": 0.08,
47676
- "offsetX": "0px",
47677
- "offsetY": "24px",
47678
- "blur": "48px",
47679
- "spread": "-12px"
48217
+ "offsetX": {
48218
+ "value": 0,
48219
+ "unit": "px"
48220
+ },
48221
+ "offsetY": {
48222
+ "value": 24,
48223
+ "unit": "px"
48224
+ },
48225
+ "blur": {
48226
+ "value": 48,
48227
+ "unit": "px"
48228
+ },
48229
+ "spread": {
48230
+ "value": -12,
48231
+ "unit": "px"
48232
+ }
47680
48233
  },
47681
48234
  {
47682
48235
  "color": "{base.color.neutral.12}",
47683
48236
  "alpha": 0.08,
47684
- "offsetX": "0px",
47685
- "offsetY": "48px",
47686
- "blur": "96px",
47687
- "spread": "-24px"
48237
+ "offsetX": {
48238
+ "value": 0,
48239
+ "unit": "px"
48240
+ },
48241
+ "offsetY": {
48242
+ "value": 48,
48243
+ "unit": "px"
48244
+ },
48245
+ "blur": {
48246
+ "value": 96,
48247
+ "unit": "px"
48248
+ },
48249
+ "spread": {
48250
+ "value": -24,
48251
+ "unit": "px"
48252
+ }
47688
48253
  }
47689
48254
  ],
47690
48255
  "$type": "shadow",
48256
+ "$description": "Medium floating shadow for popovers and action menus",
47691
48257
  "$extensions": {
47692
48258
  "org.primer.figma": {
47693
48259
  "collection": "mode",
@@ -47699,48 +48265,112 @@
47699
48265
  {
47700
48266
  "color": "{overlay.borderColor}",
47701
48267
  "alpha": 1,
47702
- "offsetX": "0px",
47703
- "offsetY": "0px",
47704
- "blur": "0px",
47705
- "spread": "1px"
48268
+ "offsetX": {
48269
+ "value": 0,
48270
+ "unit": "px"
48271
+ },
48272
+ "offsetY": {
48273
+ "value": 0,
48274
+ "unit": "px"
48275
+ },
48276
+ "blur": {
48277
+ "value": 0,
48278
+ "unit": "px"
48279
+ },
48280
+ "spread": {
48281
+ "value": 1,
48282
+ "unit": "px"
48283
+ }
47706
48284
  },
47707
48285
  {
47708
48286
  "color": "{base.color.neutral.0}",
47709
48287
  "alpha": 0.4,
47710
- "offsetX": "0px",
47711
- "offsetY": "8px",
47712
- "blur": "16px",
47713
- "spread": "-4px"
48288
+ "offsetX": {
48289
+ "value": 0,
48290
+ "unit": "px"
48291
+ },
48292
+ "offsetY": {
48293
+ "value": 8,
48294
+ "unit": "px"
48295
+ },
48296
+ "blur": {
48297
+ "value": 16,
48298
+ "unit": "px"
48299
+ },
48300
+ "spread": {
48301
+ "value": -4,
48302
+ "unit": "px"
48303
+ }
47714
48304
  },
47715
48305
  {
47716
48306
  "color": "{base.color.neutral.0}",
47717
48307
  "alpha": 0.4,
47718
- "offsetX": "0px",
47719
- "offsetY": "4px",
47720
- "blur": "32px",
47721
- "spread": "-4px"
48308
+ "offsetX": {
48309
+ "value": 0,
48310
+ "unit": "px"
48311
+ },
48312
+ "offsetY": {
48313
+ "value": 4,
48314
+ "unit": "px"
48315
+ },
48316
+ "blur": {
48317
+ "value": 32,
48318
+ "unit": "px"
48319
+ },
48320
+ "spread": {
48321
+ "value": -4,
48322
+ "unit": "px"
48323
+ }
47722
48324
  },
47723
48325
  {
47724
48326
  "color": "{base.color.neutral.0}",
47725
48327
  "alpha": 0.4,
47726
- "offsetX": "0px",
47727
- "offsetY": "24px",
47728
- "blur": "48px",
47729
- "spread": "-12px"
48328
+ "offsetX": {
48329
+ "value": 0,
48330
+ "unit": "px"
48331
+ },
48332
+ "offsetY": {
48333
+ "value": 24,
48334
+ "unit": "px"
48335
+ },
48336
+ "blur": {
48337
+ "value": 48,
48338
+ "unit": "px"
48339
+ },
48340
+ "spread": {
48341
+ "value": -12,
48342
+ "unit": "px"
48343
+ }
47730
48344
  },
47731
48345
  {
47732
48346
  "color": "{base.color.neutral.0}",
47733
48347
  "alpha": 0.4,
47734
- "offsetX": "0px",
47735
- "offsetY": "48px",
47736
- "blur": "96px",
47737
- "spread": "-24px"
48348
+ "offsetX": {
48349
+ "value": 0,
48350
+ "unit": "px"
48351
+ },
48352
+ "offsetY": {
48353
+ "value": 48,
48354
+ "unit": "px"
48355
+ },
48356
+ "blur": {
48357
+ "value": 96,
48358
+ "unit": "px"
48359
+ },
48360
+ "spread": {
48361
+ "value": -24,
48362
+ "unit": "px"
48363
+ }
47738
48364
  }
47739
48365
  ],
47740
48366
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47741
48367
  "isSource": true,
47742
48368
  "$type": "shadow"
47743
48369
  }
48370
+ },
48371
+ "org.primer.llm": {
48372
+ "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
48373
+ "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
47744
48374
  }
47745
48375
  },
47746
48376
  "key": "{shadow.floating.medium}"
@@ -47748,8 +48378,9 @@
47748
48378
  "name": "shadow-floating-medium",
47749
48379
  "attributes": {},
47750
48380
  "path": ["shadow", "floating", "medium"],
47751
- "value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
47752
- "type": "shadow"
48381
+ "value": "0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
48382
+ "type": "shadow",
48383
+ "description": "Medium floating shadow for popovers and action menus"
47753
48384
  },
47754
48385
  "shadow-floating-small": {
47755
48386
  "key": "{shadow.floating.small}",
@@ -47764,26 +48395,62 @@
47764
48395
  {
47765
48396
  "color": "#d1d9e080",
47766
48397
  "alpha": 1,
47767
- "offsetX": "0px",
47768
- "offsetY": "0px",
47769
- "blur": "0px",
47770
- "spread": "1px"
48398
+ "offsetX": {
48399
+ "value": 0,
48400
+ "unit": "px"
48401
+ },
48402
+ "offsetY": {
48403
+ "value": 0,
48404
+ "unit": "px"
48405
+ },
48406
+ "blur": {
48407
+ "value": 0,
48408
+ "unit": "px"
48409
+ },
48410
+ "spread": {
48411
+ "value": 1,
48412
+ "unit": "px"
48413
+ }
47771
48414
  },
47772
48415
  {
47773
48416
  "color": "#ffffff",
47774
48417
  "alpha": 0.4,
47775
- "offsetX": "0px",
47776
- "offsetY": "6px",
47777
- "blur": "12px",
47778
- "spread": "-3px"
48418
+ "offsetX": {
48419
+ "value": 0,
48420
+ "unit": "px"
48421
+ },
48422
+ "offsetY": {
48423
+ "value": 6,
48424
+ "unit": "px"
48425
+ },
48426
+ "blur": {
48427
+ "value": 12,
48428
+ "unit": "px"
48429
+ },
48430
+ "spread": {
48431
+ "value": -3,
48432
+ "unit": "px"
48433
+ }
47779
48434
  },
47780
48435
  {
47781
48436
  "color": "#ffffff",
47782
48437
  "alpha": 0.4,
47783
- "offsetX": "0px",
47784
- "offsetY": "6px",
47785
- "blur": "18px",
47786
- "spread": "0px"
48438
+ "offsetX": {
48439
+ "value": 0,
48440
+ "unit": "px"
48441
+ },
48442
+ "offsetY": {
48443
+ "value": 6,
48444
+ "unit": "px"
48445
+ },
48446
+ "blur": {
48447
+ "value": 18,
48448
+ "unit": "px"
48449
+ },
48450
+ "spread": {
48451
+ "value": 0,
48452
+ "unit": "px"
48453
+ }
47787
48454
  }
47788
48455
  ],
47789
48456
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47803,26 +48470,62 @@
47803
48470
  {
47804
48471
  "color": "{overlay.borderColor}",
47805
48472
  "alpha": 0.5,
47806
- "offsetX": "0px",
47807
- "offsetY": "0px",
47808
- "blur": "0px",
47809
- "spread": "1px"
48473
+ "offsetX": {
48474
+ "value": 0,
48475
+ "unit": "px"
48476
+ },
48477
+ "offsetY": {
48478
+ "value": 0,
48479
+ "unit": "px"
48480
+ },
48481
+ "blur": {
48482
+ "value": 0,
48483
+ "unit": "px"
48484
+ },
48485
+ "spread": {
48486
+ "value": 1,
48487
+ "unit": "px"
48488
+ }
47810
48489
  },
47811
48490
  {
47812
48491
  "color": "{base.color.neutral.12}",
47813
48492
  "alpha": 0.04,
47814
- "offsetX": "0px",
47815
- "offsetY": "6px",
47816
- "blur": "12px",
47817
- "spread": "-3px"
48493
+ "offsetX": {
48494
+ "value": 0,
48495
+ "unit": "px"
48496
+ },
48497
+ "offsetY": {
48498
+ "value": 6,
48499
+ "unit": "px"
48500
+ },
48501
+ "blur": {
48502
+ "value": 12,
48503
+ "unit": "px"
48504
+ },
48505
+ "spread": {
48506
+ "value": -3,
48507
+ "unit": "px"
48508
+ }
47818
48509
  },
47819
48510
  {
47820
48511
  "color": "{base.color.neutral.12}",
47821
48512
  "alpha": 0.12,
47822
- "offsetX": "0px",
47823
- "offsetY": "6px",
47824
- "blur": "18px",
47825
- "spread": "0px"
48513
+ "offsetX": {
48514
+ "value": 0,
48515
+ "unit": "px"
48516
+ },
48517
+ "offsetY": {
48518
+ "value": 6,
48519
+ "unit": "px"
48520
+ },
48521
+ "blur": {
48522
+ "value": 18,
48523
+ "unit": "px"
48524
+ },
48525
+ "spread": {
48526
+ "value": 0,
48527
+ "unit": "px"
48528
+ }
47826
48529
  }
47827
48530
  ],
47828
48531
  "$type": "shadow",
@@ -47838,26 +48541,62 @@
47838
48541
  {
47839
48542
  "color": "{overlay.borderColor}",
47840
48543
  "alpha": 1,
47841
- "offsetX": "0px",
47842
- "offsetY": "0px",
47843
- "blur": "0px",
47844
- "spread": "1px"
48544
+ "offsetX": {
48545
+ "value": 0,
48546
+ "unit": "px"
48547
+ },
48548
+ "offsetY": {
48549
+ "value": 0,
48550
+ "unit": "px"
48551
+ },
48552
+ "blur": {
48553
+ "value": 0,
48554
+ "unit": "px"
48555
+ },
48556
+ "spread": {
48557
+ "value": 1,
48558
+ "unit": "px"
48559
+ }
47845
48560
  },
47846
48561
  {
47847
48562
  "color": "{base.color.neutral.0}",
47848
48563
  "alpha": 0.4,
47849
- "offsetX": "0px",
47850
- "offsetY": "6px",
47851
- "blur": "12px",
47852
- "spread": "-3px"
48564
+ "offsetX": {
48565
+ "value": 0,
48566
+ "unit": "px"
48567
+ },
48568
+ "offsetY": {
48569
+ "value": 6,
48570
+ "unit": "px"
48571
+ },
48572
+ "blur": {
48573
+ "value": 12,
48574
+ "unit": "px"
48575
+ },
48576
+ "spread": {
48577
+ "value": -3,
48578
+ "unit": "px"
48579
+ }
47853
48580
  },
47854
48581
  {
47855
48582
  "color": "{base.color.neutral.0}",
47856
48583
  "alpha": 0.4,
47857
- "offsetX": "0px",
47858
- "offsetY": "6px",
47859
- "blur": "18px",
47860
- "spread": "0px"
48584
+ "offsetX": {
48585
+ "value": 0,
48586
+ "unit": "px"
48587
+ },
48588
+ "offsetY": {
48589
+ "value": 6,
48590
+ "unit": "px"
48591
+ },
48592
+ "blur": {
48593
+ "value": 18,
48594
+ "unit": "px"
48595
+ },
48596
+ "spread": {
48597
+ "value": 0,
48598
+ "unit": "px"
48599
+ }
47861
48600
  }
47862
48601
  ],
47863
48602
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47875,7 +48614,7 @@
47875
48614
  "name": "shadow-floating-small",
47876
48615
  "attributes": {},
47877
48616
  "path": ["shadow", "floating", "small"],
47878
- "value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
48617
+ "value": "0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
47879
48618
  "type": "shadow",
47880
48619
  "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
47881
48620
  },
@@ -47892,24 +48631,52 @@
47892
48631
  {
47893
48632
  "color": "#d1d9e080",
47894
48633
  "alpha": 1,
47895
- "offsetX": "0px",
47896
- "offsetY": "0px",
47897
- "blur": "0px",
47898
- "spread": "1px"
48634
+ "offsetX": {
48635
+ "value": 0,
48636
+ "unit": "px"
48637
+ },
48638
+ "offsetY": {
48639
+ "value": 0,
48640
+ "unit": "px"
48641
+ },
48642
+ "blur": {
48643
+ "value": 0,
48644
+ "unit": "px"
48645
+ },
48646
+ "spread": {
48647
+ "value": 1,
48648
+ "unit": "px"
48649
+ }
47899
48650
  },
47900
48651
  {
47901
48652
  "color": "#ffffff",
47902
48653
  "alpha": 1,
47903
- "offsetX": "0px",
47904
- "offsetY": "32px",
47905
- "blur": "64px",
47906
- "spread": "0px"
48654
+ "offsetX": {
48655
+ "value": 0,
48656
+ "unit": "px"
48657
+ },
48658
+ "offsetY": {
48659
+ "value": 32,
48660
+ "unit": "px"
48661
+ },
48662
+ "blur": {
48663
+ "value": 64,
48664
+ "unit": "px"
48665
+ },
48666
+ "spread": {
48667
+ "value": 0,
48668
+ "unit": "px"
48669
+ }
47907
48670
  }
47908
48671
  ],
47909
48672
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47910
48673
  "isSource": true,
47911
48674
  "$type": "shadow"
47912
48675
  }
48676
+ },
48677
+ "org.primer.llm": {
48678
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48679
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47913
48680
  }
47914
48681
  },
47915
48682
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47919,21 +48686,46 @@
47919
48686
  {
47920
48687
  "color": "{overlay.borderColor}",
47921
48688
  "alpha": 0,
47922
- "offsetX": "0px",
47923
- "offsetY": "0px",
47924
- "blur": "0px",
47925
- "spread": "1px"
48689
+ "offsetX": {
48690
+ "value": 0,
48691
+ "unit": "px"
48692
+ },
48693
+ "offsetY": {
48694
+ "value": 0,
48695
+ "unit": "px"
48696
+ },
48697
+ "blur": {
48698
+ "value": 0,
48699
+ "unit": "px"
48700
+ },
48701
+ "spread": {
48702
+ "value": 1,
48703
+ "unit": "px"
48704
+ }
47926
48705
  },
47927
48706
  {
47928
48707
  "color": "{base.color.neutral.12}",
47929
48708
  "alpha": 0.32,
47930
- "offsetX": "0px",
47931
- "offsetY": "56px",
47932
- "blur": "112px",
47933
- "spread": "0px"
48709
+ "offsetX": {
48710
+ "value": 0,
48711
+ "unit": "px"
48712
+ },
48713
+ "offsetY": {
48714
+ "value": 56,
48715
+ "unit": "px"
48716
+ },
48717
+ "blur": {
48718
+ "value": 112,
48719
+ "unit": "px"
48720
+ },
48721
+ "spread": {
48722
+ "value": 0,
48723
+ "unit": "px"
48724
+ }
47934
48725
  }
47935
48726
  ],
47936
48727
  "$type": "shadow",
48728
+ "$description": "Extra large floating shadow for full-screen overlays and sheets",
47937
48729
  "$extensions": {
47938
48730
  "org.primer.figma": {
47939
48731
  "collection": "mode",
@@ -47945,24 +48737,52 @@
47945
48737
  {
47946
48738
  "color": "{overlay.borderColor}",
47947
48739
  "alpha": 1,
47948
- "offsetX": "0px",
47949
- "offsetY": "0px",
47950
- "blur": "0px",
47951
- "spread": "1px"
48740
+ "offsetX": {
48741
+ "value": 0,
48742
+ "unit": "px"
48743
+ },
48744
+ "offsetY": {
48745
+ "value": 0,
48746
+ "unit": "px"
48747
+ },
48748
+ "blur": {
48749
+ "value": 0,
48750
+ "unit": "px"
48751
+ },
48752
+ "spread": {
48753
+ "value": 1,
48754
+ "unit": "px"
48755
+ }
47952
48756
  },
47953
48757
  {
47954
48758
  "color": "{base.color.neutral.0}",
47955
48759
  "alpha": 1,
47956
- "offsetX": "0px",
47957
- "offsetY": "32px",
47958
- "blur": "64px",
47959
- "spread": "0px"
48760
+ "offsetX": {
48761
+ "value": 0,
48762
+ "unit": "px"
48763
+ },
48764
+ "offsetY": {
48765
+ "value": 32,
48766
+ "unit": "px"
48767
+ },
48768
+ "blur": {
48769
+ "value": 64,
48770
+ "unit": "px"
48771
+ },
48772
+ "spread": {
48773
+ "value": 0,
48774
+ "unit": "px"
48775
+ }
47960
48776
  }
47961
48777
  ],
47962
48778
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47963
48779
  "isSource": true,
47964
48780
  "$type": "shadow"
47965
48781
  }
48782
+ },
48783
+ "org.primer.llm": {
48784
+ "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
48785
+ "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
47966
48786
  }
47967
48787
  },
47968
48788
  "key": "{shadow.floating.xlarge}"
@@ -47970,8 +48790,9 @@
47970
48790
  "name": "shadow-floating-xlarge",
47971
48791
  "attributes": {},
47972
48792
  "path": ["shadow", "floating", "xlarge"],
47973
- "value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
47974
- "type": "shadow"
48793
+ "value": "0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52",
48794
+ "type": "shadow",
48795
+ "description": "Extra large floating shadow for full-screen overlays and sheets"
47975
48796
  },
47976
48797
  "shadow-inset": {
47977
48798
  "key": "{shadow.inset}",
@@ -47985,16 +48806,32 @@
47985
48806
  "$value": {
47986
48807
  "color": "#ffffff",
47987
48808
  "alpha": 0.24,
47988
- "offsetX": "0px",
47989
- "offsetY": "1px",
47990
- "blur": "0px",
47991
- "spread": "0px",
48809
+ "offsetX": {
48810
+ "value": 0,
48811
+ "unit": "px"
48812
+ },
48813
+ "offsetY": {
48814
+ "value": 1,
48815
+ "unit": "px"
48816
+ },
48817
+ "blur": {
48818
+ "value": 0,
48819
+ "unit": "px"
48820
+ },
48821
+ "spread": {
48822
+ "value": 0,
48823
+ "unit": "px"
48824
+ },
47992
48825
  "inset": true
47993
48826
  },
47994
48827
  "filePath": "src/tokens/functional/shadow/shadow.json5",
47995
48828
  "isSource": true,
47996
48829
  "$type": "shadow"
47997
48830
  }
48831
+ },
48832
+ "org.primer.llm": {
48833
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48834
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
47998
48835
  }
47999
48836
  },
48000
48837
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48003,13 +48840,26 @@
48003
48840
  "$value": {
48004
48841
  "color": "{base.color.neutral.13}",
48005
48842
  "alpha": 0.04,
48006
- "offsetX": "0px",
48007
- "offsetY": "1px",
48008
- "blur": "0px",
48009
- "spread": "0px",
48843
+ "offsetX": {
48844
+ "value": 0,
48845
+ "unit": "px"
48846
+ },
48847
+ "offsetY": {
48848
+ "value": 1,
48849
+ "unit": "px"
48850
+ },
48851
+ "blur": {
48852
+ "value": 0,
48853
+ "unit": "px"
48854
+ },
48855
+ "spread": {
48856
+ "value": 0,
48857
+ "unit": "px"
48858
+ },
48010
48859
  "inset": true
48011
48860
  },
48012
48861
  "$type": "shadow",
48862
+ "$description": "Inset shadow for recessed elements",
48013
48863
  "$extensions": {
48014
48864
  "org.primer.figma": {
48015
48865
  "collection": "mode",
@@ -48020,16 +48870,32 @@
48020
48870
  "$value": {
48021
48871
  "color": "{base.color.neutral.0}",
48022
48872
  "alpha": 0.24,
48023
- "offsetX": "0px",
48024
- "offsetY": "1px",
48025
- "blur": "0px",
48026
- "spread": "0px",
48873
+ "offsetX": {
48874
+ "value": 0,
48875
+ "unit": "px"
48876
+ },
48877
+ "offsetY": {
48878
+ "value": 1,
48879
+ "unit": "px"
48880
+ },
48881
+ "blur": {
48882
+ "value": 0,
48883
+ "unit": "px"
48884
+ },
48885
+ "spread": {
48886
+ "value": 0,
48887
+ "unit": "px"
48888
+ },
48027
48889
  "inset": true
48028
48890
  },
48029
48891
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48030
48892
  "isSource": true,
48031
48893
  "$type": "shadow"
48032
48894
  }
48895
+ },
48896
+ "org.primer.llm": {
48897
+ "usage": ["input-field", "pressed-button", "recessed-area", "well"],
48898
+ "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
48033
48899
  }
48034
48900
  },
48035
48901
  "key": "{shadow.inset}"
@@ -48037,8 +48903,9 @@
48037
48903
  "name": "shadow-inset",
48038
48904
  "attributes": {},
48039
48905
  "path": ["shadow", "inset"],
48040
- "value": "inset 0px 1px 0px 0px #1f23280a",
48041
- "type": "shadow"
48906
+ "value": "inset 0 1px 0 0 #1f23280a",
48907
+ "type": "shadow",
48908
+ "description": "Inset shadow for recessed elements"
48042
48909
  },
48043
48910
  "shadow-resting-medium": {
48044
48911
  "key": "{shadow.resting.medium}",
@@ -48053,24 +48920,52 @@
48053
48920
  {
48054
48921
  "color": "#ffffff",
48055
48922
  "alpha": 0.4,
48056
- "offsetX": "0px",
48057
- "offsetY": "1px",
48058
- "blur": "1px",
48059
- "spread": "0px"
48923
+ "offsetX": {
48924
+ "value": 0,
48925
+ "unit": "px"
48926
+ },
48927
+ "offsetY": {
48928
+ "value": 1,
48929
+ "unit": "px"
48930
+ },
48931
+ "blur": {
48932
+ "value": 1,
48933
+ "unit": "px"
48934
+ },
48935
+ "spread": {
48936
+ "value": 0,
48937
+ "unit": "px"
48938
+ }
48060
48939
  },
48061
48940
  {
48062
48941
  "color": "#ffffff",
48063
48942
  "alpha": 0.8,
48064
- "offsetX": "0px",
48065
- "offsetY": "3px",
48066
- "blur": "6px",
48067
- "spread": "0px"
48943
+ "offsetX": {
48944
+ "value": 0,
48945
+ "unit": "px"
48946
+ },
48947
+ "offsetY": {
48948
+ "value": 3,
48949
+ "unit": "px"
48950
+ },
48951
+ "blur": {
48952
+ "value": 6,
48953
+ "unit": "px"
48954
+ },
48955
+ "spread": {
48956
+ "value": 0,
48957
+ "unit": "px"
48958
+ }
48068
48959
  }
48069
48960
  ],
48070
48961
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48071
48962
  "isSource": true,
48072
48963
  "$type": "shadow"
48073
48964
  }
48965
+ },
48966
+ "org.primer.llm": {
48967
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
48968
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48074
48969
  }
48075
48970
  },
48076
48971
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48080,21 +48975,46 @@
48080
48975
  {
48081
48976
  "color": "{base.color.neutral.12}",
48082
48977
  "alpha": 0.1,
48083
- "offsetX": "0px",
48084
- "offsetY": "1px",
48085
- "blur": "1px",
48086
- "spread": "0px"
48978
+ "offsetX": {
48979
+ "value": 0,
48980
+ "unit": "px"
48981
+ },
48982
+ "offsetY": {
48983
+ "value": 1,
48984
+ "unit": "px"
48985
+ },
48986
+ "blur": {
48987
+ "value": 1,
48988
+ "unit": "px"
48989
+ },
48990
+ "spread": {
48991
+ "value": 0,
48992
+ "unit": "px"
48993
+ }
48087
48994
  },
48088
48995
  {
48089
48996
  "color": "{base.color.neutral.12}",
48090
48997
  "alpha": 0.12,
48091
- "offsetX": "0px",
48092
- "offsetY": "3px",
48093
- "blur": "6px",
48094
- "spread": "0px"
48998
+ "offsetX": {
48999
+ "value": 0,
49000
+ "unit": "px"
49001
+ },
49002
+ "offsetY": {
49003
+ "value": 3,
49004
+ "unit": "px"
49005
+ },
49006
+ "blur": {
49007
+ "value": 6,
49008
+ "unit": "px"
49009
+ },
49010
+ "spread": {
49011
+ "value": 0,
49012
+ "unit": "px"
49013
+ }
48095
49014
  }
48096
49015
  ],
48097
49016
  "$type": "shadow",
49017
+ "$description": "Medium resting shadow for cards and elevated surfaces",
48098
49018
  "$extensions": {
48099
49019
  "org.primer.figma": {
48100
49020
  "collection": "mode",
@@ -48106,24 +49026,52 @@
48106
49026
  {
48107
49027
  "color": "{base.color.neutral.0}",
48108
49028
  "alpha": 0.4,
48109
- "offsetX": "0px",
48110
- "offsetY": "1px",
48111
- "blur": "1px",
48112
- "spread": "0px"
49029
+ "offsetX": {
49030
+ "value": 0,
49031
+ "unit": "px"
49032
+ },
49033
+ "offsetY": {
49034
+ "value": 1,
49035
+ "unit": "px"
49036
+ },
49037
+ "blur": {
49038
+ "value": 1,
49039
+ "unit": "px"
49040
+ },
49041
+ "spread": {
49042
+ "value": 0,
49043
+ "unit": "px"
49044
+ }
48113
49045
  },
48114
49046
  {
48115
49047
  "color": "{base.color.neutral.0}",
48116
49048
  "alpha": 0.8,
48117
- "offsetX": "0px",
48118
- "offsetY": "3px",
48119
- "blur": "6px",
48120
- "spread": "0px"
49049
+ "offsetX": {
49050
+ "value": 0,
49051
+ "unit": "px"
49052
+ },
49053
+ "offsetY": {
49054
+ "value": 3,
49055
+ "unit": "px"
49056
+ },
49057
+ "blur": {
49058
+ "value": 6,
49059
+ "unit": "px"
49060
+ },
49061
+ "spread": {
49062
+ "value": 0,
49063
+ "unit": "px"
49064
+ }
48121
49065
  }
48122
49066
  ],
48123
49067
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48124
49068
  "isSource": true,
48125
49069
  "$type": "shadow"
48126
49070
  }
49071
+ },
49072
+ "org.primer.llm": {
49073
+ "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
49074
+ "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
48127
49075
  }
48128
49076
  },
48129
49077
  "key": "{shadow.resting.medium}"
@@ -48131,8 +49079,9 @@
48131
49079
  "name": "shadow-resting-medium",
48132
49080
  "attributes": {},
48133
49081
  "path": ["shadow", "resting", "medium"],
48134
- "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
48135
- "type": "shadow"
49082
+ "value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
49083
+ "type": "shadow",
49084
+ "description": "Medium resting shadow for cards and elevated surfaces"
48136
49085
  },
48137
49086
  "shadow-resting-small": {
48138
49087
  "key": "{shadow.resting.small}",
@@ -48147,19 +49096,43 @@
48147
49096
  {
48148
49097
  "color": "#ffffff",
48149
49098
  "alpha": 0.6,
48150
- "offsetX": "0px",
48151
- "offsetY": "1px",
48152
- "blur": "1px",
48153
- "spread": "0px",
49099
+ "offsetX": {
49100
+ "value": 0,
49101
+ "unit": "px"
49102
+ },
49103
+ "offsetY": {
49104
+ "value": 1,
49105
+ "unit": "px"
49106
+ },
49107
+ "blur": {
49108
+ "value": 1,
49109
+ "unit": "px"
49110
+ },
49111
+ "spread": {
49112
+ "value": 0,
49113
+ "unit": "px"
49114
+ },
48154
49115
  "inset": false
48155
49116
  },
48156
49117
  {
48157
49118
  "color": "#ffffff",
48158
49119
  "alpha": 0.6,
48159
- "offsetX": "0px",
48160
- "offsetY": "1px",
48161
- "blur": "3px",
48162
- "spread": "0px",
49120
+ "offsetX": {
49121
+ "value": 0,
49122
+ "unit": "px"
49123
+ },
49124
+ "offsetY": {
49125
+ "value": 1,
49126
+ "unit": "px"
49127
+ },
49128
+ "blur": {
49129
+ "value": 3,
49130
+ "unit": "px"
49131
+ },
49132
+ "spread": {
49133
+ "value": 0,
49134
+ "unit": "px"
49135
+ },
48163
49136
  "inset": false
48164
49137
  }
48165
49138
  ],
@@ -48167,6 +49140,10 @@
48167
49140
  "isSource": true,
48168
49141
  "$type": "shadow"
48169
49142
  }
49143
+ },
49144
+ "org.primer.llm": {
49145
+ "usage": ["button", "interactive-card", "clickable-element"],
49146
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48170
49147
  }
48171
49148
  },
48172
49149
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48175,24 +49152,49 @@
48175
49152
  "$value": [
48176
49153
  {
48177
49154
  "color": "{base.color.neutral.13}",
48178
- "alpha": 0.06,
48179
- "offsetX": "0px",
48180
- "offsetY": "1px",
48181
- "blur": "1px",
48182
- "spread": "0px",
49155
+ "alpha": 0.04,
49156
+ "offsetX": {
49157
+ "value": 0,
49158
+ "unit": "px"
49159
+ },
49160
+ "offsetY": {
49161
+ "value": 1,
49162
+ "unit": "px"
49163
+ },
49164
+ "blur": {
49165
+ "value": 1,
49166
+ "unit": "px"
49167
+ },
49168
+ "spread": {
49169
+ "value": 0,
49170
+ "unit": "px"
49171
+ },
48183
49172
  "inset": false
48184
49173
  },
48185
49174
  {
48186
49175
  "color": "{base.color.neutral.13}",
48187
- "alpha": 0.06,
48188
- "offsetX": "0px",
48189
- "offsetY": "1px",
48190
- "blur": "3px",
48191
- "spread": "0px",
49176
+ "alpha": 0.03,
49177
+ "offsetX": {
49178
+ "value": 0,
49179
+ "unit": "px"
49180
+ },
49181
+ "offsetY": {
49182
+ "value": 1,
49183
+ "unit": "px"
49184
+ },
49185
+ "blur": {
49186
+ "value": 2,
49187
+ "unit": "px"
49188
+ },
49189
+ "spread": {
49190
+ "value": 0,
49191
+ "unit": "px"
49192
+ },
48192
49193
  "inset": false
48193
49194
  }
48194
49195
  ],
48195
49196
  "$type": "shadow",
49197
+ "$description": "Small resting shadow for buttons and interactive elements",
48196
49198
  "$extensions": {
48197
49199
  "org.primer.figma": {
48198
49200
  "collection": "mode",
@@ -48204,19 +49206,43 @@
48204
49206
  {
48205
49207
  "color": "{base.color.neutral.0}",
48206
49208
  "alpha": 0.6,
48207
- "offsetX": "0px",
48208
- "offsetY": "1px",
48209
- "blur": "1px",
48210
- "spread": "0px",
49209
+ "offsetX": {
49210
+ "value": 0,
49211
+ "unit": "px"
49212
+ },
49213
+ "offsetY": {
49214
+ "value": 1,
49215
+ "unit": "px"
49216
+ },
49217
+ "blur": {
49218
+ "value": 1,
49219
+ "unit": "px"
49220
+ },
49221
+ "spread": {
49222
+ "value": 0,
49223
+ "unit": "px"
49224
+ },
48211
49225
  "inset": false
48212
49226
  },
48213
49227
  {
48214
49228
  "color": "{base.color.neutral.0}",
48215
49229
  "alpha": 0.6,
48216
- "offsetX": "0px",
48217
- "offsetY": "1px",
48218
- "blur": "3px",
48219
- "spread": "0px",
49230
+ "offsetX": {
49231
+ "value": 0,
49232
+ "unit": "px"
49233
+ },
49234
+ "offsetY": {
49235
+ "value": 1,
49236
+ "unit": "px"
49237
+ },
49238
+ "blur": {
49239
+ "value": 3,
49240
+ "unit": "px"
49241
+ },
49242
+ "spread": {
49243
+ "value": 0,
49244
+ "unit": "px"
49245
+ },
48220
49246
  "inset": false
48221
49247
  }
48222
49248
  ],
@@ -48224,6 +49250,10 @@
48224
49250
  "isSource": true,
48225
49251
  "$type": "shadow"
48226
49252
  }
49253
+ },
49254
+ "org.primer.llm": {
49255
+ "usage": ["button", "interactive-card", "clickable-element"],
49256
+ "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
48227
49257
  }
48228
49258
  },
48229
49259
  "key": "{shadow.resting.small}"
@@ -48231,8 +49261,9 @@
48231
49261
  "name": "shadow-resting-small",
48232
49262
  "attributes": {},
48233
49263
  "path": ["shadow", "resting", "small"],
48234
- "value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
48235
- "type": "shadow"
49264
+ "value": "0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808",
49265
+ "type": "shadow",
49266
+ "description": "Small resting shadow for buttons and interactive elements"
48236
49267
  },
48237
49268
  "shadow-resting-xsmall": {
48238
49269
  "key": "{shadow.resting.xsmall}",
@@ -48246,16 +49277,32 @@
48246
49277
  "$value": {
48247
49278
  "color": "#ffffff",
48248
49279
  "alpha": 0.8,
48249
- "offsetX": "0px",
48250
- "offsetY": "1px",
48251
- "blur": "1px",
48252
- "spread": "0px",
49280
+ "offsetX": {
49281
+ "value": 0,
49282
+ "unit": "px"
49283
+ },
49284
+ "offsetY": {
49285
+ "value": 1,
49286
+ "unit": "px"
49287
+ },
49288
+ "blur": {
49289
+ "value": 1,
49290
+ "unit": "px"
49291
+ },
49292
+ "spread": {
49293
+ "value": 0,
49294
+ "unit": "px"
49295
+ },
48253
49296
  "inset": false
48254
49297
  },
48255
49298
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48256
49299
  "isSource": true,
48257
49300
  "$type": "shadow"
48258
49301
  }
49302
+ },
49303
+ "org.primer.llm": {
49304
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49305
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48259
49306
  }
48260
49307
  },
48261
49308
  "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48263,14 +49310,27 @@
48263
49310
  "original": {
48264
49311
  "$value": {
48265
49312
  "color": "{base.color.neutral.13}",
48266
- "alpha": 0.06,
48267
- "offsetX": "0px",
48268
- "offsetY": "1px",
48269
- "blur": "1px",
48270
- "spread": "0px",
49313
+ "alpha": 0.05,
49314
+ "offsetX": {
49315
+ "value": 0,
49316
+ "unit": "px"
49317
+ },
49318
+ "offsetY": {
49319
+ "value": 1,
49320
+ "unit": "px"
49321
+ },
49322
+ "blur": {
49323
+ "value": 1,
49324
+ "unit": "px"
49325
+ },
49326
+ "spread": {
49327
+ "value": 0,
49328
+ "unit": "px"
49329
+ },
48271
49330
  "inset": false
48272
49331
  },
48273
49332
  "$type": "shadow",
49333
+ "$description": "Extra small resting shadow for minimal elevation",
48274
49334
  "$extensions": {
48275
49335
  "org.primer.figma": {
48276
49336
  "collection": "mode",
@@ -48281,16 +49341,32 @@
48281
49341
  "$value": {
48282
49342
  "color": "{base.color.neutral.0}",
48283
49343
  "alpha": 0.8,
48284
- "offsetX": "0px",
48285
- "offsetY": "1px",
48286
- "blur": "1px",
48287
- "spread": "0px",
49344
+ "offsetX": {
49345
+ "value": 0,
49346
+ "unit": "px"
49347
+ },
49348
+ "offsetY": {
49349
+ "value": 1,
49350
+ "unit": "px"
49351
+ },
49352
+ "blur": {
49353
+ "value": 1,
49354
+ "unit": "px"
49355
+ },
49356
+ "spread": {
49357
+ "value": 0,
49358
+ "unit": "px"
49359
+ },
48288
49360
  "inset": false
48289
49361
  },
48290
49362
  "filePath": "src/tokens/functional/shadow/shadow.json5",
48291
49363
  "isSource": true,
48292
49364
  "$type": "shadow"
48293
49365
  }
49366
+ },
49367
+ "org.primer.llm": {
49368
+ "usage": ["badge", "chip", "small-card", "subtle-elevation"],
49369
+ "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
48294
49370
  }
48295
49371
  },
48296
49372
  "key": "{shadow.resting.xsmall}"
@@ -48298,8 +49374,9 @@
48298
49374
  "name": "shadow-resting-xsmall",
48299
49375
  "attributes": {},
48300
49376
  "path": ["shadow", "resting", "xsmall"],
48301
- "value": "0px 1px 1px 0px #1f23280f",
48302
- "type": "shadow"
49377
+ "value": "0 1px 1px 0 #1f23280d",
49378
+ "type": "shadow",
49379
+ "description": "Extra small resting shadow for minimal elevation"
48303
49380
  },
48304
49381
  "sideNav-bgColor-selected": {
48305
49382
  "key": "{sideNav.bgColor.selected}",