@koobiq/components 17.6.1 → 17.7.0

package/progress-bar/_progress-bar-theme.scss

@@ -1,32 +1,26 @@
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-progress-bar-theme($theme) {
-    $progress-bar: map.get(map.get($theme, components), progress-bar);
-
+@mixin kbq-progress-bar-theme() {
     .kbq-progress-bar.kbq-theme {
         .kbq-progress-bar__inner {
-            background-color: kbq-css-variable(progress-bar-bar-background, map.get($progress-bar, bar, background));
+            background-color: kbq-css-variable(progress-bar-bar-background);
         }
 
         .kbq-progress-bar__line {
-            background-color: kbq-css-variable(progress-bar-bar-foreground, map.get($progress-bar, bar, foreground));
+            background-color: kbq-css-variable(progress-bar-bar-foreground);
         }
     }
 
     .kbq-progress-bar-text {
-        color: kbq-css-variable(progress-bar-text-color, map.get($progress-bar, text));
+        color: kbq-css-variable(progress-bar-text-color);
     }
 
     .kbq-progress-bar-caption {
-        color: kbq-css-variable(progress-bar-caption-color, map.get($progress-bar, caption));
+        color: kbq-css-variable(progress-bar-caption-color);
     }
 }
 
-@mixin kbq-progress-bar-typography($config) {
+@mixin kbq-progress-bar-typography() {
     .kbq-progress-bar-text {
         @include kbq-typography-css-variables(progress-bar, label);
     }

package/progress-bar/progress-bar-tokens.scss

@@ -0,0 +1,36 @@
+.kbq-progress-bar {
+    --kbq-progress-bar-size-container-content-gap: 8px;
+    --kbq-progress-bar-size-container-border-radius: 2px;
+    --kbq-progress-bar-size-bar-height: 4px;
+    --kbq-progress-bar-size-bar-border-radius: 2px;
+    --kbq-progress-bar-font-label-font-size: 14px;
+    --kbq-progress-bar-font-label-line-height: 20px;
+    --kbq-progress-bar-font-label-letter-spacing: -0.006em;
+    --kbq-progress-bar-font-label-font-weight: normal;
+    --kbq-progress-bar-font-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-progress-bar-font-label-text-transform: null;
+    --kbq-progress-bar-font-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-progress-bar-font-caption-font-size: 12px;
+    --kbq-progress-bar-font-caption-line-height: 16px;
+    --kbq-progress-bar-font-caption-letter-spacing: normal;
+    --kbq-progress-bar-font-caption-font-weight: normal;
+    --kbq-progress-bar-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-progress-bar-font-caption-text-transform: null;
+    --kbq-progress-bar-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-progress-bar-bar-background: hsla(229, 15%, 92%, 100%);
+    --kbq-progress-bar-bar-foreground: hsla(216, 100%, 50%, 100%);
+    --kbq-progress-bar-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-progress-bar-caption-color: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-progress-bar-bar-background: hsla(229, 15%, 25%, 100%);
+    --kbq-progress-bar-bar-foreground: hsla(216, 100%, 65%, 100%);
+    --kbq-progress-bar-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-progress-bar-caption-color: hsla(229, 15%, 60%, 100%);
+}

package/progress-bar/progress-bar.module.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./progress-bar.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/platform";
 export declare class KbqProgressBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqProgressBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqProgressBarModule, [typeof i1.KbqProgressBar, typeof i1.KbqProgressBarText, typeof i1.KbqProgressBarCaption], [typeof i2.CommonModule, typeof i3.PlatformModule], [typeof i1.KbqProgressBar, typeof i1.KbqProgressBarText, typeof i1.KbqProgressBarCaption]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqProgressBarModule, [typeof i1.KbqProgressBar, typeof i1.KbqProgressBarText, typeof i1.KbqProgressBarCaption], [typeof i2.PlatformModule], [typeof i1.KbqProgressBar, typeof i1.KbqProgressBarText, typeof i1.KbqProgressBarCaption]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqProgressBarModule>;
 }

package/progress-bar/progress-bar.scss

@@ -1,11 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/functions/timing';
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './progress-bar-theme' as *;
 
 @keyframes kbq-progress-bar-indeterminate {
     0% {
@@ -53,3 +50,6 @@ $tokens: meta.module-variables(tokens) !default;
         animation: kbq-progress-bar-indeterminate 2.1s timing.$ease-in-out-quad infinite;
     }
 }
+
+@include kbq-progress-bar-theme();
+@include kbq-progress-bar-typography();

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,28 +1,22 @@
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-progress-spinner-theme($theme) {
-    $progress-spinner: map.get(map.get($theme, components), progress-spinner);
-
+@mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
         .kbq-progress-spinner__circle {
-            stroke: kbq-css-variable(progress-spinner-circle-background, map.get($progress-spinner, circle));
+            stroke: kbq-css-variable(progress-spinner-circle-background);
         }
     }
 
     .kbq-progress-spinner-text {
-        color: kbq-css-variable(progress-spinner-text-color, map.get($progress-spinner, text));
+        color: kbq-css-variable(progress-spinner-text-color);
     }
 
     .kbq-progress-spinner-caption {
-        color: kbq-css-variable(progress-spinner-caption-color, map.get($progress-spinner, caption));
+        color: kbq-css-variable(progress-spinner-caption-color);
     }
 }
 
-@mixin kbq-progress-spinner-typography($config) {
+@mixin kbq-progress-spinner-typography() {
     .kbq-progress-spinner-text {
         @include kbq-typography-css-variables(progress-spinner, label);
     }

package/progress-spinner/progress-spinner-tokens.scss

@@ -0,0 +1,38 @@
+.kbq-progress-spinner {
+    --kbq-progress-spinner-size-compact-size: 16px;
+    --kbq-progress-spinner-size-compact-stroke-width: 2px;
+    --kbq-progress-spinner-size-compact-content-gap-vertical: 2px;
+    --kbq-progress-spinner-size-compact-content-gap-horizontal: 8px;
+    --kbq-progress-spinner-size-big-size: 48px;
+    --kbq-progress-spinner-size-big-stroke-width: 3px;
+    --kbq-progress-spinner-size-big-content-gap-vertical: 2px;
+    --kbq-progress-spinner-size-big-content-gap-horizontal: 8px;
+    --kbq-progress-spinner-font-label-font-size: 14px;
+    --kbq-progress-spinner-font-label-line-height: 20px;
+    --kbq-progress-spinner-font-label-letter-spacing: -0.006em;
+    --kbq-progress-spinner-font-label-font-weight: normal;
+    --kbq-progress-spinner-font-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-progress-spinner-font-label-text-transform: null;
+    --kbq-progress-spinner-font-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-progress-spinner-font-caption-font-size: 12px;
+    --kbq-progress-spinner-font-caption-line-height: 16px;
+    --kbq-progress-spinner-font-caption-letter-spacing: normal;
+    --kbq-progress-spinner-font-caption-font-weight: normal;
+    --kbq-progress-spinner-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-progress-spinner-font-caption-text-transform: null;
+    --kbq-progress-spinner-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-progress-spinner-circle-background: hsla(216, 100%, 50%, 100%);
+    --kbq-progress-spinner-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-progress-spinner-caption-color: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-progress-spinner-circle-background: hsla(216, 100%, 65%, 100%);
+    --kbq-progress-spinner-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-progress-spinner-caption-color: hsla(229, 15%, 60%, 100%);
+}

package/progress-spinner/progress-spinner.module.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./progress-spinner.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/platform";
+import * as i2 from "@angular/cdk/platform";
+import * as i3 from "@angular/common";
 export declare class KbqProgressSpinnerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqProgressSpinnerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqProgressSpinnerModule, [typeof i1.KbqProgressSpinner, typeof i1.KbqProgressSpinnerText, typeof i1.KbqProgressSpinnerCaption], [typeof i2.CommonModule, typeof i3.PlatformModule], [typeof i1.KbqProgressSpinner, typeof i1.KbqProgressSpinnerText, typeof i1.KbqProgressSpinnerCaption]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqProgressSpinnerModule, [typeof i1.KbqProgressSpinner, typeof i1.KbqProgressSpinnerText, typeof i1.KbqProgressSpinnerCaption], [typeof i2.PlatformModule, typeof i3.NgStyle], [typeof i1.KbqProgressSpinner, typeof i1.KbqProgressSpinnerText, typeof i1.KbqProgressSpinnerCaption]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqProgressSpinnerModule>;
 }

package/progress-spinner/progress-spinner.scss

@@ -1,11 +1,8 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/functions/timing';
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './progress-spinner-theme' as *;
 
 @keyframes kbq-progress-spinner-indeterminate {
     100% {
@@ -65,3 +62,6 @@ $tokens: meta.module-variables(tokens) !default;
         stroke-dashoffset: 80%;
     }
 }
+
+@include kbq-progress-spinner-theme();
+@include kbq-progress-spinner-typography();

package/radio/_radio-theme.scss

@@ -1,91 +1,76 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-radio-state($component, $type, $state-name) {
-    $state: map.get($component, $type, $state-name);
+@mixin kbq-radio-state($type, $state-name) {
     $base-path: radio-#{$type}-#{$state-name};
 
     & .kbq-radio-button__outer-circle {
-        border-color: kbq-css-variable(#{$base-path}-outer-circle-border, map.get($state, outer-circle-border));
-        background: kbq-css-variable(#{$base-path}-outer-circle-background, map.get($state, outer-circle-background));
+        border-color: kbq-css-variable(#{$base-path}-outer-circle-border);
+        background: kbq-css-variable(#{$base-path}-outer-circle-background);
         // FIXME: move under &.cdk-keyboard-focused, because used only for focused state.
-        box-shadow: kbq-css-variable(#{$base-path}-outer-circle-shadow, map.get($state, outer-circle-shadow));
+        box-shadow: kbq-css-variable(#{$base-path}-outer-circle-shadow);
     }
 
     & .kbq-radio-button__inner-circle {
-        background: kbq-css-variable(#{$base-path}-inner-circle-background, map.get($state, inner-circle-background));
+        background: kbq-css-variable(#{$base-path}-inner-circle-background);
     }
 }
 
-@mixin kbq-radio-color($component, $type-name) {
-    @include kbq-radio-state($component, $type-name, default);
+@mixin kbq-radio-color($type-name) {
+    @include kbq-radio-state($type-name, default);
 
     & .kbq-hint .kbq-hint__text {
-        color: kbq-css-variable(radio-#{$type-name}-default-caption, map.get($component, $type-name, default, caption));
+        color: kbq-css-variable(radio-#{$type-name}-default-caption);
     }
 
     &:hover {
-        @include kbq-radio-state($component, $type-name, states-hover);
+        @include kbq-radio-state($type-name, states-hover);
     }
 
     &.cdk-keyboard-focused {
-        @include kbq-radio-state($component, $type-name, states-focused);
+        @include kbq-radio-state($type-name, states-focused);
     }
 
     &.kbq-selected:not(.kbq-disabled) {
-        @include kbq-radio-state($component, $type-name, states-checked);
+        @include kbq-radio-state($type-name, states-checked);
     }
 
     &.kbq-selected.kbq-disabled {
-        @include kbq-radio-state($component, $type-name, states-checked-disabled);
+        @include kbq-radio-state($type-name, states-checked-disabled);
     }
 
     &.kbq-disabled {
-        @include kbq-radio-state($component, $type-name, states-disabled);
+        @include kbq-radio-state($type-name, states-disabled);
 
         & .kbq-radio-label {
             cursor: default;
-            color: kbq-css-variable(
-                radio-#{$type-name}-states-disabled-caption,
-                map.get($component, $type-name, states-disabled, caption)
-            );
+            color: kbq-css-variable(radio-#{$type-name}-states-disabled-caption);
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(
-                radio-#{$type-name}-states-disabled-caption,
-                map.get($component, $type-name, states-disabled, caption)
-            );
+            color: kbq-css-variable(radio-#{$type-name}-states-disabled-caption);
         }
     }
 }
 
-@mixin kbq-radio-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $radio: map.get(map.get($theme, components), radio);
-
+@mixin kbq-radio-theme() {
     .kbq-radio-button {
         & .kbq-radio-button__inner-circle {
             border-width: 0 !important;
         }
 
-        @include kbq-radio-color($radio, theme);
+        @include kbq-radio-color(theme);
 
-        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+        color: kbq-css-variable(foreground-contrast);
 
         &.kbq-error {
-            @include kbq-radio-color($radio, error);
+            @include kbq-radio-color(error);
 
-            color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+            color: kbq-css-variable(foreground-contrast);
         }
     }
 }
 
-@mixin kbq-radio-typography($config) {
+@mixin kbq-radio-typography() {
     .kbq-radio-button {
         @include kbq-typography-css-variables(radio, normal-label);
 

package/radio/radio-tokens.scss

@@ -0,0 +1,166 @@
+.kbq-radio-button {
+    --kbq-radio-size-normal-outer-size: 16px;
+    --kbq-radio-size-normal-inner-size: 6px;
+    --kbq-radio-size-normal-horizontal-content-padding: 8px;
+    --kbq-radio-size-normal-vertical-content-padding: 2px;
+    --kbq-radio-size-normal-vertical-gap: 12px;
+    --kbq-radio-size-normal-top: 0;
+    --kbq-radio-size-big-outer-size: 16px;
+    --kbq-radio-size-big-inner-size: 6px;
+    --kbq-radio-size-big-horizontal-content-padding: 8px;
+    --kbq-radio-size-big-vertical-content-padding: 2px;
+    --kbq-radio-size-big-vertical-gap: 12px;
+    --kbq-radio-size-big-top: 2px;
+    --kbq-radio-font-normal-label-font-size: 14px;
+    --kbq-radio-font-normal-label-line-height: 20px;
+    --kbq-radio-font-normal-label-letter-spacing: -0.006em;
+    --kbq-radio-font-normal-label-font-weight: normal;
+    --kbq-radio-font-normal-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-radio-font-normal-label-text-transform: null;
+    --kbq-radio-font-normal-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-radio-font-normal-caption-font-size: 12px;
+    --kbq-radio-font-normal-caption-line-height: 16px;
+    --kbq-radio-font-normal-caption-letter-spacing: normal;
+    --kbq-radio-font-normal-caption-font-weight: normal;
+    --kbq-radio-font-normal-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-radio-font-normal-caption-text-transform: null;
+    --kbq-radio-font-normal-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-radio-font-big-label-font-size: 16px;
+    --kbq-radio-font-big-label-line-height: 24px;
+    --kbq-radio-font-big-label-letter-spacing: -0.011em;
+    --kbq-radio-font-big-label-font-weight: normal;
+    --kbq-radio-font-big-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-radio-font-big-label-text-transform: null;
+    --kbq-radio-font-big-label-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-radio-font-big-caption-font-size: 14px;
+    --kbq-radio-font-big-caption-line-height: 20px;
+    --kbq-radio-font-big-caption-letter-spacing: -0.006em;
+    --kbq-radio-font-big-caption-font-weight: normal;
+    --kbq-radio-font-big-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-radio-font-big-caption-text-transform: null;
+    --kbq-radio-font-big-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
+    --kbq-radio-theme-default-outer-circle-border: hsla(229, 15%, 80%, 100%);
+    --kbq-radio-theme-default-outer-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-default-inner-circle-background: transparent;
+    --kbq-radio-theme-default-caption: hsla(229, 15%, 50%, 100%);
+    --kbq-radio-theme-states-hover-outer-circle-border: hsla(229, 15%, 80%, 100%);
+    --kbq-radio-theme-states-hover-outer-circle-background: hsla(229, 15%, 50%, 8%);
+    --kbq-radio-theme-states-hover-inner-circle-background: transparent;
+    --kbq-radio-theme-states-checked-outer-circle-border: transparent;
+    --kbq-radio-theme-states-checked-outer-circle-background: hsla(216, 100%, 50%, 100%);
+    --kbq-radio-theme-states-checked-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-hover-outer-circle-border: hsla(216, 100%, 45%, 100%);
+    --kbq-radio-theme-states-checked-hover-outer-circle-background: hsla(216, 100%, 45%, 100%);
+    --kbq-radio-theme-states-checked-hover-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-disabled-outer-circle-border: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-theme-states-checked-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-theme-states-checked-disabled-inner-circle-background: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-theme-states-focused-outer-circle-border: transparent;
+    --kbq-radio-theme-states-focused-outer-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-focused-inner-circle-background: transparent;
+    --kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(216, 100%, 60%, 100%);
+    --kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;
+    --kbq-radio-theme-states-checked-focused-outer-circle-background: hsla(216, 100%, 50%, 100%);
+    --kbq-radio-theme-states-checked-focused-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(216, 100%, 60%, 100%);
+    --kbq-radio-theme-states-disabled-outer-circle-border: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-theme-states-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-theme-states-disabled-inner-circle-background: transparent;
+    --kbq-radio-theme-states-disabled-caption: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-error-default-outer-circle-border: hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-default-outer-circle-background: hsla(7, 97%, 99%, 100%);
+    --kbq-radio-error-default-inner-circle-background: transparent;
+    --kbq-radio-error-states-hover-outer-circle-border: hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-states-hover-outer-circle-background: hsla(7, 97%, 92%, 100%);
+    --kbq-radio-error-states-hover-inner-circle-background: transparent;
+    --kbq-radio-error-states-checked-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-outer-circle-background: hsla(7, 97%, 60%, 100%);
+    --kbq-radio-error-states-checked-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-hover-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-hover-outer-circle-background: hsla(7, 97%, 56%, 100%);
+    --kbq-radio-error-states-checked-hover-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-disabled-outer-circle-border: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-error-states-checked-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-error-states-checked-disabled-inner-circle-background: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-error-states-focused-outer-circle-border: transparent;
+    --kbq-radio-error-states-focused-outer-circle-background: hsla(7, 97%, 99%, 100%);
+    --kbq-radio-error-states-focused-inner-circle-background: transparent;
+    --kbq-radio-error-states-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-states-checked-focused-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-focused-outer-circle-background: hsla(7, 97%, 60%, 100%);
+    --kbq-radio-error-states-checked-focused-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-states-disabled-outer-circle-border: hsla(229, 15%, 15%, 32%);
+    --kbq-radio-error-states-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-error-states-disabled-inner-circle-background: transparent;
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
+    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
+    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
+    --kbq-radio-theme-default-outer-circle-border: hsla(229, 15%, 30%, 100%);
+    --kbq-radio-theme-default-outer-circle-background: hsla(229, 15%, 12%, 100%);
+    --kbq-radio-theme-default-inner-circle-background: transparent;
+    --kbq-radio-theme-default-caption: hsla(229, 15%, 60%, 100%);
+    --kbq-radio-theme-states-hover-outer-circle-border: hsla(229, 15%, 30%, 100%);
+    --kbq-radio-theme-states-hover-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-theme-states-hover-inner-circle-background: transparent;
+    --kbq-radio-theme-states-checked-outer-circle-border: transparent;
+    --kbq-radio-theme-states-checked-outer-circle-background: hsla(216, 100%, 50%, 100%);
+    --kbq-radio-theme-states-checked-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-hover-outer-circle-border: hsla(216, 100%, 45%, 100%);
+    --kbq-radio-theme-states-checked-hover-outer-circle-background: hsla(216, 100%, 45%, 100%);
+    --kbq-radio-theme-states-checked-hover-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-disabled-outer-circle-border: hsla(229, 15%, 50%, 32%);
+    --kbq-radio-theme-states-checked-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-theme-states-checked-disabled-inner-circle-background: hsla(229, 15%, 30%, 100%);
+    --kbq-radio-theme-states-focused-outer-circle-border: transparent;
+    --kbq-radio-theme-states-focused-outer-circle-background: hsla(229, 15%, 12%, 100%);
+    --kbq-radio-theme-states-focused-inner-circle-background: transparent;
+    --kbq-radio-theme-states-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(216, 100%, 60%, 100%);
+    --kbq-radio-theme-states-checked-focused-outer-circle-border: transparent;
+    --kbq-radio-theme-states-checked-focused-outer-circle-background: hsla(216, 100%, 50%, 100%);
+    --kbq-radio-theme-states-checked-focused-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-theme-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(216, 100%, 60%, 100%);
+    --kbq-radio-theme-states-disabled-outer-circle-border: hsla(229, 15%, 50%, 32%);
+    --kbq-radio-theme-states-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-theme-states-disabled-inner-circle-background: transparent;
+    --kbq-radio-theme-states-disabled-caption: hsla(229, 15%, 40%, 100%);
+    --kbq-radio-error-default-outer-circle-border: hsla(7, 97%, 35%, 100%);
+    --kbq-radio-error-default-outer-circle-background: hsla(7, 97%, 6%, 100%);
+    --kbq-radio-error-default-inner-circle-background: transparent;
+    --kbq-radio-error-states-hover-outer-circle-border: hsla(7, 97%, 35%, 100%);
+    --kbq-radio-error-states-hover-outer-circle-background: hsla(7, 97%, 13%, 100%);
+    --kbq-radio-error-states-hover-inner-circle-background: transparent;
+    --kbq-radio-error-states-checked-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-outer-circle-background: hsla(7, 97%, 41%, 100%);
+    --kbq-radio-error-states-checked-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-hover-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-hover-outer-circle-background: hsla(7, 97%, 42%, 100%);
+    --kbq-radio-error-states-checked-hover-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-disabled-outer-circle-border: hsla(229, 15%, 50%, 32%);
+    --kbq-radio-error-states-checked-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-error-states-checked-disabled-inner-circle-background: hsla(229, 15%, 30%, 100%);
+    --kbq-radio-error-states-focused-outer-circle-border: transparent;
+    --kbq-radio-error-states-focused-outer-circle-background: hsla(7, 97%, 6%, 100%);
+    --kbq-radio-error-states-focused-inner-circle-background: transparent;
+    --kbq-radio-error-states-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-states-checked-focused-outer-circle-border: transparent;
+    --kbq-radio-error-states-checked-focused-outer-circle-background: hsla(7, 97%, 41%, 100%);
+    --kbq-radio-error-states-checked-focused-inner-circle-background: hsla(0, 0%, 100%, 100%);
+    --kbq-radio-error-states-checked-focused-outer-circle-shadow: 0 0 0.1px 2px hsla(7, 97%, 45%, 100%);
+    --kbq-radio-error-states-disabled-outer-circle-border: hsla(229, 15%, 50%, 32%);
+    --kbq-radio-error-states-disabled-outer-circle-background: hsla(229, 15%, 50%, 16%);
+    --kbq-radio-error-states-disabled-inner-circle-background: transparent;
+}

package/radio/radio.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./radio.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@koobiq/components/core";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "@koobiq/components/core";
 export declare class KbqRadioModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRadioModule, [typeof i1.KbqRadioGroup, typeof i1.KbqRadioButton], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.KbqCommonModule], [typeof i1.KbqRadioGroup, typeof i1.KbqRadioButton]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRadioModule, [typeof i1.KbqRadioGroup, typeof i1.KbqRadioButton], [typeof i2.A11yModule, typeof i3.KbqCommonModule], [typeof i1.KbqRadioGroup, typeof i1.KbqRadioButton]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqRadioModule>;
 }

package/radio/radio.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 './radio-theme' as *;
 
 .kbq-radio-group {
     display: inline-flex;
@@ -134,3 +130,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-radio-theme();
+@include kbq-radio-typography();

package/risk-level/_risk-level-theme.scss

@@ -4,78 +4,74 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-risk-level-filled-color($component, $type, $sub-type, $style-name) {
-    $style: map.get($component, $type, $sub-type, $style-name);
+@mixin kbq-risk-level-filled-color($type, $sub-type, $style-name) {
     $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
     border: transparent;
 
-    color: kbq-css-variable(#{$base}-color, map.get($style, color));
-    background: kbq-css-variable(#{$base}-background, map.get($style, background));
+    color: kbq-css-variable(#{$base}-color);
+    background: kbq-css-variable(#{$base}-background);
 }
 
-@mixin kbq-risk-level-outline-color($component, $type, $sub-type, $style-name) {
-    $style: map.get($component, $type, $sub-type, $style-name);
+@mixin kbq-risk-level-outline-color($type, $sub-type, $style-name) {
     $base: risk-level-#{$type}-#{$sub-type}-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-border, map.get($style, border));
+    border-color: kbq-css-variable(#{$base}-border);
 
-    color: kbq-css-variable(#{$base}-color, map.get($style, color));
-    background: kbq-css-variable(#{$base}-background, map.get($style, background));
+    color: kbq-css-variable(#{$base}-color);
+    background: kbq-css-variable(#{$base}-background);
 }
 
-@mixin kbq-risk-level-theme($theme) {
-    $risk-level: map.get(map.get($theme, components), risk-level);
-
+@mixin kbq-risk-level-theme() {
     .kbq-risk-level_filled {
         &.kbq-risk-level_fade-contrast {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, contrast);
+            @include kbq-risk-level-filled-color(filled, fade-on, contrast);
         }
 
         &.kbq-risk-level_fade-success {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, success);
+            @include kbq-risk-level-filled-color(filled, fade-on, success);
         }
 
         &.kbq-risk-level_fade-warning {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, warning);
+            @include kbq-risk-level-filled-color(filled, fade-on, warning);
         }
 
         &.kbq-risk-level_fade-error {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-on, error);
+            @include kbq-risk-level-filled-color(filled, fade-on, error);
         }
 
         &.kbq-risk-level_success {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, success);
+            @include kbq-risk-level-filled-color(filled, fade-off, success);
         }
 
         &.kbq-risk-level_warning {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, warning);
+            @include kbq-risk-level-filled-color(filled, fade-off, warning);
         }
 
         &.kbq-risk-level_error {
-            @include kbq-risk-level-filled-color($risk-level, filled, fade-off, error);
+            @include kbq-risk-level-filled-color(filled, fade-off, error);
         }
     }
 
     .kbq-risk-level_outline {
         &.kbq-risk-level_fade-contrast {
-            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, contrast);
+            @include kbq-risk-level-outline-color(outline, fade-on, contrast);
         }
 
         &.kbq-risk-level_fade-success {
-            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, success);
+            @include kbq-risk-level-outline-color(outline, fade-on, success);
         }
 
         &.kbq-risk-level_fade-warning {
-            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, warning);
+            @include kbq-risk-level-outline-color(outline, fade-on, warning);
         }
 
         &.kbq-risk-level_fade-error {
-            @include kbq-risk-level-outline-color($risk-level, outline, fade-on, error);
+            @include kbq-risk-level-outline-color(outline, fade-on, error);
         }
     }
 }
 
-@mixin kbq-risk-level-typography($config) {
+@mixin kbq-risk-level-typography() {
     .kbq-risk-level {
         @include kbq-typography-css-variables(risk-level, text);
     }