@rijkshuisstijl-community/design-tokens 1.0.0-alpha.3 → 1.0.0-alpha.7

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 (43) hide show
  1. package/dist/_variables.scss +303 -7
  2. package/dist/index.css +303 -7
  3. package/dist/index.d.ts +303 -7
  4. package/dist/index.js +303 -7
  5. package/dist/index.json +302 -6
  6. package/dist/index.tokens.json +677 -9
  7. package/dist/root.css +303 -7
  8. package/dist/tokens.d.ts +676 -9
  9. package/dist/tokens.js +6492 -77
  10. package/dist/variables.less +303 -7
  11. package/package.json +4 -3
  12. package/src/brand/rhc/color.tokens.json +96 -6
  13. package/src/brand/rhc/font.tokens.json +34 -0
  14. package/src/common/utrecht/action.tokens.json +10 -0
  15. package/src/common/utrecht/focus.tokens.json +17 -0
  16. package/src/components/basiselementen/document.tokens.json +15 -0
  17. package/src/components/rvo/button.tokens.json +33 -0
  18. package/src/components/rvo/checkbox.tokens.json +32 -0
  19. package/src/components/rvo/custom-radio-button.tokens.json +24 -0
  20. package/src/components/rvo/heading.tokens.json +24 -0
  21. package/src/components/rvo/logo.tokens.json +13 -0
  22. package/src/components/rvo/select.tokens.json +15 -0
  23. package/src/components/utrecht/breadcrumbs.tokens.json +66 -0
  24. package/src/components/utrecht/button.tokens.json +120 -0
  25. package/src/components/utrecht/custom-radio-button.tokens.json +53 -0
  26. package/src/components/utrecht/data-list.tokens.json +91 -0
  27. package/src/components/utrecht/document.tokens.json +12 -0
  28. package/src/components/utrecht/form-field.tokens.json +21 -0
  29. package/src/components/utrecht/form-fieldset.tokens.json +27 -0
  30. package/src/components/utrecht/form-input.tokens.json +42 -0
  31. package/src/components/utrecht/form-label.tokens.json +23 -0
  32. package/src/components/utrecht/heading-1.tokens.json +13 -0
  33. package/src/components/utrecht/heading-2.tokens.json +13 -0
  34. package/src/components/utrecht/heading-3.tokens.json +13 -0
  35. package/src/components/utrecht/heading-4.tokens.json +13 -0
  36. package/src/components/utrecht/heading-5.tokens.json +13 -0
  37. package/src/components/utrecht/heading-6.tokens.json +13 -0
  38. package/src/components/utrecht/link.tokens.json +44 -0
  39. package/src/components/utrecht/ordered-list.tokens.json +19 -0
  40. package/src/components/utrecht/paragraph.tokens.json +23 -0
  41. package/src/components/utrecht/unordered-list.tokens.json +31 -0
  42. package/src/common/rhc/focus.tokens.json +0 -7
  43. package/src/components/rhc/button.tokens.json +0 -8
package/dist/_variables.scss CHANGED
@@ -1,10 +1,306 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 07 Mar 2023 16:47:47 GMT
3
+ // Generated on Mon, 20 Mar 2023 15:34:52 GMT
4
4
 
5
- $rhc-focus-outline-offset: 2px;
6
- $rhc-color-grey-100: white;
7
- $rhc-color-grey-0: black;
8
- $rhc-color-blue-50: cornflowerblue;
9
- $rhc-button-color: $rhc-color-grey-100;
10
- $rhc-button-background-color: $rhc-color-blue-50;
5
+ $rvo-select-padding-inline-start: 18px;
6
+ $rvo-select-padding-inline-end: 50px;
7
+ $rvo-select-padding-block-start: 10px;
8
+ $rvo-select-padding-block-end: 9px;
9
+ $rvo-select-outline-offset: 0;
10
+ $rvo-logo-emblem-background-color: #154273;
11
+ $rvo-logo-font-size: 16px;
12
+ $rvo-heading-1-line-height: 125%;
13
+ $rvo-checkbox-border-width: 1px;
14
+ $rvo-checkbox-icon-size: 16px;
15
+ $rvo-checkbox-size: 24px;
16
+ $utrecht-unordered-list-list-style-type: square;
17
+ $utrecht-unordered-list-padding-inline-start: 20px;
18
+ $utrecht-unordered-list-item-marker: initial;
19
+ $utrecht-unordered-list-item-padding-inline-start: 0;
20
+ $utrecht-unordered-list-item-margin-block-end: 0.5ex;
21
+ $utrecht-unordered-list-item-margin-block-start: 0.5ex;
22
+ $utrecht-unordered-list-margin-block-end: 16px;
23
+ $utrecht-unordered-list-margin-block-start: 0;
24
+ $utrecht-paragraph-small-line-height: 150%;
25
+ $utrecht-paragraph-small-font-size: 16px;
26
+ $utrecht-paragraph-lead-line-height: 150%;
27
+ $utrecht-paragraph-lead-font-size: 20px;
28
+ $utrecht-paragraph-margin-block-end: 16px;
29
+ $utrecht-paragraph-line-height: 150%;
30
+ $utrecht-paragraph-font-size: 18px;
31
+ $utrecht-ordered-list-padding-inline-start: 0;
32
+ $utrecht-ordered-list-item-padding-inline-start: 0;
33
+ $utrecht-ordered-list-item-margin-block-end: 0.5ex;
34
+ $utrecht-ordered-list-item-margin-block-start: 0.5ex;
35
+ $utrecht-ordered-list-margin-block-end: 0;
36
+ $utrecht-link-focus-text-decoration-thickness: 1px;
37
+ $utrecht-link-focus-outline-offset: 0;
38
+ $utrecht-link-active-text-decoration-thickness: 1px;
39
+ $utrecht-link-hover-text-decoration: none;
40
+ $utrecht-link-hover-text-decoration-thickness: 1px;
41
+ $utrecht-link-text-underline-offset: 2px;
42
+ $utrecht-link-text-decoration-thickness: 1px;
43
+ $utrecht-link-text-decoration: underline;
44
+ $utrecht-heading-6-margin-block-end: 4px;
45
+ $utrecht-heading-6-font-size: 0.875rem;
46
+ $utrecht-heading-5-margin-block-end: 4px;
47
+ $utrecht-heading-5-font-size: 1rem;
48
+ $utrecht-heading-4-margin-block-end: 4px;
49
+ $utrecht-heading-4-font-size: 1.125rem;
50
+ $utrecht-heading-3-margin-block-end: 4px;
51
+ $utrecht-heading-3-line-height: 125%;
52
+ $utrecht-heading-3-font-size: 1.25rem;
53
+ $utrecht-heading-2-margin-block-end: 4px;
54
+ $utrecht-heading-2-line-height: 150%;
55
+ $utrecht-heading-2-font-size: 1.5rem;
56
+ $utrecht-heading-1-margin-block-start: 16px;
57
+ $utrecht-heading-1-margin-block-end: 16px;
58
+ $utrecht-heading-1-line-height: 125%;
59
+ $utrecht-heading-1-font-size: 2rem;
60
+ $utrecht-form-label-font-size: 18px;
61
+ $utrecht-form-input-invalid-border-width: 1px;
62
+ $utrecht-form-input-disabled-border-width: 0;
63
+ $utrecht-form-input-padding-inline-start: 12px;
64
+ $utrecht-form-input-padding-inline-end: 12px;
65
+ $utrecht-form-input-padding-block-start: 12px;
66
+ $utrecht-form-input-padding-block-end: 8px;
67
+ $utrecht-form-input-font-size: 18px;
68
+ $utrecht-form-input-border-width: 1px;
69
+ $utrecht-form-input-border-radius: 0;
70
+ $utrecht-form-fieldset-legend-margin-block-start: 0;
71
+ $utrecht-form-fieldset-legend-margin-block-end: 1ex;
72
+ $utrecht-form-fieldset-legend-line-height: 150%;
73
+ $utrecht-form-fieldset-padding-inline-start: 36px;
74
+ $utrecht-form-fieldset-padding-inline-end: 36px;
75
+ $utrecht-form-fieldset-padding-block-start: 36px;
76
+ $utrecht-form-fieldset-padding-block-end: 36px;
77
+ $utrecht-form-fieldset-margin-block-start: 1ex;
78
+ $utrecht-form-fieldset-margin-block-end: 1ex;
79
+ $utrecht-form-field-min-width: 100%;
80
+ $utrecht-form-field-margin-block-start: 1ex;
81
+ $utrecht-form-field-margin-block-end: 1ex;
82
+ $utrecht-form-field-description-margin-block-end: 1ex;
83
+ $utrecht-form-field-description-margin-block-start: 0;
84
+ $utrecht-data-list-rows-column-min-inline-size: 25ch;
85
+ $utrecht-data-list-rows-column-inline-size: 50%;
86
+ $utrecht-data-list-rows-item-value-margin-block-start: 0;
87
+ $utrecht-data-list-rows-item-padding-inline-start: 14px;
88
+ $utrecht-data-list-rows-item-margin-block-start: 0;
89
+ $utrecht-data-list-rows-border-bottom-width: 1px;
90
+ $utrecht-data-list-item-value-padding-inline-start: 18px;
91
+ $utrecht-data-list-item-value-padding-inline-end: 18px;
92
+ $utrecht-data-list-item-value-padding-block-start: 9px;
93
+ $utrecht-data-list-item-value-padding-block-end: 9px;
94
+ $utrecht-data-list-item-key-padding-inline-start: 18px;
95
+ $utrecht-data-list-item-key-padding-inline-end: 18px;
96
+ $utrecht-data-list-item-key-padding-block-start: 9px;
97
+ $utrecht-data-list-item-key-padding-block-end: 9px;
98
+ $utrecht-data-list-item-key-border-inline-end-width: 1px;
99
+ $utrecht-data-list-margin-block-start: 0;
100
+ $utrecht-data-list-margin-block-end: 0;
101
+ $utrecht-data-list-border-width: 1px;
102
+ $utrecht-custom-radio-button-checked-border-width: 3px;
103
+ $utrecht-custom-radio-button-icon-size: 18px;
104
+ $utrecht-custom-radio-button-border-radius: 0;
105
+ $utrecht-custom-radio-button-border-width: 1px;
106
+ $utrecht-custom-radio-button-size: 24px;
107
+ $utrecht-breadcrumb-link-text-decoration: none;
108
+ $utrecht-breadcrumb-link-hover-text-decoration-thickness: 1px !important;
109
+ $utrecht-breadcrumb-link-hover-text-decoration: underline;
110
+ $utrecht-breadcrumb-link-focus-text-decoration-thickness: 1px;
111
+ $utrecht-breadcrumb-link-focus-text-decoration: none;
112
+ $utrecht-breadcrumb-item-padding-inline-start: 0;
113
+ $utrecht-breadcrumb-item-padding-inline-end: 0;
114
+ $utrecht-breadcrumb-item-padding-block-end: 0;
115
+ $utrecht-breadcrumb-item-padding-block-start: 0;
116
+ $utrecht-breadcrumb-item-gap: 8px;
117
+ $utrecht-breadcrumb-font-size: 0.875rem;
118
+ $utrecht-button-subtle-text-decoration: underline;
119
+ $utrecht-button-subtle-disabled-background-color: transparent;
120
+ $utrecht-button-subtle-hover-text-decoration: underline;
121
+ $utrecht-button-subtle-font-size: 15px;
122
+ $utrecht-button-subtle-background-color: transparent;
123
+ $utrecht-button-secondary-action-border-width: 1px;
124
+ $utrecht-button-padding-inline-end: 16px;
125
+ $utrecht-button-padding-inline-start: 16px;
126
+ $utrecht-button-padding-block-end: 8px;
127
+ $utrecht-button-padding-block-start: 8px;
128
+ $utrecht-button-font-size: 18px;
129
+ $utrecht-button-border-width: 0;
130
+ $utrecht-button-rvo-tertiary-action-text-decoration: none;
131
+ $utrecht-button-rvo-md-padding-inline-end: 16px;
132
+ $utrecht-button-rvo-md-padding-inline-start: 16px;
133
+ $utrecht-button-rvo-md-padding-block-end: 8px;
134
+ $utrecht-button-rvo-md-padding-block-start: 8px;
135
+ $utrecht-button-rvo-md-font-size: 18px;
136
+ $utrecht-button-rvo-sm-min-block-size: 30px;
137
+ $utrecht-button-rvo-sm-padding-inline-end: 12px;
138
+ $utrecht-button-rvo-sm-padding-inline-start: 12px;
139
+ $utrecht-button-rvo-sm-padding-block-end: 4px;
140
+ $utrecht-button-rvo-sm-padding-block-start: 4px;
141
+ $utrecht-button-rvo-sm-font-size: 1rem;
142
+ $utrecht-button-rvo-xs-min-block-size: auto;
143
+ $utrecht-button-rvo-xs-padding-inline-end: calc(8px + 4px);
144
+ $utrecht-button-rvo-xs-padding-inline-start: calc(8px + 4px);
145
+ $utrecht-button-rvo-xs-padding-block-end: 4px;
146
+ $utrecht-button-rvo-xs-padding-block-start: 4px;
147
+ $utrecht-button-rvo-xs-font-size: 0.875rem;
148
+ $utrecht-focus-outline-width: 2px;
149
+ $utrecht-focus-outline-style: dashed;
150
+ $utrecht-focus-outline-offset: 3px; // This is only for buttons. Form fields (input, select and textarea) and links do not have an offset
151
+ $utrecht-action-submit-cursor: pointer;
152
+ $utrecht-action-disabled-cursor: not-allowed;
153
+ $utrecht-action-busy-cursor: wait;
154
+ $utrecht-action-activate-cursor: pointer;
155
+ $basiselementen-document-line-height: 150%;
156
+ $basiselementen-document-font-size: 18px;
157
+ $basiselementen-root-font-size: 100%;
158
+ $basiselementen-font-weight-bold: 700;
159
+ $basiselementen-font-weight-normal: 400;
160
+ $basiselementen-font-serif-fallback-font-family: 'Times New Roman', serif;
161
+ $basiselementen-font-serif-font-family: 'RijksoverheidSerifWeb';
162
+ $basiselementen-font-sans-serif-fallback-font-family: 'Calibri', 'Verdana', 'Arial', sans-serif;
163
+ $basiselementen-font-sans-serif-font-family: 'RijksoverheidSansWebText';
164
+ $basiselementen-color-wit: #ffffff;
165
+ $basiselementen-color-zwart: #000000;
166
+ $basiselementen-color-grijs7: #535353;
167
+ $basiselementen-color-grijs6: #696969;
168
+ $basiselementen-color-grijs5: #999999;
169
+ $basiselementen-color-grijs4: #b4b4b4;
170
+ $basiselementen-color-grijs3: #cccccc;
171
+ $basiselementen-color-grijs2: #e6e6e6;
172
+ $basiselementen-color-grijs1: #f3f3f3;
173
+ $basiselementen-color-rood-tint2: #f9dfdd;
174
+ $basiselementen-color-rood-shade1: #4d0a0b;
175
+ $basiselementen-color-rood-tint1: #f2bfbb;
176
+ $basiselementen-color-rood: #d51b1e;
177
+ $basiselementen-color-donkergeel-tint2: #fff4dc;
178
+ $basiselementen-color-donkergeel-tint1: #ffe9b7;
179
+ $basiselementen-color-donkergeel: #ffb612;
180
+ $basiselementen-color-donkergroen: #275e08;
181
+ $basiselementen-color-groen-tint2: #e1eddb;
182
+ $basiselementen-color-groen-tint1: #c3dbb6;
183
+ $basiselementen-color-groen: #39870c;
184
+ $basiselementen-color-oranje-tint2: #fbead9;
185
+ $basiselementen-color-oranje-tint1: #f6d4b2;
186
+ $basiselementen-color-oranje: #e17000;
187
+ $basiselementen-color-donkerblauw-shade1: #01496D; // 30% black (shade) of 'donkerblauw'
188
+ $basiselementen-color-donkerblauw: #01689b;
189
+ $basiselementen-color-lichtblauw-tint2: #eef7fb;
190
+ $basiselementen-color-lichtblauw-tint1: #ddeff8;
191
+ $basiselementen-color-lichtblauw: #8fcae7;
192
+ $basiselementen-color-hemelblauw-tint2: #d9ebf7;
193
+ $basiselementen-color-hemelblauw-tint1: #b2d7ee;
194
+ $basiselementen-color-hemelblauw: #007bc7;
195
+ $basiselementen-color-logoblauw: #154273;
196
+ $rvo-select-icon-color: $basiselementen-color-wit;
197
+ $rvo-select-icon-background-color: $basiselementen-color-hemelblauw;
198
+ $rvo-logo-emblem-color: $basiselementen-color-wit;
199
+ $rvo-logo-color: $basiselementen-color-zwart;
200
+ $rvo-logo-font-family: $basiselementen-font-serif-font-family;
201
+ $rvo-custom-radio-button-checked-background: radial-gradient(circle, $basiselementen-color-wit 30%, $basiselementen-color-hemelblauw 30%);
202
+ $rvo-custom-radio-button-checked-border-color: $basiselementen-color-hemelblauw;
203
+ $rvo-custom-radio-button-hover-border-color: $basiselementen-color-hemelblauw;
204
+ $rvo-custom-radio-button-label-disabled-color: $basiselementen-color-grijs3;
205
+ $rvo-checkbox-disabled-color: $basiselementen-color-grijs3;
206
+ $rvo-checkbox-disabled-background-color: $basiselementen-color-wit;
207
+ $rvo-checkbox-disabled-border-color: $basiselementen-color-grijs3;
208
+ $rvo-checkbox-hover-border-color: $basiselementen-color-hemelblauw;
209
+ $rvo-checkbox-hover-background-color: $basiselementen-color-donkerblauw;
210
+ $rvo-checkbox-checked-background-color: $basiselementen-color-hemelblauw;
211
+ $rvo-checkbox-border-color: $basiselementen-color-zwart;
212
+ $rvo-checkbox-background-color: $basiselementen-color-wit;
213
+ $rvo-checkbox-icon-color: $basiselementen-color-wit;
214
+ $utrecht-link-active-font-weight: $basiselementen-font-weight-bold;
215
+ $utrecht-link-active-color: $basiselementen-color-donkerblauw;
216
+ $utrecht-link-hover-font-weight: $basiselementen-font-weight-bold;
217
+ $utrecht-link-hover-color: $basiselementen-color-donkerblauw;
218
+ $utrecht-link-font-weight: $basiselementen-font-weight-normal;
219
+ $utrecht-link-color: $basiselementen-color-hemelblauw;
220
+ $utrecht-heading-6-font-weight: $basiselementen-font-weight-bold;
221
+ $utrecht-heading-5-font-weight: $basiselementen-font-weight-bold;
222
+ $utrecht-heading-4-font-weight: $basiselementen-font-weight-bold;
223
+ $utrecht-heading-3-font-weight: $basiselementen-font-weight-bold;
224
+ $utrecht-heading-2-font-weight: $basiselementen-font-weight-bold;
225
+ $utrecht-heading-1-font-weight: $basiselementen-font-weight-bold;
226
+ $utrecht-form-label-font-weight: $basiselementen-font-weight-bold;
227
+ $utrecht-form-input-read-only-color: $basiselementen-color-grijs7;
228
+ $utrecht-form-input-read-only-border-color: $basiselementen-color-grijs7;
229
+ $utrecht-form-input-invalid-border-color: $basiselementen-color-rood;
230
+ $utrecht-form-input-invalid-background-color: $basiselementen-color-wit;
231
+ $utrecht-form-input-focus-border-color: $basiselementen-color-grijs6;
232
+ $utrecht-form-input-focus-background-color: $basiselementen-color-wit;
233
+ $utrecht-form-input-disabled-color: $basiselementen-color-grijs7;
234
+ $utrecht-form-input-disabled-border-color: $basiselementen-color-grijs7;
235
+ $utrecht-form-input-disabled-background-color: $basiselementen-color-grijs3 !important;
236
+ $utrecht-form-input-color: $basiselementen-color-zwart;
237
+ $utrecht-form-input-border-color: $basiselementen-color-grijs6;
238
+ $utrecht-form-input-background-color: $basiselementen-color-wit;
239
+ $utrecht-form-fieldset-legend-font-weight: $basiselementen-font-weight-bold;
240
+ $utrecht-form-fieldset-section-background-color: $basiselementen-color-wit;
241
+ $utrecht-document-line-height: $basiselementen-document-line-height;
242
+ $utrecht-document-font-size: $basiselementen-document-font-size;
243
+ $utrecht-document-font-family: $basiselementen-font-sans-serif-font-family;
244
+ $utrecht-document-color: $basiselementen-color-zwart;
245
+ $utrecht-document-background-color: $basiselementen-color-wit;
246
+ $utrecht-data-list-rows-border-bottom-color: $basiselementen-color-grijs4;
247
+ $utrecht-data-list-item-key-font-weight: $basiselementen-font-weight-bold;
248
+ $utrecht-data-list-item-key-border-inline-end-color: $basiselementen-color-grijs4;
249
+ $utrecht-data-list-border-color: $basiselementen-color-grijs4;
250
+ $utrecht-custom-radio-button-invalid-border-color: $basiselementen-color-grijs3;
251
+ $utrecht-custom-radio-button-checked-active-background-color: $basiselementen-color-hemelblauw;
252
+ $utrecht-custom-radio-button-checked-color: $basiselementen-color-hemelblauw;
253
+ $utrecht-custom-radio-button-checked-background-color: $basiselementen-color-hemelblauw;
254
+ $utrecht-custom-radio-button-checked-border-color: $basiselementen-color-hemelblauw;
255
+ $utrecht-custom-radio-button-disabled-background-color: $basiselementen-color-wit;
256
+ $utrecht-custom-radio-button-disabled-border-color: $basiselementen-color-grijs3;
257
+ $utrecht-custom-radio-button-active-background-color: $basiselementen-color-hemelblauw;
258
+ $utrecht-custom-radio-button-background-color: $basiselementen-color-wit;
259
+ $utrecht-custom-radio-button-color: $basiselementen-color-zwart;
260
+ $utrecht-custom-radio-button-border-color: $basiselementen-color-zwart;
261
+ $utrecht-breadcrumb-link-hover-color: $basiselementen-color-donkerblauw;
262
+ $utrecht-breadcrumb-link-focus-color: $basiselementen-color-zwart;
263
+ $utrecht-breadcrumb-link-focus-background-color: $basiselementen-color-hemelblauw-tint2;
264
+ $utrecht-breadcrumb-link-color: $basiselementen-color-hemelblauw;
265
+ $utrecht-button-subtle-warning-hover-color: $basiselementen-color-rood-shade1;
266
+ $utrecht-button-subtle-disabled-color: $basiselementen-color-grijs3;
267
+ $utrecht-button-subtle-font-weight: $basiselementen-font-weight-bold;
268
+ $utrecht-button-subtle-color: $basiselementen-color-rood;
269
+ $utrecht-button-secondary-action-hover-border-color: $basiselementen-color-donkerblauw-shade1;
270
+ $utrecht-button-secondary-action-hover-background-color: $basiselementen-color-wit;
271
+ $utrecht-button-secondary-action-hover-color: $basiselementen-color-donkerblauw-shade1;
272
+ $utrecht-button-secondary-action-disabled-color: $basiselementen-color-grijs3;
273
+ $utrecht-button-secondary-action-disabled-border-color: $basiselementen-color-grijs3;
274
+ $utrecht-button-secondary-action-disabled-background-color: $basiselementen-color-wit;
275
+ $utrecht-button-secondary-action-focus-color: $basiselementen-color-donkerblauw;
276
+ $utrecht-button-secondary-action-active-color: $basiselementen-color-wit;
277
+ $utrecht-button-secondary-action-active-border-color: $basiselementen-color-donkerblauw-shade1;
278
+ $utrecht-button-secondary-action-active-background-color: $basiselementen-color-donkerblauw-shade1;
279
+ $utrecht-button-secondary-action-color: $basiselementen-color-donkerblauw;
280
+ $utrecht-button-secondary-action-border-color: $basiselementen-color-donkerblauw;
281
+ $utrecht-button-secondary-action-background-color: $basiselementen-color-wit;
282
+ $utrecht-button-primary-action-warning-disabled-color: $basiselementen-color-grijs3;
283
+ $utrecht-button-primary-action-warning-disabled-background-color: $basiselementen-color-grijs2;
284
+ $utrecht-button-primary-action-warning-disabled-border-color: $basiselementen-color-grijs2;
285
+ $utrecht-button-primary-action-warning-hover-background-color: $basiselementen-color-rood-shade1;
286
+ $utrecht-button-primary-action-warning-focus-background-color: $basiselementen-color-rood;
287
+ $utrecht-button-primary-action-warning-active-background-color: $basiselementen-color-rood;
288
+ $utrecht-button-primary-action-warning-color: $basiselementen-color-wit;
289
+ $utrecht-button-primary-action-warning-background-color: $basiselementen-color-rood;
290
+ $utrecht-button-primary-action-disabled-color: $basiselementen-color-grijs3;
291
+ $utrecht-button-primary-action-disabled-background-color: $basiselementen-color-grijs2;
292
+ $utrecht-button-primary-action-disabled-border-color: $basiselementen-color-grijs2;
293
+ $utrecht-button-primary-action-hover-background-color: $basiselementen-color-donkerblauw-shade1;
294
+ $utrecht-button-primary-action-focus-background-color: $basiselementen-color-donkerblauw;
295
+ $utrecht-button-primary-action-active-background-color: $basiselementen-color-donkerblauw-shade1;
296
+ $utrecht-button-disabled-color: $basiselementen-color-grijs3;
297
+ $utrecht-button-disabled-background-color: $basiselementen-color-grijs2;
298
+ $utrecht-button-disabled-border-color: $basiselementen-color-grijs2;
299
+ $utrecht-button-color: $basiselementen-color-wit;
300
+ $utrecht-button-background-color: $basiselementen-color-donkerblauw;
301
+ $utrecht-button-rvo-xs-font-weight: $basiselementen-font-weight-normal;
302
+ $utrecht-focus-inverse-outline-color: $basiselementen-color-wit;
303
+ $utrecht-focus-outline-color: $basiselementen-color-zwart;
304
+ $basiselementen-document-font-family: $basiselementen-font-sans-serif-font-family;
305
+ $basiselementen-document-color: $basiselementen-color-zwart;
306
+ $basiselementen-document-background-color: $basiselementen-color-wit;
package/dist/index.css CHANGED
@@ -1,13 +1,309 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 07 Mar 2023 16:47:47 GMT
3
+ * Generated on Mon, 20 Mar 2023 15:34:52 GMT
4
4
  */
5
5
 
6
6
  .rhc-theme {
7
- --rhc-focus-outline-offset: 2px;
8
- --rhc-color-grey-100: white;
9
- --rhc-color-grey-0: black;
10
- --rhc-color-blue-50: cornflowerblue;
11
- --rhc-button-color: var(--rhc-color-grey-100);
12
- --rhc-button-background-color: var(--rhc-color-blue-50);
7
+ --rvo-select-padding-inline-start: 18px;
8
+ --rvo-select-padding-inline-end: 50px;
9
+ --rvo-select-padding-block-start: 10px;
10
+ --rvo-select-padding-block-end: 9px;
11
+ --rvo-select-outline-offset: 0;
12
+ --rvo-logo-emblem-background-color: #154273;
13
+ --rvo-logo-font-size: 16px;
14
+ --rvo-heading-1-line-height: 125%;
15
+ --rvo-checkbox-border-width: 1px;
16
+ --rvo-checkbox-icon-size: 16px;
17
+ --rvo-checkbox-size: 24px;
18
+ --utrecht-unordered-list-list-style-type: square;
19
+ --utrecht-unordered-list-padding-inline-start: 20px;
20
+ --utrecht-unordered-list-item-marker: initial;
21
+ --utrecht-unordered-list-item-padding-inline-start: 0;
22
+ --utrecht-unordered-list-item-margin-block-end: 0.5ex;
23
+ --utrecht-unordered-list-item-margin-block-start: 0.5ex;
24
+ --utrecht-unordered-list-margin-block-end: 16px;
25
+ --utrecht-unordered-list-margin-block-start: 0;
26
+ --utrecht-paragraph-small-line-height: 150%;
27
+ --utrecht-paragraph-small-font-size: 16px;
28
+ --utrecht-paragraph-lead-line-height: 150%;
29
+ --utrecht-paragraph-lead-font-size: 20px;
30
+ --utrecht-paragraph-margin-block-end: 16px;
31
+ --utrecht-paragraph-line-height: 150%;
32
+ --utrecht-paragraph-font-size: 18px;
33
+ --utrecht-ordered-list-padding-inline-start: 0;
34
+ --utrecht-ordered-list-item-padding-inline-start: 0;
35
+ --utrecht-ordered-list-item-margin-block-end: 0.5ex;
36
+ --utrecht-ordered-list-item-margin-block-start: 0.5ex;
37
+ --utrecht-ordered-list-margin-block-end: 0;
38
+ --utrecht-link-focus-text-decoration-thickness: 1px;
39
+ --utrecht-link-focus-outline-offset: 0;
40
+ --utrecht-link-active-text-decoration-thickness: 1px;
41
+ --utrecht-link-hover-text-decoration: none;
42
+ --utrecht-link-hover-text-decoration-thickness: 1px;
43
+ --utrecht-link-text-underline-offset: 2px;
44
+ --utrecht-link-text-decoration-thickness: 1px;
45
+ --utrecht-link-text-decoration: underline;
46
+ --utrecht-heading-6-margin-block-end: 4px;
47
+ --utrecht-heading-6-font-size: 0.875rem;
48
+ --utrecht-heading-5-margin-block-end: 4px;
49
+ --utrecht-heading-5-font-size: 1rem;
50
+ --utrecht-heading-4-margin-block-end: 4px;
51
+ --utrecht-heading-4-font-size: 1.125rem;
52
+ --utrecht-heading-3-margin-block-end: 4px;
53
+ --utrecht-heading-3-line-height: 125%;
54
+ --utrecht-heading-3-font-size: 1.25rem;
55
+ --utrecht-heading-2-margin-block-end: 4px;
56
+ --utrecht-heading-2-line-height: 150%;
57
+ --utrecht-heading-2-font-size: 1.5rem;
58
+ --utrecht-heading-1-margin-block-start: 16px;
59
+ --utrecht-heading-1-margin-block-end: 16px;
60
+ --utrecht-heading-1-line-height: 125%;
61
+ --utrecht-heading-1-font-size: 2rem;
62
+ --utrecht-form-label-font-size: 18px;
63
+ --utrecht-form-input-invalid-border-width: 1px;
64
+ --utrecht-form-input-disabled-border-width: 0;
65
+ --utrecht-form-input-padding-inline-start: 12px;
66
+ --utrecht-form-input-padding-inline-end: 12px;
67
+ --utrecht-form-input-padding-block-start: 12px;
68
+ --utrecht-form-input-padding-block-end: 8px;
69
+ --utrecht-form-input-font-size: 18px;
70
+ --utrecht-form-input-border-width: 1px;
71
+ --utrecht-form-input-border-radius: 0;
72
+ --utrecht-form-fieldset-legend-margin-block-start: 0;
73
+ --utrecht-form-fieldset-legend-margin-block-end: 1ex;
74
+ --utrecht-form-fieldset-legend-line-height: 150%;
75
+ --utrecht-form-fieldset-padding-inline-start: 36px;
76
+ --utrecht-form-fieldset-padding-inline-end: 36px;
77
+ --utrecht-form-fieldset-padding-block-start: 36px;
78
+ --utrecht-form-fieldset-padding-block-end: 36px;
79
+ --utrecht-form-fieldset-margin-block-start: 1ex;
80
+ --utrecht-form-fieldset-margin-block-end: 1ex;
81
+ --utrecht-form-field-min-width: 100%;
82
+ --utrecht-form-field-margin-block-start: 1ex;
83
+ --utrecht-form-field-margin-block-end: 1ex;
84
+ --utrecht-form-field-description-margin-block-end: 1ex;
85
+ --utrecht-form-field-description-margin-block-start: 0;
86
+ --utrecht-data-list-rows-column-min-inline-size: 25ch;
87
+ --utrecht-data-list-rows-column-inline-size: 50%;
88
+ --utrecht-data-list-rows-item-value-margin-block-start: 0;
89
+ --utrecht-data-list-rows-item-padding-inline-start: 14px;
90
+ --utrecht-data-list-rows-item-margin-block-start: 0;
91
+ --utrecht-data-list-rows-border-bottom-width: 1px;
92
+ --utrecht-data-list-item-value-padding-inline-start: 18px;
93
+ --utrecht-data-list-item-value-padding-inline-end: 18px;
94
+ --utrecht-data-list-item-value-padding-block-start: 9px;
95
+ --utrecht-data-list-item-value-padding-block-end: 9px;
96
+ --utrecht-data-list-item-key-padding-inline-start: 18px;
97
+ --utrecht-data-list-item-key-padding-inline-end: 18px;
98
+ --utrecht-data-list-item-key-padding-block-start: 9px;
99
+ --utrecht-data-list-item-key-padding-block-end: 9px;
100
+ --utrecht-data-list-item-key-border-inline-end-width: 1px;
101
+ --utrecht-data-list-margin-block-start: 0;
102
+ --utrecht-data-list-margin-block-end: 0;
103
+ --utrecht-data-list-border-width: 1px;
104
+ --utrecht-custom-radio-button-checked-border-width: 3px;
105
+ --utrecht-custom-radio-button-icon-size: 18px;
106
+ --utrecht-custom-radio-button-border-radius: 0;
107
+ --utrecht-custom-radio-button-border-width: 1px;
108
+ --utrecht-custom-radio-button-size: 24px;
109
+ --utrecht-breadcrumb-link-text-decoration: none;
110
+ --utrecht-breadcrumb-link-hover-text-decoration-thickness: 1px !important;
111
+ --utrecht-breadcrumb-link-hover-text-decoration: underline;
112
+ --utrecht-breadcrumb-link-focus-text-decoration-thickness: 1px;
113
+ --utrecht-breadcrumb-link-focus-text-decoration: none;
114
+ --utrecht-breadcrumb-item-padding-inline-start: 0;
115
+ --utrecht-breadcrumb-item-padding-inline-end: 0;
116
+ --utrecht-breadcrumb-item-padding-block-end: 0;
117
+ --utrecht-breadcrumb-item-padding-block-start: 0;
118
+ --utrecht-breadcrumb-item-gap: 8px;
119
+ --utrecht-breadcrumb-font-size: 0.875rem;
120
+ --utrecht-button-subtle-text-decoration: underline;
121
+ --utrecht-button-subtle-disabled-background-color: transparent;
122
+ --utrecht-button-subtle-hover-text-decoration: underline;
123
+ --utrecht-button-subtle-font-size: 15px;
124
+ --utrecht-button-subtle-background-color: transparent;
125
+ --utrecht-button-secondary-action-border-width: 1px;
126
+ --utrecht-button-padding-inline-end: 16px;
127
+ --utrecht-button-padding-inline-start: 16px;
128
+ --utrecht-button-padding-block-end: 8px;
129
+ --utrecht-button-padding-block-start: 8px;
130
+ --utrecht-button-font-size: 18px;
131
+ --utrecht-button-border-width: 0;
132
+ --utrecht-button-rvo-tertiary-action-text-decoration: none;
133
+ --utrecht-button-rvo-md-padding-inline-end: 16px;
134
+ --utrecht-button-rvo-md-padding-inline-start: 16px;
135
+ --utrecht-button-rvo-md-padding-block-end: 8px;
136
+ --utrecht-button-rvo-md-padding-block-start: 8px;
137
+ --utrecht-button-rvo-md-font-size: 18px;
138
+ --utrecht-button-rvo-sm-min-block-size: 30px;
139
+ --utrecht-button-rvo-sm-padding-inline-end: 12px;
140
+ --utrecht-button-rvo-sm-padding-inline-start: 12px;
141
+ --utrecht-button-rvo-sm-padding-block-end: 4px;
142
+ --utrecht-button-rvo-sm-padding-block-start: 4px;
143
+ --utrecht-button-rvo-sm-font-size: 1rem;
144
+ --utrecht-button-rvo-xs-min-block-size: auto;
145
+ --utrecht-button-rvo-xs-padding-inline-end: calc(8px + 4px);
146
+ --utrecht-button-rvo-xs-padding-inline-start: calc(8px + 4px);
147
+ --utrecht-button-rvo-xs-padding-block-end: 4px;
148
+ --utrecht-button-rvo-xs-padding-block-start: 4px;
149
+ --utrecht-button-rvo-xs-font-size: 0.875rem;
150
+ --utrecht-focus-outline-width: 2px;
151
+ --utrecht-focus-outline-style: dashed;
152
+ --utrecht-focus-outline-offset: 3px; /* This is only for buttons. Form fields (input, select and textarea) and links do not have an offset */
153
+ --utrecht-action-submit-cursor: pointer;
154
+ --utrecht-action-disabled-cursor: not-allowed;
155
+ --utrecht-action-busy-cursor: wait;
156
+ --utrecht-action-activate-cursor: pointer;
157
+ --basiselementen-document-line-height: 150%;
158
+ --basiselementen-document-font-size: 18px;
159
+ --basiselementen-root-font-size: 100%;
160
+ --basiselementen-font-weight-bold: 700;
161
+ --basiselementen-font-weight-normal: 400;
162
+ --basiselementen-font-serif-fallback-font-family: 'Times New Roman', serif;
163
+ --basiselementen-font-serif-font-family: 'RijksoverheidSerifWeb';
164
+ --basiselementen-font-sans-serif-fallback-font-family: 'Calibri', 'Verdana', 'Arial', sans-serif;
165
+ --basiselementen-font-sans-serif-font-family: 'RijksoverheidSansWebText';
166
+ --basiselementen-color-wit: #ffffff;
167
+ --basiselementen-color-zwart: #000000;
168
+ --basiselementen-color-grijs7: #535353;
169
+ --basiselementen-color-grijs6: #696969;
170
+ --basiselementen-color-grijs5: #999999;
171
+ --basiselementen-color-grijs4: #b4b4b4;
172
+ --basiselementen-color-grijs3: #cccccc;
173
+ --basiselementen-color-grijs2: #e6e6e6;
174
+ --basiselementen-color-grijs1: #f3f3f3;
175
+ --basiselementen-color-rood-tint2: #f9dfdd;
176
+ --basiselementen-color-rood-shade1: #4d0a0b;
177
+ --basiselementen-color-rood-tint1: #f2bfbb;
178
+ --basiselementen-color-rood: #d51b1e;
179
+ --basiselementen-color-donkergeel-tint2: #fff4dc;
180
+ --basiselementen-color-donkergeel-tint1: #ffe9b7;
181
+ --basiselementen-color-donkergeel: #ffb612;
182
+ --basiselementen-color-donkergroen: #275e08;
183
+ --basiselementen-color-groen-tint2: #e1eddb;
184
+ --basiselementen-color-groen-tint1: #c3dbb6;
185
+ --basiselementen-color-groen: #39870c;
186
+ --basiselementen-color-oranje-tint2: #fbead9;
187
+ --basiselementen-color-oranje-tint1: #f6d4b2;
188
+ --basiselementen-color-oranje: #e17000;
189
+ --basiselementen-color-donkerblauw-shade1: #01496D; /* 30% black (shade) of 'donkerblauw' */
190
+ --basiselementen-color-donkerblauw: #01689b;
191
+ --basiselementen-color-lichtblauw-tint2: #eef7fb;
192
+ --basiselementen-color-lichtblauw-tint1: #ddeff8;
193
+ --basiselementen-color-lichtblauw: #8fcae7;
194
+ --basiselementen-color-hemelblauw-tint2: #d9ebf7;
195
+ --basiselementen-color-hemelblauw-tint1: #b2d7ee;
196
+ --basiselementen-color-hemelblauw: #007bc7;
197
+ --basiselementen-color-logoblauw: #154273;
198
+ --rvo-select-icon-color: var(--basiselementen-color-wit);
199
+ --rvo-select-icon-background-color: var(--basiselementen-color-hemelblauw);
200
+ --rvo-logo-emblem-color: var(--basiselementen-color-wit);
201
+ --rvo-logo-color: var(--basiselementen-color-zwart);
202
+ --rvo-logo-font-family: var(--basiselementen-font-serif-font-family);
203
+ --rvo-custom-radio-button-checked-background: radial-gradient(circle, var(--basiselementen-color-wit) 30%, var(--basiselementen-color-hemelblauw) 30%);
204
+ --rvo-custom-radio-button-checked-border-color: var(--basiselementen-color-hemelblauw);
205
+ --rvo-custom-radio-button-hover-border-color: var(--basiselementen-color-hemelblauw);
206
+ --rvo-custom-radio-button-label-disabled-color: var(--basiselementen-color-grijs3);
207
+ --rvo-checkbox-disabled-color: var(--basiselementen-color-grijs3);
208
+ --rvo-checkbox-disabled-background-color: var(--basiselementen-color-wit);
209
+ --rvo-checkbox-disabled-border-color: var(--basiselementen-color-grijs3);
210
+ --rvo-checkbox-hover-border-color: var(--basiselementen-color-hemelblauw);
211
+ --rvo-checkbox-hover-background-color: var(--basiselementen-color-donkerblauw);
212
+ --rvo-checkbox-checked-background-color: var(--basiselementen-color-hemelblauw);
213
+ --rvo-checkbox-border-color: var(--basiselementen-color-zwart);
214
+ --rvo-checkbox-background-color: var(--basiselementen-color-wit);
215
+ --rvo-checkbox-icon-color: var(--basiselementen-color-wit);
216
+ --utrecht-link-active-font-weight: var(--basiselementen-font-weight-bold);
217
+ --utrecht-link-active-color: var(--basiselementen-color-donkerblauw);
218
+ --utrecht-link-hover-font-weight: var(--basiselementen-font-weight-bold);
219
+ --utrecht-link-hover-color: var(--basiselementen-color-donkerblauw);
220
+ --utrecht-link-font-weight: var(--basiselementen-font-weight-normal);
221
+ --utrecht-link-color: var(--basiselementen-color-hemelblauw);
222
+ --utrecht-heading-6-font-weight: var(--basiselementen-font-weight-bold);
223
+ --utrecht-heading-5-font-weight: var(--basiselementen-font-weight-bold);
224
+ --utrecht-heading-4-font-weight: var(--basiselementen-font-weight-bold);
225
+ --utrecht-heading-3-font-weight: var(--basiselementen-font-weight-bold);
226
+ --utrecht-heading-2-font-weight: var(--basiselementen-font-weight-bold);
227
+ --utrecht-heading-1-font-weight: var(--basiselementen-font-weight-bold);
228
+ --utrecht-form-label-font-weight: var(--basiselementen-font-weight-bold);
229
+ --utrecht-form-input-read-only-color: var(--basiselementen-color-grijs7);
230
+ --utrecht-form-input-read-only-border-color: var(--basiselementen-color-grijs7);
231
+ --utrecht-form-input-invalid-border-color: var(--basiselementen-color-rood);
232
+ --utrecht-form-input-invalid-background-color: var(--basiselementen-color-wit);
233
+ --utrecht-form-input-focus-border-color: var(--basiselementen-color-grijs6);
234
+ --utrecht-form-input-focus-background-color: var(--basiselementen-color-wit);
235
+ --utrecht-form-input-disabled-color: var(--basiselementen-color-grijs7);
236
+ --utrecht-form-input-disabled-border-color: var(--basiselementen-color-grijs7);
237
+ --utrecht-form-input-disabled-background-color: var(--basiselementen-color-grijs3) !important;
238
+ --utrecht-form-input-color: var(--basiselementen-color-zwart);
239
+ --utrecht-form-input-border-color: var(--basiselementen-color-grijs6);
240
+ --utrecht-form-input-background-color: var(--basiselementen-color-wit);
241
+ --utrecht-form-fieldset-legend-font-weight: var(--basiselementen-font-weight-bold);
242
+ --utrecht-form-fieldset-section-background-color: var(--basiselementen-color-wit);
243
+ --utrecht-document-line-height: var(--basiselementen-document-line-height);
244
+ --utrecht-document-font-size: var(--basiselementen-document-font-size);
245
+ --utrecht-document-font-family: var(--basiselementen-font-sans-serif-font-family);
246
+ --utrecht-document-color: var(--basiselementen-color-zwart);
247
+ --utrecht-document-background-color: var(--basiselementen-color-wit);
248
+ --utrecht-data-list-rows-border-bottom-color: var(--basiselementen-color-grijs4);
249
+ --utrecht-data-list-item-key-font-weight: var(--basiselementen-font-weight-bold);
250
+ --utrecht-data-list-item-key-border-inline-end-color: var(--basiselementen-color-grijs4);
251
+ --utrecht-data-list-border-color: var(--basiselementen-color-grijs4);
252
+ --utrecht-custom-radio-button-invalid-border-color: var(--basiselementen-color-grijs3);
253
+ --utrecht-custom-radio-button-checked-active-background-color: var(--basiselementen-color-hemelblauw);
254
+ --utrecht-custom-radio-button-checked-color: var(--basiselementen-color-hemelblauw);
255
+ --utrecht-custom-radio-button-checked-background-color: var(--basiselementen-color-hemelblauw);
256
+ --utrecht-custom-radio-button-checked-border-color: var(--basiselementen-color-hemelblauw);
257
+ --utrecht-custom-radio-button-disabled-background-color: var(--basiselementen-color-wit);
258
+ --utrecht-custom-radio-button-disabled-border-color: var(--basiselementen-color-grijs3);
259
+ --utrecht-custom-radio-button-active-background-color: var(--basiselementen-color-hemelblauw);
260
+ --utrecht-custom-radio-button-background-color: var(--basiselementen-color-wit);
261
+ --utrecht-custom-radio-button-color: var(--basiselementen-color-zwart);
262
+ --utrecht-custom-radio-button-border-color: var(--basiselementen-color-zwart);
263
+ --utrecht-breadcrumb-link-hover-color: var(--basiselementen-color-donkerblauw);
264
+ --utrecht-breadcrumb-link-focus-color: var(--basiselementen-color-zwart);
265
+ --utrecht-breadcrumb-link-focus-background-color: var(--basiselementen-color-hemelblauw-tint2);
266
+ --utrecht-breadcrumb-link-color: var(--basiselementen-color-hemelblauw);
267
+ --utrecht-button-subtle-warning-hover-color: var(--basiselementen-color-rood-shade1);
268
+ --utrecht-button-subtle-disabled-color: var(--basiselementen-color-grijs3);
269
+ --utrecht-button-subtle-font-weight: var(--basiselementen-font-weight-bold);
270
+ --utrecht-button-subtle-color: var(--basiselementen-color-rood);
271
+ --utrecht-button-secondary-action-hover-border-color: var(--basiselementen-color-donkerblauw-shade1);
272
+ --utrecht-button-secondary-action-hover-background-color: var(--basiselementen-color-wit);
273
+ --utrecht-button-secondary-action-hover-color: var(--basiselementen-color-donkerblauw-shade1);
274
+ --utrecht-button-secondary-action-disabled-color: var(--basiselementen-color-grijs3);
275
+ --utrecht-button-secondary-action-disabled-border-color: var(--basiselementen-color-grijs3);
276
+ --utrecht-button-secondary-action-disabled-background-color: var(--basiselementen-color-wit);
277
+ --utrecht-button-secondary-action-focus-color: var(--basiselementen-color-donkerblauw);
278
+ --utrecht-button-secondary-action-active-color: var(--basiselementen-color-wit);
279
+ --utrecht-button-secondary-action-active-border-color: var(--basiselementen-color-donkerblauw-shade1);
280
+ --utrecht-button-secondary-action-active-background-color: var(--basiselementen-color-donkerblauw-shade1);
281
+ --utrecht-button-secondary-action-color: var(--basiselementen-color-donkerblauw);
282
+ --utrecht-button-secondary-action-border-color: var(--basiselementen-color-donkerblauw);
283
+ --utrecht-button-secondary-action-background-color: var(--basiselementen-color-wit);
284
+ --utrecht-button-primary-action-warning-disabled-color: var(--basiselementen-color-grijs3);
285
+ --utrecht-button-primary-action-warning-disabled-background-color: var(--basiselementen-color-grijs2);
286
+ --utrecht-button-primary-action-warning-disabled-border-color: var(--basiselementen-color-grijs2);
287
+ --utrecht-button-primary-action-warning-hover-background-color: var(--basiselementen-color-rood-shade1);
288
+ --utrecht-button-primary-action-warning-focus-background-color: var(--basiselementen-color-rood);
289
+ --utrecht-button-primary-action-warning-active-background-color: var(--basiselementen-color-rood);
290
+ --utrecht-button-primary-action-warning-color: var(--basiselementen-color-wit);
291
+ --utrecht-button-primary-action-warning-background-color: var(--basiselementen-color-rood);
292
+ --utrecht-button-primary-action-disabled-color: var(--basiselementen-color-grijs3);
293
+ --utrecht-button-primary-action-disabled-background-color: var(--basiselementen-color-grijs2);
294
+ --utrecht-button-primary-action-disabled-border-color: var(--basiselementen-color-grijs2);
295
+ --utrecht-button-primary-action-hover-background-color: var(--basiselementen-color-donkerblauw-shade1);
296
+ --utrecht-button-primary-action-focus-background-color: var(--basiselementen-color-donkerblauw);
297
+ --utrecht-button-primary-action-active-background-color: var(--basiselementen-color-donkerblauw-shade1);
298
+ --utrecht-button-disabled-color: var(--basiselementen-color-grijs3);
299
+ --utrecht-button-disabled-background-color: var(--basiselementen-color-grijs2);
300
+ --utrecht-button-disabled-border-color: var(--basiselementen-color-grijs2);
301
+ --utrecht-button-color: var(--basiselementen-color-wit);
302
+ --utrecht-button-background-color: var(--basiselementen-color-donkerblauw);
303
+ --utrecht-button-rvo-xs-font-weight: var(--basiselementen-font-weight-normal);
304
+ --utrecht-focus-inverse-outline-color: var(--basiselementen-color-wit);
305
+ --utrecht-focus-outline-color: var(--basiselementen-color-zwart);
306
+ --basiselementen-document-font-family: var(--basiselementen-font-sans-serif-font-family);
307
+ --basiselementen-document-color: var(--basiselementen-color-zwart);
308
+ --basiselementen-document-background-color: var(--basiselementen-color-wit);
13
309
  }