@amsterdam/design-system-tokens 0.1.8 → 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 (45) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/_variables.scss +274 -163
  3. package/dist/index.css +274 -163
  4. package/dist/index.d.ts +255 -144
  5. package/dist/index.js +261 -150
  6. package/dist/index.json +260 -149
  7. package/dist/index.tokens.json +455 -297
  8. package/dist/root.css +274 -163
  9. package/dist/tokens.d.ts +442 -284
  10. package/dist/tokens.js +5618 -3116
  11. package/dist/variables.less +274 -163
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/typography.tokens.json +62 -84
  14. package/src/common/amsterdam/border.tokens.json +3 -9
  15. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +8 -9
  18. package/src/components/amsterdam/alert.tokens.json +6 -5
  19. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  20. package/src/components/amsterdam/breadcrumb.tokens.json +21 -34
  21. package/src/components/amsterdam/button.tokens.json +11 -19
  22. package/src/components/amsterdam/card.tokens.json +6 -2
  23. package/src/components/amsterdam/checkbox.tokens.json +27 -73
  24. package/src/components/amsterdam/dialog.tokens.json +6 -5
  25. package/src/components/amsterdam/form-label.tokens.json +6 -5
  26. package/src/components/amsterdam/grid.tokens.json +5 -11
  27. package/src/components/amsterdam/header.tokens.json +7 -0
  28. package/src/components/amsterdam/heading.tokens.json +44 -28
  29. package/src/components/amsterdam/icon.tokens.json +29 -28
  30. package/src/components/amsterdam/link.tokens.json +43 -45
  31. package/src/components/amsterdam/mark.tokens.json +7 -0
  32. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  33. package/src/components/amsterdam/page-heading.tokens.json +9 -8
  34. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  35. package/src/components/amsterdam/pagination.tokens.json +17 -18
  36. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  37. package/src/components/amsterdam/search-field.tokens.json +47 -0
  38. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  39. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  40. package/src/components/amsterdam/switch.tokens.json +10 -30
  41. package/src/components/amsterdam/text-input.tokens.json +36 -0
  42. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  43. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  44. package/src/components/utrecht/button.tokens.json +25 -75
  45. package/src/components/amsterdam/highlight.tokens.json +0 -46
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
  }
package/src/components/amsterdam/text-input.tokens.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "amsterdam": {
3
+ "text-input": {
4
+ "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" },
5
+ "color": { "value": "{amsterdam.color.primary-black}" },
6
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
7
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
9
+ "disabled": {
10
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
11
+ "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.neutral-grey2}" },
12
+ "color": { "value": "{amsterdam.color.neutral-grey2}" }
13
+ },
14
+ "hover": {
15
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-black}" }
16
+ },
17
+ "invalid": {
18
+ "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-red}" },
19
+ "hover": {
20
+ "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-red}" }
21
+ }
22
+ },
23
+ "placeholder": {
24
+ "color": { "value": "{amsterdam.color.neutral-grey3}" }
25
+ },
26
+ "compact": {
27
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
28
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
29
+ },
30
+ "spacious": {
31
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
32
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
33
+ }
34
+ }
35
+ }
36
+ }
package/src/components/amsterdam/top-task-link.tokens.json CHANGED
@@ -2,61 +2,39 @@
2
2
  "amsterdam": {
3
3
  "top-task-link": {
4
4
  "description": {
5
- "color": {
6
- "value": "{amsterdam.color.primary-black}"
7
- },
8
- "font-family": {
9
- "value": "{amsterdam.typography.font-family}"
10
- },
11
- "font-weight": {
12
- "value": "{amsterdam.typography.font-weight.normal}"
13
- },
14
- "line-height": {
15
- "value": "{amsterdam.typography.text-level.7.line-height}"
16
- },
17
- "narrow": {
18
- "font-size": {
19
- "value": "{amsterdam.typography.text-level.7.narrow.font-size}"
20
- }
21
- },
22
- "wide": {
23
- "font-size": {
24
- "value": "{amsterdam.typography.text-level.7.wide.font-size}"
25
- }
5
+ "color": { "value": "{amsterdam.color.primary-black}" },
6
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
7
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
+ "spacious": {
9
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
11
+ },
12
+ "compact": {
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
26
15
  }
27
16
  },
28
17
  "label": {
29
- "color": {
30
- "value": "{amsterdam.color.primary-blue}"
31
- },
32
- "font-family": {
33
- "value": "{amsterdam.typography.font-family}"
34
- },
35
- "font-weight": {
36
- "value": "{amsterdam.typography.font-weight.bold}"
37
- },
18
+ "color": { "value": "{amsterdam.link-appearance.color}" },
19
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
20
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
21
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
22
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
23
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
38
24
  "hover": {
39
- "color": {
40
- "value": "{amsterdam.color.dark-blue}"
41
- }
42
- },
43
- "line-height": {
44
- "value": "{amsterdam.typography.text-level.4.line-height}"
25
+ "color": { "value": "{amsterdam.color.dark-blue}" },
26
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
45
27
  },
46
- "narrow": {
47
- "font-size": {
48
- "value": "{amsterdam.typography.text-level.4.narrow.font-size}"
49
- }
28
+ "spacious": {
29
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
30
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
50
31
  },
51
- "wide": {
52
- "font-size": {
53
- "value": "{amsterdam.typography.text-level.4.wide.font-size}"
54
- }
32
+ "compact": {
33
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
34
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
55
35
  }
56
36
  },
57
- "outline-offset": {
58
- "value": "{amsterdam.focus.outline-offset}"
59
- }
37
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
60
38
  }
61
39
  }
62
40
  }
package/src/components/amsterdam/unordered-list.tokens.json CHANGED
@@ -5,13 +5,14 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
7
  "gap": { "value": "0.75rem" },
8
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
9
8
  "list-style-type": { "value": "'\\2022'" },
10
- "narrow": {
11
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
9
+ "spacious": {
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
- "wide": {
14
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
13
+ "compact": {
14
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
15
16
  },
16
17
  "item": {
17
18
  "margin-inline-start": {
package/src/components/utrecht/button.tokens.json CHANGED
@@ -1,34 +1,18 @@
1
1
  {
2
2
  "utrecht": {
3
3
  "button": {
4
- "background-color": {
5
- "value": "{amsterdam.color.primary-blue}"
6
- },
4
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
7
5
  "border-color": {},
8
6
  "border-radius": {},
9
7
  "border-width": {},
10
- "color": {
11
- "value": "{amsterdam.color.primary-white}"
12
- },
13
- "font-family": {
14
- "value": "{amsterdam.typography.font-family}"
15
- },
8
+ "color": { "value": "{amsterdam.color.primary-white}" },
9
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
16
10
  "font-size": {},
17
- "line-height": {
18
- "value": "{amsterdam.typography.text-level.6.line-height}"
19
- },
20
- "padding-inline-start": {
21
- "value": "{amsterdam.spacing.inset.md}"
22
- },
23
- "padding-inline-end": {
24
- "value": "{amsterdam.spacing.inset.md}"
25
- },
26
- "padding-block-start": {
27
- "value": "{amsterdam.spacing.inset.sm}"
28
- },
29
- "padding-block-end": {
30
- "value": "{amsterdam.spacing.inset.sm}"
31
- },
11
+ "line-height": {},
12
+ "padding-inline-start": { "value": "{amsterdam.spacing.inset.md}" },
13
+ "padding-inline-end": { "value": "{amsterdam.spacing.inset.md}" },
14
+ "padding-block-start": { "value": "{amsterdam.spacing.inset.sm}" },
15
+ "padding-block-end": { "value": "{amsterdam.spacing.inset.sm}" },
32
16
  "margin-inline-start": {},
33
17
  "margin-inline-end": {},
34
18
  "margin-block-start": {},
@@ -37,12 +21,8 @@
37
21
  "gap": {}
38
22
  },
39
23
  "disabled": {
40
- "background-color": {
41
- "value": "{amsterdam.color.neutral-grey2}"
42
- },
43
- "color": {
44
- "value": "{amsterdam.color.primary-white}"
45
- },
24
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
25
+ "color": { "value": "{amsterdam.color.primary-white}" },
46
26
  "border-color": {}
47
27
  },
48
28
  "hover": {
@@ -52,25 +32,17 @@
52
32
  "scale": {}
53
33
  },
54
34
  "primary-action": {
55
- "background-color": {
56
- "value": "{amsterdam.color.primary-blue}"
57
- },
35
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
58
36
  "border-color": {},
59
37
  "border-width": {},
60
- "color": {
61
- "value": "{amsterdam.color.primary-white}"
62
- },
38
+ "color": { "value": "{amsterdam.color.primary-white}" },
63
39
  "disabled": {
64
- "background-color": {
65
- "value": "{amsterdam.color.neutral-grey2}"
66
- },
40
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
67
41
  "color": {},
68
42
  "border-color": {}
69
43
  },
70
44
  "hover": {
71
- "background-color": {
72
- "value": "{amsterdam.color.dark-blue}"
73
- },
45
+ "background-color": { "value": "{amsterdam.color.dark-blue}" },
74
46
  "border-color": {},
75
47
  "color": {}
76
48
  },
@@ -132,28 +104,18 @@
132
104
  }
133
105
  },
134
106
  "secondary-action": {
135
- "background-color": {
136
- "value": "{amsterdam.color.primary-white}"
137
- },
138
- "color": {
139
- "value": "{amsterdam.color.primary-blue}"
140
- },
107
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
108
+ "color": { "value": "{amsterdam.color.primary-blue}" },
141
109
  "border-color": {},
142
110
  "border-width": {},
143
111
  "hover": {
144
112
  "background-color": {},
145
- "color": {
146
- "value": "{amsterdam.color.dark-blue}"
147
- },
113
+ "color": { "value": "{amsterdam.color.dark-blue}" },
148
114
  "border-color": {}
149
115
  },
150
116
  "disabled": {
151
- "background-color": {
152
- "value": "{amsterdam.color.primary-white}"
153
- },
154
- "color": {
155
- "value": "{amsterdam.color.neutral-grey2}"
156
- },
117
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
118
+ "color": { "value": "{amsterdam.color.neutral-grey2}" },
157
119
  "border-color": {}
158
120
  },
159
121
  "danger": {
@@ -209,36 +171,24 @@
209
171
  }
210
172
  },
211
173
  "subtle": {
212
- "background-color": {
213
- "value": "transparent"
214
- },
174
+ "background-color": { "value": "transparent" },
215
175
  "border-color": {},
216
176
  "border-width": {},
217
- "color": {
218
- "value": "{amsterdam.color.primary-blue}"
219
- },
177
+ "color": { "value": "{amsterdam.color.primary-blue}" },
220
178
  "font-weight": {},
221
179
  "hover": {
222
180
  "background-color": {},
223
- "color": {
224
- "value": "{amsterdam.color.dark-blue}"
225
- },
181
+ "color": { "value": "{amsterdam.color.dark-blue}" },
226
182
  "border-color": {}
227
183
  },
228
184
  "focus": {
229
185
  "background-color": {},
230
- "color": {
231
- "value": "{amsterdam.color.dark-blue}"
232
- },
186
+ "color": { "value": "{amsterdam.color.dark-blue}" },
233
187
  "border-color": {}
234
188
  },
235
189
  "disabled": {
236
- "background-color": {
237
- "value": "transparent"
238
- },
239
- "color": {
240
- "value": "{amsterdam.color.neutral-grey2}"
241
- }
190
+ "background-color": { "value": "transparent" },
191
+ "color": { "value": "{amsterdam.color.neutral-grey2}" }
242
192
  },
243
193
  "danger": {
244
194
  "color": {},
package/src/components/amsterdam/highlight.tokens.json DELETED
@@ -1,46 +0,0 @@
1
- {
2
- "amsterdam": {
3
- "highlight": {
4
- "blue": {
5
- "background-color": {
6
- "value": "{amsterdam.color.primary-blue}"
7
- }
8
- },
9
- "dark-green": {
10
- "background-color": {
11
- "value": "{amsterdam.color.dark-green}"
12
- }
13
- },
14
- "green": {
15
- "background-color": {
16
- "value": "{amsterdam.color.green}"
17
- }
18
- },
19
- "light-blue": {
20
- "background-color": {
21
- "value": "{amsterdam.color.blue}"
22
- }
23
- },
24
- "magenta": {
25
- "background-color": {
26
- "value": "{amsterdam.color.magenta}"
27
- }
28
- },
29
- "orange": {
30
- "background-color": {
31
- "value": "{amsterdam.color.orange}"
32
- }
33
- },
34
- "purple": {
35
- "background-color": {
36
- "value": "{amsterdam.color.purple}"
37
- }
38
- },
39
- "yellow": {
40
- "background-color": {
41
- "value": "{amsterdam.color.yellow}"
42
- }
43
- }
44
- }
45
- }
46
- }