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

package/tabs/_tabs-theme.scss

@@ -2,96 +2,111 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tab-item-state($state) {
-    background: map.get($state, background);
-    color: map.get($state, text);
+@mixin kbq-tab-item-state($component, $type, $sub-type, $style-name) {
+    $style: map.get($component, $type, $sub-type, $style-name);
+
+    $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
+
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
+    color: kbq-css-variable(#{$base}-text, map.get($style, text));
 
     & .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
     }
 }
 
-@mixin kbq-tab-item-style($tab-item) {
-    @include kbq-tab-item-state(map.get($tab-item, default));
+@mixin kbq-tab-item-style($component, $type, $sub-type) {
+    @include kbq-tab-item-state($component, $type, $sub-type, default);
 
     &:hover:not(.kbq-disabled) {
-        @include kbq-tab-item-state(map.get($tab-item, hover));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-hover);
     }
 
     &.kbq-selected {
-        @include kbq-tab-item-state(map.get($tab-item, selected));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-selected);
 
         &:hover {
-            @include kbq-tab-item-state(map.get($tab-item, selected-hover));
+            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-hover);
         }
     }
 
     &.cdk-keyboard-focused {
-        border-color: map.get(map.get($tab-item, focused), border-color);
+        border-color: kbq-css-variable(
+            tabs-tab-item-#{$type}-#{$sub-type}-states-focused-border-color,
+            map.get($component, $type, $sub-type, states-focused, border-color)
+        );
     }
 
     &.kbq-disabled {
-        @include kbq-tab-item-state(map.get($tab-item, disabled));
+        @include kbq-tab-item-state($component, $type, $sub-type, states-disabled);
 
         &.kbq-selected {
-            @include kbq-tab-item-state(map.get($tab-item, selected-disabled));
+            @include kbq-tab-item-state($component, $type, $sub-type, states-selected-disabled);
         }
     }
 }
 
-@mixin kbq-tab-stack-style($tab-stack) {
-    .kbq-tab-header {
-        background: map.get($tab-stack, background);
-    }
-}
-
 //noinspection ALL
 @mixin kbq-tabs-theme($theme) {
     $tab-item: map.get(map.get($theme, components), tab-item);
-
     $tab-stack: map.get(map.get($theme, components), tab-stack);
 
-    $tab-stack_filled: map.get($tab-stack, filled);
-    $tab-item_filled: map.get($tab-item, filled);
-
-    $tab-stack_transparent: map.get($tab-stack, transparent);
-    $tab-item_transparent: map.get($tab-item, transparent);
-
     .kbq-tab-group {
         &.kbq-tab-group_filled {
             &.kbq-tab-group_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-background-background,
+                        map.get($tab-stack, filled, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-surface-background,
+                        map.get($tab-stack, filled, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
         }
 
         &.kbq-tab-group_transparent {
             &.kbq-tab-group_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-background-background,
+                        map.get($tab-stack, transparent, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
 
             &.kbq-tab-group_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-surface-background,
+                        map.get($tab-stack, transparent, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-label {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
         }
@@ -100,36 +115,56 @@
     .kbq-tab-nav-bar {
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-background-background,
+                        map.get($tab-stack, filled, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_filled, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-filled-on-surface-background,
+                        map.get($tab-stack, filled, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_filled, on-background));
+                    @include kbq-tab-item-style($tab-item, filled, on-background);
                 }
             }
         }
 
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-background));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-background-background,
+                        map.get($tab-stack, transparent, on-background, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
 
             &.kbq-tab-nav-bar_on-surface {
-                @include kbq-tab-stack-style(map.get($tab-stack_transparent, on-surface));
+                .kbq-tab-header {
+                    background: kbq-css-variable(
+                        tabs-tab-stack-transparent-on-surface-background,
+                        map.get($tab-stack, transparent, on-surface, background)
+                    );
+                }
 
                 & .kbq-tab-link {
-                    @include kbq-tab-item-style(map.get($tab-item_transparent, on-background));
+                    @include kbq-tab-item-style($tab-item, transparent, on-background);
                 }
             }
         }
@@ -137,10 +172,8 @@
 }
 
 @mixin kbq-tabs-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tab-label,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tabs-font-text));
+        @include kbq-typography-css-variables(tabs, text);
     }
 }

package/tabs/tab-group.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-tab-group {
     display: flex;
     flex-direction: column;
@@ -24,10 +22,7 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
 
     .kbq-tab-list__content {
-        gap: var(
-            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
-            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
-        ) 0;
+        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 
     & .kbq-tab-header__content {

package/tabs/tab-header.scss

@@ -4,10 +4,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-tab-header {
     display: flex;

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -3,11 +3,9 @@
 
 @use '../tabs-common';
 
-@use '../../core/styles/tokens';
+@use '../../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tab-link {
     vertical-align: top;
     text-decoration: none;
@@ -38,9 +36,6 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-tab-group_vertical {
         flex-direction: column;
         flex-grow: 0;
-        gap: var(
-            --kbq-tabs-size-tab-stack-vertical-content-gap-vartical,
-            map.get($tokens, tabs-size-tab-stack-vertical-content-gap-vertical)
-        ) 0;
+        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 }

package/tags/_tag-theme.scss

@@ -3,74 +3,71 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tag-state($state) {
-    background: map.get($state, background);
+@mixin kbq-tag-state($component, $type, $style-name) {
+    $style: map.get($component, $type, $style-name);
+
+    $base: tag-#{$type}-#{$style-name};
+
+    background: kbq-css-variable(#{$base}-background, map.get($style, background));
 
     & .kbq-icon {
-        color: map.get($state, icon);
+        color: kbq-css-variable(#{$base}-icon, map.get($style, icon));
     }
 
     & .kbq-tag__text {
-        color: map.get($state, text);
+        color: kbq-css-variable(#{$base}-text, map.get($style, text));
     }
 }
 
-@mixin kbq-tag-color($tag) {
-    $default: map.get($tag, default);
-
-    @include kbq-tag-state($default);
+@mixin kbq-tag-color($component, $type) {
+    @include kbq-tag-state($component, $type, default);
 
     &:hover,
     &.kbq-hovered {
-        $hover: map.get($tag, hover);
-
-        @include kbq-tag-state($hover);
+        @include kbq-tag-state($component, $type, hover);
     }
 
     &.kbq-focused {
-        $focus: map.get($tag, focus);
+        @include kbq-tag-state($component, $type, focus);
 
-        @include kbq-tag-state($focus);
-
-        box-shadow: inset 0 0 0 1px map.get($focus, outline), 0 0 0 1px map.get($focus, outline);
+        box-shadow:
+            inset 0 0 0 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline)),
+            0 0 0 1px kbq-css-variable(tag-#{$type}-focus-outline, map.get($component, $type, focus, outline));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($tag, disabled);
-
-        @include kbq-tag-state($disabled);
+        @include kbq-tag-state($component, $type, disabled);
     }
 }
 
 @mixin kbq-tag-theme($theme) {
-    $tag: map.get(map.get($theme, components), tag);
+    $tag: map.get($theme, components, tag);
 
     .kbq-tag {
         &.kbq-theme {
-            @include kbq-tag-color(map.get($tag, theme-fade-on));
+            @include kbq-tag-color($tag, theme-fade-on);
         }
 
         &.kbq-contrast-fade {
-            @include kbq-tag-color(map.get($tag, contrast-fade-on));
+            @include kbq-tag-color($tag, contrast-fade-on);
         }
 
         &.kbq-error {
-            @include kbq-tag-color(map.get($tag, error-fade-on));
+            @include kbq-tag-color($tag, error-fade-on);
         }
     }
 }
 
 @mixin kbq-tag-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tag {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-font-default));
+        @include kbq-typography-css-variables(tag, default);
     }
 
     .kbq-tag-input {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+        @include kbq-typography-css-variables(tag-input, default);
     }
 }
 

package/tags/tag-list.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -26,8 +27,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     min-height: unset;
 
-    padding-top: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
-    padding-bottom: var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical));
+    padding-top: kbq-css-variable(tag-size-padding-vertical);
+    padding-bottom: kbq-css-variable(tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
 }
@@ -41,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     min-width: 0;
 
-    gap: var(--kbq-tag-list-size-content-gap, map.get($tokens, tag-list-size-content-gap));
+    gap: kbq-css-variable(tag-list-size-content-gap);
 
     & .kbq-tag-input {
         max-width: 100%;
@@ -66,11 +67,11 @@ $tokens: meta.module-variables(tokens) !default;
                 var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
                 var(--kbq-form-field-size-border-width, $border-width)
             )
-            var(--kbq-tag-input-size-padding-right, map.get($tokens, tag-input-size-padding-right))
+            kbq-css-variable(tag-input-size-padding-right)
             calc(
                 var(--kbq-tag-input-size-padding-vertical, #{$padding-vertical}) -
                 var(--kbq-form-field-size-border-width, $border-width)
             )
-            var(--kbq-tag-input-size-padding-left, map.get($tokens, tag-input-size-padding-left));
+            kbq-css-variable(tag-input-size-padding-left);
     }
 }

package/tags/tag.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tag {
     position: relative;
 
@@ -14,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
     max-width: 100%;
 
     padding:
-        var(--kbq-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical))
-        var(--kbq-tag-size-padding-horizontal, map.get($tokens, tag-size-padding-horizontal));
+        kbq-css-variable(tag-size-padding-vertical)
+        kbq-css-variable(tag-size-padding-horizontal);
 
     border-radius: 4px;
 
@@ -32,8 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         flex-shrink: 0;
 
-        margin-right:
-            var(--kbq-tag-size-close-button-margin-right, map.get($tokens, tag-size-close-button-margin-right));
+        margin-right: kbq-css-variable(tag-size-close-button-margin-right);
 
         &:hover {
             cursor: pointer;
@@ -49,11 +46,11 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: nowrap;
         overflow: hidden;
 
-        margin: 0 var(--kbq-tag-size-content-gap-horizontal, map.get($tokens, tag-size-content-gap-horizontal));
+        margin: 0 kbq-css-variable(tag-size-content-gap-horizontal);
     }
 
     & .kbq-icon_left {
-        margin-left: var(--kbq-tag-size-icon-margin-left, map.get($tokens, tag-size-icon-margin-left));
+        margin-left: kbq-css-variable(tag-size-icon-margin-left);
     }
 }
 

package/textarea/_textarea-theme.scss

@@ -1,13 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-textarea-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-textarea {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+        @include kbq-typography-css-variables(textarea, default);
     }
 }

package/textarea/textarea.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-textarea {
     display: inline-block;
 
@@ -22,8 +20,8 @@ $tokens: meta.module-variables(tokens) !default;
     box-sizing: border-box;
 
     padding:
-        var(--kbq-textarea-size-padding-vertical, map.get($tokens, textarea-size-padding-vertical))
-        var(--kbq-textarea-size-padding-horizontal, map.get($tokens, textarea-size-padding-horizontal));
+        kbq-css-variable(textarea-size-padding-vertical)
+        kbq-css-variable(textarea-size-padding-horizontal);
 
     -webkit-appearance: none; // Chrome textarea height sizing fix
     vertical-align: bottom; // Chrome textarea height sizing fix
@@ -35,7 +33,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-textarea-resizable {
         resize: vertical;
-        min-height: var(--kbq-textarea-size-min-height, map.get($tokens, textarea-size-min-height));
+        min-height: kbq-css-variable(textarea-size-min-height);
     }
 }
 

package/timepicker/timepicker.scss

@@ -1,16 +1,11 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-timepicker {
-    padding-right: calc(
-        var(--kbq-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
-        var(--kbq-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-    );
+    padding-right: kbq-css-variable(timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-timezone-option-theme($theme) {
@@ -9,34 +10,32 @@
 
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: map.get($timezone, text);
+        color: kbq-css-variable(timezone-text, map.get($timezone, text));
     }
 
     .kbq-timezone-option__cities {
-        color: map.get($timezone, caption);
+        color: kbq-css-variable(timezone-caption, map.get($timezone, caption));
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: map.get($timezone, optgroup-label);
+        color: kbq-css-variable(timezone-optgroup-label, map.get($timezone, optgroup-label));
     }
 }
 
 @mixin kbq-timezone-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-timezone-option__offset {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+        @include kbq-typography-css-variables(timezone-option, offset-text);
     }
 
     .kbq-timezone-option__city {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+        @include kbq-typography-css-variables(timezone-option, text);
     }
 
     .kbq-timezone-option__cities {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+        @include kbq-typography-css-variables(timezone-option, caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-optgroup-label));
+        @include kbq-typography-css-variables(timezone-option, optgroup-label);
     }
 }

package/timezone/timezone-option.component.scss

@@ -1,18 +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-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 
-    padding: var(--kbq-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
-    column-gap: var(--kbq-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+    padding: kbq-css-variable(timezone-option-size-padding);
+    column-gap: kbq-css-variable(timezone-option-size-column-gap);
 }
 
 .kbq-timezone-option__label {
@@ -30,10 +28,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: var(--kbq-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    max-height: kbq-css-variable(timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .kbq-select__panel .kbq-timezone-option {
-    height: var(--kbq-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+    height: kbq-css-variable(timezone-option-size-height);
 }

package/timezone/timezone-select.component.scss

@@ -1,13 +1,12 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
-        padding: map.get($tokens, timezone-option-size-optgroup-label-padding);
+        padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
     }
 }