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

package/navbar/vertical-navbar.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-vertical-navbar {
     position: relative;
 
@@ -18,7 +16,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-navbar-container + .kbq-navbar-container {
-        padding-top: map.get($tokens, size-xxl);
+        padding-top: kbq-css-variable(size-xxl);
     }
 
     & .kbq-vertical-navbar__container {
@@ -30,7 +28,7 @@ $tokens: meta.module-variables(tokens) !default;
         height: 100%;
 
         &.kbq-collapsed {
-            width: map.get($tokens, size-5xl);
+            width: kbq-css-variable(size-5xl);
         }
 
         &.kbq-expanded {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-rc.6",
+    "version": "17.0.0-rc.8",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -17,15 +17,15 @@
     },
     "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
     "peerDependencies": {
-        "@angular/cdk": "^17.2.0",
-        "@angular/forms": "^17.2.0",
-        "@koobiq/cdk": "^17.0.0-rc.6",
-        "@koobiq/angular-moment-adapter": "^17.0.0-rc.6",
-        "@koobiq/angular-luxon-adapter": "^17.0.0-rc.6",
-        "@koobiq/date-formatter": "^3.0.2",
+        "@angular/cdk": "^17.0.0",
+        "@angular/forms": "^17.0.0",
+        "@koobiq/cdk": "17.0.0-rc.8",
+        "@koobiq/angular-moment-adapter": "17.0.0-rc.8",
+        "@koobiq/angular-luxon-adapter": "17.0.0-rc.8",
+        "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-rc.6",
-        "@koobiq/design-tokens": "3.0.0-rc.8",
+        "@koobiq/tokens-builder": "3.0.0-rc.11",
+        "@koobiq/design-tokens": "3.0.0-rc.11",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"

package/popover/_popover-theme.scss

@@ -2,47 +2,40 @@
 @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);
 
-    $container: map.get($popover, container);
-
-    $header: map.get($popover, header);
-    $content: map.get($popover, content);
-    $footer: map.get($popover, footer);
-
     .kbq-popover {
-        box-shadow: map.get($container, box-shadow);
+        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
     }
 
     .kbq-popover__container {
-        background: map.get($container, background);
+        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
     .kbq-popover__arrow {
-        box-shadow: map.get($container, box-shadow);
-        background: map.get($container, background);
+        box-shadow: kbq-css-variable(popover-ontainer-box-shadow, map.get($popover, container, box-shadow));
+        background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
     .kbq-popover__header {
-        color: map.get($header, text);
+        color: kbq-css-variable(popover-header-text, map.get($popover, header, text));
     }
 
     .kbq-popover__content {
-        color: map.get($content, text);
+        color: kbq-css-variable(popover-content-text, map.get($popover, content, text));
     }
 }
 
 @mixin kbq-popover-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-popover__header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-header));
+        @include kbq-typography-css-variables(popover, header);
     }
 
     .kbq-popover__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-content));
+        @include kbq-typography-css-variables(popover, content);
     }
 }

package/popover/popover.scss

@@ -5,6 +5,7 @@
 @use '../core/styles/common';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -16,10 +17,7 @@ $trigger-margin: 9px;
 .kbq-popover {
     position: relative;
 
-    border-radius: var(
-        --kbq-popover-size-container-border-radius,
-        map.get($tokens, popover-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(popover-size-container-border-radius);
 
     box-sizing: border-box;
 
@@ -29,16 +27,15 @@ $trigger-margin: 9px;
     z-index: 1;
 
     &.kbq-popover_small {
-        max-width: var(--kbq-popover-size-container-width-small, map.get($tokens, popover-size-container-width-small));
+        max-width: kbq-css-variable(popover-size-container-width-small);
     }
 
     &.kbq-popover_medium {
-        max-width:
-            var(--kbq-popover-size-container-width-medium, map.get($tokens, popover-size-container-width-medium));
+        max-width: kbq-css-variable(popover-size-container-width-medium);
     }
 
     &.kbq-popover_large {
-        max-width: var(--kbq-popover-size-container-width-large, map.get($tokens, popover-size-container-width-large));
+        max-width: kbq-css-variable(popover-size-container-width-large);
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);
@@ -48,9 +45,9 @@ $trigger-margin: 9px;
     overflow-y: auto;
 
     padding:
-        var(--kbq-popover-size-content-padding-top, map.get($tokens, popover-size-content-padding-top))
-        var(--kbq-popover-size-content-padding-horizontal, map.get($tokens, popover-size-content-padding-horizontal))
-        var(--kbq-popover-size-content-padding-bottom, map.get($tokens, popover-size-content-padding-bottom));
+        kbq-css-variable(popover-size-content-padding-top)
+        kbq-css-variable(popover-size-content-padding-horizontal)
+        kbq-css-variable(popover-size-content-padding-bottom);
 }
 
 .kbq-popover__container {
@@ -59,22 +56,19 @@ $trigger-margin: 9px;
     display: flex;
     flex-direction: column;
 
-    max-height: var(--kbq-popover-size-container-max-height, map.get($tokens, popover-size-container-max-height));
+    max-height: kbq-css-variable(popover-size-container-max-height);
 
-    border-radius: var(
-        --kbq-popover-size-container-border-radius,
-        map.get($tokens, popover-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(popover-size-container-border-radius);
 
     &.kbq-popover__container_with-header {
         .kbq-popover__content {
-            padding-top: map.get($tokens, size-s);
+            padding-top: kbq-css-variable(size-s);
         }
     }
 
     &.kbq-popover__container_with-footer {
         .kbq-popover__content {
-            padding-bottom: map.get($tokens, size-s);
+            padding-bottom: kbq-css-variable(size-s);
         }
     }
 }
@@ -86,10 +80,10 @@ $trigger-margin: 9px;
     overflow: hidden;
 
     padding:
-        var(--kbq-popover-size-header-padding-top, map.get($tokens, popover-size-header-padding-top))
-        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal))
-        var(--kbq-popover-size-header-padding-bottom, map.get($tokens, popover-size-header-padding-bottom))
-        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal));
+        kbq-css-variable(popover-size-header-padding-top)
+        kbq-css-variable(popover-size-header-padding-horizontal)
+        kbq-css-variable(popover-size-header-padding-bottom)
+        kbq-css-variable(popover-size-header-padding-horizontal);
 
     & .kbq-popover__header-text {
         @include common.kbq-truncate-line();
@@ -98,8 +92,8 @@ $trigger-margin: 9px;
 
 .kbq-popover__footer {
     padding:
-        var(--kbq-popover-size-footer-padding-vertical, map.get($tokens, popover-size-footer-padding-vertical))
-        var(--kbq-popover-size-footer-padding-horizontal, map.get($tokens, popover-size-footer-padding-horizontal));
+        kbq-css-variable(popover-size-footer-padding-vertical)
+        kbq-css-variable(popover-size-footer-padding-horizontal);
 }
 
 .kbq-popover__arrow {