@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/timepicker/timepicker.directive.d.ts

@@ -119,7 +119,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private incrementTime;
     private decrementTime;
     /**
-     * @description Get params for arrow-keys (up/down) time valie edit.
+     * @description Get params for arrow-keys (up/down) time value edit.
      * @param cursorPosition Current cursor position in timeString
      */
     private getTimeEditMetrics;

package/timepicker/timepicker.scss

@@ -1,16 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timepicker {
-    padding-right: calc(
-        var(--kbq-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -2,41 +2,39 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-timezone-option-theme($theme) {
     $timezone: map.get(map.get($theme, components), timezone);
 
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: map.get($timezone, text);
+        color: kbq-css-variable(timezone-text, map.get($timezone, text));
     }
 
     .kbq-timezone-option__cities {
-        color: map.get($timezone, caption);
+        color: kbq-css-variable(timezone-caption, map.get($timezone, caption));
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: map.get($timezone, optgroup-label);
+        color: kbq-css-variable(timezone-optgroup-label, map.get($timezone, optgroup-label));
     }
 }
 
 @mixin kbq-timezone-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-timezone-option__offset {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+        @include kbq-typography-css-variables(timezone-option, offset-text);
     }
 
     .kbq-timezone-option__city {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+        @include kbq-typography-css-variables(timezone-option, text);
     }
 
     .kbq-timezone-option__cities {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+        @include kbq-typography-css-variables(timezone-option, caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-optgroup-label));
+        @include kbq-typography-css-variables(timezone-option, optgroup-label);
     }
 }

package/timezone/timezone-option.component.scss

@@ -1,18 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 
-    padding: var(--kbq-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
-    column-gap: var(--kbq-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+    padding: kbq-css-variable(timezone-option-size-padding);
+    column-gap: kbq-css-variable(timezone-option-size-column-gap);
 }
 
 .kbq-timezone-option__label {
@@ -30,10 +27,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: var(--kbq-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    max-height: kbq-css-variable(timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .kbq-select__panel .kbq-timezone-option {
-    height: var(--kbq-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+    height: kbq-css-variable(timezone-option-size-height);
 }

package/timezone/timezone-option.directive.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
@@ -9,12 +10,12 @@ export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implemen
     private changeDetectorRef;
     private option;
     private resizeObserver;
-    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
+    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onMouseEnter(): void;
     onMouseLeave(): void;
     private checkTooltipDisabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneOptionTooltip, "kbq-timezone-option", never, {}, {}, never, never, false, never>;
 }

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

@@ -1,5 +1,6 @@
+import { KbqSelectSearch } from '@koobiq/components/core';
 import { KbqCleaner } from '@koobiq/components/form-field';
-import { KbqSelect, KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelect } from '@koobiq/components/select';
 import * as i0 from "@angular/core";
 export declare class KbqTimezoneSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneSelectTrigger, never>;

package/timezone/timezone-select.component.scss

@@ -1,13 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
-        padding: map.get($tokens, timezone-option-size-optgroup-label-padding);
+        padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
     }
 }

package/title/title.directive.d.ts

@@ -7,7 +7,6 @@ import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit {
-    private focusMonitor;
     private componentInstance?;
     get isOverflown(): boolean;
     get viewValue(): string;

package/toast/_toast-theme.scss

@@ -2,48 +2,52 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-toast($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-@mixin kbq-toast($toast) {
-    box-shadow: map.get($toast, box-shadow);
+    box-shadow: kbq-css-variable(toast-#{$style-name}-container-box-shadow, map.get($style, box-shadow));
 
-    background: map.get($toast, background);
+    background: kbq-css-variable(toast-#{$style-name}-container-background, map.get($style, background));
 
     .kbq-toast__title {
-        color: map.get($toast, title);
+        color: kbq-css-variable(toast-#{$style-name}-container-title, map.get($style, title));
     }
 
     .kbq-toast__text {
-        color: map.get($toast, text);
+        color: kbq-css-variable(toast-#{$style-name}-container-text, map.get($style, text));
     }
 }
 
-
 @mixin kbq-toast-theme($theme) {
-    $toast: map.get(map.get($theme, components), toast);
-
-    $contrast: map.get($toast, contrast);
-    $error: map.get($toast, error);
+    $toast: map.get($theme, components, toast);
 
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast($contrast);
+            @include kbq-toast($toast, contrast);
+        }
+
+        &.kbq-toast_success {
+            @include kbq-toast($toast, success);
+        }
+
+        &.kbq-toast_warning {
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_error {
-            @include kbq-toast($error);
+            @include kbq-toast($toast, error);
         }
     }
 }
 
 @mixin kbq-toast-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-toast {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-text));
+        @include kbq-typography-css-variables(toast, text);
     }
 
     .kbq-toast__title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+        @include kbq-typography-css-variables(toast, title);
     }
 }

package/toast/toast-container.component.scss

@@ -1,16 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-toast-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 
-    gap: map.get($tokens, size-m);
+    margin-top: kbq-css-variable(toast-stack-size-margin-top);
+    margin-right: kbq-css-variable(toast-stack-size-margin-right);
+
+    gap: kbq-css-variable(toast-stack-size-gap);
 }

package/toast/toast.component.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;
 
@@ -10,21 +9,27 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
-    max-width: 480px;
+    width: kbq-css-variable(toast-size-container-width);
 
     height: auto;
 
-    border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
+    border-radius: kbq-css-variable(toast-size-container-border-radius);
+
+    padding-left: kbq-css-variable(toast-size-container-padding-left);
+    padding-right: kbq-css-variable(toast-size-container-padding-right);
+}
+
+.kbq-toast__icon-container {
+    width: kbq-css-variable(toast-size-icon-width);
+    max-width: kbq-css-variable(toast-size-icon-width);
+    height: kbq-css-variable(toast-size-icon-height);
+    max-height: kbq-css-variable(toast-size-icon-height);
+
+    border-radius: kbq-css-variable(toast-size-border-radius);
 
-    padding:
-        var(--kbq-toast-size-container-padding-vertical, map.get($tokens, toast-size-container-padding-vertical))
-        var(--kbq-toast-size-container-padding-horizontal, map.get($tokens, toast-size-container-padding-horizontal));
+    margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-horizontal,
-        map.get($tokens, toast-size-container-content-gap-horizontal)
-    );
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
 }
 
 .kbq-toast__container {
@@ -33,10 +38,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     flex: 1;
 
-    gap: var(
-        --kbq-toast-size-container-content-gap-vertical,
-        map.get($tokens, toast-size-container-content-gap-vertical)
-    )
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
+    padding-right: kbq-css-variable(size-s);
+    padding-bottom: kbq-css-variable(toast-size-content-padding-bottom);
 }
 
 .kbq-toast__title {
@@ -45,6 +49,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
+.kbq-toast__title_with-content {
+    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
+}
+
 .kbq-toast__text {
     display: flex;
     flex: 1;
@@ -59,21 +67,12 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toast__actions {
     display: flex;
 
-    padding-top: var(--kbq-toast-size-button-stack-padding-top, map.get($tokens, toast-size-button-stack-padding-top));
+    padding-top: kbq-css-variable(toast-size-button-stack-padding-top);
 
-    gap: var(
-        --kbq-toast-size-button-stack-content-gap-horizontal,
-        map.get($tokens, toast-size-button-stack-content-gap-horizontal)
-    );
-
-    & * + .kbq-link {
-        margin-left: 12px;
-    }
+    gap: kbq-css-variable(toast-size-button-stack-content-gap-horizontal);
 }
 
 .kbq-toast__close-button {
-    margin-top: var(--kbq-toast-size-close-button-margin-top, map.get($tokens, toast-size-close-button-margin-top));
-    margin-right: var(
-        --kbq-toast-size-close-button-margin-right, map.get($tokens, toast-size-close-button-margin-right)
-    );
+    margin-top: kbq-css-variable(toast-size-close-button-margin-top);
+    margin-right: kbq-css-variable(toast-size-close-button-margin-right);
 }

package/toast/toast.service.d.ts

@@ -1,16 +1,17 @@
 import { AnimationEvent } from '@angular/animations';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
-import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
+import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken, NgZone, OnDestroy } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastComponent } from './toast.component';
 import { KbqToastData, KbqToastConfig } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<unknown>;
 export declare const defaultToastConfig: KbqToastConfig;
-export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> {
+export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> implements OnDestroy {
     private overlay;
     private injector;
     private overlayContainer;
+    private ngZone;
     private toastFactory;
     private toastConfig;
     get toasts(): ComponentRef<T>[];
@@ -18,12 +19,15 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     readonly hovered: BehaviorSubject<boolean>;
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;
+    timer: import("rxjs").Observable<number>;
     private containerInstance;
     private overlayRef;
     private portal;
+    private timerSubscription;
     private toastsDict;
     private templatesDict;
-    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, toastFactory: any, toastConfig: KbqToastConfig);
+    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, ngZone: NgZone, toastFactory: any, toastConfig: KbqToastConfig);
+    ngOnDestroy(): void;
     show(data: KbqToastData, duration?: number, onTop?: boolean): {
         ref: ComponentRef<T>;
         id: number;
@@ -50,6 +54,6 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private getBottomRight;
     private getCenter;
     private getGlobalOverlayPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqToastService<any>>;
 }

package/toast/toast.type.d.ts

@@ -1,6 +1,8 @@
 import { TemplateRef, InjectionToken } from '@angular/core';
 export declare enum KbqToastStyle {
     Contrast = "contrast",
+    Success = "success",
+    Warning = "warning",
     Error = "error"
 }
 export declare enum KbqToastPosition {

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/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);
     }
 }