@koobiq/components 17.3.0 → 17.5.0

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

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

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -1,10 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../../styles/tokens';
 @use '../../styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './pseudo-checkbox-theme' as *;
 
 .kbq-pseudo-checkbox {
     position: relative;
@@ -64,3 +63,5 @@ $tokens: meta.module-variables(tokens) !default;
         width: kbq-css-variable(checkbox-size-big-border-width);
     }
 }
+
+@include kbq-pseudo-checkbox-theme();

package/core/styles/_koobiq-theme.scss

@@ -5,25 +5,10 @@
 
 @use 'theming/scrollbar-theme' as *;
 
-@use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
-@use '../../alert/alert-theme' as *;
-@use '../../autocomplete/autocomplete-theme' as *;
-@use '../../badge/badge-theme' as *;
-@use '../../button/button-theme' as *;
-@use '../../button-toggle/button-toggle-theme' as *;
-@use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
-@use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
-@use '../../dropdown/dropdown-theme' as *;
 @use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
-@use '../../form-field/form-field-theme' as *;
-@use '../../form-field/hint-theme' as *;
-@use '../../icon/icon-theme' as *;
-@use '../../icon/icon-item-theme' as *;
-@use '../../icon/icon-button-theme' as *;
-@use '../../input/input-theme' as *;
 @use '../../link/link-theme' as *;
 @use '../../list/list-theme' as *;
 @use '../../loader-overlay/loader-overlay-theme' as *;
@@ -59,27 +44,15 @@
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
-    @include kbq-alert-theme($theme);
-    @include kbq-autocomplete-theme($theme);
-    @include kbq-badge-theme($theme);
-    @include kbq-button-theme($theme);
-    @include kbq-button-toggle-theme($theme);
-    @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
-    @include kbq-datepicker-theme($theme);
     @include kbq-dl-theme($theme);
     @include kbq-divider-theme($theme);
-    @include kbq-dropdown-theme($theme);
     @include kbq-empty-state-theme($theme);
-    @include kbq-form-field-theme($theme);
     @include kbq-file-upload-theme($theme);
-    @include kbq-hint-theme($theme);
     @include kbq-forms-theme($theme);
-    @include kbq-highlight-theme($theme);
-    @include kbq-icon-theme($theme);
-    @include kbq-icon-item-theme($theme);
-    @include kbq-icon-button-theme($theme);
-    @include kbq-link-theme($theme);
+    @include kbq-highlight-theme();
+    // link is a directive, so styles for it should be applied globally
+    @include kbq-link-theme();
     @include kbq-list-theme($theme);
     @include kbq-loader-overlay-theme($theme);
     @include kbq-modal-theme($theme);
@@ -91,7 +64,6 @@
     @include kbq-popover-theme($theme);
     @include kbq-progress-bar-theme($theme);
     @include kbq-progress-spinner-theme($theme);
-    @include kbq-pseudo-checkbox-theme($theme);
     @include kbq-radio-theme($theme);
     @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
@@ -122,22 +94,11 @@
     @include kbq-base-typography();
     @include kbq-markdown-base-typography();
 
-    @include kbq-alert-typography($config);
-    @include kbq-badge-typography($config);
-    @include kbq-button-typography($config);
-    @include kbq-button-toggle-typography($config);
-    @include kbq-checkbox-typography($config);
     @include kbq-code-block-typography($config);
-    @include kbq-datepicker-typography($config);
-    @include kbq-dropdown-typography($config);
     @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
-    @include kbq-form-field-typography($config);
-    @include kbq-hint-typography($config);
     @include kbq-file-upload-typography($config);
     @include kbq-forms-typography($config);
-    @include kbq-input-typography($config);
-    @include kbq-link-typography($config);
     @include kbq-list-typography($config);
     @include kbq-loader-overlay-typography($config);
     @include kbq-modal-typography($config);

package/core/styles/theming/_theming.scss

@@ -143,6 +143,7 @@
         theme-fade: map.get($tokens, '#{$scheme}-line-theme-fade'),
         contrast: map.get($tokens, '#{$scheme}-line-contrast'),
         contrast-fade: map.get($tokens, '#{$scheme}-line-contrast-fade'),
+        contrast-less: map.get($tokens, '#{$scheme}-line-contrast-less'),
         success: map.get($tokens, '#{$scheme}-line-success'),
         success-fade: map.get($tokens, '#{$scheme}-line-success-fade'),
         warning: map.get($tokens, '#{$scheme}-line-warning'),

package/datepicker/_datepicker-theme.scss

@@ -5,80 +5,54 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-datepicker-theme($theme) {
-    $datepicker: map.get(map.get($theme, components), datepicker);
-
+@mixin kbq-datepicker-theme() {
     .kbq-datepicker__content {
-        background: kbq-css-variable(datepicker-container-background, map.get($datepicker, container, background));
-        box-shadow: kbq-css-variable(datepicker-container-box-shadow, map.get($datepicker, container, box-shadow));
+        background: kbq-css-variable(datepicker-container-background);
+        box-shadow: kbq-css-variable(datepicker-container-box-shadow);
     }
 
     .kbq-calendar__table-header {
-        color: kbq-css-variable(datepicker-header-text, map.get($datepicker, header, text));
+        color: kbq-css-variable(datepicker-header-text);
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: kbq-css-variable(datepicker-header-divider, map.get($datepicker, header, divider));
+        background: kbq-css-variable(datepicker-header-divider);
     }
 
     .kbq-calendar__body-cell-content {
-        background: kbq-css-variable(
-            datepicker-grid-cell-default-background,
-            map.get($datepicker, cell, default, background)
-        );
-        color: kbq-css-variable(datepicker-grid-cell-default-text, map.get($datepicker, cell, default, text));
+        background: kbq-css-variable(datepicker-grid-cell-default-background);
+        color: kbq-css-variable(datepicker-grid-cell-default-text);
 
         &.kbq-calendar__body-today {
-            background: kbq-css-variable(
-                datepicker-grid-cell-today-background,
-                map.get($datepicker, cell, today, background)
-            );
-            color: kbq-css-variable(datepicker-grid-cell-today-text, map.get($datepicker, cell, today, text));
+            background: kbq-css-variable(datepicker-grid-cell-today-background);
+            color: kbq-css-variable(datepicker-grid-cell-today-text);
         }
 
         &:hover:not(.kbq-disabled) {
-            background: kbq-css-variable(
-                datepicker-grid-cell-states-hover-background,
-                map.get($datepicker, cell, hover, background)
-            );
+            background: kbq-css-variable(datepicker-grid-cell-states-hover-background);
         }
 
         &:active:not(.kbq-disabled) {
-            background: kbq-css-variable(
-                datepicker-grid-cell-states-active-background,
-                map.get($datepicker, cell, active, background)
-            );
+            background: kbq-css-variable(datepicker-grid-cell-states-active-background);
         }
 
         &.kbq-selected:not(.kbq-disabled) {
-            background: kbq-css-variable(
-                datepicker-grid-cell-states-selected-background,
-                map.get($datepicker, cell, selected, background)
-            );
-            color: kbq-css-variable(
-                datepicker-grid-cell-states-selected-text,
-                map.get($datepicker, cell, selected, text)
-            );
+            background: kbq-css-variable(datepicker-grid-cell-states-selected-background);
+            color: kbq-css-variable(datepicker-grid-cell-states-selected-text);
 
             &:hover {
-                background: kbq-css-variable(
-                    datepicker-grid-cell-states-selected-hover-background,
-                    map.get($datepicker, cell, selected-hover, background)
-                );
+                background: kbq-css-variable(datepicker-grid-cell-states-selected-hover-background);
             }
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(states-foreground-disabled, map.get($theme, states, foreground, disabled));
-            background: kbq-css-variable(
-                datepicker-grid-cell-states-disabled-background,
-                map.get($datepicker, cell, disabled, background)
-            );
+            color: kbq-css-variable(states-foreground-disabled);
+            background: kbq-css-variable(datepicker-grid-cell-states-disabled-background);
         }
     }
 }
 
-@mixin kbq-datepicker-typography($config) {
+@mixin kbq-datepicker-typography() {
     .kbq-calendar {
         @include kbq-typography-css-variables(datepicker, text);
     }

package/datepicker/calendar-header.component.d.ts

@@ -30,6 +30,7 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     set minDate(value: D | null);
     private _minDate;
     get previousDisabled(): boolean;
+    get currentDisabled(): boolean;
     get nextDisabled(): boolean;
     /** Emits when any date is activated. */
     readonly activeDateChange: EventEmitter<D>;

package/datepicker/calendar.scss

@@ -1,11 +1,8 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-calendar {
     display: block;
 }

package/datepicker/datepicker-content.scss

@@ -1,16 +1,12 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './datepicker-theme' as *;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
-$kbq-datepicker-size-grid-padding-horizontal: kbq-css-variable(
-    datepicker-size-grid-padding-horizontal,
-    map.get($tokens, datepicker-size-grid-padding-horizontal)
-);
+$kbq-datepicker-size-grid-padding-horizontal: kbq-css-variable(datepicker-size-grid-padding-horizontal);
 
 $kbq-datepicker-non-touch-calendar-width: calc(
     $kbq-datepicker-non-touch-calendar-cell-size * 7 + $kbq-datepicker-size-grid-padding-horizontal * 2
@@ -33,3 +29,6 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
         padding-bottom: kbq-css-variable(datepicker-size-container-padding-vertical);
     }
 }
+
+@include kbq-datepicker-theme();
+@include kbq-datepicker-typography();

package/datepicker/datepicker-tokens.scss

@@ -0,0 +1,59 @@
+.kbq-datepicker__content {
+    --kbq-datepicker-size-container-padding-vertical: 12px;
+    --kbq-datepicker-size-container-border-radius: 8px;
+    --kbq-datepicker-size-header-padding-horizontal: 4px;
+    --kbq-datepicker-size-header-margin-bottom: 2px;
+    --kbq-datepicker-size-grid-padding-horizontal: 12px;
+    --kbq-datepicker-size-grid-content-gap-vertical: 2px;
+    --kbq-datepicker-size-grid-divider-height: 1px;
+    --kbq-datepicker-size-grid-cell-padding-horizontal: 8px;
+    --kbq-datepicker-size-grid-cell-padding-vertical: 8px;
+    --kbq-datepicker-size-grid-cell-border-radius: 8px;
+    --kbq-datepicker-font-text-font-size: 14px;
+    --kbq-datepicker-font-text-line-height: 20px;
+    --kbq-datepicker-font-text-letter-spacing: -0.006em;
+    --kbq-datepicker-font-text-font-weight: normal;
+    --kbq-datepicker-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-datepicker-font-text-text-transform: null;
+    --kbq-datepicker-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-states-foreground-disabled: hsla(229, 15%, 15%, 32%);
+    --kbq-datepicker-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-datepicker-container-box-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-datepicker-header-text: hsla(229, 15%, 60%, 100%);
+    --kbq-datepicker-header-divider: hsla(229, 15%, 6%, 12%);
+    --kbq-datepicker-grid-cell-default-background: transparent;
+    --kbq-datepicker-grid-cell-default-text: hsla(229, 15%, 15%, 100%);
+    --kbq-datepicker-grid-cell-today-background: transparent;
+    --kbq-datepicker-grid-cell-today-text: hsla(216, 100%, 50%, 100%);
+    --kbq-datepicker-grid-cell-states-hover-background: hsla(229, 15%, 50%, 8%);
+    --kbq-datepicker-grid-cell-states-active-background: hsla(229, 15%, 50%, 16%);
+    --kbq-datepicker-grid-cell-states-selected-background: hsla(229, 15%, 25%, 100%);
+    --kbq-datepicker-grid-cell-states-selected-text: hsla(0, 0%, 100%, 100%);
+    --kbq-datepicker-grid-cell-states-selected-hover-background: hsla(229, 15%, 15%, 100%);
+    --kbq-datepicker-grid-cell-states-disabled-background: transparent;
+    --kbq-datepicker-grid-cell-states-disabled-text: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-states-foreground-disabled: hsla(229, 15%, 40%, 100%);
+    --kbq-datepicker-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-datepicker-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-datepicker-header-text: hsla(229, 15%, 45%, 100%);
+    --kbq-datepicker-header-divider: hsla(229, 15%, 22%, 100%);
+    --kbq-datepicker-grid-cell-default-background: transparent;
+    --kbq-datepicker-grid-cell-default-text: hsla(229, 15%, 80%, 100%);
+    --kbq-datepicker-grid-cell-today-background: transparent;
+    --kbq-datepicker-grid-cell-today-text: hsla(216, 100%, 65%, 100%);
+    --kbq-datepicker-grid-cell-states-hover-background: hsla(229, 15%, 50%, 16%);
+    --kbq-datepicker-grid-cell-states-active-background: hsla(229, 100%, 85%, 15%);
+    --kbq-datepicker-grid-cell-states-selected-background: hsla(229, 15%, 90%, 100%);
+    --kbq-datepicker-grid-cell-states-selected-text: hsla(229, 15%, 15%, 100%);
+    --kbq-datepicker-grid-cell-states-selected-hover-background: hsla(229, 15%, 55%, 100%);
+    --kbq-datepicker-grid-cell-states-disabled-background: transparent;
+    --kbq-datepicker-grid-cell-states-disabled-text: hsla(229, 15%, 40%, 100%);
+}

package/dropdown/_dropdown-theme.scss

@@ -5,58 +5,49 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-dropdown-item-state($component, $style-name) {
-    $state: map.get($component, $style-name);
-
-    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
-    color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
+@mixin kbq-dropdown-item-state($style-name) {
+    background: kbq-css-variable(list-#{$style-name}-container-background);
+    color: kbq-css-variable(list-#{$style-name}-text-color);
 
     .kbq-dropdown-item__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-dropdown-theme($theme) {
-    $dropdown: map.get(map.get($theme, components), dropdown);
-
+@mixin kbq-dropdown-theme() {
     .kbq-dropdown__panel {
-        box-shadow: kbq-css-variable(dropdown-container-box-shadow, map.get($dropdown, box-shadow));
-        background: kbq-css-variable(dropdown-container-background, map.get($dropdown, background));
+        box-shadow: kbq-css-variable(dropdown-container-box-shadow);
+        background: kbq-css-variable(dropdown-container-background);
     }
 
     .kbq-dropdown-item {
-        $list-item: map.get(map.get($theme, components), list-item);
-
-        @include kbq-dropdown-item-state($list-item, default);
+        @include kbq-dropdown-item-state(default);
 
         &.kbq-dropdown-item_highlighted,
         &:hover:not(.kbq-disabled) {
-            @include kbq-dropdown-item-state($list-item, states-hover);
+            @include kbq-dropdown-item-state(states-hover);
         }
 
         &.cdk-keyboard-focused {
-            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-dropdown-item-state($list-item, states-selected);
+            @include kbq-dropdown-item-state(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-dropdown-item-state($list-item, states-selected-hover);
+                @include kbq-dropdown-item-state(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-dropdown-item-state($list-item, states-disabled);
+            @include kbq-dropdown-item-state(states-disabled);
         }
     }
 
     .kbq-dropdown__group-header {
         &.kbq-dropdown__group-header_small {
-            color: kbq-css-variable(foreground-contrast-secondary, map.get($theme, foreground, contrast-secondary));
+            color: kbq-css-variable(foreground-contrast-secondary);
         }
     }
 
@@ -65,7 +56,7 @@
     }
 }
 
-@mixin kbq-dropdown-typography($config) {
+@mixin kbq-dropdown-typography() {
     .kbq-dropdown-item,
     .kbq-dropdown__content {
         @include kbq-typography-css-variables(list, text);

package/dropdown/dropdown-tokens.scss

@@ -0,0 +1,111 @@
+.kbq-dropdown__panel {
+    --kbq-dropdown-size-container-width-min: 64px;
+    --kbq-dropdown-size-container-width-max: 640px;
+    --kbq-dropdown-size-container-padding-vertical: 4px;
+    --kbq-dropdown-size-container-border-radius: 8px;
+    --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';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    // TODO: remove after all settled, should be assigned via css-tokens.css (#DS-2846)
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-dropdown-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-dropdown-container-box-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-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-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-dropdown-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-dropdown-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --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%);
+}