@koobiq/components 18.4.0 → 18.5.0

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';
 

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/theming/_theming.scss

@@ -42,7 +42,7 @@
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-/* stylelint-disable no-unknown-custom-properties */
+
 @mixin kbq-core-theme($theme: null) {
     .kbq-app-background {
         background: var(--kbq-background-bg);

package/core/styles/theming/scrollbar-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-scrollbar {
     --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
     --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);

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

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-datepicker__content {
     --kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);
     --kbq-datepicker-size-container-border-radius: var(--kbq-size-s);
@@ -11,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-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-divider {
     --kbq-divider-size-horizontal-width: 1px;
     --kbq-divider-size-horizontal-margin-vertical: var(--kbq-size-xxs);

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

@@ -1,26 +1,8 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-dl {
     --kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);
     --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%;
 

package/dropdown/dropdown-tokens.scss

@@ -1,105 +1,16 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-dropdown__panel {
     --kbq-dropdown-size-container-width-min: var(--kbq-size-7xl);
     --kbq-dropdown-size-container-width-max: 640px;
     --kbq-dropdown-size-container-padding-vertical: var(--kbq-size-xxs);
     --kbq-dropdown-size-container-border-radius: var(--kbq-size-s);
-    --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);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-dropdown-container-background: var(--kbq-background-card);
     --kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
-    --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-dropdown-container-background: var(--kbq-background-card);
-    --kbq-dropdown-container-box-shadow: var(--kbq-shadow-popup);
-    --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);
+    --kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
 }

package/dropdown/dropdown.scss

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

package/empty-state/_empty-state-theme.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-empty-state-theme() {
@@ -33,21 +30,21 @@
 
     .kbq-empty-state_normal {
         .kbq-empty-state-title {
-            @include kbq-typography-css-variables(empty-state, normal-title);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
         }
 
         .kbq-empty-state-text {
-            @include kbq-typography-css-variables(empty-state, normal-text);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
     }
 
     .kbq-empty-state_big {
         .kbq-empty-state-title {
-            @include kbq-typography-css-variables(empty-state, big-title);
+            @include kbq-typography-level-to-styles_css-variables(typography, headline);
         }
 
         .kbq-empty-state-text {
-            @include kbq-typography-css-variables(empty-state, big-text);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
     }
 }

package/empty-state/empty-state-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-empty-state {
     --kbq-empty-state-size-big-max-width: 480px;
     --kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);
@@ -17,36 +15,6 @@
     --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);
     --kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);
     --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);
-    --kbq-empty-state-font-big-title-font-size: var(--kbq-typography-headline-font-size);
-    --kbq-empty-state-font-big-title-line-height: var(--kbq-typography-headline-line-height);
-    --kbq-empty-state-font-big-title-letter-spacing: var(--kbq-typography-headline-letter-spacing);
-    --kbq-empty-state-font-big-title-font-weight: var(--kbq-typography-headline-font-weight);
-    --kbq-empty-state-font-big-title-font-family: var(--kbq-typography-headline-font-family);
-    --kbq-empty-state-font-big-title-text-transform: var(--kbq-typography-headline-text-transform);
-    --kbq-empty-state-font-big-title-font-feature-settings: var(--kbq-typography-headline-font-feature-settings);
-    --kbq-empty-state-font-big-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-empty-state-font-big-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-empty-state-font-big-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-empty-state-font-big-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-empty-state-font-big-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-empty-state-font-big-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-empty-state-font-big-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-empty-state-font-normal-title-font-size: var(--kbq-typography-text-big-strong-font-size);
-    --kbq-empty-state-font-normal-title-line-height: var(--kbq-typography-text-big-strong-line-height);
-    --kbq-empty-state-font-normal-title-letter-spacing: var(--kbq-typography-text-big-strong-letter-spacing);
-    --kbq-empty-state-font-normal-title-font-weight: var(--kbq-typography-text-big-strong-font-weight);
-    --kbq-empty-state-font-normal-title-font-family: var(--kbq-typography-text-big-strong-font-family);
-    --kbq-empty-state-font-normal-title-text-transform: var(--kbq-typography-text-big-strong-text-transform);
-    --kbq-empty-state-font-normal-title-font-feature-settings: var(
-        --kbq-typography-text-big-strong-font-feature-settings
-    );
-    --kbq-empty-state-font-normal-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-empty-state-font-normal-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-empty-state-font-normal-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-empty-state-font-normal-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-empty-state-font-normal-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-empty-state-font-normal-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-empty-state-font-normal-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/empty-state/empty-state.scss

@@ -1,7 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
 @use './empty-state-theme' as *;