@mittwald/flow-design-tokens 0.2.0-alpha.82 → 0.2.0-alpha.821

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