@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/icon/icon-item.scss

@@ -1,18 +1,20 @@
 @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 {
     box-sizing: border-box;
 
     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,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/icon/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './icon.module';
-export * from './icon.component';
 export * from './icon-button.component';
 export * from './icon-item.component';
+export * from './icon.component';
+export * from './icon.module';

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/input/public-api.d.ts

@@ -1,6 +1,6 @@
-export * from './input.module';
 export * from './input';
 export * from './input-number';
+export * from './input-number-validators';
 export * from './input-password';
 export * from './input-value-accessor';
-export * from './input-number-validators';
+export * from './input.module';

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,22 +150,22 @@
 }
 
 @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;
             vertical-align: text-bottom;
+            display: inline-flex;
+            align-items: center;
         }
     }
 
     .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/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
 import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";

package/link/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './link.module';
 export * from './link.component';
+export * from './link.module';

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-selection.component.d.ts

@@ -1,9 +1,9 @@
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, OnDestroy, OnInit, NgZone } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, HasTabIndexCtor, HasTabIndex, MultipleMode, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Observable, Subject } from 'rxjs';

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: kbq-css-variable(size-xl);
+        align-items: center;
     }
 
     &:not(.kbq-disabled):hover,

package/list/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './list.module';
-export * from './list.component';
 export * from './list-selection.component';
+export * from './list.component';
+export * from './list.module';

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);
         }
     }
 }

package/loader-overlay/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './loader-overlay.module';
 export * from './loader-overlay.component';
+export * from './loader-overlay.module';