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