@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

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 (190) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +136 -8
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.js +349 -0
  5. package/dist/build/schemas/borderToken.d.ts +61 -5
  6. package/dist/build/schemas/borderToken.js +2 -1
  7. package/dist/build/schemas/colorToken.d.ts +639 -30
  8. package/dist/build/schemas/colorToken.js +3 -2
  9. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  10. package/dist/build/schemas/colorW3cValue.js +42 -0
  11. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  12. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  13. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  14. package/dist/build/schemas/dimensionValue.js +10 -13
  15. package/dist/build/schemas/durationToken.d.ts +8 -2
  16. package/dist/build/schemas/durationValue.d.ts +11 -1
  17. package/dist/build/schemas/durationValue.js +13 -3
  18. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  19. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  20. package/dist/build/schemas/gradientToken.d.ts +23 -2
  21. package/dist/build/schemas/gradientToken.js +2 -1
  22. package/dist/build/schemas/numberToken.d.ts +1 -1
  23. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  24. package/dist/build/schemas/shadowToken.js +8 -2
  25. package/dist/build/schemas/stringToken.d.ts +1 -1
  26. package/dist/build/schemas/stringToken.js +1 -1
  27. package/dist/build/schemas/tokenType.d.ts +1 -1
  28. package/dist/build/schemas/transitionToken.d.ts +15 -3
  29. package/dist/build/schemas/typographyToken.d.ts +19 -5
  30. package/dist/build/schemas/typographyToken.js +1 -1
  31. package/dist/build/schemas/validTokenType.d.ts +1 -1
  32. package/dist/build/schemas/validTokenType.js +1 -1
  33. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  34. package/dist/build/transformers/borderToCss.js +19 -1
  35. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  36. package/dist/build/transformers/colorToHex.js +5 -2
  37. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  38. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  39. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  40. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  41. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  42. package/dist/build/transformers/dimensionToRem.js +21 -22
  43. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  44. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  45. package/dist/build/transformers/durationToCss.d.ts +2 -1
  46. package/dist/build/transformers/durationToCss.js +19 -12
  47. package/dist/build/transformers/gradientToCss.js +2 -1
  48. package/dist/build/transformers/shadowToCss.js +15 -1
  49. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  50. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  51. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  52. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  53. package/dist/build/types/borderTokenValue.d.ts +5 -2
  54. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  55. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  56. package/dist/css/base/motion/motion.css +1 -1
  57. package/dist/css/functional/size/radius.css +1 -1
  58. package/dist/css/functional/size/size-coarse.css +1 -0
  59. package/dist/css/functional/size/size-fine.css +1 -0
  60. package/dist/css/functional/size/size.css +5 -0
  61. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +42 -30
  62. package/dist/css/functional/themes/dark-colorblind.css +42 -30
  63. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +42 -30
  64. package/dist/css/functional/themes/dark-dimmed.css +42 -30
  65. package/dist/css/functional/themes/dark-high-contrast.css +42 -30
  66. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +42 -30
  67. package/dist/css/functional/themes/dark-tritanopia.css +42 -30
  68. package/dist/css/functional/themes/dark.css +42 -30
  69. package/dist/css/functional/themes/light-colorblind-high-contrast.css +42 -30
  70. package/dist/css/functional/themes/light-colorblind.css +42 -30
  71. package/dist/css/functional/themes/light-high-contrast.css +42 -30
  72. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +42 -30
  73. package/dist/css/functional/themes/light-tritanopia.css +42 -30
  74. package/dist/css/functional/themes/light.css +42 -30
  75. package/dist/docs/base/motion/motion.json +96 -24
  76. package/dist/docs/base/size/size.json +76 -19
  77. package/dist/docs/base/typography/typography.json +24 -6
  78. package/dist/docs/functional/size/border.json +26 -11
  79. package/dist/docs/functional/size/breakpoints.json +24 -6
  80. package/dist/docs/functional/size/radius.json +18 -6
  81. package/dist/docs/functional/size/size-coarse.json +55 -2
  82. package/dist/docs/functional/size/size-fine.json +55 -2
  83. package/dist/docs/functional/size/size.json +195 -15
  84. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +3921 -714
  85. package/dist/docs/functional/themes/dark-colorblind.json +3911 -712
  86. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +3774 -547
  87. package/dist/docs/functional/themes/dark-dimmed.json +3801 -554
  88. package/dist/docs/functional/themes/dark-high-contrast.json +3926 -715
  89. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +3936 -717
  90. package/dist/docs/functional/themes/dark-tritanopia.json +3769 -546
  91. package/dist/docs/functional/themes/dark.json +3920 -713
  92. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +3780 -553
  93. package/dist/docs/functional/themes/light-colorblind.json +3767 -548
  94. package/dist/docs/functional/themes/light-high-contrast.json +3785 -554
  95. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +3785 -554
  96. package/dist/docs/functional/themes/light-tritanopia.json +3777 -550
  97. package/dist/docs/functional/themes/light.json +3782 -551
  98. package/dist/docs/functional/typography/typography.json +8 -2
  99. package/dist/fallbacks/base/motion/motion.json +48 -12
  100. package/dist/fallbacks/functional/size/size-coarse.json +2 -1
  101. package/dist/fallbacks/functional/size/size-fine.json +2 -1
  102. package/dist/fallbacks/functional/size/size.json +5 -0
  103. package/dist/figma/dimension/dimension.json +56 -1
  104. package/dist/figma/themes/dark-colorblind.json +49 -1
  105. package/dist/figma/themes/dark-dimmed.json +51 -3
  106. package/dist/figma/themes/dark-high-contrast.json +49 -1
  107. package/dist/figma/themes/dark-tritanopia.json +49 -1
  108. package/dist/figma/themes/dark.json +49 -1
  109. package/dist/figma/themes/light-colorblind.json +53 -5
  110. package/dist/figma/themes/light-high-contrast.json +53 -5
  111. package/dist/figma/themes/light-tritanopia.json +53 -5
  112. package/dist/figma/themes/light.json +53 -5
  113. package/dist/internalCss/dark-colorblind-high-contrast.css +42 -30
  114. package/dist/internalCss/dark-colorblind.css +42 -30
  115. package/dist/internalCss/dark-dimmed-high-contrast.css +42 -30
  116. package/dist/internalCss/dark-dimmed.css +42 -30
  117. package/dist/internalCss/dark-high-contrast.css +42 -30
  118. package/dist/internalCss/dark-tritanopia-high-contrast.css +42 -30
  119. package/dist/internalCss/dark-tritanopia.css +42 -30
  120. package/dist/internalCss/dark.css +42 -30
  121. package/dist/internalCss/light-colorblind-high-contrast.css +42 -30
  122. package/dist/internalCss/light-colorblind.css +42 -30
  123. package/dist/internalCss/light-high-contrast.css +42 -30
  124. package/dist/internalCss/light-tritanopia-high-contrast.css +42 -30
  125. package/dist/internalCss/light-tritanopia.css +42 -30
  126. package/dist/internalCss/light.css +42 -30
  127. package/dist/styleLint/base/motion/motion.json +96 -24
  128. package/dist/styleLint/base/size/size.json +76 -19
  129. package/dist/styleLint/base/typography/typography.json +30 -12
  130. package/dist/styleLint/functional/size/border.json +27 -12
  131. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  132. package/dist/styleLint/functional/size/radius.json +19 -7
  133. package/dist/styleLint/functional/size/size-coarse.json +60 -7
  134. package/dist/styleLint/functional/size/size-fine.json +60 -7
  135. package/dist/styleLint/functional/size/size.json +246 -66
  136. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +4060 -733
  137. package/dist/styleLint/functional/themes/dark-colorblind.json +4050 -731
  138. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +3914 -567
  139. package/dist/styleLint/functional/themes/dark-dimmed.json +3941 -574
  140. package/dist/styleLint/functional/themes/dark-high-contrast.json +4065 -734
  141. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +4075 -736
  142. package/dist/styleLint/functional/themes/dark-tritanopia.json +4079 -736
  143. package/dist/styleLint/functional/themes/dark.json +4059 -732
  144. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +4091 -744
  145. package/dist/styleLint/functional/themes/light-colorblind.json +4078 -739
  146. package/dist/styleLint/functional/themes/light-high-contrast.json +4096 -745
  147. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +4096 -745
  148. package/dist/styleLint/functional/themes/light-tritanopia.json +4088 -741
  149. package/dist/styleLint/functional/themes/light.json +4093 -742
  150. package/dist/styleLint/functional/typography/typography.json +28 -22
  151. package/package.json +5 -4
  152. package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
  153. package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
  154. package/src/tokens/base/color/dark/dark.json5 +475 -95
  155. package/src/tokens/base/color/dark/display-dark.json5 +960 -192
  156. package/src/tokens/base/color/light/display-light.json5 +960 -192
  157. package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
  158. package/src/tokens/base/color/light/light.json5 +475 -95
  159. package/src/tokens/base/motion/timing.json5 +12 -12
  160. package/src/tokens/base/size/size.json5 +194 -194
  161. package/src/tokens/base/typography/typography.json5 +6 -6
  162. package/src/tokens/component/avatar.json5 +72 -44
  163. package/src/tokens/component/button.json5 +1846 -1191
  164. package/src/tokens/component/reactionButton.json5 +20 -4
  165. package/src/tokens/functional/border/border.json5 +33 -2
  166. package/src/tokens/functional/color/bgColor.json5 +18 -2
  167. package/src/tokens/functional/color/borderColor.json5 +8 -1
  168. package/src/tokens/functional/color/control.json5 +160 -32
  169. package/src/tokens/functional/color/display.json5 +7 -0
  170. package/src/tokens/functional/color/fgColor.json5 +13 -1
  171. package/src/tokens/functional/color/syntax.json5 +24 -2
  172. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  173. package/src/tokens/functional/size/border.json5 +8 -8
  174. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  175. package/src/tokens/functional/size/radius.json5 +5 -5
  176. package/src/tokens/functional/size/size-coarse.json5 +15 -0
  177. package/src/tokens/functional/size/size-fine.json5 +15 -0
  178. package/src/tokens/functional/size/size.json5 +65 -15
  179. package/src/tokens/functional/typography/typography.json5 +8 -4
  180. package/dist/build/parsers/index.d.ts +0 -1
  181. package/dist/build/parsers/index.js +0 -1
  182. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  183. package/dist/build/parsers/w3cJsonParser.js +0 -25
  184. package/dist/removed/testing.json5 +0 -4
  185. package/guidelines/color.llm.md +0 -16
  186. package/guidelines/guidelines.llm.md +0 -34
  187. package/guidelines/motion.llm.md +0 -41
  188. package/guidelines/spacing.llm.md +0 -20
  189. package/guidelines/typography.llm.md +0 -14
  190. package/src/tokens/removed/testing.json5 +0 -4
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "control-large-gap": {
3
3
  "key": "{control.large.gap}",
4
- "$value": ["0.03125rem", "0.5px"],
4
+ "$value": ["0.5rem", "8px"],
5
5
  "$type": "dimension",
6
6
  "$extensions": {
7
7
  "org.primer.figma": {
@@ -28,7 +28,7 @@
28
28
  },
29
29
  "control-large-lineBoxHeight": {
30
30
  "key": "{control.large.lineBoxHeight}",
31
- "$value": ["0.078125rem", "1.25px"],
31
+ "$value": ["1.25rem", "20px"],
32
32
  "$type": "dimension",
33
33
  "$extensions": {
34
34
  "org.primer.figma": {
@@ -66,7 +66,10 @@
66
66
  "filePath": "src/tokens/functional/size/size.json5",
67
67
  "isSource": true,
68
68
  "original": {
69
- "$value": "10px",
69
+ "$value": {
70
+ "value": 10,
71
+ "unit": "px"
72
+ },
70
73
  "$type": "dimension",
71
74
  "$extensions": {
72
75
  "org.primer.figma": {
@@ -80,9 +83,36 @@
80
83
  "attributes": {},
81
84
  "path": ["control", "large", "paddingBlock"]
82
85
  },
86
+ "control-large-paddingInline-condensed": {
87
+ "key": "{control.large.paddingInline.condensed}",
88
+ "$value": ["0.5rem", "8px"],
89
+ "$type": "dimension",
90
+ "$extensions": {
91
+ "org.primer.figma": {
92
+ "collection": "pattern/size",
93
+ "scopes": ["gap"]
94
+ }
95
+ },
96
+ "filePath": "src/tokens/functional/size/size.json5",
97
+ "isSource": true,
98
+ "original": {
99
+ "$value": "{base.size.8}",
100
+ "$type": "dimension",
101
+ "$extensions": {
102
+ "org.primer.figma": {
103
+ "collection": "pattern/size",
104
+ "scopes": ["gap"]
105
+ }
106
+ },
107
+ "key": "{control.large.paddingInline.condensed}"
108
+ },
109
+ "name": "control-large-paddingInline-condensed",
110
+ "attributes": {},
111
+ "path": ["control", "large", "paddingInline", "condensed"]
112
+ },
83
113
  "control-large-paddingInline-normal": {
84
114
  "key": "{control.large.paddingInline.normal}",
85
- "$value": ["0.046875rem", "0.75px"],
115
+ "$value": ["0.75rem", "12px"],
86
116
  "$type": "dimension",
87
117
  "$extensions": {
88
118
  "org.primer.figma": {
@@ -109,7 +139,7 @@
109
139
  },
110
140
  "control-large-paddingInline-spacious": {
111
141
  "key": "{control.large.paddingInline.spacious}",
112
- "$value": ["0.0625rem", "1px"],
142
+ "$value": ["1rem", "16px"],
113
143
  "$type": "dimension",
114
144
  "$extensions": {
115
145
  "org.primer.figma": {
@@ -136,7 +166,7 @@
136
166
  },
137
167
  "control-large-size": {
138
168
  "key": "{control.large.size}",
139
- "$value": ["0.15625rem", "2.5px"],
169
+ "$value": ["2.5rem", "40px"],
140
170
  "$type": "dimension",
141
171
  "$extensions": {
142
172
  "org.primer.figma": {
@@ -163,7 +193,7 @@
163
193
  },
164
194
  "control-medium-gap": {
165
195
  "key": "{control.medium.gap}",
166
- "$value": ["0.03125rem", "0.5px"],
196
+ "$value": ["0.5rem", "8px"],
167
197
  "$type": "dimension",
168
198
  "$extensions": {
169
199
  "org.primer.figma": {
@@ -190,7 +220,7 @@
190
220
  },
191
221
  "control-medium-lineBoxHeight": {
192
222
  "key": "{control.medium.lineBoxHeight}",
193
- "$value": ["0.078125rem", "1.25px"],
223
+ "$value": ["1.25rem", "20px"],
194
224
  "$type": "dimension",
195
225
  "$extensions": {
196
226
  "org.primer.figma": {
@@ -228,7 +258,10 @@
228
258
  "filePath": "src/tokens/functional/size/size.json5",
229
259
  "isSource": true,
230
260
  "original": {
231
- "$value": "6px",
261
+ "$value": {
262
+ "value": 6,
263
+ "unit": "px"
264
+ },
232
265
  "$type": "dimension",
233
266
  "$extensions": {
234
267
  "org.primer.figma": {
@@ -244,7 +277,7 @@
244
277
  },
245
278
  "control-medium-paddingInline-condensed": {
246
279
  "key": "{control.medium.paddingInline.condensed}",
247
- "$value": ["0.03125rem", "0.5px"],
280
+ "$value": ["0.5rem", "8px"],
248
281
  "$type": "dimension",
249
282
  "$extensions": {
250
283
  "org.primer.figma": {
@@ -271,7 +304,7 @@
271
304
  },
272
305
  "control-medium-paddingInline-normal": {
273
306
  "key": "{control.medium.paddingInline.normal}",
274
- "$value": ["0.046875rem", "0.75px"],
307
+ "$value": ["0.75rem", "12px"],
275
308
  "$type": "dimension",
276
309
  "$extensions": {
277
310
  "org.primer.figma": {
@@ -298,7 +331,7 @@
298
331
  },
299
332
  "control-medium-paddingInline-spacious": {
300
333
  "key": "{control.medium.paddingInline.spacious}",
301
- "$value": ["0.0625rem", "1px"],
334
+ "$value": ["1rem", "16px"],
302
335
  "$type": "dimension",
303
336
  "$extensions": {
304
337
  "org.primer.figma": {
@@ -325,7 +358,7 @@
325
358
  },
326
359
  "control-medium-size": {
327
360
  "key": "{control.medium.size}",
328
- "$value": ["0.125rem", "2px"],
361
+ "$value": ["2rem", "32px"],
329
362
  "$type": "dimension",
330
363
  "$extensions": {
331
364
  "org.primer.figma": {
@@ -352,7 +385,7 @@
352
385
  },
353
386
  "control-minTarget-coarse": {
354
387
  "key": "{control.minTarget.coarse}",
355
- "$value": ["0.171875rem", "2.75px"],
388
+ "$value": ["2.75rem", "44px"],
356
389
  "$type": "dimension",
357
390
  "$extensions": {
358
391
  "org.primer.figma": {
@@ -379,7 +412,7 @@
379
412
  },
380
413
  "control-minTarget-fine": {
381
414
  "key": "{control.minTarget.fine}",
382
- "$value": ["0.0625rem", "1px"],
415
+ "$value": ["1rem", "16px"],
383
416
  "$type": "dimension",
384
417
  "$extensions": {
385
418
  "org.primer.figma": {
@@ -406,7 +439,7 @@
406
439
  },
407
440
  "control-small-gap": {
408
441
  "key": "{control.small.gap}",
409
- "$value": ["0.015625rem", "0.25px"],
442
+ "$value": ["0.25rem", "4px"],
410
443
  "$type": "dimension",
411
444
  "$extensions": {
412
445
  "org.primer.figma": {
@@ -433,7 +466,7 @@
433
466
  },
434
467
  "control-small-lineBoxHeight": {
435
468
  "key": "{control.small.lineBoxHeight}",
436
- "$value": ["0.078125rem", "1.25px"],
469
+ "$value": ["1.25rem", "20px"],
437
470
  "$type": "dimension",
438
471
  "$extensions": {
439
472
  "org.primer.figma": {
@@ -460,7 +493,7 @@
460
493
  },
461
494
  "control-small-paddingBlock": {
462
495
  "key": "{control.small.paddingBlock}",
463
- "$value": ["0.015625rem", "0.25px"],
496
+ "$value": ["0.25rem", "4px"],
464
497
  "$type": "dimension",
465
498
  "$extensions": {
466
499
  "org.primer.figma": {
@@ -487,7 +520,7 @@
487
520
  },
488
521
  "control-small-paddingInline-condensed": {
489
522
  "key": "{control.small.paddingInline.condensed}",
490
- "$value": ["0.03125rem", "0.5px"],
523
+ "$value": ["0.5rem", "8px"],
491
524
  "$type": "dimension",
492
525
  "$extensions": {
493
526
  "org.primer.figma": {
@@ -514,7 +547,7 @@
514
547
  },
515
548
  "control-small-paddingInline-normal": {
516
549
  "key": "{control.small.paddingInline.normal}",
517
- "$value": ["0.046875rem", "0.75px"],
550
+ "$value": ["0.75rem", "12px"],
518
551
  "$type": "dimension",
519
552
  "$extensions": {
520
553
  "org.primer.figma": {
@@ -539,9 +572,36 @@
539
572
  "attributes": {},
540
573
  "path": ["control", "small", "paddingInline", "normal"]
541
574
  },
575
+ "control-small-paddingInline-spacious": {
576
+ "key": "{control.small.paddingInline.spacious}",
577
+ "$value": ["1rem", "16px"],
578
+ "$type": "dimension",
579
+ "$extensions": {
580
+ "org.primer.figma": {
581
+ "collection": "pattern/size",
582
+ "scopes": ["gap"]
583
+ }
584
+ },
585
+ "filePath": "src/tokens/functional/size/size.json5",
586
+ "isSource": true,
587
+ "original": {
588
+ "$value": "{base.size.16}",
589
+ "$type": "dimension",
590
+ "$extensions": {
591
+ "org.primer.figma": {
592
+ "collection": "pattern/size",
593
+ "scopes": ["gap"]
594
+ }
595
+ },
596
+ "key": "{control.small.paddingInline.spacious}"
597
+ },
598
+ "name": "control-small-paddingInline-spacious",
599
+ "attributes": {},
600
+ "path": ["control", "small", "paddingInline", "spacious"]
601
+ },
542
602
  "control-small-size": {
543
603
  "key": "{control.small.size}",
544
- "$value": ["0.109375rem", "1.75px"],
604
+ "$value": ["1.75rem", "28px"],
545
605
  "$type": "dimension",
546
606
  "$extensions": {
547
607
  "org.primer.figma": {
@@ -568,7 +628,7 @@
568
628
  },
569
629
  "control-xlarge-gap": {
570
630
  "key": "{control.xlarge.gap}",
571
- "$value": ["0.03125rem", "0.5px"],
631
+ "$value": ["0.5rem", "8px"],
572
632
  "$type": "dimension",
573
633
  "$extensions": {
574
634
  "org.primer.figma": {
@@ -595,7 +655,7 @@
595
655
  },
596
656
  "control-xlarge-lineBoxHeight": {
597
657
  "key": "{control.xlarge.lineBoxHeight}",
598
- "$value": ["0.078125rem", "1.25px"],
658
+ "$value": ["1.25rem", "20px"],
599
659
  "$type": "dimension",
600
660
  "$extensions": {
601
661
  "org.primer.figma": {
@@ -633,7 +693,10 @@
633
693
  "filePath": "src/tokens/functional/size/size.json5",
634
694
  "isSource": true,
635
695
  "original": {
636
- "$value": "14px",
696
+ "$value": {
697
+ "value": 14,
698
+ "unit": "px"
699
+ },
637
700
  "$type": "dimension",
638
701
  "$extensions": {
639
702
  "org.primer.figma": {
@@ -647,9 +710,36 @@
647
710
  "attributes": {},
648
711
  "path": ["control", "xlarge", "paddingBlock"]
649
712
  },
713
+ "control-xlarge-paddingInline-condensed": {
714
+ "key": "{control.xlarge.paddingInline.condensed}",
715
+ "$value": ["0.5rem", "8px"],
716
+ "$type": "dimension",
717
+ "$extensions": {
718
+ "org.primer.figma": {
719
+ "collection": "pattern/size",
720
+ "scopes": ["gap"]
721
+ }
722
+ },
723
+ "filePath": "src/tokens/functional/size/size.json5",
724
+ "isSource": true,
725
+ "original": {
726
+ "$value": "{base.size.8}",
727
+ "$type": "dimension",
728
+ "$extensions": {
729
+ "org.primer.figma": {
730
+ "collection": "pattern/size",
731
+ "scopes": ["gap"]
732
+ }
733
+ },
734
+ "key": "{control.xlarge.paddingInline.condensed}"
735
+ },
736
+ "name": "control-xlarge-paddingInline-condensed",
737
+ "attributes": {},
738
+ "path": ["control", "xlarge", "paddingInline", "condensed"]
739
+ },
650
740
  "control-xlarge-paddingInline-normal": {
651
741
  "key": "{control.xlarge.paddingInline.normal}",
652
- "$value": ["0.046875rem", "0.75px"],
742
+ "$value": ["0.75rem", "12px"],
653
743
  "$type": "dimension",
654
744
  "$extensions": {
655
745
  "org.primer.figma": {
@@ -676,7 +766,7 @@
676
766
  },
677
767
  "control-xlarge-paddingInline-spacious": {
678
768
  "key": "{control.xlarge.paddingInline.spacious}",
679
- "$value": ["0.0625rem", "1px"],
769
+ "$value": ["1rem", "16px"],
680
770
  "$type": "dimension",
681
771
  "$extensions": {
682
772
  "org.primer.figma": {
@@ -703,7 +793,7 @@
703
793
  },
704
794
  "control-xlarge-size": {
705
795
  "key": "{control.xlarge.size}",
706
- "$value": ["0.1875rem", "3px"],
796
+ "$value": ["3rem", "48px"],
707
797
  "$type": "dimension",
708
798
  "$extensions": {
709
799
  "org.primer.figma": {
@@ -730,7 +820,7 @@
730
820
  },
731
821
  "control-xsmall-gap": {
732
822
  "key": "{control.xsmall.gap}",
733
- "$value": ["0.015625rem", "0.25px"],
823
+ "$value": ["0.25rem", "4px"],
734
824
  "$type": "dimension",
735
825
  "$extensions": {
736
826
  "org.primer.figma": {
@@ -757,7 +847,7 @@
757
847
  },
758
848
  "control-xsmall-lineBoxHeight": {
759
849
  "key": "{control.xsmall.lineBoxHeight}",
760
- "$value": ["0.078125rem", "1.25px"],
850
+ "$value": ["1.25rem", "20px"],
761
851
  "$type": "dimension",
762
852
  "$extensions": {
763
853
  "org.primer.figma": {
@@ -795,7 +885,10 @@
795
885
  "filePath": "src/tokens/functional/size/size.json5",
796
886
  "isSource": true,
797
887
  "original": {
798
- "$value": "2px",
888
+ "$value": {
889
+ "value": 2,
890
+ "unit": "px"
891
+ },
799
892
  "$type": "dimension",
800
893
  "$extensions": {
801
894
  "org.primer.figma": {
@@ -811,7 +904,7 @@
811
904
  },
812
905
  "control-xsmall-paddingInline-condensed": {
813
906
  "key": "{control.xsmall.paddingInline.condensed}",
814
- "$value": ["0.015625rem", "0.25px"],
907
+ "$value": ["0.25rem", "4px"],
815
908
  "$type": "dimension",
816
909
  "$extensions": {
817
910
  "org.primer.figma": {
@@ -838,7 +931,7 @@
838
931
  },
839
932
  "control-xsmall-paddingInline-normal": {
840
933
  "key": "{control.xsmall.paddingInline.normal}",
841
- "$value": ["0.03125rem", "0.5px"],
934
+ "$value": ["0.5rem", "8px"],
842
935
  "$type": "dimension",
843
936
  "$extensions": {
844
937
  "org.primer.figma": {
@@ -865,7 +958,7 @@
865
958
  },
866
959
  "control-xsmall-paddingInline-spacious": {
867
960
  "key": "{control.xsmall.paddingInline.spacious}",
868
- "$value": ["0.046875rem", "0.75px"],
961
+ "$value": ["0.75rem", "12px"],
869
962
  "$type": "dimension",
870
963
  "$extensions": {
871
964
  "org.primer.figma": {
@@ -892,7 +985,7 @@
892
985
  },
893
986
  "control-xsmall-size": {
894
987
  "key": "{control.xsmall.size}",
895
- "$value": ["0.09375rem", "1.5px"],
988
+ "$value": ["1.5rem", "24px"],
896
989
  "$type": "dimension",
897
990
  "$extensions": {
898
991
  "org.primer.figma": {
@@ -919,7 +1012,7 @@
919
1012
  },
920
1013
  "controlStack-large-gap-auto": {
921
1014
  "key": "{controlStack.large.gap.auto}",
922
- "$value": ["0.03125rem", "0.5px"],
1015
+ "$value": ["0.5rem", "8px"],
923
1016
  "$type": "dimension",
924
1017
  "$extensions": {
925
1018
  "org.primer.figma": {
@@ -946,7 +1039,7 @@
946
1039
  },
947
1040
  "controlStack-large-gap-condensed": {
948
1041
  "key": "{controlStack.large.gap.condensed}",
949
- "$value": ["0.03125rem", "0.5px"],
1042
+ "$value": ["0.5rem", "8px"],
950
1043
  "$type": "dimension",
951
1044
  "$extensions": {
952
1045
  "org.primer.figma": {
@@ -973,7 +1066,7 @@
973
1066
  },
974
1067
  "controlStack-large-gap-spacious": {
975
1068
  "key": "{controlStack.large.gap.spacious}",
976
- "$value": ["0.046875rem", "0.75px"],
1069
+ "$value": ["0.75rem", "12px"],
977
1070
  "$type": "dimension",
978
1071
  "$extensions": {
979
1072
  "org.primer.figma": {
@@ -998,9 +1091,36 @@
998
1091
  "attributes": {},
999
1092
  "path": ["controlStack", "large", "gap", "spacious"]
1000
1093
  },
1094
+ "controlStack-medium-gap-auto": {
1095
+ "key": "{controlStack.medium.gap.auto}",
1096
+ "$value": ["0.5rem", "8px"],
1097
+ "$type": "dimension",
1098
+ "$extensions": {
1099
+ "org.primer.figma": {
1100
+ "collection": "pattern/size",
1101
+ "scopes": ["gap"]
1102
+ }
1103
+ },
1104
+ "filePath": "src/tokens/functional/size/size.json5",
1105
+ "isSource": true,
1106
+ "original": {
1107
+ "$value": "{base.size.8}",
1108
+ "$type": "dimension",
1109
+ "$extensions": {
1110
+ "org.primer.figma": {
1111
+ "collection": "pattern/size",
1112
+ "scopes": ["gap"]
1113
+ }
1114
+ },
1115
+ "key": "{controlStack.medium.gap.auto}"
1116
+ },
1117
+ "name": "controlStack-medium-gap-auto",
1118
+ "attributes": {},
1119
+ "path": ["controlStack", "medium", "gap", "auto"]
1120
+ },
1001
1121
  "controlStack-medium-gap-condensed": {
1002
1122
  "key": "{controlStack.medium.gap.condensed}",
1003
- "$value": ["0.03125rem", "0.5px"],
1123
+ "$value": ["0.5rem", "8px"],
1004
1124
  "$type": "dimension",
1005
1125
  "$extensions": {
1006
1126
  "org.primer.figma": {
@@ -1027,7 +1147,7 @@
1027
1147
  },
1028
1148
  "controlStack-medium-gap-spacious": {
1029
1149
  "key": "{controlStack.medium.gap.spacious}",
1030
- "$value": ["0.046875rem", "0.75px"],
1150
+ "$value": ["0.75rem", "12px"],
1031
1151
  "$type": "dimension",
1032
1152
  "$extensions": {
1033
1153
  "org.primer.figma": {
@@ -1052,9 +1172,36 @@
1052
1172
  "attributes": {},
1053
1173
  "path": ["controlStack", "medium", "gap", "spacious"]
1054
1174
  },
1175
+ "controlStack-small-gap-auto": {
1176
+ "key": "{controlStack.small.gap.auto}",
1177
+ "$value": ["0.5rem", "8px"],
1178
+ "$type": "dimension",
1179
+ "$extensions": {
1180
+ "org.primer.figma": {
1181
+ "collection": "pattern/size",
1182
+ "scopes": ["gap"]
1183
+ }
1184
+ },
1185
+ "filePath": "src/tokens/functional/size/size.json5",
1186
+ "isSource": true,
1187
+ "original": {
1188
+ "$value": "{base.size.8}",
1189
+ "$type": "dimension",
1190
+ "$extensions": {
1191
+ "org.primer.figma": {
1192
+ "collection": "pattern/size",
1193
+ "scopes": ["gap"]
1194
+ }
1195
+ },
1196
+ "key": "{controlStack.small.gap.auto}"
1197
+ },
1198
+ "name": "controlStack-small-gap-auto",
1199
+ "attributes": {},
1200
+ "path": ["controlStack", "small", "gap", "auto"]
1201
+ },
1055
1202
  "controlStack-small-gap-condensed": {
1056
1203
  "key": "{controlStack.small.gap.condensed}",
1057
- "$value": ["0.03125rem", "0.5px"],
1204
+ "$value": ["0.5rem", "8px"],
1058
1205
  "$type": "dimension",
1059
1206
  "$extensions": {
1060
1207
  "org.primer.figma": {
@@ -1081,7 +1228,7 @@
1081
1228
  },
1082
1229
  "controlStack-small-gap-spacious": {
1083
1230
  "key": "{controlStack.small.gap.spacious}",
1084
- "$value": ["0.0625rem", "1px"],
1231
+ "$value": ["1rem", "16px"],
1085
1232
  "$type": "dimension",
1086
1233
  "$extensions": {
1087
1234
  "org.primer.figma": {
@@ -1108,7 +1255,7 @@
1108
1255
  },
1109
1256
  "overlay-borderRadius": {
1110
1257
  "key": "{overlay.borderRadius}",
1111
- "$value": ["0.0234375rem", "0.375px"],
1258
+ "$value": ["0.375rem", "6px"],
1112
1259
  "$type": "dimension",
1113
1260
  "$extensions": {
1114
1261
  "org.primer.figma": {
@@ -1146,7 +1293,10 @@
1146
1293
  "filePath": "src/tokens/functional/size/size.json5",
1147
1294
  "isSource": true,
1148
1295
  "original": {
1149
- "$value": "432px",
1296
+ "$value": {
1297
+ "value": 432,
1298
+ "unit": "px"
1299
+ },
1150
1300
  "$type": "dimension",
1151
1301
  "$extensions": {
1152
1302
  "org.primer.figma": {
@@ -1173,7 +1323,10 @@
1173
1323
  "filePath": "src/tokens/functional/size/size.json5",
1174
1324
  "isSource": true,
1175
1325
  "original": {
1176
- "$value": "320px",
1326
+ "$value": {
1327
+ "value": 320,
1328
+ "unit": "px"
1329
+ },
1177
1330
  "$type": "dimension",
1178
1331
  "$extensions": {
1179
1332
  "org.primer.figma": {
@@ -1200,7 +1353,10 @@
1200
1353
  "filePath": "src/tokens/functional/size/size.json5",
1201
1354
  "isSource": true,
1202
1355
  "original": {
1203
- "$value": "256px",
1356
+ "$value": {
1357
+ "value": 256,
1358
+ "unit": "px"
1359
+ },
1204
1360
  "$type": "dimension",
1205
1361
  "$extensions": {
1206
1362
  "org.primer.figma": {
@@ -1227,7 +1383,10 @@
1227
1383
  "filePath": "src/tokens/functional/size/size.json5",
1228
1384
  "isSource": true,
1229
1385
  "original": {
1230
- "$value": "600px",
1386
+ "$value": {
1387
+ "value": 600,
1388
+ "unit": "px"
1389
+ },
1231
1390
  "$type": "dimension",
1232
1391
  "$extensions": {
1233
1392
  "org.primer.figma": {
@@ -1254,7 +1413,10 @@
1254
1413
  "filePath": "src/tokens/functional/size/size.json5",
1255
1414
  "isSource": true,
1256
1415
  "original": {
1257
- "$value": "4px",
1416
+ "$value": {
1417
+ "value": 4,
1418
+ "unit": "px"
1419
+ },
1258
1420
  "$type": "dimension",
1259
1421
  "$extensions": {
1260
1422
  "org.primer.figma": {
@@ -1270,7 +1432,7 @@
1270
1432
  },
1271
1433
  "overlay-padding-condensed": {
1272
1434
  "key": "{overlay.padding.condensed}",
1273
- "$value": ["0.03125rem", "0.5px"],
1435
+ "$value": ["0.5rem", "8px"],
1274
1436
  "$type": "dimension",
1275
1437
  "$extensions": {
1276
1438
  "org.primer.figma": {
@@ -1297,7 +1459,7 @@
1297
1459
  },
1298
1460
  "overlay-padding-normal": {
1299
1461
  "key": "{overlay.padding.normal}",
1300
- "$value": ["0.0625rem", "1px"],
1462
+ "$value": ["1rem", "16px"],
1301
1463
  "$type": "dimension",
1302
1464
  "$extensions": {
1303
1465
  "org.primer.figma": {
@@ -1324,7 +1486,7 @@
1324
1486
  },
1325
1487
  "overlay-paddingBlock-condensed": {
1326
1488
  "key": "{overlay.paddingBlock.condensed}",
1327
- "$value": ["0.015625rem", "0.25px"],
1489
+ "$value": ["0.25rem", "4px"],
1328
1490
  "$type": "dimension",
1329
1491
  "$extensions": {
1330
1492
  "org.primer.figma": {
@@ -1351,7 +1513,7 @@
1351
1513
  },
1352
1514
  "overlay-paddingBlock-normal": {
1353
1515
  "key": "{overlay.paddingBlock.normal}",
1354
- "$value": ["0.046875rem", "0.75px"],
1516
+ "$value": ["0.75rem", "12px"],
1355
1517
  "$type": "dimension",
1356
1518
  "$extensions": {
1357
1519
  "org.primer.figma": {
@@ -1389,7 +1551,10 @@
1389
1551
  "filePath": "src/tokens/functional/size/size.json5",
1390
1552
  "isSource": true,
1391
1553
  "original": {
1392
- "$value": "640px",
1554
+ "$value": {
1555
+ "value": 640,
1556
+ "unit": "px"
1557
+ },
1393
1558
  "$type": "dimension",
1394
1559
  "$extensions": {
1395
1560
  "org.primer.figma": {
@@ -1416,7 +1581,10 @@
1416
1581
  "filePath": "src/tokens/functional/size/size.json5",
1417
1582
  "isSource": true,
1418
1583
  "original": {
1419
- "$value": "480px",
1584
+ "$value": {
1585
+ "value": 480,
1586
+ "unit": "px"
1587
+ },
1420
1588
  "$type": "dimension",
1421
1589
  "$extensions": {
1422
1590
  "org.primer.figma": {
@@ -1443,7 +1611,10 @@
1443
1611
  "filePath": "src/tokens/functional/size/size.json5",
1444
1612
  "isSource": true,
1445
1613
  "original": {
1446
- "$value": "320px",
1614
+ "$value": {
1615
+ "value": 320,
1616
+ "unit": "px"
1617
+ },
1447
1618
  "$type": "dimension",
1448
1619
  "$extensions": {
1449
1620
  "org.primer.figma": {
@@ -1470,7 +1641,10 @@
1470
1641
  "filePath": "src/tokens/functional/size/size.json5",
1471
1642
  "isSource": true,
1472
1643
  "original": {
1473
- "$value": "960px",
1644
+ "$value": {
1645
+ "value": 960,
1646
+ "unit": "px"
1647
+ },
1474
1648
  "$type": "dimension",
1475
1649
  "$extensions": {
1476
1650
  "org.primer.figma": {
@@ -1497,7 +1671,10 @@
1497
1671
  "filePath": "src/tokens/functional/size/size.json5",
1498
1672
  "isSource": true,
1499
1673
  "original": {
1500
- "$value": "192px",
1674
+ "$value": {
1675
+ "value": 192,
1676
+ "unit": "px"
1677
+ },
1501
1678
  "$type": "dimension",
1502
1679
  "$extensions": {
1503
1680
  "org.primer.figma": {
@@ -1513,7 +1690,7 @@
1513
1690
  },
1514
1691
  "spinner-size-large": {
1515
1692
  "key": "{spinner.size.large}",
1516
- "$value": ["0.25rem", "4px"],
1693
+ "$value": ["4rem", "64px"],
1517
1694
  "$type": "dimension",
1518
1695
  "$extensions": {
1519
1696
  "org.primer.figma": {
@@ -1540,7 +1717,7 @@
1540
1717
  },
1541
1718
  "spinner-size-medium": {
1542
1719
  "key": "{spinner.size.medium}",
1543
- "$value": ["0.125rem", "2px"],
1720
+ "$value": ["2rem", "32px"],
1544
1721
  "$type": "dimension",
1545
1722
  "$extensions": {
1546
1723
  "org.primer.figma": {
@@ -1567,7 +1744,7 @@
1567
1744
  },
1568
1745
  "spinner-size-small": {
1569
1746
  "key": "{spinner.size.small}",
1570
- "$value": ["0.0625rem", "1px"],
1747
+ "$value": ["1rem", "16px"],
1571
1748
  "$type": "dimension",
1572
1749
  "$extensions": {
1573
1750
  "org.primer.figma": {
@@ -1599,7 +1776,10 @@
1599
1776
  "filePath": "src/tokens/functional/size/size.json5",
1600
1777
  "isSource": true,
1601
1778
  "original": {
1602
- "$value": "2px",
1779
+ "$value": {
1780
+ "value": 2,
1781
+ "unit": "px"
1782
+ },
1603
1783
  "$type": "dimension",
1604
1784
  "key": "{spinner.strokeWidth.default}"
1605
1785
  },
@@ -1609,7 +1789,7 @@
1609
1789
  },
1610
1790
  "stack-gap-condensed": {
1611
1791
  "key": "{stack.gap.condensed}",
1612
- "$value": ["0.03125rem", "0.5px"],
1792
+ "$value": ["0.5rem", "8px"],
1613
1793
  "$type": "dimension",
1614
1794
  "$extensions": {
1615
1795
  "org.primer.figma": {
@@ -1644,7 +1824,7 @@
1644
1824
  },
1645
1825
  "stack-gap-normal": {
1646
1826
  "key": "{stack.gap.normal}",
1647
- "$value": ["0.0625rem", "1px"],
1827
+ "$value": ["1rem", "16px"],
1648
1828
  "$type": "dimension",
1649
1829
  "$extensions": {
1650
1830
  "org.primer.figma": {
@@ -1679,7 +1859,7 @@
1679
1859
  },
1680
1860
  "stack-gap-spacious": {
1681
1861
  "key": "{stack.gap.spacious}",
1682
- "$value": ["0.09375rem", "1.5px"],
1862
+ "$value": ["1.5rem", "24px"],
1683
1863
  "$type": "dimension",
1684
1864
  "$extensions": {
1685
1865
  "org.primer.figma": {
@@ -1714,7 +1894,7 @@
1714
1894
  },
1715
1895
  "stack-padding-condensed": {
1716
1896
  "key": "{stack.padding.condensed}",
1717
- "$value": ["0.03125rem", "0.5px"],
1897
+ "$value": ["0.5rem", "8px"],
1718
1898
  "$type": "dimension",
1719
1899
  "$extensions": {
1720
1900
  "org.primer.figma": {
@@ -1749,7 +1929,7 @@
1749
1929
  },
1750
1930
  "stack-padding-normal": {
1751
1931
  "key": "{stack.padding.normal}",
1752
- "$value": ["0.0625rem", "1px"],
1932
+ "$value": ["1rem", "16px"],
1753
1933
  "$type": "dimension",
1754
1934
  "$extensions": {
1755
1935
  "org.primer.figma": {
@@ -1784,7 +1964,7 @@
1784
1964
  },
1785
1965
  "stack-padding-spacious": {
1786
1966
  "key": "{stack.padding.spacious}",
1787
- "$value": ["0.09375rem", "1.5px"],
1967
+ "$value": ["1.5rem", "24px"],
1788
1968
  "$type": "dimension",
1789
1969
  "$extensions": {
1790
1970
  "org.primer.figma": {