@amsterdam/design-system-tokens 0.10.0 → 0.12.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 (64) hide show
  1. package/CHANGELOG.md +49 -13
  2. package/README.md +197 -1
  3. package/build.js +15 -14
  4. package/dist/compact.css +17 -13
  5. package/dist/compact.d.ts +10 -12
  6. package/dist/compact.json +12 -7
  7. package/dist/compact.mjs +13 -9
  8. package/dist/compact.scss +17 -13
  9. package/dist/compact.theme.css +17 -13
  10. package/dist/index.css +828 -770
  11. package/dist/index.d.ts +187 -85
  12. package/dist/index.json +349 -240
  13. package/dist/index.mjs +278 -220
  14. package/dist/index.scss +828 -770
  15. package/dist/index.theme.css +828 -770
  16. package/package.json +11 -5
  17. package/src/brand/ams/space.compact.tokens.json +5 -0
  18. package/src/brand/ams/space.tokens.json +10 -19
  19. package/src/brand/ams/text.compact.tokens.json +7 -7
  20. package/src/brand/ams/text.tokens.json +7 -7
  21. package/src/common/ams/link-appearance.tokens.json +18 -6
  22. package/src/components/ams/accordion.tokens.json +4 -4
  23. package/src/components/ams/action-group.tokens.json +7 -0
  24. package/src/components/ams/alert.tokens.json +6 -3
  25. package/src/components/ams/avatar.tokens.json +5 -2
  26. package/src/components/ams/badge.tokens.json +1 -1
  27. package/src/components/ams/breadcrumb.tokens.json +4 -1
  28. package/src/components/ams/breakout.tokens.json +11 -0
  29. package/src/components/ams/button.tokens.json +7 -3
  30. package/src/components/ams/card.tokens.json +4 -0
  31. package/src/components/ams/{form-field-character-counter.tokens.json → character-count.tokens.json} +1 -1
  32. package/src/components/ams/checkbox.tokens.json +1 -0
  33. package/src/components/ams/column.tokens.json +6 -5
  34. package/src/components/ams/date-input.tokens.json +2 -2
  35. package/src/components/ams/description-list.tokens.json +6 -6
  36. package/src/components/ams/dialog.tokens.json +7 -11
  37. package/src/components/ams/field-set.tokens.json +3 -7
  38. package/src/components/ams/field.tokens.json +3 -9
  39. package/src/components/ams/file-input.tokens.json +5 -5
  40. package/src/components/ams/form-error-list.tokens.json +7 -0
  41. package/src/components/ams/header.tokens.json +1 -1
  42. package/src/components/ams/hint.tokens.json +7 -0
  43. package/src/components/ams/icon-button.tokens.json +2 -2
  44. package/src/components/ams/image-slider.tokens.json +26 -0
  45. package/src/components/ams/link-list.tokens.json +8 -8
  46. package/src/components/ams/link.tokens.json +8 -8
  47. package/src/components/ams/mega-menu.tokens.json +1 -1
  48. package/src/components/ams/ordered-list.tokens.json +4 -1
  49. package/src/components/ams/page-menu.tokens.json +1 -1
  50. package/src/components/ams/pagination.tokens.json +2 -1
  51. package/src/components/ams/password-input.tokens.json +33 -0
  52. package/src/components/ams/radio.tokens.json +37 -35
  53. package/src/components/ams/row.tokens.json +6 -5
  54. package/src/components/ams/search-field.tokens.json +5 -7
  55. package/src/components/ams/select.tokens.json +3 -3
  56. package/src/components/ams/skip-link.tokens.json +2 -2
  57. package/src/components/ams/table-of-contents.tokens.json +4 -4
  58. package/src/components/ams/table.tokens.json +2 -2
  59. package/src/components/ams/tabs.tokens.json +3 -2
  60. package/src/components/ams/text-area.tokens.json +2 -2
  61. package/src/components/ams/text-input.tokens.json +2 -2
  62. package/src/components/ams/time-input.tokens.json +2 -2
  63. package/src/components/ams/top-task-link.tokens.json +1 -0
  64. package/src/components/ams/unordered-list.tokens.json +4 -1
package/dist/index.d.ts CHANGED
@@ -1,23 +1,16 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Fri, 28 Jun 2024 12:13:40 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
5
  export default tokens;
7
6
 
8
7
  declare interface DesignToken {
9
- value: any;
10
- name?: string;
8
+ value?: any;
9
+ type?: string;
11
10
  comment?: string;
11
+ name?: string;
12
12
  themeable?: boolean;
13
- attributes?: {
14
- category?: string;
15
- type?: string;
16
- item?: string;
17
- subitem?: string;
18
- state?: string;
19
- [key: string]: any;
20
- };
13
+ attributes?: Record<string, unknown>;
21
14
  [key: string]: any;
22
15
  }
23
16
 
@@ -57,26 +50,17 @@ declare const tokens: {
57
50
  "2x-wide": DesignToken
58
51
  },
59
52
  "space": {
53
+ "xs": DesignToken,
54
+ "sm": DesignToken,
55
+ "md": DesignToken,
56
+ "lg": DesignToken,
57
+ "xl": DesignToken,
60
58
  "grid": {
61
59
  "xs": DesignToken,
62
60
  "sm": DesignToken,
63
61
  "md": DesignToken,
64
62
  "lg": DesignToken,
65
63
  "xl": DesignToken
66
- },
67
- "inside": {
68
- "xs": DesignToken,
69
- "sm": DesignToken,
70
- "md": DesignToken,
71
- "lg": DesignToken,
72
- "xl": DesignToken
73
- },
74
- "stack": {
75
- "xs": DesignToken,
76
- "sm": DesignToken,
77
- "md": DesignToken,
78
- "lg": DesignToken,
79
- "xl": DesignToken
80
64
  }
81
65
  },
82
66
  "text": {
@@ -151,12 +135,6 @@ declare const tokens: {
151
135
  "hover": {
152
136
  "color": DesignToken
153
137
  },
154
- "on-background-dark": {
155
- "color": DesignToken
156
- },
157
- "on-background-light": {
158
- "color": DesignToken
159
- },
160
138
  "regular": {
161
139
  "text-decoration-line": DesignToken,
162
140
  "hover": {
@@ -169,6 +147,24 @@ declare const tokens: {
169
147
  "hover": {
170
148
  "text-decoration-line": DesignToken
171
149
  }
150
+ },
151
+ "contrast": {
152
+ "color": DesignToken,
153
+ "hover": {
154
+ "color": DesignToken
155
+ },
156
+ "visited": {
157
+ "color": DesignToken
158
+ }
159
+ },
160
+ "inverse": {
161
+ "color": DesignToken,
162
+ "hover": {
163
+ "color": DesignToken
164
+ },
165
+ "visited": {
166
+ "color": DesignToken
167
+ }
172
168
  }
173
169
  },
174
170
  "accordion": {
@@ -194,6 +190,9 @@ declare const tokens: {
194
190
  "padding-inline": DesignToken
195
191
  }
196
192
  },
193
+ "action-group": {
194
+ "gap": DesignToken
195
+ },
197
196
  "alert": {
198
197
  "border-width": DesignToken,
199
198
  "border-style": DesignToken,
@@ -217,6 +216,9 @@ declare const tokens: {
217
216
  "hover": {
218
217
  "fill": DesignToken
219
218
  }
219
+ },
220
+ "content": {
221
+ "gap": DesignToken
220
222
  }
221
223
  },
222
224
  "aspect-ratio": {
@@ -247,6 +249,9 @@ declare const tokens: {
247
249
  "background-color": DesignToken,
248
250
  "color": DesignToken
249
251
  },
252
+ "forced-colors": {
253
+ "border-width": DesignToken
254
+ },
250
255
  "green": {
251
256
  "background-color": DesignToken,
252
257
  "color": DesignToken
@@ -369,7 +374,10 @@ declare const tokens: {
369
374
  "font-weight": DesignToken,
370
375
  "line-height": DesignToken,
371
376
  "separator": {
372
- "background-image": DesignToken
377
+ "background-image": DesignToken,
378
+ "block-size": DesignToken,
379
+ "inline-size": DesignToken,
380
+ "margin-inline": DesignToken
373
381
  },
374
382
  "link": {
375
383
  "color": DesignToken,
@@ -383,15 +391,22 @@ declare const tokens: {
383
391
  }
384
392
  }
385
393
  },
394
+ "breakout": {
395
+ "row-gap": {
396
+ "sm": DesignToken,
397
+ "md": DesignToken,
398
+ "lg": DesignToken
399
+ }
400
+ },
386
401
  "button": {
387
402
  "cursor": DesignToken,
388
403
  "font-family": DesignToken,
389
404
  "font-size": DesignToken,
390
405
  "line-height": DesignToken,
391
406
  "gap": DesignToken,
407
+ "outline-offset": DesignToken,
392
408
  "padding-block": DesignToken,
393
409
  "padding-inline": DesignToken,
394
- "outline-offset": DesignToken,
395
410
  "disabled": {
396
411
  "cursor": DesignToken
397
412
  },
@@ -439,9 +454,17 @@ declare const tokens: {
439
454
  "background-color": DesignToken,
440
455
  "color": DesignToken
441
456
  }
457
+ },
458
+ "icon-only": {
459
+ "padding-block": DesignToken,
460
+ "padding-inline": DesignToken
442
461
  }
443
462
  },
444
463
  "card": {
464
+ "gap": DesignToken,
465
+ "heading-group": {
466
+ "gap": DesignToken
467
+ },
445
468
  "link": {
446
469
  "color": DesignToken,
447
470
  "text-decoration-line": DesignToken,
@@ -454,11 +477,22 @@ declare const tokens: {
454
477
  },
455
478
  "outline-offset": DesignToken
456
479
  },
480
+ "character-count": {
481
+ "color": DesignToken,
482
+ "font-family": DesignToken,
483
+ "font-size": DesignToken,
484
+ "font-weight": DesignToken,
485
+ "line-height": DesignToken,
486
+ "error": {
487
+ "color": DesignToken
488
+ }
489
+ },
457
490
  "checkbox": {
458
491
  "color": DesignToken,
459
492
  "font-family": DesignToken,
460
493
  "font-size": DesignToken,
461
494
  "font-weight": DesignToken,
495
+ "gap": DesignToken,
462
496
  "line-height": DesignToken,
463
497
  "outline-offset": DesignToken,
464
498
  "checkmark": {
@@ -527,6 +561,7 @@ declare const tokens: {
527
561
  },
528
562
  "column": {
529
563
  "gap": {
564
+ "no": DesignToken,
530
565
  "xs": DesignToken,
531
566
  "sm": DesignToken,
532
567
  "md": DesignToken,
@@ -571,14 +606,14 @@ declare const tokens: {
571
606
  },
572
607
  "description-list": {
573
608
  "color": DesignToken,
609
+ "column-gap": DesignToken,
574
610
  "font-family": DesignToken,
575
611
  "font-size": DesignToken,
576
- "font-weight": DesignToken,
577
- "gap": DesignToken,
578
612
  "inverse-color": DesignToken,
579
613
  "line-height": DesignToken,
580
- "row": {
581
- "gap": DesignToken
614
+ "row-gap": DesignToken,
615
+ "term": {
616
+ "font-weight": DesignToken
582
617
  },
583
618
  "details": {
584
619
  "font-weight": DesignToken,
@@ -588,18 +623,14 @@ declare const tokens: {
588
623
  "dialog": {
589
624
  "background-color": DesignToken,
590
625
  "border": DesignToken,
626
+ "gap": DesignToken,
627
+ "inline-size": DesignToken,
628
+ "max-block-size": DesignToken,
591
629
  "max-inline-size": DesignToken,
592
- "form": {
593
- "gap": DesignToken,
594
- "padding-block": DesignToken,
595
- "padding-inline": DesignToken,
596
- "max-block-size": DesignToken
597
- },
630
+ "padding-block": DesignToken,
631
+ "padding-inline": DesignToken,
598
632
  "header": {
599
633
  "gap": DesignToken
600
- },
601
- "footer": {
602
- "gap": DesignToken
603
634
  }
604
635
  },
605
636
  "error-message": {
@@ -668,15 +699,8 @@ declare const tokens: {
668
699
  }
669
700
  }
670
701
  },
671
- "form-field-character-counter": {
672
- "color": DesignToken,
673
- "font-family": DesignToken,
674
- "font-size": DesignToken,
675
- "font-weight": DesignToken,
676
- "line-height": DesignToken,
677
- "error": {
678
- "color": DesignToken
679
- }
702
+ "form-error-list": {
703
+ "outline-offset": DesignToken
680
704
  },
681
705
  "gap": {
682
706
  "xs": DesignToken,
@@ -745,6 +769,9 @@ declare const tokens: {
745
769
  }
746
770
  }
747
771
  },
772
+ "hint": {
773
+ "color": DesignToken
774
+ },
748
775
  "icon-button": {
749
776
  "color": DesignToken,
750
777
  "outline-offset": DesignToken,
@@ -755,7 +782,7 @@ declare const tokens: {
755
782
  "disabled": {
756
783
  "color": DesignToken
757
784
  },
758
- "on-background-light": {
785
+ "contrast-color": {
759
786
  "color": DesignToken,
760
787
  "hover": {
761
788
  "background-color": DesignToken,
@@ -765,7 +792,7 @@ declare const tokens: {
765
792
  "color": DesignToken
766
793
  }
767
794
  },
768
- "on-background-dark": {
795
+ "inverse-color": {
769
796
  "background-color": DesignToken,
770
797
  "color": DesignToken,
771
798
  "hover": {
@@ -796,6 +823,28 @@ declare const tokens: {
796
823
  "line-height": DesignToken
797
824
  }
798
825
  },
826
+ "image-slider": {
827
+ "gap": DesignToken,
828
+ "scroller": {
829
+ "gap": DesignToken,
830
+ "outline-offset": DesignToken
831
+ },
832
+ "thumbnails": {
833
+ "gap": DesignToken,
834
+ "thumbnail": {
835
+ "background-color": DesignToken,
836
+ "cursor": DesignToken,
837
+ "opacity": DesignToken,
838
+ "outline-offset": DesignToken,
839
+ "in-view": {
840
+ "opacity": DesignToken
841
+ },
842
+ "hover": {
843
+ "opacity": DesignToken
844
+ }
845
+ }
846
+ }
847
+ },
799
848
  "label": {
800
849
  "color": DesignToken,
801
850
  "font-family": DesignToken,
@@ -828,13 +877,13 @@ declare const tokens: {
828
877
  "color": DesignToken,
829
878
  "text-decoration-line": DesignToken
830
879
  },
831
- "on-background-dark": {
880
+ "contrast-color": {
832
881
  "color": DesignToken,
833
882
  "hover": {
834
883
  "color": DesignToken
835
884
  }
836
885
  },
837
- "on-background-light": {
886
+ "inverse-color": {
838
887
  "color": DesignToken,
839
888
  "hover": {
840
889
  "color": DesignToken
@@ -876,7 +925,7 @@ declare const tokens: {
876
925
  "text-underline-offset": DesignToken
877
926
  }
878
927
  },
879
- "on-background-dark": {
928
+ "contrast-color": {
880
929
  "color": DesignToken,
881
930
  "hover": {
882
931
  "color": DesignToken
@@ -885,7 +934,7 @@ declare const tokens: {
885
934
  "color": DesignToken
886
935
  }
887
936
  },
888
- "on-background-light": {
937
+ "inverse-color": {
889
938
  "color": DesignToken,
890
939
  "hover": {
891
940
  "color": DesignToken
@@ -943,7 +992,10 @@ declare const tokens: {
943
992
  "padding-inline-start": DesignToken
944
993
  },
945
994
  "ordered-list": {
995
+ "gap": DesignToken,
946
996
  "list-style-type": DesignToken,
997
+ "padding-block-end": DesignToken,
998
+ "padding-block-start": DesignToken,
947
999
  "item": {
948
1000
  "margin-inline-start": DesignToken,
949
1001
  "padding-inline-start": DesignToken
@@ -985,6 +1037,7 @@ declare const tokens: {
985
1037
  "font-weight": DesignToken,
986
1038
  "line-height": DesignToken,
987
1039
  "button": {
1040
+ "gap": DesignToken,
988
1041
  "outline-offset": DesignToken,
989
1042
  "padding-inline": DesignToken,
990
1043
  "text-decoration-line": DesignToken,
@@ -1015,45 +1068,84 @@ declare const tokens: {
1015
1068
  "line-height": DesignToken
1016
1069
  }
1017
1070
  },
1071
+ "password-input": {
1072
+ "background-color": DesignToken,
1073
+ "box-shadow": DesignToken,
1074
+ "color": DesignToken,
1075
+ "font-family": DesignToken,
1076
+ "font-size": DesignToken,
1077
+ "font-weight": DesignToken,
1078
+ "line-height": DesignToken,
1079
+ "outline-offset": DesignToken,
1080
+ "padding-block": DesignToken,
1081
+ "padding-inline": DesignToken,
1082
+ "disabled": {
1083
+ "background-color": DesignToken,
1084
+ "box-shadow": DesignToken,
1085
+ "color": DesignToken
1086
+ },
1087
+ "hover": {
1088
+ "box-shadow": DesignToken
1089
+ },
1090
+ "invalid": {
1091
+ "box-shadow": DesignToken,
1092
+ "hover": {
1093
+ "box-shadow": DesignToken
1094
+ }
1095
+ },
1096
+ "placeholder": {
1097
+ "color": DesignToken
1098
+ }
1099
+ },
1018
1100
  "radio": {
1019
1101
  "color": DesignToken,
1020
1102
  "font-family": DesignToken,
1021
1103
  "font-size": DesignToken,
1022
1104
  "font-weight": DesignToken,
1105
+ "gap": DesignToken,
1023
1106
  "line-height": DesignToken,
1024
1107
  "outline-offset": DesignToken,
1025
- "circle": {
1026
- "border-color": DesignToken,
1027
- "border-width": DesignToken,
1028
- "checked": {
1029
- "background-image": DesignToken,
1108
+ "text-decoration-thickness": DesignToken,
1109
+ "text-underline-offset": DesignToken,
1110
+ "checked-indicator": {
1111
+ "fill": DesignToken,
1112
+ "disabled": {
1113
+ "fill": DesignToken
1114
+ },
1115
+ "disabled-invalid": {
1116
+ "fill": DesignToken,
1030
1117
  "hover": {
1031
- "background-image": DesignToken
1118
+ "fill": DesignToken
1032
1119
  }
1033
1120
  },
1121
+ "hover": {
1122
+ "fill": DesignToken
1123
+ },
1124
+ "invalid": {
1125
+ "fill": DesignToken,
1126
+ "hover": {
1127
+ "fill": DesignToken
1128
+ }
1129
+ }
1130
+ },
1131
+ "circle": {
1132
+ "stroke": DesignToken,
1034
1133
  "disabled": {
1035
- "border-color": DesignToken,
1036
- "border-width": DesignToken,
1037
- "checked": {
1038
- "background-image": DesignToken,
1039
- "hover": {
1040
- "background-image": DesignToken
1041
- }
1134
+ "stroke": DesignToken
1135
+ },
1136
+ "disabled-invalid": {
1137
+ "stroke": DesignToken,
1138
+ "hover": {
1139
+ "stroke": DesignToken
1042
1140
  }
1043
1141
  },
1044
1142
  "hover": {
1045
- "border-color": DesignToken
1143
+ "stroke": DesignToken
1046
1144
  },
1047
1145
  "invalid": {
1048
- "border-color": DesignToken,
1049
- "checked": {
1050
- "background-image": DesignToken,
1051
- "hover": {
1052
- "background-image": DesignToken
1053
- }
1054
- },
1146
+ "stroke": DesignToken,
1055
1147
  "hover": {
1056
- "border-color": DesignToken
1148
+ "stroke": DesignToken
1057
1149
  }
1058
1150
  }
1059
1151
  },
@@ -1062,11 +1154,16 @@ declare const tokens: {
1062
1154
  },
1063
1155
  "hover": {
1064
1156
  "color": DesignToken,
1065
- "text-decoration-thickness": DesignToken
1157
+ "text-decoration-line": DesignToken
1158
+ },
1159
+ "icon-container": {
1160
+ "block-size": DesignToken,
1161
+ "inline-size": DesignToken
1066
1162
  }
1067
1163
  },
1068
1164
  "row": {
1069
1165
  "gap": {
1166
+ "no": DesignToken,
1070
1167
  "xs": DesignToken,
1071
1168
  "sm": DesignToken,
1072
1169
  "md": DesignToken,
@@ -1268,6 +1365,7 @@ declare const tokens: {
1268
1365
  }
1269
1366
  },
1270
1367
  "tabs": {
1368
+ "gap": DesignToken,
1271
1369
  "list": {
1272
1370
  "background-color": DesignToken,
1273
1371
  "border-block-end": DesignToken
@@ -1392,6 +1490,7 @@ declare const tokens: {
1392
1490
  }
1393
1491
  },
1394
1492
  "top-task-link": {
1493
+ "gap": DesignToken,
1395
1494
  "description": {
1396
1495
  "color": DesignToken,
1397
1496
  "font-family": DesignToken,
@@ -1429,7 +1528,10 @@ declare const tokens: {
1429
1528
  "padding-inline-start": DesignToken
1430
1529
  },
1431
1530
  "unordered-list": {
1531
+ "gap": DesignToken,
1432
1532
  "list-style-type": DesignToken,
1533
+ "padding-block-end": DesignToken,
1534
+ "padding-block-start": DesignToken,
1433
1535
  "item": {
1434
1536
  "margin-inline-start": DesignToken,
1435
1537
  "padding-inline-start": DesignToken