@koobiq/components 17.5.0 → 17.6.1

package/toggle/toggle-tokens.scss

@@ -0,0 +1,142 @@
+.kbq-toggle {
+    --kbq-toggle-size-normal-height: 16px;
+    --kbq-toggle-size-normal-width: 28px;
+    --kbq-toggle-size-normal-horizontal-content-padding: 8px;
+    --kbq-toggle-size-normal-vertical-content-padding: 8px;
+    --kbq-toggle-size-big-height: 16px;
+    --kbq-toggle-size-big-width: 28px;
+    --kbq-toggle-size-big-horizontal-content-padding: 8px;
+    --kbq-toggle-size-big-vertical-content-padding: 8px;
+    --kbq-toggle-font-normal-label-font-size: 14px;
+    --kbq-toggle-font-normal-label-line-height: 20px;
+    --kbq-toggle-font-normal-label-letter-spacing: -0.006em;
+    --kbq-toggle-font-normal-label-font-weight: normal;
+    --kbq-toggle-font-normal-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-toggle-font-normal-label-text-transform: null;
+    --kbq-toggle-font-normal-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-toggle-font-normal-caption-font-size: 12px;
+    --kbq-toggle-font-normal-caption-line-height: 16px;
+    --kbq-toggle-font-normal-caption-letter-spacing: normal;
+    --kbq-toggle-font-normal-caption-font-weight: normal;
+    --kbq-toggle-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-toggle-font-normal-caption-text-transform: null;
+    --kbq-toggle-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-toggle-font-big-label-font-size: 16px;
+    --kbq-toggle-font-big-label-line-height: 24px;
+    --kbq-toggle-font-big-label-letter-spacing: -0.011em;
+    --kbq-toggle-font-big-label-font-weight: normal;
+    --kbq-toggle-font-big-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-toggle-font-big-label-text-transform: null;
+    --kbq-toggle-font-big-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-toggle-font-big-caption-font-size: 14px;
+    --kbq-toggle-font-big-caption-line-height: 20px;
+    --kbq-toggle-font-big-caption-letter-spacing: -0.006em;
+    --kbq-toggle-font-big-caption-font-weight: normal;
+    --kbq-toggle-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-toggle-font-big-caption-text-transform: null;
+    --kbq-toggle-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-toggle-theme-default-border: hsla(229, 15%, 80%, 100%);
+    --kbq-toggle-theme-default-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-default-circle-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toggle-theme-states-hover-border: hsla(229, 15%, 80%, 100%);
+    --kbq-toggle-theme-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-toggle-theme-states-hover-circle-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toggle-theme-states-checked-border: transparent;
+    --kbq-toggle-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
+    --kbq-toggle-theme-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-checked-hover-border: transparent;
+    --kbq-toggle-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
+    --kbq-toggle-theme-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-focused-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-focused-circle-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toggle-theme-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
+    --kbq-toggle-theme-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-checked-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-toggle-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-toggle-theme-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
+    --kbq-toggle-error-default-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-default-background: hsla(7, 97%, 99%, 100%);
+    --kbq-toggle-error-default-circle-background: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-hover-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-hover-background: hsla(7, 97%, 92%, 100%);
+    --kbq-toggle-error-states-hover-circle-background: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-background: hsla(7, 97%, 60%, 100%);
+    --kbq-toggle-error-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-checked-hover-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-hover-background: hsla(7, 97%, 56%, 100%);
+    --kbq-toggle-error-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-focused-background: hsla(7, 97%, 99%, 100%);
+    --kbq-toggle-error-states-focused-circle-background: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-focused-background: hsla(7, 97%, 60%, 100%);
+    --kbq-toggle-error-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-checked-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-toggle-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-toggle-error-states-disabled-circle-background: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-toggle-theme-default-border: hsla(229, 15%, 30%, 100%);
+    --kbq-toggle-theme-default-background: hsla(229, 15%, 12%, 100%);
+    --kbq-toggle-theme-default-circle-background: hsla(229, 15%, 80%, 100%);
+    --kbq-toggle-theme-states-hover-border: hsla(229, 15%, 30%, 100%);
+    --kbq-toggle-theme-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-toggle-theme-states-hover-circle-background: hsla(229, 15%, 80%, 100%);
+    --kbq-toggle-theme-states-checked-border: transparent;
+    --kbq-toggle-theme-states-checked-background: hsla(216, 100%, 50%, 100%);
+    --kbq-toggle-theme-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-checked-hover-border: transparent;
+    --kbq-toggle-theme-states-checked-hover-background: hsla(216, 100%, 45%, 100%);
+    --kbq-toggle-theme-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-focused-background: hsla(229, 15%, 12%, 100%);
+    --kbq-toggle-theme-states-focused-circle-background: hsla(229, 15%, 80%, 100%);
+    --kbq-toggle-theme-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-checked-focused-border: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-checked-focused-background: hsla(216, 100%, 50%, 100%);
+    --kbq-toggle-theme-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-theme-states-checked-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-toggle-theme-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-toggle-theme-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-toggle-theme-states-disabled-circle-background: hsla(229, 15%, 30%, 100%);
+    --kbq-toggle-error-default-border: hsla(7, 97%, 35%, 100%);
+    --kbq-toggle-error-default-background: hsla(7, 97%, 6%, 100%);
+    --kbq-toggle-error-default-circle-background: hsla(7, 97%, 60%, 100%);
+    --kbq-toggle-error-states-hover-border: hsla(7, 97%, 35%, 100%);
+    --kbq-toggle-error-states-hover-background: hsla(7, 97%, 13%, 100%);
+    --kbq-toggle-error-states-hover-circle-background: hsla(7, 97%, 60%, 100%);
+    --kbq-toggle-error-states-checked-border: hsla(7, 97%, 35%, 100%);
+    --kbq-toggle-error-states-checked-background: hsla(7, 97%, 41%, 100%);
+    --kbq-toggle-error-states-checked-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-checked-hover-border: hsla(7, 97%, 35%, 100%);
+    --kbq-toggle-error-states-checked-hover-background: hsla(7, 97%, 42%, 100%);
+    --kbq-toggle-error-states-checked-hover-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-focused-background: hsla(7, 97%, 6%, 100%);
+    --kbq-toggle-error-states-focused-circle-background: hsla(7, 97%, 60%, 100%);
+    --kbq-toggle-error-states-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-focused-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-checked-focused-background: hsla(7, 97%, 41%, 100%);
+    --kbq-toggle-error-states-checked-focused-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-toggle-error-states-checked-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-states-disabled-border: hsla(229, 15%, 50%, 32%);
+    --kbq-toggle-error-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-toggle-error-states-disabled-circle-background: hsla(229, 15%, 30%, 100%);
+}

package/toggle/toggle.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './toggle-theme' as *;
 
 .kbq-toggle {
     display: inline-block;
@@ -97,3 +97,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-toggle:not(.kbq-disabled) {
     cursor: pointer;
 }
+
+@include kbq-toggle-theme();
+@include kbq-toggle-typography();

package/tooltip/_tooltip-theme.scss

@@ -1,53 +1,43 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-// FIXME: @use properties are used, which are most likely not applied. Need to check
-@use '../core/pop-up/pop-up' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-tooltip-color($component, $style-name) {
-    $style: map.get($component, $style-name);
-
-    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
+@mixin kbq-tooltip-color($style-name) {
+    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
 
     & .kbq-tooltip__inner {
-        color: kbq-css-variable(tooltip-#{$style-name}-text, map.get($style, text));
+        color: kbq-css-variable(tooltip-#{$style-name}-text);
 
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
     }
 
     & .kbq-tooltip__arrow {
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background, map.get($style, background));
-        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow, map.get($style, shadow));
+        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
+        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
     }
 }
 
-@mixin kbq-tooltip-theme($theme) {
-    $tooltip: map.get(map.get($theme, components), tooltip);
-
+@mixin kbq-tooltip-theme() {
     .kbq-tooltip.kbq-theme {
-        @include kbq-tooltip-color($tooltip, theme-fade-off);
+        @include kbq-tooltip-color(theme-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast {
-        @include kbq-tooltip-color($tooltip, contrast-fade-off);
+        @include kbq-tooltip-color(contrast-fade-off);
     }
 
     .kbq-tooltip.kbq-contrast-fade {
-        @include kbq-tooltip-color($tooltip, contrast-fade-on);
+        @include kbq-tooltip-color(contrast-fade-on);
     }
 
     .kbq-tooltip.kbq-warning {
-        @include kbq-tooltip-color($tooltip, warning-fade-off);
+        @include kbq-tooltip-color(warning-fade-off);
     }
 
     .kbq-tooltip.kbq-error {
-        @include kbq-tooltip-color($tooltip, error-fade-off);
+        @include kbq-tooltip-color(error-fade-off);
     }
 }
 
-@mixin kbq-tooltip-typography($config) {
+@mixin kbq-tooltip-typography() {
     .kbq-tooltip {
         @include kbq-typography-css-variables(tooltip, default);
 

package/tooltip/tooltip-tokens.scss

@@ -0,0 +1,63 @@
+.kbq-tooltip {
+    --kbq-tooltip-size-max-width: 300px;
+    --kbq-tooltip-size-border-radius: 8px;
+    --kbq-tooltip-size-padding-horizontal: 12px;
+    --kbq-tooltip-size-padding-vertical: 8px;
+    --kbq-tooltip-size-arrow-size: 12px;
+    --kbq-tooltip-font-default-font-size: 12px;
+    --kbq-tooltip-font-default-line-height: 16px;
+    --kbq-tooltip-font-default-letter-spacing: normal;
+    --kbq-tooltip-font-default-font-weight: normal;
+    --kbq-tooltip-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-tooltip-font-default-text-transform: null;
+    --kbq-tooltip-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-tooltip-font-title-font-size: 12px;
+    --kbq-tooltip-font-title-line-height: 16px;
+    --kbq-tooltip-font-title-letter-spacing: normal;
+    --kbq-tooltip-font-title-font-weight: normal;
+    --kbq-tooltip-font-title-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-tooltip-font-title-text-transform: null;
+    --kbq-tooltip-font-title-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-tooltip-contrast-fade-on-background: hsla(229, 15%, 100%, 100%);
+    --kbq-tooltip-contrast-fade-on-text: hsla(229, 15%, 15%, 100%);
+    --kbq-tooltip-contrast-fade-on-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-tooltip-contrast-fade-off-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tooltip-contrast-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-contrast-fade-off-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-tooltip-theme-fade-off-background: hsla(216, 100%, 50%, 100%);
+    --kbq-tooltip-theme-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-theme-fade-off-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-tooltip-warning-fade-off-background: hsla(38, 100%, 50%, 100%);
+    --kbq-tooltip-warning-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-warning-fade-off-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-tooltip-error-fade-off-background: hsla(7, 97%, 60%, 100%);
+    --kbq-tooltip-error-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-error-fade-off-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-tooltip-contrast-fade-on-background: hsla(229, 15%, 15%, 100%);
+    --kbq-tooltip-contrast-fade-on-text: hsla(229, 15%, 80%, 100%);
+    --kbq-tooltip-contrast-fade-on-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-tooltip-contrast-fade-off-background: hsla(229, 15%, 25%, 100%);
+    --kbq-tooltip-contrast-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-contrast-fade-off-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-tooltip-theme-fade-off-background: hsla(216, 100%, 50%, 100%);
+    --kbq-tooltip-theme-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-theme-fade-off-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-tooltip-warning-fade-off-background: hsla(38, 100%, 50%, 100%);
+    --kbq-tooltip-warning-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-warning-fade-off-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-tooltip-error-fade-off-background: hsla(7, 97%, 60%, 100%);
+    --kbq-tooltip-error-fade-off-text: hsla(0, 0%, 100%, 100%);
+    --kbq-tooltip-error-fade-off-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+}

package/tooltip/tooltip.scss

@@ -5,6 +5,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './tooltip-theme' as *;
+
 $trigger-margin: 8px;
 $trigger-margin_without-arrow: 4px;
 
@@ -33,6 +35,9 @@ $trigger-margin_without-arrow: 4px;
     }
 }
 
+@include kbq-tooltip-theme();
+@include kbq-tooltip-typography();
+
 .kbq-tooltip__arrow {
     position: absolute;
 

package/tree/_tree-theme.scss

@@ -5,60 +5,53 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-tree-option($component, $state-name) {
-    $state: map.get($component, $state-name);
-
-    background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
+@mixin kbq-tree-option($state-name) {
+    background: kbq-css-variable(tree-#{$state-name}-container-background);
 
     .kbq-option-text {
-        color: kbq-css-variable(tree-#{$state-name}-text-color, map.get($state, text));
+        color: kbq-css-variable(tree-#{$state-name}-text-color);
     }
 
     .kbq-tree-node-toggle .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color, map.get($state, tree-toggle));
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(tree-#{$state-name}-action-button-color, map.get($state, action-button));
+        color: kbq-css-variable(tree-#{$state-name}-action-button-color);
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(tree-#{$state-name}-caption-color, map.get($state, caption));
+        color: kbq-css-variable(tree-#{$state-name}-caption-color);
     }
 }
 
-@mixin kbq-tree-theme($theme) {
+@mixin kbq-tree-theme() {
     .kbq-tree-selection:focus {
         outline: none;
     }
 
     .kbq-tree-option {
-        $tree-item: map.get($theme, components, tree-item);
-
-        @include kbq-tree-option($tree-item, default);
+        @include kbq-tree-option(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option($tree-item, states-hover);
+            @include kbq-tree-option(states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: kbq-css-variable(
-                tree-states-focused-focus-outline-color,
-                map.get($tree-item, states-focused, focus-outline)
-            );
+            border-color: kbq-css-variable(tree-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {
-            @include kbq-tree-option($tree-item, states-selected);
+            @include kbq-tree-option(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option($tree-item, states-selected-hover);
+                @include kbq-tree-option(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-tree-option($tree-item, states-disabled);
+            @include kbq-tree-option(states-disabled);
 
             & .kbq-icon {
                 cursor: default;
@@ -67,7 +60,7 @@
     }
 }
 
-@mixin kbq-tree-typography($config) {
+@mixin kbq-tree-typography() {
     .kbq-tree-option {
         @include kbq-typography-css-variables(tree, text);
     }

package/tree/toggle.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './tree-theme' as *;
+
 .kbq-tree-node-toggle {
     display: flex;
     align-items: center;
@@ -30,3 +32,6 @@
         cursor: default;
     }
 }
+
+@include kbq-tree-theme();
+@include kbq-tree-typography();

package/tree/tree-option.scss

@@ -2,11 +2,8 @@
 @use 'sass:map';
 
 @use '../core/styles/common';
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tree-option {
     @include common.kbq-no-select;
 
@@ -39,8 +36,6 @@ $tokens: meta.module-variables(tokens) !default;
     gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
-        $tokens: meta.module-variables(tokens) !default;
-
         @include common.kbq-line-wrapper-base();
         display: inline-block;
 

package/tree/tree-selection.scss

@@ -1,3 +1,8 @@
+@use './tree-theme' as *;
+
 .kbq-tree-selection {
     display: block;
 }
+
+@include kbq-tree-theme();
+@include kbq-tree-typography();

package/tree/tree-tokens.scss

@@ -0,0 +1,94 @@
+.kbq-tree,
+.kbq-tree-selection {
+    --kbq-tree-size-indent-level: 24px;
+    --kbq-tree-size-container-padding-right: 8px;
+    --kbq-tree-size-container-padding-vertical: 4px;
+    --kbq-tree-size-container-content-gap-horizontal: 8px;
+    --kbq-tree-size-container-content-gap-vertical: 0px;
+    --kbq-tree-size-container-focus-outline-width: 2px;
+    --kbq-tree-size-text-padding-vertical: 2px;
+    --kbq-tree-font-text-font-size: 14px;
+    --kbq-tree-font-text-line-height: 20px;
+    --kbq-tree-font-text-letter-spacing: -0.006em;
+    --kbq-tree-font-text-font-weight: normal;
+    --kbq-tree-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-tree-font-text-text-transform: null;
+    --kbq-tree-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-tree-font-caption-font-size: 12px;
+    --kbq-tree-font-caption-line-height: 16px;
+    --kbq-tree-font-caption-letter-spacing: normal;
+    --kbq-tree-font-caption-font-weight: normal;
+    --kbq-tree-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-tree-font-caption-text-transform: null;
+    --kbq-tree-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-tree-default-container-background: transparent;
+    --kbq-tree-default-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-default-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-default-tree-toggle-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-default-action-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-default-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-tree-states-hover-container-background: hsla(229, 15%, 50%, 8%);
+    --kbq-tree-states-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-hover-tree-toggle-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-hover-action-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-hover-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-tree-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-tree-states-selected-container-background: hsla(216, 100%, 94%, 100%);
+    --kbq-tree-states-selected-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-selected-tree-toggle-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-selected-action-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-selected-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
+    --kbq-tree-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-tree-states-selected-hover-tree-toggle-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-selected-hover-action-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-selected-hover-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-tree-states-disabled-container-background: transparent;
+    --kbq-tree-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tree-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tree-states-disabled-tree-toggle-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tree-states-disabled-action-button-color: hsla(229, 15%, 15%, 32%);
+    --kbq-tree-states-disabled-caption-color: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-tree-default-container-background: transparent;
+    --kbq-tree-default-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-default-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-default-tree-toggle-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-default-action-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-default-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-hover-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-tree-states-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-hover-tree-toggle-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-hover-action-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-hover-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-tree-states-selected-container-background: hsla(216, 100%, 18%, 100%);
+    --kbq-tree-states-selected-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-selected-tree-toggle-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-selected-action-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-selected-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
+    --kbq-tree-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-tree-states-selected-hover-tree-toggle-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-selected-hover-action-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-tree-states-selected-hover-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-tree-states-disabled-container-background: transparent;
+    --kbq-tree-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
+    --kbq-tree-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tree-states-disabled-tree-toggle-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tree-states-disabled-action-button-color: hsla(229, 15%, 30%, 100%);
+    --kbq-tree-states-disabled-caption-color: hsla(229, 15%, 40%, 100%);
+}

package/tree/tree.scss

@@ -1,3 +1,8 @@
+@use './tree-theme' as *;
+
 .kbq-tree {
     display: block;
 }
+
+@include kbq-tree-theme();
+@include kbq-tree-typography();

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

@@ -1,46 +1,39 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@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);
-
-    $select-panel: map.get($theme, components, select-panel);
-    $divider: map.get($theme, components, divider);
-
+@mixin kbq-tree-select-theme() {
     .kbq-tree-select {
-        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+        color: kbq-css-variable(foreground-contrast);
 
         &.ng-invalid {
-            color: kbq-css-variable(error-default, map.get($theme, error, default));
+            color: kbq-css-variable(error-default);
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+            color: kbq-css-variable(foreground-text-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+        color: kbq-css-variable(foreground-text-disabled);
     }
 
     .kbq-tree-select__panel {
-        box-shadow: kbq-css-variable(select-panel-dropdown-shadow, map.get($select-panel, shadow));
-        background: kbq-css-variable(select-panel-dropdown-background, map.get($select-panel, background));
+        box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
+        background: kbq-css-variable(select-panel-dropdown-background);
 
         & .kbq-select__footer {
-            border-color: kbq-css-variable(divider-color, map.get($divider, color));
+            border-color: kbq-css-variable(divider-color);
         }
     }
 }
 
-@mixin kbq-tree-select-typography($config) {
+@mixin kbq-tree-select-typography() {
     .kbq-tree-select,
     .kbq-tree-select__panel {
         @include kbq-typography-css-variables(select-panel, default);

package/tree-select/tree-select-tokens.scss

@@ -0,0 +1,59 @@
+.kbq-tree-select {
+    --kbq-select-panel-size-border-radius: 8px;
+    --kbq-select-panel-size-max-height: 256px;
+    --kbq-select-panel-font-default-font-size: 14px;
+    --kbq-select-panel-font-default-line-height: 20px;
+    --kbq-select-panel-font-default-letter-spacing: -0.006em;
+    --kbq-select-panel-font-default-font-weight: normal;
+    --kbq-select-panel-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-select-panel-font-default-text-transform: null;
+    --kbq-select-panel-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-error-default: hsla(7, 97%, 50%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-default-border: hsla(7, 97%, 45%, 100%);
+    --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-error-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-checkbox-error-default-background: hsla(7, 97%, 99%, 100%);
+    --kbq-checkbox-error-default-caption: hsla(229, 15%, 50%, 100%);
+    --kbq-divider-color: hsla(229, 15%, 6%, 12%);
+    --kbq-radio-error-default-outer-circle-border: hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-default-outer-circle-background: hsla(7, 97%, 99%, 100%);
+    --kbq-radio-error-default-inner-circle-background: transparent;
+    --kbq-select-panel-dropdown-background: hsla(229, 15%, 100%, 100%);
+    --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
+        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-toggle-error-default-border: hsla(7, 97%, 45%, 100%);
+    --kbq-toggle-error-default-background: hsla(7, 97%, 99%, 100%);
+    --kbq-toggle-error-default-circle-background: hsla(7, 97%, 45%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-error-default: hsla(7, 97%, 50%, 100%);
+    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
+    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 60%, 100%);
+    --kbq-checkbox-error-default-border: hsla(7, 97%, 35%, 100%);
+    --kbq-checkbox-error-default-color: hsla(0, 0%, 100%, 100%);
+    --kbq-checkbox-error-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-checkbox-error-default-background: hsla(7, 97%, 6%, 100%);
+    --kbq-checkbox-error-default-caption: hsla(229, 15%, 60%, 100%);
+    --kbq-divider-color: hsla(229, 15%, 22%, 100%);
+    --kbq-radio-error-default-outer-circle-border: hsla(7, 97%, 35%, 100%);
+    --kbq-radio-error-default-outer-circle-background: hsla(7, 97%, 6%, 100%);
+    --kbq-radio-error-default-inner-circle-background: transparent;
+    --kbq-select-panel-dropdown-background: hsla(229, 15%, 15%, 100%);
+    --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-toggle-error-default-border: hsla(7, 97%, 35%, 100%);
+    --kbq-toggle-error-default-background: hsla(7, 97%, 6%, 100%);
+    --kbq-toggle-error-default-circle-background: hsla(7, 97%, 60%, 100%);
+}