@amsterdam/design-system-tokens 0.7.0 → 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 (37) hide show
  1. package/CHANGELOG.md +40 -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 +176 -69
  8. package/dist/index.d.ts +209 -24
  9. package/dist/index.json +243 -58
  10. package/dist/index.mjs +160 -53
  11. package/dist/index.scss +176 -69
  12. package/dist/index.theme.css +176 -69
  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/avatar.tokens.json +49 -0
  19. package/src/components/ams/button.tokens.json +11 -8
  20. package/src/components/ams/checkbox.tokens.json +6 -2
  21. package/src/components/ams/date-input.tokens.json +45 -0
  22. package/src/components/ams/description-list.tokens.json +20 -0
  23. package/src/components/ams/dialog.tokens.json +0 -7
  24. package/src/components/ams/form-field-character-counter.tokens.json +14 -0
  25. package/src/components/ams/{form-label.tokens.json → label.tokens.json} +1 -1
  26. package/src/components/ams/page-menu.tokens.json +2 -2
  27. package/src/components/ams/radio.tokens.json +4 -1
  28. package/src/components/ams/screen.tokens.json +1 -0
  29. package/src/components/ams/search-field.tokens.json +7 -6
  30. package/src/components/ams/select.tokens.json +41 -0
  31. package/src/components/ams/skip-link.tokens.json +1 -1
  32. package/src/components/ams/table.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -4
  34. package/src/components/ams/text-area.tokens.json +9 -8
  35. package/src/components/ams/text-input.tokens.json +8 -7
  36. package/src/components/ams/time-input.tokens.json +45 -0
  37. 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 Tue, 12 Mar 2024 14:50:53 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": {
@@ -222,6 +227,51 @@ declare const tokens: {
222
227
  "x-wide": DesignToken,
223
228
  "2x-wide": DesignToken
224
229
  },
230
+ "avatar": {
231
+ "aspect-ratio": DesignToken,
232
+ "font-family": DesignToken,
233
+ "font-size": DesignToken,
234
+ "font-weight": DesignToken,
235
+ "line-height": DesignToken,
236
+ "padding-block": DesignToken,
237
+ "padding-inline": DesignToken,
238
+ "blue": {
239
+ "background-color": DesignToken,
240
+ "color": DesignToken
241
+ },
242
+ "dark-blue": {
243
+ "background-color": DesignToken,
244
+ "color": DesignToken
245
+ },
246
+ "dark-green": {
247
+ "background-color": DesignToken,
248
+ "color": DesignToken
249
+ },
250
+ "green": {
251
+ "background-color": DesignToken,
252
+ "color": DesignToken
253
+ },
254
+ "magenta": {
255
+ "background-color": DesignToken,
256
+ "color": DesignToken
257
+ },
258
+ "orange": {
259
+ "background-color": DesignToken,
260
+ "color": DesignToken
261
+ },
262
+ "purple": {
263
+ "background-color": DesignToken,
264
+ "color": DesignToken
265
+ },
266
+ "red": {
267
+ "background-color": DesignToken,
268
+ "color": DesignToken
269
+ },
270
+ "yellow": {
271
+ "background-color": DesignToken,
272
+ "color": DesignToken
273
+ }
274
+ },
225
275
  "badge": {
226
276
  "font-family": DesignToken,
227
277
  "font-size": DesignToken,
@@ -301,6 +351,9 @@ declare const tokens: {
301
351
  "disabled": {
302
352
  "cursor": DesignToken
303
353
  },
354
+ "forced-color-mode": {
355
+ "border": DesignToken
356
+ },
304
357
  "primary": {
305
358
  "background-color": DesignToken,
306
359
  "box-shadow": DesignToken,
@@ -366,6 +419,7 @@ declare const tokens: {
366
419
  "outline-offset": DesignToken,
367
420
  "checkmark": {
368
421
  "border-color": DesignToken,
422
+ "border-width": DesignToken,
369
423
  "checked": {
370
424
  "background-color": DesignToken,
371
425
  "background-image": DesignToken,
@@ -375,6 +429,7 @@ declare const tokens: {
375
429
  },
376
430
  "disabled": {
377
431
  "border-color": DesignToken,
432
+ "border-width": DesignToken,
378
433
  "checked": {
379
434
  "background-color": DesignToken,
380
435
  "hover": {
@@ -389,7 +444,8 @@ declare const tokens: {
389
444
  }
390
445
  },
391
446
  "hover": {
392
- "border-color": DesignToken
447
+ "border-color": DesignToken,
448
+ "border-width": DesignToken
393
449
  },
394
450
  "invalid": {
395
451
  "border-color": DesignToken,
@@ -421,7 +477,8 @@ declare const tokens: {
421
477
  "color": DesignToken
422
478
  },
423
479
  "hover": {
424
- "color": DesignToken
480
+ "color": DesignToken,
481
+ "text-decoration-thickness": DesignToken
425
482
  }
426
483
  },
427
484
  "column": {
@@ -433,17 +490,61 @@ declare const tokens: {
433
490
  "xl": DesignToken
434
491
  }
435
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
+ },
436
544
  "dialog": {
437
545
  "background-color": DesignToken,
438
546
  "border": DesignToken,
439
547
  "max-inline-size": DesignToken,
440
- "title": {
441
- "color": DesignToken,
442
- "font-family": DesignToken,
443
- "font-size": DesignToken,
444
- "font-weight": DesignToken,
445
- "line-height": DesignToken
446
- },
447
548
  "form": {
448
549
  "gap": DesignToken,
449
550
  "padding-block": DesignToken,
@@ -466,12 +567,15 @@ declare const tokens: {
466
567
  "line-height": DesignToken
467
568
  }
468
569
  },
469
- "form-label": {
570
+ "form-field-character-counter": {
470
571
  "color": DesignToken,
471
572
  "font-family": DesignToken,
472
573
  "font-size": DesignToken,
473
574
  "font-weight": DesignToken,
474
- "line-height": DesignToken
575
+ "line-height": DesignToken,
576
+ "error": {
577
+ "color": DesignToken
578
+ }
475
579
  },
476
580
  "gap": {
477
581
  "xs": DesignToken,
@@ -591,6 +695,13 @@ declare const tokens: {
591
695
  "line-height": DesignToken
592
696
  }
593
697
  },
698
+ "label": {
699
+ "color": DesignToken,
700
+ "font-family": DesignToken,
701
+ "font-size": DesignToken,
702
+ "font-weight": DesignToken,
703
+ "line-height": DesignToken
704
+ },
594
705
  "link-list": {
595
706
  "gap": DesignToken,
596
707
  "link": {
@@ -812,6 +923,7 @@ declare const tokens: {
812
923
  "outline-offset": DesignToken,
813
924
  "circle": {
814
925
  "border-color": DesignToken,
926
+ "border-width": DesignToken,
815
927
  "checked": {
816
928
  "background-image": DesignToken,
817
929
  "hover": {
@@ -820,6 +932,7 @@ declare const tokens: {
820
932
  },
821
933
  "disabled": {
822
934
  "border-color": DesignToken,
935
+ "border-width": DesignToken,
823
936
  "checked": {
824
937
  "background-image": DesignToken,
825
938
  "hover": {
@@ -847,7 +960,8 @@ declare const tokens: {
847
960
  "color": DesignToken
848
961
  },
849
962
  "hover": {
850
- "color": DesignToken
963
+ "color": DesignToken,
964
+ "text-decoration-thickness": DesignToken
851
965
  }
852
966
  },
853
967
  "row": {
@@ -860,6 +974,7 @@ declare const tokens: {
860
974
  }
861
975
  },
862
976
  "screen": {
977
+ "background-color": DesignToken,
863
978
  "wide": {
864
979
  "max-width": DesignToken
865
980
  },
@@ -879,6 +994,7 @@ declare const tokens: {
879
994
  "padding-inline": DesignToken
880
995
  },
881
996
  "input": {
997
+ "background-color": DesignToken,
882
998
  "box-shadow": DesignToken,
883
999
  "color": DesignToken,
884
1000
  "font-family": DesignToken,
@@ -902,12 +1018,45 @@ declare const tokens: {
902
1018
  }
903
1019
  }
904
1020
  },
905
- "skip-link": {
1021
+ "select": {
906
1022
  "background-color": DesignToken,
1023
+ "background-image": DesignToken,
1024
+ "background-position": DesignToken,
1025
+ "box-shadow": DesignToken,
907
1026
  "color": DesignToken,
908
1027
  "font-family": DesignToken,
1028
+ "font-size": DesignToken,
909
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,
910
1058
  "font-size": DesignToken,
1059
+ "font-weight": DesignToken,
911
1060
  "line-height": DesignToken,
912
1061
  "outline-offset": DesignToken,
913
1062
  "padding-block": DesignToken,
@@ -965,8 +1114,8 @@ declare const tokens: {
965
1114
  "table": {
966
1115
  "color": DesignToken,
967
1116
  "font-family": DesignToken,
968
- "font-weight": DesignToken,
969
1117
  "font-size": DesignToken,
1118
+ "font-weight": DesignToken,
970
1119
  "line-height": DesignToken,
971
1120
  "caption": {
972
1121
  "font-weight": DesignToken
@@ -982,16 +1131,15 @@ declare const tokens: {
982
1131
  },
983
1132
  "tabs": {
984
1133
  "list": {
1134
+ "background-color": DesignToken,
985
1135
  "border-bottom": DesignToken
986
1136
  },
987
1137
  "button": {
988
- "background-color": DesignToken,
989
- "border": DesignToken,
990
1138
  "color": DesignToken,
991
1139
  "cursor": DesignToken,
992
1140
  "font-family": DesignToken,
993
- "font-weight": DesignToken,
994
1141
  "font-size": DesignToken,
1142
+ "font-weight": DesignToken,
995
1143
  "line-height": DesignToken,
996
1144
  "outline-offset": DesignToken,
997
1145
  "padding-block": DesignToken,
@@ -1011,6 +1159,7 @@ declare const tokens: {
1011
1159
  }
1012
1160
  },
1013
1161
  "text-area": {
1162
+ "background-color": DesignToken,
1014
1163
  "box-shadow": DesignToken,
1015
1164
  "color": DesignToken,
1016
1165
  "font-family": DesignToken,
@@ -1041,6 +1190,7 @@ declare const tokens: {
1041
1190
  }
1042
1191
  },
1043
1192
  "text-input": {
1193
+ "background-color": DesignToken,
1044
1194
  "box-shadow": DesignToken,
1045
1195
  "color": DesignToken,
1046
1196
  "font-family": DesignToken,
@@ -1068,6 +1218,41 @@ declare const tokens: {
1068
1218
  "color": DesignToken
1069
1219
  }
1070
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
+ },
1071
1256
  "top-task-link": {
1072
1257
  "description": {
1073
1258
  "color": DesignToken,