@amsterdam/design-system-tokens 0.7.1 → 0.8.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 (34) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/compact.css +1 -1
  3. package/dist/compact.d.ts +1 -1
  4. package/dist/compact.mjs +1 -1
  5. package/dist/compact.scss +1 -1
  6. package/dist/compact.theme.css +1 -1
  7. package/dist/index.css +145 -64
  8. package/dist/index.d.ts +159 -22
  9. package/dist/index.json +191 -54
  10. package/dist/index.mjs +129 -48
  11. package/dist/index.scss +145 -64
  12. package/dist/index.theme.css +145 -64
  13. package/package.json +1 -1
  14. package/src/brand/ams/border.tokens.json +12 -0
  15. package/src/common/ams/link-appearance.tokens.json +2 -2
  16. package/src/components/ams/accordion.tokens.json +6 -4
  17. package/src/components/ams/alert.tokens.json +1 -1
  18. package/src/components/ams/button.tokens.json +11 -8
  19. package/src/components/ams/checkbox.tokens.json +6 -2
  20. package/src/components/ams/date-input.tokens.json +45 -0
  21. package/src/components/ams/description-list.tokens.json +20 -0
  22. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  23. package/src/components/ams/page-menu.tokens.json +2 -2
  24. package/src/components/ams/radio.tokens.json +4 -1
  25. package/src/components/ams/screen.tokens.json +1 -0
  26. package/src/components/ams/search-field.tokens.json +7 -6
  27. package/src/components/ams/select.tokens.json +41 -0
  28. package/src/components/ams/skip-link.tokens.json +1 -1
  29. package/src/components/ams/table.tokens.json +2 -2
  30. package/src/components/ams/tabs.tokens.json +3 -4
  31. package/src/components/ams/text-area.tokens.json +9 -8
  32. package/src/components/ams/text-input.tokens.json +8 -7
  33. package/src/components/ams/time-input.tokens.json +45 -0
  34. package/src/common/ams/border.tokens.json +0 -9
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 22 Mar 2024 15:51:06 GMT
3
+ * Generated on Mon, 22 Apr 2024 09:30:48 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -23,6 +23,14 @@ declare interface DesignToken {
23
23
 
24
24
  declare const tokens: {
25
25
  "ams": {
26
+ "border": {
27
+ "width": {
28
+ "sm": DesignToken,
29
+ "md": DesignToken,
30
+ "lg": DesignToken,
31
+ "xl": DesignToken
32
+ }
33
+ },
26
34
  "color": {
27
35
  "primary-black": DesignToken,
28
36
  "primary-white": DesignToken,
@@ -128,11 +136,6 @@ declare const tokens: {
128
136
  "cursor": DesignToken
129
137
  }
130
138
  },
131
- "border-width": {
132
- "sm": DesignToken,
133
- "md": DesignToken,
134
- "lg": DesignToken
135
- },
136
139
  "focus": {
137
140
  "outline-offset": DesignToken
138
141
  },
@@ -169,11 +172,13 @@ declare const tokens: {
169
172
  }
170
173
  },
171
174
  "accordion": {
175
+ "gap": DesignToken,
172
176
  "button": {
173
177
  "color": DesignToken,
174
178
  "font-family": DesignToken,
175
179
  "font-size": DesignToken,
176
180
  "font-weight": DesignToken,
181
+ "gap": DesignToken,
177
182
  "line-height": DesignToken,
178
183
  "padding-block": DesignToken,
179
184
  "padding-inline": DesignToken,
@@ -181,7 +186,7 @@ declare const tokens: {
181
186
  "outline-offset": DesignToken
182
187
  },
183
188
  "hover": {
184
- "box-shadow": DesignToken
189
+ "color": DesignToken
185
190
  }
186
191
  },
187
192
  "panel": {
@@ -346,6 +351,9 @@ declare const tokens: {
346
351
  "disabled": {
347
352
  "cursor": DesignToken
348
353
  },
354
+ "forced-color-mode": {
355
+ "border": DesignToken
356
+ },
349
357
  "primary": {
350
358
  "background-color": DesignToken,
351
359
  "box-shadow": DesignToken,
@@ -411,6 +419,7 @@ declare const tokens: {
411
419
  "outline-offset": DesignToken,
412
420
  "checkmark": {
413
421
  "border-color": DesignToken,
422
+ "border-width": DesignToken,
414
423
  "checked": {
415
424
  "background-color": DesignToken,
416
425
  "background-image": DesignToken,
@@ -420,6 +429,7 @@ declare const tokens: {
420
429
  },
421
430
  "disabled": {
422
431
  "border-color": DesignToken,
432
+ "border-width": DesignToken,
423
433
  "checked": {
424
434
  "background-color": DesignToken,
425
435
  "hover": {
@@ -434,7 +444,8 @@ declare const tokens: {
434
444
  }
435
445
  },
436
446
  "hover": {
437
- "border-color": DesignToken
447
+ "border-color": DesignToken,
448
+ "border-width": DesignToken
438
449
  },
439
450
  "invalid": {
440
451
  "border-color": DesignToken,
@@ -466,7 +477,8 @@ declare const tokens: {
466
477
  "color": DesignToken
467
478
  },
468
479
  "hover": {
469
- "color": DesignToken
480
+ "color": DesignToken,
481
+ "text-decoration-thickness": DesignToken
470
482
  }
471
483
  },
472
484
  "column": {
@@ -478,6 +490,57 @@ declare const tokens: {
478
490
  "xl": DesignToken
479
491
  }
480
492
  },
493
+ "date-input": {
494
+ "background-color": DesignToken,
495
+ "box-shadow": DesignToken,
496
+ "color": DesignToken,
497
+ "font-family": DesignToken,
498
+ "font-size": DesignToken,
499
+ "font-weight": DesignToken,
500
+ "line-height": DesignToken,
501
+ "outline-offset": DesignToken,
502
+ "padding-block": DesignToken,
503
+ "padding-inline": DesignToken,
504
+ "calender-picker-indicator": {
505
+ "background-image": DesignToken
506
+ },
507
+ "disabled": {
508
+ "background-color": DesignToken,
509
+ "box-shadow": DesignToken,
510
+ "color": DesignToken,
511
+ "calender-picker-indicator": {
512
+ "background-image": DesignToken
513
+ }
514
+ },
515
+ "hover": {
516
+ "box-shadow": DesignToken,
517
+ "calender-picker-indicator": {
518
+ "background-image": DesignToken
519
+ }
520
+ },
521
+ "invalid": {
522
+ "box-shadow": DesignToken,
523
+ "hover": {
524
+ "box-shadow": DesignToken
525
+ }
526
+ }
527
+ },
528
+ "description-list": {
529
+ "color": DesignToken,
530
+ "font-family": DesignToken,
531
+ "font-size": DesignToken,
532
+ "font-weight": DesignToken,
533
+ "gap": DesignToken,
534
+ "inverse-color": DesignToken,
535
+ "line-height": DesignToken,
536
+ "row": {
537
+ "gap": DesignToken
538
+ },
539
+ "details": {
540
+ "font-weight": DesignToken,
541
+ "padding-inline-start": DesignToken
542
+ }
543
+ },
481
544
  "dialog": {
482
545
  "background-color": DesignToken,
483
546
  "border": DesignToken,
@@ -514,13 +577,6 @@ declare const tokens: {
514
577
  "color": DesignToken
515
578
  }
516
579
  },
517
- "form-label": {
518
- "color": DesignToken,
519
- "font-family": DesignToken,
520
- "font-size": DesignToken,
521
- "font-weight": DesignToken,
522
- "line-height": DesignToken
523
- },
524
580
  "gap": {
525
581
  "xs": DesignToken,
526
582
  "sm": DesignToken,
@@ -639,6 +695,13 @@ declare const tokens: {
639
695
  "line-height": DesignToken
640
696
  }
641
697
  },
698
+ "label": {
699
+ "color": DesignToken,
700
+ "font-family": DesignToken,
701
+ "font-size": DesignToken,
702
+ "font-weight": DesignToken,
703
+ "line-height": DesignToken
704
+ },
642
705
  "link-list": {
643
706
  "gap": DesignToken,
644
707
  "link": {
@@ -860,6 +923,7 @@ declare const tokens: {
860
923
  "outline-offset": DesignToken,
861
924
  "circle": {
862
925
  "border-color": DesignToken,
926
+ "border-width": DesignToken,
863
927
  "checked": {
864
928
  "background-image": DesignToken,
865
929
  "hover": {
@@ -868,6 +932,7 @@ declare const tokens: {
868
932
  },
869
933
  "disabled": {
870
934
  "border-color": DesignToken,
935
+ "border-width": DesignToken,
871
936
  "checked": {
872
937
  "background-image": DesignToken,
873
938
  "hover": {
@@ -895,7 +960,8 @@ declare const tokens: {
895
960
  "color": DesignToken
896
961
  },
897
962
  "hover": {
898
- "color": DesignToken
963
+ "color": DesignToken,
964
+ "text-decoration-thickness": DesignToken
899
965
  }
900
966
  },
901
967
  "row": {
@@ -908,6 +974,7 @@ declare const tokens: {
908
974
  }
909
975
  },
910
976
  "screen": {
977
+ "background-color": DesignToken,
911
978
  "wide": {
912
979
  "max-width": DesignToken
913
980
  },
@@ -927,6 +994,7 @@ declare const tokens: {
927
994
  "padding-inline": DesignToken
928
995
  },
929
996
  "input": {
997
+ "background-color": DesignToken,
930
998
  "box-shadow": DesignToken,
931
999
  "color": DesignToken,
932
1000
  "font-family": DesignToken,
@@ -950,12 +1018,45 @@ declare const tokens: {
950
1018
  }
951
1019
  }
952
1020
  },
953
- "skip-link": {
1021
+ "select": {
954
1022
  "background-color": DesignToken,
1023
+ "background-image": DesignToken,
1024
+ "background-position": DesignToken,
1025
+ "box-shadow": DesignToken,
955
1026
  "color": DesignToken,
956
1027
  "font-family": DesignToken,
1028
+ "font-size": DesignToken,
957
1029
  "font-weight": DesignToken,
1030
+ "line-height": DesignToken,
1031
+ "outline-offset": DesignToken,
1032
+ "padding-block": DesignToken,
1033
+ "padding-inline": DesignToken,
1034
+ "disabled": {
1035
+ "background-image": DesignToken,
1036
+ "box-shadow": DesignToken,
1037
+ "color": DesignToken
1038
+ },
1039
+ "hover": {
1040
+ "box-shadow": DesignToken
1041
+ },
1042
+ "invalid": {
1043
+ "box-shadow": DesignToken,
1044
+ "hover": {
1045
+ "box-shadow": DesignToken
1046
+ }
1047
+ },
1048
+ "option": {
1049
+ "disabled": {
1050
+ "color": DesignToken
1051
+ }
1052
+ }
1053
+ },
1054
+ "skip-link": {
1055
+ "background-color": DesignToken,
1056
+ "color": DesignToken,
1057
+ "font-family": DesignToken,
958
1058
  "font-size": DesignToken,
1059
+ "font-weight": DesignToken,
959
1060
  "line-height": DesignToken,
960
1061
  "outline-offset": DesignToken,
961
1062
  "padding-block": DesignToken,
@@ -1013,8 +1114,8 @@ declare const tokens: {
1013
1114
  "table": {
1014
1115
  "color": DesignToken,
1015
1116
  "font-family": DesignToken,
1016
- "font-weight": DesignToken,
1017
1117
  "font-size": DesignToken,
1118
+ "font-weight": DesignToken,
1018
1119
  "line-height": DesignToken,
1019
1120
  "caption": {
1020
1121
  "font-weight": DesignToken
@@ -1030,16 +1131,15 @@ declare const tokens: {
1030
1131
  },
1031
1132
  "tabs": {
1032
1133
  "list": {
1134
+ "background-color": DesignToken,
1033
1135
  "border-bottom": DesignToken
1034
1136
  },
1035
1137
  "button": {
1036
- "background-color": DesignToken,
1037
- "border": DesignToken,
1038
1138
  "color": DesignToken,
1039
1139
  "cursor": DesignToken,
1040
1140
  "font-family": DesignToken,
1041
- "font-weight": DesignToken,
1042
1141
  "font-size": DesignToken,
1142
+ "font-weight": DesignToken,
1043
1143
  "line-height": DesignToken,
1044
1144
  "outline-offset": DesignToken,
1045
1145
  "padding-block": DesignToken,
@@ -1059,6 +1159,7 @@ declare const tokens: {
1059
1159
  }
1060
1160
  },
1061
1161
  "text-area": {
1162
+ "background-color": DesignToken,
1062
1163
  "box-shadow": DesignToken,
1063
1164
  "color": DesignToken,
1064
1165
  "font-family": DesignToken,
@@ -1089,6 +1190,7 @@ declare const tokens: {
1089
1190
  }
1090
1191
  },
1091
1192
  "text-input": {
1193
+ "background-color": DesignToken,
1092
1194
  "box-shadow": DesignToken,
1093
1195
  "color": DesignToken,
1094
1196
  "font-family": DesignToken,
@@ -1116,6 +1218,41 @@ declare const tokens: {
1116
1218
  "color": DesignToken
1117
1219
  }
1118
1220
  },
1221
+ "time-input": {
1222
+ "background-color": DesignToken,
1223
+ "box-shadow": DesignToken,
1224
+ "color": DesignToken,
1225
+ "font-family": DesignToken,
1226
+ "font-size": DesignToken,
1227
+ "font-weight": DesignToken,
1228
+ "line-height": DesignToken,
1229
+ "outline-offset": DesignToken,
1230
+ "padding-block": DesignToken,
1231
+ "padding-inline": DesignToken,
1232
+ "calender-picker-indicator": {
1233
+ "background-image": DesignToken
1234
+ },
1235
+ "disabled": {
1236
+ "background-color": DesignToken,
1237
+ "box-shadow": DesignToken,
1238
+ "color": DesignToken,
1239
+ "calender-picker-indicator": {
1240
+ "background-image": DesignToken
1241
+ }
1242
+ },
1243
+ "hover": {
1244
+ "box-shadow": DesignToken,
1245
+ "calender-picker-indicator": {
1246
+ "background-image": DesignToken
1247
+ }
1248
+ },
1249
+ "invalid": {
1250
+ "box-shadow": DesignToken,
1251
+ "hover": {
1252
+ "box-shadow": DesignToken
1253
+ }
1254
+ }
1255
+ },
1119
1256
  "top-task-link": {
1120
1257
  "description": {
1121
1258
  "color": DesignToken,