@koobiq/components 17.4.0 → 17.6.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/services/theme.service.d.ts

@@ -6,6 +6,22 @@ export interface KbqTheme {
     className: string;
     selected: boolean;
 }
+/**
+ * Enum representing the available themes for the Koobiq design system.
+ * This enum is used to manage and switch between different visual themes.
+ */
+export declare enum KbqThemeSelector {
+    /**
+     * Represents the default light theme.
+     * This is the standard theme that is applied
+     * when the application is first loaded if nothing else provided
+     */
+    Default = "kbq-theme-light",
+    /**
+     * This theme is used to provide a darker visual experience, often preferred in low-light environments.
+     */
+    Dark = "kbq-theme-dark"
+}
 export declare const KbqDefaultThemes: KbqTheme[];
 export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
     private rendererFactory;

package/core/styles/_koobiq-theme.scss

@@ -5,32 +5,8 @@
 
 @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 *;
-@use '../../modal/modal-theme' as *;
 @use '../../markdown/markdown-theme' as *;
-@use '../../navbar/navbar-theme' as *;
-@use '../../popover/popover-theme' as *;
 @use '../../progress-bar/progress-bar-theme' as *;
 @use '../../progress-spinner/progress-spinner-theme' as *;
 @use '../../radio/radio-theme' as *;
@@ -42,56 +18,25 @@
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
 @use '../../textarea/textarea-theme' as *;
-@use '../../timezone/timezone-option-theme' as *;
-@use '../../toast/toast-theme' as *;
-@use '../../toggle/toggle-theme' as *;
-@use '../../tooltip/tooltip-theme' as *;
-@use '../../tree-select/tree-select-theme' as *;
-@use '../../tree/tree-theme' as *;
-@use '../../table/table-theme' as *;
 @use '../forms/forms-theme' as *;
 @use '../option/option-theme' as *;
 @use '../option/optgroup-theme' as *;
 @use '../option/option-action-theme' as *;
 @use '../highlight/highlight-theme' as *;
-@use '../../dl/dl-theme' as *;
 
 @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-list-theme($theme);
-    @include kbq-loader-overlay-theme($theme);
-    @include kbq-modal-theme($theme);
-    @include kbq-markdown-theme($theme);
-    @include kbq-navbar-theme($theme);
+    @include kbq-highlight-theme();
+    // link is a directive, so styles for it should be applied globally
+    @include kbq-link-theme();
+    @include kbq-markdown-theme();
     @include kbq-option-theme($theme);
     @include kbq-optgroup-theme($theme);
     @include kbq-option-action-theme($theme);
-    @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);
@@ -101,13 +46,6 @@
     @include kbq-splitter-theme($theme);
     @include kbq-tabs-theme($theme);
     @include kbq-tag-theme($theme);
-    @include kbq-timezone-option-theme($theme);
-    @include kbq-toast-theme($theme);
-    @include kbq-toggle-theme($theme);
-    @include kbq-tooltip-theme($theme);
-    @include kbq-tree-select-theme($theme);
-    @include kbq-tree-theme($theme);
-    @include kbq-table-theme($theme);
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
@@ -115,36 +53,13 @@
         $config: kbq-typography-config($tokens);
     }
 
-    @if not $md-config {
-        $md-config: kbq-markdown-typography-config($tokens);
-    }
-
     @include kbq-base-typography();
     @include kbq-markdown-base-typography();
+    @include kbq-markdown-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);
-    @include kbq-navbar-typography($config);
     @include kbq-option-typography($config);
     @include kbq-optgroup-typography($config);
-    @include kbq-popover-typography($config);
     @include kbq-progress-bar-typography($config);
     @include kbq-progress-spinner-typography($config);
     @include kbq-radio-typography($config);
@@ -153,14 +68,5 @@
     @include kbq-sidepanel-typography($config);
     @include kbq-tabs-typography($config);
     @include kbq-tag-typography($config);
-    @include kbq-textarea-typography($config);
-    @include kbq-timezone-option-typography($config);
-    @include kbq-toast-typography($config);
-    @include kbq-toggle-typography($config);
-    @include kbq-tooltip-typography($config);
-    @include kbq-tree-select-typography($config);
-    @include kbq-tree-typography($config);
-    @include kbq-table-typography($config);
-
-    @include kbq-markdown-typography($md-config);
+    @include kbq-textarea-typography();
 }

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.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/divider/_divider-theme.scss

@@ -2,10 +2,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-divider-theme($theme) {
-    $divider: map.get(map.get($theme, components), divider);
-
+@mixin kbq-divider-theme() {
     .kbq-divider {
-        background: kbq-css-variable(divider-color, map.get($divider, color));
+        background: kbq-css-variable(divider-color);
     }
 }

package/divider/divider-tokens.scss

@@ -0,0 +1,14 @@
+.kbq-divider {
+    --kbq-divider-size-horizontal-width: 1px;
+    --kbq-divider-size-horizontal-margin-vertical: 4px;
+    --kbq-divider-size-vertical-width: 1px;
+    --kbq-divider-size-vertical-margin-horizontal: 4px;
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-divider-color: hsla(229, 15%, 6%, 12%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-divider-color: hsla(229, 15%, 22%, 100%);
+}

package/divider/divider.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './divider-theme' as *;
+
 .kbq-divider {
     display: block;
     margin: 0;
@@ -28,3 +30,5 @@
         }
     }
 }
+
+@include kbq-divider-theme();

package/dl/_dl-theme.scss

@@ -4,19 +4,17 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-dl-theme($theme) {
-    $dl: map.get(map.get($theme, components), dl);
-
+@mixin kbq-dl-theme() {
     .kbq-dt {
-        color: kbq-css-variable(description-list-term-color, map.get($dl, dt));
+        color: kbq-css-variable(description-list-term-color);
     }
 
     .kbq-dd {
-        color: kbq-css-variable(description-list-description-color, map.get($dl, dd));
+        color: kbq-css-variable(description-list-description-color);
     }
 }
 
-@mixin kbq-dl-typography($config) {
+@mixin kbq-dl-typography() {
     .kbq-dl {
         & .kbq-dt {
             @include kbq-typography-css-variables(description-list, term);

package/dl/dl-tokens.scss

@@ -0,0 +1,32 @@
+.kbq-dl {
+    --kbq-description-list-size-horizontal-content-gap-horizontal: 16px;
+    --kbq-description-list-size-horizontal-gap-vertical: 16px;
+    --kbq-description-list-size-vertical-content-gap-vertical: 2px;
+    --kbq-description-list-size-vertical-gap-vertical: 12px;
+    --kbq-description-list-font-term-font-size: 14px;
+    --kbq-description-list-font-term-line-height: 20px;
+    --kbq-description-list-font-term-letter-spacing: -0.006em;
+    --kbq-description-list-font-term-font-weight: normal;
+    --kbq-description-list-font-term-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-description-list-font-term-text-transform: null;
+    --kbq-description-list-font-term-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-description-list-font-description-font-size: 14px;
+    --kbq-description-list-font-description-line-height: 20px;
+    --kbq-description-list-font-description-letter-spacing: -0.006em;
+    --kbq-description-list-font-description-font-weight: normal;
+    --kbq-description-list-font-description-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-description-list-font-description-text-transform: null;
+    --kbq-description-list-font-description-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-description-list-term-color: hsla(229, 15%, 50%, 100%);
+    --kbq-description-list-description-color: hsla(229, 15%, 15%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-description-list-term-color: hsla(229, 15%, 50%, 100%);
+    --kbq-description-list-description-color: hsla(229, 15%, 80%, 100%);
+}

package/dl/dl.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './dl-theme' as *;
+
 .kbq-dl {
     display: grid;
     column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);
@@ -45,3 +47,6 @@
         }
     }
 }
+
+@include kbq-dl-theme();
+@include kbq-dl-typography();