@dsn-starter-kit/design-tokens 1.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/LICENSE +21 -0
- package/README.md +287 -0
- package/dist/css/scoped/density-default.css +14 -0
- package/dist/css/scoped/density-information-dense.css +16 -0
- package/dist/css/scoped/wireframe-dark.css +340 -0
- package/dist/css/scoped/wireframe-light.css +340 -0
- package/dist/css/start-dark-default.css +1364 -0
- package/dist/css/start-dark-information-dense.css +1364 -0
- package/dist/css/start-light-default.css +1364 -0
- package/dist/css/start-light-information-dense.css +1364 -0
- package/dist/css/variables-dark.css +1364 -0
- package/dist/css/variables.css +1364 -0
- package/dist/css/wireframe-dark-default.css +1360 -0
- package/dist/css/wireframe-dark-information-dense.css +1360 -0
- package/dist/css/wireframe-light-default.css +1360 -0
- package/dist/css/wireframe-light-information-dense.css +1360 -0
- package/dist/js/start-dark-default.d.ts +1348 -0
- package/dist/js/start-dark-default.js +27420 -0
- package/dist/js/start-dark-information-dense.d.ts +1348 -0
- package/dist/js/start-dark-information-dense.js +27424 -0
- package/dist/js/start-light-default.d.ts +1348 -0
- package/dist/js/start-light-default.js +27418 -0
- package/dist/js/start-light-information-dense.d.ts +1348 -0
- package/dist/js/start-light-information-dense.js +27422 -0
- package/dist/js/tokens-dark.d.ts +1348 -0
- package/dist/js/tokens-dark.js +27420 -0
- package/dist/js/tokens.d.ts +1348 -0
- package/dist/js/tokens.js +27418 -0
- package/dist/js/wireframe-dark-default.d.ts +1344 -0
- package/dist/js/wireframe-dark-default.js +26975 -0
- package/dist/js/wireframe-dark-information-dense.d.ts +1344 -0
- package/dist/js/wireframe-dark-information-dense.js +26979 -0
- package/dist/js/wireframe-light-default.d.ts +1344 -0
- package/dist/js/wireframe-light-default.js +26975 -0
- package/dist/js/wireframe-light-information-dense.d.ts +1344 -0
- package/dist/js/wireframe-light-information-dense.js +26979 -0
- package/dist/json/start-dark-default.json +1350 -0
- package/dist/json/start-dark-information-dense.json +1350 -0
- package/dist/json/start-light-default.json +1350 -0
- package/dist/json/start-light-information-dense.json +1350 -0
- package/dist/json/tokens-dark.json +1350 -0
- package/dist/json/tokens.json +1350 -0
- package/dist/json/wireframe-dark-default.json +1346 -0
- package/dist/json/wireframe-dark-information-dense.json +1346 -0
- package/dist/json/wireframe-light-default.json +1346 -0
- package/dist/json/wireframe-light-information-dense.json +1346 -0
- package/dist/scss/_start-dark-default.scss +1351 -0
- package/dist/scss/_start-dark-information-dense.scss +1351 -0
- package/dist/scss/_start-light-default.scss +1351 -0
- package/dist/scss/_start-light-information-dense.scss +1351 -0
- package/dist/scss/_variables-dark.scss +1351 -0
- package/dist/scss/_variables.scss +1351 -0
- package/dist/scss/_wireframe-dark-default.scss +1347 -0
- package/dist/scss/_wireframe-dark-information-dense.scss +1347 -0
- package/dist/scss/_wireframe-light-default.scss +1347 -0
- package/dist/scss/_wireframe-light-information-dense.scss +1347 -0
- package/package.json +46 -0
|
@@ -0,0 +1,1347 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$dsn-text-font-family-default: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS as primary font with Comic Neue fallback for wireframe
|
|
5
|
+
$dsn-text-font-family-monospace: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; // System monospace font stack
|
|
6
|
+
$dsn-text-font-weight-default: 400; // Regular weight
|
|
7
|
+
$dsn-text-font-weight-bold: 600; // Semi-bold weight for wireframe
|
|
8
|
+
$dsn-text-line-height-sm: 1.4; // 140% line height for small text
|
|
9
|
+
$dsn-text-line-height-md: 1.4; // 140% line height for medium text
|
|
10
|
+
$dsn-text-line-height-lg: 1.2; // 120% line height for large text
|
|
11
|
+
$dsn-text-line-height-xl: 1.2; // 120% line height for headings
|
|
12
|
+
$dsn-text-line-height-2xl: 1.2; // 120% line height for large headings
|
|
13
|
+
$dsn-text-line-height-3xl: 1.1; // 110% line height for display text
|
|
14
|
+
$dsn-text-line-height-4xl: 1.1; // 110% line height for hero text
|
|
15
|
+
$dsn-text-max-inline-size: 65ch; // Maximum line length for readable body text (paragraphs, lists)
|
|
16
|
+
$dsn-text-font-size-sm: 0.875rem; // Small text - 14px (fixed)
|
|
17
|
+
$dsn-text-font-size-md: 1rem; // Medium text - 16px (fixed)
|
|
18
|
+
$dsn-text-font-size-lg: 1.25rem; // Large text - 20px (fixed)
|
|
19
|
+
$dsn-text-font-size-xl: 1.5rem; // Extra large text - 24px (fixed)
|
|
20
|
+
$dsn-text-font-size-2xl: 2rem; // 2XL text - 32px (fixed)
|
|
21
|
+
$dsn-text-font-size-3xl: 2.5rem; // 3XL text - 40px (fixed)
|
|
22
|
+
$dsn-text-font-size-4xl: 3rem; // 4XL text - 48px (fixed)
|
|
23
|
+
$dsn-heading-font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', cursive; // Comic Sans MS as primary font with Comic Neue fallback for headings
|
|
24
|
+
$dsn-heading-font-weight: 600; // Semi-bold weight for headings
|
|
25
|
+
$dsn-space-none: 0px; // No spacing
|
|
26
|
+
$dsn-space-base: 0.5rem; // 8px - Base unit for 8pt grid system
|
|
27
|
+
$dsn-space-block-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing within components
|
|
28
|
+
$dsn-space-block-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing within components
|
|
29
|
+
$dsn-space-block-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing within components
|
|
30
|
+
$dsn-space-block-md: calc(0.5rem * 1); // 8px - Vertical spacing within components
|
|
31
|
+
$dsn-space-block-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing within components
|
|
32
|
+
$dsn-space-block-xl: calc(0.5rem * 2); // 16px - Vertical spacing within components
|
|
33
|
+
$dsn-space-block-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing within components
|
|
34
|
+
$dsn-space-block-3xl: calc(0.5rem * 3); // 24px - Vertical spacing within components
|
|
35
|
+
$dsn-space-block-4xl: calc(0.5rem * 4); // 32px - Vertical spacing within components
|
|
36
|
+
$dsn-space-block-5xl: calc(0.5rem * 6); // 48px - Vertical spacing within components
|
|
37
|
+
$dsn-space-block-6xl: calc(0.5rem * 8); // 64px - Vertical spacing within components
|
|
38
|
+
$dsn-space-inline-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing within components
|
|
39
|
+
$dsn-space-inline-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing within components
|
|
40
|
+
$dsn-space-inline-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing within components
|
|
41
|
+
$dsn-space-inline-md: calc(0.5rem * 1); // 8px - Horizontal spacing within components
|
|
42
|
+
$dsn-space-inline-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing within components
|
|
43
|
+
$dsn-space-inline-xl: calc(0.5rem * 2); // 16px - Horizontal spacing within components
|
|
44
|
+
$dsn-space-inline-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing within components
|
|
45
|
+
$dsn-space-inline-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing within components
|
|
46
|
+
$dsn-space-inline-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing within components
|
|
47
|
+
$dsn-space-inline-5xl: calc(0.5rem * 6); // 48px - Horizontal spacing within components
|
|
48
|
+
$dsn-space-inline-6xl: calc(0.5rem * 8); // 64px - Horizontal spacing within components
|
|
49
|
+
$dsn-space-text-3xs: calc(0.5rem * 0.125); // 1px - Spacing between text and icons
|
|
50
|
+
$dsn-space-text-2xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
|
|
51
|
+
$dsn-space-text-xs: calc(0.5rem * 0.25); // 2px - Spacing between text and icons
|
|
52
|
+
$dsn-space-text-sm: calc(0.5rem * 0.5); // 4px - Spacing between text and icons
|
|
53
|
+
$dsn-space-text-md: calc(0.5rem * 1); // 8px - Spacing between text and icons
|
|
54
|
+
$dsn-space-text-lg: calc(0.5rem * 1.5); // 12px - Spacing between text and icons
|
|
55
|
+
$dsn-space-text-xl: calc(0.5rem * 2); // 16px - Spacing between text and icons
|
|
56
|
+
$dsn-space-text-2xl: calc(0.5rem * 2.5); // 20px - Spacing between text and icons
|
|
57
|
+
$dsn-space-text-3xl: calc(0.5rem * 3); // 24px - Spacing between text and icons
|
|
58
|
+
$dsn-space-column-2xs: calc(0.5rem * 0.125); // 1px - Horizontal spacing between components
|
|
59
|
+
$dsn-space-column-xs: calc(0.5rem * 0.25); // 2px - Horizontal spacing between components
|
|
60
|
+
$dsn-space-column-sm: calc(0.5rem * 0.5); // 4px - Horizontal spacing between components
|
|
61
|
+
$dsn-space-column-md: calc(0.5rem * 1); // 8px - Horizontal spacing between components
|
|
62
|
+
$dsn-space-column-lg: calc(0.5rem * 1.5); // 12px - Horizontal spacing between components
|
|
63
|
+
$dsn-space-column-xl: calc(0.5rem * 2); // 16px - Horizontal spacing between components
|
|
64
|
+
$dsn-space-column-2xl: calc(0.5rem * 2.5); // 20px - Horizontal spacing between components
|
|
65
|
+
$dsn-space-column-3xl: calc(0.5rem * 3); // 24px - Horizontal spacing between components
|
|
66
|
+
$dsn-space-column-4xl: calc(0.5rem * 4); // 32px - Horizontal spacing between components
|
|
67
|
+
$dsn-space-column-5xl: calc(0.5rem * 8); // 64px - Horizontal spacing between components
|
|
68
|
+
$dsn-space-column-6xl: calc(0.5rem * 20); // 160px - Horizontal spacing between components
|
|
69
|
+
$dsn-space-row-2xs: calc(0.5rem * 0.125); // 1px - Vertical spacing between components
|
|
70
|
+
$dsn-space-row-xs: calc(0.5rem * 0.25); // 2px - Vertical spacing between components
|
|
71
|
+
$dsn-space-row-sm: calc(0.5rem * 0.5); // 4px - Vertical spacing between components
|
|
72
|
+
$dsn-space-row-md: calc(0.5rem * 1); // 8px - Vertical spacing between components
|
|
73
|
+
$dsn-space-row-lg: calc(0.5rem * 1.5); // 12px - Vertical spacing between components
|
|
74
|
+
$dsn-space-row-xl: calc(0.5rem * 2); // 16px - Vertical spacing between components
|
|
75
|
+
$dsn-space-row-2xl: calc(0.5rem * 2.5); // 20px - Vertical spacing between components
|
|
76
|
+
$dsn-space-row-3xl: calc(0.5rem * 3); // 24px - Vertical spacing between components
|
|
77
|
+
$dsn-space-row-4xl: calc(0.5rem * 4); // 32px - Vertical spacing between components
|
|
78
|
+
$dsn-space-row-5xl: calc(0.5rem * 8); // 64px - Vertical spacing between components
|
|
79
|
+
$dsn-space-row-6xl: calc(0.5rem * 20); // 160px - Vertical spacing between components
|
|
80
|
+
$dsn-pointer-target-min-block-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
|
|
81
|
+
$dsn-pointer-target-min-inline-size: 3rem; // WCAG 2.5.5 Target Size - Minimum 48px (3rem) touch target
|
|
82
|
+
$dsn-border-radius-square: 0px; // No border radius — square corners
|
|
83
|
+
$dsn-border-radius-sm: 2px; // Small border radius - minimal for wireframe
|
|
84
|
+
$dsn-border-radius-md: 4px; // Medium border radius - minimal for wireframe
|
|
85
|
+
$dsn-border-radius-lg: 8px; // Large border radius - minimal for wireframe
|
|
86
|
+
$dsn-border-radius-round: 999px; // Fully rounded (pills, circles)
|
|
87
|
+
$dsn-border-width-none: 0px; // No border width
|
|
88
|
+
$dsn-border-width-thin: 2px; // Thin border
|
|
89
|
+
$dsn-border-width-medium: 4px; // Medium border
|
|
90
|
+
$dsn-border-width-thick: 8px; // Thick border
|
|
91
|
+
$dsn-focus-outline-offset: 2px; // Focus outline offset
|
|
92
|
+
$dsn-focus-outline-style: solid; // Focus outline style - solid for wireframe
|
|
93
|
+
$dsn-focus-outline-width: 2px; // Focus outline width
|
|
94
|
+
$dsn-focus-background-color: #ffdd00; // Focus indicator background - yellow
|
|
95
|
+
$dsn-focus-color: #000000; // Focus indicator text color
|
|
96
|
+
$dsn-focus-outline-color: #ffffff; // Focus outline color
|
|
97
|
+
$dsn-focus-inverse-outline-color: #000000; // Focus outline color for use on light/tinted backgrounds in dark mode - opposite of outline-color
|
|
98
|
+
$dsn-form-control-max-inline-size: 25rem; // Form control maximum width
|
|
99
|
+
$dsn-form-control-border-radius: 2px; // Form control border radius - minimal for wireframe
|
|
100
|
+
$dsn-form-control-width-xs: 8ch; // Extra small width - for short inputs (e.g., postal code, 6 characters)
|
|
101
|
+
$dsn-form-control-width-sm: 16ch; // Small width - for medium inputs (e.g., phone number, 10-12 digits)
|
|
102
|
+
$dsn-form-control-width-md: 32ch; // Medium width (default) - for standard inputs (e.g., email, name)
|
|
103
|
+
$dsn-form-control-width-lg: 48ch; // Large width - for longer inputs (e.g., URL)
|
|
104
|
+
$dsn-form-control-width-xl: 64ch; // Extra large width - for very long text fields
|
|
105
|
+
$dsn-form-control-width-full: 100%; // Full width - responsive to container
|
|
106
|
+
$dsn-breakpoint-sm: 36em; // Small breakpoint - ~576px. Reference only; use hardcoded values in CSS @media rules.
|
|
107
|
+
$dsn-breakpoint-md: 44em; // Medium breakpoint - ~704px. Reference only; use hardcoded values in CSS @media rules.
|
|
108
|
+
$dsn-breakpoint-lg: 64em; // Large breakpoint - ~1024px. Reference only; use hardcoded values in CSS @media rules.
|
|
109
|
+
$dsn-breakpoint-xl: 74em; // Extra large breakpoint - ~1184px. Reference only; use hardcoded values in CSS @media rules.
|
|
110
|
+
$dsn-box-shadow-none: none; // Geen elevatie — vlak oppervlak zonder schaduw
|
|
111
|
+
$dsn-box-shadow-sm: none; // Small elevation — flat in wireframe theme
|
|
112
|
+
$dsn-box-shadow-md: none; // Medium elevation — flat in wireframe theme
|
|
113
|
+
$dsn-box-shadow-lg: none; // Large elevation — flat in wireframe theme
|
|
114
|
+
$dsn-z-index-300: 300; // Sticky navigatie-elementen — PageHeader sticky/auto-hide
|
|
115
|
+
$dsn-z-index-350: 350; // Floating UI-elementen — Popover, tooltips, dropdowns
|
|
116
|
+
$dsn-z-index-400: 400; // Verduisterende laag — Backdrop achter modals en drawers
|
|
117
|
+
$dsn-z-index-500: 500; // Modale lagen — ModalDialog, Drawer
|
|
118
|
+
$dsn-z-index-600: 600; // Altijd bovenaan — SkipLink (toegankelijkheid)
|
|
119
|
+
$dsn-transition-duration-instant: 0ms; // State-changes die onmiddellijk moeten aanvoelen
|
|
120
|
+
$dsn-transition-duration-fast: 100ms; // Subtiele hover-states, kleur-transitions
|
|
121
|
+
$dsn-transition-duration-normal: 200ms; // Standaard UI-transitions
|
|
122
|
+
$dsn-transition-duration-slow: 350ms; // Grotere bewegingen, accordions
|
|
123
|
+
$dsn-transition-duration-slower: 500ms; // Complexe animaties, page-level transitions
|
|
124
|
+
$dsn-transition-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); // Algemeen — equivalent van CSS ease
|
|
125
|
+
$dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het scherm binnenkomen (decelereren)
|
|
126
|
+
$dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
|
|
127
|
+
$dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
|
|
128
|
+
$dsn-transition-easing-linear: linear; // Lineaire easing — voor loaders en spinners
|
|
129
|
+
$dsn-color-neutral-bg-document: #000000; // Document background
|
|
130
|
+
$dsn-color-neutral-bg-elevated: #000000; // Elevated background — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation.
|
|
131
|
+
$dsn-color-neutral-bg-subtle: #000000; // Subtle background
|
|
132
|
+
$dsn-color-neutral-bg-default: #000000; // Default background
|
|
133
|
+
$dsn-color-neutral-bg-hover: #000000; // Hover state background
|
|
134
|
+
$dsn-color-neutral-bg-active: #000000; // Active state background
|
|
135
|
+
$dsn-color-neutral-border-subtle: #ffffff; // Subtle border
|
|
136
|
+
$dsn-color-neutral-border-default: #ffffff; // Default border
|
|
137
|
+
$dsn-color-neutral-border-hover: #ffffff; // Hover state border
|
|
138
|
+
$dsn-color-neutral-border-active: #ffffff; // Active state border
|
|
139
|
+
$dsn-color-neutral-color-default: #ffffff; // Default text color
|
|
140
|
+
$dsn-color-neutral-color-hover: #ffffff; // Hover state text
|
|
141
|
+
$dsn-color-neutral-color-active: #ffffff; // Active state text
|
|
142
|
+
$dsn-color-neutral-color-subtle: #ffffff; // Subtle text color
|
|
143
|
+
$dsn-color-neutral-color-document: #ffffff; // Document text color
|
|
144
|
+
$dsn-color-transparent: rgba(0, 0, 0, 0); // Fully transparent - for invisible backgrounds and borders
|
|
145
|
+
$dsn-color-shadow-scroll: rgba(255, 255, 255, 0.12); // Scroll-affordance schaduw — lichte kleur voor zichtbaarheid op donkere achtergrond
|
|
146
|
+
$dsn-backdrop-opacity: 50%; // Bepaalt hoe doorzichtig de overlay is — gebruikt in color-mix()
|
|
147
|
+
$dsn-backdrop-blur: 4px; // backdrop-filter: blur() op de overlay — valt gracefully weg zonder support
|
|
148
|
+
$dsn-breadcrumb-navigation-link-text-decoration-line: underline; // Links are underlined by default (a11y standaard)
|
|
149
|
+
$dsn-breadcrumb-navigation-link-text-underline-offset: 4px; // Underline offset
|
|
150
|
+
$dsn-breadcrumb-navigation-link-text-decoration-thickness: auto; // Underline thickness
|
|
151
|
+
$dsn-breadcrumb-navigation-link-hover-text-decoration-line: none; // Underline verdwijnt op hover als visuele feedback
|
|
152
|
+
$dsn-breadcrumb-navigation-link-active-text-decoration-line: none; // No underline on active
|
|
153
|
+
$dsn-button-size-small-min-block-size: 2.5rem; // Small button minimum block size (reduced touch target — 40px)
|
|
154
|
+
$dsn-card-box-shadow: none; // Schaduw standaard — geen schaduw by default
|
|
155
|
+
$dsn-card-group-item-min-width: 17.5rem; // Minimale breedte van een card in een groep (280px) — gebruikt door CSS auto-fill
|
|
156
|
+
$dsn-checkbox-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Size of the checkbox - fluid based on text size and line-height
|
|
157
|
+
$dsn-checkbox-checked-border-color: rgba(0, 0, 0, 0);
|
|
158
|
+
$dsn-checkbox-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
159
|
+
$dsn-checkbox-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
160
|
+
$dsn-checkbox-indeterminate-border-color: rgba(0, 0, 0, 0);
|
|
161
|
+
$dsn-checkbox-indeterminate-active-border-color: rgba(0, 0, 0, 0);
|
|
162
|
+
$dsn-checkbox-indeterminate-hover-border-color: rgba(0, 0, 0, 0);
|
|
163
|
+
$dsn-checkbox-icon-size: calc(var(--dsn-checkbox-size) * 0.67); // Check icon size - 67% of checkbox size for proper visual balance
|
|
164
|
+
$dsn-container-box-shadow: none; // Standaard geen schaduw — gebruik elevated variant voor een zwevend effect
|
|
165
|
+
$dsn-details-summary-text-decoration-line: none; // No underline by default; appears on hover
|
|
166
|
+
$dsn-details-summary-text-underline-offset: 4px; // Underline offset for hover state
|
|
167
|
+
$dsn-details-summary-text-decoration-thickness: auto; // Underline thickness for hover state
|
|
168
|
+
$dsn-details-summary-hover-text-decoration-line: underline; // Underline appears on hover
|
|
169
|
+
$dsn-details-content-background-color: rgba(0, 0, 0, 0); // Content area background
|
|
170
|
+
$dsn-dot-badge-size: 0.5rem; // Diameter van de dot (8px)
|
|
171
|
+
$dsn-dot-badge-inset-block-start: 0.25rem; // Verticale offset — dot zit 0.25rem binnen de bovenrand van de parent
|
|
172
|
+
$dsn-dot-badge-inset-inline-end: 0.25rem; // Horizontale offset — dot zit 0.25rem binnen de rechterrand van de parent
|
|
173
|
+
$dsn-dot-badge-pulse-duration: 1500ms; // Duur van de pulse-animatie — bewust hoger dan transition.duration.slower (500ms): dit is een herhalende ambient animatie, geen UI-transition
|
|
174
|
+
$dsn-drawer-max-width: 25rem; // Maximale breedte van het zijpaneel (400px)
|
|
175
|
+
$dsn-drawer-min-gap: 3rem; // Minimale zichtbare ruimte van de achtergrondpagina naast het zijpaneel (48px)
|
|
176
|
+
$dsn-file-box-shadow: none; // Geen schaduw standaard — zelfde als Card
|
|
177
|
+
$dsn-file-media-size: 3rem; // Vaste grootte van het media-vlak (48px) — vierkant voor zowel icoon als preview
|
|
178
|
+
$dsn-grid-gutter: calc(0.5rem * 1); // Compactere kolomafstand voor information-dense project types (8px = space.column.md)
|
|
179
|
+
$dsn-grid-row-gap: calc(0.5rem * 1); // Compactere rij-afstand voor information-dense project types (8px = space.column.md)
|
|
180
|
+
$dsn-grid-max-width: 74rem; // Maximum width of a contained grid (--dsn-breakpoint-xl ~1184px)
|
|
181
|
+
$dsn-hero-block-size: 70svh; // Hoogte van de Hero via min-block-size: max(--dsn-hero-min-block-size, --dsn-hero-block-size); aanpasbaar per instantie via inline style
|
|
182
|
+
$dsn-hero-min-block-size: 400px; // Minimale hoogte van de Hero — vloer zodat de Hero niet te klein wordt bij weinig inhoud of kleine viewport
|
|
183
|
+
$dsn-link-text-decoration-line: underline; // Link text decoration line
|
|
184
|
+
$dsn-link-text-decoration-thickness: auto; // Link underline thickness
|
|
185
|
+
$dsn-link-text-underline-offset: 4px; // Link underline offset
|
|
186
|
+
$dsn-link-hover-text-decoration-line: none; // Link hover text decoration
|
|
187
|
+
$dsn-menu-link-current-indicator-width: 3px; // MenuLink-specifiek: breedte van de border-inline-start indicator
|
|
188
|
+
$dsn-modal-dialog-max-width: 40rem; // Maximale breedte van het dialoogvenster (640px)
|
|
189
|
+
$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
|
|
190
|
+
$dsn-page-header-logo-max-block-size: 2rem; // Maximale hoogte van het logo in de PageHeader op mobile (32px). Breedte schaalt automatisch via inline-size: auto. White-label: overschrijf dit token per thema voor andere logo-proporties.
|
|
191
|
+
$dsn-page-max-inline-size: 75rem; // Maximale breedte van de paginainhoud binnen page-level componenten. Achtergronden lopen altijd full-bleed; __inner containers gebruiken dit token om de inhoudsbreedte te beperken.
|
|
192
|
+
$dsn-password-input-padding-inline-end: 3rem; // Password input right padding - extra space for password manager icons
|
|
193
|
+
$dsn-popover-max-width: 25rem; // Maximale breedte van de popover (400px)
|
|
194
|
+
$dsn-popover-min-width: 12.5rem; // Minimale breedte van de popover (200px)
|
|
195
|
+
$dsn-progress-bar-block-size: 8px; // Hoogte van de balk — gangbare dikte voor voortgangsbalken
|
|
196
|
+
$dsn-radio-size: calc(var(--dsn-text-font-size-md) * var(--dsn-text-line-height-md)); // Size of the radio button - fluid based on text size and line-height
|
|
197
|
+
$dsn-radio-checked-border-color: rgba(0, 0, 0, 0);
|
|
198
|
+
$dsn-radio-checked-active-border-color: rgba(0, 0, 0, 0);
|
|
199
|
+
$dsn-radio-checked-hover-border-color: rgba(0, 0, 0, 0);
|
|
200
|
+
$dsn-radio-icon-size: calc(var(--dsn-radio-size) * 0.33); // Inner circle size when checked - 33% of radio size
|
|
201
|
+
$dsn-spinner-size: 1.5rem; // Diameter van de spinner (24px)
|
|
202
|
+
$dsn-spinner-size-large: 3rem; // Grote variant — diameter van de spinner (48px)
|
|
203
|
+
$dsn-spinner-duration: 800ms; // Duur van één rotatie — bewust sneller dan transition.duration.slower (500ms): dit is een herhalende ambient animatie
|
|
204
|
+
$dsn-status-badge-text-transform: none; // Status badge text transform (none by default; themes can override to uppercase)
|
|
205
|
+
$dsn-summary-list-key-basis: 30%; // Width of the key column in the grid layout
|
|
206
|
+
$dsn-table-header-background-color: rgba(0, 0, 0, 0);
|
|
207
|
+
$dsn-table-footer-background-color: rgba(0, 0, 0, 0);
|
|
208
|
+
$dsn-text-area-outline-offset: 0px; // Text area outline offset
|
|
209
|
+
$dsn-text-area-resize: vertical; // Text area resize behavior (vertical, horizontal, both, none)
|
|
210
|
+
$dsn-text-area-focus-box-shadow-x: 0; // Text area focus box shadow x offset
|
|
211
|
+
$dsn-text-area-focus-box-shadow-y: 0; // Text area focus box shadow y offset
|
|
212
|
+
$dsn-text-area-focus-box-shadow-blur: 0; // Text area focus box shadow blur
|
|
213
|
+
$dsn-text-area-hover-box-shadow-x: 0; // Text area hover box shadow x offset
|
|
214
|
+
$dsn-text-area-hover-box-shadow-y: 0; // Text area hover box shadow y offset
|
|
215
|
+
$dsn-text-area-hover-box-shadow-blur: 0; // Text area hover box shadow blur
|
|
216
|
+
$dsn-text-area-invalid-box-shadow-x: 0; // Text area invalid box shadow x offset
|
|
217
|
+
$dsn-text-area-invalid-box-shadow-y: 0; // Text area invalid box shadow y offset
|
|
218
|
+
$dsn-text-area-invalid-box-shadow-blur: 0; // Text area invalid box shadow blur
|
|
219
|
+
$dsn-text-input-outline-offset: 0px; // Text input outline offset
|
|
220
|
+
$dsn-text-input-focus-box-shadow-x: 0; // Text input focus box shadow x offset
|
|
221
|
+
$dsn-text-input-focus-box-shadow-y: 0; // Text input focus box shadow y offset
|
|
222
|
+
$dsn-text-input-focus-box-shadow-blur: 0; // Text input focus box shadow blur
|
|
223
|
+
$dsn-text-input-hover-box-shadow-x: 0; // Text input hover box shadow x offset
|
|
224
|
+
$dsn-text-input-hover-box-shadow-y: 0; // Text input hover box shadow y offset
|
|
225
|
+
$dsn-text-input-hover-box-shadow-blur: 0; // Text input hover box shadow blur
|
|
226
|
+
$dsn-text-input-invalid-box-shadow-x: 0; // Text input invalid box shadow x offset
|
|
227
|
+
$dsn-text-input-invalid-box-shadow-y: 0; // Text input invalid box shadow y offset
|
|
228
|
+
$dsn-text-input-invalid-box-shadow-blur: 0; // Text input invalid box shadow blur
|
|
229
|
+
$dsn-heading-color: $dsn-color-neutral-color-document; // Heading text color
|
|
230
|
+
$dsn-heading-level-1-font-family: $dsn-heading-font-family; // Heading 1 font family
|
|
231
|
+
$dsn-heading-level-1-font-size: $dsn-text-font-size-3xl; // Heading 1 font size
|
|
232
|
+
$dsn-heading-level-1-font-weight: $dsn-heading-font-weight; // Heading 1 font weight
|
|
233
|
+
$dsn-heading-level-1-line-height: $dsn-text-line-height-3xl; // Heading 1 line height
|
|
234
|
+
$dsn-heading-level-1-margin-block-end: $dsn-space-row-xl; // Heading 1 bottom margin
|
|
235
|
+
$dsn-heading-level-2-font-family: $dsn-heading-font-family; // Heading 2 font family
|
|
236
|
+
$dsn-heading-level-2-font-size: $dsn-text-font-size-2xl; // Heading 2 font size
|
|
237
|
+
$dsn-heading-level-2-font-weight: $dsn-heading-font-weight; // Heading 2 font weight
|
|
238
|
+
$dsn-heading-level-2-line-height: $dsn-text-line-height-2xl; // Heading 2 line height
|
|
239
|
+
$dsn-heading-level-2-margin-block-end: $dsn-space-row-xl; // Heading 2 bottom margin
|
|
240
|
+
$dsn-heading-level-3-font-family: $dsn-heading-font-family; // Heading 3 font family
|
|
241
|
+
$dsn-heading-level-3-font-size: $dsn-text-font-size-xl; // Heading 3 font size
|
|
242
|
+
$dsn-heading-level-3-font-weight: $dsn-heading-font-weight; // Heading 3 font weight
|
|
243
|
+
$dsn-heading-level-3-line-height: $dsn-text-line-height-xl; // Heading 3 line height
|
|
244
|
+
$dsn-heading-level-3-margin-block-end: $dsn-space-row-lg; // Heading 3 bottom margin
|
|
245
|
+
$dsn-heading-level-4-font-family: $dsn-heading-font-family; // Heading 4 font family
|
|
246
|
+
$dsn-heading-level-4-font-size: $dsn-text-font-size-lg; // Heading 4 font size
|
|
247
|
+
$dsn-heading-level-4-font-weight: $dsn-heading-font-weight; // Heading 4 font weight
|
|
248
|
+
$dsn-heading-level-4-line-height: $dsn-text-line-height-lg; // Heading 4 line height
|
|
249
|
+
$dsn-heading-level-4-margin-block-end: $dsn-space-row-lg; // Heading 4 bottom margin
|
|
250
|
+
$dsn-heading-level-5-font-family: $dsn-heading-font-family; // Heading 5 font family
|
|
251
|
+
$dsn-heading-level-5-font-size: $dsn-text-font-size-md; // Heading 5 font size
|
|
252
|
+
$dsn-heading-level-5-font-weight: $dsn-heading-font-weight; // Heading 5 font weight
|
|
253
|
+
$dsn-heading-level-5-line-height: $dsn-text-line-height-md; // Heading 5 line height
|
|
254
|
+
$dsn-heading-level-5-margin-block-end: $dsn-space-row-md; // Heading 5 bottom margin
|
|
255
|
+
$dsn-heading-level-6-font-family: $dsn-heading-font-family; // Heading 6 font family
|
|
256
|
+
$dsn-heading-level-6-font-size: $dsn-text-font-size-sm; // Heading 6 font size
|
|
257
|
+
$dsn-heading-level-6-font-weight: $dsn-heading-font-weight; // Heading 6 font weight
|
|
258
|
+
$dsn-heading-level-6-line-height: $dsn-text-line-height-sm; // Heading 6 line height
|
|
259
|
+
$dsn-heading-level-6-margin-block-end: $dsn-space-row-md; // Heading 6 bottom margin
|
|
260
|
+
$dsn-icon-size-sm: calc($dsn-text-font-size-sm * $dsn-text-line-height-sm); // Fluid icon size - coupled to font-size.sm × line-height.sm
|
|
261
|
+
$dsn-icon-size-md: calc($dsn-text-font-size-md * $dsn-text-line-height-md); // Fluid icon size - coupled to font-size.md × line-height.md
|
|
262
|
+
$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
|
|
263
|
+
$dsn-icon-size-xl: calc($dsn-text-font-size-xl * $dsn-text-line-height-xl); // Fluid icon size - coupled to font-size.xl × line-height.xl
|
|
264
|
+
$dsn-icon-size-2xl: calc($dsn-text-font-size-2xl * $dsn-text-line-height-2xl); // Fluid icon size - coupled to font-size.2xl × line-height.2xl
|
|
265
|
+
$dsn-icon-size-3xl: calc($dsn-text-font-size-3xl * $dsn-text-line-height-3xl); // Fluid icon size - coupled to font-size.3xl × line-height.3xl
|
|
266
|
+
$dsn-icon-size-4xl: calc($dsn-text-font-size-4xl * $dsn-text-line-height-4xl); // Fluid icon size - coupled to font-size.4xl × line-height.4xl
|
|
267
|
+
$dsn-form-control-font-family: $dsn-text-font-family-default; // Form control font family
|
|
268
|
+
$dsn-form-control-font-size: $dsn-text-font-size-md; // Form control font size
|
|
269
|
+
$dsn-form-control-font-weight: $dsn-text-font-weight-default; // Form control font weight
|
|
270
|
+
$dsn-form-control-line-height: $dsn-text-line-height-md; // Form control line height
|
|
271
|
+
$dsn-form-control-padding-block-start: $dsn-space-block-lg; // Form control top padding
|
|
272
|
+
$dsn-form-control-padding-block-end: $dsn-space-block-lg; // Form control bottom padding
|
|
273
|
+
$dsn-form-control-padding-inline-start: $dsn-space-inline-lg; // Form control left padding
|
|
274
|
+
$dsn-form-control-padding-inline-end: $dsn-space-inline-lg; // Form control right padding
|
|
275
|
+
$dsn-form-control-border-width: $dsn-border-width-thin; // Form control border width
|
|
276
|
+
$dsn-form-control-hover-border-width: $dsn-border-width-medium; // Form control hover border width
|
|
277
|
+
$dsn-form-control-hover-background-color: $dsn-color-neutral-bg-hover; // Form control hover background
|
|
278
|
+
$dsn-form-control-hover-border-color: $dsn-color-neutral-border-hover; // Form control hover border
|
|
279
|
+
$dsn-form-control-focus-border-width: $dsn-border-width-medium; // Form control focus border width
|
|
280
|
+
$dsn-form-control-focus-border-color: $dsn-color-neutral-border-active; // Form control focus border
|
|
281
|
+
$dsn-form-control-active-border-width: $dsn-border-width-medium; // Form control active border width
|
|
282
|
+
$dsn-form-control-active-background-color: $dsn-color-neutral-bg-active; // Form control active background
|
|
283
|
+
$dsn-form-control-active-border-color: $dsn-color-neutral-border-active; // Form control active border
|
|
284
|
+
$dsn-form-control-invalid-border-width: $dsn-border-width-medium; // Form control invalid border width
|
|
285
|
+
$dsn-form-control-background-color: $dsn-color-neutral-bg-subtle; // Form control background
|
|
286
|
+
$dsn-form-control-border-color: $dsn-color-neutral-border-default; // Form control border
|
|
287
|
+
$dsn-form-control-color: $dsn-color-neutral-color-document; // Form control text color
|
|
288
|
+
$dsn-form-control-placeholder-color: $dsn-color-neutral-color-subtle; // Form control placeholder text color
|
|
289
|
+
$dsn-form-control-disabled-accent-color: $dsn-color-neutral-bg-subtle; // Form control disabled accent color
|
|
290
|
+
$dsn-form-control-disabled-background-color: $dsn-color-neutral-bg-subtle; // Form control disabled background
|
|
291
|
+
$dsn-form-control-disabled-border-color: $dsn-color-neutral-border-subtle; // Form control disabled border
|
|
292
|
+
$dsn-form-control-disabled-color: $dsn-color-neutral-color-subtle; // Form control disabled text color
|
|
293
|
+
$dsn-form-control-read-only-background-color: $dsn-color-neutral-bg-subtle; // Form control read-only background
|
|
294
|
+
$dsn-form-control-read-only-border-color: $dsn-color-transparent; // Form control read-only border
|
|
295
|
+
$dsn-form-control-read-only-color: $dsn-color-neutral-color-document; // Form control read-only text color
|
|
296
|
+
$dsn-color-accent-1-bg-document: $dsn-color-neutral-bg-document; // Document background
|
|
297
|
+
$dsn-color-accent-1-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
298
|
+
$dsn-color-accent-1-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
|
|
299
|
+
$dsn-color-accent-1-bg-default: $dsn-color-neutral-bg-default; // Default background
|
|
300
|
+
$dsn-color-accent-1-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
|
|
301
|
+
$dsn-color-accent-1-bg-active: $dsn-color-neutral-bg-active; // Active state background
|
|
302
|
+
$dsn-color-accent-1-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
|
|
303
|
+
$dsn-color-accent-1-border-default: $dsn-color-neutral-border-default; // Default border
|
|
304
|
+
$dsn-color-accent-1-border-hover: $dsn-color-neutral-border-hover; // Hover state border
|
|
305
|
+
$dsn-color-accent-1-border-active: $dsn-color-neutral-border-active; // Active state border
|
|
306
|
+
$dsn-color-accent-1-color-default: $dsn-color-neutral-color-default; // Default text color
|
|
307
|
+
$dsn-color-accent-1-color-hover: $dsn-color-neutral-color-hover; // Hover state text
|
|
308
|
+
$dsn-color-accent-1-color-active: $dsn-color-neutral-color-active; // Active state text
|
|
309
|
+
$dsn-color-accent-1-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
|
|
310
|
+
$dsn-color-accent-1-color-document: $dsn-color-neutral-color-document; // Document text color
|
|
311
|
+
$dsn-color-positive-bg-document: $dsn-color-neutral-bg-document; // Document background
|
|
312
|
+
$dsn-color-positive-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
313
|
+
$dsn-color-positive-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
|
|
314
|
+
$dsn-color-positive-bg-default: $dsn-color-neutral-bg-default; // Default background
|
|
315
|
+
$dsn-color-positive-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
|
|
316
|
+
$dsn-color-positive-bg-active: $dsn-color-neutral-bg-active; // Active state background
|
|
317
|
+
$dsn-color-positive-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
|
|
318
|
+
$dsn-color-positive-border-default: $dsn-color-neutral-border-default; // Default border
|
|
319
|
+
$dsn-color-positive-border-hover: $dsn-color-neutral-border-hover; // Hover state border
|
|
320
|
+
$dsn-color-positive-border-active: $dsn-color-neutral-border-active; // Active state border
|
|
321
|
+
$dsn-color-positive-color-default: $dsn-color-neutral-color-default; // Default text color
|
|
322
|
+
$dsn-color-positive-color-hover: $dsn-color-neutral-color-hover; // Hover state text
|
|
323
|
+
$dsn-color-positive-color-active: $dsn-color-neutral-color-active; // Active state text
|
|
324
|
+
$dsn-color-positive-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
|
|
325
|
+
$dsn-color-positive-color-document: $dsn-color-neutral-color-document; // Document text color
|
|
326
|
+
$dsn-color-negative-bg-document: $dsn-color-neutral-bg-document; // Document background
|
|
327
|
+
$dsn-color-negative-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
328
|
+
$dsn-color-negative-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
|
|
329
|
+
$dsn-color-negative-bg-default: $dsn-color-neutral-bg-default; // Default background
|
|
330
|
+
$dsn-color-negative-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
|
|
331
|
+
$dsn-color-negative-bg-active: $dsn-color-neutral-bg-active; // Active state background
|
|
332
|
+
$dsn-color-negative-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
|
|
333
|
+
$dsn-color-negative-border-default: $dsn-color-neutral-border-default; // Default border
|
|
334
|
+
$dsn-color-negative-border-hover: $dsn-color-neutral-border-hover; // Hover state border
|
|
335
|
+
$dsn-color-negative-border-active: $dsn-color-neutral-border-active; // Active state border
|
|
336
|
+
$dsn-color-negative-color-default: $dsn-color-neutral-color-default; // Default text color
|
|
337
|
+
$dsn-color-negative-color-hover: $dsn-color-neutral-color-hover; // Hover state text
|
|
338
|
+
$dsn-color-negative-color-active: $dsn-color-neutral-color-active; // Active state text
|
|
339
|
+
$dsn-color-negative-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
|
|
340
|
+
$dsn-color-negative-color-document: $dsn-color-neutral-color-document; // Document text color
|
|
341
|
+
$dsn-color-warning-bg-document: $dsn-color-neutral-bg-document; // Document background
|
|
342
|
+
$dsn-color-warning-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
343
|
+
$dsn-color-warning-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
|
|
344
|
+
$dsn-color-warning-bg-default: $dsn-color-neutral-bg-default; // Default background
|
|
345
|
+
$dsn-color-warning-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
|
|
346
|
+
$dsn-color-warning-bg-active: $dsn-color-neutral-bg-active; // Active state background
|
|
347
|
+
$dsn-color-warning-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
|
|
348
|
+
$dsn-color-warning-border-default: $dsn-color-neutral-border-default; // Default border
|
|
349
|
+
$dsn-color-warning-border-hover: $dsn-color-neutral-border-hover; // Hover state border
|
|
350
|
+
$dsn-color-warning-border-active: $dsn-color-neutral-border-active; // Active state border
|
|
351
|
+
$dsn-color-warning-color-default: $dsn-color-neutral-color-default; // Default text color
|
|
352
|
+
$dsn-color-warning-color-hover: $dsn-color-neutral-color-hover; // Hover state text
|
|
353
|
+
$dsn-color-warning-color-active: $dsn-color-neutral-color-active; // Active state text
|
|
354
|
+
$dsn-color-warning-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
|
|
355
|
+
$dsn-color-warning-color-document: $dsn-color-neutral-color-document; // Document text color
|
|
356
|
+
$dsn-color-info-bg-document: $dsn-color-neutral-bg-document; // Document background
|
|
357
|
+
$dsn-color-info-bg-elevated: $dsn-color-neutral-bg-elevated; // Elevated background
|
|
358
|
+
$dsn-color-info-bg-subtle: $dsn-color-neutral-bg-subtle; // Subtle background
|
|
359
|
+
$dsn-color-info-bg-default: $dsn-color-neutral-bg-default; // Default background
|
|
360
|
+
$dsn-color-info-bg-hover: $dsn-color-neutral-bg-hover; // Hover state background
|
|
361
|
+
$dsn-color-info-bg-active: $dsn-color-neutral-bg-active; // Active state background
|
|
362
|
+
$dsn-color-info-border-subtle: $dsn-color-neutral-border-subtle; // Subtle border
|
|
363
|
+
$dsn-color-info-border-default: $dsn-color-neutral-border-default; // Default border
|
|
364
|
+
$dsn-color-info-border-hover: $dsn-color-neutral-border-hover; // Hover state border
|
|
365
|
+
$dsn-color-info-border-active: $dsn-color-neutral-border-active; // Active state border
|
|
366
|
+
$dsn-color-info-color-default: $dsn-color-neutral-color-default; // Default text color
|
|
367
|
+
$dsn-color-info-color-hover: $dsn-color-neutral-color-hover; // Hover state text
|
|
368
|
+
$dsn-color-info-color-active: $dsn-color-neutral-color-active; // Active state text
|
|
369
|
+
$dsn-color-info-color-subtle: $dsn-color-neutral-color-subtle; // Subtle text color
|
|
370
|
+
$dsn-color-info-color-document: $dsn-color-neutral-color-document; // Document text color
|
|
371
|
+
$dsn-color-neutral-inverse-bg-document: $dsn-color-neutral-color-document; // Inverse document background
|
|
372
|
+
$dsn-color-neutral-inverse-bg-elevated: $dsn-color-neutral-color-document; // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns). Same as bg-document in light mode; can be lightened in dark mode to convey elevation.
|
|
373
|
+
$dsn-color-neutral-inverse-bg-subtle: $dsn-color-neutral-color-active; // Inverse subtle background
|
|
374
|
+
$dsn-color-neutral-inverse-bg-default: $dsn-color-neutral-color-hover; // Inverse default background
|
|
375
|
+
$dsn-color-neutral-inverse-bg-hover: $dsn-color-neutral-color-default; // Inverse hover background
|
|
376
|
+
$dsn-color-neutral-inverse-bg-active: $dsn-color-neutral-color-subtle; // Inverse active background
|
|
377
|
+
$dsn-color-neutral-inverse-border-subtle: $dsn-color-neutral-border-active; // Inverse subtle border
|
|
378
|
+
$dsn-color-neutral-inverse-border-default: $dsn-color-neutral-border-hover; // Inverse default border
|
|
379
|
+
$dsn-color-neutral-inverse-border-hover: $dsn-color-neutral-border-default; // Inverse hover border
|
|
380
|
+
$dsn-color-neutral-inverse-border-active: $dsn-color-neutral-border-subtle; // Inverse active border
|
|
381
|
+
$dsn-color-neutral-inverse-color-default: $dsn-color-neutral-bg-active; // Inverse default text
|
|
382
|
+
$dsn-color-neutral-inverse-color-hover: $dsn-color-neutral-bg-hover; // Inverse hover text
|
|
383
|
+
$dsn-color-neutral-inverse-color-active: $dsn-color-neutral-bg-default; // Inverse active text
|
|
384
|
+
$dsn-color-neutral-inverse-color-subtle: $dsn-color-neutral-bg-subtle; // Inverse subtle text
|
|
385
|
+
$dsn-color-neutral-inverse-color-document: $dsn-color-neutral-bg-document; // Inverse document text
|
|
386
|
+
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
387
|
+
$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
|
|
388
|
+
$dsn-alert-border-radius: $dsn-border-radius-square; // Alert border radius (square by default; themes can override to add rounded corners)
|
|
389
|
+
$dsn-alert-border-width: $dsn-border-width-medium; // Alert border width (left border only)
|
|
390
|
+
$dsn-alert-column-gap: $dsn-space-inline-md; // Gap between icon and content
|
|
391
|
+
$dsn-alert-padding-block: $dsn-space-block-xl; // Vertical padding
|
|
392
|
+
$dsn-alert-padding-inline: $dsn-space-inline-xl; // Horizontal padding
|
|
393
|
+
$dsn-alert-row-gap: $dsn-space-row-md; // Gap between heading and body
|
|
394
|
+
$dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
|
|
395
|
+
$dsn-breadcrumb-navigation-column-gap: $dsn-space-column-md; // Gap between breadcrumb items
|
|
396
|
+
$dsn-breadcrumb-navigation-font-size: $dsn-text-font-size-sm; // Breadcrumb font size — sm (consistent met Link size small)
|
|
397
|
+
$dsn-breadcrumb-navigation-font-weight: $dsn-text-font-weight-default; // Breadcrumb font weight
|
|
398
|
+
$dsn-breadcrumb-navigation-line-height: $dsn-text-line-height-sm; // Breadcrumb line height — sm (consistent met Link size small)
|
|
399
|
+
$dsn-breadcrumb-navigation-current-color: $dsn-color-neutral-color-subtle; // Current page item color
|
|
400
|
+
$dsn-breadcrumb-navigation-item-min-block-size: $dsn-pointer-target-min-block-size; // Minimum touch/click target height
|
|
401
|
+
$dsn-breadcrumb-navigation-item-padding-block: $dsn-space-block-sm; // Vertical padding to reach min-block-size
|
|
402
|
+
$dsn-breadcrumb-navigation-item-padding-inline: $dsn-space-none; // No horizontal padding on items
|
|
403
|
+
$dsn-breadcrumb-navigation-link-column-gap: $dsn-space-text-xs; // Gap between icon and link text
|
|
404
|
+
$dsn-breadcrumb-navigation-separator-color: $dsn-color-neutral-color-subtle; // Separator icon color
|
|
405
|
+
$dsn-button-border-radius: $dsn-border-radius-md; // Button border radius
|
|
406
|
+
$dsn-button-border-width: $dsn-border-width-thin; // Button border width
|
|
407
|
+
$dsn-button-font-family: $dsn-text-font-family-default; // Button font family
|
|
408
|
+
$dsn-button-font-weight: $dsn-text-font-weight-bold; // Button font weight
|
|
409
|
+
$dsn-button-line-height: $dsn-text-line-height-md; // Button line height
|
|
410
|
+
$dsn-button-min-block-size: $dsn-pointer-target-min-block-size; // Button minimum block size (WCAG 2.5.5 touch target)
|
|
411
|
+
$dsn-button-min-inline-size: $dsn-pointer-target-min-inline-size; // Button minimum inline size (WCAG 2.5.5 touch target)
|
|
412
|
+
$dsn-button-default-background-color: $dsn-color-transparent; // Default button background
|
|
413
|
+
$dsn-button-default-negative-background-color: $dsn-color-transparent; // Default negative button background
|
|
414
|
+
$dsn-button-default-positive-background-color: $dsn-color-transparent; // Default positive button background
|
|
415
|
+
$dsn-button-strong-border-color: $dsn-color-transparent; // Strong button border
|
|
416
|
+
$dsn-button-strong-active-border-color: $dsn-color-transparent; // Strong button active border
|
|
417
|
+
$dsn-button-strong-hover-border-color: $dsn-color-transparent; // Strong button hover border
|
|
418
|
+
$dsn-button-strong-negative-border-color: $dsn-color-transparent; // Strong negative button border
|
|
419
|
+
$dsn-button-strong-negative-active-border-color: $dsn-color-transparent; // Strong negative button active border
|
|
420
|
+
$dsn-button-strong-negative-hover-border-color: $dsn-color-transparent; // Strong negative button hover border
|
|
421
|
+
$dsn-button-strong-positive-border-color: $dsn-color-transparent; // Strong positive button border
|
|
422
|
+
$dsn-button-strong-positive-active-border-color: $dsn-color-transparent; // Strong positive button active border
|
|
423
|
+
$dsn-button-strong-positive-hover-border-color: $dsn-color-transparent; // Strong positive button hover border
|
|
424
|
+
$dsn-button-subtle-background-color: $dsn-color-transparent; // Subtle button background
|
|
425
|
+
$dsn-button-subtle-border-color: $dsn-color-transparent; // Subtle button border
|
|
426
|
+
$dsn-button-subtle-active-border-color: $dsn-color-transparent; // Subtle button active border
|
|
427
|
+
$dsn-button-subtle-hover-border-color: $dsn-color-transparent; // Subtle button hover border
|
|
428
|
+
$dsn-button-subtle-negative-background-color: $dsn-color-transparent; // Subtle negative button background
|
|
429
|
+
$dsn-button-subtle-negative-border-color: $dsn-color-transparent; // Subtle negative button border
|
|
430
|
+
$dsn-button-subtle-negative-active-border-color: $dsn-color-transparent; // Subtle negative button active border
|
|
431
|
+
$dsn-button-subtle-negative-hover-border-color: $dsn-color-transparent; // Subtle negative button hover border
|
|
432
|
+
$dsn-button-subtle-positive-background-color: $dsn-color-transparent; // Subtle positive button background
|
|
433
|
+
$dsn-button-subtle-positive-border-color: $dsn-color-transparent; // Subtle positive button border
|
|
434
|
+
$dsn-button-subtle-positive-active-border-color: $dsn-color-transparent; // Subtle positive button active border
|
|
435
|
+
$dsn-button-subtle-positive-hover-border-color: $dsn-color-transparent; // Subtle positive button hover border
|
|
436
|
+
$dsn-button-disabled-background-color: $dsn-color-neutral-bg-subtle; // Disabled button background — neutral scale, variant-independent
|
|
437
|
+
$dsn-button-disabled-color: $dsn-color-neutral-color-subtle; // Disabled button text/icon color — neutral scale, variant-independent
|
|
438
|
+
$dsn-button-disabled-border-color: $dsn-color-neutral-border-subtle; // Disabled button border color — neutral scale, variant-independent
|
|
439
|
+
$dsn-button-size-default-font-size: $dsn-text-font-size-md; // Default button font size
|
|
440
|
+
$dsn-button-size-default-gap: $dsn-space-text-sm; // Default button gap between icon and text
|
|
441
|
+
$dsn-button-size-default-icon-only-padding: $dsn-space-block-md; // Default button icon-only padding
|
|
442
|
+
$dsn-button-size-default-padding-block: $dsn-space-block-md; // Default button vertical padding
|
|
443
|
+
$dsn-button-size-default-padding-inline: $dsn-space-inline-xl; // Default button horizontal padding
|
|
444
|
+
$dsn-button-size-large-font-size: $dsn-text-font-size-lg; // Large button font size
|
|
445
|
+
$dsn-button-size-large-gap: $dsn-space-text-md; // Large button gap between icon and text
|
|
446
|
+
$dsn-button-size-large-icon-only-padding: $dsn-space-block-lg; // Large button icon-only padding
|
|
447
|
+
$dsn-button-size-large-padding-block: $dsn-space-block-lg; // Large button vertical padding
|
|
448
|
+
$dsn-button-size-large-padding-inline: $dsn-space-inline-2xl; // Large button horizontal padding
|
|
449
|
+
$dsn-button-size-small-font-size: $dsn-text-font-size-sm; // Small button font size
|
|
450
|
+
$dsn-button-size-small-gap: $dsn-space-text-sm; // Small button gap between icon and text
|
|
451
|
+
$dsn-button-size-small-icon-only-padding: $dsn-space-block-sm; // Small button icon-only padding
|
|
452
|
+
$dsn-button-size-small-padding-block: $dsn-space-block-sm; // Small button vertical padding
|
|
453
|
+
$dsn-button-size-small-padding-inline: $dsn-space-inline-lg; // Small button horizontal padding
|
|
454
|
+
$dsn-card-background-color: $dsn-color-neutral-bg-document; // Card achtergrondkleur standaard — zelfde als paginaachtergrond
|
|
455
|
+
$dsn-card-background-color-hover: $dsn-color-neutral-bg-elevated; // Card achtergrondkleur bij hover — bg-elevated benadrukt elevatie
|
|
456
|
+
$dsn-card-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de card (8px)
|
|
457
|
+
$dsn-card-border-width: $dsn-border-width-thin; // Randbreedte van de card
|
|
458
|
+
$dsn-card-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de card
|
|
459
|
+
$dsn-card-box-shadow-hover: $dsn-box-shadow-md; // Schaduw bij hover — hogere elevatie benadrukt interactiviteit
|
|
460
|
+
$dsn-card-body-padding-block: $dsn-space-block-xl; // Verticale padding van de card body (16px)
|
|
461
|
+
$dsn-card-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card body (16px)
|
|
462
|
+
$dsn-card-body-row-gap: $dsn-space-block-lg; // Verticale ruimte tussen directe kinderen van de card body (12px)
|
|
463
|
+
$dsn-card-footer-padding-block-end: $dsn-space-block-3xl; // Onderkant padding van de card footer (24px)
|
|
464
|
+
$dsn-card-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de card footer (16px)
|
|
465
|
+
$dsn-card-image-placeholder-background-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de afbeeldingsplaceholder
|
|
466
|
+
$dsn-card-image-placeholder-color: $dsn-color-neutral-color-subtle; // Kleur van het icoon in de afbeeldingsplaceholder
|
|
467
|
+
$dsn-card-heading-font-family: $dsn-heading-font-family; // Lettertype van de card heading
|
|
468
|
+
$dsn-card-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de card heading
|
|
469
|
+
$dsn-card-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de card heading (20–24px fluid)
|
|
470
|
+
$dsn-card-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de card heading
|
|
471
|
+
$dsn-card-group-gap: $dsn-space-inline-xl; // Ruimte tussen cards in een CardGroup (16px)
|
|
472
|
+
$dsn-checkbox-group-border-width: $dsn-border-width-none; // No border by default for fieldset
|
|
473
|
+
$dsn-checkbox-group-gap: $dsn-space-block-sm; // Space between checkbox options in the group
|
|
474
|
+
$dsn-checkbox-group-margin: $dsn-space-none; // No margin by default for fieldset
|
|
475
|
+
$dsn-checkbox-group-padding: $dsn-space-none; // No padding by default for fieldset
|
|
476
|
+
$dsn-checkbox-option-gap: $dsn-space-text-md; // Gap between checkbox and label
|
|
477
|
+
$dsn-checkbox-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
478
|
+
$dsn-checkbox-border-radius: $dsn-border-radius-square; // Square corners for checkbox
|
|
479
|
+
$dsn-checkbox-border-width: $dsn-border-width-thin;
|
|
480
|
+
$dsn-checkbox-active-border-width: $dsn-border-width-medium;
|
|
481
|
+
$dsn-checkbox-checked-border-width: $dsn-border-width-thin;
|
|
482
|
+
$dsn-checkbox-focus-border-width: $dsn-border-width-medium;
|
|
483
|
+
$dsn-checkbox-hover-border-width: $dsn-border-width-medium;
|
|
484
|
+
$dsn-checkbox-invalid-border-width: $dsn-border-width-medium;
|
|
485
|
+
$dsn-checkbox-checked-active-border-width: $dsn-border-width-medium;
|
|
486
|
+
$dsn-checkbox-checked-focus-border-width: $dsn-border-width-medium;
|
|
487
|
+
$dsn-checkbox-checked-hover-border-width: $dsn-border-width-medium;
|
|
488
|
+
$dsn-checkbox-indeterminate-border-width: $dsn-border-width-thin;
|
|
489
|
+
$dsn-checkbox-indeterminate-active-border-width: $dsn-border-width-medium;
|
|
490
|
+
$dsn-checkbox-indeterminate-focus-border-width: $dsn-border-width-medium;
|
|
491
|
+
$dsn-checkbox-indeterminate-hover-border-width: $dsn-border-width-medium;
|
|
492
|
+
$dsn-container-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur — bg-elevated voor visuele scheiding van de pagina
|
|
493
|
+
$dsn-container-border-color: $dsn-color-neutral-border-subtle; // Subtiele border — minder prominent dan border-default
|
|
494
|
+
$dsn-container-border-radius: $dsn-border-radius-md;
|
|
495
|
+
$dsn-container-border-width: $dsn-border-width-thin;
|
|
496
|
+
$dsn-container-color: $dsn-color-neutral-color-document; // Tekstkleur — altijd de volledige document-kleur voor leesbaarheid
|
|
497
|
+
$dsn-container-padding-block: $dsn-space-block-3xl;
|
|
498
|
+
$dsn-container-padding-inline: $dsn-space-inline-3xl;
|
|
499
|
+
$dsn-container-elevated-box-shadow: $dsn-box-shadow-sm; // Lichte schaduw voor kaart-achtige containers (cards, panels)
|
|
500
|
+
$dsn-date-input-group-gap: $dsn-space-inline-md; // Gap between the day, month and year inputs
|
|
501
|
+
$dsn-date-input-group-label-gap: $dsn-space-text-sm; // Gap between each field label and its input
|
|
502
|
+
$dsn-date-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the calendar button (4px)
|
|
503
|
+
$dsn-date-input-icon-gap: $dsn-space-text-md; // Gap between calendar button and input text
|
|
504
|
+
$dsn-details-row-gap: $dsn-space-row-md; // Vertical gap between summary and content
|
|
505
|
+
$dsn-details-summary-gap: $dsn-space-text-sm; // Gap between chevron icon and label text
|
|
506
|
+
$dsn-details-content-border-color: $dsn-color-neutral-border-subtle; // Left border color for visual grouping
|
|
507
|
+
$dsn-details-content-border-inline-start-width: $dsn-border-width-medium; // Left border width
|
|
508
|
+
$dsn-details-content-padding-inline-start: $dsn-space-inline-xl; // Left padding — aligns content with label text
|
|
509
|
+
$dsn-details-content-padding-inline-end: $dsn-space-inline-xl; // Right padding
|
|
510
|
+
$dsn-details-content-padding-block: $dsn-space-block-xl; // Top and bottom padding
|
|
511
|
+
$dsn-dot-badge-pulse-easing: $dsn-transition-easing-default; // Easing van de pulse-animatie
|
|
512
|
+
$dsn-drawer-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
513
|
+
$dsn-drawer-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het zijpaneel — bg-elevated benadrukt elevatie boven de pagina
|
|
514
|
+
$dsn-drawer-border-width: $dsn-border-width-thin; // Randbreedte van het zijpaneel
|
|
515
|
+
$dsn-drawer-border-color: $dsn-color-neutral-border-subtle; // Randkleur van het zijpaneel
|
|
516
|
+
$dsn-drawer-box-shadow: $dsn-box-shadow-lg; // Schaduw van het zijpaneel — hoogste elevatie (lg)
|
|
517
|
+
$dsn-drawer-heading-font-family: $dsn-heading-font-family; // Lettertype van de zijpaneel-heading
|
|
518
|
+
$dsn-drawer-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de zijpaneel-heading
|
|
519
|
+
$dsn-drawer-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de zijpaneel-heading
|
|
520
|
+
$dsn-drawer-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de zijpaneel-heading
|
|
521
|
+
$dsn-drawer-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
|
|
522
|
+
$dsn-drawer-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
|
|
523
|
+
$dsn-drawer-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
|
|
524
|
+
$dsn-drawer-body-padding-block: $dsn-space-block-3xl; // Verticale padding van de body (24px)
|
|
525
|
+
$dsn-drawer-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
|
|
526
|
+
$dsn-drawer-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
527
|
+
$dsn-drawer-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
528
|
+
$dsn-drawer-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
529
|
+
$dsn-file-input-column-gap: $dsn-space-text-lg; // Gap between file-selector-button and filename text
|
|
530
|
+
$dsn-file-input-min-block-size: $dsn-pointer-target-min-block-size; // File input minimum height (WCAG touch target)
|
|
531
|
+
$dsn-file-input-min-inline-size: $dsn-pointer-target-min-inline-size; // File input minimum width (WCAG touch target)
|
|
532
|
+
$dsn-file-background-color: $dsn-color-neutral-bg-document; // Achtergrondkleur van het file component
|
|
533
|
+
$dsn-file-background-color-hover: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij hover in de interactieve variant — zelfde als Card
|
|
534
|
+
$dsn-file-background-color-active: $dsn-color-neutral-bg-elevated; // Achtergrondkleur bij active — zelfde als hover; geen box-shadow wijziging
|
|
535
|
+
$dsn-file-border-radius: $dsn-border-radius-md;
|
|
536
|
+
$dsn-file-border-width: $dsn-border-width-thin;
|
|
537
|
+
$dsn-file-border-color: $dsn-color-neutral-border-subtle;
|
|
538
|
+
$dsn-file-border-color-hover: $dsn-color-neutral-border-default; // Iets prominentere rand bij hover — signaleert interactiviteit
|
|
539
|
+
$dsn-file-border-color-active: $dsn-color-neutral-border-default; // Zelfde als hover
|
|
540
|
+
$dsn-file-box-shadow-hover: $dsn-box-shadow-md; // Hogere elevatie bij hover — zelfde als Card hover
|
|
541
|
+
$dsn-file-padding-block: $dsn-space-block-lg;
|
|
542
|
+
$dsn-file-padding-inline: $dsn-space-inline-xl;
|
|
543
|
+
$dsn-file-gap: $dsn-space-inline-lg; // Horizontale ruimte tussen media-vlak, content en actions
|
|
544
|
+
$dsn-file-content-gap: $dsn-space-block-xs; // Verticale ruimte tussen naam, meta en error message
|
|
545
|
+
$dsn-file-name-color: $dsn-color-neutral-color-default;
|
|
546
|
+
$dsn-file-name-font-weight: $dsn-text-font-weight-bold; // Bold gewicht benadrukt de bestandsnaam als primaire informatie
|
|
547
|
+
$dsn-file-meta-color: $dsn-color-neutral-color-subtle; // Subtielere kleur legt visuele hiërarchie vast t.o.v. de naam
|
|
548
|
+
$dsn-file-meta-font-size: $dsn-text-font-size-md;
|
|
549
|
+
$dsn-file-media-border-radius: $dsn-border-radius-sm;
|
|
550
|
+
$dsn-file-media-background-color: $dsn-color-neutral-bg-default;
|
|
551
|
+
$dsn-file-media-icon-color: $dsn-color-neutral-color-subtle;
|
|
552
|
+
$dsn-form-field-description-color: $dsn-color-neutral-color-subtle; // Form field description text color
|
|
553
|
+
$dsn-form-field-description-font-family: $dsn-text-font-family-default; // Form field description font family
|
|
554
|
+
$dsn-form-field-description-font-size: $dsn-text-font-size-md; // Form field description font size
|
|
555
|
+
$dsn-form-field-description-font-weight: $dsn-text-font-weight-default; // Form field description font weight
|
|
556
|
+
$dsn-form-field-description-line-height: $dsn-text-line-height-md; // Form field description line height
|
|
557
|
+
$dsn-form-field-description-margin-block-end: $dsn-space-block-md; // Space below description before form control
|
|
558
|
+
$dsn-form-field-error-message-font-family: $dsn-text-font-family-default; // Form field error message font family
|
|
559
|
+
$dsn-form-field-error-message-font-size: $dsn-text-font-size-md; // Form field error message font size
|
|
560
|
+
$dsn-form-field-error-message-font-weight: $dsn-text-font-weight-default; // Form field error message font weight
|
|
561
|
+
$dsn-form-field-error-message-gap: $dsn-space-text-sm; // Space between icon and error message text
|
|
562
|
+
$dsn-form-field-error-message-line-height: $dsn-text-line-height-md; // Form field error message line height
|
|
563
|
+
$dsn-form-field-error-message-margin-block-end: $dsn-space-block-md; // Space below error message before form control
|
|
564
|
+
$dsn-form-field-label-suffix-color: $dsn-color-neutral-color-document; // Form field label suffix text color
|
|
565
|
+
$dsn-form-field-label-suffix-font-family: $dsn-text-font-family-default; // Form field label suffix font family
|
|
566
|
+
$dsn-form-field-label-suffix-font-size: $dsn-text-font-size-md; // Form field label suffix font size
|
|
567
|
+
$dsn-form-field-label-suffix-font-weight: $dsn-text-font-weight-default; // Form field label suffix font weight
|
|
568
|
+
$dsn-form-field-label-suffix-line-height: $dsn-text-line-height-md; // Form field label suffix line height
|
|
569
|
+
$dsn-form-field-label-suffix-margin-inline-start: $dsn-space-text-sm; // Space between label text and suffix text
|
|
570
|
+
$dsn-form-field-label-color: $dsn-color-neutral-color-document; // Form field label text color
|
|
571
|
+
$dsn-form-field-label-font-family: $dsn-text-font-family-default; // Form field label font family
|
|
572
|
+
$dsn-form-field-label-font-size: $dsn-text-font-size-md; // Form field label font size
|
|
573
|
+
$dsn-form-field-label-font-weight: $dsn-text-font-weight-bold; // Form field label font weight
|
|
574
|
+
$dsn-form-field-label-line-height: $dsn-text-line-height-md; // Form field label line height
|
|
575
|
+
$dsn-form-field-label-margin-block-end: $dsn-space-block-md; // Space below label before form control (when no description follows)
|
|
576
|
+
$dsn-form-field-label-margin-block-end-with-description: $dsn-space-block-sm; // Space below label when description follows
|
|
577
|
+
$dsn-form-field-status-color: $dsn-color-neutral-color-subtle; // Form field status text color (subtle for non-critical info)
|
|
578
|
+
$dsn-form-field-status-font-family: $dsn-text-font-family-default; // Form field status font family
|
|
579
|
+
$dsn-form-field-status-font-size: $dsn-text-font-size-md; // Form field status font size
|
|
580
|
+
$dsn-form-field-status-font-weight: $dsn-text-font-weight-default; // Form field status font weight
|
|
581
|
+
$dsn-form-field-status-gap: $dsn-space-text-sm; // Gap between icon and text (positive and warning variants)
|
|
582
|
+
$dsn-form-field-status-line-height: $dsn-text-line-height-md; // Form field status line height
|
|
583
|
+
$dsn-form-field-status-margin-block-start: $dsn-space-block-md; // Space above status message after form control
|
|
584
|
+
$dsn-form-field-margin-block-end: $dsn-space-none; // Bottom margin of form field container
|
|
585
|
+
$dsn-form-field-margin-block-start: $dsn-space-none; // Top margin of form field container
|
|
586
|
+
$dsn-form-field-invalid-border-inline-start-width: $dsn-border-width-medium; // Left border width for invalid form fields
|
|
587
|
+
$dsn-form-field-invalid-padding-inline-start: $dsn-space-inline-xl; // Left padding for invalid form fields (to accommodate border)
|
|
588
|
+
$dsn-grid-margin: $dsn-space-column-3xl; // Outer padding on both sides of the grid container
|
|
589
|
+
$dsn-hero-padding-block: $dsn-space-block-4xl; // Verticale padding van de Hero-inhoud
|
|
590
|
+
$dsn-hero-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de dsn-hero__inner wrapper — stemt af op dsn-page-body-padding-inline
|
|
591
|
+
$dsn-image-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de afbeelding
|
|
592
|
+
$dsn-image-caption-color: $dsn-color-neutral-color-subtle; // Gedempte kleur voor bijschrift — bewust minder prominent dan bodytekst
|
|
593
|
+
$dsn-image-caption-font-size: $dsn-text-font-size-sm; // Iets kleiner dan bodytekst om hiërarchie te markeren
|
|
594
|
+
$dsn-image-caption-line-height: $dsn-text-line-height-sm; // Compacte regelafstand passend bij kleine tekst — consistent met font-size.sm
|
|
595
|
+
$dsn-image-caption-margin-block-start: $dsn-space-row-sm; // Kleine ademruimte tussen afbeelding en bijschrift
|
|
596
|
+
$dsn-link-gap: $dsn-space-text-sm; // Link gap between icon and text
|
|
597
|
+
$dsn-link-disabled-color: $dsn-color-neutral-color-subtle; // Link disabled text color
|
|
598
|
+
$dsn-link-size-default-font-size: $dsn-text-font-size-md; // Default link font size
|
|
599
|
+
$dsn-link-size-default-gap: $dsn-space-text-sm; // Default link gap between icon and text
|
|
600
|
+
$dsn-link-size-large-font-size: $dsn-text-font-size-lg; // Large link font size
|
|
601
|
+
$dsn-link-size-large-gap: $dsn-space-text-md; // Large link gap between icon and text
|
|
602
|
+
$dsn-link-size-small-font-size: $dsn-text-font-size-sm; // Small link font size
|
|
603
|
+
$dsn-link-size-small-gap: $dsn-space-text-sm; // Small link gap between icon and text
|
|
604
|
+
$dsn-logo-color-label: $dsn-color-neutral-bg-document; // Binnenste rechthoek — zelfde kleur als de documentachtergrond, zodat de letters als doorkijkjes werken.
|
|
605
|
+
$dsn-menu-item-font-size: $dsn-text-font-size-md; // Gedeeld: lettergrootte voor MenuLink en MenuButton
|
|
606
|
+
$dsn-menu-item-font-weight: $dsn-text-font-weight-default; // Gedeeld: letterdikte — regular voor navigatie-items
|
|
607
|
+
$dsn-menu-item-line-height: $dsn-text-line-height-md; // Gedeeld: regelhoogte
|
|
608
|
+
$dsn-menu-item-padding-block: $dsn-space-block-md; // Gedeeld: verticale padding
|
|
609
|
+
$dsn-menu-item-padding-inline: $dsn-space-inline-lg; // Gedeeld: horizontale padding
|
|
610
|
+
$dsn-menu-item-gap: $dsn-space-inline-md; // Gedeeld: ruimte tussen icoon, label en badge
|
|
611
|
+
$dsn-menu-item-min-block-size: $dsn-pointer-target-min-block-size; // Gedeeld: minimale raakbare hoogte — WCAG pointer target
|
|
612
|
+
$dsn-menu-item-background-color: $dsn-color-transparent; // Gedeeld: standaard achtergrondkleur
|
|
613
|
+
$dsn-menu-link-level-indent: $dsn-space-inline-3xl; // MenuLink-specifiek: inspringing per hiërarchisch niveau (level 2–4) — via margin-inline-start op de link
|
|
614
|
+
$dsn-menu-link-current-font-weight: $dsn-text-font-weight-bold; // MenuLink-specifiek: font weight voor de actieve/huidige pagina — bold voor visuele nadruk
|
|
615
|
+
$dsn-menu-gap-vertical: $dsn-space-block-md; // Kleine ruimte tussen items in verticale oriëntatie
|
|
616
|
+
$dsn-menu-gap-horizontal: $dsn-space-inline-sm; // Ruimte tussen items in horizontale oriëntatie
|
|
617
|
+
$dsn-modal-dialog-z-index: $dsn-z-index-500; // Positionering boven de backdrop (400) en onder de skip-link (600)
|
|
618
|
+
$dsn-modal-dialog-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van het dialoogvenster — bg-elevated benadrukt elevatie boven de pagina
|
|
619
|
+
$dsn-modal-dialog-border-radius: $dsn-border-radius-lg; // Afgeronde hoeken van het dialoogvenster (12px)
|
|
620
|
+
$dsn-modal-dialog-border-width: $dsn-border-width-thin; // Randbreedte van het dialoogvenster
|
|
621
|
+
$dsn-modal-dialog-border-color: $dsn-color-neutral-border-subtle; // Randkleur van het dialoogvenster
|
|
622
|
+
$dsn-modal-dialog-box-shadow: $dsn-box-shadow-lg; // Schaduw van het dialoogvenster — hoogste elevatie (lg)
|
|
623
|
+
$dsn-modal-dialog-heading-font-family: $dsn-heading-font-family; // Lettertype van de dialoogvenster-heading
|
|
624
|
+
$dsn-modal-dialog-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de dialoogvenster-heading
|
|
625
|
+
$dsn-modal-dialog-heading-font-size: $dsn-text-font-size-lg; // Tekstgrootte van de dialoogvenster-heading
|
|
626
|
+
$dsn-modal-dialog-heading-line-height: $dsn-text-line-height-lg; // Regelafstand van de dialoogvenster-heading
|
|
627
|
+
$dsn-modal-dialog-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
|
|
628
|
+
$dsn-modal-dialog-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
|
|
629
|
+
$dsn-modal-dialog-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
|
|
630
|
+
$dsn-modal-dialog-body-padding-block: $dsn-space-block-3xl; // Verticale padding van de body (24px)
|
|
631
|
+
$dsn-modal-dialog-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
|
|
632
|
+
$dsn-modal-dialog-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
633
|
+
$dsn-modal-dialog-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
634
|
+
$dsn-modal-dialog-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
635
|
+
$dsn-note-border-inline-start-width: $dsn-border-width-medium; // Note left border width
|
|
636
|
+
$dsn-note-column-gap: $dsn-space-inline-md; // Gap between icon and content
|
|
637
|
+
$dsn-note-padding-block: $dsn-space-block-xl; // Vertical padding
|
|
638
|
+
$dsn-note-padding-inline-end: $dsn-space-inline-xl; // Horizontal padding inline-end
|
|
639
|
+
$dsn-note-padding-inline-start: $dsn-space-inline-xl; // Horizontal padding inline-start (after the border)
|
|
640
|
+
$dsn-note-row-gap: $dsn-space-row-md; // Gap between heading and body
|
|
641
|
+
$dsn-note-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant (default)
|
|
642
|
+
$dsn-note-neutral-border-inline-start-color: $dsn-color-neutral-border-default; // Left border color for neutral variant (default)
|
|
643
|
+
$dsn-note-neutral-color: $dsn-color-neutral-color-document; // Text color for neutral variant (default)
|
|
644
|
+
$dsn-note-neutral-icon-color: $dsn-color-neutral-color-default; // Icon color for neutral variant (default)
|
|
645
|
+
$dsn-number-badge-font-size: $dsn-text-font-size-sm; // NumberBadge font size — zelfde schaal als StatusBadge (kleinst beschikbare stap)
|
|
646
|
+
$dsn-number-badge-line-height: $dsn-text-line-height-sm; // NumberBadge line height
|
|
647
|
+
$dsn-number-badge-font-weight: $dsn-text-font-weight-bold; // NumberBadge font weight — bold voor leesbaarheid op kleine afmeting
|
|
648
|
+
$dsn-number-badge-padding-block: $dsn-space-none; // Verticale padding
|
|
649
|
+
$dsn-number-badge-padding-inline: $dsn-space-inline-sm; // Horizontale padding
|
|
650
|
+
$dsn-number-badge-border-radius: $dsn-border-radius-round; // Pill-vorm via volledig ronde border-radius
|
|
651
|
+
$dsn-number-badge-border-width: $dsn-border-width-thin; // Transparante border voor forced-colors / High Contrast mode ondersteuning
|
|
652
|
+
$dsn-number-badge-border-color: $dsn-color-transparent; // Transparant by default; zichtbaar in forced-colors / High Contrast mode
|
|
653
|
+
$dsn-option-label-color: $dsn-color-neutral-color-document;
|
|
654
|
+
$dsn-option-label-font-family: $dsn-text-font-family-default;
|
|
655
|
+
$dsn-option-label-font-size: $dsn-text-font-size-md;
|
|
656
|
+
$dsn-option-label-font-weight: $dsn-text-font-weight-default;
|
|
657
|
+
$dsn-option-label-line-height: $dsn-text-line-height-md;
|
|
658
|
+
$dsn-ordered-list-color: $dsn-color-neutral-color-document; // Ordered list text color
|
|
659
|
+
$dsn-ordered-list-font-family: $dsn-text-font-family-default; // Ordered list font family
|
|
660
|
+
$dsn-ordered-list-font-size: $dsn-text-font-size-md; // Ordered list font size
|
|
661
|
+
$dsn-ordered-list-font-weight: $dsn-text-font-weight-default; // Ordered list font weight
|
|
662
|
+
$dsn-ordered-list-max-inline-size: $dsn-text-max-inline-size; // Ordered list max width for readability
|
|
663
|
+
$dsn-ordered-list-gap: $dsn-space-row-sm; // Space between list items
|
|
664
|
+
$dsn-ordered-list-line-height: $dsn-text-line-height-md; // Ordered list line height
|
|
665
|
+
$dsn-ordered-list-margin-block-end: $dsn-space-row-lg; // Ordered list bottom margin
|
|
666
|
+
$dsn-ordered-list-marker-color: $dsn-color-neutral-color-document; // Number marker color
|
|
667
|
+
$dsn-ordered-list-padding-inline-start: $dsn-space-inline-3xl; // Ordered list left indentation
|
|
668
|
+
$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
|
|
669
|
+
$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
|
|
670
|
+
$dsn-page-footer-padding-block: $dsn-space-block-6xl; // Verticale ademruimte van de footer-binnenbalk
|
|
671
|
+
$dsn-page-footer-slot-gap: $dsn-space-block-xl; // Verticale witruimte tussen gestapelde slots op small viewport
|
|
672
|
+
$dsn-page-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer-binnenbalk — zelfde schaal als PageHeader masthead en navbar
|
|
673
|
+
$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
|
|
674
|
+
$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
|
|
675
|
+
$dsn-page-header-padding-block: $dsn-space-block-md; // Verticale padding van de header-binnenbalk
|
|
676
|
+
$dsn-page-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header-binnenbalk — zelfde schaal als masthead en navbar
|
|
677
|
+
$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
|
|
678
|
+
$dsn-page-header-masthead-background-color: $dsn-color-neutral-bg-document; // Masthead achtergrond — zelfde neutrale kleur als pagina-achtergrond
|
|
679
|
+
$dsn-page-header-masthead-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de masthead
|
|
680
|
+
$dsn-page-header-masthead-padding-inline: $dsn-space-inline-xl; // Horizontale padding masthead — zelfde als navbar
|
|
681
|
+
$dsn-page-header-navbar-padding-inline: $dsn-space-inline-xl; // Horizontale padding navigatiebalk — zelfde als masthead
|
|
682
|
+
$dsn-page-header-secondary-nav-gap: $dsn-space-column-3xl; // Witruimte tussen servicemenu (Menu) en zoekveld in de masthead
|
|
683
|
+
$dsn-page-header-search-panel-padding-block: $dsn-space-block-md; // Verticale padding van het zoekpaneel
|
|
684
|
+
$dsn-page-header-search-panel-padding-inline: $dsn-space-inline-xl; // Horizontale padding van het zoekpaneel
|
|
685
|
+
$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
|
|
686
|
+
$dsn-page-header-compact-padding-block: $dsn-space-block-xl; // Verticale ademruimte in de compacte balk — zelfde schaal als masthead
|
|
687
|
+
$dsn-page-header-compact-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de compacte balk — zelfde schaal als masthead en navbar
|
|
688
|
+
$dsn-paragraph-color: $dsn-color-neutral-color-document; // Paragraph text color
|
|
689
|
+
$dsn-paragraph-font-family: $dsn-text-font-family-default; // Paragraph font family
|
|
690
|
+
$dsn-paragraph-font-weight: $dsn-text-font-weight-default; // Paragraph font weight
|
|
691
|
+
$dsn-paragraph-max-inline-size: $dsn-text-max-inline-size; // Paragraph max width for readability
|
|
692
|
+
$dsn-paragraph-default-font-size: $dsn-text-font-size-md; // Default paragraph font size
|
|
693
|
+
$dsn-paragraph-default-line-height: $dsn-text-line-height-md; // Default paragraph line height
|
|
694
|
+
$dsn-paragraph-default-margin-block-end: $dsn-space-row-lg; // Default paragraph bottom margin
|
|
695
|
+
$dsn-paragraph-lead-font-size: $dsn-text-font-size-lg; // Lead paragraph font size
|
|
696
|
+
$dsn-paragraph-lead-line-height: $dsn-text-line-height-lg; // Lead paragraph line height
|
|
697
|
+
$dsn-paragraph-lead-margin-block-end: $dsn-space-row-xl; // Lead paragraph bottom margin
|
|
698
|
+
$dsn-paragraph-small-print-font-size: $dsn-text-font-size-sm; // Small print paragraph font size
|
|
699
|
+
$dsn-paragraph-small-print-line-height: $dsn-text-line-height-sm; // Small print paragraph line height
|
|
700
|
+
$dsn-paragraph-small-print-margin-block-end: $dsn-space-row-md; // Small print paragraph bottom margin
|
|
701
|
+
$dsn-popover-background-color: $dsn-color-neutral-bg-elevated; // Achtergrondkleur van de popover — bg-elevated benadrukt elevatie boven de pagina
|
|
702
|
+
$dsn-popover-border-width: $dsn-border-width-thin; // Randbreedte van de popover
|
|
703
|
+
$dsn-popover-border-color: $dsn-color-neutral-border-subtle; // Randkleur van de popover
|
|
704
|
+
$dsn-popover-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de popover (8px) — ronder dan form inputs, passend bij het zwevende karakter
|
|
705
|
+
$dsn-popover-box-shadow: $dsn-box-shadow-md; // Schaduw van de popover — middel elevatie (md), hoger dan cards maar lager dan modals
|
|
706
|
+
$dsn-popover-z-index: $dsn-z-index-350; // Z-index van de popover — boven sticky headers (300), lager dan backdrop (400)
|
|
707
|
+
$dsn-popover-heading-font-family: $dsn-heading-font-family; // Lettertype van de popover-heading
|
|
708
|
+
$dsn-popover-heading-font-weight: $dsn-heading-font-weight; // Vetgedrukt van de popover-heading
|
|
709
|
+
$dsn-popover-heading-font-size: $dsn-text-font-size-md; // Tekstgrootte van de popover-heading (compacter dan ModalDialog)
|
|
710
|
+
$dsn-popover-heading-line-height: $dsn-text-line-height-md; // Regelafstand van de popover-heading
|
|
711
|
+
$dsn-popover-header-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de header (16px)
|
|
712
|
+
$dsn-popover-header-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de header (16px)
|
|
713
|
+
$dsn-popover-header-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de header (16px)
|
|
714
|
+
$dsn-popover-body-padding-block: $dsn-space-block-xl; // Verticale padding van de body (16px)
|
|
715
|
+
$dsn-popover-body-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de body (16px)
|
|
716
|
+
$dsn-popover-footer-padding-block-start: $dsn-space-block-xl; // Bovenkant padding van de footer (16px)
|
|
717
|
+
$dsn-popover-footer-padding-block-end: $dsn-space-block-xl; // Onderkant padding van de footer (16px)
|
|
718
|
+
$dsn-popover-footer-padding-inline: $dsn-space-inline-xl; // Horizontale padding van de footer (16px)
|
|
719
|
+
$dsn-progress-bar-color-track: $dsn-color-neutral-bg-default; // Grijze achtergrondtrack
|
|
720
|
+
$dsn-progress-bar-border-radius: $dsn-border-radius-round; // Volledig afgerond (pill-vorm) voor zowel track als fill
|
|
721
|
+
$dsn-progress-bar-gap-header: $dsn-space-block-xs; // Ruimte tussen percentage-tekst en balk
|
|
722
|
+
$dsn-progress-bar-gap-footer: $dsn-space-block-xs; // Ruimte tussen balk en beschrijving
|
|
723
|
+
$dsn-radio-group-border-width: $dsn-border-width-none; // No border by default for fieldset
|
|
724
|
+
$dsn-radio-group-gap: $dsn-space-block-sm; // Space between radio options in the group
|
|
725
|
+
$dsn-radio-group-margin: $dsn-space-none; // No margin by default for fieldset
|
|
726
|
+
$dsn-radio-group-padding: $dsn-space-none; // No padding by default for fieldset
|
|
727
|
+
$dsn-radio-option-gap: $dsn-space-text-md; // Gap between radio button and label
|
|
728
|
+
$dsn-radio-option-padding-block: $dsn-space-block-md; // Vertical padding for touch target accessibility (WCAG 2.5.5)
|
|
729
|
+
$dsn-radio-border-width: $dsn-border-width-thin;
|
|
730
|
+
$dsn-radio-active-border-width: $dsn-border-width-medium;
|
|
731
|
+
$dsn-radio-checked-border-width: $dsn-border-width-thin;
|
|
732
|
+
$dsn-radio-focus-border-width: $dsn-border-width-medium;
|
|
733
|
+
$dsn-radio-hover-border-width: $dsn-border-width-medium;
|
|
734
|
+
$dsn-radio-invalid-border-width: $dsn-border-width-medium;
|
|
735
|
+
$dsn-radio-checked-active-border-width: $dsn-border-width-medium;
|
|
736
|
+
$dsn-radio-checked-focus-border-width: $dsn-border-width-medium;
|
|
737
|
+
$dsn-radio-checked-hover-border-width: $dsn-border-width-medium;
|
|
738
|
+
$dsn-search-input-icon-gap: $dsn-space-text-md; // Gap between search icon and input text
|
|
739
|
+
$dsn-select-icon-gap: $dsn-space-text-md; // Gap between chevron icon and select text
|
|
740
|
+
$dsn-select-icon-inset-inline-end: $dsn-space-inline-md; // Distance from the inline-end border to the chevron icon (8px)
|
|
741
|
+
$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
|
|
742
|
+
$dsn-skip-link-padding-block: $dsn-space-block-md; // Verticale padding van de skip-link
|
|
743
|
+
$dsn-skip-link-padding-inline: $dsn-space-inline-lg; // Horizontale padding van de skip-link
|
|
744
|
+
$dsn-skip-link-border-radius: $dsn-border-radius-md; // Afgeronde hoeken van de skip-link
|
|
745
|
+
$dsn-skip-link-offset-block-start: $dsn-space-block-md; // Afstand van de bovenkant van het viewport bij focus
|
|
746
|
+
$dsn-skip-link-offset-inline-start: $dsn-space-inline-md; // Afstand van de linkerkant (of rechterkant in RTL) van het viewport bij focus
|
|
747
|
+
$dsn-spinner-stroke-width: $dsn-border-width-medium; // Lijndikte van de boog — identiek aan border.width.medium voor visuele consistentie
|
|
748
|
+
$dsn-spinner-track-color: $dsn-color-neutral-bg-subtle; // Achtergrondkleur van de cirkelbaan
|
|
749
|
+
$dsn-spinner-gap-size: $dsn-space-inline-md; // Ruimte tussen spinner en label
|
|
750
|
+
$dsn-status-badge-border-color: $dsn-color-transparent; // Status badge border color (transparent by default; visible in forced-colors / High Contrast mode)
|
|
751
|
+
$dsn-status-badge-border-radius: $dsn-border-radius-sm; // Status badge border radius
|
|
752
|
+
$dsn-status-badge-border-width: $dsn-border-width-thin; // Status badge border width
|
|
753
|
+
$dsn-status-badge-font-size: $dsn-text-font-size-sm; // Status badge font size
|
|
754
|
+
$dsn-status-badge-gap: $dsn-space-text-sm; // Gap between icon and label
|
|
755
|
+
$dsn-status-badge-line-height: $dsn-text-line-height-sm; // Status badge line height
|
|
756
|
+
$dsn-status-badge-padding-block: $dsn-space-block-xs; // Vertical padding
|
|
757
|
+
$dsn-status-badge-padding-inline: $dsn-space-inline-md; // Horizontal padding
|
|
758
|
+
$dsn-status-badge-neutral-background-color: $dsn-color-neutral-bg-default; // Background color for neutral variant
|
|
759
|
+
$dsn-status-badge-neutral-color: $dsn-color-neutral-color-default; // Text color for neutral variant
|
|
760
|
+
$dsn-summary-list-row-border-block-end-color: $dsn-color-neutral-border-subtle; // Color of the row separator border
|
|
761
|
+
$dsn-summary-list-row-border-block-end-width: $dsn-border-width-thin; // Width of the row separator border
|
|
762
|
+
$dsn-summary-list-row-gap: $dsn-space-inline-lg; // Horizontal gap between columns in the grid layout
|
|
763
|
+
$dsn-summary-list-row-padding-block: $dsn-space-block-lg; // Vertical spacing around each row — applies in both stacked and grid layout; matches Table cell padding
|
|
764
|
+
$dsn-summary-list-key-color: $dsn-color-neutral-color-document; // Text color of the key cell
|
|
765
|
+
$dsn-summary-list-key-font-weight: $dsn-text-font-weight-bold; // Bold weight distinguishes the key from the value visually
|
|
766
|
+
$dsn-summary-list-value-color: $dsn-color-neutral-color-document; // Text color of the value cell
|
|
767
|
+
$dsn-summary-list-actions-gap: $dsn-space-inline-3xl; // Gap between multiple action links in a single row
|
|
768
|
+
$dsn-summary-list-actions-margin-block-start-stacked: $dsn-space-block-md; // Extra space above the actions cell in the stacked (mobile) layout
|
|
769
|
+
$dsn-table-caption-color: $dsn-color-neutral-color-document;
|
|
770
|
+
$dsn-table-caption-font-family: $dsn-heading-font-family;
|
|
771
|
+
$dsn-table-caption-font-size: $dsn-text-font-size-xl;
|
|
772
|
+
$dsn-table-caption-font-weight: $dsn-heading-font-weight;
|
|
773
|
+
$dsn-table-caption-line-height: $dsn-text-line-height-xl;
|
|
774
|
+
$dsn-table-cell-padding-block-end: $dsn-space-block-lg;
|
|
775
|
+
$dsn-table-cell-padding-block-start: $dsn-space-block-lg;
|
|
776
|
+
$dsn-table-cell-padding-inline-end: $dsn-space-inline-xl;
|
|
777
|
+
$dsn-table-cell-padding-inline-start: $dsn-space-inline-xl;
|
|
778
|
+
$dsn-table-header-border-block-end-color: $dsn-color-neutral-border-subtle;
|
|
779
|
+
$dsn-table-header-border-block-end-width: $dsn-border-width-medium;
|
|
780
|
+
$dsn-table-header-color: $dsn-color-neutral-color-document;
|
|
781
|
+
$dsn-table-header-cell-font-weight: $dsn-text-font-weight-bold;
|
|
782
|
+
$dsn-table-row-border-block-end-color: $dsn-color-neutral-border-subtle;
|
|
783
|
+
$dsn-table-row-border-block-end-width: $dsn-border-width-thin;
|
|
784
|
+
$dsn-table-footer-border-block-start-color: $dsn-color-neutral-border-subtle;
|
|
785
|
+
$dsn-table-footer-border-block-start-width: $dsn-border-width-medium;
|
|
786
|
+
$dsn-table-footer-color: $dsn-color-neutral-color-document;
|
|
787
|
+
$dsn-table-footer-font-weight: $dsn-text-font-weight-bold;
|
|
788
|
+
$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
|
|
789
|
+
$dsn-table-wrapper-scroll-shadow-color: $dsn-color-shadow-scroll; // Kleur van de scroll-affordance schaduw aan de zijkanten van scrollbare tabellen
|
|
790
|
+
$dsn-text-area-border-radius: $dsn-form-control-border-radius; // Text area border radius
|
|
791
|
+
$dsn-text-area-min-block-size: $dsn-pointer-target-min-block-size; // Text area minimum height
|
|
792
|
+
$dsn-text-area-min-inline-size: $dsn-pointer-target-min-inline-size; // Text area minimum width
|
|
793
|
+
$dsn-text-area-focus-box-shadow-spread: $dsn-border-width-medium; // Text area focus box shadow spread (creates thicker border effect)
|
|
794
|
+
$dsn-text-area-hover-box-shadow-spread: $dsn-border-width-medium; // Text area hover box shadow spread (creates thicker border effect)
|
|
795
|
+
$dsn-text-area-invalid-box-shadow-spread: $dsn-border-width-medium; // Text area invalid box shadow spread (creates thicker border effect)
|
|
796
|
+
$dsn-text-input-border-radius: $dsn-form-control-border-radius; // Text input border radius
|
|
797
|
+
$dsn-text-input-column-gap: $dsn-space-text-lg; // Gap between text and icons (for future icon support)
|
|
798
|
+
$dsn-text-input-min-block-size: $dsn-pointer-target-min-block-size; // Text input minimum height (WCAG touch target)
|
|
799
|
+
$dsn-text-input-min-inline-size: $dsn-pointer-target-min-inline-size; // Text input minimum width (WCAG touch target)
|
|
800
|
+
$dsn-text-input-focus-box-shadow-spread: $dsn-border-width-medium; // Text input focus box shadow spread (creates thicker border effect)
|
|
801
|
+
$dsn-text-input-hover-box-shadow-spread: $dsn-border-width-medium; // Text input hover box shadow spread (creates thicker border effect)
|
|
802
|
+
$dsn-text-input-invalid-box-shadow-spread: $dsn-border-width-medium; // Text input invalid box shadow spread (creates thicker border effect)
|
|
803
|
+
$dsn-time-input-button-inset-inline-end: $dsn-space-inline-sm; // Distance from the inline-end border to the clock button (4px)
|
|
804
|
+
$dsn-time-input-icon-gap: $dsn-space-text-md; // Gap between clock button and input text
|
|
805
|
+
$dsn-unordered-list-color: $dsn-color-neutral-color-document; // Unordered list text color
|
|
806
|
+
$dsn-unordered-list-font-family: $dsn-text-font-family-default; // Unordered list font family
|
|
807
|
+
$dsn-unordered-list-font-size: $dsn-text-font-size-md; // Unordered list font size
|
|
808
|
+
$dsn-unordered-list-font-weight: $dsn-text-font-weight-default; // Unordered list font weight
|
|
809
|
+
$dsn-unordered-list-max-inline-size: $dsn-text-max-inline-size; // Unordered list max width for readability
|
|
810
|
+
$dsn-unordered-list-gap: $dsn-space-row-sm; // Space between list items
|
|
811
|
+
$dsn-unordered-list-line-height: $dsn-text-line-height-md; // Unordered list line height
|
|
812
|
+
$dsn-unordered-list-margin-block-end: $dsn-space-row-lg; // Unordered list bottom margin
|
|
813
|
+
$dsn-unordered-list-padding-inline-start: $dsn-space-inline-3xl; // Unordered list left indentation
|
|
814
|
+
$dsn-heading-level-1-color: $dsn-heading-color; // Heading 1 text color
|
|
815
|
+
$dsn-heading-level-2-color: $dsn-heading-color; // Heading 2 text color
|
|
816
|
+
$dsn-heading-level-3-color: $dsn-heading-color; // Heading 3 text color
|
|
817
|
+
$dsn-heading-level-4-color: $dsn-heading-color; // Heading 4 text color
|
|
818
|
+
$dsn-heading-level-5-color: $dsn-heading-color; // Heading 5 text color
|
|
819
|
+
$dsn-heading-level-6-color: $dsn-heading-color; // Heading 6 text color
|
|
820
|
+
$dsn-form-control-hover-color: $dsn-form-control-color; // Form control hover text color
|
|
821
|
+
$dsn-form-control-focus-background-color: $dsn-form-control-background-color; // Form control focus background
|
|
822
|
+
$dsn-form-control-focus-color: $dsn-form-control-color; // Form control focus text color
|
|
823
|
+
$dsn-form-control-active-color: $dsn-form-control-color; // Form control active text color
|
|
824
|
+
$dsn-form-control-invalid-background-color: $dsn-color-negative-bg-default; // Form control invalid background
|
|
825
|
+
$dsn-form-control-invalid-border-color: $dsn-color-negative-border-default; // Form control invalid border
|
|
826
|
+
$dsn-form-control-invalid-color: $dsn-color-negative-color-default; // Form control invalid text color
|
|
827
|
+
$dsn-color-accent-2-bg-document: $dsn-color-accent-1-bg-document; // Document background
|
|
828
|
+
$dsn-color-accent-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
829
|
+
$dsn-color-accent-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
|
|
830
|
+
$dsn-color-accent-2-bg-default: $dsn-color-accent-1-bg-default; // Default background
|
|
831
|
+
$dsn-color-accent-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
|
|
832
|
+
$dsn-color-accent-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background
|
|
833
|
+
$dsn-color-accent-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
|
|
834
|
+
$dsn-color-accent-2-border-default: $dsn-color-accent-1-border-default; // Default border
|
|
835
|
+
$dsn-color-accent-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
|
|
836
|
+
$dsn-color-accent-2-border-active: $dsn-color-accent-1-border-active; // Active state border
|
|
837
|
+
$dsn-color-accent-2-color-default: $dsn-color-accent-1-color-default; // Default text color
|
|
838
|
+
$dsn-color-accent-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
|
|
839
|
+
$dsn-color-accent-2-color-active: $dsn-color-accent-1-color-active; // Active state text
|
|
840
|
+
$dsn-color-accent-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
|
|
841
|
+
$dsn-color-accent-2-color-document: $dsn-color-accent-1-color-document; // Document text color
|
|
842
|
+
$dsn-color-accent-3-bg-document: $dsn-color-accent-1-bg-document; // Document background
|
|
843
|
+
$dsn-color-accent-3-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
844
|
+
$dsn-color-accent-3-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
|
|
845
|
+
$dsn-color-accent-3-bg-default: $dsn-color-accent-1-bg-default; // Default background
|
|
846
|
+
$dsn-color-accent-3-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
|
|
847
|
+
$dsn-color-accent-3-bg-active: $dsn-color-accent-1-bg-active; // Active state background
|
|
848
|
+
$dsn-color-accent-3-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
|
|
849
|
+
$dsn-color-accent-3-border-default: $dsn-color-accent-1-border-default; // Default border
|
|
850
|
+
$dsn-color-accent-3-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
|
|
851
|
+
$dsn-color-accent-3-border-active: $dsn-color-accent-1-border-active; // Active state border
|
|
852
|
+
$dsn-color-accent-3-color-default: $dsn-color-accent-1-color-default; // Default text color
|
|
853
|
+
$dsn-color-accent-3-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
|
|
854
|
+
$dsn-color-accent-3-color-active: $dsn-color-accent-1-color-active; // Active state text
|
|
855
|
+
$dsn-color-accent-3-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
|
|
856
|
+
$dsn-color-accent-3-color-document: $dsn-color-accent-1-color-document; // Document text color
|
|
857
|
+
$dsn-color-action-1-bg-document: $dsn-color-accent-1-bg-document; // Document background
|
|
858
|
+
$dsn-color-action-1-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
859
|
+
$dsn-color-action-1-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
|
|
860
|
+
$dsn-color-action-1-bg-default: $dsn-color-accent-1-bg-default; // Default background
|
|
861
|
+
$dsn-color-action-1-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
|
|
862
|
+
$dsn-color-action-1-bg-active: $dsn-color-accent-1-bg-active; // Active state background
|
|
863
|
+
$dsn-color-action-1-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
|
|
864
|
+
$dsn-color-action-1-border-default: $dsn-color-accent-1-border-default; // Default border
|
|
865
|
+
$dsn-color-action-1-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
|
|
866
|
+
$dsn-color-action-1-border-active: $dsn-color-accent-1-border-active; // Active state border
|
|
867
|
+
$dsn-color-action-1-color-default: $dsn-color-accent-1-color-default; // Default text color
|
|
868
|
+
$dsn-color-action-1-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
|
|
869
|
+
$dsn-color-action-1-color-active: $dsn-color-accent-1-color-active; // Active state text
|
|
870
|
+
$dsn-color-action-1-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
|
|
871
|
+
$dsn-color-action-1-color-document: $dsn-color-accent-1-color-document; // Document text color
|
|
872
|
+
$dsn-color-action-2-bg-document: $dsn-color-accent-1-bg-document; // Document background
|
|
873
|
+
$dsn-color-action-2-bg-elevated: $dsn-color-accent-1-bg-elevated; // Elevated background
|
|
874
|
+
$dsn-color-action-2-bg-subtle: $dsn-color-accent-1-bg-subtle; // Subtle background
|
|
875
|
+
$dsn-color-action-2-bg-default: $dsn-color-accent-1-bg-default; // Default background
|
|
876
|
+
$dsn-color-action-2-bg-hover: $dsn-color-accent-1-bg-hover; // Hover state background
|
|
877
|
+
$dsn-color-action-2-bg-active: $dsn-color-accent-1-bg-active; // Active state background
|
|
878
|
+
$dsn-color-action-2-border-subtle: $dsn-color-accent-1-border-subtle; // Subtle border
|
|
879
|
+
$dsn-color-action-2-border-default: $dsn-color-accent-1-border-default; // Default border
|
|
880
|
+
$dsn-color-action-2-border-hover: $dsn-color-accent-1-border-hover; // Hover state border
|
|
881
|
+
$dsn-color-action-2-border-active: $dsn-color-accent-1-border-active; // Active state border
|
|
882
|
+
$dsn-color-action-2-color-default: $dsn-color-accent-1-color-default; // Default text color
|
|
883
|
+
$dsn-color-action-2-color-hover: $dsn-color-accent-1-color-hover; // Hover state text
|
|
884
|
+
$dsn-color-action-2-color-active: $dsn-color-accent-1-color-active; // Active state text
|
|
885
|
+
$dsn-color-action-2-color-subtle: $dsn-color-accent-1-color-subtle; // Subtle text color
|
|
886
|
+
$dsn-color-action-2-color-document: $dsn-color-accent-1-color-document; // Document text color
|
|
887
|
+
$dsn-color-accent-1-inverse-bg-document: $dsn-color-neutral-inverse-bg-document; // Inverse document background
|
|
888
|
+
$dsn-color-accent-1-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated; // Elevated background (inverse)
|
|
889
|
+
$dsn-color-accent-1-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle; // Inverse subtle background
|
|
890
|
+
$dsn-color-accent-1-inverse-bg-default: $dsn-color-neutral-inverse-bg-default; // Inverse default background
|
|
891
|
+
$dsn-color-accent-1-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover; // Inverse hover background
|
|
892
|
+
$dsn-color-accent-1-inverse-bg-active: $dsn-color-neutral-inverse-bg-active; // Inverse active background
|
|
893
|
+
$dsn-color-accent-1-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle; // Inverse subtle border
|
|
894
|
+
$dsn-color-accent-1-inverse-border-default: $dsn-color-neutral-inverse-border-default; // Inverse default border
|
|
895
|
+
$dsn-color-accent-1-inverse-border-hover: $dsn-color-neutral-inverse-border-hover; // Inverse hover border
|
|
896
|
+
$dsn-color-accent-1-inverse-border-active: $dsn-color-neutral-inverse-border-active; // Inverse active border
|
|
897
|
+
$dsn-color-accent-1-inverse-color-default: $dsn-color-neutral-inverse-color-default; // Inverse default text
|
|
898
|
+
$dsn-color-accent-1-inverse-color-hover: $dsn-color-neutral-inverse-color-hover; // Inverse hover text
|
|
899
|
+
$dsn-color-accent-1-inverse-color-active: $dsn-color-neutral-inverse-color-active; // Inverse active text
|
|
900
|
+
$dsn-color-accent-1-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle; // Inverse subtle text
|
|
901
|
+
$dsn-color-accent-1-inverse-color-document: $dsn-color-neutral-inverse-color-document; // Inverse document text
|
|
902
|
+
$dsn-color-positive-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
903
|
+
$dsn-color-positive-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
904
|
+
$dsn-color-positive-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
905
|
+
$dsn-color-positive-inverse-bg-default: $dsn-color-neutral-inverse-bg-default;
|
|
906
|
+
$dsn-color-positive-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover;
|
|
907
|
+
$dsn-color-positive-inverse-bg-active: $dsn-color-neutral-inverse-bg-active;
|
|
908
|
+
$dsn-color-positive-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle;
|
|
909
|
+
$dsn-color-positive-inverse-border-default: $dsn-color-neutral-inverse-border-default;
|
|
910
|
+
$dsn-color-positive-inverse-border-hover: $dsn-color-neutral-inverse-border-hover;
|
|
911
|
+
$dsn-color-positive-inverse-border-active: $dsn-color-neutral-inverse-border-active;
|
|
912
|
+
$dsn-color-positive-inverse-color-default: $dsn-color-neutral-inverse-color-default;
|
|
913
|
+
$dsn-color-positive-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
914
|
+
$dsn-color-positive-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
915
|
+
$dsn-color-positive-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
916
|
+
$dsn-color-positive-inverse-color-document: $dsn-color-neutral-inverse-color-document;
|
|
917
|
+
$dsn-color-negative-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
918
|
+
$dsn-color-negative-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
919
|
+
$dsn-color-negative-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
920
|
+
$dsn-color-negative-inverse-bg-default: $dsn-color-neutral-inverse-bg-default;
|
|
921
|
+
$dsn-color-negative-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover;
|
|
922
|
+
$dsn-color-negative-inverse-bg-active: $dsn-color-neutral-inverse-bg-active;
|
|
923
|
+
$dsn-color-negative-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle;
|
|
924
|
+
$dsn-color-negative-inverse-border-default: $dsn-color-neutral-inverse-border-default;
|
|
925
|
+
$dsn-color-negative-inverse-border-hover: $dsn-color-neutral-inverse-border-hover;
|
|
926
|
+
$dsn-color-negative-inverse-border-active: $dsn-color-neutral-inverse-border-active;
|
|
927
|
+
$dsn-color-negative-inverse-color-default: $dsn-color-neutral-inverse-color-default;
|
|
928
|
+
$dsn-color-negative-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
929
|
+
$dsn-color-negative-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
930
|
+
$dsn-color-negative-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
931
|
+
$dsn-color-negative-inverse-color-document: $dsn-color-neutral-inverse-color-document;
|
|
932
|
+
$dsn-color-warning-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
933
|
+
$dsn-color-warning-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
934
|
+
$dsn-color-warning-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
935
|
+
$dsn-color-warning-inverse-bg-default: $dsn-color-neutral-inverse-bg-default;
|
|
936
|
+
$dsn-color-warning-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover;
|
|
937
|
+
$dsn-color-warning-inverse-bg-active: $dsn-color-neutral-inverse-bg-active;
|
|
938
|
+
$dsn-color-warning-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle;
|
|
939
|
+
$dsn-color-warning-inverse-border-default: $dsn-color-neutral-inverse-border-default;
|
|
940
|
+
$dsn-color-warning-inverse-border-hover: $dsn-color-neutral-inverse-border-hover;
|
|
941
|
+
$dsn-color-warning-inverse-border-active: $dsn-color-neutral-inverse-border-active;
|
|
942
|
+
$dsn-color-warning-inverse-color-default: $dsn-color-neutral-inverse-color-default;
|
|
943
|
+
$dsn-color-warning-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
944
|
+
$dsn-color-warning-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
945
|
+
$dsn-color-warning-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
946
|
+
$dsn-color-warning-inverse-color-document: $dsn-color-neutral-inverse-color-document;
|
|
947
|
+
$dsn-color-info-inverse-bg-document: $dsn-color-neutral-inverse-bg-document;
|
|
948
|
+
$dsn-color-info-inverse-bg-elevated: $dsn-color-neutral-inverse-bg-elevated;
|
|
949
|
+
$dsn-color-info-inverse-bg-subtle: $dsn-color-neutral-inverse-bg-subtle;
|
|
950
|
+
$dsn-color-info-inverse-bg-default: $dsn-color-neutral-inverse-bg-default;
|
|
951
|
+
$dsn-color-info-inverse-bg-hover: $dsn-color-neutral-inverse-bg-hover;
|
|
952
|
+
$dsn-color-info-inverse-bg-active: $dsn-color-neutral-inverse-bg-active;
|
|
953
|
+
$dsn-color-info-inverse-border-subtle: $dsn-color-neutral-inverse-border-subtle;
|
|
954
|
+
$dsn-color-info-inverse-border-default: $dsn-color-neutral-inverse-border-default;
|
|
955
|
+
$dsn-color-info-inverse-border-hover: $dsn-color-neutral-inverse-border-hover;
|
|
956
|
+
$dsn-color-info-inverse-border-active: $dsn-color-neutral-inverse-border-active;
|
|
957
|
+
$dsn-color-info-inverse-color-default: $dsn-color-neutral-inverse-color-default;
|
|
958
|
+
$dsn-color-info-inverse-color-hover: $dsn-color-neutral-inverse-color-hover;
|
|
959
|
+
$dsn-color-info-inverse-color-active: $dsn-color-neutral-inverse-color-active;
|
|
960
|
+
$dsn-color-info-inverse-color-subtle: $dsn-color-neutral-inverse-color-subtle;
|
|
961
|
+
$dsn-color-info-inverse-color-document: $dsn-color-neutral-inverse-color-document;
|
|
962
|
+
$dsn-alert-icon-size: $dsn-icon-size-xl; // Alert icon size (also used as grid column width)
|
|
963
|
+
$dsn-alert-info-background-color: $dsn-color-info-bg-default; // Background color for info variant (default)
|
|
964
|
+
$dsn-alert-info-border-color: $dsn-color-info-border-default; // Border color for info variant (default)
|
|
965
|
+
$dsn-alert-info-color: $dsn-color-info-color-document; // Text color for info variant (default)
|
|
966
|
+
$dsn-alert-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant (default)
|
|
967
|
+
$dsn-alert-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
|
|
968
|
+
$dsn-alert-negative-border-color: $dsn-color-negative-border-default; // Border color for negative variant
|
|
969
|
+
$dsn-alert-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
|
|
970
|
+
$dsn-alert-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
|
|
971
|
+
$dsn-alert-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
|
|
972
|
+
$dsn-alert-positive-border-color: $dsn-color-positive-border-default; // Border color for positive variant
|
|
973
|
+
$dsn-alert-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
|
|
974
|
+
$dsn-alert-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
|
|
975
|
+
$dsn-alert-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
|
|
976
|
+
$dsn-alert-warning-border-color: $dsn-color-warning-border-default; // Border color for warning variant
|
|
977
|
+
$dsn-alert-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
|
|
978
|
+
$dsn-alert-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
|
|
979
|
+
$dsn-breadcrumb-navigation-separator-size: $dsn-icon-size-sm; // Separator icon size — sm (kleiner dan terug-icoon)
|
|
980
|
+
$dsn-breadcrumb-navigation-icon-size: $dsn-icon-size-sm; // Back-icon size — sm (consistent met Link size small)
|
|
981
|
+
$dsn-button-default-negative-border-color: $dsn-color-negative-border-default; // Default negative button border
|
|
982
|
+
$dsn-button-default-negative-color: $dsn-color-negative-color-default; // Default negative button text/icon color
|
|
983
|
+
$dsn-button-default-negative-active-background-color: $dsn-color-negative-bg-active; // Default negative button active background
|
|
984
|
+
$dsn-button-default-negative-active-border-color: $dsn-color-negative-border-active; // Default negative button active border
|
|
985
|
+
$dsn-button-default-negative-active-color: $dsn-color-negative-color-active; // Default negative button active text/icon color
|
|
986
|
+
$dsn-button-default-negative-hover-background-color: $dsn-color-negative-bg-hover; // Default negative button hover background
|
|
987
|
+
$dsn-button-default-negative-hover-border-color: $dsn-color-negative-border-hover; // Default negative button hover border
|
|
988
|
+
$dsn-button-default-negative-hover-color: $dsn-color-negative-color-hover; // Default negative button hover text/icon color
|
|
989
|
+
$dsn-button-default-positive-border-color: $dsn-color-positive-border-default; // Default positive button border
|
|
990
|
+
$dsn-button-default-positive-color: $dsn-color-positive-color-default; // Default positive button text/icon color
|
|
991
|
+
$dsn-button-default-positive-active-background-color: $dsn-color-positive-bg-active; // Default positive button active background
|
|
992
|
+
$dsn-button-default-positive-active-border-color: $dsn-color-positive-border-active; // Default positive button active border
|
|
993
|
+
$dsn-button-default-positive-active-color: $dsn-color-positive-color-active; // Default positive button active text/icon color
|
|
994
|
+
$dsn-button-default-positive-hover-background-color: $dsn-color-positive-bg-hover; // Default positive button hover background
|
|
995
|
+
$dsn-button-default-positive-hover-border-color: $dsn-color-positive-border-hover; // Default positive button hover border
|
|
996
|
+
$dsn-button-default-positive-hover-color: $dsn-color-positive-color-hover; // Default positive button hover text/icon color
|
|
997
|
+
$dsn-button-subtle-negative-color: $dsn-color-negative-color-default; // Subtle negative button text/icon color
|
|
998
|
+
$dsn-button-subtle-negative-active-background-color: $dsn-color-negative-bg-active; // Subtle negative button active background
|
|
999
|
+
$dsn-button-subtle-negative-active-color: $dsn-color-negative-color-active; // Subtle negative button active text/icon color
|
|
1000
|
+
$dsn-button-subtle-negative-hover-background-color: $dsn-color-negative-bg-hover; // Subtle negative button hover background
|
|
1001
|
+
$dsn-button-subtle-negative-hover-color: $dsn-color-negative-color-hover; // Subtle negative button hover text/icon color
|
|
1002
|
+
$dsn-button-subtle-positive-color: $dsn-color-positive-color-default; // Subtle positive button text/icon color
|
|
1003
|
+
$dsn-button-subtle-positive-active-background-color: $dsn-color-positive-bg-active; // Subtle positive button active background
|
|
1004
|
+
$dsn-button-subtle-positive-active-color: $dsn-color-positive-color-active; // Subtle positive button active text/icon color
|
|
1005
|
+
$dsn-button-subtle-positive-hover-background-color: $dsn-color-positive-bg-hover; // Subtle positive button hover background
|
|
1006
|
+
$dsn-button-subtle-positive-hover-color: $dsn-color-positive-color-hover; // Subtle positive button hover text/icon color
|
|
1007
|
+
$dsn-button-size-default-icon-size: $dsn-icon-size-md; // Default button icon size
|
|
1008
|
+
$dsn-button-size-large-icon-size: $dsn-icon-size-lg; // Large button icon size
|
|
1009
|
+
$dsn-button-size-small-icon-size: $dsn-icon-size-sm; // Small button icon size
|
|
1010
|
+
$dsn-card-heading-color: $dsn-heading-color; // Kleur van de card heading
|
|
1011
|
+
$dsn-checkbox-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
|
|
1012
|
+
$dsn-checkbox-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
|
|
1013
|
+
$dsn-checkbox-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
|
|
1014
|
+
$dsn-checkbox-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
|
|
1015
|
+
$dsn-checkbox-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
|
|
1016
|
+
$dsn-checkbox-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Space below the legend before the checkbox options (uses smaller margin like when description follows)
|
|
1017
|
+
$dsn-checkbox-background-color: $dsn-form-control-background-color;
|
|
1018
|
+
$dsn-checkbox-border-color: $dsn-form-control-border-color;
|
|
1019
|
+
$dsn-checkbox-active-background-color: $dsn-form-control-active-background-color;
|
|
1020
|
+
$dsn-checkbox-active-border-color: $dsn-form-control-active-border-color;
|
|
1021
|
+
$dsn-checkbox-checked-color: $dsn-color-neutral-inverse-color-default; // Check icon color
|
|
1022
|
+
$dsn-checkbox-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1023
|
+
$dsn-checkbox-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1024
|
+
$dsn-checkbox-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1025
|
+
$dsn-checkbox-hover-background-color: $dsn-form-control-hover-background-color;
|
|
1026
|
+
$dsn-checkbox-hover-border-color: $dsn-form-control-hover-border-color;
|
|
1027
|
+
$dsn-checkbox-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1028
|
+
$dsn-checkbox-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1029
|
+
$dsn-checkbox-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1030
|
+
$dsn-checkbox-checked-disabled-color: $dsn-form-control-disabled-color;
|
|
1031
|
+
$dsn-checkbox-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1032
|
+
$dsn-checkbox-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1033
|
+
$dsn-checkbox-indeterminate-color: $dsn-color-neutral-inverse-color-default; // Indeterminate icon (minus) color
|
|
1034
|
+
$dsn-checkbox-indeterminate-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1035
|
+
$dsn-checkbox-indeterminate-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1036
|
+
$dsn-checkbox-indeterminate-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1037
|
+
$dsn-checkbox-indeterminate-disabled-color: $dsn-form-control-disabled-color;
|
|
1038
|
+
$dsn-checkbox-indeterminate-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1039
|
+
$dsn-checkbox-indeterminate-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1040
|
+
$dsn-drawer-heading-color: $dsn-heading-color; // Kleur van de zijpaneel-heading
|
|
1041
|
+
$dsn-file-input-color: $dsn-form-control-placeholder-color; // Subtle text color for filename / 'No file chosen' text
|
|
1042
|
+
$dsn-file-input-font-family: $dsn-form-control-font-family; // File input font family
|
|
1043
|
+
$dsn-file-input-font-size: $dsn-form-control-font-size; // File input font size
|
|
1044
|
+
$dsn-file-input-font-weight: $dsn-form-control-font-weight; // File input font weight
|
|
1045
|
+
$dsn-file-input-line-height: $dsn-form-control-line-height; // File input line height
|
|
1046
|
+
$dsn-file-input-disabled-color: $dsn-form-control-disabled-color; // Muted text color for disabled state
|
|
1047
|
+
$dsn-file-border-color-error: $dsn-color-negative-border-default; // Randkleur in de error state — zelfde schaal als FormFieldset bij invalid
|
|
1048
|
+
$dsn-file-media-icon-size: $dsn-icon-size-md;
|
|
1049
|
+
$dsn-file-status-icon-color: $dsn-color-positive-color-default; // Zelfde token als FormFieldStatus positive variant
|
|
1050
|
+
$dsn-file-status-icon-size: $dsn-icon-size-md;
|
|
1051
|
+
$dsn-form-field-error-message-color: $dsn-color-negative-color-default; // Form field error message text color (negative sentiment)
|
|
1052
|
+
$dsn-form-field-error-message-icon-size: $dsn-icon-size-md; // Error message icon size
|
|
1053
|
+
$dsn-form-field-status-icon-size: $dsn-icon-size-md; // Icon size for positive and warning variants
|
|
1054
|
+
$dsn-form-field-status-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
|
|
1055
|
+
$dsn-form-field-status-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
|
|
1056
|
+
$dsn-form-field-invalid-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for invalid form fields
|
|
1057
|
+
$dsn-hero-background-color-default: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de standaard Hero — licht blauw accent-1
|
|
1058
|
+
$dsn-hero-color-default: $dsn-color-accent-1-color-default; // Tekstkleur in de standaard Hero
|
|
1059
|
+
$dsn-link-icon-size: $dsn-icon-size-md; // Link icon size
|
|
1060
|
+
$dsn-link-size-default-icon-size: $dsn-icon-size-md; // Default link icon size
|
|
1061
|
+
$dsn-link-size-large-icon-size: $dsn-icon-size-lg; // Large link icon size
|
|
1062
|
+
$dsn-link-size-small-icon-size: $dsn-icon-size-sm; // Small link icon size
|
|
1063
|
+
$dsn-menu-item-icon-size: $dsn-icon-size-md; // Gedeeld: icoongrootte
|
|
1064
|
+
$dsn-modal-dialog-heading-color: $dsn-heading-color; // Kleur van de dialoogvenster-heading
|
|
1065
|
+
$dsn-note-icon-size: $dsn-icon-size-xl; // Note icon size (also used as grid column width)
|
|
1066
|
+
$dsn-note-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
|
|
1067
|
+
$dsn-note-info-border-inline-start-color: $dsn-color-info-border-default; // Left border color for info variant
|
|
1068
|
+
$dsn-note-info-color: $dsn-color-info-color-document; // Text color for info variant
|
|
1069
|
+
$dsn-note-info-icon-color: $dsn-color-info-color-default; // Icon color for info variant
|
|
1070
|
+
$dsn-note-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
|
|
1071
|
+
$dsn-note-negative-border-inline-start-color: $dsn-color-negative-border-default; // Left border color for negative variant
|
|
1072
|
+
$dsn-note-negative-color: $dsn-color-negative-color-document; // Text color for negative variant
|
|
1073
|
+
$dsn-note-negative-icon-color: $dsn-color-negative-color-default; // Icon color for negative variant
|
|
1074
|
+
$dsn-note-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
|
|
1075
|
+
$dsn-note-positive-border-inline-start-color: $dsn-color-positive-border-default; // Left border color for positive variant
|
|
1076
|
+
$dsn-note-positive-color: $dsn-color-positive-color-document; // Text color for positive variant
|
|
1077
|
+
$dsn-note-positive-icon-color: $dsn-color-positive-color-default; // Icon color for positive variant
|
|
1078
|
+
$dsn-note-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
|
|
1079
|
+
$dsn-note-warning-border-inline-start-color: $dsn-color-warning-border-default; // Left border color for warning variant
|
|
1080
|
+
$dsn-note-warning-color: $dsn-color-warning-color-document; // Text color for warning variant
|
|
1081
|
+
$dsn-note-warning-icon-color: $dsn-color-warning-color-default; // Icon color for warning variant
|
|
1082
|
+
$dsn-number-badge-neutral-color: $dsn-color-neutral-inverse-color-default; // Tekstkleur voor neutral variant (wit op donkere achtergrond)
|
|
1083
|
+
$dsn-number-badge-neutral-background-color: $dsn-color-neutral-inverse-bg-default; // Achtergrondkleur voor neutral variant
|
|
1084
|
+
$dsn-option-label-disabled-color: $dsn-form-control-disabled-color;
|
|
1085
|
+
$dsn-page-footer-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van de PageFooter — merkkleur accent-1 als huisstijldrager
|
|
1086
|
+
$dsn-page-footer-border-block-start-color: $dsn-color-accent-1-border-default; // Kleur van de bovenkantrand — accent-1 border-default voor subtiele maar zichtbare scheiding met de pagina-inhoud
|
|
1087
|
+
$dsn-page-header-border-block-end-color: $dsn-color-accent-1-color-default; // Kleur van de onderkantrand — merkkleur die de header verankert aan het accent-1 palet
|
|
1088
|
+
$dsn-page-header-navbar-background-color: $dsn-color-accent-1-bg-default; // Navigatiebalk achtergrond — merkkleur accent-1
|
|
1089
|
+
$dsn-page-header-search-panel-background-color: $dsn-color-accent-1-bg-default; // Achtergrondkleur van het zoekpaneel — merkkleur voor branding
|
|
1090
|
+
$dsn-popover-heading-color: $dsn-heading-color; // Kleur van de popover-heading
|
|
1091
|
+
$dsn-progress-bar-color-fill: $dsn-color-accent-1-color-default; // Blauwe vulbalk — zelfde primaire accentkleur als Spinner
|
|
1092
|
+
$dsn-radio-group-legend-color: $dsn-form-field-label-color; // Text color for the legend (reuses form field label)
|
|
1093
|
+
$dsn-radio-group-legend-font-family: $dsn-form-field-label-font-family; // Font family for the legend (reuses form field label)
|
|
1094
|
+
$dsn-radio-group-legend-font-size: $dsn-form-field-label-font-size; // Font size for the legend (reuses form field label)
|
|
1095
|
+
$dsn-radio-group-legend-font-weight: $dsn-form-field-label-font-weight; // Font weight for the legend (reuses form field label)
|
|
1096
|
+
$dsn-radio-group-legend-line-height: $dsn-form-field-label-line-height; // Line height for the legend (reuses form field label)
|
|
1097
|
+
$dsn-radio-group-legend-margin-block-end: $dsn-form-field-label-margin-block-end-with-description; // Space below the legend before the radio options (uses smaller margin like when description follows)
|
|
1098
|
+
$dsn-radio-background-color: $dsn-form-control-background-color;
|
|
1099
|
+
$dsn-radio-border-color: $dsn-form-control-border-color;
|
|
1100
|
+
$dsn-radio-color: $dsn-form-control-border-color; // Inner circle color in default state
|
|
1101
|
+
$dsn-radio-active-background-color: $dsn-form-control-active-background-color;
|
|
1102
|
+
$dsn-radio-active-border-color: $dsn-form-control-active-border-color;
|
|
1103
|
+
$dsn-radio-active-color: $dsn-form-control-active-border-color;
|
|
1104
|
+
$dsn-radio-checked-color: $dsn-color-neutral-inverse-color-default; // Inner circle color when checked
|
|
1105
|
+
$dsn-radio-disabled-background-color: $dsn-form-control-disabled-background-color;
|
|
1106
|
+
$dsn-radio-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1107
|
+
$dsn-radio-disabled-color: $dsn-form-control-disabled-border-color;
|
|
1108
|
+
$dsn-radio-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1109
|
+
$dsn-radio-focus-color: $dsn-form-control-focus-border-color;
|
|
1110
|
+
$dsn-radio-hover-background-color: $dsn-form-control-hover-background-color;
|
|
1111
|
+
$dsn-radio-hover-border-color: $dsn-form-control-hover-border-color;
|
|
1112
|
+
$dsn-radio-hover-color: $dsn-form-control-hover-border-color;
|
|
1113
|
+
$dsn-radio-checked-active-color: $dsn-color-neutral-inverse-color-default;
|
|
1114
|
+
$dsn-radio-checked-disabled-background-color: $dsn-form-control-disabled-accent-color;
|
|
1115
|
+
$dsn-radio-checked-disabled-border-color: $dsn-form-control-disabled-border-color;
|
|
1116
|
+
$dsn-radio-checked-disabled-color: $dsn-form-control-disabled-color; // Inner circle color - dark text color for contrast against disabled accent background
|
|
1117
|
+
$dsn-radio-checked-focus-border-color: $dsn-form-control-focus-border-color;
|
|
1118
|
+
$dsn-radio-checked-hover-color: $dsn-color-neutral-inverse-color-default;
|
|
1119
|
+
$dsn-search-input-icon-size: $dsn-icon-size-md; // Search input icon size
|
|
1120
|
+
$dsn-select-icon-size: $dsn-icon-size-md; // Chevron-down icon size — matches the medium icon size
|
|
1121
|
+
$dsn-spinner-color: $dsn-color-accent-1-color-default; // Kleur van de draaiende boog
|
|
1122
|
+
$dsn-status-badge-icon-size: $dsn-icon-size-sm; // Status badge icon size
|
|
1123
|
+
$dsn-status-badge-info-background-color: $dsn-color-info-bg-default; // Background color for info variant
|
|
1124
|
+
$dsn-status-badge-info-color: $dsn-color-info-color-default; // Text color for info variant
|
|
1125
|
+
$dsn-status-badge-negative-background-color: $dsn-color-negative-bg-default; // Background color for negative variant
|
|
1126
|
+
$dsn-status-badge-negative-color: $dsn-color-negative-color-default; // Text color for negative variant
|
|
1127
|
+
$dsn-status-badge-positive-background-color: $dsn-color-positive-bg-default; // Background color for positive variant
|
|
1128
|
+
$dsn-status-badge-positive-color: $dsn-color-positive-color-default; // Text color for positive variant
|
|
1129
|
+
$dsn-status-badge-warning-background-color: $dsn-color-warning-bg-default; // Background color for warning variant
|
|
1130
|
+
$dsn-status-badge-warning-color: $dsn-color-warning-color-default; // Text color for warning variant
|
|
1131
|
+
$dsn-text-area-background-color: $dsn-form-control-background-color; // Text area background color
|
|
1132
|
+
$dsn-text-area-border-color: $dsn-form-control-border-color; // Text area border color
|
|
1133
|
+
$dsn-text-area-border-width: $dsn-form-control-border-width; // Text area border width
|
|
1134
|
+
$dsn-text-area-color: $dsn-form-control-color; // Text area text color
|
|
1135
|
+
$dsn-text-area-font-family: $dsn-form-control-font-family; // Text area font family
|
|
1136
|
+
$dsn-text-area-font-size: $dsn-form-control-font-size; // Text area font size
|
|
1137
|
+
$dsn-text-area-font-weight: $dsn-form-control-font-weight; // Text area font weight
|
|
1138
|
+
$dsn-text-area-line-height: $dsn-form-control-line-height; // Text area line height
|
|
1139
|
+
$dsn-text-area-padding-block-end: $dsn-form-control-padding-block-end; // Text area bottom padding
|
|
1140
|
+
$dsn-text-area-padding-block-start: $dsn-form-control-padding-block-start; // Text area top padding
|
|
1141
|
+
$dsn-text-area-padding-inline-end: $dsn-form-control-padding-inline-end; // Text area right padding
|
|
1142
|
+
$dsn-text-area-padding-inline-start: $dsn-form-control-padding-inline-start; // Text area left padding
|
|
1143
|
+
$dsn-text-area-disabled-background-color: $dsn-form-control-disabled-background-color; // Text area disabled background
|
|
1144
|
+
$dsn-text-area-disabled-border-color: $dsn-form-control-disabled-border-color; // Text area disabled border
|
|
1145
|
+
$dsn-text-area-disabled-color: $dsn-form-control-disabled-color; // Text area disabled text color
|
|
1146
|
+
$dsn-text-area-focus-border-color: $dsn-form-control-focus-border-color; // Text area focus border
|
|
1147
|
+
$dsn-text-area-placeholder-color: $dsn-form-control-placeholder-color; // Text area placeholder color
|
|
1148
|
+
$dsn-text-area-invalid-color: $dsn-form-control-color; // Text area invalid text color
|
|
1149
|
+
$dsn-text-area-read-only-background-color: $dsn-form-control-read-only-background-color; // Text area read-only background
|
|
1150
|
+
$dsn-text-area-read-only-border-color: $dsn-form-control-read-only-border-color; // Text area read-only border
|
|
1151
|
+
$dsn-text-area-read-only-color: $dsn-form-control-read-only-color; // Text area read-only text color
|
|
1152
|
+
$dsn-text-input-background-color: $dsn-form-control-background-color; // Text input background color
|
|
1153
|
+
$dsn-text-input-border-color: $dsn-form-control-border-color; // Text input border color
|
|
1154
|
+
$dsn-text-input-border-width: $dsn-form-control-border-width; // Text input border width
|
|
1155
|
+
$dsn-text-input-color: $dsn-form-control-color; // Text input text color
|
|
1156
|
+
$dsn-text-input-font-family: $dsn-form-control-font-family; // Text input font family
|
|
1157
|
+
$dsn-text-input-font-size: $dsn-form-control-font-size; // Text input font size
|
|
1158
|
+
$dsn-text-input-font-weight: $dsn-form-control-font-weight; // Text input font weight
|
|
1159
|
+
$dsn-text-input-line-height: $dsn-form-control-line-height; // Text input line height
|
|
1160
|
+
$dsn-text-input-padding-block-end: $dsn-form-control-padding-block-end; // Text input bottom padding
|
|
1161
|
+
$dsn-text-input-padding-block-start: $dsn-form-control-padding-block-start; // Text input top padding
|
|
1162
|
+
$dsn-text-input-padding-inline-end: $dsn-form-control-padding-inline-end; // Text input right padding
|
|
1163
|
+
$dsn-text-input-padding-inline-start: $dsn-form-control-padding-inline-start; // Text input left padding
|
|
1164
|
+
$dsn-text-input-disabled-background-color: $dsn-form-control-disabled-background-color; // Text input disabled background
|
|
1165
|
+
$dsn-text-input-disabled-border-color: $dsn-form-control-disabled-border-color; // Text input disabled border
|
|
1166
|
+
$dsn-text-input-disabled-color: $dsn-form-control-disabled-color; // Text input disabled text color
|
|
1167
|
+
$dsn-text-input-focus-border-color: $dsn-form-control-focus-border-color; // Text input focus border
|
|
1168
|
+
$dsn-text-input-placeholder-color: $dsn-form-control-placeholder-color; // Text input placeholder color
|
|
1169
|
+
$dsn-text-input-invalid-color: $dsn-form-control-color; // Text input invalid text color
|
|
1170
|
+
$dsn-text-input-read-only-background-color: $dsn-form-control-read-only-background-color; // Text input read-only background
|
|
1171
|
+
$dsn-text-input-read-only-border-color: $dsn-form-control-read-only-border-color; // Text input read-only border
|
|
1172
|
+
$dsn-text-input-read-only-color: $dsn-form-control-read-only-color; // Text input read-only text color
|
|
1173
|
+
$dsn-time-input-padding-inline-end-with-icon: calc(($dsn-button-size-small-icon-only-padding * 2) + $dsn-time-input-icon-size + $dsn-time-input-button-inset-inline-end + $dsn-time-input-icon-gap); // Right padding when icon is present: (button-padding × 2) + icon-size + button-inset + gap
|
|
1174
|
+
$dsn-unordered-list-marker-color: $dsn-color-accent-1-color-default; // Bullet marker color
|
|
1175
|
+
$dsn-form-control-hover-accent-color: $dsn-color-action-1-color-hover; // Form control hover accent color
|
|
1176
|
+
$dsn-form-control-active-accent-color: $dsn-color-action-1-color-active; // Form control active accent color
|
|
1177
|
+
$dsn-form-control-accent-color: $dsn-color-action-1-color-default; // Form control accent color (checkboxes, radio buttons)
|
|
1178
|
+
$dsn-color-accent-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1179
|
+
$dsn-color-accent-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1180
|
+
$dsn-color-accent-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
1181
|
+
$dsn-color-accent-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default;
|
|
1182
|
+
$dsn-color-accent-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover;
|
|
1183
|
+
$dsn-color-accent-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active;
|
|
1184
|
+
$dsn-color-accent-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle;
|
|
1185
|
+
$dsn-color-accent-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default;
|
|
1186
|
+
$dsn-color-accent-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover;
|
|
1187
|
+
$dsn-color-accent-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active;
|
|
1188
|
+
$dsn-color-accent-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default;
|
|
1189
|
+
$dsn-color-accent-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover;
|
|
1190
|
+
$dsn-color-accent-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1191
|
+
$dsn-color-accent-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1192
|
+
$dsn-color-accent-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
|
|
1193
|
+
$dsn-color-accent-3-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1194
|
+
$dsn-color-accent-3-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1195
|
+
$dsn-color-accent-3-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
1196
|
+
$dsn-color-accent-3-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default;
|
|
1197
|
+
$dsn-color-accent-3-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover;
|
|
1198
|
+
$dsn-color-accent-3-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active;
|
|
1199
|
+
$dsn-color-accent-3-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle;
|
|
1200
|
+
$dsn-color-accent-3-inverse-border-default: $dsn-color-accent-1-inverse-border-default;
|
|
1201
|
+
$dsn-color-accent-3-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover;
|
|
1202
|
+
$dsn-color-accent-3-inverse-border-active: $dsn-color-accent-1-inverse-border-active;
|
|
1203
|
+
$dsn-color-accent-3-inverse-color-default: $dsn-color-accent-1-inverse-color-default;
|
|
1204
|
+
$dsn-color-accent-3-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover;
|
|
1205
|
+
$dsn-color-accent-3-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1206
|
+
$dsn-color-accent-3-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1207
|
+
$dsn-color-accent-3-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
|
|
1208
|
+
$dsn-color-action-1-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1209
|
+
$dsn-color-action-1-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1210
|
+
$dsn-color-action-1-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
1211
|
+
$dsn-color-action-1-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default;
|
|
1212
|
+
$dsn-color-action-1-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover;
|
|
1213
|
+
$dsn-color-action-1-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active;
|
|
1214
|
+
$dsn-color-action-1-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle;
|
|
1215
|
+
$dsn-color-action-1-inverse-border-default: $dsn-color-accent-1-inverse-border-default;
|
|
1216
|
+
$dsn-color-action-1-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover;
|
|
1217
|
+
$dsn-color-action-1-inverse-border-active: $dsn-color-accent-1-inverse-border-active;
|
|
1218
|
+
$dsn-color-action-1-inverse-color-default: $dsn-color-accent-1-inverse-color-default;
|
|
1219
|
+
$dsn-color-action-1-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover;
|
|
1220
|
+
$dsn-color-action-1-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1221
|
+
$dsn-color-action-1-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1222
|
+
$dsn-color-action-1-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
|
|
1223
|
+
$dsn-color-action-2-inverse-bg-document: $dsn-color-accent-1-inverse-bg-document;
|
|
1224
|
+
$dsn-color-action-2-inverse-bg-elevated: $dsn-color-accent-1-inverse-bg-elevated;
|
|
1225
|
+
$dsn-color-action-2-inverse-bg-subtle: $dsn-color-accent-1-inverse-bg-subtle;
|
|
1226
|
+
$dsn-color-action-2-inverse-bg-default: $dsn-color-accent-1-inverse-bg-default;
|
|
1227
|
+
$dsn-color-action-2-inverse-bg-hover: $dsn-color-accent-1-inverse-bg-hover;
|
|
1228
|
+
$dsn-color-action-2-inverse-bg-active: $dsn-color-accent-1-inverse-bg-active;
|
|
1229
|
+
$dsn-color-action-2-inverse-border-subtle: $dsn-color-accent-1-inverse-border-subtle;
|
|
1230
|
+
$dsn-color-action-2-inverse-border-default: $dsn-color-accent-1-inverse-border-default;
|
|
1231
|
+
$dsn-color-action-2-inverse-border-hover: $dsn-color-accent-1-inverse-border-hover;
|
|
1232
|
+
$dsn-color-action-2-inverse-border-active: $dsn-color-accent-1-inverse-border-active;
|
|
1233
|
+
$dsn-color-action-2-inverse-color-default: $dsn-color-accent-1-inverse-color-default;
|
|
1234
|
+
$dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover;
|
|
1235
|
+
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active;
|
|
1236
|
+
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle;
|
|
1237
|
+
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document;
|
|
1238
|
+
$dsn-breadcrumb-navigation-link-color: $dsn-color-action-2-color-default; // Link text color
|
|
1239
|
+
$dsn-breadcrumb-navigation-link-hover-color: $dsn-color-action-2-color-hover; // Link hover color
|
|
1240
|
+
$dsn-breadcrumb-navigation-link-active-color: $dsn-color-action-2-color-active; // Link active color
|
|
1241
|
+
$dsn-button-default-border-color: $dsn-color-action-1-border-default; // Default button border
|
|
1242
|
+
$dsn-button-default-color: $dsn-color-action-1-color-default; // Default button text/icon color
|
|
1243
|
+
$dsn-button-default-active-background-color: $dsn-color-action-1-bg-active; // Default button active background
|
|
1244
|
+
$dsn-button-default-active-border-color: $dsn-color-action-1-border-active; // Default button active border
|
|
1245
|
+
$dsn-button-default-active-color: $dsn-color-action-1-color-active; // Default button active text/icon color
|
|
1246
|
+
$dsn-button-default-hover-background-color: $dsn-color-action-1-bg-hover; // Default button hover background
|
|
1247
|
+
$dsn-button-default-hover-border-color: $dsn-color-action-1-border-hover; // Default button hover border
|
|
1248
|
+
$dsn-button-default-hover-color: $dsn-color-action-1-color-hover; // Default button hover text/icon color
|
|
1249
|
+
$dsn-button-strong-negative-background-color: $dsn-color-negative-inverse-bg-default; // Strong negative button background
|
|
1250
|
+
$dsn-button-strong-negative-color: $dsn-color-negative-inverse-color-default; // Strong negative button text/icon color
|
|
1251
|
+
$dsn-button-strong-negative-active-background-color: $dsn-color-negative-inverse-bg-active; // Strong negative button active background
|
|
1252
|
+
$dsn-button-strong-negative-active-color: $dsn-color-negative-inverse-color-active; // Strong negative button active text/icon color
|
|
1253
|
+
$dsn-button-strong-negative-hover-background-color: $dsn-color-negative-inverse-bg-hover; // Strong negative button hover background
|
|
1254
|
+
$dsn-button-strong-negative-hover-color: $dsn-color-negative-inverse-color-hover; // Strong negative button hover text/icon color
|
|
1255
|
+
$dsn-button-strong-positive-background-color: $dsn-color-positive-inverse-bg-default; // Strong positive button background
|
|
1256
|
+
$dsn-button-strong-positive-color: $dsn-color-positive-inverse-color-default; // Strong positive button text/icon color
|
|
1257
|
+
$dsn-button-strong-positive-active-background-color: $dsn-color-positive-inverse-bg-active; // Strong positive button active background
|
|
1258
|
+
$dsn-button-strong-positive-active-color: $dsn-color-positive-inverse-color-active; // Strong positive button active text/icon color
|
|
1259
|
+
$dsn-button-strong-positive-hover-background-color: $dsn-color-positive-inverse-bg-hover; // Strong positive button hover background
|
|
1260
|
+
$dsn-button-strong-positive-hover-color: $dsn-color-positive-inverse-color-hover; // Strong positive button hover text/icon color
|
|
1261
|
+
$dsn-button-subtle-color: $dsn-color-action-1-color-default; // Subtle button text/icon color
|
|
1262
|
+
$dsn-button-subtle-active-background-color: $dsn-color-action-1-bg-active; // Subtle button active background
|
|
1263
|
+
$dsn-button-subtle-active-color: $dsn-color-action-1-color-active; // Subtle button active text/icon color
|
|
1264
|
+
$dsn-button-subtle-hover-background-color: $dsn-color-action-1-bg-hover; // Subtle button hover background
|
|
1265
|
+
$dsn-button-subtle-hover-color: $dsn-color-action-1-color-hover; // Subtle button hover text/icon color
|
|
1266
|
+
$dsn-checkbox-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1267
|
+
$dsn-checkbox-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1268
|
+
$dsn-checkbox-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
1269
|
+
$dsn-checkbox-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1270
|
+
$dsn-checkbox-checked-focus-color: $dsn-form-control-focus-color;
|
|
1271
|
+
$dsn-checkbox-indeterminate-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1272
|
+
$dsn-checkbox-indeterminate-focus-color: $dsn-form-control-focus-color;
|
|
1273
|
+
$dsn-date-input-icon-size: $dsn-button-size-small-icon-size; // Calendar icon size — matches the small button icon size
|
|
1274
|
+
$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
|
|
1275
|
+
$dsn-details-icon-size: $dsn-icon-size-md; // Chevron icon size
|
|
1276
|
+
$dsn-details-summary-color: $dsn-color-action-2-color-default; // Summary label color (follows Link via action-2)
|
|
1277
|
+
$dsn-details-summary-hover-color: $dsn-color-action-2-color-hover; // Summary label color on hover
|
|
1278
|
+
$dsn-details-summary-active-color: $dsn-color-action-2-color-active; // Summary label color on active
|
|
1279
|
+
$dsn-hero-background-color-inverse: $dsn-color-accent-1-inverse-bg-default; // Achtergrondkleur van de inverse Hero — donker blauw
|
|
1280
|
+
$dsn-hero-color-inverse: $dsn-color-accent-1-inverse-color-default; // Tekstkleur in de inverse Hero — lichte kleur op donkere achtergrond
|
|
1281
|
+
$dsn-hero-image-blend-color: $dsn-color-accent-1-inverse-bg-default; // Blendkleur voor de image-blend variant — zelfde als inverse achtergrond voor visuele samenhang
|
|
1282
|
+
$dsn-link-color: $dsn-color-action-2-color-default; // Link text color
|
|
1283
|
+
$dsn-link-text-decoration-color: $dsn-color-action-2-color-default; // Link underline color
|
|
1284
|
+
$dsn-link-active-color: $dsn-color-action-2-color-active; // Link active text color
|
|
1285
|
+
$dsn-link-hover-color: $dsn-color-action-2-color-hover; // Link hover text color
|
|
1286
|
+
$dsn-logo-color-primary: $dsn-color-accent-1-inverse-bg-default; // Achtergrondrechthoek en letterpaden — de merkkleur van het actieve thema.
|
|
1287
|
+
$dsn-menu-item-color: $dsn-color-action-2-color-default; // Gedeeld: standaard tekstkleur
|
|
1288
|
+
$dsn-menu-item-hover-color: $dsn-color-action-2-color-hover; // Gedeeld: hover tekstkleur
|
|
1289
|
+
$dsn-menu-item-hover-background-color: $dsn-color-action-2-bg-hover; // Gedeeld: hover achtergrondkleur
|
|
1290
|
+
$dsn-menu-item-active-color: $dsn-color-action-2-color-active; // Gedeeld: active tekstkleur
|
|
1291
|
+
$dsn-menu-item-active-background-color: $dsn-color-action-2-bg-active; // Gedeeld: active achtergrondkleur
|
|
1292
|
+
$dsn-menu-link-current-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: tekstkleur voor de actieve/huidige pagina
|
|
1293
|
+
$dsn-menu-link-current-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: achtergrondkleur voor de actieve/huidige pagina
|
|
1294
|
+
$dsn-menu-link-current-indicator-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: kleur van de border-inline-start indicator
|
|
1295
|
+
$dsn-menu-link-current-hover-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: hover tekstkleur voor de actieve pagina
|
|
1296
|
+
$dsn-menu-link-current-hover-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: hover achtergrondkleur voor de actieve pagina — blijft bg-active
|
|
1297
|
+
$dsn-menu-link-current-active-color: $dsn-color-action-2-color-default; // MenuLink-specifiek: active tekstkleur voor de actieve pagina
|
|
1298
|
+
$dsn-menu-link-current-active-background-color: $dsn-color-action-2-bg-active; // MenuLink-specifiek: active achtergrondkleur voor de actieve pagina
|
|
1299
|
+
$dsn-number-badge-negative-color: $dsn-color-negative-inverse-color-default; // Tekstkleur voor negative variant (wit op donkere achtergrond)
|
|
1300
|
+
$dsn-number-badge-negative-background-color: $dsn-color-negative-inverse-bg-default; // Achtergrondkleur voor negative variant
|
|
1301
|
+
$dsn-number-badge-positive-color: $dsn-color-positive-inverse-color-default; // Tekstkleur voor positive variant (wit op donkere achtergrond)
|
|
1302
|
+
$dsn-number-badge-positive-background-color: $dsn-color-positive-inverse-bg-default; // Achtergrondkleur voor positive variant
|
|
1303
|
+
$dsn-number-badge-warning-color: $dsn-color-warning-inverse-color-default; // Tekstkleur voor warning variant (wit op donkere achtergrond)
|
|
1304
|
+
$dsn-number-badge-warning-background-color: $dsn-color-warning-inverse-bg-default; // Achtergrondkleur voor warning variant
|
|
1305
|
+
$dsn-number-badge-info-color: $dsn-color-info-inverse-color-default; // Tekstkleur voor info variant (wit op donkere achtergrond)
|
|
1306
|
+
$dsn-number-badge-info-background-color: $dsn-color-info-inverse-bg-default; // Achtergrondkleur voor info variant
|
|
1307
|
+
$dsn-radio-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1308
|
+
$dsn-radio-invalid-background-color: $dsn-form-control-invalid-background-color;
|
|
1309
|
+
$dsn-radio-invalid-border-color: $dsn-form-control-invalid-border-color;
|
|
1310
|
+
$dsn-radio-invalid-color: $dsn-form-control-invalid-border-color;
|
|
1311
|
+
$dsn-radio-checked-focus-background-color: $dsn-form-control-focus-background-color;
|
|
1312
|
+
$dsn-radio-checked-focus-color: $dsn-form-control-focus-color;
|
|
1313
|
+
$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); // Left padding when icon is present
|
|
1314
|
+
$dsn-select-icon-color: $dsn-color-action-1-color-default; // Chevron icon color — same as subtle button icon color
|
|
1315
|
+
$dsn-select-padding-inline-end-with-icon: calc($dsn-select-icon-size + $dsn-select-icon-gap + $dsn-select-icon-inset-inline-end); // Right padding when icon is present: icon-size + gap + inset
|
|
1316
|
+
$dsn-text-area-focus-background-color: $dsn-form-control-focus-background-color; // Text area focus background
|
|
1317
|
+
$dsn-text-area-focus-box-shadow-color: $dsn-text-area-focus-border-color; // Text area focus box shadow color
|
|
1318
|
+
$dsn-text-area-focus-color: $dsn-form-control-focus-color; // Text area focus text color
|
|
1319
|
+
$dsn-text-area-hover-box-shadow-color: $dsn-text-area-border-color; // Text area hover box shadow color
|
|
1320
|
+
$dsn-text-area-invalid-background-color: $dsn-form-control-invalid-background-color; // Text area invalid background
|
|
1321
|
+
$dsn-text-area-invalid-border-color: $dsn-form-control-invalid-border-color; // Text area invalid border
|
|
1322
|
+
$dsn-text-input-focus-background-color: $dsn-form-control-focus-background-color; // Text input focus background
|
|
1323
|
+
$dsn-text-input-focus-box-shadow-color: $dsn-text-input-focus-border-color; // Text input focus box shadow color
|
|
1324
|
+
$dsn-text-input-focus-color: $dsn-form-control-focus-color; // Text input focus text color
|
|
1325
|
+
$dsn-text-input-hover-box-shadow-color: $dsn-text-input-border-color; // Text input hover box shadow color
|
|
1326
|
+
$dsn-text-input-invalid-background-color: $dsn-form-control-invalid-background-color; // Text input invalid background
|
|
1327
|
+
$dsn-text-input-invalid-border-color: $dsn-form-control-invalid-border-color; // Text input invalid border
|
|
1328
|
+
$dsn-time-input-icon-color: $dsn-color-action-2-color-default; // Clock icon color (interactive, action color)
|
|
1329
|
+
$dsn-time-input-icon-hover-color: $dsn-color-action-2-color-hover; // Clock icon hover color
|
|
1330
|
+
$dsn-time-input-icon-size: $dsn-button-size-small-icon-size; // Clock icon size — matches the small button icon size
|
|
1331
|
+
$dsn-button-strong-background-color: $dsn-color-action-1-inverse-bg-default; // Strong button background
|
|
1332
|
+
$dsn-button-strong-color: $dsn-color-action-1-inverse-color-default; // Strong button text/icon color
|
|
1333
|
+
$dsn-button-strong-active-background-color: $dsn-color-action-1-inverse-bg-active; // Strong button active background
|
|
1334
|
+
$dsn-button-strong-active-color: $dsn-color-action-1-inverse-color-active; // Strong button active text/icon color
|
|
1335
|
+
$dsn-button-strong-hover-background-color: $dsn-color-action-1-inverse-bg-hover; // Strong button hover background
|
|
1336
|
+
$dsn-button-strong-hover-color: $dsn-color-action-1-inverse-color-hover; // Strong button hover text/icon color
|
|
1337
|
+
$dsn-checkbox-checked-background-color: $dsn-form-control-accent-color;
|
|
1338
|
+
$dsn-checkbox-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1339
|
+
$dsn-checkbox-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1340
|
+
$dsn-checkbox-indeterminate-background-color: $dsn-form-control-accent-color;
|
|
1341
|
+
$dsn-checkbox-indeterminate-active-background-color: $dsn-form-control-active-accent-color;
|
|
1342
|
+
$dsn-checkbox-indeterminate-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1343
|
+
$dsn-radio-checked-background-color: $dsn-form-control-accent-color;
|
|
1344
|
+
$dsn-radio-checked-active-background-color: $dsn-form-control-active-accent-color;
|
|
1345
|
+
$dsn-radio-checked-hover-background-color: $dsn-form-control-hover-accent-color;
|
|
1346
|
+
$dsn-text-area-invalid-box-shadow-color: $dsn-text-area-invalid-border-color; // Text area invalid box shadow color
|
|
1347
|
+
$dsn-text-input-invalid-box-shadow-color: $dsn-text-input-invalid-border-color; // Text input invalid box shadow color
|