@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/src/brand/amsterdam/typography.tokens.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "text-level": {
11
11
  "0": {
12
12
  "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
13
- "line-height": { "value": "1.1" }
13
+ "line-height": { "value": "1.15" }
14
14
  },
15
15
  "1": {
16
16
  "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
@@ -18,25 +18,21 @@
18
18
  },
19
19
  "2": {
20
20
  "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
21
- "line-height": { "value": "1.3" }
21
+ "line-height": { "value": "1.25" }
22
22
  },
23
23
  "3": {
24
24
  "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
25
- "line-height": { "value": "1.4" }
25
+ "line-height": { "value": "1.3" }
26
26
  },
27
27
  "4": {
28
- "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
29
- "line-height": { "value": "1.4" }
30
- },
31
- "5": {
32
28
  "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
33
29
  "line-height": { "value": "1.5" }
34
30
  },
35
- "6": {
31
+ "5": {
36
32
  "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
37
33
  "line-height": { "value": "1.6" }
38
34
  },
39
- "7": {
35
+ "6": {
40
36
  "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
41
37
  "line-height": { "value": "1.6" }
42
38
  }
@@ -46,7 +42,7 @@
46
42
  "text-level": {
47
43
  "0": {
48
44
  "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
49
- "line-height": { "value": "1.1" }
45
+ "line-height": { "value": "1.15" }
50
46
  },
51
47
  "1": {
52
48
  "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
@@ -54,25 +50,21 @@
54
50
  },
55
51
  "2": {
56
52
  "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
57
- "line-height": { "value": "1.3" }
53
+ "line-height": { "value": "1.25" }
58
54
  },
59
55
  "3": {
60
56
  "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
61
- "line-height": { "value": "1.4" }
57
+ "line-height": { "value": "1.3" }
62
58
  },
63
59
  "4": {
64
- "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
65
- "line-height": { "value": "1.4" }
66
- },
67
- "5": {
68
60
  "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
69
61
  "line-height": { "value": "1.5" }
70
62
  },
71
- "6": {
63
+ "5": {
72
64
  "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
73
65
  "line-height": { "value": "1.6" }
74
66
  },
75
- "7": {
67
+ "6": {
76
68
  "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
77
69
  "line-height": { "value": "1.6" }
78
70
  }
package/src/common/amsterdam/border.tokens.json CHANGED
@@ -1,15 +1,9 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "border-width": {
4
- "sm": {
5
- "value": "1px"
6
- },
7
- "md": {
8
- "value": "2px"
9
- },
10
- "lg": {
11
- "value": "3px"
12
- }
4
+ "sm": { "value": "1px" },
5
+ "md": { "value": "2px" },
6
+ "lg": { "value": "3px" }
13
7
  }
14
8
  }
15
9
  }
package/src/common/amsterdam/spacing.tokens.json CHANGED
@@ -2,18 +2,10 @@
2
2
  "amsterdam": {
3
3
  "spacing": {
4
4
  "inset": {
5
- "sm": {
6
- "value": "0.5rem"
7
- },
8
- "md": {
9
- "value": "1rem"
10
- },
11
- "lg": {
12
- "value": "1.5rem"
13
- },
14
- "xl": {
15
- "value": "2.5rem"
16
- }
5
+ "sm": { "value": "0.5rem" },
6
+ "md": { "value": "1rem" },
7
+ "lg": { "value": "1.5rem" },
8
+ "xl": { "value": "2.5rem" }
17
9
  }
18
10
  }
19
11
  }
package/src/components/amsterdam/accordion.tokens.json CHANGED
@@ -9,9 +9,7 @@
9
9
  "font-family": { "value": "{amsterdam.typography.font-family}" },
10
10
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
11
11
  "hover": {
12
- "box-shadow": {
13
- "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
14
- }
12
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" }
15
13
  },
16
14
  "spacious": {
17
15
  "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
package/src/components/amsterdam/alert.tokens.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "alert": {
4
- "background-color": { "value": "{amsterdam.color.yellow}" },
5
- "border": { "value": "4px solid {amsterdam.color.yellow}" },
4
+ "border-width": { "value": "4px" },
5
+ "border-style": { "value": "solid" },
6
6
  "gap": { "value": "1rem" },
7
7
  "padding-block-start": { "value": "{amsterdam.spacing.inset.md}" },
8
8
  "padding-block-end": { "value": "{amsterdam.spacing.inset.md}" },
@@ -13,24 +13,27 @@
13
13
  "font-family": { "value": "{amsterdam.typography.font-family}" },
14
14
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
15
15
  "spacious": {
16
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
17
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
16
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
17
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
18
18
  },
19
19
  "compact": {
20
- "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
21
- "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
20
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
21
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
22
22
  }
23
23
  },
24
24
  "error": {
25
- "background-color": { "value": "{amsterdam.color.primary-white}" },
26
25
  "border-color": { "value": "{amsterdam.color.primary-red}" }
27
26
  },
27
+ "info": {
28
+ "border-color": { "value": "{amsterdam.color.primary-blue}" }
29
+ },
28
30
  "success": {
29
- "background-color": { "value": "{amsterdam.color.primary-white}" },
30
31
  "border-color": { "value": "{amsterdam.color.dark-green}" }
31
32
  },
33
+ "warning": {
34
+ "border-color": { "value": "{amsterdam.color.orange}" }
35
+ },
32
36
  "close": {
33
- "background-color": { "value": "transparent" },
34
37
  "fill": { "value": "{amsterdam.color.primary-black}" },
35
38
  "hover": {
36
39
  "fill": { "value": "{amsterdam.color.primary-blue}" }
package/src/components/amsterdam/badge.tokens.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "amsterdam": {
3
+ "badge": {
4
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
5
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
6
+ "padding-inline": { "value": "0.5rem" },
7
+ "spacious": {
8
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
10
+ },
11
+ "compact": {
12
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
14
+ },
15
+ "blue": {
16
+ "background-color": { "value": "{amsterdam.color.blue}" },
17
+ "color": { "value": "{amsterdam.color.primary-black}" }
18
+ },
19
+ "dark-blue": {
20
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
21
+ "color": { "value": "{amsterdam.color.primary-white}" }
22
+ },
23
+ "dark-green": {
24
+ "background-color": { "value": "{amsterdam.color.dark-green}" },
25
+ "color": { "value": "{amsterdam.color.primary-white}" }
26
+ },
27
+ "green": {
28
+ "background-color": { "value": "{amsterdam.color.green}" },
29
+ "color": { "value": "{amsterdam.color.primary-black}" }
30
+ },
31
+ "magenta": {
32
+ "background-color": { "value": "{amsterdam.color.magenta}" },
33
+ "color": { "value": "{amsterdam.color.primary-white}" }
34
+ },
35
+ "orange": {
36
+ "background-color": { "value": "{amsterdam.color.orange}" },
37
+ "color": { "value": "{amsterdam.color.primary-black}" }
38
+ },
39
+ "purple": {
40
+ "background-color": { "value": "{amsterdam.color.purple}" },
41
+ "color": { "value": "{amsterdam.color.primary-white}" }
42
+ },
43
+ "yellow": {
44
+ "background-color": { "value": "{amsterdam.color.yellow}" },
45
+ "color": { "value": "{amsterdam.color.primary-black}" }
46
+ }
47
+ }
48
+ }
49
+ }
package/src/components/amsterdam/breadcrumb.tokens.json CHANGED
@@ -4,7 +4,9 @@
4
4
  "font-family": { "value": "{amsterdam.typography.font-family}" },
5
5
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
6
6
  "separator": {
7
- "background-color": { "value": "{amsterdam.color.primary-blue}" }
7
+ "background-image": {
8
+ "value": "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>\")"
9
+ }
8
10
  },
9
11
  "item-link": {
10
12
  "color": { "value": "{amsterdam.link-appearance.color}" },
@@ -18,12 +20,12 @@
18
20
  }
19
21
  },
20
22
  "spacious": {
21
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
22
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
23
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
24
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
23
25
  },
24
26
  "compact": {
25
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
26
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
27
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
28
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
27
29
  }
28
30
  }
29
31
  }
package/src/components/amsterdam/button.tokens.json CHANGED
@@ -2,38 +2,28 @@
2
2
  "amsterdam": {
3
3
  "button": {
4
4
  "spacious": {
5
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
6
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
5
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
6
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
7
7
  },
8
8
  "compact": {
9
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
10
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
9
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
11
11
  },
12
12
  "secondary": {
13
- "box-shadow": {
14
- "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
15
- },
13
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
16
14
  "hover": {
17
- "box-shadow": {
18
- "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}"
19
- }
15
+ "box-shadow": { "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}" }
20
16
  },
21
17
  "disabled": {
22
- "box-shadow": {
23
- "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}"
24
- }
18
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }
25
19
  },
26
20
  "focus": {
27
- "box-shadow": {
28
- "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
29
- }
21
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }
30
22
  }
31
23
  },
32
24
  "tertiary": {
33
25
  "hover": {
34
- "box-shadow": {
35
- "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
36
- }
26
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }
37
27
  }
38
28
  }
39
29
  }
package/src/components/amsterdam/checkbox.tokens.json CHANGED
@@ -1,114 +1,74 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "checkbox": {
4
- "color": {
5
- "value": "{amsterdam.color.primary-black}"
6
- },
4
+ "color": { "value": "{amsterdam.color.primary-black}" },
7
5
  "checkmark": {
8
- "border-color": {
9
- "value": "{amsterdam.color.primary-blue}"
10
- },
6
+ "border-color": { "value": "{amsterdam.color.primary-blue}" },
11
7
  "checked": {
12
- "background-color": {
13
- "value": "{amsterdam.color.primary-blue}"
14
- },
8
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
15
9
  "hover": {
16
- "background-color": {
17
- "value": "{amsterdam.color.dark-blue}"
18
- }
10
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
19
11
  }
20
12
  },
21
13
  "disabled": {
22
- "border-color": {
23
- "value": "{amsterdam.color.neutral-grey3}"
24
- },
14
+ "border-color": { "value": "{amsterdam.color.neutral-grey3}" },
25
15
  "checked": {
26
- "background-color": {
27
- "value": "{amsterdam.color.neutral-grey3}"
28
- },
16
+ "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
29
17
  "hover": {
30
- "background-color": {
31
- "value": "{amsterdam.color.neutral-grey3}"
32
- }
18
+ "background-color": { "value": "{amsterdam.color.neutral-grey3}" }
33
19
  }
34
20
  },
35
21
  "indeterminate": {
36
- "background-color": {
37
- "value": "{amsterdam.color.neutral-grey3}"
38
- },
22
+ "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
39
23
  "hover": {
40
- "background-color": {
41
- "value": "{amsterdam.color.neutral-grey3}"
42
- }
24
+ "background-color": { "value": "{amsterdam.color.neutral-grey3}" }
43
25
  }
44
26
  }
45
27
  },
46
28
  "hover": {
47
- "border-color": {
48
- "value": "{amsterdam.color.dark-blue}"
49
- }
29
+ "border-color": { "value": "{amsterdam.color.dark-blue}" }
50
30
  },
51
31
  "invalid": {
52
- "border-color": {
53
- "value": "{amsterdam.color.primary-red}"
54
- },
32
+ "border-color": { "value": "{amsterdam.color.primary-red}" },
55
33
  "checked": {
56
- "background-color": {
57
- "value": "{amsterdam.color.primary-red}"
58
- },
34
+ "background-color": { "value": "{amsterdam.color.primary-red}" },
59
35
  "hover": {
60
- "background-color": {
61
- "value": "{amsterdam.color.primary-red}"
62
- }
36
+ "background-color": { "value": "{amsterdam.color.primary-red}" }
63
37
  }
64
38
  },
65
39
  "hover": {
66
- "border-color": {
67
- "value": "{amsterdam.color.primary-red}"
68
- }
40
+ "border-color": { "value": "{amsterdam.color.primary-red}" }
69
41
  },
70
42
  "indeterminate": {
71
- "background-color": {
72
- "value": "{amsterdam.color.primary-red}"
73
- },
43
+ "background-color": { "value": "{amsterdam.color.primary-red}" },
74
44
  "hover": {
75
- "background-color": {
76
- "value": "{amsterdam.color.primary-red}"
77
- }
45
+ "background-color": { "value": "{amsterdam.color.primary-red}" }
78
46
  }
79
47
  }
80
48
  },
81
49
  "indeterminate": {
82
- "background-color": {
83
- "value": "{amsterdam.color.primary-blue}"
84
- },
50
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
85
51
  "hover": {
86
- "background-color": {
87
- "value": "{amsterdam.color.dark-blue}"
88
- }
52
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
89
53
  }
90
54
  }
91
55
  },
92
56
  "disabled": {
93
- "color": {
94
- "value": "{amsterdam.color.neutral-grey3}"
95
- }
57
+ "color": { "value": "{amsterdam.color.neutral-grey3}" }
96
58
  },
97
59
  "font-family": { "value": "{amsterdam.typography.font-family}" },
98
60
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
99
61
  "hover": {
100
- "color": {
101
- "value": "{amsterdam.color.dark-blue}"
102
- }
62
+ "color": { "value": "{amsterdam.color.dark-blue}" }
103
63
  },
104
64
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
105
65
  "spacious": {
106
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
107
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
66
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
67
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
108
68
  },
109
69
  "compact": {
110
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
111
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
70
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
71
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
112
72
  }
113
73
  }
114
74
  }
package/src/components/amsterdam/dialog.tokens.json CHANGED
@@ -20,13 +20,6 @@
20
20
  "backdrop": {
21
21
  "background": { "value": "#0006" }
22
22
  },
23
- "close": {
24
- "background-color": { "value": "transparent" },
25
- "fill": { "value": "{amsterdam.color.primary-black}" },
26
- "hover": {
27
- "fill": { "value": "{amsterdam.color.primary-blue}" }
28
- }
29
- },
30
23
  "form": {
31
24
  "gap": { "value": "1.5rem" },
32
25
  "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
package/src/components/amsterdam/form-label.tokens.json CHANGED
@@ -5,12 +5,12 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
7
  "spacious": {
8
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
9
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
8
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
10
10
  },
11
11
  "compact": {
12
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
13
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
12
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
14
14
  }
15
15
  }
16
16
  }
package/src/components/amsterdam/grid.tokens.json CHANGED
@@ -1,9 +1,7 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "grid": {
4
- "column-count": {
5
- "value": "4"
6
- },
4
+ "column-count": { "value": "4" },
7
5
  "spacious": {
8
6
  "gap": {
9
7
  "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
@@ -25,14 +23,10 @@
25
23
  }
26
24
  },
27
25
  "medium": {
28
- "column-count": {
29
- "value": "8"
30
- }
26
+ "column-count": { "value": "8" }
31
27
  },
32
28
  "wide": {
33
- "column-count": {
34
- "value": "12"
35
- }
29
+ "column-count": { "value": "12" }
36
30
  }
37
31
  }
38
32
  }
package/src/components/amsterdam/header.tokens.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "amsterdam": {
3
+ "header": {
4
+ "column-gap": { "value": "{amsterdam.grid.spacious.gap}" }
5
+ }
6
+ }
7
+ }
package/src/components/amsterdam/heading.tokens.json CHANGED
@@ -21,40 +21,40 @@
21
21
  "level-4": {
22
22
  "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
23
23
  "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
24
+ },
25
+ "level-5": {
26
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
27
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }
28
+ },
29
+ "level-6": {
30
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
31
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
24
32
  }
25
33
  },
26
34
  "compact": {
27
35
  "level-1": {
28
- "line-height": {
29
- "value": "{amsterdam.typography.compact.text-level.1.line-height}"
30
- },
31
- "font-size": {
32
- "value": "{amsterdam.typography.compact.text-level.1.font-size}"
33
- }
36
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.1.line-height}" },
37
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.1.font-size}" }
34
38
  },
35
39
  "level-2": {
36
- "line-height": {
37
- "value": "{amsterdam.typography.compact.text-level.2.line-height}"
38
- },
39
- "font-size": {
40
- "value": "{amsterdam.typography.compact.text-level.2.font-size}"
41
- }
40
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.2.line-height}" },
41
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.2.font-size}" }
42
42
  },
43
43
  "level-3": {
44
- "line-height": {
45
- "value": "{amsterdam.typography.compact.text-level.3.line-height}"
46
- },
47
- "font-size": {
48
- "value": "{amsterdam.typography.compact.text-level.3.font-size}"
49
- }
44
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" },
45
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }
50
46
  },
51
47
  "level-4": {
52
- "line-height": {
53
- "value": "{amsterdam.typography.compact.text-level.4.line-height}"
54
- },
55
- "font-size": {
56
- "value": "{amsterdam.typography.compact.text-level.4.font-size}"
57
- }
48
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" },
49
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }
50
+ },
51
+ "level-5": {
52
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" },
53
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }
54
+ },
55
+ "level-6": {
56
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" },
57
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }
58
58
  }
59
59
  }
60
60
  }
package/src/components/amsterdam/icon-button.tokens.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "amsterdam": {
3
+ "icon-button": {
4
+ "color": { "value": "{amsterdam.color.primary-blue}" },
5
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
6
+ "hover": {
7
+ "background-color": { "value": "rgba(0, 70, 153, 0.125)" },
8
+ "color": { "value": "{amsterdam.color.dark-blue}" }
9
+ },
10
+ "disabled": {
11
+ "color": { "value": "{amsterdam.color.neutral-grey2}" }
12
+ },
13
+ "on-background-light": {
14
+ "color": { "value": "{amsterdam.color.primary-black}" },
15
+ "hover": {
16
+ "background-color": { "value": "rgba(0, 0, 0, 0.125)" },
17
+ "color": { "value": "{amsterdam.color.primary-black}" }
18
+ },
19
+ "disabled": {
20
+ "color": { "value": "{amsterdam.color.neutral-grey2}" }
21
+ }
22
+ },
23
+ "on-background-dark": {
24
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
25
+ "color": { "value": "{amsterdam.color.primary-white}" },
26
+ "hover": {
27
+ "background-color": { "value": "{amsterdam.color.dark-blue}" },
28
+ "color": { "value": "{amsterdam.color.primary-white}" }
29
+ },
30
+ "disabled": {
31
+ "color": { "value": "{amsterdam.color.primary-white}" },
32
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
33
+ }
34
+ }
35
+ }
36
+ }
37
+ }
package/src/components/amsterdam/icon.tokens.json CHANGED
@@ -17,10 +17,6 @@
17
17
  "size-6": {
18
18
  "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
19
19
  "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
20
- },
21
- "size-7": {
22
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
23
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
24
20
  }
25
21
  },
26
22
  "compact": {
@@ -39,10 +35,6 @@
39
35
  "size-6": {
40
36
  "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
41
37
  "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
42
- },
43
- "size-7": {
44
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
45
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
46
38
  }
47
39
  }
48
40
  }