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

package/card/_card-theme.scss

@@ -1,15 +1,19 @@
 @use 'sass:map';
 
+@use '../core/styles/common/tokens' as *;
+
+
+@mixin kbq-card-style($component, $style-name) {
+    $style: map.get($component, $style-name);
 
-@mixin kbq-card-type($card) {
     box-shadow:
-        inset -1px 0 0 0 map.get($card, shadow),
-        inset 0 1px 0 0 map.get($card, shadow),
-        inset 0 -1px 0 0 map.get($card, shadow);
+        inset -1px 0 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow)),
+        inset 0 1px 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow)),
+        inset 0 -1px 0 0 kbq-css-variable(card-#{$style-name}-shadow, map.get($style, shadow));
 
-    background-color: map.get($card, background);
+    background-color: kbq-css-variable(card-#{$style-name}-background, map.get($style, background));
 
-    border-left-color: map.get($card, vertical-line);
+    border-left-color: kbq-css-variable(card-#{$style-name}-vertical-line, map.get($style, vertical-line));
 }
 
 @mixin kbq-card-theme($theme) {
@@ -19,43 +23,41 @@
     $card: map.get(map.get($theme, components), card);
     $popup: map.get(map.get($theme, components), popup);
 
-    $is-dark: map.get($theme, is-dark);
-
     .kbq-card {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.kbq-card_error {
-            @include kbq-card-type(map.get($card, error));
+            @include kbq-card-style($card, error);
         }
 
         &.kbq-card_warning {
-            @include kbq-card-type(map.get($card, warning));
+            @include kbq-card-style($card, warning);
         }
 
         &.kbq-card_success {
-            @include kbq-card-type(map.get($card, success));
+            @include kbq-card-style($card, success);
         }
 
         &.kbq-card_info {
-            @include kbq-card-type(map.get($card, info));
+            @include kbq-card-style($card, info);
         }
 
         &.kbq-card_white {
-            background-color: map.get($popup, background);
+            background-color: kbq-css-variable(popup-background, map.get($popup, background));
         }
 
         &.kbq-selected {
-            background-color: map.get(map.get($theme, states), selected-color);
+            background-color: kbq-css-variable(states-selected-color, map.get($theme, states, selected-color));
         }
 
         &:not(.kbq-card_readonly):hover {
             .kbq-card__overlay {
-                background: map.get($background, overlay-hover);
+                background: kbq-css-variable(background-overlay-hover, map.get($background, overlay-hover));
             }
         }
 
         &.cdk-keyboard-focused {
-            box-shadow: 0 0 0 2px map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0.1px 2px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
     }
 }

package/card/card.component.scss

@@ -3,11 +3,9 @@
 
 @use '../core/styles/common/layout';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-card {
     position: relative;
     box-sizing: border-box;
@@ -22,7 +20,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     border-left: {
-        width: var(--kbq-card-size-vertical-line, map.get($tokens, card-size-vertical-line));
+        width: kbq-css-variable(card-size-vertical-line);
         style: solid;
         color: transparent;
     };

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 {
@@ -44,6 +45,10 @@ $tokens: meta.module-variables(tokens) !default;
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
+    padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
+
+    padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
+
     padding-left: calc(
         var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
         var(
@@ -59,11 +64,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
 
     position: absolute;
-    top: 0;
+    top: kbq-css-variable(checkbox-size-normal-top);
     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,15 +106,13 @@ $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);
     }
 }
 
 .kbq-checkbox.kbq-checkbox_big {
     & .kbq-checkbox__layout {
+
         padding-left: calc(
             var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
             var(
@@ -120,25 +123,22 @@ $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));
+        top: kbq-css-variable(checkbox-size-big-top);
+        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);
     }
 }
 
@@ -157,9 +157,11 @@ $tokens: meta.module-variables(tokens) !default;
 /* stylelint-disable no-descending-specificity */
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
+
         padding-left: 0;
         padding-right: calc(
-            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width))
+            +
             var(
                 --kbq-checkbox-size-normal-horizontal-content-padding,
                 map.get($tokens, checkbox-size-normal-horizontal-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.1 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);
     }
 }