@koobiq/components 17.5.0 → 17.6.1

package/schematics/ng-add/index.js

@@ -52,13 +52,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.5.0");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.5.0");
+        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.6.1");
+        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.6.1");
         addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.5.0");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.5.0");
+        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.5.1");
+        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.5.1");
         addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         addPackageToPackageJson(tree, 'luxon', "^3.4.4");
         addPackageToPackageJson(tree, 'marked', "^9.0.0");

package/table/_table-theme.scss

@@ -1,20 +1,15 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-table-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $states-background: map.get($theme, states, background);
-    $line: map.get($theme, line);
-
+@mixin kbq-table-theme() {
     .kbq-table {
         & > thead {
-            color: kbq-css-variable(foreground-contrast-secondary, map.get($foreground, contrast-secondary));
+            color: kbq-css-variable(foreground-contrast-secondary);
 
             & > tr > th {
-                border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
+                border-bottom-color: kbq-css-variable(line-contrast-less);
             }
         }
 
@@ -22,14 +17,11 @@
             & > tr {
                 & > th,
                 & > td {
-                    color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
+                    color: kbq-css-variable(foreground-contrast);
                 }
 
                 &:hover td {
-                    background-color: kbq-css-variable(
-                        states-background-transparent-hover,
-                        map.get($states-background, transparent-hover)
-                    );
+                    background-color: kbq-css-variable(states-background-transparent-hover);
                 }
             }
         }
@@ -38,14 +30,14 @@
             & > tbody > tr {
                 & th,
                 & td {
-                    border-bottom-color: kbq-css-variable(line-contrast-less, map.get($line, contrast-less));
+                    border-bottom-color: kbq-css-variable(line-contrast-less);
                 }
             }
         }
     }
 }
 
-@mixin kbq-table-typography($config) {
+@mixin kbq-table-typography() {
     .kbq-table {
         & > thead {
             & > tr > th {

package/table/table-tokens.scss

@@ -0,0 +1,37 @@
+.kbq-table {
+    --kbq-table-size-border-width: 1px;
+    --kbq-table-size-row-padding-vertical: 10px;
+    --kbq-table-size-row-padding-horizontal: 8px;
+    --kbq-table-font-header-font-size: 14px;
+    --kbq-table-font-header-line-height: 20px;
+    --kbq-table-font-header-letter-spacing: -0.006em;
+    --kbq-table-font-header-font-weight: normal;
+    --kbq-table-font-header-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-table-font-header-text-transform: null;
+    --kbq-table-font-header-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-table-font-body-font-size: 14px;
+    --kbq-table-font-body-line-height: 20px;
+    --kbq-table-font-body-letter-spacing: -0.006em;
+    --kbq-table-font-body-font-weight: normal;
+    --kbq-table-font-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-table-font-body-text-transform: null;
+    --kbq-table-font-body-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+}
+
+: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-line-contrast-less: hsla(229, 15%, 6%, 12%);
+    --kbq-states-background-transparent-hover: hsla(229, 15%, 50%, 8%);
+}
+
+: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-line-contrast-less: hsla(229, 15%, 22%, 100%);
+    --kbq-states-background-transparent-hover: hsla(229, 15%, 50%, 16%);
+}

package/table/table.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './table-theme' as *;
 
 .kbq-table {
     border-spacing: 0;
@@ -73,3 +73,6 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+@include kbq-table-theme();
+@include kbq-table-typography();

package/textarea/_textarea-theme.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-textarea-typography($config) {
+@mixin kbq-textarea-typography() {
     .kbq-textarea {
         @include kbq-typography-css-variables(textarea, default);
     }

package/textarea/textarea-tokens.scss

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

package/textarea/textarea.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/common/tokens' as *;
+@use './textarea-tokens' as *;
 
 .kbq-textarea {
     display: inline-block;

package/timezone/_timezone-option-theme.scss

@@ -4,24 +4,22 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-timezone-option-theme($theme) {
-    $timezone: map.get(map.get($theme, components), timezone);
-
+@mixin kbq-timezone-option-theme() {
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: kbq-css-variable(timezone-option-text, map.get($timezone, text));
+        color: kbq-css-variable(timezone-option-text);
     }
 
     .kbq-timezone-option__cities {
-        color: kbq-css-variable(timezone-option-caption, map.get($timezone, caption));
+        color: kbq-css-variable(timezone-option-caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: kbq-css-variable(timezone-option-optgroup-label, map.get($timezone, optgroup-label));
+        color: kbq-css-variable(timezone-option-optgroup-label);
     }
 }
 
-@mixin kbq-timezone-option-typography($config) {
+@mixin kbq-timezone-option-typography() {
     .kbq-timezone-option__offset {
         @include kbq-typography-css-variables(timezone-option, offset-text);
     }

package/timezone/timezone-option-tokens.scss

@@ -0,0 +1,51 @@
+.kbq-timezone-select__panel {
+    --kbq-timezone-option-size-padding: 6px 10px;
+    --kbq-timezone-option-size-column-gap: 16px;
+    --kbq-timezone-option-size-height: auto;
+    --kbq-timezone-option-size-max-height: 5em;
+    --kbq-timezone-option-size-optgroup-label-padding: 12px 12px 4px 12px;
+    --kbq-timezone-option-font-text-font-size: 14px;
+    --kbq-timezone-option-font-text-line-height: 20px;
+    --kbq-timezone-option-font-text-letter-spacing: -0.006em;
+    --kbq-timezone-option-font-text-font-weight: normal;
+    --kbq-timezone-option-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
+        Arial, sans-serif;
+    --kbq-timezone-option-font-text-text-transform: null;
+    --kbq-timezone-option-font-text-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+    --kbq-timezone-option-font-offset-text-font-size: 14px;
+    --kbq-timezone-option-font-offset-text-line-height: 20px;
+    --kbq-timezone-option-font-offset-text-letter-spacing: -0.006em;
+    --kbq-timezone-option-font-offset-text-font-weight: normal;
+    --kbq-timezone-option-font-offset-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-timezone-option-font-offset-text-text-transform: null;
+    --kbq-timezone-option-font-offset-text-font-feature-settings: 'calt', 'ss01', 'ss04', 'tnum';
+    --kbq-timezone-option-font-caption-font-size: 12px;
+    --kbq-timezone-option-font-caption-line-height: 16px;
+    --kbq-timezone-option-font-caption-letter-spacing: normal;
+    --kbq-timezone-option-font-caption-font-weight: normal;
+    --kbq-timezone-option-font-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-timezone-option-font-caption-text-transform: null;
+    --kbq-timezone-option-font-caption-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-timezone-option-font-optgroup-label-font-size: 12px;
+    --kbq-timezone-option-font-optgroup-label-line-height: 16px;
+    --kbq-timezone-option-font-optgroup-label-letter-spacing: 1px;
+    --kbq-timezone-option-font-optgroup-label-font-weight: 500;
+    --kbq-timezone-option-font-optgroup-label-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        'Helvetica Neue', Arial, sans-serif;
+    --kbq-timezone-option-font-optgroup-label-text-transform: uppercase;
+    --kbq-timezone-option-font-optgroup-label-font-feature-settings: 'calt', 'case', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-timezone-option-text: hsla(229, 15%, 15%, 100%);
+    --kbq-timezone-option-caption: hsla(229, 15%, 50%, 100%);
+    --kbq-timezone-option-optgroup-label: hsla(229, 15%, 50%, 100%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-timezone-option-text: hsla(229, 15%, 80%, 100%);
+    --kbq-timezone-option-caption: hsla(229, 15%, 60%, 100%);
+    --kbq-timezone-option-optgroup-label: hsla(229, 15%, 60%, 100%);
+}

package/timezone/timezone-option.component.scss

@@ -3,6 +3,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './timezone-option-theme' as *;
+
 .kbq-timezone-option.kbq-option {
     display: flex;
     flex-direction: row;
@@ -34,3 +36,6 @@
 .kbq-select__panel .kbq-timezone-option {
     height: kbq-css-variable(timezone-option-size-height);
 }
+
+@include kbq-timezone-option-theme();
+@include kbq-timezone-option-typography();

package/timezone/timezone-select.component.scss

@@ -3,9 +3,14 @@
 
 @use '../core/styles/common/tokens' as *;
 
+@use './timezone-option-theme' as *;
+
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
         padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
     }
 }
+
+@include kbq-timezone-option-theme();
+@include kbq-timezone-option-typography();

package/toast/_toast-theme.scss

@@ -4,45 +4,41 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-toast($component, $style-name) {
-    $style: map.get($component, $style-name);
+@mixin kbq-toast($style-name) {
+    box-shadow: kbq-css-variable(toast-#{$style-name}-container-shadow);
 
-    box-shadow: kbq-css-variable(toast-#{$style-name}-container-box-shadow, map.get($style, box-shadow));
-
-    background: kbq-css-variable(toast-#{$style-name}-container-background, map.get($style, background));
+    background: kbq-css-variable(toast-#{$style-name}-container-background);
 
     .kbq-toast__title {
-        color: kbq-css-variable(toast-#{$style-name}-container-title, map.get($style, title));
+        color: kbq-css-variable(toast-#{$style-name}-container-title);
     }
 
     .kbq-toast__text {
-        color: kbq-css-variable(toast-#{$style-name}-container-text, map.get($style, text));
+        color: kbq-css-variable(toast-#{$style-name}-container-text);
     }
 }
 
-@mixin kbq-toast-theme($theme) {
-    $toast: map.get($theme, components, toast);
-
+@mixin kbq-toast-theme() {
     .kbq-toast {
         &.kbq-toast_contrast {
-            @include kbq-toast($toast, contrast);
+            @include kbq-toast(contrast);
         }
 
         &.kbq-toast_success {
-            @include kbq-toast($toast, success);
+            @include kbq-toast(success);
         }
 
         &.kbq-toast_warning {
-            @include kbq-toast($toast, warning);
+            @include kbq-toast(warning);
         }
 
         &.kbq-toast_error {
-            @include kbq-toast($toast, error);
+            @include kbq-toast(error);
         }
     }
 }
 
-@mixin kbq-toast-typography($config) {
+@mixin kbq-toast-typography() {
     .kbq-toast {
         @include kbq-typography-css-variables(toast, text);
     }

package/toast/toast-tokens.scss

@@ -0,0 +1,75 @@
+.kbq-toast {
+    --kbq-toast-size-container-width: 360px;
+    --kbq-toast-size-container-border-radius: 8px;
+    --kbq-toast-size-container-padding-left: 12px;
+    --kbq-toast-size-container-padding-right: 8px;
+    --kbq-toast-size-content-padding-top: 16px;
+    --kbq-toast-size-content-padding-bottom: 16px;
+    --kbq-toast-size-caption-padding-bottom: 4px;
+    --kbq-toast-size-icon-width: 16px;
+    --kbq-toast-size-icon-height: 16px;
+    --kbq-toast-size-icon-margin-right: 8px;
+    --kbq-toast-size-icon-border-radius: 50%;
+    --kbq-toast-size-close-button-margin-top: 12px;
+    --kbq-toast-size-close-button-margin-right: 4px;
+    --kbq-toast-size-button-stack-padding-top: 8px;
+    --kbq-toast-size-button-stack-content-gap-horizontal: 12px;
+    --kbq-toast-font-title-font-size: 14px;
+    --kbq-toast-font-title-line-height: 20px;
+    --kbq-toast-font-title-letter-spacing: -0.006em;
+    --kbq-toast-font-title-font-weight: normal;
+    --kbq-toast-font-title-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-toast-font-title-text-transform: null;
+    --kbq-toast-font-title-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-toast-font-text-font-size: 14px;
+    --kbq-toast-font-text-line-height: 20px;
+    --kbq-toast-font-text-letter-spacing: -0.006em;
+    --kbq-toast-font-text-font-weight: normal;
+    --kbq-toast-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-toast-font-text-text-transform: null;
+    --kbq-toast-font-text-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-toast-contrast-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-toast-contrast-container-title: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-contrast-container-text: hsla(229, 15%, 50%, 100%);
+    --kbq-toast-contrast-container-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-toast-error-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-toast-error-container-title: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-error-container-text: hsla(229, 15%, 50%, 100%);
+    --kbq-toast-error-container-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-toast-warning-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-toast-warning-container-title: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-warning-container-text: hsla(229, 15%, 50%, 100%);
+    --kbq-toast-warning-container-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-toast-success-container-background: hsla(229, 15%, 100%, 100%);
+    --kbq-toast-success-container-title: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-success-container-text: hsla(229, 15%, 50%, 100%);
+    --kbq-toast-success-container-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%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-toast-contrast-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-contrast-container-title: hsla(229, 15%, 80%, 100%);
+    --kbq-toast-contrast-container-text: hsla(229, 15%, 60%, 100%);
+    --kbq-toast-contrast-container-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-toast-error-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-error-container-title: hsla(229, 15%, 80%, 100%);
+    --kbq-toast-error-container-text: hsla(229, 15%, 60%, 100%);
+    --kbq-toast-error-container-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-toast-warning-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-warning-container-title: hsla(229, 15%, 80%, 100%);
+    --kbq-toast-warning-container-text: hsla(229, 15%, 60%, 100%);
+    --kbq-toast-warning-container-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-toast-success-container-background: hsla(229, 15%, 15%, 100%);
+    --kbq-toast-success-container-title: hsla(229, 15%, 80%, 100%);
+    --kbq-toast-success-container-text: hsla(229, 15%, 60%, 100%);
+    --kbq-toast-success-container-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+}

package/toast/toast.component.scss

@@ -3,7 +3,7 @@
 
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
+@use './toast-theme' as *;
 
 .kbq-toast {
     display: flex;
@@ -98,3 +98,6 @@ $tokens: meta.module-variables(tokens) !default;
     );
     margin-right: kbq-css-variable(toast-size-close-button-margin-right);
 }
+
+@include kbq-toast-theme();
+@include kbq-toast-typography();

package/toggle/_toggle-theme.scss

@@ -1,95 +1,75 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-@mixin kbq-toggle-state($component, $type, $state-name) {
-    $state: map.get($component, $type, $state-name);
+@mixin kbq-toggle-state($type, $state-name) {
     $base: toggle-#{$type}-#{$state-name};
 
     .kbq-toggle-bar {
-        border-color: kbq-css-variable(#{$base}-border, map.get($state, border));
-        background: kbq-css-variable(#{$base}-background, map.get($state, background));
+        border-color: kbq-css-variable(#{$base}-border);
+        background: kbq-css-variable(#{$base}-background);
     }
 
     .kbq-toggle__circle {
-        background: kbq-css-variable(#{$base}-circle-background, map.get($state, circle-background));
+        background: kbq-css-variable(#{$base}-circle-background);
     }
 }
 
-@mixin kbq-toggle-color($component, $type) {
-    @include kbq-toggle-state($component, $type, default);
+@mixin kbq-toggle-color($type) {
+    @include kbq-toggle-state($type, default);
 
     &:hover {
-        @include kbq-toggle-state($component, $type, states-hover);
+        @include kbq-toggle-state($type, states-hover);
     }
 
     &.kbq-active {
-        @include kbq-toggle-state($component, $type, states-checked);
+        @include kbq-toggle-state($type, states-checked);
     }
 
     &.kbq-active:hover {
-        @include kbq-toggle-state($component, $type, states-checked-hover);
+        @include kbq-toggle-state($type, states-checked-hover);
     }
 
     &.cdk-keyboard-focused {
-        @include kbq-toggle-state($component, $type, states-focused);
+        @include kbq-toggle-state($type, states-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(
-                toggle-#{$type}-states-focused-focus-outline,
-                map.get($component, $type, states-focused, focus-outline)
-            );
-            box-shadow: 0 0 0.1px 1px
-                kbq-css-variable(
-                    toggle-#{$type}-states-focused-focus-outline,
-                    map.get($component, $type, states-focused, focus-outline)
-                );
+            border-color: kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
         }
     }
 
     &.kbq-active.cdk-keyboard-focused {
-        @include kbq-toggle-state($component, $type, states-checked-focused);
+        @include kbq-toggle-state($type, states-checked-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(
-                toggle-#{$type}-states-checked-focused-focus-outline,
-                map.get($component, $type, states-checked-focused, focus-outline)
-            );
-            box-shadow: 0 0 0.1px 1px
-                kbq-css-variable(
-                    toggle-#{$type}-states-checked-focused-focus-outline,
-                    map.get($component, $type, states-checked-focused, focus-outline)
-                );
+            border-color: kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
         }
     }
 
     &.kbq-disabled,
     &.kbq-active.kbq-disabled {
-        @include kbq-toggle-state($component, $type, states-disabled);
+        @include kbq-toggle-state($type, states-disabled);
     }
 }
 
-@mixin kbq-toggle-theme($theme) {
-    $toggle: map.get($theme, components, toggle);
-    $foreground: map.get($theme, foreground);
-
+@mixin kbq-toggle-theme() {
     .kbq-toggle {
-        @include kbq-toggle-color($toggle, theme);
+        @include kbq-toggle-color(theme);
 
         &.kbq-error {
-            @include kbq-toggle-color($toggle, error);
+            @include kbq-toggle-color(error);
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
+            color: kbq-css-variable(foreground-text-disabled);
         }
     }
 }
 
-@mixin kbq-toggle-typography($config) {
+@mixin kbq-toggle-typography() {
     .kbq-toggle:not(.kbq-toggle_big) {
         @include kbq-typography-css-variables(toggle, normal-label);