@koobiq/components 17.4.0 → 17.6.0

package/navbar/_navbar-theme.scss

@@ -1,43 +1,34 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-navbar-item($component, $state-name) {
-    $state: map.get($component, $state-name);
-
+@mixin kbq-navbar-item($state-name) {
     &:not(.kbq-navbar-item_has-nested) {
         &:after {
             display: block;
-            background: kbq-css-variable(navbar-item-#{$state-name}-content-background, map.get($state, background));
+            background: kbq-css-variable(navbar-item-#{$state-name}-content-background);
         }
     }
 
     .kbq-navbar-title {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-text, map.get($state, text));
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-text);
     }
 
     & > .kbq-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-left, map.get($state, icon-left)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-left) !important;
     }
 
     .kbq-navbar-item__arrow-icon {
-        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-right, map.get($state, icon-right)) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-content-icon-right) !important;
     }
 }
 
-@mixin kbq-navbar-theme($theme) {
-    $navbar: map.get($theme, components, navbar);
-    $item: map.get($navbar, item);
-
+@mixin kbq-navbar-theme() {
     .kbq-navbar,
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        background-color: kbq-css-variable(navbar-background, map.get($navbar, background));
+        background-color: kbq-css-variable(navbar-background);
     }
 
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        border-right: 1px solid kbq-css-variable(navbar-border, map.get($navbar, border));
+        border-right: 1px solid kbq-css-variable(navbar-border);
     }
 
     .kbq-navbar-item,
@@ -45,10 +36,10 @@
     .kbq-navbar-toggle {
         cursor: pointer;
 
-        @include kbq-navbar-item($item, default);
+        @include kbq-navbar-item(default);
 
         &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, states-hover);
+            @include kbq-navbar-item(states-hover);
         }
 
         &.cdk-focused.cdk-keyboard-focused {
@@ -56,14 +47,13 @@
 
             &:after {
                 display: block;
-                box-shadow: inset 0 0 0 2px
-                    kbq-css-variable(states-line-focus-theme, map.get($theme, states, line, focus-theme));
+                box-shadow: inset 0 0 0 2px kbq-css-variable(states-line-focus-theme);
             }
         }
 
         &:active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand),
         &.kbq-active:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item($item, states-selected);
+            @include kbq-navbar-item(states-selected);
         }
 
         &.kbq-navbar-focusable-item {
@@ -71,7 +61,7 @@
         }
 
         &.kbq-disabled {
-            @include kbq-navbar-item($item, states-disabled);
+            @include kbq-navbar-item(states-disabled);
 
             pointer-events: none;
             cursor: default;
@@ -91,7 +81,7 @@
     }
 
     .kbq-navbar-divider {
-        background: kbq-css-variable(line-contrast-less, map.get($theme, line, contrast-less));
+        background: kbq-css-variable(line-contrast-less);
     }
 }
 
@@ -104,7 +94,7 @@ button {
     }
 }
 
-@mixin kbq-navbar-typography($config) {
+@mixin kbq-navbar-typography() {
     .kbq-navbar-title {
         @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
     }

package/navbar/navbar-divider.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-divider {

package/navbar/navbar-item.component.d.ts

@@ -1,7 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
@@ -128,13 +126,13 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
@@ -146,12 +144,12 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/list';
 
 @use '../core/styles/common/tokens' as *;

package/navbar/navbar-tokens.scss

@@ -0,0 +1,83 @@
+.kbq-navbar {
+    --kbq-size-xxs: 4px;
+    --kbq-size-xs: 6px;
+    --kbq-size-s: 8px;
+    --kbq-size-m: 12px;
+    --kbq-size-l: 16px;
+    --kbq-size-xl: 20px;
+    --kbq-size-xxl: 24px;
+    --kbq-size-3xl: 32px;
+    --kbq-size-4xl: 40px;
+    --kbq-size-5xl: 48px;
+    --kbq-typography-text-normal-medium-font-size: 14px;
+    --kbq-typography-text-normal-medium-line-height: 20px;
+    --kbq-typography-text-normal-medium-letter-spacing: -0.006em;
+    --kbq-typography-text-normal-medium-font-weight: 500;
+    --kbq-typography-text-normal-medium-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-typography-text-normal-medium-text-transform: null;
+    --kbq-typography-text-normal-medium-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-navbar-font-title-font-size: 18px;
+    --kbq-navbar-font-title-line-height: 28px;
+    --kbq-navbar-font-title-letter-spacing: normal;
+    --kbq-navbar-font-title-font-weight: 700;
+    --kbq-navbar-font-title-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-navbar-font-title-text-transform: null;
+    --kbq-navbar-font-title-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-navbar-item-size-content-border-radius: 8px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-line-contrast-less: hsla(229, 15%, 6%, 12%);
+    --kbq-states-line-focus-theme: hsla(216, 100%, 60%, 100%);
+    --kbq-navbar-background: hsla(0, 0%, 100%, 100%);
+    --kbq-navbar-border: hsla(229, 15%, 6%, 12%);
+    --kbq-navbar-item-default-content-text: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-default-content-background: transparent;
+    --kbq-navbar-item-default-content-icon-left: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-default-content-icon-right: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-states-hover-content-text: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-states-hover-content-background: hsla(229, 15%, 50%, 8%);
+    --kbq-navbar-item-states-hover-content-icon-left: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-hover-content-icon-right: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-selected-content-text: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-states-selected-content-background: hsla(229, 15%, 50%, 16%);
+    --kbq-navbar-item-states-selected-content-icon-left: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-selected-content-icon-right: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-text: hsla(229, 15%, 15%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-background: hsla(229, 15%, 50%, 8%);
+    --kbq-navbar-item-states-selected-hover-content-icon-left: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-icon-right: hsla(229, 15%, 10%, 100%);
+    --kbq-navbar-item-states-disabled-content-text: hsla(229, 15%, 15%, 32%);
+    --kbq-navbar-item-states-disabled-content-background: transparent;
+    --kbq-navbar-item-states-disabled-content-icon-left: hsla(229, 15%, 15%, 32%);
+    --kbq-navbar-item-states-disabled-content-icon-right: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-line-contrast-less: hsla(229, 15%, 22%, 100%);
+    --kbq-states-line-focus-theme: hsla(216, 100%, 60%, 100%);
+    --kbq-navbar-background: hsla(229, 15%, 12%, 100%);
+    --kbq-navbar-border: hsla(229, 15%, 22%, 100%);
+    --kbq-navbar-item-default-content-text: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-default-content-background: transparent;
+    --kbq-navbar-item-default-content-icon-left: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-default-content-icon-right: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-hover-content-text: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-hover-content-background: hsla(229, 15%, 50%, 16%);
+    --kbq-navbar-item-states-hover-content-icon-left: hsla(229, 15%, 90%, 100%);
+    --kbq-navbar-item-states-hover-content-icon-right: hsla(229, 15%, 90%, 100%);
+    --kbq-navbar-item-states-selected-content-text: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-selected-content-background: hsla(229, 100%, 85%, 15%);
+    --kbq-navbar-item-states-selected-content-icon-left: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-selected-content-icon-right: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-text: hsla(229, 15%, 80%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-background: hsla(229, 15%, 50%, 16%);
+    --kbq-navbar-item-states-selected-hover-content-icon-left: hsla(229, 15%, 90%, 100%);
+    --kbq-navbar-item-states-selected-hover-content-icon-right: hsla(229, 15%, 90%, 100%);
+    --kbq-navbar-item-states-disabled-content-text: hsla(229, 15%, 40%, 100%);
+    --kbq-navbar-item-states-disabled-content-background: transparent;
+    --kbq-navbar-item-states-disabled-content-icon-left: hsla(229, 15%, 30%, 100%);
+    --kbq-navbar-item-states-disabled-content-icon-right: hsla(229, 15%, 30%, 100%);
+}

package/navbar/navbar.scss

@@ -1,8 +1,7 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
+@use './navbar-theme' as *;
+
 .kbq-navbar {
     display: flex;
     flex-direction: row;
@@ -26,3 +25,6 @@
 .kbq-navbar .kbq-navbar-container + .kbq-navbar-container {
     margin-left: kbq-css-variable(size-xxl);
 }
+
+@include kbq-navbar-theme();
+@include kbq-navbar-typography();

package/navbar/vertical-navbar.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
 .kbq-vertical-navbar {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.4.0",
+    "version": "17.6.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,17 +19,17 @@
     "bugs": {
         "url": "https://github.com/koobiq/angular-components/issues"
     },
-    "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
+    "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.4.0",
-        "@koobiq/angular-moment-adapter": "17.4.0",
-        "@koobiq/angular-luxon-adapter": "17.4.0",
+        "@koobiq/cdk": "17.6.0",
+        "@koobiq/angular-moment-adapter": "17.6.0",
+        "@koobiq/angular-luxon-adapter": "17.6.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.4.0",
-        "@koobiq/design-tokens": "3.4.0",
+        "@koobiq/tokens-builder": "3.5.0",
+        "@koobiq/design-tokens": "3.5.0",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"

package/popover/_popover-theme.scss

@@ -1,40 +1,33 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-popover-theme($theme) {
-    $popover: map.get(map.get($theme, components), popover);
-    $background: map.get($theme, background);
-
+@mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
+        box-shadow: kbq-css-variable(popover-container-box-shadow);
     }
 
     .kbq-popover__container {
-        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
+        background: kbq-css-variable(popover-container-background);
     }
 
     .kbq-popover__arrow {
-        box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
-        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
+        box-shadow: kbq-css-variable(popover-container-box-shadow);
+        background: kbq-css-variable(popover-container-background);
     }
 
     .kbq-popover__close {
-        background-color: map.get($background, overlay-inverse);
+        background-color: kbq-css-variable(background-overlay-inverse);
     }
 
     .kbq-popover__header {
-        color: kbq-css-variable(popover-header-text-color, map.get($popover, header, text));
+        color: kbq-css-variable(popover-header-text-color);
     }
 
     .kbq-popover__content {
-        color: kbq-css-variable(popover-content-text-color, map.get($popover, content, text));
+        color: kbq-css-variable(popover-content-text-color);
     }
 }
 
-@mixin kbq-popover-typography($config) {
+@mixin kbq-popover-typography() {
     .kbq-popover__header {
         @include kbq-typography-css-variables(popover, header);
     }

package/popover/popover-confirm.component.d.ts

@@ -1,6 +1,4 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, ViewContainerRef } from '@angular/core';
+import { EventEmitter, InjectionToken } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 import * as i0 from "@angular/core";
@@ -10,7 +8,6 @@ export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
     onConfirm: Subject<void>;
     confirmButtonText: string;
     confirmText: string;
-    constructor(changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
@@ -22,10 +19,10 @@ export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
     get confirmButtonText(): string;
     set confirmButtonText(value: string);
     private _confirmButtonText;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, confirmText: string, confirmButtonText: string);
+    constructor(confirmText: string, confirmButtonText: string);
     updateData(): void;
     setupButtonEvents(): void;
     getOverlayHandleComponentType(): typeof KbqPopoverConfirmComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [{ optional: true; }, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverConfirmTrigger, "[kbqPopoverConfirm]", ["kbqPopoverConfirm"], { "confirmText": { "alias": "kbqPopoverConfirmText"; "required": false; }; "confirmButtonText": { "alias": "kbqPopoverConfirmButtonText"; "required": false; }; }, { "confirm": "confirm"; }, never, never, false, never>;
 }

package/popover/popover-tokens.scss

@@ -0,0 +1,60 @@
+.kbq-popover {
+    --kbq-size-s: 8px;
+    --kbq-size-4xl: 40px;
+    --kbq-button-size-border-radius: 8px;
+    --kbq-popover-size-container-width-small: 200px;
+    --kbq-popover-size-container-width-medium: 400px;
+    --kbq-popover-size-container-width-large: 640px;
+    --kbq-popover-size-container-border-radius: 12px;
+    --kbq-popover-size-container-max-height: 480px;
+    --kbq-popover-size-close-button-width: 32px;
+    --kbq-popover-size-close-button-margin-right: -16px;
+    --kbq-popover-size-close-button-margin-top: -10px;
+    --kbq-popover-size-header-padding-horizontal: 24px;
+    --kbq-popover-size-header-padding-top: 16px;
+    --kbq-popover-size-header-padding-bottom: 6px;
+    --kbq-popover-size-content-padding-top: 24px;
+    --kbq-popover-size-content-padding-bottom: 32px;
+    --kbq-popover-size-content-padding-horizontal: 24px;
+    --kbq-popover-size-content-padding-with-header-top: 8px;
+    --kbq-popover-size-content-padding-with-footer-bottom: 8px;
+    --kbq-popover-size-footer-padding-vertical: 16px;
+    --kbq-popover-size-footer-padding-horizontal: 24px;
+    --kbq-popover-font-header-font-size: 18px;
+    --kbq-popover-font-header-line-height: 26px;
+    --kbq-popover-font-header-letter-spacing: normal;
+    --kbq-popover-font-header-font-weight: 600;
+    --kbq-popover-font-header-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-popover-font-header-text-transform: null;
+    --kbq-popover-font-header-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-popover-font-content-font-size: 14px;
+    --kbq-popover-font-content-line-height: 20px;
+    --kbq-popover-font-content-letter-spacing: -0.006em;
+    --kbq-popover-font-content-font-weight: normal;
+    --kbq-popover-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-popover-font-content-text-transform: null;
+    --kbq-popover-font-content-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-background-overlay-inverse: hsla(229, 15%, 99%, 88%);
+    --kbq-popover-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-popover-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-popover-header-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-popover-header-scroll-shadow: 9px 0 -8px -12px hsla(229, 15%, 60%, 100%);
+    --kbq-popover-content-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-popover-footer-scroll-shadow: 0px 9px 8px -12px hsla(229, 15%, 60%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-background-overlay-inverse: hsla(229, 15%, 12%, 80%);
+    --kbq-popover-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-popover-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-popover-header-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-popover-header-scroll-shadow: 0px 1px 0px 0px hsla(229, 100%, 85%, 15%);
+    --kbq-popover-content-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-popover-footer-scroll-shadow: 0px -1px 0px 0px hsla(229, 100%, 85%, 15%);
+}

package/popover/popover.component.d.ts

@@ -1,6 +1,5 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
+import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
@@ -14,7 +13,6 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     private readonly destroyRef;
     isContentTopOverflow: boolean;
     isContentBottomOverflow: boolean;
-    constructor(changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     onContentChange(): void;
     checkContentOverflow(contentElement: HTMLElement): void;
@@ -36,6 +34,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+    protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -80,7 +79,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -89,6 +87,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }

package/popover/popover.scss

@@ -1,13 +1,9 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/pop-up/pop-up';
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './popover-theme' as *;
 
 $arrow-size: 12px;
 $trigger-margin: 9px;
@@ -135,3 +131,6 @@ $arrow-padding: calc(18px - $trigger-margin);
     right: kbq-css-variable(size-s);
     border-radius: kbq-css-variable(button-size-border-radius);
 }
+
+@include kbq-popover-theme();
+@include kbq-popover-typography();