@atlaskit/tokens 0.6.1 → 0.6.2

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 (76) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/css/atlassian-dark.css +14 -7
  3. package/css/atlassian-light.css +14 -7
  4. package/dist/cjs/artifacts/rename-mapping.js +23 -19
  5. package/dist/cjs/artifacts/token-default-values.js +14 -7
  6. package/dist/cjs/artifacts/token-names.js +14 -7
  7. package/dist/cjs/artifacts/tokens-raw/atlassian-dark.js +252 -117
  8. package/dist/cjs/artifacts/tokens-raw/atlassian-light.js +252 -117
  9. package/dist/cjs/get-token.js +1 -1
  10. package/dist/cjs/tokens/atlassian-dark/color/background.js +16 -3
  11. package/dist/cjs/tokens/atlassian-dark/color/border.js +3 -0
  12. package/dist/cjs/tokens/atlassian-dark/color/icon.js +3 -0
  13. package/dist/cjs/tokens/atlassian-dark/color/text.js +3 -0
  14. package/dist/cjs/tokens/atlassian-dark/deprecated/deprecated.js +13 -6
  15. package/dist/cjs/tokens/atlassian-light/color/background.js +13 -0
  16. package/dist/cjs/tokens/atlassian-light/color/border.js +3 -0
  17. package/dist/cjs/tokens/atlassian-light/color/icon.js +3 -0
  18. package/dist/cjs/tokens/atlassian-light/color/text.js +3 -0
  19. package/dist/cjs/tokens/atlassian-light/deprecated/deprecated.js +13 -6
  20. package/dist/cjs/tokens/default/color/background.js +30 -5
  21. package/dist/cjs/tokens/default/color/border.js +7 -0
  22. package/dist/cjs/tokens/default/color/icon.js +7 -0
  23. package/dist/cjs/tokens/default/color/text.js +7 -0
  24. package/dist/cjs/tokens/default/deprecated/deprecated.js +33 -21
  25. package/dist/cjs/version.json +1 -1
  26. package/dist/es2019/artifacts/rename-mapping.js +23 -19
  27. package/dist/es2019/artifacts/token-default-values.js +14 -7
  28. package/dist/es2019/artifacts/token-names.js +14 -7
  29. package/dist/es2019/artifacts/tokens-raw/atlassian-dark.js +252 -117
  30. package/dist/es2019/artifacts/tokens-raw/atlassian-light.js +252 -117
  31. package/dist/es2019/get-token.js +1 -1
  32. package/dist/es2019/tokens/atlassian-dark/color/background.js +16 -3
  33. package/dist/es2019/tokens/atlassian-dark/color/border.js +3 -0
  34. package/dist/es2019/tokens/atlassian-dark/color/icon.js +3 -0
  35. package/dist/es2019/tokens/atlassian-dark/color/text.js +3 -0
  36. package/dist/es2019/tokens/atlassian-dark/deprecated/deprecated.js +13 -6
  37. package/dist/es2019/tokens/atlassian-light/color/background.js +13 -0
  38. package/dist/es2019/tokens/atlassian-light/color/border.js +3 -0
  39. package/dist/es2019/tokens/atlassian-light/color/icon.js +3 -0
  40. package/dist/es2019/tokens/atlassian-light/color/text.js +3 -0
  41. package/dist/es2019/tokens/atlassian-light/deprecated/deprecated.js +13 -6
  42. package/dist/es2019/tokens/default/color/background.js +30 -5
  43. package/dist/es2019/tokens/default/color/border.js +7 -0
  44. package/dist/es2019/tokens/default/color/icon.js +7 -0
  45. package/dist/es2019/tokens/default/color/text.js +7 -0
  46. package/dist/es2019/tokens/default/deprecated/deprecated.js +33 -21
  47. package/dist/es2019/version.json +1 -1
  48. package/dist/esm/artifacts/rename-mapping.js +23 -19
  49. package/dist/esm/artifacts/token-default-values.js +14 -7
  50. package/dist/esm/artifacts/token-names.js +14 -7
  51. package/dist/esm/artifacts/tokens-raw/atlassian-dark.js +252 -117
  52. package/dist/esm/artifacts/tokens-raw/atlassian-light.js +252 -117
  53. package/dist/esm/get-token.js +1 -1
  54. package/dist/esm/tokens/atlassian-dark/color/background.js +16 -3
  55. package/dist/esm/tokens/atlassian-dark/color/border.js +3 -0
  56. package/dist/esm/tokens/atlassian-dark/color/icon.js +3 -0
  57. package/dist/esm/tokens/atlassian-dark/color/text.js +3 -0
  58. package/dist/esm/tokens/atlassian-dark/deprecated/deprecated.js +13 -6
  59. package/dist/esm/tokens/atlassian-light/color/background.js +13 -0
  60. package/dist/esm/tokens/atlassian-light/color/border.js +3 -0
  61. package/dist/esm/tokens/atlassian-light/color/icon.js +3 -0
  62. package/dist/esm/tokens/atlassian-light/color/text.js +3 -0
  63. package/dist/esm/tokens/atlassian-light/deprecated/deprecated.js +13 -6
  64. package/dist/esm/tokens/default/color/background.js +30 -5
  65. package/dist/esm/tokens/default/color/border.js +7 -0
  66. package/dist/esm/tokens/default/color/icon.js +7 -0
  67. package/dist/esm/tokens/default/color/text.js +7 -0
  68. package/dist/esm/tokens/default/deprecated/deprecated.js +33 -21
  69. package/dist/esm/version.json +1 -1
  70. package/dist/types/artifacts/token-default-values.d.ts +14 -7
  71. package/dist/types/artifacts/token-names.d.ts +28 -14
  72. package/dist/types/artifacts/types-internal.d.ts +1 -1
  73. package/dist/types/artifacts/types.d.ts +1 -1
  74. package/dist/types/tokens/default/utility/utility.d.ts +10 -10
  75. package/dist/types/types.d.ts +17 -2
  76. package/package.json +1 -1
@@ -59,6 +59,19 @@ var color = {
59
59
  }
60
60
  },
61
61
  brand: {
62
+ bold: {
63
+ '[default]': {
64
+ value: 'B700'
65
+ },
66
+ hovered: {
67
+ value: 'B800'
68
+ },
69
+ pressed: {
70
+ value: 'B900'
71
+ }
72
+ }
73
+ },
74
+ selected: {
62
75
  '[default]': {
63
76
  '[default]': {
64
77
  value: 'B100'
@@ -16,6 +16,9 @@ var color = {
16
16
  brand: {
17
17
  value: 'B700'
18
18
  },
19
+ selected: {
20
+ value: 'B700'
21
+ },
19
22
  danger: {
20
23
  value: 'R600'
21
24
  },
@@ -16,6 +16,9 @@ var color = {
16
16
  brand: {
17
17
  value: 'B700'
18
18
  },
19
+ selected: {
20
+ value: 'B700'
21
+ },
19
22
  danger: {
20
23
  value: 'R600'
21
24
  },
@@ -19,6 +19,9 @@ var color = {
19
19
  brand: {
20
20
  value: 'B700'
21
21
  },
22
+ selected: {
23
+ value: 'B700'
24
+ },
22
25
  danger: {
23
26
  value: 'R800'
24
27
  },
@@ -45,6 +45,19 @@ var color = {
45
45
  blanket: {
46
46
  value: 'N500A'
47
47
  },
48
+ brand: {
49
+ '[default]': {
50
+ '[default]': {
51
+ value: 'B100'
52
+ },
53
+ hovered: {
54
+ value: 'B200'
55
+ },
56
+ pressed: {
57
+ value: 'B300'
58
+ }
59
+ }
60
+ },
48
61
  boldBrand: {
49
62
  resting: {
50
63
  value: 'B700'
@@ -126,9 +139,6 @@ var color = {
126
139
  },
127
140
  hover: {
128
141
  value: 'B200'
129
- },
130
- pressed: {
131
- value: 'B300'
132
142
  }
133
143
  },
134
144
  subtleBorderedNeutral: {
@@ -240,9 +250,6 @@ var color = {
240
250
  },
241
251
  onBoldWarning: {
242
252
  value: 'N1000'
243
- },
244
- selected: {
245
- value: 'B700'
246
253
  }
247
254
  },
248
255
  border: {
@@ -117,6 +117,31 @@ var color = {
117
117
  }
118
118
  },
119
119
  brand: {
120
+ bold: {
121
+ '[default]': {
122
+ attributes: {
123
+ group: 'paint',
124
+ state: 'active',
125
+ description: 'Use for the background of elements used to reinforce our brand, but with more emphasis.'
126
+ }
127
+ },
128
+ hovered: {
129
+ attributes: {
130
+ group: 'paint',
131
+ state: 'active',
132
+ description: 'Hovered state of color.background.brand.bold'
133
+ }
134
+ },
135
+ pressed: {
136
+ attributes: {
137
+ group: 'paint',
138
+ state: 'active',
139
+ description: 'Pressed state of color.background.brand.bold'
140
+ }
141
+ }
142
+ }
143
+ },
144
+ selected: {
120
145
  '[default]': {
121
146
  '[default]': {
122
147
  attributes: {
@@ -129,14 +154,14 @@ var color = {
129
154
  attributes: {
130
155
  group: 'paint',
131
156
  state: 'active',
132
- description: 'Hovered state for color.background.brand'
157
+ description: 'Hovered state for color.background.selected'
133
158
  }
134
159
  },
135
160
  pressed: {
136
161
  attributes: {
137
162
  group: 'paint',
138
163
  state: 'active',
139
- description: 'Pressed state for color.background.brand'
164
+ description: 'Pressed state for color.background.selected'
140
165
  }
141
166
  }
142
167
  },
@@ -145,21 +170,21 @@ var color = {
145
170
  attributes: {
146
171
  group: 'paint',
147
172
  state: 'active',
148
- description: 'Use for the backgrounds of primary buttons or elements in a selected state, such as checkboxed and radio buttons.'
173
+ description: 'Use for the backgrounds of elements in a selected state, such as checkboxed and radio buttons.'
149
174
  }
150
175
  },
151
176
  hovered: {
152
177
  attributes: {
153
178
  group: 'paint',
154
179
  state: 'active',
155
- description: 'Hovered state of color.background.brand.bold'
180
+ description: 'Hovered state of color.background.selected.bold'
156
181
  }
157
182
  },
158
183
  pressed: {
159
184
  attributes: {
160
185
  group: 'paint',
161
186
  state: 'active',
162
- description: 'Pressed state of color.background.brand.bold'
187
+ description: 'Pressed state of color.background.selected.bold'
163
188
  }
164
189
  }
165
190
  }
@@ -30,6 +30,13 @@ var color = {
30
30
  }
31
31
  },
32
32
  brand: {
33
+ attributes: {
34
+ group: 'paint',
35
+ state: 'active',
36
+ description: 'Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons.'
37
+ }
38
+ },
39
+ selected: {
33
40
  attributes: {
34
41
  group: 'paint',
35
42
  state: 'active',
@@ -30,6 +30,13 @@ var color = {
30
30
  }
31
31
  },
32
32
  brand: {
33
+ attributes: {
34
+ group: 'paint',
35
+ state: 'active',
36
+ description: 'Use for icons that reinforce our brand.'
37
+ }
38
+ },
39
+ selected: {
33
40
  attributes: {
34
41
  group: 'paint',
35
42
  state: 'active',
@@ -37,6 +37,13 @@ var color = {
37
37
  }
38
38
  },
39
39
  brand: {
40
+ attributes: {
41
+ group: 'paint',
42
+ state: 'active',
43
+ description: 'Use for text that reinforces our brand.'
44
+ }
45
+ },
46
+ selected: {
40
47
  attributes: {
41
48
  group: 'paint',
42
49
  state: 'active',
@@ -115,6 +115,34 @@ var color = {
115
115
  description: 'Use for the screen overlay that appears with modal dialogs'
116
116
  }
117
117
  },
118
+ brand: {
119
+ '[default]': {
120
+ '[default]': {
121
+ attributes: {
122
+ group: 'paint',
123
+ state: 'deprecated',
124
+ replacement: 'color.background.selected.[default].[default]',
125
+ description: 'Use for the background of elements used to reinforce our brand.'
126
+ }
127
+ },
128
+ hovered: {
129
+ attributes: {
130
+ group: 'paint',
131
+ state: 'deprecated',
132
+ replacement: 'color.background.selected.[default].hovered',
133
+ description: 'Hovered state for color.background.brand'
134
+ }
135
+ },
136
+ pressed: {
137
+ attributes: {
138
+ group: 'paint',
139
+ state: 'deprecated',
140
+ replacement: 'color.background.selected.[default].pressed',
141
+ description: 'Pressed state for color.background.brand'
142
+ }
143
+ }
144
+ }
145
+ },
118
146
  boldBrand: {
119
147
  hover: {
120
148
  attributes: {
@@ -300,7 +328,7 @@ var color = {
300
328
  attributes: {
301
329
  group: 'paint',
302
330
  state: 'deprecated',
303
- replacement: 'color.background.brand.[default].[default]',
331
+ replacement: 'color.background.selected.[default].[default]',
304
332
  description: 'Use for backgrounds of elements in a selected state'
305
333
  }
306
334
  },
@@ -308,17 +336,9 @@ var color = {
308
336
  attributes: {
309
337
  group: 'paint',
310
338
  state: 'deprecated',
311
- replacement: 'color.background.brand.[default].hovered',
339
+ replacement: 'color.background.selected.[default].hovered',
312
340
  description: 'Hover state for color.background.selected'
313
341
  }
314
- },
315
- pressed: {
316
- attributes: {
317
- group: 'paint',
318
- state: 'deprecated',
319
- replacement: 'color.background.brand.[default].pressed',
320
- description: 'Pressed state for color.background.selected'
321
- }
322
342
  }
323
343
  },
324
344
  subtleBorderedNeutral: {
@@ -344,7 +364,7 @@ var color = {
344
364
  attributes: {
345
365
  group: 'paint',
346
366
  state: 'deprecated',
347
- replacement: 'color.background.brand.[default].hovered',
367
+ replacement: 'color.background.selected.[default].hovered',
348
368
  description: 'Hover state for background.subtleBrand'
349
369
  }
350
370
  },
@@ -352,7 +372,7 @@ var color = {
352
372
  attributes: {
353
373
  group: 'paint',
354
374
  state: 'deprecated',
355
- replacement: 'color.background.brand.[default].pressed',
375
+ replacement: 'color.background.selected.[default].pressed',
356
376
  description: 'Pressed state for background.subtleBrand'
357
377
  }
358
378
  },
@@ -360,7 +380,7 @@ var color = {
360
380
  attributes: {
361
381
  group: 'paint',
362
382
  state: 'deprecated',
363
- replacement: 'color.background.brand.[default].[default]',
383
+ replacement: 'color.background.selected.[default].[default]',
364
384
  description: 'Use for subdued backgrounds of UI elements like information section messages and in progress lozenges.'
365
385
  }
366
386
  }
@@ -580,14 +600,6 @@ var color = {
580
600
  replacement: 'color.text.warning.inverse',
581
601
  description: 'Use for text and icons when on bold warning backgrounds'
582
602
  }
583
- },
584
- selected: {
585
- attributes: {
586
- group: 'paint',
587
- state: 'deprecated',
588
- replacement: 'color.text.brand',
589
- description: 'Use for text, icons, borders, or other visual indicators in selected states'
590
- }
591
603
  }
592
604
  },
593
605
  border: {
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.6.1",
3
+ "version": "0.6.2",
4
4
  "sideEffects": false
5
5
  }
@@ -16,6 +16,7 @@ declare const defaultTokenValues: {
16
16
  readonly 'color.text.disabled': "#8993A5";
17
17
  readonly 'color.text.inverse': "#FFFFFF";
18
18
  readonly 'color.text.brand': "#0C66E4";
19
+ readonly 'color.text.selected': "#0C66E4";
19
20
  readonly 'color.text.danger': "#AE2A19";
20
21
  readonly 'color.text.warning': "#974F0C";
21
22
  readonly 'color.text.warning.inverse': "#172B4D";
@@ -29,7 +30,6 @@ declare const defaultTokenValues: {
29
30
  readonly 'color.text.mediumEmphasis': "#44546F";
30
31
  readonly 'color.text.onBold': "#FFFFFF";
31
32
  readonly 'color.text.onBoldWarning': "#172B4D";
32
- readonly 'color.text.selected': "#0C66E4";
33
33
  readonly 'color.icon.accent.blue': "#1D7AFC";
34
34
  readonly 'color.icon.accent.red': "#E34935";
35
35
  readonly 'color.icon.accent.orange': "#D97008";
@@ -43,6 +43,7 @@ declare const defaultTokenValues: {
43
43
  readonly 'color.icon.inverse': "#FFFFFF";
44
44
  readonly 'color.icon.disabled': "#8993A5";
45
45
  readonly 'color.icon.brand': "#0C66E4";
46
+ readonly 'color.icon.selected': "#0C66E4";
46
47
  readonly 'color.icon.danger': "#E34935";
47
48
  readonly 'color.icon.warning': "#D97008";
48
49
  readonly 'color.icon.warning.inverse': "#172B4D";
@@ -62,6 +63,7 @@ declare const defaultTokenValues: {
62
63
  readonly 'color.border.input': "#091E4224";
63
64
  readonly 'color.border.disabled': "#091E420F";
64
65
  readonly 'color.border.brand': "#0C66E4";
66
+ readonly 'color.border.selected': "#0C66E4";
65
67
  readonly 'color.border.danger': "#E34935";
66
68
  readonly 'color.border.warning': "#D97008";
67
69
  readonly 'color.border.success': "#22A06B";
@@ -99,12 +101,20 @@ declare const defaultTokenValues: {
99
101
  readonly 'color.background.neutral.bold': "#44546F";
100
102
  readonly 'color.background.neutral.bold.hovered': "#2C3E5D";
101
103
  readonly 'color.background.neutral.bold.pressed': "#172B4D";
102
- readonly 'color.background.brand': "#E9F2FF";
103
- readonly 'color.background.brand.hovered': "#CCE0FF";
104
- readonly 'color.background.brand.pressed': "#85B8FF";
105
104
  readonly 'color.background.brand.bold': "#0C66E4";
106
105
  readonly 'color.background.brand.bold.hovered': "#0055CC";
107
106
  readonly 'color.background.brand.bold.pressed': "#09326C";
107
+ readonly 'color.background.brand': "#E9F2FF";
108
+ readonly 'color.background.brand.hovered': "#CCE0FF";
109
+ readonly 'color.background.brand.pressed': "#85B8FF";
110
+ readonly 'color.background.selected': "#E9F2FF";
111
+ readonly 'color.background.selected.hovered': "#CCE0FF";
112
+ readonly 'color.background.selected.pressed': "#85B8FF";
113
+ readonly 'color.background.selected.bold': "#0C66E4";
114
+ readonly 'color.background.selected.bold.hovered': "#0055CC";
115
+ readonly 'color.background.selected.bold.pressed': "#09326C";
116
+ readonly 'color.background.selected.resting': "#E9F2FF";
117
+ readonly 'color.background.selected.hover': "#CCE0FF";
108
118
  readonly 'color.background.danger': "#FFEDEB";
109
119
  readonly 'color.background.danger.hovered': "#FFD2CC";
110
120
  readonly 'color.background.danger.pressed': "#FF9C8F";
@@ -157,9 +167,6 @@ declare const defaultTokenValues: {
157
167
  readonly 'color.background.card': "#FFFFFF";
158
168
  readonly 'color.background.default': "#FFFFFF";
159
169
  readonly 'color.background.overlay': "#FFFFFF";
160
- readonly 'color.background.selected.resting': "#E9F2FF";
161
- readonly 'color.background.selected.hover': "#CCE0FF";
162
- readonly 'color.background.selected.pressed': "#85B8FF";
163
170
  readonly 'color.background.subtleBorderedNeutral.pressed': "#091E420F";
164
171
  readonly 'color.background.subtleBorderedNeutral.resting': "#091E4208";
165
172
  readonly 'color.background.subtleBrand.hover': "#CCE0FF";
@@ -13,6 +13,7 @@ declare const tokens: {
13
13
  readonly 'color.text.disabled': "--ds-text-disabled";
14
14
  readonly 'color.text.inverse': "--ds-text-inverse";
15
15
  readonly 'color.text.brand': "--ds-text-brand";
16
+ readonly 'color.text.selected': "--ds-text-selected";
16
17
  readonly 'color.text.danger': "--ds-text-danger";
17
18
  readonly 'color.text.warning': "--ds-text-warning";
18
19
  readonly 'color.text.warning.inverse': "--ds-text-warning-inverse";
@@ -26,7 +27,6 @@ declare const tokens: {
26
27
  readonly 'color.text.mediumEmphasis': "--ds-text-mediumEmphasis";
27
28
  readonly 'color.text.onBold': "--ds-text-onBold";
28
29
  readonly 'color.text.onBoldWarning': "--ds-text-onBoldWarning";
29
- readonly 'color.text.selected': "--ds-text-selected";
30
30
  readonly 'color.icon.accent.blue': "--ds-icon-accent-blue";
31
31
  readonly 'color.icon.accent.red': "--ds-icon-accent-red";
32
32
  readonly 'color.icon.accent.orange': "--ds-icon-accent-orange";
@@ -40,6 +40,7 @@ declare const tokens: {
40
40
  readonly 'color.icon.inverse': "--ds-icon-inverse";
41
41
  readonly 'color.icon.disabled': "--ds-icon-disabled";
42
42
  readonly 'color.icon.brand': "--ds-icon-brand";
43
+ readonly 'color.icon.selected': "--ds-icon-selected";
43
44
  readonly 'color.icon.danger': "--ds-icon-danger";
44
45
  readonly 'color.icon.warning': "--ds-icon-warning";
45
46
  readonly 'color.icon.warning.inverse': "--ds-icon-warning-inverse";
@@ -59,6 +60,7 @@ declare const tokens: {
59
60
  readonly 'color.border.input': "--ds-border-input";
60
61
  readonly 'color.border.disabled': "--ds-border-disabled";
61
62
  readonly 'color.border.brand': "--ds-border-brand";
63
+ readonly 'color.border.selected': "--ds-border-selected";
62
64
  readonly 'color.border.danger': "--ds-border-danger";
63
65
  readonly 'color.border.warning': "--ds-border-warning";
64
66
  readonly 'color.border.success': "--ds-border-success";
@@ -96,12 +98,20 @@ declare const tokens: {
96
98
  readonly 'color.background.neutral.bold': "--ds-background-neutral-bold";
97
99
  readonly 'color.background.neutral.bold.hovered': "--ds-background-neutral-bold-hovered";
98
100
  readonly 'color.background.neutral.bold.pressed': "--ds-background-neutral-bold-pressed";
99
- readonly 'color.background.brand': "--ds-background-brand";
100
- readonly 'color.background.brand.hovered': "--ds-background-brand-hovered";
101
- readonly 'color.background.brand.pressed': "--ds-background-brand-pressed";
102
101
  readonly 'color.background.brand.bold': "--ds-background-brand-bold";
103
102
  readonly 'color.background.brand.bold.hovered': "--ds-background-brand-bold-hovered";
104
103
  readonly 'color.background.brand.bold.pressed': "--ds-background-brand-bold-pressed";
104
+ readonly 'color.background.brand': "--ds-background-brand";
105
+ readonly 'color.background.brand.hovered': "--ds-background-brand-hovered";
106
+ readonly 'color.background.brand.pressed': "--ds-background-brand-pressed";
107
+ readonly 'color.background.selected': "--ds-background-selected";
108
+ readonly 'color.background.selected.hovered': "--ds-background-selected-hovered";
109
+ readonly 'color.background.selected.pressed': "--ds-background-selected-pressed";
110
+ readonly 'color.background.selected.bold': "--ds-background-selected-bold";
111
+ readonly 'color.background.selected.bold.hovered': "--ds-background-selected-bold-hovered";
112
+ readonly 'color.background.selected.bold.pressed': "--ds-background-selected-bold-pressed";
113
+ readonly 'color.background.selected.resting': "--ds-background-selected-resting";
114
+ readonly 'color.background.selected.hover': "--ds-background-selected-hover";
105
115
  readonly 'color.background.danger': "--ds-background-danger";
106
116
  readonly 'color.background.danger.hovered': "--ds-background-danger-hovered";
107
117
  readonly 'color.background.danger.pressed': "--ds-background-danger-pressed";
@@ -154,9 +164,6 @@ declare const tokens: {
154
164
  readonly 'color.background.card': "--ds-background-card";
155
165
  readonly 'color.background.default': "--ds-background-default";
156
166
  readonly 'color.background.overlay': "--ds-background-overlay";
157
- readonly 'color.background.selected.resting': "--ds-background-selected-resting";
158
- readonly 'color.background.selected.hover': "--ds-background-selected-hover";
159
- readonly 'color.background.selected.pressed': "--ds-background-selected-pressed";
160
167
  readonly 'color.background.subtleBorderedNeutral.pressed': "--ds-background-subtleBorderedNeutral-pressed";
161
168
  readonly 'color.background.subtleBorderedNeutral.resting': "--ds-background-subtleBorderedNeutral-resting";
162
169
  readonly 'color.background.subtleBrand.hover': "--ds-background-subtleBrand-hover";
@@ -233,6 +240,7 @@ export declare type CSSTokenMap = {
233
240
  'color.text.disabled': 'var(--ds-text-disabled)';
234
241
  'color.text.inverse': 'var(--ds-text-inverse)';
235
242
  'color.text.brand': 'var(--ds-text-brand)';
243
+ 'color.text.selected': 'var(--ds-text-selected)';
236
244
  'color.text.danger': 'var(--ds-text-danger)';
237
245
  'color.text.warning': 'var(--ds-text-warning)';
238
246
  'color.text.warning.inverse': 'var(--ds-text-warning-inverse)';
@@ -246,7 +254,6 @@ export declare type CSSTokenMap = {
246
254
  'color.text.mediumEmphasis': 'var(--ds-text-mediumEmphasis)';
247
255
  'color.text.onBold': 'var(--ds-text-onBold)';
248
256
  'color.text.onBoldWarning': 'var(--ds-text-onBoldWarning)';
249
- 'color.text.selected': 'var(--ds-text-selected)';
250
257
  'color.icon.accent.blue': 'var(--ds-icon-accent-blue)';
251
258
  'color.icon.accent.red': 'var(--ds-icon-accent-red)';
252
259
  'color.icon.accent.orange': 'var(--ds-icon-accent-orange)';
@@ -260,6 +267,7 @@ export declare type CSSTokenMap = {
260
267
  'color.icon.inverse': 'var(--ds-icon-inverse)';
261
268
  'color.icon.disabled': 'var(--ds-icon-disabled)';
262
269
  'color.icon.brand': 'var(--ds-icon-brand)';
270
+ 'color.icon.selected': 'var(--ds-icon-selected)';
263
271
  'color.icon.danger': 'var(--ds-icon-danger)';
264
272
  'color.icon.warning': 'var(--ds-icon-warning)';
265
273
  'color.icon.warning.inverse': 'var(--ds-icon-warning-inverse)';
@@ -279,6 +287,7 @@ export declare type CSSTokenMap = {
279
287
  'color.border.input': 'var(--ds-border-input)';
280
288
  'color.border.disabled': 'var(--ds-border-disabled)';
281
289
  'color.border.brand': 'var(--ds-border-brand)';
290
+ 'color.border.selected': 'var(--ds-border-selected)';
282
291
  'color.border.danger': 'var(--ds-border-danger)';
283
292
  'color.border.warning': 'var(--ds-border-warning)';
284
293
  'color.border.success': 'var(--ds-border-success)';
@@ -316,12 +325,20 @@ export declare type CSSTokenMap = {
316
325
  'color.background.neutral.bold': 'var(--ds-background-neutral-bold)';
317
326
  'color.background.neutral.bold.hovered': 'var(--ds-background-neutral-bold-hovered)';
318
327
  'color.background.neutral.bold.pressed': 'var(--ds-background-neutral-bold-pressed)';
319
- 'color.background.brand': 'var(--ds-background-brand)';
320
- 'color.background.brand.hovered': 'var(--ds-background-brand-hovered)';
321
- 'color.background.brand.pressed': 'var(--ds-background-brand-pressed)';
322
328
  'color.background.brand.bold': 'var(--ds-background-brand-bold)';
323
329
  'color.background.brand.bold.hovered': 'var(--ds-background-brand-bold-hovered)';
324
330
  'color.background.brand.bold.pressed': 'var(--ds-background-brand-bold-pressed)';
331
+ 'color.background.brand': 'var(--ds-background-brand)';
332
+ 'color.background.brand.hovered': 'var(--ds-background-brand-hovered)';
333
+ 'color.background.brand.pressed': 'var(--ds-background-brand-pressed)';
334
+ 'color.background.selected': 'var(--ds-background-selected)';
335
+ 'color.background.selected.hovered': 'var(--ds-background-selected-hovered)';
336
+ 'color.background.selected.pressed': 'var(--ds-background-selected-pressed)';
337
+ 'color.background.selected.bold': 'var(--ds-background-selected-bold)';
338
+ 'color.background.selected.bold.hovered': 'var(--ds-background-selected-bold-hovered)';
339
+ 'color.background.selected.bold.pressed': 'var(--ds-background-selected-bold-pressed)';
340
+ 'color.background.selected.resting': 'var(--ds-background-selected-resting)';
341
+ 'color.background.selected.hover': 'var(--ds-background-selected-hover)';
325
342
  'color.background.danger': 'var(--ds-background-danger)';
326
343
  'color.background.danger.hovered': 'var(--ds-background-danger-hovered)';
327
344
  'color.background.danger.pressed': 'var(--ds-background-danger-pressed)';
@@ -374,9 +391,6 @@ export declare type CSSTokenMap = {
374
391
  'color.background.card': 'var(--ds-background-card)';
375
392
  'color.background.default': 'var(--ds-background-default)';
376
393
  'color.background.overlay': 'var(--ds-background-overlay)';
377
- 'color.background.selected.resting': 'var(--ds-background-selected-resting)';
378
- 'color.background.selected.hover': 'var(--ds-background-selected-hover)';
379
- 'color.background.selected.pressed': 'var(--ds-background-selected-pressed)';
380
394
  'color.background.subtleBorderedNeutral.pressed': 'var(--ds-background-subtleBorderedNeutral-pressed)';
381
395
  'color.background.subtleBorderedNeutral.resting': 'var(--ds-background-subtleBorderedNeutral-resting)';
382
396
  'color.background.subtleBrand.hover': 'var(--ds-background-subtleBrand-hover)';
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Internally types used for handling token ids
3
3
  */
4
- export declare type InternalTokenIds = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.[default]' | 'color.background.accent.blue.bold' | 'color.background.accent.red.[default]' | 'color.background.accent.red.bold' | 'color.background.accent.orange.[default]' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow.[default]' | 'color.background.accent.yellow.bold' | 'color.background.accent.green.[default]' | 'color.background.accent.green.bold' | 'color.background.accent.teal.[default]' | 'color.background.accent.teal.bold' | 'color.background.accent.purple.[default]' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta.[default]' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.[default].[default]' | 'color.background.brand.[default].hovered' | 'color.background.brand.[default].pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
4
+ export declare type InternalTokenIds = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text.[default]' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning.[default]' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon.[default]' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning.[default]' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border.[default]' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue.[default]' | 'color.background.accent.blue.bold' | 'color.background.accent.red.[default]' | 'color.background.accent.red.bold' | 'color.background.accent.orange.[default]' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow.[default]' | 'color.background.accent.yellow.bold' | 'color.background.accent.green.[default]' | 'color.background.accent.green.bold' | 'color.background.accent.teal.[default]' | 'color.background.accent.teal.bold' | 'color.background.accent.purple.[default]' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta.[default]' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input.[default]' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral.[default].[default]' | 'color.background.neutral.[default].hovered' | 'color.background.neutral.[default].pressed' | 'color.background.neutral.subtle.[default]' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold.[default]' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold.[default]' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected.[default].[default]' | 'color.background.selected.[default].hovered' | 'color.background.selected.[default].pressed' | 'color.background.selected.bold.[default]' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger.[default].[default]' | 'color.background.danger.[default].hovered' | 'color.background.danger.[default].pressed' | 'color.background.danger.bold.[default]' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning.[default].[default]' | 'color.background.warning.[default].hovered' | 'color.background.warning.[default].pressed' | 'color.background.warning.bold.[default]' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success.[default].[default]' | 'color.background.success.[default].hovered' | 'color.background.success.[default].pressed' | 'color.background.success.bold.[default]' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery.[default].[default]' | 'color.background.discovery.[default].hovered' | 'color.background.discovery.[default].pressed' | 'color.background.discovery.bold.[default]' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information.[default].[default]' | 'color.background.information.[default].hovered' | 'color.background.information.[default].pressed' | 'color.background.information.bold.[default]' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link.[default]' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface.[default]' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Type representing the currently active tokens
3
3
  */
4
- export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue' | 'color.background.accent.blue.bold' | 'color.background.accent.red' | 'color.background.accent.red.bold' | 'color.background.accent.orange' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow' | 'color.background.accent.yellow.bold' | 'color.background.accent.green' | 'color.background.accent.green.bold' | 'color.background.accent.teal' | 'color.background.accent.teal.bold' | 'color.background.accent.purple' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand' | 'color.background.brand.hovered' | 'color.background.brand.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';
4
+ export declare type ActiveTokens = 'color.text.accent.blue' | 'color.text.accent.red' | 'color.text.accent.orange' | 'color.text.accent.yellow' | 'color.text.accent.green' | 'color.text.accent.purple' | 'color.text.accent.teal' | 'color.text.accent.magenta' | 'color.text' | 'color.text.subtle' | 'color.text.subtlest' | 'color.text.disabled' | 'color.text.inverse' | 'color.text.brand' | 'color.text.selected' | 'color.text.danger' | 'color.text.warning' | 'color.text.warning.inverse' | 'color.text.success' | 'color.text.discovery' | 'color.text.information' | 'color.icon.accent.blue' | 'color.icon.accent.red' | 'color.icon.accent.orange' | 'color.icon.accent.yellow' | 'color.icon.accent.green' | 'color.icon.accent.purple' | 'color.icon.accent.teal' | 'color.icon.accent.magenta' | 'color.icon' | 'color.icon.subtle' | 'color.icon.inverse' | 'color.icon.disabled' | 'color.icon.brand' | 'color.icon.selected' | 'color.icon.danger' | 'color.icon.warning' | 'color.icon.warning.inverse' | 'color.icon.success' | 'color.icon.discovery' | 'color.icon.information' | 'color.border.accent.blue' | 'color.border.accent.red' | 'color.border.accent.orange' | 'color.border.accent.yellow' | 'color.border.accent.green' | 'color.border.accent.purple' | 'color.border.accent.teal' | 'color.border.accent.magenta' | 'color.border' | 'color.border.focused' | 'color.border.input' | 'color.border.disabled' | 'color.border.brand' | 'color.border.selected' | 'color.border.danger' | 'color.border.warning' | 'color.border.success' | 'color.border.discovery' | 'color.border.information' | 'color.background.accent.blue' | 'color.background.accent.blue.bold' | 'color.background.accent.red' | 'color.background.accent.red.bold' | 'color.background.accent.orange' | 'color.background.accent.orange.bold' | 'color.background.accent.yellow' | 'color.background.accent.yellow.bold' | 'color.background.accent.green' | 'color.background.accent.green.bold' | 'color.background.accent.teal' | 'color.background.accent.teal.bold' | 'color.background.accent.purple' | 'color.background.accent.purple.bold' | 'color.background.accent.magenta' | 'color.background.accent.magenta.bold' | 'color.background.disabled' | 'color.background.inverse' | 'color.background.input' | 'color.background.input.hovered' | 'color.background.input.pressed' | 'color.background.neutral' | 'color.background.neutral.hovered' | 'color.background.neutral.pressed' | 'color.background.neutral.subtle' | 'color.background.neutral.subtle.hovered' | 'color.background.neutral.subtle.pressed' | 'color.background.neutral.bold' | 'color.background.neutral.bold.hovered' | 'color.background.neutral.bold.pressed' | 'color.background.brand.bold' | 'color.background.brand.bold.hovered' | 'color.background.brand.bold.pressed' | 'color.background.selected' | 'color.background.selected.hovered' | 'color.background.selected.pressed' | 'color.background.selected.bold' | 'color.background.selected.bold.hovered' | 'color.background.selected.bold.pressed' | 'color.background.danger' | 'color.background.danger.hovered' | 'color.background.danger.pressed' | 'color.background.danger.bold' | 'color.background.danger.bold.hovered' | 'color.background.danger.bold.pressed' | 'color.background.warning' | 'color.background.warning.hovered' | 'color.background.warning.pressed' | 'color.background.warning.bold' | 'color.background.warning.bold.hovered' | 'color.background.warning.bold.pressed' | 'color.background.success' | 'color.background.success.hovered' | 'color.background.success.pressed' | 'color.background.success.bold' | 'color.background.success.bold.hovered' | 'color.background.success.bold.pressed' | 'color.background.discovery' | 'color.background.discovery.hovered' | 'color.background.discovery.pressed' | 'color.background.discovery.bold' | 'color.background.discovery.bold.hovered' | 'color.background.discovery.bold.pressed' | 'color.background.information' | 'color.background.information.hovered' | 'color.background.information.pressed' | 'color.background.information.bold' | 'color.background.information.bold.hovered' | 'color.background.information.bold.pressed' | 'color.blanket' | 'color.interaction.hovered' | 'color.interaction.pressed' | 'color.interaction.inverse.hovered' | 'color.interaction.inverse.pressed' | 'color.link' | 'color.link.pressed' | 'elevation.shadow.raised' | 'elevation.shadow.overlay' | 'elevation.surface' | 'elevation.surface.sunken' | 'elevation.surface.raised' | 'elevation.surface.overlay' | 'utility.UNSAFE_util.transparent' | 'utility.UNSAFE_util.MISSING_TOKEN';