@amsterdam/design-system-tokens 0.1.7 → 0.2.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 +23 -0
  2. package/dist/_variables.scss +240 -152
  3. package/dist/index.css +240 -152
  4. package/dist/index.d.ts +222 -134
  5. package/dist/index.js +227 -139
  6. package/dist/index.json +226 -138
  7. package/dist/index.tokens.json +388 -271
  8. package/dist/root.css +240 -152
  9. package/dist/tokens.d.ts +372 -255
  10. package/dist/tokens.js +4043 -2036
  11. package/dist/variables.less +240 -152
  12. package/package.json +2 -2
  13. package/src/brand/amsterdam/typography.tokens.json +70 -84
  14. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  15. package/src/components/amsterdam/accordion.tokens.json +8 -7
  16. package/src/components/amsterdam/alert.tokens.json +6 -5
  17. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  18. package/src/components/amsterdam/breadcrumb.tokens.json +19 -34
  19. package/src/components/amsterdam/button.tokens.json +6 -4
  20. package/src/components/amsterdam/card.tokens.json +6 -2
  21. package/src/components/amsterdam/checkbox.tokens.json +7 -13
  22. package/src/components/amsterdam/dialog.tokens.json +48 -0
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +6 -6
  25. package/src/components/amsterdam/heading.tokens.json +44 -28
  26. package/src/components/amsterdam/icon.tokens.json +37 -28
  27. package/src/components/amsterdam/link.tokens.json +41 -33
  28. package/src/components/amsterdam/logo.tokens.json +10 -0
  29. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  30. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  31. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  32. package/src/components/amsterdam/pagination.tokens.json +17 -18
  33. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  34. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  35. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  36. package/src/components/utrecht/button.tokens.json +1 -3
  37. package/src/components/amsterdam/footer.tokens.json +0 -11
package/src/brand/amsterdam/typography.tokens.json CHANGED
@@ -6,90 +6,76 @@
6
6
  "normal": { "value": 400 },
7
7
  "bold": { "value": 800 }
8
8
  },
9
- "text-level": {
10
- "0": {
11
- "narrow": {
12
- "font-size": { "value": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)" }
13
- },
14
- "wide": {
15
- "font-size": { "value": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)" }
16
- },
17
- "line-height": { "value": "1.1" }
18
- },
19
- "1": {
20
- "narrow": {
21
- "font-size": { "value": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)" }
22
- },
23
- "wide": {
24
- "font-size": { "value": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)" }
25
- },
26
- "line-height": { "value": "1.2" }
27
- },
28
- "2": {
29
- "narrow": {
30
- "font-size": { "value": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)" }
31
- },
32
- "wide": {
33
- "font-size": { "value": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)" }
34
- },
35
- "line-height": { "value": "1.3" }
36
- },
37
- "3": {
38
- "narrow": {
39
- "font-size": { "value": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)" }
40
- },
41
- "wide": {
42
- "font-size": {
43
- "value": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
44
- }
45
- },
46
- "line-height": { "value": "1.4" }
47
- },
48
- "4": {
49
- "narrow": {
50
- "font-size": { "value": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)" }
51
- },
52
- "wide": {
53
- "font-size": {
54
- "value": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
55
- }
56
- },
57
- "line-height": { "value": "1.4" }
58
- },
59
- "5": {
60
- "narrow": {
61
- "font-size": { "value": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)" }
62
- },
63
- "wide": {
64
- "font-size": {
65
- "value": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
66
- }
67
- },
68
- "line-height": { "value": "1.5" }
69
- },
70
- "6": {
71
- "narrow": {
72
- "font-size": {
73
- "value": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
74
- }
75
- },
76
- "wide": {
77
- "font-size": {
78
- "value": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
79
- }
80
- },
81
- "line-height": { "value": "1.6" }
82
- },
83
- "7": {
84
- "narrow": {
85
- "font-size": { "value": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)" }
86
- },
87
- "wide": {
88
- "font-size": {
89
- "value": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
90
- }
91
- },
92
- "line-height": { "value": "1.6" }
9
+ "spacious": {
10
+ "text-level": {
11
+ "0": {
12
+ "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
13
+ "line-height": { "value": "1.1" }
14
+ },
15
+ "1": {
16
+ "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
17
+ "line-height": { "value": "1.2" }
18
+ },
19
+ "2": {
20
+ "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
21
+ "line-height": { "value": "1.3" }
22
+ },
23
+ "3": {
24
+ "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
25
+ "line-height": { "value": "1.4" }
26
+ },
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
+ "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
33
+ "line-height": { "value": "1.5" }
34
+ },
35
+ "6": {
36
+ "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
37
+ "line-height": { "value": "1.6" }
38
+ },
39
+ "7": {
40
+ "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
41
+ "line-height": { "value": "1.6" }
42
+ }
43
+ }
44
+ },
45
+ "compact": {
46
+ "text-level": {
47
+ "0": {
48
+ "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
49
+ "line-height": { "value": "1.1" }
50
+ },
51
+ "1": {
52
+ "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
53
+ "line-height": { "value": "1.2" }
54
+ },
55
+ "2": {
56
+ "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
57
+ "line-height": { "value": "1.3" }
58
+ },
59
+ "3": {
60
+ "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
61
+ "line-height": { "value": "1.4" }
62
+ },
63
+ "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
+ "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
69
+ "line-height": { "value": "1.5" }
70
+ },
71
+ "6": {
72
+ "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
73
+ "line-height": { "value": "1.6" }
74
+ },
75
+ "7": {
76
+ "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
77
+ "line-height": { "value": "1.6" }
78
+ }
93
79
  }
94
80
  }
95
81
  }
package/src/common/amsterdam/link-appearance.tokens.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "amsterdam": {
3
+ "link-appearance": {
4
+ "color": { "value": "{amsterdam.color.primary-blue}" },
5
+ "text-decoration-thickness": { "value": "0.125rem" },
6
+ "text-underline-offset": { "value": "0.375rem" },
7
+ "hover": {
8
+ "color": { "value": "{amsterdam.color.dark-blue}" }
9
+ },
10
+ "on-background-dark": {
11
+ "color": { "value": "{amsterdam.color.primary-white}" }
12
+ },
13
+ "on-background-light": {
14
+ "color": { "value": "{amsterdam.color.primary-black}" }
15
+ },
16
+ "regular": {
17
+ "text-decoration-line": { "value": "underline" },
18
+ "hover": {
19
+ "text-decoration-thickness": { "value": "0.1875rem" },
20
+ "text-underline-offset": { "value": "0.3125rem" }
21
+ }
22
+ },
23
+ "subtle": {
24
+ "text-decoration-line": { "value": "none" },
25
+ "hover": {
26
+ "text-decoration-line": { "value": "underline" }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
package/src/components/amsterdam/accordion.tokens.json CHANGED
@@ -8,17 +8,18 @@
8
8
  },
9
9
  "font-family": { "value": "{amsterdam.typography.font-family}" },
10
10
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
11
- "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
12
- "narrow": {
13
- "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
14
- },
15
- "wide": {
16
- "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
17
- },
18
11
  "hover": {
19
12
  "box-shadow": {
20
13
  "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
21
14
  }
15
+ },
16
+ "spacious": {
17
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
18
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
19
+ },
20
+ "compact": {
21
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
22
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
22
23
  }
23
24
  }
24
25
  }
package/src/components/amsterdam/alert.tokens.json CHANGED
@@ -12,12 +12,13 @@
12
12
  "color": { "value": "{amsterdam.color.primary-black}" },
13
13
  "font-family": { "value": "{amsterdam.typography.font-family}" },
14
14
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
15
- "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
16
- "narrow": {
17
- "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
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}" }
18
18
  },
19
- "wide": {
20
- "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
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}" }
21
22
  }
22
23
  },
23
24
  "error": {
package/src/components/amsterdam/blockquote.tokens.json CHANGED
@@ -5,12 +5,13 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
- "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
9
- "narrow": {
10
- "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
8
+ "spacious": {
9
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
11
11
  },
12
- "wide": {
13
- "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
12
+ "compact": {
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }
14
15
  }
15
16
  }
16
17
  }
package/src/components/amsterdam/breadcrumb.tokens.json CHANGED
@@ -1,44 +1,29 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "breadcrumb": {
4
- "color": {
5
- "value": "{amsterdam.color.primary-blue}"
6
- },
7
- "font-family": {
8
- "value": "{amsterdam.typography.font-family}"
9
- },
10
- "font-weight": {
11
- "value": "{amsterdam.typography.font-weight.normal}"
12
- },
13
- "line-height": {
14
- "value": "{amsterdam.typography.text-level.7.line-height}"
15
- },
16
- "narrow": {
17
- "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
18
- },
19
- "wide": {
20
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
4
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
5
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
6
+ "separator": {
7
+ "background-color": { "value": "{amsterdam.color.primary-blue}" }
21
8
  },
22
9
  "item-link": {
23
- "outline-offset": {
24
- "value": "{amsterdam.focus.outline-offset}"
25
- },
10
+ "color": { "value": "{amsterdam.link-appearance.color}" },
11
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
12
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
26
15
  "hover": {
27
- "color": {
28
- "value": "{amsterdam.color.dark-blue}"
29
- },
30
- "box-shadow": {
31
- "value": "inset 0 -2px 0 0 {amsterdam.color.dark-blue}"
32
- }
33
- },
34
- "focus": {
35
- "color": {
36
- "value": "{amsterdam.color.dark-blue}"
37
- },
38
- "text-decoration": {
39
- "value": "underline"
40
- }
16
+ "color": { "value": "{amsterdam.color.dark-blue}" },
17
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
41
18
  }
19
+ },
20
+ "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
+ },
24
+ "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}" }
42
27
  }
43
28
  }
44
29
  }
package/src/components/amsterdam/button.tokens.json CHANGED
@@ -1,11 +1,13 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "button": {
4
- "narrow": {
5
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
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}" }
6
7
  },
7
- "wide": {
8
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
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
11
  },
10
12
  "secondary": {
11
13
  "box-shadow": {
package/src/components/amsterdam/card.tokens.json CHANGED
@@ -2,9 +2,13 @@
2
2
  "amsterdam": {
3
3
  "card": {
4
4
  "link": {
5
- "color": { "value": "{amsterdam.color.primary-blue}" },
5
+ "color": { "value": "{amsterdam.link-appearance.color}" },
6
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
7
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
8
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
6
9
  "hover": {
7
- "color": { "value": "{amsterdam.color.dark-blue}" }
10
+ "color": { "value": "{amsterdam.link-appearance.hover.color}" },
11
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
8
12
  }
9
13
  },
10
14
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
package/src/components/amsterdam/checkbox.tokens.json CHANGED
@@ -87,14 +87,7 @@
87
87
  "value": "{amsterdam.color.dark-blue}"
88
88
  }
89
89
  }
90
- },
91
- "narrow": {
92
- "size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
93
- },
94
- "wide": {
95
- "size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
96
- },
97
- "multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
90
+ }
98
91
  },
99
92
  "disabled": {
100
93
  "color": {
@@ -109,12 +102,13 @@
109
102
  }
110
103
  },
111
104
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
112
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
113
- "narrow": {
114
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
105
+ "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}" }
115
108
  },
116
- "wide": {
117
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
109
+ "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}" }
118
112
  }
119
113
  }
120
114
  }
package/src/components/amsterdam/dialog.tokens.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "amsterdam": {
3
+ "dialog": {
4
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
5
+ "border": { "value": "0" },
6
+ "max-inline-size": { "value": "min(87.69vw, 45rem)" },
7
+ "title": {
8
+ "color": { "value": "{amsterdam.color.primary-black}" },
9
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
10
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
11
+ "spacious": {
12
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
14
+ },
15
+ "compact": {
16
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
17
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
18
+ }
19
+ },
20
+ "backdrop": {
21
+ "background": { "value": "#0006" }
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
+ "form": {
31
+ "gap": { "value": "1.5rem" },
32
+ "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
33
+ "padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
34
+ "max-block-size": { "value": "75vh" }
35
+ },
36
+ "article": {
37
+ "padding-inline-end": { "value": "1.5rem" }
38
+ },
39
+ "header": {
40
+ "gap": { "value": "1rem" }
41
+ },
42
+ "footer": {
43
+ "gap": { "value": "1rem" },
44
+ "padding-block": { "value": "1.5rem 0" }
45
+ }
46
+ }
47
+ }
48
+ }
package/src/components/amsterdam/form-label.tokens.json CHANGED
@@ -4,12 +4,13 @@
4
4
  "color": { "value": "{amsterdam.color.primary-black}" },
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
8
- "narrow": {
9
- "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
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}" }
10
10
  },
11
- "wide": {
12
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
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}" }
13
14
  }
14
15
  }
15
16
  }
package/src/components/amsterdam/grid.tokens.json CHANGED
@@ -4,23 +4,23 @@
4
4
  "column-count": {
5
5
  "value": "4"
6
6
  },
7
- "density-low": {
7
+ "spacious": {
8
8
  "gap": {
9
- "value": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
9
+ "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
10
10
  "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
11
11
  },
12
12
  "padding-inline": {
13
- "value": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
13
+ "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
14
14
  "comment": "Equals 1.5 times the gap."
15
15
  }
16
16
  },
17
- "density-high": {
17
+ "compact": {
18
18
  "gap": {
19
- "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
19
+ "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
20
20
  "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
21
21
  },
22
22
  "padding-inline": {
23
- "value": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
23
+ "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
24
24
  "comment": "Equals the gap."
25
25
  }
26
26
  },
package/src/components/amsterdam/heading.tokens.json CHANGED
@@ -5,40 +5,56 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
- "1": {
9
- "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" },
10
- "narrow": {
11
- "font-size": { "value": "{amsterdam.typography.text-level.1.narrow.font-size}" }
8
+ "spacious": {
9
+ "level-1": {
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.1.line-height}" },
11
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.1.font-size}" }
12
12
  },
13
- "wide": {
14
- "font-size": { "value": "{amsterdam.typography.text-level.1.wide.font-size}" }
15
- }
16
- },
17
- "2": {
18
- "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" },
19
- "narrow": {
20
- "font-size": { "value": "{amsterdam.typography.text-level.2.narrow.font-size}" }
13
+ "level-2": {
14
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.2.line-height}" },
15
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.2.font-size}" }
21
16
  },
22
- "wide": {
23
- "font-size": { "value": "{amsterdam.typography.text-level.2.wide.font-size}" }
24
- }
25
- },
26
- "3": {
27
- "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
28
- "narrow": {
29
- "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
17
+ "level-3": {
18
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" },
19
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }
30
20
  },
31
- "wide": {
32
- "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
21
+ "level-4": {
22
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
23
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
33
24
  }
34
25
  },
35
- "4": {
36
- "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
37
- "narrow": {
38
- "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" }
26
+ "compact": {
27
+ "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
+ }
34
+ },
35
+ "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
+ }
42
+ },
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
+ }
39
50
  },
40
- "wide": {
41
- "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
51
+ "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
+ }
42
58
  }
43
59
  }
44
60
  }