@koobiq/components 18.4.0 → 18.5.0

package/file-upload/_file-upload-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-file-upload-theme() {
@@ -125,34 +121,34 @@
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__text {
-            @include kbq-typography-css-variables(file-upload, single-text-block);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
     }
 
     .kbq-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-css-variables(file-upload, multiple-title);
+            @include kbq-typography-level-to-styles_css-variables(typography, subheading);
         }
 
         .multiple__caption {
             &,
             .kbq-link {
-                @include kbq-typography-css-variables(file-upload, multiple-text-block);
+                @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
             }
         }
 
         .kbq-file-multiple-uploaded__header {
-            @include kbq-typography-css-variables(file-upload, multiple-grid);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-css-variables(file-upload, multiple-grid);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
 
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {
-                @include kbq-typography-css-variables(file-upload, multiple-grid);
+                @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
             }
         }
     }

package/file-upload/file-upload-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-file-upload {
     --kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-border-width: 1px;
@@ -20,45 +18,6 @@
     --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
     --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
-    --kbq-file-upload-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-file-upload-font-single-text-block-font-feature-settings: var(
-        --kbq-typography-text-normal-font-feature-settings
-    );
-    --kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);
-    --kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);
-    --kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);
-    --kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);
-    --kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);
-    --kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);
-    --kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
-    --kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-file-upload-font-multiple-text-block-font-feature-settings: var(
-        --kbq-typography-text-normal-font-feature-settings
-    );
-    --kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/file-upload/multiple-file-upload.component.scss

@@ -55,13 +55,17 @@
         padding: 0;
 
         & .kbq-list-text {
-            padding: kbq-difference-series-css-variables(
-                    [ file-upload-size-multiple-big-grid-cell-padding-vertical,
-                    list-size-container-focus-outline-width]
+            padding: calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
+                            --kbq-list-size-container-focus-outline-width,
+                            var(--kbq-size-3xs)
+                        )
                 )
-                kbq-difference-series-css-variables(
-                    [ file-upload-size-multiple-big-grid-cell-padding-horizontal,
-                    list-size-container-focus-outline-width]
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(
+                            --kbq-list-size-container-focus-outline-width,
+                            var(--kbq-size-3xs)
+                        )
                 );
         }
 
@@ -92,13 +96,6 @@
             text-align: left;
             flex-grow: 1;
         }
-
-        .kbq-file-upload__file,
-        .kbq-file-upload__size,
-        .kbq-file-upload__action {
-            //padding-left: $horizontal-padding-item;
-            //padding-right: $horizontal-padding-item;
-        }
     }
 
     .kbq-file-upload__row {

package/form-field/_form-field-theme.scss

@@ -1,8 +1,3 @@
-@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-form-field-state($state-name) {
@@ -81,10 +76,10 @@
 
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
-        @include kbq-typography-css-variables(form-field, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
 
     .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-css-variables(form-field-hint, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
     }
 }

package/form-field/_hint-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-hint-color($type, $style-name) {
@@ -53,10 +49,10 @@
 
 @mixin kbq-hint-typography() {
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-css-variables(hint, normal-text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
     }
 
     .kbq-hint.kbq-hint_compact .kbq-hint__text {
-        @include kbq-typography-css-variables(hint, compact-text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
     }
 }

package/form-field/cleaner.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 .kbq-cleaner {
     display: flex;
     align-items: center;

package/form-field/form-field-tokens.scss

@@ -1,31 +1,13 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-form-field {
     --kbq-form-field-size-height: var(--kbq-size-3xl);
     --kbq-form-field-size-border-width: 1px;
-    --kbq-form-field-size-border-radius: var(--kbq-size-s);
+    --kbq-form-field-size-border-radius: var(--kbq-size-border-radius);
     --kbq-form-field-size-icon-size: var(--kbq-size-l);
     --kbq-form-field-size-icon-margin-left: var(--kbq-size-s);
     --kbq-form-field-size-icon-margin-right: var(--kbq-size-s);
     --kbq-form-field-size-icon-button-size: var(--kbq-size-xxl);
     --kbq-form-field-size-icon-button-margin-right: var(--kbq-size-xxs);
     --kbq-form-field-size-icon-button-margin-left: var(--kbq-size-xxs);
-    --kbq-form-field-font-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-form-field-font-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-form-field-font-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-form-field-font-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-form-field-font-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-form-field-font-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-form-field-font-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-form-field-hint-size-margin-top: var(--kbq-size-xxs);
-    --kbq-form-field-hint-size-gap: var(--kbq-size-s);
-    --kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/form-field/form-field.scss

@@ -1,8 +1,5 @@
 /* stylelint-disable scss/operator-no-newline-after */
 
-@use 'sass:meta';
-@use 'sass:map';
-
 @use '../core/forms/forms';
 
 @use '../core/styles/common/tokens' as *;

package/form-field/hint-tokens.scss

@@ -1,24 +1,8 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-hint {
     --kbq-hint-size-normal-margin-top: var(--kbq-size-3xs);
     --kbq-hint-size-normal-content-padding: var(--kbq-size-xxs);
     --kbq-hint-size-compact-margin-top: 0;
     --kbq-hint-size-compact-content-padding: var(--kbq-size-xxs);
-    --kbq-hint-font-normal-text-font-size: var(--kbq-typography-text-normal-medium-font-size);
-    --kbq-hint-font-normal-text-line-height: var(--kbq-typography-text-normal-medium-line-height);
-    --kbq-hint-font-normal-text-letter-spacing: var(--kbq-typography-text-normal-medium-letter-spacing);
-    --kbq-hint-font-normal-text-font-weight: var(--kbq-typography-text-normal-medium-font-weight);
-    --kbq-hint-font-normal-text-font-family: var(--kbq-typography-text-normal-medium-font-family);
-    --kbq-hint-font-normal-text-text-transform: var(--kbq-typography-text-normal-medium-text-transform);
-    --kbq-hint-font-normal-text-font-feature-settings: var(--kbq-typography-text-normal-medium-font-feature-settings);
-    --kbq-hint-font-compact-text-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-hint-font-compact-text-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-hint-font-compact-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-hint-font-compact-text-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-hint-font-compact-text-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-hint-font-compact-text-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-hint-font-compact-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/form-field/password-toggle.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 .kbq-password-toggle {
     display: flex;
     align-items: center;

package/form-field/stepper.scss

@@ -1,8 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/common/tokens' as *;
-
 .kbq-stepper {
     display: flex;
     flex-direction: column;

package/form-field/validate.directive.d.ts

@@ -3,6 +3,26 @@ import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, Vali
 import { KbqValidationOptions } from '@koobiq/components/core';
 import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated Will be removed in next major release (#DS-2838)
+ *
+ * Legacy mosaic validation
+ *
+ * ### How to disable?
+ *
+ * ```typescript
+ * import { KBQ_VALIDATION, KbqValidationOptions } from '@koobiq/components/core';
+ *
+ * @NgModule({
+ *      providers: [
+ *           {
+ *              provide: KBQ_VALIDATION,
+ *              useValue: { useValidation: false } satisfies KbqValidationOptions
+ *           }
+ *      ]
+ * })
+ * ```
+ */
 export declare class KbqValidateDirective implements AfterContentInit {
     private formFieldControl;
     rawValidators: Validator[];

package/icon/_icon-button-theme.scss

@@ -1,8 +1,3 @@
-@use 'sass:map';
-
-@use '../core/styles/theming/theming' as *;
-@use '../core/styles/common/tokens' as *;
-
 @mixin kbq-icon-button-theme() {
     .kbq-icon-button {
         &:focus {

package/icon/_icon-item-theme.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 

package/icon/icon-button-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-icon-button {
     --kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);
     --kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);

package/icon/icon-button.scss

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

package/icon/icon-item-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-icon-item {
     --kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);
     --kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);

package/icon/icon-item.scss

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

package/icon/icon-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
     --kbq-icon-theme-color: var(--kbq-icon-theme);
     --kbq-icon-contrast-color: var(--kbq-icon-contrast);

package/icon/icon.scss

@@ -1,6 +1,3 @@
-@use 'sass:meta';
-@use 'sass:map';
-
 @use './icon-theme' as *;
 
 .kbq-icon-rotate_90 {

package/input/_input-theme.scss

@@ -3,7 +3,7 @@
 @mixin kbq-input-typography() {
     .kbq-input,
     .kbq-input.kbq-input-password::placeholder {
-        @include kbq-typography-css-variables(input, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
 
     .kbq-input.kbq-input-password {

package/input/input-tokens.scss

@@ -1,13 +1,4 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-input {
     --kbq-input-size-padding-horizontal: var(--kbq-size-m);
     --kbq-input-size-padding-vertical: var(--kbq-size-xs);
-    --kbq-input-font-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-input-font-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-input-font-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-input-font-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-input-font-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-input-font-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-input-font-text-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }

package/input/input.scss

@@ -12,12 +12,9 @@
     text-overflow: ellipsis;
 
     width: 100%;
-    min-height: kbq-difference-series-css-variables(
-        [form-field-size-height,
-        calc(var(--kbq-form-field-size-border-width) * 2)]
-    );
+    min-height: kbq-difference-series-css-variables([size-3xl, calc(var(--kbq-size-border-width) * 2)]);
 
-    padding: kbq-difference-series-css-variables([input-size-padding-vertical, form-field-size-border-width])
+    padding: kbq-difference-series-css-variables([input-size-padding-vertical, size-border-width])
         var(--kbq-input-size-padding-horizontal);
 }
 

package/link/_link-theme.scss

@@ -147,7 +147,7 @@
 
 @mixin kbq-link-typography() {
     .kbq-link {
-        @include kbq-typography-css-variables(link, normal);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
 
         & .kbq-icon {
             line-height: inherit;
@@ -156,10 +156,10 @@
     }
 
     .kbq-link.kbq-link_compact {
-        @include kbq-typography-css-variables(link, compact);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
     }
 
     .kbq-link.kbq-link_big {
-        @include kbq-typography-css-variables(link, big);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
     }
 }

package/link/link-tokens.scss

@@ -1,32 +1,9 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-link {
     --kbq-link-size-state-focused-outline-offset: 0px;
     --kbq-link-size-state-focused-outline-width: 2px;
     --kbq-link-size-compact-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-normal-content-padding: var(--kbq-size-xxs);
     --kbq-link-size-big-content-padding: var(--kbq-size-xxs);
-    --kbq-link-font-compact-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-link-font-compact-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-link-font-compact-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-link-font-compact-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-link-font-compact-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-link-font-compact-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-link-font-compact-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings);
-    --kbq-link-font-normal-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-link-font-normal-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-link-font-normal-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-link-font-normal-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-link-font-normal-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-link-font-normal-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-link-font-normal-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-    --kbq-link-font-big-font-size: var(--kbq-typography-text-big-font-size);
-    --kbq-link-font-big-line-height: var(--kbq-typography-text-big-line-height);
-    --kbq-link-font-big-letter-spacing: var(--kbq-typography-text-big-letter-spacing);
-    --kbq-link-font-big-font-weight: var(--kbq-typography-text-big-font-weight);
-    --kbq-link-font-big-font-family: var(--kbq-typography-text-big-font-family);
-    --kbq-link-font-big-text-transform: var(--kbq-typography-text-big-text-transform);
-    --kbq-link-font-big-font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/list/_list-theme.scss

@@ -49,11 +49,11 @@
 @mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-css-variables(list, text);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
 
         .kbq-list-text {
             .kbq-list-option-caption {
-                @include kbq-typography-css-variables(list, caption);
+                @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
             }
         }
     }

package/list/list-tokens.scss

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-list,
 .kbq-list-selection {
     --kbq-list-size-container-padding-left: var(--kbq-size-m);
@@ -15,34 +13,6 @@
     --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) {

package/list/list.scss

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

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

@@ -34,21 +34,21 @@
 @mixin kbq-loader-overlay-typography() {
     .kbq-loader-overlay_big {
         & .kbq-loader-overlay-text {
-            @include kbq-typography-css-variables(loader-overlay, big-text);
+            @include kbq-typography-level-to-styles_css-variables(typography, subheading);
         }
 
         & .kbq-loader-overlay-caption {
-            @include kbq-typography-css-variables(loader-overlay, big-caption);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
     }
 
     .kbq-loader-overlay_compact {
         & .kbq-loader-overlay-text {
-            @include kbq-typography-css-variables(loader-overlay, compact-text);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
         }
 
         & .kbq-loader-overlay-caption {
-            @include kbq-typography-css-variables(loader-overlay, compact-caption);
+            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
         }
     }
 }

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

@@ -1,5 +1,3 @@
-/* stylelint-disable no-unknown-custom-properties */
-
 .kbq-loader-overlay {
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
@@ -7,40 +5,6 @@
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
     --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-3xs);
-    --kbq-loader-overlay-font-big-text-font-size: var(--kbq-typography-subheading-font-size);
-    --kbq-loader-overlay-font-big-text-line-height: var(--kbq-typography-subheading-line-height);
-    --kbq-loader-overlay-font-big-text-letter-spacing: var(--kbq-typography-subheading-letter-spacing);
-    --kbq-loader-overlay-font-big-text-font-weight: var(--kbq-typography-subheading-font-weight);
-    --kbq-loader-overlay-font-big-text-font-family: var(--kbq-typography-subheading-font-family);
-    --kbq-loader-overlay-font-big-text-text-transform: var(--kbq-typography-subheading-text-transform);
-    --kbq-loader-overlay-font-big-text-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);
-    --kbq-loader-overlay-font-big-caption-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-loader-overlay-font-big-caption-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-loader-overlay-font-big-caption-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-loader-overlay-font-big-caption-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-loader-overlay-font-big-caption-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-loader-overlay-font-big-caption-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-loader-overlay-font-big-caption-font-feature-settings: var(
-        --kbq-typography-text-normal-font-feature-settings
-    );
-    --kbq-loader-overlay-font-compact-text-font-size: var(--kbq-typography-text-normal-font-size);
-    --kbq-loader-overlay-font-compact-text-line-height: var(--kbq-typography-text-normal-line-height);
-    --kbq-loader-overlay-font-compact-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-    --kbq-loader-overlay-font-compact-text-font-weight: var(--kbq-typography-text-normal-font-weight);
-    --kbq-loader-overlay-font-compact-text-font-family: var(--kbq-typography-text-normal-font-family);
-    --kbq-loader-overlay-font-compact-text-text-transform: var(--kbq-typography-text-normal-text-transform);
-    --kbq-loader-overlay-font-compact-text-font-feature-settings: var(
-        --kbq-typography-text-normal-font-feature-settings
-    );
-    --kbq-loader-overlay-font-compact-caption-font-size: var(--kbq-typography-text-compact-font-size);
-    --kbq-loader-overlay-font-compact-caption-line-height: var(--kbq-typography-text-compact-line-height);
-    --kbq-loader-overlay-font-compact-caption-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);
-    --kbq-loader-overlay-font-compact-caption-font-weight: var(--kbq-typography-text-compact-font-weight);
-    --kbq-loader-overlay-font-compact-caption-font-family: var(--kbq-typography-text-compact-font-family);
-    --kbq-loader-overlay-font-compact-caption-text-transform: var(--kbq-typography-text-compact-text-transform);
-    --kbq-loader-overlay-font-compact-caption-font-feature-settings: var(
-        --kbq-typography-text-compact-font-feature-settings
-    );
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {

package/loader-overlay/loader-overlay.scss

@@ -25,6 +25,7 @@
     right: 0;
     bottom: 0;
     left: 0;
+    border-radius: inherit;
 
     // todo
     z-index: 10;