@amsterdam/design-system-tokens 1.0.1 → 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 +50 -0
  2. package/README.md +4 -0
  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 +329 -265
  10. package/dist/index.d.ts +218 -116
  11. package/dist/index.json +515 -413
  12. package/dist/index.mjs +453 -400
  13. package/dist/index.scss +329 -265
  14. package/dist/index.theme.css +329 -265
  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 +1 -1
  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;
@@ -402,6 +432,24 @@ declare const tokens: {
402
432
  };
403
433
  };
404
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;
451
+ };
452
+ };
405
453
  card: {
406
454
  heading: {
407
455
  "margin-block-end": DesignToken;
@@ -436,47 +484,26 @@ declare const tokens: {
436
484
  };
437
485
  };
438
486
  checkbox: {
439
- color: DesignToken;
440
- cursor: DesignToken;
441
- "font-family": DesignToken;
442
- "font-size": DesignToken;
443
- "font-weight": DesignToken;
444
- gap: DesignToken;
445
- "line-height": DesignToken;
446
- "outline-offset": DesignToken;
447
- "checked-indicator": {
448
- stroke: DesignToken;
449
- };
450
- "indeterminate-indicator": {
451
- stroke: DesignToken;
452
- };
453
- "hover-indicator": {
454
- hover: {
455
- stroke: DesignToken;
456
- };
457
- invalid: {
458
- hover: {
459
- stroke: DesignToken;
460
- };
461
- };
487
+ hover: {
488
+ "text-decoration-thickness": DesignToken;
489
+ color: DesignToken;
490
+ "text-decoration-line": DesignToken;
462
491
  };
463
492
  rectangle: {
464
- fill: DesignToken;
465
- stroke: DesignToken;
466
493
  checked: {
467
- fill: DesignToken;
468
494
  disabled: {
469
- fill: DesignToken;
470
495
  hover: {
471
496
  fill: DesignToken;
472
497
  };
498
+ fill: DesignToken;
473
499
  };
474
500
  hover: {
475
- fill: DesignToken;
476
501
  "disabled-invalid": {
477
502
  fill: DesignToken;
478
503
  };
504
+ fill: DesignToken;
479
505
  };
506
+ fill: DesignToken;
480
507
  invalid: {
481
508
  fill: DesignToken;
482
509
  hover: {
@@ -484,29 +511,26 @@ declare const tokens: {
484
511
  };
485
512
  };
486
513
  };
487
- disabled: {
488
- stroke: DesignToken;
489
- };
490
514
  hover: {
491
- stroke: DesignToken;
492
515
  "disabled-invalid": {
493
516
  stroke: DesignToken;
494
517
  };
518
+ stroke: DesignToken;
495
519
  };
496
520
  indeterminate: {
497
- fill: DesignToken;
498
521
  disabled: {
499
- fill: DesignToken;
500
522
  hover: {
501
523
  fill: DesignToken;
502
524
  };
525
+ fill: DesignToken;
503
526
  };
504
527
  hover: {
505
- fill: DesignToken;
506
528
  "disabled-invalid": {
507
529
  fill: DesignToken;
508
530
  };
531
+ fill: DesignToken;
509
532
  };
533
+ fill: DesignToken;
510
534
  invalid: {
511
535
  fill: DesignToken;
512
536
  hover: {
@@ -514,6 +538,11 @@ declare const tokens: {
514
538
  };
515
539
  };
516
540
  };
541
+ fill: DesignToken;
542
+ stroke: DesignToken;
543
+ disabled: {
544
+ stroke: DesignToken;
545
+ };
517
546
  invalid: {
518
547
  stroke: DesignToken;
519
548
  hover: {
@@ -521,17 +550,39 @@ declare const tokens: {
521
550
  };
522
551
  };
523
552
  };
524
- "icon-container": {
525
- "block-size": DesignToken;
526
- "inline-size": DesignToken;
527
- };
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;
528
563
  disabled: {
529
564
  cursor: DesignToken;
530
565
  color: DesignToken;
531
566
  };
532
- hover: {
533
- color: DesignToken;
534
- "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;
535
586
  };
536
587
  };
537
588
  column: {
@@ -556,10 +607,6 @@ declare const tokens: {
556
607
  "outline-offset": DesignToken;
557
608
  "padding-block": DesignToken;
558
609
  "padding-inline": DesignToken;
559
- "calender-picker-indicator": {
560
- "background-image": DesignToken;
561
- cursor: DesignToken;
562
- };
563
610
  disabled: {
564
611
  color: DesignToken;
565
612
  cursor: DesignToken;
@@ -580,6 +627,10 @@ declare const tokens: {
580
627
  "box-shadow": DesignToken;
581
628
  };
582
629
  };
630
+ "calender-picker-indicator": {
631
+ "background-image": DesignToken;
632
+ cursor: DesignToken;
633
+ };
583
634
  };
584
635
  "description-list": {
585
636
  color: DesignToken;
@@ -717,17 +768,18 @@ declare const tokens: {
717
768
  "border-width": DesignToken;
718
769
  color: DesignToken;
719
770
  cursor: DesignToken;
771
+ "line-height": DesignToken;
720
772
  "margin-inline-end": DesignToken;
721
773
  "padding-block": DesignToken;
722
774
  "padding-inline": DesignToken;
723
- hover: {
724
- "box-shadow": DesignToken;
725
- color: DesignToken;
726
- };
727
775
  disabled: {
728
776
  color: DesignToken;
729
777
  cursor: DesignToken;
730
778
  };
779
+ hover: {
780
+ "box-shadow": DesignToken;
781
+ color: DesignToken;
782
+ };
731
783
  };
732
784
  };
733
785
  "file-list": {
@@ -842,6 +894,10 @@ declare const tokens: {
842
894
  };
843
895
  };
844
896
  icon: {
897
+ "heading-0": {
898
+ "font-size": DesignToken;
899
+ "line-height": DesignToken;
900
+ };
845
901
  "font-size": DesignToken;
846
902
  "line-height": DesignToken;
847
903
  small: {
@@ -852,6 +908,14 @@ declare const tokens: {
852
908
  "font-size": DesignToken;
853
909
  "line-height": DesignToken;
854
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
+ };
855
919
  "heading-3": {
856
920
  "font-size": DesignToken;
857
921
  "line-height": DesignToken;
@@ -990,6 +1054,41 @@ declare const tokens: {
990
1054
  mark: {
991
1055
  "background-color": DesignToken;
992
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
+ };
993
1092
  "ordered-list": {
994
1093
  color: DesignToken;
995
1094
  "font-family": DesignToken;
@@ -1299,13 +1398,6 @@ declare const tokens: {
1299
1398
  "outline-offset": DesignToken;
1300
1399
  "padding-block": DesignToken;
1301
1400
  "padding-inline": DesignToken;
1302
- "cancel-button": {
1303
- "background-image": DesignToken;
1304
- "block-size": DesignToken;
1305
- color: DesignToken;
1306
- cursor: DesignToken;
1307
- "inline-size": DesignToken;
1308
- };
1309
1401
  hover: {
1310
1402
  "box-shadow": DesignToken;
1311
1403
  };
@@ -1316,6 +1408,13 @@ declare const tokens: {
1316
1408
  "box-shadow": DesignToken;
1317
1409
  };
1318
1410
  };
1411
+ "cancel-button": {
1412
+ "background-image": DesignToken;
1413
+ "block-size": DesignToken;
1414
+ color: DesignToken;
1415
+ cursor: DesignToken;
1416
+ "inline-size": DesignToken;
1417
+ };
1319
1418
  placeholder: {
1320
1419
  color: DesignToken;
1321
1420
  };
@@ -1394,6 +1493,19 @@ declare const tokens: {
1394
1493
  };
1395
1494
  };
1396
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
+ };
1397
1509
  color: DesignToken;
1398
1510
  "column-gap": DesignToken;
1399
1511
  "font-family": DesignToken;
@@ -1401,6 +1513,7 @@ declare const tokens: {
1401
1513
  "font-weight": DesignToken;
1402
1514
  "line-height": DesignToken;
1403
1515
  "outline-offset": DesignToken;
1516
+ "text-decoration-line": DesignToken;
1404
1517
  "text-decoration-thickness": DesignToken;
1405
1518
  "text-underline-offset": DesignToken;
1406
1519
  contrast: {
@@ -1409,23 +1522,12 @@ declare const tokens: {
1409
1522
  color: DesignToken;
1410
1523
  };
1411
1524
  };
1412
- hover: {
1413
- color: DesignToken;
1414
- "text-decoration-thickness": DesignToken;
1415
- "text-underline-offset": DesignToken;
1416
- };
1417
1525
  inverse: {
1418
1526
  color: DesignToken;
1419
1527
  hover: {
1420
1528
  color: DesignToken;
1421
1529
  };
1422
1530
  };
1423
- "with-icon": {
1424
- "text-decoration-line": DesignToken;
1425
- hover: {
1426
- "text-decoration-line": DesignToken;
1427
- };
1428
- };
1429
1531
  };
1430
1532
  switch: {
1431
1533
  "background-color": DesignToken;
@@ -1450,6 +1552,11 @@ declare const tokens: {
1450
1552
  };
1451
1553
  };
1452
1554
  "table-of-contents": {
1555
+ heading: {
1556
+ "font-weight": DesignToken;
1557
+ "font-size": DesignToken;
1558
+ "line-height": DesignToken;
1559
+ };
1453
1560
  "font-family": DesignToken;
1454
1561
  "font-size": DesignToken;
1455
1562
  "font-weight": DesignToken;
@@ -1473,11 +1580,6 @@ declare const tokens: {
1473
1580
  "padding-inline-start": DesignToken;
1474
1581
  };
1475
1582
  };
1476
- heading: {
1477
- "font-weight": DesignToken;
1478
- "font-size": DesignToken;
1479
- "line-height": DesignToken;
1480
- };
1481
1583
  };
1482
1584
  table: {
1483
1585
  color: DesignToken;
@@ -1602,10 +1704,6 @@ declare const tokens: {
1602
1704
  "outline-offset": DesignToken;
1603
1705
  "padding-block": DesignToken;
1604
1706
  "padding-inline": DesignToken;
1605
- "calender-picker-indicator": {
1606
- "background-image": DesignToken;
1607
- cursor: DesignToken;
1608
- };
1609
1707
  disabled: {
1610
1708
  color: DesignToken;
1611
1709
  cursor: DesignToken;
@@ -1626,6 +1724,10 @@ declare const tokens: {
1626
1724
  "box-shadow": DesignToken;
1627
1725
  };
1628
1726
  };
1727
+ "calender-picker-indicator": {
1728
+ "background-image": DesignToken;
1729
+ cursor: DesignToken;
1730
+ };
1629
1731
  };
1630
1732
  "unordered-list": {
1631
1733
  color: DesignToken;