@amsterdam/design-system-tokens 0.2.0 → 0.3.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 (40) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/_variables.scss +136 -89
  3. package/dist/index.css +136 -89
  4. package/dist/index.d.ts +65 -18
  5. package/dist/index.js +116 -69
  6. package/dist/index.json +115 -68
  7. package/dist/index.tokens.json +177 -86
  8. package/dist/root.css +136 -89
  9. package/dist/tokens.d.ts +135 -44
  10. package/dist/tokens.js +2147 -1124
  11. package/dist/variables.less +136 -89
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/typography.tokens.json +10 -18
  14. package/src/common/amsterdam/border.tokens.json +3 -9
  15. package/src/common/amsterdam/spacing.tokens.json +4 -12
  16. package/src/components/amsterdam/accordion.tokens.json +1 -3
  17. package/src/components/amsterdam/breadcrumb.tokens.json +7 -5
  18. package/src/components/amsterdam/button.tokens.json +9 -19
  19. package/src/components/amsterdam/checkbox.tokens.json +24 -64
  20. package/src/components/amsterdam/form-label.tokens.json +4 -4
  21. package/src/components/amsterdam/grid.tokens.json +3 -9
  22. package/src/components/amsterdam/header.tokens.json +7 -0
  23. package/src/components/amsterdam/heading.tokens.json +24 -24
  24. package/src/components/amsterdam/icon.tokens.json +0 -8
  25. package/src/components/amsterdam/link.tokens.json +13 -23
  26. package/src/components/amsterdam/mark.tokens.json +7 -0
  27. package/src/components/amsterdam/ordered-list.tokens.json +4 -4
  28. package/src/components/amsterdam/page-heading.tokens.json +4 -12
  29. package/src/components/amsterdam/page-menu.tokens.json +4 -4
  30. package/src/components/amsterdam/pagination.tokens.json +4 -4
  31. package/src/components/amsterdam/paragraph.tokens.json +10 -10
  32. package/src/components/amsterdam/search-field.tokens.json +47 -0
  33. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  34. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  35. package/src/components/amsterdam/switch.tokens.json +10 -30
  36. package/src/components/amsterdam/text-input.tokens.json +36 -0
  37. package/src/components/amsterdam/top-task-link.tokens.json +4 -4
  38. package/src/components/amsterdam/unordered-list.tokens.json +4 -4
  39. package/src/components/utrecht/button.tokens.json +24 -72
  40. package/src/components/amsterdam/highlight.tokens.json +0 -46
@@ -36,7 +36,7 @@
36
36
  "text-level": {
37
37
  "0": {
38
38
  "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
39
- "line-height": "1.1"
39
+ "line-height": "1.15"
40
40
  },
41
41
  "1": {
42
42
  "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
@@ -44,25 +44,21 @@
44
44
  },
45
45
  "2": {
46
46
  "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
47
- "line-height": "1.3"
47
+ "line-height": "1.25"
48
48
  },
49
49
  "3": {
50
50
  "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
51
- "line-height": "1.4"
51
+ "line-height": "1.3"
52
52
  },
53
53
  "4": {
54
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
55
- "line-height": "1.4"
56
- },
57
- "5": {
58
54
  "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
59
55
  "line-height": "1.5"
60
56
  },
61
- "6": {
57
+ "5": {
62
58
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
63
59
  "line-height": "1.6"
64
60
  },
65
- "7": {
61
+ "6": {
66
62
  "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
67
63
  "line-height": "1.6"
68
64
  }
@@ -72,7 +68,7 @@
72
68
  "text-level": {
73
69
  "0": {
74
70
  "font-size": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)",
75
- "line-height": "1.1"
71
+ "line-height": "1.15"
76
72
  },
77
73
  "1": {
78
74
  "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)",
@@ -80,25 +76,21 @@
80
76
  },
81
77
  "2": {
82
78
  "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)",
83
- "line-height": "1.3"
79
+ "line-height": "1.25"
84
80
  },
85
81
  "3": {
86
82
  "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
87
- "line-height": "1.4"
83
+ "line-height": "1.3"
88
84
  },
89
85
  "4": {
90
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
91
- "line-height": "1.4"
92
- },
93
- "5": {
94
86
  "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
95
87
  "line-height": "1.5"
96
88
  },
97
- "6": {
89
+ "5": {
98
90
  "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
99
91
  "line-height": "1.6"
100
92
  },
101
- "7": {
93
+ "6": {
102
94
  "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
103
95
  "line-height": "1.6"
104
96
  }
@@ -160,12 +152,12 @@
160
152
  "box-shadow": "inset 0 0 0 2px #767676"
161
153
  },
162
154
  "spacious": {
163
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
164
- "line-height": "1.5"
155
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
156
+ "line-height": "1.6"
165
157
  },
166
158
  "compact": {
167
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
168
- "line-height": "1.5"
159
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
160
+ "line-height": "1.6"
169
161
  }
170
162
  }
171
163
  },
@@ -182,12 +174,12 @@
182
174
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
183
175
  "font-weight": 800,
184
176
  "spacious": {
185
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
186
- "line-height": "1.5"
177
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
178
+ "line-height": "1.6"
187
179
  },
188
180
  "compact": {
189
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
190
- "line-height": "1.5"
181
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
182
+ "line-height": "1.6"
191
183
  }
192
184
  },
193
185
  "error": {
@@ -221,18 +213,18 @@
221
213
  "inverse-color": "#ffffff",
222
214
  "spacious": {
223
215
  "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
224
- "line-height": "1.4"
216
+ "line-height": "1.3"
225
217
  },
226
218
  "compact": {
227
219
  "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
228
- "line-height": "1.4"
220
+ "line-height": "1.3"
229
221
  }
230
222
  },
231
223
  "breadcrumb": {
232
224
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
233
225
  "font-weight": 400,
234
226
  "separator": {
235
- "background-color": "#004699"
227
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
236
228
  },
237
229
  "item-link": {
238
230
  "color": "#004699",
@@ -277,7 +269,7 @@
277
269
  },
278
270
  "tertiary": {
279
271
  "hover": {
280
- "box-shadow": "inset 0 0 0 2px #767676"
272
+ "box-shadow": "inset 0 0 0 2px #102E62"
281
273
  }
282
274
  }
283
275
  },
@@ -374,12 +366,12 @@
374
366
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
375
367
  "font-weight": 800,
376
368
  "spacious": {
377
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
378
- "line-height": "1.5"
369
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
370
+ "line-height": "1.6"
379
371
  },
380
372
  "compact": {
381
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
382
- "line-height": "1.5"
373
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
374
+ "line-height": "1.6"
383
375
  }
384
376
  },
385
377
  "backdrop": {
@@ -414,12 +406,12 @@
414
406
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
415
407
  "font-weight": 800,
416
408
  "spacious": {
417
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
418
- "line-height": "1.6"
409
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
410
+ "line-height": "1.5"
419
411
  },
420
412
  "compact": {
421
- "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
422
- "line-height": "1.6"
413
+ "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
414
+ "line-height": "1.5"
423
415
  }
424
416
  },
425
417
  "grid": {
@@ -439,6 +431,9 @@
439
431
  "column-count": "12"
440
432
  }
441
433
  },
434
+ "header": {
435
+ "column-gap": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"
436
+ },
442
437
  "heading": {
443
438
  "color": "#000000",
444
439
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -450,16 +445,24 @@
450
445
  "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)"
451
446
  },
452
447
  "level-2": {
453
- "line-height": "1.3",
448
+ "line-height": "1.25",
454
449
  "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)"
455
450
  },
456
451
  "level-3": {
457
- "line-height": "1.4",
452
+ "line-height": "1.3",
458
453
  "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)"
459
454
  },
460
455
  "level-4": {
461
- "line-height": "1.4",
456
+ "line-height": "1.5",
462
457
  "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)"
458
+ },
459
+ "level-5": {
460
+ "line-height": "1.6",
461
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)"
462
+ },
463
+ "level-6": {
464
+ "line-height": "1.6",
465
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
463
466
  }
464
467
  },
465
468
  "compact": {
@@ -468,64 +471,42 @@
468
471
  "font-size": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)"
469
472
  },
470
473
  "level-2": {
471
- "line-height": "1.3",
474
+ "line-height": "1.25",
472
475
  "font-size": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)"
473
476
  },
474
477
  "level-3": {
475
- "line-height": "1.4",
478
+ "line-height": "1.3",
476
479
  "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)"
477
480
  },
478
481
  "level-4": {
479
- "line-height": "1.4",
482
+ "line-height": "1.5",
480
483
  "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)"
484
+ },
485
+ "level-5": {
486
+ "line-height": "1.6",
487
+ "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)"
488
+ },
489
+ "level-6": {
490
+ "line-height": "1.6",
491
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)"
481
492
  }
482
493
  }
483
494
  },
484
- "highlight": {
485
- "blue": {
486
- "background-color": "#004699"
487
- },
488
- "dark-green": {
489
- "background-color": "#00A03C"
490
- },
491
- "green": {
492
- "background-color": "#BED200"
493
- },
494
- "light-blue": {
495
- "background-color": "#009DEC"
496
- },
497
- "magenta": {
498
- "background-color": "#E50082"
499
- },
500
- "orange": {
501
- "background-color": "#FF9100"
502
- },
503
- "purple": {
504
- "background-color": "#A00078"
505
- },
506
- "yellow": {
507
- "background-color": "#FFE600"
508
- }
509
- },
510
495
  "icon": {
511
496
  "spacious": {
512
497
  "size-3": {
513
498
  "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
514
- "line-height": "1.4"
499
+ "line-height": "1.3"
515
500
  },
516
501
  "size-4": {
517
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
518
- "line-height": "1.4"
519
- },
520
- "size-5": {
521
502
  "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
522
503
  "line-height": "1.5"
523
504
  },
524
- "size-6": {
505
+ "size-5": {
525
506
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
526
507
  "line-height": "1.6"
527
508
  },
528
- "size-7": {
509
+ "size-6": {
529
510
  "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
530
511
  "line-height": "1.6"
531
512
  }
@@ -533,21 +514,17 @@
533
514
  "compact": {
534
515
  "size-3": {
535
516
  "font-size": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)",
536
- "line-height": "1.4"
517
+ "line-height": "1.3"
537
518
  },
538
519
  "size-4": {
539
- "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
540
- "line-height": "1.4"
541
- },
542
- "size-5": {
543
520
  "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
544
521
  "line-height": "1.5"
545
522
  },
546
- "size-6": {
523
+ "size-5": {
547
524
  "font-size": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)",
548
525
  "line-height": "1.6"
549
526
  },
550
- "size-7": {
527
+ "size-6": {
551
528
  "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
552
529
  "line-height": "1.6"
553
530
  }
@@ -641,6 +618,9 @@
641
618
  "color": "#000000"
642
619
  }
643
620
  },
621
+ "mark": {
622
+ "background-color": "var(--amsterdam-color-yellow)"
623
+ },
644
624
  "ordered-list": {
645
625
  "color": "#000000",
646
626
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -775,6 +755,85 @@
775
755
  "max-width": "132rem"
776
756
  }
777
757
  },
758
+ "search-field": {
759
+ "button": {
760
+ "background-color": "#004699",
761
+ "color": "#ffffff",
762
+ "outline-offset": "2px",
763
+ "hover": {
764
+ "background-color": "#102E62"
765
+ }
766
+ },
767
+ "input": {
768
+ "box-shadow": "inset 0 0 0 1px #000000",
769
+ "color": "#000000",
770
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
771
+ "font-weight": 400,
772
+ "outline-offset": "2px",
773
+ "cancel-button": {
774
+ "background-image": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")",
775
+ "color": "#004699",
776
+ "height": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
777
+ "width": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)"
778
+ },
779
+ "hover": {
780
+ "box-shadow": "inset 0 0 0 2px #000000"
781
+ },
782
+ "placeholder": {
783
+ "color": "#767676"
784
+ },
785
+ "compact": {
786
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
787
+ "line-height": "1.6"
788
+ },
789
+ "spacious": {
790
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
791
+ "line-height": "1.6"
792
+ }
793
+ }
794
+ },
795
+ "skip-link": {
796
+ "background-color": "#004699",
797
+ "color": "#ffffff",
798
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
799
+ "font-weight": 400,
800
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
801
+ "line-height": "1.6",
802
+ "outline-offset": "2px",
803
+ "compact": {
804
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
805
+ "line-height": "1.6"
806
+ },
807
+ "hover": {
808
+ "background-color": "#102E62"
809
+ }
810
+ },
811
+ "spotlight": {
812
+ "blue": {
813
+ "background-color": "#004699"
814
+ },
815
+ "dark-green": {
816
+ "background-color": "#00A03C"
817
+ },
818
+ "green": {
819
+ "background-color": "#BED200"
820
+ },
821
+ "light-blue": {
822
+ "background-color": "#009DEC"
823
+ },
824
+ "magenta": {
825
+ "background-color": "#E50082"
826
+ },
827
+ "orange": {
828
+ "background-color": "#FF9100"
829
+ },
830
+ "purple": {
831
+ "background-color": "#A00078"
832
+ },
833
+ "yellow": {
834
+ "background-color": "#FFE600"
835
+ }
836
+ },
778
837
  "switch": {
779
838
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
780
839
  "background-color": "#767676",
@@ -795,6 +854,38 @@
795
854
  "background-color": "#B4B4B4"
796
855
  }
797
856
  },
857
+ "text-input": {
858
+ "box-shadow": "inset 0 0 0 1px #000000",
859
+ "color": "#000000",
860
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
861
+ "font-weight": 400,
862
+ "outline-offset": "2px",
863
+ "disabled": {
864
+ "background-color": "#ffffff",
865
+ "box-shadow": "inset 0 0 0 1px #B4B4B4",
866
+ "color": "#B4B4B4"
867
+ },
868
+ "hover": {
869
+ "box-shadow": "inset 0 0 0 2px #000000"
870
+ },
871
+ "invalid": {
872
+ "box-shadow": "inset 0 0 0 1px #EC0000",
873
+ "hover": {
874
+ "box-shadow": "inset 0 0 0 2px #EC0000"
875
+ }
876
+ },
877
+ "placeholder": {
878
+ "color": "#767676"
879
+ },
880
+ "compact": {
881
+ "font-size": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)",
882
+ "line-height": "1.6"
883
+ },
884
+ "spacious": {
885
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
886
+ "line-height": "1.6"
887
+ }
888
+ },
798
889
  "top-task-link": {
799
890
  "description": {
800
891
  "color": "#000000",
@@ -822,11 +913,11 @@
822
913
  },
823
914
  "spacious": {
824
915
  "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
825
- "line-height": "1.4"
916
+ "line-height": "1.5"
826
917
  },
827
918
  "compact": {
828
919
  "font-size": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)",
829
- "line-height": "1.4"
920
+ "line-height": "1.5"
830
921
  }
831
922
  },
832
923
  "outline-offset": "2px"