@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
package/dist/docs/functional/size/breakpoints.json CHANGED
@@ -10,7 +10,10 @@
10
10
  "filePath": "src/tokens/functional/size/breakpoints.json5",
11
11
  "isSource": true,
12
12
  "original": {
13
- "$value": "1012px",
13
+ "$value": {
14
+ "value": 1012,
15
+ "unit": "px"
16
+ },
14
17
  "$type": "dimension",
15
18
  "$extensions": {
16
19
  "org.primer.figma": {
@@ -37,7 +40,10 @@
37
40
  "filePath": "src/tokens/functional/size/breakpoints.json5",
38
41
  "isSource": true,
39
42
  "original": {
40
- "$value": "768px",
43
+ "$value": {
44
+ "value": 768,
45
+ "unit": "px"
46
+ },
41
47
  "$type": "dimension",
42
48
  "$extensions": {
43
49
  "org.primer.figma": {
@@ -64,7 +70,10 @@
64
70
  "filePath": "src/tokens/functional/size/breakpoints.json5",
65
71
  "isSource": true,
66
72
  "original": {
67
- "$value": "544px",
73
+ "$value": {
74
+ "value": 544,
75
+ "unit": "px"
76
+ },
68
77
  "$type": "dimension",
69
78
  "$extensions": {
70
79
  "org.primer.figma": {
@@ -91,7 +100,10 @@
91
100
  "filePath": "src/tokens/functional/size/breakpoints.json5",
92
101
  "isSource": true,
93
102
  "original": {
94
- "$value": "1280px",
103
+ "$value": {
104
+ "value": 1280,
105
+ "unit": "px"
106
+ },
95
107
  "$type": "dimension",
96
108
  "$extensions": {
97
109
  "org.primer.figma": {
@@ -118,7 +130,10 @@
118
130
  "filePath": "src/tokens/functional/size/breakpoints.json5",
119
131
  "isSource": true,
120
132
  "original": {
121
- "$value": "320px",
133
+ "$value": {
134
+ "value": 320,
135
+ "unit": "px"
136
+ },
122
137
  "$type": "dimension",
123
138
  "$extensions": {
124
139
  "org.primer.figma": {
@@ -145,7 +160,10 @@
145
160
  "filePath": "src/tokens/functional/size/breakpoints.json5",
146
161
  "isSource": true,
147
162
  "original": {
148
- "$value": "1400px",
163
+ "$value": {
164
+ "value": 1400,
165
+ "unit": "px"
166
+ },
149
167
  "$type": "dimension",
150
168
  "$extensions": {
151
169
  "org.primer.figma": {
package/dist/docs/functional/size/radius.json CHANGED
@@ -52,7 +52,10 @@
52
52
  "filePath": "src/tokens/functional/size/radius.json5",
53
53
  "isSource": true,
54
54
  "original": {
55
- "$value": "9999px",
55
+ "$value": {
56
+ "value": 9999,
57
+ "unit": "px"
58
+ },
56
59
  "$type": "dimension",
57
60
  "$description": "Use this border radius for pill shaped elements",
58
61
  "$extensions": {
@@ -95,7 +98,10 @@
95
98
  "filePath": "src/tokens/functional/size/radius.json5",
96
99
  "isSource": true,
97
100
  "original": {
98
- "$value": "12px",
101
+ "$value": {
102
+ "value": 12,
103
+ "unit": "px"
104
+ },
99
105
  "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
100
106
  "$type": "dimension",
101
107
  "$extensions": {
@@ -138,7 +144,10 @@
138
144
  "filePath": "src/tokens/functional/size/radius.json5",
139
145
  "isSource": true,
140
146
  "original": {
141
- "$value": "6px",
147
+ "$value": {
148
+ "value": 6,
149
+ "unit": "px"
150
+ },
142
151
  "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
143
152
  "$type": "dimension",
144
153
  "$extensions": {
@@ -181,7 +190,10 @@
181
190
  "filePath": "src/tokens/functional/size/radius.json5",
182
191
  "isSource": true,
183
192
  "original": {
184
- "$value": "3px",
193
+ "$value": {
194
+ "value": 3,
195
+ "unit": "px"
196
+ },
185
197
  "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
186
198
  "$type": "dimension",
187
199
  "$extensions": {
package/dist/docs/functional/size/size.json CHANGED
@@ -64,7 +64,10 @@
64
64
  "filePath": "src/tokens/functional/size/size.json5",
65
65
  "isSource": true,
66
66
  "original": {
67
- "$value": "10px",
67
+ "$value": {
68
+ "value": 10,
69
+ "unit": "px"
70
+ },
68
71
  "$type": "dimension",
69
72
  "$extensions": {
70
73
  "org.primer.figma": {
@@ -226,7 +229,10 @@
226
229
  "filePath": "src/tokens/functional/size/size.json5",
227
230
  "isSource": true,
228
231
  "original": {
229
- "$value": "6px",
232
+ "$value": {
233
+ "value": 6,
234
+ "unit": "px"
235
+ },
230
236
  "$type": "dimension",
231
237
  "$extensions": {
232
238
  "org.primer.figma": {
@@ -631,7 +637,10 @@
631
637
  "filePath": "src/tokens/functional/size/size.json5",
632
638
  "isSource": true,
633
639
  "original": {
634
- "$value": "14px",
640
+ "$value": {
641
+ "value": 14,
642
+ "unit": "px"
643
+ },
635
644
  "$type": "dimension",
636
645
  "$extensions": {
637
646
  "org.primer.figma": {
@@ -793,7 +802,10 @@
793
802
  "filePath": "src/tokens/functional/size/size.json5",
794
803
  "isSource": true,
795
804
  "original": {
796
- "$value": "2px",
805
+ "$value": {
806
+ "value": 2,
807
+ "unit": "px"
808
+ },
797
809
  "$type": "dimension",
798
810
  "$extensions": {
799
811
  "org.primer.figma": {
@@ -1144,7 +1156,10 @@
1144
1156
  "filePath": "src/tokens/functional/size/size.json5",
1145
1157
  "isSource": true,
1146
1158
  "original": {
1147
- "$value": "432px",
1159
+ "$value": {
1160
+ "value": 432,
1161
+ "unit": "px"
1162
+ },
1148
1163
  "$type": "dimension",
1149
1164
  "$extensions": {
1150
1165
  "org.primer.figma": {
@@ -1171,7 +1186,10 @@
1171
1186
  "filePath": "src/tokens/functional/size/size.json5",
1172
1187
  "isSource": true,
1173
1188
  "original": {
1174
- "$value": "320px",
1189
+ "$value": {
1190
+ "value": 320,
1191
+ "unit": "px"
1192
+ },
1175
1193
  "$type": "dimension",
1176
1194
  "$extensions": {
1177
1195
  "org.primer.figma": {
@@ -1198,7 +1216,10 @@
1198
1216
  "filePath": "src/tokens/functional/size/size.json5",
1199
1217
  "isSource": true,
1200
1218
  "original": {
1201
- "$value": "256px",
1219
+ "$value": {
1220
+ "value": 256,
1221
+ "unit": "px"
1222
+ },
1202
1223
  "$type": "dimension",
1203
1224
  "$extensions": {
1204
1225
  "org.primer.figma": {
@@ -1225,7 +1246,10 @@
1225
1246
  "filePath": "src/tokens/functional/size/size.json5",
1226
1247
  "isSource": true,
1227
1248
  "original": {
1228
- "$value": "600px",
1249
+ "$value": {
1250
+ "value": 600,
1251
+ "unit": "px"
1252
+ },
1229
1253
  "$type": "dimension",
1230
1254
  "$extensions": {
1231
1255
  "org.primer.figma": {
@@ -1252,7 +1276,10 @@
1252
1276
  "filePath": "src/tokens/functional/size/size.json5",
1253
1277
  "isSource": true,
1254
1278
  "original": {
1255
- "$value": "4px",
1279
+ "$value": {
1280
+ "value": 4,
1281
+ "unit": "px"
1282
+ },
1256
1283
  "$type": "dimension",
1257
1284
  "$extensions": {
1258
1285
  "org.primer.figma": {
@@ -1387,7 +1414,10 @@
1387
1414
  "filePath": "src/tokens/functional/size/size.json5",
1388
1415
  "isSource": true,
1389
1416
  "original": {
1390
- "$value": "640px",
1417
+ "$value": {
1418
+ "value": 640,
1419
+ "unit": "px"
1420
+ },
1391
1421
  "$type": "dimension",
1392
1422
  "$extensions": {
1393
1423
  "org.primer.figma": {
@@ -1414,7 +1444,10 @@
1414
1444
  "filePath": "src/tokens/functional/size/size.json5",
1415
1445
  "isSource": true,
1416
1446
  "original": {
1417
- "$value": "480px",
1447
+ "$value": {
1448
+ "value": 480,
1449
+ "unit": "px"
1450
+ },
1418
1451
  "$type": "dimension",
1419
1452
  "$extensions": {
1420
1453
  "org.primer.figma": {
@@ -1441,7 +1474,10 @@
1441
1474
  "filePath": "src/tokens/functional/size/size.json5",
1442
1475
  "isSource": true,
1443
1476
  "original": {
1444
- "$value": "320px",
1477
+ "$value": {
1478
+ "value": 320,
1479
+ "unit": "px"
1480
+ },
1445
1481
  "$type": "dimension",
1446
1482
  "$extensions": {
1447
1483
  "org.primer.figma": {
@@ -1468,7 +1504,10 @@
1468
1504
  "filePath": "src/tokens/functional/size/size.json5",
1469
1505
  "isSource": true,
1470
1506
  "original": {
1471
- "$value": "960px",
1507
+ "$value": {
1508
+ "value": 960,
1509
+ "unit": "px"
1510
+ },
1472
1511
  "$type": "dimension",
1473
1512
  "$extensions": {
1474
1513
  "org.primer.figma": {
@@ -1495,7 +1534,10 @@
1495
1534
  "filePath": "src/tokens/functional/size/size.json5",
1496
1535
  "isSource": true,
1497
1536
  "original": {
1498
- "$value": "192px",
1537
+ "$value": {
1538
+ "value": 192,
1539
+ "unit": "px"
1540
+ },
1499
1541
  "$type": "dimension",
1500
1542
  "$extensions": {
1501
1543
  "org.primer.figma": {
@@ -1597,7 +1639,10 @@
1597
1639
  "filePath": "src/tokens/functional/size/size.json5",
1598
1640
  "isSource": true,
1599
1641
  "original": {
1600
- "$value": "2px",
1642
+ "$value": {
1643
+ "value": 2,
1644
+ "unit": "px"
1645
+ },
1601
1646
  "$type": "dimension",
1602
1647
  "key": "{spinner.strokeWidth.default}"
1603
1648
  },