@atlaskit/css 0.5.1 → 0.5.3

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 (4) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/codemods/primitives-emotion-to-compiled/0.5.2-primitives-emotion-to-compiled.tsx +334 -0
  3. package/codemods/primitives-emotion-to-compiled/style-maps.partial.tsx +1268 -0
  4. package/package.json +5 -1
package/codemods/primitives-emotion-to-compiled/style-maps.partial.tsx ADDED
@@ -0,0 +1,1268 @@
1
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
+ import { css, type SerializedStyles } from '@emotion/react';
3
+
4
+ import { CURRENT_SURFACE_CSS_VAR, token } from '@atlaskit/tokens';
5
+
6
+ /**
7
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
8
+ * @codegen <<SignedSource::df710bcd99c0a8704ca36bddb12c2154>>
9
+ * @codegenId dimensions
10
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
11
+ * @codegenParams ["dimensions"]
12
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
13
+ */
14
+ export const dimensionMap = {
15
+ '100%': '100%',
16
+ 'size.100': '1rem',
17
+ 'size.200': '1.5rem',
18
+ 'size.300': '2rem',
19
+ 'size.400': '2.5rem',
20
+ 'size.500': '3rem',
21
+ 'size.600': '6rem',
22
+ 'size.1000': '12rem',
23
+ } as const;
24
+ export type Dimension = keyof typeof dimensionMap;
25
+
26
+ /**
27
+ * @codegenEnd
28
+ */
29
+
30
+ /**
31
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
32
+ * @codegen <<SignedSource::0d3c08d703b8431712d7e238a3f7229b>>
33
+ * @codegenId spacing
34
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
35
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
36
+ */
37
+ export const positiveSpaceMap = {
38
+ 'space.0': token('space.0', '0px'),
39
+ 'space.025': token('space.025', '2px'),
40
+ 'space.050': token('space.050', '4px'),
41
+ 'space.075': token('space.075', '6px'),
42
+ 'space.100': token('space.100', '8px'),
43
+ 'space.150': token('space.150', '12px'),
44
+ 'space.200': token('space.200', '16px'),
45
+ 'space.250': token('space.250', '20px'),
46
+ 'space.300': token('space.300', '24px'),
47
+ 'space.400': token('space.400', '32px'),
48
+ 'space.500': token('space.500', '40px'),
49
+ 'space.600': token('space.600', '48px'),
50
+ 'space.800': token('space.800', '64px'),
51
+ 'space.1000': token('space.1000', '80px'),
52
+ };
53
+ export type Space = keyof typeof positiveSpaceMap;
54
+
55
+ export const negativeSpaceMap = {
56
+ 'space.negative.025': token('space.negative.025', '-2px'),
57
+ 'space.negative.050': token('space.negative.050', '-4px'),
58
+ 'space.negative.075': token('space.negative.075', '-6px'),
59
+ 'space.negative.100': token('space.negative.100', '-8px'),
60
+ 'space.negative.150': token('space.negative.150', '-12px'),
61
+ 'space.negative.200': token('space.negative.200', '-16px'),
62
+ 'space.negative.250': token('space.negative.250', '-20px'),
63
+ 'space.negative.300': token('space.negative.300', '-24px'),
64
+ 'space.negative.400': token('space.negative.400', '-32px'),
65
+ };
66
+ export type NegativeSpace = keyof typeof negativeSpaceMap;
67
+
68
+ export const allSpaceMap = { ...positiveSpaceMap, ...negativeSpaceMap };
69
+
70
+ export type AllSpace = keyof typeof allSpaceMap;
71
+
72
+ /**
73
+ * @codegenEnd
74
+ */
75
+
76
+ /**
77
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
78
+ * @codegen <<SignedSource::dd33c75b34fe7374656f10b21ba9b161>>
79
+ * @codegenId inverse-colors
80
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
81
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
82
+ */
83
+ export const inverseColorMap = {
84
+ 'color.background.neutral.bold': 'color.text.inverse',
85
+ 'color.background.neutral.bold.hovered': 'color.text.inverse',
86
+ 'color.background.neutral.bold.pressed': 'color.text.inverse',
87
+ 'color.background.selected.bold': 'color.text.inverse',
88
+ 'color.background.selected.bold.hovered': 'color.text.inverse',
89
+ 'color.background.selected.bold.pressed': 'color.text.inverse',
90
+ 'color.background.brand.bold': 'color.text.inverse',
91
+ 'color.background.brand.bold.hovered': 'color.text.inverse',
92
+ 'color.background.brand.bold.pressed': 'color.text.inverse',
93
+ 'color.background.brand.boldest': 'color.text.inverse',
94
+ 'color.background.brand.boldest.hovered': 'color.text.inverse',
95
+ 'color.background.brand.boldest.pressed': 'color.text.inverse',
96
+ 'color.background.danger.bold': 'color.text.inverse',
97
+ 'color.background.danger.bold.hovered': 'color.text.inverse',
98
+ 'color.background.danger.bold.pressed': 'color.text.inverse',
99
+ 'color.background.warning.bold': 'color.text.warning.inverse',
100
+ 'color.background.warning.bold.hovered': 'color.text.warning.inverse',
101
+ 'color.background.warning.bold.pressed': 'color.text.warning.inverse',
102
+ 'color.background.success.bold': 'color.text.inverse',
103
+ 'color.background.success.bold.hovered': 'color.text.inverse',
104
+ 'color.background.success.bold.pressed': 'color.text.inverse',
105
+ 'color.background.discovery.bold': 'color.text.inverse',
106
+ 'color.background.discovery.bold.hovered': 'color.text.inverse',
107
+ 'color.background.discovery.bold.pressed': 'color.text.inverse',
108
+ 'color.background.information.bold': 'color.text.inverse',
109
+ 'color.background.information.bold.hovered': 'color.text.inverse',
110
+ 'color.background.information.bold.pressed': 'color.text.inverse',
111
+ } as const;
112
+
113
+ /**
114
+ * @codegenEnd
115
+ */
116
+
117
+ /**
118
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
119
+ * @codegen <<SignedSource::fde38a9999e3a081afa4a517da815ede>>
120
+ * @codegenId elevation
121
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
122
+ * @codegenParams ["opacity", "shadow", "surface"]
123
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
124
+ */
125
+ export const opacityMap = {
126
+ 'opacity.disabled': token('opacity.disabled', '0.4'),
127
+ 'opacity.loading': token('opacity.loading', '0.2'),
128
+ } as const;
129
+
130
+ export type Opacity = keyof typeof opacityMap;
131
+
132
+ export const shadowMap = {
133
+ 'elevation.shadow.overflow': token(
134
+ 'elevation.shadow.overflow',
135
+ '0px 0px 8px #091e423f, 0px 0px 1px #091e424f',
136
+ ),
137
+ 'elevation.shadow.overflow.perimeter': token('elevation.shadow.overflow.perimeter', '#091e421f'),
138
+ 'elevation.shadow.overflow.spread': token('elevation.shadow.overflow.spread', '#091e4229'),
139
+ 'elevation.shadow.overlay': token(
140
+ 'elevation.shadow.overlay',
141
+ '0px 8px 12px #091e423f, 0px 0px 1px #091e424f',
142
+ ),
143
+ 'elevation.shadow.raised': token(
144
+ 'elevation.shadow.raised',
145
+ '0px 1px 1px #091e423f, 0px 0px 1px #091e4221',
146
+ ),
147
+ } as const;
148
+
149
+ export type Shadow = keyof typeof shadowMap;
150
+
151
+ export const surfaceColorMap = {
152
+ 'elevation.surface': token('elevation.surface', '#FFFFFF'),
153
+ 'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
154
+ 'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
155
+ 'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
156
+ 'elevation.surface.overlay.hovered': token('elevation.surface.overlay.hovered', '#FAFBFC'),
157
+ 'elevation.surface.overlay.pressed': token('elevation.surface.overlay.pressed', '#F4F5F7'),
158
+ 'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
159
+ 'elevation.surface.raised.hovered': token('elevation.surface.raised.hovered', '#FAFBFC'),
160
+ 'elevation.surface.raised.pressed': token('elevation.surface.raised.pressed', '#F4F5F7'),
161
+ 'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
162
+ } as const;
163
+
164
+ export type SurfaceColor = keyof typeof surfaceColorMap;
165
+
166
+ /**
167
+ * @codegenEnd
168
+ */
169
+
170
+ /**
171
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
172
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
173
+ * @codegenId colors
174
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
175
+ * @codegenParams ["border", "background", "text", "fill"]
176
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
177
+ */
178
+ export const borderColorMap = {
179
+ 'color.border': token('color.border', '#091e4221'),
180
+ 'color.border.accent.lime': token('color.border.accent.lime', '#6A9A23'),
181
+ 'color.border.accent.red': token('color.border.accent.red', '#FF5630'),
182
+ 'color.border.accent.orange': token('color.border.accent.orange', '#D94008'),
183
+ 'color.border.accent.yellow': token('color.border.accent.yellow', '#FFAB00'),
184
+ 'color.border.accent.green': token('color.border.accent.green', '#36B37E'),
185
+ 'color.border.accent.teal': token('color.border.accent.teal', '#00B8D9'),
186
+ 'color.border.accent.blue': token('color.border.accent.blue', '#0065FF'),
187
+ 'color.border.accent.purple': token('color.border.accent.purple', '#6554C0'),
188
+ 'color.border.accent.magenta': token('color.border.accent.magenta', '#CD519D'),
189
+ 'color.border.accent.gray': token('color.border.accent.gray', '#5E6C84'),
190
+ 'color.border.disabled': token('color.border.disabled', '#FAFBFC'),
191
+ 'color.border.focused': token('color.border.focused', '#2684FF'),
192
+ 'color.border.input': token('color.border.input', '#FAFBFC'),
193
+ 'color.border.inverse': token('color.border.inverse', '#FFFFFF'),
194
+ 'color.border.selected': token('color.border.selected', '#0052CC'),
195
+ 'color.border.brand': token('color.border.brand', '#0052CC'),
196
+ 'color.border.danger': token('color.border.danger', '#FF5630'),
197
+ 'color.border.warning': token('color.border.warning', '#FFC400'),
198
+ 'color.border.success': token('color.border.success', '#00875A'),
199
+ 'color.border.discovery': token('color.border.discovery', '#998DD9'),
200
+ 'color.border.information': token('color.border.information', '#0065FF'),
201
+ 'color.border.bold': token('color.border.bold', '#344563'),
202
+ } as const;
203
+
204
+ export type BorderColor = keyof typeof borderColorMap;
205
+
206
+ export const backgroundColorMap = {
207
+ 'color.background.accent.lime.subtlest': token(
208
+ 'color.background.accent.lime.subtlest',
209
+ '#EEFBDA',
210
+ ),
211
+ 'color.background.accent.lime.subtlest.hovered': token(
212
+ 'color.background.accent.lime.subtlest.hovered',
213
+ '#D3F1A7',
214
+ ),
215
+ 'color.background.accent.lime.subtlest.pressed': token(
216
+ 'color.background.accent.lime.subtlest.pressed',
217
+ '#B3DF72',
218
+ ),
219
+ 'color.background.accent.lime.subtler': token('color.background.accent.lime.subtler', '#D3F1A7'),
220
+ 'color.background.accent.lime.subtler.hovered': token(
221
+ 'color.background.accent.lime.subtler.hovered',
222
+ '#B3DF72',
223
+ ),
224
+ 'color.background.accent.lime.subtler.pressed': token(
225
+ 'color.background.accent.lime.subtler.pressed',
226
+ '#94C748',
227
+ ),
228
+ 'color.background.accent.lime.subtle': token('color.background.accent.lime.subtle', '#94C748'),
229
+ 'color.background.accent.lime.subtle.hovered': token(
230
+ 'color.background.accent.lime.subtle.hovered',
231
+ '#B3DF72',
232
+ ),
233
+ 'color.background.accent.lime.subtle.pressed': token(
234
+ 'color.background.accent.lime.subtle.pressed',
235
+ '#D3F1A7',
236
+ ),
237
+ 'color.background.accent.lime.bolder': token('color.background.accent.lime.bolder', '#5B7F24'),
238
+ 'color.background.accent.lime.bolder.hovered': token(
239
+ 'color.background.accent.lime.bolder.hovered',
240
+ '#37471F',
241
+ ),
242
+ 'color.background.accent.lime.bolder.pressed': token(
243
+ 'color.background.accent.lime.bolder.pressed',
244
+ '#37471F',
245
+ ),
246
+ 'color.background.accent.red.subtlest': token('color.background.accent.red.subtlest', '#FF8F73'),
247
+ 'color.background.accent.red.subtlest.hovered': token(
248
+ 'color.background.accent.red.subtlest.hovered',
249
+ '#FF7452',
250
+ ),
251
+ 'color.background.accent.red.subtlest.pressed': token(
252
+ 'color.background.accent.red.subtlest.pressed',
253
+ '#FF5630',
254
+ ),
255
+ 'color.background.accent.red.subtler': token('color.background.accent.red.subtler', '#FF7452'),
256
+ 'color.background.accent.red.subtler.hovered': token(
257
+ 'color.background.accent.red.subtler.hovered',
258
+ '#FF5630',
259
+ ),
260
+ 'color.background.accent.red.subtler.pressed': token(
261
+ 'color.background.accent.red.subtler.pressed',
262
+ '#DE350B',
263
+ ),
264
+ 'color.background.accent.red.subtle': token('color.background.accent.red.subtle', '#DE350B'),
265
+ 'color.background.accent.red.subtle.hovered': token(
266
+ 'color.background.accent.red.subtle.hovered',
267
+ '#FF5630',
268
+ ),
269
+ 'color.background.accent.red.subtle.pressed': token(
270
+ 'color.background.accent.red.subtle.pressed',
271
+ '#FF7452',
272
+ ),
273
+ 'color.background.accent.red.bolder': token('color.background.accent.red.bolder', '#DE350B'),
274
+ 'color.background.accent.red.bolder.hovered': token(
275
+ 'color.background.accent.red.bolder.hovered',
276
+ '#FF5630',
277
+ ),
278
+ 'color.background.accent.red.bolder.pressed': token(
279
+ 'color.background.accent.red.bolder.pressed',
280
+ '#FF7452',
281
+ ),
282
+ 'color.background.accent.orange.subtlest': token(
283
+ 'color.background.accent.orange.subtlest',
284
+ '#F18D13',
285
+ ),
286
+ 'color.background.accent.orange.subtlest.hovered': token(
287
+ 'color.background.accent.orange.subtlest.hovered',
288
+ '#FEC57B',
289
+ ),
290
+ 'color.background.accent.orange.subtlest.pressed': token(
291
+ 'color.background.accent.orange.subtlest.pressed',
292
+ '#FFE2BD',
293
+ ),
294
+ 'color.background.accent.orange.subtler': token(
295
+ 'color.background.accent.orange.subtler',
296
+ '#B65C02',
297
+ ),
298
+ 'color.background.accent.orange.subtler.hovered': token(
299
+ 'color.background.accent.orange.subtler.hovered',
300
+ '#F18D13',
301
+ ),
302
+ 'color.background.accent.orange.subtler.pressed': token(
303
+ 'color.background.accent.orange.subtler.pressed',
304
+ '#FEC57B',
305
+ ),
306
+ 'color.background.accent.orange.subtle': token(
307
+ 'color.background.accent.orange.subtle',
308
+ '#5F3811',
309
+ ),
310
+ 'color.background.accent.orange.subtle.hovered': token(
311
+ 'color.background.accent.orange.subtle.hovered',
312
+ '#974F0C',
313
+ ),
314
+ 'color.background.accent.orange.subtle.pressed': token(
315
+ 'color.background.accent.orange.subtle.pressed',
316
+ '#B65C02',
317
+ ),
318
+ 'color.background.accent.orange.bolder': token(
319
+ 'color.background.accent.orange.bolder',
320
+ '#43290F',
321
+ ),
322
+ 'color.background.accent.orange.bolder.hovered': token(
323
+ 'color.background.accent.orange.bolder.hovered',
324
+ '#5F3811',
325
+ ),
326
+ 'color.background.accent.orange.bolder.pressed': token(
327
+ 'color.background.accent.orange.bolder.pressed',
328
+ '#974F0C',
329
+ ),
330
+ 'color.background.accent.yellow.subtlest': token(
331
+ 'color.background.accent.yellow.subtlest',
332
+ '#FFE380',
333
+ ),
334
+ 'color.background.accent.yellow.subtlest.hovered': token(
335
+ 'color.background.accent.yellow.subtlest.hovered',
336
+ '#FFC400',
337
+ ),
338
+ 'color.background.accent.yellow.subtlest.pressed': token(
339
+ 'color.background.accent.yellow.subtlest.pressed',
340
+ '#FFAB00',
341
+ ),
342
+ 'color.background.accent.yellow.subtler': token(
343
+ 'color.background.accent.yellow.subtler',
344
+ '#FFC400',
345
+ ),
346
+ 'color.background.accent.yellow.subtler.hovered': token(
347
+ 'color.background.accent.yellow.subtler.hovered',
348
+ '#FFAB00',
349
+ ),
350
+ 'color.background.accent.yellow.subtler.pressed': token(
351
+ 'color.background.accent.yellow.subtler.pressed',
352
+ '#FF991F',
353
+ ),
354
+ 'color.background.accent.yellow.subtle': token(
355
+ 'color.background.accent.yellow.subtle',
356
+ '#FF991F',
357
+ ),
358
+ 'color.background.accent.yellow.subtle.hovered': token(
359
+ 'color.background.accent.yellow.subtle.hovered',
360
+ '#FFAB00',
361
+ ),
362
+ 'color.background.accent.yellow.subtle.pressed': token(
363
+ 'color.background.accent.yellow.subtle.pressed',
364
+ '#FFC400',
365
+ ),
366
+ 'color.background.accent.yellow.bolder': token(
367
+ 'color.background.accent.yellow.bolder',
368
+ '#FF991F',
369
+ ),
370
+ 'color.background.accent.yellow.bolder.hovered': token(
371
+ 'color.background.accent.yellow.bolder.hovered',
372
+ '#FFAB00',
373
+ ),
374
+ 'color.background.accent.yellow.bolder.pressed': token(
375
+ 'color.background.accent.yellow.bolder.pressed',
376
+ '#FFC400',
377
+ ),
378
+ 'color.background.accent.green.subtlest': token(
379
+ 'color.background.accent.green.subtlest',
380
+ '#79F2C0',
381
+ ),
382
+ 'color.background.accent.green.subtlest.hovered': token(
383
+ 'color.background.accent.green.subtlest.hovered',
384
+ '#57D9A3',
385
+ ),
386
+ 'color.background.accent.green.subtlest.pressed': token(
387
+ 'color.background.accent.green.subtlest.pressed',
388
+ '#36B37E',
389
+ ),
390
+ 'color.background.accent.green.subtler': token(
391
+ 'color.background.accent.green.subtler',
392
+ '#57D9A3',
393
+ ),
394
+ 'color.background.accent.green.subtler.hovered': token(
395
+ 'color.background.accent.green.subtler.hovered',
396
+ '#36B37E',
397
+ ),
398
+ 'color.background.accent.green.subtler.pressed': token(
399
+ 'color.background.accent.green.subtler.pressed',
400
+ '#00875A',
401
+ ),
402
+ 'color.background.accent.green.subtle': token('color.background.accent.green.subtle', '#00875A'),
403
+ 'color.background.accent.green.subtle.hovered': token(
404
+ 'color.background.accent.green.subtle.hovered',
405
+ '#36B37E',
406
+ ),
407
+ 'color.background.accent.green.subtle.pressed': token(
408
+ 'color.background.accent.green.subtle.pressed',
409
+ '#57D9A3',
410
+ ),
411
+ 'color.background.accent.green.bolder': token('color.background.accent.green.bolder', '#00875A'),
412
+ 'color.background.accent.green.bolder.hovered': token(
413
+ 'color.background.accent.green.bolder.hovered',
414
+ '#36B37E',
415
+ ),
416
+ 'color.background.accent.green.bolder.pressed': token(
417
+ 'color.background.accent.green.bolder.pressed',
418
+ '#57D9A3',
419
+ ),
420
+ 'color.background.accent.teal.subtlest': token(
421
+ 'color.background.accent.teal.subtlest',
422
+ '#79E2F2',
423
+ ),
424
+ 'color.background.accent.teal.subtlest.hovered': token(
425
+ 'color.background.accent.teal.subtlest.hovered',
426
+ '#00C7E6',
427
+ ),
428
+ 'color.background.accent.teal.subtlest.pressed': token(
429
+ 'color.background.accent.teal.subtlest.pressed',
430
+ '#00B8D9',
431
+ ),
432
+ 'color.background.accent.teal.subtler': token('color.background.accent.teal.subtler', '#00C7E6'),
433
+ 'color.background.accent.teal.subtler.hovered': token(
434
+ 'color.background.accent.teal.subtler.hovered',
435
+ '#00B8D9',
436
+ ),
437
+ 'color.background.accent.teal.subtler.pressed': token(
438
+ 'color.background.accent.teal.subtler.pressed',
439
+ '#00A3BF',
440
+ ),
441
+ 'color.background.accent.teal.subtle': token('color.background.accent.teal.subtle', '#00A3BF'),
442
+ 'color.background.accent.teal.subtle.hovered': token(
443
+ 'color.background.accent.teal.subtle.hovered',
444
+ '#00B8D9',
445
+ ),
446
+ 'color.background.accent.teal.subtle.pressed': token(
447
+ 'color.background.accent.teal.subtle.pressed',
448
+ '#00C7E6',
449
+ ),
450
+ 'color.background.accent.teal.bolder': token('color.background.accent.teal.bolder', '#00A3BF'),
451
+ 'color.background.accent.teal.bolder.hovered': token(
452
+ 'color.background.accent.teal.bolder.hovered',
453
+ '#00B8D9',
454
+ ),
455
+ 'color.background.accent.teal.bolder.pressed': token(
456
+ 'color.background.accent.teal.bolder.pressed',
457
+ '#00C7E6',
458
+ ),
459
+ 'color.background.accent.blue.subtlest': token(
460
+ 'color.background.accent.blue.subtlest',
461
+ '#4C9AFF',
462
+ ),
463
+ 'color.background.accent.blue.subtlest.hovered': token(
464
+ 'color.background.accent.blue.subtlest.hovered',
465
+ '#2684FF',
466
+ ),
467
+ 'color.background.accent.blue.subtlest.pressed': token(
468
+ 'color.background.accent.blue.subtlest.pressed',
469
+ '#0065FF',
470
+ ),
471
+ 'color.background.accent.blue.subtler': token('color.background.accent.blue.subtler', '#2684FF'),
472
+ 'color.background.accent.blue.subtler.hovered': token(
473
+ 'color.background.accent.blue.subtler.hovered',
474
+ '#0065FF',
475
+ ),
476
+ 'color.background.accent.blue.subtler.pressed': token(
477
+ 'color.background.accent.blue.subtler.pressed',
478
+ '#0052CC',
479
+ ),
480
+ 'color.background.accent.blue.subtle': token('color.background.accent.blue.subtle', '#0052CC'),
481
+ 'color.background.accent.blue.subtle.hovered': token(
482
+ 'color.background.accent.blue.subtle.hovered',
483
+ '#0065FF',
484
+ ),
485
+ 'color.background.accent.blue.subtle.pressed': token(
486
+ 'color.background.accent.blue.subtle.pressed',
487
+ '#2684FF',
488
+ ),
489
+ 'color.background.accent.blue.bolder': token('color.background.accent.blue.bolder', '#0052CC'),
490
+ 'color.background.accent.blue.bolder.hovered': token(
491
+ 'color.background.accent.blue.bolder.hovered',
492
+ '#0065FF',
493
+ ),
494
+ 'color.background.accent.blue.bolder.pressed': token(
495
+ 'color.background.accent.blue.bolder.pressed',
496
+ '#2684FF',
497
+ ),
498
+ 'color.background.accent.purple.subtlest': token(
499
+ 'color.background.accent.purple.subtlest',
500
+ '#998DD9',
501
+ ),
502
+ 'color.background.accent.purple.subtlest.hovered': token(
503
+ 'color.background.accent.purple.subtlest.hovered',
504
+ '#8777D9',
505
+ ),
506
+ 'color.background.accent.purple.subtlest.pressed': token(
507
+ 'color.background.accent.purple.subtlest.pressed',
508
+ '#6554C0',
509
+ ),
510
+ 'color.background.accent.purple.subtler': token(
511
+ 'color.background.accent.purple.subtler',
512
+ '#8777D9',
513
+ ),
514
+ 'color.background.accent.purple.subtler.hovered': token(
515
+ 'color.background.accent.purple.subtler.hovered',
516
+ '#6554C0',
517
+ ),
518
+ 'color.background.accent.purple.subtler.pressed': token(
519
+ 'color.background.accent.purple.subtler.pressed',
520
+ '#5243AA',
521
+ ),
522
+ 'color.background.accent.purple.subtle': token(
523
+ 'color.background.accent.purple.subtle',
524
+ '#5243AA',
525
+ ),
526
+ 'color.background.accent.purple.subtle.hovered': token(
527
+ 'color.background.accent.purple.subtle.hovered',
528
+ '#6554C0',
529
+ ),
530
+ 'color.background.accent.purple.subtle.pressed': token(
531
+ 'color.background.accent.purple.subtle.pressed',
532
+ '#8777D9',
533
+ ),
534
+ 'color.background.accent.purple.bolder': token(
535
+ 'color.background.accent.purple.bolder',
536
+ '#5243AA',
537
+ ),
538
+ 'color.background.accent.purple.bolder.hovered': token(
539
+ 'color.background.accent.purple.bolder.hovered',
540
+ '#6554C0',
541
+ ),
542
+ 'color.background.accent.purple.bolder.pressed': token(
543
+ 'color.background.accent.purple.bolder.pressed',
544
+ '#8777D9',
545
+ ),
546
+ 'color.background.accent.magenta.subtlest': token(
547
+ 'color.background.accent.magenta.subtlest',
548
+ '#FFECF8',
549
+ ),
550
+ 'color.background.accent.magenta.subtlest.hovered': token(
551
+ 'color.background.accent.magenta.subtlest.hovered',
552
+ '#FDD0EC',
553
+ ),
554
+ 'color.background.accent.magenta.subtlest.pressed': token(
555
+ 'color.background.accent.magenta.subtlest.pressed',
556
+ '#F797D2',
557
+ ),
558
+ 'color.background.accent.magenta.subtler': token(
559
+ 'color.background.accent.magenta.subtler',
560
+ '#FDD0EC',
561
+ ),
562
+ 'color.background.accent.magenta.subtler.hovered': token(
563
+ 'color.background.accent.magenta.subtler.hovered',
564
+ '#F797D2',
565
+ ),
566
+ 'color.background.accent.magenta.subtler.pressed': token(
567
+ 'color.background.accent.magenta.subtler.pressed',
568
+ '#E774BB',
569
+ ),
570
+ 'color.background.accent.magenta.subtle': token(
571
+ 'color.background.accent.magenta.subtle',
572
+ '#E774BB',
573
+ ),
574
+ 'color.background.accent.magenta.subtle.hovered': token(
575
+ 'color.background.accent.magenta.subtle.hovered',
576
+ '#F797D2',
577
+ ),
578
+ 'color.background.accent.magenta.subtle.pressed': token(
579
+ 'color.background.accent.magenta.subtle.pressed',
580
+ '#FDD0EC',
581
+ ),
582
+ 'color.background.accent.magenta.bolder': token(
583
+ 'color.background.accent.magenta.bolder',
584
+ '#AE4787',
585
+ ),
586
+ 'color.background.accent.magenta.bolder.hovered': token(
587
+ 'color.background.accent.magenta.bolder.hovered',
588
+ '#943D73',
589
+ ),
590
+ 'color.background.accent.magenta.bolder.pressed': token(
591
+ 'color.background.accent.magenta.bolder.pressed',
592
+ '#50253F',
593
+ ),
594
+ 'color.background.accent.gray.subtlest': token(
595
+ 'color.background.accent.gray.subtlest',
596
+ '#6B778C',
597
+ ),
598
+ 'color.background.accent.gray.subtlest.hovered': token(
599
+ 'color.background.accent.gray.subtlest.hovered',
600
+ '#5E6C84',
601
+ ),
602
+ 'color.background.accent.gray.subtlest.pressed': token(
603
+ 'color.background.accent.gray.subtlest.pressed',
604
+ '#505F79',
605
+ ),
606
+ 'color.background.accent.gray.subtler': token('color.background.accent.gray.subtler', '#5E6C84'),
607
+ 'color.background.accent.gray.subtler.hovered': token(
608
+ 'color.background.accent.gray.subtler.hovered',
609
+ '#505F79',
610
+ ),
611
+ 'color.background.accent.gray.subtler.pressed': token(
612
+ 'color.background.accent.gray.subtler.pressed',
613
+ '#42526E',
614
+ ),
615
+ 'color.background.accent.gray.subtle': token('color.background.accent.gray.subtle', '#505F79'),
616
+ 'color.background.accent.gray.subtle.hovered': token(
617
+ 'color.background.accent.gray.subtle.hovered',
618
+ '#5E6C84',
619
+ ),
620
+ 'color.background.accent.gray.subtle.pressed': token(
621
+ 'color.background.accent.gray.subtle.pressed',
622
+ '#6B778C',
623
+ ),
624
+ 'color.background.accent.gray.bolder': token('color.background.accent.gray.bolder', '#42526E'),
625
+ 'color.background.accent.gray.bolder.hovered': token(
626
+ 'color.background.accent.gray.bolder.hovered',
627
+ '#344563',
628
+ ),
629
+ 'color.background.accent.gray.bolder.pressed': token(
630
+ 'color.background.accent.gray.bolder.pressed',
631
+ '#253858',
632
+ ),
633
+ 'color.background.disabled': token('color.background.disabled', '#091e4289'),
634
+ 'color.background.input': token('color.background.input', '#FAFBFC'),
635
+ 'color.background.input.hovered': token('color.background.input.hovered', '#EBECF0'),
636
+ 'color.background.input.pressed': token('color.background.input.pressed', '#FFFFFF'),
637
+ 'color.background.inverse.subtle': token('color.background.inverse.subtle', '#00000029'),
638
+ 'color.background.inverse.subtle.hovered': token(
639
+ 'color.background.inverse.subtle.hovered',
640
+ '#0000003D',
641
+ ),
642
+ 'color.background.inverse.subtle.pressed': token(
643
+ 'color.background.inverse.subtle.pressed',
644
+ '#00000052',
645
+ ),
646
+ 'color.background.neutral': token('color.background.neutral', '#DFE1E6'),
647
+ 'color.background.neutral.hovered': token('color.background.neutral.hovered', '#091e4214'),
648
+ 'color.background.neutral.pressed': token('color.background.neutral.pressed', '#B3D4FF'),
649
+ 'color.background.neutral.subtle': token('color.background.neutral.subtle', 'transparent'),
650
+ 'color.background.neutral.subtle.hovered': token(
651
+ 'color.background.neutral.subtle.hovered',
652
+ '#091e4214',
653
+ ),
654
+ 'color.background.neutral.subtle.pressed': token(
655
+ 'color.background.neutral.subtle.pressed',
656
+ '#B3D4FF',
657
+ ),
658
+ 'color.background.neutral.bold': token('color.background.neutral.bold', '#42526E'),
659
+ 'color.background.neutral.bold.hovered': token(
660
+ 'color.background.neutral.bold.hovered',
661
+ '#505F79',
662
+ ),
663
+ 'color.background.neutral.bold.pressed': token(
664
+ 'color.background.neutral.bold.pressed',
665
+ '#344563',
666
+ ),
667
+ 'color.background.selected': token('color.background.selected', '#DEEBFF'),
668
+ 'color.background.selected.hovered': token('color.background.selected.hovered', '#B3D4FF'),
669
+ 'color.background.selected.pressed': token('color.background.selected.pressed', '#4C9AFF'),
670
+ 'color.background.selected.bold': token('color.background.selected.bold', '#0052CC'),
671
+ 'color.background.selected.bold.hovered': token(
672
+ 'color.background.selected.bold.hovered',
673
+ '#2684FF',
674
+ ),
675
+ 'color.background.selected.bold.pressed': token(
676
+ 'color.background.selected.bold.pressed',
677
+ '#0052CC',
678
+ ),
679
+ 'color.background.brand.subtlest': token('color.background.brand.subtlest', '#B3D4FF'),
680
+ 'color.background.brand.subtlest.hovered': token(
681
+ 'color.background.brand.subtlest.hovered',
682
+ '#DEEBFF',
683
+ ),
684
+ 'color.background.brand.subtlest.pressed': token(
685
+ 'color.background.brand.subtlest.pressed',
686
+ '#4C9AFF',
687
+ ),
688
+ 'color.background.brand.bold': token('color.background.brand.bold', '#0052CC'),
689
+ 'color.background.brand.bold.hovered': token('color.background.brand.bold.hovered', '#0065FF'),
690
+ 'color.background.brand.bold.pressed': token('color.background.brand.bold.pressed', '#0747A6'),
691
+ 'color.background.brand.boldest': token('color.background.brand.boldest', '#0747A6'),
692
+ 'color.background.brand.boldest.hovered': token(
693
+ 'color.background.brand.boldest.hovered',
694
+ '#0052CC',
695
+ ),
696
+ 'color.background.brand.boldest.pressed': token(
697
+ 'color.background.brand.boldest.pressed',
698
+ '#0747A6',
699
+ ),
700
+ 'color.background.danger': token('color.background.danger', '#FFEBE6'),
701
+ 'color.background.danger.hovered': token('color.background.danger.hovered', '#FFBDAD'),
702
+ 'color.background.danger.pressed': token('color.background.danger.pressed', '#FF8F73'),
703
+ 'color.background.danger.bold': token('color.background.danger.bold', '#DE350B'),
704
+ 'color.background.danger.bold.hovered': token('color.background.danger.bold.hovered', '#FF5630'),
705
+ 'color.background.danger.bold.pressed': token('color.background.danger.bold.pressed', '#BF2600'),
706
+ 'color.background.warning': token('color.background.warning', '#FFFAE6'),
707
+ 'color.background.warning.hovered': token('color.background.warning.hovered', '#FFF0B3'),
708
+ 'color.background.warning.pressed': token('color.background.warning.pressed', '#FFE380'),
709
+ 'color.background.warning.bold': token('color.background.warning.bold', '#FFAB00'),
710
+ 'color.background.warning.bold.hovered': token(
711
+ 'color.background.warning.bold.hovered',
712
+ '#FFC400',
713
+ ),
714
+ 'color.background.warning.bold.pressed': token(
715
+ 'color.background.warning.bold.pressed',
716
+ '#FF991F',
717
+ ),
718
+ 'color.background.success': token('color.background.success', '#E3FCEF'),
719
+ 'color.background.success.hovered': token('color.background.success.hovered', '#ABF5D1'),
720
+ 'color.background.success.pressed': token('color.background.success.pressed', '#79F2C0'),
721
+ 'color.background.success.bold': token('color.background.success.bold', '#00875A'),
722
+ 'color.background.success.bold.hovered': token(
723
+ 'color.background.success.bold.hovered',
724
+ '#57D9A3',
725
+ ),
726
+ 'color.background.success.bold.pressed': token(
727
+ 'color.background.success.bold.pressed',
728
+ '#00875A',
729
+ ),
730
+ 'color.background.discovery': token('color.background.discovery', '#EAE6FF'),
731
+ 'color.background.discovery.hovered': token('color.background.discovery.hovered', '#C0B6F2'),
732
+ 'color.background.discovery.pressed': token('color.background.discovery.pressed', '#998DD9'),
733
+ 'color.background.discovery.bold': token('color.background.discovery.bold', '#5243AA'),
734
+ 'color.background.discovery.bold.hovered': token(
735
+ 'color.background.discovery.bold.hovered',
736
+ '#8777D9',
737
+ ),
738
+ 'color.background.discovery.bold.pressed': token(
739
+ 'color.background.discovery.bold.pressed',
740
+ '#5243AA',
741
+ ),
742
+ 'color.background.information': token('color.background.information', '#DEEBFF'),
743
+ 'color.background.information.hovered': token('color.background.information.hovered', '#B3D4FF'),
744
+ 'color.background.information.pressed': token('color.background.information.pressed', '#4C9AFF'),
745
+ 'color.background.information.bold': token('color.background.information.bold', '#0052CC'),
746
+ 'color.background.information.bold.hovered': token(
747
+ 'color.background.information.bold.hovered',
748
+ '#2684FF',
749
+ ),
750
+ 'color.background.information.bold.pressed': token(
751
+ 'color.background.information.bold.pressed',
752
+ '#0052CC',
753
+ ),
754
+ 'color.blanket': token('color.blanket', '#091e4289'),
755
+ 'color.blanket.selected': token('color.blanket.selected', '#388BFF14'),
756
+ 'color.blanket.danger': token('color.blanket.danger', '#EF5C4814'),
757
+ 'color.skeleton': token('color.skeleton', '#F4F5F7'),
758
+ 'color.skeleton.subtle': token('color.skeleton.subtle', '#091e420a'),
759
+ 'elevation.surface': token('elevation.surface', '#FFFFFF'),
760
+ 'elevation.surface.hovered': token('elevation.surface.hovered', '#FAFBFC'),
761
+ 'elevation.surface.pressed': token('elevation.surface.pressed', '#F4F5F7'),
762
+ 'elevation.surface.overlay': token('elevation.surface.overlay', '#FFFFFF'),
763
+ 'elevation.surface.overlay.hovered': token('elevation.surface.overlay.hovered', '#FAFBFC'),
764
+ 'elevation.surface.overlay.pressed': token('elevation.surface.overlay.pressed', '#F4F5F7'),
765
+ 'elevation.surface.raised': token('elevation.surface.raised', '#FFFFFF'),
766
+ 'elevation.surface.raised.hovered': token('elevation.surface.raised.hovered', '#FAFBFC'),
767
+ 'elevation.surface.raised.pressed': token('elevation.surface.raised.pressed', '#F4F5F7'),
768
+ 'elevation.surface.sunken': token('elevation.surface.sunken', '#F4F5F7'),
769
+ 'utility.elevation.surface.current': token('utility.elevation.surface.current', '#FFFFFF'),
770
+ } as const;
771
+
772
+ export type BackgroundColor = keyof typeof backgroundColorMap;
773
+
774
+ export const textColorMap = {
775
+ 'color.text': token('color.text', '#172B4D'),
776
+ 'color.text.accent.lime': token('color.text.accent.lime', '#4C6B1F'),
777
+ 'color.text.accent.lime.bolder': token('color.text.accent.lime.bolder', '#37471F'),
778
+ 'color.text.accent.red': token('color.text.accent.red', '#DE350B'),
779
+ 'color.text.accent.red.bolder': token('color.text.accent.red.bolder', '#BF2600'),
780
+ 'color.text.accent.orange': token('color.text.accent.orange', '#F18D13'),
781
+ 'color.text.accent.orange.bolder': token('color.text.accent.orange.bolder', '#B65C02'),
782
+ 'color.text.accent.yellow': token('color.text.accent.yellow', '#FF991F'),
783
+ 'color.text.accent.yellow.bolder': token('color.text.accent.yellow.bolder', '#FF8B00'),
784
+ 'color.text.accent.green': token('color.text.accent.green', '#00875A'),
785
+ 'color.text.accent.green.bolder': token('color.text.accent.green.bolder', '#006644'),
786
+ 'color.text.accent.teal': token('color.text.accent.teal', '#00A3BF'),
787
+ 'color.text.accent.teal.bolder': token('color.text.accent.teal.bolder', '#008DA6'),
788
+ 'color.text.accent.blue': token('color.text.accent.blue', '#0052CC'),
789
+ 'color.text.accent.blue.bolder': token('color.text.accent.blue.bolder', '#0747A6'),
790
+ 'color.text.accent.purple': token('color.text.accent.purple', '#5243AA'),
791
+ 'color.text.accent.purple.bolder': token('color.text.accent.purple.bolder', '#403294'),
792
+ 'color.text.accent.magenta': token('color.text.accent.magenta', '#E774BB'),
793
+ 'color.text.accent.magenta.bolder': token('color.text.accent.magenta.bolder', '#DA62AC'),
794
+ 'color.text.accent.gray': token('color.text.accent.gray', '#505F79'),
795
+ 'color.text.accent.gray.bolder': token('color.text.accent.gray.bolder', '#172B4D'),
796
+ 'color.text.disabled': token('color.text.disabled', '#A5ADBA'),
797
+ 'color.text.inverse': token('color.text.inverse', '#FFFFFF'),
798
+ 'color.text.selected': token('color.text.selected', '#0052CC'),
799
+ 'color.text.brand': token('color.text.brand', '#0065FF'),
800
+ 'color.text.danger': token('color.text.danger', '#DE350B'),
801
+ 'color.text.warning': token('color.text.warning', '#974F0C'),
802
+ 'color.text.warning.inverse': token('color.text.warning.inverse', '#172B4D'),
803
+ 'color.text.success': token('color.text.success', '#006644'),
804
+ 'color.text.discovery': token('color.text.discovery', '#403294'),
805
+ 'color.text.information': token('color.text.information', '#0052CC'),
806
+ 'color.text.subtlest': token('color.text.subtlest', '#7A869A'),
807
+ 'color.text.subtle': token('color.text.subtle', '#42526E'),
808
+ 'color.link': token('color.link', '#0052CC'),
809
+ 'color.link.pressed': token('color.link.pressed', '#0747A6'),
810
+ 'color.link.visited': token('color.link.visited', '#403294'),
811
+ 'color.link.visited.pressed': token('color.link.visited.pressed', '#403294'),
812
+ } as const;
813
+
814
+ export type TextColor = keyof typeof textColorMap;
815
+
816
+ export const fillMap = {
817
+ 'color.icon': token('color.icon', '#505F79'),
818
+ 'color.icon.accent.lime': token('color.icon.accent.lime', '#6A9A23'),
819
+ 'color.icon.accent.red': token('color.icon.accent.red', '#FF5630'),
820
+ 'color.icon.accent.orange': token('color.icon.accent.orange', '#D94008'),
821
+ 'color.icon.accent.yellow': token('color.icon.accent.yellow', '#FFAB00'),
822
+ 'color.icon.accent.green': token('color.icon.accent.green', '#36B37E'),
823
+ 'color.icon.accent.teal': token('color.icon.accent.teal', '#00B8D9'),
824
+ 'color.icon.accent.blue': token('color.icon.accent.blue', '#0065FF'),
825
+ 'color.icon.accent.purple': token('color.icon.accent.purple', '#6554C0'),
826
+ 'color.icon.accent.magenta': token('color.icon.accent.magenta', '#CD519D'),
827
+ 'color.icon.accent.gray': token('color.icon.accent.gray', '#5E6C84'),
828
+ 'color.icon.disabled': token('color.icon.disabled', '#8993A4'),
829
+ 'color.icon.inverse': token('color.icon.inverse', '#FFFFFF'),
830
+ 'color.icon.selected': token('color.icon.selected', '#0052CC'),
831
+ 'color.icon.brand': token('color.icon.brand', '#0065FF'),
832
+ 'color.icon.danger': token('color.icon.danger', '#DE350B'),
833
+ 'color.icon.warning': token('color.icon.warning', '#FFC400'),
834
+ 'color.icon.warning.inverse': token('color.icon.warning.inverse', '#253858'),
835
+ 'color.icon.success': token('color.icon.success', '#00875A'),
836
+ 'color.icon.discovery': token('color.icon.discovery', '#8777D9'),
837
+ 'color.icon.information': token('color.icon.information', '#0747A6'),
838
+ 'color.icon.subtle': token('color.icon.subtle', '#6B778C'),
839
+ } as const;
840
+
841
+ export type Fill = keyof typeof fillMap;
842
+
843
+ /**
844
+ * @codegenEnd
845
+ */
846
+
847
+ /**
848
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
849
+ * @codegen <<SignedSource::dbfb4c7de16d0ae4a53d66f9663aca91>>
850
+ * @codegenId misc
851
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
852
+ * @codegenParams ["layer"]
853
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
854
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
855
+ */
856
+ export const layerMap = {
857
+ card: 100,
858
+ navigation: 200,
859
+ dialog: 300,
860
+ layer: 400,
861
+ blanket: 500,
862
+ modal: 510,
863
+ flag: 600,
864
+ spotlight: 700,
865
+ tooltip: 800,
866
+ } as const;
867
+
868
+ export type Layer = keyof typeof layerMap;
869
+
870
+ /**
871
+ * @codegenEnd
872
+ */
873
+
874
+ /**
875
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
876
+ * @codegen <<SignedSource::957baf1fa3fc3fe5eb06b497a7ba6599>>
877
+ * @codegenId border
878
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
879
+ * @codegenParams ["width", "radius"]
880
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-shape.tsx <<SignedSource::80457377fd80c31f5dfcb5cc743d7016>>
881
+ */
882
+ export const borderWidthMap = {
883
+ 'border.width': token('border.width', '1px'),
884
+ 'border.width.0': token('border.width.0', '0px'),
885
+ 'border.width.indicator': token('border.width.indicator', '3px'),
886
+ 'border.width.outline': token('border.width.outline', '2px'),
887
+ } as const;
888
+
889
+ export type BorderWidth = keyof typeof borderWidthMap;
890
+
891
+ export const borderRadiusMap = {
892
+ 'border.radius.050': token('border.radius.050', '2px'),
893
+ 'border.radius': token('border.radius', '3px'),
894
+ 'border.radius.100': token('border.radius.100', '3px'),
895
+ 'border.radius.200': token('border.radius.200', '8px'),
896
+ 'border.radius.300': token('border.radius.300', '12px'),
897
+ 'border.radius.400': token('border.radius.400', '16px'),
898
+ 'border.radius.circle': token('border.radius.circle', '32032px'),
899
+ } as const;
900
+
901
+ export type BorderRadius = keyof typeof borderRadiusMap;
902
+
903
+ /**
904
+ * @codegenEnd
905
+ */
906
+
907
+ /**
908
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
909
+ * @codegen <<SignedSource::97e5ae47f252660a5ef7569a3880c26c>>
910
+ * @codegenId typography
911
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
912
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight", "body", "ui"]
913
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
914
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
915
+ */
916
+ export const fontMap = {
917
+ 'font.body': token(
918
+ 'font.body',
919
+ 'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
920
+ ),
921
+ 'font.body.UNSAFE_small': token(
922
+ 'font.body.UNSAFE_small',
923
+ 'normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
924
+ ),
925
+ 'font.body.large': token(
926
+ 'font.body.large',
927
+ 'normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
928
+ ),
929
+ 'font.body.small': token(
930
+ 'font.body.small',
931
+ 'normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
932
+ ),
933
+ 'font.code': token(
934
+ 'font.code',
935
+ 'normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
936
+ ),
937
+ 'font.heading.large': token(
938
+ 'font.heading.large',
939
+ 'normal 500 24px/28px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
940
+ ),
941
+ 'font.heading.medium': token(
942
+ 'font.heading.medium',
943
+ 'normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
944
+ ),
945
+ 'font.heading.small': token(
946
+ 'font.heading.small',
947
+ 'normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
948
+ ),
949
+ 'font.heading.xlarge': token(
950
+ 'font.heading.xlarge',
951
+ 'normal 600 29px/32px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
952
+ ),
953
+ 'font.heading.xsmall': token(
954
+ 'font.heading.xsmall',
955
+ 'normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
956
+ ),
957
+ 'font.heading.xxlarge': token(
958
+ 'font.heading.xxlarge',
959
+ 'normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
960
+ ),
961
+ 'font.heading.xxsmall': token(
962
+ 'font.heading.xxsmall',
963
+ 'normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
964
+ ),
965
+ };
966
+
967
+ export type Font = keyof typeof fontMap;
968
+
969
+ export const fontWeightMap = {
970
+ 'font.weight.bold': token('font.weight.bold', '700'),
971
+ 'font.weight.medium': token('font.weight.medium', '500'),
972
+ 'font.weight.regular': token('font.weight.regular', '400'),
973
+ 'font.weight.semibold': token('font.weight.semibold', '600'),
974
+ };
975
+
976
+ export type FontWeight = keyof typeof fontWeightMap;
977
+
978
+ export const fontFamilyMap = {
979
+ 'font.family.body': token(
980
+ 'font.family.body',
981
+ 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
982
+ ),
983
+ 'font.family.brand.body': token(
984
+ 'font.family.brand.body',
985
+ '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
986
+ ),
987
+ 'font.family.brand.heading': token(
988
+ 'font.family.brand.heading',
989
+ '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
990
+ ),
991
+ 'font.family.code': token(
992
+ 'font.family.code',
993
+ 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
994
+ ),
995
+ 'font.family.heading': token(
996
+ 'font.family.heading',
997
+ 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
998
+ ),
999
+ };
1000
+
1001
+ export type FontFamily = keyof typeof fontFamilyMap;
1002
+
1003
+ /**
1004
+ * @codegenEnd
1005
+ */
1006
+
1007
+ /**
1008
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
1009
+ * @codegen <<SignedSource::7dc7abf82a13bc780c338b9602508ae6>>
1010
+ * @codegenId text
1011
+ * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
1012
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/dimensions.tsx <<SignedSource::cc9b3f12104c6ede803da6a42daac0b0>>
1013
+ * @codegenDependency ../../../primitives/scripts/codegen-file-templates/layer.tsx <<SignedSource::6f10945ad9139d0119003738c65ae40a>>
1014
+ */
1015
+ export const textSizeMap = {
1016
+ medium: token(
1017
+ 'font.body',
1018
+ 'normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
1019
+ ),
1020
+ UNSAFE_small: token(
1021
+ 'font.body.UNSAFE_small',
1022
+ 'normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
1023
+ ),
1024
+ large: token(
1025
+ 'font.body.large',
1026
+ 'normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
1027
+ ),
1028
+ small: token(
1029
+ 'font.body.small',
1030
+ 'normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
1031
+ ),
1032
+ };
1033
+
1034
+ export type TextSize = keyof typeof textSizeMap;
1035
+
1036
+ export const textWeightMap = {
1037
+ bold: token('font.weight.bold', '700'),
1038
+ medium: token('font.weight.medium', '500'),
1039
+ regular: token('font.weight.regular', '400'),
1040
+ semibold: token('font.weight.semibold', '600'),
1041
+ };
1042
+
1043
+ export type TextWeight = keyof typeof textWeightMap;
1044
+
1045
+ /**
1046
+ * @codegenEnd
1047
+ */
1048
+
1049
+ // Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
1050
+ type MarginSpace = AllSpace | 'auto' | '0';
1051
+ type PaddingSpace = Space | '0';
1052
+ type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
1053
+ type AutoComplete<T extends string> = T | Omit<string, T>;
1054
+
1055
+ export type TokenisedProps = {
1056
+ backgroundColor?: BackgroundColor;
1057
+ blockSize?: Dimension | string;
1058
+ borderBlockColor?: AutoComplete<BorderColor>;
1059
+ borderBlockEndColor?: AutoComplete<BorderColor>;
1060
+ borderBlockEndWidth?: BorderWidth | string;
1061
+ borderBlockStartColor?: AutoComplete<BorderColor>;
1062
+ borderBlockStartWidth?: BorderWidth | string;
1063
+ borderBlockWidth?: BorderWidth | string;
1064
+ borderBottomColor?: AutoComplete<BorderColor>;
1065
+ borderBottomLeftRadius?: BorderRadius | string;
1066
+ borderBottomRightRadius?: BorderRadius | string;
1067
+ borderBottomWidth?: BorderWidth | string;
1068
+ borderColor?: BorderColor;
1069
+ borderEndEndRadius?: BorderRadius | string;
1070
+ borderEndStartRadius?: BorderRadius | string;
1071
+ borderInlineColor?: AutoComplete<BorderColor>;
1072
+ borderInlineEndColor?: AutoComplete<BorderColor>;
1073
+ borderInlineEndWidth?: BorderWidth | string;
1074
+ borderInlineStartColor?: AutoComplete<BorderColor>;
1075
+ borderInlineStartWidth?: BorderWidth | string;
1076
+ borderInlineWidth?: BorderWidth | string;
1077
+ borderLeftColor?: AutoComplete<BorderColor>;
1078
+ borderLeftWidth?: BorderWidth | string;
1079
+ borderRadius?: BorderRadius | string;
1080
+ borderRightColor?: AutoComplete<BorderColor>;
1081
+ borderRightWidth?: BorderWidth | string;
1082
+ borderStartEndRadius?: BorderRadius | string;
1083
+ borderStartStartRadius?: BorderRadius | string;
1084
+ borderTopColor?: AutoComplete<BorderColor>;
1085
+ borderTopLeftRadius?: BorderRadius | string;
1086
+ borderTopRightRadius?: BorderRadius | string;
1087
+ borderTopWidth?: BorderWidth | string;
1088
+ borderWidth?: BorderWidth | string;
1089
+ bottom?: AutoComplete<AllSpace>;
1090
+ boxShadow?: Shadow;
1091
+ color?: TextColor;
1092
+ columnGap?: Space;
1093
+ font?: Font | string;
1094
+ fontFamily?: FontFamily | string;
1095
+ fontWeight?: FontWeight | string | number;
1096
+ gap?: Space;
1097
+ height?: Dimension | string;
1098
+ inlineSize?: Dimension | string;
1099
+ inset?: AutoComplete<AllSpace>;
1100
+ insetBlock?: AutoComplete<AllSpace>;
1101
+ insetBlockEnd?: AutoComplete<AllSpace>;
1102
+ insetBlockStart?: AutoComplete<AllSpace>;
1103
+ insetInline?: AutoComplete<AllSpace>;
1104
+ insetInlineEnd?: AutoComplete<AllSpace>;
1105
+ insetInlineStart?: AutoComplete<AllSpace>;
1106
+ left?: AutoComplete<AllSpace>;
1107
+ margin?: MarginSpace | '0 auto' | GlobalValue;
1108
+ marginBlock?: MarginSpace | GlobalValue;
1109
+ marginInline?: MarginSpace | GlobalValue;
1110
+ marginBlockEnd?: MarginSpace | GlobalValue;
1111
+ marginBlockStart?: MarginSpace | GlobalValue;
1112
+ marginBottom?: MarginSpace | GlobalValue;
1113
+ marginInlineEnd?: MarginSpace | GlobalValue;
1114
+ marginInlineStart?: MarginSpace | GlobalValue;
1115
+ marginLeft?: MarginSpace | GlobalValue;
1116
+ marginRight?: MarginSpace | GlobalValue;
1117
+ marginTop?: MarginSpace | GlobalValue;
1118
+ maxBlockSize?: Dimension | string;
1119
+ maxHeight?: Dimension | string;
1120
+ maxInlineSize?: Dimension | string;
1121
+ maxWidth?: Dimension | string;
1122
+ minBlockSize?: Dimension | string;
1123
+ minHeight?: Dimension | string;
1124
+ minInlineSize?: Dimension | string;
1125
+ minWidth?: Dimension | string;
1126
+ opacity?: AutoComplete<Opacity> | number;
1127
+ outlineColor?: BorderColor;
1128
+ outlineOffset?: AllSpace;
1129
+ outlineWidth?: BorderWidth | string;
1130
+ padding?: PaddingSpace | GlobalValue;
1131
+ paddingBlock?: PaddingSpace | GlobalValue;
1132
+ paddingBlockEnd?: PaddingSpace | GlobalValue;
1133
+ paddingBlockStart?: PaddingSpace | GlobalValue;
1134
+ paddingBottom?: PaddingSpace | GlobalValue;
1135
+ paddingInline?: PaddingSpace | GlobalValue;
1136
+ paddingInlineEnd?: PaddingSpace | GlobalValue;
1137
+ paddingInlineStart?: PaddingSpace | GlobalValue;
1138
+ paddingLeft?: PaddingSpace | GlobalValue;
1139
+ paddingRight?: PaddingSpace | GlobalValue;
1140
+ paddingTop?: PaddingSpace | GlobalValue;
1141
+ right?: AutoComplete<AllSpace>;
1142
+ rowGap?: Space;
1143
+ top?: AutoComplete<AllSpace>;
1144
+ width?: Dimension | string;
1145
+ zIndex?: Layer;
1146
+ };
1147
+
1148
+ // Generate maps for Box props. backgroundColor, padding, etc
1149
+ const spacingProperties = [
1150
+ // Used by Box
1151
+ 'padding',
1152
+ 'paddingBlock',
1153
+ 'paddingBlockStart',
1154
+ 'paddingBlockEnd',
1155
+ 'paddingInline',
1156
+ 'paddingInlineStart',
1157
+ 'paddingInlineEnd',
1158
+ // Used by Inline and Stack
1159
+ 'gap',
1160
+ 'rowGap',
1161
+ 'columnGap',
1162
+ ] as const;
1163
+ type SpacingProperty = (typeof spacingProperties)[number];
1164
+
1165
+ type TokenMappableProperty =
1166
+ | SpacingProperty
1167
+ | 'backgroundColor'
1168
+ | 'fontWeight'
1169
+ | 'fontSize'
1170
+ | 'fontFamily'
1171
+ | 'lineHeight'
1172
+ | 'color'
1173
+ | 'font'
1174
+ | typeof CURRENT_SURFACE_CSS_VAR;
1175
+ type PropsToken =
1176
+ | SpacingToken
1177
+ | BackgroundColorToken
1178
+ | FontWeightToken
1179
+ | FontFamilyToken
1180
+ | TextColorToken
1181
+ | FontToken
1182
+ | TextWeightToken
1183
+ | TextSizeToken;
1184
+
1185
+ type TokenMap = Partial<Record<PropsToken, ReturnType<typeof token>>>;
1186
+ type SerializedStylesMap = Record<PropsToken, SerializedStyles>;
1187
+
1188
+ export const getSerializedStylesMap = (
1189
+ cssProperty: TokenMappableProperty,
1190
+ tokenMap: TokenMap,
1191
+ ): SerializedStylesMap => {
1192
+ return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
1193
+ // eslint-disable-next-line @repo/internal/styles/no-exported-styles
1194
+ emotionSpacingMap[token as PropsToken] = css({
1195
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
1196
+ [cssProperty]: tokenMap[token as PropsToken],
1197
+ });
1198
+
1199
+ return emotionSpacingMap;
1200
+ }, {} as SerializedStylesMap);
1201
+ };
1202
+ type SpacingToken = keyof typeof positiveSpaceMap;
1203
+ type BackgroundColorToken = keyof typeof backgroundColorMap;
1204
+ type SurfaceColorToken = keyof typeof surfaceColorMap;
1205
+ type TextColorToken = keyof typeof textColorMap;
1206
+ type FontWeightToken = keyof typeof fontWeightMap;
1207
+ type FontFamilyToken = keyof typeof fontFamilyMap;
1208
+ type FontToken = keyof typeof fontMap;
1209
+ type TextWeightToken = keyof typeof textWeightMap;
1210
+ type TextSizeToken = keyof typeof textSizeMap;
1211
+ type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
1212
+ type BackgroundColorStyleMap = Record<BackgroundColorToken, SerializedStyles>;
1213
+ type SurfaceColorStyleMap = Record<SurfaceColorToken, SerializedStyles>;
1214
+ type TextColorStyleMap = Record<TextColorToken, SerializedStyles>;
1215
+ type FontWeightStyleMap = Record<FontWeightToken, SerializedStyles>;
1216
+ type FontFamilyStyleMap = Record<FontFamilyToken, SerializedStyles>;
1217
+ type FontStyleMap = Record<FontToken, SerializedStyles>;
1218
+ type TextWeightStyleMap = Record<TextWeightToken, SerializedStyles>;
1219
+ type TextStyleMap = Record<TextSizeToken, SerializedStyles>;
1220
+
1221
+ export const paddingStylesMap: SpacingStyleMap = spacingProperties.reduce(
1222
+ (styleMap, spacingProperty: SpacingProperty) => {
1223
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
1224
+
1225
+ return styleMap;
1226
+ },
1227
+ {} as SpacingStyleMap,
1228
+ );
1229
+
1230
+ export const spaceStylesMap: SpacingStyleMap = spacingProperties.reduce(
1231
+ (styleMap, spacingProperty: SpacingProperty) => {
1232
+ styleMap[spacingProperty] = getSerializedStylesMap(spacingProperty, positiveSpaceMap);
1233
+
1234
+ return styleMap;
1235
+ },
1236
+ {} as SpacingStyleMap,
1237
+ );
1238
+
1239
+ export const backgroundColorStylesMap: BackgroundColorStyleMap = getSerializedStylesMap(
1240
+ 'backgroundColor',
1241
+ backgroundColorMap,
1242
+ );
1243
+
1244
+ export const textColorStylesMap: TextColorStyleMap = getSerializedStylesMap('color', textColorMap);
1245
+ export const fontWeightStylesMap: FontWeightStyleMap = getSerializedStylesMap(
1246
+ 'fontWeight',
1247
+ fontWeightMap,
1248
+ );
1249
+ export const fontFamilyStylesMap: FontFamilyStyleMap = getSerializedStylesMap(
1250
+ 'fontFamily',
1251
+ fontFamilyMap,
1252
+ );
1253
+ export const fontStylesMap: FontStyleMap = getSerializedStylesMap('font', fontMap);
1254
+
1255
+ export const textSizeStylesMap: TextStyleMap = getSerializedStylesMap('font', textSizeMap);
1256
+
1257
+ export const textWeightStylesMap: TextWeightStyleMap = getSerializedStylesMap(
1258
+ 'fontWeight',
1259
+ textWeightMap,
1260
+ );
1261
+
1262
+ export const surfaceColorStylesMap: SurfaceColorStyleMap = getSerializedStylesMap(
1263
+ CURRENT_SURFACE_CSS_VAR,
1264
+ surfaceColorMap,
1265
+ );
1266
+
1267
+ export const isSurfaceColorToken = (color: unknown): color is SurfaceColorToken =>
1268
+ surfaceColorMap[color as SurfaceColorToken] !== undefined;