@amsterdam/design-system-tokens 0.11.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 (29) hide show
  1. package/CHANGELOG.md +29 -14
  2. package/README.md +197 -1
  3. package/dist/compact.css +16 -16
  4. package/dist/compact.scss +16 -16
  5. package/dist/compact.theme.css +16 -16
  6. package/dist/index.css +827 -778
  7. package/dist/index.d.ts +144 -47
  8. package/dist/index.json +158 -61
  9. package/dist/index.mjs +95 -46
  10. package/dist/index.scss +827 -778
  11. package/dist/index.theme.css +827 -778
  12. package/package.json +10 -5
  13. package/src/common/ams/link-appearance.tokens.json +18 -6
  14. package/src/components/ams/action-group.tokens.json +7 -0
  15. package/src/components/ams/avatar.tokens.json +3 -0
  16. package/src/components/ams/breakout.tokens.json +11 -0
  17. package/src/components/ams/button.tokens.json +4 -0
  18. package/src/components/ams/description-list.tokens.json +5 -5
  19. package/src/components/ams/dialog.tokens.json +4 -9
  20. package/src/components/ams/hint.tokens.json +7 -0
  21. package/src/components/ams/icon-button.tokens.json +2 -2
  22. package/src/components/ams/image-slider.tokens.json +26 -0
  23. package/src/components/ams/link-list.tokens.json +6 -6
  24. package/src/components/ams/link.tokens.json +8 -8
  25. package/src/components/ams/ordered-list.tokens.json +4 -1
  26. package/src/components/ams/password-input.tokens.json +33 -0
  27. package/src/components/ams/radio.tokens.json +36 -35
  28. package/src/components/ams/search-field.tokens.json +1 -3
  29. package/src/components/ams/unordered-list.tokens.json +4 -1
package/dist/index.d.ts CHANGED
@@ -135,12 +135,6 @@ declare const tokens: {
135
135
  "hover": {
136
136
  "color": DesignToken
137
137
  },
138
- "on-background-dark": {
139
- "color": DesignToken
140
- },
141
- "on-background-light": {
142
- "color": DesignToken
143
- },
144
138
  "regular": {
145
139
  "text-decoration-line": DesignToken,
146
140
  "hover": {
@@ -153,6 +147,24 @@ declare const tokens: {
153
147
  "hover": {
154
148
  "text-decoration-line": DesignToken
155
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
+ }
156
168
  }
157
169
  },
158
170
  "accordion": {
@@ -178,6 +190,9 @@ declare const tokens: {
178
190
  "padding-inline": DesignToken
179
191
  }
180
192
  },
193
+ "action-group": {
194
+ "gap": DesignToken
195
+ },
181
196
  "alert": {
182
197
  "border-width": DesignToken,
183
198
  "border-style": DesignToken,
@@ -234,6 +249,9 @@ declare const tokens: {
234
249
  "background-color": DesignToken,
235
250
  "color": DesignToken
236
251
  },
252
+ "forced-colors": {
253
+ "border-width": DesignToken
254
+ },
237
255
  "green": {
238
256
  "background-color": DesignToken,
239
257
  "color": DesignToken
@@ -373,6 +391,13 @@ declare const tokens: {
373
391
  }
374
392
  }
375
393
  },
394
+ "breakout": {
395
+ "row-gap": {
396
+ "sm": DesignToken,
397
+ "md": DesignToken,
398
+ "lg": DesignToken
399
+ }
400
+ },
376
401
  "button": {
377
402
  "cursor": DesignToken,
378
403
  "font-family": DesignToken,
@@ -429,6 +454,10 @@ declare const tokens: {
429
454
  "background-color": DesignToken,
430
455
  "color": DesignToken
431
456
  }
457
+ },
458
+ "icon-only": {
459
+ "padding-block": DesignToken,
460
+ "padding-inline": DesignToken
432
461
  }
433
462
  },
434
463
  "card": {
@@ -577,14 +606,14 @@ declare const tokens: {
577
606
  },
578
607
  "description-list": {
579
608
  "color": DesignToken,
609
+ "column-gap": DesignToken,
580
610
  "font-family": DesignToken,
581
611
  "font-size": DesignToken,
582
- "font-weight": DesignToken,
583
- "gap": DesignToken,
584
612
  "inverse-color": DesignToken,
585
613
  "line-height": DesignToken,
586
- "row": {
587
- "gap": DesignToken
614
+ "row-gap": DesignToken,
615
+ "term": {
616
+ "font-weight": DesignToken
588
617
  },
589
618
  "details": {
590
619
  "font-weight": DesignToken,
@@ -594,19 +623,14 @@ declare const tokens: {
594
623
  "dialog": {
595
624
  "background-color": DesignToken,
596
625
  "border": DesignToken,
626
+ "gap": DesignToken,
597
627
  "inline-size": DesignToken,
598
628
  "max-block-size": DesignToken,
599
629
  "max-inline-size": DesignToken,
600
- "form": {
601
- "gap": DesignToken,
602
- "padding-block": DesignToken,
603
- "padding-inline": DesignToken
604
- },
630
+ "padding-block": DesignToken,
631
+ "padding-inline": DesignToken,
605
632
  "header": {
606
633
  "gap": DesignToken
607
- },
608
- "footer": {
609
- "gap": DesignToken
610
634
  }
611
635
  },
612
636
  "error-message": {
@@ -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
@@ -1016,6 +1068,35 @@ declare const tokens: {
1016
1068
  "line-height": DesignToken
1017
1069
  }
1018
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
+ },
1019
1100
  "radio": {
1020
1101
  "color": DesignToken,
1021
1102
  "font-family": DesignToken,
@@ -1024,38 +1105,47 @@ declare const tokens: {
1024
1105
  "gap": DesignToken,
1025
1106
  "line-height": DesignToken,
1026
1107
  "outline-offset": DesignToken,
1027
- "circle": {
1028
- "border-color": DesignToken,
1029
- "border-width": DesignToken,
1030
- "checked": {
1031
- "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,
1032
1117
  "hover": {
1033
- "background-image": DesignToken
1118
+ "fill": DesignToken
1034
1119
  }
1035
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,
1036
1133
  "disabled": {
1037
- "border-color": DesignToken,
1038
- "border-width": DesignToken,
1039
- "checked": {
1040
- "background-image": DesignToken,
1041
- "hover": {
1042
- "background-image": DesignToken
1043
- }
1134
+ "stroke": DesignToken
1135
+ },
1136
+ "disabled-invalid": {
1137
+ "stroke": DesignToken,
1138
+ "hover": {
1139
+ "stroke": DesignToken
1044
1140
  }
1045
1141
  },
1046
1142
  "hover": {
1047
- "border-color": DesignToken
1143
+ "stroke": DesignToken
1048
1144
  },
1049
1145
  "invalid": {
1050
- "border-color": DesignToken,
1051
- "checked": {
1052
- "background-image": DesignToken,
1053
- "hover": {
1054
- "background-image": DesignToken
1055
- }
1056
- },
1146
+ "stroke": DesignToken,
1057
1147
  "hover": {
1058
- "border-color": DesignToken
1148
+ "stroke": DesignToken
1059
1149
  }
1060
1150
  }
1061
1151
  },
@@ -1064,7 +1154,11 @@ declare const tokens: {
1064
1154
  },
1065
1155
  "hover": {
1066
1156
  "color": DesignToken,
1067
- "text-decoration-thickness": DesignToken
1157
+ "text-decoration-line": DesignToken
1158
+ },
1159
+ "icon-container": {
1160
+ "block-size": DesignToken,
1161
+ "inline-size": DesignToken
1068
1162
  }
1069
1163
  },
1070
1164
  "row": {
@@ -1434,7 +1528,10 @@ declare const tokens: {
1434
1528
  "padding-inline-start": DesignToken
1435
1529
  },
1436
1530
  "unordered-list": {
1531
+ "gap": DesignToken,
1437
1532
  "list-style-type": DesignToken,
1533
+ "padding-block-end": DesignToken,
1534
+ "padding-block-start": DesignToken,
1438
1535
  "item": {
1439
1536
  "margin-inline-start": DesignToken,
1440
1537
  "padding-inline-start": DesignToken