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

package/icon/icon.scss

@@ -1,12 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }

package/input/_input-theme.scss

@@ -2,13 +2,15 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-input-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-input,
     .kbq-input.kbq-input-password::placeholder {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, input-font-text));
+        @include kbq-typography-css-variables(input, text);
+    }
+
+    .kbq-input.kbq-input-password {
+        @include kbq-typography-level-to-styles($config, mono-normal);
     }
 }

package/input/input.scss

@@ -4,7 +4,7 @@
 @use '../core/styles/common/input';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -19,23 +19,24 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
     min-height: calc(
         var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height)) -
-        (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+            (var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
     );
 
-    padding:
-        calc(
-            var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) -
-            var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width))
+    padding: calc(
+            var(--kbq-input-size-padding-vertical, map.get($tokens, input-size-padding-vertical)) - var(
+                    --kbq-form-field-size-border-width,
+                    map.get($tokens, form-field-size-border-width)
+                )
         )
-        var(--kbq-input-size-padding-horizontal, map.get($tokens, input-size-padding-horizontal));
+        kbq-css-variable(input-size-padding-horizontal);
 }
 
-input.kbq-input[type="number"] {
+input.kbq-input[type='number'] {
     -moz-appearance: textfield;
 }
 
-input.kbq-input[type="number"]::-webkit-inner-spin-button,
-input.kbq-input[type="number"]::-webkit-outer-spin-button {
+input.kbq-input[type='number']::-webkit-inner-spin-button,
+input.kbq-input[type='number']::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }
 

package/link/_link-theme.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-link-geometry($tokens) {
     display: inline;
@@ -10,9 +10,7 @@
     text-decoration: none;
     cursor: pointer;
 
-    outline-offset: var(
-        --kbq-link-size-state-focused-outline-offset, map.get($tokens, link-size-state-focused-outline-offset)
-    );
+    outline-offset: kbq-css-variable(link-size-state-focused-outline-offset);
 
     &:focus {
         outline: none;
@@ -26,48 +24,38 @@
 
     &.kbq-text-with-icon .kbq-link__text {
         &:not(:first-child) {
-            margin-left: var(
-                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
-            );
+            margin-left: kbq-css-variable(link-size-normal-content-padding);
         }
 
         &:not(:last-child) {
-            margin-right: var(
-                --kbq-link-size-normal-content-padding, map.get($tokens, link-size-normal-content-padding)
-            );
+            margin-right: kbq-css-variable(link-size-normal-content-padding);
         }
     }
 
     &.kbq-link_compact {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: var(
-                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
-                );
+                margin-left: kbq-css-variable(link-size-compact-content-padding);
             }
 
             &:not(:last-child) {
-                margin-right: var(
-                    --kbq-link-size-compact-content-padding, map.get($tokens, link-size-compact-content-padding)
-                );
+                margin-right: kbq-css-variable(link-size-compact-content-padding);
             }
         }
     }
 
-    /* stylelint-disable no-descending-specificity */
     &.kbq-link_big {
         &.kbq-text-with-icon .kbq-link__text {
             &:not(:first-child) {
-                margin-left: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
+                margin-left: kbq-css-variable(link-size-big-content-padding);
             }
 
             &:not(:last-child) {
-                margin-right: var(--kbq-link-size-big-content-padding, map.get($tokens, link-size-big-content-padding));
+                margin-right: kbq-css-variable(link-size-big-content-padding);
             }
         }
     }
 
-
     &.kbq-link_pseudo {
         &.kbq-text-only,
         &.kbq-text-with-icon .kbq-link__text {
@@ -81,19 +69,20 @@
             border-bottom-color: transparent;
         }
     }
-    /* stylelint-enable no-descending-specificity */
 }
 
-@mixin kbq-link-state($state) {
-    color: map.get($state, text);
+@mixin kbq-link-state($component, $state-name) {
+    $state: map.get($component, $state-name);
+
+    color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text));
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text {
-        border-bottom-color: map.get($state, border-bottom);
+        border-bottom-color: kbq-css-variable(link-#{$state-name}-border-bottom, map.get($state, border-bottom));
     }
 
     & .kbq-icon {
-        color: map.get($state, text) !important;
+        color: kbq-css-variable(link-#{$state-name}-text, map.get($state, text)) !important;
     }
 }
 
@@ -105,49 +94,43 @@
     .kbq-link {
         @include kbq-link-geometry($tokens);
 
-        $default: map.get($link, default);
-        @include kbq-link-state($default);
+        @include kbq-link-state($link, default);
 
         transition: color ease-out 300ms;
 
         &:hover {
             transition: color 0ms;
 
-            $hover: map.get($link, hover);
-            @include kbq-link-state($hover);
+            @include kbq-link-state($link, state-hover);
         }
 
-        &:active {
-            $active: map.get($link, active);
-            @include kbq-link-state($active);
+        &:active,
+        &.kbq-active {
+            @include kbq-link-state($link, state-active);
         }
 
         &.kbq-link_use-visited:not(.kbq-disabled):visited {
-            $visited: map.get($link, visited);
-            @include kbq-link-state($visited);
+            @include kbq-link-state($link, state-visited);
 
             &:hover {
-                $visited-hover: map.get($link, visited-hover);
-                @include kbq-link-state($visited-hover);
+                @include kbq-link-state($link, state-visited-hover);
             }
 
-            &:active {
-                $visited-active: map.get($link, visited-active);
-                @include kbq-link-state($visited-active);
+            &:active,
+            &.kbq-active {
+                @include kbq-link-state($link, state-visited-active);
             }
         }
 
         &.cdk-keyboard-focused {
-            $focused: map.get($link, focused);
-            outline: map.get($focused, outline) solid;
+            outline: kbq-css-variable(link-state-focused-outline, map.get($link, state-focused, outline)) solid;
         }
 
         &.kbq-disabled {
             cursor: default;
             pointer-events: none;
 
-            $disabled: map.get($link, disabled);
-            @include kbq-link-state($disabled);
+            @include kbq-link-state($link, state-disabled);
         }
 
         @media print {
@@ -158,7 +141,7 @@
                 }
 
                 &::after {
-                    content: ":\a" attr(print);
+                    content: ':\a' attr(print);
                     white-space: pre;
                 }
             }
@@ -167,10 +150,8 @@
 }
 
 @mixin kbq-link-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-link {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-normal));
+        @include kbq-typography-css-variables(link, normal);
 
         & .kbq-icon {
             line-height: inherit;
@@ -179,10 +160,10 @@
     }
 
     .kbq-link.kbq-link_compact {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-compact));
+        @include kbq-typography-css-variables(link, compact);
     }
 
     .kbq-link.kbq-link_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-big));
+        @include kbq-typography-css-variables(link, big);
     }
 }

package/list/_list-theme.scss

@@ -2,65 +2,67 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-list-item($component, $state-name) {
+    $state: map.get($component, $state-name);
 
-@mixin kbq-list-item($state) {
-    background: map.get($state, container-background);
+    background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-list-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(list-#{$state-name}-text, map.get($state, text));
     }
 
     .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(list-#{$state-name}-icon, map.get($state, icon));
     }
 
     .kbq-option-action .kbq-icon {
-        color: map.get($state, icon-button);
+        color: kbq-css-variable(list-#{$state-name}-icon-button, map.get($state, icon-button));
     }
 
     .kbq-list-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$state-name}-caption, map.get($state, caption));
     }
 }
 
 @mixin kbq-list-theme($theme) {
-    $list-item: map.get(map.get($theme, components), list-item);
+    $list-item: map.get($theme, components, list-item);
 
     .kbq-list-option {
-        @include kbq-list-item(map.get($list-item, default));
+        @include kbq-list-item($list-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item(map.get($list-item, hover));
+            @include kbq-list-item($list-item, states-hover);
         }
 
         &.kbq-focused {
-            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-list-item(map.get($list-item, selected));
+            @include kbq-list-item($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item(map.get($list-item, selected-hover));
+                @include kbq-list-item($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item(map.get($list-item, disabled));
+            @include kbq-list-item($list-item, states-disabled);
         }
     }
 }
 
 @mixin kbq-list-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-list-item,
     .kbq-list-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));
+        .kbq-list-text {
+            .kbq-list-option-caption {
+                @include kbq-typography-css-variables(list, caption);
+            }
+        }
     }
 }

package/list/list.scss

@@ -3,15 +3,9 @@
 
 @use '../core/styles/common/list';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-list,
 .kbq-list-selection {
     display: block;
-
     outline: none;
 }
 
@@ -27,6 +21,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-option-action {
         display: none;
+        height: 20px;
+        align-items: center;
     }
 
     &:not(.kbq-disabled):hover,

package/loader-overlay/_loader-overlay-theme.scss

@@ -2,65 +2,64 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-loader-overlay-theme($theme) {
     $loader-overlay: map.get(map.get($theme, components), loader-overlay);
 
     .kbq-loader-overlay_filled {
-        $filled: map.get($loader-overlay, filled);
-
         &.kbq-loader-overlay {
-            background: map.get($filled, background);
+            background: kbq-css-variable(
+                loader-overlay-filled-background,
+                map.get($loader-overlay, filled, background)
+            );
         }
 
         & .kbq-loader-overlay-text {
-            color: map.get($filled, text);
+            color: kbq-css-variable(loader-overlay-filled-text, map.get($loader-overlay, filled, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: map.get($filled, caption);
+            color: kbq-css-variable(loader-overlay-filled-caption, map.get($loader-overlay, filled, caption));
         }
     }
 
     .kbq-loader-overlay_transparent {
-        $transparent: map.get($loader-overlay, transparent);
-
         &.kbq-loader-overlay {
-            background: map.get($transparent, background);
+            background: kbq-css-variable(
+                loader-overlay-transparent-background,
+                map.get($loader-overlay, transparent, background)
+            );
         }
 
         & .kbq-loader-overlay-text {
-            color: map.get($transparent, text);
+            color: kbq-css-variable(loader-overlay-transparent-text, map.get($loader-overlay, transparent, text));
         }
 
         & .kbq-loader-overlay-caption {
-            color: map.get($transparent, caption);
+            color: kbq-css-variable(loader-overlay-transparent-caption, map.get($loader-overlay, transparent, caption));
         }
     }
 }
 
 @mixin kbq-loader-overlay-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-loader-overlay_big {
         & .kbq-loader-overlay-text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-text));
+            @include kbq-typography-css-variables(loader-overlay, big-text);
         }
 
         & .kbq-loader-overlay-caption {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-big-caption));
+            @include kbq-typography-css-variables(loader-overlay, big-caption);
         }
     }
 
     .kbq-loader-overlay_compact {
         & .kbq-loader-overlay-text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-text));
+            @include kbq-typography-css-variables(loader-overlay, compact-text);
         }
 
         & .kbq-loader-overlay-caption {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-compact-caption));
+            @include kbq-typography-css-variables(loader-overlay, compact-caption);
         }
     }
 }
-

package/loader-overlay/loader-overlay.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -45,54 +45,30 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-loader-overlay_big {
-        padding-left: var(
-            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
-            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
-        );
+        padding-left: kbq-css-variable(loader-overlay-size-big-overlay-padding-horizontal);
 
-        padding-right: var(
-            --kbq-loader-overlay-size-big-overlay-padding-horizontal,
-            map.get($tokens, loader-overlay-size-big-overlay-padding-horizontal)
-        );
+        padding-right: kbq-css-variable(loader-overlay-size-big-overlay-padding-horizontal);
 
         & .kbq-progress-spinner {
-            margin-bottom: var(
-                --kbq-loader-overlay-size-big-loader-margin-bottom,
-                map.get($tokens, loader-overlay-size-big-loader-margin-bottom)
-            );
+            margin-bottom: kbq-css-variable(loader-overlay-size-big-loader-margin-bottom);
         }
 
         & .kbq-loader-overlay-text {
-            margin-bottom: var(
-                --kbq-loader-overlay-size-big-content-content-gap-vertical,
-                map.get($tokens, loader-overlay-size-big-content-content-gap-vertical)
-            );
+            margin-bottom: kbq-css-variable(loader-overlay-size-big-content-content-gap-vertical);
         }
     }
 
     &.kbq-loader-overlay_compact {
-        padding-left: var(
-            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
-            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
-        );
+        padding-left: kbq-css-variable(loader-overlay-size-compact-overlay-padding-horizontal);
 
-        padding-right: var(
-            --kbq-loader-overlay-size-compact-overlay-padding-horizontal,
-            map.get($tokens, loader-overlay-size-compact-overlay-padding-horizontal)
-        );
+        padding-right: kbq-css-variable(loader-overlay-size-compact-overlay-padding-horizontal);
 
         & .kbq-progress-spinner {
-            margin-bottom: var(
-                --kbq-loader-overlay-size-compact-loader-margin-bottom,
-                map.get($tokens, loader-overlay-size-compact-loader-margin-bottom)
-            );
+            margin-bottom: kbq-css-variable(loader-overlay-size-compact-loader-margin-bottom);
         }
 
         & .kbq-loader-overlay-text {
-            margin-bottom: var(
-                --kbq-loader-overlay-size-compact-content-content-gap-vertical,
-                map.get($tokens, loader-overlay-size-compact-content-content-gap-vertical)
-            );
+            margin-bottom: kbq-css-variable(loader-overlay-size-compact-content-content-gap-vertical);
         }
     }
 }