@ptsecurity/mosaic 13.6.2 → 13.8.4

package/_theming.scss

@@ -148,7 +148,7 @@ $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
 $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
 $dark-color-scheme-states-focused-color: #4187ff;
 $dark-color-scheme-states-focused-color-error: #b9023a;
-$dark-color-scheme-states-selected-color: #014b9d;
+$dark-color-scheme-states-selected-color: #023c7f;
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.3;
 $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
@@ -167,6 +167,24 @@ $size-4xl: 40px;
 $size-5xl: 48px;
 $size-6xl: 56px;
 $size-7xl: 64px;
+$size-border-width: 1px;
+$size-border-radius: 4px;
+$size-option-height: 32px;
+$size-panel-height: 48px;
+$size-control-s-height: 16px;
+$size-control-m-height: 32px;
+$size-button-min-width: 64px;
+$size-badge-tag-height: 24px;
+$size-header-height: 56px;
+$size-footer-height: 64px;
+$padding-control-horizontal: 16px;
+$padding-option-horizontal: 16px;
+$padding-badge-tag-horizontal: 8px;
+$padding-header-right: 8px;
+$padding-header-footer-horizontal: 16px;
+$margin-control-group-s-vertical: 8px;
+$margin-icon-text-m-horizontal: 8px;
+$margin-icon-text-s-horizontal: 4px;
 $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
@@ -427,7 +445,7 @@ $badge-light-color-scheme-pastel-primary-background: #eff6ff;
 $badge-light-color-scheme-pastel-primary-border: #a2c7fe;
 $badge-light-color-scheme-pastel-primary-color: #4187ff;
 $badge-light-color-scheme-pastel-info-background: #ebf8fd;
-$badge-light-color-scheme-pastel-info-border: #a2c7fe;
+$badge-light-color-scheme-pastel-info-border: #6ed3f2;
 $badge-light-color-scheme-pastel-info-color: #2099b7;
 $badge-light-color-scheme-pastel-success-background: #ecf9ef;
 $badge-light-color-scheme-pastel-success-border: #8ed5a1;
@@ -527,7 +545,7 @@ $button-dark-color-scheme-primary-background: #0059b8;
 $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: #0374eb;
+$button-dark-color-scheme-primary-transparent-color: #5697ff;
 $button-dark-color-scheme-primary-transparent-icon: #5697ff;
 $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
@@ -580,6 +598,7 @@ $card-dark-color-scheme-info-background: #143641;
 $card-dark-color-scheme-info-shadow: #084453;
 $card-size-vertical-line: 4px;
 $checkbox-light-color-scheme-default-border: #bdc7d1;
+$checkbox-light-color-scheme-default-color: white;
 $checkbox-light-color-scheme-default-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -589,6 +608,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-background: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0374eb;
 $checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
 $checkbox-light-color-scheme-error-border: #db3c55;
+$checkbox-light-color-scheme-error-color: white;
 $checkbox-light-color-scheme-error-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -598,6 +618,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-background: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3c55;
 $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
 $checkbox-dark-color-scheme-default-border: #515e69;
+$checkbox-dark-color-scheme-default-color: white;
 $checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
@@ -607,6 +628,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
 $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;
+$checkbox-dark-color-scheme-error-color: white;
 $checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
 $checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
 $checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
@@ -625,7 +647,7 @@ $datepicker-toggle-size-height: 30px;
 $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
 $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
 $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
-$datepicker-body-dark-color-scheme-states-selected-background: #014b9d;
+$datepicker-body-dark-color-scheme-states-selected-background: #023c7f;
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;
@@ -790,13 +812,13 @@ $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: #4187ff;
+$link-dark-color-scheme-text: #5697ff;
 $link-dark-color-scheme-border-bottom: rgba(#6d7a86, 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: #0374eb;
-$link-dark-color-scheme-state-hover-border-bottom: rgba(#0374eb, 0.32);
-$link-dark-color-scheme-state-active: #0059b8;
+$link-dark-color-scheme-state-hover-text: #4187ff;
+$link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
+$link-dark-color-scheme-state-active: #0374eb;
 $link-dark-color-scheme-state-focused-outline: #4187ff;
 $link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
@@ -806,6 +828,17 @@ $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-font-item: body;
+$loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
+$loader-overlay-light-color-scheme-text: #19252f;
+$loader-overlay-light-color-scheme-caption: #6d7a86;
+$loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
+$loader-overlay-dark-color-scheme-text: #f2f5f9;
+$loader-overlay-dark-color-scheme-caption: #8c99a5;
+$loader-overlay-size-text-max-width: 480px;
+$loader-overlay-size-fixed-top-padding: 72px;
+$loader-overlay-size-center-optical-compensation: -40%;
+$loader-overlay-font-text: body;
+$loader-overlay-font-caption: caption;
 $modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
 $modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
 $modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(39, 51, 62, 0.16);
@@ -920,19 +953,22 @@ $progress-bar-size-height: 4px;
 $progress-spinner-size-size: 16px;
 $radio-light-color-scheme-outer-circle-border: #bdc7d1;
 $radio-light-color-scheme-inner-circle-border: transparent;
+$radio-light-color-scheme-cap-color: white;
 $radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
-$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px white;
+$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-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 1px #19252f;
-$radio-size-size: 14px;
+$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
+$radio-size-outer-size: 14px;
+$radio-size-inner-size: 10px;
 $radio-size-cap-size: 6px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
@@ -999,9 +1035,9 @@ $vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
 $vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
 $vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
 $vertical-tabs-dark-color-scheme-state-normal-background: transparent;
-$vertical-tabs-dark-color-scheme-state-selected-background: #014b9d;
+$vertical-tabs-dark-color-scheme-state-selected-background: #023c7f;
 $vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
-$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#023c7f, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -1029,7 +1065,7 @@ $tags-light-color-scheme-error-states-focused: #db3c55;
 $tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
 $tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
 $tags-light-color-scheme-error-states-disabled-border: transparent;
-$tags-dark-color-scheme-primary-background: #023c7f;
+$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;
@@ -1074,6 +1110,41 @@ $textarea-size-padding: 5px 12px;
 $textarea-font-default: body;
 $textarea-font-mono: body-mono;
 $timepicker-size-padding-right: 16px;
+$toast-light-color-scheme-background: white;
+$toast-light-color-scheme-border: #bdc7d1;
+$toast-light-color-scheme-text: #19252f;
+$toast-light-color-scheme-text-caption: #6d7a86;
+$toast-light-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-light-color-scheme-icon-info: #18a5c5;
+$toast-light-color-scheme-icon-error: #ee6f79;
+$toast-light-color-scheme-icon-success: #4ba96c;
+$toast-light-color-scheme-icon-warning: #e19f12;
+$toast-dark-color-scheme-background: #333f4a;
+$toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
+$toast-dark-color-scheme-text: #f2f5f9;
+$toast-dark-color-scheme-text-caption: #8c99a5;
+$toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-dark-color-scheme-icon-info: #18a5c5;
+$toast-dark-color-scheme-icon-error: #ee6f79;
+$toast-dark-color-scheme-icon-success: #4ba96c;
+$toast-dark-color-scheme-icon-warning: #e19f12;
+$toast-size-border-width: 1px;
+$toast-size-border-radius: 3px;
+$toast-size-width: 360px;
+$toast-size-padding-vertical: 12px;
+$toast-size-padding-left: 12px;
+$toast-size-padding-right: 16px;
+$toast-size-close-button-width: 32px;
+$toast-size-close-button-margin: 8px;
+$toast-size-icon-margin: 8px;
+$toast-size-caption-margin: 8px;
+$toast-size-actionbar-margin: 8px;
+$toast-size-actionbar-gap: 12px;
+$toast-size-vertical-margin: 16px;
+$toast-size-horizontal-margin: 16px;
+$toast-size-gap: 12px;
+$toast-font-title: body;
+$toast-font-caption: body;
 $toggle-light-color-scheme-border: #bdc7d1;
 $toggle-light-color-scheme-background: white;
 $toggle-light-color-scheme-circle-border: #bdc7d1;
@@ -2806,6 +2877,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $checkbox: (
         primary: (
             border: $checkbox-light-color-scheme-default-border,
+            color: $checkbox-light-color-scheme-default-color,
 
             checked: (
                 border: $checkbox-light-color-scheme-default-states-checked-border,
@@ -2824,6 +2896,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         ),
         error: (
             border: $checkbox-light-color-scheme-error-border,
+            color: $checkbox-light-color-scheme-error-color,
 
             checked: (
                 border: $checkbox-light-color-scheme-error-states-checked-border,
@@ -2896,6 +2969,13 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-focused-outline: $link-light-color-scheme-state-focused-outline
     );
 
+    $loader-overlay: (
+        background: $loader-overlay-light-color-scheme-background,
+
+        text: $loader-overlay-light-color-scheme-text,
+        caption: $loader-overlay-light-color-scheme-caption,
+    );
+
     $modal: (
         background-mask: $modal-light-color-scheme-background-mask,
         shadow: $modal-light-color-scheme-shadow,
@@ -2947,6 +3027,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $radio: (
         outer-circle_border: $radio-light-color-scheme-outer-circle-border,
         inner-circle_border: $radio-light-color-scheme-inner-circle-border,
+        cap-color: $radio-light-color-scheme-cap-color,
 
         outer-circle_checked-state_border: $radio-light-color-scheme-states-checked-outer-circle-border,
         outer-circle_focused-state_border: $radio-light-color-scheme-states-focused-outer-circle-border,
@@ -3042,6 +3123,19 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         )
     );
 
+    $toast: (
+        background: $toast-light-color-scheme-background,
+        border: $toast-light-color-scheme-border,
+        text: $toast-light-color-scheme-text,
+        text-caption: $toast-light-color-scheme-text-caption,
+        shadow: $toast-light-color-scheme-shadow,
+
+        icon_info: $toast-light-color-scheme-icon-info,
+        icon_error: $toast-light-color-scheme-icon-error,
+        icon_success: $toast-light-color-scheme-icon-success,
+        icon_warning: $toast-light-color-scheme-icon-warning
+    );
+
     $tooltip: (
         background: $tooltip-light-color-scheme-background,
         color: $tooltip-light-color-scheme-text,
@@ -3077,6 +3171,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
+        loader-overlay: $loader-overlay,
         modal: $modal,
         navbar: $navbar,
         navbar-item: $navbar-item,
@@ -3087,6 +3182,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         tabs: $tabs,
         vertical-tabs: $vertical-tabs,
         tags: $tags,
+        toast: $toast,
         toggle: $toggle,
         tooltip: $tooltip
     );
@@ -3358,6 +3454,13 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-focused-outline: $link-dark-color-scheme-state-focused-outline
     );
 
+    $loader-overlay: (
+        background: $loader-overlay-dark-color-scheme-background,
+
+        text: $loader-overlay-dark-color-scheme-text,
+        caption: $loader-overlay-dark-color-scheme-caption,
+    );
+
     $modal: (
         background-mask: $modal-dark-color-scheme-background-mask,
         shadow: $modal-dark-color-scheme-shadow,
@@ -3409,6 +3512,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $radio: (
         outer-circle_border: $radio-dark-color-scheme-outer-circle-border,
         inner-circle_border: $radio-dark-color-scheme-inner-circle-border,
+        cap-color: $radio-dark-color-scheme-cap-color,
 
         outer-circle_checked-state_border: $radio-dark-color-scheme-states-checked-outer-circle-border,
         outer-circle_focused-state_border: $radio-dark-color-scheme-states-focused-outer-circle-border,
@@ -3504,6 +3608,19 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         )
     );
 
+    $toast: (
+        background: $toast-dark-color-scheme-background,
+        border: $toast-dark-color-scheme-border,
+        text: $toast-dark-color-scheme-text,
+        text-caption: $toast-dark-color-scheme-text-caption,
+        shadow: $toast-dark-color-scheme-shadow,
+
+        icon_info: $toast-dark-color-scheme-icon-info,
+        icon_error: $toast-dark-color-scheme-icon-error,
+        icon_success: $toast-dark-color-scheme-icon-success,
+        icon_warning: $toast-dark-color-scheme-icon-warning
+    );
+
     $tooltip: (
         background: $tooltip-dark-color-scheme-background,
         color: $tooltip-dark-color-scheme-text,
@@ -3539,6 +3656,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
+        loader-overlay: $loader-overlay,
         modal: $modal,
         navbar: $navbar,
         navbar-item: $navbar-item,
@@ -3549,6 +3667,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         tabs: $tabs,
         vertical-tabs: $vertical-tabs,
         tags: $tags,
+        toast: $toast,
         toggle: $toggle,
         tooltip: $tooltip
     );
@@ -3720,6 +3839,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 @mixin mc-pseudo-checkbox-color($states) {
     border-color: map-get($states, border);
 
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        color: map-get($states, color);
+    }
+
     &.mc-checked,
     &.mc-indeterminate {
         border-color: map-get($states, checked, border);
@@ -3737,26 +3861,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     .mc-pseudo-checkbox {
         border-color: map-get($checkbox, border);
 
-        & .mc-checkbox-checkmark,
-        & .mc-checkbox-mixedmark {
-            color: map-get($background, background);
-        }
-
         &.mc-primary {
-            & .mc-checkbox-checkmark,
-            & .mc-checkbox-mixedmark {
-                color: map-get($foreground, primary);
-            }
-
             @include mc-pseudo-checkbox-color(map-get($checkbox, primary));
         }
 
         &.mc-error {
-            & .mc-checkbox-checkmark,
-            & .mc-checkbox-mixedmark {
-                color: map-get($foreground, error);
-            }
-
             @include mc-pseudo-checkbox-color(map-get($checkbox, error));
         }
 
@@ -4249,6 +4358,10 @@ $fonts: (
             @include mc-badge-color(map-get($badge, success_pastel));
         }
 
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_pastel));
+        }
+
         &.mc-badge_warning {
             @include mc-badge-color(map-get($badge, warning_pastel));
         }
@@ -4553,6 +4666,11 @@ $fonts: (
         border-color: map-get($states, border);
 
         background-color: map-get($states, background);
+
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map-get($states, color);
+        }
     }
 
     &.mc-checked,
@@ -4594,15 +4712,6 @@ $fonts: (
 
     $checkbox: map-get(map-get($theme, components), checkbox);
 
-    .mc-checkbox-frame {
-        border-color: map-get($checkbox, border);
-
-        & .mc-checkbox-checkmark,
-        & .mc-checkbox-mixedmark {
-            color: map-get($background, background);
-        }
-    }
-
     .mc-checkbox {
         &:hover {
             .mc-checkbox-frame {
@@ -4879,6 +4988,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    $primary: map-get($theme, primary);
     $second: map-get($theme, second);
     $error: map-get($theme, error);
 
@@ -4912,10 +5022,6 @@ $mc-datepicker-today-fade-amount: 0.2;
                         color: mc-color($error);
                     }
                 }
-
-                & .mc-hint {
-                    color: mc-color($error);
-                }
             }
 
             &.cdk-focused {
@@ -4945,6 +5051,20 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
     }
 
+    .mc-hint {
+        &.mc-primary {
+            color: mc-color($primary);
+        }
+
+        &.mc-second {
+            color: mc-color($second);
+        }
+
+        &.mc-error {
+            color: mc-color($error);
+        }
+    }
+
     .mc-password-hint {
         $password-hint: map-get(map-get($theme, components), form-field-password-hint);
 
@@ -5254,6 +5374,40 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin mc-loader-overlay-theme($theme) {
+    $background: map-get($theme, background);
+    $primary: map-get($theme, primary);
+
+    $loader-overlay: map-get(map-get($theme, components), loader-overlay);
+
+    .mc-loader-overlay {
+        background: map-get($loader-overlay, background);
+    }
+
+    .mc-loader-overlay-text {
+        color: map-get($loader-overlay, text);
+    }
+
+    .mc-loader-overlay-caption {
+        color: map-get($loader-overlay, caption);
+    }
+}
+
+@mixin mc-loader-overlay-typography($config) {
+    .mc-loader-overlay-text {
+        @include mc-typography-level-to-styles($config, $loader-overlay-font-text);
+    }
+
+    .mc-loader-overlay-caption {
+        @include mc-typography-level-to-styles($config, $loader-overlay-font-caption);
+    }
+}
+
+
+
+
+
+
 @mixin mc-modal-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -5594,25 +5748,11 @@ button {
             }
         }
 
-        &.mc-selected {
-            & .mc-radio-button__outer-circle {
-                border-color: map-get($radio, outer-circle_checked-state_border);
-            }
-
-            & .mc-radio-button__inner-circle {
-                display: flex;
-                background-color: map-get($radio, inner-circle_checked-state_border);
-
-                .mc-radio-button__inner-circle-cap {
-                    background: map-get($background, background);
-                }
-            }
-        }
-
         &.cdk-keyboard-focused {
             & .mc-radio-button__outer-circle {
                 border-color: map-get($radio, outer-circle_focused-state_border);
                 box-shadow: map-get($radio, outer-circle_focused-state_shadow);
+                background: map-get($background, background);
             }
 
             & .mc-radio-button__inner-circle {
@@ -5634,7 +5774,33 @@ button {
 
             & .mc-radio-button__inner-circle {
                 border-color: map-get($background, background-disabled);
-                background: map-get($foreground, text-disabled);
+                background: map-get($background, background-disabled);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($background, background-disabled);
+                }
+            }
+
+            &.mc-selected {
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($foreground, border);
+                }
+            }
+        }
+        
+        &.mc-selected:not(.mc-disabled) {
+            & .mc-radio-button__outer-circle {
+                border-color: map-get($radio, outer-circle_checked-state_border);
+                background: map-get($radio, inner-circle_checked-state_border);
+            }
+
+            & .mc-radio-button__inner-circle {
+                display: flex;
+                background-color: map-get($radio, inner-circle_checked-state_border);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($radio, cap-color);
+                }
             }
         }
     }
@@ -6013,7 +6179,7 @@ button {
         box-shadow: 0 0 0 1px map-get($params, focused);
     }
 
-    & .mc-icon {
+    &:not(.mc-disabled) .mc-icon {
         color: map-get($params, icon);
 
         &.mc-tag-remove:hover {
@@ -6154,6 +6320,64 @@ button {
 
 
 
+@mixin mc-toast-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $toast: map-get(map-get($theme, components), toast);
+
+    .mc-toast {
+        &.mc-toast_info .mc-toast__icon {
+            color: map-get($toast, icon_info);
+        }
+
+        &.mc-toast_success .mc-toast__icon {
+            color: map-get($toast, icon_success);
+        }
+
+        &.mc-toast_warning .mc-toast__icon {
+            color: map-get($toast, icon_warning);
+        }
+
+        &.mc-toast_error .mc-toast__icon {
+            color: map-get($toast, icon_error);
+        }
+    }
+
+    .mc-toast__wrapper {
+        border-color: map-get($toast, border);
+
+        background: map-get($toast, background);
+
+        box-shadow: map-get($toast, shadow);
+    }
+
+    .mc-toast__title {
+        color: map-get($toast, text);
+    }
+
+    .mc-toast__caption {
+        color: map-get($toast, text-caption);
+    }
+}
+
+@mixin mc-toast-typography($config) {
+    .mc-toast {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    .mc-toast__title {
+        @include mc-typography-level-to-styles($config, $toast-font-title);
+    }
+
+    .mc-toast__caption {
+        @include mc-typography-level-to-styles($config, $toast-font-caption);
+    }
+}
+
+
+
+
+
 @mixin mc-toggle-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -6640,6 +6864,7 @@ button {
     @include mc-input-typography($config);
     @include mc-link-typography($config);
     @include mc-list-typography($config);
+    @include mc-loader-overlay-typography($config);
     @include mc-modal-typography($config);
     @include mc-navbar-typography($config);
     @include mc-option-typography($config);
@@ -6651,6 +6876,7 @@ button {
     @include mc-tabs-typography($config);
     @include mc-tag-typography($config);
     @include mc-textarea-typography($config);
+    @include mc-toast-typography($config);
     @include mc-toggle-typography($config);
     @include mc-tooltip-typography($config);
     @include mc-tree-select-typography($config);
@@ -6873,6 +7099,7 @@ button {
 
 
 
+
 @mixin mc-progress-bar-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
@@ -7032,6 +7259,7 @@ button {
 
 
 
+
 @mixin mc-option-action-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -7116,6 +7344,7 @@ button {
     @include mc-input-theme($theme);
     @include mc-link-theme($theme);
     @include mc-list-theme($theme);
+    @include mc-loader-overlay-theme($theme);
     @include mc-modal-theme($theme);
     @include mc-navbar-theme($theme);
     @include mc-option-theme($theme);
@@ -7132,6 +7361,7 @@ button {
     @include mc-tabs-theme($theme);
     @include mc-tag-theme($theme);
     @include mc-textarea-theme($theme);
+    @include mc-toast-theme($theme);
     @include mc-toggle-theme($theme);
     @include mc-tooltip-theme($theme);
     @include mc-tree-select-theme($theme);