@koobiq/components 17.4.0 → 17.6.0

package/icon/icon.scss

@@ -1,6 +1,8 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use './icon-theme' as *;
+
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }
@@ -24,3 +26,5 @@
 .kbq-icon-flip-vh {
     transform: scale(-1);
 }
+
+@include kbq-icon-theme();

package/input/_input-theme.scss

@@ -1,10 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-input-typography($config) {
+@mixin kbq-input-typography() {
     .kbq-input,
     .kbq-input.kbq-input-password::placeholder {
         @include kbq-typography-css-variables(input, text);

package/input/input-tokens.scss

@@ -0,0 +1,12 @@
+.kbq-input {
+    --kbq-input-size-padding-horizontal: 12px;
+    --kbq-input-size-padding-vertical: 6px;
+    --kbq-input-font-text-font-size: 14px;
+    --kbq-input-font-text-line-height: 20px;
+    --kbq-input-font-text-letter-spacing: -0.006em;
+    --kbq-input-font-text-font-weight: normal;
+    --kbq-input-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-input-font-text-text-transform: null;
+    --kbq-input-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}

package/input/input.scss

@@ -1,11 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/input';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
+@use './input-theme' as *;
+
 .kbq-input {
     @include input.kbq-reset-input();
 
@@ -42,3 +39,5 @@ input.kbq-input:invalid {
 input.kbq-input::placeholder {
     opacity: 1;
 }
+
+@include kbq-input-typography();

package/link/_link-theme.scss

@@ -1,10 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-link-geometry($tokens) {
+@use './link-tokens';
+
+@mixin kbq-link-geometry() {
     display: inline;
 
     text-decoration: none;
@@ -67,73 +65,67 @@
     }
 }
 
-@mixin kbq-link-state($component, $state-name: null) {
-    $state: $component;
+@mixin kbq-link-state($state-name: null) {
     $base-path: link;
 
     @if $state-name {
-        $state: map.get($component, $state-name);
         $base-path: link-#{$state-name};
     }
 
-    color: kbq-css-variable(#{$base-path}-text, map.get($state, text));
+    color: kbq-css-variable(#{$base-path}-text);
 
     &.kbq-text-only,
     &.kbq-text-with-icon .kbq-link__text,
     &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom, map.get($state, border-bottom));
+        border-bottom-color: kbq-css-variable(#{$base-path}-border-bottom);
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base-path}-text, map.get($state, text)) !important;
+        color: kbq-css-variable(#{$base-path}-text) !important;
     }
 }
 
-@mixin kbq-link-theme($theme) {
-    $link: map.get(map.get($theme, components), link);
-
-    $tokens: map.get($theme, tokens);
-
+@mixin kbq-link-theme() {
     .kbq-link {
-        @include kbq-link-geometry($tokens);
+        @include kbq-link-geometry();
 
-        @include kbq-link-state($link);
+        @include kbq-link-state();
 
         transition: color ease-out 300ms;
 
         &:hover {
             transition: color 0ms;
 
-            @include kbq-link-state($link, state-hover);
+            @include kbq-link-state(state-hover);
         }
 
         &:active,
         &.kbq-active {
-            @include kbq-link-state($link, state-active);
+            @include kbq-link-state(state-active);
         }
 
         &.kbq-link_use-visited:not(.kbq-disabled):visited {
-            @include kbq-link-state($link, state-visited);
+            @include kbq-link-state(state-visited);
 
             &:hover {
-                @include kbq-link-state($link, state-visited-hover);
+                @include kbq-link-state(state-visited-hover);
             }
 
             &:active,
             &.kbq-active {
-                @include kbq-link-state($link, state-visited-active);
+                @include kbq-link-state(state-visited-active);
             }
         }
 
         &.cdk-keyboard-focused {
-            outline: kbq-css-variable(link-state-focused-outline, map.get($link, state-focused, outline)) solid;
+            outline: kbq-css-variable(link-state-focused-outline) solid;
         }
 
         &.kbq-disabled {
             cursor: default;
             pointer-events: none;
 
-            @include kbq-link-state($link, state-disabled);
+            @include kbq-link-state(state-disabled);
         }
 
         @media print {
@@ -153,7 +145,7 @@
     }
 }
 
-@mixin kbq-link-typography($config) {
+@mixin kbq-link-typography() {
     .kbq-link {
         @include kbq-typography-css-variables(link, normal);
 

package/link/link-tokens.scss

@@ -0,0 +1,67 @@
+.kbq-link {
+    --kbq-link-size-state-focused-outline-offset: 0px;
+    --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-compact-content-padding: 2px;
+    --kbq-link-size-normal-content-padding: 2px;
+    --kbq-link-size-big-content-padding: 4px;
+    --kbq-link-font-compact-font-size: 12px;
+    --kbq-link-font-compact-line-height: 16px;
+    --kbq-link-font-compact-letter-spacing: normal;
+    --kbq-link-font-compact-font-weight: normal;
+    --kbq-link-font-compact-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-compact-text-transform: null;
+    --kbq-link-font-compact-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-normal-font-size: 14px;
+    --kbq-link-font-normal-line-height: 20px;
+    --kbq-link-font-normal-letter-spacing: -0.006em;
+    --kbq-link-font-normal-font-weight: normal;
+    --kbq-link-font-normal-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-normal-text-transform: null;
+    --kbq-link-font-normal-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-big-font-size: 16px;
+    --kbq-link-font-big-line-height: 24px;
+    --kbq-link-font-big-letter-spacing: -0.011em;
+    --kbq-link-font-big-font-weight: normal;
+    --kbq-link-font-big-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-big-text-transform: null;
+    --kbq-link-font-big-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-link-text: hsla(216, 100%, 50%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 45%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 40%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 35%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 45%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 40%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-link-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 50%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 55%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 60%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 70%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 50%, 32%);
+}

package/list/_list-theme.scss

@@ -1,63 +1,52 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-list-item($component, $state-name) {
-    $state: map.get($component, $state-name);
-
-    background: kbq-css-variable(list-#{$state-name}-container-background, map.get($state, container-background));
+@mixin kbq-list-item($state-name) {
+    background: kbq-css-variable(list-#{$state-name}-container-background);
 
     .kbq-list-text {
-        color: kbq-css-variable(list-#{$state-name}-text-color, map.get($state, text));
+        color: kbq-css-variable(list-#{$state-name}-text-color);
     }
 
     .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-color, map.get($state, icon));
+        color: kbq-css-variable(list-#{$state-name}-icon-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$state-name}-icon-button-color, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$state-name}-icon-button-color);
     }
 
     .kbq-list-option-caption {
-        color: kbq-css-variable(list-#{$state-name}-caption-color, map.get($state, caption));
+        color: kbq-css-variable(list-#{$state-name}-caption-color);
     }
 }
 
-@mixin kbq-list-theme($theme) {
-    $list-item: map.get($theme, components, list-item);
-
+@mixin kbq-list-theme() {
     .kbq-list-option {
-        @include kbq-list-item($list-item, default);
+        @include kbq-list-item(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item($list-item, states-hover);
+            @include kbq-list-item(states-hover);
         }
 
         &.kbq-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-list-item($list-item, states-selected);
+            @include kbq-list-item(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item($list-item, states-selected-hover);
+                @include kbq-list-item(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item($list-item, states-disabled);
+            @include kbq-list-item(states-disabled);
         }
     }
 }
 
-@mixin kbq-list-typography($config) {
+@mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
         @include kbq-typography-css-variables(list, text);

package/list/list-tokens.scss

@@ -0,0 +1,100 @@
+.kbq-list,
+.kbq-list-selection {
+    --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) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 8%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 94%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 90%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 15%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 15%, 32%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-list-default-container-background: transparent;
+    --kbq-list-default-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-default-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-default-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-list-states-hover-container-background: hsla(229, 15%, 50%, 16%);
+    --kbq-list-states-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-container-background: hsla(216, 100%, 18%, 100%);
+    --kbq-list-states-selected-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-selected-hover-container-background: hsla(216, 100%, 15%, 100%);
+    --kbq-list-states-selected-hover-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-color: hsla(229, 15%, 80%, 100%);
+    --kbq-list-states-selected-hover-icon-button-color: hsla(229, 15%, 45%, 100%);
+    --kbq-list-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);
+    --kbq-list-states-disabled-container-background: transparent;
+    --kbq-list-states-disabled-text-color: hsla(229, 15%, 40%, 100%);
+    --kbq-list-states-disabled-icon-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-icon-button-color: hsla(229, 15%, 30%, 100%);
+    --kbq-list-states-disabled-caption-color: hsla(229, 15%, 40%, 100%);
+}

package/list/list.scss

@@ -4,6 +4,8 @@
 @use '../core/styles/common/list';
 @use '../core/styles/common/tokens' as *;
 
+@use './list-theme' as *;
+
 .kbq-list,
 .kbq-list-selection {
     display: block;
@@ -34,3 +36,6 @@
         }
     }
 }
+
+@include kbq-list-theme();
+@include kbq-list-typography();

package/loader-overlay/_loader-overlay-theme.scss

@@ -1,52 +1,37 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-loader-overlay-theme($theme) {
-    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
-
+@mixin kbq-loader-overlay-theme() {
     // FIXME: move to unified mixin if necessary
     .kbq-loader-overlay_filled {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(
-                loader-overlay-filled-overlay-background,
-                map.get($loader-overlay, filled, background)
-            );
+            background: kbq-css-variable(loader-overlay-filled-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-filled-text-color, map.get($loader-overlay, filled, text));
+            color: kbq-css-variable(loader-overlay-filled-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(loader-overlay-filled-caption-color, map.get($loader-overlay, filled, caption));
+            color: kbq-css-variable(loader-overlay-filled-caption-color);
         }
     }
 
     .kbq-loader-overlay_transparent {
         &.kbq-loader-overlay {
-            background: kbq-css-variable(
-                loader-overlay-transparent-overlay-background,
-                map.get($loader-overlay, transparent, background)
-            );
+            background: kbq-css-variable(loader-overlay-transparent-overlay-background);
         }
 
         & .kbq-loader-overlay-text {
-            color: kbq-css-variable(loader-overlay-transparent-text-color, map.get($loader-overlay, transparent, text));
+            color: kbq-css-variable(loader-overlay-transparent-text-color);
         }
 
         & .kbq-loader-overlay-caption {
-            color: kbq-css-variable(
-                loader-overlay-transparent-caption-color,
-                map.get($loader-overlay, transparent, caption)
-            );
+            color: kbq-css-variable(loader-overlay-transparent-caption-color);
         }
     }
 }
 
-@mixin kbq-loader-overlay-typography($config) {
+@mixin kbq-loader-overlay-typography() {
     .kbq-loader-overlay_big {
         & .kbq-loader-overlay-text {
             @include kbq-typography-css-variables(loader-overlay, big-text);

package/loader-overlay/loader-overlay-tokens.scss

@@ -0,0 +1,58 @@
+.kbq-loader-overlay {
+    --kbq-loader-overlay-size-big-overlay-padding-horizontal: 32px;
+    --kbq-loader-overlay-size-big-loader-margin-bottom: 24px;
+    --kbq-loader-overlay-size-big-content-content-gap-vertical: 4px;
+    --kbq-loader-overlay-size-compact-overlay-padding-horizontal: 32px;
+    --kbq-loader-overlay-size-compact-loader-margin-bottom: 8px;
+    --kbq-loader-overlay-size-compact-content-content-gap-vertical: 2px;
+    --kbq-loader-overlay-font-big-text-font-size: 18px;
+    --kbq-loader-overlay-font-big-text-line-height: 26px;
+    --kbq-loader-overlay-font-big-text-letter-spacing: normal;
+    --kbq-loader-overlay-font-big-text-font-weight: 600;
+    --kbq-loader-overlay-font-big-text-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-big-text-text-transform: null;
+    --kbq-loader-overlay-font-big-text-font-feature-settings: 'calt', 'kern', 'liga';
+    --kbq-loader-overlay-font-big-caption-font-size: 14px;
+    --kbq-loader-overlay-font-big-caption-line-height: 20px;
+    --kbq-loader-overlay-font-big-caption-letter-spacing: -0.006em;
+    --kbq-loader-overlay-font-big-caption-font-weight: normal;
+    --kbq-loader-overlay-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-big-caption-text-transform: null;
+    --kbq-loader-overlay-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-loader-overlay-font-compact-text-font-size: 14px;
+    --kbq-loader-overlay-font-compact-text-line-height: 20px;
+    --kbq-loader-overlay-font-compact-text-letter-spacing: -0.006em;
+    --kbq-loader-overlay-font-compact-text-font-weight: normal;
+    --kbq-loader-overlay-font-compact-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-compact-text-text-transform: null;
+    --kbq-loader-overlay-font-compact-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-loader-overlay-font-compact-caption-font-size: 12px;
+    --kbq-loader-overlay-font-compact-caption-line-height: 16px;
+    --kbq-loader-overlay-font-compact-caption-letter-spacing: normal;
+    --kbq-loader-overlay-font-compact-caption-font-weight: normal;
+    --kbq-loader-overlay-font-compact-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-loader-overlay-font-compact-caption-text-transform: null;
+    --kbq-loader-overlay-font-compact-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-loader-overlay-transparent-overlay-background: hsla(229, 15%, 99%, 88%);
+    --kbq-loader-overlay-transparent-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-loader-overlay-transparent-caption-color: hsla(229, 15%, 50%, 100%);
+    --kbq-loader-overlay-filled-overlay-background: hsla(0, 0%, 100%, 100%);
+    --kbq-loader-overlay-filled-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-loader-overlay-filled-caption-color: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-loader-overlay-transparent-overlay-background: hsla(229, 15%, 12%, 80%);
+    --kbq-loader-overlay-transparent-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-loader-overlay-transparent-caption-color: hsla(229, 15%, 60%, 100%);
+    --kbq-loader-overlay-filled-overlay-background: hsla(229, 15%, 12%, 100%);
+    --kbq-loader-overlay-filled-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-loader-overlay-filled-caption-color: hsla(229, 15%, 60%, 100%);
+}

package/loader-overlay/loader-overlay.scss

@@ -1,10 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './loader-overlay-theme' as *;
 
 .kbq-loader-overlay_parent {
     position: relative;
@@ -72,3 +68,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-loader-overlay-theme();
+@include kbq-loader-overlay-typography();