@ptsecurity/mosaic 11.6.0 → 12.2.1

package/_theming.scss

@@ -96,7 +96,7 @@
 
 
 // Do not edit directly
-// Generated on Thu, 21 Oct 2021 09:01:01 GMT
+// Generated on Thu, 28 Oct 2021 12:33:10 GMT
 
 $light-color-scheme-primary-default: #338FCC;
 $light-color-scheme-second-default: #B3B3B3;
@@ -618,10 +618,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));
@@ -678,20 +675,39 @@ $option-size-horizontal-padding: 16px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
+$popover-light-color-scheme-background: white;
+$popover-light-color-scheme-text: #4D4D4D;
+$popover-light-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
 $popover-light-color-scheme-border: #B3B3B3;
+$popover-dark-color-scheme-background: #4D4D4D;
+$popover-dark-color-scheme-text: #F0F0F0;
+$popover-dark-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
 $popover-dark-color-scheme-border: #4D4D4D;
+$popover-size-max-height: 480px;
 $popover-size-padding: 16px;
-$popover-size-border-width: 1px;
-$popover-size-border-radius: 4px;
-$popover-size-arrow-width: 4px;
+$popover-size-border-radius: 3px;
+$popover-size-arrow-size: 12px;
+$popover-size-trigger-margin: 9px;
 $popover-size-small-width: 200px;
 $popover-size-normal-width: 400px;
 $popover-size-large-width: 640px;
 $popover-font-default: body;
+$popover-header-light-color-scheme-border: #E6E6E6;
+$popover-header-light-color-scheme-text: #4D4D4D;
+$popover-header-light-color-scheme-background: white;
+$popover-header-dark-color-scheme-border: transparent;
+$popover-header-dark-color-scheme-text: #F0F0F0;
+$popover-header-dark-color-scheme-background: #4D4D4D;
+$popover-header-size-height: 10px 16px;
 $popover-header-size-padding: 10px 16px;
 $popover-header-font-default: subheading;
-$popover-footer-size-padding: 12px 16px;
+$popover-footer-light-color-scheme-border: #F0F0F0;
+$popover-footer-light-color-scheme-background: #F0F0F0;
+$popover-footer-dark-color-scheme-border: transparent;
+$popover-footer-dark-color-scheme-background: transparent;
 $popover-footer-size-margin-top: 8px;
+$popover-footer-size-padding: 12px 16px;
+$popover-footer-size-height: 56px;
 $popover-footer-font-default: body;
 $popup-light-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
 $popup-light-color-scheme-border: #B3B3B3;
@@ -843,26 +859,51 @@ $toggle-small-size-border-radius: 8px;
 $toggle-small-font-default: caption;
 $tooltip-light-color-scheme-background: #4D4D4D;
 $tooltip-light-color-scheme-text: white;
+$tooltip-light-color-scheme-border: transparent;
 $tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 $tooltip-light-color-scheme-warning-background: #FCF5E8;
 $tooltip-light-color-scheme-warning-text: #4D4D4D;
 $tooltip-light-color-scheme-warning-border: #F0D49B;
 $tooltip-dark-color-scheme-background: #F5F5F5;
 $tooltip-dark-color-scheme-text: #4D4D4D;
+$tooltip-dark-color-scheme-border: transparent;
 $tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 $tooltip-dark-color-scheme-warning-background: #FCF5E8;
 $tooltip-dark-color-scheme-warning-text: #4D4D4D;
 $tooltip-dark-color-scheme-warning-border: #F0D49B;
-$tooltip-size-max-width: 240px;
+$tooltip-size-max-width: 300px;
+$tooltip-size-border-width: 1px;
 $tooltip-size-border-radius: 3px;
-$tooltip-size-arrow-size: 12px;
-$tooltip-size-arrow-width: 5px;
 $tooltip-size-padding: 8px 16px;
-$tooltip-size-distance: 9px;
+$tooltip-size-arrow-size: 12px;
+$tooltip-size-trigger-margin: 9px;
 $tooltip-font-default: caption;
+$extended-tooltip-light-color-scheme-background: white;
+$extended-tooltip-light-color-scheme-text: #4D4D4D;
+$extended-tooltip-light-color-scheme-border: #B3B3B3;
+$extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+$extended-tooltip-dark-color-scheme-background: #4D4D4D;
+$extended-tooltip-dark-color-scheme-text: #F0F0F0;
+$extended-tooltip-dark-color-scheme-border: #999999;
+$extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+$extended-tooltip-size-border-radius: 3px;
+$extended-tooltip-size-arrow-size: 12px;
+$extended-tooltip-size-trigger-margin: 9px;
+$extended-tooltip-size-padding: 8px 16px;
+$extended-tooltip-size-max-height: 480px;
+$extended-tooltip-font-default: caption;
+$extended-tooltip-header-light-color-scheme-border: #E6E6E6;
+$extended-tooltip-header-light-color-scheme-text: #4D4D4D;
+$extended-tooltip-header-light-color-scheme-background: white;
+$extended-tooltip-header-dark-color-scheme-border: #F0F0F0;
+$extended-tooltip-header-dark-color-scheme-text: #F0F0F0;
+$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,
@@ -1801,21 +1842,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() {
     & > * {
@@ -1843,7 +1869,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 */
@@ -1851,6 +1877,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;
@@ -2578,7 +2608,21 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     );
 
     $popover: (
-        border: $popover-light-color-scheme-border
+        background: $popover-light-color-scheme-background,
+        text: $popover-light-color-scheme-text,
+        shadow: $popover-light-color-scheme-shadow,
+        border: $popover-light-color-scheme-border,
+
+        footer: (
+            background: $popover-footer-light-color-scheme-background,
+            border: $popover-footer-light-color-scheme-border,
+        ),
+
+        header: (
+            text: $popover-header-light-color-scheme-text,
+            background: $popover-header-light-color-scheme-background,
+            border: $popover-header-light-color-scheme-border,
+        )
     );
 
     $progress-bar: (
@@ -2656,6 +2700,15 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
             background: $tooltip-light-color-scheme-warning-background,
             color: $tooltip-light-color-scheme-warning-text,
             border-color: $tooltip-light-color-scheme-warning-border
+        ),
+        extended: (
+            background: $extended-tooltip-light-color-scheme-background,
+            color: $extended-tooltip-light-color-scheme-text,
+            border-color: $extended-tooltip-light-color-scheme-border,
+
+            header-background: $extended-tooltip-header-light-color-scheme-background,
+            header-color: $extended-tooltip-header-light-color-scheme-text,
+            header-border-color: $extended-tooltip-header-light-color-scheme-border
         )
     );
 
@@ -2925,7 +2978,21 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     );
 
     $popover: (
-        border: $popover-dark-color-scheme-border
+        background: $popover-dark-color-scheme-background,
+        text: $popover-dark-color-scheme-text,
+        shadow: $popover-dark-color-scheme-shadow,
+        border: $popover-dark-color-scheme-border,
+
+        footer: (
+            background: $popover-footer-dark-color-scheme-background,
+            border: $popover-footer-dark-color-scheme-border,
+        ),
+
+        header: (
+            text: $popover-header-dark-color-scheme-text,
+            background: $popover-header-dark-color-scheme-background,
+            border: $popover-header-dark-color-scheme-border,
+        )
     );
 
     $progress-bar: (
@@ -3003,6 +3070,15 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
             background: $tooltip-dark-color-scheme-warning-background,
             color: $tooltip-dark-color-scheme-warning-text,
             border-color: $tooltip-dark-color-scheme-warning-border
+        ),
+        extended: (
+            background: $extended-tooltip-dark-color-scheme-background,
+            color: $extended-tooltip-dark-color-scheme-text,
+            border-color: $extended-tooltip-dark-color-scheme-border,
+
+            header-background: $extended-tooltip-header-dark-color-scheme-background,
+            header-color: $extended-tooltip-header-dark-color-scheme-text,
+            header-border-color: $extended-tooltip-header-dark-color-scheme-border
         )
     );
 
@@ -3139,7 +3215,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
     );
@@ -4305,6 +4381,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);
+    }
 }
 
 
@@ -4739,35 +4819,31 @@ $mc-datepicker-today-fade-amount: 0.2;
 @mixin mc-popover-theme($theme) {
     $foreground: map-get($theme, foreground);
 
-    $popup: map-get(map-get($theme, components), popup);
     $popover: map-get(map-get($theme, components), popover);
 
-    $is-dark: map-get($theme, is-dark);
-
-    $footer-background-color: if($is-dark, map-get($popup, background), map-get($popup, footer-background));
+    $header: map-get($popover, header);
+    $footer: map-get($popover, footer);
 
     .mc-popover {
         border-color: map-get($popover, border);
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     }
 
-    .mc-popover__container {
-        color: map-get($foreground, text);
-        background-color: map-get($popup, background);
-    }
-
     .mc-popover__header {
-        border-bottom-color: map-get($popup, divider);
+        color: map-get($header, text);
+        background: map-get($header, background);
+        border-bottom-color: map-get($header, border);
     }
 
-    .mc-popover__header,
+    .mc-popover__container,
     .mc-popover__content {
-        background-color: map-get($popup, background);
+        color: map-get($popover, text);
+        background-color: map-get($popover, background);
     }
 
     .mc-popover__footer {
-        background-color: $footer-background-color;
-        border-top-color: if($is-dark, map-get($popup, divider), transparent);
+        border-top-color: map-get($footer, border);
+        background-color: map-get($footer, background);
     }
 
     .mc-popover .mc-popover__arrow {
@@ -4777,45 +4853,45 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-popover_placement-top .mc-popover__arrow,
     .mc-popover_placement-top-left .mc-popover__arrow,
     .mc-popover_placement-top-right .mc-popover__arrow {
-        background-color: map-get($popup, background);
-        border-top-color: map-get($popup, background);
-        border-left-color: map-get($popup, background);
+        background-color: map-get($popover, background);
+        border-top-color: map-get($popover, border);
+        border-left-color: map-get($popover, border);
     }
 
     .mc-popover_placement-top .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-top-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: $footer-background-color;
-        border-top-color: $footer-background-color;
-        border-left-color: $footer-background-color;
+        background-color: map-get($footer, background);
+        border-top-color: map-get($footer, border);
+        border-left-color: map-get($footer, border);
     }
 
     .mc-popover_placement-right .mc-popover__arrow,
     .mc-popover_placement-right-top .mc-popover__arrow,
     .mc-popover_placement-right-bottom .mc-popover__arrow {
-        background-color: map-get($popup, background);
-        border-top-color: map-get($popup, background);
-        border-right-color: map-get($popup, background);
+        background-color: map-get($popover, background);
+        border-top-color: map-get($popover, background);
+        border-right-color: map-get($popover, background);
     }
 
     .mc-popover_placement-right-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: $footer-background-color;
-        border-top-color: $footer-background-color;
-        border-right-color: $footer-background-color;
+        background-color: map-get($footer, background);
+        border-top-color: map-get($footer, border);
+        border-right-color: map-get($footer, border);
     }
 
     .mc-popover_placement-left .mc-popover__arrow,
     .mc-popover_placement-left-top .mc-popover__arrow,
     .mc-popover_placement-left-bottom .mc-popover__arrow {
-        background-color: map-get($popup, background);
-        border-bottom-color: map-get($popup, background);
-        border-left-color: map-get($popup, background);
+        background-color: map-get($popover, background);
+        border-bottom-color: map-get($popover, background);
+        border-left-color: map-get($popover, background);
     }
 
     .mc-popover_placement-left-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: $footer-background-color;
-        border-bottom-color: $footer-background-color;
-        border-left-color: $footer-background-color;
+        background-color: map-get($footer, background);
+        border-bottom-color: map-get($footer, border);
+        border-left-color: map-get($footer, border);
     }
 
     .mc-popover_placement-bottom .mc-popover__arrow,
@@ -4824,9 +4900,9 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-popover_placement-bottom .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-left .mc-popover__arrow.mc-popover__arrow_with-footer,
     .mc-popover_placement-bottom-right .mc-popover__arrow.mc-popover__arrow_with-footer {
-        background-color: map-get($popup, background);
-        border-right-color: map-get($popup, background);
-        border-bottom-color: map-get($popup, background);
+        background-color: map-get($popover, background);
+        border-right-color: map-get($popover, background);
+        border-bottom-color: map-get($popover, background);
     }
 }
 
@@ -5538,6 +5614,136 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin popUpMargins($name, $value) {
+    &.#{$name}_placement-top,
+    &.#{$name}_placement-top-left,
+    &.#{$name}_placement-top-right {
+        margin-bottom: $value;
+    }
+
+    &.#{$name}_placement-right,
+    &.#{$name}_placement-right-top,
+    &.#{$name}_placement-right-bottom {
+        margin-left: $value;
+    }
+
+    &.#{$name}_placement-bottom,
+    &.#{$name}_placement-bottom-left,
+    &.#{$name}_placement-bottom-right {
+        margin-top: $value;
+    }
+
+    &.#{$name}_placement-left,
+    &.#{$name}_placement-left-top,
+    &.#{$name}_placement-left-bottom {
+        margin-right: $value;
+    }
+}
+
+@mixin popUpArrowPositions($name, $arrow-offset, $arrow-padding) {
+    .#{$name}_placement-top .#{$name}__arrow {
+        bottom: $arrow-offset;
+        left: 50%;
+        margin-left: $arrow-offset;
+    }
+
+    .#{$name}_placement-top-left .#{$name}__arrow {
+        bottom: $arrow-offset;
+        left: $arrow-padding;
+    }
+
+    .#{$name}_placement-top-right .#{$name}__arrow {
+        bottom: $arrow-offset;
+        right: $arrow-padding;
+    }
+
+    .#{$name}_placement-right .#{$name}__arrow {
+        left: $arrow-offset;
+        top: 50%;
+        margin-top: $arrow-offset;
+    }
+
+    .#{$name}_placement-right-top .#{$name}__arrow {
+        left: $arrow-offset;
+        top: $arrow-padding;
+    }
+
+    .#{$name}_placement-right-bottom .#{$name}__arrow {
+        left: $arrow-offset;
+        bottom: $arrow-padding;
+    }
+
+    .#{$name}_placement-left .#{$name}__arrow {
+        right: $arrow-offset;
+        top: 50%;
+        margin-top: $arrow-offset;
+    }
+
+    .#{$name}_placement-left-top .#{$name}__arrow {
+        right: $arrow-offset;
+        top: $arrow-padding;
+    }
+
+    .#{$name}_placement-left-bottom .#{$name}__arrow {
+        right: $arrow-offset;
+        bottom: $arrow-padding;
+    }
+
+    .#{$name}_placement-bottom .#{$name}__arrow {
+        top: $arrow-offset;
+        left: 50%;
+        margin-left: $arrow-offset;
+    }
+
+    .#{$name}_placement-bottom-left .#{$name}__arrow {
+        top: $arrow-offset;
+        left: $arrow-padding;
+    }
+
+    .#{$name}_placement-bottom-right .#{$name}__arrow {
+        top: $arrow-offset;
+        right: $arrow-padding;
+    }
+
+}
+
+@mixin popUpArrowBordersColor($name, $value) {
+    &.#{$name}_placement-top,
+    &.#{$name}_placement-top-left,
+    &.#{$name}_placement-top-right {
+        & .mc-tooltip__arrow {
+            border-bottom-color: $value;
+            border-right-color: $value;
+        }
+    }
+    &.#{$name}_placement-right,
+    &.#{$name}_placement-right-top,
+    &.#{$name}_placement-right-bottom {
+        & .mc-tooltip__arrow {
+            border-left-color: $value;
+            border-bottom-color: $value;
+        }
+    }
+
+    &.#{$name}_placement-left,
+    &.#{$name}_placement-left-top,
+    &.#{$name}_placement-left-bottom {
+        & .mc-tooltip__arrow {
+            border-right-color: $value;
+            border-top-color: $value;
+        }
+    }
+
+    &.#{$name}_placement-bottom,
+    &.#{$name}_placement-bottom-left,
+    &.#{$name}_placement-bottom-right {
+        & .mc-tooltip__arrow {
+            border-top-color: $value;
+            border-left-color: $value;
+        }
+    }
+}
+
 
 
 @mixin mc-tooltip-theme($theme) {
@@ -5546,31 +5752,62 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     $tooltip: map-get(map-get($theme, components), tooltip);
 
-    .mc-tooltip-inner {
-        color: map-get($tooltip, color);
-
+    .mc-tooltip {
         box-shadow: map-get($tooltip, shadow);
-        background-color: map-get($tooltip, background);
     }
 
-    .mc-tooltip .mc-tooltip-arrow {
-        background-color: map-get($tooltip, background);
+    .mc-tooltip.mc-tooltip_default {
+        & .mc-tooltip__inner {
+            color: map-get($tooltip, color);
+
+            background-color: map-get($tooltip, background);
+        }
+
+        & .mc-tooltip__arrow {
+            background-color: map-get($tooltip, background);
+        }
     }
 
-    .mc-tooltip.mc-tooltip_warning {
-        $tooltip_warning: map-get($tooltip, warning);
+    .mc-tooltip.mc-tooltip_extended {
+        $tooltip_extended: map-get($tooltip, extended);
 
-        $color: map-get($tooltip_warning, color);
-        $background: map-get($tooltip_warning, background);
-        $border-color: map-get($tooltip_warning, border-color);
+        $background: map-get($tooltip_extended, background);
+        $border-color: map-get($tooltip_extended, border-color);
+
+        & .mc-tooltip__inner {
+            box-shadow: map-get($tooltip, shadow);
+            border: 1px solid $border-color;
+
+            color: map-get($tooltip_extended, color);
+
+            background-color: map-get($tooltip_extended, background);
+        }
+
+        & .mc-tooltip__header {
+            color: map-get($tooltip_extended, header-color);
+
+            background-color: map-get($tooltip_extended, header-background);
 
-        .mc-tooltip-arrow {
+            border-bottom: 1px solid map-get($tooltip_extended, header-border-color);
+        }
+
+        & .mc-tooltip__arrow {
             border: 1px solid transparent;
 
             background-color: $background;
         }
 
-        .mc-tooltip-inner {
+        @include popUpArrowBordersColor(mc-tooltip, $border-color);
+    }
+
+    .mc-tooltip.mc-tooltip_warning {
+        $tooltip_warning: map-get($tooltip, warning);
+
+        $color: map-get($tooltip_warning, color);
+        $background: map-get($tooltip_warning, background);
+        $border-color: map-get($tooltip_warning, border-color);
+
+        & .mc-tooltip__inner {
             box-shadow: map-get($tooltip, shadow);
             border: 1px solid $border-color;
 
@@ -5579,25 +5816,13 @@ $mc-datepicker-today-fade-amount: 0.2;
             background-color: $background;
         }
 
-        &.mc-tooltip_placement-top .mc-tooltip-arrow {
-            border-bottom-color: $border-color;
-            border-right-color: $border-color;
-        }
-
-        &.mc-tooltip_placement-right .mc-tooltip-arrow {
-            border-left-color: $border-color;
-            border-bottom-color: $border-color;
-        }
+        & .mc-tooltip__arrow {
+            border: 1px solid transparent;
 
-        &.mc-tooltip_placement-left .mc-tooltip-arrow {
-            border-right-color: $border-color;
-            border-top-color: $border-color;
+            background-color: $background;
         }
 
-        &.mc-tooltip_placement-bottom .mc-tooltip-arrow {
-            border-top-color: $border-color;
-            border-left-color: $border-color;
-        }
+        @include popUpArrowBordersColor(mc-tooltip, $border-color);
     }
 }
 
@@ -5605,6 +5830,16 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-tooltip {
         @include mc-typography-level-to-styles($config, $tooltip-font-default);
     }
+
+    .mc-tooltip_extended {
+        & .mc-tooltip__content {
+            @include mc-typography-level-to-styles($config, $extended-tooltip-font-default);
+        }
+
+        & .mc-tooltip__header {
+            @include mc-typography-level-to-styles($config, $extended-tooltip-header-font-default);
+        }
+    }
 }
 
 
@@ -5648,10 +5883,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;
     }
@@ -5665,6 +5905,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 {
@@ -5677,10 +5921,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);
     }
@@ -5809,6 +6068,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);
+    }
 }
 
 
@@ -6144,6 +6411,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;
@@ -6193,6 +6500,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);