@koobiq/components 17.4.0 → 17.6.0

package/form-field/form-field-tokens.scss

@@ -0,0 +1,69 @@
+.kbq-form-field {
+    --kbq-form-field-size-height: 32px;
+    --kbq-form-field-size-border-width: 1px;
+    --kbq-form-field-size-border-radius: 8px;
+    --kbq-form-field-size-icon-size: 16px;
+    --kbq-form-field-size-icon-margin-left: 8px;
+    --kbq-form-field-size-icon-margin-right: 8px;
+    --kbq-form-field-size-icon-button-size: 24px;
+    --kbq-form-field-size-icon-button-margin-right: 4px;
+    --kbq-form-field-size-icon-button-margin-left: 4px;
+    --kbq-form-field-font-text-font-size: 14px;
+    --kbq-form-field-font-text-line-height: 20px;
+    --kbq-form-field-font-text-letter-spacing: -0.006em;
+    --kbq-form-field-font-text-font-weight: normal;
+    --kbq-form-field-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-form-field-font-text-text-transform: null;
+    --kbq-form-field-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-form-field-default-border-color: hsla(229, 15%, 80%, 100%);
+    --kbq-form-field-default-background: hsla(0, 0%, 100%, 100%);
+    --kbq-form-field-default-placeholder: hsla(229, 15%, 60%, 100%);
+    --kbq-form-field-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-focused-background: hsla(0, 0%, 100%, 100%);
+    --kbq-form-field-states-focused-placeholder: hsla(229, 15%, 60%, 100%);
+    --kbq-form-field-states-focused-text: hsla(229, 15%, 15%, 100%);
+    --kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-error-border-color: hsla(7, 97%, 45%, 100%);
+    --kbq-form-field-states-error-background: hsla(7, 97%, 99%, 100%);
+    --kbq-form-field-states-error-placeholder: hsla(7, 97%, 70%, 100%);
+    --kbq-form-field-states-error-text: hsla(7, 97%, 40%, 100%);
+    --kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-autofill-background: hsla(216, 100%, 85%, 100%);
+    --kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 60%, 100%);
+    --kbq-form-field-states-autofill-text: hsla(229, 15%, 15%, 100%);
+    --kbq-form-field-states-disabled-border-color: hsla(229, 15%, 15%, 32%);
+    --kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 15%, 32%);
+    --kbq-form-field-states-disabled-text: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-form-field-default-border-color: hsla(229, 15%, 30%, 100%);
+    --kbq-form-field-default-background: hsla(229, 15%, 12%, 100%);
+    --kbq-form-field-default-placeholder: hsla(229, 15%, 45%, 100%);
+    --kbq-form-field-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-form-field-states-focused-border-color: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-focused-background: hsla(229, 15%, 12%, 100%);
+    --kbq-form-field-states-focused-placeholder: hsla(229, 15%, 45%, 100%);
+    --kbq-form-field-states-focused-text: hsla(229, 15%, 80%, 100%);
+    --kbq-form-field-states-focused-focus-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-error-border-color: hsla(7, 97%, 35%, 100%);
+    --kbq-form-field-states-error-background: hsla(7, 97%, 6%, 100%);
+    --kbq-form-field-states-error-placeholder: hsla(7, 97%, 25%, 100%);
+    --kbq-form-field-states-error-text: hsla(7, 97%, 60%, 100%);
+    --kbq-form-field-states-error-focused-focus-outline: hsla(7, 97%, 45%, 100%);
+    --kbq-form-field-states-autofill-border-color: hsla(216, 100%, 60%, 100%);
+    --kbq-form-field-states-autofill-background: hsla(216, 100%, 20%, 100%);
+    --kbq-form-field-states-autofill-placeholder: hsla(229, 15%, 45%, 100%);
+    --kbq-form-field-states-autofill-text: hsla(229, 15%, 80%, 100%);
+    --kbq-form-field-states-disabled-border-color: hsla(229, 15%, 50%, 32%);
+    --kbq-form-field-states-disabled-background: hsla(229, 15%, 50%, 16%);
+    --kbq-form-field-states-disabled-placeholder: hsla(229, 15%, 40%, 100%);
+    --kbq-form-field-states-disabled-text: hsla(229, 15%, 40%, 100%);
+}

package/form-field/form-field.scss

@@ -5,10 +5,9 @@
 
 @use '../core/forms/forms';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './form-field-theme' as *;
 
 .kbq-form-field {
     position: relative;
@@ -143,3 +142,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-password-hint {
     margin-top: kbq-css-variable(form-field-hint-size-gap);
 }
+
+@include kbq-form-field-theme();
+@include kbq-form-field-typography();

package/form-field/hint-tokens.scss

@@ -0,0 +1,60 @@
+.kbq-hint {
+    --kbq-hint-size-normal-margin-top: 2px;
+    --kbq-hint-size-normal-content-padding: 4px;
+    --kbq-hint-size-compact-margin-top: 0;
+    --kbq-hint-size-compact-content-padding: 4px;
+    --kbq-hint-font-normal-text-font-size: 14px;
+    --kbq-hint-font-normal-text-line-height: 20px;
+    --kbq-hint-font-normal-text-letter-spacing: -0.006em;
+    --kbq-hint-font-normal-text-font-weight: 500;
+    --kbq-hint-font-normal-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-hint-font-normal-text-text-transform: null;
+    --kbq-hint-font-normal-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-hint-font-compact-text-font-size: 12px;
+    --kbq-hint-font-compact-text-line-height: 16px;
+    --kbq-hint-font-compact-text-letter-spacing: normal;
+    --kbq-hint-font-compact-text-font-weight: normal;
+    --kbq-hint-font-compact-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-hint-font-compact-text-text-transform: null;
+    --kbq-hint-font-compact-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 15%, 100%);
+    --kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-hint-fill-text-off-success-text: hsla(229, 15%, 15%, 100%);
+    --kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 40%, 100%);
+    --kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 15%, 100%);
+    --kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 42%, 100%);
+    --kbq-hint-fill-text-off-error-text: hsla(229, 15%, 15%, 100%);
+    --kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 45%, 100%);
+    --kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 15%, 100%);
+    --kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 60%, 100%);
+    --kbq-hint-fill-text-on-success-text: hsla(104, 64%, 30%, 100%);
+    --kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 40%, 100%);
+    --kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 33%, 100%);
+    --kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 42%, 100%);
+    --kbq-hint-fill-text-on-error-text: hsla(7, 97%, 40%, 100%);
+    --kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 45%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-hint-fill-text-off-fade-contrast-text: hsla(229, 15%, 80%, 100%);
+    --kbq-hint-fill-text-off-fade-contrast-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-hint-fill-text-off-success-text: hsla(229, 15%, 80%, 100%);
+    --kbq-hint-fill-text-off-success-icon: hsla(104, 64%, 45%, 100%);
+    --kbq-hint-fill-text-off-warning-text: hsla(229, 15%, 80%, 100%);
+    --kbq-hint-fill-text-off-warning-icon: hsla(38, 100%, 60%, 100%);
+    --kbq-hint-fill-text-off-error-text: hsla(229, 15%, 80%, 100%);
+    --kbq-hint-fill-text-off-error-icon: hsla(7, 97%, 60%, 100%);
+    --kbq-hint-fill-text-on-fade-contrast-text: hsla(229, 15%, 80%, 100%);
+    --kbq-hint-fill-text-on-fade-contrast-icon: hsla(229, 15%, 45%, 100%);
+    --kbq-hint-fill-text-on-success-text: hsla(104, 64%, 45%, 100%);
+    --kbq-hint-fill-text-on-success-icon: hsla(104, 64%, 45%, 100%);
+    --kbq-hint-fill-text-on-warning-text: hsla(38, 100%, 60%, 100%);
+    --kbq-hint-fill-text-on-warning-icon: hsla(38, 100%, 60%, 100%);
+    --kbq-hint-fill-text-on-error-text: hsla(7, 97%, 60%, 100%);
+    --kbq-hint-fill-text-on-error-icon: hsla(7, 97%, 60%, 100%);
+}

package/form-field/hint.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './hint-theme' as *;
+
 .kbq-hint {
     display: flex;
 
@@ -18,3 +20,6 @@
         }
     }
 }
+
+@include kbq-hint-theme();
+@include kbq-hint-typography();

package/form-field/password-toggle.d.ts

@@ -1,7 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { KbqFormFieldRef } from '@koobiq/components/core';
 import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
@@ -16,10 +13,10 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger implements Afte
     get hidden(): boolean;
     get iconClass(): string;
     get visibility(): string;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
+    constructor(formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     toggle(event: KeyboardEvent): void;
     private updateState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, null, { optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
 }

package/icon/_icon-button-theme.scss

@@ -3,9 +3,7 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-button-theme($theme) {
-    $icon-button: map.get($theme, components, icon-button);
-
+@mixin kbq-icon-button-theme() {
     .kbq-icon-button {
         &:focus {
             outline: none;
@@ -13,147 +11,111 @@
 
         // FIXME: move to unified mixin
         &.kbq-theme {
-            color: kbq-css-variable(icon-button-theme-default, map.get($icon-button, theme, default));
+            color: kbq-css-variable(icon-button-theme-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-theme-states-active, map.get($icon-button, theme, state-active));
+                color: kbq-css-variable(icon-button-theme-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-theme-states-hover, map.get($icon-button, theme, state-hover));
+                color: kbq-css-variable(icon-button-theme-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-theme-states-disabled,
-                    map.get($icon-button, theme, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-theme-states-disabled);
             }
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-button-contrast-default, map.get($icon-button, contrast, default));
+            color: kbq-css-variable(icon-button-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-active,
-                    map.get($icon-button, contrast, state-active)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-hover,
-                    map.get($icon-button, contrast, state-hover)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-contrast-states-disabled,
-                    map.get($icon-button, contrast, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-contrast-states-disabled);
             }
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-button-fade-contrast-default, map.get($icon-button, fade-contrast, default));
+            color: kbq-css-variable(icon-button-fade-contrast-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-active,
-                    map.get($icon-button, fade-contrast, state-active)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-hover,
-                    map.get($icon-button, fade-contrast, state-hover)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-fade-contrast-states-disabled,
-                    map.get($icon-button, fade-contrast, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-fade-contrast-states-disabled);
             }
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-button-error-default, map.get($icon-button, error, default));
+            color: kbq-css-variable(icon-button-error-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(icon-button-error-states-active, map.get($icon-button, error, state-active));
+                color: kbq-css-variable(icon-button-error-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-error-states-hover, map.get($icon-button, error, state-hover));
+                color: kbq-css-variable(icon-button-error-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-error-states-disabled,
-                    map.get($icon-button, error, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-error-states-disabled);
             }
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-button-success-default, map.get($icon-button, success, default));
+            color: kbq-css-variable(icon-button-success-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-success-states-active,
-                    map.get($icon-button, success, state-active)
-                );
+                color: kbq-css-variable(icon-button-success-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-success-states-hover, map.get($icon-button, success, state-hover));
+                color: kbq-css-variable(icon-button-success-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-success-states-disabled,
-                    map.get($icon-button, success, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-success-states-disabled);
             }
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-button-warning-default, map.get($icon-button, warning, default));
+            color: kbq-css-variable(icon-button-warning-default);
 
             &:active,
             &.kbq-active {
-                color: kbq-css-variable(
-                    icon-button-warning-states-active,
-                    map.get($icon-button, warning, state-active)
-                );
+                color: kbq-css-variable(icon-button-warning-states-active);
             }
 
             &:not(.kbq-disabled):hover {
-                color: kbq-css-variable(icon-button-warning-states-hover, map.get($icon-button, warning, state-hover));
+                color: kbq-css-variable(icon-button-warning-states-hover);
             }
 
             &.kbq-disabled {
-                color: kbq-css-variable(
-                    icon-button-warning-states-disabled,
-                    map.get($icon-button, warning, state-disabled)
-                );
+                color: kbq-css-variable(icon-button-warning-states-disabled);
             }
         }
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color)),
-                0 0 0.1px 1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                inset 0 0 0.1px 1px kbq-css-variable(states-focused-color),
+                0 0 0.1px 1px kbq-css-variable(states-focused-color);
         }
     }
 }

package/icon/_icon-item-theme.scss

@@ -3,59 +3,56 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-item-style($component, $type, $style-name) {
-    $style: map.get($component, $type, $style-name);
+@mixin kbq-icon-item-style($type, $style-name) {
     $base: icon-item-filled-#{$type}-#{$style-name};
 
-    color: kbq-css-variable(#{$base}-color, map.get($component, $type, $style-name, color));
-    background: kbq-css-variable(#{$base}-background, map.get($component, $type, $style-name, background));
+    color: kbq-css-variable(#{$base}-color);
+    background: kbq-css-variable(#{$base}-background);
 }
 
-@mixin kbq-icon-item-theme($theme) {
-    $icon-item: map.get($theme, components, icon-item);
-
+@mixin kbq-icon-item-theme() {
     .kbq-icon-item.kbq-icon-item_filled {
         &.kbq-icon-item_fade-off {
             &.kbq-theme {
-                @include kbq-icon-item-style($icon-item, fade-off, theme);
+                @include kbq-icon-item-style(fade-off, theme);
             }
 
             &.kbq-contrast {
-                @include kbq-icon-item-style($icon-item, fade-off, contrast);
+                @include kbq-icon-item-style(fade-off, contrast);
             }
 
             &.kbq-error {
-                @include kbq-icon-item-style($icon-item, fade-off, error);
+                @include kbq-icon-item-style(fade-off, error);
             }
 
             &.kbq-warning {
-                @include kbq-icon-item-style($icon-item, fade-off, warning);
+                @include kbq-icon-item-style(fade-off, warning);
             }
 
             &.kbq-success {
-                @include kbq-icon-item-style($icon-item, fade-off, success);
+                @include kbq-icon-item-style(fade-off, success);
             }
         }
 
         &.kbq-icon-item_fade-on {
             &.kbq-theme {
-                @include kbq-icon-item-style($icon-item, fade-on, theme);
+                @include kbq-icon-item-style(fade-on, theme);
             }
 
             &.kbq-contrast {
-                @include kbq-icon-item-style($icon-item, fade-on, contrast);
+                @include kbq-icon-item-style(fade-on, contrast);
             }
 
             &.kbq-error {
-                @include kbq-icon-item-style($icon-item, fade-on, error);
+                @include kbq-icon-item-style(fade-on, error);
             }
 
             &.kbq-warning {
-                @include kbq-icon-item-style($icon-item, fade-on, warning);
+                @include kbq-icon-item-style(fade-on, warning);
             }
 
             &.kbq-success {
-                @include kbq-icon-item-style($icon-item, fade-on, success);
+                @include kbq-icon-item-style(fade-on, success);
             }
         }
     }

package/icon/_icon-theme.scss

@@ -1,34 +1,29 @@
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-icon-theme($theme) {
-    $icon: map.get($theme, components, icon);
-
+@mixin kbq-icon-theme() {
     .kbq-icon:not(.kbq-icon-button, .kbq-icon-item) {
         &.kbq-theme {
-            color: kbq-css-variable(icon-theme-color, map.get($icon, theme, color));
+            color: kbq-css-variable(icon-theme-color);
         }
 
         &.kbq-contrast {
-            color: kbq-css-variable(icon-contrast-color, map.get($icon, contrast, color));
+            color: kbq-css-variable(icon-contrast-color);
         }
 
         &.kbq-contrast-fade {
-            color: kbq-css-variable(icon-fade-contrast-color, map.get($icon, fade-contrast, color));
+            color: kbq-css-variable(icon-fade-contrast-color);
         }
 
         &.kbq-error {
-            color: kbq-css-variable(icon-error-color, map.get($icon, error, color));
+            color: kbq-css-variable(icon-error-color);
         }
 
         &.kbq-warning {
-            color: kbq-css-variable(icon-warning-color, map.get($icon, warning, color));
+            color: kbq-css-variable(icon-warning-color);
         }
 
         &.kbq-success {
-            color: kbq-css-variable(icon-success-color, map.get($icon, success, color));
+            color: kbq-css-variable(icon-success-color);
         }
     }
 }

package/icon/icon-button-tokens.scss

@@ -0,0 +1,67 @@
+.kbq-icon-button {
+    --kbq-icon-button-size-horizontal-padding: 8px;
+    --kbq-icon-button-size-left-icon-padding: 6px;
+    --kbq-icon-button-size-normal-horizontal-padding: 0;
+    --kbq-icon-button-size-normal-vertical-padding: 0;
+    --kbq-icon-button-size-small-horizontal-padding: 4px;
+    --kbq-icon-button-size-small-vertical-padding: 4px;
+}
+
+: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-icon-button-theme-default: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-button-theme-states-hover: hsla(216, 100%, 45%, 100%);
+    --kbq-icon-button-theme-states-active: hsla(216, 100%, 40%, 100%);
+    --kbq-icon-button-theme-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-contrast-default: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-button-contrast-states-hover: hsla(229, 15%, 10%, 100%);
+    --kbq-icon-button-contrast-states-active: hsla(229, 15%, 10%, 100%);
+    --kbq-icon-button-contrast-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-fade-contrast-default: hsla(229, 15%, 60%, 100%);
+    --kbq-icon-button-fade-contrast-states-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-icon-button-fade-contrast-states-active: hsla(229, 15%, 40%, 100%);
+    --kbq-icon-button-fade-contrast-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-button-error-states-hover: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-button-error-states-active: hsla(7, 97%, 40%, 100%);
+    --kbq-icon-button-error-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-success-default: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-hover: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-active: hsla(104, 64%, 30%, 100%);
+    --kbq-icon-button-success-states-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-icon-button-warning-default: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-hover: hsla(38, 100%, 45%, 100%);
+    --kbq-icon-button-warning-states-active: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-disabled: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-states-focused-color: hsla(216, 100%, 50%, 100%);
+    --kbq-states-focused-color-error: hsla(7, 97%, 50%, 100%);
+    --kbq-icon-button-theme-default: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-button-theme-states-hover: hsla(216, 100%, 45%, 100%);
+    --kbq-icon-button-theme-states-active: hsla(216, 100%, 40%, 100%);
+    --kbq-icon-button-theme-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-contrast-default: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-button-contrast-states-hover: hsla(229, 15%, 90%, 100%);
+    --kbq-icon-button-contrast-states-active: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-button-contrast-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-fade-contrast-default: hsla(229, 15%, 45%, 100%);
+    --kbq-icon-button-fade-contrast-states-hover: hsla(229, 15%, 50%, 100%);
+    --kbq-icon-button-fade-contrast-states-active: hsla(229, 15%, 40%, 100%);
+    --kbq-icon-button-fade-contrast-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-error-default: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-button-error-states-hover: hsla(7, 97%, 50%, 100%);
+    --kbq-icon-button-error-states-active: hsla(7, 97%, 40%, 100%);
+    --kbq-icon-button-error-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-success-default: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-button-success-states-hover: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-button-success-states-active: hsla(104, 64%, 30%, 100%);
+    --kbq-icon-button-success-states-disabled: hsla(229, 15%, 30%, 100%);
+    --kbq-icon-button-warning-default: hsla(38, 100%, 60%, 100%);
+    --kbq-icon-button-warning-states-hover: hsla(38, 100%, 45%, 100%);
+    --kbq-icon-button-warning-states-active: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-button-warning-states-disabled: hsla(229, 15%, 30%, 100%);
+}

package/icon/icon-button.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './icon-button-theme' as *;
+
 .kbq-icon-button {
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -16,3 +18,5 @@
             kbq-css-variable(icon-button-size-small-horizontal-padding);
     }
 }
+
+@include kbq-icon-button-theme();

package/icon/icon-item-tokens.scss

@@ -0,0 +1,52 @@
+.kbq-icon-item {
+    --kbq-icon-item-size-normal-horizontal-padding: 8px;
+    --kbq-icon-item-size-normal-vertical-padding: 8px;
+    --kbq-icon-item-size-big-horizontal-padding: 16px;
+    --kbq-icon-item-size-big-vertical-padding: 16px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-icon-item-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-color: hsla(229, 15%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-background: hsla(229, 15%, 25%, 100%);
+    --kbq-icon-item-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-error-background: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-background: hsla(38, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-success-background: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-color: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-background: hsla(216, 100%, 85%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-background: hsla(229, 15%, 92%, 100%);
+    --kbq-icon-item-filled-fade-on-error-color: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-error-background: hsla(7, 97%, 90%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-color: hsla(38, 100%, 42%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-background: hsla(38, 100%, 85%, 100%);
+    --kbq-icon-item-filled-fade-on-success-color: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-item-filled-fade-on-success-background: hsla(104, 64%, 80%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-icon-item-filled-fade-off-theme-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-theme-background: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-item-filled-fade-off-contrast-background: hsla(229, 15%, 90%, 100%);
+    --kbq-icon-item-filled-fade-off-error-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-error-background: hsla(7, 97%, 41%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-warning-background: hsla(38, 100%, 39%, 100%);
+    --kbq-icon-item-filled-fade-off-success-color: hsla(0, 0%, 100%, 100%);
+    --kbq-icon-item-filled-fade-off-success-background: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-color: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-item-filled-fade-on-theme-background: hsla(216, 100%, 20%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-color: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-item-filled-fade-on-contrast-background: hsla(229, 15%, 25%, 100%);
+    --kbq-icon-item-filled-fade-on-error-color: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-item-filled-fade-on-error-background: hsla(7, 97%, 15%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-color: hsla(38, 100%, 60%, 100%);
+    --kbq-icon-item-filled-fade-on-warning-background: hsla(38, 100%, 14%, 100%);
+    --kbq-icon-item-filled-fade-on-success-color: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-item-filled-fade-on-success-background: hsla(104, 64%, 12%, 100%);
+}

package/icon/icon-item.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './icon-item-theme' as *;
+
 .kbq-icon-item {
     box-sizing: border-box;
 
@@ -18,3 +20,5 @@
             kbq-css-variable(icon-item-size-big-horizontal-padding);
     }
 }
+
+@include kbq-icon-item-theme();

package/icon/icon-tokens.scss

@@ -0,0 +1,17 @@
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-icon-theme-color: hsla(216, 100%, 50%, 100%);
+    --kbq-icon-contrast-color: hsla(229, 15%, 15%, 100%);
+    --kbq-icon-fade-contrast-color: hsla(229, 15%, 60%, 100%);
+    --kbq-icon-error-color: hsla(7, 97%, 45%, 100%);
+    --kbq-icon-success-color: hsla(104, 64%, 40%, 100%);
+    --kbq-icon-warning-color: hsla(38, 100%, 42%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-icon-theme-color: hsla(216, 100%, 65%, 100%);
+    --kbq-icon-contrast-color: hsla(229, 15%, 80%, 100%);
+    --kbq-icon-fade-contrast-color: hsla(229, 15%, 45%, 100%);
+    --kbq-icon-error-color: hsla(7, 97%, 60%, 100%);
+    --kbq-icon-success-color: hsla(104, 64%, 45%, 100%);
+    --kbq-icon-warning-color: hsla(38, 100%, 60%, 100%);
+}