@amsterdam/design-system-tokens 3.3.0 → 4.0.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 (109) hide show
  1. package/CHANGELOG.md +61 -3
  2. package/README.md +131 -22
  3. package/build.js +11 -1
  4. package/dist/compact.css +9 -2
  5. package/dist/compact.d.ts +21 -6
  6. package/dist/compact.json +33 -18
  7. package/dist/compact.mjs +21 -13
  8. package/dist/compact.scss +9 -2
  9. package/dist/compact.theme.css +9 -2
  10. package/dist/index.css +177 -165
  11. package/dist/index.d.ts +250 -226
  12. package/dist/index.json +345 -321
  13. package/dist/index.mjs +285 -267
  14. package/dist/index.scss +177 -165
  15. package/dist/index.theme.css +177 -165
  16. package/package.json +2 -2
  17. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  18. package/src/brand/ams/border.compact.tokens.json +20 -0
  19. package/src/brand/ams/border.tokens.json +25 -0
  20. package/src/brand/ams/color.compact.tokens.json +15 -0
  21. package/src/brand/ams/color.tokens.json +37 -49
  22. package/src/brand/ams/cursor.tokens.json +9 -2
  23. package/src/brand/ams/focus.tokens.json +1 -0
  24. package/src/brand/ams/space.compact.tokens.json +16 -4
  25. package/src/brand/ams/space.tokens.json +31 -6
  26. package/src/brand/ams/typography.compact.tokens.json +36 -27
  27. package/src/brand/ams/typography.tokens.json +60 -32
  28. package/src/common/ams/inputs.tokens.json +41 -19
  29. package/src/common/ams/links.tokens.json +35 -10
  30. package/src/components/ams/accordion.tokens.json +18 -11
  31. package/src/components/ams/action-group.tokens.json +2 -2
  32. package/src/components/ams/alert.tokens.json +38 -20
  33. package/src/components/ams/avatar.tokens.json +79 -29
  34. package/src/components/ams/badge.tokens.json +60 -23
  35. package/src/components/ams/blockquote.tokens.json +14 -5
  36. package/src/components/ams/body.compact.tokens.json +12 -0
  37. package/src/components/ams/body.tokens.json +12 -0
  38. package/src/components/ams/breadcrumb.tokens.json +36 -15
  39. package/src/components/ams/button.tokens.json +74 -33
  40. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  41. package/src/components/ams/card.tokens.json +30 -17
  42. package/src/components/ams/character-count.tokens.json +14 -5
  43. package/src/components/ams/checkbox.tokens.json +106 -39
  44. package/src/components/ams/column.tokens.json +10 -10
  45. package/src/components/ams/date-input.tokens.json +56 -23
  46. package/src/components/ams/description-list.tokens.json +101 -23
  47. package/src/components/ams/dialog.tokens.json +104 -28
  48. package/src/components/ams/error-message.tokens.json +13 -6
  49. package/src/components/ams/field-set.tokens.json +40 -17
  50. package/src/components/ams/field.tokens.json +18 -7
  51. package/src/components/ams/figure.tokens.json +16 -7
  52. package/src/components/ams/file-input.tokens.json +69 -30
  53. package/src/components/ams/file-list.tokens.json +20 -11
  54. package/src/components/ams/grid.compact.tokens.json +24 -2
  55. package/src/components/ams/grid.tokens.json +77 -24
  56. package/src/components/ams/heading.tokens.json +38 -36
  57. package/src/components/ams/hint.tokens.json +6 -2
  58. package/src/components/ams/icon-button.tokens.json +46 -16
  59. package/src/components/ams/icon.tokens.json +19 -23
  60. package/src/components/ams/image-slider.tokens.json +28 -16
  61. package/src/components/ams/image.tokens.json +4 -1
  62. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  63. package/src/components/ams/label.tokens.json +18 -6
  64. package/src/components/ams/link-list.tokens.json +50 -22
  65. package/src/components/ams/link.tokens.json +38 -25
  66. package/src/components/ams/logo.tokens.json +6 -2
  67. package/src/components/ams/mark.tokens.json +3 -1
  68. package/src/components/ams/menu.tokens.json +81 -28
  69. package/src/components/ams/ordered-list.tokens.json +39 -25
  70. package/src/components/ams/page-footer.tokens.json +70 -26
  71. package/src/components/ams/page-header.compact.tokens.json +2 -1
  72. package/src/components/ams/page-header.tokens.json +128 -59
  73. package/src/components/ams/page.compact.tokens.json +12 -0
  74. package/src/components/ams/page.tokens.json +5 -3
  75. package/src/components/ams/pagination.tokens.json +37 -17
  76. package/src/components/ams/paragraph.tokens.json +22 -8
  77. package/src/components/ams/password-input.tokens.json +47 -21
  78. package/src/components/ams/progress-list.tokens.json +194 -52
  79. package/src/components/ams/radio.tokens.json +97 -36
  80. package/src/components/ams/row.tokens.json +10 -10
  81. package/src/components/ams/search-field.tokens.json +57 -24
  82. package/src/components/ams/select.tokens.json +63 -23
  83. package/src/components/ams/skip-link.tokens.json +23 -12
  84. package/src/components/ams/spotlight.tokens.json +21 -7
  85. package/src/components/ams/standalone-link.tokens.json +44 -18
  86. package/src/components/ams/switch.tokens.json +40 -10
  87. package/src/components/ams/tab-navigation.tokens.json +205 -0
  88. package/src/components/ams/table-of-contents.tokens.json +38 -20
  89. package/src/components/ams/table.tokens.json +29 -10
  90. package/src/components/ams/tabs.tokens.json +39 -20
  91. package/src/components/ams/text-area.tokens.json +49 -23
  92. package/src/components/ams/text-input.tokens.json +47 -19
  93. package/src/components/ams/time-input.tokens.json +56 -21
  94. package/src/components/ams/unordered-list.tokens.json +37 -25
  95. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  96. package/src/brand/ams/color.deprecated.tokens.json +0 -13
  97. package/src/brand/ams/typography.deprecated.compact.tokens.json +0 -26
  98. package/src/brand/ams/typography.deprecated.tokens.json +0 -40
  99. package/src/components/ams/accordion.deprecated.tokens.json +0 -39
  100. package/src/components/ams/checkbox.deprecated.tokens.json +0 -59
  101. package/src/components/ams/date-input.deprecated.tokens.json +0 -38
  102. package/src/components/ams/field-set.deprecated.tokens.json +0 -16
  103. package/src/components/ams/field.deprecated.tokens.json +0 -14
  104. package/src/components/ams/icon.deprecated.tokens.json +0 -22
  105. package/src/components/ams/menu.deprecated.tokens.json +0 -36
  106. package/src/components/ams/page-heading.deprecated.tokens.json +0 -46
  107. package/src/components/ams/standalone-link.deprecated.tokens.json +0 -38
  108. package/src/components/ams/table-of-contents.deprecated.tokens.json +0 -24
  109. package/src/components/ams/time-input.deprecated.tokens.json +0 -38
@@ -6,11 +6,15 @@
6
6
  "marker": {
7
7
  "block-size": {
8
8
  "$value": "calc({ams.typography.heading.2.font-size} * {ams.typography.heading.2.line-height})",
9
- "$type": "dimension"
9
+ "$extensions": {
10
+ "nl.amsterdam.type": "dimension"
11
+ }
10
12
  },
11
13
  "margin-block-start": {
12
14
  "$value": "calc(({ams.typography.heading.2.line-height} * {ams.typography.heading.2.font-size}) / 2)",
13
- "$type": "dimension"
15
+ "$extensions": {
16
+ "nl.amsterdam.type": "dimension"
17
+ }
14
18
  }
15
19
  }
16
20
  }
@@ -20,11 +24,15 @@
20
24
  "marker": {
21
25
  "block-size": {
22
26
  "$value": "calc({ams.typography.heading.3.font-size} * {ams.typography.heading.3.line-height})",
23
- "$type": "dimension"
27
+ "$extensions": {
28
+ "nl.amsterdam.type": "dimension"
29
+ }
24
30
  },
25
31
  "margin-block-start": {
26
32
  "$value": "calc(({ams.typography.heading.3.line-height} * {ams.typography.heading.3.font-size}) / 2)",
27
- "$type": "dimension"
33
+ "$extensions": {
34
+ "nl.amsterdam.type": "dimension"
35
+ }
28
36
  }
29
37
  }
30
38
  }
@@ -34,32 +42,108 @@
34
42
  "marker": {
35
43
  "block-size": {
36
44
  "$value": "calc({ams.typography.heading.4.font-size} * {ams.typography.heading.4.line-height})",
37
- "$type": "dimension"
45
+ "$extensions": {
46
+ "nl.amsterdam.type": "dimension"
47
+ }
38
48
  },
39
49
  "margin-block-start": {
40
50
  "$value": "calc(({ams.typography.heading.4.line-height} * {ams.typography.heading.4.font-size}) / 2)",
41
- "$type": "dimension"
51
+ "$extensions": {
52
+ "nl.amsterdam.type": "dimension"
53
+ }
42
54
  }
43
55
  }
44
56
  }
45
57
  },
46
- "step": {
58
+ "button": {
59
+ "color": {
60
+ "$value": "{ams.color.interactive.default}",
61
+ "$extensions": {
62
+ "nl.amsterdam.type": "color"
63
+ }
64
+ },
65
+ "cursor": {
66
+ "$value": "{ams.cursor.interactive}",
67
+ "$extensions": {
68
+ "nl.amsterdam.type": "cursor"
69
+ }
70
+ },
47
71
  "gap": {
48
- "$value": "{ams.space.m}",
72
+ "$value": "{ams.space.s}",
73
+ "$extensions": {
74
+ "nl.amsterdam.subtype": "space",
75
+ "nl.amsterdam.type": "dimension"
76
+ }
77
+ },
78
+ "outline-offset": {
79
+ "$value": "{ams.focus.outline-offset}",
80
+ "$extensions": {
81
+ "nl.amsterdam.subtype": "space",
82
+ "nl.amsterdam.type": "dimension"
83
+ }
84
+ },
85
+ "padding-block": {
86
+ "$value": "0",
87
+ "$type": "dimension",
88
+ "$extensions": {
89
+ "nl.amsterdam.subtype": "space"
90
+ }
91
+ },
92
+ "padding-inline": {
93
+ "$value": "0",
49
94
  "$type": "dimension",
50
95
  "$extensions": {
51
96
  "nl.amsterdam.subtype": "space"
52
97
  }
53
98
  },
99
+ "hover": {
100
+ "color": {
101
+ "$value": "{ams.color.interactive.hover}",
102
+ "$extensions": {
103
+ "nl.amsterdam.type": "color"
104
+ }
105
+ }
106
+ }
107
+ },
108
+ "icon": {
109
+ "transition-duration": {
110
+ "$value": "0.3s",
111
+ "$type": "duration"
112
+ },
113
+ "transition-timing-function": {
114
+ "$value": "ease",
115
+ "$extensions": {
116
+ "nl.amsterdam.type": "transitionTimingFunction"
117
+ }
118
+ }
119
+ },
120
+ "step": {
121
+ "gap": {
122
+ "$value": "{ams.space.m}",
123
+ "$extensions": {
124
+ "nl.amsterdam.subtype": "space",
125
+ "nl.amsterdam.type": "dimension"
126
+ }
127
+ },
54
128
  "medium": {
55
129
  "gap": {
56
- "$value": "{ams.space.l}",
130
+ "$deprecated": "Use `ams.progress-list.step.vi-medium.gap` instead. Will be removed on or after 2026-10-20.",
131
+ "$value": "initial",
57
132
  "$type": "dimension",
58
133
  "$extensions": {
59
134
  "nl.amsterdam.subtype": "space"
60
135
  }
61
136
  }
62
137
  },
138
+ "vi-medium": {
139
+ "gap": {
140
+ "$value": "{ams.space.l}",
141
+ "$extensions": {
142
+ "nl.amsterdam.subtype": "space",
143
+ "nl.amsterdam.type": "dimension"
144
+ }
145
+ }
146
+ },
63
147
  "marker": {
64
148
  "shape": {
65
149
  "block-size": {
@@ -70,12 +154,16 @@
70
154
  "$type": "dimension"
71
155
  },
72
156
  "background-color": {
73
- "$value": "{ams.color.background}",
74
- "$type": "color"
157
+ "$value": "{ams.color.background.default}",
158
+ "$extensions": {
159
+ "nl.amsterdam.type": "color"
160
+ }
75
161
  },
76
162
  "border-color": {
77
163
  "$value": "{ams.color.progress.upcoming}",
78
- "$type": "color"
164
+ "$extensions": {
165
+ "nl.amsterdam.type": "color"
166
+ }
79
167
  },
80
168
  "border-style": {
81
169
  "$value": "solid",
@@ -90,8 +178,10 @@
90
178
  }
91
179
  },
92
180
  "outline-color": {
93
- "$value": "{ams.color.background}",
94
- "$type": "color"
181
+ "$value": "{ams.color.background.default}",
182
+ "$extensions": {
183
+ "nl.amsterdam.type": "color"
184
+ }
95
185
  },
96
186
  "outline-style": {
97
187
  "$value": "solid",
@@ -110,7 +200,9 @@
110
200
  "connector": {
111
201
  "border-inline-color": {
112
202
  "$value": "{ams.color.progress.upcoming}",
113
- "$type": "color"
203
+ "$extensions": {
204
+ "nl.amsterdam.type": "color"
205
+ }
114
206
  },
115
207
  "border-inline-style": {
116
208
  "$value": "dashed",
@@ -129,18 +221,18 @@
129
221
  "heading": {
130
222
  "margin-block-end": {
131
223
  "$value": "{ams.space.s}",
132
- "$type": "dimension",
133
224
  "$extensions": {
134
- "nl.amsterdam.subtype": "space"
225
+ "nl.amsterdam.subtype": "space",
226
+ "nl.amsterdam.type": "dimension"
135
227
  }
136
228
  }
137
229
  },
138
230
  "content": {
139
231
  "margin-block-end": {
140
232
  "$value": "{ams.space.l}",
141
- "$type": "dimension",
142
233
  "$extensions": {
143
- "nl.amsterdam.subtype": "space"
234
+ "nl.amsterdam.subtype": "space",
235
+ "nl.amsterdam.type": "dimension"
144
236
  }
145
237
  }
146
238
  },
@@ -149,18 +241,24 @@
149
241
  "shape": {
150
242
  "background-color": {
151
243
  "$value": "{ams.color.progress.completed}",
152
- "$type": "color"
244
+ "$extensions": {
245
+ "nl.amsterdam.type": "color"
246
+ }
153
247
  },
154
248
  "border-color": {
155
249
  "$value": "{ams.color.progress.completed}",
156
- "$type": "color"
250
+ "$extensions": {
251
+ "nl.amsterdam.type": "color"
252
+ }
157
253
  }
158
254
  }
159
255
  },
160
256
  "connector": {
161
257
  "border-inline-color": {
162
258
  "$value": "{ams.color.progress.completed}",
163
- "$type": "color"
259
+ "$extensions": {
260
+ "nl.amsterdam.type": "color"
261
+ }
164
262
  },
165
263
  "border-inline-style": {
166
264
  "$value": "solid",
@@ -175,18 +273,24 @@
175
273
  "shape": {
176
274
  "background-color": {
177
275
  "$value": "{ams.color.progress.current}",
178
- "$type": "color"
276
+ "$extensions": {
277
+ "nl.amsterdam.type": "color"
278
+ }
179
279
  },
180
280
  "border-color": {
181
281
  "$value": "{ams.color.progress.current}",
182
- "$type": "color"
282
+ "$extensions": {
283
+ "nl.amsterdam.type": "color"
284
+ }
183
285
  }
184
286
  }
185
287
  },
186
288
  "connector": {
187
289
  "border-inline-color": {
188
290
  "$value": "{ams.color.progress.current}",
189
- "$type": "color"
291
+ "$extensions": {
292
+ "nl.amsterdam.type": "color"
293
+ }
190
294
  }
191
295
  }
192
296
  }
@@ -194,38 +298,52 @@
194
298
  "substeps": {
195
299
  "padding-block-start": {
196
300
  "$value": "{ams.space.m}",
197
- "$type": "dimension",
198
301
  "$extensions": {
199
- "nl.amsterdam.subtype": "space"
302
+ "nl.amsterdam.subtype": "space",
303
+ "nl.amsterdam.type": "dimension"
200
304
  }
201
305
  },
202
306
  "step": {
203
307
  "indicator": {
204
308
  "margin-inline-end": {
205
309
  "$value": "{ams.space.m}",
206
- "$type": "dimension",
207
310
  "$extensions": {
208
- "nl.amsterdam.subtype": "space"
311
+ "nl.amsterdam.subtype": "space",
312
+ "nl.amsterdam.type": "dimension"
209
313
  }
210
314
  },
211
315
  "medium": {
212
316
  "margin-inline-end": {
213
- "$value": "{ams.space.l}",
317
+ "$deprecated": "Use `ams.progress-list.substeps.step.indicator.vi-medium.margin-inline-end` instead. Will be removed on or after 2026-10-20.",
318
+ "$value": "initial",
214
319
  "$type": "dimension",
215
320
  "$extensions": {
216
321
  "nl.amsterdam.subtype": "space"
217
322
  }
218
323
  }
324
+ },
325
+ "vi-medium": {
326
+ "margin-inline-end": {
327
+ "$value": "{ams.space.l}",
328
+ "$extensions": {
329
+ "nl.amsterdam.subtype": "space",
330
+ "nl.amsterdam.type": "dimension"
331
+ }
332
+ }
219
333
  }
220
334
  },
221
335
  "marker": {
222
336
  "block-size": {
223
337
  "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height})",
224
- "$type": "dimension"
338
+ "$extensions": {
339
+ "nl.amsterdam.type": "dimension"
340
+ }
225
341
  },
226
342
  "inline-size": {
227
343
  "$value": "{ams.progress-list.step.marker.shape.block-size}",
228
- "$type": "dimension"
344
+ "$extensions": {
345
+ "nl.amsterdam.type": "dimension"
346
+ }
229
347
  },
230
348
  "shape": {
231
349
  "block-size": {
@@ -233,12 +351,16 @@
233
351
  "$type": "dimension"
234
352
  },
235
353
  "background-color": {
236
- "$value": "{ams.color.background}",
237
- "$type": "color"
354
+ "$value": "{ams.color.background.default}",
355
+ "$extensions": {
356
+ "nl.amsterdam.type": "color"
357
+ }
238
358
  },
239
359
  "border-color": {
240
360
  "$value": "{ams.color.progress.upcoming}",
241
- "$type": "color"
361
+ "$extensions": {
362
+ "nl.amsterdam.type": "color"
363
+ }
242
364
  },
243
365
  "border-style": {
244
366
  "$value": "solid",
@@ -253,8 +375,10 @@
253
375
  }
254
376
  },
255
377
  "outline-color": {
256
- "$value": "{ams.color.background}",
257
- "$type": "color"
378
+ "$value": "{ams.color.background.default}",
379
+ "$extensions": {
380
+ "nl.amsterdam.type": "color"
381
+ }
258
382
  },
259
383
  "outline-style": {
260
384
  "$value": "solid",
@@ -272,12 +396,16 @@
272
396
  },
273
397
  "connector": {
274
398
  "background-color": {
275
- "$value": "{ams.color.background}",
276
- "$type": "color"
399
+ "$value": "{ams.color.background.default}",
400
+ "$extensions": {
401
+ "nl.amsterdam.type": "color"
402
+ }
277
403
  },
278
404
  "border-inline-color": {
279
405
  "$value": "{ams.color.progress.upcoming}",
280
- "$type": "color"
406
+ "$extensions": {
407
+ "nl.amsterdam.type": "color"
408
+ }
281
409
  },
282
410
  "border-inline-style": {
283
411
  "$value": "dashed",
@@ -296,21 +424,25 @@
296
424
  },
297
425
  "margin-block-start": {
298
426
  "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height} / 2)",
299
- "$type": "dimension"
427
+ "$extensions": {
428
+ "nl.amsterdam.type": "dimension"
429
+ }
300
430
  },
301
431
  "last-child": {
302
432
  "border-inline-color": {
303
- "$value": "{ams.color.background}",
304
- "$type": "color"
433
+ "$value": "{ams.color.background.default}",
434
+ "$extensions": {
435
+ "nl.amsterdam.type": "color"
436
+ }
305
437
  }
306
438
  }
307
439
  },
308
440
  "content": {
309
441
  "margin-block-end": {
310
442
  "$value": "{ams.space.m}",
311
- "$type": "dimension",
312
443
  "$extensions": {
313
- "nl.amsterdam.subtype": "space"
444
+ "nl.amsterdam.subtype": "space",
445
+ "nl.amsterdam.type": "dimension"
314
446
  }
315
447
  }
316
448
  },
@@ -319,18 +451,24 @@
319
451
  "shape": {
320
452
  "background-color": {
321
453
  "$value": "{ams.color.progress.completed}",
322
- "$type": "color"
454
+ "$extensions": {
455
+ "nl.amsterdam.type": "color"
456
+ }
323
457
  },
324
458
  "border-color": {
325
459
  "$value": "{ams.color.progress.completed}",
326
- "$type": "color"
460
+ "$extensions": {
461
+ "nl.amsterdam.type": "color"
462
+ }
327
463
  }
328
464
  }
329
465
  },
330
466
  "connector": {
331
467
  "border-inline-color": {
332
468
  "$value": "{ams.color.progress.completed}",
333
- "$type": "color"
469
+ "$extensions": {
470
+ "nl.amsterdam.type": "color"
471
+ }
334
472
  },
335
473
  "border-inline-style": {
336
474
  "$value": "solid",
@@ -345,11 +483,15 @@
345
483
  "shape": {
346
484
  "background-color": {
347
485
  "$value": "{ams.color.progress.current}",
348
- "$type": "color"
486
+ "$extensions": {
487
+ "nl.amsterdam.type": "color"
488
+ }
349
489
  },
350
490
  "border-color": {
351
491
  "$value": "{ams.color.progress.current}",
352
- "$type": "color"
492
+ "$extensions": {
493
+ "nl.amsterdam.type": "color"
494
+ }
353
495
  }
354
496
  }
355
497
  }
@@ -359,9 +501,9 @@
359
501
  "content": {
360
502
  "margin-block-end": {
361
503
  "$value": "{ams.space.l}",
362
- "$type": "dimension",
363
504
  "$extensions": {
364
- "nl.amsterdam.subtype": "space"
505
+ "nl.amsterdam.subtype": "space",
506
+ "nl.amsterdam.type": "dimension"
365
507
  }
366
508
  }
367
509
  }