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

package/tree/tree-option.scss

@@ -3,6 +3,7 @@
 
 @use '../core/styles/common';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -25,7 +26,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     word-wrap: break-word;
 
-    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -42,9 +43,7 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-tree-size-container-focus-outline-width, $outline-width)
     );
 
-    gap: var(
-        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         $tokens: meta.module-variables(tokens) !default;
@@ -54,8 +53,8 @@ $tokens: meta.module-variables(tokens) !default;
 
         @include common.kbq-truncate-line();
 
-        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-top: kbq-css-variable(list-size-text-padding-vertical);
+        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
     }
 
     &:focus {

package/tree-select/_tree-select-theme.scss

@@ -4,48 +4,46 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/popup' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $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-tree-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, map.get($theme, error, default));
         }
 
         &.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-tree-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-tree-select__footer {
-            border-color: map.get($divider, color);
+            border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }
 }
 
 @mixin kbq-tree-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-select,
     .kbq-tree-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/tree-select/tree-select.scss

@@ -4,10 +4,6 @@
 @use '../core/styles/common';
 @use '../core/styles/common/select' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-tree-select {
     @extend %kbq-select-base;

package/core/styles/_variables.scss

@@ -1 +0,0 @@
-