@koobiq/components 17.5.0 → 17.6.1

package/modal/modal.scss

@@ -5,6 +5,8 @@
 
 @use './modal-confirm';
 
+@use './modal-theme' as *;
+
 .kbq-modal {
     box-sizing: border-box;
 
@@ -143,3 +145,6 @@
 .kbq-modal-open {
     overflow: hidden;
 }
+
+@include kbq-modal-theme();
+@include kbq-modal-typography();

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.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.5.0",
+    "version": "17.6.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -23,13 +23,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.5.0",
-        "@koobiq/angular-moment-adapter": "17.5.0",
-        "@koobiq/angular-luxon-adapter": "17.5.0",
+        "@koobiq/cdk": "17.6.1",
+        "@koobiq/angular-moment-adapter": "17.6.1",
+        "@koobiq/angular-luxon-adapter": "17.6.1",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.5.0",
-        "@koobiq/design-tokens": "3.5.0",
+        "@koobiq/tokens-builder": "3.5.1",
+        "@koobiq/design-tokens": "3.5.1",
         "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-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.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();