@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
@@ -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": {},
@@ -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
- }