@atlaskit/primitives 0.10.0 → 0.11.0

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 (23) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/constellation/xcss/usage.mdx +1 -1
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/cjs/xcss/style-maps.partial.js +191 -190
  5. package/dist/cjs/xcss/xcss.js +1 -1
  6. package/dist/es2019/version.json +1 -1
  7. package/dist/es2019/xcss/style-maps.partial.js +191 -190
  8. package/dist/es2019/xcss/xcss.js +1 -1
  9. package/dist/esm/version.json +1 -1
  10. package/dist/esm/xcss/style-maps.partial.js +191 -190
  11. package/dist/esm/xcss/xcss.js +1 -1
  12. package/dist/types/xcss/style-maps.partial.d.ts +190 -189
  13. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +190 -189
  14. package/package.json +2 -2
  15. package/report.api.md +178 -177
  16. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +280 -142
  17. package/scripts/border-codegen-template.tsx +3 -6
  18. package/scripts/codegen-file-templates/display.tsx +1 -0
  19. package/scripts/codegen-file-templates/flex-shrink.tsx +1 -1
  20. package/scripts/codegen-styles.tsx +5 -5
  21. package/scripts/color-codegen-template.tsx +2 -4
  22. package/tmp/api-report-tmp.d.ts +178 -177
  23. package/tsconfig.node.json +0 -7
package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap CHANGED
@@ -2,235 +2,343 @@
2
2
 
3
3
  exports[`@atlaskit/primitives bg styles are generated correctly 1`] = `
4
4
  "export const backgroundColorMap = {
5
- 'accent.red.subtlest': token(
5
+ 'color.background.accent.red.subtlest': token(
6
6
  'color.background.accent.red.subtlest',
7
7
  '#FF8F73',
8
8
  ),
9
- 'accent.red.subtler': token('color.background.accent.red.subtler', '#FF7452'),
10
- 'accent.red.subtle': token('color.background.accent.red.subtle', '#DE350B'),
11
- 'accent.red.bolder': token('color.background.accent.red.bolder', '#DE350B'),
12
- 'accent.orange.subtlest': token(
9
+ 'color.background.accent.red.subtler': token(
10
+ 'color.background.accent.red.subtler',
11
+ '#FF7452',
12
+ ),
13
+ 'color.background.accent.red.subtle': token(
14
+ 'color.background.accent.red.subtle',
15
+ '#DE350B',
16
+ ),
17
+ 'color.background.accent.red.bolder': token(
18
+ 'color.background.accent.red.bolder',
19
+ '#DE350B',
20
+ ),
21
+ 'color.background.accent.orange.subtlest': token(
13
22
  'color.background.accent.orange.subtlest',
14
23
  '#F18D13',
15
24
  ),
16
- 'accent.orange.subtler': token(
25
+ 'color.background.accent.orange.subtler': token(
17
26
  'color.background.accent.orange.subtler',
18
27
  '#B65C02',
19
28
  ),
20
- 'accent.orange.subtle': token(
29
+ 'color.background.accent.orange.subtle': token(
21
30
  'color.background.accent.orange.subtle',
22
31
  '#5F3811',
23
32
  ),
24
- 'accent.orange.bolder': token(
33
+ 'color.background.accent.orange.bolder': token(
25
34
  'color.background.accent.orange.bolder',
26
35
  '#43290F',
27
36
  ),
28
- 'accent.yellow.subtlest': token(
37
+ 'color.background.accent.yellow.subtlest': token(
29
38
  'color.background.accent.yellow.subtlest',
30
39
  '#FFE380',
31
40
  ),
32
- 'accent.yellow.subtler': token(
41
+ 'color.background.accent.yellow.subtler': token(
33
42
  'color.background.accent.yellow.subtler',
34
43
  '#FFC400',
35
44
  ),
36
- 'accent.yellow.subtle': token(
45
+ 'color.background.accent.yellow.subtle': token(
37
46
  'color.background.accent.yellow.subtle',
38
47
  '#FF991F',
39
48
  ),
40
- 'accent.yellow.bolder': token(
49
+ 'color.background.accent.yellow.bolder': token(
41
50
  'color.background.accent.yellow.bolder',
42
51
  '#FF991F',
43
52
  ),
44
- 'accent.green.subtlest': token(
53
+ 'color.background.accent.green.subtlest': token(
45
54
  'color.background.accent.green.subtlest',
46
55
  '#79F2C0',
47
56
  ),
48
- 'accent.green.subtler': token(
57
+ 'color.background.accent.green.subtler': token(
49
58
  'color.background.accent.green.subtler',
50
59
  '#57D9A3',
51
60
  ),
52
- 'accent.green.subtle': token(
61
+ 'color.background.accent.green.subtle': token(
53
62
  'color.background.accent.green.subtle',
54
63
  '#00875A',
55
64
  ),
56
- 'accent.green.bolder': token(
65
+ 'color.background.accent.green.bolder': token(
57
66
  'color.background.accent.green.bolder',
58
67
  '#00875A',
59
68
  ),
60
- 'accent.teal.subtlest': token(
69
+ 'color.background.accent.teal.subtlest': token(
61
70
  'color.background.accent.teal.subtlest',
62
71
  '#79E2F2',
63
72
  ),
64
- 'accent.teal.subtler': token(
73
+ 'color.background.accent.teal.subtler': token(
65
74
  'color.background.accent.teal.subtler',
66
75
  '#00C7E6',
67
76
  ),
68
- 'accent.teal.subtle': token('color.background.accent.teal.subtle', '#00A3BF'),
69
- 'accent.teal.bolder': token('color.background.accent.teal.bolder', '#00A3BF'),
70
- 'accent.blue.subtlest': token(
77
+ 'color.background.accent.teal.subtle': token(
78
+ 'color.background.accent.teal.subtle',
79
+ '#00A3BF',
80
+ ),
81
+ 'color.background.accent.teal.bolder': token(
82
+ 'color.background.accent.teal.bolder',
83
+ '#00A3BF',
84
+ ),
85
+ 'color.background.accent.blue.subtlest': token(
71
86
  'color.background.accent.blue.subtlest',
72
87
  '#4C9AFF',
73
88
  ),
74
- 'accent.blue.subtler': token(
89
+ 'color.background.accent.blue.subtler': token(
75
90
  'color.background.accent.blue.subtler',
76
91
  '#2684FF',
77
92
  ),
78
- 'accent.blue.subtle': token('color.background.accent.blue.subtle', '#0052CC'),
79
- 'accent.blue.bolder': token('color.background.accent.blue.bolder', '#0052CC'),
80
- 'accent.purple.subtlest': token(
93
+ 'color.background.accent.blue.subtle': token(
94
+ 'color.background.accent.blue.subtle',
95
+ '#0052CC',
96
+ ),
97
+ 'color.background.accent.blue.bolder': token(
98
+ 'color.background.accent.blue.bolder',
99
+ '#0052CC',
100
+ ),
101
+ 'color.background.accent.purple.subtlest': token(
81
102
  'color.background.accent.purple.subtlest',
82
103
  '#998DD9',
83
104
  ),
84
- 'accent.purple.subtler': token(
105
+ 'color.background.accent.purple.subtler': token(
85
106
  'color.background.accent.purple.subtler',
86
107
  '#8777D9',
87
108
  ),
88
- 'accent.purple.subtle': token(
109
+ 'color.background.accent.purple.subtle': token(
89
110
  'color.background.accent.purple.subtle',
90
111
  '#5243AA',
91
112
  ),
92
- 'accent.purple.bolder': token(
113
+ 'color.background.accent.purple.bolder': token(
93
114
  'color.background.accent.purple.bolder',
94
115
  '#5243AA',
95
116
  ),
96
- 'accent.magenta.subtlest': token(
117
+ 'color.background.accent.magenta.subtlest': token(
97
118
  'color.background.accent.magenta.subtlest',
98
119
  '#E774BB',
99
120
  ),
100
- 'accent.magenta.subtler': token(
121
+ 'color.background.accent.magenta.subtler': token(
101
122
  'color.background.accent.magenta.subtler',
102
123
  '#E774BB',
103
124
  ),
104
- 'accent.magenta.subtle': token(
125
+ 'color.background.accent.magenta.subtle': token(
105
126
  'color.background.accent.magenta.subtle',
106
127
  '#E774BB',
107
128
  ),
108
- 'accent.magenta.bolder': token(
129
+ 'color.background.accent.magenta.bolder': token(
109
130
  'color.background.accent.magenta.bolder',
110
131
  '#E774BB',
111
132
  ),
112
- 'accent.gray.subtlest': token(
133
+ 'color.background.accent.gray.subtlest': token(
113
134
  'color.background.accent.gray.subtlest',
114
135
  '#6B778C',
115
136
  ),
116
- 'accent.gray.subtler': token(
137
+ 'color.background.accent.gray.subtler': token(
117
138
  'color.background.accent.gray.subtler',
118
139
  '#5E6C84',
119
140
  ),
120
- 'accent.gray.subtle': token('color.background.accent.gray.subtle', '#42526E'),
121
- 'accent.gray.bolder': token('color.background.accent.gray.bolder', '#505F79'),
122
- disabled: token('color.background.disabled', '#091e4289'),
123
- input: token('color.background.input', '#FAFBFC'),
124
- 'input.hovered': token('color.background.input.hovered', '#EBECF0'),
125
- 'input.pressed': token('color.background.input.pressed', '#FFFFFF'),
126
- 'inverse.subtle': token('color.background.inverse.subtle', '#00000029'),
127
- 'inverse.subtle.hovered': token(
141
+ 'color.background.accent.gray.subtle': token(
142
+ 'color.background.accent.gray.subtle',
143
+ '#42526E',
144
+ ),
145
+ 'color.background.accent.gray.bolder': token(
146
+ 'color.background.accent.gray.bolder',
147
+ '#505F79',
148
+ ),
149
+ 'color.background.disabled': token('color.background.disabled', '#091e4289'),
150
+ 'color.background.input': token('color.background.input', '#FAFBFC'),
151
+ 'color.background.input.hovered': token(
152
+ 'color.background.input.hovered',
153
+ '#EBECF0',
154
+ ),
155
+ 'color.background.input.pressed': token(
156
+ 'color.background.input.pressed',
157
+ '#FFFFFF',
158
+ ),
159
+ 'color.background.inverse.subtle': token(
160
+ 'color.background.inverse.subtle',
161
+ '#00000029',
162
+ ),
163
+ 'color.background.inverse.subtle.hovered': token(
128
164
  'color.background.inverse.subtle.hovered',
129
165
  '#0000003D',
130
166
  ),
131
- 'inverse.subtle.pressed': token(
167
+ 'color.background.inverse.subtle.pressed': token(
132
168
  'color.background.inverse.subtle.pressed',
133
169
  '#00000052',
134
170
  ),
135
- neutral: token('color.background.neutral', '#DFE1E6'),
136
- 'neutral.hovered': token('color.background.neutral.hovered', '#091e4214'),
137
- 'neutral.pressed': token('color.background.neutral.pressed', '#B3D4FF'),
138
- 'neutral.subtle': token('color.background.neutral.subtle', 'transparent'),
139
- 'neutral.subtle.hovered': token(
171
+ 'color.background.neutral': token('color.background.neutral', '#DFE1E6'),
172
+ 'color.background.neutral.hovered': token(
173
+ 'color.background.neutral.hovered',
174
+ '#091e4214',
175
+ ),
176
+ 'color.background.neutral.pressed': token(
177
+ 'color.background.neutral.pressed',
178
+ '#B3D4FF',
179
+ ),
180
+ 'color.background.neutral.subtle': token(
181
+ 'color.background.neutral.subtle',
182
+ 'transparent',
183
+ ),
184
+ 'color.background.neutral.subtle.hovered': token(
140
185
  'color.background.neutral.subtle.hovered',
141
186
  '#091e4214',
142
187
  ),
143
- 'neutral.subtle.pressed': token(
188
+ 'color.background.neutral.subtle.pressed': token(
144
189
  'color.background.neutral.subtle.pressed',
145
190
  '#B3D4FF',
146
191
  ),
147
- 'neutral.bold': token('color.background.neutral.bold', '#42526E'),
148
- 'neutral.bold.hovered': token(
192
+ 'color.background.neutral.bold': token(
193
+ 'color.background.neutral.bold',
194
+ '#42526E',
195
+ ),
196
+ 'color.background.neutral.bold.hovered': token(
149
197
  'color.background.neutral.bold.hovered',
150
198
  '#505F79',
151
199
  ),
152
- 'neutral.bold.pressed': token(
200
+ 'color.background.neutral.bold.pressed': token(
153
201
  'color.background.neutral.bold.pressed',
154
202
  '#344563',
155
203
  ),
156
- selected: token('color.background.selected', '#DEEBFF'),
157
- 'selected.hovered': token('color.background.selected.hovered', '#B3D4FF'),
158
- 'selected.pressed': token('color.background.selected.pressed', '#4C9AFF'),
159
- 'selected.bold': token('color.background.selected.bold', '#0052CC'),
160
- 'selected.bold.hovered': token(
204
+ 'color.background.selected': token('color.background.selected', '#DEEBFF'),
205
+ 'color.background.selected.hovered': token(
206
+ 'color.background.selected.hovered',
207
+ '#B3D4FF',
208
+ ),
209
+ 'color.background.selected.pressed': token(
210
+ 'color.background.selected.pressed',
211
+ '#4C9AFF',
212
+ ),
213
+ 'color.background.selected.bold': token(
214
+ 'color.background.selected.bold',
215
+ '#0052CC',
216
+ ),
217
+ 'color.background.selected.bold.hovered': token(
161
218
  'color.background.selected.bold.hovered',
162
219
  '#2684FF',
163
220
  ),
164
- 'selected.bold.pressed': token(
221
+ 'color.background.selected.bold.pressed': token(
165
222
  'color.background.selected.bold.pressed',
166
223
  '#0052CC',
167
224
  ),
168
- 'brand.bold': token('color.background.brand.bold', '#0052CC'),
169
- 'brand.bold.hovered': token('color.background.brand.bold.hovered', '#0065FF'),
170
- 'brand.bold.pressed': token('color.background.brand.bold.pressed', '#0747A6'),
171
- danger: token('color.background.danger', '#FFEBE6'),
172
- 'danger.hovered': token('color.background.danger.hovered', '#FFBDAD'),
173
- 'danger.pressed': token('color.background.danger.pressed', '#FF8F73'),
174
- 'danger.bold': token('color.background.danger.bold', '#DE350B'),
175
- 'danger.bold.hovered': token(
225
+ 'color.background.brand.bold': token(
226
+ 'color.background.brand.bold',
227
+ '#0052CC',
228
+ ),
229
+ 'color.background.brand.bold.hovered': token(
230
+ 'color.background.brand.bold.hovered',
231
+ '#0065FF',
232
+ ),
233
+ 'color.background.brand.bold.pressed': token(
234
+ 'color.background.brand.bold.pressed',
235
+ '#0747A6',
236
+ ),
237
+ 'color.background.danger': token('color.background.danger', '#FFEBE6'),
238
+ 'color.background.danger.hovered': token(
239
+ 'color.background.danger.hovered',
240
+ '#FFBDAD',
241
+ ),
242
+ 'color.background.danger.pressed': token(
243
+ 'color.background.danger.pressed',
244
+ '#FF8F73',
245
+ ),
246
+ 'color.background.danger.bold': token(
247
+ 'color.background.danger.bold',
248
+ '#DE350B',
249
+ ),
250
+ 'color.background.danger.bold.hovered': token(
176
251
  'color.background.danger.bold.hovered',
177
252
  '#FF5630',
178
253
  ),
179
- 'danger.bold.pressed': token(
254
+ 'color.background.danger.bold.pressed': token(
180
255
  'color.background.danger.bold.pressed',
181
256
  '#BF2600',
182
257
  ),
183
- warning: token('color.background.warning', '#FFFAE6'),
184
- 'warning.hovered': token('color.background.warning.hovered', '#FFF0B3'),
185
- 'warning.pressed': token('color.background.warning.pressed', '#FFE380'),
186
- 'warning.bold': token('color.background.warning.bold', '#FFAB00'),
187
- 'warning.bold.hovered': token(
258
+ 'color.background.warning': token('color.background.warning', '#FFFAE6'),
259
+ 'color.background.warning.hovered': token(
260
+ 'color.background.warning.hovered',
261
+ '#FFF0B3',
262
+ ),
263
+ 'color.background.warning.pressed': token(
264
+ 'color.background.warning.pressed',
265
+ '#FFE380',
266
+ ),
267
+ 'color.background.warning.bold': token(
268
+ 'color.background.warning.bold',
269
+ '#FFAB00',
270
+ ),
271
+ 'color.background.warning.bold.hovered': token(
188
272
  'color.background.warning.bold.hovered',
189
273
  '#FFC400',
190
274
  ),
191
- 'warning.bold.pressed': token(
275
+ 'color.background.warning.bold.pressed': token(
192
276
  'color.background.warning.bold.pressed',
193
277
  '#FF991F',
194
278
  ),
195
- success: token('color.background.success', '#E3FCEF'),
196
- 'success.hovered': token('color.background.success.hovered', '#ABF5D1'),
197
- 'success.pressed': token('color.background.success.pressed', '#79F2C0'),
198
- 'success.bold': token('color.background.success.bold', '#00875A'),
199
- 'success.bold.hovered': token(
279
+ 'color.background.success': token('color.background.success', '#E3FCEF'),
280
+ 'color.background.success.hovered': token(
281
+ 'color.background.success.hovered',
282
+ '#ABF5D1',
283
+ ),
284
+ 'color.background.success.pressed': token(
285
+ 'color.background.success.pressed',
286
+ '#79F2C0',
287
+ ),
288
+ 'color.background.success.bold': token(
289
+ 'color.background.success.bold',
290
+ '#00875A',
291
+ ),
292
+ 'color.background.success.bold.hovered': token(
200
293
  'color.background.success.bold.hovered',
201
294
  '#57D9A3',
202
295
  ),
203
- 'success.bold.pressed': token(
296
+ 'color.background.success.bold.pressed': token(
204
297
  'color.background.success.bold.pressed',
205
298
  '#00875A',
206
299
  ),
207
- discovery: token('color.background.discovery', '#EAE6FF'),
208
- 'discovery.hovered': token('color.background.discovery.hovered', '#C0B6F2'),
209
- 'discovery.pressed': token('color.background.discovery.pressed', '#998DD9'),
210
- 'discovery.bold': token('color.background.discovery.bold', '#5243AA'),
211
- 'discovery.bold.hovered': token(
300
+ 'color.background.discovery': token('color.background.discovery', '#EAE6FF'),
301
+ 'color.background.discovery.hovered': token(
302
+ 'color.background.discovery.hovered',
303
+ '#C0B6F2',
304
+ ),
305
+ 'color.background.discovery.pressed': token(
306
+ 'color.background.discovery.pressed',
307
+ '#998DD9',
308
+ ),
309
+ 'color.background.discovery.bold': token(
310
+ 'color.background.discovery.bold',
311
+ '#5243AA',
312
+ ),
313
+ 'color.background.discovery.bold.hovered': token(
212
314
  'color.background.discovery.bold.hovered',
213
315
  '#8777D9',
214
316
  ),
215
- 'discovery.bold.pressed': token(
317
+ 'color.background.discovery.bold.pressed': token(
216
318
  'color.background.discovery.bold.pressed',
217
319
  '#5243AA',
218
320
  ),
219
- information: token('color.background.information', '#DEEBFF'),
220
- 'information.hovered': token(
321
+ 'color.background.information': token(
322
+ 'color.background.information',
323
+ '#DEEBFF',
324
+ ),
325
+ 'color.background.information.hovered': token(
221
326
  'color.background.information.hovered',
222
327
  '#B3D4FF',
223
328
  ),
224
- 'information.pressed': token(
329
+ 'color.background.information.pressed': token(
225
330
  'color.background.information.pressed',
226
331
  '#4C9AFF',
227
332
  ),
228
- 'information.bold': token('color.background.information.bold', '#0052CC'),
229
- 'information.bold.hovered': token(
333
+ 'color.background.information.bold': token(
334
+ 'color.background.information.bold',
335
+ '#0052CC',
336
+ ),
337
+ 'color.background.information.bold.hovered': token(
230
338
  'color.background.information.bold.hovered',
231
339
  '#2684FF',
232
340
  ),
233
- 'information.bold.pressed': token(
341
+ 'color.background.information.bold.pressed': token(
234
342
  'color.background.information.bold.pressed',
235
343
  '#0052CC',
236
344
  ),
@@ -268,27 +376,30 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
268
376
  exports[`@atlaskit/primitives border styles are generated correctly 1`] = `
269
377
  "export const borderColorMap = {
270
378
  'color.border': token('color.border', '#091e4221'),
271
- 'accent.red': token('color.border.accent.red', '#FF5630'),
272
- 'accent.orange': token('color.border.accent.orange', '#D94008'),
273
- 'accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
274
- 'accent.green': token('color.border.accent.green', '#36B37E'),
275
- 'accent.teal': token('color.border.accent.teal', '#00B8D9'),
276
- 'accent.blue': token('color.border.accent.blue', '#0065FF'),
277
- 'accent.purple': token('color.border.accent.purple', '#6554C0'),
278
- 'accent.magenta': token('color.border.accent.magenta', '#CD519D'),
279
- 'accent.gray': token('color.border.accent.gray', '#5E6C84'),
280
- disabled: token('color.border.disabled', '#FAFBFC'),
281
- focused: token('color.border.focused', '#4C9AFF'),
282
- input: token('color.border.input', '#FAFBFC'),
283
- inverse: token('color.border.inverse', '#FFFFFF'),
284
- selected: token('color.border.selected', '#0052CC'),
285
- brand: token('color.border.brand', '#0052CC'),
286
- danger: token('color.border.danger', '#FF5630'),
287
- warning: token('color.border.warning', '#FFC400'),
288
- success: token('color.border.success', '#00875A'),
289
- discovery: token('color.border.discovery', '#998DD9'),
290
- information: token('color.border.information', '#0065FF'),
291
- bold: token('color.border.bold', '#344563'),
379
+ 'color.border.accent.red': token('color.border.accent.red', '#FF5630'),
380
+ 'color.border.accent.orange': token('color.border.accent.orange', '#D94008'),
381
+ 'color.border.accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
382
+ 'color.border.accent.green': token('color.border.accent.green', '#36B37E'),
383
+ 'color.border.accent.teal': token('color.border.accent.teal', '#00B8D9'),
384
+ 'color.border.accent.blue': token('color.border.accent.blue', '#0065FF'),
385
+ 'color.border.accent.purple': token('color.border.accent.purple', '#6554C0'),
386
+ 'color.border.accent.magenta': token(
387
+ 'color.border.accent.magenta',
388
+ '#CD519D',
389
+ ),
390
+ 'color.border.accent.gray': token('color.border.accent.gray', '#5E6C84'),
391
+ 'color.border.disabled': token('color.border.disabled', '#FAFBFC'),
392
+ 'color.border.focused': token('color.border.focused', '#4C9AFF'),
393
+ 'color.border.input': token('color.border.input', '#FAFBFC'),
394
+ 'color.border.inverse': token('color.border.inverse', '#FFFFFF'),
395
+ 'color.border.selected': token('color.border.selected', '#0052CC'),
396
+ 'color.border.brand': token('color.border.brand', '#0052CC'),
397
+ 'color.border.danger': token('color.border.danger', '#FF5630'),
398
+ 'color.border.warning': token('color.border.warning', '#FFC400'),
399
+ 'color.border.success': token('color.border.success', '#00875A'),
400
+ 'color.border.discovery': token('color.border.discovery', '#998DD9'),
401
+ 'color.border.information': token('color.border.information', '#0065FF'),
402
+ 'color.border.bold': token('color.border.bold', '#344563'),
292
403
  } as const;
293
404
 
294
405
  export type BorderColor = keyof typeof borderColorMap;
@@ -298,36 +409,63 @@ export type BorderColor = keyof typeof borderColorMap;
298
409
  exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
299
410
  "export const textColorMap = {
300
411
  'color.text': token('color.text', '#172B4D'),
301
- 'accent.red': token('color.text.accent.red', '#DE350B'),
302
- 'accent.red.bolder': token('color.text.accent.red.bolder', '#BF2600'),
303
- 'accent.orange': token('color.text.accent.orange', '#F18D13'),
304
- 'accent.orange.bolder': token('color.text.accent.orange.bolder', '#B65C02'),
305
- 'accent.yellow': token('color.text.accent.yellow', '#FF991F'),
306
- 'accent.yellow.bolder': token('color.text.accent.yellow.bolder', '#FF8B00'),
307
- 'accent.green': token('color.text.accent.green', '#00875A'),
308
- 'accent.green.bolder': token('color.text.accent.green.bolder', '#006644'),
309
- 'accent.teal': token('color.text.accent.teal', '#00A3BF'),
310
- 'accent.teal.bolder': token('color.text.accent.teal.bolder', '#008DA6'),
311
- 'accent.blue': token('color.text.accent.blue', '#0052CC'),
312
- 'accent.blue.bolder': token('color.text.accent.blue.bolder', '#0747A6'),
313
- 'accent.purple': token('color.text.accent.purple', '#5243AA'),
314
- 'accent.purple.bolder': token('color.text.accent.purple.bolder', '#403294'),
315
- 'accent.magenta': token('color.text.accent.magenta', '#E774BB'),
316
- 'accent.magenta.bolder': token('color.text.accent.magenta.bolder', '#DA62AC'),
317
- 'accent.gray': token('color.text.accent.gray', '#505F79'),
318
- 'accent.gray.bolder': token('color.text.accent.gray.bolder', '#172B4D'),
319
- disabled: token('color.text.disabled', '#A5ADBA'),
320
- inverse: token('color.text.inverse', '#FFFFFF'),
321
- selected: token('color.text.selected', '#0052CC'),
322
- brand: token('color.text.brand', '#0065FF'),
323
- danger: token('color.text.danger', '#DE350B'),
324
- warning: token('color.text.warning', '#974F0C'),
325
- 'warning.inverse': token('color.text.warning.inverse', '#172B4D'),
326
- success: token('color.text.success', '#006644'),
327
- discovery: token('color.text.discovery', '#403294'),
328
- information: token('color.text.information', '#0052CC'),
329
- subtlest: token('color.text.subtlest', '#7A869A'),
330
- subtle: token('color.text.subtle', '#42526E'),
412
+ 'color.text.accent.red': token('color.text.accent.red', '#DE350B'),
413
+ 'color.text.accent.red.bolder': token(
414
+ 'color.text.accent.red.bolder',
415
+ '#BF2600',
416
+ ),
417
+ 'color.text.accent.orange': token('color.text.accent.orange', '#F18D13'),
418
+ 'color.text.accent.orange.bolder': token(
419
+ 'color.text.accent.orange.bolder',
420
+ '#B65C02',
421
+ ),
422
+ 'color.text.accent.yellow': token('color.text.accent.yellow', '#FF991F'),
423
+ 'color.text.accent.yellow.bolder': token(
424
+ 'color.text.accent.yellow.bolder',
425
+ '#FF8B00',
426
+ ),
427
+ 'color.text.accent.green': token('color.text.accent.green', '#00875A'),
428
+ 'color.text.accent.green.bolder': token(
429
+ 'color.text.accent.green.bolder',
430
+ '#006644',
431
+ ),
432
+ 'color.text.accent.teal': token('color.text.accent.teal', '#00A3BF'),
433
+ 'color.text.accent.teal.bolder': token(
434
+ 'color.text.accent.teal.bolder',
435
+ '#008DA6',
436
+ ),
437
+ 'color.text.accent.blue': token('color.text.accent.blue', '#0052CC'),
438
+ 'color.text.accent.blue.bolder': token(
439
+ 'color.text.accent.blue.bolder',
440
+ '#0747A6',
441
+ ),
442
+ 'color.text.accent.purple': token('color.text.accent.purple', '#5243AA'),
443
+ 'color.text.accent.purple.bolder': token(
444
+ 'color.text.accent.purple.bolder',
445
+ '#403294',
446
+ ),
447
+ 'color.text.accent.magenta': token('color.text.accent.magenta', '#E774BB'),
448
+ 'color.text.accent.magenta.bolder': token(
449
+ 'color.text.accent.magenta.bolder',
450
+ '#DA62AC',
451
+ ),
452
+ 'color.text.accent.gray': token('color.text.accent.gray', '#505F79'),
453
+ 'color.text.accent.gray.bolder': token(
454
+ 'color.text.accent.gray.bolder',
455
+ '#172B4D',
456
+ ),
457
+ 'color.text.disabled': token('color.text.disabled', '#A5ADBA'),
458
+ 'color.text.inverse': token('color.text.inverse', '#FFFFFF'),
459
+ 'color.text.selected': token('color.text.selected', '#0052CC'),
460
+ 'color.text.brand': token('color.text.brand', '#0065FF'),
461
+ 'color.text.danger': token('color.text.danger', '#DE350B'),
462
+ 'color.text.warning': token('color.text.warning', '#974F0C'),
463
+ 'color.text.warning.inverse': token('color.text.warning.inverse', '#172B4D'),
464
+ 'color.text.success': token('color.text.success', '#006644'),
465
+ 'color.text.discovery': token('color.text.discovery', '#403294'),
466
+ 'color.text.information': token('color.text.information', '#0052CC'),
467
+ 'color.text.subtlest': token('color.text.subtlest', '#7A869A'),
468
+ 'color.text.subtle': token('color.text.subtle', '#42526E'),
331
469
  } as const;
332
470
 
333
471
  export type TextColor = keyof typeof textColorMap;
package/scripts/border-codegen-template.tsx CHANGED
@@ -16,7 +16,6 @@ const tokenStyles = {
16
16
  width: {
17
17
  objectName: 'borderWidth',
18
18
  filterPrefix: 'border.width.',
19
- renamePrefix: 'border.',
20
19
  cssProperty: 'borderWidth',
21
20
  filterFn: <T extends Token>(t: T) =>
22
21
  t.token.startsWith(tokenStyles.width.filterPrefix),
@@ -24,7 +23,6 @@ const tokenStyles = {
24
23
  radius: {
25
24
  objectName: 'borderRadius',
26
25
  filterPrefix: 'border.radius.',
27
- renamePrefix: 'border.',
28
26
  cssProperty: 'borderRadius',
29
27
  filterFn: <T extends Token>(t: T) =>
30
28
  t.token.startsWith(tokenStyles.radius.filterPrefix),
@@ -36,7 +34,7 @@ const activeTokens = tokens
36
34
  .map(
37
35
  (t): Token => ({
38
36
  token: t.name,
39
- fallback: t.value as string,
37
+ fallback: t.value === '4px' ? '3px' : (t.value as string),
40
38
  isDeprecated: t.attributes.state === 'deprecated',
41
39
  }),
42
40
  );
@@ -48,7 +46,7 @@ export const createBorderStylesFromTemplate = (
48
46
  throw new Error(`[codegen] Unknown option found "${property}"`);
49
47
  }
50
48
 
51
- const { filterFn, renamePrefix, objectName } = tokenStyles[property];
49
+ const { filterFn, objectName } = tokenStyles[property];
52
50
 
53
51
  return (
54
52
  prettier.format(
@@ -57,10 +55,9 @@ export const ${objectName}Map = {
57
55
  ${activeTokens
58
56
  .filter(filterFn)
59
57
  .map(t => {
60
- const propName = t.token.replace(renamePrefix, '');
61
58
  return `
62
59
  ${t.isDeprecated ? '// @deprecated' : ''}
63
- '${propName}': ${constructTokenFunctionCall(
60
+ '${t.token}': ${constructTokenFunctionCall(
64
61
  t.token,
65
62
  t.fallback,
66
63
  )}`.trim();
package/scripts/codegen-file-templates/display.tsx CHANGED
@@ -4,6 +4,7 @@ export const displayMap = {
4
4
  inline: 'inline',
5
5
  inlineBlock: 'inline-block',
6
6
  inlineFlex: 'inline-flex',
7
+ grid: 'grid',
7
8
  } as const;
8
9
 
9
10
  export type Display = keyof typeof displayMap;
package/scripts/codegen-file-templates/flex-shrink.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  export const flexShrinkMap = {
2
- '0': 0,
2
+ '0': '0',
3
3
  '1': 1,
4
4
  } as const;
5
5