@koobiq/components 17.4.0 → 17.6.0

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%);
+}

package/tree-select/tree-select.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/common';
 @use '../core/styles/common/select' as *;
 
+@use './tree-select-theme' as *;
+
 .kbq-tree-select {
     @extend %kbq-select-base;
 }
@@ -29,3 +31,6 @@
         cursor: pointer;
     }
 }
+
+@include kbq-tree-select-theme();
+@include kbq-tree-select-typography();