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