@dsn-starter-kit/components-react 1.0.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/README.md +1 -1
  2. package/dist/ActionGroup/ActionGroup.css +62 -22
  3. package/dist/ActionGroup/ActionGroup.d.ts +10 -2
  4. package/dist/ActionGroup/ActionGroup.d.ts.map +1 -1
  5. package/dist/ActionGroup/ActionGroup.js +20 -2
  6. package/dist/ActionGroup/ActionGroup.js.map +1 -1
  7. package/dist/Alert/Alert.css +25 -11
  8. package/dist/Alert/Alert.d.ts +14 -0
  9. package/dist/Alert/Alert.d.ts.map +1 -1
  10. package/dist/Alert/Alert.js +14 -2
  11. package/dist/Alert/Alert.js.map +1 -1
  12. package/dist/BreakoutSection/BreakoutSection.css +4 -0
  13. package/dist/Details/Details.css +14 -0
  14. package/dist/DotBadge/DotBadge.css +13 -0
  15. package/dist/File/File.css +16 -0
  16. package/dist/Grid/Grid.css +2 -2
  17. package/dist/HeadingGroup/HeadingGroup.css +5 -0
  18. package/dist/HeadingGroup/HeadingGroup.d.ts +23 -0
  19. package/dist/HeadingGroup/HeadingGroup.d.ts.map +1 -0
  20. package/dist/HeadingGroup/HeadingGroup.js +12 -0
  21. package/dist/HeadingGroup/HeadingGroup.js.map +1 -0
  22. package/dist/HeadingGroup/index.d.ts +3 -0
  23. package/dist/HeadingGroup/index.d.ts.map +1 -0
  24. package/dist/HeadingGroup/index.js +2 -0
  25. package/dist/HeadingGroup/index.js.map +1 -0
  26. package/dist/Hero/Hero.css +642 -0
  27. package/dist/Note/Note.css +22 -14
  28. package/dist/Note/Note.d.ts +18 -3
  29. package/dist/Note/Note.d.ts.map +1 -1
  30. package/dist/Note/Note.js +18 -5
  31. package/dist/Note/Note.js.map +1 -1
  32. package/dist/PageBody/PageBody.css +30 -0
  33. package/dist/PageFooter/PageFooter.css +0 -1
  34. package/dist/PageHeader/PageHeader.css +13 -0
  35. package/dist/PreHeading/PreHeading.css +10 -0
  36. package/dist/PreHeading/PreHeading.d.ts +8 -0
  37. package/dist/PreHeading/PreHeading.d.ts.map +1 -0
  38. package/dist/PreHeading/PreHeading.js +9 -0
  39. package/dist/PreHeading/PreHeading.js.map +1 -0
  40. package/dist/PreHeading/index.d.ts +3 -0
  41. package/dist/PreHeading/index.d.ts.map +1 -0
  42. package/dist/PreHeading/index.js +2 -0
  43. package/dist/PreHeading/index.js.map +1 -0
  44. package/dist/ProgressBar/ProgressBar.css +14 -0
  45. package/dist/ProgressBar/ProgressBar.d.ts +7 -2
  46. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  47. package/dist/ProgressBar/ProgressBar.js +2 -2
  48. package/dist/ProgressBar/ProgressBar.js.map +1 -1
  49. package/dist/Radio/Radio.css +36 -0
  50. package/dist/SearchInput/SearchInput.css +8 -0
  51. package/dist/Select/Select.css +8 -0
  52. package/dist/SkipLink/SkipLink.d.ts +1 -1
  53. package/dist/SkipLink/SkipLink.js +1 -1
  54. package/dist/Spinner/Spinner.css +17 -0
  55. package/dist/TableOfContents/TableOfContents.css +75 -0
  56. package/dist/TableOfContents/TableOfContents.d.ts +61 -0
  57. package/dist/TableOfContents/TableOfContents.d.ts.map +1 -0
  58. package/dist/TableOfContents/TableOfContents.js +32 -0
  59. package/dist/TableOfContents/TableOfContents.js.map +1 -0
  60. package/dist/TableOfContents/index.d.ts +3 -0
  61. package/dist/TableOfContents/index.d.ts.map +1 -0
  62. package/dist/TableOfContents/index.js +2 -0
  63. package/dist/TableOfContents/index.js.map +1 -0
  64. package/dist/index.css +1019 -50
  65. package/dist/index.d.ts +3 -0
  66. package/dist/index.d.ts.map +1 -1
  67. package/dist/index.js +3 -0
  68. package/dist/index.js.map +1 -1
  69. package/package.json +3 -3
package/dist/Hero/Hero.css CHANGED
@@ -1,3 +1,639 @@
1
+ /* Force light-mode kleurwaarden binnen image hero — voorkomt donkere tekst op foto.
2
+ Per thema gescoopt (.dsn-theme-{name} .dsn-hero--image); gegenereerd door token-build. */
3
+ /**
4
+ * Do not edit directly
5
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
6
+ */
7
+
8
+ .dsn-theme-start .dsn-hero--image {
9
+ --dsn-color-neutral-bg-document: #fcfcfc;
10
+ --dsn-color-neutral-bg-elevated: #fcfcfc;
11
+ --dsn-color-neutral-bg-subtle: #f6f6f6;
12
+ --dsn-color-neutral-bg-default: #f1f1f1;
13
+ --dsn-color-neutral-bg-hover: #ebebeb;
14
+ --dsn-color-neutral-bg-active: #e5e5e5;
15
+ --dsn-color-neutral-border-subtle: #c4c4c4;
16
+ --dsn-color-neutral-border-default: #868686;
17
+ --dsn-color-neutral-border-hover: #7c7c7c;
18
+ --dsn-color-neutral-border-active: #727272;
19
+ --dsn-color-neutral-color-default: #595959;
20
+ --dsn-color-neutral-color-hover: #4b4b4b;
21
+ --dsn-color-neutral-color-active: #3e3e3e;
22
+ --dsn-color-neutral-color-subtle: #636363;
23
+ --dsn-color-neutral-color-document: #1b1b1b;
24
+ --dsn-color-accent-1-bg-document: #fbfcfd;
25
+ --dsn-color-accent-1-bg-elevated: #fbfcfd;
26
+ --dsn-color-accent-1-bg-subtle: #f4f7fa;
27
+ --dsn-color-accent-1-bg-default: #ecf1f7;
28
+ --dsn-color-accent-1-bg-hover: #e4ecf4;
29
+ --dsn-color-accent-1-bg-active: #dde6f1;
30
+ --dsn-color-accent-1-border-subtle: #b0c6df;
31
+ --dsn-color-accent-1-border-default: #5c89be;
32
+ --dsn-color-accent-1-border-hover: #4e7fb8;
33
+ --dsn-color-accent-1-border-active: #3f74b2;
34
+ --dsn-color-accent-1-color-default: #1b59a4;
35
+ --dsn-color-accent-1-color-hover: #04499a;
36
+ --dsn-color-accent-1-color-active: #003b81;
37
+ --dsn-color-accent-1-color-subtle: #2964aa;
38
+ --dsn-color-accent-1-color-document: #001b3c;
39
+ --dsn-color-accent-2-bg-document: #fbfcfd;
40
+ --dsn-color-accent-2-bg-elevated: #fbfcfd;
41
+ --dsn-color-accent-2-bg-subtle: #f4f7fa;
42
+ --dsn-color-accent-2-bg-default: #ecf1f7;
43
+ --dsn-color-accent-2-bg-hover: #e4ecf4;
44
+ --dsn-color-accent-2-bg-active: #dde6f1;
45
+ --dsn-color-accent-2-border-subtle: #b0c6df;
46
+ --dsn-color-accent-2-border-default: #5c89be;
47
+ --dsn-color-accent-2-border-hover: #4e7fb8;
48
+ --dsn-color-accent-2-border-active: #3f74b2;
49
+ --dsn-color-accent-2-color-default: #1b59a4;
50
+ --dsn-color-accent-2-color-hover: #04499a;
51
+ --dsn-color-accent-2-color-active: #003b81;
52
+ --dsn-color-accent-2-color-subtle: #2964aa;
53
+ --dsn-color-accent-2-color-document: #001b3c;
54
+ --dsn-color-accent-3-bg-document: #fbfcfd;
55
+ --dsn-color-accent-3-bg-elevated: #fbfcfd;
56
+ --dsn-color-accent-3-bg-subtle: #f4f7fa;
57
+ --dsn-color-accent-3-bg-default: #ecf1f7;
58
+ --dsn-color-accent-3-bg-hover: #e4ecf4;
59
+ --dsn-color-accent-3-bg-active: #dde6f1;
60
+ --dsn-color-accent-3-border-subtle: #b0c6df;
61
+ --dsn-color-accent-3-border-default: #5c89be;
62
+ --dsn-color-accent-3-border-hover: #4e7fb8;
63
+ --dsn-color-accent-3-border-active: #3f74b2;
64
+ --dsn-color-accent-3-color-default: #1b59a4;
65
+ --dsn-color-accent-3-color-hover: #04499a;
66
+ --dsn-color-accent-3-color-active: #003b81;
67
+ --dsn-color-accent-3-color-subtle: #2964aa;
68
+ --dsn-color-accent-3-color-document: #001b3c;
69
+ --dsn-color-action-1-bg-document: #fbfcfd;
70
+ --dsn-color-action-1-bg-elevated: #fbfcfd;
71
+ --dsn-color-action-1-bg-subtle: #f4f7fa;
72
+ --dsn-color-action-1-bg-default: #ecf1f7;
73
+ --dsn-color-action-1-bg-hover: #e4ecf4;
74
+ --dsn-color-action-1-bg-active: #dde6f1;
75
+ --dsn-color-action-1-border-subtle: #b0c6df;
76
+ --dsn-color-action-1-border-default: #5c89be;
77
+ --dsn-color-action-1-border-hover: #4e7fb8;
78
+ --dsn-color-action-1-border-active: #3f74b2;
79
+ --dsn-color-action-1-color-default: #1b59a4;
80
+ --dsn-color-action-1-color-hover: #04499a;
81
+ --dsn-color-action-1-color-active: #003b81;
82
+ --dsn-color-action-1-color-subtle: #2964aa;
83
+ --dsn-color-action-1-color-document: #001b3c;
84
+ --dsn-color-action-2-bg-document: #fbfcfd;
85
+ --dsn-color-action-2-bg-elevated: #fbfcfd;
86
+ --dsn-color-action-2-bg-subtle: #f4f7fa;
87
+ --dsn-color-action-2-bg-default: #ecf1f7;
88
+ --dsn-color-action-2-bg-hover: #e4ecf4;
89
+ --dsn-color-action-2-bg-active: #dde6f1;
90
+ --dsn-color-action-2-border-subtle: #b0c6df;
91
+ --dsn-color-action-2-border-default: #5c89be;
92
+ --dsn-color-action-2-border-hover: #4e7fb8;
93
+ --dsn-color-action-2-border-active: #3f74b2;
94
+ --dsn-color-action-2-color-default: #1b59a4;
95
+ --dsn-color-action-2-color-hover: #04499a;
96
+ --dsn-color-action-2-color-active: #003b81;
97
+ --dsn-color-action-2-color-subtle: #2964aa;
98
+ --dsn-color-action-2-color-document: #001b3c;
99
+ --dsn-color-info-bg-document: #fbfcfd;
100
+ --dsn-color-info-bg-elevated: #fbfcfd;
101
+ --dsn-color-info-bg-subtle: #f4f7fa;
102
+ --dsn-color-info-bg-default: #ecf1f7;
103
+ --dsn-color-info-bg-hover: #e4ecf4;
104
+ --dsn-color-info-bg-active: #dde6f1;
105
+ --dsn-color-info-border-subtle: #b0c6df;
106
+ --dsn-color-info-border-default: #5c89be;
107
+ --dsn-color-info-border-hover: #4e7fb8;
108
+ --dsn-color-info-border-active: #3f74b2;
109
+ --dsn-color-info-color-default: #1b59a4;
110
+ --dsn-color-info-color-hover: #04499a;
111
+ --dsn-color-info-color-active: #003b81;
112
+ --dsn-color-info-color-subtle: #2964aa;
113
+ --dsn-color-info-color-document: #001b3c;
114
+ --dsn-color-negative-bg-document: #fffbfb;
115
+ --dsn-color-negative-bg-elevated: #fffbfb;
116
+ --dsn-color-negative-bg-subtle: #fef4f4;
117
+ --dsn-color-negative-bg-default: #feeded;
118
+ --dsn-color-negative-bg-hover: #fde6e6;
119
+ --dsn-color-negative-bg-active: #fddede;
120
+ --dsn-color-negative-border-subtle: #f9b1b1;
121
+ --dsn-color-negative-border-default: #f14848;
122
+ --dsn-color-negative-border-hover: #ef2929;
123
+ --dsn-color-negative-border-active: #e60000;
124
+ --dsn-color-negative-color-default: #b70000;
125
+ --dsn-color-negative-color-hover: #9c0000;
126
+ --dsn-color-negative-color-active: #930000;
127
+ --dsn-color-negative-color-subtle: #ca0000;
128
+ --dsn-color-negative-color-document: #410000;
129
+ --dsn-color-positive-bg-document: #fafdfb;
130
+ --dsn-color-positive-bg-elevated: #fafdfb;
131
+ --dsn-color-positive-bg-subtle: #eff9f3;
132
+ --dsn-color-positive-bg-default: #e4f5ea;
133
+ --dsn-color-positive-bg-hover: #d9f1e2;
134
+ --dsn-color-positive-bg-active: #ceedd9;
135
+ --dsn-color-positive-border-subtle: #8ad3a6;
136
+ --dsn-color-positive-border-default: #009b3a;
137
+ --dsn-color-positive-border-hover: #009036;
138
+ --dsn-color-positive-border-active: #008432;
139
+ --dsn-color-positive-color-default: #006827;
140
+ --dsn-color-positive-color-hover: #005821;
141
+ --dsn-color-positive-color-active: #00481b;
142
+ --dsn-color-positive-color-subtle: #00732b;
143
+ --dsn-color-positive-color-document: #00210c;
144
+ --dsn-color-warning-bg-document: #fffcf8;
145
+ --dsn-color-warning-bg-elevated: #fffcf8;
146
+ --dsn-color-warning-bg-subtle: #fff5eb;
147
+ --dsn-color-warning-bg-default: #ffeedd;
148
+ --dsn-color-warning-bg-hover: #ffe7d0;
149
+ --dsn-color-warning-bg-active: #ffe0c2;
150
+ --dsn-color-warning-border-subtle: #ffb46b;
151
+ --dsn-color-warning-border-default: #c8700e;
152
+ --dsn-color-warning-border-hover: #b86810;
153
+ --dsn-color-warning-border-active: #a96011;
154
+ --dsn-color-warning-color-default: #844c12;
155
+ --dsn-color-warning-color-hover: #6f4012;
156
+ --dsn-color-warning-color-active: #5a3511;
157
+ --dsn-color-warning-color-subtle: #935412;
158
+ --dsn-color-warning-color-document: #27190a;
159
+ --dsn-color-neutral-inverse-bg-document: #242424;
160
+ --dsn-color-neutral-inverse-bg-elevated: #242424;
161
+ --dsn-color-neutral-inverse-bg-subtle: #1b1b1b;
162
+ --dsn-color-neutral-inverse-bg-default: #595959;
163
+ --dsn-color-neutral-inverse-bg-hover: #4b4b4b;
164
+ --dsn-color-neutral-inverse-bg-active: #3e3e3e;
165
+ --dsn-color-neutral-inverse-border-subtle: #474747;
166
+ --dsn-color-neutral-inverse-border-default: #c9c9c9;
167
+ --dsn-color-neutral-inverse-border-hover: #d4d4d4;
168
+ --dsn-color-neutral-inverse-border-active: #dfdfdf;
169
+ --dsn-color-neutral-inverse-color-default: #ffffff;
170
+ --dsn-color-neutral-inverse-color-hover: #ffffff;
171
+ --dsn-color-neutral-inverse-color-active: #ffffff;
172
+ --dsn-color-neutral-inverse-color-subtle: #c4c4c4;
173
+ --dsn-color-neutral-inverse-color-document: #ffffff;
174
+ --dsn-color-accent-1-inverse-bg-document: #00234d;
175
+ --dsn-color-accent-1-inverse-bg-elevated: #00234d;
176
+ --dsn-color-accent-1-inverse-bg-subtle: #001b3c;
177
+ --dsn-color-accent-1-inverse-bg-default: #1b59a4;
178
+ --dsn-color-accent-1-inverse-bg-hover: #04499a;
179
+ --dsn-color-accent-1-inverse-bg-active: #003b81;
180
+ --dsn-color-accent-1-inverse-border-subtle: #004494;
181
+ --dsn-color-accent-1-inverse-border-default: #b8cbe2;
182
+ --dsn-color-accent-1-inverse-border-hover: #c6d6e8;
183
+ --dsn-color-accent-1-inverse-border-active: #d5e1ee;
184
+ --dsn-color-accent-1-inverse-color-default: #ffffff;
185
+ --dsn-color-accent-1-inverse-color-hover: #ffffff;
186
+ --dsn-color-accent-1-inverse-color-active: #ffffff;
187
+ --dsn-color-accent-1-inverse-color-subtle: #b0c6df;
188
+ --dsn-color-accent-1-inverse-color-document: #ffffff;
189
+ --dsn-color-accent-2-inverse-bg-document: #00234d;
190
+ --dsn-color-accent-2-inverse-bg-elevated: #00234d;
191
+ --dsn-color-accent-2-inverse-bg-subtle: #001b3c;
192
+ --dsn-color-accent-2-inverse-bg-default: #1b59a4;
193
+ --dsn-color-accent-2-inverse-bg-hover: #04499a;
194
+ --dsn-color-accent-2-inverse-bg-active: #003b81;
195
+ --dsn-color-accent-2-inverse-border-subtle: #004494;
196
+ --dsn-color-accent-2-inverse-border-default: #b8cbe2;
197
+ --dsn-color-accent-2-inverse-border-hover: #c6d6e8;
198
+ --dsn-color-accent-2-inverse-border-active: #d5e1ee;
199
+ --dsn-color-accent-2-inverse-color-default: #ffffff;
200
+ --dsn-color-accent-2-inverse-color-hover: #ffffff;
201
+ --dsn-color-accent-2-inverse-color-active: #ffffff;
202
+ --dsn-color-accent-2-inverse-color-subtle: #b0c6df;
203
+ --dsn-color-accent-2-inverse-color-document: #ffffff;
204
+ --dsn-color-accent-3-inverse-bg-document: #00234d;
205
+ --dsn-color-accent-3-inverse-bg-elevated: #00234d;
206
+ --dsn-color-accent-3-inverse-bg-subtle: #001b3c;
207
+ --dsn-color-accent-3-inverse-bg-default: #1b59a4;
208
+ --dsn-color-accent-3-inverse-bg-hover: #04499a;
209
+ --dsn-color-accent-3-inverse-bg-active: #003b81;
210
+ --dsn-color-accent-3-inverse-border-subtle: #004494;
211
+ --dsn-color-accent-3-inverse-border-default: #b8cbe2;
212
+ --dsn-color-accent-3-inverse-border-hover: #c6d6e8;
213
+ --dsn-color-accent-3-inverse-border-active: #d5e1ee;
214
+ --dsn-color-accent-3-inverse-color-default: #ffffff;
215
+ --dsn-color-accent-3-inverse-color-hover: #ffffff;
216
+ --dsn-color-accent-3-inverse-color-active: #ffffff;
217
+ --dsn-color-accent-3-inverse-color-subtle: #b0c6df;
218
+ --dsn-color-accent-3-inverse-color-document: #ffffff;
219
+ --dsn-color-action-1-inverse-bg-document: #00234d;
220
+ --dsn-color-action-1-inverse-bg-elevated: #00234d;
221
+ --dsn-color-action-1-inverse-bg-subtle: #001b3c;
222
+ --dsn-color-action-1-inverse-bg-default: #1b59a4;
223
+ --dsn-color-action-1-inverse-bg-hover: #04499a;
224
+ --dsn-color-action-1-inverse-bg-active: #003b81;
225
+ --dsn-color-action-1-inverse-border-subtle: #004494;
226
+ --dsn-color-action-1-inverse-border-default: #b8cbe2;
227
+ --dsn-color-action-1-inverse-border-hover: #c6d6e8;
228
+ --dsn-color-action-1-inverse-border-active: #d5e1ee;
229
+ --dsn-color-action-1-inverse-color-default: #ffffff;
230
+ --dsn-color-action-1-inverse-color-hover: #ffffff;
231
+ --dsn-color-action-1-inverse-color-active: #ffffff;
232
+ --dsn-color-action-1-inverse-color-subtle: #b0c6df;
233
+ --dsn-color-action-1-inverse-color-document: #ffffff;
234
+ --dsn-color-action-2-inverse-bg-document: #00234d;
235
+ --dsn-color-action-2-inverse-bg-elevated: #00234d;
236
+ --dsn-color-action-2-inverse-bg-subtle: #001b3c;
237
+ --dsn-color-action-2-inverse-bg-default: #1b59a4;
238
+ --dsn-color-action-2-inverse-bg-hover: #04499a;
239
+ --dsn-color-action-2-inverse-bg-active: #003b81;
240
+ --dsn-color-action-2-inverse-border-subtle: #004494;
241
+ --dsn-color-action-2-inverse-border-default: #b8cbe2;
242
+ --dsn-color-action-2-inverse-border-hover: #c6d6e8;
243
+ --dsn-color-action-2-inverse-border-active: #d5e1ee;
244
+ --dsn-color-action-2-inverse-color-default: #ffffff;
245
+ --dsn-color-action-2-inverse-color-hover: #ffffff;
246
+ --dsn-color-action-2-inverse-color-active: #ffffff;
247
+ --dsn-color-action-2-inverse-color-subtle: #b0c6df;
248
+ --dsn-color-action-2-inverse-color-document: #ffffff;
249
+ --dsn-color-info-inverse-bg-document: #00234d;
250
+ --dsn-color-info-inverse-bg-elevated: #00234d;
251
+ --dsn-color-info-inverse-bg-subtle: #001b3c;
252
+ --dsn-color-info-inverse-bg-default: #1b59a4;
253
+ --dsn-color-info-inverse-bg-hover: #04499a;
254
+ --dsn-color-info-inverse-bg-active: #003b81;
255
+ --dsn-color-info-inverse-border-subtle: #004494;
256
+ --dsn-color-info-inverse-border-default: #b8cbe2;
257
+ --dsn-color-info-inverse-border-hover: #c6d6e8;
258
+ --dsn-color-info-inverse-border-active: #d5e1ee;
259
+ --dsn-color-info-inverse-color-default: #ffffff;
260
+ --dsn-color-info-inverse-color-hover: #ffffff;
261
+ --dsn-color-info-inverse-color-active: #ffffff;
262
+ --dsn-color-info-inverse-color-subtle: #b0c6df;
263
+ --dsn-color-info-inverse-color-document: #ffffff;
264
+ --dsn-color-negative-inverse-bg-document: #510000;
265
+ --dsn-color-negative-inverse-bg-elevated: #510000;
266
+ --dsn-color-negative-inverse-bg-subtle: #410000;
267
+ --dsn-color-negative-inverse-bg-default: #b70000;
268
+ --dsn-color-negative-inverse-bg-hover: #9c0000;
269
+ --dsn-color-negative-inverse-bg-active: #820000;
270
+ --dsn-color-negative-inverse-border-subtle: #930000;
271
+ --dsn-color-negative-inverse-border-default: #fab9b9;
272
+ --dsn-color-negative-inverse-border-hover: #fbc8c8;
273
+ --dsn-color-negative-inverse-border-active: #fcd7d7;
274
+ --dsn-color-negative-inverse-color-default: #ffffff;
275
+ --dsn-color-negative-inverse-color-hover: #ffffff;
276
+ --dsn-color-negative-inverse-color-active: #ffffff;
277
+ --dsn-color-negative-inverse-color-subtle: #f9b1b1;
278
+ --dsn-color-negative-inverse-color-document: #ffffff;
279
+ --dsn-color-positive-inverse-bg-document: #002b10;
280
+ --dsn-color-positive-inverse-bg-elevated: #002b10;
281
+ --dsn-color-positive-inverse-bg-subtle: #00210c;
282
+ --dsn-color-positive-inverse-bg-default: #006827;
283
+ --dsn-color-positive-inverse-bg-hover: #005821;
284
+ --dsn-color-positive-inverse-bg-active: #00481b;
285
+ --dsn-color-positive-inverse-border-subtle: #00531f;
286
+ --dsn-color-positive-inverse-border-default: #96d8ae;
287
+ --dsn-color-positive-inverse-border-hover: #ace0c0;
288
+ --dsn-color-positive-inverse-border-active: #c3e9d1;
289
+ --dsn-color-positive-inverse-color-default: #ffffff;
290
+ --dsn-color-positive-inverse-color-hover: #ffffff;
291
+ --dsn-color-positive-inverse-color-active: #ffffff;
292
+ --dsn-color-positive-inverse-color-subtle: #8ad3a6;
293
+ --dsn-color-positive-inverse-color-document: #ffffff;
294
+ --dsn-color-warning-inverse-bg-document: #331f0d;
295
+ --dsn-color-warning-inverse-bg-elevated: #331f0d;
296
+ --dsn-color-warning-inverse-bg-subtle: #27190a;
297
+ --dsn-color-warning-inverse-bg-default: #844c12;
298
+ --dsn-color-warning-inverse-bg-hover: #6f4012;
299
+ --dsn-color-warning-inverse-bg-active: #5a3511;
300
+ --dsn-color-warning-inverse-border-subtle: #683c12;
301
+ --dsn-color-warning-inverse-border-default: #ffbc7a;
302
+ --dsn-color-warning-inverse-border-hover: #ffcb98;
303
+ --dsn-color-warning-inverse-border-active: #ffd9b4;
304
+ --dsn-color-warning-inverse-color-default: #ffffff;
305
+ --dsn-color-warning-inverse-color-hover: #ffffff;
306
+ --dsn-color-warning-inverse-color-active: #ffffff;
307
+ --dsn-color-warning-inverse-color-subtle: #ffb46b;
308
+ --dsn-color-warning-inverse-color-document: #ffffff;
309
+ --dsn-color-transparent: rgba(0, 0, 0, 0);
310
+ --dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent);
311
+ --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent);
312
+ --dsn-color-shadow-highlight: rgba(0, 0, 0, 0);
313
+ --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
314
+ --dsn-hero-background-color-default: #ecf1f7;
315
+ --dsn-hero-background-color-inverse: #1b59a4;
316
+ --dsn-hero-color-default: #1b59a4;
317
+ --dsn-hero-color-inverse: #ffffff;
318
+ --dsn-hero-image-blend-color: #1b59a4;
319
+ }
320
+
321
+ /**
322
+ * Do not edit directly
323
+ * Generated on Sun, 12 Jul 2026 08:06:05 GMT
324
+ */
325
+
326
+ .dsn-theme-wireframe .dsn-hero--image {
327
+ --dsn-color-neutral-bg-document: #ffffff;
328
+ --dsn-color-neutral-bg-elevated: #ffffff;
329
+ --dsn-color-neutral-bg-subtle: #ffffff;
330
+ --dsn-color-neutral-bg-default: #ffffff;
331
+ --dsn-color-neutral-bg-hover: #ffffff;
332
+ --dsn-color-neutral-bg-active: #ffffff;
333
+ --dsn-color-neutral-border-subtle: #000000;
334
+ --dsn-color-neutral-border-default: #000000;
335
+ --dsn-color-neutral-border-hover: #000000;
336
+ --dsn-color-neutral-border-active: #000000;
337
+ --dsn-color-neutral-color-default: #000000;
338
+ --dsn-color-neutral-color-hover: #000000;
339
+ --dsn-color-neutral-color-active: #000000;
340
+ --dsn-color-neutral-color-subtle: #000000;
341
+ --dsn-color-neutral-color-document: #000000;
342
+ --dsn-color-accent-1-bg-document: #ffffff;
343
+ --dsn-color-accent-1-bg-elevated: #ffffff;
344
+ --dsn-color-accent-1-bg-subtle: #ffffff;
345
+ --dsn-color-accent-1-bg-default: #ffffff;
346
+ --dsn-color-accent-1-bg-hover: #ffffff;
347
+ --dsn-color-accent-1-bg-active: #ffffff;
348
+ --dsn-color-accent-1-border-subtle: #000000;
349
+ --dsn-color-accent-1-border-default: #000000;
350
+ --dsn-color-accent-1-border-hover: #000000;
351
+ --dsn-color-accent-1-border-active: #000000;
352
+ --dsn-color-accent-1-color-default: #000000;
353
+ --dsn-color-accent-1-color-hover: #000000;
354
+ --dsn-color-accent-1-color-active: #000000;
355
+ --dsn-color-accent-1-color-subtle: #000000;
356
+ --dsn-color-accent-1-color-document: #000000;
357
+ --dsn-color-accent-2-bg-document: #ffffff;
358
+ --dsn-color-accent-2-bg-elevated: #ffffff;
359
+ --dsn-color-accent-2-bg-subtle: #ffffff;
360
+ --dsn-color-accent-2-bg-default: #ffffff;
361
+ --dsn-color-accent-2-bg-hover: #ffffff;
362
+ --dsn-color-accent-2-bg-active: #ffffff;
363
+ --dsn-color-accent-2-border-subtle: #000000;
364
+ --dsn-color-accent-2-border-default: #000000;
365
+ --dsn-color-accent-2-border-hover: #000000;
366
+ --dsn-color-accent-2-border-active: #000000;
367
+ --dsn-color-accent-2-color-default: #000000;
368
+ --dsn-color-accent-2-color-hover: #000000;
369
+ --dsn-color-accent-2-color-active: #000000;
370
+ --dsn-color-accent-2-color-subtle: #000000;
371
+ --dsn-color-accent-2-color-document: #000000;
372
+ --dsn-color-accent-3-bg-document: #ffffff;
373
+ --dsn-color-accent-3-bg-elevated: #ffffff;
374
+ --dsn-color-accent-3-bg-subtle: #ffffff;
375
+ --dsn-color-accent-3-bg-default: #ffffff;
376
+ --dsn-color-accent-3-bg-hover: #ffffff;
377
+ --dsn-color-accent-3-bg-active: #ffffff;
378
+ --dsn-color-accent-3-border-subtle: #000000;
379
+ --dsn-color-accent-3-border-default: #000000;
380
+ --dsn-color-accent-3-border-hover: #000000;
381
+ --dsn-color-accent-3-border-active: #000000;
382
+ --dsn-color-accent-3-color-default: #000000;
383
+ --dsn-color-accent-3-color-hover: #000000;
384
+ --dsn-color-accent-3-color-active: #000000;
385
+ --dsn-color-accent-3-color-subtle: #000000;
386
+ --dsn-color-accent-3-color-document: #000000;
387
+ --dsn-color-action-1-bg-document: #ffffff;
388
+ --dsn-color-action-1-bg-elevated: #ffffff;
389
+ --dsn-color-action-1-bg-subtle: #ffffff;
390
+ --dsn-color-action-1-bg-default: #ffffff;
391
+ --dsn-color-action-1-bg-hover: #ffffff;
392
+ --dsn-color-action-1-bg-active: #ffffff;
393
+ --dsn-color-action-1-border-subtle: #000000;
394
+ --dsn-color-action-1-border-default: #000000;
395
+ --dsn-color-action-1-border-hover: #000000;
396
+ --dsn-color-action-1-border-active: #000000;
397
+ --dsn-color-action-1-color-default: #000000;
398
+ --dsn-color-action-1-color-hover: #000000;
399
+ --dsn-color-action-1-color-active: #000000;
400
+ --dsn-color-action-1-color-subtle: #000000;
401
+ --dsn-color-action-1-color-document: #000000;
402
+ --dsn-color-action-2-bg-document: #ffffff;
403
+ --dsn-color-action-2-bg-elevated: #ffffff;
404
+ --dsn-color-action-2-bg-subtle: #ffffff;
405
+ --dsn-color-action-2-bg-default: #ffffff;
406
+ --dsn-color-action-2-bg-hover: #ffffff;
407
+ --dsn-color-action-2-bg-active: #ffffff;
408
+ --dsn-color-action-2-border-subtle: #000000;
409
+ --dsn-color-action-2-border-default: #000000;
410
+ --dsn-color-action-2-border-hover: #000000;
411
+ --dsn-color-action-2-border-active: #000000;
412
+ --dsn-color-action-2-color-default: #000000;
413
+ --dsn-color-action-2-color-hover: #000000;
414
+ --dsn-color-action-2-color-active: #000000;
415
+ --dsn-color-action-2-color-subtle: #000000;
416
+ --dsn-color-action-2-color-document: #000000;
417
+ --dsn-color-positive-bg-document: #ffffff;
418
+ --dsn-color-positive-bg-elevated: #ffffff;
419
+ --dsn-color-positive-bg-subtle: #ffffff;
420
+ --dsn-color-positive-bg-default: #ffffff;
421
+ --dsn-color-positive-bg-hover: #ffffff;
422
+ --dsn-color-positive-bg-active: #ffffff;
423
+ --dsn-color-positive-border-subtle: #000000;
424
+ --dsn-color-positive-border-default: #000000;
425
+ --dsn-color-positive-border-hover: #000000;
426
+ --dsn-color-positive-border-active: #000000;
427
+ --dsn-color-positive-color-default: #000000;
428
+ --dsn-color-positive-color-hover: #000000;
429
+ --dsn-color-positive-color-active: #000000;
430
+ --dsn-color-positive-color-subtle: #000000;
431
+ --dsn-color-positive-color-document: #000000;
432
+ --dsn-color-negative-bg-document: #ffffff;
433
+ --dsn-color-negative-bg-elevated: #ffffff;
434
+ --dsn-color-negative-bg-subtle: #ffffff;
435
+ --dsn-color-negative-bg-default: #ffffff;
436
+ --dsn-color-negative-bg-hover: #ffffff;
437
+ --dsn-color-negative-bg-active: #ffffff;
438
+ --dsn-color-negative-border-subtle: #000000;
439
+ --dsn-color-negative-border-default: #000000;
440
+ --dsn-color-negative-border-hover: #000000;
441
+ --dsn-color-negative-border-active: #000000;
442
+ --dsn-color-negative-color-default: #000000;
443
+ --dsn-color-negative-color-hover: #000000;
444
+ --dsn-color-negative-color-active: #000000;
445
+ --dsn-color-negative-color-subtle: #000000;
446
+ --dsn-color-negative-color-document: #000000;
447
+ --dsn-color-warning-bg-document: #ffffff;
448
+ --dsn-color-warning-bg-elevated: #ffffff;
449
+ --dsn-color-warning-bg-subtle: #ffffff;
450
+ --dsn-color-warning-bg-default: #ffffff;
451
+ --dsn-color-warning-bg-hover: #ffffff;
452
+ --dsn-color-warning-bg-active: #ffffff;
453
+ --dsn-color-warning-border-subtle: #000000;
454
+ --dsn-color-warning-border-default: #000000;
455
+ --dsn-color-warning-border-hover: #000000;
456
+ --dsn-color-warning-border-active: #000000;
457
+ --dsn-color-warning-color-default: #000000;
458
+ --dsn-color-warning-color-hover: #000000;
459
+ --dsn-color-warning-color-active: #000000;
460
+ --dsn-color-warning-color-subtle: #000000;
461
+ --dsn-color-warning-color-document: #000000;
462
+ --dsn-color-info-bg-document: #ffffff;
463
+ --dsn-color-info-bg-elevated: #ffffff;
464
+ --dsn-color-info-bg-subtle: #ffffff;
465
+ --dsn-color-info-bg-default: #ffffff;
466
+ --dsn-color-info-bg-hover: #ffffff;
467
+ --dsn-color-info-bg-active: #ffffff;
468
+ --dsn-color-info-border-subtle: #000000;
469
+ --dsn-color-info-border-default: #000000;
470
+ --dsn-color-info-border-hover: #000000;
471
+ --dsn-color-info-border-active: #000000;
472
+ --dsn-color-info-color-default: #000000;
473
+ --dsn-color-info-color-hover: #000000;
474
+ --dsn-color-info-color-active: #000000;
475
+ --dsn-color-info-color-subtle: #000000;
476
+ --dsn-color-info-color-document: #000000;
477
+ --dsn-color-neutral-inverse-bg-document: #000000;
478
+ --dsn-color-neutral-inverse-bg-elevated: #000000;
479
+ --dsn-color-neutral-inverse-bg-subtle: #000000;
480
+ --dsn-color-neutral-inverse-bg-default: #000000;
481
+ --dsn-color-neutral-inverse-bg-hover: #000000;
482
+ --dsn-color-neutral-inverse-bg-active: #000000;
483
+ --dsn-color-neutral-inverse-border-subtle: #000000;
484
+ --dsn-color-neutral-inverse-border-default: #000000;
485
+ --dsn-color-neutral-inverse-border-hover: #000000;
486
+ --dsn-color-neutral-inverse-border-active: #000000;
487
+ --dsn-color-neutral-inverse-color-default: #ffffff;
488
+ --dsn-color-neutral-inverse-color-hover: #ffffff;
489
+ --dsn-color-neutral-inverse-color-active: #ffffff;
490
+ --dsn-color-neutral-inverse-color-subtle: #ffffff;
491
+ --dsn-color-neutral-inverse-color-document: #ffffff;
492
+ --dsn-color-accent-1-inverse-bg-document: #000000;
493
+ --dsn-color-accent-1-inverse-bg-elevated: #000000;
494
+ --dsn-color-accent-1-inverse-bg-subtle: #000000;
495
+ --dsn-color-accent-1-inverse-bg-default: #000000;
496
+ --dsn-color-accent-1-inverse-bg-hover: #000000;
497
+ --dsn-color-accent-1-inverse-bg-active: #000000;
498
+ --dsn-color-accent-1-inverse-border-subtle: #000000;
499
+ --dsn-color-accent-1-inverse-border-default: #000000;
500
+ --dsn-color-accent-1-inverse-border-hover: #000000;
501
+ --dsn-color-accent-1-inverse-border-active: #000000;
502
+ --dsn-color-accent-1-inverse-color-default: #ffffff;
503
+ --dsn-color-accent-1-inverse-color-hover: #ffffff;
504
+ --dsn-color-accent-1-inverse-color-active: #ffffff;
505
+ --dsn-color-accent-1-inverse-color-subtle: #ffffff;
506
+ --dsn-color-accent-1-inverse-color-document: #ffffff;
507
+ --dsn-color-accent-2-inverse-bg-document: #000000;
508
+ --dsn-color-accent-2-inverse-bg-elevated: #000000;
509
+ --dsn-color-accent-2-inverse-bg-subtle: #000000;
510
+ --dsn-color-accent-2-inverse-bg-default: #000000;
511
+ --dsn-color-accent-2-inverse-bg-hover: #000000;
512
+ --dsn-color-accent-2-inverse-bg-active: #000000;
513
+ --dsn-color-accent-2-inverse-border-subtle: #000000;
514
+ --dsn-color-accent-2-inverse-border-default: #000000;
515
+ --dsn-color-accent-2-inverse-border-hover: #000000;
516
+ --dsn-color-accent-2-inverse-border-active: #000000;
517
+ --dsn-color-accent-2-inverse-color-default: #ffffff;
518
+ --dsn-color-accent-2-inverse-color-hover: #ffffff;
519
+ --dsn-color-accent-2-inverse-color-active: #ffffff;
520
+ --dsn-color-accent-2-inverse-color-subtle: #ffffff;
521
+ --dsn-color-accent-2-inverse-color-document: #ffffff;
522
+ --dsn-color-accent-3-inverse-bg-document: #000000;
523
+ --dsn-color-accent-3-inverse-bg-elevated: #000000;
524
+ --dsn-color-accent-3-inverse-bg-subtle: #000000;
525
+ --dsn-color-accent-3-inverse-bg-default: #000000;
526
+ --dsn-color-accent-3-inverse-bg-hover: #000000;
527
+ --dsn-color-accent-3-inverse-bg-active: #000000;
528
+ --dsn-color-accent-3-inverse-border-subtle: #000000;
529
+ --dsn-color-accent-3-inverse-border-default: #000000;
530
+ --dsn-color-accent-3-inverse-border-hover: #000000;
531
+ --dsn-color-accent-3-inverse-border-active: #000000;
532
+ --dsn-color-accent-3-inverse-color-default: #ffffff;
533
+ --dsn-color-accent-3-inverse-color-hover: #ffffff;
534
+ --dsn-color-accent-3-inverse-color-active: #ffffff;
535
+ --dsn-color-accent-3-inverse-color-subtle: #ffffff;
536
+ --dsn-color-accent-3-inverse-color-document: #ffffff;
537
+ --dsn-color-action-1-inverse-bg-document: #000000;
538
+ --dsn-color-action-1-inverse-bg-elevated: #000000;
539
+ --dsn-color-action-1-inverse-bg-subtle: #000000;
540
+ --dsn-color-action-1-inverse-bg-default: #000000;
541
+ --dsn-color-action-1-inverse-bg-hover: #000000;
542
+ --dsn-color-action-1-inverse-bg-active: #000000;
543
+ --dsn-color-action-1-inverse-border-subtle: #000000;
544
+ --dsn-color-action-1-inverse-border-default: #000000;
545
+ --dsn-color-action-1-inverse-border-hover: #000000;
546
+ --dsn-color-action-1-inverse-border-active: #000000;
547
+ --dsn-color-action-1-inverse-color-default: #ffffff;
548
+ --dsn-color-action-1-inverse-color-hover: #ffffff;
549
+ --dsn-color-action-1-inverse-color-active: #ffffff;
550
+ --dsn-color-action-1-inverse-color-subtle: #ffffff;
551
+ --dsn-color-action-1-inverse-color-document: #ffffff;
552
+ --dsn-color-action-2-inverse-bg-document: #000000;
553
+ --dsn-color-action-2-inverse-bg-elevated: #000000;
554
+ --dsn-color-action-2-inverse-bg-subtle: #000000;
555
+ --dsn-color-action-2-inverse-bg-default: #000000;
556
+ --dsn-color-action-2-inverse-bg-hover: #000000;
557
+ --dsn-color-action-2-inverse-bg-active: #000000;
558
+ --dsn-color-action-2-inverse-border-subtle: #000000;
559
+ --dsn-color-action-2-inverse-border-default: #000000;
560
+ --dsn-color-action-2-inverse-border-hover: #000000;
561
+ --dsn-color-action-2-inverse-border-active: #000000;
562
+ --dsn-color-action-2-inverse-color-default: #ffffff;
563
+ --dsn-color-action-2-inverse-color-hover: #ffffff;
564
+ --dsn-color-action-2-inverse-color-active: #ffffff;
565
+ --dsn-color-action-2-inverse-color-subtle: #ffffff;
566
+ --dsn-color-action-2-inverse-color-document: #ffffff;
567
+ --dsn-color-positive-inverse-bg-document: #000000;
568
+ --dsn-color-positive-inverse-bg-elevated: #000000;
569
+ --dsn-color-positive-inverse-bg-subtle: #000000;
570
+ --dsn-color-positive-inverse-bg-default: #000000;
571
+ --dsn-color-positive-inverse-bg-hover: #000000;
572
+ --dsn-color-positive-inverse-bg-active: #000000;
573
+ --dsn-color-positive-inverse-border-subtle: #000000;
574
+ --dsn-color-positive-inverse-border-default: #000000;
575
+ --dsn-color-positive-inverse-border-hover: #000000;
576
+ --dsn-color-positive-inverse-border-active: #000000;
577
+ --dsn-color-positive-inverse-color-default: #ffffff;
578
+ --dsn-color-positive-inverse-color-hover: #ffffff;
579
+ --dsn-color-positive-inverse-color-active: #ffffff;
580
+ --dsn-color-positive-inverse-color-subtle: #ffffff;
581
+ --dsn-color-positive-inverse-color-document: #ffffff;
582
+ --dsn-color-negative-inverse-bg-document: #000000;
583
+ --dsn-color-negative-inverse-bg-elevated: #000000;
584
+ --dsn-color-negative-inverse-bg-subtle: #000000;
585
+ --dsn-color-negative-inverse-bg-default: #000000;
586
+ --dsn-color-negative-inverse-bg-hover: #000000;
587
+ --dsn-color-negative-inverse-bg-active: #000000;
588
+ --dsn-color-negative-inverse-border-subtle: #000000;
589
+ --dsn-color-negative-inverse-border-default: #000000;
590
+ --dsn-color-negative-inverse-border-hover: #000000;
591
+ --dsn-color-negative-inverse-border-active: #000000;
592
+ --dsn-color-negative-inverse-color-default: #ffffff;
593
+ --dsn-color-negative-inverse-color-hover: #ffffff;
594
+ --dsn-color-negative-inverse-color-active: #ffffff;
595
+ --dsn-color-negative-inverse-color-subtle: #ffffff;
596
+ --dsn-color-negative-inverse-color-document: #ffffff;
597
+ --dsn-color-warning-inverse-bg-document: #000000;
598
+ --dsn-color-warning-inverse-bg-elevated: #000000;
599
+ --dsn-color-warning-inverse-bg-subtle: #000000;
600
+ --dsn-color-warning-inverse-bg-default: #000000;
601
+ --dsn-color-warning-inverse-bg-hover: #000000;
602
+ --dsn-color-warning-inverse-bg-active: #000000;
603
+ --dsn-color-warning-inverse-border-subtle: #000000;
604
+ --dsn-color-warning-inverse-border-default: #000000;
605
+ --dsn-color-warning-inverse-border-hover: #000000;
606
+ --dsn-color-warning-inverse-border-active: #000000;
607
+ --dsn-color-warning-inverse-color-default: #ffffff;
608
+ --dsn-color-warning-inverse-color-hover: #ffffff;
609
+ --dsn-color-warning-inverse-color-active: #ffffff;
610
+ --dsn-color-warning-inverse-color-subtle: #ffffff;
611
+ --dsn-color-warning-inverse-color-document: #ffffff;
612
+ --dsn-color-info-inverse-bg-document: #000000;
613
+ --dsn-color-info-inverse-bg-elevated: #000000;
614
+ --dsn-color-info-inverse-bg-subtle: #000000;
615
+ --dsn-color-info-inverse-bg-default: #000000;
616
+ --dsn-color-info-inverse-bg-hover: #000000;
617
+ --dsn-color-info-inverse-bg-active: #000000;
618
+ --dsn-color-info-inverse-border-subtle: #000000;
619
+ --dsn-color-info-inverse-border-default: #000000;
620
+ --dsn-color-info-inverse-border-hover: #000000;
621
+ --dsn-color-info-inverse-border-active: #000000;
622
+ --dsn-color-info-inverse-color-default: #ffffff;
623
+ --dsn-color-info-inverse-color-hover: #ffffff;
624
+ --dsn-color-info-inverse-color-active: #ffffff;
625
+ --dsn-color-info-inverse-color-subtle: #ffffff;
626
+ --dsn-color-info-inverse-color-document: #ffffff;
627
+ --dsn-color-transparent: rgba(0, 0, 0, 0);
628
+ --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
629
+ --dsn-hero-background-color-default: #ffffff;
630
+ --dsn-hero-background-color-inverse: #000000;
631
+ --dsn-hero-color-default: #000000;
632
+ --dsn-hero-color-inverse: #ffffff;
633
+ --dsn-hero-image-blend-color: #000000;
634
+ }
635
+
636
+
1
637
  /**
2
638
  * Hero Component
3
639
  * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
@@ -26,6 +662,10 @@
26
662
 
27
663
  .dsn-hero {
28
664
  margin-inline: calc(50% - 50vw);
665
+ border-block-start: var(--dsn-hero-border-block-width) solid
666
+ var(--dsn-color-transparent);
667
+ border-block-end: var(--dsn-hero-border-block-width) solid
668
+ var(--dsn-color-transparent);
29
669
  min-block-size: max(
30
670
  var(--dsn-hero-min-block-size),
31
671
  var(--dsn-hero-block-size)
@@ -95,6 +735,7 @@
95
735
  color: var(--dsn-hero-color-inverse);
96
736
 
97
737
  /* Tekst-componenten */
738
+ --dsn-pre-heading-color: var(--dsn-hero-color-inverse);
98
739
  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
99
740
  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
100
741
  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
@@ -142,6 +783,7 @@
142
783
  color: var(--dsn-hero-color-inverse);
143
784
 
144
785
  /* Tekst-componenten */
786
+ --dsn-pre-heading-color: var(--dsn-hero-color-inverse);
145
787
  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
146
788
  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
147
789
  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);