@koobiq/components 17.6.0 → 17.7.0

package/alert/alert.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./alert.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
 export declare class KbqAlertModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAlertModule, [typeof i1.KbqAlert, typeof i1.KbqAlertTitle, typeof i1.KbqAlertCloseButton, typeof i1.KbqAlertControl], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqAlert, typeof i1.KbqAlertTitle, typeof i1.KbqAlertCloseButton, typeof i1.KbqAlertControl]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAlertModule, [typeof i1.KbqAlert, typeof i1.KbqAlertTitle, typeof i1.KbqAlertCloseButton, typeof i1.KbqAlertControl], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqAlert, typeof i1.KbqAlertTitle, typeof i1.KbqAlertCloseButton, typeof i1.KbqAlertControl]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqAlertModule>;
 }

package/autocomplete/autocomplete.module.d.ts

@@ -7,6 +7,6 @@ import * as i5 from "@angular/cdk/overlay";
 import * as i6 from "@angular/common";
 export declare class KbqAutocompleteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, [typeof i1.KbqAutocomplete, typeof i2.KbqAutocompleteTrigger, typeof i3.KbqAutocompleteOrigin], [typeof i4.KbqOptionModule, typeof i5.OverlayModule, typeof i4.KbqCommonModule, typeof i6.CommonModule], [typeof i1.KbqAutocomplete, typeof i4.KbqOptionModule, typeof i2.KbqAutocompleteTrigger, typeof i3.KbqAutocompleteOrigin, typeof i4.KbqCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAutocompleteModule, [typeof i1.KbqAutocomplete, typeof i2.KbqAutocompleteTrigger, typeof i3.KbqAutocompleteOrigin], [typeof i4.KbqOptionModule, typeof i5.OverlayModule, typeof i4.KbqCommonModule, typeof i6.NgClass], [typeof i1.KbqAutocomplete, typeof i4.KbqOptionModule, typeof i2.KbqAutocompleteTrigger, typeof i3.KbqAutocompleteOrigin, typeof i4.KbqCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
 }

package/badge/badge-tokens.scss

@@ -100,7 +100,7 @@
     --kbq-badge-outline-fade-on-theme-icon: hsla(216, 100%, 50%, 100%);
     --kbq-badge-outline-fade-on-contrast-background: transparent;
     --kbq-badge-outline-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
-    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 70%, 100%);
+    --kbq-badge-outline-fade-on-contrast-border: hsla(229, 15%, 80%, 100%);
     --kbq-badge-outline-fade-on-contrast-caption: hsla(229, 15%, 15%, 100%);
     --kbq-badge-outline-fade-on-contrast-icon: hsla(229, 15%, 60%, 100%);
     --kbq-badge-outline-fade-on-success-background: transparent;

package/badge/badge.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./badge.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
 export declare class KbqBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler], [typeof i2.A11yModule, typeof i3.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
 }

package/button/button-tokens.scss

@@ -15,7 +15,6 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
     --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
     --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
     --kbq-button-filled-contrast-fade-off-background: hsla(229, 15%, 25%, 100%);
@@ -65,7 +64,7 @@
     --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: hsla(216, 100%, 50%, 100%);
     --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: hsla(216, 100%, 50%, 100%);
     --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
-    --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-theme-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
     --kbq-button-outline-theme-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
     --kbq-button-outline-theme-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
     --kbq-button-outline-theme-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);
@@ -90,7 +89,7 @@
     --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: hsla(229, 15%, 15%, 100%);
     --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: hsla(229, 15%, 15%, 100%);
     --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
-    --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 15%, 32%);
+    --kbq-button-outline-contrast-fade-on-states-disabled-border: hsla(229, 15%, 50%, 32%);
     --kbq-button-outline-contrast-fade-on-states-disabled-foreground: hsla(229, 15%, 15%, 32%);
     --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: hsla(229, 15%, 15%, 32%);
     --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: hsla(229, 15%, 15%, 32%);

package/button/button.module.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./button.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
-import * as i5 from "@angular/cdk/observers";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@angular/cdk/platform";
+import * as i4 from "@angular/cdk/observers";
 export declare class KbqButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule, typeof i5.ObserversModule], [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.ObserversModule], [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
 }

package/code-block/code-block.module.d.ts

@@ -1,14 +1,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./code-block.component";
 import * as i2 from "./actionbar.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@koobiq/components/button";
-import * as i5 from "@koobiq/components/tooltip";
-import * as i6 from "@koobiq/components/icon";
-import * as i7 from "ngx-highlightjs";
-import * as i8 from "@koobiq/components/tabs";
+import * as i3 from "@koobiq/components/button";
+import * as i4 from "@koobiq/components/tooltip";
+import * as i5 from "@koobiq/components/icon";
+import * as i6 from "ngx-highlightjs";
+import * as i7 from "@koobiq/components/tabs";
 export declare class KbqCodeBlockModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.CommonModule, typeof i4.KbqButtonModule, typeof i5.KbqToolTipModule, typeof i6.KbqIconModule, typeof i7.HighlightModule, typeof i8.KbqTabsModule], [typeof i1.KbqCodeBlockComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.HighlightModule, typeof i7.KbqTabsModule], [typeof i1.KbqCodeBlockComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }

package/core/forms/_forms-theme.scss

@@ -1,30 +1,22 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../styles/typography/typography-utils' as *;
-@use './forms' as *;
 @use '../styles/common/tokens' as *;
 
-@mixin kbq-forms-theme($theme) {
-    @include kbq-form-geometry(map.get($theme, tokens));
+@use './forms' as *;
+@use './forms-tokens';
 
-    $forms: map.get(map.get($theme, components), forms);
+@mixin kbq-forms-theme() {
+    @include kbq-form-geometry();
 
     .kbq-form__label {
-        color: kbq-css-variable(forms-label, map.get($forms, label));
+        color: kbq-css-variable(forms-label);
     }
 
     .kbq-form__legend {
-        color: kbq-css-variable(forms-legend, map.get($forms, legend));
+        color: kbq-css-variable(forms-legend);
     }
 }
 
-@mixin kbq-forms-typography($config) {
+@mixin kbq-forms-typography() {
     .kbq-form__label {
         @include kbq-typography-css-variables(forms, label);
     }
-
-    //.kbq-form__legend {
-    //    @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
-    //}
 }

package/core/forms/_forms.scss

@@ -1,12 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../styles/common/vendor-prefixes';
-@use '../styles/typography/typography' as *;
-@use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-@mixin kbq-form-geometry($tokens) {
+@mixin kbq-form-geometry() {
     .kbq-form {
         display: flex;
         flex-direction: column;
@@ -18,8 +12,8 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: kbq-css-variable(forms-font-label-line-height, map.get($tokens, forms-font-label-line-height));
-        $form-field-size-height: kbq-css-variable(form-field-size-height, map.get($tokens, form-field-size-height));
+        $line-height: kbq-css-variable(forms-font-label-line-height);
+        $form-field-size-height: kbq-css-variable(form-field-size-height);
 
         & .kbq-form-row_margin {
             margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);

package/core/forms/forms-tokens.scss

@@ -0,0 +1,39 @@
+.kbq-form {
+    --kbq-form-field-size-height: 32px;
+    --kbq-forms-size-horizontal-row-margin-bottom: 20px;
+    --kbq-forms-size-horizontal-control-padding-left: 16px;
+    --kbq-forms-size-horizontal-legend-margin-top: 32px;
+    --kbq-forms-size-horizontal-legend-margin-bottom: 16px;
+    --kbq-forms-size-vertical-row-margin-bottom: 16px;
+    --kbq-forms-size-vertical-label-padding-top: 0;
+    --kbq-forms-size-vertical-label-padding-bottom: 8px;
+    --kbq-forms-size-vertical-control-padding-left: 24px;
+    --kbq-forms-size-vertical-legend-margin-top: 32px;
+    --kbq-forms-size-vertical-legend-margin-bottom: 12px;
+    --kbq-forms-font-label-font-size: 14px;
+    --kbq-forms-font-label-line-height: 20px;
+    --kbq-forms-font-label-letter-spacing: -0.006em;
+    --kbq-forms-font-label-font-weight: normal;
+    --kbq-forms-font-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-forms-font-label-text-transform: null;
+    --kbq-forms-font-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-forms-font-legend-font-size: 18px;
+    --kbq-forms-font-legend-line-height: 26px;
+    --kbq-forms-font-legend-letter-spacing: normal;
+    --kbq-forms-font-legend-font-weight: 600;
+    --kbq-forms-font-legend-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-forms-font-legend-text-transform: null;
+    --kbq-forms-font-legend-font-feature-settings: 'calt', 'kern', 'liga';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-forms-label: hsla(229, 15%, 15%, 100%);
+    --kbq-forms-legend: hsla(229, 15%, 15%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-forms-label: hsla(229, 15%, 80%, 100%);
+    --kbq-forms-legend: hsla(229, 15%, 80%, 100%);
+}

package/core/option/_optgroup-theme.scss

@@ -1,22 +1,16 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-@mixin kbq-optgroup-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
+@mixin kbq-optgroup-theme() {
     .kbq-optgroup-label {
-        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+        color: kbq-css-variable(foreground-contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+        color: kbq-css-variable(foreground-text-disabled);
     }
 }
 
-@mixin kbq-optgroup-typography($config) {
+@mixin kbq-optgroup-typography() {
     .kbq-optgroup-label {
         @include kbq-typography-css-variables(optgroup, default);
     }

package/core/option/_option-action-theme.scss

@@ -1,38 +1,30 @@
-@use 'sass:map';
-
-@use '../styles/theming/theming' as *;
-@use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-@mixin kbq-option-action-theme($theme) {
-    $background: map.get($theme, background);
-
-    $states: map.get($theme, states);
-
+@mixin kbq-option-action-theme() {
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+            border-color: kbq-css-variable(states-focused-color);
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-css-variable(states-icon-contrast-fade-active, map.get($states, icon, contrast-fade-active));
+                color: kbq-css-variable(states-icon-contrast-fade-active);
             }
 
-            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
+            background-color: kbq-css-variable(background-transparent);
         }
 
         &:hover .kbq-icon {
-            color: kbq-css-variable(states-icon-contrast-fade-hover, map.get($states, icon, contrast-fade-hover));
+            color: kbq-css-variable(states-icon-contrast-fade-hover);
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: kbq-css-variable(states-icon-disabled, map.get($states, icon, disabled));
+                color: kbq-css-variable(states-icon-disabled);
             }
 
-            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
+            background-color: kbq-css-variable(background-transparent);
         }
     }
 }

package/core/option/_option-theme.scss

@@ -1,60 +1,49 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../styles/typography/typography-utils' as *;
 @use '../styles/common/tokens' as *;
 
-@mixin kbq-option($component, $style-name) {
-    $state: map.get($component, $style-name);
-
-    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
+@mixin kbq-option($style-name) {
+    background: kbq-css-variable(list-#{$style-name}-container-background);
 
     .kbq-option-text {
-        color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
+        color: kbq-css-variable(list-#{$style-name}-text-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$style-name}-icon-button-color, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$style-name}-icon-button-color);
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(list-#{$style-name}-caption-color, map.get($state, caption));
+        color: kbq-css-variable(list-#{$style-name}-caption-color);
     }
 }
 
-@mixin kbq-option-theme($theme) {
-    $list-item: map.get(map.get($theme, components), list-item);
-
+@mixin kbq-option-theme() {
     .kbq-option {
-        @include kbq-option($list-item, default);
+        @include kbq-option(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-option($list-item, states-hover);
+            @include kbq-option(states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: kbq-css-variable(
-                list-states-focused-focus-outline-color,
-                map.get($list-item, states-focused, focus-outline)
-            );
+            border-color: kbq-css-variable(list-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {
-            @include kbq-option($list-item, states-selected);
+            @include kbq-option(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-option($list-item, states-selected-hover);
+                @include kbq-option(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-option($list-item, states-disabled);
+            @include kbq-option(states-disabled);
         }
     }
 }
 
-@mixin kbq-option-typography($config) {
+@mixin kbq-option-typography() {
     .kbq-option {
         @include kbq-typography-css-variables(list, text);
     }

package/core/option/action.scss

@@ -1,5 +1,7 @@
 @use '../styles/common/tokens' as *;
 
+@use './option-action-theme' as *;
+
 .kbq-option-action {
     box-sizing: border-box;
 
@@ -27,3 +29,5 @@
         cursor: default;
     }
 }
+
+@include kbq-option-action-theme();

package/core/option/optgroup-tokens.scss

@@ -0,0 +1,26 @@
+.kbq-optgroup {
+    --kbq-size-m: 12px;
+    --kbq-optgroup-size-padding-left: 17px;
+    --kbq-optgroup-font-default-font-size: 18px;
+    --kbq-optgroup-font-default-line-height: 26px;
+    --kbq-optgroup-font-default-letter-spacing: normal;
+    --kbq-optgroup-font-default-font-weight: 600;
+    --kbq-optgroup-font-default-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-optgroup-font-default-text-transform: null;
+    --kbq-optgroup-font-default-font-feature-settings: 'calt', 'kern', 'liga';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --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%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --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%);
+}

package/core/option/optgroup.scss

@@ -1,11 +1,7 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../styles/common/vendor-prefixes';
-@use '../styles/tokens';
 @use '../styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './optgroup-theme' as *;
 
 .kbq-optgroup-label {
     padding-left: kbq-css-variable(size-m);
@@ -13,3 +9,6 @@ $tokens: meta.module-variables(tokens) !default;
     @include vendor-prefixes.user-select(none);
     cursor: default;
 }
+
+@include kbq-optgroup-theme();
+@include kbq-optgroup-typography();

package/core/option/option-action-tokens.scss

@@ -0,0 +1,21 @@
+.kbq-option-action {
+    --kbq-list-font-text-line-height: 20px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-background-transparent: transparent;
+    --kbq-states-icon-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-states-icon-contrast-fade-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-states-icon-contrast-fade-active: hsla(229, 15%, 40%, 100%);
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-background-transparent: transparent;
+    --kbq-states-icon-contrast-fade-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-states-icon-contrast-fade-active: hsla(229, 15%, 40%, 100%);
+    --kbq-states-icon-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+}

package/core/option/option-module.d.ts

@@ -2,10 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./option";
 import * as i2 from "./optgroup";
 import * as i3 from "./action";
-import * as i4 from "@angular/common";
-import * as i5 from "../selection/pseudo-checkbox/pseudo-checkbox.module";
+import * as i4 from "../selection/pseudo-checkbox/pseudo-checkbox.module";
 export declare class KbqOptionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqOptionModule, [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent], [typeof i4.CommonModule, typeof i5.KbqPseudoCheckboxModule], [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqOptionModule, [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent], [typeof i4.KbqPseudoCheckboxModule], [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqOptionModule>;
 }

package/core/option/option-tokens.scss

@@ -0,0 +1,115 @@
+.kbq-option {
+    --kbq-size-3xs: 2px;
+    --kbq-size-xxs: 4px;
+    --kbq-size-xs: 6px;
+    --kbq-size-s: 8px;
+    --kbq-size-m: 12px;
+    --kbq-list-size-container-padding-left: 12px;
+    --kbq-list-size-container-padding-right: 12px;
+    --kbq-list-size-container-padding-vertical: 6px;
+    --kbq-list-size-container-content-gap-horizontal: 8px;
+    --kbq-list-size-container-content-gap-vertical: 2px;
+    --kbq-list-size-container-focus-outline-width: 2px;
+    --kbq-list-size-text-padding-vertical: 0;
+    --kbq-list-size-header-padding-top: 8px;
+    --kbq-list-size-header-padding-bottom: 4px;
+    --kbq-list-size-header-padding-horizontal: 12px;
+    --kbq-list-size-subheading-padding-top: 12px;
+    --kbq-list-size-subheading-padding-bottom: 4px;
+    --kbq-list-size-subheading-padding-horizontal: 12px;
+    --kbq-list-font-text-font-size: 14px;
+    --kbq-list-font-text-line-height: 20px;
+    --kbq-list-font-text-letter-spacing: -0.006em;
+    --kbq-list-font-text-font-weight: normal;
+    --kbq-list-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-text-text-transform: null;
+    --kbq-list-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-caption-font-size: 12px;
+    --kbq-list-font-caption-line-height: 16px;
+    --kbq-list-font-caption-letter-spacing: normal;
+    --kbq-list-font-caption-font-weight: normal;
+    --kbq-list-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-caption-text-transform: null;
+    --kbq-list-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-header-font-size: 16px;
+    --kbq-list-font-header-line-height: 24px;
+    --kbq-list-font-header-letter-spacing: -0.011em;
+    --kbq-list-font-header-font-weight: 600;
+    --kbq-list-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-list-font-header-text-transform: null;
+    --kbq-list-font-header-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-list-font-subheading-font-size: 12px;
+    --kbq-list-font-subheading-line-height: 16px;
+    --kbq-list-font-subheading-letter-spacing: 1px;
+    --kbq-list-font-subheading-font-weight: 500;
+    --kbq-list-font-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-list-font-subheading-text-transform: uppercase;
+    --kbq-list-font-subheading-font-feature-settings: 'calt', 'case', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-option-size-horizontal-padding: 12px;
+    --kbq-option-size-height: 32px;
+    --kbq-option-size-border-width: 2px;
+    --kbq-option-font-default-font-size: 16px;
+    --kbq-option-font-default-line-height: 24px;
+    --kbq-option-font-default-letter-spacing: -0.011em;
+    --kbq-option-font-default-font-weight: normal;
+    --kbq-option-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-option-font-default-text-transform: null;
+    --kbq-option-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 8%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 94%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 18%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 40%, 100%);
+}

package/core/option/option.scss

@@ -1,8 +1,7 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../styles/common';
 
+@use './option-theme' as *;
+
 .kbq-option {
     @include common.kbq-list-item-base();
 
@@ -14,3 +13,6 @@
 .kbq-option-text {
     @include common.kbq-list-text();
 }
+
+@include kbq-option-theme();
+@include kbq-option-typography();