@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: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS
|
|
5
|
-
$dsn-text-font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; //
|
|
6
|
-
$dsn-text-font-weight-default: 400; //
|
|
7
|
-
$dsn-text-font-weight-bold: 600; // Semi-
|
|
8
|
-
$dsn-text-line-height-sm: 1.4; // 140%
|
|
9
|
-
$dsn-text-line-height-md: 1.4; // 140%
|
|
10
|
-
$dsn-text-line-height-lg: 1.2; // 120%
|
|
11
|
-
$dsn-text-line-height-xl: 1.2; // 120%
|
|
12
|
-
$dsn-text-line-height-2xl: 1.2; // 120%
|
|
13
|
-
$dsn-text-line-height-3xl: 1.1; // 110%
|
|
14
|
-
$dsn-text-line-height-4xl: 1.1; // 110%
|
|
15
|
-
$dsn-text-max-inline-size: 65ch; //
|
|
4
|
+
$dsn-text-font-family-default: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS als primair lettertype met Comic Neue als fallback voor wireframe
|
|
5
|
+
$dsn-text-font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // Systeem monospace lettertypestapel
|
|
6
|
+
$dsn-text-font-weight-default: 400; // Regulier gewicht
|
|
7
|
+
$dsn-text-font-weight-bold: 600; // Semi-vet gewicht voor wireframe
|
|
8
|
+
$dsn-text-line-height-sm: 1.4; // 140% regelafstand voor kleine tekst
|
|
9
|
+
$dsn-text-line-height-md: 1.4; // 140% regelafstand voor middelgrote tekst
|
|
10
|
+
$dsn-text-line-height-lg: 1.2; // 120% regelafstand voor grote tekst
|
|
11
|
+
$dsn-text-line-height-xl: 1.2; // 120% regelafstand voor koppen
|
|
12
|
+
$dsn-text-line-height-2xl: 1.2; // 120% regelafstand voor grote koppen
|
|
13
|
+
$dsn-text-line-height-3xl: 1.1; // 110% regelafstand voor display-tekst
|
|
14
|
+
$dsn-text-line-height-4xl: 1.1; // 110% regelafstand voor hero-tekst
|
|
15
|
+
$dsn-text-max-inline-size: 65ch; // Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten)
|
|
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,97 +20,97 @@ $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: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS
|
|
24
|
-
$dsn-heading-font-weight: 600; // Semi-
|
|
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: 2px; //
|
|
84
|
-
$dsn-border-radius-md: 4px; //
|
|
85
|
-
$dsn-border-radius-lg: 8px; //
|
|
86
|
-
$dsn-border-radius-round: 999px; //
|
|
87
|
-
$dsn-border-width-none: 0px; //
|
|
88
|
-
$dsn-border-width-thin: 2px; //
|
|
89
|
-
$dsn-border-width-medium: 4px; //
|
|
90
|
-
$dsn-border-width-thick: 8px; //
|
|
91
|
-
$dsn-focus-outline-offset: 2px; //
|
|
92
|
-
$dsn-focus-outline-style: solid; //
|
|
93
|
-
$dsn-focus-outline-width: 2px; //
|
|
94
|
-
$dsn-focus-background-color: #ffdd00; //
|
|
95
|
-
$dsn-focus-color: #000000; //
|
|
96
|
-
$dsn-focus-outline-color: #ffffff; //
|
|
97
|
-
$dsn-focus-inverse-outline-color: #000000; //
|
|
98
|
-
$dsn-form-control-max-inline-size: 25rem; //
|
|
99
|
-
$dsn-form-control-border-radius: 2px; //
|
|
100
|
-
$dsn-form-control-width-xs: 8ch; // Extra
|
|
101
|
-
$dsn-form-control-width-sm: 16ch; //
|
|
102
|
-
$dsn-form-control-width-md: 32ch; //
|
|
103
|
-
$dsn-form-control-width-lg: 48ch; //
|
|
104
|
-
$dsn-form-control-width-xl: 64ch; // Extra
|
|
105
|
-
$dsn-form-control-width-full: 100%; //
|
|
106
|
-
$dsn-breakpoint-sm: 36em; //
|
|
107
|
-
$dsn-breakpoint-md: 44em; //
|
|
108
|
-
$dsn-breakpoint-lg: 64em; //
|
|
109
|
-
$dsn-breakpoint-xl: 74em; // Extra
|
|
23
|
+
$dsn-heading-font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS als primair lettertype met Comic Neue als fallback voor koppen
|
|
24
|
+
$dsn-heading-font-weight: 600; // Semi-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: 2px; // Kleine afronding — minimaal voor wireframe
|
|
84
|
+
$dsn-border-radius-md: 4px; // Middelgrote afronding — minimaal voor wireframe
|
|
85
|
+
$dsn-border-radius-lg: 8px; // Grote afronding — minimaal voor wireframe
|
|
86
|
+
$dsn-border-radius-round: 999px; // Volledig afgerond (pills, cirkels)
|
|
87
|
+
$dsn-border-width-none: 0px; // Geen randbreedte
|
|
88
|
+
$dsn-border-width-thin: 2px; // Dunne rand
|
|
89
|
+
$dsn-border-width-medium: 4px; // Middelgrote rand
|
|
90
|
+
$dsn-border-width-thick: 8px; // Dikke rand
|
|
91
|
+
$dsn-focus-outline-offset: 2px; // Offset van de focusomtrek
|
|
92
|
+
$dsn-focus-outline-style: solid; // Stijl van de focusomtrek — solid voor wireframe
|
|
93
|
+
$dsn-focus-outline-width: 2px; // Breedte van de focusomtrek
|
|
94
|
+
$dsn-focus-background-color: #ffdd00; // Achtergrondkleur van de focusindicator — geel
|
|
95
|
+
$dsn-focus-color: #000000; // Tekstkleur van de focusindicator
|
|
96
|
+
$dsn-focus-outline-color: #ffffff; // Kleur van de focusomtrek
|
|
97
|
+
$dsn-focus-inverse-outline-color: #000000; // 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-border-radius: 2px; // Afronding van form controls — minimaal voor wireframe
|
|
100
|
+
$dsn-form-control-width-xs: 8ch; // Extra kleine breedte — voor korte invoervelden (bijv. postcode, 6 tekens)
|
|
101
|
+
$dsn-form-control-width-sm: 16ch; // Kleine breedte — voor middelgrote invoervelden (bijv. telefoonnummer, 10-12 cijfers)
|
|
102
|
+
$dsn-form-control-width-md: 32ch; // Middelgrote breedte (standaard) — voor standaard invoervelden (bijv. e-mail, naam)
|
|
103
|
+
$dsn-form-control-width-lg: 48ch; // Grote breedte — voor langere invoervelden (bijv. URL)
|
|
104
|
+
$dsn-form-control-width-xl: 64ch; // Extra grote breedte — voor zeer lange tekstvelden
|
|
105
|
+
$dsn-form-control-width-full: 100%; // Volledige breedte — responsief aan de container
|
|
106
|
+
$dsn-breakpoint-sm: 36em; // Klein breakpoint - ~576px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
107
|
+
$dsn-breakpoint-md: 44em; // Middelgroot breakpoint - ~704px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
108
|
+
$dsn-breakpoint-lg: 64em; // Groot breakpoint - ~1024px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
109
|
+
$dsn-breakpoint-xl: 74em; // Extra groot breakpoint - ~1184px. Alleen als referentie; gebruik hardcoded waarden in CSS @media rules.
|
|
110
110
|
$dsn-box-shadow-none: none; // Geen elevatie — vlak oppervlak zonder schaduw
|
|
111
|
-
$dsn-box-shadow-sm: none; //
|
|
112
|
-
$dsn-box-shadow-md: none; //
|
|
113
|
-
$dsn-box-shadow-lg: none; //
|
|
111
|
+
$dsn-box-shadow-sm: none; // Kleine elevatie — vlak in wireframe thema
|
|
112
|
+
$dsn-box-shadow-md: none; // Middelgrote elevatie — vlak in wireframe thema
|
|
113
|
+
$dsn-box-shadow-lg: none; // Grote elevatie — vlak in wireframe thema
|
|
114
114
|
$dsn-z-index-300: 300; // Sticky navigatie-elementen — PageHeader sticky/auto-hide
|
|
115
115
|
$dsn-z-index-350: 350; // Floating UI-elementen — Popover, tooltips, dropdowns
|
|
116
116
|
$dsn-z-index-400: 400; // Verduisterende laag — Backdrop achter modals en drawers
|
|
@@ -126,47 +126,47 @@ $dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het s
|
|
|
126
126
|
$dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
|
|
127
127
|
$dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
|
|
128
128
|
$dsn-transition-easing-linear: linear; // Lineaire easing — voor loaders en spinners
|
|
129
|
-
$dsn-color-neutral-bg-document: #000000; //
|
|
130
|
-
$dsn-color-neutral-bg-elevated: #000000; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
131
|
-
$dsn-color-neutral-bg-subtle: #000000; //
|
|
132
|
-
$dsn-color-neutral-bg-default: #000000; //
|
|
133
|
-
$dsn-color-neutral-bg-hover: #000000; //
|
|
134
|
-
$dsn-color-neutral-bg-active: #000000; //
|
|
135
|
-
$dsn-color-neutral-border-subtle: #ffffff; //
|
|
136
|
-
$dsn-color-neutral-border-default: #ffffff; //
|
|
137
|
-
$dsn-color-neutral-border-hover: #ffffff; //
|
|
138
|
-
$dsn-color-neutral-border-active: #ffffff; //
|
|
139
|
-
$dsn-color-neutral-color-default: #ffffff; //
|
|
140
|
-
$dsn-color-neutral-color-hover: #ffffff; //
|
|
141
|
-
$dsn-color-neutral-color-active: #ffffff; //
|
|
142
|
-
$dsn-color-neutral-color-subtle: #ffffff; //
|
|
143
|
-
$dsn-color-neutral-color-document: #ffffff; //
|
|
144
|
-
$dsn-color-transparent: rgba(0, 0, 0, 0); //
|
|
129
|
+
$dsn-color-neutral-bg-document: #000000; // Documentachtergrond
|
|
130
|
+
$dsn-color-neutral-bg-elevated: #000000; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
131
|
+
$dsn-color-neutral-bg-subtle: #000000; // Subtiele achtergrond
|
|
132
|
+
$dsn-color-neutral-bg-default: #000000; // Standaard achtergrond
|
|
133
|
+
$dsn-color-neutral-bg-hover: #000000; // Achtergrond in hover state
|
|
134
|
+
$dsn-color-neutral-bg-active: #000000; // Achtergrond in active state
|
|
135
|
+
$dsn-color-neutral-border-subtle: #ffffff; // Subtiele rand
|
|
136
|
+
$dsn-color-neutral-border-default: #ffffff; // Standaard rand
|
|
137
|
+
$dsn-color-neutral-border-hover: #ffffff; // Rand in hover state
|
|
138
|
+
$dsn-color-neutral-border-active: #ffffff; // Rand in active state
|
|
139
|
+
$dsn-color-neutral-color-default: #ffffff; // Standaard tekstkleur
|
|
140
|
+
$dsn-color-neutral-color-hover: #ffffff; // Tekst in hover state
|
|
141
|
+
$dsn-color-neutral-color-active: #ffffff; // Tekst in active state
|
|
142
|
+
$dsn-color-neutral-color-subtle: #ffffff; // Subtiele tekstkleur
|
|
143
|
+
$dsn-color-neutral-color-document: #ffffff; // Documenttekstkleur
|
|
144
|
+
$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
|
|
145
145
|
$dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12); // Scroll-affordance schaduw — lichte kleur voor zichtbaarheid op donkere achtergrond
|
|
146
146
|
$dsn-backdrop-opacity: 50%; // Bepaalt hoe doorzichtig de overlay is — gebruikt in color-mix()
|
|
147
147
|
$dsn-backdrop-blur: 4px; // backdrop-filter: blur() op de overlay — valt gracefully weg zonder support
|
|
148
|
-
$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links
|
|
149
|
-
$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; //
|
|
150
|
-
$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; //
|
|
148
|
+
$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links zijn standaard onderstreept (a11y standaard)
|
|
149
|
+
$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; // Onderstrepingsafstand
|
|
150
|
+
$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; // Dikte van de onderstreping
|
|
151
151
|
$dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline verdwijnt op hover als visuele feedback
|
|
152
|
-
$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; //
|
|
153
|
-
$dsn-button-size-small-min-block-size: 2.5rem; //
|
|
152
|
+
$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; // Geen onderstreping op active
|
|
153
|
+
$dsn-button-size-small-min-block-size: 2.5rem; // Minimale blokhoogte van de small button (verkleind aanraakdoel — 40px)
|
|
154
154
|
$dsn-card-box-shadow: none; // Schaduw standaard — geen schaduw by default
|
|
155
155
|
$dsn-card-group-item-min-width: 17.5rem; // Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill
|
|
156
|
-
$dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); //
|
|
156
|
+
$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
|
|
157
157
|
$dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
|
|
158
158
|
$dsn-checkbox-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
159
159
|
$dsn-checkbox-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
160
160
|
$dsn-checkbox-indeterminate-border-color: rgba(0, 0, 0, 0);
|
|
161
161
|
$dsn-checkbox-indeterminate-active-border-color: rgba(0, 0, 0, 0);
|
|
162
162
|
$dsn-checkbox-indeterminate-hover-border-color: rgba(0, 0, 0, 0);
|
|
163
|
-
$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); //
|
|
163
|
+
$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); // Grootte van het vinkje — 67% van de checkboxgrootte voor een goede visuele balans
|
|
164
164
|
$dsn-container-box-shadow: none; // Standaard geen schaduw — gebruik elevated variant voor een zwevend effect
|
|
165
|
-
$dsn-details-summary-text-decoration-line: none; //
|
|
166
|
-
$dsn-details-summary-text-underline-offset: 4px; //
|
|
167
|
-
$dsn-details-summary-text-decoration-thickness: auto; //
|
|
168
|
-
$dsn-details-summary-hover-text-decoration-line: underline; //
|
|
169
|
-
$dsn-details-content-background-color: rgba(0, 0, 0, 0); //
|
|
165
|
+
$dsn-details-summary-text-decoration-line: none; // Standaard geen onderstreping; verschijnt op hover
|
|
166
|
+
$dsn-details-summary-text-underline-offset: 4px; // Onderstrepingsafstand voor de hover-staat
|
|
167
|
+
$dsn-details-summary-text-decoration-thickness: auto; // Dikte van de onderstreping voor de hover-staat
|
|
168
|
+
$dsn-details-summary-hover-text-decoration-line: underline; // Onderstreping verschijnt op hover
|
|
169
|
+
$dsn-details-content-background-color: rgba(0, 0, 0, 0); // Achtergrond van het inhoudsgebied
|
|
170
170
|
$dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
|
|
171
171
|
$dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
|
|
172
172
|
$dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
|
|
@@ -177,13 +177,14 @@ $dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
|
|
|
177
177
|
$dsn-file-media-size: 3rem; // Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview
|
|
178
178
|
$dsn-grid-gutter: calc(0.5rem * 1); // Compactere kolomafstand voor information-dense project types (8px = space.column.md)
|
|
179
179
|
$dsn-grid-row-gap: calc(0.5rem * 1); // Compactere rij-afstand voor information-dense project types (8px = space.column.md)
|
|
180
|
+
$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.
|
|
180
181
|
$dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
|
|
181
182
|
$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
|
|
182
183
|
$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
|
|
183
|
-
$dsn-link-text-decoration-line: underline; //
|
|
184
|
-
$dsn-link-text-decoration-thickness: auto; //
|
|
185
|
-
$dsn-link-text-underline-offset: 4px; //
|
|
186
|
-
$dsn-link-hover-text-decoration-line: none; //
|
|
184
|
+
$dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
|
|
185
|
+
$dsn-link-text-decoration-thickness: auto; // Dikte van de onderstreping van de link
|
|
186
|
+
$dsn-link-text-underline-offset: 4px; // Onderstrepingsafstand van de link
|
|
187
|
+
$dsn-link-hover-text-decoration-line: none; // Tekstverfraaiing van de link op hover
|
|
187
188
|
$dsn-menu-link-current-indicator-width: 3px; // MenuLink-specifiek: breedte van de border-inline-start indicator
|
|
188
189
|
$dsn-modal-dialog-max-width: 40rem; // Maximale breedte van het dialoogvenster (640px)
|
|
189
190
|
$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
|
|
@@ -193,70 +194,72 @@ $dsn-password-input-padding-inline-end: 3rem; // Password input right padding -
|
|
|
193
194
|
$dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
|
|
194
195
|
$dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
|
|
195
196
|
$dsn-progress-bar-block-size: 8px; // Hoogte van de balk — gangbare dikte voor voortgangsbalken
|
|
196
|
-
$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); //
|
|
197
|
+
$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
|
|
197
198
|
$dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
|
|
198
199
|
$dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
199
200
|
$dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
200
|
-
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); //
|
|
201
|
+
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte
|
|
201
202
|
$dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
|
|
202
203
|
$dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
|
|
203
204
|
$dsn-spinner-duration: 800ms; // Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie
|
|
204
|
-
$dsn-status-badge-text-transform: none; //
|
|
205
|
-
$dsn-summary-list-key-basis: 30%; //
|
|
205
|
+
$dsn-status-badge-text-transform: none; // Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen)
|
|
206
|
+
$dsn-summary-list-key-basis: 30%; // Breedte van de sleutelkolom in de gridindeling
|
|
207
|
+
$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)
|
|
208
|
+
$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)
|
|
206
209
|
$dsn-table-header-background-color: rgba(0, 0, 0, 0);
|
|
207
210
|
$dsn-table-footer-background-color: rgba(0, 0, 0, 0);
|
|
208
|
-
$dsn-text-area-outline-offset: 0px; //
|
|
209
|
-
$dsn-text-area-resize: vertical; //
|
|
210
|
-
$dsn-text-area-focus-box-shadow-x: 0; //
|
|
211
|
-
$dsn-text-area-focus-box-shadow-y: 0; //
|
|
212
|
-
$dsn-text-area-focus-box-shadow-blur: 0; //
|
|
213
|
-
$dsn-text-area-hover-box-shadow-x: 0; //
|
|
214
|
-
$dsn-text-area-hover-box-shadow-y: 0; //
|
|
215
|
-
$dsn-text-area-hover-box-shadow-blur: 0; //
|
|
216
|
-
$dsn-text-area-invalid-box-shadow-x: 0; //
|
|
217
|
-
$dsn-text-area-invalid-box-shadow-y: 0; //
|
|
218
|
-
$dsn-text-area-invalid-box-shadow-blur: 0; //
|
|
219
|
-
$dsn-text-input-outline-offset: 0px; //
|
|
220
|
-
$dsn-text-input-focus-box-shadow-x: 0; //
|
|
221
|
-
$dsn-text-input-focus-box-shadow-y: 0; //
|
|
222
|
-
$dsn-text-input-focus-box-shadow-blur: 0; //
|
|
223
|
-
$dsn-text-input-hover-box-shadow-x: 0; //
|
|
224
|
-
$dsn-text-input-hover-box-shadow-y: 0; //
|
|
225
|
-
$dsn-text-input-hover-box-shadow-blur: 0; //
|
|
226
|
-
$dsn-text-input-invalid-box-shadow-x: 0; //
|
|
227
|
-
$dsn-text-input-invalid-box-shadow-y: 0; //
|
|
228
|
-
$dsn-text-input-invalid-box-shadow-blur: 0; //
|
|
229
|
-
$dsn-heading-color: $dsn-color-neutral-color-document; //
|
|
230
|
-
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1
|
|
231
|
-
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1
|
|
232
|
-
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1
|
|
233
|
-
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1
|
|
234
|
-
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1
|
|
235
|
-
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2
|
|
236
|
-
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2
|
|
237
|
-
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2
|
|
238
|
-
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2
|
|
239
|
-
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2
|
|
240
|
-
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3
|
|
241
|
-
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3
|
|
242
|
-
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3
|
|
243
|
-
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3
|
|
244
|
-
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3
|
|
245
|
-
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4
|
|
246
|
-
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4
|
|
247
|
-
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4
|
|
248
|
-
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4
|
|
249
|
-
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4
|
|
250
|
-
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5
|
|
251
|
-
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5
|
|
252
|
-
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5
|
|
253
|
-
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5
|
|
254
|
-
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5
|
|
255
|
-
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6
|
|
256
|
-
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6
|
|
257
|
-
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6
|
|
258
|
-
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6
|
|
259
|
-
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6
|
|
211
|
+
$dsn-text-area-outline-offset: 0px; // Outline-afstand van het tekstveld
|
|
212
|
+
$dsn-text-area-resize: vertical; // Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none)
|
|
213
|
+
$dsn-text-area-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
214
|
+
$dsn-text-area-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
215
|
+
$dsn-text-area-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
216
|
+
$dsn-text-area-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
217
|
+
$dsn-text-area-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
218
|
+
$dsn-text-area-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
219
|
+
$dsn-text-area-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
220
|
+
$dsn-text-area-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
221
|
+
$dsn-text-area-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
222
|
+
$dsn-text-input-outline-offset: 0px; // Outline-afstand van het tekstinvoerveld
|
|
223
|
+
$dsn-text-input-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
224
|
+
$dsn-text-input-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
225
|
+
$dsn-text-input-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
226
|
+
$dsn-text-input-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
227
|
+
$dsn-text-input-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
228
|
+
$dsn-text-input-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
229
|
+
$dsn-text-input-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
230
|
+
$dsn-text-input-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
231
|
+
$dsn-text-input-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
232
|
+
$dsn-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van koppen
|
|
233
|
+
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Font-familie van Heading 1
|
|
234
|
+
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Font-size van Heading 1
|
|
235
|
+
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 1
|
|
236
|
+
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Line-height van Heading 1
|
|
237
|
+
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 1
|
|
238
|
+
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Font-familie van Heading 2
|
|
239
|
+
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Font-size van Heading 2
|
|
240
|
+
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 2
|
|
241
|
+
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Line-height van Heading 2
|
|
242
|
+
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 2
|
|
243
|
+
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Font-familie van Heading 3
|
|
244
|
+
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Font-size van Heading 3
|
|
245
|
+
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 3
|
|
246
|
+
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Line-height van Heading 3
|
|
247
|
+
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 3
|
|
248
|
+
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Font-familie van Heading 4
|
|
249
|
+
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Font-size van Heading 4
|
|
250
|
+
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 4
|
|
251
|
+
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Line-height van Heading 4
|
|
252
|
+
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 4
|
|
253
|
+
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Font-familie van Heading 5
|
|
254
|
+
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Font-size van Heading 5
|
|
255
|
+
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 5
|
|
256
|
+
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Line-height van Heading 5
|
|
257
|
+
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 5
|
|
258
|
+
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Font-familie van Heading 6
|
|
259
|
+
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Font-size van Heading 6
|
|
260
|
+
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 6
|
|
261
|
+
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Line-height van Heading 6
|
|
262
|
+
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 6
|
|
260
263
|
$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
|
|
261
264
|
$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
|
|
262
265
|
$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
|
|
@@ -264,194 +267,194 @@ $dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // F
|
|
|
264
267
|
$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
|
|
265
268
|
$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
|
|
266
269
|
$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
|
|
267
|
-
$dsn-form-control-font-family: $dsn-text-font-family-default; //
|
|
268
|
-
$dsn-form-control-font-size: $dsn-text-font-size-md; //
|
|
269
|
-
$dsn-form-control-font-weight: $dsn-text-font-weight-default; //
|
|
270
|
-
$dsn-form-control-line-height: $dsn-text-line-height-md; //
|
|
271
|
-
$dsn-form-control-padding-block-start: $dsn-space-block-lg; //
|
|
272
|
-
$dsn-form-control-padding-block-end: $dsn-space-block-lg; //
|
|
273
|
-
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; //
|
|
274
|
-
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; //
|
|
275
|
-
$dsn-form-control-border-width: $dsn-border-width-thin; //
|
|
276
|
-
$dsn-form-control-hover-border-width: $dsn-border-width-medium; //
|
|
277
|
-
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; //
|
|
278
|
-
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; //
|
|
279
|
-
$dsn-form-control-focus-border-width: $dsn-border-width-medium; //
|
|
280
|
-
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; //
|
|
281
|
-
$dsn-form-control-active-border-width: $dsn-border-width-medium; //
|
|
282
|
-
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; //
|
|
283
|
-
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; //
|
|
284
|
-
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; //
|
|
285
|
-
$dsn-form-control-background-color: $dsn-color-neutral-bg-subtle; //
|
|
286
|
-
$dsn-form-control-border-color: $dsn-color-neutral-border-default; //
|
|
287
|
-
$dsn-form-control-color: $dsn-color-neutral-color-document; //
|
|
288
|
-
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; //
|
|
289
|
-
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; //
|
|
290
|
-
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; //
|
|
291
|
-
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; //
|
|
292
|
-
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
293
|
-
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; //
|
|
294
|
-
$dsn-form-control-read-only-border-color: $dsn-color-transparent; //
|
|
295
|
-
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; //
|
|
296
|
-
$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; //
|
|
270
|
+
$dsn-form-control-font-family: $dsn-text-font-family-default; // Lettertype van form controls
|
|
271
|
+
$dsn-form-control-font-size: $dsn-text-font-size-md; // Lettergrootte van form controls
|
|
272
|
+
$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Lettergewicht van form controls
|
|
273
|
+
$dsn-form-control-line-height: $dsn-text-line-height-md; // Regelafstand van form controls
|
|
274
|
+
$dsn-form-control-padding-block-start: $dsn-space-block-lg; // Bovenste padding van form controls
|
|
275
|
+
$dsn-form-control-padding-block-end: $dsn-space-block-lg; // Onderste padding van form controls
|
|
276
|
+
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Linker padding van form controls
|
|
277
|
+
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Rechter padding van form controls
|
|
278
|
+
$dsn-form-control-border-width: $dsn-border-width-thin; // Randbreedte van form controls
|
|
279
|
+
$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Randbreedte van form controls in hover state
|
|
280
|
+
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Achtergrondkleur van form controls in hover state
|
|
281
|
+
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Randkleur van form controls in hover state
|
|
282
|
+
$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Randbreedte van form controls in focus state
|
|
283
|
+
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in focus state
|
|
284
|
+
$dsn-form-control-active-border-width: $dsn-border-width-medium; // Randbreedte van form controls in active state
|
|
285
|
+
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Achtergrondkleur van form controls in active state
|
|
286
|
+
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in active state
|
|
287
|
+
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Randbreedte van form controls in invalid state
|
|
288
|
+
$dsn-form-control-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls
|
|
289
|
+
$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Randkleur van form controls
|
|
290
|
+
$dsn-form-control-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls
|
|
291
|
+
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Tekstkleur van placeholder in form controls
|
|
292
|
+
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Accentkleur van form controls in disabled state
|
|
293
|
+
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in disabled state
|
|
294
|
+
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Randkleur van form controls in disabled state
|
|
295
|
+
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van form controls in disabled state
|
|
296
|
+
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in read-only state
|
|
297
|
+
$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Randkleur van form controls in read-only state
|
|
298
|
+
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls in read-only state
|
|
299
|
+
$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
297
300
|
$dsn-color-accent-1-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
298
|
-
$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; //
|
|
299
|
-
$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; //
|
|
300
|
-
$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; //
|
|
301
|
-
$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; //
|
|
302
|
-
$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; //
|
|
303
|
-
$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; //
|
|
304
|
-
$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; //
|
|
305
|
-
$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; //
|
|
306
|
-
$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; //
|
|
307
|
-
$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; //
|
|
308
|
-
$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; //
|
|
309
|
-
$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; //
|
|
310
|
-
$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; //
|
|
311
|
-
$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; //
|
|
301
|
+
$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
302
|
+
$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
303
|
+
$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
304
|
+
$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
305
|
+
$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
306
|
+
$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
307
|
+
$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
308
|
+
$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
309
|
+
$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
310
|
+
$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
311
|
+
$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
312
|
+
$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
313
|
+
$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
314
|
+
$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
312
315
|
$dsn-color-positive-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
313
|
-
$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; //
|
|
314
|
-
$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; //
|
|
315
|
-
$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; //
|
|
316
|
-
$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; //
|
|
317
|
-
$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; //
|
|
318
|
-
$dsn-color-positive-border-default: $dsn-color-neutral-border-default; //
|
|
319
|
-
$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; //
|
|
320
|
-
$dsn-color-positive-border-active: $dsn-color-neutral-border-active; //
|
|
321
|
-
$dsn-color-positive-color-default: $dsn-color-neutral-color-default; //
|
|
322
|
-
$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; //
|
|
323
|
-
$dsn-color-positive-color-active: $dsn-color-neutral-color-active; //
|
|
324
|
-
$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; //
|
|
325
|
-
$dsn-color-positive-color-document: $dsn-color-neutral-color-document; //
|
|
326
|
-
$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; //
|
|
316
|
+
$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
317
|
+
$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
318
|
+
$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
319
|
+
$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
320
|
+
$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
321
|
+
$dsn-color-positive-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
322
|
+
$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
323
|
+
$dsn-color-positive-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
324
|
+
$dsn-color-positive-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
325
|
+
$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
326
|
+
$dsn-color-positive-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
327
|
+
$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
328
|
+
$dsn-color-positive-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
329
|
+
$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
327
330
|
$dsn-color-negative-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
328
|
-
$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; //
|
|
329
|
-
$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; //
|
|
330
|
-
$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; //
|
|
331
|
-
$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; //
|
|
332
|
-
$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; //
|
|
333
|
-
$dsn-color-negative-border-default: $dsn-color-neutral-border-default; //
|
|
334
|
-
$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; //
|
|
335
|
-
$dsn-color-negative-border-active: $dsn-color-neutral-border-active; //
|
|
336
|
-
$dsn-color-negative-color-default: $dsn-color-neutral-color-default; //
|
|
337
|
-
$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; //
|
|
338
|
-
$dsn-color-negative-color-active: $dsn-color-neutral-color-active; //
|
|
339
|
-
$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; //
|
|
340
|
-
$dsn-color-negative-color-document: $dsn-color-neutral-color-document; //
|
|
341
|
-
$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; //
|
|
331
|
+
$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
332
|
+
$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
333
|
+
$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
334
|
+
$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
335
|
+
$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
336
|
+
$dsn-color-negative-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
337
|
+
$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
338
|
+
$dsn-color-negative-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
339
|
+
$dsn-color-negative-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
340
|
+
$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
341
|
+
$dsn-color-negative-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
342
|
+
$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
343
|
+
$dsn-color-negative-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
344
|
+
$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
342
345
|
$dsn-color-warning-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
343
|
-
$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; //
|
|
344
|
-
$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; //
|
|
345
|
-
$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; //
|
|
346
|
-
$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; //
|
|
347
|
-
$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; //
|
|
348
|
-
$dsn-color-warning-border-default: $dsn-color-neutral-border-default; //
|
|
349
|
-
$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; //
|
|
350
|
-
$dsn-color-warning-border-active: $dsn-color-neutral-border-active; //
|
|
351
|
-
$dsn-color-warning-color-default: $dsn-color-neutral-color-default; //
|
|
352
|
-
$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; //
|
|
353
|
-
$dsn-color-warning-color-active: $dsn-color-neutral-color-active; //
|
|
354
|
-
$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; //
|
|
355
|
-
$dsn-color-warning-color-document: $dsn-color-neutral-color-document; //
|
|
356
|
-
$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; //
|
|
346
|
+
$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
347
|
+
$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
348
|
+
$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
349
|
+
$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
350
|
+
$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
351
|
+
$dsn-color-warning-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
352
|
+
$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
353
|
+
$dsn-color-warning-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
354
|
+
$dsn-color-warning-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
355
|
+
$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
356
|
+
$dsn-color-warning-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
357
|
+
$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
358
|
+
$dsn-color-warning-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
359
|
+
$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
357
360
|
$dsn-color-info-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
358
|
-
$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; //
|
|
359
|
-
$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; //
|
|
360
|
-
$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; //
|
|
361
|
-
$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; //
|
|
362
|
-
$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; //
|
|
363
|
-
$dsn-color-info-border-default: $dsn-color-neutral-border-default; //
|
|
364
|
-
$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; //
|
|
365
|
-
$dsn-color-info-border-active: $dsn-color-neutral-border-active; //
|
|
366
|
-
$dsn-color-info-color-default: $dsn-color-neutral-color-default; //
|
|
367
|
-
$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; //
|
|
368
|
-
$dsn-color-info-color-active: $dsn-color-neutral-color-active; //
|
|
369
|
-
$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; //
|
|
370
|
-
$dsn-color-info-color-document: $dsn-color-neutral-color-document; //
|
|
371
|
-
$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse
|
|
372
|
-
$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
373
|
-
$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse
|
|
374
|
-
$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse
|
|
375
|
-
$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse hover
|
|
376
|
-
$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse active
|
|
377
|
-
$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse
|
|
378
|
-
$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse
|
|
379
|
-
$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse hover
|
|
380
|
-
$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse active
|
|
381
|
-
$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse
|
|
382
|
-
$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse hover
|
|
383
|
-
$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse active
|
|
384
|
-
$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse
|
|
385
|
-
$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse
|
|
361
|
+
$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
362
|
+
$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
363
|
+
$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
364
|
+
$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
365
|
+
$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
366
|
+
$dsn-color-info-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
367
|
+
$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
368
|
+
$dsn-color-info-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
369
|
+
$dsn-color-info-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
370
|
+
$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
371
|
+
$dsn-color-info-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
372
|
+
$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
373
|
+
$dsn-color-info-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
374
|
+
$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse documentachtergrond
|
|
375
|
+
$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
376
|
+
$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse subtiele achtergrond
|
|
377
|
+
$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse standaard achtergrond
|
|
378
|
+
$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse achtergrond in hover state
|
|
379
|
+
$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse achtergrond in active state
|
|
380
|
+
$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse subtiele rand
|
|
381
|
+
$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse standaard rand
|
|
382
|
+
$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse rand in hover state
|
|
383
|
+
$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse rand in active state
|
|
384
|
+
$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse standaard tekst
|
|
385
|
+
$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse tekst in hover state
|
|
386
|
+
$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse tekst in active state
|
|
387
|
+
$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse subtiele tekst
|
|
388
|
+
$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse documenttekst
|
|
386
389
|
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
387
390
|
$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
|
|
388
|
-
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border
|
|
389
|
-
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border
|
|
390
|
-
$dsn-alert-column-gap: $dsn-space-inline-md; //
|
|
391
|
-
$dsn-alert-padding-block: $dsn-space-block-xl; //
|
|
392
|
-
$dsn-alert-padding-inline: $dsn-space-inline-xl; //
|
|
393
|
-
$dsn-alert-row-gap: $dsn-space-row-md; //
|
|
391
|
+
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen)
|
|
392
|
+
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border-breedte (alleen linkerborder)
|
|
393
|
+
$dsn-alert-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
394
|
+
$dsn-alert-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
395
|
+
$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontale padding
|
|
396
|
+
$dsn-alert-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
394
397
|
$dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
|
|
395
|
-
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; //
|
|
396
|
-
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font
|
|
397
|
-
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font
|
|
398
|
-
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line
|
|
399
|
-
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; //
|
|
400
|
-
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
401
|
-
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; //
|
|
402
|
-
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; //
|
|
403
|
-
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; //
|
|
404
|
-
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; //
|
|
398
|
+
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Ruimte tussen breadcrumb-items
|
|
399
|
+
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font-size — sm (consistent met Link size small)
|
|
400
|
+
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font-gewicht
|
|
401
|
+
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line-height — sm (consistent met Link size small)
|
|
402
|
+
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Kleur van het huidige pagina-item
|
|
403
|
+
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimale aanraak-/klikhoogte
|
|
404
|
+
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Verticale padding om de min-block-size te bereiken
|
|
405
|
+
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // Geen horizontale padding op items
|
|
406
|
+
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Ruimte tussen icoon en linktekst
|
|
407
|
+
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Kleur van het scheidingsicoon
|
|
405
408
|
$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
|
|
406
|
-
$dsn-button-border-radius: $dsn-border-radius-md; // Button border
|
|
407
|
-
$dsn-button-border-width: $dsn-border-width-thin; // Button border
|
|
408
|
-
$dsn-button-font-family: $dsn-text-font-family-default; // Button font
|
|
409
|
-
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font
|
|
410
|
-
$dsn-button-line-height: $dsn-text-line-height-md; // Button line
|
|
411
|
-
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
412
|
-
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
413
|
-
$dsn-button-default-background-color: $dsn-color-transparent; //
|
|
414
|
-
$dsn-button-default-negative-background-color: $dsn-color-transparent; //
|
|
415
|
-
$dsn-button-default-positive-background-color: $dsn-color-transparent; //
|
|
416
|
-
$dsn-button-strong-border-color: $dsn-color-transparent; //
|
|
417
|
-
$dsn-button-strong-active-border-color: $dsn-color-transparent; //
|
|
418
|
-
$dsn-button-strong-hover-border-color: $dsn-color-transparent; //
|
|
419
|
-
$dsn-button-strong-negative-border-color: $dsn-color-transparent; //
|
|
420
|
-
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; //
|
|
421
|
-
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; //
|
|
422
|
-
$dsn-button-strong-positive-border-color: $dsn-color-transparent; //
|
|
423
|
-
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; //
|
|
424
|
-
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; //
|
|
425
|
-
$dsn-button-subtle-background-color: $dsn-color-transparent; //
|
|
426
|
-
$dsn-button-subtle-border-color: $dsn-color-transparent; //
|
|
427
|
-
$dsn-button-subtle-active-border-color: $dsn-color-transparent; //
|
|
428
|
-
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; //
|
|
429
|
-
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; //
|
|
430
|
-
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; //
|
|
431
|
-
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; //
|
|
432
|
-
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; //
|
|
433
|
-
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; //
|
|
434
|
-
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; //
|
|
435
|
-
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; //
|
|
436
|
-
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; //
|
|
437
|
-
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; //
|
|
438
|
-
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
439
|
-
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; //
|
|
440
|
-
$dsn-button-size-default-font-size: $dsn-text-font-size-md; //
|
|
441
|
-
$dsn-button-size-default-gap: $dsn-space-text-sm; //
|
|
442
|
-
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; //
|
|
443
|
-
$dsn-button-size-default-padding-block: $dsn-space-block-md; //
|
|
444
|
-
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; //
|
|
445
|
-
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; //
|
|
446
|
-
$dsn-button-size-large-gap: $dsn-space-text-md; //
|
|
447
|
-
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; //
|
|
448
|
-
$dsn-button-size-large-padding-block: $dsn-space-block-lg; //
|
|
449
|
-
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; //
|
|
450
|
-
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; //
|
|
451
|
-
$dsn-button-size-small-gap: $dsn-space-text-sm; //
|
|
452
|
-
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; //
|
|
453
|
-
$dsn-button-size-small-padding-block: $dsn-space-block-sm; //
|
|
454
|
-
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; //
|
|
409
|
+
$dsn-button-border-radius: $dsn-border-radius-md; // Button border-radius
|
|
410
|
+
$dsn-button-border-width: $dsn-border-width-thin; // Button border-breedte
|
|
411
|
+
$dsn-button-font-family: $dsn-text-font-family-default; // Button font-familie
|
|
412
|
+
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font-gewicht
|
|
413
|
+
$dsn-button-line-height: $dsn-text-line-height-md; // Button line-height
|
|
414
|
+
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel)
|
|
415
|
+
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel)
|
|
416
|
+
$dsn-button-default-background-color: $dsn-color-transparent; // Achtergrond van de default button
|
|
417
|
+
$dsn-button-default-negative-background-color: $dsn-color-transparent; // Achtergrond van de default negative button
|
|
418
|
+
$dsn-button-default-positive-background-color: $dsn-color-transparent; // Achtergrond van de default positive button
|
|
419
|
+
$dsn-button-strong-border-color: $dsn-color-transparent; // Border van de strong button
|
|
420
|
+
$dsn-button-strong-active-border-color: $dsn-color-transparent; // Border van de strong button op active
|
|
421
|
+
$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Border van de strong button op hover
|
|
422
|
+
$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Border van de strong negative button
|
|
423
|
+
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Border van de strong negative button op active
|
|
424
|
+
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Border van de strong negative button op hover
|
|
425
|
+
$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Border van de strong positive button
|
|
426
|
+
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Border van de strong positive button op active
|
|
427
|
+
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Border van de strong positive button op hover
|
|
428
|
+
$dsn-button-subtle-background-color: $dsn-color-transparent; // Achtergrond van de subtle button
|
|
429
|
+
$dsn-button-subtle-border-color: $dsn-color-transparent; // Border van de subtle button
|
|
430
|
+
$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Border van de subtle button op active
|
|
431
|
+
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Border van de subtle button op hover
|
|
432
|
+
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Achtergrond van de subtle negative button
|
|
433
|
+
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Border van de subtle negative button
|
|
434
|
+
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Border van de subtle negative button op active
|
|
435
|
+
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Border van de subtle negative button op hover
|
|
436
|
+
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Achtergrond van de subtle positive button
|
|
437
|
+
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Border van de subtle positive button
|
|
438
|
+
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Border van de subtle positive button op active
|
|
439
|
+
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Border van de subtle positive button op hover
|
|
440
|
+
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
441
|
+
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
442
|
+
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
443
|
+
$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default button
|
|
444
|
+
$dsn-button-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default button
|
|
445
|
+
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Padding van de icon-only default button
|
|
446
|
+
$dsn-button-size-default-padding-block: $dsn-space-block-md; // Verticale padding van de default button
|
|
447
|
+
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de default button
|
|
448
|
+
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large button
|
|
449
|
+
$dsn-button-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large button
|
|
450
|
+
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Padding van de icon-only large button
|
|
451
|
+
$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Verticale padding van de large button
|
|
452
|
+
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Horizontale padding van de large button
|
|
453
|
+
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small button
|
|
454
|
+
$dsn-button-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small button
|
|
455
|
+
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Padding van de icon-only small button
|
|
456
|
+
$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Verticale padding van de small button
|
|
457
|
+
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de small button
|
|
455
458
|
$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
|
|
456
459
|
$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
|
|
457
460
|
$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
|
|
@@ -470,13 +473,13 @@ $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de ca
|
|
|
470
473
|
$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
|
|
471
474
|
$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
|
|
472
475
|
$dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
|
|
473
|
-
$dsn-checkbox-group-border-width: $dsn-border-width-none; //
|
|
474
|
-
$dsn-checkbox-group-gap: $dsn-space-block-sm; //
|
|
475
|
-
$dsn-checkbox-group-margin: $dsn-space-none; //
|
|
476
|
-
$dsn-checkbox-group-padding: $dsn-space-none; //
|
|
476
|
+
$dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
477
|
+
$dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
|
|
478
|
+
$dsn-checkbox-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
479
|
+
$dsn-checkbox-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
477
480
|
$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
|
|
478
481
|
$dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
479
|
-
$dsn-checkbox-border-radius: $dsn-border-radius-square; //
|
|
482
|
+
$dsn-checkbox-border-radius: $dsn-border-radius-square; // Vierkante hoeken voor de checkbox
|
|
480
483
|
$dsn-checkbox-border-width: $dsn-border-width-thin;
|
|
481
484
|
$dsn-checkbox-active-border-width: $dsn-border-width-medium;
|
|
482
485
|
$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
|
|
@@ -502,13 +505,13 @@ $dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month a
|
|
|
502
505
|
$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
|
|
503
506
|
$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
|
|
504
507
|
$dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
|
|
505
|
-
$dsn-details-row-gap: $dsn-space-row-md; //
|
|
506
|
-
$dsn-details-summary-gap: $dsn-space-text-sm; //
|
|
507
|
-
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; //
|
|
508
|
-
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; //
|
|
509
|
-
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; //
|
|
510
|
-
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; //
|
|
511
|
-
$dsn-details-content-padding-block: $dsn-space-block-xl; //
|
|
508
|
+
$dsn-details-row-gap: $dsn-space-row-md; // Verticale ruimte tussen summary en inhoud
|
|
509
|
+
$dsn-details-summary-gap: $dsn-space-text-sm; // Ruimte tussen het chevron-icoon en de labeltekst
|
|
510
|
+
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Kleur van de linkerborder voor visuele groepering
|
|
511
|
+
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder
|
|
512
|
+
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Linker padding — lijnt de inhoud uit met de labeltekst
|
|
513
|
+
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Rechter padding
|
|
514
|
+
$dsn-details-content-padding-block: $dsn-space-block-xl; // Boven- en onderpadding
|
|
512
515
|
$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
|
|
513
516
|
$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
514
517
|
$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
|
|
@@ -527,9 +530,9 @@ $dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding va
|
|
|
527
530
|
$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
528
531
|
$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
529
532
|
$dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
530
|
-
$dsn-file-input-column-gap: $dsn-space-text-lg; //
|
|
531
|
-
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
532
|
-
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
533
|
+
$dsn-file-input-column-gap: $dsn-space-text-lg; // Ruimte tussen de file-selector-button en de bestandsnaamtekst
|
|
534
|
+
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
535
|
+
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
533
536
|
$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
|
|
534
537
|
$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
|
|
535
538
|
$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
|
|
@@ -550,43 +553,42 @@ $dsn-file-meta-font-size: $dsn-text-font-size-md;
|
|
|
550
553
|
$dsn-file-media-border-radius: $dsn-border-radius-sm;
|
|
551
554
|
$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
|
|
552
555
|
$dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
|
|
553
|
-
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; //
|
|
554
|
-
$dsn-form-field-description-font-family: $dsn-text-font-family-default; //
|
|
555
|
-
$dsn-form-field-description-font-size: $dsn-text-font-size-md; //
|
|
556
|
-
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; //
|
|
557
|
-
$dsn-form-field-description-line-height: $dsn-text-line-height-md; //
|
|
558
|
-
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; //
|
|
559
|
-
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; //
|
|
560
|
-
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; //
|
|
561
|
-
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; //
|
|
562
|
-
$dsn-form-field-error-message-gap: $dsn-space-text-sm; //
|
|
563
|
-
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; //
|
|
564
|
-
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; //
|
|
565
|
-
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; //
|
|
566
|
-
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; //
|
|
567
|
-
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; //
|
|
568
|
-
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; //
|
|
569
|
-
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; //
|
|
570
|
-
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; //
|
|
571
|
-
$dsn-form-field-label-color: $dsn-color-neutral-color-document; //
|
|
572
|
-
$dsn-form-field-label-font-family: $dsn-text-font-family-default; //
|
|
573
|
-
$dsn-form-field-label-font-size: $dsn-text-font-size-md; //
|
|
574
|
-
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; //
|
|
575
|
-
$dsn-form-field-label-line-height: $dsn-text-line-height-md; //
|
|
576
|
-
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; //
|
|
577
|
-
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; //
|
|
578
|
-
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; //
|
|
579
|
-
$dsn-form-field-status-font-family: $dsn-text-font-family-default; //
|
|
580
|
-
$dsn-form-field-status-font-size: $dsn-text-font-size-md; //
|
|
581
|
-
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; //
|
|
582
|
-
$dsn-form-field-status-gap: $dsn-space-text-sm; //
|
|
583
|
-
$dsn-form-field-status-line-height: $dsn-text-line-height-md; //
|
|
584
|
-
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; //
|
|
585
|
-
$dsn-form-field-margin-block-end: $dsn-space-none; //
|
|
586
|
-
$dsn-form-field-margin-block-start: $dsn-space-none; //
|
|
587
|
-
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; //
|
|
588
|
-
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; //
|
|
589
|
-
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
556
|
+
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de formulierveldbeschrijving
|
|
557
|
+
$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Font-familie van de formulierveldbeschrijving
|
|
558
|
+
$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Font-size van de formulierveldbeschrijving
|
|
559
|
+
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de formulierveldbeschrijving
|
|
560
|
+
$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Line-height van de formulierveldbeschrijving
|
|
561
|
+
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Ruimte onder de beschrijving voor het formulierbesturingselement
|
|
562
|
+
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Font-familie van de foutmelding
|
|
563
|
+
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Font-size van de foutmelding
|
|
564
|
+
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de foutmelding
|
|
565
|
+
$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Ruimte tussen icoon en foutmeldingstekst
|
|
566
|
+
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Line-height van de foutmelding
|
|
567
|
+
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Ruimte onder de foutmelding voor het formulierbesturingselement
|
|
568
|
+
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Tekstkleur van het labelachtervoegsel
|
|
569
|
+
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Font-familie van het labelachtervoegsel
|
|
570
|
+
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Font-size van het labelachtervoegsel
|
|
571
|
+
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Font-gewicht van het labelachtervoegsel
|
|
572
|
+
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Line-height van het labelachtervoegsel
|
|
573
|
+
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Ruimte tussen de labeltekst en het achtervoegsel
|
|
574
|
+
$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Tekstkleur van het formulierveldlabel
|
|
575
|
+
$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Font-familie van het formulierveldlabel
|
|
576
|
+
$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Font-size van het formulierveldlabel
|
|
577
|
+
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van het formulierveldlabel
|
|
578
|
+
$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Line-height van het formulierveldlabel
|
|
579
|
+
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt)
|
|
580
|
+
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Ruimte onder het label wanneer een beschrijving volgt
|
|
581
|
+
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie)
|
|
582
|
+
$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Font-familie van de veldstatus
|
|
583
|
+
$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Font-size van de veldstatus
|
|
584
|
+
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de veldstatus
|
|
585
|
+
$dsn-form-field-status-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst (positive en warning varianten)
|
|
586
|
+
$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Line-height van de veldstatus
|
|
587
|
+
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Ruimte boven het statusbericht na het formulierbesturingselement
|
|
588
|
+
$dsn-form-field-margin-block-end: $dsn-space-none; // Onderste margin van de formulierveldcontainer
|
|
589
|
+
$dsn-form-field-margin-block-start: $dsn-space-none; // Bovenste margin van de formulierveldcontainer
|
|
590
|
+
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder voor ongeldige formuliervelden
|
|
591
|
+
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker padding voor ongeldige formuliervelden (om de border op te vangen)
|
|
590
592
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
591
593
|
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
592
594
|
$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
|
|
@@ -595,14 +597,14 @@ $dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voo
|
|
|
595
597
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
596
598
|
$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
|
|
597
599
|
$dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
|
|
598
|
-
$dsn-link-gap: $dsn-space-text-sm; //
|
|
599
|
-
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; //
|
|
600
|
-
$dsn-link-size-default-font-size: $dsn-text-font-size-md; //
|
|
601
|
-
$dsn-link-size-default-gap: $dsn-space-text-sm; //
|
|
602
|
-
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; //
|
|
603
|
-
$dsn-link-size-large-gap: $dsn-space-text-md; //
|
|
604
|
-
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; //
|
|
605
|
-
$dsn-link-size-small-gap: $dsn-space-text-sm; //
|
|
600
|
+
$dsn-link-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de link
|
|
601
|
+
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de link op disabled
|
|
602
|
+
$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default link
|
|
603
|
+
$dsn-link-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default link
|
|
604
|
+
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large link
|
|
605
|
+
$dsn-link-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large link
|
|
606
|
+
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small link
|
|
607
|
+
$dsn-link-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small link
|
|
606
608
|
$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
|
|
607
609
|
$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
|
|
608
610
|
$dsn-menu-item-font-weight: $dsn-text-font-weight-default; // Gedeeld: letterdikte — regular voor navigatie-items
|
|
@@ -634,16 +636,16 @@ $dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padd
|
|
|
634
636
|
$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
635
637
|
$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
636
638
|
$dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
637
|
-
$dsn-note-border-inline-start-width: $dsn-border-width-medium; //
|
|
638
|
-
$dsn-note-column-gap: $dsn-space-inline-md; //
|
|
639
|
-
$dsn-note-padding-block: $dsn-space-block-xl; //
|
|
640
|
-
$dsn-note-padding-inline-end: $dsn-space-inline-xl; //
|
|
641
|
-
$dsn-note-padding-inline-start: $dsn-space-inline-xl; //
|
|
642
|
-
$dsn-note-row-gap: $dsn-space-row-md; //
|
|
643
|
-
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
644
|
-
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; //
|
|
645
|
-
$dsn-note-neutral-color: $dsn-color-neutral-color-document; //
|
|
646
|
-
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; //
|
|
639
|
+
$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder van de Note
|
|
640
|
+
$dsn-note-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
641
|
+
$dsn-note-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
642
|
+
$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde
|
|
643
|
+
$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin (na de border)
|
|
644
|
+
$dsn-note-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
645
|
+
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant (standaard)
|
|
646
|
+
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Kleur van de linkerborder voor neutral variant (standaard)
|
|
647
|
+
$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Tekstkleur voor neutral variant (standaard)
|
|
648
|
+
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icoonkleur voor neutral variant (standaard)
|
|
647
649
|
$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
|
|
648
650
|
$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
|
|
649
651
|
$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
|
|
@@ -657,16 +659,16 @@ $dsn-option-label-font-family: $dsn-text-font-family-default;
|
|
|
657
659
|
$dsn-option-label-font-size: $dsn-text-font-size-md;
|
|
658
660
|
$dsn-option-label-font-weight: $dsn-text-font-weight-default;
|
|
659
661
|
$dsn-option-label-line-height: $dsn-text-line-height-md;
|
|
660
|
-
$dsn-ordered-list-color: $dsn-color-neutral-color-document; //
|
|
661
|
-
$dsn-ordered-list-font-family: $dsn-text-font-family-default; //
|
|
662
|
-
$dsn-ordered-list-font-size: $dsn-text-font-size-md; //
|
|
663
|
-
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; //
|
|
664
|
-
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; //
|
|
665
|
-
$dsn-ordered-list-gap: $dsn-space-row-sm; //
|
|
666
|
-
$dsn-ordered-list-line-height: $dsn-text-line-height-md; //
|
|
667
|
-
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; //
|
|
668
|
-
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; //
|
|
669
|
-
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; //
|
|
662
|
+
$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Tekstkleur van de geordende lijst
|
|
663
|
+
$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Font-familie van de geordende lijst
|
|
664
|
+
$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Font-size van de geordende lijst
|
|
665
|
+
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de geordende lijst
|
|
666
|
+
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de geordende lijst voor leesbaarheid
|
|
667
|
+
$dsn-ordered-list-gap: $dsn-space-row-sm; // Ruimte tussen lijstitems
|
|
668
|
+
$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Line-height van de geordende lijst
|
|
669
|
+
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Onderste margin van de geordende lijst
|
|
670
|
+
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Kleur van het nummermarkeerteken
|
|
671
|
+
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Inspringing aan de linkerkant van de geordende lijst
|
|
670
672
|
$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
|
|
671
673
|
$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
|
|
672
674
|
$dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
|
|
@@ -687,19 +689,19 @@ $dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizonta
|
|
|
687
689
|
$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
|
|
688
690
|
$dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
|
|
689
691
|
$dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
|
|
690
|
-
$dsn-paragraph-color: $dsn-color-neutral-color-document; //
|
|
691
|
-
$dsn-paragraph-font-family: $dsn-text-font-family-default; //
|
|
692
|
-
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; //
|
|
693
|
-
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; //
|
|
694
|
-
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; //
|
|
695
|
-
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; //
|
|
696
|
-
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; //
|
|
697
|
-
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; //
|
|
698
|
-
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; //
|
|
699
|
-
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; //
|
|
700
|
-
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; //
|
|
701
|
-
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; //
|
|
702
|
-
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; //
|
|
692
|
+
$dsn-paragraph-color: $dsn-color-neutral-color-document; // Tekstkleur van de alinea
|
|
693
|
+
$dsn-paragraph-font-family: $dsn-text-font-family-default; // Font-familie van de alinea
|
|
694
|
+
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de alinea
|
|
695
|
+
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de alinea voor leesbaarheid
|
|
696
|
+
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Font-size van de standaard alinea
|
|
697
|
+
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Line-height van de standaard alinea
|
|
698
|
+
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Onderste margin van de standaard alinea
|
|
699
|
+
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Font-size van de inleidende alinea
|
|
700
|
+
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Line-height van de inleidende alinea
|
|
701
|
+
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van de inleidende alinea
|
|
702
|
+
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
|
|
703
|
+
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
|
|
704
|
+
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
|
|
703
705
|
$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
|
|
704
706
|
$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
|
|
705
707
|
$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
|
|
@@ -718,20 +720,20 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
718
720
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
719
721
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
720
722
|
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
721
|
-
$dsn-pre-heading-color: $dsn-color-neutral-color-document; //
|
|
722
|
-
$dsn-pre-heading-font-family: $dsn-text-font-family-default; //
|
|
723
|
-
$dsn-pre-heading-font-size: $dsn-text-font-size-md; //
|
|
724
|
-
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; //
|
|
725
|
-
$dsn-pre-heading-line-height: $dsn-text-line-height-md; //
|
|
726
|
-
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; //
|
|
727
|
-
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; //
|
|
723
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van de pre-heading
|
|
724
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Font-familie van de pre-heading
|
|
725
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Font-size van de pre-heading (gelijk aan de bodytekst)
|
|
726
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel)
|
|
727
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Line-height van de pre-heading
|
|
728
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Ruimte tussen de pre-heading en de koptekst
|
|
729
|
+
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Achtergrondtrack
|
|
728
730
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
729
731
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
730
732
|
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
731
|
-
$dsn-radio-group-border-width: $dsn-border-width-none; //
|
|
732
|
-
$dsn-radio-group-gap: $dsn-space-block-sm; //
|
|
733
|
-
$dsn-radio-group-margin: $dsn-space-none; //
|
|
734
|
-
$dsn-radio-group-padding: $dsn-space-none; //
|
|
733
|
+
$dsn-radio-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
734
|
+
$dsn-radio-group-gap: $dsn-space-block-sm; // Ruimte tussen de radio-opties in de groep
|
|
735
|
+
$dsn-radio-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
736
|
+
$dsn-radio-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
735
737
|
$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
|
|
736
738
|
$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
737
739
|
$dsn-radio-border-width: $dsn-border-width-thin;
|
|
@@ -743,9 +745,9 @@ $dsn-radio-invalid-border-width: $dsn-border-width-medium;
|
|
|
743
745
|
$dsn-radio-checked-active-border-width: $dsn-border-width-medium;
|
|
744
746
|
$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
|
|
745
747
|
$dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
|
|
746
|
-
$dsn-search-input-icon-gap: $dsn-space-text-md; //
|
|
747
|
-
$dsn-select-icon-gap: $dsn-space-text-md; //
|
|
748
|
-
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; //
|
|
748
|
+
$dsn-search-input-icon-gap: $dsn-space-text-md; // Ruimte tussen het zoekicoon en de invoertekst
|
|
749
|
+
$dsn-select-icon-gap: $dsn-space-text-md; // Ruimte tussen het chevron-icoon en de selectietekst
|
|
750
|
+
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Afstand van de inline-end border tot het chevron-icoon (8px)
|
|
749
751
|
$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
|
|
750
752
|
$dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
|
|
751
753
|
$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
|
|
@@ -755,25 +757,32 @@ $dsn-skip-link-offset-inline-start: $dsn-space-inline-md; // Afstand van de link
|
|
|
755
757
|
$dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie
|
|
756
758
|
$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
|
|
757
759
|
$dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
|
|
758
|
-
$dsn-status-badge-border-color: $dsn-color-transparent; //
|
|
759
|
-
$dsn-status-badge-border-radius: $dsn-border-radius-sm; //
|
|
760
|
-
$dsn-status-badge-border-width: $dsn-border-width-thin; //
|
|
761
|
-
$dsn-status-badge-font-size: $dsn-text-font-size-sm; //
|
|
762
|
-
$dsn-status-badge-gap: $dsn-space-text-sm; //
|
|
763
|
-
$dsn-status-badge-line-height: $dsn-text-line-height-sm; //
|
|
764
|
-
$dsn-status-badge-padding-block: $dsn-space-block-xs; //
|
|
765
|
-
$dsn-status-badge-padding-inline: $dsn-space-inline-md; //
|
|
766
|
-
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; //
|
|
767
|
-
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; //
|
|
768
|
-
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; //
|
|
769
|
-
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; //
|
|
770
|
-
$dsn-summary-list-row-gap: $dsn-space-inline-lg; //
|
|
771
|
-
$dsn-summary-list-row-padding-block: $dsn-space-block-lg; //
|
|
772
|
-
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; //
|
|
773
|
-
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; //
|
|
774
|
-
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; //
|
|
775
|
-
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; //
|
|
776
|
-
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra
|
|
760
|
+
$dsn-status-badge-border-color: $dsn-color-transparent; // Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus)
|
|
761
|
+
$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Border-radius van de StatusBadge
|
|
762
|
+
$dsn-status-badge-border-width: $dsn-border-width-thin; // Border-breedte van de StatusBadge
|
|
763
|
+
$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Font-size van de StatusBadge
|
|
764
|
+
$dsn-status-badge-gap: $dsn-space-text-sm; // Ruimte tussen icoon en label
|
|
765
|
+
$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Line-height van de StatusBadge
|
|
766
|
+
$dsn-status-badge-padding-block: $dsn-space-block-xs; // Verticale padding
|
|
767
|
+
$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontale padding
|
|
768
|
+
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant
|
|
769
|
+
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Tekstkleur voor neutral variant
|
|
770
|
+
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Kleur van de rij-scheidingsborder
|
|
771
|
+
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Breedte van de rij-scheidingsborder
|
|
772
|
+
$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen kolommen in de gridindeling
|
|
773
|
+
$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
|
|
774
|
+
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Tekstkleur van de sleutelcel
|
|
775
|
+
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Vet gewicht onderscheidt de sleutel visueel van de waarde
|
|
776
|
+
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Tekstkleur van de waardecel
|
|
777
|
+
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Ruimte tussen meerdere actielinks in één rij
|
|
778
|
+
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling
|
|
779
|
+
$dsn-table-of-contents-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder (framed appearance)
|
|
780
|
+
$dsn-table-of-contents-padding-block: $dsn-space-block-xl; // Verticale padding (framed appearance)
|
|
781
|
+
$dsn-table-of-contents-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin, na de border (framed appearance)
|
|
782
|
+
$dsn-table-of-contents-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde (framed appearance)
|
|
783
|
+
$dsn-table-of-contents-heading-gap: $dsn-space-row-xl; // Ruimte tussen de heading en de lijst met ankerlinks
|
|
784
|
+
$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
|
|
785
|
+
$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
|
|
777
786
|
$dsn-table-caption-color: $dsn-color-neutral-color-document;
|
|
778
787
|
$dsn-table-caption-font-family: $dsn-heading-font-family;
|
|
779
788
|
$dsn-table-caption-font-size: $dsn-text-font-size-xl;
|
|
@@ -795,21 +804,21 @@ $dsn-table-footer-color: $dsn-color-neutral-color-document;
|
|
|
795
804
|
$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
|
|
796
805
|
$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
|
|
797
806
|
$dsn-table-wrapper-scroll-shadow-color: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
|
|
798
|
-
$dsn-text-area-border-radius: $dsn-form-control-border-radius; //
|
|
799
|
-
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
800
|
-
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
801
|
-
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
802
|
-
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
803
|
-
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
804
|
-
$dsn-text-input-border-radius: $dsn-form-control-border-radius; //
|
|
805
|
-
$dsn-text-input-column-gap: $dsn-space-text-lg; //
|
|
806
|
-
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; //
|
|
807
|
-
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; //
|
|
808
|
-
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; //
|
|
809
|
-
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; //
|
|
810
|
-
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; //
|
|
811
|
-
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; //
|
|
812
|
-
$dsn-time-input-icon-gap: $dsn-space-text-md; //
|
|
807
|
+
$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstveld
|
|
808
|
+
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstveld
|
|
809
|
+
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstveld
|
|
810
|
+
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
811
|
+
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
812
|
+
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
813
|
+
$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstinvoerveld
|
|
814
|
+
$dsn-text-input-column-gap: $dsn-space-text-lg; // Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning)
|
|
815
|
+
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
816
|
+
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
817
|
+
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
818
|
+
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
819
|
+
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
820
|
+
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Afstand van de inline-end border tot de klokknop (4px)
|
|
821
|
+
$dsn-time-input-icon-gap: $dsn-space-text-md; // Ruimte tussen de klokknop en de invoertekst
|
|
813
822
|
$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
|
|
814
823
|
$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
|
|
815
824
|
$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
|
|
@@ -819,94 +828,94 @@ $dsn-unordered-list-gap: $dsn-space-row-sm; // Space between list items
|
|
|
819
828
|
$dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list line height
|
|
820
829
|
$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
|
|
821
830
|
$dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
|
|
822
|
-
$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1
|
|
823
|
-
$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2
|
|
824
|
-
$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3
|
|
825
|
-
$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4
|
|
826
|
-
$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5
|
|
827
|
-
$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6
|
|
828
|
-
$dsn-form-control-hover-color: $dsn-form-control-color; //
|
|
829
|
-
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; //
|
|
830
|
-
$dsn-form-control-focus-color: $dsn-form-control-color; //
|
|
831
|
-
$dsn-form-control-active-color: $dsn-form-control-color; //
|
|
832
|
-
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; //
|
|
833
|
-
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; //
|
|
834
|
-
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; //
|
|
835
|
-
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
831
|
+
$dsn-heading-level-1-color: $dsn-heading-color; // Tekstkleur van Heading 1
|
|
832
|
+
$dsn-heading-level-2-color: $dsn-heading-color; // Tekstkleur van Heading 2
|
|
833
|
+
$dsn-heading-level-3-color: $dsn-heading-color; // Tekstkleur van Heading 3
|
|
834
|
+
$dsn-heading-level-4-color: $dsn-heading-color; // Tekstkleur van Heading 4
|
|
835
|
+
$dsn-heading-level-5-color: $dsn-heading-color; // Tekstkleur van Heading 5
|
|
836
|
+
$dsn-heading-level-6-color: $dsn-heading-color; // Tekstkleur van Heading 6
|
|
837
|
+
$dsn-form-control-hover-color: $dsn-form-control-color; // Tekstkleur van form controls in hover state
|
|
838
|
+
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Achtergrondkleur van form controls in focus state
|
|
839
|
+
$dsn-form-control-focus-color: $dsn-form-control-color; // Tekstkleur van form controls in focus state
|
|
840
|
+
$dsn-form-control-active-color: $dsn-form-control-color; // Tekstkleur van form controls in active state
|
|
841
|
+
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur van form controls in invalid state
|
|
842
|
+
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Randkleur van form controls in invalid state
|
|
843
|
+
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Tekstkleur van form controls in invalid state
|
|
844
|
+
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
836
845
|
$dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
837
|
-
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
838
|
-
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
839
|
-
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
840
|
-
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
841
|
-
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
842
|
-
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; //
|
|
843
|
-
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
844
|
-
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; //
|
|
845
|
-
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; //
|
|
846
|
-
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
847
|
-
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; //
|
|
848
|
-
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
849
|
-
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; //
|
|
850
|
-
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; //
|
|
846
|
+
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
847
|
+
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
848
|
+
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
849
|
+
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
850
|
+
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
851
|
+
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
852
|
+
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
853
|
+
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
854
|
+
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
855
|
+
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
856
|
+
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
857
|
+
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
858
|
+
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
859
|
+
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
851
860
|
$dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
852
|
-
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
853
|
-
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; //
|
|
854
|
-
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
855
|
-
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; //
|
|
856
|
-
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
857
|
-
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; //
|
|
858
|
-
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; //
|
|
859
|
-
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; //
|
|
860
|
-
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; //
|
|
861
|
-
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; //
|
|
862
|
-
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; //
|
|
863
|
-
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
864
|
-
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; //
|
|
865
|
-
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; //
|
|
861
|
+
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
862
|
+
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
863
|
+
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
864
|
+
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
865
|
+
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
866
|
+
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
867
|
+
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
868
|
+
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
869
|
+
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
870
|
+
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
871
|
+
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
872
|
+
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
873
|
+
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
874
|
+
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
866
875
|
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
867
|
-
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
868
|
-
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; //
|
|
869
|
-
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
870
|
-
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; //
|
|
871
|
-
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
872
|
-
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; //
|
|
873
|
-
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; //
|
|
874
|
-
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; //
|
|
875
|
-
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; //
|
|
876
|
-
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; //
|
|
877
|
-
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; //
|
|
878
|
-
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
879
|
-
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; //
|
|
880
|
-
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; //
|
|
876
|
+
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
877
|
+
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
878
|
+
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
879
|
+
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
880
|
+
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
881
|
+
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
882
|
+
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
883
|
+
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
884
|
+
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
885
|
+
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
886
|
+
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
887
|
+
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
888
|
+
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
889
|
+
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
881
890
|
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
882
|
-
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; //
|
|
883
|
-
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; //
|
|
884
|
-
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; //
|
|
885
|
-
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; //
|
|
886
|
-
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; //
|
|
887
|
-
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; //
|
|
888
|
-
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; //
|
|
889
|
-
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; //
|
|
890
|
-
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; //
|
|
891
|
-
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; //
|
|
892
|
-
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; //
|
|
893
|
-
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; //
|
|
894
|
-
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; //
|
|
895
|
-
$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse
|
|
891
|
+
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
892
|
+
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
893
|
+
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
894
|
+
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
895
|
+
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
896
|
+
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
897
|
+
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
898
|
+
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
899
|
+
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
900
|
+
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
901
|
+
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
902
|
+
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
903
|
+
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
904
|
+
$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse documentachtergrond
|
|
896
905
|
$dsn-color-accent-1-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated; // Elevated background (inverse)
|
|
897
|
-
$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse
|
|
898
|
-
$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse
|
|
899
|
-
$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse hover
|
|
900
|
-
$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse active
|
|
901
|
-
$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse
|
|
902
|
-
$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse
|
|
903
|
-
$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse hover
|
|
904
|
-
$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse active
|
|
905
|
-
$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse
|
|
906
|
-
$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse hover
|
|
907
|
-
$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse active
|
|
908
|
-
$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse
|
|
909
|
-
$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse
|
|
906
|
+
$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse subtiele achtergrond
|
|
907
|
+
$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse standaard achtergrond
|
|
908
|
+
$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse achtergrond in hover state
|
|
909
|
+
$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse achtergrond in active state
|
|
910
|
+
$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse subtiele rand
|
|
911
|
+
$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse standaard rand
|
|
912
|
+
$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse rand in hover state
|
|
913
|
+
$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse rand in active state
|
|
914
|
+
$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse standaard tekst
|
|
915
|
+
$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse tekst in hover state
|
|
916
|
+
$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse tekst in active state
|
|
917
|
+
$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse subtiele tekst
|
|
918
|
+
$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse documenttekst
|
|
910
919
|
$dsn-color-positive-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
911
920
|
$dsn-color-positive-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
912
921
|
$dsn-color-positive-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
@@ -967,66 +976,66 @@ $dsn-color-info-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
|
967
976
|
$dsn-color-info-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
968
977
|
$dsn-color-info-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
969
978
|
$dsn-color-info-inverse-color-document: $dsn-color-neutral-inverse-color-document;
|
|
970
|
-
$dsn-alert-icon-size: $dsn-icon-size-xl; //
|
|
971
|
-
$dsn-alert-info-background-color: $dsn-color-info-bg-default; //
|
|
972
|
-
$dsn-alert-info-border-color: $dsn-color-info-border-default; //
|
|
973
|
-
$dsn-alert-info-color: $dsn-color-info-color-document; //
|
|
974
|
-
$dsn-alert-info-icon-color: $dsn-color-info-color-default; //
|
|
975
|
-
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; //
|
|
976
|
-
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; //
|
|
977
|
-
$dsn-alert-negative-color: $dsn-color-negative-color-document; //
|
|
978
|
-
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; //
|
|
979
|
-
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; //
|
|
980
|
-
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; //
|
|
981
|
-
$dsn-alert-positive-color: $dsn-color-positive-color-document; //
|
|
982
|
-
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; //
|
|
983
|
-
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; //
|
|
984
|
-
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; //
|
|
985
|
-
$dsn-alert-warning-color: $dsn-color-warning-color-document; //
|
|
986
|
-
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; //
|
|
987
|
-
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; //
|
|
988
|
-
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; //
|
|
989
|
-
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; //
|
|
990
|
-
$dsn-button-default-negative-color: $dsn-color-negative-color-default; //
|
|
991
|
-
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; //
|
|
992
|
-
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; //
|
|
993
|
-
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; //
|
|
994
|
-
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; //
|
|
995
|
-
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; //
|
|
996
|
-
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; //
|
|
997
|
-
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; //
|
|
998
|
-
$dsn-button-default-positive-color: $dsn-color-positive-color-default; //
|
|
999
|
-
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; //
|
|
1000
|
-
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; //
|
|
1001
|
-
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; //
|
|
1002
|
-
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; //
|
|
1003
|
-
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; //
|
|
1004
|
-
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; //
|
|
1005
|
-
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; //
|
|
1006
|
-
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; //
|
|
1007
|
-
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; //
|
|
1008
|
-
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; //
|
|
1009
|
-
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; //
|
|
1010
|
-
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; //
|
|
1011
|
-
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; //
|
|
1012
|
-
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; //
|
|
1013
|
-
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; //
|
|
1014
|
-
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; //
|
|
1015
|
-
$dsn-button-size-default-icon-size: $dsn-icon-size-md; //
|
|
1016
|
-
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1017
|
-
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; //
|
|
979
|
+
$dsn-alert-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom)
|
|
980
|
+
$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant (standaard)
|
|
981
|
+
$dsn-alert-info-border-color: $dsn-color-info-border-default; // Borderkleur voor info variant (standaard)
|
|
982
|
+
$dsn-alert-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant (standaard)
|
|
983
|
+
$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant (standaard)
|
|
984
|
+
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
985
|
+
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Borderkleur voor negative variant
|
|
986
|
+
$dsn-alert-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
987
|
+
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
988
|
+
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
989
|
+
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Borderkleur voor positive variant
|
|
990
|
+
$dsn-alert-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
991
|
+
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
992
|
+
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
993
|
+
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Borderkleur voor warning variant
|
|
994
|
+
$dsn-alert-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
995
|
+
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
996
|
+
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon)
|
|
997
|
+
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Grootte van het terug-icoon — sm (consistent met Link size small)
|
|
998
|
+
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Border van de default negative button
|
|
999
|
+
$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de default negative button
|
|
1000
|
+
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de default negative button op active
|
|
1001
|
+
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Border van de default negative button op active
|
|
1002
|
+
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de default negative button op active
|
|
1003
|
+
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de default negative button op hover
|
|
1004
|
+
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Border van de default negative button op hover
|
|
1005
|
+
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de default negative button op hover
|
|
1006
|
+
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Border van de default positive button
|
|
1007
|
+
$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de default positive button
|
|
1008
|
+
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de default positive button op active
|
|
1009
|
+
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Border van de default positive button op active
|
|
1010
|
+
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de default positive button op active
|
|
1011
|
+
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de default positive button op hover
|
|
1012
|
+
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Border van de default positive button op hover
|
|
1013
|
+
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de default positive button op hover
|
|
1014
|
+
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de subtle negative button
|
|
1015
|
+
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de subtle negative button op active
|
|
1016
|
+
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de subtle negative button op active
|
|
1017
|
+
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de subtle negative button op hover
|
|
1018
|
+
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de subtle negative button op hover
|
|
1019
|
+
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de subtle positive button
|
|
1020
|
+
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de subtle positive button op active
|
|
1021
|
+
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de subtle positive button op active
|
|
1022
|
+
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de subtle positive button op hover
|
|
1023
|
+
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de subtle positive button op hover
|
|
1024
|
+
$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
|
|
1025
|
+
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
|
|
1026
|
+
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
|
|
1018
1027
|
$dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
|
|
1019
|
-
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; //
|
|
1020
|
-
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1021
|
-
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1022
|
-
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1023
|
-
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1024
|
-
$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; //
|
|
1028
|
+
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1029
|
+
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1030
|
+
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1031
|
+
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1032
|
+
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1033
|
+
$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)
|
|
1025
1034
|
$dsn-checkbox-background-color: $dsn-form-control-background-color;
|
|
1026
1035
|
$dsn-checkbox-border-color: $dsn-form-control-border-color;
|
|
1027
1036
|
$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
|
|
1028
1037
|
$dsn-checkbox-active-border-color: $dsn-form-control-active-border-color;
|
|
1029
|
-
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
1038
|
+
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van het vinkje
|
|
1030
1039
|
$dsn-checkbox-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1031
1040
|
$dsn-checkbox-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1032
1041
|
$dsn-checkbox-focus-border-color: $dsn-form-control-focus-border-color;
|
|
@@ -1038,80 +1047,80 @@ $dsn-checkbox-checked-disabled-border-color: $dsn-form-control-disabled-border-c
|
|
|
1038
1047
|
$dsn-checkbox-checked-disabled-color: $dsn-form-control-disabled-color;
|
|
1039
1048
|
$dsn-checkbox-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1040
1049
|
$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1041
|
-
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; //
|
|
1050
|
+
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Kleur van het indeterminate-icoon (minteken)
|
|
1042
1051
|
$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1043
1052
|
$dsn-checkbox-indeterminate-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1044
1053
|
$dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1045
1054
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1046
1055
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1047
1056
|
$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1048
|
-
$dsn-file-input-color: $dsn-form-control-placeholder-color; //
|
|
1049
|
-
$dsn-file-input-font-family: $dsn-form-control-font-family; //
|
|
1050
|
-
$dsn-file-input-font-size: $dsn-form-control-font-size; //
|
|
1051
|
-
$dsn-file-input-font-weight: $dsn-form-control-font-weight; //
|
|
1052
|
-
$dsn-file-input-line-height: $dsn-form-control-line-height; //
|
|
1053
|
-
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; //
|
|
1057
|
+
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
|
|
1058
|
+
$dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
|
|
1059
|
+
$dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
|
|
1060
|
+
$dsn-file-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het bestandsinvoerveld
|
|
1061
|
+
$dsn-file-input-line-height: $dsn-form-control-line-height; // Line-height van het bestandsinvoerveld
|
|
1062
|
+
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Gedempte tekstkleur voor de disabled staat
|
|
1054
1063
|
$dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur in de error state — zelfde schaal als FormFieldset bij invalid
|
|
1055
1064
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1056
1065
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1057
1066
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1058
1067
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1059
1068
|
$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
|
|
1060
|
-
$dsn-details-icon-size: $dsn-icon-size-md; //
|
|
1069
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
|
|
1061
1070
|
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1062
|
-
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; //
|
|
1063
|
-
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; //
|
|
1064
|
-
$dsn-form-field-status-icon-size: $dsn-icon-size-md; //
|
|
1065
|
-
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; //
|
|
1066
|
-
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; //
|
|
1067
|
-
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
1068
|
-
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
1071
|
+
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
|
|
1072
|
+
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
|
|
1073
|
+
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
|
|
1074
|
+
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
1075
|
+
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
1076
|
+
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
|
|
1077
|
+
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
1069
1078
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
1070
|
-
$dsn-link-icon-size: $dsn-icon-size-md; //
|
|
1071
|
-
$dsn-link-size-default-icon-size: $dsn-icon-size-md; //
|
|
1072
|
-
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; //
|
|
1073
|
-
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; //
|
|
1079
|
+
$dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
|
|
1080
|
+
$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
|
|
1081
|
+
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link
|
|
1082
|
+
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small link
|
|
1074
1083
|
$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
|
|
1075
1084
|
$dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
|
|
1076
|
-
$dsn-note-icon-size: $dsn-icon-size-xl; //
|
|
1077
|
-
$dsn-note-info-background-color: $dsn-color-info-bg-default; //
|
|
1078
|
-
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; //
|
|
1079
|
-
$dsn-note-info-color: $dsn-color-info-color-document; //
|
|
1080
|
-
$dsn-note-info-icon-color: $dsn-color-info-color-default; //
|
|
1081
|
-
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; //
|
|
1082
|
-
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; //
|
|
1083
|
-
$dsn-note-negative-color: $dsn-color-negative-color-document; //
|
|
1084
|
-
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; //
|
|
1085
|
-
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; //
|
|
1086
|
-
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; //
|
|
1087
|
-
$dsn-note-positive-color: $dsn-color-positive-color-document; //
|
|
1088
|
-
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; //
|
|
1089
|
-
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; //
|
|
1090
|
-
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; //
|
|
1091
|
-
$dsn-note-warning-color: $dsn-color-warning-color-document; //
|
|
1092
|
-
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; //
|
|
1093
|
-
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
|
|
1085
|
+
$dsn-note-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom)
|
|
1086
|
+
$dsn-note-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1087
|
+
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Kleur van de linkerborder voor info variant
|
|
1088
|
+
$dsn-note-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant
|
|
1089
|
+
$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant
|
|
1090
|
+
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
1091
|
+
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor negative variant
|
|
1092
|
+
$dsn-note-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
1093
|
+
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
1094
|
+
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
1095
|
+
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Kleur van de linkerborder voor positive variant
|
|
1096
|
+
$dsn-note-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
1097
|
+
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
1098
|
+
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1099
|
+
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Kleur van de linkerborder voor warning variant
|
|
1100
|
+
$dsn-note-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
1101
|
+
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
1102
|
+
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
|
|
1094
1103
|
$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
|
|
1095
1104
|
$dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
|
|
1096
|
-
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
|
|
1097
|
-
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
|
|
1098
|
-
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
|
|
1099
|
-
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
|
|
1100
|
-
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
|
|
1105
|
+
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
|
|
1106
|
+
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
|
|
1107
|
+
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
|
|
1108
|
+
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
|
|
1109
|
+
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
|
|
1101
1110
|
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1102
|
-
$dsn-radio-group-legend-color: $dsn-form-field-label-color; //
|
|
1103
|
-
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font
|
|
1104
|
-
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font
|
|
1105
|
-
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font
|
|
1106
|
-
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line
|
|
1107
|
-
$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; //
|
|
1111
|
+
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1112
|
+
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1113
|
+
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1114
|
+
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1115
|
+
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1116
|
+
$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)
|
|
1108
1117
|
$dsn-radio-background-color: $dsn-form-control-background-color;
|
|
1109
1118
|
$dsn-radio-border-color: $dsn-form-control-border-color;
|
|
1110
|
-
$dsn-radio-color: $dsn-form-control-border-color; //
|
|
1119
|
+
$dsn-radio-color: $dsn-form-control-border-color; // Kleur van de binnenste cirkel in de standaard staat
|
|
1111
1120
|
$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
|
|
1112
1121
|
$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
|
|
1113
1122
|
$dsn-radio-active-color: $dsn-form-control-active-border-color;
|
|
1114
|
-
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
1123
|
+
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van de binnenste cirkel wanneer aangevinkt
|
|
1115
1124
|
$dsn-radio-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1116
1125
|
$dsn-radio-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1117
1126
|
$dsn-radio-disabled-color: $dsn-form-control-disabled-border-color;
|
|
@@ -1123,68 +1132,70 @@ $dsn-radio-hover-color: $dsn-form-control-hover-border-color;
|
|
|
1123
1132
|
$dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1124
1133
|
$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1125
1134
|
$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1126
|
-
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; //
|
|
1135
|
+
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond
|
|
1127
1136
|
$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1128
1137
|
$dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1129
|
-
$dsn-search-input-icon-size: $dsn-icon-size-md; //
|
|
1130
|
-
$dsn-select-icon-size: $dsn-icon-size-md; //
|
|
1138
|
+
$dsn-search-input-icon-size: $dsn-icon-size-md; // Icoongrootte van het zoekinvoerveld
|
|
1139
|
+
$dsn-select-icon-size: $dsn-icon-size-md; // Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte
|
|
1131
1140
|
$dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
|
|
1132
|
-
$dsn-status-badge-icon-size: $dsn-icon-size-sm; //
|
|
1133
|
-
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; //
|
|
1134
|
-
$dsn-status-badge-info-color: $dsn-color-info-color-default; //
|
|
1135
|
-
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; //
|
|
1136
|
-
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; //
|
|
1137
|
-
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; //
|
|
1138
|
-
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; //
|
|
1139
|
-
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; //
|
|
1140
|
-
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; //
|
|
1141
|
-
$dsn-
|
|
1142
|
-
$dsn-
|
|
1143
|
-
$dsn-text-area-
|
|
1144
|
-
$dsn-text-area-color: $dsn-form-control-color; //
|
|
1145
|
-
$dsn-text-area-
|
|
1146
|
-
$dsn-text-area-
|
|
1147
|
-
$dsn-text-area-font-
|
|
1148
|
-
$dsn-text-area-
|
|
1149
|
-
$dsn-text-area-
|
|
1150
|
-
$dsn-text-area-
|
|
1151
|
-
$dsn-text-area-padding-
|
|
1152
|
-
$dsn-text-area-padding-
|
|
1153
|
-
$dsn-text-area-
|
|
1154
|
-
$dsn-text-area-
|
|
1155
|
-
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; //
|
|
1156
|
-
$dsn-text-area-
|
|
1157
|
-
$dsn-text-area-
|
|
1158
|
-
$dsn-text-area-
|
|
1159
|
-
$dsn-text-area-
|
|
1160
|
-
$dsn-text-area-
|
|
1161
|
-
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; //
|
|
1162
|
-
$dsn-text-
|
|
1163
|
-
$dsn-text-
|
|
1164
|
-
$dsn-text-input-
|
|
1165
|
-
$dsn-text-input-color: $dsn-form-control-color; //
|
|
1166
|
-
$dsn-text-input-
|
|
1167
|
-
$dsn-text-input-
|
|
1168
|
-
$dsn-text-input-font-
|
|
1169
|
-
$dsn-text-input-
|
|
1170
|
-
$dsn-text-input-
|
|
1171
|
-
$dsn-text-input-
|
|
1172
|
-
$dsn-text-input-padding-
|
|
1173
|
-
$dsn-text-input-padding-
|
|
1174
|
-
$dsn-text-input-
|
|
1175
|
-
$dsn-text-input-
|
|
1176
|
-
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; //
|
|
1177
|
-
$dsn-text-input-
|
|
1178
|
-
$dsn-text-input-
|
|
1179
|
-
$dsn-text-input-
|
|
1180
|
-
$dsn-text-input-
|
|
1181
|
-
$dsn-text-input-
|
|
1182
|
-
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; //
|
|
1183
|
-
$dsn-
|
|
1141
|
+
$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Icoongrootte van de StatusBadge
|
|
1142
|
+
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1143
|
+
$dsn-status-badge-info-color: $dsn-color-info-color-default; // Tekstkleur voor info variant
|
|
1144
|
+
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
1145
|
+
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Tekstkleur voor negative variant
|
|
1146
|
+
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
1147
|
+
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
1148
|
+
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1149
|
+
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
1150
|
+
$dsn-table-of-contents-border-inline-start-color: $dsn-color-accent-1-border-default; // Kleur van de linkerborder (framed appearance)
|
|
1151
|
+
$dsn-table-of-contents-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur (framed appearance)
|
|
1152
|
+
$dsn-text-area-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstveld
|
|
1153
|
+
$dsn-text-area-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstveld
|
|
1154
|
+
$dsn-text-area-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstveld
|
|
1155
|
+
$dsn-text-area-color: $dsn-form-control-color; // Tekstkleur van het tekstveld
|
|
1156
|
+
$dsn-text-area-font-family: $dsn-form-control-font-family; // Font-familie van het tekstveld
|
|
1157
|
+
$dsn-text-area-font-size: $dsn-form-control-font-size; // Font-size van het tekstveld
|
|
1158
|
+
$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstveld
|
|
1159
|
+
$dsn-text-area-line-height: $dsn-form-control-line-height; // Line-height van het tekstveld
|
|
1160
|
+
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstveld
|
|
1161
|
+
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstveld
|
|
1162
|
+
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstveld
|
|
1163
|
+
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstveld
|
|
1164
|
+
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstveld op disabled
|
|
1165
|
+
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstveld op disabled
|
|
1166
|
+
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstveld op disabled
|
|
1167
|
+
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstveld op focus
|
|
1168
|
+
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstveld
|
|
1169
|
+
$dsn-text-area-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstveld bij ongeldige invoer
|
|
1170
|
+
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstveld op read-only
|
|
1171
|
+
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstveld op read-only
|
|
1172
|
+
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstveld op read-only
|
|
1173
|
+
$dsn-text-input-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstinvoerveld
|
|
1174
|
+
$dsn-text-input-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstinvoerveld
|
|
1175
|
+
$dsn-text-input-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstinvoerveld
|
|
1176
|
+
$dsn-text-input-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld
|
|
1177
|
+
$dsn-text-input-font-family: $dsn-form-control-font-family; // Font-familie van het tekstinvoerveld
|
|
1178
|
+
$dsn-text-input-font-size: $dsn-form-control-font-size; // Font-size van het tekstinvoerveld
|
|
1179
|
+
$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstinvoerveld
|
|
1180
|
+
$dsn-text-input-line-height: $dsn-form-control-line-height; // Line-height van het tekstinvoerveld
|
|
1181
|
+
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstinvoerveld
|
|
1182
|
+
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstinvoerveld
|
|
1183
|
+
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstinvoerveld
|
|
1184
|
+
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstinvoerveld
|
|
1185
|
+
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstinvoerveld op disabled
|
|
1186
|
+
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstinvoerveld op disabled
|
|
1187
|
+
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstinvoerveld op disabled
|
|
1188
|
+
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstinvoerveld op focus
|
|
1189
|
+
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstinvoerveld
|
|
1190
|
+
$dsn-text-input-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld bij ongeldige invoer
|
|
1191
|
+
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstinvoerveld op read-only
|
|
1192
|
+
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstinvoerveld op read-only
|
|
1193
|
+
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstinvoerveld op read-only
|
|
1194
|
+
$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
|
|
1184
1195
|
$dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
|
|
1185
|
-
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; //
|
|
1186
|
-
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; //
|
|
1187
|
-
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; //
|
|
1196
|
+
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Accentkleur van form controls in hover state
|
|
1197
|
+
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Accentkleur van form controls in active state
|
|
1198
|
+
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Accentkleur van form controls (checkboxes, radio buttons)
|
|
1188
1199
|
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1189
1200
|
$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1190
1201
|
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
@@ -1245,34 +1256,34 @@ $dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover
|
|
|
1245
1256
|
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1246
1257
|
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1247
1258
|
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
|
|
1248
|
-
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; //
|
|
1249
|
-
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1250
|
-
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; //
|
|
1251
|
-
$dsn-button-default-border-color: $dsn-color-action-1-border-default; //
|
|
1252
|
-
$dsn-button-default-color: $dsn-color-action-1-color-default; //
|
|
1253
|
-
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1254
|
-
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; //
|
|
1255
|
-
$dsn-button-default-active-color: $dsn-color-action-1-color-active; //
|
|
1256
|
-
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1257
|
-
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; //
|
|
1258
|
-
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; //
|
|
1259
|
-
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; //
|
|
1260
|
-
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; //
|
|
1261
|
-
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; //
|
|
1262
|
-
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; //
|
|
1263
|
-
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; //
|
|
1264
|
-
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; //
|
|
1265
|
-
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; //
|
|
1266
|
-
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; //
|
|
1267
|
-
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; //
|
|
1268
|
-
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; //
|
|
1269
|
-
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; //
|
|
1270
|
-
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; //
|
|
1271
|
-
$dsn-button-subtle-color: $dsn-color-action-1-color-default; //
|
|
1272
|
-
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; //
|
|
1273
|
-
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; //
|
|
1274
|
-
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; //
|
|
1275
|
-
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; //
|
|
1259
|
+
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1260
|
+
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Linkkleur op hover
|
|
1261
|
+
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Linkkleur op active
|
|
1262
|
+
$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Border van de default button
|
|
1263
|
+
$dsn-button-default-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de default button
|
|
1264
|
+
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de default button op active
|
|
1265
|
+
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Border van de default button op active
|
|
1266
|
+
$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de default button op active
|
|
1267
|
+
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de default button op hover
|
|
1268
|
+
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Border van de default button op hover
|
|
1269
|
+
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de default button op hover
|
|
1270
|
+
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrond van de strong negative button
|
|
1271
|
+
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Tekst-/icoonkleur van de strong negative button
|
|
1272
|
+
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Achtergrond van de strong negative button op active
|
|
1273
|
+
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Tekst-/icoonkleur van de strong negative button op active
|
|
1274
|
+
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Achtergrond van de strong negative button op hover
|
|
1275
|
+
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Tekst-/icoonkleur van de strong negative button op hover
|
|
1276
|
+
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrond van de strong positive button
|
|
1277
|
+
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Tekst-/icoonkleur van de strong positive button
|
|
1278
|
+
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Achtergrond van de strong positive button op active
|
|
1279
|
+
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Tekst-/icoonkleur van de strong positive button op active
|
|
1280
|
+
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Achtergrond van de strong positive button op hover
|
|
1281
|
+
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Tekst-/icoonkleur van de strong positive button op hover
|
|
1282
|
+
$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de subtle button
|
|
1283
|
+
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de subtle button op active
|
|
1284
|
+
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de subtle button op active
|
|
1285
|
+
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de subtle button op hover
|
|
1286
|
+
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de subtle button op hover
|
|
1276
1287
|
$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1277
1288
|
$dsn-checkbox-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1278
1289
|
$dsn-checkbox-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
@@ -1280,16 +1291,16 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
|
|
|
1280
1291
|
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1281
1292
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1282
1293
|
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1283
|
-
$dsn-details-summary-color: $dsn-color-action-2-color-default; //
|
|
1284
|
-
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; //
|
|
1285
|
-
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; //
|
|
1286
|
-
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
|
|
1287
|
-
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
1288
|
-
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
1289
|
-
$dsn-link-color: $dsn-color-action-2-color-default; //
|
|
1290
|
-
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; //
|
|
1291
|
-
$dsn-link-active-color: $dsn-color-action-2-color-active; //
|
|
1292
|
-
$dsn-link-hover-color: $dsn-color-action-2-color-hover; //
|
|
1294
|
+
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
|
|
1295
|
+
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
|
|
1296
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
|
|
1297
|
+
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
|
|
1298
|
+
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
1299
|
+
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
1300
|
+
$dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1301
|
+
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
|
|
1302
|
+
$dsn-link-active-color: $dsn-color-action-2-color-active; // Tekstkleur van de link op active
|
|
1303
|
+
$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Tekstkleur van de link op hover
|
|
1293
1304
|
$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
|
|
1294
1305
|
$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
|
|
1295
1306
|
$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
|
|
@@ -1300,48 +1311,48 @@ $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-spe
|
|
|
1300
1311
|
$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
|
|
1301
1312
|
$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
|
|
1302
1313
|
$dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
|
|
1303
|
-
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
|
|
1314
|
+
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
|
|
1304
1315
|
$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
|
|
1305
1316
|
$dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
|
|
1306
|
-
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
|
|
1317
|
+
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
|
|
1307
1318
|
$dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
|
|
1308
|
-
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
|
|
1319
|
+
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
|
|
1309
1320
|
$dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
|
|
1310
|
-
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
|
|
1321
|
+
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
|
|
1311
1322
|
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
1312
|
-
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
|
|
1323
|
+
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
|
|
1313
1324
|
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
1314
|
-
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk
|
|
1325
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk achtergrondkleur
|
|
1315
1326
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1316
1327
|
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1317
1328
|
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
1318
1329
|
$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
|
|
1319
1330
|
$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1320
1331
|
$dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
|
|
1321
|
-
$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); //
|
|
1322
|
-
$dsn-select-icon-color: $dsn-color-action-1-color-default; //
|
|
1323
|
-
$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); //
|
|
1324
|
-
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; //
|
|
1325
|
-
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; //
|
|
1326
|
-
$dsn-text-area-focus-color: $dsn-form-control-focus-color; //
|
|
1327
|
-
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; //
|
|
1328
|
-
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1329
|
-
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1330
|
-
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; //
|
|
1331
|
-
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; //
|
|
1332
|
-
$dsn-text-input-focus-color: $dsn-form-control-focus-color; //
|
|
1333
|
-
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; //
|
|
1334
|
-
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; //
|
|
1335
|
-
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; //
|
|
1336
|
-
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; //
|
|
1337
|
-
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; //
|
|
1338
|
-
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; //
|
|
1339
|
-
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; //
|
|
1340
|
-
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; //
|
|
1341
|
-
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; //
|
|
1342
|
-
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; //
|
|
1343
|
-
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; //
|
|
1344
|
-
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; //
|
|
1332
|
+
$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
|
|
1333
|
+
$dsn-select-icon-color: $dsn-color-action-1-color-default; // Kleur van het chevron-icoon — gelijk aan de icoonkleur van de subtle button
|
|
1334
|
+
$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
|
|
1335
|
+
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstveld op focus
|
|
1336
|
+
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Kleur van de box-shadow op focus
|
|
1337
|
+
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstveld op focus
|
|
1338
|
+
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Kleur van de box-shadow op hover
|
|
1339
|
+
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstveld bij ongeldige invoer
|
|
1340
|
+
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstveld bij ongeldige invoer
|
|
1341
|
+
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstinvoerveld op focus
|
|
1342
|
+
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Kleur van de box-shadow op focus
|
|
1343
|
+
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstinvoerveld op focus
|
|
1344
|
+
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Kleur van de box-shadow op hover
|
|
1345
|
+
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstinvoerveld bij ongeldige invoer
|
|
1346
|
+
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstinvoerveld bij ongeldige invoer
|
|
1347
|
+
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Kleur van het klokicoon (interactief, actie-kleur)
|
|
1348
|
+
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Kleur van het klokicoon op hover
|
|
1349
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Grootte van het klokicoon — gelijk aan de icoongrootte van de small button
|
|
1350
|
+
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Achtergrond van de strong button
|
|
1351
|
+
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Tekst-/icoonkleur van de strong button
|
|
1352
|
+
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Achtergrond van de strong button op active
|
|
1353
|
+
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Tekst-/icoonkleur van de strong button op active
|
|
1354
|
+
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Achtergrond van de strong button op hover
|
|
1355
|
+
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Tekst-/icoonkleur van de strong button op hover
|
|
1345
1356
|
$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
|
|
1346
1357
|
$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1347
1358
|
$dsn-checkbox-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
@@ -1351,5 +1362,5 @@ $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-acce
|
|
|
1351
1362
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1352
1363
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1353
1364
|
$dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1354
|
-
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; //
|
|
1355
|
-
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; //
|
|
1365
|
+
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|
|
1366
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|