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

package/form-field/_form-field-theme.scss

@@ -3,46 +3,41 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-form-field-state($state) {
+@mixin kbq-form-field-state($component, $state-name) {
+    $state: map.get($component, $state-name);
+
     .kbq-form-field__container {
-        border-color: map.get($state, border);
-        background-color: map.get($state, background);
+        border-color: kbq-css-variable(form-field-#{$state-name}-border, map.get($state, border));
+        background-color: kbq-css-variable(form-field-#{$state-name}-background, map.get($state, background));
     }
 
     .kbq-input,
     .kbq-tag-input,
     .kbq-textarea {
-        color: map.get($state, text);
+        color: kbq-css-variable(form-field-#{$state-name}-text, map.get($state, text));
 
         &::placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
 
         &::-ms-input-placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
 
         &::-webkit-input-placeholder {
-            color: map.get($state, placeholder);
+            color: kbq-css-variable(form-field-#{$state-name}-placeholder, map.get($state, placeholder));
         }
     }
 }
 
 @mixin kbq-form-field-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     .kbq-form-field {
-        $form-field: map.get(map.get($theme, components), form-field);
-
-        $default: map.get($form-field, default);
-        $autofill: map.get($form-field, autofill);
-        $error: map.get($form-field, error);
-        $focused: map.get($form-field, focused);
-        $disabled: map.get($form-field, disabled);
+        $form-field: map.get($theme, components, form-field);
 
-        @include kbq-form-field-state($default);
+        @include kbq-form-field-state($form-field, default);
 
         /* stylelint-disable no-descending-specificity */
         & .kbq-input {
@@ -50,35 +45,42 @@
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
-                -webkit-box-shadow: 0 0 0 40rem map.get($autofill, background) inset;
-                -webkit-text-fill-color: map.get($autofill, text);
-                caret-color: map-get($autofill, text);
+                -webkit-box-shadow: 0 0 0 40rem kbq-css-variable(
+                    form-field-states-autofill-background, map.get($form-field, states-autofill, background)) inset;
+                -webkit-text-fill-color: kbq-css-variable(
+                    form-field-states-autofill-text, map.get($form-field, states-autofill, text));
+                caret-color: kbq-css-variable(
+                    form-field-states-autofill-text, map.get($form-field, states-autofill, text));
             }
         }
 
         &.cdk-focused {
-            @include kbq-form-field-state($focused);
+            @include kbq-form-field-state($form-field, states-focused);
 
             & .kbq-form-field__container {
-                box-shadow: 0 0 0 1px map.get($focused, focus-outline);
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(
+                    form-field-states-focused-focu-outline, map.get($form-field, states-focused, focus-outline));
             }
         }
 
         &.kbq-form-field_invalid,
         &.ng-invalid {
-            @include kbq-form-field-state($error);
+            @include kbq-form-field-state($form-field, states-error);
 
             &.cdk-focused .kbq-form-field__container {
-                box-shadow: 0 0 0 1px map.get($error, focus-outline);
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(
+                    form-field-states-error-focu-outline, map.get($form-field, states-error, focus-outline));
             }
         }
 
         &.kbq-disabled {
-            @include kbq-form-field-state($disabled);
+            @include kbq-form-field-state($form-field, states-disabled);
 
             .kbq-icon {
-                color: map.get($disabled, text);
-                -webkit-text-fill-color: map.get($disabled, text);
+                color: kbq-css-variable(form-field-disabled-text, map.get($form-field, disabled, text));
+                -webkit-text-fill-color: kbq-css-variable(
+                    form-field-disabled-text, map.get($form-field, disabled, text)
+                );
             }
         }
         /* stylelint-enable no-descending-specificity */
@@ -86,21 +88,17 @@
 
     .kbq-form-field__hint {
         & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
-
-            color: map.get($form-field-hint, text);
+            color: kbq-css-variable(form-field-hint-text, map.get($theme, components, form-field-hint, text));
         }
     }
 }
 
 @mixin kbq-form-field-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-form-field {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
+        @include kbq-typography-css-variables(form-field, text);
     }
 
     .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
+        @include kbq-typography-css-variables(form-field-hint, text);
     }
 }

package/form-field/_hint-theme.scss

@@ -3,13 +3,16 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-hint-color($hint) {
-    color: map.get($hint, text);
+@mixin kbq-hint-color($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
+
+    color: kbq-css-variable(hint-#{$type}-#{$style-name}-text, map.get($style, text));
 
     & .kbq-icon {
-        color: map.get($hint, icon) !important;
+        color: kbq-css-variable(hint-#{$type}-#{$style-name}-icon, map.get($style, icon)) !important;
     }
 }
 
@@ -18,54 +21,48 @@
     $hint: map.get(map.get($theme, components), hint);
 
     .kbq-hint {
-        $fill-text-on: map.get($hint, fill-text-on);
-
         &.kbq-contrast-fade {
-            @include kbq-hint-color(map.get($fill-text-on, fade-contrast));
+            @include kbq-hint-color($hint, fill-text-on, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color(map.get($fill-text-on, success));
+            @include kbq-hint-color($hint, fill-text-on, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color(map.get($fill-text-on, warning));
+            @include kbq-hint-color($hint, fill-text-on, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color(map.get($fill-text-on, error));
+            @include kbq-hint-color($hint, fill-text-on, error);
         }
     }
 
     .kbq-hint.kbq-hint_fill-text-off {
-        $fill-text-off: map.get($hint, fill-text-off);
-
         &.kbq-contrast-fade {
-            @include kbq-hint-color(map.get($fill-text-off, fade-contrast));
+            @include kbq-hint-color($hint, fill-text-off, fade-contrast);
         }
 
         &.kbq-success {
-            @include kbq-hint-color(map.get($fill-text-off, success));
+            @include kbq-hint-color($hint, fill-text-off, success);
         }
 
         &.kbq-warning {
-            @include kbq-hint-color(map.get($fill-text-off, warning));
+            @include kbq-hint-color($hint, fill-text-off, warning);
         }
 
         &.kbq-error {
-            @include kbq-hint-color(map.get($fill-text-off, error));
+            @include kbq-hint-color($hint, fill-text-off, error);
         }
     }
 }
 
 @mixin kbq-hint-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-normal-text));
+        @include kbq-typography-css-variables(hint, normal-text);
     }
 
     .kbq-hint.kbq-hint_compact .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-compact-text));
+        @include kbq-typography-css-variables(hint, compact-text);
     }
 }

package/form-field/cleaner.scss

@@ -1,21 +1,16 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-cleaner {
     display: flex;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     cursor: pointer;

package/form-field/form-field.scss

@@ -4,6 +4,7 @@
 @use '../core/forms/forms';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -20,13 +21,13 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
-        height: var(--kbq-form-field-size-height, map.get($tokens, form-field-size-height));
+        height: kbq-css-variable(form-field-size-height);
     }
 
     &,
     .kbq-input,
     .kbq-textarea {
-        border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+        border-radius: kbq-css-variable(form-field-size-border-radius);
     }
 
     &:hover {
@@ -72,17 +73,17 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & + .kbq-password-hint {
-        margin-top: var(--kbq-size-m, map.get($tokens, size-m));
+        margin-top: kbq-css-variable(size-m);
     }
 }
 
 .kbq-form-field__container {
     position: relative;
 
-    border-width: var(--kbq-form-field-size-border-width, map.get($tokens, form-field-size-border-width));
+    border-width: kbq-css-variable(form-field-size-border-width);
     border-style: solid;
     border-color: transparent;
-    border-radius: var(--kbq-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+    border-radius: kbq-css-variable(form-field-size-border-radius);
 }
 
 .kbq-form-field__prefix,
@@ -122,12 +123,12 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+    width: kbq-css-variable(form-field-size-button-width);
 
     .kbq-stepper-step-up,
     .kbq-stepper-step-down {
         cursor: pointer;
-        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        width: kbq-css-variable(form-field-size-button-width);
         text-align: center;
     }
 
@@ -139,16 +140,14 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-form-field__hint {
     display: flex;
     flex-direction: column;
-    margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+    margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 
     & .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s, map.get($tokens, size-s));
+        margin-top: kbq-css-variable(size-s);
     }
 }
 
 .kbq-password-hint {
-    margin-top: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+    margin-top: kbq-css-variable(form-field-hint-size-gap);
 }
-
-
 /* stylelint-enable no-descending-specificity */

package/form-field/hint.scss

@@ -1,23 +1,21 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-hint {
     display: flex;
 
     & .kbq-icon {
-        margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, hint-size-normal-content-padding));
+        margin-top: kbq-css-variable(hint-size-normal-margin-top);
+        margin-right: kbq-css-variable(hint-size-normal-content-padding);
     }
 
     &.kbq-hint_compact {
         & .kbq-icon {
-            margin-right: var(
-                --kbq-hint-size-compact-content-padding, map-get($tokens, hint-size-compact-content-padding)
-            );
+            margin-top: kbq-css-variable(hint-size-compact-margin-top);
+            margin-right: kbq-css-variable(hint-size-compact-content-padding);
         }
     }
 }

package/form-field/password-toggle.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-password-toggle {
@@ -12,11 +9,8 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     &::-moz-focus-inner {

package/form-field/stepper.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-stepper {
@@ -13,17 +10,14 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     align-items: center;
 
-    width: var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size));
-    margin-right: var(
-        --kbq-form-field-size-icon-button-margin-right,
-        map.get($tokens, form-field-size-icon-button-margin-right)
-    );
+    width: kbq-css-variable(form-field-size-icon-button-size);
+    margin-right: kbq-css-variable(form-field-size-icon-button-margin-right);
     height: 100%;
 
     .kbq-stepper-step-up,
     .kbq-stepper-step-down {
         cursor: pointer;
-        width: var(--kbq-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
+        width: kbq-css-variable(form-field-size-button-width);
         text-align: center;
     }
 

package/icon/_icon-button-theme.scss

@@ -1,17 +1,11 @@
 @use 'sass:map';
 
 @use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-icon-button-theme($themeObj) {
-    $icon-button: map.get(map.get($themeObj, components), icon-button);
-
-    $theme: map.get($icon-button, theme);
-    $contrast: map.get($icon-button, contrast);
-    $fade-contrast: map.get($icon-button, fade-contrast);
-    $error: map.get($icon-button, error);
-    $success: map.get($icon-button, success);
-    $warning: map.get($icon-button, warning);
+@mixin kbq-icon-button-theme($theme) {
+    $icon-button: map.get($theme, components, icon-button);
 
     .kbq-icon-button {
         &:focus {
@@ -19,111 +13,117 @@
         }
 
         &.kbq-theme {
-            color: map.get($theme, default);
+            color: kbq-css-variable(icon-button-heme-default, map.get($icon-button, theme, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($theme, state-active);
+                color: kbq-css-variable(icon-button-heme-state-active, map.get($icon-button, theme, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($theme, state-hover);
+                color: kbq-css-variable(icon-button-heme-state-hover, map.get($icon-button, theme, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($theme, state-disabled);
+                color: kbq-css-variable(icon-button-heme-state-disabled, map.get($icon-button, theme, state-disabled));
             }
         }
 
         &.kbq-contrast {
-            color: map.get($contrast, default);
+            color: kbq-css-variable(icon-button-ontrast-default, map.get($icon-button, contrast, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($contrast, state-active);
+                color: kbq-css-variable(
+                    icon-button-ontrast-state-active, map.get($icon-button, contrast, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($contrast, state-hover);
+                color: kbq-css-variable(icon-button-ontrast-state-hover, map.get($icon-button, contrast, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($contrast, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-ontrast-state-disabled, map.get($icon-button, contrast, state-disabled));
             }
         }
 
         &.kbq-contrast-fade {
-            color: map.get($fade-contrast, default);
+            color: kbq-css-variable(icon-button-ade-contrast-default, map.get($icon-button, fade-contrast, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($fade-contrast, state-active);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-active, map.get($icon-button, fade-contrast, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($fade-contrast, state-hover);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-hover, map.get($icon-button, fade-contrast, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($fade-contrast, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-ade-contrast-state-disabled, map.get($icon-button, fade-contrast, state-disabled));
             }
         }
 
         &.kbq-error {
-            color: map.get($error, default);
+            color: kbq-css-variable(icon-button-rror-default, map.get($icon-button, error, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($error, state-active);
+                color: kbq-css-variable(icon-button-rror-state-active, map.get($icon-button, error, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($error, state-hover);
+                color: kbq-css-variable(icon-button-rror-state-hover, map.get($icon-button, error, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($error, state-disabled);
+                color: kbq-css-variable(icon-button-rror-state-disabled, map.get($icon-button, error, state-disabled));
             }
         }
 
         &.kbq-success {
-            color: map.get($success, default);
+            color: kbq-css-variable(icon-button-uccess-default, map.get($icon-button, success, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($success, state-active);
+                color: kbq-css-variable(icon-button-uccess-state-active, map.get($icon-button, success, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($success, state-hover);
+                color: kbq-css-variable(icon-button-uccess-state-hover, map.get($icon-button, success, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($success, state-disabled);
+                color: kbq-css-variable(
+                    icon-button-uccess-state-disabled, map.get($icon-button, success, state-disabled));
             }
         }
 
         &.kbq-warning {
-            color: map.get($warning, default);
+            color: kbq-css-variable(icon-button-default, map.get($icon-button, default));
 
             &:active,
             &.kbq-active {
-                color: map.get($warning, state-active);
+                color: kbq-css-variable(icon-button-state-active, map.get($icon-button, state-active));
             }
 
             &:not(.kbq-disabled):hover {
-                color: map.get($warning, state-hover);
+                color: kbq-css-variable(icon-button-state-hover, map.get($icon-button, state-hover));
             }
 
             &.kbq-disabled {
-                color: map.get($warning, state-disabled);
+                color: kbq-css-variable(icon-button-state-disabled, map.get($icon-button, state-disabled));
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0 1px map.get(map.get($themeObj, states), focused-color),
-                0 0 0 1px map.get(map.get($themeObj, states), focused-color);
+                inset 0 0 0.1px 1px map.get($theme, states, focused-color),
+                0 0 0.1px 1px map.get($theme, states, focused-color);
         }
     }
 }