@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/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
@@ -6,12 +6,12 @@
6
6
  "font-family": { "value": "{amsterdam.typography.font-family}" },
7
7
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
8
  "spacious": {
9
- "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
10
- "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
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
11
  },
12
12
  "compact": {
13
- "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
14
- "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
15
15
  }
16
16
  },
17
17
  "label": {
package/src/components/amsterdam/unordered-list.tokens.json CHANGED
@@ -7,12 +7,12 @@
7
7
  "gap": { "value": "0.75rem" },
8
8
  "list-style-type": { "value": "'\\2022'" },
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/utrecht/button.tokens.json CHANGED
@@ -1,32 +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
11
  "line-height": {},
18
- "padding-inline-start": {
19
- "value": "{amsterdam.spacing.inset.md}"
20
- },
21
- "padding-inline-end": {
22
- "value": "{amsterdam.spacing.inset.md}"
23
- },
24
- "padding-block-start": {
25
- "value": "{amsterdam.spacing.inset.sm}"
26
- },
27
- "padding-block-end": {
28
- "value": "{amsterdam.spacing.inset.sm}"
29
- },
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}" },
30
16
  "margin-inline-start": {},
31
17
  "margin-inline-end": {},
32
18
  "margin-block-start": {},
@@ -35,12 +21,8 @@
35
21
  "gap": {}
36
22
  },
37
23
  "disabled": {
38
- "background-color": {
39
- "value": "{amsterdam.color.neutral-grey2}"
40
- },
41
- "color": {
42
- "value": "{amsterdam.color.primary-white}"
43
- },
24
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
25
+ "color": { "value": "{amsterdam.color.primary-white}" },
44
26
  "border-color": {}
45
27
  },
46
28
  "hover": {
@@ -50,25 +32,17 @@
50
32
  "scale": {}
51
33
  },
52
34
  "primary-action": {
53
- "background-color": {
54
- "value": "{amsterdam.color.primary-blue}"
55
- },
35
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
56
36
  "border-color": {},
57
37
  "border-width": {},
58
- "color": {
59
- "value": "{amsterdam.color.primary-white}"
60
- },
38
+ "color": { "value": "{amsterdam.color.primary-white}" },
61
39
  "disabled": {
62
- "background-color": {
63
- "value": "{amsterdam.color.neutral-grey2}"
64
- },
40
+ "background-color": { "value": "{amsterdam.color.neutral-grey2}" },
65
41
  "color": {},
66
42
  "border-color": {}
67
43
  },
68
44
  "hover": {
69
- "background-color": {
70
- "value": "{amsterdam.color.dark-blue}"
71
- },
45
+ "background-color": { "value": "{amsterdam.color.dark-blue}" },
72
46
  "border-color": {},
73
47
  "color": {}
74
48
  },
@@ -130,28 +104,18 @@
130
104
  }
131
105
  },
132
106
  "secondary-action": {
133
- "background-color": {
134
- "value": "{amsterdam.color.primary-white}"
135
- },
136
- "color": {
137
- "value": "{amsterdam.color.primary-blue}"
138
- },
107
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
108
+ "color": { "value": "{amsterdam.color.primary-blue}" },
139
109
  "border-color": {},
140
110
  "border-width": {},
141
111
  "hover": {
142
112
  "background-color": {},
143
- "color": {
144
- "value": "{amsterdam.color.dark-blue}"
145
- },
113
+ "color": { "value": "{amsterdam.color.dark-blue}" },
146
114
  "border-color": {}
147
115
  },
148
116
  "disabled": {
149
- "background-color": {
150
- "value": "{amsterdam.color.primary-white}"
151
- },
152
- "color": {
153
- "value": "{amsterdam.color.neutral-grey2}"
154
- },
117
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
118
+ "color": { "value": "{amsterdam.color.neutral-grey2}" },
155
119
  "border-color": {}
156
120
  },
157
121
  "danger": {
@@ -207,36 +171,24 @@
207
171
  }
208
172
  },
209
173
  "subtle": {
210
- "background-color": {
211
- "value": "transparent"
212
- },
174
+ "background-color": { "value": "transparent" },
213
175
  "border-color": {},
214
176
  "border-width": {},
215
- "color": {
216
- "value": "{amsterdam.color.primary-blue}"
217
- },
177
+ "color": { "value": "{amsterdam.color.primary-blue}" },
218
178
  "font-weight": {},
219
179
  "hover": {
220
180
  "background-color": {},
221
- "color": {
222
- "value": "{amsterdam.color.dark-blue}"
223
- },
181
+ "color": { "value": "{amsterdam.color.dark-blue}" },
224
182
  "border-color": {}
225
183
  },
226
184
  "focus": {
227
185
  "background-color": {},
228
- "color": {
229
- "value": "{amsterdam.color.dark-blue}"
230
- },
186
+ "color": { "value": "{amsterdam.color.dark-blue}" },
231
187
  "border-color": {}
232
188
  },
233
189
  "disabled": {
234
- "background-color": {
235
- "value": "transparent"
236
- },
237
- "color": {
238
- "value": "{amsterdam.color.neutral-grey2}"
239
- }
190
+ "background-color": { "value": "transparent" },
191
+ "color": { "value": "{amsterdam.color.neutral-grey2}" }
240
192
  },
241
193
  "danger": {
242
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
- }