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