@dsn-starter-kit/design-tokens 4.1.0 → 4.2.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/README.md +1 -1
- package/dist/css/scoped/density-default.css +1 -1
- package/dist/css/scoped/density-information-dense.css +1 -1
- package/dist/css/scoped/start-dark.css +166 -166
- package/dist/css/scoped/start-light-hero-image.css +306 -306
- package/dist/css/scoped/start-light.css +166 -166
- package/dist/css/scoped/wireframe-dark.css +1 -1
- package/dist/css/scoped/wireframe-light-hero-image.css +1 -1
- package/dist/css/scoped/wireframe-light.css +1 -1
- package/dist/css/start-dark-default.css +169 -169
- package/dist/css/start-dark-information-dense.css +169 -169
- package/dist/css/start-light-default.css +169 -169
- package/dist/css/start-light-information-dense.css +169 -169
- package/dist/css/variables-dark-scoped.css +166 -166
- package/dist/css/variables-dark.css +169 -169
- package/dist/css/variables.css +169 -169
- package/dist/js/start-dark-default.js +1578 -1578
- package/dist/js/start-dark-information-dense.js +1578 -1578
- package/dist/js/start-light-default.js +1578 -1578
- package/dist/js/start-light-information-dense.js +1578 -1578
- package/dist/js/tokens-dark.cjs +1578 -1578
- package/dist/js/tokens-dark.js +1578 -1578
- package/dist/js/tokens.cjs +1578 -1578
- package/dist/js/tokens.js +1578 -1578
- package/dist/json/start-dark-default.json +704 -704
- package/dist/json/start-dark-information-dense.json +704 -704
- package/dist/json/start-light-default.json +704 -704
- package/dist/json/start-light-information-dense.json +704 -704
- package/dist/json/tokens-dark.json +704 -704
- package/dist/json/tokens.json +704 -704
- package/dist/scss/_start-dark-default.scss +169 -169
- package/dist/scss/_start-dark-information-dense.scss +169 -169
- package/dist/scss/_start-light-default.scss +169 -169
- package/dist/scss/_start-light-information-dense.scss +169 -169
- package/dist/scss/_variables-dark.scss +169 -169
- package/dist/scss/_variables.scss +169 -169
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
|
-
$dsn-text-font-family-default:
|
|
5
|
-
$dsn-text-font-family-monospace:
|
|
4
|
+
$dsn-text-font-family-default: Fira Sans, sans-serif; // Standaard lettertype voor bodytekst
|
|
5
|
+
$dsn-text-font-family-monospace: Fira Mono, monospace; // Monospace lettertype voor code
|
|
6
6
|
$dsn-text-font-weight-default: 400; // Regulier gewicht
|
|
7
7
|
$dsn-text-font-weight-bold: 700; // Vet gewicht
|
|
8
8
|
$dsn-text-max-inline-size: 65ch; // Maximale regellengte voor leesbare bodytekst (paragrafen, lijsten)
|
|
@@ -20,7 +20,7 @@ $dsn-text-font-size-xl: clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem); // Extra la
|
|
|
20
20
|
$dsn-text-font-size-2xl: clamp(2rem, 1.75rem + 0.75vw, 2.5625rem); // 2XL text - 32px to 41px (fluid)
|
|
21
21
|
$dsn-text-font-size-3xl: clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem); // 3XL text - 40px to 53px (fluid)
|
|
22
22
|
$dsn-text-font-size-4xl: clamp(3rem, 2.5rem + 1.5vw, 4.125rem); // 4XL text - 48px to 66px (fluid)
|
|
23
|
-
$dsn-heading-font-family:
|
|
23
|
+
$dsn-heading-font-family: Fira Sans, sans-serif; // Lettertype voor koppen
|
|
24
24
|
$dsn-heading-font-weight: 700; // Vet gewicht voor koppen
|
|
25
25
|
$dsn-space-none: 0px; // Geen afstand
|
|
26
26
|
$dsn-space-base: 0.5rem; // 8px - Basiseenheid voor het 8pt-rastersysteem
|
|
@@ -122,171 +122,171 @@ $dsn-transition-easing-enter: cubic-bezier(0, 0, 0.2, 1); // Elementen die het s
|
|
|
122
122
|
$dsn-transition-easing-exit: cubic-bezier(0.4, 0, 1, 1); // Elementen die het scherm verlaten (accelereren)
|
|
123
123
|
$dsn-transition-easing-move: cubic-bezier(0.4, 0, 0.2, 1); // Elementen die van positie wisselen
|
|
124
124
|
$dsn-transition-easing-linear: linear; // Progress bars, loaders
|
|
125
|
-
$dsn-color-neutral-bg-document:
|
|
126
|
-
$dsn-color-neutral-bg-elevated:
|
|
127
|
-
$dsn-color-neutral-bg-subtle:
|
|
128
|
-
$dsn-color-neutral-bg-default:
|
|
129
|
-
$dsn-color-neutral-bg-hover:
|
|
130
|
-
$dsn-color-neutral-bg-active:
|
|
131
|
-
$dsn-color-neutral-border-subtle:
|
|
132
|
-
$dsn-color-neutral-border-default:
|
|
133
|
-
$dsn-color-neutral-border-hover:
|
|
134
|
-
$dsn-color-neutral-border-active:
|
|
135
|
-
$dsn-color-neutral-color-default:
|
|
136
|
-
$dsn-color-neutral-color-hover:
|
|
137
|
-
$dsn-color-neutral-color-active:
|
|
138
|
-
$dsn-color-neutral-color-subtle:
|
|
139
|
-
$dsn-color-neutral-color-document:
|
|
140
|
-
$dsn-color-accent-1-bg-document:
|
|
141
|
-
$dsn-color-accent-1-bg-elevated:
|
|
142
|
-
$dsn-color-accent-1-bg-subtle:
|
|
143
|
-
$dsn-color-accent-1-bg-default:
|
|
144
|
-
$dsn-color-accent-1-bg-hover:
|
|
145
|
-
$dsn-color-accent-1-bg-active:
|
|
146
|
-
$dsn-color-accent-1-border-subtle:
|
|
147
|
-
$dsn-color-accent-1-border-default:
|
|
148
|
-
$dsn-color-accent-1-border-hover:
|
|
149
|
-
$dsn-color-accent-1-border-active:
|
|
150
|
-
$dsn-color-accent-1-color-default:
|
|
151
|
-
$dsn-color-accent-1-color-hover:
|
|
152
|
-
$dsn-color-accent-1-color-active:
|
|
153
|
-
$dsn-color-accent-1-color-subtle:
|
|
154
|
-
$dsn-color-accent-1-color-document:
|
|
155
|
-
$dsn-color-negative-bg-document:
|
|
156
|
-
$dsn-color-negative-bg-elevated:
|
|
157
|
-
$dsn-color-negative-bg-subtle:
|
|
158
|
-
$dsn-color-negative-bg-default:
|
|
159
|
-
$dsn-color-negative-bg-hover:
|
|
160
|
-
$dsn-color-negative-bg-active:
|
|
161
|
-
$dsn-color-negative-border-subtle:
|
|
162
|
-
$dsn-color-negative-border-default:
|
|
163
|
-
$dsn-color-negative-border-hover:
|
|
164
|
-
$dsn-color-negative-border-active:
|
|
165
|
-
$dsn-color-negative-color-default:
|
|
166
|
-
$dsn-color-negative-color-hover:
|
|
167
|
-
$dsn-color-negative-color-active:
|
|
168
|
-
$dsn-color-negative-color-subtle:
|
|
169
|
-
$dsn-color-negative-color-document:
|
|
170
|
-
$dsn-color-positive-bg-document:
|
|
171
|
-
$dsn-color-positive-bg-elevated:
|
|
172
|
-
$dsn-color-positive-bg-subtle:
|
|
173
|
-
$dsn-color-positive-bg-default:
|
|
174
|
-
$dsn-color-positive-bg-hover:
|
|
175
|
-
$dsn-color-positive-bg-active:
|
|
176
|
-
$dsn-color-positive-border-subtle:
|
|
177
|
-
$dsn-color-positive-border-default:
|
|
178
|
-
$dsn-color-positive-border-hover:
|
|
179
|
-
$dsn-color-positive-border-active:
|
|
180
|
-
$dsn-color-positive-color-default:
|
|
181
|
-
$dsn-color-positive-color-hover:
|
|
182
|
-
$dsn-color-positive-color-active:
|
|
183
|
-
$dsn-color-positive-color-subtle:
|
|
184
|
-
$dsn-color-positive-color-document:
|
|
185
|
-
$dsn-color-warning-bg-document:
|
|
186
|
-
$dsn-color-warning-bg-elevated:
|
|
187
|
-
$dsn-color-warning-bg-subtle:
|
|
188
|
-
$dsn-color-warning-bg-default:
|
|
189
|
-
$dsn-color-warning-bg-hover:
|
|
190
|
-
$dsn-color-warning-bg-active:
|
|
191
|
-
$dsn-color-warning-border-subtle:
|
|
192
|
-
$dsn-color-warning-border-default:
|
|
193
|
-
$dsn-color-warning-border-hover:
|
|
194
|
-
$dsn-color-warning-border-active:
|
|
195
|
-
$dsn-color-warning-color-default:
|
|
196
|
-
$dsn-color-warning-color-hover:
|
|
197
|
-
$dsn-color-warning-color-active:
|
|
198
|
-
$dsn-color-warning-color-subtle:
|
|
199
|
-
$dsn-color-warning-color-document:
|
|
200
|
-
$dsn-color-neutral-inverse-bg-document:
|
|
201
|
-
$dsn-color-neutral-inverse-bg-elevated:
|
|
202
|
-
$dsn-color-neutral-inverse-bg-subtle:
|
|
203
|
-
$dsn-color-neutral-inverse-bg-default:
|
|
204
|
-
$dsn-color-neutral-inverse-bg-hover:
|
|
205
|
-
$dsn-color-neutral-inverse-bg-active:
|
|
206
|
-
$dsn-color-neutral-inverse-border-subtle:
|
|
207
|
-
$dsn-color-neutral-inverse-border-default:
|
|
208
|
-
$dsn-color-neutral-inverse-border-hover:
|
|
209
|
-
$dsn-color-neutral-inverse-border-active:
|
|
210
|
-
$dsn-color-neutral-inverse-color-default:
|
|
211
|
-
$dsn-color-neutral-inverse-color-hover:
|
|
212
|
-
$dsn-color-neutral-inverse-color-active:
|
|
213
|
-
$dsn-color-neutral-inverse-color-subtle:
|
|
214
|
-
$dsn-color-neutral-inverse-color-document:
|
|
215
|
-
$dsn-color-accent-1-inverse-bg-document:
|
|
216
|
-
$dsn-color-accent-1-inverse-bg-elevated:
|
|
217
|
-
$dsn-color-accent-1-inverse-bg-subtle:
|
|
218
|
-
$dsn-color-accent-1-inverse-bg-default:
|
|
219
|
-
$dsn-color-accent-1-inverse-bg-hover:
|
|
220
|
-
$dsn-color-accent-1-inverse-bg-active:
|
|
221
|
-
$dsn-color-accent-1-inverse-border-subtle:
|
|
222
|
-
$dsn-color-accent-1-inverse-border-default:
|
|
223
|
-
$dsn-color-accent-1-inverse-border-hover:
|
|
224
|
-
$dsn-color-accent-1-inverse-border-active:
|
|
225
|
-
$dsn-color-accent-1-inverse-color-default:
|
|
226
|
-
$dsn-color-accent-1-inverse-color-hover:
|
|
227
|
-
$dsn-color-accent-1-inverse-color-active:
|
|
228
|
-
$dsn-color-accent-1-inverse-color-subtle:
|
|
229
|
-
$dsn-color-accent-1-inverse-color-document:
|
|
230
|
-
$dsn-color-info-inverse-bg-document:
|
|
231
|
-
$dsn-color-info-inverse-bg-elevated:
|
|
232
|
-
$dsn-color-info-inverse-bg-subtle:
|
|
233
|
-
$dsn-color-info-inverse-bg-default:
|
|
234
|
-
$dsn-color-info-inverse-bg-hover:
|
|
235
|
-
$dsn-color-info-inverse-bg-active:
|
|
236
|
-
$dsn-color-info-inverse-border-subtle:
|
|
237
|
-
$dsn-color-info-inverse-border-default:
|
|
238
|
-
$dsn-color-info-inverse-border-hover:
|
|
239
|
-
$dsn-color-info-inverse-border-active:
|
|
240
|
-
$dsn-color-info-inverse-color-default:
|
|
241
|
-
$dsn-color-info-inverse-color-hover:
|
|
242
|
-
$dsn-color-info-inverse-color-active:
|
|
243
|
-
$dsn-color-info-inverse-color-subtle:
|
|
244
|
-
$dsn-color-info-inverse-color-document:
|
|
245
|
-
$dsn-color-negative-inverse-bg-document:
|
|
246
|
-
$dsn-color-negative-inverse-bg-elevated:
|
|
247
|
-
$dsn-color-negative-inverse-bg-subtle:
|
|
248
|
-
$dsn-color-negative-inverse-bg-default:
|
|
249
|
-
$dsn-color-negative-inverse-bg-hover:
|
|
250
|
-
$dsn-color-negative-inverse-bg-active:
|
|
251
|
-
$dsn-color-negative-inverse-border-subtle:
|
|
252
|
-
$dsn-color-negative-inverse-border-default:
|
|
253
|
-
$dsn-color-negative-inverse-border-hover:
|
|
254
|
-
$dsn-color-negative-inverse-border-active:
|
|
255
|
-
$dsn-color-negative-inverse-color-default:
|
|
256
|
-
$dsn-color-negative-inverse-color-hover:
|
|
257
|
-
$dsn-color-negative-inverse-color-active:
|
|
258
|
-
$dsn-color-negative-inverse-color-subtle:
|
|
259
|
-
$dsn-color-negative-inverse-color-document:
|
|
260
|
-
$dsn-color-positive-inverse-bg-document:
|
|
261
|
-
$dsn-color-positive-inverse-bg-elevated:
|
|
262
|
-
$dsn-color-positive-inverse-bg-subtle:
|
|
263
|
-
$dsn-color-positive-inverse-bg-default:
|
|
264
|
-
$dsn-color-positive-inverse-bg-hover:
|
|
265
|
-
$dsn-color-positive-inverse-bg-active:
|
|
266
|
-
$dsn-color-positive-inverse-border-subtle:
|
|
267
|
-
$dsn-color-positive-inverse-border-default:
|
|
268
|
-
$dsn-color-positive-inverse-border-hover:
|
|
269
|
-
$dsn-color-positive-inverse-border-active:
|
|
270
|
-
$dsn-color-positive-inverse-color-default:
|
|
271
|
-
$dsn-color-positive-inverse-color-hover:
|
|
272
|
-
$dsn-color-positive-inverse-color-active:
|
|
273
|
-
$dsn-color-positive-inverse-color-subtle:
|
|
274
|
-
$dsn-color-positive-inverse-color-document:
|
|
275
|
-
$dsn-color-warning-inverse-bg-document:
|
|
276
|
-
$dsn-color-warning-inverse-bg-elevated:
|
|
277
|
-
$dsn-color-warning-inverse-bg-subtle:
|
|
278
|
-
$dsn-color-warning-inverse-bg-default:
|
|
279
|
-
$dsn-color-warning-inverse-bg-hover:
|
|
280
|
-
$dsn-color-warning-inverse-bg-active:
|
|
281
|
-
$dsn-color-warning-inverse-border-subtle:
|
|
282
|
-
$dsn-color-warning-inverse-border-default:
|
|
283
|
-
$dsn-color-warning-inverse-border-hover:
|
|
284
|
-
$dsn-color-warning-inverse-border-active:
|
|
285
|
-
$dsn-color-warning-inverse-color-default:
|
|
286
|
-
$dsn-color-warning-inverse-color-hover:
|
|
287
|
-
$dsn-color-warning-inverse-color-active:
|
|
288
|
-
$dsn-color-warning-inverse-color-subtle:
|
|
289
|
-
$dsn-color-warning-inverse-color-document:
|
|
125
|
+
$dsn-color-neutral-bg-document: oklch(0.99 0 0); // Documentachtergrond
|
|
126
|
+
$dsn-color-neutral-bg-elevated: oklch(0.99 0 0); // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
127
|
+
$dsn-color-neutral-bg-subtle: oklch(0.955 0 0); // Subtiele achtergrond
|
|
128
|
+
$dsn-color-neutral-bg-default: oklch(0.915 0 0); // Standaard achtergrond
|
|
129
|
+
$dsn-color-neutral-bg-hover: oklch(0.895 0 0); // Achtergrond in hover state
|
|
130
|
+
$dsn-color-neutral-bg-active: oklch(0.875 0 0); // Achtergrond in active state
|
|
131
|
+
$dsn-color-neutral-border-subtle: oklch(0.77 0 0); // Subtiele rand
|
|
132
|
+
$dsn-color-neutral-border-default: oklch(0.52 0 0); // Standaard rand
|
|
133
|
+
$dsn-color-neutral-border-hover: oklch(0.48 0 0); // Rand in hover state
|
|
134
|
+
$dsn-color-neutral-border-active: oklch(0.44 0 0); // Rand in active state
|
|
135
|
+
$dsn-color-neutral-color-default: oklch(0.4 0 0); // Standaard tekstkleur
|
|
136
|
+
$dsn-color-neutral-color-hover: oklch(0.36 0 0); // Tekst in hover state
|
|
137
|
+
$dsn-color-neutral-color-active: oklch(0.32 0 0); // Tekst in active state
|
|
138
|
+
$dsn-color-neutral-color-subtle: oklch(0.45 0 0); // Subtiele tekstkleur
|
|
139
|
+
$dsn-color-neutral-color-document: oklch(0.18 0 0); // Documenttekstkleur
|
|
140
|
+
$dsn-color-accent-1-bg-document: oklch(0.99 0.005 255.8); // Documentachtergrond
|
|
141
|
+
$dsn-color-accent-1-bg-elevated: oklch(0.99 0.005 255.8); // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
142
|
+
$dsn-color-accent-1-bg-subtle: oklch(0.955 0.016 255.8); // Subtiele achtergrond
|
|
143
|
+
$dsn-color-accent-1-bg-default: oklch(0.915 0.023 255.8); // Standaard achtergrond
|
|
144
|
+
$dsn-color-accent-1-bg-hover: oklch(0.895 0.029 255.8); // Achtergrond in hover state
|
|
145
|
+
$dsn-color-accent-1-bg-active: oklch(0.875 0.036 255.8); // Achtergrond in active state
|
|
146
|
+
$dsn-color-accent-1-border-subtle: oklch(0.77 0.073 255.8); // Subtiele rand
|
|
147
|
+
$dsn-color-accent-1-border-default: oklch(0.52 0.163 255.8); // Standaard rand
|
|
148
|
+
$dsn-color-accent-1-border-hover: oklch(0.48 0.162 255.8); // Rand in hover state
|
|
149
|
+
$dsn-color-accent-1-border-active: oklch(0.44 0.149 255.8); // Rand in active state
|
|
150
|
+
$dsn-color-accent-1-color-default: oklch(0.4 0.135 255.8); // Standaard tekstkleur
|
|
151
|
+
$dsn-color-accent-1-color-hover: oklch(0.36 0.122 255.8); // Tekst in hover state
|
|
152
|
+
$dsn-color-accent-1-color-active: oklch(0.32 0.108 255.8); // Tekst in active state
|
|
153
|
+
$dsn-color-accent-1-color-subtle: oklch(0.45 0.152 255.8); // Subtiele tekstkleur
|
|
154
|
+
$dsn-color-accent-1-color-document: oklch(0.18 0.061 255.8); // Documenttekstkleur
|
|
155
|
+
$dsn-color-negative-bg-document: oklch(0.99 0.005 29.2); // Documentachtergrond
|
|
156
|
+
$dsn-color-negative-bg-elevated: oklch(0.99 0.005 29.2); // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
157
|
+
$dsn-color-negative-bg-subtle: oklch(0.955 0.022 29.2); // Subtiele achtergrond
|
|
158
|
+
$dsn-color-negative-bg-default: oklch(0.915 0.034 29.2); // Standaard achtergrond
|
|
159
|
+
$dsn-color-negative-bg-hover: oklch(0.895 0.043 29.2); // Achtergrond in hover state
|
|
160
|
+
$dsn-color-negative-bg-active: oklch(0.875 0.053 29.2); // Achtergrond in active state
|
|
161
|
+
$dsn-color-negative-border-subtle: oklch(0.77 0.108 29.2); // Subtiele rand
|
|
162
|
+
$dsn-color-negative-border-default: oklch(0.52 0.213 29.2); // Standaard rand
|
|
163
|
+
$dsn-color-negative-border-hover: oklch(0.48 0.197 29.2); // Rand in hover state
|
|
164
|
+
$dsn-color-negative-border-active: oklch(0.44 0.181 29.2); // Rand in active state
|
|
165
|
+
$dsn-color-negative-color-default: oklch(0.4 0.164 29.2); // Standaard tekstkleur
|
|
166
|
+
$dsn-color-negative-color-hover: oklch(0.36 0.148 29.2); // Tekst in hover state
|
|
167
|
+
$dsn-color-negative-color-active: oklch(0.32 0.131 29.2); // Tekst in active state
|
|
168
|
+
$dsn-color-negative-color-subtle: oklch(0.45 0.185 29.2); // Subtiele tekstkleur
|
|
169
|
+
$dsn-color-negative-color-document: oklch(0.18 0.074 29.2); // Documenttekstkleur
|
|
170
|
+
$dsn-color-positive-bg-document: oklch(0.99 0.009 148.2); // Documentachtergrond
|
|
171
|
+
$dsn-color-positive-bg-elevated: oklch(0.99 0.009 148.2); // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
172
|
+
$dsn-color-positive-bg-subtle: oklch(0.955 0.016 148.2); // Subtiele achtergrond
|
|
173
|
+
$dsn-color-positive-bg-default: oklch(0.915 0.022 148.2); // Standaard achtergrond
|
|
174
|
+
$dsn-color-positive-bg-hover: oklch(0.895 0.028 148.2); // Achtergrond in hover state
|
|
175
|
+
$dsn-color-positive-bg-active: oklch(0.875 0.034 148.2); // Achtergrond in active state
|
|
176
|
+
$dsn-color-positive-border-subtle: oklch(0.77 0.07 148.2); // Subtiele rand
|
|
177
|
+
$dsn-color-positive-border-default: oklch(0.52 0.15 148.2); // Standaard rand
|
|
178
|
+
$dsn-color-positive-border-hover: oklch(0.48 0.138 148.2); // Rand in hover state
|
|
179
|
+
$dsn-color-positive-border-active: oklch(0.44 0.127 148.2); // Rand in active state
|
|
180
|
+
$dsn-color-positive-color-default: oklch(0.4 0.115 148.2); // Standaard tekstkleur
|
|
181
|
+
$dsn-color-positive-color-hover: oklch(0.36 0.104 148.2); // Tekst in hover state
|
|
182
|
+
$dsn-color-positive-color-active: oklch(0.32 0.092 148.2); // Tekst in active state
|
|
183
|
+
$dsn-color-positive-color-subtle: oklch(0.45 0.13 148.2); // Subtiele tekstkleur
|
|
184
|
+
$dsn-color-positive-color-document: oklch(0.18 0.052 148.2); // Documenttekstkleur
|
|
185
|
+
$dsn-color-warning-bg-document: oklch(0.99 0.006 58.3); // Documentachtergrond
|
|
186
|
+
$dsn-color-warning-bg-elevated: oklch(0.99 0.006 58.3); // Elevated background — for floating layers (modals, popovers, dropdowns)
|
|
187
|
+
$dsn-color-warning-bg-subtle: oklch(0.955 0.019 58.3); // Subtiele achtergrond
|
|
188
|
+
$dsn-color-warning-bg-default: oklch(0.915 0.026 58.3); // Standaard achtergrond
|
|
189
|
+
$dsn-color-warning-bg-hover: oklch(0.895 0.034 58.3); // Achtergrond in hover state
|
|
190
|
+
$dsn-color-warning-bg-active: oklch(0.875 0.042 58.3); // Achtergrond in active state
|
|
191
|
+
$dsn-color-warning-border-subtle: oklch(0.77 0.085 58.3); // Subtiele rand
|
|
192
|
+
$dsn-color-warning-border-default: oklch(0.52 0.124 58.3); // Standaard rand
|
|
193
|
+
$dsn-color-warning-border-hover: oklch(0.48 0.115 58.3); // Rand in hover state
|
|
194
|
+
$dsn-color-warning-border-active: oklch(0.44 0.105 58.3); // Rand in active state
|
|
195
|
+
$dsn-color-warning-color-default: oklch(0.4 0.095 58.3); // Standaard tekstkleur
|
|
196
|
+
$dsn-color-warning-color-hover: oklch(0.36 0.086 58.3); // Tekst in hover state
|
|
197
|
+
$dsn-color-warning-color-active: oklch(0.32 0.076 58.3); // Tekst in active state
|
|
198
|
+
$dsn-color-warning-color-subtle: oklch(0.45 0.107 58.3); // Subtiele tekstkleur
|
|
199
|
+
$dsn-color-warning-color-document: oklch(0.18 0.043 58.3); // Documenttekstkleur
|
|
200
|
+
$dsn-color-neutral-inverse-bg-document: oklch(0.424 0 0); // Documentachtergrond (inverse)
|
|
201
|
+
$dsn-color-neutral-inverse-bg-elevated: oklch(0.424 0 0); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
202
|
+
$dsn-color-neutral-inverse-bg-subtle: oklch(0.384 0 0); // Subtiele achtergrond (inverse)
|
|
203
|
+
$dsn-color-neutral-inverse-bg-default: oklch(0.464 0 0); // Standaard achtergrond (inverse)
|
|
204
|
+
$dsn-color-neutral-inverse-bg-hover: oklch(0.424 0 0); // Achtergrond in hover state (inverse)
|
|
205
|
+
$dsn-color-neutral-inverse-bg-active: oklch(0.384 0 0); // Achtergrond in active state (inverse)
|
|
206
|
+
$dsn-color-neutral-inverse-border-subtle: oklch(0.659 0 0); // Subtiele rand (inverse)
|
|
207
|
+
$dsn-color-neutral-inverse-border-default: oklch(0.739 0 0); // Standaard rand (inverse)
|
|
208
|
+
$dsn-color-neutral-inverse-border-hover: oklch(0.789 0 0); // Rand in hover state (inverse)
|
|
209
|
+
$dsn-color-neutral-inverse-border-active: oklch(0.839 0 0); // Rand in active state (inverse)
|
|
210
|
+
$dsn-color-neutral-inverse-color-default: oklch(0.99 0 0); // Standaard tekstkleur (inverse)
|
|
211
|
+
$dsn-color-neutral-inverse-color-hover: oklch(0.99 0 0); // Tekst in hover state (inverse)
|
|
212
|
+
$dsn-color-neutral-inverse-color-active: oklch(0.99 0 0); // Tekst in active state (inverse)
|
|
213
|
+
$dsn-color-neutral-inverse-color-subtle: oklch(0.94 0 0); // Subtiele tekstkleur (inverse)
|
|
214
|
+
$dsn-color-neutral-inverse-color-document: oklch(0.99 0 0); // Documenttekstkleur (inverse)
|
|
215
|
+
$dsn-color-accent-1-inverse-bg-document: oklch(0.427 0.098 255.8); // Documentachtergrond (inverse)
|
|
216
|
+
$dsn-color-accent-1-inverse-bg-elevated: oklch(0.427 0.098 255.8); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
217
|
+
$dsn-color-accent-1-inverse-bg-subtle: oklch(0.387 0.114 255.8); // Subtiele achtergrond (inverse)
|
|
218
|
+
$dsn-color-accent-1-inverse-bg-default: oklch(0.467 0.158 255.8); // Standaard achtergrond (inverse)
|
|
219
|
+
$dsn-color-accent-1-inverse-bg-hover: oklch(0.427 0.145 255.8); // Achtergrond in hover state (inverse)
|
|
220
|
+
$dsn-color-accent-1-inverse-bg-active: oklch(0.387 0.131 255.8); // Achtergrond in active state (inverse)
|
|
221
|
+
$dsn-color-accent-1-inverse-border-subtle: oklch(0.657 0.108 255.8); // Subtiele rand (inverse)
|
|
222
|
+
$dsn-color-accent-1-inverse-border-default: oklch(0.737 0.09 255.8); // Standaard rand (inverse)
|
|
223
|
+
$dsn-color-accent-1-inverse-border-hover: oklch(0.787 0.108 255.8); // Rand in hover state (inverse)
|
|
224
|
+
$dsn-color-accent-1-inverse-border-active: oklch(0.837 0.082 255.8); // Rand in active state (inverse)
|
|
225
|
+
$dsn-color-accent-1-inverse-color-default: oklch(0.99 0.005 255.8); // Standaard tekstkleur (inverse)
|
|
226
|
+
$dsn-color-accent-1-inverse-color-hover: oklch(0.99 0.005 255.8); // Tekst in hover state (inverse)
|
|
227
|
+
$dsn-color-accent-1-inverse-color-active: oklch(0.99 0.005 255.8); // Tekst in active state (inverse)
|
|
228
|
+
$dsn-color-accent-1-inverse-color-subtle: oklch(0.94 0.029 255.8); // Subtiele tekstkleur (inverse)
|
|
229
|
+
$dsn-color-accent-1-inverse-color-document: oklch(0.99 0.005 255.8); // Documenttekstkleur (inverse)
|
|
230
|
+
$dsn-color-info-inverse-bg-document: oklch(0.427 0.098 255.8); // Documentachtergrond (inverse)
|
|
231
|
+
$dsn-color-info-inverse-bg-elevated: oklch(0.427 0.098 255.8); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
232
|
+
$dsn-color-info-inverse-bg-subtle: oklch(0.387 0.114 255.8); // Subtiele achtergrond (inverse)
|
|
233
|
+
$dsn-color-info-inverse-bg-default: oklch(0.467 0.158 255.8); // Standaard achtergrond (inverse)
|
|
234
|
+
$dsn-color-info-inverse-bg-hover: oklch(0.427 0.145 255.8); // Achtergrond in hover state (inverse)
|
|
235
|
+
$dsn-color-info-inverse-bg-active: oklch(0.387 0.131 255.8); // Achtergrond in active state (inverse)
|
|
236
|
+
$dsn-color-info-inverse-border-subtle: oklch(0.657 0.108 255.8); // Subtiele rand (inverse)
|
|
237
|
+
$dsn-color-info-inverse-border-default: oklch(0.737 0.09 255.8); // Standaard rand (inverse)
|
|
238
|
+
$dsn-color-info-inverse-border-hover: oklch(0.787 0.108 255.8); // Rand in hover state (inverse)
|
|
239
|
+
$dsn-color-info-inverse-border-active: oklch(0.837 0.082 255.8); // Rand in active state (inverse)
|
|
240
|
+
$dsn-color-info-inverse-color-default: oklch(0.99 0.005 255.8); // Standaard tekstkleur (inverse)
|
|
241
|
+
$dsn-color-info-inverse-color-hover: oklch(0.99 0.005 255.8); // Tekst in hover state (inverse)
|
|
242
|
+
$dsn-color-info-inverse-color-active: oklch(0.99 0.005 255.8); // Tekst in active state (inverse)
|
|
243
|
+
$dsn-color-info-inverse-color-subtle: oklch(0.94 0.029 255.8); // Subtiele tekstkleur (inverse)
|
|
244
|
+
$dsn-color-info-inverse-color-document: oklch(0.99 0.005 255.8); // Documenttekstkleur (inverse)
|
|
245
|
+
$dsn-color-negative-inverse-bg-document: oklch(0.449 0.145 29.2); // Documentachtergrond (inverse)
|
|
246
|
+
$dsn-color-negative-inverse-bg-elevated: oklch(0.449 0.145 29.2); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
247
|
+
$dsn-color-negative-inverse-bg-subtle: oklch(0.409 0.168 29.2); // Subtiele achtergrond (inverse)
|
|
248
|
+
$dsn-color-negative-inverse-bg-default: oklch(0.489 0.201 29.2); // Standaard achtergrond (inverse)
|
|
249
|
+
$dsn-color-negative-inverse-bg-hover: oklch(0.449 0.184 29.2); // Achtergrond in hover state (inverse)
|
|
250
|
+
$dsn-color-negative-inverse-bg-active: oklch(0.409 0.168 29.2); // Achtergrond in active state (inverse)
|
|
251
|
+
$dsn-color-negative-inverse-border-subtle: oklch(0.674 0.159 29.2); // Subtiele rand (inverse)
|
|
252
|
+
$dsn-color-negative-inverse-border-default: oklch(0.754 0.133 29.2); // Standaard rand (inverse)
|
|
253
|
+
$dsn-color-negative-inverse-border-hover: oklch(0.804 0.112 29.2); // Rand in hover state (inverse)
|
|
254
|
+
$dsn-color-negative-inverse-border-active: oklch(0.854 0.079 29.2); // Rand in active state (inverse)
|
|
255
|
+
$dsn-color-negative-inverse-color-default: oklch(0.99 0.005 29.2); // Standaard tekstkleur (inverse)
|
|
256
|
+
$dsn-color-negative-inverse-color-hover: oklch(0.99 0.005 29.2); // Tekst in hover state (inverse)
|
|
257
|
+
$dsn-color-negative-inverse-color-active: oklch(0.99 0.005 29.2); // Tekst in active state (inverse)
|
|
258
|
+
$dsn-color-negative-inverse-color-subtle: oklch(0.94 0.03 29.2); // Subtiele tekstkleur (inverse)
|
|
259
|
+
$dsn-color-negative-inverse-color-document: oklch(0.99 0.005 29.2); // Documenttekstkleur (inverse)
|
|
260
|
+
$dsn-color-positive-inverse-bg-document: oklch(0.411 0.094 148.2); // Documentachtergrond (inverse)
|
|
261
|
+
$dsn-color-positive-inverse-bg-elevated: oklch(0.411 0.094 148.2); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
262
|
+
$dsn-color-positive-inverse-bg-subtle: oklch(0.371 0.107 148.2); // Subtiele achtergrond (inverse)
|
|
263
|
+
$dsn-color-positive-inverse-bg-default: oklch(0.451 0.13 148.2); // Standaard achtergrond (inverse)
|
|
264
|
+
$dsn-color-positive-inverse-bg-hover: oklch(0.411 0.118 148.2); // Achtergrond in hover state (inverse)
|
|
265
|
+
$dsn-color-positive-inverse-bg-active: oklch(0.371 0.107 148.2); // Achtergrond in active state (inverse)
|
|
266
|
+
$dsn-color-positive-inverse-border-subtle: oklch(0.651 0.103 148.2); // Subtiele rand (inverse)
|
|
267
|
+
$dsn-color-positive-inverse-border-default: oklch(0.731 0.086 148.2); // Standaard rand (inverse)
|
|
268
|
+
$dsn-color-positive-inverse-border-hover: oklch(0.781 0.103 148.2); // Rand in hover state (inverse)
|
|
269
|
+
$dsn-color-positive-inverse-border-active: oklch(0.831 0.123 148.2); // Rand in active state (inverse)
|
|
270
|
+
$dsn-color-positive-inverse-color-default: oklch(0.99 0.009 148.2); // Standaard tekstkleur (inverse)
|
|
271
|
+
$dsn-color-positive-inverse-color-hover: oklch(0.99 0.009 148.2); // Tekst in hover state (inverse)
|
|
272
|
+
$dsn-color-positive-inverse-color-active: oklch(0.99 0.009 148.2); // Tekst in active state (inverse)
|
|
273
|
+
$dsn-color-positive-inverse-color-subtle: oklch(0.94 0.062 148.2); // Subtiele tekstkleur (inverse)
|
|
274
|
+
$dsn-color-positive-inverse-color-document: oklch(0.99 0.009 148.2); // Documenttekstkleur (inverse)
|
|
275
|
+
$dsn-color-warning-inverse-bg-document: oklch(0.41 0.098 58.3); // Documentachtergrond (inverse)
|
|
276
|
+
$dsn-color-warning-inverse-bg-elevated: oklch(0.41 0.098 58.3); // Elevated background (inverse) — for floating layers (modals, popovers, dropdowns)
|
|
277
|
+
$dsn-color-warning-inverse-bg-subtle: oklch(0.37 0.088 58.3); // Subtiele achtergrond (inverse)
|
|
278
|
+
$dsn-color-warning-inverse-bg-default: oklch(0.45 0.107 58.3); // Standaard achtergrond (inverse)
|
|
279
|
+
$dsn-color-warning-inverse-bg-hover: oklch(0.41 0.098 58.3); // Achtergrond in hover state (inverse)
|
|
280
|
+
$dsn-color-warning-inverse-bg-active: oklch(0.37 0.088 58.3); // Achtergrond in active state (inverse)
|
|
281
|
+
$dsn-color-warning-inverse-border-subtle: oklch(0.64 0.125 58.3); // Subtiele rand (inverse)
|
|
282
|
+
$dsn-color-warning-inverse-border-default: oklch(0.72 0.104 58.3); // Standaard rand (inverse)
|
|
283
|
+
$dsn-color-warning-inverse-border-hover: oklch(0.77 0.125 58.3); // Rand in hover state (inverse)
|
|
284
|
+
$dsn-color-warning-inverse-border-active: oklch(0.82 0.122 58.3); // Rand in active state (inverse)
|
|
285
|
+
$dsn-color-warning-inverse-color-default: oklch(0.99 0.006 58.3); // Standaard tekstkleur (inverse)
|
|
286
|
+
$dsn-color-warning-inverse-color-hover: oklch(0.99 0.006 58.3); // Tekst in hover state (inverse)
|
|
287
|
+
$dsn-color-warning-inverse-color-active: oklch(0.99 0.006 58.3); // Tekst in active state (inverse)
|
|
288
|
+
$dsn-color-warning-inverse-color-subtle: oklch(0.94 0.037 58.3); // Subtiele tekstkleur (inverse)
|
|
289
|
+
$dsn-color-warning-inverse-color-document: oklch(0.99 0.006 58.3); // Documenttekstkleur (inverse)
|
|
290
290
|
$dsn-color-transparent: rgba(0, 0, 0, 0); // Volledig transparant — voor onzichtbare achtergronden en randen
|
|
291
291
|
$dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent); // Scherpe schaduwlaag — direct licht, dichtbij het object
|
|
292
292
|
$dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent); // Diffuse schaduwlaag — omgevingslicht, verder weg
|
|
@@ -589,7 +589,7 @@ $dsn-color-action-2-inverse-color-hover: $dsn-color-accent-1-inverse-color-hover
|
|
|
589
589
|
$dsn-color-action-2-inverse-color-active: $dsn-color-accent-1-inverse-color-active; // Tekst in active state (inverse) — secundaire acties (links, navigatie)
|
|
590
590
|
$dsn-color-action-2-inverse-color-subtle: $dsn-color-accent-1-inverse-color-subtle; // Subtiele tekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
591
591
|
$dsn-color-action-2-inverse-color-document: $dsn-color-accent-1-inverse-color-document; // Documenttekstkleur (inverse) — secundaire acties (links, navigatie)
|
|
592
|
-
$dsn-backdrop-background-color: $dsn-color-neutral-inverse-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document
|
|
592
|
+
$dsn-backdrop-background-color: $dsn-color-neutral-inverse-bg-document; // Achtergrondkleur van de backdrop — altijd donker, ongeacht light mode. Gebruikt neutral-inverse.bg-document zodat de overlay donker blijft in light mode.
|
|
593
593
|
$dsn-backdrop-z-index: $dsn-z-index-400; // Z-index schaal: backdrop (400) → modal-dialog/drawer (500) → skip-link (600)
|
|
594
594
|
$dsn-action-group-column-gap: $dsn-space-inline-lg; // Horizontal gap between actions in horizontal direction
|
|
595
595
|
$dsn-action-group-row-gap: $dsn-space-row-lg; // Vertical gap between wrapped rows in horizontal direction
|