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

package/modal/modal.scss

@@ -1,11 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 @use './modal-confirm';
 
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-modal {
     box-sizing: border-box;
@@ -14,7 +13,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     top: 48px;
 
-    border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
+    border-radius: kbq-css-variable(modal-size-border-radius);
 
     width: auto;
 
@@ -31,15 +30,15 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-modal_small {
-        width: var(--kbq-modal-size-small-width, map.get($tokens, modal-size-small-width));
+        width: kbq-css-variable(modal-size-small-width);
     }
 
     &.kbq-modal_medium {
-        width: var(--kbq-modal-size-medium-width, map.get($tokens, modal-size-medium-width));
+        width: kbq-css-variable(modal-size-medium-width);
     }
 
     &.kbq-modal_large {
-        width: var(--kbq-modal-size-large-width, map.get($tokens, modal-size-large-width));
+        width: kbq-css-variable(modal-size-large-width);
     }
 
     // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отсутствие футера
@@ -75,7 +74,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-modal-content {
     position: relative;
 
-    border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
+    border-radius: kbq-css-variable(modal-size-border-radius);
 
     background-clip: padding-box;
 }
@@ -86,13 +85,13 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: space-between;
 
     padding:
-        var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
-        var(--kbq-modal-size-header-padding-right, map.get($tokens, modal-size-header-padding-right))
-        var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
-        var(--kbq-modal-size-header-padding-left, map.get($tokens, modal-size-header-padding-left));
+        kbq-css-variable(modal-size-header-padding-vertical)
+        kbq-css-variable(modal-size-header-padding-right)
+        kbq-css-variable(modal-size-header-padding-vertical)
+        kbq-css-variable(modal-size-header-padding-left);
 
     & + .kbq-modal-body {
-        padding-top: var(--kbq-modal-size-content-padding-top, map.get($tokens, modal-size-content-padding-top));
+        padding-top: kbq-css-variable(modal-size-content-padding-top);
     }
 }
 
@@ -111,13 +110,10 @@ $tokens: meta.module-variables(tokens) !default;
     max-height: calc(100vh - 260px);
 
     padding:
-        var(
-            --kbq-modal-size-content-padding-top-without-header,
-            map.get($tokens, modal-size-content-padding-top-without-header)
-        )
-        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal))
-        var(--kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom))
-        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal));
+        kbq-css-variable(modal-size-content-padding-top-without-header)
+        kbq-css-variable(modal-size-content-padding-horizontal)
+        kbq-css-variable(modal-size-content-padding-bottom)
+        kbq-css-variable(modal-size-content-padding-horizontal);
 
     word-wrap: break-word;
 }
@@ -129,12 +125,10 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
 
     padding:
-        var(--kbq-modal-size-footer-padding-vertical, map.get($tokens, modal-size-footer-padding-vertical))
-        var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
+        kbq-css-variable(modal-size-footer-padding-vertical)
+        kbq-css-variable(modal-size-footer-padding-horizontal);
 
-    gap: var(
-        --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(modal-size-footer-content-gap-horizontal);
 }
 
 .kbq-modal-mask {

package/navbar/_navbar-item_horizontal.scss

@@ -3,10 +3,7 @@
 
 @use '../core/styles/common/list';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .kbq-navbar-item.kbq-horizontal {
@@ -19,41 +16,41 @@ $tokens: meta.module-variables(tokens) !default;
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
-    min-height: map.get($tokens, size-5xl);
-    min-width: map.get($tokens, size-5xl);
+    min-height: kbq-css-variable(size-5xl);
+    min-width: kbq-css-variable(size-5xl);
 
-    padding: map.get($tokens, size-s);
+    padding: kbq-css-variable(size-s);
 
     justify-content: center;
 
     &:after {
-        top: map.get($tokens, size-s);
-        right: map.get($tokens, size-s);
-        bottom: map.get($tokens, size-s);
-        left: map.get($tokens, size-s);
+        top: kbq-css-variable(size-s);
+        right: kbq-css-variable(size-s);
+        bottom: kbq-css-variable(size-s);
+        left: kbq-css-variable(size-s);
     }
 
     & .kbq-navbar-item__title {
-        padding-left: map.get($tokens, size-xxs);
-        padding-right: map.get($tokens, size-xxs);
+        padding-left: kbq-css-variable(size-xxs);
+        padding-right: kbq-css-variable(size-xxs);
     }
 
     & .kbq-navbar-item__arrow-icon {
-        padding-left: map.get($tokens, size-xxs);
+        padding-left: kbq-css-variable(size-xxs);
     }
 
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
-        padding: map.get($tokens, size-l) map.get($tokens, size-m);
+        padding: kbq-css-variable(size-l) kbq-css-variable(size-m);
 
         &:after {
-            top: map.get($tokens, size-s);
+            top: kbq-css-variable(size-s);
             right: 0;
-            bottom: map.get($tokens, size-s);
+            bottom: kbq-css-variable(size-s);
             left: 0;
         }
 
         & > .kbq-icon {
-            padding-right: map.get($tokens, size-xxs);
+            padding-right: kbq-css-variable(size-xxs);
         }
     }
 
@@ -62,20 +59,20 @@ $tokens: meta.module-variables(tokens) !default;
 
         justify-content: center;
 
-        padding-right: map.get($tokens, size-xxs);
+        padding-right: kbq-css-variable(size-xxs);
 
         &:after {
-            top: map.get($tokens, size-s);
-            right: map.get($tokens, size-xxs);
-            bottom: map.get($tokens, size-s);
-            left: map.get($tokens, size-s);
+            top: kbq-css-variable(size-s);
+            right: kbq-css-variable(size-xxs);
+            bottom: kbq-css-variable(size-s);
+            left: kbq-css-variable(size-s);
         }
     }
 
     &.kbq-navbar-item_collapsed {
         justify-content: center;
 
-        padding: map.get($tokens, size-s);
+        padding: kbq-css-variable(size-s);
 
         & .kbq-navbar-item__container {
             display: none;
@@ -87,11 +84,11 @@ $tokens: meta.module-variables(tokens) !default;
 
         z-index: 1;
 
-        top: map.get($tokens, size-xs);
-        right: map.get($tokens, size-xs);
+        top: kbq-css-variable(size-xs);
+        right: kbq-css-variable(size-xs);
     }
 
     &.kbq-navbar-item_has-nested {
-        padding: 0 map.get($tokens, size-m);
+        padding: 0 kbq-css-variable(size-m);
     }
 }

package/navbar/_navbar-item_vertical.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -11,21 +12,21 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: flex-start;
 
     & .kbq-navbar-item__container {
-        gap: map.get($tokens, size-m);;
+        gap: kbq-css-variable(size-m);;
     }
 
     &.kbq-expanded {
-        height: map.get($tokens, size-5xl);
+        height: kbq-css-variable(size-5xl);
 
-        padding: map.get($tokens, size-l) map.get($tokens, size-xl);
+        padding: kbq-css-variable(size-l) kbq-css-variable(size-xl);
 
-        gap: map.get($tokens, size-m);
+        gap: kbq-css-variable(size-m);
 
         &:after {
-            top: map.get($tokens, size-xxs);
-            right: map.get($tokens, size-s);
-            bottom: map.get($tokens, size-xxs);
-            left: map.get($tokens, size-s);
+            top: kbq-css-variable(size-xxs);
+            right: kbq-css-variable(size-s);
+            bottom: kbq-css-variable(size-xxs);
+            left: kbq-css-variable(size-s);
         }
 
         &.kbq-navbar-bento {
@@ -36,44 +37,44 @@ $tokens: meta.module-variables(tokens) !default;
             justify-content: center;
             align-items: center;
 
-            top: map.get($tokens, size-xxs);
-            right: map.get($tokens, size-xxs);
+            top: kbq-css-variable(size-xxs);
+            right: kbq-css-variable(size-xxs);
 
             z-index: 1;
 
-            padding: map.get($tokens, size-s);
+            padding: kbq-css-variable(size-s);
 
-            height: map.get($tokens, size-5xl);
-            width: map.get($tokens, size-5xl);
+            height: kbq-css-variable(size-5xl);
+            width: kbq-css-variable(size-5xl);
 
             &:after {
-                top: map.get($tokens, size-s);
-                right: map.get($tokens, size-s);
-                bottom: map.get($tokens, size-s);
-                left: map.get($tokens, size-s);
+                top: kbq-css-variable(size-s);
+                right: kbq-css-variable(size-s);
+                bottom: kbq-css-variable(size-s);
+                left: kbq-css-variable(size-s);
             }
         }
 
         &.kbq-navbar-item_has-nested {
             align-items: center;
 
-            padding: 0 map.get($tokens, size-m);
+            padding: 0 kbq-css-variable(size-m);
         }
     }
 
     &.kbq-collapsed {
-        height: map.get($tokens, size-5xl);
-        width: map.get($tokens, size-5xl);
+        height: kbq-css-variable(size-5xl);
+        width: kbq-css-variable(size-5xl);
 
-        padding: map.get($tokens, size-l);
+        padding: kbq-css-variable(size-l);
 
         justify-content: center;
 
         &:after {
-            top: map.get($tokens, size-s);
-            right: map.get($tokens, size-s);
-            bottom: map.get($tokens, size-s);
-            left: map.get($tokens, size-s);
+            top: kbq-css-variable(size-s);
+            right: kbq-css-variable(size-s);
+            bottom: kbq-css-variable(size-s);
+            left: kbq-css-variable(size-s);
         }
 
         & .kbq-badge {
@@ -81,8 +82,8 @@ $tokens: meta.module-variables(tokens) !default;
 
             z-index: 1;
 
-            top: map.get($tokens, size-xs);
-            right: map.get($tokens, size-xs);
+            top: kbq-css-variable(size-xs);
+            right: kbq-css-variable(size-xs);
         }
 
         & .kbq-navbar-item__container {

package/navbar/_navbar-theme.scss

@@ -2,45 +2,44 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-navbar-item($state) {
+@mixin kbq-navbar-item($component, $state-name) {
+    $state: map.get($component, $state-name);
+
     &:not(.kbq-navbar-item_has-nested) {
         &:after {
             display: block;
-            background: map.get($state, background);
+            background: kbq-css-variable(navbar-item-#{$state-name}-background, map.get($state, background));
         }
     }
 
     .kbq-navbar-title {
-        color: map.get($state, text);
+        color: kbq-css-variable(navbar-item-#{$state-name}-text, map.get($state, text));
     }
 
     & > .kbq-icon {
-        color: map.get($state, icon-left) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-icon-left, map.get($state, icon-left)) !important;
     }
 
     .kbq-navbar-item__arrow-icon {
-        color: map.get($state, icon-right) !important;
+        color: kbq-css-variable(navbar-item-#{$state-name}-icon-right, map.get($state, icon-right)) !important;
     }
 }
 
 
 @mixin kbq-navbar-theme($theme) {
-    $line: map.get($theme, line);
-    $states-line: map.get(map.get($theme, states), line);
-
-    $navbar: map.get(map.get($theme, components), navbar);
+    $navbar: map.get($theme, components, navbar);
     $item: map.get($navbar, item);
 
-
     .kbq-navbar,
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        background-color: map.get($navbar, background);
+        background-color: kbq-css-variable(navbar-background, map.get($navbar, background));
     }
 
     .kbq-vertical-navbar .kbq-vertical-navbar__container {
-        border-right: 1px solid map.get($navbar, border);
+        border-right: 1px solid kbq-css-variable(navbar-border, map.get($navbar, border));
     }
 
     .kbq-navbar-item,
@@ -48,10 +47,10 @@
     .kbq-navbar-toggle {
         cursor: pointer;
 
-        @include kbq-navbar-item(map.get($item, default));
+        @include kbq-navbar-item($item, default);
 
         &:hover:not(.kbq-disabled, .kbq-vertical.kbq-navbar-brand) {
-            @include kbq-navbar-item(map.get($item, hover));
+            @include kbq-navbar-item($item, hover);
         }
 
         &.cdk-focused.cdk-keyboard-focused {
@@ -59,13 +58,15 @@
 
             &:after {
                 display: block;
-                box-shadow: inset 0 0 0 2px map.get($states-line, focus-theme)
+                box-shadow: inset 0 0 0 2px kbq-css-variable(
+                    states-line-focus-theme, map.get($theme, 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(map.get($item, selected));
+            @include kbq-navbar-item($item, selected);
         }
 
         &.kbq-navbar-focusable-item {
@@ -73,7 +74,7 @@
         }
 
         &.kbq-disabled {
-            @include kbq-navbar-item(map.get($item, disabled));
+            @include kbq-navbar-item($item, disabled);
 
             pointer-events: none;
             cursor: default;
@@ -93,7 +94,7 @@
     }
 
     .kbq-navbar-divider {
-        background: map.get($line, contrast-fade);
+        background: kbq-css-variable(line-contrast-fade, map.get($theme, line, contrast-fade));
     }
 }
 
@@ -107,15 +108,13 @@ button {
 }
 
 @mixin kbq-navbar-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles($config, 'text-normal-strong');
+        @include kbq-typography-level-to-styles($config, text-normal-strong);
     }
 
     .kbq-navbar-brand {
         .kbq-navbar-title {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+            @include kbq-typography-css-variables(navbar, title);
         }
     }
 }

package/navbar/navbar-brand.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -15,7 +16,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     display: flex;
 
-    border-radius: map.get($tokens, size-s);
+    border-radius: kbq-css-variable(size-s);
 
     &:after {
         position: absolute;
@@ -23,10 +24,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         display: none;
 
-        border-radius: var(
-            --kbq-navbar-item-size-content-border-radius,
-            map.get($tokens, navbar-item-size-content-border-radius)
-        );
+        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
     }
 
     & .kbq-navbar-title {
@@ -39,21 +37,21 @@ a.kbq-navbar-brand {
 }
 
 .kbq-navbar-brand.kbq-horizontal {
-    padding: map.get($tokens, size-s) map.get($tokens, size-xs) map.get($tokens, size-s) map.get($tokens, size-xxs);
+    padding: kbq-css-variable(size-s) kbq-css-variable(size-xs) kbq-css-variable(size-s) kbq-css-variable(size-xxs);
 
     align-items: center;
 
-    gap: map.get($tokens, size-s);
+    gap: kbq-css-variable(size-s);
 
     &:after {
-        top: map.get($tokens, size-xxs);
-        right: map.get($tokens, size-xxs);
-        bottom: map.get($tokens, size-xxs);
+        top: kbq-css-variable(size-xxs);
+        right: kbq-css-variable(size-xxs);
+        bottom: kbq-css-variable(size-xxs);
         left: 0;
     }
 
     & .kbq-navbar-title {
-        padding-right: map.get($tokens, size-m);
+        padding-right: kbq-css-variable(size-m);
     }
 }
 
@@ -66,10 +64,10 @@ a.kbq-navbar-brand {
         display: block;
         align-items: center;
 
-        padding-top: map.get($tokens, size-xxs);
-        padding-bottom: map.get($tokens, size-xxs);
+        padding-top: kbq-css-variable(size-xxs);
+        padding-bottom: kbq-css-variable(size-xxs);
 
-        height: map.get($tokens, size-3xl);
+        height: kbq-css-variable(size-3xl);
 
         padding-left: 0;
 
@@ -81,10 +79,10 @@ a.kbq-navbar-brand {
     &.kbq-expanded {
         position: relative;
 
-        height: map.get($tokens, size-4xl);
-        width: map.get($tokens, size-4xl);
+        height: kbq-css-variable(size-4xl);
+        width: kbq-css-variable(size-4xl);
 
-        margin: map.get($tokens, size-l) map.get($tokens, size-l) map.get($tokens, size-4xl);
+        margin: kbq-css-variable(size-l) kbq-css-variable(size-l) kbq-css-variable(size-4xl);
 
         flex-direction: column;
 
@@ -96,7 +94,7 @@ a.kbq-navbar-brand {
         }
 
         & .kbq-navbar-logo {
-            min-height: map.get($tokens, size-4xl);
+            min-height: kbq-css-variable(size-4xl);
 
             justify-content: center;
         }
@@ -104,21 +102,21 @@ a.kbq-navbar-brand {
         & .kbq-navbar-title {
             position: absolute;
 
-            left: map.get($tokens, size-xxs);
-            bottom: - map.get($tokens, size-4xl);
+            left: kbq-css-variable(size-xxs);
+            bottom: - kbq-css-variable(size-4xl);
             max-width: 200px;
         }
     }
 
     &.kbq-collapsed {
-        height: map.get($tokens, size-5xl);
-        width: map.get($tokens, size-5xl);
+        height: kbq-css-variable(size-5xl);
+        width: kbq-css-variable(size-5xl);
 
         &:after {
-            top: map.get($tokens, size-xxs);
-            right: map.get($tokens, size-xxs);
-            bottom: map.get($tokens, size-xxs);
-            left: map.get($tokens, size-xxs);
+            top: kbq-css-variable(size-xxs);
+            right: kbq-css-variable(size-xxs);
+            bottom: kbq-css-variable(size-xxs);
+            left: kbq-css-variable(size-xxs);
         }
 
         & .kbq-navbar-title {

package/navbar/navbar-divider.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .kbq-navbar-divider {
@@ -14,7 +11,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-navbar-divider.kbq-vertical {
     height: 1px;
 
-    margin: map.get($tokens, size-s) map.get($tokens, size-l);
+    margin: kbq-css-variable(size-s) kbq-css-variable(size-l);
 }
 
 .kbq-navbar-divider.kbq-horizontal {
@@ -22,6 +19,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 12px;
 
-    margin-left: map.get($tokens, size-m);
-    margin-right: map.get($tokens, size-m);
+    margin-left: kbq-css-variable(size-m);
+    margin-right: kbq-css-variable(size-m);
 }

package/navbar/navbar-item.scss

@@ -3,14 +3,12 @@
 
 @use '../core/styles/common/list';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 @use 'navbar-item_vertical';
 @use 'navbar-item_horizontal';
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-navbar-item {
     box-sizing: border-box;
 
@@ -19,14 +17,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     align-items: center;
 
-    border-radius: var(
-        --kbq-navbar-item-size-content-border-radius,
-        map.get($tokens, navbar-item-size-content-border-radius)
-    );
+    border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
 
     & .kbq-icon {
-        min-width: map.get($tokens, size-l);
-        min-height: map.get($tokens, size-l);
+        min-width: kbq-css-variable(size-l);
+        min-height: kbq-css-variable(size-l);
     }
 
     &:after {
@@ -35,10 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         display: none;
 
-        border-radius: var(
-            --kbq-navbar-item-size-content-border-radius,
-            map.get($tokens, navbar-item-size-content-border-radius)
-        );
+        border-radius: kbq-css-variable(navbar-item-size-content-border-radius);
     }
 
     &.kbq-horizontal {

package/navbar/navbar.scss

@@ -1,10 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .kbq-navbar {
@@ -28,5 +25,5 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-navbar .kbq-navbar-container + .kbq-navbar-container {
-    margin-left: map.get($tokens, size-xxl);
+    margin-left: kbq-css-variable(size-xxl);
 }