@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/timezone/_timezone-option-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-timezone-option-theme($theme) {
@@ -9,34 +10,32 @@
 
     .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,16 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .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 +28,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-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,12 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
 
 .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/toast/_toast-theme.scss

@@ -2,53 +2,54 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-toast($toast) {
-    box-shadow: map.get($toast, box-shadow);
+@mixin kbq-toast($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-    background: map.get($toast, background);
+    box-shadow: kbq-css-variable(toast-#{$style-name}-container-box-shadow, map.get($style, box-shadow));
+
+    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);
+    $toast: map.get($theme, components, toast);
 
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast(map.get($toast, contrast));
+            @include kbq-toast($toast, contrast);
         }
 
         &.kbq-toast_success {
-            @include kbq-toast(map.get($toast, success));
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_warning {
-            @include kbq-toast(map.get($toast, success));
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_error {
-            @include kbq-toast(map.get($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,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-toast-container {
@@ -12,8 +9,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     align-items: flex-end;
 
-    margin-top: var(--kbq-toast-stack-size-margin-top, map.get($tokens, toast-stack-size-margin-top));
-    margin-right: var(--kbq-toast-stack-size-margin-right, map.get($tokens, toast-stack-size-margin-right));
+    margin-top: kbq-css-variable(toast-stack-size-margin-top);
+    margin-right: kbq-css-variable(toast-stack-size-margin-right);
 
-    gap: var(--kbq-toast-stack-size-gap, map.get($tokens, toast-stack-size-gap));
+    gap: kbq-css-variable(toast-stack-size-gap);
 }

package/toast/toast.component.scss

@@ -1,7 +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,27 +10,27 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    width: var(--kbq-toast-size-container-width, map.get($tokens, toast-size-container-width));
+    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: var(--kbq-toast-size-container-padding-left, map.get($tokens, toast-size-container-padding-left));
-    padding-right: var(--kbq-toast-size-container-padding-right, map.get($tokens, toast-size-container-padding-right));
+    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: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
-    max-width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
-    height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
-    max-height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+    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: var(--kbq-toast-size-border-raius, map.get($tokens, toast-size-border-raius));
+    border-radius: kbq-css-variable(toast-size-border-radius);
 
-    margin-right: var(--kbq-toast-size-icon-margin-right, map.get($tokens, toast-size-icon-margin-right));
+    margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
-    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
 }
 
 .kbq-toast__container {
@@ -39,9 +39,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     flex: 1;
 
-    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
-    padding-right: map.get($tokens, size-s);
-    padding-bottom: var(--kbq-toast-size-content-padding-bottom, map.get($tokens, toast-size-content-padding-bottom));
+    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 {
@@ -51,7 +51,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-toast__title_with-content {
-    padding-bottom: var(--kbq-toast-size-caption-padding-bottom, map.get($tokens, toast-size-caption-padding-bottom));
+    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
 }
 
 .kbq-toast__text {
@@ -68,17 +68,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)
-    );
+    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/toggle/_toggle-theme.scss

@@ -3,104 +3,110 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-toggle-state($state) {
+@mixin kbq-toggle-state($component, $type, $state-name) {
+    $state: map.get($component, $type, $state-name);
+    $base: toggle-#{$type}-#{$state-name};
+
     .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);
-    }
-}
-
-@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);
+        background: kbq-css-variable(#{$base}-circle-background, map.get($state, circle-background));
     }
 }
 
-@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,7 +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 +50,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 +66,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,44 @@
 
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tooltip-color($tooltip) {
-    box-shadow: map.get($tooltip, shadow);
+@mixin kbq-tooltip-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    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);
     }
 }