@atlaskit/ds-explorations 3.5.2 → 4.0.1

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 (65) hide show
  1. package/CHANGELOG.md +370 -358
  2. package/README.md +4 -3
  3. package/afm-jira/tsconfig.json +24 -0
  4. package/dist/cjs/components/interaction-surface.partial.js +1 -1
  5. package/dist/cjs/index.js +0 -7
  6. package/dist/cjs/internal/color-map.js +1 -1
  7. package/dist/es2019/components/interaction-surface.partial.js +1 -1
  8. package/dist/es2019/index.js +0 -1
  9. package/dist/es2019/internal/color-map.js +1 -1
  10. package/dist/esm/components/interaction-surface.partial.js +1 -1
  11. package/dist/esm/index.js +0 -1
  12. package/dist/esm/internal/color-map.js +1 -1
  13. package/dist/types/components/interaction-surface.partial.d.ts +1 -1
  14. package/dist/types/index.d.ts +0 -2
  15. package/dist/types/internal/color-map.d.ts +1 -1
  16. package/dist/types-ts4.5/components/interaction-surface.partial.d.ts +1 -1
  17. package/dist/types-ts4.5/index.d.ts +0 -2
  18. package/dist/types-ts4.5/internal/color-map.d.ts +1 -1
  19. package/docs/01-basic.tsx +11 -13
  20. package/examples/99-interactions.tsx +174 -176
  21. package/package.json +6 -10
  22. package/report.api.md +127 -126
  23. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +540 -540
  24. package/scripts/__tests__/codegen.test.tsx +15 -17
  25. package/scripts/codegen-styles.tsx +25 -92
  26. package/scripts/color-codegen-template.tsx +69 -82
  27. package/scripts/color-map-template.tsx +24 -29
  28. package/scripts/dimension-codegen-template.tsx +32 -35
  29. package/scripts/interaction-codegen.tsx +61 -74
  30. package/scripts/misc-codegen-template.tsx +23 -25
  31. package/scripts/utils.tsx +30 -34
  32. package/src/components/__tests__/unit/interaction-suface.test.tsx +61 -62
  33. package/src/components/interaction-surface.partial.tsx +412 -416
  34. package/src/components/surface-provider.tsx +1 -1
  35. package/src/components/types.tsx +10 -10
  36. package/src/constants.tsx +9 -9
  37. package/src/index.tsx +0 -2
  38. package/src/internal/color-map.tsx +28 -28
  39. package/src/internal/role-to-element.tsx +21 -21
  40. package/tsconfig.app.json +44 -44
  41. package/tsconfig.dev.json +71 -83
  42. package/dist/cjs/components/text.partial.js +0 -280
  43. package/dist/cjs/internal/spacing-scale.js +0 -15
  44. package/dist/es2019/components/text.partial.js +0 -271
  45. package/dist/es2019/internal/spacing-scale.js +0 -9
  46. package/dist/esm/components/text.partial.js +0 -274
  47. package/dist/esm/internal/spacing-scale.js +0 -9
  48. package/dist/types/components/text.partial.d.ts +0 -157
  49. package/dist/types/internal/spacing-scale.d.ts +0 -9
  50. package/dist/types-ts4.5/components/text.partial.d.ts +0 -162
  51. package/dist/types-ts4.5/internal/spacing-scale.d.ts +0 -24
  52. package/examples/02-text-advanced.tsx +0 -30
  53. package/examples/02-text.tsx +0 -110
  54. package/examples/06-section-message.tsx +0 -82
  55. package/examples/07-comment.tsx +0 -51
  56. package/examples/08-lozenge.tsx +0 -34
  57. package/scripts/spacing-codegen-template.tsx +0 -66
  58. package/scripts/spacing-scale-template.tsx +0 -24
  59. package/scripts/typography-codegen-template.tsx +0 -72
  60. package/src/components/__tests__/unit/text.test.tsx +0 -64
  61. package/src/components/__tests__/vr-tests/__snapshots__/text-snapshot-test/text--default.png +0 -0
  62. package/src/components/__tests__/vr-tests/text-snapshot-test.vr.tsx +0 -6
  63. package/src/components/text.partial.tsx +0 -375
  64. package/src/internal/spacing-scale.tsx +0 -24
  65. package/text/package.json +0 -15
package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap CHANGED
@@ -2,90 +2,90 @@
2
2
 
3
3
  exports[`@atlaskit/design-system-explorations bg styles are generated correctly 1`] = `
4
4
  "const backgroundColorMap = {
5
- disabled: css({
6
- backgroundColor: token('color.background.disabled', '#091e4289'),
7
- }),
8
- input: css({
9
- backgroundColor: token('color.background.input', '#FAFBFC'),
10
- }),
11
- 'inverse.subtle': css({
12
- backgroundColor: token('color.background.inverse.subtle', '#00000029'),
13
- }),
14
- neutral: css({
15
- backgroundColor: token('color.background.neutral', '#DFE1E6'),
16
- }),
17
- 'neutral.subtle': css({
18
- backgroundColor: token('color.background.neutral.subtle', 'transparent'),
19
- }),
20
- 'neutral.bold': css({
21
- backgroundColor: token('color.background.neutral.bold', '#42526E'),
22
- }),
23
- selected: css({
24
- backgroundColor: token('color.background.selected', '#DEEBFF'),
25
- }),
26
- 'selected.bold': css({
27
- backgroundColor: token('color.background.selected.bold', '#0052CC'),
28
- }),
29
- 'brand.subtlest': css({
30
- backgroundColor: token('color.background.brand.subtlest', '#B3D4FF'),
31
- }),
32
- 'brand.bold': css({
33
- backgroundColor: token('color.background.brand.bold', '#0052CC'),
34
- }),
35
- 'brand.boldest': css({
36
- backgroundColor: token('color.background.brand.boldest', '#0747A6'),
37
- }),
38
- danger: css({
39
- backgroundColor: token('color.background.danger', '#FFEBE6'),
40
- }),
41
- 'danger.bold': css({
42
- backgroundColor: token('color.background.danger.bold', '#DE350B'),
43
- }),
44
- warning: css({
45
- backgroundColor: token('color.background.warning', '#FFFAE6'),
46
- }),
47
- 'warning.bold': css({
48
- backgroundColor: token('color.background.warning.bold', '#FFAB00'),
49
- }),
50
- success: css({
51
- backgroundColor: token('color.background.success', '#E3FCEF'),
52
- }),
53
- 'success.bold': css({
54
- backgroundColor: token('color.background.success.bold', '#00875A'),
55
- }),
56
- discovery: css({
57
- backgroundColor: token('color.background.discovery', '#EAE6FF'),
58
- }),
59
- 'discovery.bold': css({
60
- backgroundColor: token('color.background.discovery.bold', '#5243AA'),
61
- }),
62
- information: css({
63
- backgroundColor: token('color.background.information', '#DEEBFF'),
64
- }),
65
- 'information.bold': css({
66
- backgroundColor: token('color.background.information.bold', '#0052CC'),
67
- }),
68
- 'color.blanket': css({
69
- backgroundColor: token('color.blanket', '#091e4289'),
70
- }),
71
- 'color.blanket.selected': css({
72
- backgroundColor: token('color.blanket.selected', '#388BFF14'),
73
- }),
74
- 'color.blanket.danger': css({
75
- backgroundColor: token('color.blanket.danger', '#EF5C4814'),
76
- }),
77
- 'elevation.surface': css({
78
- backgroundColor: token('elevation.surface', '#FFFFFF'),
79
- }),
80
- 'elevation.surface.overlay': css({
81
- backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
82
- }),
83
- 'elevation.surface.raised': css({
84
- backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
85
- }),
86
- 'elevation.surface.sunken': css({
87
- backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
88
- }),
5
+ disabled: css({
6
+ backgroundColor: token('color.background.disabled', '#091e4289'),
7
+ }),
8
+ input: css({
9
+ backgroundColor: token('color.background.input', '#FAFBFC'),
10
+ }),
11
+ 'inverse.subtle': css({
12
+ backgroundColor: token('color.background.inverse.subtle', '#00000029'),
13
+ }),
14
+ neutral: css({
15
+ backgroundColor: token('color.background.neutral', '#DFE1E6'),
16
+ }),
17
+ 'neutral.subtle': css({
18
+ backgroundColor: token('color.background.neutral.subtle', 'transparent'),
19
+ }),
20
+ 'neutral.bold': css({
21
+ backgroundColor: token('color.background.neutral.bold', '#42526E'),
22
+ }),
23
+ selected: css({
24
+ backgroundColor: token('color.background.selected', '#DEEBFF'),
25
+ }),
26
+ 'selected.bold': css({
27
+ backgroundColor: token('color.background.selected.bold', '#0052CC'),
28
+ }),
29
+ 'brand.subtlest': css({
30
+ backgroundColor: token('color.background.brand.subtlest', '#B3D4FF'),
31
+ }),
32
+ 'brand.bold': css({
33
+ backgroundColor: token('color.background.brand.bold', '#0052CC'),
34
+ }),
35
+ 'brand.boldest': css({
36
+ backgroundColor: token('color.background.brand.boldest', '#0747A6'),
37
+ }),
38
+ danger: css({
39
+ backgroundColor: token('color.background.danger', '#FFEBE6'),
40
+ }),
41
+ 'danger.bold': css({
42
+ backgroundColor: token('color.background.danger.bold', '#DE350B'),
43
+ }),
44
+ warning: css({
45
+ backgroundColor: token('color.background.warning', '#FFFAE6'),
46
+ }),
47
+ 'warning.bold': css({
48
+ backgroundColor: token('color.background.warning.bold', '#FFAB00'),
49
+ }),
50
+ success: css({
51
+ backgroundColor: token('color.background.success', '#E3FCEF'),
52
+ }),
53
+ 'success.bold': css({
54
+ backgroundColor: token('color.background.success.bold', '#00875A'),
55
+ }),
56
+ discovery: css({
57
+ backgroundColor: token('color.background.discovery', '#EAE6FF'),
58
+ }),
59
+ 'discovery.bold': css({
60
+ backgroundColor: token('color.background.discovery.bold', '#5243AA'),
61
+ }),
62
+ information: css({
63
+ backgroundColor: token('color.background.information', '#DEEBFF'),
64
+ }),
65
+ 'information.bold': css({
66
+ backgroundColor: token('color.background.information.bold', '#0052CC'),
67
+ }),
68
+ 'color.blanket': css({
69
+ backgroundColor: token('color.blanket', '#091e4289'),
70
+ }),
71
+ 'color.blanket.selected': css({
72
+ backgroundColor: token('color.blanket.selected', '#388BFF14'),
73
+ }),
74
+ 'color.blanket.danger': css({
75
+ backgroundColor: token('color.blanket.danger', '#EF5C4814'),
76
+ }),
77
+ 'elevation.surface': css({
78
+ backgroundColor: token('elevation.surface', '#FFFFFF'),
79
+ }),
80
+ 'elevation.surface.overlay': css({
81
+ backgroundColor: token('elevation.surface.overlay', '#FFFFFF'),
82
+ }),
83
+ 'elevation.surface.raised': css({
84
+ backgroundColor: token('elevation.surface.raised', '#FFFFFF'),
85
+ }),
86
+ 'elevation.surface.sunken': css({
87
+ backgroundColor: token('elevation.surface.sunken', '#F4F5F7'),
88
+ }),
89
89
  } as const;
90
90
 
91
91
  export type BackgroundColor = keyof typeof backgroundColorMap;
@@ -94,45 +94,45 @@ export type BackgroundColor = keyof typeof backgroundColorMap;
94
94
 
95
95
  exports[`@atlaskit/design-system-explorations border styles are generated correctly 1`] = `
96
96
  "const borderColorMap = {
97
- 'color.border': css({
98
- borderColor: token('color.border', '#091e4221'),
99
- }),
100
- disabled: css({
101
- borderColor: token('color.border.disabled', '#FAFBFC'),
102
- }),
103
- focused: css({
104
- borderColor: token('color.border.focused', '#2684FF'),
105
- }),
106
- input: css({
107
- borderColor: token('color.border.input', '#FAFBFC'),
108
- }),
109
- inverse: css({
110
- borderColor: token('color.border.inverse', '#FFFFFF'),
111
- }),
112
- selected: css({
113
- borderColor: token('color.border.selected', '#0052CC'),
114
- }),
115
- brand: css({
116
- borderColor: token('color.border.brand', '#0052CC'),
117
- }),
118
- danger: css({
119
- borderColor: token('color.border.danger', '#FF5630'),
120
- }),
121
- warning: css({
122
- borderColor: token('color.border.warning', '#FFC400'),
123
- }),
124
- success: css({
125
- borderColor: token('color.border.success', '#00875A'),
126
- }),
127
- discovery: css({
128
- borderColor: token('color.border.discovery', '#998DD9'),
129
- }),
130
- information: css({
131
- borderColor: token('color.border.information', '#0065FF'),
132
- }),
133
- bold: css({
134
- borderColor: token('color.border.bold', '#344563'),
135
- }),
97
+ 'color.border': css({
98
+ borderColor: token('color.border', '#091e4221'),
99
+ }),
100
+ disabled: css({
101
+ borderColor: token('color.border.disabled', '#FAFBFC'),
102
+ }),
103
+ focused: css({
104
+ borderColor: token('color.border.focused', '#2684FF'),
105
+ }),
106
+ input: css({
107
+ borderColor: token('color.border.input', '#FAFBFC'),
108
+ }),
109
+ inverse: css({
110
+ borderColor: token('color.border.inverse', '#FFFFFF'),
111
+ }),
112
+ selected: css({
113
+ borderColor: token('color.border.selected', '#0052CC'),
114
+ }),
115
+ brand: css({
116
+ borderColor: token('color.border.brand', '#0052CC'),
117
+ }),
118
+ danger: css({
119
+ borderColor: token('color.border.danger', '#FF5630'),
120
+ }),
121
+ warning: css({
122
+ borderColor: token('color.border.warning', '#FFC400'),
123
+ }),
124
+ success: css({
125
+ borderColor: token('color.border.success', '#00875A'),
126
+ }),
127
+ discovery: css({
128
+ borderColor: token('color.border.discovery', '#998DD9'),
129
+ }),
130
+ information: css({
131
+ borderColor: token('color.border.information', '#0065FF'),
132
+ }),
133
+ bold: css({
134
+ borderColor: token('color.border.bold', '#344563'),
135
+ }),
136
136
  } as const;
137
137
 
138
138
  export type BorderColor = keyof typeof borderColorMap;
@@ -141,387 +141,387 @@ export type BorderColor = keyof typeof borderColorMap;
141
141
 
142
142
  exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
143
143
  "const backgroundActiveColorMap = {
144
- 'accent.lime.subtlest': css({
145
- ':active': { backgroundColor: token('color.background.accent.lime.subtlest.pressed') },
146
- }),
147
- 'accent.lime.subtler': css({
148
- ':active': { backgroundColor: token('color.background.accent.lime.subtler.pressed') },
149
- }),
150
- 'accent.lime.subtle': css({
151
- ':active': { backgroundColor: token('color.background.accent.lime.subtle.pressed') },
152
- }),
153
- 'accent.lime.bolder': css({
154
- ':active': { backgroundColor: token('color.background.accent.lime.bolder.pressed') },
155
- }),
156
- 'accent.red.subtlest': css({
157
- ':active': { backgroundColor: token('color.background.accent.red.subtlest.pressed') },
158
- }),
159
- 'accent.red.subtler': css({
160
- ':active': { backgroundColor: token('color.background.accent.red.subtler.pressed') },
161
- }),
162
- 'accent.red.subtle': css({
163
- ':active': { backgroundColor: token('color.background.accent.red.subtle.pressed') },
164
- }),
165
- 'accent.red.bolder': css({
166
- ':active': { backgroundColor: token('color.background.accent.red.bolder.pressed') },
167
- }),
168
- 'accent.orange.subtlest': css({
169
- ':active': { backgroundColor: token('color.background.accent.orange.subtlest.pressed') },
170
- }),
171
- 'accent.orange.subtler': css({
172
- ':active': { backgroundColor: token('color.background.accent.orange.subtler.pressed') },
173
- }),
174
- 'accent.orange.subtle': css({
175
- ':active': { backgroundColor: token('color.background.accent.orange.subtle.pressed') },
176
- }),
177
- 'accent.orange.bolder': css({
178
- ':active': { backgroundColor: token('color.background.accent.orange.bolder.pressed') },
179
- }),
180
- 'accent.yellow.subtlest': css({
181
- ':active': { backgroundColor: token('color.background.accent.yellow.subtlest.pressed') },
182
- }),
183
- 'accent.yellow.subtler': css({
184
- ':active': { backgroundColor: token('color.background.accent.yellow.subtler.pressed') },
185
- }),
186
- 'accent.yellow.subtle': css({
187
- ':active': { backgroundColor: token('color.background.accent.yellow.subtle.pressed') },
188
- }),
189
- 'accent.yellow.bolder': css({
190
- ':active': { backgroundColor: token('color.background.accent.yellow.bolder.pressed') },
191
- }),
192
- 'accent.green.subtlest': css({
193
- ':active': { backgroundColor: token('color.background.accent.green.subtlest.pressed') },
194
- }),
195
- 'accent.green.subtler': css({
196
- ':active': { backgroundColor: token('color.background.accent.green.subtler.pressed') },
197
- }),
198
- 'accent.green.subtle': css({
199
- ':active': { backgroundColor: token('color.background.accent.green.subtle.pressed') },
200
- }),
201
- 'accent.green.bolder': css({
202
- ':active': { backgroundColor: token('color.background.accent.green.bolder.pressed') },
203
- }),
204
- 'accent.teal.subtlest': css({
205
- ':active': { backgroundColor: token('color.background.accent.teal.subtlest.pressed') },
206
- }),
207
- 'accent.teal.subtler': css({
208
- ':active': { backgroundColor: token('color.background.accent.teal.subtler.pressed') },
209
- }),
210
- 'accent.teal.subtle': css({
211
- ':active': { backgroundColor: token('color.background.accent.teal.subtle.pressed') },
212
- }),
213
- 'accent.teal.bolder': css({
214
- ':active': { backgroundColor: token('color.background.accent.teal.bolder.pressed') },
215
- }),
216
- 'accent.blue.subtlest': css({
217
- ':active': { backgroundColor: token('color.background.accent.blue.subtlest.pressed') },
218
- }),
219
- 'accent.blue.subtler': css({
220
- ':active': { backgroundColor: token('color.background.accent.blue.subtler.pressed') },
221
- }),
222
- 'accent.blue.subtle': css({
223
- ':active': { backgroundColor: token('color.background.accent.blue.subtle.pressed') },
224
- }),
225
- 'accent.blue.bolder': css({
226
- ':active': { backgroundColor: token('color.background.accent.blue.bolder.pressed') },
227
- }),
228
- 'accent.purple.subtlest': css({
229
- ':active': { backgroundColor: token('color.background.accent.purple.subtlest.pressed') },
230
- }),
231
- 'accent.purple.subtler': css({
232
- ':active': { backgroundColor: token('color.background.accent.purple.subtler.pressed') },
233
- }),
234
- 'accent.purple.subtle': css({
235
- ':active': { backgroundColor: token('color.background.accent.purple.subtle.pressed') },
236
- }),
237
- 'accent.purple.bolder': css({
238
- ':active': { backgroundColor: token('color.background.accent.purple.bolder.pressed') },
239
- }),
240
- 'accent.magenta.subtlest': css({
241
- ':active': { backgroundColor: token('color.background.accent.magenta.subtlest.pressed') },
242
- }),
243
- 'accent.magenta.subtler': css({
244
- ':active': { backgroundColor: token('color.background.accent.magenta.subtler.pressed') },
245
- }),
246
- 'accent.magenta.subtle': css({
247
- ':active': { backgroundColor: token('color.background.accent.magenta.subtle.pressed') },
248
- }),
249
- 'accent.magenta.bolder': css({
250
- ':active': { backgroundColor: token('color.background.accent.magenta.bolder.pressed') },
251
- }),
252
- 'accent.gray.subtlest': css({
253
- ':active': { backgroundColor: token('color.background.accent.gray.subtlest.pressed') },
254
- }),
255
- 'accent.gray.subtler': css({
256
- ':active': { backgroundColor: token('color.background.accent.gray.subtler.pressed') },
257
- }),
258
- 'accent.gray.subtle': css({
259
- ':active': { backgroundColor: token('color.background.accent.gray.subtle.pressed') },
260
- }),
261
- 'accent.gray.bolder': css({
262
- ':active': { backgroundColor: token('color.background.accent.gray.bolder.pressed') },
263
- }),
264
- input: css({
265
- ':active': { backgroundColor: token('color.background.input.pressed') },
266
- }),
267
- 'inverse.subtle': css({
268
- ':active': { backgroundColor: token('color.background.inverse.subtle.pressed') },
269
- }),
270
- neutral: css({
271
- ':active': { backgroundColor: token('color.background.neutral.pressed') },
272
- }),
273
- 'neutral.subtle': css({
274
- ':active': { backgroundColor: token('color.background.neutral.subtle.pressed') },
275
- }),
276
- 'neutral.bold': css({
277
- ':active': { backgroundColor: token('color.background.neutral.bold.pressed') },
278
- }),
279
- selected: css({
280
- ':active': { backgroundColor: token('color.background.selected.pressed') },
281
- }),
282
- 'selected.bold': css({
283
- ':active': { backgroundColor: token('color.background.selected.bold.pressed') },
284
- }),
285
- 'brand.subtlest': css({
286
- ':active': { backgroundColor: token('color.background.brand.subtlest.pressed') },
287
- }),
288
- 'brand.bold': css({
289
- ':active': { backgroundColor: token('color.background.brand.bold.pressed') },
290
- }),
291
- 'brand.boldest': css({
292
- ':active': { backgroundColor: token('color.background.brand.boldest.pressed') },
293
- }),
294
- danger: css({
295
- ':active': { backgroundColor: token('color.background.danger.pressed') },
296
- }),
297
- 'danger.bold': css({
298
- ':active': { backgroundColor: token('color.background.danger.bold.pressed') },
299
- }),
300
- warning: css({
301
- ':active': { backgroundColor: token('color.background.warning.pressed') },
302
- }),
303
- 'warning.bold': css({
304
- ':active': { backgroundColor: token('color.background.warning.bold.pressed') },
305
- }),
306
- success: css({
307
- ':active': { backgroundColor: token('color.background.success.pressed') },
308
- }),
309
- 'success.bold': css({
310
- ':active': { backgroundColor: token('color.background.success.bold.pressed') },
311
- }),
312
- discovery: css({
313
- ':active': { backgroundColor: token('color.background.discovery.pressed') },
314
- }),
315
- 'discovery.bold': css({
316
- ':active': { backgroundColor: token('color.background.discovery.bold.pressed') },
317
- }),
318
- information: css({
319
- ':active': { backgroundColor: token('color.background.information.pressed') },
320
- }),
321
- 'information.bold': css({
322
- ':active': { backgroundColor: token('color.background.information.bold.pressed') },
323
- }),
324
- 'elevation.surface': css({
325
- ':active': { backgroundColor: token('elevation.surface.pressed') },
326
- }),
327
- 'elevation.surface.overlay': css({
328
- ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
329
- }),
330
- 'elevation.surface.raised': css({
331
- ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
332
- }),
144
+ 'accent.lime.subtlest': css({
145
+ ':active': { backgroundColor: token('color.background.accent.lime.subtlest.pressed') },
146
+ }),
147
+ 'accent.lime.subtler': css({
148
+ ':active': { backgroundColor: token('color.background.accent.lime.subtler.pressed') },
149
+ }),
150
+ 'accent.lime.subtle': css({
151
+ ':active': { backgroundColor: token('color.background.accent.lime.subtle.pressed') },
152
+ }),
153
+ 'accent.lime.bolder': css({
154
+ ':active': { backgroundColor: token('color.background.accent.lime.bolder.pressed') },
155
+ }),
156
+ 'accent.red.subtlest': css({
157
+ ':active': { backgroundColor: token('color.background.accent.red.subtlest.pressed') },
158
+ }),
159
+ 'accent.red.subtler': css({
160
+ ':active': { backgroundColor: token('color.background.accent.red.subtler.pressed') },
161
+ }),
162
+ 'accent.red.subtle': css({
163
+ ':active': { backgroundColor: token('color.background.accent.red.subtle.pressed') },
164
+ }),
165
+ 'accent.red.bolder': css({
166
+ ':active': { backgroundColor: token('color.background.accent.red.bolder.pressed') },
167
+ }),
168
+ 'accent.orange.subtlest': css({
169
+ ':active': { backgroundColor: token('color.background.accent.orange.subtlest.pressed') },
170
+ }),
171
+ 'accent.orange.subtler': css({
172
+ ':active': { backgroundColor: token('color.background.accent.orange.subtler.pressed') },
173
+ }),
174
+ 'accent.orange.subtle': css({
175
+ ':active': { backgroundColor: token('color.background.accent.orange.subtle.pressed') },
176
+ }),
177
+ 'accent.orange.bolder': css({
178
+ ':active': { backgroundColor: token('color.background.accent.orange.bolder.pressed') },
179
+ }),
180
+ 'accent.yellow.subtlest': css({
181
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtlest.pressed') },
182
+ }),
183
+ 'accent.yellow.subtler': css({
184
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtler.pressed') },
185
+ }),
186
+ 'accent.yellow.subtle': css({
187
+ ':active': { backgroundColor: token('color.background.accent.yellow.subtle.pressed') },
188
+ }),
189
+ 'accent.yellow.bolder': css({
190
+ ':active': { backgroundColor: token('color.background.accent.yellow.bolder.pressed') },
191
+ }),
192
+ 'accent.green.subtlest': css({
193
+ ':active': { backgroundColor: token('color.background.accent.green.subtlest.pressed') },
194
+ }),
195
+ 'accent.green.subtler': css({
196
+ ':active': { backgroundColor: token('color.background.accent.green.subtler.pressed') },
197
+ }),
198
+ 'accent.green.subtle': css({
199
+ ':active': { backgroundColor: token('color.background.accent.green.subtle.pressed') },
200
+ }),
201
+ 'accent.green.bolder': css({
202
+ ':active': { backgroundColor: token('color.background.accent.green.bolder.pressed') },
203
+ }),
204
+ 'accent.teal.subtlest': css({
205
+ ':active': { backgroundColor: token('color.background.accent.teal.subtlest.pressed') },
206
+ }),
207
+ 'accent.teal.subtler': css({
208
+ ':active': { backgroundColor: token('color.background.accent.teal.subtler.pressed') },
209
+ }),
210
+ 'accent.teal.subtle': css({
211
+ ':active': { backgroundColor: token('color.background.accent.teal.subtle.pressed') },
212
+ }),
213
+ 'accent.teal.bolder': css({
214
+ ':active': { backgroundColor: token('color.background.accent.teal.bolder.pressed') },
215
+ }),
216
+ 'accent.blue.subtlest': css({
217
+ ':active': { backgroundColor: token('color.background.accent.blue.subtlest.pressed') },
218
+ }),
219
+ 'accent.blue.subtler': css({
220
+ ':active': { backgroundColor: token('color.background.accent.blue.subtler.pressed') },
221
+ }),
222
+ 'accent.blue.subtle': css({
223
+ ':active': { backgroundColor: token('color.background.accent.blue.subtle.pressed') },
224
+ }),
225
+ 'accent.blue.bolder': css({
226
+ ':active': { backgroundColor: token('color.background.accent.blue.bolder.pressed') },
227
+ }),
228
+ 'accent.purple.subtlest': css({
229
+ ':active': { backgroundColor: token('color.background.accent.purple.subtlest.pressed') },
230
+ }),
231
+ 'accent.purple.subtler': css({
232
+ ':active': { backgroundColor: token('color.background.accent.purple.subtler.pressed') },
233
+ }),
234
+ 'accent.purple.subtle': css({
235
+ ':active': { backgroundColor: token('color.background.accent.purple.subtle.pressed') },
236
+ }),
237
+ 'accent.purple.bolder': css({
238
+ ':active': { backgroundColor: token('color.background.accent.purple.bolder.pressed') },
239
+ }),
240
+ 'accent.magenta.subtlest': css({
241
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtlest.pressed') },
242
+ }),
243
+ 'accent.magenta.subtler': css({
244
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtler.pressed') },
245
+ }),
246
+ 'accent.magenta.subtle': css({
247
+ ':active': { backgroundColor: token('color.background.accent.magenta.subtle.pressed') },
248
+ }),
249
+ 'accent.magenta.bolder': css({
250
+ ':active': { backgroundColor: token('color.background.accent.magenta.bolder.pressed') },
251
+ }),
252
+ 'accent.gray.subtlest': css({
253
+ ':active': { backgroundColor: token('color.background.accent.gray.subtlest.pressed') },
254
+ }),
255
+ 'accent.gray.subtler': css({
256
+ ':active': { backgroundColor: token('color.background.accent.gray.subtler.pressed') },
257
+ }),
258
+ 'accent.gray.subtle': css({
259
+ ':active': { backgroundColor: token('color.background.accent.gray.subtle.pressed') },
260
+ }),
261
+ 'accent.gray.bolder': css({
262
+ ':active': { backgroundColor: token('color.background.accent.gray.bolder.pressed') },
263
+ }),
264
+ input: css({
265
+ ':active': { backgroundColor: token('color.background.input.pressed') },
266
+ }),
267
+ 'inverse.subtle': css({
268
+ ':active': { backgroundColor: token('color.background.inverse.subtle.pressed') },
269
+ }),
270
+ neutral: css({
271
+ ':active': { backgroundColor: token('color.background.neutral.pressed') },
272
+ }),
273
+ 'neutral.subtle': css({
274
+ ':active': { backgroundColor: token('color.background.neutral.subtle.pressed') },
275
+ }),
276
+ 'neutral.bold': css({
277
+ ':active': { backgroundColor: token('color.background.neutral.bold.pressed') },
278
+ }),
279
+ selected: css({
280
+ ':active': { backgroundColor: token('color.background.selected.pressed') },
281
+ }),
282
+ 'selected.bold': css({
283
+ ':active': { backgroundColor: token('color.background.selected.bold.pressed') },
284
+ }),
285
+ 'brand.subtlest': css({
286
+ ':active': { backgroundColor: token('color.background.brand.subtlest.pressed') },
287
+ }),
288
+ 'brand.bold': css({
289
+ ':active': { backgroundColor: token('color.background.brand.bold.pressed') },
290
+ }),
291
+ 'brand.boldest': css({
292
+ ':active': { backgroundColor: token('color.background.brand.boldest.pressed') },
293
+ }),
294
+ danger: css({
295
+ ':active': { backgroundColor: token('color.background.danger.pressed') },
296
+ }),
297
+ 'danger.bold': css({
298
+ ':active': { backgroundColor: token('color.background.danger.bold.pressed') },
299
+ }),
300
+ warning: css({
301
+ ':active': { backgroundColor: token('color.background.warning.pressed') },
302
+ }),
303
+ 'warning.bold': css({
304
+ ':active': { backgroundColor: token('color.background.warning.bold.pressed') },
305
+ }),
306
+ success: css({
307
+ ':active': { backgroundColor: token('color.background.success.pressed') },
308
+ }),
309
+ 'success.bold': css({
310
+ ':active': { backgroundColor: token('color.background.success.bold.pressed') },
311
+ }),
312
+ discovery: css({
313
+ ':active': { backgroundColor: token('color.background.discovery.pressed') },
314
+ }),
315
+ 'discovery.bold': css({
316
+ ':active': { backgroundColor: token('color.background.discovery.bold.pressed') },
317
+ }),
318
+ information: css({
319
+ ':active': { backgroundColor: token('color.background.information.pressed') },
320
+ }),
321
+ 'information.bold': css({
322
+ ':active': { backgroundColor: token('color.background.information.bold.pressed') },
323
+ }),
324
+ 'elevation.surface': css({
325
+ ':active': { backgroundColor: token('elevation.surface.pressed') },
326
+ }),
327
+ 'elevation.surface.overlay': css({
328
+ ':active': { backgroundColor: token('elevation.surface.overlay.pressed') },
329
+ }),
330
+ 'elevation.surface.raised': css({
331
+ ':active': { backgroundColor: token('elevation.surface.raised.pressed') },
332
+ }),
333
333
  };
334
334
 
335
335
  const backgroundHoverColorMap = {
336
- 'accent.lime.subtlest': css({
337
- ':hover': { backgroundColor: token('color.background.accent.lime.subtlest.hovered') },
338
- }),
339
- 'accent.lime.subtler': css({
340
- ':hover': { backgroundColor: token('color.background.accent.lime.subtler.hovered') },
341
- }),
342
- 'accent.lime.subtle': css({
343
- ':hover': { backgroundColor: token('color.background.accent.lime.subtle.hovered') },
344
- }),
345
- 'accent.lime.bolder': css({
346
- ':hover': { backgroundColor: token('color.background.accent.lime.bolder.hovered') },
347
- }),
348
- 'accent.red.subtlest': css({
349
- ':hover': { backgroundColor: token('color.background.accent.red.subtlest.hovered') },
350
- }),
351
- 'accent.red.subtler': css({
352
- ':hover': { backgroundColor: token('color.background.accent.red.subtler.hovered') },
353
- }),
354
- 'accent.red.subtle': css({
355
- ':hover': { backgroundColor: token('color.background.accent.red.subtle.hovered') },
356
- }),
357
- 'accent.red.bolder': css({
358
- ':hover': { backgroundColor: token('color.background.accent.red.bolder.hovered') },
359
- }),
360
- 'accent.orange.subtlest': css({
361
- ':hover': { backgroundColor: token('color.background.accent.orange.subtlest.hovered') },
362
- }),
363
- 'accent.orange.subtler': css({
364
- ':hover': { backgroundColor: token('color.background.accent.orange.subtler.hovered') },
365
- }),
366
- 'accent.orange.subtle': css({
367
- ':hover': { backgroundColor: token('color.background.accent.orange.subtle.hovered') },
368
- }),
369
- 'accent.orange.bolder': css({
370
- ':hover': { backgroundColor: token('color.background.accent.orange.bolder.hovered') },
371
- }),
372
- 'accent.yellow.subtlest': css({
373
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtlest.hovered') },
374
- }),
375
- 'accent.yellow.subtler': css({
376
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtler.hovered') },
377
- }),
378
- 'accent.yellow.subtle': css({
379
- ':hover': { backgroundColor: token('color.background.accent.yellow.subtle.hovered') },
380
- }),
381
- 'accent.yellow.bolder': css({
382
- ':hover': { backgroundColor: token('color.background.accent.yellow.bolder.hovered') },
383
- }),
384
- 'accent.green.subtlest': css({
385
- ':hover': { backgroundColor: token('color.background.accent.green.subtlest.hovered') },
386
- }),
387
- 'accent.green.subtler': css({
388
- ':hover': { backgroundColor: token('color.background.accent.green.subtler.hovered') },
389
- }),
390
- 'accent.green.subtle': css({
391
- ':hover': { backgroundColor: token('color.background.accent.green.subtle.hovered') },
392
- }),
393
- 'accent.green.bolder': css({
394
- ':hover': { backgroundColor: token('color.background.accent.green.bolder.hovered') },
395
- }),
396
- 'accent.teal.subtlest': css({
397
- ':hover': { backgroundColor: token('color.background.accent.teal.subtlest.hovered') },
398
- }),
399
- 'accent.teal.subtler': css({
400
- ':hover': { backgroundColor: token('color.background.accent.teal.subtler.hovered') },
401
- }),
402
- 'accent.teal.subtle': css({
403
- ':hover': { backgroundColor: token('color.background.accent.teal.subtle.hovered') },
404
- }),
405
- 'accent.teal.bolder': css({
406
- ':hover': { backgroundColor: token('color.background.accent.teal.bolder.hovered') },
407
- }),
408
- 'accent.blue.subtlest': css({
409
- ':hover': { backgroundColor: token('color.background.accent.blue.subtlest.hovered') },
410
- }),
411
- 'accent.blue.subtler': css({
412
- ':hover': { backgroundColor: token('color.background.accent.blue.subtler.hovered') },
413
- }),
414
- 'accent.blue.subtle': css({
415
- ':hover': { backgroundColor: token('color.background.accent.blue.subtle.hovered') },
416
- }),
417
- 'accent.blue.bolder': css({
418
- ':hover': { backgroundColor: token('color.background.accent.blue.bolder.hovered') },
419
- }),
420
- 'accent.purple.subtlest': css({
421
- ':hover': { backgroundColor: token('color.background.accent.purple.subtlest.hovered') },
422
- }),
423
- 'accent.purple.subtler': css({
424
- ':hover': { backgroundColor: token('color.background.accent.purple.subtler.hovered') },
425
- }),
426
- 'accent.purple.subtle': css({
427
- ':hover': { backgroundColor: token('color.background.accent.purple.subtle.hovered') },
428
- }),
429
- 'accent.purple.bolder': css({
430
- ':hover': { backgroundColor: token('color.background.accent.purple.bolder.hovered') },
431
- }),
432
- 'accent.magenta.subtlest': css({
433
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtlest.hovered') },
434
- }),
435
- 'accent.magenta.subtler': css({
436
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtler.hovered') },
437
- }),
438
- 'accent.magenta.subtle': css({
439
- ':hover': { backgroundColor: token('color.background.accent.magenta.subtle.hovered') },
440
- }),
441
- 'accent.magenta.bolder': css({
442
- ':hover': { backgroundColor: token('color.background.accent.magenta.bolder.hovered') },
443
- }),
444
- 'accent.gray.subtlest': css({
445
- ':hover': { backgroundColor: token('color.background.accent.gray.subtlest.hovered') },
446
- }),
447
- 'accent.gray.subtler': css({
448
- ':hover': { backgroundColor: token('color.background.accent.gray.subtler.hovered') },
449
- }),
450
- 'accent.gray.subtle': css({
451
- ':hover': { backgroundColor: token('color.background.accent.gray.subtle.hovered') },
452
- }),
453
- 'accent.gray.bolder': css({
454
- ':hover': { backgroundColor: token('color.background.accent.gray.bolder.hovered') },
455
- }),
456
- input: css({
457
- ':hover': { backgroundColor: token('color.background.input.hovered') },
458
- }),
459
- 'inverse.subtle': css({
460
- ':hover': { backgroundColor: token('color.background.inverse.subtle.hovered') },
461
- }),
462
- neutral: css({
463
- ':hover': { backgroundColor: token('color.background.neutral.hovered') },
464
- }),
465
- 'neutral.subtle': css({
466
- ':hover': { backgroundColor: token('color.background.neutral.subtle.hovered') },
467
- }),
468
- 'neutral.bold': css({
469
- ':hover': { backgroundColor: token('color.background.neutral.bold.hovered') },
470
- }),
471
- selected: css({
472
- ':hover': { backgroundColor: token('color.background.selected.hovered') },
473
- }),
474
- 'selected.bold': css({
475
- ':hover': { backgroundColor: token('color.background.selected.bold.hovered') },
476
- }),
477
- 'brand.subtlest': css({
478
- ':hover': { backgroundColor: token('color.background.brand.subtlest.hovered') },
479
- }),
480
- 'brand.bold': css({
481
- ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
482
- }),
483
- 'brand.boldest': css({
484
- ':hover': { backgroundColor: token('color.background.brand.boldest.hovered') },
485
- }),
486
- danger: css({
487
- ':hover': { backgroundColor: token('color.background.danger.hovered') },
488
- }),
489
- 'danger.bold': css({
490
- ':hover': { backgroundColor: token('color.background.danger.bold.hovered') },
491
- }),
492
- warning: css({
493
- ':hover': { backgroundColor: token('color.background.warning.hovered') },
494
- }),
495
- 'warning.bold': css({
496
- ':hover': { backgroundColor: token('color.background.warning.bold.hovered') },
497
- }),
498
- success: css({
499
- ':hover': { backgroundColor: token('color.background.success.hovered') },
500
- }),
501
- 'success.bold': css({
502
- ':hover': { backgroundColor: token('color.background.success.bold.hovered') },
503
- }),
504
- discovery: css({
505
- ':hover': { backgroundColor: token('color.background.discovery.hovered') },
506
- }),
507
- 'discovery.bold': css({
508
- ':hover': { backgroundColor: token('color.background.discovery.bold.hovered') },
509
- }),
510
- information: css({
511
- ':hover': { backgroundColor: token('color.background.information.hovered') },
512
- }),
513
- 'information.bold': css({
514
- ':hover': { backgroundColor: token('color.background.information.bold.hovered') },
515
- }),
516
- 'elevation.surface': css({
517
- ':hover': { backgroundColor: token('elevation.surface.hovered') },
518
- }),
519
- 'elevation.surface.overlay': css({
520
- ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
521
- }),
522
- 'elevation.surface.raised': css({
523
- ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
524
- }),
336
+ 'accent.lime.subtlest': css({
337
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtlest.hovered') },
338
+ }),
339
+ 'accent.lime.subtler': css({
340
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtler.hovered') },
341
+ }),
342
+ 'accent.lime.subtle': css({
343
+ ':hover': { backgroundColor: token('color.background.accent.lime.subtle.hovered') },
344
+ }),
345
+ 'accent.lime.bolder': css({
346
+ ':hover': { backgroundColor: token('color.background.accent.lime.bolder.hovered') },
347
+ }),
348
+ 'accent.red.subtlest': css({
349
+ ':hover': { backgroundColor: token('color.background.accent.red.subtlest.hovered') },
350
+ }),
351
+ 'accent.red.subtler': css({
352
+ ':hover': { backgroundColor: token('color.background.accent.red.subtler.hovered') },
353
+ }),
354
+ 'accent.red.subtle': css({
355
+ ':hover': { backgroundColor: token('color.background.accent.red.subtle.hovered') },
356
+ }),
357
+ 'accent.red.bolder': css({
358
+ ':hover': { backgroundColor: token('color.background.accent.red.bolder.hovered') },
359
+ }),
360
+ 'accent.orange.subtlest': css({
361
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtlest.hovered') },
362
+ }),
363
+ 'accent.orange.subtler': css({
364
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtler.hovered') },
365
+ }),
366
+ 'accent.orange.subtle': css({
367
+ ':hover': { backgroundColor: token('color.background.accent.orange.subtle.hovered') },
368
+ }),
369
+ 'accent.orange.bolder': css({
370
+ ':hover': { backgroundColor: token('color.background.accent.orange.bolder.hovered') },
371
+ }),
372
+ 'accent.yellow.subtlest': css({
373
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtlest.hovered') },
374
+ }),
375
+ 'accent.yellow.subtler': css({
376
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtler.hovered') },
377
+ }),
378
+ 'accent.yellow.subtle': css({
379
+ ':hover': { backgroundColor: token('color.background.accent.yellow.subtle.hovered') },
380
+ }),
381
+ 'accent.yellow.bolder': css({
382
+ ':hover': { backgroundColor: token('color.background.accent.yellow.bolder.hovered') },
383
+ }),
384
+ 'accent.green.subtlest': css({
385
+ ':hover': { backgroundColor: token('color.background.accent.green.subtlest.hovered') },
386
+ }),
387
+ 'accent.green.subtler': css({
388
+ ':hover': { backgroundColor: token('color.background.accent.green.subtler.hovered') },
389
+ }),
390
+ 'accent.green.subtle': css({
391
+ ':hover': { backgroundColor: token('color.background.accent.green.subtle.hovered') },
392
+ }),
393
+ 'accent.green.bolder': css({
394
+ ':hover': { backgroundColor: token('color.background.accent.green.bolder.hovered') },
395
+ }),
396
+ 'accent.teal.subtlest': css({
397
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtlest.hovered') },
398
+ }),
399
+ 'accent.teal.subtler': css({
400
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtler.hovered') },
401
+ }),
402
+ 'accent.teal.subtle': css({
403
+ ':hover': { backgroundColor: token('color.background.accent.teal.subtle.hovered') },
404
+ }),
405
+ 'accent.teal.bolder': css({
406
+ ':hover': { backgroundColor: token('color.background.accent.teal.bolder.hovered') },
407
+ }),
408
+ 'accent.blue.subtlest': css({
409
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtlest.hovered') },
410
+ }),
411
+ 'accent.blue.subtler': css({
412
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtler.hovered') },
413
+ }),
414
+ 'accent.blue.subtle': css({
415
+ ':hover': { backgroundColor: token('color.background.accent.blue.subtle.hovered') },
416
+ }),
417
+ 'accent.blue.bolder': css({
418
+ ':hover': { backgroundColor: token('color.background.accent.blue.bolder.hovered') },
419
+ }),
420
+ 'accent.purple.subtlest': css({
421
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtlest.hovered') },
422
+ }),
423
+ 'accent.purple.subtler': css({
424
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtler.hovered') },
425
+ }),
426
+ 'accent.purple.subtle': css({
427
+ ':hover': { backgroundColor: token('color.background.accent.purple.subtle.hovered') },
428
+ }),
429
+ 'accent.purple.bolder': css({
430
+ ':hover': { backgroundColor: token('color.background.accent.purple.bolder.hovered') },
431
+ }),
432
+ 'accent.magenta.subtlest': css({
433
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtlest.hovered') },
434
+ }),
435
+ 'accent.magenta.subtler': css({
436
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtler.hovered') },
437
+ }),
438
+ 'accent.magenta.subtle': css({
439
+ ':hover': { backgroundColor: token('color.background.accent.magenta.subtle.hovered') },
440
+ }),
441
+ 'accent.magenta.bolder': css({
442
+ ':hover': { backgroundColor: token('color.background.accent.magenta.bolder.hovered') },
443
+ }),
444
+ 'accent.gray.subtlest': css({
445
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtlest.hovered') },
446
+ }),
447
+ 'accent.gray.subtler': css({
448
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtler.hovered') },
449
+ }),
450
+ 'accent.gray.subtle': css({
451
+ ':hover': { backgroundColor: token('color.background.accent.gray.subtle.hovered') },
452
+ }),
453
+ 'accent.gray.bolder': css({
454
+ ':hover': { backgroundColor: token('color.background.accent.gray.bolder.hovered') },
455
+ }),
456
+ input: css({
457
+ ':hover': { backgroundColor: token('color.background.input.hovered') },
458
+ }),
459
+ 'inverse.subtle': css({
460
+ ':hover': { backgroundColor: token('color.background.inverse.subtle.hovered') },
461
+ }),
462
+ neutral: css({
463
+ ':hover': { backgroundColor: token('color.background.neutral.hovered') },
464
+ }),
465
+ 'neutral.subtle': css({
466
+ ':hover': { backgroundColor: token('color.background.neutral.subtle.hovered') },
467
+ }),
468
+ 'neutral.bold': css({
469
+ ':hover': { backgroundColor: token('color.background.neutral.bold.hovered') },
470
+ }),
471
+ selected: css({
472
+ ':hover': { backgroundColor: token('color.background.selected.hovered') },
473
+ }),
474
+ 'selected.bold': css({
475
+ ':hover': { backgroundColor: token('color.background.selected.bold.hovered') },
476
+ }),
477
+ 'brand.subtlest': css({
478
+ ':hover': { backgroundColor: token('color.background.brand.subtlest.hovered') },
479
+ }),
480
+ 'brand.bold': css({
481
+ ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
482
+ }),
483
+ 'brand.boldest': css({
484
+ ':hover': { backgroundColor: token('color.background.brand.boldest.hovered') },
485
+ }),
486
+ danger: css({
487
+ ':hover': { backgroundColor: token('color.background.danger.hovered') },
488
+ }),
489
+ 'danger.bold': css({
490
+ ':hover': { backgroundColor: token('color.background.danger.bold.hovered') },
491
+ }),
492
+ warning: css({
493
+ ':hover': { backgroundColor: token('color.background.warning.hovered') },
494
+ }),
495
+ 'warning.bold': css({
496
+ ':hover': { backgroundColor: token('color.background.warning.bold.hovered') },
497
+ }),
498
+ success: css({
499
+ ':hover': { backgroundColor: token('color.background.success.hovered') },
500
+ }),
501
+ 'success.bold': css({
502
+ ':hover': { backgroundColor: token('color.background.success.bold.hovered') },
503
+ }),
504
+ discovery: css({
505
+ ':hover': { backgroundColor: token('color.background.discovery.hovered') },
506
+ }),
507
+ 'discovery.bold': css({
508
+ ':hover': { backgroundColor: token('color.background.discovery.bold.hovered') },
509
+ }),
510
+ information: css({
511
+ ':hover': { backgroundColor: token('color.background.information.hovered') },
512
+ }),
513
+ 'information.bold': css({
514
+ ':hover': { backgroundColor: token('color.background.information.bold.hovered') },
515
+ }),
516
+ 'elevation.surface': css({
517
+ ':hover': { backgroundColor: token('elevation.surface.hovered') },
518
+ }),
519
+ 'elevation.surface.overlay': css({
520
+ ':hover': { backgroundColor: token('elevation.surface.overlay.hovered') },
521
+ }),
522
+ 'elevation.surface.raised': css({
523
+ ':hover': { backgroundColor: token('elevation.surface.raised.hovered') },
524
+ }),
525
525
  };
526
526
 
527
527
  type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
@@ -530,45 +530,45 @@ type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
530
530
 
531
531
  exports[`@atlaskit/design-system-explorations text styles are generated correctly 1`] = `
532
532
  "const textColorMap = {
533
- 'color.text': css({
534
- color: token('color.text', '#172B4D'),
535
- }),
536
- disabled: css({
537
- color: token('color.text.disabled', '#A5ADBA'),
538
- }),
539
- inverse: css({
540
- color: token('color.text.inverse', '#FFFFFF'),
541
- }),
542
- selected: css({
543
- color: token('color.text.selected', '#0052CC'),
544
- }),
545
- brand: css({
546
- color: token('color.text.brand', '#0065FF'),
547
- }),
548
- danger: css({
549
- color: token('color.text.danger', '#DE350B'),
550
- }),
551
- warning: css({
552
- color: token('color.text.warning', '#974F0C'),
553
- }),
554
- 'warning.inverse': css({
555
- color: token('color.text.warning.inverse', '#172B4D'),
556
- }),
557
- success: css({
558
- color: token('color.text.success', '#006644'),
559
- }),
560
- discovery: css({
561
- color: token('color.text.discovery', '#403294'),
562
- }),
563
- information: css({
564
- color: token('color.text.information', '#0052CC'),
565
- }),
566
- subtlest: css({
567
- color: token('color.text.subtlest', '#7A869A'),
568
- }),
569
- subtle: css({
570
- color: token('color.text.subtle', '#42526E'),
571
- }),
533
+ 'color.text': css({
534
+ color: token('color.text', '#172B4D'),
535
+ }),
536
+ disabled: css({
537
+ color: token('color.text.disabled', '#A5ADBA'),
538
+ }),
539
+ inverse: css({
540
+ color: token('color.text.inverse', '#FFFFFF'),
541
+ }),
542
+ selected: css({
543
+ color: token('color.text.selected', '#0052CC'),
544
+ }),
545
+ brand: css({
546
+ color: token('color.text.brand', '#0065FF'),
547
+ }),
548
+ danger: css({
549
+ color: token('color.text.danger', '#DE350B'),
550
+ }),
551
+ warning: css({
552
+ color: token('color.text.warning', '#974F0C'),
553
+ }),
554
+ 'warning.inverse': css({
555
+ color: token('color.text.warning.inverse', '#172B4D'),
556
+ }),
557
+ success: css({
558
+ color: token('color.text.success', '#006644'),
559
+ }),
560
+ discovery: css({
561
+ color: token('color.text.discovery', '#403294'),
562
+ }),
563
+ information: css({
564
+ color: token('color.text.information', '#0052CC'),
565
+ }),
566
+ subtlest: css({
567
+ color: token('color.text.subtlest', '#7A869A'),
568
+ }),
569
+ subtle: css({
570
+ color: token('color.text.subtle', '#42526E'),
571
+ }),
572
572
  } as const;
573
573
 
574
574
  export type TextColor = keyof typeof textColorMap;