@koobiq/components 18.1.0 → 18.2.0

package/table/table.scss

@@ -15,10 +15,10 @@
             & > th,
             & > td {
                 padding: {
-                    top: kbq-css-variable(table-size-row-padding-vertical);
-                    right: kbq-css-variable(table-size-row-padding-horizontal);
-                    bottom: kbq-css-variable(table-size-row-padding-vertical);
-                    left: kbq-css-variable(table-size-row-padding-horizontal);
+                    top: var(--kbq-table-size-row-padding-vertical);
+                    right: var(--kbq-table-size-row-padding-horizontal);
+                    bottom: var(--kbq-table-size-row-padding-vertical);
+                    left: var(--kbq-table-size-row-padding-horizontal);
                 }
 
                 vertical-align: baseline;
@@ -29,14 +29,14 @@
 
     & > thead {
         & > tr > th {
-            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-width: var(--kbq-table-size-border-width);
             border-bottom-style: solid;
         }
     }
 
     .kbq-table-cell_has-button {
-        padding-top: kbq-css-variable(size-xxs);
-        padding-bottom: kbq-css-variable(size-xxs);
+        padding-top: var(--kbq-size-xxs);
+        padding-bottom: var(--kbq-size-xxs);
     }
 }
 
@@ -44,7 +44,7 @@
     & > tbody > tr {
         & th,
         & td {
-            border-bottom-width: kbq-css-variable(table-size-border-width);
+            border-bottom-width: var(--kbq-table-size-border-width);
             border-bottom-style: solid;
         }
     }
@@ -53,13 +53,13 @@
 .kbq-table:not(.kbq-table_bordered) {
     & > tbody > tr {
         & > td:first-child {
-            border-top-left-radius: kbq-css-variable(size-m);
-            border-bottom-left-radius: kbq-css-variable(size-m);
+            border-top-left-radius: var(--kbq-size-m);
+            border-bottom-left-radius: var(--kbq-size-m);
         }
 
         & > td:last-child {
-            border-top-right-radius: kbq-css-variable(size-m);
-            border-bottom-right-radius: kbq-css-variable(size-m);
+            border-top-right-radius: var(--kbq-size-m);
+            border-bottom-right-radius: var(--kbq-size-m);
         }
 
         &:first-child {

package/tabs/_tabs-common.scss

@@ -24,10 +24,10 @@
         );
 
     border: {
-        width: kbq-css-variable(tabs-size-tab-item-focus-outline-width);
+        width: var(--kbq-tabs-size-tab-item-focus-outline-width);
         style: solid;
         color: transparent;
-        radius: kbq-css-variable(tabs-size-tab-item-border-radius);
+        radius: var(--kbq-tabs-size-tab-item-border-radius);
     }
 
     outline: none;
@@ -67,7 +67,7 @@
         display: flex;
         align-items: center;
 
-        gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
+        gap: var(--kbq-tabs-size-tab-item-content-gap-horizontal);
     }
 
     &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {

package/tabs/_tabs-theme.scss

@@ -4,11 +4,11 @@
 @mixin kbq-tab-item-state($type, $sub-type, $style-name) {
     $base: tabs-tab-item-#{$type}-#{$sub-type}-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-background);
-    color: kbq-css-variable(#{$base}-text-color);
+    background: var(--kbq-#{$base}-background);
+    color: var(--kbq-#{$base}-text-color);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon-color);
+        color: var(--kbq-#{$base}-icon-color);
     }
 }
 
@@ -20,7 +20,7 @@
     }
 
     &.kbq-tab-label_empty {
-        color: kbq-css-variable(foreground-contrast-secondary);
+        color: var(--kbq-foreground-contrast-secondary);
     }
 
     &.kbq-selected {
@@ -40,7 +40,7 @@
     }
 
     &.cdk-keyboard-focused {
-        border-color: kbq-css-variable(tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
+        border-color: var(--kbq-tabs-tab-item-#{$type}-#{$sub-type}-states-focused-focus-outline-color);
     }
 
     &.kbq-disabled {
@@ -58,7 +58,7 @@
         &.kbq-tab-group_filled {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-label {
@@ -68,7 +68,7 @@
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
                 // FIXME: need check, tab-group has different subtype
@@ -81,7 +81,7 @@
         &.kbq-tab-group_transparent {
             &.kbq-tab-group_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-label {
@@ -91,7 +91,7 @@
 
             &.kbq-tab-group_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-label {
@@ -105,7 +105,7 @@
         &.kbq-tab-nav-bar_filled {
             &.kbq-tab-nav-bar_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-background-background);
                 }
 
                 & .kbq-tab-link {
@@ -115,7 +115,7 @@
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-filled-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-filled-on-surface-background);
                 }
 
                 & .kbq-tab-link {
@@ -127,7 +127,7 @@
         &.kbq-tab-nav-bar_transparent {
             &.kbq-tab-nav-bar_on-background {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-background-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-background-background);
                 }
 
                 & .kbq-tab-link {
@@ -137,7 +137,7 @@
 
             &.kbq-tab-nav-bar_on-surface {
                 .kbq-tab-header {
-                    background: kbq-css-variable(tabs-tab-stack-transparent-on-surface-background);
+                    background: var(--kbq-tabs-tab-stack-transparent-on-surface-background);
                 }
 
                 & .kbq-tab-link {

package/tabs/tab-group.scss

@@ -18,7 +18,7 @@
     flex-direction: row;
 
     .kbq-tab-list__content {
-        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 
     & .kbq-tab-header__content {

package/tabs/tab-header.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/vendor-prefixes';
 @use 'tabs-common' as *;
+@use '../core/styles/common/tokens' as *;
 
 .kbq-tab-header {
     display: flex;
@@ -35,7 +36,7 @@
     bottom: 0;
     right: 0;
     height: 1px;
-    background: rgba(13, 14, 18, 0.12);
+    background: var(--kbq-line-contrast-less);
 }
 
 .kbq-tab-list__active-tab-underline {
@@ -48,7 +49,7 @@
     bottom: 0;
     height: 3px;
     border-radius: 2px 2px 0 0;
-    background: rgba(33, 34, 44, 1);
+    background: var(--kbq-line-contrast);
     transition: all 0.2s ease-in-out;
 }
 

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -33,6 +33,6 @@
     &.kbq-tab-group_vertical {
         flex-direction: column;
         flex-grow: 0;
-        gap: kbq-css-variable(tabs-size-tab-stack-vertical-content-gap-vertical) 0;
+        gap: var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0;
     }
 }

package/tags/_tag-theme.scss

@@ -5,14 +5,14 @@
 @mixin kbq-tag-state($type, $style-name) {
     $base: tag-#{$type}-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-background);
+    background: var(--kbq-#{$base}-background);
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base}-icon);
+        color: var(--kbq-#{$base}-icon);
     }
 
     & .kbq-tag__text {
-        color: kbq-css-variable(#{$base}-text);
+        color: var(--kbq-#{$base}-text);
     }
 }
 
@@ -28,8 +28,8 @@
         @include kbq-tag-state($type, states-focus);
 
         box-shadow:
-            inset 0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline),
-            0 0 0.1px 1px kbq-css-variable(tag-#{$type}-states-focus-outline);
+            inset 0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline),
+            0 0 0.1px 1px var(--kbq-tag-#{$type}-states-focus-outline);
     }
 
     &.kbq-disabled {

package/tags/tag-list.scss

@@ -20,8 +20,8 @@
 
     min-height: unset;
 
-    padding-top: kbq-css-variable(tag-size-padding-vertical);
-    padding-bottom: kbq-css-variable(tag-size-padding-vertical);
+    padding-top: var(--kbq-tag-size-padding-vertical);
+    padding-bottom: var(--kbq-tag-size-padding-vertical);
     padding-left: 4px;
     padding-right: unset;
 }
@@ -35,7 +35,7 @@
 
     min-width: 0;
 
-    gap: kbq-css-variable(tag-list-size-content-gap);
+    gap: var(--kbq-tag-list-size-content-gap);
 
     & .kbq-tag-input {
         max-width: 100%;
@@ -53,8 +53,8 @@
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
         padding: kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            kbq-css-variable(tag-input-size-padding-right)
+            var(--kbq-tag-input-size-padding-right)
             kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            kbq-css-variable(tag-input-size-padding-left);
+            var(--kbq-tag-input-size-padding-left);
     }
 }

package/tags/tag.scss

@@ -7,7 +7,7 @@
 
     max-width: 100%;
 
-    padding: kbq-css-variable(tag-size-padding-vertical) kbq-css-variable(tag-size-padding-horizontal);
+    padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);
 
     border-radius: 4px;
 
@@ -24,7 +24,7 @@
 
         flex-shrink: 0;
 
-        margin-right: kbq-css-variable(tag-size-close-button-margin-right);
+        margin-right: var(--kbq-tag-size-close-button-margin-right);
 
         &:hover {
             cursor: pointer;
@@ -40,11 +40,11 @@
         white-space: nowrap;
         overflow: hidden;
 
-        margin: 0 kbq-css-variable(tag-size-content-gap-horizontal);
+        margin: 0 var(--kbq-tag-size-content-gap-horizontal);
     }
 
     & .kbq-icon_left {
-        margin-left: kbq-css-variable(tag-size-icon-margin-left);
+        margin-left: var(--kbq-tag-size-icon-margin-left);
     }
 }
 

package/textarea/textarea.scss

@@ -19,7 +19,7 @@
 
     box-sizing: border-box;
 
-    padding: kbq-css-variable(textarea-size-padding-vertical) kbq-css-variable(textarea-size-padding-horizontal);
+    padding: var(--kbq-textarea-size-padding-vertical) var(--kbq-textarea-size-padding-horizontal);
 
     -webkit-appearance: none; // Chrome textarea height sizing fix
     vertical-align: bottom; // Chrome textarea height sizing fix
@@ -31,7 +31,7 @@
 
     &.kbq-textarea-resizable {
         resize: vertical;
-        min-height: kbq-css-variable(textarea-size-min-height);
+        min-height: var(--kbq-textarea-size-min-height);
     }
 }
 

package/timepicker/timepicker.scss

@@ -5,7 +5,7 @@
 
 .kbq-timepicker {
     // FIXME: default token doesn't exist
-    padding-right: kbq-css-variable(timepicker-size-padding-right);
+    padding-right: var(--kbq-timepicker-size-padding-right);
 }
 
 .kbq-form-field-type-timepicker {

package/timezone/_timezone-option-theme.scss

@@ -7,15 +7,15 @@
 @mixin kbq-timezone-option-theme() {
     .kbq-timezone-option__offset,
     .kbq-timezone-option__city {
-        color: kbq-css-variable(timezone-option-text);
+        color: var(--kbq-timezone-option-text);
     }
 
     .kbq-timezone-option__cities {
-        color: kbq-css-variable(timezone-option-caption);
+        color: var(--kbq-timezone-option-caption);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        color: kbq-css-variable(timezone-option-optgroup-label);
+        color: var(--kbq-timezone-option-optgroup-label);
     }
 }
 

package/timezone/timezone-option.component.scss

@@ -10,8 +10,8 @@
     flex-direction: row;
     align-items: flex-start;
 
-    padding: kbq-css-variable(timezone-option-size-padding);
-    column-gap: kbq-css-variable(timezone-option-size-column-gap);
+    padding: var(--kbq-timezone-option-size-padding);
+    column-gap: var(--kbq-timezone-option-size-column-gap);
 }
 
 .kbq-timezone-option__label {
@@ -29,12 +29,12 @@
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    max-height: kbq-css-variable(timezone-option-size-max-height);
+    max-height: var(--kbq-timezone-option-size-max-height);
     overflow: hidden;
 }
 
 .kbq-select__panel .kbq-timezone-option {
-    height: kbq-css-variable(timezone-option-size-height);
+    height: var(--kbq-timezone-option-size-height);
 }
 
 @include kbq-timezone-option-theme();

package/timezone/timezone-select.component.scss

@@ -8,7 +8,7 @@
 .kbq-timezone-select__panel.kbq-select__panel {
     .kbq-optgroup-label {
         display: block;
-        padding: kbq-css-variable(timezone-option-size-optgroup-label-padding);
+        padding: var(--kbq-timezone-option-size-optgroup-label-padding);
     }
 }
 

package/toast/_toast-theme.scss

@@ -5,16 +5,16 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-toast($style-name) {
-    box-shadow: kbq-css-variable(toast-#{$style-name}-container-shadow);
+    box-shadow: var(--kbq-toast-#{$style-name}-container-shadow);
 
-    background: kbq-css-variable(toast-#{$style-name}-container-background);
+    background: var(--kbq-toast-#{$style-name}-container-background);
 
     .kbq-toast__title {
-        color: kbq-css-variable(toast-#{$style-name}-container-title);
+        color: var(--kbq-toast-#{$style-name}-container-title);
     }
 
     .kbq-toast__text {
-        color: kbq-css-variable(toast-#{$style-name}-container-text);
+        color: var(--kbq-toast-#{$style-name}-container-text);
     }
 }
 

package/toast/toast-container.component.scss

@@ -8,8 +8,8 @@
     flex-direction: column;
     align-items: flex-end;
 
-    margin-top: kbq-css-variable(toast-stack-size-margin-top);
-    margin-right: kbq-css-variable(toast-stack-size-margin-right);
+    margin-top: var(--kbq-toast-stack-size-margin-top);
+    margin-right: var(--kbq-toast-stack-size-margin-right);
 
-    gap: kbq-css-variable(toast-stack-size-gap);
+    gap: var(--kbq-toast-stack-size-gap);
 }

package/toast/toast.component.scss

@@ -9,30 +9,30 @@
     display: flex;
     box-sizing: border-box;
 
-    width: kbq-css-variable(toast-size-container-width);
+    width: var(--kbq-toast-size-container-width);
 
     height: auto;
 
-    border-radius: kbq-css-variable(toast-size-container-border-radius);
+    border-radius: var(--kbq-toast-size-container-border-radius);
 
-    padding-left: kbq-css-variable(toast-size-container-padding-left);
-    padding-right: kbq-css-variable(toast-size-container-padding-right);
+    padding-left: var(--kbq-toast-size-container-padding-left);
+    padding-right: var(--kbq-toast-size-container-padding-right);
 }
 
 .kbq-toast__icon-container {
     flex-shrink: 0;
-    width: kbq-css-variable(toast-size-icon-width);
-    max-width: kbq-css-variable(toast-size-icon-width);
-    height: kbq-css-variable(toast-size-icon-height);
-    max-height: kbq-css-variable(toast-size-icon-height);
+    width: var(--kbq-toast-size-icon-width);
+    max-width: var(--kbq-toast-size-icon-width);
+    height: var(--kbq-toast-size-icon-height);
+    max-height: var(--kbq-toast-size-icon-height);
 
-    border-radius: kbq-css-variable(toast-size-container-border-radius);
+    border-radius: var(--kbq-toast-size-container-border-radius);
 
-    margin-right: kbq-css-variable(toast-size-icon-margin-right);
+    margin-right: var(--kbq-toast-size-icon-margin-right);
 
-    $padding-top: kbq-css-variable(toast-size-content-padding-top);
-    $toast-font-title-line-height: kbq-css-variable(toast-font-title-line-height);
-    $toast-size-icon-height: kbq-css-variable(toast-size-icon-height);
+    $padding-top: var(--kbq-toast-size-content-padding-top);
+    $toast-font-title-line-height: var(--kbq-toast-font-title-line-height);
+    $toast-size-icon-height: var(--kbq-toast-size-icon-height);
     padding-top: calc($padding-top + (($toast-font-title-line-height - $toast-size-icon-height) / 2));
 }
 
@@ -42,9 +42,9 @@
 
     flex: 1;
 
-    padding-top: kbq-css-variable(toast-size-content-padding-top);
-    padding-right: kbq-css-variable(size-s);
-    padding-bottom: kbq-css-variable(toast-size-content-padding-bottom);
+    padding-top: var(--kbq-toast-size-content-padding-top);
+    padding-right: var(--kbq-size-s);
+    padding-bottom: var(--kbq-toast-size-content-padding-bottom);
 
     overflow: hidden;
 }
@@ -61,7 +61,7 @@
 }
 
 .kbq-toast__title_with-content {
-    padding-bottom: kbq-css-variable(toast-size-caption-padding-bottom);
+    padding-bottom: var(--kbq-toast-size-caption-padding-bottom);
 }
 
 .kbq-toast__text {
@@ -78,9 +78,9 @@
 .kbq-toast__actions {
     display: flex;
 
-    padding-top: kbq-css-variable(toast-size-button-stack-padding-top);
+    padding-top: var(--kbq-toast-size-button-stack-padding-top);
 
-    gap: kbq-css-variable(toast-size-button-stack-content-gap-horizontal);
+    gap: var(--kbq-toast-size-button-stack-content-gap-horizontal);
 }
 
 .kbq-toast__close-button {
@@ -89,14 +89,14 @@
         calc(
                 kbq-difference-series-css-variables(
                         [kbq-sum-series-css-variables(
-                            [calc(kbq-css-variable(icon-button-size-small-vertical-padding) * 2),
+                            [calc(var(--kbq-icon-button-size-small-vertical-padding) * 2),
                             16px]
                         ),
                         toast-font-title-line-height]
                     ) / 2
             )]
     );
-    margin-right: kbq-css-variable(toast-size-close-button-margin-right);
+    margin-right: var(--kbq-toast-size-close-button-margin-right);
 }
 
 @include kbq-toast-theme();

package/toggle/_toggle-theme.scss

@@ -7,12 +7,12 @@
     $base: toggle-#{$type}-#{$state-name};
 
     .kbq-toggle-bar {
-        border-color: kbq-css-variable(#{$base}-border);
-        background: kbq-css-variable(#{$base}-background);
+        border-color: var(--kbq-#{$base}-border);
+        background: var(--kbq-#{$base}-background);
     }
 
     .kbq-toggle__circle {
-        background: kbq-css-variable(#{$base}-circle-background);
+        background: var(--kbq-#{$base}-circle-background);
     }
 }
 
@@ -35,8 +35,8 @@
         @include kbq-toggle-state($type, states-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-focused-focus-outline);
+            border-color: var(--kbq-toggle-#{$type}-states-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-focused-focus-outline);
         }
     }
 
@@ -44,8 +44,8 @@
         @include kbq-toggle-state($type, states-checked-focused);
 
         & .kbq-toggle-bar {
-            border-color: kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(toggle-#{$type}-states-checked-focused-focus-outline);
+            border-color: var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
+            box-shadow: 0 0 0.1px 1px var(--kbq-toggle-#{$type}-states-checked-focused-focus-outline);
         }
     }
 
@@ -64,7 +64,7 @@
         }
 
         &.kbq-disabled {
-            color: kbq-css-variable(foreground-text-disabled);
+            color: var(--kbq-foreground-text-disabled);
         }
     }
 }

package/toggle/toggle.scss

@@ -53,12 +53,12 @@
             radius: 8px;
         }
 
-        height: kbq-css-variable(toggle-size-normal-height);
-        width: kbq-css-variable(toggle-size-normal-width);
+        height: var(--kbq-toggle-size-normal-height);
+        width: var(--kbq-toggle-size-normal-width);
     }
 
     .kbq-hint {
-        margin-top: kbq-css-variable(toggle-size-normal-vertical-content-padding);
+        margin-top: var(--kbq-toggle-size-normal-vertical-content-padding);
     }
 }
 
@@ -69,22 +69,22 @@
     flex: 1;
 
     &.left {
-        margin-right: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
+        margin-right: var(--kbq-toggle-size-normal-horizontal-content-padding);
     }
 
     &.right {
-        margin-left: kbq-css-variable(toggle-size-normal-horizontal-content-padding);
+        margin-left: var(--kbq-toggle-size-normal-horizontal-content-padding);
     }
 }
 
 .kbq-toggle.kbq-toggle_big {
     & .kbq-toggle-bar {
-        height: kbq-css-variable(toggle-size-big-height);
-        width: kbq-css-variable(toggle-size-big-width);
+        height: var(--kbq-toggle-size-big-height);
+        width: var(--kbq-toggle-size-big-width);
     }
 
     & .kbq-hint {
-        margin-top: kbq-css-variable(toggle-size-big-vertical-content-padding);
+        margin-top: var(--kbq-toggle-size-big-vertical-content-padding);
     }
 
     .kbq-toggle-layout {

package/tooltip/_tooltip-theme.scss

@@ -1,17 +1,17 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-tooltip-color($style-name) {
-    box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
+    box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
 
     & .kbq-tooltip__inner {
-        color: kbq-css-variable(tooltip-#{$style-name}-text);
+        color: var(--kbq-tooltip-#{$style-name}-text);
 
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
+        background-color: var(--kbq-tooltip-#{$style-name}-background);
     }
 
     & .kbq-tooltip__arrow {
-        background-color: kbq-css-variable(tooltip-#{$style-name}-background);
-        box-shadow: kbq-css-variable(tooltip-#{$style-name}-shadow);
+        background-color: var(--kbq-tooltip-#{$style-name}-background);
+        box-shadow: var(--kbq-tooltip-#{$style-name}-shadow);
     }
 }