@ptsecurity/mosaic 17.0.0 → 17.2.0

package/toggle/_toggle-theme.scss

@@ -3,61 +3,64 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-toggle-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
-    $error: map.get($theme, error);
-
     $toggle: map.get(map.get($theme, components), toggle);
 
     .mc-toggle {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         .mc-toggle-bar {
-            border-color: map.get($toggle, border);
+            border-color: mc-css-variable(toggle-border, map-get($toggle, border));
 
-            background: map.get($toggle, background);
+            background: mc-css-variable(toggle-background, map-get($toggle, background));
         }
 
         .mc-toggle__circle {
-            border-color: map.get($toggle, circle_border);
+            border-color: mc-css-variable(toggle-circle_border, map-get($toggle, circle_border));
 
-            background: map.get($toggle, circle_background);
+            background: mc-css-variable(toggle-circle_background, map-get($toggle, circle_background));
         }
 
         &:hover {
             & .mc-toggle__overlay {
-                background: map.get($background, overlay-hover);
+                background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
             }
         }
 
         &.cdk-keyboard-focused {
             & .mc-toggle__overlay {
-                box-shadow: map.get($toggle, focused);
+                box-shadow: mc-css-variable(toggle-focused, map-get($toggle, focused));
             }
         }
 
         &.mc-active {
             &.mc-primary {
                 .mc-toggle-bar {
-                    border-color: map.get(map.get($toggle, primary), checked_border);
-                    background: map.get(map.get($toggle, primary), checked_background);
+                    border-color: mc-css-variable(
+                        toggle-primary-checked_border, map-get($toggle, primary, checked_border));
+                    background: mc-css-variable(
+                        toggle-primary-checked_background, map-get($toggle, primary, checked_background));
                 }
             }
 
             &.mc-error {
                 .mc-toggle-bar {
-                    border-color: map.get(map.get($toggle, error), checked_border);
-                    background: map.get(map.get($toggle, error), checked_background);
+                    border-color: mc-css-variable(
+                        toggle-error-checked_border, map-get($toggle, error, checked_border));
+                    background: mc-css-variable(
+                        toggle-error-checked_background, map-get($toggle, error, checked_background));
                 }
             }
         }
 
         &.mc-disabled {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
 
             & .mc-toggle__overlay {
                 background: rgba(255, 255, 255, 0.3);
@@ -71,21 +74,19 @@
 }
 
 @mixin mc-toggle-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-toggle:not(.mc-toggle_small) {
-        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-default));
+        @include mc-typography-css-variables(toggle, default);
 
         .mc-toggle-bar-outer-container {
-            height: mc-line-height($config, map.get($tokens, toggle-font-default));
+            height: mc-css-variable(toggle-font-default-line-height);
         }
     }
 
     .mc-toggle.mc-toggle_small {
-        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-small-font-default));
+        @include mc-typography-css-variables(toggle-small, default);
 
         .mc-toggle-bar-outer-container {
-            height: mc-line-height($config, map.get($tokens, toggle-small-font-default));
+            height: mc-css-variable(toggle-small-font-default-line-height);
         }
     }
 }

package/toggle/toggle.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-toggle {
     display: inline-block;
 
@@ -53,11 +51,11 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-toggle__content {
     &.left {
-        margin-right: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+        margin-right: mc-css-variable(toggle-size-label-margin);
     }
 
     &.right {
-        margin-left: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+        margin-left: mc-css-variable(toggle-size-label-margin);
     }
 }
 
@@ -87,39 +85,39 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-toggle:not(.mc-toggle_small) {
     .mc-toggle-bar {
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
-        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
+        height: mc-css-variable(toggle-size-height);
+        width: mc-css-variable(toggle-size-width);
+        border-radius: mc-css-variable(toggle-size-border-radius);
     }
 
     .mc-toggle__overlay {
-        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
+        border-radius: mc-css-variable(toggle-size-border-radius);
+        height: mc-css-variable(toggle-size-height);
+        width: mc-css-variable(toggle-size-width);
     }
 
     .mc-toggle__circle {
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
+        height: mc-css-variable(toggle-size-height);
+        width: mc-css-variable(toggle-size-height);
     }
 }
 
 .mc-toggle.mc-toggle_small {
     .mc-toggle-bar {
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
-        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
+        height: mc-css-variable(toggle-small-size-height);
+        width: mc-css-variable(toggle-small-size-width);
+        border-radius: mc-css-variable(toggle-small-size-border-radius);
     }
 
     .mc-toggle__overlay {
-        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
+        border-radius: mc-css-variable(toggle-small-size-border-radius);
+        height: mc-css-variable(toggle-small-size-height);
+        width: mc-css-variable(toggle-small-size-width);
     }
 
     .mc-toggle__circle {
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+        height: mc-css-variable(toggle-small-size-height);
+        width: mc-css-variable(toggle-small-size-height);
     }
 }
 

package/tooltip/_tooltip-theme.scss

@@ -3,6 +3,8 @@
 
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-tooltip-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -11,91 +13,84 @@
     $tooltip: map.get(map.get($theme, components), tooltip);
 
     .mc-tooltip {
-        box-shadow: map.get($tooltip, shadow);
+        box-shadow: mc-css-variable(tooltip-shadow, map-get($tooltip, shadow));
     }
 
     .mc-tooltip.mc-tooltip_default {
         & .mc-tooltip__inner {
-            color: map.get($tooltip, color);
+            color: mc-css-variable(tooltip-color, map-get($tooltip, color));
 
-            background-color: map.get($tooltip, background);
+            background-color: mc-css-variable(tooltip-background, map-get($tooltip, background));
         }
 
         & .mc-tooltip__arrow {
-            background-color: map.get($tooltip, background);
+            background-color: mc-css-variable(tooltip-background, map-get($tooltip, background));
         }
     }
 
     .mc-tooltip.mc-tooltip_extended {
-        $tooltip_extended: map.get($tooltip, extended);
-
-        $background: map.get($tooltip_extended, background);
-        $border-color: map.get($tooltip_extended, border-color);
+        $extended-tooltip: map-get($tooltip, extended);
 
         & .mc-tooltip__inner {
-            border: 1px solid $border-color;
+            border: 1px solid mc-css-variable(extended-tooltip-border, map-get($extended-tooltip, border-color));
 
-            color: map.get($tooltip_extended, color);
+            color: mc-css-variable(extended-tooltip-text, map-get($extended-tooltip, color));
 
-            background-color: map.get($tooltip_extended, background);
+            background-color: mc-css-variable(extended-tooltip-background, map-get($extended-tooltip, background));
         }
 
         & .mc-tooltip__header {
-            color: map.get($tooltip_extended, header-color);
+            color: mc-css-variable(extended-tooltip-header-text, map-get($extended-tooltip, header-color));
 
-            background-color: map.get($tooltip_extended, header-background);
+            background-color: mc-css-variable(
+                extended-tooltip-header-background, map-get($extended-tooltip, header-background));
 
-            border-bottom: 1px solid map.get($tooltip_extended, header-border-color);
+            border-bottom: 1px solid mc-css-variable(
+                extended-tooltip-header-border, map-get($extended-tooltip, header-border-color));
         }
 
         & .mc-tooltip__arrow {
             border: 1px solid transparent;
 
-            background-color: $background;
+            background-color: mc-css-variable(extended-tooltip-background, map-get($extended-tooltip, background));
         }
 
-        @include popup-arrow-borders-color(mc-tooltip, $border-color);
+        @include popup-arrow-borders-color(mc-tooltip, map-get($extended-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);
+        $tooltip_warning: map-get($tooltip, warning);
 
         & .mc-tooltip__inner {
-            border: 1px solid $border-color;
+            border: 1px solid mc-css-variable(tooltip-warning-border, map-get($tooltip_warning, border-color));
 
-            color: $color;
+            color: mc-css-variable(tooltip-warning-text, map-get($tooltip_warning, color));
 
-            background-color: $background;
+            background-color: mc-css-variable(tooltip-warning-background, map-get($tooltip_warning, background));
         }
 
         & .mc-tooltip__arrow {
             border: 1px solid transparent;
 
-            background-color: $background;
+            background-color: mc-css-variable(tooltip-warning-background, map-get($tooltip_warning, background));
         }
 
-        @include popup-arrow-borders-color(mc-tooltip, $border-color);
+        @include popup-arrow-borders-color(mc-tooltip, map-get($tooltip_warning, border-color));
     }
 }
 
 @mixin mc-tooltip-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tooltip {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+        @include mc-typography-css-variables(tooltip, default);
     }
 
     .mc-tooltip_extended {
         & .mc-tooltip__content {
-            @include mc-typography-level-to-styles($config, map.get($tokens, extended-tooltip-font-default));
+            @include mc-typography-css-variables(extended-tooltip, default);
         }
 
         & .mc-tooltip__header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, extended-tooltip-header-font-default));
+            @include mc-typography-css-variables(extended-tooltip-header, default);
         }
     }
 }

package/tooltip/tooltip.component.d.ts

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { McPopUp, McPopUpTrigger, PopUpPlacements } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
@@ -37,7 +38,8 @@ export declare const MC_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof mcTooltipScrollStrategyFactory;
 };
-export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent> {
+export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent> implements OnDestroy {
+    protected focusMonitor: FocusMonitor;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
@@ -64,20 +66,22 @@ export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent>
     protected originSelector: string;
     protected overlayConfig: OverlayConfig;
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    show(delay?: number): void;
     updateData(): void;
     closingActions(): import("rxjs").Observable<void | MouseEvent>;
     getOverlayHandleComponentType(): Type<McTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": { "alias": "mcVisible"; "required": false; }; "tooltipPlacement": { "alias": "mcPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "mcPlacementPriority"; "required": false; }; "content": { "alias": "mcTooltip"; "required": false; }; "disabled": { "alias": "mcTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "customClass": { "alias": "mcTooltipClass"; "required": false; }; "context": { "alias": "mcTooltipContext"; "required": false; }; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
 }
 export declare class McWarningTooltipTrigger extends McTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
-    static ɵfac: i0.ɵɵFactoryDeclaration<McWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
+    static ɵfac: i0.ɵɵFactoryDeclaration<McWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McWarningTooltipTrigger, "[mcWarningTooltip]", ["mcWarningTooltip"], { "content": { "alias": "mcWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class McExtendedTooltipTrigger extends McTooltipTrigger {
@@ -87,8 +91,8 @@ export declare class McExtendedTooltipTrigger extends McTooltipTrigger {
     set header(header: string | TemplateRef<any>);
     private _header;
     protected modifier: TooltipModifier;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     updateData(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McExtendedTooltipTrigger, "[mcExtendedTooltip]", ["mcExtendedTooltip"], { "content": { "alias": "mcExtendedTooltip"; "required": false; }; "header": { "alias": "mcTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip.scss

@@ -5,13 +5,14 @@
 @use '../core/pop-up/pop-up';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
 
 
 .mc-tooltip__inner {
-    border-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: mc-css-variable(tooltip-size-border-radius);
     word-break: break-word;
 }
 
@@ -19,7 +20,7 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: mc-css-variable(tooltip-size-border-radius);
 
     z-index: $z-index-tooltip;
 
@@ -32,35 +33,30 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.mc-tooltip_default,
     &.mc-tooltip_warning {
-        max-width: var(--mc-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+        max-width: mc-css-variable(tooltip-size-max-width);
 
 
         .mc-tooltip__inner {
-            padding: var(--mc-tooltip-size-padding, map.get($tokens, tooltip-size-padding));
+            padding: mc-css-variable(tooltip-size-padding);
         }
     }
 
 
     &.mc-tooltip_extended {
-        max-height: var(--mc-extended-tooltip-size-max-height, map.get($tokens, extended-tooltip-size-max-height));
+        max-height: mc-css-variable(extended-tooltip-size-max-height);
 
 
         .mc-tooltip__header {
-            height: var(
-                --mc-extended-tooltip-header-size-height, map.get($tokens, extended-tooltip-header-size-height)
-            );
-            padding: var(
-                --mc-extended-tooltip-header-size-padding, map.get($tokens, extended-tooltip-header-size-padding)
-            );
+            height: mc-css-variable(extended-tooltip-header-size-height);
+            padding: mc-css-variable(extended-tooltip-header-size-padding);
             box-sizing: border-box;
 
-            border-top-left-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
-            border-top-right-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+            border-top-left-radius: mc-css-variable(tooltip-size-border-radius);
+            border-top-right-radius: mc-css-variable(tooltip-size-border-radius);
         }
 
-
         .mc-tooltip__content {
-            padding: var(--mc-extended-tooltip-size-padding, map.get($tokens, extended-tooltip-size-padding));
+            padding: mc-css-variable(extended-tooltip-size-padding);
         }
     }
 }
@@ -69,8 +65,8 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-tooltip__arrow {
     position: absolute;
 
-    width: var(--mc-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
-    height: var(--mc-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    width: mc-css-variable(tooltip-size-arrow-size);
+    height: mc-css-variable(tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 }

package/tree/_tree-theme.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-tree-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -17,14 +19,14 @@
     }
 
     .mc-tree-option {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         &:hover {
-            background-color: map.get($background, overlay-hover);
+            background-color: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
         }
 
         &.mc-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: mc-css-variable(states-focused-color, map-get($theme, states, focused-color));
 
             & .mc-tree-node-toggle:not([disabled]) .mc-icon {
                 color: mc-color($secondary, if($is-dark, 300, 700));
@@ -32,13 +34,13 @@
         }
 
         &.mc-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            background: mc-css-variable(states-selected-color, map-get($theme, states, selected-color));
         }
 
         &[disabled] {
             background-color: transparent;
 
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 
@@ -60,9 +62,7 @@
 }
 
 @mixin mc-tree-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tree-option {
-        @include mc-typography-level-to-styles($config, map.get($tokens, tree-font-node));
+        @include mc-typography-css-variables(tree, node);
     }
 }

package/tree/toggle.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .mc-tree-node-toggle {
     display: flex;
     align-items: center;
@@ -14,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 100%;
 
-    padding-left: var(--mc-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
-    padding-right: var(--mc-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+    padding-left: mc-css-variable(tree-size-toggle-padding);
+    padding-right: mc-css-variable(tree-size-toggle-padding);
 
     cursor: pointer;
 

package/tree/tree-option.scss

@@ -3,6 +3,7 @@
 
 @use '../core/styles/tokens';
 @use '../core/styles/common/list';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -15,7 +16,7 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    height: var(--mc-tree-size-node-height, map.get($tokens, tree-size-node-height));
+    height: mc-css-variable(tree-size-node-height);
 
     word-wrap: break-word;
 
@@ -30,11 +31,11 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: nowrap;
         text-overflow: ellipsis;
 
-        margin-right: var(--mc-tree-size-padding-right, map.get($tokens, tree-size-padding-right));
+        margin-right: mc-css-variable(tree-size-padding-right);
     }
 
     & > .mc-icon, > .toggle-wrapper > .mc-icon {
-        margin-right: var(--mc-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+        margin-right: mc-css-variable(tree-size-icon-padding);
 
         cursor: pointer;
     }
@@ -52,7 +53,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & > .mc-pseudo-checkbox {
-        margin-right: var(--mc-tree-size-icon-padding, map.get($tokens, tree-size-icon-padding));
+        margin-right: mc-css-variable(tree-size-icon-padding);
     }
 
     & .mc-option-action {

package/tree-select/_tree-select-theme.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/popup' as *;
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin mc-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -12,36 +14,34 @@
     $list: map-get(map-get($theme, components), list);
 
     .mc-tree-select {
-        color: map.get($foreground, text);
+        color: mc-css-variable(foreground-text, map-get($foreground, text));
 
         &.ng-invalid {
-            color: mc-color($error);
+            color: mc-css-variable(error-default, mc-color($error));
         }
 
         &.mc-disabled {
-            color: map.get($foreground, text-disabled);
+            color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
         }
     }
 
     .mc-tree-select__placeholder {
-        color: map.get($foreground, text-disabled);
+        color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
     }
 
     .mc-tree-select__panel {
         @include popup-params($theme);
 
         & .mc-tree-select__footer {
-            background: map.get($list, footer-background);
-            border-top-color: map.get($list, footer-divider);
+            background: mc-css-variable(list-footer-background, map-get($list, footer-background));
+            border-top-color: mc-css-variable(list-footer-divider, map-get($list, footer-divider));
         }
     }
 }
 
 @mixin mc-tree-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .mc-tree-select,
     .mc-tree-select__panel {
-        @include mc-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include mc-typography-css-variables(select-panel, default);
     }
 }

package/tree-select/tree-select.component.d.ts

@@ -227,6 +227,7 @@ export declare class McTreeSelect extends McTreeSelectMixinBase implements After
     get selectedValues(): any;
     get triggerValue(): string;
     get empty(): boolean;
+    get firstSelected(): any;
     isRtl(): boolean;
     handleKeydown(event: KeyboardEvent): void;
     onFocus(): void;