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

package/icon/_icon-item-theme.scss

@@ -1,47 +1,62 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-icon-item-style($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
+    $base: icon-item-filled-#{$type}-#{$type}-#{$style-name};
 
-@mixin kbq-icon-item-theme($themeObj) {
-    $icon-item: map.get(map.get($themeObj, components), icon-item);
+    color: kbq-css-variable(#{$base}-color, map.get($component, $type, $style-name, color));
+    background: kbq-css-variable(#{$base}-background, map.get($component, $type, $style-name, background));
+}
 
-    $theme: map.get($icon-item, theme);
-    $contrast: map.get($icon-item, contrast);
-    $fade-contrast: map.get($icon-item, fade-contrast);
-    $error: map.get($icon-item, error);
-    $warning: map.get($icon-item, warning);
-    $success: map.get($icon-item, success);
+@mixin kbq-icon-item-theme($theme) {
+    $icon-item: map.get($theme, components, icon-item);
 
-    .kbq-icon-item {
-        &.kbq-theme {
-            color: map.get($theme, color);
-            background: map.get($theme, background);
-        }
+    .kbq-icon-item.kbq-icon-item_filled {
+        &.kbq-icon-item_fade-off {
+            &.kbq-theme {
+                @include kbq-icon-item-style($icon-item, fade-off, theme);
+            }
 
-        &.kbq-contrast {
-            color: map.get($contrast, color);
-            background: map.get($contrast, background);
-        }
+            &.kbq-contrast {
+                @include kbq-icon-item-style($icon-item, fade-off, contrast);
+            }
 
-        &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
-            background: map.get($fade-contrast, background);
-        }
+            &.kbq-error {
+                @include kbq-icon-item-style($icon-item, fade-off, error);
+            }
 
-        &.kbq-error {
-            color: map.get($error, color);
-            background: map.get($error, background);
-        }
+            &.kbq-warning {
+                @include kbq-icon-item-style($icon-item, fade-off, warning);
+            }
 
-        &.kbq-warning {
-            color: map.get($warning, color);
-            background: map.get($warning, background);
+            &.kbq-success {
+                @include kbq-icon-item-style($icon-item, fade-off, success);
+            }
         }
 
-        &.kbq-success {
-            color: map.get($success, color);
-            background: map.get($success, background);
+        &.kbq-icon-item_fade-on {
+            &.kbq-theme {
+                @include kbq-icon-item-style($icon-item, fade-on, theme);
+            }
+
+            &.kbq-contrast {
+                @include kbq-icon-item-style($icon-item, fade-on, contrast);
+            }
+
+            &.kbq-error {
+                @include kbq-icon-item-style($icon-item, fade-on, error);
+            }
+
+            &.kbq-warning {
+                @include kbq-icon-item-style($icon-item, fade-on, warning);
+            }
+
+            &.kbq-success {
+                @include kbq-icon-item-style($icon-item, fade-on, success);
+            }
         }
     }
 }

package/icon/_icon-theme.scss

@@ -1,41 +1,35 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-icon-theme($themeObj) {
-    $icon: map.get(map.get($themeObj, components), icon);
-
-    $theme: map.get($icon, theme);
-    $contrast: map.get($icon, contrast);
-    $fade-contrast: map.get($icon, fade-contrast);
-    $error: map.get($icon, error);
-    $warning: map.get($icon, warning);
-    $success: map.get($icon, success);
+@mixin kbq-icon-theme($theme) {
+    $icon: map.get($theme, components, icon);
 
     .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
-            color: map.get($theme, color);
+            color: kbq-css-variable(icon-theme-color, map.get($icon, theme, color));
         }
 
         &.kbq-contrast {
-            color: map.get($contrast, color);
+            color: kbq-css-variable(icon-contrast-color, map.get($icon, contrast, color));
         }
 
         &.kbq-contrast-fade {
-            color: map.get($fade-contrast, color);
+            color: kbq-css-variable(icon-fade-contrast-color, map.get($icon, fade-contrast, color));
         }
 
         &.kbq-error {
-            color: map.get($error, color);
+            color: kbq-css-variable(icon-error-color, map.get($icon, error, color));
         }
 
         &.kbq-warning {
-            color: map.get($warning, color);
+            color: kbq-css-variable(icon-warning-color, map.get($icon, warning, color));
         }
 
         &.kbq-success {
-            color: map.get($success, color);
+            color: kbq-css-variable(icon-success-color, map.get($icon, success, color));
         }
     }
 }

package/icon/icon-button.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-icon-button {
@@ -13,21 +10,12 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     padding:
-        var(--kbq-icon-button-size-small-vertical-padding, map-get($tokens, icon-button-size-small-vertical-padding))
-        var(
-            --kbq-icon-button-size-small-horizontal-padding,
-            map-get($tokens, icon-button-size-small-horizontal-padding)
-        );
+        kbq-css-variable(icon-button-size-small-vertical-padding)
+        kbq-css-variable(icon-button-size-small-horizontal-padding);
 
     &.kbq-icon-button_small {
         padding:
-            var(
-                --kbq-icon-button-size-normal-vertical-padding,
-                map-get($tokens, icon-button-size-normal-vertical-padding)
-            )
-            var(
-                --kbq-icon-button-size-normal-horizontal-padding,
-                map-get($tokens, icon-button-size-normal-horizontal-padding)
-            );
+            kbq-css-variable(icon-button-size-normal-vertical-padding)
+            kbq-css-variable(icon-button-size-normal-horizontal-padding);
     }
 }

package/icon/icon-item.component.d.ts

@@ -5,7 +5,9 @@ import * as i0 from "@angular/core";
 export declare class KbqIconItem extends KbqIcon implements CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
     name: string;
+    fade: boolean;
+    big: boolean;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/icon/icon-item.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-icon-item {
@@ -12,7 +9,15 @@ $tokens: meta.module-variables(tokens) !default;
 
     border-radius: 50%;
 
-    padding:
-        var(--kbq-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
-        var(--kbq-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
+    &.kbq-icon-item_normal {
+        padding:
+            kbq-css-variable(icon-item-size-normal-vertical-padding)
+            kbq-css-variable(icon-item-size-normal-horizontal-padding);
+    }
+
+    &.kbq-icon-item_big {
+        padding:
+            kbq-css-variable(icon-item-size-big-vertical-padding)
+            kbq-css-variable(icon-item-size-big-horizontal-padding);
+    }
 }

package/icon/icon.scss

@@ -1,11 +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,14 +2,13 @@
 @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 {

package/input/input.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/input';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -27,7 +28,7 @@ $tokens: meta.module-variables(tokens) !default;
             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"] {

package/link/_link-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-link-geometry($tokens) {
@@ -10,9 +11,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,30 +25,22 @@
 
     &.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);
             }
         }
     }
@@ -58,11 +49,11 @@
     &.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);
             }
         }
     }
@@ -84,16 +75,18 @@
     /* 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,51 +98,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,
         &.kbq-active {
-            $active: map.get($link, active);
-            @include kbq-link-state($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,
             &.kbq-active {
-                $visited-active: map.get($link, visited-active);
-                @include kbq-link-state($visited-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 {
@@ -169,10 +154,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;
@@ -181,10 +164,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,66 +2,67 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-list-item($state) {
-    background: map.get($state, container-background);
+@mixin kbq-list-item($component, $state-name) {
+    $state: map.get($component, $state-name);
+
+    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-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/list/list.scss

@@ -3,15 +3,10 @@
 
 @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,11 +22,14 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .kbq-option-action {
         display: none;
+        height: 20px;
+        align-items: center;
     }
 
     &:not(.kbq-disabled):hover,
     &:not(.kbq-disabled).kbq-focused,
     &:not(.kbq-disabled).kbq-action-button-focused {
+
         & .kbq-option-action {
             display: flex;
         }

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

@@ -2,64 +2,61 @@
 @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);
         }
     }
 }