@dsn-starter-kit/design-tokens 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.
- package/dist/css/scoped/density-default.css +8 -8
- package/dist/css/scoped/density-information-dense.css +10 -10
- package/dist/css/scoped/start-light-hero-image.css +317 -0
- package/dist/css/scoped/wireframe-dark.css +22 -22
- package/dist/css/scoped/wireframe-light-hero-image.css +314 -0
- package/dist/css/scoped/wireframe-light.css +22 -22
- package/dist/css/start-dark-default.css +961 -942
- package/dist/css/start-dark-information-dense.css +961 -942
- package/dist/css/start-light-default.css +959 -940
- package/dist/css/start-light-information-dense.css +959 -940
- package/dist/css/variables-dark.css +961 -942
- package/dist/css/variables.css +959 -940
- package/dist/css/wireframe-dark-default.css +842 -823
- package/dist/css/wireframe-dark-information-dense.css +842 -823
- package/dist/css/wireframe-light-default.css +842 -823
- package/dist/css/wireframe-light-information-dense.css +842 -823
- package/dist/js/start-dark-default.d.ts +20 -1
- package/dist/js/start-dark-default.js +2416 -1921
- package/dist/js/start-dark-information-dense.d.ts +20 -1
- package/dist/js/start-dark-information-dense.js +2416 -1921
- package/dist/js/start-light-default.d.ts +20 -1
- package/dist/js/start-light-default.js +2410 -1917
- package/dist/js/start-light-information-dense.d.ts +20 -1
- package/dist/js/start-light-information-dense.js +2410 -1917
- package/dist/js/tokens-dark.d.ts +20 -1
- package/dist/js/tokens-dark.js +2416 -1921
- package/dist/js/tokens.d.ts +20 -1
- package/dist/js/tokens.js +2410 -1917
- package/dist/js/wireframe-dark-default.d.ts +20 -1
- package/dist/js/wireframe-dark-default.js +2165 -1676
- package/dist/js/wireframe-dark-information-dense.d.ts +20 -1
- package/dist/js/wireframe-dark-information-dense.js +2165 -1676
- package/dist/js/wireframe-light-default.d.ts +20 -1
- package/dist/js/wireframe-light-default.js +2165 -1676
- package/dist/js/wireframe-light-information-dense.d.ts +20 -1
- package/dist/js/wireframe-light-information-dense.js +2165 -1676
- package/dist/json/start-dark-default.json +20 -1
- package/dist/json/start-dark-information-dense.json +20 -1
- package/dist/json/start-light-default.json +20 -1
- package/dist/json/start-light-information-dense.json +20 -1
- package/dist/json/tokens-dark.json +20 -1
- package/dist/json/tokens.json +20 -1
- package/dist/json/wireframe-dark-default.json +20 -1
- package/dist/json/wireframe-dark-information-dense.json +20 -1
- package/dist/json/wireframe-light-default.json +20 -1
- package/dist/json/wireframe-light-information-dense.json +20 -1
- package/dist/scss/_start-dark-default.scss +961 -942
- package/dist/scss/_start-dark-information-dense.scss +961 -942
- package/dist/scss/_start-light-default.scss +959 -940
- package/dist/scss/_start-light-information-dense.scss +959 -940
- package/dist/scss/_variables-dark.scss +961 -942
- package/dist/scss/_variables.scss +959 -940
- package/dist/scss/_wireframe-dark-default.scss +842 -823
- package/dist/scss/_wireframe-dark-information-dense.scss +842 -823
- package/dist/scss/_wireframe-light-default.scss +842 -823
- package/dist/scss/_wireframe-light-information-dense.scss +842 -823
- package/package.json +4 -2
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
|
-
$dsn-text-font-family-default: IBM Plex Sans, sans-serif; //
|
|
5
|
-
$dsn-text-font-family-monospace: IBM Plex Mono, monospace; // Monospace
|
|
6
|
-
$dsn-text-font-weight-default: 400; //
|
|
7
|
-
$dsn-text-font-weight-bold: 700; //
|
|
8
|
-
$dsn-text-max-inline-size: 65ch; //
|
|
9
|
-
$dsn-text-line-height-sm: 1.5; // 150%
|
|
10
|
-
$dsn-text-line-height-md: 1.5; // 150%
|
|
11
|
-
$dsn-text-line-height-lg: 1.25; // 125%
|
|
12
|
-
$dsn-text-line-height-xl: 1.25; // 125%
|
|
13
|
-
$dsn-text-line-height-2xl: 1.25; // 125%
|
|
14
|
-
$dsn-text-line-height-3xl: 1.25; // 125%
|
|
15
|
-
$dsn-text-line-height-4xl: 1.1; // 110%
|
|
4
|
+
$dsn-text-font-family-default: IBM Plex Sans, sans-serif; // Standaard lettertype voor bodytekst
|
|
5
|
+
$dsn-text-font-family-monospace: IBM Plex Mono, monospace; // Monospace lettertype voor code
|
|
6
|
+
$dsn-text-font-weight-default: 400; // Regulier gewicht
|
|
7
|
+
$dsn-text-font-weight-bold: 700; // Vet gewicht
|
|
8
|
+
$dsn-text-max-inline-size: 65ch; // Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten)
|
|
9
|
+
$dsn-text-line-height-sm: 1.5; // 150% regelafstand voor kleine tekst
|
|
10
|
+
$dsn-text-line-height-md: 1.5; // 150% regelafstand voor middelgrote tekst
|
|
11
|
+
$dsn-text-line-height-lg: 1.25; // 125% regelafstand voor grote tekst
|
|
12
|
+
$dsn-text-line-height-xl: 1.25; // 125% regelafstand voor koppen
|
|
13
|
+
$dsn-text-line-height-2xl: 1.25; // 125% regelafstand voor grote koppen
|
|
14
|
+
$dsn-text-line-height-3xl: 1.25; // 125% regelafstand voor display-tekst
|
|
15
|
+
$dsn-text-line-height-4xl: 1.1; // 110% regelafstand voor hero-tekst
|
|
16
16
|
$dsn-text-font-size-sm: clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem); // Small text - 14px to 17px (fluid)
|
|
17
17
|
$dsn-text-font-size-md: clamp(1rem, 0.875rem + 0.375vw, 1.28125rem); // Medium text - 16px to 20.5px (fluid)
|
|
18
18
|
$dsn-text-font-size-lg: clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem); // Large text - 20px to 24.5px (fluid)
|
|
@@ -20,92 +20,92 @@ $dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem); // Extra la
|
|
|
20
20
|
$dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); // 2XL text - 32px to 41px (fluid)
|
|
21
21
|
$dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); // 3XL text - 40px to 53px (fluid)
|
|
22
22
|
$dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); // 4XL text - 48px to 66px (fluid)
|
|
23
|
-
$dsn-heading-font-family: IBM Plex Sans, sans-serif; //
|
|
24
|
-
$dsn-heading-font-weight: 700; //
|
|
25
|
-
$dsn-space-none: 0px; //
|
|
26
|
-
$dsn-space-base: 0.5rem; // 8px -
|
|
27
|
-
$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px -
|
|
28
|
-
$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px -
|
|
29
|
-
$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px -
|
|
30
|
-
$dsn-space-block-md: calc(0.5rem * 1); // 8px -
|
|
31
|
-
$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px -
|
|
32
|
-
$dsn-space-block-xl: calc(0.5rem * 2); // 16px -
|
|
33
|
-
$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px -
|
|
34
|
-
$dsn-space-block-3xl: calc(0.5rem * 3); // 24px -
|
|
35
|
-
$dsn-space-block-4xl: calc(0.5rem * 4); // 32px -
|
|
36
|
-
$dsn-space-block-5xl: calc(0.5rem * 6); // 48px -
|
|
37
|
-
$dsn-space-block-6xl: calc(0.5rem * 8); // 64px -
|
|
38
|
-
$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px -
|
|
39
|
-
$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px -
|
|
40
|
-
$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px -
|
|
41
|
-
$dsn-space-inline-md: calc(0.5rem * 1); // 8px -
|
|
42
|
-
$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px -
|
|
43
|
-
$dsn-space-inline-xl: calc(0.5rem * 2); // 16px -
|
|
44
|
-
$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px -
|
|
45
|
-
$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px -
|
|
46
|
-
$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px -
|
|
47
|
-
$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px -
|
|
48
|
-
$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px -
|
|
49
|
-
$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px -
|
|
50
|
-
$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px -
|
|
51
|
-
$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px -
|
|
52
|
-
$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px -
|
|
53
|
-
$dsn-space-text-md: calc(0.5rem * 1); // 8px -
|
|
54
|
-
$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px -
|
|
55
|
-
$dsn-space-text-xl: calc(0.5rem * 2); // 16px -
|
|
56
|
-
$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px -
|
|
57
|
-
$dsn-space-text-3xl: calc(0.5rem * 3); // 24px -
|
|
58
|
-
$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px -
|
|
59
|
-
$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px -
|
|
60
|
-
$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px -
|
|
61
|
-
$dsn-space-column-md: calc(0.5rem * 1); // 8px -
|
|
62
|
-
$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px -
|
|
63
|
-
$dsn-space-column-xl: calc(0.5rem * 2); // 16px -
|
|
64
|
-
$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px -
|
|
65
|
-
$dsn-space-column-3xl: calc(0.5rem * 3); // 24px -
|
|
66
|
-
$dsn-space-column-4xl: calc(0.5rem * 4); // 32px -
|
|
67
|
-
$dsn-space-column-5xl: calc(0.5rem * 8); // 64px -
|
|
68
|
-
$dsn-space-column-6xl: calc(0.5rem * 20); // 160px -
|
|
69
|
-
$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px -
|
|
70
|
-
$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px -
|
|
71
|
-
$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px -
|
|
72
|
-
$dsn-space-row-md: calc(0.5rem * 1); // 8px -
|
|
73
|
-
$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px -
|
|
74
|
-
$dsn-space-row-xl: calc(0.5rem * 2); // 16px -
|
|
75
|
-
$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px -
|
|
76
|
-
$dsn-space-row-3xl: calc(0.5rem * 3); // 24px -
|
|
77
|
-
$dsn-space-row-4xl: calc(0.5rem * 4); // 32px -
|
|
78
|
-
$dsn-space-row-5xl: calc(0.5rem * 8); // 64px -
|
|
79
|
-
$dsn-space-row-6xl: calc(0.5rem * 20); // 160px -
|
|
80
|
-
$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size -
|
|
81
|
-
$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size -
|
|
82
|
-
$dsn-border-radius-square: 0px; //
|
|
83
|
-
$dsn-border-radius-sm: 4px; //
|
|
84
|
-
$dsn-border-radius-md: 8px; //
|
|
85
|
-
$dsn-border-radius-lg: 16px; //
|
|
86
|
-
$dsn-border-radius-round: 999px; //
|
|
87
|
-
$dsn-border-width-none: 0px; //
|
|
88
|
-
$dsn-border-width-thin: 1px; //
|
|
89
|
-
$dsn-border-width-medium: 2px; //
|
|
90
|
-
$dsn-border-width-thick: 4px; //
|
|
91
|
-
$dsn-focus-outline-offset: 0px; //
|
|
92
|
-
$dsn-focus-outline-style: dashed; //
|
|
93
|
-
$dsn-focus-outline-width: 2px; //
|
|
94
|
-
$dsn-focus-background-color: #ffdd00; //
|
|
95
|
-
$dsn-focus-color: #0b0c0c; //
|
|
96
|
-
$dsn-focus-outline-color: #0b0c0c; //
|
|
97
|
-
$dsn-focus-inverse-outline-color: #ffffff; //
|
|
98
|
-
$dsn-form-control-max-inline-size: 25rem; //
|
|
99
|
-
$dsn-form-control-width-xs: 10ch; // Extra
|
|
100
|
-
$dsn-form-control-width-sm: 14ch; //
|
|
101
|
-
$dsn-form-control-width-md: 20ch; //
|
|
102
|
-
$dsn-form-control-width-lg: 32ch; //
|
|
103
|
-
$dsn-form-control-width-xl: 48ch; // Extra
|
|
104
|
-
$dsn-form-control-width-full: 100%; //
|
|
105
|
-
$dsn-breakpoint-sm: 36em; //
|
|
106
|
-
$dsn-breakpoint-md: 44em; //
|
|
107
|
-
$dsn-breakpoint-lg: 64em; //
|
|
108
|
-
$dsn-breakpoint-xl: 74em; // Extra
|
|
23
|
+
$dsn-heading-font-family: IBM Plex Sans, sans-serif; // Lettertype voor koppen
|
|
24
|
+
$dsn-heading-font-weight: 700; // Vet gewicht voor koppen
|
|
25
|
+
$dsn-space-none: 0px; // Geen afstand
|
|
26
|
+
$dsn-space-base: 0.5rem; // 8px - Basiseenheid voor het 8pt-rastersysteem
|
|
27
|
+
$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px - Verticale ruimte binnen componenten
|
|
28
|
+
$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px - Verticale ruimte binnen componenten
|
|
29
|
+
$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px - Verticale ruimte binnen componenten
|
|
30
|
+
$dsn-space-block-md: calc(0.5rem * 1); // 8px - Verticale ruimte binnen componenten
|
|
31
|
+
$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px - Verticale ruimte binnen componenten
|
|
32
|
+
$dsn-space-block-xl: calc(0.5rem * 2); // 16px - Verticale ruimte binnen componenten
|
|
33
|
+
$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px - Verticale ruimte binnen componenten
|
|
34
|
+
$dsn-space-block-3xl: calc(0.5rem * 3); // 24px - Verticale ruimte binnen componenten
|
|
35
|
+
$dsn-space-block-4xl: calc(0.5rem * 4); // 32px - Verticale ruimte binnen componenten
|
|
36
|
+
$dsn-space-block-5xl: calc(0.5rem * 6); // 48px - Verticale ruimte binnen componenten
|
|
37
|
+
$dsn-space-block-6xl: calc(0.5rem * 8); // 64px - Verticale ruimte binnen componenten
|
|
38
|
+
$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px - Horizontale ruimte binnen componenten
|
|
39
|
+
$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px - Horizontale ruimte binnen componenten
|
|
40
|
+
$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px - Horizontale ruimte binnen componenten
|
|
41
|
+
$dsn-space-inline-md: calc(0.5rem * 1); // 8px - Horizontale ruimte binnen componenten
|
|
42
|
+
$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px - Horizontale ruimte binnen componenten
|
|
43
|
+
$dsn-space-inline-xl: calc(0.5rem * 2); // 16px - Horizontale ruimte binnen componenten
|
|
44
|
+
$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px - Horizontale ruimte binnen componenten
|
|
45
|
+
$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px - Horizontale ruimte binnen componenten
|
|
46
|
+
$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px - Horizontale ruimte binnen componenten
|
|
47
|
+
$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px - Horizontale ruimte binnen componenten
|
|
48
|
+
$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px - Horizontale ruimte binnen componenten
|
|
49
|
+
$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px - Ruimte tussen tekst en iconen
|
|
50
|
+
$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px - Ruimte tussen tekst en iconen
|
|
51
|
+
$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px - Ruimte tussen tekst en iconen
|
|
52
|
+
$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px - Ruimte tussen tekst en iconen
|
|
53
|
+
$dsn-space-text-md: calc(0.5rem * 1); // 8px - Ruimte tussen tekst en iconen
|
|
54
|
+
$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px - Ruimte tussen tekst en iconen
|
|
55
|
+
$dsn-space-text-xl: calc(0.5rem * 2); // 16px - Ruimte tussen tekst en iconen
|
|
56
|
+
$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px - Ruimte tussen tekst en iconen
|
|
57
|
+
$dsn-space-text-3xl: calc(0.5rem * 3); // 24px - Ruimte tussen tekst en iconen
|
|
58
|
+
$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px - Horizontale ruimte tussen componenten
|
|
59
|
+
$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px - Horizontale ruimte tussen componenten
|
|
60
|
+
$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px - Horizontale ruimte tussen componenten
|
|
61
|
+
$dsn-space-column-md: calc(0.5rem * 1); // 8px - Horizontale ruimte tussen componenten
|
|
62
|
+
$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px - Horizontale ruimte tussen componenten
|
|
63
|
+
$dsn-space-column-xl: calc(0.5rem * 2); // 16px - Horizontale ruimte tussen componenten
|
|
64
|
+
$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px - Horizontale ruimte tussen componenten
|
|
65
|
+
$dsn-space-column-3xl: calc(0.5rem * 3); // 24px - Horizontale ruimte tussen componenten
|
|
66
|
+
$dsn-space-column-4xl: calc(0.5rem * 4); // 32px - Horizontale ruimte tussen componenten
|
|
67
|
+
$dsn-space-column-5xl: calc(0.5rem * 8); // 64px - Horizontale ruimte tussen componenten
|
|
68
|
+
$dsn-space-column-6xl: calc(0.5rem * 20); // 160px - Horizontale ruimte tussen componenten
|
|
69
|
+
$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px - Verticale ruimte tussen componenten
|
|
70
|
+
$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px - Verticale ruimte tussen componenten
|
|
71
|
+
$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px - Verticale ruimte tussen componenten
|
|
72
|
+
$dsn-space-row-md: calc(0.5rem * 1); // 8px - Verticale ruimte tussen componenten
|
|
73
|
+
$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px - Verticale ruimte tussen componenten
|
|
74
|
+
$dsn-space-row-xl: calc(0.5rem * 2); // 16px - Verticale ruimte tussen componenten
|
|
75
|
+
$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px - Verticale ruimte tussen componenten
|
|
76
|
+
$dsn-space-row-3xl: calc(0.5rem * 3); // 24px - Verticale ruimte tussen componenten
|
|
77
|
+
$dsn-space-row-4xl: calc(0.5rem * 4); // 32px - Verticale ruimte tussen componenten
|
|
78
|
+
$dsn-space-row-5xl: calc(0.5rem * 8); // 64px - Verticale ruimte tussen componenten
|
|
79
|
+
$dsn-space-row-6xl: calc(0.5rem * 20); // 160px - Verticale ruimte tussen componenten
|
|
80
|
+
$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit
|
|
81
|
+
$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size - minimaal 48px (3rem) aanraakdoelwit
|
|
82
|
+
$dsn-border-radius-square: 0px; // Geen afronding — scherpe hoeken
|
|
83
|
+
$dsn-border-radius-sm: 4px; // Kleine afronding
|
|
84
|
+
$dsn-border-radius-md: 8px; // Middelgrote afronding
|
|
85
|
+
$dsn-border-radius-lg: 16px; // Grote afronding
|
|
86
|
+
$dsn-border-radius-round: 999px; // Volledig afgerond (pills, cirkels)
|
|
87
|
+
$dsn-border-width-none: 0px; // Geen randbreedte
|
|
88
|
+
$dsn-border-width-thin: 1px; // Dunne rand
|
|
89
|
+
$dsn-border-width-medium: 2px; // Middelgrote rand
|
|
90
|
+
$dsn-border-width-thick: 4px; // Dikke rand
|
|
91
|
+
$dsn-focus-outline-offset: 0px; // Offset van de focusomtrek
|
|
92
|
+
$dsn-focus-outline-style: dashed; // Stijl van de focusomtrek
|
|
93
|
+
$dsn-focus-outline-width: 2px; // Breedte van de focusomtrek
|
|
94
|
+
$dsn-focus-background-color: #ffdd00; // Achtergrondkleur van de focusindicator
|
|
95
|
+
$dsn-focus-color: #0b0c0c; // Tekstkleur van de focusindicator
|
|
96
|
+
$dsn-focus-outline-color: #0b0c0c; // Kleur van de focusomtrek
|
|
97
|
+
$dsn-focus-inverse-outline-color: #ffffff; // Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color
|
|
98
|
+
$dsn-form-control-max-inline-size: 25rem; // Maximale breedte van form controls
|
|
99
|
+
$dsn-form-control-width-xs: 10ch; // Extra kleine breedte — voor zeer korte invoervelden (bijv. postcode, jaar, CVV)
|
|
100
|
+
$dsn-form-control-width-sm: 14ch; // Kleine breedte — voor korte invoervelden (bijv. tijd UU:MM, korte codes)
|
|
101
|
+
$dsn-form-control-width-md: 20ch; // Middelgrote breedte — voor middelgrote invoervelden (bijv. datum dd/mm/jjjj, telefoonnummer)
|
|
102
|
+
$dsn-form-control-width-lg: 32ch; // Grote breedte (standaard) — voor standaard invoervelden (bijv. naam, e-mail)
|
|
103
|
+
$dsn-form-control-width-xl: 48ch; // Extra grote breedte — voor langere invoervelden (bijv. URL)
|
|
104
|
+
$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
|
|
105
|
+
$dsn-breakpoint-sm: 36em; // Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
106
|
+
$dsn-breakpoint-md: 44em; // Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
107
|
+
$dsn-breakpoint-lg: 64em; // Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
108
|
+
$dsn-breakpoint-xl: 74em; // Extra groot breakpoint - ~1184px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
109
109
|
$dsn-box-shadow-none: none; // Geen elevatie — vlak oppervlak zonder schaduw
|
|
110
110
|
$dsn-z-index-300: 300; // Sticky navigatie-elementen — PageHeader sticky/auto-hide
|
|
111
111
|
$dsn-z-index-350: 350; // Floating UI-elementen — Popover, tooltips, dropdowns
|
|
@@ -122,200 +122,200 @@ $dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het s
|
|
|
122
122
|
$dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
|
|
123
123
|
$dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
|
|
124
124
|
$dsn-transition-easing-linear: linear; // Progress bars, loaders
|
|
125
|
-
$dsn-color-neutral-bg-document: #fcfcfc; //
|
|
126
|
-
$dsn-color-neutral-bg-elevated: #fcfcfc; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
127
|
-
$dsn-color-neutral-bg-subtle: #f6f6f6; //
|
|
128
|
-
$dsn-color-neutral-bg-default: #f1f1f1; //
|
|
129
|
-
$dsn-color-neutral-bg-hover: #ebebeb; //
|
|
130
|
-
$dsn-color-neutral-bg-active: #e5e5e5; //
|
|
131
|
-
$dsn-color-neutral-border-subtle: #c4c4c4; //
|
|
132
|
-
$dsn-color-neutral-border-default: #868686; //
|
|
133
|
-
$dsn-color-neutral-border-hover: #7c7c7c; //
|
|
134
|
-
$dsn-color-neutral-border-active: #727272; //
|
|
135
|
-
$dsn-color-neutral-color-default: #595959; //
|
|
136
|
-
$dsn-color-neutral-color-hover: #4b4b4b; //
|
|
137
|
-
$dsn-color-neutral-color-active: #3e3e3e; //
|
|
138
|
-
$dsn-color-neutral-color-subtle: #636363; //
|
|
139
|
-
$dsn-color-neutral-color-document: #1b1b1b; //
|
|
140
|
-
$dsn-color-accent-1-bg-document: #fbfcfd; //
|
|
141
|
-
$dsn-color-accent-1-bg-elevated: #fbfcfd; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
142
|
-
$dsn-color-accent-1-bg-subtle: #f4f7fa; //
|
|
143
|
-
$dsn-color-accent-1-bg-default: #ecf1f7; //
|
|
144
|
-
$dsn-color-accent-1-bg-hover: #e4ecf4; //
|
|
145
|
-
$dsn-color-accent-1-bg-active: #dde6f1; //
|
|
146
|
-
$dsn-color-accent-1-border-subtle: #b0c6df; //
|
|
147
|
-
$dsn-color-accent-1-border-default: #5c89be; //
|
|
148
|
-
$dsn-color-accent-1-border-hover: #4e7fb8; //
|
|
149
|
-
$dsn-color-accent-1-border-active: #3f74b2; //
|
|
150
|
-
$dsn-color-accent-1-color-default: #1b59a4; //
|
|
151
|
-
$dsn-color-accent-1-color-hover: #04499a; //
|
|
152
|
-
$dsn-color-accent-1-color-active: #003b81; //
|
|
153
|
-
$dsn-color-accent-1-color-subtle: #2964aa; //
|
|
154
|
-
$dsn-color-accent-1-color-document: #001b3c; //
|
|
155
|
-
$dsn-color-negative-bg-document: #fffbfb; //
|
|
156
|
-
$dsn-color-negative-bg-elevated: #fffbfb; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
157
|
-
$dsn-color-negative-bg-subtle: #fef4f4; //
|
|
158
|
-
$dsn-color-negative-bg-default: #feeded; //
|
|
159
|
-
$dsn-color-negative-bg-hover: #fde6e6; //
|
|
160
|
-
$dsn-color-negative-bg-active: #fddede; //
|
|
161
|
-
$dsn-color-negative-border-subtle: #f9b1b1; //
|
|
162
|
-
$dsn-color-negative-border-default: #f14848; //
|
|
163
|
-
$dsn-color-negative-border-hover: #ef2929; //
|
|
164
|
-
$dsn-color-negative-border-active: #e60000; //
|
|
165
|
-
$dsn-color-negative-color-default: #b70000; //
|
|
166
|
-
$dsn-color-negative-color-hover: #9c0000; //
|
|
167
|
-
$dsn-color-negative-color-active: #930000; //
|
|
168
|
-
$dsn-color-negative-color-subtle: #ca0000; //
|
|
169
|
-
$dsn-color-negative-color-document: #410000; //
|
|
170
|
-
$dsn-color-positive-bg-document: #fafdfb; //
|
|
171
|
-
$dsn-color-positive-bg-elevated: #fafdfb; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
172
|
-
$dsn-color-positive-bg-subtle: #eff9f3; //
|
|
173
|
-
$dsn-color-positive-bg-default: #e4f5ea; //
|
|
174
|
-
$dsn-color-positive-bg-hover: #d9f1e2; //
|
|
175
|
-
$dsn-color-positive-bg-active: #ceedd9; //
|
|
176
|
-
$dsn-color-positive-border-subtle: #8ad3a6; //
|
|
177
|
-
$dsn-color-positive-border-default: #009b3a; //
|
|
178
|
-
$dsn-color-positive-border-hover: #009036; //
|
|
179
|
-
$dsn-color-positive-border-active: #008432; //
|
|
180
|
-
$dsn-color-positive-color-default: #006827; //
|
|
181
|
-
$dsn-color-positive-color-hover: #005821; //
|
|
182
|
-
$dsn-color-positive-color-active: #00481b; //
|
|
183
|
-
$dsn-color-positive-color-subtle: #00732b; //
|
|
184
|
-
$dsn-color-positive-color-document: #00210c; //
|
|
185
|
-
$dsn-color-warning-bg-document: #fffcf8; //
|
|
186
|
-
$dsn-color-warning-bg-elevated: #fffcf8; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
187
|
-
$dsn-color-warning-bg-subtle: #fff5eb; //
|
|
188
|
-
$dsn-color-warning-bg-default: #ffeedd; //
|
|
189
|
-
$dsn-color-warning-bg-hover: #ffe7d0; //
|
|
190
|
-
$dsn-color-warning-bg-active: #ffe0c2; //
|
|
191
|
-
$dsn-color-warning-border-subtle: #ffb46b; //
|
|
192
|
-
$dsn-color-warning-border-default: #c8700e; //
|
|
193
|
-
$dsn-color-warning-border-hover: #b86810; //
|
|
194
|
-
$dsn-color-warning-border-active: #a96011; //
|
|
195
|
-
$dsn-color-warning-color-default: #844c12; //
|
|
196
|
-
$dsn-color-warning-color-hover: #6f4012; //
|
|
197
|
-
$dsn-color-warning-color-active: #5a3511; //
|
|
198
|
-
$dsn-color-warning-color-subtle: #935412; //
|
|
199
|
-
$dsn-color-warning-color-document: #27190a; //
|
|
200
|
-
$dsn-color-neutral-inverse-bg-document: #242424; //
|
|
201
|
-
$dsn-color-neutral-inverse-bg-elevated: #242424; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
202
|
-
$dsn-color-neutral-inverse-bg-subtle: #1b1b1b; //
|
|
203
|
-
$dsn-color-neutral-inverse-bg-default: #595959; //
|
|
204
|
-
$dsn-color-neutral-inverse-bg-hover: #4b4b4b; //
|
|
205
|
-
$dsn-color-neutral-inverse-bg-active: #3e3e3e; //
|
|
206
|
-
$dsn-color-neutral-inverse-border-subtle: #474747; //
|
|
207
|
-
$dsn-color-neutral-inverse-border-default: #c9c9c9; //
|
|
208
|
-
$dsn-color-neutral-inverse-border-hover: #d4d4d4; //
|
|
209
|
-
$dsn-color-neutral-inverse-border-active: #dfdfdf; //
|
|
210
|
-
$dsn-color-neutral-inverse-color-default: #ffffff; //
|
|
211
|
-
$dsn-color-neutral-inverse-color-hover: #ffffff; //
|
|
212
|
-
$dsn-color-neutral-inverse-color-active: #ffffff; //
|
|
213
|
-
$dsn-color-neutral-inverse-color-subtle: #c4c4c4; //
|
|
214
|
-
$dsn-color-neutral-inverse-color-document: #ffffff; //
|
|
215
|
-
$dsn-color-accent-1-inverse-bg-document: #00234d; //
|
|
216
|
-
$dsn-color-accent-1-inverse-bg-elevated: #00234d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
217
|
-
$dsn-color-accent-1-inverse-bg-subtle: #001b3c; //
|
|
218
|
-
$dsn-color-accent-1-inverse-bg-default: #1b59a4; //
|
|
219
|
-
$dsn-color-accent-1-inverse-bg-hover: #04499a; //
|
|
220
|
-
$dsn-color-accent-1-inverse-bg-active: #003b81; //
|
|
221
|
-
$dsn-color-accent-1-inverse-border-subtle: #004494; //
|
|
222
|
-
$dsn-color-accent-1-inverse-border-default: #b8cbe2; //
|
|
223
|
-
$dsn-color-accent-1-inverse-border-hover: #c6d6e8; //
|
|
224
|
-
$dsn-color-accent-1-inverse-border-active: #d5e1ee; //
|
|
225
|
-
$dsn-color-accent-1-inverse-color-default: #ffffff; //
|
|
226
|
-
$dsn-color-accent-1-inverse-color-hover: #ffffff; //
|
|
227
|
-
$dsn-color-accent-1-inverse-color-active: #ffffff; //
|
|
228
|
-
$dsn-color-accent-1-inverse-color-subtle: #b0c6df; //
|
|
229
|
-
$dsn-color-accent-1-inverse-color-document: #ffffff; //
|
|
230
|
-
$dsn-color-info-inverse-bg-document: #00234d; //
|
|
231
|
-
$dsn-color-info-inverse-bg-elevated: #00234d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
232
|
-
$dsn-color-info-inverse-bg-subtle: #001b3c; //
|
|
233
|
-
$dsn-color-info-inverse-bg-default: #1b59a4; //
|
|
234
|
-
$dsn-color-info-inverse-bg-hover: #04499a; //
|
|
235
|
-
$dsn-color-info-inverse-bg-active: #003b81; //
|
|
236
|
-
$dsn-color-info-inverse-border-subtle: #004494; //
|
|
237
|
-
$dsn-color-info-inverse-border-default: #b8cbe2; //
|
|
238
|
-
$dsn-color-info-inverse-border-hover: #c6d6e8; //
|
|
239
|
-
$dsn-color-info-inverse-border-active: #d5e1ee; //
|
|
240
|
-
$dsn-color-info-inverse-color-default: #ffffff; //
|
|
241
|
-
$dsn-color-info-inverse-color-hover: #ffffff; //
|
|
242
|
-
$dsn-color-info-inverse-color-active: #ffffff; //
|
|
243
|
-
$dsn-color-info-inverse-color-subtle: #b0c6df; //
|
|
244
|
-
$dsn-color-info-inverse-color-document: #ffffff; //
|
|
245
|
-
$dsn-color-negative-inverse-bg-document: #510000; //
|
|
246
|
-
$dsn-color-negative-inverse-bg-elevated: #510000; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
247
|
-
$dsn-color-negative-inverse-bg-subtle: #410000; //
|
|
248
|
-
$dsn-color-negative-inverse-bg-default: #b70000; //
|
|
249
|
-
$dsn-color-negative-inverse-bg-hover: #9c0000; //
|
|
250
|
-
$dsn-color-negative-inverse-bg-active: #820000; //
|
|
251
|
-
$dsn-color-negative-inverse-border-subtle: #930000; //
|
|
252
|
-
$dsn-color-negative-inverse-border-default: #fab9b9; //
|
|
253
|
-
$dsn-color-negative-inverse-border-hover: #fbc8c8; //
|
|
254
|
-
$dsn-color-negative-inverse-border-active: #fcd7d7; //
|
|
255
|
-
$dsn-color-negative-inverse-color-default: #ffffff; //
|
|
256
|
-
$dsn-color-negative-inverse-color-hover: #ffffff; //
|
|
257
|
-
$dsn-color-negative-inverse-color-active: #ffffff; //
|
|
258
|
-
$dsn-color-negative-inverse-color-subtle: #f9b1b1; //
|
|
259
|
-
$dsn-color-negative-inverse-color-document: #ffffff; //
|
|
260
|
-
$dsn-color-positive-inverse-bg-document: #002b10; //
|
|
261
|
-
$dsn-color-positive-inverse-bg-elevated: #002b10; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
262
|
-
$dsn-color-positive-inverse-bg-subtle: #00210c; //
|
|
263
|
-
$dsn-color-positive-inverse-bg-default: #006827; //
|
|
264
|
-
$dsn-color-positive-inverse-bg-hover: #005821; //
|
|
265
|
-
$dsn-color-positive-inverse-bg-active: #00481b; //
|
|
266
|
-
$dsn-color-positive-inverse-border-subtle: #00531f; //
|
|
267
|
-
$dsn-color-positive-inverse-border-default: #96d8ae; //
|
|
268
|
-
$dsn-color-positive-inverse-border-hover: #ace0c0; //
|
|
269
|
-
$dsn-color-positive-inverse-border-active: #c3e9d1; //
|
|
270
|
-
$dsn-color-positive-inverse-color-default: #ffffff; //
|
|
271
|
-
$dsn-color-positive-inverse-color-hover: #ffffff; //
|
|
272
|
-
$dsn-color-positive-inverse-color-active: #ffffff; //
|
|
273
|
-
$dsn-color-positive-inverse-color-subtle: #8ad3a6; //
|
|
274
|
-
$dsn-color-positive-inverse-color-document: #ffffff; //
|
|
275
|
-
$dsn-color-warning-inverse-bg-document: #331f0d; //
|
|
276
|
-
$dsn-color-warning-inverse-bg-elevated: #331f0d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
277
|
-
$dsn-color-warning-inverse-bg-subtle: #27190a; //
|
|
278
|
-
$dsn-color-warning-inverse-bg-default: #844c12; //
|
|
279
|
-
$dsn-color-warning-inverse-bg-hover: #6f4012; //
|
|
280
|
-
$dsn-color-warning-inverse-bg-active: #5a3511; //
|
|
281
|
-
$dsn-color-warning-inverse-border-subtle: #683c12; //
|
|
282
|
-
$dsn-color-warning-inverse-border-default: #ffbc7a; //
|
|
283
|
-
$dsn-color-warning-inverse-border-hover: #ffcb98; //
|
|
284
|
-
$dsn-color-warning-inverse-border-active: #ffd9b4; //
|
|
285
|
-
$dsn-color-warning-inverse-color-default: #ffffff; //
|
|
286
|
-
$dsn-color-warning-inverse-color-hover: #ffffff; //
|
|
287
|
-
$dsn-color-warning-inverse-color-active: #ffffff; //
|
|
288
|
-
$dsn-color-warning-inverse-color-subtle: #ffb46b; //
|
|
289
|
-
$dsn-color-warning-inverse-color-document: #ffffff; //
|
|
290
|
-
$dsn-color-transparent: rgba(0, 0, 0, 0); //
|
|
125
|
+
$dsn-color-neutral-bg-document: #fcfcfc; // Documentachtergrond
|
|
126
|
+
$dsn-color-neutral-bg-elevated: #fcfcfc; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
127
|
+
$dsn-color-neutral-bg-subtle: #f6f6f6; // Subtiele achtergrond
|
|
128
|
+
$dsn-color-neutral-bg-default: #f1f1f1; // Standaard achtergrond
|
|
129
|
+
$dsn-color-neutral-bg-hover: #ebebeb; // Achtergrond in hover state
|
|
130
|
+
$dsn-color-neutral-bg-active: #e5e5e5; // Achtergrond in active state
|
|
131
|
+
$dsn-color-neutral-border-subtle: #c4c4c4; // Subtiele rand
|
|
132
|
+
$dsn-color-neutral-border-default: #868686; // Standaard rand
|
|
133
|
+
$dsn-color-neutral-border-hover: #7c7c7c; // Rand in hover state
|
|
134
|
+
$dsn-color-neutral-border-active: #727272; // Rand in active state
|
|
135
|
+
$dsn-color-neutral-color-default: #595959; // Standaard tekstkleur
|
|
136
|
+
$dsn-color-neutral-color-hover: #4b4b4b; // Tekst in hover state
|
|
137
|
+
$dsn-color-neutral-color-active: #3e3e3e; // Tekst in active state
|
|
138
|
+
$dsn-color-neutral-color-subtle: #636363; // Subtiele tekstkleur
|
|
139
|
+
$dsn-color-neutral-color-document: #1b1b1b; // Documenttekstkleur
|
|
140
|
+
$dsn-color-accent-1-bg-document: #fbfcfd; // Documentachtergrond
|
|
141
|
+
$dsn-color-accent-1-bg-elevated: #fbfcfd; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
142
|
+
$dsn-color-accent-1-bg-subtle: #f4f7fa; // Subtiele achtergrond
|
|
143
|
+
$dsn-color-accent-1-bg-default: #ecf1f7; // Standaard achtergrond
|
|
144
|
+
$dsn-color-accent-1-bg-hover: #e4ecf4; // Achtergrond in hover state
|
|
145
|
+
$dsn-color-accent-1-bg-active: #dde6f1; // Achtergrond in active state
|
|
146
|
+
$dsn-color-accent-1-border-subtle: #b0c6df; // Subtiele rand
|
|
147
|
+
$dsn-color-accent-1-border-default: #5c89be; // Standaard rand
|
|
148
|
+
$dsn-color-accent-1-border-hover: #4e7fb8; // Rand in hover state
|
|
149
|
+
$dsn-color-accent-1-border-active: #3f74b2; // Rand in active state
|
|
150
|
+
$dsn-color-accent-1-color-default: #1b59a4; // Standaard tekstkleur
|
|
151
|
+
$dsn-color-accent-1-color-hover: #04499a; // Tekst in hover state
|
|
152
|
+
$dsn-color-accent-1-color-active: #003b81; // Tekst in active state
|
|
153
|
+
$dsn-color-accent-1-color-subtle: #2964aa; // Subtiele tekstkleur
|
|
154
|
+
$dsn-color-accent-1-color-document: #001b3c; // Documenttekstkleur
|
|
155
|
+
$dsn-color-negative-bg-document: #fffbfb; // Documentachtergrond
|
|
156
|
+
$dsn-color-negative-bg-elevated: #fffbfb; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
157
|
+
$dsn-color-negative-bg-subtle: #fef4f4; // Subtiele achtergrond
|
|
158
|
+
$dsn-color-negative-bg-default: #feeded; // Standaard achtergrond
|
|
159
|
+
$dsn-color-negative-bg-hover: #fde6e6; // Achtergrond in hover state
|
|
160
|
+
$dsn-color-negative-bg-active: #fddede; // Achtergrond in active state
|
|
161
|
+
$dsn-color-negative-border-subtle: #f9b1b1; // Subtiele rand
|
|
162
|
+
$dsn-color-negative-border-default: #f14848; // Standaard rand
|
|
163
|
+
$dsn-color-negative-border-hover: #ef2929; // Rand in hover state
|
|
164
|
+
$dsn-color-negative-border-active: #e60000; // Rand in active state
|
|
165
|
+
$dsn-color-negative-color-default: #b70000; // Standaard tekstkleur
|
|
166
|
+
$dsn-color-negative-color-hover: #9c0000; // Tekst in hover state
|
|
167
|
+
$dsn-color-negative-color-active: #930000; // Tekst in active state
|
|
168
|
+
$dsn-color-negative-color-subtle: #ca0000; // Subtiele tekstkleur
|
|
169
|
+
$dsn-color-negative-color-document: #410000; // Documenttekstkleur
|
|
170
|
+
$dsn-color-positive-bg-document: #fafdfb; // Documentachtergrond
|
|
171
|
+
$dsn-color-positive-bg-elevated: #fafdfb; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
172
|
+
$dsn-color-positive-bg-subtle: #eff9f3; // Subtiele achtergrond
|
|
173
|
+
$dsn-color-positive-bg-default: #e4f5ea; // Standaard achtergrond
|
|
174
|
+
$dsn-color-positive-bg-hover: #d9f1e2; // Achtergrond in hover state
|
|
175
|
+
$dsn-color-positive-bg-active: #ceedd9; // Achtergrond in active state
|
|
176
|
+
$dsn-color-positive-border-subtle: #8ad3a6; // Subtiele rand
|
|
177
|
+
$dsn-color-positive-border-default: #009b3a; // Standaard rand
|
|
178
|
+
$dsn-color-positive-border-hover: #009036; // Rand in hover state
|
|
179
|
+
$dsn-color-positive-border-active: #008432; // Rand in active state
|
|
180
|
+
$dsn-color-positive-color-default: #006827; // Standaard tekstkleur
|
|
181
|
+
$dsn-color-positive-color-hover: #005821; // Tekst in hover state
|
|
182
|
+
$dsn-color-positive-color-active: #00481b; // Tekst in active state
|
|
183
|
+
$dsn-color-positive-color-subtle: #00732b; // Subtiele tekstkleur
|
|
184
|
+
$dsn-color-positive-color-document: #00210c; // Documenttekstkleur
|
|
185
|
+
$dsn-color-warning-bg-document: #fffcf8; // Documentachtergrond
|
|
186
|
+
$dsn-color-warning-bg-elevated: #fffcf8; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
187
|
+
$dsn-color-warning-bg-subtle: #fff5eb; // Subtiele achtergrond
|
|
188
|
+
$dsn-color-warning-bg-default: #ffeedd; // Standaard achtergrond
|
|
189
|
+
$dsn-color-warning-bg-hover: #ffe7d0; // Achtergrond in hover state
|
|
190
|
+
$dsn-color-warning-bg-active: #ffe0c2; // Achtergrond in active state
|
|
191
|
+
$dsn-color-warning-border-subtle: #ffb46b; // Subtiele rand
|
|
192
|
+
$dsn-color-warning-border-default: #c8700e; // Standaard rand
|
|
193
|
+
$dsn-color-warning-border-hover: #b86810; // Rand in hover state
|
|
194
|
+
$dsn-color-warning-border-active: #a96011; // Rand in active state
|
|
195
|
+
$dsn-color-warning-color-default: #844c12; // Standaard tekstkleur
|
|
196
|
+
$dsn-color-warning-color-hover: #6f4012; // Tekst in hover state
|
|
197
|
+
$dsn-color-warning-color-active: #5a3511; // Tekst in active state
|
|
198
|
+
$dsn-color-warning-color-subtle: #935412; // Subtiele tekstkleur
|
|
199
|
+
$dsn-color-warning-color-document: #27190a; // Documenttekstkleur
|
|
200
|
+
$dsn-color-neutral-inverse-bg-document: #242424; // Documentachtergrond (inverse)
|
|
201
|
+
$dsn-color-neutral-inverse-bg-elevated: #242424; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
202
|
+
$dsn-color-neutral-inverse-bg-subtle: #1b1b1b; // Subtiele achtergrond (inverse)
|
|
203
|
+
$dsn-color-neutral-inverse-bg-default: #595959; // Standaard achtergrond (inverse)
|
|
204
|
+
$dsn-color-neutral-inverse-bg-hover: #4b4b4b; // Achtergrond in hover state (inverse)
|
|
205
|
+
$dsn-color-neutral-inverse-bg-active: #3e3e3e; // Achtergrond in active state (inverse)
|
|
206
|
+
$dsn-color-neutral-inverse-border-subtle: #474747; // Subtiele rand (inverse)
|
|
207
|
+
$dsn-color-neutral-inverse-border-default: #c9c9c9; // Standaard rand (inverse)
|
|
208
|
+
$dsn-color-neutral-inverse-border-hover: #d4d4d4; // Rand in hover state (inverse)
|
|
209
|
+
$dsn-color-neutral-inverse-border-active: #dfdfdf; // Rand in active state (inverse)
|
|
210
|
+
$dsn-color-neutral-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
211
|
+
$dsn-color-neutral-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
212
|
+
$dsn-color-neutral-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
213
|
+
$dsn-color-neutral-inverse-color-subtle: #c4c4c4; // Subtiele tekstkleur (inverse)
|
|
214
|
+
$dsn-color-neutral-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
215
|
+
$dsn-color-accent-1-inverse-bg-document: #00234d; // Documentachtergrond (inverse)
|
|
216
|
+
$dsn-color-accent-1-inverse-bg-elevated: #00234d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
217
|
+
$dsn-color-accent-1-inverse-bg-subtle: #001b3c; // Subtiele achtergrond (inverse)
|
|
218
|
+
$dsn-color-accent-1-inverse-bg-default: #1b59a4; // Standaard achtergrond (inverse)
|
|
219
|
+
$dsn-color-accent-1-inverse-bg-hover: #04499a; // Achtergrond in hover state (inverse)
|
|
220
|
+
$dsn-color-accent-1-inverse-bg-active: #003b81; // Achtergrond in active state (inverse)
|
|
221
|
+
$dsn-color-accent-1-inverse-border-subtle: #004494; // Subtiele rand (inverse)
|
|
222
|
+
$dsn-color-accent-1-inverse-border-default: #b8cbe2; // Standaard rand (inverse)
|
|
223
|
+
$dsn-color-accent-1-inverse-border-hover: #c6d6e8; // Rand in hover state (inverse)
|
|
224
|
+
$dsn-color-accent-1-inverse-border-active: #d5e1ee; // Rand in active state (inverse)
|
|
225
|
+
$dsn-color-accent-1-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
226
|
+
$dsn-color-accent-1-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
227
|
+
$dsn-color-accent-1-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
228
|
+
$dsn-color-accent-1-inverse-color-subtle: #b0c6df; // Subtiele tekstkleur (inverse)
|
|
229
|
+
$dsn-color-accent-1-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
230
|
+
$dsn-color-info-inverse-bg-document: #00234d; // Documentachtergrond (inverse)
|
|
231
|
+
$dsn-color-info-inverse-bg-elevated: #00234d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
232
|
+
$dsn-color-info-inverse-bg-subtle: #001b3c; // Subtiele achtergrond (inverse)
|
|
233
|
+
$dsn-color-info-inverse-bg-default: #1b59a4; // Standaard achtergrond (inverse)
|
|
234
|
+
$dsn-color-info-inverse-bg-hover: #04499a; // Achtergrond in hover state (inverse)
|
|
235
|
+
$dsn-color-info-inverse-bg-active: #003b81; // Achtergrond in active state (inverse)
|
|
236
|
+
$dsn-color-info-inverse-border-subtle: #004494; // Subtiele rand (inverse)
|
|
237
|
+
$dsn-color-info-inverse-border-default: #b8cbe2; // Standaard rand (inverse)
|
|
238
|
+
$dsn-color-info-inverse-border-hover: #c6d6e8; // Rand in hover state (inverse)
|
|
239
|
+
$dsn-color-info-inverse-border-active: #d5e1ee; // Rand in active state (inverse)
|
|
240
|
+
$dsn-color-info-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
241
|
+
$dsn-color-info-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
242
|
+
$dsn-color-info-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
243
|
+
$dsn-color-info-inverse-color-subtle: #b0c6df; // Subtiele tekstkleur (inverse)
|
|
244
|
+
$dsn-color-info-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
245
|
+
$dsn-color-negative-inverse-bg-document: #510000; // Documentachtergrond (inverse)
|
|
246
|
+
$dsn-color-negative-inverse-bg-elevated: #510000; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
247
|
+
$dsn-color-negative-inverse-bg-subtle: #410000; // Subtiele achtergrond (inverse)
|
|
248
|
+
$dsn-color-negative-inverse-bg-default: #b70000; // Standaard achtergrond (inverse)
|
|
249
|
+
$dsn-color-negative-inverse-bg-hover: #9c0000; // Achtergrond in hover state (inverse)
|
|
250
|
+
$dsn-color-negative-inverse-bg-active: #820000; // Achtergrond in active state (inverse)
|
|
251
|
+
$dsn-color-negative-inverse-border-subtle: #930000; // Subtiele rand (inverse)
|
|
252
|
+
$dsn-color-negative-inverse-border-default: #fab9b9; // Standaard rand (inverse)
|
|
253
|
+
$dsn-color-negative-inverse-border-hover: #fbc8c8; // Rand in hover state (inverse)
|
|
254
|
+
$dsn-color-negative-inverse-border-active: #fcd7d7; // Rand in active state (inverse)
|
|
255
|
+
$dsn-color-negative-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
256
|
+
$dsn-color-negative-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
257
|
+
$dsn-color-negative-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
258
|
+
$dsn-color-negative-inverse-color-subtle: #f9b1b1; // Subtiele tekstkleur (inverse)
|
|
259
|
+
$dsn-color-negative-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
260
|
+
$dsn-color-positive-inverse-bg-document: #002b10; // Documentachtergrond (inverse)
|
|
261
|
+
$dsn-color-positive-inverse-bg-elevated: #002b10; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
262
|
+
$dsn-color-positive-inverse-bg-subtle: #00210c; // Subtiele achtergrond (inverse)
|
|
263
|
+
$dsn-color-positive-inverse-bg-default: #006827; // Standaard achtergrond (inverse)
|
|
264
|
+
$dsn-color-positive-inverse-bg-hover: #005821; // Achtergrond in hover state (inverse)
|
|
265
|
+
$dsn-color-positive-inverse-bg-active: #00481b; // Achtergrond in active state (inverse)
|
|
266
|
+
$dsn-color-positive-inverse-border-subtle: #00531f; // Subtiele rand (inverse)
|
|
267
|
+
$dsn-color-positive-inverse-border-default: #96d8ae; // Standaard rand (inverse)
|
|
268
|
+
$dsn-color-positive-inverse-border-hover: #ace0c0; // Rand in hover state (inverse)
|
|
269
|
+
$dsn-color-positive-inverse-border-active: #c3e9d1; // Rand in active state (inverse)
|
|
270
|
+
$dsn-color-positive-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
271
|
+
$dsn-color-positive-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
272
|
+
$dsn-color-positive-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
273
|
+
$dsn-color-positive-inverse-color-subtle: #8ad3a6; // Subtiele tekstkleur (inverse)
|
|
274
|
+
$dsn-color-positive-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
275
|
+
$dsn-color-warning-inverse-bg-document: #331f0d; // Documentachtergrond (inverse)
|
|
276
|
+
$dsn-color-warning-inverse-bg-elevated: #331f0d; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
277
|
+
$dsn-color-warning-inverse-bg-subtle: #27190a; // Subtiele achtergrond (inverse)
|
|
278
|
+
$dsn-color-warning-inverse-bg-default: #844c12; // Standaard achtergrond (inverse)
|
|
279
|
+
$dsn-color-warning-inverse-bg-hover: #6f4012; // Achtergrond in hover state (inverse)
|
|
280
|
+
$dsn-color-warning-inverse-bg-active: #5a3511; // Achtergrond in active state (inverse)
|
|
281
|
+
$dsn-color-warning-inverse-border-subtle: #683c12; // Subtiele rand (inverse)
|
|
282
|
+
$dsn-color-warning-inverse-border-default: #ffbc7a; // Standaard rand (inverse)
|
|
283
|
+
$dsn-color-warning-inverse-border-hover: #ffcb98; // Rand in hover state (inverse)
|
|
284
|
+
$dsn-color-warning-inverse-border-active: #ffd9b4; // Rand in active state (inverse)
|
|
285
|
+
$dsn-color-warning-inverse-color-default: #ffffff; // Standaard tekstkleur (inverse)
|
|
286
|
+
$dsn-color-warning-inverse-color-hover: #ffffff; // Tekst in hover state (inverse)
|
|
287
|
+
$dsn-color-warning-inverse-color-active: #ffffff; // Tekst in active state (inverse)
|
|
288
|
+
$dsn-color-warning-inverse-color-subtle: #ffb46b; // Subtiele tekstkleur (inverse)
|
|
289
|
+
$dsn-color-warning-inverse-color-document: #ffffff; // Documenttekstkleur (inverse)
|
|
290
|
+
$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
|
|
291
291
|
$dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent); // Scherpe schaduwlaag — direct licht, dichtbij het object
|
|
292
292
|
$dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent); // Diffuse schaduwlaag — omgevingslicht, verder weg
|
|
293
293
|
$dsn-color-shadow-highlight: rgba(0, 0, 0, 0); // Outline-laag — transparent in light mode (no-op)
|
|
294
294
|
$dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15); // Scroll-affordance schaduw voor horizontaal scrollbare tabellen
|
|
295
295
|
$dsn-backdrop-opacity: 50%; // Bepaalt hoe doorzichtig de overlay is — gebruikt in color-mix()
|
|
296
296
|
$dsn-backdrop-blur: 4px; // backdrop-filter: blur() op de overlay — valt gracefully weg zonder support
|
|
297
|
-
$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links
|
|
298
|
-
$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; //
|
|
299
|
-
$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; //
|
|
297
|
+
$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links zijn standaard onderstreept (a11y standaard)
|
|
298
|
+
$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; // Onderstrepingsafstand
|
|
299
|
+
$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; // Dikte van de onderstreping
|
|
300
300
|
$dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline verdwijnt op hover als visuele feedback
|
|
301
|
-
$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; //
|
|
302
|
-
$dsn-button-size-small-min-block-size: 2.5rem; //
|
|
301
|
+
$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; // Geen onderstreping op active
|
|
302
|
+
$dsn-button-size-small-min-block-size: 2.5rem; // Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px)
|
|
303
303
|
$dsn-card-box-shadow: none; // Schaduw standaard — geen schaduw by default
|
|
304
304
|
$dsn-card-group-item-min-width: 17.5rem; // Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill
|
|
305
|
-
$dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); //
|
|
305
|
+
$dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Grootte van de checkbox — vloeiend op basis van tekstgrootte en line-height
|
|
306
306
|
$dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
|
|
307
307
|
$dsn-checkbox-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
308
308
|
$dsn-checkbox-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
309
309
|
$dsn-checkbox-indeterminate-border-color: rgba(0, 0, 0, 0);
|
|
310
310
|
$dsn-checkbox-indeterminate-active-border-color: rgba(0, 0, 0, 0);
|
|
311
311
|
$dsn-checkbox-indeterminate-hover-border-color: rgba(0, 0, 0, 0);
|
|
312
|
-
$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); //
|
|
312
|
+
$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); // Grootte van het vinkje — 67% van de checkboxgrootte voor een goede visuele balans
|
|
313
313
|
$dsn-container-box-shadow: none; // Standaard geen schaduw — gebruik elevated variant voor een zwevend effect
|
|
314
|
-
$dsn-details-summary-text-decoration-line: none; //
|
|
315
|
-
$dsn-details-summary-text-underline-offset: 4px; //
|
|
316
|
-
$dsn-details-summary-text-decoration-thickness: auto; //
|
|
317
|
-
$dsn-details-summary-hover-text-decoration-line: underline; //
|
|
318
|
-
$dsn-details-content-background-color: rgba(0, 0, 0, 0); //
|
|
314
|
+
$dsn-details-summary-text-decoration-line: none; // Standaard geen onderstreping; verschijnt op hover
|
|
315
|
+
$dsn-details-summary-text-underline-offset: 4px; // Onderstrepingsafstand voor de hover-staat
|
|
316
|
+
$dsn-details-summary-text-decoration-thickness: auto; // Dikte van de onderstreping voor de hover-staat
|
|
317
|
+
$dsn-details-summary-hover-text-decoration-line: underline; // Onderstreping verschijnt op hover
|
|
318
|
+
$dsn-details-content-background-color: rgba(0, 0, 0, 0); // Achtergrond van het inhoudsgebied
|
|
319
319
|
$dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
|
|
320
320
|
$dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
|
|
321
321
|
$dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
|
|
@@ -324,13 +324,14 @@ $dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
|
|
|
324
324
|
$dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
|
|
325
325
|
$dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
|
|
326
326
|
$dsn-file-media-size: 3rem; // Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview
|
|
327
|
+
$dsn-grid-padding-inline: 0px; // Outer padding-inline of the grid container. Default 0: grids sit inside dsn-page-body__inner which already provides horizontal padding.
|
|
327
328
|
$dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
|
|
328
329
|
$dsn-hero-block-size: 70svh; // Hoogte van de Hero via min-block-size: max(--dsn-hero-min-block-size, --dsn-hero-block-size); aanpasbaar per instantie via inline style
|
|
329
330
|
$dsn-hero-min-block-size: 400px; // Minimale hoogte van de Hero — vloer zodat de Hero niet te klein wordt bij weinig inhoud of kleine viewport
|
|
330
|
-
$dsn-link-text-decoration-line: underline; //
|
|
331
|
-
$dsn-link-text-decoration-thickness: auto; //
|
|
332
|
-
$dsn-link-text-underline-offset: 4px; //
|
|
333
|
-
$dsn-link-hover-text-decoration-line: none; //
|
|
331
|
+
$dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
|
|
332
|
+
$dsn-link-text-decoration-thickness: auto; // Dikte van de onderstreping van de link
|
|
333
|
+
$dsn-link-text-underline-offset: 4px; // Onderstrepingsafstand van de link
|
|
334
|
+
$dsn-link-hover-text-decoration-line: none; // Tekstverfraaiing van de link op hover
|
|
334
335
|
$dsn-menu-link-current-indicator-width: 3px; // MenuLink-specifiek: breedte van de border-inline-start indicator
|
|
335
336
|
$dsn-modal-dialog-max-width: 40rem; // Maximale breedte van het dialoogvenster (640px)
|
|
336
337
|
$dsn-page-footer-logo-max-block-size: 2rem; // Maximale hoogte van het logo in de PageFooter (32px) — zelfde waarde als page-header.logo.max-block-size voor consistente logogrootte
|
|
@@ -340,70 +341,72 @@ $dsn-password-input-padding-inline-end: 3rem; // Password input right padding -
|
|
|
340
341
|
$dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
|
|
341
342
|
$dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
|
|
342
343
|
$dsn-progress-bar-block-size: 8px; // Hoogte van de balk — gangbare dikte voor voortgangsbalken
|
|
343
|
-
$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); //
|
|
344
|
+
$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Grootte van de radioknop — vloeiend op basis van tekstgrootte en line-height
|
|
344
345
|
$dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
|
|
345
346
|
$dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
346
347
|
$dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
347
|
-
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); //
|
|
348
|
+
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte
|
|
348
349
|
$dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
|
|
349
350
|
$dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
|
|
350
351
|
$dsn-spinner-duration: 800ms; // Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie
|
|
351
|
-
$dsn-status-badge-text-transform: none; //
|
|
352
|
-
$dsn-summary-list-key-basis: 30%; //
|
|
352
|
+
$dsn-status-badge-text-transform: none; // Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen)
|
|
353
|
+
$dsn-summary-list-key-basis: 30%; // Breedte van de sleutelkolom in de gridindeling
|
|
354
|
+
$dsn-table-of-contents-plain-link-text-decoration-line: none; // Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks in rust — omgekeerd t.o.v. de standaard Link (geen onderstreping)
|
|
355
|
+
$dsn-table-of-contents-plain-link-hover-text-decoration-line: underline; // Plain-appearance-specifiek: tekstverfraaiing van de ankerlinks op hover — omgekeerd t.o.v. de standaard Link (wel onderstreping)
|
|
353
356
|
$dsn-table-header-background-color: rgba(0, 0, 0, 0);
|
|
354
357
|
$dsn-table-footer-background-color: rgba(0, 0, 0, 0);
|
|
355
|
-
$dsn-text-area-outline-offset: 0px; //
|
|
356
|
-
$dsn-text-area-resize: vertical; //
|
|
357
|
-
$dsn-text-area-focus-box-shadow-x: 0; //
|
|
358
|
-
$dsn-text-area-focus-box-shadow-y: 0; //
|
|
359
|
-
$dsn-text-area-focus-box-shadow-blur: 0; //
|
|
360
|
-
$dsn-text-area-hover-box-shadow-x: 0; //
|
|
361
|
-
$dsn-text-area-hover-box-shadow-y: 0; //
|
|
362
|
-
$dsn-text-area-hover-box-shadow-blur: 0; //
|
|
363
|
-
$dsn-text-area-invalid-box-shadow-x: 0; //
|
|
364
|
-
$dsn-text-area-invalid-box-shadow-y: 0; //
|
|
365
|
-
$dsn-text-area-invalid-box-shadow-blur: 0; //
|
|
366
|
-
$dsn-text-input-outline-offset: 0px; //
|
|
367
|
-
$dsn-text-input-focus-box-shadow-x: 0; //
|
|
368
|
-
$dsn-text-input-focus-box-shadow-y: 0; //
|
|
369
|
-
$dsn-text-input-focus-box-shadow-blur: 0; //
|
|
370
|
-
$dsn-text-input-hover-box-shadow-x: 0; //
|
|
371
|
-
$dsn-text-input-hover-box-shadow-y: 0; //
|
|
372
|
-
$dsn-text-input-hover-box-shadow-blur: 0; //
|
|
373
|
-
$dsn-text-input-invalid-box-shadow-x: 0; //
|
|
374
|
-
$dsn-text-input-invalid-box-shadow-y: 0; //
|
|
375
|
-
$dsn-text-input-invalid-box-shadow-blur: 0; //
|
|
376
|
-
$dsn-heading-color: $dsn-color-neutral-color-document; //
|
|
377
|
-
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1
|
|
378
|
-
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1
|
|
379
|
-
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1
|
|
380
|
-
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1
|
|
381
|
-
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1
|
|
382
|
-
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2
|
|
383
|
-
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2
|
|
384
|
-
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2
|
|
385
|
-
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2
|
|
386
|
-
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2
|
|
387
|
-
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3
|
|
388
|
-
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3
|
|
389
|
-
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3
|
|
390
|
-
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3
|
|
391
|
-
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3
|
|
392
|
-
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4
|
|
393
|
-
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4
|
|
394
|
-
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4
|
|
395
|
-
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4
|
|
396
|
-
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4
|
|
397
|
-
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5
|
|
398
|
-
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5
|
|
399
|
-
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5
|
|
400
|
-
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5
|
|
401
|
-
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5
|
|
402
|
-
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6
|
|
403
|
-
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6
|
|
404
|
-
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6
|
|
405
|
-
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6
|
|
406
|
-
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6
|
|
358
|
+
$dsn-text-area-outline-offset: 0px; // Outline-afstand van het tekstveld
|
|
359
|
+
$dsn-text-area-resize: vertical; // Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none)
|
|
360
|
+
$dsn-text-area-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
361
|
+
$dsn-text-area-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
362
|
+
$dsn-text-area-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
363
|
+
$dsn-text-area-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
364
|
+
$dsn-text-area-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
365
|
+
$dsn-text-area-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
366
|
+
$dsn-text-area-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
367
|
+
$dsn-text-area-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
368
|
+
$dsn-text-area-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
369
|
+
$dsn-text-input-outline-offset: 0px; // Outline-afstand van het tekstinvoerveld
|
|
370
|
+
$dsn-text-input-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
371
|
+
$dsn-text-input-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
372
|
+
$dsn-text-input-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
373
|
+
$dsn-text-input-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
374
|
+
$dsn-text-input-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
375
|
+
$dsn-text-input-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
376
|
+
$dsn-text-input-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
377
|
+
$dsn-text-input-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
378
|
+
$dsn-text-input-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
379
|
+
$dsn-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van koppen
|
|
380
|
+
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Font-familie van Heading 1
|
|
381
|
+
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Font-size van Heading 1
|
|
382
|
+
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 1
|
|
383
|
+
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Line-height van Heading 1
|
|
384
|
+
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 1
|
|
385
|
+
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Font-familie van Heading 2
|
|
386
|
+
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Font-size van Heading 2
|
|
387
|
+
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 2
|
|
388
|
+
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Line-height van Heading 2
|
|
389
|
+
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 2
|
|
390
|
+
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Font-familie van Heading 3
|
|
391
|
+
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Font-size van Heading 3
|
|
392
|
+
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 3
|
|
393
|
+
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Line-height van Heading 3
|
|
394
|
+
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 3
|
|
395
|
+
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Font-familie van Heading 4
|
|
396
|
+
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Font-size van Heading 4
|
|
397
|
+
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 4
|
|
398
|
+
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Line-height van Heading 4
|
|
399
|
+
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 4
|
|
400
|
+
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Font-familie van Heading 5
|
|
401
|
+
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Font-size van Heading 5
|
|
402
|
+
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 5
|
|
403
|
+
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Line-height van Heading 5
|
|
404
|
+
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 5
|
|
405
|
+
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Font-familie van Heading 6
|
|
406
|
+
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Font-size van Heading 6
|
|
407
|
+
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 6
|
|
408
|
+
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Line-height van Heading 6
|
|
409
|
+
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 6
|
|
407
410
|
$dsn-icon-size-sm: calc($dsn-text-font-size-sm * $dsn-text-line-height-sm); // Fluid icon size - coupled to font-size.sm × line-height.sm
|
|
408
411
|
$dsn-icon-size-md: calc($dsn-text-font-size-md * $dsn-text-line-height-md); // Fluid icon size - coupled to font-size.md × line-height.md
|
|
409
412
|
$dsn-icon-size-lg: calc($dsn-text-font-size-lg * $dsn-text-line-height-lg); // Fluid icon size - coupled to font-size.lg × line-height.lg
|
|
@@ -411,296 +414,297 @@ $dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // F
|
|
|
411
414
|
$dsn-icon-size-2xl: calc($dsn-text-font-size-2xl * $dsn-text-line-height-2xl); // Fluid icon size - coupled to font-size.2xl × line-height.2xl
|
|
412
415
|
$dsn-icon-size-3xl: calc($dsn-text-font-size-3xl * $dsn-text-line-height-3xl); // Fluid icon size - coupled to font-size.3xl × line-height.3xl
|
|
413
416
|
$dsn-icon-size-4xl: calc($dsn-text-font-size-4xl * $dsn-text-line-height-4xl); // Fluid icon size - coupled to font-size.4xl × line-height.4xl
|
|
414
|
-
$dsn-form-control-font-family: $dsn-text-font-family-default; //
|
|
415
|
-
$dsn-form-control-font-size: $dsn-text-font-size-md; //
|
|
416
|
-
$dsn-form-control-font-weight: $dsn-text-font-weight-default; //
|
|
417
|
-
$dsn-form-control-line-height: $dsn-text-line-height-md; //
|
|
417
|
+
$dsn-form-control-font-family: $dsn-text-font-family-default; // Lettertype van form controls
|
|
418
|
+
$dsn-form-control-font-size: $dsn-text-font-size-md; // Lettergrootte van form controls
|
|
419
|
+
$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Lettergewicht van form controls
|
|
420
|
+
$dsn-form-control-line-height: $dsn-text-line-height-md; // Regelafstand van form controls
|
|
418
421
|
$dsn-form-control-padding-block-start: $dsn-space-block-md; // Form control top padding — 8px zodat min-block-size (48px) de hoogte bepaalt, gelijk aan de button
|
|
419
422
|
$dsn-form-control-padding-block-end: $dsn-space-block-md; // Form control bottom padding — 8px zodat min-block-size (48px) de hoogte bepaalt, gelijk aan de button
|
|
420
|
-
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; //
|
|
421
|
-
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; //
|
|
422
|
-
$dsn-form-control-border-radius: $dsn-border-radius-square; //
|
|
423
|
-
$dsn-form-control-border-width: $dsn-border-width-thin; //
|
|
424
|
-
$dsn-form-control-hover-border-width: $dsn-border-width-medium; //
|
|
425
|
-
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; //
|
|
426
|
-
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; //
|
|
427
|
-
$dsn-form-control-focus-border-width: $dsn-border-width-medium; //
|
|
428
|
-
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; //
|
|
429
|
-
$dsn-form-control-active-border-width: $dsn-border-width-medium; //
|
|
430
|
-
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; //
|
|
431
|
-
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; //
|
|
432
|
-
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; //
|
|
433
|
-
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; //
|
|
434
|
-
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; //
|
|
435
|
-
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; //
|
|
436
|
-
$dsn-form-control-background-color: $dsn-color-neutral-bg-document; //
|
|
437
|
-
$dsn-form-control-border-color: $dsn-color-neutral-border-default; //
|
|
438
|
-
$dsn-form-control-color: $dsn-color-neutral-color-document; //
|
|
439
|
-
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; //
|
|
440
|
-
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; //
|
|
441
|
-
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; //
|
|
442
|
-
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; //
|
|
443
|
-
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
444
|
-
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; //
|
|
445
|
-
$dsn-form-control-read-only-border-color: $dsn-color-transparent; //
|
|
446
|
-
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; //
|
|
423
|
+
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Linker padding van form controls
|
|
424
|
+
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Rechter padding van form controls
|
|
425
|
+
$dsn-form-control-border-radius: $dsn-border-radius-square; // Afronding van form controls
|
|
426
|
+
$dsn-form-control-border-width: $dsn-border-width-thin; // Randbreedte van form controls
|
|
427
|
+
$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Randbreedte van form controls in hover state
|
|
428
|
+
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Achtergrondkleur van form controls in hover state
|
|
429
|
+
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Randkleur van form controls in hover state
|
|
430
|
+
$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Randbreedte van form controls in focus state
|
|
431
|
+
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in focus state
|
|
432
|
+
$dsn-form-control-active-border-width: $dsn-border-width-medium; // Randbreedte van form controls in active state
|
|
433
|
+
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Achtergrondkleur van form controls in active state
|
|
434
|
+
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in active state
|
|
435
|
+
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Randbreedte van form controls in invalid state
|
|
436
|
+
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur van form controls in invalid state
|
|
437
|
+
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Randkleur van form controls in invalid state
|
|
438
|
+
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Tekstkleur van form controls in invalid state
|
|
439
|
+
$dsn-form-control-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van form controls
|
|
440
|
+
$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Randkleur van form controls
|
|
441
|
+
$dsn-form-control-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls
|
|
442
|
+
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Tekstkleur van placeholder in form controls
|
|
443
|
+
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Accentkleur van form controls in disabled state
|
|
444
|
+
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in disabled state
|
|
445
|
+
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Randkleur van form controls in disabled state
|
|
446
|
+
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van form controls in disabled state
|
|
447
|
+
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in read-only state
|
|
448
|
+
$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Randkleur van form controls in read-only state
|
|
449
|
+
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls in read-only state
|
|
447
450
|
$dsn-box-shadow-sm: 0 1px 2px 0 $dsn-color-shadow-direct, 0 2px 4px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Kleine elevatie — cards, chips, kleine floating elementen
|
|
448
451
|
$dsn-box-shadow-md: 0 2px 4px 0 $dsn-color-shadow-direct, 0 8px 16px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Middelgrote elevatie — dropdowns, date pickers, tooltips
|
|
449
452
|
$dsn-box-shadow-lg: 0 4px 8px 0 $dsn-color-shadow-direct, 0 16px 32px 0 $dsn-color-shadow-ambient, 0 0 0 1px $dsn-color-shadow-highlight; // Grote elevatie — modals, dialogen, side panels
|
|
450
|
-
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
453
|
+
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
451
454
|
$dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
452
|
-
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
453
|
-
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
454
|
-
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
455
|
-
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
456
|
-
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
457
|
-
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; //
|
|
458
|
-
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
459
|
-
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; //
|
|
460
|
-
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; //
|
|
461
|
-
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
462
|
-
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; //
|
|
463
|
-
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
464
|
-
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; //
|
|
465
|
-
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; //
|
|
455
|
+
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
456
|
+
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
457
|
+
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
458
|
+
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
459
|
+
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
460
|
+
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
461
|
+
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
462
|
+
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
463
|
+
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
464
|
+
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
465
|
+
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
466
|
+
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
467
|
+
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
468
|
+
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
466
469
|
$dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
467
|
-
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
468
|
-
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; //
|
|
469
|
-
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
470
|
-
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; //
|
|
471
|
-
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
472
|
-
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; //
|
|
473
|
-
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; //
|
|
474
|
-
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; //
|
|
475
|
-
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; //
|
|
476
|
-
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; //
|
|
477
|
-
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; //
|
|
478
|
-
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
479
|
-
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; //
|
|
480
|
-
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; //
|
|
481
|
-
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
482
|
-
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
483
|
-
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; //
|
|
484
|
-
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
485
|
-
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; //
|
|
486
|
-
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
487
|
-
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; //
|
|
488
|
-
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; //
|
|
489
|
-
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; //
|
|
490
|
-
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; //
|
|
491
|
-
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; //
|
|
492
|
-
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; //
|
|
493
|
-
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
494
|
-
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; //
|
|
495
|
-
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
496
|
-
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
497
|
-
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
498
|
-
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
499
|
-
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
500
|
-
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
501
|
-
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
502
|
-
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; //
|
|
503
|
-
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
504
|
-
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; //
|
|
505
|
-
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; //
|
|
506
|
-
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
507
|
-
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; //
|
|
508
|
-
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
509
|
-
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; //
|
|
510
|
-
$dsn-color-info-bg-document: $dsn-color-accent-1-bg-document; //
|
|
470
|
+
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
471
|
+
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
472
|
+
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
473
|
+
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
474
|
+
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
475
|
+
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
476
|
+
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
477
|
+
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
478
|
+
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
479
|
+
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
480
|
+
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
481
|
+
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
482
|
+
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
483
|
+
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond — primaire acties (buttons)
|
|
484
|
+
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background — primaire acties (buttons)
|
|
485
|
+
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond — primaire acties (buttons)
|
|
486
|
+
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond — primaire acties (buttons)
|
|
487
|
+
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state — primaire acties (buttons)
|
|
488
|
+
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state — primaire acties (buttons)
|
|
489
|
+
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand — primaire acties (buttons)
|
|
490
|
+
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Standaard rand — primaire acties (buttons)
|
|
491
|
+
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state — primaire acties (buttons)
|
|
492
|
+
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Rand in active state — primaire acties (buttons)
|
|
493
|
+
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur — primaire acties (buttons)
|
|
494
|
+
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state — primaire acties (buttons)
|
|
495
|
+
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Tekst in active state — primaire acties (buttons)
|
|
496
|
+
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur — primaire acties (buttons)
|
|
497
|
+
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur — primaire acties (buttons)
|
|
498
|
+
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond — secundaire acties (links, navigatie)
|
|
499
|
+
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background — secundaire acties (links, navigatie)
|
|
500
|
+
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond — secundaire acties (links, navigatie)
|
|
501
|
+
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond — secundaire acties (links, navigatie)
|
|
502
|
+
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state — secundaire acties (links, navigatie)
|
|
503
|
+
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state — secundaire acties (links, navigatie)
|
|
504
|
+
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand — secundaire acties (links, navigatie)
|
|
505
|
+
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand — secundaire acties (links, navigatie)
|
|
506
|
+
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state — secundaire acties (links, navigatie)
|
|
507
|
+
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state — secundaire acties (links, navigatie)
|
|
508
|
+
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur — secundaire acties (links, navigatie)
|
|
509
|
+
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state — secundaire acties (links, navigatie)
|
|
510
|
+
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state — secundaire acties (links, navigatie)
|
|
511
|
+
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur — secundaire acties (links, navigatie)
|
|
512
|
+
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur — secundaire acties (links, navigatie)
|
|
513
|
+
$dsn-color-info-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
511
514
|
$dsn-color-info-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
512
|
-
$dsn-color-info-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
513
|
-
$dsn-color-info-bg-default: $dsn-color-accent-1-bg-default; //
|
|
514
|
-
$dsn-color-info-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
515
|
-
$dsn-color-info-bg-active: $dsn-color-accent-1-bg-active; //
|
|
516
|
-
$dsn-color-info-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
517
|
-
$dsn-color-info-border-default: $dsn-color-accent-1-border-default; //
|
|
518
|
-
$dsn-color-info-border-hover: $dsn-color-accent-1-border-hover; //
|
|
519
|
-
$dsn-color-info-border-active: $dsn-color-accent-1-border-active; //
|
|
520
|
-
$dsn-color-info-color-default: $dsn-color-accent-1-color-default; //
|
|
521
|
-
$dsn-color-info-color-hover: $dsn-color-accent-1-color-hover; //
|
|
522
|
-
$dsn-color-info-color-active: $dsn-color-accent-1-color-active; //
|
|
523
|
-
$dsn-color-info-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
524
|
-
$dsn-color-info-color-document: $dsn-color-accent-1-color-document; //
|
|
525
|
-
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
515
|
+
$dsn-color-info-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
516
|
+
$dsn-color-info-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
517
|
+
$dsn-color-info-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
518
|
+
$dsn-color-info-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
519
|
+
$dsn-color-info-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
520
|
+
$dsn-color-info-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
521
|
+
$dsn-color-info-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
522
|
+
$dsn-color-info-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
523
|
+
$dsn-color-info-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
524
|
+
$dsn-color-info-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
525
|
+
$dsn-color-info-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
526
|
+
$dsn-color-info-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
527
|
+
$dsn-color-info-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
528
|
+
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse)
|
|
526
529
|
$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
527
|
-
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
528
|
-
$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
529
|
-
$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
530
|
-
$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
531
|
-
$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
532
|
-
$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
533
|
-
$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
534
|
-
$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
535
|
-
$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
536
|
-
$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
537
|
-
$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
538
|
-
$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
539
|
-
$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
540
|
-
$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
530
|
+
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse)
|
|
531
|
+
$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse)
|
|
532
|
+
$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse)
|
|
533
|
+
$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse)
|
|
534
|
+
$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse)
|
|
535
|
+
$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse)
|
|
536
|
+
$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse)
|
|
537
|
+
$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse)
|
|
538
|
+
$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse)
|
|
539
|
+
$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse)
|
|
540
|
+
$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse)
|
|
541
|
+
$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse)
|
|
542
|
+
$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse)
|
|
543
|
+
$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse)
|
|
541
544
|
$dsn-color-accent-3-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
542
|
-
$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
543
|
-
$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
544
|
-
$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
545
|
-
$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
546
|
-
$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
547
|
-
$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
548
|
-
$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
549
|
-
$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
550
|
-
$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
551
|
-
$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
552
|
-
$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
553
|
-
$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
554
|
-
$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
555
|
-
$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
556
|
-
$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
557
|
-
$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
558
|
-
$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
559
|
-
$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
560
|
-
$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
561
|
-
$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
562
|
-
$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
563
|
-
$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
564
|
-
$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
565
|
-
$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
566
|
-
$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
567
|
-
$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
568
|
-
$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
569
|
-
$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
570
|
-
$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
571
|
-
$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
572
|
-
$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
573
|
-
$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
574
|
-
$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
575
|
-
$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
576
|
-
$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
577
|
-
$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
578
|
-
$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
579
|
-
$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
580
|
-
$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
581
|
-
$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
582
|
-
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
583
|
-
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
584
|
-
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
545
|
+
$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse)
|
|
546
|
+
$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse)
|
|
547
|
+
$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse)
|
|
548
|
+
$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse)
|
|
549
|
+
$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse)
|
|
550
|
+
$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse)
|
|
551
|
+
$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse)
|
|
552
|
+
$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse)
|
|
553
|
+
$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse)
|
|
554
|
+
$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse)
|
|
555
|
+
$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse)
|
|
556
|
+
$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse)
|
|
557
|
+
$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse)
|
|
558
|
+
$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse) — primaire acties (buttons)
|
|
559
|
+
$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) — primaire acties (buttons)
|
|
560
|
+
$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse) — primaire acties (buttons)
|
|
561
|
+
$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse) — primaire acties (buttons)
|
|
562
|
+
$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse) — primaire acties (buttons)
|
|
563
|
+
$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse) — primaire acties (buttons)
|
|
564
|
+
$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse) — primaire acties (buttons)
|
|
565
|
+
$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse) — primaire acties (buttons)
|
|
566
|
+
$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse) — primaire acties (buttons)
|
|
567
|
+
$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse) — primaire acties (buttons)
|
|
568
|
+
$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse) — primaire acties (buttons)
|
|
569
|
+
$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse) — primaire acties (buttons)
|
|
570
|
+
$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — primaire acties (buttons)
|
|
571
|
+
$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — primaire acties (buttons)
|
|
572
|
+
$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — primaire acties (buttons)
|
|
573
|
+
$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse) — secundaire acties (links, navigatie)
|
|
574
|
+
$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) — secundaire acties (links, navigatie)
|
|
575
|
+
$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse) — secundaire acties (links, navigatie)
|
|
576
|
+
$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse) — secundaire acties (links, navigatie)
|
|
577
|
+
$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse) — secundaire acties (links, navigatie)
|
|
578
|
+
$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse) — secundaire acties (links, navigatie)
|
|
579
|
+
$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse) — secundaire acties (links, navigatie)
|
|
580
|
+
$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse) — secundaire acties (links, navigatie)
|
|
581
|
+
$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse) — secundaire acties (links, navigatie)
|
|
582
|
+
$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse) — secundaire acties (links, navigatie)
|
|
583
|
+
$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
584
|
+
$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse) — secundaire acties (links, navigatie)
|
|
585
|
+
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — secundaire acties (links, navigatie)
|
|
586
|
+
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
587
|
+
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
585
588
|
$dsn-backdrop-background-color: $dsn-color-neutral-inverse-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document (#242424) zodat de overlay donker blijft in light mode.
|
|
586
589
|
$dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
|
|
587
590
|
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
588
591
|
$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
|
|
589
|
-
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border
|
|
590
|
-
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border
|
|
591
|
-
$dsn-alert-column-gap: $dsn-space-inline-md; //
|
|
592
|
-
$dsn-alert-padding-block: $dsn-space-block-xl; //
|
|
593
|
-
$dsn-alert-padding-inline: $dsn-space-inline-xl; //
|
|
594
|
-
$dsn-alert-row-gap: $dsn-space-row-md; //
|
|
595
|
-
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; //
|
|
596
|
-
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; //
|
|
597
|
-
$dsn-alert-negative-color: $dsn-color-negative-color-document; //
|
|
598
|
-
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; //
|
|
599
|
-
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; //
|
|
600
|
-
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; //
|
|
601
|
-
$dsn-alert-positive-color: $dsn-color-positive-color-document; //
|
|
602
|
-
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; //
|
|
603
|
-
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; //
|
|
604
|
-
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; //
|
|
605
|
-
$dsn-alert-warning-color: $dsn-color-warning-color-document; //
|
|
606
|
-
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; //
|
|
607
|
-
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; //
|
|
608
|
-
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font
|
|
609
|
-
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font
|
|
610
|
-
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line
|
|
611
|
-
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; //
|
|
612
|
-
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
613
|
-
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; //
|
|
614
|
-
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; //
|
|
615
|
-
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; //
|
|
616
|
-
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; //
|
|
617
|
-
$dsn-
|
|
618
|
-
$dsn-button-border-
|
|
619
|
-
$dsn-button-
|
|
620
|
-
$dsn-button-font-
|
|
621
|
-
$dsn-button-
|
|
622
|
-
$dsn-button-
|
|
623
|
-
$dsn-button-min-
|
|
624
|
-
$dsn-button-
|
|
625
|
-
$dsn-button-default-
|
|
626
|
-
$dsn-button-default-negative-
|
|
627
|
-
$dsn-button-default-negative-color: $dsn-color-negative-
|
|
628
|
-
$dsn-button-default-negative-
|
|
629
|
-
$dsn-button-default-negative-active-
|
|
630
|
-
$dsn-button-default-negative-active-color: $dsn-color-negative-
|
|
631
|
-
$dsn-button-default-negative-
|
|
632
|
-
$dsn-button-default-negative-hover-
|
|
633
|
-
$dsn-button-default-negative-hover-color: $dsn-color-negative-
|
|
634
|
-
$dsn-button-default-
|
|
635
|
-
$dsn-button-default-positive-
|
|
636
|
-
$dsn-button-default-positive-color: $dsn-color-positive-
|
|
637
|
-
$dsn-button-default-positive-
|
|
638
|
-
$dsn-button-default-positive-active-
|
|
639
|
-
$dsn-button-default-positive-active-color: $dsn-color-positive-
|
|
640
|
-
$dsn-button-default-positive-
|
|
641
|
-
$dsn-button-default-positive-hover-
|
|
642
|
-
$dsn-button-default-positive-hover-color: $dsn-color-positive-
|
|
643
|
-
$dsn-button-
|
|
644
|
-
$dsn-button-strong-
|
|
645
|
-
$dsn-button-strong-
|
|
646
|
-
$dsn-button-strong-
|
|
647
|
-
$dsn-button-strong-negative-
|
|
648
|
-
$dsn-button-strong-negative-color: $dsn-color-
|
|
649
|
-
$dsn-button-strong-negative-
|
|
650
|
-
$dsn-button-strong-negative-active-
|
|
651
|
-
$dsn-button-strong-negative-active-color: $dsn-color-
|
|
652
|
-
$dsn-button-strong-negative-
|
|
653
|
-
$dsn-button-strong-negative-hover-
|
|
654
|
-
$dsn-button-strong-negative-hover-color: $dsn-color-
|
|
655
|
-
$dsn-button-strong-
|
|
656
|
-
$dsn-button-strong-positive-
|
|
657
|
-
$dsn-button-strong-positive-color: $dsn-color-
|
|
658
|
-
$dsn-button-strong-positive-
|
|
659
|
-
$dsn-button-strong-positive-active-
|
|
660
|
-
$dsn-button-strong-positive-active-color: $dsn-color-
|
|
661
|
-
$dsn-button-strong-positive-
|
|
662
|
-
$dsn-button-strong-positive-hover-
|
|
663
|
-
$dsn-button-strong-positive-hover-color: $dsn-color-
|
|
664
|
-
$dsn-button-
|
|
665
|
-
$dsn-button-subtle-
|
|
666
|
-
$dsn-button-subtle-
|
|
667
|
-
$dsn-button-subtle-
|
|
668
|
-
$dsn-button-subtle-
|
|
669
|
-
$dsn-button-subtle-negative-
|
|
670
|
-
$dsn-button-subtle-negative-color: $dsn-color-
|
|
671
|
-
$dsn-button-subtle-negative-
|
|
672
|
-
$dsn-button-subtle-negative-active-
|
|
673
|
-
$dsn-button-subtle-negative-active-color: $dsn-color-
|
|
674
|
-
$dsn-button-subtle-negative-
|
|
675
|
-
$dsn-button-subtle-negative-hover-
|
|
676
|
-
$dsn-button-subtle-negative-hover-color: $dsn-color-
|
|
677
|
-
$dsn-button-subtle-
|
|
678
|
-
$dsn-button-subtle-positive-
|
|
679
|
-
$dsn-button-subtle-positive-color: $dsn-color-
|
|
680
|
-
$dsn-button-subtle-positive-
|
|
681
|
-
$dsn-button-subtle-positive-active-
|
|
682
|
-
$dsn-button-subtle-positive-active-color: $dsn-color-
|
|
683
|
-
$dsn-button-subtle-positive-
|
|
684
|
-
$dsn-button-subtle-positive-hover-
|
|
685
|
-
$dsn-button-subtle-positive-hover-color: $dsn-color-
|
|
686
|
-
$dsn-button-
|
|
687
|
-
$dsn-button-disabled-color: $dsn-color-neutral-
|
|
688
|
-
$dsn-button-disabled-
|
|
689
|
-
$dsn-button-
|
|
690
|
-
$dsn-button-size-default-
|
|
691
|
-
$dsn-button-size-default-
|
|
692
|
-
$dsn-button-size-default-padding
|
|
693
|
-
$dsn-button-size-default-padding-
|
|
694
|
-
$dsn-button-size-
|
|
695
|
-
$dsn-button-size-large-
|
|
696
|
-
$dsn-button-size-large-
|
|
697
|
-
$dsn-button-size-large-padding
|
|
698
|
-
$dsn-button-size-large-padding-
|
|
699
|
-
$dsn-button-size-
|
|
700
|
-
$dsn-button-size-small-
|
|
701
|
-
$dsn-button-size-small-
|
|
702
|
-
$dsn-button-size-small-padding
|
|
703
|
-
$dsn-button-size-small-padding-
|
|
592
|
+
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen)
|
|
593
|
+
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border-breedte (alleen linkerborder)
|
|
594
|
+
$dsn-alert-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
595
|
+
$dsn-alert-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
596
|
+
$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontale padding
|
|
597
|
+
$dsn-alert-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
598
|
+
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
599
|
+
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Borderkleur voor negative variant
|
|
600
|
+
$dsn-alert-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
601
|
+
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
602
|
+
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
603
|
+
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Borderkleur voor positive variant
|
|
604
|
+
$dsn-alert-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
605
|
+
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
606
|
+
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
607
|
+
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Borderkleur voor warning variant
|
|
608
|
+
$dsn-alert-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
609
|
+
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
610
|
+
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Ruimte tussen breadcrumb-items
|
|
611
|
+
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font-size — sm (consistent met Link size small)
|
|
612
|
+
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font-gewicht
|
|
613
|
+
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line-height — sm (consistent met Link size small)
|
|
614
|
+
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Kleur van het huidige pagina-item
|
|
615
|
+
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimale aanraak-/klikhoogte
|
|
616
|
+
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Verticale padding om de min-block-size te bereiken
|
|
617
|
+
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // Geen horizontale padding op items
|
|
618
|
+
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Ruimte tussen icoon en linktekst
|
|
619
|
+
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Kleur van het scheidingsicoon
|
|
620
|
+
$dsn-breakout-section-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de BreakoutSection — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
621
|
+
$dsn-button-border-radius: $dsn-border-radius-md; // Button border-radius
|
|
622
|
+
$dsn-button-border-width: $dsn-border-width-thin; // Button border-breedte
|
|
623
|
+
$dsn-button-font-family: $dsn-text-font-family-default; // Button font-familie
|
|
624
|
+
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font-gewicht
|
|
625
|
+
$dsn-button-line-height: $dsn-text-line-height-md; // Button line-height
|
|
626
|
+
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel)
|
|
627
|
+
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel)
|
|
628
|
+
$dsn-button-default-background-color: $dsn-color-transparent; // Achtergrond van de default button
|
|
629
|
+
$dsn-button-default-negative-background-color: $dsn-color-transparent; // Achtergrond van de default negative button
|
|
630
|
+
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Border van de default negative button
|
|
631
|
+
$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de default negative button
|
|
632
|
+
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de default negative button op active
|
|
633
|
+
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Border van de default negative button op active
|
|
634
|
+
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de default negative button op active
|
|
635
|
+
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de default negative button op hover
|
|
636
|
+
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Border van de default negative button op hover
|
|
637
|
+
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de default negative button op hover
|
|
638
|
+
$dsn-button-default-positive-background-color: $dsn-color-transparent; // Achtergrond van de default positive button
|
|
639
|
+
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Border van de default positive button
|
|
640
|
+
$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de default positive button
|
|
641
|
+
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de default positive button op active
|
|
642
|
+
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Border van de default positive button op active
|
|
643
|
+
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de default positive button op active
|
|
644
|
+
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de default positive button op hover
|
|
645
|
+
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Border van de default positive button op hover
|
|
646
|
+
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de default positive button op hover
|
|
647
|
+
$dsn-button-strong-border-color: $dsn-color-transparent; // Border van de strong button
|
|
648
|
+
$dsn-button-strong-active-border-color: $dsn-color-transparent; // Border van de strong button op active
|
|
649
|
+
$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Border van de strong button op hover
|
|
650
|
+
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrond van de strong negative button
|
|
651
|
+
$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Border van de strong negative button
|
|
652
|
+
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Tekst-/icoonkleur van de strong negative button
|
|
653
|
+
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Achtergrond van de strong negative button op active
|
|
654
|
+
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Border van de strong negative button op active
|
|
655
|
+
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Tekst-/icoonkleur van de strong negative button op active
|
|
656
|
+
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Achtergrond van de strong negative button op hover
|
|
657
|
+
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Border van de strong negative button op hover
|
|
658
|
+
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Tekst-/icoonkleur van de strong negative button op hover
|
|
659
|
+
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrond van de strong positive button
|
|
660
|
+
$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Border van de strong positive button
|
|
661
|
+
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Tekst-/icoonkleur van de strong positive button
|
|
662
|
+
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Achtergrond van de strong positive button op active
|
|
663
|
+
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Border van de strong positive button op active
|
|
664
|
+
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Tekst-/icoonkleur van de strong positive button op active
|
|
665
|
+
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Achtergrond van de strong positive button op hover
|
|
666
|
+
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Border van de strong positive button op hover
|
|
667
|
+
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Tekst-/icoonkleur van de strong positive button op hover
|
|
668
|
+
$dsn-button-subtle-background-color: $dsn-color-transparent; // Achtergrond van de subtle button
|
|
669
|
+
$dsn-button-subtle-border-color: $dsn-color-transparent; // Border van de subtle button
|
|
670
|
+
$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Border van de subtle button op active
|
|
671
|
+
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Border van de subtle button op hover
|
|
672
|
+
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Achtergrond van de subtle negative button
|
|
673
|
+
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Border van de subtle negative button
|
|
674
|
+
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de subtle negative button
|
|
675
|
+
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de subtle negative button op active
|
|
676
|
+
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Border van de subtle negative button op active
|
|
677
|
+
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de subtle negative button op active
|
|
678
|
+
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de subtle negative button op hover
|
|
679
|
+
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Border van de subtle negative button op hover
|
|
680
|
+
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de subtle negative button op hover
|
|
681
|
+
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Achtergrond van de subtle positive button
|
|
682
|
+
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Border van de subtle positive button
|
|
683
|
+
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de subtle positive button
|
|
684
|
+
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de subtle positive button op active
|
|
685
|
+
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Border van de subtle positive button op active
|
|
686
|
+
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de subtle positive button op active
|
|
687
|
+
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de subtle positive button op hover
|
|
688
|
+
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Border van de subtle positive button op hover
|
|
689
|
+
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de subtle positive button op hover
|
|
690
|
+
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
691
|
+
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
692
|
+
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
693
|
+
$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default button
|
|
694
|
+
$dsn-button-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default button
|
|
695
|
+
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Padding van de icon-only default button
|
|
696
|
+
$dsn-button-size-default-padding-block: $dsn-space-block-md; // Verticale padding van de default button
|
|
697
|
+
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de default button
|
|
698
|
+
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large button
|
|
699
|
+
$dsn-button-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large button
|
|
700
|
+
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Padding van de icon-only large button
|
|
701
|
+
$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Verticale padding van de large button
|
|
702
|
+
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Horizontale padding van de large button
|
|
703
|
+
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small button
|
|
704
|
+
$dsn-button-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small button
|
|
705
|
+
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Padding van de icon-only small button
|
|
706
|
+
$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Verticale padding van de small button
|
|
707
|
+
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de small button
|
|
704
708
|
$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
|
|
705
709
|
$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
|
|
706
710
|
$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
|
|
@@ -718,17 +722,17 @@ $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de ca
|
|
|
718
722
|
$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
|
|
719
723
|
$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
|
|
720
724
|
$dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
|
|
721
|
-
$dsn-checkbox-group-border-width: $dsn-border-width-none; //
|
|
722
|
-
$dsn-checkbox-group-gap: $dsn-space-block-sm; //
|
|
723
|
-
$dsn-checkbox-group-margin: $dsn-space-none; //
|
|
724
|
-
$dsn-checkbox-group-padding: $dsn-space-none; //
|
|
725
|
+
$dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
726
|
+
$dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
|
|
727
|
+
$dsn-checkbox-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
728
|
+
$dsn-checkbox-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
725
729
|
$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
|
|
726
730
|
$dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
727
|
-
$dsn-checkbox-border-radius: $dsn-border-radius-square; //
|
|
731
|
+
$dsn-checkbox-border-radius: $dsn-border-radius-square; // Vierkante hoeken voor de checkbox
|
|
728
732
|
$dsn-checkbox-border-width: $dsn-border-width-thin;
|
|
729
733
|
$dsn-checkbox-active-border-width: $dsn-border-width-medium;
|
|
730
734
|
$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
|
|
731
|
-
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
735
|
+
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van het vinkje
|
|
732
736
|
$dsn-checkbox-focus-border-width: $dsn-border-width-medium;
|
|
733
737
|
$dsn-checkbox-hover-border-width: $dsn-border-width-medium;
|
|
734
738
|
$dsn-checkbox-invalid-border-width: $dsn-border-width-medium;
|
|
@@ -738,7 +742,7 @@ $dsn-checkbox-checked-focus-border-width: $dsn-border-width-medium;
|
|
|
738
742
|
$dsn-checkbox-checked-hover-border-width: $dsn-border-width-medium;
|
|
739
743
|
$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
740
744
|
$dsn-checkbox-indeterminate-border-width: $dsn-border-width-thin;
|
|
741
|
-
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; //
|
|
745
|
+
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Kleur van het indeterminate-icoon (minteken)
|
|
742
746
|
$dsn-checkbox-indeterminate-active-border-width: $dsn-border-width-medium;
|
|
743
747
|
$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
|
|
744
748
|
$dsn-checkbox-indeterminate-focus-border-width: $dsn-border-width-medium;
|
|
@@ -755,13 +759,13 @@ $dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month a
|
|
|
755
759
|
$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
|
|
756
760
|
$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
|
|
757
761
|
$dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
|
|
758
|
-
$dsn-details-row-gap: $dsn-space-row-md; //
|
|
759
|
-
$dsn-details-summary-gap: $dsn-space-text-sm; //
|
|
760
|
-
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; //
|
|
761
|
-
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; //
|
|
762
|
-
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; //
|
|
763
|
-
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; //
|
|
764
|
-
$dsn-details-content-padding-block: $dsn-space-block-xl; //
|
|
762
|
+
$dsn-details-row-gap: $dsn-space-row-md; // Verticale ruimte tussen summary en inhoud
|
|
763
|
+
$dsn-details-summary-gap: $dsn-space-text-sm; // Ruimte tussen het chevron-icoon en de labeltekst
|
|
764
|
+
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Kleur van de linkerborder voor visuele groepering
|
|
765
|
+
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder
|
|
766
|
+
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Linker padding — lijnt de inhoud uit met de labeltekst
|
|
767
|
+
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Rechter padding
|
|
768
|
+
$dsn-details-content-padding-block: $dsn-space-block-xl; // Boven- en onderpadding
|
|
765
769
|
$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
|
|
766
770
|
$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
767
771
|
$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
|
|
@@ -779,9 +783,9 @@ $dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding va
|
|
|
779
783
|
$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
780
784
|
$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
781
785
|
$dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
782
|
-
$dsn-file-input-column-gap: $dsn-space-text-lg; //
|
|
783
|
-
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
784
|
-
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
786
|
+
$dsn-file-input-column-gap: $dsn-space-text-lg; // Ruimte tussen de file-selector-button en de bestandsnaamtekst
|
|
787
|
+
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
788
|
+
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
785
789
|
$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
|
|
786
790
|
$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
|
|
787
791
|
$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
|
|
@@ -803,69 +807,69 @@ $dsn-file-media-border-radius: $dsn-border-radius-sm;
|
|
|
803
807
|
$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
|
|
804
808
|
$dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
|
|
805
809
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
806
|
-
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; //
|
|
807
|
-
$dsn-form-field-description-font-family: $dsn-text-font-family-default; //
|
|
808
|
-
$dsn-form-field-description-font-size: $dsn-text-font-size-md; //
|
|
809
|
-
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; //
|
|
810
|
-
$dsn-form-field-description-line-height: $dsn-text-line-height-md; //
|
|
811
|
-
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; //
|
|
812
|
-
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; //
|
|
813
|
-
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; //
|
|
814
|
-
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; //
|
|
815
|
-
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; //
|
|
816
|
-
$dsn-form-field-error-message-gap: $dsn-space-text-sm; //
|
|
817
|
-
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; //
|
|
818
|
-
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; //
|
|
819
|
-
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; //
|
|
820
|
-
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; //
|
|
821
|
-
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; //
|
|
822
|
-
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; //
|
|
823
|
-
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; //
|
|
824
|
-
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; //
|
|
825
|
-
$dsn-form-field-label-color: $dsn-color-neutral-color-document; //
|
|
826
|
-
$dsn-form-field-label-font-family: $dsn-text-font-family-default; //
|
|
827
|
-
$dsn-form-field-label-font-size: $dsn-text-font-size-md; //
|
|
828
|
-
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; //
|
|
829
|
-
$dsn-form-field-label-line-height: $dsn-text-line-height-md; //
|
|
830
|
-
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; //
|
|
831
|
-
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; //
|
|
832
|
-
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; //
|
|
833
|
-
$dsn-form-field-status-font-family: $dsn-text-font-family-default; //
|
|
834
|
-
$dsn-form-field-status-font-size: $dsn-text-font-size-md; //
|
|
835
|
-
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; //
|
|
836
|
-
$dsn-form-field-status-gap: $dsn-space-text-sm; //
|
|
837
|
-
$dsn-form-field-status-line-height: $dsn-text-line-height-md; //
|
|
838
|
-
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; //
|
|
839
|
-
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; //
|
|
840
|
-
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; //
|
|
841
|
-
$dsn-form-field-margin-block-end: $dsn-space-none; //
|
|
842
|
-
$dsn-form-field-margin-block-start: $dsn-space-none; //
|
|
843
|
-
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
844
|
-
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; //
|
|
845
|
-
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; //
|
|
810
|
+
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de formulierveldbeschrijving
|
|
811
|
+
$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Font-familie van de formulierveldbeschrijving
|
|
812
|
+
$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Font-size van de formulierveldbeschrijving
|
|
813
|
+
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de formulierveldbeschrijving
|
|
814
|
+
$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Line-height van de formulierveldbeschrijving
|
|
815
|
+
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Ruimte onder de beschrijving voor het formulierbesturingselement
|
|
816
|
+
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
|
|
817
|
+
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Font-familie van de foutmelding
|
|
818
|
+
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Font-size van de foutmelding
|
|
819
|
+
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de foutmelding
|
|
820
|
+
$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Ruimte tussen icoon en foutmeldingstekst
|
|
821
|
+
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Line-height van de foutmelding
|
|
822
|
+
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Ruimte onder de foutmelding voor het formulierbesturingselement
|
|
823
|
+
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Tekstkleur van het labelachtervoegsel
|
|
824
|
+
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Font-familie van het labelachtervoegsel
|
|
825
|
+
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Font-size van het labelachtervoegsel
|
|
826
|
+
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Font-gewicht van het labelachtervoegsel
|
|
827
|
+
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Line-height van het labelachtervoegsel
|
|
828
|
+
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Ruimte tussen de labeltekst en het achtervoegsel
|
|
829
|
+
$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Tekstkleur van het formulierveldlabel
|
|
830
|
+
$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Font-familie van het formulierveldlabel
|
|
831
|
+
$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Font-size van het formulierveldlabel
|
|
832
|
+
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van het formulierveldlabel
|
|
833
|
+
$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Line-height van het formulierveldlabel
|
|
834
|
+
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt)
|
|
835
|
+
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Ruimte onder het label wanneer een beschrijving volgt
|
|
836
|
+
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie)
|
|
837
|
+
$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Font-familie van de veldstatus
|
|
838
|
+
$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Font-size van de veldstatus
|
|
839
|
+
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de veldstatus
|
|
840
|
+
$dsn-form-field-status-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst (positive en warning varianten)
|
|
841
|
+
$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Line-height van de veldstatus
|
|
842
|
+
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Ruimte boven het statusbericht na het formulierbesturingselement
|
|
843
|
+
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
844
|
+
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
845
|
+
$dsn-form-field-margin-block-end: $dsn-space-none; // Onderste margin van de formulierveldcontainer
|
|
846
|
+
$dsn-form-field-margin-block-start: $dsn-space-none; // Bovenste margin van de formulierveldcontainer
|
|
847
|
+
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
|
|
848
|
+
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder voor ongeldige formuliervelden
|
|
849
|
+
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker padding voor ongeldige formuliervelden (om de border op te vangen)
|
|
846
850
|
$dsn-grid-gutter: $dsn-space-column-xl; // Horizontal gap between grid columns (overridden to column.md in information-dense)
|
|
847
851
|
$dsn-grid-row-gap: $dsn-space-column-xl; // Vertical gap between grid rows (overridden to column.md in information-dense)
|
|
848
|
-
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
849
852
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
850
853
|
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
851
|
-
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
852
|
-
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
|
|
854
|
+
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
855
|
+
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
|
|
853
856
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
854
|
-
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
855
|
-
$dsn-hero-
|
|
857
|
+
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
858
|
+
$dsn-hero-border-block-width: $dsn-border-width-thin; // Breedte van de transparante border-block op de Hero — zichtbaar in forced-colors / High Contrast mode om de sectieafbakening aan te geven
|
|
859
|
+
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
856
860
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
857
861
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
858
862
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
859
863
|
$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
|
|
860
864
|
$dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
|
|
861
|
-
$dsn-link-gap: $dsn-space-text-sm; //
|
|
862
|
-
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
863
|
-
$dsn-link-size-default-font-size: $dsn-text-font-size-md; //
|
|
864
|
-
$dsn-link-size-default-gap: $dsn-space-text-sm; //
|
|
865
|
-
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; //
|
|
866
|
-
$dsn-link-size-large-gap: $dsn-space-text-md; //
|
|
867
|
-
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; //
|
|
868
|
-
$dsn-link-size-small-gap: $dsn-space-text-sm; //
|
|
865
|
+
$dsn-link-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de link
|
|
866
|
+
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de link op disabled
|
|
867
|
+
$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default link
|
|
868
|
+
$dsn-link-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default link
|
|
869
|
+
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large link
|
|
870
|
+
$dsn-link-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large link
|
|
871
|
+
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small link
|
|
872
|
+
$dsn-link-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small link
|
|
869
873
|
$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
|
|
870
874
|
$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
|
|
871
875
|
$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
|
|
@@ -897,28 +901,28 @@ $dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padd
|
|
|
897
901
|
$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
898
902
|
$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
899
903
|
$dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
900
|
-
$dsn-note-border-inline-start-width: $dsn-border-width-medium; //
|
|
901
|
-
$dsn-note-column-gap: $dsn-space-inline-md; //
|
|
902
|
-
$dsn-note-padding-block: $dsn-space-block-xl; //
|
|
903
|
-
$dsn-note-padding-inline-end: $dsn-space-inline-xl; //
|
|
904
|
-
$dsn-note-padding-inline-start: $dsn-space-inline-xl; //
|
|
905
|
-
$dsn-note-row-gap: $dsn-space-row-md; //
|
|
906
|
-
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; //
|
|
907
|
-
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
908
|
-
$dsn-note-negative-color: $dsn-color-negative-color-document; //
|
|
909
|
-
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; //
|
|
910
|
-
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
911
|
-
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; //
|
|
912
|
-
$dsn-note-neutral-color: $dsn-color-neutral-color-document; //
|
|
913
|
-
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; //
|
|
914
|
-
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; //
|
|
915
|
-
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; //
|
|
916
|
-
$dsn-note-positive-color: $dsn-color-positive-color-document; //
|
|
917
|
-
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; //
|
|
918
|
-
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; //
|
|
919
|
-
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; //
|
|
920
|
-
$dsn-note-warning-color: $dsn-color-warning-color-document; //
|
|
921
|
-
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; //
|
|
904
|
+
$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder van de Note
|
|
905
|
+
$dsn-note-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
906
|
+
$dsn-note-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
907
|
+
$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde
|
|
908
|
+
$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin (na de border)
|
|
909
|
+
$dsn-note-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
910
|
+
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
911
|
+
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor negative variant
|
|
912
|
+
$dsn-note-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
913
|
+
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
914
|
+
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant (standaard)
|
|
915
|
+
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Kleur van de linkerborder voor neutral variant (standaard)
|
|
916
|
+
$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Tekstkleur voor neutral variant (standaard)
|
|
917
|
+
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icoonkleur voor neutral variant (standaard)
|
|
918
|
+
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
919
|
+
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Kleur van de linkerborder voor positive variant
|
|
920
|
+
$dsn-note-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
921
|
+
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
922
|
+
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
923
|
+
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Kleur van de linkerborder voor warning variant
|
|
924
|
+
$dsn-note-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
925
|
+
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
922
926
|
$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
|
|
923
927
|
$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
|
|
924
928
|
$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
|
|
@@ -927,69 +931,69 @@ $dsn-number-badge-padding-inline: $dsn-space-inline-sm; // Horizontale padding
|
|
|
927
931
|
$dsn-number-badge-border-radius: $dsn-border-radius-round; // Pill-vorm via volledig ronde border-radius
|
|
928
932
|
$dsn-number-badge-border-width: $dsn-border-width-thin; // Transparante border voor forced-colors / High Contrast mode ondersteuning
|
|
929
933
|
$dsn-number-badge-border-color: $dsn-color-transparent; // Transparant by default; zichtbaar in forced-colors / High Contrast mode
|
|
930
|
-
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
|
|
934
|
+
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
|
|
931
935
|
$dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
|
|
932
|
-
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
|
|
936
|
+
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
|
|
933
937
|
$dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
|
|
934
|
-
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
|
|
938
|
+
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
|
|
935
939
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
936
|
-
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
|
|
940
|
+
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
|
|
937
941
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
938
|
-
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
|
|
942
|
+
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
|
|
939
943
|
$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
|
|
940
944
|
$dsn-option-label-color: $dsn-color-neutral-color-document;
|
|
941
945
|
$dsn-option-label-font-family: $dsn-text-font-family-default;
|
|
942
946
|
$dsn-option-label-font-size: $dsn-text-font-size-md;
|
|
943
947
|
$dsn-option-label-font-weight: $dsn-text-font-weight-default;
|
|
944
948
|
$dsn-option-label-line-height: $dsn-text-line-height-md;
|
|
945
|
-
$dsn-ordered-list-color: $dsn-color-neutral-color-document; //
|
|
946
|
-
$dsn-ordered-list-font-family: $dsn-text-font-family-default; //
|
|
947
|
-
$dsn-ordered-list-font-size: $dsn-text-font-size-md; //
|
|
948
|
-
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; //
|
|
949
|
-
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; //
|
|
950
|
-
$dsn-ordered-list-gap: $dsn-space-row-sm; //
|
|
951
|
-
$dsn-ordered-list-line-height: $dsn-text-line-height-md; //
|
|
952
|
-
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; //
|
|
953
|
-
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; //
|
|
954
|
-
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; //
|
|
949
|
+
$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Tekstkleur van de geordende lijst
|
|
950
|
+
$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Font-familie van de geordende lijst
|
|
951
|
+
$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Font-size van de geordende lijst
|
|
952
|
+
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de geordende lijst
|
|
953
|
+
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de geordende lijst voor leesbaarheid
|
|
954
|
+
$dsn-ordered-list-gap: $dsn-space-row-sm; // Ruimte tussen lijstitems
|
|
955
|
+
$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Line-height van de geordende lijst
|
|
956
|
+
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Onderste margin van de geordende lijst
|
|
957
|
+
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Kleur van het nummermarkeerteken
|
|
958
|
+
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Inspringing aan de linkerkant van de geordende lijst
|
|
955
959
|
$dsn-page-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de page-body binnenbalk — zelfde schaal als PageHeader en PageFooter voor een consistente paginakantranding
|
|
956
|
-
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
|
|
960
|
+
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
|
|
957
961
|
$dsn-page-footer-border-block-start-width: $dsn-border-width-thick; // Breedte van de bovenkantrand (4px) — spiegelt de PageHeader border-block-end voor visuele symmetrie
|
|
958
|
-
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
|
|
962
|
+
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
|
|
959
963
|
$dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
|
|
960
964
|
$dsn-page-footer-slot-gap: $dsn-space-block-xl; // Verticale witruimte tussen gestapelde slots op small viewport
|
|
961
965
|
$dsn-page-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer-binnenbalk — zelfde schaal als PageHeader masthead en navbar
|
|
962
966
|
$dsn-page-header-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de PageHeader — zelfde als pagina-achtergrond; de border-block-end doet het visuele scheidingswerk
|
|
963
967
|
$dsn-page-header-border-block-end-width: $dsn-border-width-thick; // Breedte van de onderkantrand (4px) — duidelijke visuele scheiding in lijn met overheids design system-patronen
|
|
964
|
-
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
|
|
968
|
+
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
|
|
965
969
|
$dsn-page-header-padding-block: $dsn-space-block-md; // Verticale padding van de header-binnenbalk
|
|
966
970
|
$dsn-page-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header-binnenbalk — zelfde schaal als masthead en navbar
|
|
967
971
|
$dsn-page-header-z-index: $dsn-z-index-300; // Z-index voor sticky/auto-hide gedrag — bewust lager dan backdrop (400) zodat Drawer/Modal-backdrop over de header schuift
|
|
968
972
|
$dsn-page-header-masthead-background-color: $dsn-color-neutral-bg-document; // Masthead achtergrond — zelfde neutrale kleur als pagina-achtergrond
|
|
969
973
|
$dsn-page-header-masthead-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de masthead
|
|
970
974
|
$dsn-page-header-masthead-padding-inline: $dsn-space-inline-xl; // Horizontale padding masthead — zelfde als navbar
|
|
971
|
-
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
|
|
975
|
+
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
|
|
972
976
|
$dsn-page-header-navbar-padding-inline: $dsn-space-inline-xl; // Horizontale padding navigatiebalk — zelfde als masthead
|
|
973
977
|
$dsn-page-header-secondary-nav-gap: $dsn-space-column-3xl; // Witruimte tussen servicemenu (Menu) en zoekveld in de masthead
|
|
974
|
-
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
|
|
978
|
+
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
|
|
975
979
|
$dsn-page-header-search-panel-padding-block: $dsn-space-block-md; // Verticale padding van het zoekpaneel
|
|
976
980
|
$dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizontale padding van het zoekpaneel
|
|
977
981
|
$dsn-page-header-compact-background-color: $dsn-color-neutral-bg-document; // Achtergrond van de compacte balk — zelfde neutrale kleur als masthead; de primaire navigatie staat hier direct naast het logo zonder aparte navbar
|
|
978
982
|
$dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
|
|
979
983
|
$dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
|
|
980
|
-
$dsn-paragraph-color: $dsn-color-neutral-color-document; //
|
|
981
|
-
$dsn-paragraph-font-family: $dsn-text-font-family-default; //
|
|
982
|
-
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; //
|
|
983
|
-
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; //
|
|
984
|
-
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; //
|
|
985
|
-
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; //
|
|
986
|
-
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; //
|
|
987
|
-
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; //
|
|
988
|
-
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; //
|
|
989
|
-
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; //
|
|
990
|
-
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; //
|
|
991
|
-
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; //
|
|
992
|
-
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; //
|
|
984
|
+
$dsn-paragraph-color: $dsn-color-neutral-color-document; // Tekstkleur van de alinea
|
|
985
|
+
$dsn-paragraph-font-family: $dsn-text-font-family-default; // Font-familie van de alinea
|
|
986
|
+
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de alinea
|
|
987
|
+
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de alinea voor leesbaarheid
|
|
988
|
+
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Font-size van de standaard alinea
|
|
989
|
+
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Line-height van de standaard alinea
|
|
990
|
+
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Onderste margin van de standaard alinea
|
|
991
|
+
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Font-size van de inleidende alinea
|
|
992
|
+
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Line-height van de inleidende alinea
|
|
993
|
+
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van de inleidende alinea
|
|
994
|
+
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
|
|
995
|
+
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
|
|
996
|
+
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
|
|
993
997
|
$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
|
|
994
998
|
$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
|
|
995
999
|
$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
|
|
@@ -1007,21 +1011,27 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1007
1011
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1008
1012
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1009
1013
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1010
|
-
$dsn-
|
|
1011
|
-
$dsn-
|
|
1014
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van de pre-heading
|
|
1015
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Font-familie van de pre-heading
|
|
1016
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Font-size van de pre-heading (gelijk aan de bodytekst)
|
|
1017
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel)
|
|
1018
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Line-height van de pre-heading
|
|
1019
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Ruimte tussen de pre-heading en de koptekst
|
|
1020
|
+
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Achtergrondtrack
|
|
1021
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk achtergrondkleur
|
|
1012
1022
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1013
1023
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1014
1024
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
1015
|
-
$dsn-radio-group-border-width: $dsn-border-width-none; //
|
|
1016
|
-
$dsn-radio-group-gap: $dsn-space-block-sm; //
|
|
1017
|
-
$dsn-radio-group-margin: $dsn-space-none; //
|
|
1018
|
-
$dsn-radio-group-padding: $dsn-space-none; //
|
|
1025
|
+
$dsn-radio-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
1026
|
+
$dsn-radio-group-gap: $dsn-space-block-sm; // Ruimte tussen de radio-opties in de groep
|
|
1027
|
+
$dsn-radio-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
1028
|
+
$dsn-radio-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
1019
1029
|
$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
|
|
1020
1030
|
$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
1021
1031
|
$dsn-radio-border-width: $dsn-border-width-thin;
|
|
1022
1032
|
$dsn-radio-active-border-width: $dsn-border-width-medium;
|
|
1023
1033
|
$dsn-radio-checked-border-width: $dsn-border-width-thin;
|
|
1024
|
-
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
1034
|
+
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van de binnenste cirkel wanneer aangevinkt
|
|
1025
1035
|
$dsn-radio-focus-border-width: $dsn-border-width-medium;
|
|
1026
1036
|
$dsn-radio-hover-border-width: $dsn-border-width-medium;
|
|
1027
1037
|
$dsn-radio-invalid-border-width: $dsn-border-width-medium;
|
|
@@ -1030,9 +1040,9 @@ $dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
|
1030
1040
|
$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
|
|
1031
1041
|
$dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
|
|
1032
1042
|
$dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1033
|
-
$dsn-search-input-icon-gap: $dsn-space-text-md; //
|
|
1034
|
-
$dsn-select-icon-gap: $dsn-space-text-md; //
|
|
1035
|
-
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; //
|
|
1043
|
+
$dsn-search-input-icon-gap: $dsn-space-text-md; // Ruimte tussen het zoekicoon en de invoertekst
|
|
1044
|
+
$dsn-select-icon-gap: $dsn-space-text-md; // Ruimte tussen het chevron-icoon en de selectietekst
|
|
1045
|
+
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Afstand van de inline-end border tot het chevron-icoon (8px)
|
|
1036
1046
|
$dsn-skip-link-z-index: $dsn-z-index-600; // Hoogste z-index — boven modals (500) en backdrop (400), zodat de skip-link altijd zichtbaar is bij focus
|
|
1037
1047
|
$dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
|
|
1038
1048
|
$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
|
|
@@ -1043,31 +1053,40 @@ $dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog
|
|
|
1043
1053
|
$dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
|
|
1044
1054
|
$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
|
|
1045
1055
|
$dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
|
|
1046
|
-
$dsn-status-badge-border-color: $dsn-color-transparent; //
|
|
1047
|
-
$dsn-status-badge-border-radius: $dsn-border-radius-sm; //
|
|
1048
|
-
$dsn-status-badge-border-width: $dsn-border-width-thin; //
|
|
1049
|
-
$dsn-status-badge-font-size: $dsn-text-font-size-sm; //
|
|
1050
|
-
$dsn-status-badge-gap: $dsn-space-text-sm; //
|
|
1051
|
-
$dsn-status-badge-line-height: $dsn-text-line-height-sm; //
|
|
1052
|
-
$dsn-status-badge-padding-block: $dsn-space-block-xs; //
|
|
1053
|
-
$dsn-status-badge-padding-inline: $dsn-space-inline-md; //
|
|
1054
|
-
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; //
|
|
1055
|
-
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; //
|
|
1056
|
-
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
1057
|
-
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; //
|
|
1058
|
-
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; //
|
|
1059
|
-
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; //
|
|
1060
|
-
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; //
|
|
1061
|
-
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; //
|
|
1062
|
-
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; //
|
|
1063
|
-
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; //
|
|
1064
|
-
$dsn-summary-list-row-gap: $dsn-space-inline-lg; //
|
|
1065
|
-
$dsn-summary-list-row-padding-block: $dsn-space-block-lg; //
|
|
1066
|
-
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; //
|
|
1067
|
-
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; //
|
|
1068
|
-
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; //
|
|
1069
|
-
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; //
|
|
1070
|
-
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra
|
|
1056
|
+
$dsn-status-badge-border-color: $dsn-color-transparent; // Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus)
|
|
1057
|
+
$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Border-radius van de StatusBadge
|
|
1058
|
+
$dsn-status-badge-border-width: $dsn-border-width-thin; // Border-breedte van de StatusBadge
|
|
1059
|
+
$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Font-size van de StatusBadge
|
|
1060
|
+
$dsn-status-badge-gap: $dsn-space-text-sm; // Ruimte tussen icoon en label
|
|
1061
|
+
$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Line-height van de StatusBadge
|
|
1062
|
+
$dsn-status-badge-padding-block: $dsn-space-block-xs; // Verticale padding
|
|
1063
|
+
$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontale padding
|
|
1064
|
+
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
1065
|
+
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Tekstkleur voor negative variant
|
|
1066
|
+
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant
|
|
1067
|
+
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Tekstkleur voor neutral variant
|
|
1068
|
+
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
1069
|
+
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
1070
|
+
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1071
|
+
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
1072
|
+
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Kleur van de rij-scheidingsborder
|
|
1073
|
+
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Breedte van de rij-scheidingsborder
|
|
1074
|
+
$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen kolommen in de gridindeling
|
|
1075
|
+
$dsn-summary-list-row-padding-block: $dsn-space-block-lg; // Verticale ruimte rondom elke rij — geldt voor zowel gestapelde als gridindeling; komt overeen met de celpadding van de Table
|
|
1076
|
+
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Tekstkleur van de sleutelcel
|
|
1077
|
+
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Vet gewicht onderscheidt de sleutel visueel van de waarde
|
|
1078
|
+
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Tekstkleur van de waardecel
|
|
1079
|
+
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Ruimte tussen meerdere actielinks in één rij
|
|
1080
|
+
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling
|
|
1081
|
+
$dsn-table-of-contents-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder (framed appearance)
|
|
1082
|
+
$dsn-table-of-contents-border-inline-start-color: $dsn-color-accent-1-border-default; // Kleur van de linkerborder (framed appearance)
|
|
1083
|
+
$dsn-table-of-contents-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur (framed appearance)
|
|
1084
|
+
$dsn-table-of-contents-padding-block: $dsn-space-block-xl; // Verticale padding (framed appearance)
|
|
1085
|
+
$dsn-table-of-contents-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin, na de border (framed appearance)
|
|
1086
|
+
$dsn-table-of-contents-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde (framed appearance)
|
|
1087
|
+
$dsn-table-of-contents-heading-gap: $dsn-space-row-xl; // Ruimte tussen de heading en de lijst met ankerlinks
|
|
1088
|
+
$dsn-table-of-contents-plain-padding-block: $dsn-space-block-md; // Plain-appearance-specifiek: verticale padding zodat de heading en het eerste ankerlink-item uitlijnen met het eerste item van de Sidebar/Sub-navigatie
|
|
1089
|
+
$dsn-table-of-contents-plain-list-gap: $dsn-space-row-lg; // Plain-appearance-specifiek: ruimte tussen de ankerlinks, ruimer dan de standaard lijst-gap zodat dit in balans is met de Sidebar/Sub-navigatie
|
|
1071
1090
|
$dsn-table-caption-color: $dsn-color-neutral-color-document;
|
|
1072
1091
|
$dsn-table-caption-font-family: $dsn-heading-font-family;
|
|
1073
1092
|
$dsn-table-caption-font-size: $dsn-text-font-size-xl;
|
|
@@ -1089,19 +1108,19 @@ $dsn-table-footer-color: $dsn-color-neutral-color-document;
|
|
|
1089
1108
|
$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
|
|
1090
1109
|
$dsn-table-wrapper-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de scroll-wrapper — moet overeenkomen met de pagina-achtergrond voor de scroll-schaduw techniek
|
|
1091
1110
|
$dsn-table-wrapper-scroll-shadow-color: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
|
|
1092
|
-
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
1093
|
-
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
1094
|
-
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
1095
|
-
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
1096
|
-
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
1097
|
-
$dsn-text-input-column-gap: $dsn-space-text-lg; //
|
|
1098
|
-
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
1099
|
-
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
1100
|
-
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
1101
|
-
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
1102
|
-
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
1103
|
-
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; //
|
|
1104
|
-
$dsn-time-input-icon-gap: $dsn-space-text-md; //
|
|
1111
|
+
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstveld
|
|
1112
|
+
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstveld
|
|
1113
|
+
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
1114
|
+
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
1115
|
+
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
1116
|
+
$dsn-text-input-column-gap: $dsn-space-text-lg; // Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning)
|
|
1117
|
+
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
1118
|
+
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
1119
|
+
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
1120
|
+
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
1121
|
+
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
1122
|
+
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Afstand van de inline-end border tot de klokknop (4px)
|
|
1123
|
+
$dsn-time-input-icon-gap: $dsn-space-text-md; // Ruimte tussen de klokknop en de invoertekst
|
|
1105
1124
|
$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
|
|
1106
1125
|
$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
|
|
1107
1126
|
$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
|
|
@@ -1112,59 +1131,59 @@ $dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list lin
|
|
|
1112
1131
|
$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
|
|
1113
1132
|
$dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
|
|
1114
1133
|
$dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
|
|
1115
|
-
$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1
|
|
1116
|
-
$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2
|
|
1117
|
-
$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3
|
|
1118
|
-
$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4
|
|
1119
|
-
$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5
|
|
1120
|
-
$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6
|
|
1121
|
-
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; //
|
|
1122
|
-
$dsn-form-control-hover-color: $dsn-form-control-color; //
|
|
1123
|
-
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; //
|
|
1124
|
-
$dsn-form-control-focus-color: $dsn-form-control-color; //
|
|
1125
|
-
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; //
|
|
1126
|
-
$dsn-form-control-active-color: $dsn-form-control-color; //
|
|
1127
|
-
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; //
|
|
1128
|
-
$dsn-alert-icon-size: $dsn-icon-size-xl; //
|
|
1129
|
-
$dsn-alert-info-background-color: $dsn-color-info-bg-default; //
|
|
1130
|
-
$dsn-alert-info-border-color: $dsn-color-info-border-default; //
|
|
1131
|
-
$dsn-alert-info-color: $dsn-color-info-color-document; //
|
|
1132
|
-
$dsn-alert-info-icon-color: $dsn-color-info-color-default; //
|
|
1133
|
-
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; //
|
|
1134
|
-
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1135
|
-
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; //
|
|
1136
|
-
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; //
|
|
1137
|
-
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; //
|
|
1138
|
-
$dsn-button-default-border-color: $dsn-color-action-1-border-default; //
|
|
1139
|
-
$dsn-button-default-color: $dsn-color-action-1-color-default; //
|
|
1140
|
-
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1141
|
-
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; //
|
|
1142
|
-
$dsn-button-default-active-color: $dsn-color-action-1-color-active; //
|
|
1143
|
-
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1144
|
-
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; //
|
|
1145
|
-
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; //
|
|
1146
|
-
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; //
|
|
1147
|
-
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; //
|
|
1148
|
-
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; //
|
|
1149
|
-
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; //
|
|
1150
|
-
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; //
|
|
1151
|
-
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; //
|
|
1152
|
-
$dsn-button-subtle-color: $dsn-color-action-1-color-default; //
|
|
1153
|
-
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1154
|
-
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; //
|
|
1155
|
-
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1156
|
-
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; //
|
|
1157
|
-
$dsn-button-size-default-icon-size: $dsn-icon-size-md; //
|
|
1158
|
-
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1159
|
-
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; //
|
|
1134
|
+
$dsn-heading-level-1-color: $dsn-heading-color; // Tekstkleur van Heading 1
|
|
1135
|
+
$dsn-heading-level-2-color: $dsn-heading-color; // Tekstkleur van Heading 2
|
|
1136
|
+
$dsn-heading-level-3-color: $dsn-heading-color; // Tekstkleur van Heading 3
|
|
1137
|
+
$dsn-heading-level-4-color: $dsn-heading-color; // Tekstkleur van Heading 4
|
|
1138
|
+
$dsn-heading-level-5-color: $dsn-heading-color; // Tekstkleur van Heading 5
|
|
1139
|
+
$dsn-heading-level-6-color: $dsn-heading-color; // Tekstkleur van Heading 6
|
|
1140
|
+
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Accentkleur van form controls in hover state
|
|
1141
|
+
$dsn-form-control-hover-color: $dsn-form-control-color; // Tekstkleur van form controls in hover state
|
|
1142
|
+
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Achtergrondkleur van form controls in focus state
|
|
1143
|
+
$dsn-form-control-focus-color: $dsn-form-control-color; // Tekstkleur van form controls in focus state
|
|
1144
|
+
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Accentkleur van form controls in active state
|
|
1145
|
+
$dsn-form-control-active-color: $dsn-form-control-color; // Tekstkleur van form controls in active state
|
|
1146
|
+
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Accentkleur van form controls (checkboxes, radio buttons)
|
|
1147
|
+
$dsn-alert-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom)
|
|
1148
|
+
$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant (standaard)
|
|
1149
|
+
$dsn-alert-info-border-color: $dsn-color-info-border-default; // Borderkleur voor info variant (standaard)
|
|
1150
|
+
$dsn-alert-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant (standaard)
|
|
1151
|
+
$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant (standaard)
|
|
1152
|
+
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1153
|
+
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Linkkleur op hover
|
|
1154
|
+
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Linkkleur op active
|
|
1155
|
+
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon)
|
|
1156
|
+
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Grootte van het terug-icoon — sm (consistent met Link size small)
|
|
1157
|
+
$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Border van de default button
|
|
1158
|
+
$dsn-button-default-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de default button
|
|
1159
|
+
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de default button op active
|
|
1160
|
+
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Border van de default button op active
|
|
1161
|
+
$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de default button op active
|
|
1162
|
+
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de default button op hover
|
|
1163
|
+
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Border van de default button op hover
|
|
1164
|
+
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de default button op hover
|
|
1165
|
+
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Achtergrond van de strong button
|
|
1166
|
+
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Tekst-/icoonkleur van de strong button
|
|
1167
|
+
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Achtergrond van de strong button op active
|
|
1168
|
+
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Tekst-/icoonkleur van de strong button op active
|
|
1169
|
+
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Achtergrond van de strong button op hover
|
|
1170
|
+
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Tekst-/icoonkleur van de strong button op hover
|
|
1171
|
+
$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de subtle button
|
|
1172
|
+
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de subtle button op active
|
|
1173
|
+
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de subtle button op active
|
|
1174
|
+
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de subtle button op hover
|
|
1175
|
+
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de subtle button op hover
|
|
1176
|
+
$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
|
|
1177
|
+
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
|
|
1178
|
+
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
|
|
1160
1179
|
$dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
|
|
1161
1180
|
$dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
|
|
1162
|
-
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; //
|
|
1163
|
-
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1164
|
-
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1165
|
-
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1166
|
-
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1167
|
-
$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; //
|
|
1181
|
+
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1182
|
+
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1183
|
+
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1184
|
+
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1185
|
+
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1186
|
+
$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Ruimte onder de legend voor de checkbox-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt)
|
|
1168
1187
|
$dsn-checkbox-background-color: $dsn-form-control-background-color;
|
|
1169
1188
|
$dsn-checkbox-border-color: $dsn-form-control-border-color;
|
|
1170
1189
|
$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
|
|
@@ -1185,33 +1204,33 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
|
|
|
1185
1204
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1186
1205
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1187
1206
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1188
|
-
$dsn-details-summary-color: $dsn-color-action-2-color-default; //
|
|
1189
|
-
$dsn-details-
|
|
1207
|
+
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
|
|
1208
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
|
|
1190
1209
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1191
1210
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1192
1211
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1193
1212
|
$dsn-date-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-date-input-icon-size + $dsn-date-input-button-inset-inline-end + $dsn-date-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1194
|
-
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; //
|
|
1195
|
-
$dsn-details-
|
|
1196
|
-
$dsn-file-input-color: $dsn-form-control-placeholder-color; //
|
|
1197
|
-
$dsn-file-input-font-family: $dsn-form-control-font-family; //
|
|
1198
|
-
$dsn-file-input-font-size: $dsn-form-control-font-size; //
|
|
1199
|
-
$dsn-file-input-font-weight: $dsn-form-control-font-weight; //
|
|
1200
|
-
$dsn-file-input-line-height: $dsn-form-control-line-height; //
|
|
1201
|
-
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; //
|
|
1213
|
+
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
|
|
1214
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
|
|
1215
|
+
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
|
|
1216
|
+
$dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
|
|
1217
|
+
$dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
|
|
1218
|
+
$dsn-file-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het bestandsinvoerveld
|
|
1219
|
+
$dsn-file-input-line-height: $dsn-form-control-line-height; // Line-height van het bestandsinvoerveld
|
|
1220
|
+
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Gedempte tekstkleur voor de disabled staat
|
|
1202
1221
|
$dsn-file-box-shadow-hover: $dsn-box-shadow-md; // Hogere elevatie bij hover — zelfde als Card hover
|
|
1203
1222
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1204
1223
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1205
|
-
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; //
|
|
1206
|
-
$dsn-form-field-status-icon-size: $dsn-icon-size-md; //
|
|
1207
|
-
$dsn-link-color: $dsn-color-action-2-color-default; //
|
|
1208
|
-
$dsn-link-icon-size: $dsn-icon-size-md; //
|
|
1209
|
-
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; //
|
|
1210
|
-
$dsn-link-active-color: $dsn-color-action-2-color-active; //
|
|
1211
|
-
$dsn-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1212
|
-
$dsn-link-size-default-icon-size: $dsn-icon-size-md; //
|
|
1213
|
-
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1214
|
-
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; //
|
|
1224
|
+
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
|
|
1225
|
+
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
|
|
1226
|
+
$dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1227
|
+
$dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
|
|
1228
|
+
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
|
|
1229
|
+
$dsn-link-active-color: $dsn-color-action-2-color-active; // Tekstkleur van de link op active
|
|
1230
|
+
$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Tekstkleur van de link op hover
|
|
1231
|
+
$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
|
|
1232
|
+
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link
|
|
1233
|
+
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small link
|
|
1215
1234
|
$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
|
|
1216
1235
|
$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
|
|
1217
1236
|
$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
|
|
@@ -1222,28 +1241,28 @@ $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-spe
|
|
|
1222
1241
|
$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
|
|
1223
1242
|
$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
|
|
1224
1243
|
$dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
|
|
1225
|
-
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
|
|
1244
|
+
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
|
|
1226
1245
|
$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
|
|
1227
1246
|
$dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
|
|
1228
1247
|
$dsn-modal-dialog-box-shadow: $dsn-box-shadow-lg; // Schaduw van het dialoogvenster — hoogste elevatie (lg)
|
|
1229
1248
|
$dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
|
|
1230
|
-
$dsn-note-icon-size: $dsn-icon-size-xl; //
|
|
1231
|
-
$dsn-note-info-background-color: $dsn-color-info-bg-default; //
|
|
1232
|
-
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; //
|
|
1233
|
-
$dsn-note-info-color: $dsn-color-info-color-document; //
|
|
1234
|
-
$dsn-note-info-icon-color: $dsn-color-info-color-default; //
|
|
1249
|
+
$dsn-note-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom)
|
|
1250
|
+
$dsn-note-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1251
|
+
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Kleur van de linkerborder voor info variant
|
|
1252
|
+
$dsn-note-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant
|
|
1253
|
+
$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant
|
|
1235
1254
|
$dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
|
|
1236
1255
|
$dsn-popover-box-shadow: $dsn-box-shadow-md; // Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals
|
|
1237
1256
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1238
|
-
$dsn-radio-group-legend-color: $dsn-form-field-label-color; //
|
|
1239
|
-
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1240
|
-
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1241
|
-
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1242
|
-
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1243
|
-
$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; //
|
|
1257
|
+
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1258
|
+
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1259
|
+
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1260
|
+
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1261
|
+
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1262
|
+
$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Ruimte onder de legend voor de radio-opties (gebruikt de kleinere margin zoals wanneer een beschrijving volgt)
|
|
1244
1263
|
$dsn-radio-background-color: $dsn-form-control-background-color;
|
|
1245
1264
|
$dsn-radio-border-color: $dsn-form-control-border-color;
|
|
1246
|
-
$dsn-radio-color: $dsn-form-control-border-color; //
|
|
1265
|
+
$dsn-radio-color: $dsn-form-control-border-color; // Kleur van de binnenste cirkel in de standaard staat
|
|
1247
1266
|
$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
|
|
1248
1267
|
$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
|
|
1249
1268
|
$dsn-radio-active-color: $dsn-form-control-active-border-color;
|
|
@@ -1260,64 +1279,65 @@ $dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
|
1260
1279
|
$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
|
|
1261
1280
|
$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1262
1281
|
$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1263
|
-
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; //
|
|
1282
|
+
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond
|
|
1264
1283
|
$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1265
|
-
$dsn-search-input-icon-size: $dsn-icon-size-md; //
|
|
1266
|
-
$dsn-select-icon-color: $dsn-color-action-1-color-default; //
|
|
1267
|
-
$dsn-select-icon-size: $dsn-icon-size-md; //
|
|
1268
|
-
$dsn-status-badge-icon-size: $dsn-icon-size-sm; //
|
|
1269
|
-
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; //
|
|
1270
|
-
$dsn-status-badge-info-color: $dsn-color-info-color-default; //
|
|
1271
|
-
$dsn-text-area-background-color: $dsn-form-control-background-color; //
|
|
1272
|
-
$dsn-text-area-border-color: $dsn-form-control-border-color; //
|
|
1273
|
-
$dsn-text-area-border-radius: $dsn-form-control-border-radius; //
|
|
1274
|
-
$dsn-text-area-border-width: $dsn-form-control-border-width; //
|
|
1275
|
-
$dsn-text-area-color: $dsn-form-control-color; //
|
|
1276
|
-
$dsn-text-area-font-family: $dsn-form-control-font-family; //
|
|
1277
|
-
$dsn-text-area-font-size: $dsn-form-control-font-size; //
|
|
1278
|
-
$dsn-text-area-font-weight: $dsn-form-control-font-weight; //
|
|
1279
|
-
$dsn-text-area-line-height: $dsn-form-control-line-height; //
|
|
1280
|
-
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; //
|
|
1281
|
-
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; //
|
|
1282
|
-
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; //
|
|
1283
|
-
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; //
|
|
1284
|
-
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; //
|
|
1285
|
-
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; //
|
|
1286
|
-
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; //
|
|
1287
|
-
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; //
|
|
1288
|
-
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; //
|
|
1289
|
-
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1290
|
-
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1291
|
-
$dsn-text-area-invalid-color: $dsn-form-control-color; //
|
|
1292
|
-
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; //
|
|
1293
|
-
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; //
|
|
1294
|
-
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; //
|
|
1295
|
-
$dsn-text-input-background-color: $dsn-form-control-background-color; //
|
|
1296
|
-
$dsn-text-input-border-color: $dsn-form-control-border-color; //
|
|
1297
|
-
$dsn-text-input-border-radius: $dsn-form-control-border-radius; //
|
|
1298
|
-
$dsn-text-input-border-width: $dsn-form-control-border-width; //
|
|
1299
|
-
$dsn-text-input-color: $dsn-form-control-color; //
|
|
1300
|
-
$dsn-text-input-font-family: $dsn-form-control-font-family; //
|
|
1301
|
-
$dsn-text-input-font-size: $dsn-form-control-font-size; //
|
|
1302
|
-
$dsn-text-input-font-weight: $dsn-form-control-font-weight; //
|
|
1303
|
-
$dsn-text-input-line-height: $dsn-form-control-line-height; //
|
|
1304
|
-
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; //
|
|
1305
|
-
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; //
|
|
1306
|
-
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; //
|
|
1307
|
-
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; //
|
|
1308
|
-
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; //
|
|
1309
|
-
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; //
|
|
1310
|
-
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; //
|
|
1311
|
-
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; //
|
|
1312
|
-
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; //
|
|
1313
|
-
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1314
|
-
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1315
|
-
$dsn-text-input-invalid-color: $dsn-form-control-color; //
|
|
1316
|
-
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; //
|
|
1317
|
-
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; //
|
|
1318
|
-
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; //
|
|
1319
|
-
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; //
|
|
1320
|
-
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; //
|
|
1284
|
+
$dsn-search-input-icon-size: $dsn-icon-size-md; // Icoongrootte van het zoekinvoerveld
|
|
1285
|
+
$dsn-select-icon-color: $dsn-color-action-1-color-default; // Kleur van het chevron-icoon — gelijk aan de icoonkleur van de subtle button
|
|
1286
|
+
$dsn-select-icon-size: $dsn-icon-size-md; // Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte
|
|
1287
|
+
$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Icoongrootte van de StatusBadge
|
|
1288
|
+
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1289
|
+
$dsn-status-badge-info-color: $dsn-color-info-color-default; // Tekstkleur voor info variant
|
|
1290
|
+
$dsn-text-area-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstveld
|
|
1291
|
+
$dsn-text-area-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstveld
|
|
1292
|
+
$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstveld
|
|
1293
|
+
$dsn-text-area-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstveld
|
|
1294
|
+
$dsn-text-area-color: $dsn-form-control-color; // Tekstkleur van het tekstveld
|
|
1295
|
+
$dsn-text-area-font-family: $dsn-form-control-font-family; // Font-familie van het tekstveld
|
|
1296
|
+
$dsn-text-area-font-size: $dsn-form-control-font-size; // Font-size van het tekstveld
|
|
1297
|
+
$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstveld
|
|
1298
|
+
$dsn-text-area-line-height: $dsn-form-control-line-height; // Line-height van het tekstveld
|
|
1299
|
+
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstveld
|
|
1300
|
+
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstveld
|
|
1301
|
+
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstveld
|
|
1302
|
+
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstveld
|
|
1303
|
+
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstveld op disabled
|
|
1304
|
+
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstveld op disabled
|
|
1305
|
+
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstveld op disabled
|
|
1306
|
+
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstveld op focus
|
|
1307
|
+
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstveld
|
|
1308
|
+
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstveld bij ongeldige invoer
|
|
1309
|
+
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstveld bij ongeldige invoer
|
|
1310
|
+
$dsn-text-area-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstveld bij ongeldige invoer
|
|
1311
|
+
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstveld op read-only
|
|
1312
|
+
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstveld op read-only
|
|
1313
|
+
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstveld op read-only
|
|
1314
|
+
$dsn-text-input-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstinvoerveld
|
|
1315
|
+
$dsn-text-input-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstinvoerveld
|
|
1316
|
+
$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstinvoerveld
|
|
1317
|
+
$dsn-text-input-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstinvoerveld
|
|
1318
|
+
$dsn-text-input-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld
|
|
1319
|
+
$dsn-text-input-font-family: $dsn-form-control-font-family; // Font-familie van het tekstinvoerveld
|
|
1320
|
+
$dsn-text-input-font-size: $dsn-form-control-font-size; // Font-size van het tekstinvoerveld
|
|
1321
|
+
$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstinvoerveld
|
|
1322
|
+
$dsn-text-input-line-height: $dsn-form-control-line-height; // Line-height van het tekstinvoerveld
|
|
1323
|
+
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstinvoerveld
|
|
1324
|
+
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstinvoerveld
|
|
1325
|
+
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstinvoerveld
|
|
1326
|
+
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstinvoerveld
|
|
1327
|
+
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstinvoerveld op disabled
|
|
1328
|
+
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstinvoerveld op disabled
|
|
1329
|
+
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstinvoerveld op disabled
|
|
1330
|
+
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstinvoerveld op focus
|
|
1331
|
+
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstinvoerveld
|
|
1332
|
+
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstinvoerveld bij ongeldige invoer
|
|
1333
|
+
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstinvoerveld bij ongeldige invoer
|
|
1334
|
+
$dsn-text-input-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld bij ongeldige invoer
|
|
1335
|
+
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstinvoerveld op read-only
|
|
1336
|
+
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstinvoerveld op read-only
|
|
1337
|
+
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstinvoerveld op read-only
|
|
1338
|
+
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Kleur van het klokicoon (interactief, actie-kleur)
|
|
1339
|
+
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Kleur van het klokicoon op hover
|
|
1340
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Rechter padding wanneer een icoon aanwezig is: (knop-padding × 2) + icoongrootte + knop-inset + ruimte
|
|
1321
1341
|
$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
|
|
1322
1342
|
$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1323
1343
|
$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1329,23 +1349,22 @@ $dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-ac
|
|
|
1329
1349
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1330
1350
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1331
1351
|
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1332
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1333
|
-
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1334
1352
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1335
1353
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1336
1354
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1337
1355
|
$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1338
1356
|
$dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
|
|
1339
1357
|
$dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1340
|
-
$dsn-search-input-padding-inline-start-with-icon: calc($dsn-search-input-icon-size + $dsn-search-input-icon-gap + $dsn-form-control-padding-inline-start); //
|
|
1341
|
-
$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); //
|
|
1342
|
-
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; //
|
|
1343
|
-
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; //
|
|
1344
|
-
$dsn-text-area-focus-color: $dsn-form-control-focus-color; //
|
|
1345
|
-
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; //
|
|
1346
|
-
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; //
|
|
1347
|
-
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; //
|
|
1348
|
-
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; //
|
|
1349
|
-
$dsn-text-input-focus-color: $dsn-form-control-focus-color; //
|
|
1350
|
-
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; //
|
|
1351
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; //
|
|
1358
|
+
$dsn-search-input-padding-inline-start-with-icon: calc($dsn-search-input-icon-size + $dsn-search-input-icon-gap + $dsn-form-control-padding-inline-start); // Linker padding wanneer een icoon aanwezig is
|
|
1359
|
+
$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); // Rechter padding wanneer een icoon aanwezig is: icoongrootte + ruimte + inset
|
|
1360
|
+
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstveld op focus
|
|
1361
|
+
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Kleur van de box-shadow op focus
|
|
1362
|
+
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstveld op focus
|
|
1363
|
+
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Kleur van de box-shadow op hover
|
|
1364
|
+
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|
|
1365
|
+
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstinvoerveld op focus
|
|
1366
|
+
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Kleur van de box-shadow op focus
|
|
1367
|
+
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstinvoerveld op focus
|
|
1368
|
+
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Kleur van de box-shadow op hover
|
|
1369
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|
|
1370
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Grootte van het klokicoon — gelijk aan de icoongrootte van de small button
|