@koobiq/components 17.6.0 → 17.7.0

package/risk-level/risk-level-tokens.scss

@@ -0,0 +1,72 @@
+.kbq-risk-level {
+    --kbq-risk-level-size-padding-vertical: 2px;
+    --kbq-risk-level-size-padding-horizontal: 8px;
+    --kbq-risk-level-size-border-width: 1px;
+    --kbq-risk-level-size-border-radius: 4px;
+    --kbq-risk-level-font-text-font-size: 18px;
+    --kbq-risk-level-font-text-line-height: 26px;
+    --kbq-risk-level-font-text-letter-spacing: normal;
+    --kbq-risk-level-font-text-font-weight: 600;
+    --kbq-risk-level-font-text-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-risk-level-font-text-text-transform: null;
+    --kbq-risk-level-font-text-font-feature-settings: 'calt', 'kern', 'liga';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-risk-level-filled-fade-off-success-background: hsla(104, 64%, 45%, 100%);
+    --kbq-risk-level-filled-fade-off-success-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-off-warning-background: hsla(38, 100%, 50%, 100%);
+    --kbq-risk-level-filled-fade-off-warning-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-off-error-background: hsla(7, 97%, 60%, 100%);
+    --kbq-risk-level-filled-fade-off-error-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-on-contrast-background: hsla(229, 15%, 92%, 100%);
+    --kbq-risk-level-filled-fade-on-contrast-text: hsla(229, 15%, 15%, 100%);
+    --kbq-risk-level-filled-fade-on-success-background: hsla(104, 64%, 80%, 100%);
+    --kbq-risk-level-filled-fade-on-success-text: hsla(104, 64%, 30%, 100%);
+    --kbq-risk-level-filled-fade-on-warning-background: hsla(38, 100%, 85%, 100%);
+    --kbq-risk-level-filled-fade-on-warning-text: hsla(38, 100%, 33%, 100%);
+    --kbq-risk-level-filled-fade-on-error-background: hsla(7, 97%, 90%, 100%);
+    --kbq-risk-level-filled-fade-on-error-text: hsla(7, 97%, 40%, 100%);
+    --kbq-risk-level-outline-fade-on-contrast-background: transparent;
+    --kbq-risk-level-outline-fade-on-contrast-text: hsla(229, 15%, 15%, 100%);
+    --kbq-risk-level-outline-fade-on-contrast-border: hsla(229, 15%, 80%, 100%);
+    --kbq-risk-level-outline-fade-on-success-background: transparent;
+    --kbq-risk-level-outline-fade-on-success-text: hsla(104, 64%, 30%, 100%);
+    --kbq-risk-level-outline-fade-on-success-border: hsla(104, 64%, 45%, 100%);
+    --kbq-risk-level-outline-fade-on-warning-background: transparent;
+    --kbq-risk-level-outline-fade-on-warning-text: hsla(38, 100%, 33%, 100%);
+    --kbq-risk-level-outline-fade-on-warning-border: hsla(38, 100%, 55%, 100%);
+    --kbq-risk-level-outline-fade-on-error-background: transparent;
+    --kbq-risk-level-outline-fade-on-error-text: hsla(7, 97%, 40%, 100%);
+    --kbq-risk-level-outline-fade-on-error-border: hsla(7, 97%, 65%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-risk-level-filled-fade-off-success-background: hsla(104, 64%, 40%, 100%);
+    --kbq-risk-level-filled-fade-off-success-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-off-warning-background: hsla(38, 100%, 39%, 100%);
+    --kbq-risk-level-filled-fade-off-warning-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-off-error-background: hsla(7, 97%, 41%, 100%);
+    --kbq-risk-level-filled-fade-off-error-text: hsla(0, 0%, 100%, 100%);
+    --kbq-risk-level-filled-fade-on-contrast-background: hsla(229, 15%, 25%, 100%);
+    --kbq-risk-level-filled-fade-on-contrast-text: hsla(229, 15%, 80%, 100%);
+    --kbq-risk-level-filled-fade-on-success-background: hsla(104, 64%, 12%, 100%);
+    --kbq-risk-level-filled-fade-on-success-text: hsla(104, 64%, 45%, 100%);
+    --kbq-risk-level-filled-fade-on-warning-background: hsla(38, 100%, 14%, 100%);
+    --kbq-risk-level-filled-fade-on-warning-text: hsla(38, 100%, 60%, 100%);
+    --kbq-risk-level-filled-fade-on-error-background: hsla(7, 97%, 15%, 100%);
+    --kbq-risk-level-filled-fade-on-error-text: hsla(7, 97%, 60%, 100%);
+    --kbq-risk-level-outline-fade-on-contrast-background: transparent;
+    --kbq-risk-level-outline-fade-on-contrast-text: hsla(229, 15%, 80%, 100%);
+    --kbq-risk-level-outline-fade-on-contrast-border: hsla(229, 15%, 30%, 100%);
+    --kbq-risk-level-outline-fade-on-success-background: transparent;
+    --kbq-risk-level-outline-fade-on-success-text: hsla(104, 64%, 45%, 100%);
+    --kbq-risk-level-outline-fade-on-success-border: hsla(104, 64%, 20%, 100%);
+    --kbq-risk-level-outline-fade-on-warning-background: transparent;
+    --kbq-risk-level-outline-fade-on-warning-text: hsla(38, 100%, 60%, 100%);
+    --kbq-risk-level-outline-fade-on-warning-border: hsla(38, 100%, 20%, 100%);
+    --kbq-risk-level-outline-fade-on-error-background: transparent;
+    --kbq-risk-level-outline-fade-on-error-text: hsla(7, 97%, 60%, 100%);
+    --kbq-risk-level-outline-fade-on-error-border: hsla(7, 97%, 35%, 100%);
+}

package/risk-level/risk-level.component.scss

@@ -1,8 +1,7 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
+@use './risk-level-theme' as *;
+
 .kbq-risk-level {
     box-sizing: border-box;
 
@@ -18,3 +17,6 @@
         radius: kbq-css-variable(risk-level-size-border-radius);
     }
 }
+
+@include kbq-risk-level-theme();
+@include kbq-risk-level-typography();

package/risk-level/risk-level.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./risk-level.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
 export declare class KbqRiskLevelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, [typeof i1.KbqRiskLevel], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqRiskLevel]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, [typeof i1.KbqRiskLevel], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqRiskLevel]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqRiskLevelModule>;
 }

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.6.0");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.6.0");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.7.0");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.7.0");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.5.0");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.5.0");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.5.1");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.5.1");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/scrollbar/_scrollbar-component-theme.scss

@@ -1,37 +1,25 @@
-@use 'sass:map';
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-scrollbar-component-theme($theme) {
-    $scrollbar: map.get(map.get($theme, components), scrollbar);
-
+@mixin kbq-scrollbar-component-theme() {
     .kbq-scrollbar-component {
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default));
-                    background-color: kbq-css-variable(
-                        scrollbar-thumb-default-background,
-                        map.get($scrollbar, default)
-                    );
+                    border-color: kbq-css-variable(scrollbar-thumb-default-background);
+                    background-color: kbq-css-variable(scrollbar-thumb-default-background);
                 }
 
                 &:hover {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-thumb-hover-background, map.get($scrollbar, hover));
-                        background-color: kbq-css-variable(
-                            scrollbar-thumb-hover-background,
-                            map.get($scrollbar, hover)
-                        );
+                        border-color: kbq-css-variable(scrollbar-thumb-hover-background);
+                        background-color: kbq-css-variable(scrollbar-thumb-hover-background);
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: kbq-css-variable(scrollbar-thumb-active-background, map.get($scrollbar, active));
-                        background-color: kbq-css-variable(
-                            scrollbar-thumb-active-background,
-                            map.get($scrollbar, active)
-                        );
+                        border-color: kbq-css-variable(scrollbar-thumb-active-background);
+                        background-color: kbq-css-variable(scrollbar-thumb-active-background);
                     }
                 }
             }
@@ -39,23 +27,17 @@
             .os-scrollbar-track,
             .os-scrollbar-handle {
                 border-style: solid;
-                border-color: kbq-css-variable(
-                    scrollbar-track-default-border,
-                    map.get($scrollbar, track, default)
-                ) !important;
-                background-color: kbq-css-variable(
-                    scrollbar-track-default-background,
-                    map.get($scrollbar, track, default)
-                );
+                border-color: kbq-css-variable(scrollbar-track-default-border) !important;
+                background-color: kbq-css-variable(scrollbar-track-default-background);
 
                 &:hover {
-                    border-color: kbq-css-variable(scrollbar-track-hover-border, map.get($scrollbar, track, hover));
-                    background: kbq-css-variable(scrollbar-track-hover-background, map.get($scrollbar, track, hover));
+                    border-color: kbq-css-variable(scrollbar-track-hover-border);
+                    background: kbq-css-variable(scrollbar-track-hover-background);
                 }
 
                 &:active {
-                    border-color: kbq-css-variable(scrollbar-track-active-border, map.get($scrollbar, track, active));
-                    background: kbq-css-variable(scrollbar-track-active-background, map.get($scrollbar, track, active));
+                    border-color: kbq-css-variable(scrollbar-track-active-border);
+                    background: kbq-css-variable(scrollbar-track-active-background);
                 }
             }
         }

package/scrollbar/scrollbar-tokens.scss

@@ -0,0 +1,34 @@
+.kbq-scrollbar-component {
+    --kbq-scrollbar-size-track-dimension: 16px;
+    --kbq-scrollbar-size-track-padding-vertical: 2px;
+    --kbq-scrollbar-size-track-padding-horizontal: 2px;
+    --kbq-scrollbar-size-thumb-width: 8px;
+    --kbq-scrollbar-size-thumb-min-size: 20px;
+    --kbq-scrollbar-size-thumb-border-radius: 8px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-scrollbar-thumb-default-background: hsla(229, 15%, 60%, 100%);
+    --kbq-scrollbar-thumb-hover-background: hsla(229, 15%, 50%, 100%);
+    --kbq-scrollbar-thumb-active-background: hsla(229, 15%, 40%, 100%);
+    --kbq-scrollbar-thumb-disabled-background: hsla(229, 15%, 15%, 32%);
+    --kbq-scrollbar-track-default-border: transparent;
+    --kbq-scrollbar-track-default-background: transparent;
+    --kbq-scrollbar-track-hover-border: transparent;
+    --kbq-scrollbar-track-hover-background: transparent;
+    --kbq-scrollbar-track-active-border: transparent;
+    --kbq-scrollbar-track-active-background: transparent;
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-scrollbar-thumb-default-background: hsla(229, 15%, 45%, 100%);
+    --kbq-scrollbar-thumb-hover-background: hsla(229, 15%, 50%, 100%);
+    --kbq-scrollbar-thumb-active-background: hsla(229, 15%, 40%, 100%);
+    --kbq-scrollbar-thumb-disabled-background: hsla(229, 15%, 30%, 100%);
+    --kbq-scrollbar-track-default-border: transparent;
+    --kbq-scrollbar-track-default-background: transparent;
+    --kbq-scrollbar-track-hover-border: transparent;
+    --kbq-scrollbar-track-hover-background: transparent;
+    --kbq-scrollbar-track-active-border: transparent;
+    --kbq-scrollbar-track-active-background: transparent;
+}

package/scrollbar/scrollbar.component.scss

@@ -1,8 +1,7 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
+@use './scrollbar-component-theme' as *;
+
 .kbq-scrollbar-component {
     $scrollbar-size-thumb-width: kbq-css-variable(scrollbar-size-thumb-width);
     $padding-vertical: kbq-css-variable(scrollbar-size-track-padding-vertical);
@@ -79,6 +78,8 @@
     }
 }
 
+@include kbq-scrollbar-component-theme();
+
 // core
 .os-size-observer,
 .os-size-observer-listener {

package/select/_select-theme.scss

@@ -1,56 +1,45 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/popup' as *;
 @use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-select-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $error: map.get($theme, error);
-
-    $select-panel: map.get($theme, components, select-panel);
-    $divider: map.get($theme, components, divider);
-
+@mixin kbq-select-theme() {
     .kbq-select {
-        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+        color: kbq-css-variable(foreground-contrast);
 
         &.ng-invalid {
-            color: kbq-css-variable(error-default, kbq-color($error));
+            color: kbq-css-variable(error-default);
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+            color: kbq-css-variable(foreground-text-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+        color: kbq-css-variable(foreground-text-disabled);
     }
 
     .kbq-select__panel {
-        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
+        background: kbq-css-variable(select-panel-dropdown-background);
 
         & .kbq-select__footer {
-            border-color: kbq-css-variable(divider-color, map.get($divider, color));
+            border-color: kbq-css-variable(divider-color);
         }
     }
 
     .kbq-select__search-container {
-        border-bottom-color: kbq-css-variable(divider-color, map.get($divider, color));
+        border-bottom-color: kbq-css-variable(divider-color);
     }
 
     .kbq-select__no-options-message {
-        color: kbq-css-variable(foreground-text-less-contrast, map.get($foreground, text-less-contrast));
+        color: kbq-css-variable(foreground-text-less-contrast);
     }
 }
 
-@mixin kbq-select-typography($config) {
+@mixin kbq-select-typography() {
     .kbq-select {
         @include kbq-typography-css-variables(select, default);
     }

package/select/select-tokens.scss

@@ -0,0 +1,59 @@
+.kbq-select,
+.kbq-select__panel {
+    --kbq-size-xxs: 4px;
+    --kbq-size-m: 12px;
+    --kbq-option-size-horizontal-padding: 12px;
+    --kbq-option-size-height: 32px;
+    --kbq-option-size-border-width: 2px;
+    --kbq-select-size-single-padding-left: 12px;
+    --kbq-select-size-single-padding-right: 4px;
+    --kbq-select-size-single-padding-vertical: 6px;
+    --kbq-select-size-single-content-gap: 4px;
+    --kbq-select-size-multiple-padding-left: 4px;
+    --kbq-select-size-multiple-padding-right: 4px;
+    --kbq-select-size-multiple-padding-vertical: 4px;
+    --kbq-select-size-multiple-content-gap: 4px;
+    --kbq-select-font-default-font-size: 14px;
+    --kbq-select-font-default-line-height: 20px;
+    --kbq-select-font-default-letter-spacing: -0.006em;
+    --kbq-select-font-default-font-weight: normal;
+    --kbq-select-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-select-font-default-text-transform: null;
+    --kbq-select-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-select-panel-size-border-radius: 8px;
+    --kbq-select-panel-size-max-height: 256px;
+    --kbq-select-panel-font-default-font-size: 14px;
+    --kbq-select-panel-font-default-line-height: 20px;
+    --kbq-select-panel-font-default-letter-spacing: -0.006em;
+    --kbq-select-panel-font-default-font-weight: normal;
+    --kbq-select-panel-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-select-panel-font-default-text-transform: null;
+    --kbq-select-panel-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-error-default: hsla(7, 97%, 50%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-text-less-contrast: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-divider-color: hsla(229, 15%, 6%, 12%);
+    --kbq-select-panel-dropdown-background: hsla(229, 15%, 100%, 100%);
+    --kbq-select-panel-dropdown-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%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-error-default: hsla(7, 97%, 50%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
+    --kbq-foreground-text-less-contrast: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-divider-color: hsla(229, 15%, 22%, 100%);
+    --kbq-select-panel-dropdown-background: hsla(229, 15%, 15%, 100%);
+    --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+}

package/select/select.component.d.ts

@@ -308,6 +308,6 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private getTotalVisibleItems;
     private buildTriggerClone;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
 }
 export {};

package/select/select.module.d.ts

@@ -1,15 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./select.component";
 import * as i2 from "./select-option.directive";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/cdk/overlay";
-import * as i5 from "@koobiq/components/core";
-import * as i6 from "@koobiq/components/icon";
-import * as i7 from "@koobiq/components/tags";
-import * as i8 from "@koobiq/components/tooltip";
+import * as i3 from "@angular/cdk/overlay";
+import * as i4 from "@koobiq/components/core";
+import * as i5 from "@koobiq/components/icon";
+import * as i6 from "@koobiq/components/tags";
+import * as i7 from "@koobiq/components/tooltip";
+import * as i8 from "@angular/common";
 import * as i9 from "@koobiq/components/form-field";
 export declare class KbqSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqOptionModule, typeof i6.KbqIconModule, typeof i7.KbqTagsModule, typeof i8.KbqToolTipModule, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult], [typeof i9.KbqFormFieldModule, typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i5.KbqOptionModule, typeof i3.CommonModule, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSelectModule, [typeof i1.KbqSelect, typeof i2.KbqOptionTooltip], [typeof i3.OverlayModule, typeof i4.KbqOptionModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqToolTipModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult, typeof i8.NgClass, typeof i8.NgTemplateOutlet], [typeof i9.KbqFormFieldModule, typeof i1.KbqSelect, typeof i2.KbqOptionTooltip, typeof i4.KbqOptionModule, typeof i4.KbqSelectSearch, typeof i4.KbqSelectFooter, typeof i4.KbqSelectMatcher, typeof i4.KbqSelectTrigger, typeof i4.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSelectModule>;
 }

package/select/select.scss

@@ -1,10 +1,9 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/select' as *;
 
 @use '../core/styles/common/tokens' as *;
 
+@use './select-theme' as *;
+
 .kbq-select {
     @extend %kbq-select-base;
 }
@@ -35,3 +34,6 @@
         cursor: pointer;
     }
 }
+
+@include kbq-select-theme();
+@include kbq-select-typography();

package/sidepanel/_sidepanel-theme.scss

@@ -1,29 +1,23 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-sidepanel-theme($theme) {
-    $sidepanel: map.get($theme, components, sidepanel);
-
+@mixin kbq-sidepanel-theme() {
     .kbq-sidepanel-title {
-        color: kbq-css-variable(sidepanel-header-text-color, map.get($sidepanel, header-text));
+        color: kbq-css-variable(sidepanel-header-text-color);
     }
 
     .kbq-sidepanel-content {
-        background-color: kbq-css-variable(sidepanel-container-background, map.get($sidepanel, background));
-        color: kbq-css-variable(sidepanel-content-text-color, map.get($sidepanel, content-text));
+        background-color: kbq-css-variable(sidepanel-container-background);
+        color: kbq-css-variable(sidepanel-content-text-color);
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: kbq-css-variable(sidepanel-container-box-shadow, map.get($sidepanel, box-shadow));
+            box-shadow: kbq-css-variable(sidepanel-container-box-shadow);
         }
     }
 }
 
-@mixin kbq-sidepanel-typography($config) {
+@mixin kbq-sidepanel-typography() {
     .kbq-sidepanel-title {
         @include kbq-typography-css-variables(sidepanel, header);
     }

package/sidepanel/sidepanel-tokens.scss

@@ -0,0 +1,48 @@
+.kbq-sidepanel-container {
+    --kbq-sidepanel-size-small-width: 400px;
+    --kbq-sidepanel-size-medium-width: 640px;
+    --kbq-sidepanel-size-large-width: 960px;
+    --kbq-sidepanel-size-header-padding-vertical: 16px;
+    --kbq-sidepanel-size-header-padding-left: 32px;
+    --kbq-sidepanel-size-header-padding-right: 12px;
+    --kbq-sidepanel-size-close-button-margin-left: 8px;
+    --kbq-sidepanel-size-content-padding-horizontal: 32px;
+    --kbq-sidepanel-size-content-padding-bottom: 24px;
+    --kbq-sidepanel-size-footer-padding-top: 8px;
+    --kbq-sidepanel-size-footer-padding-bottom: 32px;
+    --kbq-sidepanel-size-footer-padding-horizontal: 32px;
+    --kbq-sidepanel-size-footer-content-gap-horizontal: 16px;
+    --kbq-sidepanel-font-header-font-size: 20px;
+    --kbq-sidepanel-font-header-line-height: 28px;
+    --kbq-sidepanel-font-header-letter-spacing: normal;
+    --kbq-sidepanel-font-header-font-weight: 700;
+    --kbq-sidepanel-font-header-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-sidepanel-font-header-text-transform: null;
+    --kbq-sidepanel-font-header-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-sidepanel-font-content-font-size: 14px;
+    --kbq-sidepanel-font-content-line-height: 20px;
+    --kbq-sidepanel-font-content-letter-spacing: -0.006em;
+    --kbq-sidepanel-font-content-font-weight: normal;
+    --kbq-sidepanel-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-sidepanel-font-content-text-transform: null;
+    --kbq-sidepanel-font-content-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-sidepanel-overlay-background: hsla(229, 15%, 20%, 32%);
+    --kbq-sidepanel-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-sidepanel-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 3px 16px hsla(229, 15%, 6%, 6%),
+        0 4px 32px hsla(229, 15%, 6%, 12%);
+    --kbq-sidepanel-header-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-sidepanel-content-text-color: hsla(229, 15%, 15%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-sidepanel-overlay-background: hsla(229, 15%, 6%, 64%);
+    --kbq-sidepanel-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-sidepanel-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-sidepanel-header-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-sidepanel-content-text-color: hsla(229, 15%, 80%, 100%);
+}

package/sidepanel/sidepanel.module.d.ts

@@ -1,16 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./sidepanel-container.component";
 import * as i2 from "./sidepanel-directives";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/cdk/overlay";
-import * as i5 from "@angular/cdk/portal";
-import * as i6 from "@koobiq/components/core";
-import * as i7 from "@koobiq/components/button";
-import * as i8 from "@koobiq/components/icon";
-import * as i9 from "@koobiq/components/title";
-import * as i10 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/overlay";
+import * as i4 from "@angular/cdk/portal";
+import * as i5 from "@koobiq/components/core";
+import * as i6 from "@koobiq/components/button";
+import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@koobiq/components/title";
+import * as i9 from "@angular/cdk/a11y";
 export declare class KbqSidepanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidepanelModule, [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.KbqCommonModule, typeof i7.KbqButtonModule, typeof i8.KbqIconModule, typeof i9.KbqTitleModule, typeof i10.A11yModule], [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSidepanelModule, [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions], [typeof i3.OverlayModule, typeof i4.PortalModule, typeof i5.KbqCommonModule, typeof i6.KbqButtonModule, typeof i7.KbqIconModule, typeof i8.KbqTitleModule, typeof i9.A11yModule], [typeof i1.KbqSidepanelContainerComponent, typeof i2.KbqSidepanelClose, typeof i2.KbqSidepanelHeader, typeof i2.KbqSidepanelBody, typeof i2.KbqSidepanelFooter, typeof i2.KbqSidepanelActions]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSidepanelModule>;
 }

package/sidepanel/sidepanel.scss

@@ -1,11 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common';
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './sidepanel-theme' as *;
 
 .kbq-sidepanel-container_top,
 .kbq-sidepanel-container_bottom {
@@ -182,3 +179,6 @@ $tokens: meta.module-variables(tokens) !default;
         gap: kbq-css-variable(sidepanel-size-footer-content-gap-horizontal);
     }
 }
+
+@include kbq-sidepanel-theme();
+@include kbq-sidepanel-typography();

package/splitter/_splitter-theme.scss

@@ -1,10 +1,6 @@
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-splitter-theme($theme) {
-    $background: map.get($theme, states, background);
-
+@mixin kbq-splitter-theme() {
     .kbq-gutter {
         cursor: col-resize;
 
@@ -18,7 +14,7 @@
         }
 
         &[disabled] {
-            background-color: kbq-css-variable(background-background-disabled, map.get($background, disabled));
+            background-color: kbq-css-variable(background-background-disabled);
 
             cursor: default;
         }

package/splitter/splitter-tokens.scss

@@ -0,0 +1,7 @@
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
+}

package/splitter/splitter.module.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./splitter.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@koobiq/components/icon";
+import * as i2 from "@koobiq/components/icon";
 export declare class KbqSplitterModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSplitterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitterModule, [typeof i1.KbqGutterDirective, typeof i1.KbqGutterGhostDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent], [typeof i2.CommonModule, typeof i3.KbqIconModule], [typeof i1.KbqGutterDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqSplitterModule, [typeof i1.KbqGutterDirective, typeof i1.KbqGutterGhostDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent], [typeof i2.KbqIconModule], [typeof i1.KbqGutterDirective, typeof i1.KbqSplitterAreaDirective, typeof i1.KbqSplitterComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqSplitterModule>;
 }

package/splitter/splitter.scss

@@ -1,3 +1,5 @@
+@use './splitter-theme' as *;
+
 .kbq-splitter {
     display: flex;
     position: relative;
@@ -45,3 +47,5 @@
         display: block;
     }
 }
+
+@include kbq-splitter-theme();