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

package/core/option/_option-action-theme.scss

@@ -2,40 +2,37 @@
 
 @use '../styles/theming/theming' as *;
 @use '../styles/typography/typography-utils' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-option-action-theme($theme) {
-    $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $secondary: map.get($theme, secondary);
-
-    $is-dark: map.get($theme, is-dark);
+    $states: map.get($theme, states);
 
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 70, 30));
+                color: kbq-css-variable(states-icon-contrast-fade, map.get($states, icon, contrast-fade));
             }
 
-            background-color: kbq-color($secondary, A16);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
 
         &:hover .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 70, 30));
+            color: kbq-css-variable(states-icon-contrast-fade-hover, map.get($states, icon, contrast-fade-hover));
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 30, 70));
+                color: kbq-css-variable(states-icon-disabled, map.get($states, icon, disabled));
             }
 
-            background-color: transparent;
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
     }
 }

package/core/option/_option-theme.scss

@@ -2,26 +2,23 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
+@mixin kbq-option($component, $style-name) {
+    $state: map.get($component, $style-name);
 
-@mixin kbq-option($state) {
-    background: map.get($state, container-background);
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-option-action .kbq-icon {
-        color: map.get($state, icon-button);
+        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
@@ -29,39 +26,37 @@
     $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        @include kbq-option(map.get($list-item, default));
+        @include kbq-option($list-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-option(map.get($list-item, hover));
+            @include kbq-option($list-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($list-item, focused), focus-outline);
+            border-color: map.get($list-item, states-focused, focus-outline);
         }
 
         &.kbq-selected {
-            @include kbq-option(map.get($list-item, selected));
+            @include kbq-option($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-option(map.get($list-item, selected-hover));
+                @include kbq-option($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-option(map.get($list-item, disabled));
+            @include kbq-option($list-item, states-disabled);
         }
     }
 }
 
 @mixin kbq-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+        @include kbq-typography-css-variables(list, text);
     }
 
     .kbq-list-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        @include kbq-typography-css-variables(list, caption);
     }
 }

package/core/option/optgroup.scss

@@ -4,7 +4,6 @@
 @use '../styles/common/vendor-prefixes';
 @use '../styles/tokens';
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-optgroup-label {

package/core/option/option.scss

@@ -3,7 +3,6 @@
 
 @use '../styles/common';
 
-
 .kbq-option {
     @include common.kbq-list-item-base();
 

package/core/pop-up/_pop-up.scss

@@ -88,7 +88,6 @@
         top: $arrow-offset;
         right: $arrow-padding;
     }
-
 }
 
 @mixin popup-arrow-borders-color($name, $value) {

package/core/pop-up/pop-up-trigger.d.ts

@@ -33,12 +33,13 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
-    protected listeners: Map<string, EventListenerOrEventListenerObject>;
+    protected listeners: Map<string, EventListener>;
     protected closingActionsSubscription: Subscription;
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
     protected readonly destroyed: Subject<void>;
+    protected triggerName: string;
     protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
@@ -63,6 +64,7 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected getPriorityPlacementStrategy(value: string | string[]): ConnectionPositionPair[];
     protected getPrioritizedPositions(): ConnectionPositionPair[];
     protected clearListeners(): void;
+    private createListener;
     private addEventListener;
     private removeEventListener;
     private subscribeOnClosingActions;

package/core/select/common.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { KbqFormFieldRef } from '../form-field';
+import * as i0 from "@angular/core";
+export declare class KbqSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectMatcher {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
+    protected formField: KbqFormFieldRef;
+    searchChangesSubscription: Subscription;
+    isSearchChanged: boolean;
+    get ngControl(): any;
+    constructor(formField: KbqFormFieldRef);
+    focus(): void;
+    reset(): void;
+    value(): any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}

package/core/select/index.d.ts

@@ -1,3 +1,4 @@
 export * from './events';
 export * from './errors';
 export * from './constants';
+export * from './common';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,48 +1,44 @@
 @use 'sass:map';
 
+@use '../../styles/common/tokens' as *;
 
-@mixin kbq-pseudo-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
+@mixin kbq-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
 
-    border-color: map.get($default, border);
+    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
+    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: map.get($default, color);
+        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        $checked: map.get($checkbox, checked);
-
-        border-color: map.get($checked, border);
-        background: map.get($checked, background);
+        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($disabled, color);
+            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: map.get($disabled, border);
-        background: map.get($disabled, background);
+        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
     }
 }
 
 @mixin kbq-pseudo-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color(map.get($checkbox, theme));
+        @include kbq-pseudo-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color(map.get($checkbox, error));
+            @include kbq-pseudo-checkbox-color($checkbox, error);
         }
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../../styles/tokens';
-
+@use '../../styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -14,12 +14,12 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: kbq-css-variable(checkbox-size-normal-width);
+    height: kbq-css-variable(checkbox-size-normal-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        radius: kbq-css-variable(checkbox-size-normal-border-radius);
+        width: kbq-css-variable(checkbox-size-normal-border-width);
         style: solid;
     }
 
@@ -56,11 +56,11 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
-    width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-    height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    width: kbq-css-variable(checkbox-size-big-width);
+    height: kbq-css-variable(checkbox-size-big-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
-        width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+        radius: kbq-css-variable(checkbox-size-big-border-radius);
+        width: kbq-css-variable(checkbox-size-big-border-width);
     }
 }

package/core/services/theme.service.d.ts

@@ -1,4 +1,4 @@
-import { Renderer2, RendererFactory2 } from '@angular/core';
+import { OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface KbqTheme {
@@ -7,13 +7,14 @@ export interface KbqTheme {
     selected: boolean;
 }
 export declare const KbqDefaultThemes: KbqTheme[];
-export declare class ThemeService<T extends KbqTheme | null = KbqTheme> {
+export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
     private rendererFactory;
     current: BehaviorSubject<T>;
     themes: T[];
     protected renderer: Renderer2;
     protected subscription: Subscription;
     constructor(rendererFactory: RendererFactory2);
+    ngOnDestroy(): void;
     setThemes(items: T[]): void;
     setTheme(value: T | number): void;
     getTheme(): T;

package/core/styles/_core.scss

@@ -3,7 +3,6 @@
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 
-
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin kbq-core() {
     @include a11y-visually-hidden();

package/core/styles/_koobiq-theme.scss

@@ -17,6 +17,7 @@
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
@@ -56,7 +57,6 @@
 @use '../highlight/highlight-theme' as *;
 @use '../../dl/dl-theme' as *;
 
-
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
@@ -72,6 +72,7 @@
     @include kbq-dl-theme($theme);
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
+    @include kbq-empty-state-theme($theme);
     @include kbq-form-field-theme($theme);
     @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
@@ -112,11 +113,11 @@
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
-    @if $config == null {
+    @if not $config {
         $config: kbq-typography-config($tokens);
     }
 
-    @if $md-config == null {
+    @if not $md-config {
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
@@ -131,6 +132,7 @@
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
     @include kbq-dropdown-typography($config);
+    @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);

package/core/styles/common/_animation.scss

@@ -25,14 +25,15 @@
         $darker: rgba(0, 0, 0, 0.04);
 
         background: linear-gradient(
-            135deg,
-            $darker 10px,
-            $lighter 10px,
-            $lighter 20px,
-            $darker 20px,
-            $darker 30px,
-            $lighter 31px
-        ) repeat;
+                135deg,
+                $darker 10px,
+                $lighter 10px,
+                $lighter 20px,
+                $darker 20px,
+                $darker 30px,
+                $lighter 31px
+            )
+            repeat;
         background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
     }

package/core/styles/common/_button.scss

@@ -1,10 +1,8 @@
 @use 'vendor-prefixes';
 
-
 @mixin kbq-button-reset {
     @include vendor-prefixes.user-select(none);
     cursor: pointer;
     outline: none;
     border: none;
 }
-

package/core/styles/common/_clearfix.scss

@@ -3,7 +3,7 @@
 
     &:before,
     &:after {
-        content: "";
+        content: '';
         display: table;
     }
 

package/core/styles/common/_groups.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
-
+@use '../common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -77,12 +77,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     flex-direction: column;
 
-    /* stylelint-disable no-descending-specificity */
     > .kbq-group-item {
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,10 +91,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(
-                --kbq-button-size-border-radius,
-                map.get($tokens, button-size-border-radius)
-            );
+            border-bottom-left-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);
@@ -114,6 +110,4 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-group-item + .kbq-group-item {
         margin-top: calc(-1 * var(--kbq-button-size-border-width, #{map.get($tokens, button-size-border-width)}));
     }
-    /* stylelint-enable no-descending-specificity */
 }
-

package/core/styles/common/_list.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
-
+@use './tokens' as *;
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
@@ -55,8 +55,8 @@
 
     @include 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);
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
@@ -82,30 +82,35 @@
 
     min-height: 32px;
 
-    gap: var(
-        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(list-size-container-content-gap-horizontal);
 
-    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(list-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
-    padding:
-        calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+    padding: calc(
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) - var(
+                    --kbq-list-size-container-focus-outline-width,
+                    $outline-width
+                )
         )
         calc(
-            var(--kbq-list-size-container-padding-right, $padding-right) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+            var(--kbq-list-size-container-padding-right, $padding-right) - var(
+                    --kbq-list-size-container-focus-outline-width,
+                    $outline-width
+                )
         )
         calc(
-            var(--kbq-list-size-container-padding-vertical, $padding-vertical) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+            var(--kbq-list-size-container-padding-vertical, $padding-vertical) - var(
+                    --kbq-list-size-container-focus-outline-width,
+                    $outline-width
+                )
         )
         calc(
-            var(--kbq-list-size-container-padding-left, $padding-left) -
-            var(--kbq-list-size-container-focus-outline-width, $outline-width)
+            var(--kbq-list-size-container-padding-left, $padding-left) - var(
+                    --kbq-list-size-container-focus-outline-width,
+                    $outline-width
+                )
         );
 
     .kbq-list-text {
@@ -113,10 +118,7 @@
     }
 
     .kbq-list-option-caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
     }
 }
 
@@ -131,11 +133,8 @@
 
     min-height: 32px;
 
-    padding:
-        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
-        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+    padding: kbq-css-variable(list-size-header-padding-top) kbq-css-variable(list-size-header-padding-horizontal)
+        kbq-css-variable(list-size-header-padding-bottom) kbq-css-variable(list-size-header-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -153,11 +152,9 @@
 
     min-height: 32px;
 
-    padding:
-        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
-        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+    padding: kbq-css-variable(list-size-subheading-padding-top)
+        kbq-css-variable(list-size-subheading-padding-horizontal) kbq-css-variable(list-size-subheading-padding-bottom)
+        kbq-css-variable(list-size-subheading-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_overlay.scss

@@ -6,7 +6,7 @@ $overlay-z-index: 1000 !default;
 $overlay-backdrop-z-index: 1000 !default;
 
 // Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.50) !default;
+$overlay-backdrop-color: rgba(0, 0, 0, 0.5) !default;
 
 // Default backdrop animation is based on the Material Design swift-ease-out.
 $backdrop-animation-duration: 400ms !default;
@@ -116,7 +116,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     .cdk-overlay-transparent-backdrop {
         // Define a transition on the visibility so that the `transitionend` event can fire immediately.
-        transition: visibility 1ms linear, opacity 1ms linear;
+        transition:
+            visibility 1ms linear,
+            opacity 1ms linear;
         visibility: hidden;
         opacity: 1;
 
@@ -174,4 +176,3 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         overflow-y: scroll;
     }
 }
-

package/core/styles/common/_popup.scss

@@ -1,11 +1,11 @@
 @use 'sass:map';
-
+@use './tokens' as *;
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
-    box-shadow: map.get($popup, shadow);
-    border-color: map.get($popup, border);
+    box-shadow: kbq-css-variable(popup-shadow, map.get($popup, shadow));
+    border-color: kbq-css-variable(popup-border, map.get($popup, border));
 
-    background-color: map.get($popup, background);
+    background-color: kbq-css-variable(popup-background, map.get($popup, background));
 }