@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/toggle/_toggle-theme.scss

@@ -3,104 +3,111 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-toggle-state($component, $type, $state-name) {
+    $state: map.get($component, $type, $state-name);
+    $base: toggle-#{$type}-#{$state-name};
 
-@mixin kbq-toggle-state($state) {
     .kbq-toggle-bar {
-        border-color: map.get($state, border);
-        background: map.get($state, background);
+        border-color: kbq-css-variable(#{$base}-border, map.get($state, border));
+        background: kbq-css-variable(#{$base}-background, map.get($state, background));
     }
 
     .kbq-toggle__circle {
-        background: map.get($state, circle-background);
+        background: kbq-css-variable(#{$base}-circle-background, map.get($state, circle-background));
     }
 }
 
-@mixin kbq-toggle-focused-state($state) {
-    & .kbq-toggle-bar {
-        border-color: map.get($state, focus-outline);
-        box-shadow: 0 0 0 1px map.get($state, focus-outline);
-    }
-}
-
-@mixin kbq-toggle-color($toggle) {
-    @include kbq-toggle-state(map.get($toggle, default));
+@mixin kbq-toggle-color($component, $type) {
+    @include kbq-toggle-state($component, $type, default);
 
     &:hover {
-        @include kbq-toggle-state(map.get($toggle, hover));
+        @include kbq-toggle-state($component, $type, states-hover);
     }
 
     &.kbq-active {
-        @include kbq-toggle-state(map.get($toggle, checked));
+        @include kbq-toggle-state($component, $type, states-checked);
     }
 
     &.kbq-active:hover {
-        @include kbq-toggle-state(map.get($toggle, checked-hover));
+        @include kbq-toggle-state($component, $type, states-checked-hover);
     }
 
     &.cdk-keyboard-focused {
-        $focused: map.get($toggle, focused);
-
-        @include kbq-toggle-state($focused);
-        @include kbq-toggle-focused-state($focused);
+        @include kbq-toggle-state($component, $type, states-focused);
+
+        & .kbq-toggle-bar {
+            border-color: kbq-css-variable(
+                toggle-#{$type}-states-focused-focus-outline,
+                map.get($component, $type, states-focused, focus-outline)
+            );
+            box-shadow: 0 0 0.1px 1px
+                kbq-css-variable(
+                    toggle-#{$type}-states-focused-focus-outline,
+                    map.get($component, $type, states-focused, focus-outline)
+                );
+        }
     }
 
     &.kbq-active.cdk-keyboard-focused {
-        $checked-focused: map.get($toggle, checked-focused);
-
-        @include kbq-toggle-state($checked-focused);
-        @include kbq-toggle-focused-state($checked-focused);
+        @include kbq-toggle-state($component, $type, states-checked-focused);
+
+        & .kbq-toggle-bar {
+            border-color: kbq-css-variable(
+                toggle-#{$type}-states-checked-focused-focus-outline,
+                map.get($component, $type, states-checked-focused, focus-outline)
+            );
+            box-shadow: 0 0 0.1px 1px
+                kbq-css-variable(
+                    toggle-#{$type}-states-checked-focused-focus-outline,
+                    map.get($component, $type, states-checked-focused, focus-outline)
+                );
+        }
     }
 
     &.kbq-disabled,
     &.kbq-active.kbq-disabled {
-        @include kbq-toggle-state(map.get($toggle, disabled));
+        @include kbq-toggle-state($component, $type, states-disabled);
     }
 }
 
 @mixin kbq-toggle-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $toggle: map.get(map.get($theme, components), toggle);
-
-    $toggle-theme: map.get($toggle, theme);
-    $toggle-error: map.get($toggle, error);
+    $toggle: map.get($theme, components, toggle);
 
     .kbq-toggle {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($theme, foreground, contrast));
 
-        @include kbq-toggle-color($toggle-theme);
+        @include kbq-toggle-color($toggle, theme);
 
         &.kbq-error {
-            @include kbq-toggle-color($toggle-error);
+            @include kbq-toggle-color($toggle, error);
         }
     }
 }
 
 @mixin kbq-toggle-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-toggle:not(.kbq-toggle_big) {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-label));
+        @include kbq-typography-css-variables(toggle, normal-label);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-caption));
+            @include kbq-typography-css-variables(toggle, normal-caption);
         }
 
         & .kbq-toggle-bar-container {
-            height: kbq-line-height($config, map.get($tokens, toggle-font-normal-label));
+            @include kbq-css-font-variable(toggle, normal-caption, line-height, font-);
         }
     }
 
     .kbq-toggle.kbq-toggle_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-label));
+        @include kbq-typography-css-variables(toggle, big-label);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-caption));
+            @include kbq-typography-css-variables(toggle, big-caption);
         }
 
         & .kbq-toggle-bar-container {
-            height: kbq-line-height($config, map.get($tokens, toggle-font-big-label));
+            @include kbq-css-font-variable(toggle, big-label, line-height, font-);
         }
     }
 }

package/toggle/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './toggle.module';
 export * from './toggle.component';
+export * from './toggle.module';

package/toggle/toggle.scss

@@ -1,8 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -50,15 +49,12 @@ $tokens: meta.module-variables(tokens) !default;
             radius: 8px;
         }
 
-        height: var(--kbq-toggle-size-normal-height, map.get($tokens, toggle-size-normal-height));
-        width: var(--kbq-toggle-size-normal-width, map.get($tokens, toggle-size-normal-width));
+        height: kbq-css-variable(toggle-size-normal-height);
+        width: kbq-css-variable(toggle-size-normal-width);
     }
 
     .kbq-hint {
-        margin-top: var(
-            --kbq-toggle-size-normal-vertical-content-padding,
-            map.get($tokens, toggle-size-normal-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(toggle-size-normal-vertical-content-padding);
     }
 }
 
@@ -69,31 +65,22 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
 
     &.left {
-        margin-right: var(
-            --kbq-toggle-size-normal-horizontal-content-padding,
-            map.get($tokens, toggle-size-normal-horizontal-content-padding)
-        );
+        margin-right: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
     }
 
     &.right {
-        margin-left: var(
-            --kbq-toggle-size-normal-horizontal-content-padding,
-            map.get($tokens, toggle-size-normal-horizontal-content-padding)
-        );
+        margin-left: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
     }
 }
 
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
-        height: var(--kbq-toggle-size-big-height, map.get($tokens, toggle-size-big-height));
-        width: var(--kbq-toggle-size-big-width, map.get($tokens, toggle-size-big-width));
+        height: kbq-css-variable(toggle-size-big-height);
+        width: kbq-css-variable(toggle-size-big-width);
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-toggle-size-big-vertical-content-padding,
-            map.get($tokens, toggle-size-big-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(toggle-size-big-vertical-content-padding);
     }
 }
 

package/tooltip/_tooltip-theme.scss

@@ -3,47 +3,43 @@
 
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-tooltip-color($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-@mixin kbq-tooltip-color($tooltip) {
-    box-shadow: map.get($tooltip, shadow);
+    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
 
     & .kbq-tooltip__inner {
-        color: map.get($tooltip, text);
+        color: kbq-css-variable(tooltip-#{$style-name}-text, map.get($style, text));
 
-        background-color: map.get($tooltip, background);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
     }
 
     & .kbq-tooltip__arrow {
-        background-color: map.get($tooltip, background);
-        box-shadow: map.get($tooltip, shadow);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
+        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
     }
 }
 
 @mixin kbq-tooltip-theme($theme) {
     $tooltip: map.get(map.get($theme, components), tooltip);
 
-    $theme-fade-off: map.get($tooltip, theme-fade-off);
-    $contrast-fade-off: map.get($tooltip, contrast-fade-off);
-    $contrast-fade-on: map.get($tooltip, contrast-fade-on);
-
     .kbq-tooltip.kbq-theme {
-        @include kbq-tooltip-color($theme-fade-off);
+        @include kbq-tooltip-color($tooltip, theme-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast {
-        @include kbq-tooltip-color($contrast-fade-off);
+        @include kbq-tooltip-color($tooltip, contrast-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast-fade {
-        @include kbq-tooltip-color($contrast-fade-on);
+        @include kbq-tooltip-color($tooltip, contrast-fade-on);
     }
 }
 
 @mixin kbq-tooltip-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tooltip {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+        @include kbq-typography-css-variables(tooltip, default);
     }
 }

package/tooltip/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './tooltip.module';
 export * from './tooltip.component';
+export * from './tooltip.module';

package/tooltip/tooltip.component.d.ts

@@ -1,7 +1,8 @@
+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 { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
+import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
     Default = "default",
@@ -37,7 +38,8 @@ export declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof kbqTooltipScrollStrategyFactory;
 };
-export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> {
+export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements OnDestroy {
+    protected focusMonitor: FocusMonitor;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
@@ -64,20 +66,22 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     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<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
 }
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     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<KbqWarningTooltipTrigger, [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<KbqWarningTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
@@ -87,8 +91,8 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     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<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, [null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip.scss

@@ -3,42 +3,36 @@
 
 @use '../core/pop-up/pop-up';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 $trigger-margin: 8px;
 
-
 .kbq-tooltip__inner {
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: var(--kbq-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+    max-width: kbq-css-variable(tooltip-size-max-width);
 
     .kbq-tooltip__inner {
-        padding:
-            var(--kbq-tooltip-size-padding-vertical, map.get($tokens, tooltip-size-padding-vertical))
-            var(--kbq-tooltip-size-padding-horizontal, map.get($tokens, tooltip-size-padding-horizontal));
+        padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
     }
 }
 
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
-    height: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    width: kbq-css-variable(tooltip-size-arrow-size);
+    height: kbq-css-variable(tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 

package/tree/_tree-theme.scss

@@ -3,63 +3,62 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-tree-option($component, $state-name) {
+    $state: map.get($component, $state-name);
 
-@mixin kbq-tree-option($state) {
-    background: map.get($state, container-background);
+    background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-tree-node-toggle .kbq-icon {
-        color: map.get($state, tree-toggle);
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: map.get($state, action-button);
+        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
     }
 }
 
-
 @mixin kbq-tree-theme($theme) {
     .kbq-tree-selection:focus {
         outline: none;
     }
 
     .kbq-tree-option {
-        $tree-item: map.get(map.get($theme, components), tree-item);
+        $tree-item: map.get($theme, components, tree-item);
 
-        @include kbq-tree-option(map.get($tree-item, default));
+        @include kbq-tree-option($tree-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(map.get($tree-item, hover));
+            @include kbq-tree-option($tree-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($tree-item, focused), focus-outline);
+            border-color: kbq-css-variable(
+                tree-states-focused-focus-outline,
+                map.get($tree-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {
-            @include kbq-tree-option(map.get($tree-item, selected));
+            @include kbq-tree-option($tree-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(map.get($tree-item, selected-hover));
+                @include kbq-tree-option($tree-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-tree-option(map.get($tree-item, disabled));
+            @include kbq-tree-option($tree-item, states-disabled);
 
             & .kbq-icon {
                 cursor: default;
@@ -69,13 +68,11 @@
 }
 
 @mixin kbq-tree-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+        @include kbq-typography-css-variables(tree, text);
     }
 
     .kbq-tree-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
+        @include kbq-typography-css-variables(tree, caption);
     }
 }

package/tree/public-api.d.ts

@@ -1,16 +1,16 @@
-export * from './tree.module';
-export * from './tree-base';
-export * from './outlet';
-export * from './tree';
-export * from './node';
-export * from './padding.directive';
-export * from './toggle';
-export * from './tree-selection.component';
-export * from './tree-option.component';
 export * from './control/base-tree-control';
-export * from './control/tree-control';
 export * from './control/flat-tree-control';
 export * from './control/flat-tree-control.filters';
 export * from './control/nested-tree-control';
+export * from './control/tree-control';
 export * from './data-source/flat-data-source';
 export * from './data-source/nested-data-source';
+export * from './node';
+export * from './outlet';
+export * from './padding.directive';
+export * from './toggle';
+export * from './tree';
+export * from './tree-base';
+export * from './tree-option.component';
+export * from './tree-selection.component';
+export * from './tree.module';

package/tree/toggle.scss

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

package/tree/tree-base.d.ts

@@ -1,5 +1,5 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, ViewContainerRef, TrackByFunction } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { TreeControl } from './control/tree-control';
@@ -41,7 +41,7 @@ export declare class KbqTreeBase<T> implements AfterContentChecked, CollectionVi
     /**
      * Provides a stream containing the latest data array to render. Influenced by the tree's
      * stream of view window (what dataNodes are currently on screen).
-     * Data source can be an observable of data array, or a dara array to render.
+     * Data source can be an observable of data array, or a data array to render.
      */
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);

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

@@ -1,5 +1,5 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, EventEmitter, ElementRef, InjectionToken, AfterContentInit, NgZone } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone } from '@angular/core';
 import { KbqOptionActionComponent, KbqPseudoCheckbox, KbqPseudoCheckboxState, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';

package/tree/tree-option.scss

@@ -3,11 +3,10 @@
 
 @use '../core/styles/common';
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-tree-option {
     @include common.kbq-no-select;
 
@@ -25,26 +24,30 @@ $tokens: meta.module-variables(tokens) !default;
 
     word-wrap: break-word;
 
-    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
     padding-top: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-right: calc(
-        var(--kbq-tree-size-container-padding-right, $padding-right) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-right, $padding-right) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-bottom: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
 
-    gap: var(
-        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         $tokens: meta.module-variables(tokens) !default;
@@ -54,8 +57,8 @@ $tokens: meta.module-variables(tokens) !default;
 
         @include common.kbq-truncate-line();
 
-        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-top: kbq-css-variable(list-size-text-padding-vertical);
+        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
     }
 
     &:focus {