@ptsecurity/mosaic 14.7.2 → 15.0.0

package/_theming.scss

@@ -1,261 +1,46 @@
-// Import all the theming
-// We want overlays to always appear over user content, so set a baseline
-// very high z-index for the overlay container, which is where we create the new
-// stacking context for all overlays.
-$overlay-container-z-index: 1000 !default;
-$overlay-z-index: 1000 !default;
-$overlay-backdrop-z-index: 1000 !default;
-
-// Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
-
-// Default backdrop animation is based on the Material Design swift-ease-out.
-$backdrop-animation-duration: 400ms !default;
-$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-
-/// Emits structural styles required for cdk/overlay to function.
-@mixin overlay() {
-  .cdk-overlay-container, .cdk-global-overlay-wrapper {
-    // Disable events from being captured on the overlay container.
-    pointer-events: none;
-
-    // The container should be the size of the viewport.
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  // The overlay-container is an invisible element which contains all individual overlays.
-  .cdk-overlay-container {
-    position: fixed;
-    z-index: $overlay-container-z-index;
-
-    &:empty {
-      // Hide the element when it doesn't have any child nodes. This doesn't
-      // include overlays that have been detached, rather than disposed.
-      display: none;
-    }
-  }
-
-  // We use an extra wrapper element in order to use make the overlay itself a flex item.
-  // This makes centering the overlay easy without running into the subpixel rendering
-  // problems tied to using `transform` and without interfering with the other position
-  // strategies.
-  .cdk-global-overlay-wrapper {
-    display: flex;
-    position: absolute;
-    z-index: $overlay-z-index;
-  }
-
-  // A single overlay pane.
-  .cdk-overlay-pane {
-    // Note: it's important for this one to start off `absolute`,
-    // in order for us to be able to measure it correctly.
-    position: absolute;
-    pointer-events: auto;
-    box-sizing: border-box;
-    z-index: $overlay-z-index;
-
-    // For connected-position overlays, we set `display: flex` in
-    // order to force `max-width` and `max-height` to take effect.
-    display: flex;
-    max-width: 100%;
-    max-height: 100%;
-  }
+// @deprecated Use `...`.
+// Will be deleted in 16.0.x.
 
-  .cdk-overlay-backdrop {
-    // TODO(jelbourn): reuse sidenav fullscreen mixin.
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    z-index: $overlay-backdrop-z-index;
-    pointer-events: auto;
-    -webkit-tap-highlight-color: transparent;
-    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
-    opacity: 0;
-
-    &.cdk-overlay-backdrop-showing {
-      opacity: 1;
-
-      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
-      // this file will be copied to the top-level `cdk` package when putting together the files
-      // for npm. Any relative import paths we use here will become invalid once the file is copied.
-      .cdk-high-contrast-active & {
-        // In high contrast mode the rgba background will become solid
-        // so we need to fall back to making it opaque using `opacity`.
-        opacity: 0.6;
-      }
-    }
-  }
-
-  .cdk-overlay-dark-backdrop {
-    background: $overlay-backdrop-color;
-  }
-
-  .cdk-overlay-transparent-backdrop {
-    // Define a transition on the visibility so that the `transitionend` event can fire immediately.
-    transition: visibility 1ms linear, opacity 1ms linear;
-    visibility: hidden;
-    opacity: 1;
-
-    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
-    // capturing the user's mouse scroll events. Since we also can't use something like
-    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
-    // all and using `opacity` to make the element transparent.
-    &.cdk-overlay-backdrop-showing {
-      opacity: 0;
-      visibility: visible;
-    }
-  }
-
-  .cdk-overlay-backdrop-noop-animation {
-    transition: none;
-  }
-
-  // Overlay parent element used with the connected position strategy. Used to constrain the
-  // overlay element's size to fit within the viewport.
-  .cdk-overlay-connected-position-bounding-box {
-    position: absolute;
-    z-index: $overlay-z-index;
-
-    // We use `display: flex` on this element exclusively for centering connected overlays.
-    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
-    // flex layout.
-    display: flex;
-
-    // We use the `column` direction here to avoid some flexbox issues in Edge
-    // when using the "grow after open" options.
-    flex-direction: column;
-
-    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
-    min-width: 1px;
-    min-height: 1px;
-  }
+// This file is needed to create a bundle in a package
 
-  // Used when disabling global scrolling.
-  .cdk-global-scrollblock {
-    position: fixed;
-
-    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
-    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
-    // that the element had before we made it `fixed`.
-    width: 100%;
-
-    // Note: this will always add a scrollbar to whatever element it is on, which can
-    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
-    // block scrolling on a page that doesn't have a scrollbar in the first place.
-    overflow-y: scroll;
-  }
-}
 
 /// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
 /// to make that element visually hidden while remaining available to assistive technology.
 @mixin a11y-visually-hidden() {
-  .cdk-visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-
-    // This works around a Chrome bug that can cause the tab to crash when large amounts of
-    // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
-    white-space: nowrap;
-
-    // Avoid browsers rendering the focus ring in some cases.
-    outline: 0;
-
-    // Avoid some cases where the browser will still render the native controls (see #9049).
-    -webkit-appearance: none;
-    -moz-appearance: none;
-
-    // We need at least one of top/bottom/left/right in order to prevent cases where the
-    // absolute-positioned element is pushed down and can affect scrolling (see #24597).
-    // `left` was chosen here, because it's the least likely to break overrides where the
-    // element might have been positioned (e.g. `mat-checkbox`).
-    left: 0;
-
-    [dir='rtl'] & {
-      left: auto;
-      right: 0;
-    }
-  }
-}
-
-/// @deprecated Use `a11y-visually-hidden`.
-@mixin a11y() {
-  @include a11y-visually-hidden;
-}
-
-/// Emits the mixin's content nested under `$selector-context` if `$selector-context`
-/// is non-empty.
-/// @param {String} selector-context The selector under which to nest the mixin's content.
-@mixin _optionally-nest-content($selector-context) {
-  @if ($selector-context == '') {
-    @content;
-  }
-  @else {
-    #{$selector-context} {
-      @content;
-    }
-  }
-}
+    .cdk-visually-hidden {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
 
-/// Applies styles for users in high contrast mode. Note that this only applies
-/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
-/// attribute, however Chrome handles high contrast differently.
-///
-/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
-///     `white-on-black` or `black-on-white`.
-/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
-///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
-///     * `off` - works for `None`
-///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
-@mixin high-contrast($target: active, $encapsulation: 'any') {
-  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
-    @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
-           'Allowed values are "active", "black-on-white", and "white-on-black"';
-  }
+        // This works around a Chrome bug that can cause the tab to crash when large amounts of
+        // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444
+        white-space: nowrap;
 
-  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
-    @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
-           'Allowed values are "on", "off", and "any"';
-  }
+        // Avoid browsers rendering the focus ring in some cases.
+        outline: 0;
 
-  // If the selector context has multiple parts, such as `.section, .region`, just doing
-  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
-  // context. We address this by nesting the selector context under .cdk-high-contrast.
-  @at-root {
-    $selector-context: #{&};
+        // Avoid some cases where the browser will still render the native controls (see #9049).
+        -webkit-appearance: none;
+        -moz-appearance: none;
 
-    @if ($encapsulation != 'on') {
-      // Note that if this selector is updated, the same change has to be made inside
-      // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
-      .cdk-high-contrast-#{$target} {
-        @include _optionally-nest-content($selector-context) {
-          @content;
-        }
-      }
-    }
+        // We need at least one of top/bottom/left/right in order to prevent cases where the
+        // absolute-positioned element is pushed down and can affect scrolling (see #24597).
+        // `left` was chosen here, because it's the least likely to break overrides where the
+        // element might have been positioned (e.g. `mat-checkbox`).
+        left: 0;
 
-    @if ($encapsulation != 'off') {
-      .cdk-high-contrast-#{$target} :host {
-        @include _optionally-nest-content($selector-context) {
-          @content;
+        [dir='rtl'] & {
+            left: auto;
+            right: 0;
         }
-      }
     }
-  }
 }
 
-
 @keyframes mc-progress {
     from {
         background-position: 0 0;
@@ -345,7 +130,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 // Do not edit directly
 
 $light-color-scheme-primary-default: #0374eb;
-$light-color-scheme-second-default: #6d7a86;
+$light-color-scheme-secondary-default: #6d7a86;
 $light-color-scheme-error-default: #db3c55;
 $light-color-scheme-info-default: #0374eb;
 $light-color-scheme-success-default: #028b49;
@@ -371,7 +156,7 @@ $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-second-default: #515e69;
+$dark-color-scheme-secondary-default: #515e69;
 $dark-color-scheme-error-default: #b9023a;
 $dark-color-scheme-info-default: #0c6579;
 $dark-color-scheme-success-default: #016b37;
@@ -683,9 +468,9 @@ $badge-light-color-scheme-solid-transparent-color: #19252f;
 $badge-light-color-scheme-solid-light-background: #d7dee4;
 $badge-light-color-scheme-solid-light-border: #d7dee4;
 $badge-light-color-scheme-solid-light-color: #19252f;
-$badge-light-color-scheme-solid-second-background: #7f8c98;
-$badge-light-color-scheme-solid-second-border: #7f8c98;
-$badge-light-color-scheme-solid-second-color: white;
+$badge-light-color-scheme-solid-secondary-background: #7f8c98;
+$badge-light-color-scheme-solid-secondary-border: #7f8c98;
+$badge-light-color-scheme-solid-secondary-color: white;
 $badge-light-color-scheme-pastel-primary-background: #eff6ff;
 $badge-light-color-scheme-pastel-primary-border: #a2c7fe;
 $badge-light-color-scheme-pastel-primary-color: #4187ff;
@@ -737,9 +522,9 @@ $badge-dark-color-scheme-solid-transparent-color: white;
 $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-second-background: #515e69;
-$badge-dark-color-scheme-solid-second-border: #515e69;
-$badge-dark-color-scheme-solid-second-color: white;
+$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-size-default-height: 24px;
 $badge-size-default-min-width: 10px;
 $badge-size-default-padding: 0 8px;
@@ -772,12 +557,12 @@ $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;
 $button-light-color-scheme-primary-transparent-states-active-icon: #014b9d;
-$button-light-color-scheme-second-border: #d7dee4;
-$button-light-color-scheme-second-background: #d7dee4;
-$button-light-color-scheme-second-color: #19252f;
-$button-light-color-scheme-second-icon: #8c99a5;
-$button-light-color-scheme-second-states-active-border: #bdc7d1;
-$button-light-color-scheme-second-states-active-background: #bdc7d1;
+$button-light-color-scheme-secondary-border: #d7dee4;
+$button-light-color-scheme-secondary-background: #d7dee4;
+$button-light-color-scheme-secondary-color: #19252f;
+$button-light-color-scheme-secondary-icon: #8c99a5;
+$button-light-color-scheme-secondary-states-active-border: #bdc7d1;
+$button-light-color-scheme-secondary-states-active-background: #bdc7d1;
 $button-light-color-scheme-error-border: #d7dee4;
 $button-light-color-scheme-error-background: #d7dee4;
 $button-light-color-scheme-error-color: #ea5868;
@@ -797,12 +582,12 @@ $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;
 $button-dark-color-scheme-primary-transparent-states-active-icon: #a2c7fe;
-$button-dark-color-scheme-second-border: #515e69;
-$button-dark-color-scheme-second-background: #515e69;
-$button-dark-color-scheme-second-color: #f2f5f9;
-$button-dark-color-scheme-second-icon: #8c99a5;
-$button-dark-color-scheme-second-states-active-border: #333f4a;
-$button-dark-color-scheme-second-states-active-background: #333f4a;
+$button-dark-color-scheme-secondary-border: #515e69;
+$button-dark-color-scheme-secondary-background: #515e69;
+$button-dark-color-scheme-secondary-color: #f2f5f9;
+$button-dark-color-scheme-secondary-icon: #8c99a5;
+$button-dark-color-scheme-secondary-states-active-border: #333f4a;
+$button-dark-color-scheme-secondary-states-active-background: #333f4a;
 $button-dark-color-scheme-error-border: #515e69;
 $button-dark-color-scheme-error-background: #515e69;
 $button-dark-color-scheme-error-color: #ea5868;
@@ -1801,15 +1586,15 @@ $tags-light-color-scheme-primary-states-focused: #0374eb;
 $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
 $tags-light-color-scheme-primary-states-disabled-background: mix(#0374eb, transparent, 10%);
 $tags-light-color-scheme-primary-states-disabled-border: transparent;
-$tags-light-color-scheme-second-background: #d7dee4;
-$tags-light-color-scheme-second-border: transparent;
-$tags-light-color-scheme-second-text: #19252f;
-$tags-light-color-scheme-second-icon: #8c99a5;
-$tags-light-color-scheme-second-states-hover-icon: #6d7a86;
-$tags-light-color-scheme-second-states-focused: #0374eb;
-$tags-light-color-scheme-second-states-disabled-text: mix(#8c99a5, transparent, 50%);
-$tags-light-color-scheme-second-states-disabled-background: mix(#8c99a5, transparent, 10%);
-$tags-light-color-scheme-second-states-disabled-border: transparent;
+$tags-light-color-scheme-secondary-background: #d7dee4;
+$tags-light-color-scheme-secondary-border: transparent;
+$tags-light-color-scheme-secondary-text: #19252f;
+$tags-light-color-scheme-secondary-icon: #8c99a5;
+$tags-light-color-scheme-secondary-states-hover-icon: #6d7a86;
+$tags-light-color-scheme-secondary-states-focused: #0374eb;
+$tags-light-color-scheme-secondary-states-disabled-text: mix(#8c99a5, transparent, 50%);
+$tags-light-color-scheme-secondary-states-disabled-background: mix(#8c99a5, transparent, 10%);
+$tags-light-color-scheme-secondary-states-disabled-border: transparent;
 $tags-light-color-scheme-error-background: #ffeaea;
 $tags-light-color-scheme-error-border: transparent;
 $tags-light-color-scheme-error-text: #db3c55;
@@ -1828,15 +1613,15 @@ $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-border: transparent;
-$tags-dark-color-scheme-second-background: #333f4a;
-$tags-dark-color-scheme-second-border: transparent;
-$tags-dark-color-scheme-second-text: #bdc7d1;
-$tags-dark-color-scheme-second-icon: #8c99a5;
-$tags-dark-color-scheme-second-states-hover-icon: #6d7a86;
-$tags-dark-color-scheme-second-states-focused: #4187ff;
-$tags-dark-color-scheme-second-states-disabled-text: mix(#7f8c98, transparent, 50%);
-$tags-dark-color-scheme-second-states-disabled-background: mix(#7f8c98, transparent, 10%);
-$tags-dark-color-scheme-second-states-disabled-border: transparent;
+$tags-dark-color-scheme-secondary-background: #333f4a;
+$tags-dark-color-scheme-secondary-border: transparent;
+$tags-dark-color-scheme-secondary-text: #bdc7d1;
+$tags-dark-color-scheme-secondary-icon: #8c99a5;
+$tags-dark-color-scheme-secondary-states-hover-icon: #6d7a86;
+$tags-dark-color-scheme-secondary-states-focused: #4187ff;
+$tags-dark-color-scheme-secondary-states-disabled-text: mix(#7f8c98, transparent, 50%);
+$tags-dark-color-scheme-secondary-states-disabled-background: mix(#7f8c98, transparent, 10%);
+$tags-dark-color-scheme-secondary-states-disabled-border: transparent;
 $tags-dark-color-scheme-error-background: #800025;
 $tags-dark-color-scheme-error-border: transparent;
 $tags-dark-color-scheme-error-text: #fcb2b4;
@@ -2021,7 +1806,7 @@ A200: white,
 )
 );
 
-$light-color-scheme-second-palette: (
+$light-color-scheme-secondary-palette: (
 40: #f2f5f9,
 60: #ebeef2,
 100: #d7dee4,
@@ -2219,7 +2004,7 @@ A200: white,
 )
 );
 
-$dark-color-scheme-second-palette: (
+$dark-color-scheme-secondary-palette: (
 40: #f2f5f9,
 60: #ebeef2,
 100: #d7dee4,
@@ -2690,6 +2475,13 @@ $typography-body-mono-font-weight: normal;
 $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-body-mono-text-transform: null;
 $typography-body-mono-font-feature-settings: initial;
+$typography-body-mono-strong-font-size: 15px;
+$typography-body-mono-strong-line-height: 20px;
+$typography-body-mono-strong-letter-spacing: normal;
+$typography-body-mono-strong-font-weight: 500;
+$typography-body-mono-strong-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-body-mono-strong-text-transform: null;
+$typography-body-mono-strong-font-feature-settings: initial;
 $typography-caption-font-size: 13px;
 $typography-caption-line-height: 16px;
 $typography-caption-letter-spacing: -0.0025em;
@@ -2725,6 +2517,13 @@ $typography-caption-mono-font-weight: normal;
 $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
 $typography-caption-mono-text-transform: null;
 $typography-caption-mono-font-feature-settings: initial;
+$typography-caption-mono-strong-font-size: 13px;
+$typography-caption-mono-strong-line-height: 16px;
+$typography-caption-mono-strong-letter-spacing: normal;
+$typography-caption-mono-strong-font-weight: 500;
+$typography-caption-mono-strong-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-caption-mono-strong-text-transform: null;
+$typography-caption-mono-strong-font-feature-settings: initial;
 $typography-small-text-font-size: 13px;
 $typography-small-text-line-height: 16px;
 $typography-small-text-letter-spacing: -0.0025em;
@@ -2855,6 +2654,15 @@ $mosaic: (
       'text-transform': $typography-body-mono-text-transform,
       'font-feature-settings': $typography-body-mono-font-feature-settings
     ),
+    'body-mono-strong': (
+      'font-size': $typography-body-mono-strong-font-size,
+      'line-height': $typography-body-mono-strong-line-height,
+      'letter-spacing': $typography-body-mono-strong-letter-spacing,
+      'font-weight': $typography-body-mono-strong-font-weight,
+      'font-family': $typography-body-mono-strong-font-family,
+      'text-transform': $typography-body-mono-strong-text-transform,
+      'font-feature-settings': $typography-body-mono-strong-font-feature-settings
+    ),
     'caption': (
       'font-size': $typography-caption-font-size,
       'line-height': $typography-caption-line-height,
@@ -2900,6 +2708,15 @@ $mosaic: (
       'text-transform': $typography-caption-mono-text-transform,
       'font-feature-settings': $typography-caption-mono-font-feature-settings
     ),
+    'caption-mono-strong': (
+      'font-size': $typography-caption-mono-strong-font-size,
+      'line-height': $typography-caption-mono-strong-line-height,
+      'letter-spacing': $typography-caption-mono-strong-letter-spacing,
+      'font-weight': $typography-caption-mono-strong-font-weight,
+      'font-family': $typography-caption-mono-strong-font-family,
+      'text-transform': $typography-caption-mono-strong-text-transform,
+      'font-feature-settings': $typography-caption-mono-strong-font-feature-settings
+    ),
     'small-text': (
       'font-size': $typography-small-text-font-size,
       'line-height': $typography-small-text-line-height,
@@ -3318,58 +3135,180 @@ $md-typography: (
     @include mc-no-select;
 }
 
-.cdk-overlay-container {
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    z-index: 1000;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$overlay-container-z-index: 1000 !default;
+$overlay-z-index: 1000 !default;
+$overlay-backdrop-z-index: 1000 !default;
 
-.cdk-overlay-backdrop {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    -webkit-tap-highlight-color: transparent;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-    opacity: 0;
-    position: absolute;
-    pointer-events: auto;
-    z-index: 1000;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
+// Background color for all of the backdrops
+$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
 
-.cdk-overlay-pane {
-    box-sizing: border-box;
-    position: absolute;
-    pointer-events: auto;
-    margin: 0;
-    padding: 0;
-    z-index: 1000;
-    max-width: 100%;
-    max-height: 100%;
-}
+// Default backdrop animation is based on the Material Design swift-ease-out.
+$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
-.cdk-overlay-connected-position-bounding-box {
-    box-sizing: border-box;
-    position: absolute;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    padding: 0;
-    min-width: 1px;
-    min-height: 1px;
+/// Emits structural styles required for cdk/overlay to function.
+@mixin overlay() {
+    .cdk-overlay-container,
+    .cdk-global-overlay-wrapper {
+        // Disable events from being captured on the overlay container.
+        pointer-events: none;
+
+        // The container should be the size of the viewport.
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+    // The overlay-container is an invisible element which contains all individual overlays.
+    .cdk-overlay-container {
+        position: fixed;
+        z-index: $overlay-container-z-index;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+
+        &:empty {
+            // Hide the element when it doesn't have any child nodes. This doesn't
+            // include overlays that have been detached, rather than disposed.
+            display: none;
+        }
+    }
+
+    // We use an extra wrapper element in order to use make the overlay itself a flex item.
+    // This makes centering the overlay easy without running into the subpixel rendering
+    // problems tied to using `transform` and without interfering with the other position
+    // strategies.
+    .cdk-global-overlay-wrapper {
+        display: flex;
+        position: absolute;
+        z-index: $overlay-z-index;
+    }
+
+    // A single overlay pane.
+    .cdk-overlay-pane {
+        // Note: it's important for this one to start off `absolute`,
+        // in order for us to be able to measure it correctly.
+        position: absolute;
+        pointer-events: auto;
+        box-sizing: border-box;
+        z-index: $overlay-z-index;
+
+        // For connected-position overlays, we set `display: flex` in
+        // order to force `max-width` and `max-height` to take effect.
+        display: flex;
+        max-width: 100%;
+        max-height: 100%;
+
+        // todo перепроверить
+        margin: 0;
+        padding: 0;
+    }
+
+    .cdk-overlay-backdrop {
+        // TODO(jelbourn): reuse sidenav fullscreen mixin.
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        z-index: $overlay-backdrop-z-index;
+        pointer-events: auto;
+        -webkit-tap-highlight-color: transparent;
+        transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+        opacity: 0;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+
+        &.cdk-overlay-backdrop-showing {
+            opacity: 1;
+
+            // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
+            // this file will be copied to the top-level `cdk` package when putting together the files
+            // for npm. Any relative import paths we use here will become invalid once the file is copied.
+            .cdk-high-contrast-active & {
+                // In high contrast mode the rgba background will become solid
+                // so we need to fall back to making it opaque using `opacity`.
+                opacity: 0.6;
+            }
+        }
+    }
+
+    .cdk-overlay-dark-backdrop {
+        background: $overlay-backdrop-color;
+    }
+
+    .cdk-overlay-transparent-backdrop {
+        // Define a transition on the visibility so that the `transitionend` event can fire immediately.
+        transition: visibility 1ms linear, opacity 1ms linear;
+        visibility: hidden;
+        opacity: 1;
+
+        // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
+        // capturing the user's mouse scroll events. Since we also can't use something like
+        // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
+        // all and using `opacity` to make the element transparent.
+        &.cdk-overlay-backdrop-showing {
+            opacity: 0;
+            visibility: visible;
+        }
+    }
+
+    .cdk-overlay-backdrop-noop-animation {
+        transition: none;
+    }
+
+    // Overlay parent element used with the connected position strategy. Used to constrain the
+    // overlay element's size to fit within the viewport.
+    .cdk-overlay-connected-position-bounding-box {
+        position: absolute;
+        z-index: $overlay-z-index;
+
+        // We use `display: flex` on this element exclusively for centering connected overlays.
+        // When *not* centering, a top/left/bottom/right will be set which overrides the normal
+        // flex layout.
+        display: flex;
+
+        // We use the `column` direction here to avoid some flexbox issues in Edge
+        // when using the "grow after open" options.
+        flex-direction: column;
+
+        // Add some dimensions so the element has an `innerText` which some people depend on in tests.
+        min-width: 1px;
+        min-height: 1px;
+
+        // todo перепроверить
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    // Used when disabling global scrolling.
+    .cdk-global-scrollblock {
+        position: fixed;
+
+        // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+        // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+        // that the element had before we made it `fixed`.
+        width: 100%;
+
+        // Note: this will always add a scrollbar to whatever element it is on, which can
+        // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+        // block scrolling on a page that doesn't have a scrollbar in the first place.
+        overflow-y: scroll;
+    }
 }
 
+
 @mixin popup-params($theme) {
     $popup: map-get(map-get($theme, components), popup);
 
@@ -3433,10 +3372,6 @@ $md-typography: (
 
 
 
-
-
-
-
 @function mc-light-theme-components($theme) {
     $alert: (
         error: (
@@ -3481,9 +3416,9 @@ $md-typography: (
             border: $badge-light-color-scheme-solid-primary-border
         ),
         second_solid: (
-            color: $badge-light-color-scheme-solid-second-color,
-            background: $badge-light-color-scheme-solid-second-background,
-            border: $badge-light-color-scheme-solid-second-border
+            color: $badge-light-color-scheme-solid-secondary-color,
+            background: $badge-light-color-scheme-solid-secondary-background,
+            border: $badge-light-color-scheme-solid-secondary-border
         ),
         light_solid: (
             color: $badge-light-color-scheme-solid-light-color,
@@ -3566,14 +3501,14 @@ $md-typography: (
             active_icon: $button-light-color-scheme-primary-transparent-states-active-icon
         ),
 
-        second: (
-            color: $button-light-color-scheme-second-color,
-            border: $button-light-color-scheme-second-border,
-            background: $button-light-color-scheme-second-background,
-            icon: $button-light-color-scheme-second-icon,
+        secondary: (
+            color: $button-light-color-scheme-secondary-color,
+            border: $button-light-color-scheme-secondary-border,
+            background: $button-light-color-scheme-secondary-background,
+            icon: $button-light-color-scheme-secondary-icon,
 
-            active_border: $button-light-color-scheme-second-states-active-border,
-            active_background: $button-light-color-scheme-second-states-active-background
+            active_border: $button-light-color-scheme-secondary-states-active-border,
+            active_background: $button-light-color-scheme-secondary-states-active-background
         ),
 
         error: (
@@ -4017,16 +3952,16 @@ $md-typography: (
             focused: $tags-light-color-scheme-primary-states-focused,
             disabled: $tags-light-color-scheme-primary-states-disabled-text
         ),
-        second: (
-            border: $tags-light-color-scheme-second-border,
-            text: $tags-light-color-scheme-second-text,
-            background: $tags-light-color-scheme-second-background,
-            background_disabled: $tags-light-color-scheme-second-states-disabled-background,
-            border_disabled: $tags-light-color-scheme-second-states-disabled-border,
-            icon: $tags-light-color-scheme-second-icon,
-            icon_hovered: $tags-light-color-scheme-second-states-hover-icon,
-            focused: $tags-light-color-scheme-second-states-focused,
-            disabled: $tags-light-color-scheme-second-states-disabled-text
+        secondary: (
+            border: $tags-light-color-scheme-secondary-border,
+            text: $tags-light-color-scheme-secondary-text,
+            background: $tags-light-color-scheme-secondary-background,
+            background_disabled: $tags-light-color-scheme-secondary-states-disabled-background,
+            border_disabled: $tags-light-color-scheme-secondary-states-disabled-border,
+            icon: $tags-light-color-scheme-secondary-icon,
+            icon_hovered: $tags-light-color-scheme-secondary-states-hover-icon,
+            focused: $tags-light-color-scheme-secondary-states-focused,
+            disabled: $tags-light-color-scheme-secondary-states-disabled-text
         ),
         error: (
             border: $tags-light-color-scheme-error-border,
@@ -4196,9 +4131,9 @@ $md-typography: (
             border: $badge-dark-color-scheme-solid-primary-border
         ),
         second_solid: (
-            color: $badge-dark-color-scheme-solid-second-color,
-            background: $badge-dark-color-scheme-solid-second-background,
-            border: $badge-dark-color-scheme-solid-second-border
+            color: $badge-dark-color-scheme-solid-secondary-color,
+            background: $badge-dark-color-scheme-solid-secondary-background,
+            border: $badge-dark-color-scheme-solid-secondary-border
         ),
         light_solid: (
             color: $badge-dark-color-scheme-solid-light-color,
@@ -4281,14 +4216,14 @@ $md-typography: (
             active_icon: $button-dark-color-scheme-primary-transparent-states-active-icon
         ),
 
-        second: (
-            color: $button-dark-color-scheme-second-color,
-            border: $button-dark-color-scheme-second-border,
-            background: $button-dark-color-scheme-second-background,
-            icon: $button-dark-color-scheme-second-icon,
+        secondary: (
+            color: $button-dark-color-scheme-secondary-color,
+            border: $button-dark-color-scheme-secondary-border,
+            background: $button-dark-color-scheme-secondary-background,
+            icon: $button-dark-color-scheme-secondary-icon,
 
-            active_border: $button-dark-color-scheme-second-states-active-border,
-            active_background: $button-dark-color-scheme-second-states-active-background
+            active_border: $button-dark-color-scheme-secondary-states-active-border,
+            active_background: $button-dark-color-scheme-secondary-states-active-background
         ),
 
         error: (
@@ -4730,16 +4665,16 @@ $md-typography: (
             focused: $tags-dark-color-scheme-primary-states-focused,
             disabled: $tags-dark-color-scheme-primary-states-disabled-text
         ),
-        second: (
-            border: $tags-dark-color-scheme-second-border,
-            text: $tags-dark-color-scheme-second-text,
-            background: $tags-dark-color-scheme-second-background,
-            background_disabled: $tags-dark-color-scheme-second-states-disabled-background,
-            border_disabled: $tags-dark-color-scheme-second-states-disabled-border,
-            icon: $tags-dark-color-scheme-second-icon,
-            icon_hovered: $tags-dark-color-scheme-second-states-hover-icon,
-            focused: $tags-dark-color-scheme-second-states-focused,
-            disabled: $tags-dark-color-scheme-second-states-disabled-text
+        secondary: (
+            border: $tags-dark-color-scheme-secondary-border,
+            text: $tags-dark-color-scheme-secondary-text,
+            background: $tags-dark-color-scheme-secondary-background,
+            background_disabled: $tags-dark-color-scheme-secondary-states-disabled-background,
+            border_disabled: $tags-dark-color-scheme-secondary-states-disabled-border,
+            icon: $tags-dark-color-scheme-secondary-icon,
+            icon_hovered: $tags-dark-color-scheme-secondary-states-hover-icon,
+            focused: $tags-dark-color-scheme-secondary-states-focused,
+            disabled: $tags-dark-color-scheme-secondary-states-disabled-text
         ),
         error: (
             border: $tags-dark-color-scheme-error-border,
@@ -4909,9 +4844,9 @@ $md-typography: (
             border: map-get($tokens, 'badge-#{$scheme}-solid-primary-border')
         ),
         second_solid: (
-            color: map-get($tokens, 'badge-#{$scheme}-solid-second-color'),
-            background: map-get($tokens, 'badge-#{$scheme}-solid-second-background'),
-            border: map-get($tokens, 'badge-#{$scheme}-solid-second-border')
+            color: map-get($tokens, 'badge-#{$scheme}-solid-secondary-color'),
+            background: map-get($tokens, 'badge-#{$scheme}-solid-secondary-background'),
+            border: map-get($tokens, 'badge-#{$scheme}-solid-secondary-border')
         ),
         light_solid: (
             color: map-get($tokens, 'badge-#{$scheme}-solid-light-color'),
@@ -4994,14 +4929,14 @@ $md-typography: (
             active_icon: map-get($tokens, 'button-#{$scheme}-primary-transparent-states-active-icon')
         ),
 
-        second: (
-            color: map-get($tokens, 'button-#{$scheme}-second-color'),
-            border: map-get($tokens, 'button-#{$scheme}-second-border'),
-            background: map-get($tokens, 'button-#{$scheme}-second-background'),
-            icon: map-get($tokens, 'button-#{$scheme}-second-icon'),
+        secondary: (
+            color: map-get($tokens, 'button-#{$scheme}-secondary-color'),
+            border: map-get($tokens, 'button-#{$scheme}-secondary-border'),
+            background: map-get($tokens, 'button-#{$scheme}-secondary-background'),
+            icon: map-get($tokens, 'button-#{$scheme}-secondary-icon'),
 
-            active_border: map-get($tokens, 'button-#{$scheme}-second-states-active-border'),
-            active_background: map-get($tokens, 'button-#{$scheme}-second-states-active-background')
+            active_border: map-get($tokens, 'button-#{$scheme}-secondary-states-active-border'),
+            active_background: map-get($tokens, 'button-#{$scheme}-secondary-states-active-background')
         ),
 
         error: (
@@ -5452,16 +5387,16 @@ $md-typography: (
             focused: map-get($tokens, 'tags-#{$scheme}-primary-states-focused'),
             disabled: map-get($tokens, 'tags-#{$scheme}-primary-states-disabled-text')
         ),
-        second: (
-            border: map-get($tokens, 'tags-#{$scheme}-second-border'),
-            text: map-get($tokens, 'tags-#{$scheme}-second-text'),
-            background: map-get($tokens, 'tags-#{$scheme}-second-background'),
-            background_disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-background'),
-            border_disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-border'),
-            icon: map-get($tokens, 'tags-#{$scheme}-second-icon'),
-            icon_hovered: map-get($tokens, 'tags-#{$scheme}-second-states-hover-icon'),
-            focused: map-get($tokens, 'tags-#{$scheme}-second-states-focused'),
-            disabled: map-get($tokens, 'tags-#{$scheme}-second-states-disabled-text')
+        secondary: (
+            border: map-get($tokens, 'tags-#{$scheme}-secondary-border'),
+            text: map-get($tokens, 'tags-#{$scheme}-secondary-text'),
+            background: map-get($tokens, 'tags-#{$scheme}-secondary-background'),
+            background_disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-background'),
+            border_disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-border'),
+            icon: map-get($tokens, 'tags-#{$scheme}-secondary-icon'),
+            icon_hovered: map-get($tokens, 'tags-#{$scheme}-secondary-states-hover-icon'),
+            focused: map-get($tokens, 'tags-#{$scheme}-secondary-states-focused'),
+            disabled: map-get($tokens, 'tags-#{$scheme}-secondary-states-disabled-text')
         ),
         error: (
             border: map-get($tokens, 'tags-#{$scheme}-error-border'),
@@ -5654,7 +5589,7 @@ $md-typography: (
 
 
 $light-primary: mc-palette($light-color-scheme-primary-palette, $light-color-scheme-primary-default);
-$light-second: mc-palette($light-color-scheme-second-palette, $light-color-scheme-second-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);
 
 $light-info: mc-palette($light-color-scheme-info-palette, $light-color-scheme-info-default);
@@ -5663,7 +5598,7 @@ $light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-sch
 
 @function mc-light-theme_import(
     $primary: $light-primary,
-    $second: $light-second,
+    $secondary: $light-secondary,
     $error: $light-error,
     $info: $light-info,
     $success: $light-success,
@@ -5703,7 +5638,7 @@ $light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-sch
         is-dark: false,
 
         primary: $primary,
-        second: $second,
+        secondary: $secondary,
         error: $error,
 
         foreground: $foreground,
@@ -5720,7 +5655,7 @@ $light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-sch
 }
 
 $dark-primary: mc-palette($dark-color-scheme-primary-palette, $dark-color-scheme-primary-default);
-$dark-second: mc-palette($dark-color-scheme-second-palette, $dark-color-scheme-second-default);
+$dark-secondary: mc-palette($dark-color-scheme-secondary-palette, $dark-color-scheme-secondary-default);
 $dark-error: mc-palette($dark-color-scheme-error-palette, $dark-color-scheme-error-default);
 
 $dark-info: mc-palette($dark-color-scheme-info-palette, $dark-color-scheme-info-default);
@@ -5729,7 +5664,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 @function mc-dark-theme_import(
     $primary: $dark-primary,
-    $second: $dark-second,
+    $secondary: $dark-secondary,
     $error: $dark-error,
     $info: $dark-info,
     $success: $dark-success,
@@ -5769,7 +5704,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         is-dark: true,
 
         primary: $primary,
-        second: $second,
+        secondary: $secondary,
         error: $error,
 
         foreground: $foreground,
@@ -5838,7 +5773,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         foreground: _theme_foreground($tokens, $scheme),
 
         primary: _theme_palette($tokens, $scheme, primary),
-        second: _theme_palette($tokens, $scheme, second),
+        secondary: _theme_palette($tokens, $scheme, secondary),
         error: _theme_palette($tokens, $scheme, error),
 
         warning: _theme_palette($tokens, $scheme, warning),
@@ -5861,7 +5796,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         foreground: _theme_foreground($tokens, $scheme),
 
         primary: _theme_palette($tokens, $scheme, primary),
-        second: _theme_palette($tokens, $scheme, second),
+        secondary: _theme_palette($tokens, $scheme, secondary),
         error: _theme_palette($tokens, $scheme, error),
 
         warning: _theme_palette($tokens, $scheme, warning),
@@ -5875,6 +5810,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 }
 
 
+
 @function mc-typography-level(
     $font-size,
     $line-height: $font-size,
@@ -5993,6 +5929,36 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     @return map-merge($config, (font-family: $font-family));
 }
 
+@function mc-markdown-typography-config() {
+    $font-family: $font-family-base;
+    $md-typography: map-get($md-typography, md-typography);
+
+    $config: (
+        md-h1:              map-get($md-typography, md-h1),
+        md-h2:              map-get($md-typography, md-h2),
+        md-h3:              map-get($md-typography, md-h3),
+        md-h4:              map-get($md-typography, md-h4),
+        md-h5:              map-get($md-typography, md-h5),
+        md-h6:              map-get($md-typography, md-h6),
+
+        md-body:            map-get($md-typography, md-body),
+        md-body-mono:       map-get($md-typography, md-body-mono),
+        md-caption:         map-get($md-typography, md-caption),
+        md-table-cell:      map-get($md-typography, md-table-cell),
+        md-table-header:    map-get($md-typography, md-table-header),
+    );
+
+    @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));
+        }
+    }
+
+    // Add the base font family to the config.
+    @return map-merge($config, (font-family: $font-family));
+}
+
 
 @mixin mc-base-typography($config) {
     .mc-display-1 {
@@ -6068,168 +6034,36 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     }
 }
 
+@mixin mc-markdown-base-typography($config) {
+    // h1, h2, h3, h4, h5, h6
+    @for $i from 1 through 6 {
+        .md-h#{$i} {
+            @include mc-typography-level-to-styles($config, md-h#{$i});
+        }
+    }
 
+    .md-body {
+        @include mc-typography-level-to-styles($config, md-body);
+    }
 
+    .md-body-mono {
+        @include mc-typography-level-to-styles($config, md-body-mono);
+    }
 
+    .md-caption{
+        @include mc-typography-level-to-styles($config, md-caption);
+    }
 
+    .md-table-cell{
+        @include mc-typography-level-to-styles($config, md-table-cell);
+    }
 
-.mc-alert {
-    display: flex;
-    align-items: baseline;
+    .md-table-header{
+        @include mc-typography-level-to-styles($config, md-table-header);
+    }
+}
 
-    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;
-    }
-}
 
 
 
@@ -6373,90 +6207,348 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 
 
 
-@mixin mc-forms-theme($theme) {
-    $foreground: map-get($theme, foreground);
+.mc-alert {
+    display: flex;
+    align-items: baseline;
 
-    $forms: map-get(map-get($theme, components), forms);
+    vertical-align: top;
+    text-align: left;
 
-    .mc-form__label {
-        color: map-get($forms, label);
+    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-form__legend {
-        color: map-get($forms, legend);
+    .mc-alert__icon {
+        margin-right: var(--mc-alert-size-icon-margin, $alert-size-icon-margin);
     }
-}
 
-@mixin mc-forms-typography($config) {
-    .mc-form__label {
-        @include mc-typography-level-to-styles($config, $forms-font-default-label);
+    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-form__legend {
-        @include mc-typography-level-to-styles($config, $forms-font-default-legend);
+    &.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;
 
-@mixin mc-option-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+        border: 1px solid transparent;
+        outline: 0;
 
-    $primary: map-get($theme, primary);
+        background: transparent;
 
-    .mc-option {
-        color: map-get($foreground, text);
+        padding: 0;
 
-        &:hover:not(.mc-disabled) {
-            .mc-option-overlay {
-                background: map-get($background, overlay-hover);
-            }
-        }
+        cursor: pointer;
+        text-align: center;
 
-        &.mc-active {
-            border-color: map-get(map-get($theme, states), focused-color);
-        }
+        height: auto;
+        min-height: auto;
+    }
 
-        &.mc-selected {
-            background: map-get(map-get($theme, states), selected-color);
+    &.mc-alert_small {
+        .mc-alert__close {
+            top: 10px;
         }
+    }
 
-        &.mc-disabled {
-            background: transparent;
-
-            color: map-get($foreground, text-disabled);
+    &:not(.mc-alert_small) {
+        .mc-alert__close {
+            top: 14px;
         }
     }
 }
 
-@mixin mc-option-typography($config) {
-    .mc-option {
-        @include mc-typography-level-to-styles($config, $option-font-default);
+@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;
+    }
 
-@mixin mc-optgroup-theme($theme) {
-    $foreground: map-get($theme, foreground);
-
-    .mc-optgroup-label {
+    .mc-alert {
         color: map-get($foreground, text);
     }
 
-    .mc-disabled .mc-optgroup-label {
-        color: map-get($foreground, text-disabled);
-    }
+    .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-optgroup-typography($config) {
-    .mc-optgroup-label {
-        @include mc-typography-level-to-styles($config, $optgroup-font-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
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+    
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace +
+            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+    
+    @return $string;
+}
+
+
+.mc-scrollbar {
+    //firefox
+    scrollbar-width: auto;
+
+    // webkit
+    &::-webkit-scrollbar,
+    ::-webkit-scrollbar {
+        width: var(--mc-scrollbar-size-track-width, $scrollbar-size-track-width);
+    }
+
+    &::-webkit-scrollbar-thumb,
+    ::-webkit-scrollbar-thumb {
+        width: var(--mc-scrollbar-size-thumb-width, $scrollbar-size-thumb-width);
+        border-width: var(--mc-scrollbar-size-thumb-inset-border-width, $scrollbar-size-thumb-border-width);
+        border-radius: var(--mc-scrollbar-size-thumb-inset-border-radius, $scrollbar-size-thumb-border-radius);
+    }
+
+    &::-webkit-scrollbar-button,
+    ::-webkit-scrollbar-button {
+        display: none;
+
+        height: var(--mc-scrollbar-size-arrow-icon-height, $scrollbar-size-arrow-icon-height);
+        width: var(--mc-scrollbar-size-arrow-icon-width, $scrollbar-size-arrow-icon-width);
+    }
+}
+
+@mixin mc-scrollbar-theme($theme) {
+    $scrollbar: map-get(map-get($theme, components), scrollbar);
+    $thumb: map-get($scrollbar, thumb);
+    $arrow: map-get($scrollbar, arrow);
+
+    .mc-scrollbar {
+
+        // firefox
+        scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
+
+        // webkit
+        &::-webkit-scrollbar,
+        ::-webkit-scrollbar {
+            background-color: map-get($scrollbar, track);
+        }
+
+        &::-webkit-scrollbar-corner,
+        ::-webkit-scrollbar-corner {
+            background-color: map-get($scrollbar, corner-background);
+        }
+
+
+        &::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            background-color: map-get($thumb, normal);
+
+            border-color: map-get($scrollbar, track);
+            border-style: solid;
+
+            &:hover {
+                background-color: map-get($thumb, hover);
+            }
+
+            &:disabled {
+                background-color: map-get($thumb, disabled);
+            }
+
+            &:active {
+                background-color: map-get($thumb, active);
+            }
+        }
+
+        /* stylelint-disable */
+        &::-webkit-scrollbar-button,
+        ::-webkit-scrollbar-button {
+            background-color: map-get($arrow, background);
+            background-size: 10px 10px;
+            background-repeat: no-repeat;
+            background-position: center center;
+
+            &:single-button {
+                &:horizontal:decrement {
+                    @include arrow-image(right, map-get($arrow, normal));
+                }
+
+                &:horizontal:increment {
+                    @include arrow-image(left, map-get($arrow, normal));
+                }
+
+                &:vertical:decrement {
+                    @include arrow-image(up, map-get($arrow, normal));
+                }
+
+                &:vertical:increment {
+                    @include arrow-image(down, map-get($arrow, normal));
+                }
+            }
+
+            // disable double-button
+            &:vertical:start:increment,
+            &:vertical:end:decrement,
+            &:horizontal:end:increment,
+            &:horizontal:end:decrement {
+                display: none;
+            }
+        }
+        /* stylelint-enable */
+    }
+}
+
+@mixin arrow-image($direction, $color) {
+    $color: str-replace('#{$color}', '#', '%23');
+
+    @if $direction == up {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4L4 0L8 4H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == left {
+        background-image: url('data:image/svg+xml;utf8,<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.354973 0.111252L3.64503 3.40028C3.84808 3.60327 3.84107 3.91407 3.64503 4.11011L0.354973 7.40017C0.15192 7.60322 0 7.53112 0 7.25478V0.256747C0 -0.0128497 0.158927 -0.0847332 0.354973 0.111252Z" fill="#{$color}"/></svg>');
+    } @else if $direction == down {
+        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L4 4L8 0H0Z" fill="#{$color}"/></svg>');
+    } @else if $direction == right {
+        background-image: url('data:image/svg+xml;utf8,<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.64975 0.111682C3.8458 -0.0845414 4.00472 -0.0128511 4.00472 0.256746V7.25478C4.00472 7.53112 3.8528 7.6034 3.64975 7.4006L0.359696 4.11454C0.163649 3.91873 0.156643 3.60794 0.359696 3.40471L3.64975 0.111682Z" fill="#{$color}"/></svg>');
+    }
+}
+
+
+@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-pseudo-checkbox-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $checkbox: map-get(map-get($theme, components), checkbox);
+
+    .mc-pseudo-checkbox {
+        &.mc-primary {
+            @include mc-pseudo-checkbox-color(map-get($checkbox, default));
+        }
+
+        &.mc-error {
+            @include mc-pseudo-checkbox-color(map-get($checkbox, error));
+        }
+
+        &.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);
+            }
+        }
     }
 }
 
@@ -6563,8 +6655,8 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
             }
         }
 
-        &.mc-second {
-            @include mc-button-color(map-get($button, second));
+        &.mc-secondary {
+            @include mc-button-color(map-get($button, secondary));
 
             &.mc-button_transparent {
                 @include mc-button_transparent($theme);
@@ -6591,7 +6683,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         }
 
         &.mc-primary,
-        &.mc-second,
+        &.mc-secondary,
         &.mc-error {
             &.cdk-keyboard-focused {
                 border-color: map-get(map-get($theme, states), focused-color);
@@ -6630,22 +6722,81 @@ $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);
 
-/* stylelint-disable no-descending-specificity */
-@mixin mc-checkbox-color($states) {
-    & .mc-checkbox-frame {
-        background-color: map-get($states, background);
+    $card: map-get(map-get($theme, components), card);
+    $popup: map-get(map-get($theme, components), popup);
 
-        border-color: map-get($states, border);
+    $is-dark: map-get($theme, is-dark);
 
-        & .mc-checkbox-checkmark,
-        & .mc-checkbox-mixedmark {
-            color: map-get($states, color);
-        }
-    }
+    .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);
+        }
+    }
+}
+
+
+
+
+
+/* stylelint-disable no-descending-specificity */
+@mixin mc-checkbox-color($states) {
+    & .mc-checkbox-frame {
+        background-color: map-get($states, background);
+
+        border-color: map-get($states, border);
+
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map-get($states, color);
+        }
+    }
 
     &.mc-checked,
     &.mc-indeterminate {
@@ -7072,12 +7223,12 @@ $mc-datepicker-today-fade-amount: 0.2;
     $background: map-get($theme, background);
 
     $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
+    $secondary: map-get($theme, secondary);
 
     $datepicker: map-get(map-get($theme, components), datepicker);
 
     .mc-calendar__table-header {
-        color: mc-color($second, 400);
+        color: mc-color($secondary, 400);
     }
 
     .mc-datepicker-toggle__button.mc-icon-button {
@@ -7114,7 +7265,7 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     .mc-calendar__body-cell:not(.mc-calendar__body_disabled):hover {
         & > .mc-calendar__body-cell-content:not(.mc-selected) {
-            background-color: mc-color($second, A60);
+            background-color: mc-color($secondary, A60);
         }
     }
 
@@ -7157,41 +7308,15 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 }
 
+@mixin mc-divider-theme($theme) {
+    $divider: map-get(map-get($theme, components), divider);
 
-
-
-
-@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-divider_horizontal {
+        border-top-color: map-get($divider, color);
     }
 
-    .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);
-        }
+    .mc-divider_vertical {
+        border-right-color: map-get($divider, color);
     }
 }
 
@@ -7202,11 +7327,10 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-
 @mixin mc-dropdown-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
-    $second: map-get($theme, second);
+    $secondary: map-get($theme, secondary);
 
     .mc-dropdown__panel {
         @include popup-params($theme);
@@ -7255,7 +7379,7 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     .mc-dropdown-trigger.mc-pressed {
         & .mc-button-overlay {
-            background: mc-color($second, A100);
+            background: mc-color($secondary, A100);
         }
     }
 }
@@ -7290,7 +7414,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     $background: map-get($theme, background);
 
     $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
+    $secondary: map-get($theme, secondary);
     $error: map-get($theme, error);
 
     $form-field: map-get(map-get($theme, components), form-field);
@@ -7358,8 +7482,8 @@ $mc-datepicker-today-fade-amount: 0.2;
             color: mc-color($primary);
         }
 
-        &.mc-second {
-            color: mc-color($second);
+        &.mc-secondary {
+            color: mc-color($secondary);
         }
 
         &.mc-error {
@@ -7411,6 +7535,157 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin mc-icon-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $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-secondary {
+            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-secondary {
+            &: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);
@@ -7707,134 +7982,9 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-@function mc-markdown-typography-config() {
-    $font-family: $font-family-base;
-    $md-typography: map-get($md-typography, md-typography);
-
-    $config: (
-        md-h1:              map-get($md-typography, md-h1),
-        md-h2:              map-get($md-typography, md-h2),
-        md-h3:              map-get($md-typography, md-h3),
-        md-h4:              map-get($md-typography, md-h4),
-        md-h5:              map-get($md-typography, md-h5),
-        md-h6:              map-get($md-typography, md-h6),
-
-        md-body:            map-get($md-typography, md-body),
-        md-body-mono:       map-get($md-typography, md-body-mono),
-        md-caption:         map-get($md-typography, md-caption),
-        md-table-cell:      map-get($md-typography, md-table-cell),
-        md-table-header:    map-get($md-typography, md-table-header),
-    );
-
-    @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));
-        }
-    }
-
-    // Add the base font family to the config.
-    @return map-merge($config, (font-family: $font-family));
-}
-
-@mixin mc-markdown-typography($config) {
-    .mc-markdown {
-        .mc-markdown__h1 {
-            @include mc-typography-level-to-styles($config, $markdown-h1-font-default);
-        }
-
-        .mc-markdown__h2 {
-            @include mc-typography-level-to-styles($config, $markdown-h2-font-default);
-        }
-
-        .mc-markdown__h3 {
-            @include mc-typography-level-to-styles($config, $markdown-h3-font-default);
-        }
-
-        .mc-markdown__h4 {
-            @include mc-typography-level-to-styles($config, $markdown-h4-font-default);
-        }
-
-        .mc-markdown__h5 {
-            @include mc-typography-level-to-styles($config, $markdown-h5-font-default);
-        }
-
-        .mc-markdown__h6 {
-            @include mc-typography-level-to-styles($config, $markdown-h6-font-default);
-        }
-
-        .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, $markdown-p-font-default);
-        }
-
-        .mc-markdown__ul,
-        .mc-markdown__ol {
-            @include mc-typography-level-to-styles($config, $markdown-list-font-default);
-        }
-
-        .mc-markdown__blockquote > .mc-markdown__p {
-            @include mc-typography-level-to-styles($config, $markdown-blockquote-font-default);
-        }
-
-        .mc-markdown__code {
-            @include mc-typography-level-to-styles($config, $markdown-code-font-default);
-        }
-
-        .mc-markdown__a {
-            @include mc-typography-level-to-styles($config, $markdown-link-font-default);
-        }
-
-        .mc-markdown__img + em {
-            @include mc-typography-level-to-styles($config, $markdown-image-font-caption);
-        }
-
-        .mc-markdown__table > .mc-markdown__thead {
-            @include mc-typography-level-to-styles($config, $markdown-table-font-header);
-        }
-
-        .mc-markdown__table > .mc-markdown__tbody {
-            @include mc-typography-level-to-styles($config, $markdown-table-font-body);
-        }
-    }
-}
-
-@mixin mc-markdown-base-typography($config) {
-
-    // h1,h2,h3,h4,h5,h6
-    @for $i from 1 through 6 {
-        .md-h#{$i} {
-            @include mc-typography-level-to-styles($config, md-h#{$i});
-        }
-    }
-
-    .md-body {
-        @include mc-typography-level-to-styles($config, md-body);
-    }
-
-    .md-body-mono {
-        @include mc-typography-level-to-styles($config, md-body-mono);
-    }
-
-    .md-caption{
-        @include mc-typography-level-to-styles($config, md-caption);
-    }
-
-    .md-table-cell{
-        @include mc-typography-level-to-styles($config, md-table-cell);
-    }
-
-    .md-table-header{
-        @include mc-typography-level-to-styles($config, md-table-header);
-    }
-}
-
-
-
-
-
-@mixin mc-modal-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
+@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);
@@ -7917,108 +8067,263 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
-@mixin mc-navbar-theme($theme) {
-    $background: map-get($theme, background);
-    $primary: map-get($theme, primary);
 
-    $navbar: map-get(map-get($theme, components), navbar);
-    $navbar-item: map-get(map-get($theme, components), navbar-item);
 
-    .mc-navbar,
-    .mc-vertical-navbar .mc-vertical-navbar__container {
-        background-color: map-get($navbar, background);
-    }
+@mixin mc-markdown-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
-    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
-        background-color: map-get($navbar-item, state-hover);
-    }
+    $markdown: map-get(map-get($theme, components), markdown);
 
-    .mc-navbar-brand.mc-vertical.mc-collapsed {
-        & .mc-navbar-logo:hover {
-            background-color: map-get($navbar-item, state-hover);
-        }
-    }
+    .mc-markdown {
+        color: map-get($foreground, text);
+        background: map-get($background, background);;
 
-    .mc-navbar-title {
-        color: map-get($navbar-item, color);
-    }
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .mc-markdown__h#{$i} {
+                color: map-get($markdown, h#{$i}-color);
+            }
+        }
 
-    .mc-navbar-item,
-    .mc-navbar-brand,
-    .mc-navbar-toggle {
-        color: map-get($navbar-item, color);
+        .mc-markdown__p {
+            color: map-get($markdown, p-color);
+        }
 
-        & > .mc-icon {
-            color: map-get($navbar-item, icon-color);
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            color: map-get($markdown, list-color);
         }
 
-        & .mc-navbar-item__arrow-icon {
-            color: map-get($navbar-item, 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-active {
-            background: map-get($navbar-item, state-selected);
+        .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);
         }
 
-        &:hover:not(.mc-navbar-item_button) {
-            cursor: pointer;
+        .mc-markdown__a {
+            color: map-get($markdown, link-text);
+            border-bottom-color: map-get($markdown, link-border-bottom);
 
-            & .mc-navbar-item__overlay {
-                background-color: map-get($navbar-item, state-hover);
+            &:visited {
+                color: map-get($markdown, link-state-visited-text);
+                border-bottom-color: map-get($markdown, link-state-visited-border-bottom);
             }
-        }
 
-        &:active:not(.mc-navbar-item_button) {
-            & .mc-navbar-item__overlay {
-                background: map-get($navbar-item, state-active);
+            &:hover {
+                color: map-get($markdown, link-state-hover-text);
+                transition: color 0ms;
+                border-bottom-color: map-get($markdown, link-state-hover-border-bottom);
             }
-        }
 
-        &[disabled] {
-            pointer-events: none;
-            cursor: default;
+            &:active {
+                color: map-get($markdown, link-state-active-text);
+            }
 
-            .mc-navbar-item__title,
-            .mc-icon {
-                opacity: map-get($navbar-item, state-disabled-opacity);
+            &:focus {
+                outline:
+                    map-get($markdown, link-state-focused-outline)
+                    solid
+                    $markdown-link-size-state-focused-outline-width;
+
+                outline-offset: $markdown-link-size-state-focused-outline-offset;
             }
         }
-    }
 
-    .mc-navbar-focusable-item {
-        outline: none;
+        .mc-markdown__img + em {
+            color: map-get($markdown, image-caption-text);
+        }
 
-        /* stylelint-disable no-descending-specificity */
-        &.cdk-keyboard-focused .mc-navbar-item__overlay {
-            box-shadow:
-                inset 0 0 0 2px map-get(map-get($theme, states), focused-color),
-                inset 0 0 0 3px map-get($background, background);
+        .mc-markdown__hr {
+            border-bottom-color: map-get($markdown, hr-color);
         }
-        /* stylelint-enable no-descending-specificity */
-    }
 
-    .mc-navbar-divider {
-        background-color: map-get($navbar, divider-background);
-    }
-}
+        .mc-markdown__table > .mc-markdown__thead {
+            color: map-get($markdown, table-header);
+            border-bottom-color: map-get($markdown, table-border);
+        }
 
-button {
-    &.mc-navbar-item,
-    &.mc-navbar-brand,
-    &.mc-navbar-toggle {
-        background: transparent;
-        border: none;
+        .mc-markdown__table > .mc-markdown__tbody {
+            color: map-get($markdown, table-body);
+        }
     }
 }
 
-@mixin mc-navbar-typography($config) {
-    .mc-navbar-title {
-        @include mc-typography-level-to-styles($config, $navbar-font-title);
-    }
-
-    .mc-navbar-subtitle {
-        @include mc-typography-level-to-styles($config, extra-small-text);
-    }
+@mixin mc-markdown-typography($config) {
+    .mc-markdown {
+        .mc-markdown__h1 {
+            @include mc-typography-level-to-styles($config, $markdown-h1-font-default);
+        }
+
+        .mc-markdown__h2 {
+            @include mc-typography-level-to-styles($config, $markdown-h2-font-default);
+        }
+
+        .mc-markdown__h3 {
+            @include mc-typography-level-to-styles($config, $markdown-h3-font-default);
+        }
+
+        .mc-markdown__h4 {
+            @include mc-typography-level-to-styles($config, $markdown-h4-font-default);
+        }
+
+        .mc-markdown__h5 {
+            @include mc-typography-level-to-styles($config, $markdown-h5-font-default);
+        }
+
+        .mc-markdown__h6 {
+            @include mc-typography-level-to-styles($config, $markdown-h6-font-default);
+        }
+
+        .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, $markdown-p-font-default);
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            @include mc-typography-level-to-styles($config, $markdown-list-font-default);
+        }
+
+        .mc-markdown__blockquote > .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, $markdown-blockquote-font-default);
+        }
+
+        .mc-markdown__code {
+            @include mc-typography-level-to-styles($config, $markdown-code-font-default);
+        }
+
+        .mc-markdown__a {
+            @include mc-typography-level-to-styles($config, $markdown-link-font-default);
+        }
+
+        .mc-markdown__img + em {
+            @include mc-typography-level-to-styles($config, $markdown-image-font-caption);
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            @include mc-typography-level-to-styles($config, $markdown-table-font-header);
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            @include mc-typography-level-to-styles($config, $markdown-table-font-body);
+        }
+    }
+}
+
+
+
+
+
+@mixin mc-navbar-theme($theme) {
+    $background: map-get($theme, background);
+    $primary: map-get($theme, primary);
+
+    $navbar: map-get(map-get($theme, components), navbar);
+    $navbar-item: map-get(map-get($theme, components), navbar-item);
+
+    .mc-navbar,
+    .mc-vertical-navbar .mc-vertical-navbar__container {
+        background-color: map-get($navbar, background);
+    }
+
+    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
+        background-color: map-get($navbar-item, state-hover);
+    }
+
+    .mc-navbar-brand.mc-vertical.mc-collapsed {
+        & .mc-navbar-logo:hover {
+            background-color: map-get($navbar-item, state-hover);
+        }
+    }
+
+    .mc-navbar-title {
+        color: map-get($navbar-item, color);
+    }
+
+    .mc-navbar-item,
+    .mc-navbar-brand,
+    .mc-navbar-toggle {
+        color: map-get($navbar-item, color);
+
+        & > .mc-icon {
+            color: map-get($navbar-item, icon-color);
+        }
+
+        & .mc-navbar-item__arrow-icon {
+            color: map-get($navbar-item, color);
+        }
+
+        &.mc-active {
+            background: map-get($navbar-item, state-selected);
+        }
+
+        &:hover:not(.mc-navbar-item_button) {
+            cursor: pointer;
+
+            & .mc-navbar-item__overlay {
+                background-color: map-get($navbar-item, state-hover);
+            }
+        }
+
+        &:active:not(.mc-navbar-item_button) {
+            & .mc-navbar-item__overlay {
+                background: map-get($navbar-item, state-active);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            cursor: default;
+
+            .mc-navbar-item__title,
+            .mc-icon {
+                opacity: map-get($navbar-item, state-disabled-opacity);
+            }
+        }
+    }
+
+    .mc-navbar-focusable-item {
+        outline: none;
+
+        /* stylelint-disable no-descending-specificity */
+        &.cdk-keyboard-focused .mc-navbar-item__overlay {
+            box-shadow:
+                inset 0 0 0 2px map-get(map-get($theme, states), focused-color),
+                inset 0 0 0 3px map-get($background, background);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .mc-navbar-divider {
+        background-color: map-get($navbar, divider-background);
+    }
+}
+
+button {
+    &.mc-navbar-item,
+    &.mc-navbar-brand,
+    &.mc-navbar-toggle {
+        background: transparent;
+        border: none;
+    }
+}
+
+@mixin mc-navbar-typography($config) {
+    .mc-navbar-title {
+        @include mc-typography-level-to-styles($config, $navbar-font-title);
+    }
+
+    .mc-navbar-subtitle {
+        @include mc-typography-level-to-styles($config, extra-small-text);
+    }
 
     .mc-navbar-brand {
         .mc-navbar-title {
@@ -8144,6 +8449,56 @@ button {
 
 
 
+@mixin mc-progress-bar-theme($theme) {
+    $primary: map-get($theme, primary);
+    $secondary: map-get($theme, secondary);
+    $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-secondary .mc-progress-bar__line {
+            background-color: mc-color($secondary);
+        }
+
+        &.mc-error .mc-progress-bar__line {
+            background-color: mc-color($error);
+        }
+    }
+}
+
+
+
+
+@mixin mc-progress-spinner-theme($theme) {
+    $primary: map-get($theme, primary);
+    $secondary: map-get($theme, secondary);
+    $error: map-get($theme, error);
+
+    .mc-progress-spinner {
+        &.mc-primary .mc-progress-spinner__circle {
+            stroke: mc-color($primary);
+        }
+
+        &.mc-secondary .mc-progress-spinner__circle {
+            stroke: mc-color($secondary);
+        }
+
+        &.mc-error .mc-progress-spinner__circle {
+            stroke: mc-color($error);
+        }
+    }
+}
+
+
+
+
 
 @mixin mc-radio-theme($theme) {
     $foreground: map-get($theme, foreground);
@@ -8352,6 +8707,33 @@ 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);
+    }
+}
+
 
 
 
@@ -8592,109 +8974,20 @@ 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-tag-color($params) {
+    background: map-get($params, background);
+    border-color: map-get($params, border);
+
+    & .mc-tag__text {
+        color: map-get($params, text);
     }
-}
 
-@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-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);
+    &.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 {
@@ -8724,10 +9017,6 @@ button {
     $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);
-
     $tags: map-get(map-get($theme, components), tags);
 
     .mc-tag {
@@ -8735,8 +9024,8 @@ button {
             @include mc-tag-color(map-get($tags, primary));
         }
 
-        &.mc-second {
-            @include mc-tag-color(map-get($tags, second));
+        &.mc-secondary {
+            @include mc-tag-color(map-get($tags, secondary));
         }
 
         &.mc-error {
@@ -8839,6 +9128,95 @@ 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) {
@@ -9190,7 +9568,7 @@ button {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    $second: map-get($theme, second);
+    $secondary: map-get($theme, secondary);
 
     $is-dark: map-get($theme, is-dark);
 
@@ -9202,707 +9580,108 @@ button {
         color: map-get($foreground, text);
 
         &:hover {
-            background-color: map-get($background, overlay-hover);
-        }
-
-        &.mc-focused {
-            border-color: map-get(map-get($theme, states), focused-color);
-
-            & .mc-tree-node-toggle:not([disabled]) .mc-icon {
-                color: mc-color($second, if($is-dark, 300, 700));
-            }
-        }
-
-        &.mc-selected {
-            background: map-get(map-get($theme, states), selected-color);
-        }
-
-        &[disabled] {
-            background-color: transparent;
-
-            color: map-get($foreground, text-disabled);
-        }
-    }
-
-    /* stylelint-disable no-descending-specificity */
-    .mc-tree-node-toggle {
-        & .mc-icon {
-            color: mc-color($second, 400);
-        }
-
-        &:hover .mc-icon {
-            color: mc-color($second, if($is-dark, 300, 700));
-        }
-
-        &[disabled] .mc-icon {
-            color: mc-color($second, if($is-dark, 700, 300));
-        }
-    }
-    /* stylelint-enable no-descending-specificity */
-}
-
-@mixin mc-tree-typography($config) {
-    .mc-tree-option {
-        @include mc-typography-level-to-styles($config, $tree-font-node);
-    }
-}
-
-
-
-
-
-@mixin mc-table-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-    .mc-table {
-        & > thead {
-            color: map-get($foreground, text-less-contrast);
-
-            & > tr > th {
-                border-color: map-get($foreground, divider);
-            }
-        }
-
-        & > tbody {
-            & > tr {
-                &:hover {
-                    background-color: map-get($background, overlay-hover);
-                }
-
-                & > th,
-                & > td {
-                    color: map-get($foreground, text);
-                }
-            }
-        }
-
-        &.mc-table_bordered {
-            & > tbody > tr {
-                & th,
-                & td {
-                    border-color: map-get($foreground, divider);
-                }
-            }
-        }
-    }
-}
-
-@mixin mc-table-typography($config) {
-    .mc-table {
-        & > thead {
-            & > tr > th {
-                font-weight: normal;
-            }
-
-            @include mc-typography-level-to-styles($config, $table-font-header);
-        }
-
-        & > tbody {
-            & > tr > th {
-                font-weight: normal;
-            }
-
-            @include mc-typography-level-to-styles($config, $table-font-body);
-        }
-    }
-}
-
-
-
-
-
-
-@mixin mosaic-typography($config: null) {
-    @if $config == null {
-        $config: mc-typography-config();
-    }
-
-    @include mc-base-typography($config);
-
-    @include mc-alert-typography($config);
-    @include mc-badge-typography($config);
-    @include mc-button-typography($config);
-    @include mc-checkbox-typography($config);
-    @include mc-code-block-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-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);
-
-    $md-config: mc-markdown-typography-config();
-    @include mc-markdown-base-typography($md-config);
-    @include mc-markdown-typography($md-config);
-}
-
-
-
-
-
-
-/// Replace `$search` with `$replace` in `$string`
-/// @author Kitty Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
-/// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-    
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace +
-            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-    
-    @return $string;
-}
-
-
-.mc-scrollbar {
-    //firefox
-    scrollbar-width: auto;
-
-    // webkit
-    &::-webkit-scrollbar,
-    ::-webkit-scrollbar {
-        width: var(--mc-scrollbar-size-track-width, $scrollbar-size-track-width);
-    }
-
-    &::-webkit-scrollbar-thumb,
-    ::-webkit-scrollbar-thumb {
-        width: var(--mc-scrollbar-size-thumb-width, $scrollbar-size-thumb-width);
-        border-width: var(--mc-scrollbar-size-thumb-inset-border-width, $scrollbar-size-thumb-border-width);
-        border-radius: var(--mc-scrollbar-size-thumb-inset-border-radius, $scrollbar-size-thumb-border-radius);
-    }
-
-    &::-webkit-scrollbar-button,
-    ::-webkit-scrollbar-button {
-        display: none;
-
-        height: var(--mc-scrollbar-size-arrow-icon-height, $scrollbar-size-arrow-icon-height);
-        width: var(--mc-scrollbar-size-arrow-icon-width, $scrollbar-size-arrow-icon-width);
-    }
-}
-
-@mixin mc-scrollbar-theme($theme) {
-    $scrollbar: map-get(map-get($theme, components), scrollbar);
-    $thumb: map-get($scrollbar, thumb);
-    $arrow: map-get($scrollbar, arrow);
-
-    .mc-scrollbar {
-
-        // firefox
-        scrollbar-color: map-get($thumb, normal) map-get($scrollbar, track);
-
-        // webkit
-        &::-webkit-scrollbar,
-        ::-webkit-scrollbar {
-            background-color: map-get($scrollbar, track);
-        }
-
-        &::-webkit-scrollbar-corner,
-        ::-webkit-scrollbar-corner {
-            background-color: map-get($scrollbar, corner-background);
-        }
-
-
-        &::-webkit-scrollbar-thumb,
-        ::-webkit-scrollbar-thumb {
-            background-color: map-get($thumb, normal);
-
-            border-color: map-get($scrollbar, track);
-            border-style: solid;
-
-            &:hover {
-                background-color: map-get($thumb, hover);
-            }
-
-            &:disabled {
-                background-color: map-get($thumb, disabled);
-            }
-
-            &:active {
-                background-color: map-get($thumb, active);
-            }
-        }
-
-        /* stylelint-disable */
-        &::-webkit-scrollbar-button,
-        ::-webkit-scrollbar-button {
-            background-color: map-get($arrow, background);
-            background-size: 10px 10px;
-            background-repeat: no-repeat;
-            background-position: center center;
-
-            &:single-button {
-                &:horizontal:decrement {
-                    @include arrow-image(right, map-get($arrow, normal));
-                }
-
-                &:horizontal:increment {
-                    @include arrow-image(left, map-get($arrow, normal));
-                }
-
-                &:vertical:decrement {
-                    @include arrow-image(up, map-get($arrow, normal));
-                }
-
-                &:vertical:increment {
-                    @include arrow-image(down, map-get($arrow, normal));
-                }
-            }
-
-            // disable double-button
-            &:vertical:start:increment,
-            &:vertical:end:decrement,
-            &:horizontal:end:increment,
-            &:horizontal:end:decrement {
-                display: none;
-            }
-        }
-        /* stylelint-enable */
-    }
-}
-
-@mixin arrow-image($direction, $color) {
-    $color: str-replace('#{$color}', '#', '%23');
-
-    @if $direction == up {
-        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4L4 0L8 4H0Z" fill="#{$color}"/></svg>');
-    } @else if $direction == left {
-        background-image: url('data:image/svg+xml;utf8,<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.354973 0.111252L3.64503 3.40028C3.84808 3.60327 3.84107 3.91407 3.64503 4.11011L0.354973 7.40017C0.15192 7.60322 0 7.53112 0 7.25478V0.256747C0 -0.0128497 0.158927 -0.0847332 0.354973 0.111252Z" fill="#{$color}"/></svg>');
-    } @else if $direction == down {
-        background-image: url('data:image/svg+xml;utf8,<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L4 4L8 0H0Z" fill="#{$color}"/></svg>');
-    } @else if $direction == right {
-        background-image: url('data:image/svg+xml;utf8,<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.64975 0.111682C3.8458 -0.0845414 4.00472 -0.0128511 4.00472 0.256746V7.25478C4.00472 7.53112 3.8528 7.6034 3.64975 7.4006L0.359696 4.11454C0.163649 3.91873 0.156643 3.60794 0.359696 3.40471L3.64975 0.111682Z" fill="#{$color}"/></svg>');
-    }
-}
-
-
-@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-pseudo-checkbox-theme($theme) {
-    $foreground: map-get($theme, foreground);
-    $background: map-get($theme, background);
-
-    $checkbox: map-get(map-get($theme, components), checkbox);
-
-    .mc-pseudo-checkbox {
-        &.mc-primary {
-            @include mc-pseudo-checkbox-color(map-get($checkbox, default));
-        }
-
-        &.mc-error {
-            @include mc-pseudo-checkbox-color(map-get($checkbox, error));
-        }
-
-        &.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);
-            }
-        }
-    }
-}
-
-
-
-@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);
-        }
-    }
-}
-
-
-
-
-@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);
-
-    $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);;
-
-        // h1, h2, h3, h4, h5, h6
-        @for $i from 1 through 6 {
-            .mc-markdown__h#{$i} {
-                color: map-get($markdown, h#{$i}-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 {
-            color: map-get($markdown, link-text);
-            border-bottom-color: map-get($markdown, link-border-bottom);
-
-            &:visited {
-                color: map-get($markdown, link-state-visited-text);
-                border-bottom-color: map-get($markdown, link-state-visited-border-bottom);
-            }
-
-            &: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);
-            }
-
-            &:focus {
-                outline:
-                    map-get($markdown, link-state-focused-outline)
-                    solid
-                    $markdown-link-size-state-focused-outline-width;
+            background-color: map-get($background, overlay-hover);
+        }
 
-                outline-offset: $markdown-link-size-state-focused-outline-offset;
+        &.mc-focused {
+            border-color: map-get(map-get($theme, states), focused-color);
+
+            & .mc-tree-node-toggle:not([disabled]) .mc-icon {
+                color: mc-color($secondary, if($is-dark, 300, 700));
             }
         }
 
-        .mc-markdown__img + em {
-            color: map-get($markdown, image-caption-text);
+        &.mc-selected {
+            background: map-get(map-get($theme, states), selected-color);
         }
 
-        .mc-markdown__hr {
-            border-bottom-color: map-get($markdown, hr-color);
+        &[disabled] {
+            background-color: transparent;
+
+            color: map-get($foreground, text-disabled);
         }
+    }
 
-        .mc-markdown__table > .mc-markdown__thead {
-            color: map-get($markdown, table-header);
-            border-bottom-color: map-get($markdown, table-border);
+    /* stylelint-disable no-descending-specificity */
+    .mc-tree-node-toggle {
+        & .mc-icon {
+            color: mc-color($secondary, 400);
         }
 
-        .mc-markdown__table > .mc-markdown__tbody {
-            color: map-get($markdown, table-body);
+        &:hover .mc-icon {
+            color: mc-color($secondary, if($is-dark, 300, 700));
+        }
+
+        &[disabled] .mc-icon {
+            color: mc-color($secondary, if($is-dark, 700, 300));
         }
     }
+    /* stylelint-enable no-descending-specificity */
+}
+
+@mixin mc-tree-typography($config) {
+    .mc-tree-option {
+        @include mc-typography-level-to-styles($config, $tree-font-node);
+    }
 }
 
 
 
 
 
+@mixin mc-table-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
-@mixin mc-progress-bar-theme($theme) {
-    $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
-    $error: map-get($theme, error);
+    .mc-table {
+        & > thead {
+            color: map-get($foreground, text-less-contrast);
 
-    $progress-bar: map-get(map-get($theme, components), progress-bar);
+            & > tr > th {
+                border-color: map-get($foreground, divider);
+            }
+        }
 
-    .mc-progress-bar {
-        background-color: map-get($progress-bar, background);
+        & > tbody {
+            & > tr {
+                &:hover {
+                    background-color: map-get($background, overlay-hover);
+                }
 
-        &.mc-primary .mc-progress-bar__line {
-            background-color: mc-color($primary);
+                & > th,
+                & > td {
+                    color: map-get($foreground, text);
+                }
+            }
         }
 
-        &.mc-second .mc-progress-bar__line {
-            background-color: mc-color($second);
+        &.mc-table_bordered {
+            & > tbody > tr {
+                & th,
+                & td {
+                    border-color: map-get($foreground, divider);
+                }
+            }
         }
+    }
+}
 
-        &.mc-error .mc-progress-bar__line {
-            background-color: mc-color($error);
+@mixin mc-table-typography($config) {
+    .mc-table {
+        & > thead {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, $table-font-header);
+        }
+
+        & > tbody {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, $table-font-body);
         }
     }
 }
@@ -9910,53 +9689,70 @@ button {
 
 
 
-@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);
-        }
+@mixin mc-forms-theme($theme) {
+    $foreground: map-get($theme, foreground);
 
-        &.mc-error .mc-progress-spinner__circle {
-            stroke: mc-color($error);
-        }
+    $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-splitter-theme($theme) {
+
+@mixin mc-option-theme($theme) {
+    $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    .mc-gutter {
-        cursor: col-resize;
+    $primary: map-get($theme, primary);
 
-        &:hover,
-        &.mc-gutter_dragged {
-            background-color: map-get($background, background-disabled);
+    .mc-option {
+        color: map-get($foreground, text);
+
+        &:hover:not(.mc-disabled) {
+            .mc-option-overlay {
+                background: map-get($background, overlay-hover);
+            }
         }
 
-        &.mc-gutter_vertical {
-            cursor: row-resize;
+        &.mc-active {
+            border-color: map-get(map-get($theme, states), focused-color);
         }
 
-        &[disabled] {
-            background-color: mc-color($background, overlay-disabled);
+        &.mc-selected {
+            background: map-get(map-get($theme, states), selected-color);
+        }
 
-            cursor: default;
+        &.mc-disabled {
+            background: transparent;
+
+            color: map-get($foreground, text-disabled);
         }
     }
+}
 
-    .mc-gutter-ghost {
-        background: mc-color($background, overlay-disabled);
+@mixin mc-option-typography($config) {
+    .mc-option {
+        @include mc-typography-level-to-styles($config, $option-font-default);
     }
 }
 
@@ -9964,14 +9760,23 @@ button {
 
 
 
+@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);
+    }
+}
 
 
 
@@ -9981,7 +9786,7 @@ button {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
-    $second: map-get($theme, second);
+    $secondary: map-get($theme, secondary);
 
     $is-dark: map-get($theme, is-dark);
 
@@ -9993,19 +9798,19 @@ button {
         &:active,
         &.mc-pressed {
             & .mc-icon {
-                color: mc-color($second, if($is-dark, 300, 700));
+                color: mc-color($secondary, if($is-dark, 300, 700));
             }
 
-            background-color: mc-color($second, A100);
+            background-color: mc-color($secondary, A100);
         }
 
         &:hover .mc-icon {
-            color: mc-color($second, if($is-dark, 300, 700));
+            color: mc-color($secondary, if($is-dark, 300, 700));
         }
 
         &[disabled] {
             & .mc-icon {
-                color: mc-color($second, if($is-dark, 700, 300));
+                color: mc-color($secondary, if($is-dark, 700, 300));
             }
 
             background-color: transparent;
@@ -10027,16 +9832,38 @@ button {
 
 
 
-@mixin mc-panel-theme($theme) {
-    $background: map-get($theme, background);
 
-    $second: map-get($theme, second);
+@mixin mc-dl-theme($theme) {
+    $dl: map-get(map-get($theme, components), dl);
 
-    $is-dark: map-get($theme, is-dark);
+    .mc-dt {
+        color: map-get($dl, dt);
+    }
 
-    .mc-panel {
-        background-color: map-get($background, background);
-        border: 1px solid mc-color($second, if($is-dark, 700, 60));
+    .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);
+        }
     }
 }
 
@@ -10071,7 +9898,6 @@ button {
     @include mc-option-theme($theme);
     @include mc-optgroup-theme($theme);
     @include mc-option-action-theme($theme);
-    @include mc-panel-theme($theme);
     @include mc-popover-theme($theme);
     @include mc-progress-bar-theme($theme);
     @include mc-progress-spinner-theme($theme);
@@ -10091,5 +9917,53 @@ button {
     @include mc-tree-select-theme($theme);
     @include mc-tree-theme($theme);
     @include mc-table-theme($theme);
+}
+
+@mixin mosaic-typography($config: null, $md-config: null) {
+    @if $config == null {
+        $config: mc-typography-config();
+    }
+
+    @if $md-config == null {
+        $md-config: mc-markdown-typography-config();
+    }
+
+    @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-checkbox-typography($config);
+    @include mc-code-block-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-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);
 
+    @include mc-markdown-typography($md-config);
 }
+