@utrecht/design-tokens 2.0.0 → 2.1.1

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