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

package/scrollbar/_scrollbar-component-theme.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use '../core/styles/common/tokens' as *;
+
 
 @mixin kbq-scrollbar-component-theme($theme) {
     $scrollbar: map.get(map.get($theme, components), scrollbar);
@@ -7,44 +9,39 @@
         .os-scrollbar {
             .os-scrollbar-handle {
                 &::before {
-                    border-color: map.get($scrollbar, default);
-                    background-color: map.get($scrollbar, default);
+                    border-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
+                    background-color: kbq-css-variable(scrollbar-default, map.get($scrollbar, default));
                 }
 
                 &:hover {
                     &::before {
-                        border-color: map.get($scrollbar, hover);
-                        background-color: map.get($scrollbar, hover);
+                        border-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
+                        background-color: kbq-css-variable(scrollbar-hover, map.get($scrollbar, hover));
                     }
                 }
 
                 &:active {
                     &::before {
-                        border-color: map.get($scrollbar, active);
-                        background-color: map.get($scrollbar, active);
+                        border-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
+                        background-color: kbq-css-variable(scrollbar-active, map.get($scrollbar, active));
                     }
                 }
             }
 
             /* stylelint-disable no-descending-specificity */
             .os-scrollbar-track, .os-scrollbar-handle {
-                $track: map.get($scrollbar, track);
-                $default: map.get($track, default);
-
                 border-style: solid;
-                border-color: $default !important;
-                background-color: $default;
+                border-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default)) !important;
+                background-color: kbq-css-variable(scrollbar-track-default, map.get($scrollbar, track, default));
 
                 &:hover {
-                    $hover: map.get($track, hover);
-                    border-color: $hover;
-                    background: $hover;
+                    border-color: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
+                    background: kbq-css-variable(scrollbar-track-hover, map.get($scrollbar, track, hover));
                 }
 
                 &:active {
-                    $active: map.get($track, active);
-                    border-color: $active;
-                    background: $active;
+                    border-color: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
+                    background: kbq-css-variable(scrollbar-track-active, map.get($scrollbar, track, active));
                 }
             }
         }

package/scrollbar/scrollbar.component.scss

@@ -1,26 +1,16 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
 
 /* stylelint-disable no-descending-specificity */
 .kbq-scrollbar-component {
-    $scrollbar-size-thumb-width: var(--kbq-scrollbar-size-thumb-width, map.get($tokens, scrollbar-size-thumb-width));
-    $padding-vertical: var(
-        --kbq-scrollbar-size-track-padding-vertical,
-        map.get($tokens, scrollbar-size-track-padding-vertical)
-    );
-    $padding-horizontal: var(
-        --kbq-scrollbar-size-track-padding-horizontal,
-        map.get($tokens, scrollbar-size-track-padding-horizontal)
-    );
-    $kbq-scrollbar-track-width: var(
-        --kbq-scrollbar-size-track-dimension,
-        map.get($tokens, scrollbar-size-track-dimension)
-    );
-    $thumb-min-height: var(--kbq-scrollbar-size-thumb-min-size, map.get($tokens, scrollbar-size-thumb-min-size));
+    $scrollbar-size-thumb-width: kbq-css-variable(scrollbar-size-thumb-width);
+    $padding-vertical: kbq-css-variable(scrollbar-size-track-padding-vertical);
+    $padding-horizontal: kbq-css-variable(scrollbar-size-track-padding-horizontal);
+    $kbq-scrollbar-track-width: kbq-css-variable(scrollbar-size-track-dimension);
+    $thumb-min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
     $border-width: calc(($kbq-scrollbar-track-width - $scrollbar-size-thumb-width) / 4);
 
     .os-scrollbar-vertical {
@@ -62,10 +52,7 @@ $tokens: meta.module-variables(tokens) !default;
     .os-scrollbar {
         .os-scrollbar-handle, .os-scrollbar-handle::before, .os-scrollbar-track {
             box-sizing: border-box;
-            border-radius: var(
-                --kbq-scrollbar-size-thumb-inset-border-radius,
-                map.get($tokens, scrollbar-size-thumb-border-radius)
-            );
+            border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
         }
 
         .os-scrollbar-track {

package/select/_select-theme.scss

@@ -4,6 +4,7 @@
 @use '../core/styles/common/popup' as *;
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-select-theme($theme) {
@@ -11,53 +12,51 @@
 
     $error: map.get($theme, error);
 
-    $select-panel: map.get(map.get($theme, components), select-panel);
-    $divider: map.get(map.get($theme, components), divider);
+    $select-panel: map.get($theme, components, select-panel);
+    $divider: map.get($theme, components, divider);
 
     .kbq-select {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.ng-invalid {
-            color: kbq-color($error);
+            color: kbq-css-variable(error-default, kbq-color($error));
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 
     .kbq-select__panel {
-        box-shadow: map.get($select-panel, shadow);
-        background: map.get($select-panel, background);
+        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
 
         & .kbq-select__footer {
-            border-color: map.get($divider, color);
+            border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }
 
     .kbq-select__search-container {
-        border-bottom-color: map.get($divider, color);
+        border-bottom-color: kbq-css-variable(divider-color, map.get($divider, color));
     }
 
     .kbq-select__no-options-message {
-        color: map.get($foreground, text-less-contrast);
+        color: kbq-css-variable(foreground-text-less-contrast, map.get($foreground, text-less-contrast));
     }
 }
 
 @mixin kbq-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-select {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-font-default));
+        @include kbq-typography-css-variables(select, default);
     }
 
     .kbq-select__panel {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include kbq-typography-css-variables(select-panel, default);
     }
 }

package/select/select.scss

@@ -3,10 +3,7 @@
 
 @use '../core/styles/common/select' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../core/styles/common/tokens' as *;
 
 
 .kbq-select {
@@ -25,12 +22,8 @@ $tokens: meta.module-variables(tokens) !default;
     @extend %kbq-select-content;
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
-        min-height: calc(
-            var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
-        );
-        max-height: calc(
-            var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
-        );
+        min-height: kbq-css-variable(select-panel-size-max-height);
+        max-height: kbq-css-variable(select-panel-size-max-height);
 
         &.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
             max-width: 100%;

package/sidepanel/_sidepanel-theme.scss

@@ -2,36 +2,35 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-sidepanel-theme($theme) {
-    $sidepanel: map.get(map.get($theme, components), sidepanel);
+    $sidepanel: map.get($theme, components, sidepanel);
 
     .kbq-sidepanel-title {
-        color: map.get($sidepanel, header-text);
+        color: kbq-css-variable(sidepanel-header-text, map.get($sidepanel, header-text));
     }
 
     .kbq-sidepanel-content {
-        background-color: map.get($sidepanel, background);
-        color: map.get($sidepanel, content-text);
+        background-color: kbq-css-variable(sidepanel-background, map.get($sidepanel, background));
+        color: kbq-css-variable(sidepanel-content-text, map.get($sidepanel, content-text));
     }
 
     .kbq-sidepanel-container_shadowed {
         .kbq-sidepanel-content {
-            box-shadow: map.get($sidepanel, box-shadow);
+            box-shadow: kbq-css-variable(sidepanel-box-shadow, map.get($sidepanel, box-shadow));
         }
     }
 }
 
 @mixin kbq-sidepanel-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-header));
+        @include kbq-typography-css-variables(sidepanel, header);
     }
 
     .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, sidepanel-font-content));
+        @include kbq-typography-css-variables(sidepanel, content);
     }
 }

package/sidepanel/sidepanel.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -39,18 +39,18 @@ $tokens: meta.module-variables(tokens) !default;
         top: 0;
 
         &.kbq-sidepanel_small {
-            width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
-            max-width: var(--kbq-sidepanel-size-small-width, map.get($tokens, sidepanel-size-small-width));
+            width: kbq-css-variable(sidepanel-size-small-width);
+            max-width: kbq-css-variable(sidepanel-size-small-width);
         }
 
         &.kbq-sidepanel_medium {
-            width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
-            max-width: var(--kbq-sidepanel-size-medium-width, map.get($tokens, sidepanel-size-medium-width));
+            width: kbq-css-variable(sidepanel-size-medium-width);
+            max-width: kbq-css-variable(sidepanel-size-medium-width);
         }
 
         &.kbq-sidepanel_large {
-            width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
-            max-width: var(--kbq-sidepanel-size-large-width, map.get($tokens, sidepanel-size-large-width));
+            width: kbq-css-variable(sidepanel-size-large-width);
+            max-width: kbq-css-variable(sidepanel-size-large-width);
         }
 
         .kbq-sidepanel-indent {
@@ -128,15 +128,13 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 0 0 auto;
 
     padding:
-        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
-        var(--kbq-sidepanel-size-header-padding-right, map.get($tokens, sidepanel-size-header-padding-right))
-        var(--kbq-sidepanel-size-header-padding-vertical, map.get($tokens, sidepanel-size-header-padding-vertical))
-        var(--kbq-sidepanel-size-header-padding-left, map.get($tokens, sidepanel-size-header-padding-left));
+        kbq-css-variable(sidepanel-size-header-padding-vertical)
+        kbq-css-variable(sidepanel-size-header-padding-right)
+        kbq-css-variable(sidepanel-size-header-padding-vertical)
+        kbq-css-variable(sidepanel-size-header-padding-left);
 
     .kbq-sidepanel-close {
-        margin-left: var(
-            --kbq-sidepanel-size-close-button-margin-left, map.get($tokens, sidepanel-size-close-button-margin-left)
-        );
+        margin-left: kbq-css-variable(sidepanel-size-close-button-margin-left);
     }
 }
 
@@ -153,17 +151,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     min-height: 0;
 
-    padding-right: var(
-        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(sidepanel-size-content-padding-horizontal);
 
-    padding-left: var(
-        --kbq-sidepanel-size-content-padding-horizontal, map.get($tokens, sidepanel-size-content-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(sidepanel-size-content-padding-horizontal);
 
-    padding-bottom: var(
-        --kbq-sidepanel-size-content-padding-bottom, map.get($tokens, sidepanel-size-content-padding-bottom)
-    );
+    padding-bottom: kbq-css-variable(sidepanel-size-content-padding-bottom);
 }
 
 .kbq-sidepanel-footer {
@@ -175,9 +167,9 @@ $tokens: meta.module-variables(tokens) !default;
     flex: 0 0 auto;
 
     padding:
-        var(--kbq-sidepanel-size-footer-padding-top, map.get($tokens, sidepanel-size-footer-padding-top))
-        var(--kbq-sidepanel-size-footer-padding-horizontal, map.get($tokens, sidepanel-size-footer-padding-horizontal))
-        var(--kbq-sidepanel-size-footer-padding-bottom, map.get($tokens, sidepanel-size-footer-padding-bottom));
+        kbq-css-variable(sidepanel-size-footer-padding-top)
+        kbq-css-variable(sidepanel-size-footer-padding-horizontal)
+        kbq-css-variable(sidepanel-size-footer-padding-bottom);
 
     .kbq-sidepanel-actions {
         display: flex;
@@ -193,9 +185,6 @@ $tokens: meta.module-variables(tokens) !default;
             justify-content: flex-end;
         }
 
-        gap: var(
-            --kbq-sidepanel-size-footer-content-gap-horizontal,
-            map.get($tokens, sidepanel-size-footer-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(sidepanel-size-footer-content-gap-horizontal);
     }
 }

package/splitter/_splitter-theme.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
 
-@use '../core/styles/theming/theming' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-splitter-theme($theme) {
-    $background: map.get(map.get($theme, states), background);
+    $background: map.get($theme, states, background);
 
     .kbq-gutter {
         cursor: col-resize;
@@ -20,7 +20,7 @@
 
         // todo
         &[disabled] {
-            background-color: kbq-color($background, disabled);
+            background-color: kbq-css-variable(background-disabled, map.get($background, disabled));
 
             cursor: default;
         }

package/table/_table-theme.scss

@@ -7,27 +7,28 @@
 
 @mixin kbq-table-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $states-background: map.get(map.get($theme, states), background);
+    $states-background: map.get($theme, states, background);
     $line: map.get($theme, line);
 
     .kbq-table {
         & > thead {
-            color: map.get($foreground, contrast-secondary);
+            color: kbq-css-variable(foreground-contrast-secondary, map.get($foreground, contrast-secondary));
 
             & > tr > th {
-                border-bottom-color: map.get($line, contrast-fade);
+                border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
             }
         }
 
         & > tbody {
             & > tr {
                 &:hover td {
-                    background-color: map.get($states-background, transparent-hover);
+                    background-color: kbq-css-variable(
+                        states-background-transparent-hover, map.get($states-background, transparent-hover));
                 }
 
                 & > th,
                 & > td {
-                    color: map.get($foreground, contrast);
+                    color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
                 }
             }
         }
@@ -36,7 +37,7 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: map.get($line, contrast-fade);
+                    border-bottom-color: kbq-css-variable(line-contrast-fade, map.get($line, contrast-fade));
                 }
             }
         }
@@ -50,7 +51,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles($config, getToken(table-font-header));
+            @include kbq-typography-css-variables(table, header);
         }
 
         & > tbody {
@@ -58,7 +59,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles($config, getToken(table-font-body));
+            @include kbq-typography-css-variables(table, body);
         }
     }
 }

package/table/table.scss

@@ -16,10 +16,10 @@ $tokens: meta.module-variables(tokens) !default;
             & > th,
             & > td {
                 padding: {
-                    top: cssVar(table-size-row-padding-vertical);
-                    right: cssVar(table-size-row-padding-horizontal);
-                    bottom: cssVar(table-size-row-padding-vertical);
-                    left: cssVar(table-size-row-padding-horizontal);
+                    top: kbq-css-variable(table-size-row-padding-vertical);
+                    right: kbq-css-variable(table-size-row-padding-horizontal);
+                    bottom: kbq-css-variable(table-size-row-padding-vertical);
+                    left: kbq-css-variable(table-size-row-padding-horizontal);
                 };
 
                 vertical-align: baseline;
@@ -30,21 +30,21 @@ $tokens: meta.module-variables(tokens) !default;
 
     & > thead {
         & > tr > th {
-            border-bottom-width: cssVar(table-size-border-width);
+            border-bottom-width: kbq-css-variable(table-size-border-width);
             border-bottom-style: solid;
         }
     }
 
     .kbq-table-cell_has-button {
-        padding-top: cssVar(size-xxs);
-        padding-bottom: cssVar(size-xxs);
+        padding-top: kbq-css-variable(size-xxs);
+        padding-bottom: kbq-css-variable(size-xxs);
     }
 }
 .kbq-table.kbq-table_bordered {
     & > tbody > tr {
         & th,
         & td {
-            border-bottom-width: cssVar(table-size-border-width);
+            border-bottom-width: kbq-css-variable(table-size-border-width);
             border-bottom-style: solid;
         }
     }
@@ -53,13 +53,13 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-table:not(.kbq-table_bordered) {
     & > tbody > tr {
         & > td:first-child {
-            border-top-left-radius: cssVar(size-m);
-            border-bottom-left-radius: cssVar(size-m);
+            border-top-left-radius: kbq-css-variable(size-m);
+            border-bottom-left-radius: kbq-css-variable(size-m);
         }
 
         & > td:last-child {
-            border-top-right-radius: cssVar(size-m);
-            border-bottom-right-radius: cssVar(size-m);
+            border-top-right-radius: kbq-css-variable(size-m);
+            border-bottom-right-radius: kbq-css-variable(size-m);
         }
 
         &:first-child {

package/tabs/_tabs-common.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -36,12 +37,10 @@ $tokens: meta.module-variables(tokens) !default;
         );
 
     border: {
-        width: var(--kbq-tabs-size-tab-item-focus-outline-width, $border-width);
+        width: kbq-css-variable(tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: var(
-            --kbq-tabs-size-tab-item-border-radius, map.get($tokens, tabs-size-tab-item-border-radius)
-        );
+        radius: kbq-css-variable(tabs-size-tab-item-border-radius);
     }
 
     outline: none;
@@ -61,9 +60,7 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-tab-label__content {
         display: flex;
 
-        gap: var(
-            --kbq-tabs-size-tab-item-content-gap-horizontal, map.get($tokens, tabs-size-tab-item-content-gap-horizontal)
-        );
+        gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
     }
 
     &.kbq-tab-label_vertical {