@amsterdam/design-system-tokens 3.1.0 → 3.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 (107) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +60 -47
  10. package/dist/index.d.ts +24 -3
  11. package/dist/index.json +44 -23
  12. package/dist/index.mjs +91 -66
  13. package/dist/index.scss +60 -47
  14. package/dist/index.theme.css +60 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +104 -26
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -22
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +10 -10
  47. package/src/components/ams/date-input.tokens.json +93 -21
  48. package/src/components/ams/description-list.tokens.json +96 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +172 -55
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +10 -10
  101. package/src/components/ams/time-input.tokens.json +91 -21
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
package/src/components/ams/progress-list.tokens.json CHANGED
@@ -5,10 +5,12 @@
5
5
  "step": {
6
6
  "marker": {
7
7
  "block-size": {
8
- "value": "calc({ams.typography.heading.2.font-size} * {ams.typography.heading.2.line-height})"
8
+ "$value": "calc({ams.typography.heading.2.font-size} * {ams.typography.heading.2.line-height})",
9
+ "$type": "dimension"
9
10
  },
10
11
  "margin-block-start": {
11
- "value": "calc(({ams.typography.heading.2.line-height} * {ams.typography.heading.2.font-size}) / 2)"
12
+ "$value": "calc(({ams.typography.heading.2.line-height} * {ams.typography.heading.2.font-size}) / 2)",
13
+ "$type": "dimension"
12
14
  }
13
15
  }
14
16
  }
@@ -17,10 +19,12 @@
17
19
  "step": {
18
20
  "marker": {
19
21
  "block-size": {
20
- "value": "calc({ams.typography.heading.3.font-size} * {ams.typography.heading.3.line-height})"
22
+ "$value": "calc({ams.typography.heading.3.font-size} * {ams.typography.heading.3.line-height})",
23
+ "$type": "dimension"
21
24
  },
22
25
  "margin-block-start": {
23
- "value": "calc(({ams.typography.heading.3.line-height} * {ams.typography.heading.3.font-size}) / 2)"
26
+ "$value": "calc(({ams.typography.heading.3.line-height} * {ams.typography.heading.3.font-size}) / 2)",
27
+ "$type": "dimension"
24
28
  }
25
29
  }
26
30
  }
@@ -29,89 +33,140 @@
29
33
  "step": {
30
34
  "marker": {
31
35
  "block-size": {
32
- "value": "calc({ams.typography.heading.4.font-size} * {ams.typography.heading.4.line-height})"
36
+ "$value": "calc({ams.typography.heading.4.font-size} * {ams.typography.heading.4.line-height})",
37
+ "$type": "dimension"
33
38
  },
34
39
  "margin-block-start": {
35
- "value": "calc(({ams.typography.heading.4.line-height} * {ams.typography.heading.4.font-size}) / 2)"
40
+ "$value": "calc(({ams.typography.heading.4.line-height} * {ams.typography.heading.4.font-size}) / 2)",
41
+ "$type": "dimension"
36
42
  }
37
43
  }
38
44
  }
39
45
  },
40
46
  "step": {
41
47
  "gap": {
42
- "value": "{ams.space.m}"
48
+ "$value": "{ams.space.m}",
49
+ "$type": "dimension",
50
+ "$extensions": {
51
+ "nl.amsterdam.subtype": "space"
52
+ }
43
53
  },
44
54
  "medium": {
45
55
  "gap": {
46
- "value": "{ams.space.l}"
56
+ "$value": "{ams.space.l}",
57
+ "$type": "dimension",
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space"
60
+ }
47
61
  }
48
62
  },
49
63
  "marker": {
50
64
  "shape": {
51
65
  "block-size": {
52
- "value": "1.5rem"
66
+ "$value": {
67
+ "value": 1.5,
68
+ "unit": "rem"
69
+ },
70
+ "$type": "dimension"
53
71
  },
54
72
  "background-color": {
55
- "value": "{ams.color.background}"
73
+ "$value": "{ams.color.background}",
74
+ "$type": "color"
56
75
  },
57
76
  "border-color": {
58
- "value": "{ams.color.progress.upcoming}"
77
+ "$value": "{ams.color.progress.upcoming}",
78
+ "$type": "color"
59
79
  },
60
80
  "border-style": {
61
- "value": "solid"
81
+ "$value": "solid",
82
+ "$extensions": {
83
+ "nl.amsterdam.type": "borderStyle"
84
+ }
62
85
  },
63
86
  "border-width": {
64
- "value": "{ams.border.width.m}"
87
+ "$value": "{ams.border.width.m}",
88
+ "$extensions": {
89
+ "nl.amsterdam.type": "borderWidth"
90
+ }
65
91
  },
66
92
  "outline-color": {
67
- "value": "{ams.color.background}"
93
+ "$value": "{ams.color.background}",
94
+ "$type": "color"
68
95
  },
69
96
  "outline-style": {
70
- "value": "solid"
97
+ "$value": "solid",
98
+ "$extensions": {
99
+ "nl.amsterdam.type": "borderStyle"
100
+ }
71
101
  },
72
102
  "outline-width": {
73
- "value": "{ams.border.width.m}"
103
+ "$value": "{ams.border.width.m}",
104
+ "$extensions": {
105
+ "nl.amsterdam.type": "borderWidth"
106
+ }
74
107
  }
75
108
  }
76
109
  },
77
110
  "connector": {
78
111
  "border-inline-color": {
79
- "value": "{ams.color.progress.upcoming}"
112
+ "$value": "{ams.color.progress.upcoming}",
113
+ "$type": "color"
80
114
  },
81
115
  "border-inline-style": {
82
- "value": "dashed"
116
+ "$value": "dashed",
117
+ "$extensions": {
118
+ "nl.amsterdam.type": "borderStyle"
119
+ }
83
120
  },
84
121
  "border-inline-width": {
85
- "value": "1px"
122
+ "$value": {
123
+ "value": 1,
124
+ "unit": "px"
125
+ },
126
+ "$type": "dimension"
86
127
  }
87
128
  },
88
129
  "heading": {
89
130
  "margin-block-end": {
90
- "value": "{ams.space.s}"
131
+ "$value": "{ams.space.s}",
132
+ "$type": "dimension",
133
+ "$extensions": {
134
+ "nl.amsterdam.subtype": "space"
135
+ }
91
136
  }
92
137
  },
93
138
  "content": {
94
139
  "margin-block-end": {
95
- "value": "{ams.space.l}"
140
+ "$value": "{ams.space.l}",
141
+ "$type": "dimension",
142
+ "$extensions": {
143
+ "nl.amsterdam.subtype": "space"
144
+ }
96
145
  }
97
146
  },
98
147
  "completed": {
99
148
  "marker": {
100
149
  "shape": {
101
150
  "background-color": {
102
- "value": "{ams.color.progress.completed}"
151
+ "$value": "{ams.color.progress.completed}",
152
+ "$type": "color"
103
153
  },
104
154
  "border-color": {
105
- "value": "{ams.color.progress.completed}"
155
+ "$value": "{ams.color.progress.completed}",
156
+ "$type": "color"
106
157
  }
107
158
  }
108
159
  },
109
160
  "connector": {
110
161
  "border-inline-color": {
111
- "value": "{ams.color.progress.completed}"
162
+ "$value": "{ams.color.progress.completed}",
163
+ "$type": "color"
112
164
  },
113
165
  "border-inline-style": {
114
- "value": "solid"
166
+ "$value": "solid",
167
+ "$extensions": {
168
+ "nl.amsterdam.type": "borderStyle"
169
+ }
115
170
  }
116
171
  }
117
172
  },
@@ -119,113 +174,169 @@
119
174
  "marker": {
120
175
  "shape": {
121
176
  "background-color": {
122
- "value": "{ams.color.progress.current}"
177
+ "$value": "{ams.color.progress.current}",
178
+ "$type": "color"
123
179
  },
124
180
  "border-color": {
125
- "value": "{ams.color.progress.current}"
181
+ "$value": "{ams.color.progress.current}",
182
+ "$type": "color"
126
183
  }
127
184
  }
128
185
  },
129
186
  "connector": {
130
187
  "border-inline-color": {
131
- "value": "{ams.color.progress.current}"
188
+ "$value": "{ams.color.progress.current}",
189
+ "$type": "color"
132
190
  }
133
191
  }
134
192
  }
135
193
  },
136
194
  "substeps": {
137
195
  "padding-block-start": {
138
- "value": "{ams.space.m}"
196
+ "$value": "{ams.space.m}",
197
+ "$type": "dimension",
198
+ "$extensions": {
199
+ "nl.amsterdam.subtype": "space"
200
+ }
139
201
  },
140
202
  "step": {
141
203
  "indicator": {
142
204
  "margin-inline-end": {
143
- "value": "{ams.space.m}"
205
+ "$value": "{ams.space.m}",
206
+ "$type": "dimension",
207
+ "$extensions": {
208
+ "nl.amsterdam.subtype": "space"
209
+ }
144
210
  },
145
211
  "medium": {
146
212
  "margin-inline-end": {
147
- "value": "{ams.space.l}"
213
+ "$value": "{ams.space.l}",
214
+ "$type": "dimension",
215
+ "$extensions": {
216
+ "nl.amsterdam.subtype": "space"
217
+ }
148
218
  }
149
219
  }
150
220
  },
151
221
  "marker": {
152
222
  "block-size": {
153
- "value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height})"
223
+ "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height})",
224
+ "$type": "dimension"
154
225
  },
155
226
  "inline-size": {
156
- "value": "{ams.progress-list.step.marker.shape.block-size}"
227
+ "$value": "{ams.progress-list.step.marker.shape.block-size}",
228
+ "$type": "dimension"
157
229
  },
158
230
  "shape": {
159
231
  "block-size": {
160
- "value": "0.75rem"
232
+ "$value": "0.75rem",
233
+ "$type": "dimension"
161
234
  },
162
235
  "background-color": {
163
- "value": "{ams.color.background}"
236
+ "$value": "{ams.color.background}",
237
+ "$type": "color"
164
238
  },
165
239
  "border-color": {
166
- "value": "{ams.color.progress.upcoming}"
240
+ "$value": "{ams.color.progress.upcoming}",
241
+ "$type": "color"
167
242
  },
168
243
  "border-style": {
169
- "value": "solid"
244
+ "$value": "solid",
245
+ "$extensions": {
246
+ "nl.amsterdam.type": "borderStyle"
247
+ }
170
248
  },
171
249
  "border-width": {
172
- "value": "{ams.border.width.m}"
250
+ "$value": "{ams.border.width.m}",
251
+ "$extensions": {
252
+ "nl.amsterdam.type": "borderWidth"
253
+ }
173
254
  },
174
255
  "outline-color": {
175
- "value": "{ams.color.background}"
256
+ "$value": "{ams.color.background}",
257
+ "$type": "color"
176
258
  },
177
259
  "outline-style": {
178
- "value": "solid"
260
+ "$value": "solid",
261
+ "$extensions": {
262
+ "nl.amsterdam.type": "borderStyle"
263
+ }
179
264
  },
180
265
  "outline-width": {
181
- "value": "{ams.border.width.m}"
266
+ "$value": "{ams.border.width.m}",
267
+ "$extensions": {
268
+ "nl.amsterdam.type": "borderWidth"
269
+ }
182
270
  }
183
271
  }
184
272
  },
185
273
  "connector": {
186
274
  "background-color": {
187
- "value": "{ams.color.background}"
275
+ "$value": "{ams.color.background}",
276
+ "$type": "color"
188
277
  },
189
278
  "border-inline-color": {
190
- "value": "{ams.color.progress.upcoming}"
279
+ "$value": "{ams.color.progress.upcoming}",
280
+ "$type": "color"
191
281
  },
192
282
  "border-inline-style": {
193
- "value": "dashed"
283
+ "$value": "dashed",
284
+ "$extensions": {
285
+ "nl.amsterdam.type": "borderStyle"
286
+ }
194
287
  },
195
288
  "border-inline-width": {
196
- "value": "1px"
289
+ "$value": {
290
+ "value": 1,
291
+ "unit": "px"
292
+ },
293
+ "$extensions": {
294
+ "nl.amsterdam.type": "borderWidth"
295
+ }
197
296
  },
198
297
  "margin-block-start": {
199
- "value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height} / 2)"
298
+ "$value": "calc({ams.typography.body-text.font-size} * {ams.typography.body-text.line-height} / 2)",
299
+ "$type": "dimension"
200
300
  },
201
301
  "last-child": {
202
302
  "border-inline-color": {
203
- "value": "{ams.color.background}"
303
+ "$value": "{ams.color.background}",
304
+ "$type": "color"
204
305
  }
205
306
  }
206
307
  },
207
308
  "content": {
208
309
  "margin-block-end": {
209
- "value": "{ams.space.m}"
310
+ "$value": "{ams.space.m}",
311
+ "$type": "dimension",
312
+ "$extensions": {
313
+ "nl.amsterdam.subtype": "space"
314
+ }
210
315
  }
211
316
  },
212
317
  "completed": {
213
318
  "marker": {
214
319
  "shape": {
215
320
  "background-color": {
216
- "value": "{ams.color.progress.completed}"
321
+ "$value": "{ams.color.progress.completed}",
322
+ "$type": "color"
217
323
  },
218
324
  "border-color": {
219
- "value": "{ams.color.progress.completed}"
325
+ "$value": "{ams.color.progress.completed}",
326
+ "$type": "color"
220
327
  }
221
328
  }
222
329
  },
223
330
  "connector": {
224
331
  "border-inline-color": {
225
- "value": "{ams.color.progress.completed}"
332
+ "$value": "{ams.color.progress.completed}",
333
+ "$type": "color"
226
334
  },
227
335
  "border-inline-style": {
228
- "value": "solid"
336
+ "$value": "solid",
337
+ "$extensions": {
338
+ "nl.amsterdam.type": "borderStyle"
339
+ }
229
340
  }
230
341
  }
231
342
  },
@@ -233,10 +344,12 @@
233
344
  "marker": {
234
345
  "shape": {
235
346
  "background-color": {
236
- "value": "{ams.color.progress.current}"
347
+ "$value": "{ams.color.progress.current}",
348
+ "$type": "color"
237
349
  },
238
350
  "border-color": {
239
- "value": "{ams.color.progress.current}"
351
+ "$value": "{ams.color.progress.current}",
352
+ "$type": "color"
240
353
  }
241
354
  }
242
355
  }
@@ -245,7 +358,11 @@
245
358
  "last-child": {
246
359
  "content": {
247
360
  "margin-block-end": {
248
- "value": "{ams.space.l}"
361
+ "$value": "{ams.space.l}",
362
+ "$type": "dimension",
363
+ "$extensions": {
364
+ "nl.amsterdam.subtype": "space"
365
+ }
249
366
  }
250
367
  }
251
368
  }
package/src/components/ams/radio.tokens.json CHANGED
@@ -1,80 +1,189 @@
1
1
  {
2
2
  "ams": {
3
3
  "radio": {
4
- "color": { "value": "{ams.color.text.default}" },
5
- "cursor": { "value": "{ams.cursor.interactive}" },
6
- "font-family": { "value": "{ams.typography.font-family}" },
7
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
8
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
9
- "gap": { "value": "{ams.space.s}" },
10
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
13
- "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
4
+ "color": {
5
+ "$value": "{ams.color.text.default}",
6
+ "$type": "color"
7
+ },
8
+ "cursor": {
9
+ "$value": "{ams.cursor.interactive}"
10
+ },
11
+ "font-family": {
12
+ "$value": "{ams.typography.font-family}",
13
+ "$type": "fontFamily"
14
+ },
15
+ "font-size": {
16
+ "$value": "{ams.typography.body-text.font-size}",
17
+ "$extensions": {
18
+ "nl.amsterdam.type": "fontSize"
19
+ }
20
+ },
21
+ "font-weight": {
22
+ "$value": "{ams.typography.body-text.font-weight}",
23
+ "$type": "fontWeight"
24
+ },
25
+ "gap": {
26
+ "$value": "{ams.space.s}",
27
+ "$type": "dimension",
28
+ "$extensions": {
29
+ "nl.amsterdam.subtype": "space"
30
+ }
31
+ },
32
+ "line-height": {
33
+ "$value": "{ams.typography.body-text.line-height}",
34
+ "$extensions": {
35
+ "nl.amsterdam.type": "lineHeight"
36
+ }
37
+ },
38
+ "outline-offset": {
39
+ "$value": "{ams.focus.outline-offset}",
40
+ "$type": "dimension",
41
+ "$extensions": {
42
+ "nl.amsterdam.subtype": "space"
43
+ }
44
+ },
45
+ "text-decoration-thickness": {
46
+ "$value": "{ams.links.text-decoration-thickness}",
47
+ "$type": "dimension"
48
+ },
49
+ "text-underline-offset": {
50
+ "$value": "{ams.links.text-underline-offset}",
51
+ "$type": "dimension",
52
+ "$extensions": {
53
+ "nl.amsterdam.subtype": "space"
54
+ }
55
+ },
14
56
  "checked-indicator": {
15
- "fill": { "value": "{ams.color.interactive.default}" },
57
+ "fill": {
58
+ "$value": "{ams.color.interactive.default}",
59
+ "$type": "color"
60
+ },
16
61
  "disabled": {
17
- "fill": { "value": "{ams.color.interactive.disabled}" }
62
+ "fill": {
63
+ "$value": "{ams.color.interactive.disabled}",
64
+ "$type": "color"
65
+ }
18
66
  },
19
67
  "disabled-invalid": {
20
- "fill": { "value": "{ams.color.interactive.disabled}" },
68
+ "fill": {
69
+ "$value": "{ams.color.interactive.disabled}",
70
+ "$type": "color"
71
+ },
21
72
  "hover": {
22
- "fill": { "value": "{ams.color.interactive.disabled}" }
73
+ "fill": {
74
+ "$value": "{ams.color.interactive.disabled}",
75
+ "$type": "color"
76
+ }
23
77
  }
24
78
  },
25
79
  "hover": {
26
- "fill": { "value": "{ams.color.interactive.hover}" }
80
+ "fill": {
81
+ "$value": "{ams.color.interactive.hover}",
82
+ "$type": "color"
83
+ }
27
84
  },
28
85
  "invalid": {
29
- "fill": { "value": "{ams.color.interactive.invalid.default}" },
86
+ "fill": {
87
+ "$value": "{ams.color.interactive.invalid.default}",
88
+ "$type": "color"
89
+ },
30
90
  "hover": {
31
- "fill": { "value": "{ams.color.interactive.invalid.hover}" }
91
+ "fill": {
92
+ "$value": "{ams.color.interactive.invalid.hover}",
93
+ "$type": "color"
94
+ }
32
95
  }
33
96
  }
34
97
  },
35
98
  "hover-indicator": {
36
99
  "hover": {
37
- "stroke": { "value": "{ams.color.interactive.hover}" }
100
+ "stroke": {
101
+ "$value": "{ams.color.interactive.hover}",
102
+ "$type": "color"
103
+ }
38
104
  },
39
105
  "invalid": {
40
106
  "hover": {
41
- "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
107
+ "stroke": {
108
+ "$value": "{ams.color.interactive.invalid.hover}",
109
+ "$type": "color"
110
+ }
42
111
  }
43
112
  }
44
113
  },
45
114
  "circle": {
46
- "fill": { "value": "{ams.color.background}" },
47
- "stroke": { "value": "{ams.color.interactive.default}" },
115
+ "fill": {
116
+ "$value": "{ams.color.background}",
117
+ "$type": "color"
118
+ },
119
+ "stroke": {
120
+ "$value": "{ams.color.interactive.default}",
121
+ "$type": "color"
122
+ },
48
123
  "disabled": {
49
- "stroke": { "value": "{ams.color.interactive.disabled}" }
124
+ "stroke": {
125
+ "$value": "{ams.color.interactive.disabled}",
126
+ "$type": "color"
127
+ }
50
128
  },
51
129
  "disabled-invalid": {
52
- "stroke": { "value": "{ams.color.interactive.disabled}" },
130
+ "stroke": {
131
+ "$value": "{ams.color.interactive.disabled}",
132
+ "$type": "color"
133
+ },
53
134
  "hover": {
54
- "stroke": { "value": "{ams.color.interactive.disabled}" }
135
+ "stroke": {
136
+ "$value": "{ams.color.interactive.disabled}",
137
+ "$type": "color"
138
+ }
55
139
  }
56
140
  },
57
141
  "hover": {
58
- "stroke": { "value": "{ams.color.interactive.hover}" }
142
+ "stroke": {
143
+ "$value": "{ams.color.interactive.hover}",
144
+ "$type": "color"
145
+ }
59
146
  },
60
147
  "invalid": {
61
- "stroke": { "value": "{ams.color.interactive.invalid.default}" },
148
+ "stroke": {
149
+ "$value": "{ams.color.interactive.invalid.default}",
150
+ "$type": "color"
151
+ },
62
152
  "hover": {
63
- "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
153
+ "stroke": {
154
+ "$value": "{ams.color.interactive.invalid.hover}",
155
+ "$type": "color"
156
+ }
64
157
  }
65
158
  }
66
159
  },
67
160
  "disabled": {
68
- "color": { "value": "{ams.color.interactive.disabled}" },
69
- "cursor": { "value": "{ams.cursor.disabled}" }
161
+ "color": {
162
+ "$value": "{ams.color.interactive.disabled}",
163
+ "$type": "color"
164
+ },
165
+ "cursor": {
166
+ "$value": "{ams.cursor.disabled}"
167
+ }
70
168
  },
71
169
  "hover": {
72
- "color": { "value": "{ams.color.interactive.hover}" },
73
- "text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
170
+ "color": {
171
+ "$value": "{ams.color.interactive.hover}",
172
+ "$type": "color"
173
+ },
174
+ "text-decoration-line": {
175
+ "$value": "{ams.links.subtle.hover.text-decoration-line}"
176
+ }
74
177
  },
75
178
  "icon-container": {
76
- "block-size": { "value": "calc({ams.radio.font-size} * {ams.radio.line-height})" },
77
- "inline-size": { "value": "{ams.radio.font-size}" }
179
+ "block-size": {
180
+ "$value": "calc({ams.radio.font-size} * {ams.radio.line-height})",
181
+ "$type": "dimension"
182
+ },
183
+ "inline-size": {
184
+ "$value": "{ams.radio.font-size}",
185
+ "$type": "dimension"
186
+ }
78
187
  }
79
188
  }
80
189
  }