@rijkshuisstijl-community/design-tokens 9.0.0 → 10.0.1

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 (131) hide show
  1. package/CHANGELOG.md +160 -0
  2. package/README.md +48 -3
  3. package/build.mjs +86 -20
  4. package/cssFixers.mjs +89 -0
  5. package/cssFixers.spec.mjs +98 -0
  6. package/dist/_variables.scss +1359 -1381
  7. package/dist/index.css +1359 -1381
  8. package/dist/index.d.ts +1437 -1396
  9. package/dist/index.js +1292 -1275
  10. package/dist/index.json +1208 -1230
  11. package/dist/index.tokens.json +1703 -1746
  12. package/dist/kern-lintblauw/_variables.scss +1376 -0
  13. package/dist/kern-lintblauw/index.css +1379 -0
  14. package/dist/kern-lintblauw/index.d.ts +1440 -0
  15. package/dist/{wetgevend → kern-lintblauw}/index.js +1334 -1238
  16. package/dist/{wetgevend → kern-lintblauw}/index.json +1294 -1237
  17. package/dist/{wetgevend → kern-lintblauw}/index.tokens.json +1894 -1779
  18. package/dist/kern-lintblauw/root.css +1379 -0
  19. package/dist/kern-lintblauw/tokens.d.ts +2245 -0
  20. package/dist/kern-lintblauw/tokens.js +31032 -0
  21. package/dist/root.css +1359 -1381
  22. package/dist/tokens.d.ts +2205 -2247
  23. package/dist/tokens.js +29984 -32173
  24. package/dist/uitvoerend-groen/_variables.scss +1355 -1298
  25. package/dist/uitvoerend-groen/index.css +1355 -1298
  26. package/dist/uitvoerend-groen/index.d.ts +1437 -1317
  27. package/dist/uitvoerend-groen/index.js +1307 -1220
  28. package/dist/uitvoerend-groen/index.json +1280 -1223
  29. package/dist/uitvoerend-groen/index.tokens.json +1918 -1803
  30. package/dist/uitvoerend-groen/root.css +1355 -1298
  31. package/dist/uitvoerend-groen/tokens.d.ts +2209 -2100
  32. package/dist/uitvoerend-groen/tokens.js +30314 -30632
  33. package/dist/uitvoerend-hemelblauw/_variables.scss +1355 -1298
  34. package/dist/uitvoerend-hemelblauw/index.css +1355 -1298
  35. package/dist/uitvoerend-hemelblauw/index.d.ts +1437 -1317
  36. package/dist/uitvoerend-hemelblauw/index.js +1307 -1220
  37. package/dist/uitvoerend-hemelblauw/index.json +1280 -1223
  38. package/dist/uitvoerend-hemelblauw/index.tokens.json +1921 -1806
  39. package/dist/uitvoerend-hemelblauw/root.css +1355 -1298
  40. package/dist/uitvoerend-hemelblauw/tokens.d.ts +2209 -2100
  41. package/dist/uitvoerend-hemelblauw/tokens.js +30314 -30632
  42. package/dist/uitvoerend-lintblauw/_variables.scss +1376 -0
  43. package/dist/uitvoerend-lintblauw/index.css +1379 -0
  44. package/dist/uitvoerend-lintblauw/index.d.ts +1440 -0
  45. package/dist/{koop → uitvoerend-lintblauw}/index.js +1325 -1238
  46. package/dist/{koop → uitvoerend-lintblauw}/index.json +1295 -1238
  47. package/dist/{koop → uitvoerend-lintblauw}/index.tokens.json +1894 -1779
  48. package/dist/uitvoerend-lintblauw/root.css +1379 -0
  49. package/dist/uitvoerend-lintblauw/tokens.d.ts +2245 -0
  50. package/dist/uitvoerend-lintblauw/tokens.js +31032 -0
  51. package/dist/uitvoerend-oranje/_variables.scss +1355 -1298
  52. package/dist/uitvoerend-oranje/index.css +1355 -1298
  53. package/dist/uitvoerend-oranje/index.d.ts +1437 -1317
  54. package/dist/uitvoerend-oranje/index.js +1336 -1249
  55. package/dist/uitvoerend-oranje/index.json +1290 -1233
  56. package/dist/uitvoerend-oranje/index.tokens.json +1922 -1807
  57. package/dist/uitvoerend-oranje/root.css +1355 -1298
  58. package/dist/uitvoerend-oranje/tokens.d.ts +2209 -2100
  59. package/dist/uitvoerend-oranje/tokens.js +30314 -30632
  60. package/dist/uitvoerend-paars/_variables.scss +1355 -1298
  61. package/dist/uitvoerend-paars/index.css +1355 -1298
  62. package/dist/uitvoerend-paars/index.d.ts +1437 -1317
  63. package/dist/uitvoerend-paars/index.js +1307 -1220
  64. package/dist/uitvoerend-paars/index.json +1280 -1223
  65. package/dist/uitvoerend-paars/index.tokens.json +1931 -1816
  66. package/dist/uitvoerend-paars/root.css +1355 -1298
  67. package/dist/uitvoerend-paars/tokens.d.ts +2209 -2100
  68. package/dist/uitvoerend-paars/tokens.js +30314 -30632
  69. package/dist/uitvoerend-robijnrood/_variables.scss +1376 -0
  70. package/dist/uitvoerend-robijnrood/index.css +1379 -0
  71. package/dist/uitvoerend-robijnrood/index.d.ts +1440 -0
  72. package/dist/uitvoerend-robijnrood/index.js +1407 -0
  73. package/dist/{uitvoerend-mintgroen → uitvoerend-robijnrood}/index.json +1278 -1221
  74. package/dist/{uitvoerend-mintgroen → uitvoerend-robijnrood}/index.tokens.json +1955 -1840
  75. package/dist/uitvoerend-robijnrood/root.css +1379 -0
  76. package/dist/uitvoerend-robijnrood/tokens.d.ts +2245 -0
  77. package/dist/uitvoerend-robijnrood/tokens.js +31032 -0
  78. package/figma/figma.tokens.json +4613 -6238
  79. package/package.json +6 -4
  80. package/src/generated/base.tokens.json +5872 -5852
  81. package/src/generated/kern-lintblauw/tokens.json +6760 -0
  82. package/src/generated/themes.json +41479 -50820
  83. package/src/generated/uitvoerend-groen/tokens.json +5920 -5453
  84. package/src/generated/uitvoerend-hemelblauw/tokens.json +5920 -5453
  85. package/src/generated/uitvoerend-lintblauw/tokens.json +6772 -0
  86. package/src/generated/uitvoerend-oranje/tokens.json +6136 -5485
  87. package/src/generated/uitvoerend-paars/tokens.json +5920 -5453
  88. package/src/generated/uitvoerend-robijnrood/tokens.json +6812 -0
  89. package/token-transformer.mjs +5 -43
  90. package/dist/koop/_variables.scss +0 -1319
  91. package/dist/koop/index.css +0 -1322
  92. package/dist/koop/index.d.ts +0 -1320
  93. package/dist/koop/root.css +0 -1322
  94. package/dist/koop/tokens.d.ts +0 -2136
  95. package/dist/koop/tokens.js +0 -31350
  96. package/dist/uitvoerend-mintgroen/_variables.scss +0 -1319
  97. package/dist/uitvoerend-mintgroen/index.css +0 -1322
  98. package/dist/uitvoerend-mintgroen/index.d.ts +0 -1320
  99. package/dist/uitvoerend-mintgroen/index.js +0 -1320
  100. package/dist/uitvoerend-mintgroen/root.css +0 -1322
  101. package/dist/uitvoerend-mintgroen/tokens.d.ts +0 -2136
  102. package/dist/uitvoerend-mintgroen/tokens.js +0 -31350
  103. package/dist/uitvoerend-violet/_variables.scss +0 -1319
  104. package/dist/uitvoerend-violet/index.css +0 -1322
  105. package/dist/uitvoerend-violet/index.d.ts +0 -1320
  106. package/dist/uitvoerend-violet/index.js +0 -1320
  107. package/dist/uitvoerend-violet/index.json +0 -1317
  108. package/dist/uitvoerend-violet/index.tokens.json +0 -2113
  109. package/dist/uitvoerend-violet/root.css +0 -1322
  110. package/dist/uitvoerend-violet/tokens.d.ts +0 -2136
  111. package/dist/uitvoerend-violet/tokens.js +0 -31350
  112. package/dist/uitvoerend-violet-oud/_variables.scss +0 -1320
  113. package/dist/uitvoerend-violet-oud/index.css +0 -1323
  114. package/dist/uitvoerend-violet-oud/index.d.ts +0 -1321
  115. package/dist/uitvoerend-violet-oud/index.js +0 -1321
  116. package/dist/uitvoerend-violet-oud/index.json +0 -1318
  117. package/dist/uitvoerend-violet-oud/index.tokens.json +0 -2114
  118. package/dist/uitvoerend-violet-oud/root.css +0 -1323
  119. package/dist/uitvoerend-violet-oud/tokens.d.ts +0 -2137
  120. package/dist/uitvoerend-violet-oud/tokens.js +0 -31371
  121. package/dist/wetgevend/_variables.scss +0 -1319
  122. package/dist/wetgevend/index.css +0 -1322
  123. package/dist/wetgevend/index.d.ts +0 -1320
  124. package/dist/wetgevend/root.css +0 -1322
  125. package/dist/wetgevend/tokens.d.ts +0 -2136
  126. package/dist/wetgevend/tokens.js +0 -31350
  127. package/src/generated/koop/tokens.json +0 -6345
  128. package/src/generated/uitvoerend-mintgroen/tokens.json +0 -6345
  129. package/src/generated/uitvoerend-violet/tokens.json +0 -6345
  130. package/src/generated/uitvoerend-violet-oud/tokens.json +0 -6349
  131. package/src/generated/wetgevend/tokens.json +0 -6345
package/dist/uitvoerend-paars/tokens.d.ts CHANGED
@@ -1,2136 +1,2245 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Mon, 27 Oct 2025 09:20:40 GMT
2
+ * Do not edit directly, this file was auto-generated.
3
+ * Generated on Mon, 15 Dec 2025 18:39:55 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
7
7
 
8
8
  declare interface DesignToken {
9
- value: any;
9
+ $value?: any;
10
+ $type?: string;
11
+ $description?: string;
10
12
  name?: string;
11
- comment?: string;
12
13
  themeable?: boolean;
13
- attributes?: {
14
- category?: string;
15
- type?: string;
16
- item?: string;
17
- subitem?: string;
18
- state?: string;
19
- [key: string]: any;
20
- };
14
+ attributes?: Record<string, unknown>;
21
15
  [key: string]: any;
22
16
  }
23
17
 
24
18
  declare const tokens: {
25
- "utrecht": {
26
- "textbox": {
27
- "hover": {
28
- "background-color": DesignToken,
29
- "border-color": DesignToken,
30
- "border-width": DesignToken,
31
- "color": DesignToken
32
- },
33
- "focus": {
34
- "border-width": DesignToken,
35
- "background-color": DesignToken,
36
- "border-color": DesignToken,
37
- "color": DesignToken
38
- },
39
- "background-color": DesignToken,
40
- "border-block-end-width": DesignToken,
41
- "border-color": DesignToken,
42
- "border-radius": DesignToken,
43
- "border-width": DesignToken,
44
- "color": DesignToken,
45
- "font-family": DesignToken,
46
- "font-size": DesignToken,
47
- "font-weight": DesignToken,
48
- "line-height": DesignToken,
49
- "max-inline-size": DesignToken,
50
- "min-block-size": DesignToken,
51
- "padding-block-end": DesignToken,
52
- "padding-block-start": DesignToken,
53
- "padding-inline-end": DesignToken,
54
- "padding-inline-start": DesignToken,
55
- "invalid": {
56
- "background-color": DesignToken,
57
- "border-block-end-width": DesignToken,
58
- "border-color": DesignToken,
59
- "border-width": DesignToken,
60
- "color": DesignToken
61
- },
62
- "placeholder": {
63
- "color": DesignToken
64
- },
65
- "read-only": {
66
- "background-color": DesignToken,
67
- "border-color": DesignToken,
68
- "color": DesignToken
69
- },
70
- "disabled": {
71
- "background-color": DesignToken,
72
- "border-color": DesignToken,
73
- "color": DesignToken
74
- }
75
- },
76
- "select": {
77
- "border-bottom-width": DesignToken,
78
- "border-radius": DesignToken,
79
- "border-width": DesignToken,
80
- "image-background-position": DesignToken,
81
- "max-inline-size": DesignToken,
82
- "padding-block-end": DesignToken,
83
- "padding-block-start": DesignToken,
84
- "padding-inline-end": DesignToken,
85
- "padding-inline-start": DesignToken,
86
- "icon": {
87
- "size": DesignToken
88
- },
89
- "invalid": {
90
- "border-width": DesignToken,
91
- "color": DesignToken,
92
- "background-color": DesignToken,
93
- "border-block-end-width": DesignToken,
94
- "border-color": DesignToken
95
- },
96
- "hover": {
97
- "border-width": DesignToken,
98
- "background-color": DesignToken,
99
- "border-color": DesignToken,
100
- "color": DesignToken
101
- },
102
- "focus": {
103
- "border-width": DesignToken,
104
- "background-color": DesignToken,
105
- "border-color": DesignToken,
106
- "color": DesignToken
107
- },
108
- "background-color": DesignToken,
109
- "border-block-end-width": DesignToken,
110
- "border-color": DesignToken,
111
- "color": DesignToken,
112
- "font-family": DesignToken,
113
- "font-size": DesignToken,
114
- "font-weight": DesignToken,
115
- "line-height": DesignToken,
116
- "min-block-size": DesignToken,
117
- "disabled": {
118
- "background-color": DesignToken,
119
- "border-color": DesignToken,
120
- "color": DesignToken
121
- }
122
- },
123
- "radio-button": {
124
- "border-radius": DesignToken,
125
- "dot": {
126
- "size": DesignToken
127
- },
128
- "checked": {
129
- "disabled": {
130
- "background-color": DesignToken,
131
- "border-color": DesignToken,
132
- "color": DesignToken
133
- },
134
- "background-color": DesignToken,
135
- "border-color": DesignToken,
136
- "border-width": DesignToken,
137
- "color": DesignToken,
138
- "active": {
139
- "background-color": DesignToken,
140
- "border-color": DesignToken,
141
- "border-width": DesignToken,
142
- "color": DesignToken
143
- },
144
- "hover": {
145
- "background-color": DesignToken,
146
- "border-color": DesignToken,
147
- "border-width": DesignToken,
148
- "color": DesignToken
149
- },
150
- "focus": {
151
- "background-color": DesignToken,
152
- "border-color": DesignToken,
153
- "border-width": DesignToken,
154
- "color": DesignToken
155
- }
156
- },
157
- "background-color": DesignToken,
158
- "border-color": DesignToken,
159
- "color": DesignToken,
160
- "border-width": DesignToken,
161
- "size": DesignToken,
162
- "icon": {
163
- "size": DesignToken
164
- },
165
- "invalid": {
166
- "background-color": DesignToken,
167
- "border-color": DesignToken,
168
- "color": DesignToken,
169
- "border-width": DesignToken
170
- },
171
- "active": {
172
- "background-color": DesignToken,
173
- "border-color": DesignToken,
174
- "color": DesignToken,
175
- "border-width": DesignToken
176
- },
177
- "disabled": {
178
- "background-color": DesignToken,
179
- "border-color": DesignToken,
180
- "color": DesignToken
181
- },
182
- "hover": {
183
- "background-color": DesignToken,
184
- "border-color": DesignToken,
185
- "color": DesignToken,
186
- "border-width": DesignToken
187
- },
188
- "focus": {
189
- "background-color": DesignToken,
190
- "border-color": DesignToken,
191
- "color": DesignToken,
192
- "border-width": DesignToken
193
- }
194
- },
195
- "form-field": {
196
- "label": {
197
- "margin-block-end": DesignToken
198
- },
199
- "margin-block-end": DesignToken,
200
- "margin-block-start": DesignToken,
201
- "invalid": {
202
- "border-inline-start-color": DesignToken,
203
- "border-inline-start-width": DesignToken,
204
- "padding-inline-start": DesignToken
205
- }
206
- },
207
- "checkbox": {
208
- "indeterminate": {
209
- "active": {
210
- "background-color": DesignToken,
211
- "border-color": DesignToken,
212
- "color": DesignToken,
213
- "border-width": DesignToken
214
- },
215
- "disabled": {
216
- "background-color": DesignToken,
217
- "border-color": DesignToken,
218
- "color": DesignToken
219
- },
220
- "hover": {
221
- "background-color": DesignToken,
222
- "border-color": DesignToken,
223
- "color": DesignToken,
224
- "border-width": DesignToken
225
- },
226
- "focus": {
227
- "background-color": DesignToken,
228
- "border-color": DesignToken,
229
- "color": DesignToken,
230
- "border-width": DesignToken
231
- },
232
- "background-color": DesignToken,
233
- "border-color": DesignToken,
234
- "border-width": DesignToken,
235
- "color": DesignToken
236
- },
237
- "checked": {
238
- "active": {
239
- "background-color": DesignToken,
240
- "border-color": DesignToken,
241
- "color": DesignToken,
242
- "border-width": DesignToken
243
- },
244
- "disabled": {
245
- "background-color": DesignToken,
246
- "border-color": DesignToken,
247
- "color": DesignToken
248
- },
249
- "hover": {
250
- "background-color": DesignToken,
251
- "border-color": DesignToken,
252
- "color": DesignToken,
253
- "border-width": DesignToken
254
- },
255
- "focus": {
256
- "background-color": DesignToken,
257
- "border-color": DesignToken,
258
- "color": DesignToken,
259
- "border-width": DesignToken
260
- },
261
- "background-color": DesignToken,
262
- "border-color": DesignToken,
263
- "border-width": DesignToken,
264
- "color": DesignToken
265
- },
266
- "background-color": DesignToken,
267
- "border-color": DesignToken,
268
- "border-radius": DesignToken,
269
- "border-width": DesignToken,
270
- "size": DesignToken,
271
- "icon": {
272
- "size": DesignToken
273
- },
274
- "invalid": {
275
- "background-color": DesignToken,
276
- "border-color": DesignToken,
277
- "border-width": DesignToken
278
- },
279
- "active": {
280
- "background-color": DesignToken,
281
- "border-color": DesignToken,
282
- "border-width": DesignToken
283
- },
284
- "disabled": {
285
- "background-color": DesignToken,
286
- "border-color": DesignToken
287
- },
288
- "hover": {
289
- "background-color": DesignToken,
290
- "border-color": DesignToken,
291
- "border-width": DesignToken
292
- },
293
- "focus": {
294
- "background-color": DesignToken,
295
- "border-color": DesignToken,
296
- "border-width": DesignToken
297
- }
298
- },
299
- "textarea": {
300
- "border-bottom-width": DesignToken,
301
- "hover": {
302
- "background-color": DesignToken,
303
- "border-color": DesignToken,
304
- "border-width": DesignToken,
305
- "color": DesignToken
306
- },
307
- "focus": {
308
- "border-width": DesignToken,
309
- "background-color": DesignToken,
310
- "border-color": DesignToken,
311
- "color": DesignToken
312
- },
313
- "background-color": DesignToken,
314
- "border-block-end-width": DesignToken,
315
- "border-color": DesignToken,
316
- "border-radius": DesignToken,
317
- "border-width": DesignToken,
318
- "color": DesignToken,
319
- "font-family": DesignToken,
320
- "font-size": DesignToken,
321
- "font-weight": DesignToken,
322
- "line-height": DesignToken,
323
- "max-inline-size": DesignToken,
324
- "min-block-size": DesignToken,
325
- "padding-block-end": DesignToken,
326
- "padding-block-start": DesignToken,
327
- "padding-inline-end": DesignToken,
328
- "padding-inline-start": DesignToken,
329
- "invalid": {
330
- "background-color": DesignToken,
331
- "border-block-end-width": DesignToken,
332
- "border-color": DesignToken,
333
- "border-width": DesignToken,
334
- "color": DesignToken
335
- },
336
- "placeholder": {
337
- "color": DesignToken
338
- },
339
- "read-only": {
340
- "background-color": DesignToken,
341
- "border-color": DesignToken,
342
- "color": DesignToken
343
- },
344
- "disabled": {
345
- "background-color": DesignToken,
346
- "border-color": DesignToken,
347
- "color": DesignToken
348
- }
349
- },
350
- "form-label": {
351
- "color": DesignToken,
352
- "font-size": DesignToken,
353
- "font-weight": DesignToken,
354
- "checkbox": {
355
- "color": DesignToken,
356
- "font-weight": DesignToken
357
- },
358
- "radio": {
359
- "color": DesignToken,
360
- "font-weight": DesignToken
361
- },
362
- "checked": {
363
- "font-weight": DesignToken
364
- },
365
- "disabled": {
366
- "color": DesignToken
367
- }
368
- },
19
+ rhc: {
20
+ "border-radius": {
21
+ round: DesignToken;
22
+ none: DesignToken;
23
+ sm: DesignToken;
24
+ md: DesignToken;
25
+ };
26
+ "border-width": {
27
+ sm: DesignToken;
28
+ md: DesignToken;
29
+ none: DesignToken;
30
+ };
31
+ color: {
32
+ "cool-grey": {
33
+ "50": DesignToken;
34
+ "100": DesignToken;
35
+ "200": DesignToken;
36
+ "300": DesignToken;
37
+ "400": DesignToken;
38
+ "500": DesignToken;
39
+ "600": DesignToken;
40
+ "700": DesignToken;
41
+ "800": DesignToken;
42
+ "900": DesignToken;
43
+ };
44
+ lichtblauw: {
45
+ "50": DesignToken;
46
+ "100": DesignToken;
47
+ "200": DesignToken;
48
+ "300": DesignToken;
49
+ "400": DesignToken;
50
+ "500": DesignToken;
51
+ };
52
+ violet: {
53
+ "50": DesignToken;
54
+ "100": DesignToken;
55
+ "200": DesignToken;
56
+ "300": DesignToken;
57
+ "400": DesignToken;
58
+ "500": DesignToken;
59
+ };
60
+ paars: {
61
+ "50": DesignToken;
62
+ "100": DesignToken;
63
+ "200": DesignToken;
64
+ "300": DesignToken;
65
+ "400": DesignToken;
66
+ "500": DesignToken;
67
+ };
68
+ hemelblauw: {
69
+ "50": DesignToken;
70
+ "100": DesignToken;
71
+ "200": DesignToken;
72
+ "300": DesignToken;
73
+ "400": DesignToken;
74
+ "500": DesignToken;
75
+ };
76
+ donkerblauw: {
77
+ "50": DesignToken;
78
+ "100": DesignToken;
79
+ "200": DesignToken;
80
+ "300": DesignToken;
81
+ "400": DesignToken;
82
+ "500": DesignToken;
83
+ };
84
+ mintgroen: {
85
+ "50": DesignToken;
86
+ "100": DesignToken;
87
+ "200": DesignToken;
88
+ "300": DesignToken;
89
+ "400": DesignToken;
90
+ "500": DesignToken;
91
+ };
92
+ mosgroen: {
93
+ "50": DesignToken;
94
+ "100": DesignToken;
95
+ "200": DesignToken;
96
+ "300": DesignToken;
97
+ "400": DesignToken;
98
+ "500": DesignToken;
99
+ };
100
+ groen: {
101
+ "50": DesignToken;
102
+ "100": DesignToken;
103
+ "200": DesignToken;
104
+ "300": DesignToken;
105
+ "400": DesignToken;
106
+ "500": DesignToken;
107
+ };
108
+ donkergroen: {
109
+ "50": DesignToken;
110
+ "100": DesignToken;
111
+ "200": DesignToken;
112
+ "300": DesignToken;
113
+ "400": DesignToken;
114
+ "500": DesignToken;
115
+ };
116
+ bruin: {
117
+ "50": DesignToken;
118
+ "100": DesignToken;
119
+ "200": DesignToken;
120
+ "300": DesignToken;
121
+ "400": DesignToken;
122
+ "500": DesignToken;
123
+ };
124
+ donkerbruin: {
125
+ "50": DesignToken;
126
+ "100": DesignToken;
127
+ "200": DesignToken;
128
+ "300": DesignToken;
129
+ "400": DesignToken;
130
+ "500": DesignToken;
131
+ };
132
+ geel: {
133
+ "50": DesignToken;
134
+ "100": DesignToken;
135
+ "200": DesignToken;
136
+ "300": DesignToken;
137
+ "400": DesignToken;
138
+ "500": DesignToken;
139
+ };
140
+ donkergeel: {
141
+ "50": DesignToken;
142
+ "100": DesignToken;
143
+ "200": DesignToken;
144
+ "300": DesignToken;
145
+ "400": DesignToken;
146
+ "500": DesignToken;
147
+ };
148
+ oranje: {
149
+ "50": DesignToken;
150
+ "100": DesignToken;
151
+ "200": DesignToken;
152
+ "300": DesignToken;
153
+ "400": DesignToken;
154
+ "500": DesignToken;
155
+ };
156
+ rood: {
157
+ "50": DesignToken;
158
+ "100": DesignToken;
159
+ "200": DesignToken;
160
+ "300": DesignToken;
161
+ "400": DesignToken;
162
+ "500": DesignToken;
163
+ };
164
+ roze: {
165
+ "50": DesignToken;
166
+ "100": DesignToken;
167
+ "200": DesignToken;
168
+ "300": DesignToken;
169
+ "400": DesignToken;
170
+ "500": DesignToken;
171
+ };
172
+ robijnrood: {
173
+ "50": DesignToken;
174
+ "100": DesignToken;
175
+ "200": DesignToken;
176
+ "300": DesignToken;
177
+ "400": DesignToken;
178
+ "500": DesignToken;
179
+ };
180
+ lintblauw: {
181
+ "50": DesignToken;
182
+ "100": DesignToken;
183
+ "200": DesignToken;
184
+ "300": DesignToken;
185
+ "400": DesignToken;
186
+ "500": DesignToken;
187
+ };
188
+ wit: DesignToken;
189
+ zwart: DesignToken;
190
+ transparent: DesignToken;
191
+ foreground: {
192
+ default: DesignToken;
193
+ subtle: DesignToken;
194
+ link: DesignToken;
195
+ "on-dark-color": DesignToken;
196
+ "on-light-color": DesignToken;
197
+ };
198
+ border: {
199
+ default: DesignToken;
200
+ subtle: DesignToken;
201
+ strong: DesignToken;
202
+ };
203
+ "bg-document": DesignToken;
204
+ positive: {
205
+ default: DesignToken;
206
+ subtle: DesignToken;
207
+ };
208
+ info: {
209
+ default: DesignToken;
210
+ subtle: DesignToken;
211
+ };
212
+ negative: {
213
+ default: DesignToken;
214
+ subtle: DesignToken;
215
+ };
216
+ warning: {
217
+ default: DesignToken;
218
+ subtle: DesignToken;
219
+ };
220
+ primary: {
221
+ "50": DesignToken;
222
+ "100": DesignToken;
223
+ "200": DesignToken;
224
+ "300": DesignToken;
225
+ "400": DesignToken;
226
+ "500": DesignToken;
227
+ hover: DesignToken;
228
+ active: DesignToken;
229
+ };
230
+ };
231
+ size: {
232
+ "quarter-lint": DesignToken;
233
+ "half-lint": DesignToken;
234
+ lint: DesignToken;
235
+ "2-lint": DesignToken;
236
+ "3-lint": DesignToken;
237
+ "pointer-target": DesignToken;
238
+ icon: {
239
+ md: DesignToken;
240
+ };
241
+ };
242
+ space: {
243
+ "0": DesignToken;
244
+ "25": DesignToken;
245
+ "50": DesignToken;
246
+ "100": DesignToken;
247
+ "150": DesignToken;
248
+ "200": DesignToken;
249
+ "300": DesignToken;
250
+ "400": DesignToken;
251
+ "500": DesignToken;
252
+ "600": DesignToken;
253
+ "700": DesignToken;
254
+ };
255
+ focus: {
256
+ "outline-color": DesignToken;
257
+ inverse: {
258
+ "outline-color": DesignToken;
259
+ };
260
+ "outline-offset": DesignToken;
261
+ "outline-style": DesignToken;
262
+ "outline-width": DesignToken;
263
+ };
264
+ "rounded-corner": {
265
+ overflow: DesignToken;
266
+ sm: {
267
+ "border-radius": DesignToken;
268
+ };
269
+ md: {
270
+ "border-radius": DesignToken;
271
+ };
272
+ lg: {
273
+ "border-radius": DesignToken;
274
+ };
275
+ };
276
+ blockquote: {
277
+ "margin-block-end": DesignToken;
278
+ "margin-block-start": DesignToken;
279
+ "margin-inline-end": DesignToken;
280
+ "margin-inline-start": DesignToken;
281
+ };
282
+ "breadcrumb-nav": {
283
+ link: {
284
+ current: {
285
+ color: DesignToken;
286
+ };
287
+ };
288
+ };
289
+ "icon-only-button": {
290
+ "padding-block-end": DesignToken;
291
+ "padding-block-start": DesignToken;
292
+ "padding-inline-end": DesignToken;
293
+ "padding-inline-start": DesignToken;
294
+ };
295
+ card: {
296
+ "background-color": DesignToken;
297
+ "border-color": DesignToken;
298
+ "border-radius": DesignToken;
299
+ "border-width": DesignToken;
300
+ color: DesignToken;
301
+ "column-gap": DesignToken;
302
+ "inline-size": DesignToken;
303
+ icon: {
304
+ color: DesignToken;
305
+ size: DesignToken;
306
+ };
307
+ link: {
308
+ color: DesignToken;
309
+ "text-decoration": DesignToken;
310
+ active: {
311
+ "text-decoration": DesignToken;
312
+ };
313
+ hover: {
314
+ "text-decoration": DesignToken;
315
+ };
316
+ focus: {
317
+ "text-decoration": DesignToken;
318
+ };
319
+ };
320
+ metadata: {
321
+ color: DesignToken;
322
+ };
323
+ "padding-block-end": DesignToken;
324
+ "padding-block-start": DesignToken;
325
+ "padding-inline-end": DesignToken;
326
+ "padding-inline-start": DesignToken;
327
+ "row-gap": DesignToken;
328
+ active: {
329
+ "background-color": DesignToken;
330
+ "text-decoration": DesignToken;
331
+ };
332
+ hover: {
333
+ "background-color": DesignToken;
334
+ "text-decoration": DesignToken;
335
+ };
336
+ focus: {
337
+ "background-color": DesignToken;
338
+ "text-decoration": DesignToken;
339
+ };
340
+ "full-bleed": {
341
+ "background-color": DesignToken;
342
+ "border-color": DesignToken;
343
+ color: DesignToken;
344
+ opacity: DesignToken;
345
+ };
346
+ heading: {
347
+ color: DesignToken;
348
+ "padding-block-start": DesignToken;
349
+ "font-size": DesignToken;
350
+ "font-weight": DesignToken;
351
+ };
352
+ horizontal: {
353
+ "background-color": DesignToken;
354
+ "border-color": DesignToken;
355
+ color: DesignToken;
356
+ "max-block-size": DesignToken;
357
+ "padding-block-end": DesignToken;
358
+ "padding-block-start": DesignToken;
359
+ "padding-inline-end": DesignToken;
360
+ "padding-inline-start": DesignToken;
361
+ heading: {
362
+ "inline-size": DesignToken;
363
+ };
364
+ };
365
+ };
366
+ "card-as-link": {
367
+ "background-color": DesignToken;
368
+ "border-color": DesignToken;
369
+ "border-radius": DesignToken;
370
+ "border-width": DesignToken;
371
+ color: DesignToken;
372
+ "column-gap": DesignToken;
373
+ icon: {
374
+ color: DesignToken;
375
+ size: DesignToken;
376
+ };
377
+ link: {
378
+ color: DesignToken;
379
+ "text-decoration": DesignToken;
380
+ active: {
381
+ "text-decoration": DesignToken;
382
+ };
383
+ hover: {
384
+ "text-decoration": DesignToken;
385
+ };
386
+ focus: {
387
+ "text-decoration": DesignToken;
388
+ };
389
+ };
390
+ metadata: {
391
+ color: DesignToken;
392
+ };
393
+ "padding-block-end": DesignToken;
394
+ "padding-block-start": DesignToken;
395
+ "padding-inline-end": DesignToken;
396
+ "padding-inline-start": DesignToken;
397
+ "row-gap": DesignToken;
398
+ active: {
399
+ "background-color": DesignToken;
400
+ "text-decoration": DesignToken;
401
+ };
402
+ hover: {
403
+ "background-color": DesignToken;
404
+ "text-decoration": DesignToken;
405
+ };
406
+ focus: {
407
+ "background-color": DesignToken;
408
+ "text-decoration": DesignToken;
409
+ };
410
+ "full-bleed": {
411
+ "background-color": DesignToken;
412
+ "border-color": DesignToken;
413
+ color: DesignToken;
414
+ opacity: DesignToken;
415
+ };
416
+ heading: {
417
+ color: DesignToken;
418
+ "padding-block-start": DesignToken;
419
+ "font-size": DesignToken;
420
+ "font-weight": DesignToken;
421
+ };
422
+ horizontal: {
423
+ "background-color": DesignToken;
424
+ "border-color": DesignToken;
425
+ color: DesignToken;
426
+ "max-block-size": DesignToken;
427
+ "padding-block-end": DesignToken;
428
+ "padding-block-start": DesignToken;
429
+ "padding-inline-end": DesignToken;
430
+ "padding-inline-start": DesignToken;
431
+ heading: {
432
+ "inline-size": DesignToken;
433
+ };
434
+ };
435
+ };
436
+ "checkbox-group": {
437
+ "padding-block-end": DesignToken;
438
+ "padding-block-start": DesignToken;
439
+ "row-gap": DesignToken;
440
+ };
441
+ "code-input": {
442
+ size: DesignToken;
443
+ };
444
+ "code-input-group": {
445
+ "column-gap": DesignToken;
446
+ };
447
+ "data-badge-button": {
448
+ "column-gap": DesignToken;
449
+ hover: {
450
+ "background-color": DesignToken;
451
+ color: DesignToken;
452
+ };
453
+ };
454
+ "data-summary": {
455
+ "font-family": DesignToken;
456
+ "item-value": {
457
+ "font-weight": DesignToken;
458
+ row: {
459
+ "padding-block-end": DesignToken;
460
+ "padding-block-start": DesignToken;
461
+ "padding-inline-end": DesignToken;
462
+ "padding-inline-start": DesignToken;
463
+ };
464
+ "padding-block-end": DesignToken;
465
+ "padding-block-start": DesignToken;
466
+ "padding-inline-end": DesignToken;
467
+ "padding-inline-start": DesignToken;
468
+ };
469
+ "item-key": {
470
+ "font-weight": DesignToken;
471
+ row: {
472
+ "padding-block-end": DesignToken;
473
+ "padding-block-start": DesignToken;
474
+ "padding-inline-end": DesignToken;
475
+ "padding-inline-start": DesignToken;
476
+ };
477
+ "padding-block-end": DesignToken;
478
+ "padding-block-start": DesignToken;
479
+ "padding-inline-end": DesignToken;
480
+ "padding-inline-start": DesignToken;
481
+ };
482
+ item: {
483
+ "border-width": DesignToken;
484
+ "border-color": DesignToken;
485
+ "border-block-end-style": DesignToken;
486
+ color: DesignToken;
487
+ };
488
+ "font-size": DesignToken;
489
+ "line-height": DesignToken;
490
+ "item-action": {
491
+ row: {
492
+ "padding-block-end": DesignToken;
493
+ "padding-block-start": DesignToken;
494
+ "padding-inline-end": DesignToken;
495
+ "padding-inline-start": DesignToken;
496
+ };
497
+ "padding-block-end": DesignToken;
498
+ "padding-block-start": DesignToken;
499
+ "padding-inline-end": DesignToken;
500
+ "padding-inline-start": DesignToken;
501
+ };
502
+ };
503
+ "dot-badge": {
504
+ "border-radius": DesignToken;
505
+ color: DesignToken;
506
+ size: DesignToken;
507
+ };
508
+ "expandable-checkbox-group": {
509
+ details: {
510
+ "margin-block-start": DesignToken;
511
+ };
512
+ summary: {
513
+ color: DesignToken;
514
+ "margin-block-end": DesignToken;
515
+ "margin-block-start": DesignToken;
516
+ "text-decoration": DesignToken;
517
+ };
518
+ };
519
+ "file-input": {
520
+ "column-gap": DesignToken;
521
+ "row-gap": DesignToken;
522
+ feedback: {
523
+ color: DesignToken;
524
+ "font-size": DesignToken;
525
+ };
526
+ };
527
+ file: {
528
+ "border-style": DesignToken;
529
+ "border-color": DesignToken;
530
+ "border-width": DesignToken;
531
+ "border-radius": DesignToken;
532
+ "padding-inline-start": DesignToken;
533
+ "padding-inline-end": DesignToken;
534
+ "padding-block-start": DesignToken;
535
+ "padding-block-end": DesignToken;
536
+ "column-gap": DesignToken;
537
+ error: {
538
+ "border-color": DesignToken;
539
+ };
540
+ subtitle: {
541
+ color: DesignToken;
542
+ };
543
+ };
544
+ "form-field-checkbox-option": {
545
+ "column-gap": DesignToken;
546
+ "margin-block-end": DesignToken;
547
+ };
548
+ "form-field-radio-option": {
549
+ "column-gap": DesignToken;
550
+ "font-weight": DesignToken;
551
+ "row-gap": DesignToken;
552
+ label: {
553
+ "margin-block-end": DesignToken;
554
+ };
555
+ input: {
556
+ margin: {
557
+ "block-start": DesignToken;
558
+ };
559
+ };
560
+ };
561
+ hero: {
562
+ heading: {
563
+ "font-weight": DesignToken;
564
+ "line-height": DesignToken;
565
+ "font-size": DesignToken;
566
+ "font-family": DesignToken;
567
+ };
568
+ "sub-heading": {
569
+ "font-weight": DesignToken;
570
+ "line-height": DesignToken;
571
+ "font-size": DesignToken;
572
+ "font-family": DesignToken;
573
+ };
574
+ message: {
575
+ "background-color": DesignToken;
576
+ color: DesignToken;
577
+ "row-gap": DesignToken;
578
+ "padding-block-end": DesignToken;
579
+ "padding-inline-end": DesignToken;
580
+ "padding-inline-start": DesignToken;
581
+ "padding-block-start": DesignToken;
582
+ "border-radius": DesignToken;
583
+ "inline-size": DesignToken;
584
+ };
585
+ "border-radius": DesignToken;
586
+ "inline-size": DesignToken;
587
+ };
588
+ "link-list-card": {
589
+ "background-color": DesignToken;
590
+ "padding-block-start": DesignToken;
591
+ "padding-block-end": DesignToken;
592
+ "row-gap": DesignToken;
593
+ "padding-inline-start": DesignToken;
594
+ "padding-inline-end": DesignToken;
595
+ };
596
+ link: {
597
+ "column-gap": DesignToken;
598
+ };
599
+ logo: {
600
+ image: {
601
+ "background-color": DesignToken;
602
+ "inline-size": DesignToken;
603
+ "block-size": DesignToken;
604
+ color: DesignToken;
605
+ };
606
+ title: {
607
+ "font-weight": DesignToken;
608
+ "line-height": DesignToken;
609
+ "font-size": DesignToken;
610
+ "padding-block-start": DesignToken;
611
+ };
612
+ subtitle: {
613
+ "font-weight": DesignToken;
614
+ "line-height": DesignToken;
615
+ "font-size": DesignToken;
616
+ };
617
+ "column-gap": DesignToken;
618
+ "font-family": DesignToken;
619
+ color: DesignToken;
620
+ };
621
+ "message-list": {
622
+ item: {
623
+ "background-color": DesignToken;
624
+ "border-color": DesignToken;
625
+ "border-width": DesignToken;
626
+ color: DesignToken;
627
+ "column-gap": DesignToken;
628
+ icon: {
629
+ size: DesignToken;
630
+ color: DesignToken;
631
+ };
632
+ "min-height": DesignToken;
633
+ "padding-block": DesignToken;
634
+ "padding-inline": DesignToken;
635
+ content: {
636
+ "font-size": DesignToken;
637
+ "column-gap": DesignToken;
638
+ "row-gap": DesignToken;
639
+ };
640
+ label: {
641
+ "font-family": DesignToken;
642
+ "font-size": DesignToken;
643
+ "font-weight": DesignToken;
644
+ "line-height": DesignToken;
645
+ };
646
+ heading: {
647
+ color: DesignToken;
648
+ };
649
+ };
650
+ };
651
+ "nav-bar": {
652
+ "border-block-end-width": DesignToken;
653
+ "max-inline-size": DesignToken;
654
+ "padding-inline": DesignToken;
655
+ container: {
656
+ "inline-size": DesignToken;
657
+ };
658
+ content: {
659
+ "column-gap": DesignToken;
660
+ };
661
+ icon: {
662
+ color: DesignToken;
663
+ active: {
664
+ color: DesignToken;
665
+ };
666
+ size: DesignToken;
667
+ };
668
+ link: {
669
+ active: {
670
+ "background-color": DesignToken;
671
+ color: DesignToken;
672
+ };
673
+ "background-color": DesignToken;
674
+ color: DesignToken;
675
+ focus: {
676
+ "background-color": DesignToken;
677
+ color: DesignToken;
678
+ };
679
+ hover: {
680
+ "background-color": DesignToken;
681
+ color: DesignToken;
682
+ };
683
+ "padding-block-end": DesignToken;
684
+ "padding-block-start": DesignToken;
685
+ "padding-inline-end": DesignToken;
686
+ "padding-inline-start": DesignToken;
687
+ "column-gap": DesignToken;
688
+ "font-size": DesignToken;
689
+ };
690
+ heading: {
691
+ "font-weight": DesignToken;
692
+ };
693
+ "background-color": DesignToken;
694
+ color: DesignToken;
695
+ "border-color": DesignToken;
696
+ };
697
+ "navigation-list": {
698
+ icon: {
699
+ "background-color": DesignToken;
700
+ "border-radius": DesignToken;
701
+ color: DesignToken;
702
+ };
703
+ item: {
704
+ icon: {
705
+ "padding-inline": DesignToken;
706
+ "padding-block": DesignToken;
707
+ size: DesignToken;
708
+ };
709
+ content: {
710
+ "font-size": DesignToken;
711
+ "column-gap": DesignToken;
712
+ "row-gap": DesignToken;
713
+ };
714
+ label: {
715
+ "font-family": DesignToken;
716
+ "font-size": DesignToken;
717
+ "font-weight": DesignToken;
718
+ "line-height": DesignToken;
719
+ };
720
+ active: {
721
+ "background-color": DesignToken;
722
+ };
723
+ hover: {
724
+ "background-color": DesignToken;
725
+ };
726
+ focus: {
727
+ "background-color": DesignToken;
728
+ };
729
+ "background-color": DesignToken;
730
+ color: DesignToken;
731
+ "border-width": DesignToken;
732
+ "border-color": DesignToken;
733
+ heading: {
734
+ color: DesignToken;
735
+ };
736
+ "column-gap": DesignToken;
737
+ "min-height": DesignToken;
738
+ "padding-block": DesignToken;
739
+ "padding-inline": DesignToken;
740
+ };
741
+ };
742
+ "radio-group": {
743
+ "padding-block-end": DesignToken;
744
+ "padding-block-start": DesignToken;
745
+ "row-gap": DesignToken;
746
+ };
747
+ sidenav: {
748
+ display: DesignToken;
749
+ link: {
750
+ "line-height": DesignToken;
751
+ icon: {
752
+ size: DesignToken;
753
+ "margin-inline": DesignToken;
754
+ };
755
+ "font-size": DesignToken;
756
+ "font-family": DesignToken;
757
+ "font-weight": DesignToken;
758
+ current: {
759
+ "font-weight": DesignToken;
760
+ color: DesignToken;
761
+ };
762
+ color: DesignToken;
763
+ active: {
764
+ color: DesignToken;
765
+ "text-decoration": DesignToken;
766
+ };
767
+ focus: {
768
+ "border-radius": DesignToken;
769
+ "border-width": DesignToken;
770
+ "border-style": DesignToken;
771
+ "border-color": DesignToken;
772
+ "background-color": DesignToken;
773
+ color: DesignToken;
774
+ "text-decoration": DesignToken;
775
+ };
776
+ hover: {
777
+ color: DesignToken;
778
+ "text-decoration": DesignToken;
779
+ };
780
+ "padding-block-start": DesignToken;
781
+ "padding-block-end": DesignToken;
782
+ "text-decoration": DesignToken;
783
+ "column-gap": DesignToken;
784
+ };
785
+ };
786
+ "sub-nav-bar": {
787
+ "background-color": DesignToken;
788
+ "column-gap": DesignToken;
789
+ "column-width": DesignToken;
790
+ "padding-block-end": DesignToken;
791
+ "padding-block-start": DesignToken;
792
+ "inline-size": DesignToken;
793
+ content: {
794
+ "padding-inline-end": DesignToken;
795
+ "padding-inline-start": DesignToken;
796
+ "max-inline-size": DesignToken;
797
+ list: {
798
+ "row-gap": DesignToken;
799
+ };
800
+ };
801
+ };
802
+ textarea: {
803
+ focus: {
804
+ "border-width": DesignToken;
805
+ };
806
+ };
807
+ toggletip: {
808
+ color: DesignToken;
809
+ "background-color": DesignToken;
810
+ "border-color": DesignToken;
811
+ "border-radius": DesignToken;
812
+ "border-width": DesignToken;
813
+ icon: {
814
+ size: DesignToken;
815
+ };
816
+ size: DesignToken;
817
+ active: {
818
+ color: DesignToken;
819
+ "background-color": DesignToken;
820
+ "border-color": DesignToken;
821
+ };
822
+ hover: {
823
+ color: DesignToken;
824
+ "background-color": DesignToken;
825
+ };
826
+ focus: {
827
+ color: DesignToken;
828
+ "background-color": DesignToken;
829
+ };
830
+ };
831
+ "unordered-list": {
832
+ nested: {
833
+ "margin-inline-start": DesignToken;
834
+ };
835
+ };
836
+ "page-footer": {
837
+ "column-gap": DesignToken;
838
+ "column-width": DesignToken;
839
+ column: {
840
+ title: {
841
+ "margin-block-end": DesignToken;
842
+ };
843
+ };
844
+ content: {
845
+ "max-inline-size": DesignToken;
846
+ "padding-inline-start": DesignToken;
847
+ "padding-inline-end": DesignToken;
848
+ "column-gap": DesignToken;
849
+ };
850
+ "border-block-start-width": DesignToken;
851
+ "border-block-start-color": DesignToken;
852
+ "border-block-start-style": DesignToken;
853
+ outlined: {
854
+ "background-color": DesignToken;
855
+ color: DesignToken;
856
+ "border-color": DesignToken;
857
+ };
858
+ "padding-block-start": DesignToken;
859
+ "padding-block-end": DesignToken;
860
+ "padding-inline-start": DesignToken;
861
+ "padding-inline-end": DesignToken;
862
+ flex: {
863
+ direction: DesignToken;
864
+ };
865
+ };
866
+ text: {
867
+ "font-weight": {
868
+ "extra-bold": DesignToken;
869
+ bold: DesignToken;
870
+ "semi-bold": DesignToken;
871
+ regular: DesignToken;
872
+ light: DesignToken;
873
+ thin: DesignToken;
874
+ default: DesignToken;
875
+ strong: DesignToken;
876
+ };
877
+ "font-family": {
878
+ sans: DesignToken;
879
+ serif: DesignToken;
880
+ default: DesignToken;
881
+ };
882
+ "font-size": {
883
+ max: {
884
+ md: DesignToken;
885
+ lg: DesignToken;
886
+ xl: DesignToken;
887
+ "2xl": DesignToken;
888
+ "3xl": DesignToken;
889
+ };
890
+ min: {
891
+ md: DesignToken;
892
+ lg: DesignToken;
893
+ xl: DesignToken;
894
+ "2xl": DesignToken;
895
+ "3xl": DesignToken;
896
+ };
897
+ md: DesignToken;
898
+ lg: DesignToken;
899
+ xl: DesignToken;
900
+ "2xl": DesignToken;
901
+ "3xl": DesignToken;
902
+ };
903
+ "line-height": {
904
+ sm: DesignToken;
905
+ md: DesignToken;
906
+ };
907
+ };
908
+ };
909
+ todo: {
910
+ accordion: {
911
+ button: {
912
+ "font-family": DesignToken;
913
+ "font-size": DesignToken;
914
+ "font-weight": DesignToken;
915
+ "line-height": DesignToken;
916
+ };
917
+ };
918
+ checkbox: {
919
+ indeterminate: {
920
+ active: {
921
+ "background-color": DesignToken;
922
+ "border-color": DesignToken;
923
+ "border-width": DesignToken;
924
+ color: DesignToken;
925
+ };
926
+ disabled: {
927
+ "background-color": DesignToken;
928
+ "border-color": DesignToken;
929
+ color: DesignToken;
930
+ };
931
+ hover: {
932
+ "background-color": DesignToken;
933
+ "border-color": DesignToken;
934
+ "border-width": DesignToken;
935
+ color: DesignToken;
936
+ };
937
+ "focus-visible": {
938
+ "background-color": DesignToken;
939
+ "border-color": DesignToken;
940
+ "border-width": DesignToken;
941
+ color: DesignToken;
942
+ };
943
+ };
944
+ checked: {
945
+ active: {
946
+ "background-color": DesignToken;
947
+ "border-color": DesignToken;
948
+ "border-width": DesignToken;
949
+ color: DesignToken;
950
+ };
951
+ disabled: {
952
+ "background-color": DesignToken;
953
+ "border-color": DesignToken;
954
+ color: DesignToken;
955
+ };
956
+ hover: {
957
+ "background-color": DesignToken;
958
+ "border-color": DesignToken;
959
+ "border-width": DesignToken;
960
+ color: DesignToken;
961
+ };
962
+ "focus-visible": {
963
+ "background-color": DesignToken;
964
+ "border-color": DesignToken;
965
+ "border-width": DesignToken;
966
+ color: DesignToken;
967
+ };
968
+ };
969
+ };
970
+ figure: {
971
+ "row-gap": DesignToken;
972
+ };
369
973
  "form-field-error-message": {
370
- "background-color": DesignToken,
371
- "color": DesignToken,
372
- "font-family": DesignToken,
373
- "font-size": DesignToken,
374
- "font-weight": DesignToken,
375
- "line-height": DesignToken,
376
- "margin-block-end": DesignToken,
377
- "margin-block-start": DesignToken,
378
- "padding-block-end": DesignToken,
379
- "padding-block-start": DesignToken,
380
- "padding-inline-end": DesignToken,
381
- "padding-inline-start": DesignToken
382
- },
383
- "form-field-description": {
384
- "color": DesignToken,
385
- "font-family": DesignToken,
386
- "font-size": DesignToken,
387
- "line-height": DesignToken,
388
- "margin-block-end": DesignToken,
389
- "margin-block-start": DesignToken
390
- },
391
- "figure": {
392
- "caption": {
393
- "border-color": DesignToken,
394
- "border-width": DesignToken,
395
- "padding-block-end": DesignToken,
396
- "padding-block-start": DesignToken,
397
- "padding-inline-start": DesignToken,
398
- "color": DesignToken,
399
- "font-size": DesignToken,
400
- "line-height": DesignToken
401
- },
402
- "img": {
403
- "border-end-end-radius": DesignToken,
404
- "border-end-start-radius": DesignToken,
405
- "border-start-end-radius": DesignToken,
406
- "border-start-start-radius": DesignToken
407
- }
408
- },
409
- "number-badge": {
410
- "background-color": DesignToken,
411
- "border-color": DesignToken,
412
- "border-radius": DesignToken,
413
- "border-width": DesignToken,
414
- "color": DesignToken,
415
- "font-family": DesignToken,
416
- "font-size": DesignToken,
417
- "font-weight": DesignToken,
418
- "min-block-size": DesignToken,
419
- "min-inline-size": DesignToken,
420
- "padding-block": DesignToken,
421
- "padding-inline": DesignToken
422
- },
423
- "blockquote": {
424
- "background-color": DesignToken,
425
- "border-inline-start-width": DesignToken,
426
- "border-color": DesignToken,
427
- "border-radius": DesignToken,
428
- "border-width": DesignToken,
429
- "color": DesignToken,
430
- "font-size": DesignToken,
431
- "font-family": DesignToken,
432
- "padding-block-end": DesignToken,
433
- "padding-block-start": DesignToken,
434
- "padding-inline-end": DesignToken,
435
- "padding-inline-start": DesignToken,
436
- "row-gap": DesignToken,
437
- "attribution": {
438
- "color": DesignToken,
439
- "font-size": DesignToken
440
- },
441
- "content": {
442
- "color": DesignToken,
443
- "font-size": DesignToken
444
- }
445
- },
446
- "alert": {
447
- "background-color": DesignToken,
448
- "border-color": DesignToken,
449
- "border-radius": DesignToken,
450
- "border-width": DesignToken,
451
- "color": DesignToken,
452
- "column-gap": DesignToken,
453
- "margin-block-end": DesignToken,
454
- "margin-block-start": DesignToken,
455
- "padding-block-end": DesignToken,
456
- "padding-block-start": DesignToken,
457
- "padding-inline-end": DesignToken,
458
- "padding-inline-start": DesignToken,
459
- "content": {
460
- "row-gap": DesignToken
461
- },
462
- "error": {
463
- "background-color": DesignToken,
464
- "border-color": DesignToken,
465
- "color": DesignToken
466
- },
467
- "info": {
468
- "background-color": DesignToken,
469
- "border-color": DesignToken,
470
- "color": DesignToken
471
- },
472
- "message": {
473
- "row-gap": DesignToken
474
- },
475
- "ok": {
476
- "background-color": DesignToken,
477
- "border-color": DesignToken,
478
- "color": DesignToken
479
- },
480
- "warning": {
481
- "background-color": DesignToken,
482
- "border-color": DesignToken,
483
- "color": DesignToken
484
- },
485
- "icon": {
486
- "color": DesignToken,
487
- "inset-block-start": DesignToken,
488
- "size": DesignToken,
489
- "error": {
490
- "color": DesignToken
491
- },
492
- "info": {
493
- "color": DesignToken
494
- },
495
- "ok": {
496
- "color": DesignToken
497
- },
498
- "warning": {
499
- "color": DesignToken
500
- }
501
- }
502
- },
503
- "accordion": {
504
- "margin-block-end": DesignToken,
505
- "margin-block-start": DesignToken,
506
- "row-gap": DesignToken,
507
- "panel": {
508
- "border-color": DesignToken,
509
- "border-width": DesignToken,
510
- "padding-block-end": DesignToken,
511
- "padding-block-start": DesignToken,
512
- "padding-inline-end": DesignToken,
513
- "padding-inline-start": DesignToken
514
- },
515
- "button": {
516
- "background-color": DesignToken,
517
- "border-color": DesignToken,
518
- "border-radius": DesignToken,
519
- "border-width": DesignToken,
520
- "color": DesignToken,
521
- "gap": DesignToken,
522
- "padding-block-end": DesignToken,
523
- "padding-block-start": DesignToken,
524
- "padding-inline-end": DesignToken,
525
- "padding-inline-start": DesignToken,
526
- "icon": {
527
- "size": DesignToken
528
- },
529
- "active": {
530
- "background-color": DesignToken,
531
- "border-color": DesignToken,
532
- "color": DesignToken
533
- },
534
- "hover": {
535
- "background-color": DesignToken,
536
- "border-color": DesignToken,
537
- "color": DesignToken
538
- },
974
+ "column-gap": DesignToken;
975
+ icon: {
976
+ size: DesignToken;
977
+ };
978
+ };
979
+ "form-field-option-label": {
980
+ color: DesignToken;
981
+ "font-size": DesignToken;
982
+ "line-height": DesignToken;
983
+ "font-family": DesignToken;
984
+ "font-weight": DesignToken;
985
+ disabled: {
986
+ color: DesignToken;
987
+ };
988
+ };
989
+ "link-list": {
990
+ link: {
991
+ hover: {
992
+ "text-decoration": DesignToken;
993
+ };
994
+ };
995
+ };
996
+ "radio-button": {
997
+ checked: {
998
+ disabled: {
999
+ "background-color": DesignToken;
1000
+ "border-color": DesignToken;
1001
+ color: DesignToken;
1002
+ };
1003
+ };
1004
+ };
1005
+ textbox: {
1006
+ hover: {
1007
+ "background-color": DesignToken;
1008
+ "border-color": DesignToken;
1009
+ color: DesignToken;
1010
+ };
1011
+ };
1012
+ textarea: {
1013
+ hover: {
1014
+ "background-color": DesignToken;
1015
+ "border-color": DesignToken;
1016
+ color: DesignToken;
1017
+ };
1018
+ };
1019
+ };
1020
+ utrecht: {
1021
+ accordion: {
1022
+ "margin-block-end": DesignToken;
1023
+ "margin-block-start": DesignToken;
1024
+ "row-gap": DesignToken;
1025
+ panel: {
1026
+ "border-color": DesignToken;
1027
+ "border-width": DesignToken;
1028
+ "padding-block-end": DesignToken;
1029
+ "padding-block-start": DesignToken;
1030
+ "padding-inline-end": DesignToken;
1031
+ "padding-inline-start": DesignToken;
1032
+ };
1033
+ button: {
1034
+ "background-color": DesignToken;
1035
+ "border-color": DesignToken;
1036
+ "border-radius": DesignToken;
1037
+ "border-width": DesignToken;
1038
+ color: DesignToken;
1039
+ gap: DesignToken;
1040
+ "padding-block-end": DesignToken;
1041
+ "padding-block-start": DesignToken;
1042
+ "padding-inline-end": DesignToken;
1043
+ "padding-inline-start": DesignToken;
1044
+ icon: {
1045
+ size: DesignToken;
1046
+ };
1047
+ active: {
1048
+ "background-color": DesignToken;
1049
+ "border-color": DesignToken;
1050
+ color: DesignToken;
1051
+ };
1052
+ hover: {
1053
+ "background-color": DesignToken;
1054
+ "border-color": DesignToken;
1055
+ color: DesignToken;
1056
+ };
539
1057
  "focus-visible": {
540
- "background-color": DesignToken,
541
- "border-color": DesignToken,
542
- "border-width": DesignToken,
543
- "color": DesignToken
544
- }
545
- },
546
- "section": {
547
- "border-color": DesignToken,
548
- "hover": {
549
- "border-color": DesignToken
550
- },
551
- "border-width": DesignToken,
552
- "margin-block-end": DesignToken,
553
- "margin-block-start": DesignToken
554
- }
555
- },
556
- "data-badge": {
557
- "background-color": DesignToken,
558
- "border-radius": DesignToken,
559
- "color": DesignToken,
560
- "padding-block": DesignToken,
561
- "padding-inline": DesignToken
562
- },
563
- "button": {
564
- "background-color": DesignToken,
565
- "border-color": DesignToken,
566
- "border-radius": DesignToken,
567
- "border-width": DesignToken,
568
- "color": DesignToken,
569
- "column-gap": DesignToken,
570
- "font-family": DesignToken,
571
- "font-size": DesignToken,
572
- "font-weight": DesignToken,
573
- "line-height": DesignToken,
574
- "min-block-size": DesignToken,
575
- "min-inline-size": DesignToken,
576
- "padding-block-end": DesignToken,
577
- "padding-block-start": DesignToken,
578
- "padding-inline-end": DesignToken,
579
- "padding-inline-start": DesignToken,
580
- "icon": {
581
- "size": DesignToken
582
- },
583
- "pressed": {
584
- "background-color": DesignToken,
585
- "border-color": DesignToken,
586
- "color": DesignToken
587
- },
588
- "active": {
589
- "background-color": DesignToken,
590
- "border-color": DesignToken,
591
- "color": DesignToken
592
- },
593
- "disabled": {
594
- "background-color": DesignToken,
595
- "border-color": DesignToken,
596
- "color": DesignToken
597
- },
598
- "hover": {
599
- "background-color": DesignToken,
600
- "border-color": DesignToken,
601
- "color": DesignToken
602
- },
603
- "focus": {
604
- "background-color": DesignToken,
605
- "border-color": DesignToken,
606
- "color": DesignToken
607
- },
1058
+ "background-color": DesignToken;
1059
+ "border-color": DesignToken;
1060
+ "border-width": DesignToken;
1061
+ color: DesignToken;
1062
+ };
1063
+ };
1064
+ section: {
1065
+ "border-color": DesignToken;
1066
+ hover: {
1067
+ "border-color": DesignToken;
1068
+ };
1069
+ "border-width": DesignToken;
1070
+ "margin-block-end": DesignToken;
1071
+ "margin-block-start": DesignToken;
1072
+ };
1073
+ };
1074
+ "action-group": {
1075
+ "background-color": DesignToken;
1076
+ "column-gap": DesignToken;
1077
+ "padding-block-end": DesignToken;
1078
+ "padding-block-start": DesignToken;
1079
+ "row-gap": DesignToken;
1080
+ };
1081
+ alert: {
1082
+ "background-color": DesignToken;
1083
+ "border-color": DesignToken;
1084
+ "border-radius": DesignToken;
1085
+ "border-width": DesignToken;
1086
+ color: DesignToken;
1087
+ "column-gap": DesignToken;
1088
+ "margin-block-end": DesignToken;
1089
+ "margin-block-start": DesignToken;
1090
+ "padding-block-end": DesignToken;
1091
+ "padding-block-start": DesignToken;
1092
+ "padding-inline-end": DesignToken;
1093
+ "padding-inline-start": DesignToken;
1094
+ content: {
1095
+ "row-gap": DesignToken;
1096
+ };
1097
+ error: {
1098
+ "background-color": DesignToken;
1099
+ "border-color": DesignToken;
1100
+ color: DesignToken;
1101
+ };
1102
+ info: {
1103
+ "background-color": DesignToken;
1104
+ "border-color": DesignToken;
1105
+ color: DesignToken;
1106
+ };
1107
+ message: {
1108
+ "row-gap": DesignToken;
1109
+ };
1110
+ ok: {
1111
+ "background-color": DesignToken;
1112
+ "border-color": DesignToken;
1113
+ color: DesignToken;
1114
+ };
1115
+ warning: {
1116
+ "background-color": DesignToken;
1117
+ "border-color": DesignToken;
1118
+ color: DesignToken;
1119
+ };
1120
+ icon: {
1121
+ color: DesignToken;
1122
+ "inset-block-start": DesignToken;
1123
+ size: DesignToken;
1124
+ error: {
1125
+ color: DesignToken;
1126
+ };
1127
+ info: {
1128
+ color: DesignToken;
1129
+ };
1130
+ ok: {
1131
+ color: DesignToken;
1132
+ };
1133
+ warning: {
1134
+ color: DesignToken;
1135
+ };
1136
+ };
1137
+ };
1138
+ article: {
1139
+ "max-inline-size": DesignToken;
1140
+ };
1141
+ backdrop: {
1142
+ "background-color": DesignToken;
1143
+ color: DesignToken;
1144
+ opacity: DesignToken;
1145
+ "fade-in": {
1146
+ "animation-duration": DesignToken;
1147
+ };
1148
+ "reduced-transparency": {
1149
+ opacity: DesignToken;
1150
+ };
1151
+ };
1152
+ blockquote: {
1153
+ "background-color": DesignToken;
1154
+ "border-inline-start-width": DesignToken;
1155
+ "border-color": DesignToken;
1156
+ "border-radius": DesignToken;
1157
+ "border-width": DesignToken;
1158
+ color: DesignToken;
1159
+ "font-size": DesignToken;
1160
+ "font-family": DesignToken;
1161
+ "padding-block-end": DesignToken;
1162
+ "padding-block-start": DesignToken;
1163
+ "padding-inline-end": DesignToken;
1164
+ "padding-inline-start": DesignToken;
1165
+ "row-gap": DesignToken;
1166
+ attribution: {
1167
+ color: DesignToken;
1168
+ "font-size": DesignToken;
1169
+ };
1170
+ content: {
1171
+ color: DesignToken;
1172
+ "font-size": DesignToken;
1173
+ };
1174
+ };
1175
+ "breadcrumb-nav": {
1176
+ "font-family": DesignToken;
1177
+ "font-size": DesignToken;
1178
+ "line-height": DesignToken;
1179
+ "min-block-size": DesignToken;
1180
+ item: {
1181
+ "padding-block-end": DesignToken;
1182
+ "padding-block-start": DesignToken;
1183
+ "padding-inline-end": DesignToken;
1184
+ "padding-inline-start": DesignToken;
1185
+ first: {
1186
+ "padding-inline-start": DesignToken;
1187
+ };
1188
+ };
1189
+ separator: {
1190
+ color: DesignToken;
1191
+ icon: {
1192
+ size: DesignToken;
1193
+ };
1194
+ };
1195
+ link: {
1196
+ color: DesignToken;
1197
+ "text-decoration": DesignToken;
1198
+ current: {
1199
+ "font-weight": DesignToken;
1200
+ };
1201
+ active: {
1202
+ color: DesignToken;
1203
+ "text-decoration": DesignToken;
1204
+ };
1205
+ disabled: {
1206
+ color: DesignToken;
1207
+ };
1208
+ focus: {
1209
+ "background-color": DesignToken;
1210
+ color: DesignToken;
1211
+ "text-decoration": DesignToken;
1212
+ };
1213
+ hover: {
1214
+ "text-decoration": DesignToken;
1215
+ color: DesignToken;
1216
+ };
1217
+ icon: {
1218
+ size: DesignToken;
1219
+ };
1220
+ };
1221
+ };
1222
+ button: {
1223
+ "background-color": DesignToken;
1224
+ "border-color": DesignToken;
1225
+ "border-radius": DesignToken;
1226
+ "border-width": DesignToken;
1227
+ color: DesignToken;
1228
+ "column-gap": DesignToken;
1229
+ "font-family": DesignToken;
1230
+ "font-size": DesignToken;
1231
+ "font-weight": DesignToken;
1232
+ "line-height": DesignToken;
1233
+ "min-block-size": DesignToken;
1234
+ "min-inline-size": DesignToken;
1235
+ "padding-block-end": DesignToken;
1236
+ "padding-block-start": DesignToken;
1237
+ "padding-inline-end": DesignToken;
1238
+ "padding-inline-start": DesignToken;
1239
+ icon: {
1240
+ size: DesignToken;
1241
+ };
1242
+ pressed: {
1243
+ "background-color": DesignToken;
1244
+ "border-color": DesignToken;
1245
+ color: DesignToken;
1246
+ };
1247
+ active: {
1248
+ "background-color": DesignToken;
1249
+ "border-color": DesignToken;
1250
+ color: DesignToken;
1251
+ };
1252
+ disabled: {
1253
+ "background-color": DesignToken;
1254
+ "border-color": DesignToken;
1255
+ color: DesignToken;
1256
+ };
1257
+ hover: {
1258
+ "background-color": DesignToken;
1259
+ "border-color": DesignToken;
1260
+ color: DesignToken;
1261
+ };
1262
+ focus: {
1263
+ "background-color": DesignToken;
1264
+ "border-color": DesignToken;
1265
+ color: DesignToken;
1266
+ };
608
1267
  "primary-action": {
609
- "background-color": DesignToken,
610
- "border-color": DesignToken,
611
- "color": DesignToken,
612
- "font-size": DesignToken,
613
- "font-weight": DesignToken,
614
- "line-height": DesignToken,
615
- "disabled": {
616
- "background-color": DesignToken,
617
- "border-color": DesignToken,
618
- "color": DesignToken
619
- },
620
- "hover": {
621
- "background-color": DesignToken,
622
- "border-color": DesignToken,
623
- "color": DesignToken
624
- },
625
- "focus": {
626
- "background-color": DesignToken,
627
- "border-color": DesignToken,
628
- "color": DesignToken
629
- },
630
- "pressed": {
631
- "border-color": DesignToken,
632
- "color": DesignToken,
633
- "background-color": DesignToken
634
- },
635
- "active": {
636
- "border-color": DesignToken,
637
- "color": DesignToken,
638
- "background-color": DesignToken
639
- }
640
- },
1268
+ "background-color": DesignToken;
1269
+ "border-color": DesignToken;
1270
+ color: DesignToken;
1271
+ "font-size": DesignToken;
1272
+ "font-weight": DesignToken;
1273
+ "line-height": DesignToken;
1274
+ disabled: {
1275
+ "background-color": DesignToken;
1276
+ "border-color": DesignToken;
1277
+ color: DesignToken;
1278
+ };
1279
+ hover: {
1280
+ "background-color": DesignToken;
1281
+ "border-color": DesignToken;
1282
+ color: DesignToken;
1283
+ };
1284
+ focus: {
1285
+ "background-color": DesignToken;
1286
+ "border-color": DesignToken;
1287
+ color: DesignToken;
1288
+ };
1289
+ pressed: {
1290
+ "border-color": DesignToken;
1291
+ color: DesignToken;
1292
+ "background-color": DesignToken;
1293
+ };
1294
+ active: {
1295
+ "border-color": DesignToken;
1296
+ color: DesignToken;
1297
+ "background-color": DesignToken;
1298
+ };
1299
+ };
641
1300
  "secondary-action": {
642
- "background-color": DesignToken,
643
- "border-color": DesignToken,
644
- "color": DesignToken,
645
- "font-size": DesignToken,
646
- "font-weight": DesignToken,
647
- "line-height": DesignToken,
648
- "disabled": {
649
- "background-color": DesignToken,
650
- "border-color": DesignToken,
651
- "color": DesignToken
652
- },
653
- "hover": {
654
- "background-color": DesignToken,
655
- "border-color": DesignToken,
656
- "color": DesignToken
657
- },
658
- "focus": {
659
- "background-color": DesignToken,
660
- "border-color": DesignToken,
661
- "color": DesignToken
662
- },
663
- "pressed": {
664
- "background-color": DesignToken,
665
- "border-color": DesignToken,
666
- "color": DesignToken
667
- },
668
- "active": {
669
- "background-color": DesignToken,
670
- "color": DesignToken,
671
- "border-color": DesignToken
672
- }
673
- },
674
- "subtle": {
675
- "background-color": DesignToken,
676
- "border-color": DesignToken,
677
- "color": DesignToken,
678
- "font-size": DesignToken,
679
- "font-weight": DesignToken,
680
- "line-height": DesignToken,
681
- "disabled": {
682
- "background-color": DesignToken,
683
- "border-color": DesignToken,
684
- "color": DesignToken
685
- },
686
- "hover": {
687
- "background-color": DesignToken,
688
- "border-color": DesignToken,
689
- "color": DesignToken
690
- },
691
- "focus": {
692
- "background-color": DesignToken,
693
- "border-color": DesignToken,
694
- "color": DesignToken
695
- },
696
- "pressed": {
697
- "background-color": DesignToken,
698
- "border-color": DesignToken,
699
- "color": DesignToken
700
- },
701
- "active": {
702
- "background-color": DesignToken,
703
- "border-color": DesignToken,
704
- "color": DesignToken
705
- }
706
- }
707
- },
1301
+ "background-color": DesignToken;
1302
+ "border-color": DesignToken;
1303
+ color: DesignToken;
1304
+ "font-size": DesignToken;
1305
+ "font-weight": DesignToken;
1306
+ "line-height": DesignToken;
1307
+ disabled: {
1308
+ "background-color": DesignToken;
1309
+ "border-color": DesignToken;
1310
+ color: DesignToken;
1311
+ };
1312
+ hover: {
1313
+ "background-color": DesignToken;
1314
+ "border-color": DesignToken;
1315
+ color: DesignToken;
1316
+ };
1317
+ focus: {
1318
+ "background-color": DesignToken;
1319
+ "border-color": DesignToken;
1320
+ color: DesignToken;
1321
+ };
1322
+ pressed: {
1323
+ "background-color": DesignToken;
1324
+ "border-color": DesignToken;
1325
+ color: DesignToken;
1326
+ };
1327
+ active: {
1328
+ "background-color": DesignToken;
1329
+ color: DesignToken;
1330
+ "border-color": DesignToken;
1331
+ };
1332
+ };
1333
+ subtle: {
1334
+ "background-color": DesignToken;
1335
+ "border-color": DesignToken;
1336
+ color: DesignToken;
1337
+ "font-size": DesignToken;
1338
+ "font-weight": DesignToken;
1339
+ "line-height": DesignToken;
1340
+ disabled: {
1341
+ "background-color": DesignToken;
1342
+ "border-color": DesignToken;
1343
+ color: DesignToken;
1344
+ };
1345
+ hover: {
1346
+ "background-color": DesignToken;
1347
+ "border-color": DesignToken;
1348
+ color: DesignToken;
1349
+ };
1350
+ focus: {
1351
+ "background-color": DesignToken;
1352
+ "border-color": DesignToken;
1353
+ color: DesignToken;
1354
+ };
1355
+ pressed: {
1356
+ "background-color": DesignToken;
1357
+ "border-color": DesignToken;
1358
+ color: DesignToken;
1359
+ };
1360
+ active: {
1361
+ "background-color": DesignToken;
1362
+ "border-color": DesignToken;
1363
+ color: DesignToken;
1364
+ };
1365
+ };
1366
+ };
708
1367
  "button-group": {
709
- "margin-block-end": DesignToken,
710
- "margin-block-start": DesignToken
711
- },
712
- "breadcrumb-nav": {
713
- "font-family": DesignToken,
714
- "font-size": DesignToken,
715
- "line-height": DesignToken,
716
- "min-block-size": DesignToken,
717
- "item": {
718
- "padding-block-end": DesignToken,
719
- "padding-block-start": DesignToken,
720
- "padding-inline-end": DesignToken,
721
- "padding-inline-start": DesignToken,
722
- "first": {
723
- "padding-inline-start": DesignToken
724
- }
725
- },
726
- "separator": {
727
- "color": DesignToken,
728
- "icon": {
729
- "size": DesignToken
730
- }
731
- },
732
- "link": {
733
- "color": DesignToken,
734
- "text-decoration": DesignToken,
735
- "current": {
736
- "font-weight": DesignToken
737
- },
738
- "active": {
739
- "color": DesignToken,
740
- "text-decoration": DesignToken
741
- },
742
- "disabled": {
743
- "color": DesignToken
744
- },
745
- "focus": {
746
- "background-color": DesignToken,
747
- "color": DesignToken,
748
- "text-decoration": DesignToken
749
- },
750
- "hover": {
751
- "text-decoration": DesignToken,
752
- "color": DesignToken
753
- },
754
- "icon": {
755
- "size": DesignToken
756
- }
757
- }
758
- },
1368
+ "margin-block-end": DesignToken;
1369
+ "margin-block-start": DesignToken;
1370
+ };
1371
+ checkbox: {
1372
+ "background-color": DesignToken;
1373
+ "border-color": DesignToken;
1374
+ "border-radius": DesignToken;
1375
+ "border-width": DesignToken;
1376
+ size: DesignToken;
1377
+ icon: {
1378
+ size: DesignToken;
1379
+ };
1380
+ invalid: {
1381
+ "background-color": DesignToken;
1382
+ "border-color": DesignToken;
1383
+ "border-width": DesignToken;
1384
+ };
1385
+ active: {
1386
+ "background-color": DesignToken;
1387
+ "border-color": DesignToken;
1388
+ "border-width": DesignToken;
1389
+ };
1390
+ disabled: {
1391
+ "background-color": DesignToken;
1392
+ "border-color": DesignToken;
1393
+ };
1394
+ hover: {
1395
+ "background-color": DesignToken;
1396
+ "border-color": DesignToken;
1397
+ "border-width": DesignToken;
1398
+ };
1399
+ focus: {
1400
+ "background-color": DesignToken;
1401
+ "border-color": DesignToken;
1402
+ "border-width": DesignToken;
1403
+ };
1404
+ indeterminate: {
1405
+ "background-color": DesignToken;
1406
+ "border-color": DesignToken;
1407
+ "border-width": DesignToken;
1408
+ color: DesignToken;
1409
+ active: {
1410
+ "background-color": DesignToken;
1411
+ "border-color": DesignToken;
1412
+ color: DesignToken;
1413
+ "border-width": DesignToken;
1414
+ };
1415
+ disabled: {
1416
+ "background-color": DesignToken;
1417
+ "border-color": DesignToken;
1418
+ color: DesignToken;
1419
+ };
1420
+ hover: {
1421
+ "background-color": DesignToken;
1422
+ "border-color": DesignToken;
1423
+ color: DesignToken;
1424
+ "border-width": DesignToken;
1425
+ };
1426
+ focus: {
1427
+ "background-color": DesignToken;
1428
+ "border-color": DesignToken;
1429
+ color: DesignToken;
1430
+ "border-width": DesignToken;
1431
+ };
1432
+ };
1433
+ checked: {
1434
+ "background-color": DesignToken;
1435
+ "border-color": DesignToken;
1436
+ "border-width": DesignToken;
1437
+ color: DesignToken;
1438
+ active: {
1439
+ "background-color": DesignToken;
1440
+ "border-color": DesignToken;
1441
+ color: DesignToken;
1442
+ "border-width": DesignToken;
1443
+ };
1444
+ disabled: {
1445
+ "background-color": DesignToken;
1446
+ "border-color": DesignToken;
1447
+ color: DesignToken;
1448
+ };
1449
+ hover: {
1450
+ "background-color": DesignToken;
1451
+ "border-color": DesignToken;
1452
+ color: DesignToken;
1453
+ "border-width": DesignToken;
1454
+ };
1455
+ focus: {
1456
+ "background-color": DesignToken;
1457
+ "border-color": DesignToken;
1458
+ color: DesignToken;
1459
+ "border-width": DesignToken;
1460
+ };
1461
+ };
1462
+ };
1463
+ "column-layout": {
1464
+ "column-rule-color": DesignToken;
1465
+ "column-rule-width": DesignToken;
1466
+ "column-width": DesignToken;
1467
+ gap: DesignToken;
1468
+ };
1469
+ "data-badge": {
1470
+ "background-color": DesignToken;
1471
+ "border-radius": DesignToken;
1472
+ color: DesignToken;
1473
+ "padding-block": DesignToken;
1474
+ "padding-inline": DesignToken;
1475
+ };
1476
+ drawer: {
1477
+ "max-inline-size": DesignToken;
1478
+ "z-index": DesignToken;
1479
+ "background-color": DesignToken;
1480
+ "border-color": DesignToken;
1481
+ "border-width": DesignToken;
1482
+ color: DesignToken;
1483
+ "max-block-size": DesignToken;
1484
+ "padding-block-start": DesignToken;
1485
+ "padding-block-end": DesignToken;
1486
+ "padding-inline-start": DesignToken;
1487
+ "padding-inline-end": DesignToken;
1488
+ };
1489
+ "form-fieldset": {
1490
+ legend: {
1491
+ color: DesignToken;
1492
+ "font-family": DesignToken;
1493
+ "font-size": DesignToken;
1494
+ "font-weight": DesignToken;
1495
+ "line-height": DesignToken;
1496
+ disabled: {
1497
+ color: DesignToken;
1498
+ };
1499
+ };
1500
+ section: {
1501
+ "background-color": DesignToken;
1502
+ color: DesignToken;
1503
+ };
1504
+ invalid: {
1505
+ "border-inline-start": {
1506
+ color: DesignToken;
1507
+ };
1508
+ "padding-inline-start": DesignToken;
1509
+ "border-inline-start-width": DesignToken;
1510
+ };
1511
+ };
1512
+ figure: {
1513
+ caption: {
1514
+ color: DesignToken;
1515
+ "font-size": DesignToken;
1516
+ "line-height": DesignToken;
1517
+ };
1518
+ };
1519
+ "form-field": {
1520
+ label: {
1521
+ "margin-block-end": DesignToken;
1522
+ };
1523
+ "margin-block-end": DesignToken;
1524
+ "margin-block-start": DesignToken;
1525
+ invalid: {
1526
+ "border-inline-start-color": DesignToken;
1527
+ "border-inline-start-width": DesignToken;
1528
+ "padding-inline-start": DesignToken;
1529
+ };
1530
+ };
1531
+ "form-field-description": {
1532
+ color: DesignToken;
1533
+ "font-family": DesignToken;
1534
+ "font-size": DesignToken;
1535
+ "line-height": DesignToken;
1536
+ "margin-block-end": DesignToken;
1537
+ "margin-block-start": DesignToken;
1538
+ };
1539
+ "form-field-error-message": {
1540
+ "background-color": DesignToken;
1541
+ color: DesignToken;
1542
+ "font-family": DesignToken;
1543
+ "font-size": DesignToken;
1544
+ "font-weight": DesignToken;
1545
+ "line-height": DesignToken;
1546
+ "margin-block-end": DesignToken;
1547
+ "margin-block-start": DesignToken;
1548
+ "padding-block-end": DesignToken;
1549
+ "padding-block-start": DesignToken;
1550
+ "padding-inline-end": DesignToken;
1551
+ "padding-inline-start": DesignToken;
1552
+ };
1553
+ icon: {
1554
+ baseline: {
1555
+ "inset-block-start": DesignToken;
1556
+ };
1557
+ color: DesignToken;
1558
+ size: DesignToken;
1559
+ "inset-block-start": DesignToken;
1560
+ };
759
1561
  "link-list": {
760
- "margin-block-end": DesignToken,
761
- "margin-block-start": DesignToken,
762
- "row-gap": DesignToken,
763
- "icon": {
764
- "inset-block-start": DesignToken,
765
- "size": DesignToken
766
- },
767
- "link": {
768
- "column-gap": DesignToken,
769
- "text-decoration": DesignToken
770
- },
771
- "font-weight": DesignToken
772
- },
773
- "action": {
774
- "activate": {
775
- "cursor": DesignToken
776
- },
777
- "busy": {
778
- "cursor": DesignToken
779
- },
780
- "disabled": {
781
- "cursor": DesignToken
782
- },
783
- "inert": {
784
- "cursor": DesignToken
785
- },
786
- "navigate": {
787
- "cursor": DesignToken
788
- },
789
- "submit": {
790
- "cursor": DesignToken
791
- }
792
- },
793
- "unordered-list": {
794
- "font-size": DesignToken,
795
- "line-height": DesignToken,
796
- "margin-block-end": DesignToken,
797
- "margin-block-start": DesignToken,
798
- "padding-inline-start": DesignToken,
799
- "item": {
800
- "margin-block-end": DesignToken,
801
- "margin-block-start": DesignToken,
802
- "padding-inline-start": DesignToken
803
- },
804
- "marker": {
805
- "color": DesignToken
806
- }
807
- },
1562
+ "margin-block-end": DesignToken;
1563
+ "margin-block-start": DesignToken;
1564
+ "row-gap": DesignToken;
1565
+ icon: {
1566
+ "inset-block-start": DesignToken;
1567
+ size: DesignToken;
1568
+ };
1569
+ link: {
1570
+ "column-gap": DesignToken;
1571
+ "text-decoration": DesignToken;
1572
+ "font-weight": DesignToken;
1573
+ };
1574
+ };
1575
+ link: {
1576
+ color: DesignToken;
1577
+ "text-decoration-color": DesignToken;
1578
+ "column-gap": DesignToken;
1579
+ "text-decoration": DesignToken;
1580
+ "text-decoration-thickness": DesignToken;
1581
+ "text-underline-offset": DesignToken;
1582
+ icon: {
1583
+ size: DesignToken;
1584
+ };
1585
+ active: {
1586
+ color: DesignToken;
1587
+ };
1588
+ hover: {
1589
+ color: DesignToken;
1590
+ "text-decoration": DesignToken;
1591
+ "text-decoration-thickness": DesignToken;
1592
+ };
1593
+ focus: {
1594
+ "background-color": DesignToken;
1595
+ color: DesignToken;
1596
+ };
1597
+ "focus-visible": {
1598
+ "text-decoration": DesignToken;
1599
+ "text-decoration-thickness": DesignToken;
1600
+ };
1601
+ visited: {
1602
+ color: DesignToken;
1603
+ };
1604
+ };
1605
+ "number-badge": {
1606
+ "background-color": DesignToken;
1607
+ "border-color": DesignToken;
1608
+ "border-radius": DesignToken;
1609
+ "border-width": DesignToken;
1610
+ color: DesignToken;
1611
+ "font-family": DesignToken;
1612
+ "font-size": DesignToken;
1613
+ "font-weight": DesignToken;
1614
+ "min-block-size": DesignToken;
1615
+ "min-inline-size": DesignToken;
1616
+ "padding-block": DesignToken;
1617
+ "padding-inline": DesignToken;
1618
+ };
808
1619
  "ordered-list": {
809
- "font-size": DesignToken,
810
- "line-height": DesignToken,
811
- "margin-block-end": DesignToken,
812
- "margin-block-start": DesignToken,
813
- "padding-inline-start": DesignToken,
814
- "item": {
815
- "margin-block-end": DesignToken,
816
- "margin-block-start": DesignToken,
817
- "padding-inline-start": DesignToken
818
- }
819
- },
820
- "action-group": {
821
- "background-color": DesignToken,
822
- "column-gap": DesignToken,
823
- "padding-block-end": DesignToken,
824
- "padding-block-start": DesignToken,
825
- "row-gap": DesignToken
826
- },
827
- "column-layout": {
828
- "column-rule-color": DesignToken,
829
- "column-rule-width": DesignToken,
830
- "column-width": DesignToken,
831
- "gap": DesignToken
832
- },
833
- "icon": {
834
- "color": DesignToken,
835
- "size": DesignToken,
836
- "inset-block-start": DesignToken
837
- },
838
- "table": {
1620
+ "font-size": DesignToken;
1621
+ "line-height": DesignToken;
1622
+ "margin-block-end": DesignToken;
1623
+ "margin-block-start": DesignToken;
1624
+ "padding-inline-start": DesignToken;
1625
+ item: {
1626
+ "margin-block-end": DesignToken;
1627
+ "margin-block-start": DesignToken;
1628
+ "padding-inline-start": DesignToken;
1629
+ };
1630
+ };
1631
+ "pre-heading": {
1632
+ color: DesignToken;
1633
+ "font-family": DesignToken;
1634
+ "font-weight": DesignToken;
1635
+ "line-height": DesignToken;
1636
+ "font-size": DesignToken;
1637
+ };
1638
+ "radio-button": {
1639
+ "background-color": DesignToken;
1640
+ "border-color": DesignToken;
1641
+ color: DesignToken;
1642
+ "border-width": DesignToken;
1643
+ size: DesignToken;
1644
+ icon: {
1645
+ size: DesignToken;
1646
+ };
1647
+ invalid: {
1648
+ "background-color": DesignToken;
1649
+ "border-color": DesignToken;
1650
+ color: DesignToken;
1651
+ "border-width": DesignToken;
1652
+ };
1653
+ active: {
1654
+ "background-color": DesignToken;
1655
+ "border-color": DesignToken;
1656
+ color: DesignToken;
1657
+ "border-width": DesignToken;
1658
+ };
1659
+ disabled: {
1660
+ "background-color": DesignToken;
1661
+ "border-color": DesignToken;
1662
+ color: DesignToken;
1663
+ };
1664
+ hover: {
1665
+ "background-color": DesignToken;
1666
+ "border-color": DesignToken;
1667
+ color: DesignToken;
1668
+ "border-width": DesignToken;
1669
+ };
1670
+ focus: {
1671
+ "background-color": DesignToken;
1672
+ "border-color": DesignToken;
1673
+ color: DesignToken;
1674
+ "border-width": DesignToken;
1675
+ };
1676
+ checked: {
1677
+ "background-color": DesignToken;
1678
+ "border-color": DesignToken;
1679
+ "border-width": DesignToken;
1680
+ color: DesignToken;
1681
+ active: {
1682
+ "background-color": DesignToken;
1683
+ "border-color": DesignToken;
1684
+ "border-width": DesignToken;
1685
+ color: DesignToken;
1686
+ };
1687
+ hover: {
1688
+ "background-color": DesignToken;
1689
+ "border-color": DesignToken;
1690
+ "border-width": DesignToken;
1691
+ color: DesignToken;
1692
+ };
1693
+ focus: {
1694
+ "background-color": DesignToken;
1695
+ "border-color": DesignToken;
1696
+ "border-width": DesignToken;
1697
+ color: DesignToken;
1698
+ };
1699
+ };
1700
+ };
1701
+ select: {
1702
+ "background-color": DesignToken;
1703
+ "border-block-end-width": DesignToken;
1704
+ "border-color": DesignToken;
1705
+ "border-radius": DesignToken;
1706
+ "border-width": DesignToken;
1707
+ color: DesignToken;
1708
+ "font-family": DesignToken;
1709
+ "font-size": DesignToken;
1710
+ "font-weight": DesignToken;
1711
+ icon: {
1712
+ size: DesignToken;
1713
+ };
1714
+ "image-background-position": DesignToken;
1715
+ "line-height": DesignToken;
1716
+ "max-inline-size": DesignToken;
1717
+ "min-block-size": DesignToken;
1718
+ "padding-block-end": DesignToken;
1719
+ "padding-block-start": DesignToken;
1720
+ "padding-inline-end": DesignToken;
1721
+ "padding-inline-start": DesignToken;
1722
+ invalid: {
1723
+ "background-color": DesignToken;
1724
+ "border-block-end-width": DesignToken;
1725
+ "border-color": DesignToken;
1726
+ "border-width": DesignToken;
1727
+ };
1728
+ disabled: {
1729
+ "background-color": DesignToken;
1730
+ "border-color": DesignToken;
1731
+ color: DesignToken;
1732
+ };
1733
+ hover: {
1734
+ "background-color": DesignToken;
1735
+ "border-color": DesignToken;
1736
+ color: DesignToken;
1737
+ };
1738
+ focus: {
1739
+ "background-color": DesignToken;
1740
+ "border-color": DesignToken;
1741
+ "border-width": DesignToken;
1742
+ color: DesignToken;
1743
+ };
1744
+ };
1745
+ separator: {
1746
+ "block-size": DesignToken;
1747
+ color: DesignToken;
1748
+ "margin-block-end": DesignToken;
1749
+ "margin-block-start": DesignToken;
1750
+ };
1751
+ "status-badge": {
1752
+ "font-size": DesignToken;
1753
+ "line-height": DesignToken;
1754
+ "font-weight": DesignToken;
1755
+ "border-width": DesignToken;
1756
+ "font-family": DesignToken;
1757
+ "border-radius": DesignToken;
1758
+ "padding-inline": DesignToken;
1759
+ "padding-block": DesignToken;
1760
+ informative: {
1761
+ "background-color": DesignToken;
1762
+ "border-color": DesignToken;
1763
+ color: DesignToken;
1764
+ };
1765
+ positive: {
1766
+ "background-color": DesignToken;
1767
+ "border-color": DesignToken;
1768
+ color: DesignToken;
1769
+ };
1770
+ negative: {
1771
+ "background-color": DesignToken;
1772
+ "border-color": DesignToken;
1773
+ color: DesignToken;
1774
+ };
1775
+ warning: {
1776
+ "background-color": DesignToken;
1777
+ "border-color": DesignToken;
1778
+ color: DesignToken;
1779
+ };
1780
+ "background-color": DesignToken;
1781
+ "border-color": DesignToken;
1782
+ color: DesignToken;
1783
+ };
1784
+ table: {
839
1785
  "header-cell": {
840
- "line-height": DesignToken,
841
- "color": DesignToken,
842
- "font-family": DesignToken,
843
- "font-weight": DesignToken,
844
- "font-size": DesignToken
845
- },
846
- "caption": {
847
- "line-height": DesignToken,
848
- "margin-block-end": DesignToken,
849
- "color": DesignToken,
850
- "font-family": DesignToken,
851
- "font-weight": DesignToken,
852
- "font-size": DesignToken
853
- },
854
- "cell": {
855
- "padding-block-end": DesignToken,
856
- "padding-block-start": DesignToken,
857
- "padding-inline-end": DesignToken,
858
- "padding-inline-start": DesignToken,
859
- "line-height": DesignToken
860
- },
1786
+ "line-height": DesignToken;
1787
+ color: DesignToken;
1788
+ "font-family": DesignToken;
1789
+ "font-weight": DesignToken;
1790
+ "font-size": DesignToken;
1791
+ };
1792
+ caption: {
1793
+ "line-height": DesignToken;
1794
+ "margin-block-end": DesignToken;
1795
+ color: DesignToken;
1796
+ "font-family": DesignToken;
1797
+ "font-weight": DesignToken;
1798
+ "font-size": DesignToken;
1799
+ };
1800
+ cell: {
1801
+ "padding-block-end": DesignToken;
1802
+ "padding-block-start": DesignToken;
1803
+ "padding-inline-end": DesignToken;
1804
+ "padding-inline-start": DesignToken;
1805
+ "line-height": DesignToken;
1806
+ };
861
1807
  "data-cell": {
862
- "color": DesignToken,
863
- "font-family": DesignToken,
864
- "font-weight": DesignToken,
865
- "line-height": DesignToken,
866
- "font-size": DesignToken
867
- },
868
- "header": {
869
- "border-block-end-width": DesignToken,
870
- "border-block-end-color": DesignToken,
871
- "background-color": DesignToken
872
- },
873
- "footer": {
874
- "border-block-end-width": DesignToken,
875
- "border-block-end-color": DesignToken,
876
- "background-color": DesignToken
877
- },
878
- "row": {
879
- "border-block-end-width": DesignToken,
880
- "border-block-end-color": DesignToken,
881
- "background-color": DesignToken
882
- },
1808
+ color: DesignToken;
1809
+ "font-family": DesignToken;
1810
+ "font-weight": DesignToken;
1811
+ "line-height": DesignToken;
1812
+ "font-size": DesignToken;
1813
+ };
1814
+ header: {
1815
+ "border-block-end-width": DesignToken;
1816
+ "border-block-end-color": DesignToken;
1817
+ "background-color": DesignToken;
1818
+ };
1819
+ footer: {
1820
+ "border-block-end-width": DesignToken;
1821
+ "border-block-end-color": DesignToken;
1822
+ "background-color": DesignToken;
1823
+ };
1824
+ row: {
1825
+ "border-block-end-width": DesignToken;
1826
+ "border-block-end-color": DesignToken;
1827
+ "background-color": DesignToken;
1828
+ };
883
1829
  "footer-cell": {
884
- "font-weight": DesignToken,
885
- "font-size": DesignToken,
886
- "color": DesignToken,
887
- "font-family": DesignToken,
888
- "line-height": DesignToken
889
- },
890
- "container": {
1830
+ "font-weight": DesignToken;
1831
+ "font-size": DesignToken;
1832
+ color: DesignToken;
1833
+ "font-family": DesignToken;
1834
+ "line-height": DesignToken;
1835
+ };
1836
+ container: {
891
1837
  "box-inline-end-shadow": {
892
- "x": DesignToken,
893
- "y": DesignToken,
894
- "blur": DesignToken,
895
- "spread": DesignToken,
896
- "color": DesignToken
897
- },
1838
+ x: DesignToken;
1839
+ y: DesignToken;
1840
+ blur: DesignToken;
1841
+ spread: DesignToken;
1842
+ color: DesignToken;
1843
+ };
898
1844
  "box-inline-start-shadow": {
899
- "x": DesignToken,
900
- "y": DesignToken,
901
- "blur": DesignToken,
902
- "spread": DesignToken,
903
- "color": DesignToken
904
- }
905
- },
906
- "font-size": DesignToken
907
- },
908
- "separator": {
909
- "block-size": DesignToken,
910
- "color": DesignToken,
911
- "margin-block-end": DesignToken,
912
- "margin-block-start": DesignToken
913
- },
914
- "pre-heading": {
915
- "color": DesignToken,
916
- "font-family": DesignToken,
917
- "font-weight": DesignToken,
918
- "line-height": DesignToken,
919
- "font-size": DesignToken
920
- },
921
- "link": {
922
- "color": DesignToken,
923
- "text-decoration-color": DesignToken,
924
- "column-gap": DesignToken,
925
- "text-decoration": DesignToken,
926
- "text-decoration-thickness": DesignToken,
927
- "text-underline-offset": DesignToken,
928
- "icon": {
929
- "size": DesignToken
930
- },
931
- "active": {
932
- "color": DesignToken
933
- },
934
- "hover": {
935
- "color": DesignToken,
936
- "text-decoration": DesignToken,
937
- "text-decoration-thickness": DesignToken
938
- },
939
- "focus": {
940
- "background-color": DesignToken,
941
- "color": DesignToken
942
- },
943
- "focus-visible": {
944
- "text-decoration": DesignToken,
945
- "text-decoration-thickness": DesignToken
946
- },
947
- "visited": {
948
- "color": DesignToken
949
- }
950
- },
951
- "page-footer": {
952
- "background-color": DesignToken,
953
- "color": DesignToken,
954
- "padding-block-start": DesignToken,
955
- "padding-block-end": DesignToken,
956
- "padding-inline-start": DesignToken,
957
- "padding-inline-end": DesignToken
958
- },
959
- "form-fieldset": {
960
- "legend": {
961
- "color": DesignToken,
962
- "font-family": DesignToken,
963
- "font-size": DesignToken,
964
- "font-weight": DesignToken,
965
- "line-height": DesignToken,
966
- "disabled": {
967
- "color": DesignToken
968
- }
969
- },
970
- "section": {
971
- "background-color": DesignToken,
972
- "color": DesignToken
973
- },
974
- "invalid": {
975
- "border-inline-start": {
976
- "color": DesignToken
977
- },
978
- "padding-inline-start": DesignToken,
979
- "border-inline-start-width": DesignToken
980
- }
981
- },
982
- "drawer": {
983
- "max-inline-size": DesignToken,
984
- "z-index": DesignToken,
985
- "background-color": DesignToken,
986
- "border-color": DesignToken,
987
- "border-width": DesignToken,
988
- "color": DesignToken,
989
- "max-block-size": DesignToken,
990
- "padding-block-start": DesignToken,
991
- "padding-block-end": DesignToken,
992
- "padding-inline-start": DesignToken,
993
- "padding-inline-end": DesignToken
994
- },
995
- "backdrop": {
996
- "background-color": DesignToken,
997
- "color": DesignToken,
998
- "opacity": DesignToken,
999
- "fade-in": {
1000
- "animation-duration": DesignToken
1001
- },
1002
- "reduced-transparency": {
1003
- "opacity": DesignToken
1004
- }
1005
- },
1006
- "article": {
1007
- "max-inline-size": DesignToken
1008
- },
1009
- "document": {
1010
- "background-color": DesignToken,
1011
- "color": DesignToken,
1012
- "font-family": DesignToken,
1013
- "font-size": DesignToken,
1014
- "line-height": DesignToken,
1015
- "font-weight": DesignToken
1016
- },
1845
+ x: DesignToken;
1846
+ y: DesignToken;
1847
+ blur: DesignToken;
1848
+ spread: DesignToken;
1849
+ color: DesignToken;
1850
+ };
1851
+ };
1852
+ "font-size": DesignToken;
1853
+ };
1854
+ textbox: {
1855
+ "background-color": DesignToken;
1856
+ "border-block-end-width": DesignToken;
1857
+ "border-color": DesignToken;
1858
+ "border-radius": DesignToken;
1859
+ "border-width": DesignToken;
1860
+ color: DesignToken;
1861
+ "font-family": DesignToken;
1862
+ "font-size": DesignToken;
1863
+ "font-weight": DesignToken;
1864
+ "line-height": DesignToken;
1865
+ "max-inline-size": DesignToken;
1866
+ "min-block-size": DesignToken;
1867
+ "padding-block-end": DesignToken;
1868
+ "padding-block-start": DesignToken;
1869
+ "padding-inline-end": DesignToken;
1870
+ "padding-inline-start": DesignToken;
1871
+ invalid: {
1872
+ "background-color": DesignToken;
1873
+ "border-block-end-width": DesignToken;
1874
+ "border-color": DesignToken;
1875
+ "border-width": DesignToken;
1876
+ color: DesignToken;
1877
+ };
1878
+ placeholder: {
1879
+ color: DesignToken;
1880
+ };
1881
+ "read-only": {
1882
+ "background-color": DesignToken;
1883
+ "border-color": DesignToken;
1884
+ color: DesignToken;
1885
+ };
1886
+ disabled: {
1887
+ "background-color": DesignToken;
1888
+ "border-color": DesignToken;
1889
+ color: DesignToken;
1890
+ };
1891
+ focus: {
1892
+ "background-color": DesignToken;
1893
+ "border-color": DesignToken;
1894
+ color: DesignToken;
1895
+ "border-width": DesignToken;
1896
+ };
1897
+ hover: {
1898
+ "background-color": DesignToken;
1899
+ "border-color": DesignToken;
1900
+ "border-width": DesignToken;
1901
+ color: DesignToken;
1902
+ };
1903
+ };
1904
+ textarea: {
1905
+ "background-color": DesignToken;
1906
+ "border-block-end-width": DesignToken;
1907
+ "border-color": DesignToken;
1908
+ "border-radius": DesignToken;
1909
+ "border-width": DesignToken;
1910
+ color: DesignToken;
1911
+ "font-family": DesignToken;
1912
+ "font-size": DesignToken;
1913
+ "font-weight": DesignToken;
1914
+ "line-height": DesignToken;
1915
+ "max-inline-size": DesignToken;
1916
+ "min-block-size": DesignToken;
1917
+ "padding-block-end": DesignToken;
1918
+ "padding-block-start": DesignToken;
1919
+ "padding-inline-end": DesignToken;
1920
+ "padding-inline-start": DesignToken;
1921
+ invalid: {
1922
+ "background-color": DesignToken;
1923
+ "border-block-end-width": DesignToken;
1924
+ "border-color": DesignToken;
1925
+ "border-width": DesignToken;
1926
+ color: DesignToken;
1927
+ };
1928
+ placeholder: {
1929
+ color: DesignToken;
1930
+ };
1931
+ "read-only": {
1932
+ "background-color": DesignToken;
1933
+ "border-color": DesignToken;
1934
+ color: DesignToken;
1935
+ };
1936
+ disabled: {
1937
+ "background-color": DesignToken;
1938
+ "border-color": DesignToken;
1939
+ color: DesignToken;
1940
+ };
1941
+ focus: {
1942
+ "background-color": DesignToken;
1943
+ "border-color": DesignToken;
1944
+ color: DesignToken;
1945
+ };
1946
+ };
1947
+ "unordered-list": {
1948
+ "font-size": DesignToken;
1949
+ "line-height": DesignToken;
1950
+ "margin-block-end": DesignToken;
1951
+ "margin-block-start": DesignToken;
1952
+ "padding-inline-start": DesignToken;
1953
+ item: {
1954
+ "margin-block-end": DesignToken;
1955
+ "margin-block-start": DesignToken;
1956
+ "padding-inline-start": DesignToken;
1957
+ };
1958
+ marker: {
1959
+ color: DesignToken;
1960
+ };
1961
+ };
1962
+ document: {
1963
+ "background-color": DesignToken;
1964
+ color: DesignToken;
1965
+ "font-family": DesignToken;
1966
+ "font-size": DesignToken;
1967
+ "line-height": DesignToken;
1968
+ "font-weight": DesignToken;
1969
+ };
1017
1970
  "rich-text": {
1018
- "stranger": {
1019
- "margin-block-end": DesignToken
1020
- },
1021
- "acquaintance": {
1022
- "margin-block-end": DesignToken
1023
- },
1024
- "friend": {
1025
- "margin-block-end": DesignToken
1026
- },
1971
+ stranger: {
1972
+ "margin-block-end": DesignToken;
1973
+ };
1974
+ acquaintance: {
1975
+ "margin-block-end": DesignToken;
1976
+ };
1977
+ friend: {
1978
+ "margin-block-end": DesignToken;
1979
+ };
1027
1980
  "best-friend": {
1028
- "margin-block-end": DesignToken
1029
- },
1030
- "confidant": {
1031
- "margin-block-end": DesignToken
1032
- }
1033
- },
1981
+ "margin-block-end": DesignToken;
1982
+ };
1983
+ confidant: {
1984
+ "margin-block-end": DesignToken;
1985
+ };
1986
+ };
1987
+ "form-label": {
1988
+ color: DesignToken;
1989
+ "font-size": DesignToken;
1990
+ "font-weight": DesignToken;
1991
+ checkbox: {
1992
+ color: DesignToken;
1993
+ "font-weight": DesignToken;
1994
+ };
1995
+ radio: {
1996
+ color: DesignToken;
1997
+ "font-weight": DesignToken;
1998
+ };
1999
+ checked: {
2000
+ "font-weight": DesignToken;
2001
+ };
2002
+ disabled: {
2003
+ color: DesignToken;
2004
+ };
2005
+ };
2006
+ "page-footer": {
2007
+ "background-color": DesignToken;
2008
+ color: DesignToken;
2009
+ "padding-block-start": DesignToken;
2010
+ "padding-block-end": DesignToken;
2011
+ "padding-inline-start": DesignToken;
2012
+ "padding-inline-end": DesignToken;
2013
+ };
2014
+ focus: {
2015
+ "outline-color": DesignToken;
2016
+ inverse: {
2017
+ "outline-color": DesignToken;
2018
+ };
2019
+ "outline-offset": DesignToken;
2020
+ "outline-width": DesignToken;
2021
+ "outline-style": DesignToken;
2022
+ };
1034
2023
  "pointer-target": {
1035
- "min-size": DesignToken
1036
- },
1037
- "focus": {
1038
- "outline-color": DesignToken,
1039
- "outline-offset": DesignToken,
1040
- "outline-style": DesignToken,
1041
- "outline-width": DesignToken,
1042
- "inverse": {
1043
- "outline-color": DesignToken
1044
- }
1045
- }
1046
- },
1047
- "todo": {
1048
- "checkbox": {
1049
- "indeterminate": {
1050
- "active": {
1051
- "background-color": DesignToken,
1052
- "border-color": DesignToken,
1053
- "border-width": DesignToken,
1054
- "color": DesignToken
1055
- },
1056
- "disabled": {
1057
- "background-color": DesignToken,
1058
- "border-color": DesignToken,
1059
- "color": DesignToken
1060
- },
1061
- "hover": {
1062
- "background-color": DesignToken,
1063
- "border-color": DesignToken,
1064
- "border-width": DesignToken,
1065
- "color": DesignToken
1066
- },
1067
- "focus-visible": {
1068
- "background-color": DesignToken,
1069
- "border-color": DesignToken,
1070
- "border-width": DesignToken,
1071
- "color": DesignToken
1072
- }
1073
- },
1074
- "checked": {
1075
- "active": {
1076
- "background-color": DesignToken,
1077
- "border-color": DesignToken,
1078
- "border-width": DesignToken,
1079
- "color": DesignToken
1080
- },
1081
- "disabled": {
1082
- "background-color": DesignToken,
1083
- "border-color": DesignToken,
1084
- "color": DesignToken
1085
- },
1086
- "hover": {
1087
- "background-color": DesignToken,
1088
- "border-color": DesignToken,
1089
- "border-width": DesignToken,
1090
- "color": DesignToken
1091
- },
1092
- "focus-visible": {
1093
- "background-color": DesignToken,
1094
- "border-color": DesignToken,
1095
- "border-width": DesignToken,
1096
- "color": DesignToken
1097
- }
1098
- }
1099
- },
1100
- "radio-button": {
1101
- "checked": {
1102
- "disabled": {
1103
- "background-color": DesignToken,
1104
- "border-color": DesignToken,
1105
- "color": DesignToken
1106
- }
1107
- }
1108
- },
1109
- "textbox": {
1110
- "hover": {
1111
- "background-color": DesignToken,
1112
- "border-color": DesignToken,
1113
- "color": DesignToken
1114
- }
1115
- },
1116
- "form-field-label": {
1117
- "color": DesignToken,
1118
- "column-gap": DesignToken,
1119
- "font-family": DesignToken,
1120
- "font-size": DesignToken,
1121
- "font-weight": DesignToken,
1122
- "line-height": DesignToken
1123
- },
1124
- "textarea": {
1125
- "hover": {
1126
- "background-color": DesignToken,
1127
- "border-color": DesignToken,
1128
- "color": DesignToken
1129
- }
1130
- },
1131
- "form-field-error-message": {
1132
- "column-gap": DesignToken,
1133
- "icon": {
1134
- "size": DesignToken
1135
- }
1136
- },
1137
- "figure": {
1138
- "row-gap": DesignToken
1139
- },
1140
- "accordion": {
1141
- "button": {
1142
- "font-family": DesignToken,
1143
- "font-size": DesignToken,
1144
- "font-weight": DesignToken,
1145
- "line-height": DesignToken
1146
- }
1147
- },
1148
- "link-list": {
1149
- "link": {
1150
- "hover": {
1151
- "text-decoration": DesignToken
1152
- }
1153
- }
1154
- }
1155
- },
1156
- "nl": {
2024
+ "min-size": DesignToken;
2025
+ };
2026
+ action: {
2027
+ activate: {
2028
+ cursor: DesignToken;
2029
+ };
2030
+ busy: {
2031
+ cursor: DesignToken;
2032
+ };
2033
+ disabled: {
2034
+ cursor: DesignToken;
2035
+ };
2036
+ inert: {
2037
+ cursor: DesignToken;
2038
+ };
2039
+ navigate: {
2040
+ cursor: DesignToken;
2041
+ };
2042
+ submit: {
2043
+ cursor: DesignToken;
2044
+ };
2045
+ };
2046
+ };
2047
+ nl: {
2048
+ link: {
2049
+ color: DesignToken;
2050
+ "text-decoration-color": DesignToken;
2051
+ "text-decoration-line": DesignToken;
2052
+ "text-decoration-thickness": DesignToken;
2053
+ "text-underline-offset": DesignToken;
2054
+ current: {
2055
+ cursor: DesignToken;
2056
+ };
2057
+ active: {
2058
+ color: DesignToken;
2059
+ };
2060
+ disabled: {
2061
+ color: DesignToken;
2062
+ cursor: DesignToken;
2063
+ };
2064
+ hover: {
2065
+ "text-decoration-line": DesignToken;
2066
+ "text-decoration-thickness": DesignToken;
2067
+ color: DesignToken;
2068
+ };
2069
+ };
1157
2070
  "number-badge": {
1158
- "background-color": DesignToken,
1159
- "border-color": DesignToken,
1160
- "border-radius": DesignToken,
1161
- "border-width": DesignToken,
1162
- "color": DesignToken,
1163
- "font-family": DesignToken,
1164
- "font-size": DesignToken,
1165
- "font-weight": DesignToken,
1166
- "min-block-size": DesignToken,
1167
- "min-inline-size": DesignToken,
1168
- "padding-block": DesignToken,
1169
- "padding-inline": DesignToken
1170
- },
2071
+ "background-color": DesignToken;
2072
+ "border-color": DesignToken;
2073
+ "border-radius": DesignToken;
2074
+ "border-width": DesignToken;
2075
+ color: DesignToken;
2076
+ "font-family": DesignToken;
2077
+ "font-size": DesignToken;
2078
+ "font-weight": DesignToken;
2079
+ "min-block-size": DesignToken;
2080
+ "min-inline-size": DesignToken;
2081
+ "padding-block": DesignToken;
2082
+ "padding-inline": DesignToken;
2083
+ };
2084
+ paragraph: {
2085
+ color: DesignToken;
2086
+ "font-family": DesignToken;
2087
+ "font-size": DesignToken;
2088
+ "font-weight": DesignToken;
2089
+ "line-height": DesignToken;
2090
+ "margin-block-end": DesignToken;
2091
+ "margin-block-start": DesignToken;
2092
+ lead: {
2093
+ "font-size": DesignToken;
2094
+ "font-weight": DesignToken;
2095
+ "line-height": DesignToken;
2096
+ "margin-block-end": DesignToken;
2097
+ "margin-block-start": DesignToken;
2098
+ };
2099
+ };
1171
2100
  "skip-link": {
1172
- "background-color": DesignToken,
1173
- "color": DesignToken,
1174
- "padding-block": DesignToken,
1175
- "padding-inline": DesignToken,
1176
- "min-block-size": DesignToken,
1177
- "min-inline-size": DesignToken,
1178
- "text-decoration-thickness": DesignToken,
1179
- "text-underline-offset": DesignToken,
1180
- "line-height": DesignToken,
1181
- "font-size": DesignToken
1182
- },
1183
- "paragraph": {
1184
- "color": DesignToken,
1185
- "font-family": DesignToken,
1186
- "font-size": DesignToken,
1187
- "font-weight": DesignToken,
1188
- "line-height": DesignToken,
1189
- "margin-block-end": DesignToken,
1190
- "margin-block-start": DesignToken,
1191
- "lead": {
1192
- "font-size": DesignToken,
1193
- "font-weight": DesignToken,
1194
- "line-height": DesignToken,
1195
- "margin-block-end": DesignToken,
1196
- "margin-block-start": DesignToken
1197
- }
1198
- },
1199
- "link": {
1200
- "color": DesignToken,
1201
- "text-decoration-color": DesignToken,
1202
- "text-decoration-line": DesignToken,
1203
- "text-decoration-thickness": DesignToken,
1204
- "text-underline-offset": DesignToken,
1205
- "current": {
1206
- "cursor": DesignToken
1207
- },
1208
- "active": {
1209
- "color": DesignToken
1210
- },
1211
- "disabled": {
1212
- "color": DesignToken,
1213
- "cursor": DesignToken
1214
- },
1215
- "hover": {
1216
- "text-decoration-line": DesignToken,
1217
- "text-decoration-thickness": DesignToken,
1218
- "color": DesignToken
1219
- }
1220
- },
1221
- "heading": {
2101
+ "background-color": DesignToken;
2102
+ color: DesignToken;
2103
+ "padding-block": DesignToken;
2104
+ "padding-inline": DesignToken;
2105
+ "min-block-size": DesignToken;
2106
+ "min-inline-size": DesignToken;
2107
+ "text-decoration-thickness": DesignToken;
2108
+ "text-underline-offset": DesignToken;
2109
+ "line-height": DesignToken;
2110
+ "font-size": DesignToken;
2111
+ };
2112
+ heading: {
1222
2113
  "level-1": {
1223
- "color": DesignToken,
1224
- "font-family": DesignToken,
1225
- "font-size": DesignToken,
1226
- "font-weight": DesignToken,
1227
- "line-height": DesignToken,
1228
- "margin-block-end": DesignToken,
1229
- "margin-block-start": DesignToken
1230
- },
2114
+ color: DesignToken;
2115
+ "font-family": DesignToken;
2116
+ "font-size": DesignToken;
2117
+ "font-weight": DesignToken;
2118
+ "line-height": DesignToken;
2119
+ "margin-block-end": DesignToken;
2120
+ "margin-block-start": DesignToken;
2121
+ };
1231
2122
  "level-2": {
1232
- "color": DesignToken,
1233
- "font-family": DesignToken,
1234
- "font-size": DesignToken,
1235
- "font-weight": DesignToken,
1236
- "line-height": DesignToken,
1237
- "margin-block-end": DesignToken,
1238
- "margin-block-start": DesignToken
1239
- },
2123
+ color: DesignToken;
2124
+ "font-family": DesignToken;
2125
+ "font-size": DesignToken;
2126
+ "font-weight": DesignToken;
2127
+ "line-height": DesignToken;
2128
+ "margin-block-end": DesignToken;
2129
+ "margin-block-start": DesignToken;
2130
+ };
1240
2131
  "level-3": {
1241
- "color": DesignToken,
1242
- "font-family": DesignToken,
1243
- "font-size": DesignToken,
1244
- "font-weight": DesignToken,
1245
- "line-height": DesignToken,
1246
- "margin-block-end": DesignToken,
1247
- "margin-block-start": DesignToken
1248
- },
2132
+ color: DesignToken;
2133
+ "font-family": DesignToken;
2134
+ "font-size": DesignToken;
2135
+ "font-weight": DesignToken;
2136
+ "line-height": DesignToken;
2137
+ "margin-block-end": DesignToken;
2138
+ "margin-block-start": DesignToken;
2139
+ };
1249
2140
  "level-4": {
1250
- "color": DesignToken,
1251
- "font-family": DesignToken,
1252
- "font-size": DesignToken,
1253
- "font-weight": DesignToken,
1254
- "line-height": DesignToken,
1255
- "margin-block-end": DesignToken,
1256
- "margin-block-start": DesignToken
1257
- },
2141
+ color: DesignToken;
2142
+ "font-family": DesignToken;
2143
+ "font-size": DesignToken;
2144
+ "font-weight": DesignToken;
2145
+ "line-height": DesignToken;
2146
+ "margin-block-end": DesignToken;
2147
+ "margin-block-start": DesignToken;
2148
+ };
1258
2149
  "level-5": {
1259
- "color": DesignToken,
1260
- "font-family": DesignToken,
1261
- "font-size": DesignToken,
1262
- "font-weight": DesignToken,
1263
- "line-height": DesignToken,
1264
- "margin-block-end": DesignToken,
1265
- "margin-block-start": DesignToken
1266
- },
2150
+ color: DesignToken;
2151
+ "font-family": DesignToken;
2152
+ "font-size": DesignToken;
2153
+ "font-weight": DesignToken;
2154
+ "line-height": DesignToken;
2155
+ "margin-block-end": DesignToken;
2156
+ "margin-block-start": DesignToken;
2157
+ };
1267
2158
  "level-6": {
1268
- "color": DesignToken,
1269
- "font-family": DesignToken,
1270
- "font-size": DesignToken,
1271
- "font-weight": DesignToken,
1272
- "line-height": DesignToken,
1273
- "margin-block-end": DesignToken,
1274
- "margin-block-start": DesignToken
1275
- }
1276
- }
1277
- },
1278
- "rhc": {
1279
- "blockquote": {
1280
- "margin-block-end": DesignToken,
1281
- "margin-block-start": DesignToken,
1282
- "margin-inline-end": DesignToken,
1283
- "margin-inline-start": DesignToken
1284
- },
1285
- "data-badge-button": {
1286
- "column-gap": DesignToken,
1287
- "hover": {
1288
- "background-color": DesignToken,
1289
- "color": DesignToken
1290
- }
1291
- },
1292
- "breadcrumb-nav": {
1293
- "link": {
1294
- "current": {
1295
- "color": DesignToken
1296
- }
1297
- }
1298
- },
1299
- "keep": {
1300
- "_comment": DesignToken,
1301
- "top-left": {
1302
- "borderRadiusTopLeft": DesignToken,
1303
- "borderRadiusTopRight": DesignToken,
1304
- "borderRadiusBottomRight": DesignToken,
1305
- "borderRadiusBottomLeft": DesignToken
1306
- },
1307
- "top-right": {
1308
- "borderRadiusTopRight": DesignToken,
1309
- "borderRadiusTopLeft": DesignToken,
1310
- "borderRadiusBottomRight": DesignToken,
1311
- "borderRadiusBottomLeft": DesignToken
1312
- },
1313
- "bottom-right": {
1314
- "borderRadiusTopLeft": DesignToken,
1315
- "borderRadiusTopRight": DesignToken,
1316
- "borderRadiusBottomRight": DesignToken,
1317
- "borderRadiusBottomLeft": DesignToken
1318
- },
1319
- "bottom-left": {
1320
- "borderRadiusTopLeft": DesignToken,
1321
- "borderRadiusTopRight": DesignToken,
1322
- "borderRadiusBottomRight": DesignToken,
1323
- "borderRadiusBottomLeft": DesignToken
1324
- }
1325
- },
1326
- "rounded-corner": {
1327
- "xs": {
1328
- "border-radius": DesignToken
1329
- },
1330
- "md": {
1331
- "border-radius": DesignToken
1332
- },
1333
- "xl": {
1334
- "border-radius": DesignToken
1335
- },
1336
- "border-width": DesignToken
1337
- },
1338
- "unordered-list": {
1339
- "nested": {
1340
- "margin-inline-start": DesignToken
1341
- }
1342
- },
1343
- "data-summary": {
1344
- "font-family": DesignToken,
1345
- "item-value": {
1346
- "font-weight": DesignToken,
1347
- "row": {
1348
- "padding-block-end": DesignToken,
1349
- "padding-block-start": DesignToken,
1350
- "padding-inline-end": DesignToken,
1351
- "padding-inline-start": DesignToken
1352
- },
1353
- "padding-block-end": DesignToken,
1354
- "padding-block-start": DesignToken,
1355
- "padding-inline-end": DesignToken,
1356
- "padding-inline-start": DesignToken
1357
- },
1358
- "item-key": {
1359
- "font-weight": DesignToken,
1360
- "row": {
1361
- "padding-block-end": DesignToken,
1362
- "padding-block-start": DesignToken,
1363
- "padding-inline-end": DesignToken,
1364
- "padding-inline-start": DesignToken
1365
- },
1366
- "padding-block-end": DesignToken,
1367
- "padding-block-start": DesignToken,
1368
- "padding-inline-end": DesignToken,
1369
- "padding-inline-start": DesignToken
1370
- },
1371
- "item": {
1372
- "border-width": DesignToken,
1373
- "border-color": DesignToken,
1374
- "border-block-end-style": DesignToken,
1375
- "color": DesignToken
1376
- },
1377
- "font-size": DesignToken,
1378
- "line-height": DesignToken,
1379
- "item-action": {
1380
- "row": {
1381
- "padding-block-end": DesignToken,
1382
- "padding-block-start": DesignToken,
1383
- "padding-inline-end": DesignToken,
1384
- "padding-inline-start": DesignToken
1385
- },
1386
- "padding-block-end": DesignToken,
1387
- "padding-block-start": DesignToken,
1388
- "padding-inline-end": DesignToken,
1389
- "padding-inline-start": DesignToken
1390
- }
1391
- },
1392
- "color": {
1393
- "primary": {
1394
- "50": DesignToken,
1395
- "100": DesignToken,
1396
- "200": DesignToken,
1397
- "300": DesignToken,
1398
- "400": DesignToken,
1399
- "500": DesignToken,
1400
- "hover": DesignToken
1401
- },
1402
- "focus": {
1403
- "outline": DesignToken
1404
- },
1405
- "foreground": {
1406
- "default": DesignToken,
1407
- "subdued": DesignToken,
1408
- "link": DesignToken,
1409
- "on-dark-color": DesignToken,
1410
- "on-light-color": DesignToken
1411
- },
1412
- "border": {
1413
- "default": DesignToken,
1414
- "subdued": DesignToken,
1415
- "strong": DesignToken
1416
- },
1417
- "canvas": DesignToken,
1418
- "feedback": {
1419
- "success": {
1420
- "default": DesignToken,
1421
- "subdued": DesignToken
1422
- },
1423
- "info": {
1424
- "default": DesignToken,
1425
- "subdued": DesignToken
1426
- },
1427
- "error": {
1428
- "default": DesignToken,
1429
- "subdued": DesignToken
1430
- },
1431
- "warning": {
1432
- "default": DesignToken,
1433
- "subdued": DesignToken
1434
- }
1435
- },
1436
- "accent": {
1437
- "500": DesignToken
1438
- },
1439
- "accent-2": {
1440
- "500": DesignToken
1441
- },
1442
- "cool-grey": {
1443
- "50": DesignToken,
1444
- "100": DesignToken,
1445
- "200": DesignToken,
1446
- "300": DesignToken,
1447
- "400": DesignToken,
1448
- "500": DesignToken,
1449
- "600": DesignToken,
1450
- "700": DesignToken,
1451
- "800": DesignToken,
1452
- "900": DesignToken
1453
- },
1454
- "lichtblauw": {
1455
- "50": DesignToken,
1456
- "100": DesignToken,
1457
- "200": DesignToken,
1458
- "300": DesignToken,
1459
- "400": DesignToken,
1460
- "500": DesignToken
1461
- },
1462
- "violet": {
1463
- "50": DesignToken,
1464
- "100": DesignToken,
1465
- "200": DesignToken,
1466
- "300": DesignToken,
1467
- "400": DesignToken,
1468
- "500": DesignToken
1469
- },
1470
- "paars": {
1471
- "50": DesignToken,
1472
- "100": DesignToken,
1473
- "200": DesignToken,
1474
- "300": DesignToken,
1475
- "400": DesignToken,
1476
- "500": DesignToken
1477
- },
1478
- "hemelblauw": {
1479
- "50": DesignToken,
1480
- "100": DesignToken,
1481
- "200": DesignToken,
1482
- "300": DesignToken,
1483
- "400": DesignToken,
1484
- "500": DesignToken
1485
- },
1486
- "donkerblauw": {
1487
- "50": DesignToken,
1488
- "100": DesignToken,
1489
- "200": DesignToken,
1490
- "300": DesignToken,
1491
- "400": DesignToken,
1492
- "500": DesignToken
1493
- },
1494
- "mintgroen": {
1495
- "50": DesignToken,
1496
- "100": DesignToken,
1497
- "200": DesignToken,
1498
- "300": DesignToken,
1499
- "400": DesignToken,
1500
- "500": DesignToken
1501
- },
1502
- "mosgroen": {
1503
- "50": DesignToken,
1504
- "100": DesignToken,
1505
- "200": DesignToken,
1506
- "300": DesignToken,
1507
- "400": DesignToken,
1508
- "500": DesignToken
1509
- },
1510
- "groen": {
1511
- "50": DesignToken,
1512
- "100": DesignToken,
1513
- "200": DesignToken,
1514
- "300": DesignToken,
1515
- "400": DesignToken,
1516
- "500": DesignToken
1517
- },
1518
- "donkergroen": {
1519
- "50": DesignToken,
1520
- "100": DesignToken,
1521
- "200": DesignToken,
1522
- "300": DesignToken,
1523
- "400": DesignToken,
1524
- "500": DesignToken
1525
- },
1526
- "bruin": {
1527
- "50": DesignToken,
1528
- "100": DesignToken,
1529
- "200": DesignToken,
1530
- "300": DesignToken,
1531
- "400": DesignToken,
1532
- "500": DesignToken
1533
- },
1534
- "donkerbruin": {
1535
- "50": DesignToken,
1536
- "100": DesignToken,
1537
- "200": DesignToken,
1538
- "300": DesignToken,
1539
- "400": DesignToken,
1540
- "500": DesignToken
1541
- },
1542
- "geel": {
1543
- "50": DesignToken,
1544
- "100": DesignToken,
1545
- "200": DesignToken,
1546
- "300": DesignToken,
1547
- "400": DesignToken,
1548
- "500": DesignToken
1549
- },
1550
- "donkergeel": {
1551
- "50": DesignToken,
1552
- "100": DesignToken,
1553
- "200": DesignToken,
1554
- "300": DesignToken,
1555
- "400": DesignToken,
1556
- "500": DesignToken
1557
- },
1558
- "oranje": {
1559
- "50": DesignToken,
1560
- "100": DesignToken,
1561
- "200": DesignToken,
1562
- "300": DesignToken,
1563
- "400": DesignToken,
1564
- "500": DesignToken
1565
- },
1566
- "rood": {
1567
- "50": DesignToken,
1568
- "100": DesignToken,
1569
- "200": DesignToken,
1570
- "300": DesignToken,
1571
- "400": DesignToken,
1572
- "500": DesignToken
1573
- },
1574
- "roze": {
1575
- "50": DesignToken,
1576
- "100": DesignToken,
1577
- "200": DesignToken,
1578
- "300": DesignToken,
1579
- "400": DesignToken,
1580
- "500": DesignToken
1581
- },
1582
- "robijnrood": {
1583
- "50": DesignToken,
1584
- "100": DesignToken,
1585
- "200": DesignToken,
1586
- "300": DesignToken,
1587
- "400": DesignToken,
1588
- "500": DesignToken
1589
- },
1590
- "lintblauw": {
1591
- "50": DesignToken,
1592
- "100": DesignToken,
1593
- "200": DesignToken,
1594
- "300": DesignToken,
1595
- "400": DesignToken,
1596
- "500": DesignToken
1597
- },
1598
- "wit": DesignToken,
1599
- "zwart": DesignToken,
1600
- "none": DesignToken
1601
- },
1602
- "sub-nav-bar": {
1603
- "background-color": DesignToken,
1604
- "column-gap": DesignToken,
1605
- "column-width": DesignToken,
1606
- "padding-block-end": DesignToken,
1607
- "padding-block-start": DesignToken,
1608
- "inline-size": DesignToken,
1609
- "content": {
1610
- "padding-inline-end": DesignToken,
1611
- "padding-inline-start": DesignToken,
1612
- "max-inline-size": DesignToken,
1613
- "list": {
1614
- "row-gap": DesignToken
1615
- }
1616
- }
1617
- },
1618
- "toggletip": {
1619
- "color": DesignToken,
1620
- "background-color": DesignToken,
1621
- "border-color": DesignToken,
1622
- "border-radius": DesignToken,
1623
- "border-width": DesignToken,
1624
- "icon": {
1625
- "size": DesignToken
1626
- },
1627
- "size": DesignToken,
1628
- "active": {
1629
- "color": DesignToken,
1630
- "background-color": DesignToken,
1631
- "border-color": DesignToken
1632
- },
1633
- "hover": {
1634
- "color": DesignToken,
1635
- "background-color": DesignToken
1636
- },
1637
- "focus": {
1638
- "color": DesignToken,
1639
- "background-color": DesignToken
1640
- }
1641
- },
1642
- "sidenav": {
1643
- "display": DesignToken,
1644
- "link": {
1645
- "line-height": DesignToken,
1646
- "icon": {
1647
- "size": DesignToken,
1648
- "margin-inline": DesignToken
1649
- },
1650
- "font-size": DesignToken,
1651
- "font-family": DesignToken,
1652
- "font-weight": DesignToken,
1653
- "current": {
1654
- "font-weight": DesignToken,
1655
- "color": DesignToken
1656
- },
1657
- "color": DesignToken,
1658
- "active": {
1659
- "color": DesignToken,
1660
- "text-decoration": DesignToken
1661
- },
1662
- "focus": {
1663
- "border-radius": DesignToken,
1664
- "border-width": DesignToken,
1665
- "border-style": DesignToken,
1666
- "border-color": DesignToken,
1667
- "background-color": DesignToken,
1668
- "color": DesignToken,
1669
- "text-decoration": DesignToken
1670
- },
1671
- "hover": {
1672
- "color": DesignToken,
1673
- "text-decoration": DesignToken
1674
- },
1675
- "padding-block-start": DesignToken,
1676
- "padding-block-end": DesignToken,
1677
- "text-decoration": DesignToken,
1678
- "column-gap": DesignToken
1679
- }
1680
- },
1681
- "radio-group": {
1682
- "padding-block-end": DesignToken,
1683
- "padding-block-start": DesignToken,
1684
- "row-gap": DesignToken
1685
- },
1686
- "navigation-list": {
1687
- "icon": {
1688
- "background-color": DesignToken,
1689
- "border-radius": DesignToken,
1690
- "color": DesignToken
1691
- },
1692
- "item": {
1693
- "icon": {
1694
- "padding-inline": DesignToken,
1695
- "padding-block": DesignToken,
1696
- "size": DesignToken
1697
- },
1698
- "content": {
1699
- "font-size": DesignToken,
1700
- "column-gap": DesignToken,
1701
- "row-gap": DesignToken
1702
- },
1703
- "label": {
1704
- "font-family": DesignToken,
1705
- "font-size": DesignToken,
1706
- "font-weight": DesignToken,
1707
- "line-height": DesignToken
1708
- },
1709
- "active": {
1710
- "background-color": DesignToken
1711
- },
1712
- "hover": {
1713
- "background-color": DesignToken
1714
- },
1715
- "focus": {
1716
- "background-color": DesignToken
1717
- },
1718
- "background-color": DesignToken,
1719
- "color": DesignToken,
1720
- "border-width": DesignToken,
1721
- "border-color": DesignToken,
1722
- "heading": {
1723
- "color": DesignToken
1724
- },
1725
- "column-gap": DesignToken,
1726
- "min-height": DesignToken,
1727
- "padding-block": DesignToken,
1728
- "padding-inline": DesignToken
1729
- }
1730
- },
1731
- "nav-bar": {
1732
- "border-block-end-width": DesignToken,
1733
- "max-inline-size": DesignToken,
1734
- "padding-inline": DesignToken,
1735
- "container": {
1736
- "inline-size": DesignToken
1737
- },
1738
- "content": {
1739
- "column-gap": DesignToken
1740
- },
1741
- "icon": {
1742
- "color": DesignToken,
1743
- "active": {
1744
- "color": DesignToken
1745
- },
1746
- "size": DesignToken
1747
- },
1748
- "link": {
1749
- "active": {
1750
- "background-color": DesignToken,
1751
- "color": DesignToken
1752
- },
1753
- "background-color": DesignToken,
1754
- "color": DesignToken,
1755
- "focus": {
1756
- "background-color": DesignToken,
1757
- "color": DesignToken
1758
- },
1759
- "hover": {
1760
- "background-color": DesignToken,
1761
- "color": DesignToken
1762
- },
1763
- "padding-block-end": DesignToken,
1764
- "padding-block-start": DesignToken,
1765
- "padding-inline-end": DesignToken,
1766
- "padding-inline-start": DesignToken,
1767
- "column-gap": DesignToken,
1768
- "font-size": DesignToken
1769
- },
1770
- "heading": {
1771
- "font-weight": DesignToken
1772
- },
1773
- "background-color": DesignToken,
1774
- "color": DesignToken,
1775
- "border-color": DesignToken
1776
- },
1777
- "message-list": {
1778
- "item": {
1779
- "background-color": DesignToken,
1780
- "border-color": DesignToken,
1781
- "border-width": DesignToken,
1782
- "color": DesignToken,
1783
- "column-gap": DesignToken,
1784
- "icon": {
1785
- "size": DesignToken,
1786
- "color": DesignToken
1787
- },
1788
- "min-height": DesignToken,
1789
- "padding-block": DesignToken,
1790
- "padding-inline": DesignToken,
1791
- "content": {
1792
- "font-size": DesignToken,
1793
- "column-gap": DesignToken,
1794
- "row-gap": DesignToken
1795
- },
1796
- "label": {
1797
- "font-family": DesignToken,
1798
- "font-size": DesignToken,
1799
- "font-weight": DesignToken,
1800
- "line-height": DesignToken
1801
- },
1802
- "heading": {
1803
- "color": DesignToken
1804
- }
1805
- }
1806
- },
1807
- "logo": {
1808
- "image": {
1809
- "background-color": DesignToken,
1810
- "inline-size": DesignToken,
1811
- "block-size": DesignToken,
1812
- "color": DesignToken
1813
- },
1814
- "title": {
1815
- "font-weight": DesignToken,
1816
- "line-height": DesignToken,
1817
- "font-size": DesignToken,
1818
- "padding-block-start": DesignToken
1819
- },
1820
- "subtitle": {
1821
- "font-weight": DesignToken,
1822
- "line-height": DesignToken,
1823
- "font-size": DesignToken
1824
- },
1825
- "column-gap": DesignToken,
1826
- "font-family": DesignToken,
1827
- "color": DesignToken
1828
- },
1829
- "link-list-card": {
1830
- "background-color": DesignToken,
1831
- "padding-block-start": DesignToken,
1832
- "padding-block-end": DesignToken,
1833
- "row-gap": DesignToken,
1834
- "padding-inline-start": DesignToken,
1835
- "padding-inline-end": DesignToken
1836
- },
1837
- "link": {
1838
- "column-gap": DesignToken
1839
- },
1840
- "icon-only-button": {
1841
- "padding-block-end": DesignToken,
1842
- "padding-block-start": DesignToken,
1843
- "padding-inline-end": DesignToken,
1844
- "padding-inline-start": DesignToken
1845
- },
1846
- "hero": {
1847
- "heading": {
1848
- "font-weight": DesignToken,
1849
- "line-height": DesignToken,
1850
- "font-size": DesignToken,
1851
- "font-family": DesignToken
1852
- },
1853
- "sub-heading": {
1854
- "font-weight": DesignToken,
1855
- "line-height": DesignToken,
1856
- "font-size": DesignToken,
1857
- "font-family": DesignToken
1858
- },
1859
- "message": {
1860
- "background-color": DesignToken,
1861
- "color": DesignToken,
1862
- "row-gap": DesignToken,
1863
- "padding-block-end": DesignToken,
1864
- "padding-inline-end": DesignToken,
1865
- "padding-inline-start": DesignToken,
1866
- "padding-block-start": DesignToken,
1867
- "border-radius": DesignToken,
1868
- "inline-size": DesignToken
1869
- },
1870
- "border-radius": DesignToken,
1871
- "inline-size": DesignToken
1872
- },
1873
- "form-field-radio-option": {
1874
- "column-gap": DesignToken,
1875
- "font-weight": DesignToken,
1876
- "row-gap": DesignToken,
1877
- "label": {
1878
- "margin-block-end": DesignToken
1879
- },
1880
- "input": {
1881
- "margin": {
1882
- "block-start": DesignToken
1883
- }
1884
- }
1885
- },
1886
- "form-field-checkbox-option": {
1887
- "column-gap": DesignToken,
1888
- "margin-block-end": DesignToken
1889
- },
1890
- "page-footer": {
1891
- "column-gap": DesignToken,
1892
- "column-width": DesignToken,
1893
- "column": {
1894
- "title": {
1895
- "margin-block-end": DesignToken
1896
- }
1897
- },
1898
- "content": {
1899
- "max-inline-size": DesignToken,
1900
- "padding-inline-start": DesignToken,
1901
- "padding-inline-end": DesignToken,
1902
- "column-gap": DesignToken
1903
- },
1904
- "border-block-start-width": DesignToken,
1905
- "border-block-start-color": DesignToken,
1906
- "border-block-start-style": DesignToken,
1907
- "outlined": {
1908
- "background-color": DesignToken,
1909
- "color": DesignToken,
1910
- "border-color": DesignToken
1911
- },
1912
- "padding-block-start": DesignToken,
1913
- "padding-block-end": DesignToken,
1914
- "padding-inline-start": DesignToken,
1915
- "padding-inline-end": DesignToken,
1916
- "flex": {
1917
- "direction": DesignToken
1918
- }
1919
- },
1920
- "file-input": {
1921
- "column-gap": DesignToken,
1922
- "row-gap": DesignToken,
1923
- "feedback": {
1924
- "color": DesignToken,
1925
- "font-size": DesignToken
1926
- }
1927
- },
1928
- "file": {
1929
- "border-style": DesignToken,
1930
- "border-color": DesignToken,
1931
- "border-width": DesignToken,
1932
- "border-radius": DesignToken,
1933
- "padding-inline-start": DesignToken,
1934
- "padding-inline-end": DesignToken,
1935
- "padding-block-start": DesignToken,
1936
- "padding-block-end": DesignToken,
1937
- "column-gap": DesignToken,
1938
- "error": {
1939
- "border-color": DesignToken
1940
- },
1941
- "subtitle": {
1942
- "color": DesignToken
1943
- }
1944
- },
1945
- "dot-badge": {
1946
- "border-radius": DesignToken,
1947
- "color": DesignToken,
1948
- "size": DesignToken
1949
- },
1950
- "code-input": {
1951
- "size": DesignToken
1952
- },
1953
- "code-input-group": {
1954
- "column-gap": DesignToken
1955
- },
1956
- "checkbox-group": {
1957
- "padding-block-end": DesignToken,
1958
- "padding-block-start": DesignToken,
1959
- "row-gap": DesignToken
1960
- },
1961
- "card-as-link": {
1962
- "background-color": DesignToken,
1963
- "border-color": DesignToken,
1964
- "border-radius": DesignToken,
1965
- "border-width": DesignToken,
1966
- "color": DesignToken,
1967
- "column-gap": DesignToken,
1968
- "icon": {
1969
- "color": DesignToken,
1970
- "size": DesignToken
1971
- },
1972
- "link": {
1973
- "color": DesignToken,
1974
- "text-decoration": DesignToken,
1975
- "active": {
1976
- "text-decoration": DesignToken
1977
- },
1978
- "hover": {
1979
- "text-decoration": DesignToken
1980
- },
1981
- "focus": {
1982
- "text-decoration": DesignToken
1983
- }
1984
- },
1985
- "metadata": {
1986
- "color": DesignToken
1987
- },
1988
- "padding-block-end": DesignToken,
1989
- "padding-block-start": DesignToken,
1990
- "padding-inline-end": DesignToken,
1991
- "padding-inline-start": DesignToken,
1992
- "row-gap": DesignToken,
1993
- "active": {
1994
- "background-color": DesignToken,
1995
- "text-decoration": DesignToken
1996
- },
1997
- "hover": {
1998
- "background-color": DesignToken,
1999
- "text-decoration": DesignToken
2000
- },
2001
- "focus": {
2002
- "background-color": DesignToken,
2003
- "text-decoration": DesignToken
2004
- },
2005
- "full-bleed": {
2006
- "background-color": DesignToken,
2007
- "border-color": DesignToken,
2008
- "color": DesignToken,
2009
- "opacity": DesignToken
2010
- },
2011
- "heading": {
2012
- "color": DesignToken,
2013
- "padding-block-start": DesignToken,
2014
- "font-size": DesignToken,
2015
- "font-weight": DesignToken
2016
- },
2017
- "horizontal": {
2018
- "background-color": DesignToken,
2019
- "border-color": DesignToken,
2020
- "color": DesignToken,
2021
- "max-block-size": DesignToken,
2022
- "padding-block-end": DesignToken,
2023
- "padding-block-start": DesignToken,
2024
- "padding-inline-end": DesignToken,
2025
- "padding-inline-start": DesignToken,
2026
- "heading": {
2027
- "inline-size": DesignToken
2028
- }
2029
- }
2030
- },
2031
- "border-radius": {
2032
- "sm": DesignToken,
2033
- "md": DesignToken,
2034
- "circle": DesignToken,
2035
- "none": DesignToken
2036
- },
2037
- "focus": {
2038
- "outline-offset": DesignToken,
2039
- "outline-style": DesignToken,
2040
- "outline-width": DesignToken
2041
- },
2042
- "font-size": {
2043
- "heading": {
2044
- "level-1": DesignToken,
2045
- "level-2": DesignToken,
2046
- "level-3": DesignToken,
2047
- "level-4": DesignToken,
2048
- "level-5": DesignToken
2049
- },
2050
- "body": {
2051
- "intro": DesignToken,
2052
- "default": DesignToken
2053
- },
2054
- "xs": {
2055
- "desktop": DesignToken,
2056
- "tablet": DesignToken,
2057
- "mobile": DesignToken
2058
- },
2059
- "sm": {
2060
- "desktop": DesignToken,
2061
- "tablet": DesignToken,
2062
- "mobile": DesignToken
2063
- },
2064
- "md": {
2065
- "desktop": DesignToken,
2066
- "tablet": DesignToken,
2067
- "mobile": DesignToken
2068
- },
2069
- "lg": {
2070
- "desktop": DesignToken,
2071
- "tablet": DesignToken,
2072
- "mobile": DesignToken
2073
- },
2074
- "xl": {
2075
- "desktop": DesignToken,
2076
- "tablet": DesignToken,
2077
- "mobile": DesignToken
2078
- }
2079
- },
2080
- "font-weight": {
2081
- "default": DesignToken,
2082
- "strong": DesignToken,
2083
- "extra-bold": DesignToken,
2084
- "bold": DesignToken,
2085
- "semi-bold": DesignToken,
2086
- "regular": DesignToken,
2087
- "light": DesignToken,
2088
- "thin": DesignToken
2089
- },
2090
- "line-height": {
2091
- "body": DesignToken,
2092
- "sm": DesignToken,
2093
- "md": DesignToken
2094
- },
2095
- "size": {
2096
- "target": DesignToken,
2097
- "icon": {
2098
- "functional": DesignToken
2099
- },
2100
- "quarter-lint": DesignToken,
2101
- "half-lint": DesignToken,
2102
- "lint": DesignToken,
2103
- "2-lint": DesignToken,
2104
- "3-lint": DesignToken
2105
- },
2106
- "font-family": {
2107
- "primary": DesignToken,
2108
- "secondary": DesignToken
2109
- },
2159
+ color: DesignToken;
2160
+ "font-family": DesignToken;
2161
+ "font-size": DesignToken;
2162
+ "font-weight": DesignToken;
2163
+ "line-height": DesignToken;
2164
+ "margin-block-end": DesignToken;
2165
+ "margin-block-start": DesignToken;
2166
+ };
2167
+ };
2168
+ };
2169
+ figma: {
2170
+ link: {
2171
+ icon: {
2172
+ size: DesignToken;
2173
+ };
2174
+ };
2175
+ };
2176
+ ams: {
2177
+ pagination: {
2178
+ "font-family": DesignToken;
2179
+ "font-size": DesignToken;
2180
+ "font-weight": DesignToken;
2181
+ "line-height": DesignToken;
2182
+ link: {
2183
+ color: DesignToken;
2184
+ gap: DesignToken;
2185
+ "outline-offset": DesignToken;
2186
+ "padding-inline": DesignToken;
2187
+ current: {
2188
+ "font-weight": DesignToken;
2189
+ };
2190
+ hover: {
2191
+ color: DesignToken;
2192
+ "text-decoration-line": DesignToken;
2193
+ };
2194
+ };
2195
+ };
2196
+ };
2197
+ basis: {
2198
+ color: {
2199
+ default: {
2200
+ "bg-document": DesignToken;
2201
+ "color-document": DesignToken;
2202
+ "color-subtle": DesignToken;
2203
+ "border-subtle": DesignToken;
2204
+ "border-default": DesignToken;
2205
+ "bg-subtle": DesignToken;
2206
+ };
2207
+ highlight: {
2208
+ "bg-default": DesignToken;
2209
+ };
2210
+ };
2211
+ text: {
2212
+ "font-family": {
2213
+ default: DesignToken;
2214
+ };
2215
+ "font-weight": {
2216
+ default: DesignToken;
2217
+ bold: DesignToken;
2218
+ };
2219
+ "font-size": {
2220
+ md: DesignToken;
2221
+ };
2222
+ "line-height": {
2223
+ md: DesignToken;
2224
+ };
2225
+ };
2226
+ heading: {
2227
+ color: DesignToken;
2228
+ "font-family": DesignToken;
2229
+ "font-weight": DesignToken;
2230
+ };
2110
2231
  "border-width": {
2111
- "default": DesignToken,
2112
- "m": DesignToken,
2113
- "none": DesignToken
2114
- },
2115
- "space": {
2116
- "0": DesignToken,
2117
- "25": DesignToken,
2118
- "50": DesignToken,
2119
- "100": DesignToken,
2120
- "150": DesignToken,
2121
- "200": DesignToken,
2122
- "300": DesignToken,
2123
- "400": DesignToken,
2124
- "500": DesignToken,
2125
- "600": DesignToken,
2126
- "700": DesignToken
2127
- }
2128
- },
2129
- "figma": {
2130
- "link": {
2131
- "icon": {
2132
- "size": DesignToken
2133
- }
2134
- }
2135
- }
2136
- }
2232
+ sm: DesignToken;
2233
+ };
2234
+ "box-shadow": {
2235
+ md: DesignToken;
2236
+ };
2237
+ focus: {
2238
+ "outline-color": DesignToken;
2239
+ inverse: {
2240
+ "outline-color": DesignToken;
2241
+ };
2242
+ "outline-width": DesignToken;
2243
+ };
2244
+ };
2245
+ };