@koobiq/components 18.0.0 → 18.2.0

package/accordion/_accordion-theme.scss

@@ -0,0 +1,62 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
+
+@mixin kbq-accordion-theme() {
+    .kbq-accordion.cdk-keyboard-focused {
+        & .kbq-accordion-item:focus-within {
+            border-color: var(--kbq-accordion-item-states-focus-border-color);
+        }
+    }
+
+    .kbq-accordion-item {
+        background: var(--kbq-accordion-item-default-background);
+        color: var(--kbq-accordion-item-default-text-color);
+
+        & .kbq-accordion-trigger__icon {
+            color: var(--kbq-accordion-item-default-icon-color);
+        }
+    }
+
+    .kbq-accordion-trigger {
+        width: 100%;
+        background: transparent;
+        border: none;
+        outline: none;
+
+        color: var(--kbq-accordion-item-default-text-color);
+
+        &:hover:not([data-disabled='true']) {
+            cursor: pointer;
+
+            & .kbq-accordion-trigger__icon {
+                color: var(--kbq-accordion-item-states-hover-icon-color);
+            }
+        }
+
+        &[data-disabled='true'] {
+            color: var(--kbq-accordion-item-states-disabled-text-color);
+
+            & .kbq-accordion-trigger__icon {
+                color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
+            }
+        }
+    }
+}
+
+@mixin kbq-accordion-typography() {
+    .kbq-accordion-header,
+    .kbq-accordion-trigger {
+        @include kbq-typography-css-variables(accordion, item-header-text);
+    }
+
+    .kbq-accordion-trigger__caption {
+        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+    }
+
+    .kbq-accordion-content {
+        @include kbq-typography-css-variables(accordion, item-content-text);
+    }
+}

package/accordion/accordion-content.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/accordion";
+export declare class KbqAccordionContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionContent, "kbq-accordion-content, [kbq-accordion-content]", never, {}, {}, never, never, false, [{ directive: typeof i1.RdxAccordionContentDirective; inputs: {}; outputs: {}; }]>;
+}

package/accordion/accordion-header.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/accordion";
+export declare class KbqAccordionHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionHeader, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionHeader, "kbq-accordion-header, [kbq-accordion-header]", never, {}, {}, never, never, false, [{ directive: typeof i1.RdxAccordionHeaderDirective; inputs: {}; outputs: {}; }]>;
+}

package/accordion/accordion-item.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/accordion";
+export declare class KbqAccordionItem {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAccordionItem, "kbq-accordion-item, [kbq-accordion-item]", never, {}, {}, never, never, false, [{ directive: typeof i1.RdxAccordionItemDirective; inputs: { "expanded": "expanded"; "disabled": "disabled"; "value": "value"; }; outputs: { "closed": "closed"; "opened": "opened"; "expandedChange": "expandedChange"; }; }]>;
+}

package/accordion/accordion-tokens.scss

@@ -0,0 +1,45 @@
+/* stylelint-disable no-unknown-custom-properties */
+
+.kbq-accordion {
+    --kbq-accordion-size-item-header-height: 36px;
+    --kbq-accordion-size-item-header-variant-fill-padding: var(--kbq-size-xs) var(--kbq-size-s);
+    --kbq-accordion-size-item-header-variant-hug-padding: var(--kbq-size-xs) var(--kbq-size-s) var(--kbq-size-xs)
+        var(--kbq-size-m);
+    --kbq-accordion-size-item-content-padding: 0px var(--kbq-size-m) var(--kbq-size-s) var(--kbq-size-m);
+    --kbq-accordion-font-item-header-text-font-size: var(--kbq-typography-text-big-font-size);
+    --kbq-accordion-font-item-header-text-line-height: var(--kbq-typography-text-big-line-height);
+    --kbq-accordion-font-item-header-text-letter-spacing: var(--kbq-typography-text-big-letter-spacing);
+    --kbq-accordion-font-item-header-text-font-weight: var(--kbq-typography-text-big-font-weight);
+    --kbq-accordion-font-item-header-text-font-family: var(--kbq-typography-text-big-font-family);
+    --kbq-accordion-font-item-header-text-text-transform: var(--kbq-typography-text-big-text-transform);
+    --kbq-accordion-font-item-header-text-font-feature-settings: var(--kbq-typography-text-big-font-feature-settings);
+    --kbq-accordion-font-item-content-text-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-accordion-font-item-content-text-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-accordion-font-item-content-text-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-accordion-font-item-content-text-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-accordion-font-item-content-text-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-accordion-font-item-content-text-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-accordion-font-item-content-text-font-feature-settings: var(
+        --kbq-typography-text-normal-font-feature-settings
+    );
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-accordion-item-default-background: transparent;
+    --kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);
+    --kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);
+    --kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-accordion-item-default-background: transparent;
+    --kbq-accordion-item-default-text-color: var(--kbq-foreground-contrast);
+    --kbq-accordion-item-default-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-accordion-item-states-hover-icon-color: var(--kbq-icon-contrast);
+    --kbq-accordion-item-states-focus-border-color: var(--kbq-line-theme);
+    --kbq-accordion-item-states-disabled-text-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-accordion-item-states-disabled-icon-color: var(--kbq-states-icon-disabled);
+}

package/accordion/accordion-trigger.component.d.ts

@@ -0,0 +1,11 @@
+import { KbqAccordion } from './accordion.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/accordion";
+export declare class KbqAccordionTrigger {
+    protected accordion: KbqAccordion;
+    get isFill(): boolean;
+    get isHug(): boolean;
+    get isHugSpaceBetween(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionTrigger, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordionTrigger, "kbq-accordion-trigger, [kbq-accordion-trigger]", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.RdxAccordionTriggerDirective; inputs: {}; outputs: {}; }]>;
+}

package/accordion/accordion-trigger.component.scss

@@ -0,0 +1,79 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/tokens' as *;
+
+.kbq-accordion-trigger {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    background: transparent;
+    border: none;
+    outline: none;
+
+    & .kbq-accordion-trigger__icon {
+        padding: var(--kbq-size-xxs);
+
+        transition: transform 300ms ease-out;
+    }
+
+    & .kbq-accordion-trigger__badge,
+    & .kbq-accordion-trigger__caption {
+        margin-top: var(--kbq-size-xxs);
+        margin-right: var(--kbq-size-s);
+    }
+
+    & .kbq-accordion-trigger__action {
+        padding: var(--kbq-size-xxs) var(--kbq-size-xxs) var(--kbq-size-3xs);
+        margin-bottom: calc(-1 * #{var(--kbq-size-3xs)});
+    }
+
+    &:hover:not([data-disabled='true']) {
+        cursor: pointer;
+
+        & .kbq-accordion-trigger__icon {
+            color: var(--kbq-accordion-item-states-hover-icon-color);
+        }
+    }
+
+    &.kbq-accordion-trigger_fill {
+        padding: var(--kbq-accordion-size-item-header-variant-fill-padding);
+
+        &[data-state='open'] > .kbq-accordion-trigger__icon {
+            transform: rotate(90deg);
+        }
+    }
+
+    &.kbq-accordion-trigger_hug {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+
+        padding: var(--kbq-accordion-size-item-header-variant-hug-padding);
+
+        &[data-state='open'] > .kbq-accordion-trigger__icon {
+            transform: rotate(90deg);
+        }
+    }
+
+    &.kbq-accordion-trigger_hug-space-between {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+
+        padding: var(--kbq-accordion-size-item-header-variant-hug-padding);
+
+        &[data-state='open'] > .kbq-accordion-trigger__icon {
+            transform: rotate(-180deg);
+        }
+    }
+
+    &[data-disabled='true'] {
+        & .kbq-accordion-trigger__icon {
+            color: var(--kbq-accordion-item-states-disabled-icon-color) !important;
+        }
+    }
+}
+
+button.kbq-accordion-trigger {
+    flex: 1;
+}

package/accordion/accordion.component.d.ts

@@ -0,0 +1,20 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy } from '@angular/core';
+import { RdxAccordionType } from '@radix-ng/primitives/accordion';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/accordion";
+export type KbqAccordionType = RdxAccordionType;
+export declare enum KbqAccordionVariant {
+    fill = "fill",
+    hug = "hug",
+    hugSpaceBetween = "hugSpaceBetween"
+}
+export declare class KbqAccordion implements OnDestroy {
+    private focusMonitor;
+    private elementRef;
+    variant: KbqAccordionVariant | string;
+    constructor(focusMonitor: FocusMonitor, elementRef: ElementRef<HTMLElement>);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAccordion, "kbq-accordion, [kbq-accordion]", never, { "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], false, [{ directive: typeof i1.RdxAccordionRootDirective; inputs: { "type": "type"; "collapsible": "collapsible"; "disabled": "disabled"; "defaultValue": "defaultValue"; "value": "value"; }; outputs: { "onValueChange": "onValueChange"; }; }]>;
+}

package/accordion/accordion.component.scss

@@ -0,0 +1,66 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/tokens' as *;
+
+@use './accordion-theme' as *;
+
+@keyframes slideDown {
+    from {
+        height: 0;
+        padding-bottom: 0;
+    }
+
+    to {
+        height: var(--radix-accordion-content-height);
+        padding-bottom: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        height: var(--radix-accordion-content-height);
+        padding-bottom: 0;
+    }
+
+    to {
+        height: 0;
+        padding-bottom: 0;
+    }
+}
+
+.kbq-accordion {
+    display: block;
+}
+
+.kbq-accordion-item {
+    box-sizing: border-box;
+    display: block;
+
+    border-width: 2px;
+    border-style: solid;
+    border-color: transparent;
+}
+
+.kbq-accordion-header {
+    display: flex;
+
+    height: var(--kbq-accordion-size-item-header-height);
+}
+
+.kbq-accordion-content {
+    display: block;
+    overflow: hidden;
+    padding: var(--kbq-accordion-size-item-content-padding);
+
+    &[data-state='open'] {
+        animation: slideDown 300ms ease-out;
+    }
+
+    &[data-state='closed'] {
+        animation: slideUp 300ms ease-out;
+    }
+}
+
+@include kbq-accordion-theme();
+@include kbq-accordion-typography();

package/accordion/accordion.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./accordion.component";
+import * as i2 from "./accordion-content";
+import * as i3 from "./accordion-header";
+import * as i4 from "./accordion-item";
+import * as i5 from "./accordion-trigger.component";
+import * as i6 from "@koobiq/components/icon";
+export declare class KbqAccordionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqAccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqAccordionModule, [typeof i1.KbqAccordion, typeof i2.KbqAccordionContent, typeof i3.KbqAccordionHeader, typeof i4.KbqAccordionItem, typeof i5.KbqAccordionTrigger], [typeof i6.KbqIcon], [typeof i1.KbqAccordion, typeof i2.KbqAccordionContent, typeof i3.KbqAccordionHeader, typeof i4.KbqAccordionItem, typeof i5.KbqAccordionTrigger]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqAccordionModule>;
+}

package/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/accordion/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './accordion-content';
+export * from './accordion-header';
+export * from './accordion-item';
+export * from './accordion-trigger.component';
+export * from './accordion.component';
+export * from './accordion.module';

package/alert/_alert-theme.scss

@@ -5,14 +5,14 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-alert-style($type, $style-name) {
-    background: kbq-css-variable(alert-#{$type}-#{$style-name}-container-background);
+    background: var(--kbq-alert-#{$type}-#{$style-name}-container-background);
 
     .kbq-alert__title {
-        color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-title);
+        color: var(--kbq-alert-#{$type}-#{$style-name}-container-title);
     }
 
     .kbq-alert__text {
-        color: kbq-css-variable(alert-#{$type}-#{$style-name}-container-text);
+        color: var(--kbq-alert-#{$type}-#{$style-name}-container-text);
     }
 }
 

package/alert/alert-tokens.scss

@@ -16,7 +16,7 @@
     --kbq-alert-size-normal-icon-margin-left: var(--kbq-size-m);
     --kbq-alert-size-normal-icon-padding-top: var(--kbq-size-xxs);
     --kbq-alert-size-normal-title-margin-bottom: var(--kbq-size-xxs);
-    --kbq-alert-size-normal-close-button-margin-top: var(--kbq-size-s);
+    --kbq-alert-size-normal-close-button-margin-top: 10px;
     --kbq-alert-size-normal-close-button-margin-left: var(--kbq-size-3xs);
     --kbq-alert-size-normal-button-stack-padding-top: var(--kbq-size-s);
     --kbq-alert-size-normal-button-stack-padding-bottom: var(--kbq-size-3xs);
@@ -35,7 +35,7 @@
     --kbq-alert-size-compact-icon-margin-right: var(--kbq-size-s);
     --kbq-alert-size-compact-icon-padding-top: var(--kbq-size-xxs);
     --kbq-alert-size-compact-title-margin-bottom: var(--kbq-size-3xs);
-    --kbq-alert-size-compact-close-button-margin-top: var(--kbq-size-s);
+    --kbq-alert-size-compact-close-button-margin-top: 10px;
     --kbq-alert-size-compact-close-button-margin-left: var(--kbq-size-3xs);
     --kbq-alert-size-compact-button-stack-padding-top: var(--kbq-size-s);
     --kbq-alert-size-compact-button-stack-padding-bottom: var(--kbq-size-3xs);

package/alert/alert.component.scss

@@ -11,7 +11,7 @@
     box-sizing: border-box;
 
     & .kbq-alert__content_title {
-        margin-bottom: kbq-css-variable(size-xxs);
+        margin-bottom: var(--kbq-size-xxs);
     }
 }
 
@@ -24,22 +24,19 @@
 }
 
 .kbq-alert.kbq-alert_normal {
-    border-radius: kbq-css-variable(alert-size-normal-container-border-radius);
+    border-radius: var(--kbq-alert-size-normal-container-border-radius);
 
-    padding: kbq-css-variable(alert-size-normal-container-padding-top)
-        kbq-css-variable(alert-size-normal-container-padding-right)
-        kbq-css-variable(alert-size-normal-container-padding-bottom)
-        kbq-css-variable(alert-size-normal-container-padding-left);
+    padding: var(--kbq-alert-size-normal-container-padding-top) var(--kbq-alert-size-normal-container-padding-right)
+        var(--kbq-alert-size-normal-container-padding-bottom) var(--kbq-alert-size-normal-container-padding-left);
 
     & .kbq-alert__icon {
-        margin: kbq-css-variable(alert-size-normal-no-title-icon-margin-top)
-            kbq-css-variable(alert-size-normal-icon-margin-right) kbq-css-variable(alert-size-normal-icon-margin-bottom)
-            kbq-css-variable(alert-size-normal-icon-margin-left);
+        margin: var(--kbq-alert-size-normal-no-title-icon-margin-top) var(--kbq-alert-size-normal-icon-margin-right)
+            var(--kbq-alert-size-normal-icon-margin-bottom) var(--kbq-alert-size-normal-icon-margin-left);
 
         &.kbq-alert__icon_title {
-            margin-top: kbq-css-variable(alert-size-normal-icon-margin-top);
+            margin-top: var(--kbq-alert-size-normal-icon-margin-top);
 
-            padding-top: kbq-css-variable(alert-size-normal-no-title-icon-padding-top);
+            padding-top: var(--kbq-alert-size-normal-no-title-icon-padding-top);
         }
 
         display: inline-flex;
@@ -47,19 +44,17 @@
     }
 
     & .kbq-alert__content {
-        padding: kbq-css-variable(alert-size-normal-content-padding-top)
-            kbq-css-variable(alert-size-normal-content-padding-right)
-            kbq-css-variable(alert-size-normal-content-padding-bottom)
-            kbq-css-variable(alert-size-normal-content-padding-left);
+        padding: var(--kbq-alert-size-normal-content-padding-top) var(--kbq-alert-size-normal-content-padding-right)
+            var(--kbq-alert-size-normal-content-padding-bottom) var(--kbq-alert-size-normal-content-padding-left);
     }
 
     & .kbq-alert__title {
-        margin-bottom: kbq-css-variable(alert-size-normal-title-margin-bottom);
+        margin-bottom: var(--kbq-alert-size-normal-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: kbq-css-variable(alert-size-normal-button-stack-padding-top);
-        padding-bottom: kbq-css-variable(alert-size-normal-button-stack-padding-bottom);
+        padding-top: var(--kbq-alert-size-normal-button-stack-padding-top);
+        padding-bottom: var(--kbq-alert-size-normal-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
@@ -67,29 +62,32 @@
     }
 
     & .kbq-alert__close-button {
-        margin-top: kbq-css-variable(alert-size-normal-close-button-margin-top);
-        margin-left: kbq-css-variable(alert-size-normal-close-button-margin-left);
+        margin-top: var(--kbq-alert-size-normal-close-button-margin-top);
+        margin-left: var(--kbq-alert-size-normal-close-button-margin-left);
+
+        .kbq-icon-button {
+            --kbq-icon-button-size-normal-horizontal-padding: 4px;
+            --kbq-icon-button-size-normal-vertical-padding: 4px;
+        }
     }
 }
 
 .kbq-alert.kbq-alert_compact {
-    border-radius: kbq-css-variable(alert-size-compact-container-border-radius);
+    border-radius: var(--kbq-alert-size-compact-container-border-radius);
 
-    padding: kbq-css-variable(alert-size-compact-container-padding-top)
-        kbq-css-variable(alert-size-compact-container-padding-right)
-        kbq-css-variable(alert-size-compact-container-padding-bottom)
-        kbq-css-variable(alert-size-compact-container-padding-left);
+    padding: var(--kbq-alert-size-compact-container-padding-top) var(--kbq-alert-size-compact-container-padding-right)
+        var(--kbq-alert-size-compact-container-padding-bottom) var(--kbq-alert-size-compact-container-padding-left);
 
     & .kbq-alert__icon {
-        margin-top: kbq-css-variable(alert-size-compact-no-title-icon-margin-top);
-        margin-right: kbq-css-variable(alert-size-compact-icon-margin-right);
+        margin-top: var(--kbq-alert-size-compact-no-title-icon-margin-top);
+        margin-right: var(--kbq-alert-size-compact-icon-margin-right);
 
-        padding-top: kbq-css-variable(alert-size-compact-no-title-icon-padding-top);
+        padding-top: var(--kbq-alert-size-compact-no-title-icon-padding-top);
 
         &.kbq-alert__icon_title {
-            margin-top: kbq-css-variable(alert-size-compact-icon-margin-top);
+            margin-top: var(--kbq-alert-size-compact-icon-margin-top);
 
-            padding-top: kbq-css-variable(alert-size-compact-icon-padding-top);
+            padding-top: var(--kbq-alert-size-compact-icon-padding-top);
         }
 
         display: inline-flex;
@@ -97,19 +95,17 @@
     }
 
     & .kbq-alert__content {
-        padding: kbq-css-variable(alert-size-compact-content-padding-top)
-            kbq-css-variable(alert-size-compact-content-padding-right)
-            kbq-css-variable(alert-size-compact-content-padding-bottom)
-            kbq-css-variable(alert-size-compact-content-padding-left);
+        padding: var(--kbq-alert-size-compact-content-padding-top) var(--kbq-alert-size-compact-content-padding-right)
+            var(--kbq-alert-size-compact-content-padding-bottom) var(--kbq-alert-size-compact-content-padding-left);
     }
 
     & .kbq-alert__title {
-        margin-bottom: kbq-css-variable(alert-size-compact-title-margin-bottom);
+        margin-bottom: var(--kbq-alert-size-compact-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: kbq-css-variable(alert-size-compact-button-stack-padding-top);
-        padding-bottom: kbq-css-variable(alert-size-compact-button-stack-padding-bottom);
+        padding-top: var(--kbq-alert-size-compact-button-stack-padding-top);
+        padding-bottom: var(--kbq-alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__button-stack_has-button {
@@ -117,8 +113,13 @@
     }
 
     & .kbq-alert__close-button {
-        margin-top: kbq-css-variable(alert-size-compact-close-button-margin-top);
-        margin-left: kbq-css-variable(alert-size-compact-close-button-margin-left);
+        margin-top: var(--kbq-alert-size-compact-close-button-margin-top);
+        margin-left: var(--kbq-alert-size-compact-close-button-margin-left);
+
+        .kbq-icon-button {
+            --kbq-icon-button-size-normal-horizontal-padding: 4px;
+            --kbq-icon-button-size-normal-vertical-padding: 4px;
+        }
     }
 }
 

package/autocomplete/_autocomplete-theme.scss

@@ -6,7 +6,7 @@
 
 @mixin kbq-autocomplete-theme {
     .kbq-autocomplete-panel {
-        box-shadow: kbq-css-variable(select-panel-dropdown-shadow);
-        background: kbq-css-variable(select-panel-dropdown-background);
+        box-shadow: var(--kbq-select-panel-dropdown-shadow);
+        background: var(--kbq-select-panel-dropdown-background);
     }
 }

package/autocomplete/autocomplete.scss

@@ -19,12 +19,12 @@
     width: 100%;
     max-width: none;
 
-    max-height: kbq-css-variable(autocomplete-size-panel-max-height);
+    max-height: var(--kbq-autocomplete-size-panel-max-height);
 
-    border-bottom-left-radius: kbq-css-variable(autocomplete-size-panel-border-radius);
-    border-bottom-right-radius: kbq-css-variable(autocomplete-size-panel-border-radius);
+    border-bottom-left-radius: var(--kbq-autocomplete-size-panel-border-radius);
+    border-bottom-right-radius: var(--kbq-autocomplete-size-panel-border-radius);
 
-    padding: kbq-css-variable(autocomplete-size-panel-padding);
+    padding: var(--kbq-autocomplete-size-panel-padding);
 
     &.kbq-autocomplete_visible {
         visibility: visible;
@@ -35,8 +35,8 @@
     }
 
     .kbq-autocomplete-panel-above & {
-        border-radius: kbq-css-variable(autocomplete-size-panel-border-radius)
-            kbq-css-variable(autocomplete-size-panel-border-radius) 0 0;
+        border-radius: var(--kbq-autocomplete-size-panel-border-radius) var(--kbq-autocomplete-size-panel-border-radius)
+            0 0;
     }
 
     // We need to offset horizontal dividers by their height, because

package/badge/_badge-theme.scss

@@ -7,21 +7,21 @@
 @mixin kbq-badge-style($type, $sub-type, $style-name) {
     $base-path: badge-#{$type}-#{$sub-type}-#{$style-name};
 
-    color: kbq-css-variable(#{$base-path}-color);
-    background: kbq-css-variable(#{$base-path}-background);
+    color: var(--kbq-#{$base-path}-color);
+    background: var(--kbq-#{$base-path}-background);
 
     & .kbq-badge-caption {
-        color: kbq-css-variable(#{$base-path}-caption);
+        color: var(--kbq-#{$base-path}-caption);
     }
 
     & .kbq-icon {
-        color: kbq-css-variable(#{$base-path}-icon) !important;
+        color: var(--kbq-#{$base-path}-icon) !important;
     }
 
     @if $type == filled {
         border: transparent;
     } @else {
-        border-color: kbq-css-variable(#{$base-path}-border);
+        border-color: var(--kbq-#{$base-path}-border);
     }
 }