@amsterdam/design-system-tokens 0.13.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/CHANGELOG.md +89 -1
  2. package/README.md +27 -14
  3. package/build.js +42 -13
  4. package/dist/compact.css +18 -18
  5. package/dist/compact.d.ts +44 -38
  6. package/dist/compact.json +21 -15
  7. package/dist/compact.mjs +27 -18
  8. package/dist/compact.scss +18 -18
  9. package/dist/compact.theme.css +18 -18
  10. package/dist/index.css +789 -744
  11. package/dist/index.d.ts +1544 -1473
  12. package/dist/index.json +687 -616
  13. package/dist/index.mjs +900 -636
  14. package/dist/index.scss +789 -744
  15. package/dist/index.theme.css +789 -744
  16. package/package.json +4 -3
  17. package/src/brand/ams/aspect-ratio.tokens.json +12 -0
  18. package/src/brand/ams/border.tokens.json +3 -3
  19. package/src/brand/ams/color.tokens.json +34 -15
  20. package/src/brand/ams/cursor.tokens.json +8 -0
  21. package/src/brand/ams/space.compact.tokens.json +6 -15
  22. package/src/brand/ams/space.tokens.json +5 -14
  23. package/src/brand/ams/{text.compact.tokens.json → typography.compact.tokens.json} +14 -2
  24. package/src/brand/ams/typography.tokens.json +59 -0
  25. package/src/common/ams/links.tokens.json +32 -0
  26. package/src/components/ams/accordion.tokens.json +11 -12
  27. package/src/components/ams/action-group.tokens.json +1 -1
  28. package/src/components/ams/alert.tokens.json +26 -19
  29. package/src/components/ams/avatar.tokens.json +23 -53
  30. package/src/components/ams/badge.tokens.json +22 -48
  31. package/src/components/ams/blockquote.tokens.json +8 -6
  32. package/src/components/ams/breadcrumb.tokens.json +10 -10
  33. package/src/components/ams/button.tokens.json +31 -33
  34. package/src/components/ams/card.tokens.json +8 -8
  35. package/src/components/ams/character-count.tokens.json +6 -6
  36. package/src/components/ams/checkbox.tokens.json +31 -29
  37. package/src/components/ams/column.tokens.json +5 -6
  38. package/src/components/ams/date-input.tokens.json +18 -16
  39. package/src/components/ams/description-list.tokens.json +21 -10
  40. package/src/components/ams/dialog.tokens.json +19 -8
  41. package/src/components/ams/error-message.tokens.json +6 -5
  42. package/src/components/ams/field-set.tokens.json +8 -8
  43. package/src/components/ams/field.tokens.json +3 -3
  44. package/src/components/ams/figure.tokens.json +17 -0
  45. package/src/components/ams/file-input.tokens.json +29 -26
  46. package/src/components/ams/file-list.tokens.json +21 -0
  47. package/src/components/ams/footer.tokens.json +30 -0
  48. package/src/components/ams/grid.compact.tokens.json +1 -1
  49. package/src/components/ams/grid.tokens.json +12 -10
  50. package/src/components/ams/header.tokens.json +50 -4
  51. package/src/components/ams/heading.tokens.json +29 -29
  52. package/src/components/ams/hint.tokens.json +1 -1
  53. package/src/components/ams/icon-button.tokens.json +18 -16
  54. package/src/components/ams/icon.tokens.json +25 -12
  55. package/src/components/ams/image-slider.tokens.json +1 -1
  56. package/src/components/ams/image.tokens.json +7 -0
  57. package/src/components/ams/{form-error-list.tokens.json → invalid-form-alert.tokens.json} +1 -1
  58. package/src/components/ams/label.tokens.json +5 -5
  59. package/src/components/ams/link-list.tokens.json +22 -22
  60. package/src/components/ams/link.tokens.json +20 -31
  61. package/src/components/ams/logo.tokens.json +11 -4
  62. package/src/components/ams/mark.tokens.json +1 -1
  63. package/src/components/ams/mega-menu.tokens.json +3 -3
  64. package/src/components/ams/ordered-list.tokens.json +13 -11
  65. package/src/components/ams/page-heading.tokens.json +8 -6
  66. package/src/components/ams/page-menu.tokens.json +13 -13
  67. package/src/components/ams/pagination.tokens.json +13 -13
  68. package/src/components/ams/paragraph.tokens.json +12 -10
  69. package/src/components/ams/password-input.tokens.json +17 -16
  70. package/src/components/ams/radio.tokens.json +40 -25
  71. package/src/components/ams/row.tokens.json +5 -6
  72. package/src/components/ams/screen.tokens.json +1 -1
  73. package/src/components/ams/search-field.tokens.json +17 -28
  74. package/src/components/ams/select.tokens.json +17 -16
  75. package/src/components/ams/skip-link.tokens.json +9 -9
  76. package/src/components/ams/spotlight.tokens.json +10 -15
  77. package/src/components/ams/switch.tokens.json +7 -6
  78. package/src/components/ams/table-of-contents.tokens.json +17 -17
  79. package/src/components/ams/table.tokens.json +10 -10
  80. package/src/components/ams/tabs.tokens.json +16 -17
  81. package/src/components/ams/text-area.tokens.json +18 -18
  82. package/src/components/ams/text-input.tokens.json +17 -16
  83. package/src/components/ams/time-input.tokens.json +18 -16
  84. package/src/components/ams/top-task-link.tokens.json +16 -16
  85. package/src/components/ams/unordered-list.tokens.json +15 -13
  86. package/src/brand/ams/proportion.tokens.json +0 -12
  87. package/src/brand/ams/text.tokens.json +0 -41
  88. package/src/common/ams/action.tokens.json +0 -12
  89. package/src/common/ams/hyphenation.tokens.json +0 -9
  90. package/src/common/ams/link-appearance.tokens.json +0 -43
  91. package/src/components/ams/aspect-ratio.tokens.json +0 -12
  92. package/src/components/ams/breakout.tokens.json +0 -11
  93. package/src/components/ams/gap.tokens.json +0 -11
  94. package/src/components/ams/margin.tokens.json +0 -11
  95. /package/src/{common → brand}/ams/focus.tokens.json +0 -0
package/dist/index.d.ts CHANGED
@@ -15,1532 +15,1603 @@ declare interface DesignToken {
15
15
  }
16
16
 
17
17
  declare const tokens: {
18
- "ams": {
19
- "border": {
20
- "width": {
21
- "sm": DesignToken,
22
- "md": DesignToken,
23
- "lg": DesignToken,
24
- "xl": DesignToken
25
- }
26
- },
27
- "color": {
28
- "primary-black": DesignToken,
29
- "primary-white": DesignToken,
30
- "primary-blue": DesignToken,
31
- "primary-red": DesignToken,
32
- "dark-blue": DesignToken,
33
- "orange": DesignToken,
34
- "yellow": DesignToken,
35
- "green": DesignToken,
36
- "dark-green": DesignToken,
37
- "blue": DesignToken,
38
- "purple": DesignToken,
39
- "magenta": DesignToken,
40
- "neutral-grey1": DesignToken,
41
- "neutral-grey2": DesignToken,
42
- "neutral-grey3": DesignToken
43
- },
44
- "proportion": {
45
- "x-tall": DesignToken,
46
- "tall": DesignToken,
47
- "square": DesignToken,
48
- "wide": DesignToken,
49
- "x-wide": DesignToken,
50
- "2x-wide": DesignToken
51
- },
52
- "space": {
53
- "xs": DesignToken,
54
- "sm": DesignToken,
55
- "md": DesignToken,
56
- "lg": DesignToken,
57
- "xl": DesignToken,
58
- "grid": {
59
- "xs": DesignToken,
60
- "sm": DesignToken,
61
- "md": DesignToken,
62
- "lg": DesignToken,
63
- "xl": DesignToken
64
- }
65
- },
66
- "text": {
67
- "font-family": DesignToken,
68
- "font-weight": {
69
- "normal": DesignToken,
70
- "bold": DesignToken
71
- },
72
- "level": {
18
+ ams: {
19
+ "aspect-ratio": {
20
+ "9-16": DesignToken;
21
+ "3-4": DesignToken;
22
+ "1-1": DesignToken;
23
+ "4-3": DesignToken;
24
+ "16-9": DesignToken;
25
+ "16-5": DesignToken;
26
+ };
27
+ border: {
28
+ width: {
29
+ s: DesignToken;
30
+ m: DesignToken;
31
+ l: DesignToken;
32
+ xl: DesignToken;
33
+ };
34
+ };
35
+ color: {
36
+ background: DesignToken;
37
+ feedback: {
38
+ error: DesignToken;
39
+ info: DesignToken;
40
+ success: DesignToken;
41
+ warning: DesignToken;
42
+ };
43
+ highlight: {
44
+ azure: DesignToken;
45
+ green: DesignToken;
46
+ lime: DesignToken;
47
+ magenta: DesignToken;
48
+ orange: DesignToken;
49
+ purple: DesignToken;
50
+ yellow: DesignToken;
51
+ };
52
+ interactive: {
53
+ contrast: DesignToken;
54
+ default: DesignToken;
55
+ disabled: DesignToken;
56
+ hover: DesignToken;
57
+ invalid: {
58
+ default: DesignToken;
59
+ hover: DesignToken;
60
+ };
61
+ inverse: DesignToken;
62
+ secondary: DesignToken;
63
+ };
64
+ separator: DesignToken;
65
+ text: {
66
+ default: DesignToken;
67
+ inverse: DesignToken;
68
+ secondary: DesignToken;
69
+ };
70
+ };
71
+ cursor: {
72
+ disabled: DesignToken;
73
+ interactive: DesignToken;
74
+ };
75
+ focus: {
76
+ "outline-offset": DesignToken;
77
+ };
78
+ space: {
79
+ xs: DesignToken;
80
+ s: DesignToken;
81
+ m: DesignToken;
82
+ l: DesignToken;
83
+ xl: DesignToken;
84
+ "2xl": DesignToken;
85
+ };
86
+ typography: {
87
+ "font-family": DesignToken;
88
+ "hyphenate-limit-chars": DesignToken;
89
+ "body-text": {
90
+ "font-size": DesignToken;
91
+ "font-weight": DesignToken;
92
+ "line-height": DesignToken;
93
+ bold: {
94
+ "font-weight": DesignToken;
95
+ };
96
+ small: {
97
+ "font-size": DesignToken;
98
+ "line-height": DesignToken;
99
+ };
100
+ large: {
101
+ "font-size": DesignToken;
102
+ "line-height": DesignToken;
103
+ };
104
+ "x-large": {
105
+ "font-size": DesignToken;
106
+ "line-height": DesignToken;
107
+ };
108
+ };
109
+ heading: {
73
110
  "0": {
74
- "font-size": DesignToken,
75
- "line-height": DesignToken
76
- },
111
+ "font-size": DesignToken;
112
+ "line-height": DesignToken;
113
+ };
77
114
  "1": {
78
- "font-size": DesignToken,
79
- "line-height": DesignToken
80
- },
115
+ "font-size": DesignToken;
116
+ "line-height": DesignToken;
117
+ };
81
118
  "2": {
82
- "font-size": DesignToken,
83
- "line-height": DesignToken
84
- },
119
+ "font-size": DesignToken;
120
+ "line-height": DesignToken;
121
+ };
85
122
  "3": {
86
- "font-size": DesignToken,
87
- "line-height": DesignToken
88
- },
123
+ "font-size": DesignToken;
124
+ "line-height": DesignToken;
125
+ };
89
126
  "4": {
90
- "font-size": DesignToken,
91
- "line-height": DesignToken
92
- },
127
+ "font-size": DesignToken;
128
+ "line-height": DesignToken;
129
+ };
93
130
  "5": {
94
- "font-size": DesignToken,
95
- "line-height": DesignToken
96
- },
131
+ "font-size": DesignToken;
132
+ "line-height": DesignToken;
133
+ };
97
134
  "6": {
98
- "font-size": DesignToken,
99
- "line-height": DesignToken
100
- }
101
- }
102
- },
103
- "action": {
104
- "activate": {
105
- "cursor": DesignToken
106
- },
107
- "busy": {
108
- "cursor": DesignToken
109
- },
110
- "disabled": {
111
- "cursor": DesignToken
112
- },
113
- "inert": {
114
- "cursor": DesignToken
115
- },
116
- "navigate": {
117
- "cursor": DesignToken
118
- },
119
- "submit": {
120
- "cursor": DesignToken
121
- }
122
- },
123
- "focus": {
124
- "outline-offset": DesignToken
125
- },
126
- "hyphenation": {
127
- "hyphenate-limit-chars": DesignToken,
128
- "hyphens": DesignToken,
129
- "overflow-wrap": DesignToken
130
- },
131
- "link-appearance": {
132
- "color": DesignToken,
133
- "text-decoration-thickness": DesignToken,
134
- "text-underline-offset": DesignToken,
135
- "hover": {
136
- "color": DesignToken
137
- },
138
- "regular": {
139
- "text-decoration-line": DesignToken,
140
- "hover": {
141
- "text-decoration-thickness": DesignToken,
142
- "text-underline-offset": DesignToken
143
- }
144
- },
145
- "subtle": {
146
- "text-decoration-line": DesignToken,
147
- "hover": {
148
- "text-decoration-line": DesignToken
149
- }
150
- },
151
- "contrast": {
152
- "color": DesignToken,
153
- "hover": {
154
- "color": DesignToken
155
- },
156
- "visited": {
157
- "color": DesignToken
158
- }
159
- },
160
- "inverse": {
161
- "color": DesignToken,
162
- "hover": {
163
- "color": DesignToken
164
- },
165
- "visited": {
166
- "color": DesignToken
167
- }
168
- }
169
- },
170
- "accordion": {
171
- "gap": DesignToken,
172
- "button": {
173
- "color": DesignToken,
174
- "font-family": DesignToken,
175
- "font-size": DesignToken,
176
- "font-weight": DesignToken,
177
- "gap": DesignToken,
178
- "line-height": DesignToken,
179
- "padding-block": DesignToken,
180
- "padding-inline": DesignToken,
181
- "focus": {
182
- "outline-offset": DesignToken
183
- },
184
- "hover": {
185
- "color": DesignToken
186
- }
187
- },
188
- "panel": {
189
- "padding-block": DesignToken,
190
- "padding-inline": DesignToken
191
- }
192
- },
135
+ "font-size": DesignToken;
136
+ "line-height": DesignToken;
137
+ };
138
+ "font-weight": DesignToken;
139
+ };
140
+ };
141
+ links: {
142
+ color: DesignToken;
143
+ "text-decoration-thickness": DesignToken;
144
+ "text-underline-offset": DesignToken;
145
+ hover: {
146
+ color: DesignToken;
147
+ "text-decoration-thickness": DesignToken;
148
+ "text-underline-offset": DesignToken;
149
+ };
150
+ subtle: {
151
+ "text-decoration-line": DesignToken;
152
+ hover: {
153
+ "text-decoration-line": DesignToken;
154
+ };
155
+ };
156
+ contrast: {
157
+ color: DesignToken;
158
+ hover: {
159
+ color: DesignToken;
160
+ };
161
+ };
162
+ inverse: {
163
+ color: DesignToken;
164
+ hover: {
165
+ color: DesignToken;
166
+ };
167
+ };
168
+ };
169
+ accordion: {
170
+ gap: DesignToken;
171
+ button: {
172
+ color: DesignToken;
173
+ cursor: DesignToken;
174
+ "font-family": DesignToken;
175
+ "font-size": DesignToken;
176
+ "font-weight": DesignToken;
177
+ gap: DesignToken;
178
+ "line-height": DesignToken;
179
+ "outline-offset": DesignToken;
180
+ "padding-block": DesignToken;
181
+ "padding-inline": DesignToken;
182
+ hover: {
183
+ color: DesignToken;
184
+ };
185
+ };
186
+ panel: {
187
+ "padding-block": DesignToken;
188
+ "padding-inline": DesignToken;
189
+ };
190
+ };
193
191
  "action-group": {
194
- "gap": DesignToken
195
- },
196
- "alert": {
197
- "border-width": DesignToken,
198
- "border-style": DesignToken,
199
- "gap": DesignToken,
200
- "padding-block": DesignToken,
201
- "padding-inline": DesignToken,
202
- "error": {
203
- "border-color": DesignToken
204
- },
205
- "info": {
206
- "border-color": DesignToken
207
- },
208
- "success": {
209
- "border-color": DesignToken
210
- },
211
- "warning": {
212
- "border-color": DesignToken
213
- },
214
- "close": {
215
- "fill": DesignToken,
216
- "hover": {
217
- "fill": DesignToken
218
- }
219
- },
220
- "content": {
221
- "gap": DesignToken
222
- }
223
- },
224
- "aspect-ratio": {
225
- "x-tall": DesignToken,
226
- "tall": DesignToken,
227
- "square": DesignToken,
228
- "wide": DesignToken,
229
- "x-wide": DesignToken,
230
- "2x-wide": DesignToken
231
- },
232
- "avatar": {
233
- "aspect-ratio": DesignToken,
234
- "font-family": DesignToken,
235
- "font-size": DesignToken,
236
- "font-weight": DesignToken,
237
- "line-height": DesignToken,
238
- "padding-block": DesignToken,
239
- "padding-inline": DesignToken,
240
- "black": {
241
- "background-color": DesignToken,
242
- "color": DesignToken
243
- },
244
- "blue": {
245
- "background-color": DesignToken,
246
- "color": DesignToken
247
- },
248
- "dark-green": {
249
- "background-color": DesignToken,
250
- "color": DesignToken
251
- },
192
+ gap: DesignToken;
193
+ };
194
+ alert: {
195
+ "background-color": DesignToken;
196
+ "box-shadow": DesignToken;
252
197
  "forced-colors": {
253
- "border-width": DesignToken
254
- },
255
- "green": {
256
- "background-color": DesignToken,
257
- "color": DesignToken
258
- },
259
- "grey-1": {
260
- "background-color": DesignToken,
261
- "color": DesignToken
262
- },
263
- "grey-2": {
264
- "background-color": DesignToken,
265
- "color": DesignToken
266
- },
267
- "grey-3": {
268
- "background-color": DesignToken,
269
- "color": DesignToken
270
- },
271
- "light-blue": {
272
- "background-color": DesignToken,
273
- "color": DesignToken
274
- },
275
- "magenta": {
276
- "background-color": DesignToken,
277
- "color": DesignToken
278
- },
279
- "orange": {
280
- "background-color": DesignToken,
281
- "color": DesignToken
282
- },
283
- "purple": {
284
- "background-color": DesignToken,
285
- "color": DesignToken
286
- },
287
- "red": {
288
- "background-color": DesignToken,
289
- "color": DesignToken
290
- },
291
- "white": {
292
- "background-color": DesignToken,
293
- "color": DesignToken
294
- },
295
- "yellow": {
296
- "background-color": DesignToken,
297
- "color": DesignToken
298
- }
299
- },
300
- "badge": {
301
- "font-family": DesignToken,
302
- "font-size": DesignToken,
303
- "font-weight": DesignToken,
304
- "line-height": DesignToken,
305
- "padding-inline": DesignToken,
306
- "black": {
307
- "background-color": DesignToken,
308
- "color": DesignToken
309
- },
310
- "blue": {
311
- "background-color": DesignToken,
312
- "color": DesignToken
313
- },
314
- "dark-green": {
315
- "background-color": DesignToken,
316
- "color": DesignToken
317
- },
318
- "green": {
319
- "background-color": DesignToken,
320
- "color": DesignToken
321
- },
322
- "grey-1": {
323
- "background-color": DesignToken,
324
- "color": DesignToken
325
- },
326
- "grey-2": {
327
- "background-color": DesignToken,
328
- "color": DesignToken
329
- },
330
- "grey-3": {
331
- "background-color": DesignToken,
332
- "color": DesignToken
333
- },
334
- "light-blue": {
335
- "background-color": DesignToken,
336
- "color": DesignToken
337
- },
338
- "magenta": {
339
- "background-color": DesignToken,
340
- "color": DesignToken
341
- },
342
- "orange": {
343
- "background-color": DesignToken,
344
- "color": DesignToken
345
- },
346
- "purple": {
347
- "background-color": DesignToken,
348
- "color": DesignToken
349
- },
350
- "red": {
351
- "background-color": DesignToken,
352
- "color": DesignToken
353
- },
354
- "white": {
355
- "background-color": DesignToken,
356
- "color": DesignToken
357
- },
358
- "yellow": {
359
- "background-color": DesignToken,
360
- "color": DesignToken
361
- }
362
- },
363
- "blockquote": {
364
- "color": DesignToken,
365
- "font-family": DesignToken,
366
- "font-size": DesignToken,
367
- "font-weight": DesignToken,
368
- "line-height": DesignToken,
369
- "inverse-color": DesignToken
370
- },
371
- "breadcrumb": {
372
- "font-family": DesignToken,
373
- "font-size": DesignToken,
374
- "font-weight": DesignToken,
375
- "line-height": DesignToken,
376
- "separator": {
377
- "background-image": DesignToken,
378
- "block-size": DesignToken,
379
- "inline-size": DesignToken,
380
- "margin-inline": DesignToken
381
- },
382
- "link": {
383
- "color": DesignToken,
384
- "outline-offset": DesignToken,
385
- "text-decoration-line": DesignToken,
386
- "text-decoration-thickness": DesignToken,
387
- "text-underline-offset": DesignToken,
388
- "hover": {
389
- "color": DesignToken,
390
- "text-decoration-line": DesignToken
391
- }
392
- }
393
- },
394
- "breakout": {
395
- "row-gap": {
396
- "sm": DesignToken,
397
- "md": DesignToken,
398
- "lg": DesignToken
399
- }
400
- },
401
- "button": {
402
- "cursor": DesignToken,
403
- "font-family": DesignToken,
404
- "font-size": DesignToken,
405
- "line-height": DesignToken,
406
- "gap": DesignToken,
407
- "outline-offset": DesignToken,
408
- "padding-block": DesignToken,
409
- "padding-inline": DesignToken,
410
- "disabled": {
411
- "cursor": DesignToken
412
- },
198
+ "border-width": DesignToken;
199
+ };
200
+ "severity-indicator": {
201
+ "background-color": DesignToken;
202
+ "padding-block": DesignToken;
203
+ "padding-inline": DesignToken;
204
+ };
205
+ content: {
206
+ gap: DesignToken;
207
+ "padding-block": DesignToken;
208
+ "padding-inline": DesignToken;
209
+ };
210
+ error: {
211
+ "box-shadow": DesignToken;
212
+ "severity-indicator": {
213
+ "background-color": DesignToken;
214
+ };
215
+ };
216
+ success: {
217
+ "box-shadow": DesignToken;
218
+ "severity-indicator": {
219
+ "background-color": DesignToken;
220
+ };
221
+ };
222
+ warning: {
223
+ "box-shadow": DesignToken;
224
+ "severity-indicator": {
225
+ "background-color": DesignToken;
226
+ };
227
+ };
228
+ };
229
+ avatar: {
230
+ "aspect-ratio": DesignToken;
231
+ "background-color": DesignToken;
232
+ color: DesignToken;
233
+ "font-family": DesignToken;
234
+ "font-size": DesignToken;
235
+ "font-weight": DesignToken;
236
+ "line-height": DesignToken;
237
+ "padding-block": DesignToken;
238
+ "padding-inline": DesignToken;
239
+ "forced-colors": {
240
+ "border-width": DesignToken;
241
+ };
242
+ azure: {
243
+ "background-color": DesignToken;
244
+ color: DesignToken;
245
+ };
246
+ green: {
247
+ "background-color": DesignToken;
248
+ color: DesignToken;
249
+ };
250
+ lime: {
251
+ "background-color": DesignToken;
252
+ color: DesignToken;
253
+ };
254
+ magenta: {
255
+ "background-color": DesignToken;
256
+ color: DesignToken;
257
+ };
258
+ orange: {
259
+ "background-color": DesignToken;
260
+ color: DesignToken;
261
+ };
262
+ yellow: {
263
+ "background-color": DesignToken;
264
+ color: DesignToken;
265
+ };
266
+ };
267
+ badge: {
268
+ "background-color": DesignToken;
269
+ color: DesignToken;
270
+ "font-family": DesignToken;
271
+ "font-size": DesignToken;
272
+ "font-weight": DesignToken;
273
+ "line-height": DesignToken;
274
+ "padding-inline": DesignToken;
275
+ azure: {
276
+ "background-color": DesignToken;
277
+ color: DesignToken;
278
+ };
279
+ lime: {
280
+ "background-color": DesignToken;
281
+ color: DesignToken;
282
+ };
283
+ magenta: {
284
+ "background-color": DesignToken;
285
+ color: DesignToken;
286
+ };
287
+ orange: {
288
+ "background-color": DesignToken;
289
+ color: DesignToken;
290
+ };
291
+ purple: {
292
+ "background-color": DesignToken;
293
+ color: DesignToken;
294
+ };
295
+ red: {
296
+ "background-color": DesignToken;
297
+ color: DesignToken;
298
+ };
299
+ yellow: {
300
+ "background-color": DesignToken;
301
+ color: DesignToken;
302
+ };
303
+ };
304
+ blockquote: {
305
+ color: DesignToken;
306
+ "font-family": DesignToken;
307
+ "font-size": DesignToken;
308
+ "font-weight": DesignToken;
309
+ "line-height": DesignToken;
310
+ inverse: {
311
+ color: DesignToken;
312
+ };
313
+ };
314
+ breadcrumb: {
315
+ "font-family": DesignToken;
316
+ "font-size": DesignToken;
317
+ "font-weight": DesignToken;
318
+ "line-height": DesignToken;
319
+ separator: {
320
+ "background-image": DesignToken;
321
+ "block-size": DesignToken;
322
+ "inline-size": DesignToken;
323
+ "margin-inline": DesignToken;
324
+ };
325
+ link: {
326
+ color: DesignToken;
327
+ "outline-offset": DesignToken;
328
+ "text-decoration-line": DesignToken;
329
+ "text-decoration-thickness": DesignToken;
330
+ "text-underline-offset": DesignToken;
331
+ hover: {
332
+ color: DesignToken;
333
+ "text-decoration-line": DesignToken;
334
+ };
335
+ };
336
+ };
337
+ button: {
338
+ cursor: DesignToken;
339
+ "font-family": DesignToken;
340
+ "font-size": DesignToken;
341
+ "font-weight": DesignToken;
342
+ "line-height": DesignToken;
343
+ gap: DesignToken;
344
+ "outline-offset": DesignToken;
345
+ "padding-block": DesignToken;
346
+ "padding-inline": DesignToken;
347
+ disabled: {
348
+ cursor: DesignToken;
349
+ };
413
350
  "forced-color-mode": {
414
- "border": DesignToken
415
- },
416
- "primary": {
417
- "background-color": DesignToken,
418
- "box-shadow": DesignToken,
419
- "color": DesignToken,
420
- "disabled": {
421
- "background-color": DesignToken,
422
- "box-shadow": DesignToken
423
- },
424
- "hover": {
425
- "background-color": DesignToken,
426
- "box-shadow": DesignToken
427
- }
428
- },
429
- "secondary": {
430
- "background-color": DesignToken,
431
- "color": DesignToken,
432
- "box-shadow": DesignToken,
433
- "hover": {
434
- "box-shadow": DesignToken,
435
- "color": DesignToken
436
- },
437
- "disabled": {
438
- "background-color": DesignToken,
439
- "box-shadow": DesignToken,
440
- "color": DesignToken
441
- },
442
- "focus": {
443
- "box-shadow": DesignToken
444
- }
445
- },
446
- "tertiary": {
447
- "background-color": DesignToken,
448
- "color": DesignToken,
449
- "hover": {
450
- "box-shadow": DesignToken,
451
- "color": DesignToken
452
- },
453
- "disabled": {
454
- "background-color": DesignToken,
455
- "color": DesignToken
456
- }
457
- },
351
+ border: DesignToken;
352
+ };
353
+ primary: {
354
+ "background-color": DesignToken;
355
+ "box-shadow": DesignToken;
356
+ color: DesignToken;
357
+ disabled: {
358
+ "background-color": DesignToken;
359
+ "box-shadow": DesignToken;
360
+ };
361
+ hover: {
362
+ "background-color": DesignToken;
363
+ "box-shadow": DesignToken;
364
+ };
365
+ };
366
+ secondary: {
367
+ "background-color": DesignToken;
368
+ color: DesignToken;
369
+ "box-shadow": DesignToken;
370
+ hover: {
371
+ "box-shadow": DesignToken;
372
+ color: DesignToken;
373
+ };
374
+ disabled: {
375
+ "background-color": DesignToken;
376
+ "box-shadow": DesignToken;
377
+ color: DesignToken;
378
+ };
379
+ };
380
+ tertiary: {
381
+ "background-color": DesignToken;
382
+ color: DesignToken;
383
+ hover: {
384
+ "box-shadow": DesignToken;
385
+ color: DesignToken;
386
+ };
387
+ disabled: {
388
+ "background-color": DesignToken;
389
+ color: DesignToken;
390
+ };
391
+ };
458
392
  "icon-only": {
459
- "padding-block": DesignToken,
460
- "padding-inline": DesignToken
461
- }
462
- },
463
- "card": {
464
- "gap": DesignToken,
393
+ "padding-block": DesignToken;
394
+ "padding-inline": DesignToken;
395
+ };
396
+ };
397
+ card: {
398
+ gap: DesignToken;
465
399
  "heading-group": {
466
- "gap": DesignToken
467
- },
468
- "link": {
469
- "color": DesignToken,
470
- "text-decoration-line": DesignToken,
471
- "text-decoration-thickness": DesignToken,
472
- "text-underline-offset": DesignToken,
473
- "hover": {
474
- "color": DesignToken,
475
- "text-decoration-line": DesignToken
476
- }
477
- },
478
- "outline-offset": DesignToken
479
- },
400
+ gap: DesignToken;
401
+ };
402
+ link: {
403
+ color: DesignToken;
404
+ "text-decoration-line": DesignToken;
405
+ "text-decoration-thickness": DesignToken;
406
+ "text-underline-offset": DesignToken;
407
+ hover: {
408
+ color: DesignToken;
409
+ "text-decoration-line": DesignToken;
410
+ };
411
+ };
412
+ "outline-offset": DesignToken;
413
+ };
480
414
  "character-count": {
481
- "color": DesignToken,
482
- "font-family": DesignToken,
483
- "font-size": DesignToken,
484
- "font-weight": DesignToken,
485
- "line-height": DesignToken,
486
- "error": {
487
- "color": DesignToken
488
- }
489
- },
490
- "checkbox": {
491
- "color": DesignToken,
492
- "font-family": DesignToken,
493
- "font-size": DesignToken,
494
- "font-weight": DesignToken,
495
- "gap": DesignToken,
496
- "line-height": DesignToken,
497
- "outline-offset": DesignToken,
498
- "checkmark": {
499
- "border-color": DesignToken,
500
- "border-width": DesignToken,
501
- "checked": {
502
- "background-color": DesignToken,
503
- "background-image": DesignToken,
504
- "hover": {
505
- "background-color": DesignToken
506
- }
507
- },
508
- "disabled": {
509
- "border-color": DesignToken,
510
- "border-width": DesignToken,
511
- "checked": {
512
- "background-color": DesignToken,
513
- "hover": {
514
- "background-color": DesignToken
515
- }
516
- },
517
- "indeterminate": {
518
- "background-color": DesignToken,
519
- "hover": {
520
- "background-color": DesignToken
521
- }
522
- }
523
- },
524
- "hover": {
525
- "border-color": DesignToken,
526
- "border-width": DesignToken
527
- },
528
- "invalid": {
529
- "border-color": DesignToken,
530
- "checked": {
531
- "background-color": DesignToken,
532
- "hover": {
533
- "background-color": DesignToken
534
- }
535
- },
536
- "hover": {
537
- "border-color": DesignToken
538
- },
539
- "indeterminate": {
540
- "background-color": DesignToken,
541
- "hover": {
542
- "background-color": DesignToken
543
- }
544
- }
545
- },
546
- "indeterminate": {
547
- "background-color": DesignToken,
548
- "background-image": DesignToken,
549
- "hover": {
550
- "background-color": DesignToken
551
- }
552
- }
553
- },
554
- "disabled": {
555
- "color": DesignToken
556
- },
557
- "hover": {
558
- "color": DesignToken,
559
- "text-decoration-thickness": DesignToken
560
- }
561
- },
562
- "column": {
563
- "gap": {
564
- "no": DesignToken,
565
- "xs": DesignToken,
566
- "sm": DesignToken,
567
- "md": DesignToken,
568
- "lg": DesignToken,
569
- "xl": DesignToken
570
- }
571
- },
415
+ color: DesignToken;
416
+ "font-family": DesignToken;
417
+ "font-size": DesignToken;
418
+ "font-weight": DesignToken;
419
+ "line-height": DesignToken;
420
+ error: {
421
+ color: DesignToken;
422
+ };
423
+ };
424
+ checkbox: {
425
+ color: DesignToken;
426
+ cursor: DesignToken;
427
+ "font-family": DesignToken;
428
+ "font-size": DesignToken;
429
+ "font-weight": DesignToken;
430
+ gap: DesignToken;
431
+ "line-height": DesignToken;
432
+ "outline-offset": DesignToken;
433
+ checkmark: {
434
+ "border-color": DesignToken;
435
+ "border-width": DesignToken;
436
+ checked: {
437
+ "background-color": DesignToken;
438
+ "background-image": DesignToken;
439
+ hover: {
440
+ "background-color": DesignToken;
441
+ };
442
+ };
443
+ disabled: {
444
+ "border-color": DesignToken;
445
+ "border-width": DesignToken;
446
+ checked: {
447
+ "background-color": DesignToken;
448
+ hover: {
449
+ "background-color": DesignToken;
450
+ };
451
+ };
452
+ indeterminate: {
453
+ "background-color": DesignToken;
454
+ hover: {
455
+ "background-color": DesignToken;
456
+ };
457
+ };
458
+ };
459
+ hover: {
460
+ "border-color": DesignToken;
461
+ "border-width": DesignToken;
462
+ };
463
+ invalid: {
464
+ "border-color": DesignToken;
465
+ checked: {
466
+ "background-color": DesignToken;
467
+ hover: {
468
+ "background-color": DesignToken;
469
+ };
470
+ };
471
+ hover: {
472
+ "border-color": DesignToken;
473
+ };
474
+ indeterminate: {
475
+ "background-color": DesignToken;
476
+ hover: {
477
+ "background-color": DesignToken;
478
+ };
479
+ };
480
+ };
481
+ indeterminate: {
482
+ "background-color": DesignToken;
483
+ "background-image": DesignToken;
484
+ hover: {
485
+ "background-color": DesignToken;
486
+ };
487
+ };
488
+ };
489
+ disabled: {
490
+ cursor: DesignToken;
491
+ color: DesignToken;
492
+ };
493
+ hover: {
494
+ color: DesignToken;
495
+ "text-decoration-thickness": DesignToken;
496
+ };
497
+ };
498
+ column: {
499
+ gap: {
500
+ "x-small": DesignToken;
501
+ small: DesignToken;
502
+ medium: DesignToken;
503
+ large: DesignToken;
504
+ "x-large": DesignToken;
505
+ };
506
+ };
572
507
  "date-input": {
573
- "background-color": DesignToken,
574
- "box-shadow": DesignToken,
575
- "color": DesignToken,
576
- "font-family": DesignToken,
577
- "font-size": DesignToken,
578
- "font-weight": DesignToken,
579
- "line-height": DesignToken,
580
- "outline-offset": DesignToken,
581
- "padding-block": DesignToken,
582
- "padding-inline": DesignToken,
508
+ "background-color": DesignToken;
509
+ "box-shadow": DesignToken;
510
+ color: DesignToken;
511
+ "font-family": DesignToken;
512
+ "font-size": DesignToken;
513
+ "font-weight": DesignToken;
514
+ "line-height": DesignToken;
515
+ "outline-offset": DesignToken;
516
+ "padding-block": DesignToken;
517
+ "padding-inline": DesignToken;
583
518
  "calender-picker-indicator": {
584
- "background-image": DesignToken
585
- },
586
- "disabled": {
587
- "background-color": DesignToken,
588
- "box-shadow": DesignToken,
589
- "color": DesignToken,
519
+ "background-image": DesignToken;
520
+ cursor: DesignToken;
521
+ };
522
+ disabled: {
523
+ "background-color": DesignToken;
524
+ "box-shadow": DesignToken;
525
+ color: DesignToken;
526
+ cursor: DesignToken;
590
527
  "calender-picker-indicator": {
591
- "background-image": DesignToken
592
- }
593
- },
594
- "hover": {
595
- "box-shadow": DesignToken,
528
+ "background-image": DesignToken;
529
+ };
530
+ };
531
+ hover: {
532
+ "box-shadow": DesignToken;
596
533
  "calender-picker-indicator": {
597
- "background-image": DesignToken
598
- }
599
- },
600
- "invalid": {
601
- "box-shadow": DesignToken,
602
- "hover": {
603
- "box-shadow": DesignToken
604
- }
605
- }
606
- },
534
+ "background-image": DesignToken;
535
+ };
536
+ };
537
+ invalid: {
538
+ "box-shadow": DesignToken;
539
+ hover: {
540
+ "box-shadow": DesignToken;
541
+ };
542
+ };
543
+ };
607
544
  "description-list": {
608
- "color": DesignToken,
609
- "column-gap": DesignToken,
610
- "font-family": DesignToken,
611
- "font-size": DesignToken,
612
- "inverse-color": DesignToken,
613
- "line-height": DesignToken,
614
- "row-gap": DesignToken,
615
- "term": {
616
- "font-weight": DesignToken
617
- },
618
- "description": {
619
- "font-weight": DesignToken,
620
- "padding-inline-start": DesignToken
621
- }
622
- },
623
- "dialog": {
624
- "background-color": DesignToken,
625
- "border": DesignToken,
626
- "gap": DesignToken,
627
- "inline-size": DesignToken,
628
- "max-block-size": DesignToken,
629
- "max-inline-size": DesignToken,
630
- "padding-block": DesignToken,
631
- "padding-inline": DesignToken,
632
- "header": {
633
- "gap": DesignToken
634
- }
635
- },
545
+ color: DesignToken;
546
+ "column-gap": DesignToken;
547
+ "font-family": DesignToken;
548
+ "font-size": DesignToken;
549
+ "line-height": DesignToken;
550
+ "row-gap": DesignToken;
551
+ inverse: {
552
+ color: DesignToken;
553
+ };
554
+ term: {
555
+ "font-weight": DesignToken;
556
+ };
557
+ description: {
558
+ "font-weight": DesignToken;
559
+ "padding-inline-start": DesignToken;
560
+ };
561
+ narrow: {
562
+ "grid-template-columns": DesignToken;
563
+ };
564
+ medium: {
565
+ "grid-template-columns": DesignToken;
566
+ };
567
+ wide: {
568
+ "grid-template-columns": DesignToken;
569
+ };
570
+ };
571
+ dialog: {
572
+ "background-color": DesignToken;
573
+ border: DesignToken;
574
+ gap: DesignToken;
575
+ "inline-size": DesignToken;
576
+ "max-block-size": DesignToken;
577
+ "max-inline-size": DesignToken;
578
+ backdrop: {
579
+ "background-color": DesignToken;
580
+ };
581
+ header: {
582
+ gap: DesignToken;
583
+ "padding-block": DesignToken;
584
+ "padding-inline": DesignToken;
585
+ };
586
+ body: {
587
+ "padding-block": DesignToken;
588
+ "padding-inline": DesignToken;
589
+ };
590
+ footer: {
591
+ "padding-block": DesignToken;
592
+ "padding-inline": DesignToken;
593
+ };
594
+ };
636
595
  "error-message": {
637
- "color": DesignToken,
638
- "font-family": DesignToken,
639
- "font-size": DesignToken,
640
- "font-weight": DesignToken,
641
- "line-height": DesignToken
642
- },
596
+ color: DesignToken;
597
+ "font-family": DesignToken;
598
+ "font-size": DesignToken;
599
+ "font-weight": DesignToken;
600
+ gap: DesignToken;
601
+ "line-height": DesignToken;
602
+ };
643
603
  "field-set": {
644
- "invalid": {
645
- "border-inline-start": DesignToken,
646
- "padding-inline-start": DesignToken
647
- },
648
- "legend": {
649
- "color": DesignToken,
650
- "font-family": DesignToken,
651
- "font-size": DesignToken,
652
- "font-weight": DesignToken,
653
- "line-height": DesignToken,
654
- "margin-block-end": DesignToken
655
- }
656
- },
657
- "field": {
658
- "gap": DesignToken,
659
- "invalid": {
660
- "border-inline-start": DesignToken,
661
- "padding-inline-start": DesignToken
662
- }
663
- },
604
+ invalid: {
605
+ "border-inline-start": DesignToken;
606
+ "padding-inline-start": DesignToken;
607
+ };
608
+ legend: {
609
+ color: DesignToken;
610
+ "font-family": DesignToken;
611
+ "font-size": DesignToken;
612
+ "font-weight": DesignToken;
613
+ "line-height": DesignToken;
614
+ "margin-block-end": DesignToken;
615
+ };
616
+ };
617
+ field: {
618
+ gap: DesignToken;
619
+ invalid: {
620
+ "border-inline-start": DesignToken;
621
+ "padding-inline-start": DesignToken;
622
+ };
623
+ };
624
+ figure: {
625
+ gap: DesignToken;
626
+ caption: {
627
+ color: DesignToken;
628
+ "font-family": DesignToken;
629
+ "font-size": DesignToken;
630
+ "font-weight": DesignToken;
631
+ "line-height": DesignToken;
632
+ inverse: {
633
+ color: DesignToken;
634
+ };
635
+ };
636
+ };
664
637
  "file-input": {
665
- "background-color": DesignToken,
666
- "border": DesignToken,
667
- "color": DesignToken,
668
- "cursor": DesignToken,
669
- "font-family": DesignToken,
670
- "font-size": DesignToken,
671
- "font-weight": DesignToken,
672
- "line-height": DesignToken,
673
- "outline-offset": DesignToken,
674
- "padding-block": DesignToken,
675
- "padding-inline": DesignToken,
676
- "disabled": {
677
- "color": DesignToken,
678
- "cursor": DesignToken
679
- },
638
+ "background-color": DesignToken;
639
+ border: DesignToken;
640
+ color: DesignToken;
641
+ cursor: DesignToken;
642
+ "font-family": DesignToken;
643
+ "font-size": DesignToken;
644
+ "font-weight": DesignToken;
645
+ "line-height": DesignToken;
646
+ "outline-offset": DesignToken;
647
+ "padding-block": DesignToken;
648
+ "padding-inline": DesignToken;
649
+ disabled: {
650
+ color: DesignToken;
651
+ cursor: DesignToken;
652
+ };
680
653
  "file-selector-button": {
681
- "background-color": DesignToken,
682
- "box-shadow": DesignToken,
683
- "color": DesignToken,
684
- "cursor": DesignToken,
685
- "margin-inline-end": DesignToken,
686
- "padding-block": DesignToken,
687
- "padding-inline": DesignToken,
688
- "hover": {
689
- "box-shadow": DesignToken,
690
- "color": DesignToken
691
- },
692
- "disabled": {
693
- "box-shadow": DesignToken,
694
- "color": DesignToken,
695
- "cursor": DesignToken
696
- },
654
+ "background-color": DesignToken;
655
+ "box-shadow": DesignToken;
656
+ color: DesignToken;
657
+ cursor: DesignToken;
658
+ "margin-inline-end": DesignToken;
659
+ "padding-block": DesignToken;
660
+ "padding-inline": DesignToken;
661
+ hover: {
662
+ "box-shadow": DesignToken;
663
+ color: DesignToken;
664
+ };
665
+ disabled: {
666
+ "box-shadow": DesignToken;
667
+ color: DesignToken;
668
+ cursor: DesignToken;
669
+ };
697
670
  "forced-color-mode": {
698
- "border": DesignToken
699
- }
700
- }
701
- },
702
- "form-error-list": {
703
- "outline-offset": DesignToken
704
- },
705
- "gap": {
706
- "xs": DesignToken,
707
- "sm": DesignToken,
708
- "md": DesignToken,
709
- "lg": DesignToken,
710
- "xl": DesignToken
711
- },
712
- "grid": {
713
- "column-count": DesignToken,
714
- "column-gap": DesignToken,
671
+ border: DesignToken;
672
+ };
673
+ };
674
+ };
675
+ "file-list": {
676
+ gap: DesignToken;
677
+ "padding-block": DesignToken;
678
+ file: {
679
+ "font-family": DesignToken;
680
+ "font-size": DesignToken;
681
+ "font-weight": DesignToken;
682
+ gap: DesignToken;
683
+ "line-height": DesignToken;
684
+ details: {
685
+ color: DesignToken;
686
+ };
687
+ preview: {
688
+ width: DesignToken;
689
+ };
690
+ };
691
+ };
692
+ footer: {
693
+ menu: {
694
+ "column-gap": DesignToken;
695
+ "padding-block": DesignToken;
696
+ "padding-inline": DesignToken;
697
+ "row-gap": DesignToken;
698
+ link: {
699
+ color: DesignToken;
700
+ "font-family": DesignToken;
701
+ "font-size": DesignToken;
702
+ "font-weight": DesignToken;
703
+ "line-height": DesignToken;
704
+ "outline-offset": DesignToken;
705
+ "text-decoration-line": DesignToken;
706
+ "text-decoration-thickness": DesignToken;
707
+ "text-underline-offset": DesignToken;
708
+ hover: {
709
+ color: DesignToken;
710
+ "text-decoration-line": DesignToken;
711
+ };
712
+ };
713
+ };
714
+ spotlight: {
715
+ "background-color": DesignToken;
716
+ };
717
+ };
718
+ grid: {
719
+ "column-count": DesignToken;
720
+ "column-gap": DesignToken;
715
721
  "padding-block": {
716
- "sm": DesignToken,
717
- "md": DesignToken,
718
- "lg": DesignToken
719
- },
720
- "padding-inline": DesignToken,
722
+ s: DesignToken;
723
+ m: DesignToken;
724
+ l: DesignToken;
725
+ };
726
+ "padding-inline": DesignToken;
721
727
  "row-gap": {
722
- "sm": DesignToken,
723
- "md": DesignToken,
724
- "lg": DesignToken
725
- },
726
- "medium": {
727
- "column-count": DesignToken
728
- },
729
- "wide": {
730
- "column-count": DesignToken
731
- }
732
- },
733
- "header": {
734
- "column-gap": DesignToken,
735
- "padding-block": DesignToken,
728
+ s: DesignToken;
729
+ m: DesignToken;
730
+ l: DesignToken;
731
+ };
732
+ medium: {
733
+ "column-count": DesignToken;
734
+ "padding-inline": DesignToken;
735
+ };
736
+ wide: {
737
+ "column-count": DesignToken;
738
+ "padding-inline": DesignToken;
739
+ };
740
+ };
741
+ header: {
742
+ "font-family": DesignToken;
743
+ "padding-block": DesignToken;
744
+ "padding-inline": DesignToken;
736
745
  "logo-link": {
737
- "outline-offset": DesignToken
738
- }
739
- },
740
- "heading": {
741
- "color": DesignToken,
742
- "font-family": DesignToken,
743
- "font-weight": DesignToken,
744
- "inverse-color": DesignToken,
745
- "level": {
746
- "1": {
747
- "font-size": DesignToken,
748
- "line-height": DesignToken
749
- },
750
- "2": {
751
- "font-size": DesignToken,
752
- "line-height": DesignToken
753
- },
754
- "3": {
755
- "font-size": DesignToken,
756
- "line-height": DesignToken
757
- },
758
- "4": {
759
- "font-size": DesignToken,
760
- "line-height": DesignToken
761
- },
762
- "5": {
763
- "font-size": DesignToken,
764
- "line-height": DesignToken
765
- },
766
- "6": {
767
- "font-size": DesignToken,
768
- "line-height": DesignToken
769
- }
770
- }
771
- },
772
- "hint": {
773
- "color": DesignToken
774
- },
746
+ "column-gap": DesignToken;
747
+ "outline-offset": DesignToken;
748
+ };
749
+ "brand-name": {
750
+ color: DesignToken;
751
+ "font-size": DesignToken;
752
+ "font-weight": DesignToken;
753
+ };
754
+ "mega-menu": {
755
+ button: {
756
+ cursor: DesignToken;
757
+ label: {
758
+ open: {
759
+ "font-weight": DesignToken;
760
+ };
761
+ };
762
+ };
763
+ };
764
+ menu: {
765
+ "column-gap": DesignToken;
766
+ "row-gap": DesignToken;
767
+ item: {
768
+ color: DesignToken;
769
+ "column-gap": DesignToken;
770
+ "font-family": DesignToken;
771
+ "font-size": DesignToken;
772
+ "font-weight": DesignToken;
773
+ "line-height": DesignToken;
774
+ "outline-offset": DesignToken;
775
+ "padding-block": DesignToken;
776
+ hover: {
777
+ color: DesignToken;
778
+ };
779
+ };
780
+ link: {
781
+ "text-decoration-line": DesignToken;
782
+ "text-decoration-thickness": DesignToken;
783
+ "text-underline-offset": DesignToken;
784
+ hover: {
785
+ "text-decoration-line": DesignToken;
786
+ };
787
+ };
788
+ };
789
+ navigation: {
790
+ "column-gap": DesignToken;
791
+ "row-gap": DesignToken;
792
+ };
793
+ };
794
+ heading: {
795
+ "1": {
796
+ "font-size": DesignToken;
797
+ "line-height": DesignToken;
798
+ };
799
+ "2": {
800
+ "font-size": DesignToken;
801
+ "line-height": DesignToken;
802
+ };
803
+ "3": {
804
+ "font-size": DesignToken;
805
+ "line-height": DesignToken;
806
+ };
807
+ "4": {
808
+ "font-size": DesignToken;
809
+ "line-height": DesignToken;
810
+ };
811
+ "5": {
812
+ "font-size": DesignToken;
813
+ "line-height": DesignToken;
814
+ };
815
+ "6": {
816
+ "font-size": DesignToken;
817
+ "line-height": DesignToken;
818
+ };
819
+ color: DesignToken;
820
+ "font-family": DesignToken;
821
+ "font-weight": DesignToken;
822
+ inverse: {
823
+ color: DesignToken;
824
+ };
825
+ };
826
+ hint: {
827
+ color: DesignToken;
828
+ };
775
829
  "icon-button": {
776
- "color": DesignToken,
777
- "outline-offset": DesignToken,
778
- "hover": {
779
- "background-color": DesignToken,
780
- "color": DesignToken
781
- },
782
- "disabled": {
783
- "color": DesignToken
784
- },
785
- "contrast-color": {
786
- "color": DesignToken,
787
- "hover": {
788
- "background-color": DesignToken,
789
- "color": DesignToken
790
- },
791
- "disabled": {
792
- "color": DesignToken
793
- }
794
- },
795
- "inverse-color": {
796
- "background-color": DesignToken,
797
- "color": DesignToken,
798
- "hover": {
799
- "background-color": DesignToken,
800
- "color": DesignToken
801
- },
802
- "disabled": {
803
- "color": DesignToken,
804
- "background-color": DesignToken
805
- }
806
- }
807
- },
808
- "icon": {
809
- "size-3": {
810
- "font-size": DesignToken,
811
- "line-height": DesignToken
812
- },
813
- "size-4": {
814
- "font-size": DesignToken,
815
- "line-height": DesignToken
816
- },
817
- "size-5": {
818
- "font-size": DesignToken,
819
- "line-height": DesignToken
820
- },
821
- "size-6": {
822
- "font-size": DesignToken,
823
- "line-height": DesignToken
824
- }
825
- },
830
+ color: DesignToken;
831
+ cursor: DesignToken;
832
+ "outline-offset": DesignToken;
833
+ hover: {
834
+ "background-color": DesignToken;
835
+ color: DesignToken;
836
+ };
837
+ disabled: {
838
+ color: DesignToken;
839
+ cursor: DesignToken;
840
+ };
841
+ contrast: {
842
+ color: DesignToken;
843
+ hover: {
844
+ "background-color": DesignToken;
845
+ color: DesignToken;
846
+ };
847
+ disabled: {
848
+ color: DesignToken;
849
+ };
850
+ };
851
+ inverse: {
852
+ "background-color": DesignToken;
853
+ color: DesignToken;
854
+ hover: {
855
+ "background-color": DesignToken;
856
+ color: DesignToken;
857
+ };
858
+ disabled: {
859
+ color: DesignToken;
860
+ "background-color": DesignToken;
861
+ };
862
+ };
863
+ };
864
+ icon: {
865
+ "font-size": DesignToken;
866
+ "line-height": DesignToken;
867
+ small: {
868
+ "font-size": DesignToken;
869
+ "line-height": DesignToken;
870
+ };
871
+ large: {
872
+ "font-size": DesignToken;
873
+ "line-height": DesignToken;
874
+ };
875
+ "heading-3": {
876
+ "font-size": DesignToken;
877
+ "line-height": DesignToken;
878
+ };
879
+ "heading-4": {
880
+ "font-size": DesignToken;
881
+ "line-height": DesignToken;
882
+ };
883
+ "heading-5": {
884
+ "font-size": DesignToken;
885
+ "line-height": DesignToken;
886
+ };
887
+ "heading-6": {
888
+ "font-size": DesignToken;
889
+ "line-height": DesignToken;
890
+ };
891
+ inverse: {
892
+ color: DesignToken;
893
+ };
894
+ };
826
895
  "image-slider": {
827
- "gap": DesignToken,
828
- "scroller": {
829
- "gap": DesignToken,
830
- "outline-offset": DesignToken
831
- },
832
- "thumbnails": {
833
- "gap": DesignToken,
834
- "thumbnail": {
835
- "background-color": DesignToken,
836
- "cursor": DesignToken,
837
- "opacity": DesignToken,
838
- "outline-offset": DesignToken,
896
+ gap: DesignToken;
897
+ scroller: {
898
+ gap: DesignToken;
899
+ "outline-offset": DesignToken;
900
+ };
901
+ thumbnails: {
902
+ gap: DesignToken;
903
+ thumbnail: {
904
+ "background-color": DesignToken;
905
+ cursor: DesignToken;
906
+ opacity: DesignToken;
907
+ "outline-offset": DesignToken;
839
908
  "in-view": {
840
- "opacity": DesignToken
841
- },
842
- "hover": {
843
- "opacity": DesignToken
844
- }
845
- }
846
- }
847
- },
848
- "label": {
849
- "color": DesignToken,
850
- "font-family": DesignToken,
851
- "font-size": DesignToken,
852
- "font-weight": DesignToken,
853
- "line-height": DesignToken
854
- },
909
+ opacity: DesignToken;
910
+ };
911
+ hover: {
912
+ opacity: DesignToken;
913
+ };
914
+ };
915
+ };
916
+ };
917
+ image: {
918
+ "aspect-ratio": DesignToken;
919
+ };
920
+ "invalid-form-alert": {
921
+ "outline-offset": DesignToken;
922
+ };
923
+ label: {
924
+ color: DesignToken;
925
+ "font-family": DesignToken;
926
+ "font-size": DesignToken;
927
+ "font-weight": DesignToken;
928
+ "line-height": DesignToken;
929
+ };
855
930
  "link-list": {
856
- "gap": DesignToken,
857
- "link": {
858
- "color": DesignToken,
859
- "font-family": DesignToken,
860
- "font-size": DesignToken,
861
- "font-weight": DesignToken,
862
- "gap": DesignToken,
863
- "line-height": DesignToken,
864
- "outline-offset": DesignToken,
865
- "text-decoration-line": DesignToken,
866
- "text-decoration-thickness": DesignToken,
867
- "text-underline-offset": DesignToken,
868
- "small": {
869
- "font-size": DesignToken,
870
- "line-height": DesignToken
871
- },
872
- "large": {
873
- "font-size": DesignToken,
874
- "line-height": DesignToken
875
- },
876
- "hover": {
877
- "color": DesignToken,
878
- "text-decoration-line": DesignToken
879
- },
880
- "contrast-color": {
881
- "color": DesignToken,
882
- "hover": {
883
- "color": DesignToken
884
- }
885
- },
886
- "inverse-color": {
887
- "color": DesignToken,
888
- "hover": {
889
- "color": DesignToken
890
- }
891
- }
892
- }
893
- },
894
- "link": {
895
- "color": DesignToken,
896
- "font-family": DesignToken,
897
- "font-weight": DesignToken,
898
- "outline-offset": DesignToken,
899
- "hover": {
900
- "color": DesignToken
901
- },
902
- "inline": {
903
- "text-decoration-line": DesignToken,
904
- "text-decoration-thickness": DesignToken,
905
- "text-underline-offset": DesignToken,
906
- "font-family": DesignToken,
907
- "font-size": DesignToken,
908
- "line-height": DesignToken,
909
- "hover": {
910
- "text-decoration-thickness": DesignToken,
911
- "text-underline-offset": DesignToken
912
- },
913
- "visited": {
914
- "color": DesignToken
915
- }
916
- },
917
- "standalone": {
918
- "font-size": DesignToken,
919
- "line-height": DesignToken,
920
- "text-decoration-line": DesignToken,
921
- "text-decoration-thickness": DesignToken,
922
- "text-underline-offset": DesignToken,
923
- "hover": {
924
- "text-decoration-thickness": DesignToken,
925
- "text-underline-offset": DesignToken
926
- }
927
- },
928
- "contrast-color": {
929
- "color": DesignToken,
930
- "hover": {
931
- "color": DesignToken
932
- },
933
- "visited": {
934
- "color": DesignToken
935
- }
936
- },
937
- "inverse-color": {
938
- "color": DesignToken,
939
- "hover": {
940
- "color": DesignToken
941
- },
942
- "visited": {
943
- "color": DesignToken
944
- }
945
- }
946
- },
947
- "logo": {
948
- "block-size": DesignToken,
949
- "emblem": {
950
- "color": DesignToken
951
- },
952
- "title": {
953
- "color": DesignToken
954
- },
955
- "subsite": {
956
- "color": DesignToken
957
- }
958
- },
959
- "margin": {
960
- "xs": DesignToken,
961
- "sm": DesignToken,
962
- "md": DesignToken,
963
- "lg": DesignToken,
964
- "xl": DesignToken
965
- },
966
- "mark": {
967
- "background-color": DesignToken
968
- },
931
+ gap: DesignToken;
932
+ link: {
933
+ color: DesignToken;
934
+ "font-family": DesignToken;
935
+ "font-size": DesignToken;
936
+ "font-weight": DesignToken;
937
+ gap: DesignToken;
938
+ "line-height": DesignToken;
939
+ "outline-offset": DesignToken;
940
+ "text-decoration-line": DesignToken;
941
+ "text-decoration-thickness": DesignToken;
942
+ "text-underline-offset": DesignToken;
943
+ small: {
944
+ "font-size": DesignToken;
945
+ "line-height": DesignToken;
946
+ };
947
+ large: {
948
+ "font-size": DesignToken;
949
+ "line-height": DesignToken;
950
+ };
951
+ hover: {
952
+ color: DesignToken;
953
+ "text-decoration-line": DesignToken;
954
+ };
955
+ contrast: {
956
+ color: DesignToken;
957
+ hover: {
958
+ color: DesignToken;
959
+ };
960
+ };
961
+ inverse: {
962
+ color: DesignToken;
963
+ hover: {
964
+ color: DesignToken;
965
+ };
966
+ };
967
+ };
968
+ };
969
+ link: {
970
+ color: DesignToken;
971
+ "font-family": DesignToken;
972
+ "font-weight": DesignToken;
973
+ "outline-offset": DesignToken;
974
+ hover: {
975
+ color: DesignToken;
976
+ };
977
+ inline: {
978
+ "text-decoration-thickness": DesignToken;
979
+ "text-underline-offset": DesignToken;
980
+ "font-family": DesignToken;
981
+ "font-size": DesignToken;
982
+ "line-height": DesignToken;
983
+ hover: {
984
+ "text-decoration-thickness": DesignToken;
985
+ "text-underline-offset": DesignToken;
986
+ };
987
+ };
988
+ standalone: {
989
+ "font-size": DesignToken;
990
+ "line-height": DesignToken;
991
+ "text-decoration-thickness": DesignToken;
992
+ "text-underline-offset": DesignToken;
993
+ hover: {
994
+ "text-decoration-thickness": DesignToken;
995
+ "text-underline-offset": DesignToken;
996
+ };
997
+ };
998
+ contrast: {
999
+ color: DesignToken;
1000
+ hover: {
1001
+ color: DesignToken;
1002
+ };
1003
+ };
1004
+ inverse: {
1005
+ color: DesignToken;
1006
+ hover: {
1007
+ color: DesignToken;
1008
+ };
1009
+ };
1010
+ };
1011
+ logo: {
1012
+ "block-size": DesignToken;
1013
+ "min-block-size": DesignToken;
1014
+ emblem: {
1015
+ color: DesignToken;
1016
+ };
1017
+ subsite: {
1018
+ color: DesignToken;
1019
+ };
1020
+ title: {
1021
+ color: DesignToken;
1022
+ };
1023
+ };
1024
+ mark: {
1025
+ "background-color": DesignToken;
1026
+ };
969
1027
  "mega-menu": {
970
1028
  "list-category": {
971
- "column-gap": DesignToken,
972
- "column-width": DesignToken,
973
- "padding-block-start": DesignToken,
974
- "padding-block-end": DesignToken
975
- }
976
- },
1029
+ "column-gap": DesignToken;
1030
+ "column-width": DesignToken;
1031
+ "padding-block-start": DesignToken;
1032
+ "padding-block-end": DesignToken;
1033
+ };
1034
+ };
977
1035
  "ordered-list": {
978
- "color": DesignToken,
979
- "font-family": DesignToken,
980
- "font-size": DesignToken,
981
- "font-weight": DesignToken,
982
- "gap": DesignToken,
983
- "inverse-color": DesignToken,
984
- "line-height": DesignToken,
985
- "list-style-type": DesignToken,
986
- "small": {
987
- "font-size": DesignToken,
988
- "line-height": DesignToken
989
- },
990
- "item": {
991
- "margin-inline-start": DesignToken,
992
- "padding-inline-start": DesignToken
993
- },
1036
+ color: DesignToken;
1037
+ "font-family": DesignToken;
1038
+ "font-size": DesignToken;
1039
+ "font-weight": DesignToken;
1040
+ gap: DesignToken;
1041
+ "line-height": DesignToken;
1042
+ "list-style-type": DesignToken;
1043
+ small: {
1044
+ "font-size": DesignToken;
1045
+ "line-height": DesignToken;
1046
+ };
1047
+ inverse: {
1048
+ color: DesignToken;
1049
+ };
1050
+ item: {
1051
+ "margin-inline-start": DesignToken;
1052
+ "padding-inline-start": DesignToken;
1053
+ };
994
1054
  "ordered-list": {
995
- "gap": DesignToken,
996
- "list-style-type": DesignToken,
997
- "padding-block-end": DesignToken,
998
- "padding-block-start": DesignToken,
999
- "item": {
1000
- "margin-inline-start": DesignToken,
1001
- "padding-inline-start": DesignToken
1002
- }
1003
- }
1004
- },
1055
+ gap: DesignToken;
1056
+ "list-style-type": DesignToken;
1057
+ "padding-block-end": DesignToken;
1058
+ "padding-block-start": DesignToken;
1059
+ item: {
1060
+ "margin-inline-start": DesignToken;
1061
+ "padding-inline-start": DesignToken;
1062
+ };
1063
+ };
1064
+ };
1005
1065
  "page-heading": {
1006
- "color": DesignToken,
1007
- "font-family": DesignToken,
1008
- "font-size": DesignToken,
1009
- "font-weight": DesignToken,
1010
- "inverse-color": DesignToken,
1011
- "line-height": DesignToken
1012
- },
1066
+ color: DesignToken;
1067
+ "font-family": DesignToken;
1068
+ "font-size": DesignToken;
1069
+ "font-weight": DesignToken;
1070
+ "line-height": DesignToken;
1071
+ inverse: {
1072
+ color: DesignToken;
1073
+ };
1074
+ };
1013
1075
  "page-menu": {
1014
- "column-gap": DesignToken,
1015
- "row-gap": DesignToken,
1016
- "item": {
1017
- "color": DesignToken,
1018
- "font-family": DesignToken,
1019
- "font-size": DesignToken,
1020
- "font-weight": DesignToken,
1021
- "gap": DesignToken,
1022
- "line-height": DesignToken,
1023
- "outline-offset": DesignToken,
1024
- "text-decoration-line": DesignToken,
1025
- "text-decoration-thickness": DesignToken,
1026
- "text-underline-offset": DesignToken,
1027
- "hover": {
1028
- "color": DesignToken,
1029
- "text-decoration-line": DesignToken
1030
- }
1031
- }
1032
- },
1033
- "pagination": {
1034
- "color": DesignToken,
1035
- "font-family": DesignToken,
1036
- "font-size": DesignToken,
1037
- "font-weight": DesignToken,
1038
- "line-height": DesignToken,
1039
- "button": {
1040
- "gap": DesignToken,
1041
- "outline-offset": DesignToken,
1042
- "padding-inline": DesignToken,
1043
- "text-decoration-line": DesignToken,
1044
- "text-decoration-thickness": DesignToken,
1045
- "text-underline-offset": DesignToken,
1046
- "current": {
1047
- "font-weight": DesignToken
1048
- },
1049
- "hover": {
1050
- "color": DesignToken,
1051
- "text-decoration-line": DesignToken
1052
- }
1053
- }
1054
- },
1055
- "paragraph": {
1056
- "color": DesignToken,
1057
- "font-family": DesignToken,
1058
- "font-size": DesignToken,
1059
- "font-weight": DesignToken,
1060
- "line-height": DesignToken,
1061
- "inverse-color": DesignToken,
1062
- "small": {
1063
- "font-size": DesignToken,
1064
- "line-height": DesignToken
1065
- },
1066
- "large": {
1067
- "font-size": DesignToken,
1068
- "line-height": DesignToken
1069
- }
1070
- },
1076
+ "column-gap": DesignToken;
1077
+ "row-gap": DesignToken;
1078
+ item: {
1079
+ color: DesignToken;
1080
+ "font-family": DesignToken;
1081
+ "font-size": DesignToken;
1082
+ "font-weight": DesignToken;
1083
+ gap: DesignToken;
1084
+ "line-height": DesignToken;
1085
+ "outline-offset": DesignToken;
1086
+ "text-decoration-line": DesignToken;
1087
+ "text-decoration-thickness": DesignToken;
1088
+ "text-underline-offset": DesignToken;
1089
+ hover: {
1090
+ color: DesignToken;
1091
+ "text-decoration-line": DesignToken;
1092
+ };
1093
+ };
1094
+ };
1095
+ pagination: {
1096
+ "font-family": DesignToken;
1097
+ "font-size": DesignToken;
1098
+ "font-weight": DesignToken;
1099
+ "line-height": DesignToken;
1100
+ link: {
1101
+ color: DesignToken;
1102
+ gap: DesignToken;
1103
+ "outline-offset": DesignToken;
1104
+ "padding-inline": DesignToken;
1105
+ "text-decoration-line": DesignToken;
1106
+ "text-decoration-thickness": DesignToken;
1107
+ "text-underline-offset": DesignToken;
1108
+ current: {
1109
+ "font-weight": DesignToken;
1110
+ };
1111
+ hover: {
1112
+ color: DesignToken;
1113
+ "text-decoration-line": DesignToken;
1114
+ };
1115
+ };
1116
+ };
1117
+ paragraph: {
1118
+ color: DesignToken;
1119
+ "font-family": DesignToken;
1120
+ "font-size": DesignToken;
1121
+ "font-weight": DesignToken;
1122
+ "line-height": DesignToken;
1123
+ inverse: {
1124
+ color: DesignToken;
1125
+ };
1126
+ small: {
1127
+ "font-size": DesignToken;
1128
+ "line-height": DesignToken;
1129
+ };
1130
+ large: {
1131
+ "font-size": DesignToken;
1132
+ "line-height": DesignToken;
1133
+ };
1134
+ };
1071
1135
  "password-input": {
1072
- "background-color": DesignToken,
1073
- "box-shadow": DesignToken,
1074
- "color": DesignToken,
1075
- "font-family": DesignToken,
1076
- "font-size": DesignToken,
1077
- "font-weight": DesignToken,
1078
- "line-height": DesignToken,
1079
- "outline-offset": DesignToken,
1080
- "padding-block": DesignToken,
1081
- "padding-inline": DesignToken,
1082
- "disabled": {
1083
- "background-color": DesignToken,
1084
- "box-shadow": DesignToken,
1085
- "color": DesignToken
1086
- },
1087
- "hover": {
1088
- "box-shadow": DesignToken
1089
- },
1090
- "invalid": {
1091
- "box-shadow": DesignToken,
1092
- "hover": {
1093
- "box-shadow": DesignToken
1094
- }
1095
- },
1096
- "placeholder": {
1097
- "color": DesignToken
1098
- }
1099
- },
1100
- "radio": {
1101
- "color": DesignToken,
1102
- "font-family": DesignToken,
1103
- "font-size": DesignToken,
1104
- "font-weight": DesignToken,
1105
- "gap": DesignToken,
1106
- "line-height": DesignToken,
1107
- "outline-offset": DesignToken,
1108
- "text-decoration-thickness": DesignToken,
1109
- "text-underline-offset": DesignToken,
1136
+ "background-color": DesignToken;
1137
+ "box-shadow": DesignToken;
1138
+ color: DesignToken;
1139
+ "font-family": DesignToken;
1140
+ "font-size": DesignToken;
1141
+ "font-weight": DesignToken;
1142
+ "line-height": DesignToken;
1143
+ "outline-offset": DesignToken;
1144
+ "padding-block": DesignToken;
1145
+ "padding-inline": DesignToken;
1146
+ disabled: {
1147
+ "background-color": DesignToken;
1148
+ "box-shadow": DesignToken;
1149
+ color: DesignToken;
1150
+ cursor: DesignToken;
1151
+ };
1152
+ hover: {
1153
+ "box-shadow": DesignToken;
1154
+ };
1155
+ invalid: {
1156
+ "box-shadow": DesignToken;
1157
+ hover: {
1158
+ "box-shadow": DesignToken;
1159
+ };
1160
+ };
1161
+ placeholder: {
1162
+ color: DesignToken;
1163
+ };
1164
+ };
1165
+ radio: {
1166
+ color: DesignToken;
1167
+ cursor: DesignToken;
1168
+ "font-family": DesignToken;
1169
+ "font-size": DesignToken;
1170
+ "font-weight": DesignToken;
1171
+ gap: DesignToken;
1172
+ "line-height": DesignToken;
1173
+ "outline-offset": DesignToken;
1174
+ "text-decoration-thickness": DesignToken;
1175
+ "text-underline-offset": DesignToken;
1110
1176
  "checked-indicator": {
1111
- "fill": DesignToken,
1112
- "disabled": {
1113
- "fill": DesignToken
1114
- },
1177
+ fill: DesignToken;
1178
+ disabled: {
1179
+ fill: DesignToken;
1180
+ };
1115
1181
  "disabled-invalid": {
1116
- "fill": DesignToken,
1117
- "hover": {
1118
- "fill": DesignToken
1119
- }
1120
- },
1121
- "hover": {
1122
- "fill": DesignToken
1123
- },
1124
- "invalid": {
1125
- "fill": DesignToken,
1126
- "hover": {
1127
- "fill": DesignToken
1128
- }
1129
- }
1130
- },
1131
- "circle": {
1132
- "stroke": DesignToken,
1133
- "disabled": {
1134
- "stroke": DesignToken
1135
- },
1182
+ fill: DesignToken;
1183
+ hover: {
1184
+ fill: DesignToken;
1185
+ };
1186
+ };
1187
+ hover: {
1188
+ fill: DesignToken;
1189
+ };
1190
+ invalid: {
1191
+ fill: DesignToken;
1192
+ hover: {
1193
+ fill: DesignToken;
1194
+ };
1195
+ };
1196
+ };
1197
+ "hover-indicator": {
1198
+ "stroke-width": DesignToken;
1199
+ hover: {
1200
+ stroke: DesignToken;
1201
+ };
1202
+ invalid: {
1203
+ hover: {
1204
+ stroke: DesignToken;
1205
+ };
1206
+ };
1207
+ };
1208
+ circle: {
1209
+ fill: DesignToken;
1210
+ stroke: DesignToken;
1211
+ "stroke-width": DesignToken;
1212
+ disabled: {
1213
+ stroke: DesignToken;
1214
+ };
1136
1215
  "disabled-invalid": {
1137
- "stroke": DesignToken,
1138
- "hover": {
1139
- "stroke": DesignToken
1140
- }
1141
- },
1142
- "hover": {
1143
- "stroke": DesignToken
1144
- },
1145
- "invalid": {
1146
- "stroke": DesignToken,
1147
- "hover": {
1148
- "stroke": DesignToken
1149
- }
1150
- }
1151
- },
1152
- "disabled": {
1153
- "color": DesignToken
1154
- },
1155
- "hover": {
1156
- "color": DesignToken,
1157
- "text-decoration-line": DesignToken
1158
- },
1216
+ stroke: DesignToken;
1217
+ hover: {
1218
+ stroke: DesignToken;
1219
+ };
1220
+ };
1221
+ hover: {
1222
+ stroke: DesignToken;
1223
+ };
1224
+ invalid: {
1225
+ stroke: DesignToken;
1226
+ hover: {
1227
+ stroke: DesignToken;
1228
+ };
1229
+ };
1230
+ };
1231
+ disabled: {
1232
+ color: DesignToken;
1233
+ cursor: DesignToken;
1234
+ };
1235
+ hover: {
1236
+ color: DesignToken;
1237
+ "text-decoration-line": DesignToken;
1238
+ };
1159
1239
  "icon-container": {
1160
- "block-size": DesignToken,
1161
- "inline-size": DesignToken
1162
- }
1163
- },
1164
- "row": {
1165
- "gap": {
1166
- "no": DesignToken,
1167
- "xs": DesignToken,
1168
- "sm": DesignToken,
1169
- "md": DesignToken,
1170
- "lg": DesignToken,
1171
- "xl": DesignToken
1172
- }
1173
- },
1174
- "screen": {
1175
- "background-color": DesignToken,
1176
- "wide": {
1177
- "max-inline-size": DesignToken
1178
- },
1240
+ "block-size": DesignToken;
1241
+ "inline-size": DesignToken;
1242
+ };
1243
+ };
1244
+ row: {
1245
+ gap: {
1246
+ "x-small": DesignToken;
1247
+ small: DesignToken;
1248
+ medium: DesignToken;
1249
+ large: DesignToken;
1250
+ "x-large": DesignToken;
1251
+ };
1252
+ };
1253
+ screen: {
1254
+ "background-color": DesignToken;
1255
+ wide: {
1256
+ "max-inline-size": DesignToken;
1257
+ };
1179
1258
  "x-wide": {
1180
- "max-inline-size": DesignToken
1181
- }
1182
- },
1259
+ "max-inline-size": DesignToken;
1260
+ };
1261
+ };
1183
1262
  "search-field": {
1184
- "button": {
1185
- "background-color": DesignToken,
1186
- "color": DesignToken,
1187
- "outline-offset": DesignToken,
1188
- "padding-block": DesignToken,
1189
- "padding-inline": DesignToken,
1190
- "hover": {
1191
- "background-color": DesignToken
1192
- }
1193
- },
1194
- "input": {
1195
- "background-color": DesignToken,
1196
- "box-shadow": DesignToken,
1197
- "color": DesignToken,
1198
- "font-family": DesignToken,
1199
- "font-size": DesignToken,
1200
- "font-weight": DesignToken,
1201
- "line-height": DesignToken,
1202
- "outline-offset": DesignToken,
1203
- "padding-block": DesignToken,
1204
- "padding-inline": DesignToken,
1263
+ input: {
1264
+ "background-color": DesignToken;
1265
+ "box-shadow": DesignToken;
1266
+ color: DesignToken;
1267
+ "font-family": DesignToken;
1268
+ "font-size": DesignToken;
1269
+ "font-weight": DesignToken;
1270
+ "line-height": DesignToken;
1271
+ "outline-offset": DesignToken;
1272
+ "padding-block": DesignToken;
1273
+ "padding-inline": DesignToken;
1205
1274
  "cancel-button": {
1206
- "background-image": DesignToken,
1207
- "block-size": DesignToken,
1208
- "color": DesignToken,
1209
- "inline-size": DesignToken
1210
- },
1211
- "hover": {
1212
- "box-shadow": DesignToken
1213
- },
1214
- "invalid": {
1215
- "box-shadow": DesignToken,
1216
- "hover": {
1217
- "box-shadow": DesignToken
1218
- }
1219
- },
1220
- "placeholder": {
1221
- "color": DesignToken
1222
- }
1223
- }
1224
- },
1225
- "select": {
1226
- "background-color": DesignToken,
1227
- "background-image": DesignToken,
1228
- "background-position": DesignToken,
1229
- "box-shadow": DesignToken,
1230
- "color": DesignToken,
1231
- "font-family": DesignToken,
1232
- "font-size": DesignToken,
1233
- "font-weight": DesignToken,
1234
- "line-height": DesignToken,
1235
- "outline-offset": DesignToken,
1236
- "padding-block": DesignToken,
1237
- "padding-inline": DesignToken,
1238
- "disabled": {
1239
- "background-image": DesignToken,
1240
- "box-shadow": DesignToken,
1241
- "color": DesignToken
1242
- },
1243
- "hover": {
1244
- "box-shadow": DesignToken
1245
- },
1246
- "invalid": {
1247
- "box-shadow": DesignToken,
1248
- "hover": {
1249
- "box-shadow": DesignToken
1250
- }
1251
- },
1252
- "option": {
1253
- "disabled": {
1254
- "color": DesignToken
1255
- }
1256
- }
1257
- },
1275
+ "background-image": DesignToken;
1276
+ "block-size": DesignToken;
1277
+ color: DesignToken;
1278
+ cursor: DesignToken;
1279
+ "inline-size": DesignToken;
1280
+ };
1281
+ hover: {
1282
+ "box-shadow": DesignToken;
1283
+ };
1284
+ invalid: {
1285
+ "box-shadow": DesignToken;
1286
+ hover: {
1287
+ "box-shadow": DesignToken;
1288
+ };
1289
+ };
1290
+ placeholder: {
1291
+ color: DesignToken;
1292
+ };
1293
+ };
1294
+ };
1295
+ select: {
1296
+ "background-color": DesignToken;
1297
+ "background-image": DesignToken;
1298
+ "background-position": DesignToken;
1299
+ "box-shadow": DesignToken;
1300
+ color: DesignToken;
1301
+ "font-family": DesignToken;
1302
+ "font-size": DesignToken;
1303
+ "font-weight": DesignToken;
1304
+ "line-height": DesignToken;
1305
+ "outline-offset": DesignToken;
1306
+ "padding-block": DesignToken;
1307
+ "padding-inline": DesignToken;
1308
+ disabled: {
1309
+ "background-image": DesignToken;
1310
+ "box-shadow": DesignToken;
1311
+ color: DesignToken;
1312
+ cursor: DesignToken;
1313
+ };
1314
+ hover: {
1315
+ "box-shadow": DesignToken;
1316
+ };
1317
+ invalid: {
1318
+ "box-shadow": DesignToken;
1319
+ hover: {
1320
+ "box-shadow": DesignToken;
1321
+ };
1322
+ };
1323
+ option: {
1324
+ disabled: {
1325
+ color: DesignToken;
1326
+ };
1327
+ };
1328
+ };
1258
1329
  "skip-link": {
1259
- "background-color": DesignToken,
1260
- "color": DesignToken,
1261
- "font-family": DesignToken,
1262
- "font-size": DesignToken,
1263
- "font-weight": DesignToken,
1264
- "line-height": DesignToken,
1265
- "outline-offset": DesignToken,
1266
- "padding-block": DesignToken,
1267
- "padding-inline": DesignToken,
1268
- "hover": {
1269
- "background-color": DesignToken
1270
- }
1271
- },
1272
- "spotlight": {
1273
- "blue": {
1274
- "background-color": DesignToken
1275
- },
1276
- "dark-blue": {
1277
- "background-color": DesignToken
1278
- },
1279
- "dark-green": {
1280
- "background-color": DesignToken
1281
- },
1282
- "green": {
1283
- "background-color": DesignToken
1284
- },
1285
- "magenta": {
1286
- "background-color": DesignToken
1287
- },
1288
- "orange": {
1289
- "background-color": DesignToken
1290
- },
1291
- "purple": {
1292
- "background-color": DesignToken
1293
- },
1294
- "yellow": {
1295
- "background-color": DesignToken
1296
- }
1297
- },
1298
- "switch": {
1299
- "background-color": DesignToken,
1300
- "font-family": DesignToken,
1301
- "outline-offset": DesignToken,
1302
- "inline-size": DesignToken,
1303
- "thumb": {
1304
- "background-color": DesignToken,
1305
- "inline-size": DesignToken,
1306
- "block-size": DesignToken,
1307
- "hover": {
1308
- "box-shadow": DesignToken,
1309
- "color": DesignToken
1310
- }
1311
- },
1312
- "checked": {
1313
- "background-color": DesignToken
1314
- },
1315
- "disabled": {
1316
- "background-color": DesignToken
1317
- }
1318
- },
1330
+ "background-color": DesignToken;
1331
+ color: DesignToken;
1332
+ "font-family": DesignToken;
1333
+ "font-size": DesignToken;
1334
+ "font-weight": DesignToken;
1335
+ "line-height": DesignToken;
1336
+ "outline-offset": DesignToken;
1337
+ "padding-block": DesignToken;
1338
+ "padding-inline": DesignToken;
1339
+ hover: {
1340
+ "background-color": DesignToken;
1341
+ };
1342
+ };
1343
+ spotlight: {
1344
+ "background-color": DesignToken;
1345
+ azure: {
1346
+ "background-color": DesignToken;
1347
+ };
1348
+ green: {
1349
+ "background-color": DesignToken;
1350
+ };
1351
+ lime: {
1352
+ "background-color": DesignToken;
1353
+ };
1354
+ magenta: {
1355
+ "background-color": DesignToken;
1356
+ };
1357
+ orange: {
1358
+ "background-color": DesignToken;
1359
+ };
1360
+ yellow: {
1361
+ "background-color": DesignToken;
1362
+ };
1363
+ };
1364
+ switch: {
1365
+ "background-color": DesignToken;
1366
+ cursor: DesignToken;
1367
+ "outline-offset": DesignToken;
1368
+ "inline-size": DesignToken;
1369
+ thumb: {
1370
+ "background-color": DesignToken;
1371
+ "inline-size": DesignToken;
1372
+ "block-size": DesignToken;
1373
+ hover: {
1374
+ "box-shadow": DesignToken;
1375
+ color: DesignToken;
1376
+ };
1377
+ };
1378
+ checked: {
1379
+ "background-color": DesignToken;
1380
+ };
1381
+ disabled: {
1382
+ "background-color": DesignToken;
1383
+ cursor: DesignToken;
1384
+ };
1385
+ };
1319
1386
  "table-of-contents": {
1320
- "font-family": DesignToken,
1321
- "font-size": DesignToken,
1322
- "font-weight": DesignToken,
1323
- "gap": DesignToken,
1324
- "line-height": DesignToken,
1325
- "link": {
1326
- "color": DesignToken,
1327
- "outline-offset": DesignToken,
1328
- "text-decoration-line": DesignToken,
1329
- "text-decoration-thickness": DesignToken,
1330
- "text-underline-offset": DesignToken,
1331
- "hover": {
1332
- "color": DesignToken,
1333
- "text-decoration-line": DesignToken
1334
- }
1335
- },
1336
- "list": {
1337
- "gap": DesignToken,
1338
- "list": {
1339
- "padding-block-start": DesignToken,
1340
- "padding-inline-start": DesignToken
1341
- }
1342
- },
1343
- "heading": {
1344
- "font-weight": DesignToken,
1345
- "font-size": DesignToken,
1346
- "line-height": DesignToken
1347
- }
1348
- },
1349
- "table": {
1350
- "color": DesignToken,
1351
- "font-family": DesignToken,
1352
- "font-size": DesignToken,
1353
- "font-weight": DesignToken,
1354
- "line-height": DesignToken,
1355
- "caption": {
1356
- "font-weight": DesignToken
1357
- },
1358
- "cell": {
1359
- "border-block-end": DesignToken,
1360
- "padding-block": DesignToken,
1361
- "padding-inline": DesignToken
1362
- },
1387
+ "font-family": DesignToken;
1388
+ "font-size": DesignToken;
1389
+ "font-weight": DesignToken;
1390
+ gap: DesignToken;
1391
+ "line-height": DesignToken;
1392
+ link: {
1393
+ color: DesignToken;
1394
+ "outline-offset": DesignToken;
1395
+ "text-decoration-line": DesignToken;
1396
+ "text-decoration-thickness": DesignToken;
1397
+ "text-underline-offset": DesignToken;
1398
+ hover: {
1399
+ color: DesignToken;
1400
+ "text-decoration-line": DesignToken;
1401
+ };
1402
+ };
1403
+ list: {
1404
+ gap: DesignToken;
1405
+ list: {
1406
+ "padding-block-start": DesignToken;
1407
+ "padding-inline-start": DesignToken;
1408
+ };
1409
+ };
1410
+ heading: {
1411
+ "font-weight": DesignToken;
1412
+ "font-size": DesignToken;
1413
+ "line-height": DesignToken;
1414
+ };
1415
+ };
1416
+ table: {
1417
+ color: DesignToken;
1418
+ "font-family": DesignToken;
1419
+ "font-size": DesignToken;
1420
+ "font-weight": DesignToken;
1421
+ "line-height": DesignToken;
1422
+ caption: {
1423
+ "font-weight": DesignToken;
1424
+ };
1425
+ cell: {
1426
+ "border-block-end": DesignToken;
1427
+ "padding-block": DesignToken;
1428
+ "padding-inline": DesignToken;
1429
+ };
1363
1430
  "header-cell": {
1364
- "font-weight": DesignToken
1365
- }
1366
- },
1367
- "tabs": {
1368
- "gap": DesignToken,
1369
- "list": {
1370
- "background-color": DesignToken,
1371
- "border-block-end": DesignToken
1372
- },
1373
- "button": {
1374
- "color": DesignToken,
1375
- "cursor": DesignToken,
1376
- "font-family": DesignToken,
1377
- "font-size": DesignToken,
1378
- "font-weight": DesignToken,
1379
- "line-height": DesignToken,
1380
- "outline-offset": DesignToken,
1381
- "padding-block": DesignToken,
1382
- "padding-inline": DesignToken,
1383
- "hover": {
1384
- "color": DesignToken,
1385
- "box-shadow": DesignToken
1386
- },
1387
- "selected": {
1388
- "background-color": DesignToken,
1389
- "color": DesignToken
1390
- },
1391
- "disabled": {
1392
- "color": DesignToken,
1393
- "cursor": DesignToken
1394
- }
1395
- }
1396
- },
1431
+ "font-weight": DesignToken;
1432
+ };
1433
+ };
1434
+ tabs: {
1435
+ gap: DesignToken;
1436
+ list: {
1437
+ "box-shadow": DesignToken;
1438
+ };
1439
+ button: {
1440
+ color: DesignToken;
1441
+ cursor: DesignToken;
1442
+ "font-family": DesignToken;
1443
+ "font-size": DesignToken;
1444
+ "font-weight": DesignToken;
1445
+ "line-height": DesignToken;
1446
+ "outline-offset": DesignToken;
1447
+ "padding-block": DesignToken;
1448
+ "padding-inline": DesignToken;
1449
+ hover: {
1450
+ color: DesignToken;
1451
+ "box-shadow": DesignToken;
1452
+ };
1453
+ selected: {
1454
+ "box-shadow": DesignToken;
1455
+ "font-weight": DesignToken;
1456
+ };
1457
+ disabled: {
1458
+ color: DesignToken;
1459
+ cursor: DesignToken;
1460
+ };
1461
+ };
1462
+ };
1397
1463
  "text-area": {
1398
- "background-color": DesignToken,
1399
- "box-shadow": DesignToken,
1400
- "color": DesignToken,
1401
- "font-family": DesignToken,
1402
- "font-size": DesignToken,
1403
- "font-weight": DesignToken,
1404
- "line-height": DesignToken,
1405
- "min-block-size": DesignToken,
1406
- "outline-offset": DesignToken,
1407
- "padding-block": DesignToken,
1408
- "padding-inline": DesignToken,
1409
- "disabled": {
1410
- "background-color": DesignToken,
1411
- "box-shadow": DesignToken,
1412
- "color": DesignToken,
1413
- "cursor": DesignToken
1414
- },
1415
- "hover": {
1416
- "box-shadow": DesignToken
1417
- },
1418
- "invalid": {
1419
- "box-shadow": DesignToken,
1420
- "hover": {
1421
- "box-shadow": DesignToken
1422
- }
1423
- },
1424
- "placeholder": {
1425
- "color": DesignToken
1426
- }
1427
- },
1464
+ "background-color": DesignToken;
1465
+ "box-shadow": DesignToken;
1466
+ color: DesignToken;
1467
+ "font-family": DesignToken;
1468
+ "font-size": DesignToken;
1469
+ "font-weight": DesignToken;
1470
+ "line-height": DesignToken;
1471
+ "min-block-size": DesignToken;
1472
+ "outline-offset": DesignToken;
1473
+ "padding-block": DesignToken;
1474
+ "padding-inline": DesignToken;
1475
+ disabled: {
1476
+ "background-color": DesignToken;
1477
+ "box-shadow": DesignToken;
1478
+ color: DesignToken;
1479
+ cursor: DesignToken;
1480
+ };
1481
+ hover: {
1482
+ "box-shadow": DesignToken;
1483
+ };
1484
+ invalid: {
1485
+ "box-shadow": DesignToken;
1486
+ hover: {
1487
+ "box-shadow": DesignToken;
1488
+ };
1489
+ };
1490
+ placeholder: {
1491
+ color: DesignToken;
1492
+ };
1493
+ };
1428
1494
  "text-input": {
1429
- "background-color": DesignToken,
1430
- "box-shadow": DesignToken,
1431
- "color": DesignToken,
1432
- "font-family": DesignToken,
1433
- "font-size": DesignToken,
1434
- "font-weight": DesignToken,
1435
- "line-height": DesignToken,
1436
- "outline-offset": DesignToken,
1437
- "padding-block": DesignToken,
1438
- "padding-inline": DesignToken,
1439
- "disabled": {
1440
- "background-color": DesignToken,
1441
- "box-shadow": DesignToken,
1442
- "color": DesignToken
1443
- },
1444
- "hover": {
1445
- "box-shadow": DesignToken
1446
- },
1447
- "invalid": {
1448
- "box-shadow": DesignToken,
1449
- "hover": {
1450
- "box-shadow": DesignToken
1451
- }
1452
- },
1453
- "placeholder": {
1454
- "color": DesignToken
1455
- }
1456
- },
1495
+ "background-color": DesignToken;
1496
+ "box-shadow": DesignToken;
1497
+ color: DesignToken;
1498
+ "font-family": DesignToken;
1499
+ "font-size": DesignToken;
1500
+ "font-weight": DesignToken;
1501
+ "line-height": DesignToken;
1502
+ "outline-offset": DesignToken;
1503
+ "padding-block": DesignToken;
1504
+ "padding-inline": DesignToken;
1505
+ disabled: {
1506
+ "background-color": DesignToken;
1507
+ "box-shadow": DesignToken;
1508
+ color: DesignToken;
1509
+ cursor: DesignToken;
1510
+ };
1511
+ hover: {
1512
+ "box-shadow": DesignToken;
1513
+ };
1514
+ invalid: {
1515
+ "box-shadow": DesignToken;
1516
+ hover: {
1517
+ "box-shadow": DesignToken;
1518
+ };
1519
+ };
1520
+ placeholder: {
1521
+ color: DesignToken;
1522
+ };
1523
+ };
1457
1524
  "time-input": {
1458
- "background-color": DesignToken,
1459
- "box-shadow": DesignToken,
1460
- "color": DesignToken,
1461
- "font-family": DesignToken,
1462
- "font-size": DesignToken,
1463
- "font-weight": DesignToken,
1464
- "line-height": DesignToken,
1465
- "outline-offset": DesignToken,
1466
- "padding-block": DesignToken,
1467
- "padding-inline": DesignToken,
1525
+ "background-color": DesignToken;
1526
+ "box-shadow": DesignToken;
1527
+ color: DesignToken;
1528
+ "font-family": DesignToken;
1529
+ "font-size": DesignToken;
1530
+ "font-weight": DesignToken;
1531
+ "line-height": DesignToken;
1532
+ "outline-offset": DesignToken;
1533
+ "padding-block": DesignToken;
1534
+ "padding-inline": DesignToken;
1468
1535
  "calender-picker-indicator": {
1469
- "background-image": DesignToken
1470
- },
1471
- "disabled": {
1472
- "background-color": DesignToken,
1473
- "box-shadow": DesignToken,
1474
- "color": DesignToken,
1536
+ "background-image": DesignToken;
1537
+ cursor: DesignToken;
1538
+ };
1539
+ disabled: {
1540
+ "background-color": DesignToken;
1541
+ "box-shadow": DesignToken;
1542
+ color: DesignToken;
1543
+ cursor: DesignToken;
1475
1544
  "calender-picker-indicator": {
1476
- "background-image": DesignToken
1477
- }
1478
- },
1479
- "hover": {
1480
- "box-shadow": DesignToken,
1545
+ "background-image": DesignToken;
1546
+ };
1547
+ };
1548
+ hover: {
1549
+ "box-shadow": DesignToken;
1481
1550
  "calender-picker-indicator": {
1482
- "background-image": DesignToken
1483
- }
1484
- },
1485
- "invalid": {
1486
- "box-shadow": DesignToken,
1487
- "hover": {
1488
- "box-shadow": DesignToken
1489
- }
1490
- }
1491
- },
1551
+ "background-image": DesignToken;
1552
+ };
1553
+ };
1554
+ invalid: {
1555
+ "box-shadow": DesignToken;
1556
+ hover: {
1557
+ "box-shadow": DesignToken;
1558
+ };
1559
+ };
1560
+ };
1492
1561
  "top-task-link": {
1493
- "gap": DesignToken,
1494
- "description": {
1495
- "color": DesignToken,
1496
- "font-family": DesignToken,
1497
- "font-size": DesignToken,
1498
- "font-weight": DesignToken,
1499
- "line-height": DesignToken
1500
- },
1501
- "label": {
1502
- "color": DesignToken,
1503
- "font-family": DesignToken,
1504
- "font-size": DesignToken,
1505
- "font-weight": DesignToken,
1506
- "line-height": DesignToken,
1507
- "text-decoration-line": DesignToken,
1508
- "text-decoration-thickness": DesignToken,
1509
- "text-underline-offset": DesignToken,
1510
- "hover": {
1511
- "color": DesignToken,
1512
- "text-decoration-line": DesignToken
1513
- }
1514
- },
1515
- "outline-offset": DesignToken
1516
- },
1562
+ gap: DesignToken;
1563
+ description: {
1564
+ color: DesignToken;
1565
+ "font-family": DesignToken;
1566
+ "font-size": DesignToken;
1567
+ "font-weight": DesignToken;
1568
+ "line-height": DesignToken;
1569
+ };
1570
+ label: {
1571
+ color: DesignToken;
1572
+ "font-family": DesignToken;
1573
+ "font-size": DesignToken;
1574
+ "font-weight": DesignToken;
1575
+ "line-height": DesignToken;
1576
+ "text-decoration-line": DesignToken;
1577
+ "text-decoration-thickness": DesignToken;
1578
+ "text-underline-offset": DesignToken;
1579
+ hover: {
1580
+ color: DesignToken;
1581
+ "text-decoration-line": DesignToken;
1582
+ };
1583
+ };
1584
+ "outline-offset": DesignToken;
1585
+ };
1517
1586
  "unordered-list": {
1518
- "color": DesignToken,
1519
- "font-family": DesignToken,
1520
- "font-size": DesignToken,
1521
- "font-weight": DesignToken,
1522
- "gap": DesignToken,
1523
- "inverse-color": DesignToken,
1524
- "line-height": DesignToken,
1525
- "list-style-type": DesignToken,
1526
- "item": {
1527
- "margin-inline-start": DesignToken,
1528
- "padding-inline-start": DesignToken
1529
- },
1587
+ color: DesignToken;
1588
+ "font-family": DesignToken;
1589
+ "font-size": DesignToken;
1590
+ "font-weight": DesignToken;
1591
+ gap: DesignToken;
1592
+ "line-height": DesignToken;
1593
+ "list-style-type": DesignToken;
1594
+ inverse: {
1595
+ color: DesignToken;
1596
+ };
1597
+ small: {
1598
+ "font-size": DesignToken;
1599
+ "line-height": DesignToken;
1600
+ };
1601
+ item: {
1602
+ "margin-inline-start": DesignToken;
1603
+ "padding-inline-start": DesignToken;
1604
+ };
1530
1605
  "unordered-list": {
1531
- "gap": DesignToken,
1532
- "list-style-type": DesignToken,
1533
- "padding-block-end": DesignToken,
1534
- "padding-block-start": DesignToken,
1535
- "item": {
1536
- "margin-inline-start": DesignToken,
1537
- "padding-inline-start": DesignToken
1538
- }
1539
- },
1540
- "small": {
1541
- "font-size": DesignToken,
1542
- "line-height": DesignToken
1543
- }
1544
- }
1545
- }
1546
- }
1606
+ gap: DesignToken;
1607
+ "list-style-type": DesignToken;
1608
+ "padding-block-end": DesignToken;
1609
+ "padding-block-start": DesignToken;
1610
+ item: {
1611
+ "margin-inline-start": DesignToken;
1612
+ "padding-inline-start": DesignToken;
1613
+ };
1614
+ };
1615
+ };
1616
+ };
1617
+ };