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

package/toast/_toast-theme.scss

@@ -2,53 +2,54 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-toast($toast) {
-    box-shadow: map.get($toast, box-shadow);
+@mixin kbq-toast($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-    background: map.get($toast, background);
+    box-shadow: kbq-css-variable(toast-#{$style-name}-container-box-shadow, map.get($style, box-shadow));
+
+    background: kbq-css-variable(toast-#{$style-name}-container-background, map.get($style, background));
 
     .kbq-toast__title {
-        color: map.get($toast, title);
+        color: kbq-css-variable(toast-#{$style-name}-container-title, map.get($style, title));
     }
 
     .kbq-toast__text {
-        color: map.get($toast, text);
+        color: kbq-css-variable(toast-#{$style-name}-container-text, map.get($style, text));
     }
 }
 
 
 @mixin kbq-toast-theme($theme) {
-    $toast: map.get(map.get($theme, components), toast);
+    $toast: map.get($theme, components, toast);
 
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast(map.get($toast, contrast));
+            @include kbq-toast($toast, contrast);
         }
 
         &.kbq-toast_success {
-            @include kbq-toast(map.get($toast, success));
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_warning {
-            @include kbq-toast(map.get($toast, success));
+            @include kbq-toast($toast, success);
         }
 
         &.kbq-toast_error {
-            @include kbq-toast(map.get($toast, error));
+            @include kbq-toast($toast, error);
         }
     }
 }
 
 @mixin kbq-toast-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-toast {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-text));
+        @include kbq-typography-css-variables(toast, text);
     }
 
     .kbq-toast__title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+        @include kbq-typography-css-variables(toast, title);
     }
 }

package/toast/toast-container.component.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-toast-container {
@@ -12,8 +9,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     align-items: flex-end;
 
-    margin-top: var(--kbq-toast-stack-size-margin-top, map.get($tokens, toast-stack-size-margin-top));
-    margin-right: var(--kbq-toast-stack-size-margin-right, map.get($tokens, toast-stack-size-margin-right));
+    margin-top: kbq-css-variable(toast-stack-size-margin-top);
+    margin-right: kbq-css-variable(toast-stack-size-margin-right);
 
-    gap: var(--kbq-toast-stack-size-gap, map.get($tokens, toast-stack-size-gap));
+    gap: kbq-css-variable(toast-stack-size-gap);
 }

package/toast/toast.component.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -10,27 +10,27 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    width: var(--kbq-toast-size-container-width, map.get($tokens, toast-size-container-width));
+    width: kbq-css-variable(toast-size-container-width);
 
     height: auto;
 
-    border-radius: var(--kbq-toast-size-container-border-radius, map.get($tokens, toast-size-container-border-radius));
+    border-radius: kbq-css-variable(toast-size-container-border-radius);
 
-    padding-left: var(--kbq-toast-size-container-padding-left, map.get($tokens, toast-size-container-padding-left));
-    padding-right: var(--kbq-toast-size-container-padding-right, map.get($tokens, toast-size-container-padding-right));
+    padding-left: kbq-css-variable(toast-size-container-padding-left);
+    padding-right: kbq-css-variable(toast-size-container-padding-right);
 }
 
 .kbq-toast__icon-container {
-    width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
-    max-width: var(--kbq-toast-size-icon-width, map.get($tokens, toast-size-icon-width));
-    height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
-    max-height: var(--kbq-toast-size-icon-height, map.get($tokens, toast-size-icon-height));
+    width: kbq-css-variable(toast-size-icon-width);
+    max-width: kbq-css-variable(toast-size-icon-width);
+    height: kbq-css-variable(toast-size-icon-height);
+    max-height: kbq-css-variable(toast-size-icon-height);
 
-    border-radius: var(--kbq-toast-size-border-raius, map.get($tokens, toast-size-border-raius));
+    border-radius: kbq-css-variable(toast-size-border-raius);
 
-    margin-right: var(--kbq-toast-size-icon-margin-right, map.get($tokens, toast-size-icon-margin-right));
+    margin-right: kbq-css-variable(toast-size-icon-margin-right);
 
-    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
 }
 
 .kbq-toast__container {
@@ -39,9 +39,9 @@ $tokens: meta.module-variables(tokens) !default;
 
     flex: 1;
 
-    padding-top: var(--kbq-toast-size-content-padding-top, map.get($tokens, toast-size-content-padding-top));
-    padding-right: map.get($tokens, size-s);
-    padding-bottom: var(--kbq-toast-size-content-padding-bottom, map.get($tokens, toast-size-content-padding-bottom));
+    padding-top: kbq-css-variable(toast-size-content-padding-top);
+    padding-right: kbq-css-variable(size-s);
+    padding-bottom: kbq-css-variable(toast-size-content-padding-bottom);
 }
 
 .kbq-toast__title {
@@ -51,7 +51,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-toast__title_with-content {
-    padding-bottom: var(--kbq-toast-size-caption-padding-bottom, map.get($tokens, toast-size-caption-padding-bottom));
+    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
 }
 
 .kbq-toast__text {
@@ -68,17 +68,12 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toast__actions {
     display: flex;
 
-    padding-top: var(--kbq-toast-size-button-stack-padding-top, map.get($tokens, toast-size-button-stack-padding-top));
+    padding-top: kbq-css-variable(toast-size-button-stack-padding-top);
 
-    gap: var(
-        --kbq-toast-size-button-stack-content-gap-horizontal,
-        map.get($tokens, toast-size-button-stack-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(toast-size-button-stack-content-gap-horizontal);
 }
 
 .kbq-toast__close-button {
-    margin-top: var(--kbq-toast-size-close-button-margin-top, map.get($tokens, toast-size-close-button-margin-top));
-    margin-right: var(
-        --kbq-toast-size-close-button-margin-right, map.get($tokens, toast-size-close-button-margin-right)
-    );
+    margin-top: kbq-css-variable(toast-size-close-button-margin-top);
+    margin-right: kbq-css-variable(toast-size-close-button-margin-right);
 }

package/toggle/_toggle-theme.scss

@@ -3,104 +3,110 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-toggle-state($state) {
+@mixin kbq-toggle-state($component, $type, $state-name) {
+    $state: map.get($component, $type, $state-name);
+    $base: toggle-#{$type}-#{$state-name};
+
     .kbq-toggle-bar {
-        border-color: map.get($state, border);
-        background: map.get($state, background);
+        border-color: kbq-css-variable(#{$base}-border, map.get($state, border));
+        background: kbq-css-variable(#{$base}-background, map.get($state, background));
     }
 
     .kbq-toggle__circle {
-        background: map.get($state, circle-background);
-    }
-}
-
-@mixin kbq-toggle-focused-state($state) {
-    & .kbq-toggle-bar {
-        border-color: map.get($state, focus-outline);
-        box-shadow: 0 0 0 1px map.get($state, focus-outline);
+        background: kbq-css-variable(#{$base}-circle-background, map.get($state, circle-background));
     }
 }
 
-@mixin kbq-toggle-color($toggle) {
-    @include kbq-toggle-state(map.get($toggle, default));
+@mixin kbq-toggle-color($component, $type) {
+    @include kbq-toggle-state($component, $type, default);
 
     &:hover {
-        @include kbq-toggle-state(map.get($toggle, hover));
+        @include kbq-toggle-state($component, $type, states-hover);
     }
 
     &.kbq-active {
-        @include kbq-toggle-state(map.get($toggle, checked));
+        @include kbq-toggle-state($component, $type, states-checked);
     }
 
     &.kbq-active:hover {
-        @include kbq-toggle-state(map.get($toggle, checked-hover));
+        @include kbq-toggle-state($component, $type, states-checked-hover);
     }
 
     &.cdk-keyboard-focused {
-        $focused: map.get($toggle, focused);
-
-        @include kbq-toggle-state($focused);
-        @include kbq-toggle-focused-state($focused);
+        @include kbq-toggle-state($component, $type, states-focused);
+
+        & .kbq-toggle-bar {
+            border-color: kbq-css-variable(
+                toggle-#{$type}-states-focused-focus-outline,
+                map.get($component, $type, states-focused, focus-outline)
+            );
+            box-shadow: 0 0 0 1px kbq-css-variable(
+                toggle-#{$type}-states-focused-focus-outline,
+                map.get($component, $type, states-focused, focus-outline)
+            );
+        }
     }
 
     &.kbq-active.cdk-keyboard-focused {
-        $checked-focused: map.get($toggle, checked-focused);
-
-        @include kbq-toggle-state($checked-focused);
-        @include kbq-toggle-focused-state($checked-focused);
+        @include kbq-toggle-state($component, $type, states-checked-focused);
+
+        & .kbq-toggle-bar {
+            border-color: kbq-css-variable(
+                toggle-#{$type}-states-checked-focused-focus-outline,
+                map.get($component, $type, states-checked-focused, focus-outline)
+            );
+            box-shadow: 0 0 0 1px kbq-css-variable(
+                toggle-#{$type}-states-checked-focused-focus-outline,
+                map.get($component, $type, states-checked-focused, focus-outline)
+            );
+        }
     }
 
     &.kbq-disabled,
     &.kbq-active.kbq-disabled {
-        @include kbq-toggle-state(map.get($toggle, disabled));
+        @include kbq-toggle-state($component, $type, states-disabled);
     }
 }
 
 @mixin kbq-toggle-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $toggle: map.get(map.get($theme, components), toggle);
-
-    $toggle-theme: map.get($toggle, theme);
-    $toggle-error: map.get($toggle, error);
+    $toggle: map.get($theme, components, toggle);
 
     .kbq-toggle {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($theme, foreground, contrast));
 
-        @include kbq-toggle-color($toggle-theme);
+        @include kbq-toggle-color($toggle, theme);
 
         &.kbq-error {
-            @include kbq-toggle-color($toggle-error);
+            @include kbq-toggle-color($toggle, error);
         }
     }
 }
 
 @mixin kbq-toggle-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-toggle:not(.kbq-toggle_big) {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-label));
+        @include kbq-typography-css-variables(toggle, normal-label);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-caption));
+            @include kbq-typography-css-variables(toggle, normal-caption);
         }
 
         & .kbq-toggle-bar-container {
-            height: kbq-line-height($config, map.get($tokens, toggle-font-normal-label));
+            @include kbq-css-font-variable(toggle, normal-caption, line-height, font-);
         }
     }
 
     .kbq-toggle.kbq-toggle_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-label));
+        @include kbq-typography-css-variables(toggle, big-label);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, toggle-font-big-caption));
+            @include kbq-typography-css-variables(toggle, big-caption);
         }
 
         & .kbq-toggle-bar-container {
-            height: kbq-line-height($config, map.get($tokens, toggle-font-big-label));
+            @include kbq-css-font-variable(toggle, big-label, line-height, font-);
         }
     }
 }

package/toggle/toggle.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -50,15 +50,12 @@ $tokens: meta.module-variables(tokens) !default;
             radius: 8px;
         }
 
-        height: var(--kbq-toggle-size-normal-height, map.get($tokens, toggle-size-normal-height));
-        width: var(--kbq-toggle-size-normal-width, map.get($tokens, toggle-size-normal-width));
+        height: kbq-css-variable(toggle-size-normal-height);
+        width: kbq-css-variable(toggle-size-normal-width);
     }
 
     .kbq-hint {
-        margin-top: var(
-            --kbq-toggle-size-normal-vertical-content-padding,
-            map.get($tokens, toggle-size-normal-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(toggle-size-normal-vertical-content-padding);
     }
 }
 
@@ -69,31 +66,22 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 1;
 
     &.left {
-        margin-right: var(
-            --kbq-toggle-size-normal-horizontal-content-padding,
-            map.get($tokens, toggle-size-normal-horizontal-content-padding)
-        );
+        margin-right: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
     }
 
     &.right {
-        margin-left: var(
-            --kbq-toggle-size-normal-horizontal-content-padding,
-            map.get($tokens, toggle-size-normal-horizontal-content-padding)
-        );
+        margin-left: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
     }
 }
 
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
-        height: var(--kbq-toggle-size-big-height, map.get($tokens, toggle-size-big-height));
-        width: var(--kbq-toggle-size-big-width, map.get($tokens, toggle-size-big-width));
+        height: kbq-css-variable(toggle-size-big-height);
+        width: kbq-css-variable(toggle-size-big-width);
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-toggle-size-big-vertical-content-padding,
-            map.get($tokens, toggle-size-big-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(toggle-size-big-vertical-content-padding);
     }
 }
 

package/tooltip/_tooltip-theme.scss

@@ -3,47 +3,44 @@
 
 @use '../core/pop-up/pop-up' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tooltip-color($tooltip) {
-    box-shadow: map.get($tooltip, shadow);
+@mixin kbq-tooltip-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+
+    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
 
     & .kbq-tooltip__inner {
-        color: map.get($tooltip, text);
+        color: kbq-css-variable(tooltip-#{$style-name}-text, map.get($style, text));
 
-        background-color: map.get($tooltip, background);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
     }
 
     & .kbq-tooltip__arrow {
-        background-color: map.get($tooltip, background);
-        box-shadow: map.get($tooltip, shadow);
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
+        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
     }
 }
 
 @mixin kbq-tooltip-theme($theme) {
     $tooltip: map.get(map.get($theme, components), tooltip);
 
-    $theme-fade-off: map.get($tooltip, theme-fade-off);
-    $contrast-fade-off: map.get($tooltip, contrast-fade-off);
-    $contrast-fade-on: map.get($tooltip, contrast-fade-on);
-
     .kbq-tooltip.kbq-theme {
-        @include kbq-tooltip-color($theme-fade-off);
+        @include kbq-tooltip-color($tooltip, theme-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast {
-        @include kbq-tooltip-color($contrast-fade-off);
+        @include kbq-tooltip-color($tooltip, contrast-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast-fade {
-        @include kbq-tooltip-color($contrast-fade-on);
+        @include kbq-tooltip-color($tooltip, contrast-fade-on);
     }
 }
 
 @mixin kbq-tooltip-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tooltip {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+        @include kbq-typography-css-variables(tooltip, default);
     }
 }

package/tooltip/tooltip.scss

@@ -3,42 +3,40 @@
 
 @use '../core/pop-up/pop-up';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 $trigger-margin: 8px;
 
 
 .kbq-tooltip__inner {
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: var(--kbq-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+    max-width: kbq-css-variable(tooltip-size-max-width);
 
     .kbq-tooltip__inner {
         padding:
-            var(--kbq-tooltip-size-padding-vertical, map.get($tokens, tooltip-size-padding-vertical))
-            var(--kbq-tooltip-size-padding-horizontal, map.get($tokens, tooltip-size-padding-horizontal));
+            kbq-css-variable(tooltip-size-padding-vertical)
+            kbq-css-variable(tooltip-size-padding-horizontal);
     }
 }
 
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
-    height: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    width: kbq-css-variable(tooltip-size-arrow-size);
+    height: kbq-css-variable(tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 

package/tree/_tree-theme.scss

@@ -3,30 +3,28 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tree-option($state) {
-    background: map.get($state, container-background);
+@mixin kbq-tree-option($component, $state-name) {
+    $state: map.get($component, $state-name);
+
+    background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-tree-node-toggle .kbq-icon {
-        color: map.get($state, tree-toggle);
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: map.get($state, action-button);
+        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
     }
 }
 
@@ -37,29 +35,31 @@
     }
 
     .kbq-tree-option {
-        $tree-item: map.get(map.get($theme, components), tree-item);
+        $tree-item: map.get($theme, components, tree-item);
 
-        @include kbq-tree-option(map.get($tree-item, default));
+        @include kbq-tree-option($tree-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(map.get($tree-item, hover));
+            @include kbq-tree-option($tree-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($tree-item, focused), focus-outline);
+            border-color: kbq-css-variable(
+                tree-states-focused-focus-outline, map.get($tree-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {
-            @include kbq-tree-option(map.get($tree-item, selected));
+            @include kbq-tree-option($tree-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(map.get($tree-item, selected-hover));
+                @include kbq-tree-option($tree-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-tree-option(map.get($tree-item, disabled));
+            @include kbq-tree-option($tree-item, states-disabled);
 
             & .kbq-icon {
                 cursor: default;
@@ -69,13 +69,11 @@
 }
 
 @mixin kbq-tree-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+        @include kbq-typography-css-variables(tree, text);
     }
 
     .kbq-tree-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
+        @include kbq-typography-css-variables(tree, caption);
     }
 }

package/tree/toggle.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-tree-node-toggle {
     display: flex;
     align-items: center;
@@ -14,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 100%;
 
-    padding-left: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
-    padding-right: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+    padding-left: kbq-css-variable(tree-size-toggle-padding);
+    padding-right: kbq-css-variable(tree-size-toggle-padding);
 
     cursor: pointer;