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

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 (45) hide show
  1. package/LICENSE.md +282 -7
  2. package/README.md +3 -21
  3. package/dist/_variables.scss +7 -303
  4. package/dist/index.css +7 -303
  5. package/dist/index.d.ts +7 -305
  6. package/dist/index.js +7 -303
  7. package/dist/index.json +7 -303
  8. package/dist/index.tokens.json +10 -678
  9. package/dist/root.css +7 -303
  10. package/dist/tokens.d.ts +10 -677
  11. package/dist/tokens.js +78 -6493
  12. package/dist/variables.less +7 -303
  13. package/package.json +6 -7
  14. package/src/brand/rhc/color.tokens.json +6 -96
  15. package/src/common/rhc/focus.tokens.json +7 -0
  16. package/src/components/rhc/button.tokens.json +8 -0
  17. package/src/brand/rhc/font.tokens.json +0 -34
  18. package/src/common/utrecht/action.tokens.json +0 -10
  19. package/src/common/utrecht/focus.tokens.json +0 -17
  20. package/src/components/basiselementen/document.tokens.json +0 -15
  21. package/src/components/rvo/button.tokens.json +0 -33
  22. package/src/components/rvo/checkbox.tokens.json +0 -32
  23. package/src/components/rvo/custom-radio-button.tokens.json +0 -24
  24. package/src/components/rvo/heading.tokens.json +0 -24
  25. package/src/components/rvo/logo.tokens.json +0 -13
  26. package/src/components/rvo/select.tokens.json +0 -15
  27. package/src/components/utrecht/breadcrumbs.tokens.json +0 -66
  28. package/src/components/utrecht/button.tokens.json +0 -120
  29. package/src/components/utrecht/custom-radio-button.tokens.json +0 -53
  30. package/src/components/utrecht/data-list.tokens.json +0 -91
  31. package/src/components/utrecht/document.tokens.json +0 -12
  32. package/src/components/utrecht/form-field.tokens.json +0 -21
  33. package/src/components/utrecht/form-fieldset.tokens.json +0 -27
  34. package/src/components/utrecht/form-input.tokens.json +0 -42
  35. package/src/components/utrecht/form-label.tokens.json +0 -23
  36. package/src/components/utrecht/heading-1.tokens.json +0 -13
  37. package/src/components/utrecht/heading-2.tokens.json +0 -13
  38. package/src/components/utrecht/heading-3.tokens.json +0 -13
  39. package/src/components/utrecht/heading-4.tokens.json +0 -13
  40. package/src/components/utrecht/heading-5.tokens.json +0 -13
  41. package/src/components/utrecht/heading-6.tokens.json +0 -13
  42. package/src/components/utrecht/link.tokens.json +0 -44
  43. package/src/components/utrecht/ordered-list.tokens.json +0 -19
  44. package/src/components/utrecht/paragraph.tokens.json +0 -23
  45. package/src/components/utrecht/unordered-list.tokens.json +0 -31
package/dist/root.css CHANGED
@@ -1,309 +1,13 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 27 Sep 2023 22:56:19 GMT
3
+ * Generated on Tue, 07 Mar 2023 16:47:47 GMT
4
4
  */
5
5
 
6
6
  :root {
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);
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);
309
13
  }