@koobiq/components 18.1.0 → 18.2.0

package/code-block/code-block.scss

@@ -4,8 +4,8 @@
 
 @use './code-block-theme' as *;
 
-$border-radius: kbq-css-variable(code-block-size-container-border-radius);
-$border-width: kbq-css-variable(code-block-size-container-border-width);
+$border-radius: var(--kbq-code-block-size-container-border-radius);
+$border-width: var(--kbq-code-block-size-container-border-width);
 
 .kbq-code-block {
     display: block;
@@ -26,10 +26,9 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         // 4 buttons + margin
         $buttons-margin: calc(32 * 4) + 24px;
 
-        padding: calc(kbq-css-variable(code-block-size-header-padding-vertical) - $border-width)
+        padding: calc(var(--kbq-code-block-size-header-padding-vertical) - $border-width)
             kbq-sum-series-css-variables([code-block-size-header-padding-right, $buttons-margin])
-            kbq-css-variable(code-block-size-header-padding-vertical)
-            kbq-css-variable(code-block-size-header-padding-left);
+            var(--kbq-code-block-size-header-padding-vertical) var(--kbq-code-block-size-header-padding-left);
 
         border-width: $border-width $border-width 0 $border-width;
         border-style: solid;
@@ -39,7 +38,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
     &:has(.kbq-code-block__show-more) {
         .kbq-code-block__code {
             & > code {
-                padding-bottom: kbq-css-variable(size-3xl) !important;
+                padding-bottom: var(--kbq-size-3xl) !important;
                 overflow-x: scroll;
             }
         }
@@ -55,10 +54,10 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
 
     .kbq-code-block__code {
         > code {
-            padding: kbq-css-variable(code-block-size-with-header-content-padding-top)
-                kbq-css-variable(code-block-size-with-header-content-padding-horizontal)
-                kbq-css-variable(code-block-size-with-header-content-padding-bottom)
-                kbq-css-variable(code-block-size-with-header-content-padding-horizontal);
+            padding: var(--kbq-code-block-size-with-header-content-padding-top)
+                var(--kbq-code-block-size-with-header-content-padding-horizontal)
+                var(--kbq-code-block-size-with-header-content-padding-bottom)
+                var(--kbq-code-block-size-with-header-content-padding-horizontal);
 
             border-radius: $border-radius;
 
@@ -68,7 +67,7 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
         }
 
         .hljs-ln-numbers {
-            padding-right: kbq-css-variable(code-block-size-with-header-content-content-gap-horizontal);
+            padding-right: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);
         }
     }
 
@@ -110,12 +109,12 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
             position: relative;
 
             & > code {
-                padding: kbq-css-variable(code-block-size-no-header-content-padding-vertical)
-                    kbq-css-variable(code-block-size-no-header-content-padding-horizontal);
+                padding: var(--kbq-code-block-size-no-header-content-padding-vertical)
+                    var(--kbq-code-block-size-no-header-content-padding-horizontal);
             }
 
             .hljs-ln-numbers {
-                padding-right: kbq-css-variable(code-block-size-no-header-content-content-gap-horizontal);
+                padding-right: var(--kbq-code-block-size-no-header-content-content-gap-horizontal);
             }
         }
     }
@@ -183,19 +182,19 @@ $border-width: kbq-css-variable(code-block-size-container-border-width);
     border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {
-        padding-top: kbq-css-variable(code-block-size-collapse-collapsed-padding-top);
+        padding-top: var(--kbq-code-block-size-collapse-collapsed-padding-top);
 
-        padding-bottom: kbq-css-variable(code-block-size-collapse-collapsed-padding-bottom);
+        padding-bottom: var(--kbq-code-block-size-collapse-collapsed-padding-bottom);
     }
 
     &.kbq-code-block__show-more_expanded {
-        padding-top: kbq-css-variable(code-block-size-collapse-expanded-padding-top);
+        padding-top: var(--kbq-code-block-size-collapse-expanded-padding-top);
 
-        margin-bottom: kbq-css-variable(code-block-size-collapse-expanded-padding-bottom);
+        margin-bottom: var(--kbq-code-block-size-collapse-expanded-padding-bottom);
     }
 
     .bg-wrapper {
-        border-radius: kbq-css-variable(button-size-border-radius);
+        border-radius: var(--kbq-button-size-border-radius);
     }
 }
 

package/core/forms/_forms-theme.scss

@@ -7,11 +7,11 @@
     @include kbq-form-geometry();
 
     .kbq-form__label {
-        color: kbq-css-variable(forms-label);
+        color: var(--kbq-forms-label);
     }
 
     .kbq-form__legend {
-        color: kbq-css-variable(forms-legend);
+        color: var(--kbq-forms-legend);
     }
 }
 

package/core/forms/_forms.scss

@@ -12,11 +12,11 @@
     }
 
     .kbq-form-horizontal {
-        $line-height: kbq-css-variable(forms-font-label-line-height);
-        $form-field-size-height: kbq-css-variable(form-field-size-height);
+        $line-height: var(--kbq-forms-font-label-line-height);
+        $form-field-size-height: var(--kbq-form-field-size-height);
 
         & .kbq-form-row_margin {
-            margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);
+            margin-bottom: var(--kbq-forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
@@ -26,12 +26,12 @@
         }
 
         & .kbq-form__control {
-            padding-left: kbq-css-variable(forms-size-horizontal-control-padding-left);
+            padding-left: var(--kbq-forms-size-horizontal-control-padding-left);
         }
 
         & .kbq-form__legend {
-            margin-top: kbq-css-variable(forms-size-horizontal-legend-margin-top);
-            margin-bottom: kbq-css-variable(forms-size-horizontal-legend-margin-bottom);
+            margin-top: var(--kbq-forms-size-horizontal-legend-margin-top);
+            margin-bottom: var(--kbq-forms-size-horizontal-legend-margin-bottom);
         }
     }
 
@@ -41,12 +41,12 @@
         }
 
         & .kbq-form-row_margin {
-            margin-bottom: kbq-css-variable(forms-size-vertical-row-margin-bottom);
+            margin-bottom: var(--kbq-forms-size-vertical-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: kbq-css-variable(forms-size-vertical-label-padding-top);
-            padding-bottom: kbq-css-variable(forms-size-vertical-label-padding-bottom);
+            padding-top: var(--kbq-forms-size-vertical-label-padding-top);
+            padding-bottom: var(--kbq-forms-size-vertical-label-padding-bottom);
 
             text-align: start;
         }
@@ -56,8 +56,8 @@
         }
 
         & .kbq-form__legend {
-            margin-top: kbq-css-variable(forms-size-vertical-legend-margin-top);
-            margin-bottom: kbq-css-variable(forms-size-vertical-legend-margin-bottom);
+            margin-top: var(--kbq-forms-size-vertical-legend-margin-top);
+            margin-bottom: var(--kbq-forms-size-vertical-legend-margin-bottom);
         }
     }
 
@@ -70,7 +70,7 @@
         flex-direction: row;
 
         & .kbq-form__row:not(:first-child) {
-            padding-left: kbq-css-variable(forms-size-vertical-control-padding-left);
+            padding-left: var(--kbq-forms-size-vertical-control-padding-left);
         }
     }
 }

package/core/option/_optgroup-theme.scss

@@ -2,11 +2,11 @@
 
 @mixin kbq-optgroup-theme() {
     .kbq-optgroup-label {
-        color: kbq-css-variable(foreground-contrast);
+        color: var(--kbq-foreground-contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: kbq-css-variable(foreground-text-disabled);
+        color: var(--kbq-foreground-text-disabled);
     }
 }
 

package/core/option/_option-action-theme.scss

@@ -3,28 +3,28 @@
 @mixin kbq-option-action-theme() {
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: kbq-css-variable(states-focused-color);
+            border-color: var(--kbq-states-focused-color);
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-css-variable(states-icon-contrast-fade-active);
+                color: var(--kbq-states-icon-contrast-fade-active);
             }
 
-            background-color: kbq-css-variable(background-transparent);
+            background-color: var(--kbq-background-transparent);
         }
 
         &:hover .kbq-icon {
-            color: kbq-css-variable(states-icon-contrast-fade-hover);
+            color: var(--kbq-states-icon-contrast-fade-hover);
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: kbq-css-variable(states-icon-disabled);
+                color: var(--kbq-states-icon-disabled);
             }
 
-            background-color: kbq-css-variable(background-transparent);
+            background-color: var(--kbq-background-transparent);
         }
     }
 }

package/core/option/_option-theme.scss

@@ -1,18 +1,18 @@
 @use '../styles/common/tokens' as *;
 
 @mixin kbq-option($style-name) {
-    background: kbq-css-variable(list-#{$style-name}-container-background);
+    background: var(--kbq-list-#{$style-name}-container-background);
 
     .kbq-option-text {
-        color: kbq-css-variable(list-#{$style-name}-text-color);
+        color: var(--kbq-list-#{$style-name}-text-color);
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$style-name}-icon-button-color);
+        color: var(--kbq-list-#{$style-name}-icon-button-color);
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(list-#{$style-name}-caption-color);
+        color: var(--kbq-list-#{$style-name}-caption-color);
     }
 }
 
@@ -26,7 +26,7 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: kbq-css-variable(list-states-focused-focus-outline-color);
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
         }
 
         &.kbq-selected {

package/core/option/action.scss

@@ -14,8 +14,8 @@
 
     margin-right: -2px;
 
-    width: kbq-css-variable(list-font-text-line-height);
-    height: kbq-css-variable(list-font-text-line-height);
+    width: var(--kbq-list-font-text-line-height);
+    height: var(--kbq-list-font-text-line-height);
 
     cursor: pointer;
 

package/core/option/optgroup.scss

@@ -4,7 +4,7 @@
 @use './optgroup-theme' as *;
 
 .kbq-optgroup-label {
-    padding-left: kbq-css-variable(size-m);
+    padding-left: var(--kbq-size-m);
 
     @include vendor-prefixes.user-select(none);
     cursor: default;

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

@@ -5,28 +5,28 @@
 @mixin kbq-pseudo-checkbox-color($style-name) {
     $base: checkbox-#{$style-name};
 
-    border-color: kbq-css-variable(#{$base}-default-border);
-    background: kbq-css-variable(#{$base}-default-background);
+    border-color: var(--kbq-#{$base}-default-border);
+    background: var(--kbq-#{$base}-default-background);
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: kbq-css-variable(#{$base}-default-color);
+        color: var(--kbq-#{$base}-default-color);
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-states-checked-border);
-        background: kbq-css-variable(#{$base}-states-checked-background);
+        border-color: var(--kbq-#{$base}-states-checked-border);
+        background: var(--kbq-#{$base}-states-checked-background);
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-states-disabled-color);
+            color: var(--kbq-#{$base}-states-disabled-color);
         }
 
-        border-color: kbq-css-variable(#{$base}-states-disabled-border);
-        background: kbq-css-variable(#{$base}-states-disabled-background);
+        border-color: var(--kbq-#{$base}-states-disabled-border);
+        background: var(--kbq-#{$base}-states-disabled-background);
     }
 }
 

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

@@ -61,7 +61,7 @@
     --kbq-checkbox-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);
     --kbq-checkbox-theme-states-checked-focused-background: var(--kbq-background-theme);
     --kbq-checkbox-theme-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-theme);
-    --kbq-checkbox-theme-states-disabled-border: var(--kbq-line-contrast-fade);
+    --kbq-checkbox-theme-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-checkbox-theme-states-disabled-color: var(--kbq-states-icon-disabled);
     --kbq-checkbox-theme-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-checkbox-theme-states-disabled-background: var(--kbq-states-background-disabled);
@@ -83,7 +83,7 @@
     --kbq-checkbox-error-states-checked-focused-border: var(--kbq-states-line-focus-error);
     --kbq-checkbox-error-states-checked-focused-background: var(--kbq-background-error);
     --kbq-checkbox-error-states-checked-focused-outline: 1px solid var(--kbq-states-line-focus-error);
-    --kbq-checkbox-error-states-disabled-border: var(--kbq-line-contrast-fade);
+    --kbq-checkbox-error-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-checkbox-error-states-disabled-color: var(--kbq-states-icon-disabled);
     --kbq-checkbox-error-states-disabled-text: var(--kbq-states-foreground-disabled);
     --kbq-checkbox-error-states-disabled-background: var(--kbq-states-background-disabled);

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

@@ -13,12 +13,12 @@
     align-items: center;
     justify-content: center;
 
-    width: kbq-css-variable(checkbox-size-normal-width);
-    height: kbq-css-variable(checkbox-size-normal-width);
+    width: var(--kbq-checkbox-size-normal-width);
+    height: var(--kbq-checkbox-size-normal-width);
 
     border: {
-        radius: kbq-css-variable(checkbox-size-normal-border-radius);
-        width: kbq-css-variable(checkbox-size-normal-border-width);
+        radius: var(--kbq-checkbox-size-normal-border-radius);
+        width: var(--kbq-checkbox-size-normal-border-width);
         style: solid;
     }
 
@@ -55,12 +55,12 @@
 }
 
 .kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
-    width: kbq-css-variable(checkbox-size-big-width);
-    height: kbq-css-variable(checkbox-size-big-width);
+    width: var(--kbq-checkbox-size-big-width);
+    height: var(--kbq-checkbox-size-big-width);
 
     border: {
-        radius: kbq-css-variable(checkbox-size-big-border-radius);
-        width: kbq-css-variable(checkbox-size-big-border-width);
+        radius: var(--kbq-checkbox-size-big-border-radius);
+        width: var(--kbq-checkbox-size-big-border-width);
     }
 }
 

package/core/styles/common/_groups.scss

@@ -45,7 +45,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-left: calc(-1 * #{kbq-css-variable(button-size-border-width)});
+        margin-left: calc(-1 * #{var(--kbq-button-size-border-width)});
     }
 
     & > .kbq-group-item:first-child:not(:last-child) {
@@ -81,7 +81,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:first-child:not(:last-child) {
             @include border-bottom-radius(0);
 
-            border-top-right-radius: kbq-css-variable(button-size-border-radius);
+            border-top-right-radius: var(--kbq-button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-bottom-radius(0);
@@ -91,7 +91,7 @@ $tokens: meta.module-variables(tokens) !default;
         &:last-child:not(:first-child) {
             @include border-top-radius(0);
 
-            border-bottom-left-radius: kbq-css-variable(button-size-border-radius);
+            border-bottom-left-radius: var(--kbq-button-size-border-radius);
 
             > .kbq-form-field__container {
                 @include border-top-radius(0);
@@ -108,6 +108,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-group-item + .kbq-group-item {
-        margin-top: calc(-1 * #{kbq-css-variable(button-size-border-width)});
+        margin-top: calc(-1 * #{var(--kbq-button-size-border-width)});
     }
 }

package/core/styles/common/_list.scss

@@ -64,21 +64,21 @@
     outline: none;
     -webkit-tap-highlight-color: transparent;
     min-height: 32px;
-    gap: kbq-css-variable(size-s);
+    gap: var(--kbq-size-s);
 
-    border: kbq-css-variable(size-3xs) solid transparent;
+    border: var(--kbq-size-3xs) solid transparent;
 
-    padding-top: kbq-css-variable(size-xxs);
-    padding-left: kbq-css-variable(size-m);
-    padding-right: kbq-css-variable(size-m);
-    padding-bottom: kbq-css-variable(size-xxs);
+    padding-top: var(--kbq-size-xxs);
+    padding-left: var(--kbq-size-m);
+    padding-right: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();
     }
 
     .kbq-list-option-caption {
-        padding-top: kbq-css-variable(size-3xs);
+        padding-top: var(--kbq-size-3xs);
     }
 }
 
@@ -89,13 +89,13 @@
     box-sizing: border-box;
     min-height: 32px;
 
-    border-left: kbq-css-variable(size-3xs) solid transparent;
-    border-right: kbq-css-variable(size-3xs) solid transparent;
+    border-left: var(--kbq-size-3xs) solid transparent;
+    border-right: var(--kbq-size-3xs) solid transparent;
 
-    padding-top: kbq-css-variable(size-xs);
-    padding-left: kbq-css-variable(size-m);
-    padding-right: kbq-css-variable(size-m);
-    padding-bottom: kbq-css-variable(size-3xs);
+    padding-top: var(--kbq-size-xs);
+    padding-left: var(--kbq-size-m);
+    padding-right: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-3xs);
 
     .kbq-list-text {
         @include kbq-list-text();
@@ -109,13 +109,13 @@
     box-sizing: border-box;
     min-height: 32px;
 
-    border-left: kbq-css-variable(size-3xs) solid transparent;
-    border-right: kbq-css-variable(size-3xs) solid transparent;
+    border-left: var(--kbq-size-3xs) solid transparent;
+    border-right: var(--kbq-size-3xs) solid transparent;
 
-    padding-top: kbq-css-variable(size-m);
-    padding-left: kbq-css-variable(size-m);
-    padding-right: kbq-css-variable(size-m);
-    padding-bottom: kbq-css-variable(size-xxs);
+    padding-top: var(--kbq-size-m);
+    padding-left: var(--kbq-size-m);
+    padding-right: var(--kbq-size-m);
+    padding-bottom: var(--kbq-size-xxs);
 
     .kbq-list-text {
         @include kbq-list-text();

package/core/styles/common/_popup.scss

@@ -4,8 +4,8 @@
 @mixin popup-params($theme) {
     $popup: map.get($theme, components, popup);
 
-    box-shadow: kbq-css-variable(popup-shadow, map.get($popup, shadow));
-    border-color: kbq-css-variable(popup-border, map.get($popup, border));
+    box-shadow: var(--kbq-popup-shadow, map.get($popup, shadow));
+    border-color: var(--kbq-popup-border, map.get($popup, border));
 
-    background-color: kbq-css-variable(popup-background, map.get($popup, background));
+    background-color: var(--kbq-popup-background, map.get($popup, background));
 }

package/core/styles/common/_select.scss

@@ -42,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         height: kbq-difference-series-css-variables(
             [form-field-size-height,
-            calc(kbq-css-variable(form-field-size-border-width) * 2)]
+            calc(var(--kbq-form-field-size-border-width) * 2)]
         );
     }
 
@@ -83,17 +83,17 @@ $tokens: meta.module-variables(tokens) !default;
 
                 height: kbq-difference-series-css-variables(
                     [form-field-size-height,
-                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
+                    calc(var(--kbq-select-size-multiple-padding-vertical) * 2)]
                 );
 
                 max-height: kbq-difference-series-css-variables(
                     [form-field-size-height,
-                    calc(kbq-css-variable(select-size-multiple-padding-vertical) * 2)]
+                    calc(var(--kbq-select-size-multiple-padding-vertical) * 2)]
                 );
 
-                gap: kbq-css-variable(select-size-multiple-content-gap);
+                gap: var(--kbq-select-size-multiple-content-gap);
 
-                margin-right: kbq-css-variable(select-size-multiple-content-gap);
+                margin-right: var(--kbq-select-size-multiple-content-gap);
             }
         }
     }
@@ -108,7 +108,7 @@ $tokens: meta.module-variables(tokens) !default;
             flex: 0 0 70px;
             align-self: center;
             padding-left: 4px;
-            padding-right: kbq-css-variable(select-size-multiple-content-gap);
+            padding-right: var(--kbq-select-size-multiple-content-gap);
 
             text-align: right;
         }
@@ -146,7 +146,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     overflow: hidden;
 
-    border-radius: kbq-css-variable(select-panel-size-border-radius);
+    border-radius: var(--kbq-select-panel-size-border-radius);
 
     // Override optgroup and option to scale based on font-size of the trigger.
     .kbq-optgroup-label,
@@ -163,15 +163,15 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         max-width: 100%;
-        height: kbq-css-variable(option-size-height);
+        height: var(--kbq-option-size-height);
 
         cursor: default;
         outline: none;
 
-        padding-left: kbq-css-variable(option-size-horizontal-padding);
-        padding-right: kbq-css-variable(option-size-horizontal-padding);
+        padding-left: var(--kbq-option-size-horizontal-padding);
+        padding-right: var(--kbq-option-size-horizontal-padding);
 
-        border: kbq-css-variable(option-size-border-width) solid transparent;
+        border: var(--kbq-option-size-border-width) solid transparent;
     }
 
     .kbq-select__search-container {
@@ -183,7 +183,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 %kbq-select-content {
-    max-height: kbq-css-variable(select-panel-size-max-height);
+    max-height: var(--kbq-select-panel-size-max-height);
     padding: 4px 0;
     overflow: hidden auto;
 }
@@ -198,5 +198,5 @@ $tokens: meta.module-variables(tokens) !default;
     border-top-width: 1px;
     border-top-style: solid;
 
-    padding: kbq-css-variable(size-xxs) kbq-css-variable(size-m);
+    padding: var(--kbq-size-xxs) var(--kbq-size-m);
 }

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);
     }
 }