@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
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/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.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
  }
package/src/components/amsterdam/link.tokens.json CHANGED
@@ -2,12 +2,8 @@
2
2
  "amsterdam": {
3
3
  "link": {
4
4
  "color": { "value": "{amsterdam.link-appearance.color}" },
5
- "font-family": {
6
- "value": "{amsterdam.typography.font-family}"
7
- },
8
- "font-weight": {
9
- "value": "{amsterdam.typography.font-weight.normal}"
10
- },
5
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
6
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
11
7
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
12
8
  "hover": {
13
9
  "color": { "value": "{amsterdam.link-appearance.hover.color}" }
@@ -16,15 +12,9 @@
16
12
  "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
17
13
  "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
18
14
  "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
19
- "font-family": {
20
- "value": "inherit"
21
- },
22
- "font-size": {
23
- "value": "inherit"
24
- },
25
- "line-height": {
26
- "value": "inherit"
27
- },
15
+ "font-family": { "value": "inherit" },
16
+ "font-size": { "value": "inherit" },
17
+ "line-height": { "value": "inherit" },
28
18
  "hover": {
29
19
  "text-decoration-thickness": {
30
20
  "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
@@ -44,12 +34,12 @@
44
34
  "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
45
35
  },
46
36
  "spacious": {
47
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
48
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
37
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
38
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
49
39
  },
50
40
  "compact": {
51
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
52
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
41
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
42
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
53
43
  }
54
44
  },
55
45
  "standalone": {
@@ -63,12 +53,12 @@
63
53
  "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
64
54
  },
65
55
  "spacious": {
66
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
67
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
56
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
57
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
68
58
  },
69
59
  "compact": {
70
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
71
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
60
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
61
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
72
62
  }
73
63
  },
74
64
  "on-background-dark": {
package/src/components/amsterdam/mark.tokens.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "amsterdam": {
3
+ "mark": {
4
+ "background-color": { "value": "var(--amsterdam-color-yellow)" }
5
+ }
6
+ }
7
+ }
package/src/components/amsterdam/ordered-list.tokens.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "gap": { "value": "0.75rem" },
8
8
  "list-style-type": { "value": "decimal" },
9
9
  "spacious": {
10
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
11
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
10
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
12
12
  },
13
13
  "compact": {
14
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
15
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
14
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
16
16
  },
17
17
  "item": {
18
18
  "margin-inline-start": {
package/src/components/amsterdam/page-heading.tokens.json CHANGED
@@ -6,20 +6,12 @@
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
8
  "spacious": {
9
- "font-size": {
10
- "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
11
- },
12
- "line-height": {
13
- "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
14
- }
9
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" }
15
11
  },
16
12
  "compact": {
17
- "font-size": {
18
- "value": "{amsterdam.typography.compact.text-level.0.font-size}"
19
- },
20
- "line-height": {
21
- "value": "{amsterdam.typography.compact.text-level.0.font-size}"
22
- }
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" }
23
15
  }
24
16
  }
25
17
  }
package/src/components/amsterdam/page-menu.tokens.json CHANGED
@@ -13,12 +13,12 @@
13
13
  "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
14
14
  "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
15
15
  "spacious": {
16
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
17
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
16
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
17
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
18
18
  },
19
19
  "compact": {
20
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
21
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
20
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
21
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
22
22
  },
23
23
  "hover": {
24
24
  "color": { "value": "{amsterdam.link-appearance.hover.color}" },
package/src/components/amsterdam/pagination.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.normal}" },
7
7
  "spacious": {
8
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
9
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
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
10
  },
11
11
  "compact": {
12
- "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
13
- "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
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
14
  },
15
15
  "button": {
16
16
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
package/src/components/amsterdam/paragraph.tokens.json CHANGED
@@ -7,30 +7,30 @@
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
8
  "spacious": {
9
9
  "small": {
10
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
11
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
12
- },
13
- "medium": {
14
10
  "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
15
11
  "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
16
12
  },
17
- "large": {
13
+ "medium": {
18
14
  "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
19
15
  "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
16
+ },
17
+ "large": {
18
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
19
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
20
20
  }
21
21
  },
22
22
  "compact": {
23
23
  "small": {
24
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
25
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
26
- },
27
- "medium": {
28
24
  "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
29
25
  "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
30
26
  },
31
- "large": {
27
+ "medium": {
32
28
  "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
33
29
  "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
30
+ },
31
+ "large": {
32
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
33
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
34
34
  }
35
35
  }
36
36
  }
package/src/components/amsterdam/search-field.tokens.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "amsterdam": {
3
+ "search-field": {
4
+ "button": {
5
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
6
+ "color": { "value": "{amsterdam.color.primary-white}" },
7
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
8
+ "hover": {
9
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
10
+ }
11
+ },
12
+ "input": {
13
+ "box-shadow": {
14
+ "value": "inset 0 0 0 1px {amsterdam.color.primary-black}"
15
+ },
16
+ "color": { "value": "{amsterdam.color.primary-black}" },
17
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
18
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
19
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
20
+ "cancel-button": {
21
+ "background-image": {
22
+ "value": "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>\")"
23
+ },
24
+ "color": { "value": "{amsterdam.color.primary-blue}" },
25
+ "height": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
26
+ "width": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
27
+ },
28
+ "hover": {
29
+ "box-shadow": {
30
+ "value": "inset 0 0 0 2px {amsterdam.color.primary-black}"
31
+ }
32
+ },
33
+ "placeholder": {
34
+ "color": { "value": "{amsterdam.color.neutral-grey3}" }
35
+ },
36
+ "compact": {
37
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
38
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
39
+ },
40
+ "spacious": {
41
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
42
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
package/src/components/amsterdam/skip-link.tokens.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "amsterdam": {
3
+ "skip-link": {
4
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
5
+ "color": { "value": "{amsterdam.color.primary-white}" },
6
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
7
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
10
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
11
+ "compact": {
12
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
14
+ },
15
+ "hover": {
16
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
17
+ }
18
+ }
19
+ }
20
+ }
package/src/components/amsterdam/spotlight.tokens.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "amsterdam": {
3
+ "spotlight": {
4
+ "blue": {
5
+ "background-color": { "value": "{amsterdam.color.primary-blue}" }
6
+ },
7
+ "dark-green": {
8
+ "background-color": { "value": "{amsterdam.color.dark-green}" }
9
+ },
10
+ "green": {
11
+ "background-color": { "value": "{amsterdam.color.green}" }
12
+ },
13
+ "light-blue": {
14
+ "background-color": { "value": "{amsterdam.color.blue}" }
15
+ },
16
+ "magenta": {
17
+ "background-color": { "value": "{amsterdam.color.magenta}" }
18
+ },
19
+ "orange": {
20
+ "background-color": { "value": "{amsterdam.color.orange}" }
21
+ },
22
+ "purple": {
23
+ "background-color": { "value": "{amsterdam.color.purple}" }
24
+ },
25
+ "yellow": {
26
+ "background-color": { "value": "{amsterdam.color.yellow}" }
27
+ }
28
+ }
29
+ }
30
+ }
package/src/components/amsterdam/switch.tokens.json CHANGED
@@ -1,43 +1,23 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "switch": {
4
- "font-family": {
5
- "value": "{amsterdam.typography.font-family}"
6
- },
7
- "background-color": {
8
- "value": "{amsterdam.color.neutral-grey3}"
9
- },
10
- "width": {
11
- "value": "3.5rem"
12
- },
4
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
5
+ "background-color": { "value": "{amsterdam.color.neutral-grey3}" },
6
+ "width": { "value": "3.5rem" },
13
7
  "thumb": {
14
- "background-color": {
15
- "value": "{amsterdam.color.primary-white}"
16
- },
17
- "width": {
18
- "value": "1.75rem"
19
- },
20
- "height": {
21
- "value": "1.75rem"
22
- },
8
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
9
+ "width": { "value": "1.75rem" },
10
+ "height": { "value": "1.75rem" },
23
11
  "hover": {
24
- "color": {
25
- "value": "{amsterdam.color.dark-blue}"
26
- }
12
+ "color": { "value": "{amsterdam.color.dark-blue}" }
27
13
  }
28
14
  },
29
15
  "checked": {
30
- "background-color": {
31
- "value": "{amsterdam.color.primary-blue}"
32
- }
33
- },
34
- "outline-offset": {
35
- "value": "{amsterdam.focus.outline-offset}"
16
+ "background-color": { "value": "{amsterdam.color.primary-blue}" }
36
17
  },
18
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
37
19
  "disabled": {
38
- "background-color": {
39
- "value": "{amsterdam.color.neutral-grey2}"
40
- }
20
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" }
41
21
  }
42
22
  }
43
23
  }