@dsn-starter-kit/design-tokens 1.0.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 +959 -948
- package/dist/css/start-dark-information-dense.css +959 -948
- package/dist/css/start-light-default.css +957 -946
- package/dist/css/start-light-information-dense.css +957 -946
- package/dist/css/variables-dark.css +959 -948
- package/dist/css/variables.css +957 -946
- package/dist/css/wireframe-dark-default.css +837 -826
- package/dist/css/wireframe-dark-information-dense.css +837 -826
- package/dist/css/wireframe-light-default.css +837 -826
- package/dist/css/wireframe-light-information-dense.css +837 -826
- package/dist/js/start-dark-default.d.ts +12 -1
- package/dist/js/start-dark-default.js +2265 -1932
- package/dist/js/start-dark-information-dense.d.ts +12 -1
- package/dist/js/start-dark-information-dense.js +2265 -1932
- package/dist/js/start-light-default.d.ts +12 -1
- package/dist/js/start-light-default.js +2259 -1928
- package/dist/js/start-light-information-dense.d.ts +12 -1
- package/dist/js/start-light-information-dense.js +2259 -1928
- package/dist/js/tokens-dark.d.ts +12 -1
- package/dist/js/tokens-dark.js +2265 -1932
- package/dist/js/tokens.d.ts +12 -1
- package/dist/js/tokens.js +2259 -1928
- package/dist/js/wireframe-dark-default.d.ts +12 -1
- package/dist/js/wireframe-dark-default.js +2014 -1687
- package/dist/js/wireframe-dark-information-dense.d.ts +12 -1
- package/dist/js/wireframe-dark-information-dense.js +2014 -1687
- package/dist/js/wireframe-light-default.d.ts +12 -1
- package/dist/js/wireframe-light-default.js +2014 -1687
- package/dist/js/wireframe-light-information-dense.d.ts +12 -1
- package/dist/js/wireframe-light-information-dense.js +2014 -1687
- package/dist/json/start-dark-default.json +12 -1
- package/dist/json/start-dark-information-dense.json +12 -1
- package/dist/json/start-light-default.json +12 -1
- package/dist/json/start-light-information-dense.json +12 -1
- package/dist/json/tokens-dark.json +12 -1
- package/dist/json/tokens.json +12 -1
- package/dist/json/wireframe-dark-default.json +12 -1
- package/dist/json/wireframe-dark-information-dense.json +12 -1
- package/dist/json/wireframe-light-default.json +12 -1
- package/dist/json/wireframe-light-information-dense.json +12 -1
- package/dist/scss/_start-dark-default.scss +959 -948
- package/dist/scss/_start-dark-information-dense.scss +959 -948
- package/dist/scss/_start-light-default.scss +957 -946
- package/dist/scss/_start-light-information-dense.scss +957 -946
- package/dist/scss/_variables-dark.scss +959 -948
- package/dist/scss/_variables.scss +957 -946
- package/dist/scss/_wireframe-dark-default.scss +837 -826
- package/dist/scss/_wireframe-dark-information-dense.scss +837 -826
- package/dist/scss/_wireframe-light-default.scss +837 -826
- package/dist/scss/_wireframe-light-information-dense.scss +837 -826
- 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: 0.875rem; // Small text - 14px (fixed)
|
|
17
17
|
$dsn-text-font-size-md: 1rem; // Medium text - 16px (fixed)
|
|
18
18
|
$dsn-text-font-size-lg: 1.25rem; // Large text - 20px (fixed)
|
|
@@ -20,92 +20,92 @@ $dsn-text-font-size-xl: 1.5rem; // Extra large text - 24px (fixed)
|
|
|
20
20
|
$dsn-text-font-size-2xl: 2rem; // 2XL text - 32px (fixed)
|
|
21
21
|
$dsn-text-font-size-3xl: 2.5rem; // 3XL text - 40px (fixed)
|
|
22
22
|
$dsn-text-font-size-4xl: 3rem; // 4XL text - 48px (fixed)
|
|
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: #f4f4f4; //
|
|
97
|
-
$dsn-focus-inverse-outline-color: #0b0c0c; //
|
|
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: #f4f4f4; // Kleur van de focusomtrek — licht voor donkere achtergronden
|
|
97
|
+
$dsn-focus-inverse-outline-color: #0b0c0c; // Kleur van de focusomtrek op lichte/gekleurde achtergronden in dark mode — 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: #111111; //
|
|
126
|
-
$dsn-color-neutral-bg-elevated: #111111; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
127
|
-
$dsn-color-neutral-bg-subtle: #040404; //
|
|
128
|
-
$dsn-color-neutral-bg-default: #1d1d1d; //
|
|
129
|
-
$dsn-color-neutral-bg-hover: #262626; //
|
|
130
|
-
$dsn-color-neutral-bg-active: #2e2e2e; //
|
|
131
|
-
$dsn-color-neutral-border-subtle: #3e3e3e; //
|
|
132
|
-
$dsn-color-neutral-border-default: #686868; //
|
|
133
|
-
$dsn-color-neutral-border-hover: #727272; //
|
|
134
|
-
$dsn-color-neutral-border-active: #7c7c7c; //
|
|
135
|
-
$dsn-color-neutral-color-default: #ababab; //
|
|
136
|
-
$dsn-color-neutral-color-hover: #bbbbbb; //
|
|
137
|
-
$dsn-color-neutral-color-active: #cccccc; //
|
|
138
|
-
$dsn-color-neutral-color-subtle: #8b8b8b; //
|
|
139
|
-
$dsn-color-neutral-color-document: #f1f1f1; //
|
|
140
|
-
$dsn-color-accent-1-bg-document: #001126; //
|
|
141
|
-
$dsn-color-accent-1-bg-elevated: #001126; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
142
|
-
$dsn-color-accent-1-bg-subtle: #000409; //
|
|
143
|
-
$dsn-color-accent-1-bg-default: #001d40; //
|
|
144
|
-
$dsn-color-accent-1-bg-hover: #002551; //
|
|
145
|
-
$dsn-color-accent-1-bg-active: #002d62; //
|
|
146
|
-
$dsn-color-accent-1-border-subtle: #003b81; //
|
|
147
|
-
$dsn-color-accent-1-border-default: #3169ad; //
|
|
148
|
-
$dsn-color-accent-1-border-hover: #3f74b2; //
|
|
149
|
-
$dsn-color-accent-1-border-active: #4e7fb8; //
|
|
150
|
-
$dsn-color-accent-1-color-default: #8faed2; //
|
|
151
|
-
$dsn-color-accent-1-color-hover: #a5bedb; //
|
|
152
|
-
$dsn-color-accent-1-color-active: #bbcee4; //
|
|
153
|
-
$dsn-color-accent-1-color-subtle: #648ec1; //
|
|
154
|
-
$dsn-color-accent-1-color-document: #ecf1f7; //
|
|
155
|
-
$dsn-color-negative-bg-document: #1c0000; //
|
|
156
|
-
$dsn-color-negative-bg-elevated: #1c0000; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
157
|
-
$dsn-color-negative-bg-subtle: #060000; //
|
|
158
|
-
$dsn-color-negative-bg-default: #2e0000; //
|
|
159
|
-
$dsn-color-negative-bg-hover: #3d0000; //
|
|
160
|
-
$dsn-color-negative-bg-active: #4c0000; //
|
|
161
|
-
$dsn-color-negative-border-subtle: #820000; //
|
|
162
|
-
$dsn-color-negative-border-default: #e74848; //
|
|
163
|
-
$dsn-color-negative-border-hover: #ec6d6d; //
|
|
164
|
-
$dsn-color-negative-border-active: #f19191; //
|
|
165
|
-
$dsn-color-negative-color-default: #f9b1b1; //
|
|
166
|
-
$dsn-color-negative-color-hover: #fbc3c3; //
|
|
167
|
-
$dsn-color-negative-color-active: #fcd5d5; //
|
|
168
|
-
$dsn-color-negative-color-subtle: #eb8181; //
|
|
169
|
-
$dsn-color-negative-color-document: #feeded; //
|
|
170
|
-
$dsn-color-positive-bg-document: #001509; //
|
|
171
|
-
$dsn-color-positive-bg-elevated: #001509; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
172
|
-
$dsn-color-positive-bg-subtle: #000802; //
|
|
173
|
-
$dsn-color-positive-bg-default: #002312; //
|
|
174
|
-
$dsn-color-positive-bg-hover: #003019; //
|
|
175
|
-
$dsn-color-positive-bg-active: #003e1f; //
|
|
176
|
-
$dsn-color-positive-border-subtle: #00481b; //
|
|
177
|
-
$dsn-color-positive-border-default: #1ba158; //
|
|
178
|
-
$dsn-color-positive-border-hover: #3bb470; //
|
|
179
|
-
$dsn-color-positive-border-active: #5bc788; //
|
|
180
|
-
$dsn-color-positive-color-default: #8ad3a6; //
|
|
181
|
-
$dsn-color-positive-color-hover: #a3dcba; //
|
|
182
|
-
$dsn-color-positive-color-active: #bce5ce; //
|
|
183
|
-
$dsn-color-positive-color-subtle: #6ac495; //
|
|
184
|
-
$dsn-color-positive-color-document: #e4f5ea; //
|
|
185
|
-
$dsn-color-warning-bg-document: #190f04; //
|
|
186
|
-
$dsn-color-warning-bg-elevated: #190f04; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
187
|
-
$dsn-color-warning-bg-subtle: #0b0501; //
|
|
188
|
-
$dsn-color-warning-bg-default: #2b1a09; //
|
|
189
|
-
$dsn-color-warning-bg-hover: #3c250d; //
|
|
190
|
-
$dsn-color-warning-bg-active: #4d2f10; //
|
|
191
|
-
$dsn-color-warning-border-subtle: #5a3511; //
|
|
192
|
-
$dsn-color-warning-border-default: #d37f25; //
|
|
193
|
-
$dsn-color-warning-border-hover: #de9843; //
|
|
194
|
-
$dsn-color-warning-border-active: #e9b062; //
|
|
195
|
-
$dsn-color-warning-color-default: #ffb46b; //
|
|
196
|
-
$dsn-color-warning-color-hover: #ffc38b; //
|
|
197
|
-
$dsn-color-warning-color-active: #ffd2aa; //
|
|
198
|
-
$dsn-color-warning-color-subtle: #f3a453; //
|
|
199
|
-
$dsn-color-warning-color-document: #ffeedd; //
|
|
200
|
-
$dsn-color-neutral-inverse-bg-document: #fbfbfb; //
|
|
201
|
-
$dsn-color-neutral-inverse-bg-elevated: #fbfbfb; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
202
|
-
$dsn-color-neutral-inverse-bg-subtle: #f1f1f1; //
|
|
203
|
-
$dsn-color-neutral-inverse-bg-default: #ababab; //
|
|
204
|
-
$dsn-color-neutral-inverse-bg-hover: #bbbbbb; //
|
|
205
|
-
$dsn-color-neutral-inverse-bg-active: #cccccc; //
|
|
206
|
-
$dsn-color-neutral-inverse-border-subtle: #bfbfbf; //
|
|
207
|
-
$dsn-color-neutral-inverse-border-default: #3e3e3e; //
|
|
208
|
-
$dsn-color-neutral-inverse-border-hover: #2e2e2e; //
|
|
209
|
-
$dsn-color-neutral-inverse-border-active: #1d1d1d; //
|
|
210
|
-
$dsn-color-neutral-inverse-color-default: #000000; //
|
|
211
|
-
$dsn-color-neutral-inverse-color-hover: #000000; //
|
|
212
|
-
$dsn-color-neutral-inverse-color-active: #000000; //
|
|
213
|
-
$dsn-color-neutral-inverse-color-subtle: #3e3e3e; //
|
|
214
|
-
$dsn-color-neutral-inverse-color-document: #000000; //
|
|
215
|
-
$dsn-color-accent-1-inverse-bg-document: #dcebf9; //
|
|
216
|
-
$dsn-color-accent-1-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
217
|
-
$dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; //
|
|
218
|
-
$dsn-color-accent-1-inverse-bg-default: #8faed2; //
|
|
219
|
-
$dsn-color-accent-1-inverse-bg-hover: #a5bedb; //
|
|
220
|
-
$dsn-color-accent-1-inverse-bg-active: #bbcee4; //
|
|
221
|
-
$dsn-color-accent-1-inverse-border-subtle: #b0c6df; //
|
|
222
|
-
$dsn-color-accent-1-inverse-border-default: #003b81; //
|
|
223
|
-
$dsn-color-accent-1-inverse-border-hover: #002d62; //
|
|
224
|
-
$dsn-color-accent-1-inverse-border-active: #001d40; //
|
|
225
|
-
$dsn-color-accent-1-inverse-color-default: #000000; //
|
|
226
|
-
$dsn-color-accent-1-inverse-color-hover: #000000; //
|
|
227
|
-
$dsn-color-accent-1-inverse-color-active: #000000; //
|
|
228
|
-
$dsn-color-accent-1-inverse-color-subtle: #003b81; //
|
|
229
|
-
$dsn-color-accent-1-inverse-color-document: #000000; //
|
|
230
|
-
$dsn-color-info-inverse-bg-document: #dcebf9; //
|
|
231
|
-
$dsn-color-info-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
232
|
-
$dsn-color-info-inverse-bg-subtle: #ecf1f7; //
|
|
233
|
-
$dsn-color-info-inverse-bg-default: #8faed2; //
|
|
234
|
-
$dsn-color-info-inverse-bg-hover: #a5bedb; //
|
|
235
|
-
$dsn-color-info-inverse-bg-active: #bbcee4; //
|
|
236
|
-
$dsn-color-info-inverse-border-subtle: #b0c6df; //
|
|
237
|
-
$dsn-color-info-inverse-border-default: #003b81; //
|
|
238
|
-
$dsn-color-info-inverse-border-hover: #002d62; //
|
|
239
|
-
$dsn-color-info-inverse-border-active: #001d40; //
|
|
240
|
-
$dsn-color-info-inverse-color-default: #000000; //
|
|
241
|
-
$dsn-color-info-inverse-color-hover: #000000; //
|
|
242
|
-
$dsn-color-info-inverse-color-active: #000000; //
|
|
243
|
-
$dsn-color-info-inverse-color-subtle: #003b81; //
|
|
244
|
-
$dsn-color-info-inverse-color-document: #000000; //
|
|
245
|
-
$dsn-color-negative-inverse-bg-document: #fcdada; //
|
|
246
|
-
$dsn-color-negative-inverse-bg-elevated: #fcdada; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
247
|
-
$dsn-color-negative-inverse-bg-subtle: #feeded; //
|
|
248
|
-
$dsn-color-negative-inverse-bg-default: #f9b1b1; //
|
|
249
|
-
$dsn-color-negative-inverse-bg-hover: #fbc3c3; //
|
|
250
|
-
$dsn-color-negative-inverse-bg-active: #fcd5d5; //
|
|
251
|
-
$dsn-color-negative-inverse-border-subtle: #f3abab; //
|
|
252
|
-
$dsn-color-negative-inverse-border-default: #820000; //
|
|
253
|
-
$dsn-color-negative-inverse-border-hover: #4c0000; //
|
|
254
|
-
$dsn-color-negative-inverse-border-active: #2e0000; //
|
|
255
|
-
$dsn-color-negative-inverse-color-default: #000000; //
|
|
256
|
-
$dsn-color-negative-inverse-color-hover: #000000; //
|
|
257
|
-
$dsn-color-negative-inverse-color-active: #000000; //
|
|
258
|
-
$dsn-color-negative-inverse-color-subtle: #820000; //
|
|
259
|
-
$dsn-color-negative-inverse-color-document: #000000; //
|
|
260
|
-
$dsn-color-positive-inverse-bg-document: #cce8d7; //
|
|
261
|
-
$dsn-color-positive-inverse-bg-elevated: #cce8d7; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
262
|
-
$dsn-color-positive-inverse-bg-subtle: #e4f5ea; //
|
|
263
|
-
$dsn-color-positive-inverse-bg-default: #8ad3a6; //
|
|
264
|
-
$dsn-color-positive-inverse-bg-hover: #a3dcba; //
|
|
265
|
-
$dsn-color-positive-inverse-bg-active: #bce5ce; //
|
|
266
|
-
$dsn-color-positive-inverse-border-subtle: #7dca9e; //
|
|
267
|
-
$dsn-color-positive-inverse-border-default: #00481b; //
|
|
268
|
-
$dsn-color-positive-inverse-border-hover: #003e1f; //
|
|
269
|
-
$dsn-color-positive-inverse-border-active: #002312; //
|
|
270
|
-
$dsn-color-positive-inverse-color-default: #000000; //
|
|
271
|
-
$dsn-color-positive-inverse-color-hover: #000000; //
|
|
272
|
-
$dsn-color-positive-inverse-color-active: #000000; //
|
|
273
|
-
$dsn-color-positive-inverse-color-subtle: #00481b; //
|
|
274
|
-
$dsn-color-positive-inverse-color-document: #000000; //
|
|
275
|
-
$dsn-color-warning-inverse-bg-document: #ffeac6; //
|
|
276
|
-
$dsn-color-warning-inverse-bg-elevated: #ffeac6; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
277
|
-
$dsn-color-warning-inverse-bg-subtle: #ffeedd; //
|
|
278
|
-
$dsn-color-warning-inverse-bg-default: #ffb46b; //
|
|
279
|
-
$dsn-color-warning-inverse-bg-hover: #ffc38b; //
|
|
280
|
-
$dsn-color-warning-inverse-bg-active: #ffd2aa; //
|
|
281
|
-
$dsn-color-warning-inverse-border-subtle: #ffa754; //
|
|
282
|
-
$dsn-color-warning-inverse-border-default: #5a3511; //
|
|
283
|
-
$dsn-color-warning-inverse-border-hover: #4d2f10; //
|
|
284
|
-
$dsn-color-warning-inverse-border-active: #2b1a09; //
|
|
285
|
-
$dsn-color-warning-inverse-color-default: #000000; //
|
|
286
|
-
$dsn-color-warning-inverse-color-hover: #000000; //
|
|
287
|
-
$dsn-color-warning-inverse-color-active: #000000; //
|
|
288
|
-
$dsn-color-warning-inverse-color-subtle: #5a3511; //
|
|
289
|
-
$dsn-color-warning-inverse-color-document: #000000; //
|
|
290
|
-
$dsn-color-transparent: rgba(0, 0, 0, 0); //
|
|
291
|
-
$dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); // Scherpe schaduwlaag —
|
|
292
|
-
$dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); // Diffuse schaduwlaag —
|
|
125
|
+
$dsn-color-neutral-bg-document: #111111; // Documentachtergrond
|
|
126
|
+
$dsn-color-neutral-bg-elevated: #111111; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
127
|
+
$dsn-color-neutral-bg-subtle: #040404; // Subtiele achtergrond
|
|
128
|
+
$dsn-color-neutral-bg-default: #1d1d1d; // Standaard achtergrond
|
|
129
|
+
$dsn-color-neutral-bg-hover: #262626; // Achtergrond in hover state
|
|
130
|
+
$dsn-color-neutral-bg-active: #2e2e2e; // Achtergrond in active state
|
|
131
|
+
$dsn-color-neutral-border-subtle: #3e3e3e; // Subtiele rand
|
|
132
|
+
$dsn-color-neutral-border-default: #686868; // Standaard rand
|
|
133
|
+
$dsn-color-neutral-border-hover: #727272; // Rand in hover state
|
|
134
|
+
$dsn-color-neutral-border-active: #7c7c7c; // Rand in active state
|
|
135
|
+
$dsn-color-neutral-color-default: #ababab; // Standaard tekstkleur
|
|
136
|
+
$dsn-color-neutral-color-hover: #bbbbbb; // Tekst in hover state
|
|
137
|
+
$dsn-color-neutral-color-active: #cccccc; // Tekst in active state
|
|
138
|
+
$dsn-color-neutral-color-subtle: #8b8b8b; // Subtiele tekstkleur
|
|
139
|
+
$dsn-color-neutral-color-document: #f1f1f1; // Documenttekstkleur
|
|
140
|
+
$dsn-color-accent-1-bg-document: #001126; // Documentachtergrond
|
|
141
|
+
$dsn-color-accent-1-bg-elevated: #001126; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
142
|
+
$dsn-color-accent-1-bg-subtle: #000409; // Subtiele achtergrond
|
|
143
|
+
$dsn-color-accent-1-bg-default: #001d40; // Standaard achtergrond
|
|
144
|
+
$dsn-color-accent-1-bg-hover: #002551; // Achtergrond in hover state
|
|
145
|
+
$dsn-color-accent-1-bg-active: #002d62; // Achtergrond in active state
|
|
146
|
+
$dsn-color-accent-1-border-subtle: #003b81; // Subtiele rand
|
|
147
|
+
$dsn-color-accent-1-border-default: #3169ad; // Standaard rand
|
|
148
|
+
$dsn-color-accent-1-border-hover: #3f74b2; // Rand in hover state
|
|
149
|
+
$dsn-color-accent-1-border-active: #4e7fb8; // Rand in active state
|
|
150
|
+
$dsn-color-accent-1-color-default: #8faed2; // Standaard tekstkleur
|
|
151
|
+
$dsn-color-accent-1-color-hover: #a5bedb; // Tekst in hover state
|
|
152
|
+
$dsn-color-accent-1-color-active: #bbcee4; // Tekst in active state
|
|
153
|
+
$dsn-color-accent-1-color-subtle: #648ec1; // Subtiele tekstkleur
|
|
154
|
+
$dsn-color-accent-1-color-document: #ecf1f7; // Documenttekstkleur
|
|
155
|
+
$dsn-color-negative-bg-document: #1c0000; // Documentachtergrond
|
|
156
|
+
$dsn-color-negative-bg-elevated: #1c0000; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
157
|
+
$dsn-color-negative-bg-subtle: #060000; // Subtiele achtergrond
|
|
158
|
+
$dsn-color-negative-bg-default: #2e0000; // Standaard achtergrond
|
|
159
|
+
$dsn-color-negative-bg-hover: #3d0000; // Achtergrond in hover state
|
|
160
|
+
$dsn-color-negative-bg-active: #4c0000; // Achtergrond in active state
|
|
161
|
+
$dsn-color-negative-border-subtle: #820000; // Subtiele rand
|
|
162
|
+
$dsn-color-negative-border-default: #e74848; // Standaard rand
|
|
163
|
+
$dsn-color-negative-border-hover: #ec6d6d; // Rand in hover state
|
|
164
|
+
$dsn-color-negative-border-active: #f19191; // Rand in active state
|
|
165
|
+
$dsn-color-negative-color-default: #f9b1b1; // Standaard tekstkleur
|
|
166
|
+
$dsn-color-negative-color-hover: #fbc3c3; // Tekst in hover state
|
|
167
|
+
$dsn-color-negative-color-active: #fcd5d5; // Tekst in active state
|
|
168
|
+
$dsn-color-negative-color-subtle: #eb8181; // Subtiele tekstkleur
|
|
169
|
+
$dsn-color-negative-color-document: #feeded; // Documenttekstkleur
|
|
170
|
+
$dsn-color-positive-bg-document: #001509; // Documentachtergrond
|
|
171
|
+
$dsn-color-positive-bg-elevated: #001509; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
172
|
+
$dsn-color-positive-bg-subtle: #000802; // Subtiele achtergrond
|
|
173
|
+
$dsn-color-positive-bg-default: #002312; // Standaard achtergrond
|
|
174
|
+
$dsn-color-positive-bg-hover: #003019; // Achtergrond in hover state
|
|
175
|
+
$dsn-color-positive-bg-active: #003e1f; // Achtergrond in active state
|
|
176
|
+
$dsn-color-positive-border-subtle: #00481b; // Subtiele rand
|
|
177
|
+
$dsn-color-positive-border-default: #1ba158; // Standaard rand
|
|
178
|
+
$dsn-color-positive-border-hover: #3bb470; // Rand in hover state
|
|
179
|
+
$dsn-color-positive-border-active: #5bc788; // Rand in active state
|
|
180
|
+
$dsn-color-positive-color-default: #8ad3a6; // Standaard tekstkleur
|
|
181
|
+
$dsn-color-positive-color-hover: #a3dcba; // Tekst in hover state
|
|
182
|
+
$dsn-color-positive-color-active: #bce5ce; // Tekst in active state
|
|
183
|
+
$dsn-color-positive-color-subtle: #6ac495; // Subtiele tekstkleur
|
|
184
|
+
$dsn-color-positive-color-document: #e4f5ea; // Documenttekstkleur
|
|
185
|
+
$dsn-color-warning-bg-document: #190f04; // Documentachtergrond
|
|
186
|
+
$dsn-color-warning-bg-elevated: #190f04; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
187
|
+
$dsn-color-warning-bg-subtle: #0b0501; // Subtiele achtergrond
|
|
188
|
+
$dsn-color-warning-bg-default: #2b1a09; // Standaard achtergrond
|
|
189
|
+
$dsn-color-warning-bg-hover: #3c250d; // Achtergrond in hover state
|
|
190
|
+
$dsn-color-warning-bg-active: #4d2f10; // Achtergrond in active state
|
|
191
|
+
$dsn-color-warning-border-subtle: #5a3511; // Subtiele rand
|
|
192
|
+
$dsn-color-warning-border-default: #d37f25; // Standaard rand
|
|
193
|
+
$dsn-color-warning-border-hover: #de9843; // Rand in hover state
|
|
194
|
+
$dsn-color-warning-border-active: #e9b062; // Rand in active state
|
|
195
|
+
$dsn-color-warning-color-default: #ffb46b; // Standaard tekstkleur
|
|
196
|
+
$dsn-color-warning-color-hover: #ffc38b; // Tekst in hover state
|
|
197
|
+
$dsn-color-warning-color-active: #ffd2aa; // Tekst in active state
|
|
198
|
+
$dsn-color-warning-color-subtle: #f3a453; // Subtiele tekstkleur
|
|
199
|
+
$dsn-color-warning-color-document: #ffeedd; // Documenttekstkleur
|
|
200
|
+
$dsn-color-neutral-inverse-bg-document: #fbfbfb; // Documentachtergrond (inverse)
|
|
201
|
+
$dsn-color-neutral-inverse-bg-elevated: #fbfbfb; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
202
|
+
$dsn-color-neutral-inverse-bg-subtle: #f1f1f1; // Subtiele achtergrond (inverse)
|
|
203
|
+
$dsn-color-neutral-inverse-bg-default: #ababab; // Standaard achtergrond (inverse)
|
|
204
|
+
$dsn-color-neutral-inverse-bg-hover: #bbbbbb; // Achtergrond in hover state (inverse)
|
|
205
|
+
$dsn-color-neutral-inverse-bg-active: #cccccc; // Achtergrond in active state (inverse)
|
|
206
|
+
$dsn-color-neutral-inverse-border-subtle: #bfbfbf; // Subtiele rand (inverse)
|
|
207
|
+
$dsn-color-neutral-inverse-border-default: #3e3e3e; // Standaard rand (inverse)
|
|
208
|
+
$dsn-color-neutral-inverse-border-hover: #2e2e2e; // Rand in hover state (inverse)
|
|
209
|
+
$dsn-color-neutral-inverse-border-active: #1d1d1d; // Rand in active state (inverse)
|
|
210
|
+
$dsn-color-neutral-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
211
|
+
$dsn-color-neutral-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
212
|
+
$dsn-color-neutral-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
213
|
+
$dsn-color-neutral-inverse-color-subtle: #3e3e3e; // Subtiele tekstkleur (inverse)
|
|
214
|
+
$dsn-color-neutral-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
215
|
+
$dsn-color-accent-1-inverse-bg-document: #dcebf9; // Documentachtergrond (inverse)
|
|
216
|
+
$dsn-color-accent-1-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
217
|
+
$dsn-color-accent-1-inverse-bg-subtle: #ecf1f7; // Subtiele achtergrond (inverse)
|
|
218
|
+
$dsn-color-accent-1-inverse-bg-default: #8faed2; // Standaard achtergrond (inverse)
|
|
219
|
+
$dsn-color-accent-1-inverse-bg-hover: #a5bedb; // Achtergrond in hover state (inverse)
|
|
220
|
+
$dsn-color-accent-1-inverse-bg-active: #bbcee4; // Achtergrond in active state (inverse)
|
|
221
|
+
$dsn-color-accent-1-inverse-border-subtle: #b0c6df; // Subtiele rand (inverse)
|
|
222
|
+
$dsn-color-accent-1-inverse-border-default: #003b81; // Standaard rand (inverse)
|
|
223
|
+
$dsn-color-accent-1-inverse-border-hover: #002d62; // Rand in hover state (inverse)
|
|
224
|
+
$dsn-color-accent-1-inverse-border-active: #001d40; // Rand in active state (inverse)
|
|
225
|
+
$dsn-color-accent-1-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
226
|
+
$dsn-color-accent-1-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
227
|
+
$dsn-color-accent-1-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
228
|
+
$dsn-color-accent-1-inverse-color-subtle: #003b81; // Subtiele tekstkleur (inverse)
|
|
229
|
+
$dsn-color-accent-1-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
230
|
+
$dsn-color-info-inverse-bg-document: #dcebf9; // Documentachtergrond (inverse)
|
|
231
|
+
$dsn-color-info-inverse-bg-elevated: #dcebf9; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
232
|
+
$dsn-color-info-inverse-bg-subtle: #ecf1f7; // Subtiele achtergrond (inverse)
|
|
233
|
+
$dsn-color-info-inverse-bg-default: #8faed2; // Standaard achtergrond (inverse)
|
|
234
|
+
$dsn-color-info-inverse-bg-hover: #a5bedb; // Achtergrond in hover state (inverse)
|
|
235
|
+
$dsn-color-info-inverse-bg-active: #bbcee4; // Achtergrond in active state (inverse)
|
|
236
|
+
$dsn-color-info-inverse-border-subtle: #b0c6df; // Subtiele rand (inverse)
|
|
237
|
+
$dsn-color-info-inverse-border-default: #003b81; // Standaard rand (inverse)
|
|
238
|
+
$dsn-color-info-inverse-border-hover: #002d62; // Rand in hover state (inverse)
|
|
239
|
+
$dsn-color-info-inverse-border-active: #001d40; // Rand in active state (inverse)
|
|
240
|
+
$dsn-color-info-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
241
|
+
$dsn-color-info-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
242
|
+
$dsn-color-info-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
243
|
+
$dsn-color-info-inverse-color-subtle: #003b81; // Subtiele tekstkleur (inverse)
|
|
244
|
+
$dsn-color-info-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
245
|
+
$dsn-color-negative-inverse-bg-document: #fcdada; // Documentachtergrond (inverse)
|
|
246
|
+
$dsn-color-negative-inverse-bg-elevated: #fcdada; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
247
|
+
$dsn-color-negative-inverse-bg-subtle: #feeded; // Subtiele achtergrond (inverse)
|
|
248
|
+
$dsn-color-negative-inverse-bg-default: #f9b1b1; // Standaard achtergrond (inverse)
|
|
249
|
+
$dsn-color-negative-inverse-bg-hover: #fbc3c3; // Achtergrond in hover state (inverse)
|
|
250
|
+
$dsn-color-negative-inverse-bg-active: #fcd5d5; // Achtergrond in active state (inverse)
|
|
251
|
+
$dsn-color-negative-inverse-border-subtle: #f3abab; // Subtiele rand (inverse)
|
|
252
|
+
$dsn-color-negative-inverse-border-default: #820000; // Standaard rand (inverse)
|
|
253
|
+
$dsn-color-negative-inverse-border-hover: #4c0000; // Rand in hover state (inverse)
|
|
254
|
+
$dsn-color-negative-inverse-border-active: #2e0000; // Rand in active state (inverse)
|
|
255
|
+
$dsn-color-negative-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
256
|
+
$dsn-color-negative-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
257
|
+
$dsn-color-negative-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
258
|
+
$dsn-color-negative-inverse-color-subtle: #820000; // Subtiele tekstkleur (inverse)
|
|
259
|
+
$dsn-color-negative-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
260
|
+
$dsn-color-positive-inverse-bg-document: #cce8d7; // Documentachtergrond (inverse)
|
|
261
|
+
$dsn-color-positive-inverse-bg-elevated: #cce8d7; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
262
|
+
$dsn-color-positive-inverse-bg-subtle: #e4f5ea; // Subtiele achtergrond (inverse)
|
|
263
|
+
$dsn-color-positive-inverse-bg-default: #8ad3a6; // Standaard achtergrond (inverse)
|
|
264
|
+
$dsn-color-positive-inverse-bg-hover: #a3dcba; // Achtergrond in hover state (inverse)
|
|
265
|
+
$dsn-color-positive-inverse-bg-active: #bce5ce; // Achtergrond in active state (inverse)
|
|
266
|
+
$dsn-color-positive-inverse-border-subtle: #7dca9e; // Subtiele rand (inverse)
|
|
267
|
+
$dsn-color-positive-inverse-border-default: #00481b; // Standaard rand (inverse)
|
|
268
|
+
$dsn-color-positive-inverse-border-hover: #003e1f; // Rand in hover state (inverse)
|
|
269
|
+
$dsn-color-positive-inverse-border-active: #002312; // Rand in active state (inverse)
|
|
270
|
+
$dsn-color-positive-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
271
|
+
$dsn-color-positive-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
272
|
+
$dsn-color-positive-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
273
|
+
$dsn-color-positive-inverse-color-subtle: #00481b; // Subtiele tekstkleur (inverse)
|
|
274
|
+
$dsn-color-positive-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
275
|
+
$dsn-color-warning-inverse-bg-document: #ffeac6; // Documentachtergrond (inverse)
|
|
276
|
+
$dsn-color-warning-inverse-bg-elevated: #ffeac6; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
277
|
+
$dsn-color-warning-inverse-bg-subtle: #ffeedd; // Subtiele achtergrond (inverse)
|
|
278
|
+
$dsn-color-warning-inverse-bg-default: #ffb46b; // Standaard achtergrond (inverse)
|
|
279
|
+
$dsn-color-warning-inverse-bg-hover: #ffc38b; // Achtergrond in hover state (inverse)
|
|
280
|
+
$dsn-color-warning-inverse-bg-active: #ffd2aa; // Achtergrond in active state (inverse)
|
|
281
|
+
$dsn-color-warning-inverse-border-subtle: #ffa754; // Subtiele rand (inverse)
|
|
282
|
+
$dsn-color-warning-inverse-border-default: #5a3511; // Standaard rand (inverse)
|
|
283
|
+
$dsn-color-warning-inverse-border-hover: #4d2f10; // Rand in hover state (inverse)
|
|
284
|
+
$dsn-color-warning-inverse-border-active: #2b1a09; // Rand in active state (inverse)
|
|
285
|
+
$dsn-color-warning-inverse-color-default: #000000; // Standaard tekstkleur (inverse)
|
|
286
|
+
$dsn-color-warning-inverse-color-hover: #000000; // Tekst in hover state (inverse)
|
|
287
|
+
$dsn-color-warning-inverse-color-active: #000000; // Tekst in active state (inverse)
|
|
288
|
+
$dsn-color-warning-inverse-color-subtle: #5a3511; // Subtiele tekstkleur (inverse)
|
|
289
|
+
$dsn-color-warning-inverse-color-document: #000000; // Documenttekstkleur (inverse)
|
|
290
|
+
$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
|
|
291
|
+
$dsn-color-shadow-direct: color-mix(in srgb, black 60%, transparent); // Scherpe schaduwlaag — direct licht, dichtbij het object
|
|
292
|
+
$dsn-color-shadow-ambient: color-mix(in srgb, black 40%, transparent); // Diffuse schaduwlaag — omgevingslicht, verder weg
|
|
293
293
|
$dsn-color-shadow-highlight: color-mix(in srgb, white 8%, transparent); // Outline-laag — subtiele witte rand geeft elevated surfaces randscherpte in dark mode
|
|
294
294
|
$dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12); // Scroll-affordance schaduw — lichte kleur voor zichtbaarheid op donkere achtergrond
|
|
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
|
|
@@ -326,13 +326,14 @@ $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
327
|
$dsn-grid-gutter: calc(0.5rem * 1); // Compactere kolomafstand voor information-dense project types (8px = space.column.md)
|
|
328
328
|
$dsn-grid-row-gap: calc(0.5rem * 1); // Compactere rij-afstand voor information-dense project types (8px = space.column.md)
|
|
329
|
+
$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.
|
|
329
330
|
$dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
|
|
330
331
|
$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
|
|
331
332
|
$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
|
|
332
|
-
$dsn-link-text-decoration-line: underline; //
|
|
333
|
-
$dsn-link-text-decoration-thickness: auto; //
|
|
334
|
-
$dsn-link-text-underline-offset: 4px; //
|
|
335
|
-
$dsn-link-hover-text-decoration-line: none; //
|
|
333
|
+
$dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
|
|
334
|
+
$dsn-link-text-decoration-thickness: auto; // Dikte van de onderstreping van de link
|
|
335
|
+
$dsn-link-text-underline-offset: 4px; // Onderstrepingsafstand van de link
|
|
336
|
+
$dsn-link-hover-text-decoration-line: none; // Tekstverfraaiing van de link op hover
|
|
336
337
|
$dsn-menu-link-current-indicator-width: 3px; // MenuLink-specifiek: breedte van de border-inline-start indicator
|
|
337
338
|
$dsn-modal-dialog-max-width: 40rem; // Maximale breedte van het dialoogvenster (640px)
|
|
338
339
|
$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
|
|
@@ -342,70 +343,72 @@ $dsn-password-input-padding-inline-end: 3rem; // Password input right padding -
|
|
|
342
343
|
$dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
|
|
343
344
|
$dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
|
|
344
345
|
$dsn-progress-bar-block-size: 8px; // Hoogte van de balk — gangbare dikte voor voortgangsbalken
|
|
345
|
-
$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); //
|
|
346
|
+
$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
|
|
346
347
|
$dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
|
|
347
348
|
$dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
348
349
|
$dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
349
|
-
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); //
|
|
350
|
+
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte
|
|
350
351
|
$dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
|
|
351
352
|
$dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
|
|
352
353
|
$dsn-spinner-duration: 800ms; // Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie
|
|
353
|
-
$dsn-status-badge-text-transform: none; //
|
|
354
|
-
$dsn-summary-list-key-basis: 30%; //
|
|
354
|
+
$dsn-status-badge-text-transform: none; // Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen)
|
|
355
|
+
$dsn-summary-list-key-basis: 30%; // Breedte van de sleutelkolom in de gridindeling
|
|
356
|
+
$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)
|
|
357
|
+
$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)
|
|
355
358
|
$dsn-table-header-background-color: rgba(0, 0, 0, 0);
|
|
356
359
|
$dsn-table-footer-background-color: rgba(0, 0, 0, 0);
|
|
357
|
-
$dsn-text-area-outline-offset: 0px; //
|
|
358
|
-
$dsn-text-area-resize: vertical; //
|
|
359
|
-
$dsn-text-area-focus-box-shadow-x: 0; //
|
|
360
|
-
$dsn-text-area-focus-box-shadow-y: 0; //
|
|
361
|
-
$dsn-text-area-focus-box-shadow-blur: 0; //
|
|
362
|
-
$dsn-text-area-hover-box-shadow-x: 0; //
|
|
363
|
-
$dsn-text-area-hover-box-shadow-y: 0; //
|
|
364
|
-
$dsn-text-area-hover-box-shadow-blur: 0; //
|
|
365
|
-
$dsn-text-area-invalid-box-shadow-x: 0; //
|
|
366
|
-
$dsn-text-area-invalid-box-shadow-y: 0; //
|
|
367
|
-
$dsn-text-area-invalid-box-shadow-blur: 0; //
|
|
368
|
-
$dsn-text-input-outline-offset: 0px; //
|
|
369
|
-
$dsn-text-input-focus-box-shadow-x: 0; //
|
|
370
|
-
$dsn-text-input-focus-box-shadow-y: 0; //
|
|
371
|
-
$dsn-text-input-focus-box-shadow-blur: 0; //
|
|
372
|
-
$dsn-text-input-hover-box-shadow-x: 0; //
|
|
373
|
-
$dsn-text-input-hover-box-shadow-y: 0; //
|
|
374
|
-
$dsn-text-input-hover-box-shadow-blur: 0; //
|
|
375
|
-
$dsn-text-input-invalid-box-shadow-x: 0; //
|
|
376
|
-
$dsn-text-input-invalid-box-shadow-y: 0; //
|
|
377
|
-
$dsn-text-input-invalid-box-shadow-blur: 0; //
|
|
378
|
-
$dsn-heading-color: $dsn-color-neutral-color-document; //
|
|
379
|
-
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1
|
|
380
|
-
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1
|
|
381
|
-
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1
|
|
382
|
-
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1
|
|
383
|
-
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1
|
|
384
|
-
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2
|
|
385
|
-
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2
|
|
386
|
-
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2
|
|
387
|
-
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2
|
|
388
|
-
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2
|
|
389
|
-
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3
|
|
390
|
-
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3
|
|
391
|
-
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3
|
|
392
|
-
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3
|
|
393
|
-
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3
|
|
394
|
-
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4
|
|
395
|
-
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4
|
|
396
|
-
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4
|
|
397
|
-
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4
|
|
398
|
-
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4
|
|
399
|
-
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5
|
|
400
|
-
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5
|
|
401
|
-
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5
|
|
402
|
-
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5
|
|
403
|
-
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5
|
|
404
|
-
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6
|
|
405
|
-
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6
|
|
406
|
-
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6
|
|
407
|
-
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6
|
|
408
|
-
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6
|
|
360
|
+
$dsn-text-area-outline-offset: 0px; // Outline-afstand van het tekstveld
|
|
361
|
+
$dsn-text-area-resize: vertical; // Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none)
|
|
362
|
+
$dsn-text-area-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
363
|
+
$dsn-text-area-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
364
|
+
$dsn-text-area-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
365
|
+
$dsn-text-area-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
366
|
+
$dsn-text-area-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
367
|
+
$dsn-text-area-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
368
|
+
$dsn-text-area-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
369
|
+
$dsn-text-area-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
370
|
+
$dsn-text-area-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
371
|
+
$dsn-text-input-outline-offset: 0px; // Outline-afstand van het tekstinvoerveld
|
|
372
|
+
$dsn-text-input-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
373
|
+
$dsn-text-input-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
374
|
+
$dsn-text-input-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
375
|
+
$dsn-text-input-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
376
|
+
$dsn-text-input-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
377
|
+
$dsn-text-input-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
378
|
+
$dsn-text-input-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
379
|
+
$dsn-text-input-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
380
|
+
$dsn-text-input-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
381
|
+
$dsn-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van koppen
|
|
382
|
+
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Font-familie van Heading 1
|
|
383
|
+
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Font-size van Heading 1
|
|
384
|
+
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 1
|
|
385
|
+
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Line-height van Heading 1
|
|
386
|
+
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 1
|
|
387
|
+
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Font-familie van Heading 2
|
|
388
|
+
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Font-size van Heading 2
|
|
389
|
+
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 2
|
|
390
|
+
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Line-height van Heading 2
|
|
391
|
+
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 2
|
|
392
|
+
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Font-familie van Heading 3
|
|
393
|
+
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Font-size van Heading 3
|
|
394
|
+
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 3
|
|
395
|
+
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Line-height van Heading 3
|
|
396
|
+
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 3
|
|
397
|
+
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Font-familie van Heading 4
|
|
398
|
+
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Font-size van Heading 4
|
|
399
|
+
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 4
|
|
400
|
+
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Line-height van Heading 4
|
|
401
|
+
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 4
|
|
402
|
+
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Font-familie van Heading 5
|
|
403
|
+
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Font-size van Heading 5
|
|
404
|
+
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 5
|
|
405
|
+
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Line-height van Heading 5
|
|
406
|
+
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 5
|
|
407
|
+
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Font-familie van Heading 6
|
|
408
|
+
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Font-size van Heading 6
|
|
409
|
+
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 6
|
|
410
|
+
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Line-height van Heading 6
|
|
411
|
+
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 6
|
|
409
412
|
$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
|
|
410
413
|
$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
|
|
411
414
|
$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
|
|
@@ -413,297 +416,297 @@ $dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // F
|
|
|
413
416
|
$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
|
|
414
417
|
$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
|
|
415
418
|
$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
|
|
416
|
-
$dsn-form-control-font-family: $dsn-text-font-family-default; //
|
|
417
|
-
$dsn-form-control-font-size: $dsn-text-font-size-md; //
|
|
418
|
-
$dsn-form-control-font-weight: $dsn-text-font-weight-default; //
|
|
419
|
-
$dsn-form-control-line-height: $dsn-text-line-height-md; //
|
|
419
|
+
$dsn-form-control-font-family: $dsn-text-font-family-default; // Lettertype van form controls
|
|
420
|
+
$dsn-form-control-font-size: $dsn-text-font-size-md; // Lettergrootte van form controls
|
|
421
|
+
$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Lettergewicht van form controls
|
|
422
|
+
$dsn-form-control-line-height: $dsn-text-line-height-md; // Regelafstand van form controls
|
|
420
423
|
$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
|
|
421
424
|
$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
|
|
422
|
-
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; //
|
|
423
|
-
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; //
|
|
424
|
-
$dsn-form-control-border-radius: $dsn-border-radius-square; //
|
|
425
|
-
$dsn-form-control-border-width: $dsn-border-width-thin; //
|
|
426
|
-
$dsn-form-control-hover-border-width: $dsn-border-width-medium; //
|
|
427
|
-
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; //
|
|
428
|
-
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; //
|
|
429
|
-
$dsn-form-control-focus-border-width: $dsn-border-width-medium; //
|
|
430
|
-
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; //
|
|
431
|
-
$dsn-form-control-active-border-width: $dsn-border-width-medium; //
|
|
432
|
-
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; //
|
|
433
|
-
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; //
|
|
434
|
-
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; //
|
|
435
|
-
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; //
|
|
436
|
-
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; //
|
|
437
|
-
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; //
|
|
438
|
-
$dsn-form-control-background-color: $dsn-color-neutral-bg-document; //
|
|
439
|
-
$dsn-form-control-border-color: $dsn-color-neutral-border-default; //
|
|
440
|
-
$dsn-form-control-color: $dsn-color-neutral-color-document; //
|
|
441
|
-
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; //
|
|
442
|
-
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; //
|
|
443
|
-
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; //
|
|
444
|
-
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; //
|
|
445
|
-
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
446
|
-
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; //
|
|
447
|
-
$dsn-form-control-read-only-border-color: $dsn-color-transparent; //
|
|
448
|
-
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; //
|
|
425
|
+
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Linker padding van form controls
|
|
426
|
+
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Rechter padding van form controls
|
|
427
|
+
$dsn-form-control-border-radius: $dsn-border-radius-square; // Afronding van form controls
|
|
428
|
+
$dsn-form-control-border-width: $dsn-border-width-thin; // Randbreedte van form controls
|
|
429
|
+
$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Randbreedte van form controls in hover state
|
|
430
|
+
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Achtergrondkleur van form controls in hover state
|
|
431
|
+
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Randkleur van form controls in hover state
|
|
432
|
+
$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Randbreedte van form controls in focus state
|
|
433
|
+
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in focus state
|
|
434
|
+
$dsn-form-control-active-border-width: $dsn-border-width-medium; // Randbreedte van form controls in active state
|
|
435
|
+
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Achtergrondkleur van form controls in active state
|
|
436
|
+
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in active state
|
|
437
|
+
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Randbreedte van form controls in invalid state
|
|
438
|
+
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur van form controls in invalid state
|
|
439
|
+
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Randkleur van form controls in invalid state
|
|
440
|
+
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Tekstkleur van form controls in invalid state
|
|
441
|
+
$dsn-form-control-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van form controls
|
|
442
|
+
$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Randkleur van form controls
|
|
443
|
+
$dsn-form-control-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls
|
|
444
|
+
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Tekstkleur van placeholder in form controls
|
|
445
|
+
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Accentkleur van form controls in disabled state
|
|
446
|
+
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in disabled state
|
|
447
|
+
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Randkleur van form controls in disabled state
|
|
448
|
+
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van form controls in disabled state
|
|
449
|
+
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in read-only state
|
|
450
|
+
$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Randkleur van form controls in read-only state
|
|
451
|
+
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls in read-only state
|
|
449
452
|
$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
|
|
450
453
|
$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
|
|
451
454
|
$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
|
|
452
|
-
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
455
|
+
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
453
456
|
$dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
454
|
-
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
455
|
-
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
456
|
-
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
457
|
-
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
458
|
-
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
459
|
-
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; //
|
|
460
|
-
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
461
|
-
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; //
|
|
462
|
-
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; //
|
|
463
|
-
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
464
|
-
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; //
|
|
465
|
-
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
466
|
-
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; //
|
|
467
|
-
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; //
|
|
457
|
+
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
458
|
+
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
459
|
+
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
460
|
+
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
461
|
+
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
462
|
+
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
463
|
+
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
464
|
+
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
465
|
+
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
466
|
+
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
467
|
+
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
468
|
+
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
469
|
+
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
470
|
+
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
468
471
|
$dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
469
|
-
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
470
|
-
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; //
|
|
471
|
-
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
472
|
-
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; //
|
|
473
|
-
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
474
|
-
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; //
|
|
475
|
-
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; //
|
|
476
|
-
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; //
|
|
477
|
-
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; //
|
|
478
|
-
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; //
|
|
479
|
-
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; //
|
|
480
|
-
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
481
|
-
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; //
|
|
482
|
-
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; //
|
|
483
|
-
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
484
|
-
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
485
|
-
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; //
|
|
486
|
-
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
487
|
-
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; //
|
|
488
|
-
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
489
|
-
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; //
|
|
490
|
-
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; //
|
|
491
|
-
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; //
|
|
492
|
-
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; //
|
|
493
|
-
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; //
|
|
494
|
-
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; //
|
|
495
|
-
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
496
|
-
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; //
|
|
497
|
-
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
498
|
-
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
499
|
-
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
500
|
-
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
501
|
-
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
502
|
-
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
503
|
-
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
504
|
-
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; //
|
|
505
|
-
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
506
|
-
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; //
|
|
507
|
-
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; //
|
|
508
|
-
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
509
|
-
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; //
|
|
510
|
-
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
511
|
-
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; //
|
|
512
|
-
$dsn-color-info-bg-document: $dsn-color-accent-1-bg-document; //
|
|
472
|
+
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
473
|
+
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
474
|
+
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
475
|
+
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
476
|
+
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
477
|
+
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
478
|
+
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
479
|
+
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
480
|
+
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
481
|
+
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
482
|
+
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
483
|
+
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
484
|
+
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
485
|
+
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond — primaire acties (buttons)
|
|
486
|
+
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background — primaire acties (buttons)
|
|
487
|
+
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond — primaire acties (buttons)
|
|
488
|
+
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond — primaire acties (buttons)
|
|
489
|
+
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state — primaire acties (buttons)
|
|
490
|
+
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state — primaire acties (buttons)
|
|
491
|
+
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand — primaire acties (buttons)
|
|
492
|
+
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Standaard rand — primaire acties (buttons)
|
|
493
|
+
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state — primaire acties (buttons)
|
|
494
|
+
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Rand in active state — primaire acties (buttons)
|
|
495
|
+
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur — primaire acties (buttons)
|
|
496
|
+
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state — primaire acties (buttons)
|
|
497
|
+
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Tekst in active state — primaire acties (buttons)
|
|
498
|
+
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur — primaire acties (buttons)
|
|
499
|
+
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur — primaire acties (buttons)
|
|
500
|
+
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond — secundaire acties (links, navigatie)
|
|
501
|
+
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background — secundaire acties (links, navigatie)
|
|
502
|
+
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond — secundaire acties (links, navigatie)
|
|
503
|
+
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond — secundaire acties (links, navigatie)
|
|
504
|
+
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state — secundaire acties (links, navigatie)
|
|
505
|
+
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state — secundaire acties (links, navigatie)
|
|
506
|
+
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand — secundaire acties (links, navigatie)
|
|
507
|
+
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand — secundaire acties (links, navigatie)
|
|
508
|
+
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state — secundaire acties (links, navigatie)
|
|
509
|
+
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state — secundaire acties (links, navigatie)
|
|
510
|
+
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur — secundaire acties (links, navigatie)
|
|
511
|
+
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state — secundaire acties (links, navigatie)
|
|
512
|
+
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state — secundaire acties (links, navigatie)
|
|
513
|
+
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur — secundaire acties (links, navigatie)
|
|
514
|
+
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur — secundaire acties (links, navigatie)
|
|
515
|
+
$dsn-color-info-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
513
516
|
$dsn-color-info-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
514
|
-
$dsn-color-info-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
515
|
-
$dsn-color-info-bg-default: $dsn-color-accent-1-bg-default; //
|
|
516
|
-
$dsn-color-info-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
517
|
-
$dsn-color-info-bg-active: $dsn-color-accent-1-bg-active; //
|
|
518
|
-
$dsn-color-info-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
519
|
-
$dsn-color-info-border-default: $dsn-color-accent-1-border-default; //
|
|
520
|
-
$dsn-color-info-border-hover: $dsn-color-accent-1-border-hover; //
|
|
521
|
-
$dsn-color-info-border-active: $dsn-color-accent-1-border-active; //
|
|
522
|
-
$dsn-color-info-color-default: $dsn-color-accent-1-color-default; //
|
|
523
|
-
$dsn-color-info-color-hover: $dsn-color-accent-1-color-hover; //
|
|
524
|
-
$dsn-color-info-color-active: $dsn-color-accent-1-color-active; //
|
|
525
|
-
$dsn-color-info-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
526
|
-
$dsn-color-info-color-document: $dsn-color-accent-1-color-document; //
|
|
527
|
-
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
517
|
+
$dsn-color-info-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
518
|
+
$dsn-color-info-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
519
|
+
$dsn-color-info-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
520
|
+
$dsn-color-info-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
521
|
+
$dsn-color-info-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
522
|
+
$dsn-color-info-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
523
|
+
$dsn-color-info-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
524
|
+
$dsn-color-info-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
525
|
+
$dsn-color-info-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
526
|
+
$dsn-color-info-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
527
|
+
$dsn-color-info-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
528
|
+
$dsn-color-info-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
529
|
+
$dsn-color-info-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
530
|
+
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse)
|
|
528
531
|
$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
529
|
-
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
530
|
-
$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
531
|
-
$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
532
|
-
$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
533
|
-
$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
534
|
-
$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
535
|
-
$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
536
|
-
$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
537
|
-
$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
538
|
-
$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
539
|
-
$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
540
|
-
$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
541
|
-
$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
542
|
-
$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
532
|
+
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse)
|
|
533
|
+
$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse)
|
|
534
|
+
$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse)
|
|
535
|
+
$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse)
|
|
536
|
+
$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse)
|
|
537
|
+
$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse)
|
|
538
|
+
$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse)
|
|
539
|
+
$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse)
|
|
540
|
+
$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse)
|
|
541
|
+
$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse)
|
|
542
|
+
$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse)
|
|
543
|
+
$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse)
|
|
544
|
+
$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse)
|
|
545
|
+
$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse)
|
|
543
546
|
$dsn-color-accent-3-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
544
|
-
$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
545
|
-
$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
546
|
-
$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
547
|
-
$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
548
|
-
$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
549
|
-
$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
550
|
-
$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
551
|
-
$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
552
|
-
$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
553
|
-
$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
554
|
-
$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
555
|
-
$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
556
|
-
$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
557
|
-
$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
558
|
-
$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
559
|
-
$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
560
|
-
$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
561
|
-
$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
562
|
-
$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
563
|
-
$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
564
|
-
$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
565
|
-
$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
566
|
-
$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
567
|
-
$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
568
|
-
$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
569
|
-
$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
570
|
-
$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
571
|
-
$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
572
|
-
$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; //
|
|
573
|
-
$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse)
|
|
574
|
-
$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; //
|
|
575
|
-
$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; //
|
|
576
|
-
$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; //
|
|
577
|
-
$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; //
|
|
578
|
-
$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; //
|
|
579
|
-
$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; //
|
|
580
|
-
$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; //
|
|
581
|
-
$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; //
|
|
582
|
-
$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; //
|
|
583
|
-
$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; //
|
|
584
|
-
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; //
|
|
585
|
-
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; //
|
|
586
|
-
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; //
|
|
547
|
+
$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse)
|
|
548
|
+
$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse)
|
|
549
|
+
$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse)
|
|
550
|
+
$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse)
|
|
551
|
+
$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse)
|
|
552
|
+
$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse)
|
|
553
|
+
$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse)
|
|
554
|
+
$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse)
|
|
555
|
+
$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse)
|
|
556
|
+
$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse)
|
|
557
|
+
$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse)
|
|
558
|
+
$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse)
|
|
559
|
+
$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse)
|
|
560
|
+
$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse) — primaire acties (buttons)
|
|
561
|
+
$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) — primaire acties (buttons)
|
|
562
|
+
$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse) — primaire acties (buttons)
|
|
563
|
+
$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse) — primaire acties (buttons)
|
|
564
|
+
$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse) — primaire acties (buttons)
|
|
565
|
+
$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse) — primaire acties (buttons)
|
|
566
|
+
$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse) — primaire acties (buttons)
|
|
567
|
+
$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse) — primaire acties (buttons)
|
|
568
|
+
$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse) — primaire acties (buttons)
|
|
569
|
+
$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse) — primaire acties (buttons)
|
|
570
|
+
$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse) — primaire acties (buttons)
|
|
571
|
+
$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse) — primaire acties (buttons)
|
|
572
|
+
$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — primaire acties (buttons)
|
|
573
|
+
$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — primaire acties (buttons)
|
|
574
|
+
$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — primaire acties (buttons)
|
|
575
|
+
$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document; // Documentachtergrond (inverse) — secundaire acties (links, navigatie)
|
|
576
|
+
$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated; // Elevated background (inverse) — secundaire acties (links, navigatie)
|
|
577
|
+
$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle; // Subtiele achtergrond (inverse) — secundaire acties (links, navigatie)
|
|
578
|
+
$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default; // Standaard achtergrond (inverse) — secundaire acties (links, navigatie)
|
|
579
|
+
$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover; // Achtergrond in hover state (inverse) — secundaire acties (links, navigatie)
|
|
580
|
+
$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active; // Achtergrond in active state (inverse) — secundaire acties (links, navigatie)
|
|
581
|
+
$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle; // Subtiele rand (inverse) — secundaire acties (links, navigatie)
|
|
582
|
+
$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default; // Standaard rand (inverse) — secundaire acties (links, navigatie)
|
|
583
|
+
$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover; // Rand in hover state (inverse) — secundaire acties (links, navigatie)
|
|
584
|
+
$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active; // Rand in active state (inverse) — secundaire acties (links, navigatie)
|
|
585
|
+
$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default; // Standaard tekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
586
|
+
$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover; // Tekst in hover state (inverse) — secundaire acties (links, navigatie)
|
|
587
|
+
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — secundaire acties (links, navigatie)
|
|
588
|
+
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
589
|
+
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
587
590
|
$dsn-backdrop-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht dark mode. Gebruikt neutral.bg-document (#111111) zodat de overlay donker blijft in dark mode.
|
|
588
591
|
$dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
|
|
589
592
|
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
590
593
|
$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
|
|
591
|
-
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border
|
|
592
|
-
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border
|
|
593
|
-
$dsn-alert-column-gap: $dsn-space-inline-md; //
|
|
594
|
-
$dsn-alert-padding-block: $dsn-space-block-xl; //
|
|
595
|
-
$dsn-alert-padding-inline: $dsn-space-inline-xl; //
|
|
596
|
-
$dsn-alert-row-gap: $dsn-space-row-md; //
|
|
597
|
-
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; //
|
|
598
|
-
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; //
|
|
599
|
-
$dsn-alert-negative-color: $dsn-color-negative-color-document; //
|
|
600
|
-
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; //
|
|
601
|
-
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; //
|
|
602
|
-
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; //
|
|
603
|
-
$dsn-alert-positive-color: $dsn-color-positive-color-document; //
|
|
604
|
-
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; //
|
|
605
|
-
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; //
|
|
606
|
-
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; //
|
|
607
|
-
$dsn-alert-warning-color: $dsn-color-warning-color-document; //
|
|
608
|
-
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; //
|
|
609
|
-
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; //
|
|
610
|
-
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font
|
|
611
|
-
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font
|
|
612
|
-
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line
|
|
613
|
-
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; //
|
|
614
|
-
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
615
|
-
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; //
|
|
616
|
-
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; //
|
|
617
|
-
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; //
|
|
618
|
-
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; //
|
|
594
|
+
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen)
|
|
595
|
+
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border-breedte (alleen linkerborder)
|
|
596
|
+
$dsn-alert-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
597
|
+
$dsn-alert-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
598
|
+
$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontale padding
|
|
599
|
+
$dsn-alert-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
600
|
+
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
601
|
+
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Borderkleur voor negative variant
|
|
602
|
+
$dsn-alert-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
603
|
+
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
604
|
+
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
605
|
+
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Borderkleur voor positive variant
|
|
606
|
+
$dsn-alert-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
607
|
+
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
608
|
+
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
609
|
+
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Borderkleur voor warning variant
|
|
610
|
+
$dsn-alert-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
611
|
+
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
612
|
+
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Ruimte tussen breadcrumb-items
|
|
613
|
+
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font-size — sm (consistent met Link size small)
|
|
614
|
+
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font-gewicht
|
|
615
|
+
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line-height — sm (consistent met Link size small)
|
|
616
|
+
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Kleur van het huidige pagina-item
|
|
617
|
+
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimale aanraak-/klikhoogte
|
|
618
|
+
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Verticale padding om de min-block-size te bereiken
|
|
619
|
+
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // Geen horizontale padding op items
|
|
620
|
+
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Ruimte tussen icoon en linktekst
|
|
621
|
+
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Kleur van het scheidingsicoon
|
|
619
622
|
$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
|
|
620
|
-
$dsn-button-border-radius: $dsn-border-radius-md; // Button border
|
|
621
|
-
$dsn-button-border-width: $dsn-border-width-thin; // Button border
|
|
622
|
-
$dsn-button-font-family: $dsn-text-font-family-default; // Button font
|
|
623
|
-
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font
|
|
624
|
-
$dsn-button-line-height: $dsn-text-line-height-md; // Button line
|
|
625
|
-
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
626
|
-
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
627
|
-
$dsn-button-default-background-color: $dsn-color-transparent; //
|
|
628
|
-
$dsn-button-default-negative-background-color: $dsn-color-transparent; //
|
|
629
|
-
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; //
|
|
630
|
-
$dsn-button-default-negative-color: $dsn-color-negative-color-default; //
|
|
631
|
-
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; //
|
|
632
|
-
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; //
|
|
633
|
-
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; //
|
|
634
|
-
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; //
|
|
635
|
-
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; //
|
|
636
|
-
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; //
|
|
637
|
-
$dsn-button-default-positive-background-color: $dsn-color-transparent; //
|
|
638
|
-
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; //
|
|
639
|
-
$dsn-button-default-positive-color: $dsn-color-positive-color-default; //
|
|
640
|
-
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; //
|
|
641
|
-
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; //
|
|
642
|
-
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; //
|
|
643
|
-
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; //
|
|
644
|
-
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; //
|
|
645
|
-
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; //
|
|
646
|
-
$dsn-button-strong-border-color: $dsn-color-transparent; //
|
|
647
|
-
$dsn-button-strong-active-border-color: $dsn-color-transparent; //
|
|
648
|
-
$dsn-button-strong-hover-border-color: $dsn-color-transparent; //
|
|
649
|
-
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; //
|
|
650
|
-
$dsn-button-strong-negative-border-color: $dsn-color-transparent; //
|
|
651
|
-
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; //
|
|
652
|
-
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; //
|
|
653
|
-
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; //
|
|
654
|
-
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; //
|
|
655
|
-
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; //
|
|
656
|
-
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; //
|
|
657
|
-
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; //
|
|
658
|
-
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; //
|
|
659
|
-
$dsn-button-strong-positive-border-color: $dsn-color-transparent; //
|
|
660
|
-
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; //
|
|
661
|
-
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; //
|
|
662
|
-
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; //
|
|
663
|
-
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; //
|
|
664
|
-
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; //
|
|
665
|
-
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; //
|
|
666
|
-
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; //
|
|
667
|
-
$dsn-button-subtle-background-color: $dsn-color-transparent; //
|
|
668
|
-
$dsn-button-subtle-border-color: $dsn-color-transparent; //
|
|
669
|
-
$dsn-button-subtle-active-border-color: $dsn-color-transparent; //
|
|
670
|
-
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; //
|
|
671
|
-
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; //
|
|
672
|
-
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; //
|
|
673
|
-
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; //
|
|
674
|
-
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; //
|
|
675
|
-
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; //
|
|
676
|
-
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; //
|
|
677
|
-
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; //
|
|
678
|
-
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; //
|
|
679
|
-
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; //
|
|
680
|
-
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; //
|
|
681
|
-
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; //
|
|
682
|
-
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; //
|
|
683
|
-
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; //
|
|
684
|
-
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; //
|
|
685
|
-
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; //
|
|
686
|
-
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; //
|
|
687
|
-
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; //
|
|
688
|
-
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; //
|
|
689
|
-
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; //
|
|
690
|
-
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
691
|
-
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; //
|
|
692
|
-
$dsn-button-size-default-font-size: $dsn-text-font-size-md; //
|
|
693
|
-
$dsn-button-size-default-gap: $dsn-space-text-sm; //
|
|
694
|
-
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; //
|
|
695
|
-
$dsn-button-size-default-padding-block: $dsn-space-block-md; //
|
|
696
|
-
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; //
|
|
697
|
-
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; //
|
|
698
|
-
$dsn-button-size-large-gap: $dsn-space-text-md; //
|
|
699
|
-
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; //
|
|
700
|
-
$dsn-button-size-large-padding-block: $dsn-space-block-lg; //
|
|
701
|
-
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; //
|
|
702
|
-
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; //
|
|
703
|
-
$dsn-button-size-small-gap: $dsn-space-text-sm; //
|
|
704
|
-
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; //
|
|
705
|
-
$dsn-button-size-small-padding-block: $dsn-space-block-sm; //
|
|
706
|
-
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; //
|
|
623
|
+
$dsn-button-border-radius: $dsn-border-radius-md; // Button border-radius
|
|
624
|
+
$dsn-button-border-width: $dsn-border-width-thin; // Button border-breedte
|
|
625
|
+
$dsn-button-font-family: $dsn-text-font-family-default; // Button font-familie
|
|
626
|
+
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font-gewicht
|
|
627
|
+
$dsn-button-line-height: $dsn-text-line-height-md; // Button line-height
|
|
628
|
+
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel)
|
|
629
|
+
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel)
|
|
630
|
+
$dsn-button-default-background-color: $dsn-color-transparent; // Achtergrond van de default button
|
|
631
|
+
$dsn-button-default-negative-background-color: $dsn-color-transparent; // Achtergrond van de default negative button
|
|
632
|
+
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Border van de default negative button
|
|
633
|
+
$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de default negative button
|
|
634
|
+
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de default negative button op active
|
|
635
|
+
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Border van de default negative button op active
|
|
636
|
+
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de default negative button op active
|
|
637
|
+
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de default negative button op hover
|
|
638
|
+
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Border van de default negative button op hover
|
|
639
|
+
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de default negative button op hover
|
|
640
|
+
$dsn-button-default-positive-background-color: $dsn-color-transparent; // Achtergrond van de default positive button
|
|
641
|
+
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Border van de default positive button
|
|
642
|
+
$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de default positive button
|
|
643
|
+
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de default positive button op active
|
|
644
|
+
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Border van de default positive button op active
|
|
645
|
+
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de default positive button op active
|
|
646
|
+
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de default positive button op hover
|
|
647
|
+
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Border van de default positive button op hover
|
|
648
|
+
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de default positive button op hover
|
|
649
|
+
$dsn-button-strong-border-color: $dsn-color-transparent; // Border van de strong button
|
|
650
|
+
$dsn-button-strong-active-border-color: $dsn-color-transparent; // Border van de strong button op active
|
|
651
|
+
$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Border van de strong button op hover
|
|
652
|
+
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrond van de strong negative button
|
|
653
|
+
$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Border van de strong negative button
|
|
654
|
+
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Tekst-/icoonkleur van de strong negative button
|
|
655
|
+
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Achtergrond van de strong negative button op active
|
|
656
|
+
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Border van de strong negative button op active
|
|
657
|
+
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Tekst-/icoonkleur van de strong negative button op active
|
|
658
|
+
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Achtergrond van de strong negative button op hover
|
|
659
|
+
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Border van de strong negative button op hover
|
|
660
|
+
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Tekst-/icoonkleur van de strong negative button op hover
|
|
661
|
+
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrond van de strong positive button
|
|
662
|
+
$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Border van de strong positive button
|
|
663
|
+
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Tekst-/icoonkleur van de strong positive button
|
|
664
|
+
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Achtergrond van de strong positive button op active
|
|
665
|
+
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Border van de strong positive button op active
|
|
666
|
+
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Tekst-/icoonkleur van de strong positive button op active
|
|
667
|
+
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Achtergrond van de strong positive button op hover
|
|
668
|
+
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Border van de strong positive button op hover
|
|
669
|
+
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Tekst-/icoonkleur van de strong positive button op hover
|
|
670
|
+
$dsn-button-subtle-background-color: $dsn-color-transparent; // Achtergrond van de subtle button
|
|
671
|
+
$dsn-button-subtle-border-color: $dsn-color-transparent; // Border van de subtle button
|
|
672
|
+
$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Border van de subtle button op active
|
|
673
|
+
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Border van de subtle button op hover
|
|
674
|
+
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Achtergrond van de subtle negative button
|
|
675
|
+
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Border van de subtle negative button
|
|
676
|
+
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de subtle negative button
|
|
677
|
+
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de subtle negative button op active
|
|
678
|
+
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Border van de subtle negative button op active
|
|
679
|
+
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de subtle negative button op active
|
|
680
|
+
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de subtle negative button op hover
|
|
681
|
+
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Border van de subtle negative button op hover
|
|
682
|
+
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de subtle negative button op hover
|
|
683
|
+
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Achtergrond van de subtle positive button
|
|
684
|
+
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Border van de subtle positive button
|
|
685
|
+
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de subtle positive button
|
|
686
|
+
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de subtle positive button op active
|
|
687
|
+
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Border van de subtle positive button op active
|
|
688
|
+
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de subtle positive button op active
|
|
689
|
+
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de subtle positive button op hover
|
|
690
|
+
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Border van de subtle positive button op hover
|
|
691
|
+
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de subtle positive button op hover
|
|
692
|
+
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
693
|
+
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
694
|
+
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
695
|
+
$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default button
|
|
696
|
+
$dsn-button-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default button
|
|
697
|
+
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Padding van de icon-only default button
|
|
698
|
+
$dsn-button-size-default-padding-block: $dsn-space-block-md; // Verticale padding van de default button
|
|
699
|
+
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de default button
|
|
700
|
+
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large button
|
|
701
|
+
$dsn-button-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large button
|
|
702
|
+
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Padding van de icon-only large button
|
|
703
|
+
$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Verticale padding van de large button
|
|
704
|
+
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Horizontale padding van de large button
|
|
705
|
+
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small button
|
|
706
|
+
$dsn-button-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small button
|
|
707
|
+
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Padding van de icon-only small button
|
|
708
|
+
$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Verticale padding van de small button
|
|
709
|
+
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de small button
|
|
707
710
|
$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
|
|
708
711
|
$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
|
|
709
712
|
$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
|
|
@@ -721,17 +724,17 @@ $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de ca
|
|
|
721
724
|
$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
|
|
722
725
|
$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
|
|
723
726
|
$dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
|
|
724
|
-
$dsn-checkbox-group-border-width: $dsn-border-width-none; //
|
|
725
|
-
$dsn-checkbox-group-gap: $dsn-space-block-sm; //
|
|
726
|
-
$dsn-checkbox-group-margin: $dsn-space-none; //
|
|
727
|
-
$dsn-checkbox-group-padding: $dsn-space-none; //
|
|
727
|
+
$dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
728
|
+
$dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
|
|
729
|
+
$dsn-checkbox-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
730
|
+
$dsn-checkbox-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
728
731
|
$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
|
|
729
732
|
$dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
730
|
-
$dsn-checkbox-border-radius: $dsn-border-radius-square; //
|
|
733
|
+
$dsn-checkbox-border-radius: $dsn-border-radius-square; // Vierkante hoeken voor de checkbox
|
|
731
734
|
$dsn-checkbox-border-width: $dsn-border-width-thin;
|
|
732
735
|
$dsn-checkbox-active-border-width: $dsn-border-width-medium;
|
|
733
736
|
$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
|
|
734
|
-
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
737
|
+
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van het vinkje
|
|
735
738
|
$dsn-checkbox-focus-border-width: $dsn-border-width-medium;
|
|
736
739
|
$dsn-checkbox-hover-border-width: $dsn-border-width-medium;
|
|
737
740
|
$dsn-checkbox-invalid-border-width: $dsn-border-width-medium;
|
|
@@ -741,7 +744,7 @@ $dsn-checkbox-checked-focus-border-width: $dsn-border-width-medium;
|
|
|
741
744
|
$dsn-checkbox-checked-hover-border-width: $dsn-border-width-medium;
|
|
742
745
|
$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
743
746
|
$dsn-checkbox-indeterminate-border-width: $dsn-border-width-thin;
|
|
744
|
-
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; //
|
|
747
|
+
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Kleur van het indeterminate-icoon (minteken)
|
|
745
748
|
$dsn-checkbox-indeterminate-active-border-width: $dsn-border-width-medium;
|
|
746
749
|
$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
|
|
747
750
|
$dsn-checkbox-indeterminate-focus-border-width: $dsn-border-width-medium;
|
|
@@ -758,13 +761,13 @@ $dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month a
|
|
|
758
761
|
$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
|
|
759
762
|
$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
|
|
760
763
|
$dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
|
|
761
|
-
$dsn-details-row-gap: $dsn-space-row-md; //
|
|
762
|
-
$dsn-details-summary-gap: $dsn-space-text-sm; //
|
|
763
|
-
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; //
|
|
764
|
-
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; //
|
|
765
|
-
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; //
|
|
766
|
-
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; //
|
|
767
|
-
$dsn-details-content-padding-block: $dsn-space-block-xl; //
|
|
764
|
+
$dsn-details-row-gap: $dsn-space-row-md; // Verticale ruimte tussen summary en inhoud
|
|
765
|
+
$dsn-details-summary-gap: $dsn-space-text-sm; // Ruimte tussen het chevron-icoon en de labeltekst
|
|
766
|
+
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Kleur van de linkerborder voor visuele groepering
|
|
767
|
+
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder
|
|
768
|
+
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Linker padding — lijnt de inhoud uit met de labeltekst
|
|
769
|
+
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Rechter padding
|
|
770
|
+
$dsn-details-content-padding-block: $dsn-space-block-xl; // Boven- en onderpadding
|
|
768
771
|
$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
|
|
769
772
|
$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
770
773
|
$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
|
|
@@ -782,9 +785,9 @@ $dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding va
|
|
|
782
785
|
$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
783
786
|
$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
784
787
|
$dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
785
|
-
$dsn-file-input-column-gap: $dsn-space-text-lg; //
|
|
786
|
-
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
787
|
-
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
788
|
+
$dsn-file-input-column-gap: $dsn-space-text-lg; // Ruimte tussen de file-selector-button en de bestandsnaamtekst
|
|
789
|
+
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
790
|
+
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
788
791
|
$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
|
|
789
792
|
$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
|
|
790
793
|
$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
|
|
@@ -806,68 +809,67 @@ $dsn-file-media-border-radius: $dsn-border-radius-sm;
|
|
|
806
809
|
$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
|
|
807
810
|
$dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
|
|
808
811
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
809
|
-
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; //
|
|
810
|
-
$dsn-form-field-description-font-family: $dsn-text-font-family-default; //
|
|
811
|
-
$dsn-form-field-description-font-size: $dsn-text-font-size-md; //
|
|
812
|
-
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; //
|
|
813
|
-
$dsn-form-field-description-line-height: $dsn-text-line-height-md; //
|
|
814
|
-
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; //
|
|
815
|
-
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; //
|
|
816
|
-
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; //
|
|
817
|
-
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; //
|
|
818
|
-
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; //
|
|
819
|
-
$dsn-form-field-error-message-gap: $dsn-space-text-sm; //
|
|
820
|
-
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; //
|
|
821
|
-
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; //
|
|
822
|
-
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; //
|
|
823
|
-
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; //
|
|
824
|
-
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; //
|
|
825
|
-
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; //
|
|
826
|
-
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; //
|
|
827
|
-
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; //
|
|
828
|
-
$dsn-form-field-label-color: $dsn-color-neutral-color-document; //
|
|
829
|
-
$dsn-form-field-label-font-family: $dsn-text-font-family-default; //
|
|
830
|
-
$dsn-form-field-label-font-size: $dsn-text-font-size-md; //
|
|
831
|
-
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; //
|
|
832
|
-
$dsn-form-field-label-line-height: $dsn-text-line-height-md; //
|
|
833
|
-
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; //
|
|
834
|
-
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; //
|
|
835
|
-
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; //
|
|
836
|
-
$dsn-form-field-status-font-family: $dsn-text-font-family-default; //
|
|
837
|
-
$dsn-form-field-status-font-size: $dsn-text-font-size-md; //
|
|
838
|
-
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; //
|
|
839
|
-
$dsn-form-field-status-gap: $dsn-space-text-sm; //
|
|
840
|
-
$dsn-form-field-status-line-height: $dsn-text-line-height-md; //
|
|
841
|
-
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; //
|
|
842
|
-
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; //
|
|
843
|
-
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; //
|
|
844
|
-
$dsn-form-field-margin-block-end: $dsn-space-none; //
|
|
845
|
-
$dsn-form-field-margin-block-start: $dsn-space-none; //
|
|
846
|
-
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
847
|
-
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; //
|
|
848
|
-
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; //
|
|
849
|
-
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
812
|
+
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de formulierveldbeschrijving
|
|
813
|
+
$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Font-familie van de formulierveldbeschrijving
|
|
814
|
+
$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Font-size van de formulierveldbeschrijving
|
|
815
|
+
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de formulierveldbeschrijving
|
|
816
|
+
$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Line-height van de formulierveldbeschrijving
|
|
817
|
+
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Ruimte onder de beschrijving voor het formulierbesturingselement
|
|
818
|
+
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
|
|
819
|
+
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Font-familie van de foutmelding
|
|
820
|
+
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Font-size van de foutmelding
|
|
821
|
+
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de foutmelding
|
|
822
|
+
$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Ruimte tussen icoon en foutmeldingstekst
|
|
823
|
+
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Line-height van de foutmelding
|
|
824
|
+
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Ruimte onder de foutmelding voor het formulierbesturingselement
|
|
825
|
+
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Tekstkleur van het labelachtervoegsel
|
|
826
|
+
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Font-familie van het labelachtervoegsel
|
|
827
|
+
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Font-size van het labelachtervoegsel
|
|
828
|
+
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Font-gewicht van het labelachtervoegsel
|
|
829
|
+
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Line-height van het labelachtervoegsel
|
|
830
|
+
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Ruimte tussen de labeltekst en het achtervoegsel
|
|
831
|
+
$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Tekstkleur van het formulierveldlabel
|
|
832
|
+
$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Font-familie van het formulierveldlabel
|
|
833
|
+
$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Font-size van het formulierveldlabel
|
|
834
|
+
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van het formulierveldlabel
|
|
835
|
+
$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Line-height van het formulierveldlabel
|
|
836
|
+
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt)
|
|
837
|
+
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Ruimte onder het label wanneer een beschrijving volgt
|
|
838
|
+
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie)
|
|
839
|
+
$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Font-familie van de veldstatus
|
|
840
|
+
$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Font-size van de veldstatus
|
|
841
|
+
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de veldstatus
|
|
842
|
+
$dsn-form-field-status-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst (positive en warning varianten)
|
|
843
|
+
$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Line-height van de veldstatus
|
|
844
|
+
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Ruimte boven het statusbericht na het formulierbesturingselement
|
|
845
|
+
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
846
|
+
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
847
|
+
$dsn-form-field-margin-block-end: $dsn-space-none; // Onderste margin van de formulierveldcontainer
|
|
848
|
+
$dsn-form-field-margin-block-start: $dsn-space-none; // Bovenste margin van de formulierveldcontainer
|
|
849
|
+
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
|
|
850
|
+
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder voor ongeldige formuliervelden
|
|
851
|
+
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker padding voor ongeldige formuliervelden (om de border op te vangen)
|
|
850
852
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
851
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
|
|
852
|
-
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
853
|
-
$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
|
|
854
856
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
855
|
-
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
857
|
+
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
856
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
|
|
857
|
-
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
859
|
+
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
858
860
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
859
861
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
860
862
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
861
863
|
$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
|
|
862
864
|
$dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
|
|
863
|
-
$dsn-link-gap: $dsn-space-text-sm; //
|
|
864
|
-
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
865
|
-
$dsn-link-size-default-font-size: $dsn-text-font-size-md; //
|
|
866
|
-
$dsn-link-size-default-gap: $dsn-space-text-sm; //
|
|
867
|
-
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; //
|
|
868
|
-
$dsn-link-size-large-gap: $dsn-space-text-md; //
|
|
869
|
-
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; //
|
|
870
|
-
$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
|
|
871
873
|
$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
|
|
872
874
|
$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
|
|
873
875
|
$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
|
|
@@ -899,28 +901,28 @@ $dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padd
|
|
|
899
901
|
$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
900
902
|
$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
901
903
|
$dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
902
|
-
$dsn-note-border-inline-start-width: $dsn-border-width-medium; //
|
|
903
|
-
$dsn-note-column-gap: $dsn-space-inline-md; //
|
|
904
|
-
$dsn-note-padding-block: $dsn-space-block-xl; //
|
|
905
|
-
$dsn-note-padding-inline-end: $dsn-space-inline-xl; //
|
|
906
|
-
$dsn-note-padding-inline-start: $dsn-space-inline-xl; //
|
|
907
|
-
$dsn-note-row-gap: $dsn-space-row-md; //
|
|
908
|
-
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; //
|
|
909
|
-
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
910
|
-
$dsn-note-negative-color: $dsn-color-negative-color-document; //
|
|
911
|
-
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; //
|
|
912
|
-
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
913
|
-
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; //
|
|
914
|
-
$dsn-note-neutral-color: $dsn-color-neutral-color-document; //
|
|
915
|
-
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; //
|
|
916
|
-
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; //
|
|
917
|
-
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; //
|
|
918
|
-
$dsn-note-positive-color: $dsn-color-positive-color-document; //
|
|
919
|
-
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; //
|
|
920
|
-
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; //
|
|
921
|
-
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; //
|
|
922
|
-
$dsn-note-warning-color: $dsn-color-warning-color-document; //
|
|
923
|
-
$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
|
|
924
926
|
$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
|
|
925
927
|
$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
|
|
926
928
|
$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
|
|
@@ -929,69 +931,69 @@ $dsn-number-badge-padding-inline: $dsn-space-inline-sm; // Horizontale padding
|
|
|
929
931
|
$dsn-number-badge-border-radius: $dsn-border-radius-round; // Pill-vorm via volledig ronde border-radius
|
|
930
932
|
$dsn-number-badge-border-width: $dsn-border-width-thin; // Transparante border voor forced-colors / High Contrast mode ondersteuning
|
|
931
933
|
$dsn-number-badge-border-color: $dsn-color-transparent; // Transparant by default; zichtbaar in forced-colors / High Contrast mode
|
|
932
|
-
$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
|
|
933
935
|
$dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
|
|
934
|
-
$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
|
|
935
937
|
$dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
|
|
936
|
-
$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
|
|
937
939
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
938
|
-
$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
|
|
939
941
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
940
|
-
$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
|
|
941
943
|
$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
|
|
942
944
|
$dsn-option-label-color: $dsn-color-neutral-color-document;
|
|
943
945
|
$dsn-option-label-font-family: $dsn-text-font-family-default;
|
|
944
946
|
$dsn-option-label-font-size: $dsn-text-font-size-md;
|
|
945
947
|
$dsn-option-label-font-weight: $dsn-text-font-weight-default;
|
|
946
948
|
$dsn-option-label-line-height: $dsn-text-line-height-md;
|
|
947
|
-
$dsn-ordered-list-color: $dsn-color-neutral-color-document; //
|
|
948
|
-
$dsn-ordered-list-font-family: $dsn-text-font-family-default; //
|
|
949
|
-
$dsn-ordered-list-font-size: $dsn-text-font-size-md; //
|
|
950
|
-
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; //
|
|
951
|
-
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; //
|
|
952
|
-
$dsn-ordered-list-gap: $dsn-space-row-sm; //
|
|
953
|
-
$dsn-ordered-list-line-height: $dsn-text-line-height-md; //
|
|
954
|
-
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; //
|
|
955
|
-
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; //
|
|
956
|
-
$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
|
|
957
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
|
|
958
|
-
$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
|
|
959
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
|
|
960
|
-
$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
|
|
961
963
|
$dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
|
|
962
964
|
$dsn-page-footer-slot-gap: $dsn-space-block-xl; // Verticale witruimte tussen gestapelde slots op small viewport
|
|
963
965
|
$dsn-page-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer-binnenbalk — zelfde schaal als PageHeader masthead en navbar
|
|
964
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
|
|
965
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
|
|
966
|
-
$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
|
|
967
969
|
$dsn-page-header-padding-block: $dsn-space-block-md; // Verticale padding van de header-binnenbalk
|
|
968
970
|
$dsn-page-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header-binnenbalk — zelfde schaal als masthead en navbar
|
|
969
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
|
|
970
972
|
$dsn-page-header-masthead-background-color: $dsn-color-neutral-bg-document; // Masthead achtergrond — zelfde neutrale kleur als pagina-achtergrond
|
|
971
973
|
$dsn-page-header-masthead-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de masthead
|
|
972
974
|
$dsn-page-header-masthead-padding-inline: $dsn-space-inline-xl; // Horizontale padding masthead — zelfde als navbar
|
|
973
|
-
$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
|
|
974
976
|
$dsn-page-header-navbar-padding-inline: $dsn-space-inline-xl; // Horizontale padding navigatiebalk — zelfde als masthead
|
|
975
977
|
$dsn-page-header-secondary-nav-gap: $dsn-space-column-3xl; // Witruimte tussen servicemenu (Menu) en zoekveld in de masthead
|
|
976
|
-
$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
|
|
977
979
|
$dsn-page-header-search-panel-padding-block: $dsn-space-block-md; // Verticale padding van het zoekpaneel
|
|
978
980
|
$dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizontale padding van het zoekpaneel
|
|
979
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
|
|
980
982
|
$dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
|
|
981
983
|
$dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
|
|
982
|
-
$dsn-paragraph-color: $dsn-color-neutral-color-document; //
|
|
983
|
-
$dsn-paragraph-font-family: $dsn-text-font-family-default; //
|
|
984
|
-
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; //
|
|
985
|
-
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; //
|
|
986
|
-
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; //
|
|
987
|
-
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; //
|
|
988
|
-
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; //
|
|
989
|
-
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; //
|
|
990
|
-
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; //
|
|
991
|
-
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; //
|
|
992
|
-
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; //
|
|
993
|
-
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; //
|
|
994
|
-
$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
|
|
995
997
|
$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
|
|
996
998
|
$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
|
|
997
999
|
$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
|
|
@@ -1009,27 +1011,27 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
1009
1011
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
1010
1012
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
1011
1013
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
1012
|
-
$dsn-pre-heading-color: $dsn-color-neutral-color-document; //
|
|
1013
|
-
$dsn-pre-heading-font-family: $dsn-text-font-family-default; //
|
|
1014
|
-
$dsn-pre-heading-font-size: $dsn-text-font-size-md; //
|
|
1015
|
-
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; //
|
|
1016
|
-
$dsn-pre-heading-line-height: $dsn-text-line-height-md; //
|
|
1017
|
-
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; //
|
|
1018
|
-
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; //
|
|
1019
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk
|
|
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
|
|
1020
1022
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
1021
1023
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
1022
1024
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
1023
|
-
$dsn-radio-group-border-width: $dsn-border-width-none; //
|
|
1024
|
-
$dsn-radio-group-gap: $dsn-space-block-sm; //
|
|
1025
|
-
$dsn-radio-group-margin: $dsn-space-none; //
|
|
1026
|
-
$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
|
|
1027
1029
|
$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
|
|
1028
1030
|
$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
1029
1031
|
$dsn-radio-border-width: $dsn-border-width-thin;
|
|
1030
1032
|
$dsn-radio-active-border-width: $dsn-border-width-medium;
|
|
1031
1033
|
$dsn-radio-checked-border-width: $dsn-border-width-thin;
|
|
1032
|
-
$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
|
|
1033
1035
|
$dsn-radio-focus-border-width: $dsn-border-width-medium;
|
|
1034
1036
|
$dsn-radio-hover-border-width: $dsn-border-width-medium;
|
|
1035
1037
|
$dsn-radio-invalid-border-width: $dsn-border-width-medium;
|
|
@@ -1038,9 +1040,9 @@ $dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
|
1038
1040
|
$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
|
|
1039
1041
|
$dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
|
|
1040
1042
|
$dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1041
|
-
$dsn-search-input-icon-gap: $dsn-space-text-md; //
|
|
1042
|
-
$dsn-select-icon-gap: $dsn-space-text-md; //
|
|
1043
|
-
$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)
|
|
1044
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
|
|
1045
1047
|
$dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
|
|
1046
1048
|
$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
|
|
@@ -1051,31 +1053,40 @@ $dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog
|
|
|
1051
1053
|
$dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
|
|
1052
1054
|
$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
|
|
1053
1055
|
$dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
|
|
1054
|
-
$dsn-status-badge-border-color: $dsn-color-transparent; //
|
|
1055
|
-
$dsn-status-badge-border-radius: $dsn-border-radius-sm; //
|
|
1056
|
-
$dsn-status-badge-border-width: $dsn-border-width-thin; //
|
|
1057
|
-
$dsn-status-badge-font-size: $dsn-text-font-size-sm; //
|
|
1058
|
-
$dsn-status-badge-gap: $dsn-space-text-sm; //
|
|
1059
|
-
$dsn-status-badge-line-height: $dsn-text-line-height-sm; //
|
|
1060
|
-
$dsn-status-badge-padding-block: $dsn-space-block-xs; //
|
|
1061
|
-
$dsn-status-badge-padding-inline: $dsn-space-inline-md; //
|
|
1062
|
-
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; //
|
|
1063
|
-
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; //
|
|
1064
|
-
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
1065
|
-
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; //
|
|
1066
|
-
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; //
|
|
1067
|
-
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; //
|
|
1068
|
-
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; //
|
|
1069
|
-
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; //
|
|
1070
|
-
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; //
|
|
1071
|
-
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; //
|
|
1072
|
-
$dsn-summary-list-row-gap: $dsn-space-inline-lg; //
|
|
1073
|
-
$dsn-summary-list-row-padding-block: $dsn-space-block-lg; //
|
|
1074
|
-
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; //
|
|
1075
|
-
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; //
|
|
1076
|
-
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; //
|
|
1077
|
-
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; //
|
|
1078
|
-
$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
|
|
1079
1090
|
$dsn-table-caption-color: $dsn-color-neutral-color-document;
|
|
1080
1091
|
$dsn-table-caption-font-family: $dsn-heading-font-family;
|
|
1081
1092
|
$dsn-table-caption-font-size: $dsn-text-font-size-xl;
|
|
@@ -1097,19 +1108,19 @@ $dsn-table-footer-color: $dsn-color-neutral-color-document;
|
|
|
1097
1108
|
$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
|
|
1098
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
|
|
1099
1110
|
$dsn-table-wrapper-scroll-shadow-color: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
|
|
1100
|
-
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
1101
|
-
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
1102
|
-
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
1103
|
-
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
1104
|
-
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
1105
|
-
$dsn-text-input-column-gap: $dsn-space-text-lg; //
|
|
1106
|
-
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
1107
|
-
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
1108
|
-
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
1109
|
-
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
1110
|
-
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
1111
|
-
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; //
|
|
1112
|
-
$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
|
|
1113
1124
|
$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
|
|
1114
1125
|
$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
|
|
1115
1126
|
$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
|
|
@@ -1120,59 +1131,59 @@ $dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list lin
|
|
|
1120
1131
|
$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
|
|
1121
1132
|
$dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
|
|
1122
1133
|
$dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
|
|
1123
|
-
$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1
|
|
1124
|
-
$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2
|
|
1125
|
-
$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3
|
|
1126
|
-
$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4
|
|
1127
|
-
$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5
|
|
1128
|
-
$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6
|
|
1129
|
-
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; //
|
|
1130
|
-
$dsn-form-control-hover-color: $dsn-form-control-color; //
|
|
1131
|
-
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; //
|
|
1132
|
-
$dsn-form-control-focus-color: $dsn-form-control-color; //
|
|
1133
|
-
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; //
|
|
1134
|
-
$dsn-form-control-active-color: $dsn-form-control-color; //
|
|
1135
|
-
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; //
|
|
1136
|
-
$dsn-alert-icon-size: $dsn-icon-size-xl; //
|
|
1137
|
-
$dsn-alert-info-background-color: $dsn-color-info-bg-default; //
|
|
1138
|
-
$dsn-alert-info-border-color: $dsn-color-info-border-default; //
|
|
1139
|
-
$dsn-alert-info-color: $dsn-color-info-color-document; //
|
|
1140
|
-
$dsn-alert-info-icon-color: $dsn-color-info-color-default; //
|
|
1141
|
-
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; //
|
|
1142
|
-
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1143
|
-
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; //
|
|
1144
|
-
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; //
|
|
1145
|
-
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; //
|
|
1146
|
-
$dsn-button-default-border-color: $dsn-color-action-1-border-default; //
|
|
1147
|
-
$dsn-button-default-color: $dsn-color-action-1-color-default; //
|
|
1148
|
-
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1149
|
-
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; //
|
|
1150
|
-
$dsn-button-default-active-color: $dsn-color-action-1-color-active; //
|
|
1151
|
-
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1152
|
-
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; //
|
|
1153
|
-
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; //
|
|
1154
|
-
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; //
|
|
1155
|
-
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; //
|
|
1156
|
-
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; //
|
|
1157
|
-
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; //
|
|
1158
|
-
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; //
|
|
1159
|
-
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; //
|
|
1160
|
-
$dsn-button-subtle-color: $dsn-color-action-1-color-default; //
|
|
1161
|
-
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1162
|
-
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; //
|
|
1163
|
-
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1164
|
-
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; //
|
|
1165
|
-
$dsn-button-size-default-icon-size: $dsn-icon-size-md; //
|
|
1166
|
-
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1167
|
-
$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
|
|
1168
1179
|
$dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
|
|
1169
1180
|
$dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
|
|
1170
|
-
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; //
|
|
1171
|
-
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1172
|
-
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1173
|
-
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1174
|
-
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1175
|
-
$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)
|
|
1176
1187
|
$dsn-checkbox-background-color: $dsn-form-control-background-color;
|
|
1177
1188
|
$dsn-checkbox-border-color: $dsn-form-control-border-color;
|
|
1178
1189
|
$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
|
|
@@ -1193,33 +1204,33 @@ $dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-bo
|
|
|
1193
1204
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1194
1205
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1195
1206
|
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
1196
|
-
$dsn-details-summary-color: $dsn-color-action-2-color-default; //
|
|
1197
|
-
$dsn-details-icon-size: $dsn-icon-size-md; //
|
|
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
|
|
1198
1209
|
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
1199
1210
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1200
1211
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1201
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
|
|
1202
|
-
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; //
|
|
1203
|
-
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; //
|
|
1204
|
-
$dsn-file-input-color: $dsn-form-control-placeholder-color; //
|
|
1205
|
-
$dsn-file-input-font-family: $dsn-form-control-font-family; //
|
|
1206
|
-
$dsn-file-input-font-size: $dsn-form-control-font-size; //
|
|
1207
|
-
$dsn-file-input-font-weight: $dsn-form-control-font-weight; //
|
|
1208
|
-
$dsn-file-input-line-height: $dsn-form-control-line-height; //
|
|
1209
|
-
$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
|
|
1210
1221
|
$dsn-file-box-shadow-hover: $dsn-box-shadow-md; // Hogere elevatie bij hover — zelfde als Card hover
|
|
1211
1222
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1212
1223
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1213
|
-
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; //
|
|
1214
|
-
$dsn-form-field-status-icon-size: $dsn-icon-size-md; //
|
|
1215
|
-
$dsn-link-color: $dsn-color-action-2-color-default; //
|
|
1216
|
-
$dsn-link-icon-size: $dsn-icon-size-md; //
|
|
1217
|
-
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; //
|
|
1218
|
-
$dsn-link-active-color: $dsn-color-action-2-color-active; //
|
|
1219
|
-
$dsn-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1220
|
-
$dsn-link-size-default-icon-size: $dsn-icon-size-md; //
|
|
1221
|
-
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1222
|
-
$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
|
|
1223
1234
|
$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
|
|
1224
1235
|
$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
|
|
1225
1236
|
$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
|
|
@@ -1230,28 +1241,28 @@ $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-spe
|
|
|
1230
1241
|
$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
|
|
1231
1242
|
$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
|
|
1232
1243
|
$dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
|
|
1233
|
-
$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
|
|
1234
1245
|
$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
|
|
1235
1246
|
$dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
|
|
1236
1247
|
$dsn-modal-dialog-box-shadow: $dsn-box-shadow-lg; // Schaduw van het dialoogvenster — hoogste elevatie (lg)
|
|
1237
1248
|
$dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
|
|
1238
|
-
$dsn-note-icon-size: $dsn-icon-size-xl; //
|
|
1239
|
-
$dsn-note-info-background-color: $dsn-color-info-bg-default; //
|
|
1240
|
-
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; //
|
|
1241
|
-
$dsn-note-info-color: $dsn-color-info-color-document; //
|
|
1242
|
-
$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
|
|
1243
1254
|
$dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
|
|
1244
1255
|
$dsn-popover-box-shadow: $dsn-box-shadow-md; // Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals
|
|
1245
1256
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1246
|
-
$dsn-radio-group-legend-color: $dsn-form-field-label-color; //
|
|
1247
|
-
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1248
|
-
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1249
|
-
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1250
|
-
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1251
|
-
$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)
|
|
1252
1263
|
$dsn-radio-background-color: $dsn-form-control-background-color;
|
|
1253
1264
|
$dsn-radio-border-color: $dsn-form-control-border-color;
|
|
1254
|
-
$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
|
|
1255
1266
|
$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
|
|
1256
1267
|
$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
|
|
1257
1268
|
$dsn-radio-active-color: $dsn-form-control-active-border-color;
|
|
@@ -1268,64 +1279,65 @@ $dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
|
1268
1279
|
$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
|
|
1269
1280
|
$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1270
1281
|
$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1271
|
-
$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
|
|
1272
1283
|
$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1273
|
-
$dsn-search-input-icon-size: $dsn-icon-size-md; //
|
|
1274
|
-
$dsn-select-icon-color: $dsn-color-action-1-color-default; //
|
|
1275
|
-
$dsn-select-icon-size: $dsn-icon-size-md; //
|
|
1276
|
-
$dsn-status-badge-icon-size: $dsn-icon-size-sm; //
|
|
1277
|
-
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; //
|
|
1278
|
-
$dsn-status-badge-info-color: $dsn-color-info-color-default; //
|
|
1279
|
-
$dsn-text-area-background-color: $dsn-form-control-background-color; //
|
|
1280
|
-
$dsn-text-area-border-color: $dsn-form-control-border-color; //
|
|
1281
|
-
$dsn-text-area-border-radius: $dsn-form-control-border-radius; //
|
|
1282
|
-
$dsn-text-area-border-width: $dsn-form-control-border-width; //
|
|
1283
|
-
$dsn-text-area-color: $dsn-form-control-color; //
|
|
1284
|
-
$dsn-text-area-font-family: $dsn-form-control-font-family; //
|
|
1285
|
-
$dsn-text-area-font-size: $dsn-form-control-font-size; //
|
|
1286
|
-
$dsn-text-area-font-weight: $dsn-form-control-font-weight; //
|
|
1287
|
-
$dsn-text-area-line-height: $dsn-form-control-line-height; //
|
|
1288
|
-
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; //
|
|
1289
|
-
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; //
|
|
1290
|
-
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; //
|
|
1291
|
-
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; //
|
|
1292
|
-
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; //
|
|
1293
|
-
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; //
|
|
1294
|
-
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; //
|
|
1295
|
-
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; //
|
|
1296
|
-
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; //
|
|
1297
|
-
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1298
|
-
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1299
|
-
$dsn-text-area-invalid-color: $dsn-form-control-color; //
|
|
1300
|
-
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; //
|
|
1301
|
-
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; //
|
|
1302
|
-
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; //
|
|
1303
|
-
$dsn-text-input-background-color: $dsn-form-control-background-color; //
|
|
1304
|
-
$dsn-text-input-border-color: $dsn-form-control-border-color; //
|
|
1305
|
-
$dsn-text-input-border-radius: $dsn-form-control-border-radius; //
|
|
1306
|
-
$dsn-text-input-border-width: $dsn-form-control-border-width; //
|
|
1307
|
-
$dsn-text-input-color: $dsn-form-control-color; //
|
|
1308
|
-
$dsn-text-input-font-family: $dsn-form-control-font-family; //
|
|
1309
|
-
$dsn-text-input-font-size: $dsn-form-control-font-size; //
|
|
1310
|
-
$dsn-text-input-font-weight: $dsn-form-control-font-weight; //
|
|
1311
|
-
$dsn-text-input-line-height: $dsn-form-control-line-height; //
|
|
1312
|
-
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; //
|
|
1313
|
-
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; //
|
|
1314
|
-
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; //
|
|
1315
|
-
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; //
|
|
1316
|
-
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; //
|
|
1317
|
-
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; //
|
|
1318
|
-
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; //
|
|
1319
|
-
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; //
|
|
1320
|
-
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; //
|
|
1321
|
-
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1322
|
-
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1323
|
-
$dsn-text-input-invalid-color: $dsn-form-control-color; //
|
|
1324
|
-
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; //
|
|
1325
|
-
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; //
|
|
1326
|
-
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; //
|
|
1327
|
-
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; //
|
|
1328
|
-
$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
|
|
1329
1341
|
$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
|
|
1330
1342
|
$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1331
1343
|
$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
@@ -1343,17 +1355,16 @@ $dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-colo
|
|
|
1343
1355
|
$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1344
1356
|
$dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
|
|
1345
1357
|
$dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1346
|
-
$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); //
|
|
1347
|
-
$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); //
|
|
1348
|
-
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; //
|
|
1349
|
-
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; //
|
|
1350
|
-
$dsn-text-area-focus-color: $dsn-form-control-focus-color; //
|
|
1351
|
-
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; //
|
|
1352
|
-
$dsn-text-
|
|
1353
|
-
$dsn-
|
|
1354
|
-
$dsn-
|
|
1355
|
-
$dsn-text-
|
|
1356
|
-
$dsn-text-input-
|
|
1357
|
-
$dsn-text-input-
|
|
1358
|
-
$dsn-
|
|
1359
|
-
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow 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
|