@mittwald/flow-design-tokens 0.2.0-alpha.7 → 0.2.0-alpha.700

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.
Files changed (3) hide show
  1. package/dist/variables.css +166 -59
  2. package/dist/variables.json +6431 -1832
  3. package/package.json +9 -7
package/dist/variables.css CHANGED
@@ -7,6 +7,8 @@
7
7
  --image-button--brightness--pressed: 50%;
8
8
  --corner-radius--round: 50%;
9
9
  --border-style--default: solid;
10
+ --border-style--dashed: dashed;
11
+ --message--tip-size-y: 12px;
10
12
  --dark--color--100: rgb(0 0 0 / 12.5%);
11
13
  --dark--color--200: rgb(0 0 0 / 25%);
12
14
  --dark--color--300: rgb(0 0 0 / 37.5%);
@@ -122,7 +124,20 @@
122
124
  --color--super-teal--900: #006b78;
123
125
  --color--super-teal--1000: #004f59;
124
126
  --color--super-teal--1100: #00424a;
127
+ --color--categorical--sea-green: #0fb5ae;
128
+ --color--categorical--palatinate-blue: #4046ca;
129
+ --color--categorical--tangerine: #f68511;
130
+ --color--categorical--magenta: #de3d82;
131
+ --color--categorical--tropical-indigo: #7e84fa;
132
+ --color--categorical--malachite: #72e06a;
133
+ --color--categorical--azure: #147af3;
134
+ --color--categorical--violet: #7326d3;
135
+ --color--categorical--yellow: #e8c600;
136
+ --color--categorical--alloy-orange: #cb5d00;
137
+ --color--categorical--green: #008f5d;
138
+ --color--categorical--lime: #bce931;
125
139
  --color--transparent: transparent;
140
+ --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
141
  --avatar--size--m: 2.5rem;
127
142
  --code--default-syntax-color-addition: #397300;
128
143
  --code--default-syntax-color-built-in: #397300;
@@ -222,6 +237,7 @@
222
237
  --contextual-help--max-width: 500px;
223
238
  --modal--size--s: 660px;
224
239
  --modal--size--m: 900px;
240
+ --modal--size--l: 1300px;
225
241
  --modal--content-min-height: 120px;
226
242
  --popover--min-width: 200px;
227
243
  --tooltip--max-width: 300px;
@@ -245,10 +261,14 @@
245
261
  --counter-badge--height: 1.25rem;
246
262
  --counter-badge--height-empty: 0.75rem;
247
263
  --loading-spinner--transition-duration: 2000ms;
264
+ --loading-spinner--transition-duration-slow: 6000ms;
248
265
  --notification--width: 355px;
249
- --progress-bar--height-s: 0.375rem;
250
- --transition--duration--default: 200ms;
251
- --transition--duration--slow: 300ms;
266
+ --accent-box--background-color-green: #D8F5D6;
267
+ --accent-box--icon-color-green: #c4e3c1;
268
+ --accent-box--icon-color-gradient: #002b7b14;
269
+ --transition--duration--fast: 200ms;
270
+ --transition--duration--default: 300ms;
271
+ --transition--duration--slow: 400ms;
252
272
  --action-group--spacing--m: var(--size-px--m);
253
273
  --action-group--spacing--s: var(--size-px--s);
254
274
  --button--padding-x: var(--size-px--m);
@@ -275,6 +295,18 @@
275
295
  --border-width--200: var(--size-px--xxs);
276
296
  --border-width--300: var(--size-px--xs);
277
297
  --border-width--400: var(--size-px--s);
298
+ --chat--spacing: var(--size-px--s);
299
+ --message-separator--font-size: var(--font-size-text--s);
300
+ --message-separator--padding: var(--size-px--m);
301
+ --message-thread--spacing: var(--size-rem--l);
302
+ --message-thread--indentation: var(--size-px--m);
303
+ --message--padding-y: var(--size-px--s);
304
+ --message--padding-x: var(--size-px--m);
305
+ --message--spacing-y: var(--size-rem--s);
306
+ --message--spacing-x: var(--size-rem--m);
307
+ --message--background-color-responder: var(--color--gray--400);
308
+ --message--background-color-sender: var(--color--hosting-blue--200);
309
+ --message--tip-size-x: var(--size-px--s);
278
310
  --primary--color--100: var(--color--hosting-blue--100);
279
311
  --primary--color--200: var(--color--hosting-blue--200);
280
312
  --primary--color--300: var(--color--hosting-blue--300);
@@ -404,6 +436,9 @@
404
436
  --light-outline-background-color--pressed: var(--light--color--200);
405
437
  --light-outline-border-color: var(--light--color--800);
406
438
  --light-outline-content-color: var(--light--color--800);
439
+ --color--violet: var(--color--soft-contrast-violet--800);
440
+ --color--teal: var(--color--super-teal--800);
441
+ --color--lilac: var(--color--bright-lilac--800);
407
442
  --avatar--size--xs: var(--size-rem--l);
408
443
  --avatar--size--s: var(--size-rem--xl);
409
444
  --avatar--size--l: var(--size-rem--xxl);
@@ -434,6 +469,7 @@
434
469
  --heading--font-weight: var(--font-weight--bold);
435
470
  --illustrated-message--padding: var(--size-px--m);
436
471
  --illustrated-message--spacing: var(--size-rem--m);
472
+ --image--border-style: var(--border-style--default);
437
473
  --initials--font-weight: var(--font-weight--bold);
438
474
  --label--font-size: var(--font-size-text--s);
439
475
  --label--font-weight: var(--font-weight--bold);
@@ -441,12 +477,27 @@
441
477
  --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
442
478
  --labeled-value--value-to-action-spacing: var(--size-rem--xs);
443
479
  --markdown--spacing: var(--size-rem--m);
444
- --message--padding-y: var(--size-px--s);
445
- --message--padding-x: var(--size-px--m);
446
- --message--spacing-y: var(--size-rem--s);
447
- --message--spacing-x: var(--size-rem--m);
448
- --message--background-color-responder: var(--color--gray--400);
449
- --message--background-color-sender: var(--color--hosting-blue--200);
480
+ --text--blockquote-border-style: var(--border-style--default);
481
+ --text--blockquote-padding: var(--size-rem--s);
482
+ --text--list-padding: var(--size-rem--l);
483
+ --axis--spacing: var(--size-px--s);
484
+ --axis--font-size: var(--font-size-text--s);
485
+ --axis--color: var(--color--gray--700);
486
+ --axis--tick-size: var(--size-px--s);
487
+ --big-number--spacing: var(--size-rem--xs);
488
+ --big-number--top-font-size: var(--font-size-heading--xl);
489
+ --big-number--bottom-font-size: var(--font-size-text--m);
490
+ --big-number--font-weight: var(--font-weight--bold);
491
+ --cartesian-grid--color: var(--color--gray--700);
492
+ --chart-tooltip--spacing: var(--size-px--s);
493
+ --donut-chart--spacing-y: var(--size-rem--s);
494
+ --donut-chart--spacing-x: var(--size-rem--m);
495
+ --donut-chart--padding--m: var(--size-px--l);
496
+ --donut-chart--padding--l: var(--size-px--xl);
497
+ --legend--spacing-x: var(--size-px--m);
498
+ --legend--spacing-y: var(--size-px--s);
499
+ --legend-item--spacing: var(--size-rem--s);
500
+ --legend-item--marker--size: var(--size-rem--m);
450
501
  --focus--outline-offset: var(--size-px--xxs);
451
502
  --line-height--m: calc(var(--font-size-text--m) * 1.5);
452
503
  --line-height--s: calc(var(--font-size-text--s) * 1.5);
@@ -458,7 +509,6 @@
458
509
  --calendar--header-cell-font-weight: var(--font-weight--bold);
459
510
  --field-description--font-size: var(--font-size-text--s);
460
511
  --field-error--font-size: var(--font-size-text--s);
461
- --field-error--spacing: var(--size-rem--xs);
462
512
  --form-control--label-to-control-spacing: var(--size-rem--xxs);
463
513
  --form-control--control-to-info-spacing: var(--size-rem--xs);
464
514
  --form-control--spacing-x: var(--size-rem--s);
@@ -466,17 +516,16 @@
466
516
  --form-control--padding-x: var(--size-px--m);
467
517
  --form-control--padding-y: var(--size-px--s);
468
518
  --form-control--border-style: var(--border-style--default);
519
+ --rating--spacing--s: var(--size-rem--xxs);
520
+ --rating--spacing--m: var(--size-rem--xs);
469
521
  --segmented-button--text-to-text-spacing: var(--size-rem--xs);
522
+ --slider--spacing-x: var(--size-rem--s);
523
+ --slider--spacing-y: var(--size-rem--m);
524
+ --slider--border-style: var(--border-style--default);
470
525
  --slider--value-font-weight: var(--font-weight--bold);
471
- --slider--value-to-label-spacing: var(--size-rem--xs);
472
- --slider--text-to-track-spacing: var(--size-rem--xs);
473
- --slider--track-height: var(--size-rem--xs);
474
- --slider--thumb-border-width: var(--size-rem--xs);
475
- --slider--thumb-border-style: var(--border-style--default);
476
- --slider--thumb-corner-radius: var(--corner-radius--round);
477
- --slider--thumb-size: var(--size-rem--l);
526
+ --slider--handle-corner-radius: var(--corner-radius--round);
527
+ --slider--handle-size: var(--size-rem--l);
478
528
  --slider--initial-marker-height: var(--size-rem--m);
479
- --slider--initial-marker-width: var(--size-rem--xs);
480
529
  --switch--label-to-track-spacing: var(--size-rem--s);
481
530
  --switch--track-padding: var(--size-rem--xxs);
482
531
  --time-field--date-segment-corner-radius: var(--size-px--xs);
@@ -493,7 +542,7 @@
493
542
  --header-navigation--spacing: var(--size-rem--m);
494
543
  --header-navigation--corner-radius-round: var(--corner-radius--round);
495
544
  --header-navigation--font-weight-current: var(--font-weight--bold);
496
- --link--font-size: var(--font-size-text--s);
545
+ --link--icon-height: calc(var(--font-size-text--m) * 1.25);
497
546
  --link--font-weight: var(--font-weight--bold);
498
547
  --link--spacing: var(--size-rem--xs);
499
548
  --link--color-dark--default: var(--dark--color--800);
@@ -505,7 +554,6 @@
505
554
  --tabs--padding: var(--size-px--m);
506
555
  --tabs--font-weight--selected: var(--font-weight--bold);
507
556
  --tabs--spacing: var(--size-rem--s);
508
- --tab-panel--padding: var(--size-px--xl);
509
557
  --light-box--overlay-background-color: var(--dark--color--600);
510
558
  --light-box--max-width: calc(100dvw - var(--size-px--l));
511
559
  --light-box--max-height: calc(100dvh - var(--size-px--l));
@@ -529,6 +577,7 @@
529
577
  --tooltip--tip-size: var(--size-px--s);
530
578
  --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
531
579
  --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
580
+ --alert-text--spacing: var(--size-rem--xs);
532
581
  --alert--padding: var(--size-px--m);
533
582
  --alert--border-style: var(--border-style--default);
534
583
  --alert--heading-to-content-spacing: var(--size-rem--s);
@@ -629,27 +678,38 @@
629
678
  --notification--heading-to-text-spacing: var(--size-rem--xs);
630
679
  --notification--spacing: var(--size-rem--s);
631
680
  --notification--font-size: var(--font-size-text--s);
681
+ --password-creation-field--rule-to-rule-spacing: var(--size-px--s);
632
682
  --progress-bar--font-size: var(--font-size-text--m);
633
683
  --progress-bar--font-size-s: var(--font-size-text--s);
634
684
  --progress-bar--value-font-weight: var(--font-weight--bold);
635
685
  --progress-bar--spacing-y: var(--size-rem--xs);
636
686
  --progress-bar--spacing-x: var(--size-rem--m);
637
- --progress-bar--height: var(--size-rem--s);
687
+ --progress-bar--spacing-bar-to-legend: var(--size-px--m);
688
+ --progress-bar--height--m: var(--size-rem--m);
689
+ --progress-bar--height--s: var(--size-rem--s);
690
+ --progress-bar--height--l: var(--size-rem--l);
638
691
  --progress-bar--corner-radius: var(--size-rem--xs);
692
+ --accent-box--background-color-gradient: var(--color--gradient);
693
+ --accent-box--background-color-blue: var(--color--hosting-blue--100);
694
+ --accent-box--icon-color-blue: var(--color--hosting-blue--200);
695
+ --accent-box--padding: var(--size-px--m);
639
696
  --accordion--spacing: var(--size-rem--s);
640
697
  --accordion--border-style: var(--border-style--default);
641
698
  --accordion--padding-x: var(--size-px--s);
642
699
  --accordion--padding-y: var(--size-px--xs);
643
700
  --align--avatar-text--spacing: var(--size-rem--s);
644
701
  --align--input-button--spacing: var(--size-px--m);
645
- --align--text-copyButton--spacing: var(--size-rem--xs);
702
+ --align--text-button--spacing: var(--size-rem--xs);
703
+ --align--icon-text--spacing: var(--size-rem--s);
646
704
  --column-layout--gap--s: var(--size-px--s);
647
705
  --column-layout--gap--m: var(--size-px--m);
648
706
  --column-layout--gap--l: var(--size-px--l);
649
707
  --column-layout--gap--xl: var(--size-px--xl);
650
- --layout-card--padding: var(--size-px--xl);
708
+ --layout-card--padding: var(--size-px--l);
709
+ --layout-card--padding-mobile: var(--size-px--m);
651
710
  --list--spacing: var(--size-px--s);
652
711
  --list--block-to-block-spacing: var(--size-px--m);
712
+ --list--filter-to-search-spacing: var(--size-px--xl);
653
713
  --list-item--padding: var(--size-px--s);
654
714
  --list-item--border-style: var(--border-style--default);
655
715
  --list-item--spacing: var(--size-px--m);
@@ -657,9 +717,11 @@
657
717
  --list-item--subtitle-font-size: var(--font-size-text--s);
658
718
  --section--section-to-section-spacing: var(--size-rem--xl);
659
719
  --section--spacing: var(--size-rem--m);
660
- --section--sub-heading-spacing: var(--size-rem--m);
720
+ --section--sub-heading-spacing-m: var(--size-rem--l);
721
+ --section--sub-heading-spacing-s: var(--size-rem--s);
661
722
  --section-header--action-to-action-spacing: var(--size-rem--s);
662
723
  --section-header--heading-to-action-spacing: var(--size-rem--m);
724
+ --separator--border-style: var(--border-style--default);
663
725
  --table--border-style: var(--border-style--default);
664
726
  --table--padding-x: var(--size-px--m);
665
727
  --table--padding-y: var(--size-px--s);
@@ -670,10 +732,11 @@
670
732
  --file-card--spacing: var(--size-rem--s);
671
733
  --file-card--border-style: var(--border-style--default);
672
734
  --file-card--sub-title-font-size: var(--font-size-text--s);
735
+ --file-drop-zone--padding: var(--size-px--m);
736
+ --file-drop-zone--border-style--default: var(--border-style--dashed);
737
+ --file-drop-zone--border-style--target: var(--border-style--default);
673
738
  --button--corner-radius: var(--corner-radius--default);
674
739
  --button--pending-icon-color: var(--neutral--color--1000);
675
- --button--succeeded-icon-color: var(--success--color--800);
676
- --button--failed-icon-color: var(--danger--color--800);
677
740
  --button--border-width: var(--border-width--100);
678
741
  --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
679
742
  --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
@@ -760,6 +823,9 @@
760
823
  --menu-item--icon-color--default: var(--neutral--color--800);
761
824
  --menu-item--icon-color--current: var(--primary--color--800);
762
825
  --menu-item--disabled-background-color: var(--disabled-plain-background-color);
826
+ --message-separator--background-color: var(--neutral--color--100);
827
+ --message-separator--color: var(--neutral--color--800);
828
+ --message--corner-radius: var(--corner-radius--default);
763
829
  --primary-solid-background-color--default: var(--primary--color--800);
764
830
  --primary-solid-background-color--hover: var(--primary--color--900);
765
831
  --primary-solid-background-color--pressed: var(--primary--color--1000);
@@ -837,9 +903,9 @@
837
903
  --warning-soft-background-color--pressed: var(--warning--color--300);
838
904
  --warning-soft-content-color--default: var(--warning--color--900);
839
905
  --warning-soft-content-color--pressed: var(--warning--color--1000);
840
- --warning-plain-background-color--hover: var(--info--color--100);
841
- --warning-plain-background-color--pressed: var(--info--color--200);
842
- --warning-plain-content-color: var(--info--color--800);
906
+ --warning-plain-background-color--hover: var(--warning--color--100);
907
+ --warning-plain-background-color--pressed: var(--warning--color--200);
908
+ --warning-plain-content-color: var(--warning--color--800);
843
909
  --neutral-solid-background-color--default: var(--neutral--color--800);
844
910
  --neutral-solid-background-color--hover: var(--neutral--color--900);
845
911
  --neutral-solid-background-color--pressed: var(--neutral--color--1000);
@@ -865,7 +931,12 @@
865
931
  --disabled-outline-border-color: var(--neutral--color--400);
866
932
  --disabled-soft-background-color: var(--neutral--color--300);
867
933
  --disabled-soft-content-color: var(--neutral--color--500);
868
- --code--line-height: var(--line-height--m);
934
+ --color--blue: var(--primary--color--1000);
935
+ --avatar-stack--border-width: var(--border-width--200);
936
+ --avatar--info-status-background-color: var(--info--color--200);
937
+ --avatar--warning-status-background-color: var(--warning--color--200);
938
+ --avatar--danger-status-background-color: var(--danger--color--200);
939
+ --avatar--success-status-background-color: var(--success--color--200);
869
940
  --code--corner-radius: var(--corner-radius--default);
870
941
  --code--light-background-color: var(--light-soft-background-color--default);
871
942
  --code--light-content-color: var(--light-soft-content-color);
@@ -874,19 +945,33 @@
874
945
  --heading--color: var(--primary--color--1000);
875
946
  --heading--color-dark: var(--dark-plain-content-color);
876
947
  --heading--color-light: var(--light-plain-content-color);
948
+ --heading--color-danger: var(--danger--color--900);
949
+ --heading--color-unavailable: var(--neutral--color--900);
877
950
  --icon--color: var(--neutral--color--800);
878
- --illustrated-message--primary-icon-color: var(--primary--color--900);
879
- --illustrated-message--danger-icon-color: var(--danger--color--900);
880
- --illustrated-message--danger-heading-color: var(--danger--color--1000);
881
- --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
882
- --illustrated-message--light-icon-color: var(--light-plain-content-color);
951
+ --icon--unavailable-color: var(--neutral--color--900);
952
+ --illustrated-message--primary-content-color: var(--primary--color--1000);
953
+ --illustrated-message--danger-content-color: var(--danger--color--900);
954
+ --illustrated-message--unavailable-content-color: var(--neutral--color--900);
955
+ --illustrated-message--dark-content-color: var(--dark-plain-content-color);
956
+ --illustrated-message--light-content-color: var(--light-plain-content-color);
957
+ --image--corner-radius: var(--corner-radius--default);
958
+ --image--border-width: var(--border-width--100);
883
959
  --label--line-height: var(--line-height--m);
884
960
  --label--color--default: var(--neutral--color--800);
885
- --message--corner-radius: var(--corner-radius--default);
886
961
  --text--color--default: var(--neutral--color--1000);
887
962
  --text--color--light: var(--light-plain-content-color);
888
963
  --text--color--dark: var(--dark-plain-content-color);
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);
889
973
  --focus--outline-color: var(--primary--color--800);
974
+ --focus--secondary-outline-color: var(--neutral--color--100);
890
975
  --focus--outline-width: var(--border-width--200);
891
976
  --choice--icon-color--selected: var(--primary--color--800);
892
977
  --calendar--heading-font-size: var(--font-size-text--default);
@@ -894,7 +979,6 @@
894
979
  --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
895
980
  --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
896
981
  --calendar--cell-range-background-color: var(--primary--color--100);
897
- --field-error--color: var(--danger--color--800);
898
982
  --form-control--corner-radius: var(--corner-radius--default);
899
983
  --form-control--border-width: var(--border-width--100);
900
984
  --form-control--placeholder-color--default: var(--neutral--color--900);
@@ -904,9 +988,15 @@
904
988
  --form-control--background-color--focused: var(--neutral--color--300);
905
989
  --form-control--background-color--invalid: var(--danger--color--100);
906
990
  --form-control--background-color--selected: var(--primary--color--200);
907
- --slider--track-corner-radius: var(--corner-radius--default);
908
- --slider--thumb-background-color--default: var(--neutral--color--100);
909
- --slider--initial-marker-corner-radius: var(--corner-radius--default);
991
+ --rating--star-color: var(--neutral--color--700);
992
+ --rating--star-filled-color: var(--primary--color--1000);
993
+ --slider--color--default: var(--primary--color--1000);
994
+ --slider--color--disabled: var(--neutral--color--600);
995
+ --slider--track-color--default: var(--neutral--color--700);
996
+ --slider--track-color--disabled: var(--neutral--color--400);
997
+ --slider--border-width: var(--border-width--300);
998
+ --slider--corner-radius: var(--corner-radius--default);
999
+ --slider--handle-fill-color: var(--neutral--color--100);
910
1000
  --switch--handle-color--disabled: var(--neutral--color--500);
911
1001
  --switch--handle-background-color--default: var(--neutral--color--100);
912
1002
  --switch--handle-background-color--disabled: var(--neutral--color--300);
@@ -940,6 +1030,7 @@
940
1030
  --tooltip--background-color: var(--neutral--color--900);
941
1031
  --tooltip--box-shadow: var(--shadow--overlay);
942
1032
  --tooltip--header-corner-radius: var(--corner-radius--default);
1033
+ --alert-text--unavailable-color: var(--neutral--color--900);
943
1034
  --alert--corner-radius: var(--corner-radius--default);
944
1035
  --alert--border-width: var(--border-width--100);
945
1036
  --alert--border-x-start-width: var(--border-width--400);
@@ -956,6 +1047,8 @@
956
1047
  --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
957
1048
  --counter-badge--border-width: var(--border-width--200);
958
1049
  --counter-badge--border-color: var(--neutral--color--100);
1050
+ --loading-spinner--color-light: var(--light-plain-content-color);
1051
+ --loading-spinner--color-dark: var(--dark-plain-content-color);
959
1052
  --notification--corner-radius: var(--corner-radius--default);
960
1053
  --notification--border-x-start-width: var(--border-width--300);
961
1054
  --notification--box-shadow: var(--shadow--overlay);
@@ -964,7 +1057,10 @@
964
1057
  --notification--danger-background-color--default: var(--neutral--color--100);
965
1058
  --notification--success-background-color--default: var(--neutral--color--100);
966
1059
  --progress-bar--border-width: var(--border-width--100);
967
- --progress-bar--background-color: var(--neutral-outline-background-color--default);
1060
+ --progress-bar--background-color: var(--neutral--color--300);
1061
+ --accent-box--background-color-neutral: var(--neutral--color--300);
1062
+ --accent-box--icon-color-neutral: var(--neutral--color--400);
1063
+ --accent-box--corner-radius: var(--corner-radius--default);
968
1064
  --accordion--corner-radius: var(--corner-radius--default);
969
1065
  --accordion--border-width: var(--border-width--100);
970
1066
  --accordion--background-color--hover: var(--primary--color--100);
@@ -987,6 +1083,10 @@
987
1083
  --file-card--corner-radius: var(--corner-radius--default);
988
1084
  --file-card--border-width: var(--border-width--100);
989
1085
  --file-card--background-color--default: var(--neutral--color--100);
1086
+ --file-card--background-color--error: var(--danger--color--100);
1087
+ --file-drop-zone--corner-radius: var(--corner-radius--default);
1088
+ --file-drop-zone--border-width: var(--border-width--100);
1089
+ --file-drop-zone--border-color--target: var(--primary--color--800);
990
1090
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
991
1091
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
992
1092
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
@@ -1117,11 +1217,19 @@
1117
1217
  --menu-item--disabled-color: var(--disabled-plain-content-color);
1118
1218
  --code--default-background-color: var(--neutral-soft-background-color--default);
1119
1219
  --code--default-content-color: var(--neutral-soft-content-color--default);
1120
- --illustrated-message--primary-heading-color: var(--heading--color);
1121
- --illustrated-message--dark-heading-color: var(--heading--color-dark);
1122
- --illustrated-message--light-heading-color: var(--heading--color-light);
1220
+ --icon--info-color: var(--info-outline-content-color);
1221
+ --icon--warning-color: var(--warning-outline-content-color);
1222
+ --icon--danger-color: var(--danger-outline-content-color);
1223
+ --icon--success-color: var(--success-outline-content-color);
1224
+ --image--border-color: var(--neutral-outline-border-color);
1123
1225
  --label--color--disabled: var(--disabled-plain-content-color);
1124
1226
  --text--color--disabled: var(--disabled-plain-content-color);
1227
+ --text--blockquote-border-color: var(--info-outline-border-color);
1228
+ --donut-chart--border-color: var(--neutral-outline-border-color);
1229
+ --donut-chart--info-fill-background-color: var(--info-solid-background-color--default);
1230
+ --donut-chart--success-fill-background-color: var(--success-solid-background-color--default);
1231
+ --donut-chart--warning-fill-background-color: var(--warning-solid-background-color--default);
1232
+ --donut-chart--danger-fill-background-color: var(--danger-solid-background-color--default);
1125
1233
  --choice--icon-color--default: var(--icon--color);
1126
1234
  --choice--icon-color--disabled: var(--disabled-outline-content-color);
1127
1235
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
@@ -1137,16 +1245,6 @@
1137
1245
  --form-control--content-color--default: var(--neutral-outline-content-color);
1138
1246
  --form-control--content-color--disabled: var(--disabled-outline-content-color);
1139
1247
  --form-control--content-color--selected: var(--neutral-outline-content-color);
1140
- --slider--text-color--disabled: var(--disabled-plain-content-color);
1141
- --slider--track-background-color--default: var(--primary-soft-background-color--default);
1142
- --slider--track-background-color--disabled: var(--disabled-soft-background-color);
1143
- --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
1144
- --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
1145
- --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
1146
- --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
1147
- --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
1148
- --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
1149
- --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
1150
1248
  --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1151
1249
  --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1152
1250
  --switch--track-background-color--selected: var(--success-solid-background-color--default);
@@ -1175,10 +1273,10 @@
1175
1273
  --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1176
1274
  --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1177
1275
  --alert-badge--danger-border-color: var(--danger-outline-border-color);
1178
- --alert-icon--info-color: var(--info-outline-content-color);
1179
- --alert-icon--warning-color: var(--warning-outline-content-color);
1180
- --alert-icon--danger-color: var(--danger-outline-content-color);
1181
- --alert-icon--success-color: var(--success-outline-content-color);
1276
+ --alert-text--info-color: var(--info-outline-content-color);
1277
+ --alert-text--warning-color: var(--warning-outline-content-color);
1278
+ --alert-text--danger-color: var(--danger-outline-content-color);
1279
+ --alert-text--success-color: var(--success-outline-content-color);
1182
1280
  --alert--info-border-color: var(--info-outline-border-color);
1183
1281
  --alert--info-heading-color: var(--info-outline-content-color);
1184
1282
  --alert--warning-border-color: var(--warning-outline-border-color);
@@ -1205,6 +1303,7 @@
1205
1303
  --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1206
1304
  --counter-badge--background-color: var(--success-solid-background-color--default);
1207
1305
  --counter-badge--content-color: var(--success-solid-content-color);
1306
+ --loading-spinner--color: var(--icon--color);
1208
1307
  --notification--info-border-color: var(--info-outline-border-color);
1209
1308
  --notification--info-heading-color: var(--info-outline-content-color);
1210
1309
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
@@ -1226,11 +1325,19 @@
1226
1325
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1227
1326
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1228
1327
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1328
+ --progress-bar--indeterminate-fill-background-color: var(--neutral-solid-background-color--default);
1229
1329
  --accordion--border-color: var(--neutral-outline-border-color);
1230
1330
  --list-item--border-color: var(--neutral-outline-border-color);
1231
1331
  --separator--color: var(--neutral-outline-border-color);
1232
1332
  --table--border-color: var(--neutral-outline-border-color);
1233
- --file-card--border-color: var(--neutral-outline-border-color);
1333
+ --file-card--border-color--default: var(--neutral-outline-border-color);
1334
+ --file-card--border-color--error: var(--danger-outline-border-color);
1234
1335
  --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
1235
1336
  --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
1337
+ --file-drop-zone--content-color--disabled: var(--disabled-outline-content-color);
1338
+ --file-drop-zone--background-color--default: var(--form-control--background-color--default);
1339
+ --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
1340
+ --file-drop-zone--background-color--disabled: var(--disabled-outline-background-color);
1341
+ --file-drop-zone--border-color--disabled: var(--disabled-outline-border-color);
1342
+ --file-drop-zone--border-color--default: var(--form-control--border-color--default);
1236
1343
  }