@mittwald/flow-design-tokens 0.2.0-alpha.81 → 0.2.0-alpha.811

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.
@@ -8,22 +8,7 @@
8
8
  --corner-radius--round: 50%;
9
9
  --border-style--default: solid;
10
10
  --border-style--dashed: dashed;
11
- --dark--color--100: rgb(0 0 0 / 12.5%);
12
- --dark--color--200: rgb(0 0 0 / 25%);
13
- --dark--color--300: rgb(0 0 0 / 37.5%);
14
- --dark--color--400: rgb(0 0 0 / 50%);
15
- --dark--color--500: rgb(0 0 0 / 62.5%);
16
- --dark--color--600: rgb(0 0 0 / 75%);
17
- --dark--color--700: rgb(0 0 0 / 87.5%);
18
- --dark--color--800: rgb(0 0 0 / 100%);
19
- --light--color--100: rgb(255 255 255 / 12.5%);
20
- --light--color--200: rgb(255 255 255 / 25%);
21
- --light--color--300: rgb(255 255 255 / 37.5%);
22
- --light--color--400: rgb(255 255 255 / 50%);
23
- --light--color--500: rgb(255 255 255 / 62.5%);
24
- --light--color--600: rgb(255 255 255 / 75%);
25
- --light--color--700: rgb(255 255 255 / 87.5%);
26
- --light--color--800: rgb(255 255 255 / 100%);
11
+ --message--tip-size-y: 12px;
27
12
  --color--gray--100: #FFFFFF;
28
13
  --color--gray--200: #FDFDFD;
29
14
  --color--gray--300: #F8F8F8;
@@ -136,82 +121,51 @@
136
121
  --color--categorical--green: #008f5d;
137
122
  --color--categorical--lime: #bce931;
138
123
  --color--transparent: transparent;
124
+ --color--gradient: radial-gradient(circle at 27.74% 38.09%,#d8e9f8,transparent 60%),radial-gradient(circle at 63.98% 99.4%,#e4b8ff,transparent 37%),radial-gradient(circle at 79.7% 64.93%,#d8e9f8,transparent 52%),radial-gradient(circle at 10.9% 91.41%,#d8e9f8,transparent 56%),radial-gradient(circle at 3.68% 3.26%,#0056ff,transparent 31%),radial-gradient(circle at 99.62% 17.78%,#48c7d8,transparent 26%),radial-gradient(circle at 58.65% 24.91%,#d8e9f8,transparent 55%),radial-gradient(circle at 53.23% 52.72%,#d8e9f8,transparent 100%),radial-gradient(circle at 50% 50%,#fff,#fff 100%);
125
+ --color--code-syntax--keyword: #cf222e;
126
+ --color--code-syntax--type: #6f42c1;
127
+ --color--code-syntax--variable: #005cc5;
128
+ --color--code-syntax--property: #6f42c1;
129
+ --color--code-syntax--string: #032f62;
130
+ --color--code-syntax--number: #005cc5;
131
+ --color--code-syntax--comment: #6a737d;
132
+ --color--code-syntax--function: #8250df;
133
+ --color--code-syntax--operator: #C12F3F;
134
+ --color--code-syntax--invalid: #cb2431;
135
+ --color--black-alpha--100: rgb(0 0 0 / 12.5%);
136
+ --color--black-alpha--200: rgb(0 0 0 / 25%);
137
+ --color--black-alpha--300: rgb(0 0 0 / 37.5%);
138
+ --color--black-alpha--400: rgb(0 0 0 / 50%);
139
+ --color--black-alpha--500: rgb(0 0 0 / 62.5%);
140
+ --color--black-alpha--600: rgb(0 0 0 / 75%);
141
+ --color--black-alpha--700: rgb(0 0 0 / 87.5%);
142
+ --color--black-alpha--800: rgb(0 0 0 / 100%);
143
+ --color--white-alpha--100: rgb(255 255 255 / 12.5%);
144
+ --color--white-alpha--200: rgb(255 255 255 / 25%);
145
+ --color--white-alpha--300: rgb(255 255 255 / 37.5%);
146
+ --color--white-alpha--400: rgb(255 255 255 / 50%);
147
+ --color--white-alpha--500: rgb(255 255 255 / 62.5%);
148
+ --color--white-alpha--600: rgb(255 255 255 / 75%);
149
+ --color--white-alpha--700: rgb(255 255 255 / 87.5%);
150
+ --color--white-alpha--800: rgb(255 255 255 / 100%);
151
+ --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
152
+ --color--static-black-alpha--200: rgb(0 0 0 / 25%);
153
+ --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
154
+ --color--static-black-alpha--400: rgb(0 0 0 / 50%);
155
+ --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
156
+ --color--static-black-alpha--600: rgb(0 0 0 / 75%);
157
+ --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
158
+ --color--static-black-alpha--800: rgb(0 0 0 / 100%);
159
+ --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
160
+ --color--static-white-alpha--200: rgb(255 255 255 / 25%);
161
+ --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
162
+ --color--static-white-alpha--400: rgb(255 255 255 / 50%);
163
+ --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
164
+ --color--static-white-alpha--600: rgb(255 255 255 / 75%);
165
+ --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
166
+ --color--static-white-alpha--800: rgb(255 255 255 / 100%);
139
167
  --avatar--size--m: 2.5rem;
140
- --code--default-syntax-color-addition: #397300;
141
- --code--default-syntax-color-built-in: #397300;
142
- --code--default-syntax-color-bullet: #397300;
143
- --code--default-syntax-color-code: #397300;
144
- --code--default-syntax-color-comment: #666666;
145
- --code--default-syntax-color-deletion: #880000;
146
- --code--default-syntax-color-link: #a94747;
147
- --code--default-syntax-color-literal: #4c6d3b;
148
- --code--default-syntax-color-meta: #1e6e94;
149
- --code--default-syntax-color-meta-string: #326d8b;
150
- --code--default-syntax-color-number: #880000;
151
- --code--default-syntax-color-quote: #880000;
152
- --code--default-syntax-color-regexp: #a94747;
153
- --code--default-syntax-color-section: #880000;
154
- --code--default-syntax-color-selector-attr: #a94747;
155
- --code--default-syntax-color-selector-class: #880000;
156
- --code--default-syntax-color-selector-id: #880000;
157
- --code--default-syntax-color-selector-pseudo: #a94747;
158
- --code--default-syntax-color-string: #880000;
159
- --code--default-syntax-color-symbol: #a94747;
160
- --code--default-syntax-color-template-tag: #880000;
161
- --code--default-syntax-color-template-variable: #a94747;
162
- --code--default-syntax-color-title: #880000;
163
- --code--default-syntax-color-type: #880000;
164
- --code--default-syntax-color-variable: #a94747;
165
- --code--light-syntax-color-addition: #68d100;
166
- --code--light-syntax-color-built-in: #68d100;
167
- --code--light-syntax-color-bullet: #68d100;
168
- --code--light-syntax-color-code: #68d100;
169
- --code--light-syntax-color-comment: #b8b8b8;
170
- --code--light-syntax-color-deletion: #ff9e9e;
171
- --code--light-syntax-color-link: #dcacac;
172
- --code--light-syntax-color-literal: #9fc28e;
173
- --code--light-syntax-color-meta: #77c0e4;
174
- --code--light-syntax-color-meta-string: #8ebfd7;
175
- --code--light-syntax-color-number: #ff9e9e;
176
- --code--light-syntax-color-pseudo: #dcacac;
177
- --code--light-syntax-color-quote: #ff9e9e;
178
- --code--light-syntax-color-regexp: #dcacac;
179
- --code--light-syntax-color-section: #ff9e9e;
180
- --code--light-syntax-color-selector-attr: #dcacac;
181
- --code--light-syntax-color-selector-class: #ff9e9e;
182
- --code--light-syntax-color-selector-id: #ff9e9e;
183
- --code--light-syntax-color-string: #ff9e9e;
184
- --code--light-syntax-color-symbol: #dcacac;
185
- --code--light-syntax-color-template-tag: #ff9e9e;
186
- --code--light-syntax-color-template-variable: #dcacac;
187
- --code--light-syntax-color-title: #ff9e9e;
188
- --code--light-syntax-color-type: #ff9e9e;
189
- --code--light-syntax-color-variable: #dcacac;
190
- --code--dark-syntax-color-addition: #306100;
191
- --code--dark-syntax-color-built-in: #306100;
192
- --code--dark-syntax-color-bullet: #306100;
193
- --code--dark-syntax-color-code: #306100;
194
- --code--dark-syntax-color-comment: #575757;
195
- --code--dark-syntax-color-deletion: #880000;
196
- --code--dark-syntax-color-link: #8c3b3b;
197
- --code--dark-syntax-color-literal: #405d32;
198
- --code--dark-syntax-color-meta: #195b7b;
199
- --code--dark-syntax-color-meta-string: #2a5b74;
200
- --code--dark-syntax-color-number: #880000;
201
- --code--dark-syntax-color-pseudo: #8c3b3b;
202
- --code--dark-syntax-color-quote: #880000;
203
- --code--dark-syntax-color-regexp: #8c3b3b;
204
- --code--dark-syntax-color-section: #880000;
205
- --code--dark-syntax-color-selector-attr: #8c3b3b;
206
- --code--dark-syntax-color-selector-class: #880000;
207
- --code--dark-syntax-color-selector-id: #880000;
208
- --code--dark-syntax-color-string: #880000;
209
- --code--dark-syntax-color-symbol: #8c3b3b;
210
- --code--dark-syntax-color-template-tag: #880000;
211
- --code--dark-syntax-color-template-variable: #8c3b3b;
212
- --code--dark-syntax-color-title: #880000;
213
- --code--dark-syntax-color-type: #880000;
214
- --code--dark-syntax-color-variable: #8c3b3b;
168
+ --code-block--font-family: FiraCode, monospace;
215
169
  --icon--size--s: 1rem;
216
170
  --icon--size--m: 1.5rem;
217
171
  --icon--size--l: 4rem;
@@ -227,6 +181,7 @@
227
181
  --font-size-heading--l: 1.5rem;
228
182
  --font-size-heading--xl: 2rem;
229
183
  --font-size-heading--xxl: 2.625rem;
184
+ --code-editor--font-family: FiraCode, monospace;
230
185
  --calendar--cell-size: 2.25rem;
231
186
  --switch--track-height: 1.5rem;
232
187
  --switch--track-width: 2.75rem;
@@ -235,6 +190,7 @@
235
190
  --contextual-help--max-width: 500px;
236
191
  --modal--size--s: 660px;
237
192
  --modal--size--m: 900px;
193
+ --modal--size--l: 1300px;
238
194
  --modal--content-min-height: 120px;
239
195
  --popover--min-width: 200px;
240
196
  --tooltip--max-width: 300px;
@@ -258,10 +214,12 @@
258
214
  --counter-badge--height: 1.25rem;
259
215
  --counter-badge--height-empty: 0.75rem;
260
216
  --loading-spinner--transition-duration: 2000ms;
217
+ --loading-spinner--transition-duration-slow: 6000ms;
261
218
  --notification--width: 355px;
262
- --progress-bar--height-s: 0.375rem;
263
- --transition--duration--default: 200ms;
264
- --transition--duration--slow: 300ms;
219
+ --transition--duration--fast: 200ms;
220
+ --transition--duration--default: 300ms;
221
+ --transition--duration--slow: 400ms;
222
+ --image-cropper--grid-width: 0.5px;
265
223
  --action-group--spacing--m: var(--size-px--m);
266
224
  --action-group--spacing--s: var(--size-px--s);
267
225
  --button--padding-x: var(--size-px--m);
@@ -288,7 +246,7 @@
288
246
  --border-width--200: var(--size-px--xxs);
289
247
  --border-width--300: var(--size-px--xs);
290
248
  --border-width--400: var(--size-px--s);
291
- --chat--spacing: var(--size-px--m);
249
+ --chat--spacing: var(--size-px--s);
292
250
  --message-separator--font-size: var(--font-size-text--s);
293
251
  --message-separator--padding: var(--size-px--m);
294
252
  --message-thread--spacing: var(--size-rem--l);
@@ -299,6 +257,7 @@
299
257
  --message--spacing-x: var(--size-rem--m);
300
258
  --message--background-color-responder: var(--color--gray--400);
301
259
  --message--background-color-sender: var(--color--hosting-blue--200);
260
+ --message--tip-size-x: var(--size-px--s);
302
261
  --primary--color--100: var(--color--hosting-blue--100);
303
262
  --primary--color--200: var(--color--hosting-blue--200);
304
263
  --primary--color--300: var(--color--hosting-blue--300);
@@ -343,6 +302,17 @@
343
302
  --neutral--color--900: var(--color--gray--900);
344
303
  --neutral--color--1000: var(--color--gray--1000);
345
304
  --neutral--color--1100: var(--color--gray--1100);
305
+ --unavailable--color--100: var(--color--gray--100);
306
+ --unavailable--color--200: var(--color--gray--200);
307
+ --unavailable--color--300: var(--color--gray--300);
308
+ --unavailable--color--400: var(--color--gray--400);
309
+ --unavailable--color--500: var(--color--gray--500);
310
+ --unavailable--color--600: var(--color--gray--600);
311
+ --unavailable--color--700: var(--color--gray--700);
312
+ --unavailable--color--800: var(--color--gray--800);
313
+ --unavailable--color--900: var(--color--gray--900);
314
+ --unavailable--color--1000: var(--color--gray--1000);
315
+ --unavailable--color--1100: var(--color--gray--1100);
346
316
  --danger--color--100: var(--color--amaranth-red--100);
347
317
  --danger--color--200: var(--color--amaranth-red--200);
348
318
  --danger--color--300: var(--color--amaranth-red--300);
@@ -365,6 +335,38 @@
365
335
  --warning--color--900: var(--color--royal-orange--900);
366
336
  --warning--color--1000: var(--color--royal-orange--1000);
367
337
  --warning--color--1100: var(--color--royal-orange--1100);
338
+ --dark--color--100: var(--color--black-alpha--100);
339
+ --dark--color--200: var(--color--black-alpha--200);
340
+ --dark--color--300: var(--color--black-alpha--300);
341
+ --dark--color--400: var(--color--black-alpha--400);
342
+ --dark--color--500: var(--color--black-alpha--500);
343
+ --dark--color--600: var(--color--black-alpha--600);
344
+ --dark--color--700: var(--color--black-alpha--700);
345
+ --dark--color--800: var(--color--black-alpha--800);
346
+ --light--color--100: var(--color--white-alpha--100);
347
+ --light--color--200: var(--color--white-alpha--200);
348
+ --light--color--300: var(--color--white-alpha--300);
349
+ --light--color--400: var(--color--white-alpha--400);
350
+ --light--color--500: var(--color--white-alpha--500);
351
+ --light--color--600: var(--color--white-alpha--600);
352
+ --light--color--700: var(--color--white-alpha--700);
353
+ --light--color--800: var(--color--white-alpha--800);
354
+ --dark-static--color--100: var(--color--static-black-alpha--100);
355
+ --dark-static--color--200: var(--color--static-black-alpha--200);
356
+ --dark-static--color--300: var(--color--static-black-alpha--300);
357
+ --dark-static--color--400: var(--color--static-black-alpha--400);
358
+ --dark-static--color--500: var(--color--static-black-alpha--500);
359
+ --dark-static--color--600: var(--color--static-black-alpha--600);
360
+ --dark-static--color--700: var(--color--static-black-alpha--700);
361
+ --dark-static--color--800: var(--color--static-black-alpha--800);
362
+ --light-static--color--100: var(--color--static-white-alpha--100);
363
+ --light-static--color--200: var(--color--static-white-alpha--200);
364
+ --light-static--color--300: var(--color--static-white-alpha--300);
365
+ --light-static--color--400: var(--color--static-white-alpha--400);
366
+ --light-static--color--500: var(--color--static-white-alpha--500);
367
+ --light-static--color--600: var(--color--static-white-alpha--600);
368
+ --light-static--color--700: var(--color--static-white-alpha--700);
369
+ --light-static--color--800: var(--color--static-white-alpha--800);
368
370
  --primary-plain-background-color--default: var(--color--transparent);
369
371
  --primary-outline-background-color--default: var(--color--transparent);
370
372
  --danger-plain-background-color--default: var(--color--transparent);
@@ -375,67 +377,33 @@
375
377
  --success-outline-background-color--default: var(--color--transparent);
376
378
  --warning-outline-background-color--default: var(--color--transparent);
377
379
  --warning-plain-background-color--default: var(--color--transparent);
380
+ --unavailable-plain-background-color--default: var(--color--transparent);
381
+ --unavailable-outline-background-color--default: var(--color--transparent);
378
382
  --neutral-plain-background-color--default: var(--color--transparent);
379
383
  --neutral-outline-background-color--default: var(--color--transparent);
380
- --disabled-solid-dark-background-color: var(--dark--color--300);
381
- --disabled-solid-dark-content-color: var(--light--color--300);
382
- --disabled-solid-light-background-color: var(--light--color--300);
383
- --disabled-solid-light-content-color: var(--dark--color--300);
384
384
  --disabled-plain-background-color: var(--color--transparent);
385
- --disabled-plain-dark-content-color: var(--dark--color--300);
386
- --disabled-plain-light-content-color: var(--light--color--300);
387
385
  --disabled-outline-dark-background-color: var(--color--transparent);
388
- --disabled-outline-dark-border-color: var(--dark--color--300);
389
- --disabled-outline-dark-content-color: var(--dark--color--300);
390
386
  --disabled-outline-light-background-color: var(--color--transparent);
391
- --disabled-outline-light-border-color: var(--light--color--300);
392
- --disabled-outline-light-content-color: var(--light--color--300);
393
- --disabled-soft-dark-background-color: var(--dark--color--100);
394
- --disabled-soft-dark-content-color: var(--dark--color--200);
395
- --disabled-soft-light-background-color: var(--light--color--100);
396
- --disabled-soft-light-content-color: var(--light--color--200);
397
- --dark-solid-background-color--default: var(--dark--color--800);
398
- --dark-solid-background-color--hover: var(--dark--color--700);
399
- --dark-solid-background-color--pressed: var(--dark--color--600);
400
- --dark-solid-content-color: var(--light--color--800);
401
- --dark-soft-background-color--default: var(--dark--color--100);
402
- --dark-soft-background-color--hover: var(--dark--color--200);
403
- --dark-soft-background-color--pressed: var(--dark--color--300);
404
- --dark-soft-content-color: var(--dark--color--800);
387
+ --disabled-outline-dark-static-background-color: var(--color--transparent);
388
+ --disabled-outline-light-static-background-color: var(--color--transparent);
405
389
  --dark-plain-background-color--default: var(--color--transparent);
406
- --dark-plain-background-color--hover: var(--dark--color--100);
407
- --dark-plain-background-color--pressed: var(--dark--color--200);
408
- --dark-plain-content-color: var(--dark--color--800);
409
390
  --dark-outline-background-color--default: var(--color--transparent);
410
- --dark-outline-background-color--hover: var(--dark--color--100);
411
- --dark-outline-background-color--pressed: var(--dark--color--200);
412
- --dark-outline-border-color: var(--dark--color--800);
413
- --dark-outline-content-color: var(--dark--color--800);
414
- --light-solid-background-color--default: var(--light--color--800);
415
- --light-solid-background-color--hover: var(--light--color--700);
416
- --light-solid-background-color--pressed: var(--light--color--600);
417
- --light-solid-content-color: var(--dark--color--800);
418
- --light-soft-background-color--default: var(--light--color--100);
419
- --light-soft-background-color--hover: var(--light--color--200);
420
- --light-soft-background-color--pressed: var(--light--color--300);
421
- --light-soft-content-color: var(--light--color--800);
422
391
  --light-plain-background-color--default: var(--color--transparent);
423
- --light-plain-background-color--hover: var(--light--color--100);
424
- --light-plain-background-color--pressed: var(--light--color--200);
425
- --light-plain-content-color: var(--light--color--800);
426
392
  --light-outline-background-color--default: var(--color--transparent);
427
- --light-outline-background-color--hover: var(--light--color--100);
428
- --light-outline-background-color--pressed: var(--light--color--200);
429
- --light-outline-border-color: var(--light--color--800);
430
- --light-outline-content-color: var(--light--color--800);
393
+ --dark-static-plain-background-color--default: var(--color--transparent);
394
+ --dark-static-outline-background-color--default: var(--color--transparent);
395
+ --light-static-plain-background-color--default: var(--color--transparent);
396
+ --light-static-outline-background-color--default: var(--color--transparent);
397
+ --color--violet: var(--color--soft-contrast-violet--800);
398
+ --color--teal: var(--color--super-teal--800);
399
+ --color--lilac: var(--color--bright-lilac--800);
431
400
  --avatar--size--xs: var(--size-rem--l);
432
401
  --avatar--size--s: var(--size-rem--xl);
433
402
  --avatar--size--l: var(--size-rem--xxl);
434
- --code--font-size: var(--font-size-text--s);
435
- --code--padding-x: var(--size-px--xs);
436
- --code--padding-y: var(--size-px--xxs);
437
- --code--padding: var(--size-px--m);
438
- --code--spacing: var(--size-px--m);
403
+ --code-block--font-size: var(--font-size-text--s);
404
+ --code-block--padding: var(--size-px--m);
405
+ --code-block--border-style: var(--border-style--default);
406
+ --code-block--show-more-padding: var(--size-px--xs);
439
407
  --decorative--blue-background-color: var(--color--hosting-blue--200);
440
408
  --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
441
409
  --decorative--blue-content-color: var(--color--hosting-blue--1000);
@@ -460,6 +428,13 @@
460
428
  --illustrated-message--spacing: var(--size-rem--m);
461
429
  --image--border-style: var(--border-style--default);
462
430
  --initials--font-weight: var(--font-weight--bold);
431
+ --inline-code--font-size: var(--font-size-text--s);
432
+ --inline-code--padding-x: var(--size-px--xs);
433
+ --inline-code--padding-y: var(--size-px--xxs);
434
+ --kbd--padding: var(--size-px--xs);
435
+ --kbd--padding-y-start: var(--size-px--xxs);
436
+ --kbd--inner-shadow-size-x: var(--size-px--xxs);
437
+ --kbd--inner-shadow-size-y-end: var(--size-px--xs);
463
438
  --label--font-size: var(--font-size-text--s);
464
439
  --label--font-weight: var(--font-weight--bold);
465
440
  --label--spacing: var(--size-rem--xs);
@@ -469,18 +444,38 @@
469
444
  --text--blockquote-border-style: var(--border-style--default);
470
445
  --text--blockquote-padding: var(--size-rem--s);
471
446
  --text--list-padding: var(--size-rem--l);
447
+ --axis--spacing: var(--size-px--s);
448
+ --axis--font-size: var(--font-size-text--s);
449
+ --axis--color: var(--color--gray--700);
450
+ --axis--tick-size: var(--size-px--s);
451
+ --big-number--spacing: var(--size-rem--xs);
452
+ --big-number--top-font-size: var(--font-size-heading--xl);
453
+ --big-number--bottom-font-size: var(--font-size-text--m);
454
+ --big-number--font-weight: var(--font-weight--bold);
455
+ --cartesian-grid--color: var(--color--gray--700);
456
+ --chart-tooltip--spacing: var(--size-px--s);
457
+ --donut-chart--spacing-y: var(--size-rem--s);
458
+ --donut-chart--spacing-x: var(--size-rem--m);
459
+ --donut-chart--padding--m: var(--size-px--l);
460
+ --donut-chart--padding--l: var(--size-px--xl);
461
+ --legend--spacing-x: var(--size-px--m);
462
+ --legend--spacing-y: var(--size-px--s);
463
+ --legend-item--spacing: var(--size-rem--s);
464
+ --legend-item--marker--size: var(--size-rem--m);
472
465
  --focus--outline-offset: var(--size-px--xxs);
473
466
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
474
467
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
475
468
  --font-size-text--default: var(--font-size-text--m);
469
+ --code-editor--font-size: var(--font-size-text--s);
470
+ --code-editor--gutter-element-min-width: var(--size-rem--l);
476
471
  --date-picker--date-segment-corner-radius: var(--size-px--xs);
477
472
  --calendar--spacing: var(--size-rem--xs);
478
473
  --calendar--cell-corner-radius: var(--corner-radius--round);
479
474
  --calendar--cell-font-size: var(--font-size-text--s);
475
+ --calendar--cell-range-border-style: var(--border-style--default);
480
476
  --calendar--header-cell-font-weight: var(--font-weight--bold);
481
477
  --field-description--font-size: var(--font-size-text--s);
482
478
  --field-error--font-size: var(--font-size-text--s);
483
- --field-error--spacing: var(--size-rem--xs);
484
479
  --form-control--label-to-control-spacing: var(--size-rem--xxs);
485
480
  --form-control--control-to-info-spacing: var(--size-rem--xs);
486
481
  --form-control--spacing-x: var(--size-rem--s);
@@ -488,6 +483,8 @@
488
483
  --form-control--padding-x: var(--size-px--m);
489
484
  --form-control--padding-y: var(--size-px--s);
490
485
  --form-control--border-style: var(--border-style--default);
486
+ --rating--spacing--s: var(--size-rem--xxs);
487
+ --rating--spacing--m: var(--size-rem--xs);
491
488
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
492
489
  --slider--spacing-x: var(--size-rem--s);
493
490
  --slider--spacing-y: var(--size-rem--m);
@@ -499,12 +496,6 @@
499
496
  --switch--label-to-track-spacing: var(--size-rem--s);
500
497
  --switch--track-padding: var(--size-rem--xxs);
501
498
  --time-field--date-segment-corner-radius: var(--size-px--xs);
502
- --breadcrumb--color-light--default: var(--light--color--800);
503
- --breadcrumb--color-light--hover: var(--light--color--700);
504
- --breadcrumb--color-light--pressed: var(--light--color--600);
505
- --breadcrumb--color-dark--default: var(--dark--color--800);
506
- --breadcrumb--color-dark--hover: var(--dark--color--700);
507
- --breadcrumb--color-dark--pressed: var(--dark--color--600);
508
499
  --breadcrumb--spacing: var(--size-rem--s);
509
500
  --breadcrumb--font-weight--default: var(--font-weight--normal);
510
501
  --breadcrumb--font-weight--current: var(--font-weight--bold);
@@ -513,26 +504,20 @@
513
504
  --header-navigation--corner-radius-round: var(--corner-radius--round);
514
505
  --header-navigation--font-weight-current: var(--font-weight--bold);
515
506
  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
507
+ --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
516
508
  --link--font-weight: var(--font-weight--bold);
517
509
  --link--spacing: var(--size-rem--xs);
518
- --link--color-dark--default: var(--dark--color--800);
519
- --link--color-dark--hover: var(--dark--color--700);
520
- --link--color-dark--pressed: var(--dark--color--600);
521
- --link--color-light--default: var(--light--color--800);
522
- --link--color-light--hover: var(--light--color--700);
523
- --link--color-light--pressed: var(--light--color--600);
524
510
  --tabs--padding: var(--size-px--m);
525
511
  --tabs--font-weight--selected: var(--font-weight--bold);
526
512
  --tabs--spacing: var(--size-rem--s);
527
- --light-box--overlay-background-color: var(--dark--color--600);
528
513
  --light-box--max-width: calc(100dvw - var(--size-px--l));
529
514
  --light-box--max-height: calc(100dvh - var(--size-px--l));
530
515
  --light-box--spacing: var(--size-px--m);
531
516
  --modal--padding: var(--size-px--l);
517
+ --modal--padding-mobile: var(--size-px--m);
532
518
  --modal--border-style: var(--border-style--default);
533
519
  --modal--header-padding-y: var(--size-px--s);
534
520
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
535
- --overlay--background-color: var(--dark--color--200);
536
521
  --popover--padding--m: var(--size-px--m);
537
522
  --popover--padding--s: var(--size-px--s);
538
523
  --popover--border-style: var(--border-style--default);
@@ -547,6 +532,7 @@
547
532
  --tooltip--tip-size: var(--size-px--s);
548
533
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
549
534
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
535
+ --alert-text--spacing: var(--size-rem--xs);
550
536
  --alert--padding: var(--size-px--m);
551
537
  --alert--border-style: var(--border-style--default);
552
538
  --alert--heading-to-content-spacing: var(--size-rem--s);
@@ -623,20 +609,6 @@
623
609
  --badge--orange-content-color--default: var(--color--royal-orange--900);
624
610
  --badge--orange-content-color--pressed: var(--color--royal-orange--1000);
625
611
  --badge--orange-scope-background-color: var(--color--royal-orange--900);
626
- --badge--dark-border-color: var(--dark--color--800);
627
- --badge--dark-background-color--default: var(--dark--color--100);
628
- --badge--dark-background-color--hover: var(--dark--color--200);
629
- --badge--dark-background-color--pressed: var(--dark--color--300);
630
- --badge--dark-content-color--default: var(--dark--color--800);
631
- --badge--dark-content-color--pressed: var(--dark--color--800);
632
- --badge--dark-scope-background-color: var(--dark--color--800);
633
- --badge--light-border-color: var(--light--color--800);
634
- --badge--light-background-color--default: var(--light--color--100);
635
- --badge--light-background-color--hover: var(--light--color--200);
636
- --badge--light-background-color--pressed: var(--light--color--300);
637
- --badge--light-content-color--default: var(--light--color--800);
638
- --badge--light-content-color--pressed: var(--light--color--800);
639
- --badge--light-scope-background-color: var(--light--color--800);
640
612
  --counter-badge--font-weight: var(--font-weight--bold);
641
613
  --counter-badge--padding-inline: var(--size-rem--xs);
642
614
  --counter-badge--border-style: var(--border-style--default);
@@ -647,13 +619,25 @@
647
619
  --notification--heading-to-text-spacing: var(--size-rem--xs);
648
620
  --notification--spacing: var(--size-rem--s);
649
621
  --notification--font-size: var(--font-size-text--s);
622
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
650
623
  --progress-bar--font-size: var(--font-size-text--m);
651
624
  --progress-bar--font-size-s: var(--font-size-text--s);
652
625
  --progress-bar--value-font-weight: var(--font-weight--bold);
653
626
  --progress-bar--spacing-y: var(--size-rem--xs);
654
627
  --progress-bar--spacing-x: var(--size-rem--m);
655
- --progress-bar--height: var(--size-rem--s);
628
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
629
+ --progress-bar--height--m: var(--size-rem--m);
630
+ --progress-bar--height--s: var(--size-rem--s);
631
+ --progress-bar--height--l: var(--size-rem--l);
656
632
  --progress-bar--corner-radius: var(--size-rem--xs);
633
+ --accent-box--background-color-blue: var(--color--hosting-blue--200);
634
+ --accent-box--background-color-teal: var(--color--super-teal--200);
635
+ --accent-box--background-color-lilac: var(--color--bright-lilac--200);
636
+ --accent-box--background-color-violet: var(--color--soft-contrast-violet--200);
637
+ --accent-box--background-color-green: var(--color--espelkamp-green--200);
638
+ --accent-box--background-color-navy: var(--color--mittwald-navy--200);
639
+ --accent-box--background-color-gradient: var(--color--gradient);
640
+ --accent-box--padding: var(--size-px--m);
657
641
  --accordion--spacing: var(--size-rem--s);
658
642
  --accordion--border-style: var(--border-style--default);
659
643
  --accordion--padding-x: var(--size-px--s);
@@ -670,6 +654,7 @@
670
654
  --layout-card--padding-mobile: var(--size-px--m);
671
655
  --list--spacing: var(--size-px--s);
672
656
  --list--block-to-block-spacing: var(--size-px--m);
657
+ --list--filter-to-search-spacing: var(--size-px--xl);
673
658
  --list-item--padding: var(--size-px--s);
674
659
  --list-item--border-style: var(--border-style--default);
675
660
  --list-item--spacing: var(--size-px--m);
@@ -681,6 +666,7 @@
681
666
  --section--sub-heading-spacing-s: var(--size-rem--s);
682
667
  --section-header--action-to-action-spacing: var(--size-rem--s);
683
668
  --section-header--heading-to-action-spacing: var(--size-rem--m);
669
+ --separator--border-style: var(--border-style--default);
684
670
  --table--border-style: var(--border-style--default);
685
671
  --table--padding-x: var(--size-px--m);
686
672
  --table--padding-y: var(--size-px--s);
@@ -694,6 +680,8 @@
694
680
  --file-drop-zone--padding: var(--size-px--m);
695
681
  --file-drop-zone--border-style--default: var(--border-style--dashed);
696
682
  --file-drop-zone--border-style--target: var(--border-style--default);
683
+ --image-cropper--spacing: var(--size-px--s);
684
+ --image-cropper--border-style: var(--border-style--default);
697
685
  --button--corner-radius: var(--corner-radius--default);
698
686
  --button--pending-icon-color: var(--neutral--color--1000);
699
687
  --button--border-width: var(--border-width--100);
@@ -709,74 +697,22 @@
709
697
  --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
710
698
  --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
711
699
  --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
712
- --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
713
- --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
714
- --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
715
- --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
716
- --button--dark-solid-content-color--default: var(--dark-solid-content-color);
717
- --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
718
- --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
719
- --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
720
700
  --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
721
- --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
722
- --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
723
701
  --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
724
- --button--dark-plain-content-color--default: var(--dark-plain-content-color);
725
- --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
726
- --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
727
- --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
728
- --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
729
- --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
730
- --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
731
- --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
732
- --button--dark-soft-content-color--default: var(--dark-soft-content-color);
733
- --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
734
- --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
735
- --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
736
702
  --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
737
- --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
738
- --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
739
703
  --button--dark-outline-background-color--disabled: var(--disabled-outline-dark-background-color);
740
- --button--dark-outline-content-color--default: var(--dark-outline-content-color);
741
- --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
742
- --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
743
- --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
744
- --button--dark-outline-border-color--default: var(--dark-outline-border-color);
745
- --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
746
- --button--light-solid-background-color--default: var(--light-solid-background-color--default);
747
- --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
748
- --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
749
- --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
750
- --button--light-solid-content-color--default: var(--light-solid-content-color);
751
- --button--light-solid-content-color--hover: var(--light-solid-content-color);
752
- --button--light-solid-content-color--pressed: var(--light-solid-content-color);
753
- --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
754
704
  --button--light-plain-background-color--default: var(--light-plain-background-color--default);
755
- --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
756
- --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
757
705
  --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
758
- --button--light-plain-content-color--default: var(--light-plain-content-color);
759
- --button--light-plain-content-color--hover: var(--light-plain-content-color);
760
- --button--light-plain-content-color--pressed: var(--light-plain-content-color);
761
- --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
762
- --button--light-soft-background-color--default: var(--light-soft-background-color--default);
763
- --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
764
- --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
765
- --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
766
- --button--light-soft-content-color--default: var(--light-soft-content-color);
767
- --button--light-soft-content-color--hover: var(--light-soft-content-color);
768
- --button--light-soft-content-color--pressed: var(--light-soft-content-color);
769
- --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
770
706
  --button--light-outline-background-color--default: var(--light-outline-background-color--default);
771
- --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
772
- --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
773
707
  --button--light-outline-background-color--disabled: var(--disabled-outline-light-background-color);
774
- --button--light-outline-content-color--default: var(--light-outline-content-color);
775
- --button--light-outline-content-color--hover: var(--light-outline-content-color);
776
- --button--light-outline-content-color--pressed: var(--light-outline-content-color);
777
- --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
778
- --button--light-outline-border-color--default: var(--light-outline-border-color);
779
- --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
708
+ --button--dark-static-plain-background-color--default: var(--dark-static-plain-background-color--default);
709
+ --button--dark-static-plain-background-color--disabled: var(--disabled-plain-background-color);
710
+ --button--dark-static-outline-background-color--default: var(--dark-static-outline-background-color--default);
711
+ --button--dark-static-outline-background-color--disabled: var(--disabled-outline-dark-static-background-color);
712
+ --button--light-static-plain-background-color--default: var(--light-static-plain-background-color--default);
713
+ --button--light-static-plain-background-color--disabled: var(--disabled-plain-background-color);
714
+ --button--light-static-outline-background-color--default: var(--light-static-outline-background-color--default);
715
+ --button--light-static-outline-background-color--disabled: var(--disabled-outline-light-static-background-color);
780
716
  --menu-item--corner-radius: var(--corner-radius--default);
781
717
  --menu-item--color--current: var(--primary--color--800);
782
718
  --menu-item--icon-color--default: var(--neutral--color--800);
@@ -862,9 +798,25 @@
862
798
  --warning-soft-background-color--pressed: var(--warning--color--300);
863
799
  --warning-soft-content-color--default: var(--warning--color--900);
864
800
  --warning-soft-content-color--pressed: var(--warning--color--1000);
865
- --warning-plain-background-color--hover: var(--info--color--100);
866
- --warning-plain-background-color--pressed: var(--info--color--200);
867
- --warning-plain-content-color: var(--info--color--800);
801
+ --warning-plain-background-color--hover: var(--warning--color--100);
802
+ --warning-plain-background-color--pressed: var(--warning--color--200);
803
+ --warning-plain-content-color: var(--warning--color--800);
804
+ --unavailable-solid-background-color--default: var(--unavailable--color--800);
805
+ --unavailable-solid-background-color--hover: var(--unavailable--color--900);
806
+ --unavailable-solid-background-color--pressed: var(--unavailable--color--1000);
807
+ --unavailable-solid-content-color: var(--neutral--color--100);
808
+ --unavailable-plain-background-color--hover: var(--unavailable--color--300);
809
+ --unavailable-plain-background-color--pressed: var(--unavailable--color--400);
810
+ --unavailable-plain-content-color: var(--unavailable--color--800);
811
+ --unavailable-outline-background-color--hover: var(--unavailable--color--300);
812
+ --unavailable-outline-background-color--pressed: var(--unavailable--color--400);
813
+ --unavailable-outline-content-color: var(--unavailable--color--900);
814
+ --unavailable-outline-border-color: var(--unavailable--color--800);
815
+ --unavailable-soft-background-color--default: var(--unavailable--color--300);
816
+ --unavailable-soft-background-color--hover: var(--unavailable--color--400);
817
+ --unavailable-soft-background-color--pressed: var(--unavailable--color--500);
818
+ --unavailable-soft-content-color--default: var(--unavailable--color--900);
819
+ --unavailable-soft-content-color--pressed: var(--unavailable--color--1000);
868
820
  --neutral-solid-background-color--default: var(--neutral--color--800);
869
821
  --neutral-solid-background-color--hover: var(--neutral--color--900);
870
822
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
@@ -884,46 +836,146 @@
884
836
  --neutral-soft-content-color--pressed: var(--neutral--color--1100);
885
837
  --disabled-solid-background-color: var(--neutral--color--400);
886
838
  --disabled-solid-content-color: var(--neutral--color--600);
839
+ --disabled-solid-dark-background-color: var(--dark--color--300);
840
+ --disabled-solid-dark-content-color: var(--light--color--300);
841
+ --disabled-solid-light-background-color: var(--light--color--300);
842
+ --disabled-solid-light-content-color: var(--dark--color--300);
843
+ --disabled-solid-dark-static-background-color: var(--dark-static--color--300);
844
+ --disabled-solid-dark-static-content-color: var(--light-static--color--300);
845
+ --disabled-solid-light-static-background-color: var(--light-static--color--300);
846
+ --disabled-solid-light-static-content-color: var(--dark-static--color--300);
887
847
  --disabled-plain-content-color: var(--neutral--color--400);
848
+ --disabled-plain-dark-content-color: var(--dark--color--300);
849
+ --disabled-plain-light-content-color: var(--light--color--300);
850
+ --disabled-plain-dark-static-content-color: var(--dark-static--color--300);
851
+ --disabled-plain-light-static-content-color: var(--light-static--color--300);
888
852
  --disabled-outline-background-color: var(--neutral--color--300);
889
853
  --disabled-outline-content-color: var(--neutral--color--500);
890
854
  --disabled-outline-border-color: var(--neutral--color--400);
855
+ --disabled-outline-dark-border-color: var(--dark--color--300);
856
+ --disabled-outline-dark-content-color: var(--dark--color--300);
857
+ --disabled-outline-light-border-color: var(--light--color--300);
858
+ --disabled-outline-light-content-color: var(--light--color--300);
859
+ --disabled-outline-dark-static-border-color: var(--dark-static--color--300);
860
+ --disabled-outline-dark-static-content-color: var(--dark-static--color--300);
861
+ --disabled-outline-light-static-border-color: var(--light-static--color--300);
862
+ --disabled-outline-light-static-content-color: var(--light-static--color--300);
891
863
  --disabled-soft-background-color: var(--neutral--color--300);
892
864
  --disabled-soft-content-color: var(--neutral--color--500);
865
+ --disabled-soft-dark-background-color: var(--dark--color--100);
866
+ --disabled-soft-dark-content-color: var(--dark--color--200);
867
+ --disabled-soft-light-background-color: var(--light--color--100);
868
+ --disabled-soft-light-content-color: var(--light--color--200);
869
+ --disabled-soft-dark-static-background-color: var(--dark-static--color--100);
870
+ --disabled-soft-dark-static-content-color: var(--dark-static--color--200);
871
+ --disabled-soft-light-static-background-color: var(--light-static--color--100);
872
+ --disabled-soft-light-static-content-color: var(--light-static--color--200);
873
+ --dark-solid-background-color--default: var(--dark--color--800);
874
+ --dark-solid-background-color--hover: var(--dark--color--700);
875
+ --dark-solid-background-color--pressed: var(--dark--color--600);
876
+ --dark-solid-content-color: var(--light--color--800);
877
+ --dark-soft-background-color--default: var(--dark--color--100);
878
+ --dark-soft-background-color--hover: var(--dark--color--200);
879
+ --dark-soft-background-color--pressed: var(--dark--color--300);
880
+ --dark-soft-content-color: var(--dark--color--800);
881
+ --dark-plain-background-color--hover: var(--dark--color--100);
882
+ --dark-plain-background-color--pressed: var(--dark--color--200);
883
+ --dark-plain-content-color: var(--dark--color--800);
884
+ --dark-outline-background-color--hover: var(--dark--color--100);
885
+ --dark-outline-background-color--pressed: var(--dark--color--200);
886
+ --dark-outline-border-color: var(--dark--color--800);
887
+ --dark-outline-content-color: var(--dark--color--800);
888
+ --light-solid-background-color--default: var(--light--color--800);
889
+ --light-solid-background-color--hover: var(--light--color--700);
890
+ --light-solid-background-color--pressed: var(--light--color--600);
891
+ --light-solid-content-color: var(--dark--color--800);
892
+ --light-soft-background-color--default: var(--light--color--100);
893
+ --light-soft-background-color--hover: var(--light--color--200);
894
+ --light-soft-background-color--pressed: var(--light--color--300);
895
+ --light-soft-content-color: var(--light--color--800);
896
+ --light-plain-background-color--hover: var(--light--color--100);
897
+ --light-plain-background-color--pressed: var(--light--color--200);
898
+ --light-plain-content-color: var(--light--color--800);
899
+ --light-outline-background-color--hover: var(--light--color--100);
900
+ --light-outline-background-color--pressed: var(--light--color--200);
901
+ --light-outline-border-color: var(--light--color--800);
902
+ --light-outline-content-color: var(--light--color--800);
903
+ --dark-static-solid-background-color--default: var(--dark-static--color--800);
904
+ --dark-static-solid-background-color--hover: var(--dark-static--color--700);
905
+ --dark-static-solid-background-color--pressed: var(--dark-static--color--600);
906
+ --dark-static-solid-content-color: var(--light-static--color--800);
907
+ --dark-static-soft-background-color--default: var(--dark-static--color--100);
908
+ --dark-static-soft-background-color--hover: var(--dark-static--color--200);
909
+ --dark-static-soft-background-color--pressed: var(--dark-static--color--300);
910
+ --dark-static-soft-content-color: var(--dark-static--color--800);
911
+ --dark-static-plain-background-color--hover: var(--dark-static--color--100);
912
+ --dark-static-plain-background-color--pressed: var(--dark-static--color--200);
913
+ --dark-static-plain-content-color: var(--dark-static--color--800);
914
+ --dark-static-outline-background-color--hover: var(--dark-static--color--100);
915
+ --dark-static-outline-background-color--pressed: var(--dark-static--color--200);
916
+ --dark-static-outline-border-color: var(--dark-static--color--800);
917
+ --dark-static-outline-content-color: var(--dark-static--color--800);
918
+ --light-static-solid-background-color--default: var(--light-static--color--800);
919
+ --light-static-solid-background-color--hover: var(--light-static--color--700);
920
+ --light-static-solid-background-color--pressed: var(--light-static--color--600);
921
+ --light-static-solid-content-color: var(--dark-static--color--800);
922
+ --light-static-soft-background-color--default: var(--light-static--color--100);
923
+ --light-static-soft-background-color--hover: var(--light-static--color--200);
924
+ --light-static-soft-background-color--pressed: var(--light-static--color--300);
925
+ --light-static-soft-content-color: var(--light-static--color--800);
926
+ --light-static-plain-background-color--hover: var(--light-static--color--100);
927
+ --light-static-plain-background-color--pressed: var(--light-static--color--200);
928
+ --light-static-plain-content-color: var(--light-static--color--800);
929
+ --light-static-outline-background-color--hover: var(--light-static--color--100);
930
+ --light-static-outline-background-color--pressed: var(--light-static--color--200);
931
+ --light-static-outline-border-color: var(--light-static--color--800);
932
+ --light-static-outline-content-color: var(--light-static--color--800);
933
+ --color--blue: var(--primary--color--1000);
893
934
  --avatar-stack--border-width: var(--border-width--200);
894
- --code--line-height: var(--line-height--m);
895
- --code--corner-radius: var(--corner-radius--default);
896
- --code--light-background-color: var(--light-soft-background-color--default);
897
- --code--light-content-color: var(--light-soft-content-color);
898
- --code--dark-background-color: var(--dark-soft-background-color--default);
899
- --code--dark-content-color: var(--dark-soft-content-color);
935
+ --avatar--info-status-background-color: var(--info--color--200);
936
+ --avatar--warning-status-background-color: var(--warning--color--200);
937
+ --avatar--danger-status-background-color: var(--danger--color--200);
938
+ --avatar--success-status-background-color: var(--success--color--200);
939
+ --avatar--unavailable-status-background-color: var(--unavailable--color--400);
940
+ --code-block--corner-radius: var(--corner-radius--default);
941
+ --code-block--border-width: var(--border-width--100);
900
942
  --heading--color: var(--primary--color--1000);
901
- --heading--color-dark: var(--dark-plain-content-color);
902
- --heading--color-light: var(--light-plain-content-color);
943
+ --heading--color-danger: var(--danger--color--900);
944
+ --heading--color-unavailable: var(--unavailable--color--900);
903
945
  --icon--color: var(--neutral--color--800);
904
- --illustrated-message--primary-icon-color: var(--primary--color--900);
905
- --illustrated-message--danger-icon-color: var(--danger--color--900);
906
- --illustrated-message--danger-heading-color: var(--danger--color--1000);
907
- --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
908
- --illustrated-message--light-icon-color: var(--light-plain-content-color);
946
+ --icon--info-color: var(--info--color--900);
947
+ --icon--warning-color: var(--warning--color--900);
948
+ --icon--danger-color: var(--danger--color--900);
949
+ --icon--success-color: var(--success--color--900);
950
+ --icon--unavailable-color: var(--unavailable--color--900);
951
+ --illustrated-message--primary-content-color: var(--primary--color--1000);
952
+ --illustrated-message--danger-content-color: var(--danger--color--900);
953
+ --illustrated-message--unavailable-content-color: var(--unavailable--color--900);
909
954
  --image--corner-radius: var(--corner-radius--default);
910
955
  --image--border-width: var(--border-width--100);
956
+ --inline-code--corner-radius: var(--corner-radius--default);
957
+ --kbd--corner-radius: var(--corner-radius--default);
958
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
911
959
  --label--line-height: var(--line-height--m);
912
960
  --label--color--default: var(--neutral--color--800);
913
961
  --text--color--default: var(--neutral--color--1000);
914
- --text--color--light: var(--light-plain-content-color);
915
- --text--color--dark: var(--dark-plain-content-color);
916
962
  --text--blockquote-border-width: var(--border-width--300);
963
+ --area--border-width: var(--border-width--200);
964
+ --area--border-color: var(--neutral--color--100);
965
+ --axis--text-color: var(--neutral--color--1000);
966
+ --axis--stroke-width: var(--border-width--100);
967
+ --cartesian-grid--stroke-width: var(--border-width--100);
968
+ --donut-chart--background-color: var(--neutral--color--300);
969
+ --legend-item--marker--corner-radius: var(--corner-radius--default);
970
+ --line--border-width: var(--border-width--200);
917
971
  --focus--outline-color: var(--primary--color--800);
918
972
  --focus--secondary-outline-color: var(--neutral--color--100);
919
973
  --focus--outline-width: var(--border-width--200);
920
974
  --choice--icon-color--selected: var(--primary--color--800);
921
975
  --calendar--heading-font-size: var(--font-size-text--default);
922
976
  --calendar--cell-background-color--disabled: var(--disabled-plain-background-color);
923
- --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
924
- --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
925
977
  --calendar--cell-range-background-color: var(--primary--color--100);
926
- --field-error--color: var(--danger--color--800);
978
+ --calendar--cell-range-border-width: var(--border-width--100);
927
979
  --form-control--corner-radius: var(--corner-radius--default);
928
980
  --form-control--border-width: var(--border-width--100);
929
981
  --form-control--placeholder-color--default: var(--neutral--color--900);
@@ -933,6 +985,8 @@
933
985
  --form-control--background-color--focused: var(--neutral--color--300);
934
986
  --form-control--background-color--invalid: var(--danger--color--100);
935
987
  --form-control--background-color--selected: var(--primary--color--200);
988
+ --rating--star-color: var(--neutral--color--700);
989
+ --rating--star-filled-color: var(--primary--color--1000);
936
990
  --slider--color--default: var(--primary--color--1000);
937
991
  --slider--color--disabled: var(--neutral--color--600);
938
992
  --slider--track-color--default: var(--neutral--color--700);
@@ -946,26 +1000,43 @@
946
1000
  --breadcrumb--color-primary--default: var(--primary--color--1000);
947
1001
  --breadcrumb--color-primary--hover: var(--primary--color--900);
948
1002
  --breadcrumb--color-primary--pressed: var(--primary--color--800);
1003
+ --breadcrumb--color-dark--default: var(--dark--color--800);
1004
+ --breadcrumb--color-dark--hover: var(--dark--color--700);
1005
+ --breadcrumb--color-dark--pressed: var(--dark--color--600);
1006
+ --breadcrumb--color-light--default: var(--light--color--800);
1007
+ --breadcrumb--color-light--hover: var(--light--color--700);
1008
+ --breadcrumb--color-light--pressed: var(--light--color--600);
1009
+ --breadcrumb--color-dark-static--default: var(--dark-static--color--800);
1010
+ --breadcrumb--color-dark-static--hover: var(--dark-static--color--700);
1011
+ --breadcrumb--color-dark-static--pressed: var(--dark-static--color--600);
1012
+ --breadcrumb--color-light-static--default: var(--light-static--color--800);
1013
+ --breadcrumb--color-light-static--hover: var(--light-static--color--700);
1014
+ --breadcrumb--color-light-static--pressed: var(--light-static--color--600);
949
1015
  --header-navigation--corner-radius: var(--corner-radius--default);
950
- --header-navigation--color: var(--primary--color--1000);
951
- --header-navigation--color-dark: var(--dark-plain-content-color);
952
- --header-navigation--color-light: var(--light-plain-content-color);
953
- --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
954
- --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
955
- --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
956
- --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
957
1016
  --header-navigation--underline-width-current: var(--border-width--200);
958
- --link--line-height: var(--line-height--m);
1017
+ --header-navigation--color: var(--primary--color--1000);
959
1018
  --link--color--default: var(--primary--color--800);
960
1019
  --link--color--hover: var(--primary--color--900);
961
1020
  --link--color--pressed: var(--primary--color--1000);
962
- --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
963
- --link--color-light--disabled: var(--disabled-plain-light-content-color);
1021
+ --link--color-dark--default: var(--dark--color--800);
1022
+ --link--color-dark--hover: var(--dark--color--700);
1023
+ --link--color-dark--pressed: var(--dark--color--600);
1024
+ --link--color-light--default: var(--light--color--800);
1025
+ --link--color-light--hover: var(--light--color--700);
1026
+ --link--color-light--pressed: var(--light--color--600);
1027
+ --link--color-dark-static--default: var(--dark-static--color--800);
1028
+ --link--color-dark-static--hover: var(--dark-static--color--700);
1029
+ --link--color-dark-static--pressed: var(--dark-static--color--600);
1030
+ --link--color-light-static--default: var(--light-static--color--800);
1031
+ --link--color-light-static--hover: var(--light-static--color--700);
1032
+ --link--color-light-static--pressed: var(--light-static--color--600);
964
1033
  --tabs--background-color--selected: var(--neutral--color--100);
1034
+ --light-box--overlay-background-color: var(--dark--color--600);
965
1035
  --modal--corner-radius: var(--corner-radius--default);
966
1036
  --modal--background-color: var(--neutral--color--100);
967
1037
  --modal--footer-background-color: var(--neutral--color--300);
968
1038
  --modal--border-width: var(--border-width--100);
1039
+ --overlay--background-color: var(--dark--color--200);
969
1040
  --popover--box-shadow: var(--shadow--overlay);
970
1041
  --popover--corner-radius: var(--corner-radius--default);
971
1042
  --popover--background-color: var(--neutral--color--100);
@@ -973,20 +1044,43 @@
973
1044
  --tooltip--background-color: var(--neutral--color--900);
974
1045
  --tooltip--box-shadow: var(--shadow--overlay);
975
1046
  --tooltip--header-corner-radius: var(--corner-radius--default);
1047
+ --alert-text--info-color: var(--info--color--900);
1048
+ --alert-text--warning-color: var(--warning--color--900);
1049
+ --alert-text--danger-color: var(--danger--color--900);
1050
+ --alert-text--success-color: var(--success--color--900);
1051
+ --alert-text--unavailable-color: var(--unavailable--color--900);
976
1052
  --alert--corner-radius: var(--corner-radius--default);
977
1053
  --alert--border-width: var(--border-width--100);
978
1054
  --alert--border-x-start-width: var(--border-width--400);
979
1055
  --badge--border-width: var(--border-width--100);
980
- --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
981
- --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
982
- --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
983
- --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
984
- --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
985
- --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
986
- --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
987
- --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
988
- --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
989
- --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1056
+ --badge--dark-border-color: var(--dark--color--800);
1057
+ --badge--dark-background-color--default: var(--dark--color--100);
1058
+ --badge--dark-background-color--hover: var(--dark--color--200);
1059
+ --badge--dark-background-color--pressed: var(--dark--color--300);
1060
+ --badge--dark-content-color--default: var(--dark--color--800);
1061
+ --badge--dark-content-color--pressed: var(--dark--color--800);
1062
+ --badge--dark-scope-background-color: var(--dark--color--800);
1063
+ --badge--light-border-color: var(--light--color--800);
1064
+ --badge--light-background-color--default: var(--light--color--100);
1065
+ --badge--light-background-color--hover: var(--light--color--200);
1066
+ --badge--light-background-color--pressed: var(--light--color--300);
1067
+ --badge--light-content-color--default: var(--light--color--800);
1068
+ --badge--light-content-color--pressed: var(--light--color--800);
1069
+ --badge--light-scope-background-color: var(--light--color--800);
1070
+ --badge--dark-static-border-color: var(--dark-static--color--800);
1071
+ --badge--dark-static-background-color--default: var(--dark-static--color--100);
1072
+ --badge--dark-static-background-color--hover: var(--dark-static--color--200);
1073
+ --badge--dark-static-background-color--pressed: var(--dark-static--color--300);
1074
+ --badge--dark-static-content-color--default: var(--dark-static--color--800);
1075
+ --badge--dark-static-content-color--pressed: var(--dark-static--color--800);
1076
+ --badge--dark-static-scope-background-color: var(--dark-static--color--800);
1077
+ --badge--light-static-border-color: var(--light-static--color--800);
1078
+ --badge--light-static-background-color--default: var(--light-static--color--100);
1079
+ --badge--light-static-background-color--hover: var(--light-static--color--200);
1080
+ --badge--light-static-background-color--pressed: var(--light-static--color--300);
1081
+ --badge--light-static-content-color--default: var(--light-static--color--800);
1082
+ --badge--light-static-content-color--pressed: var(--light-static--color--800);
1083
+ --badge--light-static-scope-background-color: var(--light-static--color--800);
990
1084
  --counter-badge--border-width: var(--border-width--200);
991
1085
  --counter-badge--border-color: var(--neutral--color--100);
992
1086
  --notification--corner-radius: var(--corner-radius--default);
@@ -996,8 +1090,11 @@
996
1090
  --notification--warning-background-color--default: var(--neutral--color--100);
997
1091
  --notification--danger-background-color--default: var(--neutral--color--100);
998
1092
  --notification--success-background-color--default: var(--neutral--color--100);
1093
+ --notification--unavailable-background-color--default: var(--neutral--color--100);
999
1094
  --progress-bar--border-width: var(--border-width--100);
1000
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1095
+ --progress-bar--background-color: var(--neutral--color--300);
1096
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1097
+ --accent-box--corner-radius: var(--corner-radius--default);
1001
1098
  --accordion--corner-radius: var(--corner-radius--default);
1002
1099
  --accordion--border-width: var(--border-width--100);
1003
1100
  --accordion--background-color--hover: var(--primary--color--100);
@@ -1020,9 +1117,15 @@
1020
1117
  --file-card--corner-radius: var(--corner-radius--default);
1021
1118
  --file-card--border-width: var(--border-width--100);
1022
1119
  --file-card--background-color--default: var(--neutral--color--100);
1120
+ --file-card--background-color--error: var(--danger--color--100);
1023
1121
  --file-drop-zone--corner-radius: var(--corner-radius--default);
1024
1122
  --file-drop-zone--border-width: var(--border-width--100);
1025
1123
  --file-drop-zone--border-color--target: var(--primary--color--800);
1124
+ --image-cropper--border-width: var(--border-width--100);
1125
+ --image-cropper--corner-radius: var(--corner-radius--default);
1126
+ --image-cropper--grid-color: var(--light--color--400);
1127
+ --image-cropper--mask-border-color: var(--light--color--800);
1128
+ --image-cropper--mask-color: var(--dark--color--600);
1026
1129
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
1027
1130
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
1028
1131
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
@@ -1147,26 +1250,175 @@
1147
1250
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1148
1251
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1149
1252
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1253
+ --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
1254
+ --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
1255
+ --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
1256
+ --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
1257
+ --button--dark-solid-content-color--default: var(--dark-solid-content-color);
1258
+ --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
1259
+ --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
1260
+ --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
1261
+ --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
1262
+ --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
1263
+ --button--dark-plain-content-color--default: var(--dark-plain-content-color);
1264
+ --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
1265
+ --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
1266
+ --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
1267
+ --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
1268
+ --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
1269
+ --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
1270
+ --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
1271
+ --button--dark-soft-content-color--default: var(--dark-soft-content-color);
1272
+ --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
1273
+ --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
1274
+ --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
1275
+ --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
1276
+ --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
1277
+ --button--dark-outline-content-color--default: var(--dark-outline-content-color);
1278
+ --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
1279
+ --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
1280
+ --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
1281
+ --button--dark-outline-border-color--default: var(--dark-outline-border-color);
1282
+ --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
1283
+ --button--light-solid-background-color--default: var(--light-solid-background-color--default);
1284
+ --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
1285
+ --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
1286
+ --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
1287
+ --button--light-solid-content-color--default: var(--light-solid-content-color);
1288
+ --button--light-solid-content-color--hover: var(--light-solid-content-color);
1289
+ --button--light-solid-content-color--pressed: var(--light-solid-content-color);
1290
+ --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
1291
+ --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
1292
+ --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
1293
+ --button--light-plain-content-color--default: var(--light-plain-content-color);
1294
+ --button--light-plain-content-color--hover: var(--light-plain-content-color);
1295
+ --button--light-plain-content-color--pressed: var(--light-plain-content-color);
1296
+ --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
1297
+ --button--light-soft-background-color--default: var(--light-soft-background-color--default);
1298
+ --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
1299
+ --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
1300
+ --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
1301
+ --button--light-soft-content-color--default: var(--light-soft-content-color);
1302
+ --button--light-soft-content-color--hover: var(--light-soft-content-color);
1303
+ --button--light-soft-content-color--pressed: var(--light-soft-content-color);
1304
+ --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
1305
+ --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
1306
+ --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
1307
+ --button--light-outline-content-color--default: var(--light-outline-content-color);
1308
+ --button--light-outline-content-color--hover: var(--light-outline-content-color);
1309
+ --button--light-outline-content-color--pressed: var(--light-outline-content-color);
1310
+ --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
1311
+ --button--light-outline-border-color--default: var(--light-outline-border-color);
1312
+ --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
1313
+ --button--dark-static-solid-background-color--default: var(--dark-static-solid-background-color--default);
1314
+ --button--dark-static-solid-background-color--hover: var(--dark-static-solid-background-color--hover);
1315
+ --button--dark-static-solid-background-color--pressed: var(--dark-static-solid-background-color--pressed);
1316
+ --button--dark-static-solid-background-color--disabled: var(--disabled-solid-dark-static-background-color);
1317
+ --button--dark-static-solid-content-color--default: var(--dark-static-solid-content-color);
1318
+ --button--dark-static-solid-content-color--hover: var(--dark-static-solid-content-color);
1319
+ --button--dark-static-solid-content-color--pressed: var(--dark-static-solid-content-color);
1320
+ --button--dark-static-solid-content-color--disabled: var(--disabled-solid-dark-static-content-color);
1321
+ --button--dark-static-plain-background-color--hover: var(--dark-static-plain-background-color--hover);
1322
+ --button--dark-static-plain-background-color--pressed: var(--dark-static-plain-background-color--pressed);
1323
+ --button--dark-static-plain-content-color--default: var(--dark-static-plain-content-color);
1324
+ --button--dark-static-plain-content-color--hover: var(--dark-static-plain-content-color);
1325
+ --button--dark-static-plain-content-color--pressed: var(--dark-static-plain-content-color);
1326
+ --button--dark-static-plain-content-color--disabled: var(--disabled-plain-dark-static-content-color);
1327
+ --button--dark-static-soft-background-color--default: var(--dark-static-soft-background-color--default);
1328
+ --button--dark-static-soft-background-color--hover: var(--dark-static-soft-background-color--hover);
1329
+ --button--dark-static-soft-background-color--pressed: var(--dark-static-soft-background-color--pressed);
1330
+ --button--dark-static-soft-background-color--disabled: var(--disabled-soft-dark-static-background-color);
1331
+ --button--dark-static-soft-content-color--default: var(--dark-static-soft-content-color);
1332
+ --button--dark-static-soft-content-color--hover: var(--dark-static-soft-content-color);
1333
+ --button--dark-static-soft-content-color--pressed: var(--dark-static-soft-content-color);
1334
+ --button--dark-static-soft-content-color--disabled: var(--disabled-soft-dark-static-content-color);
1335
+ --button--dark-static-outline-background-color--hover: var(--dark-static-outline-background-color--hover);
1336
+ --button--dark-static-outline-background-color--pressed: var(--dark-static-outline-background-color--pressed);
1337
+ --button--dark-static-outline-content-color--default: var(--dark-static-outline-content-color);
1338
+ --button--dark-static-outline-content-color--hover: var(--dark-static-outline-content-color);
1339
+ --button--dark-static-outline-content-color--pressed: var(--dark-static-outline-content-color);
1340
+ --button--dark-static-outline-content-color--disabled: var(--disabled-outline-dark-static-content-color);
1341
+ --button--dark-static-outline-border-color--default: var(--dark-static-outline-border-color);
1342
+ --button--dark-static-outline-border-color--disabled: var(--disabled-outline-dark-static-border-color);
1343
+ --button--light-static-solid-background-color--default: var(--light-static-solid-background-color--default);
1344
+ --button--light-static-solid-background-color--hover: var(--light-static-solid-background-color--hover);
1345
+ --button--light-static-solid-background-color--pressed: var(--light-static-solid-background-color--pressed);
1346
+ --button--light-static-solid-background-color--disabled: var(--disabled-solid-light-static-background-color);
1347
+ --button--light-static-solid-content-color--default: var(--light-static-solid-content-color);
1348
+ --button--light-static-solid-content-color--hover: var(--light-static-solid-content-color);
1349
+ --button--light-static-solid-content-color--pressed: var(--light-static-solid-content-color);
1350
+ --button--light-static-solid-content-color--disabled: var(--disabled-solid-light-static-content-color);
1351
+ --button--light-static-plain-background-color--hover: var(--light-static-plain-background-color--hover);
1352
+ --button--light-static-plain-background-color--pressed: var(--light-static-plain-background-color--pressed);
1353
+ --button--light-static-plain-content-color--default: var(--light-static-plain-content-color);
1354
+ --button--light-static-plain-content-color--hover: var(--light-static-plain-content-color);
1355
+ --button--light-static-plain-content-color--pressed: var(--light-static-plain-content-color);
1356
+ --button--light-static-plain-content-color--disabled: var(--disabled-plain-light-static-content-color);
1357
+ --button--light-static-soft-background-color--default: var(--light-static-soft-background-color--default);
1358
+ --button--light-static-soft-background-color--hover: var(--light-static-soft-background-color--hover);
1359
+ --button--light-static-soft-background-color--pressed: var(--light-static-soft-background-color--pressed);
1360
+ --button--light-static-soft-background-color--disabled: var(--disabled-soft-light-static-background-color);
1361
+ --button--light-static-soft-content-color--default: var(--light-static-soft-content-color);
1362
+ --button--light-static-soft-content-color--hover: var(--light-static-soft-content-color);
1363
+ --button--light-static-soft-content-color--pressed: var(--light-static-soft-content-color);
1364
+ --button--light-static-soft-content-color--disabled: var(--disabled-soft-light-static-content-color);
1365
+ --button--light-static-outline-background-color--hover: var(--light-static-outline-background-color--hover);
1366
+ --button--light-static-outline-background-color--pressed: var(--light-static-outline-background-color--pressed);
1367
+ --button--light-static-outline-content-color--default: var(--light-static-outline-content-color);
1368
+ --button--light-static-outline-content-color--hover: var(--light-static-outline-content-color);
1369
+ --button--light-static-outline-content-color--pressed: var(--light-static-outline-content-color);
1370
+ --button--light-static-outline-content-color--disabled: var(--disabled-outline-light-static-content-color);
1371
+ --button--light-static-outline-border-color--default: var(--light-static-outline-border-color);
1372
+ --button--light-static-outline-border-color--disabled: var(--disabled-outline-light-static-border-color);
1150
1373
  --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1151
1374
  --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1152
1375
  --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1153
1376
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1154
- --code--default-background-color: var(--neutral-soft-background-color--default);
1155
- --code--default-content-color: var(--neutral-soft-content-color--default);
1156
- --icon--info-color: var(--info-outline-content-color);
1157
- --icon--warning-color: var(--warning-outline-content-color);
1158
- --icon--danger-color: var(--danger-outline-content-color);
1159
- --icon--success-color: var(--success-outline-content-color);
1160
- --illustrated-message--primary-heading-color: var(--heading--color);
1161
- --illustrated-message--dark-heading-color: var(--heading--color-dark);
1162
- --illustrated-message--light-heading-color: var(--heading--color-light);
1377
+ --code-block--background-color: var(--form-control--background-color--default);
1378
+ --code-block--content-color: var(--neutral-soft-content-color--default);
1379
+ --heading--color-dark: var(--dark-plain-content-color);
1380
+ --heading--color-light: var(--light-plain-content-color);
1381
+ --heading--color-dark-static: var(--dark-static-plain-content-color);
1382
+ --heading--color-light-static: var(--light-static-plain-content-color);
1383
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
1384
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
1385
+ --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
1386
+ --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
1163
1387
  --image--border-color: var(--neutral-outline-border-color);
1388
+ --inline-code--background-color: var(--neutral-soft-background-color--default);
1389
+ --inline-code--content-color: var(--neutral-soft-content-color--default);
1390
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
1391
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
1392
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
1393
+ --inline-code--light-content-color: var(--light-soft-content-color);
1394
+ --inline-code--dark-static-background-color: var(--dark-static-soft-background-color--default);
1395
+ --inline-code--dark-static-content-color: var(--dark-static-soft-content-color);
1396
+ --inline-code--light-static-background-color: var(--light-static-soft-background-color--default);
1397
+ --inline-code--light-static-content-color: var(--light-static-soft-content-color);
1398
+ --kbd--background-color--default: var(--neutral-soft-background-color--default);
1399
+ --kbd--background-color--disabled: var(--disabled-soft-background-color);
1400
+ --kbd--content-color--default: var(--neutral-soft-content-color--default);
1401
+ --kbd--content-color--disabled: var(--disabled-soft-content-color);
1402
+ --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1403
+ --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1404
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
1164
1405
  --label--color--disabled: var(--disabled-plain-content-color);
1406
+ --text--color--light: var(--light-plain-content-color);
1407
+ --text--color--dark: var(--dark-plain-content-color);
1408
+ --text--color--light-static: var(--light-static-plain-content-color);
1409
+ --text--color--dark-static: var(--dark-static-plain-content-color);
1165
1410
  --text--color--disabled: var(--disabled-plain-content-color);
1166
1411
  --text--blockquote-border-color: var(--info-outline-border-color);
1412
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1413
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1414
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1415
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1416
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1167
1417
  --choice--icon-color--default: var(--icon--color);
1168
1418
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1169
1419
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1420
+ --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
1421
+ --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
1170
1422
  --calendar--cell-background-color--selected: var(--primary-solid-background-color--default);
1171
1423
  --calendar--cell-content-color--disabled: var(--disabled-plain-content-color);
1172
1424
  --calendar--cell-content-color--selected: var(--primary-solid-content-color);
@@ -1186,7 +1438,23 @@
1186
1438
  --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1187
1439
  --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1188
1440
  --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1441
+ --header-navigation--color-dark: var(--dark-plain-content-color);
1442
+ --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
1443
+ --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
1444
+ --header-navigation--color-light: var(--light-plain-content-color);
1445
+ --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
1446
+ --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
1447
+ --header-navigation--color-dark-static: var(--dark-static-plain-content-color);
1448
+ --header-navigation--background-color-dark-static--hover: var(--dark-static-plain-background-color--hover);
1449
+ --header-navigation--background-color-dark-static--pressed: var(--dark-static-plain-background-color--pressed);
1450
+ --header-navigation--color-light-static: var(--light-static-plain-content-color);
1451
+ --header-navigation--background-color-light-static--hover: var(--light-static-plain-background-color--hover);
1452
+ --header-navigation--background-color-light-static--pressed: var(--light-static-plain-background-color--pressed);
1189
1453
  --link--color--disabled: var(--disabled-plain-content-color);
1454
+ --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
1455
+ --link--color-light--disabled: var(--disabled-plain-light-content-color);
1456
+ --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
1457
+ --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
1190
1458
  --tabs--background-color--default: var(--neutral-soft-background-color--default);
1191
1459
  --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1192
1460
  --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
@@ -1194,7 +1462,6 @@
1194
1462
  --tabs--disabled-color: var(--disabled-soft-content-color);
1195
1463
  --modal--border-color: var(--neutral-outline-border-color);
1196
1464
  --popover--border-color: var(--neutral-outline-border-color);
1197
- --tooltip--color: var(--text--color--light);
1198
1465
  --alert-badge--info-background-color: var(--info-soft-background-color--default);
1199
1466
  --alert-badge--info-content-color: var(--info-soft-content-color--default);
1200
1467
  --alert-badge--info-border-color: var(--info-outline-border-color);
@@ -1207,6 +1474,9 @@
1207
1474
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1208
1475
  --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1209
1476
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1477
+ --alert-badge--unavailable-background-color: var(--unavailable-soft-background-color--default);
1478
+ --alert-badge--unavailable-content-color: var(--unavailable-soft-content-color--default);
1479
+ --alert-badge--unavailable-border-color: var(--unavailable-outline-border-color);
1210
1480
  --alert--info-border-color: var(--info-outline-border-color);
1211
1481
  --alert--info-heading-color: var(--info-outline-content-color);
1212
1482
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1215,24 +1485,40 @@
1215
1485
  --alert--danger-heading-color: var(--danger-outline-content-color);
1216
1486
  --alert--success-border-color: var(--success-outline-border-color);
1217
1487
  --alert--success-heading-color: var(--success-outline-content-color);
1218
- --badge--neutral-scope-content-color: var(--text--color--light);
1219
- --badge--blue-scope-content-color: var(--text--color--light);
1220
- --badge--navy-scope-content-color: var(--text--color--light);
1221
- --badge--violet-scope-content-color: var(--text--color--light);
1222
- --badge--teal-scope-content-color: var(--text--color--light);
1223
- --badge--lilac-scope-content-color: var(--text--color--light);
1224
- --badge--red-scope-content-color: var(--text--color--light);
1225
- --badge--green-scope-content-color: var(--text--color--light);
1226
- --badge--orange-scope-content-color: var(--text--color--light);
1227
- --badge--dark-scope-content-color: var(--text--color--light);
1228
- --badge--light-scope-content-color: var(--text--color--dark);
1488
+ --alert--unavailable-border-color: var(--unavailable-outline-border-color);
1489
+ --alert--unavailable-heading-color: var(--unavailable-outline-content-color);
1229
1490
  --badge--disabled-border-color: var(--disabled-outline-border-color);
1230
1491
  --badge--disabled-background-color: var(--disabled-outline-background-color);
1231
1492
  --badge--disabled-content-color: var(--disabled-outline-content-color);
1232
1493
  --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1233
1494
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1495
+ --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
1496
+ --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
1497
+ --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
1498
+ --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
1499
+ --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
1500
+ --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
1501
+ --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
1502
+ --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
1503
+ --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
1504
+ --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1505
+ --badge--disabled-dark-static-border-color: var(--disabled-outline-dark-static-border-color);
1506
+ --badge--disabled-dark-static-background-color: var(--disabled-soft-dark-static-background-color);
1507
+ --badge--disabled-dark-static-content-color: var(--disabled-soft-dark-static-content-color);
1508
+ --badge--disabled-dark-static-scope-background-color: var(--disabled-solid-dark-static-background-color);
1509
+ --badge--disabled-dark-static-scope-content-color: var(--disabled-solid-dark-static-content-color);
1510
+ --badge--disabled-light-static-border-color: var(--disabled-outline-light-static-border-color);
1511
+ --badge--disabled-light-static-background-color: var(--disabled-soft-light-static-background-color);
1512
+ --badge--disabled-light-static-content-color: var(--disabled-soft-light-static-content-color);
1513
+ --badge--disabled-light-static-scope-background-color: var(--disabled-solid-light-static-background-color);
1514
+ --badge--disabled-light-static-scope-content-color: var(--disabled-solid-light-static-content-color);
1234
1515
  --counter-badge--background-color: var(--success-solid-background-color--default);
1235
1516
  --counter-badge--content-color: var(--success-solid-content-color);
1517
+ --loading-spinner--color: var(--icon--color);
1518
+ --loading-spinner--color-light: var(--light-plain-content-color);
1519
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
1520
+ --loading-spinner--color-light-static: var(--light-static-plain-content-color);
1521
+ --loading-spinner--color-dark-static: var(--dark-static-plain-content-color);
1236
1522
  --notification--info-border-color: var(--info-outline-border-color);
1237
1523
  --notification--info-heading-color: var(--info-outline-content-color);
1238
1524
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1249,19 +1535,45 @@
1249
1535
  --notification--success-heading-color: var(--success-outline-content-color);
1250
1536
  --notification--success-background-color--hover: var(--success-outline-background-color--hover);
1251
1537
  --notification--success-background-color--pressed: var(--success-outline-background-color--pressed);
1538
+ --notification--unavailable-border-color: var(--unavailable-outline-border-color);
1539
+ --notification--unavailable-heading-color: var(--unavailable-outline-content-color);
1540
+ --notification--unavailable-background-color--hover: var(--unavailable-outline-background-color--hover);
1541
+ --notification--unavailable-background-color--pressed: var(--unavailable-outline-background-color--pressed);
1252
1542
  --progress-bar--border-color: var(--neutral-outline-border-color);
1253
1543
  --progress-bar--info-fill-background-color: var(--info-solid-background-color--default);
1254
1544
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1255
1545
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1256
1546
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1547
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1257
1548
  --accordion--border-color: var(--neutral-outline-border-color);
1258
1549
  --list-item--border-color: var(--neutral-outline-border-color);
1259
1550
  --separator--color: var(--neutral-outline-border-color);
1260
1551
  --table--border-color: var(--neutral-outline-border-color);
1261
- --file-card--border-color: var(--neutral-outline-border-color);
1552
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1553
+ --file-card--border-color--error: var(--danger-outline-border-color);
1262
1554
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1263
1555
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1556
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1264
1557
  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1265
1558
  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1559
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1560
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1561
+ --image-cropper--border-color: var(--neutral-outline-border-color);
1562
+ --code-block--border-color: var(--separator--color);
1563
+ --calendar--cell-range-border-color: var(--form-control--border-color--default);
1564
+ --tooltip--color: var(--text--color--light);
1565
+ --badge--neutral-scope-content-color: var(--text--color--light);
1566
+ --badge--blue-scope-content-color: var(--text--color--light);
1567
+ --badge--navy-scope-content-color: var(--text--color--light);
1568
+ --badge--violet-scope-content-color: var(--text--color--light);
1569
+ --badge--teal-scope-content-color: var(--text--color--light);
1570
+ --badge--lilac-scope-content-color: var(--text--color--light);
1571
+ --badge--red-scope-content-color: var(--text--color--light);
1572
+ --badge--green-scope-content-color: var(--text--color--light);
1573
+ --badge--orange-scope-content-color: var(--text--color--light);
1574
+ --badge--dark-scope-content-color: var(--text--color--light);
1575
+ --badge--light-scope-content-color: var(--text--color--dark);
1576
+ --badge--dark-static-scope-content-color: var(--text--color--light-static);
1577
+ --badge--light-static-scope-content-color: var(--text--color--dark-static);
1266
1578
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1267
1579
  }