@amsterdam/design-system-tokens 0.3.0 → 0.4.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 (21) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/_variables.scss +92 -20
  3. package/dist/index.css +92 -20
  4. package/dist/index.d.ts +83 -11
  5. package/dist/index.js +118 -46
  6. package/dist/index.json +117 -45
  7. package/dist/index.tokens.json +205 -51
  8. package/dist/root.css +92 -20
  9. package/dist/tokens.d.ts +172 -18
  10. package/dist/tokens.js +3884 -2248
  11. package/dist/variables.less +92 -20
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/color.tokens.json +5 -6
  14. package/src/components/amsterdam/alert.tokens.json +12 -9
  15. package/src/components/amsterdam/badge.tokens.json +49 -0
  16. package/src/components/amsterdam/dialog.tokens.json +0 -7
  17. package/src/components/amsterdam/icon-button.tokens.json +37 -0
  18. package/src/components/amsterdam/link-list.tokens.json +61 -0
  19. package/src/components/amsterdam/mega-menu.tokens.json +12 -0
  20. package/src/components/amsterdam/spotlight.tokens.json +3 -3
  21. package/src/components/amsterdam/table.tokens.json +20 -0
package/dist/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Dec 2023 12:50:01 GMT
3
+ * Generated on Wed, 31 Jan 2024 12:56:24 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -36,12 +36,18 @@
36
36
  --amsterdam-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
37
37
  --amsterdam-ordered-list-list-style-type: decimal;
38
38
  --amsterdam-ordered-list-gap: 0.75rem;
39
+ --amsterdam-mega-menu-list-category-padding-block-start: 1rem;
40
+ --amsterdam-mega-menu-list-category-column-width: 20rem;
39
41
  --amsterdam-mark-background-color: var(--amsterdam-color-yellow);
40
42
  --amsterdam-logo-height: 2.5rem;
41
43
  --amsterdam-link-in-list-gap: 0.5em;
42
44
  --amsterdam-link-inline-line-height: inherit;
43
45
  --amsterdam-link-inline-font-size: inherit;
44
46
  --amsterdam-link-inline-font-family: inherit;
47
+ --amsterdam-link-list-link-gap: 0.5em;
48
+ --amsterdam-link-list-gap: 0.5em;
49
+ --amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
50
+ --amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
45
51
  --amsterdam-grid-wide-column-count: 12;
46
52
  --amsterdam-grid-medium-column-count: 8;
47
53
  --amsterdam-grid-compact-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
@@ -57,13 +63,14 @@
57
63
  --amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
58
64
  --amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
59
65
  --amsterdam-dialog-form-gap: 1.5rem;
60
- --amsterdam-dialog-close-background-color: transparent;
61
66
  --amsterdam-dialog-backdrop-background: #0006;
62
67
  --amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
63
68
  --amsterdam-dialog-border: 0;
64
69
  --amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
65
- --amsterdam-alert-close-background-color: transparent;
70
+ --amsterdam-badge-padding-inline: 0.5rem;
66
71
  --amsterdam-alert-gap: 1rem;
72
+ --amsterdam-alert-border-style: solid;
73
+ --amsterdam-alert-border-width: 4px;
67
74
  --amsterdam-spacing-inset-xl: 2.5rem;
68
75
  --amsterdam-spacing-inset-lg: 1.5rem;
69
76
  --amsterdam-spacing-inset-md: 1rem;
@@ -116,13 +123,12 @@
116
123
  --amsterdam-proportion-square: 1 / 1;
117
124
  --amsterdam-proportion-tall: 4 / 5;
118
125
  --amsterdam-proportion-x-tall: 9 / 16;
119
- --amsterdam-color-neutral-grey4: #323232;
120
126
  --amsterdam-color-neutral-grey3: #767676;
121
- --amsterdam-color-neutral-grey2: #B4B4B4;
122
- --amsterdam-color-neutral-grey1: #E6E6E6;
127
+ --amsterdam-color-neutral-grey2: #BEBEBE;
128
+ --amsterdam-color-neutral-grey1: #E8E8E8;
123
129
  --amsterdam-color-magenta: #E50082;
124
130
  --amsterdam-color-purple: #A00078;
125
- --amsterdam-color-blue: #009DEC;
131
+ --amsterdam-color-blue: #009DE6;
126
132
  --amsterdam-color-dark-green: #00A03C;
127
133
  --amsterdam-color-green: #BED200;
128
134
  --amsterdam-color-yellow: #FFE600;
@@ -130,7 +136,7 @@
130
136
  --amsterdam-color-dark-blue: #102E62;
131
137
  --amsterdam-color-primary-red: #EC0000;
132
138
  --amsterdam-color-primary-blue: #004699;
133
- --amsterdam-color-primary-white: #ffffff;
139
+ --amsterdam-color-primary-white: #FFFFFF;
134
140
  --amsterdam-color-primary-black: #000000;
135
141
  --utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2);
136
142
  --utrecht-button-subtle-focus-color: var(--amsterdam-color-dark-blue);
@@ -196,6 +202,14 @@
196
202
  --amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
197
203
  --amsterdam-text-input-color: var(--amsterdam-color-primary-black);
198
204
  --amsterdam-text-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
205
+ --amsterdam-table-header-cell-font-weight: var(--amsterdam-typography-font-weight-bold);
206
+ --amsterdam-table-cell-border-bottom: 1px solid var(--amsterdam-color-neutral-grey1);
207
+ --amsterdam-table-caption-font-weight: var(--amsterdam-typography-font-weight-bold);
208
+ --amsterdam-table-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
209
+ --amsterdam-table-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
210
+ --amsterdam-table-font-weight: var(--amsterdam-typography-font-weight-normal);
211
+ --amsterdam-table-font-family: var(--amsterdam-typography-font-family);
212
+ --amsterdam-table-color: var(--amsterdam-color-primary-black);
199
213
  --amsterdam-switch-disabled-background-color: var(--amsterdam-color-neutral-grey2);
200
214
  --amsterdam-switch-outline-offset: var(--amsterdam-focus-outline-offset);
201
215
  --amsterdam-switch-checked-background-color: var(--amsterdam-color-primary-blue);
@@ -207,10 +221,10 @@
207
221
  --amsterdam-spotlight-purple-background-color: var(--amsterdam-color-purple);
208
222
  --amsterdam-spotlight-orange-background-color: var(--amsterdam-color-orange);
209
223
  --amsterdam-spotlight-magenta-background-color: var(--amsterdam-color-magenta);
210
- --amsterdam-spotlight-light-blue-background-color: var(--amsterdam-color-blue);
211
224
  --amsterdam-spotlight-green-background-color: var(--amsterdam-color-green);
212
225
  --amsterdam-spotlight-dark-green-background-color: var(--amsterdam-color-dark-green);
213
- --amsterdam-spotlight-blue-background-color: var(--amsterdam-color-primary-blue);
226
+ --amsterdam-spotlight-dark-blue-background-color: var(--amsterdam-color-primary-blue);
227
+ --amsterdam-spotlight-blue-background-color: var(--amsterdam-color-blue);
214
228
  --amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
215
229
  --amsterdam-skip-link-compact-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
216
230
  --amsterdam-skip-link-compact-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
@@ -293,6 +307,8 @@
293
307
  --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
294
308
  --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
295
309
  --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
310
+ --amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-grid-spacious-gap);
311
+ --amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-grid-spacious-gap);
296
312
  --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
297
313
  --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
298
314
  --amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
@@ -322,6 +338,25 @@
322
338
  --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
323
339
  --amsterdam-link-font-weight: var(--amsterdam-typography-font-weight-normal);
324
340
  --amsterdam-link-font-family: var(--amsterdam-typography-font-family);
341
+ --amsterdam-link-list-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
342
+ --amsterdam-link-list-link-compact-large-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
343
+ --amsterdam-link-list-link-compact-large-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
344
+ --amsterdam-link-list-link-compact-medium-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
345
+ --amsterdam-link-list-link-compact-medium-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
346
+ --amsterdam-link-list-link-compact-small-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
347
+ --amsterdam-link-list-link-compact-small-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
348
+ --amsterdam-link-list-link-spacious-large-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
349
+ --amsterdam-link-list-link-spacious-large-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
350
+ --amsterdam-link-list-link-spacious-medium-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
351
+ --amsterdam-link-list-link-spacious-medium-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
352
+ --amsterdam-link-list-link-spacious-small-line-height: var(--amsterdam-typography-spacious-text-level-6-line-height);
353
+ --amsterdam-link-list-link-spacious-small-font-size: var(--amsterdam-typography-spacious-text-level-6-font-size);
354
+ --amsterdam-link-list-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
355
+ --amsterdam-link-list-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
356
+ --amsterdam-link-list-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
357
+ --amsterdam-link-list-link-outline-offset: var(--amsterdam-focus-outline-offset);
358
+ --amsterdam-link-list-link-font-weight: var(--amsterdam-typography-font-weight-normal);
359
+ --amsterdam-link-list-link-font-family: var(--amsterdam-typography-font-family);
325
360
  --amsterdam-icon-compact-size-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
326
361
  --amsterdam-icon-compact-size-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
327
362
  --amsterdam-icon-compact-size-5-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
@@ -338,6 +373,19 @@
338
373
  --amsterdam-icon-spacious-size-4-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
339
374
  --amsterdam-icon-spacious-size-3-line-height: var(--amsterdam-typography-spacious-text-level-3-line-height);
340
375
  --amsterdam-icon-spacious-size-3-font-size: var(--amsterdam-typography-spacious-text-level-3-font-size);
376
+ --amsterdam-icon-button-on-background-dark-disabled-background-color: var(--amsterdam-color-neutral-grey2);
377
+ --amsterdam-icon-button-on-background-dark-disabled-color: var(--amsterdam-color-primary-white);
378
+ --amsterdam-icon-button-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
379
+ --amsterdam-icon-button-on-background-dark-hover-background-color: var(--amsterdam-color-dark-blue);
380
+ --amsterdam-icon-button-on-background-dark-color: var(--amsterdam-color-primary-white);
381
+ --amsterdam-icon-button-on-background-dark-background-color: var(--amsterdam-color-primary-blue);
382
+ --amsterdam-icon-button-on-background-light-disabled-color: var(--amsterdam-color-neutral-grey2);
383
+ --amsterdam-icon-button-on-background-light-hover-color: var(--amsterdam-color-primary-black);
384
+ --amsterdam-icon-button-on-background-light-color: var(--amsterdam-color-primary-black);
385
+ --amsterdam-icon-button-disabled-color: var(--amsterdam-color-neutral-grey2);
386
+ --amsterdam-icon-button-hover-color: var(--amsterdam-color-dark-blue);
387
+ --amsterdam-icon-button-outline-offset: var(--amsterdam-focus-outline-offset);
388
+ --amsterdam-icon-button-color: var(--amsterdam-color-primary-blue);
341
389
  --amsterdam-heading-compact-level-6-font-size: var(--amsterdam-typography-compact-text-level-6-font-size);
342
390
  --amsterdam-heading-compact-level-6-line-height: var(--amsterdam-typography-compact-text-level-6-line-height);
343
391
  --amsterdam-heading-compact-level-5-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
@@ -374,8 +422,6 @@
374
422
  --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
375
423
  --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
376
424
  --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
377
- --amsterdam-dialog-close-hover-fill: var(--amsterdam-color-primary-blue);
378
- --amsterdam-dialog-close-fill: var(--amsterdam-color-primary-black);
379
425
  --amsterdam-dialog-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
380
426
  --amsterdam-dialog-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
381
427
  --amsterdam-dialog-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
@@ -445,6 +491,28 @@
445
491
  --amsterdam-blockquote-font-weight: var(--amsterdam-typography-font-weight-bold);
446
492
  --amsterdam-blockquote-font-family: var(--amsterdam-typography-font-family);
447
493
  --amsterdam-blockquote-color: var(--amsterdam-color-primary-black);
494
+ --amsterdam-badge-yellow-color: var(--amsterdam-color-primary-black);
495
+ --amsterdam-badge-yellow-background-color: var(--amsterdam-color-yellow);
496
+ --amsterdam-badge-purple-color: var(--amsterdam-color-primary-white);
497
+ --amsterdam-badge-purple-background-color: var(--amsterdam-color-purple);
498
+ --amsterdam-badge-orange-color: var(--amsterdam-color-primary-black);
499
+ --amsterdam-badge-orange-background-color: var(--amsterdam-color-orange);
500
+ --amsterdam-badge-magenta-color: var(--amsterdam-color-primary-white);
501
+ --amsterdam-badge-magenta-background-color: var(--amsterdam-color-magenta);
502
+ --amsterdam-badge-green-color: var(--amsterdam-color-primary-black);
503
+ --amsterdam-badge-green-background-color: var(--amsterdam-color-green);
504
+ --amsterdam-badge-dark-green-color: var(--amsterdam-color-primary-white);
505
+ --amsterdam-badge-dark-green-background-color: var(--amsterdam-color-dark-green);
506
+ --amsterdam-badge-dark-blue-color: var(--amsterdam-color-primary-white);
507
+ --amsterdam-badge-dark-blue-background-color: var(--amsterdam-color-primary-blue);
508
+ --amsterdam-badge-blue-color: var(--amsterdam-color-primary-black);
509
+ --amsterdam-badge-blue-background-color: var(--amsterdam-color-blue);
510
+ --amsterdam-badge-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
511
+ --amsterdam-badge-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
512
+ --amsterdam-badge-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
513
+ --amsterdam-badge-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
514
+ --amsterdam-badge-font-weight: var(--amsterdam-typography-font-weight-bold);
515
+ --amsterdam-badge-font-family: var(--amsterdam-typography-font-family);
448
516
  --amsterdam-aspect-ratio-2x-wide: var(--amsterdam-proportion-2x-wide);
449
517
  --amsterdam-aspect-ratio-x-wide: var(--amsterdam-proportion-x-wide);
450
518
  --amsterdam-aspect-ratio-wide: var(--amsterdam-proportion-wide);
@@ -453,14 +521,14 @@
453
521
  --amsterdam-aspect-ratio-x-tall: var(--amsterdam-proportion-x-tall);
454
522
  --amsterdam-alert-close-hover-fill: var(--amsterdam-color-primary-blue);
455
523
  --amsterdam-alert-close-fill: var(--amsterdam-color-primary-black);
524
+ --amsterdam-alert-warning-border-color: var(--amsterdam-color-orange);
456
525
  --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
457
- --amsterdam-alert-success-background-color: var(--amsterdam-color-primary-white);
526
+ --amsterdam-alert-info-border-color: var(--amsterdam-color-primary-blue);
458
527
  --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
459
- --amsterdam-alert-error-background-color: var(--amsterdam-color-primary-white);
460
- --amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
461
- --amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
462
- --amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
463
- --amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-5-font-size);
528
+ --amsterdam-alert-title-compact-line-height: var(--amsterdam-typography-compact-text-level-4-line-height);
529
+ --amsterdam-alert-title-compact-font-size: var(--amsterdam-typography-compact-text-level-4-font-size);
530
+ --amsterdam-alert-title-spacious-line-height: var(--amsterdam-typography-spacious-text-level-4-line-height);
531
+ --amsterdam-alert-title-spacious-font-size: var(--amsterdam-typography-spacious-text-level-4-font-size);
464
532
  --amsterdam-alert-title-font-weight: var(--amsterdam-typography-font-weight-bold);
465
533
  --amsterdam-alert-title-font-family: var(--amsterdam-typography-font-family);
466
534
  --amsterdam-alert-title-color: var(--amsterdam-color-primary-black);
@@ -468,8 +536,6 @@
468
536
  --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
469
537
  --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
470
538
  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
471
- --amsterdam-alert-border: 4px solid var(--amsterdam-color-yellow);
472
- --amsterdam-alert-background-color: var(--amsterdam-color-yellow);
473
539
  --amsterdam-accordion-button-compact-line-height: var(--amsterdam-typography-compact-text-level-5-line-height);
474
540
  --amsterdam-accordion-button-compact-font-size: var(--amsterdam-typography-compact-text-level-5-font-size);
475
541
  --amsterdam-accordion-button-spacious-line-height: var(--amsterdam-typography-spacious-text-level-5-line-height);
@@ -496,6 +562,12 @@
496
562
  --amsterdam-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
497
563
  --amsterdam-link-hover-color: var(--amsterdam-link-appearance-hover-color);
498
564
  --amsterdam-link-color: var(--amsterdam-link-appearance-color);
565
+ --amsterdam-link-list-link-on-background-light-hover-color: var(--amsterdam-link-appearance-on-background-light-color);
566
+ --amsterdam-link-list-link-on-background-light-color: var(--amsterdam-link-appearance-on-background-light-color);
567
+ --amsterdam-link-list-link-on-background-dark-hover-color: var(--amsterdam-link-appearance-on-background-dark-color);
568
+ --amsterdam-link-list-link-on-background-dark-color: var(--amsterdam-link-appearance-on-background-dark-color);
569
+ --amsterdam-link-list-link-hover-color: var(--amsterdam-link-appearance-hover-color);
570
+ --amsterdam-link-list-link-color: var(--amsterdam-link-appearance-color);
499
571
  --amsterdam-card-link-hover-color: var(--amsterdam-link-appearance-hover-color);
500
572
  --amsterdam-card-link-color: var(--amsterdam-link-appearance-color);
501
573
  --amsterdam-breadcrumb-item-link-color: var(--amsterdam-link-appearance-color);
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Dec 2023 12:50:01 GMT
3
+ * Generated on Wed, 31 Jan 2024 12:56:24 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -38,8 +38,7 @@ declare const tokens: {
38
38
  "magenta": DesignToken,
39
39
  "neutral-grey1": DesignToken,
40
40
  "neutral-grey2": DesignToken,
41
- "neutral-grey3": DesignToken,
42
- "neutral-grey4": DesignToken
41
+ "neutral-grey3": DesignToken
43
42
  },
44
43
  "proportion": {
45
44
  "x-tall": DesignToken,
@@ -185,8 +184,8 @@ declare const tokens: {
185
184
  }
186
185
  },
187
186
  "alert": {
188
- "background-color": DesignToken,
189
- "border": DesignToken,
187
+ "border-width": DesignToken,
188
+ "border-style": DesignToken,
190
189
  "gap": DesignToken,
191
190
  "padding-block-start": DesignToken,
192
191
  "padding-block-end": DesignToken,
@@ -206,15 +205,18 @@ declare const tokens: {
206
205
  }
207
206
  },
208
207
  "error": {
209
- "background-color": DesignToken,
208
+ "border-color": DesignToken
209
+ },
210
+ "info": {
210
211
  "border-color": DesignToken
211
212
  },
212
213
  "success": {
213
- "background-color": DesignToken,
214
+ "border-color": DesignToken
215
+ },
216
+ "warning": {
214
217
  "border-color": DesignToken
215
218
  },
216
219
  "close": {
217
- "background-color": DesignToken,
218
220
  "fill": DesignToken,
219
221
  "hover": {
220
222
  "fill": DesignToken
@@ -229,6 +231,51 @@ declare const tokens: {
229
231
  "x-wide": DesignToken,
230
232
  "2x-wide": DesignToken
231
233
  },
234
+ "badge": {
235
+ "font-family": DesignToken,
236
+ "font-weight": DesignToken,
237
+ "padding-inline": DesignToken,
238
+ "spacious": {
239
+ "font-size": DesignToken,
240
+ "line-height": DesignToken
241
+ },
242
+ "compact": {
243
+ "font-size": DesignToken,
244
+ "line-height": DesignToken
245
+ },
246
+ "blue": {
247
+ "background-color": DesignToken,
248
+ "color": DesignToken
249
+ },
250
+ "dark-blue": {
251
+ "background-color": DesignToken,
252
+ "color": DesignToken
253
+ },
254
+ "dark-green": {
255
+ "background-color": DesignToken,
256
+ "color": DesignToken
257
+ },
258
+ "green": {
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
+ "yellow": {
275
+ "background-color": DesignToken,
276
+ "color": DesignToken
277
+ }
278
+ },
232
279
  "blockquote": {
233
280
  "color": DesignToken,
234
281
  "font-family": DesignToken,
@@ -400,13 +447,6 @@ declare const tokens: {
400
447
  "backdrop": {
401
448
  "background": DesignToken
402
449
  },
403
- "close": {
404
- "background-color": DesignToken,
405
- "fill": DesignToken,
406
- "hover": {
407
- "fill": DesignToken
408
- }
409
- },
410
450
  "form": {
411
451
  "gap": DesignToken,
412
452
  "padding-block": DesignToken,
@@ -515,6 +555,39 @@ declare const tokens: {
515
555
  }
516
556
  }
517
557
  },
558
+ "icon-button": {
559
+ "color": DesignToken,
560
+ "outline-offset": DesignToken,
561
+ "hover": {
562
+ "background-color": DesignToken,
563
+ "color": DesignToken
564
+ },
565
+ "disabled": {
566
+ "color": DesignToken
567
+ },
568
+ "on-background-light": {
569
+ "color": DesignToken,
570
+ "hover": {
571
+ "background-color": DesignToken,
572
+ "color": DesignToken
573
+ },
574
+ "disabled": {
575
+ "color": DesignToken
576
+ }
577
+ },
578
+ "on-background-dark": {
579
+ "background-color": DesignToken,
580
+ "color": DesignToken,
581
+ "hover": {
582
+ "background-color": DesignToken,
583
+ "color": DesignToken
584
+ },
585
+ "disabled": {
586
+ "color": DesignToken,
587
+ "background-color": DesignToken
588
+ }
589
+ }
590
+ },
518
591
  "icon": {
519
592
  "spacious": {
520
593
  "size-3": {
@@ -553,6 +626,63 @@ declare const tokens: {
553
626
  }
554
627
  }
555
628
  },
629
+ "link-list": {
630
+ "gap": DesignToken,
631
+ "link": {
632
+ "color": DesignToken,
633
+ "font-family": DesignToken,
634
+ "font-weight": DesignToken,
635
+ "gap": DesignToken,
636
+ "outline-offset": DesignToken,
637
+ "text-decoration-line": DesignToken,
638
+ "text-decoration-thickness": DesignToken,
639
+ "text-underline-offset": DesignToken,
640
+ "spacious": {
641
+ "small": {
642
+ "font-size": DesignToken,
643
+ "line-height": DesignToken
644
+ },
645
+ "medium": {
646
+ "font-size": DesignToken,
647
+ "line-height": DesignToken
648
+ },
649
+ "large": {
650
+ "font-size": DesignToken,
651
+ "line-height": DesignToken
652
+ }
653
+ },
654
+ "compact": {
655
+ "small": {
656
+ "font-size": DesignToken,
657
+ "line-height": DesignToken
658
+ },
659
+ "medium": {
660
+ "font-size": DesignToken,
661
+ "line-height": DesignToken
662
+ },
663
+ "large": {
664
+ "font-size": DesignToken,
665
+ "line-height": DesignToken
666
+ }
667
+ },
668
+ "hover": {
669
+ "color": DesignToken,
670
+ "text-decoration-line": DesignToken
671
+ },
672
+ "on-background-dark": {
673
+ "color": DesignToken,
674
+ "hover": {
675
+ "color": DesignToken
676
+ }
677
+ },
678
+ "on-background-light": {
679
+ "color": DesignToken,
680
+ "hover": {
681
+ "color": DesignToken
682
+ }
683
+ }
684
+ }
685
+ },
556
686
  "link": {
557
687
  "color": DesignToken,
558
688
  "font-family": DesignToken,
@@ -644,6 +774,14 @@ declare const tokens: {
644
774
  "mark": {
645
775
  "background-color": DesignToken
646
776
  },
777
+ "mega-menu": {
778
+ "list-category": {
779
+ "column-gap": DesignToken,
780
+ "column-width": DesignToken,
781
+ "padding-block-start": DesignToken,
782
+ "padding-block-end": DesignToken
783
+ }
784
+ },
647
785
  "ordered-list": {
648
786
  "color": DesignToken,
649
787
  "font-family": DesignToken,
@@ -835,13 +973,13 @@ declare const tokens: {
835
973
  "blue": {
836
974
  "background-color": DesignToken
837
975
  },
838
- "dark-green": {
976
+ "dark-blue": {
839
977
  "background-color": DesignToken
840
978
  },
841
- "green": {
979
+ "dark-green": {
842
980
  "background-color": DesignToken
843
981
  },
844
- "light-blue": {
982
+ "green": {
845
983
  "background-color": DesignToken
846
984
  },
847
985
  "magenta": {
@@ -877,6 +1015,22 @@ declare const tokens: {
877
1015
  "background-color": DesignToken
878
1016
  }
879
1017
  },
1018
+ "table": {
1019
+ "color": DesignToken,
1020
+ "font-family": DesignToken,
1021
+ "font-weight": DesignToken,
1022
+ "font-size": DesignToken,
1023
+ "line-height": DesignToken,
1024
+ "caption": {
1025
+ "font-weight": DesignToken
1026
+ },
1027
+ "cell": {
1028
+ "border-bottom": DesignToken
1029
+ },
1030
+ "header-cell": {
1031
+ "font-weight": DesignToken
1032
+ }
1033
+ },
880
1034
  "text-input": {
881
1035
  "box-shadow": DesignToken,
882
1036
  "color": DesignToken,