@koobiq/components 18.4.1 → 18.5.1

package/core/option/option-tokens.scss

@@ -1,105 +1,5 @@
 .kbq-option {
-    --kbq-list-size-container-padding-left: var(--kbq-size-m);
-    --kbq-list-size-container-padding-right: var(--kbq-size-m);
-    --kbq-list-size-container-padding-vertical: var(--kbq-size-xs);
-    --kbq-list-size-container-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-list-size-container-content-gap-vertical: var(--kbq-size-3xs);
-    --kbq-list-size-container-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-list-size-text-padding-vertical: 0;
-    --kbq-list-size-header-padding-top: var(--kbq-size-s);
-    --kbq-list-size-header-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-header-padding-horizontal: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-top: var(--kbq-size-m);
-    --kbq-list-size-subheading-padding-bottom: var(--kbq-size-xxs);
-    --kbq-list-size-subheading-padding-horizontal: var(--kbq-size-m);
-    --kbq-list-font-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-list-font-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-list-font-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-list-font-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-list-font-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-list-font-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-list-font-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-list-font-caption-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-list-font-caption-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-list-font-caption-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-list-font-caption-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-list-font-caption-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-list-font-caption-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-list-font-caption-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
-    --kbq-list-font-header-font-size: var(--kbq-typography-text-big-strong-font-size);
-    --kbq-list-font-header-line-height: var(--kbq-typography-text-big-strong-line-height);
-    --kbq-list-font-header-letter-spacing: var(--kbq-typography-text-big-strong-letter-spacing);
-    --kbq-list-font-header-font-weight: var(--kbq-typography-text-big-strong-font-weight);
-    --kbq-list-font-header-font-family: var(--kbq-typography-text-big-strong-font-family);
-    --kbq-list-font-header-text-transform: var(--kbq-typography-text-big-strong-text-transform);
-    --kbq-list-font-header-font-feature-settings: var(--kbq-typography-text-big-strong-font-feature-settings);
-    --kbq-list-font-subheading-font-size: var(--kbq-typography-caps-compact-strong-font-size);
-    --kbq-list-font-subheading-line-height: var(--kbq-typography-caps-compact-strong-line-height);
-    --kbq-list-font-subheading-letter-spacing: var(--kbq-typography-caps-compact-strong-letter-spacing);
-    --kbq-list-font-subheading-font-weight: var(--kbq-typography-caps-compact-strong-font-weight);
-    --kbq-list-font-subheading-font-family: var(--kbq-typography-caps-compact-strong-font-family);
-    --kbq-list-font-subheading-text-transform: var(--kbq-typography-caps-compact-strong-text-transform);
-    --kbq-list-font-subheading-font-feature-settings: var(--kbq-typography-caps-compact-strong-font-feature-settings);
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
-    --kbq-option-font-default-font-size: var(--kbq-typography-text-big-font-size);
-    --kbq-option-font-default-line-height: var(--kbq-typography-text-big-line-height);
-    --kbq-option-font-default-letter-spacing: var(--kbq-typography-text-big-letter-spacing);
-    --kbq-option-font-default-font-weight: var(--kbq-typography-text-big-font-weight);
-    --kbq-option-font-default-font-family: var(--kbq-typography-text-big-font-family);
-    --kbq-option-font-default-text-transform: var(--kbq-typography-text-big-text-transform);
-    --kbq-option-font-default-font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-list-default-container-background: transparent;
-    --kbq-list-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-list-states-disabled-container-background: transparent;
-    --kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-list-default-container-background: transparent;
-    --kbq-list-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-default-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-list-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-list-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-list-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-list-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-list-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-list-states-selected-hover-icon-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-list-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-list-states-disabled-container-background: transparent;
-    --kbq-list-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-list-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
-    --kbq-list-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
 }

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

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use '../../styles/common/tokens' as *;
 
 @mixin kbq-pseudo-checkbox-color($style-name) {

package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss

@@ -11,34 +11,6 @@
     --kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-big-top: var(--kbq-size-xxs);
-    --kbq-checkbox-font-normal-label-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-checkbox-font-normal-label-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-checkbox-font-normal-label-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-checkbox-font-normal-label-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-checkbox-font-normal-label-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-checkbox-font-normal-label-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-checkbox-font-normal-label-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-checkbox-font-normal-caption-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-checkbox-font-normal-caption-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-checkbox-font-normal-caption-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-checkbox-font-normal-caption-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-checkbox-font-normal-caption-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-checkbox-font-normal-caption-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-checkbox-font-normal-caption-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
-    --kbq-checkbox-font-big-label-font-size: var(--kbq-typography-text-big-font-size);
-    --kbq-checkbox-font-big-label-line-height: var(--kbq-typography-text-big-line-height);
-    --kbq-checkbox-font-big-label-letter-spacing: var(--kbq-typography-text-big-letter-spacing);
-    --kbq-checkbox-font-big-label-font-weight: var(--kbq-typography-text-big-font-weight);
-    --kbq-checkbox-font-big-label-font-family: var(--kbq-typography-text-big-font-family);
-    --kbq-checkbox-font-big-label-text-transform: var(--kbq-typography-text-big-text-transform);
-    --kbq-checkbox-font-big-label-font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
-    --kbq-checkbox-font-big-caption-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-checkbox-font-big-caption-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-checkbox-font-big-caption-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-checkbox-font-big-caption-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-checkbox-font-big-caption-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-checkbox-font-big-caption-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-checkbox-font-big-caption-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

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

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../../styles/common/tokens' as *;
 
 @use './pseudo-checkbox-theme' as *;

package/core/styles/_core.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 

package/core/styles/_koobiq-theme.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use 'theming/theming' as *;
 @use 'typography/typography' as *;
 

package/core/styles/common/_groups.scss

@@ -1,11 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../tokens';
-@use '../common/tokens' as *;
-
-$tokens: meta.module-variables(tokens) !default;
-
 @mixin border-top-radius($radius) {
     border-top: {
         right-radius: $radius;
@@ -45,7 +37,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * #{var(--kbq-button-size-border-width)});
+        margin-left: calc(-1 * #{var(--kbq-size-border-width)});
     }
 
     & > .kbq-group-item:first-child:not(:last-child) {
@@ -81,7 +73,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: var(--kbq-button-size-border-radius);
+            border-top-right-radius: var(--kbq-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -91,7 +83,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: var(--kbq-button-size-border-radius);
+            border-bottom-left-radius: var(--kbq-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);
@@ -108,6 +100,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * #{var(--kbq-button-size-border-width)});
+        margin-top: calc(-1 * #{var(--kbq-size-border-width)});
     }
 }

package/core/styles/common/_list.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../tokens';
 @use './tokens' as *;
 

package/core/styles/common/_popup.scss

@@ -1,11 +1,6 @@
-@use 'sass:map';
-@use './tokens' as *;
+@mixin popup-params() {
+    box-shadow: var(--kbq-popup-shadow);
+    border-color: var(--kbq-popup-border);
 
-@mixin popup-params($theme) {
-    $popup: map.get($theme, components, popup);
-
-    box-shadow: var(--kbq-popup-shadow, map.get($popup, shadow));
-    border-color: var(--kbq-popup-border, map.get($popup, border));
-
-    background-color: var(--kbq-popup-background, map.get($popup, background));
+    background-color: var(--kbq-popup-background);
 }

package/core/styles/common/_select.scss

@@ -1,12 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../common/vendor-prefixes';
-@use '../tokens';
 @use './tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 %kbq-select-base {
     box-sizing: border-box;
 
@@ -40,37 +34,31 @@ $tokens: meta.module-variables(tokens) !default;
 
         cursor: pointer;
 
-        height: kbq-difference-series-css-variables(
-            [form-field-size-height,
-            calc(var(--kbq-form-field-size-border-width) * 2)]
-        );
+        height: calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - calc(var(--kbq-size-border-width) * 2));
     }
 
     .kbq-select__trigger.kbq-select__trigger_single,
     .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty {
         & .kbq-select__matcher {
-            padding: kbq-difference-series-css-variables(
-                    [select-size-single-padding-vertical,
-                    form-field-size-border-width]
+            padding: calc(
+                    var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)
                 )
-                kbq-difference-series-css-variables([select-size-single-padding-right, form-field-size-border-width])
-                kbq-difference-series-css-variables([select-size-single-padding-vertical, form-field-size-border-width])
-                kbq-difference-series-css-variables([select-size-single-padding-left, form-field-size-border-width]);
+                calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width))
+                calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width))
+                calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width));
         }
     }
 
     .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
         & .kbq-select__matcher {
-            padding: kbq-difference-series-css-variables(
-                    [select-size-multiple-padding-vertical,
-                    form-field-size-border-width]
+            padding: calc(
+                    var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)
                 )
-                kbq-difference-series-css-variables([select-size-multiple-padding-right, form-field-size-border-width])
-                kbq-difference-series-css-variables(
-                    [select-size-multiple-padding-vertical,
-                    form-field-size-border-width]
+                calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width))
+                calc(
+                    var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)
                 )
-                kbq-difference-series-css-variables([select-size-multiple-padding-left, form-field-size-border-width]);
+                calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width));
 
             .kbq-select__match-container {
                 display: flex;
@@ -81,19 +69,21 @@ $tokens: meta.module-variables(tokens) !default;
                 flex-wrap: wrap;
                 overflow: hidden;
 
-                height: kbq-difference-series-css-variables(
-                    [form-field-size-height,
-                    calc(var(--kbq-select-size-multiple-padding-vertical) * 2)]
+                height: calc(
+                    var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - calc(
+                            var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2
+                        )
                 );
 
-                max-height: kbq-difference-series-css-variables(
-                    [form-field-size-height,
-                    calc(var(--kbq-select-size-multiple-padding-vertical) * 2)]
+                max-height: calc(
+                    var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - calc(
+                            var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2
+                        )
                 );
 
-                gap: var(--kbq-select-size-multiple-content-gap);
+                gap: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
 
-                margin-right: var(--kbq-select-size-multiple-content-gap);
+                margin-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
             }
         }
     }
@@ -108,7 +98,7 @@ $tokens: meta.module-variables(tokens) !default;
             flex: 0 0 70px;
             align-self: center;
             padding-left: 4px;
-            padding-right: var(--kbq-select-size-multiple-content-gap);
+            padding-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
 
             text-align: right;
         }
@@ -146,7 +136,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    border-radius: var(--kbq-select-panel-size-border-radius);
+    border-radius: var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius));
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .kbq-optgroup-label,
@@ -163,15 +153,15 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         max-width: 100%;
-        height: var(--kbq-option-size-height);
+        height: var(--kbq-option-size-height, var(--kbq-size-3xl));
 
         cursor: default;
         outline: none;
 
-        padding-left: var(--kbq-option-size-horizontal-padding);
-        padding-right: var(--kbq-option-size-horizontal-padding);
+        padding-left: var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));
+        padding-right: var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));
 
-        border: var(--kbq-option-size-border-width) solid transparent;
+        border: var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent;
     }
 
     .kbq-select__search-container {
@@ -183,7 +173,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 %kbq-select-content {
-    max-height: var(--kbq-select-panel-size-max-height);
+    max-height: var(--kbq-select-panel-size-max-height, 256px);
     padding: 4px 0;
     overflow: hidden auto;
 }

package/core/styles/common/_tokens.scss

@@ -1,7 +1,5 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:string';
-@use 'sass:list';
 
 @use '../tokens';
 
@@ -25,7 +23,7 @@ $tokens: meta.module-variables(tokens) !default;
     @include kbq-css-font-variable($component, $property, letter-spacing, font-);
 }
 
-@mixin kbq-typography-level-to-styles_css-variables($component, $property) {
+@mixin kbq-typography-level-to-styles-css-variables($component, $property) {
     @include kbq-css-font-variable($component, $property, font-size, '');
     @include kbq-css-font-variable($component, $property, font-weight, '');
     @include kbq-css-font-variable($component, $property, line-height, '');

package/core/styles/theming/_scrollbar-theme.scss

@@ -1,8 +1,5 @@
 /* stylelint-disable selector-pseudo-class-no-unknown */
 
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../common/tokens' as *;
 @use '../functions/string' as *;
 

package/core/styles/visual/_layout.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../../styles/common/rtl';
 
 @use '../common/tokens' as *;

package/datepicker/_datepicker-theme.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/theming/theming';
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-datepicker-theme() {
@@ -54,10 +49,10 @@
 
 @mixin kbq-datepicker-typography() {
     .kbq-calendar {
-        @include kbq-typography-css-variables(datepicker, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-css-variables(datepicker, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
 }

package/datepicker/calendar-body.scss

@@ -1,11 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
-@use '../core/styles/common/tokens' as *;
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-calendar__body-cell {
     position: relative;
     height: 0;

package/datepicker/calendar-header.scss

@@ -1,11 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-calendar-header {
     display: flex;
     flex-direction: row;

package/datepicker/calendar.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 .kbq-calendar {
     display: block;
 }

package/datepicker/datepicker-content.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 @use './datepicker-theme' as *;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;

package/datepicker/datepicker-input.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 .kbq-form-field-type-datepicker {
     width: auto;
 }

package/datepicker/datepicker-toggle.scss

@@ -1,11 +1,6 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-datepicker-toggle:focus {
     outline: 0;
 }

package/datepicker/datepicker-tokens.scss

@@ -9,13 +9,6 @@
     --kbq-datepicker-size-grid-cell-padding-horizontal: var(--kbq-size-s);
     --kbq-datepicker-size-grid-cell-padding-vertical: var(--kbq-size-s);
     --kbq-datepicker-size-grid-cell-border-radius: var(--kbq-size-s);
-    --kbq-datepicker-font-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-datepicker-font-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-datepicker-font-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-datepicker-font-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-datepicker-font-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-datepicker-font-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-datepicker-font-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/divider/_divider-theme.scss

@@ -1,7 +1,3 @@
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 @mixin kbq-divider-theme() {
     .kbq-divider {
         background: var(--kbq-divider-color);

package/divider/divider.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 @use './divider-theme' as *;
 
 .kbq-divider {

package/dl/_dl-theme.scss

@@ -1,7 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-dl-theme() {
@@ -17,11 +13,11 @@
 @mixin kbq-dl-typography() {
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-css-variables(description-list, term);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
 
         & .kbq-dd {
-            @include kbq-typography-css-variables(description-list, description);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
     }
 }

package/dl/dl-tokens.scss

@@ -3,22 +3,6 @@
     --kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
     --kbq-description-list-size-vertical-content-gap-vertical: var(--kbq-size-3xs);
     --kbq-description-list-size-vertical-gap-vertical: var(--kbq-size-m);
-    --kbq-description-list-font-term-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-description-list-font-term-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-description-list-font-term-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-description-list-font-term-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-description-list-font-term-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-description-list-font-term-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-description-list-font-term-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-description-list-font-description-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-description-list-font-description-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-description-list-font-description-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-description-list-font-description-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-description-list-font-description-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-description-list-font-description-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-description-list-font-description-font-feature-settings: var(
-        --kbq-typography-text-normal-font-feature-settings
-    );
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/dl/dl.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 @use './dl-theme' as *;
 
 .kbq-dl {

package/dropdown/_dropdown-theme.scss

@@ -1,8 +1,4 @@
-@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-dropdown-item-state($style-name) {
@@ -59,18 +55,18 @@
 @mixin kbq-dropdown-typography() {
     .kbq-dropdown-item,
     .kbq-dropdown__content {
-        @include kbq-typography-css-variables(list, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
 
         .kbq-dropdown-item__caption {
-            @include kbq-typography-css-variables(list, caption);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
         }
     }
 
     .kbq-dropdown__group-header {
-        @include kbq-typography-css-variables(list, header);
+        @include kbq-typography-level-to-styles_css-variables(typography, big-strong);
 
         &.kbq-dropdown__group-header_small {
-            @include kbq-typography-css-variables(list, subheading);
+            @include kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
         }
     }
 }

package/dropdown/dropdown-item.scss

@@ -1,10 +1,5 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common';
 
-@use '../core/styles/common/tokens' as *;
-
 .kbq-dropdown-item {
     width: 100%;