@mittwald/flow-design-tokens 0.2.0-alpha.752 → 0.2.0-alpha.754

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.
@@ -9,22 +9,6 @@
9
9
  --border-style--default: solid;
10
10
  --border-style--dashed: dashed;
11
11
  --message--tip-size-y: 12px;
12
- --dark--color--100: rgb(0 0 0 / 12.5%);
13
- --dark--color--200: rgb(0 0 0 / 25%);
14
- --dark--color--300: rgb(0 0 0 / 37.5%);
15
- --dark--color--400: rgb(0 0 0 / 50%);
16
- --dark--color--500: rgb(0 0 0 / 62.5%);
17
- --dark--color--600: rgb(0 0 0 / 75%);
18
- --dark--color--700: rgb(0 0 0 / 87.5%);
19
- --dark--color--800: rgb(0 0 0 / 100%);
20
- --light--color--100: rgb(255 255 255 / 12.5%);
21
- --light--color--200: rgb(255 255 255 / 25%);
22
- --light--color--300: rgb(255 255 255 / 37.5%);
23
- --light--color--400: rgb(255 255 255 / 50%);
24
- --light--color--500: rgb(255 255 255 / 62.5%);
25
- --light--color--600: rgb(255 255 255 / 75%);
26
- --light--color--700: rgb(255 255 255 / 87.5%);
27
- --light--color--800: rgb(255 255 255 / 100%);
28
12
  --color--gray--100: #FFFFFF;
29
13
  --color--gray--200: #FDFDFD;
30
14
  --color--gray--300: #F8F8F8;
@@ -148,6 +132,38 @@
148
132
  --color--code-syntax--function: #8250df;
149
133
  --color--code-syntax--operator: #C12F3F;
150
134
  --color--code-syntax--invalid: #cb2431;
135
+ --color--black-alpha--100: rgb(0 0 0 / 12.5%);
136
+ --color--black-alpha--200: rgb(0 0 0 / 25%);
137
+ --color--black-alpha--300: rgb(0 0 0 / 37.5%);
138
+ --color--black-alpha--400: rgb(0 0 0 / 50%);
139
+ --color--black-alpha--500: rgb(0 0 0 / 62.5%);
140
+ --color--black-alpha--600: rgb(0 0 0 / 75%);
141
+ --color--black-alpha--700: rgb(0 0 0 / 87.5%);
142
+ --color--black-alpha--800: rgb(0 0 0 / 100%);
143
+ --color--white-alpha--100: rgb(255 255 255 / 12.5%);
144
+ --color--white-alpha--200: rgb(255 255 255 / 25%);
145
+ --color--white-alpha--300: rgb(255 255 255 / 37.5%);
146
+ --color--white-alpha--400: rgb(255 255 255 / 50%);
147
+ --color--white-alpha--500: rgb(255 255 255 / 62.5%);
148
+ --color--white-alpha--600: rgb(255 255 255 / 75%);
149
+ --color--white-alpha--700: rgb(255 255 255 / 87.5%);
150
+ --color--white-alpha--800: rgb(255 255 255 / 100%);
151
+ --color--static-black-alpha--100: rgb(0 0 0 / 12.5%);
152
+ --color--static-black-alpha--200: rgb(0 0 0 / 25%);
153
+ --color--static-black-alpha--300: rgb(0 0 0 / 37.5%);
154
+ --color--static-black-alpha--400: rgb(0 0 0 / 50%);
155
+ --color--static-black-alpha--500: rgb(0 0 0 / 62.5%);
156
+ --color--static-black-alpha--600: rgb(0 0 0 / 75%);
157
+ --color--static-black-alpha--700: rgb(0 0 0 / 87.5%);
158
+ --color--static-black-alpha--800: rgb(0 0 0 / 100%);
159
+ --color--static-white-alpha--100: rgb(255 255 255 / 12.5%);
160
+ --color--static-white-alpha--200: rgb(255 255 255 / 25%);
161
+ --color--static-white-alpha--300: rgb(255 255 255 / 37.5%);
162
+ --color--static-white-alpha--400: rgb(255 255 255 / 50%);
163
+ --color--static-white-alpha--500: rgb(255 255 255 / 62.5%);
164
+ --color--static-white-alpha--600: rgb(255 255 255 / 75%);
165
+ --color--static-white-alpha--700: rgb(255 255 255 / 87.5%);
166
+ --color--static-white-alpha--800: rgb(255 255 255 / 100%);
151
167
  --avatar--size--m: 2.5rem;
152
168
  --code-block--font-family: FiraCode, monospace;
153
169
  --icon--size--s: 1rem;
@@ -310,6 +326,38 @@
310
326
  --warning--color--900: var(--color--royal-orange--900);
311
327
  --warning--color--1000: var(--color--royal-orange--1000);
312
328
  --warning--color--1100: var(--color--royal-orange--1100);
329
+ --dark--color--100: var(--color--black-alpha--100);
330
+ --dark--color--200: var(--color--black-alpha--200);
331
+ --dark--color--300: var(--color--black-alpha--300);
332
+ --dark--color--400: var(--color--black-alpha--400);
333
+ --dark--color--500: var(--color--black-alpha--500);
334
+ --dark--color--600: var(--color--black-alpha--600);
335
+ --dark--color--700: var(--color--black-alpha--700);
336
+ --dark--color--800: var(--color--black-alpha--800);
337
+ --light--color--100: var(--color--white-alpha--100);
338
+ --light--color--200: var(--color--white-alpha--200);
339
+ --light--color--300: var(--color--white-alpha--300);
340
+ --light--color--400: var(--color--white-alpha--400);
341
+ --light--color--500: var(--color--white-alpha--500);
342
+ --light--color--600: var(--color--white-alpha--600);
343
+ --light--color--700: var(--color--white-alpha--700);
344
+ --light--color--800: var(--color--white-alpha--800);
345
+ --dark-static--color--100: var(--color--static-black-alpha--100);
346
+ --dark-static--color--200: var(--color--static-black-alpha--200);
347
+ --dark-static--color--300: var(--color--static-black-alpha--300);
348
+ --dark-static--color--400: var(--color--static-black-alpha--400);
349
+ --dark-static--color--500: var(--color--static-black-alpha--500);
350
+ --dark-static--color--600: var(--color--static-black-alpha--600);
351
+ --dark-static--color--700: var(--color--static-black-alpha--700);
352
+ --dark-static--color--800: var(--color--static-black-alpha--800);
353
+ --light-static--color--100: var(--color--static-white-alpha--100);
354
+ --light-static--color--200: var(--color--static-white-alpha--200);
355
+ --light-static--color--300: var(--color--static-white-alpha--300);
356
+ --light-static--color--400: var(--color--static-white-alpha--400);
357
+ --light-static--color--500: var(--color--static-white-alpha--500);
358
+ --light-static--color--600: var(--color--static-white-alpha--600);
359
+ --light-static--color--700: var(--color--static-white-alpha--700);
360
+ --light-static--color--800: var(--color--static-white-alpha--800);
313
361
  --primary-plain-background-color--default: var(--color--transparent);
314
362
  --primary-outline-background-color--default: var(--color--transparent);
315
363
  --danger-plain-background-color--default: var(--color--transparent);
@@ -322,57 +370,19 @@
322
370
  --warning-plain-background-color--default: var(--color--transparent);
323
371
  --neutral-plain-background-color--default: var(--color--transparent);
324
372
  --neutral-outline-background-color--default: var(--color--transparent);
325
- --disabled-solid-dark-background-color: var(--dark--color--300);
326
- --disabled-solid-dark-content-color: var(--light--color--300);
327
- --disabled-solid-light-background-color: var(--light--color--300);
328
- --disabled-solid-light-content-color: var(--dark--color--300);
329
373
  --disabled-plain-background-color: var(--color--transparent);
330
- --disabled-plain-dark-content-color: var(--dark--color--300);
331
- --disabled-plain-light-content-color: var(--light--color--300);
332
374
  --disabled-outline-dark-background-color: var(--color--transparent);
333
- --disabled-outline-dark-border-color: var(--dark--color--300);
334
- --disabled-outline-dark-content-color: var(--dark--color--300);
335
375
  --disabled-outline-light-background-color: var(--color--transparent);
336
- --disabled-outline-light-border-color: var(--light--color--300);
337
- --disabled-outline-light-content-color: var(--light--color--300);
338
- --disabled-soft-dark-background-color: var(--dark--color--100);
339
- --disabled-soft-dark-content-color: var(--dark--color--200);
340
- --disabled-soft-light-background-color: var(--light--color--100);
341
- --disabled-soft-light-content-color: var(--light--color--200);
342
- --dark-solid-background-color--default: var(--dark--color--800);
343
- --dark-solid-background-color--hover: var(--dark--color--700);
344
- --dark-solid-background-color--pressed: var(--dark--color--600);
345
- --dark-solid-content-color: var(--light--color--800);
346
- --dark-soft-background-color--default: var(--dark--color--100);
347
- --dark-soft-background-color--hover: var(--dark--color--200);
348
- --dark-soft-background-color--pressed: var(--dark--color--300);
349
- --dark-soft-content-color: var(--dark--color--800);
376
+ --disabled-outline-dark-static-background-color: var(--color--transparent);
377
+ --disabled-outline-light-static-background-color: var(--color--transparent);
350
378
  --dark-plain-background-color--default: var(--color--transparent);
351
- --dark-plain-background-color--hover: var(--dark--color--100);
352
- --dark-plain-background-color--pressed: var(--dark--color--200);
353
- --dark-plain-content-color: var(--dark--color--800);
354
379
  --dark-outline-background-color--default: var(--color--transparent);
355
- --dark-outline-background-color--hover: var(--dark--color--100);
356
- --dark-outline-background-color--pressed: var(--dark--color--200);
357
- --dark-outline-border-color: var(--dark--color--800);
358
- --dark-outline-content-color: var(--dark--color--800);
359
- --light-solid-background-color--default: var(--light--color--800);
360
- --light-solid-background-color--hover: var(--light--color--700);
361
- --light-solid-background-color--pressed: var(--light--color--600);
362
- --light-solid-content-color: var(--dark--color--800);
363
- --light-soft-background-color--default: var(--light--color--100);
364
- --light-soft-background-color--hover: var(--light--color--200);
365
- --light-soft-background-color--pressed: var(--light--color--300);
366
- --light-soft-content-color: var(--light--color--800);
367
380
  --light-plain-background-color--default: var(--color--transparent);
368
- --light-plain-background-color--hover: var(--light--color--100);
369
- --light-plain-background-color--pressed: var(--light--color--200);
370
- --light-plain-content-color: var(--light--color--800);
371
381
  --light-outline-background-color--default: var(--color--transparent);
372
- --light-outline-background-color--hover: var(--light--color--100);
373
- --light-outline-background-color--pressed: var(--light--color--200);
374
- --light-outline-border-color: var(--light--color--800);
375
- --light-outline-content-color: var(--light--color--800);
382
+ --dark-static-plain-background-color--default: var(--color--transparent);
383
+ --dark-static-outline-background-color--default: var(--color--transparent);
384
+ --light-static-plain-background-color--default: var(--color--transparent);
385
+ --light-static-outline-background-color--default: var(--color--transparent);
376
386
  --color--violet: var(--color--soft-contrast-violet--800);
377
387
  --color--teal: var(--color--super-teal--800);
378
388
  --color--lilac: var(--color--bright-lilac--800);
@@ -411,7 +421,6 @@
411
421
  --inline-code--padding-y: var(--size-px--xxs);
412
422
  --kbd--padding: var(--size-px--xs);
413
423
  --kbd--padding-y-start: var(--size-px--xxs);
414
- --kbd--inner-shadow-color--default: var(--dark--color--200);
415
424
  --kbd--inner-shadow-size-x: var(--size-px--xxs);
416
425
  --kbd--inner-shadow-size-y-end: var(--size-px--xs);
417
426
  --label--font-size: var(--font-size-text--s);
@@ -474,12 +483,6 @@
474
483
  --switch--label-to-track-spacing: var(--size-rem--s);
475
484
  --switch--track-padding: var(--size-rem--xxs);
476
485
  --time-field--date-segment-corner-radius: var(--size-px--xs);
477
- --breadcrumb--color-light--default: var(--light--color--800);
478
- --breadcrumb--color-light--hover: var(--light--color--700);
479
- --breadcrumb--color-light--pressed: var(--light--color--600);
480
- --breadcrumb--color-dark--default: var(--dark--color--800);
481
- --breadcrumb--color-dark--hover: var(--dark--color--700);
482
- --breadcrumb--color-dark--pressed: var(--dark--color--600);
483
486
  --breadcrumb--spacing: var(--size-rem--s);
484
487
  --breadcrumb--font-weight--default: var(--font-weight--normal);
485
488
  --breadcrumb--font-weight--current: var(--font-weight--bold);
@@ -491,16 +494,9 @@
491
494
  --link--icon-height-s: calc(var(--font-size-text--s) * 1.25);
492
495
  --link--font-weight: var(--font-weight--bold);
493
496
  --link--spacing: var(--size-rem--xs);
494
- --link--color-dark--default: var(--dark--color--800);
495
- --link--color-dark--hover: var(--dark--color--700);
496
- --link--color-dark--pressed: var(--dark--color--600);
497
- --link--color-light--default: var(--light--color--800);
498
- --link--color-light--hover: var(--light--color--700);
499
- --link--color-light--pressed: var(--light--color--600);
500
497
  --tabs--padding: var(--size-px--m);
501
498
  --tabs--font-weight--selected: var(--font-weight--bold);
502
499
  --tabs--spacing: var(--size-rem--s);
503
- --light-box--overlay-background-color: var(--dark--color--600);
504
500
  --light-box--max-width: calc(100dvw - var(--size-px--l));
505
501
  --light-box--max-height: calc(100dvh - var(--size-px--l));
506
502
  --light-box--spacing: var(--size-px--m);
@@ -509,7 +505,6 @@
509
505
  --modal--border-style: var(--border-style--default);
510
506
  --modal--header-padding-y: var(--size-px--s);
511
507
  --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
512
- --overlay--background-color: var(--dark--color--200);
513
508
  --popover--padding--m: var(--size-px--m);
514
509
  --popover--padding--s: var(--size-px--s);
515
510
  --popover--border-style: var(--border-style--default);
@@ -601,20 +596,6 @@
601
596
  --badge--orange-content-color--default: var(--color--royal-orange--900);
602
597
  --badge--orange-content-color--pressed: var(--color--royal-orange--1000);
603
598
  --badge--orange-scope-background-color: var(--color--royal-orange--900);
604
- --badge--dark-border-color: var(--dark--color--800);
605
- --badge--dark-background-color--default: var(--dark--color--100);
606
- --badge--dark-background-color--hover: var(--dark--color--200);
607
- --badge--dark-background-color--pressed: var(--dark--color--300);
608
- --badge--dark-content-color--default: var(--dark--color--800);
609
- --badge--dark-content-color--pressed: var(--dark--color--800);
610
- --badge--dark-scope-background-color: var(--dark--color--800);
611
- --badge--light-border-color: var(--light--color--800);
612
- --badge--light-background-color--default: var(--light--color--100);
613
- --badge--light-background-color--hover: var(--light--color--200);
614
- --badge--light-background-color--pressed: var(--light--color--300);
615
- --badge--light-content-color--default: var(--light--color--800);
616
- --badge--light-content-color--pressed: var(--light--color--800);
617
- --badge--light-scope-background-color: var(--light--color--800);
618
599
  --counter-badge--font-weight: var(--font-weight--bold);
619
600
  --counter-badge--padding-inline: var(--size-rem--xs);
620
601
  --counter-badge--border-style: var(--border-style--default);
@@ -697,74 +678,22 @@
697
678
  --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
698
679
  --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
699
680
  --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
700
- --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
701
- --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
702
- --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
703
- --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
704
- --button--dark-solid-content-color--default: var(--dark-solid-content-color);
705
- --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
706
- --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
707
- --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
708
681
  --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
709
- --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
710
- --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
711
682
  --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
712
- --button--dark-plain-content-color--default: var(--dark-plain-content-color);
713
- --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
714
- --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
715
- --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
716
- --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
717
- --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
718
- --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
719
- --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
720
- --button--dark-soft-content-color--default: var(--dark-soft-content-color);
721
- --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
722
- --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
723
- --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
724
683
  --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
725
- --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
726
- --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
727
684
  --button--dark-outline-background-color--disabled: var(--disabled-outline-dark-background-color);
728
- --button--dark-outline-content-color--default: var(--dark-outline-content-color);
729
- --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
730
- --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
731
- --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
732
- --button--dark-outline-border-color--default: var(--dark-outline-border-color);
733
- --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
734
- --button--light-solid-background-color--default: var(--light-solid-background-color--default);
735
- --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
736
- --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
737
- --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
738
- --button--light-solid-content-color--default: var(--light-solid-content-color);
739
- --button--light-solid-content-color--hover: var(--light-solid-content-color);
740
- --button--light-solid-content-color--pressed: var(--light-solid-content-color);
741
- --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
742
685
  --button--light-plain-background-color--default: var(--light-plain-background-color--default);
743
- --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
744
- --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
745
686
  --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
746
- --button--light-plain-content-color--default: var(--light-plain-content-color);
747
- --button--light-plain-content-color--hover: var(--light-plain-content-color);
748
- --button--light-plain-content-color--pressed: var(--light-plain-content-color);
749
- --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
750
- --button--light-soft-background-color--default: var(--light-soft-background-color--default);
751
- --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
752
- --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
753
- --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
754
- --button--light-soft-content-color--default: var(--light-soft-content-color);
755
- --button--light-soft-content-color--hover: var(--light-soft-content-color);
756
- --button--light-soft-content-color--pressed: var(--light-soft-content-color);
757
- --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
758
687
  --button--light-outline-background-color--default: var(--light-outline-background-color--default);
759
- --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
760
- --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
761
688
  --button--light-outline-background-color--disabled: var(--disabled-outline-light-background-color);
762
- --button--light-outline-content-color--default: var(--light-outline-content-color);
763
- --button--light-outline-content-color--hover: var(--light-outline-content-color);
764
- --button--light-outline-content-color--pressed: var(--light-outline-content-color);
765
- --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
766
- --button--light-outline-border-color--default: var(--light-outline-border-color);
767
- --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
689
+ --button--dark-static-plain-background-color--default: var(--dark-static-plain-background-color--default);
690
+ --button--dark-static-plain-background-color--disabled: var(--disabled-plain-background-color);
691
+ --button--dark-static-outline-background-color--default: var(--dark-static-outline-background-color--default);
692
+ --button--dark-static-outline-background-color--disabled: var(--disabled-outline-dark-static-background-color);
693
+ --button--light-static-plain-background-color--default: var(--light-static-plain-background-color--default);
694
+ --button--light-static-plain-background-color--disabled: var(--disabled-plain-background-color);
695
+ --button--light-static-outline-background-color--default: var(--light-static-outline-background-color--default);
696
+ --button--light-static-outline-background-color--disabled: var(--disabled-outline-light-static-background-color);
768
697
  --menu-item--corner-radius: var(--corner-radius--default);
769
698
  --menu-item--color--current: var(--primary--color--800);
770
699
  --menu-item--icon-color--default: var(--neutral--color--800);
@@ -872,12 +801,100 @@
872
801
  --neutral-soft-content-color--pressed: var(--neutral--color--1100);
873
802
  --disabled-solid-background-color: var(--neutral--color--400);
874
803
  --disabled-solid-content-color: var(--neutral--color--600);
804
+ --disabled-solid-dark-background-color: var(--dark--color--300);
805
+ --disabled-solid-dark-content-color: var(--light--color--300);
806
+ --disabled-solid-light-background-color: var(--light--color--300);
807
+ --disabled-solid-light-content-color: var(--dark--color--300);
808
+ --disabled-solid-dark-static-background-color: var(--dark-static--color--300);
809
+ --disabled-solid-dark-static-content-color: var(--light-static--color--300);
810
+ --disabled-solid-light-static-background-color: var(--light-static--color--300);
811
+ --disabled-solid-light-static-content-color: var(--dark-static--color--300);
875
812
  --disabled-plain-content-color: var(--neutral--color--400);
813
+ --disabled-plain-dark-content-color: var(--dark--color--300);
814
+ --disabled-plain-light-content-color: var(--light--color--300);
815
+ --disabled-plain-dark-static-content-color: var(--dark-static--color--300);
816
+ --disabled-plain-light-static-content-color: var(--light-static--color--300);
876
817
  --disabled-outline-background-color: var(--neutral--color--300);
877
818
  --disabled-outline-content-color: var(--neutral--color--500);
878
819
  --disabled-outline-border-color: var(--neutral--color--400);
820
+ --disabled-outline-dark-border-color: var(--dark--color--300);
821
+ --disabled-outline-dark-content-color: var(--dark--color--300);
822
+ --disabled-outline-light-border-color: var(--light--color--300);
823
+ --disabled-outline-light-content-color: var(--light--color--300);
824
+ --disabled-outline-dark-static-border-color: var(--dark-static--color--300);
825
+ --disabled-outline-dark-static-content-color: var(--dark-static--color--300);
826
+ --disabled-outline-light-static-border-color: var(--light-static--color--300);
827
+ --disabled-outline-light-static-content-color: var(--light-static--color--300);
879
828
  --disabled-soft-background-color: var(--neutral--color--300);
880
829
  --disabled-soft-content-color: var(--neutral--color--500);
830
+ --disabled-soft-dark-background-color: var(--dark--color--100);
831
+ --disabled-soft-dark-content-color: var(--dark--color--200);
832
+ --disabled-soft-light-background-color: var(--light--color--100);
833
+ --disabled-soft-light-content-color: var(--light--color--200);
834
+ --disabled-soft-dark-static-background-color: var(--dark-static--color--100);
835
+ --disabled-soft-dark-static-content-color: var(--dark-static--color--200);
836
+ --disabled-soft-light-static-background-color: var(--light-static--color--100);
837
+ --disabled-soft-light-static-content-color: var(--light-static--color--200);
838
+ --dark-solid-background-color--default: var(--dark--color--800);
839
+ --dark-solid-background-color--hover: var(--dark--color--700);
840
+ --dark-solid-background-color--pressed: var(--dark--color--600);
841
+ --dark-solid-content-color: var(--light--color--800);
842
+ --dark-soft-background-color--default: var(--dark--color--100);
843
+ --dark-soft-background-color--hover: var(--dark--color--200);
844
+ --dark-soft-background-color--pressed: var(--dark--color--300);
845
+ --dark-soft-content-color: var(--dark--color--800);
846
+ --dark-plain-background-color--hover: var(--dark--color--100);
847
+ --dark-plain-background-color--pressed: var(--dark--color--200);
848
+ --dark-plain-content-color: var(--dark--color--800);
849
+ --dark-outline-background-color--hover: var(--dark--color--100);
850
+ --dark-outline-background-color--pressed: var(--dark--color--200);
851
+ --dark-outline-border-color: var(--dark--color--800);
852
+ --dark-outline-content-color: var(--dark--color--800);
853
+ --light-solid-background-color--default: var(--light--color--800);
854
+ --light-solid-background-color--hover: var(--light--color--700);
855
+ --light-solid-background-color--pressed: var(--light--color--600);
856
+ --light-solid-content-color: var(--dark--color--800);
857
+ --light-soft-background-color--default: var(--light--color--100);
858
+ --light-soft-background-color--hover: var(--light--color--200);
859
+ --light-soft-background-color--pressed: var(--light--color--300);
860
+ --light-soft-content-color: var(--light--color--800);
861
+ --light-plain-background-color--hover: var(--light--color--100);
862
+ --light-plain-background-color--pressed: var(--light--color--200);
863
+ --light-plain-content-color: var(--light--color--800);
864
+ --light-outline-background-color--hover: var(--light--color--100);
865
+ --light-outline-background-color--pressed: var(--light--color--200);
866
+ --light-outline-border-color: var(--light--color--800);
867
+ --light-outline-content-color: var(--light--color--800);
868
+ --dark-static-solid-background-color--default: var(--dark-static--color--800);
869
+ --dark-static-solid-background-color--hover: var(--dark-static--color--700);
870
+ --dark-static-solid-background-color--pressed: var(--dark-static--color--600);
871
+ --dark-static-solid-content-color: var(--light-static--color--800);
872
+ --dark-static-soft-background-color--default: var(--dark-static--color--100);
873
+ --dark-static-soft-background-color--hover: var(--dark-static--color--200);
874
+ --dark-static-soft-background-color--pressed: var(--dark-static--color--300);
875
+ --dark-static-soft-content-color: var(--dark-static--color--800);
876
+ --dark-static-plain-background-color--hover: var(--dark-static--color--100);
877
+ --dark-static-plain-background-color--pressed: var(--dark-static--color--200);
878
+ --dark-static-plain-content-color: var(--dark-static--color--800);
879
+ --dark-static-outline-background-color--hover: var(--dark-static--color--100);
880
+ --dark-static-outline-background-color--pressed: var(--dark-static--color--200);
881
+ --dark-static-outline-border-color: var(--dark-static--color--800);
882
+ --dark-static-outline-content-color: var(--dark-static--color--800);
883
+ --light-static-solid-background-color--default: var(--light-static--color--800);
884
+ --light-static-solid-background-color--hover: var(--light-static--color--700);
885
+ --light-static-solid-background-color--pressed: var(--light-static--color--600);
886
+ --light-static-solid-content-color: var(--dark-static--color--800);
887
+ --light-static-soft-background-color--default: var(--light-static--color--100);
888
+ --light-static-soft-background-color--hover: var(--light-static--color--200);
889
+ --light-static-soft-background-color--pressed: var(--light-static--color--300);
890
+ --light-static-soft-content-color: var(--light-static--color--800);
891
+ --light-static-plain-background-color--hover: var(--light-static--color--100);
892
+ --light-static-plain-background-color--pressed: var(--light-static--color--200);
893
+ --light-static-plain-content-color: var(--light-static--color--800);
894
+ --light-static-outline-background-color--hover: var(--light-static--color--100);
895
+ --light-static-outline-background-color--pressed: var(--light-static--color--200);
896
+ --light-static-outline-border-color: var(--light-static--color--800);
897
+ --light-static-outline-content-color: var(--light-static--color--800);
881
898
  --color--blue: var(--primary--color--1000);
882
899
  --avatar-stack--border-width: var(--border-width--200);
883
900
  --avatar--info-status-background-color: var(--info--color--200);
@@ -888,8 +905,6 @@
888
905
  --code-block--border-width: var(--border-width--100);
889
906
  --code-block--background-color: var(--neutral--color--200);
890
907
  --heading--color: var(--primary--color--1000);
891
- --heading--color-dark: var(--dark-plain-content-color);
892
- --heading--color-light: var(--light-plain-content-color);
893
908
  --heading--color-danger: var(--danger--color--900);
894
909
  --heading--color-unavailable: var(--neutral--color--900);
895
910
  --icon--color: var(--neutral--color--800);
@@ -897,22 +912,14 @@
897
912
  --illustrated-message--primary-content-color: var(--primary--color--1000);
898
913
  --illustrated-message--danger-content-color: var(--danger--color--900);
899
914
  --illustrated-message--unavailable-content-color: var(--neutral--color--900);
900
- --illustrated-message--dark-content-color: var(--dark-plain-content-color);
901
- --illustrated-message--light-content-color: var(--light-plain-content-color);
902
915
  --image--corner-radius: var(--corner-radius--default);
903
916
  --image--border-width: var(--border-width--100);
904
917
  --inline-code--corner-radius: var(--corner-radius--default);
905
- --inline-code--light-background-color: var(--light-soft-background-color--default);
906
- --inline-code--light-content-color: var(--light-soft-content-color);
907
- --inline-code--dark-background-color: var(--dark-soft-background-color--default);
908
- --inline-code--dark-content-color: var(--dark-soft-content-color);
909
918
  --kbd--corner-radius: var(--corner-radius--default);
910
- --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
919
+ --kbd--inner-shadow-color--default: var(--dark--color--200);
911
920
  --label--line-height: var(--line-height--m);
912
921
  --label--color--default: var(--neutral--color--800);
913
922
  --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
923
  --text--blockquote-border-width: var(--border-width--300);
917
924
  --area--border-width: var(--border-width--200);
918
925
  --area--border-color: var(--neutral--color--100);
@@ -928,8 +935,6 @@
928
935
  --choice--icon-color--selected: var(--primary--color--800);
929
936
  --calendar--heading-font-size: var(--font-size-text--default);
930
937
  --calendar--cell-background-color--disabled: var(--disabled-plain-background-color);
931
- --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
932
- --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
933
938
  --calendar--cell-range-background-color: var(--primary--color--100);
934
939
  --form-control--corner-radius: var(--corner-radius--default);
935
940
  --form-control--border-width: var(--border-width--100);
@@ -955,25 +960,43 @@
955
960
  --breadcrumb--color-primary--default: var(--primary--color--1000);
956
961
  --breadcrumb--color-primary--hover: var(--primary--color--900);
957
962
  --breadcrumb--color-primary--pressed: var(--primary--color--800);
963
+ --breadcrumb--color-dark--default: var(--dark--color--800);
964
+ --breadcrumb--color-dark--hover: var(--dark--color--700);
965
+ --breadcrumb--color-dark--pressed: var(--dark--color--600);
966
+ --breadcrumb--color-light--default: var(--light--color--800);
967
+ --breadcrumb--color-light--hover: var(--light--color--700);
968
+ --breadcrumb--color-light--pressed: var(--light--color--600);
969
+ --breadcrumb--color-dark-static--default: var(--dark-static--color--800);
970
+ --breadcrumb--color-dark-static--hover: var(--dark-static--color--700);
971
+ --breadcrumb--color-dark-static--pressed: var(--dark-static--color--600);
972
+ --breadcrumb--color-light-static--default: var(--light-static--color--800);
973
+ --breadcrumb--color-light-static--hover: var(--light-static--color--700);
974
+ --breadcrumb--color-light-static--pressed: var(--light-static--color--600);
958
975
  --header-navigation--corner-radius: var(--corner-radius--default);
959
- --header-navigation--color: var(--primary--color--1000);
960
- --header-navigation--color-dark: var(--dark-plain-content-color);
961
- --header-navigation--color-light: var(--light-plain-content-color);
962
- --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
963
- --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
964
- --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
965
- --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
966
976
  --header-navigation--underline-width-current: var(--border-width--200);
977
+ --header-navigation--color: var(--primary--color--1000);
967
978
  --link--color--default: var(--primary--color--800);
968
979
  --link--color--hover: var(--primary--color--900);
969
980
  --link--color--pressed: var(--primary--color--1000);
970
- --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
971
- --link--color-light--disabled: var(--disabled-plain-light-content-color);
981
+ --link--color-dark--default: var(--dark--color--800);
982
+ --link--color-dark--hover: var(--dark--color--700);
983
+ --link--color-dark--pressed: var(--dark--color--600);
984
+ --link--color-light--default: var(--light--color--800);
985
+ --link--color-light--hover: var(--light--color--700);
986
+ --link--color-light--pressed: var(--light--color--600);
987
+ --link--color-dark-static--default: var(--dark-static--color--800);
988
+ --link--color-dark-static--hover: var(--dark-static--color--700);
989
+ --link--color-dark-static--pressed: var(--dark-static--color--600);
990
+ --link--color-light-static--default: var(--light-static--color--800);
991
+ --link--color-light-static--hover: var(--light-static--color--700);
992
+ --link--color-light-static--pressed: var(--light-static--color--600);
972
993
  --tabs--background-color--selected: var(--neutral--color--100);
994
+ --light-box--overlay-background-color: var(--dark--color--600);
973
995
  --modal--corner-radius: var(--corner-radius--default);
974
996
  --modal--background-color: var(--neutral--color--100);
975
997
  --modal--footer-background-color: var(--neutral--color--300);
976
998
  --modal--border-width: var(--border-width--100);
999
+ --overlay--background-color: var(--dark--color--200);
977
1000
  --popover--box-shadow: var(--shadow--overlay);
978
1001
  --popover--corner-radius: var(--corner-radius--default);
979
1002
  --popover--background-color: var(--neutral--color--100);
@@ -986,20 +1009,36 @@
986
1009
  --alert--border-width: var(--border-width--100);
987
1010
  --alert--border-x-start-width: var(--border-width--400);
988
1011
  --badge--border-width: var(--border-width--100);
989
- --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
990
- --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
991
- --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
992
- --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
993
- --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
994
- --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
995
- --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
996
- --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
997
- --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
998
- --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1012
+ --badge--dark-border-color: var(--dark--color--800);
1013
+ --badge--dark-background-color--default: var(--dark--color--100);
1014
+ --badge--dark-background-color--hover: var(--dark--color--200);
1015
+ --badge--dark-background-color--pressed: var(--dark--color--300);
1016
+ --badge--dark-content-color--default: var(--dark--color--800);
1017
+ --badge--dark-content-color--pressed: var(--dark--color--800);
1018
+ --badge--dark-scope-background-color: var(--dark--color--800);
1019
+ --badge--light-border-color: var(--light--color--800);
1020
+ --badge--light-background-color--default: var(--light--color--100);
1021
+ --badge--light-background-color--hover: var(--light--color--200);
1022
+ --badge--light-background-color--pressed: var(--light--color--300);
1023
+ --badge--light-content-color--default: var(--light--color--800);
1024
+ --badge--light-content-color--pressed: var(--light--color--800);
1025
+ --badge--light-scope-background-color: var(--light--color--800);
1026
+ --badge--dark-static-border-color: var(--dark-static--color--800);
1027
+ --badge--dark-static-background-color--default: var(--dark-static--color--100);
1028
+ --badge--dark-static-background-color--hover: var(--dark-static--color--200);
1029
+ --badge--dark-static-background-color--pressed: var(--dark-static--color--300);
1030
+ --badge--dark-static-content-color--default: var(--dark-static--color--800);
1031
+ --badge--dark-static-content-color--pressed: var(--dark-static--color--800);
1032
+ --badge--dark-static-scope-background-color: var(--dark-static--color--800);
1033
+ --badge--light-static-border-color: var(--light-static--color--800);
1034
+ --badge--light-static-background-color--default: var(--light-static--color--100);
1035
+ --badge--light-static-background-color--hover: var(--light-static--color--200);
1036
+ --badge--light-static-background-color--pressed: var(--light-static--color--300);
1037
+ --badge--light-static-content-color--default: var(--light-static--color--800);
1038
+ --badge--light-static-content-color--pressed: var(--light-static--color--800);
1039
+ --badge--light-static-scope-background-color: var(--light-static--color--800);
999
1040
  --counter-badge--border-width: var(--border-width--200);
1000
1041
  --counter-badge--border-color: var(--neutral--color--100);
1001
- --loading-spinner--color-light: var(--light-plain-content-color);
1002
- --loading-spinner--color-dark: var(--dark-plain-content-color);
1003
1042
  --notification--corner-radius: var(--corner-radius--default);
1004
1043
  --notification--border-x-start-width: var(--border-width--300);
1005
1044
  --notification--box-shadow: var(--shadow--overlay);
@@ -1162,25 +1201,164 @@
1162
1201
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
1163
1202
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1164
1203
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1204
+ --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
1205
+ --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
1206
+ --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
1207
+ --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
1208
+ --button--dark-solid-content-color--default: var(--dark-solid-content-color);
1209
+ --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
1210
+ --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
1211
+ --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
1212
+ --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
1213
+ --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
1214
+ --button--dark-plain-content-color--default: var(--dark-plain-content-color);
1215
+ --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
1216
+ --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
1217
+ --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
1218
+ --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
1219
+ --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
1220
+ --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
1221
+ --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
1222
+ --button--dark-soft-content-color--default: var(--dark-soft-content-color);
1223
+ --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
1224
+ --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
1225
+ --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
1226
+ --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
1227
+ --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
1228
+ --button--dark-outline-content-color--default: var(--dark-outline-content-color);
1229
+ --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
1230
+ --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
1231
+ --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
1232
+ --button--dark-outline-border-color--default: var(--dark-outline-border-color);
1233
+ --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
1234
+ --button--light-solid-background-color--default: var(--light-solid-background-color--default);
1235
+ --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
1236
+ --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
1237
+ --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
1238
+ --button--light-solid-content-color--default: var(--light-solid-content-color);
1239
+ --button--light-solid-content-color--hover: var(--light-solid-content-color);
1240
+ --button--light-solid-content-color--pressed: var(--light-solid-content-color);
1241
+ --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
1242
+ --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
1243
+ --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
1244
+ --button--light-plain-content-color--default: var(--light-plain-content-color);
1245
+ --button--light-plain-content-color--hover: var(--light-plain-content-color);
1246
+ --button--light-plain-content-color--pressed: var(--light-plain-content-color);
1247
+ --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
1248
+ --button--light-soft-background-color--default: var(--light-soft-background-color--default);
1249
+ --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
1250
+ --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
1251
+ --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
1252
+ --button--light-soft-content-color--default: var(--light-soft-content-color);
1253
+ --button--light-soft-content-color--hover: var(--light-soft-content-color);
1254
+ --button--light-soft-content-color--pressed: var(--light-soft-content-color);
1255
+ --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
1256
+ --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
1257
+ --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
1258
+ --button--light-outline-content-color--default: var(--light-outline-content-color);
1259
+ --button--light-outline-content-color--hover: var(--light-outline-content-color);
1260
+ --button--light-outline-content-color--pressed: var(--light-outline-content-color);
1261
+ --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
1262
+ --button--light-outline-border-color--default: var(--light-outline-border-color);
1263
+ --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
1264
+ --button--dark-static-solid-background-color--default: var(--dark-static-solid-background-color--default);
1265
+ --button--dark-static-solid-background-color--hover: var(--dark-static-solid-background-color--hover);
1266
+ --button--dark-static-solid-background-color--pressed: var(--dark-static-solid-background-color--pressed);
1267
+ --button--dark-static-solid-background-color--disabled: var(--disabled-solid-dark-static-background-color);
1268
+ --button--dark-static-solid-content-color--default: var(--dark-static-solid-content-color);
1269
+ --button--dark-static-solid-content-color--hover: var(--dark-static-solid-content-color);
1270
+ --button--dark-static-solid-content-color--pressed: var(--dark-static-solid-content-color);
1271
+ --button--dark-static-solid-content-color--disabled: var(--disabled-solid-dark-static-content-color);
1272
+ --button--dark-static-plain-background-color--hover: var(--dark-static-plain-background-color--hover);
1273
+ --button--dark-static-plain-background-color--pressed: var(--dark-static-plain-background-color--pressed);
1274
+ --button--dark-static-plain-content-color--default: var(--dark-static-plain-content-color);
1275
+ --button--dark-static-plain-content-color--hover: var(--dark-static-plain-content-color);
1276
+ --button--dark-static-plain-content-color--pressed: var(--dark-static-plain-content-color);
1277
+ --button--dark-static-plain-content-color--disabled: var(--disabled-plain-dark-static-content-color);
1278
+ --button--dark-static-soft-background-color--default: var(--dark-static-soft-background-color--default);
1279
+ --button--dark-static-soft-background-color--hover: var(--dark-static-soft-background-color--hover);
1280
+ --button--dark-static-soft-background-color--pressed: var(--dark-static-soft-background-color--pressed);
1281
+ --button--dark-static-soft-background-color--disabled: var(--disabled-soft-dark-static-background-color);
1282
+ --button--dark-static-soft-content-color--default: var(--dark-static-soft-content-color);
1283
+ --button--dark-static-soft-content-color--hover: var(--dark-static-soft-content-color);
1284
+ --button--dark-static-soft-content-color--pressed: var(--dark-static-soft-content-color);
1285
+ --button--dark-static-soft-content-color--disabled: var(--disabled-soft-dark-static-content-color);
1286
+ --button--dark-static-outline-background-color--hover: var(--dark-static-outline-background-color--hover);
1287
+ --button--dark-static-outline-background-color--pressed: var(--dark-static-outline-background-color--pressed);
1288
+ --button--dark-static-outline-content-color--default: var(--dark-static-outline-content-color);
1289
+ --button--dark-static-outline-content-color--hover: var(--dark-static-outline-content-color);
1290
+ --button--dark-static-outline-content-color--pressed: var(--dark-static-outline-content-color);
1291
+ --button--dark-static-outline-content-color--disabled: var(--disabled-outline-dark-static-content-color);
1292
+ --button--dark-static-outline-border-color--default: var(--dark-static-outline-border-color);
1293
+ --button--dark-static-outline-border-color--disabled: var(--disabled-outline-dark-static-border-color);
1294
+ --button--light-static-solid-background-color--default: var(--light-static-solid-background-color--default);
1295
+ --button--light-static-solid-background-color--hover: var(--light-static-solid-background-color--hover);
1296
+ --button--light-static-solid-background-color--pressed: var(--light-static-solid-background-color--pressed);
1297
+ --button--light-static-solid-background-color--disabled: var(--disabled-solid-light-static-background-color);
1298
+ --button--light-static-solid-content-color--default: var(--light-static-solid-content-color);
1299
+ --button--light-static-solid-content-color--hover: var(--light-static-solid-content-color);
1300
+ --button--light-static-solid-content-color--pressed: var(--light-static-solid-content-color);
1301
+ --button--light-static-solid-content-color--disabled: var(--disabled-solid-light-static-content-color);
1302
+ --button--light-static-plain-background-color--hover: var(--light-static-plain-background-color--hover);
1303
+ --button--light-static-plain-background-color--pressed: var(--light-static-plain-background-color--pressed);
1304
+ --button--light-static-plain-content-color--default: var(--light-static-plain-content-color);
1305
+ --button--light-static-plain-content-color--hover: var(--light-static-plain-content-color);
1306
+ --button--light-static-plain-content-color--pressed: var(--light-static-plain-content-color);
1307
+ --button--light-static-plain-content-color--disabled: var(--disabled-plain-light-static-content-color);
1308
+ --button--light-static-soft-background-color--default: var(--light-static-soft-background-color--default);
1309
+ --button--light-static-soft-background-color--hover: var(--light-static-soft-background-color--hover);
1310
+ --button--light-static-soft-background-color--pressed: var(--light-static-soft-background-color--pressed);
1311
+ --button--light-static-soft-background-color--disabled: var(--disabled-soft-light-static-background-color);
1312
+ --button--light-static-soft-content-color--default: var(--light-static-soft-content-color);
1313
+ --button--light-static-soft-content-color--hover: var(--light-static-soft-content-color);
1314
+ --button--light-static-soft-content-color--pressed: var(--light-static-soft-content-color);
1315
+ --button--light-static-soft-content-color--disabled: var(--disabled-soft-light-static-content-color);
1316
+ --button--light-static-outline-background-color--hover: var(--light-static-outline-background-color--hover);
1317
+ --button--light-static-outline-background-color--pressed: var(--light-static-outline-background-color--pressed);
1318
+ --button--light-static-outline-content-color--default: var(--light-static-outline-content-color);
1319
+ --button--light-static-outline-content-color--hover: var(--light-static-outline-content-color);
1320
+ --button--light-static-outline-content-color--pressed: var(--light-static-outline-content-color);
1321
+ --button--light-static-outline-content-color--disabled: var(--disabled-outline-light-static-content-color);
1322
+ --button--light-static-outline-border-color--default: var(--light-static-outline-border-color);
1323
+ --button--light-static-outline-border-color--disabled: var(--disabled-outline-light-static-border-color);
1165
1324
  --menu-item--icon-color--disabled: var(--disabled-plain-content-color);
1166
1325
  --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1167
1326
  --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1168
1327
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1169
1328
  --code-block--content-color: var(--neutral-soft-content-color--default);
1329
+ --heading--color-dark: var(--dark-plain-content-color);
1330
+ --heading--color-light: var(--light-plain-content-color);
1331
+ --heading--color-dark-static: var(--dark-static-plain-content-color);
1332
+ --heading--color-light-static: var(--light-static-plain-content-color);
1170
1333
  --icon--info-color: var(--info-outline-content-color);
1171
1334
  --icon--warning-color: var(--warning-outline-content-color);
1172
1335
  --icon--danger-color: var(--danger-outline-content-color);
1173
1336
  --icon--success-color: var(--success-outline-content-color);
1337
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
1338
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
1174
1339
  --image--border-color: var(--neutral-outline-border-color);
1175
- --inline-code--default-background-color: var(--neutral-soft-background-color--default);
1176
- --inline-code--default-content-color: var(--neutral-soft-content-color--default);
1340
+ --inline-code--background-color: var(--neutral-soft-background-color--default);
1341
+ --inline-code--content-color: var(--neutral-soft-content-color--default);
1342
+ --inline-code--dark-background-color: var(--dark-soft-background-color--default);
1343
+ --inline-code--dark-content-color: var(--dark-soft-content-color);
1344
+ --inline-code--light-background-color: var(--light-soft-background-color--default);
1345
+ --inline-code--light-content-color: var(--light-soft-content-color);
1346
+ --inline-code--dark-static-background-color: var(--dark-static-soft-background-color--default);
1347
+ --inline-code--dark-static-content-color: var(--dark-static-soft-content-color);
1348
+ --inline-code--light-static-background-color: var(--light-static-soft-background-color--default);
1349
+ --inline-code--light-static-content-color: var(--light-static-soft-content-color);
1177
1350
  --kbd--background-color--default: var(--neutral-soft-background-color--default);
1178
1351
  --kbd--background-color--disabled: var(--disabled-soft-background-color);
1179
1352
  --kbd--content-color--default: var(--neutral-soft-content-color--default);
1180
1353
  --kbd--content-color--disabled: var(--disabled-soft-content-color);
1181
1354
  --kbd--content-color-plain--default: var(--form-control--placeholder-color--default);
1182
1355
  --kbd--content-color-plain--disabled: var(--form-control--placeholder-color--disabled);
1356
+ --kbd--inner-shadow-color--disabled: var(--disabled-soft-dark-background-color);
1183
1357
  --label--color--disabled: var(--disabled-plain-content-color);
1358
+ --text--color--light: var(--light-plain-content-color);
1359
+ --text--color--dark: var(--dark-plain-content-color);
1360
+ --text--color--light-static: var(--light-static-plain-content-color);
1361
+ --text--color--dark-static: var(--dark-static-plain-content-color);
1184
1362
  --text--color--disabled: var(--disabled-plain-content-color);
1185
1363
  --text--blockquote-border-color: var(--info-outline-border-color);
1186
1364
  --donut-chart--border-color: var(--neutral-outline-border-color);
@@ -1191,6 +1369,8 @@
1191
1369
  --choice--icon-color--default: var(--icon--color);
1192
1370
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1193
1371
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1372
+ --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
1373
+ --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
1194
1374
  --calendar--cell-background-color--selected: var(--primary-solid-background-color--default);
1195
1375
  --calendar--cell-content-color--disabled: var(--disabled-plain-content-color);
1196
1376
  --calendar--cell-content-color--selected: var(--primary-solid-content-color);
@@ -1210,7 +1390,23 @@
1210
1390
  --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1211
1391
  --header-navigation--background-color--hover: var(--primary-plain-background-color--hover);
1212
1392
  --header-navigation--background-color--pressed: var(--primary-plain-background-color--pressed);
1393
+ --header-navigation--color-dark: var(--dark-plain-content-color);
1394
+ --header-navigation--background-color-dark--hover: var(--dark-plain-background-color--hover);
1395
+ --header-navigation--background-color-dark--pressed: var(--dark-plain-background-color--pressed);
1396
+ --header-navigation--color-light: var(--light-plain-content-color);
1397
+ --header-navigation--background-color-light--hover: var(--light-plain-background-color--hover);
1398
+ --header-navigation--background-color-light--pressed: var(--light-plain-background-color--pressed);
1399
+ --header-navigation--color-dark-static: var(--dark-static-plain-content-color);
1400
+ --header-navigation--background-color-dark-static--hover: var(--dark-static-plain-background-color--hover);
1401
+ --header-navigation--background-color-dark-static--pressed: var(--dark-static-plain-background-color--pressed);
1402
+ --header-navigation--color-light-static: var(--light-static-plain-content-color);
1403
+ --header-navigation--background-color-light-static--hover: var(--light-static-plain-background-color--hover);
1404
+ --header-navigation--background-color-light-static--pressed: var(--light-static-plain-background-color--pressed);
1213
1405
  --link--color--disabled: var(--disabled-plain-content-color);
1406
+ --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
1407
+ --link--color-light--disabled: var(--disabled-plain-light-content-color);
1408
+ --link--color-dark-static--disabled: var(--disabled-plain-dark-static-content-color);
1409
+ --link--color-light-static--disabled: var(--disabled-plain-light-static-content-color);
1214
1410
  --tabs--background-color--default: var(--neutral-soft-background-color--default);
1215
1411
  --tabs--background-color--hover: var(--neutral-soft-background-color--hover);
1216
1412
  --tabs--background-color--pressed: var(--neutral-soft-background-color--pressed);
@@ -1218,7 +1414,6 @@
1218
1414
  --tabs--disabled-color: var(--disabled-soft-content-color);
1219
1415
  --modal--border-color: var(--neutral-outline-border-color);
1220
1416
  --popover--border-color: var(--neutral-outline-border-color);
1221
- --tooltip--color: var(--text--color--light);
1222
1417
  --alert-badge--info-background-color: var(--info-soft-background-color--default);
1223
1418
  --alert-badge--info-content-color: var(--info-soft-content-color--default);
1224
1419
  --alert-badge--info-border-color: var(--info-outline-border-color);
@@ -1243,25 +1438,38 @@
1243
1438
  --alert--danger-heading-color: var(--danger-outline-content-color);
1244
1439
  --alert--success-border-color: var(--success-outline-border-color);
1245
1440
  --alert--success-heading-color: var(--success-outline-content-color);
1246
- --badge--neutral-scope-content-color: var(--text--color--light);
1247
- --badge--blue-scope-content-color: var(--text--color--light);
1248
- --badge--navy-scope-content-color: var(--text--color--light);
1249
- --badge--violet-scope-content-color: var(--text--color--light);
1250
- --badge--teal-scope-content-color: var(--text--color--light);
1251
- --badge--lilac-scope-content-color: var(--text--color--light);
1252
- --badge--red-scope-content-color: var(--text--color--light);
1253
- --badge--green-scope-content-color: var(--text--color--light);
1254
- --badge--orange-scope-content-color: var(--text--color--light);
1255
- --badge--dark-scope-content-color: var(--text--color--light);
1256
- --badge--light-scope-content-color: var(--text--color--dark);
1257
1441
  --badge--disabled-border-color: var(--disabled-outline-border-color);
1258
1442
  --badge--disabled-background-color: var(--disabled-outline-background-color);
1259
1443
  --badge--disabled-content-color: var(--disabled-outline-content-color);
1260
1444
  --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1261
1445
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1446
+ --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
1447
+ --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
1448
+ --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
1449
+ --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
1450
+ --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
1451
+ --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
1452
+ --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
1453
+ --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
1454
+ --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
1455
+ --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
1456
+ --badge--disabled-dark-static-border-color: var(--disabled-outline-dark-static-border-color);
1457
+ --badge--disabled-dark-static-background-color: var(--disabled-soft-dark-static-background-color);
1458
+ --badge--disabled-dark-static-content-color: var(--disabled-soft-dark-static-content-color);
1459
+ --badge--disabled-dark-static-scope-background-color: var(--disabled-solid-dark-static-background-color);
1460
+ --badge--disabled-dark-static-scope-content-color: var(--disabled-solid-dark-static-content-color);
1461
+ --badge--disabled-light-static-border-color: var(--disabled-outline-light-static-border-color);
1462
+ --badge--disabled-light-static-background-color: var(--disabled-soft-light-static-background-color);
1463
+ --badge--disabled-light-static-content-color: var(--disabled-soft-light-static-content-color);
1464
+ --badge--disabled-light-static-scope-background-color: var(--disabled-solid-light-static-background-color);
1465
+ --badge--disabled-light-static-scope-content-color: var(--disabled-solid-light-static-content-color);
1262
1466
  --counter-badge--background-color: var(--success-solid-background-color--default);
1263
1467
  --counter-badge--content-color: var(--success-solid-content-color);
1264
1468
  --loading-spinner--color: var(--icon--color);
1469
+ --loading-spinner--color-light: var(--light-plain-content-color);
1470
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
1471
+ --loading-spinner--color-light-static: var(--light-static-plain-content-color);
1472
+ --loading-spinner--color-dark-static: var(--dark-static-plain-content-color);
1265
1473
  --notification--info-border-color: var(--info-outline-border-color);
1266
1474
  --notification--info-heading-color: var(--info-outline-content-color);
1267
1475
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1298,5 +1506,19 @@
1298
1506
  --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1299
1507
  --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1300
1508
  --code-block--border-color: var(--separator--color);
1509
+ --tooltip--color: var(--text--color--light);
1510
+ --badge--neutral-scope-content-color: var(--text--color--light);
1511
+ --badge--blue-scope-content-color: var(--text--color--light);
1512
+ --badge--navy-scope-content-color: var(--text--color--light);
1513
+ --badge--violet-scope-content-color: var(--text--color--light);
1514
+ --badge--teal-scope-content-color: var(--text--color--light);
1515
+ --badge--lilac-scope-content-color: var(--text--color--light);
1516
+ --badge--red-scope-content-color: var(--text--color--light);
1517
+ --badge--green-scope-content-color: var(--text--color--light);
1518
+ --badge--orange-scope-content-color: var(--text--color--light);
1519
+ --badge--dark-scope-content-color: var(--text--color--light);
1520
+ --badge--light-scope-content-color: var(--text--color--dark);
1521
+ --badge--dark-static-scope-content-color: var(--text--color--light-static);
1522
+ --badge--light-static-scope-content-color: var(--text--color--dark-static);
1301
1523
  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1302
1524
  }