@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/modal/modal.scss

@@ -1,12 +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 +12,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,18 +29,18 @@ $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, пока нет возможности отслеживать наличие/отстутствие футера
+    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отсутствие футера
     //&.kbq-modal_no-footer .kbq-modal-body {
     //    padding-bottom: var(
     //        --kbq-modal-size-content-padding-bottom-without-footer,
@@ -75,7 +73,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;
 }
@@ -85,14 +83,11 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     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));
+    padding: 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);
     }
 }
 
@@ -103,38 +98,27 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 }
 
-/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
     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));
+    padding: 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;
 }
-/* stylelint-enable no-descending-specificity */
 
 .kbq-modal-footer,
 .kbq-confirm-footer {
     display: flex;
     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));
+    padding: 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/README.md

@@ -9,33 +9,34 @@
 
 We strongly recommend adhere to use our child components until it is possible but you are free to insert there what you want.
 
- - left\right side container **kbq-navbar-section**
-   - product\company title **kbq-navbar-brand**
-   - logo container **kbq-navbar-logo**
-     - any markup
-       - **kbq-navbar-title** (please see below)
-	 - title **kbq-navbar-title**
-	   - any markup, only font size, font color, font family is gonna be styled
-	- menu item container **kbq-navbar-item**
-	  - icon **[kbq-icon]** (another PT koobiq component, out of the scope of this)
-	  - title **kbq-navbar-title**
-    - dropdown **[kbq-dropdown]** (another PT koobiq component, out of the scope of this)
-	  - any markup
-	- any markup
-- any markup
+-   left\right side container **kbq-navbar-section**
+    -   product\company title **kbq-navbar-brand**
+    -   logo container **kbq-navbar-logo**
+        -   any markup
+            -   **kbq-navbar-title** (please see below)
+    -   title **kbq-navbar-title**
+        -   any markup, only font size, font color, font family is gonna be styled
+    -   menu item container **kbq-navbar-item**
+        -   icon **[kbq-icon]** (another PT koobiq component, out of the scope of this)
+        -   title **kbq-navbar-title**
+    -   dropdown **[kbq-dropdown]** (another PT koobiq component, out of the scope of this)
+    -   any markup
+    -   any markup
+-   any markup
 
 ## States
 
 We believe you are able to manage navbar child components from outside. Meantime we provide number of kbq-navbar-item states based on css classes which may be combined between each others.
 
- - kbq-active - selected item
- - kbq-progress - something in progress (striped animation)
- - cdk-focused - focused state, we control it as well for common tab order behaviour
- 
+-   kbq-active - selected item
+-   kbq-progress - something in progress (striped animation)
+-   cdk-focused - focused state, we control it as well for common tab order behaviour
+
 Disable state also could be combined with other states but it is **disabled** attribute.
 
 ## Collapsing
+
 In the case that absence of space the following elements is collapsed:
 
--  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). The title attribute is added for [kbq-icon] from kbq-navbar-item text;
--  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). 
+-   kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). The title attribute is added for [kbq-icon] from kbq-navbar-item text;
+-   kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed).

package/navbar/_navbar-item_horizontal.scss

@@ -3,11 +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 {
     position: relative;
@@ -19,41 +15,44 @@ $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-right: kbq-css-variable(size-m);
+        padding-left: kbq-css-variable(size-m);
+        // (total height 48 - grey hover 32) / 2
         &: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);
+            align-self: center;
+
+            padding-right: kbq-css-variable(size-xxs);
         }
     }
 
@@ -62,20 +61,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 +86,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,30 +2,30 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-navbar-item.kbq-vertical {
     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);
+
+        align-items: center;
 
-        padding: map.get($tokens, size-l) map.get($tokens, size-xl);
+        padding-right: kbq-css-variable(size-xl);
+        padding-left: 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 +36,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 +81,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,42 @@
 @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) {
     &: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 +45,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 +56,14 @@
 
             &: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 +71,7 @@
         }
 
         &.kbq-disabled {
-            @include kbq-navbar-item(map.get($item, disabled));
+            @include kbq-navbar-item($item, disabled);
 
             pointer-events: none;
             cursor: default;
@@ -93,7 +91,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 +105,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,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -15,7 +15,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 +23,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 +36,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 +63,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 +78,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 +93,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 +101,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);
+            top: 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,11 +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 {
     display: block;
@@ -14,7 +10,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 +18,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);
 }