@dsn-starter-kit/components-react 1.0.2 → 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.
- package/README.md +1 -1
- package/dist/ActionGroup/ActionGroup.css +58 -26
- package/dist/ActionGroup/ActionGroup.d.ts +10 -2
- package/dist/ActionGroup/ActionGroup.d.ts.map +1 -1
- package/dist/ActionGroup/ActionGroup.js +20 -2
- package/dist/ActionGroup/ActionGroup.js.map +1 -1
- package/dist/Alert/Alert.css +25 -11
- package/dist/Alert/Alert.d.ts +14 -0
- package/dist/Alert/Alert.d.ts.map +1 -1
- package/dist/Alert/Alert.js +14 -2
- package/dist/Alert/Alert.js.map +1 -1
- package/dist/Grid/Grid.css +2 -2
- package/dist/Hero/Hero.css +638 -0
- package/dist/Note/Note.css +22 -14
- package/dist/Note/Note.d.ts +18 -3
- package/dist/Note/Note.d.ts.map +1 -1
- package/dist/Note/Note.js +18 -5
- package/dist/Note/Note.js.map +1 -1
- package/dist/PageBody/PageBody.css +30 -0
- package/dist/PageFooter/PageFooter.css +0 -1
- package/dist/SkipLink/SkipLink.d.ts +1 -1
- package/dist/SkipLink/SkipLink.js +1 -1
- package/dist/TableOfContents/TableOfContents.css +75 -0
- package/dist/TableOfContents/TableOfContents.d.ts +61 -0
- package/dist/TableOfContents/TableOfContents.d.ts.map +1 -0
- package/dist/TableOfContents/TableOfContents.js +32 -0
- package/dist/TableOfContents/TableOfContents.js.map +1 -0
- package/dist/TableOfContents/index.d.ts +3 -0
- package/dist/TableOfContents/index.d.ts.map +1 -0
- package/dist/TableOfContents/index.js +2 -0
- package/dist/TableOfContents/index.js.map +1 -0
- package/dist/index.css +851 -54
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.css
CHANGED
|
@@ -1,35 +1,55 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* ActionGroup Component
|
|
3
3
|
* Groups related actions (Buttons and Links) and manages their layout.
|
|
4
|
+
* Renders as a <ul> with each action in a <li>, with an aria-label
|
|
5
|
+
* describing the group — screenreaders announce the item count and the
|
|
6
|
+
* group's purpose (see issue #295).
|
|
4
7
|
*
|
|
5
8
|
* Usage:
|
|
6
9
|
* <!-- Horizontal (default) — wraps automatically when viewport is too narrow -->
|
|
7
|
-
* <
|
|
8
|
-
* <
|
|
9
|
-
* <
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
10
|
+
* <ul class="dsn-action-group" aria-label="Acties">
|
|
11
|
+
* <li class="dsn-action-group__item">
|
|
12
|
+
* <button class="dsn-button dsn-button--strong dsn-button--size-default">
|
|
13
|
+
* <span class="dsn-button__label">Opslaan</span>
|
|
14
|
+
* </button>
|
|
15
|
+
* </li>
|
|
16
|
+
* <li class="dsn-action-group__item">
|
|
17
|
+
* <button class="dsn-button dsn-button--subtle dsn-button--size-default">
|
|
18
|
+
* <span class="dsn-button__label">Annuleren</span>
|
|
19
|
+
* </button>
|
|
20
|
+
* </li>
|
|
21
|
+
* </ul>
|
|
15
22
|
*
|
|
16
23
|
* <!-- Horizontal with Link as soft exit -->
|
|
17
|
-
* <
|
|
18
|
-
* <
|
|
19
|
-
* <
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
24
|
+
* <ul class="dsn-action-group" aria-label="Acties">
|
|
25
|
+
* <li class="dsn-action-group__item">
|
|
26
|
+
* <button class="dsn-button dsn-button--strong dsn-button--size-default">
|
|
27
|
+
* <span class="dsn-button__label">Volgende stap</span>
|
|
28
|
+
* </button>
|
|
29
|
+
* </li>
|
|
30
|
+
* <li class="dsn-action-group__item">
|
|
31
|
+
* <a class="dsn-link" href="/">Terug naar overzicht</a>
|
|
32
|
+
* </li>
|
|
33
|
+
* </ul>
|
|
23
34
|
*
|
|
24
35
|
* <!-- Vertical -->
|
|
25
|
-
* <
|
|
26
|
-
* <
|
|
27
|
-
* <
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
36
|
+
* <ul class="dsn-action-group dsn-action-group--vertical" aria-label="Acties">
|
|
37
|
+
* <li class="dsn-action-group__item">
|
|
38
|
+
* <button class="dsn-button dsn-button--strong dsn-button--size-default">
|
|
39
|
+
* <span class="dsn-button__label">Primaire actie</span>
|
|
40
|
+
* </button>
|
|
41
|
+
* </li>
|
|
42
|
+
* <li class="dsn-action-group__item">
|
|
43
|
+
* <button class="dsn-button dsn-button--subtle dsn-button--size-default">
|
|
44
|
+
* <span class="dsn-button__label">Secundaire actie</span>
|
|
45
|
+
* </button>
|
|
46
|
+
* </li>
|
|
47
|
+
* </ul>
|
|
48
|
+
*
|
|
49
|
+
* <!-- Aangepast aria-label -->
|
|
50
|
+
* <ul class="dsn-action-group" aria-label="Formulierknoppen">
|
|
51
|
+
* ...
|
|
52
|
+
* </ul>
|
|
33
53
|
*/
|
|
34
54
|
|
|
35
55
|
/* ===========================
|
|
@@ -40,15 +60,27 @@
|
|
|
40
60
|
flex-direction: row;
|
|
41
61
|
flex-wrap: wrap;
|
|
42
62
|
align-items: center;
|
|
63
|
+
list-style: none;
|
|
64
|
+
margin: 0;
|
|
65
|
+
padding: 0;
|
|
43
66
|
column-gap: var(--dsn-action-group-column-gap);
|
|
44
67
|
row-gap: var(--dsn-action-group-row-gap);
|
|
45
68
|
}
|
|
46
69
|
|
|
70
|
+
/* ===========================
|
|
71
|
+
Item — wraps each Button/Link
|
|
72
|
+
=========================== */
|
|
73
|
+
.dsn-action-group__item {
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
47
78
|
/* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
|
|
48
|
-
in verticale contexten —
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
.dsn-action-
|
|
79
|
+
in verticale contexten — align-self op het element zelf overschrijft de
|
|
80
|
+
align-items van het omringende dsn-action-group__item, dus resetten we dit
|
|
81
|
+
hier zodat ze verticaal centreren met de Button ernaast. */
|
|
82
|
+
.dsn-action-group__item > .dsn-link,
|
|
83
|
+
.dsn-action-group__item > .dsn-link-button {
|
|
52
84
|
align-self: center;
|
|
53
85
|
}
|
|
54
86
|
|
|
@@ -71,11 +103,19 @@
|
|
|
71
103
|
* Alert Component
|
|
72
104
|
* Important message that informs the user about the current activity or state.
|
|
73
105
|
*
|
|
106
|
+
* The icon is decorative (aria-hidden); a visually hidden variant label at the
|
|
107
|
+
* start of the heading announces the variant to screen reader users. Real text
|
|
108
|
+
* (not aria-label on the svg) so it gets translated by translation tools,
|
|
109
|
+
* works in braille and stays available when the icon is omitted.
|
|
110
|
+
* Default labels: "Informatie: " / "Succes: " / "Foutmelding: " / "Let op: ".
|
|
111
|
+
*
|
|
74
112
|
* Usage:
|
|
75
113
|
* <!-- Info variant (default), with icon -->
|
|
76
114
|
* <div class="dsn-alert" role="alert">
|
|
77
|
-
* <
|
|
78
|
-
*
|
|
115
|
+
* <span class="dsn-alert__icon" aria-hidden="true">
|
|
116
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
|
|
117
|
+
* </span>
|
|
118
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
|
|
79
119
|
* <div class="dsn-alert__content">
|
|
80
120
|
* <p>Body text or any content.</p>
|
|
81
121
|
* </div>
|
|
@@ -83,8 +123,10 @@
|
|
|
83
123
|
*
|
|
84
124
|
* <!-- Positive variant -->
|
|
85
125
|
* <div class="dsn-alert dsn-alert--positive" role="alert">
|
|
86
|
-
* <
|
|
87
|
-
*
|
|
126
|
+
* <span class="dsn-alert__icon" aria-hidden="true">
|
|
127
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- circle-check --></svg>
|
|
128
|
+
* </span>
|
|
129
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Succes: </span>Gelukt</h2>
|
|
88
130
|
* <div class="dsn-alert__content">
|
|
89
131
|
* <p>Uw aanvraag is succesvol ingediend.</p>
|
|
90
132
|
* </div>
|
|
@@ -92,8 +134,10 @@
|
|
|
92
134
|
*
|
|
93
135
|
* <!-- Negative variant -->
|
|
94
136
|
* <div class="dsn-alert dsn-alert--negative" role="alert">
|
|
95
|
-
* <
|
|
96
|
-
*
|
|
137
|
+
* <span class="dsn-alert__icon" aria-hidden="true">
|
|
138
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- exclamation-circle --></svg>
|
|
139
|
+
* </span>
|
|
140
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Foutmelding: </span>Er is een fout opgetreden</h2>
|
|
97
141
|
* <div class="dsn-alert__content">
|
|
98
142
|
* <p>Controleer uw gegevens en probeer het opnieuw.</p>
|
|
99
143
|
* </div>
|
|
@@ -101,16 +145,18 @@
|
|
|
101
145
|
*
|
|
102
146
|
* <!-- Warning variant -->
|
|
103
147
|
* <div class="dsn-alert dsn-alert--warning" role="alert">
|
|
104
|
-
* <
|
|
105
|
-
*
|
|
148
|
+
* <span class="dsn-alert__icon" aria-hidden="true">
|
|
149
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
|
|
150
|
+
* </span>
|
|
151
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Let op: </span>Uw sessie verloopt binnenkort</h2>
|
|
106
152
|
* <div class="dsn-alert__content">
|
|
107
|
-
* <p>
|
|
153
|
+
* <p>Sla uw werk op om gegevensverlies te voorkomen.</p>
|
|
108
154
|
* </div>
|
|
109
155
|
* </div>
|
|
110
156
|
*
|
|
111
|
-
* <!-- Without icon -->
|
|
157
|
+
* <!-- Without icon: keep the visually hidden variant label -->
|
|
112
158
|
* <div class="dsn-alert dsn-alert--no-icon" role="alert">
|
|
113
|
-
* <
|
|
159
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
|
|
114
160
|
* <div class="dsn-alert__content">
|
|
115
161
|
* <p>Body text without an icon.</p>
|
|
116
162
|
* </div>
|
|
@@ -2560,7 +2606,7 @@ fieldset.dsn-form-field--invalid {
|
|
|
2560
2606
|
grid-template-columns: repeat(12, 1fr);
|
|
2561
2607
|
column-gap: var(--dsn-grid-gutter);
|
|
2562
2608
|
row-gap: var(--dsn-grid-row-gap);
|
|
2563
|
-
padding-inline: var(--dsn-grid-
|
|
2609
|
+
padding-inline: var(--dsn-grid-padding-inline);
|
|
2564
2610
|
}
|
|
2565
2611
|
|
|
2566
2612
|
/* Max-width variant — gecentreerd met margin-inline: auto */
|
|
@@ -2583,7 +2629,7 @@ fieldset.dsn-form-field--invalid {
|
|
|
2583
2629
|
|
|
2584
2630
|
.dsn-full-bleed {
|
|
2585
2631
|
grid-column: 1 / -1;
|
|
2586
|
-
margin-inline: calc(-1 * var(--dsn-grid-
|
|
2632
|
+
margin-inline: calc(-1 * var(--dsn-grid-padding-inline));
|
|
2587
2633
|
}
|
|
2588
2634
|
|
|
2589
2635
|
/* ============================================================
|
|
@@ -3174,6 +3220,642 @@ fieldset.dsn-form-field--invalid {
|
|
|
3174
3220
|
}
|
|
3175
3221
|
|
|
3176
3222
|
|
|
3223
|
+
/* Force light-mode kleurwaarden binnen image hero — voorkomt donkere tekst op foto.
|
|
3224
|
+
Per thema gescoopt (.dsn-theme-{name} .dsn-hero--image); gegenereerd door token-build. */
|
|
3225
|
+
/**
|
|
3226
|
+
* Do not edit directly
|
|
3227
|
+
* Generated on Sun, 12 Jul 2026 08:06:04 GMT
|
|
3228
|
+
*/
|
|
3229
|
+
|
|
3230
|
+
.dsn-theme-start .dsn-hero--image {
|
|
3231
|
+
--dsn-color-neutral-bg-document: #fcfcfc;
|
|
3232
|
+
--dsn-color-neutral-bg-elevated: #fcfcfc;
|
|
3233
|
+
--dsn-color-neutral-bg-subtle: #f6f6f6;
|
|
3234
|
+
--dsn-color-neutral-bg-default: #f1f1f1;
|
|
3235
|
+
--dsn-color-neutral-bg-hover: #ebebeb;
|
|
3236
|
+
--dsn-color-neutral-bg-active: #e5e5e5;
|
|
3237
|
+
--dsn-color-neutral-border-subtle: #c4c4c4;
|
|
3238
|
+
--dsn-color-neutral-border-default: #868686;
|
|
3239
|
+
--dsn-color-neutral-border-hover: #7c7c7c;
|
|
3240
|
+
--dsn-color-neutral-border-active: #727272;
|
|
3241
|
+
--dsn-color-neutral-color-default: #595959;
|
|
3242
|
+
--dsn-color-neutral-color-hover: #4b4b4b;
|
|
3243
|
+
--dsn-color-neutral-color-active: #3e3e3e;
|
|
3244
|
+
--dsn-color-neutral-color-subtle: #636363;
|
|
3245
|
+
--dsn-color-neutral-color-document: #1b1b1b;
|
|
3246
|
+
--dsn-color-accent-1-bg-document: #fbfcfd;
|
|
3247
|
+
--dsn-color-accent-1-bg-elevated: #fbfcfd;
|
|
3248
|
+
--dsn-color-accent-1-bg-subtle: #f4f7fa;
|
|
3249
|
+
--dsn-color-accent-1-bg-default: #ecf1f7;
|
|
3250
|
+
--dsn-color-accent-1-bg-hover: #e4ecf4;
|
|
3251
|
+
--dsn-color-accent-1-bg-active: #dde6f1;
|
|
3252
|
+
--dsn-color-accent-1-border-subtle: #b0c6df;
|
|
3253
|
+
--dsn-color-accent-1-border-default: #5c89be;
|
|
3254
|
+
--dsn-color-accent-1-border-hover: #4e7fb8;
|
|
3255
|
+
--dsn-color-accent-1-border-active: #3f74b2;
|
|
3256
|
+
--dsn-color-accent-1-color-default: #1b59a4;
|
|
3257
|
+
--dsn-color-accent-1-color-hover: #04499a;
|
|
3258
|
+
--dsn-color-accent-1-color-active: #003b81;
|
|
3259
|
+
--dsn-color-accent-1-color-subtle: #2964aa;
|
|
3260
|
+
--dsn-color-accent-1-color-document: #001b3c;
|
|
3261
|
+
--dsn-color-accent-2-bg-document: #fbfcfd;
|
|
3262
|
+
--dsn-color-accent-2-bg-elevated: #fbfcfd;
|
|
3263
|
+
--dsn-color-accent-2-bg-subtle: #f4f7fa;
|
|
3264
|
+
--dsn-color-accent-2-bg-default: #ecf1f7;
|
|
3265
|
+
--dsn-color-accent-2-bg-hover: #e4ecf4;
|
|
3266
|
+
--dsn-color-accent-2-bg-active: #dde6f1;
|
|
3267
|
+
--dsn-color-accent-2-border-subtle: #b0c6df;
|
|
3268
|
+
--dsn-color-accent-2-border-default: #5c89be;
|
|
3269
|
+
--dsn-color-accent-2-border-hover: #4e7fb8;
|
|
3270
|
+
--dsn-color-accent-2-border-active: #3f74b2;
|
|
3271
|
+
--dsn-color-accent-2-color-default: #1b59a4;
|
|
3272
|
+
--dsn-color-accent-2-color-hover: #04499a;
|
|
3273
|
+
--dsn-color-accent-2-color-active: #003b81;
|
|
3274
|
+
--dsn-color-accent-2-color-subtle: #2964aa;
|
|
3275
|
+
--dsn-color-accent-2-color-document: #001b3c;
|
|
3276
|
+
--dsn-color-accent-3-bg-document: #fbfcfd;
|
|
3277
|
+
--dsn-color-accent-3-bg-elevated: #fbfcfd;
|
|
3278
|
+
--dsn-color-accent-3-bg-subtle: #f4f7fa;
|
|
3279
|
+
--dsn-color-accent-3-bg-default: #ecf1f7;
|
|
3280
|
+
--dsn-color-accent-3-bg-hover: #e4ecf4;
|
|
3281
|
+
--dsn-color-accent-3-bg-active: #dde6f1;
|
|
3282
|
+
--dsn-color-accent-3-border-subtle: #b0c6df;
|
|
3283
|
+
--dsn-color-accent-3-border-default: #5c89be;
|
|
3284
|
+
--dsn-color-accent-3-border-hover: #4e7fb8;
|
|
3285
|
+
--dsn-color-accent-3-border-active: #3f74b2;
|
|
3286
|
+
--dsn-color-accent-3-color-default: #1b59a4;
|
|
3287
|
+
--dsn-color-accent-3-color-hover: #04499a;
|
|
3288
|
+
--dsn-color-accent-3-color-active: #003b81;
|
|
3289
|
+
--dsn-color-accent-3-color-subtle: #2964aa;
|
|
3290
|
+
--dsn-color-accent-3-color-document: #001b3c;
|
|
3291
|
+
--dsn-color-action-1-bg-document: #fbfcfd;
|
|
3292
|
+
--dsn-color-action-1-bg-elevated: #fbfcfd;
|
|
3293
|
+
--dsn-color-action-1-bg-subtle: #f4f7fa;
|
|
3294
|
+
--dsn-color-action-1-bg-default: #ecf1f7;
|
|
3295
|
+
--dsn-color-action-1-bg-hover: #e4ecf4;
|
|
3296
|
+
--dsn-color-action-1-bg-active: #dde6f1;
|
|
3297
|
+
--dsn-color-action-1-border-subtle: #b0c6df;
|
|
3298
|
+
--dsn-color-action-1-border-default: #5c89be;
|
|
3299
|
+
--dsn-color-action-1-border-hover: #4e7fb8;
|
|
3300
|
+
--dsn-color-action-1-border-active: #3f74b2;
|
|
3301
|
+
--dsn-color-action-1-color-default: #1b59a4;
|
|
3302
|
+
--dsn-color-action-1-color-hover: #04499a;
|
|
3303
|
+
--dsn-color-action-1-color-active: #003b81;
|
|
3304
|
+
--dsn-color-action-1-color-subtle: #2964aa;
|
|
3305
|
+
--dsn-color-action-1-color-document: #001b3c;
|
|
3306
|
+
--dsn-color-action-2-bg-document: #fbfcfd;
|
|
3307
|
+
--dsn-color-action-2-bg-elevated: #fbfcfd;
|
|
3308
|
+
--dsn-color-action-2-bg-subtle: #f4f7fa;
|
|
3309
|
+
--dsn-color-action-2-bg-default: #ecf1f7;
|
|
3310
|
+
--dsn-color-action-2-bg-hover: #e4ecf4;
|
|
3311
|
+
--dsn-color-action-2-bg-active: #dde6f1;
|
|
3312
|
+
--dsn-color-action-2-border-subtle: #b0c6df;
|
|
3313
|
+
--dsn-color-action-2-border-default: #5c89be;
|
|
3314
|
+
--dsn-color-action-2-border-hover: #4e7fb8;
|
|
3315
|
+
--dsn-color-action-2-border-active: #3f74b2;
|
|
3316
|
+
--dsn-color-action-2-color-default: #1b59a4;
|
|
3317
|
+
--dsn-color-action-2-color-hover: #04499a;
|
|
3318
|
+
--dsn-color-action-2-color-active: #003b81;
|
|
3319
|
+
--dsn-color-action-2-color-subtle: #2964aa;
|
|
3320
|
+
--dsn-color-action-2-color-document: #001b3c;
|
|
3321
|
+
--dsn-color-info-bg-document: #fbfcfd;
|
|
3322
|
+
--dsn-color-info-bg-elevated: #fbfcfd;
|
|
3323
|
+
--dsn-color-info-bg-subtle: #f4f7fa;
|
|
3324
|
+
--dsn-color-info-bg-default: #ecf1f7;
|
|
3325
|
+
--dsn-color-info-bg-hover: #e4ecf4;
|
|
3326
|
+
--dsn-color-info-bg-active: #dde6f1;
|
|
3327
|
+
--dsn-color-info-border-subtle: #b0c6df;
|
|
3328
|
+
--dsn-color-info-border-default: #5c89be;
|
|
3329
|
+
--dsn-color-info-border-hover: #4e7fb8;
|
|
3330
|
+
--dsn-color-info-border-active: #3f74b2;
|
|
3331
|
+
--dsn-color-info-color-default: #1b59a4;
|
|
3332
|
+
--dsn-color-info-color-hover: #04499a;
|
|
3333
|
+
--dsn-color-info-color-active: #003b81;
|
|
3334
|
+
--dsn-color-info-color-subtle: #2964aa;
|
|
3335
|
+
--dsn-color-info-color-document: #001b3c;
|
|
3336
|
+
--dsn-color-negative-bg-document: #fffbfb;
|
|
3337
|
+
--dsn-color-negative-bg-elevated: #fffbfb;
|
|
3338
|
+
--dsn-color-negative-bg-subtle: #fef4f4;
|
|
3339
|
+
--dsn-color-negative-bg-default: #feeded;
|
|
3340
|
+
--dsn-color-negative-bg-hover: #fde6e6;
|
|
3341
|
+
--dsn-color-negative-bg-active: #fddede;
|
|
3342
|
+
--dsn-color-negative-border-subtle: #f9b1b1;
|
|
3343
|
+
--dsn-color-negative-border-default: #f14848;
|
|
3344
|
+
--dsn-color-negative-border-hover: #ef2929;
|
|
3345
|
+
--dsn-color-negative-border-active: #e60000;
|
|
3346
|
+
--dsn-color-negative-color-default: #b70000;
|
|
3347
|
+
--dsn-color-negative-color-hover: #9c0000;
|
|
3348
|
+
--dsn-color-negative-color-active: #930000;
|
|
3349
|
+
--dsn-color-negative-color-subtle: #ca0000;
|
|
3350
|
+
--dsn-color-negative-color-document: #410000;
|
|
3351
|
+
--dsn-color-positive-bg-document: #fafdfb;
|
|
3352
|
+
--dsn-color-positive-bg-elevated: #fafdfb;
|
|
3353
|
+
--dsn-color-positive-bg-subtle: #eff9f3;
|
|
3354
|
+
--dsn-color-positive-bg-default: #e4f5ea;
|
|
3355
|
+
--dsn-color-positive-bg-hover: #d9f1e2;
|
|
3356
|
+
--dsn-color-positive-bg-active: #ceedd9;
|
|
3357
|
+
--dsn-color-positive-border-subtle: #8ad3a6;
|
|
3358
|
+
--dsn-color-positive-border-default: #009b3a;
|
|
3359
|
+
--dsn-color-positive-border-hover: #009036;
|
|
3360
|
+
--dsn-color-positive-border-active: #008432;
|
|
3361
|
+
--dsn-color-positive-color-default: #006827;
|
|
3362
|
+
--dsn-color-positive-color-hover: #005821;
|
|
3363
|
+
--dsn-color-positive-color-active: #00481b;
|
|
3364
|
+
--dsn-color-positive-color-subtle: #00732b;
|
|
3365
|
+
--dsn-color-positive-color-document: #00210c;
|
|
3366
|
+
--dsn-color-warning-bg-document: #fffcf8;
|
|
3367
|
+
--dsn-color-warning-bg-elevated: #fffcf8;
|
|
3368
|
+
--dsn-color-warning-bg-subtle: #fff5eb;
|
|
3369
|
+
--dsn-color-warning-bg-default: #ffeedd;
|
|
3370
|
+
--dsn-color-warning-bg-hover: #ffe7d0;
|
|
3371
|
+
--dsn-color-warning-bg-active: #ffe0c2;
|
|
3372
|
+
--dsn-color-warning-border-subtle: #ffb46b;
|
|
3373
|
+
--dsn-color-warning-border-default: #c8700e;
|
|
3374
|
+
--dsn-color-warning-border-hover: #b86810;
|
|
3375
|
+
--dsn-color-warning-border-active: #a96011;
|
|
3376
|
+
--dsn-color-warning-color-default: #844c12;
|
|
3377
|
+
--dsn-color-warning-color-hover: #6f4012;
|
|
3378
|
+
--dsn-color-warning-color-active: #5a3511;
|
|
3379
|
+
--dsn-color-warning-color-subtle: #935412;
|
|
3380
|
+
--dsn-color-warning-color-document: #27190a;
|
|
3381
|
+
--dsn-color-neutral-inverse-bg-document: #242424;
|
|
3382
|
+
--dsn-color-neutral-inverse-bg-elevated: #242424;
|
|
3383
|
+
--dsn-color-neutral-inverse-bg-subtle: #1b1b1b;
|
|
3384
|
+
--dsn-color-neutral-inverse-bg-default: #595959;
|
|
3385
|
+
--dsn-color-neutral-inverse-bg-hover: #4b4b4b;
|
|
3386
|
+
--dsn-color-neutral-inverse-bg-active: #3e3e3e;
|
|
3387
|
+
--dsn-color-neutral-inverse-border-subtle: #474747;
|
|
3388
|
+
--dsn-color-neutral-inverse-border-default: #c9c9c9;
|
|
3389
|
+
--dsn-color-neutral-inverse-border-hover: #d4d4d4;
|
|
3390
|
+
--dsn-color-neutral-inverse-border-active: #dfdfdf;
|
|
3391
|
+
--dsn-color-neutral-inverse-color-default: #ffffff;
|
|
3392
|
+
--dsn-color-neutral-inverse-color-hover: #ffffff;
|
|
3393
|
+
--dsn-color-neutral-inverse-color-active: #ffffff;
|
|
3394
|
+
--dsn-color-neutral-inverse-color-subtle: #c4c4c4;
|
|
3395
|
+
--dsn-color-neutral-inverse-color-document: #ffffff;
|
|
3396
|
+
--dsn-color-accent-1-inverse-bg-document: #00234d;
|
|
3397
|
+
--dsn-color-accent-1-inverse-bg-elevated: #00234d;
|
|
3398
|
+
--dsn-color-accent-1-inverse-bg-subtle: #001b3c;
|
|
3399
|
+
--dsn-color-accent-1-inverse-bg-default: #1b59a4;
|
|
3400
|
+
--dsn-color-accent-1-inverse-bg-hover: #04499a;
|
|
3401
|
+
--dsn-color-accent-1-inverse-bg-active: #003b81;
|
|
3402
|
+
--dsn-color-accent-1-inverse-border-subtle: #004494;
|
|
3403
|
+
--dsn-color-accent-1-inverse-border-default: #b8cbe2;
|
|
3404
|
+
--dsn-color-accent-1-inverse-border-hover: #c6d6e8;
|
|
3405
|
+
--dsn-color-accent-1-inverse-border-active: #d5e1ee;
|
|
3406
|
+
--dsn-color-accent-1-inverse-color-default: #ffffff;
|
|
3407
|
+
--dsn-color-accent-1-inverse-color-hover: #ffffff;
|
|
3408
|
+
--dsn-color-accent-1-inverse-color-active: #ffffff;
|
|
3409
|
+
--dsn-color-accent-1-inverse-color-subtle: #b0c6df;
|
|
3410
|
+
--dsn-color-accent-1-inverse-color-document: #ffffff;
|
|
3411
|
+
--dsn-color-accent-2-inverse-bg-document: #00234d;
|
|
3412
|
+
--dsn-color-accent-2-inverse-bg-elevated: #00234d;
|
|
3413
|
+
--dsn-color-accent-2-inverse-bg-subtle: #001b3c;
|
|
3414
|
+
--dsn-color-accent-2-inverse-bg-default: #1b59a4;
|
|
3415
|
+
--dsn-color-accent-2-inverse-bg-hover: #04499a;
|
|
3416
|
+
--dsn-color-accent-2-inverse-bg-active: #003b81;
|
|
3417
|
+
--dsn-color-accent-2-inverse-border-subtle: #004494;
|
|
3418
|
+
--dsn-color-accent-2-inverse-border-default: #b8cbe2;
|
|
3419
|
+
--dsn-color-accent-2-inverse-border-hover: #c6d6e8;
|
|
3420
|
+
--dsn-color-accent-2-inverse-border-active: #d5e1ee;
|
|
3421
|
+
--dsn-color-accent-2-inverse-color-default: #ffffff;
|
|
3422
|
+
--dsn-color-accent-2-inverse-color-hover: #ffffff;
|
|
3423
|
+
--dsn-color-accent-2-inverse-color-active: #ffffff;
|
|
3424
|
+
--dsn-color-accent-2-inverse-color-subtle: #b0c6df;
|
|
3425
|
+
--dsn-color-accent-2-inverse-color-document: #ffffff;
|
|
3426
|
+
--dsn-color-accent-3-inverse-bg-document: #00234d;
|
|
3427
|
+
--dsn-color-accent-3-inverse-bg-elevated: #00234d;
|
|
3428
|
+
--dsn-color-accent-3-inverse-bg-subtle: #001b3c;
|
|
3429
|
+
--dsn-color-accent-3-inverse-bg-default: #1b59a4;
|
|
3430
|
+
--dsn-color-accent-3-inverse-bg-hover: #04499a;
|
|
3431
|
+
--dsn-color-accent-3-inverse-bg-active: #003b81;
|
|
3432
|
+
--dsn-color-accent-3-inverse-border-subtle: #004494;
|
|
3433
|
+
--dsn-color-accent-3-inverse-border-default: #b8cbe2;
|
|
3434
|
+
--dsn-color-accent-3-inverse-border-hover: #c6d6e8;
|
|
3435
|
+
--dsn-color-accent-3-inverse-border-active: #d5e1ee;
|
|
3436
|
+
--dsn-color-accent-3-inverse-color-default: #ffffff;
|
|
3437
|
+
--dsn-color-accent-3-inverse-color-hover: #ffffff;
|
|
3438
|
+
--dsn-color-accent-3-inverse-color-active: #ffffff;
|
|
3439
|
+
--dsn-color-accent-3-inverse-color-subtle: #b0c6df;
|
|
3440
|
+
--dsn-color-accent-3-inverse-color-document: #ffffff;
|
|
3441
|
+
--dsn-color-action-1-inverse-bg-document: #00234d;
|
|
3442
|
+
--dsn-color-action-1-inverse-bg-elevated: #00234d;
|
|
3443
|
+
--dsn-color-action-1-inverse-bg-subtle: #001b3c;
|
|
3444
|
+
--dsn-color-action-1-inverse-bg-default: #1b59a4;
|
|
3445
|
+
--dsn-color-action-1-inverse-bg-hover: #04499a;
|
|
3446
|
+
--dsn-color-action-1-inverse-bg-active: #003b81;
|
|
3447
|
+
--dsn-color-action-1-inverse-border-subtle: #004494;
|
|
3448
|
+
--dsn-color-action-1-inverse-border-default: #b8cbe2;
|
|
3449
|
+
--dsn-color-action-1-inverse-border-hover: #c6d6e8;
|
|
3450
|
+
--dsn-color-action-1-inverse-border-active: #d5e1ee;
|
|
3451
|
+
--dsn-color-action-1-inverse-color-default: #ffffff;
|
|
3452
|
+
--dsn-color-action-1-inverse-color-hover: #ffffff;
|
|
3453
|
+
--dsn-color-action-1-inverse-color-active: #ffffff;
|
|
3454
|
+
--dsn-color-action-1-inverse-color-subtle: #b0c6df;
|
|
3455
|
+
--dsn-color-action-1-inverse-color-document: #ffffff;
|
|
3456
|
+
--dsn-color-action-2-inverse-bg-document: #00234d;
|
|
3457
|
+
--dsn-color-action-2-inverse-bg-elevated: #00234d;
|
|
3458
|
+
--dsn-color-action-2-inverse-bg-subtle: #001b3c;
|
|
3459
|
+
--dsn-color-action-2-inverse-bg-default: #1b59a4;
|
|
3460
|
+
--dsn-color-action-2-inverse-bg-hover: #04499a;
|
|
3461
|
+
--dsn-color-action-2-inverse-bg-active: #003b81;
|
|
3462
|
+
--dsn-color-action-2-inverse-border-subtle: #004494;
|
|
3463
|
+
--dsn-color-action-2-inverse-border-default: #b8cbe2;
|
|
3464
|
+
--dsn-color-action-2-inverse-border-hover: #c6d6e8;
|
|
3465
|
+
--dsn-color-action-2-inverse-border-active: #d5e1ee;
|
|
3466
|
+
--dsn-color-action-2-inverse-color-default: #ffffff;
|
|
3467
|
+
--dsn-color-action-2-inverse-color-hover: #ffffff;
|
|
3468
|
+
--dsn-color-action-2-inverse-color-active: #ffffff;
|
|
3469
|
+
--dsn-color-action-2-inverse-color-subtle: #b0c6df;
|
|
3470
|
+
--dsn-color-action-2-inverse-color-document: #ffffff;
|
|
3471
|
+
--dsn-color-info-inverse-bg-document: #00234d;
|
|
3472
|
+
--dsn-color-info-inverse-bg-elevated: #00234d;
|
|
3473
|
+
--dsn-color-info-inverse-bg-subtle: #001b3c;
|
|
3474
|
+
--dsn-color-info-inverse-bg-default: #1b59a4;
|
|
3475
|
+
--dsn-color-info-inverse-bg-hover: #04499a;
|
|
3476
|
+
--dsn-color-info-inverse-bg-active: #003b81;
|
|
3477
|
+
--dsn-color-info-inverse-border-subtle: #004494;
|
|
3478
|
+
--dsn-color-info-inverse-border-default: #b8cbe2;
|
|
3479
|
+
--dsn-color-info-inverse-border-hover: #c6d6e8;
|
|
3480
|
+
--dsn-color-info-inverse-border-active: #d5e1ee;
|
|
3481
|
+
--dsn-color-info-inverse-color-default: #ffffff;
|
|
3482
|
+
--dsn-color-info-inverse-color-hover: #ffffff;
|
|
3483
|
+
--dsn-color-info-inverse-color-active: #ffffff;
|
|
3484
|
+
--dsn-color-info-inverse-color-subtle: #b0c6df;
|
|
3485
|
+
--dsn-color-info-inverse-color-document: #ffffff;
|
|
3486
|
+
--dsn-color-negative-inverse-bg-document: #510000;
|
|
3487
|
+
--dsn-color-negative-inverse-bg-elevated: #510000;
|
|
3488
|
+
--dsn-color-negative-inverse-bg-subtle: #410000;
|
|
3489
|
+
--dsn-color-negative-inverse-bg-default: #b70000;
|
|
3490
|
+
--dsn-color-negative-inverse-bg-hover: #9c0000;
|
|
3491
|
+
--dsn-color-negative-inverse-bg-active: #820000;
|
|
3492
|
+
--dsn-color-negative-inverse-border-subtle: #930000;
|
|
3493
|
+
--dsn-color-negative-inverse-border-default: #fab9b9;
|
|
3494
|
+
--dsn-color-negative-inverse-border-hover: #fbc8c8;
|
|
3495
|
+
--dsn-color-negative-inverse-border-active: #fcd7d7;
|
|
3496
|
+
--dsn-color-negative-inverse-color-default: #ffffff;
|
|
3497
|
+
--dsn-color-negative-inverse-color-hover: #ffffff;
|
|
3498
|
+
--dsn-color-negative-inverse-color-active: #ffffff;
|
|
3499
|
+
--dsn-color-negative-inverse-color-subtle: #f9b1b1;
|
|
3500
|
+
--dsn-color-negative-inverse-color-document: #ffffff;
|
|
3501
|
+
--dsn-color-positive-inverse-bg-document: #002b10;
|
|
3502
|
+
--dsn-color-positive-inverse-bg-elevated: #002b10;
|
|
3503
|
+
--dsn-color-positive-inverse-bg-subtle: #00210c;
|
|
3504
|
+
--dsn-color-positive-inverse-bg-default: #006827;
|
|
3505
|
+
--dsn-color-positive-inverse-bg-hover: #005821;
|
|
3506
|
+
--dsn-color-positive-inverse-bg-active: #00481b;
|
|
3507
|
+
--dsn-color-positive-inverse-border-subtle: #00531f;
|
|
3508
|
+
--dsn-color-positive-inverse-border-default: #96d8ae;
|
|
3509
|
+
--dsn-color-positive-inverse-border-hover: #ace0c0;
|
|
3510
|
+
--dsn-color-positive-inverse-border-active: #c3e9d1;
|
|
3511
|
+
--dsn-color-positive-inverse-color-default: #ffffff;
|
|
3512
|
+
--dsn-color-positive-inverse-color-hover: #ffffff;
|
|
3513
|
+
--dsn-color-positive-inverse-color-active: #ffffff;
|
|
3514
|
+
--dsn-color-positive-inverse-color-subtle: #8ad3a6;
|
|
3515
|
+
--dsn-color-positive-inverse-color-document: #ffffff;
|
|
3516
|
+
--dsn-color-warning-inverse-bg-document: #331f0d;
|
|
3517
|
+
--dsn-color-warning-inverse-bg-elevated: #331f0d;
|
|
3518
|
+
--dsn-color-warning-inverse-bg-subtle: #27190a;
|
|
3519
|
+
--dsn-color-warning-inverse-bg-default: #844c12;
|
|
3520
|
+
--dsn-color-warning-inverse-bg-hover: #6f4012;
|
|
3521
|
+
--dsn-color-warning-inverse-bg-active: #5a3511;
|
|
3522
|
+
--dsn-color-warning-inverse-border-subtle: #683c12;
|
|
3523
|
+
--dsn-color-warning-inverse-border-default: #ffbc7a;
|
|
3524
|
+
--dsn-color-warning-inverse-border-hover: #ffcb98;
|
|
3525
|
+
--dsn-color-warning-inverse-border-active: #ffd9b4;
|
|
3526
|
+
--dsn-color-warning-inverse-color-default: #ffffff;
|
|
3527
|
+
--dsn-color-warning-inverse-color-hover: #ffffff;
|
|
3528
|
+
--dsn-color-warning-inverse-color-active: #ffffff;
|
|
3529
|
+
--dsn-color-warning-inverse-color-subtle: #ffb46b;
|
|
3530
|
+
--dsn-color-warning-inverse-color-document: #ffffff;
|
|
3531
|
+
--dsn-color-transparent: rgba(0, 0, 0, 0);
|
|
3532
|
+
--dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent);
|
|
3533
|
+
--dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent);
|
|
3534
|
+
--dsn-color-shadow-highlight: rgba(0, 0, 0, 0);
|
|
3535
|
+
--dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
|
|
3536
|
+
--dsn-hero-background-color-default: #ecf1f7;
|
|
3537
|
+
--dsn-hero-background-color-inverse: #1b59a4;
|
|
3538
|
+
--dsn-hero-color-default: #1b59a4;
|
|
3539
|
+
--dsn-hero-color-inverse: #ffffff;
|
|
3540
|
+
--dsn-hero-image-blend-color: #1b59a4;
|
|
3541
|
+
}
|
|
3542
|
+
|
|
3543
|
+
/**
|
|
3544
|
+
* Do not edit directly
|
|
3545
|
+
* Generated on Sun, 12 Jul 2026 08:06:05 GMT
|
|
3546
|
+
*/
|
|
3547
|
+
|
|
3548
|
+
.dsn-theme-wireframe .dsn-hero--image {
|
|
3549
|
+
--dsn-color-neutral-bg-document: #ffffff;
|
|
3550
|
+
--dsn-color-neutral-bg-elevated: #ffffff;
|
|
3551
|
+
--dsn-color-neutral-bg-subtle: #ffffff;
|
|
3552
|
+
--dsn-color-neutral-bg-default: #ffffff;
|
|
3553
|
+
--dsn-color-neutral-bg-hover: #ffffff;
|
|
3554
|
+
--dsn-color-neutral-bg-active: #ffffff;
|
|
3555
|
+
--dsn-color-neutral-border-subtle: #000000;
|
|
3556
|
+
--dsn-color-neutral-border-default: #000000;
|
|
3557
|
+
--dsn-color-neutral-border-hover: #000000;
|
|
3558
|
+
--dsn-color-neutral-border-active: #000000;
|
|
3559
|
+
--dsn-color-neutral-color-default: #000000;
|
|
3560
|
+
--dsn-color-neutral-color-hover: #000000;
|
|
3561
|
+
--dsn-color-neutral-color-active: #000000;
|
|
3562
|
+
--dsn-color-neutral-color-subtle: #000000;
|
|
3563
|
+
--dsn-color-neutral-color-document: #000000;
|
|
3564
|
+
--dsn-color-accent-1-bg-document: #ffffff;
|
|
3565
|
+
--dsn-color-accent-1-bg-elevated: #ffffff;
|
|
3566
|
+
--dsn-color-accent-1-bg-subtle: #ffffff;
|
|
3567
|
+
--dsn-color-accent-1-bg-default: #ffffff;
|
|
3568
|
+
--dsn-color-accent-1-bg-hover: #ffffff;
|
|
3569
|
+
--dsn-color-accent-1-bg-active: #ffffff;
|
|
3570
|
+
--dsn-color-accent-1-border-subtle: #000000;
|
|
3571
|
+
--dsn-color-accent-1-border-default: #000000;
|
|
3572
|
+
--dsn-color-accent-1-border-hover: #000000;
|
|
3573
|
+
--dsn-color-accent-1-border-active: #000000;
|
|
3574
|
+
--dsn-color-accent-1-color-default: #000000;
|
|
3575
|
+
--dsn-color-accent-1-color-hover: #000000;
|
|
3576
|
+
--dsn-color-accent-1-color-active: #000000;
|
|
3577
|
+
--dsn-color-accent-1-color-subtle: #000000;
|
|
3578
|
+
--dsn-color-accent-1-color-document: #000000;
|
|
3579
|
+
--dsn-color-accent-2-bg-document: #ffffff;
|
|
3580
|
+
--dsn-color-accent-2-bg-elevated: #ffffff;
|
|
3581
|
+
--dsn-color-accent-2-bg-subtle: #ffffff;
|
|
3582
|
+
--dsn-color-accent-2-bg-default: #ffffff;
|
|
3583
|
+
--dsn-color-accent-2-bg-hover: #ffffff;
|
|
3584
|
+
--dsn-color-accent-2-bg-active: #ffffff;
|
|
3585
|
+
--dsn-color-accent-2-border-subtle: #000000;
|
|
3586
|
+
--dsn-color-accent-2-border-default: #000000;
|
|
3587
|
+
--dsn-color-accent-2-border-hover: #000000;
|
|
3588
|
+
--dsn-color-accent-2-border-active: #000000;
|
|
3589
|
+
--dsn-color-accent-2-color-default: #000000;
|
|
3590
|
+
--dsn-color-accent-2-color-hover: #000000;
|
|
3591
|
+
--dsn-color-accent-2-color-active: #000000;
|
|
3592
|
+
--dsn-color-accent-2-color-subtle: #000000;
|
|
3593
|
+
--dsn-color-accent-2-color-document: #000000;
|
|
3594
|
+
--dsn-color-accent-3-bg-document: #ffffff;
|
|
3595
|
+
--dsn-color-accent-3-bg-elevated: #ffffff;
|
|
3596
|
+
--dsn-color-accent-3-bg-subtle: #ffffff;
|
|
3597
|
+
--dsn-color-accent-3-bg-default: #ffffff;
|
|
3598
|
+
--dsn-color-accent-3-bg-hover: #ffffff;
|
|
3599
|
+
--dsn-color-accent-3-bg-active: #ffffff;
|
|
3600
|
+
--dsn-color-accent-3-border-subtle: #000000;
|
|
3601
|
+
--dsn-color-accent-3-border-default: #000000;
|
|
3602
|
+
--dsn-color-accent-3-border-hover: #000000;
|
|
3603
|
+
--dsn-color-accent-3-border-active: #000000;
|
|
3604
|
+
--dsn-color-accent-3-color-default: #000000;
|
|
3605
|
+
--dsn-color-accent-3-color-hover: #000000;
|
|
3606
|
+
--dsn-color-accent-3-color-active: #000000;
|
|
3607
|
+
--dsn-color-accent-3-color-subtle: #000000;
|
|
3608
|
+
--dsn-color-accent-3-color-document: #000000;
|
|
3609
|
+
--dsn-color-action-1-bg-document: #ffffff;
|
|
3610
|
+
--dsn-color-action-1-bg-elevated: #ffffff;
|
|
3611
|
+
--dsn-color-action-1-bg-subtle: #ffffff;
|
|
3612
|
+
--dsn-color-action-1-bg-default: #ffffff;
|
|
3613
|
+
--dsn-color-action-1-bg-hover: #ffffff;
|
|
3614
|
+
--dsn-color-action-1-bg-active: #ffffff;
|
|
3615
|
+
--dsn-color-action-1-border-subtle: #000000;
|
|
3616
|
+
--dsn-color-action-1-border-default: #000000;
|
|
3617
|
+
--dsn-color-action-1-border-hover: #000000;
|
|
3618
|
+
--dsn-color-action-1-border-active: #000000;
|
|
3619
|
+
--dsn-color-action-1-color-default: #000000;
|
|
3620
|
+
--dsn-color-action-1-color-hover: #000000;
|
|
3621
|
+
--dsn-color-action-1-color-active: #000000;
|
|
3622
|
+
--dsn-color-action-1-color-subtle: #000000;
|
|
3623
|
+
--dsn-color-action-1-color-document: #000000;
|
|
3624
|
+
--dsn-color-action-2-bg-document: #ffffff;
|
|
3625
|
+
--dsn-color-action-2-bg-elevated: #ffffff;
|
|
3626
|
+
--dsn-color-action-2-bg-subtle: #ffffff;
|
|
3627
|
+
--dsn-color-action-2-bg-default: #ffffff;
|
|
3628
|
+
--dsn-color-action-2-bg-hover: #ffffff;
|
|
3629
|
+
--dsn-color-action-2-bg-active: #ffffff;
|
|
3630
|
+
--dsn-color-action-2-border-subtle: #000000;
|
|
3631
|
+
--dsn-color-action-2-border-default: #000000;
|
|
3632
|
+
--dsn-color-action-2-border-hover: #000000;
|
|
3633
|
+
--dsn-color-action-2-border-active: #000000;
|
|
3634
|
+
--dsn-color-action-2-color-default: #000000;
|
|
3635
|
+
--dsn-color-action-2-color-hover: #000000;
|
|
3636
|
+
--dsn-color-action-2-color-active: #000000;
|
|
3637
|
+
--dsn-color-action-2-color-subtle: #000000;
|
|
3638
|
+
--dsn-color-action-2-color-document: #000000;
|
|
3639
|
+
--dsn-color-positive-bg-document: #ffffff;
|
|
3640
|
+
--dsn-color-positive-bg-elevated: #ffffff;
|
|
3641
|
+
--dsn-color-positive-bg-subtle: #ffffff;
|
|
3642
|
+
--dsn-color-positive-bg-default: #ffffff;
|
|
3643
|
+
--dsn-color-positive-bg-hover: #ffffff;
|
|
3644
|
+
--dsn-color-positive-bg-active: #ffffff;
|
|
3645
|
+
--dsn-color-positive-border-subtle: #000000;
|
|
3646
|
+
--dsn-color-positive-border-default: #000000;
|
|
3647
|
+
--dsn-color-positive-border-hover: #000000;
|
|
3648
|
+
--dsn-color-positive-border-active: #000000;
|
|
3649
|
+
--dsn-color-positive-color-default: #000000;
|
|
3650
|
+
--dsn-color-positive-color-hover: #000000;
|
|
3651
|
+
--dsn-color-positive-color-active: #000000;
|
|
3652
|
+
--dsn-color-positive-color-subtle: #000000;
|
|
3653
|
+
--dsn-color-positive-color-document: #000000;
|
|
3654
|
+
--dsn-color-negative-bg-document: #ffffff;
|
|
3655
|
+
--dsn-color-negative-bg-elevated: #ffffff;
|
|
3656
|
+
--dsn-color-negative-bg-subtle: #ffffff;
|
|
3657
|
+
--dsn-color-negative-bg-default: #ffffff;
|
|
3658
|
+
--dsn-color-negative-bg-hover: #ffffff;
|
|
3659
|
+
--dsn-color-negative-bg-active: #ffffff;
|
|
3660
|
+
--dsn-color-negative-border-subtle: #000000;
|
|
3661
|
+
--dsn-color-negative-border-default: #000000;
|
|
3662
|
+
--dsn-color-negative-border-hover: #000000;
|
|
3663
|
+
--dsn-color-negative-border-active: #000000;
|
|
3664
|
+
--dsn-color-negative-color-default: #000000;
|
|
3665
|
+
--dsn-color-negative-color-hover: #000000;
|
|
3666
|
+
--dsn-color-negative-color-active: #000000;
|
|
3667
|
+
--dsn-color-negative-color-subtle: #000000;
|
|
3668
|
+
--dsn-color-negative-color-document: #000000;
|
|
3669
|
+
--dsn-color-warning-bg-document: #ffffff;
|
|
3670
|
+
--dsn-color-warning-bg-elevated: #ffffff;
|
|
3671
|
+
--dsn-color-warning-bg-subtle: #ffffff;
|
|
3672
|
+
--dsn-color-warning-bg-default: #ffffff;
|
|
3673
|
+
--dsn-color-warning-bg-hover: #ffffff;
|
|
3674
|
+
--dsn-color-warning-bg-active: #ffffff;
|
|
3675
|
+
--dsn-color-warning-border-subtle: #000000;
|
|
3676
|
+
--dsn-color-warning-border-default: #000000;
|
|
3677
|
+
--dsn-color-warning-border-hover: #000000;
|
|
3678
|
+
--dsn-color-warning-border-active: #000000;
|
|
3679
|
+
--dsn-color-warning-color-default: #000000;
|
|
3680
|
+
--dsn-color-warning-color-hover: #000000;
|
|
3681
|
+
--dsn-color-warning-color-active: #000000;
|
|
3682
|
+
--dsn-color-warning-color-subtle: #000000;
|
|
3683
|
+
--dsn-color-warning-color-document: #000000;
|
|
3684
|
+
--dsn-color-info-bg-document: #ffffff;
|
|
3685
|
+
--dsn-color-info-bg-elevated: #ffffff;
|
|
3686
|
+
--dsn-color-info-bg-subtle: #ffffff;
|
|
3687
|
+
--dsn-color-info-bg-default: #ffffff;
|
|
3688
|
+
--dsn-color-info-bg-hover: #ffffff;
|
|
3689
|
+
--dsn-color-info-bg-active: #ffffff;
|
|
3690
|
+
--dsn-color-info-border-subtle: #000000;
|
|
3691
|
+
--dsn-color-info-border-default: #000000;
|
|
3692
|
+
--dsn-color-info-border-hover: #000000;
|
|
3693
|
+
--dsn-color-info-border-active: #000000;
|
|
3694
|
+
--dsn-color-info-color-default: #000000;
|
|
3695
|
+
--dsn-color-info-color-hover: #000000;
|
|
3696
|
+
--dsn-color-info-color-active: #000000;
|
|
3697
|
+
--dsn-color-info-color-subtle: #000000;
|
|
3698
|
+
--dsn-color-info-color-document: #000000;
|
|
3699
|
+
--dsn-color-neutral-inverse-bg-document: #000000;
|
|
3700
|
+
--dsn-color-neutral-inverse-bg-elevated: #000000;
|
|
3701
|
+
--dsn-color-neutral-inverse-bg-subtle: #000000;
|
|
3702
|
+
--dsn-color-neutral-inverse-bg-default: #000000;
|
|
3703
|
+
--dsn-color-neutral-inverse-bg-hover: #000000;
|
|
3704
|
+
--dsn-color-neutral-inverse-bg-active: #000000;
|
|
3705
|
+
--dsn-color-neutral-inverse-border-subtle: #000000;
|
|
3706
|
+
--dsn-color-neutral-inverse-border-default: #000000;
|
|
3707
|
+
--dsn-color-neutral-inverse-border-hover: #000000;
|
|
3708
|
+
--dsn-color-neutral-inverse-border-active: #000000;
|
|
3709
|
+
--dsn-color-neutral-inverse-color-default: #ffffff;
|
|
3710
|
+
--dsn-color-neutral-inverse-color-hover: #ffffff;
|
|
3711
|
+
--dsn-color-neutral-inverse-color-active: #ffffff;
|
|
3712
|
+
--dsn-color-neutral-inverse-color-subtle: #ffffff;
|
|
3713
|
+
--dsn-color-neutral-inverse-color-document: #ffffff;
|
|
3714
|
+
--dsn-color-accent-1-inverse-bg-document: #000000;
|
|
3715
|
+
--dsn-color-accent-1-inverse-bg-elevated: #000000;
|
|
3716
|
+
--dsn-color-accent-1-inverse-bg-subtle: #000000;
|
|
3717
|
+
--dsn-color-accent-1-inverse-bg-default: #000000;
|
|
3718
|
+
--dsn-color-accent-1-inverse-bg-hover: #000000;
|
|
3719
|
+
--dsn-color-accent-1-inverse-bg-active: #000000;
|
|
3720
|
+
--dsn-color-accent-1-inverse-border-subtle: #000000;
|
|
3721
|
+
--dsn-color-accent-1-inverse-border-default: #000000;
|
|
3722
|
+
--dsn-color-accent-1-inverse-border-hover: #000000;
|
|
3723
|
+
--dsn-color-accent-1-inverse-border-active: #000000;
|
|
3724
|
+
--dsn-color-accent-1-inverse-color-default: #ffffff;
|
|
3725
|
+
--dsn-color-accent-1-inverse-color-hover: #ffffff;
|
|
3726
|
+
--dsn-color-accent-1-inverse-color-active: #ffffff;
|
|
3727
|
+
--dsn-color-accent-1-inverse-color-subtle: #ffffff;
|
|
3728
|
+
--dsn-color-accent-1-inverse-color-document: #ffffff;
|
|
3729
|
+
--dsn-color-accent-2-inverse-bg-document: #000000;
|
|
3730
|
+
--dsn-color-accent-2-inverse-bg-elevated: #000000;
|
|
3731
|
+
--dsn-color-accent-2-inverse-bg-subtle: #000000;
|
|
3732
|
+
--dsn-color-accent-2-inverse-bg-default: #000000;
|
|
3733
|
+
--dsn-color-accent-2-inverse-bg-hover: #000000;
|
|
3734
|
+
--dsn-color-accent-2-inverse-bg-active: #000000;
|
|
3735
|
+
--dsn-color-accent-2-inverse-border-subtle: #000000;
|
|
3736
|
+
--dsn-color-accent-2-inverse-border-default: #000000;
|
|
3737
|
+
--dsn-color-accent-2-inverse-border-hover: #000000;
|
|
3738
|
+
--dsn-color-accent-2-inverse-border-active: #000000;
|
|
3739
|
+
--dsn-color-accent-2-inverse-color-default: #ffffff;
|
|
3740
|
+
--dsn-color-accent-2-inverse-color-hover: #ffffff;
|
|
3741
|
+
--dsn-color-accent-2-inverse-color-active: #ffffff;
|
|
3742
|
+
--dsn-color-accent-2-inverse-color-subtle: #ffffff;
|
|
3743
|
+
--dsn-color-accent-2-inverse-color-document: #ffffff;
|
|
3744
|
+
--dsn-color-accent-3-inverse-bg-document: #000000;
|
|
3745
|
+
--dsn-color-accent-3-inverse-bg-elevated: #000000;
|
|
3746
|
+
--dsn-color-accent-3-inverse-bg-subtle: #000000;
|
|
3747
|
+
--dsn-color-accent-3-inverse-bg-default: #000000;
|
|
3748
|
+
--dsn-color-accent-3-inverse-bg-hover: #000000;
|
|
3749
|
+
--dsn-color-accent-3-inverse-bg-active: #000000;
|
|
3750
|
+
--dsn-color-accent-3-inverse-border-subtle: #000000;
|
|
3751
|
+
--dsn-color-accent-3-inverse-border-default: #000000;
|
|
3752
|
+
--dsn-color-accent-3-inverse-border-hover: #000000;
|
|
3753
|
+
--dsn-color-accent-3-inverse-border-active: #000000;
|
|
3754
|
+
--dsn-color-accent-3-inverse-color-default: #ffffff;
|
|
3755
|
+
--dsn-color-accent-3-inverse-color-hover: #ffffff;
|
|
3756
|
+
--dsn-color-accent-3-inverse-color-active: #ffffff;
|
|
3757
|
+
--dsn-color-accent-3-inverse-color-subtle: #ffffff;
|
|
3758
|
+
--dsn-color-accent-3-inverse-color-document: #ffffff;
|
|
3759
|
+
--dsn-color-action-1-inverse-bg-document: #000000;
|
|
3760
|
+
--dsn-color-action-1-inverse-bg-elevated: #000000;
|
|
3761
|
+
--dsn-color-action-1-inverse-bg-subtle: #000000;
|
|
3762
|
+
--dsn-color-action-1-inverse-bg-default: #000000;
|
|
3763
|
+
--dsn-color-action-1-inverse-bg-hover: #000000;
|
|
3764
|
+
--dsn-color-action-1-inverse-bg-active: #000000;
|
|
3765
|
+
--dsn-color-action-1-inverse-border-subtle: #000000;
|
|
3766
|
+
--dsn-color-action-1-inverse-border-default: #000000;
|
|
3767
|
+
--dsn-color-action-1-inverse-border-hover: #000000;
|
|
3768
|
+
--dsn-color-action-1-inverse-border-active: #000000;
|
|
3769
|
+
--dsn-color-action-1-inverse-color-default: #ffffff;
|
|
3770
|
+
--dsn-color-action-1-inverse-color-hover: #ffffff;
|
|
3771
|
+
--dsn-color-action-1-inverse-color-active: #ffffff;
|
|
3772
|
+
--dsn-color-action-1-inverse-color-subtle: #ffffff;
|
|
3773
|
+
--dsn-color-action-1-inverse-color-document: #ffffff;
|
|
3774
|
+
--dsn-color-action-2-inverse-bg-document: #000000;
|
|
3775
|
+
--dsn-color-action-2-inverse-bg-elevated: #000000;
|
|
3776
|
+
--dsn-color-action-2-inverse-bg-subtle: #000000;
|
|
3777
|
+
--dsn-color-action-2-inverse-bg-default: #000000;
|
|
3778
|
+
--dsn-color-action-2-inverse-bg-hover: #000000;
|
|
3779
|
+
--dsn-color-action-2-inverse-bg-active: #000000;
|
|
3780
|
+
--dsn-color-action-2-inverse-border-subtle: #000000;
|
|
3781
|
+
--dsn-color-action-2-inverse-border-default: #000000;
|
|
3782
|
+
--dsn-color-action-2-inverse-border-hover: #000000;
|
|
3783
|
+
--dsn-color-action-2-inverse-border-active: #000000;
|
|
3784
|
+
--dsn-color-action-2-inverse-color-default: #ffffff;
|
|
3785
|
+
--dsn-color-action-2-inverse-color-hover: #ffffff;
|
|
3786
|
+
--dsn-color-action-2-inverse-color-active: #ffffff;
|
|
3787
|
+
--dsn-color-action-2-inverse-color-subtle: #ffffff;
|
|
3788
|
+
--dsn-color-action-2-inverse-color-document: #ffffff;
|
|
3789
|
+
--dsn-color-positive-inverse-bg-document: #000000;
|
|
3790
|
+
--dsn-color-positive-inverse-bg-elevated: #000000;
|
|
3791
|
+
--dsn-color-positive-inverse-bg-subtle: #000000;
|
|
3792
|
+
--dsn-color-positive-inverse-bg-default: #000000;
|
|
3793
|
+
--dsn-color-positive-inverse-bg-hover: #000000;
|
|
3794
|
+
--dsn-color-positive-inverse-bg-active: #000000;
|
|
3795
|
+
--dsn-color-positive-inverse-border-subtle: #000000;
|
|
3796
|
+
--dsn-color-positive-inverse-border-default: #000000;
|
|
3797
|
+
--dsn-color-positive-inverse-border-hover: #000000;
|
|
3798
|
+
--dsn-color-positive-inverse-border-active: #000000;
|
|
3799
|
+
--dsn-color-positive-inverse-color-default: #ffffff;
|
|
3800
|
+
--dsn-color-positive-inverse-color-hover: #ffffff;
|
|
3801
|
+
--dsn-color-positive-inverse-color-active: #ffffff;
|
|
3802
|
+
--dsn-color-positive-inverse-color-subtle: #ffffff;
|
|
3803
|
+
--dsn-color-positive-inverse-color-document: #ffffff;
|
|
3804
|
+
--dsn-color-negative-inverse-bg-document: #000000;
|
|
3805
|
+
--dsn-color-negative-inverse-bg-elevated: #000000;
|
|
3806
|
+
--dsn-color-negative-inverse-bg-subtle: #000000;
|
|
3807
|
+
--dsn-color-negative-inverse-bg-default: #000000;
|
|
3808
|
+
--dsn-color-negative-inverse-bg-hover: #000000;
|
|
3809
|
+
--dsn-color-negative-inverse-bg-active: #000000;
|
|
3810
|
+
--dsn-color-negative-inverse-border-subtle: #000000;
|
|
3811
|
+
--dsn-color-negative-inverse-border-default: #000000;
|
|
3812
|
+
--dsn-color-negative-inverse-border-hover: #000000;
|
|
3813
|
+
--dsn-color-negative-inverse-border-active: #000000;
|
|
3814
|
+
--dsn-color-negative-inverse-color-default: #ffffff;
|
|
3815
|
+
--dsn-color-negative-inverse-color-hover: #ffffff;
|
|
3816
|
+
--dsn-color-negative-inverse-color-active: #ffffff;
|
|
3817
|
+
--dsn-color-negative-inverse-color-subtle: #ffffff;
|
|
3818
|
+
--dsn-color-negative-inverse-color-document: #ffffff;
|
|
3819
|
+
--dsn-color-warning-inverse-bg-document: #000000;
|
|
3820
|
+
--dsn-color-warning-inverse-bg-elevated: #000000;
|
|
3821
|
+
--dsn-color-warning-inverse-bg-subtle: #000000;
|
|
3822
|
+
--dsn-color-warning-inverse-bg-default: #000000;
|
|
3823
|
+
--dsn-color-warning-inverse-bg-hover: #000000;
|
|
3824
|
+
--dsn-color-warning-inverse-bg-active: #000000;
|
|
3825
|
+
--dsn-color-warning-inverse-border-subtle: #000000;
|
|
3826
|
+
--dsn-color-warning-inverse-border-default: #000000;
|
|
3827
|
+
--dsn-color-warning-inverse-border-hover: #000000;
|
|
3828
|
+
--dsn-color-warning-inverse-border-active: #000000;
|
|
3829
|
+
--dsn-color-warning-inverse-color-default: #ffffff;
|
|
3830
|
+
--dsn-color-warning-inverse-color-hover: #ffffff;
|
|
3831
|
+
--dsn-color-warning-inverse-color-active: #ffffff;
|
|
3832
|
+
--dsn-color-warning-inverse-color-subtle: #ffffff;
|
|
3833
|
+
--dsn-color-warning-inverse-color-document: #ffffff;
|
|
3834
|
+
--dsn-color-info-inverse-bg-document: #000000;
|
|
3835
|
+
--dsn-color-info-inverse-bg-elevated: #000000;
|
|
3836
|
+
--dsn-color-info-inverse-bg-subtle: #000000;
|
|
3837
|
+
--dsn-color-info-inverse-bg-default: #000000;
|
|
3838
|
+
--dsn-color-info-inverse-bg-hover: #000000;
|
|
3839
|
+
--dsn-color-info-inverse-bg-active: #000000;
|
|
3840
|
+
--dsn-color-info-inverse-border-subtle: #000000;
|
|
3841
|
+
--dsn-color-info-inverse-border-default: #000000;
|
|
3842
|
+
--dsn-color-info-inverse-border-hover: #000000;
|
|
3843
|
+
--dsn-color-info-inverse-border-active: #000000;
|
|
3844
|
+
--dsn-color-info-inverse-color-default: #ffffff;
|
|
3845
|
+
--dsn-color-info-inverse-color-hover: #ffffff;
|
|
3846
|
+
--dsn-color-info-inverse-color-active: #ffffff;
|
|
3847
|
+
--dsn-color-info-inverse-color-subtle: #ffffff;
|
|
3848
|
+
--dsn-color-info-inverse-color-document: #ffffff;
|
|
3849
|
+
--dsn-color-transparent: rgba(0, 0, 0, 0);
|
|
3850
|
+
--dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
|
|
3851
|
+
--dsn-hero-background-color-default: #ffffff;
|
|
3852
|
+
--dsn-hero-background-color-inverse: #000000;
|
|
3853
|
+
--dsn-hero-color-default: #000000;
|
|
3854
|
+
--dsn-hero-color-inverse: #ffffff;
|
|
3855
|
+
--dsn-hero-image-blend-color: #000000;
|
|
3856
|
+
}
|
|
3857
|
+
|
|
3858
|
+
|
|
3177
3859
|
/**
|
|
3178
3860
|
* Hero Component
|
|
3179
3861
|
* Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
|
|
@@ -3275,6 +3957,7 @@ fieldset.dsn-form-field--invalid {
|
|
|
3275
3957
|
color: var(--dsn-hero-color-inverse);
|
|
3276
3958
|
|
|
3277
3959
|
/* Tekst-componenten */
|
|
3960
|
+
--dsn-pre-heading-color: var(--dsn-hero-color-inverse);
|
|
3278
3961
|
--dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
|
|
3279
3962
|
--dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
|
|
3280
3963
|
--dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
|
|
@@ -3322,6 +4005,7 @@ fieldset.dsn-form-field--invalid {
|
|
|
3322
4005
|
color: var(--dsn-hero-color-inverse);
|
|
3323
4006
|
|
|
3324
4007
|
/* Tekst-componenten */
|
|
4008
|
+
--dsn-pre-heading-color: var(--dsn-hero-color-inverse);
|
|
3325
4009
|
--dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
|
|
3326
4010
|
--dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
|
|
3327
4011
|
--dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
|
|
@@ -4343,34 +5027,42 @@ fieldset.dsn-form-field--invalid {
|
|
|
4343
5027
|
* Visually highlighted message for supplementary or important information.
|
|
4344
5028
|
* Passive counterpart to Alert — no live region, read on navigation only.
|
|
4345
5029
|
*
|
|
5030
|
+
* The icon is decorative (aria-hidden); the non-neutral variants (info,
|
|
5031
|
+
* positive, negative, warning) carry a visually hidden variant label that
|
|
5032
|
+
* announces the variant to screen reader users: "Informatie: " / "Succes: " /
|
|
5033
|
+
* "Foutmelding: " / "Let op: ". With a heading the label is the first child of
|
|
5034
|
+
* the heading; without a heading it is a standalone span before the content.
|
|
5035
|
+
* Neutral has no label: that variant deliberately carries no semantic signal.
|
|
5036
|
+
*
|
|
4346
5037
|
* Usage:
|
|
4347
|
-
* <!-- Neutral (default), with icon and heading -->
|
|
5038
|
+
* <!-- Neutral (default), with icon and heading — no variant label -->
|
|
4348
5039
|
* <div class="dsn-note">
|
|
4349
5040
|
* <span class="dsn-note__icon" aria-hidden="true">
|
|
4350
|
-
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
|
|
5041
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
|
|
4351
5042
|
* </span>
|
|
4352
|
-
* <
|
|
5043
|
+
* <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading">Let op</h3>
|
|
4353
5044
|
* <div class="dsn-note__content">
|
|
4354
5045
|
* <p>Aanvullende informatie over dit onderwerp.</p>
|
|
4355
5046
|
* </div>
|
|
4356
5047
|
* </div>
|
|
4357
5048
|
*
|
|
4358
|
-
* <!-- Info variant -->
|
|
5049
|
+
* <!-- Info variant, with visually hidden variant label -->
|
|
4359
5050
|
* <div class="dsn-note dsn-note--info">
|
|
4360
5051
|
* <span class="dsn-note__icon" aria-hidden="true">
|
|
4361
|
-
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
|
|
5052
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
|
|
4362
5053
|
* </span>
|
|
4363
|
-
* <
|
|
5054
|
+
* <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h3>
|
|
4364
5055
|
* <div class="dsn-note__content">
|
|
4365
5056
|
* <p>Body content.</p>
|
|
4366
5057
|
* </div>
|
|
4367
5058
|
* </div>
|
|
4368
5059
|
*
|
|
4369
|
-
* <!-- Without heading — icon spans both rows -->
|
|
4370
|
-
* <div class="dsn-note dsn-note--no-heading">
|
|
5060
|
+
* <!-- Without heading — icon spans both rows, variant label as standalone span -->
|
|
5061
|
+
* <div class="dsn-note dsn-note--warning dsn-note--no-heading">
|
|
4371
5062
|
* <span class="dsn-note__icon" aria-hidden="true">
|
|
4372
|
-
* <svg class="dsn-icon" aria-hidden="true"><!--
|
|
5063
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
|
|
4373
5064
|
* </span>
|
|
5065
|
+
* <span class="dsn-visually-hidden">Let op: </span>
|
|
4374
5066
|
* <div class="dsn-note__content">
|
|
4375
5067
|
* <p>Aanvullende informatie.</p>
|
|
4376
5068
|
* </div>
|
|
@@ -4381,15 +5073,15 @@ fieldset.dsn-form-field--invalid {
|
|
|
4381
5073
|
* ...
|
|
4382
5074
|
* </aside>
|
|
4383
5075
|
*
|
|
4384
|
-
* <!-- as="nav" — table of contents -->
|
|
5076
|
+
* <!-- as="nav" — standalone navigation section (not a page table of contents: use TableOfContents) -->
|
|
4385
5077
|
* <nav class="dsn-note" aria-labelledby="note-heading-id">
|
|
4386
5078
|
* <span class="dsn-note__icon" aria-hidden="true">
|
|
4387
|
-
* <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
|
|
5079
|
+
* <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
|
|
4388
5080
|
* </span>
|
|
4389
|
-
* <
|
|
4390
|
-
* <
|
|
5081
|
+
* <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading" id="note-heading-id">Related pages</h3>
|
|
5082
|
+
* <div class="dsn-note__content">
|
|
4391
5083
|
* <ul>...</ul>
|
|
4392
|
-
* </
|
|
5084
|
+
* </div>
|
|
4393
5085
|
* </nav>
|
|
4394
5086
|
*/
|
|
4395
5087
|
|
|
@@ -4718,6 +5410,36 @@ fieldset.dsn-form-field--invalid {
|
|
|
4718
5410
|
background-color: transparent;
|
|
4719
5411
|
}
|
|
4720
5412
|
|
|
5413
|
+
/* =============================================================================
|
|
5414
|
+
Sidebar layout — Table of Contents kolom (rechts)
|
|
5415
|
+
De ToC-inhoud wordt twee keer gerenderd: één keer inline (onder H1/lead,
|
|
5416
|
+
zichtbaar tot 80em) en één keer als rechterkolom (zichtbaar vanaf 80em).
|
|
5417
|
+
`display: none` sluit de verborgen kopie uit van de accessibility tree,
|
|
5418
|
+
dus er is nooit dubbele content voor schermlezers.
|
|
5419
|
+
============================================================================= */
|
|
5420
|
+
|
|
5421
|
+
.dsn-sidebar-layout__toc-inline {
|
|
5422
|
+
display: block;
|
|
5423
|
+
}
|
|
5424
|
+
|
|
5425
|
+
.dsn-sidebar-layout__toc {
|
|
5426
|
+
display: none;
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
@media (min-width: 80em) {
|
|
5430
|
+
.dsn-sidebar-layout__toc-inline {
|
|
5431
|
+
display: none;
|
|
5432
|
+
}
|
|
5433
|
+
|
|
5434
|
+
.dsn-sidebar-layout__toc {
|
|
5435
|
+
display: block;
|
|
5436
|
+
flex-shrink: 0;
|
|
5437
|
+
inline-size: var(--dsn-sidebar-layout-toc-inline-size, 16rem);
|
|
5438
|
+
padding-inline-start: var(--dsn-space-inline-2xl);
|
|
5439
|
+
padding-block: var(--dsn-space-block-3xl);
|
|
5440
|
+
}
|
|
5441
|
+
}
|
|
5442
|
+
|
|
4721
5443
|
|
|
4722
5444
|
/**
|
|
4723
5445
|
* PageFooter Component
|
|
@@ -4746,7 +5468,6 @@ fieldset.dsn-form-field--invalid {
|
|
|
4746
5468
|
============================================================================= */
|
|
4747
5469
|
|
|
4748
5470
|
.dsn-page-footer {
|
|
4749
|
-
--dsn-grid-margin: 0;
|
|
4750
5471
|
background-color: var(--dsn-page-footer-background-color);
|
|
4751
5472
|
border-block-start: var(--dsn-page-footer-border-block-start-width) solid
|
|
4752
5473
|
var(--dsn-page-footer-border-block-start-color);
|
|
@@ -6875,6 +7596,82 @@ fieldset.dsn-form-field--invalid {
|
|
|
6875
7596
|
}
|
|
6876
7597
|
|
|
6877
7598
|
|
|
7599
|
+
/**
|
|
7600
|
+
* TableOfContents component styles for React
|
|
7601
|
+
* Re-exports the base TableOfContents styles from components-html
|
|
7602
|
+
*/
|
|
7603
|
+
|
|
7604
|
+
/**
|
|
7605
|
+
* Table Of Contents Component
|
|
7606
|
+
* Inhoudsopgave met ankerlinks naar de secties op de huidige pagina.
|
|
7607
|
+
* Alleen H2-secties horen hierin opgenomen te worden.
|
|
7608
|
+
*
|
|
7609
|
+
* Twee appearances:
|
|
7610
|
+
* - Default ("framed"): accent-1 achtergrond + linkerborder, heading als heading-3.
|
|
7611
|
+
* Bedoeld voor gebruik inline in de content-flow (bijv. onder de lead paragraph).
|
|
7612
|
+
* - `dsn-table-of-contents--plain`: geen kader, heading als heading-5.
|
|
7613
|
+
* Bedoeld voor gebruik in een losstaande kolom naast de hoofdinhoud.
|
|
7614
|
+
*
|
|
7615
|
+
* Usage:
|
|
7616
|
+
* <!-- Framed (default) -->
|
|
7617
|
+
* <nav class="dsn-table-of-contents" aria-labelledby="toc-heading">
|
|
7618
|
+
* <h2 class="dsn-heading dsn-heading--heading-3 dsn-table-of-contents__heading" id="toc-heading">Op deze pagina</h2>
|
|
7619
|
+
* <ul class="dsn-unordered-list">
|
|
7620
|
+
* <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
|
|
7621
|
+
* </ul>
|
|
7622
|
+
* </nav>
|
|
7623
|
+
*
|
|
7624
|
+
* <!-- Plain -->
|
|
7625
|
+
* <nav class="dsn-table-of-contents dsn-table-of-contents--plain" aria-labelledby="toc-heading-plain">
|
|
7626
|
+
* <h2 class="dsn-heading dsn-heading--heading-5 dsn-table-of-contents__heading" id="toc-heading-plain">Op deze pagina</h2>
|
|
7627
|
+
* <ul class="dsn-unordered-list">
|
|
7628
|
+
* <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
|
|
7629
|
+
* </ul>
|
|
7630
|
+
* </nav>
|
|
7631
|
+
*/
|
|
7632
|
+
|
|
7633
|
+
.dsn-table-of-contents {
|
|
7634
|
+
border-inline-start: var(--dsn-table-of-contents-border-inline-start-width)
|
|
7635
|
+
solid var(--dsn-table-of-contents-border-inline-start-color);
|
|
7636
|
+
background-color: var(--dsn-table-of-contents-background-color);
|
|
7637
|
+
padding-block: var(--dsn-table-of-contents-padding-block);
|
|
7638
|
+
padding-inline-start: var(--dsn-table-of-contents-padding-inline-start);
|
|
7639
|
+
padding-inline-end: var(--dsn-table-of-contents-padding-inline-end);
|
|
7640
|
+
}
|
|
7641
|
+
|
|
7642
|
+
.dsn-table-of-contents__heading {
|
|
7643
|
+
margin-block-end: var(--dsn-table-of-contents-heading-gap);
|
|
7644
|
+
}
|
|
7645
|
+
|
|
7646
|
+
/* =============================================================================
|
|
7647
|
+
Plain appearance — geen kader, voor gebruik in een losstaande kolom
|
|
7648
|
+
============================================================================= */
|
|
7649
|
+
|
|
7650
|
+
.dsn-table-of-contents--plain {
|
|
7651
|
+
border-inline-start: none;
|
|
7652
|
+
background-color: transparent;
|
|
7653
|
+
padding-block: var(--dsn-table-of-contents-plain-padding-block);
|
|
7654
|
+
padding-inline-start: 0;
|
|
7655
|
+
padding-inline-end: 0;
|
|
7656
|
+
/* Ankerlinks: omgekeerd onderstrepingsgedrag t.o.v. de standaard Link —
|
|
7657
|
+
rust zonder onderstreping, hover mét, zodat de kolom rustiger oogt. */
|
|
7658
|
+
--dsn-link-text-decoration-line: var(
|
|
7659
|
+
--dsn-table-of-contents-plain-link-text-decoration-line
|
|
7660
|
+
);
|
|
7661
|
+
--dsn-link-hover-text-decoration-line: var(
|
|
7662
|
+
--dsn-table-of-contents-plain-link-hover-text-decoration-line
|
|
7663
|
+
);
|
|
7664
|
+
}
|
|
7665
|
+
|
|
7666
|
+
.dsn-table-of-contents--plain .dsn-unordered-list > li {
|
|
7667
|
+
margin-block-end: var(--dsn-table-of-contents-plain-list-gap);
|
|
7668
|
+
}
|
|
7669
|
+
|
|
7670
|
+
.dsn-table-of-contents--plain .dsn-unordered-list > li:last-child {
|
|
7671
|
+
margin-block-end: 0;
|
|
7672
|
+
}
|
|
7673
|
+
|
|
7674
|
+
|
|
6878
7675
|
/**
|
|
6879
7676
|
* TelephoneInput Component Styles
|
|
6880
7677
|
* Uses dsn-text-input styles from TextInput.css — no additional styles needed
|