@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/root.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
  :root {
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
  }