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

package/button/_button-base.scss

@@ -3,11 +3,9 @@
 
 @use '../core/styles/common/button';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 %kbq-button-base {
     @include button.kbq-button-reset();
 
@@ -21,8 +19,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     margin: 0; /* Safari */
 
-    height: var(--kbq-button-size-height, map.get($tokens, button-size-height));
-    min-height: var(--kbq-button-size-height, map.get($tokens, button-size-height));
+    height: kbq-css-variable(button-size-height);
+    min-height: kbq-css-variable(button-size-height);
 
     white-space: nowrap;
 
@@ -31,8 +29,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     vertical-align: baseline;
 
-    border: var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width)) solid transparent;
-    border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+    border: kbq-css-variable(button-size-border-width) solid transparent;
+    border-radius: kbq-css-variable(button-size-border-radius);
 
     &::-moz-focus-inner {
         border: 0;
@@ -56,14 +54,10 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-icon_left {
-        margin-right: var(
-            --kbq-button-size-content-padding, map.get($tokens, button-size-content-padding)
-        );
+        margin-right: kbq-css-variable(button-size-content-padding);
     }
 
     & .kbq-icon_right {
-        margin-left: var(
-            --kbq-button-size-content-padding, map.get($tokens, button-size-content-padding)
-        );
+        margin-left: kbq-css-variable(button-size-content-padding);
     }
 }

package/button/_button-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin _icon($left-icon, $right-icon) {
@@ -18,85 +19,43 @@
     }
 }
 
-@mixin kbq-filled-button($params) {
-    border-color: map.get($params, border);
-    color: map.get($params, foreground);
-    background: map.get($params, background);
+@mixin kbq-button-type($component, $type, $sub-type) {
+    $style: map.get($component, $type, $sub-type);
+    $base-path: button-#{$type}-#{$sub-type};
 
-    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    border-color: kbq-css-variable(#{$base-path}-border, map.get($style, border));
+    color: kbq-css-variable(#{$base-path}-foreground, map.get($style, foreground));
+    background: kbq-css-variable(#{$base-path}-background, map.get($style, background));
 
-    &:hover:not(.kbq-disabled),
-    &.kbq-hover:not(.kbq-disabled) {
-        background: map.get($params, states_hover_background);
-    }
-
-    &:active:not(.kbq-disabled),
-    &.kbq-active:not(.kbq-disabled) {
-        background: map.get($params, states_active_background);
-    }
-
-    &.kbq-disabled {
-        color: map.get($params, states_disabled_foreground);
-        background: map.get($params, states_disabled_background);
-
-        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
-    }
-}
-
-@mixin kbq-outline-button($params) {
-    border-color: map.get($params, border);
-    color: map.get($params, foreground);
-    background: map.get($params, background);
-
-    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+    @include _icon(
+        kbq-css-variable(#{$base-path}-left-icon, map.get($style, left-icon)),
+        kbq-css-variable(#{$base-path}-right-icon, map.get($style, right-icon))
+    );
 
     &:hover:not(.kbq-disabled),
     &.kbq-hover:not(.kbq-disabled) {
-        background: map.get($params, states_hover_background);
+        background: kbq-css-variable(#{$base-path}-states-hover-background, map.get($style, states-hover-background));
     }
 
     &:active:not(.kbq-disabled),
     &.kbq-active:not(.kbq-disabled) {
-        background: map.get($params, states_active_background);
+        background: kbq-css-variable(#{$base-path}-states-active-background, map.get($style, states-active-background));
     }
 
     &.kbq-disabled {
-        border-color: map.get($params, states_disabled_border);
-        color: map.get($params, states_disabled_foreground);
-
-        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
-    }
-}
-
-@mixin kbq-transparent-button($params) {
-    border-color: map.get($params, border);
-    color: map.get($params, foreground);
-    background: map.get($params, background);
-
-    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
-
-    &:hover:not(.kbq-disabled),
-    &.kbq-hover:not(.kbq-disabled) {
-        background: map.get($params, states_hover_background);
-    }
-
-    &:active:not(.kbq-disabled),
-    &.kbq-active:not(.kbq-disabled) {
-        background: map.get($params, states_active_background);
-    }
-
-    &.kbq-disabled {
-        border-color: map.get($params, states_disabled_border);
-        color: map.get($params, states_disabled_foreground);
-
-        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+        color: kbq-css-variable(#{$base-path}-states-disabled-foreground, map.get($style, states-disabled-foreground));
+        background: kbq-css-variable(
+            #{$base-path}-states-disabled-background, map.get($style, states-disabled-background)
+        );
+
+        @include _icon(
+            kbq-css-variable(#{$base-path}-states-disabled-left-icon, map.get($style, states-disabled-left-icon)),
+            kbq-css-variable(#{$base-path}-states-disabled-right-icon, map.get($style, states-disabled-right-icon))
+        );
     }
 }
 
 @mixin kbq-button-theme($theme) {
-    $primary: map.get($theme, theme);
-    $background: map.get($theme, background);
-
     $button: map.get(map.get($theme, components), button);
 
     .kbq-button-overlay {
@@ -109,43 +68,31 @@
 
         &.kbq-button_filled {
             &.kbq-contrast {
-                $filled-contrast: map.get(map.get($button, filled), contrast-fade-off);
-
-                @include kbq-filled-button($filled-contrast);
+                @include kbq-button-type($button, filled, contrast-fade-off);
             }
 
             &.kbq-contrast-fade {
-                $filled-fade-contrast: map.get(map.get($button, filled), contrast-fade-on);
-
-                @include kbq-filled-button($filled-fade-contrast);
+                @include kbq-button-type($button, filled, contrast-fade-on);
             }
         }
 
         &.kbq-button_outline {
             &.kbq-theme-fade {
-                $outline-theme-fade-on: map.get(map.get($button, outline), theme-fade-on);
-
-                @include kbq-outline-button($outline-theme-fade-on);
+                @include kbq-button-type($button, outline, theme-fade-on);
             }
 
             &.kbq-contrast-fade {
-                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
-
-                @include kbq-outline-button($outline-contrast-fade-on);
+                @include kbq-button-type($button, outline, contrast-fade-on);
             }
         }
 
         &.kbq-button_transparent {
             &.kbq-theme {
-                $transparent-theme: map.get(map.get($button, transparent), theme);
-
-                @include kbq-transparent-button($transparent-theme);
+                @include kbq-button-type($button, transparent, theme);
             }
 
             &.kbq-contrast {
-                $transparent-contrast: map.get(map.get($button, transparent), contrast);
-
-                @include kbq-transparent-button($transparent-contrast);
+                @include kbq-button-type($button, transparent, contrast);
             }
         }
 
@@ -160,11 +107,9 @@
 }
 
 @mixin kbq-button-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-button,
     .kbq-button-icon {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-font-default));
+        @include kbq-typography-css-variables(button, default);
     }
 
     .kbq-button-icon.kbq-button-wrapper {
@@ -173,4 +118,3 @@
         }
     }
 }
-

package/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
-import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@koobiq/components/core';
+import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {
@@ -32,10 +32,11 @@ export declare class KbqButtonBase {
 }
 /** @docs-private */
 export declare const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof KbqButtonBase;
-export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, CanDisable, CanColor {
+export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, CanDisable, CanColor, KbqTitleTextRef {
     private focusMonitor;
     private styler;
     hasFocus: boolean;
+    textElement: ElementRef;
     get kbqStyle(): string;
     set kbqStyle(value: string | KbqButtonStyles);
     private _kbqStyle;

package/button/button.scss

@@ -4,6 +4,7 @@
 @use 'button-base' as *;
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -13,22 +14,18 @@ $tokens: meta.module-variables(tokens) !default;
 
     // base padding + compensation (4px) - border-width (2px)
     padding-left: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px -
-        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
+        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
     );
     padding-right: calc(
-        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
-        4px -
-        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
+        var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) + 4px
     );
 
     &.kbq-button-icon_left {
-        padding-left: var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+        padding-left: kbq-css-variable(button-size-horizontal-padding);
     }
 
     &.kbq-button-icon_right {
-        padding-right: var(--kbq-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+        padding-right: kbq-css-variable(button-size-horizontal-padding);
     }
 }
 
@@ -39,15 +36,9 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button-icon {
     @extend %kbq-button-base;
 
-    padding-left: calc(
-        var(--kbq-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
-        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
-    );
+    padding-left: kbq-css-variable(button-icon-size-horizontal-padding);
 
-    padding-right: calc(
-        var(--kbq-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
-        var(--kbq-button-size-border-width, map.get($tokens, button-size-border-width))
-    );
+    padding-right: kbq-css-variable(button-icon-size-horizontal-padding);
 }
 
 .kbq-button-overlay {

package/button-toggle/_button-toggle-theme.scss

@@ -3,18 +3,18 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
+@mixin kbq-button-toggle-state($component, $state-name) {
+    $state: map.get($component, $state-name);
 
-@mixin kbq-button-toggle-color($state) {
-    background: map.get($state, background);
+    background: kbq-css-variable(button-toggle-item-#{$state-name}-background, map.get($state, background));
 
-    color: map.get($state, text);
+    color: kbq-css-variable(button-toggle-item-#{$state-name}-text, map.get($state, text));
 
     & .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(button-toggle-item-#{$state-name}-icon, map.get($state, icon));
     }
 }
 
@@ -22,43 +22,43 @@ $tokens: meta.module-variables(tokens) !default;
     $button-toggle: map.get(map.get($theme, components), button-toggle);
 
     .kbq-button-toggle-group {
-        $container: map.get($button-toggle, container);
-
-        background: map.get($container, background);
+        background: kbq-css-variable(
+            button-toggle-container-background, map.get($button-toggle, container, background)
+        );
 
         .kbq-button-toggle {
             $button: map.get($button-toggle, item);
 
             & > .kbq-button,
             & > .kbq-icon-button {
-                @include kbq-button-toggle-color(map.get($button, default));
+                @include kbq-button-toggle-state($button, default);
 
                 &:hover:not(.kbq-disabled) {
-                    @include kbq-button-toggle-color(map.get($button, hover));
+                    @include kbq-button-toggle-state($button, states-hover);
                 }
 
                 &:active:not(.kbq-disabled) {
-                    @include kbq-button-toggle-color(map.get($button, active));
+                    @include kbq-button-toggle-state($button, states-active);
                 }
 
                 &.kbq-selected:not(.kbq-disabled) {
-                    @include kbq-button-toggle-color(map.get($button, selected));
+                    @include kbq-button-toggle-state($button, states-selected);
 
                     &:hover {
-                        @include kbq-button-toggle-color(map.get($button, selected-hover));
+                        @include kbq-button-toggle-state($button, states-selected-hover);
                     }
 
                     &:active {
-                        @include kbq-button-toggle-color(map.get($button, selected-active));
+                        @include kbq-button-toggle-state($button, states-selected-active);
                     }
                 }
 
                 &.kbq-disabled {
-                    @include kbq-button-toggle-color(map.get($button, disabled));
+                    @include kbq-button-toggle-state($button, states-disabled);
                 }
 
                 &.kbq-disabled.kbq-selected {
-                    @include kbq-button-toggle-color(map.get($button, selected-disabled));
+                    @include kbq-button-toggle-state($button, states-selected-disabled);
                 }
 
                 &.cdk-keyboard-focused {
@@ -71,7 +71,7 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-button-toggle-typography($config) {
     .kbq-button-toggle .kbq-button-toggle-wrapper {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-item));
+        @include kbq-typography-css-variables(button-toggle, item);
     }
 }
 

package/button-toggle/button-toggle.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -14,25 +15,13 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     align-items: center;
 
-    gap: var(
-        --kbq-button-toggle-size-container-content-gap-horizontal,
-        map.get($tokens, button-toggle-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(button-toggle-size-container-content-gap-horizontal);
 
-    border-radius: var(
-        --kbq-button-toggle-size-container-border-radius,
-        map.get($tokens, button-toggle-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(button-toggle-size-container-border-radius);
 
     padding:
-        var(
-            --kbq-button-toggle-size-container-padding-vertical,
-            map.get($tokens, button-toggle-size-container-padding-vertical)
-        )
-        var(
-            --kbq-button-toggle-size-container-padding-horizontal,
-            map.get($tokens, button-toggle-size-container-padding-horizontal)
-        );
+        kbq-css-variable(button-toggle-size-container-padding-vertical)
+        kbq-css-variable(button-toggle-size-container-padding-horizontal);
 
     .kbq-button-toggle {
         display: flex;
@@ -43,17 +32,11 @@ $tokens: meta.module-variables(tokens) !default;
         $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
         $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
 
-        border-radius: var(
-            --kbq-button-toggle-size-item-border-radius,
-            map.get($tokens, button-toggle-size-item-border-radius)
-        );
+        border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
         > .kbq-button,
         > .kbq-button-icon {
-            border-radius: var(
-                --kbq-button-toggle-size-item-border-radius,
-                map.get($tokens, button-toggle-size-item-border-radius)
-            );
+            border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
 
             padding:
                 calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
@@ -73,10 +56,7 @@ $tokens: meta.module-variables(tokens) !default;
 
                 width: 100%;
 
-                gap: var(
-                    --kbq-button-toggle-size-item-content-gap-horizontal,
-                    map.get($tokens, button-toggle-size-item-content-gap-horizontal)
-                );
+                gap: kbq-css-variable(button-toggle-size-item-content-gap-horizontal);
             }
         }
     }
@@ -105,10 +85,7 @@ $tokens: meta.module-variables(tokens) !default;
         > .kbq-button-icon {
             width: 100%;
 
-            border-radius: var(
-                --kbq-button-toggle-size-item-border-radius,
-                map.get($tokens, button-toggle-size-item-border-radius)
-            );
+            border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
         }
     }
 }

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