@amsterdam/design-system-tokens 3.3.0 → 4.0.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 (109) hide show
  1. package/CHANGELOG.md +61 -3
  2. package/README.md +131 -22
  3. package/build.js +11 -1
  4. package/dist/compact.css +9 -2
  5. package/dist/compact.d.ts +21 -6
  6. package/dist/compact.json +33 -18
  7. package/dist/compact.mjs +21 -13
  8. package/dist/compact.scss +9 -2
  9. package/dist/compact.theme.css +9 -2
  10. package/dist/index.css +177 -165
  11. package/dist/index.d.ts +250 -226
  12. package/dist/index.json +345 -321
  13. package/dist/index.mjs +285 -267
  14. package/dist/index.scss +177 -165
  15. package/dist/index.theme.css +177 -165
  16. package/package.json +2 -2
  17. package/src/brand/ams/aspect-ratio.tokens.json +24 -6
  18. package/src/brand/ams/border.compact.tokens.json +20 -0
  19. package/src/brand/ams/border.tokens.json +25 -0
  20. package/src/brand/ams/color.compact.tokens.json +15 -0
  21. package/src/brand/ams/color.tokens.json +37 -49
  22. package/src/brand/ams/cursor.tokens.json +9 -2
  23. package/src/brand/ams/focus.tokens.json +1 -0
  24. package/src/brand/ams/space.compact.tokens.json +16 -4
  25. package/src/brand/ams/space.tokens.json +31 -6
  26. package/src/brand/ams/typography.compact.tokens.json +36 -27
  27. package/src/brand/ams/typography.tokens.json +60 -32
  28. package/src/common/ams/inputs.tokens.json +41 -19
  29. package/src/common/ams/links.tokens.json +35 -10
  30. package/src/components/ams/accordion.tokens.json +18 -11
  31. package/src/components/ams/action-group.tokens.json +2 -2
  32. package/src/components/ams/alert.tokens.json +38 -20
  33. package/src/components/ams/avatar.tokens.json +79 -29
  34. package/src/components/ams/badge.tokens.json +60 -23
  35. package/src/components/ams/blockquote.tokens.json +14 -5
  36. package/src/components/ams/body.compact.tokens.json +12 -0
  37. package/src/components/ams/body.tokens.json +12 -0
  38. package/src/components/ams/breadcrumb.tokens.json +36 -15
  39. package/src/components/ams/button.tokens.json +74 -33
  40. package/src/components/ams/call-to-action-link.tokens.json +29 -16
  41. package/src/components/ams/card.tokens.json +30 -17
  42. package/src/components/ams/character-count.tokens.json +14 -5
  43. package/src/components/ams/checkbox.tokens.json +106 -39
  44. package/src/components/ams/column.tokens.json +10 -10
  45. package/src/components/ams/date-input.tokens.json +56 -23
  46. package/src/components/ams/description-list.tokens.json +101 -23
  47. package/src/components/ams/dialog.tokens.json +104 -28
  48. package/src/components/ams/error-message.tokens.json +13 -6
  49. package/src/components/ams/field-set.tokens.json +40 -17
  50. package/src/components/ams/field.tokens.json +18 -7
  51. package/src/components/ams/figure.tokens.json +16 -7
  52. package/src/components/ams/file-input.tokens.json +69 -30
  53. package/src/components/ams/file-list.tokens.json +20 -11
  54. package/src/components/ams/grid.compact.tokens.json +24 -2
  55. package/src/components/ams/grid.tokens.json +77 -24
  56. package/src/components/ams/heading.tokens.json +38 -36
  57. package/src/components/ams/hint.tokens.json +6 -2
  58. package/src/components/ams/icon-button.tokens.json +46 -16
  59. package/src/components/ams/icon.tokens.json +19 -23
  60. package/src/components/ams/image-slider.tokens.json +28 -16
  61. package/src/components/ams/image.tokens.json +4 -1
  62. package/src/components/ams/invalid-form-alert.tokens.json +2 -2
  63. package/src/components/ams/label.tokens.json +18 -6
  64. package/src/components/ams/link-list.tokens.json +50 -22
  65. package/src/components/ams/link.tokens.json +38 -25
  66. package/src/components/ams/logo.tokens.json +6 -2
  67. package/src/components/ams/mark.tokens.json +3 -1
  68. package/src/components/ams/menu.tokens.json +81 -28
  69. package/src/components/ams/ordered-list.tokens.json +39 -25
  70. package/src/components/ams/page-footer.tokens.json +70 -26
  71. package/src/components/ams/page-header.compact.tokens.json +2 -1
  72. package/src/components/ams/page-header.tokens.json +128 -59
  73. package/src/components/ams/page.compact.tokens.json +12 -0
  74. package/src/components/ams/page.tokens.json +5 -3
  75. package/src/components/ams/pagination.tokens.json +37 -17
  76. package/src/components/ams/paragraph.tokens.json +22 -8
  77. package/src/components/ams/password-input.tokens.json +47 -21
  78. package/src/components/ams/progress-list.tokens.json +194 -52
  79. package/src/components/ams/radio.tokens.json +97 -36
  80. package/src/components/ams/row.tokens.json +10 -10
  81. package/src/components/ams/search-field.tokens.json +57 -24
  82. package/src/components/ams/select.tokens.json +63 -23
  83. package/src/components/ams/skip-link.tokens.json +23 -12
  84. package/src/components/ams/spotlight.tokens.json +21 -7
  85. package/src/components/ams/standalone-link.tokens.json +44 -18
  86. package/src/components/ams/switch.tokens.json +40 -10
  87. package/src/components/ams/tab-navigation.tokens.json +205 -0
  88. package/src/components/ams/table-of-contents.tokens.json +38 -20
  89. package/src/components/ams/table.tokens.json +29 -10
  90. package/src/components/ams/tabs.tokens.json +39 -20
  91. package/src/components/ams/text-area.tokens.json +49 -23
  92. package/src/components/ams/text-input.tokens.json +47 -19
  93. package/src/components/ams/time-input.tokens.json +56 -21
  94. package/src/components/ams/unordered-list.tokens.json +37 -25
  95. package/style-dictionary/transforms/dtcg-font-family.js +32 -0
  96. package/src/brand/ams/color.deprecated.tokens.json +0 -13
  97. package/src/brand/ams/typography.deprecated.compact.tokens.json +0 -26
  98. package/src/brand/ams/typography.deprecated.tokens.json +0 -40
  99. package/src/components/ams/accordion.deprecated.tokens.json +0 -39
  100. package/src/components/ams/checkbox.deprecated.tokens.json +0 -59
  101. package/src/components/ams/date-input.deprecated.tokens.json +0 -38
  102. package/src/components/ams/field-set.deprecated.tokens.json +0 -16
  103. package/src/components/ams/field.deprecated.tokens.json +0 -14
  104. package/src/components/ams/icon.deprecated.tokens.json +0 -22
  105. package/src/components/ams/menu.deprecated.tokens.json +0 -36
  106. package/src/components/ams/page-heading.deprecated.tokens.json +0 -46
  107. package/src/components/ams/standalone-link.deprecated.tokens.json +0 -38
  108. package/src/components/ams/table-of-contents.deprecated.tokens.json +0 -24
  109. package/src/components/ams/time-input.deprecated.tokens.json +0 -38
package/src/components/ams/radio.tokens.json CHANGED
@@ -3,14 +3,21 @@
3
3
  "radio": {
4
4
  "color": {
5
5
  "$value": "{ams.color.text.default}",
6
- "$type": "color"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
7
9
  },
8
10
  "cursor": {
9
- "$value": "{ams.cursor.interactive}"
11
+ "$value": "{ams.cursor.interactive}",
12
+ "$extensions": {
13
+ "nl.amsterdam.type": "cursor"
14
+ }
10
15
  },
11
16
  "font-family": {
12
17
  "$value": "{ams.typography.font-family}",
13
- "$type": "fontFamily"
18
+ "$extensions": {
19
+ "nl.amsterdam.type": "fontFamily"
20
+ }
14
21
  },
15
22
  "font-size": {
16
23
  "$value": "{ams.typography.body-text.font-size}",
@@ -20,77 +27,97 @@
20
27
  },
21
28
  "font-weight": {
22
29
  "$value": "{ams.typography.body-text.font-weight}",
23
- "$type": "fontWeight"
30
+ "$extensions": {
31
+ "nl.amsterdam.type": "fontWeight"
32
+ }
24
33
  },
25
34
  "gap": {
26
35
  "$value": "{ams.space.s}",
27
- "$type": "dimension",
28
36
  "$extensions": {
29
- "nl.amsterdam.subtype": "space"
37
+ "nl.amsterdam.subtype": "space",
38
+ "nl.amsterdam.type": "dimension"
30
39
  }
31
40
  },
32
41
  "line-height": {
33
42
  "$value": "{ams.typography.body-text.line-height}",
34
43
  "$extensions": {
35
- "nl.amsterdam.type": "lineHeight"
44
+ "nl.amsterdam.subtype": "lineHeight",
45
+ "nl.amsterdam.type": "number"
36
46
  }
37
47
  },
38
48
  "outline-offset": {
39
49
  "$value": "{ams.focus.outline-offset}",
40
- "$type": "dimension",
41
50
  "$extensions": {
42
- "nl.amsterdam.subtype": "space"
51
+ "nl.amsterdam.subtype": "space",
52
+ "nl.amsterdam.type": "dimension"
43
53
  }
44
54
  },
45
55
  "text-decoration-thickness": {
46
56
  "$value": "{ams.links.text-decoration-thickness}",
47
- "$type": "dimension"
57
+ "$extensions": {
58
+ "nl.amsterdam.subtype": "space",
59
+ "nl.amsterdam.type": "dimension"
60
+ }
48
61
  },
49
62
  "text-underline-offset": {
50
63
  "$value": "{ams.links.text-underline-offset}",
51
- "$type": "dimension",
52
64
  "$extensions": {
53
- "nl.amsterdam.subtype": "space"
65
+ "nl.amsterdam.subtype": "space",
66
+ "nl.amsterdam.type": "dimension"
54
67
  }
55
68
  },
56
69
  "checked-indicator": {
57
70
  "fill": {
58
71
  "$value": "{ams.color.interactive.default}",
59
- "$type": "color"
72
+ "$extensions": {
73
+ "nl.amsterdam.type": "color"
74
+ }
60
75
  },
61
76
  "disabled": {
62
77
  "fill": {
63
78
  "$value": "{ams.color.interactive.disabled}",
64
- "$type": "color"
79
+ "$extensions": {
80
+ "nl.amsterdam.type": "color"
81
+ }
65
82
  }
66
83
  },
67
84
  "disabled-invalid": {
68
85
  "fill": {
69
86
  "$value": "{ams.color.interactive.disabled}",
70
- "$type": "color"
87
+ "$extensions": {
88
+ "nl.amsterdam.type": "color"
89
+ }
71
90
  },
72
91
  "hover": {
73
92
  "fill": {
74
93
  "$value": "{ams.color.interactive.disabled}",
75
- "$type": "color"
94
+ "$extensions": {
95
+ "nl.amsterdam.type": "color"
96
+ }
76
97
  }
77
98
  }
78
99
  },
79
100
  "hover": {
80
101
  "fill": {
81
102
  "$value": "{ams.color.interactive.hover}",
82
- "$type": "color"
103
+ "$extensions": {
104
+ "nl.amsterdam.type": "color"
105
+ }
83
106
  }
84
107
  },
85
108
  "invalid": {
86
109
  "fill": {
87
110
  "$value": "{ams.color.interactive.invalid.default}",
88
- "$type": "color"
111
+ "$extensions": {
112
+ "nl.amsterdam.type": "color"
113
+ }
89
114
  },
90
115
  "hover": {
91
116
  "fill": {
92
117
  "$value": "{ams.color.interactive.invalid.hover}",
93
- "$type": "color"
118
+ "$extensions": {
119
+ "nl.amsterdam.type": "color"
120
+ }
94
121
  }
95
122
  }
96
123
  }
@@ -99,60 +126,80 @@
99
126
  "hover": {
100
127
  "stroke": {
101
128
  "$value": "{ams.color.interactive.hover}",
102
- "$type": "color"
129
+ "$extensions": {
130
+ "nl.amsterdam.type": "color"
131
+ }
103
132
  }
104
133
  },
105
134
  "invalid": {
106
135
  "hover": {
107
136
  "stroke": {
108
137
  "$value": "{ams.color.interactive.invalid.hover}",
109
- "$type": "color"
138
+ "$extensions": {
139
+ "nl.amsterdam.type": "color"
140
+ }
110
141
  }
111
142
  }
112
143
  }
113
144
  },
114
145
  "circle": {
115
146
  "fill": {
116
- "$value": "{ams.color.background}",
117
- "$type": "color"
147
+ "$value": "{ams.color.background.default}",
148
+ "$extensions": {
149
+ "nl.amsterdam.type": "color"
150
+ }
118
151
  },
119
152
  "stroke": {
120
153
  "$value": "{ams.color.interactive.default}",
121
- "$type": "color"
154
+ "$extensions": {
155
+ "nl.amsterdam.type": "color"
156
+ }
122
157
  },
123
158
  "disabled": {
124
159
  "stroke": {
125
160
  "$value": "{ams.color.interactive.disabled}",
126
- "$type": "color"
161
+ "$extensions": {
162
+ "nl.amsterdam.type": "color"
163
+ }
127
164
  }
128
165
  },
129
166
  "disabled-invalid": {
130
167
  "stroke": {
131
168
  "$value": "{ams.color.interactive.disabled}",
132
- "$type": "color"
169
+ "$extensions": {
170
+ "nl.amsterdam.type": "color"
171
+ }
133
172
  },
134
173
  "hover": {
135
174
  "stroke": {
136
175
  "$value": "{ams.color.interactive.disabled}",
137
- "$type": "color"
176
+ "$extensions": {
177
+ "nl.amsterdam.type": "color"
178
+ }
138
179
  }
139
180
  }
140
181
  },
141
182
  "hover": {
142
183
  "stroke": {
143
184
  "$value": "{ams.color.interactive.hover}",
144
- "$type": "color"
185
+ "$extensions": {
186
+ "nl.amsterdam.type": "color"
187
+ }
145
188
  }
146
189
  },
147
190
  "invalid": {
148
191
  "stroke": {
149
192
  "$value": "{ams.color.interactive.invalid.default}",
150
- "$type": "color"
193
+ "$extensions": {
194
+ "nl.amsterdam.type": "color"
195
+ }
151
196
  },
152
197
  "hover": {
153
198
  "stroke": {
154
199
  "$value": "{ams.color.interactive.invalid.hover}",
155
- "$type": "color"
200
+ "$extensions": {
201
+ "nl.amsterdam.type": "color"
202
+ }
156
203
  }
157
204
  }
158
205
  }
@@ -160,29 +207,43 @@
160
207
  "disabled": {
161
208
  "color": {
162
209
  "$value": "{ams.color.interactive.disabled}",
163
- "$type": "color"
210
+ "$extensions": {
211
+ "nl.amsterdam.type": "color"
212
+ }
164
213
  },
165
214
  "cursor": {
166
- "$value": "{ams.cursor.disabled}"
215
+ "$value": "{ams.cursor.disabled}",
216
+ "$extensions": {
217
+ "nl.amsterdam.type": "cursor"
218
+ }
167
219
  }
168
220
  },
169
221
  "hover": {
170
222
  "color": {
171
223
  "$value": "{ams.color.interactive.hover}",
172
- "$type": "color"
224
+ "$extensions": {
225
+ "nl.amsterdam.type": "color"
226
+ }
173
227
  },
174
228
  "text-decoration-line": {
175
- "$value": "{ams.links.subtle.hover.text-decoration-line}"
229
+ "$value": "{ams.links.subtle.hover.text-decoration-line}",
230
+ "$extensions": {
231
+ "nl.amsterdam.type": "textDecorationLine"
232
+ }
176
233
  }
177
234
  },
178
235
  "icon-container": {
179
236
  "block-size": {
180
237
  "$value": "calc({ams.radio.font-size} * {ams.radio.line-height})",
181
- "$type": "dimension"
238
+ "$extensions": {
239
+ "nl.amsterdam.type": "dimension"
240
+ }
182
241
  },
183
242
  "inline-size": {
184
243
  "$value": "{ams.radio.font-size}",
185
- "$type": "dimension"
244
+ "$extensions": {
245
+ "nl.amsterdam.type": "dimension"
246
+ }
186
247
  }
187
248
  }
188
249
  }
package/src/components/ams/row.tokens.json CHANGED
@@ -4,37 +4,37 @@
4
4
  "gap": {
5
5
  "x-small": {
6
6
  "$value": "{ams.space.xs}",
7
- "$type": "dimension",
8
7
  "$extensions": {
9
- "nl.amsterdam.subtype": "space"
8
+ "nl.amsterdam.subtype": "space",
9
+ "nl.amsterdam.type": "dimension"
10
10
  }
11
11
  },
12
12
  "small": {
13
13
  "$value": "{ams.space.s}",
14
- "$type": "dimension",
15
14
  "$extensions": {
16
- "nl.amsterdam.subtype": "space"
15
+ "nl.amsterdam.subtype": "space",
16
+ "nl.amsterdam.type": "dimension"
17
17
  }
18
18
  },
19
19
  "medium": {
20
20
  "$value": "{ams.space.m}",
21
- "$type": "dimension",
22
21
  "$extensions": {
23
- "nl.amsterdam.subtype": "space"
22
+ "nl.amsterdam.subtype": "space",
23
+ "nl.amsterdam.type": "dimension"
24
24
  }
25
25
  },
26
26
  "large": {
27
27
  "$value": "{ams.space.l}",
28
- "$type": "dimension",
29
28
  "$extensions": {
30
- "nl.amsterdam.subtype": "space"
29
+ "nl.amsterdam.subtype": "space",
30
+ "nl.amsterdam.type": "dimension"
31
31
  }
32
32
  },
33
33
  "x-large": {
34
34
  "$value": "{ams.space.xl}",
35
- "$type": "dimension",
36
35
  "$extensions": {
37
- "nl.amsterdam.subtype": "space"
36
+ "nl.amsterdam.subtype": "space",
37
+ "nl.amsterdam.type": "dimension"
38
38
  }
39
39
  }
40
40
  }
package/src/components/ams/search-field.tokens.json CHANGED
@@ -4,11 +4,15 @@
4
4
  "input": {
5
5
  "background-color": {
6
6
  "$value": "{ams.inputs.background-color}",
7
- "$type": "color"
7
+ "$extensions": {
8
+ "nl.amsterdam.type": "color"
9
+ }
8
10
  },
9
11
  "border-color": {
10
12
  "$value": "{ams.inputs.border-color}",
11
- "$type": "color"
13
+ "$extensions": {
14
+ "nl.amsterdam.type": "color"
15
+ }
12
16
  },
13
17
  "border-style": {
14
18
  "$value": "{ams.inputs.border-style}",
@@ -24,11 +28,15 @@
24
28
  },
25
29
  "color": {
26
30
  "$value": "{ams.inputs.color}",
27
- "$type": "color"
31
+ "$extensions": {
32
+ "nl.amsterdam.type": "color"
33
+ }
28
34
  },
29
35
  "font-family": {
30
36
  "$value": "{ams.inputs.font-family}",
31
- "$type": "fontFamily"
37
+ "$extensions": {
38
+ "nl.amsterdam.type": "fontFamily"
39
+ }
32
40
  },
33
41
  "font-size": {
34
42
  "$value": "{ams.inputs.font-size}",
@@ -38,81 +46,106 @@
38
46
  },
39
47
  "font-weight": {
40
48
  "$value": "{ams.inputs.font-weight}",
41
- "$type": "fontWeight"
49
+ "$extensions": {
50
+ "nl.amsterdam.type": "fontWeight"
51
+ }
42
52
  },
43
53
  "line-height": {
44
54
  "$value": "{ams.inputs.line-height}",
45
55
  "$extensions": {
46
- "nl.amsterdam.type": "lineHeight"
56
+ "nl.amsterdam.subtype": "lineHeight",
57
+ "nl.amsterdam.type": "number"
47
58
  }
48
59
  },
49
60
  "outline-offset": {
50
61
  "$value": "{ams.inputs.outline-offset}",
51
- "$type": "dimension",
52
62
  "$extensions": {
53
- "nl.amsterdam.subtype": "space"
63
+ "nl.amsterdam.subtype": "space",
64
+ "nl.amsterdam.type": "dimension"
54
65
  }
55
66
  },
56
67
  "padding-block": {
57
68
  "$value": "{ams.inputs.padding-block}",
58
- "$type": "dimension",
59
69
  "$extensions": {
60
- "nl.amsterdam.subtype": "space"
70
+ "nl.amsterdam.subtype": "space",
71
+ "nl.amsterdam.type": "dimension"
61
72
  }
62
73
  },
63
74
  "padding-inline": {
64
75
  "$value": "{ams.inputs.padding-inline}",
65
- "$type": "dimension",
66
76
  "$extensions": {
67
- "nl.amsterdam.subtype": "space"
77
+ "nl.amsterdam.subtype": "space",
78
+ "nl.amsterdam.type": "dimension"
68
79
  }
69
80
  },
70
81
  "hover": {
71
82
  "box-shadow": {
72
- "$type": "shadow",
73
- "$value": "{ams.inputs.hover.box-shadow}"
83
+ "$value": "{ams.inputs.hover.box-shadow}",
84
+ "$extensions": {
85
+ "nl.amsterdam.type": "shadow"
86
+ }
74
87
  }
75
88
  },
76
89
  "invalid": {
77
90
  "border-color": {
78
91
  "$value": "{ams.inputs.invalid.border-color}",
79
- "$type": "color"
92
+ "$extensions": {
93
+ "nl.amsterdam.type": "color"
94
+ }
80
95
  },
81
96
  "hover": {
82
97
  "border-color": {
83
98
  "$value": "{ams.inputs.invalid.hover.border-color}",
84
- "$type": "color"
99
+ "$extensions": {
100
+ "nl.amsterdam.type": "color"
101
+ }
85
102
  },
86
103
  "box-shadow": {
87
- "$type": "shadow",
88
- "$value": "{ams.inputs.invalid.hover.box-shadow}"
104
+ "$value": "{ams.inputs.invalid.hover.box-shadow}",
105
+ "$extensions": {
106
+ "nl.amsterdam.type": "shadow"
107
+ }
89
108
  }
90
109
  }
91
110
  },
92
111
  "cancel-button": {
93
112
  "background-image": {
94
- "$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>\")"
113
+ "$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>\")",
114
+ "$extensions": {
115
+ "nl.amsterdam.type": "backgroundImage"
116
+ }
95
117
  },
96
118
  "block-size": {
97
119
  "$value": "{ams.typography.body-text.font-size}",
98
- "$type": "dimension"
120
+ "$extensions": {
121
+ "nl.amsterdam.type": "dimension"
122
+ }
99
123
  },
100
124
  "color": {
101
125
  "$value": "{ams.color.interactive.default}",
102
- "$type": "color"
126
+ "$extensions": {
127
+ "nl.amsterdam.type": "color"
128
+ }
103
129
  },
104
130
  "cursor": {
105
- "$value": "{ams.cursor.interactive}"
131
+ "$value": "{ams.cursor.interactive}",
132
+ "$extensions": {
133
+ "nl.amsterdam.type": "cursor"
134
+ }
106
135
  },
107
136
  "inline-size": {
108
137
  "$value": "{ams.typography.body-text.font-size}",
109
- "$type": "dimension"
138
+ "$extensions": {
139
+ "nl.amsterdam.type": "dimension"
140
+ }
110
141
  }
111
142
  },
112
143
  "placeholder": {
113
144
  "color": {
114
145
  "$value": "{ams.inputs.placeholder.color}",
115
- "$type": "color"
146
+ "$extensions": {
147
+ "nl.amsterdam.type": "color"
148
+ }
116
149
  }
117
150
  }
118
151
  }
package/src/components/ams/select.tokens.json CHANGED
@@ -3,17 +3,27 @@
3
3
  "select": {
4
4
  "background-color": {
5
5
  "$value": "{ams.inputs.background-color}",
6
- "$type": "color"
6
+ "$extensions": {
7
+ "nl.amsterdam.type": "color"
8
+ }
7
9
  },
8
10
  "background-image": {
9
- "$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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
11
+ "$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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
12
+ "$extensions": {
13
+ "nl.amsterdam.type": "backgroundImage"
14
+ }
10
15
  },
11
16
  "background-position": {
12
- "$value": "right {ams.space.m} center"
17
+ "$value": "right {ams.space.m} center",
18
+ "$extensions": {
19
+ "nl.amsterdam.type": "backgroundPosition"
20
+ }
13
21
  },
14
22
  "border-color": {
15
23
  "$value": "{ams.inputs.border-color}",
16
- "$type": "color"
24
+ "$extensions": {
25
+ "nl.amsterdam.type": "color"
26
+ }
17
27
  },
18
28
  "border-style": {
19
29
  "$value": "{ams.inputs.border-style}",
@@ -29,11 +39,15 @@
29
39
  },
30
40
  "color": {
31
41
  "$value": "{ams.inputs.color}",
32
- "$type": "color"
42
+ "$extensions": {
43
+ "nl.amsterdam.type": "color"
44
+ }
33
45
  },
34
46
  "font-family": {
35
47
  "$value": "{ams.inputs.font-family}",
36
- "$type": "fontFamily"
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "fontFamily"
50
+ }
37
51
  },
38
52
  "font-size": {
39
53
  "$value": "{ams.inputs.font-size}",
@@ -43,67 +57,91 @@
43
57
  },
44
58
  "font-weight": {
45
59
  "$value": "{ams.inputs.font-weight}",
46
- "$type": "fontWeight"
60
+ "$extensions": {
61
+ "nl.amsterdam.type": "fontWeight"
62
+ }
47
63
  },
48
64
  "line-height": {
49
65
  "$value": "{ams.inputs.line-height}",
50
66
  "$extensions": {
51
- "nl.amsterdam.type": "lineHeight"
67
+ "nl.amsterdam.subtype": "lineHeight",
68
+ "nl.amsterdam.type": "number"
52
69
  }
53
70
  },
54
71
  "outline-offset": {
55
72
  "$value": "{ams.inputs.outline-offset}",
56
- "$type": "dimension",
57
73
  "$extensions": {
58
- "nl.amsterdam.subtype": "space"
74
+ "nl.amsterdam.subtype": "space",
75
+ "nl.amsterdam.type": "dimension"
59
76
  }
60
77
  },
61
78
  "padding-block": {
62
79
  "$value": "{ams.inputs.padding-block}",
63
- "$type": "dimension",
64
80
  "$extensions": {
65
- "nl.amsterdam.subtype": "space"
81
+ "nl.amsterdam.subtype": "space",
82
+ "nl.amsterdam.type": "dimension"
66
83
  }
67
84
  },
68
85
  "padding-inline": {
69
86
  "$value": "{ams.inputs.padding-inline} calc(2 * {ams.inputs.padding-inline} + 1em)",
70
- "$type": "dimension",
71
87
  "$extensions": {
72
- "nl.amsterdam.subtype": "space"
88
+ "nl.amsterdam.subtype": "space",
89
+ "nl.amsterdam.type": "dimension"
73
90
  }
74
91
  },
75
92
  "disabled": {
76
93
  "background-image": {
77
- "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
94
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
95
+ "$extensions": {
96
+ "nl.amsterdam.type": "backgroundImage"
97
+ }
78
98
  },
79
99
  "color": {
80
100
  "$value": "{ams.inputs.disabled.color}",
81
- "$type": "color"
101
+ "$extensions": {
102
+ "nl.amsterdam.type": "color"
103
+ }
82
104
  },
83
105
  "cursor": {
84
- "$value": "{ams.cursor.disabled}"
106
+ "$value": "{ams.cursor.disabled}",
107
+ "$extensions": {
108
+ "nl.amsterdam.type": "cursor"
109
+ }
85
110
  }
86
111
  },
87
112
  "hover": {
88
113
  "box-shadow": {
89
- "$value": "{ams.inputs.hover.box-shadow}"
114
+ "$value": "{ams.inputs.hover.box-shadow}",
115
+ "$extensions": {
116
+ "nl.amsterdam.type": "shadow"
117
+ }
90
118
  },
91
119
  "background-image": {
92
- "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
120
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")",
121
+ "$extensions": {
122
+ "nl.amsterdam.type": "backgroundImage"
123
+ }
93
124
  }
94
125
  },
95
126
  "invalid": {
96
127
  "border-color": {
97
128
  "$value": "{ams.inputs.invalid.border-color}",
98
- "$type": "color"
129
+ "$extensions": {
130
+ "nl.amsterdam.type": "color"
131
+ }
99
132
  },
100
133
  "hover": {
101
134
  "border-color": {
102
135
  "$value": "{ams.inputs.invalid.hover.border-color}",
103
- "$type": "color"
136
+ "$extensions": {
137
+ "nl.amsterdam.type": "color"
138
+ }
104
139
  },
105
140
  "box-shadow": {
106
- "$value": "{ams.inputs.invalid.hover.box-shadow}"
141
+ "$value": "{ams.inputs.invalid.hover.box-shadow}",
142
+ "$extensions": {
143
+ "nl.amsterdam.type": "shadow"
144
+ }
107
145
  }
108
146
  }
109
147
  },
@@ -111,7 +149,9 @@
111
149
  "disabled": {
112
150
  "color": {
113
151
  "$value": "{ams.color.interactive.disabled}",
114
- "$type": "color"
152
+ "$extensions": {
153
+ "nl.amsterdam.type": "color"
154
+ }
115
155
  }
116
156
  }
117
157
  }