@koobiq/components 18.1.0 → 18.2.0

package/badge/badge.component.scss

@@ -10,7 +10,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    height: kbq-css-variable(badge-size-normal-height);
+    height: var(--kbq-badge-size-normal-height);
     text-align: center;
     white-space: nowrap;
 
@@ -18,47 +18,47 @@
 
     box-sizing: border-box;
 
-    padding-right: kbq-css-variable(badge-size-normal-horizontal-padding);
-    padding-left: kbq-css-variable(badge-size-normal-horizontal-padding);
+    padding-right: var(--kbq-badge-size-normal-horizontal-padding);
+    padding-left: var(--kbq-badge-size-normal-horizontal-padding);
 
     border: {
-        width: kbq-css-variable(badge-size-normal-border-width);
-        radius: kbq-css-variable(badge-size-normal-border-radius);
+        width: var(--kbq-badge-size-normal-border-width);
+        radius: var(--kbq-badge-size-normal-border-radius);
     }
 
     & .kbq-badge-caption {
-        padding-left: kbq-css-variable(badge-size-normal-content-padding);
+        padding-left: var(--kbq-badge-size-normal-content-padding);
     }
 
     & .kbq-icon_left {
-        margin-right: kbq-css-variable(badge-size-normal-icon-left-margin-right);
+        margin-right: var(--kbq-badge-size-normal-icon-left-margin-right);
     }
 
     & .kbq-icon_right {
-        margin-left: kbq-css-variable(badge-size-normal-icon-right-margin-left);
+        margin-left: var(--kbq-badge-size-normal-icon-right-margin-left);
     }
 
     &.kbq-badge_compact {
-        height: kbq-css-variable(badge-size-compact-height);
+        height: var(--kbq-badge-size-compact-height);
 
-        padding-right: kbq-css-variable(badge-size-compact-horizontal-padding);
-        padding-left: kbq-css-variable(badge-size-compact-horizontal-padding);
+        padding-right: var(--kbq-badge-size-compact-horizontal-padding);
+        padding-left: var(--kbq-badge-size-compact-horizontal-padding);
 
         border: {
-            width: kbq-css-variable(badge-size-compact-border-width);
-            radius: kbq-css-variable(badge-size-compact-border-radius);
+            width: var(--kbq-badge-size-compact-border-width);
+            radius: var(--kbq-badge-size-compact-border-radius);
         }
 
         & .kbq-badge-caption {
-            padding-left: kbq-css-variable(badge-size-compact-content-padding);
+            padding-left: var(--kbq-badge-size-compact-content-padding);
         }
 
         & .kbq-icon_left {
-            margin-right: kbq-css-variable(badge-size-compact-icon-left-margin-right);
+            margin-right: var(--kbq-badge-size-compact-icon-left-margin-right);
         }
 
         & .kbq-icon_right {
-            margin-left: kbq-css-variable(badge-size-compact-icon-right-margin-left);
+            margin-left: var(--kbq-badge-size-compact-icon-right-margin-left);
         }
     }
 }

package/button/_button-base.scss

@@ -18,8 +18,8 @@
 
     margin: 0; /* Safari */
 
-    height: kbq-css-variable(button-size-height);
-    min-height: kbq-css-variable(button-size-height);
+    height: var(--kbq-button-size-height);
+    min-height: var(--kbq-button-size-height);
 
     white-space: nowrap;
 
@@ -28,8 +28,8 @@
 
     vertical-align: baseline;
 
-    border: kbq-css-variable(button-size-border-width) solid transparent;
-    border-radius: kbq-css-variable(button-size-border-radius);
+    border: var(--kbq-button-size-border-width) solid transparent;
+    border-radius: var(--kbq-button-size-border-radius);
 
     &::-moz-focus-inner {
         border: 0;
@@ -53,10 +53,10 @@
     }
 
     & .kbq-icon_left {
-        margin-right: kbq-css-variable(button-size-content-padding);
+        margin-right: var(--kbq-button-size-content-padding);
     }
 
     & .kbq-icon_right {
-        margin-left: kbq-css-variable(button-size-content-padding);
+        margin-left: var(--kbq-button-size-content-padding);
     }
 }

package/button/_button-theme.scss

@@ -21,29 +21,29 @@
 @mixin kbq-button-type($type, $sub-type) {
     $base-path: button-#{$type}-#{$sub-type};
 
-    border-color: kbq-css-variable(#{$base-path}-border);
-    color: kbq-css-variable(#{$base-path}-foreground);
-    background: kbq-css-variable(#{$base-path}-background);
+    border-color: var(--kbq-#{$base-path}-border);
+    color: var(--kbq-#{$base-path}-foreground);
+    background: var(--kbq-#{$base-path}-background);
 
-    @include _icon(kbq-css-variable(#{$base-path}-left-icon), kbq-css-variable(#{$base-path}-right-icon));
+    @include _icon(var(--kbq-#{$base-path}-left-icon), var(--kbq-#{$base-path}-right-icon));
 
     &:hover:not(.kbq-disabled),
     &.kbq-hover:not(.kbq-disabled) {
-        background: kbq-css-variable(#{$base-path}-states-hover-background);
+        background: var(--kbq-#{$base-path}-states-hover-background);
     }
 
     &:active:not(.kbq-disabled),
     &.kbq-active:not(.kbq-disabled) {
-        background: kbq-css-variable(#{$base-path}-states-active-background);
+        background: var(--kbq-#{$base-path}-states-active-background);
     }
 
     &.kbq-disabled {
-        color: kbq-css-variable(#{$base-path}-states-disabled-foreground);
-        background: kbq-css-variable(#{$base-path}-states-disabled-background);
+        color: var(--kbq-#{$base-path}-states-disabled-foreground);
+        background: var(--kbq-#{$base-path}-states-disabled-background);
 
         @include _icon(
-            kbq-css-variable(#{$base-path}-states-disabled-left-icon),
-            kbq-css-variable(#{$base-path}-states-disabled-right-icon)
+            var(--kbq-#{$base-path}-states-disabled-left-icon),
+            var(--kbq-#{$base-path}-states-disabled-right-icon)
         );
     }
 }
@@ -91,7 +91,7 @@
         &.kbq-button_outline,
         &.kbq-button_transparent {
             &.cdk-keyboard-focused {
-                $focused-color: kbq-css-variable(states-focused-color);
+                $focused-color: var(--kbq-states-focused-color);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
             }

package/button/button.dropdown-trigger.directive.d.ts

@@ -0,0 +1,14 @@
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import * as i0 from "@angular/core";
+/**
+ * This directive enhances `kbq-button` elements acting as dropdown triggers,
+ * visually indicating the active state with the `kbq-active` class,
+ * following Koobiq Design System.
+ *
+ * The directive relies on a separate `KbqDropdownTrigger` directive to get dropdown's state.
+ */
+export declare class KbqButtonDropdownTrigger {
+    dropdownTrigger: KbqDropdownTrigger;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonDropdownTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonDropdownTrigger, "[kbq-button][kbqDropdownTriggerFor]", never, {}, {}, never, never, true, never>;
+}

package/button/button.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./button.component";
 import * as i2 from "@angular/cdk/a11y";
 import * as i3 from "@angular/cdk/platform";
 import * as i4 from "@angular/cdk/observers";
+import * as i5 from "./button.dropdown-trigger.directive";
 export declare class KbqButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.ObserversModule], [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler], [typeof i2.A11yModule, typeof i3.PlatformModule, typeof i4.ObserversModule, typeof i5.KbqButtonDropdownTrigger], [typeof i1.KbqButton, typeof i1.KbqButtonCssStyler, typeof i5.KbqButtonDropdownTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
 }

package/button/button.scss

@@ -14,11 +14,11 @@
     padding-right: kbq-sum-series-css-variables([button-size-horizontal-padding, 4px]);
 
     &.kbq-button-icon_left {
-        padding-left: kbq-css-variable(button-size-horizontal-padding);
+        padding-left: var(--kbq-button-size-horizontal-padding);
     }
 
     &.kbq-button-icon_right {
-        padding-right: kbq-css-variable(button-size-horizontal-padding);
+        padding-right: var(--kbq-button-size-horizontal-padding);
     }
 }
 
@@ -29,18 +29,18 @@
 .kbq-button-icon {
     @extend %kbq-button-base;
 
-    padding-left: kbq-css-variable(button-icon-size-horizontal-padding);
+    padding-left: var(--kbq-button-icon-size-horizontal-padding);
 
-    padding-right: kbq-css-variable(button-icon-size-horizontal-padding);
+    padding-right: var(--kbq-button-icon-size-horizontal-padding);
 }
 
 .kbq-button-overlay {
     position: absolute;
 
-    top: calc(-1 * #{kbq-css-variable(button-size-border-width)});
-    left: calc(-1 * #{kbq-css-variable(button-size-border-width)});
-    right: calc(-1 * #{kbq-css-variable(button-size-border-width)});
-    bottom: calc(-1 * #{kbq-css-variable(button-size-border-width)});
+    top: calc(-1 * #{var(--kbq-button-size-border-width)});
+    left: calc(-1 * #{var(--kbq-button-size-border-width)});
+    right: calc(-1 * #{var(--kbq-button-size-border-width)});
+    bottom: calc(-1 * #{var(--kbq-button-size-border-width)});
 
     border-radius: inherit;
 }

package/button/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './button.component';
+export * from './button.dropdown-trigger.directive';
 export * from './button.module';

package/button-toggle/_button-toggle-theme.scss

@@ -6,18 +6,18 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-button-toggle-state($state-name) {
-    background: kbq-css-variable(button-toggle-item-#{$state-name}-background);
+    background: var(--kbq-button-toggle-item-#{$state-name}-background);
 
-    color: kbq-css-variable(button-toggle-item-#{$state-name}-text);
+    color: var(--kbq-button-toggle-item-#{$state-name}-text);
 
     & .kbq-icon {
-        color: kbq-css-variable(button-toggle-item-#{$state-name}-icon);
+        color: var(--kbq-button-toggle-item-#{$state-name}-icon);
     }
 }
 
 @mixin kbq-button-toggle-theme() {
     .kbq-button-toggle-group {
-        background: kbq-css-variable(button-toggle-container-background);
+        background: var(--kbq-button-toggle-container-background);
 
         .kbq-button-toggle {
             & > .kbq-button,
@@ -53,7 +53,7 @@
                 }
 
                 &.cdk-keyboard-focused {
-                    border-color: kbq-css-variable(button-toggle-item-states-focused-outline);
+                    border-color: var(--kbq-button-toggle-item-states-focused-outline);
                 }
             }
         }

package/button-toggle/button-toggle.scss

@@ -13,12 +13,12 @@
     flex-direction: row;
     align-items: center;
 
-    gap: kbq-css-variable(button-toggle-size-container-content-gap-horizontal);
+    gap: var(--kbq-button-toggle-size-container-content-gap-horizontal);
 
-    border-radius: kbq-css-variable(button-toggle-size-container-border-radius);
+    border-radius: var(--kbq-button-toggle-size-container-border-radius);
 
-    padding: kbq-css-variable(button-toggle-size-container-padding-vertical)
-        kbq-css-variable(button-toggle-size-container-padding-horizontal);
+    padding: var(--kbq-button-toggle-size-container-padding-vertical)
+        var(--kbq-button-toggle-size-container-padding-horizontal);
 
     .kbq-button-toggle {
         display: flex;
@@ -26,16 +26,16 @@
         justify-content: flex-start;
         align-items: center;
 
-        height: kbq-css-variable(button-toggle-size-item-height);
-        min-height: kbq-css-variable(button-toggle-size-item-height);
+        height: var(--kbq-button-toggle-size-item-height);
+        min-height: var(--kbq-button-toggle-size-item-height);
 
-        border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
+        border-radius: var(--kbq-button-toggle-size-item-border-radius);
 
         > .kbq-button,
         > .kbq-button-icon {
             height: inherit;
             min-height: inherit;
-            border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
+            border-radius: var(--kbq-button-toggle-size-item-border-radius);
 
             padding: kbq-difference-series-css-variables(
                     [ button-toggle-size-item-padding-vertical,
@@ -60,7 +60,7 @@
 
                 width: 100%;
 
-                gap: kbq-css-variable(button-toggle-size-item-content-gap-horizontal);
+                gap: var(--kbq-button-toggle-size-item-content-gap-horizontal);
             }
         }
     }
@@ -71,7 +71,7 @@
             > .kbq-button-icon {
                 max-width: 100%;
 
-                height: kbq-css-variable(button-toggle-size-item-height);
+                height: var(--kbq-button-toggle-size-item-height);
             }
         }
     }
@@ -87,7 +87,7 @@
         > .kbq-button-icon {
             width: 100%;
 
-            border-radius: kbq-css-variable(button-toggle-size-item-border-radius);
+            border-radius: var(--kbq-button-toggle-size-item-border-radius);
         }
     }
 }

package/checkbox/_checkbox-theme.scss

@@ -8,36 +8,36 @@
     $base: checkbox-#{$style-name};
 
     .kbq-checkbox__frame {
-        border-color: kbq-css-variable(#{$base}-default-border);
-        background-color: kbq-css-variable(#{$base}-default-background);
+        border-color: var(--kbq-#{$base}-default-border);
+        background-color: 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-checkbox-label {
-        color: kbq-css-variable(#{$base}-default-text);
+        color: var(--kbq-#{$base}-default-text);
     }
 
     & .kbq-hint .kbq-hint__text {
-        color: kbq-css-variable(#{$base}-default-caption);
+        color: var(--kbq-#{$base}-default-caption);
     }
 
     &:hover,
     &.kbq-hover {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-hover-border);
-            background-color: kbq-css-variable(#{$base}-states-hover-background);
+            border-color: var(--kbq-#{$base}-states-hover-border);
+            background-color: var(--kbq-#{$base}-states-hover-background);
         }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-checked-border);
-            background-color: kbq-css-variable(#{$base}-states-checked-background);
+            border-color: var(--kbq-#{$base}-states-checked-border);
+            background-color: var(--kbq-#{$base}-states-checked-background);
         }
     }
 
@@ -46,45 +46,45 @@
         &:hover,
         &.kbq-hover {
             .kbq-checkbox__frame {
-                border-color: kbq-css-variable(#{$base}-states-checked-hover-border);
-                background-color: kbq-css-variable(#{$base}-states-checked-hover-background);
+                border-color: var(--kbq-#{$base}-states-checked-hover-border);
+                background-color: var(--kbq-#{$base}-states-checked-hover-background);
             }
         }
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                border-color: kbq-css-variable(#{$base}-states-checked-focused-border);
-                background-color: kbq-css-variable(#{$base}-states-checked-focused-background);
-                outline: kbq-css-variable(#{$base}-states-checked-focused-outline);
+                border-color: var(--kbq-#{$base}-states-checked-focused-border);
+                background-color: var(--kbq-#{$base}-states-checked-focused-background);
+                outline: var(--kbq-#{$base}-states-checked-focused-outline);
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-focused-border);
-            background-color: kbq-css-variable(#{$base}-states-focused-background);
-            outline: kbq-css-variable(#{$base}-states-focused-outline);
+            border-color: var(--kbq-#{$base}-states-focused-border);
+            background-color: var(--kbq-#{$base}-states-focused-background);
+            outline: var(--kbq-#{$base}-states-focused-outline);
         }
     }
 
     &.kbq-disabled {
         .kbq-checkbox__frame {
-            border-color: kbq-css-variable(#{$base}-states-disabled-border);
-            background-color: kbq-css-variable(#{$base}-states-disabled-background);
+            border-color: var(--kbq-#{$base}-states-disabled-border);
+            background-color: var(--kbq-#{$base}-states-disabled-background);
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: kbq-css-variable(#{$base}-states-disabled-color);
+                color: var(--kbq-#{$base}-states-disabled-color);
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: kbq-css-variable(#{$base}-states-disabled-caption);
+            color: var(--kbq-#{$base}-states-disabled-caption);
         }
 
         .kbq-checkbox-label {
-            color: kbq-css-variable(#{$base}-states-disabled-text);
+            color: var(--kbq-#{$base}-states-disabled-text);
         }
     }
 }

package/checkbox/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/checkbox/checkbox.scss

@@ -22,15 +22,15 @@
     pointer-events: none;
     background-color: transparent;
 
-    border-radius: kbq-css-variable(checkbox-size-normal-border-radius);
+    border-radius: var(--kbq-checkbox-size-normal-border-radius);
 
     border: {
-        width: kbq-css-variable(checkbox-size-normal-border-width);
+        width: var(--kbq-checkbox-size-normal-border-width);
         style: solid;
     }
 
-    height: kbq-css-variable(checkbox-size-normal-width);
-    width: kbq-css-variable(checkbox-size-normal-width);
+    height: var(--kbq-checkbox-size-normal-width);
+    width: var(--kbq-checkbox-size-normal-width);
 }
 
 .kbq-checkbox__layout {
@@ -42,9 +42,9 @@
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
-    padding-top: kbq-css-variable(checkbox-size-normal-padding-top);
+    padding-top: var(--kbq-checkbox-size-normal-padding-top);
 
-    padding-bottom: kbq-css-variable(checkbox-size-normal-padding-bottom);
+    padding-bottom: var(--kbq-checkbox-size-normal-padding-bottom);
 
     padding-left: kbq-sum-series-css-variables(
         [checkbox-size-normal-width,
@@ -58,11 +58,11 @@
     display: inline-block;
 
     position: absolute;
-    top: kbq-css-variable(checkbox-size-normal-top);
+    top: var(--kbq-checkbox-size-normal-top);
     left: 0;
 
-    height: kbq-css-variable(checkbox-size-normal-width);
-    width: kbq-css-variable(checkbox-size-normal-width);
+    height: var(--kbq-checkbox-size-normal-width);
+    width: var(--kbq-checkbox-size-normal-width);
 }
 
 .kbq-checkbox {
@@ -100,7 +100,7 @@
     }
 
     & .kbq-hint {
-        margin-top: kbq-css-variable(checkbox-size-normal-vertical-content-padding);
+        margin-top: var(--kbq-checkbox-size-normal-vertical-content-padding);
     }
 }
 
@@ -113,22 +113,22 @@
     }
 
     & .kbq-checkbox__inner-container {
-        top: kbq-css-variable(checkbox-size-big-top);
-        height: kbq-css-variable(checkbox-size-big-width);
-        width: kbq-css-variable(checkbox-size-big-width);
+        top: var(--kbq-checkbox-size-big-top);
+        height: var(--kbq-checkbox-size-big-width);
+        width: var(--kbq-checkbox-size-big-width);
     }
 
     & .kbq-checkbox__frame {
-        border-radius: kbq-css-variable(checkbox-size-big-border-radius);
+        border-radius: var(--kbq-checkbox-size-big-border-radius);
 
         border: {
-            width: kbq-css-variable(checkbox-size-big-border-width);
+            width: var(--kbq-checkbox-size-big-border-width);
             style: solid;
         }
     }
 
     & .kbq-hint {
-        margin-top: kbq-css-variable(checkbox-size-big-vertical-content-padding);
+        margin-top: var(--kbq-checkbox-size-big-vertical-content-padding);
     }
 }
 

package/code-block/_code-block-theme.scss

@@ -6,21 +6,21 @@
 @use '../core/styles/common/tokens' as *;
 
 @function kbq-code-block-hljs-attr($attr) {
-    @return kbq-css-variable(code-block-hljs-#{$attr});
+    @return var(--kbq-code-block-hljs-#{$attr});
 }
 
 @mixin kbq-code-block-style($style-name) {
     $base: code-block-#{$style-name};
 
-    background: kbq-css-variable(#{$base}-container-background);
+    background: var(--kbq-#{$base}-container-background);
 
     & .kbq-tab-header {
-        background: kbq-css-variable(#{$base}-header-background) !important;
-        border-color: kbq-css-variable(#{$base}-container-border-color);
+        background: var(--kbq-#{$base}-header-background) !important;
+        border-color: var(--kbq-#{$base}-container-border-color);
     }
 
     .kbq-tab-body__wrapper {
-        border-color: kbq-css-variable(#{$base}-container-border-color);
+        border-color: var(--kbq-#{$base}-container-border-color);
     }
 
     &:not(.kbq-code-block_no-header) {
@@ -30,40 +30,40 @@
     }
 
     & .kbq-code-block-actionbar {
-        background: kbq-css-variable(#{$base}-actionbar-background);
+        background: var(--kbq-#{$base}-actionbar-background);
 
         &.kbq-actionbar-block_floating {
             .kbq-actionbar-block__button-stack {
-                background: kbq-css-variable(#{$base}-actionbar-background);
+                background: var(--kbq-#{$base}-actionbar-background);
             }
         }
     }
 
     &.kbq-code-block_header-with-shadow {
         & .kbq-tab-header {
-            box-shadow: kbq-css-variable(#{$base}-header-shadow);
+            box-shadow: var(--kbq-#{$base}-header-shadow);
         }
     }
 
     &.kbq-code-block_no-header {
         & .kbq-code-block__fade-gradient {
-            background: kbq-css-variable(#{$base}-actionbar-fade-gradient);
+            background: var(--kbq-#{$base}-actionbar-fade-gradient);
         }
     }
 
     .kbq-code-block__show-more {
         .bg-wrapper {
-            background: kbq-css-variable(#{$base}-collapse-button-expand-background);
+            background: var(--kbq-#{$base}-collapse-button-expand-background);
             opacity: 90%;
         }
     }
 
     & .kbq-code-block__show-more_expanded {
-        background: kbq-css-variable(#{$base}-collapse-expanded-background);
+        background: var(--kbq-#{$base}-collapse-expanded-background);
     }
 
     & .kbq-code-block__show-more_collapsed {
-        background: kbq-css-variable(#{$base}-collapse-collapsed-background);
+        background: var(--kbq-#{$base}-collapse-collapsed-background);
     }
 }
 
@@ -351,12 +351,12 @@
         .kbq-tab-group.kbq-focused {
             // paint focus border from the top since because of border constraints
             .kbq-tab-header {
-                box-shadow: 0 2px 0 -1px kbq-css-variable(states-focused-color);
+                box-shadow: 0 2px 0 -1px var(--kbq-states-focused-color);
             }
 
             .kbq-tab-body__wrapper {
-                border-color: kbq-css-variable(states-focused-color);
-                box-shadow: inset 0 0 0.1 1px kbq-css-variable(states-focused-color);
+                border-color: var(--kbq-states-focused-color);
+                box-shadow: inset 0 0 0.1 1px var(--kbq-states-focused-color);
             }
         }
     }

package/code-block/actionbar.component.scss

@@ -4,8 +4,8 @@
 @use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
-$actionbar-indents: kbq-css-variable(code-block-size-actionbar-padding-vertical)
-    kbq-css-variable(code-block-size-actionbar-padding-horizontal);
+$actionbar-indents: var(--kbq-code-block-size-actionbar-padding-vertical)
+    var(--kbq-code-block-size-actionbar-padding-horizontal);
 
 .kbq-code-block-actionbar {
     display: flex;
@@ -21,13 +21,13 @@ $actionbar-indents: kbq-css-variable(code-block-size-actionbar-padding-vertical)
     margin: $actionbar-indents;
 
     .kbq-actionbar-block__button-stack {
-        gap: kbq-css-variable(code-block-size-actionbar-content-gap-horizontal);
+        gap: var(--kbq-code-block-size-actionbar-content-gap-horizontal);
     }
 
     .kbq-code-block__fade-gradient {
         display: none;
 
-        width: kbq-css-variable(code-block-size-actionbar-fade-gradient-width);
+        width: var(--kbq-code-block-size-actionbar-fade-gradient-width);
     }
 
     &.kbq-actionbar-block_floating {