@amsterdam/design-system-tokens 1.0.0 → 2.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 (59) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/README.md +14 -3
  3. package/dist/compact.css +30 -18
  4. package/dist/compact.d.ts +16 -0
  5. package/dist/compact.json +36 -20
  6. package/dist/compact.mjs +33 -23
  7. package/dist/compact.scss +30 -18
  8. package/dist/compact.theme.css +30 -18
  9. package/dist/index.css +335 -269
  10. package/dist/index.d.ts +229 -125
  11. package/dist/index.json +525 -421
  12. package/dist/index.mjs +459 -404
  13. package/dist/index.scss +335 -269
  14. package/dist/index.theme.css +335 -269
  15. package/package.json +2 -2
  16. package/src/brand/ams/border.compact.tokens.json +12 -0
  17. package/src/brand/ams/color.deprecated.tokens.json +12 -0
  18. package/src/brand/ams/color.tokens.json +2 -3
  19. package/src/brand/ams/space.compact.tokens.json +6 -6
  20. package/src/brand/ams/space.tokens.json +6 -6
  21. package/src/brand/ams/typography.compact.tokens.json +17 -15
  22. package/src/brand/ams/typography.deprecated.compact.tokens.json +20 -0
  23. package/src/brand/ams/typography.deprecated.tokens.json +28 -0
  24. package/src/brand/ams/typography.tokens.json +17 -25
  25. package/src/common/ams/inputs.tokens.json +34 -0
  26. package/src/common/ams/links.tokens.json +4 -4
  27. package/src/components/ams/accordion.deprecated.tokens.json +17 -0
  28. package/src/components/ams/accordion.tokens.json +1 -10
  29. package/src/components/ams/breadcrumb.tokens.json +3 -3
  30. package/src/components/ams/button.tokens.json +13 -11
  31. package/src/components/ams/call-to-action-link.tokens.json +24 -0
  32. package/src/components/ams/checkbox.deprecated.tokens.json +43 -0
  33. package/src/components/ams/checkbox.tokens.json +22 -35
  34. package/src/components/ams/date-input.tokens.json +23 -23
  35. package/src/components/ams/error-message.tokens.json +2 -2
  36. package/src/components/ams/field-set.tokens.json +3 -3
  37. package/src/components/ams/file-input.tokens.json +25 -24
  38. package/src/components/ams/icon.deprecated.tokens.json +16 -0
  39. package/src/components/ams/icon.tokens.json +8 -0
  40. package/src/components/ams/label.tokens.json +2 -2
  41. package/src/components/ams/menu.tokens.json +39 -0
  42. package/src/components/ams/ordered-list.tokens.json +2 -2
  43. package/src/components/ams/page-footer.tokens.json +2 -2
  44. package/src/components/ams/page-header.tokens.json +2 -2
  45. package/src/components/ams/{page-heading.tokens.json → page-heading.deprecated.tokens.json} +1 -0
  46. package/src/components/ams/page.tokens.json +1 -1
  47. package/src/components/ams/password-input.tokens.json +18 -18
  48. package/src/components/ams/radio.tokens.json +1 -1
  49. package/src/components/ams/search-field.tokens.json +23 -23
  50. package/src/components/ams/select.tokens.json +17 -17
  51. package/src/components/ams/skip-link.tokens.json +2 -2
  52. package/src/components/ams/standalone-link.deprecated.tokens.json +32 -0
  53. package/src/components/ams/standalone-link.tokens.json +5 -13
  54. package/src/components/ams/table-of-contents.deprecated.tokens.json +11 -0
  55. package/src/components/ams/table-of-contents.tokens.json +1 -6
  56. package/src/components/ams/text-area.tokens.json +18 -18
  57. package/src/components/ams/text-input.tokens.json +18 -18
  58. package/src/components/ams/time-input.tokens.json +23 -23
  59. package/src/components/ams/unordered-list.tokens.json +2 -2
package/dist/index.d.ts CHANGED
@@ -33,6 +33,18 @@ declare const tokens: {
33
33
  };
34
34
  };
35
35
  color: {
36
+ interactive: {
37
+ secondary: DesignToken;
38
+ contrast: DesignToken;
39
+ default: DesignToken;
40
+ disabled: DesignToken;
41
+ hover: DesignToken;
42
+ invalid: {
43
+ default: DesignToken;
44
+ hover: DesignToken;
45
+ };
46
+ inverse: DesignToken;
47
+ };
36
48
  background: DesignToken;
37
49
  feedback: {
38
50
  error: DesignToken;
@@ -49,18 +61,6 @@ declare const tokens: {
49
61
  purple: DesignToken;
50
62
  yellow: DesignToken;
51
63
  };
52
- interactive: {
53
- contrast: DesignToken;
54
- default: DesignToken;
55
- disabled: DesignToken;
56
- hover: DesignToken;
57
- invalid: {
58
- default: DesignToken;
59
- hover: DesignToken;
60
- };
61
- inverse: DesignToken;
62
- secondary: DesignToken;
63
- };
64
64
  separator: DesignToken;
65
65
  text: {
66
66
  default: DesignToken;
@@ -84,28 +84,6 @@ declare const tokens: {
84
84
  "2xl": DesignToken;
85
85
  };
86
86
  typography: {
87
- "font-family": DesignToken;
88
- "hyphenate-limit-chars": DesignToken;
89
- "body-text": {
90
- "font-size": DesignToken;
91
- "font-weight": DesignToken;
92
- "line-height": DesignToken;
93
- bold: {
94
- "font-weight": DesignToken;
95
- };
96
- small: {
97
- "font-size": DesignToken;
98
- "line-height": DesignToken;
99
- };
100
- large: {
101
- "font-size": DesignToken;
102
- "line-height": DesignToken;
103
- };
104
- "x-large": {
105
- "font-size": DesignToken;
106
- "line-height": DesignToken;
107
- };
108
- };
109
87
  heading: {
110
88
  "0": {
111
89
  "font-size": DesignToken;
@@ -138,6 +116,58 @@ declare const tokens: {
138
116
  "font-weight": DesignToken;
139
117
  "text-wrap": DesignToken;
140
118
  };
119
+ "font-family": DesignToken;
120
+ "hyphenate-limit-chars": DesignToken;
121
+ "body-text": {
122
+ "font-size": DesignToken;
123
+ "font-weight": DesignToken;
124
+ "line-height": DesignToken;
125
+ bold: {
126
+ "font-weight": DesignToken;
127
+ };
128
+ small: {
129
+ "font-size": DesignToken;
130
+ "line-height": DesignToken;
131
+ };
132
+ large: {
133
+ "font-size": DesignToken;
134
+ "line-height": DesignToken;
135
+ };
136
+ "x-large": {
137
+ "font-size": DesignToken;
138
+ "line-height": DesignToken;
139
+ };
140
+ };
141
+ };
142
+ inputs: {
143
+ "background-color": DesignToken;
144
+ "border-color": DesignToken;
145
+ "border-style": DesignToken;
146
+ "border-width": DesignToken;
147
+ color: DesignToken;
148
+ "font-family": DesignToken;
149
+ "font-size": DesignToken;
150
+ "font-weight": DesignToken;
151
+ "line-height": DesignToken;
152
+ "outline-offset": DesignToken;
153
+ "padding-block": DesignToken;
154
+ "padding-inline": DesignToken;
155
+ disabled: {
156
+ color: DesignToken;
157
+ };
158
+ hover: {
159
+ "box-shadow": DesignToken;
160
+ };
161
+ invalid: {
162
+ "border-color": DesignToken;
163
+ hover: {
164
+ "border-color": DesignToken;
165
+ "box-shadow": DesignToken;
166
+ };
167
+ };
168
+ placeholder: {
169
+ color: DesignToken;
170
+ };
141
171
  };
142
172
  links: {
143
173
  color: DesignToken;
@@ -168,19 +198,18 @@ declare const tokens: {
168
198
  };
169
199
  };
170
200
  accordion: {
171
- gap: DesignToken;
172
201
  button: {
173
- color: DesignToken;
174
- cursor: DesignToken;
175
202
  "font-family": DesignToken;
176
203
  "font-size": DesignToken;
177
204
  "font-weight": DesignToken;
178
- gap: DesignToken;
179
205
  "line-height": DesignToken;
206
+ "text-wrap": DesignToken;
207
+ color: DesignToken;
208
+ cursor: DesignToken;
209
+ gap: DesignToken;
180
210
  "outline-offset": DesignToken;
181
211
  "padding-block": DesignToken;
182
212
  "padding-inline": DesignToken;
183
- "text-wrap": DesignToken;
184
213
  hover: {
185
214
  color: DesignToken;
186
215
  };
@@ -189,6 +218,7 @@ declare const tokens: {
189
218
  "padding-block": DesignToken;
190
219
  "padding-inline": DesignToken;
191
220
  };
221
+ gap: DesignToken;
192
222
  };
193
223
  "action-group": {
194
224
  gap: DesignToken;
@@ -359,6 +389,10 @@ declare const tokens: {
359
389
  disabled: {
360
390
  cursor: DesignToken;
361
391
  };
392
+ "icon-only": {
393
+ "padding-block": DesignToken;
394
+ "padding-inline": DesignToken;
395
+ };
362
396
  primary: {
363
397
  "background-color": DesignToken;
364
398
  "border-color": DesignToken;
@@ -374,12 +408,14 @@ declare const tokens: {
374
408
  };
375
409
  secondary: {
376
410
  "background-color": DesignToken;
411
+ "border-color": DesignToken;
377
412
  color: DesignToken;
378
- hover: {
379
- "box-shadow": DesignToken;
413
+ disabled: {
414
+ "border-color": DesignToken;
380
415
  color: DesignToken;
381
416
  };
382
- disabled: {
417
+ hover: {
418
+ "box-shadow": DesignToken;
383
419
  color: DesignToken;
384
420
  };
385
421
  };
@@ -387,17 +423,31 @@ declare const tokens: {
387
423
  "background-color": DesignToken;
388
424
  "border-color": DesignToken;
389
425
  color: DesignToken;
390
- hover: {
391
- "border-color": DesignToken;
426
+ disabled: {
392
427
  color: DesignToken;
393
428
  };
394
- disabled: {
429
+ hover: {
430
+ "border-color": DesignToken;
395
431
  color: DesignToken;
396
432
  };
397
433
  };
398
- "icon-only": {
399
- "padding-block": DesignToken;
400
- "padding-inline": DesignToken;
434
+ };
435
+ "call-to-action-link": {
436
+ "background-color": DesignToken;
437
+ color: DesignToken;
438
+ "font-family": DesignToken;
439
+ "font-size": DesignToken;
440
+ "font-weight": DesignToken;
441
+ "line-height": DesignToken;
442
+ "outline-offset": DesignToken;
443
+ "padding-block": DesignToken;
444
+ "padding-inline": DesignToken;
445
+ "text-decoration-thickness": DesignToken;
446
+ "text-underline-offset": DesignToken;
447
+ hover: {
448
+ "background-color": DesignToken;
449
+ "text-decoration-thickness": DesignToken;
450
+ "text-underline-offset": DesignToken;
401
451
  };
402
452
  };
403
453
  card: {
@@ -434,47 +484,26 @@ declare const tokens: {
434
484
  };
435
485
  };
436
486
  checkbox: {
437
- color: DesignToken;
438
- cursor: DesignToken;
439
- "font-family": DesignToken;
440
- "font-size": DesignToken;
441
- "font-weight": DesignToken;
442
- gap: DesignToken;
443
- "line-height": DesignToken;
444
- "outline-offset": DesignToken;
445
- "checked-indicator": {
446
- stroke: DesignToken;
447
- };
448
- "indeterminate-indicator": {
449
- stroke: DesignToken;
450
- };
451
- "hover-indicator": {
452
- hover: {
453
- stroke: DesignToken;
454
- };
455
- invalid: {
456
- hover: {
457
- stroke: DesignToken;
458
- };
459
- };
487
+ hover: {
488
+ "text-decoration-thickness": DesignToken;
489
+ color: DesignToken;
490
+ "text-decoration-line": DesignToken;
460
491
  };
461
492
  rectangle: {
462
- fill: DesignToken;
463
- stroke: DesignToken;
464
493
  checked: {
465
- fill: DesignToken;
466
494
  disabled: {
467
- fill: DesignToken;
468
495
  hover: {
469
496
  fill: DesignToken;
470
497
  };
498
+ fill: DesignToken;
471
499
  };
472
500
  hover: {
473
- fill: DesignToken;
474
501
  "disabled-invalid": {
475
502
  fill: DesignToken;
476
503
  };
504
+ fill: DesignToken;
477
505
  };
506
+ fill: DesignToken;
478
507
  invalid: {
479
508
  fill: DesignToken;
480
509
  hover: {
@@ -482,29 +511,26 @@ declare const tokens: {
482
511
  };
483
512
  };
484
513
  };
485
- disabled: {
486
- stroke: DesignToken;
487
- };
488
514
  hover: {
489
- stroke: DesignToken;
490
515
  "disabled-invalid": {
491
516
  stroke: DesignToken;
492
517
  };
518
+ stroke: DesignToken;
493
519
  };
494
520
  indeterminate: {
495
- fill: DesignToken;
496
521
  disabled: {
497
- fill: DesignToken;
498
522
  hover: {
499
523
  fill: DesignToken;
500
524
  };
525
+ fill: DesignToken;
501
526
  };
502
527
  hover: {
503
- fill: DesignToken;
504
528
  "disabled-invalid": {
505
529
  fill: DesignToken;
506
530
  };
531
+ fill: DesignToken;
507
532
  };
533
+ fill: DesignToken;
508
534
  invalid: {
509
535
  fill: DesignToken;
510
536
  hover: {
@@ -512,6 +538,11 @@ declare const tokens: {
512
538
  };
513
539
  };
514
540
  };
541
+ fill: DesignToken;
542
+ stroke: DesignToken;
543
+ disabled: {
544
+ stroke: DesignToken;
545
+ };
515
546
  invalid: {
516
547
  stroke: DesignToken;
517
548
  hover: {
@@ -519,17 +550,39 @@ declare const tokens: {
519
550
  };
520
551
  };
521
552
  };
522
- "icon-container": {
523
- "block-size": DesignToken;
524
- "inline-size": DesignToken;
525
- };
553
+ color: DesignToken;
554
+ cursor: DesignToken;
555
+ "font-family": DesignToken;
556
+ "font-size": DesignToken;
557
+ "font-weight": DesignToken;
558
+ gap: DesignToken;
559
+ "line-height": DesignToken;
560
+ "outline-offset": DesignToken;
561
+ "text-decoration-thickness": DesignToken;
562
+ "text-underline-offset": DesignToken;
526
563
  disabled: {
527
564
  cursor: DesignToken;
528
565
  color: DesignToken;
529
566
  };
530
- hover: {
531
- color: DesignToken;
532
- "text-decoration-thickness": DesignToken;
567
+ "checked-indicator": {
568
+ stroke: DesignToken;
569
+ };
570
+ "hover-indicator": {
571
+ hover: {
572
+ stroke: DesignToken;
573
+ };
574
+ invalid: {
575
+ hover: {
576
+ stroke: DesignToken;
577
+ };
578
+ };
579
+ };
580
+ "icon-container": {
581
+ "block-size": DesignToken;
582
+ "inline-size": DesignToken;
583
+ };
584
+ "indeterminate-indicator": {
585
+ stroke: DesignToken;
533
586
  };
534
587
  };
535
588
  column: {
@@ -554,10 +607,6 @@ declare const tokens: {
554
607
  "outline-offset": DesignToken;
555
608
  "padding-block": DesignToken;
556
609
  "padding-inline": DesignToken;
557
- "calender-picker-indicator": {
558
- "background-image": DesignToken;
559
- cursor: DesignToken;
560
- };
561
610
  disabled: {
562
611
  color: DesignToken;
563
612
  cursor: DesignToken;
@@ -578,6 +627,10 @@ declare const tokens: {
578
627
  "box-shadow": DesignToken;
579
628
  };
580
629
  };
630
+ "calender-picker-indicator": {
631
+ "background-image": DesignToken;
632
+ cursor: DesignToken;
633
+ };
581
634
  };
582
635
  "description-list": {
583
636
  color: DesignToken;
@@ -715,17 +768,18 @@ declare const tokens: {
715
768
  "border-width": DesignToken;
716
769
  color: DesignToken;
717
770
  cursor: DesignToken;
771
+ "line-height": DesignToken;
718
772
  "margin-inline-end": DesignToken;
719
773
  "padding-block": DesignToken;
720
774
  "padding-inline": DesignToken;
721
- hover: {
722
- "box-shadow": DesignToken;
723
- color: DesignToken;
724
- };
725
775
  disabled: {
726
776
  color: DesignToken;
727
777
  cursor: DesignToken;
728
778
  };
779
+ hover: {
780
+ "box-shadow": DesignToken;
781
+ color: DesignToken;
782
+ };
729
783
  };
730
784
  };
731
785
  "file-list": {
@@ -840,6 +894,10 @@ declare const tokens: {
840
894
  };
841
895
  };
842
896
  icon: {
897
+ "heading-0": {
898
+ "font-size": DesignToken;
899
+ "line-height": DesignToken;
900
+ };
843
901
  "font-size": DesignToken;
844
902
  "line-height": DesignToken;
845
903
  small: {
@@ -850,6 +908,14 @@ declare const tokens: {
850
908
  "font-size": DesignToken;
851
909
  "line-height": DesignToken;
852
910
  };
911
+ "heading-1": {
912
+ "font-size": DesignToken;
913
+ "line-height": DesignToken;
914
+ };
915
+ "heading-2": {
916
+ "font-size": DesignToken;
917
+ "line-height": DesignToken;
918
+ };
853
919
  "heading-3": {
854
920
  "font-size": DesignToken;
855
921
  "line-height": DesignToken;
@@ -988,6 +1054,41 @@ declare const tokens: {
988
1054
  mark: {
989
1055
  "background-color": DesignToken;
990
1056
  };
1057
+ menu: {
1058
+ "font-family": DesignToken;
1059
+ "font-size": DesignToken;
1060
+ "font-weight": DesignToken;
1061
+ "line-height": DesignToken;
1062
+ link: {
1063
+ color: DesignToken;
1064
+ gap: DesignToken;
1065
+ "outline-offset": DesignToken;
1066
+ "padding-block": DesignToken;
1067
+ "padding-inline": DesignToken;
1068
+ "text-decoration-line": DesignToken;
1069
+ "text-decoration-thickness": DesignToken;
1070
+ "text-underline-offset": DesignToken;
1071
+ hover: {
1072
+ color: DesignToken;
1073
+ "text-decoration-line": DesignToken;
1074
+ };
1075
+ contrast: {
1076
+ color: DesignToken;
1077
+ hover: {
1078
+ color: DesignToken;
1079
+ };
1080
+ };
1081
+ inverse: {
1082
+ color: DesignToken;
1083
+ hover: {
1084
+ color: DesignToken;
1085
+ };
1086
+ };
1087
+ };
1088
+ list: {
1089
+ gap: DesignToken;
1090
+ };
1091
+ };
991
1092
  "ordered-list": {
992
1093
  color: DesignToken;
993
1094
  "font-family": DesignToken;
@@ -1297,13 +1398,6 @@ declare const tokens: {
1297
1398
  "outline-offset": DesignToken;
1298
1399
  "padding-block": DesignToken;
1299
1400
  "padding-inline": DesignToken;
1300
- "cancel-button": {
1301
- "background-image": DesignToken;
1302
- "block-size": DesignToken;
1303
- color: DesignToken;
1304
- cursor: DesignToken;
1305
- "inline-size": DesignToken;
1306
- };
1307
1401
  hover: {
1308
1402
  "box-shadow": DesignToken;
1309
1403
  };
@@ -1314,6 +1408,13 @@ declare const tokens: {
1314
1408
  "box-shadow": DesignToken;
1315
1409
  };
1316
1410
  };
1411
+ "cancel-button": {
1412
+ "background-image": DesignToken;
1413
+ "block-size": DesignToken;
1414
+ color: DesignToken;
1415
+ cursor: DesignToken;
1416
+ "inline-size": DesignToken;
1417
+ };
1317
1418
  placeholder: {
1318
1419
  color: DesignToken;
1319
1420
  };
@@ -1392,6 +1493,19 @@ declare const tokens: {
1392
1493
  };
1393
1494
  };
1394
1495
  "standalone-link": {
1496
+ hover: {
1497
+ "text-decoration-thickness": DesignToken;
1498
+ "text-underline-offset": DesignToken;
1499
+ color: DesignToken;
1500
+ "text-decoration-line": DesignToken;
1501
+ };
1502
+ "with-icon": {
1503
+ "text-decoration-line": DesignToken;
1504
+ "text-decoration-thickness": DesignToken;
1505
+ hover: {
1506
+ "text-decoration-line": DesignToken;
1507
+ };
1508
+ };
1395
1509
  color: DesignToken;
1396
1510
  "column-gap": DesignToken;
1397
1511
  "font-family": DesignToken;
@@ -1399,6 +1513,7 @@ declare const tokens: {
1399
1513
  "font-weight": DesignToken;
1400
1514
  "line-height": DesignToken;
1401
1515
  "outline-offset": DesignToken;
1516
+ "text-decoration-line": DesignToken;
1402
1517
  "text-decoration-thickness": DesignToken;
1403
1518
  "text-underline-offset": DesignToken;
1404
1519
  contrast: {
@@ -1407,23 +1522,12 @@ declare const tokens: {
1407
1522
  color: DesignToken;
1408
1523
  };
1409
1524
  };
1410
- hover: {
1411
- color: DesignToken;
1412
- "text-decoration-thickness": DesignToken;
1413
- "text-underline-offset": DesignToken;
1414
- };
1415
1525
  inverse: {
1416
1526
  color: DesignToken;
1417
1527
  hover: {
1418
1528
  color: DesignToken;
1419
1529
  };
1420
1530
  };
1421
- "with-icon": {
1422
- "text-decoration-line": DesignToken;
1423
- hover: {
1424
- "text-decoration-line": DesignToken;
1425
- };
1426
- };
1427
1531
  };
1428
1532
  switch: {
1429
1533
  "background-color": DesignToken;
@@ -1448,6 +1552,11 @@ declare const tokens: {
1448
1552
  };
1449
1553
  };
1450
1554
  "table-of-contents": {
1555
+ heading: {
1556
+ "font-weight": DesignToken;
1557
+ "font-size": DesignToken;
1558
+ "line-height": DesignToken;
1559
+ };
1451
1560
  "font-family": DesignToken;
1452
1561
  "font-size": DesignToken;
1453
1562
  "font-weight": DesignToken;
@@ -1471,11 +1580,6 @@ declare const tokens: {
1471
1580
  "padding-inline-start": DesignToken;
1472
1581
  };
1473
1582
  };
1474
- heading: {
1475
- "font-weight": DesignToken;
1476
- "font-size": DesignToken;
1477
- "line-height": DesignToken;
1478
- };
1479
1583
  };
1480
1584
  table: {
1481
1585
  color: DesignToken;
@@ -1600,10 +1704,6 @@ declare const tokens: {
1600
1704
  "outline-offset": DesignToken;
1601
1705
  "padding-block": DesignToken;
1602
1706
  "padding-inline": DesignToken;
1603
- "calender-picker-indicator": {
1604
- "background-image": DesignToken;
1605
- cursor: DesignToken;
1606
- };
1607
1707
  disabled: {
1608
1708
  color: DesignToken;
1609
1709
  cursor: DesignToken;
@@ -1624,6 +1724,10 @@ declare const tokens: {
1624
1724
  "box-shadow": DesignToken;
1625
1725
  };
1626
1726
  };
1727
+ "calender-picker-indicator": {
1728
+ "background-image": DesignToken;
1729
+ cursor: DesignToken;
1730
+ };
1627
1731
  };
1628
1732
  "unordered-list": {
1629
1733
  color: DesignToken;