@open-inwoner/design-tokens 0.0.15 → 0.0.17

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.
@@ -1,380 +1,402 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Thu, 16 Oct 2025 16:50:30 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
5
  .openinwoner-theme {
7
- --utrecht-unordered-list-marker-color: transparent;
8
- --utrecht-unordered-list-item-padding-inline-start: 0;
9
- --utrecht-unordered-list-item-margin-block-end: 0;
10
- --utrecht-unordered-list-item-margin-block-start: 0;
11
- --utrecht-unordered-list-padding-inline-start: 0;
12
- --utrecht-unordered-list-margin-block-end: 0;
13
- --utrecht-unordered-list-margin-block-start: 0;
14
- --utrecht-typography-line-height-lg: 32px;
15
- --utrecht-typography-line-height-md: 24px;
16
- --utrecht-typography-line-height-sm: 22px;
17
- --utrecht-typography-line-height-xs: 16px;
18
- --utrecht-typography-font-style-inherit: inherit;
19
- --utrecht-typography-font-style-normal: normal;
20
- --utrecht-typography-weight-scale-normal-font-weight: normal;
21
- --utrecht-typography-weight-scale-bold-font-weight: bold;
22
- --utrecht-typography-scale-3xl-font-size: 40px;
23
- --utrecht-typography-scale-2xl-font-size: 32px;
24
- --utrecht-typography-scale-xl-font-size: 20px;
25
- --utrecht-typography-scale-lg-font-size: 24px;
26
- --utrecht-typography-scale-md-font-size: 16px;
27
- --utrecht-typography-scale-sm-font-size: 14px;
28
- --utrecht-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
29
- --utrecht-document-line-height: 24px; /* Default body line-height. */
30
- --utrecht-document-color: #4b4b4b;
31
- --utrecht-document-font-size: 16px; /* The body font-size for the theme. */
32
- --utrecht-textbox-focus-background-color: #ffffff;
33
- --utrecht-textbox-padding-inline-start: 16px;
34
- --utrecht-textbox-padding-inline-end: 16px;
35
- --utrecht-textbox-padding-block-start: 8px;
36
- --utrecht-textbox-padding-block-end: 8px;
37
- --utrecht-textbox-max-inline-size: fit-content;
38
- --utrecht-textbox-line-height: initial;
39
- --utrecht-textbox-font-weight: normal;
40
- --utrecht-textbox-border-width: 1px;
41
- --utrecht-textbox-border-radius: 3px;
42
- --utrecht-textbox-border-color: transparent;
43
- --utrecht-textbox-border-bottom-width: 1px;
44
- --utrecht-textbox-border-block-end-width: 1px;
45
- --utrecht-textbox-background-color: transparent;
46
- --utrecht-skip-link-focus-visible-text-decoration: underline;
47
- --utrecht-skip-link-focus-visible-color: #fff;
48
- --utrecht-skip-link-focus-text-decoration: underline;
49
- --utrecht-skip-link-focus-color: #fff;
50
- --utrecht-skip-link-z-index: 5000;
51
- --utrecht-skip-link-text-decoration: underline;
52
- --utrecht-skip-link-padding-inline-end: 16px;
53
- --utrecht-skip-link-padding-inline-start: 16px;
54
- --utrecht-skip-link-padding-block-end: 24px;
55
- --utrecht-skip-link-padding-block-start: 24px;
56
- --utrecht-skip-link-min-inline-size: 0;
57
- --utrecht-skip-link-min-block-size: 0;
58
- --utrecht-skip-link-color: #fff;
59
- --utrecht-select-padding-inline-start: 0;
60
- --utrecht-select-padding-inline-end: 0;
61
- --utrecht-select-padding-block-start: 0;
62
- --utrecht-select-padding-block-end: 0;
63
- --utrecht-select-max-inline-size: 500px;
64
- --utrecht-select-min-block-size: 36px;
65
- --utrecht-select-line-height: initial;
66
- --utrecht-select-font-weight: normal;
67
- --utrecht-select-border-width: 1px;
68
- --utrecht-select-border-radius: 3px;
69
- --utrecht-select-border-bottom-width: 1px;
70
- --utrecht-select-background-color: #ffffff;
71
- --utrecht-paragraph-small-margin-block-start: 0;
72
- --utrecht-paragraph-small-margin-block-end: 0;
73
- --utrecht-paragraph-small-line-height: 20px;
74
- --utrecht-paragraph-small-font-size: 14px;
75
- --utrecht-paragraph-small-font-weight: normal;
76
- --utrecht-paragraph-small-color: rgba(75,75,75,0.9);
77
- --utrecht-paragraph-margin-block-start: 0;
78
- --utrecht-paragraph-margin-block-end: 0;
79
- --utrecht-paragraph-line-height: 24px;
80
- --utrecht-paragraph-font-weight: normal;
81
- --utrecht-ordered-list-item-padding-inline-start: 0;
82
- --utrecht-ordered-list-item-margin-block-end: 4px;
83
- --utrecht-ordered-list-item-margin-block-start: 4px;
84
- --utrecht-ordered-list-padding-inline-start: 16px;
85
- --utrecht-ordered-list-margin-block-end: 0;
86
- --utrecht-ordered-list-margin-block-start: 0;
87
- --utrecht-listbox-option-icon-size: 16px;
88
- --utrecht-listbox-option-selected-disabled-background-color: #eeeeee;
89
- --utrecht-listbox-option-selected-background-color: #ffffff;
90
- --utrecht-listbox-option-disabled-color: #ffffff;
91
- --utrecht-listbox-option-disabled-background-color: #eeeeee;
92
- --utrecht-listbox-option-padding-inline-start: 16px;
93
- --utrecht-listbox-option-padding-inline-end: 16px;
94
- --utrecht-listbox-option-padding-block-start: 16px;
95
- --utrecht-listbox-option-padding-block-end: 16px;
96
- --utrecht-listbox-option-min-block-size: 100px;
97
- --utrecht-listbox-option-background-color: #ffffff;
98
- --utrecht-listbox-group-label-margin-inline-start: 8px;
99
- --utrecht-listbox-group-label-font-weight: normal;
100
- --utrecht-listbox-group-margin-block-end: 0;
101
- --utrecht-listbox-padding-inline-start: 0;
102
- --utrecht-listbox-padding-inline-end: 12px;
103
- --utrecht-listbox-padding-block-start: 8px;
104
- --utrecht-listbox-padding-block-end: 8px;
105
- --utrecht-listbox-max-block-size: 550px;
106
- --utrecht-listbox-inline-size: fit-content;
107
- --utrecht-listbox-font-weight: 16px;
108
- --utrecht-listbox-border-width: 1px;
109
- --utrecht-listbox-border-radius: 3px;
110
- --utrecht-listbox-border-color: transparent;
111
- --utrecht-listbox-background-color: transparent;
112
- --utrecht-link-list-icon-size: 14px;
113
- --utrecht-link-list-link-text-decoration: none;
114
- --utrecht-link-list-link-font-weight: bold;
115
- --utrecht-link-list-link-column-gap: 8px;
116
- --utrecht-link-list-row-gap: 8px;
117
- --utrecht-link-list-margin-block-end: 0;
118
- --utrecht-link-list-margin-block-start: 0;
119
- --utrecht-heading-4-margin-block-start: 0;
120
- --utrecht-heading-4-margin-block-end: 0;
121
- --utrecht-heading-4-line-height: 26px;
122
- --utrecht-heading-4-font-weight: bold;
123
- --utrecht-heading-4-font-size: 16px;
124
- --utrecht-heading-3-margin-block-start: 0;
125
- --utrecht-heading-3-margin-block-end: 0;
126
- --utrecht-heading-3-line-height: 30px;
127
- --utrecht-heading-3-font-weight: bold;
128
- --utrecht-heading-3-font-size: 20px;
129
- --utrecht-heading-2-margin-block-start: 0;
130
- --utrecht-heading-2-margin-block-end: 0;
131
- --utrecht-heading-2-line-height: 34px;
132
- --utrecht-heading-2-letter-spacing: normal;
133
- --utrecht-heading-2-font-weight: bold;
134
- --utrecht-heading-2-font-size: 24px;
135
- --utrecht-heading-1-margin-block-start: 40px;
136
- --utrecht-heading-1-margin-block-end: 0;
137
- --utrecht-heading-1-line-height: 41px;
138
- --utrecht-heading-1-font-weight: bold;
139
- --utrecht-heading-1-font-size: 32px;
140
- --utrecht-heading-margin-block-start: 0;
141
- --utrecht-heading-margin-block-end: 0;
142
- --utrecht-heading-font-weight: bold;
143
- --utrecht-form-fieldset-legend-margin-block-start: 0;
144
- --utrecht-form-fieldset-legend-margin-block-end: 0;
145
- --utrecht-form-fieldset-legend-line-height: 21px;
146
- --utrecht-form-fieldset-legend-font-weight: normal;
147
- --utrecht-form-fieldset-section-background-color: #FFFFFF;
148
- --utrecht-form-fieldset-margin-block-start: 0;
149
- --utrecht-form-fieldset-margin-block-end: 0;
150
- --utrecht-button-disabled-color: #ffffff;
151
- --utrecht-button-secondary-action-focus-color: #ffffff;
152
- --utrecht-button-secondary-action-hover-color: #ffffff;
153
- --utrecht-button-secondary-action-color: #ffffff;
154
- --utrecht-button-primary-action-focus-color: #ffffff;
155
- --utrecht-button-primary-action-hover-color: #ffffff;
156
- --utrecht-button-primary-action-color: #ffffff;
157
- --utrecht-button-hover-border-color: transparent;
158
- --utrecht-button-hover-background-color: transparent;
159
- --utrecht-button-focus-border-color: transparent;
160
- --utrecht-button-padding-inline-end: 32px;
161
- --utrecht-button-padding-inline-start: 32px;
162
- --utrecht-button-padding-block-end: 16px;
163
- --utrecht-button-padding-block-start: 16px;
164
- --utrecht-button-min-inline-size: 0;
165
- --utrecht-button-min-block-size: 0;
166
- --utrecht-button-cursor: pointer;
167
- --utrecht-button-border-width: 1px;
168
- --utrecht-button-border-radius: 3px;
169
- --utrecht-button-border-color: transparent;
170
- --utrecht-button-background-color: transparent;
171
- --nl-number-badge-padding-inline: 0.5em;
172
- --nl-number-badge-padding-block: 0.5em;
173
- --nl-number-badge-min-inline-size: max-content;
174
- --nl-number-badge-min-block-size: 1em;
175
- --nl-number-badge-min-size: 1em;
176
- --nl-number-badge-font-weight: bold;
177
- --nl-number-badge-border-width: 1px;
178
- --nl-number-badge-border-radius: 3px;
179
- --nl-number-badge-border-color: #f3f3f3;
180
- --nl-number-badge-background-color: #f3f3f3;
181
- --denhaag-side-navigation-link-active-font-weight: bold;
182
- --denhaag-side-navigation-link-padding-block-end: 12px;
183
- --denhaag-side-navigation-link-padding-block-start: 12px;
184
- --denhaag-side-navigation-link-label-gap: 30px;
185
- --denhaag-side-navigation-item-margin-inline-end: 0;
186
- --denhaag-side-navigation-item-margin-inline-start: 0;
187
- --denhaag-side-navigation-item-margin-block-end: 0;
188
- --denhaag-side-navigation-item-margin-block-start: 0;
189
- --denhaag-side-navigation-item-line-height: 1.5;
190
- --denhaag-side-navigation-item-height: 48px;
191
- --denhaag-side-navigation-item-font-weight: normal;
192
- --denhaag-side-navigation-mobile-display: none;
193
- --denhaag-side-navigation-row-gap: 30px;
194
- --denhaag-side-navigation-min-width: 14.5rem;
195
- --denhaag-side-navigation-flex-direction: column;
196
- --denhaag-side-navigation-display: flex;
197
- --oip-utrecht-unordered-list-nested-padding-inline-start: 16px;
198
- --oip-utrecht-unordered-list-nested-margin-inline-start: 0;
199
- --oip-utrecht-unordered-list-marker-content: none;
200
- --oip-utrecht-paragraph-compact-margin-top: 0 !important;
201
- --oip-utrecht-paragraph-compact-margin-bottom: 0 !important;
202
- --oip-utrecht-paragraph-centered-text-align: center;
203
- --oip-fieldset-horizontal-margin-bottom: 20px;
204
- --oip-fieldset-horizontal-gap: 7px;
205
- --oip-fieldset-horizontal-flex-direction: row;
206
- --oip-fieldset-horizontal-display: flex;
207
- --oip-combobox-icon-size: 16px;
208
- --oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
209
- --oip-combobox-popover-listbox-list-padding-inline-start: 0;
210
- --oip-combobox-popover-listbox-list-padding-inline-end: 0;
211
- --oip-combobox-popover-listbox-list-padding-block-start: 0;
212
- --oip-combobox-popover-listbox-list-padding-block-end: 0;
213
- --oip-combobox-popover-listbox-list-margin-inline-end: 0;
214
- --oip-combobox-popover-listbox-list-margin-inline-start: 0;
215
- --oip-combobox-popover-listbox-list-margin-block-end: 0;
216
- --oip-combobox-popover-listbox-list-margin-block-start: 0;
217
- --oip-combobox-popover-hidden-display: none !important;
218
- --oip-combobox-popover-block-end-inset-block-start: 100%;
219
- --oip-combobox-popover-z-index: 1;
220
- --oip-combobox-popover-position: static;
221
- --oip-combobox-popover-overflow: auto;
222
- --oip-combobox-popover-inset: 0;
223
- --oip-combobox-popover-inline-size: fit-content;
224
- --oip-combobox-popover-block-size: fit-content;
225
- --oip-combobox-popover-background-color: #FFFFFF;
226
- --oip-combobox-popover-padding-inline-start: 0;
227
- --oip-combobox-popover-padding-inline-end: 0;
228
- --oip-combobox-popover-padding-block-start: 0;
229
- --oip-combobox-popover-padding-block-end: 0;
230
- --oip-combobox-popover-margin-inline-end: 0;
231
- --oip-combobox-popover-margin-inline-start: 0;
232
- --oip-combobox-popover-margin-block-end: 0;
233
- --oip-combobox-popover-margin-block-start: 0;
234
- --oip-combobox-popover-border-width: 1px;
235
- --oip-combobox-popover-border-style: solid;
236
- --oip-combobox-position: relative;
237
- --oip-combobox-max-inline-size: 550px;
238
- --oip-combobox-line-height: initial;
239
- --oip-combobox-font-weight: normal;
240
- --oip-combobox-inline-size: 100%;
241
- --oip-combobox-display: inline-block;
242
- --oip-combobox-border-width: 1px;
243
- --oip-combobox-border-style: solid;
244
- --oip-combobox-border-radius: 3px;
245
- --oip-typography-heading-font-family: "Heading", "Arial", sans-serif;
246
- --oip-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
247
- --oip-text-line-height: 24px;
248
- --oip-text-big-font-size: 24px;
249
- --oip-text-font-size: 16px;
250
- --oip-text-margin: 20px;
251
- --oip-heading-font-family: "Heading", "Arial", sans-serif;
6
+ --oip-color-primary: #0065BD; /** The primary color makes up a large part of the theme, it is used in buttons for example. */
7
+ --oip-color-primary-h: 210; /** Primary color hue value */
8
+ --oip-color-primary-s: 100%; /** Primary color saturation value */
9
+ --oip-color-primary-l: 37%; /** Primary color lightness value */
10
+ --oip-color-primary-lighter: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%)); /** Lighter version of primary color */
11
+ --oip-color-primary-darker: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%)); /** Darker version of primary color */
12
+ --oip-color-secondary: #006A0F; /** The secondary compliments the primary color and serves as the default for text-links. */
13
+ --oip-color-secondary-h: 207; /** Secondary color hue value */
14
+ --oip-color-secondary-s: 80%; /** Secondary color saturation value */
15
+ --oip-color-secondary-l: 35%; /** Secondary color lightness value */
16
+ --oip-color-secondary-darker: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%)); /** Darker version of secondary color */
17
+ --oip-color-accent: #E10019; /** The accent color is usually the main identity color for a municipality */
18
+ --oip-color-info: #2566A7; /** The dark blue text color for informational states and/or messages. */
19
+ --oip-color-info-light: #D5E6F6; /** The light blue background color for informational states and/or messages. */
20
+ --oip-color-success: #4A7746; /** The dark green text color for success states and/or messages. */
21
+ --oip-color-success-light: #ecf4ec; /** The light green background color for success states and/or messages. */
22
+ --oip-color-warning: #704000; /** The dark orange text color for warning states and/or messages. */
23
+ --oip-color-warning-light: #ffdcad; /** The light orange background color for warning states and/or messages. */
24
+ --oip-color-danger: #5c000f; /** The dark red text color for error/critical states and/or messages. */
25
+ --oip-color-danger-h: 34; /** Danger color hue value */
26
+ --oip-color-danger-s: 100%; /** Danger color saturation value */
27
+ --oip-color-danger-l: 27%; /** Danger color lightness value */
28
+ --oip-color-danger-light: #ffdbe1; /** The light red background color for error/critical states and/or messages. */
29
+ --oip-color-danger-lightest: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%)); /** Lightest version of danger color */
30
+ --oip-color-bg: #ffffff; /** Background color for the (main) user interface. */
31
+ --oip-color-fg: #4b4b4b; /** Blackish foreground color for the (main) user interface. */
32
+ --oip-color-fg-lighter: #676767; /** Blackish 90% grey foreground color for lighter text elements (eg date). */
33
+ --oip-color-fg-muted: #949494; /** Font/foreground color for non-actionable or less-important content. */
34
+ --oip-color-fg-heading: #000000; /** Black foreground color for fully black elements. */
35
+ --oip-color-border: #d2d2d2; /** Default color for borders. */
36
+ --oip-color-gray: #d2d2d2; /** Default 80% gray for borders. */
37
+ --oip-color-gray-lighter: #7a7a7a; /** Default light-gray for table text. */
38
+ --oip-color-gray-lightest: #f3f3f3; /** Very lightest gray for hover styles. */
39
+ --oip-color-red-notification: #e50026; /** The bright red color for notification badges and texts. */
252
40
  --oip-layout-bg: #FFFFFF;
253
- --oip-color-red-notification: #e50026; /* The bright red color for notification badges and texts. */
254
- --oip-color-gray-lightest: #f3f3f3; /* Very lightest gray for hover styles. */
255
- --oip-color-gray-lighter: #7a7a7a; /* Default light-gray for table text. */
256
- --oip-color-gray: #d2d2d2; /* Default 80% gray for borders. */
257
- --oip-color-border: #d2d2d2; /* Default color for borders. */
258
- --oip-color-fg-heading: #000000; /* Black foreground color for fully black elements. */
259
- --oip-color-fg-muted: #949494; /* Font/foreground color for non-actionable or less-important content. */
260
- --oip-color-fg-lighter: #676767; /* Blackish 90% grey foreground color for lighter text elements (eg date). */
261
- --oip-color-fg: #4b4b4b; /* Blackish foreground color for the (main) user interface. */
262
- --oip-color-bg: #ffffff; /* Background color for the (main) user interface. */
263
- --oip-color-danger-lightest: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%)); /* Lightest version of danger color */
264
- --oip-color-danger-light: #ffdbe1; /* The light red background color for error/critical states and/or messages. */
265
- --oip-color-danger-l: 27%; /* Danger color lightness value */
266
- --oip-color-danger-s: 100%; /* Danger color saturation value */
267
- --oip-color-danger-h: 34; /* Danger color hue value */
268
- --oip-color-danger: #5c000f; /* The dark red text color for error/critical states and/or messages. */
269
- --oip-color-warning-light: #ffdcad; /* The light orange background color for warning states and/or messages. */
270
- --oip-color-warning: #704000; /* The dark orange text color for warning states and/or messages. */
271
- --oip-color-success-light: #ecf4ec; /* The light green background color for success states and/or messages. */
272
- --oip-color-success: #4A7746; /* The dark green text color for success states and/or messages. */
273
- --oip-color-info-light: #D5E6F6; /* The light blue background color for informational states and/or messages. */
274
- --oip-color-info: #2566A7; /* The dark blue text color for informational states and/or messages. */
275
- --oip-color-accent: #E10019; /* The accent color is usually the main identity color for a municipality */
276
- --oip-color-secondary-darker: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%)); /* Darker version of secondary color */
277
- --oip-color-secondary-l: 35%; /* Secondary color lightness value */
278
- --oip-color-secondary-s: 80%; /* Secondary color saturation value */
279
- --oip-color-secondary-h: 207; /* Secondary color hue value */
280
- --oip-color-secondary: #006A0F; /* The secondary compliments the primary color and serves as the default for text-links. */
281
- --oip-color-primary-darker: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%)); /* Darker version of primary color */
282
- --oip-color-primary-lighter: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%)); /* Lighter version of primary color */
283
- --oip-color-primary-l: 37%; /* Primary color lightness value */
284
- --oip-color-primary-s: 100%; /* Primary color saturation value */
285
- --oip-color-primary-h: 210; /* Primary color hue value */
286
- --oip-color-primary: #0065BD; /* The primary color makes up a large part of the theme, it is used in buttons for example. */
287
- --utrecht-unordered-list-line-height: var(--oip-text-line-height);
288
- --utrecht-unordered-list-font-family: var(--oip-typography-sans-serif-font-family);
289
- --utrecht-unordered-list-font-size: var(--oip-text-font-size);
290
- --utrecht-document-font-family: var(--oip-typography-sans-serif-font-family); /* The body font-style for the theme. */
291
- --utrecht-textbox-focus-color: var(--oip-color-fg);
292
- --utrecht-textbox-focus-border-color: var(--oip-color-secondary);
293
- --utrecht-textbox-placeholder-color: var(--oip-color-fg-muted);
294
- --utrecht-textbox-font-size: var(--oip-text-font-size);
295
- --utrecht-textbox-font-family: var(--oip-typography-sans-serif-font-family);
296
- --utrecht-textbox-color: var(--oip-color-fg);
297
- --utrecht-skip-link-focus-visible-background-color: var(--oip-color-accent);
298
- --utrecht-skip-link-focus-background-color: var(--oip-color-accent);
299
- --utrecht-skip-link-background-color: var(--oip-color-accent);
300
- --utrecht-select-font-size: var(--oip-text-font-size);
301
- --utrecht-select-font-family: var(--oip-typography-sans-serif-font-family);
302
- --utrecht-select-color: var(--oip-color-fg);
303
- --utrecht-select-border-color: var(--oip-color-fg);
304
- --utrecht-paragraph-small-font-family: var(--oip-typography-sans-serif-font-family);
305
- --utrecht-paragraph-font-size: var(--oip-text-font-size);
306
- --utrecht-paragraph-font-family: var(--oip-typography-sans-serif-font-family);
307
- --utrecht-paragraph-color: var(--oip-color-fg);
308
- --utrecht-ordered-list-line-height: var(--oip-text-line-height);
309
- --utrecht-ordered-list-font-family: var(--oip-typography-sans-serif-font-family);
310
- --utrecht-ordered-list-font-size: var(--oip-text-font-size);
311
- --utrecht-listbox-option-icon-color: var(--oip-color-fg);
312
- --utrecht-listbox-option-selected-hover-color: var(--oip-color-fg);
313
- --utrecht-listbox-option-selected-hover-background-color: var(--oip-color-info-light);
314
- --utrecht-listbox-option-selected-disabled-color: var(--oip-color-fg-muted);
315
- --utrecht-listbox-option-selected-color: var(--oip-color-fg);
316
- --utrecht-listbox-option-hover-color: var(--oip-color-fg);
317
- --utrecht-listbox-option-hover-background-color: var(--oip-color-gray-lightest);
318
- --utrecht-listbox-option-active-color: var(--oip-color-fg);
319
- --utrecht-listbox-option-active-background-color: var(--oip-color-gray-lightest);
320
- --utrecht-listbox-option-color: var(--oip-color-fg);
321
- --utrecht-listbox-group-label-font-size: var(--oip-text-font-size);
322
- --utrecht-listbox-group-label-color: var(--oip-color-fg);
323
- --utrecht-listbox-color: var(--oip-color-gray);
324
- --utrecht-heading-4-font-family: var(--oip-typography-heading-font-family);
325
- --utrecht-heading-4-color: var(--oip-color-fg-heading);
326
- --utrecht-heading-3-font-family: var(--oip-typography-heading-font-family);
327
- --utrecht-heading-3-color: var(--oip-color-fg-heading);
328
- --utrecht-heading-2-font-family: var(--oip-typography-heading-font-family);
329
- --utrecht-heading-2-color: var(--oip-color-fg-heading);
330
- --utrecht-heading-1-font-family: var(--oip-typography-heading-font-family);
331
- --utrecht-heading-1-color: var(--oip-color-fg-heading);
332
- --utrecht-heading-font-family: var(--oip-typography-heading-font-family);
333
- --utrecht-heading-color: var(--oip-color-fg-heading);
334
- --utrecht-form-fieldset-legend-font-size: var(--utrecht-paragraph-small-font-size);
335
- --utrecht-form-fieldset-legend-font-family: var(--oip-typography-sans-serif-font-family);
336
- --utrecht-form-fieldset-legend-color: var(--oip-color-fg-lighter);
337
- --utrecht-form-fieldset-section-color: var(--oip-color-fg-lighter);
338
- --utrecht-button-disabled-border-color: var(--oip-color-gray); /* Default gray for disabled elements */
339
- --utrecht-button-disabled-background-color: var(--oip-color-gray);
340
- --utrecht-button-secondary-action-focus-border-color: var(--oip-color-secondary-darker);
341
- --utrecht-button-secondary-action-focus-background-color: var(--oip-color-secondary-darker);
342
- --utrecht-button-secondary-action-hover-border-color: var(--oip-color-secondary-darker);
343
- --utrecht-button-secondary-action-hover-background-color: var(--oip-color-secondary-darker);
344
- --utrecht-button-secondary-action-border-color: var(--oip-color-secondary); /* The secondary button-background color determined by the configuration. */
345
- --utrecht-button-secondary-action-background-color: var(--oip-color-secondary);
346
- --utrecht-button-primary-action-warning-hover-color: var(--oip-color-danger-lightest);
347
- --utrecht-button-primary-action-warning-hover-border-color: var(--oip-color-danger);
348
- --utrecht-button-primary-action-warning-hover-background-color: var(--oip-color-danger);
349
- --utrecht-button-primary-action-warning-color: var(--oip-color-danger);
350
- --utrecht-button-primary-action-warning-border-color: var(--oip-color-danger-lightest);
351
- --utrecht-button-primary-action-warning-background-color: var(--oip-color-danger-lightest);
352
- --utrecht-button-primary-action-focus-border-color: var(--oip-color-primary-darker);
353
- --utrecht-button-primary-action-focus-background-color: var(--oip-color-primary-darker);
354
- --utrecht-button-primary-action-hover-border-color: var(--oip-color-primary-darker);
355
- --utrecht-button-primary-action-hover-background-color: var(--oip-color-primary-darker);
356
- --utrecht-button-primary-action-border-color: var(--oip-color-primary); /* The primary button-background color determined by the configuration. */
357
- --utrecht-button-primary-action-background-color: var(--oip-color-primary);
358
- --utrecht-button-hover-color: var(--oip-color-secondary);
359
- --utrecht-button-focus-color: var(--oip-color-secondary);
360
- --utrecht-button-line-height: var(--oip-text-line-height);
361
- --utrecht-button-font-size: var(--oip-text-font-size);
362
- --utrecht-button-color: var(--oip-color-secondary);
363
- --nl-number-badge-font-size: var(--oip-text-font-size);
364
- --nl-number-badge-font-family: var(--oip-typography-sans-serif-font-family);
365
- --nl-number-badge-color: var(--oip-color-fg);
366
- --denhaag-side-navigation-link-active-color: var(--oip-color-primary);
367
- --denhaag-side-navigation-link-hover-color: var(--oip-color-primary);
368
- --denhaag-side-navigation-link-color: var(--oip-color-fg);
369
- --denhaag-side-navigation-item-font-size: var(--oip-text-font-size);
370
- --denhaag-side-navigation-item-font-family: var(--oip-typography-sans-serif-font-family);
371
- --oip-utrecht-paragraph-muted-color: var(--oip-color-fg-muted);
372
- --oip-combobox-icon-color: var(--oip-color-fg);
373
- --oip-combobox-popover-listbox-list-option-selected-icon-color: var(--oip-color-fg);
374
- --oip-combobox-popover-color: var(--oip-color-fg);
375
- --oip-combobox-popover-border-color: var(--oip-color-fg);
376
- --oip-combobox-font-size: var(--oip-text-font-size);
377
- --oip-combobox-font-family: var(--oip-typography-sans-serif-font-family);
378
- --oip-combobox-border-color: var(--oip-color-fg);
41
+ --oip-heading-font-family: "Heading", "Arial", sans-serif;
42
+ --oip-text-margin: 20px;
43
+ --oip-text-font-size: 16px;
44
+ --oip-text-big-font-size: 24px;
45
+ --oip-text-line-height: 24px;
46
+ --oip-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
47
+ --oip-typography-heading-font-family: "Heading", "Arial", sans-serif;
48
+ --oip-combobox-border-radius: 3px;
49
+ --oip-combobox-border-style: solid;
50
+ --oip-combobox-border-width: 1px;
51
+ --oip-combobox-display: inline-block;
52
+ --oip-combobox-inline-size: 100%;
53
+ --oip-combobox-font-weight: normal;
54
+ --oip-combobox-line-height: initial;
55
+ --oip-combobox-max-inline-size: 550px;
56
+ --oip-combobox-position: relative;
57
+ --oip-combobox-popover-border-style: solid;
58
+ --oip-combobox-popover-border-width: 1px;
59
+ --oip-combobox-popover-margin-block-start: 0;
60
+ --oip-combobox-popover-margin-block-end: 0;
61
+ --oip-combobox-popover-margin-inline-start: 0;
62
+ --oip-combobox-popover-margin-inline-end: 0;
63
+ --oip-combobox-popover-padding-block-end: 0;
64
+ --oip-combobox-popover-padding-block-start: 0;
65
+ --oip-combobox-popover-padding-inline-end: 0;
66
+ --oip-combobox-popover-padding-inline-start: 0;
67
+ --oip-combobox-popover-background-color: #FFFFFF;
68
+ --oip-combobox-popover-block-size: fit-content;
69
+ --oip-combobox-popover-inline-size: fit-content;
70
+ --oip-combobox-popover-inset: 0;
71
+ --oip-combobox-popover-overflow: auto;
72
+ --oip-combobox-popover-position: static;
73
+ --oip-combobox-popover-z-index: 1;
74
+ --oip-combobox-popover-block-end-inset-block-start: 100%;
75
+ --oip-combobox-popover-hidden-display: none !important;
76
+ --oip-combobox-popover-listbox-list-margin-block-start: 0;
77
+ --oip-combobox-popover-listbox-list-margin-block-end: 0;
78
+ --oip-combobox-popover-listbox-list-margin-inline-start: 0;
79
+ --oip-combobox-popover-listbox-list-margin-inline-end: 0;
80
+ --oip-combobox-popover-listbox-list-padding-block-end: 0;
81
+ --oip-combobox-popover-listbox-list-padding-block-start: 0;
82
+ --oip-combobox-popover-listbox-list-padding-inline-end: 0;
83
+ --oip-combobox-popover-listbox-list-padding-inline-start: 0;
84
+ --oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
85
+ --oip-combobox-icon-size: 16px;
86
+ --oip-fieldset-horizontal-display: flex;
87
+ --oip-fieldset-horizontal-flex-direction: row;
88
+ --oip-fieldset-horizontal-gap: 7px;
89
+ --oip-fieldset-horizontal-margin-bottom: 20px;
90
+ --oip-utrecht-paragraph-centered-text-align: center;
91
+ --oip-utrecht-paragraph-compact-margin-bottom: 0 !important;
92
+ --oip-utrecht-paragraph-compact-margin-top: 0 !important;
93
+ --oip-utrecht-unordered-list-marker-content: none;
94
+ --oip-utrecht-unordered-list-nested-margin-inline-start: 0;
95
+ --oip-utrecht-unordered-list-nested-padding-inline-start: 16px;
96
+ --denhaag-action-border-style: solid;
97
+ --denhaag-action-border-width: 1px;
98
+ --denhaag-action-padding-block-start: 12px;
99
+ --denhaag-action-padding-block-end: 12px;
100
+ --denhaag-action-lg-padding-block-start: 16px;
101
+ --denhaag-action-lg-padding-block-end: 16px;
102
+ --denhaag-action-gap: 8px;
103
+ --denhaag-action-lg-gap: 16px;
104
+ --denhaag-action-actions-gap: 16px;
105
+ --denhaag-action-link-icon-width: 16px;
106
+ --denhaag-side-navigation-display: flex;
107
+ --denhaag-side-navigation-flex-direction: column;
108
+ --denhaag-side-navigation-min-width: 14.5rem;
109
+ --denhaag-side-navigation-row-gap: 30px;
110
+ --denhaag-side-navigation-mobile-display: none;
111
+ --denhaag-side-navigation-item-font-weight: normal;
112
+ --denhaag-side-navigation-item-height: 48px;
113
+ --denhaag-side-navigation-item-line-height: 1.5;
114
+ --denhaag-side-navigation-item-margin-block-start: 0;
115
+ --denhaag-side-navigation-item-margin-block-end: 0;
116
+ --denhaag-side-navigation-item-margin-inline-start: 0;
117
+ --denhaag-side-navigation-item-margin-inline-end: 0;
118
+ --denhaag-side-navigation-link-label-gap: 30px;
119
+ --denhaag-side-navigation-link-padding-block-start: 12px;
120
+ --denhaag-side-navigation-link-padding-block-end: 12px;
121
+ --denhaag-side-navigation-link-active-font-weight: bold;
122
+ --nl-number-badge-background-color: #f3f3f3;
123
+ --nl-number-badge-border-color: #f3f3f3;
124
+ --nl-number-badge-border-radius: 3px;
125
+ --nl-number-badge-border-width: 1px;
126
+ --nl-number-badge-font-weight: bold;
127
+ --nl-number-badge-min-size: 1em;
128
+ --nl-number-badge-min-block-size: 1em;
129
+ --nl-number-badge-min-inline-size: max-content;
130
+ --nl-number-badge-padding-block: 0.5em;
131
+ --nl-number-badge-padding-inline: 0.5em;
132
+ --utrecht-button-background-color: transparent;
133
+ --utrecht-button-border-color: transparent;
134
+ --utrecht-button-border-radius: 3px;
135
+ --utrecht-button-border-width: 1px;
136
+ --utrecht-button-cursor: pointer;
137
+ --utrecht-button-min-block-size: 0;
138
+ --utrecht-button-min-inline-size: 0;
139
+ --utrecht-button-padding-block-start: 16px;
140
+ --utrecht-button-padding-block-end: 16px;
141
+ --utrecht-button-padding-inline-start: 32px;
142
+ --utrecht-button-padding-inline-end: 32px;
143
+ --utrecht-button-focus-border-color: transparent;
144
+ --utrecht-button-hover-background-color: transparent;
145
+ --utrecht-button-hover-border-color: transparent;
146
+ --utrecht-button-primary-action-color: #ffffff;
147
+ --utrecht-button-primary-action-hover-color: #ffffff;
148
+ --utrecht-button-primary-action-focus-color: #ffffff;
149
+ --utrecht-button-secondary-action-color: #ffffff;
150
+ --utrecht-button-secondary-action-hover-color: #ffffff;
151
+ --utrecht-button-secondary-action-focus-color: #ffffff;
152
+ --utrecht-button-disabled-color: #ffffff;
153
+ --utrecht-form-fieldset-margin-block-end: 0;
154
+ --utrecht-form-fieldset-margin-block-start: 0;
155
+ --utrecht-form-fieldset-section-background-color: #FFFFFF;
156
+ --utrecht-form-fieldset-legend-font-weight: normal;
157
+ --utrecht-form-fieldset-legend-line-height: 21px;
158
+ --utrecht-form-fieldset-legend-margin-block-end: 0;
159
+ --utrecht-form-fieldset-legend-margin-block-start: 0;
160
+ --utrecht-heading-font-weight: bold;
161
+ --utrecht-heading-margin-block-end: 0;
162
+ --utrecht-heading-margin-block-start: 0;
163
+ --utrecht-heading-1-font-size: 32px;
164
+ --utrecht-heading-1-font-weight: bold;
165
+ --utrecht-heading-1-line-height: 41px;
166
+ --utrecht-heading-1-margin-block-end: 0;
167
+ --utrecht-heading-1-margin-block-start: 40px;
168
+ --utrecht-heading-2-font-size: 24px;
169
+ --utrecht-heading-2-font-weight: bold;
170
+ --utrecht-heading-2-letter-spacing: normal;
171
+ --utrecht-heading-2-line-height: 34px;
172
+ --utrecht-heading-2-margin-block-end: 0;
173
+ --utrecht-heading-2-margin-block-start: 0;
174
+ --utrecht-heading-3-font-size: 20px;
175
+ --utrecht-heading-3-font-weight: bold;
176
+ --utrecht-heading-3-line-height: 30px;
177
+ --utrecht-heading-3-margin-block-end: 0;
178
+ --utrecht-heading-3-margin-block-start: 0;
179
+ --utrecht-heading-4-font-size: 16px;
180
+ --utrecht-heading-4-font-weight: bold;
181
+ --utrecht-heading-4-line-height: 26px;
182
+ --utrecht-heading-4-margin-block-end: 0;
183
+ --utrecht-heading-4-margin-block-start: 0;
184
+ --utrecht-link-list-margin-block-start: 0;
185
+ --utrecht-link-list-margin-block-end: 0;
186
+ --utrecht-link-list-row-gap: 8px;
187
+ --utrecht-link-list-link-column-gap: 8px;
188
+ --utrecht-link-list-link-font-weight: bold;
189
+ --utrecht-link-list-link-text-decoration: none;
190
+ --utrecht-link-list-icon-size: 14px;
191
+ --utrecht-listbox-background-color: transparent;
192
+ --utrecht-listbox-border-color: transparent;
193
+ --utrecht-listbox-border-radius: 3px;
194
+ --utrecht-listbox-border-width: 1px;
195
+ --utrecht-listbox-font-weight: 16px;
196
+ --utrecht-listbox-inline-size: fit-content;
197
+ --utrecht-listbox-max-block-size: 550px;
198
+ --utrecht-listbox-padding-block-end: 8px;
199
+ --utrecht-listbox-padding-block-start: 8px;
200
+ --utrecht-listbox-padding-inline-end: 12px;
201
+ --utrecht-listbox-padding-inline-start: 0;
202
+ --utrecht-listbox-group-margin-block-end: 0;
203
+ --utrecht-listbox-group-label-font-weight: normal;
204
+ --utrecht-listbox-group-label-margin-inline-start: 8px;
205
+ --utrecht-listbox-option-background-color: #ffffff;
206
+ --utrecht-listbox-option-min-block-size: 100px;
207
+ --utrecht-listbox-option-padding-block-end: 16px;
208
+ --utrecht-listbox-option-padding-block-start: 16px;
209
+ --utrecht-listbox-option-padding-inline-end: 16px;
210
+ --utrecht-listbox-option-padding-inline-start: 16px;
211
+ --utrecht-listbox-option-disabled-background-color: #eeeeee;
212
+ --utrecht-listbox-option-disabled-color: #ffffff;
213
+ --utrecht-listbox-option-selected-background-color: #ffffff;
214
+ --utrecht-listbox-option-selected-disabled-background-color: #eeeeee;
215
+ --utrecht-listbox-option-icon-size: 16px;
216
+ --utrecht-ordered-list-margin-block-start: 0;
217
+ --utrecht-ordered-list-margin-block-end: 0;
218
+ --utrecht-ordered-list-padding-inline-start: 16px;
219
+ --utrecht-ordered-list-item-margin-block-start: 4px;
220
+ --utrecht-ordered-list-item-margin-block-end: 4px;
221
+ --utrecht-ordered-list-item-padding-inline-start: 0;
222
+ --utrecht-paragraph-font-weight: normal;
223
+ --utrecht-paragraph-line-height: 24px;
224
+ --utrecht-paragraph-margin-block-end: 0;
225
+ --utrecht-paragraph-margin-block-start: 0;
226
+ --utrecht-paragraph-small-color: rgba(75,75,75,0.9);
227
+ --utrecht-paragraph-small-font-weight: normal;
228
+ --utrecht-paragraph-small-font-size: 14px;
229
+ --utrecht-paragraph-small-line-height: 20px;
230
+ --utrecht-paragraph-small-margin-block-end: 0;
231
+ --utrecht-paragraph-small-margin-block-start: 0;
232
+ --utrecht-select-background-color: #ffffff;
233
+ --utrecht-select-border-bottom-width: 1px;
234
+ --utrecht-select-border-radius: 3px;
235
+ --utrecht-select-border-width: 1px;
236
+ --utrecht-select-font-weight: normal;
237
+ --utrecht-select-line-height: initial;
238
+ --utrecht-select-min-block-size: 36px;
239
+ --utrecht-select-max-inline-size: 500px;
240
+ --utrecht-select-padding-block-end: 0;
241
+ --utrecht-select-padding-block-start: 0;
242
+ --utrecht-select-padding-inline-end: 0;
243
+ --utrecht-select-padding-inline-start: 0;
244
+ --utrecht-skip-link-color: #fff;
245
+ --utrecht-skip-link-min-block-size: 0;
246
+ --utrecht-skip-link-min-inline-size: 0;
247
+ --utrecht-skip-link-padding-block-start: 24px;
248
+ --utrecht-skip-link-padding-block-end: 24px;
249
+ --utrecht-skip-link-padding-inline-start: 16px;
250
+ --utrecht-skip-link-padding-inline-end: 16px;
251
+ --utrecht-skip-link-text-decoration: underline;
252
+ --utrecht-skip-link-z-index: 5000;
253
+ --utrecht-skip-link-focus-color: #fff;
254
+ --utrecht-skip-link-focus-text-decoration: underline;
255
+ --utrecht-skip-link-focus-visible-color: #fff;
256
+ --utrecht-skip-link-focus-visible-text-decoration: underline;
257
+ --utrecht-textbox-background-color: transparent;
258
+ --utrecht-textbox-border-block-end-width: 1px;
259
+ --utrecht-textbox-border-bottom-width: 1px;
260
+ --utrecht-textbox-border-color: transparent;
261
+ --utrecht-textbox-border-radius: 3px;
262
+ --utrecht-textbox-border-width: 1px;
263
+ --utrecht-textbox-font-weight: normal;
264
+ --utrecht-textbox-line-height: initial;
265
+ --utrecht-textbox-max-inline-size: fit-content;
266
+ --utrecht-textbox-padding-block-end: 8px;
267
+ --utrecht-textbox-padding-block-start: 8px;
268
+ --utrecht-textbox-padding-inline-end: 16px;
269
+ --utrecht-textbox-padding-inline-start: 16px;
270
+ --utrecht-textbox-focus-background-color: #ffffff;
271
+ --utrecht-document-font-size: 16px; /** The body font-size for the theme. */
272
+ --utrecht-document-color: #4b4b4b;
273
+ --utrecht-document-line-height: 24px; /** Default body line-height. */
274
+ --utrecht-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
275
+ --utrecht-typography-scale-sm-font-size: 14px;
276
+ --utrecht-typography-scale-md-font-size: 16px;
277
+ --utrecht-typography-scale-lg-font-size: 24px;
278
+ --utrecht-typography-scale-xl-font-size: 20px;
279
+ --utrecht-typography-scale-2xl-font-size: 32px;
280
+ --utrecht-typography-scale-3xl-font-size: 40px;
281
+ --utrecht-typography-weight-scale-bold-font-weight: bold;
282
+ --utrecht-typography-weight-scale-normal-font-weight: normal;
283
+ --utrecht-typography-font-style-normal: normal;
284
+ --utrecht-typography-font-style-inherit: inherit;
285
+ --utrecht-typography-line-height-xs: 16px;
286
+ --utrecht-typography-line-height-sm: 22px;
287
+ --utrecht-typography-line-height-md: 24px;
288
+ --utrecht-typography-line-height-lg: 32px;
289
+ --utrecht-unordered-list-margin-block-start: 0;
290
+ --utrecht-unordered-list-margin-block-end: 0;
291
+ --utrecht-unordered-list-padding-inline-start: 0;
292
+ --utrecht-unordered-list-item-margin-block-start: 0;
293
+ --utrecht-unordered-list-item-margin-block-end: 0;
294
+ --utrecht-unordered-list-item-padding-inline-start: 0;
295
+ --utrecht-unordered-list-marker-color: transparent;
379
296
  --oip-heading-fg: var(--oip-color-fg);
297
+ --oip-combobox-border-color: var(--oip-color-fg);
298
+ --oip-combobox-font-family: var(--oip-typography-sans-serif-font-family);
299
+ --oip-combobox-font-size: var(--oip-text-font-size);
300
+ --oip-combobox-popover-border-color: var(--oip-color-fg);
301
+ --oip-combobox-popover-color: var(--oip-color-fg);
302
+ --oip-combobox-popover-listbox-list-option-selected-icon-color: var(--oip-color-fg);
303
+ --oip-combobox-icon-color: var(--oip-color-fg);
304
+ --oip-utrecht-paragraph-muted-color: var(--oip-color-fg-muted);
305
+ --denhaag-action-background-color: var(--oip-color-bg);
306
+ --denhaag-action-color: var(--oip-color-fg);
307
+ --denhaag-action-border-color: var(--oip-color-border);
308
+ --denhaag-action-single-padding-block-start: var(--denhaag-action-padding-block-start);
309
+ --denhaag-action-single-padding-block-end: var(--denhaag-action-padding-block-end);
310
+ --denhaag-action-single-hover-background-color: var(--oip-color-gray-lightest);
311
+ --denhaag-action-lg-single-padding-block-start: var(--denhaag-action-lg-padding-block-start);
312
+ --denhaag-action-lg-single-padding-block-end: var(--denhaag-action-lg-padding-block-end);
313
+ --denhaag-action-multi-padding-block-start: var(--denhaag-action-padding-block-start);
314
+ --denhaag-action-multi-padding-block-end: var(--denhaag-action-padding-block-end);
315
+ --denhaag-action-lg-multi-padding-block-start: var(--denhaag-action-lg-padding-block-start);
316
+ --denhaag-action-lg-multi-padding-block-end: var(--denhaag-action-lg-padding-block-end);
317
+ --denhaag-action-link-icon-color: var(--oip-color-primary);
318
+ --denhaag-side-navigation-item-font-family: var(--oip-typography-sans-serif-font-family);
319
+ --denhaag-side-navigation-item-font-size: var(--oip-text-font-size);
320
+ --denhaag-side-navigation-link-color: var(--oip-color-fg);
321
+ --denhaag-side-navigation-link-hover-color: var(--oip-color-primary);
322
+ --denhaag-side-navigation-link-active-color: var(--oip-color-primary);
323
+ --nl-number-badge-color: var(--oip-color-fg);
324
+ --nl-number-badge-font-family: var(--oip-typography-sans-serif-font-family);
325
+ --nl-number-badge-font-size: var(--oip-text-font-size);
326
+ --utrecht-button-color: var(--oip-color-secondary);
327
+ --utrecht-button-font-size: var(--oip-text-font-size);
328
+ --utrecht-button-line-height: var(--oip-text-line-height);
329
+ --utrecht-button-focus-color: var(--oip-color-secondary);
330
+ --utrecht-button-hover-color: var(--oip-color-secondary);
331
+ --utrecht-button-primary-action-background-color: var(--oip-color-primary);
332
+ --utrecht-button-primary-action-border-color: var(--oip-color-primary); /** The primary button-background color determined by the configuration. */
333
+ --utrecht-button-primary-action-hover-background-color: var(--oip-color-primary-darker);
334
+ --utrecht-button-primary-action-hover-border-color: var(--oip-color-primary-darker);
335
+ --utrecht-button-primary-action-focus-background-color: var(--oip-color-primary-darker);
336
+ --utrecht-button-primary-action-focus-border-color: var(--oip-color-primary-darker);
337
+ --utrecht-button-primary-action-warning-background-color: var(--oip-color-danger-lightest);
338
+ --utrecht-button-primary-action-warning-border-color: var(--oip-color-danger-lightest);
339
+ --utrecht-button-primary-action-warning-color: var(--oip-color-danger);
340
+ --utrecht-button-primary-action-warning-hover-background-color: var(--oip-color-danger);
341
+ --utrecht-button-primary-action-warning-hover-border-color: var(--oip-color-danger);
342
+ --utrecht-button-primary-action-warning-hover-color: var(--oip-color-danger-lightest);
343
+ --utrecht-button-secondary-action-background-color: var(--oip-color-secondary);
344
+ --utrecht-button-secondary-action-border-color: var(--oip-color-secondary); /** The secondary button-background color determined by the configuration. */
345
+ --utrecht-button-secondary-action-hover-background-color: var(--oip-color-secondary-darker);
346
+ --utrecht-button-secondary-action-hover-border-color: var(--oip-color-secondary-darker);
347
+ --utrecht-button-secondary-action-focus-background-color: var(--oip-color-secondary-darker);
348
+ --utrecht-button-secondary-action-focus-border-color: var(--oip-color-secondary-darker);
349
+ --utrecht-button-disabled-background-color: var(--oip-color-gray);
350
+ --utrecht-button-disabled-border-color: var(--oip-color-gray); /** Default gray for disabled elements */
351
+ --utrecht-form-fieldset-section-color: var(--oip-color-fg-lighter);
352
+ --utrecht-form-fieldset-legend-color: var(--oip-color-fg-lighter);
353
+ --utrecht-form-fieldset-legend-font-family: var(--oip-typography-sans-serif-font-family);
354
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-paragraph-small-font-size);
355
+ --utrecht-heading-color: var(--oip-color-fg-heading);
356
+ --utrecht-heading-font-family: var(--oip-typography-heading-font-family);
357
+ --utrecht-heading-1-color: var(--oip-color-fg-heading);
358
+ --utrecht-heading-1-font-family: var(--oip-typography-heading-font-family);
359
+ --utrecht-heading-2-color: var(--oip-color-fg-heading);
360
+ --utrecht-heading-2-font-family: var(--oip-typography-heading-font-family);
361
+ --utrecht-heading-3-color: var(--oip-color-fg-heading);
362
+ --utrecht-heading-3-font-family: var(--oip-typography-heading-font-family);
363
+ --utrecht-heading-4-color: var(--oip-color-fg-heading);
364
+ --utrecht-heading-4-font-family: var(--oip-typography-heading-font-family);
365
+ --utrecht-listbox-color: var(--oip-color-gray);
366
+ --utrecht-listbox-group-label-color: var(--oip-color-fg);
367
+ --utrecht-listbox-group-label-font-size: var(--oip-text-font-size);
368
+ --utrecht-listbox-option-color: var(--oip-color-fg);
369
+ --utrecht-listbox-option-active-background-color: var(--oip-color-gray-lightest);
370
+ --utrecht-listbox-option-active-color: var(--oip-color-fg);
371
+ --utrecht-listbox-option-hover-background-color: var(--oip-color-gray-lightest);
372
+ --utrecht-listbox-option-hover-color: var(--oip-color-fg);
373
+ --utrecht-listbox-option-selected-color: var(--oip-color-fg);
374
+ --utrecht-listbox-option-selected-disabled-color: var(--oip-color-fg-muted);
375
+ --utrecht-listbox-option-selected-hover-background-color: var(--oip-color-info-light);
376
+ --utrecht-listbox-option-selected-hover-color: var(--oip-color-fg);
377
+ --utrecht-listbox-option-icon-color: var(--oip-color-fg);
378
+ --utrecht-ordered-list-font-size: var(--oip-text-font-size);
379
+ --utrecht-ordered-list-font-family: var(--oip-typography-sans-serif-font-family);
380
+ --utrecht-ordered-list-line-height: var(--oip-text-line-height);
381
+ --utrecht-paragraph-color: var(--oip-color-fg);
382
+ --utrecht-paragraph-font-family: var(--oip-typography-sans-serif-font-family);
383
+ --utrecht-paragraph-font-size: var(--oip-text-font-size);
384
+ --utrecht-paragraph-small-font-family: var(--oip-typography-sans-serif-font-family);
385
+ --utrecht-select-border-color: var(--oip-color-fg);
386
+ --utrecht-select-color: var(--oip-color-fg);
387
+ --utrecht-select-font-family: var(--oip-typography-sans-serif-font-family);
388
+ --utrecht-select-font-size: var(--oip-text-font-size);
389
+ --utrecht-skip-link-background-color: var(--oip-color-accent);
390
+ --utrecht-skip-link-focus-background-color: var(--oip-color-accent);
391
+ --utrecht-skip-link-focus-visible-background-color: var(--oip-color-accent);
392
+ --utrecht-textbox-color: var(--oip-color-fg);
393
+ --utrecht-textbox-font-family: var(--oip-typography-sans-serif-font-family);
394
+ --utrecht-textbox-font-size: var(--oip-text-font-size);
395
+ --utrecht-textbox-placeholder-color: var(--oip-color-fg-muted);
396
+ --utrecht-textbox-focus-border-color: var(--oip-color-secondary);
397
+ --utrecht-textbox-focus-color: var(--oip-color-fg);
398
+ --utrecht-document-font-family: var(--oip-typography-sans-serif-font-family); /** The body font-style for the theme. */
399
+ --utrecht-unordered-list-font-size: var(--oip-text-font-size);
400
+ --utrecht-unordered-list-font-family: var(--oip-typography-sans-serif-font-family);
401
+ --utrecht-unordered-list-line-height: var(--oip-text-line-height);
380
402
  }