@koobiq/components 17.4.0 → 17.5.0

package/checkbox/_checkbox-theme.scss

@@ -4,47 +4,40 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-checkbox-color($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
     .kbq-checkbox__frame {
-        border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
-
-        background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
+        border-color: kbq-css-variable(#{$base}-default-border);
+        background-color: kbq-css-variable(#{$base}-default-background);
 
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
+            color: kbq-css-variable(#{$base}-default-color);
         }
     }
 
     .kbq-checkbox-label {
-        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
+        color: kbq-css-variable(#{$base}-default-text);
     }
 
     & .kbq-hint .kbq-hint__text {
-        color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
+        color: kbq-css-variable(#{$base}-default-caption);
     }
 
     &:hover,
     &.kbq-hover {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-hover-border, map.get($style, hover, border));
-
-            background-color: kbq-css-variable(#{$base}-states-hover-background, map.get($style, hover, background));
+            border-color: kbq-css-variable(#{$base}-states-hover-border);
+            background-color: kbq-css-variable(#{$base}-states-hover-background);
         }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
-
-            background-color: kbq-css-variable(
-                #{$base}-states-checked-background,
-                map.get($style, checked, background)
-            );
+            border-color: kbq-css-variable(#{$base}-states-checked-border);
+            background-color: kbq-css-variable(#{$base}-states-checked-background);
         }
     }
 
@@ -53,84 +46,60 @@
         &:hover,
         &.kbq-hover {
             .kbq-checkbox__frame {
-                border-color: kbq-css-variable(
-                    #{$base}-states-checked-hover-border,
-                    map.get($style, checked-hover, border)
-                );
-
-                background-color: kbq-css-variable(
-                    #{$base}-states-checked-hover-background,
-                    map.get($style, checked-hover, background)
-                );
+                border-color: kbq-css-variable(#{$base}-states-checked-hover-border);
+                background-color: kbq-css-variable(#{$base}-states-checked-hover-background);
             }
         }
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                border-color: kbq-css-variable(
-                    #{$base}-states-checked-focused-border,
-                    map.get($style, checked-focused, border)
-                );
-                background-color: kbq-css-variable(
-                    #{$base}-states-checked-focused-background,
-                    map.get($style, checked-focused, background)
-                );
-                outline: kbq-css-variable(
-                    #{$base}-states-checked-focused-outline,
-                    map.get($style, checked-focused, outline)
-                );
+                border-color: kbq-css-variable(#{$base}-states-checked-focused-border);
+                background-color: kbq-css-variable(#{$base}-states-checked-focused-background);
+                outline: kbq-css-variable(#{$base}-states-checked-focused-outline);
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-focused-border, map.get($style, focused, border));
-            background-color: kbq-css-variable(
-                #{$base}-states-focused-background,
-                map.get($style, focused, background)
-            );
-            outline: kbq-css-variable(#{$base}-states-focused-outline, map.get($style, focused, outline));
+            border-color: kbq-css-variable(#{$base}-states-focused-border);
+            background-color: kbq-css-variable(#{$base}-states-focused-background);
+            outline: kbq-css-variable(#{$base}-states-focused-outline);
         }
     }
 
     &.kbq-disabled {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
-            background-color: kbq-css-variable(
-                #{$base}-states-disabled-background,
-                map.get($style, disabled, background)
-            );
+            border-color: kbq-css-variable(#{$base}-states-disabled-border);
+            background-color: kbq-css-variable(#{$base}-states-disabled-background);
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
+                color: kbq-css-variable(#{$base}-states-disabled-color);
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(#{$base}-states-disabled-caption, map.get($style, disabled, caption));
+            color: kbq-css-variable(#{$base}-states-disabled-caption);
         }
 
         .kbq-checkbox-label {
-            color: kbq-css-variable(#{$base}-states-disabled-text, map.get($style, disabled, text));
+            color: kbq-css-variable(#{$base}-states-disabled-text);
         }
     }
 }
 
-@mixin kbq-checkbox-theme($theme) {
-    $checkbox: map.get(map.get($theme, components), checkbox);
-
+@mixin kbq-checkbox-theme() {
     .kbq-checkbox {
-        @include kbq-checkbox-color($checkbox, theme);
+        @include kbq-checkbox-color(theme);
 
         &.kbq-error {
-            @include kbq-checkbox-color($checkbox, error);
+            @include kbq-checkbox-color(error);
         }
     }
 }
 
-@mixin kbq-checkbox-typography($config) {
+@mixin kbq-checkbox-typography() {
     .kbq-checkbox {
         @include kbq-typography-css-variables(checkbox, normal-label);
 

package/checkbox/checkbox-tokens.scss

@@ -0,0 +1,140 @@
+.kbq-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/checkbox/checkbox.scss

@@ -4,10 +4,9 @@
 @use '../core/styles/common/visually-hidden';
 @use '../core/styles/common/layout';
 
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './checkbox-theme' as *;
 
 .kbq-checkbox-checkmark,
 .kbq-checkbox-mixedmark {
@@ -43,9 +42,9 @@ $tokens: meta.module-variables(tokens) !default;
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
-    padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
+    padding-top: kbq-css-variable(checkbox-size-normal-padding-top);
 
-    padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
+    padding-bottom: kbq-css-variable(checkbox-size-normal-padding-bottom);
 
     padding-left: kbq-sum-series-css-variables(
         [checkbox-size-normal-width,
@@ -159,3 +158,6 @@ $tokens: meta.module-variables(tokens) !default;
         left: unset;
     }
 }
+
+@include kbq-checkbox-theme();
+@include kbq-checkbox-typography();

package/core/highlight/_highlight-theme.scss

@@ -1,4 +1,4 @@
-@mixin kbq-highlight-theme($theme) {
+@mixin kbq-highlight-theme() {
     .kbq-highlight {
         color: inherit;
 

package/core/pop-up/pop-up-styles.d.ts

@@ -1,2 +1,2 @@
-import { ElementRef } from '@angular/core';
-export declare const applyPopupMargins: (element: ElementRef, name: string, value: string) => void;
+import { Renderer2 } from '@angular/core';
+export declare const applyPopupMargins: (renderer: Renderer2, element: HTMLElement, name: string, value: string) => void;

package/core/pop-up/pop-up-trigger.d.ts

@@ -1,18 +1,18 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { PopUpPlacements } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
-    protected overlay: Overlay;
-    protected elementRef: ElementRef;
-    protected ngZone: NgZone;
-    protected scrollDispatcher: ScrollDispatcher;
-    protected hostView: ViewContainerRef;
-    protected scrollStrategy: any;
-    protected direction?: Directionality | undefined;
+    protected readonly overlay: Overlay;
+    protected readonly elementRef: ElementRef;
+    protected readonly ngZone: NgZone;
+    protected readonly scrollDispatcher: ScrollDispatcher;
+    protected readonly hostView: ViewContainerRef;
+    protected readonly direction: Directionality | null;
+    protected abstract scrollStrategy: () => ScrollStrategy;
     isOpen: boolean;
     enterDelay: number;
     leaveDelay: number;
@@ -40,7 +40,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     };
     protected readonly destroyed: Subject<void>;
     protected triggerName: string;
-    protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
     abstract closingActions(): Observable<any>;

package/core/pop-up/pop-up.d.ts

@@ -1,10 +1,11 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { PopUpVisibility } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUp implements OnDestroy {
-    private changeDetectorRef;
+    protected readonly renderer: Renderer2;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
     context: {
@@ -22,7 +23,6 @@ export declare abstract class KbqPopUp implements OnDestroy {
     protected closeOnInteraction: boolean;
     private showTimeoutId;
     private hideTimeoutId;
-    protected constructor(changeDetectorRef: ChangeDetectorRef);
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;

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

@@ -2,43 +2,40 @@
 
 @use '../../styles/common/tokens' as *;
 
-@mixin kbq-pseudo-checkbox-color($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-pseudo-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
-    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
+    border-color: kbq-css-variable(#{$base}-default-border);
+    background: kbq-css-variable(#{$base}-default-background);
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
+        color: kbq-css-variable(#{$base}-default-color);
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border);
+        background: kbq-css-variable(#{$base}-states-checked-background);
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
+            color: kbq-css-variable(#{$base}-states-disabled-color);
         }
 
-        border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
-        background: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
+        border-color: kbq-css-variable(#{$base}-states-disabled-border);
+        background: kbq-css-variable(#{$base}-states-disabled-background);
     }
 }
 
-@mixin kbq-pseudo-checkbox-theme($theme) {
-    $checkbox: map.get($theme, components, checkbox);
-
+@mixin kbq-pseudo-checkbox-theme() {
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color($checkbox, theme);
+        @include kbq-pseudo-checkbox-color(theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color($checkbox, error);
+            @include kbq-pseudo-checkbox-color(error);
         }
     }
 }

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();