@amsterdam/design-system-tokens 0.2.0 → 0.4.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 (48) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/_variables.scss +225 -106
  3. package/dist/index.css +225 -106
  4. package/dist/index.d.ts +146 -27
  5. package/dist/index.js +218 -99
  6. package/dist/index.json +217 -98
  7. package/dist/index.tokens.json +361 -116
  8. package/dist/root.css +225 -106
  9. package/dist/tokens.d.ts +297 -52
  10. package/dist/tokens.js +7327 -4668
  11. package/dist/variables.less +225 -106
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/color.tokens.json +5 -6
  14. package/src/brand/amsterdam/typography.tokens.json +10 -18
  15. package/src/common/amsterdam/border.tokens.json +3 -9
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +1 -3
  18. package/src/components/amsterdam/alert.tokens.json +12 -9
  19. package/src/components/amsterdam/badge.tokens.json +49 -0
  20. package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
  21. package/src/components/amsterdam/button.tokens.json +9 -19
  22. package/src/components/amsterdam/checkbox.tokens.json +24 -64
  23. package/src/components/amsterdam/dialog.tokens.json +0 -7
  24. package/src/components/amsterdam/form-label.tokens.json +4 -4
  25. package/src/components/amsterdam/grid.tokens.json +3 -9
  26. package/src/components/amsterdam/header.tokens.json +7 -0
  27. package/src/components/amsterdam/heading.tokens.json +24 -24
  28. package/src/components/amsterdam/icon-button.tokens.json +37 -0
  29. package/src/components/amsterdam/icon.tokens.json +0 -8
  30. package/src/components/amsterdam/link-list.tokens.json +61 -0
  31. package/src/components/amsterdam/link.tokens.json +13 -23
  32. package/src/components/amsterdam/mark.tokens.json +7 -0
  33. package/src/components/amsterdam/mega-menu.tokens.json +12 -0
  34. package/src/components/amsterdam/ordered-list.tokens.json +4 -4
  35. package/src/components/amsterdam/page-heading.tokens.json +4 -12
  36. package/src/components/amsterdam/page-menu.tokens.json +4 -4
  37. package/src/components/amsterdam/pagination.tokens.json +4 -4
  38. package/src/components/amsterdam/paragraph.tokens.json +10 -10
  39. package/src/components/amsterdam/search-field.tokens.json +47 -0
  40. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  41. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  42. package/src/components/amsterdam/switch.tokens.json +10 -30
  43. package/src/components/amsterdam/table.tokens.json +20 -0
  44. package/src/components/amsterdam/text-input.tokens.json +36 -0
  45. package/src/components/amsterdam/top-task-link.tokens.json +4 -4
  46. package/src/components/amsterdam/unordered-list.tokens.json +4 -4
  47. package/src/components/utrecht/button.tokens.json +24 -72
  48. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/dist/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 01 Dec 2023 15:48:43 GMT
3
+ * Generated on Wed, 31 Jan 2024 12:56:24 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -38,8 +38,7 @@ declare const tokens: {
38
38
  "magenta": DesignToken,
39
39
  "neutral-grey1": DesignToken,
40
40
  "neutral-grey2": DesignToken,
41
- "neutral-grey3": DesignToken,
42
- "neutral-grey4": DesignToken
41
+ "neutral-grey3": DesignToken
43
42
  },
44
43
  "proportion": {
45
44
  "x-tall": DesignToken,
@@ -84,10 +83,6 @@ declare const tokens: {
84
83
  "6": {
85
84
  "font-size": DesignToken,
86
85
  "line-height": DesignToken
87
- },
88
- "7": {
89
- "font-size": DesignToken,
90
- "line-height": DesignToken
91
86
  }
92
87
  }
93
88
  },
@@ -120,10 +115,6 @@ declare const tokens: {
120
115
  "6": {
121
116
  "font-size": DesignToken,
122
117
  "line-height": DesignToken
123
- },
124
- "7": {
125
- "font-size": DesignToken,
126
- "line-height": DesignToken
127
118
  }
128
119
  }
129
120
  }
@@ -193,8 +184,8 @@ declare const tokens: {
193
184
  }
194
185
  },
195
186
  "alert": {
196
- "background-color": DesignToken,
197
- "border": DesignToken,
187
+ "border-width": DesignToken,
188
+ "border-style": DesignToken,
198
189
  "gap": DesignToken,
199
190
  "padding-block-start": DesignToken,
200
191
  "padding-block-end": DesignToken,
@@ -214,15 +205,18 @@ declare const tokens: {
214
205
  }
215
206
  },
216
207
  "error": {
217
- "background-color": DesignToken,
208
+ "border-color": DesignToken
209
+ },
210
+ "info": {
218
211
  "border-color": DesignToken
219
212
  },
220
213
  "success": {
221
- "background-color": DesignToken,
214
+ "border-color": DesignToken
215
+ },
216
+ "warning": {
222
217
  "border-color": DesignToken
223
218
  },
224
219
  "close": {
225
- "background-color": DesignToken,
226
220
  "fill": DesignToken,
227
221
  "hover": {
228
222
  "fill": DesignToken
@@ -237,6 +231,51 @@ declare const tokens: {
237
231
  "x-wide": DesignToken,
238
232
  "2x-wide": DesignToken
239
233
  },
234
+ "badge": {
235
+ "font-family": DesignToken,
236
+ "font-weight": DesignToken,
237
+ "padding-inline": DesignToken,
238
+ "spacious": {
239
+ "font-size": DesignToken,
240
+ "line-height": DesignToken
241
+ },
242
+ "compact": {
243
+ "font-size": DesignToken,
244
+ "line-height": DesignToken
245
+ },
246
+ "blue": {
247
+ "background-color": DesignToken,
248
+ "color": DesignToken
249
+ },
250
+ "dark-blue": {
251
+ "background-color": DesignToken,
252
+ "color": DesignToken
253
+ },
254
+ "dark-green": {
255
+ "background-color": DesignToken,
256
+ "color": DesignToken
257
+ },
258
+ "green": {
259
+ "background-color": DesignToken,
260
+ "color": DesignToken
261
+ },
262
+ "magenta": {
263
+ "background-color": DesignToken,
264
+ "color": DesignToken
265
+ },
266
+ "orange": {
267
+ "background-color": DesignToken,
268
+ "color": DesignToken
269
+ },
270
+ "purple": {
271
+ "background-color": DesignToken,
272
+ "color": DesignToken
273
+ },
274
+ "yellow": {
275
+ "background-color": DesignToken,
276
+ "color": DesignToken
277
+ }
278
+ },
240
279
  "blockquote": {
241
280
  "color": DesignToken,
242
281
  "font-family": DesignToken,
@@ -255,7 +294,7 @@ declare const tokens: {
255
294
  "font-family": DesignToken,
256
295
  "font-weight": DesignToken,
257
296
  "separator": {
258
- "background-color": DesignToken
297
+ "background-image": DesignToken
259
298
  },
260
299
  "item-link": {
261
300
  "color": DesignToken,
@@ -408,13 +447,6 @@ declare const tokens: {
408
447
  "backdrop": {
409
448
  "background": DesignToken
410
449
  },
411
- "close": {
412
- "background-color": DesignToken,
413
- "fill": DesignToken,
414
- "hover": {
415
- "fill": DesignToken
416
- }
417
- },
418
450
  "form": {
419
451
  "gap": DesignToken,
420
452
  "padding-block": DesignToken,
@@ -462,6 +494,9 @@ declare const tokens: {
462
494
  "column-count": DesignToken
463
495
  }
464
496
  },
497
+ "header": {
498
+ "column-gap": DesignToken
499
+ },
465
500
  "heading": {
466
501
  "color": DesignToken,
467
502
  "font-family": DesignToken,
@@ -483,6 +518,14 @@ declare const tokens: {
483
518
  "level-4": {
484
519
  "line-height": DesignToken,
485
520
  "font-size": DesignToken
521
+ },
522
+ "level-5": {
523
+ "line-height": DesignToken,
524
+ "font-size": DesignToken
525
+ },
526
+ "level-6": {
527
+ "line-height": DesignToken,
528
+ "font-size": DesignToken
486
529
  }
487
530
  },
488
531
  "compact": {
@@ -501,33 +544,48 @@ declare const tokens: {
501
544
  "level-4": {
502
545
  "line-height": DesignToken,
503
546
  "font-size": DesignToken
547
+ },
548
+ "level-5": {
549
+ "line-height": DesignToken,
550
+ "font-size": DesignToken
551
+ },
552
+ "level-6": {
553
+ "line-height": DesignToken,
554
+ "font-size": DesignToken
504
555
  }
505
556
  }
506
557
  },
507
- "highlight": {
508
- "blue": {
509
- "background-color": DesignToken
510
- },
511
- "dark-green": {
512
- "background-color": DesignToken
513
- },
514
- "green": {
515
- "background-color": DesignToken
516
- },
517
- "light-blue": {
518
- "background-color": DesignToken
519
- },
520
- "magenta": {
521
- "background-color": DesignToken
558
+ "icon-button": {
559
+ "color": DesignToken,
560
+ "outline-offset": DesignToken,
561
+ "hover": {
562
+ "background-color": DesignToken,
563
+ "color": DesignToken
522
564
  },
523
- "orange": {
524
- "background-color": DesignToken
565
+ "disabled": {
566
+ "color": DesignToken
525
567
  },
526
- "purple": {
527
- "background-color": DesignToken
568
+ "on-background-light": {
569
+ "color": DesignToken,
570
+ "hover": {
571
+ "background-color": DesignToken,
572
+ "color": DesignToken
573
+ },
574
+ "disabled": {
575
+ "color": DesignToken
576
+ }
528
577
  },
529
- "yellow": {
530
- "background-color": DesignToken
578
+ "on-background-dark": {
579
+ "background-color": DesignToken,
580
+ "color": DesignToken,
581
+ "hover": {
582
+ "background-color": DesignToken,
583
+ "color": DesignToken
584
+ },
585
+ "disabled": {
586
+ "color": DesignToken,
587
+ "background-color": DesignToken
588
+ }
531
589
  }
532
590
  },
533
591
  "icon": {
@@ -547,10 +605,6 @@ declare const tokens: {
547
605
  "size-6": {
548
606
  "font-size": DesignToken,
549
607
  "line-height": DesignToken
550
- },
551
- "size-7": {
552
- "font-size": DesignToken,
553
- "line-height": DesignToken
554
608
  }
555
609
  },
556
610
  "compact": {
@@ -569,10 +623,63 @@ declare const tokens: {
569
623
  "size-6": {
570
624
  "font-size": DesignToken,
571
625
  "line-height": DesignToken
626
+ }
627
+ }
628
+ },
629
+ "link-list": {
630
+ "gap": DesignToken,
631
+ "link": {
632
+ "color": DesignToken,
633
+ "font-family": DesignToken,
634
+ "font-weight": DesignToken,
635
+ "gap": DesignToken,
636
+ "outline-offset": DesignToken,
637
+ "text-decoration-line": DesignToken,
638
+ "text-decoration-thickness": DesignToken,
639
+ "text-underline-offset": DesignToken,
640
+ "spacious": {
641
+ "small": {
642
+ "font-size": DesignToken,
643
+ "line-height": DesignToken
644
+ },
645
+ "medium": {
646
+ "font-size": DesignToken,
647
+ "line-height": DesignToken
648
+ },
649
+ "large": {
650
+ "font-size": DesignToken,
651
+ "line-height": DesignToken
652
+ }
572
653
  },
573
- "size-7": {
574
- "font-size": DesignToken,
575
- "line-height": DesignToken
654
+ "compact": {
655
+ "small": {
656
+ "font-size": DesignToken,
657
+ "line-height": DesignToken
658
+ },
659
+ "medium": {
660
+ "font-size": DesignToken,
661
+ "line-height": DesignToken
662
+ },
663
+ "large": {
664
+ "font-size": DesignToken,
665
+ "line-height": DesignToken
666
+ }
667
+ },
668
+ "hover": {
669
+ "color": DesignToken,
670
+ "text-decoration-line": DesignToken
671
+ },
672
+ "on-background-dark": {
673
+ "color": DesignToken,
674
+ "hover": {
675
+ "color": DesignToken
676
+ }
677
+ },
678
+ "on-background-light": {
679
+ "color": DesignToken,
680
+ "hover": {
681
+ "color": DesignToken
682
+ }
576
683
  }
577
684
  }
578
685
  },
@@ -664,6 +771,17 @@ declare const tokens: {
664
771
  "color": DesignToken
665
772
  }
666
773
  },
774
+ "mark": {
775
+ "background-color": DesignToken
776
+ },
777
+ "mega-menu": {
778
+ "list-category": {
779
+ "column-gap": DesignToken,
780
+ "column-width": DesignToken,
781
+ "padding-block-start": DesignToken,
782
+ "padding-block-end": DesignToken
783
+ }
784
+ },
667
785
  "ordered-list": {
668
786
  "color": DesignToken,
669
787
  "font-family": DesignToken,
@@ -798,6 +916,85 @@ declare const tokens: {
798
916
  "max-width": DesignToken
799
917
  }
800
918
  },
919
+ "search-field": {
920
+ "button": {
921
+ "background-color": DesignToken,
922
+ "color": DesignToken,
923
+ "outline-offset": DesignToken,
924
+ "hover": {
925
+ "background-color": DesignToken
926
+ }
927
+ },
928
+ "input": {
929
+ "box-shadow": DesignToken,
930
+ "color": DesignToken,
931
+ "font-family": DesignToken,
932
+ "font-weight": DesignToken,
933
+ "outline-offset": DesignToken,
934
+ "cancel-button": {
935
+ "background-image": DesignToken,
936
+ "color": DesignToken,
937
+ "height": DesignToken,
938
+ "width": DesignToken
939
+ },
940
+ "hover": {
941
+ "box-shadow": DesignToken
942
+ },
943
+ "placeholder": {
944
+ "color": DesignToken
945
+ },
946
+ "compact": {
947
+ "font-size": DesignToken,
948
+ "line-height": DesignToken
949
+ },
950
+ "spacious": {
951
+ "font-size": DesignToken,
952
+ "line-height": DesignToken
953
+ }
954
+ }
955
+ },
956
+ "skip-link": {
957
+ "background-color": DesignToken,
958
+ "color": DesignToken,
959
+ "font-family": DesignToken,
960
+ "font-weight": DesignToken,
961
+ "font-size": DesignToken,
962
+ "line-height": DesignToken,
963
+ "outline-offset": DesignToken,
964
+ "compact": {
965
+ "font-size": DesignToken,
966
+ "line-height": DesignToken
967
+ },
968
+ "hover": {
969
+ "background-color": DesignToken
970
+ }
971
+ },
972
+ "spotlight": {
973
+ "blue": {
974
+ "background-color": DesignToken
975
+ },
976
+ "dark-blue": {
977
+ "background-color": DesignToken
978
+ },
979
+ "dark-green": {
980
+ "background-color": DesignToken
981
+ },
982
+ "green": {
983
+ "background-color": DesignToken
984
+ },
985
+ "magenta": {
986
+ "background-color": DesignToken
987
+ },
988
+ "orange": {
989
+ "background-color": DesignToken
990
+ },
991
+ "purple": {
992
+ "background-color": DesignToken
993
+ },
994
+ "yellow": {
995
+ "background-color": DesignToken
996
+ }
997
+ },
801
998
  "switch": {
802
999
  "font-family": DesignToken,
803
1000
  "background-color": DesignToken,
@@ -818,6 +1015,54 @@ declare const tokens: {
818
1015
  "background-color": DesignToken
819
1016
  }
820
1017
  },
1018
+ "table": {
1019
+ "color": DesignToken,
1020
+ "font-family": DesignToken,
1021
+ "font-weight": DesignToken,
1022
+ "font-size": DesignToken,
1023
+ "line-height": DesignToken,
1024
+ "caption": {
1025
+ "font-weight": DesignToken
1026
+ },
1027
+ "cell": {
1028
+ "border-bottom": DesignToken
1029
+ },
1030
+ "header-cell": {
1031
+ "font-weight": DesignToken
1032
+ }
1033
+ },
1034
+ "text-input": {
1035
+ "box-shadow": DesignToken,
1036
+ "color": DesignToken,
1037
+ "font-family": DesignToken,
1038
+ "font-weight": DesignToken,
1039
+ "outline-offset": DesignToken,
1040
+ "disabled": {
1041
+ "background-color": DesignToken,
1042
+ "box-shadow": DesignToken,
1043
+ "color": DesignToken
1044
+ },
1045
+ "hover": {
1046
+ "box-shadow": DesignToken
1047
+ },
1048
+ "invalid": {
1049
+ "box-shadow": DesignToken,
1050
+ "hover": {
1051
+ "box-shadow": DesignToken
1052
+ }
1053
+ },
1054
+ "placeholder": {
1055
+ "color": DesignToken
1056
+ },
1057
+ "compact": {
1058
+ "font-size": DesignToken,
1059
+ "line-height": DesignToken
1060
+ },
1061
+ "spacious": {
1062
+ "font-size": DesignToken,
1063
+ "line-height": DesignToken
1064
+ }
1065
+ },
821
1066
  "top-task-link": {
822
1067
  "description": {
823
1068
  "color": DesignToken,