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

package/core/forms/_forms.scss

@@ -4,6 +4,7 @@
 @use '../styles/common/vendor-prefixes';
 @use '../styles/typography/typography' as *;
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-form-geometry($tokens) {
@@ -18,41 +19,26 @@
     }
 
     .kbq-form-horizontal {
-        $config: kbq-typography-config($tokens);
-
-        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
+        $line-height: map.get($tokens, forms-font-label-line-height);
         $form-field-size-height: map.get($tokens, form-field-size-height);
-        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-row-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(--kbq-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+            padding-top: calc(($form-field-size-height - $line-height) / 2);
 
             text-align: start;
         }
 
         & .kbq-form__control {
-            padding-left: var(
-                --kbq-forms-size-horizontal-control-padding-left,
-                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-horizontal-control-padding-left);
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-horizontal-legend-margin-top,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-legend-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-horizontal-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-horizontal-legend-margin-bottom);
         }
     }
 
@@ -62,19 +48,12 @@
         }
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-vertical-row-margin-bottom, #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-vertical-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(
-                --kbq-forms-size-vertical-label-padding-top, #{map.get($tokens, forms-size-vertical-label-padding-top)}
-            );
-            padding-bottom: var(
-                --kbq-forms-size-vertical-label-padding-bottom,
-                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
-            );
+            padding-top: kbq-css-variable(forms-size-vertical-label-padding-top);
+            padding-bottom: kbq-css-variable(forms-size-vertical-label-padding-bottom);
 
             text-align: start;
         }
@@ -84,13 +63,8 @@
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-vertical-legend-margin-top, #{map.get($tokens, forms-size-vertical-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-vertical-legend-margin-bottom,
-                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-vertical-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-vertical-legend-margin-bottom);
         }
     }
 
@@ -103,10 +77,7 @@
         flex-direction: row;
 
         & .kbq-form__row:not(:first-child) {
-            padding-left: var(
-                --kbq-forms-size-vertical-control-padding-left,
-                #{map.get($tokens, forms-size-vertical-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-vertical-control-padding-left);
         }
     }
 }

package/core/option/_optgroup-theme.scss

@@ -2,24 +2,23 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 }
 
 @mixin kbq-optgroup-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+        @include kbq-typography-css-variables(optgroup, default);
     }
 }

package/core/option/_option-action-theme.scss

@@ -2,38 +2,38 @@
 
 @use '../styles/theming/theming' as *;
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
 @mixin kbq-option-action-theme($theme) {
-    $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
     $states: map.get($theme, states);
 
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: map.get(map.get($states, icon), contrast-fade);
+                color: kbq-css-variable(states-icon-contrast-fade, map.get($states, icon, contrast-fade));
             }
 
-            background-color: map.get($background, transparent);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
 
         &:hover .kbq-icon {
-            color: map.get(map.get($states, icon), contrast-fade-hover);
+            color: kbq-css-variable(states-icon-contrast-fade-hover, map.get($states, icon, contrast-fade-hover));
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: map.get(map.get($states, icon), disabled);
+                color: kbq-css-variable(states-icon-disabled, map.get($states, icon, disabled));
             }
 
-            background-color: map.get($background, transparent);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
     }
 }

package/core/option/_option-theme.scss

@@ -2,26 +2,24 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
 
-@mixin kbq-option($state) {
-    background: map.get($state, container-background);
+@mixin kbq-option($component, $style-name) {
+    $state: map.get($component, $style-name);
+
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-option-action .kbq-icon {
-        color: map.get($state, icon-button);
+        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
@@ -29,39 +27,37 @@
     $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        @include kbq-option(map.get($list-item, default));
+        @include kbq-option($list-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-option(map.get($list-item, hover));
+            @include kbq-option($list-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($list-item, focused), focus-outline);
+            border-color: map.get($list-item, states-focused, focus-outline);
         }
 
         &.kbq-selected {
-            @include kbq-option(map.get($list-item, selected));
+            @include kbq-option($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-option(map.get($list-item, selected-hover));
+                @include kbq-option($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-option(map.get($list-item, disabled));
+            @include kbq-option($list-item, states-disabled);
         }
     }
 }
 
 @mixin kbq-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+        @include kbq-typography-css-variables(list, text);
     }
 
     .kbq-list-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        @include kbq-typography-css-variables(list, caption);
     }
 }

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,48 +1,45 @@
 @use 'sass:map';
 
 
-@mixin kbq-pseudo-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
+@use '../../styles/common/tokens' as *;
 
-    border-color: map.get($default, border);
+
+@mixin kbq-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
+
+    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: map.get($default, color);
+        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        $checked: map.get($checkbox, checked);
-
-        border-color: map.get($checked, border);
-        background: map.get($checked, background);
+        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($disabled, color);
+            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: map.get($disabled, border);
-        background: map.get($disabled, background);
+        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
     }
 }
 
 @mixin kbq-pseudo-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color(map.get($checkbox, theme));
+        @include kbq-pseudo-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color(map.get($checkbox, error));
+            @include kbq-pseudo-checkbox-color($checkbox, error);
         }
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../../styles/tokens';
+@use '../../styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -14,12 +15,12 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: kbq-css-variable(checkbox-size-normal-width);
+    height: kbq-css-variable(checkbox-size-normal-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        radius: kbq-css-variable(checkbox-size-normal-border-radius);
+        width: kbq-css-variable(checkbox-size-normal-border-width);
         style: solid;
     }
 
@@ -56,11 +57,11 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
-    width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-    height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    width: kbq-css-variable(checkbox-size-big-width);
+    height: kbq-css-variable(checkbox-size-big-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
-        width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+        radius: kbq-css-variable(checkbox-size-big-border-radius);
+        width: kbq-css-variable(checkbox-size-big-border-width);
     }
 }

package/core/styles/common/_groups.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use '../common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -82,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+            border-top-right-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -92,10 +93,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(
-                --kbq-button-size-border-radius,
-                map.get($tokens, button-size-border-radius)
-            );
+            border-bottom-left-radius: kbq-css-variable(button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);

package/core/styles/common/_list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../tokens';
+@use './tokens' as *;
 
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
@@ -55,8 +56,8 @@
 
     @include kbq-truncate-line();
 
-    padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-    padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+    padding-top: kbq-css-variable(list-size-text-padding-vertical);
+    padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
 }
 
 // This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
@@ -82,11 +83,9 @@
 
     min-height: 32px;
 
-    gap: var(
-        --kbq-list-size-container-content-gap-horizontal, map.get($tokens, list-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(list-size-container-content-gap-horizontal);
 
-    border-width: var(--kbq-list-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(list-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -113,10 +112,7 @@
     }
 
     .kbq-list-option-caption {
-        padding-top: var(
-            --kbq-list-size-container-content-gap-vertical,
-            map.get($tokens, list-size-container-content-gap-vertical)
-        );
+        padding-top: kbq-css-variable(list-size-container-content-gap-vertical);
     }
 }
 
@@ -132,10 +128,10 @@
     min-height: 32px;
 
     padding:
-        var(--kbq-list-size-header-padding-top, map.get($tokens, list-size-header-padding-top))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal))
-        var(--kbq-list-size-header-padding-bottom, map.get($tokens, list-size-header-padding-bottom))
-        var(--kbq-list-size-header-padding-horizontal, map.get($tokens, list-size-header-padding-horizontal));
+        kbq-css-variable(list-size-header-padding-top)
+        kbq-css-variable(list-size-header-padding-horizontal)
+        kbq-css-variable(list-size-header-padding-bottom)
+        kbq-css-variable(list-size-header-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -154,10 +150,10 @@
     min-height: 32px;
 
     padding:
-        var(--kbq-list-size-subheading-padding-top, map.get($tokens, list-size-subheading-padding-top))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal))
-        var(--kbq-list-size-subheading-padding-bottom, map.get($tokens, list-size-subheading-padding-bottom))
-        var(--kbq-list-size-subheading-padding-horizontal, map.get($tokens, list-size-subheading-padding-horizontal));
+        kbq-css-variable(list-size-subheading-padding-top)
+        kbq-css-variable(list-size-subheading-padding-horizontal)
+        kbq-css-variable(list-size-subheading-padding-bottom)
+        kbq-css-variable(list-size-subheading-padding-horizontal);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_popup.scss

@@ -1,11 +1,12 @@
 @use 'sass:map';
+@use './tokens' as *;
 
 
 @mixin popup-params($theme) {
-    $popup: map.get(map.get($theme, components), popup);
+    $popup: map.get($theme, components, popup);
 
-    box-shadow: map.get($popup, shadow);
-    border-color: map.get($popup, border);
+    box-shadow: kbq-css-variable(popup-shadow, map.get($popup, shadow));
+    border-color: kbq-css-variable(popup-border, map.get($popup, border));
 
-    background-color: map.get($popup, background);
+    background-color: kbq-css-variable(popup-background, map.get($popup, background));
 }

package/core/styles/common/_select.scss

@@ -3,6 +3,7 @@
 
 @use '../common/vendor-prefixes';
 @use '../tokens';
+@use './tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -116,11 +117,9 @@ $tokens: meta.module-variables(tokens) !default;
                     (var(--kbq-select-size-multiple-padding-vertical, $padding-vertical) * 2)
                 );
 
-                gap: var(--kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap));
+                gap: kbq-css-variable(select-size-multiple-content-gap);
 
-                margin-right: var(
-                    --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-                );
+                margin-right: kbq-css-variable(select-size-multiple-content-gap);
             }
         }
     }
@@ -135,9 +134,7 @@ $tokens: meta.module-variables(tokens) !default;
             flex: 0 0 70px;
             align-self: center;
             padding-left: 4px;
-            padding-right: var(
-                --kbq-select-size-multiple-content-gap, map.get($tokens, select-size-multiple-content-gap)
-            );
+            padding-right: kbq-css-variable(select-size-multiple-content-gap);
 
             text-align: right;
         }
@@ -175,9 +172,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    border-radius: var(
-        --kbq-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
-    );
+    border-radius: kbq-css-variable(select-panel-size-border-radius);
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .kbq-optgroup-label,
@@ -194,15 +189,15 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         max-width: 100%;
-        height: var(--kbq-option-size-height, map.get($tokens, option-size-height));
+        height: kbq-css-variable(option-size-height);
 
         cursor: default;
         outline: none;
 
-        padding-left: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
-        padding-right: var(--kbq-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+        padding-left: kbq-css-variable(option-size-horizontal-padding);
+        padding-right: kbq-css-variable(option-size-horizontal-padding);
 
-        border: var(--kbq-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+        border: kbq-css-variable(option-size-border-width) solid transparent;
     }
 
     .kbq-select__search-container {
@@ -214,7 +209,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 %kbq-select-content {
-    max-height: var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
+    max-height: kbq-css-variable(select-panel-size-max-height);
     padding: 4px 0;
     overflow: hidden auto;
 }
@@ -229,5 +224,5 @@ $tokens: meta.module-variables(tokens) !default;
     border-top-width: 1px;
     border-top-style: solid;
 
-    padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+    padding: kbq-css-variable(size-xxs) kbq-css-variable(size-m);
 }

package/core/styles/common/_tokens.scss

@@ -9,15 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 
-@function cssVar($name) {
-    @if string.index($name, light-) {
-        $short-name: '';
-
-        @each $part in string.split($name, '-light') {
-            $short-name: $short-name + $part;
-        }
-
-        @return var(--kbq-#{$short-name}, map.get($tokens, $name));
+@function kbq-css-variable($name, $value: null) {
+    @if $value {
+        @return var(--kbq-#{$name}, $value);
     } @else {
         @return var(--kbq-#{$name}, map.get($tokens, $name));
     }
@@ -26,3 +20,30 @@ $tokens: meta.module-variables(tokens) !default;
 @function getToken($name) {
     @return map.get($tokens, $name);
 }
+
+@mixin kbq-css-font-variable($component, $component-property, $font-property, $font) {
+    #{$font-property}: var(
+        --kbq-#{$component}-#{$font}#{$component-property}-#{$font-property},
+        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
+    );
+}
+
+@mixin kbq-typography-css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, font-);
+    @include kbq-css-font-variable($component, $property, font-weight, font-);
+    @include kbq-css-font-variable($component, $property, line-height, font-);
+    @include kbq-css-font-variable($component, $property, font-family, font-);
+    @include kbq-css-font-variable($component, $property, text-transform, font-);
+    @include kbq-css-font-variable($component, $property, font-feature-settings, font-);
+    @include kbq-css-font-variable($component, $property, letter-spacing, font-);
+}
+
+@mixin kbq-typography-level-to-styles_css-variables($component, $property) {
+    @include kbq-css-font-variable($component, $property, font-size, '');
+    @include kbq-css-font-variable($component, $property, font-weight, '');
+    @include kbq-css-font-variable($component, $property, line-height, '');
+    @include kbq-css-font-variable($component, $property, font-family, '');
+    @include kbq-css-font-variable($component, $property, text-transform, '');
+    @include kbq-css-font-variable($component, $property, font-feature-settings, '');
+    @include kbq-css-font-variable($component, $property, letter-spacing, '');
+}