@amsterdam/design-system-tokens 0.6.1 → 0.7.1

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 (111) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/build.js +1 -1
  3. package/dist/compact.css +14 -14
  4. package/dist/compact.d.ts +4 -4
  5. package/dist/compact.json +3 -3
  6. package/dist/compact.mjs +14 -14
  7. package/dist/compact.scss +14 -14
  8. package/dist/compact.theme.css +15 -15
  9. package/dist/index.css +607 -581
  10. package/dist/index.d.ts +84 -34
  11. package/dist/index.json +83 -33
  12. package/dist/index.mjs +607 -581
  13. package/dist/index.scss +607 -581
  14. package/dist/index.theme.css +608 -582
  15. package/package.json +1 -1
  16. package/src/brand/{amsterdam → ams}/color.tokens.json +1 -1
  17. package/src/brand/{amsterdam → ams}/proportion.tokens.json +1 -1
  18. package/src/brand/{amsterdam → ams}/space.compact.tokens.json +1 -1
  19. package/src/brand/{amsterdam → ams}/space.tokens.json +1 -1
  20. package/src/brand/{amsterdam/typography.compact.tokens.json → ams/text.compact.tokens.json} +3 -3
  21. package/src/brand/{amsterdam/typography.tokens.json → ams/text.tokens.json} +3 -3
  22. package/src/common/{amsterdam → ams}/action.tokens.json +1 -1
  23. package/src/common/{amsterdam → ams}/border.tokens.json +1 -1
  24. package/src/common/{amsterdam → ams}/focus.tokens.json +1 -1
  25. package/src/common/{amsterdam → ams}/hyphenation.tokens.json +1 -1
  26. package/src/common/{amsterdam → ams}/link-appearance.tokens.json +5 -5
  27. package/src/components/ams/accordion.tokens.json +25 -0
  28. package/src/components/ams/alert.tokens.json +29 -0
  29. package/src/components/ams/aspect-ratio.tokens.json +12 -0
  30. package/src/components/ams/avatar.tokens.json +49 -0
  31. package/src/components/ams/badge.tokens.json +43 -0
  32. package/src/components/ams/blockquote.tokens.json +12 -0
  33. package/src/components/ams/breadcrumb.tokens.json +26 -0
  34. package/src/components/ams/button.tokens.json +59 -0
  35. package/src/components/ams/card.tokens.json +17 -0
  36. package/src/components/ams/checkbox.tokens.json +75 -0
  37. package/src/components/ams/column.tokens.json +13 -0
  38. package/src/components/{amsterdam → ams}/dialog.tokens.json +2 -9
  39. package/src/components/ams/fieldset.tokens.json +13 -0
  40. package/src/components/ams/form-field-character-counter.tokens.json +14 -0
  41. package/src/components/ams/form-label.tokens.json +11 -0
  42. package/src/components/ams/gap.tokens.json +11 -0
  43. package/src/components/ams/grid.compact.tokens.json +7 -0
  44. package/src/components/ams/grid.tokens.json +25 -0
  45. package/src/components/ams/header.tokens.json +14 -0
  46. package/src/components/ams/heading.tokens.json +36 -0
  47. package/src/components/ams/icon-button.tokens.json +37 -0
  48. package/src/components/ams/icon.tokens.json +22 -0
  49. package/src/components/ams/link-list.tokens.json +45 -0
  50. package/src/components/ams/link.tokens.json +61 -0
  51. package/src/components/ams/logo.tokens.json +10 -0
  52. package/src/components/ams/margin.tokens.json +11 -0
  53. package/src/components/ams/mark.tokens.json +7 -0
  54. package/src/components/ams/mega-menu.tokens.json +18 -0
  55. package/src/components/{amsterdam → ams}/ordered-list.tokens.json +7 -7
  56. package/src/components/ams/page-heading.tokens.json +12 -0
  57. package/src/components/ams/page-menu.tokens.json +24 -0
  58. package/src/components/ams/pagination.tokens.json +25 -0
  59. package/src/components/ams/paragraph.tokens.json +22 -0
  60. package/src/components/{amsterdam → ams}/radio.tokens.json +14 -14
  61. package/src/components/ams/row.tokens.json +13 -0
  62. package/src/components/{amsterdam → ams}/screen.tokens.json +1 -1
  63. package/src/components/ams/search-field.tokens.json +45 -0
  64. package/src/components/ams/skip-link.tokens.json +18 -0
  65. package/src/components/ams/spotlight.tokens.json +30 -0
  66. package/src/components/ams/switch.tokens.json +24 -0
  67. package/src/components/ams/table.tokens.json +22 -0
  68. package/src/components/ams/tabs.tokens.json +34 -0
  69. package/src/components/ams/text-area.tokens.json +36 -0
  70. package/src/components/ams/text-input.tokens.json +32 -0
  71. package/src/components/ams/top-task-link.tokens.json +28 -0
  72. package/src/components/{amsterdam → ams}/unordered-list.tokens.json +7 -7
  73. package/src/components/amsterdam/accordion.tokens.json +0 -25
  74. package/src/components/amsterdam/alert.tokens.json +0 -29
  75. package/src/components/amsterdam/aspect-ratio.tokens.json +0 -12
  76. package/src/components/amsterdam/badge.tokens.json +0 -43
  77. package/src/components/amsterdam/blockquote.tokens.json +0 -12
  78. package/src/components/amsterdam/breadcrumb.tokens.json +0 -26
  79. package/src/components/amsterdam/button.tokens.json +0 -59
  80. package/src/components/amsterdam/card.tokens.json +0 -17
  81. package/src/components/amsterdam/checkbox.tokens.json +0 -75
  82. package/src/components/amsterdam/column.tokens.json +0 -13
  83. package/src/components/amsterdam/fieldset.tokens.json +0 -13
  84. package/src/components/amsterdam/form-label.tokens.json +0 -11
  85. package/src/components/amsterdam/gap.tokens.json +0 -11
  86. package/src/components/amsterdam/grid.compact.tokens.json +0 -7
  87. package/src/components/amsterdam/grid.tokens.json +0 -25
  88. package/src/components/amsterdam/header.tokens.json +0 -14
  89. package/src/components/amsterdam/heading.tokens.json +0 -34
  90. package/src/components/amsterdam/icon-button.tokens.json +0 -37
  91. package/src/components/amsterdam/icon.tokens.json +0 -22
  92. package/src/components/amsterdam/link-list.tokens.json +0 -45
  93. package/src/components/amsterdam/link.tokens.json +0 -61
  94. package/src/components/amsterdam/logo.tokens.json +0 -10
  95. package/src/components/amsterdam/margin.tokens.json +0 -11
  96. package/src/components/amsterdam/mark.tokens.json +0 -7
  97. package/src/components/amsterdam/mega-menu.tokens.json +0 -18
  98. package/src/components/amsterdam/page-heading.tokens.json +0 -12
  99. package/src/components/amsterdam/page-menu.tokens.json +0 -24
  100. package/src/components/amsterdam/pagination.tokens.json +0 -25
  101. package/src/components/amsterdam/paragraph.tokens.json +0 -22
  102. package/src/components/amsterdam/row.tokens.json +0 -13
  103. package/src/components/amsterdam/search-field.tokens.json +0 -45
  104. package/src/components/amsterdam/skip-link.tokens.json +0 -18
  105. package/src/components/amsterdam/spotlight.tokens.json +0 -30
  106. package/src/components/amsterdam/switch.tokens.json +0 -24
  107. package/src/components/amsterdam/table.tokens.json +0 -22
  108. package/src/components/amsterdam/tabs.tokens.json +0 -34
  109. package/src/components/amsterdam/text-area.tokens.json +0 -36
  110. package/src/components/amsterdam/text-input.tokens.json +0 -32
  111. package/src/components/amsterdam/top-task-link.tokens.json +0 -28
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 11 Mar 2024 17:19:31 GMT
3
+ * Generated on Fri, 22 Mar 2024 15:51:06 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -22,7 +22,7 @@ declare interface DesignToken {
22
22
  }
23
23
 
24
24
  declare const tokens: {
25
- "amsterdam": {
25
+ "ams": {
26
26
  "color": {
27
27
  "primary-black": DesignToken,
28
28
  "primary-white": DesignToken,
@@ -71,13 +71,13 @@ declare const tokens: {
71
71
  "xl": DesignToken
72
72
  }
73
73
  },
74
- "typography": {
74
+ "text": {
75
75
  "font-family": DesignToken,
76
76
  "font-weight": {
77
77
  "normal": DesignToken,
78
78
  "bold": DesignToken
79
79
  },
80
- "text-level": {
80
+ "level": {
81
81
  "0": {
82
82
  "font-size": DesignToken,
83
83
  "line-height": DesignToken
@@ -222,6 +222,51 @@ declare const tokens: {
222
222
  "x-wide": DesignToken,
223
223
  "2x-wide": DesignToken
224
224
  },
225
+ "avatar": {
226
+ "aspect-ratio": DesignToken,
227
+ "font-family": DesignToken,
228
+ "font-size": DesignToken,
229
+ "font-weight": DesignToken,
230
+ "line-height": DesignToken,
231
+ "padding-block": DesignToken,
232
+ "padding-inline": DesignToken,
233
+ "blue": {
234
+ "background-color": DesignToken,
235
+ "color": DesignToken
236
+ },
237
+ "dark-blue": {
238
+ "background-color": DesignToken,
239
+ "color": DesignToken
240
+ },
241
+ "dark-green": {
242
+ "background-color": DesignToken,
243
+ "color": DesignToken
244
+ },
245
+ "green": {
246
+ "background-color": DesignToken,
247
+ "color": DesignToken
248
+ },
249
+ "magenta": {
250
+ "background-color": DesignToken,
251
+ "color": DesignToken
252
+ },
253
+ "orange": {
254
+ "background-color": DesignToken,
255
+ "color": DesignToken
256
+ },
257
+ "purple": {
258
+ "background-color": DesignToken,
259
+ "color": DesignToken
260
+ },
261
+ "red": {
262
+ "background-color": DesignToken,
263
+ "color": DesignToken
264
+ },
265
+ "yellow": {
266
+ "background-color": DesignToken,
267
+ "color": DesignToken
268
+ }
269
+ },
225
270
  "badge": {
226
271
  "font-family": DesignToken,
227
272
  "font-size": DesignToken,
@@ -437,13 +482,6 @@ declare const tokens: {
437
482
  "background-color": DesignToken,
438
483
  "border": DesignToken,
439
484
  "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
485
  "form": {
448
486
  "gap": DesignToken,
449
487
  "padding-block": DesignToken,
@@ -466,6 +504,16 @@ declare const tokens: {
466
504
  "line-height": DesignToken
467
505
  }
468
506
  },
507
+ "form-field-character-counter": {
508
+ "color": DesignToken,
509
+ "font-family": DesignToken,
510
+ "font-size": DesignToken,
511
+ "font-weight": DesignToken,
512
+ "line-height": DesignToken,
513
+ "error": {
514
+ "color": DesignToken
515
+ }
516
+ },
469
517
  "form-label": {
470
518
  "color": DesignToken,
471
519
  "font-family": DesignToken,
@@ -513,29 +561,31 @@ declare const tokens: {
513
561
  "font-family": DesignToken,
514
562
  "font-weight": DesignToken,
515
563
  "inverse-color": DesignToken,
516
- "level-1": {
517
- "font-size": DesignToken,
518
- "line-height": DesignToken
519
- },
520
- "level-2": {
521
- "font-size": DesignToken,
522
- "line-height": DesignToken
523
- },
524
- "level-3": {
525
- "font-size": DesignToken,
526
- "line-height": DesignToken
527
- },
528
- "level-4": {
529
- "font-size": DesignToken,
530
- "line-height": DesignToken
531
- },
532
- "level-5": {
533
- "font-size": DesignToken,
534
- "line-height": DesignToken
535
- },
536
- "level-6": {
537
- "font-size": DesignToken,
538
- "line-height": DesignToken
564
+ "level": {
565
+ "1": {
566
+ "font-size": DesignToken,
567
+ "line-height": DesignToken
568
+ },
569
+ "2": {
570
+ "font-size": DesignToken,
571
+ "line-height": DesignToken
572
+ },
573
+ "3": {
574
+ "font-size": DesignToken,
575
+ "line-height": DesignToken
576
+ },
577
+ "4": {
578
+ "font-size": DesignToken,
579
+ "line-height": DesignToken
580
+ },
581
+ "5": {
582
+ "font-size": DesignToken,
583
+ "line-height": DesignToken
584
+ },
585
+ "6": {
586
+ "font-size": DesignToken,
587
+ "line-height": DesignToken
588
+ }
539
589
  }
540
590
  },
541
591
  "icon-button": {
package/dist/index.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "amsterdam": {
2
+ "ams": {
3
3
  "color": {
4
4
  "primary-black": "#000000",
5
5
  "primary-white": "#FFFFFF",
@@ -48,13 +48,13 @@
48
48
  "xl": "2rem"
49
49
  }
50
50
  },
51
- "typography": {
51
+ "text": {
52
52
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
53
53
  "font-weight": {
54
54
  "normal": 400,
55
55
  "bold": 800
56
56
  },
57
- "text-level": {
57
+ "level": {
58
58
  "0": {
59
59
  "font-size": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)",
60
60
  "line-height": "1.15"
@@ -199,6 +199,51 @@
199
199
  "x-wide": "16 / 9",
200
200
  "2x-wide": "32 / 9"
201
201
  },
202
+ "avatar": {
203
+ "aspect-ratio": "1 / 1",
204
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
205
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
206
+ "font-weight": 400,
207
+ "line-height": "1.6",
208
+ "padding-block": "0.25rem",
209
+ "padding-inline": "0.25rem",
210
+ "blue": {
211
+ "background-color": "#009DE6",
212
+ "color": "#000000"
213
+ },
214
+ "dark-blue": {
215
+ "background-color": "#004699",
216
+ "color": "#FFFFFF"
217
+ },
218
+ "dark-green": {
219
+ "background-color": "#00A03C",
220
+ "color": "#FFFFFF"
221
+ },
222
+ "green": {
223
+ "background-color": "#BED200",
224
+ "color": "#000000"
225
+ },
226
+ "magenta": {
227
+ "background-color": "#E50082",
228
+ "color": "#FFFFFF"
229
+ },
230
+ "orange": {
231
+ "background-color": "#FF9100",
232
+ "color": "#000000"
233
+ },
234
+ "purple": {
235
+ "background-color": "#A00078",
236
+ "color": "#FFFFFF"
237
+ },
238
+ "red": {
239
+ "background-color": "#EC0000",
240
+ "color": "#FFFFFF"
241
+ },
242
+ "yellow": {
243
+ "background-color": "#FFE600",
244
+ "color": "#000000"
245
+ }
246
+ },
202
247
  "badge": {
203
248
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
204
249
  "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
@@ -414,13 +459,6 @@
414
459
  "background-color": "#FFFFFF",
415
460
  "border": "0",
416
461
  "max-inline-size": "min(87.69vw, 45rem)",
417
- "title": {
418
- "color": "#000000",
419
- "font-family": "'Amsterdam Sans', Arial, sans-serif",
420
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
421
- "font-weight": 800,
422
- "line-height": "1.6"
423
- },
424
462
  "form": {
425
463
  "gap": "1.5rem",
426
464
  "padding-block": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)",
@@ -443,6 +481,16 @@
443
481
  "line-height": "1.5"
444
482
  }
445
483
  },
484
+ "form-field-character-counter": {
485
+ "color": "#000000",
486
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
487
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
488
+ "font-weight": 400,
489
+ "line-height": "1.6",
490
+ "error": {
491
+ "color": "#EC0000"
492
+ }
493
+ },
446
494
  "form-label": {
447
495
  "color": "#000000",
448
496
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -490,29 +538,31 @@
490
538
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
491
539
  "font-weight": 800,
492
540
  "inverse-color": "#FFFFFF",
493
- "level-1": {
494
- "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
495
- "line-height": "1.2"
496
- },
497
- "level-2": {
498
- "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
499
- "line-height": "1.25"
500
- },
501
- "level-3": {
502
- "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
503
- "line-height": "1.3"
504
- },
505
- "level-4": {
506
- "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
507
- "line-height": "1.5"
508
- },
509
- "level-5": {
510
- "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
511
- "line-height": "1.6"
512
- },
513
- "level-6": {
514
- "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
515
- "line-height": "1.6"
541
+ "level": {
542
+ "1": {
543
+ "font-size": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)",
544
+ "line-height": "1.2"
545
+ },
546
+ "2": {
547
+ "font-size": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)",
548
+ "line-height": "1.25"
549
+ },
550
+ "3": {
551
+ "font-size": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)",
552
+ "line-height": "1.3"
553
+ },
554
+ "4": {
555
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
556
+ "line-height": "1.5"
557
+ },
558
+ "5": {
559
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
560
+ "line-height": "1.6"
561
+ },
562
+ "6": {
563
+ "font-size": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)",
564
+ "line-height": "1.6"
565
+ }
516
566
  }
517
567
  },
518
568
  "icon-button": {