@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/_theming.scss

@@ -155,7 +155,7 @@ $light-color-scheme-states-focused-color-error: #db3c55;
 $light-color-scheme-states-selected-color: #e7f1ff;
 $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $light-color-scheme-states-disabled-opacity: 0.3;
-$dark-color-scheme-primary-default: #0059b8;
+$dark-color-scheme-primary-default: #0374eb;
 $dark-color-scheme-secondary-default: #515e69;
 $dark-color-scheme-error-default: #b9023a;
 $dark-color-scheme-info-default: #0c6579;
@@ -219,7 +219,7 @@ $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
 $palette-blue-200: #a2c7fe;
-$palette-blue-300: #5697ff;
+$palette-blue-300: #7fb1ff;
 $palette-blue-400: #4187ff;
 $palette-blue-500: #0374eb;
 $palette-blue-560: #0059b8;
@@ -518,13 +518,13 @@ $badge-dark-color-scheme-solid-error-border: #b9023a;
 $badge-dark-color-scheme-solid-error-color: white;
 $badge-dark-color-scheme-solid-transparent-background: transparent;
 $badge-dark-color-scheme-solid-transparent-border: #515e69;
-$badge-dark-color-scheme-solid-transparent-color: white;
+$badge-dark-color-scheme-solid-transparent-color: #d7dee4;
 $badge-dark-color-scheme-solid-light-background: #7f8c98;
 $badge-dark-color-scheme-solid-light-border: #7f8c98;
-$badge-dark-color-scheme-solid-light-color: white;
+$badge-dark-color-scheme-solid-light-color: #d7dee4;
 $badge-dark-color-scheme-solid-secondary-background: #515e69;
 $badge-dark-color-scheme-solid-secondary-border: #515e69;
-$badge-dark-color-scheme-solid-secondary-color: white;
+$badge-dark-color-scheme-solid-secondary-color: #d7dee4;
 $badge-size-default-height: 24px;
 $badge-size-default-min-width: 10px;
 $badge-size-default-padding: 0 8px;
@@ -541,9 +541,41 @@ $badge-font-default-mono: caption-mono;
 $badge-font-mini-default: extra-small-text;
 $badge-font-mini-caps: extra-small-text-caps;
 $badge-font-mini-mono: extra-small-text-mono;
-$button-toggle-size-border-size: 1px;
-$button-toggle-size-border-radius: 4px;
-$button-toggle-size-border-siblings-radius: 0;
+$button-toggle-group-light-color-scheme-background: #d7dee4;
+$button-toggle-group-light-color-scheme-border: #d7dee4;
+$button-toggle-group-light-color-scheme-states-disabled-opacity: 0.3;
+$button-toggle-group-dark-color-scheme-background: #515e69;
+$button-toggle-group-dark-color-scheme-border: #515e69;
+$button-toggle-group-dark-color-scheme-states-disabled-opacity: 0.45;
+$button-toggle-group-size-height: 32px;
+$button-toggle-group-size-border-width: 1px;
+$button-toggle-group-size-border-radius: 4px;
+$button-toggle-group-size-padding: 1px;
+$button-toggle-light-color-scheme-color: #19252f;
+$button-toggle-light-color-scheme-icon: #8c99a5;
+$button-toggle-light-color-scheme-states-disabled-opacity: 0.3;
+$button-toggle-light-color-scheme-states-hover-background: rgba(black, 0.05);
+$button-toggle-light-color-scheme-states-hover-icon: #6d7a86;
+$button-toggle-light-color-scheme-states-active-background: rgba(black, 0.1);
+$button-toggle-light-color-scheme-states-active-icon: #434f5a;
+$button-toggle-light-color-scheme-states-pressed-background: white;
+$button-toggle-light-color-scheme-states-pressed-icon: #434f5a;
+$button-toggle-dark-color-scheme-color: #f2f5f9;
+$button-toggle-dark-color-scheme-icon: #8c99a5;
+$button-toggle-dark-color-scheme-states-disabled-opacity: 0.45;
+$button-toggle-dark-color-scheme-states-hover-background: rgba(white, 0.05);
+$button-toggle-dark-color-scheme-states-hover-icon: #6d7a86;
+$button-toggle-dark-color-scheme-states-active-background: rgba(white, 0.1);
+$button-toggle-dark-color-scheme-states-active-icon: #bdc7d1;
+$button-toggle-dark-color-scheme-states-pressed-background: #19252f;
+$button-toggle-dark-color-scheme-states-pressed-icon: #bdc7d1;
+$button-toggle-size-border-width: 1px;
+$button-toggle-size-border-radius: 2px;
+$button-toggle-size-horizontal-padding: 12px;
+$button-toggle-size-min-width: 40px;
+$button-toggle-size-left-icon-padding: 6px;
+$button-toggle-font-default: body;
+$icon-button-toggle-size-width: 64px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $button-light-color-scheme-primary-color: white;
 $button-light-color-scheme-primary-border: #0374eb;
@@ -552,7 +584,7 @@ $button-light-color-scheme-primary-icon: white;
 $button-light-color-scheme-primary-states-active-border: #0059b8;
 $button-light-color-scheme-primary-states-active-background: #0059b8;
 $button-light-color-scheme-primary-transparent-color: #0374eb;
-$button-light-color-scheme-primary-transparent-icon: #5697ff;
+$button-light-color-scheme-primary-transparent-icon: #4187ff;
 $button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
 $button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
@@ -572,12 +604,12 @@ $button-light-color-scheme-error-states-active-background: #bdc7d1;
 $button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $button-dark-color-scheme-primary-color: white;
 $button-dark-color-scheme-primary-border: #0059b8;
-$button-dark-color-scheme-primary-background: #0059b8;
+$button-dark-color-scheme-primary-background: #0374eb;
 $button-dark-color-scheme-primary-icon: white;
 $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
 $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
-$button-dark-color-scheme-primary-transparent-color: #5697ff;
-$button-dark-color-scheme-primary-transparent-icon: #5697ff;
+$button-dark-color-scheme-primary-transparent-color: #7fb1ff;
+$button-dark-color-scheme-primary-transparent-icon: #7fb1ff;
 $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
@@ -653,12 +685,12 @@ $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid whi
 $checkbox-dark-color-scheme-default-border: #515e69;
 $checkbox-dark-color-scheme-default-color: white;
 $checkbox-dark-color-scheme-default-background: transparent;
-$checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
-$checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
+$checkbox-dark-color-scheme-default-states-checked-border: #0374eb;
+$checkbox-dark-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
 $checkbox-dark-color-scheme-default-states-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-border: #4187ff;
-$checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
+$checkbox-dark-color-scheme-default-states-checked-focused-background: #0374eb;
 $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
@@ -839,7 +871,7 @@ $code-block-dark-color-scheme-hljs-link-color: null;
 $code-block-dark-color-scheme-hljs-literal-background: null;
 $code-block-dark-color-scheme-hljs-literal-color: #c692b5;
 $code-block-dark-color-scheme-hljs-meta-background: null;
-$code-block-dark-color-scheme-hljs-meta-color: #5697ff;
+$code-block-dark-color-scheme-hljs-meta-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-meta-keyword-background: null;
 $code-block-dark-color-scheme-hljs-meta-keyword-color: null;
 $code-block-dark-color-scheme-hljs-meta-string-background: null;
@@ -847,7 +879,7 @@ $code-block-dark-color-scheme-hljs-meta-string-color: #4ba96c;
 $code-block-dark-color-scheme-hljs-meta-prompt-background: null;
 $code-block-dark-color-scheme-hljs-meta-prompt-color: null;
 $code-block-dark-color-scheme-hljs-name-background: null;
-$code-block-dark-color-scheme-hljs-name-color: #5697ff;
+$code-block-dark-color-scheme-hljs-name-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-number-background: null;
 $code-block-dark-color-scheme-hljs-number-color: #c692b5;
 $code-block-dark-color-scheme-hljs-operator-background: null;
@@ -873,7 +905,7 @@ $code-block-dark-color-scheme-hljs-selector-id-color: null;
 $code-block-dark-color-scheme-hljs-selector-pseudo-background: null;
 $code-block-dark-color-scheme-hljs-selector-pseudo-color: null;
 $code-block-dark-color-scheme-hljs-selector-tag-background: null;
-$code-block-dark-color-scheme-hljs-selector-tag-color: #5697ff;
+$code-block-dark-color-scheme-hljs-selector-tag-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-string-background: null;
 $code-block-dark-color-scheme-hljs-string-color: #4ba96c;
 $code-block-dark-color-scheme-hljs-strong-background: null;
@@ -881,7 +913,7 @@ $code-block-dark-color-scheme-hljs-strong-color: null;
 $code-block-dark-color-scheme-hljs-subst-background: null;
 $code-block-dark-color-scheme-hljs-subst-color: null;
 $code-block-dark-color-scheme-hljs-symbol-background: null;
-$code-block-dark-color-scheme-hljs-symbol-color: #5697ff;
+$code-block-dark-color-scheme-hljs-symbol-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-tag-background: null;
 $code-block-dark-color-scheme-hljs-tag-color: null;
 $code-block-dark-color-scheme-hljs-template-tag-background: null;
@@ -889,7 +921,7 @@ $code-block-dark-color-scheme-hljs-template-tag-color: null;
 $code-block-dark-color-scheme-hljs-template-variable-background: null;
 $code-block-dark-color-scheme-hljs-template-variable-color: null;
 $code-block-dark-color-scheme-hljs-title-background: null;
-$code-block-dark-color-scheme-hljs-title-color: #5697ff;
+$code-block-dark-color-scheme-hljs-title-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-title-class-background: null;
 $code-block-dark-color-scheme-hljs-title-class-color: null;
 $code-block-dark-color-scheme-hljs-title-class-inherited-background: null;
@@ -1094,6 +1126,61 @@ $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
+$file-upload-light-color-scheme-single-default-background: white;
+$file-upload-light-color-scheme-single-default-border: #bdc7d1;
+$file-upload-light-color-scheme-single-states-error-background: #fff3f3;
+$file-upload-light-color-scheme-single-states-error-border: #db3c55;
+$file-upload-light-color-scheme-single-states-progress-background: #f2f5f9;
+$file-upload-light-color-scheme-single-states-progress-border: #d7dee4;
+$file-upload-light-color-scheme-single-states-drag-n-drop-background: #e7f1ff;
+$file-upload-light-color-scheme-single-states-drag-n-drop-border: #0374eb;
+$file-upload-light-color-scheme-single-states-disable-background: #f2f5f9;
+$file-upload-light-color-scheme-single-states-disable-border: #d7dee4;
+$file-upload-light-color-scheme-multiple-default-background: white;
+$file-upload-light-color-scheme-multiple-default-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-error-background: white;
+$file-upload-light-color-scheme-multiple-states-error-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-progress-background: white;
+$file-upload-light-color-scheme-multiple-states-progress-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-drag-n-drop-background: #e7f1ff;
+$file-upload-light-color-scheme-multiple-states-drag-n-drop-border: #0374eb;
+$file-upload-light-color-scheme-multiple-states-disable-background: #f2f5f9;
+$file-upload-light-color-scheme-multiple-states-disable-border: #d7dee4;
+$file-upload-dark-color-scheme-single-default-background: #19252f;
+$file-upload-dark-color-scheme-single-default-border: #515e69;
+$file-upload-dark-color-scheme-single-states-error-background: #500013;
+$file-upload-dark-color-scheme-single-states-error-border: #b9023a;
+$file-upload-dark-color-scheme-single-states-progress-background: #333f4a;
+$file-upload-dark-color-scheme-single-states-progress-border: mix(#515e69, transparent, 50%);
+$file-upload-dark-color-scheme-single-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
+$file-upload-dark-color-scheme-single-states-drag-n-drop-border: #4187ff;
+$file-upload-dark-color-scheme-single-states-disable-background: #333f4a;
+$file-upload-dark-color-scheme-single-states-disable-border: mix(#515e69, transparent, 50%);
+$file-upload-dark-color-scheme-multiple-default-background: #19252f;
+$file-upload-dark-color-scheme-multiple-default-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-error-background: #19252f;
+$file-upload-dark-color-scheme-multiple-states-error-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-progress-background: #19252f;
+$file-upload-dark-color-scheme-multiple-states-progress-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
+$file-upload-dark-color-scheme-multiple-states-drag-n-drop-border: #4187ff;
+$file-upload-dark-color-scheme-multiple-states-disable-background: #333f4a;
+$file-upload-dark-color-scheme-multiple-states-disable-border: mix(#515e69, transparent, 50%);
+$file-upload-size-single-height: 48px;
+$file-upload-size-single-vertical-padding: 12px;
+$file-upload-size-single-border-width: 1px;
+$file-upload-size-single-border-radius: 4px;
+$file-upload-size-single-border-style: dashed;
+$file-upload-size-multiple-border-width: 1px;
+$file-upload-size-multiple-border-radius: 4px;
+$file-upload-size-multiple-border-style: dashed;
+$file-upload-size-multiple-uploaded-item-horizontal-padding: 8px;
+$file-upload-size-multiple-uploaded-item-vertical-padding: 8px;
+$file-upload-font-single: body;
+$file-upload-font-multiple-header: headline;
+$file-upload-font-multiple-caption: body;
+$file-upload-font-multiple-uploaded-header: caption;
+$file-upload-font-multiple-uploaded-item: body;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
 $form-field-light-color-scheme-states-autofill-background: #ebf8fd;
@@ -1150,10 +1237,10 @@ $icon-light-color-scheme-secondary-default: #8c99a5;
 $icon-light-color-scheme-secondary-states-hover: #6d7a86;
 $icon-light-color-scheme-secondary-states-active: #434f5a;
 $icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
-$icon-light-color-scheme-primary-default: #5697ff;
+$icon-light-color-scheme-primary-default: #4187ff;
 $icon-light-color-scheme-primary-states-hover: #0374eb;
 $icon-light-color-scheme-primary-states-active: #014b9d;
-$icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-light-color-scheme-primary-states-disabled: mix(#4187ff, transparent, 30%);
 $icon-light-color-scheme-info-default: #18a5c5;
 $icon-light-color-scheme-info-states-hover: #218ca8;
 $icon-light-color-scheme-info-states-active: #0c5567;
@@ -1174,10 +1261,10 @@ $icon-dark-color-scheme-secondary-default: #8c99a5;
 $icon-dark-color-scheme-secondary-states-hover: #6d7a86;
 $icon-dark-color-scheme-secondary-states-active: #bdc7d1;
 $icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
-$icon-dark-color-scheme-primary-default: #5697ff;
+$icon-dark-color-scheme-primary-default: #7fb1ff;
 $icon-dark-color-scheme-primary-states-hover: #0374eb;
 $icon-dark-color-scheme-primary-states-active: #a2c7fe;
-$icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-dark-color-scheme-primary-states-disabled: mix(#7fb1ff, transparent, 30%);
 $icon-dark-color-scheme-info-default: #18a5c5;
 $icon-dark-color-scheme-info-states-hover: #218ca8;
 $icon-dark-color-scheme-info-states-active: #6ed3f2;
@@ -1206,8 +1293,8 @@ $link-light-color-scheme-state-hover-text: #0059b8;
 $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $link-light-color-scheme-state-active: #014b9d;
 $link-light-color-scheme-state-focused-outline: #0374eb;
-$link-dark-color-scheme-text: #5697ff;
-$link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
+$link-dark-color-scheme-text: #7fb1ff;
+$link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 0.32);;
 $link-dark-color-scheme-state-visited-text: #bb78a7;
 $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
 $link-dark-color-scheme-state-hover-text: #4187ff;
@@ -1220,9 +1307,14 @@ $link-size-default-icon-margin: 4px;
 $link-size-caption-icon-margin: 2px;
 $link-font-default: body;
 $link-font-caption: caption;
+$list-light-color-scheme-footer-background: white;
+$list-light-color-scheme-footer-divider: #d7dee4;
+$list-dark-color-scheme-footer-background: #19252f;
+$list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
 $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
+$list-size-footer-min-height: 48px;
 $list-font-item: body;
 $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
 $loader-overlay-light-color-scheme-text: #19252f;
@@ -1325,8 +1417,8 @@ $markdown-link-light-color-scheme-state-hover-text: #0059b8;
 $markdown-link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $markdown-link-light-color-scheme-state-active: #014b9d;
 $markdown-link-light-color-scheme-state-focused-outline: #0374eb;
-$markdown-link-dark-color-scheme-text: #5697ff;
-$markdown-link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
+$markdown-link-dark-color-scheme-text: #7fb1ff;
+$markdown-link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 0.32);;
 $markdown-link-dark-color-scheme-state-visited-text: #bb78a7;
 $markdown-link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
 $markdown-link-dark-color-scheme-state-hover-text: #4187ff;
@@ -1491,8 +1583,8 @@ $radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
 $radio-dark-color-scheme-outer-circle-border: #515e69;
 $radio-dark-color-scheme-inner-circle-border: transparent;
 $radio-dark-color-scheme-cap-color: white;
-$radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
-$radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
+$radio-dark-color-scheme-states-checked-outer-circle-border: #0374eb;
+$radio-dark-color-scheme-states-checked-inner-circle-border: #0374eb;
 $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
 $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
 $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
@@ -1537,8 +1629,6 @@ $select-panel-size-vertical-padding: 4px;
 $select-panel-size-border-width: 1px;
 $select-panel-size-border-radius: 4px;
 $select-panel-font-default: body;
-$sidepanel-light-color-scheme-border: #bdc7d1;
-$sidepanel-dark-color-scheme-border: #19252f;
 $sidepanel-size-small: 400px;
 $sidepanel-size-medium: 640px;
 $sidepanel-size-large: 960px;
@@ -1574,7 +1664,7 @@ $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
 $tabs-dark-color-scheme-state-normal-text: #d7dee4;
 $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
 $tabs-dark-color-scheme-state-hover-text: #d7dee4;
-$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-active-marker-color: #0374eb;
 $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
 $tabs-dark-color-scheme-state-empty-text: #6d7a86;
 $tabs-dark-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
@@ -1598,7 +1688,7 @@ $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(r
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
-$tags-light-color-scheme-primary-icon: #5697ff;
+$tags-light-color-scheme-primary-icon: #4187ff;
 $tags-light-color-scheme-primary-states-hover-icon: #0374eb;
 $tags-light-color-scheme-primary-states-focused: #0374eb;
 $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
@@ -1625,11 +1715,11 @@ $tags-light-color-scheme-error-states-disabled-border: transparent;
 $tags-dark-color-scheme-primary-background: #014b9d;
 $tags-dark-color-scheme-primary-border: transparent;
 $tags-dark-color-scheme-primary-text: #a2c7fe;
-$tags-dark-color-scheme-primary-icon: #5697ff;
+$tags-dark-color-scheme-primary-icon: #7fb1ff;
 $tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
 $tags-dark-color-scheme-primary-states-focused: #4187ff;
-$tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
-$tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
+$tags-dark-color-scheme-primary-states-disabled-text: mix(#7fb1ff, transparent, 50%);
+$tags-dark-color-scheme-primary-states-disabled-background: mix(#7fb1ff, transparent, 10%);
 $tags-dark-color-scheme-primary-states-disabled-border: transparent;
 $tags-dark-color-scheme-secondary-background: #333f4a;
 $tags-dark-color-scheme-secondary-border: transparent;
@@ -1727,8 +1817,8 @@ $toggle-dark-color-scheme-background: #19252f;
 $toggle-dark-color-scheme-circle-border: #515e69;
 $toggle-dark-color-scheme-circle-background: #6d7a86;
 $toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
-$toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
-$toggle-dark-color-scheme-primary-checked-background: #0059b8;
+$toggle-dark-color-scheme-primary-checked-border-color: #0374eb;
+$toggle-dark-color-scheme-primary-checked-background: #0374eb;
 $toggle-dark-color-scheme-error-checked-border-color: #b9023a;
 $toggle-dark-color-scheme-error-checked-background: #b9023a;
 $toggle-size-height: 16px;
@@ -1795,7 +1885,7 @@ $light-color-scheme-primary-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,
@@ -1993,7 +2083,7 @@ $dark-color-scheme-primary-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,
@@ -2191,7 +2281,7 @@ $color-blue-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,
@@ -3540,6 +3630,39 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         )
     );
 
+    $button-toggle: (
+        button-toggle-group: (
+            background: $button-toggle-group-light-color-scheme-background,
+            border: $button-toggle-group-light-color-scheme-border,
+            states: (
+                disabled: (
+                    opacity: $button-toggle-group-light-color-scheme-states-disabled-opacity
+                )
+            )
+        ),
+        button-toggle: (
+            color: $button-toggle-light-color-scheme-color,
+            icon: $button-toggle-light-color-scheme-icon,
+            states: (
+                disabled: (
+                    opacity: $button-toggle-light-color-scheme-states-disabled-opacity
+                ),
+                hover: (
+                    background: $button-toggle-light-color-scheme-states-hover-background,
+                    icon: $button-toggle-light-color-scheme-states-hover-icon
+                ),
+                active: (
+                    background: $button-toggle-light-color-scheme-states-active-background,
+                    icon: $button-toggle-light-color-scheme-states-active-icon
+                ),
+                pressed: (
+                    background: $button-toggle-light-color-scheme-states-pressed-background,
+                    icon: $button-toggle-light-color-scheme-states-pressed-icon
+                )
+            )
+        )
+    );
+
     $card: (
         error: (
             vertical-line: $card-light-color-scheme-error-vertical-line,
@@ -3777,6 +3900,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         )
     );
 
+    $file-upload: (
+        single: (
+            default: (
+                background: $file-upload-light-color-scheme-single-default-background,
+                border: $file-upload-light-color-scheme-single-default-border,
+            ),
+            states: (
+                error: (
+                    background: $file-upload-light-color-scheme-single-states-error-background,
+                    border: $file-upload-light-color-scheme-single-states-error-border,
+                ),
+                progress: (
+                    background: $file-upload-light-color-scheme-single-states-progress-background,
+                    border: $file-upload-light-color-scheme-single-states-progress-border,
+                ),
+                drag-n-drop: (
+                    background: $file-upload-light-color-scheme-single-states-drag-n-drop-background,
+                    border: $file-upload-light-color-scheme-single-states-drag-n-drop-border,
+                ),
+                disabled: (
+                    background: $file-upload-light-color-scheme-single-states-disable-background,
+                    border: $file-upload-light-color-scheme-single-states-disable-border,
+                )
+            )
+        ),
+        multiple: (
+            default: (
+                background: $file-upload-light-color-scheme-multiple-default-background,
+                border: $file-upload-light-color-scheme-multiple-default-border,
+            ),
+            states: (
+                error: (
+                    background: $file-upload-light-color-scheme-multiple-states-error-background,
+                    border: $file-upload-light-color-scheme-multiple-states-error-border,
+                ),
+                progress: (
+                    background: $file-upload-light-color-scheme-multiple-states-progress-background,
+                    border: $file-upload-light-color-scheme-multiple-states-progress-border,
+                ),
+                drag-n-drop: (
+                    background: $file-upload-light-color-scheme-multiple-states-drag-n-drop-background,
+                    border: $file-upload-light-color-scheme-multiple-states-drag-n-drop-border,
+                ),
+                disabled: (
+                    background: $file-upload-light-color-scheme-multiple-states-disable-background,
+                    border: $file-upload-light-color-scheme-multiple-states-disable-border,
+                )
+            )
+        )
+    );
+
     $form-field: (
         border: $form-field-light-color-scheme-border,
         background: $form-field-light-color-scheme-background,
@@ -3822,6 +3996,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-focused-outline: $link-light-color-scheme-state-focused-outline
     );
 
+    $list: (
+        footer-background: $list-light-color-scheme-footer-background,
+        footer-divider: $list-light-color-scheme-footer-divider,
+    );
+
     $loader-overlay: (
         background: $loader-overlay-light-color-scheme-background,
 
@@ -4079,6 +4258,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         popup: $popup,
         badge: $badge,
         button: $button,
+        button-toggle: $button-toggle,
         card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
@@ -4086,11 +4266,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         divider: $divider,
         dl: $dl,
         icon: $icon,
+        file-upload: $file-upload,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
         form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
+        list: $list,
         loader-overlay: $loader-overlay,
         markdown: $markdown,
         modal: $modal,
@@ -4261,6 +4443,40 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         )
     );
 
+    $button-toggle: (
+        button-toggle-group: (
+            background: $button-toggle-group-dark-color-scheme-background,
+            border: $button-toggle-group-dark-color-scheme-border,
+            states: (
+                disabled: (
+                    opacity: $button-toggle-group-dark-color-scheme-states-disabled-opacity
+                )
+            )
+        ),
+        button-toggle: (
+            color: $button-toggle-dark-color-scheme-color,
+            icon: $button-toggle-dark-color-scheme-icon,
+            states: (
+                disabled: (
+                    opacity: $button-toggle-dark-color-scheme-states-disabled-opacity
+                ),
+                hover: (
+                    background: $button-toggle-dark-color-scheme-states-hover-background,
+                    icon: $button-toggle-dark-color-scheme-states-hover-icon
+                ),
+                active: (
+                    background: $button-toggle-dark-color-scheme-states-active-background,
+                    icon: $button-toggle-dark-color-scheme-states-active-icon
+                ),
+                pressed: (
+                    background: $button-toggle-dark-color-scheme-states-pressed-background,
+                    icon: $button-toggle-dark-color-scheme-states-pressed-icon
+                )
+            )
+        )
+    );
+
+
     $card: (
         error: (
             vertical-line: $card-dark-color-scheme-error-vertical-line,
@@ -4496,6 +4712,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         )
     );
 
+    $file-upload: (
+        single: (
+            default: (
+                background: $file-upload-dark-color-scheme-single-default-background,
+                border: $file-upload-dark-color-scheme-single-default-border,
+            ),
+            states: (
+                error: (
+                    background: $file-upload-dark-color-scheme-single-states-error-background,
+                    border: $file-upload-dark-color-scheme-single-states-error-border,
+                ),
+                progress: (
+                    background: $file-upload-dark-color-scheme-single-states-progress-background,
+                    border: $file-upload-dark-color-scheme-single-states-progress-border,
+                ),
+                drag-n-drop: (
+                    background: $file-upload-dark-color-scheme-single-states-drag-n-drop-background,
+                    border: $file-upload-dark-color-scheme-single-states-drag-n-drop-border,
+                ),
+                disabled: (
+                    background: $file-upload-dark-color-scheme-single-states-disable-background,
+                    border: $file-upload-dark-color-scheme-single-states-disable-border,
+                ),
+            ),
+        ),
+        multiple: (
+            default: (
+                background: $file-upload-dark-color-scheme-multiple-default-background,
+                border: $file-upload-dark-color-scheme-multiple-default-border,
+            ),
+            states: (
+                error: (
+                    background: $file-upload-dark-color-scheme-multiple-states-error-background,
+                    border: $file-upload-dark-color-scheme-multiple-states-error-border,
+                ),
+                progress: (
+                    background: $file-upload-dark-color-scheme-multiple-states-progress-background,
+                    border: $file-upload-dark-color-scheme-multiple-states-progress-border,
+                ),
+                drag-n-drop: (
+                    background: $file-upload-dark-color-scheme-multiple-states-drag-n-drop-background,
+                    border: $file-upload-dark-color-scheme-multiple-states-drag-n-drop-border,
+                ),
+                disabled: (
+                    background: $file-upload-dark-color-scheme-multiple-states-disable-background,
+                    border: $file-upload-dark-color-scheme-multiple-states-disable-border,
+                ),
+            ),
+        )
+    );
+
     $form-field: (
         border: $form-field-dark-color-scheme-border,
         background: $form-field-dark-color-scheme-background,
@@ -4541,6 +4808,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-focused-outline: $link-dark-color-scheme-state-focused-outline
     );
 
+    $list: (
+        footer-background: $list-dark-color-scheme-footer-background,
+        footer-divider: $list-dark-color-scheme-footer-divider,
+    );
+
     $loader-overlay: (
         background: $loader-overlay-dark-color-scheme-background,
 
@@ -4798,6 +5070,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         popup: $popup,
         badge: $badge,
         button: $button,
+        button-toggle: $button-toggle,
         card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
@@ -4805,11 +5078,13 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         divider: $divider,
         dl: $dl,
         icon: $icon,
+        file-upload: $file-upload,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
         form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
+        list: $list,
         loader-overlay: $loader-overlay,
         markdown: $markdown,
         modal: $modal,
@@ -4980,6 +5255,39 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         )
     );
 
+    $button-toggle: (
+        button-toggle-group: (
+            background: map-get($tokens, 'button-toggle-group-#{$scheme}-background'),
+            border: map-get($tokens, 'button-toggle-group-#{$scheme}-border'),
+            states: (
+                disabled: (
+                    opacity: map-get($tokens, 'button-toggle-group-#{$scheme}-states-disabled-opacity')
+                )
+            ),
+        ),
+        button-toggle: (
+            color: map-get($tokens, 'button-toggle-#{$scheme}-color'),
+            icon: map-get($tokens, 'button-toggle-#{$scheme}-icon'),
+            states: (
+                disabled: (
+                    opacity: map-get($tokens, 'button-toggle-#{$scheme}-states-disabled-opacity')
+                ),
+                hover: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-hover-icon')
+                ),
+                active: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-active-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-active-icon')
+                ),
+                pressed: (
+                    background: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-background'),
+                    icon: map-get($tokens, 'button-toggle-#{$scheme}-states-pressed-icon')
+                )
+            )
+        )
+    );
+
     $card: (
         error: (
             vertical-line: map-get($tokens, 'card-#{$scheme}-error-vertical-line'),
@@ -5185,6 +5493,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         dd: map-get($tokens, 'description-list-#{$scheme}-dd')
     );
 
+    $file-upload: (
+        single: (
+            default: (
+                background: map-get($tokens, 'file-upload-#{$scheme}-single-default-background'),
+                border: map-get($tokens, 'file-upload-#{$scheme}-single-default-border'),
+            ),
+            states: (
+                error: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-error-border')
+                ),
+                progress: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-progress-border')
+                ),
+                drag-n-drop: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-drag-n-drop-border')
+                ),
+                disabled: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
+                )
+            )
+        ),
+        multiple: (
+            default: (
+                background: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-background'),
+                border: map-get($tokens, 'file-upload-#{$scheme}-multiple-default-border'),
+            ),
+            states: (
+                error: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-error-border')
+                ),
+                progress: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-progress-border')
+                ),
+                drag-n-drop: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-drag-n-drop-border')
+                ),
+                disabled: (
+                    background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
+                )
+            )
+        )
+    );
+
     $form-field: (
         border: map-get($tokens, 'form-field-#{$scheme}-border'),
         background: map-get($tokens, 'form-field-#{$scheme}-background'),
@@ -5269,6 +5628,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-focused-outline: map-get($tokens, 'link-#{$scheme}-state-focused-outline')
     );
 
+    $list: (
+        footer-background: map-get($tokens, 'list-#{$scheme}-footer-background'),
+        footer-divider: map-get($tokens, 'list-#{$scheme}-footer-divider'),
+    );
+
     $loader-overlay: (
         background: map-get($tokens, 'loader-overlay-#{$scheme}-background'),
 
@@ -5526,18 +5890,21 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         popup: $popup,
         badge: $badge,
         button: $button,
+        button-toggle: $button-toggle,
         card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
         datepicker: $datepicker,
         divider: $divider,
         dl: $dl,
+        file-upload: $file-upload,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
         form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,
+        list: $list,
         loader-overlay: $loader-overlay,
         modal: $modal,
         markdown: $markdown,
@@ -5623,7 +5990,6 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     }
 }
 
-
 $light-primary: mc-palette($light-color-scheme-primary-palette, $light-color-scheme-primary-default);
 $light-secondary: mc-palette($light-color-scheme-secondary-palette, $light-color-scheme-secondary-default);
 $light-error: mc-palette($light-color-scheme-error-palette, $light-color-scheme-error-default);
@@ -6241,168 +6607,6 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 
 
-
-
-.mc-alert {
-    display: flex;
-    align-items: baseline;
-
-    vertical-align: top;
-    text-align: left;
-
-    border: var(--mc-alert-size-border-width, $alert-size-border-width) solid transparent;
-    border-radius: var(--mc-alert-size-border-radius, $alert-size-border-radius);
-
-    .mc-link {
-        padding-left: 0;
-    }
-
-    .mc-alert__icon {
-        margin-right: var(--mc-alert-size-icon-margin, $alert-size-icon-margin);
-    }
-
-    padding: {
-        right: calc(
-            var(--mc-alert-size-horizontal-padding, #{$alert-size-horizontal-padding}) -
-            var(--mc-alert-size-border-width, #{$alert-size-border-width})
-        );
-        left: calc(
-            var(--mc-alert-size-horizontal-padding, #{$alert-size-horizontal-padding}) -
-            var(--mc-alert-size-border-width, #{$alert-size-border-width})
-        );
-    };
-
-    &:not(.mc-alert_small) {
-        padding: {
-            top: var(--mc-alert-size-vertical-padding, $alert-size-vertical-padding);
-            bottom: var(--mc-alert-size-vertical-padding, $alert-size-vertical-padding);
-        };
-    }
-
-    &.mc-alert_small {
-        padding: {
-            top: var(--mc-alert-size-small-vertical-padding, $alert-size-small-vertical-padding);
-            bottom: var(--mc-alert-size-small-vertical-padding, $alert-size-small-vertical-padding);
-        };
-    }
-
-    &.mc-alert_dismissible {
-        padding-right: calc(
-            var(--mc-alert-size-right-padding-dismissible, #{$alert-size-close-button-width}) +
-            var(--mc-alert-size-horizontal-padding, #{$alert-size-horizontal-padding})
-        );
-    }
-}
-
-.mc-alert_dismissible {
-    position: relative;
-
-    .mc-alert__close {
-        position: absolute;
-
-        z-index: 10;
-        right: 15px;
-
-        border: 1px solid transparent;
-        outline: 0;
-
-        background: transparent;
-
-        padding: 0;
-
-        cursor: pointer;
-        text-align: center;
-
-        height: auto;
-        min-height: auto;
-    }
-
-    &.mc-alert_small {
-        .mc-alert__close {
-            top: 10px;
-        }
-    }
-
-    &:not(.mc-alert_small) {
-        .mc-alert__close {
-            top: 14px;
-        }
-    }
-}
-
-@mixin alert-theme($alert) {
-    background-color: map-get($alert, background);
-    border-color: map-get($alert, border);
-
-    .mc-icon.mc-alert__icon {
-        color: map-get($alert, icon);
-    }
-}
-
-@mixin mc-alert-theme($theme) {
-    $foreground: map-get($theme, foreground);
-
-    $alert: map-get(map-get($theme, components), alert);
-
-    $is-dark: map-get($theme, is-dark);
-
-    .mc-alert__close:focus {
-        outline: none;
-    }
-
-    .mc-alert {
-        color: map-get($foreground, text);
-    }
-
-    .mc-alert_error {
-        @include alert-theme(map-get($alert, error));
-    }
-
-    .mc-alert_warning {
-        @include alert-theme(map-get($alert, warning));
-    }
-
-    .mc-alert_success {
-        @include alert-theme(map-get($alert, success));
-    }
-
-    .mc-alert_info {
-        @include alert-theme(map-get($alert, info));
-    }
-
-    .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
-        @include alert-theme(map-get($alert, default));
-    }
-}
-
-@mixin mc-alert-typography($config) {
-    .mc-alert:not(.mc-alert_small) {
-        @include mc-typography-level-to-styles($config, $alert-font-default-body);
-
-        header {
-            @include mc-typography-level-to-styles($config, $alert-font-default-header);
-        }
-    }
-
-    .mc-alert.mc-alert_small {
-        @include mc-typography-level-to-styles($config, $alert-font-small-body);
-
-        header {
-            @include mc-typography-level-to-styles($config, $alert-font-small-header);
-        }
-
-        .mc-link__text {
-            @include mc-typography-level-to-styles($config, $alert-font-small-body);
-        }
-    }
-
-    .mc-icon {
-        letter-spacing: unset;
-    }
-}
-
-
-
 /// Replace `$search` with `$replace` in `$string`
 /// @author Kitty Giraudel
 /// @param {String} $string - Initial string
@@ -6758,6 +6962,93 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 }
 
 
+
+
+
+
+@mixin mc-button-toggle-color($state) {
+    & .mc-button-overlay {
+        background: map-get($state, background);
+    }
+
+    & .mc-icon {
+        color: map-get($state, icon);
+    }
+}
+
+@mixin mc-button-toggle-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    $button-toggle-group: map-get(map-get(map-get($theme, components), button-toggle), button-toggle-group);
+    $button-toggle: map-get(map-get(map-get($theme, components), button-toggle), button-toggle);
+    $states: map-get($button-toggle, states);
+
+    .mc-button-toggle-group {
+        background: map-get($button-toggle-group, background);
+        border-color:  map-get($button-toggle-group, border);
+
+        .mc-button-toggle {
+            > .mc-button,
+            > .mc-icon-button {
+                color: map-get($button-toggle, color);
+                border-color: map-get($button-toggle-group, border);
+
+                & .mc-icon {
+                    color: map-get($button-toggle, icon);
+                }
+
+                .mc-button-overlay {
+                    background-color: unset;
+                }
+
+                &:hover:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map-get($states, hover));
+                }
+
+                &:active:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map-get($states, active));
+                }
+
+                &.mc-active {
+                    $state: map-get($states, pressed);
+
+                    background: map-get($state, background);
+                    border-color: map-get($state, background);
+
+                    & .mc-icon {
+                        color: map-get($state, icon);
+                    }
+                }
+
+                &.mc-disabled,
+                &[disabled] {
+                    opacity: map-get(map-get($states, disabled), opacity);
+                }
+
+                &.cdk-keyboard-focused {
+                    box-shadow: unset;
+                }
+            }
+
+            &.cdk-keyboard-focused {
+                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin mc-button-toggle-typography($config) {
+    .mc-button-toggle {
+        @include mc-typography-level-to-styles($config, $button-toggle-font-default);
+
+        > .mc-button,
+        > .mc-icon-button {
+            @include mc-typography-level-to-styles($config, $button-toggle-font-default);
+        }
+    }
+}
+
+
 @mixin card-type($card) {
     box-shadow:
         inset -1px 0 0 0 map-get($card, shadow),
@@ -7882,6 +8173,18 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
     }
 
+    &.mc-link_caption {
+        &.mc-text-with-icon .mc-link__text {
+            &:not(:first-child) {
+                margin-left: map-get($link, link-size-caption-icon-margin);
+            }
+
+            &:not(:last-child) {
+                margin-right: map-get($link, link-size-caption-icon-margin);
+            }
+        }
+    }
+
     &[disabled] {
         color: map-get($foreground, text-disabled);
 
@@ -8660,6 +8963,7 @@ button {
     $error: map-get($theme, error);
 
     $popup: map-get(map-get($theme, components), popup);
+    $list: map-get(map-get($theme, components), list);
 
     .mc-select {
         color: map-get($foreground, text);
@@ -8679,6 +8983,11 @@ button {
 
     .mc-select__panel {
         @include popup-params($theme);
+
+        & .mc-select__footer {
+            background: map-get($list, footer-background);
+            border-top-color: map-get($list, footer-divider);
+        }
     }
 
     .mc-select__search-container {
@@ -9280,9 +9589,6 @@ button {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    $primary: map-get($theme, primary);
-    $error: map-get($theme, error);
-
     $toggle: map-get(map-get($theme, components), toggle);
 
     .mc-toggle {
@@ -9587,6 +9893,7 @@ button {
     $foreground: map-get($theme, foreground);
 
     $error: map-get($theme, error);
+    $list: map-get(map-get($theme, components), list);
 
     .mc-tree-select {
         color: map-get($foreground, text);
@@ -9606,6 +9913,11 @@ button {
 
     .mc-tree-select__panel {
         @include popup-params($theme);
+
+        & .mc-tree-select__footer {
+            background: map-get($list, footer-background);
+            border-top-color: map-get($list, footer-divider);
+        }
     }
 }
 
@@ -9875,8 +10187,6 @@ button {
     }
 }
 
-
-
 @mixin mc-highlight-theme($theme) {
     .mc-highlight {
         color: inherit;
@@ -9947,13 +10257,176 @@ button {
 
 
 
+
+
+@mixin mc-file-upload-text-color($states) {
+    &, .mc-icon, .mc-link {
+        color: map-get($states, border);
+    }
+}
+
+@mixin mc-file-upload-color($states) {
+    background-color: map-get($states, background);
+    border-color: map-get($states, border) !important;
+}
+
+@mixin mc-file-upload-theme($theme) {
+    $file-upload: map-get(map-get($theme, components), file-upload);
+    $single: map-get($file-upload, single);
+    $single-states: map-get($single, states);
+    $multiple: map-get($file-upload, multiple);
+    $multiple-states: map-get($multiple, states);
+    $foreground: map-get($theme, foreground);
+
+    .mc-file-upload {
+        .mc-focused, .mc-link.mc-focused {
+            border: 2px solid map-get(map-get($theme, states), focused-color);
+        }
+    }
+
+    .mc-single-file-upload {
+        .mc-file-upload {
+            @include mc-file-upload-color(map-get($single, default));
+
+            &.dragover {
+                @include mc-file-upload-color(map-get($single-states, drag-n-drop));
+            }
+
+            &.mc-error:not(.disabled) {
+                &:not(.dragover) {
+                    @include mc-file-upload-color(map-get($single-states, error));
+                }
+
+                *, .mc-icon {
+                    color: map-get($foreground, text-error);
+                }
+            }
+
+            &.disabled {
+                @include mc-file-upload-color(map-get($single-states, disabled));
+
+                @include mc-file-upload-text-color(map-get($single-states, disabled));
+            }
+        }
+    }
+
+    .mc-multiple-file-upload {
+        .mc-file-upload {
+            @include mc-file-upload-color(map-get($multiple, default));
+
+            .btn-upload {
+                .dropzone {
+                    border-top-color: map-get(map-get($multiple, default), border);
+                }
+            }
+
+            .mc-file-multiple-uploaded__header {
+                border-bottom-color: map-get(map-get($multiple, default), border);
+
+                &-inner {
+                    color: map-get($foreground, text-less-contrast);
+                }
+            }
+
+            &.dragover {
+                @include mc-file-upload-color(map-get($multiple-states, drag-n-drop));
+
+                .mc-file-multiple-uploaded__header {
+                    border-bottom-color: map-get(map-get($multiple-states, drag-n-drop), background) !important;
+                }
+
+                &.selected {
+                    .dropzone {
+                        border-top-color: map-get(map-get($multiple-states, drag-n-drop), border);
+                    }
+                }
+            }
+
+            &.disabled {
+                @include mc-file-upload-color(map-get($multiple-states, disabled));
+
+                @include mc-file-upload-text-color(map-get($multiple-states, disabled));
+
+                &.selected {
+                    .dropzone {
+                        border-top-color: map-get(map-get($multiple-states, disabled), border);
+                    }
+                }
+            }
+
+            &:not(.disabled) {
+                .mc-file-upload__row.error {
+                    *, .mc-icon {
+                        color: map-get($foreground, text-error);
+                    }
+                }
+            }
+
+            .multiple__uploaded-item {
+                .mc-list-text {
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+
+    .mc-single-file-upload, .mc-multiple-file-upload {
+        .mc-file-upload__hint:not(.mc-error) {
+            color: map-get($foreground, text-less-contrast);
+        }
+    }
+}
+
+
+@mixin mc-file-upload-typography($config) {
+    .mc-single-file-upload {
+        @include mc-typography-level-to-styles($config, $file-upload-font-single);
+    }
+
+    .mc-multiple-file-upload {
+        .multiple__header {
+            @include mc-typography-level-to-styles($config, $file-upload-font-multiple-header);
+        }
+
+        .multiple__caption {
+            &, .mc-link {
+                @include mc-typography-level-to-styles($config, $file-upload-font-multiple-caption);
+            }
+        }
+
+        .mc-file-multiple-uploaded__header {
+            @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-header);
+        }
+
+        .multiple__uploaded-item {
+            @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-item);
+        }
+
+
+        .mc-file-upload {
+            .mc-list-item,
+            .mc-list-option {
+                @include mc-typography-level-to-styles($config, $file-upload-font-multiple-uploaded-item);
+            }
+        }
+    }
+
+    .mc-single-file-upload, .mc-multiple-file-upload {
+        .mc-file-upload__hint {
+            @include mc-typography-level-to-styles($config, $form-field-hint-font-default);
+        }
+    }
+}
+
+
+
 @mixin mosaic-theme($theme) {
     @include mc-core-theme($theme);
 
-    @include mc-alert-theme($theme);
     @include mc-autocomplete-theme($theme);
     @include mc-badge-theme($theme);
     @include mc-button-theme($theme);
+    @include mc-button-toggle-theme($theme);
     @include mc-card-theme($theme);
     @include mc-checkbox-theme($theme);
     @include mc-code-block-theme($theme);
@@ -9994,8 +10467,10 @@ button {
     @include mc-tree-select-theme($theme);
     @include mc-tree-theme($theme);
     @include mc-table-theme($theme);
+    @include mc-file-upload-theme($theme);
 }
 
+
 @mixin mosaic-typography($config: null, $md-config: null) {
     @if $config == null {
         $config: mc-typography-config();
@@ -10008,9 +10483,9 @@ button {
     @include mc-base-typography($config);
     @include mc-markdown-base-typography($md-config);
 
-    @include mc-alert-typography($config);
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
+    @include mc-button-toggle-typography($config);
     @include mc-checkbox-typography($config);
     @include mc-code-block-typography($config);
     @include mc-datepicker-typography($config);
@@ -10040,6 +10515,7 @@ button {
     @include mc-tree-select-typography($config);
     @include mc-tree-typography($config);
     @include mc-table-typography($config);
+    @include mc-file-upload-typography($config);
 
     @include mc-markdown-typography($md-config);
 }