@dsn-starter-kit/design-tokens 1.0.2 → 3.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 +973 -950
- package/dist/css/start-dark-information-dense.css +973 -950
- package/dist/css/start-light-default.css +971 -948
- package/dist/css/start-light-information-dense.css +971 -948
- package/dist/css/variables-dark.css +973 -950
- package/dist/css/variables.css +971 -948
- package/dist/css/wireframe-dark-default.css +849 -826
- package/dist/css/wireframe-dark-information-dense.css +849 -826
- package/dist/css/wireframe-light-default.css +849 -826
- package/dist/css/wireframe-light-information-dense.css +849 -826
- package/dist/js/start-dark-default.d.ts +38 -1
- package/dist/js/start-dark-default.js +3911 -1957
- package/dist/js/start-dark-information-dense.d.ts +38 -1
- package/dist/js/start-dark-information-dense.js +3911 -1957
- package/dist/js/start-light-default.d.ts +38 -1
- package/dist/js/start-light-default.js +3905 -1953
- package/dist/js/start-light-information-dense.d.ts +38 -1
- package/dist/js/start-light-information-dense.js +3905 -1953
- package/dist/js/tokens-dark.cjs +36699 -0
- package/dist/js/tokens-dark.d.cts +1393 -0
- package/dist/js/tokens-dark.d.ts +38 -1
- package/dist/js/tokens-dark.js +3911 -1957
- package/dist/js/tokens.cjs +36699 -0
- package/dist/js/tokens.d.cts +1393 -0
- package/dist/js/tokens.d.ts +38 -1
- package/dist/js/tokens.js +3905 -1953
- package/dist/js/wireframe-dark-default.d.ts +38 -1
- package/dist/js/wireframe-dark-default.js +3631 -1687
- package/dist/js/wireframe-dark-information-dense.d.ts +38 -1
- package/dist/js/wireframe-dark-information-dense.js +3631 -1687
- package/dist/js/wireframe-light-default.d.ts +38 -1
- package/dist/js/wireframe-light-default.js +3631 -1687
- package/dist/js/wireframe-light-information-dense.d.ts +38 -1
- package/dist/js/wireframe-light-information-dense.js +3631 -1687
- package/dist/json/start-dark-default.json +24 -1
- package/dist/json/start-dark-information-dense.json +24 -1
- package/dist/json/start-light-default.json +24 -1
- package/dist/json/start-light-information-dense.json +24 -1
- package/dist/json/tokens-dark.json +24 -1
- package/dist/json/tokens.json +24 -1
- package/dist/json/wireframe-dark-default.json +24 -1
- package/dist/json/wireframe-dark-information-dense.json +24 -1
- package/dist/json/wireframe-light-default.json +24 -1
- package/dist/json/wireframe-light-information-dense.json +24 -1
- package/dist/scss/_start-dark-default.scss +973 -950
- package/dist/scss/_start-dark-information-dense.scss +973 -950
- package/dist/scss/_start-light-default.scss +971 -948
- package/dist/scss/_start-light-information-dense.scss +971 -948
- package/dist/scss/_variables-dark.scss +973 -950
- package/dist/scss/_variables.scss +971 -948
- package/dist/scss/_wireframe-dark-default.scss +849 -826
- package/dist/scss/_wireframe-dark-information-dense.scss +849 -826
- package/dist/scss/_wireframe-light-default.scss +849 -826
- package/dist/scss/_wireframe-light-information-dense.scss +849 -826
- package/package.json +28 -12
|
@@ -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: #000000; //
|
|
97
|
-
$dsn-focus-inverse-outline-color: #ffffff; //
|
|
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: #000000; // Kleur van de focusomtrek
|
|
97
|
+
$dsn-focus-inverse-outline-color: #ffffff; // Kleur van de focusomtrek op gekleurde/donkere achtergronden — tegenhanger van outline-color
|
|
98
|
+
$dsn-form-control-max-inline-size: 25rem; // Maximale breedte van form controls
|
|
99
|
+
$dsn-form-control-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,64 +126,66 @@ $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: #ffffff; //
|
|
130
|
-
$dsn-color-neutral-bg-elevated: #ffffff; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
131
|
-
$dsn-color-neutral-bg-subtle: #ffffff; //
|
|
132
|
-
$dsn-color-neutral-bg-default: #ffffff; //
|
|
133
|
-
$dsn-color-neutral-bg-hover: #ffffff; //
|
|
134
|
-
$dsn-color-neutral-bg-active: #ffffff; //
|
|
135
|
-
$dsn-color-neutral-border-subtle: #000000; //
|
|
136
|
-
$dsn-color-neutral-border-default: #000000; //
|
|
137
|
-
$dsn-color-neutral-border-hover: #000000; //
|
|
138
|
-
$dsn-color-neutral-border-active: #000000; //
|
|
139
|
-
$dsn-color-neutral-color-default: #000000; //
|
|
140
|
-
$dsn-color-neutral-color-hover: #000000; //
|
|
141
|
-
$dsn-color-neutral-color-active: #000000; //
|
|
142
|
-
$dsn-color-neutral-color-subtle: #000000; //
|
|
143
|
-
$dsn-color-neutral-color-document: #000000; //
|
|
144
|
-
$dsn-color-transparent: rgba(0, 0, 0, 0); //
|
|
129
|
+
$dsn-color-neutral-bg-document: #ffffff; // Documentachtergrond
|
|
130
|
+
$dsn-color-neutral-bg-elevated: #ffffff; // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
131
|
+
$dsn-color-neutral-bg-subtle: #ffffff; // Subtiele achtergrond
|
|
132
|
+
$dsn-color-neutral-bg-default: #ffffff; // Standaard achtergrond
|
|
133
|
+
$dsn-color-neutral-bg-hover: #ffffff; // Achtergrond in hover state
|
|
134
|
+
$dsn-color-neutral-bg-active: #ffffff; // Achtergrond in active state
|
|
135
|
+
$dsn-color-neutral-border-subtle: #000000; // Subtiele rand
|
|
136
|
+
$dsn-color-neutral-border-default: #000000; // Standaard rand
|
|
137
|
+
$dsn-color-neutral-border-hover: #000000; // Rand in hover state
|
|
138
|
+
$dsn-color-neutral-border-active: #000000; // Rand in active state
|
|
139
|
+
$dsn-color-neutral-color-default: #000000; // Standaard tekstkleur
|
|
140
|
+
$dsn-color-neutral-color-hover: #000000; // Tekst in hover state
|
|
141
|
+
$dsn-color-neutral-color-active: #000000; // Tekst in active state
|
|
142
|
+
$dsn-color-neutral-color-subtle: #000000; // Subtiele tekstkleur
|
|
143
|
+
$dsn-color-neutral-color-document: #000000; // Documenttekstkleur
|
|
144
|
+
$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
|
|
145
145
|
$dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15); // Scroll-affordance schaduw voor horizontaal scrollbare tabellen
|
|
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
|
|
173
173
|
$dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
|
|
174
|
+
$dsn-dot-badge-pulse-iteration-count: 3; // Aantal herhalingen van de pulse-animatie — 3 × 1500ms = 4500ms, bewust onder de 5 seconden van WCAG 2.2.2 Pauzeren, stoppen, verbergen
|
|
174
175
|
$dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
|
|
175
176
|
$dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
|
|
176
177
|
$dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
|
|
177
178
|
$dsn-file-media-size: 3rem; // Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview
|
|
178
179
|
$dsn-grid-gutter: calc(0.5rem * 1); // Compactere kolomafstand voor information-dense project types (8px = space.column.md)
|
|
179
180
|
$dsn-grid-row-gap: calc(0.5rem * 1); // Compactere rij-afstand voor information-dense project types (8px = space.column.md)
|
|
181
|
+
$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
182
|
$dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
|
|
181
183
|
$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
184
|
$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; //
|
|
185
|
+
$dsn-link-text-decoration-line: underline; // Tekstverfraaiing van de link
|
|
186
|
+
$dsn-link-text-decoration-thickness: auto; // Dikte van de onderstreping van de link
|
|
187
|
+
$dsn-link-text-underline-offset: 4px; // Onderstrepingsafstand van de link
|
|
188
|
+
$dsn-link-hover-text-decoration-line: none; // Tekstverfraaiing van de link op hover
|
|
187
189
|
$dsn-menu-link-current-indicator-width: 3px; // MenuLink-specifiek: breedte van de border-inline-start indicator
|
|
188
190
|
$dsn-modal-dialog-max-width: 40rem; // Maximale breedte van het dialoogvenster (640px)
|
|
189
191
|
$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 +195,72 @@ $dsn-password-input-padding-inline-end: 3rem; // Password input right padding -
|
|
|
193
195
|
$dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
|
|
194
196
|
$dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
|
|
195
197
|
$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)); //
|
|
198
|
+
$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
199
|
$dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
|
|
198
200
|
$dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
199
201
|
$dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
200
|
-
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); //
|
|
202
|
+
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Grootte van de binnenste cirkel wanneer aangevinkt — 33% van de radioknopgrootte
|
|
201
203
|
$dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
|
|
202
204
|
$dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
|
|
203
205
|
$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%; //
|
|
206
|
+
$dsn-status-badge-text-transform: none; // Teksttransformatie van de StatusBadge (standaard geen; thema's kunnen naar hoofdletters overschakelen)
|
|
207
|
+
$dsn-summary-list-key-basis: 30%; // Breedte van de sleutelkolom in de gridindeling
|
|
208
|
+
$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)
|
|
209
|
+
$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
210
|
$dsn-table-header-background-color: rgba(0, 0, 0, 0);
|
|
207
211
|
$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
|
|
212
|
+
$dsn-text-area-outline-offset: 0px; // Outline-afstand van het tekstveld
|
|
213
|
+
$dsn-text-area-resize: vertical; // Formaat-aanpassingsgedrag van het tekstveld (vertical, horizontal, both, none)
|
|
214
|
+
$dsn-text-area-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
215
|
+
$dsn-text-area-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
216
|
+
$dsn-text-area-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
217
|
+
$dsn-text-area-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
218
|
+
$dsn-text-area-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
219
|
+
$dsn-text-area-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
220
|
+
$dsn-text-area-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
221
|
+
$dsn-text-area-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
222
|
+
$dsn-text-area-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
223
|
+
$dsn-text-input-outline-offset: 0px; // Outline-afstand van het tekstinvoerveld
|
|
224
|
+
$dsn-text-input-focus-box-shadow-x: 0; // X-verschuiving van de box-shadow op focus
|
|
225
|
+
$dsn-text-input-focus-box-shadow-y: 0; // Y-verschuiving van de box-shadow op focus
|
|
226
|
+
$dsn-text-input-focus-box-shadow-blur: 0; // Vervaging van de box-shadow op focus
|
|
227
|
+
$dsn-text-input-hover-box-shadow-x: 0; // X-verschuiving van de box-shadow op hover
|
|
228
|
+
$dsn-text-input-hover-box-shadow-y: 0; // Y-verschuiving van de box-shadow op hover
|
|
229
|
+
$dsn-text-input-hover-box-shadow-blur: 0; // Vervaging van de box-shadow op hover
|
|
230
|
+
$dsn-text-input-invalid-box-shadow-x: 0; // X-verschuiving van de box-shadow bij ongeldige invoer
|
|
231
|
+
$dsn-text-input-invalid-box-shadow-y: 0; // Y-verschuiving van de box-shadow bij ongeldige invoer
|
|
232
|
+
$dsn-text-input-invalid-box-shadow-blur: 0; // Vervaging van de box-shadow bij ongeldige invoer
|
|
233
|
+
$dsn-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van koppen
|
|
234
|
+
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Font-familie van Heading 1
|
|
235
|
+
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Font-size van Heading 1
|
|
236
|
+
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 1
|
|
237
|
+
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Line-height van Heading 1
|
|
238
|
+
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 1
|
|
239
|
+
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Font-familie van Heading 2
|
|
240
|
+
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Font-size van Heading 2
|
|
241
|
+
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 2
|
|
242
|
+
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Line-height van Heading 2
|
|
243
|
+
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Onderste margin van Heading 2
|
|
244
|
+
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Font-familie van Heading 3
|
|
245
|
+
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Font-size van Heading 3
|
|
246
|
+
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 3
|
|
247
|
+
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Line-height van Heading 3
|
|
248
|
+
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 3
|
|
249
|
+
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Font-familie van Heading 4
|
|
250
|
+
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Font-size van Heading 4
|
|
251
|
+
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 4
|
|
252
|
+
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Line-height van Heading 4
|
|
253
|
+
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Onderste margin van Heading 4
|
|
254
|
+
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Font-familie van Heading 5
|
|
255
|
+
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Font-size van Heading 5
|
|
256
|
+
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 5
|
|
257
|
+
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Line-height van Heading 5
|
|
258
|
+
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 5
|
|
259
|
+
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Font-familie van Heading 6
|
|
260
|
+
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Font-size van Heading 6
|
|
261
|
+
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Font-gewicht van Heading 6
|
|
262
|
+
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Line-height van Heading 6
|
|
263
|
+
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Onderste margin van Heading 6
|
|
260
264
|
$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
265
|
$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
266
|
$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 +268,194 @@ $dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // F
|
|
|
264
268
|
$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
269
|
$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
270
|
$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-document; //
|
|
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; //
|
|
271
|
+
$dsn-form-control-font-family: $dsn-text-font-family-default; // Lettertype van form controls
|
|
272
|
+
$dsn-form-control-font-size: $dsn-text-font-size-md; // Lettergrootte van form controls
|
|
273
|
+
$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Lettergewicht van form controls
|
|
274
|
+
$dsn-form-control-line-height: $dsn-text-line-height-md; // Regelafstand van form controls
|
|
275
|
+
$dsn-form-control-padding-block-start: $dsn-space-block-lg; // Bovenste padding van form controls
|
|
276
|
+
$dsn-form-control-padding-block-end: $dsn-space-block-lg; // Onderste padding van form controls
|
|
277
|
+
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Linker padding van form controls
|
|
278
|
+
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Rechter padding van form controls
|
|
279
|
+
$dsn-form-control-border-width: $dsn-border-width-thin; // Randbreedte van form controls
|
|
280
|
+
$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Randbreedte van form controls in hover state
|
|
281
|
+
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Achtergrondkleur van form controls in hover state
|
|
282
|
+
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Randkleur van form controls in hover state
|
|
283
|
+
$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Randbreedte van form controls in focus state
|
|
284
|
+
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in focus state
|
|
285
|
+
$dsn-form-control-active-border-width: $dsn-border-width-medium; // Randbreedte van form controls in active state
|
|
286
|
+
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Achtergrondkleur van form controls in active state
|
|
287
|
+
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Randkleur van form controls in active state
|
|
288
|
+
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Randbreedte van form controls in invalid state
|
|
289
|
+
$dsn-form-control-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van form controls
|
|
290
|
+
$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Randkleur van form controls
|
|
291
|
+
$dsn-form-control-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls
|
|
292
|
+
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Tekstkleur van placeholder in form controls
|
|
293
|
+
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Accentkleur van form controls in disabled state
|
|
294
|
+
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in disabled state
|
|
295
|
+
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Randkleur van form controls in disabled state
|
|
296
|
+
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van form controls in disabled state
|
|
297
|
+
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van form controls in read-only state
|
|
298
|
+
$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Randkleur van form controls in read-only state
|
|
299
|
+
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Tekstkleur van form controls in read-only state
|
|
300
|
+
$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
297
301
|
$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; //
|
|
302
|
+
$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
303
|
+
$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
304
|
+
$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
305
|
+
$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
306
|
+
$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
307
|
+
$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
308
|
+
$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
309
|
+
$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
310
|
+
$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
311
|
+
$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
312
|
+
$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
313
|
+
$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
314
|
+
$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
315
|
+
$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
312
316
|
$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; //
|
|
317
|
+
$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
318
|
+
$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
319
|
+
$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
320
|
+
$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
321
|
+
$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
322
|
+
$dsn-color-positive-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
323
|
+
$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
324
|
+
$dsn-color-positive-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
325
|
+
$dsn-color-positive-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
326
|
+
$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
327
|
+
$dsn-color-positive-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
328
|
+
$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
329
|
+
$dsn-color-positive-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
330
|
+
$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
327
331
|
$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; //
|
|
332
|
+
$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
333
|
+
$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
334
|
+
$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
335
|
+
$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
336
|
+
$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
337
|
+
$dsn-color-negative-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
338
|
+
$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
339
|
+
$dsn-color-negative-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
340
|
+
$dsn-color-negative-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
341
|
+
$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
342
|
+
$dsn-color-negative-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
343
|
+
$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
344
|
+
$dsn-color-negative-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
345
|
+
$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
342
346
|
$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; //
|
|
347
|
+
$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
348
|
+
$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
349
|
+
$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
350
|
+
$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
351
|
+
$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
352
|
+
$dsn-color-warning-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
353
|
+
$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
354
|
+
$dsn-color-warning-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
355
|
+
$dsn-color-warning-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
356
|
+
$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
357
|
+
$dsn-color-warning-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
358
|
+
$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
359
|
+
$dsn-color-warning-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
360
|
+
$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; // Documentachtergrond
|
|
357
361
|
$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
|
|
362
|
+
$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtiele achtergrond
|
|
363
|
+
$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; // Standaard achtergrond
|
|
364
|
+
$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; // Achtergrond in hover state
|
|
365
|
+
$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; // Achtergrond in active state
|
|
366
|
+
$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; // Subtiele rand
|
|
367
|
+
$dsn-color-info-border-default: $dsn-color-neutral-border-default; // Standaard rand
|
|
368
|
+
$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; // Rand in hover state
|
|
369
|
+
$dsn-color-info-border-active: $dsn-color-neutral-border-active; // Rand in active state
|
|
370
|
+
$dsn-color-info-color-default: $dsn-color-neutral-color-default; // Standaard tekstkleur
|
|
371
|
+
$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; // Tekst in hover state
|
|
372
|
+
$dsn-color-info-color-active: $dsn-color-neutral-color-active; // Tekst in active state
|
|
373
|
+
$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; // Subtiele tekstkleur
|
|
374
|
+
$dsn-color-info-color-document: $dsn-color-neutral-color-document; // Documenttekstkleur
|
|
375
|
+
$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse documentachtergrond
|
|
376
|
+
$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
377
|
+
$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse subtiele achtergrond
|
|
378
|
+
$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse standaard achtergrond
|
|
379
|
+
$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse achtergrond in hover state
|
|
380
|
+
$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse achtergrond in active state
|
|
381
|
+
$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse subtiele rand
|
|
382
|
+
$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse standaard rand
|
|
383
|
+
$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse rand in hover state
|
|
384
|
+
$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse rand in active state
|
|
385
|
+
$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse standaard tekst
|
|
386
|
+
$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse tekst in hover state
|
|
387
|
+
$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse tekst in active state
|
|
388
|
+
$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse subtiele tekst
|
|
389
|
+
$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse documenttekst
|
|
386
390
|
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
387
391
|
$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; //
|
|
392
|
+
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border-radius (standaard vierkant; thema's kunnen afgeronde hoeken toevoegen)
|
|
393
|
+
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border-breedte (alleen linkerborder)
|
|
394
|
+
$dsn-alert-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
395
|
+
$dsn-alert-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
396
|
+
$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontale padding
|
|
397
|
+
$dsn-alert-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
394
398
|
$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; //
|
|
399
|
+
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Ruimte tussen breadcrumb-items
|
|
400
|
+
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font-size — sm (consistent met Link size small)
|
|
401
|
+
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font-gewicht
|
|
402
|
+
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line-height — sm (consistent met Link size small)
|
|
403
|
+
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Kleur van het huidige pagina-item
|
|
404
|
+
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimale aanraak-/klikhoogte
|
|
405
|
+
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Verticale padding om de min-block-size te bereiken
|
|
406
|
+
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // Geen horizontale padding op items
|
|
407
|
+
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Ruimte tussen icoon en linktekst
|
|
408
|
+
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Kleur van het scheidingsicoon
|
|
405
409
|
$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; //
|
|
410
|
+
$dsn-button-border-radius: $dsn-border-radius-md; // Button border-radius
|
|
411
|
+
$dsn-button-border-width: $dsn-border-width-thin; // Button border-breedte
|
|
412
|
+
$dsn-button-font-family: $dsn-text-font-family-default; // Button font-familie
|
|
413
|
+
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font-gewicht
|
|
414
|
+
$dsn-button-line-height: $dsn-text-line-height-md; // Button line-height
|
|
415
|
+
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Minimale blokhoogte van de button (WCAG 2.5.5 aanraakdoel)
|
|
416
|
+
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale inlinebreedte van de button (WCAG 2.5.5 aanraakdoel)
|
|
417
|
+
$dsn-button-default-background-color: $dsn-color-transparent; // Achtergrond van de default button
|
|
418
|
+
$dsn-button-default-negative-background-color: $dsn-color-transparent; // Achtergrond van de default negative button
|
|
419
|
+
$dsn-button-default-positive-background-color: $dsn-color-transparent; // Achtergrond van de default positive button
|
|
420
|
+
$dsn-button-strong-border-color: $dsn-color-transparent; // Border van de strong button
|
|
421
|
+
$dsn-button-strong-active-border-color: $dsn-color-transparent; // Border van de strong button op active
|
|
422
|
+
$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Border van de strong button op hover
|
|
423
|
+
$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Border van de strong negative button
|
|
424
|
+
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Border van de strong negative button op active
|
|
425
|
+
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Border van de strong negative button op hover
|
|
426
|
+
$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Border van de strong positive button
|
|
427
|
+
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Border van de strong positive button op active
|
|
428
|
+
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Border van de strong positive button op hover
|
|
429
|
+
$dsn-button-subtle-background-color: $dsn-color-transparent; // Achtergrond van de subtle button
|
|
430
|
+
$dsn-button-subtle-border-color: $dsn-color-transparent; // Border van de subtle button
|
|
431
|
+
$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Border van de subtle button op active
|
|
432
|
+
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Border van de subtle button op hover
|
|
433
|
+
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Achtergrond van de subtle negative button
|
|
434
|
+
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Border van de subtle negative button
|
|
435
|
+
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Border van de subtle negative button op active
|
|
436
|
+
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Border van de subtle negative button op hover
|
|
437
|
+
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Achtergrond van de subtle positive button
|
|
438
|
+
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Border van de subtle positive button
|
|
439
|
+
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Border van de subtle positive button op active
|
|
440
|
+
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Border van de subtle positive button op hover
|
|
441
|
+
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Achtergrond van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
442
|
+
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Tekst-/icoonkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
443
|
+
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Borderkleur van de disabled button — neutrale schaal, variant-onafhankelijk
|
|
444
|
+
$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default button
|
|
445
|
+
$dsn-button-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default button
|
|
446
|
+
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Padding van de icon-only default button
|
|
447
|
+
$dsn-button-size-default-padding-block: $dsn-space-block-md; // Verticale padding van de default button
|
|
448
|
+
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de default button
|
|
449
|
+
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large button
|
|
450
|
+
$dsn-button-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large button
|
|
451
|
+
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Padding van de icon-only large button
|
|
452
|
+
$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Verticale padding van de large button
|
|
453
|
+
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Horizontale padding van de large button
|
|
454
|
+
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small button
|
|
455
|
+
$dsn-button-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small button
|
|
456
|
+
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Padding van de icon-only small button
|
|
457
|
+
$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Verticale padding van de small button
|
|
458
|
+
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de small button
|
|
455
459
|
$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
|
|
456
460
|
$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
|
|
457
461
|
$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
|
|
@@ -470,13 +474,13 @@ $dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de ca
|
|
|
470
474
|
$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
|
|
471
475
|
$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
|
|
472
476
|
$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; //
|
|
477
|
+
$dsn-checkbox-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
478
|
+
$dsn-checkbox-group-gap: $dsn-space-block-sm; // Ruimte tussen de checkbox-opties in de groep
|
|
479
|
+
$dsn-checkbox-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
480
|
+
$dsn-checkbox-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
477
481
|
$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
|
|
478
482
|
$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; //
|
|
483
|
+
$dsn-checkbox-border-radius: $dsn-border-radius-square; // Vierkante hoeken voor de checkbox
|
|
480
484
|
$dsn-checkbox-border-width: $dsn-border-width-thin;
|
|
481
485
|
$dsn-checkbox-active-border-width: $dsn-border-width-medium;
|
|
482
486
|
$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
|
|
@@ -502,13 +506,13 @@ $dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month a
|
|
|
502
506
|
$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
|
|
503
507
|
$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
|
|
504
508
|
$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; //
|
|
509
|
+
$dsn-details-row-gap: $dsn-space-row-md; // Verticale ruimte tussen summary en inhoud
|
|
510
|
+
$dsn-details-summary-gap: $dsn-space-text-sm; // Ruimte tussen het chevron-icoon en de labeltekst
|
|
511
|
+
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Kleur van de linkerborder voor visuele groepering
|
|
512
|
+
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder
|
|
513
|
+
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Linker padding — lijnt de inhoud uit met de labeltekst
|
|
514
|
+
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Rechter padding
|
|
515
|
+
$dsn-details-content-padding-block: $dsn-space-block-xl; // Boven- en onderpadding
|
|
512
516
|
$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
|
|
513
517
|
$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
514
518
|
$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
|
|
@@ -527,9 +531,9 @@ $dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding va
|
|
|
527
531
|
$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
528
532
|
$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
529
533
|
$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; //
|
|
534
|
+
$dsn-file-input-column-gap: $dsn-space-text-lg; // Ruimte tussen de file-selector-button en de bestandsnaamtekst
|
|
535
|
+
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
536
|
+
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het bestandsinvoerveld (WCAG aanraakdoel)
|
|
533
537
|
$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
|
|
534
538
|
$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
|
|
535
539
|
$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
|
|
@@ -550,59 +554,67 @@ $dsn-file-meta-font-size: $dsn-text-font-size-md;
|
|
|
550
554
|
$dsn-file-media-border-radius: $dsn-border-radius-sm;
|
|
551
555
|
$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
|
|
552
556
|
$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
|
|
557
|
+
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de formulierveldbeschrijving
|
|
558
|
+
$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Font-familie van de formulierveldbeschrijving
|
|
559
|
+
$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Font-size van de formulierveldbeschrijving
|
|
560
|
+
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de formulierveldbeschrijving
|
|
561
|
+
$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Line-height van de formulierveldbeschrijving
|
|
562
|
+
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Ruimte onder de beschrijving voor het formulierbesturingselement
|
|
563
|
+
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Font-familie van de foutmelding
|
|
564
|
+
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Font-size van de foutmelding
|
|
565
|
+
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de foutmelding
|
|
566
|
+
$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Ruimte tussen icoon en foutmeldingstekst
|
|
567
|
+
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Line-height van de foutmelding
|
|
568
|
+
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Ruimte onder de foutmelding voor het formulierbesturingselement
|
|
569
|
+
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Tekstkleur van het labelachtervoegsel
|
|
570
|
+
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Font-familie van het labelachtervoegsel
|
|
571
|
+
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Font-size van het labelachtervoegsel
|
|
572
|
+
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Font-gewicht van het labelachtervoegsel
|
|
573
|
+
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Line-height van het labelachtervoegsel
|
|
574
|
+
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Ruimte tussen de labeltekst en het achtervoegsel
|
|
575
|
+
$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Tekstkleur van het formulierveldlabel
|
|
576
|
+
$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Font-familie van het formulierveldlabel
|
|
577
|
+
$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Font-size van het formulierveldlabel
|
|
578
|
+
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van het formulierveldlabel
|
|
579
|
+
$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Line-height van het formulierveldlabel
|
|
580
|
+
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Ruimte onder het label voor het formulierbesturingselement (wanneer geen beschrijving volgt)
|
|
581
|
+
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Ruimte onder het label wanneer een beschrijving volgt
|
|
582
|
+
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de veldstatus (subtiel voor niet-kritieke informatie)
|
|
583
|
+
$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Font-familie van de veldstatus
|
|
584
|
+
$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Font-size van de veldstatus
|
|
585
|
+
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de veldstatus
|
|
586
|
+
$dsn-form-field-status-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst (positive en warning varianten)
|
|
587
|
+
$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Line-height van de veldstatus
|
|
588
|
+
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Ruimte boven het statusbericht na het formulierbesturingselement
|
|
589
|
+
$dsn-form-field-margin-block-end: $dsn-space-none; // Onderste margin van de formulierveldcontainer
|
|
590
|
+
$dsn-form-field-margin-block-start: $dsn-space-none; // Bovenste margin van de formulierveldcontainer
|
|
591
|
+
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder voor ongeldige formuliervelden
|
|
592
|
+
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Linker padding voor ongeldige formuliervelden (om de border op te vangen)
|
|
590
593
|
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
591
594
|
$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
595
|
$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
|
|
596
|
+
$dsn-icon-list-color: $dsn-color-neutral-color-document; // Icon list text color
|
|
597
|
+
$dsn-icon-list-font-family: $dsn-text-font-family-default; // Icon list font family
|
|
598
|
+
$dsn-icon-list-font-size: $dsn-text-font-size-md; // Icon list font size
|
|
599
|
+
$dsn-icon-list-font-weight: $dsn-text-font-weight-default; // Icon list font weight
|
|
600
|
+
$dsn-icon-list-line-height: $dsn-text-line-height-md; // Icon list line height
|
|
601
|
+
$dsn-icon-list-max-inline-size: $dsn-text-max-inline-size; // Icon list max width for readability
|
|
602
|
+
$dsn-icon-list-gap: $dsn-space-row-sm; // Space between list items
|
|
603
|
+
$dsn-icon-list-margin-block-end: $dsn-space-row-lg; // Icon list bottom margin
|
|
604
|
+
$dsn-icon-list-icon-gap: $dsn-space-text-md; // Space between icon and text
|
|
593
605
|
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
594
606
|
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
595
607
|
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
596
608
|
$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
|
|
597
609
|
$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; //
|
|
610
|
+
$dsn-link-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de link
|
|
611
|
+
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Tekstkleur van de link op disabled
|
|
612
|
+
$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Font-size van de default link
|
|
613
|
+
$dsn-link-size-default-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de default link
|
|
614
|
+
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Font-size van de large link
|
|
615
|
+
$dsn-link-size-large-gap: $dsn-space-text-md; // Ruimte tussen icoon en tekst van de large link
|
|
616
|
+
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Font-size van de small link
|
|
617
|
+
$dsn-link-size-small-gap: $dsn-space-text-sm; // Ruimte tussen icoon en tekst van de small link
|
|
606
618
|
$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
|
|
607
619
|
$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
|
|
608
620
|
$dsn-menu-item-font-weight: $dsn-text-font-weight-default; // Gedeeld: letterdikte — regular voor navigatie-items
|
|
@@ -634,16 +646,16 @@ $dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padd
|
|
|
634
646
|
$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
635
647
|
$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
636
648
|
$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; //
|
|
649
|
+
$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder van de Note
|
|
650
|
+
$dsn-note-column-gap: $dsn-space-inline-md; // Ruimte tussen icoon en inhoud
|
|
651
|
+
$dsn-note-padding-block: $dsn-space-block-xl; // Verticale padding
|
|
652
|
+
$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde
|
|
653
|
+
$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin (na de border)
|
|
654
|
+
$dsn-note-row-gap: $dsn-space-row-md; // Ruimte tussen koptekst en inhoud
|
|
655
|
+
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant (standaard)
|
|
656
|
+
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Kleur van de linkerborder voor neutral variant (standaard)
|
|
657
|
+
$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Tekstkleur voor neutral variant (standaard)
|
|
658
|
+
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icoonkleur voor neutral variant (standaard)
|
|
647
659
|
$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
|
|
648
660
|
$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
|
|
649
661
|
$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
|
|
@@ -657,16 +669,16 @@ $dsn-option-label-font-family: $dsn-text-font-family-default;
|
|
|
657
669
|
$dsn-option-label-font-size: $dsn-text-font-size-md;
|
|
658
670
|
$dsn-option-label-font-weight: $dsn-text-font-weight-default;
|
|
659
671
|
$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; //
|
|
672
|
+
$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Tekstkleur van de geordende lijst
|
|
673
|
+
$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Font-familie van de geordende lijst
|
|
674
|
+
$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Font-size van de geordende lijst
|
|
675
|
+
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de geordende lijst
|
|
676
|
+
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de geordende lijst voor leesbaarheid
|
|
677
|
+
$dsn-ordered-list-gap: $dsn-space-row-sm; // Ruimte tussen lijstitems
|
|
678
|
+
$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Line-height van de geordende lijst
|
|
679
|
+
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Onderste margin van de geordende lijst
|
|
680
|
+
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Kleur van het nummermarkeerteken
|
|
681
|
+
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Inspringing aan de linkerkant van de geordende lijst
|
|
670
682
|
$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
683
|
$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
684
|
$dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
|
|
@@ -687,19 +699,19 @@ $dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizonta
|
|
|
687
699
|
$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
700
|
$dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
|
|
689
701
|
$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; //
|
|
702
|
+
$dsn-paragraph-color: $dsn-color-neutral-color-document; // Tekstkleur van de alinea
|
|
703
|
+
$dsn-paragraph-font-family: $dsn-text-font-family-default; // Font-familie van de alinea
|
|
704
|
+
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Font-gewicht van de alinea
|
|
705
|
+
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Maximale breedte van de alinea voor leesbaarheid
|
|
706
|
+
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Font-size van de standaard alinea
|
|
707
|
+
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Line-height van de standaard alinea
|
|
708
|
+
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Onderste margin van de standaard alinea
|
|
709
|
+
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Font-size van de inleidende alinea
|
|
710
|
+
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Line-height van de inleidende alinea
|
|
711
|
+
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Onderste margin van de inleidende alinea
|
|
712
|
+
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Font-size van de kleine tekst alinea
|
|
713
|
+
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Line-height van de kleine tekst alinea
|
|
714
|
+
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Onderste margin van de kleine tekst alinea
|
|
703
715
|
$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
|
|
704
716
|
$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
|
|
705
717
|
$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
|
|
@@ -718,20 +730,20 @@ $dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding v
|
|
|
718
730
|
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
719
731
|
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
720
732
|
$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; //
|
|
733
|
+
$dsn-pre-heading-color: $dsn-color-neutral-color-document; // Tekstkleur van de pre-heading
|
|
734
|
+
$dsn-pre-heading-font-family: $dsn-text-font-family-default; // Font-familie van de pre-heading
|
|
735
|
+
$dsn-pre-heading-font-size: $dsn-text-font-size-md; // Font-size van de pre-heading (gelijk aan de bodytekst)
|
|
736
|
+
$dsn-pre-heading-font-weight: $dsn-text-font-weight-bold; // Font-gewicht van de pre-heading (vet om te onderscheiden van de kopregel)
|
|
737
|
+
$dsn-pre-heading-line-height: $dsn-text-line-height-md; // Line-height van de pre-heading
|
|
738
|
+
$dsn-pre-heading-margin-block-end: $dsn-space-row-xs; // Ruimte tussen de pre-heading en de koptekst
|
|
739
|
+
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Achtergrondtrack
|
|
728
740
|
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
729
741
|
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
730
742
|
$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; //
|
|
743
|
+
$dsn-radio-group-border-width: $dsn-border-width-none; // Standaard geen border op de fieldset
|
|
744
|
+
$dsn-radio-group-gap: $dsn-space-block-sm; // Ruimte tussen de radio-opties in de groep
|
|
745
|
+
$dsn-radio-group-margin: $dsn-space-none; // Standaard geen margin op de fieldset
|
|
746
|
+
$dsn-radio-group-padding: $dsn-space-none; // Standaard geen padding op de fieldset
|
|
735
747
|
$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
|
|
736
748
|
$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
737
749
|
$dsn-radio-border-width: $dsn-border-width-thin;
|
|
@@ -743,9 +755,9 @@ $dsn-radio-invalid-border-width: $dsn-border-width-medium;
|
|
|
743
755
|
$dsn-radio-checked-active-border-width: $dsn-border-width-medium;
|
|
744
756
|
$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
|
|
745
757
|
$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; //
|
|
758
|
+
$dsn-search-input-icon-gap: $dsn-space-text-md; // Ruimte tussen het zoekicoon en de invoertekst
|
|
759
|
+
$dsn-select-icon-gap: $dsn-space-text-md; // Ruimte tussen het chevron-icoon en de selectietekst
|
|
760
|
+
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Afstand van de inline-end border tot het chevron-icoon (8px)
|
|
749
761
|
$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
762
|
$dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
|
|
751
763
|
$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
|
|
@@ -755,25 +767,32 @@ $dsn-skip-link-offset-inline-start: $dsn-space-inline-md; // Afstand van de link
|
|
|
755
767
|
$dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie
|
|
756
768
|
$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
|
|
757
769
|
$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
|
|
770
|
+
$dsn-status-badge-border-color: $dsn-color-transparent; // Borderkleur van de StatusBadge (standaard transparant; zichtbaar in forced-colors / High Contrast-modus)
|
|
771
|
+
$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Border-radius van de StatusBadge
|
|
772
|
+
$dsn-status-badge-border-width: $dsn-border-width-thin; // Border-breedte van de StatusBadge
|
|
773
|
+
$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Font-size van de StatusBadge
|
|
774
|
+
$dsn-status-badge-gap: $dsn-space-text-sm; // Ruimte tussen icoon en label
|
|
775
|
+
$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Line-height van de StatusBadge
|
|
776
|
+
$dsn-status-badge-padding-block: $dsn-space-block-xs; // Verticale padding
|
|
777
|
+
$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontale padding
|
|
778
|
+
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Achtergrondkleur voor neutral variant
|
|
779
|
+
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Tekstkleur voor neutral variant
|
|
780
|
+
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Kleur van de rij-scheidingsborder
|
|
781
|
+
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Breedte van de rij-scheidingsborder
|
|
782
|
+
$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen kolommen in de gridindeling
|
|
783
|
+
$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
|
|
784
|
+
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Tekstkleur van de sleutelcel
|
|
785
|
+
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Vet gewicht onderscheidt de sleutel visueel van de waarde
|
|
786
|
+
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Tekstkleur van de waardecel
|
|
787
|
+
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Ruimte tussen meerdere actielinks in één rij
|
|
788
|
+
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra ruimte boven de actiescel in de gestapelde (mobiele) indeling
|
|
789
|
+
$dsn-table-of-contents-border-inline-start-width: $dsn-border-width-medium; // Breedte van de linkerborder (framed appearance)
|
|
790
|
+
$dsn-table-of-contents-padding-block: $dsn-space-block-xl; // Verticale padding (framed appearance)
|
|
791
|
+
$dsn-table-of-contents-padding-inline-start: $dsn-space-inline-xl; // Horizontale padding aan het begin, na de border (framed appearance)
|
|
792
|
+
$dsn-table-of-contents-padding-inline-end: $dsn-space-inline-xl; // Horizontale padding aan het einde (framed appearance)
|
|
793
|
+
$dsn-table-of-contents-heading-gap: $dsn-space-row-xl; // Ruimte tussen de heading en de lijst met ankerlinks
|
|
794
|
+
$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
|
|
795
|
+
$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
796
|
$dsn-table-caption-color: $dsn-color-neutral-color-document;
|
|
778
797
|
$dsn-table-caption-font-family: $dsn-heading-font-family;
|
|
779
798
|
$dsn-table-caption-font-size: $dsn-text-font-size-xl;
|
|
@@ -795,21 +814,21 @@ $dsn-table-footer-color: $dsn-color-neutral-color-document;
|
|
|
795
814
|
$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
|
|
796
815
|
$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
816
|
$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; //
|
|
817
|
+
$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstveld
|
|
818
|
+
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstveld
|
|
819
|
+
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstveld
|
|
820
|
+
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
821
|
+
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
822
|
+
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
823
|
+
$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Border-radius van het tekstinvoerveld
|
|
824
|
+
$dsn-text-input-column-gap: $dsn-space-text-lg; // Ruimte tussen tekst en iconen (voor toekomstige icoonondersteuning)
|
|
825
|
+
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Minimale hoogte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
826
|
+
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Minimale breedte van het tekstinvoerveld (WCAG aanraakdoel)
|
|
827
|
+
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op focus (creëert een dikkere border)
|
|
828
|
+
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow op hover (creëert een dikkere border)
|
|
829
|
+
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Spreiding van de box-shadow bij ongeldige invoer (creëert een dikkere border)
|
|
830
|
+
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Afstand van de inline-end border tot de klokknop (4px)
|
|
831
|
+
$dsn-time-input-icon-gap: $dsn-space-text-md; // Ruimte tussen de klokknop en de invoertekst
|
|
813
832
|
$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
|
|
814
833
|
$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
|
|
815
834
|
$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
|
|
@@ -819,94 +838,94 @@ $dsn-unordered-list-gap: $dsn-space-row-sm; // Space between list items
|
|
|
819
838
|
$dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list line height
|
|
820
839
|
$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
|
|
821
840
|
$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; //
|
|
841
|
+
$dsn-heading-level-1-color: $dsn-heading-color; // Tekstkleur van Heading 1
|
|
842
|
+
$dsn-heading-level-2-color: $dsn-heading-color; // Tekstkleur van Heading 2
|
|
843
|
+
$dsn-heading-level-3-color: $dsn-heading-color; // Tekstkleur van Heading 3
|
|
844
|
+
$dsn-heading-level-4-color: $dsn-heading-color; // Tekstkleur van Heading 4
|
|
845
|
+
$dsn-heading-level-5-color: $dsn-heading-color; // Tekstkleur van Heading 5
|
|
846
|
+
$dsn-heading-level-6-color: $dsn-heading-color; // Tekstkleur van Heading 6
|
|
847
|
+
$dsn-form-control-hover-color: $dsn-form-control-color; // Tekstkleur van form controls in hover state
|
|
848
|
+
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Achtergrondkleur van form controls in focus state
|
|
849
|
+
$dsn-form-control-focus-color: $dsn-form-control-color; // Tekstkleur van form controls in focus state
|
|
850
|
+
$dsn-form-control-active-color: $dsn-form-control-color; // Tekstkleur van form controls in active state
|
|
851
|
+
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur van form controls in invalid state
|
|
852
|
+
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Randkleur van form controls in invalid state
|
|
853
|
+
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Tekstkleur van form controls in invalid state
|
|
854
|
+
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
836
855
|
$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; //
|
|
856
|
+
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
857
|
+
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
858
|
+
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
859
|
+
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
860
|
+
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
861
|
+
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
862
|
+
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
863
|
+
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
864
|
+
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
865
|
+
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
866
|
+
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
867
|
+
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
868
|
+
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
869
|
+
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
851
870
|
$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; //
|
|
871
|
+
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
872
|
+
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
873
|
+
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
874
|
+
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
875
|
+
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
876
|
+
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
877
|
+
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
878
|
+
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
879
|
+
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
880
|
+
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
881
|
+
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
882
|
+
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
883
|
+
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
884
|
+
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
866
885
|
$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; //
|
|
886
|
+
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
887
|
+
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
888
|
+
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
889
|
+
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
890
|
+
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
891
|
+
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
892
|
+
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
893
|
+
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
894
|
+
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
895
|
+
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
896
|
+
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
897
|
+
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
898
|
+
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
899
|
+
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Documentachtergrond
|
|
881
900
|
$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
|
|
901
|
+
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtiele achtergrond
|
|
902
|
+
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Standaard achtergrond
|
|
903
|
+
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Achtergrond in hover state
|
|
904
|
+
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Achtergrond in active state
|
|
905
|
+
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtiele rand
|
|
906
|
+
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Standaard rand
|
|
907
|
+
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Rand in hover state
|
|
908
|
+
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Rand in active state
|
|
909
|
+
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Standaard tekstkleur
|
|
910
|
+
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Tekst in hover state
|
|
911
|
+
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Tekst in active state
|
|
912
|
+
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtiele tekstkleur
|
|
913
|
+
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Documenttekstkleur
|
|
914
|
+
$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse documentachtergrond
|
|
896
915
|
$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
|
|
916
|
+
$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse subtiele achtergrond
|
|
917
|
+
$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse standaard achtergrond
|
|
918
|
+
$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse achtergrond in hover state
|
|
919
|
+
$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse achtergrond in active state
|
|
920
|
+
$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse subtiele rand
|
|
921
|
+
$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse standaard rand
|
|
922
|
+
$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse rand in hover state
|
|
923
|
+
$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse rand in active state
|
|
924
|
+
$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse standaard tekst
|
|
925
|
+
$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse tekst in hover state
|
|
926
|
+
$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse tekst in active state
|
|
927
|
+
$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse subtiele tekst
|
|
928
|
+
$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse documenttekst
|
|
910
929
|
$dsn-color-positive-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
911
930
|
$dsn-color-positive-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
912
931
|
$dsn-color-positive-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
@@ -967,66 +986,66 @@ $dsn-color-info-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
|
967
986
|
$dsn-color-info-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
968
987
|
$dsn-color-info-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
969
988
|
$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; //
|
|
989
|
+
$dsn-alert-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Alert (ook gebruikt als breedte van de gridkolom)
|
|
990
|
+
$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant (standaard)
|
|
991
|
+
$dsn-alert-info-border-color: $dsn-color-info-border-default; // Borderkleur voor info variant (standaard)
|
|
992
|
+
$dsn-alert-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant (standaard)
|
|
993
|
+
$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant (standaard)
|
|
994
|
+
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
995
|
+
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Borderkleur voor negative variant
|
|
996
|
+
$dsn-alert-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
997
|
+
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
998
|
+
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
999
|
+
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Borderkleur voor positive variant
|
|
1000
|
+
$dsn-alert-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
1001
|
+
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
1002
|
+
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1003
|
+
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Borderkleur voor warning variant
|
|
1004
|
+
$dsn-alert-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
1005
|
+
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
1006
|
+
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Grootte van het scheidingsicoon — sm (kleiner dan terug-icoon)
|
|
1007
|
+
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Grootte van het terug-icoon — sm (consistent met Link size small)
|
|
1008
|
+
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Border van de default negative button
|
|
1009
|
+
$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de default negative button
|
|
1010
|
+
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de default negative button op active
|
|
1011
|
+
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Border van de default negative button op active
|
|
1012
|
+
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de default negative button op active
|
|
1013
|
+
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de default negative button op hover
|
|
1014
|
+
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Border van de default negative button op hover
|
|
1015
|
+
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de default negative button op hover
|
|
1016
|
+
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Border van de default positive button
|
|
1017
|
+
$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de default positive button
|
|
1018
|
+
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de default positive button op active
|
|
1019
|
+
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Border van de default positive button op active
|
|
1020
|
+
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de default positive button op active
|
|
1021
|
+
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de default positive button op hover
|
|
1022
|
+
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Border van de default positive button op hover
|
|
1023
|
+
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de default positive button op hover
|
|
1024
|
+
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Tekst-/icoonkleur van de subtle negative button
|
|
1025
|
+
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Achtergrond van de subtle negative button op active
|
|
1026
|
+
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Tekst-/icoonkleur van de subtle negative button op active
|
|
1027
|
+
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Achtergrond van de subtle negative button op hover
|
|
1028
|
+
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Tekst-/icoonkleur van de subtle negative button op hover
|
|
1029
|
+
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Tekst-/icoonkleur van de subtle positive button
|
|
1030
|
+
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Achtergrond van de subtle positive button op active
|
|
1031
|
+
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Tekst-/icoonkleur van de subtle positive button op active
|
|
1032
|
+
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Achtergrond van de subtle positive button op hover
|
|
1033
|
+
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Tekst-/icoonkleur van de subtle positive button op hover
|
|
1034
|
+
$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default button
|
|
1035
|
+
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large button
|
|
1036
|
+
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small button
|
|
1018
1037
|
$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; //
|
|
1038
|
+
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1039
|
+
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1040
|
+
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1041
|
+
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1042
|
+
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1043
|
+
$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
1044
|
$dsn-checkbox-background-color: $dsn-form-control-background-color;
|
|
1026
1045
|
$dsn-checkbox-border-color: $dsn-form-control-border-color;
|
|
1027
1046
|
$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
|
|
1028
1047
|
$dsn-checkbox-active-border-color: $dsn-form-control-active-border-color;
|
|
1029
|
-
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
1048
|
+
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van het vinkje
|
|
1030
1049
|
$dsn-checkbox-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1031
1050
|
$dsn-checkbox-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1032
1051
|
$dsn-checkbox-focus-border-color: $dsn-form-control-focus-border-color;
|
|
@@ -1038,80 +1057,82 @@ $dsn-checkbox-checked-disabled-border-color: $dsn-form-control-disabled-border-c
|
|
|
1038
1057
|
$dsn-checkbox-checked-disabled-color: $dsn-form-control-disabled-color;
|
|
1039
1058
|
$dsn-checkbox-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1040
1059
|
$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1041
|
-
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; //
|
|
1060
|
+
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Kleur van het indeterminate-icoon (minteken)
|
|
1042
1061
|
$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1043
1062
|
$dsn-checkbox-indeterminate-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1044
1063
|
$dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1045
1064
|
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1046
1065
|
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1047
1066
|
$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; //
|
|
1067
|
+
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtiele tekstkleur voor de bestandsnaam / 'Geen bestand gekozen'-tekst
|
|
1068
|
+
$dsn-file-input-font-family: $dsn-form-control-font-family; // Font-familie van het bestandsinvoerveld
|
|
1069
|
+
$dsn-file-input-font-size: $dsn-form-control-font-size; // Font-size van het bestandsinvoerveld
|
|
1070
|
+
$dsn-file-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het bestandsinvoerveld
|
|
1071
|
+
$dsn-file-input-line-height: $dsn-form-control-line-height; // Line-height van het bestandsinvoerveld
|
|
1072
|
+
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Gedempte tekstkleur voor de disabled staat
|
|
1054
1073
|
$dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur in de error state — zelfde schaal als FormFieldset bij invalid
|
|
1055
1074
|
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1056
1075
|
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1057
1076
|
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1058
1077
|
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1059
1078
|
$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; //
|
|
1079
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Grootte van het chevron-icoon
|
|
1061
1080
|
$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
|
|
1081
|
+
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Tekstkleur van de foutmelding (negative sentiment)
|
|
1082
|
+
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Icoongrootte van de foutmelding
|
|
1083
|
+
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icoongrootte voor positive en warning varianten
|
|
1084
|
+
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
1085
|
+
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
1086
|
+
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor ongeldige formuliervelden
|
|
1087
|
+
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero
|
|
1069
1088
|
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
1070
|
-
$dsn-
|
|
1071
|
-
$dsn-
|
|
1072
|
-
$dsn-link-
|
|
1073
|
-
$dsn-link-size-
|
|
1089
|
+
$dsn-icon-list-icon-color: $dsn-color-accent-1-color-default; // Default icon color, same as the UnorderedList marker color
|
|
1090
|
+
$dsn-icon-list-icon-size: $dsn-icon-size-md; // Icon size equal to one line height, scales with the fluid type scale
|
|
1091
|
+
$dsn-link-icon-size: $dsn-icon-size-md; // Icoongrootte van de link
|
|
1092
|
+
$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Icoongrootte van de default link
|
|
1093
|
+
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Icoongrootte van de large link
|
|
1094
|
+
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Icoongrootte van de small link
|
|
1074
1095
|
$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
|
|
1075
1096
|
$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
|
|
1097
|
+
$dsn-note-icon-size: $dsn-icon-size-xl; // Icoongrootte van de Note (ook gebruikt als breedte van de gridkolom)
|
|
1098
|
+
$dsn-note-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1099
|
+
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Kleur van de linkerborder voor info variant
|
|
1100
|
+
$dsn-note-info-color: $dsn-color-info-color-document; // Tekstkleur voor info variant
|
|
1101
|
+
$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icoonkleur voor info variant
|
|
1102
|
+
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
1103
|
+
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Kleur van de linkerborder voor negative variant
|
|
1104
|
+
$dsn-note-negative-color: $dsn-color-negative-color-document; // Tekstkleur voor negative variant
|
|
1105
|
+
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icoonkleur voor negative variant
|
|
1106
|
+
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
1107
|
+
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Kleur van de linkerborder voor positive variant
|
|
1108
|
+
$dsn-note-positive-color: $dsn-color-positive-color-document; // Tekstkleur voor positive variant
|
|
1109
|
+
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icoonkleur voor positive variant
|
|
1110
|
+
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1111
|
+
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Kleur van de linkerborder voor warning variant
|
|
1112
|
+
$dsn-note-warning-color: $dsn-color-warning-color-document; // Tekstkleur voor warning variant
|
|
1113
|
+
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icoonkleur voor warning variant
|
|
1114
|
+
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant
|
|
1094
1115
|
$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
|
|
1095
1116
|
$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
|
|
1117
|
+
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter
|
|
1118
|
+
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand
|
|
1119
|
+
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand
|
|
1120
|
+
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond
|
|
1121
|
+
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel
|
|
1101
1122
|
$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; //
|
|
1123
|
+
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Tekstkleur van de legend (hergebruikt van het formulierveldlabel)
|
|
1124
|
+
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font-familie van de legend (hergebruikt van het formulierveldlabel)
|
|
1125
|
+
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font-size van de legend (hergebruikt van het formulierveldlabel)
|
|
1126
|
+
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font-gewicht van de legend (hergebruikt van het formulierveldlabel)
|
|
1127
|
+
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line-height van de legend (hergebruikt van het formulierveldlabel)
|
|
1128
|
+
$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
1129
|
$dsn-radio-background-color: $dsn-form-control-background-color;
|
|
1109
1130
|
$dsn-radio-border-color: $dsn-form-control-border-color;
|
|
1110
|
-
$dsn-radio-color: $dsn-form-control-border-color; //
|
|
1131
|
+
$dsn-radio-color: $dsn-form-control-border-color; // Kleur van de binnenste cirkel in de standaard staat
|
|
1111
1132
|
$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
|
|
1112
1133
|
$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
|
|
1113
1134
|
$dsn-radio-active-color: $dsn-form-control-active-border-color;
|
|
1114
|
-
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; //
|
|
1135
|
+
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Kleur van de binnenste cirkel wanneer aangevinkt
|
|
1115
1136
|
$dsn-radio-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1116
1137
|
$dsn-radio-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1117
1138
|
$dsn-radio-disabled-color: $dsn-form-control-disabled-border-color;
|
|
@@ -1123,68 +1144,70 @@ $dsn-radio-hover-color: $dsn-form-control-hover-border-color;
|
|
|
1123
1144
|
$dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1124
1145
|
$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1125
1146
|
$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1126
|
-
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; //
|
|
1147
|
+
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Kleur van de binnenste cirkel — donkere tekstkleur voor contrast op de disabled accentachtergrond
|
|
1127
1148
|
$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1128
1149
|
$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; //
|
|
1150
|
+
$dsn-search-input-icon-size: $dsn-icon-size-md; // Icoongrootte van het zoekinvoerveld
|
|
1151
|
+
$dsn-select-icon-size: $dsn-icon-size-md; // Grootte van het chevron-down icoon — gelijk aan de medium icoongrootte
|
|
1131
1152
|
$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-
|
|
1153
|
+
$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Icoongrootte van de StatusBadge
|
|
1154
|
+
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Achtergrondkleur voor info variant
|
|
1155
|
+
$dsn-status-badge-info-color: $dsn-color-info-color-default; // Tekstkleur voor info variant
|
|
1156
|
+
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Achtergrondkleur voor negative variant
|
|
1157
|
+
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Tekstkleur voor negative variant
|
|
1158
|
+
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Achtergrondkleur voor positive variant
|
|
1159
|
+
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Tekstkleur voor positive variant
|
|
1160
|
+
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Achtergrondkleur voor warning variant
|
|
1161
|
+
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Tekstkleur voor warning variant
|
|
1162
|
+
$dsn-table-of-contents-border-inline-start-color: $dsn-color-accent-1-border-default; // Kleur van de linkerborder (framed appearance)
|
|
1163
|
+
$dsn-table-of-contents-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur (framed appearance)
|
|
1164
|
+
$dsn-text-area-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstveld
|
|
1165
|
+
$dsn-text-area-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstveld
|
|
1166
|
+
$dsn-text-area-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstveld
|
|
1167
|
+
$dsn-text-area-color: $dsn-form-control-color; // Tekstkleur van het tekstveld
|
|
1168
|
+
$dsn-text-area-font-family: $dsn-form-control-font-family; // Font-familie van het tekstveld
|
|
1169
|
+
$dsn-text-area-font-size: $dsn-form-control-font-size; // Font-size van het tekstveld
|
|
1170
|
+
$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstveld
|
|
1171
|
+
$dsn-text-area-line-height: $dsn-form-control-line-height; // Line-height van het tekstveld
|
|
1172
|
+
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstveld
|
|
1173
|
+
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstveld
|
|
1174
|
+
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstveld
|
|
1175
|
+
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstveld
|
|
1176
|
+
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstveld op disabled
|
|
1177
|
+
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstveld op disabled
|
|
1178
|
+
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstveld op disabled
|
|
1179
|
+
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstveld op focus
|
|
1180
|
+
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstveld
|
|
1181
|
+
$dsn-text-area-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstveld bij ongeldige invoer
|
|
1182
|
+
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstveld op read-only
|
|
1183
|
+
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstveld op read-only
|
|
1184
|
+
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstveld op read-only
|
|
1185
|
+
$dsn-text-input-background-color: $dsn-form-control-background-color; // Achtergrondkleur van het tekstinvoerveld
|
|
1186
|
+
$dsn-text-input-border-color: $dsn-form-control-border-color; // Borderkleur van het tekstinvoerveld
|
|
1187
|
+
$dsn-text-input-border-width: $dsn-form-control-border-width; // Border-breedte van het tekstinvoerveld
|
|
1188
|
+
$dsn-text-input-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld
|
|
1189
|
+
$dsn-text-input-font-family: $dsn-form-control-font-family; // Font-familie van het tekstinvoerveld
|
|
1190
|
+
$dsn-text-input-font-size: $dsn-form-control-font-size; // Font-size van het tekstinvoerveld
|
|
1191
|
+
$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Font-gewicht van het tekstinvoerveld
|
|
1192
|
+
$dsn-text-input-line-height: $dsn-form-control-line-height; // Line-height van het tekstinvoerveld
|
|
1193
|
+
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Onderste padding van het tekstinvoerveld
|
|
1194
|
+
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Bovenste padding van het tekstinvoerveld
|
|
1195
|
+
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Rechter padding van het tekstinvoerveld
|
|
1196
|
+
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Linker padding van het tekstinvoerveld
|
|
1197
|
+
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Achtergrond van het tekstinvoerveld op disabled
|
|
1198
|
+
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Border van het tekstinvoerveld op disabled
|
|
1199
|
+
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Tekstkleur van het tekstinvoerveld op disabled
|
|
1200
|
+
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Border van het tekstinvoerveld op focus
|
|
1201
|
+
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Plaatshouderkleur van het tekstinvoerveld
|
|
1202
|
+
$dsn-text-input-invalid-color: $dsn-form-control-color; // Tekstkleur van het tekstinvoerveld bij ongeldige invoer
|
|
1203
|
+
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Achtergrond van het tekstinvoerveld op read-only
|
|
1204
|
+
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Border van het tekstinvoerveld op read-only
|
|
1205
|
+
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Tekstkleur van het tekstinvoerveld op read-only
|
|
1206
|
+
$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
1207
|
$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; //
|
|
1208
|
+
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Accentkleur van form controls in hover state
|
|
1209
|
+
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Accentkleur van form controls in active state
|
|
1210
|
+
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Accentkleur van form controls (checkboxes, radio buttons)
|
|
1188
1211
|
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1189
1212
|
$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1190
1213
|
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
@@ -1245,34 +1268,34 @@ $dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover
|
|
|
1245
1268
|
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1246
1269
|
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1247
1270
|
$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; //
|
|
1271
|
+
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1272
|
+
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Linkkleur op hover
|
|
1273
|
+
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Linkkleur op active
|
|
1274
|
+
$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Border van de default button
|
|
1275
|
+
$dsn-button-default-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de default button
|
|
1276
|
+
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de default button op active
|
|
1277
|
+
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Border van de default button op active
|
|
1278
|
+
$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de default button op active
|
|
1279
|
+
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de default button op hover
|
|
1280
|
+
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Border van de default button op hover
|
|
1281
|
+
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de default button op hover
|
|
1282
|
+
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrond van de strong negative button
|
|
1283
|
+
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Tekst-/icoonkleur van de strong negative button
|
|
1284
|
+
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Achtergrond van de strong negative button op active
|
|
1285
|
+
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Tekst-/icoonkleur van de strong negative button op active
|
|
1286
|
+
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Achtergrond van de strong negative button op hover
|
|
1287
|
+
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Tekst-/icoonkleur van de strong negative button op hover
|
|
1288
|
+
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrond van de strong positive button
|
|
1289
|
+
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Tekst-/icoonkleur van de strong positive button
|
|
1290
|
+
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Achtergrond van de strong positive button op active
|
|
1291
|
+
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Tekst-/icoonkleur van de strong positive button op active
|
|
1292
|
+
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Achtergrond van de strong positive button op hover
|
|
1293
|
+
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Tekst-/icoonkleur van de strong positive button op hover
|
|
1294
|
+
$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Tekst-/icoonkleur van de subtle button
|
|
1295
|
+
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Achtergrond van de subtle button op active
|
|
1296
|
+
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Tekst-/icoonkleur van de subtle button op active
|
|
1297
|
+
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Achtergrond van de subtle button op hover
|
|
1298
|
+
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Tekst-/icoonkleur van de subtle button op hover
|
|
1276
1299
|
$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1277
1300
|
$dsn-checkbox-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1278
1301
|
$dsn-checkbox-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
@@ -1280,16 +1303,16 @@ $dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background
|
|
|
1280
1303
|
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1281
1304
|
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1282
1305
|
$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; //
|
|
1306
|
+
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Kleur van het summary-label (volgt Link via action-2)
|
|
1307
|
+
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Kleur van het summary-label op hover
|
|
1308
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Kleur van het summary-label op active
|
|
1309
|
+
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero
|
|
1310
|
+
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero
|
|
1311
|
+
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant
|
|
1312
|
+
$dsn-link-color: $dsn-color-action-2-color-default; // Tekstkleur van de link
|
|
1313
|
+
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Kleur van de onderstreping van de link
|
|
1314
|
+
$dsn-link-active-color: $dsn-color-action-2-color-active; // Tekstkleur van de link op active
|
|
1315
|
+
$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Tekstkleur van de link op hover
|
|
1293
1316
|
$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
|
|
1294
1317
|
$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
|
|
1295
1318
|
$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
|
|
@@ -1300,48 +1323,48 @@ $dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-spe
|
|
|
1300
1323
|
$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
|
|
1301
1324
|
$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
|
|
1302
1325
|
$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
|
|
1326
|
+
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina
|
|
1304
1327
|
$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
|
|
1305
1328
|
$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
|
|
1329
|
+
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant
|
|
1307
1330
|
$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
|
|
1331
|
+
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant
|
|
1309
1332
|
$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
|
|
1333
|
+
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant
|
|
1311
1334
|
$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
|
|
1335
|
+
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant
|
|
1313
1336
|
$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
|
|
1337
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-inverse-bg-default; // Vulbalk achtergrondkleur
|
|
1315
1338
|
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1316
1339
|
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1317
1340
|
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
1318
1341
|
$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
|
|
1319
1342
|
$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1320
1343
|
$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; //
|
|
1344
|
+
$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
|
|
1345
|
+
$dsn-select-icon-color: $dsn-color-action-1-color-default; // Kleur van het chevron-icoon — gelijk aan de icoonkleur van de subtle button
|
|
1346
|
+
$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
|
|
1347
|
+
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstveld op focus
|
|
1348
|
+
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Kleur van de box-shadow op focus
|
|
1349
|
+
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstveld op focus
|
|
1350
|
+
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Kleur van de box-shadow op hover
|
|
1351
|
+
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstveld bij ongeldige invoer
|
|
1352
|
+
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstveld bij ongeldige invoer
|
|
1353
|
+
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Achtergrond van het tekstinvoerveld op focus
|
|
1354
|
+
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Kleur van de box-shadow op focus
|
|
1355
|
+
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Tekstkleur van het tekstinvoerveld op focus
|
|
1356
|
+
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Kleur van de box-shadow op hover
|
|
1357
|
+
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Achtergrond van het tekstinvoerveld bij ongeldige invoer
|
|
1358
|
+
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Border van het tekstinvoerveld bij ongeldige invoer
|
|
1359
|
+
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Kleur van het klokicoon (interactief, actie-kleur)
|
|
1360
|
+
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Kleur van het klokicoon op hover
|
|
1361
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Grootte van het klokicoon — gelijk aan de icoongrootte van de small button
|
|
1362
|
+
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Achtergrond van de strong button
|
|
1363
|
+
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Tekst-/icoonkleur van de strong button
|
|
1364
|
+
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Achtergrond van de strong button op active
|
|
1365
|
+
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Tekst-/icoonkleur van de strong button op active
|
|
1366
|
+
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Achtergrond van de strong button op hover
|
|
1367
|
+
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Tekst-/icoonkleur van de strong button op hover
|
|
1345
1368
|
$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
|
|
1346
1369
|
$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1347
1370
|
$dsn-checkbox-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
@@ -1351,5 +1374,5 @@ $dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-acce
|
|
|
1351
1374
|
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1352
1375
|
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1353
1376
|
$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; //
|
|
1377
|
+
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|
|
1378
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Kleur van de box-shadow bij ongeldige invoer
|