@utrecht/design-tokens 2.1.0 → 2.2.0

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 (79) hide show
  1. package/.stylelintrc.json +5 -1
  2. package/CHANGELOG.md +14 -0
  3. package/config.json +8 -0
  4. package/dist/_mixin-theme.scss +34 -37
  5. package/dist/_mixin.scss +1009 -0
  6. package/dist/_variables.scss +34 -37
  7. package/dist/background-image-icon.css +0 -1
  8. package/dist/dark/_mixin-theme.scss +34 -37
  9. package/dist/dark/_mixin.scss +1020 -0
  10. package/dist/dark/_variables.scss +1017 -0
  11. package/dist/dark/index.cjs +1020 -0
  12. package/dist/dark/index.css +34 -37
  13. package/dist/dark/index.d.ts +1139 -0
  14. package/dist/dark/index.flat.json +1016 -0
  15. package/dist/dark/index.json +30694 -0
  16. package/dist/dark/index.mjs +1018 -0
  17. package/dist/dark/index.tokens.json +7885 -0
  18. package/dist/dark/list.json +30694 -0
  19. package/dist/dark/property.css +705 -0
  20. package/dist/dark/root.css +538 -541
  21. package/dist/dark/theme-prince-xml.css +1020 -0
  22. package/dist/dark/theme.css +1020 -0
  23. package/dist/dark/tokens.cjs +37567 -0
  24. package/dist/dark/tokens.d.ts +4842 -0
  25. package/dist/dark/tokens.json +37563 -0
  26. package/dist/dark/variables.cjs +1020 -0
  27. package/dist/dark/variables.css +1020 -0
  28. package/dist/dark/variables.d.ts +1139 -0
  29. package/dist/dark/variables.json +1016 -0
  30. package/dist/dark/variables.less +1017 -0
  31. package/dist/dark/variables.mjs +1018 -0
  32. package/dist/index.cjs +29 -32
  33. package/dist/index.css +149 -82
  34. package/dist/index.d.ts +18 -25
  35. package/dist/index.flat.json +591 -593
  36. package/dist/index.json +4577 -7587
  37. package/dist/index.mjs +31 -34
  38. package/dist/index.tokens.json +385 -71
  39. package/dist/list.json +31811 -0
  40. package/dist/property.css +770 -0
  41. package/dist/root.css +529 -532
  42. package/dist/theme-prince-xml.css +34 -37
  43. package/dist/theme.css +529 -532
  44. package/dist/tokens.cjs +6297 -8992
  45. package/dist/tokens.d.ts +208 -60
  46. package/dist/tokens.json +38705 -0
  47. package/dist/variables.cjs +1009 -0
  48. package/dist/variables.css +1009 -0
  49. package/dist/variables.d.ts +1128 -0
  50. package/dist/variables.json +1005 -0
  51. package/dist/variables.less +34 -37
  52. package/dist/variables.mjs +1007 -0
  53. package/package.json +6 -5
  54. package/src/background-image-icon.scss +0 -1
  55. package/src/brand/utrecht/typography.tokens.json +7 -9
  56. package/src/component/of/progress-indicator.tokens.json +1 -1
  57. package/src/component/utrecht/backdrop.tokens.json +1 -1
  58. package/src/component/utrecht/blockquote.tokens.json +3 -3
  59. package/src/component/utrecht/button.tokens.json +1 -3
  60. package/src/component/utrecht/code-block.tokens.json +2 -2
  61. package/src/component/utrecht/figure.tokens.json +2 -2
  62. package/src/component/utrecht/form-fieldset.tokens.json +2 -2
  63. package/src/component/utrecht/form-toggle.tokens.json +1 -1
  64. package/src/component/utrecht/link.tokens.json +3 -1
  65. package/src/component/utrecht/pagination.tokens.json +1 -1
  66. package/src/component/utrecht/skip-link.tokens.json +4 -2
  67. package/src/component/utrecht/table.tokens.json +1 -1
  68. package/src/component/utrecht/toptask-link.tokens.json +1 -1
  69. package/src/css-property-formatter.mjs +46 -0
  70. package/src/dark/component/tokens.json +1 -1
  71. package/src/index.scss +81 -5
  72. package/style-dictionary-build-dark.mjs +64 -0
  73. package/style-dictionary-build.mjs +41 -0
  74. package/style-dictionary-config.mjs +261 -0
  75. package/dist/figma-tokens.json +0 -40396
  76. package/src/css-property-formatter.js +0 -35
  77. package/src/style-dictionary-config-dark.js +0 -56
  78. package/src/style-dictionary-config.js +0 -63
  79. package/style-dictionary.config.json +0 -143
@@ -1,191 +1,173 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Tue, 01 Oct 2024 19:52:16 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
- :root, ::backdrop {
7
- --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
8
- --denhaag-process-steps-sub-step-marker-size: 12px;
9
- --denhaag-process-steps-step-marker-size: 28px;
10
- --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
11
- --utrecht-stack-focus-z-index: 1;
12
- --utrecht-border-style-dotted: dotted;
13
- --utrecht-border-style-solid: solid;
14
- --utrecht-border-radius-none: 0;
15
- --utrecht-border-radius-round: 999px;
16
- --utrecht-border-radius-lg: 8px;
17
- --utrecht-border-radius-md: 4px;
18
- --utrecht-border-radius-sm: 2px;
19
- --utrecht-border-width-md: 2px;
20
- --utrecht-border-width-sm: 1px;
21
- --utrecht-typography-line-height-lg: 2;
22
- --utrecht-typography-line-height-md: 1.5;
23
- --utrecht-typography-line-height-sm: 1.25;
24
- --utrecht-typography-line-height-xs: 1;
25
- --utrecht-typography-font-style-inherit: inherit;
26
- --utrecht-typography-font-style-normal: normal;
5
+ :root {
6
+ --utrecht-unordered-list-margin-block-end: 0;
7
+ --utrecht-unordered-list-item-margin-block-start: 0.25rem;
8
+ --utrecht-unordered-list-item-margin-block-end: 0.25rem;
27
9
  --utrecht-typography-weight-scale-normal-font-weight: 400;
28
10
  --utrecht-typography-weight-scale-bold-font-weight: 700;
11
+ --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
12
+ --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
13
+ --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
14
+ --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
29
15
  --utrecht-typography-scale-4xl-font-size: 2rem; /* 32px */
30
16
  --utrecht-typography-scale-3xl-font-size: 1.5rem; /* 24px */
31
17
  --utrecht-typography-scale-2xl-font-size: 1.375rem; /* 22px */
32
- --utrecht-typography-scale-xl-font-size: 1.25rem; /* 20px */
33
- --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
34
- --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
35
- --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
36
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
37
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
38
18
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
39
- --utrecht-icon-scale-4xl: 48px;
40
- --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
41
- --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
42
- --utrecht-icon-scale-xl: 26px; /* Formaat social media iconen */
43
- --utrecht-icon-scale-lg: 24px; /* Voor kalender iconen */
44
- --utrecht-icon-scale-md: 16px; /* Formaat voor radio button */
45
- --utrecht-icon-scale-sm: 12px;
46
- --utrecht-icon-scale-xs: 8px;
47
- --utrecht-icon-scale-2xs: 4px;
48
- --utrecht-icon-scale-3xs: 1px;
49
- --utrecht-color-black: hsl(0 0% 0%);
50
- --utrecht-color-white: hsl(0 0% 100%);
51
- --utrecht-color-invalid: #990000;
52
- --utrecht-color-secondary-grey: #757575; /* Grijs */
53
- --utrecht-color-secondary-brown: #ad643b; /* Bruin */
54
- --utrecht-color-secondary-navy: #1c4181; /* Marineblauw */
55
- --utrecht-color-secondary-blue: #006dff; /* Blauw */
56
- --utrecht-color-secondary-cyan: #009ed4; /* Cyaan */
57
- --utrecht-color-secondary-green: #32ab27; /* Groen */
58
- --utrecht-color-secondary-lime: #99d000; /* Lime */
59
- --utrecht-color-secondary-yellow: #ffcc00; /* Geel */
60
- --utrecht-color-secondary-orange: #ff6e00; /* Oranje */
61
- --utrecht-color-secondary-red: #cc0000; /* Red */
62
- --utrecht-color-secondary-magenta: #f02198; /* Magenta */
63
- --utrecht-color-secondary-purple: #762cd1; /* Paars */
64
- --utrecht-color-green-90: hsl(90 30% 90%); /* Achtergrond licht groen */
65
- --utrecht-color-green-80: hsl(90 30% 80%); /* Licht groen */
66
- --utrecht-color-green-50: hsl(90 30% 50%); /* Standaard groen #80a659 */
67
- --utrecht-color-green-40: hsl(90 30% 38%); /* donker groen */
68
- --utrecht-color-green-30: hsl(90 30% 30%); /* donker groen voor darkmode achtergrond */
69
- --utrecht-color-yellow-80: hsl(48 100% 80%); /* spotlight en uitgelicht */
70
- --utrecht-color-yellow-60: hsl(48 100% 60%); /* selecteer geel */
71
- --utrecht-color-yellow-50: hsl(48 100% 50%); /* basis geel #ffcc00 */
72
- --utrecht-color-yellow-40: hsl(48 100% 40%); /* donker geel */
73
- --utrecht-color-yellow-20: hsl(48 100% 20%); /* donker geel voor darkmode achtergrond */
74
- --utrecht-color-grey-95: hsl(0 0% 95%); /* grijs variant voor achtergrond accordion #f2f2f2 */
75
- --utrecht-color-grey-90: hsl(0 0% 90%); /* grijs variant voor achtergrond templates #e6e6e6 */
76
- --utrecht-color-grey-80: hsl(0 0% 80%); /* grijs variant voor achtergrond content #e5e5e5 */
77
- --utrecht-color-grey-40: hsl(0 0% 40%); /* basis grijs #727272 */
78
- --utrecht-color-grey-30: hsl(0 0% 30%); /* border grijs #888 */
79
- --utrecht-color-grey-20: hsl(0 0% 20%); /* experimenteel / beperkt gebruiken */
80
- --utrecht-color-grey-15: hsl(0 0% 15%); /* experimenteel / achtergrond kleur voor darkmode */
81
- --utrecht-color-grey-10: hsl(0 0% 10%); /* experimenteel / beperkt gebruiken */
82
- --utrecht-color-blue-90: hsl(211 60% 90%); /* ijsblauw variant achtergrond, spotlight en uitgelicht */
83
- --utrecht-color-blue-80: hsl(211 60% 80%); /* licht blauw voor achtergrond */
84
- --utrecht-color-blue-60: hsl(211 60% 60%); /* experimenteel / Drak mode link en button kleur */
85
- --utrecht-color-blue-50: hsl(211 60% 50%); /* experimenteel / beperkt gebruiken */
86
- --utrecht-color-blue-40: hsl(211 60% 40%); /* blauw variant bij hover/focus #3669a5 */
87
- --utrecht-color-blue-35: hsl(211 60% 35%); /* basis link en knoppen CTA donkerblauw */
88
- --utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
89
- --utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
90
- --utrecht-color-red-95: hsl(0 100% 95%); /* Achtergrond rode kleur */
91
- --utrecht-color-red-40: hsl(0 100% 40%); /* basis rood #cc0000 */
92
- --utrecht-color-red-30: hsl(0 100% 30%); /* hover rood */
93
- --utrecht-color-red-20: hsl(0 100% 20%); /* donker rood */
94
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
95
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
96
- --utrecht-unordered-list-margin-block-end: 0;
97
- --utrecht-toptask-link-icon-size: 2.25rem;
98
- --utrecht-toptask-link-hover-transform-scale: 1.02;
19
+ --utrecht-typography-line-height-xs: 1;
20
+ --utrecht-typography-line-height-sm: 1.25;
21
+ --utrecht-typography-line-height-md: 1.5;
22
+ --utrecht-typography-line-height-lg: 2;
23
+ --utrecht-typography-font-style-normal: normal;
24
+ --utrecht-typography-font-style-inherit: inherit;
25
+ --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
99
26
  --utrecht-toptask-link-min-inline-size: 15rem;
100
27
  --utrecht-toptask-link-min-block-size: 8.25rem;
101
28
  --utrecht-toptask-link-line-height: 1.2;
102
- --utrecht-toptask-link-font-size: 1rem;
29
+ --utrecht-toptask-link-icon-size: 2.25rem;
30
+ --utrecht-toptask-link-hover-transform-scale: 1.02;
31
+ --utrecht-topnav-link-focus-text-decoration: none;
32
+ --utrecht-topnav-link-focus-border-type: dotted;
103
33
  --utrecht-textbox-border-bottom-width: 3px;
104
34
  --utrecht-textarea-border-bottom-width: 3px;
105
35
  --utrecht-textarea-border-block-end-width: 3px;
106
- --utrecht-table-cell-icon-size: 1em;
36
+ --utrecht-table-margin-block-end: 0;
37
+ --utrecht-table-header-sticky-border-block-end-width: 2px;
38
+ --utrecht-table-footer-sticky-border-block-start-width: 2px;
107
39
  --utrecht-table-cell-padding-inline-start: 0.4em;
108
40
  --utrecht-table-cell-padding-inline-end: 0.4em;
109
41
  --utrecht-table-cell-padding-block-start: 0.5em;
110
42
  --utrecht-table-cell-padding-block-end: 0.5em;
111
- --utrecht-table-cell-line-height: 24px;
112
- --utrecht-table-footer-sticky-border-block-start-width: 2px;
113
- --utrecht-table-header-sticky-border-block-end-width: 2px;
114
- --utrecht-table-caption-margin-block-end: 1em;
43
+ --utrecht-table-cell-line-height: 1.5rem;
44
+ --utrecht-table-cell-icon-size: 1em;
115
45
  --utrecht-table-caption-text-align: start;
116
- --utrecht-table-caption-font-size: 1.125em;
117
- --utrecht-table-margin-block-end: 0;
46
+ --utrecht-table-caption-margin-block-end: 1em;
47
+ --utrecht-stack-focus-z-index: 1;
48
+ --utrecht-space-text-xs: 0.5ch; /* Extra Small */
49
+ --utrecht-space-text-xl: 1.75ch; /* Extra Large */
50
+ --utrecht-space-text-sm: 0.75ch; /* Small */
51
+ --utrecht-space-text-md: 1ch; /* Medium */
52
+ --utrecht-space-text-lg: 1.5ch; /* Large */
53
+ --utrecht-space-text-3xs: 0.125ch; /* Extra Small 3 */
54
+ --utrecht-space-text-3xl: 3ch; /* Extra Large 3 */
55
+ --utrecht-space-text-2xs: 0.25ch; /* Extra Small 2 */
56
+ --utrecht-space-text-2xl: 2ch; /* Extra Large 2 */
57
+ --utrecht-space-row-xs: 8px; /* Extra Small */
58
+ --utrecht-space-row-xl: 24px; /* Extra Large */
59
+ --utrecht-space-row-sm: 12px; /* Small */
60
+ --utrecht-space-row-md: 16px; /* Medium */
61
+ --utrecht-space-row-lg: 20px; /* Large */
62
+ --utrecht-space-row-5xl: 64px; /* Extra Large 5 */
63
+ --utrecht-space-row-4xs: 1px; /* Extra Small 4 */
64
+ --utrecht-space-row-4xl: 48px; /* Extra Large 4 */
65
+ --utrecht-space-row-3xs: 2px; /* Extra Small 3 */
66
+ --utrecht-space-row-3xl: 32px; /* Extra Large 3 */
67
+ --utrecht-space-row-2xs: 4px; /* Extra Small 2 */
68
+ --utrecht-space-row-2xl: 28px; /* Extra Large 2 */
69
+ --utrecht-space-inline-xs: 8px; /* Extra Small */
70
+ --utrecht-space-inline-xl: 24px; /* Extra Large */
71
+ --utrecht-space-inline-sm: 12px; /* Small */
72
+ --utrecht-space-inline-md: 16px; /* Medium */
73
+ --utrecht-space-inline-lg: 20px; /* Large */
74
+ --utrecht-space-inline-4xl: 48px; /* Extra Large 4 */
75
+ --utrecht-space-inline-3xs: 2px; /* Extra Small 3 */
76
+ --utrecht-space-inline-3xl: 32px; /* Extra Large 3 */
77
+ --utrecht-space-inline-2xs: 4px; /* Extra Small 2 */
78
+ --utrecht-space-inline-2xl: 28px; /* Extra Large 2 */
79
+ --utrecht-space-column-xs: 8px; /* Extra Small */
80
+ --utrecht-space-column-xl: 24px; /* Extra Large */
81
+ --utrecht-space-column-sm: 12px; /* Small */
82
+ --utrecht-space-column-md: 16px; /* Medium */
83
+ --utrecht-space-column-lg: 20px; /* Large */
84
+ --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
85
+ --utrecht-space-column-4xs: 1px; /* Extra Small 4 */
86
+ --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
87
+ --utrecht-space-column-3xs: 2px; /* Extra Small 3 */
88
+ --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
89
+ --utrecht-space-column-2xs: 4px; /* Extra Small 2 */
90
+ --utrecht-space-column-2xl: 28px; /* Extra Large 2 */
91
+ --utrecht-space-block-xs: 8px; /* Extra Small */
92
+ --utrecht-space-block-xl: 24px; /* Extra Large */
93
+ --utrecht-space-block-sm: 12px; /* Small */
94
+ --utrecht-space-block-md: 16px; /* Medium */
95
+ --utrecht-space-block-lg: 20px; /* Large */
96
+ --utrecht-space-block-4xs: 1px;
97
+ --utrecht-space-block-4xl: 64px; /* Extra Large 4 */
98
+ --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
99
+ --utrecht-space-block-3xl: 48px; /* Extra Large 3 */
100
+ --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
101
+ --utrecht-space-block-2xl: 32px; /* Extra Large 2 */
118
102
  --utrecht-separator-block-size: 8px;
119
103
  --utrecht-select-border-block-end-width: 3px;
120
- --utrecht-search-bar-dropdown-max-block-size: 300px;
121
- --utrecht-search-bar-dropdown-border-width: 1px;
122
104
  --utrecht-search-bar-input-background-size: 1em;
123
105
  --utrecht-search-bar-input-background-position-y: 50%;
124
106
  --utrecht-search-bar-input-background-position-x: .5em;
107
+ --utrecht-search-bar-dropdown-max-block-size: 300px;
108
+ --utrecht-search-bar-dropdown-border-width: 1px;
125
109
  --utrecht-search-bar-button-hover-scale: 1;
126
110
  --utrecht-search-bar-button-hover-background-color: hsl(359 65% 58%);
127
111
  --utrecht-rich-text-confidant-margin-block-end: 0;
128
- --utrecht-radio-button-border-radius: 0;
112
+ --utrecht-radio-button-size: 24px;
113
+ --utrecht-radio-button-margin-inline-end: 12px;
129
114
  --utrecht-radio-button-invalid-border-width: 2px;
130
115
  --utrecht-radio-button-icon-size: 42%;
131
- --utrecht-radio-button-margin-inline-end: 12px;
132
- --utrecht-radio-button-size: 24px;
133
116
  --utrecht-radio-button-border-width: 2px;
117
+ --utrecht-radio-button-border-radius: 0;
118
+ --utrecht-pointer-target-min-size: 44px;
134
119
  --utrecht-paragraph-margin-block-end: 0;
135
- --utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
136
- --utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
137
120
  --utrecht-pagination-relative-link-text-transform: uppercase;
138
121
  --utrecht-pagination-relative-link-text-decoration: none;
139
- --utrecht-pagination-relative-link-padding-block-start: 0.5em;
140
- --utrecht-pagination-relative-link-padding-block-end: 0.5em;
141
122
  --utrecht-pagination-relative-link-padding-inline-start: 0.5em;
142
123
  --utrecht-pagination-relative-link-padding-inline-end: 0.5em;
124
+ --utrecht-pagination-relative-link-padding-block-start: 0.5em;
125
+ --utrecht-pagination-relative-link-padding-block-end: 0.5em;
126
+ --utrecht-pagination-relative-link-distanced-margin-inline-start: 0.5em;
127
+ --utrecht-pagination-relative-link-distanced-margin-inline-end: 0.5em;
143
128
  --utrecht-pagination-relative-link-border-width: 2px;
144
- --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
145
129
  --utrecht-pagination-page-link-text-decoration: none;
146
- --utrecht-pagination-page-link-padding-block-start: 0.5em;
147
- --utrecht-pagination-page-link-padding-block-end: 0.5em;
148
130
  --utrecht-pagination-page-link-padding-inline-start: 0.5em;
149
131
  --utrecht-pagination-page-link-padding-inline-end: 0.5em;
132
+ --utrecht-pagination-page-link-padding-block-start: 0.5em;
133
+ --utrecht-pagination-page-link-padding-block-end: 0.5em;
134
+ --utrecht-pagination-page-link-distanced-margin-inline-start: 0.5em;
150
135
  --utrecht-pagination-page-link-border-width: 2px;
151
136
  --utrecht-pagination-page-link-border-color: transparent;
152
137
  --utrecht-pagination-page-link-background-color: transparent;
153
- --utrecht-pagination-margin-block-end: 1em;
154
138
  --utrecht-pagination-margin-block-start: 0;
155
- --utrecht-pagination-font-size: 14px;
139
+ --utrecht-pagination-margin-block-end: 1em;
156
140
  --utrecht-page-padding-inline-start: 2em;
157
- --utrecht-page-padding-block-end: 1em;
158
141
  --utrecht-page-padding-inline-end: 2em;
159
142
  --utrecht-page-padding-block-start: 1.8em;
143
+ --utrecht-page-padding-block-end: 1em;
160
144
  --utrecht-page-max-inline-size: 1184px;
161
- --utrecht-page-margin-inline-end: 2em;
162
145
  --utrecht-page-margin-inline-start: 2em;
163
- --utrecht-page-header-padding-inline-end: 2.4em;
146
+ --utrecht-page-margin-inline-end: 2em;
164
147
  --utrecht-page-header-padding-inline-start: 2em;
165
- --utrecht-page-header-padding-block-end: 1em;
148
+ --utrecht-page-header-padding-inline-end: 2.4em;
166
149
  --utrecht-page-header-padding-block-start: 1.8em;
167
- --utrecht-page-content-padding-block-end: 2em;
150
+ --utrecht-page-header-padding-block-end: 1em;
168
151
  --utrecht-page-content-padding-block-start: 2em;
169
- --utrecht-ordered-list-item-padding-inline-start: 0;
170
- --utrecht-ordered-list-item-margin-block-end: 0.25em;
171
- --utrecht-ordered-list-item-margin-block-start: 0.25em;
152
+ --utrecht-page-content-padding-block-end: 2em;
172
153
  --utrecht-ordered-list-padding-inline-start: 28.8px;
173
- --utrecht-ordered-list-margin-block-end: 1em;
174
154
  --utrecht-ordered-list-margin-block-start: 0;
175
- --utrecht-number-data-negative-color: red;
155
+ --utrecht-ordered-list-margin-block-end: 1em;
156
+ --utrecht-ordered-list-item-padding-inline-start: 0;
157
+ --utrecht-ordered-list-item-margin-block-start: 0.25em;
158
+ --utrecht-ordered-list-item-margin-block-end: 0.25em;
176
159
  --utrecht-number-data-positive-color: green;
160
+ --utrecht-number-data-negative-color: red;
177
161
  --utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
178
162
  --utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
179
- --utrecht-topnav-link-focus-text-decoration: none;
180
- --utrecht-topnav-link-focus-border-type: dotted;
181
- --utrecht-mapcontrolbutton-focus-text-decoration: none;
182
- --utrecht-mapcontrolbutton-margin-inline-end: 0;
183
163
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
164
+ --utrecht-mapcontrolbutton-margin-inline-end: 0;
165
+ --utrecht-mapcontrolbutton-focus-text-decoration: none;
184
166
  --utrecht-mapcontrolbutton-border-radius: 2px;
167
+ --utrecht-map-marker-size: 48px;
185
168
  --utrecht-map-marker-icon-size: 30px;
186
169
  --utrecht-map-marker-box-shadow-color: rgb(0 0 0 / 20%);
187
170
  --utrecht-map-marker-border-width: 3px;
188
- --utrecht-map-marker-size: 48px;
189
171
  --utrecht-logo-min-inline-size: 110.57px;
190
172
  --utrecht-logo-min-block-size: 58.97px;
191
173
  --utrecht-logo-max-inline-size: 192px;
@@ -194,20 +176,30 @@
194
176
  --utrecht-listbox-max-block-size: 300px;
195
177
  --utrecht-listbox-inline-size: 448px;
196
178
  --utrecht-list-social-item-margin-inline-end: 10px;
197
- --utrecht-link-icon-size: 1.2em;
198
- --utrecht-link-hover-text-decoration-thickness: 3px;
199
- --utrecht-link-hover-text-decoration: underline;
200
- --utrecht-link-focus-text-decoration: none;
201
179
  --utrecht-link-text-underline-offset: 3px;
202
180
  --utrecht-link-text-decoration: underline;
203
- --utrecht-link-social-hover-transform-scale: 1.1;
204
- --utrecht-link-social-icon-size: 26px;
205
181
  --utrecht-link-social-size: 40px;
182
+ --utrecht-link-social-icon-size: 26px;
183
+ --utrecht-link-social-hover-transform-scale: 1.1;
206
184
  --utrecht-link-social-border-width: 2px;
207
- --utrecht-link-list-icon-size: 14px;
208
185
  --utrecht-link-list-link-text-decoration: none;
209
- --utrecht-icon-baseline-inset-block-start: 0.125em;
186
+ --utrecht-link-list-icon-size: 14px;
187
+ --utrecht-link-icon-size: 1.2em;
188
+ --utrecht-link-hover-text-decoration-thickness: 3px;
189
+ --utrecht-link-hover-text-decoration: underline;
190
+ --utrecht-link-focus-visible-text-decoration: none;
210
191
  --utrecht-icon-size: 48px;
192
+ --utrecht-icon-scale-xs: 8px;
193
+ --utrecht-icon-scale-xl: 26px; /* Formaat social media iconen */
194
+ --utrecht-icon-scale-sm: 12px;
195
+ --utrecht-icon-scale-md: 16px; /* Formaat voor radio button */
196
+ --utrecht-icon-scale-lg: 24px; /* Voor kalender iconen */
197
+ --utrecht-icon-scale-4xl: 48px;
198
+ --utrecht-icon-scale-3xs: 1px;
199
+ --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
200
+ --utrecht-icon-scale-2xs: 4px;
201
+ --utrecht-icon-scale-2xl: 30px; /* Formaat voor marker iconen */
202
+ --utrecht-icon-baseline-inset-block-start: 0.125em;
211
203
  --utrecht-heading-5-margin-block-start: 1rem;
212
204
  --utrecht-heading-5-margin-block-end: 0.2rem;
213
205
  --utrecht-heading-4-margin-block-start: 1.2rem;
@@ -218,29 +210,26 @@
218
210
  --utrecht-heading-2-margin-block-end: 0.3rem;
219
211
  --utrecht-heading-1-margin-block-start: 0.67rem;
220
212
  --utrecht-heading-1-margin-block-end: 0.67rem;
221
- --utrecht-form-toggle-focus-border-width: 2px;
222
- --utrecht-form-toggle-focus-border-style: dotted;
223
- --utrecht-form-toggle-thumb-disabled-box-shadow: 0;
213
+ --utrecht-form-toggle-width: 48px;
214
+ --utrecht-form-toggle-track-border-radius: 10em;
224
215
  --utrecht-form-toggle-thumb-min-inline-size: 18px;
225
- --utrecht-form-toggle-thumb-margin-inline-end: .25em;
226
216
  --utrecht-form-toggle-thumb-margin-inline-start: .25em;
227
- --utrecht-form-toggle-track-border-radius: 10em;
228
- --utrecht-form-toggle-width: 48px;
229
- --utrecht-form-toggle-padding-block-start: 0;
230
- --utrecht-form-toggle-padding-block-end: 0;
231
- --utrecht-form-toggle-padding-inline-start: 0;
217
+ --utrecht-form-toggle-thumb-margin-inline-end: .25em;
218
+ --utrecht-form-toggle-thumb-disabled-box-shadow: 0;
219
+ --utrecht-form-toggle-padding-inline-start: 0;
232
220
  --utrecht-form-toggle-padding-inline-end: 0;
221
+ --utrecht-form-toggle-padding-block-start: 0;
222
+ --utrecht-form-toggle-padding-block-end: 0;
233
223
  --utrecht-form-toggle-height: 24px;
224
+ --utrecht-form-toggle-focus-border-width: 2px;
225
+ --utrecht-form-toggle-focus-border-style: dotted;
234
226
  --utrecht-form-toggle-border-width: 2px;
235
- --utrecht-form-toggle-border-radius: 10em;
236
227
  --utrecht-form-toggle-border-style: solid;
228
+ --utrecht-form-toggle-border-radius: 10em;
237
229
  --utrecht-form-toggle-border-color: transparent;
238
- --utrecht-form-toggle-accent-color: hsla(0, 0%, 48%, 1);
230
+ --utrecht-form-toggle-accent-color: hsla(0 0% 48% / 100%);
239
231
  --utrecht-form-label-font-size: 1em;
240
- --utrecht-form-fieldset-legend-line-height: 1.4;
241
- --utrecht-form-fieldset-legend-font-size: 1rem;
242
232
  --utrecht-form-field-invalid-border-inline-start-width: 3px;
243
- --utrecht-form-control-block-size: 42px;
244
233
  --utrecht-form-control-read-only-border-color: transparent;
245
234
  --utrecht-form-control-padding-inline-start: 12px;
246
235
  --utrecht-form-control-padding-inline-end: 12px;
@@ -248,289 +237,264 @@
248
237
  --utrecht-form-control-padding-block-end: 8px;
249
238
  --utrecht-form-control-max-inline-size: 28em;
250
239
  --utrecht-form-control-border-radius: 0;
240
+ --utrecht-form-control-block-size: 42px;
251
241
  --utrecht-focus-outline-style: dotted;
252
- --utrecht-figure-caption-line-height: 20px;
253
- --utrecht-figure-caption-font-size: 14px;
254
242
  --utrecht-figure-caption-color: #727272;
255
243
  --utrecht-drawer-max-inline-size: 320px;
256
244
  --utrecht-drawer-max-block-size: 240px;
257
245
  --utrecht-drawer-border-width: 1px;
258
246
  --utrecht-document-line-height: 1.4;
259
- --utrecht-data-list-rows-column-inline-size: 80%;
260
247
  --utrecht-data-list-rows-column-min-inline-size: 25ch;
261
- --utrecht-space-column-5xl: 64px; /* Extra Large 5 */
262
- --utrecht-space-column-4xl: 48px; /* Extra Large 4 */
263
- --utrecht-space-column-3xl: 32px; /* Extra Large 3 */
264
- --utrecht-space-column-2xl: 28px; /* Extra Large 2 */
265
- --utrecht-space-column-xl: 24px; /* Extra Large */
266
- --utrecht-space-column-lg: 20px; /* Large */
267
- --utrecht-space-column-md: 16px; /* Medium */
268
- --utrecht-space-column-sm: 12px; /* Small */
269
- --utrecht-space-column-xs: 8px; /* Extra Small */
270
- --utrecht-space-column-2xs: 4px; /* Extra Small 2 */
271
- --utrecht-space-column-3xs: 2px; /* Extra Small 3 */
272
- --utrecht-space-column-4xs: 1px; /* Extra Small 4 */
273
- --utrecht-space-row-5xl: 64px; /* Extra Large 5 */
274
- --utrecht-space-row-4xl: 48px; /* Extra Large 4 */
275
- --utrecht-space-row-3xl: 32px; /* Extra Large 3 */
276
- --utrecht-space-row-2xl: 28px; /* Extra Large 2 */
277
- --utrecht-space-row-xl: 24px; /* Extra Large */
278
- --utrecht-space-row-lg: 20px; /* Large */
279
- --utrecht-space-row-md: 16px; /* Medium */
280
- --utrecht-space-row-sm: 12px; /* Small */
281
- --utrecht-space-row-xs: 8px; /* Extra Small */
282
- --utrecht-space-row-2xs: 4px; /* Extra Small 2 */
283
- --utrecht-space-row-3xs: 2px; /* Extra Small 3 */
284
- --utrecht-space-row-4xs: 1px; /* Extra Small 4 */
285
- --utrecht-space-text-3xl: 3ch; /* Extra Large 3 */
286
- --utrecht-space-text-2xl: 2ch; /* Extra Large 2 */
287
- --utrecht-space-text-xl: 1.75ch; /* Extra Large */
288
- --utrecht-space-text-lg: 1.5ch; /* Large */
289
- --utrecht-space-text-md: 1ch; /* Medium */
290
- --utrecht-space-text-sm: 0.75ch; /* Small */
291
- --utrecht-space-text-xs: 0.5ch; /* Extra Small */
292
- --utrecht-space-text-2xs: 0.25ch; /* Extra Small 2 */
293
- --utrecht-space-text-3xs: 0.125ch; /* Extra Small 3 */
294
- --utrecht-space-inline-4xl: 48px; /* Extra Large 4 */
295
- --utrecht-space-inline-3xl: 32px; /* Extra Large 3 */
296
- --utrecht-space-inline-2xl: 28px; /* Extra Large 2 */
297
- --utrecht-space-inline-xl: 24px; /* Extra Large */
298
- --utrecht-space-inline-lg: 20px; /* Large */
299
- --utrecht-space-inline-md: 16px; /* Medium */
300
- --utrecht-space-inline-sm: 12px; /* Small */
301
- --utrecht-space-inline-xs: 8px; /* Extra Small */
302
- --utrecht-space-inline-2xs: 4px; /* Extra Small 2 */
303
- --utrecht-space-inline-3xs: 2px; /* Extra Small 3 */
304
- --utrecht-space-block-4xs: 1px;
305
- --utrecht-space-block-4xl: 64px; /* Extra Large 4 */
306
- --utrecht-space-block-3xl: 48px; /* Extra Large 3 */
307
- --utrecht-space-block-2xl: 32px; /* Extra Large 2 */
308
- --utrecht-space-block-xl: 24px; /* Extra Large */
309
- --utrecht-space-block-lg: 20px; /* Large */
310
- --utrecht-space-block-md: 16px; /* Medium */
311
- --utrecht-space-block-sm: 12px; /* Small */
312
- --utrecht-space-block-xs: 8px; /* Extra Small */
313
- --utrecht-space-block-2xs: 4px; /* Extra Small 2 */
314
- --utrecht-space-block-3xs: 2px; /* Extra Small 3 */
315
- --utrecht-pointer-target-min-size: 44px;
316
- --utrecht-action-inert-cursor: default;
317
- --utrecht-action-activate-cursor: pointer;
318
- --utrecht-action-submit-cursor: pointer;
319
- --utrecht-action-navigate-cursor: pointer;
320
- --utrecht-action-disabled-cursor: not-allowed;
321
- --utrecht-action-busy-cursor: wait;
248
+ --utrecht-data-list-rows-column-inline-size: 80%;
322
249
  --utrecht-column-layout-column-width: 350px;
323
250
  --utrecht-column-layout-column-rule-width: 2px;
324
- --utrecht-code-block-padding-inline-end: 20px;
251
+ --utrecht-color-yellow-80: hsl(48 100% 80%); /* spotlight en uitgelicht */
252
+ --utrecht-color-yellow-60: hsl(48 100% 60%); /* selecteer geel */
253
+ --utrecht-color-yellow-50: hsl(48 100% 50%); /* basis geel #ffcc00 */
254
+ --utrecht-color-yellow-40: hsl(48 100% 40%); /* donker geel */
255
+ --utrecht-color-yellow-20: hsl(48 100% 20%); /* donker geel voor darkmode achtergrond */
256
+ --utrecht-color-white: hsl(0 0% 100%);
257
+ --utrecht-color-secondary-yellow: #ffcc00; /* Geel */
258
+ --utrecht-color-secondary-red: #cc0000; /* Red */
259
+ --utrecht-color-secondary-purple: #762cd1; /* Paars */
260
+ --utrecht-color-secondary-orange: #ff6e00; /* Oranje */
261
+ --utrecht-color-secondary-navy: #1c4181; /* Marineblauw */
262
+ --utrecht-color-secondary-magenta: #f02198; /* Magenta */
263
+ --utrecht-color-secondary-lime: #99d000; /* Lime */
264
+ --utrecht-color-secondary-grey: #757575; /* Grijs */
265
+ --utrecht-color-secondary-green: #32ab27; /* Groen */
266
+ --utrecht-color-secondary-cyan: #009ed4; /* Cyaan */
267
+ --utrecht-color-secondary-brown: #ad643b; /* Bruin */
268
+ --utrecht-color-secondary-blue: #006dff; /* Blauw */
269
+ --utrecht-color-red-95: hsl(0 100% 95%); /* Achtergrond rode kleur */
270
+ --utrecht-color-red-40: hsl(0 100% 40%); /* basis rood #cc0000 */
271
+ --utrecht-color-red-30: hsl(0 100% 30%); /* hover rood */
272
+ --utrecht-color-red-20: hsl(0 100% 20%); /* donker rood */
273
+ --utrecht-color-invalid: #990000;
274
+ --utrecht-color-grey-95: hsl(0 0% 95%); /* grijs variant voor achtergrond accordion #f2f2f2 */
275
+ --utrecht-color-grey-90: hsl(0 0% 90%); /* grijs variant voor achtergrond templates #e6e6e6 */
276
+ --utrecht-color-grey-80: hsl(0 0% 80%); /* grijs variant voor achtergrond content #e5e5e5 */
277
+ --utrecht-color-grey-40: hsl(0 0% 40%); /* basis grijs #727272 */
278
+ --utrecht-color-grey-30: hsl(0 0% 30%); /* border grijs #888 */
279
+ --utrecht-color-grey-20: hsl(0 0% 20%); /* experimenteel / beperkt gebruiken */
280
+ --utrecht-color-grey-15: hsl(0 0% 15%); /* experimenteel / achtergrond kleur voor darkmode */
281
+ --utrecht-color-grey-10: hsl(0 0% 10%); /* experimenteel / beperkt gebruiken */
282
+ --utrecht-color-green-90: hsl(90 30% 90%); /* Achtergrond licht groen */
283
+ --utrecht-color-green-80: hsl(90 30% 80%); /* Licht groen */
284
+ --utrecht-color-green-50: hsl(90 30% 50%); /* Standaard groen #80a659 */
285
+ --utrecht-color-green-40: hsl(90 30% 38%); /* donker groen */
286
+ --utrecht-color-green-30: hsl(90 30% 30%); /* donker groen voor darkmode achtergrond */
287
+ --utrecht-color-blue-90: hsl(211 60% 90%); /* ijsblauw variant achtergrond, spotlight en uitgelicht */
288
+ --utrecht-color-blue-80: hsl(211 60% 80%); /* licht blauw voor achtergrond */
289
+ --utrecht-color-blue-60: hsl(211 60% 60%); /* experimenteel / Drak mode link en button kleur */
290
+ --utrecht-color-blue-50: hsl(211 60% 50%); /* experimenteel / beperkt gebruiken */
291
+ --utrecht-color-blue-40: hsl(211 60% 40%); /* blauw variant bij hover/focus #3669a5 */
292
+ --utrecht-color-blue-35: hsl(211 60% 35%); /* basis link en knoppen CTA donkerblauw */
293
+ --utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
294
+ --utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
295
+ --utrecht-color-black: hsl(0 0% 0%);
325
296
  --utrecht-code-block-padding-inline-start: 20px;
326
- --utrecht-code-block-padding-block-end: 20px;
297
+ --utrecht-code-block-padding-inline-end: 20px;
327
298
  --utrecht-code-block-padding-block-start: 20px;
328
- --utrecht-code-block-line-height: 24px;
329
- --utrecht-code-block-font-size: 16px;
299
+ --utrecht-code-block-padding-block-end: 20px;
300
+ --utrecht-checkbox-size: 24px;
330
301
  --utrecht-checkbox-margin-block-start: 0;
331
302
  --utrecht-checkbox-focus-border-width: 2px;
332
- --utrecht-checkbox-size: 24px;
333
303
  --utrecht-checkbox-border-width: 2px;
334
304
  --utrecht-checkbox-border-radius: 0;
335
- --utrecht-calendar-icon-size: 24px;
336
- --utrecht-calendar-navigation-label-min-inline-size: 200px;
337
- --utrecht-calendar-navigation-padding-block-end: 2px;
338
- --utrecht-calendar-navigation-padding-block-start: 2px;
339
- --utrecht-calendar-table-days-item-day-disabled-border-color: transparent;
305
+ --utrecht-calendar-table-weeks-item-width: 44px;
306
+ --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
307
+ --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
308
+ --utrecht-calendar-table-weeks-item-line-height: 1.5rem;
309
+ --utrecht-calendar-table-days-item-day-size: 44px;
340
310
  --utrecht-calendar-table-days-item-day-selected-border-color: transparent;
341
- --utrecht-calendar-table-days-item-day-emphasis-border-color: transparent;
342
- --utrecht-calendar-table-days-item-day-is-today-font-weight: 700;
343
311
  --utrecht-calendar-table-days-item-day-out-of-the-month-border-color: transparent;
344
- --utrecht-calendar-table-days-item-day-active-border-color: transparent;
312
+ --utrecht-calendar-table-days-item-day-is-today-font-weight: 700;
345
313
  --utrecht-calendar-table-days-item-day-focus-border-color: transparent;
346
- --utrecht-calendar-table-days-item-day-border-color: transparent;
314
+ --utrecht-calendar-table-days-item-day-emphasis-border-color: transparent;
315
+ --utrecht-calendar-table-days-item-day-disabled-border-color: transparent;
347
316
  --utrecht-calendar-table-days-item-day-border-width: 2px;
348
- --utrecht-calendar-table-days-item-day-size: 44px;
349
- --utrecht-calendar-table-weeks-item-line-height: 24px;
350
- --utrecht-calendar-table-weeks-item-padding-block-end: 10px;
351
- --utrecht-calendar-table-weeks-item-padding-block-start: 4px;
352
- --utrecht-calendar-table-weeks-item-width: 44px;
353
- --utrecht-button-subtle-disabled-background-color: transparent;
317
+ --utrecht-calendar-table-days-item-day-border-color: transparent;
318
+ --utrecht-calendar-table-days-item-day-active-border-color: transparent;
319
+ --utrecht-calendar-navigation-padding-block-start: 2px;
320
+ --utrecht-calendar-navigation-padding-block-end: 2px;
321
+ --utrecht-calendar-navigation-label-min-inline-size: 200px;
322
+ --utrecht-calendar-icon-size: 24px;
354
323
  --utrecht-button-subtle-font-weight: 700;
324
+ --utrecht-button-subtle-disabled-background-color: transparent;
355
325
  --utrecht-button-subtle-border-color: transparent;
356
326
  --utrecht-button-subtle-background-color: transparent;
357
- --utrecht-button-primary-action-danger-hover-border-color: transparent;
358
- --utrecht-button-primary-action-danger-border-color: transparent;
359
327
  --utrecht-button-primary-action-warning-hover-border-color: transparent;
360
328
  --utrecht-button-primary-action-warning-border-color: transparent;
361
329
  --utrecht-button-primary-action-ready-hover-border-color: transparent;
362
330
  --utrecht-button-primary-action-ready-border-color: transparent;
363
331
  --utrecht-button-primary-action-hover-border-color: transparent;
332
+ --utrecht-button-primary-action-danger-hover-border-color: transparent;
333
+ --utrecht-button-primary-action-danger-border-color: transparent;
364
334
  --utrecht-button-primary-action-border-color: transparent;
335
+ --utrecht-button-margin-inline-start: 0;
336
+ --utrecht-button-margin-inline-end: 0;
365
337
  --utrecht-button-hover-scale: 1.02;
366
338
  --utrecht-button-focus-scale: 1.02;
367
- --utrecht-button-margin-inline-end: 0;
368
- --utrecht-button-margin-inline-start: 0;
369
339
  --utrecht-button-border-width: 1px;
370
340
  --utrecht-button-border-radius: 0;
371
- --utrecht-breadcrumb-nav-divider-inline-size: 1px;
341
+ --utrecht-breadcrumb-nav-min-block-size: 34px;
372
342
  --utrecht-breadcrumb-nav-link-text-decoration: none;
373
343
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
374
344
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
375
- --utrecht-breadcrumb-nav-min-block-size: 34px;
376
- --utrecht-blockquote-margin-block-end: 1.6em;
377
- --utrecht-blockquote-margin-block-start: 1.6em;
378
- --utrecht-blockquote-content-font-size: 1.125rem;
379
- --utrecht-blockquote-attribution-font-size: 0.75rem;
380
- --utrecht-blockquote-margin-inline-end: 1.6em;
345
+ --utrecht-breadcrumb-nav-divider-inline-size: 1px;
346
+ --utrecht-border-width-sm: 1px;
347
+ --utrecht-border-width-md: 2px;
348
+ --utrecht-border-style-solid: solid;
349
+ --utrecht-border-style-dotted: dotted;
350
+ --utrecht-border-radius-sm: 2px;
351
+ --utrecht-border-radius-round: 999px;
352
+ --utrecht-border-radius-none: 0;
353
+ --utrecht-border-radius-md: 4px;
354
+ --utrecht-border-radius-lg: 8px;
381
355
  --utrecht-blockquote-margin-inline-start: 1.6em;
382
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
356
+ --utrecht-blockquote-margin-inline-end: 1.6em;
357
+ --utrecht-blockquote-margin-block-start: 1.6em;
358
+ --utrecht-blockquote-margin-block-end: 1.6em;
383
359
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
384
360
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
361
+ --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
385
362
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
386
- --utrecht-backdrop-fade-in-animation-duration: 0.4s;
387
363
  --utrecht-backdrop-opacity: 0.8;
364
+ --utrecht-backdrop-fade-in-animation-duration: 400ms;
388
365
  --utrecht-article-max-inline-size: 780px;
389
- --utrecht-alert-icon-inset-block-start: 6px;
390
- --utrecht-alert-icon-size: 24px;
391
- --utrecht-alert-ok-background-color: #4D6336;
392
366
  --utrecht-alert-warning-background-color: #665200;
367
+ --utrecht-alert-ok-background-color: #4D6336;
368
+ --utrecht-alert-icon-size: 24px;
369
+ --utrecht-alert-icon-inset-block-start: 6px;
393
370
  --utrecht-alert-dialog-min-inline-size: 320px;
394
371
  --utrecht-alert-dialog-min-block-size: 100px;
395
372
  --utrecht-alert-dialog-max-block-size: 80vh;
373
+ --utrecht-action-submit-cursor: pointer;
374
+ --utrecht-action-navigate-cursor: pointer;
375
+ --utrecht-action-inert-cursor: default;
376
+ --utrecht-action-disabled-cursor: not-allowed;
377
+ --utrecht-action-busy-cursor: wait;
378
+ --utrecht-action-activate-cursor: pointer;
396
379
  --utrecht-accordion-panel-border-width: 2px;
397
380
  --utrecht-accordion-button-icon-size: 24px;
398
381
  --utrecht-accordion-button-hover-background-color: inherit;
399
382
  --utrecht-accordion-button-border-width: 0;
400
- --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
401
- --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
402
- --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
403
- --denhaag-process-steps-step-description-font-size: var(--utrecht-typography-scale-md-font-size);
404
- --denhaag-process-steps-step-description-color: var(--utrecht-color-black);
405
- --denhaag-process-steps-step-metadata-font-size: var(--utrecht-typography-scale-sm-font-size);
406
- --denhaag-process-steps-step-metadata-color: var(--utrecht-color-grey-15);
407
- --denhaag-process-steps-step-line-warning-color: var(--utrecht-color-invalid);
408
- --denhaag-process-steps-step-line-checked-color: var(--utrecht-color-green-30);
409
- --denhaag-process-steps-step-line-color: var(--utrecht-color-green-30);
410
- --denhaag-process-steps-step-line-stroke-width: var(--utrecht-border-width-md);
411
- --denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
412
- --denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
413
- --denhaag-process-steps-step-marker-warning-color: var(--utrecht-color-invalid);
414
- --denhaag-process-steps-step-marker-warning-background-color: var(--utrecht-color-white);
415
- --denhaag-process-steps-step-marker-warning-border-color: var(--utrecht-color-invalid);
416
- --denhaag-process-steps-step-marker-checked-color: var(--utrecht-color-green-30);
417
- --denhaag-process-steps-step-marker-checked-border-width: var(--utrecht-border-width-md);
418
- --denhaag-process-steps-step-marker-checked-background-color: var(--utrecht-color-white);
419
- --denhaag-process-steps-step-marker-checked-border-color: var(--utrecht-color-green-30);
420
- --denhaag-process-steps-step-marker-current-color: var(--utrecht-color-white);
421
- --denhaag-process-steps-step-marker-current-border-width: var(--utrecht-border-width-md);
422
- --denhaag-process-steps-step-marker-current-background-color: var(--utrecht-color-green-30);
423
- --denhaag-process-steps-step-marker-current-border-color: var(--utrecht-color-green-30);
424
- --denhaag-process-steps-step-marker-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
425
- --denhaag-process-steps-step-marker-font-size: var(--utrecht-typography-scale-sm-font-size);
426
- --denhaag-process-steps-step-marker-color: var(--utrecht-color-green-30);
427
- --denhaag-process-steps-step-marker-border-width: var(--utrecht-border-width-md);
428
- --denhaag-process-steps-step-marker-background-color: var(--utrecht-color-white);
429
- --denhaag-process-steps-step-marker-border-color: var(--utrecht-color-green-30);
430
- --denhaag-process-steps-step-heading-warning-color: var(--utrecht-color-black);
431
- --denhaag-process-steps-step-heading-not-checked-color: var(--utrecht-color-black);
432
- --denhaag-process-steps-step-heading-checked-background-color: var(--utrecht-color-white);
433
- --denhaag-process-steps-step-heading-checked-color: var(--utrecht-color-black);
434
- --denhaag-process-steps-step-heading-current-color: var(--utrecht-color-black);
435
- --denhaag-process-steps-step-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
436
- --denhaag-process-steps-step-heading-font-size: var(--utrecht-typography-scale-lg-font-size);
437
- --denhaag-process-steps-step-heading-font-family: var(--utrecht-typography-sans-serif-font-family);
438
- --denhaag-process-steps-step-heading-color: var(--utrecht-color-black);
439
- --denhaag-process-steps-font-family: var(--utrecht-typography-sans-serif-font-family);
440
- --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
441
- --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
442
- --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
383
+ --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
384
+ --denhaag-process-steps-sub-step-marker-size: 12px;
385
+ --denhaag-process-steps-step-marker-size: 28px;
443
386
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
444
387
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
388
+ --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
445
389
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
446
390
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
447
391
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
448
392
  --utrecht-toptask-link-padding-block-end: var(--utrecht-space-block-xl);
449
- --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
450
- --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
451
- --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
452
- --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
453
- --utrecht-table-row-alternate-odd-background-color: var(--utrecht-color-white);
454
- --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
455
- --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
456
- --utrecht-table-cell-selected-color: var(--utrecht-color-black);
457
- --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
458
- --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
459
- --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
460
- --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
461
- --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
393
+ --utrecht-toptask-link-font-size: var(--utrecht-typography-scale-md-font-size);
394
+ --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
395
+ --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
396
+ --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
397
+ --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
398
+ --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
399
+ --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
400
+ --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
401
+ --utrecht-topnav-link-color: var(--utrecht-color-white);
402
+ --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
403
+ --utrecht-textarea-line-height: var(--utrecht-typography-line-height-md);
404
+ --utrecht-table-row-border-block-end-width: var(--utrecht-border-width-sm);
405
+ --utrecht-table-row-border-block-end-color: var(--utrecht-color-grey-90);
406
+ --utrecht-table-row-alternate-odd-color: var(--utrecht-color-black);
407
+ --utrecht-table-row-alternate-odd-background-color: var(--utrecht-color-white);
408
+ --utrecht-table-row-alternate-even-color: var(--utrecht-color-black);
409
+ --utrecht-table-row-alternate-even-background-color: var(--utrecht-color-grey-95);
410
+ --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
462
411
  --utrecht-table-header-sticky-color: var(--utrecht-color-black);
412
+ --utrecht-table-header-sticky-border-block-end-color: var(--utrecht-color-red-40);
463
413
  --utrecht-table-header-sticky-background-color: var(--utrecht-color-white);
414
+ --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
464
415
  --utrecht-table-header-border-block-end-width: var(--utrecht-border-width-md);
465
416
  --utrecht-table-header-border-block-end-color: var(--utrecht-color-red-40);
466
- --utrecht-table-header-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
417
+ --utrecht-table-footer-sticky-color: var(--utrecht-color-black);
418
+ --utrecht-table-footer-sticky-border-block-start-color: var(--utrecht-color-red-40);
419
+ --utrecht-table-footer-sticky-background-color: var(--utrecht-color-white);
420
+ --utrecht-table-cell-selected-color: var(--utrecht-color-black);
421
+ --utrecht-table-cell-selected-background-color: var(--utrecht-color-blue-90);
467
422
  --utrecht-table-caption-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
468
- --utrecht-table-margin-block-start: var(--utrecht-space-block-md);
423
+ --utrecht-table-caption-font-size: var(--utrecht-typography-scale-lg-font-size);
469
424
  --utrecht-surface-color: var(--utrecht-color-grey-95);
470
425
  --utrecht-surface-background-color: var(--utrecht-color-grey-15);
471
- --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
472
- --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
473
426
  --utrecht-spotlight-section-warning-color: var(--utrecht-color-grey-15);
474
427
  --utrecht-spotlight-section-warning-background-color: var(--utrecht-color-yellow-20);
475
- --utrecht-spotlight-section-info-color: var(--utrecht-color-grey-15);
476
- --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-35);
477
- --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
478
428
  --utrecht-spotlight-section-padding-inline-start: var(--utrecht-space-inline-md);
479
- --utrecht-spotlight-section-padding-block-end: var(--utrecht-space-block-sm);
429
+ --utrecht-spotlight-section-padding-inline-end: var(--utrecht-space-inline-md);
480
430
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
431
+ --utrecht-spotlight-section-padding-block-end: var(--utrecht-space-block-sm);
432
+ --utrecht-spotlight-section-ok-background-color: var(--utrecht-color-green-90);
433
+ --utrecht-spotlight-section-info-color: var(--utrecht-color-grey-15);
434
+ --utrecht-spotlight-section-info-background-color: var(--utrecht-color-blue-35);
435
+ --utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
481
436
  --utrecht-spotlight-section-color: var(--utrecht-color-grey-15);
482
437
  --utrecht-spotlight-section-background-color: var(--utrecht-color-grey-20);
483
- --utrecht-skip-link-focus-text-decoration: var(--utrecht-link-focus-text-decoration);
484
438
  --utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
439
+ --utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
440
+ --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
441
+ --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
442
+ --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
443
+ --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
444
+ --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
445
+ --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
446
+ --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
447
+ --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
448
+ --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
485
449
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
486
450
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
487
451
  --utrecht-separator-color: var(--utrecht-color-grey-90);
488
- --utrecht-search-bar-list-item-is-selected-background-color: var(--utrecht-color-grey-95);
489
- --utrecht-search-bar-list-item-is-selected-color: var(--utrecht-color-black);
490
- --utrecht-search-bar-list-item-is-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
491
- --utrecht-search-bar-list-item-is-active-background-color: var(--utrecht-color-grey-95);
492
- --utrecht-search-bar-list-item-is-active-color: var(--utrecht-color-black);
493
452
  --utrecht-search-bar-section-title-margin-inline-start: var(--utrecht-space-inline-xs);
494
- --utrecht-search-bar-section-title-color: var(--utrecht-color-black);
495
453
  --utrecht-search-bar-section-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
496
454
  --utrecht-search-bar-section-title-font-size: var(--utrecht-typography-scale-md-font-size);
455
+ --utrecht-search-bar-section-title-color: var(--utrecht-color-black);
497
456
  --utrecht-search-bar-section-margin-block-end: var(--utrecht-space-inline-xs);
498
- --utrecht-search-bar-dropdown-padding-block-end: var(--utrecht-space-block-xs);
499
- --utrecht-search-bar-dropdown-padding-block-start: var(--utrecht-space-block-xs);
500
- --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
457
+ --utrecht-search-bar-list-item-is-selected-color: var(--utrecht-color-black);
458
+ --utrecht-search-bar-list-item-is-selected-background-color: var(--utrecht-color-grey-95);
459
+ --utrecht-search-bar-list-item-is-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
460
+ --utrecht-search-bar-list-item-is-active-color: var(--utrecht-color-black);
461
+ --utrecht-search-bar-list-item-is-active-background-color: var(--utrecht-color-grey-95);
501
462
  --utrecht-search-bar-input-padding-inline-start: var(--utrecht-space-inline-3xl);
502
463
  --utrecht-search-bar-input-border-color: var(--utrecht-color-red-40);
464
+ --utrecht-search-bar-dropdown-padding-block-start: var(--utrecht-space-block-xs);
465
+ --utrecht-search-bar-dropdown-padding-block-end: var(--utrecht-space-block-xs);
466
+ --utrecht-search-bar-dropdown-border-color: var(--utrecht-color-red-40);
503
467
  --utrecht-search-bar-button-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
504
468
  --utrecht-search-bar-button-font-size: var(--utrecht-typography-scale-sm-font-size);
505
469
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
506
470
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
507
471
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
508
- --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
472
+ --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
509
473
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
474
+ --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
510
475
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
511
- --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
512
- --utrecht-radio-button-color: var(--utrecht-color-white);
476
+ --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
477
+ --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
513
478
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
514
479
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
515
480
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
516
- --utrecht-radio-button-focus-border-color: var(--utrecht-color-blue-40);
517
- --utrecht-radio-button-hover-background-color: var(--utrecht-color-blue-90);
518
- --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
481
+ --utrecht-radio-button-color: var(--utrecht-color-white);
519
482
  --utrecht-radio-button-checked-hover-color: var(--utrecht-color-blue-90);
520
483
  --utrecht-radio-button-checked-hover-background-color: var(--utrecht-color-blue-40);
521
- --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
522
- --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
484
+ --utrecht-radio-button-checked-focus-border-color: var(--utrecht-color-blue-20);
523
485
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
524
486
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
487
+ --utrecht-radio-button-checked-active-color: var(--utrecht-color-blue-80);
488
+ --utrecht-radio-button-checked-active-background-color: var(--utrecht-color-blue-40);
525
489
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
526
490
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
527
491
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
528
492
  --utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
493
+ --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
494
+ --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
529
495
  --utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
530
496
  --utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
531
497
  --utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
532
- --utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
533
- --utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
534
498
  --utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
535
499
  --utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
536
500
  --utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
@@ -544,41 +508,24 @@
544
508
  --utrecht-pagination-page-link-hover-color: var(--utrecht-color-white);
545
509
  --utrecht-pagination-page-link-hover-border-color: var(--utrecht-color-blue-35);
546
510
  --utrecht-pagination-page-link-hover-background-color: var(--utrecht-color-blue-35);
511
+ --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
547
512
  --utrecht-pagination-page-link-current-color: var(--utrecht-color-white);
548
513
  --utrecht-pagination-page-link-current-border-color: var(--utrecht-color-blue-35);
549
514
  --utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
550
- --utrecht-pagination-page-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
551
515
  --utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
552
- --utrecht-page-color: var(--utrecht-color-grey-95);
553
- --utrecht-page-background-color: var(--utrecht-color-grey-15);
554
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
555
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
516
+ --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
556
517
  --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
557
518
  --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
519
+ --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
520
+ --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
521
+ --utrecht-page-footer-color: var(--utrecht-color-white);
558
522
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
559
523
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
560
- --utrecht-page-footer-color: var(--utrecht-color-white);
524
+ --utrecht-page-color: var(--utrecht-color-grey-95);
525
+ --utrecht-page-background-color: var(--utrecht-color-grey-15);
561
526
  --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
562
527
  --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
563
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
564
- --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
565
- --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
566
- --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
567
- --utrecht-topnav-link-focus-box-shadow-color: var(--utrecht-color-yellow-80);
568
- --utrecht-topnav-link-focus-color: var(--utrecht-color-black);
569
- --utrecht-topnav-link-background-color: var(--utrecht-color-blue-40);
570
- --utrecht-topnav-link-color: var(--utrecht-color-white);
571
- --utrecht-topnav-list-border-color: var(--utrecht-color-grey-40);
572
- --utrecht-topnav-list-background-color: var(--utrecht-color-grey-15);
573
- --utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
574
- --utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
575
- --utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
576
- --utrecht-sidenav-item-marker-color: var(--utrecht-color-grey-80);
577
- --utrecht-sidenav-item-hover-color: var(--utrecht-color-blue-40);
578
- --utrecht-sidenav-item-margin-inline-end: var(--utrecht-space-inline-3xs);
579
- --utrecht-sidenav-item-margin-inline-start: var(--utrecht-space-inline-3xs);
580
- --utrecht-sidenav-item-margin-block-end: var(--utrecht-space-block-xs);
581
- --utrecht-sidenav-item-margin-block-start: var(--utrecht-space-block-xs);
528
+ --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
582
529
  --utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
583
530
  --utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
584
531
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
@@ -586,63 +533,65 @@
586
533
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
587
534
  --utrecht-nav-bar-color: var(--utrecht-color-black);
588
535
  --utrecht-nav-bar-background-color: var(--utrecht-color-white);
536
+ --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
537
+ --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
589
538
  --utrecht-mark-color: var(--utrecht-color-black);
590
539
  --utrecht-mark-background-color: var(--utrecht-color-yellow-60);
591
- --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
540
+ --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
541
+ --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
542
+ --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
543
+ --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
544
+ --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
545
+ --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
546
+ --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
547
+ --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
592
548
  --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
549
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
593
550
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
594
551
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
595
552
  --utrecht-mapcontrolbutton-focus-color: var(--utrecht-color-black);
596
553
  --utrecht-mapcontrolbutton-disabled-color: var(--utrecht-color-grey-80);
597
554
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
598
555
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
599
- --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
600
- --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
601
- --utrecht-mapcontrolbutton-padding-block-end: var(--utrecht-space-block-2xs);
602
- --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
603
- --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
604
- --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
605
- --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
606
- --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
607
556
  --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
608
557
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
609
558
  --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
610
559
  --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
611
560
  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
612
- --utrecht-map-marker-border-color: var(--utrecht-color-white);
613
561
  --utrecht-map-marker-color: var(--utrecht-color-white);
562
+ --utrecht-map-marker-border-color: var(--utrecht-color-white);
614
563
  --utrecht-map-marker-background-color: var(--utrecht-color-blue-30);
564
+ --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
565
+ --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
566
+ --utrecht-listbox-option-padding-inline-start: var(--utrecht-space-inline-xs);
567
+ --utrecht-listbox-option-padding-inline-end: var(--utrecht-space-inline-xs);
568
+ --utrecht-listbox-option-padding-block-start: var(--utrecht-space-block-xs);
569
+ --utrecht-listbox-option-padding-block-end: var(--utrecht-space-block-xs);
570
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
571
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
615
572
  --utrecht-listbox-option-group-title-margin-inline-start: var(--utrecht-space-inline-xs);
616
- --utrecht-listbox-option-group-title-color: var(--utrecht-color-black);
617
573
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
618
574
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
575
+ --utrecht-listbox-option-group-title-color: var(--utrecht-color-black);
619
576
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
620
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
621
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
622
- --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
623
- --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
624
577
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
625
578
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
626
579
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
627
- --utrecht-listbox-option-padding-inline-start: var(--utrecht-space-inline-xs);
628
- --utrecht-listbox-option-padding-inline-end: var(--utrecht-space-inline-xs);
629
- --utrecht-listbox-option-padding-block-start: var(--utrecht-space-block-xs);
630
- --utrecht-listbox-option-padding-block-end: var(--utrecht-space-block-xs);
631
580
  --utrecht-listbox-background-color: var(--utrecht-color-white);
632
- --utrecht-link-placeholder-color: var(--utrecht-color-grey-80);
633
- --utrecht-link-focus-color: var(--utrecht-color-blue-80);
634
- --utrecht-link-color: var(--utrecht-color-blue-60);
635
581
  --utrecht-link-social-margin-inline-start: var(--utrecht-space-inline-sm);
636
582
  --utrecht-link-social-color: var(--utrecht-color-white);
637
583
  --utrecht-link-social-border-color: var(--utrecht-color-white);
638
584
  --utrecht-link-social-background-color: var(--utrecht-color-red-40);
585
+ --utrecht-link-placeholder-color: var(--utrecht-color-grey-80);
586
+ --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
639
587
  --utrecht-link-list-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
640
588
  --utrecht-link-list-link-column-gap: var(--utrecht-space-block-xs);
641
- --utrecht-link-list-row-gap: var(--utrecht-space-block-xs);
589
+ --utrecht-link-focus-color: var(--utrecht-color-blue-80);
590
+ --utrecht-link-color: var(--utrecht-color-blue-60);
591
+ --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
592
+ --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
642
593
  --utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
643
594
  --utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
644
- --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
645
- --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
646
595
  --utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
647
596
  --utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
648
597
  --utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
@@ -668,47 +617,66 @@
668
617
  --utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
669
618
  --utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
670
619
  --utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
671
- --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
672
- --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
620
+ --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
673
621
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
674
622
  --utrecht-form-toggle-thumb-background-color: var(--utrecht-color-white);
675
- --utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
623
+ --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
676
624
  --utrecht-form-toggle-color: var(--utrecht-color-black);
625
+ --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
677
626
  --utrecht-form-toggle-background-color: var(--utrecht-color-white);
678
627
  --utrecht-form-label-radio-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
679
- --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
680
628
  --utrecht-form-label-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
681
- --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
682
- --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
683
- --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
684
- --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
629
+ --utrecht-form-label-checkbox-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
685
630
  --utrecht-form-fieldset-section-color: var(--utrecht-color-black);
686
631
  --utrecht-form-fieldset-section-background-color: var(--utrecht-color-grey-80);
687
632
  --utrecht-form-fieldset-margin-block-start: var(--utrecht-space-block-2xs);
688
633
  --utrecht-form-fieldset-margin-block-end: var(--utrecht-space-block-2xs);
689
- --utrecht-form-field-description-margin-block-end: var(--utrecht-space-block-sm);
690
- --utrecht-form-field-description-margin-block-start: var(--utrecht-space-block-sm);
634
+ --utrecht-form-fieldset-legend-margin-block-start: var(--utrecht-space-block-xl);
635
+ --utrecht-form-fieldset-legend-margin-block-end: var(--utrecht-space-block-sm);
636
+ --utrecht-form-fieldset-legend-line-height: var(--utrecht-typography-line-height-md);
637
+ --utrecht-form-fieldset-legend-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
638
+ --utrecht-form-fieldset-legend-font-size: var(--utrecht-typography-scale-md-font-size);
639
+ --utrecht-form-fieldset-legend-disabled-color: var(--utrecht-color-grey-40);
640
+ --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
641
+ --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
691
642
  --utrecht-form-field-label-margin-block-end: var(--utrecht-space-block-sm);
692
643
  --utrecht-form-field-invalid-padding-inline-start: var(--utrecht-space-block-sm);
693
- --utrecht-form-field-margin-block-end: var(--utrecht-space-block-2xs);
694
- --utrecht-form-field-margin-block-start: var(--utrecht-space-block-2xs);
644
+ --utrecht-form-field-description-margin-block-start: var(--utrecht-space-block-sm);
645
+ --utrecht-form-field-description-margin-block-end: var(--utrecht-space-block-sm);
695
646
  --utrecht-form-control-read-only-color: var(--utrecht-color-grey-20);
696
647
  --utrecht-form-control-read-only-background-color: var(--utrecht-color-grey-30);
697
- --utrecht-form-control-focus-border-color: var(--utrecht-color-grey-80);
698
648
  --utrecht-form-control-placeholder-font-style: var(--utrecht-typography-font-style-normal);
699
649
  --utrecht-form-control-placeholder-color: var(--utrecht-color-grey-80);
700
650
  --utrecht-form-control-font-size: var(--utrecht-typography-scale-md-font-size);
651
+ --utrecht-form-control-focus-border-color: var(--utrecht-color-grey-80);
701
652
  --utrecht-form-control-color: var(--utrecht-color-grey-95);
702
653
  --utrecht-form-control-border-width: var(--utrecht-border-width-sm);
703
654
  --utrecht-form-control-border-color: var(--utrecht-color-grey-95);
704
655
  --utrecht-form-control-background-color: var(--utrecht-color-grey-20);
705
- --utrecht-focus-inverse-outline-color: var(--utrecht-color-white);
706
656
  --utrecht-focus-outline-width: var(--utrecht-border-width-md);
707
657
  --utrecht-focus-outline-color: var(--utrecht-color-black);
658
+ --utrecht-focus-inverse-outline-color: var(--utrecht-color-white);
708
659
  --utrecht-focus-background-color: var(--utrecht-color-yellow-60);
660
+ --utrecht-figure-caption-line-height: var(--utrecht-typography-line-height-md);
661
+ --utrecht-figure-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
662
+ --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
663
+ --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
664
+ --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
665
+ --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
666
+ --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
667
+ --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
668
+ --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
669
+ --utrecht-feedback-invalid-color: var(--utrecht-color-invalid);
670
+ --utrecht-feedback-invalid-border-color: var(--utrecht-color-invalid);
671
+ --utrecht-feedback-invalid-background-color: var(--utrecht-color-invalid);
672
+ --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
673
+ --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
674
+ --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
675
+ --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
676
+ --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
709
677
  --utrecht-emphasis-strong-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
710
- --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
711
678
  --utrecht-drawer-padding-inline-start: var(--utrecht-space-inline-md);
679
+ --utrecht-drawer-padding-inline-end: var(--utrecht-space-inline-md);
712
680
  --utrecht-drawer-padding-block-start: var(--utrecht-space-block-md);
713
681
  --utrecht-drawer-padding-block-end: var(--utrecht-space-block-md);
714
682
  --utrecht-drawer-border-color: var(--utrecht-color-grey-90);
@@ -719,235 +687,259 @@
719
687
  --utrecht-data-placeholder-background-color: var(--utrecht-color-grey-40);
720
688
  --utrecht-data-list-rows-item-value-margin-block-start: var(--utrecht-space-block-xs);
721
689
  --utrecht-data-list-rows-item-margin-block-start: var(--utrecht-space-block-md);
722
- --utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
723
690
  --utrecht-data-list-margin-block-start: var(--utrecht-space-block-md);
724
691
  --utrecht-data-list-margin-block-end: var(--utrecht-space-block-md);
725
- --utrecht-feedback-active-fill-color: var(--utrecht-color-white);
726
- --utrecht-feedback-inactive-fill-color: var(--utrecht-color-white);
727
- --utrecht-feedback-success-fill-color: var(--utrecht-color-white);
728
- --utrecht-feedback-error-fill-color: var(--utrecht-color-white);
729
- --utrecht-feedback-valid-fill-color: var(--utrecht-color-white);
730
- --utrecht-feedback-invalid-fill-color: var(--utrecht-color-white);
731
- --utrecht-feedback-invalid-color: var(--utrecht-color-invalid);
732
- --utrecht-feedback-invalid-border-color: var(--utrecht-color-invalid);
733
- --utrecht-feedback-invalid-background-color: var(--utrecht-color-invalid);
734
- --utrecht-feedback-safe-fill-color: var(--utrecht-color-white);
735
- --utrecht-feedback-safe-color: var(--utrecht-color-green-50);
736
- --utrecht-feedback-warning-fill-color: var(--utrecht-color-black);
737
- --utrecht-feedback-warning-color: var(--utrecht-color-yellow-50);
738
- --utrecht-feedback-danger-fill-color: var(--utrecht-color-white);
739
- --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
692
+ --utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
740
693
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
741
694
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
742
- --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
743
695
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
696
+ --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
697
+ --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
698
+ --utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
744
699
  --utrecht-code-block-color: var(--utrecht-color-black);
745
700
  --utrecht-code-block-background-color: var(--utrecht-color-grey-95);
746
701
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
747
- --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
748
- --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
749
- --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
750
702
  --utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
751
- --utrecht-calendar-navigation-label-font-size: var(--utrecht-typography-scale-lg-font-size);
752
- --utrecht-calendar-navigation-label-color: var(--utrecht-color-black);
753
- --utrecht-calendar-navigation-color: var(--utrecht-color-blue-30);
754
- --utrecht-calendar-table-days-item-day-disabled-color: var(--utrecht-color-grey-40);
703
+ --utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
704
+ --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
705
+ --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
755
706
  --utrecht-calendar-table-days-item-day-selected-color: var(--utrecht-color-white);
756
707
  --utrecht-calendar-table-days-item-day-selected-background-color: var(--utrecht-color-blue-30);
757
- --utrecht-calendar-table-days-item-day-is-today-border-color: var(--utrecht-color-blue-35);
708
+ --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);
758
709
  --utrecht-calendar-table-days-item-day-is-today-color: var(--utrecht-color-blue-30);
710
+ --utrecht-calendar-table-days-item-day-is-today-border-color: var(--utrecht-color-blue-35);
759
711
  --utrecht-calendar-table-days-item-day-is-today-background-color: var(--utrecht-color-blue-90);
760
- --utrecht-calendar-table-days-item-day-out-of-the-month-color: var(--utrecht-color-grey-80);
761
- --utrecht-calendar-table-days-item-day-hover-border-color: var(--utrecht-color-black);
762
712
  --utrecht-calendar-table-days-item-day-hover-color: var(--utrecht-color-blue-40);
713
+ --utrecht-calendar-table-days-item-day-hover-border-color: var(--utrecht-color-black);
714
+ --utrecht-calendar-table-days-item-day-disabled-color: var(--utrecht-color-grey-40);
763
715
  --utrecht-calendar-table-days-item-day-color: var(--utrecht-color-black);
764
- --utrecht-button-subtle-ready-focus-color: var(--utrecht-color-green-40);
716
+ --utrecht-calendar-navigation-label-font-size: var(--utrecht-typography-scale-lg-font-size);
717
+ --utrecht-calendar-navigation-label-color: var(--utrecht-color-black);
718
+ --utrecht-calendar-navigation-color: var(--utrecht-color-blue-30);
765
719
  --utrecht-button-subtle-ready-hover-color: var(--utrecht-color-green-40);
720
+ --utrecht-button-subtle-ready-focus-color: var(--utrecht-color-green-40);
766
721
  --utrecht-button-subtle-ready-color: var(--utrecht-color-green-50);
767
- --utrecht-button-subtle-danger-focus-color: var(--utrecht-color-red-40);
768
- --utrecht-button-subtle-danger-hover-color: var(--utrecht-color-red-30);
769
- --utrecht-button-subtle-danger-color: var(--utrecht-color-red-30);
770
- --utrecht-button-subtle-focus-color: var(--utrecht-color-blue-35);
771
- --utrecht-button-subtle-focus-border-color: var(--utrecht-color-blue-35);
772
- --utrecht-button-subtle-focus-background-color: var(--utrecht-color-white);
773
722
  --utrecht-button-subtle-hover-color: var(--utrecht-color-blue-35);
774
723
  --utrecht-button-subtle-hover-border-color: var(--utrecht-color-blue-40);
775
724
  --utrecht-button-subtle-hover-background-color: var(--utrecht-color-white);
776
- --utrecht-button-subtle-disabled-color: var(--utrecht-color-grey-40);
777
- --utrecht-button-subtle-active-color: var(--utrecht-color-white);
778
- --utrecht-button-subtle-active-background-color: var(--utrecht-color-blue-35);
725
+ --utrecht-button-subtle-focus-color: var(--utrecht-color-blue-35);
726
+ --utrecht-button-subtle-focus-border-color: var(--utrecht-color-blue-35);
727
+ --utrecht-button-subtle-focus-background-color: var(--utrecht-color-white);
728
+ --utrecht-button-subtle-disabled-color: var(--utrecht-color-grey-40);
729
+ --utrecht-button-subtle-danger-hover-color: var(--utrecht-color-red-30);
730
+ --utrecht-button-subtle-danger-focus-color: var(--utrecht-color-red-40);
731
+ --utrecht-button-subtle-danger-color: var(--utrecht-color-red-30);
779
732
  --utrecht-button-subtle-color: var(--utrecht-color-blue-60);
780
733
  --utrecht-button-subtle-border-width: var(--utrecht-border-width-md);
781
- --utrecht-button-secondary-action-ready-focus-border-color: var(--utrecht-color-green-40);
782
- --utrecht-button-secondary-action-ready-hover-color: var(--utrecht-color-green-40);
783
- --utrecht-button-secondary-action-ready-hover-border-color: var(--utrecht-color-green-40);
784
- --utrecht-button-secondary-action-ready-color: var(--utrecht-color-grey-30);
785
- --utrecht-button-secondary-action-ready-border-color: var(--utrecht-color-green-30);
786
- --utrecht-button-secondary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
734
+ --utrecht-button-subtle-active-color: var(--utrecht-color-white);
735
+ --utrecht-button-subtle-active-background-color: var(--utrecht-color-blue-35);
787
736
  --utrecht-button-secondary-action-warning-hover-color: var(--utrecht-color-yellow-40);
788
737
  --utrecht-button-secondary-action-warning-hover-border-color: var(--utrecht-color-yellow-40);
738
+ --utrecht-button-secondary-action-warning-focus-border-color: var(--utrecht-color-yellow-40);
789
739
  --utrecht-button-secondary-action-warning-color: var(--utrecht-color-grey-20);
790
740
  --utrecht-button-secondary-action-warning-border-color: var(--utrecht-color-yellow-20);
791
- --utrecht-button-secondary-action-danger-focus-border-color: var(--utrecht-color-red-30);
792
- --utrecht-button-secondary-action-danger-hover-color: var(--utrecht-color-red-20);
793
- --utrecht-button-secondary-action-danger-hover-border-color: var(--utrecht-color-red-20);
794
- --utrecht-button-secondary-action-danger-color: var(--utrecht-color-red-30);
795
- --utrecht-button-secondary-action-danger-border-color: var(--utrecht-color-red-30);
741
+ --utrecht-button-secondary-action-ready-hover-color: var(--utrecht-color-green-40);
742
+ --utrecht-button-secondary-action-ready-hover-border-color: var(--utrecht-color-green-40);
743
+ --utrecht-button-secondary-action-ready-focus-border-color: var(--utrecht-color-green-40);
744
+ --utrecht-button-secondary-action-ready-color: var(--utrecht-color-grey-30);
745
+ --utrecht-button-secondary-action-ready-border-color: var(--utrecht-color-green-30);
796
746
  --utrecht-button-secondary-action-hover-color: var(--utrecht-color-blue-60);
797
747
  --utrecht-button-secondary-action-hover-border-color: var(--utrecht-color-blue-60);
798
748
  --utrecht-button-secondary-action-disabled-color: var(--utrecht-color-grey-40);
799
749
  --utrecht-button-secondary-action-disabled-border-color: var(--utrecht-color-grey-40);
800
- --utrecht-button-secondary-action-active-color: var(--utrecht-color-blue-30);
801
- --utrecht-button-secondary-action-active-border-color: var(--utrecht-color-blue-30);
802
- --utrecht-button-secondary-action-active-background-color: var(--utrecht-color-white);
750
+ --utrecht-button-secondary-action-danger-hover-color: var(--utrecht-color-red-20);
751
+ --utrecht-button-secondary-action-danger-hover-border-color: var(--utrecht-color-red-20);
752
+ --utrecht-button-secondary-action-danger-focus-border-color: var(--utrecht-color-red-30);
753
+ --utrecht-button-secondary-action-danger-color: var(--utrecht-color-red-30);
754
+ --utrecht-button-secondary-action-danger-border-color: var(--utrecht-color-red-30);
803
755
  --utrecht-button-secondary-action-color: var(--utrecht-color-blue-80);
804
756
  --utrecht-button-secondary-action-border-width: var(--utrecht-border-width-md);
805
757
  --utrecht-button-secondary-action-border-color: var(--utrecht-color-blue-80);
806
- --utrecht-button-primary-action-danger-focus-border-color: var(--utrecht-color-red-30);
807
- --utrecht-button-primary-action-danger-focus-background-color: var(--utrecht-color-red-30);
808
- --utrecht-button-primary-action-danger-hover-color: var(--utrecht-color-grey-15);
809
- --utrecht-button-primary-action-danger-hover-background-color: var(--utrecht-color-red-20);
810
- --utrecht-button-primary-action-danger-disabled-border-color: var(--utrecht-color-grey-90);
811
- --utrecht-button-primary-action-danger-color: var(--utrecht-color-grey-15);
812
- --utrecht-button-primary-action-danger-background-color: var(--utrecht-color-red-30);
813
- --utrecht-button-primary-action-warning-focus-border-color: var(--utrecht-color-grey-15);
814
- --utrecht-button-primary-action-warning-focus-background-color: var(--utrecht-color-yellow-40);
758
+ --utrecht-button-secondary-action-active-color: var(--utrecht-color-blue-30);
759
+ --utrecht-button-secondary-action-active-border-color: var(--utrecht-color-blue-30);
760
+ --utrecht-button-secondary-action-active-background-color: var(--utrecht-color-white);
815
761
  --utrecht-button-primary-action-warning-hover-color: var(--utrecht-color-black);
816
762
  --utrecht-button-primary-action-warning-hover-background-color: var(--utrecht-color-yellow-40);
763
+ --utrecht-button-primary-action-warning-focus-border-color: var(--utrecht-color-grey-15);
764
+ --utrecht-button-primary-action-warning-focus-background-color: var(--utrecht-color-yellow-40);
817
765
  --utrecht-button-primary-action-warning-disabled-border-color: var(--utrecht-color-grey-95);
818
766
  --utrecht-button-primary-action-warning-color: var(--utrecht-color-black);
819
767
  --utrecht-button-primary-action-warning-background-color: var(--utrecht-color-yellow-20);
820
- --utrecht-button-primary-action-ready-focus-border-color: var(--utrecht-color-grey-95);
821
- --utrecht-button-primary-action-ready-focus-background-color: var(--utrecht-color-green-50);
822
768
  --utrecht-button-primary-action-ready-hover-color: var(--utrecht-color-grey-80);
823
769
  --utrecht-button-primary-action-ready-hover-background-color: var(--utrecht-color-green-30);
770
+ --utrecht-button-primary-action-ready-focus-border-color: var(--utrecht-color-grey-95);
771
+ --utrecht-button-primary-action-ready-focus-background-color: var(--utrecht-color-green-50);
824
772
  --utrecht-button-primary-action-ready-disabled-border-color: var(--utrecht-color-grey-40);
825
773
  --utrecht-button-primary-action-ready-color: var(--utrecht-color-grey-95);
826
774
  --utrecht-button-primary-action-ready-background-color: var(--utrecht-color-green-40);
775
+ --utrecht-button-primary-action-hover-color: var(--utrecht-color-grey-15);
776
+ --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-60);
827
777
  --utrecht-button-primary-action-focus-border-width: var(--utrecht-border-width-md);
828
778
  --utrecht-button-primary-action-focus-border-color: var(--utrecht-color-grey-15);
829
779
  --utrecht-button-primary-action-focus-background-color: var(--utrecht-color-blue-90);
830
- --utrecht-button-primary-action-hover-color: var(--utrecht-color-grey-15);
831
- --utrecht-button-primary-action-hover-background-color: var(--utrecht-color-blue-60);
832
780
  --utrecht-button-primary-action-disabled-color: var(--utrecht-color-grey-80);
833
781
  --utrecht-button-primary-action-disabled-border-color: var(--utrecht-color-grey-80);
834
782
  --utrecht-button-primary-action-disabled-background-color: var(--utrecht-color-grey-90);
835
- --utrecht-button-primary-action-active-color: var(--utrecht-color-white);
836
- --utrecht-button-primary-action-active-border-color: var(--utrecht-color-blue-30);
837
- --utrecht-button-primary-action-active-background-color: var(--utrecht-color-blue-30);
783
+ --utrecht-button-primary-action-danger-hover-color: var(--utrecht-color-grey-15);
784
+ --utrecht-button-primary-action-danger-hover-background-color: var(--utrecht-color-red-20);
785
+ --utrecht-button-primary-action-danger-focus-border-color: var(--utrecht-color-red-30);
786
+ --utrecht-button-primary-action-danger-focus-background-color: var(--utrecht-color-red-30);
787
+ --utrecht-button-primary-action-danger-disabled-border-color: var(--utrecht-color-grey-90);
788
+ --utrecht-button-primary-action-danger-color: var(--utrecht-color-grey-15);
789
+ --utrecht-button-primary-action-danger-background-color: var(--utrecht-color-red-30);
838
790
  --utrecht-button-primary-action-color: var(--utrecht-color-grey-15);
839
791
  --utrecht-button-primary-action-border-width: var(--utrecht-border-width-md); /* Although the border is not visible, it is needed to match the size of the secondary-action-button appearance */
840
792
  --utrecht-button-primary-action-background-color: var(--utrecht-color-blue-80);
841
- --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
842
- --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
843
- --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
844
- --utrecht-button-icon-gap: var(--utrecht-space-text-xs);
845
- --utrecht-button-active-color: var(--utrecht-color-white);
846
- --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
847
- --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
793
+ --utrecht-button-primary-action-active-color: var(--utrecht-color-white);
794
+ --utrecht-button-primary-action-active-border-color: var(--utrecht-color-blue-30);
795
+ --utrecht-button-primary-action-active-background-color: var(--utrecht-color-blue-30);
848
796
  --utrecht-button-padding-inline-start: var(--utrecht-space-inline-md);
849
- --utrecht-button-padding-block-end: var(--utrecht-space-block-xs);
797
+ --utrecht-button-padding-inline-end: var(--utrecht-space-inline-md);
850
798
  --utrecht-button-padding-block-start: var(--utrecht-space-block-xs);
851
- --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
799
+ --utrecht-button-padding-block-end: var(--utrecht-space-block-xs);
852
800
  --utrecht-button-margin-block-start: var(--utrecht-space-row-xs);
801
+ --utrecht-button-margin-block-end: var(--utrecht-space-row-xs);
853
802
  --utrecht-button-font-size: var(--utrecht-typography-scale-md-font-size);
854
803
  --utrecht-button-font-family: var(--utrecht-typography-sans-serif-font-family);
804
+ --utrecht-button-disabled-color: var(--utrecht-color-grey-80);
805
+ --utrecht-button-disabled-border-color: var(--utrecht-color-grey-40);
806
+ --utrecht-button-disabled-background-color: var(--utrecht-color-grey-40);
807
+ --utrecht-button-column-gap: var(--utrecht-space-text-xs);
855
808
  --utrecht-button-color: var(--utrecht-color-grey-80);
856
809
  --utrecht-button-border-color: var(--utrecht-color-grey-40);
857
810
  --utrecht-button-background-color: var(--utrecht-color-grey-30);
858
- --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
859
- --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
860
- --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
811
+ --utrecht-button-active-color: var(--utrecht-color-white);
812
+ --utrecht-button-active-background-color: var(--utrecht-color-grey-40);
861
813
  --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-typography-scale-sm-font-size);
862
814
  --utrecht-breadcrumb-nav-separator-color: var(--utrecht-color-blue-35);
863
815
  --utrecht-breadcrumb-nav-link-icon-size: var(--utrecht-icon-scale-md);
864
- --utrecht-breadcrumb-nav-link-disabled-color: var(--utrecht-color-grey-40);
865
816
  --utrecht-breadcrumb-nav-link-hover-color: var(--utrecht-color-blue-40);
866
817
  --utrecht-breadcrumb-nav-link-focus-color: var(--utrecht-color-blue-40);
818
+ --utrecht-breadcrumb-nav-link-disabled-color: var(--utrecht-color-grey-40);
867
819
  --utrecht-breadcrumb-nav-link-color: var(--utrecht-color-blue-35);
868
820
  --utrecht-breadcrumb-nav-item-padding-inline-start: var(--utrecht-space-inline-xs);
869
821
  --utrecht-breadcrumb-nav-item-padding-inline-end: var(--utrecht-space-inline-xs);
870
- --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
871
822
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
823
+ --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
872
824
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
825
+ --utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
826
+ --utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
827
+ --utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
828
+ --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
873
829
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
874
- --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
830
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
875
831
  --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
876
832
  --utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
877
- --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
878
- --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
879
833
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
880
834
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
835
+ --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
881
836
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
882
837
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
883
838
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
839
+ --utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
840
+ --utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
884
841
  --utrecht-backdrop-color: var(--utrecht-color-white);
885
842
  --utrecht-backdrop-background-color: var(--utrecht-color-black);
843
+ --utrecht-alert-warning-color: var(--utrecht-color-white);
844
+ --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
845
+ --utrecht-alert-padding-inline-end: var(--utrecht-space-block-lg);
846
+ --utrecht-alert-padding-block-start: var(--utrecht-space-block-lg);
847
+ --utrecht-alert-padding-block-end: var(--utrecht-space-block-lg);
848
+ --utrecht-alert-ok-color: var(--utrecht-color-white);
886
849
  --utrecht-alert-invalid-color: var(--utrecht-color-white);
887
850
  --utrecht-alert-invalid-background-color: var(--utrecht-color-red-95);
888
- --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
851
+ --utrecht-alert-info-color: var(--utrecht-color-white);
852
+ --utrecht-alert-info-background-color: var(--utrecht-color-blue-35);
889
853
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
890
- --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
854
+ --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
891
855
  --utrecht-alert-icon-info-color: var(--utrecht-color-blue-35);
856
+ --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
892
857
  --utrecht-alert-icon-color: var(--utrecht-color-blue-35);
893
- --utrecht-alert-ok-color: var(--utrecht-color-white);
894
858
  --utrecht-alert-error-color: var(--utrecht-color-white);
895
859
  --utrecht-alert-error-background-color: var(--utrecht-color-red-30);
896
- --utrecht-alert-warning-color: var(--utrecht-color-white);
897
- --utrecht-alert-info-color: var(--utrecht-color-white);
898
- --utrecht-alert-info-background-color: var(--utrecht-color-blue-35);
899
- --utrecht-alert-padding-inline-end: var(--utrecht-space-block-lg);
900
- --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
901
- --utrecht-alert-padding-block-end: var(--utrecht-space-block-lg);
902
- --utrecht-alert-padding-block-start: var(--utrecht-space-block-lg);
860
+ --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
903
861
  --utrecht-alert-column-gap: var(--utrecht-space-column-md);
904
862
  --utrecht-alert-color: var(--utrecht-color-white);
905
863
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
906
- --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
907
864
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
908
- --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
865
+ --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
909
866
  --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
910
- --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
867
+ --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
911
868
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
869
+ --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
912
870
  --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
871
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
872
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
873
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
874
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
913
875
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
876
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
877
+ --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
914
878
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
915
879
  --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
916
880
  --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
881
+ --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
882
+ --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
883
+ --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
917
884
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
918
885
  --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
919
886
  --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
920
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
921
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
922
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
923
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
924
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
925
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
926
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
927
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
928
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
929
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
930
- --of-progress-indicator-background-color: var(--utrecht-document-background-color);
931
- --of-page-footer-fg: var(--utrecht-page-footer-color);
932
- --of-page-footer-bg: var(--utrecht-page-footer-background-color);
933
- --of-layout-background: var(--utrecht-document-background-color);
934
- --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
887
+ --denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
888
+ --denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
889
+ --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
890
+ --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
891
+ --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
892
+ --denhaag-process-steps-step-metadata-font-size: var(--utrecht-typography-scale-sm-font-size);
893
+ --denhaag-process-steps-step-metadata-color: var(--utrecht-color-grey-15);
894
+ --denhaag-process-steps-step-marker-warning-color: var(--utrecht-color-invalid);
895
+ --denhaag-process-steps-step-marker-warning-border-color: var(--utrecht-color-invalid);
896
+ --denhaag-process-steps-step-marker-warning-background-color: var(--utrecht-color-white);
897
+ --denhaag-process-steps-step-marker-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
898
+ --denhaag-process-steps-step-marker-font-size: var(--utrecht-typography-scale-sm-font-size);
899
+ --denhaag-process-steps-step-marker-current-color: var(--utrecht-color-white);
900
+ --denhaag-process-steps-step-marker-current-border-width: var(--utrecht-border-width-md);
901
+ --denhaag-process-steps-step-marker-current-border-color: var(--utrecht-color-green-30);
902
+ --denhaag-process-steps-step-marker-current-background-color: var(--utrecht-color-green-30);
903
+ --denhaag-process-steps-step-marker-color: var(--utrecht-color-green-30);
904
+ --denhaag-process-steps-step-marker-checked-color: var(--utrecht-color-green-30);
905
+ --denhaag-process-steps-step-marker-checked-border-width: var(--utrecht-border-width-md);
906
+ --denhaag-process-steps-step-marker-checked-border-color: var(--utrecht-color-green-30);
907
+ --denhaag-process-steps-step-marker-checked-background-color: var(--utrecht-color-white);
908
+ --denhaag-process-steps-step-marker-border-width: var(--utrecht-border-width-md);
909
+ --denhaag-process-steps-step-marker-border-color: var(--utrecht-color-green-30);
910
+ --denhaag-process-steps-step-marker-background-color: var(--utrecht-color-white);
911
+ --denhaag-process-steps-step-line-warning-color: var(--utrecht-color-invalid);
912
+ --denhaag-process-steps-step-line-stroke-width: var(--utrecht-border-width-md);
913
+ --denhaag-process-steps-step-line-color: var(--utrecht-color-green-30);
914
+ --denhaag-process-steps-step-line-checked-color: var(--utrecht-color-green-30);
915
+ --denhaag-process-steps-step-heading-warning-color: var(--utrecht-color-black);
916
+ --denhaag-process-steps-step-heading-not-checked-color: var(--utrecht-color-black);
917
+ --denhaag-process-steps-step-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
918
+ --denhaag-process-steps-step-heading-font-size: var(--utrecht-typography-scale-lg-font-size);
919
+ --denhaag-process-steps-step-heading-font-family: var(--utrecht-typography-sans-serif-font-family);
920
+ --denhaag-process-steps-step-heading-current-color: var(--utrecht-color-black);
921
+ --denhaag-process-steps-step-heading-color: var(--utrecht-color-black);
922
+ --denhaag-process-steps-step-heading-checked-color: var(--utrecht-color-black);
923
+ --denhaag-process-steps-step-heading-checked-background-color: var(--utrecht-color-white);
924
+ --denhaag-process-steps-step-description-font-size: var(--utrecht-typography-scale-md-font-size);
925
+ --denhaag-process-steps-step-description-color: var(--utrecht-color-black);
926
+ --denhaag-process-steps-font-family: var(--utrecht-typography-sans-serif-font-family);
935
927
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
936
928
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
937
929
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
938
930
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
939
- --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
940
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
941
- --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
942
931
  --utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
943
- --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
932
+ --utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
944
933
  --utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
934
+ --utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
935
+ --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
936
+ --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
945
937
  --utrecht-skip-link-color: var(--utrecht-topnav-link-color);
946
938
  --utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
947
939
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
948
940
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
949
941
  --utrecht-paragraph-lead-color: var(--utrecht-document-color);
950
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size); /* Default corner radius for badge components */
942
+ --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
951
943
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
952
944
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
953
945
  --utrecht-link-visited-color: var(--utrecht-link-color);
@@ -958,66 +950,71 @@
958
950
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
959
951
  --utrecht-form-control-invalid-border-color: var(--utrecht-feedback-invalid-border-color);
960
952
  --utrecht-form-control-font-family: var(--utrecht-document-font-family);
961
- --utrecht-drawer-color: var(--utrecht-document-color);
962
- --utrecht-drawer-background-color: var(--utrecht-document-background-color);
963
- --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
964
- --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
965
- --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
966
- --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
953
+ --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
954
+ --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
967
955
  --utrecht-feedback-valid-color: var(--utrecht-feedback-safe-color);
968
- --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
956
+ --utrecht-feedback-success-color: var(--utrecht-feedback-safe-color);
969
957
  --utrecht-feedback-safe-border-color: var(--utrecht-feedback-safe-color);
970
958
  --utrecht-feedback-safe-background-color: var(--utrecht-feedback-safe-color);
971
- --utrecht-feedback-warning-border-color: var(--utrecht-feedback-warning-color);
972
- --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
959
+ --utrecht-feedback-invalid-fill-background-color: var(--utrecht-feedback-invalid-background-color);
960
+ --utrecht-feedback-inactive-color: var(--utrecht-feedback-danger-color);
961
+ --utrecht-feedback-error-color: var(--utrecht-feedback-danger-color);
973
962
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
974
963
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
964
+ --utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
965
+ --utrecht-drawer-color: var(--utrecht-document-color);
966
+ --utrecht-drawer-background-color: var(--utrecht-document-background-color);
975
967
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
976
968
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
977
969
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
978
970
  --utrecht-button-subtle-pressed-color: var(--utrecht-button-subtle-active-color);
979
971
  --utrecht-button-subtle-pressed-background-color: var(--utrecht-button-subtle-active-background-color);
980
- --utrecht-button-secondary-action-ready-background-color: var(--utrecht-page-background-color);
981
- --utrecht-button-secondary-action-warning-focus-background-color: var(--utrecht-page-background-color);
982
972
  --utrecht-button-secondary-action-warning-hover-background-color: var(--utrecht-page-background-color);
973
+ --utrecht-button-secondary-action-warning-focus-background-color: var(--utrecht-page-background-color);
983
974
  --utrecht-button-secondary-action-warning-background-color: var(--utrecht-page-background-color);
984
- --utrecht-button-secondary-action-danger-focus-background-color: var(--utrecht-page-background-color);
985
- --utrecht-button-secondary-action-danger-hover-background-color: var(--utrecht-page-background-color);
986
- --utrecht-button-secondary-action-danger-background-color: var(--utrecht-page-background-color);
975
+ --utrecht-button-secondary-action-ready-background-color: var(--utrecht-page-background-color);
987
976
  --utrecht-button-secondary-action-pressed-color: var(--utrecht-button-secondary-action-active-color);
988
977
  --utrecht-button-secondary-action-pressed-background-color: var(--utrecht-button-secondary-action-active-background-color);
989
978
  --utrecht-button-secondary-action-hover-background-color: var(--utrecht-page-background-color);
990
979
  --utrecht-button-secondary-action-disabled-background-color: var(--utrecht-page-background-color);
980
+ --utrecht-button-secondary-action-danger-hover-background-color: var(--utrecht-page-background-color);
981
+ --utrecht-button-secondary-action-danger-focus-background-color: var(--utrecht-page-background-color);
982
+ --utrecht-button-secondary-action-danger-background-color: var(--utrecht-page-background-color);
991
983
  --utrecht-button-secondary-action-background-color: var(--utrecht-page-background-color);
992
984
  --utrecht-button-primary-action-pressed-color: var(--utrecht-button-primary-action-active-color);
993
985
  --utrecht-button-primary-action-pressed-border-color: var(--utrecht-button-primary-action-active-border-color);
994
986
  --utrecht-button-primary-action-pressed-background-color: var(--utrecht-button-primary-action-active-background-color);
995
987
  --utrecht-button-pressed-color: var(--utrecht-button-active-color);
996
988
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
997
- --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
998
989
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
990
+ --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
999
991
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
1000
- --of-layout-bg: var(--of-layout-background);
992
+ --of-progress-indicator-background-color: var(--utrecht-document-background-color);
993
+ --of-page-footer-fg: var(--utrecht-page-footer-color);
994
+ --of-page-footer-bg: var(--utrecht-page-footer-background-color);
995
+ --of-layout-background: var(--utrecht-document-background-color);
996
+ --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
1001
997
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1002
998
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
1003
999
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
1004
- --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
1005
- --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1006
- --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
1007
- --utrecht-feedback-inactive-background-color: var(--utrecht-feedback-danger-background-color);
1000
+ --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1001
+ --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
1002
+ --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
1008
1003
  --utrecht-feedback-success-border-color: var(--utrecht-feedback-safe-border-color);
1009
1004
  --utrecht-feedback-success-background-color: var(--utrecht-feedback-safe-background-color);
1005
+ --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
1006
+ --utrecht-feedback-inactive-border-color: var(--utrecht-feedback-danger-border-color);
1007
+ --utrecht-feedback-inactive-background-color: var(--utrecht-feedback-danger-background-color);
1010
1008
  --utrecht-feedback-error-border-color: var(--utrecht-feedback-danger-border-color);
1011
1009
  --utrecht-feedback-error-background-color: var(--utrecht-feedback-danger-background-color);
1012
- --utrecht-feedback-valid-border-color: var(--utrecht-feedback-safe-border-color);
1013
- --utrecht-feedback-valid-background-color: var(--utrecht-feedback-safe-background-color);
1014
- --utrecht-feedback-safe-fill-background-color: var(--utrecht-feedback-safe-background-color);
1015
- --utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
1016
1010
  --utrecht-feedback-danger-fill-background-color: var(--utrecht-feedback-danger-background-color);
1011
+ --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
1012
+ --utrecht-feedback-active-background-color: var(--utrecht-feedback-safe-background-color);
1017
1013
  --utrecht-checkbox-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1018
- --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1019
- --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1014
+ --of-layout-bg: var(--of-layout-background);
1015
+ --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1020
1016
  --utrecht-feedback-success-fill-background-color: var(--utrecht-feedback-success-background-color);
1017
+ --utrecht-feedback-inactive-fill-background-color: var(--utrecht-feedback-inactive-background-color);
1021
1018
  --utrecht-feedback-error-fill-background-color: var(--utrecht-feedback-error-background-color);
1022
- --utrecht-feedback-valid-fill-background-color: var(--utrecht-feedback-valid-background-color);
1019
+ --utrecht-feedback-active-fill-background-color: var(--utrecht-feedback-active-background-color);
1023
1020
  }