@ptsecurity/mosaic 12.0.2 → 12.2.2

package/_theming.scss

@@ -96,7 +96,6 @@
 
 
 // Do not edit directly
-// Generated on Thu, 07 Oct 2021 08:29:06 GMT
 
 $light-color-scheme-primary-default: #338FCC;
 $light-color-scheme-second-default: #B3B3B3;
@@ -312,12 +311,106 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-min-width: 10px;
-$badge-size-padding: 4px 8px;
-$badge-size-border-width: 1px;
-$badge-size-border-radius: 4px;
-$badge-font-default: caption;
-$badge-font-caps: caption-caps;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-default-height: 24px;
+$badge-size-default-font-default: caption;
+$badge-size-default-font-caps: caption-caps;
+$badge-size-default-font-mono: caption-mono;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-size-mini-font-default: extra-small-text;
+$badge-size-mini-font-caps: extra-small-text-caps;
+$badge-size-mini-font-mono: extra-small-text-mono;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$badge-font-mini-default: extra-small-text;
+$badge-font-mini-caps: extra-small-text-caps;
+$badge-font-mini-mono: extra-small-text-mono;
+$badge-light-color-scheme-solid-primary-background: #338FCC;
+$badge-light-color-scheme-solid-primary-color: white;
+$badge-light-color-scheme-solid-primary-border: #338FCC;
+$badge-light-color-scheme-solid-info-border: #338FCC;
+$badge-light-color-scheme-solid-info-background: #338FCC;
+$badge-light-color-scheme-solid-info-color: white;
+$badge-light-color-scheme-solid-success-border: #52A832;
+$badge-light-color-scheme-solid-success-background: #52A832;
+$badge-light-color-scheme-solid-success-color: white;
+$badge-light-color-scheme-solid-warning-border: #D6930D;
+$badge-light-color-scheme-solid-warning-background: #D6930D;
+$badge-light-color-scheme-solid-warning-color: white;
+$badge-light-color-scheme-solid-error-border: #E04D36;
+$badge-light-color-scheme-solid-error-background: #E04D36;
+$badge-light-color-scheme-solid-error-color: white;
+$badge-light-color-scheme-solid-transparent-border: #CCCCCC;
+$badge-light-color-scheme-solid-transparent-color: #4D4D4D;
+$badge-light-color-scheme-solid-transparent-background: transparent;
+$badge-light-color-scheme-solid-light-border: #E6E6E6;
+$badge-light-color-scheme-solid-light-background: #E6E6E6;
+$badge-light-color-scheme-solid-light-color: #4D4D4D;
+$badge-light-color-scheme-solid-second-border: #666666;
+$badge-light-color-scheme-solid-second-background: #666666;
+$badge-light-color-scheme-solid-second-color: white;
+$badge-light-color-scheme-pastel-primary-background: #F5FAFD;
+$badge-light-color-scheme-pastel-primary-border: #AAD1EC;
+$badge-light-color-scheme-pastel-primary-color: #338FCC;
+$badge-light-color-scheme-pastel-info-background: #F5FAFD;
+$badge-light-color-scheme-pastel-info-border: #AAD1EC;
+$badge-light-color-scheme-pastel-info-color: #338FCC;
+$badge-light-color-scheme-pastel-success-background: #F6FBF4;
+$badge-light-color-scheme-pastel-success-border: #B4DEA4;
+$badge-light-color-scheme-pastel-success-color: #449327;
+$badge-light-color-scheme-pastel-warning-background: #FDFAF3;
+$badge-light-color-scheme-pastel-warning-border: #F0D49B;
+$badge-light-color-scheme-pastel-warning-color: #BB800A;
+$badge-light-color-scheme-pastel-error-background: #FEF7F6;
+$badge-light-color-scheme-pastel-error-border: #F4B7AE;
+$badge-light-color-scheme-pastel-error-color: #E04D36;
+$badge-dark-color-scheme-pastel-primary-background: rgba(0, 153, 255, 0.15);
+$badge-dark-color-scheme-pastel-primary-color: #D8EAF7;
+$badge-dark-color-scheme-pastel-primary-border: #114E77;
+$badge-dark-color-scheme-pastel-info-background: #D8EAF7;
+$badge-dark-color-scheme-pastel-info-color: #D8EAF7;
+$badge-dark-color-scheme-pastel-info-border: rgba(0, 153, 255, 0.15);
+$badge-dark-color-scheme-pastel-success-border: #276211;
+$badge-dark-color-scheme-pastel-success-background: rgba(68, 255, 0, 0.15);
+$badge-dark-color-scheme-pastel-success-color: #DCF1D4;
+$badge-dark-color-scheme-pastel-warning-border: #7D5504;
+$badge-dark-color-scheme-pastel-warning-background: rgba(255, 170, 0, 0.15);
+$badge-dark-color-scheme-pastel-warning-color: #F8EBD1;
+$badge-dark-color-scheme-pastel-error-border: #832112;
+$badge-dark-color-scheme-pastel-error-background: rgba(224, 79, 56, 0.15);
+$badge-dark-color-scheme-pastel-error-color: #FADEDA;
+$badge-dark-color-scheme-solid-primary-background: #114E77;
+$badge-dark-color-scheme-solid-primary-color: white;
+$badge-dark-color-scheme-solid-primary-border: #114E77;
+$badge-dark-color-scheme-solid-info-border: #07314D;
+$badge-dark-color-scheme-solid-info-background: #07314D;
+$badge-dark-color-scheme-solid-info-color: white;
+$badge-dark-color-scheme-solid-success-border: #276211;
+$badge-dark-color-scheme-solid-success-background: #276211;
+$badge-dark-color-scheme-solid-success-color: white;
+$badge-dark-color-scheme-solid-warning-border: #7D5504;
+$badge-dark-color-scheme-solid-warning-background: #7D5504;
+$badge-dark-color-scheme-solid-warning-color: white;
+$badge-dark-color-scheme-solid-error-border: #832112;
+$badge-dark-color-scheme-solid-error-background: #832112;
+$badge-dark-color-scheme-solid-error-color: white;
+$badge-dark-color-scheme-solid-transparent-border: #808080;
+$badge-dark-color-scheme-solid-transparent-color: #F5F5F5;
+$badge-dark-color-scheme-solid-transparent-background: transparent;
+$badge-dark-color-scheme-solid-light-border: #999999;
+$badge-dark-color-scheme-solid-light-background: #999999;
+$badge-dark-color-scheme-solid-light-color: white;
+$badge-dark-color-scheme-solid-second-border: #4D4D4D;
+$badge-dark-color-scheme-solid-second-background: #4D4D4D;
+$badge-dark-color-scheme-solid-second-color: white;
 $button-toggle-size-border-size: 1px;
 $button-toggle-size-border-radius: 3px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
@@ -524,10 +617,7 @@ $link-animation-state-hover-transition: color 0ms;
 $link-font-default: body;
 $list-size-horizontal-padding: 16px;
 $list-size-icon-padding: 4px;
-$list-size-item-height: 28px;
-$list-size-two-line-height: 72px;
-$list-size-three-line-height: 88px;
-$list-size-multi-line-padding: 16px;
+$list-size-item-height: 32px;
 $list-size-icon-width: 24px;
 $list-font-item: body;
 $modal-light-color-scheme-shadow: (0 0 0 1px #B3B3B3, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
@@ -810,9 +900,9 @@ $extended-tooltip-header-dark-color-scheme-background: #4D4D4D;
 $extended-tooltip-header-size-height: 40px;
 $extended-tooltip-header-size-padding: 10px 16px;
 $extended-tooltip-header-font-default: subheading;
+$tree-size-node-height: 32px;
+$tree-size-padding-left: 8px;
 $tree-size-padding-right: 16px;
-$tree-size-border-width: 2px;
-$tree-size-node-height: 28px;
 $tree-font-node: body;
 $light-color-scheme-primary-palette: (
 40: #F5FAFD,
@@ -1436,6 +1526,18 @@ $typography-extra-small-text-letter-spacing: 0.22px;
 $typography-extra-small-text-font-weight: normal;
 $typography-extra-small-text-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-text-transform: null;
+$typography-extra-small-text-caps-font-size: 11px;
+$typography-extra-small-text-caps-line-height: 16px;
+$typography-extra-small-text-caps-letter-spacing: 1px;
+$typography-extra-small-text-caps-font-weight: normal;
+$typography-extra-small-text-caps-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-caps-text-transform: uppercase;
+$typography-extra-small-text-mono-font-size: 11px;
+$typography-extra-small-text-mono-line-height: 16px;
+$typography-extra-small-text-mono-letter-spacing: 0px;
+$typography-extra-small-text-mono-font-weight: normal;
+$typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
+$typography-extra-small-text-mono-text-transform: null;
 
 $mosaic: (
   'typography': (
@@ -1558,6 +1660,22 @@ $mosaic: (
       'font-weight': $typography-extra-small-text-font-weight,
       'font-family': $typography-extra-small-text-font-family,
       'text-transform': $typography-extra-small-text-text-transform
+    ),
+    'extra-small-text-caps': (
+      'font-size': $typography-extra-small-text-caps-font-size,
+      'line-height': $typography-extra-small-text-caps-line-height,
+      'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
+      'font-weight': $typography-extra-small-text-caps-font-weight,
+      'font-family': $typography-extra-small-text-caps-font-family,
+      'text-transform': $typography-extra-small-text-caps-text-transform
+    ),
+    'extra-small-text-mono': (
+      'font-size': $typography-extra-small-text-mono-font-size,
+      'line-height': $typography-extra-small-text-mono-line-height,
+      'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
+      'font-weight': $typography-extra-small-text-mono-font-weight,
+      'font-family': $typography-extra-small-text-mono-font-family,
+      'text-transform': $typography-extra-small-text-mono-text-transform
     )
   )
 );
@@ -1723,21 +1841,6 @@ $mosaic: (
     text-overflow: ellipsis;
 }
 
-// Mixin to provide all mc-line styles, changing secondary font size based on whether the list is in dense mode.
-@mixin mc-line-base($secondary-font-size) {
-    .mc-line {
-        @include mc-truncate-line();
-
-        display: block;
-        box-sizing: border-box;
-
-        // all lines but the top line should have smaller text
-        &:nth-child(n + 2) {
-            font-size: $secondary-font-size;
-        }
-    }
-}
-
 // This mixin normalizes default element styles, e.g. font weight for heading text.
 @mixin mc-normalize-text() {
     & > * {
@@ -1765,7 +1868,7 @@ $mosaic: (
     }
 }
 
-.mc-no-select {
+@mixin mc-no-select() {
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
@@ -1773,6 +1876,10 @@ $mosaic: (
     user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
 }
 
+.mc-no-select {
+    @include mc-no-select;
+}
+
 .cdk-overlay-container {
     pointer-events: none;
     top: 0;
@@ -2114,19 +2221,19 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
 // 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.
-$cdk-z-index-overlay-container: 1000 !default;
-$cdk-z-index-overlay: 1000 !default;
-$cdk-z-index-overlay-backdrop: 1000 !default;
+$overlay-container-z-index: 1000 !default;
+$overlay-z-index: 1000 !default;
+$overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;
+$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;
 
-
-@mixin cdk-overlay() {
+/// 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;
@@ -2141,7 +2248,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // The overlay-container is an invisible element which contains all individual overlays.
   .cdk-overlay-container {
     position: fixed;
-    z-index: $cdk-z-index-overlay-container;
+    z-index: $overlay-container-z-index;
 
     &:empty {
       // Hide the element when it doesn't have any child nodes. This doesn't
@@ -2157,7 +2264,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   .cdk-global-overlay-wrapper {
     display: flex;
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    z-index: $overlay-z-index;
   }
 
   // A single overlay pane.
@@ -2167,7 +2274,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     position: absolute;
     pointer-events: auto;
     box-sizing: border-box;
-    z-index: $cdk-z-index-overlay;
+    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.
@@ -2184,7 +2291,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     left: 0;
     right: 0;
 
-    z-index: $cdk-z-index-overlay-backdrop;
+    z-index: $overlay-backdrop-z-index;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
     transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
@@ -2205,7 +2312,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   }
 
   .cdk-overlay-dark-backdrop {
-    background: $cdk-overlay-dark-backdrop-background;
+    background: $overlay-backdrop-color;
   }
 
   .cdk-overlay-transparent-backdrop {
@@ -2222,7 +2329,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
   // overlay element's size to fit within the viewport.
   .cdk-overlay-connected-position-bounding-box {
     position: absolute;
-    z-index: $cdk-z-index-overlay;
+    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
@@ -2297,6 +2404,74 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         footer-background: $popup-light-color-scheme-footer-background
     );
 
+    $badge: (
+        primary_solid: (
+            color: $badge-light-color-scheme-solid-primary-color,
+            background: $badge-light-color-scheme-solid-primary-background,
+            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
+        ),
+        light_solid: (
+            color: $badge-light-color-scheme-solid-light-color,
+            background: $badge-light-color-scheme-solid-light-background,
+            border: $badge-light-color-scheme-solid-light-background
+        ),
+        info_solid: (
+            color: $badge-light-color-scheme-solid-info-color,
+            background: $badge-light-color-scheme-solid-info-background,
+            border: $badge-light-color-scheme-solid-info-border
+        ),
+        success_solid: (
+            color: $badge-light-color-scheme-solid-success-color,
+            background: $badge-light-color-scheme-solid-success-background,
+            border: $badge-light-color-scheme-solid-success-border
+        ),
+        warning_solid: (
+            color: $badge-light-color-scheme-solid-warning-color,
+            background: $badge-light-color-scheme-solid-warning-background,
+            border: $badge-light-color-scheme-solid-warning-border
+        ),
+        error_solid: (
+            color: $badge-light-color-scheme-solid-error-color,
+            background: $badge-light-color-scheme-solid-error-background,
+            border: $badge-light-color-scheme-solid-error-border
+        ),
+        transparent_solid: (
+            color: $badge-light-color-scheme-solid-transparent-color,
+            border: $badge-light-color-scheme-solid-transparent-border,
+            background: $badge-light-color-scheme-solid-transparent-background
+        ),
+        primary_pastel: (
+            color: $badge-light-color-scheme-pastel-primary-color,
+            background: $badge-light-color-scheme-pastel-primary-background,
+            border: $badge-light-color-scheme-pastel-primary-border
+        ),
+        info_pastel: (
+            color: $badge-light-color-scheme-pastel-info-color,
+            background: $badge-light-color-scheme-pastel-info-background,
+            border: $badge-light-color-scheme-pastel-info-border
+        ),
+        success_pastel: (
+            color: $badge-light-color-scheme-pastel-success-color,
+            background: $badge-light-color-scheme-pastel-success-background,
+            border: $badge-light-color-scheme-pastel-success-border
+        ),
+        warning_pastel: (
+            color: $badge-light-color-scheme-pastel-warning-color,
+            background: $badge-light-color-scheme-pastel-warning-background,
+            border: $badge-light-color-scheme-pastel-warning-border
+        ),
+        error_pastel: (
+            color: $badge-light-color-scheme-pastel-error-color,
+            background: $badge-light-color-scheme-pastel-error-background,
+            border: $badge-light-color-scheme-pastel-error-border
+        ),
+    );
+
     $button: (
         state-active_shadow: $button-light-color-scheme-active-shadow,
 
@@ -2539,6 +2714,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     @return (
         alert: $alert,
         popup: $popup,
+        badge: $badge,
         button: $button,
         card: $card,
         checkbox: $checkbox,
@@ -2598,6 +2774,74 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         footer-background: $popup-dark-color-scheme-footer-background
     );
 
+    $badge: (
+        primary_solid: (
+            color: $badge-dark-color-scheme-solid-primary-color,
+            background: $badge-dark-color-scheme-solid-primary-background,
+            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
+        ),
+        light_solid: (
+            color: $badge-dark-color-scheme-solid-light-color,
+            background: $badge-dark-color-scheme-solid-light-background,
+            border: $badge-dark-color-scheme-solid-light-background
+        ),
+        info_solid: (
+            color: $badge-dark-color-scheme-solid-info-color,
+            background: $badge-dark-color-scheme-solid-info-background,
+            border: $badge-dark-color-scheme-solid-info-border
+        ),
+        success_solid: (
+            color: $badge-dark-color-scheme-solid-success-color,
+            background: $badge-dark-color-scheme-solid-success-background,
+            border: $badge-dark-color-scheme-solid-success-border
+        ),
+        warning_solid: (
+            color: $badge-dark-color-scheme-solid-warning-color,
+            background: $badge-dark-color-scheme-solid-warning-background,
+            border: $badge-dark-color-scheme-solid-warning-border
+        ),
+        error_solid: (
+            color: $badge-dark-color-scheme-solid-error-color,
+            background: $badge-dark-color-scheme-solid-error-background,
+            border: $badge-dark-color-scheme-solid-error-border
+        ),
+        transparent_solid: (
+            color: $badge-dark-color-scheme-solid-transparent-color,
+            border: $badge-dark-color-scheme-solid-transparent-border,
+            background: $badge-dark-color-scheme-solid-transparent-background
+        ),
+        primary_pastel: (
+            color: $badge-dark-color-scheme-pastel-primary-color,
+            background: $badge-dark-color-scheme-pastel-primary-background,
+            border: $badge-dark-color-scheme-pastel-primary-border
+        ),
+        info_pastel: (
+            color: $badge-dark-color-scheme-pastel-info-color,
+            background: $badge-dark-color-scheme-pastel-info-background,
+            border: $badge-dark-color-scheme-pastel-info-border
+        ),
+        success_pastel: (
+            color: $badge-dark-color-scheme-pastel-success-color,
+            background: $badge-dark-color-scheme-pastel-success-background,
+            border: $badge-dark-color-scheme-pastel-success-border
+        ),
+        warning_pastel: (
+            color: $badge-dark-color-scheme-pastel-warning-color,
+            background: $badge-dark-color-scheme-pastel-warning-background,
+            border: $badge-dark-color-scheme-pastel-warning-border
+        ),
+        error_pastel: (
+            color: $badge-dark-color-scheme-pastel-error-color,
+            background: $badge-dark-color-scheme-pastel-error-background,
+            border: $badge-dark-color-scheme-pastel-error-border
+        ),
+    );
+
     $button: (
         state-active_shadow: $button-dark-color-scheme-active-shadow,
 
@@ -2840,6 +3084,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     @return (
         alert: $alert,
         popup: $popup,
+        badge: $badge,
         button: $button,
         card: $card,
         checkbox: $checkbox,
@@ -2969,7 +3214,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 ) {
     $states: (
         focused-color: $dark-color-scheme-states-focused-color,
-        selected-color: $dark-color-scheme-states-focused-color,
+        selected-color: $dark-color-scheme-states-selected-color,
         pressed-shadow: $dark-color-scheme-states-pressed-shadow,
         disabled-opacity: $dark-color-scheme-states-disabled-opacity
     );
@@ -3030,7 +3275,8 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
             color: white;
         }
 
-        &.mc-checked {
+        &.mc-checked,
+        &.mc-indeterminate {
             border-color: map-get($checkbox, state-checked-border);
 
             background: map-get($checkbox, state-checked-background);
@@ -3231,7 +3477,9 @@ $fonts: (
         caption-mono:       map-get($typography, caption-mono),
 
         small-text:         map-get($typography, small-text),
-        extra-small-text:   map-get($typography, extra-small-text)
+        extra-small-text:   map-get($typography, extra-small-text),
+        extra-small-text-caps:   map-get($typography, extra-small-text-caps),
+        extra-small-text-mono:   map-get($typography, extra-small-text-mono)
     );
 
     @each $key, $level in $config {
@@ -3410,90 +3658,128 @@ $fonts: (
 
 
 .mc-badge {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
 
-    vertical-align: middle;
+    text-align: center;
+    white-space: nowrap;
 
-    min-width: var(--mc-badge-size-min-width, $badge-size-min-width);
+    border-style: solid;
 
-    padding: var(--mc-badge-size-padding, $badge-size-padding);
+    box-sizing: border-box;
 
-    border: {
-        width: var(--mc-badge-size-border-width, $badge-size-border-width);
-        style: solid;
-        radius: var(--mc-badge-size-border-radius, $badge-size-border-radius);
+    &.mc-badge_default {
+        height: var(--mc-badge-size-default-height, $badge-size-default-height);
+        min-width: var(--mc-badge-size-default-min-width, $badge-size-default-min-width);
+        padding: var(--mc-badge-size-default-padding, $badge-size-default-padding);
+        border: {
+            width: var(--mc-badge-size-default-border-width, $badge-size-default-border-width);
+            radius: var(--mc-badge-size-default-border-radius, $badge-size-default-border-radius);
+        }
     }
 
-    text-align: center;
-    white-space: nowrap;
-}
-
+    &.mc-badge_mini {
+        height: var(--mc-badge-size-mini-height, $badge-size-mini-height);
+        min-width: var(--mc-badge-size-mini-min-width, $badge-size-mini-min-width);
+        padding: var(--mc-badge-size-mini-padding, $badge-size-mini-padding);
+        border: {
+            width: var(--mc-badge-size-mini-border-width, $badge-size-mini-border-width);
+            radius: var(--mc-badge-size-mini-border-radius, $badge-size-mini-border-radius);
+        }
 
-@mixin mc-badge-color($palette, $is-dark) {
-    color: white;
+    }
+}
 
-    $color: mc-color($palette, if($is-dark, 700, 500));
 
-    border-color: $color;
-    background-color: $color;
+@mixin mc-badge-color($params) {
+    color: map-get($params, color);
+    border-color: map-get($params, border);
+    background: map-get($params, background);
 }
 
 @mixin mc-badge-theme($theme) {
     $foreground: map-get($theme, foreground);
-
-    $primary: map-get($theme, primary);
-    $second: map-get($theme, second);
-    $error: map-get($theme, error);
-    $info: map-get($theme, info);
-    $success: map-get($theme, success);
-    $warning: map-get($theme, warning);
-
-    $is-dark: map-get($theme, is-dark);
+    $badge: map-get(map-get($theme, components), badge);
 
     .mc-badge {
         color: map-get($foreground, text);
         border-color: map-get($foreground, border);
     }
 
-    .mc-badge_light {
-        $color: mc-color($second, if($is-dark, 400, 100));
+    .mc-badge_solid {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_solid));
+        }
 
-        border-color: $color;
-        background-color: $color;
-    }
+        &.mc-badge_second {
+            @include mc-badge-color(map-get($badge, second_solid));
+        }
 
-    .mc-badge_second {
-        @include mc-badge-color($second, $is-dark);
-    }
+        &.mc-badge_transparent {
+            @include mc-badge-color(map-get($badge, transparent_solid));
+        }
 
-    .mc-badge_primary {
-        @include mc-badge-color($primary, $is-dark);
-    }
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_solid));
+        }
 
-    .mc-badge_error {
-        @include mc-badge-color($error, $is-dark);
-    }
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_solid));
+        }
 
-    .mc-badge_info {
-        @include mc-badge-color($info, $is-dark);
-    }
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_solid));
+        }
 
-    .mc-badge_success {
-        @include mc-badge-color($success, $is-dark);
+        &.mc-badge_light {
+            @include mc-badge-color(map-get($badge, light_solid));
+        }
     }
 
-    .mc-badge_warning {
-        @include mc-badge-color($warning, $is-dark);
+    .mc-badge_pastel {
+        &.mc-badge_primary {
+            @include mc-badge-color(map-get($badge, primary_pastel));
+        }
+
+        &.mc-badge_success {
+            @include mc-badge-color(map-get($badge, success_pastel));
+        }
+
+        &.mc-badge_warning {
+            @include mc-badge-color(map-get($badge, warning_pastel));
+        }
+
+        &.mc-badge_error {
+            @include mc-badge-color(map-get($badge, error_pastel));
+        }
     }
 }
 
 @mixin mc-badge-typography($config) {
-    .mc-badge {
-        @include mc-typography-level-to-styles($config, $badge-font-default);
+    .mc-badge_default {
+        @include mc-typography-level-to-styles($config, $badge-font-default-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-default-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-default-mono);
+        }
     }
 
-    .mc-badge_caps {
-        @include mc-typography-level-to-styles($config, $badge-font-caps);
+    .mc-badge_mini {
+        @include mc-typography-level-to-styles($config, $badge-font-mini-default);
+
+        &.mc-badge_caps {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-caps);
+        }
+
+        &.mc-badge_mono {
+            @include mc-typography-level-to-styles($config, $badge-font-mini-mono);
+        }
     }
 }
 
@@ -3635,21 +3921,22 @@ $fonts: (
     border-color: transparent;
     background-color: transparent;
 
-    &:hover,
-    &.mc-hover {
+    &:hover {
+        background-color: map-get($background, overlay-hover);
+
         & .mc-button-overlay {
-            background: map-get($background, overlay-hover);
+            background-color: transparent;
         }
     }
 
     &:active,
     &.mc-active {
         border-color: transparent;
-        background-color: transparent;
+        background-color: map-get($background, overlay-active);
         box-shadow: none;
 
         & .mc-button-overlay {
-            background: map-get($background, overlay-active);
+            background-color: transparent;
         }
     }
 
@@ -3976,6 +4263,10 @@ $mc-datepicker-today-fade-amount: 0.2;
         background: map-get($background, overlay-hover);
     }
 
+    .mc-dropdown-item-overlay {
+        background: transparent;
+    }
+
     .mc-dropdown__divider {
         background-color: map-get($foreground, divider);
     }
@@ -4094,6 +4385,10 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-form-field__hint {
         @include mc-typography-level-to-styles($config, $form-field-hint-font-default);
     }
+
+    .mc-hint {
+        @include mc-typography-level-to-styles($config, caption);
+    }
 }
 
 
@@ -4494,6 +4789,12 @@ $mc-datepicker-today-fade-amount: 0.2;
 }
 
 @mixin mc-navbar-typography($config) {
+    .mc-navbar-item.mc-horizontal {
+        .mc-badge {
+            @include mc-typography-level-to-styles($config, extra-small-text);
+        }
+    }
+
     .mc-navbar-item.mc-vertical {
         &.mc-opened .mc-badge {
             @include mc-typography-level-to-styles($config, caption);
@@ -5586,10 +5887,15 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+
 @mixin mc-tree-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    $second: map-get($theme, second);
+
+    $is-dark: map-get($theme, is-dark);
+
     .mc-tree-selection:focus {
         outline: none;
     }
@@ -5603,6 +5909,10 @@ $mc-datepicker-today-fade-amount: 0.2;
 
         &.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 {
@@ -5615,10 +5925,25 @@ $mc-datepicker-today-fade-amount: 0.2;
             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-node,
     .mc-tree-option {
         @include mc-typography-level-to-styles($config, $tree-font-node);
     }
@@ -5747,6 +6072,14 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-theme-loaded-marker {
         display: none;
     }
+
+    .mc-error {
+        color: mc-color(map-get($theme, error), 500);
+    }
+
+    .mc-success {
+        color: mc-color(map-get($theme, success), 500);
+    }
 }
 
 
@@ -6082,6 +6415,46 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+
+
+@mixin mc-option-action-theme($theme) {
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $second: map-get($theme, second);
+
+    $is-dark: map-get($theme, is-dark);
+
+    .mc-option-action {
+        &.cdk-keyboard-focused {
+            border-color: map-get(map-get($theme, states), focused-color);
+        }
+
+        &:active,
+        &.mc-pressed {
+            & .mc-icon {
+                color: mc-color($second, if($is-dark, 300, 700));
+            }
+
+            background-color: mc-color($second, A100);
+        }
+
+        &:hover .mc-icon {
+            color: mc-color($second, if($is-dark, 300, 700));
+        }
+
+        &[disabled] {
+            & .mc-icon {
+                color: mc-color($second, if($is-dark, 700, 300));
+            }
+
+            background-color: transparent;
+        }
+    }
+}
+
+
+
 @mixin mc-highlight-theme($theme) {
     .mc-highlight {
         color: inherit;
@@ -6131,6 +6504,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     @include mc-navbar-theme($theme);
     @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);