@koobiq/components 18.0.0 → 18.2.0

package/core/styles/common/_tokens.scss

@@ -7,23 +7,12 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-@function kbq-css-variable($name, $value: null) {
-    @if $value {
-        @return var(--kbq-#{$name}, $value);
-    } @else {
-        @return var(--kbq-#{$name}, map.get($tokens, $name));
-    }
-}
-
 @function getToken($name) {
     @return map.get($tokens, $name);
 }
 
 @mixin kbq-css-font-variable($component, $component-property, $font-property, $font) {
-    #{$font-property}: var(
-        --kbq-#{$component}-#{$font}#{$component-property}-#{$font-property},
-        map.get($tokens, #{$component}-#{$font}#{$component-property}-#{$font-property})
-    );
+    #{$font-property}: var(--kbq-#{$component}-#{$font}#{$component-property}-#{$font-property});
 }
 
 @mixin kbq-typography-css-variables($component, $property) {
@@ -53,13 +42,13 @@ $tokens: meta.module-variables(tokens) !default;
             @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
                 $sum: $variable;
             } @else {
-                $sum: kbq-css-variable($variable);
+                $sum: var(--kbq-#{$variable});
             }
         } @else {
             @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
                 $sum: calc($sum + $variable);
             } @else {
-                $sum: calc($sum + kbq-css-variable($variable));
+                $sum: calc($sum + var(--kbq-#{$variable}));
             }
         }
     }
@@ -73,13 +62,13 @@ $tokens: meta.module-variables(tokens) !default;
             @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
                 $difference: $variable;
             } @else {
-                $difference: kbq-css-variable($variable);
+                $difference: var(--kbq-#{$variable});
             }
         } @else {
             @if (meta.type-of($variable) == number or meta.type-of($variable) == calculation) {
                 $difference: calc($difference - $variable);
             } @else {
-                $difference: calc($difference - kbq-css-variable($variable));
+                $difference: calc($difference - var(--kbq-#{$variable}));
             }
         }
     }
@@ -89,11 +78,11 @@ $tokens: meta.module-variables(tokens) !default;
 @function kbq-css-half-difference($outer, $inner, $border: null) {
     @if $border {
         @if (meta.type-of($border) == number or meta.type-of($border) == calculation) {
-            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - $border * 2) / 2);
+            @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner}) - $border * 2) / 2);
         } @else {
-            @return calc((kbq-css-variable($outer) - kbq-css-variable($inner) - kbq-css-variable($border * 2)) / 2);
+            @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner}) - var(--kbq-#{$border} * 2)) / 2);
         }
     } @else {
-        @return calc((kbq-css-variable($outer) - kbq-css-variable($inner)) / 2);
+        @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner})) / 2);
     }
 }

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

@@ -20,29 +20,29 @@
         cursor: default;
 
         &:vertical {
-            width: kbq-css-variable(scrollbar-size-track-dimension);
+            width: var(--kbq-scrollbar-size-track-dimension);
         }
 
         &:horizontal {
-            height: kbq-css-variable(scrollbar-size-track-dimension);
+            height: var(--kbq-scrollbar-size-track-dimension);
         }
     }
 
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
-        width: kbq-css-variable(scrollbar-size-thumb-width);
+        width: var(--kbq-scrollbar-size-thumb-width);
         border-style: solid;
         border-width: kbq-css-half-difference(scrollbar-size-track-dimension, scrollbar-size-thumb-width);
 
-        border-radius: kbq-css-variable(scrollbar-size-thumb-border-radius);
+        border-radius: var(--kbq-scrollbar-size-thumb-border-radius);
 
         // these props are used to set the user-friendly thumb for long content.
         &:vertical {
-            min-height: kbq-css-variable(scrollbar-size-thumb-min-size);
+            min-height: var(--kbq-scrollbar-size-thumb-min-size);
         }
 
         &:horizontal {
-            min-width: kbq-css-variable(scrollbar-size-thumb-min-size);
+            min-width: var(--kbq-scrollbar-size-thumb-min-size);
         }
     }
 
@@ -58,7 +58,7 @@
 
         // firefox
         @supports not selector(::-webkit-scrollbar) {
-            scrollbar-color: kbq-css-variable(scrollbar-thumb-default-background) transparent;
+            scrollbar-color: var(--kbq-scrollbar-thumb-default-background) transparent;
         }
 
         // webkit
@@ -72,18 +72,18 @@
             border-color: transparent;
 
             background-clip: content-box;
-            background-color: kbq-css-variable(scrollbar-thumb-default-background);
+            background-color: var(--kbq-scrollbar-thumb-default-background);
 
             &:hover {
-                background-color: kbq-css-variable(scrollbar-thumb-hover-background);
+                background-color: var(--kbq-scrollbar-thumb-hover-background);
             }
 
             &:disabled {
-                background-color: kbq-css-variable(scrollbar-thumb-disabled-background);
+                background-color: var(--kbq-scrollbar-thumb-disabled-background);
             }
 
             &:active {
-                background-color: kbq-css-variable(scrollbar-thumb-active-background);
+                background-color: var(--kbq-scrollbar-thumb-active-background);
             }
         }
     }

package/core/styles/typography/_typography.scss

@@ -46,10 +46,13 @@
         display-compact-strong: map.get($typography, display-compact-strong),
         text-big: map.get($typography, text-big),
         text-big-strong: map.get($typography, text-big-strong),
+        text-big-medium: map.get($typography, text-big-medium),
         text-normal: map.get($typography, text-normal),
         text-normal-strong: map.get($typography, text-normal-strong),
+        text-normal-medium: map.get($typography, text-normal-medium),
         text-compact: map.get($typography, text-compact),
         text-compact-strong: map.get($typography, text-compact-strong),
+        text-compact-medium: map.get($typography, text-compact-medium),
         caps-big: map.get($typography, caps-big),
         caps-big-strong: map.get($typography, caps-big-strong),
         caps-normal: map.get($typography, caps-normal),
@@ -281,6 +284,10 @@
         @include kbq-typography-level-to-styles_css-variables(typography, text-big-strong);
     }
 
+    .kbq-text-big-medium {
+        @include kbq-typography-level-to-styles_css-variables(typography, text-big-medium);
+    }
+
     .kbq-text-normal {
         @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
     }
@@ -289,6 +296,10 @@
         @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
     }
 
+    .kbq-text-normal-medium {
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+    }
+
     .kbq-text-compact {
         @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
     }
@@ -297,6 +308,10 @@
         @include kbq-typography-level-to-styles_css-variables(typography, text-compact-strong);
     }
 
+    .kbq-text-compact-medium {
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact-medium);
+    }
+
     .kbq-caps-big {
         @include kbq-typography-level-to-styles_css-variables(typography, caps-big);
     }

package/core/styles/visual/_layout.scss

@@ -463,19 +463,19 @@
 
 @mixin layout-indents() {
     $sizes: (
-        '3xs': kbq-css-variable(size-3xs),
-        'xxs': kbq-css-variable(size-xxs),
-        'xs': kbq-css-variable(size-xs),
-        's': kbq-css-variable(size-s),
-        'm': kbq-css-variable(size-m),
-        'l': kbq-css-variable(size-l),
-        'xl': kbq-css-variable(size-xl),
-        'xxl': kbq-css-variable(size-xxl),
-        '3xl': kbq-css-variable(size-3xl),
-        '4xl': kbq-css-variable(size-4xl),
-        '5xl': kbq-css-variable(size-5xl),
-        '6xl': kbq-css-variable(size-6xl),
-        '7xl': kbq-css-variable(size-7xl)
+        '3xs': var(--kbq-size-3xs),
+        'xxs': var(--kbq-size-xxs),
+        'xs': var(--kbq-size-xs),
+        's': var(--kbq-size-s),
+        'm': var(--kbq-size-m),
+        'l': var(--kbq-size-l),
+        'xl': var(--kbq-size-xl),
+        'xxl': var(--kbq-size-xxl),
+        '3xl': var(--kbq-size-3xl),
+        '4xl': var(--kbq-size-4xl),
+        '5xl': var(--kbq-size-5xl),
+        '6xl': var(--kbq-size-6xl),
+        '7xl': var(--kbq-size-7xl)
     );
 
     $indents: 'padding', 'margin';

package/datepicker/_datepicker-theme.scss

@@ -7,47 +7,47 @@
 
 @mixin kbq-datepicker-theme() {
     .kbq-datepicker__content {
-        background: kbq-css-variable(datepicker-container-background);
-        box-shadow: kbq-css-variable(datepicker-container-box-shadow);
+        background: var(--kbq-datepicker-container-background);
+        box-shadow: var(--kbq-datepicker-container-box-shadow);
     }
 
     .kbq-calendar__table-header {
-        color: kbq-css-variable(datepicker-header-text);
+        color: var(--kbq-datepicker-header-text);
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: kbq-css-variable(datepicker-header-divider);
+        background: var(--kbq-datepicker-header-divider);
     }
 
     .kbq-calendar__body-cell-content {
-        background: kbq-css-variable(datepicker-grid-cell-default-background);
-        color: kbq-css-variable(datepicker-grid-cell-default-text);
+        background: var(--kbq-datepicker-grid-cell-default-background);
+        color: var(--kbq-datepicker-grid-cell-default-text);
 
         &.kbq-calendar__body-today {
-            background: kbq-css-variable(datepicker-grid-cell-today-background);
-            color: kbq-css-variable(datepicker-grid-cell-today-text);
+            background: var(--kbq-datepicker-grid-cell-today-background);
+            color: var(--kbq-datepicker-grid-cell-today-text);
         }
 
         &:hover:not(.kbq-disabled) {
-            background: kbq-css-variable(datepicker-grid-cell-states-hover-background);
+            background: var(--kbq-datepicker-grid-cell-states-hover-background);
         }
 
         &:active:not(.kbq-disabled) {
-            background: kbq-css-variable(datepicker-grid-cell-states-active-background);
+            background: var(--kbq-datepicker-grid-cell-states-active-background);
         }
 
         &.kbq-selected:not(.kbq-disabled) {
-            background: kbq-css-variable(datepicker-grid-cell-states-selected-background);
-            color: kbq-css-variable(datepicker-grid-cell-states-selected-text);
+            background: var(--kbq-datepicker-grid-cell-states-selected-background);
+            color: var(--kbq-datepicker-grid-cell-states-selected-text);
 
             &:hover {
-                background: kbq-css-variable(datepicker-grid-cell-states-selected-hover-background);
+                background: var(--kbq-datepicker-grid-cell-states-selected-hover-background);
             }
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(states-foreground-disabled);
-            background: kbq-css-variable(datepicker-grid-cell-states-disabled-background);
+            color: var(--kbq-states-foreground-disabled);
+            background: var(--kbq-datepicker-grid-cell-states-disabled-background);
         }
     }
 }

package/datepicker/calendar-body.scss

@@ -32,7 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-radius: kbq-css-variable(datepicker-size-grid-cell-border-radius);
+    border-radius: var(--kbq-datepicker-size-grid-cell-border-radius);
 
-    margin-bottom: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
+    margin-bottom: var(--kbq-datepicker-size-grid-content-gap-vertical);
 }

package/datepicker/calendar-header.scss

@@ -11,11 +11,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     justify-content: space-between;
 
-    padding-right: kbq-css-variable(datepicker-size-header-padding-horizontal);
+    padding-right: var(--kbq-datepicker-size-header-padding-horizontal);
 
-    padding-left: kbq-css-variable(datepicker-size-header-padding-horizontal);
+    padding-left: var(--kbq-datepicker-size-header-padding-horizontal);
 
-    margin-bottom: kbq-css-variable(datepicker-size-header-margin-bottom);
+    margin-bottom: var(--kbq-datepicker-size-header-margin-bottom);
 }
 
 .kbq-calendar-header__select {

package/datepicker/calendar.scss

@@ -8,9 +8,9 @@
 }
 
 .kbq-calendar__content {
-    padding-right: kbq-css-variable(datepicker-size-grid-padding-horizontal);
+    padding-right: var(--kbq-datepicker-size-grid-padding-horizontal);
 
-    padding-left: kbq-css-variable(datepicker-size-grid-padding-horizontal);
+    padding-left: var(--kbq-datepicker-size-grid-padding-horizontal);
 
     outline: none;
 }
@@ -29,7 +29,7 @@
         position: relative;
 
         box-sizing: border-box;
-        height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
+        height: var(--kbq-datepicker-size-grid-content-gap-vertical);
 
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
         // can extend it all the way to the edge of the calendar.
@@ -38,10 +38,10 @@
 
             position: absolute;
             top: 0;
-            left: calc(-1 * #{kbq-css-variable(datepicker-size-grid-padding-horizontal)});
-            right: calc(-1 * #{kbq-css-variable(datepicker-size-grid-padding-horizontal)});
+            left: calc(-1 * #{var(--kbq-datepicker-size-grid-padding-horizontal)});
+            right: calc(-1 * #{var(--kbq-datepicker-size-grid-padding-horizontal)});
 
-            height: kbq-css-variable(datepicker-size-grid-divider-height);
+            height: var(--kbq-datepicker-size-grid-divider-height);
         }
     }
 }

package/datepicker/datepicker-content.scss

@@ -6,7 +6,7 @@
 @use './datepicker-theme' as *;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
-$kbq-datepicker-size-grid-padding-horizontal: kbq-css-variable(datepicker-size-grid-padding-horizontal);
+$kbq-datepicker-size-grid-padding-horizontal: var(--kbq-datepicker-size-grid-padding-horizontal);
 
 $kbq-datepicker-non-touch-calendar-width: calc(
     $kbq-datepicker-non-touch-calendar-cell-size * 7 + $kbq-datepicker-size-grid-padding-horizontal * 2
@@ -18,15 +18,15 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
 .kbq-datepicker__content {
     display: block;
 
-    border-radius: kbq-css-variable(datepicker-size-container-border-radius);
+    border-radius: var(--kbq-datepicker-size-container-border-radius);
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
 
-        padding-top: kbq-css-variable(datepicker-size-container-padding-vertical);
+        padding-top: var(--kbq-datepicker-size-container-padding-vertical);
 
-        padding-bottom: kbq-css-variable(datepicker-size-container-padding-vertical);
+        padding-bottom: var(--kbq-datepicker-size-container-padding-vertical);
     }
 }
 

package/datepicker/datepicker-toggle.scss

@@ -12,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 
 .kbq-datepicker-toggle__button.kbq-button-icon {
     // FIXME: no such tokens in design-tokens, component needs to be reviewed
-    width: kbq-css-variable(datepicker-toggle-size-width);
-    height: kbq-css-variable(datepicker-toggle-size-height);
+    width: var(--kbq-datepicker-toggle-size-width);
+    height: var(--kbq-datepicker-toggle-size-height);
     margin-left: 2px;
 }
 

package/divider/_divider-theme.scss

@@ -4,6 +4,6 @@
 
 @mixin kbq-divider-theme() {
     .kbq-divider {
-        background: kbq-css-variable(divider-color);
+        background: var(--kbq-divider-color);
     }
 }

package/divider/divider.scss

@@ -10,23 +10,23 @@
     margin: 0;
 
     &.kbq-divider_horizontal {
-        height: kbq-css-variable(divider-size-horizontal-width);
+        height: var(--kbq-divider-size-horizontal-width);
 
         &.kbq-divider_paddings {
-            margin-top: kbq-css-variable(divider-size-horizontal-margin-vertical);
+            margin-top: var(--kbq-divider-size-horizontal-margin-vertical);
 
-            margin-bottom: kbq-css-variable(divider-size-horizontal-margin-vertical);
+            margin-bottom: var(--kbq-divider-size-horizontal-margin-vertical);
         }
     }
 
     &.kbq-divider_vertical {
-        width: kbq-css-variable(divider-size-vertical-width);
+        width: var(--kbq-divider-size-vertical-width);
         height: 100%;
 
         &.kbq-divider_paddings {
-            margin-left: kbq-css-variable(divider-size-vertical-margin-horizontal);
+            margin-left: var(--kbq-divider-size-vertical-margin-horizontal);
 
-            margin-right: kbq-css-variable(divider-size-vertical-margin-horizontal);
+            margin-right: var(--kbq-divider-size-vertical-margin-horizontal);
         }
     }
 }

package/dl/_dl-theme.scss

@@ -6,11 +6,11 @@
 
 @mixin kbq-dl-theme() {
     .kbq-dt {
-        color: kbq-css-variable(description-list-term-color);
+        color: var(--kbq-description-list-term-color);
     }
 
     .kbq-dd {
-        color: kbq-css-variable(description-list-description-color);
+        color: var(--kbq-description-list-description-color);
     }
 }
 

package/dl/dl.scss

@@ -7,8 +7,8 @@
 
 .kbq-dl {
     display: grid;
-    column-gap: kbq-css-variable(description-list-size-horizontal-content-gap-horizontal);
-    row-gap: kbq-css-variable(description-list-size-horizontal-gap-vertical);
+    column-gap: var(--kbq-description-list-size-horizontal-content-gap-horizontal);
+    row-gap: var(--kbq-description-list-size-horizontal-gap-vertical);
 
     grid-template-columns: repeat(4, 1fr);
 
@@ -35,7 +35,7 @@
     &.kbq-dl_vertical {
         grid-template-columns: repeat(1, 1fr);
 
-        row-gap: kbq-css-variable(description-list-size-vertical-content-gap-vertical);
+        row-gap: var(--kbq-description-list-size-vertical-content-gap-vertical);
 
         .kbq-dt,
         .kbq-dd {
@@ -43,7 +43,7 @@
         }
 
         .kbq-dd {
-            margin-bottom: kbq-css-variable(description-list-size-vertical-gap-vertical);
+            margin-bottom: var(--kbq-description-list-size-vertical-gap-vertical);
         }
     }
 }

package/dropdown/_dropdown-theme.scss

@@ -6,18 +6,18 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-dropdown-item-state($style-name) {
-    background: kbq-css-variable(list-#{$style-name}-container-background);
-    color: kbq-css-variable(list-#{$style-name}-text-color);
+    background: var(--kbq-list-#{$style-name}-container-background);
+    color: var(--kbq-list-#{$style-name}-text-color);
 
     .kbq-dropdown-item__caption {
-        color: kbq-css-variable(list-#{$style-name}-caption-color);
+        color: var(--kbq-list-#{$style-name}-caption-color);
     }
 }
 
 @mixin kbq-dropdown-theme() {
     .kbq-dropdown__panel {
-        box-shadow: kbq-css-variable(dropdown-container-box-shadow);
-        background: kbq-css-variable(dropdown-container-background);
+        box-shadow: var(--kbq-dropdown-container-box-shadow);
+        background: var(--kbq-dropdown-container-background);
     }
 
     .kbq-dropdown-item {
@@ -29,7 +29,7 @@
         }
 
         &.cdk-keyboard-focused {
-            border-color: kbq-css-variable(list-states-focused-focus-outline-color);
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {
@@ -47,7 +47,7 @@
 
     .kbq-dropdown__group-header {
         &.kbq-dropdown__group-header_small {
-            color: kbq-css-variable(foreground-contrast-secondary);
+            color: var(--kbq-foreground-contrast-secondary);
         }
     }
 

package/dropdown/dropdown-item.scss

@@ -21,13 +21,13 @@
     & > .kbq-icon:first-child:before {
         align-self: center;
         display: flex;
-        height: kbq-css-variable(size-xl);
+        height: var(--kbq-size-xl);
         width: 16px;
         align-items: center;
     }
 
     & .kbq-dropdown-item__caption {
-        padding-top: kbq-css-variable(size-3xs);
+        padding-top: var(--kbq-size-3xs);
     }
 }
 

package/dropdown/dropdown.scss

@@ -22,14 +22,14 @@
 .kbq-dropdown__panel {
     margin-top: 2px;
 
-    min-width: kbq-css-variable(dropdown-size-container-width-min);
-    max-width: kbq-css-variable(dropdown-size-container-width-max);
+    min-width: var(--kbq-dropdown-size-container-width-min);
+    max-width: var(--kbq-dropdown-size-container-width-max);
 
-    border-radius: kbq-css-variable(dropdown-size-container-border-radius);
+    border-radius: var(--kbq-dropdown-size-container-border-radius);
 
-    padding-top: kbq-css-variable(dropdown-size-container-padding-vertical);
+    padding-top: var(--kbq-dropdown-size-container-padding-vertical);
 
-    padding-bottom: kbq-css-variable(dropdown-size-container-padding-vertical);
+    padding-bottom: var(--kbq-dropdown-size-container-padding-vertical);
 
     // Prevent users from interacting with the panel while it's animating. Note that
     // people won't be able to click through it, because the overlay pane will catch the click.

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

@@ -6,21 +6,21 @@
 @mixin kbq-empty-state-theme() {
     .kbq-empty-state_normal-color {
         .kbq-empty-state-title {
-            color: kbq-css-variable(empty-state-title);
+            color: var(--kbq-empty-state-title);
         }
 
         .kbq-empty-state-text {
-            color: kbq-css-variable(empty-state-title);
+            color: var(--kbq-empty-state-title);
         }
     }
 
     .kbq-empty-state_error-color {
         .kbq-empty-state-title {
-            color: kbq-css-variable(foreground-error);
+            color: var(--kbq-foreground-error);
         }
 
         .kbq-empty-state-text {
-            color: kbq-css-variable(foreground-error);
+            color: var(--kbq-foreground-error);
         }
     }
 }

package/empty-state/empty-state.scss

@@ -14,62 +14,60 @@
     flex: 1;
 
     &.kbq-empty-state_normal {
-        padding: kbq-css-variable(empty-state-size-normal-padding-top)
-            kbq-css-variable(empty-state-size-normal-padding-horizontal)
-            kbq-css-variable(empty-state-size-normal-padding-bottom);
+        padding: var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal)
+            var(--kbq-empty-state-size-normal-padding-bottom);
 
         & .kbq-empty-state-icon {
-            margin-bottom: kbq-css-variable(empty-state-size-normal-image-margin-bottom);
+            margin-bottom: var(--kbq-empty-state-size-normal-image-margin-bottom);
         }
 
         & .kbq-empty-state-text {
-            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+            max-width: var(--kbq-empty-state-size-normal-max-width);
         }
 
         & .kbq-empty-state-title {
-            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+            max-width: var(--kbq-empty-state-size-normal-max-width);
 
-            margin-bottom: kbq-css-variable(empty-state-size-normal-title-margin-bottom);
+            margin-bottom: var(--kbq-empty-state-size-normal-title-margin-bottom);
         }
 
         & .kbq-empty-state-actions {
-            max-width: kbq-css-variable(empty-state-size-normal-max-width);
+            max-width: var(--kbq-empty-state-size-normal-max-width);
 
-            margin-top: kbq-css-variable(empty-state-size-normal-actions-margin-top);
+            margin-top: var(--kbq-empty-state-size-normal-actions-margin-top);
         }
 
         &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
-            margin-bottom: kbq-css-variable(empty-state-size-normal-image-addon-height);
+            margin-bottom: var(--kbq-empty-state-size-normal-image-addon-height);
         }
     }
 
     &.kbq-empty-state_big {
-        padding: kbq-css-variable(empty-state-size-big-padding-top)
-            kbq-css-variable(empty-state-size-big-padding-horizontal)
-            kbq-css-variable(empty-state-size-big-padding-bottom);
+        padding: var(--kbq-empty-state-size-big-padding-top) var(--kbq-empty-state-size-big-padding-horizontal)
+            var(--kbq-empty-state-size-big-padding-bottom);
 
         & .kbq-empty-state-icon {
-            margin-bottom: kbq-css-variable(empty-state-size-big-image-margin-bottom);
+            margin-bottom: var(--kbq-empty-state-size-big-image-margin-bottom);
         }
 
         & .kbq-empty-state-text {
-            max-width: kbq-css-variable(empty-state-size-big-max-width);
+            max-width: var(--kbq-empty-state-size-big-max-width);
         }
 
         & .kbq-empty-state-title {
-            max-width: kbq-css-variable(empty-state-size-big-max-width);
+            max-width: var(--kbq-empty-state-size-big-max-width);
 
-            margin-bottom: kbq-css-variable(empty-state-size-big-title-margin-bottom);
+            margin-bottom: var(--kbq-empty-state-size-big-title-margin-bottom);
         }
 
         & .kbq-empty-state-actions {
-            max-width: kbq-css-variable(empty-state-size-big-max-width);
+            max-width: var(--kbq-empty-state-size-big-max-width);
 
-            margin-top: kbq-css-variable(empty-state-size-big-actions-margin-top);
+            margin-top: var(--kbq-empty-state-size-big-actions-margin-top);
         }
 
         &.kbq-empty-state_align-center.kbq-empty-state_has-icon {
-            margin-bottom: kbq-css-variable(empty-state-size-big-image-addon-height);
+            margin-bottom: var(--kbq-empty-state-size-big-image-addon-height);
         }
     }