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

package/checkbox/_checkbox-theme.scss

@@ -2,94 +2,100 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 /* stylelint-disable no-descending-specificity */
-@mixin kbq-checkbox-state($state) {
+@mixin kbq-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
+
     .kbq-checkbox__frame {
-        border-color: map.get($state, border);
+        border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
 
-        background-color: map.get($state, background);
+        background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
     }
-}
-
-@mixin kbq-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
-
-    @include kbq-checkbox-state($default);
 
     .kbq-checkbox-label {
-        color: map.get($default, text);
+        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
     }
 
     .kbq-checkbox__frame {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($default, color);
+            color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
         }
     }
 
     & .kbq-hint .kbq-hint__text {
-        color: map.get($default, caption);
+        color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
     }
 
     &:hover,
     &.kbq-hover {
-        @include kbq-checkbox-state(map.get($checkbox, hover));
+        .kbq-checkbox__frame {
+            border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, hover, border));
+
+            background-color: kbq-css-variable(#{$base}-hover-background, map.get($style, hover, background));
+        }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        @include kbq-checkbox-state(map.get($checkbox, checked));
+        .kbq-checkbox__frame {
+            border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+
+            background-color: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+        }
     }
 
     &.kbq-checked:not(.kbq-disabled),
     &.kbq-indeterminate:not(.kbq-disabled) {
         &:hover,
         &.kbq-hover {
-            @include kbq-checkbox-state(map.get($checkbox, checked-hover));
+            .kbq-checkbox__frame {
+                border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, checked-hover, border));
+
+                background-color: kbq-css-variable(
+                    #{$base}-hover-background, map.get($style, checked-hover, background));
+            }
         }
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                $checked-focused: map.get($checkbox, checked-focused);
-
-                border-color: map.get($checked-focused, border);
-                background-color: map.get($checked-focused, background);
-                outline: map.get($checked-focused, outline);
+                border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, checked-focused, border));
+                background-color: kbq-css-variable(
+                    #{$base}-focused-background, map.get($style, checked-focused, background));
+                outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, checked-focused, outline));
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            $focused: map.get($checkbox, focused);
-
-            border-color: map.get($focused, border);
-            background-color: map.get($focused, background);
-            outline: map.get($focused, outline);
+            border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, focused, border));
+            background-color: kbq-css-variable(#{$base}-focused-background, map.get($style, focused, background));
+            outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, focused, outline));
         }
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         .kbq-checkbox__frame {
-            border-color: map.get($disabled, border);
-            background-color: map.get($disabled, background);
+            border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+            background-color: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: map.get($disabled, color);
+                color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: map.get($disabled, caption);
+            color: kbq-css-variable(#{$base}-disabled-caption, map.get($style, disabled, caption));
         }
 
         .kbq-checkbox-label {
-            color: map.get($disabled, text);
+            color: kbq-css-variable(#{$base}-disabled-text, map.get($style, disabled, text));
         }
     }
 }
@@ -98,34 +104,29 @@
 @mixin kbq-checkbox-theme($theme) {
     $checkbox: map.get(map.get($theme, components), checkbox);
 
-    $checkbox-theme: map.get($checkbox, theme);
-    $checkbox-error: map.get($checkbox, error);
-
     .kbq-checkbox {
-        @include kbq-checkbox-color($checkbox-theme);
+        @include kbq-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-checkbox-color($checkbox-error);
+            @include kbq-checkbox-color($checkbox, error);
         }
     }
 }
 
 @mixin kbq-checkbox-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-checkbox {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
+        @include kbq-typography-css-variables(checkbox, normal-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
+            @include kbq-typography-css-variables(checkbox, normal-caption);
         }
     }
 
     .kbq-checkbox.kbq-checkbox_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
+        @include kbq-typography-css-variables(checkbox, big-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
+            @include kbq-typography-css-variables(checkbox, big-caption);
         }
     }
 }

package/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 @use '../core/styles/common/layout';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -24,15 +25,15 @@ $tokens: meta.module-variables(tokens) !default;
     pointer-events: none;
     background-color: transparent;
 
-    border-radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+    border-radius: kbq-css-variable(checkbox-size-normal-border-radius);
 
     border: {
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        width: kbq-css-variable(checkbox-size-normal-border-width);
         style: solid;
     }
 
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    height: kbq-css-variable(checkbox-size-normal-width);
+    width: kbq-css-variable(checkbox-size-normal-width);
 }
 
 .kbq-checkbox__layout {
@@ -62,8 +63,8 @@ $tokens: meta.module-variables(tokens) !default;
     top: 0;
     left: 0;
 
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    height: kbq-css-variable(checkbox-size-normal-width);
+    width: kbq-css-variable(checkbox-size-normal-width);
 }
 
 .kbq-checkbox {
@@ -101,10 +102,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-checkbox-size-normal-vertical-content-padding,
-            map.get($tokens, checkbox-size-normal-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(checkbox-size-normal-vertical-content-padding);
     }
 }
 
@@ -121,24 +119,21 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-checkbox__inner-container {
         top: 2px;
-        height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-        width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+        height: kbq-css-variable(checkbox-size-big-width);
+        width: kbq-css-variable(checkbox-size-big-width);
     }
 
     & .kbq-checkbox__frame {
-        border-radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
+        border-radius: kbq-css-variable(checkbox-size-big-border-radius);
 
         border: {
-            width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+            width: kbq-css-variable(checkbox-size-big-border-width);
             style: solid;
         }
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-checkbox-size-big-vertical-content-padding,
-            map.get($tokens, checkbox-size-big-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(checkbox-size-big-vertical-content-padding);
     }
 }
 

package/code-block/_code-block-theme.scss

@@ -3,24 +3,22 @@
 @use 'sass:list';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-code-block-style($style) {
-    $header: map.get($style, header);
-    $container: map.get($style, container);
-    $actionbar: map.get($style, actionbar);
-    $collapse: map.get($style, collapse);
+@mixin kbq-code-block-style($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: code-block-#{$style-name};
 
-    background: map.get($container, background);
+    background: kbq-css-variable(#{$base}-container-background, map.get($style, container, background));
 
     & .kbq-tab-header {
-        $header: map.get($style, header);
-        background: map.get($header, background) !important;
-        border-color: map.get($container, border);
+        background: kbq-css-variable(#{$base}-header-background, map.get($style, header, background)) !important;
+        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
     }
 
     .kbq-tab-body__wrapper {
-        border-color: map.get($container, border);
+        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
     }
 
     &:not(.kbq-code-block_no-header) {
@@ -30,12 +28,12 @@
     }
 
     & .kbq-code-block-actionbar {
-        background: map.get($actionbar, background);
+        background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
     }
 
     &.kbq-code-block_header-with-shadow {
         & .kbq-tab-header {
-            box-shadow: map.get($header, shadow);
+            box-shadow: kbq-css-variable(#{$base}-header-shadow, map.get($style, header, shadow));
         }
     }
 
@@ -43,23 +41,26 @@
         & .kbq-code-block__fade-gradient {
             display: block;
 
-            background: map.get($actionbar, fade-gradient)
+            background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient))
         }
     }
 
     .kbq-code-block__show-more {
         .bg-wrapper {
-            background: map.get($collapse, button-expand-background);
+            background: kbq-css-variable(
+                #{$base}-collapse-button-expand-background, map.get($style, collapse, button-expand-background));
             opacity: 90%;
         }
     }
 
     & .kbq-code-block__show-more_expanded {
-        background: map.get($collapse, expanded-background);
+        background: kbq-css-variable(
+            #{$base}-collapse-expanded-background, map.get($style, collapse, expanded-background));
     }
 
     & .kbq-code-block__show-more_collapsed {
-        background: map.get($collapse, collapsed-background);
+        background: kbq-css-variable(
+            #{$base}-collapse-collapsed-background, map.get($style, collapse, collapsed-background));
     }
 }
 
@@ -338,22 +339,23 @@
         }
 
         &.kbq-code-block_outline {
-            @include kbq-code-block-style(map.get($code-block, outline));
+            @include kbq-code-block-style($code-block, outline);
         }
 
         &.kbq-code-block_filled {
-            @include kbq-code-block-style(map.get($code-block, filled));
+            @include kbq-code-block-style($code-block, filled);
         }
 
         .kbq-tab-group.kbq-focused {
             // paint focus border from the top since because of border constraints
             .kbq-tab-header {
-                box-shadow: 0 3px 0 -1px map.get(map.get($theme, states), focused-color);
+                box-shadow: 0 3px 0 -1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
             }
 
             .kbq-tab-body__wrapper {
-                border-color: map.get(map.get($theme, states), focused-color);
-                box-shadow: inset 0 0 0 1px map.get(map.get($theme, states), focused-color);
+                border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                box-shadow: inset 0 0 0 1px kbq-css-variable(
+                    states-focused-color, map.get($theme, states, focused-color));
             }
         }
 
@@ -367,20 +369,19 @@
 
     .kbq-code-block-actionbar {
         .kbq-code-block-actionbar_less-contrast {
-            background-color: map-get($code-block, actionbar, bg-less-contrast);
+            background-color: kbq-css-variable(
+                code-block-actionbar-bg-less-contrast, map-get($code-block, actionbar, bg-less-contrast));
         }
 
         &.kbq-actionbar-block_floating {
-            background-color: map-get($code-block, actionbar, bg);
+            background-color: kbq-css-variable(code-block-actionbar-bg, map-get($code-block, actionbar, bg));
         }
     }
 }
 
 @mixin kbq-code-block-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-code-block {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+        @include kbq-typography-css-variables(code-block, default);
 
         & .kbq-code-block__code {
             font: inherit;

package/code-block/actionbar.component.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -17,27 +18,15 @@ $tokens: meta.module-variables(tokens) !default;
     right: 0;
 
     margin:
-        var(
-            --kbq-code-block-size-actionbar-padding-vertical,
-            map.get($tokens, code-block-size-actionbar-padding-vertical)
-        )
-        var(
-            --kbq-code-block-size-actionbar-padding-horizontal,
-            map.get($tokens, code-block-size-actionbar-padding-horizontal)
-        );
+        kbq-css-variable(code-block-size-actionbar-padding-vertical)
+        kbq-css-variable(code-block-size-actionbar-padding-horizontal);
 
-    gap: var(
-        --kbq-code-block-size-actionbar-content-gap-horizontal,
-        map.get($tokens, code-block-size-actionbar-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
 
     & .kbq-code-block__fade-gradient {
         display: none;
 
-        width: var(
-            --kbq-code-block-size-actionbar-fade-gradient-width,
-            map.get($tokens, code-block-size-actionbar-fade-gradient-width)
-        );
+        width: kbq-css-variable(code-block-size-actionbar-fade-gradient-width);
         height: 32px;
 
         margin-top: calc(
@@ -49,7 +38,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-actionbar-block_floating {
-        top: map.get($tokens, code-block-size-actionbar-margin-top);
-        right: map.get($tokens, code-block-size-actionbar-margin-right);
+        top: kbq-css-variable(code-block-size-actionbar-margin-top);
+        right: kbq-css-variable(code-block-size-actionbar-margin-right);
     }
 }

package/code-block/code-block.scss

@@ -1,15 +1,13 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
+
 
 $tokens: meta.module-variables(tokens) !default;
 
-$border-radius: var(
-    --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
-);
-$border-width: var(
-        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
-);
+$border-radius: kbq-css-variable(code-block-size-container-border-radius);
+$border-width: kbq-css-variable(code-block-size-container-border-width);
 
 /* stylelint-disable no-descending-specificity */
 .kbq-code-block {
@@ -32,21 +30,13 @@ $border-width: var(
         $buttons-margin: calc(32 * 4) + 24px;
 
         padding:
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
-            )
+            kbq-css-variable(code-block-size-header-padding-vertical)
             calc(var(
                 --kbq-code-block-size-header-padding-right,
                 map.get($tokens, code-block-size-header-padding-right)
             ) + $buttons-margin)
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
-            ) var(
-                --kbq-code-block-size-header-padding-left,
-                map.get($tokens, code-block-size-header-padding-left)
-            );
+            kbq-css-variable(code-block-size-header-padding-vertical)
+            kbq-css-variable(code-block-size-header-padding-left);
 
         border-width: $border-width $border-width 0 $border-width;
         border-style: solid;
@@ -56,7 +46,7 @@ $border-width: var(
     &:has(.kbq-code-block__show-more) {
         .kbq-code-block__code {
             & > code {
-                padding-bottom: map.get($tokens, size-3xl) !important;
+                padding-bottom: kbq-css-variable(size-3xl) !important;
                 overflow-x: scroll;
             }
         }
@@ -65,21 +55,10 @@ $border-width: var(
     .kbq-code-block__code {
         > code {
             padding:
-                var(
-                    --kbq-code-block-size-with-header-content-padding-top,
-                    map.get($tokens, code-block-size-with-header-content-padding-top)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-bottom,
-                    map.get($tokens, code-block-size-with-header-content-padding-bottom)
-                ) var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                );
+                kbq-css-variable(code-block-size-with-header-content-padding-top)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal)
+                kbq-css-variable(code-block-size-with-header-content-padding-bottom)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal);
 
             border-radius: $border-radius;
 
@@ -89,10 +68,7 @@ $border-width: var(
         }
 
         .hljs-ln-numbers {
-            padding-right: var(
-                --kbq-code-block-size-with-header-content-content-gap-horizontal,
-                map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
-            );
+            padding-right: kbq-css-variable(code-block-size-with-header-content-content-gap-horizontal);
         }
     }
 
@@ -133,21 +109,12 @@ $border-width: var(
 
             & > code {
                 padding:
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-vertical,
-                        map.get($tokens, code-block-size-no-header-content-padding-vertical)
-                    )
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-horizontal,
-                        map.get($tokens, code-block-size-no-header-content-padding-horizontal)
-                    );
+                    kbq-css-variable(code-block-size-no-header-content-padding-vertical)
+                    kbq-css-variable(code-block-size-no-header-content-padding-horizontal);
             }
 
             .hljs-ln-numbers {
-                padding-right: var(
-                    --kbq-code-block-size-no-header-content-content-gap-horizontal,
-                    map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
-                );
+                padding-right: kbq-css-variable(code-block-size-no-header-content-content-gap-horizontal);
             }
         }
     }
@@ -218,31 +185,19 @@ $border-width: var(
     border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {
-        padding-top: var(
-            --kbq-code-block-size-collapse-collapsed-padding-top,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-collapsed-padding-top);
 
-        padding-bottom: var(
-            --kbq-code-block-size-collapse-collapsed-padding-bottom,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
-        );
+        padding-bottom: kbq-css-variable(code-block-size-collapse-collapsed-padding-bottom);
     }
 
     &.kbq-code-block__show-more_expanded {
-        padding-top: var(
-            --kbq-code-block-size-collapse-expanded-padding-top,
-            map.get($tokens, code-block-size-collapse-expanded-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-expanded-padding-top);
 
-        margin-bottom: var(
-            --kbq-code-block-size-collapse-expanded-padding-bottom,
-            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
-        );
+        margin-bottom: kbq-css-variable(code-block-size-collapse-expanded-padding-bottom);
     }
 
     .bg-wrapper {
-        border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+        border-radius: kbq-css-variable(button-size-border-radius);
     }
 }
 /* stylelint-enable no-descending-specificity */

package/core/forms/_forms-theme.scss

@@ -3,29 +3,26 @@
 
 @use '../styles/typography/typography-utils' as *;
 @use './forms' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-forms-theme($theme) {
     @include kbq-form-geometry(map.get($theme, tokens));
 
-    $foreground: map.get($theme, foreground);
-
     $forms: map.get(map.get($theme, components), forms);
 
     .kbq-form__label {
-        color: map.get($forms, label);
+        color: kbq-css-variable(forms-label, map.get($forms, label));
     }
 
     .kbq-form__legend {
-        color: map.get($forms, legend);
+        color: kbq-css-variable(forms-legend, map.get($forms, legend));
     }
 }
 
 @mixin kbq-forms-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
+        @include kbq-typography-css-variables(forms, label);
     }
 
     //.kbq-form__legend {