@ptsecurity/mosaic 14.2.2 → 14.2.3

package/_theming.scss

@@ -3740,6 +3740,10 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 }
 
 
+
+
+
+
 @function mc-typography-level(
     $font-size,
     $line-height: $font-size,
@@ -3816,138 +3820,120 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 
 
+@function mc-typography-config() {
+    $font-family: $font-family-base;
+    $typography: map-get($mosaic, typography);
 
-.mc-badge {
-    display: inline-flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-
-    text-align: center;
-    white-space: nowrap;
-
-    border-style: solid;
-
-    box-sizing: border-box;
-
-    &.mc-badge_default {
-        height: var(--mc-badge-size-default-height, $badge-size-default-height);
-        min-width: var(--mc-badge-size-default-min-width, $badge-size-default-min-width);
-        padding: var(--mc-badge-size-default-padding, $badge-size-default-padding);
-        border: {
-            width: var(--mc-badge-size-default-border-width, $badge-size-default-border-width);
-            radius: var(--mc-badge-size-default-border-radius, $badge-size-default-border-radius);
-        }
-    }
+    $config: (
+        display-1:          map-get($typography, display-1),
+        display-2:          map-get($typography, display-2),
+        display-3:          map-get($typography, display-3),
+
+        headline:           map-get($typography, headline),
+        subheading:         map-get($typography, subheading),
+        title:              map-get($typography, title),
+
+        body:               map-get($typography, body),
+        body-strong:        map-get($typography, body-strong),
+        body-caps:          map-get($typography, body-caps),
+        body-mono:          map-get($typography, body-mono),
+        body-tabular:       map-get($typography, body-tabular),
+
+        caption:            map-get($typography, caption),
+        caption-strong:     map-get($typography, caption-strong),
+        caption-caps:       map-get($typography, caption-caps),
+        caption-mono:       map-get($typography, caption-mono),
+        caption-tabular:    map-get($typography, caption-tabular),
+
+        small-text:         map-get($typography, small-text),
+        extra-small-text:   map-get($typography, extra-small-text),
+        extra-small-text-caps:   map-get($typography, extra-small-text-caps),
+        extra-small-text-mono:   map-get($typography, extra-small-text-mono)
+    );
 
-    &.mc-badge_mini {
-        height: var(--mc-badge-size-mini-height, $badge-size-mini-height);
-        min-width: var(--mc-badge-size-mini-min-width, $badge-size-mini-min-width);
-        padding: var(--mc-badge-size-mini-padding, $badge-size-mini-padding);
-        border: {
-            width: var(--mc-badge-size-mini-border-width, $badge-size-mini-border-width);
-            radius: var(--mc-badge-size-mini-border-radius, $badge-size-mini-border-radius);
+    @each $key, $level in $config {
+        @if map-get($level, font-family) == null {
+            $new-level: map-merge($level, (font-family: $font-family));
+            $config: map-merge($config, ($key: $new-level));
         }
-
     }
-}
 
-
-@mixin mc-badge-color($params) {
-    color: map-get($params, color);
-    border-color: map-get($params, border);
-    background: map-get($params, background);
+    // Add the base font family to the config.
+    @return map-merge($config, (font-family: $font-family));
 }
 
-@mixin mc-badge-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $badge: map-get(map-get($theme, components), badge);
 
-    .mc-badge {
-        color: map-get($foreground, text);
-        border-color: map-get($foreground, border);
+@mixin mc-base-typography($config) {
+    .mc-display-1 {
+        @include mc-typography-level-to-styles($config, display-1);
     }
 
-    .mc-badge_solid {
-        &.mc-badge_primary {
-            @include mc-badge-color(map-get($badge, primary_solid));
-        }
-
-        &.mc-badge_second {
-            @include mc-badge-color(map-get($badge, second_solid));
-        }
-
-        &.mc-badge_transparent {
-            @include mc-badge-color(map-get($badge, transparent_solid));
-        }
+    .mc-display-2 {
+        @include mc-typography-level-to-styles($config, display-2);
+    }
 
-        &.mc-badge_success {
-            @include mc-badge-color(map-get($badge, success_solid));
-        }
+    .mc-display-3 {
+        @include mc-typography-level-to-styles($config, display-3);
+    }
 
-        &.mc-badge_info {
-            @include mc-badge-color(map-get($badge, info_solid));
-        }
+    .mc-headline {
+        @include mc-typography-level-to-styles($config, headline);
+    }
 
-        &.mc-badge_warning {
-            @include mc-badge-color(map-get($badge, warning_solid));
-        }
+    .mc-subheading {
+        @include mc-typography-level-to-styles($config, subheading);
+    }
 
-        &.mc-badge_error {
-            @include mc-badge-color(map-get($badge, error_solid));
-        }
+    .mc-title {
+        @include mc-typography-level-to-styles($config, title);
+    }
 
-        &.mc-badge_light {
-            @include mc-badge-color(map-get($badge, light_solid));
-        }
+    .mc-body {
+        @include mc-typography-level-to-styles($config, body);
     }
 
-    .mc-badge_pastel {
-        &.mc-badge_primary {
-            @include mc-badge-color(map-get($badge, primary_pastel));
-        }
+    .mc-body_tabular {
+        @include mc-typography-level-to-styles($config, body-tabular);
+    }
 
-        &.mc-badge_success {
-            @include mc-badge-color(map-get($badge, success_pastel));
-        }
+    .mc-body_strong {
+        @include mc-typography-level-to-styles($config, body-strong);
+    }
 
-        &.mc-badge_info {
-            @include mc-badge-color(map-get($badge, info_pastel));
-        }
+    .mc-body_caps {
+        @include mc-typography-level-to-styles($config, body-caps);
+    }
 
-        &.mc-badge_warning {
-            @include mc-badge-color(map-get($badge, warning_pastel));
-        }
+    .mc-body_mono {
+        @include mc-typography-level-to-styles($config, body-mono);
+    }
 
-        &.mc-badge_error {
-            @include mc-badge-color(map-get($badge, error_pastel));
-        }
+    .mc-caption {
+        @include mc-typography-level-to-styles($config, caption);
     }
-}
 
-@mixin mc-badge-typography($config) {
-    .mc-badge_default {
-        @include mc-typography-level-to-styles($config, $badge-font-default-default);
+    .mc-caption_tabular {
+        @include mc-typography-level-to-styles($config, caption-tabular);
+    }
 
-        &.mc-badge_caps {
-            @include mc-typography-level-to-styles($config, $badge-font-default-caps);
-        }
+    .mc-caption_strong {
+        @include mc-typography-level-to-styles($config, caption-strong);
+    }
 
-        &.mc-badge_mono {
-            @include mc-typography-level-to-styles($config, $badge-font-default-mono);
-        }
+    .mc-caption_caps {
+        @include mc-typography-level-to-styles($config, caption-caps);
     }
 
-    .mc-badge_mini {
-        @include mc-typography-level-to-styles($config, $badge-font-mini-default);
+    .mc-caption_mono {
+        @include mc-typography-level-to-styles($config, caption-mono);
+    }
 
-        &.mc-badge_caps {
-            @include mc-typography-level-to-styles($config, $badge-font-mini-caps);
-        }
+    .mc-small-text {
+        @include mc-typography-level-to-styles($config, small-text);
+    }
 
-        &.mc-badge_mono {
-            @include mc-typography-level-to-styles($config, $badge-font-mini-mono);
-        }
+    .mc-extra-small-text {
+        @include mc-typography-level-to-styles($config, extra-small-text);
     }
 }
 
@@ -3956,9 +3942,6 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 
 
-
-
-
 .mc-alert {
     display: flex;
     align-items: baseline;
@@ -4115,86 +4098,268 @@ $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);
 
-        background: map-get($states, checked, background);
-    }
-}
+.mc-badge {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
 
-@mixin mc-pseudo-checkbox-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+    text-align: center;
+    white-space: nowrap;
 
-    $checkbox: map-get(map-get($theme, components), checkbox);
+    border-style: solid;
 
-    .mc-pseudo-checkbox {
-        &.mc-primary {
-            @include mc-pseudo-checkbox-color(map-get($checkbox, default));
-        }
+    box-sizing: border-box;
 
-        &.mc-error {
-            @include mc-pseudo-checkbox-color(map-get($checkbox, error));
+    &.mc-badge_default {
+        height: var(--mc-badge-size-default-height, $badge-size-default-height);
+        min-width: var(--mc-badge-size-default-min-width, $badge-size-default-min-width);
+        padding: var(--mc-badge-size-default-padding, $badge-size-default-padding);
+        border: {
+            width: var(--mc-badge-size-default-border-width, $badge-size-default-border-width);
+            radius: var(--mc-badge-size-default-border-radius, $badge-size-default-border-radius);
         }
+    }
 
-        &.mc-disabled,
-        &.mc-primary.mc-disabled,
-        &.mc-error.mc-disabled {
-            border-color: map-get($foreground, border);
-
-            background-color: map-get($background, background-disabled);
-
-            & .mc-checkbox-checkmark,
-            & .mc-checkbox-mixedmark {
-                color: map-get($foreground, text-disabled);
-            }
+    &.mc-badge_mini {
+        height: var(--mc-badge-size-mini-height, $badge-size-mini-height);
+        min-width: var(--mc-badge-size-mini-min-width, $badge-size-mini-min-width);
+        padding: var(--mc-badge-size-mini-padding, $badge-size-mini-padding);
+        border: {
+            width: var(--mc-badge-size-mini-border-width, $badge-size-mini-border-width);
+            radius: var(--mc-badge-size-mini-border-radius, $badge-size-mini-border-radius);
         }
+
     }
 }
 
-@mixin popup-params($theme) {
-    $popup: map-get(map-get($theme, components), popup);
-
-    box-shadow: map-get($popup, shadow);
-    border-color: map-get($popup, border);
 
-    background-color: map-get($popup, background);
+@mixin mc-badge-color($params) {
+    color: map-get($params, color);
+    border-color: map-get($params, border);
+    background: map-get($params, background);
 }
 
+@mixin mc-badge-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $badge: map-get(map-get($theme, components), badge);
 
+    .mc-badge {
+        color: map-get($foreground, text);
+        border-color: map-get($foreground, border);
+    }
 
+    .mc-badge_solid {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_solid));
+        }
 
-@mixin mc-autocomplete-theme($theme) {
-    $foreground: map-get($theme, foreground);
+        &.mc-badge_second {
+            @include mc-badge-color(map-get($badge, second_solid));
+        }
 
-    .mc-autocomplete-panel {
-        @include popup-params($theme);
+        &.mc-badge_transparent {
+            @include mc-badge-color(map-get($badge, transparent_solid));
+        }
 
-        color: mc-color($foreground, text);
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_solid));
+        }
 
-        .mc-selected {
-            $popup: map-get(map-get($theme, components), popup);
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_solid));
+        }
 
-            background-color: map-get($popup, background);
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_solid));
         }
-    }
-}
 
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_solid));
+        }
 
+        &.mc-badge_light {
+            @include mc-badge-color(map-get($badge, light_solid));
+        }
+    }
 
+    .mc-badge_pastel {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_pastel));
+        }
 
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_pastel));
+        }
 
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_pastel));
+        }
 
-@mixin mc-button-color($params) {
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_pastel));
+        }
+
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_pastel));
+        }
+    }
+}
+
+@mixin mc-badge-typography($config) {
+    .mc-badge_default {
+        @include mc-typography-level-to-styles($config, $badge-font-default-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-default-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-default-mono);
+        }
+    }
+
+    .mc-badge_mini {
+        @include mc-typography-level-to-styles($config, $badge-font-mini-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-mono);
+        }
+    }
+}
+
+
+
+
+
+@mixin mc-forms-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $forms: map-get(map-get($theme, components), forms);
+
+    .mc-form__label {
+        color: map-get($forms, label);
+    }
+
+    .mc-form__legend {
+        color: map-get($forms, legend);
+    }
+}
+
+@mixin mc-forms-typography($config) {
+    .mc-form__label {
+        @include mc-typography-level-to-styles($config, $forms-font-default-label);
+    }
+
+    .mc-form__legend {
+        @include mc-typography-level-to-styles($config, $forms-font-default-legend);
+    }
+}
+
+
+
+
+
+@mixin mc-option-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $primary: map-get($theme, primary);
+
+    .mc-option {
+        color: map-get($foreground, text);
+
+        &:hover:not(.mc-disabled) {
+            .mc-option-overlay {
+                background: map-get($background, overlay-hover);
+            }
+        }
+
+        &.mc-active {
+            border-color: map-get(map-get($theme, states), focused-color);
+        }
+
+        &.mc-selected {
+            background: map-get(map-get($theme, states), selected-color);
+        }
+
+        &.mc-disabled {
+            background: transparent;
+
+            color: map-get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin mc-option-typography($config) {
+    .mc-option {
+        @include mc-typography-level-to-styles($config, $option-font-default);
+    }
+}
+
+
+
+
+
+@mixin mc-optgroup-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .mc-optgroup-label {
+        color: map-get($foreground, text);
+    }
+
+    .mc-disabled .mc-optgroup-label {
+        color: map-get($foreground, text-disabled);
+    }
+}
+
+@mixin mc-optgroup-typography($config) {
+    .mc-optgroup-label {
+        @include mc-typography-level-to-styles($config, $optgroup-font-default);
+    }
+}
+
+@mixin popup-params($theme) {
+    $popup: map-get(map-get($theme, components), popup);
+
+    box-shadow: map-get($popup, shadow);
+    border-color: map-get($popup, border);
+
+    background-color: map-get($popup, background);
+}
+
+
+
+
+@mixin mc-autocomplete-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    .mc-autocomplete-panel {
+        @include popup-params($theme);
+
+        color: mc-color($foreground, text);
+
+        .mc-selected {
+            $popup: map-get(map-get($theme, components), popup);
+
+            background-color: map-get($popup, background);
+        }
+    }
+}
+
+
+
+
+
+
+@mixin mc-button-color($params) {
     color: map-get($params, color);
     border-color: map-get($params, border);
     background: map-get($params, background);
@@ -4339,65 +4504,6 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 }
 
 
-@mixin card-type($card) {
-    box-shadow:
-        inset -1px 0 0 0 map-get($card, shadow),
-        inset 0 1px 0 0 map-get($card, shadow),
-        inset 0 -1px 0 0 map-get($card, shadow);
-
-    background-color: map-get($card, background);
-
-    border-left-color: map-get($card, vertical-line);
-}
-
-@mixin mc-card-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-    $card: map-get(map-get($theme, components), card);
-    $popup: map-get(map-get($theme, components), popup);
-
-    $is-dark: map-get($theme, is-dark);
-
-    .mc-card {
-        color: map-get($foreground, text);
-
-        &.mc-card_error {
-            @include card-type(map-get($card, error));
-        }
-
-        &.mc-card_warning {
-            @include card-type(map-get($card, warning));
-        }
-
-        &.mc-card_success {
-            @include card-type(map-get($card, success));
-        }
-
-        &.mc-card_info {
-            @include card-type(map-get($card, info));
-        }
-
-        &.mc-card_white {
-            background-color: map-get($popup, background);
-        }
-
-        &.mc-selected {
-            background-color: map-get(map-get($theme, states), selected-color);
-        }
-
-        &:not(.mc-card_readonly):hover {
-            .mc-card__overlay {
-                background: map-get($background, overlay-hover);
-            }
-        }
-
-        &.cdk-keyboard-focused {
-            box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
-        }
-    }
-}
-
 
 
 
@@ -4603,27 +4709,54 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 }
 
-@mixin mc-divider-theme($theme) {
-    $divider: map-get(map-get($theme, components), divider);
 
-    .mc-divider_horizontal {
-        border-top-color: map-get($divider, color);
+
+
+
+@mixin mc-dl-theme($theme) {
+    $dl: map-get(map-get($theme, components), dl);
+
+    .mc-dt {
+        color: map-get($dl, dt);
     }
 
-    .mc-divider_vertical {
-        border-right-color: map-get($divider, color);
+    .mc-dd {
+        color: map-get($dl, dd);
     }
 }
 
+@mixin mc-dl-typography($config) {
+    .mc-dl {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
+        }
 
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
+        }
+    }
 
+    .mc-dl.mc-dl_vertical {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
+        }
 
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
+        }
+    }
+}
 
 
 
 
-@mixin mc-dropdown-theme($theme) {
-    $foreground: map-get($theme, foreground);
+
+
+
+
+
+@mixin mc-dropdown-theme($theme) {
+    $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
     $second: map-get($theme, second);
 
@@ -4829,158 +4962,6 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-@mixin mc-icon-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $second: map-get($theme, second);
-
-    $icon: map-get(map-get($theme, components), icon);
-
-    $primary: map-get($icon, primary);
-    $secondary: map-get($icon, secondary);
-    $error: map-get($icon, error);
-    $success: map-get($icon, success);
-    $warning: map-get($icon, warning);
-    $info: map-get($icon, info);
-
-    // Дефолтные серые иконки default-icon: лупа в поле, иконки дропдаунов v, все иконки вне полей.
-    .mc-icon {
-        color: mc-color($foreground, icon);
-
-        &.mc-primary {
-            color: map-get($primary, default);
-        }
-
-        &.mc-second {
-            color: map-get($secondary, default);
-        }
-
-        &.mc-error {
-            color: map-get($error, default);
-        }
-
-
-        &.mc-info {
-            color: map-get($info, default);
-        }
-
-        &.mc-warning {
-            color: map-get($warning, default);
-        }
-
-        &.mc-success {
-            color: map-get($success, default);
-        }
-
-        &[disabled],
-        &.mc-disabled {
-            cursor: default;
-        }
-    }
-
-    // Облегченные серые иконки less-contrast-icon нужны тогда, когда действие, которое они делают не дефолтное и
-    // не самое важное. Не используются вне инпутов или селектов.
-    .mc-icon.mc-icon_light {
-        &.mc-primary {
-            &:active,
-            &.mc-active {
-                color: map-get($primary, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($primary, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($primary, state-disabled);
-            }
-        }
-
-        &.mc-second {
-            &:active,
-            &.mc-active {
-                color: map-get($secondary, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($secondary, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($secondary, state-disabled);
-            }
-        }
-
-        &.mc-error {
-            &:active,
-            &.mc-active {
-                color: map-get($error, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($error, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($error, state-disabled);
-            }
-        }
-
-        &.mc-info {
-            &:active,
-            &.mc-active {
-                color: map-get($info, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($info, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($info, state-disabled);
-            }
-        }
-
-        &.mc-warning {
-            &:active,
-            &.mc-active {
-                color: map-get($warning, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($warning, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($warning, state-disabled);
-            }
-        }
-
-        &.mc-success {
-            &:active,
-            &.mc-active {
-                color: map-get($success, state-active);
-            }
-
-            &:not([disabled], .mc-disabled):hover {
-                color: map-get($success, state-hover);
-            }
-
-            &[disabled],
-            &.mc-disabled {
-                color: map-get($success, state-disabled);
-            }
-        }
-    }
-}
-
-
-
-
 
 @mixin mc-input-theme($theme) {
     $foreground: map-get($theme, foreground);
@@ -5277,95 +5258,6 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-@mixin mc-modal-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-    $modal: map-get(map-get($theme, components), modal);
-    $popup: map-get(map-get($theme, components), popup);
-
-    .mc-modal {
-        .mc-modal-content {
-            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
-            background-color: map-get($background, background);
-
-            box-shadow: map-get($modal, shadow);
-        }
-
-        .mc-modal-title {
-            color: map-get($foreground, text);
-        }
-
-        .mc-modal-header {
-            border-bottom-width: var(--mc-modal-size-border-width, $modal-size-border-width);
-            border-bottom-style: solid;
-            border-bottom-color: map-get($modal, header-border);
-        }
-
-        .mc-modal-header.mc-modal-body_top-overflow {
-            box-shadow: map-get($modal, body-top-shadow);
-        }
-
-        .mc-modal-footer.mc-modal-body_bottom-overflow {
-            box-shadow: map-get($modal, body-bottom-shadow);
-        }
-
-        .mc-modal-footer {
-            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
-            border-top-style: solid;
-            border-top-color: map-get($modal, footer-border);
-
-            background-color: map-get($popup, footer-background);
-        }
-
-        .mc-modal-close {
-            border: var(--mc-modal-size-border-width, $modal-size-border-width) solid transparent;
-
-            &:hover {
-                .mc-button-overlay {
-                    background: map-get($background, overlay-hover);
-                }
-
-                .mc-icon {
-                    color: inherit;
-                }
-            }
-        }
-    }
-
-    .mc-modal-mask {
-        background-color: map-get($modal, background-mask);
-    }
-
-    .mc-confirm {
-        .mc-confirm-btns {
-            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
-            border-top-style: solid;
-            border-top-color: map-get($modal, footer-border);
-
-            background-color: map-get($popup, footer-background);
-        }
-    }
-}
-
-@mixin mc-modal-typography($config) {
-    .mc-modal-title {
-        @include mc-typography-level-to-styles($config, $modal-header-font-default);
-    }
-
-    .mc-modal-body {
-        @include mc-typography-level-to-styles($config, $modal-body-font-default);
-    }
-}
-
-
-
-
-
-
-
-
-
 @function mc-markdown-typography-config() {
     $font-family: $font-family-base;
     $md-typography: map-get($md-typography, md-typography);
@@ -5489,129 +5381,87 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-@mixin mc-markdown-theme($theme) {
+
+
+@mixin mc-modal-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    $markdown: map-get(map-get($theme, components), markdown);
+    $modal: map-get(map-get($theme, components), modal);
+    $popup: map-get(map-get($theme, components), popup);
 
-    .mc-markdown {
-        color: map-get($foreground, text);
-        background: map-get($background, background);;
-
-        .mc-markdown__h1 {
-            color: map-get($markdown, h1-color);
-        }
-
-        .mc-markdown__h2 {
-            color: map-get($markdown, h2-color);
-        }
-
-        .mc-markdown__h3 {
-            color: map-get($markdown, h3-color);
-        }
-
-        .mc-markdown__h4 {
-            color: map-get($markdown, h4-color);
-        }
-
-        .mc-markdown__h5 {
-            color: map-get($markdown, h5-color);
-        }
+    .mc-modal {
+        .mc-modal-content {
+            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
+            background-color: map-get($background, background);
 
-        .mc-markdown__h6 {
-            color: map-get($markdown, h6-color);
+            box-shadow: map-get($modal, shadow);
         }
 
-        .mc-markdown__p {
-            color: map-get($markdown, p-color);
+        .mc-modal-title {
+            color: map-get($foreground, text);
         }
 
-        .mc-markdown__ul,
-        .mc-markdown__ol {
-            color: map-get($markdown, list-color);
+        .mc-modal-header {
+            border-bottom-width: var(--mc-modal-size-border-width, $modal-size-border-width);
+            border-bottom-style: solid;
+            border-bottom-color: map-get($modal, header-border);
         }
 
-        .mc-markdown__blockquote {
-            color: map-get($markdown, blockquote-text);
-            background: map-get($markdown, blockquote-background);
-            border-color: map-get($markdown, blockquote-border);
-            border-left-color: map-get($markdown, blockquote-line);
+        .mc-modal-header.mc-modal-body_top-overflow {
+            box-shadow: map-get($modal, body-top-shadow);
         }
 
-        .mc-markdown__pre,
-        .mc-markdown__p > .mc-markdown__code {
-            color: map-get($markdown, code-text);
-            background-color: map-get($markdown, code-background);
-            border-color: map-get($markdown, code-border);
+        .mc-modal-footer.mc-modal-body_bottom-overflow {
+            box-shadow: map-get($modal, body-bottom-shadow);
         }
 
-        .mc-markdown__a {
-            @include md-link-theme($theme);
-        }
+        .mc-modal-footer {
+            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
+            border-top-style: solid;
+            border-top-color: map-get($modal, footer-border);
 
-        .mc-markdown__img + em {
-            color: map-get($markdown, image-caption-text);
+            background-color: map-get($popup, footer-background);
         }
 
-        .mc-markdown__hr {
-            border-bottom-color: map-get($markdown, hr-color);
-        }
+        .mc-modal-close {
+            border: var(--mc-modal-size-border-width, $modal-size-border-width) solid transparent;
 
-        .mc-markdown__table > .mc-markdown__thead {
-            color: map-get($markdown, table-header);
-            border-bottom-color: map-get($markdown, table-border);
-        }
+            &:hover {
+                .mc-button-overlay {
+                    background: map-get($background, overlay-hover);
+                }
 
-        .mc-markdown__table > .mc-markdown__tbody {
-            color: map-get($markdown, table-body);
+                .mc-icon {
+                    color: inherit;
+                }
+            }
         }
     }
-}
-
-
-// based on mc-link
-
-@mixin md-link($foreground, $markdown) {
-    display: inline-block;
-
-    color: map-get($markdown, link-text);
-    text-decoration: none;
-    cursor: pointer;
-
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-bottom-color: map-get($markdown, link-border-bottom);
-
-    transition: color ease-out 300ms;
 
-    &:focus {
-        outline: none;
+    .mc-modal-mask {
+        background-color: map-get($modal, background-mask);
     }
 
-    /* stylelint-disable no-descending-specificity */
-    &:hover {
-        color: map-get($markdown, link-state-hover-text);
-        transition: color 0ms;
-        border-bottom-color: map-get($markdown, link-state-hover-border-bottom);
-    }
+    .mc-confirm {
+        .mc-confirm-btns {
+            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
+            border-top-style: solid;
+            border-top-color: map-get($modal, footer-border);
 
-    &:active {
-        color: map-get($markdown, link-state-active-text);
+            background-color: map-get($popup, footer-background);
+        }
     }
 }
 
-
-@mixin md-link-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $markdown: map-get(map-get($theme, components), markdown);
-
-    &:visited {
-        color: map-get($markdown, link-state-visited-text);
-        border-bottom-color: map-get($markdown, link-state-visited-border-bottom);
+@mixin mc-modal-typography($config) {
+    .mc-modal-title {
+        @include mc-typography-level-to-styles($config, $modal-header-font-default);
     }
 
-    @include md-link($foreground, $markdown);
+    .mc-modal-body {
+        @include mc-typography-level-to-styles($config, $modal-body-font-default);
+    }
 }
 
 
@@ -5845,56 +5695,6 @@ button {
 
 
 
-@mixin mc-progress-bar-theme($theme) {
-    $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
-    $error: map-get($theme, error);
-
-    $progress-bar: map-get(map-get($theme, components), progress-bar);
-
-    .mc-progress-bar {
-        background-color: map-get($progress-bar, background);
-
-        &.mc-primary .mc-progress-bar__line {
-            background-color: mc-color($primary);
-        }
-
-        &.mc-second .mc-progress-bar__line {
-            background-color: mc-color($second);
-        }
-
-        &.mc-error .mc-progress-bar__line {
-            background-color: mc-color($error);
-        }
-    }
-}
-
-
-
-
-@mixin mc-progress-spinner-theme($theme) {
-    $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
-    $error: map-get($theme, error);
-
-    .mc-progress-spinner {
-        &.mc-primary .mc-progress-spinner__circle {
-            stroke: mc-color($primary);
-        }
-
-        &.mc-second .mc-progress-spinner__circle {
-            stroke: mc-color($second);
-        }
-
-        &.mc-error .mc-progress-spinner__circle {
-            stroke: mc-color($error);
-        }
-    }
-}
-
-
-
-
 
 @mixin mc-radio-theme($theme) {
     $foreground: map-get($theme, foreground);
@@ -6103,33 +5903,6 @@ button {
     }
 }
 
-@mixin mc-splitter-theme($theme) {
-    $background: map-get($theme, background);
-
-    .mc-gutter {
-        cursor: col-resize;
-
-        &:hover,
-        &.mc-gutter_dragged {
-            background-color: map-get($background, background-disabled);
-        }
-
-        &.mc-gutter_vertical {
-            cursor: row-resize;
-        }
-
-        &[disabled] {
-            background-color: mc-color($background, overlay-disabled);
-
-            cursor: default;
-        }
-    }
-
-    .mc-gutter-ghost {
-        background: mc-color($background, overlay-disabled);
-    }
-}
-
 
 
 
@@ -6366,44 +6139,133 @@ button {
 
 
 
+@mixin mc-timezone-option-theme($theme) {
+    $timezone: map-get(map-get($theme, components), timezone);
 
+    .mc-timezone-option__offset,
+    .mc-timezone-option__city {
+        color: map-get($timezone, text);
+    }
 
-@mixin mc-tag-color($params) {
-    background: map-get($params, background);
-    border-color: map-get($params, border);
-
-    & .mc-tag__text {
-        color: map-get($params, text);
+    .mc-timezone-option__cities {
+        color: map-get($timezone, caption);
     }
+}
 
-    &.mc-active,
-    &.mc-focused {
-        border-color: map-get($params, focused);
-        box-shadow: 0 0 0 1px map-get($params, focused);
+@mixin mc-timezone-option-typography($config) {
+    .mc-timezone-option__offset {
+        @include mc-typography-level-to-styles($config, $timezone-option-font-offset-text);
     }
 
-    &:not(.mc-disabled) .mc-icon {
-        color: map-get($params, icon);
+    .mc-timezone-option__city {
+        @include mc-typography-level-to-styles($config, $timezone-option-font-text);
+    }
 
-        &.mc-tag-remove:hover {
-            color: map-get($params, icon_hovered);
-        }
+    .mc-timezone-option__cities {
+        @include mc-typography-level-to-styles($config, $timezone-option-font-caption);
     }
+}
 
-    &.mc-disabled {
-        border-color: map-get($params, border_disabled);
-        background: map-get($params, background_disabled);
 
-        & .mc-icon,
-        & .mc-tag__text {
-            color: map-get($params, disabled);
-        }
 
-        & .mc-tag-overlay {
-            background: transparent;
-        }
-    }
-}
+
+
+@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-tag-color($params) {
+    background: map-get($params, background);
+    border-color: map-get($params, border);
+
+    & .mc-tag__text {
+        color: map-get($params, text);
+    }
+
+    &.mc-active,
+    &.mc-focused {
+        border-color: map-get($params, focused);
+        box-shadow: 0 0 0 1px map-get($params, focused);
+    }
+
+    &:not(.mc-disabled) .mc-icon {
+        color: map-get($params, icon);
+
+        &.mc-tag-remove:hover {
+            color: map-get($params, icon_hovered);
+        }
+    }
+
+    &.mc-disabled {
+        border-color: map-get($params, border_disabled);
+        background: map-get($params, background_disabled);
+
+        & .mc-icon,
+        & .mc-tag__text {
+            color: map-get($params, disabled);
+        }
+
+        & .mc-tag-overlay {
+            background: transparent;
+        }
+    }
+}
 
 @mixin mc-tag-theme($theme) {
     $foreground: map-get($theme, foreground);
@@ -6524,95 +6386,6 @@ button {
 
 
 
-@mixin mc-timezone-option-theme($theme) {
-    $timezone: map-get(map-get($theme, components), timezone);
-
-    .mc-timezone-option__offset,
-    .mc-timezone-option__city {
-        color: map-get($timezone, text);
-    }
-
-    .mc-timezone-option__cities {
-        color: map-get($timezone, caption);
-    }
-}
-
-@mixin mc-timezone-option-typography($config) {
-    .mc-timezone-option__offset {
-        @include mc-typography-level-to-styles($config, $timezone-option-font-offset-text);
-    }
-
-    .mc-timezone-option__city {
-        @include mc-typography-level-to-styles($config, $timezone-option-font-text);
-    }
-
-    .mc-timezone-option__cities {
-        @include mc-typography-level-to-styles($config, $timezone-option-font-caption);
-    }
-}
-
-
-
-
-
-@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) {
@@ -7087,90 +6860,545 @@ button {
 
 
 
-@mixin mc-forms-theme($theme) {
-    $foreground: map-get($theme, foreground);
-
-    $forms: map-get(map-get($theme, components), forms);
+@mixin mosaic-typography($config: null) {
+    @if $config == null {
+        $config: mc-typography-config();
+    }
+
+    @include mc-base-typography($config);
+
+    $md-config: mc-markdown-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-checkbox-typography($config);
+    @include mc-datepicker-typography($config);
+    @include mc-dropdown-typography($config);
+    @include mc-dl-typography($config);
+    @include mc-form-field-typography($config);
+    @include mc-forms-typography($config);
+    @include mc-input-typography($config);
+    @include mc-link-typography($config);
+    @include mc-list-typography($config);
+    @include mc-loader-overlay-typography($config);
+    @include mc-markdown-typography($md-config);
+    @include mc-modal-typography($config);
+    @include mc-navbar-typography($config);
+    @include mc-option-typography($config);
+    @include mc-optgroup-typography($config);
+    @include mc-popover-typography($config);
+    @include mc-radio-typography($config);
+    @include mc-select-typography($config);
+    @include mc-sidepanel-typography($config);
+    @include mc-tabs-typography($config);
+    @include mc-tag-typography($config);
+    @include mc-textarea-typography($config);
+    @include mc-timezone-option-typography($config);
+    @include mc-toast-typography($config);
+    @include mc-toggle-typography($config);
+    @include mc-tooltip-typography($config);
+    @include mc-tree-select-typography($config);
+    @include mc-tree-typography($config);
+    @include mc-table-typography($config);
+}
 
-    .mc-form__label {
-        color: map-get($forms, label);
-    }
 
-    .mc-form__legend {
-        color: map-get($forms, legend);
-    }
-}
 
-@mixin mc-forms-typography($config) {
-    .mc-form__label {
-        @include mc-typography-level-to-styles($config, $forms-font-default-label);
-    }
 
-    .mc-form__legend {
-        @include mc-typography-level-to-styles($config, $forms-font-default-legend);
-    }
-}
 
+@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);
 
+        background: map-get($states, checked, background);
+    }
+}
 
-@mixin mc-option-theme($theme) {
+@mixin mc-pseudo-checkbox-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    $primary: map-get($theme, primary);
-
-    .mc-option {
-        color: map-get($foreground, text);
+    $checkbox: map-get(map-get($theme, components), checkbox);
 
-        &:hover:not(.mc-disabled) {
-            .mc-option-overlay {
-                background: map-get($background, overlay-hover);
-            }
+    .mc-pseudo-checkbox {
+        &.mc-primary {
+            @include mc-pseudo-checkbox-color(map-get($checkbox, default));
         }
 
-        &.mc-active {
-            border-color: map-get(map-get($theme, states), focused-color);
+        &.mc-error {
+            @include mc-pseudo-checkbox-color(map-get($checkbox, error));
         }
 
-        &.mc-selected {
-            background: map-get(map-get($theme, states), selected-color);
-        }
+        &.mc-disabled,
+        &.mc-primary.mc-disabled,
+        &.mc-error.mc-disabled {
+            border-color: map-get($foreground, border);
 
-        &.mc-disabled {
-            background: transparent;
+            background-color: map-get($background, background-disabled);
 
-            color: map-get($foreground, text-disabled);
+            & .mc-checkbox-checkmark,
+            & .mc-checkbox-mixedmark {
+                color: map-get($foreground, text-disabled);
+            }
         }
     }
 }
 
-@mixin mc-option-typography($config) {
-    .mc-option {
-        @include mc-typography-level-to-styles($config, $option-font-default);
-    }
+
+
+@mixin card-type($card) {
+    box-shadow:
+        inset -1px 0 0 0 map-get($card, shadow),
+        inset 0 1px 0 0 map-get($card, shadow),
+        inset 0 -1px 0 0 map-get($card, shadow);
+
+    background-color: map-get($card, background);
+
+    border-left-color: map-get($card, vertical-line);
 }
 
+@mixin mc-card-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
+    $card: map-get(map-get($theme, components), card);
+    $popup: map-get(map-get($theme, components), popup);
 
+    $is-dark: map-get($theme, is-dark);
 
+    .mc-card {
+        color: map-get($foreground, text);
 
-@mixin mc-optgroup-theme($theme) {
+        &.mc-card_error {
+            @include card-type(map-get($card, error));
+        }
+
+        &.mc-card_warning {
+            @include card-type(map-get($card, warning));
+        }
+
+        &.mc-card_success {
+            @include card-type(map-get($card, success));
+        }
+
+        &.mc-card_info {
+            @include card-type(map-get($card, info));
+        }
+
+        &.mc-card_white {
+            background-color: map-get($popup, background);
+        }
+
+        &.mc-selected {
+            background-color: map-get(map-get($theme, states), selected-color);
+        }
+
+        &:not(.mc-card_readonly):hover {
+            .mc-card__overlay {
+                background: map-get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+        }
+    }
+}
+
+
+
+@mixin mc-divider-theme($theme) {
+    $divider: map-get(map-get($theme, components), divider);
+
+    .mc-divider_horizontal {
+        border-top-color: map-get($divider, color);
+    }
+
+    .mc-divider_vertical {
+        border-right-color: map-get($divider, color);
+    }
+}
+
+
+
+
+
+
+@mixin mc-icon-theme($theme) {
     $foreground: map-get($theme, foreground);
+    $second: map-get($theme, second);
 
-    .mc-optgroup-label {
+    $icon: map-get(map-get($theme, components), icon);
+
+    $primary: map-get($icon, primary);
+    $secondary: map-get($icon, secondary);
+    $error: map-get($icon, error);
+    $success: map-get($icon, success);
+    $warning: map-get($icon, warning);
+    $info: map-get($icon, info);
+
+    // Дефолтные серые иконки default-icon: лупа в поле, иконки дропдаунов v, все иконки вне полей.
+    .mc-icon {
+        color: mc-color($foreground, icon);
+
+        &.mc-primary {
+            color: map-get($primary, default);
+        }
+
+        &.mc-second {
+            color: map-get($secondary, default);
+        }
+
+        &.mc-error {
+            color: map-get($error, default);
+        }
+
+
+        &.mc-info {
+            color: map-get($info, default);
+        }
+
+        &.mc-warning {
+            color: map-get($warning, default);
+        }
+
+        &.mc-success {
+            color: map-get($success, default);
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+        }
+    }
+
+    // Облегченные серые иконки less-contrast-icon нужны тогда, когда действие, которое они делают не дефолтное и
+    // не самое важное. Не используются вне инпутов или селектов.
+    .mc-icon.mc-icon_light {
+        &.mc-primary {
+            &:active,
+            &.mc-active {
+                color: map-get($primary, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($primary, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($primary, state-disabled);
+            }
+        }
+
+        &.mc-second {
+            &:active,
+            &.mc-active {
+                color: map-get($secondary, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($secondary, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($secondary, state-disabled);
+            }
+        }
+
+        &.mc-error {
+            &:active,
+            &.mc-active {
+                color: map-get($error, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($error, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($error, state-disabled);
+            }
+        }
+
+        &.mc-info {
+            &:active,
+            &.mc-active {
+                color: map-get($info, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($info, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($info, state-disabled);
+            }
+        }
+
+        &.mc-warning {
+            &:active,
+            &.mc-active {
+                color: map-get($warning, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($warning, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($warning, state-disabled);
+            }
+        }
+
+        &.mc-success {
+            &:active,
+            &.mc-active {
+                color: map-get($success, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map-get($success, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map-get($success, state-disabled);
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+@mixin mc-markdown-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $markdown: map-get(map-get($theme, components), markdown);
+
+    .mc-markdown {
         color: map-get($foreground, text);
+        background: map-get($background, background);;
+
+        .mc-markdown__h1 {
+            color: map-get($markdown, h1-color);
+        }
+
+        .mc-markdown__h2 {
+            color: map-get($markdown, h2-color);
+        }
+
+        .mc-markdown__h3 {
+            color: map-get($markdown, h3-color);
+        }
+
+        .mc-markdown__h4 {
+            color: map-get($markdown, h4-color);
+        }
+
+        .mc-markdown__h5 {
+            color: map-get($markdown, h5-color);
+        }
+
+        .mc-markdown__h6 {
+            color: map-get($markdown, h6-color);
+        }
+
+        .mc-markdown__p {
+            color: map-get($markdown, p-color);
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            color: map-get($markdown, list-color);
+        }
+
+        .mc-markdown__blockquote {
+            color: map-get($markdown, blockquote-text);
+            background: map-get($markdown, blockquote-background);
+            border-color: map-get($markdown, blockquote-border);
+            border-left-color: map-get($markdown, blockquote-line);
+        }
+
+        .mc-markdown__pre,
+        .mc-markdown__p > .mc-markdown__code {
+            color: map-get($markdown, code-text);
+            background-color: map-get($markdown, code-background);
+            border-color: map-get($markdown, code-border);
+        }
+
+        .mc-markdown__a {
+            @include md-link-theme($theme);
+        }
+
+        .mc-markdown__img + em {
+            color: map-get($markdown, image-caption-text);
+        }
+
+        .mc-markdown__hr {
+            border-bottom-color: map-get($markdown, hr-color);
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            color: map-get($markdown, table-header);
+            border-bottom-color: map-get($markdown, table-border);
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            color: map-get($markdown, table-body);
+        }
     }
+}
 
-    .mc-disabled .mc-optgroup-label {
-        color: map-get($foreground, text-disabled);
+
+// based on mc-link
+
+@mixin md-link($foreground, $markdown) {
+    display: inline-block;
+
+    color: map-get($markdown, link-text);
+    text-decoration: none;
+    cursor: pointer;
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: map-get($markdown, link-border-bottom);
+
+    transition: color ease-out 300ms;
+
+    &:focus {
+        outline: none;
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+        color: map-get($markdown, link-state-hover-text);
+        transition: color 0ms;
+        border-bottom-color: map-get($markdown, link-state-hover-border-bottom);
+    }
+
+    &:active {
+        color: map-get($markdown, link-state-active-text);
     }
 }
 
-@mixin mc-optgroup-typography($config) {
-    .mc-optgroup-label {
-        @include mc-typography-level-to-styles($config, $optgroup-font-default);
+
+@mixin md-link-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $markdown: map-get(map-get($theme, components), markdown);
+
+    &:visited {
+        color: map-get($markdown, link-state-visited-text);
+        border-bottom-color: map-get($markdown, link-state-visited-border-bottom);
+    }
+
+    @include md-link($foreground, $markdown);
+}
+
+
+
+
+
+
+@mixin mc-progress-bar-theme($theme) {
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $error: map-get($theme, error);
+
+    $progress-bar: map-get(map-get($theme, components), progress-bar);
+
+    .mc-progress-bar {
+        background-color: map-get($progress-bar, background);
+
+        &.mc-primary .mc-progress-bar__line {
+            background-color: mc-color($primary);
+        }
+
+        &.mc-second .mc-progress-bar__line {
+            background-color: mc-color($second);
+        }
+
+        &.mc-error .mc-progress-bar__line {
+            background-color: mc-color($error);
+        }
+    }
+}
+
+
+
+
+@mixin mc-progress-spinner-theme($theme) {
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+    $error: map-get($theme, error);
+
+    .mc-progress-spinner {
+        &.mc-primary .mc-progress-spinner__circle {
+            stroke: mc-color($primary);
+        }
+
+        &.mc-second .mc-progress-spinner__circle {
+            stroke: mc-color($second);
+        }
+
+        &.mc-error .mc-progress-spinner__circle {
+            stroke: mc-color($error);
+        }
+    }
+}
+
+
+
+
+@mixin mc-splitter-theme($theme) {
+    $background: map-get($theme, background);
+
+    .mc-gutter {
+        cursor: col-resize;
+
+        &:hover,
+        &.mc-gutter_dragged {
+            background-color: map-get($background, background-disabled);
+        }
+
+        &.mc-gutter_vertical {
+            cursor: row-resize;
+        }
+
+        &[disabled] {
+            background-color: mc-color($background, overlay-disabled);
+
+            cursor: default;
+        }
+    }
+
+    .mc-gutter-ghost {
+        background: mc-color($background, overlay-disabled);
     }
 }
 
@@ -7178,6 +7406,19 @@ button {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 @mixin mc-option-action-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -7244,44 +7485,6 @@ button {
 
 
 
-
-@mixin mc-dl-theme($theme) {
-    $dl: map-get(map-get($theme, components), dl);
-
-    .mc-dt {
-        color: map-get($dl, dt);
-    }
-
-    .mc-dd {
-        color: map-get($dl, dd);
-    }
-}
-
-@mixin mc-dl-typography($config) {
-    .mc-dl {
-        & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
-        }
-
-        & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
-        }
-    }
-
-    .mc-dl.mc-dl_vertical {
-        & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
-        }
-
-        & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
-        }
-    }
-}
-
-
-
-
 @mixin mosaic-theme($theme) {
     @include mc-core-theme($theme);